/* LUX Light Ark — design-token overlay. Does not touch site.css. Re-themes the existing site by overriding the same custom properties site.css already reads (--bg, --panel, --text, …), scoped to a class on (set as early as possible in to avoid a flash of the wrong theme). Two surfaces share the same night palette but differ in how much amber "signal" is allowed to glow. Rule: amber is not decoration, amber means orientation. It may only appear on: active nav state, the currently selected evidence path, an active timeline/continuity node, and primary wayfinding actions. It must NOT appear on every tag, every card border, or every button. */ :root { --ark-night: #050814; --ark-surface: #0d1226; --ark-surface-raised: #141b34; /* Brightened against the original draft: #8f96aa on #0b1020 measured ~6.4:1 (passes AA, fails AAA at 7:1). These pass AAA (7:1+) for normal text on both --ark-night and --ark-surface. */ --ark-text: #e4e6ee; /* primary reading text — was #d6d9e1 */ --ark-text-muted: #aab0c4; /* secondary/meta only — was #8f96aa */ --ark-text-strong: #f6f2e9; /* headings, unchanged */ --ark-light: #d89a4a; --ark-light-soft: #f4d6a0; --ark-border: rgba(255, 255, 255, 0.1); --ark-signal: rgba(216, 154, 74, 0.45); --ark-serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif; --ark-mono: 'SF Mono', 'Courier New', Courier, monospace; } /* --------------------------------------------------------------------- Ark / Navigation surface — homepage, journeys, discovery. Deep night, generous negative space, amber reserved for wayfinding. --------------------------------------------------------------------- */ html.ark-theme { --bg: var(--ark-night); --panel: var(--ark-surface); --surface: var(--ark-surface); --surface-soft: var(--ark-surface-raised); --text: var(--ark-text); --ink: var(--ark-text-strong); --muted: var(--ark-text-muted); --line: var(--ark-border); --accent: var(--ark-light); --accent-dark: #a8681f; background: var(--ark-night); } /* site.css hardcodes a handful of #fff backgrounds instead of reading --panel (sidebar chrome, search flyout, some inline badges). Re-theme the structural ones by hand rather than rewriting the shared stylesheet. This is exactly the kind of seam a real rollout would fix at the source; here it is patched at the prototype layer on purpose. */ html.ark-theme .site-sidebar, html.ark-theme .site-header, html.ark-theme .global-search, html.ark-theme details.site-header-search[open] > *:not(summary) { background: var(--ark-surface); border-color: var(--ark-border); } html.ark-theme .site-sidebar-brand .brand, html.ark-theme .site-header-main .brand { color: var(--ark-text-strong); } html.ark-theme .site-nav-item { color: var(--ark-text); } html.ark-theme .site-nav-item:hover { color: var(--ark-text); background: var(--ark-surface-raised); } html.ark-theme .site-nav-group { background: var(--ark-surface); border-color: var(--ark-border); } html.ark-theme .site-nav-group-heading { color: var(--ark-text-muted); } html.ark-theme .site-nav-group.active { border-color: var(--ark-border); } html.ark-theme .site-nav-item.active { color: var(--ark-light); background: rgba(216, 154, 74, 0.08); border-color: rgba(216, 154, 74, 0.25); } html.ark-theme .site-mobile-menu summary { color: var(--ark-light); background: rgba(216, 154, 74, 0.1); } html.ark-theme .relations, html.ark-theme .notice { background: var(--ark-surface-raised); border-color: var(--ark-border); } /* site.css tags/chips/version-badge hardcode a pale mint-green (#e7f1f2) chip background with teal accent text. On the night surface that reads as an odd light-green fleck, and it isn't an orientation signal, so per the amber rule it should NOT be amber either — just a quiet neutral chip, same family as everything else. */ html.ark-theme .tags span, html.ark-theme .tags a, html.ark-theme .tag-overflow, html.ark-theme .record-type-chip, html.ark-theme .version-badge, html.ark-theme .language-switch { color: var(--ark-text); background: var(--ark-surface-raised); border-color: var(--ark-border); } html.ark-theme .language-switch-label { color: var(--ark-text-muted); } /* the version-badge tooltip: reposition relative to the badge itself instead of the fixed left:164px the light-theme sidebar assumed — that offset clips against the current sidebar width and gets cut by the content column. Absolute + higher z-index always clears it. */ html.ark-theme .version-badge::after { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; background: #1a2036; border-color: var(--ark-border); color: var(--ark-text-strong); } html.ark-theme .site-sidebar .version-badge::after { position: absolute; top: calc(100% + 8px); left: 0; } /* continuity-path.css ships its own variable names (unset anywhere in site.css, so they always fell back to light-theme defaults). Define them here so continuity-path-stage / -transition / -branch re-theme too. */ html.ark-theme { --surface-raised: var(--ark-surface-raised); --border-subtle: var(--ark-border); --text-muted: var(--ark-text-muted); --focus-ring: var(--ark-light); --accent-muted: rgba(143, 150, 170, 0.5); } html.ark-theme .continuity-path-stage, html.ark-theme .continuity-path-branch, html.ark-theme .continuity-path-branch-lane { border-color: var(--ark-border); } html.ark-theme .continuity-path-transition--research { background: rgba(255, 255, 255, 0.03); } /* The "Story" entry card is styled as a featured/primary card in the light theme via a hardcoded white gradient (site.css .home-entry-card--primary), which is why it stayed a white island on the night surface while its siblings re-themed fine. It's the recommended path, so it earns a whisper of amber, same tier as a primary action button — not louder. */ html.ark-theme .home-entry-card--primary { border-color: rgba(216, 154, 74, 0.35); background: linear-gradient(180deg, var(--ark-surface-raised) 0%, var(--ark-surface) 100%); } /* Record page chrome: no-image notice, only — the map itself is left as real cartography (ocean/land tiles), not UI chrome, so it is not re-themed here. */ html.ark-theme .record-visual-media, html.ark-theme .record-visual-unavailable { background: var(--ark-surface-raised); border-color: var(--ark-border); color: var(--ark-text-muted); } /* --------------------------------------------------------------------- Archive / Reading surface — dense records, evidence, research. Same family, slightly lifted off pure black, much higher text contrast, almost no glow. This is the page a researcher reads for two hours; it should not compete for attention. --------------------------------------------------------------------- */ html.ark-theme.ark-surface-reading { --ark-night: #0a0e1a; --ark-surface: #10162a; --ark-surface-raised: #161d34; --text: #c7cbd6; --ink: #f3f0e9; } html.ark-theme.ark-surface-reading .ark-signal, html.ark-theme.ark-surface-reading .continuity-path-stage.is-active { box-shadow: 0 0 0 1px var(--ark-signal); } /* Typography roles: sans = navigation, serif = narrative, mono = evidence/IDs */ html.ark-theme, html.ark-theme input, html.ark-theme button { font-family: -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif; } html.ark-theme .site-header .brand, html.ark-theme h1 { color: var(--ark-text-strong); font-weight: 300; letter-spacing: 0.02em; } html.ark-theme .hero p, html.ark-theme .story-lede, html.ark-theme .continuity-path-transition p, html.ark-theme .journey-narrative, html.ark-theme blockquote { font-family: var(--ark-serif); } html.ark-theme .meta-grid, html.ark-theme .continuity-path-meta, html.ark-theme dl.meta-grid dd, html.ark-theme code, html.ark-theme .entity-id, html.ark-theme .version-badge { font-family: var(--ark-mono); } /* --- Signal: the only amber-glow surfaces in the whole system --- */ /* active sidebar / tab navigation */ html.ark-theme .site-nav-item.active, html.ark-theme .site-nav-group.active > summary, html.ark-theme .tab.active, html.ark-theme [aria-current="page"] { color: var(--ark-light); } html.ark-theme .site-nav-item.active { box-shadow: inset 2px 0 0 var(--ark-light); } /* the currently selected evidence / continuity node */ html.ark-theme .continuity-path-stage.is-active, html.ark-theme .ark-signal-node.is-active { border-color: var(--ark-light); box-shadow: 0 0 0 1px var(--ark-light), 0 0 16px var(--ark-signal); } html.ark-theme .continuity-path-stage.is-active h3 { color: var(--ark-light-soft); } /* an accepted relation currently lit as part of a followed path */ html.ark-theme .continuity-path-transition.is-lit { border-left-color: var(--ark-light); background: rgba(216, 154, 74, 0.06); } /* a probable / unreviewed relation stays dim even when adjacent to a lit path */ html.ark-theme .continuity-path-transition { border-left-color: rgba(143, 150, 170, 0.35); transition: border-color 0.4s ease, background 0.4s ease; } /* primary wayfinding action */ html.ark-theme .action-btn, html.ark-theme .cta-primary { border: 1px solid rgba(216, 154, 74, 0.4); color: var(--ark-light); background: transparent; } html.ark-theme .action-btn:hover, html.ark-theme .cta-primary:hover { background: rgba(216, 154, 74, 0.1); border-color: rgba(216, 154, 74, 0.8); } @media (prefers-reduced-motion: reduce) { html.ark-theme .continuity-path-transition { transition: none; } } /* --------------------------------------------------------------------- Full-page sweep: site.css has ~90 components (record tables, journey chrome, evidence badges, taxonomy, graphs) that hardcode a light background instead of reading --panel/--surface. Rather than track these down one screenshot at a time, this is a systematic pass over every one found by grepping site.css for hardcoded light backgrounds. Two buckets: plain neutral surfaces, and status-colored badges that need to keep their hue (verified/warning/conflict) but tinted dark. --------------------------------------------------------------------- */ /* Neutral surfaces — everything that was just "a light card" with no semantic color meaning. */ html.ark-theme .manifesto-card, html.ark-theme .local-version-banner, html.ark-theme .local-version-actions button, html.ark-theme .project-item, html.ark-theme .thumb-frame, html.ark-theme .thumb, html.ark-theme .claim-evidence-field, html.ark-theme .evidence-graph-panel, html.ark-theme .lifecycle-card-chip, html.ark-theme .state-profile-control output, html.ark-theme .detail-origin-resolved, html.ark-theme .detail-origin-claim, html.ark-theme .detail-origin-inherited, html.ark-theme .evidence-badge, html.ark-theme .evidence-unknown, html.ark-theme .record-all-fields, html.ark-theme .record-identifiers, html.ark-theme .heritage-visual-panel, html.ark-theme .missing-inline-media, html.ark-theme .facts, html.ark-theme .geography, html.ark-theme .feature-hero, html.ark-theme .feature-case-box, html.ark-theme .feature-evidence-table, html.ark-theme .feature-evidence-table th, html.ark-theme .field-claim-source, html.ark-theme .heritage-asset-research-note, html.ark-theme .gallery-local-review-image, html.ark-theme .local-review-inline-media, html.ark-theme .provenance, html.ark-theme .attribution, html.ark-theme .taxonomy-tree-table th, html.ark-theme .taxonomy-tree-row.taxonomy-search-context td, html.ark-theme .taxonomy-tree-toggle, html.ark-theme .glossary-meta code, html.ark-theme .sync-priority-panel, html.ark-theme .search-badges span, html.ark-theme .visual-summary span, html.ark-theme .journey-card, html.ark-theme .evidence-layer-item, html.ark-theme .journey-library-tab-labels label, html.ark-theme .journey-library-show-more, html.ark-theme .journey-section-nav, html.ark-theme .journey-mode-toggle, html.ark-theme .journey-mode-toggle--compact, html.ark-theme .journey-pull-quote, html.ark-theme .journey-story-beat, html.ark-theme .journey-map-stop, html.ark-theme .journey-callout-card, html.ark-theme .journey-story-chapter--discovery, html.ark-theme .discovery-compare-path span, html.ark-theme .journey-callout, html.ark-theme .journey-concept-illustration img, html.ark-theme .journey-step::before, html.ark-theme .journey-step details, html.ark-theme .asset-related-heading > span, html.ark-theme .asset-related-group, html.ark-theme .asset-related-network-map, html.ark-theme .heritage-visual-grid article, html.ark-theme .event-timeline li::before, html.ark-theme .identity-lens-stage, html.ark-theme .heritage-graph-toolbar button, html.ark-theme .collection-view-controls, html.ark-theme .qa-image-thumb, html.ark-theme .candidate-image, html.ark-theme .notice, html.ark-theme .site-nav-mobile, html.ark-theme .global-search input, html.ark-theme .search-box, html.ark-theme .site-header-search > summary, html.ark-theme .site-header-search > .global-search, html.ark-theme .stats a:hover, html.ark-theme .stats-card:hover, html.ark-theme .visual-badge, html.ark-theme .visual-badge-placeholder, html.ark-theme .journey-featured-badge, html.ark-theme .journey-library-badge, html.ark-theme .journey-step-badge, html.ark-theme .journey-evolution-panel, html.ark-theme .journey-evolution-panel dl div, html.ark-theme .journey-hero-photo--contain, html.ark-theme .evidence-provenance, html.ark-theme .evidence-provenance-controls button, html.ark-theme .journey-research-controls input, html.ark-theme .journey-research-controls button, html.ark-theme .discovery-compare-path button, html.ark-theme .heritage-graph-toolbar select { background: var(--ark-surface-raised); border-color: var(--ark-border); color: var(--ark-text); } /* Story mode's own interactive layer (expedition modal, evolution modal, chapter panels, map shells) was already dark before Ark touched it — but dark TEAL (#17313a / #12455a family, the site's original accent hue), not navy. Next to Ark's navy+amber it reads as two different dark palettes fighting — the "blue and green mixed" seam. Pull the major teal panel backgrounds into the navy family; leave the near-black rgba() overlays alone since they're indistinguishable from navy already. */ html.ark-theme .hero, html.ark-theme .hero--positioning, html.ark-theme .journey-expedition, html.ark-theme .journey-expedition-detail-media, html.ark-theme .journey-evolution-map, html.ark-theme .journey-evolution-launch:focus-visible, html.ark-theme .journey-evolution-close, html.ark-theme .journey-evolution-step[aria-selected="true"], html.ark-theme .journey-evolution footer button, html.ark-theme .journey-story-map-panel .heritage-map-shell, html.ark-theme .home-story-journey-chapter-content, html.ark-theme .journey-card--immersive, html.ark-theme .record-journey-cta { background: linear-gradient(160deg, var(--ark-surface-raised) 0%, var(--ark-night) 100%); color: var(--ark-text); } /* Found the actual root of the "blue and green mixed" look: the whole Story-mode shell (.journey-shell--story) washes every section in a radial teal glow (rgba(23,107,115 = the old #176b73 brand teal) at top-left, plus a teal-tinted near-black base gradient — that's what bled a green cast across sections that otherwise looked fine individually. Replace it with a single amber ambient glow on a pure navy base so there's only one hue system, not two competing ones. */ /* Same teal-scrim issue on the homepage hero photo: the overlay and text-card gradients dimming the photo use rgba(7,25,32,…) — the old teal accent again, not navy — so the photo read with a green cast. */ html.ark-theme .hero--positioning .hero-overlay { background: linear-gradient(90deg, rgba(5, 8, 20, .82) 0%, rgba(5, 8, 20, .52) 38%, rgba(5, 8, 20, .22) 62%, rgba(5, 8, 20, .04) 100%); } html.ark-theme .hero--positioning .hero-content { background: linear-gradient(145deg, rgba(5, 8, 20, .82), rgba(13, 18, 38, .7)); } html.ark-theme .journey-shell--story { background: radial-gradient(circle at 12% 0%, rgba(216, 154, 74, .16), transparent 34%), radial-gradient(circle at 88% 12%, rgba(216, 154, 74, .1), transparent 28%), linear-gradient(180deg, var(--ark-night) 0%, var(--ark-surface) 42%, var(--ark-surface-raised) 100%); color: var(--ark-text); } /* Teal used as an accent (story CTA, timeline index badge) is a wayfinding signal, so it graduates to the same amber as everything else, instead of staying the old brand teal. */ html.ark-theme .journey-card-story-cta, html.ark-theme .journey-story-timeline-index { background: var(--ark-light); color: #1a1206; } /* Research mode (heritage-journeys) has two of its own hardcoded light gradients, scoped with [data-active-mode="research"] — higher specificity than the plain classes above, so they survived the earlier sweep untouched: the whole research shell background, and the hero banner sitting on top of it. Together they were the pale hero card and the white gap band between sections. */ html.ark-theme .journey-page--immersive[data-active-mode="research"] .journey-shell--research { background: linear-gradient(180deg, var(--ark-night) 0%, var(--ark-surface) 42%); } html.ark-theme .journey-page--immersive[data-active-mode="research"] .journey-hero { background: linear-gradient(180deg, var(--ark-surface-raised) 0%, var(--ark-surface) 100%); border-bottom-color: var(--ark-border); } /* The claim-provenance graph draws its own diagram (source/claim/record node colors are a legend, same idea as the Leaflet map's cartography) inside .evidence-provenance-canvas — left on its native light canvas so the node color-coding stays legible, instead of re-skinning a hand-tuned data-viz. */ /* Success / verified / matched — keep green, tint dark. */ html.ark-theme .evidence-verified, html.ark-theme .status-matched, html.ark-theme .lifecycle-event-kind, html.ark-theme .visual-badge-postcard, html.ark-theme .heritage-graph-legend .structure, html.ark-theme .discovery-matrix td.is-related, html.ark-theme .journey-expedition-point.is-found .journey-expedition-point-index, html.ark-theme .journey-voyage-hotspot.is-found .journey-voyage-hotspot-index { background: rgba(94, 179, 120, 0.14); border-color: rgba(94, 179, 120, 0.35); color: #a7e0b8; } /* Warning / approximate / pending — amber family, but this is status, not wayfinding, so it stays visually distinct (cooler, less saturated) from the --ark-light orientation amber. */ html.ark-theme .evidence-approximate, html.ark-theme .visual-badge-ai_illustration, html.ark-theme .journey-confidence-unknown, html.ark-theme .journey-step-split::before, html.ark-theme .evidence-provenance-controls button[aria-pressed="true"], html.ark-theme .state-transition-strip li.is-active, html.ark-theme .journey-expedition-primary, html.ark-theme .journey-expedition-progress span, html.ark-theme .journey-expedition-point-index, html.ark-theme .journey-voyage-progress span, html.ark-theme .status-unmatched, html.ark-theme .lifecycle-chip-museum, html.ark-theme .heritage-graph-legend .transformation, html.ark-theme .evidence-provenance-issues { background: rgba(198, 154, 74, 0.16); border-color: rgba(198, 154, 74, 0.4); color: #e3c384; } /* Danger / conflict / missing / decommissioned — red family. */ html.ark-theme .detail-conflict-note, html.ark-theme .detail-row-conflict, html.ark-theme .evidence-missing, html.ark-theme .lifecycle-chip-decommissioned, html.ark-theme .visual-badge-restricted_reference { background: rgba(196, 92, 92, 0.16); border-color: rgba(196, 92, 92, 0.4); color: #e8a3a3; } /* Info / ambiguous / location — cool blue-teal family. */ html.ark-theme .status-ambiguous, html.ark-theme .visual-badge-location, html.ark-theme .visual-badge-none, html.ark-theme .heritage-graph-legend .place, html.ark-theme .heritage-graph-legend .asset { background: rgba(107, 148, 189, 0.14); border-color: rgba(107, 148, 189, 0.35); color: #a9c6e3; } /* Phase 2 sweep: remaining light-background panels found by re-scanning the whole of css() for hardcoded light colors not yet covered above. Map tiles, mini-map SVGs, and the light-signature color chips are left alone on purpose (real cartography / data-driven legend colors, not plain UI chrome) — see the earlier comment on the claim-provenance canvas for the same reasoning. */ html.ark-theme .map-popup, html.ark-theme .heritage-map-status, html.ark-theme .discovery-compare, html.ark-theme .discovery-compare-path span, html.ark-theme .asset-related-discovery, html.ark-theme .identity-lens, html.ark-theme .visual-placeholder, html.ark-theme .record-visual-placeholder { background: var(--ark-surface-raised); border-color: var(--ark-border); color: var(--ark-text); } html.ark-theme .language-switch-select:focus-visible { box-shadow: 0 0 0 2px rgba(216, 154, 74, 0.35); } html.ark-theme .journey-story-chrome .language-switch-select option { background: var(--ark-surface-raised); color: var(--ark-text); } /* These muted-green text colors were tuned for a light panel; on the new dark .identity-lens background they'd be near-invisible. */ html.ark-theme .identity-lens-heading > p, html.ark-theme .identity-lens-stage li span, html.ark-theme .identity-lens-stage h4 { color: var(--ark-text-muted); } html.ark-theme .identity-lens-arrow { color: var(--ark-light); } /* Theme toggle: swap which icon is showing, and re-tint the pill itself to match the rest of the chrome instead of the light-theme border. */ html.ark-theme .theme-toggle-icon--sun { display: block; } html.ark-theme .theme-toggle-icon--moon { display: none; } html.ark-theme .theme-toggle { border-color: var(--ark-border); color: var(--ark-text-muted); } html.ark-theme .theme-toggle:hover, html.ark-theme .theme-toggle:focus-visible { color: var(--ark-light); border-color: var(--ark-light); }