/* ========================================================================== OPEQ — Dark Mode (lightweight overlay) Toggle via . State persisted in localStorage. Designed to coexist with the cream/light brand palette. ========================================================================== */ [data-theme="dark"] { --bg: #0E1A28; --bg-elev: #15263B; --opeq-cream: #0E1A28; --opeq-navy: #F5F3F0; /* invert: navy text becomes cream */ --opeq-pearl: #2A3D55; --fg: #E8EDF3; --fg-muted: #9AA9BB; color-scheme: dark; } [data-theme="dark"] body { background: var(--bg); color: var(--fg); } /* Surfaces — anything that was a white card */ [data-theme="dark"] .section-card, [data-theme="dark"] .prod-card, [data-theme="dark"] .quiz-card, [data-theme="dark"] .result-card, [data-theme="dark"] .faq-card, [data-theme="dark"] .sidebar, [data-theme="dark"] .summary-card, [data-theme="dark"] .panel-card, [data-theme="dark"] .stat-card, [data-theme="dark"] .action-card, [data-theme="dark"] .order-row, [data-theme="dark"] .active-order, [data-theme="dark"] .auth-card, [data-theme="dark"] .partner-logo, [data-theme="dark"] .fof__panel, [data-theme="dark"] .fof__suggest-list a, [data-theme="dark"] .charlie-helper__bubble, [data-theme="dark"] .quiz-widget, [data-theme="dark"] .nav, [data-theme="dark"] .profile-tabs { background: var(--bg-elev) !important; color: var(--fg) !important; border-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] .partners, [data-theme="dark"] main, [data-theme="dark"] .checkout-shell, [data-theme="dark"] .dashboard, [data-theme="dark"] .quiz-page, [data-theme="dark"] .faq-page { background: var(--bg) !important; } /* Hero / dark-themed sections stay dark — keep navy hero readable */ [data-theme="dark"] .hero, [data-theme="dark"] .footer, [data-theme="dark"] .footer-mini, [data-theme="dark"] .welcome-banner { background: #07111E !important; } /* Borders / dividers */ [data-theme="dark"] [class*="border"], [data-theme="dark"] .order-row, [data-theme="dark"] .faq-item, [data-theme="dark"] .section-card__header, [data-theme="dark"] .panel-card__header, [data-theme="dark"] .sidebar__user, [data-theme="dark"] .sidebar__logout { border-color: rgba(255,255,255,.06) !important; } /* Inputs */ [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { background: rgba(255,255,255,.04) !important; color: var(--fg) !important; border-color: rgba(255,255,255,.12) !important; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: rgba(232,237,243,.4) !important; } /* Headings & primary text colors */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] .section-card__title, [data-theme="dark"] .sidebar__name, [data-theme="dark"] .stat-card__num, [data-theme="dark"] .order-ref, [data-theme="dark"] .tracker__label, [data-theme="dark"] .panel-card__title, [data-theme="dark"] .prod-card__title, [data-theme="dark"] .faq-question, [data-theme="dark"] .partner-logo, [data-theme="dark"] .welcome-impact__num { color: var(--fg) !important; } /* Muted */ [data-theme="dark"] [style*="color:var(--fg-muted)"], [data-theme="dark"] [style*="color: var(--fg-muted)"], [data-theme="dark"] [style*="color:var(--opeq-navy)"] { color: var(--fg) !important; } /* Cream backgrounds inside elements */ [data-theme="dark"] [style*="background:var(--opeq-cream)"], [data-theme="dark"] [style*="background: var(--opeq-cream)"] { background: var(--bg-elev) !important; } /* Logos that are dark-on-light → swap for white */ [data-theme="dark"] .nav__logo, [data-theme="dark"] .footer__logo { filter: brightness(0) invert(1); } /* Hover/active surfaces */ [data-theme="dark"] .order-row:hover, [data-theme="dark"] .faq-question:hover, [data-theme="dark"] .sidebar__link:hover { background: rgba(40,170,222,.08) !important; } /* THEME TOGGLE BUTTON */ .theme-toggle { position: fixed; bottom: 22px; left: 22px; z-index: 250; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(14,40,65,.12); background: #fff; color: var(--opeq-navy); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(14,40,65,.12); transition: transform .2s, background .2s, border-color .2s; } .theme-toggle:hover { transform: translateY(-2px) rotate(-12deg); border-color: var(--opeq-blue); } .theme-toggle svg { width: 20px; height: 20px; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle { background: #15263B; color: #FFC533; border-color: rgba(255,255,255,.1); } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } @media (max-width: 640px) { .theme-toggle { width: 38px; height: 38px; bottom: 14px; left: 14px; } }