/* ============================================================================ Boardroom Games — "Broadcast" shared design tokens ---------------------------------------------------------------------------- The corporate counterpart to qc-cabaret.css. Where the drag brand is a cabaret (chunky outlines, hard offset shadows, Chonburi, the pride gradient), Broadcast is a television quiz studio: elements separate by LIGHT rather than line, one variable typeface carries register on its width axis, and every game's core beat — a row turning over — is the shared "slate". Every token is namespaced --bc-* on purpose, exactly like --qc-*: a surface opts in by aliasing the short names it already uses to --bc-* values, so dropping this file into a game can never clobber another system's vars. Game accent hexes come from theme.css (--brand-*, generated from brands/corporate.json) — link theme.css BEFORE this file. Usage: ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&family=Martian+Mono:wght@400;600&display=swap'); :root{ /* ---- the lighting ramp (ground, not a surface palette) -------------- */ --bc-void: #060B14; /* the room */ --bc-pool: #16233A; /* the lit floor the show stands in */ --bc-slate: #1B2B45; /* a panel at rest */ --bc-slate-hi: #24395B; /* the same panel, spotlit */ /* ---- signal & spotlight -------------------------------------------- */ --bc-signal: #D8F34A; /* volt, from the logo: live / on-air — never a game accent */ --bc-cold: #7DD3FC; /* the spotlight: focus rings, join codes, clocks */ /* ---- game accents (survive from brands/corporate.json via theme.css) */ --bc-blue: var(--brand-pink); /* keyed "pink" in the brand file — it is blue */ --bc-purple: var(--brand-purple); --bc-green: var(--brand-green); --bc-cyan: var(--brand-cyan); --bc-orange: var(--brand-orange); --bc-red: var(--brand-red); --bc-amber: var(--brand-yellow); /* keyed "yellow" — volt, == signal */ /* ---- type ---------------------------------------------------------- */ --bc-text: #F2F6FC; --bc-dim: #8FA3BE; --bc-faint: #4A5D7A; --bc-arch: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; /* display + body, width axis carries register */ --bc-mono: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* equipment only: codes, clocks */ /* ---- the display face, AS A TOKEN ----------------------------------- The one thing colour tokenisation never covered: game stylesheets used to hardcode Chonburi, so a corporate console still read as drag cabaret. Surfaces now say font-family:var(--bc-display) and each brand re-grounds it in its extraThemeCss (:root:root beats this :root despite load order): queencentral → "Chonburi", weight 400, no width axis frontbar → "Young Serif" Broadcast's own doctrine: one family, width as register — tells are expanded and heavy. */ --bc-display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; --bc-display-weight: 800; --bc-display-fvs: 'wdth' 125; /* ---- shape: crisp, separated by light not line --------------------- */ --bc-r: 4px; /* the system radius; everything */ --bc-r-lg: 8px; /* cards, dialogs, the big-screen frame */ --bc-lip: inset 0 2px 0 rgba(143,163,190,.16); /* a resting lit edge — replaces borders */ --bc-lip-lg: inset 0 3px 0 rgba(143,163,190,.16); /* the same on big-screen surfaces */ /* ---- ink: the foreground that sits ON an accent fill ---------------- These existed only as hex literals scattered through the games — #1a1206 alone appeared 39 times. That mattered more than it looked: a skin can re-ground --bc-signal (studio makes it amber), and the dark ink printed on top of it was the one half of the pair that couldn't follow. As tokens, a skin can set both. */ --bc-ink-signal: #1a1206; /* on volt/amber — the primary action fill */ --bc-ink-green: #04241a; /* on green — correct, banked, home */ --bc-ink-red: #1b0505; /* on red — eliminated, caught, destructive*/ --bc-ink-cold: #052330; /* on the cold spotlight blue */ --bc-danger: #fca5a5; /* danger as TEXT, not as a fill */ /* ---- spacing: the one scale ---------------------------------------- There wasn't one. Every surface picked its own vh/vw literals, which is why no two cards have quite the same padding. New work should reach for these; the existing literals are left alone rather than churned all at once. */ --bc-s1: 4px; --bc-s2: 8px; --bc-s3: 12px; --bc-s4: 16px; --bc-s5: 24px; --bc-s6: 32px; /* backgrounds */ --bc-bg-app: radial-gradient(1100px 700px at 50% -10%, var(--bc-pool) 0%, rgba(22,35,58,0) 62%), linear-gradient(180deg, #0d1626 0%, #070d18 100%); --bc-bg-stage: radial-gradient(1400px 900px at 50% -8%, var(--bc-pool) 0%, rgba(22,35,58,0) 64%), linear-gradient(180deg, #0d1626 0%, #070d18 100%); /* the primary surface fill (body + big-screen frame) — a token so skins can re-ground it */ --bc-field: radial-gradient(1200px 760px at 50% -6%, var(--bc-pool) 0%, rgba(22,35,58,0) 62%), linear-gradient(180deg, #0d1626 0%, #070d18 100%); } /* ============================================================================ Host-selectable skins — each is ONE set of --bc-* token overrides. Surfaces apply one by setting data-skin on ; the game syncs it to every screen. Phase 1 re-grounds colour + type-neutral tokens; the glow/scanline layer (Aurora's full HUD treatment) is a later pass once surfaces route their active-lip/glow through tokens. ========================================================================== */ :root[data-skin="studio"]{ /* lit TV studio — the house default */ --bc-void:#07031A; --bc-pool:#150C3E; --bc-slate:#241844; --bc-slate-hi:#33235E; --bc-signal:#FFC02E; --bc-cold:#B9AEEA; /* amber is documented as "== signal"; overriding one without the other silently broke that for any game whose accent is amber (Badge Draw), leaving it lime among golds. */ --bc-amber:#FFC02E; --bc-red:#FF2E45; --bc-green:#3BE87A; --bc-purple:#8B5CF6; --bc-cyan:#22D3F0; --bc-text:#FFF8EC; --bc-dim:#9C8FD6; --bc-faint:#6B5FA8; --bc-field: radial-gradient(90% 60% at 50% -12%, #2A1D7A 0%, #150C3E 42%, #07031A 100%); /* consoles + boards still on the older bg tokens follow the skin too */ --bc-bg-app: var(--bc-field); --bc-bg-stage: var(--bc-field); } :root[data-skin="marquee"]{ /* cabaret marquee — Queen Central's house look. The studio recipe (hot key light, deep pool, one loud signal) re-shot on a magenta stage: hot pink where studio is gold, gold where studio is lavender, and a plum room instead of a violet one. The chasing bulbs that come with it live in studio.css — they're a light fitting, not a colour. */ --bc-void:#1A0312; --bc-pool:#3A0E2A; --bc-slate:#4A1233; --bc-slate-hi:#65204A; --bc-signal:#FF2D95; --bc-cold:#FFD166; /* amber == signal, same contract as studio — see the note above. */ --bc-amber:#FF2D95; /* The chasing bulbs' own two colours (the fitting itself is in studio.css). --st-* and not --bc-* on purpose: the look layer owns the --bc-* namespace, so colouring the bulbs from --bc-cold / --bc-signal let glamour re-ground them. One QC board lit its frame gold-and-white while the next lit it blue-and-gold on the same skin, because Bingo is the only board that does not link look.css. Out of that namespace the fitting looks the same wherever it lands. */ --st-bulb-dim:#FFD166; --st-bulb-lit:#FFF6D8; --bc-red:#FF4059; --bc-green:#3BE87A; --bc-purple:#C86BFF; --bc-cyan:#33E0E8; --bc-text:#FFF0F7; --bc-dim:#E0A6C9; --bc-faint:#9A5578; --bc-field: radial-gradient(90% 60% at 50% -12%, #741450 0%, #3A0E2A 42%, #1A0312 100%); /* consoles + boards still on the older bg tokens follow the skin too */ --bc-bg-app: var(--bc-field); --bc-bg-stage: var(--bc-field); } :root[data-skin="aurora"]{ /* the ARIA / JARVIS holographic HUD */ --bc-void:#02060f; --bc-pool:#06131f; --bc-slate:#0a1626; --bc-slate-hi:#0e2436; --bc-signal:#38e6ff; --bc-cold:#2b6bff; --bc-text:#cfeeff; --bc-dim:#7fb4cc; --bc-faint:#3a6b82; --bc-field: radial-gradient(1200px 800px at 50% 0%, #06182b 0%, #02060f 70%); /* consoles + boards still on the older bg tokens follow the skin too */ --bc-bg-app: var(--bc-field); --bc-bg-stage: var(--bc-field); } :root[data-skin="arena"]{ /* warm prime-time game show */ --bc-void:#0a0603; --bc-pool:#1a0f08; --bc-slate:#241610; --bc-slate-hi:#33200f; --bc-signal:#FFB020; --bc-cold:#FFD23F; --bc-text:#FFF6E9; --bc-dim:#C9A98A; --bc-faint:#6b4f38; --bc-field: radial-gradient(1200px 760px at 50% -6%, var(--bc-pool) 0%, rgba(26,15,8,0) 62%), linear-gradient(180deg, #1a0f08 0%, #0a0603 100%); /* consoles + boards still on the older bg tokens follow the skin too */ --bc-bg-app: var(--bc-field); --bc-bg-stage: var(--bc-field); } :root[data-skin="neon"]{ /* synthwave — hot magenta on indigo */ --bc-void:#0c0518; --bc-pool:#14092a; --bc-slate:#1c0f3a; --bc-slate-hi:#2a1656; --bc-signal:#ff2e97; --bc-cold:#22d3ee; --bc-text:#f3e9ff; --bc-dim:#b79ad6; --bc-faint:#6c4f95; --bc-field: radial-gradient(1200px 820px at 50% 0%, #26124e 0%, #0c0518 68%); /* consoles + boards still on the older bg tokens follow the skin too */ --bc-bg-app: var(--bc-field); --bc-bg-stage: var(--bc-field); } :root[data-skin="matrix"]{ /* terminal phosphor green on black */ --bc-void:#020604; --bc-pool:#04120a; --bc-slate:#061c0f; --bc-slate-hi:#0a2c18; --bc-signal:#39ff14; --bc-cold:#7CFFB0; --bc-text:#c9ffd6; --bc-dim:#5faf76; --bc-faint:#2f6b45; --bc-field: radial-gradient(1200px 800px at 50% -6%, #06180d 0%, #020604 66%); /* consoles + boards still on the older bg tokens follow the skin too */ --bc-bg-app: var(--bc-field); --bc-bg-stage: var(--bc-field); } :root[data-skin="sunset"]{ /* deep plum into warm coral */ --bc-void:#160a1a; --bc-pool:#2a0f24; --bc-slate:#3a1630; --bc-slate-hi:#4e1d3f; --bc-signal:#ff7e5f; --bc-cold:#ffb56b; --bc-text:#ffe9e2; --bc-dim:#d19a9a; --bc-faint:#7a4f5f; --bc-field: linear-gradient(180deg, #3a1630 0%, #160a1a 62%, #0d0510 100%); /* consoles + boards still on the older bg tokens follow the skin too */ --bc-bg-app: var(--bc-field); --bc-bg-stage: var(--bc-field); } /* ============================================================================ Shared keyframes — so surfaces don't each redeclare them ========================================================================== */ /* the wipe: a single bar of light crossing a slate as it is spotlit */ @keyframes bc-wipe { to { transform: translateX(100%); } } /* the lift: a slate coming up out of rest */ @keyframes bc-stamp { from { transform: scale(1.8); opacity: 0 } to { transform: none; opacity: 1 } } /* the on-air pulse */ @keyframes bc-beat { 0%,100% { opacity: 1 } 50% { opacity: .3 } } /* ---- The affirmative action --------------------------------------------------------------- Winner claimed. Award the pot. Correct. Every console painted these as a solid fill of --bc-green, and a whole button of #3BE87A in a dark room is a lot of light — it shouts like a warning rather than reading as a go, and it is the harshest thing on the screen at the exact moment the host is looking up at the room. This is the Studio 7 "Correct" panel instead: the colour arrives as a tint and a rim, with the light thrown OUTSIDE the button. Same instinct as the rest of this system — elements separate by light rather than by fill — and it keeps the button clearly warmer and more alive than the outlined danger buttons it sits beside. The console-local solid-green rules this replaced have been removed. One trap this walked into first time: --bc-green is a FILL colour, meant to carry dark ink on top. Unskinned it falls back to --brand-green (#2E9E6B), a muted mid-green, and using that as text on a tint of itself measured 3.00:1 on Front Bar Feud's lighter navy panel — a straight AA failure. The label therefore takes a lifted mix, not the raw token, so the treatment holds whatever green the brand or skin supplies. */ :root{ --bc-green-lit: color-mix(in oklab, var(--bc-green) 62%, #EAFFF4); } body .btn.mint, body .btn.go, body .btn.green, body .btn.gold, body button.green, body button.bc-go { background: linear-gradient(180deg, color-mix(in oklab, var(--bc-green) 24%, transparent), color-mix(in oklab, var(--bc-green) 8%, transparent)); color: var(--bc-green-lit); font-weight: 800; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--bc-green) 62%, transparent), 0 0 24px color-mix(in oklab, var(--bc-green) 30%, transparent); transition: box-shadow .2s ease, background .2s ease; } body .btn.mint:hover, body .btn.go:hover, body .btn.green:hover, body .btn.gold:hover, body button.green:hover, body button.bc-go:hover{ filter: none; } body .btn.mint:hover, body .btn.go:hover, body .btn.green:hover, body .btn.gold:hover, body button.green:hover, body button.bc-go:hover { background: linear-gradient(180deg, color-mix(in oklab, var(--bc-green) 34%, transparent), color-mix(in oklab, var(--bc-green) 12%, transparent)); box-shadow: inset 0 0 0 1px var(--bc-green), 0 0 32px color-mix(in oklab, var(--bc-green) 45%, transparent); } /* Nothing to say yes to yet: the glow is the affordance, so it goes out entirely. */ body .btn.mint:disabled, body .btn.go:disabled, body .btn.green:disabled, body .btn.gold:disabled, body button.green:disabled, body button.bc-go:disabled { background: none; color: color-mix(in oklab, var(--bc-green-lit) 45%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--bc-green) 22%, transparent); } @media (prefers-reduced-motion: reduce){ *{ animation: none !important; transition: none !important; } }