/* ---- LIGHT MODE OVERRIDES ---- */ /* Activated by [data-theme="light"] on . */ [data-theme="light"] { --bg-primary: #FFFBE8; --bg-secondary: #FFF8DC; --bg-card: #FFFFFF; --bg-card-hover: #FFFBE8; --border: #E8E2DC; --border-light: #D4CDC5; --text-primary: #2D2A26; --text-secondary: #6B6560; --text-muted: #9E9590; --accent: #E8634A; --accent-light: #EF7A5C; --accent-glow: rgba(232, 99, 74, 0.1); --accent-soft: #F9D4CB; --featured-border: #E8634A; --accent-rgb: 232, 99, 74; } /* Header — clean white with permanent shadow */ [data-theme="light"] header { background: rgba(255, 255, 255, 0.9); border-bottom-color: transparent; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06); } /* Hero — inverted (dark) style in light mode */ [data-theme="light"] .hero { background: #1A1816; color: #F0EBE5; } [data-theme="light"] .hero h1 { color: #2D2A26; } [data-theme="light"] .hero-subtitle { color: #ADA59C; } [data-theme="light"] .hero-note { color: #7A7269; } [data-theme="light"] .hero .badge { background: rgba(239, 122, 92, 0.15); border-color: rgba(239, 122, 92, 0.25); color: #EF7A5C; } [data-theme="light"] .hero .badge-highlight { background: rgba(239, 122, 92, 0.15); border-color: rgba(239, 122, 92, 0.25); color: #EF7A5C; } [data-theme="light"] .hero .btn-primary { box-shadow: 0 4px 20px rgba(239, 122, 92, 0.3); } /* Demo card in light mode — warm yellow bg with dark text, matching light theme */ [data-theme="light"] .demo-mockup { background: #FFFBE8; border-color: #E8E2DC; box-shadow: 0 8px 32px rgba(0,0,0,0.25); } [data-theme="light"] .demo-mockup-header { border-bottom-color: #E8E2DC; color: #6B6560; } [data-theme="light"] .demo-mockup-header .mock-dots span { background: #D4CDC5; } [data-theme="light"] .demo-mockup-header .mock-app-name { color: #9E9590; } [data-theme="light"] .demo-mockup-header .mock-field { color: #9E9590; } [data-theme="light"] .demo-mockup-header .mock-field strong { color: #6B6560; } [data-theme="light"] .demo-mockup-header .mock-subject, [data-theme="light"] .demo-mockup-header .mock-channel { color: #2D2A26; } [data-theme="light"] .demo-mockup-body { color: #2D2A26; } [data-theme="light"] .demo-pill { background: #FFFBE8; border-color: #E8E2DC; color: #2D2A26; box-shadow: 0 4px 20px rgba(0,0,0,0.2); } [data-theme="light"] .demo-pill-label { color: #6B6560; } [data-theme="light"] .demo-pill.done .demo-pill-label { color: #2D2A26; } [data-theme="light"] .hero::before, [data-theme="light"] .hero::after { display: none; } /* Card shadows — softer in light */ [data-theme="light"] .price-card:hover { box-shadow: 0 12px 36px rgba(0, 0, 0, 0.06); } [data-theme="light"] .btn-primary { box-shadow: 0 2px 12px rgba(232, 99, 74, 0.2); } [data-theme="light"] .btn-primary:hover { box-shadow: 0 8px 30px rgba(232, 99, 74, 0.25); } /* Header scroll shadow */ [data-theme="light"] header.scrolled { box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06); border-bottom-color: transparent; } /* Floating download CTA */ [data-theme="light"] .floating-download a { box-shadow: 0 4px 24px rgba(232, 99, 74, 0.25), 0 0 0 1px rgba(232, 99, 74, 0.15); } [data-theme="light"] .floating-download a:hover { box-shadow: 0 8px 32px rgba(232, 99, 74, 0.3), 0 0 0 1px rgba(232, 99, 74, 0.2); } /* Toast */ [data-theme="light"] .toast { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); } /* Modal overlay */ [data-theme="light"] .modal-overlay { background: rgba(45, 42, 38, 0.3); } [data-theme="light"] .modal { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12); } /* Section divider line */ [data-theme="light"] .section-divider { background: linear-gradient(90deg, transparent 0%, var(--accent-soft) 50%, transparent 100%); } /* Trust badges */ [data-theme="light"] .trust-badge svg { opacity: 0.8; } /* Share buttons */ [data-theme="light"] .share-btn:hover { background: rgba(232, 99, 74, 0.08); } /* Section background tints — light mode color journey */ [data-theme="light"] .bg-peach { background: #FFF8DC; } [data-theme="light"] .bg-cream { background: #FFFBE8; } [data-theme="light"] .bg-mint { background: #FAFDE8; } [data-theme="light"] .bg-teal { background: #FFFCE8; } [data-theme="light"] .bg-yellow { background: #FFF8D0; } [data-theme="light"] .bg-lavender { background: #FFFAEC; } /* Light mode colored trust badge pills */ [data-theme="light"] .trust-peach { background: #FFF0EB; border-color: #F9D4CB; } [data-theme="light"] .trust-mint { background: #EEFAF4; border-color: #C8EDD8; } [data-theme="light"] .trust-lavender { background: #F3EEFF; border-color: #D8CCF0; } [data-theme="light"] .trust-amber { background: #FFF8E8; border-color: #F0DFB0; } /* Section labels colored per section in light mode */ [data-theme="light"] .bg-peach .section-label { background: rgba(232, 99, 74, 0.08); } [data-theme="light"] .bg-mint .section-label { background: rgba(34, 197, 94, 0.08); color: #22915E; border-color: rgba(34, 197, 94, 0.2); } [data-theme="light"] .bg-yellow .section-label { background: rgba(245, 166, 35, 0.08); color: #B8860B; border-color: rgba(245, 166, 35, 0.2); } [data-theme="light"] .bg-lavender .section-label { background: rgba(139, 92, 246, 0.08); color: #7C3AED; border-color: rgba(139, 92, 246, 0.2); } /* Footer — warm dark in both modes */ [data-theme="light"] footer { background: #1A1816; border-top-color: #2A2623; } [data-theme="light"] footer, [data-theme="light"] .footer-copyright, [data-theme="light"] .footer-links a { color: #ADA59C; } [data-theme="light"] .footer-brand { color: #F0EBE5; } [data-theme="light"] .footer-brand span { color: var(--accent); } [data-theme="light"] .footer-links a:hover { color: #F0EBE5; } /* Featured pricing card gradient */ [data-theme="light"] .price-card.featured { background: linear-gradient( 180deg, rgba(232, 99, 74, 0.06) 0%, var(--bg-card) 100% ); box-shadow: 0 0 60px rgba(232, 99, 74, 0.06); } [data-theme="light"] .price-card.featured:hover { box-shadow: 0 16px 60px rgba(232, 99, 74, 0.1); } /* Private pricing card */ [data-theme="light"] .price-card.private-card { background: linear-gradient( 180deg, rgba(34, 197, 94, 0.04) 0%, var(--bg-card) 100% ); } /* Highlighted badge */ [data-theme="light"] .badge-highlight { background: rgba(232, 99, 74, 0.1); border-color: rgba(232, 99, 74, 0.2); color: var(--accent); box-shadow: none; } /* ---- THEME TOGGLE BUTTON ---- */ .theme-toggle { position: fixed; bottom: 28px; right: 28px; z-index: 999; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-card); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.15s; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15); -webkit-tap-highlight-color: transparent; } .theme-toggle:hover { border-color: var(--accent); transform: scale(1.08); box-shadow: 0 4px 24px rgba(var(--accent-rgb), 0.2); } .theme-toggle:active { transform: scale(0.95); } .theme-toggle svg { width: 20px; height: 20px; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s; } .theme-toggle .icon-sun { color: #e8c547; position: absolute; } .theme-toggle .icon-moon { color: var(--accent); position: absolute; } .theme-toggle .icon-sun { opacity: 1; transform: rotate(0deg) scale(1); } .theme-toggle .icon-moon { opacity: 0; transform: rotate(-90deg) scale(0.5); } [data-theme="light"] .theme-toggle .icon-sun { opacity: 0; transform: rotate(90deg) scale(0.5); } [data-theme="light"] .theme-toggle .icon-moon { opacity: 1; transform: rotate(0deg) scale(1); }