/* ========================================================================== Schoolopedia — design tokens SINGLE SOURCE OF TRUTH FOR COLOUR. A hex, rgb() or named colour anywhere outside this file is a bug. The palette is the warm-paper editorial system taken from the design reference (hellocounsel.ai), at the client's direction: paper #FAF9F5 the page ground — warm off-white, never pure white sand #EFEEEA sunk surfaces, cards, panels ink #191918 headings and dark panels — warm near-black stone #67665F secondary text and hairlines copper #9F6104 the single action colour — CTAs, links, eyebrow bars amber #F9A321 the bright decorative partner to copper Copper and amber are one hue at two lightnesses: copper carries text, amber carries none. There is no second chromatic family on this site. ========================================================================== */ /* A stand-in for Geist while Geist is still downloading. Geist is served with display=swap, so the browser paints in the fallback and re-lays-out the page when the real font arrives. Arial's letters are a different width, so that swap moved the page: the /ai heading wrapped onto three lines in Arial and two in Geist, and everything below it jumped up sixty-three pixels about a second and a half into the load. Measured, that was a cumulative layout shift of 0.17 on /ai and 0.11 on /about — both past the 0.1 that counts as good. This is Arial with Geist's metrics stamped onto it, so the fallback occupies exactly the space the real font will. One face per weight, because Arial has no medium: at 500 the browser reaches for Arial regular and at 600 for Arial bold, and the width ratio is different in each case — 102.6% and 99.6% against 100.4% at regular. A single number would have fixed one weight and moved the other two. The numbers are measured, not guessed. Both families were rendered at 1000px in Chrome at each weight and compared: size-adjust = geist.width / arial.width ascent-override = geist.ascent / (1000 x size-adjust) descent-override = geist.descent / (1000 x size-adjust) Liberation Sans and Helvetica are listed after Arial because they are what it resolves to on Linux and macOS, and both are metric-compatible with it. */ @font-face { font-family: "Geist Fallback"; font-weight: 400; src: local("Arial"), local("Liberation Sans"), local("Helvetica"); size-adjust: 100.44%; ascent-override: 100.06%; descent-override: 29.37%; line-gap-override: 0%; } @font-face { font-family: "Geist Fallback"; font-weight: 500; src: local("Arial"), local("Liberation Sans"), local("Helvetica"); size-adjust: 102.60%; ascent-override: 97.95%; descent-override: 28.75%; line-gap-override: 0%; } @font-face { font-family: "Geist Fallback"; font-weight: 600; src: local("Arial Bold"), local("Arial"), local("Liberation Sans Bold"), local("Helvetica"); size-adjust: 99.59%; ascent-override: 100.92%; descent-override: 29.62%; line-gap-override: 0%; } :root { /* ---------- brand copper / amber ---------- --color-amber is the bright end of the brand hue. White text on it is only 1.94:1, so it is for decorative fills, bars, marks and gradients only. Anything carrying text uses --color-copper or darker. */ --color-amber: #f9a321; /* decorative — bars, rules, gradients, marks */ --color-copper: #9f6104; /* CTA fill — white text is 5.0:1, AA */ --color-copper-deep: #7d4e03; /* hover / pressed on a copper fill */ --color-copper-text: #7d4e03; /* copper text and links on paper — 6.7:1 */ /* ---------- warm neutrals ---------- */ --color-stone: #67665f; /* secondary accent — 5.5:1 on paper, AA */ --color-stone-deep: #4e4d48; /* ---------- surfaces ---------- Depth is a tone step, never a shadow: paper → paper-cool → sand → warm sand → ink. Pure white exists only where a card must lift off paper. */ --color-surface: #faf9f5; /* paper */ --color-surface-alt: #f7f6f2; /* paper-cool */ --color-surface-sunk: #efeeea; /* sand */ --color-surface-tint: #f0e9dc; /* sand-warm */ --color-surface-raised: #ffffff; /* the one pure white — lifted cards */ --color-surface-dark: #191918; /* ---------- ink ---------- */ --color-ink: #191918; --color-ink-soft: #333330; --color-ink-muted: #67665f; /* stone — 5.5:1 on paper, AA */ --color-ink-invert: #faf9f5; --color-ink-invert-muted: #bab9ad; /* 8.9:1 on ink, AA */ /* ---------- lines ---------- */ --color-line: #d3cec6; --color-line-soft: #e9e6df; --color-line-strong: #bab9ad; /* ---------- state ---------- Not brand colours. They exist so errors and warnings read as errors and warnings; never use them decoratively. */ --color-error: #a23a2e; --color-success: #3d6b45; /* Darkened from #8a6a12, which was 4.36:1 on sand — below AA on the one surface a warning is most likely to sit on. This clears 4.9:1 on every surface in the palette. */ --color-warning: #7d5f10; /* ---------- rgb channels (alpha compositing only) ---------- */ --rgb-copper: 159, 97, 4; --rgb-ink: 25, 25, 24; --rgb-surface: 250, 249, 245; /* ---------- derived overlays ---------- */ --overlay-scrim: rgba(var(--rgb-ink), 0.55); --overlay-hairline: rgba(var(--rgb-ink), 0.08); --overlay-hairline-invert: rgba(var(--rgb-surface), 0.16); --overlay-copper-soft: rgba(var(--rgb-copper), 0.12); /* The one sanctioned shadow in the system — see AGENTS.md §1. It lifts the sticky navbar off content scrolling underneath it. Nothing else casts a shadow; do not reuse this token elsewhere. */ --shadow-navbar: 0 1px 2px rgba(var(--rgb-ink), 0.05), 0 4px 12px rgba(var(--rgb-ink), 0.04); /* ---------- gradients ---------- All within the brand hue — amber into copper into stone, or the warm near-black into black. No off-brand hue ever enters a gradient. Use them on bars, rules and full panels only; never behind body copy, and never on a button. */ --gradient-brand: linear-gradient( 90deg, var(--color-amber) 0%, var(--color-copper) 55%, var(--color-stone) 100% ); --gradient-brand-diag: linear-gradient( 135deg, var(--color-copper) 0%, var(--color-copper-deep) 100% ); --gradient-dark: linear-gradient(135deg, #26241f 0%, #100f0e 100%); --gradient-tint: linear-gradient( 180deg, var(--color-surface-tint) 0%, var(--color-surface) 100% ); /* Section-to-section transition. Starts on the paper of the section above and lands on the paper-cool of the section below, so both edges are seamless and the warm swell sits in the middle where nothing meets. */ --gradient-band: linear-gradient( 180deg, var(--color-surface) 0%, var(--color-surface-tint) 50%, var(--color-surface-alt) 100% ); /* ---------- artwork ---------- The dot-matrix sheets are generated, not photographed — see assets/images/CREDITS.md. They carry the reference's halftone texture in the brand palette. Because the dot runs are random they do not tile seamlessly: always use them background-size: cover, no-repeat. */ --dots-invert: url("../images/pattern-dots-invert.png"); --dots-light: url("../images/pattern-dots-light.png"); /* ---------- type ---------- */ --font-sans: "Geist", "Geist Fallback", "Helvetica Neue", Arial, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* ---------- spacing scale ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-15: 60px; --space-20: 80px; --space-25: 100px; /* ---------- layout ---------- */ --container-max: 1280px; --gutter: 24px; --navbar-height: 104px; /* fits the 90px owl mark */ /* ---------- motion ---------- */ --ease-reveal: cubic-bezier(0.65, 0, 0.35, 1); --ease-out: cubic-bezier(0.2, 0, 0, 1); --dur-fast: 200ms; --dur-mid: 400ms; --dur-slow: 700ms; } /* The collapsed navbar (≤900px) carries a smaller mark, so it can be shorter. */ @media (max-width: 900px) { :root { --navbar-height: 72px; } } @media (max-width: 640px) { :root { --gutter: 16px; --space-20: 56px; --space-15: 40px; } }