/* ============================================================================ SITONCE v3.0 — Material 3 tokens and primitives The only file in the project permitted to contain a hex literal. v2 was a Toss-informed house style: hairline-free, blue action, navy brand. v3 replaces it wholesale with the Material 3 baseline scheme, because the design now comes out of the Material 3 Design Kit and a half-ported system is worse than either one whole. Ported by hand from the kit's baseline light scheme. The design doc paints raw rgb() inline; every one of those values is named here exactly once, so a component file never has to know a colour by number. ========================================================================== */ :root{ /* ---------------------------------------------------------------- scheme M3 baseline light. Names are the kit's own — resist renaming them to something friendlier, because the whole value of using a published system is that the token name and the Figma layer name are the same string. */ --primary:#2F5BEA; --on-primary:#FFFFFF; --primary-container:#D9E5FF; --on-primary-container:#1B3ECD; --secondary:#55585E; --on-secondary:#FFFFFF; --secondary-container:#E2E5EA; --on-secondary-container:#2C2E32; --tertiary:#293449; --on-tertiary:#FFFFFF; --tertiary-container:#293449; --on-tertiary-container:#FFFFFF; /* A raised surface ON the slate chip — chips and numerals that sit inside a tertiary panel. Solid rather than a white alpha, so contrast is checkable. */ --tertiary-container-high:#434D61; --error:#B3261E; --on-error:#FFFFFF; --error-container:#F9DEDC; --on-error-container:#852221; --surface:#FBFCFE; --on-surface:#1E1F21; --surface-variant:#E2E5EA; --on-surface-variant:#404247; /* Five container steps. M3 separates surfaces by tone rather than by border, so reach for the next step up before reaching for --outline-variant. */ --surface-container-lowest:#FFFFFF; --surface-container-low:#F4F5F7; --surface-container:#EDEEF1; --surface-container-high:#E3E4E7; --surface-container-highest:#D6D7DA; --surface-dim:#C9CACD; --surface-bright:#FBFCFE; --outline:#6C6F75; --outline-variant:#C7CBD1; --inverse-surface:#2D2E2F; --inverse-on-surface:#EDEEF1; --inverse-primary:#96B6FF; --scrim:#000000; --shadow:#000000; /* Disabled content is on-surface at 38%, disabled containers at 12%. Spelled out because rgba() of a var() is not expressible in CSS. */ --on-surface-38:rgba(29,27,32,.38); --on-surface-12:rgba(29,27,32,.12); /* ------------------------------------------------------------------ type Roboto is the kit's typeface. The strict CSP forbids fetching it, so the stack leads with Roboto for the machines that have it and falls through to the platform UI face — which on Windows and macOS is metrically close enough that the scale below still reads as M3. Nothing is fetched. CJK faces are in the stack because the Hong Kong catalogue carries Traditional Chinese question stems. */ --font:Roboto,'Segoe UI Variable Text','Segoe UI',system-ui,-apple-system, 'Noto Sans HK','Microsoft JhengHei',sans-serif; --mono:'Roboto Mono','Cascadia Mono',Consolas,ui-monospace,Menlo,monospace; /* M3 type scale. size / line-height / tracking, tracking in px as published. */ --display-lg:400 57px/64px var(--font); --display-lg-track:-0.25px; --display-md:400 45px/52px var(--font); --display-md-track:0; --display-sm:400 36px/44px var(--font); --display-sm-track:0; --headline-lg:400 32px/40px var(--font); --headline-lg-track:0; --headline-md:400 28px/36px var(--font); --headline-md-track:0; --headline-sm:400 24px/32px var(--font); --headline-sm-track:0; --title-lg:400 22px/28px var(--font); --title-lg-track:0; --title-md:500 16px/24px var(--font); --title-md-track:0.15px; --title-sm:500 14px/20px var(--font); --title-sm-track:0.1px; --body-lg:400 16px/24px var(--font); --body-lg-track:0.5px; --body-md:400 14px/20px var(--font); --body-md-track:0.25px; --body-sm:400 12px/16px var(--font); --body-sm-track:0.4px; --label-lg:500 14px/20px var(--font); --label-lg-track:0.1px; --label-md:500 12px/16px var(--font); --label-md-track:0.5px; --label-sm:500 11px/16px var(--font); --label-sm-track:0.5px; /* Prose measure. Long-form pages only — the app screens are laid out on a grid and set their own column widths. */ --measure:68ch; /* ----------------------------------------------------------------- space 4-point grid. The design lands on 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 56 · 72 and nothing between. */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:48px; --s10:56px; --s11:72px; /* Clearance steps. Only for space that must clear a fixed overlay — the sticky buy bar and the mobile footer. Not for ordinary spacing. */ --s12:80px; --s13:104px; /* ----------------------------------------------------------------- shape M3 shape scale. Cards and containers are 12 (medium); buttons take the full pill; chips and small badges take 8. */ --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:28px; --r-full:999px; /* ------------------------------------------------------------- elevation M3 elevation is a two-part shadow: a tight key shadow and a wide ambient one. Levels 3–5 exist for menus and dialogs; nothing in this product has earned one yet. */ --elev-0:none; --elev-1:0 1px 2px 0 rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15); --elev-2:0 1px 2px 0 rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15); --elev-3:0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px 0 rgba(0,0,0,.30); /* --------------------------------------------------------- state layers Every interactive surface tints with its own content colour at these opacities. Consumed by .m3-interactive in app.css. */ --state-hover:0.08; --state-focus:0.10; --state-press:0.10; --state-drag:0.16; /* ---------------------------------------------------------------- motion M3 emphasized easing for anything that enters or leaves, standard easing for state changes that stay put. */ --ease-standard:cubic-bezier(0.2,0,0,1); --ease-emphasized:cubic-bezier(0.2,0,0,1); --ease-decelerate:cubic-bezier(0,0,0,1); --dur-short:100ms; --dur-medium:200ms; --dur-long:400ms; /* ----------------------------------------------------------------- shell Fixed measurements the design repeats on every screen. Desktop first: the rail and the app bar are constants, and the content column below them is what flexes. */ --rail-w:96px; --appbar-h:64px; --page-max:1440px; --reading-col:760px; /* the player's question column */ } /* ============================================================================ Primitives. Everything below is the smallest set of rules that makes a bare HTML document look like the design system before a single component class is applied. ========================================================================== */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--surface-dim); color:var(--on-surface); font:var(--body-lg); letter-spacing:var(--body-lg-track); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* Headings carry the M3 scale rather than browser defaults. Weight is 400 all the way up — M3 gets its hierarchy from size, not from bold. */ h1{margin:0; font:var(--headline-md); letter-spacing:var(--headline-md-track)} h2{margin:0; font:var(--title-lg); letter-spacing:var(--title-lg-track)} h3{margin:0; font:var(--title-md); letter-spacing:var(--title-md-track)} h4,h5,h6{margin:0; font:var(--title-sm); letter-spacing:var(--title-sm-track)} p{margin:0} a{color:var(--primary); text-decoration:none} a:hover{color:var(--on-primary-container); text-decoration:underline} /* Figures must not reflow when they change — a timer that shifts the layout every second is the fastest way to make a page feel cheap. */ /* "All figures tabular-nums" is the rule, so it is set once on the root rather than on a list of classes an author has to remember. The allowlist that used to live here (time, .num, .pct, .timer, td.num, th.num) covered the obvious figures and missed 49 rendered elements — scores, counts, dates, prices and percentages that simply had no class. A number that changes must not shift the layout, and that only holds if it holds everywhere. */ body{font-variant-numeric:tabular-nums} img,svg{max-width:100%} svg{display:block; fill:currentColor} /* Every glyph in the kit subset is a filled path, so the line above is right for all fourteen. One mark is stroked instead - the globe, see icons.js - and it needs this, because the rule above outranks its own fill attribute. */ svg.stroked{fill:none; stroke:currentColor} table{border-collapse:collapse; width:100%} caption{text-align:left} hr{border:0; border-top:1px solid var(--outline-variant); margin:var(--s6) 0} code,kbd,samp{font-family:var(--mono); font-size:.9em} /* Inputs inherit the type stack. Left to themselves they fall back to the platform form font, which is the single most visible way a styled page gives itself away. */ input,button,select,textarea{font:inherit; letter-spacing:inherit; color:inherit} /* Focus is never removed. M3 puts a 3px secondary-toned ring outside the element so it survives on both light and tinted containers. */ :focus-visible{outline:3px solid var(--secondary); outline-offset:2px} ::selection{background:var(--primary-container); color:var(--on-primary-container)} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:1ms !important; animation-iteration-count:1 !important; transition-duration:1ms !important; scroll-behavior:auto !important; } }