/* ============================================================ QualityMax Landing — Light Theme Applied when is set. All selectors are prefixed with html[data-theme="light"] so they override the dark defaults in landing.css. ============================================================ */ html[data-theme="light"] { /* --primary-color, --primary-dark, --secondary-color, --accent-color intentionally inherit from :root in landing.css — the brand purple is identical across themes. Override here only if a light shade is needed. */ --text-dark: #0f0e17; --text-light: #6b7280; --bg-light: #eef0f5; --bg-white: #ffffff; --bg-dark: #e8eaf2; --border-color: rgba(0, 0, 0, 0.09); --success-color: #16a34a; --error-color: #dc2626; /* Extra semantic tokens used by inline HTML styles */ --text-primary: #0f0e17; --text-secondary: #4b5563; --text-tertiary: #6b7280; --text-muted: #9ca3af; --text-charcoal: #374151; /* slightly darker than secondary */ --bg-white-soft: #f7f8fc; /* off-white bg for subtle sections */ --success-text-dark: #15803d; /* darker green for high-contrast labels */ --landing-page-section-bg: #ffffff;/* hero/section bg flips to white in light mode */ --card-tint: rgba(0, 0, 0, 0.04); /* dark-on-white tint flip */ color-scheme: light; } html[data-theme="light"] body { background: #ffffff; color: var(--text-dark); } /* ── Header ── */ html[data-theme="light"] .header { background: rgba(255, 255, 255, 0.92); border-bottom: 1px solid rgba(0, 0, 0, 0.07); } html[data-theme="light"] .nav a, html[data-theme="light"] .nav-dropdown-trigger { color: var(--text-charcoal); } html[data-theme="light"] .nav-dropdown-menu { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12); } html[data-theme="light"] .nav-dropdown-menu a { color: var(--text-charcoal); } html[data-theme="light"] .nav-dropdown-menu a:hover { background: rgba(124, 108, 240, 0.08); color: var(--primary-color); } html[data-theme="light"] .nav-github-btn { border-color: rgba(0, 0, 0, 0.15); color: var(--text-charcoal); } html[data-theme="light"] .nav-github-btn:hover { background: var(--text-dark); color: #fff !important; border-color: var(--text-dark); } html[data-theme="light"] .login-link { color: var(--text-charcoal); border-color: rgba(0, 0, 0, 0.15); } html[data-theme="light"] .login-link:hover { color: var(--text-dark)!important; background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.25); } html[data-theme="light"] .lang-switch { border-color: rgba(0, 0, 0, 0.12); background: rgba(0, 0, 0, 0.04); color: var(--text-charcoal); } html[data-theme="light"] .hamburger span { background: var(--text-charcoal); } /* ── Theme toggle button ── */ .theme-toggle { color: rgba(255, 255, 255, 0.9); border-color: rgba(255, 255, 255, 0.3) !important; } html[data-theme="light"] .theme-toggle { border-color: rgba(0, 0, 0, 0.2) !important; color: var(--text-charcoal); background: transparent; } html[data-theme="light"] .theme-toggle:hover { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.3) !important; } /* ── Hero ── */ html[data-theme="light"] .hero { background: #ffffff; color: var(--text-dark); } html[data-theme="light"] .hero::before { /* Stronger indigo wash + secondary green hint — the 0.08 was perceptually invisible on white */ background: radial-gradient(ellipse 90% 65% at 50% 0%, rgba(124, 108, 240, 0.20) 0%, transparent 65%), radial-gradient(ellipse 60% 40% at 50% 100%, rgba(74, 222, 128, 0.06) 0%, transparent 70%) !important; } html[data-theme="light"] .hero-title { color: var(--text-dark); } html[data-theme="light"] .hero-triplet { color: #1a1a2e; } html[data-theme="light"] .hero-subtitle { color: var(--text-light); } html[data-theme="light"] .hero-eyebrow { color: var(--primary-color); background: rgba(124, 108, 240, 0.08); border-color: rgba(124, 108, 240, 0.2); } html[data-theme="light"] .hero-cta-link { color: var(--text-secondary); } html[data-theme="light"] .hero-cta-link:hover, html[data-theme="light"] .hero-cta-link:focus-visible { color: var(--text-dark); } html[data-theme="light"] .hero-value-card { border: 1px solid rgba(124, 108, 240, 0.15); background: linear-gradient(145deg, rgba(124, 108, 240, 0.05), rgba(248, 248, 255, 0.8)); } html[data-theme="light"] .hero-value-card h3 { color: #1a1a2e; } html[data-theme="light"] .hero-value-card p { color: var(--text-light); } html[data-theme="light"] .hero-value-card--ai { border-color: rgba(22, 163, 74, 0.2); background: linear-gradient(145deg, rgba(22, 163, 74, 0.05), rgba(248, 255, 251, 0.8)); } html[data-theme="light"] .hero-value-card--ai h3 { color: var(--success-text-dark); } html[data-theme="light"] .hero-proof-rail blockquote { border: 1px solid rgba(0, 0, 0, 0.08); background: rgba(0, 0, 0, 0.02); color: var(--text-charcoal); } html[data-theme="light"] .hero-proof-rail figcaption { color: var(--primary-color); } html[data-theme="light"] .cta-btn-secondary, html[data-theme="light"] .cta-btn-demo { color: var(--text-charcoal); border-color: rgba(0, 0, 0, 0.2); background: transparent; } html[data-theme="light"] .cta-btn-secondary:hover, html[data-theme="light"] .cta-btn-demo:hover { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.3); } html[data-theme="light"] .github-follow-inline, html[data-theme="light"] .github-follow-inline--dark { border-color: rgba(0, 0, 0, 0.15); background: rgba(0, 0, 0, 0.04); color: var(--text-charcoal); } html[data-theme="light"] .github-follow-inline:hover, html[data-theme="light"] .github-follow-inline--dark:hover { background: rgba(0, 0, 0, 0.08); border-color: rgba(0, 0, 0, 0.25); color: var(--text-dark); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } html[data-theme="light"] .hero-screenshot img { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06); } /* Hero race card / CI banner (inline styles in