/* ================================================================== Centricity dashboard — Theme skin (light / dark) Paired with theme.js. data-theme lives on . Default = dark. Scoping (set by the injector as a class) prevents any bleed between the two native architectures: body.ctx-native-light → pages that are light by default (dashboard-style.css pages, home, tools) get a DARK skin under [data-theme="dark"] body.ctx-native-dark → the premium charcoal pages get a LIGHT skin under [data-theme="light"] Each group keeps its original look untouched in its default state. ================================================================== */ /* ================================================================== A. DARK SKIN — for natively-light pages ================================================================== */ html[data-theme="dark"] body.ctx-native-light{background:#0D0D0D;color:#ECE8E1} html[data-theme="dark"] body.ctx-native-light{ background:radial-gradient(135% 90% at 50% -8%,#1a1a1a 0%,#131313 40%,#0d0d0d 100%) fixed; } /* tiles / grid */ html[data-theme="dark"] body.ctx-native-light .tile-grid{background:transparent} html[data-theme="dark"] body.ctx-native-light .tile{ background:#151515;border-color:rgba(200,164,93,.20);color:#ECE8E1; box-shadow:0 18px 40px -28px rgba(0,0,0,.85)} html[data-theme="dark"] body.ctx-native-light .tile:hover{background:#1c1c1c;border-top-color:var(--gold)} html[data-theme="dark"] body.ctx-native-light .tile .desc{color:rgba(236,232,225,.55)} html[data-theme="dark"] body.ctx-native-light .tile .label{color:#ECE8E1} html[data-theme="dark"] body.ctx-native-light .tile:hover .arrow{color:var(--gold)} /* sections + headings + text */ html[data-theme="dark"] body.ctx-native-light section{border-bottom-color:rgba(200,164,93,.15)} html[data-theme="dark"] body.ctx-native-light h2, html[data-theme="dark"] body.ctx-native-light h3, html[data-theme="dark"] body.ctx-native-light h4{color:#ECE8E1} html[data-theme="dark"] body.ctx-native-light h3{border-bottom-color:var(--gold)} html[data-theme="dark"] body.ctx-native-light p{color:#ECE8E1} html[data-theme="dark"] body.ctx-native-light .muted, html[data-theme="dark"] body.ctx-native-light .footer-src, html[data-theme="dark"] body.ctx-native-light .val-card .desc, html[data-theme="dark"] body.ctx-native-light .tile .num{color:rgba(236,232,225,.55)} /* KPI cards */ html[data-theme="dark"] body.ctx-native-light .kpi{background:#161616;border-left-color:var(--gold)} html[data-theme="dark"] body.ctx-native-light .kpi .lbl{color:rgba(236,232,225,.72)} html[data-theme="dark"] body.ctx-native-light .kpi .val{color:#ECE8E1} html[data-theme="dark"] body.ctx-native-light .kpi .sub{color:rgba(236,232,225,.5)} html[data-theme="dark"] body.ctx-native-light .kpi:hover{background:#1e1e1e;border-left-color:#FFE6BD} /* tables (th stays black — already on-brand) */ html[data-theme="dark"] body.ctx-native-light table{background:#141414} html[data-theme="dark"] body.ctx-native-light td{border-color:rgba(200,164,93,.14);color:#ECE8E1} html[data-theme="dark"] body.ctx-native-light tr:nth-child(even) td{background:#171717} html[data-theme="dark"] body.ctx-native-light td.pos{color:#7FB48F} html[data-theme="dark"] body.ctx-native-light td.neg{color:#E0857A} /* cards / valuation / 4pk */ html[data-theme="dark"] body.ctx-native-light .card, html[data-theme="dark"] body.ctx-native-light .val-card, html[data-theme="dark"] body.ctx-native-light .pk{ background:#151515;border-color:rgba(200,164,93,.18);color:#ECE8E1} html[data-theme="dark"] body.ctx-native-light .card-tan{background:#1a1712;border-color:rgba(200,164,93,.3)} html[data-theme="dark"] body.ctx-native-light .val-card .nums div{background:#0f0f0f;color:#ECE8E1} html[data-theme="dark"] body.ctx-native-light .val-card .verdict, html[data-theme="dark"] body.ctx-native-light .commentary{background:#0f0f0f} /* soon / big number */ html[data-theme="dark"] body.ctx-native-light .soon{background:#161616;border-color:rgba(200,164,93,.35)} html[data-theme="dark"] body.ctx-native-light .big-num{color:#ECE8E1} /* edit mode */ html[data-theme="dark"] body.ctx-native-light:not(.view-mode) [contenteditable="true"]{ background:#2a2413;outline-color:var(--gold);color:#ECE8E1} /* (Home is dark-native — its light skin lives in section B.) */ /* ================================================================== B. LIGHT SKIN — for premium charcoal pages Variables cascade from ; --ink-rgb flips the cream text literals that were converted to rgba(var(--ink-rgb),..). ================================================================== */ html[data-theme="light"] body.ctx-native-dark{ --bg:#F7F5F1; --bg-hi:#FFFFFF; --bg-lo:#EFEBE4; --bg-2:#FFFFFF; --panel:#FFFFFF; --panel-2:#F2EEE7; --ink:#1E1A14; --line:rgba(0,0,0,.12); --line-soft:rgba(0,0,0,.05); /* deeper golds so gold text/labels stay readable on white */ --gold:#9A7638; --gold-soft:#9A7638; --gold-bright:#84632C; --gold-label:#84632C; --gold-deep:#6E521F; --card:#FFFFFF; --card-hi:#F4F0E9; --t2:rgba(30,26,20,.84); --t3:rgba(30,26,20,.66); --ink-rgb:26,22,17; --kv:#161009; --kv-rgb:26,22,17; background:#F7F5F1 !important; color:#1E1A14; } /* Defaults for the converted cream literals (--kv / --kv-rgb). Defined at :root/html level (not body) so that pages which declare --ink:var(--kv) at :root resolve it correctly in BOTH themes. */ :root{--kv:#F2ECE0; --kv-rgb:242,236,224} html[data-theme="light"]{--kv:#161009; --kv-rgb:26,22,17} html[data-theme="light"] body.ctx-native-dark{ background:radial-gradient(135% 90% at 50% -8%,#FFFFFF 0%,#F7F5F1 45%,#F1ECE4 100%) fixed !important; } /* white-on-dark subtle surfaces would vanish on a light page — give the main card families a real light fill + soft shadow */ html[data-theme="light"] body.ctx-native-dark .mv-card, html[data-theme="light"] body.ctx-native-dark .mc-card, html[data-theme="light"] body.ctx-native-dark .mo-hero, html[data-theme="light"] body.ctx-native-dark .mo-dcard, html[data-theme="light"] body.ctx-native-dark .mo-kpi, html[data-theme="light"] body.ctx-native-dark .nl-card, html[data-theme="light"] body.ctx-native-dark .page-nav-btn, html[data-theme="light"] body.ctx-native-dark .pres-card, html[data-theme="light"] body.ctx-native-dark .tile, html[data-theme="light"] body.ctx-native-dark .card{ background:#FFFFFF !important; border-color:rgba(0,0,0,.10); box-shadow:0 14px 34px -26px rgba(0,0,0,.35); } /* KPI grid gap-lines were a translucent gold on black — soften on white */ html[data-theme="light"] body.ctx-native-dark .mo-kpis{background:rgba(0,0,0,.08);border-color:rgba(0,0,0,.10)} /* ===== KPI cards — premium hover micro-interaction (market-outlook grid) ===== */ html[data-theme="light"] body.ctx-native-dark .mo-kpi{position:relative;overflow:hidden;transition:background .45s ease,box-shadow .45s ease} html[data-theme="light"] body.ctx-native-dark .mo-kpi::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#D9BC82,#BD9568);transform:scaleY(0);transform-origin:center;transition:transform .55s cubic-bezier(.22,1,.36,1);z-index:3} html[data-theme="light"] body.ctx-native-dark .mo-kpi::after{content:'';position:absolute;top:0;left:-160%;width:55%;height:100%;background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.5) 50%,transparent 100%);transform:skewX(-20deg);pointer-events:none;z-index:2;transition:left .75s cubic-bezier(.22,1,.36,1)} html[data-theme="light"] body.ctx-native-dark .mo-kpi:hover{background:linear-gradient(180deg,#FCF9F3,#F3EBDB)!important;box-shadow:inset 0 0 0 1px rgba(189,149,104,.5),inset 0 0 24px rgba(189,149,104,.10)!important} html[data-theme="light"] body.ctx-native-dark .mo-kpi:hover::before{transform:scaleY(1)} html[data-theme="light"] body.ctx-native-dark .mo-kpi:hover::after{left:170%} html[data-theme="light"] body.ctx-native-dark .mo-kpi .mo-kval, html[data-theme="light"] body.ctx-native-dark .mo-kpi .mo-klbl{transition:transform .55s cubic-bezier(.22,1,.36,1),color .4s ease,letter-spacing .4s ease} html[data-theme="light"] body.ctx-native-dark .mo-kpi:hover .mo-kval{transform:translateX(6px)} html[data-theme="light"] body.ctx-native-dark .mo-kpi:hover .mo-klbl{transform:translateX(6px);letter-spacing:2.4px;color:#9A7638} /* headings / body copy → dark ink (var-driven picks most of this up) */ html[data-theme="light"] body.ctx-native-dark .mo-title, html[data-theme="light"] body.ctx-native-dark .mv-cname, html[data-theme="light"] body.ctx-native-dark .mc-ctitle, html[data-theme="light"] body.ctx-native-dark .mo-kval, html[data-theme="light"] body.ctx-native-dark .mv-nv{color:#1E1A14} /* Light mode: iOS-style "liquid glass" topbar — translucent, blurred, with dark text and a darkened logo so it reads on the light bar. */ html[data-theme="light"] body.ctx-native-dark .topbar, html[data-theme="light"] body.pastel .topbar{ background:rgba(255,255,255,.55) !important; -webkit-backdrop-filter:saturate(180%) blur(26px) !important; backdrop-filter:saturate(180%) blur(26px) !important; border-bottom:1px solid rgba(0,0,0,.08) !important; box-shadow:0 10px 30px -22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.6) !important; } /* Liquid-glass capsules for the HOME button + theme toggle (light mode) */ html[data-theme="light"] body.ctx-native-dark .topbar .back-btn, html[data-theme="light"] body.pastel .topbar .back-btn{ color:#7E5F28 !important; border-radius:999px !important; background:rgba(255,255,255,.5) !important; border:1px solid rgba(255,255,255,.75) !important; -webkit-backdrop-filter:blur(12px) saturate(180%); backdrop-filter:blur(12px) saturate(180%); box-shadow:0 4px 14px -4px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -2px 4px rgba(0,0,0,.04) !important; } html[data-theme="light"] body.ctx-native-dark .topbar .back-btn:hover, html[data-theme="light"] body.pastel .topbar .back-btn:hover{ background:rgba(255,255,255,.72) !important; color:#6E521F !important; } html[data-theme="light"] .ctx-theme-toggle{ color:#7E5F28 !important; background:rgba(255,255,255,.5) !important; border:1px solid rgba(255,255,255,.75) !important; -webkit-backdrop-filter:blur(12px) saturate(180%); backdrop-filter:blur(12px) saturate(180%); box-shadow:0 4px 14px -4px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -2px 4px rgba(0,0,0,.04) !important; } html[data-theme="light"] body.ctx-native-dark .topbar, html[data-theme="light"] body.ctx-native-dark .topbar *, html[data-theme="light"] body.pastel .topbar, html[data-theme="light"] body.pastel .topbar *{color:var(--ink)} html[data-theme="light"] .topbar .divider{background:rgba(0,0,0,.18) !important} html[data-theme="light"] .topbar img.logo, html[data-theme="light"] body[data-page="home"] .topbar .brand img.logo{filter:brightness(0);opacity:.82} html[data-theme="light"] body[data-page="home"] .topbar .actions > span{color:rgba(30,26,20,.5) !important} /* (toggle glass styling handled above) */ /* footer: flip the hardcoded dark bar to a light band across every architecture */ html[data-theme="light"] footer{background:#F4F0E9 !important;border-top:1px solid #E4DDD0 !important} html[data-theme="light"] footer, html[data-theme="light"] footer *{color:#4A443A !important} html[data-theme="light"] footer .gold{color:var(--gold) !important} html[data-theme="light"] footer img.logo-footer{filter:brightness(0) !important;opacity:.78 !important} /* Bottom prev/next pager sits on the light page → give it dark text */ html[data-theme="light"] body.ctx-native-dark .page-nav-btn, html[data-theme="light"] body.ctx-native-dark .nav-ttl{color:#1E1A14} html[data-theme="light"] body.ctx-native-dark .nav-lbl{color:rgba(30,26,20,.55)} html[data-theme="light"] body.ctx-native-dark .page-nav{border-top-color:rgba(0,0,0,.12)} /* gold-literal text spots (not var-driven) → deepen on white for contrast */ html[data-theme="light"] body.ctx-native-dark .mv-nl, html[data-theme="light"] body.ctx-native-dark .mo-klbl{color:#84632C} /* caption / source / description text — force a dark, readable floor on white */ html[data-theme="light"] body.ctx-native-dark .mo-sources, html[data-theme="light"] body.ctx-native-dark .mo-updated, html[data-theme="light"] body.ctx-native-dark .mv-desc, html[data-theme="light"] body.ctx-native-dark .mv-rlbl, html[data-theme="light"] body.ctx-native-dark .mv-ends, html[data-theme="light"] body.ctx-native-dark .mv-verdict, html[data-theme="light"] body.ctx-native-dark .mc-csub, html[data-theme="light"] body.ctx-native-dark .flow-src, html[data-theme="light"] body.ctx-native-dark .idx-sub, html[data-theme="light"] body.ctx-native-dark .idx-cap, html[data-theme="light"] body.ctx-native-dark .cmp-sub, html[data-theme="light"] body.ctx-native-dark .cmp-foot, html[data-theme="light"] body.ctx-native-dark .pms-nav-head, html[data-theme="light"] body.ctx-native-dark .muted, html[data-theme="light"] body.ctx-native-dark .footer-src, html[data-theme="light"] body.ctx-native-dark .mf-ksub, html[data-theme="light"] body.ctx-native-dark .mf-ksub .pv, html[data-theme="light"] body.ctx-native-dark .tile .desc{color:#4A443A !important} /* calendar-year quilt: cream cell text vanishes on pale tints in light mode → dark ink + slightly deeper tints so every cell reads */ html[data-theme="light"] body.ctx-native-dark .q-gold{color:#5E471F !important;background:rgba(200,164,93,.42) !important} html[data-theme="light"] body.ctx-native-dark .q-re{color:#6B5A42 !important;background:rgba(199,170,132,.4) !important} html[data-theme="light"] body.ctx-native-dark .q-us{background:rgba(120,120,120,.16) !important;color:#26241F !important} html[data-theme="light"] body.ctx-native-dark .q-debt{background:rgba(120,120,120,.26) !important} html[data-theme="light"] body.ctx-native-dark .q-ind{background:rgba(200,164,93,.16) !important} html[data-theme="light"] body.ctx-native-dark .q-val.neg{color:#B3352E !important} /* comparison modals / zoom panels hardcode a dark fill → make light so their (now dark) text is readable */ html[data-theme="light"] body.ctx-native-dark .cmp-modal-inner, html[data-theme="light"] body.ctx-native-dark .chart-zoom-inner{ background:#FFFFFF !important; border-color:rgba(0,0,0,.15)} /* edit mode on light */ html[data-theme="light"] body.ctx-native-dark [contenteditable="true"]:focus{outline-color:#BD9568} /* ---- Home page: dark-native, its own variable set → LIGHT skin ---- */ html[data-theme="light"] body[data-page="home"]{ --bg-0:#F7F5F1; --bg-1:#FFFFFF; --bg-2:#FFFFFF; --bg-3:#F4F0E9; --line:rgba(0,0,0,.12); --ink:#161009; --ink-2:rgba(26,22,17,.84); --ink-3:rgba(26,22,17,.64); } html[data-theme="light"] body[data-page="home"] .tile{background:#FFFFFF;border-color:rgba(0,0,0,.12)} html[data-theme="light"] body[data-page="home"] .home-hero .month-pill{color:rgba(30,26,20,.6)} /* home footer now light like the rest */ html[data-theme="light"] body[data-page="home"] footer, html[data-theme="light"] body[data-page="home"] footer div{color:#4A443A!important} /* ================================================================== C. Pastel architecture (pastel-theme.css) → LIGHT skin pastel-theme.css is fully variable-driven, so redefining its palette flips every surface + text across all ~20 pastel pages at once. ================================================================== */ html[data-theme="light"]{background:#F7F5F1} html[data-theme="light"] body.pastel{ --bg-0:#F7F5F1; --bg-1:#FFFFFF; --bg-2:#FFFFFF; --bg-3:#F4F0E9; --bg-card:#FFFFFF; --bg-card-hover:#F4F0E9; --line:rgba(0,0,0,.12); --line-mid:rgba(0,0,0,.18); --line-strong:rgba(189,149,104,.55); --hairline:rgba(0,0,0,.06); --cream:#161009; --text-1:#161009; --text-2:rgba(26,22,17,.84); --text-3:rgba(26,22,17,.66); --text-4:rgba(26,22,17,.52); /* deeper golds so gold text/labels stay readable on white */ --gold:#9A7638; --gold-light:#9A7638; --gold-deep:#6E521F; background:#F7F5F1; } /* pastel pages force a cream title + bright logo on the topbar at high specificity — override so they read on the light glass bar */ html[data-theme="light"] body.pastel .topbar .brand .title{color:#1E1A14 !important} html[data-theme="light"] body.pastel .topbar .brand img.logo{filter:brightness(0) !important;opacity:.82} /* Table category rows use inline black bg (like the black column header) — keep those dark bars but force their label text back to cream so it stays readable on the light page. Data rows sit on white → dark text. */ html[data-theme="light"] body.ctx-native-dark td[colspan]{color:#EFE6D6 !important} html[data-theme="light"] body.ctx-native-dark .am-tbl th{color:#84632C !important} html[data-theme="light"] body.ctx-native-dark td[colspan] b{color:#EFE6D6 !important} /* bespoke dark content tiles (e.g. fund screener tiles) → light cards */ html[data-theme="light"] body.ctx-native-dark .mf-screener-tile{ background:#FFFFFF !important; border-color:rgba(0,0,0,.12) !important; box-shadow:0 8px 22px -16px rgba(0,0,0,.3)} /* ================================================================== D. Home hero — ambient background motion only (no text animation). A drifting gold "constellation" canvas sits behind the wordmark and fills the empty band. Driven by requestAnimationFrame (hero-anim.js), so the site-wide "motion off" CSS reset does not affect it. ================================================================== */ body[data-page="home"] .home-hero{overflow:hidden} body[data-page="home"] #heroCanvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; display:block; } /* bridge keeps its original absolute centering — only its layer is set */ body[data-page="home"] .home-bridge{z-index:1} body[data-page="home"] .home-hero .tagline, body[data-page="home"] .home-hero h1, body[data-page="home"] .home-hero .month-pill{position:relative; z-index:2} /* ==== dark-mode fixes for elements added during the light-only phase ==== */ html[data-theme="dark"] body.ctx-native-dark .flow-table th{color:#D9BC82 !important} html[data-theme="dark"] body.ctx-native-dark .flow-table .pos{color:#7FB996 !important} html[data-theme="dark"] body.ctx-native-dark .flow-table .neg{color:#E0746A !important} html[data-theme="dark"] body.ctx-native-dark .flow-table .chip{color:#E2C77E !important} html[data-theme="dark"] body.ctx-native-dark .news-card{background:#141210 !important;border-color:rgba(200,164,93,.20) !important} html[data-theme="dark"] body.ctx-native-dark .news-h{color:#BF9C58 !important}