/* * CleverAlpha AI Advisor — Dark Theme * Matches Velocity Clearing Lunch & Learn design system: * black-first, jade #40C1AC accent, Poppins, sharp corners. * * Overrides Brand Engine tokens under [data-theme="dark"] on . * All wizard/results CSS is already token-driven, so this cascade flips the * entire UI cleanly. */ html[data-theme="dark"] { /* Velocity L&L palette */ --ca-jade: #40C1AC; --ca-jade-dark: #2FA592; --ca-jade-tint: rgba(64, 193, 172, 0.14); /* was #E6F6F3 (opaque mint) */ --ca-gold: #D4AF37; /* Surfaces flipped: paper -> deep card, fog -> pure black */ --ca-paper: #1a1a1a; /* --card-dark from L&L */ --ca-fog: #000000; /* --black */ --ca-hairline: #282832; /* --card-mid, subtle divider */ /* Text flipped */ --ca-ink: #FFFFFF; --ca-graphite: #E4E4EA; /* body copy */ --ca-mist: #B4B4BE; /* --secondary */ /* Signals stay legible on dark */ --ca-signal-error: #FF6B6B; --ca-signal-ok: #4ECDC4; --ca-scrim: rgba(0, 0, 0, 0.78); } /* ---------- Dark-mode-specific fine tuning ---------- */ /* Select chevron: swap the dark stroke SVG for a light one. Only the .ca-select native dropdown has a chevron; text inputs do NOT. */ html[data-theme="dark"] .ca-select { background-color: var(--ca-paper); background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 16px center; } /* Autofilled inputs (Chrome) — force dark surface + light text */ html[data-theme="dark"] input:-webkit-autofill, html[data-theme="dark"] input:-webkit-autofill:hover, html[data-theme="dark"] input:-webkit-autofill:focus { -webkit-text-fill-color: #FFFFFF; -webkit-box-shadow: 0 0 0px 1000px #1a1a1a inset; transition: background-color 5000s ease-in-out 0s; } /* Field wrappers pick up jade-tint (semi-transparent) on select — good on dark */ /* Header logo: existing logo is dark-on-light; invert it in dark mode */ html[data-theme="dark"] .ca-header__logo { filter: brightness(0) invert(1); } /* Nav links: brand ink is now white; hairline stays visible */ html[data-theme="dark"] .ca-header { border-bottom-color: var(--ca-hairline); } /* Progress bar track stays visible on dark */ html[data-theme="dark"] .ca-progress__bar { background: #282832; } /* Results page hero (linear-gradient jade) already looks great on dark */ /* Scorecard prose: ensure links/lists inherit light color */ html[data-theme="dark"] .ca-result-body, html[data-theme="dark"] .ca-result-body p, html[data-theme="dark"] .ca-result-body li { color: var(--ca-graphite); } html[data-theme="dark"] .ca-result-body strong { color: #FFFFFF; } /* Highlight box (educational-callout) — semi-transparent jade on dark */ html[data-theme="dark"] .ca-callout, html[data-theme="dark"] .ca-privacy-note { background: rgba(64, 193, 172, 0.08); border-color: rgba(64, 193, 172, 0.35); color: #FFFFFF; } /* Trust box (SEC-registered adviser card) — its gradient hardcodes #fff which pops white on dark. Replace with dark-friendly jade wash. */ html[data-theme="dark"] .ca-trust { background: linear-gradient(135deg, rgba(64, 193, 172, 0.14) 0%, #1a1a1a 100%); border-color: rgba(64, 193, 172, 0.35); } html[data-theme="dark"] .ca-trust__list { color: var(--ca-graphite); } html[data-theme="dark"] .ca-trust__list strong { color: #FFFFFF; } /* Disclosure fine-print — keep readable but subdued */ html[data-theme="dark"] .ca-disclosure { color: var(--ca-mist); } html[data-theme="dark"] .ca-disclosure a { color: var(--ca-jade); } /* ---------- Theme toggle button ---------- */ .ca-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; margin-left: 24px; background: transparent; border: 1px solid var(--ca-hairline); color: var(--ca-ink); cursor: pointer; transition: background 120ms ease, border-color 120ms ease, transform 200ms ease; border-radius: 0; /* CleverAlpha square geometry */ } .ca-theme-toggle:hover { border-color: var(--ca-jade); color: var(--ca-jade); } .ca-theme-toggle:active { transform: scale(0.94); } .ca-theme-toggle:focus-visible { outline: 2px solid var(--ca-jade); outline-offset: 2px; } .ca-theme-toggle svg { width: 20px; height: 20px; display: block; } /* Show the OPPOSITE icon of the current mode: dark shows sun (click to go light) */ .ca-theme-toggle .ca-icon-sun { display: none; } .ca-theme-toggle .ca-icon-moon { display: block; } html[data-theme="dark"] .ca-theme-toggle .ca-icon-sun { display: block; } html[data-theme="dark"] .ca-theme-toggle .ca-icon-moon { display: none; } /* Anonymization notice — dark-mode overrides */ html[data-theme="dark"] .ca-anon-note { background: linear-gradient(135deg, rgba(64, 193, 172, 0.16) 0%, rgba(64, 193, 172, 0.04) 100%); border-color: rgba(64, 193, 172, 0.35); border-left-color: var(--ca-jade); } html[data-theme="dark"] .ca-anon-note__icon { color: var(--ca-jade); } html[data-theme="dark"] .ca-anon-note__title { color: var(--ca-jade); } html[data-theme="dark"] .ca-anon-note__text { color: #E4E4EA; } /* ============================================================ * Contrast fixes for dark mode * ============================================================ */ /* Allocation banner state variants — their light-mode pastels (#FFF9E6 amber, #FEE7E7 red, #E6F5EA mint) blow out on dark. Swap to dark-friendly semi-transparent tints with colored borders. */ html[data-theme="dark"] .ca-alloc-banner { background: rgba(255, 255, 255, 0.03); border-color: var(--ca-hairline); } html[data-theme="dark"] .ca-alloc-banner--under { background: rgba(212, 175, 55, 0.10); /* gold @ 10% */ border-color: rgba(212, 175, 55, 0.45); } html[data-theme="dark"] .ca-alloc-banner--over { background: rgba(255, 107, 107, 0.10); border-color: rgba(255, 107, 107, 0.45); } html[data-theme="dark"] .ca-alloc-banner--ok { background: rgba(64, 193, 172, 0.10); /* jade @ 10% */ border-color: rgba(64, 193, 172, 0.45); } html[data-theme="dark"] .ca-alloc-banner__label { color: var(--ca-mist); } html[data-theme="dark"] .ca-alloc-banner__value { color: #FFFFFF; } html[data-theme="dark"] .ca-alloc-banner__value-suffix { color: var(--ca-mist); } html[data-theme="dark"] .ca-alloc-banner__hint { color: var(--ca-graphite); } html[data-theme="dark"] .ca-alloc-banner--ok .ca-alloc-banner__hint { color: var(--ca-jade); } html[data-theme="dark"] .ca-alloc-banner--over .ca-alloc-banner__hint { color: var(--ca-signal-error); } /* Allocation control buttons on the banner — ensure jade border is visible against the tinted banner backgrounds */ html[data-theme="dark"] .ca-alloc-btn { background: transparent; color: var(--ca-jade); border-color: var(--ca-jade); } html[data-theme="dark"] .ca-alloc-btn:hover:not(:disabled) { background: var(--ca-jade); color: #0f172a; } /* Allocation preset chips (Retirement-focused / Balanced / ...) */ html[data-theme="dark"] .ca-alloc-preset { background: var(--ca-paper); color: var(--ca-graphite); border-color: var(--ca-hairline); } html[data-theme="dark"] .ca-alloc-preset:hover { border-color: var(--ca-jade); color: var(--ca-jade); } html[data-theme="dark"] .ca-alloc-preset__desc { color: var(--ca-mist); } /* Next-steps action tiles — already token-driven now, but this makes the "Do all" ink-inverted variant look correct on dark (which flipped --ca-ink) */ html[data-theme="dark"] .ca-next-tile { background: var(--ca-paper); border-color: var(--ca-hairline); color: var(--ca-ink); } html[data-theme="dark"] .ca-next-tile:hover { border-color: var(--ca-jade); background: rgba(64, 193, 172, 0.04); } html[data-theme="dark"] .ca-next-tile__body { color: var(--ca-graphite); } /* Keep the jade "Do all" variant readable on both themes */ html[data-theme="dark"] .ca-next-tile--all { background: var(--ca-jade); border-color: var(--ca-jade); } html[data-theme="dark"] .ca-next-tile--all .ca-next-tile__title, html[data-theme="dark"] .ca-next-tile--all .ca-next-tile__body { color: #0a0a0a; } /* Prescriptive move tiles — dark mode */ html[data-theme="dark"] .ca-move-tile { background: var(--ca-paper); border-color: var(--ca-hairline); color: var(--ca-ink); } html[data-theme="dark"] .ca-move-tile:hover { border-color: var(--ca-jade); } html[data-theme="dark"] .ca-move-tile.is-selected { background: rgba(64, 193, 172, 0.12); box-shadow: inset 0 0 0 1px var(--ca-jade); } html[data-theme="dark"] .ca-move-tile__title { color: var(--ca-ink); } html[data-theme="dark"] .ca-move-tile__amount { color: #40C1AC; } html[data-theme="dark"] .ca-move-tile__rationale { color: var(--ca-graphite); } html[data-theme="dark"] .ca-move-tile__check { border-color: #282832; } html[data-theme="dark"] .ca-move-tile.is-selected .ca-move-tile__check { background: var(--ca-jade); border-color: var(--ca-jade); color: #0a0a0a; } /* Behavior category — grey (muted) selected state overrides the jade default */ html[data-theme="dark"] .ca-move-tile--behavior.is-selected { background: rgba(255, 255, 255, 0.04); border-color: #4A4A4A; box-shadow: inset 0 0 0 1px #4A4A4A; opacity: 0.85; } html[data-theme="dark"] .ca-move-tile--behavior.is-selected .ca-move-tile__title, html[data-theme="dark"] .ca-move-tile--behavior.is-selected .ca-move-tile__amount { color: #A8A8A8; } html[data-theme="dark"] .ca-move-tile--behavior.is-selected .ca-move-tile__check { background: #4A4A4A; border-color: #4A4A4A; color: #ffffff; } html[data-theme="dark"] .ca-move-tile.is-selected .ca-move-tile__checked-note { background: var(--ca-jade-dark, var(--ca-jade)); color: #ffffff; } html[data-theme="dark"] .ca-move-tile--behavior.is-selected .ca-move-tile__checked-note { background: #4A4A4A; color: #ffffff; } /* Grouped move sections — dark mode headings/notes */ html[data-theme="dark"] .ca-moves-group__title { color: var(--ca-ink); } html[data-theme="dark"] .ca-moves-group__note { color: var(--ca-graphite); } /* Phase 6 touch-ups #5 - gold accents for the "we can handle" side. */ html[data-theme="dark"] .ca-moves-group__title--gold { color: var(--ca-gold); } html[data-theme="dark"] .ca-moves-group--green .ca-move-tile__title { color: var(--ca-gold); } html[data-theme="dark"] .ca-result-section__title--gold { color: var(--ca-gold); } /* Collapsible chevron picks up gold in dark theme too. */ html[data-theme="dark"] .ca-collapsible__chevron { color: var(--ca-gold); } html[data-theme="dark"] .ca-moves-bar__aggregate { color: var(--ca-ink); } html[data-theme="dark"] .ca-moves-bar { background: var(--ca-paper); border-color: var(--ca-hairline); } html[data-theme="dark"] .ca-moves-bar__count { color: var(--ca-graphite); } /* Analysis CTA — dark mode */ html[data-theme="dark"] .ca-analysis-cta--preparing, html[data-theme="dark"] .ca-analysis-cta--ready { background: rgba(64, 193, 172, 0.10); border-color: rgba(64, 193, 172, 0.45); } html[data-theme="dark"] .ca-analysis-cta--error { background: rgba(255, 107, 107, 0.10); border-color: rgba(255, 107, 107, 0.45); } html[data-theme="dark"] .ca-analysis-cta--demo-locked { background: rgba(180, 180, 190, 0.06); border-color: rgba(180, 180, 190, 0.35); } html[data-theme="dark"] .ca-analysis-cta__text { color: #fff; } html[data-theme="dark"] .ca-analysis-cta__btn:disabled, html[data-theme="dark"] .ca-analysis-cta__btn[aria-disabled="true"] { background: transparent; color: #b4b4be; border-color: #282832; } html[data-theme="dark"] .ca-dash__intro { color: #e4e4ea; } /* Analysis page — dark mode */ html[data-theme="dark"] .ca-analysis-toolbar { background: #000; } html[data-theme="dark"] .ca-back-btn { border-color: #282832; color: #e4e4ea; } html[data-theme="dark"] .ca-back-btn:hover { border-color: #40C1AC; color: #40C1AC; } /* Hero variant — keep white-on-jade contrast in dark mode too (banner is jade in both themes) */ html[data-theme="dark"] .ca-back-btn--hero { background: #ffffff; color: var(--ca-jade, #40C1AC); border-color: #ffffff; } html[data-theme="dark"] .ca-back-btn--hero:hover, html[data-theme="dark"] .ca-back-btn--hero:focus-visible { background: var(--ca-jade, #40C1AC); color: #ffffff; border-color: #ffffff; } html[data-theme="dark"] .ca-email-me { background: #000; border-top-color: #282832; } html[data-theme="dark"] .ca-email-me__title { color: #fff; } html[data-theme="dark"] .ca-email-me__sub { color: #e4e4ea; } html[data-theme="dark"] .ca-email-me .ca-input { background: #1a1a1a; color: #fff; border-color: #282832; } html[data-theme="dark"] .ca-email-me .ca-input:focus { border-color: #40C1AC; } html[data-theme="dark"] .ca-analysis-disclosure { border-top-color: #282832; color: #b4b4be; } html[data-theme="dark"] .ca-analysis-disclosure strong { color: #e4e4ea; } html[data-theme="dark"] .ca-analysis-disclosure__addr { border-top-color: #282832; color: #b4b4be; } /* ---- Habits pills + Habits-Index ring ---- */ html[data-theme="dark"] .ca-habit-row { background: #0e0e14; border-color: #282832; } html[data-theme="dark"] .ca-habit-row.is-answered { border-color: #40C1AC; } html[data-theme="dark"] .ca-habit-row__label { color: #fff; } html[data-theme="dark"] .ca-habit-row__na-hint { color: #b4b4be; } html[data-theme="dark"] .ca-habit-pill { background: #0e0e14; border-color: #282832; color: #fff; } html[data-theme="dark"] .ca-habit-pill:hover:not([disabled]) { background: #17171f; } html[data-theme="dark"] .ca-habit-pill.is-active { background: rgba(64, 193, 172, 0.14); border-color: #40C1AC; color: #fff; } html[data-theme="dark"] .ca-habit-pill--na.is-active { background: rgba(180, 180, 190, 0.10); border-color: #b4b4be; color: #b4b4be; } html[data-theme="dark"] .ca-habits-index__num { color: #fff; } html[data-theme="dark"] .ca-habits-index__label { color: #b4b4be; } html[data-theme="dark"] .ca-habits-index__pillar-label { color: #b4b4be; } html[data-theme="dark"] .ca-habits-index__pillar-bar { background: #17171f; } html[data-theme="dark"] .ca-habits-index__pillar-fill { background: #40C1AC; } html[data-theme="dark"] .ca-habits-index__pillar-val { color: #fff; } /* ---- Info modal (dark theme) ---- */ html[data-theme="dark"] .ca-info { border-color: #2a2a35; color: #b4b4be; } html[data-theme="dark"] .ca-info:hover, html[data-theme="dark"] .ca-info:focus-visible { background: #40C1AC; color: #0a0a0f; border-color: #40C1AC; } html[data-theme="dark"] .ca-info-modal { background: rgba(0, 0, 0, 0.72); } html[data-theme="dark"] .ca-info-modal__box { background: #1a1a24; color: #fff; border-color: #2a2a35; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); } html[data-theme="dark"] .ca-info-modal__title { color: #fff; } html[data-theme="dark"] .ca-info-modal__body { color: #d4d4de; } html[data-theme="dark"] .ca-info-modal__body strong { color: #fff; } html[data-theme="dark"] .ca-info-modal__close { color: #b4b4be; } html[data-theme="dark"] .ca-info-modal__close:hover { color: #fff; } /* -------------------------------------------------------------- */ /* Phase 6 touch-ups #6 (dark): scorecard accounts cell tile gold */ /* -------------------------------------------------------------- */ html[data-theme="dark"] .ca-chart-card--accounts .ca-move-tile__title { color: var(--ca-gold, #D4AF37); }