/* ========================================================================== Hobby Doser — Dark Mode Applied via [data-theme="dark"] on ========================================================================== */ [data-theme="dark"] { --bg-primary: #0b0e14; --bg-secondary: #11151e; --bg-elevated: rgba(22, 27, 38, 0.82); --bg-glass: rgba(22, 27, 38, 0.55); --bg-glass-strong: rgba(17, 21, 30, 0.88); --bg-muted: #1a2030; --text-primary: #f2f4fa; --text-secondary: #a8b0c4; --text-muted: #6f7890; --text-inverse: #ffffff; --border-subtle: rgba(255, 255, 255, 0.08); --border-glass: rgba(255, 255, 255, 0.12); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.4); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55); --shadow-glow: 0 0 50px rgba(94, 92, 230, 0.35); --shadow-teal-glow: 0 0 40px rgba(0, 210, 255, 0.28); --gradient-brand-soft: linear-gradient(135deg, rgba(94, 92, 230, 0.22), rgba(0, 210, 255, 0.18)); /* Active nav / accent text — matches legal TOC active (cyan) */ --color-active: #00d2ff; --color-active-hover: #7de8ff; } [data-theme="dark"] body { background-image: radial-gradient(ellipse 80% 50% at 10% -10%, rgba(94, 92, 230, 0.22), transparent), radial-gradient(ellipse 60% 40% at 95% 8%, rgba(0, 210, 255, 0.14), transparent), radial-gradient(ellipse 50% 30% at 50% 100%, rgba(245, 197, 24, 0.06), transparent); } [data-theme="dark"] body[data-page="home"] { background-image: none; } [data-theme="dark"] body[data-page="home"]::before { background: radial-gradient(ellipse 70% 55% at 15% 10%, rgba(94, 92, 230, 0.38), transparent 55%), radial-gradient(ellipse 60% 50% at 85% 20%, rgba(0, 210, 255, 0.28), transparent 50%), radial-gradient(ellipse 55% 45% at 50% 85%, rgba(124, 92, 252, 0.22), transparent 55%), radial-gradient(ellipse 40% 35% at 70% 60%, rgba(245, 197, 24, 0.12), transparent 50%), linear-gradient( 125deg, #0b0e14 0%, #12162a 22%, #0e1a24 45%, #16122a 68%, #0b0e14 100% ); background-size: 200% 200%, 200% 200%, 180% 180%, 160% 160%, 300% 300%; animation: landing-bg-shift 18s ease-in-out infinite; } [data-theme="dark"] .site-header.is-scrolled::before { background: rgba(11, 14, 20, 0.78); border-bottom-color: var(--border-subtle); } [data-theme="dark"] .nav__drawer { background: rgba(11, 14, 20, 0.95); } [data-theme="dark"] .nav__drawer .nav__link:hover { background: var(--bg-muted); } [data-theme="dark"] .btn--secondary { background: rgba(255, 255, 255, 0.06); color: var(--text-primary); border-color: var(--border-subtle); } [data-theme="dark"] .btn--secondary:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--brand-teal); } [data-theme="dark"] .btn--ghost { border-color: var(--border-subtle); color: var(--text-primary); } [data-theme="dark"] .glass, [data-theme="dark"] .feature-card, [data-theme="dark"] .step__content, [data-theme="dark"] .testimonial, [data-theme="dark"] .stat-card, [data-theme="dark"] .faq-item, [data-theme="dark"] .legal-section, [data-theme="dark"] .legal-toc { background: var(--bg-glass); border-color: var(--border-subtle); } [data-theme="dark"] .feature-card__icon { border-color: rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); } [data-theme="dark"] .feature-card:hover, [data-theme="dark"] .step:hover .step__content, [data-theme="dark"] .hobby-chip:hover { border-color: rgba(0, 210, 255, 0.4); } [data-theme="dark"] .step { background: transparent; border: none; box-shadow: none; } [data-theme="dark"] .hobby-chip { background: rgba(255, 255, 255, 0.05); } [data-theme="dark"] .stats { background: var(--bg-secondary); } [data-theme="dark"] .site-footer { background: var(--bg-secondary); } [data-theme="dark"] .phone-mockup { box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.1), var(--shadow-glow); } [data-theme="dark"] .theme-toggle { background: rgba(255, 255, 255, 0.06); color: var(--brand-gold); } [data-theme="dark"] .theme-toggle:hover { color: var(--brand-gold); border-color: var(--brand-gold); } [data-theme="dark"] .lightbox { background: rgba(5, 7, 12, 0.92); } [data-theme="dark"] .faq-item.is-open { border-color: rgba(0, 210, 255, 0.35); } [data-theme="dark"] .legal-toc__link:hover, [data-theme="dark"] .legal-toc__link.is-active { color: var(--color-active); border-left-color: var(--color-active); } /* Smooth theme transitions */ html, body, .site-header, .glass, .btn, .nav__link, .feature-card, .step__content, .hobby-chip, .faq-item, .stat-card, .testimonial, .site-footer, .legal-section { transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base); }