/* ============================================================= THEMES.CSS — Dark mode overrides Applied via ============================================================= */ /* ── Dark Mode Token Overrides ── */ html.dark { --c-bg: #1C1E1A; --c-surface: #252822; --c-surface-2: #2E3129; --c-border: #383B32; --c-primary: #8BB592; --c-primary-dk: #6B9572; --c-secondary: #C4A97E; --c-accent: #6A8E78; --c-text: #E8E2D8; --c-text-2: #B0A898; --c-muted: #7A7268; --c-overlay: rgba(15, 16, 14, 0.6); --shadow-xs: 0 1px 3px rgba(0,0,0,0.25); --shadow-sm: 0 2px 8px rgba(0,0,0,0.30); --shadow-md: 0 4px 20px rgba(0,0,0,0.35); --shadow-lg: 0 8px 40px rgba(0,0,0,0.40); } /* ── Header dark ── */ html.dark .site-header { background-color: rgba(28, 30, 26, 0.92); } html.dark .site-header.header--scrolled { background-color: rgba(28, 30, 26, 0.97); } /* ── Mobile nav dark ── */ html.dark .mobile-nav { background: var(--c-bg); } /* ── Form controls ── */ html.dark .form-control { background: var(--c-surface-2); border-color: var(--c-border); color: var(--c-text); } html.dark .form-control:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(139,181,146,0.20); } /* ── Orbs shift in dark mode ── */ html.dark .orb--1 { background: radial-gradient(circle, rgba(139,181,146,0.10) 0%, transparent 70%); } html.dark .orb--2 { background: radial-gradient(circle, rgba(106,142,120,0.12) 0%, transparent 70%); } /* ── Dark mode toggle icon visibility ── */ .icon-sun { display: none; } .icon-moon { display: block; } html.dark .icon-sun { display: block; } html.dark .icon-moon { display: none; } /* ── CTA band dark adjustment ── */ html.dark .cta-band { background: linear-gradient(135deg, #4F7055 0%, #3A5240 100%); } /* ── Illustration dark ── */ html.dark .illustration { background: linear-gradient(145deg, #3A5C44 0%, #2E4A37 100%); } /* ── Breathing circle dark ── */ html.dark .breathing-circle { background: radial-gradient(circle, rgba(139,181,146,0.20) 0%, rgba(139,181,146,0.04) 100%); border-color: rgba(139,181,146,0.25); } /* ── Scrollbar dark ── */ html.dark ::-webkit-scrollbar-track { background: var(--c-surface); } html.dark ::-webkit-scrollbar-thumb { background: var(--c-accent); } /* ── Selection dark ── */ html.dark ::selection { background: var(--c-accent); color: var(--c-text); } /* ── Leaves opacity adjustment ── */ html.dark .leaf { opacity: 0.10; } /* ── Hero gradient bg ── */ html.dark .hero { background: linear-gradient(160deg, #1C1E1A 0%, #1E2319 60%, #1A1E1C 100%); } /* ── Transition smooth when switching themes ── */ html, body, .site-header, .mobile-nav, .card, .service-card, .price-card, .btn, .form-control, .accordion__trigger, .accordion__panel { transition-property: background-color, border-color, color; transition-duration: 350ms; transition-timing-function: ease; } /* ── Ensure animations override ── */ html.dark [data-reveal], html.dark [data-reveal-stagger] > * { /* preserve reveal animation, just update colors */ }