/* Landing V2 – Light theme overrides (home_v2) ═══════════════════════════════════════════════ Active when has .theme-light class. Loaded alongside landing-dark.css — only overrides colors. Animations, layout, and effects come from landing-dark.css. */ /* ═══════════════════════════════════════════════ */ /* ── 1. BODY & GLOBAL */ /* ═══════════════════════════════════════════════ */ .theme-light body { background-color: #ffffff !important; color: #0f172a !important; } /* Hide grain overlay */ .theme-light body::before { display: none; } /* ═══════════════════════════════════════════════ */ /* ── 2. HEADER */ /* ═══════════════════════════════════════════════ */ .theme-light header { background-color: rgba(255,255,255,0.92) !important; border-color: #cbd5e1 !important; } /* Reset landing-dark.css forced header colors */ .theme-light header nav a, .theme-light header nav button, .theme-light header .font-semibold { color: #1e293b !important; } /* ═══════════════════════════════════════════════ */ /* ── 3. SECTION BACKGROUNDS */ /* ═══════════════════════════════════════════════ */ .theme-light .bg-slate-950 { background-color: #ffffff !important; } .theme-light .bg-slate-950\/80 { background-color: rgba(255,255,255,0.8) !important; } .theme-light .bg-slate-900 { background-color: #f1f5f9 !important; } .theme-light .bg-slate-900\/80 { background-color: rgba(241,245,249,0.8) !important; } .theme-light .bg-slate-800 { background-color: #f8fafc !important; } .theme-light .bg-slate-800\/80 { background-color: rgba(248,250,252,0.8) !important; } .theme-light .bg-slate-800\/60 { background-color: rgba(241,245,249,0.7) !important; } .theme-light .bg-slate-800\/40 { background-color: rgba(241,245,249,0.5) !important; } .theme-light .bg-slate-800\/50 { background-color: rgba(241,245,249,0.6) !important; } .theme-light .bg-slate-700\/50 { background-color: #e2e8f0 !important; } .theme-light .bg-slate-700 { background-color: #e2e8f0 !important; } /* ═══════════════════════════════════════════════ */ /* ── 4. TEXT COLORS */ /* ═══════════════════════════════════════════════ */ .theme-light .text-white { color: #0f172a !important; } .theme-light .text-slate-300 { color: #1e293b !important; } .theme-light .text-slate-400 { color: #334155 !important; } .theme-light .text-slate-500 { color: #475569 !important; } .theme-light .text-slate-600 { color: #1e293b !important; } /* Hover text */ .theme-light .hover\:text-white:hover { color: #0f172a !important; } /* ═══════════════════════════════════════════════ */ /* ── 5. BORDER COLORS */ /* ═══════════════════════════════════════════════ */ .theme-light .border-slate-800 { border-color: #cbd5e1 !important; } .theme-light .border-slate-800\/40 { border-color: rgba(203,213,225,0.5) !important; } .theme-light .border-slate-800\/60 { border-color: rgba(203,213,225,0.7) !important; } .theme-light .border-slate-800\/80 { border-color: rgba(203,213,225,0.9) !important; } .theme-light .border-slate-700 { border-color: #cbd5e1 !important; } /* yellow borders handled in section 6 */ /* Hover backgrounds & borders */ .theme-light .hover\:bg-slate-800:hover { background-color: #e2e8f0 !important; } .theme-light .hover\:bg-slate-700:hover { background-color: #cbd5e1 !important; } .theme-light .hover\:border-slate-700:hover { border-color: #94a3b8 !important; } /* ═══════════════════════════════════════════════ */ /* ── 6. GRADIENT TEXT → SOLID (no yellow) */ /* ═══════════════════════════════════════════════ */ .theme-light .text-gradient-white { background: none !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: #0f172a !important; background-clip: unset !important; color: #0f172a !important; } /* Gold heading accent → black (no yellow in headers) */ .theme-light .text-gradient-gold { background: none !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: #0f172a !important; background-clip: unset !important; color: #0f172a !important; } /* Stars → vivid amber */ .theme-light .text-yellow-400[fill="currentColor"] { color: #f59e0b !important; } /* Yellow/amber text → saturated warm */ .theme-light .text-yellow-400 { color: #d97706 !important; } .theme-light .text-yellow-300 { color: #f59e0b !important; } .theme-light .text-amber-400 { color: #d97706 !important; } .theme-light .text-amber-300\/80 { color: rgba(217,119,6,0.8) !important; } /* Yellow/amber backgrounds → warm tints */ .theme-light .bg-yellow-400\/10 { background-color: rgba(245,158,11,0.08) !important; } .theme-light .bg-yellow-900\/30 { background-color: #fff7ed !important; } .theme-light .bg-yellow-900\/10 { background-color: rgba(255,247,237,0.5) !important; } .theme-light .bg-amber-900\/30 { background-color: #fff7ed !important; } .theme-light .bg-amber-900\/50 { background-color: #ffedd5 !important; } /* Yellow/amber borders → warm */ .theme-light .border-yellow-500\/20 { border-color: rgba(245,158,11,0.2) !important; } .theme-light .border-yellow-500\/30 { border-color: rgba(245,158,11,0.3) !important; } .theme-light .border-yellow-800 { border-color: #fdba74 !important; } .theme-light .border-yellow-800\/20 { border-color: rgba(253,186,116,0.3) !important; } .theme-light .border-yellow-800\/30 { border-color: rgba(253,186,116,0.4) !important; } .theme-light .border-amber-800 { border-color: #fdba74 !important; } /* Yellow hover states → warm */ .theme-light .hover\:border-yellow-700:hover { border-color: #d97706 !important; } .theme-light .hover\:bg-yellow-900\/20:hover { background-color: rgba(245,158,11,0.1) !important; } /* ── Colored text: saturated for icons & tables ── */ .theme-light .text-emerald-400 { color: #059669 !important; } .theme-light .text-emerald-300 { color: #10b981 !important; } .theme-light .text-blue-400 { color: #2563eb !important; } .theme-light .text-blue-300 { color: #3b82f6 !important; } .theme-light .text-violet-400 { color: #7c3aed !important; } .theme-light .text-violet-300 { color: #8b5cf6 !important; } .theme-light .text-rose-400 { color: #e11d48 !important; } .theme-light .text-purple-300 { color: #a855f7 !important; } .theme-light .text-red-400 { color: #dc2626 !important; } .theme-light .text-sky-300 { color: #0284c7 !important; } .theme-light .text-purple-400 { color: #9333ea !important; } .theme-light .text-orange-400 { color: #ea580c !important; } /* ── Icons: flat, big, no rounded bg ── */ /* Feature card icon containers → flat */ .theme-light .card-hover .rounded-xl[class*="bg-"][class*="items-center"][class*="justify-center"] { background: none !important; border: none !important; border-radius: 0 !important; height: auto !important; width: auto !important; } /* Feature card SVG icons → bigger */ .theme-light .card-hover .h-5.w-5 { height: 2rem !important; width: 2rem !important; } /* Metric strip icon containers → flat */ .theme-light .group .rounded-2xl[class*="bg-"][class*="items-center"][class*="justify-center"] { background: none !important; border: none !important; border-radius: 0 !important; height: auto !important; width: auto !important; box-shadow: none !important; } .theme-light .group .rounded-2xl[class*="bg-"]:hover { box-shadow: none !important; } /* Metric strip SVG icons → bigger */ .theme-light .group .h-6.w-6 { height: 2.25rem !important; width: 2.25rem !important; } /* ═══════════════════════════════════════════════ */ /* ── 7. SECTION DIVIDER → SOLID LINE */ /* ═══════════════════════════════════════════════ */ .theme-light .section-divider { background: #cbd5e1 !important; } /* ═══════════════════════════════════════════════ */ /* ── 8. CARDS & HOVER EFFECTS — no shadows */ /* ═══════════════════════════════════════════════ */ .theme-light .card-gradient-border { background: #f8fafc !important; border: 1px solid #cbd5e1 !important; } .theme-light .card-gradient-border::before { display: none !important; } .theme-light .card-gradient-border:hover { box-shadow: none !important; border-color: #94a3b8 !important; } .theme-light .card-hover:hover { box-shadow: none !important; border-color: #94a3b8 !important; } .theme-light .hiw-card { border: 1px solid #cbd5e1 !important; } .theme-light .hiw-card:hover { box-shadow: none !important; border-color: #94a3b8 !important; } /* ═══════════════════════════════════════════════ */ /* ── 9. CTA GLOW & SECTION GLOW — disabled */ /* ═══════════════════════════════════════════════ */ .theme-light .cta-glow::before { display: none !important; } .theme-light .cta-glow:hover { box-shadow: none !important; } .theme-light .cta-section-glow::before { display: none !important; } /* ═══════════════════════════════════════════════ */ /* ── 10. HERO GRID */ /* ═══════════════════════════════════════════════ */ .theme-light .hero-grid-bg::before { background-image: radial-gradient(circle at 1px 1px, rgba(148,163,184,0.2) 1px, transparent 0); } .theme-light .hero-grid-bg::after { background: radial-gradient(ellipse 50% 40% at 50% 0%, rgba(203,213,225,0.15) 0%, transparent 70%); } /* ═══════════════════════════════════════════════ */ /* ── 11. SCROLLBAR & SELECTION */ /* ═══════════════════════════════════════════════ */ .theme-light ::-webkit-scrollbar-track { background: #ffffff; } .theme-light ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } .theme-light ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } .theme-light ::selection { background: rgba(59,130,246,0.2); color: #0f172a; } /* ═══════════════════════════════════════════════ */ /* ── 12. LOGO MARQUEE GRADIENT EDGES */ /* ═══════════════════════════════════════════════ */ .theme-light .logo-marquee > .pointer-events-none.absolute[class*="left-0"] { background: linear-gradient(to right, #ffffff, transparent) !important; } .theme-light .logo-marquee > .pointer-events-none.absolute[class*="right-0"] { background: linear-gradient(to left, #ffffff, transparent) !important; } /* ═══════════════════════════════════════════════ */ /* ── 13. FOOTER */ /* ═══════════════════════════════════════════════ */ .theme-light footer { background-color: #f1f5f9 !important; border-color: #cbd5e1 !important; } .theme-light footer h3 { color: #0f172a !important; } .theme-light footer a { color: #334155 !important; } .theme-light footer a:hover { color: #0f172a !important; } /* ═══════════════════════════════════════════════ */ /* ── 14. COLORED ACCENT BACKGROUNDS */ /* ═══════════════════════════════════════════════ */ /* Tinted backgrounds → saturated light tints */ .theme-light .bg-emerald-900\/30 { background-color: #d1fae5 !important; } .theme-light .bg-emerald-900\/20 { background-color: rgba(209,250,229,0.7) !important; } .theme-light .bg-emerald-900\/10 { background-color: rgba(209,250,229,0.4) !important; } .theme-light .bg-blue-900\/30 { background-color: #dbeafe !important; } .theme-light .bg-blue-900\/50 { background-color: #bfdbfe !important; } /* yellow/amber bg overrides handled in section 6 */ .theme-light .bg-violet-900\/30 { background-color: #ede9fe !important; } .theme-light .bg-violet-900\/50 { background-color: #ddd6fe !important; } /* amber bg overrides handled in section 6 */ .theme-light .bg-rose-900\/30 { background-color: #ffe4e6 !important; } .theme-light .bg-red-900\/30 { background-color: #fee2e2 !important; } .theme-light .bg-red-900\/20 { background-color: rgba(254,226,226,0.7) !important; } .theme-light .bg-red-900\/10 { background-color: rgba(254,226,226,0.4) !important; } .theme-light .bg-orange-900\/30 { background-color: #ffedd5 !important; } .theme-light .bg-purple-900\/30 { background-color: #ede9fe !important; } .theme-light .bg-sky-900\/30 { background-color: #e0f2fe !important; } /* Colored borders → saturated light tones */ .theme-light .border-emerald-800 { border-color: #6ee7b7 !important; } .theme-light .border-emerald-800\/60 { border-color: rgba(110,231,183,0.6) !important; } .theme-light .border-emerald-800\/30 { border-color: rgba(110,231,183,0.3) !important; } .theme-light .border-emerald-900\/60 { border-color: rgba(110,231,183,0.6) !important; } .theme-light .border-emerald-900\/40 { border-color: rgba(110,231,183,0.4) !important; } .theme-light .border-blue-800 { border-color: #93c5fd !important; } .theme-light .border-blue-800\/30 { border-color: rgba(147,197,253,0.4) !important; } .theme-light .border-blue-900 { border-color: #93c5fd !important; } /* yellow border overrides handled in section 6 */ .theme-light .border-violet-800 { border-color: #c4b5fd !important; } /* amber border overrides handled in section 6 */ .theme-light .border-red-900\/60 { border-color: rgba(252,165,165,0.6) !important; } .theme-light .border-red-900\/40 { border-color: rgba(252,165,165,0.4) !important; } .theme-light .border-purple-900 { border-color: #d8b4fe !important; } /* ═══════════════════════════════════════════════ */ /* ── 15. METRIC NUMBER */ /* ═══════════════════════════════════════════════ */ .theme-light .metric-number { text-shadow: none; } .theme-light .metric-number.text-gradient-gold { -webkit-text-fill-color: #0f172a !important; color: #0f172a !important; } /* ── Labels / pills: more contrast ── */ .theme-light .rounded-full.text-slate-500 { color: #334155 !important; border-color: #94a3b8 !important; background-color: #f1f5f9 !important; } .theme-light .rounded-full.text-slate-400 { color: #334155 !important; } /* ═══════════════════════════════════════════════ */ /* ── 16. COMPARISON TABLE */ /* ═══════════════════════════════════════════════ */ /* Scrupp column: vivid blue highlight */ .theme-light .cmp-scrupp-col { background: rgba(37,99,235,0.06) !important; border-left: 2px solid rgba(37,99,235,0.18); border-right: 2px solid rgba(37,99,235,0.18); } /* Scrupp column header: prominent */ .theme-light thead .cmp-scrupp-col { background: rgba(37,99,235,0.10) !important; border-top: 2px solid rgba(37,99,235,0.18); } /* Table header row */ .theme-light .cmp-row + tr:last-child .cmp-scrupp-col, .theme-light tbody tr:last-child .cmp-scrupp-col { border-bottom: 2px solid rgba(37,99,235,0.18); } /* Row hover: blue tint */ .theme-light .cmp-row:hover { background-color: rgba(37,99,235,0.04) !important; } /* Feature label column: dark text */ .theme-light .cmp-row td:first-child, .theme-light tbody tr td:first-child { color: #0f172a !important; } /* Sticky column bg fix for light mode */ .theme-light .cmp-row td.sticky, .theme-light .cmp-row td[class*="sticky"], .theme-light thead th.sticky, .theme-light thead th[class*="sticky"], .theme-light td.bg-slate-800, .theme-light th.bg-slate-800 { background: #f8fafc !important; } /* Competitor names */ .theme-light thead th.text-slate-500 { color: #64748b !important; } /* Check marks: vivid green */ .theme-light .cmp-row .text-emerald-500, .theme-light tbody tr .text-emerald-500 { color: #059669 !important; } /* X marks: vivid red */ .theme-light .cmp-row svg.text-slate-300[stroke="currentColor"], .theme-light tbody tr svg.text-slate-300 { color: #ef4444 !important; opacity: 0.5; } /* "Included" label: vivid green */ .theme-light .cmp-scrupp-col .text-emerald-400 { color: #059669 !important; font-weight: 600 !important; } /* "Extra cost" / "N/A" labels */ .theme-light .cmp-row .text-slate-500, .theme-light tbody tr .text-slate-500 { color: #64748b !important; } /* Scrupp column prices: bold black */ .theme-light .cmp-scrupp-col .font-semibold { color: #0f172a !important; } /* Table border rows */ .theme-light .cmp-row { border-color: #e2e8f0 !important; } /* Mobile sticky column bg */ @media (max-width: 767px) { .theme-light .cmp-row td:first-child, .theme-light .cmp-row + tr td:first-child, .theme-light table th:first-child { background: #f8fafc !important; } .theme-light .overflow-x-auto::after { background: linear-gradient(to right, transparent, #f8fafc) !important; } } /* ═══════════════════════════════════════════════ */ /* ── 16b. EXPORT PREVIEW TABLE (light) */ /* ═══════════════════════════════════════════════ */ .theme-light .export-preview-table { background-color: #ffffff !important; border-color: #cbd5e1 !important; } /* Header & footer bars */ .theme-light .export-preview-table > div:first-child, .theme-light .export-preview-table > div:last-child { background-color: #f8fafc !important; border-color: #e2e8f0 !important; } /* Table header row */ .theme-light .export-preview-table thead tr { background-color: #f1f5f9 !important; border-color: #e2e8f0 !important; } .theme-light .export-preview-table thead th { color: #64748b !important; } /* Table body */ .theme-light .export-preview-table tbody { color: #1e293b !important; } .theme-light .export-preview-table tbody tr { border-color: #e2e8f0 !important; } .theme-light .export-preview-table tbody tr:hover { background-color: #f8fafc !important; } /* Row numbers */ .theme-light .export-preview-table tbody .text-slate-600 { color: #94a3b8 !important; } /* Email / LinkedIn links */ .theme-light .export-preview-table .text-blue-400 { color: #2563eb !important; } /* Mono text */ .theme-light .export-preview-table .font-mono { color: #334155 !important; } /* Verified badge → vivid green */ .theme-light .export-preview-table .bg-emerald-900\/30 { background-color: #d1fae5 !important; } .theme-light .export-preview-table .text-emerald-300, .theme-light .export-preview-table .text-emerald-400 { color: #059669 !important; } /* Risky badge → vivid orange */ .theme-light .export-preview-table .bg-yellow-900\/30 { background-color: #fff7ed !important; } .theme-light .export-preview-table .text-yellow-300 { color: #ea580c !important; } /* Bottom bar stats */ .theme-light .export-preview-table .bg-blue-900\/30 { background-color: #dbeafe !important; } .theme-light .export-preview-table .text-blue-400 { color: #2563eb !important; } /* Filename & row count text */ .theme-light .export-preview-table .text-slate-500 { color: #475569 !important; } /* Scrollbar fade */ .theme-light .export-preview-table .overflow-x-auto::after { background: linear-gradient(to right, transparent, #ffffff) !important; } /* ═══════════════════════════════════════════════ */ /* ── 16c-0. CLEANING SECTION — white bg */ /* ═══════════════════════════════════════════════ */ .theme-light .cleaning-section.bg-slate-900 { background-color: #ffffff !important; } /* ═══════════════════════════════════════════════ */ /* ── 16c. BEFORE CARD (dirty data) — light */ /* ═══════════════════════════════════════════════ */ .theme-light .before-card { background-color: #ffffff !important; border-color: #fca5a5 !important; } .theme-light .before-card > div:first-child { background-color: #fef2f2 !important; border-color: #fecaca !important; } .theme-light .before-card thead tr { border-color: #e2e8f0 !important; } .theme-light .before-card thead th { color: #dc2626 !important; } .theme-light .before-card tbody tr { border-color: #f1f5f9 !important; } .theme-light .before-card .text-red-400 { color: #dc2626 !important; } .theme-light .before-card .text-amber-300\/80 { color: #d97706 !important; } .theme-light .before-card .text-slate-500 { color: #475569 !important; } .theme-light .before-card .font-mono { color: #1e293b !important; } /* Bottom bar */ .theme-light .before-card > div:last-child { background-color: #fef2f2 !important; border-color: #fecaca !important; } .theme-light .before-card .text-red-400\/70 { color: rgba(220,38,38,0.7) !important; } /* ═══════════════════════════════════════════════ */ /* ── 16d. AFTER CARD (clean data) — light */ /* ═══════════════════════════════════════════════ */ .theme-light .after-card { background-color: #ffffff !important; border-color: #6ee7b7 !important; } .theme-light .after-card > div:first-child { background-color: #ecfdf5 !important; border-color: #a7f3d0 !important; } .theme-light .after-card .text-emerald-400\/80, .theme-light .after-card .text-emerald-400 { color: #059669 !important; } .theme-light .after-card .text-emerald-300 { color: #10b981 !important; } .theme-light .after-card thead tr { border-color: #e2e8f0 !important; } .theme-light .after-card thead th { color: #64748b !important; } .theme-light .after-card tbody tr { border-color: #f1f5f9 !important; } .theme-light .after-card .text-blue-400 { color: #2563eb !important; } /* Bottom bar */ .theme-light .after-card > div:last-child { background-color: #ecfdf5 !important; border-color: #a7f3d0 !important; } .theme-light .after-card .bg-slate-700 { background-color: #e2e8f0 !important; } .theme-light .after-card .bg-emerald-900\/30 { background-color: #d1fae5 !important; } .theme-light .after-card .border-emerald-800\/60 { border-color: rgba(110,231,183,0.6) !important; } .theme-light .after-card .border-emerald-800 { border-color: #6ee7b7 !important; } /* ═══════════════════════════════════════════════ */ /* ── 16e. HIW CARDS — light mode */ /* ═══════════════════════════════════════════════ */ .theme-light .hiw-card { background-color: #ffffff !important; border-color: #cbd5e1 !important; } /* HIW card header bars */ .theme-light .hiw-card > div:first-child { background-color: #f8fafc !important; border-color: #e2e8f0 !important; } /* HIW rows (contact list items, cleaning transforms) */ .theme-light .hiw-card .hiw-row { background-color: #f8fafc !important; } .theme-light .hiw-card .hiw-shimmer { background: #f8fafc !important; } /* HIW row text */ .theme-light .hiw-card .text-red-400 { color: #dc2626 !important; } .theme-light .hiw-card .text-blue-400 { color: #2563eb !important; } /* Contact avatar circles */ .theme-light .hiw-card .rounded-full[class*="bg-blue-900"] { background-color: #dbeafe !important; } .theme-light .hiw-card .rounded-full[class*="bg-emerald-900"] { background-color: #d1fae5 !important; } .theme-light .hiw-card .rounded-full[class*="bg-violet-900"] { background-color: #ede9fe !important; } .theme-light .hiw-card .rounded-full[class*="bg-amber-900"] { background-color: #ffedd5 !important; } /* Bottom filter tags */ .theme-light .hiw-card .rounded[class*="bg-slate-700"] { background-color: #f1f5f9 !important; border-color: #cbd5e1 !important; color: #475569 !important; } /* HIW card table rows */ .theme-light .hiw-card table thead tr { border-color: #e2e8f0 !important; } .theme-light .hiw-card table tbody tr { border-color: #f1f5f9 !important; } /* Email status badges in HIW cards */ .theme-light .hiw-card .bg-emerald-900\/30 { background-color: #d1fae5 !important; } .theme-light .hiw-card .border-emerald-800 { border-color: #6ee7b7 !important; } .theme-light .hiw-card .text-emerald-400 { color: #059669 !important; } .theme-light .hiw-card .text-emerald-300 { color: #10b981 !important; } /* Warning badges */ .theme-light .hiw-card .text-yellow-400 { color: #d97706 !important; } .theme-light .hiw-card .bg-yellow-900\/30 { background-color: #fff7ed !important; } /* Processing indicator */ .theme-light .hiw-card .pulse-dot { background-color: #059669 !important; } /* ═══════════════════════════════════════════════ */ /* ── 16f. PRICING PAGE — light overrides */ /* ═══════════════════════════════════════════════ */ /* Gradient card backgrounds → soft white-to-gray with shadow */ .theme-light [class*="from-slate-900"] { --tw-gradient-from: #ffffff !important; background: linear-gradient(to bottom, #ffffff, #f8fafc) !important; border-color: #e2e8f0 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04) !important; } /* Popular tier card → neutral white with subtle lift */ .theme-light .border-yellow-500[class*="from-slate-900"], .theme-light [class*="from-slate-900"].border-yellow-500 { background: #ffffff !important; border-color: #0f172a !important; box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06) !important; } .theme-light .ring-yellow-500 { --tw-ring-color: #f59e0b !important; } .theme-light .ring-2.ring-yellow-500 { --tw-ring-color: #f59e0b !important; } /* "What you get" inner boxes */ .theme-light .bg-slate-900\/50 { background-color: #ffffff !important; border-color: #e2e8f0 !important; } /* "How credits work" explainer card (bg-slate-800 on pricing, NOT generic) */ .theme-light .mt-8.rounded-2xl.bg-slate-800 { background-color: #f1f5f9 !important; border-color: #e2e8f0 !important; } /* Free plan emerald banner */ .theme-light .mb-6.rounded-2xl.border-emerald-800 { background-color: #ecfdf5 !important; border-color: #a7f3d0 !important; } .theme-light .mb-6.rounded-2xl .text-emerald-300 { color: #047857 !important; } /* Emerald "Save 20%" tab badge */ .theme-light .bg-emerald-900\/40 { background-color: #d1fae5 !important; } .theme-light .ring-emerald-700 { --tw-ring-color: #a7f3d0 !important; } /* Preserve white text inside colored badges */ .theme-light .bg-emerald-600 { color: #ffffff !important; } .theme-light .bg-emerald-600 * { color: #ffffff !important; } /* Non-popular CTA buttons: solid dark for contrast */ .theme-light button.make-payment-package.bg-slate-800 { background-color: #0f172a !important; color: #ffffff !important; border-color: #0f172a !important; } .theme-light button.make-payment-package.bg-slate-800:hover { background-color: #1e293b !important; } /* Tab buttons (variant B pricing) */ .theme-light .tab-btn { border-color: #e2e8f0 !important; color: #475569 !important; } .theme-light .tab-btn:hover { background-color: #f1f5f9 !important; } .theme-light .tab-btn.tab-active { background-color: #0f172a !important; color: #ffffff !important; border-color: #0f172a !important; } /* FAQ tab buttons */ .theme-light .faq-tab { border-color: #e2e8f0 !important; color: #475569 !important; } .theme-light .faq-tab:hover { background-color: #f1f5f9 !important; } .theme-light .faq-tab.bg-slate-700 { background-color: #0f172a !important; color: #ffffff !important; } /* FAQ detail cards */ .theme-light details.rounded-xl { border-color: #e2e8f0 !important; background-color: #ffffff !important; } .theme-light details summary { color: #0f172a !important; } /* Trust section cards */ .theme-light .rounded-2xl.bg-slate-800\/50 { background-color: #f8fafc !important; border-color: #e2e8f0 !important; } /* Yearly savings pill */ .theme-light .inline-flex.rounded-full.bg-emerald-600 { background-color: #059669 !important; color: #ffffff !important; } /* Bottom trust tags on pricing */ .theme-light .flex.flex-wrap .rounded-full.border.border-slate-800 { border-color: #e2e8f0 !important; } /* ═══════════════════════════════════════════════ */ /* ── 17. TOGGLE BUTTON */ /* ═══════════════════════════════════════════════ */ /* Keep toggle icon colors stable across themes */ .theme-light .theme-toggle-btn { border-color: #cbd5e1; color: #475569; } .theme-light .theme-toggle-btn:hover { background-color: #e2e8f0; color: #0f172a; } /* Sun/moon SVG icons inherit color from button */ .theme-toggle-btn svg { color: inherit; } /* ═══════════════════════════════════════════════ */ /* ── 18. SHIMMER — subtle in light mode */ /* ═══════════════════════════════════════════════ */ .theme-light .cta-shimmer::before { opacity: 0.4; } /* ═══════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════ */ /* ── DARK ISLANDS */ /* Product mockups keep dark styling in light mode */ /* ═══════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════ */ /* ── Self-targeting (dark-island element itself) ── */ .theme-light .dark-island.bg-slate-950 { background-color: rgb(2 6 23) !important; } .theme-light .dark-island.bg-slate-900 { background-color: rgb(15 23 42) !important; } .theme-light .dark-island.bg-slate-900\/80 { background-color: rgba(15,23,42,0.8) !important; } .theme-light .dark-island.bg-slate-800 { background-color: rgb(30 41 59) !important; } .theme-light .dark-island.bg-slate-700\/50 { background-color: rgba(51,65,85,0.5) !important; } .theme-light .dark-island.border-slate-800 { border-color: rgb(30 41 59) !important; } .theme-light .dark-island.border-slate-800\/80 { border-color: rgba(30,41,59,0.8) !important; } .theme-light .dark-island.border-slate-700 { border-color: rgb(51 65 85) !important; } .theme-light .dark-island.border-emerald-900\/60 { border-color: rgba(6,78,59,0.6) !important; } .theme-light .dark-island.border-red-900\/60 { border-color: rgba(127,29,29,0.6) !important; } /* ── Children backgrounds ── */ .theme-light .dark-island .bg-slate-950 { background-color: rgb(2 6 23) !important; } .theme-light .dark-island .bg-slate-900 { background-color: rgb(15 23 42) !important; } .theme-light .dark-island .bg-slate-900\/80 { background-color: rgba(15,23,42,0.8) !important; } .theme-light .dark-island .bg-slate-800 { background-color: rgb(30 41 59) !important; } .theme-light .dark-island .bg-slate-800\/80 { background-color: rgba(30,41,59,0.8) !important; } .theme-light .dark-island .bg-slate-800\/60 { background-color: rgba(30,41,59,0.6) !important; } .theme-light .dark-island .bg-slate-800\/40 { background-color: rgba(30,41,59,0.4) !important; } .theme-light .dark-island .bg-slate-800\/50 { background-color: rgba(30,41,59,0.5) !important; } .theme-light .dark-island .bg-slate-700\/50 { background-color: rgba(51,65,85,0.5) !important; } .theme-light .dark-island .bg-slate-700 { background-color: rgb(51 65 85) !important; } /* ── Children text ── */ .theme-light .dark-island .text-white { color: #ffffff !important; } .theme-light .dark-island .text-slate-300 { color: #cbd5e1 !important; } .theme-light .dark-island .text-slate-400 { color: #94a3b8 !important; } .theme-light .dark-island .text-slate-500 { color: #64748b !important; } .theme-light .dark-island .text-slate-600 { color: #475569 !important; } /* ── Children borders ── */ .theme-light .dark-island .border-slate-800 { border-color: rgb(30 41 59) !important; } .theme-light .dark-island .border-slate-800\/40 { border-color: rgba(30,41,59,0.4) !important; } .theme-light .dark-island .border-slate-800\/60 { border-color: rgba(30,41,59,0.6) !important; } .theme-light .dark-island .border-slate-700 { border-color: rgb(51 65 85) !important; } /* ── Children colored accent backgrounds (keep dark tones) ── */ .theme-light .dark-island .bg-emerald-900\/30 { background-color: rgba(6,78,59,0.3) !important; } .theme-light .dark-island .bg-emerald-900\/20 { background-color: rgba(6,78,59,0.2) !important; } .theme-light .dark-island .bg-emerald-900\/10 { background-color: rgba(6,78,59,0.1) !important; } .theme-light .dark-island .bg-emerald-900\/50 { background-color: rgba(6,78,59,0.5) !important; } .theme-light .dark-island .bg-blue-900\/30 { background-color: rgba(30,58,138,0.3) !important; } .theme-light .dark-island .bg-blue-900\/50 { background-color: rgba(30,58,138,0.5) !important; } .theme-light .dark-island .bg-violet-900\/50 { background-color: rgba(76,29,149,0.5) !important; } .theme-light .dark-island .bg-amber-900\/50 { background-color: rgba(120,53,15,0.5) !important; } .theme-light .dark-island .bg-yellow-900\/10 { background-color: rgba(113,63,18,0.1) !important; } .theme-light .dark-island .bg-yellow-900\/15 { background-color: rgba(113,63,18,0.15) !important; } .theme-light .dark-island .bg-yellow-900\/20 { background-color: rgba(113,63,18,0.2) !important; } .theme-light .dark-island .bg-red-900\/30 { background-color: rgba(127,29,29,0.3) !important; } .theme-light .dark-island .bg-red-900\/20 { background-color: rgba(127,29,29,0.2) !important; } .theme-light .dark-island .bg-red-900\/10 { background-color: rgba(127,29,29,0.1) !important; } .theme-light .dark-island .bg-orange-900\/30 { background-color: rgba(124,45,18,0.3) !important; } .theme-light .dark-island .bg-purple-900\/30 { background-color: rgba(88,28,135,0.3) !important; } /* ── Children colored borders (keep dark tones) ── */ .theme-light .dark-island .border-emerald-800 { border-color: rgb(6 95 70) !important; } .theme-light .dark-island .border-emerald-800\/60 { border-color: rgba(6,95,70,0.6) !important; } .theme-light .dark-island .border-emerald-900\/60 { border-color: rgba(6,78,59,0.6) !important; } .theme-light .dark-island .border-emerald-900\/40 { border-color: rgba(6,78,59,0.4) !important; } .theme-light .dark-island .border-blue-800 { border-color: rgb(30 64 175) !important; } .theme-light .dark-island .border-blue-900 { border-color: rgb(30 58 138) !important; } .theme-light .dark-island .border-violet-800 { border-color: rgb(91 33 182) !important; } .theme-light .dark-island .border-amber-800 { border-color: rgb(146 64 14) !important; } .theme-light .dark-island .border-yellow-800 { border-color: rgb(133 77 14) !important; } .theme-light .dark-island .border-yellow-800\/20 { border-color: rgba(133,77,14,0.2) !important; } .theme-light .dark-island .border-red-900\/60 { border-color: rgba(127,29,29,0.6) !important; } .theme-light .dark-island .border-red-900\/40 { border-color: rgba(127,29,29,0.4) !important; } /* ── Dark island colored text (keep original dark values) ── */ .theme-light .dark-island .text-emerald-400 { color: #34d399 !important; } .theme-light .dark-island .text-emerald-300 { color: #6ee7b7 !important; } .theme-light .dark-island .text-blue-400 { color: #60a5fa !important; } .theme-light .dark-island .text-blue-300 { color: #93c5fd !important; } .theme-light .dark-island .text-violet-400 { color: #a78bfa !important; } .theme-light .dark-island .text-rose-400 { color: #fb7185 !important; } .theme-light .dark-island .text-purple-300 { color: #d8b4fe !important; } .theme-light .dark-island .text-red-400 { color: #f87171 !important; } .theme-light .dark-island .text-sky-300 { color: #7dd3fc !important; } /* ── Dark island yellow/amber text (keep original) ── */ .theme-light .dark-island .text-yellow-400 { color: #facc15 !important; } .theme-light .dark-island .text-yellow-300 { color: #fde047 !important; } .theme-light .dark-island .text-amber-400 { color: #fbbf24 !important; } .theme-light .dark-island .text-amber-300\/80 { color: rgba(252,211,77,0.8) !important; } /* ── Dark island yellow/amber backgrounds (keep original) ── */ .theme-light .dark-island .bg-yellow-400\/10 { background-color: rgba(250,204,21,0.1) !important; } .theme-light .dark-island .bg-yellow-900\/30 { background-color: rgba(113,63,18,0.3) !important; } .theme-light .dark-island .bg-amber-900\/30 { background-color: rgba(120,53,15,0.3) !important; } /* ── Dark island yellow/amber borders (keep original) ── */ .theme-light .dark-island .border-yellow-500\/20 { border-color: rgba(234,179,8,0.2) !important; } .theme-light .dark-island .border-yellow-500\/30 { border-color: rgba(234,179,8,0.3) !important; } .theme-light .dark-island .border-amber-800 { border-color: rgb(146 64 14) !important; } /* ── Dark island hover states ── */ .theme-light .dark-island .hover\:bg-slate-800:hover { background-color: rgb(30 41 59) !important; } .theme-light .dark-island .hover\:bg-slate-700:hover { background-color: rgb(51 65 85) !important; } .theme-light .dark-island .hover\:bg-slate-700\/50:hover { background-color: rgba(51,65,85,0.5) !important; } .theme-light .dark-island .hover\:bg-yellow-900\/20:hover { background-color: rgba(113,63,18,0.2) !important; } .theme-light .dark-island .hover\:text-white:hover { color: #ffffff !important; } .theme-light .dark-island .hover\:border-yellow-700:hover { border-color: rgb(161 98 7) !important; } .theme-light .dark-island .hover\:border-slate-700:hover { border-color: rgb(51 65 85) !important; } /* (hiw-card no longer a dark island — styles in section 16e) */ /* ── Dark island mobile overrides ── */ @media (max-width: 767px) { .theme-light .dark-island .overflow-x-auto::after { background: linear-gradient(to right, transparent, rgb(30 41 59)) !important; } }