/* Theme display typefaces (CDN). MUST be the first statement in this file — an @import after any style rule is invalid and silently dropped by every browser (that regression hid every theme font once .wb-brand/.wic-* were prepended here). Loaded once so every surface that links themes.css (board + Studio overlays) shares them. Only themes that set their --font-* to these use them; glass never does. VT323 = Terminal Glow's CRT pixel font; Orbitron = Vaporwave's outrun chrome; Press Start 2P = Arcade Coin-Op's 8-bit headers; Audiowide = Arcade Neon's marquee; B612 Mono = Airport Board; Saira Condensed = Game Day; Playfair = Newsprint. Old Glory reuses Big Shoulders Display (loaded in the page ). */ @import url('https://fonts.googleapis.com/css2?family=VT323&family=Orbitron:wght@500;700;900&family=Audiowide&family=Press+Start+2P&family=B612+Mono:wght@400;700&family=Saira+Condensed:wght@600;700;800;900&family=Playfair+Display:ital,wght@0,700;0,800;0,900;1,700&display=swap'); /* Subtle "Powered by WeatherBoard.net" mark for the Studio overlays (the board has its own footer attribution). Inherits theme ink; toggled by each overlay's JS from snapshot.poweredBy (hidden for white-label/Enterprise). */ .wb-brand { font: 600 .62rem/1 var(--font-mono, ui-monospace, monospace); letter-spacing: .1em; text-transform: uppercase; opacity: .55; color: inherit; text-decoration: none; white-space: nowrap; } .wb-brand[hidden] { display: none; } /* selectable icon-set images (Meteocons animated SVGs) fill the glyph box on every surface; the parent (.wicon / .wx-ico / .fc-ico) defines the size. */ .wic-img { width: 100%; height: 100%; object-fit: contain; display: block; } /* ASCII-art set: the SVG is used as a luminance/alpha MASK so the visible glyph is painted in the element's currentColor — i.e. it inherits the theme's phosphor/ink (which an -embedded SVG cannot). Color is set per-theme (e.g. terminal-glow → --phos); elsewhere it falls back to the card text color. */ .wic-ascii { background-color: currentColor; color: inherit; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* ============================================================ themes.css — the shared BOARD-THEME contract. Imported by every WeatherBoard surface: the viewer board (index.html), all four Studio overlays (obs / forecast / alerts / combo), and — when it ships — Shout signage. This is the ONE place a theme is authored, so a theme reaches every surface at once instead of being hand-maintained per stylesheet. Two orthogonal dimensions select tokens: data-board-theme = glass | retro-cable | … (the skin) data-theme = dark | light (the mode) Tokens resolve on the pair, e.g. [data-board-theme="retro-cable"][data-theme="dark"] { … } Layering model: 1. SHARED non-themed tokens (typography, easing) live here at :root. 2. The DEFAULT theme `glass` keeps its BASE token values in each surface's own stylesheet (style.css / obs.css / forecast.css / alerts.css) so glass renders pixel-identical — themes.css does NOT redefine glass. 3. NON-DEFAULT themes override tokens here, scoped under their data-board-theme attribute. themes.css is linked AFTER each surface's own stylesheet, so at equal specificity these overrides win by cascade order — a theme only states what it CHANGES. Canonical token vocabulary (unified across board + overlays): Typography --font-display --font-mono Ink --ink --ink-dim --ink-faint Canvas --bg --mesh-a --mesh-b --mesh-c --grain-opacity (board only) Card --bg-card --bg-card-edge --stat-line --shadow --card-rgb --card-rgb-2 --card-alpha --line (overlay panels) Accent --accent (per-location, set live) --north --south (+ -deep) --live --stale Motion --ease-out See docs/design/theme-system.md for the full plan. ============================================================ */ :root { --font-display: "Big Shoulders Display", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --ease-out: cubic-bezier(.22, 1, .36, 1); /* GUEST-CHROME fonts — the viewer's OWN voice on controls guests interact with (rail toggles, footer/status line, expand/back chips, the demo theme gallery). A board theme retypes the board by overriding --font-display/--font-mono under its [data-board-theme] scope; these tokens are defined ONLY here at :root and are NEVER overridden there, so the chrome stays in the viewer's typeface under every theme. Themes MUST NOT set these. (The alert strip is deliberately NOT chrome — it's part of each theme's identity; see .ba-cap.) Same literal families as the glass defaults, so glass renders unchanged. */ --font-chrome-display: "Big Shoulders Display", system-ui, sans-serif; --font-chrome-mono: "IBM Plex Mono", ui-monospace, monospace; } /* ============================================================ RETRO CABLE — 80s/90s cable-TV weather (boxed regions, blocky tabular type, strong rules, section headers, CRT scanlines, saturated weather colors). Dark-native; authored mode-agnostically under [data-board-theme="retro-cable"] so it stays itself even if data-theme=light. No markup forks, no snapshot data — structural accents decorate the EXISTING board DOM. Nostalgic, not a trademarked network package. ============================================================ */ /* ---- Tier 1: tokens (palette / type / card feel) ---- */ [data-board-theme="retro-cable"] { color-scheme: dark; /* Canvas — deep CRT royal blue */ --bg: #050d3a; --ink: #ffffff; --ink-dim: #aebef5; --ink-faint: #6f82c8; /* Cards — flat, opaque blue boxes with a bright bevel edge (no glass) */ --bg-card: #14288a; --bg-card-edge: #5e80e6; --stat-line: rgba(150, 180, 255, .26); --shadow: 0 6px 0 -1px rgba(2, 6, 28, .55), 0 0 0 1px rgba(120, 150, 240, .22); /* Accents — per-location accent still wins (set inline); these are the defaults. Gold reads as classic cable "current" emphasis; status colors stay punchy. */ --north: var(--opt-accent, #ffd23f); --south: #ff8a3d; --live: #46e07a; --stale: #ffc23d; --grain-opacity: .5; } /* ---- Tier 2: structural accents on the existing board markup ---- */ /* CRT broadcast gradient field instead of the glass mesh; scanlines for grain. */ [data-board-theme="retro-cable"] .mesh { background: linear-gradient(180deg, #16276f 0%, #070f44 56%, #03061d 100%); animation: none; } [data-board-theme="retro-cable"] .grain { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; } /* "Scanlines" option OFF → drop the CRT scanline texture. */ [data-board-theme="retro-cable"][data-opt-scanlines="off"] .grain { display: none; } /* Flat boxed cards: square corners, 2px bright bevel, no blur, a faint top sheen. */ [data-board-theme="retro-cable"] .card { border-radius: 5px; border: 2px solid var(--bg-card-edge); background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 84%, #2c4ed6) 0%, var(--bg-card) 44%); backdrop-filter: none; } [data-board-theme="retro-cable"] .card::before { background: linear-gradient(180deg, rgba(255, 255, 255, .07), transparent 30%); } [data-board-theme="retro-cable"] .card::after { left: 0; right: 0; height: 2px; opacity: 1; background: linear-gradient(to right, transparent, color-mix(in srgb, var(--bg-card-edge) 92%, #fff), transparent); } /* Strong rule under the city/clock header — broadcast "lower-third" energy. */ [data-board-theme="retro-cable"] .c-head { border-bottom: 2px solid color-mix(in srgb, var(--accent) 55%, var(--bg-card-edge)); padding-bottom: .5rem; } /* CONDITIONS section header bar spanning the stat grid. ::before is a grid item forced to span all columns, so the stats flow beneath it. */ [data-board-theme="retro-cable"] .c-stats { border-top: 2px solid var(--stat-line); } [data-board-theme="retro-cable"] .c-stats::before { content: "CONDITIONS"; grid-column: 1 / -1; font-family: var(--font-display); font-weight: 800; font-size: .6rem; letter-spacing: .26em; color: #06103f; background: var(--accent); padding: .24rem .55rem; margin-bottom: .15rem; } /* Radar box = bordered tube with a solid header strip. */ [data-board-theme="retro-cable"] .c-radar { border-radius: 3px; border: 2px solid var(--bg-card-edge); } [data-board-theme="retro-cable"] .radar-bar { background: var(--accent); } [data-board-theme="retro-cable"] .radar-label { color: #06103f; font-family: var(--font-display); font-weight: 800; letter-spacing: .2em; } [data-board-theme="retro-cable"] .radar-time { color: #06103f; font-weight: 700; } /* 10-day forecast (expanded view): boxed strip + a strong top rule. */ [data-board-theme="retro-cable"] .card.is-full .c-forecast { border-top: 2px solid var(--stat-line); } [data-board-theme="retro-cable"] .fc-day:first-child { background: color-mix(in srgb, var(--accent) 24%, transparent); } /* Brighten labels for cable-grade legibility on the saturated blue box. */ [data-board-theme="retro-cable"] .stat-k { color: var(--ink-dim); } [data-board-theme="retro-cable"] .c-feels { color: var(--ink-dim); } [data-board-theme="retro-cable"] .c-src { color: var(--ink-dim); } /* ---- Studio overlays (obs / forecast; combo composites them) ---- Re-point the panel backgrounds to the same cable blue. Scoped to the panel CONTAINERS (not the root) and re-declaring --panel so the override actually reaches the composed background — including combo's per-anchor token re-homes (.cmb-anchor.is-* is 0,2,0; we beat it at 0,3,0). White ink comes from the board token block above. The ALERTS card is deliberately left alone: severity red/urgency wins over the theme (DESIGN.md: alerts louder than decoration). */ [data-board-theme="retro-cable"] .wx, [data-board-theme="retro-cable"] .fc-bar, [data-board-theme="retro-cable"] .cmb-anchor.is-panel, [data-board-theme="retro-cable"] .cmb-anchor.is-forecast { --card-rgb: 18 40 138; /* opaque cable blue */ --card-rgb-2: 32 58 176; /* brighter top of the panel gradient */ --line: rgba(150, 180, 255, .32); --panel: rgb(var(--card-rgb) / var(--card-alpha)); --panel-2: rgb(var(--card-rgb-2) / var(--card-alpha)); } /* square boxed panels with a bright bevel edge (flat, no glass radius) */ [data-board-theme="retro-cable"] .wx { border-radius: 5px; border: 2px solid #5e80e6; } [data-board-theme="retro-cable"] .fc-bar { border-top: 3px solid #5e80e6; border-bottom: 3px solid #5e80e6; } [data-board-theme="retro-cable"] .wx-radar { border-radius: 3px; border-color: #5e80e6; } [data-board-theme="retro-cable"] .wx-stats { border-radius: 3px; } /* ---- Retro alerts: a SOLID cable-style severity crawl + boxed alert cards ---- Severity COLORS are preserved (life-safety, shared --sev/--sev-ink tokens); only the shape/texture changes to the flat boxed cable look. Applies to the board's top strip (.board-alert), the combined ticker (.cmb-tk), and the alert boxes (.al overlay card + .c-alert on-card banner). */ [data-board-theme="retro-cable"] .board-alert, [data-board-theme="retro-cable"] .cmb-tk { background: var(--sev); box-shadow: none; animation: none; backdrop-filter: none; } [data-board-theme="retro-cable"] .board-alert { border-bottom: 3px solid color-mix(in srgb, var(--sev) 55%, #000); } [data-board-theme="retro-cable"] .cmb-tk { border-top: 3px solid color-mix(in srgb, var(--sev) 55%, #000); border-bottom: 3px solid color-mix(in srgb, var(--sev) 55%, #000); } /* dark inset cap + severity-ink crawl text (high contrast on the solid bar) */ [data-board-theme="retro-cable"] .ba-cap, [data-board-theme="retro-cable"] .tk-cap { background: rgba(0, 0, 0, .32); color: var(--sev-ink); } [data-board-theme="retro-cable"] .ba-loc, [data-board-theme="retro-cable"] .ba-event, [data-board-theme="retro-cable"] .ba-area, [data-board-theme="retro-cable"] .ba-instr, [data-board-theme="retro-cable"] .ba-until, [data-board-theme="retro-cable"] .ba-sep, [data-board-theme="retro-cable"] .ba-dot, [data-board-theme="retro-cable"] .tk-loc, [data-board-theme="retro-cable"] .tk-event, [data-board-theme="retro-cable"] .tk-area, [data-board-theme="retro-cable"] .tk-instr, [data-board-theme="retro-cable"] .tk-until, [data-board-theme="retro-cable"] .tk-sep, [data-board-theme="retro-cable"] .tk-dot { color: var(--sev-ink); } /* Alert box → a cable-TV WARNING BOX: a flat dark CRT-blue panel (no glass blur, no radial glow), a thick SEVERITY bevel border + severity top bar, and a blocky inverse header — matching Retro Cable's boxed CRT language instead of the glass card. White blocky type stays readable across every severity. (Severity = alerts.css --accent.) */ [data-board-theme="retro-cable"] .al { border-radius: 4px; background: linear-gradient(180deg, #0b1652, #07103a); border: 2px solid var(--accent); color: #ffffff; box-shadow: 0 6px 0 -1px rgba(2, 6, 28, .55), 0 0 0 1px rgba(120, 150, 240, .22); backdrop-filter: none; } [data-board-theme="retro-cable"] .al-rule { background: var(--accent); animation: none; height: 4px; } [data-board-theme="retro-cable"] .al-badge { background: var(--accent); color: #160a04; border-radius: 0; box-shadow: none; font-family: var(--font-display); font-weight: 800; letter-spacing: .12em; } [data-board-theme="retro-cable"] .al-event { color: #ffffff; } [data-board-theme="retro-cable"] .al-area { color: #cdd8ff; } [data-board-theme="retro-cable"] .al-instruction { color: #cdd8ff; border-top-color: rgba(150, 180, 255, .26); } [data-board-theme="retro-cable"] .al-foot, [data-board-theme="retro-cable"] .al-src { color: #8fa0d8; } [data-board-theme="retro-cable"] .al-until { background: rgba(0, 0, 0, .3); color: var(--accent); border-radius: 0; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); } [data-board-theme="retro-cable"] .c-alert { border-radius: 4px; } /* ============================================================ TECHNO — high-contrast, data-forward instrumentation (thin neon grid, mono labels, corner brackets, radar-forward). Built for chasers & streams. Dark-only. Authored mode-agnostically. ============================================================ */ [data-board-theme="techno"] { color-scheme: dark; --bg:#05080d; --ink:#f2f7fb; --ink-dim:#7e93a6; --ink-faint:#46566a; --bg-card:rgba(8,13,20,.9); --bg-card-edge:color-mix(in srgb,var(--opt-accent,#22d3ee) 32%,transparent); --stat-line:rgba(34,211,238,.12); --shadow:0 0 0 1px rgba(34,211,238,.1),0 18px 50px -22px rgba(0,0,0,.9); --north:var(--opt-accent,#22d3ee); --north-deep:#06323b; --south:#a3e635; --south-deep:#27330a; --live:#a3e635; --stale:#fbbf24; --mesh-a:rgba(34,211,238,.14); --mesh-b:rgba(167,139,250,.1); --mesh-c:rgba(163,230,53,.08); --grain-opacity:.04; } /* board: thin technical grid instead of soft mesh */ [data-board-theme="techno"] .mesh { background: repeating-linear-gradient(0deg,color-mix(in srgb,var(--opt-accent,#22d3ee) 7%,transparent) 0 1px,transparent 1px 56px), repeating-linear-gradient(90deg,color-mix(in srgb,var(--opt-accent,#22d3ee) 7%,transparent) 0 1px,transparent 1px 56px), radial-gradient(120% 90% at 50% 0%,rgba(167,139,250,.1),transparent 60%), #05080d; animation:none; } [data-board-theme="techno"] .grain { mix-blend-mode:overlay; } /* cards: flat, fine neon border, square-ish, no blur */ [data-board-theme="techno"] .card { border-radius:6px; border:1px solid var(--bg-card-edge); background:linear-gradient(180deg,rgba(11,17,26,.92),rgba(7,11,17,.92)); backdrop-filter:none; } [data-board-theme="techno"] .card::before { inset:9px auto auto 9px; width:14px; height:14px; opacity:1; background:none; border-left:2px solid var(--north); border-top:2px solid var(--north); } [data-board-theme="techno"] .card::after { inset:auto 9px 9px auto; width:14px; height:14px; left:auto; right:9px; opacity:1; background:none; border-right:2px solid var(--north); border-bottom:2px solid var(--north); } [data-board-theme="techno"] .c-head { border-bottom:1px solid rgba(34,211,238,.22); padding-bottom:.5rem; font-variant-numeric:tabular-nums; letter-spacing:.01em; } [data-board-theme="techno"] .c-stats::before { content:"TELEMETRY"; grid-column:1/-1; font-family:var(--font-mono); font-weight:700; font-size:.56rem; letter-spacing:.34em; color:#05080d; background:var(--accent); padding:.2rem .5rem; border-radius:2px; } [data-board-theme="techno"] .stat-k { font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.18em; font-size:.6rem; color:var(--ink-dim); } [data-board-theme="techno"] .c-feels, [data-board-theme="techno"] .c-src { font-family:var(--font-mono); color:var(--ink-faint); letter-spacing:.06em; } /* radar-forward: bright neon frame + mono crosshair-style bar */ [data-board-theme="techno"] .c-radar { border:1px solid rgba(34,211,238,.55); border-radius:4px; box-shadow:inset 0 0 0 1px rgba(34,211,238,.12); } [data-board-theme="techno"] .radar-bar { background:rgba(34,211,238,.14); border-bottom:1px solid rgba(34,211,238,.4); } [data-board-theme="techno"] .radar-label { color:var(--north); font-family:var(--font-mono); font-weight:700; letter-spacing:.22em; text-transform:uppercase; } [data-board-theme="techno"] .radar-time { font-family:var(--font-mono); color:var(--ink-dim); font-variant-numeric:tabular-nums; } [data-board-theme="techno"] .fc-day { font-variant-numeric:tabular-nums; } [data-board-theme="techno"] .fc-day:first-child { border-left:2px solid var(--south); } /* overlays: re-point panel triplets to near-black w/ cyan lines */ [data-board-theme="techno"] .wx, [data-board-theme="techno"] .fc-bar, [data-board-theme="techno"] .cmb-anchor.is-panel, [data-board-theme="techno"] .cmb-anchor.is-forecast { --card-rgb:8 13 20; --card-rgb-2:13 20 30; --line:rgba(34,211,238,.28); --panel:rgb(var(--card-rgb)/var(--card-alpha)); --panel-2:rgb(var(--card-rgb-2)/var(--card-alpha)); } [data-board-theme="techno"] .wx { border-radius:6px; border:1px solid rgba(34,211,238,.4); } [data-board-theme="techno"] .fc-bar { border-radius:6px; border:1px solid rgba(34,211,238,.4); } [data-board-theme="techno"] .wx-radar { border:1px solid rgba(34,211,238,.55); border-radius:4px; } [data-board-theme="techno"] .wx-stats { font-variant-numeric:tabular-nums; } /* alerts: keep severity colors, change only shape/texture */ [data-board-theme="techno"] .board-alert, [data-board-theme="techno"] .cmb-tk { background:var(--sev); box-shadow:none; border-radius:0; animation:none; border-top:1px solid rgba(255,255,255,.18); } /* alert box → instrument panel: near-black, fine neon frame, cyan corner brackets, mono badge/until (matches the techno cards). Severity = alerts.css --accent. */ [data-board-theme="techno"] .al { background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 55%), linear-gradient(180deg, #0d141e, #080d14); border-radius: 3px; border: 1px solid color-mix(in srgb, var(--accent) 55%, rgba(34, 211, 238, .45)); box-shadow: 0 0 0 1px rgba(34, 211, 238, .12), 0 18px 50px -22px rgba(0, 0, 0, .9); backdrop-filter: none; } [data-board-theme="techno"] .al::before { content: ""; position: absolute; left: 8px; top: 8px; width: 12px; height: 12px; pointer-events: none; border-left: 2px solid #22d3ee; border-top: 2px solid #22d3ee; } [data-board-theme="techno"] .al::after { content: ""; position: absolute; right: 8px; bottom: 8px; width: 12px; height: 12px; pointer-events: none; border-right: 2px solid #22d3ee; border-bottom: 2px solid #22d3ee; } [data-board-theme="techno"] .al-badge { border-radius: 2px; font-family: var(--font-mono); letter-spacing: .18em; box-shadow: none; } [data-board-theme="techno"] .al-until { border-radius: 2px; font-family: var(--font-mono); } [data-board-theme="techno"] .al-src { font-family: var(--font-mono); } [data-board-theme="techno"] .c-alert { border-radius: 3px; } /* ============================================================ STORM DESK — instrumented ops/command-desk skin for active weather. Radar + alerts first. Warm-amber + cool-radar-blue on heavy dark steel. Dark-only. The HEAVY/WARM counterpart to Techno's cool neon grid. ============================================================ */ [data-board-theme="storm-desk"] { color-scheme: dark; --bg:#080a0f; --ink:#e6edf6; --ink-dim:#9aa7ba; --ink-faint:#5a6679; --bg-card:#10141d; --bg-card-edge:rgba(120,140,170,.18); --stat-line:rgba(150,170,200,.08); --north:var(--opt-accent,#38bdf8); --south:#f59e0b; --north-deep:#0e7fb0; --south-deep:#a8660a; --live:#34d399; --stale:#fbbf24; --mesh-a:rgba(40,56,78,.30); --mesh-b:rgba(86,60,18,.18); --mesh-c:rgba(24,30,42,.40); --shadow:0 20px 56px -22px rgba(0,0,0,.88); --grain-opacity:.07; } [data-board-theme="storm-desk"] .mesh { background: radial-gradient(120% 90% at 50% -10%, #131a26 0%, #0a0d14 52%, #06070b 100%), linear-gradient(180deg, #0c1019, #06070b); animation:none; } [data-board-theme="storm-desk"] .card { border-radius:7px; border:1px solid var(--bg-card-edge); background:var(--bg-card); backdrop-filter:none; box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.04); } [data-board-theme="storm-desk"] .card::before { background:linear-gradient(90deg, transparent, color-mix(in srgb,var(--north) 40%, transparent), transparent); opacity:.5; } [data-board-theme="storm-desk"] .c-head { letter-spacing:.02em; } /* RADAR-FORWARD: bright heavy frame + solid mono label strip */ [data-board-theme="storm-desk"] .c-radar { border:2px solid color-mix(in srgb,var(--north) 55%, var(--bg-card-edge)); border-radius:5px; box-shadow:0 0 0 1px rgba(56,189,248,.12), inset 0 0 28px rgba(0,0,0,.5); } [data-board-theme="storm-desk"] .radar-bar { background:var(--north); border-bottom:2px solid var(--north-deep); } [data-board-theme="storm-desk"] .radar-label { color:#06121a; font-weight:800; text-transform:uppercase; letter-spacing:.18em; font-family:var(--font-mono); } [data-board-theme="storm-desk"] .radar-time { color:#06121a; font-weight:700; opacity:.85; font-family:var(--font-mono); } [data-board-theme="storm-desk"] .c-stats::before { content:"OBSERVED"; grid-column:1/-1; color:var(--south); background:linear-gradient(90deg, rgba(245,158,11,.10), transparent); border-left:3px solid var(--south); padding:2px 8px; font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.24em; font-family:var(--font-mono); } [data-board-theme="storm-desk"] .stat-k { color:var(--ink-dim); text-transform:uppercase; letter-spacing:.14em; font-family:var(--font-mono); } [data-board-theme="storm-desk"] .c-feels { color:var(--ink-dim); } [data-board-theme="storm-desk"] .c-src { color:var(--ink-faint); font-family:var(--font-mono); letter-spacing:.04em; } [data-board-theme="storm-desk"] .fc-day:first-child { border-bottom:2px solid color-mix(in srgb,var(--south) 60%, transparent); } /* overlay panels: dark steel command surfaces */ [data-board-theme="storm-desk"] .wx, [data-board-theme="storm-desk"] .fc-bar, [data-board-theme="storm-desk"] .cmb-anchor.is-panel, [data-board-theme="storm-desk"] .cmb-anchor.is-forecast { --card-rgb:16 20 29; --card-rgb-2:24 30 42; --line:rgba(150,170,200,.16); --panel:rgb(var(--card-rgb)/var(--card-alpha)); --panel-2:rgb(var(--card-rgb-2)/var(--card-alpha)); } [data-board-theme="storm-desk"] .wx-radar { border:2px solid color-mix(in srgb,var(--north) 50%, transparent); } [data-board-theme="storm-desk"] .wx-stats { letter-spacing:.06em; } /* ALERT-FORWARD: heavier shape, never recolor severity */ [data-board-theme="storm-desk"] .board-alert { background:var(--sev); color:var(--sev-ink); font-weight:800; letter-spacing:.08em; text-transform:uppercase; border-top:1px solid color-mix(in srgb,var(--sev) 40%,#fff); border-bottom:4px solid color-mix(in srgb,var(--sev) 50%,#000); box-shadow:0 8px 24px -8px color-mix(in srgb,var(--sev) 60%, transparent); } [data-board-theme="storm-desk"] .al, [data-board-theme="storm-desk"] .c-alert { border:2px solid color-mix(in srgb,var(--sev) 70%, var(--bg-card-edge)); border-left:5px solid var(--sev); border-radius:5px; box-shadow:0 0 0 1px color-mix(in srgb,var(--sev) 30%, transparent), inset 0 0 20px color-mix(in srgb,var(--sev) 10%, transparent); } /* heavy dark-steel surface (was the default warm-red glass) + mono ops labels */ [data-board-theme="storm-desk"] .al { background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%), linear-gradient(180deg, #161b26, #10141d); backdrop-filter: none; } [data-board-theme="storm-desk"] .al-badge { font-family: var(--font-mono); letter-spacing: .16em; border-radius: 3px; } [data-board-theme="storm-desk"] .al-until { font-family: var(--font-mono); } /* ============================================================ LOCAL NEWS — modern broadcast-newsroom weather segment. Crisp lower-thirds, newsroom blue, news-red energy, strong alert package. Clean/contemporary/ authoritative (NOT CRT). Supports dark + light. ============================================================ */ /* mode-agnostic structure */ [data-board-theme="local-news"] .card { border-radius:6px; border:1px solid var(--bg-card-edge); box-shadow:var(--shadow); backdrop-filter:saturate(1.05) blur(2px); } [data-board-theme="local-news"] .card::before { background:linear-gradient(180deg,color-mix(in srgb,var(--north) 8%,transparent),transparent 42%); opacity:.9; } /* lower-third rule: bold blue underline with a red tick */ [data-board-theme="local-news"] .c-head { position:relative; border-bottom:3px solid var(--north); padding-bottom:.5rem; margin-bottom:.35rem; } [data-board-theme="local-news"] .c-head::after { content:""; position:absolute; left:0; bottom:-3px; width:2.4rem; height:3px; background:var(--south); } [data-board-theme="local-news"] .c-stats::before { content:"CURRENT CONDITIONS"; grid-column:1/-1; font-family:var(--font-display); font-weight:800; font-size:.62rem; letter-spacing:.22em; color:#fff; background:var(--north); padding:.26rem .6rem; border-radius:3px 3px 0 0; } [data-board-theme="local-news"] .stat-k { font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-stretch:condensed; color:var(--ink-dim); } [data-board-theme="local-news"] .c-feels { color:var(--ink-dim); } [data-board-theme="local-news"] .c-src { letter-spacing:.04em; } [data-board-theme="local-news"] .radar-bar { background:var(--north); border-radius:3px 3px 0 0; } [data-board-theme="local-news"] .radar-label { color:#fff; font-weight:800; letter-spacing:.24em; text-transform:uppercase; } [data-board-theme="local-news"] .radar-time { color:rgba(255,255,255,.85); } [data-board-theme="local-news"] .fc-day:first-child { border-top:3px solid var(--north); background:color-mix(in srgb,var(--north) 7%,transparent); } /* DARK palette */ [data-board-theme="local-news"][data-theme="dark"] { color-scheme:dark; --bg:#0a1730; --bg-card:#11203f; --bg-card-edge:rgba(120,160,230,.20); --ink:#f2f6fc; --ink-dim:#9fb0cb; --ink-faint:#5f7090; --north:var(--opt-accent,#1d6fe0); --south:#e0322f; --live:#4ade80; --stale:#f59e0b; --mesh-a:rgba(20,60,140,.40); --mesh-b:rgba(160,30,30,.18); --mesh-c:rgba(18,40,90,.42); --stat-line:rgba(150,180,235,.10); --shadow:0 22px 60px -22px rgba(0,8,24,.8); --grain-opacity:.04; } /* LIGHT palette */ [data-board-theme="local-news"][data-theme="light"] { color-scheme:light; /* muted newsroom off-white card, not stark white (DESIGN.md surface ladder) */ --bg:#e9eff8; --bg-card:#f5f8fd; --bg-card-edge:rgba(20,55,120,.18); --ink:#0c1b35; --ink-dim:#41547a; --ink-faint:#8294b4; --north:var(--opt-accent,#1d6fe0); --south:#d62b28; --live:#15803d; --stale:#b45309; --mesh-a:rgba(29,111,224,.14); --mesh-b:rgba(214,43,40,.08); --mesh-c:rgba(120,160,230,.16); --stat-line:rgba(20,55,120,.10); --shadow:0 24px 54px -24px rgba(20,50,100,.42); --grain-opacity:.02; } [data-board-theme="local-news"][data-theme="light"] .card::before { background:linear-gradient(180deg,color-mix(in srgb,var(--north) 10%,transparent),transparent 38%); opacity:1; } /* overlay panels (newsroom navy, near-white ink) */ [data-board-theme="local-news"] .wx, [data-board-theme="local-news"] .fc-bar, [data-board-theme="local-news"] .cmb-anchor.is-panel, [data-board-theme="local-news"] .cmb-anchor.is-forecast { --card-rgb:12 27 56; --card-rgb-2:18 40 80; --line:rgba(120,160,230,.30); --panel:rgb(var(--card-rgb)/var(--card-alpha)); --panel-2:rgb(var(--card-rgb-2)/var(--card-alpha)); } [data-board-theme="local-news"] .fc-bar { border-top:2px solid var(--north); } [data-board-theme="local-news"] .wx-stats { border-top:1px solid var(--line); } /* strong alert package (HUE untouched) */ [data-board-theme="local-news"] .board-alert { background:var(--sev); color:var(--sev-ink); border-top:3px solid color-mix(in srgb,var(--sev) 50%,#000); border-bottom:3px solid color-mix(in srgb,var(--sev) 50%,#000); font-weight:800; letter-spacing:.04em; text-transform:uppercase; box-shadow:0 6px 24px -6px rgba(0,0,0,.5); } /* alert box → newsroom lower-third: a blue panel with a SEVERITY spine + a severity bar header (the on-air alert package). Uses alerts.css --accent for severity (NOT --sev, which is undefined on the card). Mode-aware: dark = newsroom blue, light = white. */ [data-board-theme="local-news"] .al { border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--bg-card-edge)); border-left: 6px solid var(--accent); border-radius: 4px; backdrop-filter: none; } [data-board-theme="local-news"][data-theme="dark"] .al { background: linear-gradient(180deg, #16284e, #11203f); color: #fff; } [data-board-theme="local-news"][data-theme="light"] .al { background: linear-gradient(180deg, #ffffff, #f4f8ff); } [data-board-theme="local-news"] .al-rule { height: 5px; background: var(--accent); animation: none; } [data-board-theme="local-news"] .al-badge { background: var(--accent); color: #10182c; border-radius: 0; font-weight: 800; box-shadow: none; } [data-board-theme="local-news"][data-theme="dark"] .al-event { color: #fff; } [data-board-theme="local-news"][data-theme="dark"] .al-area, [data-board-theme="local-news"][data-theme="dark"] .al-instruction { color: #cdd9f0; } [data-board-theme="local-news"] .al-until { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 3px; } [data-board-theme="local-news"] .c-alert { background:var(--sev); color:var(--sev-ink); border-left:6px solid color-mix(in srgb,var(--sev) 60%,#000); border-radius:4px; font-weight:700; } [data-board-theme="local-news"] .card[data-sev] { border-color:var(--sev); box-shadow:var(--shadow),0 0 0 2px color-mix(in srgb,var(--sev) 55%,transparent); } /* ============================================================ CLASSY — refined premium theme for hotels, clubs, galleries, restaurants, and branded executive displays. Deep charcoal, ivory, muted gold + slate. Fine hairlines, flat cards, minimal glow. Curated and calm. (dark + light) ============================================================ */ /* mode-agnostic structure */ [data-board-theme="classy"] .mesh { background:linear-gradient(180deg,#16140f 0%,#0e0c09 60%,#080706 100%); animation:none; } [data-board-theme="classy"] .grain { opacity:0; } [data-board-theme="classy"] .card { border-radius:10px; border:1px solid var(--bg-card-edge); backdrop-filter:none; background:var(--bg-card); } [data-board-theme="classy"] .card::after { display:none; } [data-board-theme="classy"][data-theme="light"] .card::before { background:linear-gradient(180deg,rgba(201,169,106,.05),transparent 60%); opacity:1; } [data-board-theme="classy"] .c-head { border-bottom:1px solid color-mix(in srgb,var(--north) 50%,var(--bg-card-edge)); } [data-board-theme="classy"] .stat-k { text-transform:uppercase; letter-spacing:.14em; font-weight:600; color:var(--ink-dim); } [data-board-theme="classy"] .c-stats::before { background:color-mix(in srgb,var(--north) 45%,var(--bg-card-edge)); opacity:.8; } [data-board-theme="classy"] .c-radar { border:1px solid var(--bg-card-edge); border-radius:8px; overflow:hidden; filter:saturate(.82) brightness(.96); } [data-board-theme="classy"] .radar-bar { background:color-mix(in srgb,var(--bg-card) 88%,transparent); border-top:1px solid var(--bg-card-edge); } [data-board-theme="classy"] .radar-label, [data-board-theme="classy"] .radar-time { color:var(--ink-dim); letter-spacing:.06em; } [data-board-theme="classy"] .fc-day:first-child { border-bottom:2px solid var(--north); } /* DARK palette (primary) */ [data-board-theme="classy"][data-theme="dark"] { color-scheme:dark; --bg:#141310; --ink:#f3ead6; --ink-dim:#b7ab8f; --ink-faint:#7a7160; --bg-card:#1c1b16; --bg-card-edge:rgba(201,169,106,.28); --north:var(--opt-accent,#c9a96a); --south:#8a93a6; --live:#9bbf8a; --stale:#c9a96a; --mesh-a:rgba(40,36,26,.40); --mesh-b:rgba(28,26,22,.30); --mesh-c:rgba(18,16,12,.40); --stat-line:rgba(201,169,106,.10); --shadow:0 14px 34px -22px rgba(0,0,0,.7); --grain-opacity:0; } /* LIGHT palette */ [data-board-theme="classy"][data-theme="light"] { color-scheme:light; --bg:#f6f1e7; --ink:#2a2620; --ink-dim:#6b6256; --ink-faint:#a59a86; --bg-card:#fffdf8; --bg-card-edge:rgba(176,142,78,.30); --north:var(--opt-accent,#b08e4e); --south:#727b8e; --live:#5f7d4f; --stale:#b08e4e; --mesh-a:rgba(214,200,170,.40); --mesh-b:rgba(230,222,205,.34); --mesh-c:rgba(245,240,228,.46); --stat-line:rgba(176,142,78,.12); --shadow:0 18px 40px -26px rgba(120,100,60,.4); --grain-opacity:0; } [data-board-theme="classy"][data-theme="light"] .mesh { background:linear-gradient(180deg,#f8f3ea 0%,#f1eadc 60%,#ece3d2 100%); } /* overlay panels: charcoal + ivory ink in BOTH modes (broadcast) */ [data-board-theme="classy"] .wx, [data-board-theme="classy"] .fc-bar, [data-board-theme="classy"] .cmb-anchor.is-panel, [data-board-theme="classy"] .cmb-anchor.is-forecast { --card-rgb:28 27 22; --card-rgb-2:36 34 27; --line:rgba(201,169,106,.26); --ink:#f3ead6; --ink-dim:#b7ab8f; --panel:rgb(var(--card-rgb)/var(--card-alpha)); --panel-2:rgb(var(--card-rgb-2)/var(--card-alpha)); } [data-board-theme="classy"] .wx-radar { filter:saturate(.82) brightness(.96); } /* alerts: SHAPE/texture only — never recolor severity */ [data-board-theme="classy"] .board-alert { background:var(--sev); box-shadow:none; border-radius:8px; letter-spacing:.04em; } /* alert box → refined & restrained: flat card, fine GOLD hairline, a thin severity rule, an outline (not filled) badge. Minimal glow — curated, not loud. Mode-aware surface. */ [data-board-theme="classy"] .al { border-radius: 8px; box-shadow: 0 18px 44px -22px rgba(0, 0, 0, .6); border: 1px solid color-mix(in srgb, var(--north) 45%, transparent); backdrop-filter: none; } [data-board-theme="classy"][data-theme="dark"] .al { background: linear-gradient(180deg, #221f18, #1c1b16); } [data-board-theme="classy"][data-theme="light"] .al { background: linear-gradient(180deg, #fffdf7, #faf6ec); } [data-board-theme="classy"] .al-rule { height: 2px; background: var(--accent); animation: none; } [data-board-theme="classy"] .al-badge { background: transparent; color: var(--accent); box-shadow: none; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 999px; } [data-board-theme="classy"] .al-event { letter-spacing: .5px; } [data-board-theme="classy"] .al-until { border-radius: 4px; } [data-board-theme="classy"] .c-alert { border-radius: 8px; box-shadow: none; } [data-board-theme="classy"] .cmb-tk { background:var(--sev); box-shadow:none; letter-spacing:.04em; } /* ============================================================ CLEAN — restrained, bright, information-first. Near-white cards, quiet blue/teal accents, minimal texture, no glass. Light-only; built for offices, schools, signage & embeds. ============================================================ */ [data-board-theme="clean"] { color-scheme: light; /* muted light surfaces — bright + minimal, but not stark white (DESIGN.md surface ladder) */ --bg:#eef1f6; --ink:#0f172a; --ink-dim:#475569; --ink-faint:#94a3b8; --bg-card:#f8fafc; --bg-card-edge:rgba(15,23,42,.12); --stat-line:rgba(15,23,42,.08); --shadow:0 1px 2px rgba(15,23,42,.06),0 6px 16px -10px rgba(15,23,42,.22); --north:var(--opt-accent,#2563eb); --north-deep:#dbeafe; --south:#0d9488; --south-deep:#d1f3ee; --live:#16a34a; --stale:#b45309; --mesh-a:rgba(37,99,235,.06); --mesh-b:rgba(13,148,136,.05); --mesh-c:rgba(37,99,235,.04); --grain-opacity:0; } [data-board-theme="clean"] .mesh { background:none; animation:none; } [data-board-theme="clean"] .grain { display:none; } [data-board-theme="clean"] .card { border:1px solid var(--bg-card-edge); border-radius:14px; backdrop-filter:none; } /* neutralize the glass accent wash — keep cards crisp near-white */ [data-board-theme="clean"] .card::before { background:none; opacity:0; } [data-board-theme="clean"] .card::after { opacity:0; } [data-board-theme="clean"] .c-stats::before { content:"CONDITIONS"; grid-column:1/-1; font-weight:700; font-size:.58rem; letter-spacing:.16em; color:var(--ink-dim); background:rgba(15,23,42,.04); border-radius:6px; padding:.26rem .55rem; } [data-board-theme="clean"] .stat-k { text-transform:uppercase; letter-spacing:.07em; font-size:.62rem; font-weight:600; color:var(--ink-faint); } [data-board-theme="clean"] .c-feels, [data-board-theme="clean"] .c-src { color:var(--ink-faint); } [data-board-theme="clean"] .radar-bar { background:rgba(15,23,42,.03); } [data-board-theme="clean"] .radar-label { color:var(--ink-dim); } [data-board-theme="clean"] .radar-time { color:var(--ink-faint); } [data-board-theme="clean"] .fc-day:first-child { background:var(--north-deep); border-radius:10px; } /* overlay panels: white, opaque, dark ink */ [data-board-theme="clean"] .wx, [data-board-theme="clean"] .fc-bar, [data-board-theme="clean"] .cmb-anchor.is-panel, [data-board-theme="clean"] .cmb-anchor.is-forecast { --card-rgb:255 255 255; --card-rgb-2:248 250 252; --card-alpha:.92; --line:rgba(15,23,42,.10); --ink:#0f172a; --ink-dim:#475569; --panel:rgb(var(--card-rgb)/var(--card-alpha)); --panel-2:rgb(var(--card-rgb-2)/var(--card-alpha)); } [data-board-theme="clean"] .wx-stats { color:var(--ink-dim); } /* alerts: restyle SHAPE only — never recolor severity */ [data-board-theme="clean"] .board-alert, [data-board-theme="clean"] .cmb-tk { background:var(--sev); box-shadow:none; } /* alert box → crisp neutral-white card + a clean severity top bar (light, information- first; replaces the warm-tinted default light card). */ [data-board-theme="clean"] .al { background: linear-gradient(180deg, #ffffff, #f6f8fb); --ink: #0f172a; --ink-dim: #475569; border: 1px solid var(--bg-card-edge); border-radius: 10px; box-shadow: 0 12px 30px -14px rgba(15, 23, 42, .28); backdrop-filter: none; } [data-board-theme="clean"] .al-rule { height: 4px; background: var(--accent); animation: none; } [data-board-theme="clean"] .al-badge { border-radius: 6px; box-shadow: none; } [data-board-theme="clean"] .al-event { color: var(--ink); } [data-board-theme="clean"] .al-instruction { color: var(--ink-dim); border-top-color: var(--bg-card-edge); } [data-board-theme="clean"] .c-alert { border-radius: 10px; box-shadow: none; } /* ============================================================ COASTAL — clean, airy seaside light theme (soft sky-to-sea wash, near-white cards, sea-blue + warm-sand accents, breezy rounded corners, calm marine ink). The warm/marine counterpart to "Clean". Light-only, mode-agnostic. ============================================================ */ [data-board-theme="coastal"] { color-scheme: light; --bg: #e6f1f8; --ink: #0c2a3a; --ink-dim: #42637a; --ink-faint: #8aa6b8; /* soft sea-tinted off-white card, not paper-white (DESIGN.md surface ladder) */ --bg-card: rgba(243, 250, 253, .97); --bg-card-edge: rgba(12, 74, 110, .16); --stat-line: rgba(12, 74, 110, .10); --shadow: 0 18px 44px -24px rgba(12, 74, 110, .38); --north: var(--opt-accent, #0891b2); --north-deep: #d7f0f6; --south: #f59e0b; --south-deep: #fdeccb; --live: #15803d; --stale: #b45309; --mesh-a: rgba(8, 145, 178, .22); --mesh-b: rgba(245, 158, 11, .16); --mesh-c: rgba(56, 189, 248, .20); --grain-opacity: 0; } [data-board-theme="coastal"] .mesh { background: linear-gradient(180deg, rgba(56, 189, 248, .10) 0%, rgba(8, 145, 178, .07) 52%, rgba(8, 145, 178, .12) 100%), linear-gradient(180deg, #f3fafe 0%, #eaf4fb 60%, #e3f0f8 100%); animation: none; } [data-board-theme="coastal"] .card { border-radius: 14px; border: 1px solid var(--bg-card-edge); } [data-board-theme="coastal"] .card::before { background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%); opacity: .7; } [data-board-theme="coastal"] .card::after { background: linear-gradient(to right, transparent, color-mix(in srgb, var(--accent) 30%, var(--bg-card-edge)), transparent); } [data-board-theme="coastal"] .c-head { border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, var(--bg-card-edge)); padding-bottom: .4rem; } [data-board-theme="coastal"] .c-stats::before { content: "CONDITIONS"; grid-column: 1 / -1; font-family: var(--font-display); font-weight: 700; font-size: .58rem; letter-spacing: .22em; color: var(--ink-dim); background: color-mix(in srgb, var(--north) 12%, transparent); border-radius: 7px; padding: .22rem .55rem; margin-bottom: .2rem; } [data-board-theme="coastal"] .c-radar { border-radius: 11px; } [data-board-theme="coastal"] .radar-bar { background: var(--north); } [data-board-theme="coastal"] .radar-label { color: #ffffff; font-weight: 700; letter-spacing: .14em; } [data-board-theme="coastal"] .radar-time { color: rgba(255, 255, 255, .9); font-weight: 600; } [data-board-theme="coastal"] .fc-day:first-child { background: color-mix(in srgb, var(--south) 16%, transparent); } [data-board-theme="coastal"] .stat-k { color: var(--ink-dim); text-transform: uppercase; letter-spacing: .08em; } [data-board-theme="coastal"] .c-feels { color: var(--ink-dim); } [data-board-theme="coastal"] .c-src { color: var(--ink-faint); } /* overlays: re-point to light/white marine; dark marine ink from Tier-1 above */ [data-board-theme="coastal"] .wx, [data-board-theme="coastal"] .fc-bar, [data-board-theme="coastal"] .cmb-anchor.is-panel, [data-board-theme="coastal"] .cmb-anchor.is-forecast { --card-rgb: 255 255 255; --card-rgb-2: 233 245 251; --card-alpha: .9; --line: rgba(12, 74, 110, .14); --panel: rgb(var(--card-rgb) / var(--card-alpha)); --panel-2: rgb(var(--card-rgb-2) / var(--card-alpha)); } [data-board-theme="coastal"] .wx { border-radius: 14px; border: 1px solid rgba(12, 74, 110, .12); } [data-board-theme="coastal"] .fc-bar { border-top: 2px solid color-mix(in srgb, var(--north) 40%, transparent); } [data-board-theme="coastal"] .wx-radar { border-radius: 11px; border-color: rgba(12, 74, 110, .12); } [data-board-theme="coastal"] .wx-stats { border-radius: 11px; } /* alerts: keep them LOUD, just soften the corners (severity colors preserved) */ [data-board-theme="coastal"] .board-alert, [data-board-theme="coastal"] .cmb-tk { background: var(--sev); } /* alert box → soft airy white card, breezy rounded corners, a sea-tone severity top bar (light marine; replaces the warm-tinted default light card). */ [data-board-theme="coastal"] .al { background: linear-gradient(180deg, #ffffff, #eef6fb); --ink: #0c2a3a; --ink-dim: #42637a; border: 1px solid var(--bg-card-edge); border-radius: 14px; box-shadow: 0 16px 36px -16px rgba(12, 74, 110, .3); backdrop-filter: none; } [data-board-theme="coastal"] .al-rule { height: 4px; background: var(--accent); animation: none; border-radius: 14px 14px 0 0; } [data-board-theme="coastal"] .al-badge { border-radius: 999px; box-shadow: none; } [data-board-theme="coastal"] .al-event { color: var(--ink); } [data-board-theme="coastal"] .al-instruction { color: var(--ink-dim); border-top-color: var(--bg-card-edge); } [data-board-theme="coastal"] .c-alert { border-radius: 10px; } /* ============================================================ TERMINAL GLOW — an actual CRT computer terminal rendering the forecast, NOT a recolored weather card. The glass-card silhouette is DEMOLISHED: no panels, no big-temp hero, no stat-box grid, no weather glyph. Each location is a terminal WINDOW (square green outline + inverse-video title bar); the body is a column of glowing labeled text rows in a VT323 pixel font, on a black screen with a barrel vignette, dense scanlines, and phosphor bloom. The board is dark in BOTH modes: data-theme="dark"=GREEN phosphor, data-theme="light"=AMBER phosphor. radarScheme 0. ============================================================ */ [data-board-theme="terminal-glow"] { color-scheme: dark; --phos: #41ff77; --scr: #020a05; /* phosphor + screen-black */ --bg: #010402; --ink: #8dffae; --ink-dim: #43c46c; --ink-faint: #2c8a4a; --bg-card: #020a05; --bg-card-edge: var(--phos); --stat-line: rgba(65, 255, 119, .22); --north: #41ff77; --south: #41ff77; --live: #41ff77; --stale: #b7ff5a; --shadow: none; /* VT323 pixel CRT font everywhere — the single biggest identity shift */ --font-display: 'VT323', var(--font-mono); --font-mono: 'VT323', ui-monospace, monospace; } /* force MONOCHROME: a CRT phosphor screen is one color — beat the per-location accent */ [data-board-theme="terminal-glow"] .card:not(.skeleton) { --accent: var(--phos) !important; } /* the SCREEN: black field + barrel vignette (no soft mesh glows) */ [data-board-theme="terminal-glow"] .mesh { background: radial-gradient(125% 125% at 50% 50%, #04140b 0%, #020a05 52%, #000 100%); animation: none; } /* dense scanlines + a faint rolling refresh band, OVER everything (sells the CRT) */ [data-board-theme="terminal-glow"] .grain { opacity: 1; mix-blend-mode: normal; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .42) 0 1px, transparent 1px 3px), linear-gradient(180deg, transparent, rgba(65, 255, 119, .04) 50%, transparent); } @media (prefers-reduced-motion: no-preference) { [data-board-theme="terminal-glow"] .grain { animation: tg-roll 8s linear infinite; } @keyframes tg-roll { from { background-position: 0 0, 0 -100vh; } to { background-position: 0 0, 0 100vh; } } } /* "Scanlines" intensity option (default = normal, the rule above). */ [data-board-theme="terminal-glow"][data-opt-scanlines="off"] .grain { display: none; } [data-board-theme="terminal-glow"][data-opt-scanlines="subtle"] .grain { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 4px), linear-gradient(180deg, transparent, rgba(65, 255, 119, .03) 50%, transparent); } [data-board-theme="terminal-glow"][data-opt-scanlines="heavy"] .grain { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .6) 0 1px, transparent 1px 2px), linear-gradient(180deg, transparent, rgba(65, 255, 119, .06) 50%, transparent); } /* CARD → terminal WINDOW: square, thin phosphor outline, no panel fill/blur/shadow */ [data-board-theme="terminal-glow"] .card { border-radius: 0; border: 1px solid var(--phos); background: rgba(4, 16, 9, .55); backdrop-filter: none; box-shadow: inset 0 0 0 1px rgba(65, 255, 119, .14), inset 0 0 34px rgba(65, 255, 119, .05); } [data-board-theme="terminal-glow"] .card::before, [data-board-theme="terminal-glow"] .card::after { display: none; } /* phosphor bloom on all screen text; the title bar (inverse) opts out below */ [data-board-theme="terminal-glow"] .c-data, [data-board-theme="terminal-glow"] .c-forecast { text-shadow: 0 0 5px color-mix(in srgb, var(--phos) 60%, transparent); } [data-board-theme="terminal-glow"] .c-data { padding: 0; gap: 0; font-size: 1.18rem; line-height: 1.18; } /* HEADER → inverse-video window title bar: "[ NEW YORK ]" green on black-text */ [data-board-theme="terminal-glow"] .c-head { background: var(--phos); color: var(--scr); margin: -1px -1px .5rem; padding: .12rem .5rem; border: none; /* keep the phosphor TITLE BAR a single row (city left, clock right); the global stacked header would make the bar 3 lines tall and clip the city. Long names scroll instead. */ flex-direction: row; justify-content: space-between; align-items: center; } [data-board-theme="terminal-glow"] .c-head, [data-board-theme="terminal-glow"] .c-head * { text-shadow: none; color: var(--scr) !important; } /* fixed, compact pixel-font size (don't inherit the big global clamp) + MARQUEE: in this single-row title bar the name shares width with the clock, so long names SCROLL (ping-pong) rather than shrink — `--name-fit: scroll` tells fitName() in app.js to scroll, not shrink. */ [data-board-theme="terminal-glow"] .c-place h2 { font-weight: 400; letter-spacing: .04em; text-transform: uppercase; --name-fit: scroll; /* MARQUEE: fitName() scrolls long names instead of shrinking (app.js) */ } /* Compact, terminal-bar name size. The selector must out-specify the global `.stage:not(.expanded) .c-place h2` clamp (0,3,1) or the name renders at the big 40px board size and every name overflows the narrow single-row bar. At this size short names (NEWARK) sit static; long ones (JERSEY CITY, ATLANTIC CITY) ping-pong. */ [data-board-theme="terminal-glow"] .stage:not(.expanded) .c-place h2 { font-size: clamp(1.3rem, 2.4vw, 2rem); } [data-board-theme="terminal-glow"] .c-place h2::before { content: "▌"; margin-right: .12em; } [data-board-theme="terminal-glow"] .c-state { font-size: .8rem; opacity: .8; } [data-board-theme="terminal-glow"] .c-clock { display: block; text-align: right; } [data-board-theme="terminal-glow"] .c-time { font-size: 1.1rem; letter-spacing: .02em; } /* HERO → text rows, not a centered number. Label the temp; ASCII-art the sky glyph. */ [data-board-theme="terminal-glow"] .c-hero { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 0 .5rem; } /* ASCII-ART weather glyph: terminal-glow defaults to the "ascii-art" icon set (themes.js), an SVG character-grid masked in the phosphor color (.wic-ascii inherits currentColor). A terminal renders weather as text — its own language vs every theme's shared SVG icon. (If the owner overrides the icon set per board, that set renders here instead.) */ [data-board-theme="terminal-glow"] .c-hero .wicon { display: block; flex: 0 0 auto; width: clamp(58px, 9vh, 96px); height: clamp(58px, 9vh, 96px); color: var(--phos); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--phos) 60%, transparent)); } /* terminal forecast = text rows (DAY HI/LO) — drop the per-day icon (the other anchor) */ [data-board-theme="terminal-glow"] .fc-ico { display: none; } [data-board-theme="terminal-glow"] .c-temp-wrap { display: block; } [data-board-theme="terminal-glow"] .c-temp { font-weight: 400; line-height: 1; color: var(--phos); font-size: clamp(2.2rem, 6vh, 3.4rem); letter-spacing: .01em; display: block; } [data-board-theme="terminal-glow"] .c-temp::before { content: "TEMP "; font-size: .34em; letter-spacing: .12em; color: var(--ink-dim); vertical-align: .9em; } [data-board-theme="terminal-glow"] .c-temp sup { font-size: .34em; vertical-align: .7em; } [data-board-theme="terminal-glow"] .c-cond { text-transform: uppercase; letter-spacing: .06em; color: var(--ink); } [data-board-theme="terminal-glow"] .c-cond::before { content: "SKY "; color: var(--ink-dim); } [data-board-theme="terminal-glow"] .c-feels { color: var(--ink-dim); } [data-board-theme="terminal-glow"] .c-feels::before { content: "> "; } [data-board-theme="terminal-glow"] .c-hilo { color: var(--ink); gap: 1rem; } /* STATS → a left-aligned readout list, NOT boxes: "WIND 10 mph WSW" */ [data-board-theme="terminal-glow"] .c-stats { display: block; border: none; border-top: 1px dashed var(--stat-line); margin-top: .35rem; padding: .3rem .5rem 0; } [data-board-theme="terminal-glow"] .c-stats::before { content: "> CURRENT CONDITIONS"; display: block; font-family: var(--font-mono); font-size: .92rem; letter-spacing: .08em; color: var(--phos); background: none; padding: 0 0 .15rem; } [data-board-theme="terminal-glow"] .stat { display: grid; grid-template-columns: 9ch 1fr; align-items: baseline; padding: .02rem 0; border: none; background: none; text-align: left; } [data-board-theme="terminal-glow"] .stat-k { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .04em; font-size: 1rem; color: var(--ink-dim); text-align: left; } [data-board-theme="terminal-glow"] .stat-v { font-family: var(--font-mono); font-size: 1rem; color: var(--ink); justify-self: start; } [data-board-theme="terminal-glow"] .stat-v small { color: var(--ink-dim); } /* "Two-column conditions" option (themeOpts.twocol): lay the readout in two columns so a long stat list fits at a readable size instead of being squeezed/cut in one column. The ::before header spans both; each stat STACKS label over value (an inline label→value pair overlaps in a half-width cell). */ [data-board-theme="terminal-glow"][data-opt-twocol="on"] .c-stats { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; row-gap: .2rem; } [data-board-theme="terminal-glow"][data-opt-twocol="on"] .c-stats::before { grid-column: 1 / -1; } [data-board-theme="terminal-glow"][data-opt-twocol="on"] .stat { display: block; } [data-board-theme="terminal-glow"][data-opt-twocol="on"] .stat-k { display: block; font-size: .82rem; line-height: 1.1; } [data-board-theme="terminal-glow"][data-opt-twocol="on"] .stat-v { display: block; font-size: .95rem; line-height: 1.15; } [data-board-theme="terminal-glow"] .c-sun { padding: .15rem .5rem 0; color: var(--ink-dim); letter-spacing: .04em; } [data-board-theme="terminal-glow"] .c-src { font-family: var(--font-mono); color: var(--scr); background: var(--phos); margin: .3rem -1px -1px; padding: .1rem .5rem; letter-spacing: .04em; text-shadow: none; } [data-board-theme="terminal-glow"] .c-src::before { content: "» "; } /* RADAR → a framed scope window with an inverse label bar + scanline overlay + green wash */ [data-board-theme="terminal-glow"] .c-radar { border: 1px solid var(--phos); border-radius: 0; background: var(--scr); position: relative; } [data-board-theme="terminal-glow"] .c-radar::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .35) 0 1px, transparent 1px 3px); box-shadow: inset 0 0 36px rgba(65, 255, 119, .22); } [data-board-theme="terminal-glow"] .radar-bar { background: var(--phos); border: none; } [data-board-theme="terminal-glow"] .radar-label, [data-board-theme="terminal-glow"] .radar-time { color: var(--scr); font-family: var(--font-mono); letter-spacing: .08em; text-shadow: none; } /* FORECAST → a green readout strip */ [data-board-theme="terminal-glow"] .card.is-full .c-forecast { border-top: 1px dashed var(--stat-line); } [data-board-theme="terminal-glow"] .fc-day { font-family: var(--font-mono); } [data-board-theme="terminal-glow"] .fc-day:first-child { border-left: 2px solid var(--phos); } /* OVERLAYS — terminal windows too (square, phosphor outline, black screen) */ [data-board-theme="terminal-glow"] .wx, [data-board-theme="terminal-glow"] .fc-bar, [data-board-theme="terminal-glow"] .cmb-anchor.is-panel, [data-board-theme="terminal-glow"] .cmb-anchor.is-forecast { --card-rgb: 2 10 5; --card-rgb-2: 4 16 9; --line: rgba(65, 255, 119, .3); --panel: rgb(var(--card-rgb) / var(--card-alpha)); --panel-2: rgb(var(--card-rgb-2) / var(--card-alpha)); } [data-board-theme="terminal-glow"] .wx { border-radius: 0; border: 1px solid var(--phos); } [data-board-theme="terminal-glow"] .fc-bar { border-radius: 0; border: 1px solid var(--phos); } [data-board-theme="terminal-glow"] .wx-radar { border-radius: 0; border-color: var(--phos); position: relative; } /* phosphor bloom + scanline scope, mirroring the board CRT panel */ [data-board-theme="terminal-glow"] .wx { text-shadow: 0 0 5px color-mix(in srgb, var(--phos) 55%, transparent); } [data-board-theme="terminal-glow"] .wx-radar::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .35) 0 1px, transparent 1px 3px); box-shadow: inset 0 0 36px rgba(65, 255, 119, .22); } /* inverse-video title bar */ [data-board-theme="terminal-glow"] .wx-top { background: var(--phos); margin: -1px -1px .5rem; padding: .14rem .5rem; align-items: center; border: none; } [data-board-theme="terminal-glow"] .wx-top, [data-board-theme="terminal-glow"] .wx-top * { color: var(--scr) !important; text-shadow: none; } [data-board-theme="terminal-glow"] .wx-name { font-weight: 400; text-transform: uppercase; letter-spacing: .04em; } [data-board-theme="terminal-glow"] .wx-name::before { content: "\25AE "; } /* temp as a labeled readout, not a hero */ [data-board-theme="terminal-glow"] .wx-temp { color: var(--phos); font-weight: 400; } [data-board-theme="terminal-glow"] .wx-temp::before { content: "TEMP "; font-size: .32em; letter-spacing: .12em; color: var(--ink-dim); vertical-align: .9em; } [data-board-theme="terminal-glow"] .wx-cond { color: var(--ink); text-transform: uppercase; letter-spacing: .06em; } [data-board-theme="terminal-glow"] .wx-cond::before { content: "SKY "; color: var(--ink-dim); } [data-board-theme="terminal-glow"] .wx-feels { color: var(--ink-dim); } /* ASCII-art glyph (data-kind on #wx-ico, set in obs.js) */ [data-board-theme="terminal-glow"] .wx-ico > * { display: none; } /* hide svg AND meteocons img; ASCII ::before wins */ [data-board-theme="terminal-glow"] .wx-ico { width: auto; height: auto; } [data-board-theme="terminal-glow"] .wx-ico::before { display: block; white-space: pre; text-align: center; font-family: var(--font-mono); font-size: clamp(.9rem, 2.4vh, 1.5rem); line-height: 1.05; color: var(--phos); text-shadow: 0 0 6px color-mix(in srgb, var(--phos) 60%, transparent); content: ".--.\A( )\A'----'"; } [data-board-theme="terminal-glow"] .wx-ico[data-kind="clear"]::before { content: "\\ | /\A-( o )-\A/ | \\"; } [data-board-theme="terminal-glow"] .wx-ico[data-kind="partly"]::before { content: "\\|/ .--.\A-o- ( )\A/| '--'"; } [data-board-theme="terminal-glow"] .wx-ico[data-kind="rain"]::before { content: ".--.\A( )\A' ' ' '"; } [data-board-theme="terminal-glow"] .wx-ico[data-kind="snow"]::before { content: ".--.\A( )\A* * * *"; } [data-board-theme="terminal-glow"] .wx-ico[data-kind="storm"]::before { content: ".--.\A( )\A'/_ /_"; } [data-board-theme="terminal-glow"] .wx-ico[data-kind="fog"]::before { content: "~ ~ ~ ~\A ~ ~ ~\A~ ~ ~ ~"; } /* radar scope label inverse */ [data-board-theme="terminal-glow"] .wx-radar-tag { background: var(--phos); color: var(--scr); font-family: var(--font-mono); letter-spacing: .08em; text-shadow: none; padding: .05rem .4rem; } [data-board-theme="terminal-glow"] .wx-radar-time { color: var(--phos); font-family: var(--font-mono); } /* stats → readout list */ [data-board-theme="terminal-glow"] .wx-stats { display: block; } [data-board-theme="terminal-glow"] .wx-stat { display: grid; grid-template-columns: 9ch 1fr; align-items: baseline; background: none; border: none; padding: .02rem 0; } [data-board-theme="terminal-glow"] .wx-stat .k { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-dim); } [data-board-theme="terminal-glow"] .wx-stat .v { font-family: var(--font-mono); color: var(--ink); justify-self: start; } [data-board-theme="terminal-glow"] .wx-foot { color: var(--ink-dim); font-family: var(--font-mono); } [data-board-theme="terminal-glow"] #wx-src::before { content: "\BB "; } /* forecast strip = text rows, no per-day icon */ [data-board-theme="terminal-glow"] .fc-col .wicon { display: none; } [data-board-theme="terminal-glow"] .fc-dow, [data-board-theme="terminal-glow"] .fc-date, [data-board-theme="terminal-glow"] .fc-temps { font-family: var(--font-mono); } /* ALERTS — severity colors preserved; only the shape goes squared/inverse */ [data-board-theme="terminal-glow"] .board-alert, [data-board-theme="terminal-glow"] .cmb-tk { background: var(--sev); box-shadow: none; animation: none; backdrop-filter: none; } /* alert CARD adopts the terminal surface + mono ink; severity --accent stays loud (alerts.css drives the rule/badge/border/glow from it). */ [data-board-theme="terminal-glow"] .al { background: linear-gradient(180deg, #07150b, #040d06); --ink: #8dffae; --ink-dim: #43c46c; border-radius: 0; } [data-board-theme="terminal-glow"] .al-event, [data-board-theme="terminal-glow"] .al-badge, [data-board-theme="terminal-glow"] .al-instruction { font-family: var(--font-mono); } [data-board-theme="terminal-glow"] .c-alert { border-radius: 0; border: 1px solid color-mix(in srgb, var(--sev) 70%, #fff); box-shadow: none; } /* ---- AMBER (data-theme="light") — same CRT, amber phosphor. Beats style.css's [data-theme="light"] Vivid washes (0,2,0 > 0,1,0). The inverse title bar/source bar re-key to amber automatically via --phos; only the screen blacks need restating. ---- */ [data-board-theme="terminal-glow"][data-theme="light"] { --phos: #ffb13b; --scr: #0a0500; --bg: #030200; --ink: #ffd48a; --ink-dim: #c7832d; --ink-faint: #8a5c1f; --bg-card: #0a0500; --bg-card-edge: var(--phos); --stat-line: rgba(255, 177, 59, .22); --north: #ffb13b; --south: #ffb13b; --live: #ffb13b; --stale: #ffd23f; } [data-board-theme="terminal-glow"][data-theme="light"] .mesh { background: radial-gradient(125% 125% at 50% 50%, #160c00 0%, #0a0500 52%, #000 100%); } [data-board-theme="terminal-glow"][data-theme="light"] .card { background: rgba(16, 9, 0, .55); } [data-board-theme="terminal-glow"][data-theme="light"] .card::before, [data-board-theme="terminal-glow"][data-theme="light"] .card::after { display: none; } [data-board-theme="terminal-glow"][data-theme="light"] .fc-day:first-child { background: none; border-left: 2px solid var(--phos); } /* ============================================================ VAPORWAVE — a Miami-sunset OUTRUN world, not an instrument panel (the trap: it read as "Techno in purple"). The SCENE dominates: a striped chrome sun on the horizon, a glowing perspective grid floor, a neon skyline + palms. The cards go nearly TRANSPARENT so the sunset shows straight through them; the temperature is huge CHROME 3D type (white→gold→pink→cyan gradient fill) in wide Orbitron, and the city is italic neon. Dark-only. radarScheme 8 (Dark Sky). Reduced-motion freezes the grid drift. ============================================================ */ [data-board-theme="vaporwave"] { color-scheme: dark; --bg: #05020a; --ink: #fff3ff; --ink-dim: #d9bdf2; --ink-faint: #a385c9; --bg-card: rgba(18, 6, 40, .34); --bg-card-edge: rgba(255, 63, 180, .55); --stat-line: rgba(53, 244, 255, .3); --north: #ff3fb4; --south: #35f4ff; --live: #35f4ff; --stale: #ffb86b; --shadow: 0 0 0 1px rgba(53, 244, 255, .25), 0 24px 60px -26px rgba(0, 0, 0, .9); --grain-opacity: .05; --font-display: 'Orbitron', sans-serif; } /* OUTRUN SKY: muted purple night + a few stars + a striped PINK→MAGENTA sun (masked SVG: solid top, cut stripes on the lower disc) sitting just above the horizon. The sun lives in the element background; the mountains (::after) occlude its base and the grid (::before) paints the floor — both on top of this. */ [data-board-theme="vaporwave"] .mesh { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ff9ec4'/%3E%3Cstop offset='0.4' stop-color='%23f0568f'/%3E%3Cstop offset='0.72' stop-color='%23c23d86'/%3E%3Cstop offset='1' stop-color='%237a2e8f'/%3E%3C/linearGradient%3E%3Cmask id='m'%3E%3Crect width='200' height='112' fill='%23fff'/%3E%3Crect y='116' width='200' height='6' fill='%23fff'/%3E%3Crect y='128' width='200' height='6' fill='%23fff'/%3E%3Crect y='141' width='200' height='5' fill='%23fff'/%3E%3Crect y='155' width='200' height='5' fill='%23fff'/%3E%3Crect y='171' width='200' height='4' fill='%23fff'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='100' cy='100' r='96' fill='url(%23g)' mask='url(%23m)'/%3E%3C/svg%3E") no-repeat 50% 40% / 44vh 44vh, radial-gradient(40vh 30vh at 50% 46%, rgba(240, 86, 143, .4), transparent 70%), radial-gradient(1px 1px at 18% 16%, rgba(255,255,255,.7), transparent), radial-gradient(1px 1px at 74% 12%, rgba(255,255,255,.55), transparent), radial-gradient(1px 1px at 38% 24%, rgba(255,255,255,.5), transparent), radial-gradient(1px 1px at 88% 28%, rgba(255,255,255,.6), transparent), radial-gradient(1px 1px at 60% 8%, rgba(255,255,255,.5), transparent), radial-gradient(1.4px 1.4px at 8% 30%, rgba(255,255,255,.5), transparent), linear-gradient(180deg, #120a2e 0%, #1d1140 38%, #2c1a52 58%, #3a2168 70%, #241548 84%, #100a26 100%); animation: none; } /* PERSPECTIVE floor grid — muted magenta lines receding to the horizon (viewport-fixed so it ignores .mesh's -20% inset). */ [data-board-theme="vaporwave"] .mesh::before { content: ""; position: fixed; left: -30%; right: -30%; bottom: 0; height: 42vh; background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--opt-grid, #e260a0) 78%, transparent) 0 1.5px, transparent 1.5px 7%), repeating-linear-gradient(90deg, color-mix(in srgb, var(--opt-grid, #e260a0) 60%, transparent) 0 1.5px, transparent 1.5px 4.5%); transform: perspective(260px) rotateX(76deg); transform-origin: bottom center; mask-image: linear-gradient(180deg, transparent, #000 36%); -webkit-mask-image: linear-gradient(180deg, transparent, #000 36%); filter: drop-shadow(0 0 5px rgba(226, 96, 160, .45)); opacity: .85; pointer-events: none; } /* HORIZON: layered MOUNTAIN silhouettes (grounded at the grid's far edge — no floating) with a glowing pink line at their base where the floor meets the sky. */ [data-board-theme="vaporwave"] .mesh::after { content: ""; position: fixed; left: 0; right: 0; bottom: 42vh; height: 18vh; background: linear-gradient(90deg, transparent 0, rgba(255, 77, 126, .95) 14%, #ffd9e6 50%, rgba(255, 77, 126, .95) 86%, transparent 100%) bottom / 100% 2.5px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='180' preserveAspectRatio='none'%3E%3Cpath d='M0,180 L0,118 L180,58 L340,108 L520,40 L700,100 L880,52 L1060,108 L1240,58 L1440,98 L1440,180 Z' fill='%232c1a52'/%3E%3Cpath d='M0,180 L0,150 L150,108 L300,150 L470,92 L630,146 L790,104 L950,150 L1110,98 L1270,146 L1440,112 L1440,180 Z' fill='%23160d30'/%3E%3C/svg%3E") bottom center / 100% 100% no-repeat; filter: drop-shadow(0 1px 12px rgba(255, 77, 126, .55)); pointer-events: none; } @media (prefers-reduced-motion: no-preference) { [data-board-theme="vaporwave"] .mesh::before { animation: vw-grid 6s linear infinite; } @keyframes vw-grid { from { background-position: 0 0, 0 0; } to { background-position: 0 7%, 0 0; } } } /* "Sunset scene" option OFF → drop the grid + mountains + sun, leave a clean purple night. */ [data-board-theme="vaporwave"][data-opt-scene="off"] .mesh::before, [data-board-theme="vaporwave"][data-opt-scene="off"] .mesh::after { display: none; } [data-board-theme="vaporwave"][data-opt-scene="off"] .mesh { background: linear-gradient(180deg, #120a2e 0%, #1d1140 42%, #100a26 100%); } [data-board-theme="vaporwave"] .grain { background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 3px); mix-blend-mode: screen; } /* near-TRANSPARENT cards so the sunset shows through; double neon edge + big glow */ [data-board-theme="vaporwave"] .card { border-radius: 16px; border: 1px solid var(--bg-card-edge); background: linear-gradient(180deg, rgba(20, 6, 44, .34), rgba(6, 2, 18, .46)); backdrop-filter: blur(3px); box-shadow: inset 0 0 0 1px rgba(53, 244, 255, .35), 0 0 30px -4px rgba(255, 63, 180, .5), 0 0 60px -10px rgba(53, 244, 255, .3); } [data-board-theme="vaporwave"] .card::before { background: radial-gradient(130% 80% at 50% -10%, rgba(255, 63, 180, .28), transparent 60%); opacity: 1; } [data-board-theme="vaporwave"] .card::after { left: 0; right: 0; height: 2px; opacity: 1; background: linear-gradient(to right, transparent, #35f4ff, #ff3fb4, transparent); } /* CITY → italic wide neon */ [data-board-theme="vaporwave"] .c-place h2 { font-family: 'Orbitron', sans-serif; font-weight: 700; font-style: italic; letter-spacing: .04em; color: #ff7ad1; text-shadow: 0 0 12px rgba(255, 63, 180, .8), 0 0 2px rgba(255, 255, 255, .6); } [data-board-theme="vaporwave"] .c-state { color: #35f4ff; letter-spacing: .2em; } [data-board-theme="vaporwave"] .c-head { border-bottom: 1px solid rgba(53, 244, 255, .35); padding-bottom: .45rem; } [data-board-theme="vaporwave"] .c-time { font-family: 'Orbitron', sans-serif; color: #fff3ff; } /* TEMP → huge CHROME 3D type (sunset gradient fill + bevel drop + neon glow) */ [data-board-theme="vaporwave"] .c-temp { font-family: 'Orbitron', sans-serif; font-weight: 900; letter-spacing: -.01em; background: linear-gradient(180deg, #ffffff 0%, #ffe6a0 16%, #ff8fc8 46%, #c774e8 64%, #35f4ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 2px 0 #2a0a3a) drop-shadow(0 4px 1px rgba(0, 0, 0, .5)) drop-shadow(0 0 18px rgba(255, 63, 180, .6)); } [data-board-theme="vaporwave"] .c-temp sup { -webkit-text-fill-color: #35f4ff; color: #35f4ff; } [data-board-theme="vaporwave"] .c-cond { color: #fff3ff; text-transform: uppercase; letter-spacing: .14em; text-shadow: 0 0 10px rgba(53, 244, 255, .6); } [data-board-theme="vaporwave"] .c-feels { color: var(--ink-dim); } /* weather glyph → neon-glow it so it belongs to the scene (ASCII swap is terminal-only) */ [data-board-theme="vaporwave"] .wicon { filter: drop-shadow(0 0 10px rgba(53, 244, 255, .7)) drop-shadow(0 0 18px rgba(255, 63, 180, .5)); } [data-board-theme="vaporwave"] .c-stats::before { content: "CONDITIONS"; grid-column: 1 / -1; font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: .56rem; letter-spacing: .3em; color: #35f4ff; background: none; padding: .22rem 0 .2rem; margin-bottom: .15rem; border-bottom: 1px solid rgba(255, 63, 180, .5); text-shadow: 0 0 8px rgba(53, 244, 255, .7); } [data-board-theme="vaporwave"] .stat-k { color: var(--ink-dim); text-transform: uppercase; letter-spacing: .12em; } [data-board-theme="vaporwave"] .stat-v { color: #fff3ff; } [data-board-theme="vaporwave"] .c-src { color: var(--ink-faint); letter-spacing: .08em; } [data-board-theme="vaporwave"] .c-radar { border-radius: 12px; border: 1px solid rgba(53, 244, 255, .55); box-shadow: 0 0 22px -6px rgba(53, 244, 255, .6); } [data-board-theme="vaporwave"] .radar-bar { background: linear-gradient(90deg, #ff3fb4, #b76cff, #35f4ff); } [data-board-theme="vaporwave"] .radar-label { color: #0a0220; font-family: 'Orbitron', sans-serif; font-weight: 700; letter-spacing: .14em; } [data-board-theme="vaporwave"] .radar-time { color: #0a0220; font-weight: 700; } [data-board-theme="vaporwave"] .fc-day:first-child { background: color-mix(in srgb, #ff3fb4 18%, transparent); } /* overlays: translucent neon panel (no scenery — overlays have no .mesh) */ [data-board-theme="vaporwave"] .wx, [data-board-theme="vaporwave"] .fc-bar, [data-board-theme="vaporwave"] .cmb-anchor.is-panel, [data-board-theme="vaporwave"] .cmb-anchor.is-forecast { --card-rgb: 14 5 32; --card-rgb-2: 26 6 51; --line: rgba(53, 244, 255, .35); --panel: rgb(var(--card-rgb) / var(--card-alpha)); --panel-2: rgb(var(--card-rgb-2) / var(--card-alpha)); } [data-board-theme="vaporwave"] .wx { border-radius: 16px; border: 1px solid rgba(255, 63, 180, .5); box-shadow: inset 0 0 0 1px rgba(53, 244, 255, .3), 0 0 30px -6px rgba(255, 63, 180, .55); } [data-board-theme="vaporwave"] .fc-bar { border-radius: 16px; border: 1px solid rgba(53, 244, 255, .5); } [data-board-theme="vaporwave"] .wx-radar { border-radius: 12px; border-color: rgba(53, 244, 255, .55); } /* CITY → italic neon; TEMP → chrome 3D; Orbitron throughout (mirrors the board) */ [data-board-theme="vaporwave"] .wx-name { font-family: 'Orbitron', sans-serif; font-weight: 700; font-style: italic; letter-spacing: .04em; color: #ff7ad1; text-shadow: 0 0 12px rgba(255, 63, 180, .8), 0 0 2px rgba(255, 255, 255, .6); } [data-board-theme="vaporwave"] .wx-region { color: #35f4ff; letter-spacing: .2em; } [data-board-theme="vaporwave"] .wx-clock { font-family: 'Orbitron', sans-serif; color: #fff3ff; } [data-board-theme="vaporwave"] .wx-temp { font-family: 'Orbitron', sans-serif; font-weight: 900; background: linear-gradient(180deg, #ffffff 0%, #ffe6a0 16%, #ff8fc8 46%, #c774e8 64%, #35f4ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 2px 0 #2a0a3a) drop-shadow(0 0 18px rgba(255, 63, 180, .6)); } [data-board-theme="vaporwave"] .wx-temp sup { -webkit-text-fill-color: #35f4ff; color: #35f4ff; } [data-board-theme="vaporwave"] .wx-cond { color: #fff3ff; text-transform: uppercase; letter-spacing: .14em; text-shadow: 0 0 10px rgba(53, 244, 255, .6); } [data-board-theme="vaporwave"] .wx-feels { color: var(--ink-dim); } [data-board-theme="vaporwave"] .wx-ico { filter: drop-shadow(0 0 10px rgba(53, 244, 255, .7)) drop-shadow(0 0 18px rgba(255, 63, 180, .5)); } [data-board-theme="vaporwave"] .wx-stat .k { color: var(--ink-dim); text-transform: uppercase; letter-spacing: .12em; } [data-board-theme="vaporwave"] .wx-stat .v { color: #fff3ff; } [data-board-theme="vaporwave"] .wx-radar-tag { background: linear-gradient(90deg, #ff3fb4, #b76cff, #35f4ff); color: #0a0220; font-family: 'Orbitron', sans-serif; font-weight: 700; letter-spacing: .12em; } [data-board-theme="vaporwave"] .wx-radar-time { color: rgba(255, 243, 255, .92); } [data-board-theme="vaporwave"] .fc-dow { font-family: 'Orbitron', sans-serif; font-style: italic; color: #ff7ad1; } [data-board-theme="vaporwave"] .fc-temp-hi { color: #fff3ff; } /* alerts intentionally break the synth palette — keep severity LOUD */ [data-board-theme="vaporwave"] .board-alert, [data-board-theme="vaporwave"] .cmb-tk { background: var(--sev); box-shadow: none; } [data-board-theme="vaporwave"] .al { background: linear-gradient(180deg, rgba(26, 6, 51, .94), rgba(8, 3, 20, .96)); --ink: #fff3ff; --ink-dim: #d9bdf2; border-radius: 16px; } [data-board-theme="vaporwave"] .al-event { font-family: 'Orbitron', sans-serif; font-style: italic; } [data-board-theme="vaporwave"] .c-alert { border-radius: 10px; } /* ============================================================ AIRPORT BOARD — a literal SOLARI SPLIT-FLAP departures board, not a charcoal card. Every reading (destination/city, clock, temp, each condition) sits in split-flap TILES: a dark cell strip with a horizontal flap seam through the middle and vertical per-character cell rulings, amber on black, in the B612 Mono aeronautical font. Stats are full-width board ROWS with leader rules, not a stat grid. No weather icon (boards don't draw clouds). radarScheme 6 (NEXRAD level III). ============================================================ */ [data-board-theme="airport-board"] { color-scheme: dark; --bg: #050608; --ink: #f4f1e6; --ink-dim: #8b9298; --ink-faint: #5c6268; --bg-card: #0a0b0e; --bg-card-edge: #20242a; /* split-flap tokens (re-keyed by the Mono light mode below): --amber = flap character ink; --board-accent = the amber bars (header/radar/maker); --bar-ink = text ON those bars; --flap/--flap-2/--seam = the tile faces + flap seam. */ --amber: var(--opt-accent, #ffb000); --board-accent: var(--opt-accent, #ffb000); --bar-ink: #050608; --flap: #111317; --flap-2: #1b1e24; --seam: #000; --flap-border: #000; --stat-line: rgba(255, 255, 255, .07); --north: #ffb000; --south: #ff7a1a; --live: #3ddc84; --stale: #ffb000; --shadow: 0 16px 44px -24px rgba(0, 0, 0, .95); --grain-opacity: .05; --font-display: 'B612 Mono', ui-monospace, monospace; --font-mono: 'B612 Mono', ui-monospace, monospace; } /* board hall: near-black with a faint top light wash */ [data-board-theme="airport-board"] .mesh { background: radial-gradient(120% 70% at 50% -10%, #121519 0%, #08090c 55%, #040506 100%); animation: none; } [data-board-theme="airport-board"] .grain { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .25) 0 1px, transparent 1px 4px); mix-blend-mode: multiply; } /* the split-flap TILE look, reused by every value (defined once, applied below) */ [data-board-theme="airport-board"] .c-temp, [data-board-theme="airport-board"] .stat-v, [data-board-theme="airport-board"] .c-time, [data-board-theme="airport-board"] .c-place h2 { font-family: 'B612 Mono', ui-monospace, monospace; color: var(--amber); font-variant-numeric: tabular-nums; background-color: var(--flap); background-image: repeating-linear-gradient(90deg, transparent 0 calc(1ch - 1px), rgba(0, 0, 0, .55) calc(1ch - 1px) 1ch), linear-gradient(180deg, var(--flap-2) 0 calc(50% - 1px), var(--seam) calc(50% - 1px) calc(50% + 1px), var(--flap) calc(50% + 1px) 100%); border: 1px solid var(--flap-border); border-radius: 2px; padding: .04em .28em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 1px 2px rgba(0, 0, 0, .6); } /* card → a framed board section: black, square, thin metal edge, a top maker strip */ [data-board-theme="airport-board"] .card { border-radius: 4px; border: 1px solid var(--bg-card-edge); background: linear-gradient(180deg, #0c0e11, #07080a); backdrop-filter: none; box-shadow: var(--shadow), inset 0 0 0 1px rgba(255, 255, 255, .015); } [data-board-theme="airport-board"] .card::before { background: none; opacity: 1; height: 3px; background-image: repeating-linear-gradient(90deg, var(--board-accent) 0 14px, transparent 14px 22px); } [data-board-theme="airport-board"] .card::after { display: none; } /* HEADER → board title row: destination (city) in big flaps + a flap clock */ [data-board-theme="airport-board"] .c-head { border-bottom: 1px solid var(--bg-card-edge); padding-bottom: .5rem; align-items: center; } [data-board-theme="airport-board"] .c-place h2 { display: inline-block; max-width: 100%; overflow: hidden; text-transform: uppercase; letter-spacing: .02em; font-weight: 700; } [data-board-theme="airport-board"] .c-state { color: var(--ink-dim); letter-spacing: .26em; font-size: .8rem; } [data-board-theme="airport-board"] .c-time { display: inline-block; font-size: 1rem; } [data-board-theme="airport-board"] .c-date { color: var(--ink-dim); letter-spacing: .12em; } /* HERO → big temp flaps; condition becomes a board STATUS; no weather icon */ [data-board-theme="airport-board"] .c-hero { align-items: center; } [data-board-theme="airport-board"] .c-hero .wicon { display: none; } [data-board-theme="airport-board"] .c-temp { display: inline-block; font-weight: 700; line-height: 1.1; } [data-board-theme="airport-board"] .c-temp sup { color: var(--amber); } [data-board-theme="airport-board"] .c-cond { display: inline-block; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; color: var(--live); border: 1px solid color-mix(in srgb, var(--live) 50%, transparent); padding: .1rem .5rem; border-radius: 2px; margin-top: .3rem; } [data-board-theme="airport-board"] .c-feels { color: var(--ink-dim); letter-spacing: .04em; } /* STATS → full-width departure ROWS with a dotted leader; value in a flap tile */ [data-board-theme="airport-board"] .c-stats { display: block; } [data-board-theme="airport-board"] .c-stats::before { content: "● CONDITIONS — ON TIME"; display: block; font-family: 'B612 Mono', ui-monospace, monospace; font-weight: 700; font-size: .58rem; letter-spacing: .26em; color: var(--bar-ink); background: var(--board-accent); padding: .24rem .55rem; margin-bottom: .25rem; border-radius: 2px; } [data-board-theme="airport-board"] .stat { display: flex; align-items: center; gap: .5rem; padding: .12rem 0; border: none; text-align: left; border-bottom: 1px dotted var(--stat-line); } [data-board-theme="airport-board"] .stat-k { font-family: 'B612 Mono', ui-monospace, monospace; text-transform: uppercase; letter-spacing: .12em; font-size: .62rem; color: var(--ink-dim); flex: 0 0 auto; } [data-board-theme="airport-board"] .stat-v { margin-left: auto; font-size: .82rem; font-weight: 700; } [data-board-theme="airport-board"] .stat-v small { color: color-mix(in srgb, var(--amber) 75%, #000); } [data-board-theme="airport-board"] .c-sun { color: var(--ink-dim); letter-spacing: .06em; } [data-board-theme="airport-board"] .c-src { font-family: 'B612 Mono', ui-monospace, monospace; color: var(--ink-faint); letter-spacing: .08em; } /* RADAR → board panel with an amber strip */ [data-board-theme="airport-board"] .c-radar { border: 1px solid var(--bg-card-edge); border-radius: 3px; } [data-board-theme="airport-board"] .radar-bar { background: var(--board-accent); } [data-board-theme="airport-board"] .radar-label { color: var(--bar-ink); font-family: 'B612 Mono', ui-monospace, monospace; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; } [data-board-theme="airport-board"] .radar-time { color: var(--bar-ink); font-weight: 700; opacity: .85; } /* FORECAST → departure rows; amber flap highs, no per-day icon */ [data-board-theme="airport-board"] .card.is-full .c-forecast { border-top: 1px solid var(--bg-card-edge); } [data-board-theme="airport-board"] .fc-ico { display: none; } [data-board-theme="airport-board"] .fc-day { font-family: 'B612 Mono', ui-monospace, monospace; border-left: 1px solid var(--stat-line); } [data-board-theme="airport-board"] .fc-day:first-child { border-left: 2px solid var(--amber); } [data-board-theme="airport-board"] .fc-temps b { color: var(--amber); } /* OVERLAYS → black board panels */ [data-board-theme="airport-board"] .wx, [data-board-theme="airport-board"] .fc-bar, [data-board-theme="airport-board"] .cmb-anchor.is-panel, [data-board-theme="airport-board"] .cmb-anchor.is-forecast { --card-rgb: 10 11 14; --card-rgb-2: 16 18 22; --line: rgba(255, 176, 0, .22); --panel: rgb(var(--card-rgb) / var(--card-alpha)); --panel-2: rgb(var(--card-rgb-2) / var(--card-alpha)); } [data-board-theme="airport-board"] .wx { border-radius: 4px; border: 1px solid var(--bg-card-edge); } [data-board-theme="airport-board"] .fc-bar { border-radius: 4px; border-top: 2px solid var(--amber); } [data-board-theme="airport-board"] .wx-radar { border-radius: 3px; border-color: var(--bg-card-edge); } /* SPLIT-FLAP TILES on the overlay readings (city/clock/temp/stat values) */ [data-board-theme="airport-board"] .wx-name, [data-board-theme="airport-board"] .wx-temp, [data-board-theme="airport-board"] .wx-clock, [data-board-theme="airport-board"] .wx-stat .v { font-family: 'B612 Mono', ui-monospace, monospace; color: var(--amber); font-variant-numeric: tabular-nums; background-color: var(--flap); background-image: repeating-linear-gradient(90deg, transparent 0 calc(1ch - 1px), rgba(0, 0, 0, .55) calc(1ch - 1px) 1ch), linear-gradient(180deg, var(--flap-2) 0 calc(50% - 1px), var(--seam) calc(50% - 1px) calc(50% + 1px), var(--flap) calc(50% + 1px) 100%); border: 1px solid var(--flap-border); border-radius: 2px; padding: .04em .28em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 1px 2px rgba(0, 0, 0, .6); } [data-board-theme="airport-board"] .wx-name { display: inline-block; text-transform: uppercase; font-weight: 700; letter-spacing: .02em; } [data-board-theme="airport-board"] .wx-temp { display: inline-block; font-weight: 700; } [data-board-theme="airport-board"] .wx-temp sup { color: var(--amber); } [data-board-theme="airport-board"] .wx-clock { display: inline-block; font-size: .9em; } [data-board-theme="airport-board"] .wx-region { color: var(--ink-dim); letter-spacing: .24em; } [data-board-theme="airport-board"] .wx-ico { display: none; } [data-board-theme="airport-board"] .wx-cond { display: inline-block; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; color: var(--live); border: 1px solid color-mix(in srgb, var(--live) 50%, transparent); padding: .08rem .5rem; border-radius: 2px; } [data-board-theme="airport-board"] .wx-stat { display: flex; align-items: center; gap: .5rem; background: none; border: none; border-bottom: 1px dotted var(--stat-line); } [data-board-theme="airport-board"] .wx-stat .k { font-family: 'B612 Mono', ui-monospace, monospace; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-dim); } [data-board-theme="airport-board"] .wx-stat .v { margin-left: auto; font-weight: 700; } [data-board-theme="airport-board"] .wx-radar-tag { background: var(--amber); color: var(--bar-ink); font-family: 'B612 Mono', ui-monospace, monospace; font-weight: 700; letter-spacing: .14em; } [data-board-theme="airport-board"] .wx-radar-time { color: var(--ink-dim); } [data-board-theme="airport-board"] .wx-foot { font-family: 'B612 Mono', ui-monospace, monospace; color: var(--ink-faint); } [data-board-theme="airport-board"] .fc-col .wicon { display: none; } [data-board-theme="airport-board"] .fc-dow { font-family: 'B612 Mono', ui-monospace, monospace; color: var(--amber); } [data-board-theme="airport-board"] .fc-temp-hi { color: var(--amber); font-family: 'B612 Mono', ui-monospace, monospace; } /* alerts: solid severity status row, square */ [data-board-theme="airport-board"] .board-alert, [data-board-theme="airport-board"] .cmb-tk { background: var(--sev); box-shadow: none; animation: none; } [data-board-theme="airport-board"] .al { background: linear-gradient(180deg, #14171c, #0a0b0e); --ink: #f4f1e6; --ink-dim: #8b9298; border-radius: 2px; } [data-board-theme="airport-board"] .al-event, [data-board-theme="airport-board"] .al-badge, [data-board-theme="airport-board"] .al-instruction { font-family: 'B612 Mono', ui-monospace, monospace; } [data-board-theme="airport-board"] .c-alert { border-radius: 2px; box-shadow: none; } /* ---- MONO (data-theme="light") — the OLD ANALOG black-and-white Solari board: cream/ivory flap tiles with BLACK characters, a grey flap seam, in a pale terminal hall. Just re-keys the split-flap tokens + neutralizes style.css's Vivid light washes ([0,2,x] beats [0,1,x]). Dark mode stays amber-on-black. ---- */ [data-board-theme="airport-board"][data-theme="light"] { --amber: #1a1c1f; /* flap character ink → near-black */ --board-accent: #16181c; /* header/radar/maker bars → black */ --bar-ink: #f4f2ea; /* text on those black bars → ivory */ --flap: #e9e7df; --flap-2: #f6f4ec; --seam: #b7b3a8; --flap-border: #3a382f; --bg: #cdd0d2; --ink: #1a1c1f; --ink-dim: #565b60; --ink-faint: #888d92; --bg-card: #e6e5dd; --bg-card-edge: #b4b1a6; --stat-line: rgba(0, 0, 0, .14); --live: #2f7d44; } [data-board-theme="airport-board"][data-theme="light"] .mesh { background: radial-gradient(120% 70% at 50% -10%, #e2e4e6 0%, #cdd0d2 55%, #bfc2c4 100%); } [data-board-theme="airport-board"][data-theme="light"] .grain { mix-blend-mode: multiply; } [data-board-theme="airport-board"][data-theme="light"] .card { background: linear-gradient(180deg, #ecebe4, #e1e0d8); } [data-board-theme="airport-board"][data-theme="light"] .c-cond { color: #16181c; border-color: rgba(0, 0, 0, .45); } [data-board-theme="airport-board"][data-theme="light"] .stat-v small { color: rgba(0, 0, 0, .55); } [data-board-theme="airport-board"][data-theme="light"] .fc-day:first-child { background: none; } /* ============================================================ GAME DAY — a sports-broadcast GRAPHICS PACKAGE, not a graphite card. Angled parallelogram chyrons (clip-path, upright text), a giant condensed-italic temp like a score, a red lower-third "stat ticker", and bold Saira Condensed type. Pregame-on-a-regional-sports-network energy — not trademark-specific. Still honors per-location/team accent colors. Dark-only. ============================================================ */ [data-board-theme="game-day"] { color-scheme: dark; --gd-red: var(--opt-accent, #e51b23); --gd-yellow: var(--opt-secondary, #ffd23f); --bg: #08090b; --ink: #ffffff; --ink-dim: #aeb6c2; --ink-faint: #6c7480; --bg-card: #15171b; --bg-card-edge: #2c3038; --stat-line: rgba(255, 255, 255, .08); --north: #2f80ed; --south: #ffd23f; --live: #2fbf57; --stale: #ffd23f; --shadow: 0 16px 44px -22px rgba(0, 0, 0, .92), inset 0 1px 0 rgba(255, 255, 255, .04); --grain-opacity: .05; --font-display: 'Saira Condensed', system-ui, sans-serif; } /* broadcast field: graphite with a faint diagonal red/blue light wash */ [data-board-theme="game-day"] .mesh { background: linear-gradient(115deg, rgba(229, 27, 35, .14) 0 18%, transparent 38%), linear-gradient(245deg, rgba(47, 128, 237, .12) 0 16%, transparent 36%), linear-gradient(180deg, #0c0e12 0%, #08090b 60%, #050608 100%); animation: none; } /* card → broadcast graphic: graphite, a bold red top edge + an angled red corner flash */ [data-board-theme="game-day"] .card { border-radius: 4px; border: 1px solid var(--bg-card-edge); background: linear-gradient(180deg, #181b20, #121419); backdrop-filter: none; box-shadow: var(--shadow); overflow: hidden; } [data-board-theme="game-day"] .card::before { background: none; opacity: 1; height: 4px; background-image: linear-gradient(to right, var(--gd-red) 46%, var(--gd-yellow) 46% 52%, transparent 52%); } /* angled red corner flash, top-right */ [data-board-theme="game-day"] .card::after { inset: 0 0 auto auto; left: auto; top: 4px; right: 0; width: 66px; height: 26px; opacity: 1; background: var(--gd-red); clip-path: polygon(28px 0, 100% 0, 100% 100%, 0 100%); } /* HEADER → a scorebug: city in a red parallelogram chyron + clock in a dark chyron */ [data-board-theme="game-day"] .c-head { border: none; align-items: stretch; gap: .35rem; padding-bottom: .45rem; } [data-board-theme="game-day"] .c-place { background: var(--gd-red); clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); padding: .18rem 1.3rem .2rem .55rem; display: flex; flex-direction: column; justify-content: center; } [data-board-theme="game-day"] .c-place h2 { color: #fff; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .01em; line-height: 1; } [data-board-theme="game-day"] .c-state { color: rgba(255, 255, 255, .9); font-weight: 700; letter-spacing: .14em; } [data-board-theme="game-day"] .c-clock { background: #0a0c10; clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%); padding: .18rem .55rem .2rem 1rem; text-align: right; align-self: center; } [data-board-theme="game-day"] .c-time { font-family: 'Saira Condensed', sans-serif; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; } [data-board-theme="game-day"] .c-date { color: var(--gd-yellow); font-weight: 700; letter-spacing: .08em; } /* TEMP → a giant condensed-italic "score" */ [data-board-theme="game-day"] .c-temp { font-family: 'Saira Condensed', sans-serif; font-weight: 900; font-style: italic; line-height: .9; letter-spacing: -.02em; text-shadow: 0 3px 0 rgba(0, 0, 0, .45); } [data-board-theme="game-day"] .c-temp sup { font-style: normal; color: var(--gd-red); } [data-board-theme="game-day"] .c-cond { display: inline-block; font-family: 'Saira Condensed', sans-serif; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: var(--gd-red); clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%); padding: .04rem .8rem .06rem .45rem; margin-top: .25rem; } [data-board-theme="game-day"] .c-feels { color: var(--ink-dim); font-weight: 600; } /* keep the weather glyph but give it broadcast punch (drop shadow) */ [data-board-theme="game-day"] .wicon { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .55)); } /* SECTION LABEL → red lower-third stat ticker (angled, white bold italic) */ [data-board-theme="game-day"] .c-stats::before { content: "GAME CONDITIONS"; grid-column: 1 / -1; font-family: 'Saira Condensed', sans-serif; font-weight: 800; font-style: italic; font-size: .72rem; letter-spacing: .08em; color: #fff; background: var(--gd-red); clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); padding: .16rem 1rem .18rem .55rem; margin-bottom: .25rem; } [data-board-theme="game-day"] .stat-k { color: var(--ink-dim); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-family: 'Saira Condensed', sans-serif; } [data-board-theme="game-day"] .stat-v { font-family: 'Saira Condensed', sans-serif; font-weight: 800; font-variant-numeric: tabular-nums; } [data-board-theme="game-day"] .stat { border-bottom: 2px solid var(--stat-line); } [data-board-theme="game-day"] .c-feels { color: var(--ink-dim); } [data-board-theme="game-day"] .c-src { color: var(--ink-faint); font-weight: 600; } /* radar: graphite frame + angled red label chyron */ [data-board-theme="game-day"] .c-radar { border: 1px solid var(--bg-card-edge); border-radius: 4px; } [data-board-theme="game-day"] .radar-bar { background: var(--gd-red); } [data-board-theme="game-day"] .radar-label { color: #fff; font-family: 'Saira Condensed', sans-serif; font-weight: 800; font-style: italic; letter-spacing: .08em; text-transform: uppercase; } [data-board-theme="game-day"] .radar-time { color: rgba(255, 255, 255, .92); font-weight: 700; } /* forecast: stat-strip with a strong red top rule + bold condensed days */ [data-board-theme="game-day"] .card.is-full .c-forecast { border-top: 3px solid var(--gd-red); } [data-board-theme="game-day"] .fc-dow { font-family: 'Saira Condensed', sans-serif; font-weight: 800; font-style: italic; text-transform: uppercase; } [data-board-theme="game-day"] .fc-temps b { font-family: 'Saira Condensed', sans-serif; font-weight: 900; } [data-board-theme="game-day"] .fc-day { font-variant-numeric: tabular-nums; } [data-board-theme="game-day"] .fc-day:first-child { border-top: 3px solid var(--gd-red); } /* overlays: graphite panels with red rules */ [data-board-theme="game-day"] .wx, [data-board-theme="game-day"] .fc-bar, [data-board-theme="game-day"] .cmb-anchor.is-panel, [data-board-theme="game-day"] .cmb-anchor.is-forecast { --card-rgb: 21 23 27; --card-rgb-2: 28 31 36; --line: rgba(255, 255, 255, .12); --panel: rgb(var(--card-rgb) / var(--card-alpha)); --panel-2: rgb(var(--card-rgb-2) / var(--card-alpha)); } [data-board-theme="game-day"] .wx { border-radius: 4px; border: 1px solid var(--bg-card-edge); border-top: 4px solid var(--gd-red); overflow: hidden; } [data-board-theme="game-day"] .fc-bar { border-radius: 4px; border-top: 3px solid var(--gd-red); } [data-board-theme="game-day"] .wx-radar { border-radius: 4px; border-color: var(--bg-card-edge); } /* SCOREBUG: city in a red parallelogram chyron; condensed-italic score temp */ [data-board-theme="game-day"] .wx-place { background: var(--gd-red); clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); padding: .12rem 1.3rem .16rem .55rem; } [data-board-theme="game-day"] .wx-name { color: #fff; font-family: 'Saira Condensed', sans-serif; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .01em; } [data-board-theme="game-day"] .wx-region { color: rgba(255, 255, 255, .9); font-weight: 700; letter-spacing: .14em; } [data-board-theme="game-day"] .wx-clock { font-family: 'Saira Condensed', sans-serif; font-weight: 700; color: #fff; } [data-board-theme="game-day"] .wx-temp { font-family: 'Saira Condensed', sans-serif; font-weight: 900; font-style: italic; line-height: .9; letter-spacing: -.02em; text-shadow: 0 3px 0 rgba(0, 0, 0, .45); } [data-board-theme="game-day"] .wx-temp sup { font-style: normal; color: var(--gd-red); } [data-board-theme="game-day"] .wx-cond { display: inline-block; font-family: 'Saira Condensed', sans-serif; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: var(--gd-red); clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%); padding: .02rem .8rem .04rem .45rem; } [data-board-theme="game-day"] .wx-feels { color: var(--ink-dim); font-weight: 600; } [data-board-theme="game-day"] .wx-ico { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .55)); } [data-board-theme="game-day"] .wx-stat .k { font-family: 'Saira Condensed', sans-serif; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; } [data-board-theme="game-day"] .wx-stat .v { font-family: 'Saira Condensed', sans-serif; font-weight: 800; } [data-board-theme="game-day"] .wx-radar-tag { background: var(--gd-red); color: #fff; font-family: 'Saira Condensed', sans-serif; font-weight: 800; font-style: italic; letter-spacing: .08em; } [data-board-theme="game-day"] .wx-radar-time { color: rgba(255, 255, 255, .92); font-weight: 700; } [data-board-theme="game-day"] .wx-foot { color: var(--ink-faint); font-weight: 600; } [data-board-theme="game-day"] .fc-temp-hi { font-family: 'Saira Condensed', sans-serif; font-weight: 900; } /* ALERT TICKER → broadcast bottom-line (matches the scorebug, not a flat severity bar): graphite bar + a severity-colored angled CHYRON cap + white condensed scrolling text + a yellow EXPIRES accent. Severity still reads via the cap + top rule color. Applies to the board strip (.board-alert/.ba-*) and the combined ticker (.cmb-tk/.tk-*). */ [data-board-theme="game-day"] .board-alert, [data-board-theme="game-day"] .cmb-tk { background: linear-gradient(180deg, #1b1e24, #0f1115); border-top: 3px solid var(--sev); border-bottom: none; box-shadow: none; animation: none; backdrop-filter: none; --alert-strip-bg: #14171c; --alert-strip-ink: #ffffff; --alert-strip-ink-dim: rgba(255, 255, 255, .72); --alert-strip-accent: var(--gd-yellow); } /* severity chyron cap: angled red parallelogram, white condensed italic */ [data-board-theme="game-day"] .ba-cap, [data-board-theme="game-day"] .tk-cap { background: var(--sev); color: #fff; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); font-family: 'Saira Condensed', sans-serif; font-style: italic; font-weight: 800; letter-spacing: .1em; } [data-board-theme="game-day"] .tk-loc, [data-board-theme="game-day"] .ba-loc, [data-board-theme="game-day"] .tk-event, [data-board-theme="game-day"] .ba-event { font-style: italic; } [data-board-theme="game-day"] .tk-sep, [data-board-theme="game-day"] .ba-sep, [data-board-theme="game-day"] .tk-dot, [data-board-theme="game-day"] .ba-dot { color: var(--sev); } [data-board-theme="game-day"] .al { background: linear-gradient(180deg, #181b20, #121419); --ink: #ffffff; --ink-dim: #aeb6c2; border-radius: 4px; } [data-board-theme="game-day"] .al-event { font-family: 'Saira Condensed', sans-serif; font-style: italic; font-weight: 900; } /* badge label → red angled lower-third chyron, like the scorebug city/condition tags */ [data-board-theme="game-day"] .al-badge { font-family: 'Saira Condensed', sans-serif; font-weight: 800; font-style: italic; color: #fff; border-radius: 0; clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%); padding: .14rem .95rem .16rem .55rem; box-shadow: none; } [data-board-theme="game-day"] .al-rule { height: 4px; background: var(--accent); animation: none; } [data-board-theme="game-day"] .al-until { font-family: 'Saira Condensed', sans-serif; font-weight: 800; color: #fff; border: none; border-radius: 0; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); background: var(--accent); } [data-board-theme="game-day"] .c-alert { border-radius: 3px; border: 1px solid color-mix(in srgb, var(--sev) 70%, #fff); box-shadow: none; } /* ============================================================ NEWSPRINT — the local newspaper weather page. The glass silhouette is replaced by PRINT: warm newsprint paper, a halftone dot screen, flat paper "clippings" with a heavy black masthead rule, black serif (Playfair) headlines + numerals, ruled column subheads, and red breaking-news stamps for alerts. Light/paper only; radarScheme 0 (grayscale, like a printed weather map). ============================================================ */ [data-board-theme="newsprint"] { color-scheme: light; /* warm newsprint paper — not stark white (DESIGN.md surface ladder) */ --bg: #e7e1d3; --ink: #1b1a17; --ink-dim: #56524a; --ink-faint: #8a8479; --bg-card: #f6f1e4; --bg-card-edge: rgba(27,26,23,.26); --stat-line: rgba(27,26,23,.14); --shadow: 0 1px 0 rgba(27,26,23,.16), 0 14px 30px -20px rgba(27,26,23,.45); --north: var(--opt-accent,#b3261e); --north-deep: #f1d8d3; --south: #1f5f99; --south-deep: #d8e6f1; --live: #1f7a3d; --stale: #9a5b16; --mesh-a: rgba(27,26,23,.05); --mesh-b: rgba(27,26,23,.04); --mesh-c: rgba(27,26,23,.05); --grain-opacity: 1; /* serif masthead — the single biggest identity shift vs every other (sans/mono) theme */ --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; } [data-board-theme="newsprint"] .mesh { background: linear-gradient(180deg, #efe9db, #e7e1d3); animation: none; } /* the printed halftone dot screen (toggle via the `halftone` option) */ [data-board-theme="newsprint"] .grain { display: block; opacity: .5; mix-blend-mode: multiply; animation: none; background-image: radial-gradient(rgba(27,26,23,.5) 22%, transparent 24%); background-size: 5px 5px; } [data-board-theme="newsprint"][data-opt-halftone="off"] .grain { display: none; } /* flat paper clippings: hard hairline border + a heavy black masthead rule on top */ [data-board-theme="newsprint"] .card { background: var(--bg-card); border: 1px solid var(--bg-card-edge); border-top: 3px solid var(--ink); border-radius: 2px; backdrop-filter: none; box-shadow: var(--shadow); } [data-board-theme="newsprint"] .card::before { background: none; opacity: 0; } [data-board-theme="newsprint"] .card::after { opacity: 0; } /* headline rhythm: heavy serif city + numerals, a ruled head, a small-caps kicker */ [data-board-theme="newsprint"] .c-place h2 { font-weight: 900; letter-spacing: -.01em; } [data-board-theme="newsprint"] .c-state { color: var(--north); font-weight: 700; letter-spacing: .04em; } [data-board-theme="newsprint"] .c-head { border-bottom: 2px solid var(--ink); padding-bottom: .35rem; } [data-board-theme="newsprint"] .c-temp { font-weight: 900; } [data-board-theme="newsprint"] .c-cond { text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; font-weight: 700; color: var(--ink-dim); font-family: var(--font-ui, inherit); } /* column subhead — ruled top and bottom, like a print section header */ [data-board-theme="newsprint"] .c-stats::before { content: "CONDITIONS"; grid-column: 1 / -1; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: .6rem; letter-spacing: .2em; color: var(--ink); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: .2rem 0; margin: .1rem 0 .35rem; } [data-board-theme="newsprint"] .stat-k { text-transform: uppercase; letter-spacing: .08em; font-size: .62rem; font-weight: 700; color: var(--ink-dim); } [data-board-theme="newsprint"] .c-feels { color: var(--ink-faint); } [data-board-theme="newsprint"] .c-src { color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; } /* radar/map: a flat inked frame (radarScheme 0 keeps the precip grayscale) */ [data-board-theme="newsprint"] .c-radar { border-radius: 2px; border: 1px solid var(--ink); } [data-board-theme="newsprint"] .radar-bar { background: var(--ink); border-radius: 0; } [data-board-theme="newsprint"] .radar-label { color: #f6f1e4; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } [data-board-theme="newsprint"] .radar-time { color: rgba(246,241,228,.85); } /* forecast: the first day is the boxed "TODAY" lead column */ [data-board-theme="newsprint"] .fc-day { font-family: var(--font-display); } [data-board-theme="newsprint"] .fc-day:first-child { background: var(--north-deep); border: 1px solid var(--north); border-radius: 2px; } /* overlays: opaque paper panels, dark ink, inked frames */ [data-board-theme="newsprint"] .wx, [data-board-theme="newsprint"] .fc-bar, [data-board-theme="newsprint"] .cmb-anchor.is-panel, [data-board-theme="newsprint"] .cmb-anchor.is-forecast { --card-rgb: 246 241 228; --card-rgb-2: 237 230 217; --card-alpha: .96; --line: rgba(27,26,23,.18); --ink: #1b1a17; --ink-dim: #56524a; --panel: rgb(var(--card-rgb)/var(--card-alpha)); --panel-2: rgb(var(--card-rgb-2)/var(--card-alpha)); } [data-board-theme="newsprint"] .wx { border-radius: 2px; border: 1px solid var(--ink); border-top: 3px solid var(--ink); } [data-board-theme="newsprint"] .fc-bar { border-top: 2px solid var(--ink); } [data-board-theme="newsprint"] .wx-radar { border-radius: 2px; border-color: var(--ink); } [data-board-theme="newsprint"] .wx-stats { color: var(--ink-dim); } /* alerts: red breaking-news STAMP — shape only; severity colors are preserved */ [data-board-theme="newsprint"] .board-alert, [data-board-theme="newsprint"] .cmb-tk { background: var(--sev); box-shadow: none; border-radius: 0; } [data-board-theme="newsprint"] .al { background: linear-gradient(180deg, #f9f5ea, #f1ead9); --ink: #1b1a17; --ink-dim: #56524a; border: 1px solid var(--ink); border-top: 5px solid var(--sev); border-radius: 2px; box-shadow: 0 14px 32px -16px rgba(27,26,23,.5); backdrop-filter: none; } [data-board-theme="newsprint"] .al-rule { display: none; } /* the heavy top border is the rule */ [data-board-theme="newsprint"] .al-badge { border-radius: 2px; box-shadow: none; border: 2px solid var(--sev); text-transform: uppercase; letter-spacing: .08em; } [data-board-theme="newsprint"] .al-event { color: var(--ink); font-family: var(--font-display); font-weight: 900; } [data-board-theme="newsprint"] .al-instruction { color: var(--ink-dim); border-top-color: var(--bg-card-edge); } [data-board-theme="newsprint"] .c-alert { border-radius: 2px; box-shadow: none; border: 2px solid color-mix(in srgb, var(--sev) 75%, #000); } /* ============================================================ ARCADE — a coin-op cabinet, two ways. COIN-OP (data-theme="dark") is an early-80s CRT machine: a black cabinet field, 8-bit Press Start 2P pixel headers, a pixel color-rail across each card, CRT scanlines, saturated primary buttons, and hard square edges. NEON (data-theme="light") is a modern barcade — note this "light" mode is intentionally still a DARK glossy surface (the mode axis is just the alternate look, not a promise of brightness): rounded glossy panels, Audiowide marquee type, and an RGB-LED edge glow. The light block re-keys the tokens and NEUTRALIZES style.css's Vivid washes. radarScheme 7 (Rainbow) for both. ============================================================ */ [data-board-theme="arcade"] { color-scheme: dark; --arc-accent: var(--opt-accent, #00a8ff); /* Player 1 */ --arc-red: #ff2d55; --arc-yellow: #ffd23f; --arc-green: #39ff88; --arc-magenta: #ff3fb4; --arc-radius: 0px; --bg: #050509; --ink: #f8fbff; --ink-dim: #9aa6c8; --ink-faint: #5b6488; --bg-card: #101018; --bg-card-edge: var(--arc-accent); --stat-line: rgba(255, 255, 255, .10); --north: var(--arc-accent); --south: var(--arc-yellow); --live: var(--arc-green); --stale: var(--arc-yellow); --shadow: 0 0 0 2px #000, 0 18px 40px -22px #000; --grain-opacity: 1; --font-display: 'Press Start 2P', system-ui, sans-serif; } /* cabinet field: black with faint corner button-glows */ [data-board-theme="arcade"] .mesh { background: radial-gradient(circle at 18% 16%, rgba(0, 168, 255, .12), transparent 30%), radial-gradient(circle at 84% 82%, rgba(255, 45, 85, .12), transparent 32%), #050509; animation: none; } /* CRT scanlines (toggle via `scanlines`) */ [data-board-theme="arcade"] .grain { display: block; opacity: .5; mix-blend-mode: overlay; animation: none; background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, .5) 0 1px, transparent 1px 3px); } [data-board-theme="arcade"][data-opt-scanlines="off"] .grain { display: none; } /* card → hard pixel cabinet panel with a primary color-rail on top */ [data-board-theme="arcade"] .card { border-radius: var(--arc-radius); background: linear-gradient(180deg, #14141f, #0c0c14); border: 2px solid var(--arc-accent); backdrop-filter: none; box-shadow: 0 0 0 2px #000, inset 0 0 0 1px rgba(255, 255, 255, .06), 0 0 22px -6px var(--arc-accent); } [data-board-theme="arcade"] .card::before { background: none; opacity: 1; height: 6px; background-image: repeating-linear-gradient(90deg, var(--arc-accent) 0 12px, var(--arc-red) 12px 24px, var(--arc-yellow) 24px 36px, var(--arc-green) 36px 48px); } [data-board-theme="arcade"] .card::after { opacity: 0; } /* HEADER → pixel city + green clock (small sizes — Press Start 2P is very wide) */ [data-board-theme="arcade"] .c-place h2 { font-family: var(--font-display); font-size: .72em; line-height: 1.5; text-transform: uppercase; letter-spacing: 0; color: #fff; text-shadow: 2px 2px 0 var(--arc-accent); --name-fit: scroll; /* MARQUEE: Press Start 2P is fixed-width — scroll long names instead of clipping (app.js fitName) */ } [data-board-theme="arcade"] .c-state { font-family: var(--font-display); font-size: .5em; color: var(--arc-accent); letter-spacing: 0; } [data-board-theme="arcade"] .c-time { font-family: var(--font-display); font-size: .7em; color: var(--arc-green); } [data-board-theme="arcade"] .c-date { font-family: var(--font-display); font-size: .5em; color: var(--ink-dim); } /* TEMP → a pixel "score" */ [data-board-theme="arcade"] .c-temp { font-family: var(--font-display); font-size: .6em; line-height: 1.1; color: var(--arc-yellow); text-shadow: 3px 3px 0 #000; } [data-board-theme="arcade"] .c-temp sup { color: var(--arc-red); } [data-board-theme="arcade"] .c-cond { font-family: var(--font-display); font-size: .5em; text-transform: uppercase; color: var(--arc-green); } [data-board-theme="arcade"] .c-feels { color: var(--ink-dim); } [data-board-theme="arcade"] .wicon { filter: drop-shadow(0 0 6px rgba(0, 168, 255, .5)); } /* STATS → HI-SCORES board */ [data-board-theme="arcade"] .c-stats::before { content: "HI-SCORES"; grid-column: 1 / -1; font-family: var(--font-display); font-size: .5rem; letter-spacing: .04em; color: #050509; background: var(--arc-accent); padding: .3rem .5rem; margin-bottom: .3rem; } /* cap the 3-col readout at the card width: the base grid's `1fr` (= minmax(auto,1fr)) lets columns refuse to shrink below content, so a wide cell pushes the stats past the card's right edge (clipped). minmax(0,1fr) lets them shrink to fit every city. */ [data-board-theme="arcade"] .c-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* stat KEYS use the narrow mono (not the wide pixel font) so the 3-column readout fits the card at 4-up — Press Start 2P is ~1.8× wider per glyph and "CLOUD COVER"/"PRECIP ODDS" overflow three-up. The pixel font stays on the identity (name/temp/HI-SCORES). */ [data-board-theme="arcade"] .stat-k { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .6rem; font-weight: 600; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-board-theme="arcade"] .stat-v { min-width: 0; } [data-board-theme="arcade"] .stat-v { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 600; font-variant-numeric: tabular-nums; } [data-board-theme="arcade"] .stat { border-bottom: 2px solid var(--stat-line); } [data-board-theme="arcade"] .c-src { font-family: var(--font-display); font-size: .42rem; color: var(--ink-faint); } /* RADAR → cabinet screen with a primary header bar */ [data-board-theme="arcade"] .c-radar { border: 2px solid var(--arc-accent); border-radius: var(--arc-radius); } [data-board-theme="arcade"] .radar-bar { background: var(--arc-accent); } [data-board-theme="arcade"] .radar-label { font-family: var(--font-display); font-size: .5em; color: #050509; letter-spacing: 0; text-transform: uppercase; } [data-board-theme="arcade"] .radar-time { font-family: 'IBM Plex Mono', monospace; color: #050509; font-weight: 700; } /* FORECAST → high-score rows */ [data-board-theme="arcade"] .card.is-full .c-forecast { border-top: 2px solid var(--arc-accent); } [data-board-theme="arcade"] .fc-ico { filter: drop-shadow(0 0 4px rgba(0, 168, 255, .4)); } [data-board-theme="arcade"] .fc-dow { font-family: var(--font-display); font-size: .44rem; color: var(--arc-accent); } [data-board-theme="arcade"] .fc-temps b { font-family: 'IBM Plex Mono', monospace; font-weight: 700; } [data-board-theme="arcade"] .fc-day { font-variant-numeric: tabular-nums; } [data-board-theme="arcade"] .fc-day:first-child { background: color-mix(in srgb, var(--arc-accent) 22%, transparent); border-left: 3px solid var(--arc-accent); } /* OVERLAYS → cabinet panels */ [data-board-theme="arcade"] .wx, [data-board-theme="arcade"] .fc-bar, [data-board-theme="arcade"] .cmb-anchor.is-panel, [data-board-theme="arcade"] .cmb-anchor.is-forecast { --card-rgb: 16 16 24; --card-rgb-2: 12 12 20; --line: rgba(0, 168, 255, .3); --panel: rgb(var(--card-rgb) / var(--card-alpha)); --panel-2: rgb(var(--card-rgb-2) / var(--card-alpha)); } [data-board-theme="arcade"] .wx { border-radius: var(--arc-radius); border: 2px solid var(--arc-accent); } [data-board-theme="arcade"] .fc-bar { border-radius: var(--arc-radius); border-top: 3px solid var(--arc-accent); } [data-board-theme="arcade"] .wx-radar { border-radius: var(--arc-radius); border-color: var(--arc-accent); } [data-board-theme="arcade"] .wx-name { font-family: var(--font-display); font-size: .58em; text-transform: uppercase; color: #fff; text-shadow: 2px 2px 0 var(--arc-accent); } [data-board-theme="arcade"] .wx-temp { font-family: var(--font-display); font-size: .55em; color: var(--arc-yellow); } [data-board-theme="arcade"] .wx-temp sup { color: var(--arc-red); } [data-board-theme="arcade"] .wx-cond { font-family: var(--font-display); font-size: .48em; text-transform: uppercase; color: var(--arc-green); } [data-board-theme="arcade"] .wx-clock { font-family: 'IBM Plex Mono', monospace; color: var(--arc-green); } [data-board-theme="arcade"] .wx-stat .k { font-family: var(--font-display); font-size: .42rem; color: var(--ink-dim); text-transform: uppercase; } [data-board-theme="arcade"] .wx-stat .v { font-family: 'IBM Plex Mono', monospace; font-weight: 700; } [data-board-theme="arcade"] .wx-radar-tag { background: var(--arc-accent); color: #050509; font-family: var(--font-display); font-size: .42rem; } [data-board-theme="arcade"] .wx-foot { font-family: 'IBM Plex Mono', monospace; color: var(--ink-faint); } [data-board-theme="arcade"] .fc-temp-hi { font-family: 'IBM Plex Mono', monospace; font-weight: 700; } /* ALERTS → solid severity bar, hard square (strip ink routed via the shared list below) */ [data-board-theme="arcade"] .board-alert, [data-board-theme="arcade"] .cmb-tk { background: var(--sev); box-shadow: none; animation: none; border-radius: 0; } [data-board-theme="arcade"] .al { background: linear-gradient(180deg, #14141f, #0c0c14); --ink: #fff; --ink-dim: #9aa6c8; border-radius: 0; border: 2px solid var(--sev); } [data-board-theme="arcade"] .al-event { font-family: var(--font-display); font-size: .68em; } [data-board-theme="arcade"] .al-badge { font-family: var(--font-display); font-size: .5em; border-radius: 0; box-shadow: none; } [data-board-theme="arcade"] .al-rule { background: var(--sev); animation: none; } [data-board-theme="arcade"] .c-alert { border-radius: 0; box-shadow: none; } /* ---- NEON (data-theme="light") — a MODERN BARCADE cabinet. Deliberately still a dark GLOSSY surface (the "light" mode is the alternate look, not a bright one). Distinct from Vaporwave on purpose: NO violet/sunset haze and NO pink+cyan synth palette — instead a neutral glossy-black acrylic cabinet with an electric-blue + MULTI-PRIMARY RGB-LED trim (the same coin-op buttons, modernized: gloss, rounded chrome, crisp LED edges). Re-keys tokens, swaps to Audiowide, and neutralizes style.css's Vivid light washes ([1]→[2] specificity). ---- */ [data-board-theme="arcade"][data-theme="light"] { color-scheme: dark; /* dark surface despite data-theme=light */ --arc-radius: 12px; --bg: #0a0b10; /* neutral near-black acrylic — NOT vaporwave violet */ --ink: #ffffff; --ink-dim: #aab4c6; --ink-faint: #69728a; --bg-card: #14161e; --bg-card-edge: color-mix(in srgb, var(--arc-accent) 70%, transparent); --stat-line: rgba(255, 255, 255, .12); --grain-opacity: .14; --north: var(--arc-accent); --south: var(--arc-green); --live: var(--arc-green); --stale: var(--arc-yellow); --font-display: 'Audiowide', system-ui, sans-serif; } /* glossy black cabinet face — a clean cool sheen + a thin LED underglow at the floor, NOT a diffuse colored sunset haze */ [data-board-theme="arcade"][data-theme="light"] .mesh { background: linear-gradient(180deg, rgba(0, 168, 255, .07) 0%, transparent 22%), radial-gradient(120% 60% at 50% 116%, rgba(0, 168, 255, .16), transparent 60%), linear-gradient(180deg, #0c0e15, #0a0b10); } /* crisp gloss reflection streak, not a scanline/haze */ [data-board-theme="arcade"][data-theme="light"] .grain { mix-blend-mode: screen; opacity: .1; background-image: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .06) 50%, transparent 60%); } /* glossy acrylic panel: bright top gloss highlight + a tight (not hazy) accent ring */ [data-board-theme="arcade"][data-theme="light"] .card { border-radius: 14px; background: linear-gradient(180deg, #1b1e28 0%, #13151d 46%, #15171f 100%); border: 1.5px solid var(--bg-card-edge); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .03), 0 0 0 1px color-mix(in srgb, var(--arc-accent) 30%, transparent), 0 16px 40px -22px #000; } /* RGB-LED trim across the top: the cabinet's multi-PRIMARY buttons (blue/green/yellow/red), not vaporwave's pink→cyan */ [data-board-theme="arcade"][data-theme="light"] .card::before { height: 5px; background: none; background-image: linear-gradient(90deg, var(--arc-accent), var(--arc-green) 36%, var(--arc-yellow) 66%, var(--arc-red)); box-shadow: 0 0 12px -2px color-mix(in srgb, var(--arc-accent) 70%, transparent); } [data-board-theme="arcade"][data-theme="light"] .card::after { opacity: 0; } /* un-pixel the type → smooth Audiowide marquee with a crisp (tight) LED glow */ [data-board-theme="arcade"][data-theme="light"] .c-place h2 { font-size: 1em; letter-spacing: .02em; text-shadow: 0 0 10px color-mix(in srgb, var(--arc-accent) 55%, transparent); --name-fit: normal; } [data-board-theme="arcade"][data-theme="light"] .c-state { font-size: .6em; color: var(--arc-accent); } [data-board-theme="arcade"][data-theme="light"] .c-time { font-size: .82em; color: var(--arc-accent); } [data-board-theme="arcade"][data-theme="light"] .c-date { font-size: .56em; } [data-board-theme="arcade"][data-theme="light"] .c-temp { font-size: 1em; color: #fff; text-shadow: 0 0 14px color-mix(in srgb, var(--arc-accent) 65%, transparent); } [data-board-theme="arcade"][data-theme="light"] .c-temp sup { color: var(--arc-accent); } [data-board-theme="arcade"][data-theme="light"] .c-cond { font-size: .62em; color: var(--arc-green); } /* STATS → a glossy electric-blue LED button (solid, not a pink/cyan gradient) */ [data-board-theme="arcade"][data-theme="light"] .c-stats::before { content: "STATS"; font-size: .6rem; letter-spacing: .12em; border-radius: 7px; background: linear-gradient(180deg, color-mix(in srgb, var(--arc-accent) 92%, #fff), var(--arc-accent)); color: #07121c; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 12px -3px var(--arc-accent); } [data-board-theme="arcade"][data-theme="light"] .stat-k { color: var(--ink-dim); } [data-board-theme="arcade"][data-theme="light"] .stat-v { font-family: var(--font-display); } [data-board-theme="arcade"][data-theme="light"] .c-radar { border-radius: 10px; } [data-board-theme="arcade"][data-theme="light"] .radar-bar { background: linear-gradient(180deg, color-mix(in srgb, var(--arc-accent) 92%, #fff), var(--arc-accent)); } [data-board-theme="arcade"][data-theme="light"] .radar-label { font-size: .58em; color: #07121c; } [data-board-theme="arcade"][data-theme="light"] .radar-time { color: #07121c; } [data-board-theme="arcade"][data-theme="light"] .fc-dow { font-size: .56rem; color: var(--arc-accent); } [data-board-theme="arcade"][data-theme="light"] .fc-temps b { font-family: var(--font-display); } [data-board-theme="arcade"][data-theme="light"] .fc-day:first-child { background: color-mix(in srgb, var(--arc-accent) 18%, transparent); border-left-color: var(--arc-accent); } [data-board-theme="arcade"][data-theme="light"] .wx, [data-board-theme="arcade"][data-theme="light"] .wx-radar { border-radius: 10px; } [data-board-theme="arcade"][data-theme="light"] .wx-name { font-size: .6em; text-shadow: 0 0 10px color-mix(in srgb, var(--arc-accent) 55%, transparent); } [data-board-theme="arcade"][data-theme="light"] .wx-temp { font-size: .6em; } [data-board-theme="arcade"][data-theme="light"] .wx-cond { font-size: .52em; color: var(--arc-green); } [data-board-theme="arcade"][data-theme="light"] .wx-radar-tag { background: var(--arc-accent); color: #07121c; } [data-board-theme="arcade"][data-theme="light"] .al { background: linear-gradient(180deg, #1b1e28, #13151d); border-radius: 12px; } /* ============================================================ OLD GLORY — bold American red/white/blue for the 250th. NIGHT (data-theme="dark") is navy-dominant: a deep navy star field, white type, red accents, a tricolor card edge, and stout Big Shoulders Display type. DAY (data-theme="light") is a literal light flip — cream parade paper, navy ink, red/blue accents (the user wants a real light variant here). radarScheme 2 (Universal blue) keeps the radar on-palette. ============================================================ */ [data-board-theme="old-glory"] { color-scheme: dark; --og-red: var(--opt-accent, #b3261e); --og-blue: #1e3a8a; /* BOLD BLUE field — shared by BOTH modes (the flag's canton blue). Only the cards change between modes (navy at night, white by day). */ --og-field-top: #16307a; --og-field-bot: #081640; --bg: #0b1d56; --ink: #f6f8ff; --ink-dim: #aebbdc; --ink-faint: #6b7aa6; --bg-card: #122145; --bg-card-edge: rgba(246, 248, 255, .16); --stat-line: rgba(246, 248, 255, .12); --north: #5b8def; --south: var(--og-red); --live: #46c06a; --stale: #e0b34a; --shadow: 0 18px 44px -22px #000, inset 0 1px 0 rgba(255, 255, 255, .06); --grain-opacity: 1; /* one tile = a staggered PAIR of small 5-point stars; tiling yields the flag canton's alternating 6/5 quincunx. Painted into the BACKGROUND .mesh (behind cards); subtlety is baked into the SVG fill-opacity (no blend/overlay — stars must NOT wash over content). */ --og-star: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='90'%20height='104'%20viewBox='0%200%2090%20104'%3E%3Cg%20fill='%23ffffff'%20fill-opacity='.22'%3E%3Cpath%20transform='translate(16,20)%20scale(.52)'%20d='M12%20.587l3.668%207.431%208.2%201.192-5.934%205.785%201.401%208.169L12%2018.896l-7.335%203.868%201.401-8.169L.132%209.21l8.2-1.192z'/%3E%3Cpath%20transform='translate(61,72)%20scale(.52)'%20d='M12%20.587l3.668%207.431%208.2%201.192-5.934%205.785%201.401%208.169L12%2018.896l-7.335%203.868%201.401-8.169L.132%209.21l8.2-1.192z'/%3E%3C/g%3E%3C/svg%3E"); /* stout American display gothic — already loaded in the page */ --font-display: 'Big Shoulders Display', 'Arial Narrow', system-ui, sans-serif; } /* bold blue field + the flag star canton, BOTH on the BACKGROUND layer (.mesh, z-0) so every panel — cards, the fixed sidebar, the hourly day-detail — sits OPAQUELY on top of the stars instead of the stars washing over their text. (The old top-overlay .grain at z-50 painted the stars above everything — the bug behind the unreadable hourly view.) */ [data-board-theme="old-glory"] .mesh { background: var(--og-star), radial-gradient(125% 85% at 50% -8%, var(--og-field-top), var(--og-field-bot) 62%, #060f2e 100%); background-size: 90px 104px, 100% 100%; background-repeat: repeat, no-repeat; animation: none; } [data-board-theme="old-glory"][data-opt-stars="off"] .mesh { background: radial-gradient(125% 85% at 50% -8%, var(--og-field-top), var(--og-field-bot) 62%, #060f2e 100%); } /* the top-overlay grain is unused by this theme (the stars live on .mesh now) */ [data-board-theme="old-glory"] .grain { display: none; } /* card → a rich blue gradient panel — OPAQUE so the white type never competes with the background stars — with a red/white/blue top edge */ [data-board-theme="old-glory"] .card { border-radius: 6px; background: linear-gradient(165deg, #1c3576 0%, #122a5d 52%, #0b1c45 100%); border: 1px solid rgba(246, 248, 255, .22); backdrop-filter: none; box-shadow: var(--shadow); overflow: hidden; } /* hourly day-detail: an OPAQUE panel that matches the card (white text reads cleanly now that the stars are behind it). Light-mode override goes white in the DAY block below. */ [data-board-theme="old-glory"] .day-detail { background: linear-gradient(165deg, #18306a, #0b1c45); } [data-board-theme="old-glory"] .hr-head { background: #122a5e; } [data-board-theme="old-glory"] .card::before { background: none; opacity: 1; height: 4px; background-image: linear-gradient(90deg, var(--og-red) 0 33.3%, #ffffff 33.3% 66.6%, var(--og-blue) 66.6% 100%); } [data-board-theme="old-glory"] .card::after { opacity: 0; } /* HEADER → stout gothic city, red state */ [data-board-theme="old-glory"] .c-place h2 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; } [data-board-theme="old-glory"] .c-state { color: var(--og-red); font-weight: 700; letter-spacing: .1em; } [data-board-theme="old-glory"] .c-time { font-family: var(--font-display); font-weight: 700; } [data-board-theme="old-glory"] .c-date { color: #9fb0d8; font-weight: 700; } [data-board-theme="old-glory"] .c-temp { font-family: var(--font-display); font-weight: 900; } [data-board-theme="old-glory"] .c-temp sup { color: var(--og-red); } [data-board-theme="old-glory"] .c-cond { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink); } [data-board-theme="old-glory"] .c-feels { color: var(--ink-dim); } /* STATS → a star-flanked red banner */ [data-board-theme="old-glory"] .c-stats::before { content: "★ CONDITIONS ★"; grid-column: 1 / -1; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: .66rem; letter-spacing: .18em; color: #fff; background: var(--og-red); padding: .18rem .5rem; margin-bottom: .3rem; border-radius: 2px; } [data-board-theme="old-glory"] .stat-k { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-dim); } [data-board-theme="old-glory"] .stat-v { font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; } [data-board-theme="old-glory"] .stat { border-bottom: 1px solid var(--stat-line); } [data-board-theme="old-glory"] .c-src { color: var(--ink-faint); } /* RADAR → navy frame, red header bar */ [data-board-theme="old-glory"] .c-radar { border: 1px solid var(--bg-card-edge); border-radius: 4px; } [data-board-theme="old-glory"] .radar-bar { background: var(--og-red); } [data-board-theme="old-glory"] .radar-label { font-family: var(--font-display); font-weight: 700; color: #fff; letter-spacing: .14em; text-transform: uppercase; } [data-board-theme="old-glory"] .radar-time { color: #fff; font-weight: 700; opacity: .9; } /* FORECAST → red lead day */ [data-board-theme="old-glory"] .card.is-full .c-forecast { border-top: 2px solid var(--og-red); } [data-board-theme="old-glory"] .fc-dow { font-family: var(--font-display); font-weight: 700; color: var(--north); text-transform: uppercase; } [data-board-theme="old-glory"] .fc-temps b { font-family: var(--font-display); font-weight: 900; } [data-board-theme="old-glory"] .fc-day { font-variant-numeric: tabular-nums; } [data-board-theme="old-glory"] .fc-day:first-child { background: color-mix(in srgb, var(--og-red) 22%, transparent); border: 1px solid color-mix(in srgb, var(--og-red) 50%, transparent); border-radius: 3px; } /* OVERLAYS → navy panels with a red top rule */ [data-board-theme="old-glory"] .wx, [data-board-theme="old-glory"] .fc-bar, [data-board-theme="old-glory"] .cmb-anchor.is-panel, [data-board-theme="old-glory"] .cmb-anchor.is-forecast { --card-rgb: 18 33 69; --card-rgb-2: 12 24 53; --line: rgba(246, 248, 255, .16); --panel: rgb(var(--card-rgb) / var(--card-alpha)); --panel-2: rgb(var(--card-rgb-2) / var(--card-alpha)); } [data-board-theme="old-glory"] .wx { border-radius: 6px; border: 1px solid var(--bg-card-edge); border-top: 3px solid var(--og-red); } [data-board-theme="old-glory"] .fc-bar { border-radius: 6px; border-top: 3px solid var(--og-red); } [data-board-theme="old-glory"] .wx-radar { border-radius: 4px; border-color: var(--bg-card-edge); } [data-board-theme="old-glory"] .wx-name, [data-board-theme="old-glory"] .wx-cond { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; } [data-board-theme="old-glory"] .wx-temp { font-family: var(--font-display); font-weight: 900; } [data-board-theme="old-glory"] .wx-temp sup { color: var(--og-red); } [data-board-theme="old-glory"] .wx-clock { font-family: var(--font-display); font-weight: 700; } [data-board-theme="old-glory"] .wx-radar-tag { background: var(--og-red); color: #fff; font-family: var(--font-display); font-weight: 700; } [data-board-theme="old-glory"] .wx-stat .k { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; color: var(--ink-dim); } [data-board-theme="old-glory"] .wx-stat .v { font-family: var(--font-display); font-weight: 800; } [data-board-theme="old-glory"] .fc-temp-hi { font-family: var(--font-display); font-weight: 900; } /* ALERTS → solid severity bar (strip ink routed via the shared list below) */ [data-board-theme="old-glory"] .board-alert, [data-board-theme="old-glory"] .cmb-tk { background: var(--sev); box-shadow: none; animation: none; } [data-board-theme="old-glory"] .al { background: linear-gradient(180deg, #152a55, #102043); --ink: #f6f8ff; --ink-dim: #aebbdc; border-radius: 6px; } [data-board-theme="old-glory"] .al-event { font-family: var(--font-display); font-weight: 800; } [data-board-theme="old-glory"] .al-badge { font-family: var(--font-display); font-weight: 700; } [data-board-theme="old-glory"] .c-alert { border-radius: 3px; } /* ---- DAY (data-theme="light") — the field STAYS bold blue with the same star canton; only the CARDS flip to crisp WHITE (navy ink, scoped INSIDE the card so the off-card board chrome stays light on the blue field). A clean white-on-blue, flag-like look — subdued and classy. Neutralizes style.css's Vivid washes ([1]→[2] specificity). ---- */ [data-board-theme="old-glory"][data-theme="light"] { color-scheme: dark; /* the dominant surface is the dark-blue field, not the cards */ /* off-card chrome (vertical title, distance rails, footer) stays LIGHT on the blue */ --ink: #eef2ff; --ink-dim: #b8c6ef; --ink-faint: #8294c4; --grain-opacity: 1; /* keep the star field on the blue (don't fade it for "light") */ } /* crisp WHITE cards, with their own DARK ink scope so card text is navy on white */ [data-board-theme="old-glory"][data-theme="light"] .card { background: linear-gradient(180deg, #ffffff, #f3f6fc); --ink: #0e1b3d; --ink-dim: #3a4a7d; --ink-faint: #7382aa; color: var(--ink); /* establish navy as the inherited text color INSIDE the white card (the board root color is light for the on-blue chrome) */ --bg-card-edge: rgba(14, 27, 61, .16); --stat-line: rgba(14, 27, 61, .14); border: 1px solid var(--bg-card-edge); box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 20px 44px -22px rgba(0, 0, 0, .6); } /* hourly day-detail goes WHITE to match the day cards (navy text inherits from the card scope above); the sticky column header matches so it reads on the white panel */ [data-board-theme="old-glory"][data-theme="light"] .day-detail { background: linear-gradient(180deg, #ffffff, #f3f6fc); } [data-board-theme="old-glory"][data-theme="light"] .hr-head { background: #ffffff; } /* inside white cards: navy ink everywhere via the scoped --ink; blue stays in the small accents, red on the banner/lead day */ [data-board-theme="old-glory"][data-theme="light"] .c-state { color: var(--og-blue); } [data-board-theme="old-glory"][data-theme="light"] .c-date { color: #3a4a7d; } [data-board-theme="old-glory"][data-theme="light"] .stat-k { color: #36488a; } [data-board-theme="old-glory"][data-theme="light"] .c-feels { color: #46568c; } [data-board-theme="old-glory"][data-theme="light"] .c-src { color: #5f6ea0; } [data-board-theme="old-glory"][data-theme="light"] .fc-dow { color: var(--og-blue); } [data-board-theme="old-glory"][data-theme="light"] .c-radar { border-color: rgba(14, 27, 61, .2); } /* overlay panels go white too (same scoped dark ink) */ [data-board-theme="old-glory"][data-theme="light"] .wx, [data-board-theme="old-glory"][data-theme="light"] .fc-bar, [data-board-theme="old-glory"][data-theme="light"] .cmb-anchor.is-panel, [data-board-theme="old-glory"][data-theme="light"] .cmb-anchor.is-forecast { --card-rgb: 255 255 255; --card-rgb-2: 243 246 252; --card-alpha: .97; --line: rgba(14, 27, 61, .14); --ink: #0e1b3d; --ink-dim: #3a4a7d; color: var(--ink); --panel: rgb(var(--card-rgb) / var(--card-alpha)); --panel-2: rgb(var(--card-rgb-2) / var(--card-alpha)); } [data-board-theme="old-glory"][data-theme="light"] .al { background: linear-gradient(180deg, #ffffff, #f1f4fb); --ink: #0e1b3d; --ink-dim: #3a4a7d; color: var(--ink); } /* ============================================================ ALERT-STRIP READABILITY — these themes paint the board alert strip a SOLID severity bar (vs the default subtle tint). Route their strip through the alert tokens so the ticker text uses each severity's paired ink (--sev-ink) instead of the theme's light body ink — otherwise the area list / expiry fall to near-zero contrast on the solid fill. (style.css's .ba-* read these tokens; a per-board owner color override still wins via --wb-alert-ink.) ============================================================ */ [data-board-theme="techno"] .board-alert, [data-board-theme="techno"] .cmb-tk, [data-board-theme="storm-desk"] .board-alert, [data-board-theme="storm-desk"] .cmb-tk, [data-board-theme="local-news"] .board-alert, [data-board-theme="local-news"] .cmb-tk, [data-board-theme="classy"] .board-alert, [data-board-theme="classy"] .cmb-tk, [data-board-theme="clean"] .board-alert, [data-board-theme="clean"] .cmb-tk, [data-board-theme="coastal"] .board-alert, [data-board-theme="coastal"] .cmb-tk, [data-board-theme="retro-cable"] .board-alert, [data-board-theme="retro-cable"] .cmb-tk, [data-board-theme="terminal-glow"] .board-alert, [data-board-theme="terminal-glow"] .cmb-tk, [data-board-theme="vaporwave"] .board-alert, [data-board-theme="vaporwave"] .cmb-tk, [data-board-theme="airport-board"] .board-alert, [data-board-theme="airport-board"] .cmb-tk, [data-board-theme="newsprint"] .board-alert, [data-board-theme="newsprint"] .cmb-tk, [data-board-theme="arcade"] .board-alert, [data-board-theme="arcade"] .cmb-tk, [data-board-theme="old-glory"] .board-alert, [data-board-theme="old-glory"] .cmb-tk { --alert-strip-bg: var(--sev); --alert-strip-ink: var(--sev-ink); --alert-strip-ink-dim: color-mix(in srgb, var(--sev-ink) 72%, transparent); --alert-strip-accent: var(--sev-ink); } /* (Game Day routes its alert ink via its own broadcast-bottom-line block above — graphite bar with white ink + severity chyron — so it's intentionally NOT here.) */ /* ============================================================ EXTREME-SEVERITY ESCALATION — life-threatening alerts (Tornado Warning, PDS, flash- flood emergency). Extreme must DOMINATE in EVERY theme; it is not "slightly rougher weather." Force a very dark blood-red bar + bright-red cap + an alarm pulse + white ink on the alert ticker (board strip #board-alert and combined .cmb-tk) AND the alert card (.al), overriding the theme's normal fill and even an owner alert-color override (life-safety > branding/aesthetics). The cap LABEL also escalates to "EMERGENCY" (set in app.js / combo.js). Honors reduced-motion (drops the flash, keeps the red). ============================================================ */ .board-alert[data-sev="extreme"], .cmb-tk[data-sev="extreme"] { background: linear-gradient(180deg, #3c0707 0%, #190303 100%) !important; border-color: #ff2d2d !important; --wb-alert-ink: #ffffff; --alert-strip-ink: #ffffff; --alert-strip-ink-dim: rgba(255, 255, 255, .82); --alert-strip-accent: #ff7a7a; --tk-ink: #ffffff; --tk-ink-dim: rgba(255, 255, 255, .82); --tk-accent: #ff7a7a; animation: wb-extreme-pulse 1.05s ease-in-out infinite !important; } .board-alert[data-sev="extreme"] .ba-cap, .cmb-tk[data-sev="extreme"] .tk-cap { background: #ff2d2d !important; color: #ffffff !important; } /* alert CARD escalation: dark blood-red panel, bright-red frame, white text */ .al[data-sev="extreme"] { background: linear-gradient(180deg, #3c0707, #190303) !important; border-color: #ff2d2d !important; color: #ffffff !important; /* same alarm pulse as the ticker, as an OUTER glow around the floating card (keeps the al-in entrance, then pulses) */ animation: al-in 0.45s cubic-bezier(.2, .8, .2, 1) both, wb-extreme-card-pulse 1.05s ease-in-out infinite !important; } .al[data-sev="extreme"] .al-event, .al[data-sev="extreme"] .al-area, .al[data-sev="extreme"] .al-instruction, .al[data-sev="extreme"] .al-foot, .al[data-sev="extreme"] .al-src { color: #ffffff !important; } .al[data-sev="extreme"] .al-badge { background: #ff2d2d !important; color: #ffffff !important; } @keyframes wb-extreme-pulse { 0%, 100% { box-shadow: inset 0 0 0 2px rgba(255, 45, 45, .5), inset 0 0 42px -10px rgba(255, 45, 45, .55); } 50% { box-shadow: inset 0 0 0 2px rgba(255, 90, 90, .95), inset 0 0 72px -6px rgba(255, 45, 45, .85); } } @keyframes wb-extreme-card-pulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(255, 45, 45, .6), 0 0 26px -6px rgba(255, 45, 45, .55); } 50% { box-shadow: 0 0 0 2px rgba(255, 90, 90, .95), 0 0 52px -4px rgba(255, 45, 45, .85); } } @media (prefers-reduced-motion: reduce) { .board-alert[data-sev="extreme"], .cmb-tk[data-sev="extreme"] { animation: none !important; box-shadow: inset 0 0 0 2px rgba(255, 60, 60, .8) !important; } .al[data-sev="extreme"] { animation: al-in 0.45s cubic-bezier(.2, .8, .2, 1) both !important; box-shadow: 0 0 0 2px rgba(255, 60, 60, .85), 0 0 40px -8px rgba(255, 45, 45, .6) !important; } }