/* * Hype Climb — hand-written theme, "Forecast" palette. * Self-contained: system font stack, no CDN fonts/images/scripts. Cool * slate-navy chrome with an instrument-cyan brand; every warm hue is reserved * for data so a warm colour on screen always means a number, never * decoration. CSS nesting, :has and light-dark are allowed (allow_browser * versions require Safari 17.5 / Chrome 123 / Firefox 120). */ :root { /* Tell the UA which theme its own chrome should follow -- scrollbars (the page one and the one inside a select's picker) and native control glyphs were rendering light-on-light against a dark page. `light dark` here is the SYSTEM default: it defers to prefers-color-scheme, same as every light-dark token below. An explicit `data-theme` on (bottom of this block) overrides it per-visitor. */ color-scheme: light dark; /* never register any colour token below with `@property { syntax: "" }`. A REGISTERED colour property computes on the DECLARING element, not the element that reads it, which would freeze every light-dark here to :root's own colour-scheme and silently break the always-dark .game-hero: its descendants would stop seeing the hero's explicit dark re-declarations and render whatever :root's scheme happens to be instead. Every token below must stay an *unregistered* custom property. */ /* chrome: cool */ --surface: light-dark(#eef2f7, #0a0e14); --surface-raised: light-dark(#ffffff, #121822); /* Darkened from #e2e8f0 so the light-theme hypemeter track (below) clears 3:1 against every tier's fill, including the lowest band (--hype-low). See the "hype meter fills stay visible" contrast test. */ --surface-overlay: light-dark(#d7dfe9, #1b2330); --border: light-dark(#cfd8e3, #2a3444); --text: light-dark(#0f1720, #e6ecf4); --text-muted: light-dark(#566173, #8d9bb0); --neutral-chip: light-dark(#dde5ef, #253244); --neutral-chip-text: light-dark(#415066, #a9b8cc); /* brand / interactive ONLY -- never a tier of a data scale, never "success". */ --accent: light-dark(#0e7490, #22b8d4); --accent-strong: light-dark(#0b5566, #63d9ee); --accent-contrast: light-dark(#ffffff, #04121a); /* state (chrome semantics) warn and --good's light values are deepened, and --danger's dark value is brightened, past what reads as "correct" in isolation, because each is also used as INK on its own 22%-and-below tint (badges, admin status, triage chips): at that blend the composited background sits mostly at the surface's own colour, so the ink needs real contrast margin against its bare-surface value, not just against the pure hue. test/helpers/palette_contrast_test.rb is what enforces this now -- re-tune against it, don't eyeball a replacement. warn and --hype-moderate deliberately share the amber family. A delay badge (chrome) and a hype chip (data) never render side by side needing to be told apart, and both mean the same thing at a glance -- "middling, pay attention" -- so forcing them into different hues would fight the intensity ramp for no reader benefit. Do not "fix" this later. */ --good: light-dark(#095231, #2fbf7f); --good-strong: light-dark(#063d24, #5fe0a4); --warn: light-dark(#833a0c, #e8a52c); --danger: light-dark(#a3231d, #f4868c); --danger-solid: light-dark(#a3231d, #b52d24); /* data: the intensity ramp, hype only -- --hype-X is the vivid swatch (meter fill, calendar tint: needs only 3:1 non-text contrast against --surface-overlay); --hype-X-ink is the AA text that sits on a 22% tint of it. A single value cannot be both a vivid swatch and AA-safe ink -- that conflation was the muddy light-mode hypemeter (Purpose §3). The light-mode values below are deliberately deep and SATURATED, not merely dark: a desaturated brown-grey at the same luminance reads as mud, which is the exact defect this ramp exists to fix. the tiers are named by DEGREE (low/moderate/high/extreme), and not one hex value moved when they stopped being temperatures. The ramp rises in saturation, which is what carries "more" here; it is not a thermometer and not a landscape. Every warm hue is still reserved for data (Purpose), which is why re-colouring was never the lever -- the tier vocabulary was. */ --hype-low: light-dark(#5f6c86, #7c8ba3); --hype-moderate: light-dark(#b25b00, #efb43a); --hype-high: light-dark(#c1440c, #f9853d); --hype-extreme: light-dark(#c81e1e, #fb5647); --hype-low-ink: light-dark(#4d5867, #9aa8bd); --hype-moderate-ink: light-dark(#7a3d00, #f0c069); --hype-high-ink: light-dark(#8a3208, #fba873); --hype-extreme-ink: light-dark(#8f1616, #ff8f84); /* The third member of the ramp, and the reason there are three: ink for text sitting on a SOLID --hype-X fill (the game card's hype chip), which is a different problem from ink on a 22% tint. The -ink twins above are tuned against a tint that composites mostly to the page surface, so they track the theme -- dark ink in light mode. On a solid fill the polarity flips with the swatch instead: the light half of every --hype-X is a deep saturated colour wanting white, the dark half a bright one wanting near black. One neutral pair covers all four tiers; palette_contrast_test's "hype badge ink" case is what keeps that claim true. */ --hype-contrast: light-dark(#ffffff, #0a0e14); /* Platform-glyph tints -- tuned as one exercise, not hand-picked individually. See ":494" below (.platform-icon) for how these are consumed, and .game-hero further down for the always-dark re-declaration of the same nine. Constraints, in priority order: (a) >=3:1 against --neutral-chip in both themes and against the hero scrim; (b) all nine mutually distinguishable at 12-17px; (c) none within ~20deg hue of --accent -- the old #67c8e8 --pf-web sat almost exactly on the new brand cyan and had to move to an indigo hue instead; (d) PlayStation stays monochrome (that IS its brand mark, and it keeps the set's only other blue -- Windows -- unambiguous) and --pf-other stays undeclared (the catch-all keeps the neutral chip colour). */ --pf-windows: light-dark(#233095, #6d87e3); --pf-playstation: light-dark(#1b2331, #d5dce8); --pf-xbox: light-dark(#157926, #59cf76); --pf-nintendo: light-dark(#aa1824, #f87777); --pf-apple: light-dark(#59606f, #adb4c0); --pf-android: light-dark(#426d17, #9ed369); --pf-linux: light-dark(#8e6d0b, #e4b744); --pf-web: light-dark(#5c2fc6, #9e89f0); --pf-vr: light-dark(#9b2dd2, #da9bf3); /* Third-party brand marks (same category as the --pf-* tints above): a colour that IDENTIFIES a thing, never one that encodes a number. This is the RSS format's own orange, for the feed glyph on the game hero. The "a warm colour always means data" still holds for every --hype-* scale -- , which names this exception. Light half is deepened for >=3:1 against --surface-raised; the dark half is re-declared inside .game-hero below, where the button actually lives. */ --rss: light-dark(#c2410c, #f97316); /* Event-badge family identity (same category as --pf-* above): a colour that IDENTIFIES a family of events, never one that encodes a number. Tuned as INK on their own --tint-strong tint (badges); palette_contrast_test.rb enforces it. */ --event-media: light-dark(#7a23c5, #d9a4f4); --event-presence: light-dark(#1e40af, #7b9beb); /* light-dark is only valid in position, so the function wraps each colour STOP, not the whole shorthand value. */ --shadow: 0 1px 2px light-dark(rgba(20, 21, 26, 0.06), rgba(0, 0, 0, 0.4)), 0 8px 24px light-dark(rgba(20, 21, 26, 0.08), rgba(0, 0, 0, 0.28)); --radius: 10px; /* Two steps below --radius, because the sheet had six spellings of "smaller than --radius" -- 4px five times, 6px, 8px, 2px, and two different calc forms -- and nobody chose the differences. Not to be confused with the nested-inset idiom, calc(var(--radius) - 4px), which computes to the same 6px today but MEANS "tucked inside the parent's corner" and is supposed to move when --radius does. */ --radius-sm: 6px; --radius-xs: 4px; /* The pill. Any value past half the element's height rounds the ends fully, so this is a shape rather than a measurement -- which is exactly why it wants a name: `border-radius: 999px` written out 19 times reads like 19 independent decisions instead of one. */ --radius-pill: 999px; /* The three tint levels. 37 declarations spanned five levels, and palette_contrast_test.rb's tint table -- maintained by hand -- knew four of them, so .admin-chip--live, .probe-report--ok and .probe-report--warning shipped with no contrast assertion at all. Naming the levels is what lets that test read the SHEET instead of a list. */ --tint-strong: 22%; --tint-soft: 18%; --tint-faint: 14%; /* One height for every control that sits on a row with another control (text input, submit, select, icon button). Before this they landed on 37/37/38/32px, which is what made a filter row look assembled from spare parts rather than designed. */ --control-h: 2.375rem; --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Tabular data that must line up column-wise: raw JSON, id columns, the trace output. */ --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* Type scale. The sheet had 32 distinct font sizes across 145 declarations, including 0.64/0.65 and 0.88/0.90/0.92 -- differences of a fraction of a pixel that nobody chose and nobody can see. These are the steps. The app is dense, so the ladder is finer below 1rem (where the chrome lives) than a display scale would be; --text-md is the default UI size and --text-lg is the CONTROL size, shared by .btn, the text inputs and .select-shell > select so a filter row lines up. em-relative sizes are deliberately NOT in here: 0.95em on .chart-tabs--periods scales its children in proportion to a parent that may itself change, which is a different thing from an absolute step. */ --text-2xs: 0.65rem; --text-xs: 0.72rem; --text-sm: 0.78rem; --text-md: 0.85rem; --text-lg: 0.9rem; --text-xl: 0.95rem; --text-2xl: 1rem; --text-3xl: 1.1rem; --text-4xl: 1.3rem; --text-5xl: 1.5rem; --text-6xl: 2.5rem; --text-7xl: 3rem; /* The game hero's title, the one size that is viewport-relative. */ --text-hero: clamp(1.6rem, 4vw, 2.4rem); } /* the theme toggle. System (default, above) resolves through the OS; an explicit choice pins color-scheme directly, so light-dark no longer needs prefers-color-scheme at all once a visitor has picked a side. No duplicated palette -- every token above already carries both values. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } * { box-sizing: border-box; } html { overflow-x: hidden; /* reserve the scrollbar gutter on every page so a short page (no vertical scrollbar) and a long page (scrollbar present) render .container at the same width; the sticky header no longer jumps sideways between routes. Do not "fix" this with overflow-y: scroll, and don't remove it later as unused -- this is the whole fix. */ scrollbar-gutter: stable; } /* global keyboard-focus indicator: every link, button, and form control (including inside the nav-menu dropdowns) gets a visible outline in the accent color. :focus-visible so mouse clicks don't show it, only keyboard (and other non-pointer) focus. The list must name every focusable control type --