/* ============================================================================ Light mode, phase 1 (2026-09-23) ---------------------------------------------------------------------------- Opt in only. Nothing here applies unless carries .jbx-light, which is set by the toggle and remembered in localStorage. The default stays dark, so no visitor is moved into light mode by this file shipping. Scope: enqueued only on templates that carry five or fewer inline hardcoded colours (see JBXQT_LIGHT_TEMPLATES in inc/light-mode.php). The 36 heavily inline-styled templates, the homepage and the life-stage page among them, are deliberately excluded until their colours are tokenised, because inline styles beat any stylesheet and would show through. The header, the promo banner and the footer stay dark on purpose. They are the site's frame and the operator asked for them to be left alone. Contrast: every token below was chosen to clear 4.5:1 against the surface it sits on. The brand emerald #14cba8 is about 1.9:1 on white and is therefore darkened to #0a7d66 for text in light mode, while the original stays in use on dark surfaces such as the header. ========================================================================= */ :root.jbx-light { --jbx-bg: #f6f8fc; --jbx-bg-2: #eef3fa; --jbx-ink: #0c1930; --jbx-muted: #55627d; --jbx-border: #dbe3ef; --jbx-surface: #ffffff; --jbx-surface-2: #f1f5fb; --jbx-emerald: #0a7d66; --jbx-emerald-soft: rgba(10, 125, 102, 0.10); --jbx-btn: #0e9e74; --jbx-shadow: 0 18px 44px rgba(12, 25, 48, 0.10); } .jbx-light body { background: var(--jbx-bg); color: var(--jbx-ink); } /* ── The frame stays dark ───────────────────────────────────────────────── Re-assert the dark tokens inside the header, banner and footer so they are unaffected by the light palette above. */ /* The frame is translucent by design: the header sits at 72% alpha over a near black page, the footer at 50%, the banner on an alpha gradient. Over a light page that transparency lets the light through and the bar reads as washed out grey rather than the dark it should be. Made opaque in light mode so the frame looks identical in both themes. */ .jbx-light .site-header { background: #02091f; } .jbx-light .site-footer { background: #02091f; } .jbx-light .jbx-banner { background: linear-gradient(90deg, #04081c 0%, #0a1836 100%); } /* The homepage hero is excluded from light mode altogether. It is a full bleed photograph with its own dark treatment, it already works, and nothing above the fold needs to change. Dark tokens are re-asserted inside it so no rule below can reach in. */ .jbx-light .jbx-vh, .jbx-light .jbx-banner, .jbx-light .site-header, .jbx-light .site-footer { --jbx-bg: #02091f; --jbx-bg-2: #061338; --jbx-ink: #f3f7ff; --jbx-muted: #90a1bf; --jbx-border: #1a2b52; --jbx-surface: #0a1a3f; --jbx-surface-2: #14264b; --jbx-emerald: #14cba8; --jbx-emerald-soft: rgba(20, 203, 168, 0.12); --jbx-btn: #10b981; color: #f3f7ff; } /* The hero inherits its text colour from the dark token block above, which now includes .jbx-vh. Do NOT use `revert` here: it resets to the browser default stylesheet, not to the site's own rules, which turns links the default #0000ee and breaks inherited colour. */ /* ── Type ─────────────────────────────────────────────────────────────── */ .jbx-light .art-body, .jbx-light .art-p, .jbx-light .art-lead, .jbx-light .inner-hero-intro, .jbx-light .tax-body p, .jbx-light .prov-body p { color: #33415c; } .jbx-light .art-h2, .jbx-light .art-body h2, .jbx-light .art-body h3, .jbx-light .inner-hero h1, .jbx-light .section-head h2 { color: var(--jbx-ink); } .jbx-light .accent, .jbx-light .art-h2 .accent, .jbx-light .inner-hero h1 .accent { color: var(--jbx-emerald); } /* Link colour is scoped to prose. A blanket `a` rule repainted every anchor on the page, including the buttons inside the dark hero, which turned them an unreadable blue on their dark ground. */ .jbx-light .art-body a, .jbx-light .art-p a, .jbx-light .art-lead a, .jbx-light .rt-note a, .jbx-light .art-card-foot a, .jbx-light .tax-body p a, .jbx-light .prov-body p a { color: #0a6fd8; text-decoration-color: rgba(10, 111, 216, .4); } /* ── Hero ───────────────────────────────────────────────────────────────── The hero background and dot mask are inline styles and cannot be overridden directly, so their opacity is reduced instead. They were tuned as a glow on near-black and read as dirt on a light ground at full strength. */ .jbx-light .inner-hero { background: linear-gradient(180deg, #eaf0f9 0%, var(--jbx-bg) 100%); } .jbx-light .inner-hero-bg { opacity: .55; } .jbx-light .inner-hero-dots { opacity: .18; } .jbx-light .inner-hero-eyebrow { color: var(--jbx-emerald); background: var(--jbx-emerald-soft); border-color: rgba(10, 125, 102, .26); } .jbx-light .hero-stock-float, .jbx-light .hero-chip { background: rgba(255, 255, 255, .92); border-color: var(--jbx-border); box-shadow: 0 6px 18px rgba(12, 25, 48, .07); } .jbx-light .hsf-l, .jbx-light .hero-chip-l { color: var(--jbx-muted); } .jbx-light .hsf-v, .jbx-light .hero-chip-v { color: var(--jbx-ink); } .jbx-light .hsf-v.up, .jbx-light .hero-chip-v.g { color: var(--jbx-emerald); } .jbx-light .hero-ticker-strip { background: #0c1930; border-color: #16233d; } .jbx-light .ht-item { color: #9db2d3; } .jbx-light .ht-item.hi { color: #14cba8; } /* ── Surfaces ─────────────────────────────────────────────────────────── */ .jbx-light .art-card, .jbx-light .art-callout, .jbx-light .art-quote, .jbx-light .rt-related__card, .jbx-light .hp-explore-card { background: var(--jbx-surface); border-color: var(--jbx-border); box-shadow: 0 4px 14px rgba(12, 25, 48, .05); } .jbx-light .art-card-title { color: var(--jbx-ink); } .jbx-light .art-quote-text { color: var(--jbx-ink); } .jbx-light .art-disclaimer { color: var(--jbx-muted); border-color: var(--jbx-border); } .jbx-light .art-kpi { background: var(--jbx-surface); border-color: var(--jbx-border); } .jbx-light .art-kpi-val { color: var(--jbx-ink); } .jbx-light .art-kpi-label { color: var(--jbx-muted); } /* ── Tables ───────────────────────────────────────────────────────────── */ .jbx-light .art-table th { color: var(--jbx-muted); border-bottom-color: var(--jbx-border); background: var(--jbx-surface-2); } .jbx-light .art-table td { color: #33415c; border-bottom-color: var(--jbx-border); } .jbx-light .art-table tr.art-tr-highlight td, .jbx-light .rt-table tr.is-current td { background: var(--jbx-emerald-soft); color: var(--jbx-ink); } .jbx-light .art-table-wrap, .jbx-light .rt-table-wrap { background: var(--jbx-surface); border-radius: 12px; } /* ── Contents rail and reading progress ───────────────────────────────── */ .jbx-light .art-toc { background: var(--jbx-surface); border-color: var(--jbx-border); } .jbx-light .art-toc-title { color: var(--jbx-muted); } .jbx-light .art-toc-list a { color: #47546e; } .jbx-light .art-toc-list a.is-active, .jbx-light .art-toc-list a:hover { color: var(--jbx-emerald); } .jbx-light .art-progress { background: rgba(12, 25, 48, .08); } .jbx-light .art-progress-fill { background: var(--jbx-emerald); } /* ── Buttons ──────────────────────────────────────────────────────────── */ .jbx-light .art-cta, .jbx-light .rth-cta, .jbx-light .hp-rt__cta { background: var(--jbx-btn); color: #ffffff; } .jbx-light .art-cta:hover, .jbx-light .hp-rt__cta:hover { box-shadow: 0 12px 26px rgba(14, 158, 116, .26); } /* ── Calculator widgets (the section built 2026-09-23) ────────────────── */ .jbx-light .oc-calc, .jbx-light .ct-calc, .jbx-light .rf-calc, .jbx-light .tc-calc, .jbx-light .at-calc, .jbx-light .rc-card { background: var(--jbx-surface); border-color: var(--jbx-border); box-shadow: 0 6px 20px rgba(12, 25, 48, .06); } .jbx-light .oc-calc input, .jbx-light .ct-calc input, .jbx-light .rf-calc input, .jbx-light .tc-calc input, .jbx-light .at-calc input, .jbx-light .rc-card input, .jbx-light .oc-calc select, .jbx-light .ct-calc select, .jbx-light .rf-calc select, .jbx-light .tc-calc select, .jbx-light .at-calc select, .jbx-light .rc-card select { background: #ffffff; color: var(--jbx-ink); border-color: #c9d4e4; } .jbx-light .rt-verified { background: var(--jbx-emerald-soft); border-color: rgba(10, 125, 102, .22); color: var(--jbx-muted); } .jbx-light .rt-note { color: var(--jbx-muted); } /* ── Homepage components (2026-09-23) ──────────────────────────────────── These carry hardcoded dark backgrounds in style.css rather than inline, so unlike the inline literals a stylesheet can reach them. Found by scanning the rendered page in light mode for blocks whose computed background is dark, rather than by eye. Deliberately left dark: .hp-explore-mini, .jbx-vh__panel and .jbx-vh__price-block are miniature data readouts styled to look like a terminal. They read as an intentional accent on a light page, the way a code block does. */ .jbx-light .hp-broker-compare, .jbx-light .hpv3-opt, .jbx-light .hub-hero-stat, .jbx-light .jbx-nl-consent, .jbx-light .news-hero-media, .jbx-light .hp-rt__stat { background: var(--jbx-surface); border-color: var(--jbx-border); color: var(--jbx-ink); } .jbx-light .hp-broker-compare *, .jbx-light .hpv3-opt *, .jbx-light .jbx-nl-consent *, .jbx-light .hub-hero-stat * { color: inherit; } .jbx-light .hp-broker-compare a, .jbx-light .hpv3-opt a { color: #0a6fd8; } .jbx-light .hp-strip-tip { background: var(--jbx-emerald-soft); color: var(--jbx-emerald); } .jbx-light .hpc-thead { background: var(--jbx-surface-2); color: var(--jbx-ink); } .jbx-light .btn-secondary { background: var(--jbx-surface); border: 1px solid var(--jbx-border); color: var(--jbx-ink); } .jbx-light .hp-rt__stat-v { color: var(--jbx-ink); } .jbx-light .hp-rt__stat-l, .jbx-light .hp-rt__stat-s { color: var(--jbx-muted); } .jbx-light .hp-rt { background: linear-gradient(135deg, #eef3fa, #f6f8fc); border-color: var(--jbx-border); } .jbx-light .hp-rt__title, .jbx-light .hp-rt__lede { color: var(--jbx-ink); } .jbx-light .hp-rt__foot { color: var(--jbx-muted); border-top-color: var(--jbx-border); } .jbx-light .hp-section-intro { color: var(--jbx-muted); } /* ── Homepage gradient cards (2026-09-23, second pass) ─────────────────── The first scan only inspected background-color and therefore missed every component whose dark fill is a linear-gradient, which is most of the homepage's cards. Re-scanned including background-image. .jbx-vh__veil is deliberately left dark: it is the scrim over the hero photograph and lightening it would wash the image out. */ .jbx-light .hp-strip, .jbx-light .hp-sent-spot-inner, .jbx-light .hp-broker-card, .jbx-light .hpv3-dw, .jbx-light .hp-perf-card, .jbx-light .news-hero-card, .jbx-light .jbx-nl { background: var(--jbx-surface); border-color: var(--jbx-border); color: var(--jbx-ink); box-shadow: 0 4px 16px rgba(12, 25, 48, .06); } .jbx-light .hp-strip h2, .jbx-light .hp-strip h3, .jbx-light .hp-broker-card h2, .jbx-light .hp-broker-card h3, .jbx-light .hp-perf-card h3, .jbx-light .news-hero-card h3, .jbx-light .jbx-nl h2, .jbx-light .jbx-nl h3, .jbx-light .hpv3-dw h2, .jbx-light .hpv3-dw h3 { color: var(--jbx-ink); } .jbx-light .hp-strip p, .jbx-light .hp-broker-card p, .jbx-light .hp-perf-card p, .jbx-light .news-hero-card p, .jbx-light .jbx-nl p, .jbx-light .hpv3-dw p, .jbx-light .hp-sent-spot-inner p { color: #33415c; } .jbx-light .hp-broker-card li, .jbx-light .hpv3-dw li, .jbx-light .hp-sent-spot-inner li { color: #33415c; } /* The featured broker card carries a second class whose rule is more specific than the one above, so it kept its dark gradient. Matched here at equal specificity, tinted emerald so it still reads as the featured pick. */ .jbx-light .hp-broker-card.hp-broker-ws { background: linear-gradient(158deg, #f2fbf8, #ffffff); border-color: rgba(10, 125, 102, .30); color: var(--jbx-ink); } /* ── Nav fit ───────────────────────────────────────────────────────────── Nav items carry flex-shrink: 1, so adding the toggle to the row squeezed the Start Here button until its label wrapped and spilled out of its border. Holding the label on one line keeps the item at its content width, because a flex item will not shrink below min-content, and min-content for unwrapped text is the whole label. This applies in both themes, which is correct: the toggle is present in both, and this file only loads where the toggle exists. */ .nav-start-here { white-space: nowrap; } /* ── Hover states ──────────────────────────────────────────────────────── Six rules set a dark fill on hover, which on a light page turns the row into a dark block with unreadable text. Found by scanning every loaded stylesheet rule for a :hover with a dark background, not by spotting them. The hero's own video toggle is left alone, it sits on the photograph. */ .jbx-light .hub-row:hover, .jbx-light .jbxsp-row:hover, .jbx-light .jbxsp-row.jbxsp-sel, .jbx-light .hpv3-mini-card:hover, .jbx-light .hpv3-opt:hover { background: var(--jbx-emerald-soft); color: var(--jbx-ink); } .jbx-light .hub-row:hover *, .jbx-light .jbxsp-row:hover *, .jbx-light .hpv3-mini-card:hover *, .jbx-light .hpv3-opt:hover * { color: inherit; } .jbx-light .hub-row:hover .hub-row-sub { color: var(--jbx-muted); } .jbx-light .btn-secondary:hover { background: var(--jbx-surface-2); border-color: var(--jbx-emerald); color: var(--jbx-ink); } /* ── Every dark surface in style.css, converted in one pass ────────────── Generated by scanning style.css for rules whose background resolves to a dark colour, rather than fixing components as they were reported. 70 distinct selectors were dark; the frame, the homepage hero, the nav, the search palette and the deliberate terminal-style readouts are excluded and stay dark. */ /* 65 card and panel surfaces */ .jbx-light .btn-secondary, .jbx-light .stats-card, .jbx-light .stat-box, .jbx-light .vision-card, .jbx-light .blog-post-card, .jbx-light .vision-text tr:nth-child(even) td, .jbx-light .vision-text pre, .jbx-light .jbxqt-npt-content tr:nth-child(even) td, .jbx-light .jbxqt-npt-content pre, .jbx-light .xeqt-focus-card, .jbx-light .xeqt-focus-metrics div, .jbx-light .xeqt-focus-list li, .jbx-light .jbx-res-card, .jbx-light .jbx-mile, .jbx-light .jbx-faq-item, .jbx-light .concept-card, .jbx-light .ask-card, .jbx-light .ask-link, .jbx-light .news-card, .jbx-light .news-card-media, .jbx-light .news-hero-card, .jbx-light .news-hero-media, .jbx-light .news-hero-empty, .jbx-light .tr-hero-card, .jbx-light .tr-snapshot-card, .jbx-light .tr-gallery-card, .jbx-light .tr-content-card, .jbx-light .tr-hero-media, .jbx-light .tr-table td, .jbx-light .tr-gallery-item, .jbx-light .hp-news-strip, .jbx-light .hp-explore-card, .jbx-light .hp-perf-card, .jbx-light .hp-why-item, .jbx-light .hp-cta-strip, .jbx-light .detail-metric-card, .jbx-light .detail-structure-card, .jbx-light .detail-perf-table tbody td, .jbx-light .div-explainer-card, .jbx-light .div-2025-card, .jbx-light .div-2025-total-card, .jbx-light .div-2025-note-card, .jbx-light .div-area-chart-outer, .jbx-light .div-table tbody td, .jbx-light .div-yield-card, .jbx-light .holdings-sector-card, .jbx-light .holdings-underlying-table tbody td, .jbx-light .holdings-top-card, .jbx-light .hero-chip, .jbx-light .hero-stock-float, .jbx-light .hero-card, .jbx-light .hero-news-panel, .jbx-light .hnp-footer, .jbx-light .hero-calc-panel, .jbx-light .art-card, .jbx-light .art-kpi, .jbx-light .art-table tr:nth-child(even) td, .jbx-light .art-choice, .jbx-light .art-cta, .jbx-light .art-stat-row, .jbx-light .jbx-footer__data-bar, .jbx-light .jbx-footer__body, .jbx-light .jbx-nl, .jbx-light .jbx-nl-consent, .jbx-light .jbx-sticky-bar { background: var(--jbx-surface); border-color: var(--jbx-border); color: var(--jbx-ink); } /* 8 table headers */ .jbx-light .jbx-tbl th, .jbx-light .tr-table th, .jbx-light .detail-fact-table th, .jbx-light .detail-perf-table thead th, .jbx-light .div-table thead th, .jbx-light .holdings-underlying-table thead th, .jbx-light .art-table thead th, .jbx-light .hpc-thead { background: var(--jbx-surface-2); color: var(--jbx-muted); } /* 3 form controls */ .jbx-light .jbx-preset, .jbx-light .jbx-input-row, .jbx-light .jbx-select { background: #ffffff; border-color: #c9d4e4; color: var(--jbx-ink); } /* ── Dark surfaces declared inside template