/* ═══════════════════════════════════════════════════════════════════════════
SHELL — the ground, and the parts an application needs.
Everything here is ours and none of it is a component library: the handful
of pieces any application has and a stylesheet never ships — a pane, a
toolbar, a source list, a sheet, a segmented control — built out of rules
and squares rather than cards and shadows.
The organising idea is that there are only two ways to separate two things:
put a rule between them, or put space between them. Nothing is separated by
being a floating object, because a screen of floating objects has no grid.
Class names are flat and unprefixed. They read as what they are in markup.
═══════════════════════════════════════════════════════════════════════════ */
/* ── ground ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
min-height: 100dvh;
background: var(--paper);
color: var(--ink);
font: 400 var(--t-15)/var(--lh-body) var(--font-ui);
letter-spacing: var(--track-tight);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-wrap: break-word;
}
/* Headings are the grotesque at its heaviest and tightest. Nothing else on
the screen is 700, so weight alone is enough to rank them — they need no
colour, no rule and no size jump to be read as headings. */
h1, h2, h3, h4 {
margin: 0;
font-family: var(--font-display);
font-weight: 700;
line-height: var(--lh-tight);
letter-spacing: var(--track-tighter);
color: var(--ink);
text-wrap: balance;
}
h1 { font-size: clamp(1.5rem, 4.6vw, var(--t-32)); }
h2 { font-size: var(--t-24); }
h3 { font-size: var(--t-17); letter-spacing: var(--track-tight); }
p { margin: 0 0 var(--sp-3); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
svg { flex: none; }
img, video { max-width: 100%; }
/* One focus ring for the whole application. A square offset ring in the
institution's blue — visible on paper and on ink, and never removed: a
back-office tablet gets used with a keyboard more often than anyone
designing for it expects. */
:focus-visible {
outline: var(--rule) solid var(--brand);
outline-offset: 2px;
border-radius: 0;
}
::selection { background: color-mix(in oklab, var(--brand) 22%, transparent); }
/* Utilities. There is no framework here to fight with, so these stay few. */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.grow { flex: 1; min-width: 0; }
.spacer { flex: 1 1 auto; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hide { display: none !important; }
/* The caps label. It is the one piece of typography that appears on every
screen: it names a section, a field, a column and a figure, and it is
always the smallest thing in its group. */
.eyebrow {
display: block;
font: 700 var(--t-11)/1.4 var(--font-ui);
letter-spacing: var(--track-caps);
text-transform: uppercase;
color: var(--ink-3);
}
/* ── the network line ───────────────────────────────────────────────────────
The only moving thing in the interface. A 2px rule across the top of the
viewport while the application is talking to the graph, in place of a
spinner in the middle of the content: it says the system is working
without taking the screen away from whoever is reading it.
goes first inside . */
.netline {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 500;
height: var(--rule);
pointer-events: none;
overflow: hidden;
}
.netline::after {
content: '';
display: block;
height: 100%;
width: 100%;
background: var(--brand);
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--slow) var(--ease), opacity var(--slow) linear;
opacity: 0;
}
/* Indeterminate, because the store counts requests in flight and not bytes.
It runs to 90% and waits there — a bar that reaches the end and keeps
sitting is a bar that has lied. */
.netline.on::after {
opacity: 1;
transform: scaleX(.9);
transition: transform 9s cubic-bezier(0, .7, .3, 1), opacity var(--fast) linear;
}
@media (prefers-reduced-motion: reduce) {
.netline::after { transition: opacity var(--fast) linear; }
.netline.on::after { transform: scaleX(1); }
}
/* ── the frame ──────────────────────────────────────────────────────────── */
.shell { display: block; }
@media (min-width: 60rem) {
.shell {
display: grid;
grid-template-columns: var(--rail) minmax(0, 1fr);
min-height: 100dvh;
}
}
main {
padding: var(--sp-5) clamp(var(--sp-4), 3vw, var(--sp-6)) calc(var(--tab-h) + var(--sp-8));
}
@media (min-width: 60rem) {
main { padding: var(--sp-8) var(--sp-8) var(--sp-16); max-width: 84rem; }
}
/* A view appears. It does not slide, rise or stagger in: motion that carries
no information is motion that has to be waited through every single time. */
.view { animation: appear .18s var(--ease) both; }
@keyframes appear { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .view { animation: none; } }
.stack { display: flex; flex-direction: column; gap: clamp(var(--sp-6), 4vw, var(--sp-10)); }
/* The section marker: a heavy rule, then the head sitting directly on it.
This is what replaces the card. A run of sections down a page reads as a
single ruled column, which is the grid made visible. */
.section-head {
display: flex; align-items: baseline; justify-content: space-between;
flex-wrap: wrap;
gap: var(--sp-2) var(--sp-4);
padding-top: var(--sp-3);
margin-bottom: var(--sp-4);
border-top: var(--rule-heavy) solid var(--rule-ink);
}
.section-head h2, .section-head h1 { font-size: var(--t-20); }
.section-head > .eyebrow { flex-basis: 100%; }
.grid { display: grid; gap: clamp(var(--sp-4), 2.4vw, var(--sp-5)); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); }
.grid.wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.row { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
/* `.stagger` is kept as a hook because the views ask for it, and deliberately
does nothing: things that arrive together were fetched together, and
pretending otherwise is decoration. */
.stagger > * { animation: none; }
/* ── the rail ───────────────────────────────────────────────────────────────
A source list, tablet and up. It is chrome, so it is drawn on the chrome
grey rather than on paper: the rail and the work are two different kinds
of surface, and a rule alone was asking the eye to remember which side of
it it was on. The current entry is marked with a blue bar at its leading
edge rather than a filled pill, because the mark should sit on the grid,
not float in it. */
.rail { display: none; }
@media (min-width: 60rem) {
.rail {
display: flex;
flex-direction: column;
position: sticky;
top: 0;
height: 100dvh;
padding: var(--sp-6) 0 var(--sp-4);
border-right: var(--rule-hair) solid var(--hairline);
background: var(--chrome);
overflow-y: auto;
overscroll-behavior: contain;
}
}
.rail nav { display: flex; flex-direction: column; }
.rail nav a {
position: relative;
display: flex;
align-items: center;
gap: var(--sp-3);
min-height: 40px;
padding: 0 var(--sp-5);
font-size: var(--t-13);
font-weight: 500;
color: var(--ink-2);
transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.rail nav a svg { width: 18px; height: 18px; opacity: .7; }
.rail nav a:hover { background: var(--chrome-2); color: var(--ink); }
.rail nav a[aria-current] { color: var(--ink); font-weight: 700; }
.rail nav a[aria-current]::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: var(--rule-heavy);
background: var(--brand);
}
.rail nav a[aria-current] svg { opacity: 1; }
.rail .foot { margin-top: auto; padding-top: var(--sp-3); border-top: var(--rule-hair) solid var(--hairline); }
.rail .who { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); }
.rail .who b { display: block; font-size: var(--t-13); font-weight: 700; }
.rail .who small { display: block; font-size: var(--t-11); color: var(--ink-3); }
/* ── the mark ─────────────────────────────────────────────────────────────
A blue square with the initial reversed out of it, then the name. The
square is the seal: it is the only filled shape in the chrome, and it is
the one place the institution signs its own interface. */
.mark { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-5) var(--sp-6); }
.mark .seal {
width: 30px; height: 30px; flex: none;
display: grid; place-items: center;
background: var(--brand);
color: #fff;
font: 700 var(--t-17)/1 var(--font-display);
letter-spacing: var(--track-tighter);
}
/* The words never wrap. "Universidad" broken across two lines as "Univers /
idad" is not a logotype, and a bar that is one control too full will do
exactly that rather than overflow. */
.mark .words { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.mark .words b, .mark .words span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mark .words b {
font: 700 var(--t-17)/1.05 var(--font-display);
letter-spacing: var(--track-tighter);
}
.mark .words span {
font: 700 var(--t-11)/1.4 var(--font-ui);
letter-spacing: var(--track-caps);
text-transform: uppercase;
color: var(--ink-3);
}
/* ── the top bar ────────────────────────────────────────────────────────────
One rule under it and nothing else. On a phone it is the only chrome above
the content; on a tablet the rail carries the identity, so the mark drops
out and the bar keeps the title and the controls.
It is drawn on the chrome grey. White-on-white made the brightest band on
the screen out of the one strip nobody is reading, and left the rule under
it doing all the work of saying where the page began. A bar that is a
different surface from the page does not need a rule to be a bar — the
hairline stays anyway, but now it is a joint rather than a load-bearing
wall. */
.topbar {
position: sticky;
top: 0;
z-index: 20;
display: flex;
align-items: center;
gap: var(--sp-3);
min-height: 56px;
padding: var(--sp-2) clamp(var(--sp-4), 3vw, var(--sp-6));
border-bottom: var(--rule-hair) solid var(--hairline);
background: var(--chrome);
}
@media (min-width: 60rem) {
.topbar { min-height: 64px; }
.topbar .mark { display: none; }
}
.topbar .mark { padding: 0; }
/* On a phone the mark and the title are both fighting for a 390px bar, and
the tab bar at the bottom already says which screen this is. The identity
wins: the rail is not there to carry it. */
.topbar h1 { display: none; font-size: clamp(var(--t-17), 4.4vw, var(--t-24)); }
@media (min-width: 60rem) { .topbar h1 { display: block; } }
/* With the title hidden there is nothing left to push the controls to the
right, so on a phone the mark takes the slack. */
.topbar .mark { flex: 1; min-width: 0; }
@media (min-width: 60rem) { .topbar .mark { flex: none; } }
.topbar .sub { font-size: var(--t-12); color: var(--ink-3); }
/* ── the face selector ──────────────────────────────────────────────────────
Which of the system's three faces is being looked through. A combo, not a
list of links: what is selected is what is on screen, and choosing another
entry changes the whole application rather than navigating within it.
It is a real