/** * Altum Wealth Insights — global dark mode overrides * Selector: [data-theme="dark"] on (set via altum_theme in localStorage) * Light mode: unchanged — rules only apply under [data-theme="dark"] */ [data-theme="dark"] { --color-bg: #0b1120; --color-bg-secondary: #111827; --color-bg-subtle: #111827; --color-surface: #162032; --color-surface-alt: #1a2940; --color-bg-card: #162032; --color-input-bg: #1a2940; --color-input-border: #475569; --color-text: #f1f5f9; --color-text-muted: #94a3b8; --color-text-subtle: #64748b; --color-border: #334155; --color-border-light: #1e293b; } [data-theme="dark"] body { background-color: var(--color-bg, var(--bg, #0b1120)); color: var(--color-text, var(--text, #e8edf5)); } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--color-text, var(--text, #e8edf5)); } [data-theme="dark"] p, [data-theme="dark"] li, [data-theme="dark"] label, [data-theme="dark"] span:not(.pos):not(.neg) { color: inherit; } [data-theme="dark"] .text-muted, [data-theme="dark"] .text-secondary, [data-theme="dark"] small, [data-theme="dark"] .muted { color: var(--color-text-muted, var(--muted, #94a3b8)) !important; } /* Cards / panels / surfaces */ [data-theme="dark"] .card, [data-theme="dark"] .panel, [data-theme="dark"] .kpi, [data-theme="dark"] .risk-card, [data-theme="dark"] .box, [data-theme="dark"] .widget, [data-theme="dark"] .hero-card, [data-theme="dark"] .pricing-card, [data-theme="dark"] .plan-card, [data-theme="dark"] .stat-card, [data-theme="dark"] .admin-card, [data-theme="dark"] .stat-block, [data-theme="dark"] section, [data-theme="dark"] .filter-bar, [data-theme="dark"] .sub-filter, [data-theme="dark"] .ccy-table-wrap, [data-theme="dark"] .chart-container, [data-theme="dark"] .empty-state, [data-theme="dark"] .disclaimer-modal, [data-theme="dark"] .modal-inner, [data-theme="dark"] .um-inner, [data-theme="dark"] .feedback-modal__inner, [data-theme="dark"] .tour-card, [data-theme="dark"] .beginner-guide-panel, [data-theme="dark"] .insights-card, [data-theme="dark"] .wc-card, [data-theme="dark"] .what-changed-card { background-color: var(--color-surface, var(--surface, #162032)) !important; border-color: var(--color-border, var(--border, #1e3a5f)) !important; color: var(--color-text, var(--text, #e8edf5)); } [data-theme="dark"] .legal-disclaimer, [data-theme="dark"] .analysis-disclaimer, [data-theme="dark"] .insights-privacy-note { background-color: var(--color-surface-alt, var(--surface2, #111827)) !important; border-color: var(--color-border, var(--border, #1e3a5f)) !important; color: var(--color-text-muted, var(--text2, #cbd5e1)) !important; } [data-theme="dark"] .insights-error { background-color: rgba(245, 158, 11, 0.12) !important; color: #fcd34d !important; border: 1px solid rgba(245, 158, 11, 0.35); } [data-theme="dark"] .demo-note { background: rgba(245, 158, 11, 0.12) !important; border-color: rgba(245, 158, 11, 0.35) !important; color: #fcd34d !important; } /* Marketing landing */ [data-theme="dark"] .eyebrow, [data-theme="dark"] .hero-card, [data-theme="dark"] .card, [data-theme="dark"] .chart, [data-theme="dark"] .kpi, [data-theme="dark"] .pricing-tier, [data-theme="dark"] .comparison-table-wrap, [data-theme="dark"] .faq-block { background-color: var(--color-surface, #162032) !important; border-color: var(--color-border, #1e3a5f) !important; } [data-theme="dark"] .pricing-hero { background: var(--color-bg, #0b1120) !important; border-bottom-color: var(--color-border, #1e3a5f) !important; } [data-theme="dark"] h1, [data-theme="dark"] .card h3, [data-theme="dark"] .kpi strong { color: var(--color-text, #e8edf5) !important; } [data-theme="dark"] .illustration { background: linear-gradient(135deg, #111827, #162032) !important; border-color: var(--color-border, #1e3a5f) !important; } /* Tables */ [data-theme="dark"] table { color: var(--color-text, var(--text, #e8edf5)); border-color: var(--color-border, var(--border, #1e3a5f)); } [data-theme="dark"] thead, [data-theme="dark"] thead tr, [data-theme="dark"] th { background-color: var(--color-surface-alt, var(--surface2, #1a2940)) !important; color: var(--color-text-muted, var(--muted, #94a3b8)) !important; border-color: var(--color-border, var(--border, #1e3a5f)) !important; } [data-theme="dark"] tbody tr, [data-theme="dark"] td { background-color: transparent; color: var(--color-text, var(--text2, #cbd5e1)) !important; border-color: var(--color-border, var(--border, #1e3a5f)) !important; } [data-theme="dark"] tbody tr:hover td, [data-theme="dark"] tr:hover td { background-color: var(--color-surface-alt, var(--surface2, #1a2940)) !important; } [data-theme="dark"] .total-row td { background-color: var(--color-surface-alt, #1a2940) !important; color: var(--color-text, #e8edf5) !important; border-top-color: var(--color-border, #334155) !important; } [data-theme="dark"] .ccy-table th { background-color: var(--color-surface-alt, #1a2940) !important; } /* Forms */ [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select, [data-theme="dark"] .date-inp { background-color: var(--color-input-bg, var(--surface, #162032)) !important; color: var(--color-text, var(--text, #e8edf5)) !important; border-color: var(--color-input-border, var(--border, #475569)) !important; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--color-text-subtle, #64748b) !important; } [data-theme="dark"] select option { background-color: var(--color-surface, #162032); color: var(--color-text, #e8edf5); } [data-theme="dark"] .toggle-bop, [data-theme="dark"] .t-btn, [data-theme="dark"] .mode-toggle { background-color: var(--color-surface-alt, var(--surface2, #111827)) !important; border-color: var(--color-border, var(--border, #1e3a5f)) !important; color: var(--color-text-muted, var(--muted, #94a3b8)) !important; } [data-theme="dark"] .t-btn.active, [data-theme="dark"] .toggle-bop button.active { color: #fff !important; } [data-theme="dark"] .sel-banner { background: var(--blue-pale, rgba(59, 130, 246, 0.15)) !important; border-color: var(--color-border, #1e3a5f) !important; color: var(--blue2, #60a5fa) !important; } [data-theme="dark"] .ov-chip { background: var(--blue-pale, rgba(59, 130, 246, 0.15)) !important; border-color: var(--color-border, #1e3a5f) !important; color: var(--blue2, #60a5fa) !important; } [data-theme="dark"] .ov-chip-btn { color: var(--blue2, #60a5fa) !important; } [data-theme="dark"] .kpi-grade, [data-theme="dark"] .risk-card-value, [data-theme="dark"] .imp-ticker, [data-theme="dark"] .panel-title { color: var(--color-text, var(--text, #e8edf5)) !important; } [data-theme="dark"] .grade-inner { background: var(--color-surface, var(--surface, #162032)) !important; } [data-theme="dark"] .grade-num { color: var(--blue2, #60a5fa) !important; } /* Modals / dropdowns */ [data-theme="dark"] .modal, [data-theme="dark"] .dropdown-menu, [data-theme="dark"] .dash-topnav__lang-menu, [data-theme="dark"] .lang-picker-dropdown, [data-theme="dark"] .user-dropdown { background-color: var(--color-surface, #162032) !important; border-color: var(--color-border, #1e3a5f) !important; box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.6)); } [data-theme="dark"] .modal-backdrop, [data-theme="dark"] .overlay-backdrop { background-color: rgba(0, 0, 0, 0.7) !important; } /* FAQ / accordion */ [data-theme="dark"] details, [data-theme="dark"] .faq-item, [data-theme="dark"] .accordion-item { background-color: var(--color-surface, #162032) !important; border-color: var(--color-border, #1e3a5f) !important; } [data-theme="dark"] summary, [data-theme="dark"] .faq-question { color: var(--color-text, #e8edf5) !important; } /* Footer */ [data-theme="dark"] footer, [data-theme="dark"] .site-footer { background-color: var(--color-bg-secondary, #111827) !important; border-top-color: var(--color-border, #1e3a5f) !important; color: var(--color-text-muted, #94a3b8) !important; } /* Plotly containers — not canvas */ [data-theme="dark"] .js-plotly-plot, [data-theme="dark"] .plotly-graph-div { background: transparent !important; } /* Scrollbars */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--color-bg-secondary, #111827); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--color-border, #334155); border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--color-text-subtle, #64748b); } /* Code */ [data-theme="dark"] code, [data-theme="dark"] pre { background-color: var(--color-surface-alt, #1a2940) !important; color: #e2e8f0 !important; border-color: var(--color-border, #334155) !important; } /* Learn more / tooltips */ [data-theme="dark"] .learn-more__content, [data-theme="dark"] .info-icon::after, [data-theme="dark"] [role="tooltip"] { background-color: var(--color-surface-alt, #1a2940) !important; color: var(--color-text, #e8edf5) !important; border-color: var(--color-border, #334155) !important; }