/* tokens.css: the whole palette, both themes, and the type scale. Dark is the live site's set, verbatim from the Prototype (PROTO:15-29). Light is the derived, contrast-checked set from the same block. The three faction colours are the Design Check's WARDOGS set, which replaces the Prototype's diplomacy factions: Valkyra is pushed orange so it never reads as brand red, Manticore is pushed teal so red and green colour-blind players can split them, and every chip carries a letter and a shape as well as a colour. DECISIONS.md 2026-09-19 (Daz, on the blue green accent): the accent set is RED plus BONE WHITE plus greys. Live, selected, confirmed and "you" are all drawn in the ink token with a thin bone rule or a soft glow, never in teal; amber stays for "not final yet" and for a stale feed; the three faction colours live inside their own small marks and nowhere else. That is why the --ok-* and --live tokens are gone rather than repointed: nothing may reach for them by accident. The theme lives on the root element because the boot script runs in , before exists. The media query underneath is the no-JavaScript path. */ :root { --bg: #161311; --surface: #211D19; --raised: #2E2921; --border: #4A453D; --divider: #2E2921; --row-alt: #1D1815; --ink: #ECE7DF; --muted: #ABA295; /* Small print still has to be read. 4.5:1 was the floor and the second design critique said metadata still looked disabled, so both greys were lifted again: --muted now clears 7:1 on the page background. */ --muted2: #A49B8C; /* The edge of a control (input, select, button, pill, chip, bar). 3:1 against every surface it is drawn on. --border stays for panel rules and row dividers, which carry no meaning on their own. */ --edge: #7E7768; --red-ink: #FF8A84; --red-fill: #E5484D; --red-fill-ink: #161311; --red-deep: #B3161B; --amber-ink: #F2C14E; --amber-bg: #2A1F14; --amber-border: #5B4A2B; --amber-chip-border: #6B5312; --amber-text: #EADFC6; --demo-bg: #3A1A1C; --demo-border: #B3161B; --demo-ink: #FF8A84; --lonestar: #4A9BE0; --lonestar-ink: #0E1A26; --valkyra: #D95F3B; --valkyra-ink: #1E0C06; --manticore: #35B0A0; --manticore-ink: #062420; --hex-stroke: #2E2921; --hex-inf: #E5484D; --hex-op: 0.55; /* A live or rising number is bone white with a soft glow behind it, so it is the loud thing on the page without being a second accent colour. */ --glow: 0 0 18px rgba(236, 231, 223, 0.35); /* A stacked bar reads by lightness, not by hue: three steps of the same bone to grey ramp, so the faction colours stay inside their marks. */ --bar-1: #ECE7DF; --bar-2: #ABA295; --bar-3: #7E7768; /* The hero and the two doors are posters. They stay dark in both themes, because a photograph from the game is dark and text on it has to be light whichever way the rest of the site is set. */ --hero-bg: #0F0D0C; --hero-ink: #F4EFE7; --hero-muted: #B9B0A2; --display: 'Saira Condensed', system-ui, sans-serif; --body: 'Barlow', system-ui, sans-serif; --data: 'JetBrains Mono', ui-monospace, monospace; /* Display sizes. The body scale is unchanged: 16px on a phone, and these are only ever used on a headline, a door or a number. */ --type-hero: clamp(38px, 11vw, 72px); --type-display: clamp(26px, 6.4vw, 38px); --num-hero: clamp(60px, 19vw, 124px); --num-big: clamp(32px, 8vw, 48px); --gutter: 16px; --gutter-wide: 24px; --content: 1180px; --tap: 44px; --bar: 56px; } :root[data-theme="light"] { --bg: #EDE8E0; --surface: #F7F4EF; --raised: #FFFFFF; --border: #CDC4B5; --divider: #E4DED4; --row-alt: #F2EEE7; --ink: #1E1A16; --muted: #4E483F; --muted2: #5A5046; --edge: #857A67; --red-ink: #A5121A; --red-fill: #B3161B; --red-fill-ink: #F7F4EF; --red-deep: #8E0F14; --amber-ink: #6E5206; --amber-bg: #F5E9CC; --amber-border: #D9C48A; --amber-chip-border: #D9C48A; --amber-text: #3E3526; --demo-bg: #F7DEDE; --demo-border: #C9767A; --demo-ink: #8E0F14; --lonestar: #2F5F8E; --lonestar-ink: #F7F4EF; --valkyra: #9E3A1B; --valkyra-ink: #F7F4EF; --manticore: #1B655A; --manticore-ink: #F7F4EF; --hex-stroke: #CDC4B5; --hex-inf: #B3161B; --hex-op: 0.9; --glow: 0 0 18px rgba(30, 26, 22, 0.22); --bar-1: #1E1A16; --bar-2: #4E483F; --bar-3: #857A67; --hero-bg: #0F0D0C; --hero-ink: #F4EFE7; --hero-muted: #B9B0A2; } /* Without JavaScript there is no data-theme, so the system preference decides. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #EDE8E0; --surface: #F7F4EF; --raised: #FFFFFF; --border: #CDC4B5; --divider: #E4DED4; --row-alt: #F2EEE7; --ink: #1E1A16; --muted: #4E483F; --muted2: #5A5046; --edge: #857A67; --red-ink: #A5121A; --red-fill: #B3161B; --red-fill-ink: #F7F4EF; --red-deep: #8E0F14; --amber-ink: #6E5206; --amber-bg: #F5E9CC; --amber-border: #D9C48A; --amber-chip-border: #D9C48A; --amber-text: #3E3526; --demo-bg: #F7DEDE; --demo-border: #C9767A; --demo-ink: #8E0F14; --lonestar: #2F5F8E; --lonestar-ink: #F7F4EF; --valkyra: #9E3A1B; --valkyra-ink: #F7F4EF; --manticore: #1B655A; --manticore-ink: #F7F4EF; --hex-stroke: #CDC4B5; --hex-inf: #B3161B; --hex-op: 0.9; --glow: 0 0 18px rgba(30, 26, 22, 0.22); --bar-1: #1E1A16; --bar-2: #4E483F; --bar-3: #857A67; --hero-bg: #0F0D0C; --hero-ink: #F4EFE7; --hero-muted: #B9B0A2; } } @keyframes livePulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.35 } } @keyframes stampIn { 0% { opacity: 0; transform: scale(1.05) } 70% { opacity: 1; transform: scale(0.99) } 100% { opacity: 1; transform: scale(1) } } @keyframes flickerOnce { 0%, 45%, 55%, 100% { opacity: 1 } 50% { opacity: 0.35 } } @keyframes caretBlink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } } @keyframes scanline { 0% { transform: translateY(-100%) } 100% { transform: translateY(100vh) } } @keyframes fadeUp { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: translateY(0) } } /* The logo flickers once when the page arrives, like a monitor warming up. Bounded on purpose: it has to be over before anyone reads anything. It is a veil drawn over the logo rather than the logo's own opacity. An animation on the text itself takes it onto its own compositing layer, and the letters keep greyscale antialiasing for ever after, which is a permanent change to the wordmark in exchange for one second of flicker. */ @keyframes crtVeil { 0% { opacity: 0.85 } 12% { opacity: 0 } 22% { opacity: 0.7 } 30% { opacity: 0 } 44% { opacity: 0.35 } 52%, 100% { opacity: 0 } } /* A number that has just changed. One beat, then back to normal. */ @keyframes numberPulse { 0% { transform: scale(1) } 35% { transform: scale(1.09) } 100% { transform: scale(1) } } /* The chat ticker. One pass of the track, then it starts again. */ @keyframes tickerRoll { from { transform: translateX(0) } to { transform: translateX(-50%) } }