/* ═══════════════════════════════════════════════════════════════════ SERPpro Theme System — Full Dark + Light Scoped under [data-theme="dark"] and [data-theme="light"] Petronas Teal accent: #00D2BE (dark) / #00A896 (light) NOTE: Geist font is loaded via in page (not @import here) to avoid render-blocking on each page load. ═══════════════════════════════════════════════════════════════════ */ /* ────────────────────────────────────────────────────────────────── DARK MODE ────────────────────────────────────────────────────────────────── */ html[data-theme="dark"] { color-scheme: dark; --white: #121316; --off: #121316; --off2: #22252B; --border: #2A2D33; --border-dark: #3A3E46; --text: #F5F6F7; --text-2: #D0D2D7; --text-3: #A0A4AB; --text-4: #6B7076; --accent: #00D2BE; --ink: #F5F6F7; --green: #00D2BE; --green-bg: rgba(0, 210, 190, 0.12); --blue: #3B82F6; --blue-bg: rgba(59, 130, 246, 0.12); --amber: #F59E0B; --amber-bg: rgba(245, 158, 11, 0.12); } html[data-theme="dark"], html[data-theme="dark"] body { background: #0A0B0D !important; background-color: #0A0B0D !important; color: #F5F6F7; } /* Geist font site-wide in dark mode */ html[data-theme="dark"] body, html[data-theme="dark"] button, html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea, html[data-theme="dark"] p, html[data-theme="dark"] a, html[data-theme="dark"] li, html[data-theme="dark"] div, html[data-theme="dark"] label, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-feature-settings: 'ss01', 'ss02', 'cv11'; } html[data-theme="dark"] h1, html[data-theme="dark"] h2.sec-title { font-family: 'Geist', sans-serif !important; font-weight: 700 !important; letter-spacing: -0.03em !important; } html[data-theme="dark"] h2.sec-title em, html[data-theme="dark"] .cta-box h2 em { font-style: normal !important; font-weight: 800 !important; background: linear-gradient(90deg, #00D2BE, #4DE0CE); -webkit-background-clip: text; background-clip: text; color: transparent !important; } html[data-theme="dark"] .sec-tag, html[data-theme="dark"] .price-tier, html[data-theme="dark"] .hero-stat-num, html[data-theme="dark"] .stat-box-num, html[data-theme="dark"] .ticker-item, html[data-theme="dark"] .ret-table td, html[data-theme="dark"] .step-n, html[data-theme="dark"] .pain-num, html[data-theme="dark"] .bar-label, html[data-theme="dark"] .bar-count, html[data-theme="dark"] .price-amount, html[data-theme="dark"] .dpr-price-big, html[data-theme="dark"] .spec-price { font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace !important; } html[data-theme="dark"] body { letter-spacing: -0.005em; } /* Nav — dark */ html[data-theme="dark"] nav { background: rgba(10, 11, 13, 0.92) !important; border-bottom-color: #2A2D33 !important; backdrop-filter: blur(16px); } html[data-theme="dark"] .nav-links a { color: #A0A4AB; } html[data-theme="dark"] .nav-links a:hover { color: #F5F6F7; background: #22252B; } html[data-theme="dark"] .nav-cta { background: #00D2BE !important; color: #000 !important; box-shadow: 0 0 0 1px #00D2BE, 0 4px 12px rgba(0, 210, 190, 0.35); } html[data-theme="dark"] .nav-cta:hover { background: #26D9C4 !important; } html[data-theme="dark"] .nav-dropdown-menu { background: #1A1C20 !important; border-color: #2A2D33 !important; box-shadow: 0 12px 40px rgba(0,0,0,0.5); } html[data-theme="dark"] .nav-dropdown-menu a { color: #A0A4AB !important; } html[data-theme="dark"] .nav-dropdown-menu a:hover { background: #22252B !important; color: #F5F6F7 !important; } html[data-theme="dark"] .nav-dropdown-label { color: #6B7076; } html[data-theme="dark"] .hamburger span { background: #F5F6F7; } /* Buttons — dark */ html[data-theme="dark"] .btn-primary { background: #00D2BE !important; color: #000 !important; box-shadow: 0 0 0 1px #00D2BE, 0 4px 12px rgba(0, 210, 190, 0.35); } html[data-theme="dark"] .btn-primary:hover { background: #26D9C4 !important; box-shadow: 0 0 0 1px #26D9C4, 0 6px 20px rgba(0, 210, 190, 0.45); transform: translateY(-1px); } html[data-theme="dark"] .btn-secondary { background: #1A1C20 !important; border-color: #2A2D33 !important; color: #F5F6F7 !important; } html[data-theme="dark"] .btn-secondary:hover { border-color: #00D2BE !important; color: #00D2BE !important; } /* Pop pricing cards */ html[data-theme="dark"] .price-card.pop { background: #00D2BE !important; border-color: #00D2BE !important; color: #000 !important; } html[data-theme="dark"] .price-card.pop .price-tier, html[data-theme="dark"] .price-card.pop .price-per { color: rgba(0,0,0,0.6) !important; } html[data-theme="dark"] .price-card.pop .price-type, html[data-theme="dark"] .price-card.pop .price-amount { color: #000 !important; } html[data-theme="dark"] .price-card.pop .price-feats li { color: rgba(0,0,0,0.75) !important; } html[data-theme="dark"] .price-card.pop .feat-dot { background: rgba(0,0,0,0.4) !important; } html[data-theme="dark"] .price-card.pop .btn-primary { background: #000 !important; color: #00D2BE !important; box-shadow: 0 0 0 1px #000 !important; } html[data-theme="dark"] .price-card.pop .btn-primary:hover { background: #111 !important; } /* Cards + surfaces */ html[data-theme="dark"] .price-card, html[data-theme="dark"] .dpr-card, html[data-theme="dark"] .spec-card, html[data-theme="dark"] .pain-card, html[data-theme="dark"] .how-step, html[data-theme="dark"] .stat-box, html[data-theme="dark"] .test-card { background: #1A1C20 !important; border-color: #2A2D33 !important; } html[data-theme="dark"] .price-card:hover, html[data-theme="dark"] .dpr-card:hover, html[data-theme="dark"] .pain-card:hover, html[data-theme="dark"] .how-step:hover, html[data-theme="dark"] .test-card:hover { border-color: #3A3E46 !important; background: #22252B !important; } html[data-theme="dark"] .dpr-card.mid { background: #22252B !important; } /* Section backgrounds */ html[data-theme="dark"] .network, html[data-theme="dark"] .retainer, html[data-theme="dark"] .testimonials, html[data-theme="dark"] [class*="section"][style*="off"] { background: #121316 !important; border-color: #2A2D33 !important; } /* Ticker */ html[data-theme="dark"] .ticker-strip { background: #121316 !important; border-color: #2A2D33 !important; } html[data-theme="dark"] .ticker-item { color: #A0A4AB; } html[data-theme="dark"] .ticker-dr { color: #6B7076; } html[data-theme="dark"] .ticker-sep { color: #3A3E46; } /* Bars */ html[data-theme="dark"] .bar-track { background: #22252B !important; } html[data-theme="dark"] .bar-fill { background: #00D2BE !important; } /* Tables */ html[data-theme="dark"] .ret-table { background: #1A1C20 !important; border-color: #2A2D33 !important; } html[data-theme="dark"] .ret-table th { background: #22252B !important; color: #A0A4AB; border-color: #2A2D33 !important; } html[data-theme="dark"] .ret-table td { color: #D0D2D7; border-color: #2A2D33 !important; } html[data-theme="dark"] .ret-table td:first-child { color: #F5F6F7; } html[data-theme="dark"] .ret-table tr:hover td { background: #22252B !important; } html[data-theme="dark"] .ret-table td.bonus { color: #00D2BE !important; } /* Forms */ html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: #1A1C20 !important; border-color: #2A2D33 !important; color: #F5F6F7 !important; } html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus { border-color: #00D2BE !important; outline: none; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #6B7076 !important; } html[data-theme="dark"] label { color: #A0A4AB !important; } /* Tags */ html[data-theme="dark"] .tag-green { background: rgba(0, 210, 190, 0.12) !important; color: #00D2BE !important; } html[data-theme="dark"] .tag-blue { background: rgba(59, 130, 246, 0.12) !important; color: #3B82F6 !important; } html[data-theme="dark"] .tag-amber { background: rgba(245, 158, 11, 0.12) !important; color: #F59E0B !important; } html[data-theme="dark"] .ck { color: #00D2BE !important; } /* CTA */ html[data-theme="dark"] .cta-box { background: #121316 !important; border-color: #2A2D33 !important; } html[data-theme="dark"] .cta-box::before { background: #00D2BE !important; } /* Footer */ html[data-theme="dark"] footer { background: #0A0B0D !important; border-color: #2A2D33 !important; } html[data-theme="dark"] .footer-col a { color: #A0A4AB; } html[data-theme="dark"] .footer-col a:hover { color: #F5F6F7; } html[data-theme="dark"] .footer-col h4 { color: #6B7076; } html[data-theme="dark"] .footer-copy, html[data-theme="dark"] .footer-legal a { color: #6B7076; } html[data-theme="dark"] .footer-legal a:hover { color: #D0D2D7; } html[data-theme="dark"] .footer-bottom { border-color: #2A2D33 !important; } /* Sticky bar */ html[data-theme="dark"] .sticky-bottom { background: rgba(10, 11, 13, 0.95) !important; border-color: #2A2D33 !important; } html[data-theme="dark"] .sticky-bottom p { color: #A0A4AB; } html[data-theme="dark"] .sticky-bottom .sticky-cta { background: #00D2BE !important; color: #000 !important; } html[data-theme="dark"] .sticky-bottom .sticky-cta:hover { background: #26D9C4 !important; } html[data-theme="dark"] .sticky-bottom .sticky-close:hover { background: #22252B; color: #F5F6F7; } /* Mobile nav menu */ @media (max-width: 960px) { html[data-theme="dark"] .nav-links { background: #121316 !important; border-color: #2A2D33 !important; } html[data-theme="dark"] .nav-links li { border-color: #2A2D33 !important; } html[data-theme="dark"] .nav-links .nav-cta { background: none !important; color: #F5F6F7 !important; } } /* Inline white / light bg catch-all */ html[data-theme="dark"] [style*="background:white"], html[data-theme="dark"] [style*="background: white"], html[data-theme="dark"] [style*="background:#fff"], html[data-theme="dark"] [style*="background: #fff"], html[data-theme="dark"] [style*="background:#ffffff"], html[data-theme="dark"] [style*="background: #ffffff"], html[data-theme="dark"] [style*="background:#FFFFFF"], html[data-theme="dark"] [style*="background: #FFFFFF"] { background: #1A1C20 !important; } html[data-theme="dark"] [style*="color:#444"], html[data-theme="dark"] [style*="color: #444"] { color: #D0D2D7 !important; } html[data-theme="dark"] [style*="color:#888"], html[data-theme="dark"] [style*="color: #888"] { color: #6B7076 !important; } html[data-theme="dark"] [style*="border:1px solid rgba(0,0,0,0.08)"], html[data-theme="dark"] [style*="border-top:1px solid rgba(0,0,0,0.08)"] { border-color: #2A2D33 !important; } /* ────────────────────────────────────────────────────────────────── DARK MODE — inline-style tables & widgets Every page bundles its own