/* ============================================================================= ROSIE · RTA — v2 design-system skin ============================================================================= The SINGLE re-skin surface for the live Real-Time Assist HUD (the header strip, the metrics row, the live alert/signal feed). Ported from design_system/v2/handoff/{rta-tokens,rta-panel}.css. Every RTA component reads var(--rta-*) — it never hardcodes a colour. To re-theme the HUD, edit only this file. Theming model ------------- - LIGHT is the default (the product is light-only for now). Defined on :root, so both the in-app live screen and the Picture-in-Picture popup pick it up. - DARK is prepared behind [data-theme="dark"] on . No toggle ships yet; when one is added (globally or just for the HUD) the panel flips instantly because every component styles with var(). Signal tiers — colour encodes URGENCY, never category: whisper (cyan) — informational → no motion ← "low" tap (gold) — actionable → pulse ONCE on entry ← "medium" tug (red) — attention now → the only loop ← "high" ============================================================================= */ :root { /* ---- Chassis -------------------------------------------------------- */ --rta-panel-bg: #FFFFFF; /* HUD background (PiP body) */ --rta-surface: #FBFAF8; /* cards / docked items */ --rta-wash: rgba(26,46,74,0.02); --rta-chrome-bg: #FBFAF8; /* header strip */ /* ---- Rules / hairlines ---------------------------------------------- */ --rta-rule: rgba(26,46,74,0.09); --rta-rule-strong: rgba(26,46,74,0.15); --rta-dot: rgba(26,46,74,0.16); /* ---- Text ----------------------------------------------------------- */ --rta-fg: #1A2E4A; --rta-fg2: #6B7E93; --rta-fg3: #A8B4C2; /* ---- Signal tiers (colour = urgency) -------------------------------- */ --rta-whisper: #0891B2; /* brand cyan-600 — informational */ --rta-tap: #E0922B; /* scorecard open-gap gold — actionable */ --rta-tug-amber: #D95B25; /* experience degrading */ --rta-tug-red: #C2362B; /* compliance / escalation */ /* ---- Semantic accents ----------------------------------------------- */ --rta-accent: #0891B2; /* primary action / active (= cyan) */ --rta-good: #2A9D8F; /* success / calm / complete (teal) */ /* ---- Effects -------------------------------------------------------- */ --rta-card-shadow: 0 6px 18px rgba(26,46,74,0.10); /* ---- Radius — scorecard scale --------------------------------------- */ --rta-radius-card: 10px; /* signal cards */ --rta-radius-sm: 8px; /* docked items */ --rta-radius-xs: 4px; /* rows, chips */ /* ---- Fonts — reuse the app's loaded faces --------------------------- */ --rta-font-body: var(--font-body); /* DM Sans */ --rta-font-mono: var(--font-mono); /* JetBrains Mono */ } [data-theme="dark"] { /* ---- Chassis -------------------------------------------------------- */ --rta-panel-bg: #1A2E4A; /* brand ink navy */ --rta-surface: #15273E; --rta-wash: rgba(255,255,255,0.02); --rta-chrome-bg: rgba(9,20,35,0.35); /* ---- Rules ---------------------------------------------------------- */ --rta-rule: rgba(255,255,255,0.09); --rta-rule-strong: rgba(255,255,255,0.16); --rta-dot: rgba(255,255,255,0.16); /* ---- Text ----------------------------------------------------------- */ --rta-fg: #F4F6F9; --rta-fg2: #9FB1C6; --rta-fg3: #61748E; /* ---- Signal tiers --------------------------------------------------- */ --rta-whisper: #22B4D4; --rta-tap: #FFA94D; --rta-tug-amber: #F2784B; --rta-tug-red: #E15546; /* ---- Semantic accents ----------------------------------------------- */ --rta-accent: #22B4D4; --rta-good: #34B3A2; /* ---- Effects -------------------------------------------------------- */ --rta-card-shadow: 0 6px 18px rgba(3,10,20,0.30); } /* ============================================================================= Structural CSS — keyframes, scrollbar, reduced motion. Motion rule: whisper → none · tap → pulse ONCE · tug → the only loop. Tier colour is exposed to keyframes via the --tier custom property, which each signal card sets from its severity class (see alerts.css). ============================================================================= */ @keyframes rtaTugLoop { /* tug card — the only looping pulse */ 0%, 100% { outline: 0 solid transparent; } 50% { outline: 5px solid color-mix(in srgb, var(--tier) 26%, transparent); } } @keyframes rtaTapPulse { /* tap card — pulses once on entry, then still */ 0% { outline: 0 solid transparent; } 40% { outline: 5px solid color-mix(in srgb, var(--tier) 24%, transparent); } 100% { outline: 0 solid transparent; } } @keyframes rtaDotPulse { /* tug tier-dot */ 0%, 100% { box-shadow: 0 0 0 0 var(--tier); opacity: 1; } 50% { box-shadow: 0 0 7px 1px var(--tier); opacity: 0.7; } } @media (prefers-reduced-motion: reduce) { .alert-panel { animation: none !important; } .alert-row::after { animation: none !important; } }