/* ========================================================================= AEON INTEL — PREMIUM LIGHT THEME (drop-in overlay) Bloomberg Terminal × institutional wealth platform × Web3 HOW THIS WORKS ─────────────── Your existing style.css already routes almost everything through CSS custom properties (var(--text), var(--green), var(--border), etc), so the bulk of the light theme is just re-declaring those properties inside a scoped selector. Anything below the variable block is a targeted fix for the ~20 places in the mobile home screen that use a hardcoded rgba(255,255,255,…) / #fff value instead of a variable — those assume a dark backdrop and go invisible (or too faint/too harsh) on white, so they're patched explicitly. ACTIVATION ────────── Nothing below applies until the (or ) element carries data-theme="light". Load this AFTER style.css: Then toggle with: document.documentElement.dataset.theme = 'light' See theme-toggle.js for a persisted toggle you can wire to a button. ========================================================================= */ /* ========================================================================= 1. CORE PALETTE — redeclares the SAME variable names style.css defines, so every component that already consumes var(--x) repaints for free. ========================================================================= */ :root[data-theme="light"] { /* ---------- SURFACES ---------- */ --bg: #f4f5f7; --surface: #ffffff; /* was a dark gradient — flat white, per brief: "make the actual cards white, rather than slightly different shades of grey" */ --s2: #ffffff; --s3: #f8f9fb; --s4: #eef0f3; /* ---------- BRAND / INTERACTIVE ACCENTS (restrained — state, not decoration) ---------- */ --cyan: #1769e0; /* was a pale sky-blue tuned for dark bg */ --c-dim: rgba(23,105,224,.06); --c-mid: rgba(23,105,224,.10); --c-glow: rgba(23,105,224,.16); --mag: #7040d8; --green: #087c55; --g-dim: rgba(8,124,85,.07); --g-glow: rgba(8,124,85,.14); --red: #c2384d; --r-dim: rgba(194,56,77,.06); --r-glow: rgba(194,56,77,.13); --amber: #b88916; /* gold, not neon amber — metallic accent per brief */ --a-dim: rgba(184,137,22,.08); --purple: #7040d8; --p-dim: rgba(112,64,216,.08); --gold: #b88916; /* ---------- TYPOGRAPHY ---------- */ --text: #111318; /* near-black, not pure black */ --text2: #68707d; --text3: #9299a5; --text4: #b4bac3; /* ---------- BORDERS (restrained, no glow) ---------- */ --border: #e3e6eb; --border2: #dde1e7; --border3: rgba(17,19,24,.12); /* ---------- AEON BRAND ACCENT — kept as the one deliberate saturated note ---------- */ --aeon-purple: #7040d8; --aeon-violet: #7546db; --aeon-blue: #1769e0; --aeon-glow: rgba(112,64,216,.18); --aeon-gradient: linear-gradient(135deg,#6030c9,#7546db,#1769e0); /* ---------- CARD GRADIENT TIERS — flattened to white/near-white per brief ---------- */ --card-primary: #ffffff; --card-hero: radial-gradient(circle at 15% 5%, rgba(23,105,224,.05), transparent 42%), #ffffff; --card-feed: #ffffff; --card-lower: #ffffff; } /* ========================================================================= 2. BASE SURFACES ========================================================================= */ [data-theme="light"] html, [data-theme="light"] body { background: var(--bg); color: var(--text); } [data-theme="light"] .app { background: var(--bg); } /* Shadows: almost none, per brief — only a whisper under raised cards */ [data-theme="light"] .m-card, [data-theme="light"] .m-card2, [data-theme="light"] .bd-card { box-shadow: 0 1px 2px rgba(17,19,24,.04); } /* ========================================================================= 3. MOBILE STICKY HEADER (#mMiniBar) — Image 1/2 top bar ========================================================================= */ [data-theme="light"] #mMiniBar { background: rgba(255,255,255,.92); border-bottom: 1px solid var(--border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } [data-theme="light"] .m-brand { color: var(--text); text-shadow: none; /* premium light drops the neon glow entirely */ } [data-theme="light"] .m-live-price { color: var(--text); /* was hardcoded #fff */ } [data-theme="light"] .m-hdr-btn { color: var(--text2); } [data-theme="light"] .m-hdr-btn:active { background: rgba(17,19,24,.06); } /* ========================================================================= 4. COIN SUMMARY CARD — BTC/USDT price hero ========================================================================= */ [data-theme="light"] .m-coin-summary-icon { background: #eef0f3; /* was #7e848a2b — a dark translucent grey */ } [data-theme="light"] .m-coin-summary-price { color: var(--text); /* was hardcoded #fff */ } [data-theme="light"] .m-coin-summary-chg { background: #eef0f3; /* was rgba(255,255,255,.04) */ color: var(--text2); } [data-theme="light"] .m-coin-summary-chg.up { color: var(--green); background: var(--g-dim); } [data-theme="light"] .m-coin-summary-chg.dn { color: var(--red); background: var(--r-dim); } [data-theme="light"] .m-tf-btn { color: var(--text2); background: #eef0f3; border: 1px solid var(--border); } [data-theme="light"] .m-tf-btn.m-tf-on { background: var(--c-dim); border-color: rgba(23,105,224,.3); color: var(--cyan); } [data-theme="light"] .m-tag { background: #f7f8fa; border: 1px solid var(--border); color: var(--text2); } /* Fed Radar video column */ [data-theme="light"] .m-fed-video-col-inner, [data-theme="light"] #mFedVideoColInner { background: #f7f8fa; border: 1px solid var(--border); color: var(--text2); } /* ========================================================================= 5. ALTCOIN TICKER STRIPS (gainers / losers row) ========================================================================= */ [data-theme="light"] .m-alt-strip--losers { background: rgba(194,56,77,.05); border-top: 1px solid rgba(194,56,77,.14); border-bottom: 1px solid rgba(194,56,77,.06); } [data-theme="light"] .m-alt-strip--gainers { background: rgba(8,124,85,.05); border-top: 1px solid rgba(8,124,85,.06); border-bottom: 1px solid rgba(8,124,85,.14); } [data-theme="light"] .m-alt-strips-wrap.m-alt-merged .m-alt-strip { background: #f7f8fa; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } [data-theme="light"] .m-alt-icon-btn { background: rgba(255,255,255,.9); border-left: 1px solid rgba(23,105,224,.18); } [data-theme="light"] .m-alt-icon-btn:active { background: var(--c-dim); } /* ========================================================================= 6. PREDICTION SIGNAL MATRIX (m-card + ring) ========================================================================= */ [data-theme="light"] .m-sig-badge-lg { color: var(--amber); /* HOLD stays gold/amber; BUY/SELL states already route through var(--green)/var(--red) */ } /* Ring track — the pale rgba(255,255,255,.07) circle is inline on the SVG element as a presentation attribute; a CSS `stroke` declaration on the element wins over that attribute, so this repaints it without touching the markup. The colored progress arc already uses var(--green)/var(--amber) inline and repaints automatically. */ [data-theme="light"] .m-sig-ring svg circle:first-child, [data-theme="light"] #mSigArc + circle, [data-theme="light"] .bd-sig-ring svg circle:nth-child(1), [data-theme="light"] .hero-ring svg circle:nth-child(2) { stroke: #eaecf0; } [data-theme="light"] .m-sig-ring-num, [data-theme="light"] .hero-ring-num { color: var(--text); } /* ========================================================================= 7. SMART MONEY FLOW — mobile card + rows ========================================================================= */ [data-theme="light"] .m-smf-tab { color: var(--text3); border: 1px solid var(--border); background: #f7f8fa; } [data-theme="light"] .m-smf-tab.on { color: var(--cyan); border-color: rgba(23,105,224,.3); background: var(--c-dim); } [data-theme="light"] .m-smf-icon { background: #eef0f3; /* was rgba(255,255,255,.05) */ } [data-theme="light"] .m-smf-tag.in { color: var(--green); background: var(--g-dim); } [data-theme="light"] .m-smf-tag.out { color: var(--red); background: var(--r-dim); } [data-theme="light"] .m-card-tf { background: #eef0f3; /* was rgba(255,255,255,.04) */ color: var(--text3); } [data-theme="light"] .m-card-link, [data-theme="light"] .m-card-link-row span { color: var(--cyan); /* was rgba(59,130,246,.65/.7) — punched up for AA contrast on white; still "interactive state" blue, not decorative */ } /* ========================================================================= 8. ADVANCERS / DECLINERS ========================================================================= */ [data-theme="light"] .m-adv-title { color: var(--bull, #087c55); } [data-theme="light"] .m-dec-title { color: var(--bear, #c2384d); } [data-theme="light"] .m-adv-row:active { background: rgba(17,19,24,.03); /* was rgba(255,255,255,.03) */ } [data-theme="light"] .m-adv-chg.up { color: var(--green); background: var(--g-dim); } [data-theme="light"] .m-adv-chg.dn { color: var(--red); background: var(--r-dim); } /* ========================================================================= 9. SENTIMENT GAUGE ========================================================================= */ [data-theme="light"] .m-sent-gauge-wrap svg path:first-child { stroke: #eaecf0; /* was rgba(255,255,255,.07) */ } [data-theme="light"] .m-sent-gauge-val, [data-theme="light"] .m-sent-gauge-lbl { color: var(--text); } /* ========================================================================= 10. INSIGHT PILLS ========================================================================= */ [data-theme="light"] .m-insight-pill { background: #f7f8fa; border: 1px solid var(--border); color: var(--text2); } [data-theme="light"] .m-insight-pill.on { background: var(--c-dim); border-color: rgba(23,105,224,.3); color: var(--cyan); } /* ========================================================================= 11. BOTTOM TAB BAR (#mBottomNav) ========================================================================= */ [data-theme="light"] #mBottomNav { background: rgba(255,255,255,.94); border-top: 1px solid var(--border); } [data-theme="light"] .m-tab-btn { color: var(--text3); } [data-theme="light"] .m-tab-btn.active { color: var(--aeon-violet); } /* ========================================================================= 12. MM MONITOR TRAY (.proxy-tray) — collapsed handle + open state ========================================================================= */ [data-theme="light"] .proxy-tray { background: rgba(255,255,255,.96) !important; border-top: 1px solid var(--border) !important; } [data-theme="light"] .proxy-tray.pt-open { border-color: rgba(23,105,224,.28) !important; box-shadow: 0 -6px 24px rgba(17,19,24,.06) !important; } [data-theme="light"] .pt-mobile-label { color: rgba(23,105,224,.75) !important; } [data-theme="light"] .pt-mh-liq-count { color: var(--text3) !important; } [data-theme="light"] .pt-mobile-caret { color: var(--text3); } /* ========================================================================= 13. SLIDE-OUT DRAWER NAV ========================================================================= */ [data-theme="light"] #mDrawer { background: var(--surface); border-right: 1px solid var(--border); } [data-theme="light"] .m-drawer-btn { color: var(--text2); } [data-theme="light"] .m-drawer-btn.active, [data-theme="light"] .m-drawer-btn:active { background: var(--c-dim); color: var(--cyan); } [data-theme="light"] .m-drawer-user-chevron { color: var(--text4); /* was rgba(255,255,255,.2) */ } [data-theme="light"] .m-drawer-token.active { background: var(--c-dim); } /* ========================================================================= 15. ADVANCERS / DECLINERS — premium data modules, not plain cards. Tint is applied to the CARD ITSELF (subtle gradient + tinted border); names/numbers stay near-black — only the %-change chips carry color. ========================================================================= */ [data-theme="light"] .m-adv-card { background: linear-gradient(135deg, #ffffff 0%, #f8fcfa 100%); border-color: #dce9e3; } [data-theme="light"] .m-dec-card { background: linear-gradient(135deg, #ffffff 0%, #fdf8f9 100%); border-color: #eadcdf; } [data-theme="light"] .m-adv-sym, [data-theme="light"] .m-dec-title ~ * .m-adv-sym { color: var(--text); /* symbol stays near-black, not green/red */ } /* ========================================================================= 16. NET FLOW — the card that should feel expensive. Stronger (but still restrained) shadow than the default card, crisp green bars, and a heavier near-black number instead of the dark theme's off-white. ========================================================================= */ [data-theme="light"] #mNetFlowCard { box-shadow: 0 8px 24px rgba(15,23,42,.055); } [data-theme="light"] .aeon-etf-wrap { background: #ffffff !important; border-color: var(--border) !important; } [data-theme="light"] .aeon-etf-btc, [data-theme="light"] .aeon-etf-hist { border-right-color: var(--border) !important; } [data-theme="light"] .aeon-etf-num { color: #101319 !important; /* was #F2F4F7 — near-black, heavier */ font-weight: 750 !important; letter-spacing: -.04em !important; } [data-theme="light"] .aeon-etf-lbl, [data-theme="light"] .aeon-etf-hist-lbl, [data-theme="light"] .aeon-etf-date, [data-theme="light"] .aeon-etf-aum, [data-theme="light"] .aeon-etf-xaxis-col .d { color: var(--text3) !important; } [data-theme="light"] .aeon-etf-xaxis-col .m { color: var(--text4) !important; } /* Bars: keep them strong and crisp, not washed out — only a light backing track behind them changes for light mode. */ [data-theme="light"] .aeon-etf-bar-col { background: rgba(17,19,24,.04); } /* ========================================================================= 17. SENTIMENT — an anchor of the page: bigger, darker score number, pale neutral track, arc + "GREED"/"FEAR" label stay semantic color. ========================================================================= */ [data-theme="light"] .m-sent-gauge-val { color: #101319; font-size: 26px; /* up from 20px — reads as a headline figure */ font-weight: 750; } [data-theme="light"] .m-sent-chart-val { color: #101319; font-weight: 750; } /* ========================================================================= 18. INSIGHTS — compact intelligence-alert rows, not generic article rows. ========================================================================= */ [data-theme="light"] .m-insight-card { border-bottom: 1px solid #e9edf1; transition: background 120ms ease; } [data-theme="light"] .m-insight-card:hover { background: #fafbfc; } [data-theme="light"] .m-insight-icon { background: #eef0f3; /* was rgba(255,255,255,.04) */ } [data-theme="light"] .m-insight-card.bull .m-insight-icon { color: var(--green); background: var(--g-dim); } [data-theme="light"] .m-insight-card.bear .m-insight-icon { color: var(--red); background: var(--r-dim); } [data-theme="light"] .m-insight-card.impact .m-insight-icon { color: var(--amber); background: var(--a-dim); } [data-theme="light"] .m-insight-text { color: #171a20; /* title: heavier near-black */ font-weight: 650; } [data-theme="light"] .m-insight-src { color: #89919d; /* meta: muted */ } [data-theme="light"] .m-insight-link { color: var(--cyan); /* was rgba(59,130,246,.7) */ } [data-theme="light"] .m-insight-label.bull { color: var(--green); } [data-theme="light"] .m-insight-label.bear { color: var(--red); } [data-theme="light"] .m-insight-label:not(.bull):not(.bear) { color: #69727e; } /* neutral */ /* ========================================================================= 19. BREATHING ROOM — light mode gets slightly more air between cards than dark mode (which relies on darkness to visually compress things). Still dense/terminal, just not claustrophobic on white. ========================================================================= */ [data-theme="light"] #mHomeFeed { gap: 14px; } /* ========================================================================= 21. SHARED DATA CELLS (.mc / .m-cell) — used across Signals, Position Calculator, Liquidations, Cycle Compare. .mc itself already routes through var(--surface)/var(--border); only the raised inner "cell" pattern (rgba(255,255,255,.02) on black) and its hardcoded #fff value text need a light equivalent. ========================================================================= */ [data-theme="light"] .m-cell, [data-theme="light"] .m-sess-card, [data-theme="light"] .m-exc-card { background: #f7f8fa; } [data-theme="light"] .m-cell-v, [data-theme="light"] .m-exc-price { color: var(--text) !important; /* was hardcoded #fff */ } [data-theme="light"] .mc:hover { background: var(--c-dim); } [data-theme="light"] .mc::before { background: rgba(23,105,224,.15); } /* ========================================================================= 22. POSITION CALCULATOR — inputs, sliders, Long/Short toggle ========================================================================= */ [data-theme="light"] .m-ci-field { background: #f7f8fa; } [data-theme="light"] .m-ci-inp { color: var(--text) !important; /* was hardcoded #fff */ } /* Long/Short buttons are built as inline-styled template strings in JS (#mCalcLong / #mCalcShort), so this needs !important to win over the plain (non-!important) inline style. */ [data-theme="light"] #mCalcLong { background: var(--g-dim) !important; border-color: rgba(8,124,85,.35) !important; } [data-theme="light"] #mCalcShort { border-color: var(--border) !important; } [data-theme="light"] #mCalcAutoBtn { border-color: var(--border); } /* ========================================================================= 23. MARKETS PAGE — sticky breadcrumb/stat/chip bars, search, asset rows ========================================================================= */ [data-theme="light"] .m-mkt-breadcrumb, [data-theme="light"] .m-mkt-statgrid, [data-theme="light"] .m-mkt-chips-row, [data-theme="light"] .m-mkt-chips-more { background: rgba(255,255,255,.92); } [data-theme="light"] .m-mkt-search-wrap { background: #f7f8fa; border-color: var(--border); } [data-theme="light"] .m-mkt-search-kbd { background: #eef0f3; border-color: var(--border); } [data-theme="light"] .m-mkt-row:active { background: rgba(17,19,24,.03); } [data-theme="light"] .m-mkt-score-seg { background: #eaecf0; } [data-theme="light"] .m-mkt-tabs { background: rgba(255,255,255,.92); } /* ========================================================================= 24. SIGNALS PAGE — sub-tabs, Session Intelligence, Multi-Exchange grid ========================================================================= */ [data-theme="light"] .m-sig-tabs { background: rgba(255,255,255,.92); } /* Exchange cards keep their per-exchange brand accent (--exc-accent, set inline per card) — only the base fill changes for light mode. The accent-tinted corner gradient (.m-exc-card::before) still works fine against white, just dial the mix down slightly so cards don't turn into candy against a bright background. */ [data-theme="light"] .m-exc-card::before { background: radial-gradient(ellipse at top left, color-mix(in srgb, var(--exc-accent, rgba(23,105,224,.3)) 9%, transparent), transparent 70%); } /* ========================================================================= 25. HTF CROSS MOMENTUM / MONEY FLOW — best-effort coverage note The trend banner ("UPTREND"/"CONFIRM ENTRY"), reversal-probability box, and the bear-cycle date tiles are built as inline-styled template strings in app.js (colors computed per render, e.g. `style="color:rgba(155,170,192,.45)"`), not CSS classes — so a stylesheet can't cleanly retheme them the way it can everything else on this page. In practice the muted rgba(155,170,192,x) label text and the pale rgba(255,255,255,.02–.05) panel backgrounds they use are dim enough that they stay legible on white without a fix, just slightly flatter than they'd look with a proper pass. If you want these fully on-brand for light mode too, the clean fix is a few lines in app.js reading `document.documentElement.dataset.theme` where those inline styles are built (search app.js for "REVERSAL PROBABILITY" and "CONFIRM ENTRY") — happy to do that pass if you want it. ========================================================================= */ /* ========================================================================= 27. SIGNAL MATRIX — mirrors desktop's #sigMatrix markup verbatim (same .sig-*/.si-*/.c-* class names, unprefixed), so these fixes apply to both the mobile mirror and the desktop panel itself. ========================================================================= */ [data-theme="light"] .si-neut { background: #eef0f3; border-color: var(--border); color: var(--text3); } [data-theme="light"] .c-neut { background: #eef0f3; border-color: var(--border); } [data-theme="light"] #mSigMatrixBody .sig-sum-track { background: #eaecf0; } /* ========================================================================= 28. R:R SETUP SCANNER — results list (mobile-specific .m-sig-rr-results) ========================================================================= */ [data-theme="light"] .m-sig-rr-results .rr-setup-card { background: #f7f8fa; } [data-theme="light"] .m-sig-rr-results .rr-geo-track { background: #eaecf0; } /* ========================================================================= 29. PHASES — Celestial Phases Market. This block (#sMoonSection) is already a self-contained mobile-native treatment (not inherited from desktop-shell.css), so the fixes are limited to a handful of translucent-white panels. The gold accent (moon phase name, active body-toggle) is a deliberate "metallic" note per the brief and is left as-is — it reads as a premium accent on white too. ========================================================================= */ [data-theme="light"] #sMoonSection .s-moon-body-btn { background: #f7f8fa; } [data-theme="light"] #sMoonSection .m-cell { background: #f7f8fa; } [data-theme="light"] #sMoonTimeline::-webkit-scrollbar-track { background: #eef0f3; } /* ========================================================================= 30. CYCLE INTEL — Cycle Compare / Cycle Tracker / Monthly Performance. Same situation as Phases: #mSigCycleIntelView is a self-contained mobile-native block, mostly var()-driven already. ========================================================================= */ [data-theme="light"] #mSigCycleIntelView .m-cell, [data-theme="light"] #mSigCycleIntelView .ct-mini-stat { background: #f7f8fa; } /* Generic .m-cycle-btn (used outside the scoped blocks above too, e.g. Home's Cycle Compare card) — inactive state text was a low-contrast blue-grey tuned for black; bumped to the standard muted text color. */ [data-theme="light"] .m-cycle-btn { color: var(--text3); background: var(--c-dim); border-color: rgba(23,105,224,.18); } [data-theme="light"] .m-cycle-btn.active, [data-theme="light"] #mSigCycleIntelView .s-cycle-btn.active, [data-theme="light"] #mSigCycleIntelView .s-monthly-tab.active { background: var(--c-mid); border-color: rgba(23,105,224,.4); color: var(--cyan); text-shadow: none; } /* ── Coverage note ───────────────────────────────────────────────────── .ct-section / .ct-card / .moon-current-card base styles also exist in desktop-shell.css, which wasn't part of the files you shared — the mobile views above don't inherit from it (per the code comments at #sMoonSection and #mSigCycleIntelView, it's ancestor-scoped to desktop containers this markup doesn't have), so mobile should be fully covered. If any *desktop* card built from those classes still looks dark once you flip the toggle there, send that file over and I'll extend this same pass to it. ────────────────────────────────────────────────────────────────────── */ /* ========================================================================= 31. SCROLLBAR + SELECTION (matches the premium-light reference doc) ========================================================================= */ [data-theme="light"] ::-webkit-scrollbar-thumb { background: #cdd2d9; } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #b7bdc6; } [data-theme="light"] ::selection { background: rgba(23,105,224,.16); color: var(--text); }