/* ═══════════════════════════════════════════════════════════════ Naira Traffic — Light Mode Component Overrides Applied when ═══════════════════════════════════════════════════════════════ */ /* ── Base Background & Color Scheme ─────────────────────────── */ html[data-theme="light"] { background: #ffffff; background-color: #ffffff; color-scheme: light; } html[data-theme="light"] body { background: #ffffff; } /* Remove grid overlay in light mode */ html[data-theme="light"] body::before { display: none; } /* Remove ambient glow in light mode */ html[data-theme="light"] body::after { display: none; } /* ── Page Sidebar ────────────────────────────────────────────── */ html[data-theme="light"] .page-sidebar { background: rgba(249, 249, 249, 0.96); border: 0.5px solid rgba(0, 0, 0, 0.1); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06); } /* ── Results Topbar ──────────────────────────────────────────── */ html[data-theme="light"] .results-topbar { background: rgba(249, 249, 249, 0.96); border-color: rgba(0, 0, 0, 0.1); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06); } /* ── Topbar User Button ──────────────────────────────────────── */ html[data-theme="light"] .topbar-user { background: rgba(0, 0, 0, 0.04); } html[data-theme="light"] .topbar-user:hover { background: rgba(0, 0, 0, 0.07); } /* ── Analyst Search Wrap ─────────────────────────────────────── */ html[data-theme="light"] .analyst-search-wrap { background: rgba(0, 0, 0, 0.04); } /* ── Profile Menu (dropdown) ─────────────────────────────────── */ html[data-theme="light"] .profile-menu { background: rgba(255, 255, 255, 0.98); border: 0.5px solid rgba(0, 0, 0, 0.1); box-shadow: 0 12px 48px rgba(0, 0, 0, 0.1); } html[data-theme="light"] .profile-menu-item { color: var(--text); } html[data-theme="light"] .profile-menu-item:hover { background: rgba(0, 0, 0, 0.04); } html[data-theme="light"] .profile-menu-item.danger { color: #8a1f1f; } /* ── Swap Button ─────────────────────────────────────────────── */ html[data-theme="light"] .swap-btn { background: rgba(0, 0, 0, 0.04); } html[data-theme="light"] .swap-btn:hover { background: rgba(139, 53, 88, 0.08); border-color: rgba(139, 53, 88, 0.3); } /* ── Form Inputs & Selects ───────────────────────────────────── */ html[data-theme="light"] select, html[data-theme="light"] input { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.12); color: var(--text); } html[data-theme="light"] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b4958' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; } /* Alert form selects are transparent inside grouped containers */ html[data-theme="light"] .alert-form-select { background-color: transparent; border: none; box-shadow: none; background-position: right 2px center; background-size: 12px; } html[data-theme="light"] select:hover, html[data-theme="light"] input:hover { border-color: rgba(0, 0, 0, 0.2); } html[data-theme="light"] select:focus, html[data-theme="light"] input:focus { background: #fff; border-color: var(--apple-blue); box-shadow: 0 0 0 4px rgba(134, 63, 160, 0.1); } html[data-theme="light"] input::placeholder { color: rgba(60, 60, 67, 0.3); } /* Secondary button hover */ html[data-theme="light"] button.secondary:hover { background: rgba(0, 0, 0, 0.04); border-color: rgba(90, 55, 72, 0.35); } /* ── Toast Notification ──────────────────────────────────────── */ html[data-theme="light"] .nt-toast { background: rgba(255, 255, 255, 0.97); border-color: rgba(0, 0, 0, 0.1); color: var(--text); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.1); } html[data-theme="light"] .nt-toast.nt-toast-error { border-color: rgba(145, 32, 32, 0.25); color: #8a1f1f; } html[data-theme="light"] .nt-toast.nt-toast-ok { border-color: rgba(26, 110, 65, 0.25); color: #1a6e42; } /* ── Live Rates Dropdown ─────────────────────────────────────── */ html[data-theme="light"] .live-rates-dropdown { background: #fff; border-color: rgba(0, 0, 0, 0.1); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); } html[data-theme="light"] .lrd-pass-notice { background: rgba(200, 155, 50, 0.07); border-color: rgba(200, 155, 50, 0.2); } html[data-theme="light"] .lrd-confirm-btn { background: linear-gradient(135deg, rgba(139, 53, 88, 0.1), rgba(92, 32, 57, 0.14)); border-color: rgba(139, 53, 88, 0.2); color: var(--text); } html[data-theme="light"] .lrd-confirm-btn:hover { background: linear-gradient(135deg, rgba(139, 53, 88, 0.15), rgba(92, 32, 57, 0.2)); border-color: rgba(139, 53, 88, 0.3); } /* ── Overlay Backdrops (override inline styles) ──────────────── */ html[data-theme="light"] #trialWelcomeOverlay, html[data-theme="light"] #manageAlertsOverlay, html[data-theme="light"] #analystUpgradeOverlay2, html[data-theme="light"] #aboutOverlay, html[data-theme="light"] #outOfUsesOverlay { background: rgba(255, 255, 255, 0.85) !important; backdrop-filter: blur(24px) saturate(1.3) !important; -webkit-backdrop-filter: blur(24px) saturate(1.3) !important; } html[data-theme="light"] #onboardingOverlay { background: #fff !important; } html[data-theme="light"] .ob-overlay-text { color: #8b5e3c; } html[data-theme="light"] .ob-scroll-dismiss { background: linear-gradient(135deg, #1a6e42, #1a8a52); color: #fff; } /* ── OutOfUses Inner Card ────────────────────────────────────── */ html[data-theme="light"] #outOfUsesOverlay > div { background: #fff !important; border-color: rgba(0, 0, 0, 0.1) !important; } html[data-theme="light"] #outOfUsesOverlay .oou-title { color: var(--text); } html[data-theme="light"] #outOfUsesOverlay .oou-body { color: var(--muted); } html[data-theme="light"] #outOfUsesOverlay .oou-note { color: var(--muted-soft); } /* ── Analyst Upgrade Card ────────────────────────────────────── */ html[data-theme="light"] .analyst-upgrade-card { background: linear-gradient(135deg, rgba(26, 110, 66, 0.06) 0%, rgba(253, 245, 247, 0) 100%); } /* ── Notify Upgrade Card ─────────────────────────────────────── */ html[data-theme="light"] .notify-upgrade-card { background: linear-gradient(135deg, rgba(26, 110, 66, 0.06) 0%, rgba(253, 245, 247, 0) 100%); } html[data-theme="light"] .notify-upgrade-perks li { color: var(--muted); } html[data-theme="light"] .notify-upgrade-perks li::before { color: #1a6e42; } /* ── Subscription Manage Card ────────────────────────────────── */ html[data-theme="light"] .sub-manage-card { background: #fff !important; border-color: rgba(0, 0, 0, 0.1) !important; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08) !important; } /* ── Auth + Onboarding Overlay Background ────────────────────── */ html[data-theme="light"] .auth-overlay { background: #fff; } /* ── Result Gate Overlay ─────────────────────────────────────── */ html[data-theme="light"] .result-gate { background: rgba(255, 255, 255, 0.82); } html[data-theme="light"] .result-gate-card { background: #fff; border-color: rgba(0, 0, 0, 0.1); } /* ── Overlay Profile Button Chips ────────────────────────────── */ html[data-theme="light"] #upgradeOverlayProfileName, html[data-theme="light"] #oouOverlayProfileName { color: var(--text) !important; } html[data-theme="light"] #upgradeOverlayProfileBtn > div, html[data-theme="light"] #oouOverlayProfileBtn > div { background: rgba(0, 0, 0, 0.04) !important; border-color: rgba(90, 55, 72, 0.2) !important; } /* ── Topbar Action Buttons ───────────────────────────────────── */ html[data-theme="light"] .topbar-action-btn:hover { background: rgba(0, 0, 0, 0.06); } /* ── Sidebar Search Row ──────────────────────────────────────── */ html[data-theme="light"] .sidebar-search-row { background: rgba(0, 0, 0, 0.04); } /* ── Autocomplete Dropdown (onboarding school field) ─────────── */ html[data-theme="light"] .school-ac-dropdown { background: #fff; border-color: rgba(0, 0, 0, 0.1); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); } html[data-theme="light"] .school-ac-item { color: var(--muted); border-bottom-color: rgba(90, 55, 72, 0.07); } html[data-theme="light"] .school-ac-item:hover, html[data-theme="light"] .school-ac-item.highlighted { background: rgba(0, 0, 0, 0.05); color: var(--text); } html[data-theme="light"] .school-ac-item em { color: var(--success); } /* ── Alert Management ────────────────────────────────────────── */ html[data-theme="light"] .alert-management-list, html[data-theme="light"] .alert-grouped-section, html[data-theme="light"] .alert-form-email-row, html[data-theme="light"] .notify-condition-row { background: rgba(0, 0, 0, 0.04); } html[data-theme="light"] .alert-mgmt-row, html[data-theme="light"] .alert-form-row { border-bottom-color: rgba(0, 0, 0, 0.08); } html[data-theme="light"] .alerts-new-btn.active { background: rgba(0, 0, 0, 0.06); } /* ── Notify Buttons (mini, secondary, lock) ──────────────────── */ html[data-theme="light"] .notify-mini-btn { background: rgba(0, 0, 0, 0.04); border-color: rgba(90, 55, 72, 0.18); color: var(--text); } html[data-theme="light"] .notify-mini-btn:hover { background: rgba(0, 0, 0, 0.07); border-color: rgba(90, 55, 72, 0.3); } html[data-theme="light"] .notify-mini-btn:active { background: rgba(0, 0, 0, 0.06); } html[data-theme="light"] .notify-mini-btn[data-action="remove"] { border-color: rgba(145, 32, 32, 0.2); color: #8a1f1f; background: rgba(145, 32, 32, 0.04); } html[data-theme="light"] .notify-mini-btn[data-action="remove"]:hover { background: rgba(145, 32, 32, 0.08); border-color: rgba(145, 32, 32, 0.35); } /* ── Notify Preview/Status Cards ─────────────────────────────── */ html[data-theme="light"] .notify-preview-card, html[data-theme="light"] .notify-status-card { background: rgba(0, 0, 0, 0.04); } html[data-theme="light"] .notify-context-row { border-top-color: rgba(0, 0, 0, 0.08); } /* ── Signal Bar Track ────────────────────────────────────────── */ html[data-theme="light"] .signal-bar { background: rgba(0, 0, 0, 0.1); } /* ── Predictions Tab ─────────────────────────────────────────── */ html[data-theme="light"] .pred-table td { border-bottom-color: var(--line); } html[data-theme="light"] .pred-vol-bar-bg { background: rgba(0, 0, 0, 0.1); } html[data-theme="light"] .pred-disclaimer { background: rgba(0, 0, 0, 0.04); } /* ── Pricing Cards ───────────────────────────────────────────── */ html[data-theme="light"] .pricing-card { border: 0.5px solid rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); } /* ── Theme Toggle Icon Logic ─────────────────────────────────── */ /* Dark mode (default): show sun icon → "Light mode" */ .theme-icon-moon { display: none; } /* Light mode: show moon icon → "Dark mode" */ html[data-theme="light"] .theme-icon-sun { display: none; } html[data-theme="light"] .theme-icon-moon { display: block; }