/* SprichMit?! — warm editorial theme, dark by default. * * Every neutral is mixed towards brown rather than blue, so the dark theme * reads as lamplight rather than as a terminal, and the light theme reads as * paper rather than as a dashboard. One warm accent carries all interaction. * * Type: one editorial serif for the entire interface — headings, prose, * navigation, buttons, labels and forms. Monospace appears only for code. * * Contrast is not asserted here. `tests/test_design_system.py` recomputes * every ratio from the tokens below, for both themes, and fails the build if * any pair drops under WCAG 2.2 AA. */ /* Self-hosted, no CDN, no third-party request. * Newsreader (Production Type), SIL Open Font License 1.1 — see * fonts/OFL-Newsreader.txt. Built by `build_fonts.sh`: one variable file, * optical size pinned, weight 400-700, subset to Latin. 37 kB for the whole * interface. This is an original choice of an open-source editorial serif; it * is not, and does not claim to be, anyone else's proprietary typeface. */ @font-face { font-family: "Newsreader"; src: url("../fonts/newsreader.a37f22bc4b9f.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } /* --- Theme tokens -------------------------------------------------------- */ /* Dark is the default: `:root` carries it, so a first-time visitor gets dark * from the very first byte with no script involved — and so does any page whose * tag we do not control, such as the Django admin. Light is opt-in and * only ever applied by `data-theme="light"`, which is why `prefers-color-scheme` * is deliberately absent: the operating system must not decide the first visit. */ :root { color-scheme: dark; /* Warm neutrals — hue held around 25deg, never neutral grey */ --c-bg: #1a1512; --c-surface: #221c18; --c-sunken: #2a231e; --c-border: #3a312a; --c-border-strong: #8a7767; --c-text: #f2ebe3; --c-text-muted: #bcaea0; /* Clay accent — the single warm signal colour */ --c-accent: #e79470; --c-accent-hover: #f4ad8d; --c-accent-soft: #2e211b; --c-accent-ink: #1a1512; --c-ok: #8fd0a0; --c-ok-soft: #1d2a21; --c-warn: #e8bd75; --c-warn-soft: #2c2418; --c-danger: #f0968a; --c-danger-soft: #31201d; --c-focus: #f4ad8d; --shadow-sm: 0 1px 2px rgb(0 0 0 / 30%); --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 6px 20px rgb(0 0 0 / 22%); --shadow-lg: 0 2px 4px rgb(0 0 0 / 32%), 0 14px 40px rgb(0 0 0 / 30%); } :root[data-theme="light"] { color-scheme: light; --c-bg: #faf7f2; --c-surface: #fffdfa; --c-sunken: #f3ede4; --c-border: #e7ded1; --c-border-strong: #8d7a68; --c-text: #2b2320; --c-text-muted: #6b5d54; /* Darker than it looks like it needs to be: the lighter terracotta reached * only 4.28:1 against the secondary surface, which is what the footer and * quiet cards use. */ --c-accent: #a8481f; --c-accent-hover: #8f3a15; --c-accent-soft: #fbeee7; --c-accent-ink: #ffffff; --c-ok: #2f6b45; --c-ok-soft: #eaf3ec; --c-warn: #8a5a12; --c-warn-soft: #fbf1e0; --c-danger: #a3352b; --c-danger-soft: #fbebe9; --c-focus: #98421f; --shadow-sm: 0 1px 2px rgb(70 50 35 / 6%); --shadow: 0 1px 2px rgb(70 50 35 / 5%), 0 6px 20px rgb(70 50 35 / 7%); --shadow-lg: 0 2px 4px rgb(70 50 35 / 6%), 0 14px 40px rgb(70 50 35 / 10%); } :root { /* One typeface for the whole interface — headings, prose, navigation, * buttons, labels and forms alike. The fallbacks are all serifs, so a * failed font load changes the texture and not the character of the page. */ --font: "Newsreader", ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; /* Fluid: calm on a phone, generous on a wide screen, no breakpoint jump. */ --fs-2xl: clamp(1.5rem, 1.25rem + 1.1vw, 1.875rem); --fs-3xl: clamp(2rem, 1.5rem + 2.2vw, 2.875rem); --lh-tight: 1.15; --lh-base: 1.6; --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4.5rem; --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; /* Shadows are defined per theme above: a warm grey lift reads as depth on * paper, but as haze on a dark page, which needs a deeper black instead. */ --measure: 68ch; --container: 70rem; --container-narrow: 40rem; --focus-ring: 3px solid var(--c-focus); --focus-offset: 2px; --transition: 140ms ease; --control-height: 2.875rem; } /* --- Reset --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { /* Anchors and the skip link land below the sticky header, not under it. */ scroll-padding-top: 5rem; } /* Form controls do not inherit the page font by default — they fall back to * the UA's own, which is how a stray Arial ends up in the middle of an * otherwise consistent interface. Set once here so every control type is * covered, including the ones no rule below names explicitly. */ input, select, textarea, button { font-family: inherit; } body { margin: 0; background: var(--c-bg); color: var(--c-text); font-family: var(--font); font-size: var(--fs-base); line-height: var(--lh-base); -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100vh; } h1, h2, h3, h4 { font-family: var(--font); line-height: var(--lh-tight); margin: 0 0 var(--sp-3); font-weight: 600; letter-spacing: -0.014em; text-wrap: balance; color: var(--c-text); } h1 { font-size: var(--fs-3xl); } h2 { font-size: var(--fs-2xl); margin-top: var(--sp-7); } h3 { font-size: var(--fs-xl); margin-top: var(--sp-5); } h4 { font-size: var(--fs-lg); margin-top: var(--sp-4); } p, ul, ol, dl { margin: 0 0 var(--sp-4); } p, li { max-width: var(--measure); } img { max-width: 100%; height: auto; } code { font-family: var(--font-mono); font-size: 0.9em; background: var(--c-sunken); border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 0.1em 0.35em; } hr { border: 0; border-top: 1px solid var(--c-border); margin: var(--sp-6) 0; } /* --- Tables -------------------------------------------------------------- */ table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); } th, td { text-align: left; padding: var(--sp-3); border-bottom: 1px solid var(--c-border); vertical-align: top; } th { font-weight: 600; color: var(--c-text); background: var(--c-sunken); } /* A wide table scrolls inside its own box; the page itself never scrolls * sideways. The CSP forbids inline styles, so this must be a class. */ .table-scroll { overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--radius); } .table-scroll table { margin: 0; } /* --- Links --------------------------------------------------------------- */ a { color: var(--c-accent); text-decoration-thickness: 1px; text-underline-offset: 0.16em; transition: color var(--transition); } a:hover { color: var(--c-accent-hover); } /* One focus treatment for the whole site, and it is never removed. */ :focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: 3px; } /* --- Layout -------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-5); } main { flex: 1 0 auto; padding-block: var(--sp-7) var(--sp-8); } /* Vertical rhythm between top-level sections, so pages do not need margins * sprinkled through their markup. */ main > .container > * + * { margin-top: var(--sp-7); } @media (min-width: 48em) { main > .container > * + * { margin-top: var(--sp-8); } } .stack > * + * { margin-top: var(--sp-4); } .grid { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; } @media (min-width: 40em) { .grid-2, .grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 60em) { .grid-3 { grid-template-columns: repeat(3, 1fr); } } .narrow { max-width: var(--container-narrow); margin-inline: auto; } /* --- Accessibility helpers ---------------------------------------------- */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--sp-4); top: -10rem; z-index: 100; background: var(--c-accent); color: var(--c-accent-ink); padding: var(--sp-3) var(--sp-4); border-radius: 0 0 var(--radius) var(--radius); text-decoration: none; font-weight: 600; transition: top var(--transition); } .skip-link:focus { top: 0; color: var(--c-accent-ink); } main:focus { outline: none; } /* --- Site header --------------------------------------------------------- */ .site-header { background: color-mix(in srgb, var(--c-bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--c-border); position: sticky; top: 0; z-index: 40; } .site-header__inner { display: flex; align-items: center; gap: var(--sp-4); min-height: 4.25rem; flex-wrap: wrap; } .brand { font-family: var(--font); font-size: 1.3125rem; font-weight: 600; color: var(--c-text); text-decoration: none; letter-spacing: -0.02em; white-space: nowrap; margin-right: auto; } .brand span { color: var(--c-accent); } .brand:hover { color: var(--c-text); } .site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; } .site-nav li { max-width: none; } .site-nav form { margin: 0; } /* `:not(.btn)` matters: this rule is more specific than `.btn`, so without it * a link styled as a button loses its horizontal padding and the label spills * out of its own background. */ .site-nav a:not(.btn) { display: inline-block; padding: var(--sp-2) var(--sp-3); color: var(--c-text-muted); text-decoration: none; border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 500; transition: color var(--transition), background var(--transition); } .site-nav a:not(.btn):hover { color: var(--c-text); background: var(--c-sunken); } /* The current page is marked for sighted users and for screen readers * (`aria-current` is on the element itself). */ .site-nav a[aria-current="page"] { color: var(--c-accent); background: var(--c-accent-soft); } /* --- Theme toggle -------------------------------------------------------- */ /* Ships hidden and is revealed by theme.js. Without JavaScript there is no * localStorage to remember a choice, so a visible control would be a dead * one — better to not offer it than to offer a button that does nothing. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; flex: none; padding: 0; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-surface); color: var(--c-text-muted); cursor: pointer; transition: color var(--transition), background var(--transition), border-color var(--transition); } .theme-toggle:hover { color: var(--c-accent); border-color: var(--c-border-strong); background: var(--c-sunken); } /* No `display` here: `.theme-toggle svg` would outrank the single-class rules * below and both icons would show at once. */ .theme-toggle svg { width: 1.125rem; height: 1.125rem; } /* Show the icon for the theme you would switch *to*, which is the one the * button's accessible name promises. */ .theme-toggle__moon { display: block; } .theme-toggle__sun { display: none; } :root[data-theme="dark"] .theme-toggle__moon { display: none; } :root[data-theme="dark"] .theme-toggle__sun { display: block; } /* Mobile navigation: a native disclosure, so it opens and closes with no * JavaScript at all and is announced correctly by screen readers. */ .nav-disclosure { margin-left: var(--sp-2); } .nav-disclosure > summary { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); min-height: 2.75rem; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-surface); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; list-style: none; user-select: none; } .nav-disclosure > summary::-webkit-details-marker { display: none; } .nav-disclosure__icon { display: block; width: 1.125rem; height: 2px; background: currentcolor; position: relative; } .nav-disclosure__icon::before, .nav-disclosure__icon::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentcolor; } .nav-disclosure__icon::before { top: -6px; } .nav-disclosure__icon::after { top: 6px; } .nav-disclosure[open] > summary { background: var(--c-sunken); } .nav-disclosure__panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--c-surface); border-bottom: 1px solid var(--c-border); box-shadow: var(--shadow); padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); } .nav-disclosure__panel .site-nav ul { flex-direction: column; align-items: stretch; gap: var(--sp-1); } .nav-disclosure__panel .site-nav a:not(.btn) { padding: var(--sp-3); font-size: var(--fs-base); } .nav-disclosure__panel .btn { width: 100%; } /* The inline desktop navigation, hidden on a phone where the disclosure * takes over. Exactly one of the two is ever displayed, so only one is in the * accessibility tree at a time. */ .site-nav-inline { display: none; } @media (min-width: 56em) { .nav-disclosure { display: none; } /* No `margin-left: auto` here: the brand already pushes everything right, * and a second auto margin would strand the theme control mid-header. */ .site-nav-inline { display: flex; align-items: center; gap: var(--sp-5); } } /* --- Hero ---------------------------------------------------------------- */ .hero { background: radial-gradient(60rem 24rem at 15% -10%, var(--c-accent-soft), transparent 70%), var(--c-bg); border-bottom: 1px solid var(--c-border); padding-block: var(--sp-8); } .hero h1 { max-width: 18ch; margin-bottom: var(--sp-4); } .hero .lead { max-width: 52ch; } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); } /* --- Page headers -------------------------------------------------------- */ .page-header { border-bottom: 1px solid var(--c-border); padding-bottom: var(--sp-5); } .page-header h1 { margin-bottom: var(--sp-3); } .page-header > :last-child { margin-bottom: 0; } .eyebrow { display: inline-block; font-family: var(--font); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-accent); margin-bottom: var(--sp-3); } .lead { font-family: var(--font); font-size: var(--fs-lg); color: var(--c-text-muted); line-height: 1.55; } /* --- Buttons ------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--control-height); padding: var(--sp-3) var(--sp-5); font-family: var(--font); font-size: var(--fs-base); font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; border: 1px solid transparent; border-radius: var(--radius); background: var(--c-accent); color: var(--c-accent-ink); cursor: pointer; transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition); } .btn:hover { background: var(--c-accent-hover); color: var(--c-accent-ink); } .btn:active { transform: translateY(1px); } .btn--secondary { background: var(--c-surface); color: var(--c-text); border-color: var(--c-border-strong); } .btn--secondary:hover { background: var(--c-sunken); color: var(--c-text); } .btn--danger { background: var(--c-danger); color: #fff; } .btn--danger:hover { background: #8a2b22; color: #fff; } .btn--quiet { background: none; color: var(--c-text-muted); border-color: transparent; font-weight: 500; } .btn--quiet:hover { background: var(--c-sunken); color: var(--c-text); } .btn--sm { min-height: 2.25rem; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); } .btn--block { width: 100%; } .btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; } /* HTMX sets this attribute for the duration of a request. Without a visible * change, a slow connection looks like a dead button and gets clicked twice. */ .btn[aria-busy="true"] { opacity: 0.7; cursor: progress; } .btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); } /* --- Cards --------------------------------------------------------------- */ .card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow-sm); } .card > :last-child { margin-bottom: 0; } .card--quiet { background: var(--c-sunken); box-shadow: none; } .card--link { transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); } .card--link:hover { border-color: var(--c-border-strong); box-shadow: var(--shadow); transform: translateY(-2px); } .tile-list { list-style: none; padding: 0; margin: 0; } .tile-list > li { max-width: none; } /* Batch cards: the whole card is clickable, but only the title is a link, so * the accessibility tree stays honest and "open in new tab" still works. */ .batch-card { position: relative; display: flex; flex-direction: column; height: 100%; } .batch-card__title { margin-top: 0; margin-bottom: var(--sp-2); font-size: var(--fs-xl); } .batch-card__title a { text-decoration: none; color: var(--c-text); } .batch-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); } .batch-card__title a:hover { color: var(--c-accent); } .batch-card__meta { font-size: var(--fs-sm); color: var(--c-text-muted); margin-bottom: var(--sp-3); } .batch-card__footer { margin-top: auto; padding-top: var(--sp-4); } /* --- Badges -------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 0.2em 0.7em; border-radius: 999px; font-family: var(--font); font-size: var(--fs-sm); font-weight: 600; line-height: 1.5; background: var(--c-sunken); color: var(--c-text-muted); border: 1px solid var(--c-border); white-space: nowrap; } .badge--ok { background: var(--c-ok-soft); color: var(--c-ok); border-color: color-mix(in srgb, var(--c-ok) 25%, transparent); } .badge--warn { background: var(--c-warn-soft); color: var(--c-warn); border-color: color-mix(in srgb, var(--c-warn) 25%, transparent); } .badge--danger { background: var(--c-danger-soft); color: var(--c-danger); border-color: color-mix(in srgb, var(--c-danger) 25%, transparent); } .badge--accent { background: var(--c-accent-soft); color: var(--c-accent); border-color: color-mix(in srgb, var(--c-accent) 25%, transparent); } /* --- Notices and alerts -------------------------------------------------- */ .notice { background: var(--c-surface); border: 1px solid var(--c-border); border-left: 4px solid var(--c-border-strong); border-radius: var(--radius); padding: var(--sp-4) var(--sp-5); } .notice > :last-child { margin-bottom: 0; } .notice__title { font-family: var(--font); font-weight: 700; font-size: var(--fs-base); margin: 0 0 var(--sp-2); } .notice--info { background: var(--c-accent-soft); border-left-color: var(--c-accent); } .notice--ok { background: var(--c-ok-soft); border-left-color: var(--c-ok); } .notice--warn { background: var(--c-warn-soft); border-left-color: var(--c-warn); } .notice--danger { background: var(--c-danger-soft); border-left-color: var(--c-danger); } .messages { list-style: none; padding: 0; margin: 0 0 var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); } .messages > li { max-width: none; } /* --- Forms --------------------------------------------------------------- */ form { margin: 0; } .field { margin-bottom: var(--sp-5); } .field > label, .field-label { display: block; font-family: var(--font); font-size: var(--fs-sm); font-weight: 600; color: var(--c-text); margin-bottom: var(--sp-2); } .field .required-mark { color: var(--c-accent); margin-left: 0.15em; } input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="search"], input[type="date"], input[type="datetime-local"], select, textarea { display: block; width: 100%; min-height: var(--control-height); padding: var(--sp-3); font-family: var(--font); font-size: var(--fs-base); line-height: 1.4; color: var(--c-text); background: var(--c-surface); border: 1px solid var(--c-border-strong); border-radius: var(--radius); transition: border-color var(--transition), box-shadow var(--transition); } textarea { min-height: 8rem; resize: vertical; } input:hover, select:hover, textarea:hover { border-color: var(--c-text-muted); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); } /* Keyboard users still get the ring; the box-shadow above is only the * decorative part of the state. */ input:focus-visible, select:focus-visible, textarea:focus-visible { outline: var(--focus-ring); outline-offset: 1px; } input[disabled], select[disabled], textarea[disabled] { background: var(--c-sunken); color: var(--c-text-muted); cursor: not-allowed; } ::placeholder { color: color-mix(in srgb, var(--c-text-muted) 70%, transparent); } /* An invalid field is outlined in red *and* labelled by its error text; colour * is never the only signal. */ .field--invalid input, .field--invalid select, .field--invalid textarea, input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--c-danger); } .field--invalid input:focus, input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--c-danger-soft); } .helptext { display: block; font-size: var(--fs-sm); color: var(--c-text-muted); margin-top: var(--sp-2); max-width: var(--measure); } .helptext ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); } .errorlist { list-style: none; margin: var(--sp-2) 0 0; padding: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--c-danger); } .errorlist li { max-width: var(--measure); } .errorlist li::before { content: "⚠ "; } .form-row { margin-bottom: var(--sp-5); } .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); margin-top: var(--sp-6); } /* Radio and checkbox rows sized for a thumb, not a mouse pointer. */ .choice-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .choice { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; max-width: 100%; min-width: 0; } .choice input { width: 1.25rem; height: 1.25rem; accent-color: var(--c-accent); flex: none; margin: 0; } /* Wraps rather than overflows: an email address plus two badges is wider than * a 360px screen, and pushed the whole page sideways before this. */ .choice span { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); min-width: 0; overflow-wrap: anywhere; min-height: 2.75rem; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); font-size: var(--fs-sm); font-weight: 500; } .choice input:checked + span { border-color: var(--c-accent); background: var(--c-accent-soft); color: var(--c-accent-hover); } .choice input:focus-visible + span { outline: var(--focus-ring); outline-offset: var(--focus-offset); } .checkbox-field { display: flex; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-5); } .checkbox-field input { width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; accent-color: var(--c-accent); flex: none; } .checkbox-field label { margin: 0; font-weight: 500; } /* --- Authentication layout ---------------------------------------------- */ /* Account pages are a focused single column: no sidebar, no distractions, * but the same header and footer as every other page. */ .auth { max-width: 30rem; margin-inline: auto; } .auth__header { text-align: center; margin-bottom: var(--sp-6); } .auth__header h1 { font-size: var(--fs-2xl); margin-bottom: var(--sp-3); } .auth__header p { margin-inline: auto; color: var(--c-text-muted); } .auth__card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--sp-6); box-shadow: var(--shadow); } .auth__card > :last-child { margin-bottom: 0; } .auth__footer { margin-top: var(--sp-5); text-align: center; font-size: var(--fs-sm); color: var(--c-text-muted); } .auth__footer p { max-width: none; margin-bottom: var(--sp-2); } .auth__aside { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--c-border); font-size: var(--fs-sm); color: var(--c-text-muted); } .auth__aside p { max-width: none; margin-bottom: 0; } /* A quiet reassurance line under a form that asks for personal data. */ .privacy-note { display: flex; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--c-text-muted); margin-top: var(--sp-4); } .privacy-note p { margin: 0; max-width: none; } @media (min-width: 48em) { .auth__card { padding: var(--sp-7); } } /* --- Prose --------------------------------------------------------------- */ /* Long-form pages: the serif returns, because this is text to be read rather * than an interface to be operated. */ .prose { max-width: var(--measure); } .prose p, .prose li { font-family: var(--font); font-size: var(--fs-lg); line-height: 1.7; } .prose h2 { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--c-border); } .prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .prose ul { list-style: none; padding-left: 0; } .prose ul > li { position: relative; padding-left: var(--sp-5); margin-bottom: var(--sp-2); } .prose ul > li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent); } .prose ol { padding-left: var(--sp-5); } .prose ol > li { margin-bottom: var(--sp-2); padding-left: var(--sp-1); } .prose blockquote { margin: var(--sp-5) 0; padding: var(--sp-4) var(--sp-5); border-left: 3px solid var(--c-accent); background: var(--c-accent-soft); border-radius: 0 var(--radius) var(--radius) 0; } .prose blockquote > :last-child { margin-bottom: 0; } .prose strong { font-weight: 700; } /* --- Legal pages -------------------------------------------------------- */ .legal-header { max-width: var(--measure); } .legal-layout { display: grid; gap: var(--sp-6); align-items: start; } .legal-prose section + section { margin-top: var(--sp-6); } .legal-prose section > h2 { margin-top: 0; } .legal-address { font-style: normal; line-height: 1.7; } .legal-contact { position: sticky; top: var(--sp-5); } .legal-contact h2 { margin-top: var(--sp-2); font-size: var(--fs-xl); } .legal-contact a { overflow-wrap: anywhere; } .privacy-promise { max-width: var(--measure); } .legal-prose--compact h2 { font-size: var(--fs-xl); } @media (min-width: 56em) { .legal-layout { grid-template-columns: minmax(0, var(--measure)) minmax(17rem, 0.55fr); } } /* --- Steps --------------------------------------------------------------- */ .steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: var(--sp-5); } @media (min-width: 60em) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } } .steps > li { counter-increment: step; max-width: none; padding-top: var(--sp-5); border-top: 2px solid var(--c-border); } .steps > li::before { content: counter(step); display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--c-accent-soft); color: var(--c-accent); font-family: var(--font); font-size: var(--fs-lg); font-weight: 600; margin-bottom: var(--sp-3); } .steps h3 { margin-top: 0; font-size: var(--fs-lg); } .steps > li > :last-child { margin-bottom: 0; } /* --- FAQ ----------------------------------------------------------------- */ .faq { border-top: 1px solid var(--c-border); max-width: var(--measure); } .faq details { border-bottom: 1px solid var(--c-border); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) 0; min-height: 3rem; font-family: var(--font); font-size: var(--fs-lg); font-weight: 600; cursor: pointer; list-style: none; transition: color var(--transition); } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--c-accent); } /* A rotating chevron drawn in CSS — no icon font, no SVG request. */ .faq summary::after { content: ""; flex: none; width: 0.6rem; height: 0.6rem; border-right: 2px solid var(--c-accent); border-bottom: 2px solid var(--c-accent); transform: rotate(45deg); transform-origin: center; transition: transform var(--transition); } .faq details[open] summary::after { transform: rotate(-135deg); } .faq details[open] summary { color: var(--c-accent); } .faq__answer { padding-bottom: var(--sp-5); } .faq__answer > :last-child { margin-bottom: 0; } /* --- Timeline ------------------------------------------------------------ */ .timeline { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--c-border); } .timeline > li { position: relative; max-width: none; padding: 0 0 var(--sp-5) var(--sp-5); } .timeline > li::before { content: ""; position: absolute; left: calc(-0.4rem - 1px); top: 0.45rem; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--c-surface); border: 2px solid var(--c-accent); } .timeline > li:last-child { padding-bottom: 0; } /* Both spans are block-level, or the time and the title run together on one * line and the schedule becomes hard to scan. */ .timeline__when { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--c-text); } .timeline__what { display: block; font-size: var(--fs-sm); color: var(--c-text-muted); } /* --- Definition and detail lists ---------------------------------------- */ .detail-list { margin: 0; display: grid; gap: var(--sp-3); } @media (min-width: 40em) { .detail-list { grid-template-columns: max-content 1fr; gap: var(--sp-3) var(--sp-5); } } .detail-list dt { font-size: var(--fs-sm); font-weight: 600; color: var(--c-text-muted); } .detail-list dd { margin: 0; } /* --- Stats --------------------------------------------------------------- */ .stat-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, 1fr); } @media (min-width: 48em) { .stat-list { grid-template-columns: repeat(4, 1fr); } } .stat { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: var(--sp-4); max-width: none; } .stat__value { display: block; font-family: var(--font); font-size: var(--fs-2xl); font-weight: 600; line-height: 1.1; color: var(--c-text); } .stat__label { display: block; font-size: var(--fs-sm); color: var(--c-text-muted); margin-top: var(--sp-1); } /* --- Empty states -------------------------------------------------------- */ .empty-state { background: var(--c-sunken); border: 1px dashed var(--c-border-strong); border-radius: var(--radius-lg); padding: var(--sp-6); text-align: center; } .empty-state p { margin-inline: auto; } .empty-state > :last-child { margin-bottom: 0; } /* --- Roster (tutor attendance) ------------------------------------------ */ .roster { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); } .roster__person { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: var(--sp-4); max-width: none; } .roster__name { display: block; font-weight: 600; margin-bottom: var(--sp-3); } /* Opaque on purpose: a translucent bar let the radio buttons show through it * exactly when the tutor needed to read the button. */ .sticky-actions { position: sticky; bottom: 0; background: var(--c-bg); border-top: 1px solid var(--c-border); padding: var(--sp-4) 0; margin-top: var(--sp-5); z-index: 20; } /* --- Pagination ---------------------------------------------------------- */ .pagination { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); list-style: none; padding: 0; margin: var(--sp-6) 0 0; } .pagination li { max-width: none; } .pagination__status { font-size: var(--fs-sm); color: var(--c-text-muted); } /* --- Cookie notice ------------------------------------------------------- */ .cookie-notice { position: fixed; inset: auto 0 0 0; z-index: 60; background: var(--c-surface); border-top: 1px solid var(--c-border-strong); box-shadow: var(--shadow-lg); padding: var(--sp-4) 0; } .cookie-notice__inner { display: flex; flex-direction: column; gap: var(--sp-4); } .cookie-notice p { margin: 0; font-size: var(--fs-sm); } .cookie-notice__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); } @media (min-width: 48em) { .cookie-notice__inner { flex-direction: row; align-items: center; justify-content: space-between; } } /* Reserve room so the fixed notice never covers the end of the page. */ body.has-cookie-notice { padding-bottom: 9rem; } @media (min-width: 48em) { body.has-cookie-notice { padding-bottom: 6rem; } } /* --- Footer -------------------------------------------------------------- */ .site-footer { flex: none; background: var(--c-sunken); border-top: 1px solid var(--c-border); padding-block: var(--sp-7); font-size: var(--fs-sm); color: var(--c-text-muted); } .site-footer nav ul { list-style: none; padding: 0; margin: 0 0 var(--sp-5); display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); } .site-footer li { max-width: none; } .site-footer a { color: var(--c-text-muted); text-decoration: none; } .site-footer a:hover { color: var(--c-accent); text-decoration: underline; } .site-footer p { margin: 0; max-width: var(--measure); } .site-footer__meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-3) var(--sp-6); } .site-footer__version { white-space: nowrap; font-variant-numeric: tabular-nums; } /* --- Utilities ----------------------------------------------------------- */ .mt-0 { margin-top: 0; } .mt-5 { margin-top: var(--sp-5); } .mb-0 { margin-bottom: 0; } /* A fieldset used purely for grouping, with no visible box of its own. */ .fieldset-plain { border: 0; padding: 0; margin: 0; min-inline-size: 0; } .text-muted { color: var(--c-text-muted); } .text-sm { font-size: var(--fs-sm); } .text-center { text-align: center; } /* No italic here: the site ships one upright font file, so an italic would be * synthesised by the browser. The tinted background marks it clearly enough. */ .placeholder { background: var(--c-warn-soft); border-bottom: 1px dotted var(--c-warn); padding: 0 0.2em; } /* --- Motion and print ---------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } @media print { .site-header, .site-footer, .cookie-notice, .skip-link, .sticky-actions { display: none; } body { background: #fff; } }