/** * ThroneHunt — Dark Mode * Applied via class "dark-mode" on * Toggle logic: /js/dark-mode.js */ /* ===== ANTI-FOUC: set background on immediately ===== */ html.dark-mode { background: #0F1A12; color-scheme: dark; } /* ===== CSS VARIABLE OVERRIDES ===== */ body.dark-mode { --ivory: #0F1A12; --ink: #E8F0EC; --slate: #A0AAB4; --cloud: #1A2B1E; --gold-soft: #26210E; /* dark-bg and dark-surface stay as-is — already dark */ background: #0F1A12 !important; color: #E8F0EC !important; } /* ===== LANDING PAGE (index.html) ===== */ /* Pain cards (hardcoded white) */ body.dark-mode .pain-card { background: #1A2B1E !important; border-color: rgba(255, 255, 255, 0.08) !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important; } body.dark-mode .pain-card:hover { border-color: rgba(197, 164, 78, 0.3) !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important; } /* Showcase cards */ body.dark-mode .showcase-card { background: #1A2B1E !important; border-color: rgba(255, 255, 255, 0.08) !important; } body.dark-mode .showcase-card.dark { background: #0F1A12 !important; } /* Pricing cards */ body.dark-mode .pricing-card { background: #1A2B1E !important; border-color: rgba(255, 255, 255, 0.08) !important; } body.dark-mode .pricing-card.featured { background: linear-gradient(135deg, #1F3027 0%, #162A1E 100%) !important; border-color: rgba(197, 164, 78, 0.4) !important; } /* Review / testimonial cards */ body.dark-mode .review-card, body.dark-mode .testimonial-card { background: #1A2B1E !important; border-color: rgba(255, 255, 255, 0.08) !important; } /* FAQ */ body.dark-mode .faq-item { border-color: rgba(255, 255, 255, 0.1) !important; } body.dark-mode .faq-question { color: #E8F0EC !important; } /* CTA section backgrounds */ body.dark-mode .cta-section, body.dark-mode .cta-block { background: #1A2B1E !important; } /* Dividers */ body.dark-mode .divider { background: linear-gradient(90deg, transparent, rgba(197, 164, 78, 0.15), transparent) !important; } /* ===== SIGNUP / SIGNUP-PRO (card-based pages) ===== */ body.dark-mode .card { background: #1A2B1E !important; border-color: rgba(255, 255, 255, 0.08) !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important; } /* Form inputs */ body.dark-mode .form-group input, body.dark-mode .form-group select, body.dark-mode .form-group textarea { background: #0F1A12 !important; border-color: rgba(255, 255, 255, 0.15) !important; color: #E8F0EC !important; } body.dark-mode .form-group input:focus, body.dark-mode .form-group select:focus, body.dark-mode .form-group textarea:focus { border-color: var(--emerald-light) !important; box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.2) !important; } body.dark-mode .form-group input::placeholder { color: #5A6B60 !important; } body.dark-mode .form-group label { color: #E8F0EC !important; } /* Premium benefits block */ body.dark-mode .premium-benefits { background: #142019 !important; } /* Trial banner */ body.dark-mode .trial-banner { background: linear-gradient(135deg, #26210E 0%, #1F1B0C 100%) !important; border-color: rgba(212, 168, 67, 0.2) !important; color: #E8F0EC !important; } /* Dividers inside card */ body.dark-mode .card .divider, body.dark-mode hr { border-color: rgba(255, 255, 255, 0.1) !important; background: rgba(255, 255, 255, 0.1) !important; } /* Error message (keep it readable) */ body.dark-mode .error-message { background: #2D1515 !important; border-color: #7F1D1D !important; color: #FCA5A5 !important; } /* Brand link text */ body.dark-mode .brand a { color: var(--emerald-light) !important; } body.dark-mode .brand p { color: var(--slate) !important; } /* Subtle background blobs — reduce in dark mode */ body.dark-mode::before, body.dark-mode::after { opacity: 0.15 !important; } /* ===== DARK MODE TOGGLE BUTTON ===== */ #darkModeToggle { background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.2); border-radius: 100px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.1rem; transition: border-color 0.2s, background 0.2s, transform 0.15s; flex-shrink: 0; line-height: 1; } #darkModeToggle:hover { border-color: rgba(197, 164, 78, 0.5); background: rgba(197, 164, 78, 0.08); transform: scale(1.08); } #darkModeToggle:active { transform: scale(0.95); } /* On light pages (signup/signup-pro) the toggle border should be visible */ .dark-toggle-light-page #darkModeToggle { border-color: rgba(0, 0, 0, 0.18); color: #0F1A14; } .dark-toggle-light-page #darkModeToggle:hover { border-color: rgba(13, 94, 74, 0.4); background: rgba(13, 94, 74, 0.06); } body.dark-mode.dark-toggle-light-page #darkModeToggle { border-color: rgba(255, 255, 255, 0.25); color: #E8F0EC; } /* Floating toggle for pages without a nav */ #darkModeToggleFloat { position: fixed; top: 1rem; right: 1rem; z-index: 9999; background: rgba(255, 255, 255, 0.9); border: 1.5px solid rgba(0, 0, 0, 0.12); border-radius: 100px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.15rem; transition: all 0.2s; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); line-height: 1; } #darkModeToggleFloat:hover { border-color: rgba(13, 94, 74, 0.4); background: rgba(255, 255, 255, 0.98); transform: scale(1.06); } body.dark-mode #darkModeToggleFloat { background: rgba(26, 43, 30, 0.95) !important; border-color: rgba(255, 255, 255, 0.15) !important; color: #E8F0EC; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } /* ===== SIGNUP-PRO plan cards (inline styles) ===== */ body.dark-mode #planSection a { background: #1A2B1E !important; border-color: rgba(255, 255, 255, 0.12) !important; color: #E8F0EC !important; } body.dark-mode #planSection a:hover { border-color: rgba(197, 164, 78, 0.5) !important; } /* Featured "Recommandé" plan */ body.dark-mode #planSection a[style*="linear-gradient"] { background: linear-gradient(135deg, #1A2E22, #1F3A28) !important; border-color: rgba(27, 107, 90, 0.7) !important; } /* Inner text colors in plan cards */ body.dark-mode #planSection a div[style*="color:#6b7280"], body.dark-mode #planSection a div[style*="color: #6b7280"] { color: #9CA3AF !important; } /* ===== Smooth theme transitions */ body.dark-mode-transition, body.dark-mode-transition * { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.15s ease !important; }