/* ─── Ingefy Light Theme ───────────────────────────────────────────────────── Applied when . All values override the :root defaults defined inline per-page. html[data-theme="light"] has higher specificity than :root. ─────────────────────────────────────────────────────────────────────────── */ /* ── CSS Transitions: smooth 0.2s on theme switch ────────────────────────── */ html { transition: background-color 0.2s ease; } body, .topbar, nav, .card, .glass-card, .stat-card, .section-card, .metric-card, .kpi-card, .panel, .sidebar, .modal, .dropdown, .notif-dropdown, input, select, textarea, button, table, th, td, a { transition: background-color 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important; } /* ── CSS Variables: Light Mode ───────────────────────────────────────────── */ html[data-theme="light"] { /* Backgrounds */ --bg-void: #eef0f7; --bg-deep: #f0f2f7; --bg-card: #ffffff; --bg-glass: rgba(255, 255, 255, 0.85); --bg-elevated: #f7f8fc; --bg-card-solid: #ffffff; /* Accent — keep indigo identity */ --accent: #7B72D4; --accent-glow: rgba(123, 114, 212, 0.12); --accent-border: rgba(123, 114, 212, 0.35); /* Gold / brand accent (used in landing) */ --gold: #7B72D4; --gold-light: #A49FF5; --gold-dim: rgba(123, 114, 212, 0.12); --gold-glow: rgba(123, 114, 212, 0.22); --gold-border: rgba(123, 114, 212, 0.28); /* Blue accent */ --blue: #0284c7; --blue-dim: rgba(2, 132, 199, 0.1); --blue-glow: rgba(2, 132, 199, 0.18); /* Status */ --green: #15803d; --green-bg: rgba(21, 128, 61, 0.1); --amber: #b45309; --amber-bg: rgba(180, 83, 9, 0.1); --red: #dc2626; --red-bg: rgba(220, 38, 38, 0.1); /* Text */ --text-primary: #0f0f1a; --text-secondary: #4b4b6e; --text-muted: #7878a0; /* Borders */ --border: #e2e4ef; --border-light: #d8daea; --border-strong: #c8cce0; --border-gold: rgba(123, 114, 212, 0.28); --border-blue: rgba(2, 132, 199, 0.22); /* Glassmorphism */ --glass-bg: rgba(255, 255, 255, 0.75); --glass-border: rgba(0, 0, 0, 0.08); } /* ── Body ────────────────────────────────────────────────────────────────── */ html[data-theme="light"] body { background: var(--bg-deep) !important; color: var(--text-primary) !important; } /* Hide decorative background gradients/blobs in light mode */ html[data-theme="light"] body::before { display: none !important; } /* ── Page header gradient text: dark on light bg ─────────────────────────── */ html[data-theme="light"] .page-header h1 { background: linear-gradient(135deg, #0f0f1a 0%, #5B52B4 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* ── Navigation ──────────────────────────────────────────────────────────── */ html[data-theme="light"] .topbar { background: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border-bottom: 1px solid var(--border) !important; } /* Mobile nav dropdown */ html[data-theme="light"] .nav-links { background: #ffffff !important; border-bottom-color: var(--border) !important; } /* Landing page nav */ html[data-theme="light"] nav { background: rgba(255, 255, 255, 0.92) !important; backdrop-filter: blur(24px) saturate(1.2) !important; -webkit-backdrop-filter: blur(24px) saturate(1.2) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important; } /* ── Cards & Panels ─────────────────────────────────────────────────────── */ /* Override hardcoded rgba(255,255,255,0.04) glassmorphism cards */ html[data-theme="light"] [class*="card"], html[data-theme="light"] [class*="panel"], html[data-theme="light"] [class*="section"], html[data-theme="light"] [class*="metric"], html[data-theme="light"] [class*="stat"], html[data-theme="light"] [class*="kpi"], html[data-theme="light"] [class*="widget"], html[data-theme="light"] [class*="box"] { background: var(--bg-card) !important; border-color: var(--border) !important; } /* Elevated cards */ html[data-theme="light"] [class*="elevated"] { background: var(--bg-elevated) !important; } /* ── Inputs & Forms ──────────────────────────────────────────────────────── */ html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea { background: #ffffff !important; border-color: var(--border) !important; color: var(--text-primary) !important; } html[data-theme="light"] input:focus, html[data-theme="light"] select:focus, html[data-theme="light"] textarea:focus { border-color: var(--accent) !important; outline-color: var(--accent-glow) !important; } html[data-theme="light"] input::placeholder, html[data-theme="light"] textarea::placeholder { color: var(--text-muted) !important; } /* ── Tables ──────────────────────────────────────────────────────────────── */ html[data-theme="light"] th { background: var(--bg-elevated) !important; color: var(--text-secondary) !important; border-color: var(--border) !important; } html[data-theme="light"] td { border-color: var(--border) !important; color: var(--text-primary) !important; } html[data-theme="light"] tr:hover td { background: rgba(123, 114, 212, 0.04) !important; } /* ── Notification Dropdown ───────────────────────────────────────────────── */ html[data-theme="light"] .notif-dropdown { background: #ffffff !important; border-color: var(--border) !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important; } /* ── Grid Background (scanline) ─────────────────────────────────────────── */ html[data-theme="light"] .grid-bg { background-image: linear-gradient(rgba(123, 114, 212, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(123, 114, 212, 0.04) 1px, transparent 1px) !important; opacity: 0.5; } /* ── Scrollbar ───────────────────────────────────────────────────────────── */ html[data-theme="light"] ::-webkit-scrollbar-track { background: #f0f2f7; } html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #c8cce0; } html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #a8adc8; } /* ── Code / Pre ──────────────────────────────────────────────────────────── */ html[data-theme="light"] pre, html[data-theme="light"] code { background: #f5f5f8 !important; color: #0f0f1a !important; border-color: var(--border) !important; } /* ── Modal / Overlay ────────────────────────────────────────────────────── */ html[data-theme="light"] [class*="modal"] { background: #ffffff !important; border-color: var(--border) !important; } /* ── Text gradient overrides (for headings with gradient clips) ─────────── */ html[data-theme="light"] [class*="gradient-text"], html[data-theme="light"] [class*="text-gradient"] { background: linear-gradient(135deg, #0f0f1a, #4b4b6e) !important; -webkit-background-clip: text !important; background-clip: text !important; } /* ── Skeleton loaders ────────────────────────────────────────────────────── */ html[data-theme="light"] [class*="skeleton"], html[data-theme="light"] [class*="loading-placeholder"] { background: linear-gradient(90deg, #e8eaf0 25%, #f0f2f7 50%, #e8eaf0 75%) !important; background-size: 200% 100% !important; } /* ── Chart containers ────────────────────────────────────────────────────── */ html[data-theme="light"] canvas { /* Charts handle their own colors via Chart.js defaults updated in theme.js */ } /* ── Theme Toggle Button (injected by nav.js) ────────────────────────────── */ .nav-theme-toggle { background: none; border: 1px solid var(--border, #1e1e2e); border-radius: 8px; padding: 0.3rem 0.45rem; cursor: pointer; flex-shrink: 0; transition: border-color 0.2s, background 0.2s, color 0.2s; color: var(--text-secondary, #8b8b9e); display: flex; align-items: center; justify-content: center; line-height: 1; height: 32px; width: 32px; } .nav-theme-toggle:hover { border-color: var(--accent, #6366f1); background: var(--bg-elevated, #1a1a24); color: var(--text-primary, #f1f1f4); } /* ── Hardcoded dark color overrides ────────────────────────────────────────── */ /* proposal.html — Settings panel, Chart zoom, CAGR modal, Watchlist modal */ html[data-theme="light"] .qc-settings-panel { background: #f7f8fc !important; border-right-color: var(--border) !important; box-shadow: 4px 0 32px rgba(0,0,0,0.12) !important; } html[data-theme="light"] .qcs-color-text { background: #f0f2f7 !important; border-color: var(--border) !important; } html[data-theme="light"] .chart-zoom-overlay { background: rgba(0,0,0,0.4) !important; } html[data-theme="light"] .chart-zoom-inner { background: #ffffff !important; border-color: var(--border) !important; box-shadow: 0 24px 80px rgba(0,0,0,0.15) !important; } /* proposal.html — Sticky table columns */ html[data-theme="light"] .cb-data-table th:first-child, html[data-theme="light"] .cb-data-table td:first-child { background: #f7f8fc !important; } html[data-theme="light"] .cb-data-table tr:hover td:first-child { background: #eef0f7 !important; } html[data-theme="light"] .fs-table td:first-child { background: #f7f8fc !important; min-width: 240px !important; max-width: 280px !important; } html[data-theme="light"] .fs-table tr:hover td:first-child { background: #eef0f7 !important; } html[data-theme="light"] .fs-row-header td:first-child { background: #f0f2f7 !important; } /* proposal.html — CAGR Builder modal */ html[data-theme="light"] .cb-modal { background: #ffffff !important; border-color: var(--border) !important; box-shadow: 0 30px 70px rgba(0,0,0,0.12) !important; } html[data-theme="light"] .cb-metric-check { background: var(--accent) !important; border-color: var(--accent) !important; color: #ffffff !important; } html[data-theme="light"] .cb-data-table th { background: var(--bg-elevated) !important; } /* proposal.html — Document Analysis modal */ html[data-theme="light"] .doc-modal { background: #ffffff !important; border-color: var(--border) !important; box-shadow: 0 24px 80px rgba(0,0,0,0.12) !important; } html[data-theme="light"] .doc-type-card { background: #f7f8fc !important; border-color: var(--border) !important; } html[data-theme="light"] .doc-type-name { color: #0f0f1a !important; } html[data-theme="light"] .doc-type-desc { color: var(--text-muted) !important; } html[data-theme="light"] .doc-watchpoints-textarea { background: #ffffff !important; border-color: var(--border) !important; color: #0f0f1a !important; } html[data-theme="light"] .doc-watchpoints-textarea::placeholder { color: var(--text-muted) !important; } html[data-theme="light"] .doc-loading-overlay { background: #f7f8fc !important; border-color: var(--border) !important; } html[data-theme="light"] .doc-modal-title { color: #0f0f1a !important; } html[data-theme="light"] .doc-modal-sub { color: var(--text-secondary) !important; } html[data-theme="light"] .doc-modal-close { color: var(--text-muted) !important; } html[data-theme="light"] .doc-modal-close:hover { color: var(--text-primary) !important; } html[data-theme="light"] .doc-file-label { color: var(--text-secondary) !important; } html[data-theme="light"] .doc-dropzone-text { color: var(--text-muted) !important; } html[data-theme="light"] .doc-loading-title { color: #0f0f1a !important; } html[data-theme="light"] .doc-loading-sub { color: var(--text-secondary) !important; } html[data-theme="light"] .doc-result-meta { color: var(--text-muted) !important; } html[data-theme="light"] .doc-loading-step { background: #f7f8fc !important; border-color: var(--border) !important; } html[data-theme="light"] .doc-result-wrap { background: #f7f8fc !important; border-color: var(--border) !important; } html[data-theme="light"] .doc-result-title { color: #0f0f1a !important; } html[data-theme="light"] .doc-result-body, html[data-theme="light"] .doc-result-body strong { color: #0f0f1a !important; } html[data-theme="light"] .doc-result-body h1, html[data-theme="light"] .doc-result-body h2, html[data-theme="light"] .doc-result-body h3 { color: #0f0f1a !important; } html[data-theme="light"] .doc-result-body h2 { border-bottom-color: var(--border) !important; } /* proposal.html — Deep Analysis Report (DAR) */ html[data-theme="light"] .dar-wp-card { background: #f0f2f7 !important; border-color: var(--border) !important; } html[data-theme="light"] .dar-wp-title { color: #0f0f1a !important; } html[data-theme="light"] .dar-wp-citation { background: rgba(123,114,212,0.05) !important; color: var(--text-secondary) !important; } html[data-theme="light"] .dar-wp-analysis { color: var(--text-secondary) !important; } html[data-theme="light"] .dar-headline { color: #0f0f1a !important; } html[data-theme="light"] .dar-section-title { color: #0f0f1a !important; } html[data-theme="light"] .dar-section-title::after { background: linear-gradient(90deg, var(--border), transparent) !important; } html[data-theme="light"] .dar-rationale { color: var(--text-secondary) !important; } html[data-theme="light"] .dar-verdict-text { color: var(--text-primary) !important; } html[data-theme="light"] .dar-period { background: rgba(123,114,212,0.08) !important; } html[data-theme="light"] .dar-sec-card { background: #f0f2f7 !important; border-color: var(--border) !important; } html[data-theme="light"] .dar-cl-item { background: #f0f2f7 !important; border-color: var(--border) !important; } html[data-theme="light"] .dar-sec-name { color: #0f0f1a !important; } html[data-theme="light"] .dar-sec-chevron { color: var(--text-muted) !important; } html[data-theme="light"] .dar-sec-summary { color: var(--text-secondary) !important; } html[data-theme="light"] .dar-sec-invest { background: rgba(123,114,212,0.06) !important; color: var(--text-secondary) !important; } html[data-theme="light"] .dar-chip { color: var(--text-secondary) !important; } html[data-theme="light"] .dar-chip-label { color: var(--accent) !important; } html[data-theme="light"] .dar-cite { color: var(--text-muted) !important; } html[data-theme="light"] .dar-cl-name { color: #0f0f1a !important; } html[data-theme="light"] .dar-cl-rationale { color: var(--text-secondary) !important; } html[data-theme="light"] .dar-quote-text { color: var(--text-primary) !important; } html[data-theme="light"] .dar-quote-meta { color: var(--accent) !important; } /* proposal.html — Inline modals (hardcoded inline styles) */ html[data-theme="light"] #investModal > div, html[data-theme="light"] .proposal-login-modal { background: #ffffff !important; border-color: var(--border) !important; box-shadow: 0 20px 60px rgba(0,0,0,0.12) !important; } html[data-theme="light"] .proposal-login-modal h3, html[data-theme="light"] #investModal .im-company { color: #0f0f1a !important; } html[data-theme="light"] #investModal select, html[data-theme="light"] #investModal input { background: #f7f8fc !important; border-color: var(--border) !important; color: #0f0f1a !important; } html[data-theme="light"] #investModal #im-summary { background: #f0f2f7 !important; } html[data-theme="light"] #investModal #im-s-qty, html[data-theme="light"] #investModal #im-s-price, html[data-theme="light"] #investModal #im-s-invested, html[data-theme="light"] #investModal #im-s-value { color: #0f0f1a !important; } html[data-theme="light"] #investModal .im-live-price { color: #0f0f1a !important; } /* proposal.html — QCS swatch */ html[data-theme="light"] #qcs-bg-swatch { background: #f7f8fc !important; } /* proposal.html — Quality tab */ html[data-theme="light"] .qcs-label { color: var(--text-muted) !important; } html[data-theme="light"] .qcs-color-row label { color: var(--text-secondary) !important; } html[data-theme="light"] .qcs-apply-btn { background: var(--accent) !important; } html[data-theme="light"] .qcs-reset-btn { border-color: var(--accent-border) !important; color: var(--text-muted) !important; } html[data-theme="light"] .qcs-reset-btn:hover { background: var(--accent-glow) !important; } html[data-theme="light"] .qcs-divider { background: var(--accent-glow) !important; } html[data-theme="light"] .qcs-slider-val { color: var(--text-muted) !important; } html[data-theme="light"] .qcs-slider { accent-color: var(--accent) !important; } html[data-theme="light"] .qcs-toggle-row { color: var(--text-secondary) !important; } /* proposal.html — Financial Statement table */ html[data-theme="light"] .fs-table thead th { background: var(--bg-elevated) !important; } html[data-theme="light"] .fs-table thead th:first-child { background: var(--bg-elevated) !important; } html[data-theme="light"] .fs-table td { border-bottom-color: rgba(0,0,0,0.06) !important; color: var(--text-secondary) !important; } html[data-theme="light"] .fs-table td:first-child { color: var(--text-primary) !important; } html[data-theme="light"] .fs-table thead th:first-child { color: var(--text-muted) !important; } /* watchlist.html */ html[data-theme="light"] .watch-card { background: #ffffff !important; border-color: var(--border) !important; } html[data-theme="light"] .summary-box { background: #f0f2f7 !important; } html[data-theme="light"] .toast { background: #ffffff !important; border-color: var(--border) !important; color: #0f0f1a !important; box-shadow: 0 4px 20px rgba(0,0,0,0.12) !important; } /* watchlist.html — investment modal content (hardcoded dark hex values) */ html[data-theme="light"] .modal-company-name { color: var(--text-primary) !important; } html[data-theme="light"] .modal-price-row { color: var(--text-secondary) !important; } html[data-theme="light"] .modal-price-row span { color: var(--text-primary) !important; } html[data-theme="light"] .modal-close { color: var(--text-muted) !important; } html[data-theme="light"] .toggle-btn.inactive { border-color: var(--border) !important; color: var(--text-secondary) !important; } html[data-theme="light"] .input-group label { color: var(--text-secondary) !important; } html[data-theme="light"] .input-group input, html[data-theme="light"] .input-group select { background: #f7f8fc !important; border-color: var(--border) !important; color: var(--text-primary) !important; } html[data-theme="light"] .summary-item-label { color: var(--text-secondary) !important; } html[data-theme="light"] .summary-item-val { color: var(--text-primary) !important; } /* chart-builder.html */ html[data-theme="light"] .chart-bg { background: #ffffff !important; } /* portfolio.html */ html[data-theme="light"] .holding-card { background: #ffffff !important; } /* dashboard.html — inline modal overlay */ html[data-theme="light"] .dashboard-login-modal { background: #ffffff !important; border-color: var(--border) !important; box-shadow: 0 25px 60px rgba(0,0,0,0.12) !important; } /* demo.html — inline modal overlay */ html[data-theme="light"] .demo-login-modal { background: #ffffff !important; border-color: var(--border) !important; box-shadow: 0 25px 60px rgba(0,0,0,0.12) !important; } /* proposal.html — Earnings Call section (if any hardcoded in body) */ html[data-theme="light"] .ecard, html[data-theme="light"] .earnings-card { background: #ffffff !important; border-color: var(--border) !important; } /* proposal.html — Color scheme selector swatch */ html[data-theme="light"] .qcs-swatch { background: #f7f8fc !important; } /* proposal.html — Inline quality tab sections with hardcoded backgrounds */ html[data-theme="light"] .quality-section, html[data-theme="light"] .analyst-section { background: #ffffff !important; border-color: var(--border) !important; } /* proposal.html — Inline modals from JS (cb-modal, doc-modal, investModal inner) */ html[data-theme="light"] [id="investModal"] > div { background: #ffffff !important; } /* Override ALL inline dark backgrounds in proposal.html investment modal */ html[data-theme="light"] [id="investModal"] [style*="background:#111118"], html[data-theme="light"] [id="investModal"] [style*="background:#1a1a24"] { background: #ffffff !important; border-color: var(--border) !important; color: #0f0f1a !important; } /* Form elements inside invest modal — use !important to beat inline styles */ html[data-theme="light"] [id="investModal"] select, html[data-theme="light"] [id="investModal"] input { background: #f7f8fc !important; border-color: var(--border) !important; color: #0f0f1a !important; } /* Also handle form elements inside invest modal that have inline dark backgrounds */ html[data-theme="light"] [id="investModal"] select, html[data-theme="light"] [id="investModal"] input { background: #f7f8fc !important; border-color: var(--border) !important; color: #0f0f1a !important; } /* ── Light theme injected style (for dynamically generated HTML) ──────────── */ /* This block overrides inline style attributes set by JS — loaded after light-theme.css */ .inight-block { background: #f0f2f7 !important; } .inight-block-white { background: #ffffff !important; } .inight-border { border-color: var(--border) !important; } /* ── Bottom border overrides (proposal.html kfi-table) ────────────────────── */ html[data-theme="light"] .kfi-table td { border-bottom-color: rgba(0,0,0,0.06) !important; } html[data-theme="light"] .kfi-table td:first-child { color: var(--text-primary) !important; } /* proposal.html — Inline login modal (hardcoded inline style, cannot be overridden by class rules) */ html[data-theme="light"] [style*="background:#13131a"] { background: #ffffff !important; } /* chart-builder.html — cb-wrapper */ html[data-theme="light"] .cb-wrapper { background: #f0f2f7 !important; } /* settings.html + watchlist.html — select option dark backgrounds */ html[data-theme="light"] select option { background: #f0f2f7 !important; color: #0f0f1a !important; } /* watchlist.html — filter input */ html[data-theme="light"] .filter-input { background: #ffffff !important; } /* ── settings.html — rgba(255,255,255,0.xx) elements invisible in light mode ─── */ html[data-theme="light"] .toggle-row:hover { background: rgba(0, 0, 0, 0.025) !important; } html[data-theme="light"] .toggle-track { background: #d1d5db !important; border-color: #b8bdd4 !important; } html[data-theme="light"] .toggle-track::before { background: #6b7280 !important; } html[data-theme="light"] .sub-badge-expired { background: var(--bg-elevated) !important; } html[data-theme="light"] input[type=range] { background: var(--border) !important; } html[data-theme="light"] .criteria-row input { background: #f7f8fc !important; } html[data-theme="light"] .btn-add-criteria { border-color: var(--border) !important; } html[data-theme="light"] .btn-save:disabled { background: var(--bg-elevated) !important; } html[data-theme="light"] .badge-paused { background: var(--bg-elevated) !important; } html[data-theme="light"] .acct-email { background: var(--bg-elevated) !important; } html[data-theme="light"] .modal-box { background: #ffffff !important; border-color: var(--border) !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12) !important; } html[data-theme="light"] .usage-bar-track { background: var(--border) !important; } /* ── proposal.html — Analyse Détaillée segment expanded sections ─────────── */ /* rgba(255,255,255,0.0x) borders/backgrounds are invisible in light mode */ html[data-theme="light"] .ad-seg-section { background: var(--bg-elevated) !important; border-color: var(--border) !important; } html[data-theme="light"] .ad-seg-tbl td { border-bottom-color: var(--border) !important; } html[data-theme="light"] .ad-seg-tbl tr:hover td { background: rgba(0, 0, 0, 0.025) !important; } html[data-theme="light"] .ad-seg-tags { border-top-color: var(--border) !important; } html[data-theme="light"] .ad-moat-sbadge.none { background: var(--bg-elevated) !important; } /* proposal.html — SEC Filings tab rows */ html[data-theme="light"] .filings-row { border-bottom-color: var(--border) !important; } /* proposal.html — Risk matrix table hover */ html[data-theme="light"] .ad-risk-tbl tr:hover td { background: rgba(0, 0, 0, 0.025) !important; } /* proposal.html — dar-flags-label */ html[data-theme="light"] .dar-flags-label { color: var(--text-muted) !important; } /* proposal.html — dar-flags text colors (near-white on light bg) */ html[data-theme="light"] .dar-flag-risk { color: var(--red) !important; background: var(--red-bg) !important; } html[data-theme="light"] .dar-flag-pos { color: var(--green) !important; background: var(--green-bg) !important; } /* chart-builder.html — custom variable names not covered by global overrides */ /* This page uses --text-1/2/3 and --border-2/--bg-input instead of standard names */ html[data-theme="light"] { --text-1: #0f0f1a; --text-2: #4b4b6e; --text-3: #7878a0; --bg-input: #f7f8fc; --border-2: #d8daea; } /* Landing page section dividers in light mode */ html[data-theme="light"] .section-divider { background: transparent !important; } html[data-theme="light"] .section-divider::after { background: linear-gradient(90deg, transparent, rgba(123, 114, 212, 0.06), transparent) !important; } /* Landing page mock windows in light mode */ html[data-theme="light"] .mock-window { background: #ffffff !important; border-color: rgba(0, 0, 0, 0.08) !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 40px 80px rgba(0, 0, 0, 0.12), 0 20px 40px rgba(0, 0, 0, 0.08) !important; } html[data-theme="light"] .mock-window::before { background: linear-gradient(90deg, transparent, rgba(123, 114, 212, 0.3), transparent) !important; } html[data-theme="light"] .mock-window::after { background: radial-gradient(ellipse at center, rgba(123, 114, 212, 0.04) 0%, transparent 70%) !important; } html[data-theme="light"] .mock-topbar { background: #f7f8fc !important; border-bottom-color: rgba(0, 0, 0, 0.06) !important; } /* Landing page hero CTA in light mode */ html[data-theme="light"] .hero-cta { box-shadow: 0 0 30px rgba(123, 114, 212, 0.2), 0 4px 16px rgba(0, 0, 0, 0.1) !important; } html[data-theme="light"] .nav-cta { box-shadow: 0 0 16px rgba(123, 114, 212, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1) !important; } /* Landing page hero-demo-cta in light mode */ html[data-theme="light"] .hero-demo-cta { color: var(--text-secondary) !important; border-color: rgba(0, 0, 0, 0.12) !important; } html[data-theme="light"] .hero-demo-cta:hover { background: rgba(0, 0, 0, 0.04) !important; border-color: rgba(0, 0, 0, 0.2) !important; } /* Landing page pricing card in light mode */ html[data-theme="light"] .pricing-card { border-color: rgba(0, 0, 0, 0.06) !important; } html[data-theme="light"] .pricing-card:hover { box-shadow: 0 0 0 1px rgba(123, 114, 212, 0.15), 0 20px 48px rgba(0, 0, 0, 0.08) !important; } html[data-theme="light"] .pricing-cta.outline-cta { border-color: rgba(0, 0, 0, 0.12) !important; color: var(--text-secondary) !important; } html[data-theme="light"] .pricing-cta.outline-cta:hover { background: rgba(123, 114, 212, 0.06) !important; border-color: rgba(123, 114, 212, 0.3) !important; } /* Landing page footer in light mode */ html[data-theme="light"] footer { border-top-color: rgba(0, 0, 0, 0.06) !important; } /* ══════════════════════════════════════════════════════════════════════════════ LANDING PAGE LIGHT MODE — CONTRAST & DEPTH FIXES ══════════════════════════════════════════════════════════════════════════════ */ /* ── 1. STATS BAR: numbers must be visible (gradient-clip text fix) ────────── */ /* The broad [class*="stat"] rule above overrides the gradient background that provides the text color via -webkit-background-clip: text. Fix: restore a dark gradient specifically for .stat-val */ html[data-theme="light"] .stat-val { background: linear-gradient(135deg, #2d2878 0%, #7B72D4 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* Mobile stat-val: index.html sets color: #FFFFFF which is invisible on light */ @media (max-width: 768px) { html[data-theme="light"] .stat-val { background: none !important; -webkit-background-clip: unset !important; background-clip: unset !important; -webkit-text-fill-color: #2d2878 !important; color: #2d2878 !important; } } /* Stat item separators — visible in light mode */ html[data-theme="light"] .stat-item + .stat-item::before { background: rgba(0, 0, 0, 0.1) !important; } /* ── 2. MOCKUP WINDOWS: premium depth & contrast ─────────────────────────── */ html[data-theme="light"] .mock-window { background: #ffffff !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 4px 8px rgba(0, 0, 0, 0.03), 0 16px 32px rgba(0, 0, 0, 0.06), 0 48px 100px rgba(0, 0, 0, 0.1), 0 0 60px rgba(123, 114, 212, 0.06) !important; } html[data-theme="light"] .mock-window:hover { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 8px 16px rgba(0, 0, 0, 0.04), 0 24px 48px rgba(0, 0, 0, 0.08), 0 60px 120px rgba(0, 0, 0, 0.12), 0 0 80px rgba(123, 114, 212, 0.08) !important; } html[data-theme="light"] .mock-window::before { background: linear-gradient(90deg, transparent, rgba(123, 114, 212, 0.25), transparent) !important; } html[data-theme="light"] .mock-window::after { background: radial-gradient(ellipse at center, rgba(123, 114, 212, 0.04) 0%, transparent 70%) !important; } /* Mock topbar — light mode variant */ html[data-theme="light"] .mock-topbar { background: #f0f2f7 !important; border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; } html[data-theme="light"] .mock-dot.r { background: rgba(239, 68, 68, 0.8) !important; } html[data-theme="light"] .mock-dot.a { background: rgba(245, 158, 11, 0.8) !important; } html[data-theme="light"] .mock-dot.g { background: rgba(34, 197, 94, 0.8) !important; } /* Mock inner elements that use rgba(0,0,0,x) backgrounds */ html[data-theme="light"] .mock-valuation-block { background: #f0f2f7 !important; border-color: rgba(123, 114, 212, 0.2) !important; } html[data-theme="light"] .mock-val-item { background: #f0f2f7 !important; } html[data-theme="light"] .mock-val-method { background: #f7f8fc !important; border-color: rgba(0, 0, 0, 0.08) !important; } html[data-theme="light"] .mock-proposal-card { background: #f7f8fc !important; border-color: rgba(0, 0, 0, 0.08) !important; } html[data-theme="light"] .mock-proposal-card.top { border-color: rgba(123, 114, 212, 0.35) !important; } /* Mock score sections inside analysis body — prevent the broad [class*="section"] override */ html[data-theme="light"] .mock-score-section { background: transparent !important; border-color: transparent !important; } html[data-theme="light"] .mock-score-section-bar { background: #e2e4ef !important; } html[data-theme="light"] .mock-score-section-label { color: var(--text-secondary) !important; } html[data-theme="light"] .mock-score-section-val { /* Keep the inline color styles from HTML */ } /* Mock-window inline dark background blocks (rgba(0,0,0,x) inside any mock) */ html[data-theme="light"] .mock-window [style*="background:rgba(0,0,0"] { background: #f0f2f7 !important; border-color: rgba(0, 0, 0, 0.08) !important; } /* Mock portfolio stats */ html[data-theme="light"] .mock-portfolio-stats { background: transparent !important; } html[data-theme="light"] .mock-pf-stat { background: transparent !important; } html[data-theme="light"] .mock-pf-stat-val.gold { color: var(--gold) !important; } /* Mock conviction elements */ html[data-theme="light"] .mock-conviction-badge { background: transparent !important; } /* Showcase visual mock window */ html[data-theme="light"] .showcase-visual .mock-window { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 8px 16px rgba(0, 0, 0, 0.06), 0 32px 64px rgba(0, 0, 0, 0.1) !important; } /* ── 3. SECTION DIVIDERS: subtle separator ────────────────────────────────── */ html[data-theme="light"] .section-divider { background: transparent !important; } html[data-theme="light"] .section-divider::after { background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.06), transparent) !important; height: 1px !important; } /* ── 4. FAQ: depth & hierarchy ────────────────────────────────────────────── */ html[data-theme="light"] .faq-item { background: #ffffff !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.02) !important; } html[data-theme="light"] .faq-item:hover, html[data-theme="light"] .faq-item.open { border-color: rgba(123, 114, 212, 0.35) !important; box-shadow: 0 2px 8px rgba(123, 114, 212, 0.08), 0 4px 16px rgba(0, 0, 0, 0.06) !important; } html[data-theme="light"] .faq-question { color: #0f0f1a !important; } html[data-theme="light"] .faq-question:hover { color: #5B52B4 !important; } html[data-theme="light"] .faq-chevron { background: rgba(123, 114, 212, 0.08) !important; border-color: rgba(123, 114, 212, 0.2) !important; color: #7B72D4 !important; } html[data-theme="light"] .faq-answer p { color: var(--text-secondary) !important; border-top-color: rgba(0, 0, 0, 0.06) !important; } html[data-theme="light"] .faq-badge { background: rgba(123, 114, 212, 0.08) !important; color: #5B52B4 !important; border-color: rgba(123, 114, 212, 0.25) !important; } html[data-theme="light"] .faq-section { background: transparent !important; border-color: transparent !important; } /* ── 5. SECTION BACKGROUND ALTERNATION: visual hierarchy ──────────────────── */ /* Alternate between white-ish and slightly tinted backgrounds */ html[data-theme="light"] .pain-section:nth-child(odd) { background: transparent !important; } html[data-theme="light"] .pain-section:nth-child(even) { background: transparent !important; } /* Use section wrappers for alternation */ html[data-theme="light"] #pain-1, html[data-theme="light"] #pain-3, html[data-theme="light"] #pain-5 { background: rgba(255, 255, 255, 0.6) !important; border-color: transparent !important; border-radius: 20px !important; overflow: hidden !important; } html[data-theme="light"] #pain-2, html[data-theme="light"] #pain-4 { background: transparent !important; border-color: transparent !important; border-radius: 20px !important; overflow: hidden !important; } /* Stats bar section — slight tint */ html[data-theme="light"] .stats-bar { background: transparent !important; border-color: transparent !important; } /* Free features section — white card feel */ html[data-theme="light"] .free-section { background: transparent !important; border-color: transparent !important; border-radius: 20px !important; overflow: hidden !important; } /* Pricing section — slightly tinted */ html[data-theme="light"] .pricing-section { background: transparent !important; border-color: transparent !important; border-radius: 20px !important; overflow: hidden !important; } /* ── 6. PAIN SECTION elements: light mode adjustments ─────────────────────── */ /* Pain number (01, 02...) — more visible */ html[data-theme="light"] .pain-number { color: rgba(123, 114, 212, 0.12) !important; } /* Pain story box */ html[data-theme="light"] .pain-story { background: rgba(239, 68, 68, 0.04) !important; border-color: rgba(239, 68, 68, 0.15) !important; } /* Pain transition arrow */ html[data-theme="light"] .pain-transition { color: #5B52B4 !important; } html[data-theme="light"] .pain-transition::before { color: #7B72D4 !important; } /* Step highlights */ html[data-theme="light"] .step-highlight { color: var(--text-primary) !important; } /* Pain mini-CTA */ html[data-theme="light"] .pain-mini-cta { border-color: rgba(123, 114, 212, 0.25) !important; background: rgba(123, 114, 212, 0.06) !important; color: #5B52B4 !important; } html[data-theme="light"] .pain-mini-cta:hover { background: rgba(123, 114, 212, 0.12) !important; border-color: rgba(123, 114, 212, 0.4) !important; color: #2d2878 !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important; } /* Section eyebrow */ html[data-theme="light"] .section-eyebrow { color: #5B52B4 !important; } /* ── 7. FREE FEATURES GRID: light mode depth ──────────────────────────────── */ html[data-theme="light"] .free-feature-item { background: #ffffff !important; border-color: rgba(0, 0, 0, 0.06) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important; color: var(--text-secondary) !important; } /* ── 8. PRICING CARDS: light mode depth ───────────────────────────────────── */ html[data-theme="light"] .pricing-card { background: #ffffff !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.04) !important; } html[data-theme="light"] .pricing-card:hover { border-color: rgba(123, 114, 212, 0.25) !important; box-shadow: 0 0 0 1px rgba(123, 114, 212, 0.2), 0 8px 32px rgba(0, 0, 0, 0.08) !important; transform: translateY(-4px); } html[data-theme="light"] .pricing-card.featured { border-color: rgba(123, 114, 212, 0.35) !important; background: rgba(123, 114, 212, 0.03) !important; box-shadow: 0 0 0 1px rgba(123, 114, 212, 0.15), 0 8px 32px rgba(123, 114, 212, 0.08), 0 16px 48px rgba(0, 0, 0, 0.06) !important; } html[data-theme="light"] .pricing-card.popular { border-color: rgba(123, 114, 212, 0.4) !important; box-shadow: 0 0 0 1px rgba(123, 114, 212, 0.15), 0 8px 32px rgba(123, 114, 212, 0.1) !important; } html[data-theme="light"] .pricing-toggle-wrap { background: #f7f8fc !important; border-color: rgba(0, 0, 0, 0.08) !important; } html[data-theme="light"] .pricing-toggle-btn.active { box-shadow: 0 2px 8px rgba(123, 114, 212, 0.25) !important; } /* ── 9. HERO SECTION: light mode polish ───────────────────────────────────── */ html[data-theme="light"] .hero-section, html[data-theme="light"] .hero { background: transparent !important; border-color: transparent !important; } /* Hero mock window — premium depth */ html[data-theme="light"] .hero-mock > .mock-window { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 8px 16px rgba(0, 0, 0, 0.04), 0 32px 64px rgba(0, 0, 0, 0.08), 0 64px 120px rgba(0, 0, 0, 0.1), 0 0 80px rgba(123, 114, 212, 0.08) !important; } /* ── 10. SHOWCASE SECTION: gradient text fix ──────────────────────────────── */ html[data-theme="light"] .showcase-section h2 em, html[data-theme="light"] .showcase-text h3 em { background: linear-gradient(135deg, #2d2878 0%, #7B72D4 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } html[data-theme="light"] .showcase-tag.indigo { color: #5B52B4 !important; } html[data-theme="light"] .showcase-section { background: transparent !important; border-color: transparent !important; } /* ── 11. FREE CARDS: light mode depth ─────────────────────────────────────── */ html[data-theme="light"] .free-card { background: #ffffff !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03) !important; } html[data-theme="light"] .free-card:hover { border-color: rgba(123, 114, 212, 0.25) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important; } html[data-theme="light"] .free-card.free-card-accent { background: rgba(123, 114, 212, 0.03) !important; border-color: rgba(123, 114, 212, 0.2) !important; } html[data-theme="light"] .free-card-label.credit { color: #5B52B4 !important; } html[data-theme="light"] .free-credit-note { color: #5B52B4 !important; background: rgba(123, 114, 212, 0.06) !important; } /* ── 12. GLOBAL GLOW REMOVAL: replace glow with shadow in light mode ─────── */ /* Various elements use gold-glow/blue-glow which are invisible on light bg */ html[data-theme="light"] [class*="glow"] { text-shadow: none !important; box-shadow: none !important; } /* ── 13. GRADIENT TEXT: global fix for accent gradient text ────────────────── */ /* Many elements use gold/gold-light gradient which is too light on white */ html[data-theme="light"] .pain-transition { color: #5B52B4 !important; } html[data-theme="light"] .pain-tag { /* Keep red tags readable */ } html[data-theme="light"] .pain-story em { color: #dc2626 !important; } /* ══════════════════════════════════════════════════════════════════════════════ LANDING PAGE LIGHT MODE — COMPREHENSIVE FIX (Apr 2026) Fixes: stats bar, decorative blobs, closing/FAQ sections, overall coherence ══════════════════════════════════════════════════════════════════════════════ */ /* ── A. STATS BAR: remove boxy card appearance, integrate into flow ────────── */ /* The broad [class*="stat"] rule gives stat-item white bg + borders = boxy. Override ALL stat-* elements back to transparent so they feel integrated. */ html[data-theme="light"] .stats-bar { background: transparent !important; border: none !important; border-color: transparent !important; } html[data-theme="light"] .stat-item { background: transparent !important; border: none !important; border-color: transparent !important; box-shadow: none !important; } html[data-theme="light"] .stat-val { background: linear-gradient(135deg, #2d2878 0%, #7B72D4 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; border: none !important; border-color: transparent !important; } html[data-theme="light"] .stat-label { background: transparent !important; border: none !important; border-color: transparent !important; color: #4b4b6e !important; } /* Stat separators — subtle indigo line between items */ html[data-theme="light"] .stat-item + .stat-item::before { background: rgba(123, 114, 212, 0.15) !important; } /* ── B. DECORATIVE BLOBS: hide all in light mode ──────────────────────────── */ /* Hero radial gradient blobs — invisible needed */ html[data-theme="light"] .hero::before, html[data-theme="light"] .hero::after { display: none !important; } /* Mock window indigo glow — creates ghost blobs on light bg */ html[data-theme="light"] .mock-window::after { display: none !important; } /* Mock window top accent line — too subtle on light, hide it */ html[data-theme="light"] .mock-window::before { opacity: 0.5 !important; } /* Step visual mock float glow remnants */ html[data-theme="light"] .step-visual .mock-window::after, html[data-theme="light"] .showcase-visual .mock-window::after { display: none !important; } /* Grid background — much more subtle in light mode */ html[data-theme="light"] .grid-bg { opacity: 0.3 !important; } /* ── C. CLOSING SECTION: clean light mode ─────────────────────────────────── */ html[data-theme="light"] .closing { background: var(--bg-deep) !important; border-color: transparent !important; border-radius: 20px !important; overflow: hidden !important; } html[data-theme="light"] .closing::before { display: none !important; } html[data-theme="light"] .closing h2 { color: #0f0f1a !important; } html[data-theme="light"] .closing h2 em { background: linear-gradient(135deg, #2d2878 0%, #7B72D4 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } html[data-theme="light"] .closing-sub { color: #4b4b6e !important; } html[data-theme="light"] .closing-disclaimer { color: #7878a0 !important; opacity: 0.6 !important; } html[data-theme="light"] .trust-items { border-top-color: rgba(123, 114, 212, 0.12) !important; color: #4b4b6e !important; } html[data-theme="light"] .trust-item::before { color: #15803d !important; } /* Hero badge in closing — light mode variant */ html[data-theme="light"] .closing .hero-badge, html[data-theme="light"] .closing-badge { background: rgba(123, 114, 212, 0.06) !important; border-color: rgba(123, 114, 212, 0.2) !important; color: #5B52B4 !important; } /* ── D. FAQ SECTION: clean light mode ─────────────────────────────────────── */ html[data-theme="light"] .faq-section { background: var(--bg-deep) !important; border-color: transparent !important; border-radius: 20px !important; overflow: hidden !important; } html[data-theme="light"] .faq-subtitle { color: #4b4b6e !important; } /* ── E. FOOTER: clean light mode ──────────────────────────────────────────── */ html[data-theme="light"] footer { background: var(--bg-deep) !important; color: #7878a0 !important; border-top-color: rgba(0, 0, 0, 0.06) !important; } html[data-theme="light"] footer span { color: #5B52B4 !important; opacity: 0.7 !important; } /* ── F. HERO SECTION: clean light backgrounds ─────────────────────────────── */ html[data-theme="light"] .hero-badge { background: rgba(123, 114, 212, 0.06) !important; border-color: rgba(123, 114, 212, 0.2) !important; color: #5B52B4 !important; backdrop-filter: none !important; } html[data-theme="light"] .hero h1 { color: #0f0f1a !important; } html[data-theme="light"] .hero h1 em { background: linear-gradient(135deg, #2d2878 0%, #7B72D4 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; filter: none !important; } html[data-theme="light"] .hero-sub { color: #4b4b6e !important; } html[data-theme="light"] .cta-trust { color: #7878a0 !important; } /* ── G. PAIN SECTIONS: polished light mode ────────────────────────────────── */ html[data-theme="light"] .pain-section { background: transparent !important; border-color: transparent !important; } html[data-theme="light"] .pain-story { background: rgba(220, 38, 38, 0.03) !important; border-color: rgba(220, 38, 38, 0.12) !important; border-left-color: rgba(220, 38, 38, 0.35) !important; } html[data-theme="light"] .pain-story strong { color: #0f0f1a !important; } html[data-theme="light"] .pain-tag { background: rgba(220, 38, 38, 0.08) !important; color: #dc2626 !important; border-color: rgba(220, 38, 38, 0.2) !important; } html[data-theme="light"] .pain-tag.solution { background: rgba(123, 114, 212, 0.08) !important; color: #5B52B4 !important; border-color: rgba(123, 114, 212, 0.25) !important; } /* Step highlights dot — visible on light bg */ html[data-theme="light"] .step-highlight::before { background: #7B72D4 !important; box-shadow: 0 0 6px rgba(123, 114, 212, 0.3) !important; } /* ── H. PRICING: light mode depth ─────────────────────────────────────────── */ html[data-theme="light"] .pricing-anchor { background: rgba(123, 114, 212, 0.04) !important; border-color: rgba(123, 114, 212, 0.15) !important; color: #5B52B4 !important; } html[data-theme="light"] .pricing-vs-note { background: rgba(123, 114, 212, 0.04) !important; border-color: rgba(123, 114, 212, 0.15) !important; } html[data-theme="light"] .pricing-vs-item strong { color: #dc2626 !important; } html[data-theme="light"] .pricing-vs-item em { color: #15803d !important; } /* Pricing demo link */ html[data-theme="light"] .pricing-demo-link { color: #5B52B4 !important; border-bottom-color: rgba(123, 114, 212, 0.3) !important; } /* ── I. NAV DEMO LINK: visible in light mode ──────────────────────────────── */ html[data-theme="light"] .nav-demo-link { color: #4b4b6e !important; } html[data-theme="light"] .nav-demo-link:hover { color: #0f0f1a !important; } /* ── J. SECTION DIVIDERS: even more subtle in light mode ──────────────────── */ html[data-theme="light"] .section-divider::after { background: linear-gradient(90deg, transparent, rgba(123, 114, 212, 0.08), transparent) !important; } /* ── K. MOCK BADGE / TEMPLATE BADGE: light mode text ──────────────────────── */ html[data-theme="light"] .mock-badge-sm { background: rgba(123, 114, 212, 0.1) !important; color: #5B52B4 !important; border-color: rgba(123, 114, 212, 0.25) !important; } /* ── L. DISCOVERY MODE SECTION ────────────────────────────────────────────── */ html[data-theme="light"] .showcase-section { background: transparent !important; } html[data-theme="light"] .showcase-tag { color: #5B52B4 !important; } /* ── M. CHART BUILDER MODAL: light mode ──────────────────────────────────── */ html[data-theme="light"] .cb-modal { background: #ffffff !important; border-color: var(--border) !important; } html[data-theme="light"] .cb-modal-head { border-bottom-color: var(--border) !important; color: #0f0f1a !important; } html[data-theme="light"] .cb-modal-head h3 { color: #0f0f1a !important; } html[data-theme="light"] .cb-modal-head .close { color: var(--text-secondary) !important; } html[data-theme="light"] .cb-modal-head .close:hover { color: #0f0f1a !important; } html[data-theme="light"] .cb-modal-search input { background: #f7f8fc !important; border-color: var(--border) !important; color: #0f0f1a !important; } html[data-theme="light"] .cb-modal-search input:focus { border-color: var(--accent) !important; } html[data-theme="light"] .cb-modal-search input::placeholder { color: var(--text-muted) !important; } html[data-theme="light"] .cb-modal-sidebar { border-right-color: var(--border) !important; background: #f7f8fc !important; } html[data-theme="light"] .cb-modal-cat { color: var(--text-secondary) !important; } html[data-theme="light"] .cb-modal-cat:hover { background: rgba(123, 114, 212, 0.1) !important; color: var(--accent) !important; } html[data-theme="light"] .cb-modal-cat.active { background: rgba(123, 114, 212, 0.12) !important; color: var(--accent) !important; border-left-color: var(--accent) !important; } html[data-theme="light"] .cb-modal-items { background: #ffffff !important; } html[data-theme="light"] .cb-modal-section-label { color: var(--text-muted) !important; } html[data-theme="light"] .cb-modal-item { color: #0f0f1a !important; } html[data-theme="light"] .cb-modal-item:hover { background: rgba(123, 114, 212, 0.08) !important; } html[data-theme="light"] .cb-modal-item.selected { background: rgba(123, 114, 212, 0.12) !important; } html[data-theme="light"] .cb-modal-item .name { color: #0f0f1a !important; } html[data-theme="light"] .cb-modal-item .unit { color: var(--text-muted) !important; } html[data-theme="light"] .cb-modal-item .src { background: #f7f8fc !important; border-color: var(--border) !important; color: var(--text-muted) !important; } html[data-theme="light"] .cb-modal-item .check { color: var(--accent) !important; } html[data-theme="light"] .cb-modal-footer { border-top-color: var(--border) !important; background: #f7f8fc !important; } html[data-theme="light"] .cb-modal-footer .sel-count { color: var(--text-secondary) !important; } html[data-theme="light"] .cb-modal-apply { background: var(--accent) !important; border: none !important; color: #ffffff !important; } html[data-theme="light"] .cb-modal-apply:hover { opacity: 0.9 !important; } html[data-theme="light"] .cb-modal-clear { background: transparent !important; border-color: var(--border) !important; color: var(--text-secondary) !important; } html[data-theme="light"] .cb-modal-clear:hover { border-color: var(--text-secondary) !important; color: #0f0f1a !important; } html[data-theme="light"] .cb-modal-backdrop { background: rgba(0, 0, 0, 0.3) !important; } /* ── N. PROPOSAL.HTML CHART BUILDER MODAL: light mode overrides ───────────── */ /* proposal.html uses different class names than chart-builder.html */ html[data-theme="light"] .cb-modal-overlay { background: rgba(0, 0, 0, 0.35) !important; } html[data-theme="light"] .cb-modal-header { background: #f7f8fc !important; border-bottom-color: var(--border) !important; } html[data-theme="light"] .cb-modal-close { background: rgba(0, 0, 0, 0.05) !important; border-color: var(--border) !important; color: var(--text-secondary) !important; } html[data-theme="light"] .cb-modal-close:hover { background: rgba(220, 38, 38, 0.08) !important; color: #dc2626 !important; border-color: rgba(220, 38, 38, 0.3) !important; } html[data-theme="light"] .cb-modal-search { background: #ffffff !important; border-color: var(--border) !important; color: #0f0f1a !important; } html[data-theme="light"] .cb-modal-search:focus { border-color: var(--accent) !important; } html[data-theme="light"] .cb-modal-search::placeholder { color: var(--text-muted) !important; } html[data-theme="light"] .cb-modal-content { background: #ffffff !important; } html[data-theme="light"] .cb-cat-item { color: var(--text-secondary) !important; } html[data-theme="light"] .cb-cat-item:hover { background: rgba(123, 114, 212, 0.08) !important; color: var(--accent) !important; } html[data-theme="light"] .cb-cat-item.active { background: rgba(123, 114, 212, 0.12) !important; color: var(--accent) !important; border-left-color: var(--accent) !important; } html[data-theme="light"] .cb-metric-item { background: #ffffff !important; border-color: var(--border) !important; } html[data-theme="light"] .cb-metric-item:hover { background: rgba(123, 114, 212, 0.06) !important; border-color: rgba(123, 114, 212, 0.25) !important; } html[data-theme="light"] .cb-metric-item.selected-0 { background: rgba(123, 114, 212, 0.1) !important; border-color: rgba(123, 114, 212, 0.35) !important; } html[data-theme="light"] .cb-metric-item.selected-1 { background: rgba(52, 211, 153, 0.08) !important; border-color: rgba(52, 211, 153, 0.3) !important; } html[data-theme="light"] .cb-metric-item.selected-2 { background: rgba(245, 158, 11, 0.08) !important; border-color: rgba(245, 158, 11, 0.25) !important; } html[data-theme="light"] .cb-metric-name { color: #0f0f1a !important; } html[data-theme="light"] .cb-metric-check { border-color: var(--border) !important; } html[data-theme="light"] .cb-search-panel { background: #ffffff !important; } html[data-theme="light"] .cb-sidebar-label { color: var(--text-muted) !important; } html[data-theme="light"] .cb-modal-count { color: var(--text-secondary) !important; } /* ── O. SECTION EYEBROW: remove white rectangle from broad rule ──────────── */ /* The [class*="section"] rule at line ~121 gives section-eyebrow a white bg */ html[data-theme="light"] .section-eyebrow { background: transparent !important; border: none !important; border-color: transparent !important; box-shadow: none !important; color: #5B52B4 !important; } /* ── P. SECTION DIVIDERS: ensure no white bars in light mode ─────────────── */ /* Extra specificity to guarantee the broad [class*="section"] rule is overridden */ html[data-theme="light"] .section-divider, html[data-theme="light"] div.section-divider { background: transparent !important; border: none !important; border-color: transparent !important; box-shadow: none !important; } html[data-theme="light"] .section-divider::after, html[data-theme="light"] div.section-divider::after { background: linear-gradient(90deg, transparent, rgba(123, 114, 212, 0.1), transparent) !important; height: 1px !important; } /* ── Q. OTHER SECTION-* ELEMENTS: prevent broad rule from creating white boxes ── */ html[data-theme="light"] .pain-section, html[data-theme="light"] .free-section, html[data-theme="light"] .pricing-section, html[data-theme="light"] .faq-section, html[data-theme="light"] .how-section, html[data-theme="light"] .compare-section, html[data-theme="light"] .showcase-section { background: transparent !important; border-color: transparent !important; border-radius: 20px !important; overflow: hidden !important; } /* ── R. CLOSING SECTION: add rounded corners ──────────────────────────────────── */ html[data-theme="light"] .closing { border-radius: 20px !important; overflow: hidden !important; } @media (max-width: 768px) { .nav-theme-toggle { padding: 0.2rem 0.35rem; } }