/* ============================================================================ themes.css — switchable theming for FOLLOW THE MONEY. The application's design tokens live as CSS custom properties on :root in app.css (the default "noir" look — ink-black + signal-gold). This file does NOT redefine :root. Instead it provides complete alternate palettes as [data-theme="..."] attribute selectors that override EVERY token app.css and auth.css consume, so switching a theme re-skins the entire product chrome with no half-themed surfaces. Apply a theme by setting the attribute on the document root, e.g. document.documentElement.setAttribute('data-theme', 'court'); (handled by theme-switcher.js, which also persists the choice to localStorage and applies it before paint). With no attribute set, app.css :root wins and the product renders in "noir" — so nothing breaks if theming never loads. Tokens themed (must match app.css :root exactly): --ink --ink-2 --ink-3 surface ramp (canvas -> raised panel) --line --line-soft hairline borders --text --text-dim --text-faint text ramp --gold --gold-soft money / primary accent --teal --rose --violet donor / recipient / path accents --r corner radius --mono --serif --sans font stacks Plus a few presentation-only extras used by the marketing pages: --hero-bg --grain-opacity --accent-contrast (text color that reads on --gold) ========================================================================== */ /* Smooth the re-skin so switching themes feels deliberate, not jarring. Kept off the map canvas (sigma paints its own pixels). */ html { transition: background-color 0.35s ease, color 0.35s ease; } /* Make "noir" explicitly selectable too (mirrors app.css :root). This lets the switcher set data-theme="noir" and get an identical, intentional result rather than relying on the attribute being absent. */ [data-theme="noir"] { --ink: #0a0b0e; --ink-2: #101218; --ink-3: #161922; --line: #232733; --line-soft: #1a1d26; --text: #e7e9ee; --text-dim: #8d93a3; --text-faint: #565c6b; --gold: #f2b134; --gold-soft: #c8902a; --teal: #46c8c0; --rose: #ff6a8a; --violet: #9a8cff; --r: 4px; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --serif: 'Newsreader', Georgia, 'Times New Roman', serif; --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --accent-contrast: #14110a; --hero-bg: radial-gradient(120% 90% at 70% 12%, #11141d 0%, #07080b 68%); --grain-opacity: 0.035; --map-bg: radial-gradient(120% 90% at 70% 10%, #0e1118 0%, #07080b 70%); --map-ink: #ffffff; /* node icon/glyph ink that reads on a dark map */ /* depth layers behind the graph (nebula glows, dot field, vignette) */ --map-glow-a: rgba(242,177,52,0.10); --map-glow-b: rgba(124,108,255,0.11); --map-glow-c: rgba(70,200,192,0.06); --map-dot: rgba(255,255,255,0.05); --map-vignette: rgba(2,3,6,0.55); --map-florida-opacity: 0.09; --map-florida-blend: screen; /* light topo glows faintly on dark bg */ } /* ============================================================================ INVESTIGATION — dark forensic teal with amber casefile accents. Cooler and more clinical than noir; reads like an evidence-board terminal. ========================================================================== */ [data-theme="investigation"] { --ink: #07100f; /* deep teal-black canvas */ --ink-2: #0c1a18; /* panel surface */ --ink-3: #112523; /* raised surface */ --line: #1d3835; /* hairline borders */ --line-soft: #142523; --text: #e3f0ec; /* primary text */ --text-dim: #82a39c; /* secondary text */ --text-faint: #4d6b65; --gold: #ffb84d; /* amber casefile accent (money) */ --gold-soft: #c98a2f; --teal: #3fd6c4; /* donor */ --rose: #ff7a6b; /* recipient (warmer coral) */ --violet: #7fd4ff; /* path / highlight (signal cyan)*/ --r: 4px; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --serif: 'Newsreader', Georgia, 'Times New Roman', serif; --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --accent-contrast: #0b1a14; --hero-bg: radial-gradient(130% 95% at 72% 8%, #0e2421 0%, #050d0c 70%); --grain-opacity: 0.045; } /* ============================================================================ COURT — light, formal legal-document feel. Warm paper, navy ink, serif body. For deposition exhibits, recusal memos, printed-record review. ========================================================================== */ [data-theme="court"] { --ink: #f4f1e9; /* warm legal-paper canvas */ --ink-2: #fbf9f3; /* panel / page surface */ --ink-3: #ffffff; /* raised surface (clean stock) */ --line: #d8d0bd; /* hairline borders (rule lines) */ --line-soft: #e6dfce; --text: #1b2540; /* navy ink primary text */ --text-dim: #51597a; /* secondary text */ --text-faint: #8b8f9f; --gold: #8a6d2f; /* embossed seal gold (money) */ --gold-soft: #6f561f; --teal: #1f6f6a; /* donor */ --rose: #9c2b3e; /* recipient (oxblood) */ --violet: #3c3f88; /* path / highlight (navy-violet)*/ --r: 3px; /* Court leans serif: body text in Newsreader for a legal-document feel, mono reserved for labels. */ --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --serif: 'Newsreader', Georgia, 'Times New Roman', serif; --sans: 'Newsreader', Georgia, 'Times New Roman', serif; --accent-contrast: #fbf9f3; --hero-bg: linear-gradient(180deg, #fbf9f3 0%, #efe9da 100%); --grain-opacity: 0.018; --map-bg: radial-gradient(120% 90% at 70% 10%, #f4f1e9 0%, #e6dfce 72%); /* light legal-paper map */ --map-ink: #1b2540; /* dark navy ink reads on the light map */ /* lighter, warmer depth layers for the legal-paper map */ --map-glow-a: rgba(198,150,40,0.10); --map-glow-b: rgba(120,104,200,0.08); --map-glow-c: rgba(60,150,150,0.05); --map-dot: rgba(60,52,30,0.20); --map-dot-size: 1.1px; --map-dot-gap: 24px; --map-vignette: rgba(120,108,80,0.22); --map-orb-shadow: rgba(40,32,16,0.35); /* warm cast shadow under orbs on paper */ /* light frosted glass for overlays on the paper map */ --glass-bg: rgba(252, 250, 244, 0.6); --glass-border: rgba(255, 255, 255, 0.7); --glass-blur: 16px; --glass-highlight: rgba(255, 255, 255, 0.9); --glass-shadow: rgba(40, 32, 16, 0.22); --glass-tint: rgba(255, 255, 255, 0.35); --map-florida-opacity: 0.16; --map-florida-blend: multiply; /* tints the paper on light themes */ } /* ============================================================================ TERMINAL — high-contrast analyst console. Pure black, phosphor green, amber alerts. For dense, signal-over-noise reading sessions. ========================================================================== */ [data-theme="terminal"] { --ink: #000000; /* pure black canvas */ --ink-2: #060a06; /* panel surface */ --ink-3: #0b120b; /* raised surface */ --line: #1d3a1d; /* hairline borders */ --line-soft: #122312; --text: #c9ffcf; /* phosphor primary text */ --text-dim: #5fae67; /* secondary text */ --text-faint: #3a6e40; --gold: #7dff5e; /* primary accent = green signal */ --gold-soft: #4fbf3a; --teal: #36e0d6; /* donor */ --rose: #ff5d5d; /* recipient (alert red) */ --violet: #ffd23f; /* path / highlight (amber) */ --r: 2px; /* Terminal is mono-forward: even body/sans become monospace for the analyst-console feel. */ --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --serif: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --sans: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --accent-contrast: #021a02; --hero-bg: radial-gradient(120% 90% at 70% 10%, #061206 0%, #000000 72%); --grain-opacity: 0.06; } /* ============================================================================ DAYLIGHT — clean light professional. Cool neutral paper, slate ink, a single confident indigo accent. The "boardroom / dashboard" theme. ========================================================================== */ [data-theme="daylight"] { --ink: #eef1f6; /* cool neutral canvas */ --ink-2: #f7f9fc; /* panel surface */ --ink-3: #ffffff; /* raised surface */ --line: #d3dae6; /* hairline borders */ --line-soft: #e3e8f0; --text: #141a26; /* near-black slate text */ --text-dim: #5a6680; /* secondary text */ --text-faint: #9aa3b5; --gold: #2f5fe0; /* confident indigo accent */ --gold-soft: #2547ad; --teal: #0e8f86; /* donor */ --rose: #d6336c; /* recipient */ --violet: #7048e8; /* path / highlight */ --r: 5px; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --serif: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --accent-contrast: #ffffff; --hero-bg: linear-gradient(180deg, #f7f9fc 0%, #e4e9f2 100%); --grain-opacity: 0.012; --map-bg: radial-gradient(120% 90% at 70% 10%, #eef1f6 0%, #dbe2ee 72%); /* light cool map */ --map-ink: #141a26; /* dark slate ink reads on the light map */ /* cool indigo depth layers for the daylight map */ --map-glow-a: rgba(47,95,224,0.10); --map-glow-b: rgba(112,72,232,0.09); --map-glow-c: rgba(14,143,134,0.06); --map-dot: rgba(30,45,85,0.22); --map-dot-size: 1.1px; --map-dot-gap: 24px; --map-vignette: rgba(70,90,130,0.20); --map-orb-shadow: rgba(20,28,50,0.35); /* cool cast shadow under orbs on paper */ /* light frosted glass for overlays on the cool map */ --glass-bg: rgba(247, 249, 252, 0.6); --glass-border: rgba(255, 255, 255, 0.75); --glass-blur: 16px; --glass-highlight: rgba(255, 255, 255, 0.95); --glass-shadow: rgba(20, 28, 50, 0.22); --glass-tint: rgba(255, 255, 255, 0.4); --map-florida-opacity: 0.16; --map-florida-blend: multiply; /* tints the cool paper on daylight */ } /* ---------------------------------------------------------------------------- Light-theme legibility nudges. The app's app.css/auth.css hardcode a couple of dark-on-gold text colors (#14110a) for buttons; on light themes the gold tokens already carry enough contrast, but the film-grain "screen" blend looks wrong on light surfaces, so it is dialed down via --grain-opacity above and we flip its blend mode here for light themes. ---------------------------------------------------------------------------- */ [data-theme="court"] .grain, [data-theme="daylight"] .grain { mix-blend-mode: multiply; } /* ---------------------------------------------------------------------------- LIGHT-THEME map depth. On a bright background the dark-theme nebula barely reads, so the light themes get a stronger nebula (multiply-blended so the glows tint the paper instead of washing it out). The dot grid + vignette (::after) are inherited from app.css unchanged. ---------------------------------------------------------------------------- */ [data-theme="court"] .map-pane::before, [data-theme="daylight"] .map-pane::before { mix-blend-mode: multiply; filter: blur(10px) saturate(1.15); opacity: 1; } /* ---------------------------------------------------------------------------- LIGHT-THEME map-overlay surfaces. app.css hardcodes dark glassy backgrounds (rgba(7,8,11,…)/rgba(14,18,28,…)) and white text (#f4f6fb) on the map overlays — those stay dark / go invisible on the light themes. Re-skin them here to light surfaces + dark text using the theme tokens. Scoped to the two light themes only, so dark themes are untouched. ---------------------------------------------------------------------------- */ /* Floating PANELS on the light map — layered elevation so they lift cleanly off the bright canvas: a tight contact shadow + a soft ambient shadow + a hairline ring + an inset top highlight (the "lit edge" of a raised card). */ [data-theme="court"] .map-legend, [data-theme="daylight"] .map-legend, [data-theme="court"] .tooltip, [data-theme="daylight"] .tooltip, [data-theme="court"] .detail-card, [data-theme="daylight"] .detail-card, [data-theme="court"] .search-panel .sp-body, [data-theme="daylight"] .search-panel .sp-body { background: var(--ink-2); color: var(--text); border: 1px solid var(--line); box-shadow: 0 2px 4px rgba(20,26,46,0.18), 0 10px 24px rgba(20,26,46,0.28), 0 24px 48px rgba(20,26,46,0.20), inset 0 1px 0 rgba(255,255,255,0.8); } /* Floating BUTTONS / pills on the light map — smaller but same lifted feel. */ [data-theme="court"] .node-actions .na-btn, [data-theme="daylight"] .node-actions .na-btn, [data-theme="court"] .map-selected-chip, [data-theme="daylight"] .map-selected-chip, [data-theme="court"] .search-panel .sp-toggle, [data-theme="daylight"] .search-panel .sp-toggle { background: var(--ink-3); color: var(--text); border: 1px solid var(--line); box-shadow: 0 2px 4px rgba(20,26,46,0.22), 0 6px 14px rgba(20,26,46,0.24), inset 0 1px 0 rgba(255,255,255,0.9); } /* The map HEADER bar + its stat group + canvas controls — give the top strip a faint raised surface and a bottom edge so it separates from the canvas. */ [data-theme="court"] .map-header, [data-theme="daylight"] .map-header { background: linear-gradient(180deg, color-mix(in srgb, var(--ink-2) 94%, transparent), color-mix(in srgb, var(--ink-2) 80%, transparent)); border-bottom: 1px solid var(--line); box-shadow: 0 2px 10px rgba(20,26,46,0.08); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } [data-theme="court"] .map-counts, [data-theme="daylight"] .map-counts, [data-theme="court"] .mc-details-btn, [data-theme="daylight"] .mc-details-btn, [data-theme="court"] .canvas-switcher, [data-theme="daylight"] .canvas-switcher, [data-theme="court"] .canvas-btn, [data-theme="daylight"] .canvas-btn, [data-theme="court"] .rank-btn, [data-theme="daylight"] .rank-btn { box-shadow: 0 1px 3px rgba(20,26,46,0.18), inset 0 1px 0 rgba(255,255,255,0.8); } /* Modals (entity details + confirm/alert) — deeper elevation so they clearly float above the dimmed light page. */ [data-theme="court"] .em-dialog, [data-theme="daylight"] .em-dialog, [data-theme="court"] .am-dialog, [data-theme="daylight"] .am-dialog { box-shadow: 0 2px 6px rgba(20,26,46,0.14), 0 20px 50px rgba(20,26,46,0.26), inset 0 1px 0 rgba(255,255,255,0.8); } /* On light themes the modal backdrop should be a light scrim, not near-black. */ [data-theme="court"] .em-backdrop, [data-theme="daylight"] .em-backdrop, [data-theme="court"] .am-backdrop, [data-theme="daylight"] .am-backdrop { background: rgba(40,48,70,0.28); } [data-theme="court"] #selectDim, [data-theme="daylight"] #selectDim { background: rgba(40,48,70,0.18); } [data-theme="court"] .search-panel .sp-toggle, [data-theme="daylight"] .search-panel .sp-toggle, [data-theme="court"] .search-panel .sp-name, [data-theme="daylight"] .search-panel .sp-name, [data-theme="court"] .search-panel .sp-input, [data-theme="daylight"] .search-panel .sp-input { color: var(--text); } [data-theme="court"] .search-panel .sp-input, [data-theme="daylight"] .search-panel .sp-input { background: var(--ink); } [data-theme="court"] .search-panel .sp-row, [data-theme="daylight"] .search-panel .sp-row { background: rgba(0,0,0,0.03); } /* The theme-switcher control. Self-contained so it themes itself via the tokens above and can be dropped into any header. */ .theme-switch { position: relative; display: inline-flex; align-items: center; font-family: var(--mono); } .theme-switch-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); background: var(--ink-3); border: 1px solid var(--line); border-radius: 999px; padding: 6px 11px; cursor: pointer; transition: border-color 0.15s, color 0.15s; white-space: nowrap; } .theme-switch-btn:hover { border-color: var(--gold-soft); color: var(--text); } .theme-switch-btn .ts-swatch { width: 11px; height: 11px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 1px var(--line) inset, 0 0 7px var(--gold); } .theme-switch-btn .ts-caret { font-size: 9px; opacity: 0.7; } .theme-switch-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 200; min-width: 196px; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); padding: 6px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5); display: none; flex-direction: column; gap: 2px; } .theme-switch.open .theme-switch-menu { display: flex; } .theme-switch-menu .ts-head { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint); padding: 5px 8px 7px; } .theme-opt { display: flex; align-items: center; gap: 10px; padding: 8px 9px; border-radius: var(--r); cursor: pointer; border: 1px solid transparent; background: none; width: 100%; text-align: left; transition: background 0.12s, border-color 0.12s; } .theme-opt:hover { background: var(--ink-3); border-color: var(--line); } .theme-opt[aria-checked="true"] { border-color: var(--gold-soft); background: var(--ink-3); } .theme-opt .to-dots { display: inline-flex; gap: 3px; flex: none; } .theme-opt .to-dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,0.25) inset; } .theme-opt .to-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--text); flex: 1; } .theme-opt .to-desc { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: 0.02em; color: var(--text-faint); text-transform: none; margin-top: 2px; } .theme-opt .to-check { color: var(--gold); font-size: 12px; opacity: 0; flex: none; } .theme-opt[aria-checked="true"] .to-check { opacity: 1; }