/* ============================================================ base.css — foundational styles every feature builds on ------------------------------------------------------------ - Universal reset (box-sizing, margin, padding) - / typography + viewport fill + dark fade transition - :root CSS custom properties (dark theme — default) - :root[data-theme="light"] overrides (light theme) Project-agnostic. Load FIRST in , before any feature CSS so feature rules can reference --widget-* variables without redefining them. ============================================================ */ * { box-sizing: border-box; margin: 0; padding: 0; } html, body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; background: var(--body-bg); height: 100vh; width: 100vw; overflow: hidden; transition: background 0.3s ease; } /* --------------------------------------------------------------- Dark theme — default. Every --widget-* variable below is read by the captions widget, the audio panel, the master stream, the stream player, and the main-settings module. --------------------------------------------------------------- */ :root { --body-bg: #1a1d24; --widget-bg: rgba(14, 16, 20, 0.85); --widget-border: rgba(255, 255, 255, 0.1); --widget-ink: #f5f5f5; --widget-ink-dim: rgba(245, 245, 245, 0.6); --widget-surface: rgba(255, 255, 255, 0.04); --widget-surface-strong: rgba(255, 255, 255, 0.08); --widget-surface-stronger: rgba(255, 255, 255, 0.12); --widget-wave-bg: rgba(0, 0, 0, 0.25); --widget-scrollbar: rgba(255, 255, 255, 0.1); /* Caption-display surface — aligned to the settings-panel black (#1f2125) so the floating caption reads as the same material as the panel + cv7. */ --display-bg-rgb: 31, 33, 37; --widget-accent: #fbbf24; /* Secondary accent — the violet half of the brand's cyan→violet duo (already used by the settings primary button + translated captions). Pairs with --widget-accent for gradients and secondary highlights. */ --widget-accent-2: #a78bfa; --widget-danger: #f87171; --widget-translate: #a78bfa; --widget-audio: #fbbf24; --widget-room: #86efac; --widget-warn: #fcd34d; /* Shared typography + motion tokens — one UI font, one mono font, one entrance easing, used by the settings panel, cv7 player and captions so the three surfaces feel like one product. (Theme-independent.) */ --widget-font: "Plus Jakarta Sans", system-ui, sans-serif; --widget-font-mono: "JetBrains Mono", ui-monospace, monospace; --widget-ease: cubic-bezier(0.16, 1, 0.3, 1); /* Canonical cyan→violet accent gradient — the single source of truth for every two-tone surface (settings CTA, cv7 play button, …). */ --widget-accent-grad: linear-gradient( 135deg, var(--widget-accent) 0%, color-mix(in srgb, var(--widget-accent) 72%, var(--widget-accent-2)) 100% ); /* Shared floating width — the caption + cv7 player use this in Free layout so they're always the same width. */ --float-width: min(90vw, 900px); } /* --------------------------------------------------------------- Light theme — activated when . The accents shift toward higher-contrast values that read on a light surface; surfaces flip from white-tinted rgba to dark-tinted rgba. --------------------------------------------------------------- */ :root[data-theme="light"] { --body-bg: #eef2f7; --widget-bg: rgba(252, 253, 255, 0.94); --widget-border: rgba(15, 23, 42, 0.12); --widget-ink: #1f2937; --widget-ink-dim: rgba(31, 41, 55, 0.6); --widget-surface: rgba(15, 23, 42, 0.05); --widget-surface-strong: rgba(15, 23, 42, 0.09); --widget-surface-stronger: rgba(15, 23, 42, 0.14); --widget-wave-bg: rgba(15, 23, 42, 0.06); --widget-scrollbar: rgba(15, 23, 42, 0.18); --display-bg-rgb: 248, 250, 252; --widget-accent: #d97706; --widget-accent-2: #7c3aed; --widget-danger: #dc2626; --widget-translate: #7c3aed; --widget-audio: #c2410c; --widget-room: #15803d; --widget-warn: #b45309; } /* --------------------------------------------------------------- Fixed (embedded) layout — `html.layout-fixed` docks the caption to the top and the cv7 player to the bottom as flush, edge-to-edge bars (vs the default floating "free" cards). The per-component docking rules live next to each component (caption → cap-widget.css, player → the #cv7