/* ============================================================================ Upfront Investment — Unified Theme System ---------------------------------------------------------------------------- Light theme = "research terminal" (Morningstar / Seeking Alpha) Dark theme = "tech / AI terminal" (electric, glowing, data-forward) Loaded AFTER main.css so it overrides the legacy hardcoded colors. Theme resolution: - theme-init (inline, in ) resolves the stored preference ('system' | 'light' | 'dark') into a concrete value and sets BEFORE first paint (no FOUC). - A prefers-color-scheme fallback covers the no-JS / pre-paint case. ============================================================================ */ /* ------------------------------- TOKENS ---------------------------------- */ :root { color-scheme: light; /* surfaces */ --page-bg: #f6f8fb; --surface: #ffffff; --surface-2: #f1f4f9; --line: #e5e9f0; /* text */ --tx: #101828; --tx-2: #5a6478; --tx-3: #8b95a7; /* brand + data */ --brand: #2b57d6; --brand-2: #c96a17; /* peer / 2nd series */ --bench: #98a2b3; /* benchmark line */ --up: #0b8a4b; --up-soft: #e6f4ec; --down: #d1364a; --down-soft: #fbe9ec; --hold: #b0740a; /* premium / locked accent */ --veil: rgba(255, 255, 255, .55); /* on-brand ink (text that sits on a --brand fill) */ --on-brand: #ffffff; /* navbar (dark in both themes) */ --nav-bg: #0f1626; --nav-blur: none; --nav-border: transparent; --nav-tx: #aeb9cc; --nav-tx-strong: #ffffff; --nav-mark: linear-gradient(135deg, #2b57d6, #5b8cff); /* typography */ --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace; /* shape */ --radius: 12px; --radius-lg: 14px; --radius-sm: 8px; --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 12px 32px -12px rgba(16, 24, 40, .22); /* decorative page background (dark theme only) */ --page-bg-image: none; } /* Dark tokens — set explicitly by theme-init (preferred path). */ :root[data-theme="dark"] { color-scheme: dark; --page-bg: #080b16; --surface: #121a2e; --surface-2: #0f1626; --line: #26324f; --tx: #eaf0ff; --tx-2: #93a2c9; --tx-3: #5f6f96; --brand: #7c9bff; --brand-2: #22d3ee; --bench: #5f6f96; --up: #2ee6a6; --up-soft: rgba(46, 230, 166, .13); --down: #ff5d7a; --down-soft: rgba(255, 93, 122, .14); --hold: #ffcf5c; --veil: rgba(9, 13, 26, .66); --on-brand: #0a0d13; --nav-bg: rgba(9, 13, 26, .72); --nav-blur: saturate(140%) blur(10px); --nav-border: rgba(124, 155, 255, .16); --nav-tx: #9aa6b8; --nav-tx-strong: #ffffff; --nav-mark: linear-gradient(135deg, #7c5cff, #22d3ee); --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 40px -14px rgba(0, 0, 0, .6); --page-bg-image: radial-gradient(85% 55% at 88% -8%, rgba(124, 92, 255, .30), transparent 55%), radial-gradient(65% 52% at 1% -2%, rgba(34, 211, 238, .17), transparent 52%), radial-gradient(70% 65% at 50% 128%, rgba(124, 92, 255, .14), transparent 60%); } /* No-JS / pre-paint fallback: honor the OS scheme when no explicit choice. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --page-bg: #080b16; --surface: #121a2e; --surface-2: #0f1626; --line: #26324f; --tx: #eaf0ff; --tx-2: #93a2c9; --tx-3: #5f6f96; --brand: #7c9bff; --brand-2: #22d3ee; --bench: #5f6f96; --up: #2ee6a6; --up-soft: rgba(46, 230, 166, .13); --down: #ff5d7a; --down-soft: rgba(255, 93, 122, .14); --hold: #ffcf5c; --veil: rgba(9, 13, 26, .66); --on-brand: #0a0d13; --nav-bg: rgba(9, 13, 26, .72); --nav-blur: saturate(140%) blur(10px); --nav-border: rgba(124, 155, 255, .16); --nav-tx: #9aa6b8; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 40px -14px rgba(0, 0, 0, .6); } } /* ------------------------------- BASE ------------------------------------ */ body { background-color: var(--page-bg); background-image: var(--page-bg-image); background-repeat: no-repeat; background-attachment: fixed; color: var(--tx); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; transition: background-color .25s ease, color .25s ease; } h1, h2, h3, h4, h5, h6 { color: var(--tx); } a { color: var(--brand); } ::selection { background: color-mix(in srgb, var(--brand) 22%, transparent); } /* Legacy shared surfaces pulled onto tokens */ .content-section { background: var(--surface); border-color: var(--line); color: var(--tx); } /* Utility helpers reused by re-skinned pages */ .uf-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .uf-pos { color: var(--up); } .uf-neg { color: var(--down); } /* ------------------------------- NAVBAR ---------------------------------- */ .site-header .navbar, .navbar.bg-dark.fixed-top { background: var(--nav-bg) !important; -webkit-backdrop-filter: var(--nav-blur); backdrop-filter: var(--nav-blur); border-bottom: 1px solid var(--nav-border); } .site-header .navbar-nav .nav-link { color: var(--nav-tx); } .site-header .navbar-nav .nav-link:hover, .site-header .navbar-nav .nav-link.active { color: var(--nav-tx-strong); } .navbar-dark .navbar-brand { color: var(--nav-tx-strong); } /* Theme toggle button in the navbar */ .uf-theme-toggle { display: inline-flex; align-items: center; justify-content: center; align-self: center; width: 34px; height: 34px; margin: 0 6px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 9px; background: rgba(255, 255, 255, .06); color: #dbe3f4; cursor: pointer; font-size: 14px; line-height: 1; transition: background .2s ease, border-color .2s ease, color .2s ease; } .uf-theme-toggle:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .32); color: #fff; } :root[data-theme="dark"] .uf-theme-toggle { border-color: rgba(124, 155, 255, .28); background: rgba(124, 155, 255, .10); color: #cdd8ff; } :root[data-theme="dark"] .uf-theme-toggle:hover { box-shadow: 0 0 14px rgba(124, 155, 255, .35); } /* ------------------------------- FOOTER ---------------------------------- */ .site-footer.bg-light { background: var(--surface) !important; border-top: 1px solid var(--line) !important; } .site-footer .text-muted { color: var(--tx-3) !important; } .site-footer a.text-muted:hover { color: var(--brand) !important; } :root[data-theme="dark"] .social-icon { filter: invert(1) brightness(1.6); opacity: .55; } /* --------------------------- SLIDE-OUT DRAWER ---------------------------- */ .side-menu { background: var(--surface); color: var(--tx); border-left: 1px solid var(--line); box-shadow: -12px 0 40px -18px rgba(0, 0, 0, .5); } .side-menu h1, .side-menu h2, .side-menu h3, .side-menu h4, .side-menu h5, .side-menu label, .side-menu .form-control-label { color: var(--tx); } .side-menu-overlay { background: rgba(3, 6, 14, .5); } :root[data-theme="dark"] .side-menu-overlay { background: rgba(3, 6, 14, .7); } /* --------------------- BOOTSTRAP COMPONENT OVERRIDES --------------------- */ /* Cards */ .card { background: var(--surface); border-color: var(--line); color: var(--tx); } .card-header, .card-footer { background: var(--surface-2); border-color: var(--line); color: var(--tx); } /* Dropdowns (user menu, etc.) */ .dropdown-menu { background: var(--surface); border-color: var(--line); color: var(--tx); box-shadow: var(--shadow); } .dropdown-item { color: var(--tx); } .dropdown-item:hover, .dropdown-item:focus { background: var(--surface-2); color: var(--tx); } .dropdown-divider { border-color: var(--line); } .user-dropdown .dropdown-item { color: var(--tx); } .user-dropdown .dropdown-item i { color: var(--tx-3); } /* Forms */ .form-control { background: var(--surface); border-color: var(--line); color: var(--tx); } .form-control:focus { background: var(--surface); color: var(--tx); border-color: var(--brand); box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--brand) 25%, transparent); } .form-control::placeholder { color: var(--tx-3); } .form-control:disabled, .form-control[readonly] { background: var(--surface-2); } .input-group-text { background: var(--surface-2); border-color: var(--line); color: var(--tx-2); } /* Modals */ .modal-content { background: var(--surface); color: var(--tx); border: 1px solid var(--line); } .modal-header, .modal-footer { border-color: var(--line); } .modal-backdrop.show { opacity: .55; } .close, .btn-close { color: var(--tx); text-shadow: none; } /* Tables */ .table { color: var(--tx); } .table th, .table td { border-color: var(--line); } .table thead th { border-color: var(--line); color: var(--tx-2); } /* List groups / borders / muted text used across pages */ .list-group-item { background: var(--surface); border-color: var(--line); color: var(--tx); } .border, .border-top, .border-bottom, .border-left, .border-right { border-color: var(--line) !important; } .bg-white { background: var(--surface) !important; } .bg-light { background: var(--surface-2) !important; } .text-muted { color: var(--tx-3) !important; } hr { border-top-color: var(--line); } /* Generic buttons */ .btn-primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); } .btn-primary:hover { filter: brightness(1.06); } .btn-outline-secondary { color: var(--tx-2); border-color: var(--line); } .btn-outline-secondary:hover { background: var(--surface-2); color: var(--tx); } /* ---------------------- PREMIUM PROMPTS / OVERLAYS ---------------------- */ .content-overlay { background: var(--veil); } .premium-prompt, .prediction-upgrade-prompt .premium-prompt { /* !important to beat main.css's forced `background: white` on this box */ background: var(--surface) !important; border: 1px solid var(--hold) !important; color: var(--tx) !important; box-shadow: var(--shadow) !important; } .premium-prompt h5 { color: var(--tx) !important; } .premium-prompt p { color: var(--tx-2) !important; } :root[data-theme="dark"] .premium-prompt, :root[data-theme="dark"] .prediction-upgrade-prompt .premium-prompt { box-shadow: 0 0 34px -8px rgba(124, 92, 255, .5); } /* ----------------- LEGACY READABILITY (pre-reskin pages) ----------------- */ /* Keeps not-yet-rebuilt page bodies readable in dark mode by mapping common Bootstrap light surfaces + a few app-specific classes onto theme tokens. */ .thead-light th, .table .thead-light th { background: var(--surface-2) !important; color: var(--tx-2) !important; border-color: var(--line) !important; } .table-hover tbody tr:hover, .table-hover tbody tr:hover > td, .table-hover tbody tr:hover > th { background-color: var(--surface-2) !important; color: var(--tx); } .card-body { background: var(--surface); color: var(--tx); } .card-title, .card-text { color: var(--tx); } /* metric-cell hardcodes a light #f8f9fa background in the page's inline