/* ============================================ FLAIRE — Nexus design system overlay Scoped under html[data-theme="light"] so dark mode is untouched. Pure design-system pass: colors, type, radii, shadows, buttons, surfaces. No content, layout, or markup changes. ============================================ */ /* ── TOKENS ────────────────────────────────── */ html[data-theme="light"] { /* Nexus surfaces */ --nx-bg: #FAFAF7; --nx-surface: #FFFFFF; --nx-surface-2: #F5F4ED; --nx-border: rgba(38, 33, 92, 0.08); --nx-border-2: rgba(38, 33, 92, 0.16); /* Nexus text */ --nx-text: #1A1830; --nx-text-2: #5F5C7A; --nx-text-3: #8A87A1; /* Nexus indigo scale */ --nx-indigo-50: #EEEDFE; --nx-indigo-100: #CECBF6; --nx-indigo-200: #AFA9EC; --nx-indigo-400: #7F77DD; --nx-indigo-600: #534AB7; --nx-indigo-800: #3C3489; --nx-indigo-900: #26215C; /* Nexus secondary accents (for variety in cards) */ --nx-teal-50: #E1F5EE; --nx-teal-600: #0F6E56; --nx-amber-50: #FAEEDA; --nx-amber-600: #854F0B; --nx-coral-50: #FAECE7; --nx-coral-600: #993C1D; --nx-pink-50: #FBEAF0; --nx-pink-600: #993556; --nx-green: #1D9E75; /* Map FLAIRE tokens onto Nexus palette */ --cream: #FAFAF7; --white: #FFFFFF; --navy: #26215C; --ink: #1A1830; --ink-soft: #5F5C7A; --ink-muted: #8A87A1; --border: rgba(38, 33, 92, 0.08); --border-soft: rgba(38, 33, 92, 0.08); --flaire-purple-50: #EEEDFE; --flaire-purple-100: #CECBF6; --flaire-purple-200: #AFA9EC; --flaire-purple-400: #7F77DD; --flaire-purple-600: #534AB7; --flaire-purple-800: #3C3489; --flaire-purple-900: #26215C; --flaire-indigo-50: #EEEDFE; --flaire-indigo-600: #534AB7; --flaire-indigo-800: #3C3489; --flaire-gray-50: #FAFAF7; --flaire-gray-100: #F5F4ED; --flaire-gray-200: #E5E2D8; --flaire-gray-500: #8A87A1; --flaire-gray-700: #5F5C7A; --flaire-gray-900: #1A1830; --green: #534AB7; --green-mid: #7F77DD; --green-light: #EEEDFE; --green-border: rgba(83, 74, 183, 0.18); --erp: #3C3489; --crm: #534AB7; --cms: #0F6E56; --erp-light: #EEEDFE; --crm-light: #EEEDFE; --cms-light: #E1F5EE; --helpdesk: #993556; --helpdesk-light: #FBEAF0; --accent: #534AB7; --accent-hover: #3C3489; --accent-light: #EEEDFE; --accent-border: rgba(83, 74, 183, 0.18); /* Radii */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; /* Shadows — Nexus soft */ --shadow-sm: 0 1px 2px rgba(38, 33, 92, 0.04); --shadow: 0 1px 2px rgba(38, 33, 92, 0.04), 0 4px 12px -2px rgba(38, 33, 92, 0.06); --shadow-lg: 0 1px 2px rgba(38, 33, 92, 0.04), 0 12px 40px -8px rgba(38, 33, 92, 0.10); } /* ── BASE ──────────────────────────────────── */ html[data-theme="light"] body { background: var(--nx-bg); color: var(--nx-text-2); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3, html[data-theme="light"] h4, html[data-theme="light"] h5, html[data-theme="light"] h6 { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--nx-text); letter-spacing: -0.022em; } html[data-theme="light"] ::selection { background: rgba(127, 119, 221, 0.22); color: var(--nx-text); } /* ── NAVIGATION ────────────────────────────── */ html[data-theme="light"] .site-nav { background: rgba(250, 250, 247, 0.85); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--nx-border); } html[data-theme="light"] .site-nav.scrolled { background: rgba(250, 250, 247, 0.92); box-shadow: 0 1px 0 var(--nx-border), 0 6px 20px rgba(38, 33, 92, 0.04); border-bottom-color: transparent; } html[data-theme="light"] .site-nav::after { background: linear-gradient(90deg, var(--nx-indigo-400), var(--nx-indigo-600)); height: 1px; opacity: .5; } html[data-theme="light"] .nav-logo, html[data-theme="light"] .nav-logo .wordmark, html[data-theme="light"] .nav-logo .wordmark[style*="color:#fff"] { color: var(--nx-text) !important; } html[data-theme="light"] .nav-logo .wordmark-accent { color: var(--nx-indigo-600) !important; } html[data-theme="light"] .nav-logo svg rect[fill="white"], html[data-theme="light"] .nav-logo svg rect[fill="#FFFFFF"], html[data-theme="light"] .nav-logo svg rect[fill="#ffffff"] { fill: var(--nx-indigo-800); } html[data-theme="light"] .nav-logo svg rect[fill="#7F77DD"] { fill: var(--nx-indigo-600); } html[data-theme="light"] .nav-logo svg rect[fill="#534AB7"] { fill: var(--nx-indigo-400); } /* Product context badge (NOVA / ATLAS / etc.) next to the wordmark */ html[data-theme="light"] .nav-logo-product { color: var(--nx-indigo-800) !important; background: var(--nx-indigo-50); border-left: 2px solid var(--nx-indigo-400); font-weight: 600; } html[data-theme="light"] .nav-links a, html[data-theme="light"] .nav-dropdown-btn { color: var(--nx-text-2); font-weight: 500; background: transparent; } html[data-theme="light"] .nav-links a:hover, html[data-theme="light"] .nav-links a.active, html[data-theme="light"] .nav-dropdown-btn:hover { color: var(--nx-text); background: transparent; } html[data-theme="light"] .nav-toggle { color: var(--nx-text); } /* Dropdowns / mega panels — opaque Nexus surface */ html[data-theme="light"] .nav-dropdown-menu, html[data-theme="light"] .mega-panel { background: #FFFFFF; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--nx-border-2); box-shadow: 0 1px 2px rgba(38, 33, 92, 0.04), 0 20px 50px -10px rgba(38, 33, 92, 0.18); } html[data-theme="light"] .mega-panel-bar { background: linear-gradient(90deg, var(--nx-indigo-600), var(--nx-indigo-400)); color: rgba(255, 255, 255, 0.95); } html[data-theme="light"] .mega-heading, html[data-theme="light"] .mega-cat-heading { color: var(--nx-text-3); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; } html[data-theme="light"] .mega-link, html[data-theme="light"] .mega-product-name, html[data-theme="light"] .mega-feature-title { color: var(--nx-text); } html[data-theme="light"] .mega-product-desc, html[data-theme="light"] .mega-feature-desc { color: var(--nx-text-2); } html[data-theme="light"] .mega-product-tile:hover, html[data-theme="light"] .mega-feature:hover, html[data-theme="light"] .mega-link:hover, html[data-theme="light"] .mega-cat-product-head:hover { background: var(--nx-surface-2); } /* ── BUTTONS ───────────────────────────────── */ /* Shared sizing applied to every variant so they render identically */ html[data-theme="light"] .btn-primary, html[data-theme="light"] .btn-dark, html[data-theme="light"] .btn-green, html[data-theme="light"] .btn-light, html[data-theme="light"] .btn-ghost, html[data-theme="light"] .site-nav .btn-primary, html[data-theme="light"] .site-nav .btn-ghost, html[data-theme="light"] .hero-ctas .btn-dark, html[data-theme="light"] .hero-ctas .btn-light { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; padding: 0 18px; height: 38px; border-radius: var(--radius-md); border-width: 1px; border-style: solid; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; letter-spacing: -0.005em; } html[data-theme="light"] .btn-primary, html[data-theme="light"] .btn-dark, html[data-theme="light"] .btn-green, html[data-theme="light"] .site-nav .btn-primary { background: var(--nx-indigo-800); color: #FFFFFF; border: 1px solid var(--nx-indigo-800); font-family: 'Inter', sans-serif; font-weight: 500; font-size: 14px; padding: 9px 18px; border-radius: var(--radius-md); box-shadow: 0 1px 2px rgba(38, 33, 92, 0.10); transition: background .15s ease, transform .15s ease, box-shadow .15s ease; } html[data-theme="light"] .btn-primary:hover, html[data-theme="light"] .btn-dark:hover, html[data-theme="light"] .btn-green:hover, html[data-theme="light"] .site-nav .btn-primary:hover { background: var(--nx-indigo-900); border-color: var(--nx-indigo-900); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(38, 33, 92, 0.16); } html[data-theme="light"] .site-nav .btn-primary::before { display: none; } html[data-theme="light"] .btn-light, html[data-theme="light"] .btn-ghost, html[data-theme="light"] .site-nav .btn-ghost { background: transparent; color: var(--nx-text); border: 1px solid var(--nx-border-2); font-family: 'Inter', sans-serif; font-weight: 500; font-size: 14px; padding: 9px 18px; border-radius: var(--radius-md); box-shadow: none; transition: background .15s ease, border-color .15s ease, transform .15s ease; } html[data-theme="light"] .btn-light:hover, html[data-theme="light"] .btn-ghost:hover, html[data-theme="light"] .site-nav .btn-ghost:hover { background: var(--nx-surface); border-color: var(--nx-indigo-200); transform: translateY(-1px); color: var(--nx-text); } /* Hero CTAs override (they were styled for dark hero bg) */ html[data-theme="light"] .hero-ctas .btn-dark { background: var(--nx-indigo-800); color: #FFFFFF; border: 1px solid var(--nx-indigo-800); font-weight: 500; } html[data-theme="light"] .hero-ctas .btn-dark:hover { background: var(--nx-indigo-900); border-color: var(--nx-indigo-900); box-shadow: 0 4px 12px rgba(38, 33, 92, 0.16); } html[data-theme="light"] .hero-ctas .btn-light { background: transparent; color: var(--nx-text); border: 1px solid var(--nx-border-2); font-weight: 500; } html[data-theme="light"] .hero-ctas .btn-light:hover { background: var(--nx-surface); border-color: var(--nx-indigo-200); color: var(--nx-text); } /* Plan / column CTAs — same system */ html[data-theme="light"] .col-cta-btn, html[data-theme="light"] .col-cta-btn[style], html[data-theme="light"] .col-cta-btn.crm, html[data-theme="light"] .col-cta-btn.erp, html[data-theme="light"] .col-cta-btn.suite, html[data-theme="light"] .plan-card .cta-btn, html[data-theme="light"] .plan-card.trial .cta-btn, html[data-theme="light"] .plan-card.starter .cta-btn, html[data-theme="light"] .plan-card.enterprise .cta-btn, html[data-theme="light"] .cta-btn { background: transparent !important; color: var(--nx-text) !important; border: 1px solid var(--nx-border-2) !important; box-shadow: none !important; font-weight: 500; border-radius: var(--radius-md); } html[data-theme="light"] .col-cta-btn:hover, html[data-theme="light"] .plan-card .cta-btn:hover, html[data-theme="light"] .cta-btn:hover { background: var(--nx-surface) !important; border-color: var(--nx-indigo-200) !important; transform: translateY(-1px); opacity: 1; } html[data-theme="light"] .plan-card.pro .cta-btn { background: var(--nx-indigo-800) !important; color: #FFFFFF !important; border: 1px solid var(--nx-indigo-800) !important; box-shadow: 0 1px 2px rgba(38, 33, 92, 0.10) !important; } html[data-theme="light"] .plan-card.pro .cta-btn:hover { background: var(--nx-indigo-900) !important; border-color: var(--nx-indigo-900) !important; box-shadow: 0 4px 12px rgba(38, 33, 92, 0.16) !important; } /* ── HERO ──────────────────────────────────── */ html[data-theme="light"] section:has(.hero-wrap) { background: var(--nx-bg); position: relative; } html[data-theme="light"] section:has(.hero-wrap)::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 900px; height: 720px; max-width: 100%; background: radial-gradient(circle at center, rgba(127, 119, 221, 0.18) 0%, transparent 60%); pointer-events: none; z-index: 0; } html[data-theme="light"] .hero-wrap { position: relative; z-index: 1; } html[data-theme="light"] .hero-badge { background: var(--nx-indigo-50); color: var(--nx-indigo-800); border: 1px solid rgba(127, 119, 221, 0.25); font-weight: 500; font-size: 13px; padding: 5px 14px; border-radius: 999px; text-transform: none; letter-spacing: 0.005em; gap: 8px; } html[data-theme="light"] .badge-dot { background: var(--nx-indigo-400); box-shadow: 0 0 0 3px rgba(127, 119, 221, 0.20); } html[data-theme="light"] .hero h1, html[data-theme="light"] .hero-title { font-family: 'Inter', sans-serif; font-size: 64px; font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; color: var(--nx-text); background: linear-gradient(180deg, #1A1830 0%, #3C3489 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } html[data-theme="light"] .hero h1 em, html[data-theme="light"] .hero-title em, html[data-theme="light"] .hero-brand { background: linear-gradient(135deg, #6366F1 0%, #A855F7 45%, #06B6D4 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-style: normal; font-weight: 600; } html[data-theme="light"] .hero-sub { font-size: 19px; color: var(--nx-text-2); font-weight: 400; line-height: 1.5; max-width: 560px; } html[data-theme="light"] .hero-cta-sub, html[data-theme="light"] [class*="hero-cta-sub"] { color: var(--nx-text-3) !important; } html[data-theme="light"] .hero-cta-proof, html[data-theme="light"] .hero-cta-proof span, html[data-theme="light"] .hero-cta-proof strong { color: var(--nx-text-2) !important; } html[data-theme="light"] .hero-cta-proof strong { color: var(--nx-text) !important; font-weight: 600; } html[data-theme="light"] .hero-visual { filter: none; animation: none; } /* Dashboard mock — Nexus card */ html[data-theme="light"] .dash { background: var(--nx-surface); border: 1px solid var(--nx-border); border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(38, 33, 92, 0.04), 0 12px 40px -8px rgba(38, 33, 92, 0.10); } html[data-theme="light"] .dash-hdr { background: var(--nx-surface); border-bottom: 1px solid var(--nx-border); } html[data-theme="light"] .dash-title { color: var(--nx-text-2); font-weight: 500; } html[data-theme="light"] .kpi, html[data-theme="light"] .chart-box, html[data-theme="light"] .task { background: var(--nx-surface-2); border: 1px solid var(--nx-border); border-radius: var(--radius-md); } html[data-theme="light"] .kpi-l, html[data-theme="light"] .task-txt { color: var(--nx-text-2); } html[data-theme="light"] .notif { background: var(--nx-indigo-50); border: 1px solid rgba(127, 119, 221, 0.25); color: var(--nx-indigo-800); } /* ── LOGOS / CONNECTORS ────────────────────── */ html[data-theme="light"] .logos-bar { background: var(--nx-bg); border-top: 1px solid var(--nx-border); border-bottom: 1px solid var(--nx-border); } html[data-theme="light"] .logos-lbl { color: var(--nx-text-3); font-weight: 500; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; } html[data-theme="light"] .logo-co { color: var(--nx-text-2); font-weight: 600; } html[data-theme="light"] .connector-chip { background: var(--nx-surface); border: 1px solid var(--nx-border); color: var(--nx-text-2); box-shadow: 0 1px 2px rgba(38, 33, 92, 0.03); } /* ── SECTION HEADINGS ──────────────────────── */ html[data-theme="light"] .sec-badge, html[data-theme="light"] .sec-badge-dark { background: transparent; color: var(--nx-indigo-600); border: 0; font-weight: 600; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; padding: 0; } html[data-theme="light"] .sec-title { color: var(--nx-text); font-weight: 600; font-size: 40px; letter-spacing: -0.025em; line-height: 1.1; } html[data-theme="light"] .sec-sub { color: var(--nx-text-2); font-size: 17px; line-height: 1.5; font-weight: 400; max-width: 560px; } /* Gradient-text titles — reset to solid Nexus text */ html[data-theme="light"] .dark-inner .sec-title, html[data-theme="light"] .ai-inner .sec-title, html[data-theme="light"] .cta-sec .sec-title, html[data-theme="light"] .product-hero .sec-title { background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: initial; color: var(--nx-text); } html[data-theme="light"] .dark-inner .sec-title, html[data-theme="light"] .dark-inner h2 { color: #FFFFFF; } /* ── FEATURE CARDS ─────────────────────────── */ html[data-theme="light"] .feat-card, html[data-theme="light"] .feature-item, html[data-theme="light"] .blog-card, html[data-theme="light"] .roadmap-card, html[data-theme="light"] .changelog-entry, html[data-theme="light"] .status-item, html[data-theme="light"] .faq-item { background: var(--nx-surface); border: 1px solid var(--nx-border); border-radius: var(--radius-lg); box-shadow: none; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; } html[data-theme="light"] .feat-card:hover, html[data-theme="light"] .feature-item:hover, html[data-theme="light"] .blog-card:hover, html[data-theme="light"] .roadmap-card:hover { border-color: var(--nx-border-2); transform: translateY(-2px); box-shadow: 0 1px 2px rgba(38, 33, 92, 0.04), 0 12px 32px -8px rgba(38, 33, 92, 0.10); } html[data-theme="light"] .feat-icon { border-radius: 10px; width: 40px; height: 40px; background: var(--nx-indigo-50); color: var(--nx-indigo-600); } html[data-theme="light"] .feat-icon.erp { background: var(--nx-indigo-50); color: var(--nx-indigo-800); } html[data-theme="light"] .feat-icon.crm { background: var(--nx-indigo-50); color: var(--nx-indigo-600); } html[data-theme="light"] .feat-icon.cms { background: var(--nx-teal-50); color: var(--nx-teal-600); } html[data-theme="light"] .feat-title { color: var(--nx-text); font-weight: 600; } html[data-theme="light"] .feat-desc { color: var(--nx-text-2); font-size: 14px; line-height: 1.55; } /* ── DARK SECTIONS (How It Works, Ecosystem) ── */ /* Keep dark-sec as a contrast moment, but use Nexus indigo gradient */ html[data-theme="light"] .dark-sec { background: radial-gradient(circle at 20% 50%, rgba(127, 119, 221, 0.30) 0%, transparent 40%), radial-gradient(circle at 80% 50%, rgba(174, 169, 236, 0.18) 0%, transparent 40%), linear-gradient(135deg, #26215C 0%, #3C3489 50%, #26215C 100%); color: #FFFFFF; } html[data-theme="light"] .dark-inner .sec-sub { color: rgba(206, 203, 246, 0.85); } html[data-theme="light"] .step-num { background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: initial; color: var(--nx-indigo-200); font-weight: 600; font-size: 44px; letter-spacing: -0.04em; } html[data-theme="light"] .step-title { color: #FFFFFF; font-weight: 600; } html[data-theme="light"] .step-desc { color: rgba(206, 203, 246, 0.85); } html[data-theme="light"] .step-tag { color: var(--nx-indigo-200); font-weight: 500; } /* Cards inside .dark-sec — keep tinted dark surface */ html[data-theme="light"] .dark-sec .feat-card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(206, 203, 246, 0.14); box-shadow: none; color: rgba(255, 255, 255, 0.92); } html[data-theme="light"] .dark-sec .feat-card:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(206, 203, 246, 0.22); box-shadow: none; } html[data-theme="light"] .dark-sec .feat-card .feat-title { color: #FFFFFF; } html[data-theme="light"] .dark-sec .feat-card .feat-desc { color: rgba(206, 203, 246, 0.75); } /* Inline white-on-dark styles inside .dark-sec (industry grid etc.) */ html[data-theme="light"] .dark-sec [style*="color:#fff"], html[data-theme="light"] .dark-sec [style*="color: #fff"], html[data-theme="light"] .dark-sec [style*="color:#FFF"] { color: #FFFFFF !important; } html[data-theme="light"] .dark-sec [style*="color:rgba(255,255,255,.82)"], html[data-theme="light"] .dark-sec [style*="color:rgba(255,255,255,.78)"], html[data-theme="light"] .dark-sec [style*="color:rgba(255,255,255,.7)"] { color: rgba(206, 203, 246, 0.78) !important; } html[data-theme="light"] .dark-sec [style*="color:rgba(255,255,255,.4)"], html[data-theme="light"] .dark-sec [style*="color:rgba(255,255,255,.35)"] { color: rgba(206, 203, 246, 0.48) !important; } /* Hub diagram inside dark-sec */ html[data-theme="light"] .hub-spoke { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(206, 203, 246, 0.16); } html[data-theme="light"] .hub-spoke:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(206, 203, 246, 0.28); } html[data-theme="light"] .hub-spoke-label { color: rgba(255, 255, 255, 0.88); font-weight: 500; } html[data-theme="light"] .hub-center-inner { background: var(--nx-indigo-600); color: #FFFFFF; box-shadow: 0 0 0 8px rgba(127, 119, 221, 0.18), 0 0 0 16px rgba(127, 119, 221, 0.08); } html[data-theme="light"] .hub-center-sub { color: rgba(206, 203, 246, 0.65); } /* ── STATS BAR — light variant ─────────────── */ html[data-theme="light"] .stats-bar { background: var(--nx-bg); color: var(--nx-text-2); border-top: 1px solid var(--nx-border); border-bottom: 1px solid var(--nx-border); } html[data-theme="light"] .stat-number { background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: initial; color: var(--nx-text); font-weight: 600; letter-spacing: -0.03em; } html[data-theme="light"] .stat-label { color: var(--nx-text-3); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; } html[data-theme="light"] .stat-suffix { color: var(--nx-indigo-600); } /* ── TESTIMONIALS / FOUNDING CUSTOMER ──────── */ html[data-theme="light"] .testi-sec { background: var(--nx-bg); border-top: 1px solid var(--nx-border); } html[data-theme="light"] .testi-card, html[data-theme="light"] .testi-quote-card { background: var(--nx-surface); border: 1px solid var(--nx-border); border-radius: var(--radius-lg); box-shadow: none; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; } html[data-theme="light"] .testi-card:hover, html[data-theme="light"] .testi-quote-card:hover { border-color: var(--nx-border-2); transform: translateY(-2px); box-shadow: 0 1px 2px rgba(38, 33, 92, 0.04), 0 12px 32px -8px rgba(38, 33, 92, 0.10); } html[data-theme="light"] .testi-q, html[data-theme="light"] .testi-quote { color: var(--nx-text); font-style: normal; font-size: 16px; line-height: 1.55; } html[data-theme="light"] .stars { color: var(--nx-indigo-600); } html[data-theme="light"] .tname, html[data-theme="light"] .testi-author-name { color: var(--nx-text); font-weight: 600; } html[data-theme="light"] .trole, html[data-theme="light"] .testi-author-role { color: var(--nx-text-2); } html[data-theme="light"] .testi-metric { background: var(--nx-indigo-50) !important; color: var(--nx-indigo-800) !important; font-weight: 600; } /* ── PRICING ───────────────────────────────── */ html[data-theme="light"] .pricing-sec { background: var(--nx-surface-2); border-top: 1px solid var(--nx-border); } html[data-theme="light"] .toggle-track { background: var(--nx-indigo-100); } html[data-theme="light"] .toggle-track.on { background: var(--nx-indigo-800); } html[data-theme="light"] .save-pill { background: var(--nx-indigo-50); color: var(--nx-indigo-800); border: 1px solid rgba(127, 119, 221, 0.25); font-weight: 500; } html[data-theme="light"] .product-col, html[data-theme="light"] .plan-card { background: var(--nx-surface); border: 1px solid var(--nx-border); border-radius: var(--radius-lg); box-shadow: none; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; } html[data-theme="light"] .product-col:hover, html[data-theme="light"] .plan-card:hover { border-color: var(--nx-border-2); transform: translateY(-2px); box-shadow: 0 1px 2px rgba(38, 33, 92, 0.04), 0 12px 32px -8px rgba(38, 33, 92, 0.10); } html[data-theme="light"] .product-col.crm .product-header, html[data-theme="light"] .product-col.erp .product-header, html[data-theme="light"] .product-col.suite .product-header { border-top: none; border-bottom: 1px solid var(--nx-border); } html[data-theme="light"] .product-tag { background: var(--nx-indigo-50) !important; color: var(--nx-indigo-800) !important; border: 1px solid rgba(127, 119, 221, 0.20); font-weight: 500; } html[data-theme="light"] .product-name { color: var(--nx-text); font-weight: 600; } html[data-theme="light"] .product-desc { color: var(--nx-text-2); } html[data-theme="light"] .ribbon { background: var(--nx-indigo-800); color: #FFFFFF; font-weight: 500; } html[data-theme="light"] .tier-row { background: var(--nx-surface); border: 1px solid var(--nx-border); } html[data-theme="light"] .tier-row:hover { background: var(--nx-surface-2); border-color: var(--nx-border-2); } html[data-theme="light"] .tier-row.trial { background: var(--nx-surface-2); border: 1px solid var(--nx-border); opacity: 1; } html[data-theme="light"] .tier-row.enterprise { background: var(--nx-surface-2); border: 1px solid var(--nx-border-2); } html[data-theme="light"] .tier-name { color: var(--nx-text-3); font-weight: 600; } html[data-theme="light"] .tier-desc { color: var(--nx-text-2); } html[data-theme="light"] .tier-price, html[data-theme="light"] .product-col.crm .tier-row:not(.trial):not(.enterprise) .tier-price, html[data-theme="light"] .product-col.erp .tier-row:not(.trial):not(.enterprise) .tier-price, html[data-theme="light"] .product-col.suite .tier-row:not(.trial):not(.enterprise) .tier-price { color: var(--nx-indigo-800); font-weight: 600; } html[data-theme="light"] .tier-row.trial .tier-price { color: var(--nx-text-2); } html[data-theme="light"] .tier-row.enterprise .tier-price { color: var(--nx-text); } html[data-theme="light"] .suite-savings { background: var(--nx-indigo-50); border-color: rgba(127, 119, 221, 0.20); color: var(--nx-indigo-800); font-weight: 500; } html[data-theme="light"] .features-list { border-top: 1px solid var(--nx-border); } html[data-theme="light"] .features-title { color: var(--nx-text-3); font-weight: 600; } html[data-theme="light"] .features-list ul li { color: var(--nx-text); font-size: 14px; } html[data-theme="light"] .features-list ul li::before, html[data-theme="light"] .product-col.crm .features-list ul li::before, html[data-theme="light"] .product-col.erp .features-list ul li::before, html[data-theme="light"] .product-col.suite .features-list ul li::before { color: var(--nx-indigo-600); } html[data-theme="light"] .plan-card.trial, html[data-theme="light"] .plan-card.starter, html[data-theme="light"] .plan-card.pro, html[data-theme="light"] .plan-card.enterprise { border-top: 1px solid var(--nx-border); } html[data-theme="light"] .plan-card.pro { background: linear-gradient(180deg, #F5F4FE 0%, var(--nx-surface) 100%); border-color: rgba(127, 119, 221, 0.3); } html[data-theme="light"] .plan-card .badge, html[data-theme="light"] .plan-card .badge.popular, html[data-theme="light"] .plan-card .badge.value { background: var(--nx-indigo-800); color: #FFFFFF; font-weight: 500; } html[data-theme="light"] .plan-card h3 { color: var(--nx-text); font-weight: 600; } html[data-theme="light"] .plan-card .price { color: var(--nx-text); font-weight: 600; } html[data-theme="light"] .plan-card .price span { color: var(--nx-text-2); } html[data-theme="light"] .plan-card .annual { color: var(--nx-indigo-600); font-weight: 500; } html[data-theme="light"] .plan-card .desc { color: var(--nx-text-2); border-top: 1px solid var(--nx-border); } html[data-theme="light"] .plan-card ul { color: var(--nx-text); } html[data-theme="light"] .plan-card ul li::before { color: var(--nx-indigo-600); } html[data-theme="light"] .plan-card ul li.extra-user { color: var(--nx-indigo-600); } html[data-theme="light"] .plan-card ul li.extra-user::before { color: var(--nx-indigo-600); } /* ── CTA SECTION ───────────────────────────── */ html[data-theme="light"] .cta-sec { background: var(--nx-bg); border-top: 1px solid var(--nx-border); } html[data-theme="light"] .cta-note { color: var(--nx-text-3); } /* ── FOOTER ────────────────────────────────── */ html[data-theme="light"] .site-footer { background: var(--nx-surface); border-top: 1px solid var(--nx-border); color: var(--nx-text-2); } html[data-theme="light"] .site-footer::before { background: linear-gradient(90deg, transparent, var(--nx-indigo-400) 50%, transparent); opacity: 0.20; } html[data-theme="light"] .site-footer * { color: inherit; } html[data-theme="light"] .site-footer h2, html[data-theme="light"] .site-footer h3, html[data-theme="light"] .site-footer h4, html[data-theme="light"] .site-footer .footer-brand, html[data-theme="light"] .site-footer strong { color: var(--nx-text); font-weight: 600; } html[data-theme="light"] .site-footer a { color: var(--nx-text-2); text-decoration: none; transition: color 0.15s ease; } html[data-theme="light"] .site-footer a:hover { color: var(--nx-text); } /* ── FOOTER — logo, headings, links, tagline ── */ html[data-theme="light"] .f-logo, html[data-theme="light"] .f-logo .wordmark, html[data-theme="light"] .f-logo .wordmark[style*="color:#fff"] { color: var(--nx-text) !important; } html[data-theme="light"] .f-logo .wordmark-accent, html[data-theme="light"] .f-logo span { color: var(--nx-indigo-600) !important; } html[data-theme="light"] .f-logo svg rect[fill="white"], html[data-theme="light"] .f-logo svg rect[fill="#FFFFFF"], html[data-theme="light"] .f-logo svg rect[fill="#ffffff"] { fill: var(--nx-indigo-800); } html[data-theme="light"] .f-logo svg rect[fill="#7F77DD"] { fill: var(--nx-indigo-600); } html[data-theme="light"] .f-logo svg rect[fill="#534AB7"] { fill: var(--nx-indigo-400); } html[data-theme="light"] .f-tagline { color: var(--nx-text-2); } html[data-theme="light"] .f-col-title { background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: initial; color: var(--nx-text-3); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; } html[data-theme="light"] .f-links a { color: var(--nx-text-2); transition: color 0.15s ease, transform 0.15s ease; text-shadow: none; } html[data-theme="light"] .f-links a:hover { color: var(--nx-text); transform: translateX(2px); text-shadow: none; } html[data-theme="light"] .footer-bottom { border-top: 1px solid var(--nx-border); } html[data-theme="light"] .f-copy { color: var(--nx-text-3); } html[data-theme="light"] .f-legal a { color: var(--nx-text-3); } html[data-theme="light"] .f-legal a:hover { color: var(--nx-text); } html[data-theme="light"] .f-social-link { color: var(--nx-text-3); border: 1px solid var(--nx-border); background: var(--nx-surface); } html[data-theme="light"] .f-social-link:hover { color: var(--nx-text); border-color: var(--nx-border-2); background: var(--nx-surface-2); } /* Newsletter signup */ html[data-theme="light"] .footer-newsletter { border-bottom: 1px solid var(--nx-border); } html[data-theme="light"] .fn-text h3 { color: var(--nx-text); font-weight: 600; } html[data-theme="light"] .fn-text p { color: var(--nx-text-2); } html[data-theme="light"] .fn-form input { background: var(--nx-surface); color: var(--nx-text); border: 1px solid var(--nx-border-2); border-radius: var(--radius-md); } html[data-theme="light"] .fn-form input::placeholder { color: var(--nx-text-3); } html[data-theme="light"] .fn-form input:focus { outline: none; border-color: var(--nx-indigo-600); box-shadow: 0 0 0 4px rgba(83, 74, 183, 0.12); } html[data-theme="light"] .fn-btn { background: var(--nx-indigo-800); color: #FFFFFF; border: 1px solid var(--nx-indigo-800); border-radius: var(--radius-md); } html[data-theme="light"] .fn-btn:hover { background: var(--nx-indigo-900); border-color: var(--nx-indigo-900); } /* ── BREADCRUMBS / COOKIE / FLOATING ───────── */ html[data-theme="light"] .breadcrumbs { background: var(--nx-bg); border-bottom: 1px solid var(--nx-border); color: var(--nx-text-2); } html[data-theme="light"] .breadcrumbs a { color: var(--nx-text-2); } html[data-theme="light"] .breadcrumbs a:hover { color: var(--nx-text); } html[data-theme="light"] .cookie-banner { background: var(--nx-surface); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--nx-border-2); box-shadow: 0 12px 40px -8px rgba(38, 33, 92, 0.18); color: var(--nx-text-2); } html[data-theme="light"] .back-to-top, html[data-theme="light"] .theme-toggle { background: var(--nx-surface); border: 1px solid var(--nx-border-2); color: var(--nx-text); box-shadow: 0 4px 14px rgba(38, 33, 92, 0.10); } html[data-theme="light"] .back-to-top:hover, html[data-theme="light"] .theme-toggle:hover { border-color: var(--nx-indigo-200); box-shadow: 0 6px 18px rgba(38, 33, 92, 0.14); } /* ── TABLES ────────────────────────────────── */ html[data-theme="light"] .api-table, html[data-theme="light"] .compare-table { background: var(--nx-surface); border: 1px solid var(--nx-border); border-radius: var(--radius-lg); overflow: hidden; } html[data-theme="light"] .api-table th, html[data-theme="light"] .compare-table th { background: var(--nx-surface-2); color: var(--nx-text); font-weight: 600; border-bottom: 1px solid var(--nx-border); } html[data-theme="light"] .api-table tr:hover td, html[data-theme="light"] .compare-table tr:hover td { background: var(--nx-surface-2); } html[data-theme="light"] .api-route { color: var(--nx-text-2); font-family: 'JetBrains Mono', monospace; } /* ── COMPLIANCE / MOCKS / FORMS ────────────── */ html[data-theme="light"] .compliance-bar { background: var(--nx-surface-2); border-top: 1px solid var(--nx-border); border-bottom: 1px solid var(--nx-border); } html[data-theme="light"] .compliance-badge { background: var(--nx-surface); border: 1px solid var(--nx-border); border-radius: var(--radius-lg); } html[data-theme="light"] .compliance-title { color: var(--nx-text); font-weight: 600; } html[data-theme="light"] .mock-widget, html[data-theme="light"] .product-screenshot { background: var(--nx-surface); border: 1px solid var(--nx-border); border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(38, 33, 92, 0.04), 0 12px 40px -8px rgba(38, 33, 92, 0.10); } html[data-theme="light"] .product-screenshot-body { background: linear-gradient(135deg, var(--nx-surface) 0%, var(--nx-surface-2) 100%); } html[data-theme="light"] .contact-wrap input, html[data-theme="light"] .contact-wrap textarea { background: var(--nx-surface); border: 1px solid var(--nx-border-2); color: var(--nx-text); border-radius: var(--radius-md); transition: border-color 0.15s ease, box-shadow 0.15s ease; } html[data-theme="light"] .contact-wrap input:focus, html[data-theme="light"] .contact-wrap textarea:focus { outline: none; border-color: var(--nx-indigo-600); box-shadow: 0 0 0 4px rgba(83, 74, 183, 0.12); } html[data-theme="light"] .form-group label { color: var(--nx-text); font-weight: 500; } /* ── PRODUCT HERO (sub-pages) ──────────────── */ html[data-theme="light"] .product-hero { background: var(--nx-bg) !important; color: var(--nx-text); position: relative; } html[data-theme="light"] .product-hero h1, html[data-theme="light"] .product-hero h2 { color: var(--nx-text); } html[data-theme="light"] .product-hero p { color: var(--nx-text-2); } /* ── DOCS / LEGAL / ARTICLE ────────────────── */ html[data-theme="light"] .legal-wrap h2, html[data-theme="light"] .article-body h2, html[data-theme="light"] .sidebar-card h4, html[data-theme="light"] .api-group-title, html[data-theme="light"] .roadmap-card h4, html[data-theme="light"] .blog-card h2, html[data-theme="light"] .blog-card h3, html[data-theme="light"] .status-name, html[data-theme="light"] .team-name { color: var(--nx-text); font-weight: 600; } html[data-theme="light"] .legal-wrap a, html[data-theme="light"] .article-body a { color: var(--nx-indigo-600); } html[data-theme="light"] .docs-step { border-color: var(--nx-border); } /* ── INDUSTRY TEMPLATES — light variant ────── */ /* Override the .dark-sec dark treatment for this specific section */ html[data-theme="light"] #industries.dark-sec { background: var(--nx-bg); color: var(--nx-text-2); } html[data-theme="light"] #industries .sec-title, html[data-theme="light"] #industries .dark-inner h2 { background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: initial; color: var(--nx-text); } html[data-theme="light"] #industries .sec-title em { background: linear-gradient(135deg, #6366F1 0%, #A855F7 45%, #06B6D4 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-style: normal; font-weight: 600; } html[data-theme="light"] #industries .sec-sub { color: var(--nx-text-2); } html[data-theme="light"] #industries .sec-badge, html[data-theme="light"] #industries .sec-badge-dark { background: transparent; color: var(--nx-indigo-600); border: 0; font-weight: 600; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; padding: 0; } /* Cards inside #industries — apply unconditionally */ html[data-theme="light"] #industries .feat-card { background: var(--nx-surface) !important; border: 1px solid var(--nx-border) !important; border-radius: var(--radius-lg) !important; box-shadow: none !important; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; } html[data-theme="light"] #industries .feat-card:hover { background: var(--nx-surface) !important; border: 1px solid var(--nx-border-2) !important; transform: translateY(-2px); box-shadow: 0 1px 2px rgba(38, 33, 92, 0.04), 0 12px 32px -8px rgba(38, 33, 92, 0.10) !important; } html[data-theme="light"] #industries .feat-card .feat-title { color: var(--nx-text) !important; font-weight: 600; } html[data-theme="light"] #industries .feat-card .feat-desc { color: var(--nx-text-2) !important; } html[data-theme="light"] #industries p { color: var(--nx-text-3) !important; } /* ── DEMO VIDEO — light wrapper around dark card ── */ html[data-theme="light"] #demo-video.dark-sec { background: var(--nx-bg); padding-top: 0; padding-bottom: 96px; } /* ── HOW IT WORKS — light variant ──────────── */ html[data-theme="light"] #how-it-works.dark-sec { background: var(--nx-bg); color: var(--nx-text-2); } html[data-theme="light"] #how-it-works .sec-title, html[data-theme="light"] #how-it-works .dark-inner h2 { background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: initial; color: var(--nx-text); } html[data-theme="light"] #how-it-works .sec-sub { color: var(--nx-text-2); } html[data-theme="light"] #how-it-works .step-num { background: linear-gradient(180deg, #6366F1 0%, #A855F7 50%, #06B6D4 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight: 600; letter-spacing: -0.04em; } html[data-theme="light"] #how-it-works .step-title { color: var(--nx-text); font-weight: 600; } html[data-theme="light"] #how-it-works .step-desc { color: var(--nx-text-2); } html[data-theme="light"] #how-it-works .step-tag { color: var(--nx-text-3); font-weight: 600; letter-spacing: 0.08em; } /* ============================================ DARK-MODE ICON VISIBILITY FIX The product icons in the mega-menu (and elsewhere) hardcode stroke="#1a1740" / fill="#1a1740" which is invisible on dark bg. These rules only recolor those specific values — they don't touch any existing dark-mode styling. ============================================ */ html[data-theme="dark"] .mega-panel svg [stroke="#1a1740"], html[data-theme="dark"] .nav-dropdown-menu svg [stroke="#1a1740"], html[data-theme="dark"] .site-footer svg [stroke="#1a1740"] { stroke: #AFA9EC; } html[data-theme="dark"] .mega-panel svg [fill="#1a1740"], html[data-theme="dark"] .nav-dropdown-menu svg [fill="#1a1740"], html[data-theme="dark"] .site-footer svg [fill="#1a1740"] { fill: #AFA9EC; } html[data-theme="dark"] .mega-panel svg [fill="#054B7C"], html[data-theme="dark"] .nav-dropdown-menu svg [fill="#054B7C"] { fill: #93C5FD; } /* ── MOBILE NAV DRAWER ─────────────────────── */ @media (max-width: 900px) { html[data-theme="light"] .nav-links.open { /* Near-opaque so the drawer stays legible even where backdrop-filter isn't honored; the blur is a progressive enhancement on top. */ background: rgba(250, 250, 247, 0.985); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--nx-border); box-shadow: 0 12px 32px -8px rgba(38, 33, 92, 0.12); } html[data-theme="light"] .nav-links.open a { color: var(--nx-text); } /* The top-level menu toggles are