/* ============================================ Light Theme Overrides Activated via [data-theme="light"] on ============================================ */ /* Smooth transition when switching themes */ [data-theme="light"] *, [data-theme="light"] *::before, [data-theme="light"] *::after { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } [data-theme="light"] { /* --- Backgrounds --- */ --bg-primary: #F8FAFC; --bg-secondary: #FFFFFF; --bg-card: rgba(255, 255, 255, 0.8); --bg-glass: rgba(79, 70, 229, 0.03); /* Indigo tinted instead of purple */ --bg-glass-hover: rgba(79, 70, 229, 0.06); --bg-light-section: #F1F5F9; /* --- Text --- */ --text-primary: #0F172A; --text-secondary: #475569; --text-muted: #94A3B8; /* --- Accents are inherited --- */ /* --- Gradients --- */ --gradient-hero: linear-gradient(180deg, #F8FAFC 0%, #ECF1FE 100%); /* --- Glows (refined for light mode) --- */ --glow-blue: 0 0 30px rgba(79, 70, 229, 0.1); --glow-cyan: 0 0 30px rgba(14, 165, 233, 0.1); --glow-amber: 0 0 30px rgba(245, 158, 11, 0.1); /* --- Borders --- */ --border-subtle: rgba(15, 23, 42, 0.05); --border-glass: rgba(15, 23, 42, 0.08); --border-glow: rgba(79, 70, 229, 0.15); /* --- Shadows --- */ --shadow-card: 0 4px 20px rgba(15, 23, 42, 0.05); --shadow-elevated: 0 8px 30px rgba(15, 23, 42, 0.08); } /* --- Navbar --- */ [data-theme="light"] .navbar.scrolled { background: rgba(248, 250, 252, 0.9); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } /* --- Hero --- */ [data-theme="light"] .hero { background: var(--gradient-hero); } [data-theme="light"] .hero-glow-1 { opacity: 0.06; background: #4F46E5; } [data-theme="light"] .hero-glow-2 { opacity: 0.04; background: #6366F1; } [data-theme="light"] .hero-badge { background: rgba(79, 70, 229, 0.06); border-color: rgba(79, 70, 229, 0.15); color: #4F46E5; } /* --- Trusted bar --- */ [data-theme="light"] .trusted { background: #fff; border-color: rgba(0, 0, 0, 0.06); } [data-theme="light"] .trusted-logo { color: #64748B; } /* --- Module cards --- */ [data-theme="light"] .module-card { background: #fff; border-color: rgba(0, 0, 0, 0.06); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } [data-theme="light"] .module-card:hover { background: #fff; box-shadow: 0 8px 30px rgba(79, 70, 229, 0.1); } [data-theme="light"] .module-card .ai-tag { color: #4F46E5; background: rgba(79, 70, 229, 0.08); } [data-theme="light"] .module-card .card-features span { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.08); color: var(--text-secondary); } /* --- Predictions --- */ [data-theme="light"] .predictions { background: #fff; } [data-theme="light"] .predictions::before { background: radial-gradient(circle, rgba(79, 70, 229, 0.04) 0%, transparent 70%); } [data-theme="light"] .prediction-card { background: #F8FAFC; border-color: rgba(0, 0, 0, 0.06); } [data-theme="light"] .prediction-card .pred-label { color: #4F46E5; } [data-theme="light"] .prediction-card .typing-cursor { background: #4F46E5; } /* --- How it works --- */ [data-theme="light"] .how-it-works { background: #F8FAFC; } [data-theme="light"] .step-number { background: rgba(79, 70, 229, 0.06); border-color: rgba(79, 70, 229, 0.15); color: #4F46E5; } [data-theme="light"] .step-number::after { border-color: rgba(79, 70, 229, 0.1); } /* --- Benefits --- */ [data-theme="light"] .benefits { background: #fff; } [data-theme="light"] .benefit-card { background: #F8FAFC; border-color: rgba(0, 0, 0, 0.06); } [data-theme="light"] .benefit-card:hover { border-color: rgba(79, 70, 229, 0.3); box-shadow: 0 8px 30px rgba(79, 70, 229, 0.1); } /* --- Feature deep-dive --- */ [data-theme="light"] .deep-dive { background: #F8FAFC; } [data-theme="light"] .tab-btn { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.08); color: var(--text-secondary); } [data-theme="light"] .tab-btn:hover { background: rgba(0, 0, 0, 0.06); color: var(--text-primary); } [data-theme="light"] .tab-btn.active { background: var(--gradient-blue); color: #fff; } [data-theme="light"] .tab-feature-item { background: #fff; border-color: rgba(0, 0, 0, 0.06); } [data-theme="light"] .tab-feature-item:hover { background: #fff; box-shadow: 0 4px 15px rgba(79, 70, 229, 0.08); } [data-theme="light"] .tab-feature-item .feat-icon { background: rgba(79, 70, 229, 0.08); } [data-theme="light"] .tab-visual .mock-dashboard { background: #fff; border-color: rgba(0, 0, 0, 0.06); } [data-theme="light"] .mock-bar { background: rgba(0, 0, 0, 0.05); } [data-theme="light"] .mock-bar.bar-animate { background: linear-gradient(90deg, rgba(124,58,237,0.15) 0%, rgba(167,139,250,0.2) 50%, rgba(124,58,237,0.15) 100%); background-size: 200% 100%; } [data-theme="light"] .mock-card { background: rgba(0, 0, 0, 0.02); border-color: rgba(0, 0, 0, 0.06); } /* --- AI Dashboard --- */ [data-theme="light"] .ai-dashboard { background: #fff; } [data-theme="light"] .dashboard-preview { background: #F8FAFC; border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06); } [data-theme="light"] .dashboard-preview::before { background: linear-gradient(180deg, rgba(124,58,237,0.12) 0%, transparent 50%); } [data-theme="light"] .metric-card { background: #fff; border-color: rgba(0, 0, 0, 0.06); } [data-theme="light"] .chart-placeholder { background: #fff; border-color: rgba(0, 0, 0, 0.06); } [data-theme="light"] .ai-recommendations { background: #fff; border-color: rgba(0, 0, 0, 0.06); } /* --- Integrations --- */ [data-theme="light"] .integrations { background: #F8FAFC; } [data-theme="light"] .integration-item { background: #fff; border-color: rgba(0, 0, 0, 0.06); } [data-theme="light"] .integration-item:hover { box-shadow: 0 8px 30px rgba(79, 70, 229, 0.1); } /* --- Testimonials --- */ [data-theme="light"] .testimonials { background: #fff; } [data-theme="light"] .testimonial-card { background: #F8FAFC; border-color: rgba(0, 0, 0, 0.06); } [data-theme="light"] .testimonial-card:hover { border-color: rgba(79, 70, 229, 0.2); } /* --- Pricing --- */ [data-theme="light"] .pricing { background: #F8FAFC; } [data-theme="light"] .pricing-card { background: #fff; border-color: rgba(0, 0, 0, 0.06); } [data-theme="light"] .pricing-card:hover { border-color: rgba(79, 70, 229, 0.25); } [data-theme="light"] .pricing-card.featured { border-color: #4F46E5; box-shadow: 0 8px 30px rgba(79, 70, 229, 0.15); } [data-theme="light"] .pricing-card .plan-features li { border-color: rgba(0, 0, 0, 0.05); } /* --- Footer CTA --- */ [data-theme="light"] .footer-cta { background: var(--bg-light-section); } [data-theme="light"] .footer-cta::before { background: radial-gradient(ellipse at center, rgba(79, 70, 229, 0.06) 0%, transparent 60%); } [data-theme="light"] .cta-form input { background: #fff; border-color: rgba(0, 0, 0, 0.1); color: var(--text-primary); } [data-theme="light"] .cta-form input::placeholder { color: #94A3B8; } /* --- Footer --- */ [data-theme="light"] .footer { background: #1E293B; border-color: transparent; } [data-theme="light"] .footer .footer-brand p, [data-theme="light"] .footer .footer-column a, [data-theme="light"] .footer .footer-bottom p { color: #94A3B8; } [data-theme="light"] .footer .footer-column h4 { color: #F1F5F9; } [data-theme="light"] .footer .footer-logo { color: #F1F5F9; } [data-theme="light"] .footer .social-links a { color: #94A3B8; } [data-theme="light"] .footer .footer-bottom { border-color: rgba(255, 255, 255, 0.08); } /* --- Mobile nav --- */ [data-theme="light"] .nav-links.open { background: rgba(248, 250, 252, 0.98); border-color: rgba(0, 0, 0, 0.06); } /* --- Buttons (secondary) --- */ [data-theme="light"] .btn-secondary { border-color: rgba(0, 0, 0, 0.12); color: var(--text-primary); } [data-theme="light"] .btn-secondary:hover { background: rgba(0, 0, 0, 0.04); border-color: rgba(79, 70, 229, 0.3); } /* --- Theme Toggle Button --- */ .theme-toggle { position: fixed; bottom: 24px; right: 24px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--border-glass); background: var(--bg-glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; z-index: 9999; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); } .theme-toggle:hover { transform: scale(1.1); box-shadow: 0 6px 25px rgba(79, 70, 229, 0.3); border-color: var(--border-glow); } /* Show moon icon in dark mode, sun in light */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="light"] .theme-toggle { background: #fff; border-color: rgba(0, 0, 0, 0.1); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); } [data-theme="light"] .theme-toggle .icon-sun { display: block; } [data-theme="light"] .theme-toggle .icon-moon { display: none; } /* Section label overrides */ [data-theme="light"] .section-label { color: #4F46E5; } [data-theme="light"] .section-label .dot { background: #4F46E5; }