/* ============================================================================ * radar-dark.css — Radar DARK theme (market.ai report.php parity) * ---------------------------------------------------------------------------- * Authoritative blueprint: radar/DARK_THEME_SPEC.md * Source of truth for tokens/components: market.ai/front/report.php (lines * 471-988), market.ai/report/render.php (color tokens), market.ai/src/php/ * preloader2.php (tile preloader). * * SCOPE: every selector is prefixed with `html[data-theme="dark"]` so this * sheet is purely additive — light mode is the untouched default until * theme.js sets the attribute. Because radar's pages load Tailwind Play * (assets/vendor/tailwind.play.js) AND inline page CSS, the `html[...]` * prefix raises specificity high enough to win over Tailwind utilities and * the page CSS — PROVIDED THIS SHEET LOADS AFTER the page CSS (link order * documented at the bottom of the Wire phase notes). * * Accent discipline: ONE accent — #dee073 — at a descending opacity ramp. * No second hue. Greens/ambers/reds appear ONLY as semantic status colors. * ========================================================================== */ /* ============================================================================ * 1. DESIGN TOKENS * Scoped to the root (theme.js sets this default). * ========================================================================== */ html[data-theme="dark"] { /* ---- Accent (the one yellow, used at varying opacity) ---- */ --d-accent: #dee073; /* primary accent, rgb(222,224,115) */ --d-accent-rgb: 222, 224, 115; /* for rgba() composition */ --d-accent-soft: rgba(222,224,115,0.45); /* focus borders */ --d-accent-hairline: rgba(222,224,115,0.70); /* gradient-hairline center stop */ --d-accent-tab-bg: rgba(222,224,115,0.14); /* active tab fill */ --d-accent-tab-line: rgba(222,224,115,0.42); /* active tab inset border */ --d-accent-win-bg: rgba(222,224,115,0.12); /* active window-chip fill */ --d-accent-win-line: rgba(222,224,115,0.34); /* active window-chip inset border */ --d-accent-glow: rgba(222,224,115,0.60); /* hover dot glow */ --d-accent-h2: #f9c74f; /* legacy h2 heading yellow */ --d-accent-ink: #1c1c1a; /* text/icon on a yellow fill */ /* ---- Backgrounds ---- */ --d-bg: #1f1f1c; /* body fallback (near-black) */ --d-bg-gradient: linear-gradient(to bottom, #000, #1a1a1a); /* body gradient */ --d-bg-deep: #252525; /* chart / deepest surface */ --d-bg-overlay: rgba(15,15,13,0.82); /* modal scrim */ /* Full page background: gold + offset white dot grids (fixed) over the page gradient over the base color. Used by every body rule so the dotted texture is consistent and has no stacking impact. */ --d-body-bg: radial-gradient(rgba(222,224,115,0.05) 1px, transparent 1.7px) 0 0 / 22px 22px fixed, radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1.7px) 11px 11px / 22px 22px fixed, var(--d-bg-gradient) 0 0 / 100% 100% fixed, var(--d-bg); /* ---- Surfaces (cards / panels) ---- */ --d-surface-solid: #3f3f3f; /* flat surface */ --d-surface-grad: rgba(255,255,255,0.055); /* FLAT card/panel surface (no tall grey->dark gradient) */ --d-surface-grad-hover: rgba(255,255,255,0.09); /* flat hover surface */ --d-surface-glass: rgba(255,255,255,0.10); /* tag-cloud glass */ --d-surface-low: rgba(255,255,255,0.04); /* nested tile (light surface-low parity) */ --d-surface-lower: rgba(255,255,255,0.06); /* nested-tile hover */ --d-control-bg: rgba(0,0,0,0.22); /* inputs / selects */ --d-tab-track: rgba(255,255,255,0.035); /* tab container */ --d-win-track: rgba(255,255,255,0.025); /* window-selector container */ --d-chip-bg: rgba(255,255,255,0.025); /* meta pill */ /* ---- Borders / dividers ---- */ --d-border-solid: #5e5d5d; /* hard border */ --d-border-glass: rgba(255,255,255,0.06); /* card glass border */ --d-border-input: rgba(255,255,255,0.08); /* input border */ --d-border-faint: rgba(255,255,255,0.05); /* row separators */ /* ---- Text ---- */ --d-text: #f1efe8; /* primary off-white (headings, counts) */ --d-text-2: #d4d1c8; /* secondary body text */ --d-text-3: #b2afa6; /* tertiary / descriptions */ --d-text-muted: #8c897f; /* fine print, metadata, counts */ --d-text-ticker: #6b6960; /* timestamps in mono ticker */ /* ---- Status / sentiment ---- */ --d-tone-neutral: rgba(222,224,115,0.35); --d-tone-negative: #e8a23a; --d-tone-negative-glow: rgba(232,162,58,0.45); --d-tone-critical: #e8553a; --d-tone-critical-glow: rgba(232,85,58,0.55); --d-pos: #6cc79b; --d-pos-bg: #16352c; /* high momentum */ --d-warn: #e0c46a; --d-warn-bg: #352d13; /* mid momentum */ --d-neg: #d4836f; --d-neg-bg: #351d1b; /* low momentum */ /* ---- Gradients (accent) ---- */ --d-hairline: linear-gradient(90deg, transparent, rgba(222,224,115,0.70), transparent); --d-heatbar: linear-gradient(90deg, rgba(222,224,115,0.40), #dee073); --d-rail: rgba(255,255,255,0.06); /* heat-bar rail */ /* ---- Effects ---- */ --d-blur: blur(6px); --d-shadow-card: 0 8px 32px rgba(0,0,0,0.30); --d-shadow-btn: 0 2px 8px rgba(0,0,0,0.30); --d-radius: 14px; --d-radius-sm: 10px; --d-radius-pill: 999px; --d-font: 'Roboto', sans-serif; --d-font-mono: ui-monospace, "SF Mono", Menlo, monospace; } /* ============================================================================ * 2. FOUNDATION — body, scrollbars, selection, fonts * ========================================================================== */ /* Dot texture lives in the BODY BACKGROUND (not a ::before overlay) so it has ZERO impact on stacking — the fixed nav (z-50) and in-page tab bars keep their own z-index. Layers: gold dot grid + offset white dot grid + page gradient, all over the near-black base. Dots are fixed so they don't scroll. */ html[data-theme="dark"] body { background: var(--d-body-bg) !important; color: var(--d-text); font-family: var(--d-font); } /* Roboto under dark only — light pages keep Inter/Manrope */ html[data-theme="dark"] body, html[data-theme="dark"] .d-card, html[data-theme="dark"] .d-input { font-family: 'Roboto', sans-serif; } /* Scrollbars */ html[data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(222,224,115,0.22); border-radius: 4px; } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(222,224,115,0.40); } html[data-theme="dark"] * { scrollbar-color: rgba(222,224,115,0.30) transparent; scrollbar-width: thin; } /* Text selection */ html[data-theme="dark"] ::selection { background: rgba(222,224,115,0.28); color: var(--d-text); } /* Generic link tint */ html[data-theme="dark"] a { color: var(--d-text-2); } html[data-theme="dark"] a:hover { color: var(--d-accent); } /* ============================================================================ * 3. SIGNATURE — reusable yellow gradient-hairline * Apply `.d-hairline-host` (the host needs position:relative) OR rely on the * per-component ::before rules below. The hairline sits 1px ABOVE the border * (top:-1px), inset from the sides, transparent -> yellow -> transparent. * ========================================================================== */ html[data-theme="dark"] .d-hairline-host { position: relative; } html[data-theme="dark"] .d-hairline-host::before, html[data-theme="dark"] .d-hairline::before { content: ""; position: absolute; top: -1px; left: 18px; right: 18px; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(222,224,115,0.7), transparent); opacity: 0.55; } /* ============================================================================ * 4. GENERIC COMPONENT VOCABULARY (.d-*) — used by Wire phase + JS-rendered nodes * ========================================================================== */ /* ---- Card / panel ---- */ html[data-theme="dark"] .d-card { position: relative; background: var(--d-surface-grad); border: 1px solid var(--d-border-glass); border-radius: var(--d-radius); padding: 22px 22px 18px; backdrop-filter: var(--d-blur); -webkit-backdrop-filter: var(--d-blur); transition: border-color .25s ease, transform .25s ease, background .25s ease; } html[data-theme="dark"] .d-card::before { content: ""; position: absolute; top: -1px; left: 18px; right: 18px; height: 1px; background: linear-gradient(90deg, transparent, rgba(222,224,115,0.7), transparent); opacity: 0.55; pointer-events: none; } html[data-theme="dark"] .d-card:hover { border-color: rgba(222,224,115,0.35); transform: translateY(-2px); background: var(--d-surface-grad-hover); } html[data-theme="dark"] .d-panel { position: relative; max-width: 720px; margin: 0 auto; background: var(--d-surface-grad); border: 1px solid var(--d-border-glass); border-radius: var(--d-radius); padding: 26px 28px 22px; backdrop-filter: var(--d-blur); -webkit-backdrop-filter: var(--d-blur); } html[data-theme="dark"] .d-panel::before { content: ""; position: absolute; top: -1px; left: 22px; right: 22px; height: 1px; background: linear-gradient(90deg, transparent, rgba(222,224,115,0.7), transparent); pointer-events: none; } html[data-theme="dark"] .card, html[data-theme="dark"] .d-card-flat { background-color: var(--d-surface-solid); border: 1px solid var(--d-border-solid); border-radius: 5px; color: var(--d-text); } html[data-theme="dark"] .chart-container, html[data-theme="dark"] .r-chart-wrap canvas { background-color: var(--d-bg-deep); } /* ---- Buttons ---- */ html[data-theme="dark"] .d-btn { background: var(--d-accent); color: var(--d-accent-ink); font-family: var(--d-font); font-weight: 700; font-size: 14px; padding: 12px 22px; border: 0; border-radius: var(--d-radius-sm); cursor: pointer; letter-spacing: 0.3px; transition: transform .15s ease; } html[data-theme="dark"] .d-btn:hover { transform: translateY(-1px); } html[data-theme="dark"] .d-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; } html[data-theme="dark"] .d-btn-pill { background: var(--d-accent); color: var(--d-accent-ink); font-weight: 700; font-size: 13px; padding: 7px 14px; border: 0; border-radius: var(--d-radius-pill); box-shadow: var(--d-shadow-btn); cursor: pointer; } html[data-theme="dark"] .d-btn-ghost { position: relative; z-index: 0; overflow: hidden; cursor: pointer; background: transparent; color: #e8e6df; border: none; border-radius: 9px; padding: 12px 26px; font-family: var(--d-font); font-size: 13px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; transition: color .2s, transform .15s; } html[data-theme="dark"] .d-btn-ghost:hover { color: var(--d-accent); transform: translateY(-1px); } html[data-theme="dark"] .d-btn-ghost::before { content: ""; position: absolute; z-index: -2; left: 50%; top: 50%; width: 240%; height: 480%; transform: translate(-50%,-50%); background: #3a3a31; } html[data-theme="dark"] .d-btn-ghost::after { content: ""; position: absolute; z-index: -1; inset: 2px; border-radius: 7px; background: #23231f; } html[data-theme="dark"] .d-btn-ghost.is-running::before { background: conic-gradient(from 0deg, #23231f 0deg, #dee073 70deg, #fff6b0 100deg, #dee073 130deg, #23231f 220deg, #23231f 360deg); animation: dr-border-spin 3s linear infinite; } @keyframes dr-border-spin { from { transform: translate(-50%,-50%) rotate(0); } to { transform: translate(-50%,-50%) rotate(360deg); } } /* ---- Tabs + window chips ---- */ html[data-theme="dark"] .d-tabs { display: inline-flex; gap: 4px; padding: 5px; background: var(--d-tab-track); border: 1px solid var(--d-border-glass); border-radius: 12px; } html[data-theme="dark"] .d-tab { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 18px; min-width: 110px; background: transparent; border: 0; cursor: pointer; border-radius: 8px; color: var(--d-text-3); font-family: var(--d-font); transition: all .18s ease; } html[data-theme="dark"] .d-tab:hover:not(.is-active) { color: var(--d-text); background: rgba(255,255,255,0.04); } html[data-theme="dark"] .d-tab.is-active { background: var(--d-accent-tab-bg); color: var(--d-text); box-shadow: inset 0 0 0 1px var(--d-accent-tab-line); } html[data-theme="dark"] .d-tab.is-disabled { opacity: .32; cursor: not-allowed; } html[data-theme="dark"] .d-wins { display: inline-flex; gap: 2px; padding: 3px; background: var(--d-win-track); border: 1px solid var(--d-border-faint); border-radius: 9px; } html[data-theme="dark"] .d-win { background: transparent; border: 0; cursor: pointer; padding: 6px 12px; border-radius: 6px; font-family: var(--d-font); font-weight: 600; font-size: 12px; letter-spacing: .3px; color: var(--d-text-muted); transition: all .15s ease; } html[data-theme="dark"] .d-win:hover:not(.is-active) { color: var(--d-text-2); background: rgba(255,255,255,0.04); } html[data-theme="dark"] .d-win.is-active { color: var(--d-text); background: var(--d-accent-win-bg); box-shadow: inset 0 0 0 1px var(--d-accent-win-line); } /* ---- Inputs / selects ---- */ html[data-theme="dark"] .d-input, html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] textarea { background: var(--d-control-bg); color: var(--d-text); border: 1px solid var(--d-border-input); border-radius: var(--d-radius-sm); font-family: var(--d-font); transition: border-color .18s ease; } html[data-theme="dark"] .d-input { width: 100%; padding: 14px 16px; font-size: 15px; } html[data-theme="dark"] .d-input:focus, html[data-theme="dark"] input[type="text"]:focus, html[data-theme="dark"] input[type="search"]:focus, html[data-theme="dark"] input[type="number"]:focus, html[data-theme="dark"] textarea:focus { outline: 0; border-color: var(--d-accent-soft); } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--d-text-muted); } html[data-theme="dark"] .d-select, html[data-theme="dark"] select { padding: 9px 12px; background: var(--d-control-bg); color: var(--d-text); border: 1px solid var(--d-border-input); border-radius: 8px; font-family: var(--d-font); font-size: 13.5px; } html[data-theme="dark"] select option { background: #252523; color: var(--d-text); } /* ---- Status dots + heat bar ---- */ html[data-theme="dark"] .d-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } html[data-theme="dark"] .d-dot.neutral { background: var(--d-tone-neutral); } html[data-theme="dark"] .d-dot.negative { background: var(--d-tone-negative); box-shadow: 0 0 6px var(--d-tone-negative-glow); } html[data-theme="dark"] .d-dot.critical { background: var(--d-tone-critical); box-shadow: 0 0 7px var(--d-tone-critical-glow); } html[data-theme="dark"] .d-heat-rail { height: 6px; width: 100%; background: var(--d-rail); border-radius: 3px; overflow: hidden; } html[data-theme="dark"] .d-heat-bar { height: 100%; width: var(--w,100%); background: var(--d-heatbar); border-radius: 3px; } /* ---- Typography helpers ---- */ html[data-theme="dark"] .d-title { font-family: 'Roboto', sans-serif; font-weight: 900; font-size: 38px; color: var(--d-text); letter-spacing: -.5px; line-height: 1.05; text-shadow: 0 2px 24px rgba(0,0,0,.6); } html[data-theme="dark"] .d-eyebrow { font-weight: 600; font-size: 11px; letter-spacing: 3.2px; color: var(--d-accent); opacity: .85; } @media (max-width: 760px) { html[data-theme="dark"] .d-title { font-size: 28px; } } /* ---- Effects ---- */ html[data-theme="dark"] .d-pulse { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--d-accent); animation: ht-pulse 2.2s infinite cubic-bezier(.4,0,.6,1); } @keyframes ht-pulse { 0% { box-shadow: 0 0 0 0 rgba(222,224,115,.55); } 70% { box-shadow: 0 0 0 10px rgba(222,224,115,0); } 100% { box-shadow: 0 0 0 0 rgba(222,224,115,0); } } html[data-theme="dark"] .d-skel-line { height: 12px; border-radius: 4px; margin: 10px 0; background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.1), rgba(255,255,255,.05)); background-size: 200% 100%; animation: ht-shimmer 1.5s infinite linear; } @keyframes ht-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } html[data-theme="dark"] .d-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: 20px; margin-top: 26px; } @media (max-width: 760px) { html[data-theme="dark"] .d-grid { grid-template-columns: 1fr; gap: 14px; } } @keyframes ht-rise { to { opacity: 1; transform: translateY(0); } } @keyframes ht-fill { to { width: var(--w,100%); } } /* ============================================================================ * 5. SHARED NAV (src/php/shared-nav.php) — restyle, NOT invert. * shared-nav is Tailwind-class-based: