/* ===================================================== FrameReveal — LIGHT THEME OVERRIDES Loaded after style.css. Only active on . ===================================================== */ body.light { /* Swap the palette: background becomes cream, text becomes near-black. */ --cream: #1A1A1F; --cream-dim: rgba(26,26,31,0.62); --cream-faint: rgba(26,26,31,0.08); --dark: #F5F2EC; /* main bg */ --dark-2: #EFEBE3; /* section bg */ --dark-3: #E9E4DA; /* featured card / window body */ --dark-4: #E2DCCE; /* window bar / stat card */ --dark-5: #D9D2C1; /* subtle surface */ --border: rgba(26,26,31,0.10); background: var(--dark); color: var(--cream); } /* --- Noise overlay: a touch stronger so the texture reads on cream --- */ body.light::before { opacity: 0.04; } /* --- NAVBAR --- */ body.light nav { background: rgba(245,242,236,0.85); border-bottom-color: var(--border); } body.light .nav-toggle span { background: var(--cream); } @media (max-width: 900px) { body.light .nav-links { background: rgba(245,242,236,0.97); border-bottom-color: var(--border); } body.light .nav-links a { color: var(--cream); border-bottom-color: var(--border); } } /* --- HERO --- */ body.light .hero-glow { background: radial-gradient(ellipse at center top, rgba(124,106,255,0.18) 0%, transparent 70%); } body.light .hero-grid { background-image: linear-gradient(rgba(26,26,31,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(26,26,31,0.05) 1px, transparent 1px); } /* --- BUTTONS --- */ body.light .btn-secondary { color: var(--cream); border-color: rgba(26,26,31,0.15); } body.light .btn-secondary:hover { color: var(--cream); border-color: rgba(26,26,31,0.30); } /* --- HERO MOCK WINDOW --- */ body.light .hero-window { box-shadow: 0 30px 80px rgba(26,26,31,0.12), 0 8px 24px rgba(26,26,31,0.06), 0 0 0 1px var(--border); } body.light .window-url { color: var(--cream-dim); } body.light .sidebar-label { color: rgba(26,26,31,0.45); } /* Gallery thumb gradients — soften to light tonal variations */ body.light .gallery-thumb::before { background: linear-gradient(135deg, #E6E0D2, #D4CEC0); } body.light .gallery-thumb:nth-child(1)::before { background: linear-gradient(135deg, #EAE4F2, #D9CFEA); } body.light .gallery-thumb:nth-child(2)::before { background: linear-gradient(135deg, #E4EADF, #CFDAC6); } body.light .gallery-thumb:nth-child(3)::before { background: linear-gradient(135deg, #EEDFDF, #E3CCCC); } body.light .gallery-thumb:nth-child(4)::before { background: linear-gradient(135deg, #E0E4EE, #CFD4E4); } body.light .gallery-thumb:nth-child(5)::before { background: linear-gradient(135deg, #EED8D8, #E3C2C2); } body.light .gallery-thumb:nth-child(6)::before { background: linear-gradient(135deg, #D9E6E6, #C4DADA); } body.light .gallery-thumb:nth-child(7)::before { background: linear-gradient(135deg, #EAE6D0, #DDD6B8); } body.light .gallery-thumb:nth-child(8)::before { background: linear-gradient(135deg, #DADAE6, #C4C4D6); } body.light .thumb-wm { color: rgba(26,26,31,0.22); } body.light .stat-lbl { color: rgba(26,26,31,0.50); } /* --- FLOW CARDS --- */ body.light .flow-card { background: linear-gradient(135deg, #EFE9DF 0%, #F5F1E8 100%); box-shadow: 0 4px 14px rgba(26,26,31,0.04); } body.light .flow-card:hover { box-shadow: 0 18px 40px rgba(124,106,255,0.10); } body.light .flow-card-text span { color: rgba(26,26,31,0.55); } body.light .flow-icon { background: linear-gradient(135deg, rgba(124,106,255,0.20) 0%, rgba(124,106,255,0.06) 100%); } body.light .flow-connector { background: linear-gradient(180deg, rgba(124,106,255,0.45) 0%, rgba(124,106,255,0.08) 100%); } body.light .flow-card--complete { background: linear-gradient(135deg, rgba(124,106,255,0.14) 0%, rgba(124,106,255,0.03) 100%); box-shadow: 0 10px 30px rgba(124,106,255,0.10); } body.light .flow-card--complete .flow-icon { background: linear-gradient(135deg, rgba(124,106,255,0.28) 0%, rgba(155,141,255,0.14) 100%); } body.light .flow-card::after { color: #5B4AD9; } /* --- PRICING --- */ body.light .plan-price-sub { color: rgba(26,26,31,0.50); } body.light .feat-x { background: rgba(26,26,31,0.05); } body.light .feat-x svg { color: rgba(26,26,31,0.30); } /* --- CTA --- */ body.light .cta-box { box-shadow: 0 30px 70px rgba(26,26,31,0.08), 0 0 0 1px var(--border); } body.light .cta-note { color: rgba(26,26,31,0.45); } /* --- FOOTER --- */ body.light .footer-page-links a { color: rgba(26,26,31,0.65); } body.light .footer-page-links a:hover { color: var(--cream); } body.light .footer-legal a { color: rgba(26,26,31,0.50); } body.light .footer-legal a:hover { color: var(--cream); } body.light .footer-copy { color: rgba(26,26,31,0.55); } /* --- FLOATING HERO PHOTOS --- */ body.light .float-photo { box-shadow: 0 10px 30px rgba(26,26,31,0.12), 0 0 0 1px rgba(26,26,31,0.06); } /* On cream bg the photos pop — tone them down slightly */ @keyframes floatPhotoInLight { from { opacity: 0; transform: translateY(30px) scale(0.85); } to { opacity: 0.75; transform: translateY(0) scale(1); } } /* --- ORBS: on light bg the purple glow can look muddy — keep subtle --- */ body.light .orb-1 { background: radial-gradient(circle, rgba(124,106,255,0.14) 0%, transparent 70%); } body.light .orb-2 { background: radial-gradient(circle, rgba(124,106,255,0.10) 0%, transparent 70%); } body.light .orb-3 { background: radial-gradient(circle, rgba(155,141,255,0.08) 0%, transparent 70%); } /* --- WINDOW SHIMMER --- */ body.light .window-shimmer { background: linear-gradient(180deg, transparent 0%, rgba(124,106,255,0.05) 50%, transparent 100%); background-size: 100% 200%; } /* --- CTA glow on light bg --- */ body.light .cta-glow { background: radial-gradient(ellipse, rgba(124,106,255,0.14) 0%, transparent 70%); } /* --- PURPLE BADGE TEXT on cream: ensure good contrast --- */ body.light .hero-eyebrow, body.light .intro-badge, body.light .toggle-save { color: #5B4AD9; /* slightly darker purple for AA on cream */ } /* The section eyebrow and italic accents look crisp on cream when slightly darker */ body.light .section-eyebrow, body.light .hero-h1 em, body.light .section-h2 em, body.light .step-num { color: #5B4AD9; } body.light .section-eyebrow::before { background: #5B4AD9; } /* --- LEGAL PAGE --- */ body.light .legal-h1 em { color: #5B4AD9; } body.light .legal-content a { color: #5B4AD9; border-bottom-color: rgba(91,74,217,0.3); } body.light .legal-content a:hover { color: #4938B8; border-color: #4938B8; } body.light .legal-content li::before { background: #5B4AD9; } body.light .legal-content blockquote { background: rgba(124,106,255,0.10); border-left-color: #5B4AD9; } body.light .legal-content blockquote strong { color: #5B4AD9; } body.light .legal-table-wrap { border-color: var(--border); } body.light .legal-table thead th { background: var(--dark-3); color: var(--cream); } body.light .legal-table tbody tr + tr td { border-top-color: var(--border); } body.light .legal-content code, body.light .legal-table code { background: rgba(124,106,255,0.10); color: #5B4AD9; border-color: rgba(124,106,255,0.25); } body.light .feature-icon svg, body.light .feat-check svg { color: #5B4AD9; } body.light .faq-question:hover { color: #5B4AD9; } body.light .faq-item.open .faq-icon { color: #5B4AD9; } /* --- PRICING featured card: subtle purple top bar keeps pop --- */ body.light .pricing-card.featured { background: #EEE9F5; border-color: rgba(124,106,255,0.35); } /* --- Feature card hover: subtle lift instead of dark --- */ body.light .feature-card:hover { background: #EAE4D9; }