/* ========================================================================== LifeCircle — Dark Mode Extension Stylesheet 100% ADDITIVE. Nothing here modifies, removes, or overrides existing selectors when ".dark" is absent from . Loaded last so its rules win only inside the .dark scope. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Smooth global transition for the theme switch itself. Scoped broadly but harmless: only animates color-related properties and only actually changes anything once .dark toggles the variables below. -------------------------------------------------------------------------- */ html, body, .header-nav, .header-nav.scrolled, .mobile-nav-drawer, .card-glass, .floating-ui-card, .pricing-card, .faq-item, .dynamic-toast, .timeline-card, .footer, .form-field input, .form-field textarea, .form-field select, .contact-info-card, .team-card, .stat-chip, .legal-toc, .btn, .btn-secondary, .nav-link { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; } /* -------------------------------------------------------------------------- 2. Root variable overrides — extends /assets/css/variables.css Every existing component already consumes these variables, so most of the theme (cards, buttons, nav, footer, forms, badges, text) inherits dark styling automatically without needing its own override rule. -------------------------------------------------------------------------- */ :root.dark, html.dark { color-scheme: dark; /* Backgrounds */ --bg-primary: #0F172A; --bg-secondary: #1E293B; --bg-tertiary: #1F2937; /* Brand */ --primary: #3B82F6; --primary-hover: #2563EB; --primary-rgb: 59, 130, 246; --secondary: #6D5DF6; --secondary-hover: #5A4CE0; --secondary-rgb: 109, 93, 246; --accent: #00B8FF; --accent-rgb: 0, 184, 255; /* Status */ --success: #22C55E; --success-rgb: 34, 197, 94; --warning: #F59E0B; --warning-rgb: 245, 158, 11; --danger: #EF4444; --danger-rgb: 239, 68, 68; /* Text */ --text-main: #F8FAFC; --text-muted: #94A3B8; /* Borders */ --border-light: #334155; --border-glass: rgba(51, 65, 85, 0.5); /* Glassmorphism (dark) */ --glass-bg: rgba(30, 41, 59, 0.6); --glass-bg-hover: rgba(30, 41, 59, 0.8); --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.35); --glass-border: 1px solid rgba(148, 163, 184, 0.12); /* Shadows — deeper for dark surfaces */ --shadow-sm: 0 2px 8px -1px rgba(0, 0, 0, 0.35), 0 1px 3px -1px rgba(0, 0, 0, 0.25); --shadow-md: 0 12px 24px -4px rgba(0, 0, 0, 0.4), 0 4px 12px -2px rgba(0, 0, 0, 0.25); --shadow-lg: 0 24px 48px -8px rgba(0, 0, 0, 0.5), 0 8px 24px -4px rgba(0, 0, 0, 0.3); --shadow-premium: 0 40px 80px -15px rgba(59, 130, 246, 0.15), 0 10px 30px -5px rgba(109, 93, 246, 0.08); /* Custom extension tokens (not in original variables.css, additive only) */ --card-bg: #1F2937; --input-bg: #111827; --input-border: #374151; --header-footer-bg: #111827; } /* -------------------------------------------------------------------------- 3. Component overrides for hardcoded (non-variable) colors. These selectors used literal hex/rgba values in the base stylesheets, so variable inheritance alone won't reach them. Overridden here only inside .dark scope — base files remain untouched. -------------------------------------------------------------------------- */ /* Sticky glass header */ html.dark .header-nav, html.dark .header-nav.scrolled { background: rgba(15, 23, 42, 0.75); } /* Mobile fullscreen nav drawer */ html.dark .mobile-nav-drawer { background: rgba(15, 23, 42, 0.97); } /* Floating hero UI cards (glass) */ html.dark .floating-ui-card { background: rgba(31, 41, 55, 0.85); border: 1px solid rgba(148, 163, 184, 0.15); } /* Pricing cards */ html.dark .pricing-card { background: var(--card-bg); } html.dark .pricing-card.platinum-featured { background: linear-gradient(135deg, var(--card-bg) 0%, var(--bg-secondary) 100%); } /* FAQ accordion items */ html.dark .faq-item { background: var(--card-bg); } /* Timeline story cards */ html.dark .timeline-card { background: var(--card-bg); } /* Toast notifications */ html.dark .dynamic-toast { background: rgba(31, 41, 55, 0.92); } /* Header/Footer explicit tokens applied on top of variable-driven footer */ html.dark .footer { background: var(--header-footer-bg); } /* Contact / form fields — explicit input tokens layered over variables */ html.dark .form-field input, html.dark .form-field textarea, html.dark .form-field select { background: var(--input-bg); border-color: var(--input-border); color: var(--text-main); } html.dark .form-field input::placeholder, html.dark .form-field textarea::placeholder { color: var(--text-muted); } html.dark .form-field input:focus, html.dark .form-field textarea:focus, html.dark .form-field select:focus { background: var(--input-bg); border-color: var(--primary); } /* Buttons — keep contrast correct on primary + secondary */ html.dark .btn-primary { color: #F8FAFC; } html.dark .btn-secondary { background: var(--bg-tertiary); color: var(--text-main); border-color: var(--border-light); } html.dark .btn-secondary:hover { background: var(--border-light); } /* Legal / TOC / team / stat components layered above base variables */ html.dark .legal-toc, html.dark .contact-info-card, html.dark .team-card, html.dark .stat-chip { background: var(--card-bg); border-color: var(--border-light); } /* Scrollbar (variable driven already, restated for clarity/dark contrast) */ html.dark ::-webkit-scrollbar-track { background: var(--bg-secondary); } html.dark ::-webkit-scrollbar-thumb { background: var(--border-light); border: 2px solid var(--bg-secondary); } html.dark ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* -------------------------------------------------------------------------- 4. Preserve imagery exactly as-is in dark mode (explicit, defensive). -------------------------------------------------------------------------- */ html.dark img, html.dark svg image, html.dark .logo img, html.dark picture { filter: none; } /* Illustrative phone/app mockups intentionally keep their own light "app screen" look in both themes — they represent the product UI, not the site chrome, so they are left untouched here on purpose. */ /* ========================================================================== 5. Dark Mode Toggle Switch — header component ========================================================================== */ .theme-toggle-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: 0.5rem; padding: 0; border: 1px solid var(--border-light); border-radius: 9999px; background: var(--bg-secondary); color: var(--text-main); cursor: pointer; overflow: hidden; flex-shrink: 0; transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.2s ease; } .theme-toggle-btn:hover { transform: translateY(-1px); border-color: var(--primary); } .theme-toggle-btn:active { transform: translateY(0) scale(0.94); } .theme-toggle-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .theme-toggle-btn .theme-toggle-icon { position: absolute; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease; } .theme-toggle-btn .theme-toggle-icon svg { width: 20px; height: 20px; stroke: currentColor; } /* Sun icon — visible in light mode */ .theme-toggle-btn .icon-sun { opacity: 1; transform: rotate(0deg) scale(1); } .theme-toggle-btn .icon-moon { opacity: 0; transform: rotate(-90deg) scale(0.5); } html.dark .theme-toggle-btn .icon-sun { opacity: 0; transform: rotate(90deg) scale(0.5); } html.dark .theme-toggle-btn .icon-moon { opacity: 1; transform: rotate(0deg) scale(1); } html.dark .theme-toggle-btn { background: var(--bg-tertiary); border-color: var(--border-light); color: #F8FAFC; } html.dark .download-buttons .app-btn span { color :var(--primary); } html.dark .download-buttons .app-btn:hover span { color :var(--white); } html.dark .trusted-section .logo-item { color: var(--white); } /* Mobile drawer variant spacing (drawer is a flex column, centered) */ .mobile-nav-drawer .theme-toggle-btn { margin-left: 0; } @media (max-width: 768px) { .theme-toggle-btn { width: 40px; height: 40px; } } html.dark #intro-features .feature-card:hover p { color: var(--white); } html.dark .card-glass { box-shadow: var(--shadow-lg); background: var(--glass-bg); } html.dark .map-wrapper { background: #1d283a; } html.dark .card-glass:hover p { color:var(--white); } html.dark #our-story p { color:var(--white); } html.dark .stat-chip .stat-chip-value { color:var(--white); } html.dark .stat-chip { background: var(--glass-bg); box-shadow: var(--shadow-lg); transform: translateY(-4px); border: 1px solid var(--primary); } html.dark .terms-container { box-shadow: var(--shadow-lg); background: var(--glass-bg); }