/* ============================================ THEME — Light / Dark Toggle Automation AI ============================================ */ /* ── Smooth transitions on theme switch ── */ html.theme-ready, html.theme-ready *, html.theme-ready *::before, html.theme-ready *::after { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease !important; } /* ══════════════════════════════════════════ LIGHT MODE — Token overrides Applied when ══════════════════════════════════════════ */ [data-theme="light"] { /* Backgrounds */ --color-bg-primary: #f6f6fc; --color-bg-secondary: #ededf8; --color-bg-surface: #ffffff; --color-bg-card: rgba(255, 255, 255, 0.92); --color-bg-border: rgba(15, 15, 26, 0.08); --color-bg-border-hover: rgba(124, 58, 237, 0.35); /* Text — WCAG AA+ contrast on #f6f6fc */ --color-text-primary: #0f0f1a; /* ~17:1 */ --color-text-secondary: #44445e; /* ~8:1 */ --color-text-muted: #7878a0; /* ~4:1 */ /* Brand glow — softer on light bg */ --color-brand-glow: rgba(124, 58, 237, 0.18); --color-brand-glow-soft: rgba(139, 92, 246, 0.10); /* Gradients */ --gradient-brand: linear-gradient(135deg, #3730a3 0%, #7c3aed 50%, #8b5cf6 100%); --gradient-orb: radial-gradient(ellipse at center, rgba(124,58,237,0.10) 0%, rgba(76,29,149,0.04) 40%, transparent 70%); --gradient-hero: radial-gradient(ellipse 80% 50% at 50% 60%, rgba(124,58,237,0.07) 0%, transparent 70%); --gradient-section: radial-gradient(ellipse 60% 40% at 50% 50%, rgba(109,40,217,0.05) 0%, transparent 65%); /* Shadows */ --shadow-card: 0 2px 8px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.05); --shadow-glow: 0 0 40px rgba(124,58,237,0.12); --shadow-glow-sm: 0 0 20px rgba(124,58,237,0.08); --shadow-btn: 0 4px 20px rgba(124,58,237,0.30); } /* ══════════════════════════════════════════ LIGHT MODE — Global overrides ══════════════════════════════════════════ */ [data-theme="light"] .noise-overlay { opacity: 0.010; } [data-theme="light"] .orb { opacity: 0.22; } [data-theme="light"] .orb--hero { filter: blur(120px); opacity: 0.30; } [data-theme="light"] .divider-glow { background: linear-gradient(90deg, transparent, rgba(124,58,237,0.18), transparent); } /* ══════════════════════════════════════════ LIGHT MODE — Components ══════════════════════════════════════════ */ /* Cards */ [data-theme="light"] .card { background: #ffffff; border-color: rgba(0,0,0,0.07); box-shadow: var(--shadow-card); backdrop-filter: none; } [data-theme="light"] .card:hover { border-color: rgba(124,58,237,0.22); box-shadow: 0 8px 32px rgba(124,58,237,0.10), 0 2px 8px rgba(0,0,0,0.06); } [data-theme="light"] .card::before { background: linear-gradient(135deg, rgba(124,58,237,0.03) 0%, transparent 60%); } /* Card icon */ [data-theme="light"] .card-icon { background: linear-gradient(135deg, rgba(124,58,237,0.10), rgba(139,92,246,0.06)); border-color: rgba(124,58,237,0.15); } /* Buttons */ [data-theme="light"] .btn-ghost { background: #ffffff; border-color: rgba(0,0,0,0.12); color: var(--color-text-primary); } [data-theme="light"] .btn-ghost:hover { background: rgba(124,58,237,0.05); border-color: rgba(124,58,237,0.28); color: var(--color-brand-500); } /* Badge */ [data-theme="light"] .badge { background: rgba(124,58,237,0.06); border-color: rgba(124,58,237,0.18); } /* Tag */ [data-theme="light"] .tag { background: #eeeef8; border-color: rgba(0,0,0,0.09); color: var(--color-text-secondary); } /* Pricing featured */ [data-theme="light"] .pricing-card.featured { background: linear-gradient(135deg, rgba(124,58,237,0.05) 0%, rgba(139,92,246,0.02) 100%); border-color: rgba(139,92,246,0.28); box-shadow: 0 8px 40px rgba(124,58,237,0.12); } /* FAQ */ [data-theme="light"] .faq-item { border-color: rgba(0,0,0,0.08); } [data-theme="light"] .faq-icon { border-color: rgba(0,0,0,0.1); } /* Stars */ [data-theme="light"] .stars { color: #d97706; } /* ══════════════════════════════════════════ LOGO — Dark / Light switching ══════════════════════════════════════════ */ /* Dark mode (default): show dark logo, hide light logo */ .logo-img--light { display: none; } .logo-img--dark { display: block; } /* Light mode: swap */ [data-theme="light"] .logo-img--dark { display: none; } [data-theme="light"] .logo-img--light { display: block; } /* ══════════════════════════════════════════ LIGHT MODE — Navbar ══════════════════════════════════════════ */ [data-theme="light"] .navbar.scrolled { background: rgba(246, 246, 252, 0.92); border-bottom-color: rgba(0,0,0,0.07); } [data-theme="light"] .nav-link:hover { background: rgba(0,0,0,0.05); color: var(--color-text-primary); } [data-theme="light"] .logo-mark { filter: drop-shadow(0 0 6px rgba(124,58,237,0.18)); } [data-theme="light"] .navbar-logo:hover .logo-mark { filter: drop-shadow(0 0 10px rgba(124,58,237,0.30)); } [data-theme="light"] .hamburger span { background: var(--color-text-secondary); } [data-theme="light"] .mobile-menu { background: rgba(246,246,252,0.98); border-bottom-color: rgba(0,0,0,0.07); } /* ══════════════════════════════════════════ LIGHT MODE — Hero ══════════════════════════════════════════ */ [data-theme="light"] .hero-bg { background: radial-gradient(ellipse 80% 60% at 50% 70%, rgba(124,58,237,0.07) 0%, transparent 65%), radial-gradient(ellipse 60% 40% at 30% 20%, rgba(109,40,217,0.04) 0%, transparent 60%); } [data-theme="light"] .hero-grid { background-image: linear-gradient(rgba(124,58,237,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(124,58,237,0.07) 1px, transparent 1px); } [data-theme="light"] .hero-orb { opacity: 0.45; box-shadow: 0 0 40px rgba(124,58,237,0.25), 0 0 80px rgba(124,58,237,0.10), inset 0 0 30px rgba(167,139,250,0.10); } [data-theme="light"] .social-proof-avatars .avatar { border-color: var(--color-bg-primary); } /* ══════════════════════════════════════════ LIGHT MODE — How It Works ══════════════════════════════════════════ */ [data-theme="light"] .step-number { background: #ffffff; border-color: rgba(0,0,0,0.09); box-shadow: 0 2px 8px rgba(0,0,0,0.06); } [data-theme="light"] .step-item:hover .step-number { background: rgba(124,58,237,0.07); border-color: rgba(124,58,237,0.25); box-shadow: 0 4px 16px rgba(124,58,237,0.12); } /* ══════════════════════════════════════════ LIGHT MODE — Feature Mockups ══════════════════════════════════════════ */ [data-theme="light"] .feature-mockup { background: #f0f0f8; border-color: rgba(0,0,0,0.07); box-shadow: 0 4px 24px rgba(0,0,0,0.06); } [data-theme="light"] .feature-mockup::before { background: linear-gradient(90deg, transparent, rgba(124,58,237,0.25), transparent); } /* Workflow mockup lines */ [data-theme="light"] .mockup-line { background: rgba(0,0,0,0.07); } [data-theme="light"] .mockup-line.accent { background: rgba(124,58,237,0.18); } /* Chat bubbles */ [data-theme="light"] .chat-bubble.user { background: rgba(124,58,237,0.10); border-color: rgba(124,58,237,0.15); color: var(--color-text-secondary); } [data-theme="light"] .chat-bubble.ai { background: #ffffff; border-color: rgba(0,0,0,0.08); color: var(--color-text-secondary); } [data-theme="light"] .chat-typing { background: #ffffff; border-color: rgba(0,0,0,0.08); } /* Chart bars */ [data-theme="light"] .chart-bar { background: rgba(124,58,237,0.12); } /* Content tiles */ [data-theme="light"] .content-tile { background: #ffffff; border-color: rgba(0,0,0,0.07); } [data-theme="light"] .content-tile-header { background: rgba(0,0,0,0.08); } [data-theme="light"] .content-tile-line { background: rgba(0,0,0,0.05); } /* ══════════════════════════════════════════ LIGHT MODE — Stats ══════════════════════════════════════════ */ [data-theme="light"] .stats-grid { background: rgba(0,0,0,0.07); border-color: rgba(0,0,0,0.07); } [data-theme="light"] .stats-grid .stat-card { background: #ffffff; } /* ══════════════════════════════════════════ LIGHT MODE — CTA Banner ══════════════════════════════════════════ */ [data-theme="light"] .cta-orb { background: radial-gradient(ellipse at center, rgba(124,58,237,0.18) 0%, rgba(109,40,217,0.07) 40%, transparent 70%); } /* ══════════════════════════════════════════ LIGHT MODE — Footer ══════════════════════════════════════════ */ [data-theme="light"] .footer { background: var(--color-bg-secondary); border-top-color: rgba(0,0,0,0.08); } [data-theme="light"] .footer-bottom { border-top-color: rgba(0,0,0,0.08); } [data-theme="light"] .social-link { background: #ffffff; border-color: rgba(0,0,0,0.09); } [data-theme="light"] .social-link:hover { background: rgba(124,58,237,0.06); border-color: rgba(124,58,237,0.25); } /* ══════════════════════════════════════════ THEME TOGGLE BUTTON ══════════════════════════════════════════ */ .theme-toggle { width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--color-bg-card); border: 1px solid var(--color-bg-border); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); transition: all var(--transition-base); flex-shrink: 0; } .theme-toggle:hover { border-color: var(--color-bg-border-hover); color: var(--color-brand-300); background: rgba(124,58,237,0.08); } .theme-toggle:active { transform: scale(0.92); } /* Icon visibility */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="light"] .theme-toggle .icon-sun { display: block; } [data-theme="light"] .theme-toggle .icon-moon { display: none; } [data-theme="light"] .theme-toggle { background: #ffffff; border-color: rgba(0,0,0,0.10); color: #7878a0; } [data-theme="light"] .theme-toggle:hover { background: rgba(124,58,237,0.06); border-color: rgba(124,58,237,0.25); color: var(--color-brand-500); }