/* ============================================================ VERIFPLACE - DARK MODE STYLESHEET ============================================================ Activated via [data-theme="dark"] on the element. Organized by: Variables > Global > Components > Page-specific ============================================================ */ /* ============================================================ 1. CSS CUSTOM PROPERTY OVERRIDES ============================================================ */ [data-theme="dark"] { /* --- Glass / Transparency --- */ --glass-bg-strong: rgba(22, 30, 50, 0.92); --glass-bg-medium: rgba(22, 30, 50, 0.75); --glass-bg-light: rgba(22, 30, 50, 0.55); --glass-bg-subtle: rgba(255, 255, 255, 0.06); --glass-border: rgba(255, 255, 255, 0.1); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); --glass-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.4); /* --- Text --- */ --text-primary: #e2e6f0; --text-secondary: #9aa3bc; --text-muted: #667088; /* --- Backgrounds --- */ --bg-primary: #0d1117; --bg-secondary: #161b26; --bg-accent: #1a2332; /* --- Gradient mesh (lower opacity for dark) --- */ --gradient-mesh: radial-gradient(ellipse at 20% 50%, rgba(45, 106, 79, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(33, 46, 83, 0.1) 0%, transparent 50%), radial-gradient(ellipse at 50% 80%, rgba(200, 80, 120, 0.06) 0%, transparent 50%); /* --- Dark-mode specific tokens --- */ --dark-card: #161b26; --dark-card-border: rgba(255, 255, 255, 0.06); --dark-card-hover: rgba(255, 255, 255, 0.03); --dark-surface: #1c2333; --dark-input: #1a2030; --dark-input-border: rgba(255, 255, 255, 0.1); /* --- Revision / Quiz variables (override injected-styles.js) --- */ --bs-light: #161b26; --answer-bg: #1a2332; --card-shadow: rgba(0, 0, 0, 0.25); color-scheme: dark; } /* ============================================================ 2. SMOOTH TRANSITION (disabled on first paint) ============================================================ */ [data-theme] body { transition: background-color 0.3s ease, color 0.3s ease; } [data-theme] .animated-bg, [data-theme] .feature-card, [data-theme] .testimonial-card, [data-theme] .pricing-plan-card, [data-theme] .faq-item, [data-theme] .stat-card, [data-theme] .step-card, [data-theme] .partner-card { transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* ============================================================ 3. GLOBAL / BODY ============================================================ */ [data-theme="dark"] body { background-color: #0d1117; color: #e2e6f0; } [data-theme="dark"] .animated-bg { background: #0d1117; } /* ============================================================ 4. SCROLLBAR ============================================================ */ [data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: #0d1117; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 5px; border: 2px solid #0d1117; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); } /* ============================================================ 5. FLOATING THEME TOGGLE BUTTON ============================================================ */ .theme-toggle-float { position: fixed; bottom: 100px; right: 24px; z-index: 9999; width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(33, 46, 83, 0.15); background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; box-shadow: 0 4px 20px rgba(33, 46, 83, 0.15); transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease; flex-shrink: 0; } .theme-toggle-float:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(33, 46, 83, 0.22); } .theme-toggle-float:active { transform: scale(0.93); } /* Icon containers */ .theme-toggle-float .icon-moon, .theme-toggle-float .icon-sun { position: absolute; display: flex; align-items: center; justify-content: center; transition: opacity 0.35s ease, transform 0.35s ease; } .theme-toggle-float .icon-moon svg, .theme-toggle-float .icon-sun svg { color: var(--color-navy, #212e53); } /* Light mode: show moon, hide sun */ .theme-toggle-float .icon-moon { opacity: 1; transform: rotate(0deg) scale(1); } .theme-toggle-float .icon-sun { opacity: 0; transform: rotate(-90deg) scale(0.5); } /* Dark mode: show sun, hide moon */ [data-theme="dark"] .theme-toggle-float .icon-moon { opacity: 0; transform: rotate(90deg) scale(0.5); } [data-theme="dark"] .theme-toggle-float .icon-sun { opacity: 1; transform: rotate(0deg) scale(1); } [data-theme="dark"] .theme-toggle-float { background: rgba(22, 30, 50, 0.9); border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35); } [data-theme="dark"] .theme-toggle-float .icon-sun svg { color: #fbbf24; } [data-theme="dark"] .theme-toggle-float:hover { background: rgba(30, 40, 65, 0.95); box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45); } /* Avoid overlap with contact FAB (bottom-right) */ #contact-fab-wrap ~ .theme-toggle-float, .theme-toggle-float { bottom: 100px; } @media (max-width: 768px) { .theme-toggle-float { width: 42px; height: 42px; bottom: 90px; right: 16px; } } /* ============================================================ 6. STYLES.CSS COMPONENT OVERRIDES ============================================================ */ /* --- Logo items (partner logos) --- */ [data-theme="dark"] .logo-item { background: var(--dark-card); border-color: var(--dark-card-border); } /* --- Step cards --- */ [data-theme="dark"] .step-card { background: var(--dark-card); border-color: var(--dark-card-border); } [data-theme="dark"] .step-card:hover { background: var(--dark-surface); } /* --- Demo preview --- */ [data-theme="dark"] .demo-preview { background: var(--dark-card); border-color: var(--dark-card-border); } /* --- Demo scroll arrow --- */ [data-theme="dark"] .demo-scroll-arrow { background: var(--dark-surface); color: #e2e6f0; border-color: var(--dark-card-border); } /* --- Feature cards --- */ [data-theme="dark"] .feature-card { background: var(--dark-card); border-color: var(--dark-card-border); } [data-theme="dark"] .feature-card:hover { background: var(--dark-surface); border-color: rgba(255, 255, 255, 0.1); } /* --- Testimonial cards --- */ [data-theme="dark"] .testimonial-card { background: var(--dark-card); border-color: var(--dark-card-border); } /* --- CTA form --- */ [data-theme="dark"] .cta-form { background: var(--dark-card); border-color: var(--dark-card-border); } /* --- Pricing plan cards --- */ [data-theme="dark"] .pricing-plan-card { background: var(--dark-card); border: 2px solid var(--dark-card-border); } [data-theme="dark"] .pricing-plan-card:hover { border-color: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .pricing-plan-feature { border-bottom-color: var(--dark-card-border); } /* --- Guarantee icon --- */ [data-theme="dark"] .guarantee-icon { background: var(--dark-surface); } /* --- FAQ items --- */ [data-theme="dark"] .faq-item { background: var(--dark-card); border-color: var(--dark-card-border); } [data-theme="dark"] .faq-header { border-bottom-color: var(--dark-card-border); } /* --- Partner cards --- */ [data-theme="dark"] .partner-card { background: var(--dark-card); border-color: var(--dark-card-border); } /* --- Logo section borders --- */ [data-theme="dark"] .logo-section { border-top-color: var(--dark-card-border); border-bottom-color: var(--dark-card-border); } /* --- Floating CTA --- */ [data-theme="dark"] .floating-cta { background: var(--dark-card); border-color: var(--dark-card-border); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); } /* ============================================================ 7. PWA INSTALL BANNER ============================================================ */ [data-theme="dark"] #pwa-install-banner { background: var(--dark-card); border-color: var(--dark-card-border); box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .pwa-banner-text strong { color: #e2e6f0; } [data-theme="dark"] .pwa-banner-text span { color: #9aa3bc; } [data-theme="dark"] #pwa-dismiss-btn { color: #667088; } [data-theme="dark"] #pwa-dismiss-btn:hover { color: #9aa3bc; } /* ============================================================ 8. TOAST NOTIFICATIONS ============================================================ */ [data-theme="dark"] .toast { background: var(--dark-surface); border-color: var(--dark-card-border); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .toast-message { color: #e2e6f0; } [data-theme="dark"] .toast-close { color: #667088; } [data-theme="dark"] .toast-close:hover { color: #9aa3bc; } [data-theme="dark"] .toast-progress { background: rgba(255, 255, 255, 0.06); } /* ============================================================ 9. COOKIE BANNER ============================================================ */ [data-theme="dark"] #cookie-banner, [data-theme="dark"] .cookie-inner { background: var(--dark-surface); border-color: var(--dark-card-border); box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .cookie-icon { color: #e2e6f0; } [data-theme="dark"] .cookie-text strong { color: #e2e6f0; } [data-theme="dark"] .cookie-text p { color: #9aa3bc; } [data-theme="dark"] .cookie-text a { color: #c1c8d8; } [data-theme="dark"] .cookie-btn-refuse { border-color: rgba(255, 255, 255, 0.1); color: #9aa3bc; } [data-theme="dark"] .cookie-btn-refuse:hover { background: rgba(255, 255, 255, 0.05); color: #e2e6f0; } /* ============================================================ 10. CONTACT MENU ============================================================ */ [data-theme="dark"] .contact-menu { background: var(--dark-card); border-color: var(--dark-card-border); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .contact-option-email { color: #e2e6f0; } [data-theme="dark"] .contact-option-text strong { color: #e2e6f0; } [data-theme="dark"] .contact-option-text span { color: #667088; } /* ============================================================ 11. DASHBOARD (dashboard.css overrides) ============================================================ */ /* --- Tabs --- */ [data-theme="dark"] .dash-tabs { background: var(--dark-card); border-color: var(--dark-card-border); } [data-theme="dark"] .dash-tab { color: #9aa3bc; } [data-theme="dark"] .dash-tab:hover { background: rgba(255, 255, 255, 0.04); color: #e2e6f0; } [data-theme="dark"] .dash-tab.active { color: #e2e6f0; background: rgba(255, 255, 255, 0.08); } /* --- Stat cards --- */ [data-theme="dark"] .stat-card { background: var(--dark-card); border-color: var(--dark-card-border); } /* --- Action buttons --- */ [data-theme="dark"] .btn-action { border-color: rgba(255, 255, 255, 0.1); color: #9aa3bc; } [data-theme="dark"] .btn-action:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.15); color: #e2e6f0; } /* --- All dashboard cards (generic white bg overrides) --- */ [data-theme="dark"] .dash-card, [data-theme="dark"] .activity-card, [data-theme="dark"] .info-card, [data-theme="dark"] .report-card, [data-theme="dark"] .history-card, [data-theme="dark"] .settings-card, [data-theme="dark"] .profile-card, [data-theme="dark"] .subscription-card, [data-theme="dark"] .notification-card, [data-theme="dark"] .billing-card, [data-theme="dark"] .support-card, [data-theme="dark"] .analytics-card, [data-theme="dark"] .team-card, [data-theme="dark"] .integration-card, [data-theme="dark"] .export-card { background: var(--dark-card); border-color: var(--dark-card-border); } /* --- Dashboard generic borders --- */ [data-theme="dark"] .dash-divider, [data-theme="dark"] .dash-border { border-color: var(--dark-card-border); } /* --- Dashboard tables & list items --- */ [data-theme="dark"] .dash-table th { background: var(--dark-surface); border-color: var(--dark-card-border); color: #9aa3bc; } [data-theme="dark"] .dash-table td { border-color: var(--dark-card-border); color: #e2e6f0; } [data-theme="dark"] .dash-table tr:hover td { background: rgba(255, 255, 255, 0.02); } /* --- Dashboard inputs --- */ [data-theme="dark"] .dash-input, [data-theme="dark"] .dash-select, [data-theme="dark"] .dash-textarea { background: var(--dark-input); border-color: var(--dark-input-border); color: #e2e6f0; } [data-theme="dark"] .dash-input:focus, [data-theme="dark"] .dash-select:focus, [data-theme="dark"] .dash-textarea:focus { border-color: rgba(255, 255, 255, 0.2); } [data-theme="dark"] .dash-input::placeholder, [data-theme="dark"] .dash-textarea::placeholder { color: #667088; } /* ============================================================ 12. QUESTIONS PAGE (questions.css overrides) ============================================================ */ /* All white-background cards on questions page */ [data-theme="dark"] .question-type-card, [data-theme="dark"] .question-category-card, [data-theme="dark"] .question-item, [data-theme="dark"] .question-list-card, [data-theme="dark"] .question-detail-card, [data-theme="dark"] .answer-card, [data-theme="dark"] .quiz-card, [data-theme="dark"] .result-card, [data-theme="dark"] .explanation-card, [data-theme="dark"] .progress-card, [data-theme="dark"] .score-card, [data-theme="dark"] .review-card, [data-theme="dark"] .filter-card, [data-theme="dark"] .search-card { background: var(--dark-card); border-color: var(--dark-card-border); } [data-theme="dark"] .question-type-card:hover, [data-theme="dark"] .question-category-card:hover, [data-theme="dark"] .question-item:hover { background: var(--dark-surface); } /* ============================================================ 13. AUTH PAGES (auth.css overrides) ============================================================ */ [data-theme="dark"] .form-group input, [data-theme="dark"] .form-group select, [data-theme="dark"] .form-group textarea { background: var(--dark-input); border-color: var(--dark-input-border); color: #e2e6f0; } [data-theme="dark"] .form-group input:focus, [data-theme="dark"] .form-group select:focus, [data-theme="dark"] .form-group textarea:focus { border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05); } [data-theme="dark"] .form-group input::placeholder { color: #667088; } [data-theme="dark"] .form-group label { color: #9aa3bc; } [data-theme="dark"] .auth-footer a { color: #c1c8d8; } [data-theme="dark"] .auth-footer a:hover { color: #e2e6f0; } /* ============================================================ 14. LEGAL PAGES (legal.css overrides) ============================================================ */ [data-theme="dark"] .legal-section { background: var(--dark-card); border-color: var(--dark-card-border); } [data-theme="dark"] .highlight-section .highlight-icon { background: var(--dark-surface); } [data-theme="dark"] .legal-table td, [data-theme="dark"] .legal-table th { border-color: var(--dark-card-border); } [data-theme="dark"] .legal-table th { background: var(--dark-surface); color: #e2e6f0; } [data-theme="dark"] .legal-table tr:nth-child(even) td { background: rgba(255, 255, 255, 0.02); } /* ============================================================ 15. FORMATION PAGE (formation.css overrides) ============================================================ */ [data-theme="dark"] .competence-card { background: var(--dark-card); border-color: var(--dark-card-border); } [data-theme="dark"] .competence-card:hover { background: var(--dark-surface); } [data-theme="dark"] .competence-tab { background: var(--dark-surface); color: #9aa3bc; } [data-theme="dark"] .competence-tab:hover, [data-theme="dark"] .competence-tab.active { color: #e2e6f0; } [data-theme="dark"] .objectif-item + .objectif-item { border-top-color: var(--dark-card-border); } [data-theme="dark"] .objectif-icon { background: var(--dark-surface); color: #7bc5a0; } /* ============================================================ 16. REVISION / QUIZ (revision-styles.css overrides) ============================================================ */ [data-theme="dark"] #main-page-header { background: var(--dark-surface); border-color: var(--dark-card-border); } [data-theme="dark"] .question-card { background: var(--dark-card); border-color: var(--dark-card-border); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); } [data-theme="dark"] .navbar { border-bottom-color: var(--dark-card-border); } /* Answer options in revision */ [data-theme="dark"] .answer-option, [data-theme="dark"] .answer-btn { background: var(--dark-surface); border-color: var(--dark-card-border); color: #e2e6f0; } [data-theme="dark"] .answer-option:hover, [data-theme="dark"] .answer-btn:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); } /* ============================================================ 17. GENERIC FORM ELEMENTS ============================================================ */ [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="tel"], [data-theme="dark"] input[type="number"], [data-theme="dark"] input[type="search"], [data-theme="dark"] input[type="url"], [data-theme="dark"] select, [data-theme="dark"] textarea { background-color: var(--dark-input); border-color: var(--dark-input-border); color: #e2e6f0; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #667088; } [data-theme="dark"] input:focus, [data-theme="dark"] select:focus, [data-theme="dark"] textarea:focus { border-color: rgba(255, 255, 255, 0.2); outline-color: rgba(255, 255, 255, 0.1); } /* ============================================================ 18. GENERIC BORDERS & SEPARATORS ============================================================ */ [data-theme="dark"] hr { border-color: var(--dark-card-border); } /* Common border color tokens used across the codebase */ [data-theme="dark"] [style*="border-color: #eef1f6"], [data-theme="dark"] [style*="border: 1px solid #eef1f6"] { border-color: var(--dark-card-border) !important; } /* ============================================================ 19. SELECTION & HIGHLIGHTS ============================================================ */ [data-theme="dark"] ::selection { background: rgba(100, 140, 220, 0.3); color: #e2e6f0; } [data-theme="dark"] ::-moz-selection { background: rgba(100, 140, 220, 0.3); color: #e2e6f0; } /* ============================================================ 20. IMAGES & MEDIA (prevent blinding white on dark bg) ============================================================ */ [data-theme="dark"] img { opacity: 0.92; } [data-theme="dark"] img:hover { opacity: 1; } /* Keep logo/icons at full opacity */ [data-theme="dark"] .logo img, [data-theme="dark"] .nav-logo img, [data-theme="dark"] .footer-logo img, [data-theme="dark"] .icon img { opacity: 1; } /* ============================================================ 21. LINKS (non-button, non-nav) ============================================================ */ [data-theme="dark"] a:not([class]) { color: #8ab4f8; } [data-theme="dark"] a:not([class]):hover { color: #aecbfa; } /* ============================================================ 22. CODE / PRE BLOCKS (if any) ============================================================ */ [data-theme="dark"] code, [data-theme="dark"] pre { background: var(--dark-surface); border-color: var(--dark-card-border); color: #e2e6f0; } /* ============================================================ 23. BADGES & TAGS ============================================================ */ [data-theme="dark"] .badge, [data-theme="dark"] .tag { background: rgba(255, 255, 255, 0.06); border-color: var(--dark-card-border); color: #9aa3bc; } /* ============================================================ 24. MODALS & OVERLAYS ============================================================ */ [data-theme="dark"] .modal-content, [data-theme="dark"] .modal-body, [data-theme="dark"] .dialog-content { background: var(--dark-surface); border-color: var(--dark-card-border); color: #e2e6f0; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .modal-overlay, [data-theme="dark"] .dialog-overlay { background: rgba(0, 0, 0, 0.6); } [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: var(--dark-card-border); } /* ============================================================ 25. DROPDOWN MENUS ============================================================ */ [data-theme="dark"] .dropdown-menu, [data-theme="dark"] .dropdown-content { background: var(--dark-surface); border-color: var(--dark-card-border); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .dropdown-item:hover { background: rgba(255, 255, 255, 0.05); } /* ============================================================ 26. TOOLTIPS ============================================================ */ [data-theme="dark"] .tooltip, [data-theme="dark"] [data-tooltip]::after { background: var(--dark-surface); color: #e2e6f0; border-color: var(--dark-card-border); } /* ============================================================ 27. QUESTIONS PAGE — SPECIFIC SELECTORS ============================================================ */ /* Search bar & controls */ [data-theme="dark"] .ctrl-search { background: var(--dark-input); border-color: var(--dark-input-border); } [data-theme="dark"] .ctrl-search input { color: #e2e6f0; } [data-theme="dark"] .ctrl-pill { background: var(--dark-surface); border-color: var(--dark-card-border); color: #9aa3bc; } [data-theme="dark"] .ctrl-pill:hover { background: rgba(255, 255, 255, 0.08); color: #e2e6f0; } [data-theme="dark"] .ctrl-pill-active { background: var(--color-navy-light); color: #fff; } [data-theme="dark"] .ctrl-filter-input { background: var(--dark-input); border-color: var(--dark-input-border); color: #e2e6f0; } [data-theme="dark"] .ctrl-filter-btn { background: var(--dark-surface); border-color: var(--dark-card-border); color: #9aa3bc; } [data-theme="dark"] .ctrl-filter-btn:hover { background: rgba(255, 255, 255, 0.08); color: #e2e6f0; } /* Info section */ [data-theme="dark"] .info-toggle { background: var(--dark-card); border-color: var(--dark-card-border); color: #e2e6f0; } [data-theme="dark"] .info-toggle:hover { background: var(--dark-surface); } [data-theme="dark"] .info-card { background: var(--dark-card); border-color: var(--dark-card-border); } /* Question cards */ [data-theme="dark"] .question-card { background: var(--dark-card); border-color: var(--dark-card-border); } [data-theme="dark"] .question-card:hover { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); } [data-theme="dark"] .card-header.question-header { /* Already on navy gradient — keep as is */ } [data-theme="dark"] .question-text { color: #e2e6f0; } [data-theme="dark"] .question-block { border-color: var(--dark-card-border); } [data-theme="dark"] .answer-normal { background: var(--dark-surface); color: #c8cfe0; } /* Component/Voyant badges */ [data-theme="dark"] .component-badge { background: var(--dark-surface); border-color: var(--dark-card-border); } /* Quiz options */ [data-theme="dark"] .quiz-option-btn { background: var(--dark-surface); border-color: var(--dark-card-border); color: #e2e6f0; } [data-theme="dark"] .quiz-option-btn:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); } /* Hero exam button */ [data-theme="dark"] .hero-exam-btn { background: var(--dark-card); color: #e2e6f0; border-color: var(--dark-card-border); } [data-theme="dark"] .hero-exam-btn:hover { background: var(--color-navy-light); color: #fff; } /* Exam results overlay */ [data-theme="dark"] .exam-results-inner { background: var(--dark-card); color: #e2e6f0; } /* Focus navigation bar */ [data-theme="dark"] .focus-nav { background: var(--dark-card); border-top: 1px solid var(--dark-card-border); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3); } /* Tips section */ [data-theme="dark"] .tips-icon { background: var(--dark-surface); } /* SEO / FAQ on questions page */ [data-theme="dark"] .faq-item-q { background: var(--dark-card); border-color: var(--dark-card-border); } [data-theme="dark"] .seo-article { background: var(--dark-card); border-color: var(--dark-card-border); } /* Score history card (in hero) */ [data-theme="dark"] .score-history-card { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.08); } /* Resume banner */ [data-theme="dark"] .resume-banner { background: var(--dark-surface); border-color: var(--dark-card-border); } /* Streak indicator */ [data-theme="dark"] .streak-indicator { background: var(--dark-surface); border-color: var(--color-pink); } /* Progress bar wrapper */ [data-theme="dark"] .q-progress-wrap { background: var(--dark-card); border-color: var(--dark-card-border); } /* Tap hint */ [data-theme="dark"] .tap-hint { color: #9aa3bc; } /* Answer visible state */ [data-theme="dark"] .answer-normal.visible { background: var(--dark-surface); border-color: var(--dark-card-border); } /* Question type badges */ [data-theme="dark"] .question-type { background: rgba(255, 255, 255, 0.06); color: #9aa3bc; } /* ============================================================ 28. DASHBOARD — SPECIFIC SELECTORS ============================================================ */ [data-theme="dark"] .overview-lic-card { background: var(--dark-card); border-color: var(--dark-card-border); } [data-theme="dark"] .quick-action-btn { background: var(--dark-card); border-color: var(--dark-card-border); color: #e2e6f0; } [data-theme="dark"] .quick-action-btn:hover { background: var(--dark-surface); border-color: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .license-card { background: var(--dark-card); border-color: var(--dark-card-border); } [data-theme="dark"] .license-card:hover { border-color: rgba(255, 255, 255, 0.1); } /* Settings inputs */ [data-theme="dark"] .setting-input, [data-theme="dark"] .account-input, [data-theme="dark"] .account-card input, [data-theme="dark"] .account-card select { background: var(--dark-input); border-color: var(--dark-input-border); color: #e2e6f0; } [data-theme="dark"] .plan-card { background: var(--dark-card); border-color: var(--dark-card-border); } [data-theme="dark"] .plan-card:hover { border-color: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .account-card { background: var(--dark-card); border-color: var(--dark-card-border); } [data-theme="dark"] .modal-box { background: var(--dark-card); border-color: var(--dark-card-border); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .license-key-input { background: var(--dark-input); border-color: var(--dark-input-border); color: #e2e6f0; } [data-theme="dark"] .choice-modal { background: var(--dark-card); } [data-theme="dark"] .choice-option, [data-theme="dark"] .choice-option-new { background: var(--dark-surface); border-color: var(--dark-card-border); color: #e2e6f0; } [data-theme="dark"] .choice-option:hover, [data-theme="dark"] .choice-option-new:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); } [data-theme="dark"] .empty-state { background: var(--dark-card); border-color: var(--dark-card-border); } /* Toggle switch slider */ [data-theme="dark"] .slider { background: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .slider::before, [data-theme="dark"] .toggle-slider::before { background: #e2e6f0; } /* Dash section borders */ [data-theme="dark"] .dash-section-border { border-color: var(--dark-card-border); } /* Copy button / feedback button */ [data-theme="dark"] .btn-copy, [data-theme="dark"] .btn-feedback { background: var(--dark-surface); border-color: var(--dark-card-border); color: #9aa3bc; } [data-theme="dark"] .btn-copy:hover, [data-theme="dark"] .btn-feedback:hover { background: rgba(255, 255, 255, 0.08); color: #e2e6f0; } /* ============================================================ 29. HEADER (scrolled state on dark mode) ============================================================ */ /* Header scrolled: the ::before uses --glass-bg-strong (auto-overridden) */ /* Override text colors for scrolled header in dark mode */ [data-theme="dark"] header.scrolled .logo-text .verif { color: #6fa3e8; } [data-theme="dark"] header.scrolled .nav-links a { color: #9aa3bc; } [data-theme="dark"] header.scrolled .nav-links a:hover { color: var(--color-pink); } /* btn-nav uses gradient-accent bg + white text — works on both themes */ /* Mobile menu uses --gradient-primary (navy) — fine as is */ /* ============================================================ 30. FOOTER (dark mode adjustments) ============================================================ */ /* Footer is already on navy gradient — mostly fine, just tweak separators */ [data-theme="dark"] .footer-section { border-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .footer-bottom { border-top-color: rgba(255, 255, 255, 0.06); } /* ============================================================ 31. HIGHLIGHTED SEARCH TERMS (dark mode contrast) ============================================================ */ [data-theme="dark"] .highlighted-search-term { background-color: rgba(255, 200, 50, 0.3); color: #fff; } /* ============================================================ 32. REVISION-STYLES (specific overrides) ============================================================ */ [data-theme="dark"] #main-page-header { background-color: var(--dark-card); } [data-theme="dark"] #main-page-header.scrolled { background-color: var(--dark-card); } /* ============================================================ 33. ANSWER REVEAL (questions page — clicking a question) ============================================================ */ [data-theme="dark"] .answer-normal { background: rgba(255, 255, 255, 0.04); border-left-color: var(--color-sage); } [data-theme="dark"] .answer-normal.visible { background: rgba(255, 255, 255, 0.05); } [data-theme="dark"] .answer-normal p { color: #c0c8d8; } [data-theme="dark"] .answer-normal strong { color: #e2e6f0; } [data-theme="dark"] .answer-normal a { color: #8ab4f8; } /* ============================================================ 34. PRICING GUARANTEE SECTION ============================================================ */ [data-theme="dark"] .pricing-guarantee { background: rgba(190, 211, 195, 0.08); border: 1px solid var(--dark-card-border); } [data-theme="dark"] .guarantee-icon { background: var(--dark-surface); color: var(--color-sage); } [data-theme="dark"] .guarantee-text h4 { color: #e2e6f0; } [data-theme="dark"] .guarantee-text p { color: #9aa3bc; } /* ============================================================ 35. SEO CONTENT SECTION (questions page) ============================================================ */ [data-theme="dark"] .seo-content-section { background: var(--dark-card); } [data-theme="dark"] .seo-article { background: var(--dark-surface); border-color: var(--dark-card-border); } [data-theme="dark"] .seo-article > header h2 { color: #e2e6f0; } [data-theme="dark"] .seo-block h3 { color: #8ab4f8; } [data-theme="dark"] .seo-block p { color: #9aa3bc; } [data-theme="dark"] .seo-block { border-bottom-color: var(--dark-card-border); } [data-theme="dark"] .seo-block ul li { color: #9aa3bc; } [data-theme="dark"] .seo-block ul li::before { background: var(--color-sage); } [data-theme="dark"] .seo-link { color: var(--color-pink); } [data-theme="dark"] .seo-footer { border-top-color: var(--dark-card-border); } [data-theme="dark"] .seo-footer p { color: #667088; } [data-theme="dark"] .seo-category { background: rgba(255, 255, 255, 0.03); } /* ============================================================ 36. PRICING — PLAN CARDS (prices visibility fix) ============================================================ */ [data-theme="dark"] .price-amount { color: #e2e6f0; } [data-theme="dark"] .price-period { color: #667088; } [data-theme="dark"] .price-monthly { color: #9aa3bc; } [data-theme="dark"] .pricing-plan-header h3 { color: #e2e6f0; } [data-theme="dark"] .pricing-plan-card .price-amount { color: #e2e6f0; } [data-theme="dark"] .pricing-plan-card .price-monthly { color: #667088; } [data-theme="dark"] .pricing-features-list li { color: #9aa3bc; border-bottom-color: var(--dark-card-border); } [data-theme="dark"] .pricing-plan-popular { border-color: var(--color-pink); box-shadow: 0 0 20px rgba(235, 172, 162, 0.15); } [data-theme="dark"] .btn-plan { color: #e2e6f0; } /* Pricing card description / subtitle */ [data-theme="dark"] .pricing-desc, [data-theme="dark"] .pricing-plan-desc { color: #9aa3bc; } /* ============================================================ 37. CTA CARD (questions page) ============================================================ */ [data-theme="dark"] .cta-card { background: var(--dark-surface); border-color: var(--dark-card-border); } [data-theme="dark"] .cta-card h3, [data-theme="dark"] .cta-card h2 { color: #e2e6f0; } [data-theme="dark"] .cta-card p { color: #9aa3bc; } /* ============================================================ 38. QUESTION BLOCK & HEADER DETAILS ============================================================ */ [data-theme="dark"] .question-header { /* On gradient-primary, fine as is */ } [data-theme="dark"] .question-block { border-bottom-color: var(--dark-card-border); } [data-theme="dark"] .question-text { color: #e2e6f0; } [data-theme="dark"] .question-block:hover { background: rgba(255, 255, 255, 0.02); } /* Question number badge */ [data-theme="dark"] .question-number { color: #9aa3bc; } /* Quiz feedback */ [data-theme="dark"] .quiz-feedback { color: #c0c8d8; } [data-theme="dark"] .quiz-feedback.correct { color: #34d399; background: rgba(52, 211, 153, 0.1); } [data-theme="dark"] .quiz-feedback.incorrect { color: #f87171; background: rgba(248, 113, 113, 0.1); } /* ============================================================ 39. FAQ SECTION ON QUESTIONS PAGE ============================================================ */ [data-theme="dark"] .faq-item-q { background: var(--dark-card); border-color: var(--dark-card-border); color: #e2e6f0; } [data-theme="dark"] .faq-item-q:hover { background: var(--dark-surface); } [data-theme="dark"] .faq-answer, [data-theme="dark"] .faq-item-a { background: var(--dark-surface); color: #9aa3bc; border-color: var(--dark-card-border); }