/* ============================================================================ * index-dark.css — Radar landing page (public/index.php) dark-theme overrides * ---------------------------------------------------------------------------- * Scope: every selector is prefixed with `html[data-theme="dark"]` so this * file is a strict no-op in light mode. Loaded AFTER radar-dark.css (which * owns the shared tokens, background, and nav), so it only carries the * bits radar-dark.css can't reach generically. * * index.php is built almost entirely from Tailwind Play utility classes wired * to a hardcoded Material-3 *light* palette (bg-surface, text-on-surface, * bg-white, border-outline-variant…) plus a few inline brand-gold colors * (#705d00 / #ffd700). radar-dark.css does not remap those utilities, so we * re-tint them here. Tailwind Play emits single-class rules (0,1,0); these * attribute+class selectors (0,2,1) win on specificity AND load order. * * Tokens (--d-*) are defined on html[data-theme="dark"] in radar-dark.css. * Owner: index.php wiring agent. radar-dark.css is read-only to this file. * ========================================================================== */ /* ---- Typography: Roboto parity for the landing page ---------------------- */ html[data-theme="dark"] body { font-family: 'Roboto', sans-serif; } html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4 { font-family: 'Roboto', sans-serif; } /* ---- Page surfaces (Tailwind Material-3 light tokens -> dark) ------------- */ html[data-theme="dark"] .bg-surface, html[data-theme="dark"] .bg-surface-bright, html[data-theme="dark"] .bg-\[\#fcf9f4\] { background-color: transparent !important; } /* footer hardcodes bg-[#fcf9f4] with an opacity variant on the nav (handled by radar-dark.css); the footer itself sits on the body gradient. */ html[data-theme="dark"] footer.bg-\[\#fcf9f4\] { background: transparent !important; border-top-color: var(--d-border-glass) !important; } /* Light "container" tiers -> faint glass fills on the dark canvas */ html[data-theme="dark"] .bg-surface-container, html[data-theme="dark"] .bg-surface-container-low, html[data-theme="dark"] .bg-surface-container-high, html[data-theme="dark"] .bg-surface-container-highest { background-color: rgba(255, 255, 255, 0.04) !important; } /* Section bands that use surface-container-low as a full-width backdrop read better a touch deeper than a card. */ html[data-theme="dark"] section.bg-surface-container-low { background-color: rgba(0, 0, 0, 0.25) !important; } /* White cards/inputs/tables -> dark glass surface */ html[data-theme="dark"] .bg-white { background-color: var(--d-surface-solid) !important; } html[data-theme="dark"] .bg-white\/10 { background-color: rgba(255, 255, 255, 0.08) !important; } html[data-theme="dark"] .bg-white\/15 { background-color: rgba(255, 255, 255, 0.12) !important; } /* ---- Text colors -------------------------------------------------------- */ html[data-theme="dark"] .text-on-surface { color: var(--d-text) !important; } html[data-theme="dark"] .text-on-surface\/70, html[data-theme="dark"] .text-on-surface\/60, html[data-theme="dark"] .text-on-surface\/55 { color: var(--d-text-2) !important; } html[data-theme="dark"] .text-on-surface\/50, html[data-theme="dark"] .text-on-surface\/40 { color: var(--d-text-3) !important; } html[data-theme="dark"] .text-on-surface\/35, html[data-theme="dark"] .text-on-surface\/30, html[data-theme="dark"] .text-on-surface\/25 { color: var(--d-text-muted) !important; } html[data-theme="dark"] .text-\[\#1c1c19\] { color: var(--d-text) !important; } html[data-theme="dark"] .text-\[\#1c1c19\]\/60, html[data-theme="dark"] .text-\[\#1c1c19\]\/55, html[data-theme="dark"] .text-\[\#1c1c19\]\/40 { color: var(--d-text-3) !important; } /* ---- Borders / dividers ------------------------------------------------- */ html[data-theme="dark"] .border-outline-variant\/30, html[data-theme="dark"] .border-outline-variant\/20, html[data-theme="dark"] .border-outline-variant\/15, html[data-theme="dark"] .border-outline-variant\/10, html[data-theme="dark"] .border-on-surface\/20 { border-color: var(--d-border-glass) !important; } html[data-theme="dark"] .bg-outline-variant\/20 { background-color: var(--d-border-glass) !important; } html[data-theme="dark"] .divide-outline-variant\/10 > :not([hidden]) ~ :not([hidden]) { border-color: var(--d-border-faint) !important; } /* ---- Brand gold -> single yellow accent (#dee073) ----------------------- */ html[data-theme="dark"] .text-\[\#705d00\] { color: var(--d-accent) !important; } html[data-theme="dark"] .border-\[\#705d00\], html[data-theme="dark"] .border-\[\#705d00\]\/40 { border-color: var(--d-accent-soft) !important; } html[data-theme="dark"] .bg-\[\#705d00\] { background-color: var(--d-accent) !important; } html[data-theme="dark"] .bg-\[\#ffd700\] { background-color: var(--d-accent) !important; } html[data-theme="dark"] .bg-\[\#ffd700\]\/20 { background-color: var(--d-accent-tab-bg) !important; } html[data-theme="dark"] .bg-\[\#ffd700\]\/15 { background-color: var(--d-accent-win-bg) !important; } html[data-theme="dark"] .text-\[\#ffd700\] { color: var(--d-accent) !important; } /* gradient-text headline ("Curator") -> accent gradient */ html[data-theme="dark"] .gradient-text { background: linear-gradient(135deg, #b9bb5a, var(--d-accent)) !important; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Live-feed pulse dot + market-pulse dot (hardcoded golds) */ html[data-theme="dark"] .bg-\[\#ffd700\].rounded-full, html[data-theme="dark"] .bg-\[\#705d00\].rounded-full { background-color: var(--d-accent) !important; } /* Hero search "Go" button + CTA gradients (from-/to- brand gold) */ html[data-theme="dark"] .from-\[\#705d00\] { --tw-gradient-from: #b9bb5a var(--tw-gradient-from-position) !important; } html[data-theme="dark"] .to-\[\#b89700\], html[data-theme="dark"] .to-\[\#ffd700\] { --tw-gradient-to: var(--d-accent) var(--tw-gradient-to-position) !important; } html[data-theme="dark"] button[type="submit"], html[data-theme="dark"] a.from-\[\#705d00\] { color: var(--d-accent-ink, #1c1c1a) !important; } /* ---- Hero search input -------------------------------------------------- */ html[data-theme="dark"] #hero-search-input { background-color: var(--d-control-bg) !important; color: var(--d-text) !important; border-color: var(--d-border-input) !important; box-shadow: var(--d-shadow-card) !important; } html[data-theme="dark"] #hero-search-input::placeholder { color: var(--d-text-muted) !important; } html[data-theme="dark"] #hero-search-input:focus { border-color: var(--d-accent-soft) !important; box-shadow: 0 0 0 2px rgba(var(--d-accent-rgb), 0.18) !important; } /* ---- Tinted info chips (workspace_premium / tertiary blue) -------------- */ html[data-theme="dark"] .bg-\[\#0060ac\]\/8 { background-color: rgba(127, 181, 230, 0.12) !important; } html[data-theme="dark"] .text-\[\#0060ac\] { color: var(--d-tertiary, #7fb5e6) !important; } /* ---- The two intentionally-dark sections (CTA banner + footer brand mark) * already sit on #1c1c19 in light mode. On the dark canvas, soften them so * they don't disappear into the body and align their accents. ------------- */ html[data-theme="dark"] section.bg-\[\#1c1c19\] { background: linear-gradient(135deg, #161614 0%, #0a0a0a 100%) !important; border-top: 1px solid var(--d-border-glass); border-bottom: 1px solid var(--d-border-glass); } html[data-theme="dark"] .text-\[\#ffd700\].text-base, html[data-theme="dark"] section.bg-\[\#1c1c19\] .text-\[\#ffd700\] { color: var(--d-accent) !important; } /* ---- JS-rendered funding table rows (built in renderFundingTable) -------- */ html[data-theme="dark"] #funding-tbody tr:hover { background-color: rgba(255, 255, 255, 0.04) !important; } html[data-theme="dark"] #funding-tbody .text-\[\#1c1c19\] { color: var(--d-text) !important; } html[data-theme="dark"] #funding-tbody .text-\[\#1c1c19\]\/40 { color: var(--d-text-muted) !important; } html[data-theme="dark"] #funding-tbody .bg-\[\#1c1c19\] { background-color: #2a2a28 !important; color: var(--d-text) !important; } html[data-theme="dark"] #funding-tbody .bg-\[\#f0ede8\] { background-color: rgba(255, 255, 255, 0.06) !important; color: var(--d-text-2) !important; } html[data-theme="dark"] #funding-tbody .text-\[\#0060ac\] { color: var(--d-tertiary, #7fb5e6) !important; } html[data-theme="dark"] tbody#funding-tbody tr.hover\:bg-\[\#f6f3ee\]:hover { background-color: rgba(255, 255, 255, 0.04) !important; } /* ---- Skeletons -> dark shimmer ------------------------------------------ */ html[data-theme="dark"] .skeleton, html[data-theme="dark"] .animate-pulse { background-color: rgba(255, 255, 255, 0.06) !important; } /* ---- Footer brand wordmark legibility ----------------------------------- */ html[data-theme="dark"] footer .text-\[\#1c1c19\] { color: var(--d-text) !important; } /* ===== market.ai polish (2026-06-02) ===== */ /* Hero search focus ring leaked raw brand gold; align to the token. */ html[data-theme="dark"] #hero-search-input:focus { box-shadow: 0 0 0 2px var(--d-accent-soft) !important; }