/* ===================================================================================================== THEME: NIGHT OPS · WHITE PHOSPHOR (P45) (PREVIEW) assets/nightops/nightops.css Opt-in: only pages with change (on top of data-theme="neon"). Remove the attribute (or these two stylesheet links) to revert. remap.css (generated) moves every colour onto the P45 ramp at the same luminance; this file pins the exact palette and adds the image-intensifier optics. #05080A background · #2A3A3C lines · #6E8F8C mid (lines/marks only) · #9AFFF3 phosphor accent #E8FFFC peak text · #86ABA7 secondary text (8.0:1 on #05080A). No amber, no yellow. Optics: grain + scintillation, faint microchannel honeycomb, bloom on key figures and CTAs, tube vignette on the hero card, IR sweep on the hero. All are background layers or glow on the element itself: nothing is painted over text, the logo, the wordmark or the Marauder Mike camo. All of them are off under prefers-reduced-motion, the site's Motion toggle, reduced transparency, more contrast and forced colours. GPU cost: two tiny tiled images stepped 1.4 times a second, one transform-only sweep, and the existing neon-gl pass re-lit in phosphor. ===================================================================================================== */ html[data-theme][data-phosphor="p45"] { --p45-bg: #05080A; --p45-line: #2A3A3C; --p45-mid: #6E8F8C; --p45-accent: #9AFFF3; --p45-peak: #E8FFFC; --p45-2: #86ABA7; --p45-surface: #0B1315; --p45-surface-2: #111B1D; --p45-glow: rgb(154 255 243 / 0.42); --p45-glow-soft: rgb(154 255 243 / 0.16); --p45-on: 1; /* exact palette over the generated remap */ --ink-1: var(--p45-peak); --ink-2: #9AFFF3; --ink-3: var(--p45-2); --d-ink-2: #9AFFF3; --d-muted: var(--p45-2); --hairline: var(--p45-line); --brand-accent: var(--p45-accent); --brand-accent-start: var(--p45-accent); --brand-accent-end: var(--p45-accent); --brand-accent-on: var(--p45-bg); --brand-accent-tint: rgb(154 255 243 / 0.14); --brand-gradient: linear-gradient(var(--p45-accent), var(--p45-accent)); --money-ink: var(--p45-accent); --focus-ring: var(--p45-accent); --glow-accent: var(--p45-accent); --noir-0: var(--p45-bg); --noir-1: var(--p45-surface); --noir-2: var(--p45-surface-2); --d-page-inner: #05080A; --d-page-outer: var(--p45-bg); --d-page-off: var(--p45-bg); --d-card-top: var(--p45-surface-2); --d-card-bottom: var(--p45-surface); --d-card-flat: var(--p45-surface); --d-edge: var(--p45-accent); --d-rim: rgb(154 255 243 / 0.38); --d-glow: 0 0 12px rgb(154 255 243 / 0.14), 0 0 32px rgb(154 255 243 / 0.06); --d-guide-circle: var(--p45-line); --d-pill-off: var(--p45-surface); --d-pill-off-border: var(--p45-line); --neon-cyan: var(--p45-accent); --neon-ice: var(--p45-peak); --neon-line: rgb(154 255 243 / 0.55); --neon-faint: rgb(154 255 243 / 0.14); --neon-warm: var(--p45-peak); /* the old warm tick: no amber in Night Ops */ --neon-glow-a: rgb(154 255 243 / 0.36); --neon-glow-b: rgb(154 255 243 / 0.15); --deco-gold: var(--p45-accent); --deco-gold-hi: var(--p45-peak); --deco-gold-lo: var(--p45-mid); --deco-gold-deep: #111B1D; --deco-gold-line: rgb(154 255 243 / 0.38); --deco-gold-faint: rgb(154 255 243 / 0.15); --deco-sky-top: var(--p45-bg); --deco-sky-mid: var(--p45-surface); --deco-sky-low: var(--p45-line); --deco-window: var(--p45-peak); --deco-window-dim: var(--p45-mid); --glow-gold: rgb(154 255 243 / 0.38); --glow-window: var(--p45-peak); --nv-grain: url("/assets/nightops/grain.png"); --nv-scint: url("/assets/nightops/scint.png"); --nv-hex: url("/assets/nightops/hex.svg"); background: var(--nv-scint) 0 0 / 256px 256px fixed, var(--nv-grain) 0 0 / 128px 128px fixed, var(--nv-hex) 0 0 / 13.856px 24px fixed, radial-gradient(130% 80% at 50% 0%, rgb(154 255 243 / 0.05), transparent 62%) fixed, var(--p45-bg); animation: p45-intens 0.72s steps(1, end) infinite; } /* intensifier noise: the two noise layers jump to a new offset ~1.4 times a second (no tweening, so no per-frame work) */ @keyframes p45-intens { 0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; } 17% { background-position: -61px 23px, 37px -11px, 0 0, 0 0, 0 0; } 33% { background-position: 47px -71px, -23px 41px, 0 0, 0 0, 0 0; } 50% { background-position: -19px 88px, 59px 7px, 0 0, 0 0, 0 0; } 67% { background-position: 93px 11px, -45px -29px, 0 0, 0 0, 0 0; } 83% { background-position: -77px -39px, 13px 63px, 0 0, 0 0, 0 0; } } /* ---- hero: phosphor sky with honeycomb + grain behind the skyline, IR sweep -------------------------------- */ html[data-theme][data-phosphor="p45"] .hero__sky { background: var(--nv-grain) 0 0 / 128px 128px, var(--nv-hex) 0 0 / 13.856px 24px, radial-gradient(90% 40% at 50% 100%, rgb(154 255 243 / 0.16) 0%, rgb(42 58 60 / 0.3) 45%, transparent 75%), linear-gradient(180deg, var(--p45-bg) 0%, #05080A 45%, #111B1D 100%); } html[data-theme][data-phosphor="p45"] .hero__layers { overflow: hidden; } html[data-theme][data-phosphor="p45"] .hero__layers::before { /* IR illuminator sweep: one soft beam, transform only */ content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 45%; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 50% 95% at 50% 45%, rgb(154 255 243 / 0.085), rgb(154 255 243 / 0.03) 55%, rgb(154 255 243 / 0) 75%); transform: translateX(-100%); will-change: transform; animation: p45-ir 7s ease-in-out infinite alternate; } @keyframes p45-ir { from { transform: translateX(-100%); } to { transform: translateX(222%); } } /* ---- hero card: circular tube vignette + ring, honeycomb and grain under a solid phosphor-black face ------- */ html[data-theme][data-phosphor="p45"] .hero__example::before { background: radial-gradient(circle farthest-side at 50% 50%, rgb(154 255 243 / 0) 96%, rgb(154 255 243 / 0.14) 98.2%, rgb(154 255 243 / 0) 100%), radial-gradient(circle farthest-side at 50% 50%, rgb(5 8 10 / 0) 58%, rgb(5 8 10 / 0.5) 80%, rgb(2 3 4 / 0.94) 100%), var(--nv-grain) 0 0 / 128px 128px, var(--nv-hex) 0 0 / 13.856px 24px, linear-gradient(180deg, var(--p45-surface-2), var(--p45-surface)); } /* ---- bloom: key figures and CTAs (the glow belongs to the element; nothing covers text) -------------------- */ html[data-theme][data-phosphor="p45"] :is(.hero__example .fig, .led.price, .lobby-plan__line .fig, .ride__floor, .neon-gauge__fig, .floors__code, .hero h1) { text-shadow: 0 0 calc(6px * var(--p45-on)) var(--p45-glow), 0 0 calc(18px * var(--p45-on)) var(--p45-glow-soft); } html[data-theme][data-phosphor="p45"] .btn { box-shadow: 0 0 0 1px rgb(0 0 0 / 0.6), 0 0 0 2px var(--p45-accent), 0 3px 6px rgb(0 0 0 / 0.59), 0 0 calc(14px * var(--p45-on)) rgb(154 255 243 / 0.38), 0 0 calc(2px * var(--p45-on)) var(--p45-peak); } /* ---- our own SVG drawings re-lit in phosphor (photos, screenshots, the book cover, the logo and the camo are never matched) */ html[data-theme][data-phosphor="p45"] img[src^="/assets/art/"][src$=".svg"]:not(.skyline__layer), html[data-theme][data-phosphor="p45"] :is(.library-lectern__art img, .chandelier > img, .chandelier__glints img) { filter: grayscale(1) brightness(1.1) sepia(1) hue-rotate(126deg) saturate(1.7); } html[data-theme][data-phosphor="p45"] .skyline__layer { filter: brightness(0) drop-shadow(0 -1px 0 rgb(154 255 243 / 0.85)) drop-shadow(0 0 calc(6px * var(--p45-on)) rgb(154 255 243 / 0.45)); } /* ---- never touched: the $iMT logo, the wordmark and the Marauder Mike(TM) camo ------------------------------ No filter, blend, overlay or tint reaches them; the wordmark keeps its own colours. */ html[data-theme][data-phosphor="p45"] .brand { --ink-1: #FFFFFF; --brand-accent: #4ADECA; --brand-green: #83DD7A; } html[data-theme][data-phosphor="p45"] :is(.brand__logo, img[src*="/assets/img/logo"], .camo-frame, .camo-frame *, .camo-band, .camo-band *, img[src*="marauder"]) { filter: none !important; mix-blend-mode: normal !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; text-shadow: none; } html[data-theme][data-phosphor="p45"] :is(.camo-frame, .camo-band) { isolation: isolate; } /* ===================================================================================================== EFFECTS OFF, after everything so it always wins: flat #05080A, flat cards, no grain, honeycomb, bloom, vignette or sweep. The palette stays. ===================================================================================================== */ @media (prefers-reduced-motion: reduce), (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) { html[data-theme][data-phosphor="p45"] { --p45-on: 0; animation: none; background: var(--p45-bg); } html[data-theme][data-phosphor="p45"] .hero__layers::before { display: none; animation: none; } html[data-theme][data-phosphor="p45"] .hero__sky { background: linear-gradient(180deg, var(--p45-bg) 0%, #05080A 45%, #111B1D 100%); } html[data-theme][data-phosphor="p45"] .hero__example::before { background: var(--p45-surface); } html[data-theme][data-phosphor="p45"] :is(.hero__example .fig, .led.price, .lobby-plan__line .fig, .ride__floor, .neon-gauge__fig, .floors__code, .hero h1) { text-shadow: none; } html[data-theme][data-phosphor="p45"] .btn { box-shadow: 0 0 0 2px var(--p45-peak); } html[data-theme][data-phosphor="p45"] .skyline__layer { filter: brightness(0) drop-shadow(0 -1px 0 rgb(154 255 243 / 0.85)); } } html[data-theme][data-phosphor="p45"][data-motion="off"] { --p45-on: 0; animation: none; background: var(--p45-bg); } html[data-theme][data-phosphor="p45"][data-motion="off"] .hero__layers::before { display: none; animation: none; } html[data-theme][data-phosphor="p45"][data-motion="off"] .hero__sky { background: linear-gradient(180deg, var(--p45-bg) 0%, #05080A 45%, #111B1D 100%); } html[data-theme][data-phosphor="p45"][data-motion="off"] .hero__example::before { background: var(--p45-surface); } html[data-theme][data-phosphor="p45"][data-motion="off"] :is(.hero__example .fig, .led.price, .lobby-plan__line .fig, .ride__floor, .neon-gauge__fig, .floors__code, .hero h1) { text-shadow: none; } html[data-theme][data-phosphor="p45"][data-motion="off"] .btn { box-shadow: 0 0 0 2px var(--p45-peak); } html[data-theme][data-phosphor="p45"][data-motion="off"] .skyline__layer { filter: brightness(0) drop-shadow(0 -1px 0 rgb(154 255 243 / 0.85)); } /* ---- Exact app tokens pin (NightOpsTokens @1abd9dc6, site/hubA-plus-bah). Overrides the generated near-ramp values in remap.css for the shared roles. Accent stays rare; secondary marks use mid/ink2, not accent tints. ---- */ html[data-theme][data-phosphor="p45"]{ --p45-bg:#05080A;--p45-line:#2A3A3C;--p45-mid:#6E8F8C;--p45-accent:#9AFFF3;--p45-peak:#E8FFFC;--p45-2:#86ABA7; --p45-surface:#0B1315;--p45-surface-2:#111B1D; --surface-card:#0B1315;--surface-instrument:#05080A;--ink-1:#E8FFFC;--ink-2:#86ABA7;--ink-3:#86ABA7; --brand-accent:#9AFFF3;--brand-accent-start:#9AFFF3;--brand-accent-end:#9AFFF3;--brand-secondary:#86ABA7;--brand-violet:#86ABA7; --brand-green:#9AFFF3;--math-accent:#9AFFF3;--money-ink:#E8FFFC;--money-placeholder:#86ABA7; --status-pass:#E8FFFC;--status-warning:#E8FFFC;--led-chip:#0B1315;--led-positive:#9AFFF3;--focus-ring:#9AFFF3; --deco-gold:#86ABA7;--deco-gold-hi:#E8FFFC;--deco-gold-lo:#6E8F8C;--deco-gold-deep:#2A3A3C;--noir-0:#05080A;--noir-1:#0B1315;--noir-2:#111B1D; color-scheme:dark} @media (prefers-contrast: more){html[data-theme][data-phosphor="p45"]{--p45-bg:#000000;--p45-line:#6E8F8C;--p45-mid:#8FB3AF;--p45-accent:#B5FFF7; --p45-peak:#F2FFFD;--p45-2:#A9CCC8;--p45-surface:#05080A;--p45-surface-2:#0B1315;--surface-card:#05080A;--ink-1:#F2FFFD;--ink-2:#A9CCC8;--ink-3:#A9CCC8; --brand-accent:#B5FFF7;--focus-ring:#B5FFF7;--money-ink:#F2FFFD;--noir-0:#000000;--noir-1:#05080A;--noir-2:#0B1315}} /* Titles = app primaryText (#E8FFFC; IC #F2FFFD via --p45-peak); body and intro stay secondaryText. */ html[data-theme][data-phosphor="p45"] :is(h1, h2, .hero__title, .marquee) { color: var(--p45-peak); }