/* ============================================================
styles-theme-dark.css — extracted from styles.css (P2)
SCOPED TO body.theme-dark. Load AFTER styles.css on pages that
opt in:
Extracted: lines ~12886–14132 of styles.css (stage 1–15 themed rules).
Global .btn-ghost dark base remains in styles.css for all dark pages.
============================================================ */
DARK THEME — STAGE 1 (hero + section 02 "Field Operatives")
──────────────────────────────────────────────────────────────────────────
SCOPED TO body.theme-dark ON PURPOSE. styles.css is shared by 11 other
pages; scoping means none of them change until their opts in.
To roll a page in:
To roll it back out: remove the class. To kill the theme entirely,
delete everything below this banner.
Not yet themed (still light-styled, ~90 rules hardcode light backgrounds):
dachshund-unit, killcam spotlight, media deck, terminal, seasonal-ops,
recruit posters, store, war-room. Those need their own stages.
══════════════════════════════════════════════════════════════════════════ */
/* ─── 1. Tokens ─────────────────────────────────────────────────────────── */
body.theme-dark {
--bg-deep: #04070d;
--bg-panel: #0a1119;
--bg-card: #0d151f;
--bg-elevated: #111c28;
--border: #1a2b3d;
--border-bright: #2f5a7d;
--text: #cfdcea;
--text-dim: #90a6bd;
--text-muted: #62788f;
--text-bright: #e8f4ff;
--accent: #22d3ee;
--accent-dim: #0ea5c4;
--accent-deep: #0e7490;
--accent-gold: #f0b429;
--success: #34d399;
--info: #22d3ee;
--stamp-red: #e2483d;
--classified-red: #c62b23;
--btn-ink: #01151c;
--glow-cyan: rgba(34, 211, 238, 0.22);
--arcane: #a855f7; /* new: the wrong-physics accent */
--amber: #ffb000; /* new: Vault-Tec phosphor for archive-era kit */
}
/* ─── 2. Ground + atmosphere ────────────────────────────────────────────── */
/* the original body rule hardcodes a light linear-gradient, so the token
override alone is not enough — the gradient has to be replaced. */
body.theme-dark {
background-color: var(--bg-deep);
background-image:
radial-gradient(ellipse 90% 60% at 10% -10%, rgba(34, 211, 238, 0.10), transparent 55%),
radial-gradient(ellipse 70% 50% at 95% 8%, rgba(168, 85, 247, 0.07), transparent 50%),
radial-gradient(ellipse 80% 45% at 50% 100%, rgba(14, 116, 144, 0.12), transparent 55%),
linear-gradient(180deg, #060b13 0%, #04070d 45%, #02040a 100%);
}
body.theme-dark .scanlines {
background: repeating-linear-gradient(0deg,
transparent, transparent 3px,
rgba(120, 200, 235, 0.030) 3px, rgba(120, 200, 235, 0.030) 4px);
}
body.theme-dark .grid-overlay {
background-image:
linear-gradient(rgba(80, 180, 220, 0.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(80, 180, 220, 0.055) 1px, transparent 1px);
}
/* ─── 3. Chrome ─────────────────────────────────────────────────────────── */
body.theme-dark .site-header {
background: rgba(6, 11, 19, 0.86);
border-bottom-color: #1b3348;
box-shadow:
0 1px 0 rgba(120, 190, 220, 0.10),
0 10px 30px rgba(0, 0, 0, 0.6);
}
/* .section-dark hardcodes a white-ish gradient; replace, don't tint */
body.theme-dark .section-dark {
background: linear-gradient(180deg, rgba(12, 20, 30, 0.72), rgba(5, 9, 15, 0.86));
border-top-color: #16273a;
border-bottom-color: #16273a;
box-shadow: inset 0 1px 0 rgba(120, 190, 220, 0.07);
}
body.theme-dark .section-label { text-shadow: 0 0 12px rgba(34, 211, 238, 0.40); }
body.theme-dark h2 { color: var(--text-bright); }
/* ─── 4. HERO ───────────────────────────────────────────────────────────── */
body.theme-dark .hero-tag { text-shadow: 0 0 14px rgba(34, 211, 238, 0.45); }
/* Stark holotype. Endpoints matched bright cyan so the looping sweep has no
seam; gold is a narrow accent, not the dominant colour. */
body.theme-dark .hero-acronym {
background-image: linear-gradient(100deg,
#22d3ee 0%, #67e8f9 13%, #cffafe 27%,
#ffffff 39%, #fff6dd 49%,
#f0b429 60%, #e0a02e 69%,
#7dd8e8 84%, #22d3ee 100%);
background-size: 200% 100%;
filter:
drop-shadow(0 0 20px rgba(34, 211, 238, 0.42))
drop-shadow(0 0 58px rgba(34, 211, 238, 0.15))
drop-shadow(0 0 90px rgba(240, 180, 41, 0.10));
animation: jam-sheen 11s linear infinite;
}
@keyframes jam-sheen {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
body.theme-dark .hero-motto {
color: #b9cbe0;
border-left-color: var(--arcane);
background: linear-gradient(90deg, rgba(168, 85, 247, 0.14), transparent 72%);
box-shadow: -3px 0 18px -4px rgba(168, 85, 247, 0.55);
position: relative;
}
/* ward ticks — deliberately off-beat timing so the glow behaves slightly wrong */
body.theme-dark .hero-motto::before {
content: ""; position: absolute; left: -3px; top: 0; bottom: 0; width: 3px;
background: repeating-linear-gradient(180deg,
transparent 0 4px, rgba(232, 213, 255, 0.95) 4px 7px, transparent 7px 13px);
animation: jam-ward 3.7s ease-in-out infinite;
}
@keyframes jam-ward {
0%, 100% { opacity: 0.25; } 37% { opacity: 0.9; } 61% { opacity: 0.4; }
}
body.theme-dark .hero-status { text-shadow: 0 0 12px rgba(52, 211, 153, 0.4); }
body.theme-dark .status-dot { box-shadow: 0 0 10px 2px rgba(52, 211, 153, 0.8); }
/* Emblem: the plate is cut out of the new asset, so this glow is ours and
also compensates for the contrast the old opaque plate used to supply. */
body.theme-dark .hero-emblem {
filter:
drop-shadow(0 0 18px rgba(34, 211, 238, 0.45))
drop-shadow(0 0 55px rgba(34, 211, 238, 0.20))
brightness(1.12) contrast(1.06) saturate(1.12);
}
body.theme-dark .hero-emblem-glow {
background:
radial-gradient(circle at 50% 46%, rgba(34, 211, 238, 0.42) 0%, transparent 62%),
radial-gradient(circle at 50% 50%, rgba(120, 190, 230, 0.10) 0%, transparent 78%);
}
/* counter-rotating sigil rings */
body.theme-dark .hero-emblem-wrap::before,
body.theme-dark .hero-emblem-wrap::after {
content: ""; position: absolute; border-radius: 50%;
pointer-events: none; z-index: 0;
}
body.theme-dark .hero-emblem-wrap::before {
inset: -7%;
border: 1px solid rgba(34, 211, 238, 0.30);
border-top-color: rgba(240, 180, 41, 0.75);
border-bottom-color: transparent;
animation: jam-spin 26s linear infinite;
}
body.theme-dark .hero-emblem-wrap::after {
inset: -14%;
border: 1px dashed rgba(168, 85, 247, 0.34);
animation: jam-spin 41s linear infinite reverse;
}
@keyframes jam-spin { to { transform: rotate(360deg); } }
body.theme-dark .hero-panel {
background: linear-gradient(160deg, #0c141d 0%, #070d15 100%);
border-color: #24425e;
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(120, 190, 220, 0.10);
position: relative;
}
/* corner brackets — archive-era "real equipment" tell */
body.theme-dark .hero-panel::before,
body.theme-dark .hero-panel::after {
content: ""; position: absolute; width: 13px; height: 13px;
border-color: var(--amber); pointer-events: none;
}
body.theme-dark .hero-panel::before {
top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid;
}
body.theme-dark .hero-panel::after {
bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid;
}
body.theme-dark .panel-header {
color: var(--amber);
border-bottom-color: rgba(255, 176, 0, 0.28);
text-shadow: 0 0 12px rgba(255, 176, 0, 0.5);
}
body.theme-dark .codename { text-shadow: 0 0 10px rgba(34, 211, 238, 0.35); }
body.theme-dark .status.active {
background: rgba(52, 211, 153, 0.10);
box-shadow: 0 0 12px rgba(52, 211, 153, 0.22);
}
body.theme-dark .stamp {
text-shadow: 0 0 12px rgba(226, 72, 61, 0.45);
box-shadow: 0 0 18px rgba(226, 72, 61, 0.18);
}
/* ─── 5. Buttons — machined keys, not painted rectangles ───────────────── */
body.theme-dark .btn,
body.theme-dark a.btn,
body.theme-dark button.btn {
clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
/* the small variants keep square corners — the chamfer reads as noise at that size */
body.theme-dark .btn-small { clip-path: none; }
body.theme-dark .btn-primary,
body.theme-dark a.btn-primary {
background: linear-gradient(178deg, #7ce8f8 0%, #22d3ee 34%, #0fa3c4 72%, #0b7f9c 100%);
color: #01151c; border-color: #a5f3fc;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
box-shadow:
0 0 30px rgba(34, 211, 238, 0.38),
0 6px 18px rgba(0, 0, 0, 0.55),
inset 0 2px 0 rgba(255, 255, 255, 0.7),
inset 0 -2px 0 rgba(0, 40, 55, 0.55);
}
body.theme-dark .btn-primary:hover,
body.theme-dark a.btn-primary:hover {
background: linear-gradient(178deg, #a5f3fc 0%, #3ce0f5 34%, #12b6da 72%, #0d8fb0 100%);
box-shadow:
0 0 46px rgba(34, 211, 238, 0.62),
0 8px 22px rgba(0, 0, 0, 0.6),
inset 0 2px 0 rgba(255, 255, 255, 0.85),
inset 0 -2px 0 rgba(0, 40, 55, 0.5);
transform: translateY(-2px);
}
body.theme-dark .btn-primary:active { transform: translateY(0); }
body.theme-dark .btn-ghost,
body.theme-dark a.btn-ghost,
body.theme-dark button.btn-ghost {
background: linear-gradient(178deg, rgba(38, 72, 98, 0.55) 0%, rgba(12, 26, 40, 0.75) 100%);
color: #7dd8e8; border-color: #3a6d92;
box-shadow:
inset 0 1px 0 rgba(150, 215, 240, 0.28),
inset 0 0 26px rgba(34, 211, 238, 0.10),
0 5px 16px rgba(0, 0, 0, 0.45);
}
body.theme-dark .btn-ghost:hover,
body.theme-dark a.btn-ghost:hover,
body.theme-dark button.btn-ghost:hover {
border-color: var(--accent); color: #c9f7ff;
box-shadow:
inset 0 1px 0 rgba(180, 235, 255, 0.4),
inset 0 0 34px rgba(34, 211, 238, 0.22),
0 0 24px rgba(34, 211, 238, 0.28),
0 5px 16px rgba(0, 0, 0, 0.45);
transform: translateY(-2px);
}
body.theme-dark .btn-ghost:active { transform: translateY(0); }
/* ─── 6. SECTION 02 — the two-era contrast ─────────────────────────────── */
/* 6a. Vault-Tec register: recovered archive sheet, amber phosphor CRT */
body.theme-dark .pub-conspiracy-sheet {
position: relative;
border-color: #3a2f18;
background:
repeating-linear-gradient(0deg,
rgba(0, 0, 0, 0.22) 0px, rgba(0, 0, 0, 0.22) 2px,
transparent 2px, transparent 5px),
radial-gradient(ellipse 90% 70% at 50% 0%, rgba(255, 176, 0, 0.07), transparent 70%),
#0e0b06;
box-shadow:
inset 0 0 60px rgba(255, 176, 0, 0.06),
0 18px 40px rgba(0, 0, 0, 0.6);
}
body.theme-dark .pub-conspiracy-sheet::before,
body.theme-dark .pub-conspiracy-sheet::after {
content: ""; position: absolute; width: 14px; height: 14px;
border-color: var(--amber); pointer-events: none;
}
body.theme-dark .pub-conspiracy-sheet::before {
top: -2px; left: -2px; border-top: 2px solid; border-left: 2px solid;
}
body.theme-dark .pub-conspiracy-sheet::after {
bottom: -2px; right: -2px; border-bottom: 2px solid; border-right: 2px solid;
}
body.theme-dark .pub-conspiracy-stamp {
color: var(--amber); text-shadow: 0 0 12px rgba(255, 176, 0, 0.45);
}
body.theme-dark .pub-conspiracy-line { color: #d8c9a8; }
/* warded redaction: a sheen crosses the bar, implying active suppression */
body.theme-dark .pub-bars {
background: #060606;
box-shadow: inset 0 0 0 1px #2b2118, 0 0 10px rgba(168, 85, 247, 0.12);
}
body.theme-dark .pub-bars::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(105deg, transparent 40%,
rgba(196, 150, 255, 0.5) 49%, rgba(232, 213, 255, 0.75) 51%,
rgba(196, 150, 255, 0.5) 53%, transparent 62%);
transform: translateX(-160%);
animation: jam-ward-sweep 7.3s ease-in-out infinite;
}
/* stagger so the bars never flash in unison */
body.theme-dark .pub-conspiracy-line:nth-child(3) .pub-bars::after { animation-delay: 1.9s; }
body.theme-dark .pub-conspiracy-line:nth-child(4) .pub-bars::after { animation-delay: 3.4s; }
@keyframes jam-ward-sweep {
0%, 62% { transform: translateX(-160%); }
78% { transform: translateX(160%); }
100% { transform: translateX(160%); }
}
body.theme-dark .redact {
background: #05070a;
box-shadow: inset 0 0 0 1px #243347, 0 0 8px rgba(168, 85, 247, 0.14);
}
/* 6b. Stark register: live dossier instruments, one generation newer */
body.theme-dark .dossier {
position: relative;
background: linear-gradient(165deg, rgba(18, 32, 46, 0.95) 0%, rgba(8, 14, 22, 0.98) 100%);
border-color: #22415c;
clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
box-shadow: 0 20px 46px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(120, 190, 220, 0.12);
}
body.theme-dark .dossier::before {
content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px;
background: linear-gradient(90deg, var(--accent), transparent 70%);
opacity: 0.8;
}
body.theme-dark .dossier-stamp {
opacity: 0.85; text-shadow: 0 0 10px rgba(226, 72, 61, 0.5);
}
body.theme-dark .dossier-id { color: var(--accent-dim); }
body.theme-dark .dossier h3 {
color: #eaf6ff; text-shadow: 0 0 18px rgba(34, 211, 238, 0.28);
}
body.theme-dark .dossier-stats dt { color: var(--accent-dim); }
body.theme-dark .dossier-quote {
border-left-color: var(--accent);
background: linear-gradient(90deg, rgba(34, 211, 238, 0.07), transparent 72%);
}
body.theme-dark .photo-classified {
background:
repeating-linear-gradient(135deg,
rgba(34, 211, 238, 0.04) 0 10px, transparent 10px 20px),
#060c14;
border-color: #2b4d6b;
}
body.theme-dark .photo-classified:hover {
border-color: var(--accent);
box-shadow: inset 0 0 40px rgba(34, 211, 238, 0.12);
}
body.theme-dark .photo-classified-label { text-shadow: 0 0 16px rgba(226, 72, 61, 0.5); }
/* ══════════════════════════════════════════════════════════════════════════
BUG FIXES — intentionally NOT scoped to .theme-dark. These are real
defects in the light theme too, and they benefit every page.
══════════════════════════════════════════════════════════════════════════ */
/* (a) `1fr` cannot shrink below its content's min-content width, and the H1
does not break — so the wordmark wedged the track open and forced 140px of
horizontal overflow between ~720 and ~1000px. */
.hero { grid-template-columns: minmax(0, 1fr) 320px; }
.hero-content { min-width: 0; }
.hero-acronym {
font-size: clamp(1.75rem, 5vw, 4.5rem);
overflow-wrap: anywhere;
}
/* (b) .status had grid-row but no grid-column, so it auto-placed into
column 1 and pushed the codename to the right. */
.personnel-list li .status { grid-column: 2; justify-self: end; }
/* (c) An inline box ignores overflow, so ::after decoration on the redaction
bars escaped and painted stray marks across the sheet. */
.pub-bars { display: inline-block; position: relative; overflow: hidden; }
/* (d) Responsive last: media queries add no specificity, so a later base rule
silently beats them. Everything below must stay at the end of the file. */
@media (max-width: 1000px) {
.hero { grid-template-columns: 1fr; }
.hero-right { flex-direction: row; align-items: flex-start; gap: 1.5rem; }
.hero-emblem-wrap { width: min(200px, 38vw); order: 2; }
.hero-panel { flex: 1 1 auto; min-width: 0; }
}
@media (max-width: 620px) {
.hero-right { flex-direction: column; }
.hero-emblem-wrap { order: -1; width: min(230px, 62vw); margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
.hero-acronym,
.hero-motto::before,
.hero-emblem-wrap::before,
.hero-emblem-wrap::after,
.pub-bars::after { animation: none !important; }
}
/* ══════════════════════════════════════════════════════════════════════════
DARK THEME — BUTTON CONTRAST OVERRIDES
──────────────────────────────────────────────────────────────────────────
The base sheet guards button colours with !important:
.btn-ghost { background:#ffffff !important; color:var(--text-bright)
!important; -webkit-text-fill-color:var(--text-bright); }
The comment there reads "White fill so they never vanish" — written for the
light theme, where --text-bright is near-black. Under the dark tokens
--text-bright becomes #e8f4ff, so that guard produced white-on-white:
invisible labels. Because those declarations are !important, ordinary
overrides lose, so these have to match with !important too.
-webkit-text-fill-color must be overridden as well — it beats `color`
in WebKit/Blink and would keep the label the wrong shade.
══════════════════════════════════════════════════════════════════════════ */
body.theme-dark .btn-primary,
body.theme-dark a.btn-primary,
body.theme-dark button.btn-primary,
body.theme-dark input.btn-primary {
background: linear-gradient(178deg, #7ce8f8 0%, #22d3ee 34%, #0fa3c4 72%, #0b7f9c 100%) !important;
color: #01151c !important;
-webkit-text-fill-color: #01151c !important;
border-color: #a5f3fc !important;
}
body.theme-dark .btn-primary:hover,
body.theme-dark a.btn-primary:hover,
body.theme-dark button.btn-primary:hover,
body.theme-dark .btn-primary:focus-visible,
body.theme-dark a.btn-primary:focus-visible,
body.theme-dark button.btn-primary:focus-visible,
body.theme-dark .btn-primary:active,
body.theme-dark a.btn-primary:active {
background: linear-gradient(178deg, #a5f3fc 0%, #3ce0f5 34%, #12b6da 72%, #0d8fb0 100%) !important;
color: #01151c !important;
-webkit-text-fill-color: #01151c !important;
border-color: #cffafe !important;
}
body.theme-dark .btn-ghost,
body.theme-dark a.btn-ghost,
body.theme-dark button.btn-ghost {
background: linear-gradient(178deg, rgba(38, 72, 98, 0.55) 0%, rgba(12, 26, 40, 0.75) 100%) !important;
color: #9fe4f2 !important;
-webkit-text-fill-color: #9fe4f2 !important;
border-color: #3a6d92 !important;
}
body.theme-dark .btn-ghost:hover,
body.theme-dark a.btn-ghost:hover,
body.theme-dark button.btn-ghost:hover,
body.theme-dark .btn-ghost:focus-visible,
body.theme-dark a.btn-ghost:focus-visible,
body.theme-dark button.btn-ghost:focus-visible {
color: #d6faff !important;
-webkit-text-fill-color: #d6faff !important;
border-color: var(--accent) !important;
}
/* The killcam CTA carries its own violet-on-white treatment; re-point it at
the arcane accent so it stays a deliberate outlier rather than a light
rectangle in a dark bay. */
body.theme-dark .kc-spot-cta-arena,
body.theme-dark a.kc-spot-cta-arena,
body.theme-dark a.kc-spot-cta-arena:hover {
background: linear-gradient(178deg, rgba(139, 92, 246, 0.9) 0%, rgba(76, 29, 149, 0.95) 100%) !important;
color: #f5eeff !important;
-webkit-text-fill-color: #f5eeff !important;
border-color: #a78bfa !important;
}
/* Segmented / tab "active" pills read as light chips on dark. */
body.theme-dark .clearance-seg.active,
body.theme-dark .ops-filter.is-active,
body.theme-dark .media-deck-tab.is-active,
body.theme-dark .page-rail-link.is-active {
background: linear-gradient(178deg, #22d3ee 0%, #0e7490 100%) !important;
color: #01151c !important;
-webkit-text-fill-color: #01151c !important;
border-color: #67e8f9 !important;
}
/* Text inputs kept a white fill. */
body.theme-dark input[type="text"],
body.theme-dark input[type="search"],
body.theme-dark input[type="email"],
body.theme-dark .ops-search input,
body.theme-dark .codename-gen-seed {
background: #070d15 !important;
color: var(--text) !important;
-webkit-text-fill-color: var(--text) !important;
border-color: #2b4d6b !important;
}
body.theme-dark input::placeholder { color: var(--text-muted) !important; }
/* Panels that hardcoded white/near-white fills. */
body.theme-dark .codename-gen-result,
body.theme-dark .codename-gen-forge,
body.theme-dark .page-rail,
body.theme-dark .nav-sheet-head,
body.theme-dark .terminal {
background: linear-gradient(165deg, rgba(14, 24, 36, 0.94), rgba(6, 11, 18, 0.97)) !important;
border-color: #1e344a !important;
}
body.theme-dark .nav-group a {
background: rgba(12, 22, 33, 0.7) !important;
color: var(--text) !important;
}
/* The skip link is only visible on focus, but it must be legible then. */
body.theme-dark .skip-link {
background: #22d3ee !important;
color: #01151c !important;
-webkit-text-fill-color: #01151c !important;
}
/* Paper-stamp elements are meant to look like ink on stock — keep them light,
just knock the brightness back so they don't glare. */
body.theme-dark .recruit-poster-stamp-usa,
body.theme-dark .seasonal-ops-stamp {
filter: brightness(0.82) saturate(0.9);
}
/* ══════════════════════════════════════════════════════════════════════════
DARK THEME — CONTAIN THE EMBLEM DECORATION
──────────────────────────────────────────────────────────────────────────
The sigil rings and bloom were authored with negative insets (-7%, -14%,
-12%), which put them OUTSIDE .hero-emblem-wrap. In the isolated preview a
parent with overflow:hidden hid that; on the real page nothing clips the
hero, so the rings pushed the document 34px wide — .hero-right sits in a
fixed 320px grid track with only ~24px of slack beside it.
Fix: pad the wrap instead of overflowing it. Absolutely-positioned children
resolve percentages against the PADDING box, so a ring sized to 100% spans
the wrap's full width while the ![]()
— width:100% of the CONTENT box —
shrinks inside it. Same look, nothing leaves the grid track.
The wrap is wider than tall (the cutout is 961x890), so a %-inset ring plus
border-radius:50% would draw an ellipse. These are centred and squared with
aspect-ratio instead. `translate` is used rather than `transform` so it
composes with the rotate() animation instead of overwriting it.
══════════════════════════════════════════════════════════════════════════ */
body.theme-dark .hero-emblem-wrap { padding: 7.5%; }
body.theme-dark .hero-emblem-wrap::before,
body.theme-dark .hero-emblem-wrap::after {
inset: auto;
top: 50%;
left: 50%;
aspect-ratio: 1;
height: auto;
translate: -50% -50%;
}
body.theme-dark .hero-emblem-wrap::after { width: 100%; } /* outer, arcane dashed */
body.theme-dark .hero-emblem-wrap::before { width: 89%; } /* inner, cyan + gold arc */
body.theme-dark .hero-emblem-glow { inset: 1%; }
/* ══════════════════════════════════════════════════════════════════════════
DARK THEME — KEEP CORNER BRACKETS INSIDE THEIR BOXES
The brackets were drawn at -1px / -2px to sit proud of the border. On
elements that reach the edge of a fixed grid track that puts them outside
the layout box, which widens the document. Visually identical at inset 0
because the bracket overdraws the existing 1-2px border anyway.
══════════════════════════════════════════════════════════════════════════ */
body.theme-dark .hero-panel::before { top: 0; left: 0; }
body.theme-dark .hero-panel::after { bottom: 0; right: 0; }
body.theme-dark .pub-conspiracy-sheet::before { top: 0; left: 0; }
body.theme-dark .pub-conspiracy-sheet::after { bottom: 0; right: 0; }
/* ══════════════════════════════════════════════════════════════════════════
DARK THEME — CONTRAST REMEDIATION
──────────────────────────────────────────────────────────────────────────
Two colour families were chosen to sit on a light page and fail on dark:
Killcam violet #4c1d95 / #5b21b6 / #6d28d9 (1.7:1 – 2.6:1 on dark)
Seasonal amber #92400e (2.8:1 on dark)
Both are DARK inks — correct against white, unreadable against #04070d.
Lightened to the same hue families so the Killcam bay keeps its violet
identity and the seasonal bar keeps its amber one. Targets ≥4.5:1.
══════════════════════════════════════════════════════════════════════════ */
/* ── Killcam violet: dark ink → light ink, same hue ───────────────────────── */
body.theme-dark .kc-spot-title {
color: #c9b6ff;
text-shadow: 0 0 22px rgba(139, 92, 246, 0.35);
}
body.theme-dark .kc-spot-ticker,
body.theme-dark .kc-spot-ticker span {
color: #c4b5fd;
}
body.theme-dark .kc-spot-bullets strong,
body.theme-dark .kc-spot-live {
color: #c4b5fd;
}
body.theme-dark .ops-card-featured .ops-card-name { color: #d5c8ff; }
body.theme-dark .ops-card-feat { color: #b49bfa; }
body.theme-dark .media-deck-tab-featured { color: #b49bfa; }
body.theme-dark .media-deck-tab-featured.is-active {
color: #01151c;
-webkit-text-fill-color: #01151c;
}
/* ── Seasonal amber ───────────────────────────────────────────────────────── */
body.theme-dark .recruit-bunker-cta-kicker,
body.theme-dark .seasonal-ops--thanksgiving .seasonal-ops-title {
color: #fbbf24;
}
/* ── The seasonal bar itself hardcodes a white→pale gradient. It sits at the
very top of the page, so leaving it light made its var(--text) copy
(now #cfdcea) effectively invisible. ──────────────────────────────────── */
body.theme-dark .seasonal-ops {
background: linear-gradient(90deg, #0a1119 0%, #070d15 55%, #04070d 100%);
border-bottom-color: #1b3348;
color: var(--text);
}
body.theme-dark .seasonal-ops-title { color: var(--text-bright); }
body.theme-dark .seasonal-ops-stamp {
/* paper stamp — keep it light like ink on stock, just stop it glaring */
filter: brightness(0.86) saturate(0.92);
}
/* ── Killcam bay CTAs: the base sheet forces a white label on violet with
!important ("Purple CTAs: always white label"). That guard is correct on
dark too — it only needs the fill to survive our overrides. ─────────── */
body.theme-dark .killcam-bay-arena-btn,
body.theme-dark a.killcam-bay-arena-btn {
color: #f5eeff !important;
-webkit-text-fill-color: #f5eeff !important;
}
/* ══════════════════════════════════════════════════════════════════════════
DARK THEME — VIOLET CHIPS
Recolouring the text was not enough for these two: each carries its own
light fill (rgba(255,255,255,.85) and rgba(237,233,254,.95)), so lightening
the ink made them worse, not better. The fill has to come down with it.
.media-deck-tab-featured sets its colour with !important, so this must too.
══════════════════════════════════════════════════════════════════════════ */
body.theme-dark .kc-spot-ticker span {
background: rgba(59, 30, 100, 0.55);
border-color: rgba(167, 139, 250, 0.45);
color: #ddd2ff;
}
body.theme-dark .media-deck-tab-featured {
background: rgba(49, 26, 88, 0.85) !important;
color: #d5c8ff !important;
-webkit-text-fill-color: #d5c8ff !important;
border-color: rgba(167, 139, 250, 0.5) !important;
}
body.theme-dark .media-deck-tab-featured.is-active {
background: linear-gradient(178deg, #a78bfa 0%, #6d28d9 100%) !important;
color: #0d0618 !important;
-webkit-text-fill-color: #0d0618 !important;
}
/* --accent-deep is a *deep* shade — correct as ink on a light page, too dark
as ink on this one. Only its text usages need lifting. */
body.theme-dark .feeds-console-kicker { color: #4cc9e8; }
/* ══════════════════════════════════════════════════════════════════════════
DARK THEME — STAGE 2: CLEARANCE SKINS
──────────────────────────────────────────────────────────────────────────
The clearance system was already designed dark: CLR_THEME_COLORS in
script.js are all dark (#06280e green, #081424 blue, #28080a red,
#1e0a30 purple), and .clr-band-inline already ships a dark per-level
treatment with light hue-coded ink:
confidential bg rgba(6,28,14,.9) ink #86efac
secret bg rgba(8,20,48,.9) ink #93c5fd
top-secret bg rgba(40,8,10,.9) ink #fca5a5
eyes-only bg rgba(88,28,135,.85) ink #f5d0fe
But .site-header and .clr-band-label were left as pale tints with dark ink
(#dcfce7 on #14532d etc.) — correct on a light page, bright chips on this
one. These mirror the author's own .clr-band-inline palette so the hue
coding stays intact and the two components finally agree.
The JS also rewrites per level via
setThemeColorMeta(), and those values are already dark — so the browser
chrome needs no change here. The static tag in index.html only covers the
moment before script.js runs.
══════════════════════════════════════════════════════════════════════════ */
/* ── Header: dark, hue-tinted per clearance ───────────────────────────────── */
body.theme-dark.clr-public .site-header {
background: rgba(6, 11, 19, 0.88) !important;
border-bottom-color: #1b3348;
}
body.theme-dark.clr-confidential .site-header {
background: rgba(6, 28, 14, 0.90) !important;
border-bottom-color: #1c5233;
box-shadow: 0 1px 0 rgba(134, 239, 172, 0.12), 0 10px 30px rgba(0, 0, 0, 0.6);
}
body.theme-dark.clr-secret .site-header {
background: rgba(8, 20, 48, 0.90) !important;
border-bottom-color: #1e3a6b;
box-shadow: 0 1px 0 rgba(147, 197, 253, 0.12), 0 10px 30px rgba(0, 0, 0, 0.6);
}
body.theme-dark.clr-top-secret .site-header {
background: rgba(40, 8, 10, 0.90) !important;
border-bottom-color: #6b1f22;
box-shadow: 0 1px 0 rgba(252, 165, 165, 0.12), 0 10px 30px rgba(0, 0, 0, 0.6);
}
body.theme-dark.clr-eyes-only .site-header {
background: rgba(30, 10, 48, 0.92) !important;
border-bottom-color: #58248a;
box-shadow: 0 1px 0 rgba(245, 208, 254, 0.14), 0 10px 30px rgba(0, 0, 0, 0.65);
}
/* ── Band label: invert to dark chip + hue ink, matching .clr-band-inline ── */
body.theme-dark .clr-band-label {
background: rgba(8, 14, 22, 0.9) !important;
border-color: #2b4560 !important;
color: #cbd5e1 !important;
-webkit-text-fill-color: #cbd5e1 !important;
}
body.theme-dark.clr-confidential .clr-band-label {
background: rgba(6, 28, 14, 0.92) !important;
border-color: #1f6b41 !important;
color: #86efac !important;
-webkit-text-fill-color: #86efac !important;
box-shadow: 0 0 16px rgba(52, 211, 153, 0.18) !important;
}
body.theme-dark.clr-secret .clr-band-label {
background: rgba(8, 20, 48, 0.92) !important;
border-color: #2551a0 !important;
color: #93c5fd !important;
-webkit-text-fill-color: #93c5fd !important;
box-shadow: 0 0 16px rgba(96, 165, 250, 0.18) !important;
}
body.theme-dark.clr-top-secret .clr-band-label {
background: rgba(40, 8, 10, 0.92) !important;
border-color: #8f2a2e !important;
color: #fca5a5 !important;
-webkit-text-fill-color: #fca5a5 !important;
box-shadow: 0 0 16px rgba(248, 113, 113, 0.18) !important;
}
body.theme-dark.clr-eyes-only .clr-band-label {
background: linear-gradient(135deg, rgba(88, 28, 135, 0.92), rgba(45, 12, 74, 0.95)) !important;
border-color: #8b41c9 !important;
color: #f5d0fe !important;
-webkit-text-fill-color: #f5d0fe !important;
box-shadow: 0 0 20px rgba(217, 70, 239, 0.22) !important;
}
/* ── The request bay toggle kept a white fill; its expanded state pairs that
with light ink, giving 1.81:1 once the tokens flipped. ───────────────── */
body.theme-dark .request-bay-toggle,
body.theme-dark a.request-bay-toggle,
body.theme-dark button.request-bay-toggle,
body.theme-dark .request-bay-toggle[aria-expanded="true"],
body.theme-dark a.request-bay-toggle[aria-expanded="true"] {
background: linear-gradient(178deg, rgba(38, 72, 98, 0.6) 0%, rgba(12, 26, 40, 0.8) 100%) !important;
color: #9fe4f2 !important;
-webkit-text-fill-color: #9fe4f2 !important;
border-color: #3a6d92 !important;
}
/* ── Paper stamps stay light on purpose (ink on stock) — just stop them
glaring against a dark page. ─────────────────────────────────────────── */
body.theme-dark .recruit-poster-stamp-usa,
body.theme-dark .seasonal-ops-stamp,
body.theme-dark .recruit-poster-stamp {
filter: brightness(0.84) saturate(0.9);
}
/* ══════════════════════════════════════════════════════════════════════════
DARK THEME — STAGE 3: LIGHT GRADIENT FILLS
──────────────────────────────────────────────────────────────────────────
31 selectors fill themselves with a LIGHT gradient rather than a token, so
the token flip never reached them. Their child text inherits --text, which
is now #cfdcea — light ink on a white panel, i.e. invisible copy. This was
invisible to the earlier contrast audits too: those resolve an ancestor's
backgroundColor and bail out when they hit a gradient, so every one of these
was silently skipped. Found by scanning gradient colour stops instead.
Worst affected were .recruit-prep, .oab-feature, .oab-feature-copy and
.recruit-bunker-cta — whole panels of unreadable text in Recruit / OAB-7.
Hue is preserved wherever it carries meaning: the seasonal bars keep their
seasonal tint, the bunker CTA stays amber, the watch line stays violet.
══════════════════════════════════════════════════════════════════════════ */
/* ── Generic panels: white → dark glass ───────────────────────────────────── */
body.theme-dark .nav-sheet-head,
body.theme-dark .main-nav,
body.theme-dark .terminal,
body.theme-dark .codename-gen,
body.theme-dark .recruit-prep,
body.theme-dark .oab-feature,
body.theme-dark .oab-feature-copy,
body.theme-dark .lr-index-teaser,
body.theme-dark .hades-index-teaser {
background: linear-gradient(155deg, rgba(16, 27, 40, 0.96) 0%, rgba(7, 13, 21, 0.98) 100%);
border-color: #1e344a;
}
/* Green-tinted kit (P.A.W.S. / dachshund unit) keeps its green cast */
body.theme-dark .paws-terminal-portal,
body.theme-dark .du-asset-card,
body.theme-dark .lt-uplink {
background: linear-gradient(155deg, rgba(10, 30, 22, 0.96) 0%, rgba(5, 15, 11, 0.98) 100%);
border-color: #1f5340;
}
body.theme-dark .du-patch-panel {
background: linear-gradient(155deg, rgba(14, 24, 36, 0.96) 0%, rgba(6, 12, 19, 0.98) 100%);
border-color: #24425e;
}
/* ── Seasonal bars: same hue, dark value ─────────────────────────────────── */
body.theme-dark .seasonal-ops--standing {
background: linear-gradient(90deg, #0a1119 0%, #071523 60%, #04070d 100%);
}
body.theme-dark .seasonal-ops--halloween {
background: linear-gradient(90deg, #1c1005 0%, #180a1e 60%, #0a0610 100%);
}
body.theme-dark .seasonal-ops--nye {
background: linear-gradient(90deg, #081326 0%, #150a26 60%, #05060f 100%);
}
body.theme-dark .seasonal-ops--liberty {
background: linear-gradient(90deg, #081326 0%, #24080c 60%, #06070f 100%);
}
body.theme-dark .seasonal-ops--valentine {
background: linear-gradient(90deg, #240a18 0%, #190a24 60%, #0a0510 100%);
}
body.theme-dark .seasonal-ops--april {
background: linear-gradient(90deg, #071c10 0%, #1a1a06 60%, #050c07 100%);
}
body.theme-dark .seasonal-ops--thanksgiving {
background: linear-gradient(90deg, #1e1405 0%, #241a06 60%, #0c0803 100%);
}
/* white chip with deep-teal ink → dark chip with amber ink (archive register) */
body.theme-dark .seasonal-ops-stamp {
background: rgba(255, 176, 0, 0.10) !important;
border-color: rgba(255, 176, 0, 0.4) !important;
color: var(--amber) !important;
-webkit-text-fill-color: var(--amber) !important;
filter: none;
}
/* ── Bunker CTA: cream → dark amber, ink lifted to match ─────────────────── */
body.theme-dark .recruit-bunker-cta {
background: linear-gradient(155deg, rgba(30, 20, 5, 0.96) 0%, rgba(14, 10, 3, 0.98) 100%);
border-color: #5c3f12;
}
/* ── Watch line: light lavender → dark violet, ink lifted ────────────────── */
body.theme-dark .clr-watch-line {
background: linear-gradient(90deg, rgba(45, 12, 74, 0.95), rgba(24, 8, 40, 0.96)) !important;
border-color: rgba(217, 70, 239, 0.45) !important;
color: #e9d5ff !important;
-webkit-text-fill-color: #e9d5ff !important;
}
body.theme-dark .clr-watch-line .clr-watch-tag {
color: #f0abfc !important;
-webkit-text-fill-color: #f0abfc !important;
}
/* ── Entry gate / scan overlay — the first thing anyone sees ─────────────── */
body.theme-dark .scan-overlay,
body.theme-dark .scan-overlay.gate-overlay {
background: linear-gradient(180deg, #060b13 0%, #04070d 45%, #02040a 100%);
}
body.theme-dark .scan-overlay-inner,
body.theme-dark .scan-overlay-inner.gate-shell {
background: linear-gradient(165deg, rgba(14, 24, 36, 0.97) 0%, rgba(6, 11, 18, 0.99) 100%);
border-color: #24425e;
}
body.theme-dark .gate-holo-core {
background: linear-gradient(165deg, rgba(12, 30, 44, 0.95) 0%, rgba(5, 14, 22, 0.98) 100%);
border-color: #2b5a7d;
}
body.theme-dark .gate-combo-key {
background: linear-gradient(178deg, rgba(20, 38, 54, 0.9) 0%, rgba(8, 16, 26, 0.95) 100%);
border-color: #2f5a7d;
color: var(--text);
}
body.theme-dark .gate-combo-key:hover {
border-color: var(--accent);
box-shadow: inset 0 0 22px rgba(34, 211, 238, 0.16);
}
/* ══════════════════════════════════════════════════════════════════════════
DARK THEME — STAGE 4: DARK INK ON DARK PANELS
──────────────────────────────────────────────────────────────────────────
Once Stage 3 darkened the panels, a second class of failure surfaced: inks
chosen to sit on white. Three families, handled differently by how each
token is actually used in the base sheet:
--accent-deep #0e7490 29 text uses, 0 background uses → retint token
--danger #c0392b 7 text uses, 2 background uses → per-selector
#2f7a5c (green) 11 text uses, 0 background uses → per-selector
--accent-deep is retinted at token level because nothing paints with it, so
there is no risk of inverting a fill. --danger is NOT retinted: two rules
use it as a fill with light ink on top, and lifting the token would drop
those from ~5.9:1 to ~2.6:1 — fixing one thing by breaking another.
══════════════════════════════════════════════════════════════════════════ */
/* ── 1. Token retint: safe, nothing fills with it ────────────────────────── */
body.theme-dark {
--accent-deep: #4cc9e8;
}
/* ── 2. --danger text uses only; the token itself is left alone ──────────── */
body.theme-dark .photo-auth-cancel:hover,
body.theme-dark .photo-auth-msg.err,
body.theme-dark .terminal-line.error,
body.theme-dark .oab-live,
body.theme-dark .modal-code,
body.theme-dark .lt-uplink-log .err {
color: #ff8a80;
-webkit-text-fill-color: #ff8a80;
}
/* ── 3. P.A.W.S. / dachshund green: dark ink → phosphor, which suits the
unit's register far better on a dark ground anyway ─────────────────── */
body.theme-dark .footer-uplink a,
body.theme-dark .paws-terminal-portal-stamp,
body.theme-dark .du-joint-still figcaption a,
body.theme-dark .feed-unit-uplink a,
body.theme-dark .du-true-stamp,
body.theme-dark .du-lock-stamp,
body.theme-dark .du-motto,
body.theme-dark .du-patch-figure figcaption,
body.theme-dark .du-patch-caption,
body.theme-dark .du-quote,
body.theme-dark .du-field-stills h4,
body.theme-dark .codename-gen-result-label {
color: #6ee7b7;
-webkit-text-fill-color: #6ee7b7;
}
/* the two green stamps read as chips, so give them a fill to match */
body.theme-dark .du-true-stamp,
body.theme-dark .du-lock-stamp,
body.theme-dark .paws-terminal-portal-stamp {
background: rgba(110, 231, 183, 0.10);
border-color: rgba(110, 231, 183, 0.42);
}
/* dossier stamp sat at exactly 4.50:1 at 9.6px — nudge it clear of the AA line */
body.theme-dark .dossier-stamp { color: #ff6b60; border-color: #ff6b60; }
/* ══════════════════════════════════════════════════════════════════════════
DARK THEME — STAGE 6: FIELD TERMINAL
field-terminal.html and lunar-rhino.html were the only two sub-pages still
rendering light (body luminance 0.92); every other page already ships its
own dark design. Both are almost entirely token-driven, so opting them in
left just these two: --danger used as ink. The token stays as-is because
two rules elsewhere fill with it, so these are overridden per selector.
.frt-key-danger declares !important, so this has to match it.
══════════════════════════════════════════════════════════════════════════ */
body.theme-dark .frt-key-danger {
color: #ff8a80 !important;
-webkit-text-fill-color: #ff8a80 !important;
}
body.theme-dark .frt-gate-warn {
color: #ff8a80;
-webkit-text-fill-color: #ff8a80;
border-left-color: #ff8a80;
}
/* ══════════════════════════════════════════════════════════════════════════
DARK THEME — STAGE 7: THE ENTRY GATE (the bit everyone sees first)
──────────────────────────────────────────────────────────────────────────
Every earlier audit in this migration ran AFTER the gate had been
dismissed, so the gate was never once measured. On a cold load it was the
worst-affected surface on the site: .gate-panel and .scan-readout-panel
fill with #ffffff while their copy inherits var(--text) — 1.39:1, i.e.
white on white. Stage 3 had darkened the overlay shell around it, which
made the untouched inner panels stand out more, not less.
Everything here is the first impression of the site, so it gets the full
treatment rather than a legibility patch: glass panels, cyan instrument
ink, and the scan readout coloured as a live console.
══════════════════════════════════════════════════════════════════════════ */
/* ── Shell furniture ─────────────────────────────────────────────────────── */
body.theme-dark .gate-topbar {
background: linear-gradient(180deg, rgba(8, 15, 24, 0.92), rgba(5, 10, 17, 0.75));
border-bottom: 1px solid #1b3348;
}
body.theme-dark .gate-dock {
background: linear-gradient(0deg, rgba(5, 10, 17, 0.96), rgba(8, 15, 24, 0.86));
border-top: 1px solid #1b3348;
}
/* ── Panels: white → glass ───────────────────────────────────────────────── */
body.theme-dark .gate-panel,
body.theme-dark .scan-readout-panel,
body.theme-dark .scan-readout-panel.gate-readout,
body.theme-dark .gate-metrics .metric-row {
background: linear-gradient(165deg, rgba(14, 24, 36, 0.96) 0%, rgba(6, 12, 19, 0.98) 100%);
border-color: #24425e;
color: var(--text);
}
body.theme-dark .gate-panel.is-active {
border-color: var(--accent);
box-shadow: inset 0 0 30px rgba(34, 211, 238, 0.10), 0 0 20px rgba(34, 211, 238, 0.18);
}
body.theme-dark .gate-panel-note,
body.theme-dark .gate-panel-hint { color: var(--text-dim); }
/* ── Mode switch: light chips → chamfered keys, matching the site buttons ── */
body.theme-dark .gate-mode {
background: linear-gradient(178deg, rgba(30, 56, 78, 0.55) 0%, rgba(10, 20, 32, 0.8) 100%);
border-color: #2f5a7d;
color: #9fe4f2;
-webkit-text-fill-color: #9fe4f2;
}
body.theme-dark .gate-mode:hover {
border-color: var(--accent);
color: #d6faff;
-webkit-text-fill-color: #d6faff;
}
body.theme-dark .gate-mode.is-active {
background: linear-gradient(178deg, #22d3ee 0%, #0e7490 100%);
border-color: #67e8f9;
color: #01151c;
-webkit-text-fill-color: #01151c;
box-shadow: 0 0 22px rgba(34, 211, 238, 0.35);
}
/* ── Primary entry key ───────────────────────────────────────────────────── */
body.theme-dark .gate-enter {
background: linear-gradient(178deg, #7ce8f8 0%, #22d3ee 34%, #0fa3c4 72%, #0b7f9c 100%);
border-color: #a5f3fc;
box-shadow:
0 0 30px rgba(34, 211, 238, 0.35),
inset 0 2px 0 rgba(255, 255, 255, 0.65),
inset 0 -2px 0 rgba(0, 40, 55, 0.5);
}
body.theme-dark .gate-enter-kicker,
body.theme-dark .gate-enter-main {
color: #01151c;
-webkit-text-fill-color: #01151c;
}
/* ── Scan readout: colour it like a live console ─────────────────────────── */
body.theme-dark .scan-line { color: #9fb6cc; }
body.theme-dark .scan-line.dim { color: #6b829a; }
body.theme-dark .scan-line.info { color: #4cc9e8; }
body.theme-dark .scan-line.ok { color: #6ee7b7; }
body.theme-dark .scan-line.warn { color: #ffc46b; }
body.theme-dark .scan-line.error { color: #ff8a80; }
body.theme-dark .scan-status,
body.theme-dark .gate-metrics .metric-val { color: #4cc9e8; }
body.theme-dark .scan-subtitle { color: var(--text-dim); }
body.theme-dark .scan-overlay h2,
body.theme-dark .gate-overlay h2 { color: var(--text-bright); }
/* the gate's LIVE indicator was the last sub-AA item at 3.02:1 */
body.theme-dark .scan-live {
color: #ff6b60;
-webkit-text-fill-color: #ff6b60;
}
/* ══════════════════════════════════════════════════════════════════════════
DARK THEME — STAGE 9: COLLAPSED BAYS + LIGHT-BACKED IMAGERY
──────────────────────────────────────────────────────────────────────────
Two problems the earlier passes could not see.
1. COLLAPSED CONTENT. Six .request-bay blocks ship as .is-collapsed, so
every audit so far measured them shut. Expanded, the P.A.W.S. / dachshund
unit was almost entirely unthemed — .du-brief and .lt-uplink-badge fill
with #ffffff, .du-true-name with #f0f7f3, .lt-uplink-header with a pale
green — bottoming out at 1.03:1. Same failure mode as the entry gate:
hidden at audit time, so never measured.
2. LIGHT-BACKED PHOTOGRAPHY. 12 of 51 images are shot on white fabric or
paper (edge luminance 0.57–0.91). Against #04070d they read as lightbox
panels. The unit patches were the worst: .du-patch-panel.unlocked sets
`filter: none`, so unlocking deliberately restores full-brightness white.
Patches are graded down rather than cut out — the white is woven fabric,
not a flat plate, so a silhouette cut would fray. They brighten to full on
hover/focus so the artwork stays inspectable.
══════════════════════════════════════════════════════════════════════════ */
/* ── 1. P.A.W.S. / dachshund unit panels ─────────────────────────────────── */
body.theme-dark .du-brief {
background: linear-gradient(165deg, rgba(14, 24, 36, 0.96) 0%, rgba(6, 12, 19, 0.98) 100%);
border-color: #24425e;
color: var(--text);
}
body.theme-dark .du-true-name {
background: linear-gradient(165deg, rgba(10, 30, 22, 0.96) 0%, rgba(5, 15, 11, 0.98) 100%);
border-color: rgba(110, 231, 183, 0.3);
border-left-color: #6ee7b7;
color: var(--text);
}
body.theme-dark .du-quote {
border-left-color: #6ee7b7;
color: var(--text-dim);
background: linear-gradient(90deg, rgba(110, 231, 183, 0.07), transparent 72%);
}
body.theme-dark .du-cover-line,
body.theme-dark .brief-label,
body.theme-dark .brief-date { color: var(--text-dim); }
body.theme-dark .lt-uplink-header {
background: linear-gradient(180deg, rgba(10, 34, 25, 0.95), rgba(5, 18, 13, 0.9));
border-bottom-color: rgba(110, 231, 183, 0.28);
}
body.theme-dark .lt-uplink-badge {
background: rgba(110, 231, 183, 0.12);
border-color: rgba(110, 231, 183, 0.45);
color: #6ee7b7;
-webkit-text-fill-color: #6ee7b7;
}
body.theme-dark .hades-index-stamp { color: #f0abfc; }
/* ── 2. Patch imagery: grade down, restore on inspect ────────────────────── */
/* the locked state keeps its blur; only the UNLOCKED state needs grading,
because it resets filter to none and reveals the white fabric */
body.theme-dark .du-patch-panel.unlocked .du-patch-img {
filter: brightness(0.74) contrast(1.14) saturate(1.06);
background: #0b131c;
border-color: #24425e;
}
body.theme-dark .du-patch-panel.unlocked .du-patch-img:hover,
body.theme-dark .du-patch-panel.unlocked .du-patch-img:focus-visible {
filter: brightness(1) contrast(1) saturate(1);
}
body.theme-dark .paws-terminal-portal-patch,
body.theme-dark .hades-index-patch,
body.theme-dark .lr-index-patch {
filter: brightness(0.76) contrast(1.12) saturate(1.05);
transition: filter 0.35s ease;
}
body.theme-dark .paws-terminal-portal-patch:hover,
body.theme-dark .hades-index-patch:hover,
body.theme-dark .lr-index-patch:hover { filter: none; }
/* their light plate backgrounds */
body.theme-dark .hades-index-patch { background: #14061c; border-color: rgba(217, 70, 239, 0.45); }
body.theme-dark .lr-index-patch { background: #0b131c; border-color: #2f5a7d; }
/* ── 3. Recruit posters — paper stock, same grading ──────────────────────── */
body.theme-dark .poster-reel-frame img,
body.theme-dark .recruit-poster img {
filter: brightness(0.8) contrast(1.08) saturate(1.03);
transition: filter 0.35s ease;
}
body.theme-dark .poster-reel-frame img:hover,
body.theme-dark .recruit-poster img:hover { filter: none; }
/* ── 4. Header / footer emblems now use the cut-out asset, so the pale plate
is gone; give them the same projected glow as the hero. ───────────── */
body.theme-dark .logo-emblem,
body.theme-dark .footer-emblem {
filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.4)) brightness(1.08) saturate(1.1);
}
/* ══════════════════════════════════════════════════════════════════════════
DARK THEME — STAGE 10: LAST DARK INK INSIDE THE EXPANDED BAYS
Headings and meta that were only reachable with the request bays open.
Each keeps its own hue family — P.A.W.S. green, H.A.D.E.S. violet — just
lifted off the floor so it reads against #04070d.
══════════════════════════════════════════════════════════════════════════ */
body.theme-dark .paws-terminal-portal-copy h3,
body.theme-dark .lt-uplink-title {
color: #6ee7b7;
-webkit-text-fill-color: #6ee7b7;
}
body.theme-dark .hades-index-teaser h4 {
color: #e9a8ff;
-webkit-text-fill-color: #e9a8ff;
}
body.theme-dark .anthem-shot-meta { color: #93a7bd; }
body.theme-dark .op-status.complete { color: #9fb6cc; }
/* The LT / Buddy / Rhino asset-card headings were #1e4d38 — dark green ink
picked for the old white card. On the dark card they all but vanish. */
body.theme-dark .du-asset-card h4 {
color: #6ee7b7;
-webkit-text-fill-color: #6ee7b7;
}
/* ══════════════════════════════════════════════════════════════════════════
DARK THEME — STAGE 12: REAL DARK ASSETS REPLACE THE GRADING HACK
──────────────────────────────────────────────────────────────────────────
Stage 9 graded the unit patches down with a brightness filter because they
are shot on white fabric. That was the wrong fix — the repo already ships
dark-background masters of two of them, and the third cuts out cleanly:
dachshund-unit-patch.jpg -> dachshund-unit-patch-dark-prev.jpg (existing)
rhino-patch.jpg -> rhino-patch-dark-prev.jpg (existing)
hades-patch.jpg -> hades-patch-cutout-320.webp (cut here)
Real artwork beats a filter: no crushed shadows, no washed embroidery, and
the hades cutout is 31 KB against the original 405 KB. The grading is
therefore removed from these three — leaving it on would darken them twice.
It stays only on the recruit posters, which are genuinely paper stock and
have no dark master.
══════════════════════════════════════════════════════════════════════════ */
body.theme-dark .paws-terminal-portal-patch,
body.theme-dark .hades-index-patch,
body.theme-dark .du-patch-panel.unlocked .du-patch-img {
filter: none;
}
body.theme-dark .paws-terminal-portal-patch:hover,
body.theme-dark .hades-index-patch:hover { filter: none; }
/* the cut-out hades patch no longer needs a plate behind it */
body.theme-dark .hades-index-patch {
background: transparent;
border-color: rgba(217, 70, 239, 0.4);
}
/* Recruit posters are the only genuinely light-backed imagery left — printed
paper stock with no dark master, and "poster on a wall" is the intent. One
of the three sits at 0.90 edge luminance, so they are graded a little
harder than Stage 9 and still restore to full on hover for reading. */
body.theme-dark .poster-reel-frame img,
body.theme-dark .recruit-poster img {
filter: brightness(0.72) contrast(1.1) saturate(1.02);
}
/* ══════════════════════════════════════════════════════════════════════════
DARK THEME — STAGE 14: HEADER WORDMARK
.logo-mark paints itself with background-clip:text over a gradient that
starts at rgb(10,22,40) — near-black. Correct on the old pale header,
invisible on this one, which is why the leading "J." read as missing.
Same defect the hero acronym had; this is the small sibling of that fix.
Endpoints matched so the wordmark is legible edge to edge.
══════════════════════════════════════════════════════════════════════════ */
body.theme-dark .logo-mark {
background-image: linear-gradient(100deg,
#22d3ee 0%, #7ce8f8 20%, #e8fbff 48%, #a5f3fc 72%, #22d3ee 100%);
filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.35));
}
/* ══════════════════════════════════════════════════════════════════════════
DARK THEME — STAGE 15: THE SHARED HEADER, EVERYWHERE
──────────────────────────────────────────────────────────────────────────
.site-header is shared by six pages and fills with rgba(247,250,253,.88).
Only index opted into a dark version, so commander-file, nightshade-file,
war-room and hades-cats were each running a near-white bar across the top
of an otherwise dark page. None of them override it in their own CSS.
Every body on the site is now dark, so rather than scoping this per page
the base rule is simply flipped. Same specificity as the original, later
in the file, so it wins — while the per-clearance tints on index
(body.theme-dark.clr-*) keep a higher specificity and still take priority.
══════════════════════════════════════════════════════════════════════════ */
.site-header {
background: rgba(6, 11, 19, 0.88);
border-bottom-color: #1b3348;
box-shadow:
0 1px 0 rgba(120, 190, 220, 0.10),
0 10px 30px rgba(0, 0, 0, 0.6);
}