/* ============================================================= NovAI Dark Mode CSS The theme is DARK by default. This file provides LIGHT MODE overrides when data-theme="light". We use data-theme attribute (set on ) so transitions are smooth and respects user Customizer preference. ============================================================= */ /* Smooth transition when switching modes */ html { transition: background-color 0.35s ease, color 0.35s ease; } /* --------------------------------------------------------------- EXPLICIT DARK MODE VARIABLES When data-theme="dark" is set (either by PHP default or JS toggle), these variables win over any OS-preference or other cascade. This block mirrors the :root defaults in style.css, making dark mode explicit so it can never be knocked out by specificity. --------------------------------------------------------------- */ html[data-theme="dark"] { --color-bg: #0D0D1A; --color-surface: #13131F; --color-surface-2: #1A1A2E; --color-border: #252538; --color-text: #E8E8F0; --color-text-muted: #7A7A95; --color-text-faint: #42425A; --color-accent-glow: rgba(108, 99, 255, 0.22); --gradient-hero: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(108,99,255,0.40) 0%, transparent 70%); --shadow-sm: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 4px 16px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.4); --shadow-lg: 0 12px 40px rgba(0,0,0,0.7), 0 4px 12px rgba(0,0,0,0.5); --shadow-card: 0 2px 20px rgba(0,0,0,0.5); --shadow-glow: 0 0 40px rgba(108,99,255,0.25), 0 0 80px rgba(108,99,255,0.12); --gradient-surface: linear-gradient(180deg, #13131F 0%, #0D0D1A 100%); } /* --------------------------------------------------------------- Dark mode: Section rhythm — mirrors light mode proportion exactly. Card-heavy sections (cards need a surface to float on): #13131F Content/text sections (open, breathing room): #0D0D1A border-top hairline on every section = crisp seam between bands. --------------------------------------------------------------- */ /* Elevated surface — card-heavy sections where dark cards float above */ html[data-theme="dark"] .trusted-by-section, html[data-theme="dark"] .features-section, html[data-theme="dark"] .integrations-section, html[data-theme="dark"] .testimonials-section { background: #13131F; border-top: 1px solid #1E1E2E; } /* Deep base — content/text sections, open feel */ html[data-theme="dark"] .demo-section, html[data-theme="dark"] .how-section, html[data-theme="dark"] .pricing-section, html[data-theme="dark"] .faq-section { background: #0D0D1A; border-top: 1px solid #1E1E2E; } /* --------------------------------------------------------------- Light mode: Chart bar — use accent gradient so it isn't jarring bright blue on white backgrounds --------------------------------------------------------------- */ [data-theme="light"] .chart-bar.active { background: linear-gradient(180deg, rgba(108,99,255,0.6) 0%, rgba(108,99,255,0.35) 100%); } [data-theme="light"] .chart-bar { background: #D8D8EC; } body, .site-header, .feature-card, .pricing-card, .testimonial-card, .faq-item, .integration-item, .nav-menu li a, .footer-menu li a, .btn-ghost, .btn-outline, .cta-input, .newsletter-input, .theme-toggle, .social-link { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* --------------------------------------------------------------- Light mode: Hero mockup — stronger contrast on white bg --------------------------------------------------------------- */ [data-theme="light"] .site-header.scrolled { background: rgba(250, 250, 255, 0.88); border-bottom-color: #E2E2EE; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); } /* --------------------------------------------------------------- Light mode: Section rhythm Alternates between white (#FFFFFF) and soft lavender (#F3F3FA) so the eye can distinguish where one section ends and another begins. Rule: sections with dense cards/chips get the tinted bg so white cards float. Clean text/content sections get pure white to breathe. border-top on each section acts as a hairline rule — same visual principle as newspaper column dividers — giving crisp boundaries even when bg contrast alone is insufficient on low-gamma screens. --------------------------------------------------------------- */ /* Sections that get the tinted (#F3F3FA) background — card-heavy sections where white cards need a surface to float on */ [data-theme="light"] .trusted-by-section, [data-theme="light"] .features-section, [data-theme="light"] .integrations-section, [data-theme="light"] .testimonials-section { background: #F3F3FA; border-top: 1px solid #E8E8F4; } /* Sections that get pure white — content/text-focused, open feel */ [data-theme="light"] .demo-section, [data-theme="light"] .how-section, [data-theme="light"] .pricing-section, [data-theme="light"] .faq-section { background: #FFFFFF; border-top: 1px solid #E8E8F4; } /* --------------------------------------------------------------- Light mode: Hero section --------------------------------------------------------------- */ [data-theme="light"] .hero-grid { background-image: linear-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.06) 1px, transparent 1px); opacity: 0.6; } [data-theme="light"] .hero-orb-1 { opacity: 0.2; } [data-theme="light"] .hero-orb-2 { opacity: 0.12; } [data-theme="light"] .hero-mockup { border: 2px solid #C8C8DE; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.08); } [data-theme="light"] .mockup-bar { background: #ECEAF8; border-bottom-color: #C8C8DE; } [data-theme="light"] .mockup-sidebar { background: #ECEAF8; border-right-color: #C8C8DE; } [data-theme="light"] .mockup-url-bar { background: #FFFFFF; border-color: #C8C8DE; } [data-theme="light"] .mockup-nav-item { background: #C8C8DE; } [data-theme="light"] .mockup-nav-item.active { background: rgba(108,99,255,0.2); border-color: rgba(108,99,255,0.4); } [data-theme="light"] .mockup-title-block { background: #C8C8DE; } [data-theme="light"] .mockup-btn-block { background: rgba(108,99,255,0.2); border-color: rgba(108,99,255,0.4); } [data-theme="light"] .mockup-stat-card { background: #ECEAF8; border-color: #C8C8DE; } [data-theme="light"] .stat-line { background: #C8C8DE; } [data-theme="light"] .stat-icon { background: rgba(108,99,255,0.2); } [data-theme="light"] .hero-badge { background: #FFFFFF; border-color: #C8C8DE; color: #5A5A6E; } [data-theme="light"] .mockup-badge { background: #FFFFFF; border-color: #C8C8DE; box-shadow: 0 2px 12px rgba(0,0,0,0.12); } /* --------------------------------------------------------------- Light mode: Trusted by --------------------------------------------------------------- */ [data-theme="light"] .logo-placeholder { color: #9A9AB0; background: #FFFFFF; border-color: #D8D8EC; } [data-theme="light"] .trusted-logo:hover .logo-placeholder { color: #5A5A6E; border-color: rgba(108,99,255,0.35); } /* --------------------------------------------------------------- Light mode: Feature cards — visible border + shadow on white bg --------------------------------------------------------------- */ [data-theme="light"] .feature-card { background: #FFFFFF; border-color: #D0D0E4; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0,0,0,0.04); } [data-theme="light"] .feature-card:hover { border-color: rgba(108, 99, 255, 0.5); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 24px rgba(108, 99, 255, 0.1); } /* --------------------------------------------------------------- Light mode: Pricing section --------------------------------------------------------------- */ [data-theme="light"] .pricing-card { background: #FFFFFF; border-color: #D0D0E4; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07); } [data-theme="light"] .pricing-card-popular { background: #FAFAFF; border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent), 0 8px 40px rgba(108, 99, 255, 0.18); } [data-theme="light"] .pricing-toggle { background: #F0F0F8; border-color: #C8C8DE; } /* --------------------------------------------------------------- Light mode: Testimonials --------------------------------------------------------------- */ [data-theme="light"] .testimonial-card { background: #FFFFFF; border-color: #D0D0E4; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07); } [data-theme="light"] .testimonial-card:hover { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); } /* --------------------------------------------------------------- Light mode: FAQ --------------------------------------------------------------- */ [data-theme="light"] .faq-item { background: #FFFFFF; border-color: #D0D0E4; } /* --------------------------------------------------------------- Light mode: Integration items — visible tiles on white bg --------------------------------------------------------------- */ [data-theme="light"] .integration-item { background: #FFFFFF; border-color: #D0D0E4; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06); } [data-theme="light"] .integration-item:hover { border-color: rgba(108,99,255,0.5); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); } [data-theme="light"] .integration-logo-placeholder { color: #5A5A6E; } /* --------------------------------------------------------------- Light mode: CTA Banner --------------------------------------------------------------- */ [data-theme="light"] .cta-banner-section { background: #F3F3FA; border-color: #D0D0E4; } [data-theme="light"] .cta-orb-1 { opacity: 0.12; } [data-theme="light"] .cta-orb-2 { opacity: 0.08; } /* --------------------------------------------------------------- Light mode: Footer --------------------------------------------------------------- */ [data-theme="light"] .site-footer { background: #FFFFFF; border-top-color: #D0D0E4; } [data-theme="light"] .footer-newsletter { border-bottom-color: #D0D0E4; } [data-theme="light"] .footer-bottom { border-top-color: #D0D0E4; } /* --------------------------------------------------------------- Light mode: Forms --------------------------------------------------------------- */ [data-theme="light"] .cta-input, [data-theme="light"] .newsletter-input { background: #FFFFFF; border-color: #C8C8DE; color: #0A0A0F; } [data-theme="light"] .cta-input::placeholder, [data-theme="light"] .newsletter-input::placeholder { color: #AAAABC; } /* --------------------------------------------------------------- Light mode: Buttons --------------------------------------------------------------- */ [data-theme="light"] .btn-ghost { background: #F3F3FA; border-color: #C8C8DE; color: #0A0A0F; } [data-theme="light"] .btn-ghost:hover { background: #E8E8F0; } [data-theme="light"] .btn-outline { border-color: #C8C8DE; color: #0A0A0F; } /* --------------------------------------------------------------- Light mode: Demo section --------------------------------------------------------------- */ [data-theme="light"] .demo-video-wrap { border: 1px solid #C8C8DE; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.14), 0 8px 24px rgba(0, 0, 0, 0.08); } [data-theme="light"] .demo-poster { background: #ECEAF8; } [data-theme="light"] .play-circle { background: rgba(108, 99, 255, 0.95); box-shadow: 0 0 40px rgba(108, 99, 255, 0.5), 0 0 80px rgba(108, 99, 255, 0.2), 0 4px 16px rgba(0,0,0,0.15); } /* --------------------------------------------------------------- System light mode preference Only activates when the element has NO data-theme attribute (i.e. JS hasn't run yet). Once JS runs, data-theme is always set. --------------------------------------------------------------- */ @media (prefers-color-scheme: light) { html:not([data-theme]) { --color-bg: #FAFAFF; --color-surface: #FFFFFF; --color-surface-2: #F3F3FA; --color-border: #E2E2EE; --color-text: #0A0A0F; --color-text-muted: #5A5A6E; --color-text-faint: #9A9AB0; --color-accent-glow: rgba(108, 99, 255, 0.15); --shadow-card: 0 2px 20px rgba(0, 0, 0, 0.08); } } /* Reduced motion preference */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }