/* ============================================================ INFLOWSCAN v3 — TERMINAL THEME (Bootstrap-compatible) ------------------------------------------------------------ Strategy: keep the OLD tech (Bootstrap grid, existing JS, responsive/landscape behavior) and apply the NEW v3 terminal LOOK on top. Loads AFTER bootstrap.css + style.css so it wins. Mobile-first: NO min-width lock. Dense desktop grids collapse via Bootstrap breakpoints. Look is token-driven so it overlays cleanly and reflows for free. ============================================================ */ /* ─── Theme-neutral tokens (shared by light + dark) ──────── */ :root { --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --sans: 'Inter', system-ui, -apple-system, sans-serif; --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; } /* ─── 1. DARK terminal variant — OPT-IN via ─── */ html[data-theme="dark"], [data-theme="dark"] { /* v3 palette */ --bg: #0a0d10; --bg-2: #0d1115; --bg-3: #11161a; --panel: #11161a; --line: #1c2227; --line-soft: #15191d; --line-hard: #2a3138; --text: #c8cdd0; --text-hi: #ffffff; --text-lo: #8a9298; --text-xs2: #6b7178; --text-dim: #3a4148; --accent: #5be9ff; --accent-2: #ff6ad5; --accent-3: #f0a846; --pos: #5be9ff; /* positive flow IS the brand (teal, not green) */ --neg: #ff7a8c; /* desaturated pink, not red */ --flat: #8a9298; /* v3 type */ --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --sans: 'Inter', system-ui, -apple-system, sans-serif; /* ── Remap the app's EXISTING tokens to v3 values ── This single block re-skins everything that already references these variables (cards, text, borders, etc.) */ --dark: #05070a; --text-dark: #c8cdd0; --primary-blue: #5be9ff; --primary-blue-deep: #5be9ff; --primary-blue-light: rgba(91,233,255,.14); --primary-blue-hover: #8df3ff; --bg-primary: #11161a; --bg-secondary: #0d1115; --bg-tertiary: #11161a; --text-primary: #c8cdd0; --text-secondary: #8a9298; --text-tertiary: #6b7178; --success-green: #5be9ff; /* positive = teal */ --success-bg: rgba(91,233,255,.10); --error-red: #ff7a8c; /* negative = pink */ --error-bg: rgba(255,122,140,.10); --border-color: #1c2227; --border-hover: #2a3138; --warning-yellow: #f0a846; --card-bg: #11161a; --table-hover: #0d1115; --table-stripe: #0d1115; /* kill softness — terminal is hard-cornered, no shadows */ --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; } /* ─── 1b. LIGHT TERMINAL variant ────────────────────────────── Same v3 discipline (mono, hard edges, no shadow, teal accent, tight density) on a warm paper background with dark ink. This is the DEFAULT theme (:root). Dark is opt-in (section 1). Everything below is token-driven, so this flips the whole UI. */ :root, html[data-theme="light"], [data-theme="light"] { --bg: #f4f5f2; --bg-2: #ffffff; --bg-3: #ebede8; --panel: #ffffff; --line: #e2e5dd; --line-soft: #eef0ea; --line-hard: #c6cbbd; --text: #33382f; --text-hi: #14160f; --text-lo: #5f6557; --text-xs2: #666b5c; /* 5.5:1 on white — was #868c7c (3.5:1) */ --text-dim: #b4b9ab; /* text-safe colors (>= 4.5:1 on --bg-3); use ONLY for numbers/labels */ --accent: #0a7385; /* was #0d97ad (3.5:1) */ --accent-2: #c43d99; --accent-3: #8a5a12; /* amber text, 5.9:1 */ --pos: #0a7385; /* positive flow = teal (not green) */ --neg: #b8324a; /* negative = rose (not red), 5.8:1 */ --flat: #5f6557; /* bright fills for chart bars, meters, dots — never for small text */ --accent-fill: #0d97ad; --pos-fill: #0d97ad; --neg-fill: #cf4257; --amber-fill: #b9791f; /* categorical series (donuts, multi-line charts) — no sign meaning */ --cat-1: #0d97ad; --cat-2: #5f6f86; --cat-3: #b9791f; --cat-4: #7b5ea7; --cat-5: #8a9a5b; --cat-6: #b4b9ab; /* remap the app's existing tokens to light-terminal values */ --dark: #ffffff; --text-dark: #33382f; --primary-blue: #0a7385; --primary-blue-deep: #085e6d; --primary-blue-light: rgba(13,151,173,.10); --primary-blue-hover: #085e6d; --bg-primary: #ffffff; --bg-secondary: #f4f5f2; --bg-tertiary: #eef0ea; --text-primary: #33382f; --text-secondary: #5f6557; --text-tertiary: #666b5c; --success-green: #0a7385; --success-bg: rgba(13,151,173,.10); --error-red: #b8324a; --error-bg: rgba(207,66,87,.10); --border-color: #e2e5dd; --border-hover: #c6cbbd; --warning-yellow: #8a5a12; --card-bg: #ffffff; --table-hover: #f4f5f2; --table-stripe: #f9faf7; } /* light variant: matrix heat cells use teal tints with dark text */ [data-theme="light"] .matrix .m3, [data-theme="light"] .matrix .m4, [data-theme="light"] .matrix .m5 { color: #08323a; } /* ─── 2. Global base (responsive-safe — no width lock) ────── */ html, body { background: var(--bg) !important; color: var(--text); font-family: var(--mono); font-feature-settings: normal; -webkit-font-smoothing: antialiased; } body { font-size: 13px; line-height: 1.5; } /* tabular numerals everywhere numbers live */ .data-table, .t, table, .ticker-price, .ticker-change, .kpi, .big, .flowscore-value, .num, [class*="value"], [class*="price"], [class*="score"] { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "zero" 1; } a { color: inherit; } a:hover { color: var(--accent); } ::selection { background: rgba(13,151,173,.22); color: var(--text-hi); } /* hard-corner + flatten EVERYTHING by default (de-Bootstrap) */ .card, .btn, .modal-content, .dropdown-menu, .form-control, .form-select, .nav-tabs, .nav-link, .badge, .alert, .input-group, .list-group-item, .data-table, .table, img.logo, .version-badge, .ticker-item, .progress { border-radius: 0 !important; box-shadow: none !important; } /* ─── 3. Bootstrap component re-theme ─────────────────────── */ .card { background: var(--panel) !important; border: 1px solid var(--line) !important; color: var(--text); } .card-header { background: var(--bg-2) !important; border-bottom: 1px solid var(--line) !important; color: var(--text-xs2); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; } .card-body { color: var(--text); } .btn { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; border: 1px solid var(--line-hard); color: var(--text-lo); background: transparent; transition: color .12s, background .12s, border-color .12s; } .btn:hover { color: var(--text-hi); border-color: var(--accent); background: var(--bg-3); } .btn-primary, .btn-success { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; font-weight: 600; } .btn-primary:hover, .btn-success:hover { background: var(--text-hi) !important; border-color: var(--text-hi) !important; } .btn-outline-primary { border-color: var(--accent) !important; color: var(--accent) !important; } .btn-outline-primary:hover { background: rgba(91,233,255,.10) !important; color: var(--text-hi) !important; } .btn-danger { background: var(--neg) !important; border-color: var(--neg) !important; color: #fff !important; } /* nav tabs → terminal tabs */ .nav-tabs { border-bottom: 1px solid var(--line) !important; } .nav-tabs .nav-link { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-lo) !important; background: transparent !important; border: none !important; border-right: 1px solid var(--line) !important; padding: 10px 16px; } .nav-tabs .nav-link:hover { color: var(--text-hi) !important; background: var(--bg-3) !important; } .nav-tabs .nav-link.active { color: var(--text-hi) !important; /* teal is reserved for positive values */ background: var(--bg-3) !important; border-bottom: 2px solid var(--accent-fill) !important; } /* tables */ .table, .data-table { color: var(--text); font-family: var(--mono); font-size: 13px; border-color: var(--line) !important; } .table thead th, .data-table thead th { background: var(--bg-2) !important; color: var(--text-xs2) !important; font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--line) !important; border-top: none !important; } .table tbody td, .data-table tbody td { border-top: none !important; border-bottom: 1px solid var(--line-soft) !important; color: var(--text); } .table tbody tr:hover td, .data-table tbody tr:hover td { background: var(--bg-2) !important; } /* forms */ .form-control, .form-select { background: var(--bg-2) !important; border: 1px solid var(--line-hard) !important; color: var(--text-hi) !important; font-family: var(--mono); } .form-control::placeholder { color: var(--text-dim); } .form-control:focus, .form-select:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 1px rgba(91,233,255,.3) !important; background: var(--bg-2) !important; } /* modals */ .modal-content { background: var(--panel) !important; border: 1px solid var(--line-hard) !important; color: var(--text); } .modal-header, .modal-footer { border-color: var(--line) !important; } /* beta notice title carries an inline near-white color from the dark theme */ .modal-title { color: var(--text) !important; } /* badges / pills */ .badge { font-family: var(--mono); letter-spacing: .04em; font-weight: 500; font-size: max(11px, .75em); } .badge.bg-success { background: rgba(13,151,173,.10) !important; color: var(--pos) !important; } .badge.bg-primary { background: transparent !important; color: var(--text-hi) !important; border: 1px solid var(--line-hard); } .badge.bg-danger { background: rgba(207,66,87,.10) !important; color: var(--neg) !important; } /* semantic color helpers (override Bootstrap text utilities to the brand) */ .text-success, .positive, .text-pos, .change-positive { color: var(--pos) !important; } .text-danger, .negative, .text-neg, .change-negative { color: var(--neg) !important; } .text-muted, .text-secondary { color: var(--text-lo) !important; } .text-primary { color: var(--text-hi) !important; } .bg-light, .bg-white { background: var(--panel) !important; } /* ─── 4. App-specific chrome (header / ticker / badges) ───── */ .header { background: var(--bg-2) !important; border-bottom: 1px solid var(--line) !important; } .version-badge { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-xs2) !important; border: 1px solid var(--line) !important; padding: 3px 8px; background: transparent !important; } .live-dot-inline, .live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-fill); box-shadow: 0 0 8px var(--accent-fill); animation: v3pulse 2s infinite; } @keyframes v3pulse { 0%,100%{opacity:1} 50%{opacity:.45} } .header-nav .nav-link, .mobile-menu-link { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-lo) !important; } .header-nav .nav-link:hover, .header-nav .nav-link.active, .mobile-menu-link:hover, .mobile-menu-link.active { color: var(--text-hi) !important; } /* ticker */ .ticker-bar { background: var(--bg-2) !important; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .ticker-item { border-right: 1px solid var(--line); } .ticker-symbol { color: var(--text-xs2) !important; font-size: 11px; letter-spacing: .06em; } .ticker-price { color: var(--text-hi) !important; } .ticker-change.positive { color: var(--pos) !important; } .ticker-change.negative { color: var(--neg) !important; } /* flowscore cards on landing */ .flowscore-card { background: var(--panel) !important; border: 1px solid var(--line) !important; } .flowscore-card:hover { border-color: var(--text-hi) !important; background: var(--bg-3) !important; } .flowscore-card.active { border-color: var(--text-hi) !important; } /* ─── 5. Core v3 component classes (responsive) ───────────── */ .v3-eyebrow, .label { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-xs2); } .v3-h1 { font-family: var(--mono); font-weight: 500; letter-spacing: -.02em; color: var(--text-hi); line-height: 1.08; } .v3-acc { color: var(--accent); } .v3-pos { color: var(--pos); } .v3-neg { color: var(--neg); } .v3-section { border-bottom: 1px solid var(--line); padding: 18px 20px; } .v3-section-h { display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--text-xs2); text-transform: uppercase; margin-bottom: 14px; } .v3-live { color: var(--accent); font-size: 11px; } .v3-live::before { content: '●'; margin-right: 5px; animation: v3pulse 1.4s infinite; } /* ─── 5b. Kill leftover LIGHT backgrounds (foundation-wide) ── The old light theme uses an inline gradient #EFF6FF→#DBEAFE on card headers + JS-injected cards, plus light alerts. Override them everywhere (attr selectors beat inline styles via !important). */ [style*="#EFF6FF"], [style*="#DBEAFE"], [style*="EFF6FF"], [style*="DBEAFE"], [style*="#EFF6FF"] *, [style*="F0F9FF"], [style*="#F8FAFC"] { background: var(--bg-2) !important; background-image: none !important; color: var(--text) !important; } .alert { background: var(--bg-2) !important; color: var(--text) !important; border: 1px solid var(--line) !important; } .alert-success { border-left: 2px solid var(--accent) !important; color: var(--text) !important; } .alert-warning { border-left: 2px solid var(--accent-3) !important; } .alert-danger, .alert-error { border-left: 2px solid var(--neg) !important; } .bg-light, .bg-white, .bg-body, .bg-body-tertiary { background: var(--panel) !important; color: var(--text) !important; } /* orientation-lock (rotate-to-landscape) overlay → dark, teal accent */ .orientation-lock-overlay { background: var(--bg) !important; background-image: radial-gradient(900px 500px at 50% -10%, rgba(13,151,173,.08), transparent 70%) !important; } .orientation-lock-content { color: var(--text) !important; } .orientation-lock-title { color: var(--text-hi) !important; font-family: var(--mono); letter-spacing: .02em; } .orientation-lock-icon, .orientation-lock-logo { color: var(--accent) !important; } .orientation-lock-message { color: var(--text-lo) !important; } /* ─── 5c. Latest-briefs rail cards (under featured brief) ──── */ .latest-rail-card { display: block; background: var(--panel); border: 1px solid var(--line); padding: 14px 16px; text-decoration: none; transition: border-color .12s, background .12s; } .latest-rail-card:hover { border-color: var(--text-hi); background: var(--bg-3); } .latest-rail-pill { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-hi); border: 1px solid var(--line-hard); padding: 2px 7px; margin-bottom: 10px; } .latest-rail-pill.flash { color: var(--accent-3); border-color: var(--accent-3); } .latest-rail-title { font-family: var(--sans); font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--text-hi); margin-bottom: 8px; } .latest-rail-card:hover .latest-rail-title { text-decoration: underline; text-underline-offset: 3px; } .latest-rail-meta { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-xs2); } #latestBriefsRail > div:first-child { color: var(--text-xs2) !important; } /* ─── 6. Responsive: keep dense things usable on phones ───── */ @media (max-width: 767px) { body { font-size: 12px; } /* wide data tables scroll horizontally instead of squashing */ .table-responsive, .data-table-wrap { -webkit-overflow-scrolling: touch; } .data-table { display: block; overflow-x: auto; white-space: nowrap; } /* ticker scrolls rather than truncates */ .ticker-bar { overflow-x: auto; } .v3-section { padding: 14px 14px; } } /* ─── 7. Finish pass (2026-09-14 design review) ────────────── Shared rules the page files build on. Page-specific rules live in each page's own