/* ============================================================ THEME SYSTEM - Light / Dark / System toggle All pages except settings.html Strategy: - Dark is the existing design (default) - [data-theme-resolved="light"] carries shared light-mode tokens and overrides - [data-theme-resolved="dark"] keeps shared dark-mode color-scheme metadata ============================================================ */ /* ── Theme Toggle Button (injected by theme-toggle.js) ── */ .theme-toggle { background: none; border: 1px solid rgba(148, 163, 184, 0.3); color: #e5e7eb; padding: 0.35rem 0.55rem; border-radius: 0.5rem; cursor: pointer; font-size: 1.15rem; line-height: 1; display: flex; align-items: center; gap: 0.3rem; transition: all 0.2s; position: relative; } .theme-toggle:hover { background: rgba(148, 163, 184, 0.12); border-color: rgba(148, 163, 184, 0.5); } .theme-toggle:focus-visible { outline: 2px solid var(--primary, #2563eb); outline-offset: 2px; } .theme-toggle-icon { display: flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; transition: transform 0.3s ease; } .theme-toggle-label { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; opacity: 0.7; } /* ── Tooltip ── */ .theme-toggle[data-tooltip]::after { content: attr(data-tooltip); position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) scale(0.95); background: #1e293b; color: #e2e8f0; font-size: 0.75rem; padding: 0.35rem 0.65rem; border-radius: 0.4rem; white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.15s, transform 0.15s, visibility 0.15s; border: 1px solid rgba(148, 163, 184, 0.2); z-index: 300; } .theme-toggle:hover[data-tooltip]::after { opacity: 1; visibility: visible; transform: translateX(-50%) scale(1); } /* ── Theme Toggle inside Gear Menu (logged-in pages) ── */ .shared-header .gear-menu .theme-toggle { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.65rem 1rem; background: none; border: none; border-radius: 0; color: #e2e8f0; font-size: 0.96875rem; font-weight: 500; cursor: pointer; text-align: left; font-family: inherit; line-height: normal; position: static; transition: background 0.15s; } .shared-header .gear-menu .theme-toggle:hover { background: rgba(148, 163, 184, 0.12); border-color: transparent; } .shared-header .gear-menu .theme-toggle .theme-toggle-icon { width: auto; height: auto; font-size: inherit; } .shared-header .gear-menu .theme-toggle .theme-toggle-label { font-size: inherit; font-weight: inherit; letter-spacing: normal; text-transform: none; opacity: 1; } /* Hide tooltip when inside gear menu */ .shared-header .gear-menu .theme-toggle[data-tooltip]::after { display: none; } /* =========================================================== LIGHT THEME OVERRIDES Applied via [data-theme-resolved="light"] on =========================================================== */ html[data-theme-resolved="light"] { /* Core palette */ --primary: #2563eb; --primary-dark: #1d4ed8; --bg: #f8fafc; --accent: #16a34a; --text-main: #1e293b; --text-muted: #64748b; --border-subtle: #e2e8f0; --card-bg: #ffffff; /* Surface colors */ --surface-primary: #ffffff; --surface-secondary: #f1f5f9; --surface-elevated: #ffffff; --surface-header: rgba(255, 255, 255, 0.9); --surface-header-scrolled: rgba(255, 255, 255, 0.95); /* Text scale */ --text-heading: #0f172a; --text-body: #334155; --text-secondary: #64748b; --text-tertiary: #94a3b8; --text-on-dark: #f8fafc; /* Borders & shadows */ --border-default: #e2e8f0; --border-hover: #cbd5e1; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08); /* Page-specific variable overrides (start6.html, features, industries) */ --bg-card: rgba(255, 255, 255, 0.95); --primary-glow: rgba(37, 99, 235, 0.15); --error: #dc2626; --success: #16a34a; } /* ── Resolved theme helpers ── */ [data-theme-resolved="light"] { color-scheme: light; } [data-theme-resolved="dark"] { color-scheme: dark; } /* ── Body ── */ [data-theme-resolved="light"] body, [data-theme-resolved="light"] .page { background: var(--bg); color: var(--text-body); } /* ── Shared Header ── */ :is([data-theme-resolved="light"]) .shared-header::before { background: var(--surface-header); } :is([data-theme-resolved="light"]) .shared-header.scrolled::before { background: var(--surface-header-scrolled); } :is([data-theme-resolved="light"]) .shared-header.scrolled { box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08); } :is([data-theme-resolved="light"]) .shared-header .logo { color: var(--text-heading); } :is([data-theme-resolved="light"]) .shared-header .nav { color: var(--text-secondary); } :is([data-theme-resolved="light"]) .shared-header .nav-links a:hover, :is([data-theme-resolved="light"]) .shared-header .nav-dropdown-toggle:hover { color: var(--text-heading); } :is([data-theme-resolved="light"]) .shared-header .nav-cta { color: var(--text-heading); border-color: var(--primary); background: rgba(37, 99, 235, 0.06); } :is([data-theme-resolved="light"]) .shared-header .nav-cta:hover { background: rgba(37, 99, 235, 0.12); color: var(--primary); } :is([data-theme-resolved="light"]) .shared-header .nav-cta-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important; border-color: var(--primary) !important; color: #fff !important; box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3); } :is([data-theme-resolved="light"]) .shared-header .menu-toggle { color: var(--text-heading); border-color: var(--border-default); } :is([data-theme-resolved="light"]) .shared-header .nav-dropdown-menu { background: var(--surface-elevated); border-color: var(--border-default); box-shadow: var(--shadow-lg); } :is([data-theme-resolved="light"]) .shared-header .nav-dropdown-menu a { color: var(--text-body) !important; } :is([data-theme-resolved="light"]) .shared-header .nav-dropdown-menu a:hover { background: var(--surface-secondary); color: var(--text-heading) !important; } :is([data-theme-resolved="light"]) .shared-header .gear-menu { background: var(--surface-elevated); border-color: var(--border-default); box-shadow: var(--shadow-lg); } :is([data-theme-resolved="light"]) .shared-header .gear-menu button, :is([data-theme-resolved="light"]) .shared-header .gear-menu a { color: var(--text-body); } :is([data-theme-resolved="light"]) .shared-header .gear-menu .theme-toggle:hover { background: var(--surface-secondary); border-color: transparent; } /* Theme toggle button itself adapts */ :is([data-theme-resolved="light"]) .theme-toggle { color: var(--text-heading); border-color: var(--border-default); } :is([data-theme-resolved="light"]) .theme-toggle:hover { background: var(--surface-secondary); border-color: var(--border-hover); } :is([data-theme-resolved="light"]) .theme-toggle[data-tooltip]::after { background: var(--surface-elevated); color: var(--text-body); border-color: var(--border-default); box-shadow: var(--shadow-md); } /* ── Mobile Bottom Sheet (light theme) ── */ @media (max-width: 768px) { :is([data-theme-resolved="light"]) .shared-header .nav.nav-collapsible { background: var(--surface-elevated) !important; border-top-color: var(--border-default); box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.1); } :is([data-theme-resolved="light"]) .shared-header .nav.nav-collapsible .nav-links a, :is([data-theme-resolved="light"]) .shared-header .nav.nav-collapsible .nav-dropdown-toggle { color: var(--text-heading) !important; } :is([data-theme-resolved="light"]) .shared-header .nav.nav-collapsible .nav-dropdown-menu-inner { background: var(--surface-secondary); } :is([data-theme-resolved="light"]) .shared-header .nav.nav-collapsible .nav-dropdown-menu a { color: var(--text-body) !important; } :is([data-theme-resolved="light"]) .shared-header .nav.nav-collapsible .nav-dropdown-menu a:hover { color: var(--text-heading) !important; } :is([data-theme-resolved="light"]) .shared-header .nav.nav-collapsible .nav-actions { background: var(--surface-elevated); border-top-color: var(--border-default); } :is([data-theme-resolved="light"]) .shared-header .nav.nav-collapsible .nav-cta:not(.nav-cta-primary) { background: var(--surface-secondary); border-color: var(--border-default); color: var(--text-heading); } :is([data-theme-resolved="light"]) .mobile-nav-chevron, :is([data-theme-resolved="light"]) .shared-header .nav.nav-collapsible .nav-dropdown-chevron { color: var(--text-secondary); } } /* ── Hero Section ── */ :is([data-theme-resolved="light"]) .hero-wrapper { background: var(--bg); } @media (min-width: 1024px) { :is([data-theme-resolved="light"]) .hero { grid-template-columns: 1fr min-content; } :is([data-theme-resolved="light"]) .hero-right { justify-self: end; } } :is([data-theme-resolved="light"]) .hero-title { color: var(--text-heading); } :is([data-theme-resolved="light"]) .hero-emphasis { color: var(--primary); } :is([data-theme-resolved="light"]) .hero-subtitle-highlight { color: var(--text-body); } :is([data-theme-resolved="light"]) .hero-proof-point { color: var(--text-body); } :is([data-theme-resolved="light"]) .hero-proof-label { color: var(--text-muted); } :is([data-theme-resolved="light"]) .hero-trust-line { color: var(--text-muted, #475569); } :is([data-theme-resolved="light"]) .hero-trust-line span { color: var(--text-muted, #475569); opacity: 0.7; } /* ── Trade Grid ── */ :is([data-theme-resolved="light"]) .trade-section-title { color: var(--text-heading); } :is([data-theme-resolved="light"]) .trade-grid-card { background: var(--surface-primary); border-color: var(--border-default); color: var(--text-body); } :is([data-theme-resolved="light"]) .trade-grid-card:hover { border-color: var(--primary); background: rgba(37, 99, 235, 0.04); } :is([data-theme-resolved="light"]) .trade-grid-card[aria-selected="true"] { border-color: var(--primary); background: rgba(37, 99, 235, 0.06); } :is([data-theme-resolved="light"]) .trade-grid-label { color: var(--text-body); } :is([data-theme-resolved="light"]) .trade-grid-card.active .trade-grid-label, :is([data-theme-resolved="light"]) .trade-grid-card[aria-selected="true"] .trade-grid-label { color: var(--text-heading); } /* ── Hero Grid (estimate preview) ── */ :is([data-theme-resolved="light"]) .hero-grid { background: var(--surface-primary); border-color: var(--border-default); box-shadow: var(--shadow-lg); color: var(--text-body); } :is([data-theme-resolved="light"]) .hero-grid-header { color: var(--text-secondary); } :is([data-theme-resolved="light"]) .hero-grid-badge { background: var(--surface-secondary); border-color: var(--border-default); } /* ── Section Titles ── */ :is([data-theme-resolved="light"]) .section-title, :is([data-theme-resolved="light"]) h2 { color: var(--text-heading); } :is([data-theme-resolved="light"]) .section-subtitle { color: var(--text-secondary); } /* ── Workflow Cards ── */ :is([data-theme-resolved="light"]) .workflow-column { background: var(--surface-primary); border-color: var(--border-default); } :is([data-theme-resolved="light"]) .workflow-column:hover { border-color: var(--primary); } :is([data-theme-resolved="light"]) .workflow-column h3 { color: var(--text-heading); } :is([data-theme-resolved="light"]) .workflow-column li { color: var(--text-body); border-bottom-color: var(--border-default); } :is([data-theme-resolved="light"]) .workflow-column li::before { color: var(--primary); } :is([data-theme-resolved="light"]) .workflow-column li strong { color: var(--text-heading); } /* ── Trust Badges ── */ :is([data-theme-resolved="light"]) .trust-badges-wrapper { border-color: var(--border-default); } :is([data-theme-resolved="light"]) .trust-badge { background: var(--surface-primary); border-color: var(--border-default); } :is([data-theme-resolved="light"]) .trust-badge:hover { border-color: var(--border-hover); background: var(--surface-primary); } :is([data-theme-resolved="light"]) .trust-badge-title { color: var(--text-heading); } :is([data-theme-resolved="light"]) .trust-badge-desc { color: var(--text-secondary); } /* ── How It Works Cards ── */ :is([data-theme-resolved="light"]) .how-it-works-card { background: var(--surface-primary); border-color: var(--border-default); } :is([data-theme-resolved="light"]) .how-it-works-card:hover { border-color: var(--border-hover); background: var(--surface-primary); } :is([data-theme-resolved="light"]) .how-it-works-card .card-title { color: var(--text-heading); } :is([data-theme-resolved="light"]) .how-it-works-card .card-desc { color: var(--text-secondary); } :is([data-theme-resolved="light"]) .how-it-works-container::before { background: linear-gradient(90deg, transparent 0%, var(--border-default) 15%, var(--border-default) 85%, transparent 100%); } /* ── Integrations Equation (light theme) ── */ :is([data-theme-resolved="light"]) .integrations-side { background: var(--surface-primary); border-color: var(--border-default); } :is([data-theme-resolved="light"]) .integrations-side:hover { border-color: var(--border-hover); } :is([data-theme-resolved="light"]) .integrations-side--added { background: linear-gradient(160deg, rgba(37, 99, 235, 0.08), var(--surface-primary) 60%); border-color: rgba(37, 99, 235, 0.35); } :is([data-theme-resolved="light"]) .integrations-side-label { color: var(--text-secondary); } :is([data-theme-resolved="light"]) .integration-chip { color: var(--text-heading); border-bottom-color: var(--border-default); } :is([data-theme-resolved="light"]) .integrations-side--existing .integration-chip::before { background: var(--text-secondary); } :is([data-theme-resolved="light"]) .integration-chip a:hover { color: var(--accent); } :is([data-theme-resolved="light"]) .integration-chip--accent { color: var(--text-heading); } :is([data-theme-resolved="light"]) .integration-chip--accent::after { color: #1e3a8a; border-color: rgba(37, 99, 235, 0.4); background: rgba(37, 99, 235, 0.1); } :is([data-theme-resolved="light"]) .integrations-side-desc { color: var(--text-secondary); } /* ── Screenshot Flow Captions ── */ :is([data-theme-resolved="light"]) .screenshot-flow-step .step-caption h4 { color: var(--text-heading); } :is([data-theme-resolved="light"]) .screenshot-flow-step .step-caption p { color: var(--text-secondary); } /* ── Gear Toggle (light theme) ── */ :is([data-theme-resolved="light"]) .shared-header .gear-toggle { color: var(--text-heading); border-color: var(--border-default); } :is([data-theme-resolved="light"]) .shared-header .gear-toggle:hover { background: var(--surface-secondary); border-color: var(--border-hover); } /* ── Accordion / FAQ ── */ :is([data-theme-resolved="light"]) .accordion-item { border-bottom-color: var(--border-default); } :is([data-theme-resolved="light"]) .accordion-text { color: var(--text-heading); } :is([data-theme-resolved="light"]) .accordion-content p { color: var(--text-secondary); } :is([data-theme-resolved="light"]) .accordion-icon { border-color: var(--text-tertiary); } :is([data-theme-resolved="light"]) .accordion-icon::before, :is([data-theme-resolved="light"]) .accordion-icon::after { background: var(--text-tertiary); } /* ── Buttons ── */ :is([data-theme-resolved="light"]) .btn-primary { box-shadow: 0 4px 15px rgba(37, 99, 235, 0.25); } :is([data-theme-resolved="light"]) .btn-outline { color: var(--primary); background: rgba(37, 99, 235, 0.06); } :is([data-theme-resolved="light"]) .btn-outline:hover { color: var(--primary-dark); background: rgba(37, 99, 235, 0.12); border-color: var(--primary-dark); } /* ── Stats / Social Proof ── */ :is([data-theme-resolved="light"]) .stat-number { color: var(--primary); } :is([data-theme-resolved="light"]) .stat-label { color: var(--text-secondary); } /* ── Testimonials ── */ :is([data-theme-resolved="light"]) .testimonial-card { background: var(--surface-primary); border-color: var(--border-default); } :is([data-theme-resolved="light"]) .testimonial-card p { color: var(--text-body) !important; } :is([data-theme-resolved="light"]) .testimonial-text { color: var(--text-body); } :is([data-theme-resolved="light"]) .testimonial-name { color: var(--text-heading); } :is([data-theme-resolved="light"]) .testimonial-card cite { color: var(--text-secondary) !important; } :is([data-theme-resolved="light"]) .testimonial-role { color: var(--text-secondary); } /* ── Footer ── */ :is([data-theme-resolved="light"]) .shared-footer { background: #1e293b; color: #e2e8f0; } /* ── Feature Spotlights ── */ :is([data-theme-resolved="light"]) .feature-spotlight { border-color: var(--border-default); } :is([data-theme-resolved="light"]) .feature-spotlight-text h3 { color: var(--text-heading); } :is([data-theme-resolved="light"]) .feature-spotlight-text p { color: var(--text-body); } :is([data-theme-resolved="light"]) .feature-spotlight-label { color: var(--text-secondary); } :is([data-theme-resolved="light"]) .feature-spotlight-image img { border-color: var(--border-default); } :is([data-theme-resolved="light"]) .feature-image-wrapper { border-color: var(--border-default); } /* ── Preview Templates ── */ :is([data-theme-resolved="light"]) .preview-panel { background: var(--surface-primary); border-color: var(--border-default); box-shadow: var(--shadow-md); } /* ── Pricing Card ── */ :is([data-theme-resolved="light"]) .pricing-card { background: var(--surface-primary); box-shadow: var(--shadow-lg); } :is([data-theme-resolved="light"]) .pricing-price { color: var(--text-heading); } :is([data-theme-resolved="light"]) .pricing-period { color: var(--text-secondary); } :is([data-theme-resolved="light"]) .pricing-desc { color: #b45309; } :is([data-theme-resolved="light"]) .pricing-list-item { color: var(--text-body); } :is([data-theme-resolved="light"]) .pricing-footnote { color: var(--text-secondary); } /* ── Competitor Comparison Table (light) ── */ :is([data-theme-resolved="light"]) .pricing-compare-title { color: var(--text-heading); } :is([data-theme-resolved="light"]) .pricing-compare-scroll { border-color: var(--border-default); } :is([data-theme-resolved="light"]) .pricing-compare-table { color: var(--text-body); } :is([data-theme-resolved="light"]) .pricing-compare-table thead tr { background: var(--surface-secondary); } :is([data-theme-resolved="light"]) .pricing-compare-table th { color: var(--text-secondary); border-bottom-color: var(--border-default); } :is([data-theme-resolved="light"]) .pricing-compare-table td { border-bottom-color: var(--border-default); } :is([data-theme-resolved="light"]) .pricing-compare-table td:first-child { color: var(--text-secondary); } :is([data-theme-resolved="light"]) .pricing-compare-table tbody tr:hover td { background: rgba(0, 0, 0, 0.03); } :is([data-theme-resolved="light"]) .pricing-compare-us { background: rgba(37, 99, 235, 0.06) !important; } :is([data-theme-resolved="light"]) .pricing-compare-table th.pricing-compare-us { color: var(--primary) !important; } :is([data-theme-resolved="light"]) .pricing-compare-winner { color: var(--accent) !important; } :is([data-theme-resolved="light"]) .pricing-compare-yes { color: var(--accent); } :is([data-theme-resolved="light"]) .pricing-compare-no { color: var(--text-tertiary); } :is([data-theme-resolved="light"]) .pricing-compare-note { color: var(--text-tertiary); } :is([data-theme-resolved="light"]) .pricing-compare-caption { color: var(--text-secondary); } /* ── Hero Estimate Preview (light - raised paper look) ── */ :is([data-theme-resolved="light"]) .hero-estimate-container { width: auto; } :is([data-theme-resolved="light"]) .hero-estimate { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 12px 40px rgba(0, 0, 0, 0.1) !important; border: none; background: #ffffff; } :is([data-theme-resolved="light"]) .hero-reveal-container { background: transparent; border-radius: 0; padding: 0; box-shadow: none; overflow: visible; } /* ── Final CTA Box ── */ :is([data-theme-resolved="light"]) .final-cta-box { background: var(--surface-primary); border-color: var(--border-default); box-shadow: var(--shadow-md); } :is([data-theme-resolved="light"]) .final-cta-title { color: var(--text-heading); } :is([data-theme-resolved="light"]) .final-cta-desc { color: var(--text-secondary); } :is([data-theme-resolved="light"]) .final-cta-footnote { color: var(--text-tertiary); } /* ── Footer ── */ :is([data-theme-resolved="light"]) .site-footer { border-top-color: var(--border-default); color: var(--text-secondary); } :is([data-theme-resolved="light"]) .footer-brand-name { color: var(--text-heading); } :is([data-theme-resolved="light"]) .footer-tagline { color: var(--text-secondary); } :is([data-theme-resolved="light"]) .footer-col h4 { color: var(--text-heading); } :is([data-theme-resolved="light"]) .footer-col a { color: var(--text-secondary); } :is([data-theme-resolved="light"]) .footer-col a:hover { color: var(--text-heading); } :is([data-theme-resolved="light"]) .footer-bottom { border-top-color: var(--border-default); color: var(--text-tertiary); } /* ── ROI Calculator ── */ :is([data-theme-resolved="light"]) .roi-calculator { background: var(--surface-primary); border-color: var(--border-default); } :is([data-theme-resolved="light"]) .roi-label { color: var(--text-body); } :is([data-theme-resolved="light"]) .roi-input-group label { color: var(--text-body); } :is([data-theme-resolved="light"]) .roi-input-row input[type="range"] { background: rgba(148, 163, 184, 0.3); } :is([data-theme-resolved="light"]) .roi-result-card { background: var(--surface-primary); border-color: var(--border-default); box-shadow: var(--shadow-sm); } :is([data-theme-resolved="light"]) .roi-result-card:hover { box-shadow: var(--shadow-md); } :is([data-theme-resolved="light"]) .roi-result-number { color: var(--text-heading); } :is([data-theme-resolved="light"]) .roi-result-highlight .roi-result-number { color: #16a34a; } :is([data-theme-resolved="light"]) .roi-result-warn .roi-result-number { color: #ea580c; } :is([data-theme-resolved="light"]) .roi-result-label { color: var(--text-secondary); } :is([data-theme-resolved="light"]) .roi-result-label strong { color: var(--text-heading); } :is([data-theme-resolved="light"]) .roi-result-highlight { background: rgba(34, 197, 94, 0.06); border-color: rgba(34, 197, 94, 0.3); } :is([data-theme-resolved="light"]) .roi-result-warn { background: rgba(251, 146, 60, 0.06); border-color: rgba(251, 146, 60, 0.3); } :is([data-theme-resolved="light"]) .roi-calc-verdict { color: var(--text-heading); } :is([data-theme-resolved="light"]) .roi-verdict-great { color: #16a34a; background: rgba(34, 197, 94, 0.08); } :is([data-theme-resolved="light"]) .roi-verdict-good { color: var(--primary); background: rgba(37, 99, 235, 0.08); } /* ── Mobile bottom-sheet (light) ── */ @media (max-width: 768px) { :is([data-theme-resolved="light"]) .shared-header .nav.nav-collapsible { background: var(--surface-elevated) !important; border-top-color: var(--border-default); } :is([data-theme-resolved="light"]) .mobile-nav-overlay.open { background: rgba(0, 0, 0, 0.25); } :is([data-theme-resolved="light"]) .shared-header .nav.nav-collapsible .nav-links a { color: var(--text-body) !important; border-bottom-color: var(--border-default); } :is([data-theme-resolved="light"]) .shared-header .nav.nav-collapsible .nav-links a:hover { background: var(--surface-secondary); color: var(--text-heading) !important; } :is([data-theme-resolved="light"]) .shared-header .nav.nav-collapsible .nav-actions { background: var(--surface-secondary); border-top-color: var(--border-default); } :is([data-theme-resolved="light"]) .shared-header .nav.nav-collapsible .nav-cta:not(.nav-cta-primary) { background: var(--surface-primary); border-color: var(--border-default); color: var(--text-heading) !important; } :is([data-theme-resolved="light"]) .shared-header .nav.nav-collapsible .nav-cta-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important; color: #fff !important; border-color: var(--primary) !important; } :is([data-theme-resolved="light"]) .shared-header .nav.nav-collapsible .nav-dropdown-toggle { color: var(--text-body) !important; } :is([data-theme-resolved="light"]) .shared-header .nav.nav-collapsible .nav-dropdown-menu-inner { background: var(--surface-secondary); border-color: var(--border-default); } :is([data-theme-resolved="light"]) .shared-header .nav.nav-collapsible .nav-dropdown-menu a { color: var(--text-body) !important; } :is([data-theme-resolved="light"]) .shared-header .nav.nav-collapsible .nav-dropdown-menu a:hover { color: var(--text-heading) !important; background: rgba(37, 99, 235, 0.06); } :is([data-theme-resolved="light"]) .mobile-nav-trial-hint { color: var(--text-tertiary); } } /* ── Section Wrappers ── */ :is([data-theme-resolved="light"]) .section-wrapper { border-bottom-color: var(--border-default); } :is([data-theme-resolved="light"]) .section-wrapper-bordered { border-top-color: var(--border-default); } /* Override OLED alternating-section backgrounds */ :is([data-theme-resolved="light"]) main > :nth-child(odd of .section-wrapper) { background: var(--surface-secondary); } :is([data-theme-resolved="light"]) main > :nth-child(even of .section-wrapper) { background: var(--bg); } :is([data-theme-resolved="light"]) .section-wrapper .section-content { color: var(--text-body); } :is([data-theme-resolved="light"]) .section-wrapper .section-content p, :is([data-theme-resolved="light"]) .section-wrapper .hero-copy p { color: var(--text-body); } :is([data-theme-resolved="light"]) .section-wrapper .section-content strong { color: var(--text-heading); } /* ── Compact Feature Highlight Module ── */ .feature-highlights { padding: clamp(2.5rem, 5vh, 4rem) 0; border-bottom: 1px solid rgba(148, 163, 184, 0.2); content-visibility: auto; contain-intrinsic-size: auto 640px; } .feature-highlights-inner { max-width: 1180px; margin: 0 auto; padding: 0 1.25rem; } .feature-highlights-header { max-width: 760px; margin-bottom: 1.5rem; } .feature-highlights-header .section-title { margin-bottom: 1rem; } .feature-highlights-header .section-subtitle { text-align: left; margin-bottom: 0; line-height: 1.65; } .highlight-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin: 1.5rem 0 1.1rem; } .highlight-tab { min-height: 52px; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 8px; background: rgba(15, 23, 42, 0.72); color: #cbd5e1; font: inherit; font-size: 0.95rem; font-weight: 700; text-align: left; cursor: pointer; padding: 0.72rem 0.82rem; transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease; } .highlight-tab:hover, .highlight-tab.is-active { border-color: rgba(96, 165, 250, 0.55); background: rgba(37, 99, 235, 0.14); color: #f8fafc; } .highlight-tab.is-active { box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.18); } .highlight-stage { display: grid; gap: 1.1rem; align-items: stretch; } .highlight-panel-wrap { position: relative; min-height: 210px; } .highlight-panel { display: none; height: 100%; border: 1px solid rgba(148, 163, 184, 0.14); border-radius: 8px; background: rgba(15, 23, 42, 0.62); padding: clamp(1.15rem, 3vw, 1.8rem); } .highlight-panel.is-active { display: flex; flex-direction: column; justify-content: center; } .highlight-panel .feature-title { max-width: 720px; } .highlight-panel .feature-body { max-width: 760px; } .highlight-screenshot-shell { overflow: hidden; border: 1px solid rgba(148, 163, 184, 0.14); border-radius: 8px; background: linear-gradient(180deg, rgba(15, 23, 42, 0.82), rgba(15, 23, 42, 0.48)); padding: 0.85rem; } .highlight-screenshot-track { display: flex; gap: 0.9rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: rgba(96, 165, 250, 0.6) rgba(15, 23, 42, 0.45); padding-bottom: 0.2rem; } .highlight-shot { flex: 0 0 min(78vw, 320px); scroll-snap-align: center; position: relative; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 8px; background: rgba(2, 6, 23, 0.42); padding: 0.68rem; opacity: 0.76; cursor: pointer; transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .highlight-shot:hover, .highlight-shot:focus-visible { opacity: 1; border-color: rgba(96, 165, 250, 0.44); } .highlight-shot.is-active { opacity: 1; border-color: rgba(96, 165, 250, 0.52); } .highlight-shot img { display: block; width: 100%; max-height: 420px; object-fit: contain; border-radius: 8px; border: 1px solid rgba(148, 163, 184, 0.16); background: rgba(15, 23, 42, 0.75); } .highlight-image-switcher { width: 100%; display: grid; gap: 0.7rem; } .highlight-image-switcher-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; } .highlight-image-switcher-button { min-height: 34px; border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 7px; background: rgba(15, 23, 42, 0.72); color: #cbd5e1; font: inherit; font-size: 0.78rem; font-weight: 800; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease; } .highlight-image-switcher-button.is-active, .highlight-image-switcher-button:hover { border-color: rgba(96, 165, 250, 0.58); background: rgba(37, 99, 235, 0.2); color: #f8fafc; } .highlight-switch-image[hidden] { display: none; } .highlight-switch-image img { margin: 0 auto; } .highlight-shot figcaption { margin-top: 0.62rem; color: #94a3b8; font-size: 0.84rem; line-height: 1.4; text-align: center; } .highlight-shot-visual { min-height: 220px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(148, 163, 184, 0.14); border-radius: 8px; background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.16), rgba(15, 23, 42, 0.42) 55%); padding: 1rem; text-align: center; } .highlight-shot-visual > div { display: grid; gap: 0.35rem; justify-items: center; } .highlight-shot-visual strong { color: #f8fafc; font-size: clamp(1.05rem, 2.5vw, 1.35rem); line-height: 1.2; } .highlight-shot-visual-legacy { position: relative; height: 220px; min-height: 220px; overflow: hidden; } .highlight-shot-visual-legacy > div { display: block; width: 100%; } .highlight-shot-visual-legacy > :not(svg) { position: absolute; top: 50%; left: 50%; max-width: none; transform: translate(-50%, -50%) scale(var(--legacy-visual-scale, 0.7)); transform-origin: center; } .highlight-shot-visual-legacy svg { display: block; width: min(100%, 380px); height: auto; max-height: 100%; margin: 0 auto; } .highlight-shot-visual-legacy .brand-mock { --legacy-visual-scale: 0.6; width: min(100%, 320px); margin: 0 auto; } .highlight-shot-visual-legacy .sync-grid { --legacy-visual-scale: 0.54; width: 480px; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-top: 0; } .highlight-shot-visual-legacy .workflow-chain { --legacy-visual-scale: 0.72; width: 360px; margin-top: 0; } .highlight-shot-visual-legacy .visual-card { --legacy-visual-scale: 0.28; width: 680px; } .highlight-expand { position: absolute; top: 0.88rem; right: 0.88rem; display: inline-flex; align-items: center; gap: 0.35rem; min-height: 34px; padding: 0.4rem 0.58rem; border: 1px solid rgba(96, 165, 250, 0.52); border-radius: 7px; background: rgba(15, 23, 42, 0.86); color: #f8fafc; font: inherit; font-size: 0.76rem; font-weight: 700; cursor: pointer; box-shadow: 0 10px 24px rgba(2, 6, 23, 0.3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .highlight-expand:hover { transform: translateY(-1px); border-color: rgba(96, 165, 250, 0.82); background: rgba(37, 99, 235, 0.92); } .highlight-expand svg { width: 0.92rem; height: 0.92rem; flex: 0 0 auto; } .highlight-switcher-expand { top: 4.1rem; } .screenshot-lightbox { position: fixed; inset: 0; z-index: 10020; display: flex; align-items: center; justify-content: center; padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom)); background: rgba(2, 6, 23, 0.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .screenshot-lightbox[hidden] { display: none; } .screenshot-lightbox-panel { position: relative; width: min(94vw, 760px); max-height: min(92vh, 920px); display: flex; flex-direction: column; align-items: center; gap: 0.8rem; border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 8px; background: rgba(15, 23, 42, 0.94); padding: 1rem; box-shadow: 0 28px 80px rgba(2, 6, 23, 0.55); } .screenshot-lightbox-close { position: absolute; top: 0.7rem; right: 0.7rem; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(148, 163, 184, 0.28); border-radius: 8px; background: rgba(15, 23, 42, 0.86); color: #f8fafc; cursor: pointer; } .screenshot-lightbox-close svg { width: 1.1rem; height: 1.1rem; } .screenshot-lightbox img { display: block; width: auto; max-width: 100%; max-height: calc(88vh - 96px); object-fit: contain; border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 8px; background: rgba(248, 250, 252, 0.98); } .screenshot-lightbox-caption { color: #cbd5e1; font-size: 0.95rem; line-height: 1.45; text-align: center; padding: 0 2.8rem; } @media (min-width: 900px) { .highlight-stage { grid-template-columns: minmax(0, 0.82fr) minmax(420px, 1fr); } .highlight-panel-wrap, .highlight-screenshot-shell { min-height: 500px; } .highlight-screenshot-shell { display: flex; align-items: center; justify-content: center; } .highlight-screenshot-track { width: 100%; justify-content: center; overflow: hidden; padding-bottom: 0; } .highlight-shot { display: none; flex-basis: min(100%, 350px); transform: none; } .highlight-shot.is-active { display: block; } .highlight-shot img { max-height: 440px; } } @media (max-width: 899px) { .feature-highlights { padding: 1.1rem 0 1.5rem; contain-intrinsic-size: auto 540px; } .feature-highlights-inner { padding: 0 0.75rem; } .feature-highlights-header { margin-bottom: 0.55rem; } .feature-highlights-header .section-title { font-size: clamp(1.18rem, 5.6vw, 1.45rem); line-height: 1.12; margin-bottom: 0.35rem; } .feature-highlights-header .section-title::after { width: 44px; height: 2px; margin-top: 0.35rem; } .feature-highlights-header .section-subtitle { display: none; } .highlight-panel-wrap { min-height: 0; } .highlight-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(118px, 0.58fr); grid-template-columns: none; gap: 0.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0.72rem 0 0.62rem; padding-bottom: 0; } .highlight-tabs::-webkit-scrollbar { display: none; } .highlight-tab { min-height: 42px; border-radius: 7px; font-size: 0.86rem; line-height: 1.15; padding: 0.52rem 0.62rem; scroll-snap-align: start; } .highlight-stage { gap: 0.65rem; } .highlight-panel { border-radius: 7px; padding: 0.7rem 0.82rem; } .highlight-panel .feature-label { font-size: 0.62rem; margin-bottom: 0.28rem; } .highlight-panel .feature-title { font-size: 1rem; line-height: 1.2; margin-bottom: 0.28rem; } .highlight-panel .feature-body { font-size: 0.8rem; line-height: 1.28; } .highlight-screenshot-shell { border-radius: 7px; padding: 0.45rem; } .highlight-screenshot-track { gap: 0.55rem; padding-bottom: 0; } .highlight-shot { flex-basis: min(68vw, 220px); border-radius: 7px; padding: 0.35rem; } .highlight-shot img { max-height: 180px; border-radius: 6px; } .highlight-image-switcher { gap: 0.45rem; } .highlight-image-switcher-button { min-height: 30px; font-size: 0.72rem; } .highlight-shot-visual { min-height: 168px; } .highlight-shot-visual-legacy { height: 188px; min-height: 188px; } .highlight-shot-visual-legacy svg { max-height: 100%; } .highlight-shot-visual-legacy .brand-mock { --legacy-visual-scale: 0.48; } .highlight-shot-visual-legacy .sync-grid { --legacy-visual-scale: 0.5; } .highlight-shot-visual-legacy .workflow-chain { --legacy-visual-scale: 0.58; } .highlight-shot-visual-legacy .visual-card { --legacy-visual-scale: 0.23; } .highlight-shot-visual strong { font-size: 1rem; } .highlight-expand { top: 0.58rem; right: 0.58rem; min-height: 32px; padding: 0.34rem 0.48rem; font-size: 0.72rem; } .highlight-switcher-expand { top: 3.75rem; } .highlight-shot figcaption { margin-top: 0.3rem; font-size: 0.74rem; line-height: 1.2; } .screenshot-lightbox-panel { width: calc(100vw - 1rem); padding: 0.7rem; } .screenshot-lightbox img { max-height: calc(90vh - 88px); } .screenshot-lightbox-caption { font-size: 0.86rem; padding: 0 2.3rem; } } @media (max-width: 420px) { .feature-highlights { padding-top: 1rem; } .highlight-panel { padding: 0.65rem 0.72rem; } .highlight-panel .feature-title { font-size: 1rem; } .highlight-panel .feature-body { font-size: 0.84rem; line-height: 1.32; } .highlight-shot img { max-height: 168px; } } :is([data-theme-resolved="light"]) .feature-highlights { border-bottom-color: rgba(148, 163, 184, 0.24); } :is([data-theme-resolved="light"]) .feature-highlights-header .section-subtitle, :is([data-theme-resolved="light"]) .highlight-panel .feature-body, :is([data-theme-resolved="light"]) .highlight-shot figcaption { color: #475569; } :is([data-theme-resolved="light"]) .highlight-tab { background: rgba(255, 255, 255, 0.92); border-color: rgba(148, 163, 184, 0.32); color: #334155; } :is([data-theme-resolved="light"]) .highlight-tab:hover, :is([data-theme-resolved="light"]) .highlight-tab.is-active { background: #dbeafe; border-color: rgba(37, 99, 235, 0.42); color: #1d4ed8; } :is([data-theme-resolved="light"]) .highlight-panel, :is([data-theme-resolved="light"]) .highlight-shot { background: rgba(255, 255, 255, 0.92); border-color: rgba(148, 163, 184, 0.24); } :is([data-theme-resolved="light"]) .highlight-screenshot-shell { background: linear-gradient(180deg, rgba(248, 250, 252, 0.95), rgba(226, 232, 240, 0.72)); border-color: rgba(148, 163, 184, 0.24); } :is([data-theme-resolved="light"]) .highlight-shot.is-active { border-color: rgba(37, 99, 235, 0.45); } :is([data-theme-resolved="light"]) .highlight-shot img { background: #f8fafc; border-color: rgba(148, 163, 184, 0.22); } :is([data-theme-resolved="light"]) .highlight-image-switcher-button { background: rgba(248, 250, 252, 0.92); border-color: rgba(148, 163, 184, 0.3); color: #334155; } :is([data-theme-resolved="light"]) .highlight-image-switcher-button.is-active, :is([data-theme-resolved="light"]) .highlight-image-switcher-button:hover { background: rgba(37, 99, 235, 0.1); border-color: rgba(37, 99, 235, 0.42); color: #1d4ed8; } :is([data-theme-resolved="light"]) .highlight-shot-visual { background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.12), rgba(248, 250, 252, 0.92) 58%); border-color: rgba(148, 163, 184, 0.22); } :is([data-theme-resolved="light"]) .highlight-shot-visual strong { color: #0f172a; } :is([data-theme-resolved="light"]) .highlight-expand { background: rgba(255, 255, 255, 0.92); border-color: rgba(37, 99, 235, 0.42); color: #1d4ed8; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14); } :is([data-theme-resolved="light"]) .highlight-expand:hover { background: #dbeafe; border-color: rgba(37, 99, 235, 0.62); } :is([data-theme-resolved="light"]) .screenshot-lightbox { background: rgba(15, 23, 42, 0.72); } :is([data-theme-resolved="light"]) .screenshot-lightbox-panel { background: rgba(255, 255, 255, 0.96); border-color: rgba(148, 163, 184, 0.28); } :is([data-theme-resolved="light"]) .screenshot-lightbox-caption { color: #334155; } :is([data-theme-resolved="light"]) .screenshot-lightbox-close { background: rgba(255, 255, 255, 0.92); border-color: rgba(148, 163, 184, 0.3); color: #0f172a; } /* ── Benefit / Stat Cards ── */ :is([data-theme-resolved="light"]) .benefit-card { background: var(--surface-primary); border-color: var(--border-default); box-shadow: var(--shadow-sm); } :is([data-theme-resolved="light"]) .benefit-card:hover { box-shadow: var(--shadow-md); } :is([data-theme-resolved="light"]) .benefit-card-green { border-color: rgba(34, 197, 94, 0.35); } :is([data-theme-resolved="light"]) .benefit-card-blue { border-color: rgba(37, 99, 235, 0.35); } :is([data-theme-resolved="light"]) .benefit-card-yellow { border-color: rgba(234, 179, 8, 0.35); } :is([data-theme-resolved="light"]) .benefit-title { color: var(--text-heading); } :is([data-theme-resolved="light"]) .benefit-stat-green { color: #16a34a; } :is([data-theme-resolved="light"]) .benefit-stat-blue { color: #2563eb; } :is([data-theme-resolved="light"]) .benefit-stat-yellow { color: #b45309; } :is([data-theme-resolved="light"]) .benefit-ref-green { color: #16a34a; } :is([data-theme-resolved="light"]) .benefit-ref-blue { color: #2563eb; } :is([data-theme-resolved="light"]) .benefit-ref-yellow { color: #b45309; } :is([data-theme-resolved="light"]) .benefit-body { color: var(--text-body); } :is([data-theme-resolved="light"]) .benefit-body strong { color: var(--text-heading); } /* ── Problem Conclusion ── */ :is([data-theme-resolved="light"]) .problem-conclusion { color: var(--text-secondary); } /* ── Social Proof ── */ :is([data-theme-resolved="light"]) .social-proof-quote { color: var(--text-heading); } :is([data-theme-resolved="light"]) .social-proof-cite { color: var(--text-secondary); } :is([data-theme-resolved="light"]) .social-proof-trades { color: var(--text-secondary); } :is([data-theme-resolved="light"]) .social-proof-trades-label { color: var(--text-heading); } :is([data-theme-resolved="light"]) .social-proof-trades-highlight { color: var(--primary); } /* ── Workflow Column Description ── */ :is([data-theme-resolved="light"]) .workflow-column-desc { color: var(--text-secondary); } /* ── Cookie Consent Banner ── */ :is([data-theme-resolved="light"]) .cookie-consent-banner { background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); border-top-color: var(--border-default); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08); } :is([data-theme-resolved="light"]) .cookie-consent-text { color: var(--text-body); } :is([data-theme-resolved="light"]) .cookie-consent-text a { color: var(--primary); } :is([data-theme-resolved="light"]) .cookie-consent-toggles label { color: var(--text-body); } :is([data-theme-resolved="light"]) .cookie-btn-decline { color: var(--text-secondary); border-color: var(--border-default); } :is([data-theme-resolved="light"]) .cookie-btn-decline:hover { background: var(--surface-secondary); color: var(--text-heading); } /* =========================================================== PAGE-SPECIFIC LIGHT OVERRIDES Overrides for pages beyond index.html =========================================================== */ /* ── Contact Page ── */ :is([data-theme-resolved="light"]) .hero-extra { color: var(--text-secondary) !important; } :is([data-theme-resolved="light"]) .form-card { background: var(--surface-primary); border: 1px solid var(--border-default); box-shadow: var(--shadow-lg); } :is([data-theme-resolved="light"]) .form-card[data-type="general"] { box-shadow: 0 0 20px rgba(96, 165, 250, 0.06), var(--shadow-lg); } :is([data-theme-resolved="light"]) .form-card[data-type="bug"] { box-shadow: 0 0 20px rgba(248, 113, 113, 0.06), var(--shadow-lg); } :is([data-theme-resolved="light"]) .form-card[data-type="feature"] { box-shadow: 0 0 20px rgba(250, 204, 21, 0.06), var(--shadow-lg); } :is([data-theme-resolved="light"]) .form-intro { color: var(--text-secondary); } :is([data-theme-resolved="light"]) .form-intro strong { color: var(--text-heading); } :is([data-theme-resolved="light"]) .type-selector label { border-color: var(--border-default); color: var(--text-secondary); } :is([data-theme-resolved="light"]) #type-bug:checked + label { border-color: #fca5a5; color: #dc2626; background: #fef2f2; } :is([data-theme-resolved="light"]) #type-feature:checked + label { border-color: #fde68a; color: #d97706; background: #fffbeb; } :is([data-theme-resolved="light"]) #type-contact:checked + label { border-color: #93c5fd; color: #2563eb; background: #eff6ff; } :is([data-theme-resolved="light"]) .form-group input, :is([data-theme-resolved="light"]) .form-group textarea, :is([data-theme-resolved="light"]) .form-group select { background: var(--surface-secondary); border-color: var(--border-default); color: var(--text-body); } :is([data-theme-resolved="light"]) .form-group input::placeholder, :is([data-theme-resolved="light"]) .form-group textarea::placeholder { color: var(--text-tertiary); } :is([data-theme-resolved="light"]) .form-group input:focus, :is([data-theme-resolved="light"]) .form-group textarea:focus, :is([data-theme-resolved="light"]) .form-group select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } :is([data-theme-resolved="light"]) .form-group label { color: var(--text-heading); } :is([data-theme-resolved="light"]) .modal-overlay { background: rgba(0, 0, 0, 0.3); } :is([data-theme-resolved="light"]) .modal-card { background: var(--surface-primary); border-color: var(--border-default); box-shadow: var(--shadow-lg); color: var(--text-body); } :is([data-theme-resolved="light"]) .related-card { background: var(--surface-primary); border-color: var(--border-default); } :is([data-theme-resolved="light"]) .related-card:hover { border-color: var(--primary); } /* ── Pricing Page ── */ :is([data-theme-resolved="light"]) .price-card { background: var(--surface-primary); border: 1px solid rgba(34, 197, 94, 0.25); box-shadow: 0 0 20px rgba(34, 197, 94, 0.04), var(--shadow-lg); } :is([data-theme-resolved="light"]) .price-amount { color: #0f172a; animation: price-shimmer-light 8s ease-in-out infinite !important; } :is([data-theme-resolved="light"]) .price-period { color: #475569; animation: price-shimmer-light 8s ease-in-out 1s infinite !important; } @keyframes price-shimmer-light { 0%, 100% { color: #0f172a; } 30% { color: #16a34a; } 60% { color: #2563eb; } } :is([data-theme-resolved="light"]) .price-tagline { color: var(--text-body); } :is([data-theme-resolved="light"]) .price-trial { color: #16a34a; } :is([data-theme-resolved="light"]) .price-features-count { color: var(--text-body); } :is([data-theme-resolved="light"]) .no-risk-list li { color: var(--text-body); } :is([data-theme-resolved="light"]) .no-risk-list li::before { color: #16a34a; } :is([data-theme-resolved="light"]) .justify-body { color: var(--text-body); } :is([data-theme-resolved="light"]) .justify-body strong { color: var(--text-heading); } :is([data-theme-resolved="light"]) .feature-category { background: var(--surface-secondary); border-color: var(--border-default); } :is([data-theme-resolved="light"]) .feature-category h3 { color: var(--text-heading); } :is([data-theme-resolved="light"]) .feature-list li { color: var(--text-body); } html[data-theme-resolved="light"] .comparison-table { border-color: var(--border-default); } html[data-theme-resolved="light"] .comparison-table thead th, html[data-theme-resolved="light"] .comparison-table thead th:first-child, html[data-theme-resolved="light"] .comparison-table thead th:nth-child(2), html[data-theme-resolved="light"] .comparison-table thead th:nth-child(3) { background: var(--surface-secondary); color: var(--text-heading); border-color: var(--border-default); } html[data-theme-resolved="light"] .comparison-table thead th:nth-child(2) { background: rgba(37, 99, 235, 0.08); color: #1e40af; } html[data-theme-resolved="light"] .comparison-table tbody td, html[data-theme-resolved="light"] .comparison-table tbody td:first-child, html[data-theme-resolved="light"] .comparison-table tbody td:nth-child(2), html[data-theme-resolved="light"] .comparison-table tbody td:nth-child(3) { border-color: var(--border-default); color: var(--text-body); } html[data-theme-resolved="light"] .comparison-table tbody td:first-child { color: var(--text-heading); } html[data-theme-resolved="light"] .comparison-table tbody tr:nth-child(even) td { background: var(--surface-secondary); } html[data-theme-resolved="light"] .comparison-table tbody tr:nth-child(odd) td { background: var(--surface-primary, #ffffff); } html[data-theme-resolved="light"] .comparison-table .check-yes { color: #16a34a; } html[data-theme-resolved="light"] .comparison-table .check-no { color: #dc2626; } html[data-theme-resolved="light"] .comparison-table .check-partial { color: #b45309; } /* ── Page-specific :root variable overrides ── */ /* Privacy/TOS use --bg-primary, --text-primary, etc. */ /* Social login uses --card, --border, --text, etc. */ /* Canvass uses --bg-main, --bg-surface, etc. */ [data-theme-resolved="light"] { /* Privacy / TOS variables */ --bg-primary: #f8fafc; --bg-secondary: #ffffff; --text-primary: #0f172a; --border-subtle: #e2e8f0; --accent-green: #22c55e; /* Social login / canvass variables */ --card: rgba(255, 255, 255, 0.95); --border: #e2e8f0; --bg-main: #f8fafc; --bg-surface: #ffffff; --text-dim: #64748b; } :is([data-theme-resolved="light"]) .info-card { background: var(--surface-primary); border-color: var(--border-default); box-shadow: var(--shadow-sm); } :is([data-theme-resolved="light"]) .highlight-box { background: linear-gradient(135deg, rgba(34, 197, 94, 0.04) 0%, rgba(16, 185, 129, 0.02) 100%); border-color: rgba(34, 197, 94, 0.2); } :is([data-theme-resolved="light"]) .note-box { background: rgba(34, 197, 94, 0.04); } :is([data-theme-resolved="light"]) .info-grid .info-card h3 { color: var(--text-heading); } :is([data-theme-resolved="light"]) .info-grid .info-card p { color: var(--text-body); } /* ── Password Reset & Email Reset Pages ── */ :is([data-theme-resolved="light"]) .reset-card, :is([data-theme-resolved="light"]) .request-card { background: var(--surface-primary); border: 1px solid var(--border-default); box-shadow: var(--shadow-lg); } :is([data-theme-resolved="light"]) .pill { background: var(--surface-secondary); border-color: var(--border-default); color: var(--text-secondary); } :is([data-theme-resolved="light"]) .reset-input, :is([data-theme-resolved="light"]) .request-card input[type="email"], :is([data-theme-resolved="light"]) .request-card input[type="password"], :is([data-theme-resolved="light"]) .reset-card input { background: var(--surface-secondary); border-color: var(--border-default); color: var(--text-body); } :is([data-theme-resolved="light"]) .reset-input:focus, :is([data-theme-resolved="light"]) .request-card input:focus, :is([data-theme-resolved="light"]) .reset-card input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); background: var(--surface-primary); } :is([data-theme-resolved="light"]) .reset-status.success, :is([data-theme-resolved="light"]) .status-box.success { background: rgba(34, 197, 94, 0.05); border-color: rgba(34, 197, 94, 0.25); color: #15803d; } :is([data-theme-resolved="light"]) .reset-status.error, :is([data-theme-resolved="light"]) .status-box.error { background: rgba(239, 68, 68, 0.05); border-color: rgba(239, 68, 68, 0.25); color: #dc2626; } /* ── Social Login Page ── */ :is([data-theme-resolved="light"]) .status-card { background: var(--surface-primary); border-color: var(--border-default); box-shadow: var(--shadow-lg); } :is([data-theme-resolved="light"]) .status-card h1 { color: var(--text-heading); } :is([data-theme-resolved="light"]) .status-card p { color: var(--text-secondary); } :is([data-theme-resolved="light"]) .status-icon { background: rgba(56, 189, 248, 0.06); border-color: rgba(56, 189, 248, 0.2); } :is([data-theme-resolved="light"]) .status-btn.primary { box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2); } :is([data-theme-resolved="light"]) .status-btn.secondary { border-color: var(--border-default); color: var(--text-body); } :is([data-theme-resolved="light"]) .status-btn.secondary:hover { background: var(--surface-secondary); } /* ── Payment Page ── */ :is([data-theme-resolved="light"]) .shell { background: var(--surface-primary); box-shadow: var(--shadow-lg); } :is([data-theme-resolved="light"]) .panel-hero { background: radial-gradient(circle at top left, rgba(59, 130, 246, 0.08), transparent 55%), radial-gradient(circle at bottom right, rgba(34, 197, 94, 0.08), transparent 55%), #f8fafc; color: var(--text-heading); } /* Hero copy uses hardcoded light-on-dark hex in payment.html; restore contrast on the light hero background so the kicker, body, bullet list, and footer stay readable. */ :is([data-theme-resolved="light"]) .panel-hero .hero-kicker { color: var(--text-secondary); } :is([data-theme-resolved="light"]) .panel-hero .hero-body { color: var(--text-body); } :is([data-theme-resolved="light"]) .panel-hero .hero-footer { color: var(--text-secondary); } :is([data-theme-resolved="light"]) .hero-logo-mark { background: var(--surface-primary); box-shadow: 0 0 0 1px var(--border-default); } :is([data-theme-resolved="light"]) .hero-metric { background: var(--surface-secondary); border-color: var(--border-default); } :is([data-theme-resolved="light"]) .hero-metric-value { color: var(--text-heading); } :is([data-theme-resolved="light"]) .hero-metric-label { color: var(--text-secondary); } /* ── Start / Signup Page ── */ :is([data-theme-resolved="light"]) .demo-card { background: var(--surface-secondary); border-color: var(--border-default); } :is([data-theme-resolved="light"]) .demo-card:hover { border-color: var(--primary); } :is([data-theme-resolved="light"]) .feature-card { background: var(--surface-primary); border-color: var(--border-default); } :is([data-theme-resolved="light"]) .feature-card:hover { border-color: var(--primary); } :is([data-theme-resolved="light"]) .feature-card h3 { color: var(--text-heading); } :is([data-theme-resolved="light"]) .feature-card p { color: var(--text-body); } /* ── Success Page ── */ :is([data-theme-resolved="light"]) .success-container { background: var(--surface-primary); border-color: var(--border-default); box-shadow: var(--shadow-lg); } :is([data-theme-resolved="light"]) .trial-info { background: rgba(37, 99, 235, 0.04); border-color: rgba(37, 99, 235, 0.15); } :is([data-theme-resolved="light"]) .trial-info h3 { color: var(--text-heading); } :is([data-theme-resolved="light"]) .trial-info p { color: var(--text-body); } /* Admin page intentionally excluded from light theme */ /* ── Canvass / Map Page ── */ :is([data-theme-resolved="light"]) .topbar { background: var(--surface-primary); border-bottom: 1px solid var(--border-default); box-shadow: var(--shadow-sm); } :is([data-theme-resolved="light"]) .topbar .back-btn { color: var(--text-body); border-color: var(--border-default); } :is([data-theme-resolved="light"]) .mode-btn { color: var(--text-secondary); border-color: var(--border-default); } :is([data-theme-resolved="light"]) .mode-btn.active { background: var(--primary); color: #fff; } :is([data-theme-resolved="light"]) .plan-drawer { background: var(--surface-primary); border-color: var(--border-default); box-shadow: var(--shadow-lg); } :is([data-theme-resolved="light"]) .plan-splash-card { background: var(--surface-primary); border-color: var(--border-default); box-shadow: var(--shadow-lg); } :is([data-theme-resolved="light"]) .plan-splash-overlay { background: rgba(0, 0, 0, 0.2); } :is([data-theme-resolved="light"]) .plan-filter-bar { background: var(--surface-secondary); border-color: var(--border-default); } :is([data-theme-resolved="light"]) .map-legend { background: var(--surface-primary); border-color: var(--border-default); } :is([data-theme-resolved="light"]) .toast { background: var(--surface-primary); border-color: var(--border-default); box-shadow: var(--shadow-md); color: var(--text-body); } /* Demo page intentionally excluded from light theme */ /* ── Booking Page ── */ :is([data-theme-resolved="light"]) .booking-loading { background: var(--bg); color: var(--text-body); } /* ── Skip link ── */ :is([data-theme-resolved="light"]) .skip-link { background: var(--surface-primary); color: var(--text-body); border-color: var(--border-default); } /* ── Back links ── */ :is([data-theme-resolved="light"]) .back-link { color: var(--text-secondary); } :is([data-theme-resolved="light"]) .back-link:hover { color: var(--text-heading); } /* ── Generic form styling (shared across auth pages) ── */ :is([data-theme-resolved="light"]) .form-title, :is([data-theme-resolved="light"]) .card-title { color: var(--text-heading); } :is([data-theme-resolved="light"]) .form-subtitle { color: var(--text-secondary); } /* ── Login Modal ── */ :is([data-theme-resolved="light"]) .login-modal { background: rgba(0, 0, 0, 0.3); } :is([data-theme-resolved="light"]) .login-modal-content { background: rgba(255, 255, 255, 0.98); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-color: var(--border-default); box-shadow: var(--shadow-lg); } :is([data-theme-resolved="light"]) .login-modal-title { color: var(--text-heading); } :is([data-theme-resolved="light"]) .login-modal-close { color: var(--text-secondary); } :is([data-theme-resolved="light"]) .login-modal-close:hover { background: var(--surface-secondary); color: var(--text-heading); } :is([data-theme-resolved="light"]) .login-social-btn { background: var(--surface-secondary); border-color: var(--border-default); color: var(--text-body); } :is([data-theme-resolved="light"]) .login-social-btn:hover { background: var(--surface-primary); border-color: var(--border-hover); } :is([data-theme-resolved="light"]) .login-divider-line { background: var(--border-default); } :is([data-theme-resolved="light"]) .login-divider-text { color: var(--text-secondary); } :is([data-theme-resolved="light"]) .login-label { color: var(--text-body); } :is([data-theme-resolved="light"]) .login-input { background: var(--surface-secondary); border-color: var(--border-default); color: var(--text-body); } :is([data-theme-resolved="light"]) .login-input:focus { background: var(--surface-primary); border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } :is([data-theme-resolved="light"]) .login-input::placeholder { color: var(--text-tertiary); } :is([data-theme-resolved="light"]) .login-mode-toggle { background: var(--surface-secondary); border-color: var(--border-default); } :is([data-theme-resolved="light"]) .login-mode-btn { color: var(--text-secondary); } :is([data-theme-resolved="light"]) .login-mode-btn:hover { color: var(--text-heading); } :is([data-theme-resolved="light"]) .login-mode-btn.active { background: rgba(37, 99, 235, 0.1); color: var(--primary); } :is([data-theme-resolved="light"]) .login-submit { box-shadow: 0 4px 15px rgba(37, 99, 235, 0.25); } :is([data-theme-resolved="light"]) .login-submit-outline { border-color: var(--border-default); color: var(--text-body); } :is([data-theme-resolved="light"]) .login-submit-outline:hover { background: var(--surface-secondary); } :is([data-theme-resolved="light"]) .login-forgot { color: var(--primary); } :is([data-theme-resolved="light"]) .login-forgot:hover { color: var(--primary-dark); } :is([data-theme-resolved="light"]) .login-footer { color: var(--text-secondary); border-top-color: var(--border-default); } :is([data-theme-resolved="light"]) .login-footer a { color: var(--primary); } :is([data-theme-resolved="light"]) .login-footer a:hover { color: var(--primary-dark); } :is([data-theme-resolved="light"]) .magic-link-success-title { color: var(--text-heading); } :is([data-theme-resolved="light"]) .magic-link-success-text { color: var(--text-secondary); } :is([data-theme-resolved="light"]) .login-error { background: rgba(239, 68, 68, 0.06); border-color: rgba(239, 68, 68, 0.2); color: #dc2626; } /* ── Phone Verification Modal ── */ :is([data-theme-resolved="light"]) .phone-verify-overlay { background: rgba(0, 0, 0, 0.3); } :is([data-theme-resolved="light"]) .phone-verify-modal { background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); border-color: var(--border-default); box-shadow: var(--shadow-lg); } :is([data-theme-resolved="light"]) .phone-verify-close { color: var(--text-secondary); } :is([data-theme-resolved="light"]) .phone-verify-close:hover { color: var(--text-heading); background: var(--surface-secondary); } :is([data-theme-resolved="light"]) .phone-verify-modal h2 { color: var(--text-heading); } :is([data-theme-resolved="light"]) .phone-verify-subtitle { color: var(--text-secondary); } :is([data-theme-resolved="light"]) .phone-verify-subtitle strong { color: var(--text-heading); } :is([data-theme-resolved="light"]) .phone-verify-form label { color: var(--text-body); } :is([data-theme-resolved="light"]) .phone-verify-form input { background: var(--surface-secondary); border-color: var(--border-default); color: var(--text-body); } :is([data-theme-resolved="light"]) .phone-verify-form input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } :is([data-theme-resolved="light"]) .phone-verify-form input::placeholder { color: var(--text-tertiary); } :is([data-theme-resolved="light"]) .phone-verify-btn.secondary { background: var(--surface-secondary); border-color: var(--border-default); color: var(--text-body); } :is([data-theme-resolved="light"]) .phone-verify-btn.secondary:hover:not(:disabled) { background: var(--surface-primary); color: var(--text-heading); } :is([data-theme-resolved="light"]) .phone-verify-btn.text { color: var(--text-secondary); } :is([data-theme-resolved="light"]) .phone-verify-btn.text:hover { color: var(--text-heading); } :is([data-theme-resolved="light"]) .phone-verify-consent-label { color: var(--text-secondary); } /* ── Hero GIF Phone Frame ── */ :is([data-theme-resolved="light"]) .hero-gif-phone { background: #e2e8f0; box-shadow: 0 0 0 2px #cbd5e1, 0 18px 40px -10px rgba(0, 0, 0, 0.15); } :is([data-theme-resolved="light"]) .hero-gif-phone img { background: #f1f5f9; } /* ── Sticky CTA ── */ :is([data-theme-resolved="light"]) .sticky-cta { background: rgba(255, 255, 255, 0.98); border-top-color: var(--border-default); box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06); } /* ── Preview Template Controls ── */ :is([data-theme-resolved="light"]) .preview-controls { background: rgba(255, 255, 255, 0.95); border-color: var(--border-default); box-shadow: var(--shadow-md); } :is([data-theme-resolved="light"]) .preview-field input, :is([data-theme-resolved="light"]) .preview-field textarea { background: var(--surface-secondary); border-color: var(--border-default); color: var(--text-body); } :is([data-theme-resolved="light"]) .preview-field input:focus, :is([data-theme-resolved="light"]) .preview-field textarea:focus { background: var(--surface-primary); border-color: var(--primary); } :is([data-theme-resolved="light"]) .preview-style-btn { background: var(--surface-secondary); border-color: var(--border-default); } :is([data-theme-resolved="light"]) .preview-style-btn:hover { background: var(--surface-primary); border-color: var(--border-hover); } :is([data-theme-resolved="light"]) .preview-logo-upload-area { background: var(--surface-secondary); color: var(--text-body); } :is([data-theme-resolved="light"]) .preview-logo-upload-area:hover { background: var(--surface-primary); } /* ── Start / Signup Page Components ── */ :is([data-theme-resolved="light"]) .text-input { background: var(--surface-secondary); border-color: var(--border-default); color: var(--text-body); } :is([data-theme-resolved="light"]) .text-input:focus { background: var(--surface-primary); border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } :is([data-theme-resolved="light"]) .text-input::placeholder { color: var(--text-tertiary); } :is([data-theme-resolved="light"]) .doc-type-group { background: var(--surface-secondary); border-color: var(--border-default); } :is([data-theme-resolved="light"]) .doc-type-or { color: var(--text-heading); } :is([data-theme-resolved="light"]) .doc-type-btn { color: var(--text-secondary); } :is([data-theme-resolved="light"]) .doc-type-btn:hover { color: var(--text-heading); } :is([data-theme-resolved="light"]) .doc-type-btn.active { background: var(--primary); color: #fff; } :is([data-theme-resolved="light"]) .template-toggle { background: var(--surface-secondary); border-color: var(--border-default); } :is([data-theme-resolved="light"]) .template-btn { color: var(--text-secondary); } :is([data-theme-resolved="light"]) .template-btn:hover { color: var(--text-heading); } :is([data-theme-resolved="light"]) .template-btn.active { background: rgba(22, 163, 74, 0.1); color: #16a34a; } :is([data-theme-resolved="light"]) .email-input { background: var(--surface-secondary); border-color: var(--border-default); color: var(--text-body); } :is([data-theme-resolved="light"]) .email-input:focus { background: var(--surface-primary); border-color: var(--primary); } :is([data-theme-resolved="light"]) .email-input::placeholder { color: var(--text-tertiary); } :is([data-theme-resolved="light"]) .email-gate { background: rgba(22, 163, 74, 0.06); border-color: rgba(22, 163, 74, 0.2); } :is([data-theme-resolved="light"]) .email-gate h4 { color: var(--text-heading); } :is([data-theme-resolved="light"]) .email-gate p { color: var(--text-secondary); } :is([data-theme-resolved="light"]) .social-btn { background: var(--surface-secondary); border-color: var(--border-default); color: var(--text-body); } :is([data-theme-resolved="light"]) .social-btn:hover { background: var(--surface-primary); border-color: var(--border-hover); } :is([data-theme-resolved="light"]) .social-btn.facebook { background: #1877F2; color: white; border-color: #1877F2; } :is([data-theme-resolved="light"]) .social-btn.facebook:hover { background: #1565d8; border-color: #1565d8; } :is([data-theme-resolved="light"]) .gate-divider { color: var(--text-secondary); } :is([data-theme-resolved="light"]) .gate-divider-line { background: var(--border-default); } :is([data-theme-resolved="light"]) .input-description { color: var(--text-secondary); } :is([data-theme-resolved="light"]) .mic-hint { color: var(--text-secondary); } :is([data-theme-resolved="light"]) .output-section { border-top-color: var(--border-default); } :is([data-theme-resolved="light"]) .output-header h3 { color: var(--text-heading); } :is([data-theme-resolved="light"]) .pdf-preview-wrapper { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); } :is([data-theme-resolved="light"]) .quick-input-section > p { color: var(--text-heading) !important; } :is([data-theme-resolved="light"]) .demo-card { background: var(--bg-card); border-color: var(--border-default); } /* ── Feature & Industry Page Shared Components ── */ :is([data-theme-resolved="light"]) .hero-section { background: var(--bg); } :is([data-theme-resolved="light"]) .hero-title { color: var(--text-heading); } :is([data-theme-resolved="light"]) .hero-subtitle { color: var(--text-body); } :is([data-theme-resolved="light"]) .hero-badge { /* Hero badges are now flat colored text (no pill), so no light-mode background/border — just keep a legible color on the light surface. */ background: none; border: 0; color: var(--primary); } :is([data-theme-resolved="light"]) .hero-no-cc { color: var(--text-secondary); } :is([data-theme-resolved="light"]) .proof-point { background: var(--surface-secondary); border-color: var(--border-default); } :is([data-theme-resolved="light"]) .proof-green { color: #16a34a !important; border-color: rgba(22, 163, 74, 0.3) !important; } :is([data-theme-resolved="light"]) .proof-blue { color: var(--primary) !important; border-color: rgba(37, 99, 235, 0.3) !important; } :is([data-theme-resolved="light"]) .proof-purple { color: #7c3aed !important; border-color: rgba(124, 58, 237, 0.3) !important; } :is([data-theme-resolved="light"]) .proof-yellow { color: #b45309 !important; border-color: rgba(180, 83, 9, 0.3) !important; } :is([data-theme-resolved="light"]) .stat-card { background: var(--surface-primary); border-color: var(--border-default); box-shadow: var(--shadow-sm); } :is([data-theme-resolved="light"]) .stat-label { color: var(--text-secondary); } :is([data-theme-resolved="light"]) .stat-value { color: var(--text-heading); } :is([data-theme-resolved="light"]) .stat-value-green { color: #16a34a; } :is([data-theme-resolved="light"]) .stat-value-blue { color: var(--primary); } :is([data-theme-resolved="light"]) .stat-value-yellow { color: #b45309; } :is([data-theme-resolved="light"]) .feature-section { border-bottom-color: var(--border-default); } :is([data-theme-resolved="light"]) .feature-label { color: var(--primary); } :is([data-theme-resolved="light"]) .feature-title { color: var(--text-heading); } :is([data-theme-resolved="light"]) .feature-body { color: var(--text-body); } :is([data-theme-resolved="light"]) .feature-body strong { color: var(--text-heading); } :is([data-theme-resolved="light"]) .feature-list li { color: var(--text-body); } :is([data-theme-resolved="light"]) .noaa-callout { color: var(--text-body) !important; background: rgba(251, 191, 36, 0.12); } :is([data-theme-resolved="light"]) .noaa-callout strong { color: var(--text-heading); } :is([data-theme-resolved="light"]) .feature-image img { border-color: var(--border-default); box-shadow: var(--shadow-md); } :is([data-theme-resolved="light"]) .step-card { background: var(--surface-primary); border-color: var(--border-default); box-shadow: var(--shadow-sm); } :is([data-theme-resolved="light"]) .step-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); } :is([data-theme-resolved="light"]) .step-card-title { color: var(--text-heading); } :is([data-theme-resolved="light"]) .step-card-desc { color: var(--text-secondary); } :is([data-theme-resolved="light"]) .workflow-card { background: var(--surface-primary); border-color: var(--border-default); box-shadow: var(--shadow-sm); } :is([data-theme-resolved="light"]) .workflow-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); } :is([data-theme-resolved="light"]) .workflow-card-title { color: var(--text-heading); } :is([data-theme-resolved="light"]) .workflow-card-desc { color: var(--text-secondary); } :is([data-theme-resolved="light"]) .testimonial-card { background: var(--surface-secondary); color: var(--text-body); } :is([data-theme-resolved="light"]) .testimonial-card p { color: var(--text-body) !important; } :is([data-theme-resolved="light"]) .testimonial-card cite { color: var(--text-secondary) !important; } :is([data-theme-resolved="light"]) .related-card { background: var(--surface-primary); border-color: var(--border-default); color: var(--text-body); box-shadow: var(--shadow-sm); } :is([data-theme-resolved="light"]) .related-card:hover { border-color: var(--primary); background: rgba(37, 99, 235, 0.03); color: var(--text-heading); box-shadow: var(--shadow-md); } :is([data-theme-resolved="light"]) .btn-secondary { border-color: var(--border-default); color: var(--text-body); } :is([data-theme-resolved="light"]) .btn-secondary:hover { border-color: var(--border-hover); color: var(--text-heading); } :is([data-theme-resolved="light"]) .hero-estimate-svg { filter: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.1)); } :is([data-theme-resolved="light"]) .section-content { color: var(--text-body); } :is([data-theme-resolved="light"]) .section-content strong { color: var(--text-heading); } /* Inline-styled element overrides for feature/industry pages */ :is([data-theme-resolved="light"]) .testimonial-section blockquote { color: var(--text-heading) !important; } :is([data-theme-resolved="light"]) .testimonial-section cite { color: var(--text-secondary) !important; } :is([data-theme-resolved="light"]) .hero-proof-points .proof-point { color: var(--text-body); } /* ── OLED/P3 + Section Wrapper Overrides for Light Mode ── */ :is([data-theme-resolved="light"]) .section-title { background: none !important; -webkit-background-clip: unset !important; background-clip: unset !important; -webkit-text-fill-color: var(--text-heading) !important; color: var(--text-heading) !important; } :is([data-theme-resolved="light"]) .section-title::after { background: linear-gradient(90deg, #2563eb, #16a34a) !important; } :is([data-theme-resolved="light"]) .section-subtitle { color: var(--text-secondary); } :is([data-theme-resolved="light"]) .hero-highlight { background-image: linear-gradient(to right, #2563eb, #059669) !important; -webkit-text-fill-color: transparent !important; } :is([data-theme-resolved="light"]) main > .section-wrapper:nth-child(odd) { background: var(--surface-secondary) !important; } :is([data-theme-resolved="light"]) main > .section-wrapper:nth-child(even) { background: var(--surface-primary) !important; } :is([data-theme-resolved="light"]) .section-wrapper { border-bottom-color: var(--border-default); } :is([data-theme-resolved="light"]) .section-wrapper-bordered { border-top-color: var(--border-default); } :is([data-theme-resolved="light"]) .section-wrapper img:not([role="presentation"]) { filter: none; } /* Inline-styled blockquote/cite text for light mode */ :is([data-theme-resolved="light"]) #social-proof blockquote { color: var(--text-heading) !important; } :is([data-theme-resolved="light"]) #social-proof cite { color: var(--text-secondary) !important; } :is([data-theme-resolved="light"]) #social-proof div[style] span { color: var(--text-secondary) !important; } :is([data-theme-resolved="light"]) #social-proof span[style*="font-weight"] { color: var(--text-heading) !important; } :is([data-theme-resolved="light"]) #social-proof span[style*="color: #60a5fa"] { color: var(--primary) !important; } /* Inline-styled paragraph text in problem/feature sections */ :is([data-theme-resolved="light"]) .section-content p[style*="color: #cbd5e1"] { color: var(--text-body) !important; } :is([data-theme-resolved="light"]) .section-content p[style*="color: #cbd5e1"] strong { color: var(--text-heading) !important; } /* Hero section background override */ :is([data-theme-resolved="light"]) .hero-section { background: var(--bg) !important; } /* Final CTA section */ :is([data-theme-resolved="light"]) .final-cta { background: var(--surface-secondary) !important; border-color: var(--border-default); } :is([data-theme-resolved="light"]) .final-cta-title { -webkit-text-fill-color: var(--text-heading) !important; background: none !important; } :is([data-theme-resolved="light"]) .hero-subtitle { color: var(--text-body) !important; }