/* ─────────────────────────────────────────────────────────────────────────── Trove OBS — single-source design tokens ───────────────────────────────────────────────────────────────────────── The canonical look for every composited OBS overlay (stats, ticker, the Telegram replica, the Floor, the feed tabs, the now-playing pill) so they read as one floor alongside the hero overlay. Values are lifted verbatim from the hero's dark/ember theme — the hero IS the design language. Usage: each template does and maps its own local CSS vars to the --t-* tokens below. Change a token here and the whole floor moves together. ───────────────────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Space+Grotesk:wght@400..700&family=JetBrains+Mono:wght@400..600&display=swap'); :root { /* background layers (deepest → surface) */ --t-bg-1: #000000; --t-bg-2: #000000; --t-bg-3: #000000; --t-panel: #000000; /* card / panel base (opaque jet black) */ --t-card: #000000; /* opaque jet black; was #14110f warm charcoal (read grey on large TV) */ --t-edge: rgba(255,94,58,.28);/* soft ember edge (accent borders) */ /* accent — ember */ --t-accent: #ff5e3a; /* text ramp */ --t-text: #f4efe9; --t-text-2: #e4ded6; --t-muted: #9a938b; --t-dim: #6b645d; /* surfaces & rules */ --t-surface: rgba(255,255,255,.03); --t-surface-2: rgba(255,255,255,.05); --t-border: rgba(255,255,255,.08); --t-vignette: rgba(0,0,0,.55); /* state — load-bearing colour */ --t-bull: #36d98a; --t-bear: #ff5147; --t-warn: #f5a623; /* amber — extended-hours caution (pre/after market) */ /* moving-average / accent trio (charts, sparklines) */ --t-ma1: #f4b740; --t-ma2: #5b9cff; --t-ma3: #b07bff; /* effects */ --t-textsh: 0 1px 6px rgba(0,0,0,.85); --t-shadow: 0 4px 22px rgba(0,0,0,.55); --t-radius: 14px; /* type */ --t-font-display: 'Bricolage Grotesque', system-ui, sans-serif; /* headers, the big numbers */ --t-font-ui: 'Space Grotesk', system-ui, sans-serif; /* body / labels */ --t-font-mono: 'JetBrains Mono', ui-monospace, monospace; /* figures, tickers */ } /* ─────────────────────────────────────────────────────────────────────────── Floor scheme — driven by TroveHub's Ambient (market-driven) toggle. TroveHub POSTs the current scheme to /palette/scheme; overlays poll /palette/scheme.json and set . When the attribute is "bull" or "bear" the accent flips green/red across every surface that references --t-accent. No attribute or "default" leaves it at ember. See scheme-sync.js for the polling logic. ─────────────────────────────────────────────────────────────────────────── */ :root[data-scheme="bull"] { --t-accent: var(--t-bull); } :root[data-scheme="bear"] { --t-accent: var(--t-bear); } /* Opaque panel fill — applied via class="glass" on every composited overlay's main container (telegram #wrap, ticker, jukebox pill, price card, floor, stats, etc.). !important is intentional and load-bearing: it's how this utility wins against each panel's own background rule, so the fill reads as one solid #000000 across the whole stream regardless of per-panel overrides. Was rgba(20,17,15,0.62) — 38% see-through — which on a large TV made every panel read as a different shade of grey (translucency picks up whatever sits behind each source in OBS). The backdrop-filter is dropped: it had nothing translucent to blur once the fill went opaque. Per-theme overrides that need a different fill (e.g. news ticker's yellow strip) already beat this on selector specificity, so they're unaffected. */ .glass { background: #000000 !important; }