/* ============================================ MARLOWE KEYNES — DARK MODE THEME ============================================ Activated by adding class "dark" to Uses direct overrides since existing CSS has hardcoded colors ============================================ */ /* ============================================ DARK MODE TOGGLE BUTTON ============================================ */ .theme-toggle { background: none; border: 1px solid #ccc; border-radius: 50%; width: 36px; height: 36px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: all 0.3s ease; color: #555; flex-shrink: 0; } .theme-toggle:hover { border-color: #8c7851; color: #8c7851; } .theme-toggle .icon-sun, .theme-toggle .icon-moon { width: 18px; height: 18px; transition: opacity 0.3s ease, transform 0.3s ease; } /* Show sun in dark mode, moon in light mode */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } html.dark .theme-toggle .icon-sun { display: block; } html.dark .theme-toggle .icon-moon { display: none; } html.dark .theme-toggle { border-color: #555; color: #c4a46e; } html.dark .theme-toggle:hover { border-color: #c4a46e; } /* ============================================ SMOOTH TRANSITIONS ============================================ */ body, .site-header, .page-header, .form-wrapper, .content-wrapper, .main-form-title, .overlay-content, .modal-content, .site-footer, .mobile-nav-overlay, #gatekeeper-overlay, .gatekeeper-content, #confirmation-section, .confidentiality-notice { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } /* ============================================ HOMEPAGE — style.css overrides ============================================ */ /* Body */ html.dark body { background-color: #1a1c1e !important; color: #e8e4de !important; } /* Site Header */ html.dark .site-header { background-color: #1a1c1e !important; } /* Desktop Nav Links */ html.dark .main-nav-desktop a { color: #e8e4de !important; background-color: #2a2c2e !important; border-color: #444 !important; } html.dark .main-nav-desktop a:hover { color: #c4a46e !important; background-color: #333 !important; } /* Logo text (if it's text-based) */ html.dark .logo a { color: #e8e4de !important; } /* Mobile Header Buttons */ html.dark .mobile-header-btns a { background-color: #2a2c2e !important; color: #e8e4de !important; border-color: #444 !important; } /* Hamburger Menu Lines */ html.dark .hamburger-menu span { background-color: #e8e4de !important; } /* Mobile Nav Overlay */ html.dark .mobile-nav-overlay { background-color: #1a1c1e !important; } html.dark .mobile-nav-links a { color: #e8e4de !important; border-bottom-color: #333 !important; } html.dark .mobile-nav-links a:hover { color: #c4a46e !important; } html.dark .overlay-header-btns a { background-color: #2a2c2e !important; color: #e8e4de !important; border-color: #444 !important; } html.dark .mobile-nav-overlay .close-btn { color: #999 !important; } html.dark .mobile-nav-overlay .close-btn:hover { color: #e8e4de !important; } /* Slideshow */ html.dark .slideshow-container { background-color: #1a1c1e !important; } /* Footer */ html.dark .site-footer { background-color: #111214 !important; } html.dark .site-footer .footer-links a { color: #9a9590 !important; } html.dark .site-footer .footer-links a:hover { color: #c4a46e !important; } html.dark .site-footer .copyright { color: #666 !important; } html.dark .mobile-nav-overlay .copyright { color: #666 !important; } /* Overlays (Policies, Contact) */ html.dark .overlay { background-color: rgba(0, 0, 0, 0.85) !important; } html.dark .overlay-content { background-color: #242628 !important; color: #e8e4de !important; } html.dark .overlay-content h1 { color: #c4a46e !important; } html.dark .overlay-content h2 { color: #c4a46e !important; } html.dark .overlay-content h3 { color: #6b8a60 !important; } html.dark .overlay-content p { color: #c4bfb5 !important; } html.dark .overlay-content a { color: #c4a46e !important; } html.dark .overlay-content hr { border-color: #444 !important; } html.dark .overlay-content .close-btn { color: #999 !important; } html.dark .overlay-content .close-btn:hover { color: #e8e4de !important; } /* Policy Nav Buttons */ html.dark .policies-nav .policy-btn { background-color: #2a2c2e !important; color: #c4bfb5 !important; border-color: #444 !important; } html.dark .policies-nav .policy-btn.active, html.dark .policies-nav .policy-btn:hover { background-color: #6b8a60 !important; color: #ffffff !important; } /* Contact Grid */ html.dark .contact-grid .contact-section h2 { color: #c4a46e !important; } html.dark .contact-grid .contact-section p { color: #c4bfb5 !important; } html.dark .contact-grid .contact-section a { color: #c4a46e !important; } /* ============================================ INNER PAGES — apply.css overrides ============================================ */ /* Page Header */ html.dark .page-header { background-color: #1a1c1e !important; } html.dark .page-header h1 { color: #e8e4de !important; } /* Confidentiality Notice */ html.dark .confidentiality-notice { background-color: #1a1c1e !important; border-bottom-color: #333 !important; } html.dark .confidentiality-notice p { color: #888 !important; } /* Form Wrapper */ html.dark .form-wrapper { background-color: #242628 !important; border-color: #3a3c3e !important; } /* Content Wrapper (membership, history, prize) */ html.dark .content-wrapper { background-color: #242628 !important; border-color: #3a3c3e !important; } /* Main Form Title */ html.dark .main-form-title { color: #c4a46e !important; background-color: #242628 !important; border-bottom-color: #3a3c3e !important; } /* Section Titles */ html.dark .section-title, html.dark .content-body h2.section-title { color: #6b8a60 !important; border-bottom-color: #444 !important; } /* Sub-headers */ html.dark .section-subtitle, html.dark .content-body h3 { color: #c4a46e !important; } /* Body Text */ html.dark .form-content p, html.dark .form-content li, html.dark .content-body p, html.dark .content-body li { color: #c4bfb5 !important; } /* Form Inputs */ html.dark input[type="text"], html.dark input[type="tel"], html.dark input[type="email"], html.dark input[type="password"], html.dark input[type="number"], html.dark select, html.dark textarea { background-color: #2e3032 !important; border-color: #444 !important; color: #e8e4de !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: #777 !important; } html.dark select:invalid { color: #777 !important; } /* Form Labels */ html.dark .form-group label { color: #c4bfb5 !important; } /* Buttons */ html.dark .next-button { background-color: #6b8a60 !important; border-color: #6b8a60 !important; color: #ffffff !important; } html.dark .next-button:hover:not(:disabled) { background-color: #7da070 !important; border-color: #7da070 !important; } html.dark .back-button { color: #6b8a60 !important; border-color: #6b8a60 !important; } html.dark .back-button:hover { background-color: #2a2c2e !important; } /* Checkboxes */ html.dark .checkbox-group input[type="checkbox"], html.dark .interest-item input[type="checkbox"], html.dark .assistance-checkbox-group input[type="checkbox"], html.dark .disclaimer-group input[type="checkbox"] { accent-color: #6b8a60 !important; } /* Form Footer */ html.dark .form-footer p { color: #888 !important; } html.dark .home-link { color: #c4a46e !important; } html.dark .assistance { color: #c4bfb5 !important; } /* Gatekeeper Overlay */ html.dark #gatekeeper-overlay { background-color: #1a1c1e !important; } html.dark .gatekeeper-content { background-color: #1a1c1e !important; } html.dark .gatekeeper-title { color: #6b8a60 !important; } html.dark .gatekeeper-message { color: #c4bfb5 !important; } html.dark .gatekeeper-home-link { color: #c4a46e !important; } html.dark .gatekeeper-input-group { border-top-color: #444 !important; } html.dark .gatekeeper-small-text { color: #888 !important; } html.dark #access-code-input { background-color: #2e3032 !important; color: #e8e4de !important; border-color: #444 !important; } html.dark #verify-code-btn { background-color: #c4a46e !important; color: #1a1c1e !important; } html.dark #verify-code-btn:hover { background-color: #d4b87e !important; } /* Confirmation Section */ html.dark #confirmation-section { background-color: #1a1c1e !important; } html.dark .confirmation-content h2 { color: #e8e4de !important; } html.dark .confirmation-content p { color: #c4bfb5 !important; } /* Access Code Box */ html.dark .access-code-box { background-color: #242628 !important; border-color: #c4a46e !important; } html.dark .access-code-value { color: #e8e4de !important; } html.dark .access-code-label { color: #888 !important; } /* Membership Price */ html.dark .membership-price { color: #6b8a60 !important; } html.dark .membership-price span.currency-suffix { color: #6b8a60 !important; } html.dark .membership-subtitle { color: #c4bfb5 !important; } html.dark .membership-details { color: #c4bfb5 !important; } /* Financial Assistance */ html.dark .assistance-checkbox-group { background-color: #2a2c2e !important; } html.dark .assistance-checkbox-group label { color: #e8e4de !important; } /* Disclaimer */ html.dark .disclaimer-group label { color: #c4bfb5 !important; } html.dark .disclaimer-group a { color: #6b8a60 !important; } /* Phone Login Button */ html.dark #initiate-phone-login-btn { background-color: #c4a46e !important; border-color: #c4a46e !important; color: #1a1c1e !important; } html.dark #initiate-phone-login-btn:hover { background-color: #d4b87e !important; border-color: #d4b87e !important; } /* Modal Overlay */ html.dark .modal-overlay { background-color: rgba(0, 0, 0, 0.85) !important; } html.dark .modal-content { background-color: #242628 !important; border-color: #3a3c3e !important; } html.dark .modal-close { color: #888 !important; } html.dark .modal-close:hover { color: #e8e4de !important; } html.dark .modal-body h2 { color: #6b8a60 !important; border-bottom-color: #444 !important; } html.dark .modal-body h3 { color: #c4a46e !important; } html.dark .modal-body p, html.dark .modal-body ul { color: #c4bfb5 !important; } /* Custom Scrollbar in Dark Mode */ html.dark .modal-content::-webkit-scrollbar-track { background: #2a2c2e !important; } html.dark .modal-content::-webkit-scrollbar-thumb { background: #555 !important; } html.dark .modal-content::-webkit-scrollbar-thumb:hover { background: #777 !important; } html.dark .overlay-content::-webkit-scrollbar-track { background: #2a2c2e !important; } html.dark .overlay-content::-webkit-scrollbar-thumb { background: #555 !important; } /* ============================================ HISTORY PAGE — Accordion ============================================ */ html.dark .accordion-header { background-color: #2a2c2e !important; color: #e8e4de !important; border-color: #444 !important; } html.dark .accordion-header:hover { background-color: #333 !important; } html.dark .accordion-content { background-color: #242628 !important; color: #c4bfb5 !important; border-color: #444 !important; } html.dark .accordion-content p { color: #c4bfb5 !important; } /* ============================================ DASHBOARD PAGES ============================================ */ html.dark .dashboard-header { background-color: #1a1c1e !important; border-bottom-color: #333 !important; } html.dark .dashboard-container { background-color: #1e2022 !important; } html.dark .card, html.dark .dashboard-card { background-color: #242628 !important; border-color: #3a3c3e !important; color: #e8e4de !important; } html.dark .card h2, html.dark .card h3, html.dark .dashboard-card h2, html.dark .dashboard-card h3 { color: #c4a46e !important; } html.dark .card p, html.dark .dashboard-card p { color: #c4bfb5 !important; } /* ============================================ FLATPICKR DARK MODE ============================================ */ html.dark .flatpickr-calendar { background: #242628 !important; border-color: #444 !important; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important; } html.dark .flatpickr-months .flatpickr-month { color: #6b8a60 !important; fill: #6b8a60 !important; } html.dark .flatpickr-weekdays { background: #2a2c2e !important; } html.dark span.flatpickr-weekday { color: #c4a46e !important; } html.dark .flatpickr-day { color: #e8e4de !important; } html.dark .flatpickr-day:hover { background: #333 !important; } html.dark .flatpickr-day.today { border-color: #c4a46e !important; } html.dark .flatpickr-day.selected { background: #6b8a60 !important; border-color: #6b8a60 !important; } html.dark .flatpickr-months .flatpickr-prev-month, html.dark .flatpickr-months .flatpickr-next-month { fill: #c4a46e !important; } /* ============================================ FIELD FOOTNOTES & OPTIONAL TEXT ============================================ */ html.dark .field-footnote { color: #888 !important; } html.dark .optional-text { color: #777 !important; } html.dark #code-error-msg { color: #e87474 !important; }