/* ============================================================ M/Y Netto II — DISPLAY MODES (Night ⇄ Red Watch) Activated by `[data-display="night"]` / `[data-display="red"]` on . This is a SEPARATE axis from the interface theme (data-theme=jarvis): a device-local "lighting mode" that re-tints the whole portal for after-dark use. Day = attribute absent, this file is dormant. Loaded AFTER theme-jarvis.css on purpose, so when both a HUD theme and a display mode are active the display mode wins (equal specificity → source order decides). - Night : a true low-light dark scheme (macOS-at-night feel). The chrome dims down; photos/logos still read. - Red : monochrome red-on-black for bridge watchkeeping — preserves night vision. No white/blue/green light; media is dimmed + pushed to red. ============================================================ */ /* ============================================================ 1. NIGHT MODE — token overrides Re-map the brand tokens so every component that reads them (cards use var(--cream), text uses var(--ink), etc.) inherits the dark palette automatically. Gradient tokens are built from the navy-* scale via var(), so remapping the scale updates --grad-chrome / --grad-button / --grad-canvas for free. ============================================================ */ html[data-display="night"] { --navy-950: #070b11; --navy-900: #0f1620; /* page base */ --navy-800: #1b2531; /* primary chrome (header, drawer) */ --navy-700: #26323f; /* hover / active */ --navy-600: #324151; --navy-500: #6f8597; /* links / hairline highlight — lifted to read on dark */ --navy-100: #28333f; /* soft-tint background / hairline border — dark */ --navy-50: #18212c; --red-500: #e7626f; /* brand red, softened so it isn't glaring at night */ --red-600: #c8505d; --red-700: #9f3f4a; --red-100: #2a1418; --cream: #18212c; /* card / panel surface */ --cream-dark: #1f2a37; /* raised surface */ --ink: #d6dee7; /* primary text */ --ink-soft: #97a3b1; --ink-muted: #677483; --line: rgba(255, 255, 255, 0.10); /* v2.32 — flip the split surface/text tokens. Large fills go dark; the navy-as-text colours flip light so nothing reads dark-on-dark. The navy *scale* above stays dark so chrome / buttons / badges (white text on them) keep working. */ --surface: #18212c; /* was #fff — card / panel / input fill */ --surface-2: #10161e; /* was #fafbfc — sunken fills, table headers */ --ink-strong: #dbe3eb; /* was the navy-900 text colour */ --ink-medium: #aab8c4; /* was the navy-800 text colour */ --ink-link: #7cb8e6; /* was the navy-700 text colour */ --danger: #f1707a; --warn: #e0a85a; --success: #5fb98a; /* Light-tinted overlays so hovers / dividers / subtle fills show up on the dark canvas instead of vanishing dark-on-dark. */ --navy-overlay-04: rgba(255, 255, 255, 0.04); --navy-overlay-06: rgba(255, 255, 255, 0.06); --navy-overlay-08: rgba(255, 255, 255, 0.08); --navy-overlay-12: rgba(255, 255, 255, 0.12); --navy-overlay-18: rgba(255, 255, 255, 0.18); --navy-overlay-24: rgba(255, 255, 255, 0.24); --hairline: rgba(255, 255, 255, 0.08); --hairline-strong: rgba(255, 255, 255, 0.14); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6); --shadow-card: 0 0 0 1px var(--hairline), 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-card-hover: 0 0 0 1px var(--hairline-strong), 0 2px 6px rgba(0, 0, 0, 0.45); --shadow-pop: 0 8px 24px -8px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--hairline); --shadow-modal: 0 24px 48px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--hairline); color-scheme: dark; } /* ============================================================ 2. RED WATCH MODE — token overrides Monochrome red on near-black. Semantic colours (danger/warn/ success) are all shades of red — they lose hue distinction, which is the deliberate trade for keeping the whole screen off the blue/green end of the spectrum so it doesn't kill the watchkeeper's dark adaptation. ============================================================ */ html[data-display="red"] { --navy-950: #050000; --navy-900: #0a0202; /* page base */ --navy-800: #170404; /* primary chrome */ --navy-700: #220606; --navy-600: #2e0808; --navy-500: #ff5a5a; /* links / accents */ --navy-100: #240505; /* soft-tint background / hairline border — dark red */ --navy-50: #140303; --red-500: #ff4646; --red-600: #d23030; --red-700: #a02323; --red-100: #2a0707; --cream: #140303; /* card / panel surface — near-black red */ --cream-dark: #1c0505; /* raised surface */ --ink: #ff5a5a; /* primary text */ --ink-soft: #cc4545; --ink-muted: #9c3636; --line: rgba(255, 70, 70, 0.26); /* v2.32 — split surface/text tokens (see Night block). The multiply overlay forces red anyway, but darkening the fills keeps the base dim so the overlay doesn't have to fight bright-white panels. */ --surface: #140303; --surface-2: #0d0202; --ink-strong: #ff6a6a; --ink-medium: #d05151; --ink-link: #ff7a7a; --danger: #ff6b6b; --warn: #e06a5a; --success: #ff8f8f; --navy-overlay-04: rgba(255, 60, 60, 0.05); --navy-overlay-06: rgba(255, 60, 60, 0.07); --navy-overlay-08: rgba(255, 60, 60, 0.10); --navy-overlay-12: rgba(255, 60, 60, 0.14); --navy-overlay-18: rgba(255, 60, 60, 0.20); --navy-overlay-24: rgba(255, 60, 60, 0.26); --hairline: rgba(255, 60, 60, 0.14); --hairline-strong: rgba(255, 60, 60, 0.24); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.7); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.8); --shadow-card: 0 0 0 1px var(--hairline), 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-card-hover: 0 0 0 1px var(--hairline-strong), 0 2px 6px rgba(0, 0, 0, 0.6); --shadow-pop: 0 8px 24px -8px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--hairline); --shadow-modal: 0 24px 48px -12px rgba(0, 0, 0, 0.85), 0 0 0 1px var(--hairline); color-scheme: dark; } /* ============================================================ 3. Page chrome — repaint the fixed body canvas The light dolphin-blue gradient lives as literal colours on html/body (not tokens), so it has to be overridden directly. !important + later source order also lets this win over the Jarvis HUD grid when a display mode is layered on top. ============================================================ */ html[data-display="night"], html[data-display="night"] body { background-color: #0b1118 !important; background-image: radial-gradient(ellipse at 50% -10%, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 55%), linear-gradient(180deg, #0f1620 0%, #0b1118 60%, #080d14 100%) !important; background-attachment: fixed !important; color: var(--ink); } html[data-display="red"], html[data-display="red"] body { background-color: #070101 !important; background-image: radial-gradient(ellipse at 50% -10%, rgba(255, 50, 50, 0.06), rgba(255, 50, 50, 0) 55%), linear-gradient(180deg, #0a0202 0%, #070101 60%, #050000 100%) !important; background-attachment: fixed !important; color: var(--ink); } /* Fill the iOS home-indicator safe area (mirrors the html bg rule in style.css that paints the sea colour there). */ html[data-display="night"] { background-color: #080d14 !important; } html[data-display="red"] { background-color: #050000 !important; } /* When a display mode is layered over the Jarvis HUD, kill the cyan grid + vignette so no off-spectrum light leaks through. */ html[data-theme="jarvis"][data-display="night"] body, html[data-theme="jarvis"][data-display="red"] body { background-image: radial-gradient(ellipse at 50% -10%, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 55%), linear-gradient(180deg, #0f1620 0%, #0b1118 100%) !important; } html[data-theme="jarvis"][data-display="red"] body { background-image: radial-gradient(ellipse at 50% -10%, rgba(255, 50, 50, 0.05), rgba(255, 50, 50, 0) 55%), linear-gradient(180deg, #0a0202 0%, #070101 100%) !important; } /* ============================================================ 4. Public sign-in shell — so the login screen (used on the bridge kiosk before sign-in) honours the display mode too. Higher specificity than the time-of-day `.public-shell.is-night` helper, so it wins cleanly. ============================================================ */ html[data-display="night"] .public-shell { background: linear-gradient(180deg, #0f1620 0%, #0b1118 100%) !important; color: var(--ink); } html[data-display="red"] .public-shell { background: linear-gradient(180deg, #0a0202 0%, #070101 100%) !important; color: var(--ink); } html[data-display="night"] .public-card, html[data-display="red"] .public-card { background: var(--cream) !important; border: 1px solid var(--line) !important; box-shadow: var(--shadow-modal) !important; color: var(--ink); backdrop-filter: none; } html[data-display="night"] .public-card h1, html[data-display="night"] .public-card h2, html[data-display="night"] .public-brand, html[data-display="red"] .public-card h1, html[data-display="red"] .public-card h2, html[data-display="red"] .public-brand { color: var(--ink); } /* ============================================================ 5. Native form controls — keep inputs legible on dark. color-scheme:dark (set above) handles browser-native chrome; these rules cover the app's own styled fields. ============================================================ */ html[data-display="night"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html[data-display="night"] select, html[data-display="night"] textarea, html[data-display="red"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html[data-display="red"] select, html[data-display="red"] textarea { background: var(--cream-dark); color: var(--ink); border-color: var(--line); } html[data-display="night"] input::placeholder, html[data-display="night"] textarea::placeholder, html[data-display="red"] input::placeholder, html[data-display="red"] textarea::placeholder { color: var(--ink-muted); } /* ============================================================ 6. Media — dim (and for red, push to monochrome red) so a bright photo can't flare a dark-adapted eye. .ic icons are inline SVG drawn with currentColor, so they recolour with the text and are left out of the filter. ============================================================ */ html[data-display="night"] img:not(.is-white):not([class*="ic"]), html[data-display="night"] video { filter: brightness(0.82) contrast(0.96); } html[data-display="red"] img:not(.is-white):not([class*="ic"]), html[data-display="red"] video, html[data-display="red"] canvas { filter: brightness(0.5) sepia(1) saturate(4) hue-rotate(-18deg) contrast(0.95); } /* Brand wordmark PNG is navy ink — recolour it for each mode so it reads on the dark canvas (mirrors the Jarvis treatment). */ html[data-display="night"] .brand-wordmark, html[data-display="night"] .header-wordmark, html[data-display="night"] .public-card img[src*="wordmark"] { filter: brightness(0) invert(1) opacity(0.9); } html[data-display="red"] .brand-wordmark, html[data-display="red"] .header-wordmark, html[data-display="red"] .public-card img[src*="wordmark"] { filter: brightness(0) invert(42%) sepia(94%) saturate(2200%) hue-rotate(-12deg); } /* ============================================================ 7. Red watch — night-vision enforcement overlay The token remap above re-tints everything that reads the brand tokens, but bespoke screens (the watch board, HUD shells, charts) carry hardcoded blues / greens / yellows / white text that would leak off-spectrum light and spoil a watchkeeper's dark adaptation. A full-viewport multiply layer forces the WHOLE composited image to shades of red regardless of source colour: white → red, every hue → red-by-luminance, black stays black. pointer-events:none so it never intercepts taps; sits above app chrome but below nothing that matters for input. Night mode deliberately skips this — it's a dimmed dark theme, not a monochrome one, so accent colours stay. ============================================================ */ html[data-display="red"]::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2147483000; background: #e60000; mix-blend-mode: multiply; } @media print { html[data-display="red"]::after { display: none; } } /* ============================================================ 8. Targeted chrome overrides A handful of prominent surfaces hardcode opaque light colours instead of reading the tokens, so the surface/text token split can't reach them. Override them explicitly. (Translucent rgba tints like .home-nudge self-correct on the dark canvas and are left alone.) ============================================================ */ /* Nav drawer — hardcoded mid-navy gradient (#4A7791→#284558) reads bright, so drop it to the dark chrome range. Its TEXT is coloured with var(--cream)/var(--ink) (light in Classic because the drawer is always a dark surface) — but Night flips those tokens dark, which made the labels vanish. Inside the drawer --cream/--ink are only ever text colours (verified — no drawer background reads them), so re-pin them light here to bring the labels back. */ html[data-display="night"] .nav-drawer-primary, html[data-display="night"] .nav-drawer-secondary { --cream: #e6edf3; --ink: #e6edf3; --ink-muted: #9fb0c0; } html[data-display="night"] .nav-drawer-primary { background: linear-gradient(180deg, #1b2531 0%, #131b24 70%, #0d141b 100%) !important; } html[data-display="night"] .nav-drawer-secondary { background: #131b24 !important; } html[data-display="red"] .nav-drawer-primary, html[data-display="red"] .nav-drawer-secondary { --cream: #ff8d8d; --ink: #ff8d8d; --ink-muted: #c46060; } html[data-display="red"] .nav-drawer-primary { background: linear-gradient(180deg, #170404 0%, #0b0101 100%) !important; } html[data-display="red"] .nav-drawer-secondary { background: #0b0101 !important; } /* MARSEC status pill is intentionally vivid (yellow / orange / red as security level). Dim the whole pill in Night so it doesn't glare — dimming fill + dark number together preserves their contrast. Red mode's overlay already neutralises it. */ html[data-display="night"] .marsec-pill { filter: brightness(0.6) saturate(0.9); }