/*
Design: a register, not a brochure. One typeface (Archivo variable) carries hierarchy through its
width axis rather than a pile of weights; numbers are tabular everywhere because this whole app is
grades, fees and dates. Status is never colour alone — it also has a left edge mark and a word.
Provenance is deliberately quiet: the answer is the page, the evidence is one click under it.
*/
:root {
--paper: #f1f2ee;
--surface: #fbfbf9;
--sunken: #e5e7e1;
/* the student's own column: the one surface that is about them, not the programme */
--you: #e6e9fb;
--ink: #101318;
--quiet: #5f646c;
--rule: #d3d6ce;
--rule-strong: #b6bab0;
--mark: #2b3fe8;
--mark-soft: #dfe2fb;
--met: #23703f;
--met-soft: #dcebdf;
--bad: #b03624;
--bad-soft: #f5ddd8;
--open: #8a6508;
--open-soft: #f3e7c8;
--gutter: clamp(1rem, 4vw, 2.5rem);
--measure: 68ch;
/* one height and one corner for every control on the page */
--control-h: 2rem;
--radius: 3px;
/* native parts (select lists, date pickers, scrollbars) follow the theme too */
color-scheme: light dark;
}
option { background: var(--surface); color: var(--ink); }
@media (prefers-color-scheme: dark) {
:root {
--paper: #14161b;
--surface: #1c1f26;
--sunken: #262a33;
--you: #1f2440;
--ink: #f3f2ee;
--quiet: #9ba1ab;
--rule: #2b2f38;
--rule-strong: #444a56;
--mark: #9aa8ff;
--mark-soft: #262c52;
--met: #74d39a;
--met-soft: #17301f;
--bad: #f28b7a;
--bad-soft: #3a1f1b;
--open: #eab94f;
--open-soft: #33290f;
}
}
*, *::before, *::after { box-sizing: border-box; }
/* room for the scrollbar is kept even on short pages, so switching pages never shifts the layout */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: Archivo, system-ui, sans-serif;
font-size: 16px;
line-height: 1.5;
font-variant-numeric: tabular-nums;
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
h1 { font-size: 1rem; font-variation-settings: 'wdth' 88; }
h2 { font-size: 1.4rem; font-variation-settings: 'wdth' 92; }
/* hierarchy comes from size, width and space alone — no rules, no boxes */
h3 { font-size: 2.1rem; font-weight: 700; font-variation-settings: 'wdth' 78; letter-spacing: -0.015em; }
h4 { font-size: 1.1rem; font-weight: 600; font-variation-settings: 'wdth' 90; margin: 1.25rem 0 0.6rem; }
p { margin: 0 0 0.6rem; max-width: var(--measure); }
a { color: var(--mark); text-underline-offset: 2px; }
a.plain { color: inherit; }
:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 30; background: var(--surface); padding: 0.5rem 1rem; border: 1px solid var(--mark); }
.skip:focus { left: 0; }
/* ---------- shell ---------- */
header {
display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
padding: 0.45rem var(--gutter);
background: var(--surface);
position: sticky; top: 0; z-index: 10;
}
/* The logo file is a monoline drawn in currentColor, which an ![]()
cannot pass in; used as a
mask, it takes the text colour and follows light and dark. */
header h1 a { display: flex; color: inherit; text-decoration: none; padding: 0.3rem 0; }
header h1 .logo {
display: block; height: 1.4rem; aspect-ratio: 220 / 88; background: currentColor;
mask: url(uni-logo.svg) center / contain no-repeat;
}
/* scoped to the header: the breadcrumb trail is a