/* ============================================================================ SEP-137 Cockpit - LOOK A: "MISSION CONTROL" (NASA/NORAD ops floor) Loads AFTER cockpit.css. Two layers: 1) A COMPLETE [data-theme="mission"] override of the theme-contract custom-property surface (README "Theme contract" list - the spine block never matches because ). 2) Theme-scoped extra rules + same-name @keyframes redefinitions (later definitions win) for the CRT overlay, light-packet pulses, klaxon failure flashing and the SYSTEM DISTRESS alert strip. NO cockpit.js changes - JS only flips data-* attributes; CSS owns motion. ========================================================================= */ [data-theme="mission"] { color-scheme: dark; /* ---- colors: surfaces (near-black phosphor CRT) ---- */ --c-bg: #050a08; --c-bg-grad-a: #071109; --c-bg-grad-b: #030605; --c-panel: #07140d; --c-panel-2: #0b2014; --c-node-bg: #06110a; --c-line: #15402b; --c-line-strong: #1f5c3c; --c-node-line: #1d5536; --c-placeholder-line: #11301f; --c-shadow: 0 0 28px rgba(51, 255, 153, 0.08), 0 18px 48px rgba(0, 0, 0, 0.6); /* ---- colors: text (phosphor) ---- */ --c-text: #d6ffe6; --c-muted: #74c897; --c-faint: #3f7a59; /* ---- colors: semantic (green primary, amber/cyan secondary, klaxon red) ---- */ --c-accent: #33ff99; --c-on-accent: #021207; --c-gold: #ffd24d; --c-green: #33ff99; --c-amber: #ffb000; --c-red: #ff3b30; --c-blue: #35e0ff; /* ---- colors: flow / motion (bright light packets on dim buses) ---- */ --c-connector: #1f5c3c; --c-connector-dim: #0e2a1b; --c-pulse: #b8ffd9; --c-glow-amber: rgba(255, 176, 0, 0.6); --c-glow-red: rgba(255, 59, 48, 0.6); --c-glow-accent: rgba(51, 255, 153, 0.55); /* ---- colors: chips / badges ---- */ --c-chip-ok-bg: rgba(51, 255, 153, 0.10); --c-chip-warn-bg: rgba(255, 176, 0, 0.12); --c-chip-bad-bg: rgba(255, 59, 48, 0.14); --c-chip-info-bg: rgba(53, 224, 255, 0.10); --c-chip-neutral-bg: rgba(116, 200, 151, 0.08); --c-distress-bg: rgba(255, 59, 48, 0.16); /* ---- colors: tiers ---- */ --c-tier-hard: #ff3b30; --c-tier-soft: #33ff99; --c-tier-none: #74c897; --c-tier-unknown: #3f7a59; /* ---- durations (slightly hotter tempo than spine - feels "live") ---- */ --d-pulse-cycle: 4.6s; --d-pulse-stagger: calc(var(--d-pulse-cycle) * 0.12); --d-shake: 1.8s; --d-gears: 2.8s; --d-tide: 2.4s; --d-flame: 0.5s; --d-robot: 3.2s; --d-glow: 1.2s; --d-enter: 0.5s; --d-changed: 0.9s; --d-ticker: 48s; --d-distress: 1.1s; --d-chip-pulse: 2s; --d-panel: 0.22s; /* ---- easings ---- */ --e-standard: cubic-bezier(0.4, 0, 0.2, 1); --e-enter: cubic-bezier(0.16, 1, 0.3, 1); --e-pulse: linear; --e-linear: linear; --e-soft: ease-in-out; --e-flame: steps(2, end); /* harder strobe-step flicker */ /* ---- layout (sharp-cornered instrument tiles) ---- */ --chain-w: 232px; --chain-gap: 14px; --group-gap: 30px; --conn-h: 22px; --row-h: 88px; --row-issue-h: 96px; --cell-h: calc(var(--conn-h) + var(--row-h)); --rail-w: 88px; --radius: 0px; --panel-w: min(430px, 92vw); /* ---- typography: system mono stack ---- */ --font: ui-monospace, "Cascadia Mono", "Cascadia Code", Consolas, "SF Mono", SFMono-Regular, Menlo, "DejaVu Sans Mono", "Liberation Mono", monospace; --fs-base: 0.8rem; --fs-small: 0.69rem; --fs-rail: 0.6rem; --placeholder-opacity: 0.34; } /* ===================== CRT chrome: plot grid + scanlines + vignette ====== */ [data-theme="mission"] body { overflow-x: clip; /* the 100vw distress strip must not spawn an h-scrollbar */ background: repeating-linear-gradient(0deg, rgba(51, 255, 153, 0.028) 0 1px, transparent 1px 56px), repeating-linear-gradient(90deg, rgba(51, 255, 153, 0.028) 0 1px, transparent 1px 56px), linear-gradient(180deg, var(--c-bg-grad-a) 0%, var(--c-bg-grad-b) 100%); } /* scanlines (subtle, pure CSS, pointer-transparent, over everything) */ [data-theme="mission"] body::before { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0 1px, transparent 1px 3px); opacity: 0.55; } /* CRT vignette - phosphor-dark edges; floods red under SYSTEM DISTRESS */ [data-theme="mission"] body::after { content: ""; position: fixed; inset: 0; z-index: 91; pointer-events: none; background: radial-gradient(ellipse at 50% 42%, transparent 56%, rgba(0, 10, 5, 0.55) 100%); } [data-theme="mission"] body[data-distress="1"]::after { background: radial-gradient(ellipse at 50% 42%, transparent 52%, rgba(70, 4, 2, 0.6) 100%); } /* phosphor selection */ [data-theme="mission"] ::selection { background: var(--c-accent); color: var(--c-on-accent); } /* ===================== console chrome ==================================== */ [data-theme="mission"] .brand-title { text-transform: uppercase; letter-spacing: 0.16em; text-shadow: 0 0 8px var(--c-glow-accent); } [data-theme="mission"] .brand-sub { text-transform: uppercase; letter-spacing: 0.08em; } [data-theme="mission"] .brand-mark { color: var(--c-accent); border-radius: 0; box-shadow: 0 0 12px rgba(51, 255, 153, 0.25), inset 0 0 8px rgba(51, 255, 153, 0.12); } [data-theme="mission"] .topbar { border-bottom: 1px solid var(--c-line-strong); } [data-theme="mission"] .rail-cell { text-shadow: 0 0 6px rgba(51, 255, 153, 0.25); } /* hard-cornered instrument chrome (base hardcodes pill/round radii) */ [data-theme="mission"] .chip, [data-theme="mission"] .badge, [data-theme="mission"] .tick-kind, [data-theme="mission"] .motif-icon, [data-theme="mission"] .signin-card { border-radius: 0; } /* ticker = telemetry tape */ [data-theme="mission"] .ticker-wrap { border-top: 1px solid var(--c-line-strong); background: rgba(3, 8, 5, 0.6); box-shadow: 0 -6px 18px rgba(51, 255, 153, 0.05); } /* log tails = phosphor terminal */ [data-theme="mission"] .log-tail { background: #020503; color: #8fe8b4; text-shadow: 0 0 4px rgba(51, 255, 153, 0.25); } /* ===================== instrument tiles (nodes) ========================== */ [data-theme="mission"] .node { box-shadow: inset 0 0 14px rgba(51, 255, 153, 0.05), 0 0 6px rgba(51, 255, 153, 0.10); } [data-theme="mission"] .node:hover { box-shadow: inset 0 0 14px rgba(51, 255, 153, 0.09), 0 0 14px rgba(51, 255, 153, 0.28); } [data-theme="mission"] .node-title { text-shadow: 0 0 6px rgba(51, 255, 153, 0.22); } [data-theme="mission"] .node.placeholder { box-shadow: none; } /* issue roots: command-tier strip light along the top edge */ [data-theme="mission"] .issue-node:not(.placeholder) { border-top: 2px solid var(--c-accent); } [data-theme="mission"] .issue-node.untracked { border-top-color: var(--c-faint); } [data-theme="mission"] .hchip { box-shadow: inset 0 0 10px rgba(51, 255, 153, 0.04); } /* status lamps get a matching glow (instrument indicator bulbs) */ [data-theme="mission"] .hchip[data-status="ok"] .dot { box-shadow: 0 0 6px var(--c-green); } [data-theme="mission"] .hchip[data-status="warn"] .dot { box-shadow: 0 0 6px var(--c-amber); } [data-theme="mission"] .hchip[data-status="bad"] .dot { box-shadow: 0 0 6px var(--c-red); } [data-theme="mission"] .hchip[data-status="info"] .dot { box-shadow: 0 0 6px var(--c-blue); } /* ===================== flow: bright light packets with trailing glow ===== */ [data-theme="mission"] .chain[data-active="1"] .cell[data-flow="1"] .connector::after { width: 4px; height: 12px; margin-left: -2px; border-radius: 2px; /* head (bottom, travel direction) white-hot, tail fading up */ background: linear-gradient(180deg, rgba(184, 255, 217, 0) 0%, var(--c-pulse) 60%, #ffffff 100%); box-shadow: 0 0 10px 2px var(--c-glow-accent), 0 0 26px 8px rgba(51, 255, 153, 0.25); } /* same-name redefinition (wins over cockpit.css): end offset matches the 12px-tall packet so the head kisses the node edge, never overshoots */ @keyframes pulse-travel { 0% { top: -6px; opacity: 0; } 2% { opacity: 1; } 11% { top: calc(100% - 12px); opacity: 1; } 13% { top: calc(100% - 12px); opacity: 0; } 100% { top: calc(100% - 12px); opacity: 0; } } /* ===================== stall + failure states ============================ */ /* stalled = alert-amber breathe, hotter than spine */ @keyframes glow-amber { from { box-shadow: 0 0 6px 0 var(--c-glow-amber), inset 0 0 10px rgba(255, 176, 0, 0.08); } to { box-shadow: 0 0 22px 5px var(--c-glow-amber), inset 0 0 14px rgba(255, 176, 0, 0.16); } } @keyframes glow-red { from { box-shadow: 0 0 6px 0 var(--c-glow-red), inset 0 0 10px rgba(255, 59, 48, 0.08); } to { box-shadow: 0 0 22px 5px var(--c-glow-red), inset 0 0 14px rgba(255, 59, 48, 0.16); } } /* motif badges become square warning lamps */ [data-theme="mission"] [data-motif="shaking-lock"] .motif-icon, [data-theme="mission"] [data-motif="flame"] .motif-icon { background: #1c0503; box-shadow: 0 0 10px var(--c-glow-red); } [data-theme="mission"] [data-motif="stalled-gears"] .motif-icon, [data-theme="mission"] [data-motif="sad-robot"] .motif-icon { background: #1f1402; box-shadow: 0 0 10px var(--c-glow-amber); } /* shaking lock: hard high-contrast strobe layered onto the rattle */ @keyframes motif-shake { 0%, 22%, 46%, 100% { transform: none; filter: none; } 24% { transform: translateX(-2px) rotate(-10deg); filter: brightness(2.4); } 28% { transform: translateX(2px) rotate(10deg); filter: brightness(0.7); } 32% { transform: translateX(-2px) rotate(-8deg); filter: brightness(2.4); } 36% { transform: translateX(2px) rotate(8deg); filter: brightness(0.7); } 40% { transform: translateX(-1px) rotate(-4deg); filter: brightness(2); } 44% { transform: none; filter: none; } } /* gate node carrying a LIVE lock gets a klaxon border flash (hard steps) */ [data-theme="mission"] .node[data-motif="shaking-lock"]:not(.placeholder) { border-color: var(--c-red); animation: mission-klaxon var(--d-shake) steps(2, end) infinite; } @keyframes mission-klaxon { 0%, 100% { box-shadow: 0 0 4px 0 var(--c-glow-red); background: var(--c-node-bg); } 50% { box-shadow: 0 0 18px 4px var(--c-glow-red); background: #2a0a06; } } /* mirror the base distress suppression for the theme-added node animation */ [data-theme="mission"] body[data-distress="1"] .node[data-motif] { animation: none !important; } /* flame flicker: brighter, harder steps */ @keyframes motif-flame { 0% { transform: scale(1); filter: brightness(1); } 33% { transform: scale(1.22) rotate(-3deg); filter: brightness(1.8); } 66% { transform: scale(0.88) rotate(3deg); filter: brightness(0.9); } 100% { transform: scale(1); filter: brightness(1); } } /* drift tide: amber hazard chevrons */ [data-theme="mission"] .tide-strip { border-radius: 0; background: repeating-linear-gradient(115deg, var(--c-amber) 0 14px, #271a02 14px 28px); box-shadow: 0 0 12px rgba(255, 176, 0, 0.35); opacity: 0.8; } /* ===================== SYSTEM DISTRESS: full-width alert strip =========== */ [data-theme="mission"] .banner { position: relative; overflow: hidden; } [data-theme="mission"] .banner[data-level="warn"] { text-shadow: 0 0 8px var(--c-glow-amber); } [data-theme="mission"] .banner[data-level="distress"] { /* full-bleed red klaxon strip (escapes the centered .app column) */ width: 100vw; margin-left: calc(50% - 50vw); border-left: none; border-right: none; border-radius: 0; padding: 11px 14px; font-size: 0.86rem; letter-spacing: 0.34em; color: #ffd9d6; text-shadow: 0 0 10px var(--c-glow-red); background: linear-gradient(180deg, rgba(255, 59, 48, 0.24), rgba(110, 7, 4, 0.34)); } /* sweeping searchlight highlight across the strip */ [data-theme="mission"] .banner[data-level="distress"]::after { content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 38%; background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.22) 50%, transparent 100%); animation: mission-sweep calc(var(--d-distress) * 2) var(--e-linear) infinite; } @keyframes mission-sweep { from { left: -45%; } to { left: 105%; } } /* hard high-contrast coordinated pulse (same-name redefinition) */ @keyframes distress-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--c-glow-red); filter: brightness(1); } 50% { box-shadow: 0 0 34px 6px var(--c-glow-red); filter: brightness(1.4); } } /* ===================== look-switcher (theme-page chrome only) ============ */ [data-theme="mission"] .look-switcher { position: fixed; right: 10px; bottom: 46px; /* clear of the telemetry ticker */ z-index: 30; /* above drill panel; CRT overlays wash over it too */ display: flex; align-items: baseline; gap: 8px; padding: 7px 11px; background: rgba(4, 12, 8, 0.94); border: 1px solid var(--c-line-strong); box-shadow: 0 0 14px rgba(51, 255, 153, 0.16); font-family: var(--font); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; } [data-theme="mission"] .look-switcher .ls-label { color: var(--c-faint); font-weight: 700; } [data-theme="mission"] .look-switcher .ls-sep { color: var(--c-faint); } [data-theme="mission"] .look-switcher a { color: var(--c-accent); text-decoration: none; padding: 2px 5px; } [data-theme="mission"] .look-switcher a small { color: var(--c-faint); font-size: 0.82em; text-transform: none; } [data-theme="mission"] .look-switcher a[data-state="warn"] { color: var(--c-amber); } [data-theme="mission"] .look-switcher a[data-state="fail"] { color: var(--c-red); } [data-theme="mission"] .look-switcher a:hover { background: rgba(51, 255, 153, 0.12); } [data-theme="mission"] .look-switcher a[aria-current="true"] { background: var(--c-accent); color: var(--c-on-accent); } [data-theme="mission"] .look-switcher a[aria-current="true"] small { color: var(--c-on-accent); } [data-theme="mission"] .look-switcher a[data-state="warn"][aria-current="true"] { background: var(--c-amber); color: #1f1402; } [data-theme="mission"] .look-switcher a[data-state="fail"][aria-current="true"] { background: var(--c-red); color: #fff; } /* ===================== accessibility ===================================== */ /* cockpit.css already zeroes every animation under prefers-reduced-motion via !important; explicitly kill the theme-added strobes/sweep as well. */ @media (prefers-reduced-motion: reduce) { [data-theme="mission"] .banner[data-level="distress"]::after { animation: none; display: none; } [data-theme="mission"] .node[data-motif] { animation: none !important; } [data-theme="mission"] body::before { background: none; } }