/* ═══════════════════════════════════════════════════════════════ SpecZap v3 — LIGHT THEME (Apple/Notion/Linear) Activates when is set. Loaded AFTER v3.css to override dark defaults. ═══════════════════════════════════════════════════════════════ */ html[data-theme="light"] { color-scheme: light; } html[data-theme="light"] body { background: #fafafa !important; color: #18181b !important; background-image: radial-gradient(ellipse 1200px 800px at 50% -200px, rgba(239,68,68,0.04) 0%, transparent 60%), radial-gradient(ellipse 800px 600px at 100% 100%, rgba(239,68,68,0.025) 0%, transparent 60%) !important; } /* ── Light theme variables override ── */ html[data-theme="light"] { --p-black: #fafafa; --p-black-2: #f4f4f5; --p-card: #ffffff; --p-card-2: #fafafa; --p-border: rgba(0,0,0,0.08); --p-border-2: rgba(0,0,0,0.14); --p-text: #18181b; --p-white: #18181b; --p-text-dim: #52525b; --p-gray: #71717a; --p-gray-light: #3f3f46; --p-gradient-bg: radial-gradient(ellipse at top, #ffffff 0%, #fafafa 100%); --p-gradient-card: linear-gradient(145deg, rgba(0,0,0,0.025), rgba(0,0,0,0.005)); --p-gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.6)); } /* ── Headers & nav ── */ /* Header colors now handled by css/header-fix.css */ /* .p-header, .p-logo, .nav-link — see header-fix.css v3 */ /* ── Cards: white with soft shadow ── */ html[data-theme="light"] .product-slot, html[data-theme="light"] .blog-card, html[data-theme="light"] .how-step, html[data-theme="light"] .verdict-banner, html[data-theme="light"] .sidebar-card, html[data-theme="light"] .product-header-card, html[data-theme="light"] .lb-row, html[data-theme="light"] .testi-card, html[data-theme="light"] .fp-card, html[data-theme="light"] .faq-item { background: #ffffff !important; border: 1px solid rgba(0,0,0,0.07) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html[data-theme="light"] .product-slot:hover, html[data-theme="light"] .blog-card:hover, html[data-theme="light"] .how-step:hover, html[data-theme="light"] .testi-card:hover, html[data-theme="light"] .fp-card:hover, html[data-theme="light"] .faq-item:hover { border-color: rgba(0,0,0,0.12) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 12px 32px rgba(0,0,0,0.05) !important; } /* ── FP card image area ── */ html[data-theme="light"] .fp-img-wrap { background: linear-gradient(135deg, #f9fafb 0%, #f4f4f5 100%) !important; border-bottom: 1px solid rgba(0,0,0,0.06) !important; } html[data-theme="light"] .fp-img-wrap::before { background: radial-gradient(circle at 50% 50%, rgba(239,68,68,0.04), transparent 70%) !important; } html[data-theme="light"] .fp-badge { background: rgba(255,255,255,0.92) !important; border-color: rgba(0,0,0,0.08) !important; color: #18181b !important; } html[data-theme="light"] .fp-badge.hot { background: #ef4444 !important; color: #fff !important; } html[data-theme="light"] .fp-name { color: #18181b !important; } html[data-theme="light"] .fp-tagline, html[data-theme="light"] .fp-brand, html[data-theme="light"] .fp-price-from { color: #71717a !important; } html[data-theme="light"] .fp-price { color: #18181b !important; } html[data-theme="light"] .fp-price-row { border-top: 1px solid rgba(0,0,0,0.06) !important; } /* ── URL inputs ── */ html[data-theme="light"] .p-input, html[data-theme="light"] input[type="url"], html[data-theme="light"] input[type="text"] { background: #ffffff !important; border: 1px solid rgba(0,0,0,0.10) !important; color: #18181b !important; } html[data-theme="light"] .p-input:focus, html[data-theme="light"] input[type="url"]:focus, html[data-theme="light"] input[type="text"]:focus { background: #ffffff !important; border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239,68,68,0.10) !important; } html[data-theme="light"] .p-input::placeholder { color: rgba(0,0,0,0.35) !important; } /* ── Ghost buttons / chips ── */ html[data-theme="light"] .p-chip, html[data-theme="light"] .fof-btn-ghost, html[data-theme="light"] .cat-btn, html[data-theme="light"] .focus-chip, html[data-theme="light"] .usecase-chip { background: #ffffff !important; border: 1px solid rgba(0,0,0,0.10) !important; color: #3f3f46 !important; } html[data-theme="light"] .p-chip:hover, html[data-theme="light"] .fof-btn-ghost:hover, html[data-theme="light"] .cat-btn:hover { background: #f4f4f5 !important; border-color: rgba(0,0,0,0.18) !important; color: #18181b !important; } html[data-theme="light"] .p-chip.active, html[data-theme="light"] .cat-btn.active, html[data-theme="light"] .focus-chip.active, html[data-theme="light"] .usecase-chip.active { background: rgba(239,68,68,0.08) !important; border-color: #ef4444 !important; color: #b91c1c !important; } /* ── Stats numbers gradient (dark text on light bg) ── */ html[data-theme="light"] .stat-num { background: linear-gradient(135deg, #18181b 0%, #71717a 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } html[data-theme="light"] .stat-label { color: #52525b !important; } /* ── Stats / testi / faq sections ── */ html[data-theme="light"] .stats-section { border-color: rgba(0,0,0,0.06) !important; background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.015) 50%, transparent 100%) !important; } html[data-theme="light"] .testi-quote { color: #18181b !important; } html[data-theme="light"] .testi-name { color: #18181b !important; } html[data-theme="light"] .testi-role { color: #71717a !important; } html[data-theme="light"] .testi-stars { color: #f59e0b !important; } html[data-theme="light"] .faq-item { background: #ffffff !important; } html[data-theme="light"] .faq-item[open] { background: #fafafa !important; border-color: rgba(239,68,68,0.30) !important; } html[data-theme="light"] .faq-q { color: #18181b !important; } html[data-theme="light"] .faq-q::after { color: #71717a !important; } html[data-theme="light"] .faq-a { color: #52525b !important; } /* ── Trust bar ── */ html[data-theme="light"] .trust-bar-section { border-color: rgba(0,0,0,0.06) !important; background: rgba(0,0,0,0.015) !important; } html[data-theme="light"] .trust-title { color: #18181b !important; } html[data-theme="light"] .trust-sub { color: #71717a !important; } html[data-theme="light"] .trust-disclaimer { background: rgba(0,0,0,0.025) !important; color: #52525b !important; } /* ── Section eyebrow / title / subtitle ── */ html[data-theme="light"] .section-title { color: #18181b !important; } html[data-theme="light"] .section-subtitle { color: #52525b !important; } /* ── Ad disclaimer ── */ html[data-theme="light"] .ai-disclaimer { background: #fafafa !important; border-color: rgba(239,68,68,0.20) !important; color: #3f3f46 !important; } /* ── Scrollbar ── */ html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12) !important; } html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.22) !important; } /* ── Footer ── */ html[data-theme="light"] footer, html[data-theme="light"] .p-footer { border-top: 1px solid rgba(0,0,0,0.06) !important; } /* ── Quota badge in light theme ── */ html[data-theme="light"] .quota-badge { background: #ffffff !important; border: 1px solid rgba(0,0,0,0.10) !important; color: #3f3f46 !important; } html[data-theme="light"] .quota-badge:hover { background: #f4f4f5 !important; color: #18181b !important; } /* ── Theme toggle button ── */ .theme-toggle { background: transparent; border: 1px solid rgba(255,255,255,0.10); border-radius: 9999px; color: var(--p-text-dim); padding: 7px; margin-left: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s cubic-bezier(0.4,0,0.2,1); width: 34px; height: 34px; } .theme-toggle:hover { background: rgba(255,255,255,0.08); color: var(--p-text); border-color: rgba(255,255,255,0.20); } html[data-theme="light"] .theme-toggle { border-color: rgba(0,0,0,0.10); color: #52525b; } html[data-theme="light"] .theme-toggle:hover { background: rgba(0,0,0,0.04); color: #18181b; border-color: rgba(0,0,0,0.20); } .theme-toggle svg { width: 16px; height: 16px; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } html[data-theme="light"] .theme-toggle .icon-sun { display: block; } html[data-theme="light"] .theme-toggle .icon-moon { display: none; } /* ═══════════════════════════════════════════════════════════════ LIGHT THEME — Round 3 contrast fixes + card polish Override hardcoded inline