/* ============================================================ Dark Theme – The Rank Lab Shared overrides for dark-mode pages. Opt in by adding class="dark-theme" to . Sits on top of styles.css; does NOT replace it. ============================================================ */ /* Palette (from logo bar chart): Blue #5384EB | Green #58A75B | Gold #F2BF42 Red #D7513F | Navy #003573 Surface #0D1117 (blue-tinted near-black) Card #161B22 Text #F0EFEA (warm off-white) */ /* ── Typography ─────────────────────────────────────────────── */ .dark-theme h1, .dark-theme h2, .dark-theme h3, .dark-theme h4, .dark-theme .step-title, .dark-theme .faq-question, .dark-theme .cta-eyebrow, .dark-theme .sp-hero__title, .dark-theme .ab-hero__title { font-family: 'Space Grotesk', sans-serif; } .dark-theme p, .dark-theme li, .dark-theme label, .dark-theme .nav-link, .dark-theme .service-link, .dark-theme .step-desc, .dark-theme .faq-answer, .dark-theme .cta-subtext, .dark-theme .sp-stat__label { font-family: 'Inter', sans-serif; } .dark-theme .sp-stat__number, .dark-theme .analytics-metric__value, .dark-theme [class*="price"], .dark-theme [class*="__num"] { font-family: 'JetBrains Mono', monospace; } /* ── Base surface & text ────────────────────────────────────── */ .dark-theme { background: #0D1117; color: rgba(240,239,234,.7); } /* ── Gradient text utility ──────────────────────────────────── */ .dark-theme .gradient-text { background: #58A75B; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── Inline accent spans (color:#2AB573) ────────────────────── */ .dark-theme span[style*="color:#2AB573"] { color: #58A75B !important; } /* ── Inline dark text (color:#0C2233) on dark bg ────────────── */ .dark-theme strong[style*="color:#0C2233"] { color: #F0EFEA !important; } /* ── Buttons ────────────────────────────────────────────────── */ .dark-theme .btn-primary { background: #58A75B; border-radius: 4px; box-shadow: 0 4px 20px rgba(88,167,91,.3); } .dark-theme .btn-primary:hover { box-shadow: 0 8px 32px rgba(88,167,91,.45); } /* ── All CTA/button pill shapes → 4px ────────────────────────── */ .dark-theme [class*="__cta"], .dark-theme [class*="-cta"], .dark-theme [class*="__btn"], .dark-theme [class*="-btn"], .dark-theme .sp-hero__cta, .dark-theme .sp-cta__btn, .dark-theme .ab-cta__btn, .dark-theme .audit-toggle, .dark-theme .audit-submit button, .dark-theme .da-form-submit button, .dark-theme .contact-submit, .dark-theme .process-cta a, .dark-theme .faq-cta a, .dark-theme .svc-matrix__cta, .dark-theme .byp-cta { border-radius: 4px !important; } /* ── Navbar ──────────────────────────────────────────────────── */ .dark-theme .navbar { background: rgba(13,17,23,.92); border-bottom-color: rgba(240,239,234,.06); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .dark-theme .navbar--scrolled { background: rgba(13,17,23,.97); border-bottom-color: rgba(240,239,234,.08); box-shadow: 0 4px 24px rgba(0,0,0,.3); } .dark-theme .nav-link { color: rgba(240,239,234,.65); } .dark-theme .nav-link:hover { color: #F0EFEA; background: rgba(240,239,234,.06); } .dark-theme .nav-link.active { color: #F0EFEA; } .dark-theme .nav-link::after { background: #58A75B; } .dark-theme .navbar__logo-img { filter: brightness(0) invert(1); } .dark-theme .navbar__cta { border-radius: 4px; background: #58A75B; box-shadow: 0 4px 16px rgba(88,167,91,.3); color: #F0EFEA; } .dark-theme .hamburger__bar { background: #F0EFEA; } .dark-theme .mobile-menu { background: rgba(13,17,23,.98); border-bottom-color: rgba(240,239,234,.06); box-shadow: 0 8px 32px rgba(0,0,0,.3); } .dark-theme .mobile-menu .nav-link { color: rgba(240,239,234,.65); } .dark-theme .mobile-menu .nav-link:hover { color: #F0EFEA; } /* ── Shared hero pattern (.sp-hero) ─────────────────────────── */ /* Already dark (#0C2233 gradient) – update to #0D1117 + text */ .dark-theme .sp-hero { background: #0D1117 !important; } .dark-theme .sp-hero__title, .dark-theme .sp-hero h1 { color: #F0EFEA; } .dark-theme .sp-hero__sub, .dark-theme .sp-hero p { color: rgba(240,239,234,.65); } .dark-theme .sp-hero__eyebrow { display: none !important; } /* ── Shared stats bar (.sp-stats) ───────────────────────────── */ .dark-theme .sp-stats { background: #0D1117 !important; } .dark-theme .sp-stat__icon { background: rgba(83,132,235,.1); border-color: rgba(83,132,235,.2); border-radius: 4px; } .dark-theme .sp-stat__icon svg { stroke: #5384EB; } .dark-theme .sp-stat__number { background: none; -webkit-background-clip: unset; -webkit-text-fill-color: #F0EFEA; background-clip: unset; color: #F0EFEA; } /* ── Shared FAQ pattern (.pg-faq) ───────────────────────────── */ .dark-theme .pg-faq { background: #111318 !important; } .dark-theme .pg-faq__label { display: none !important; } .dark-theme .pg-faq__heading, .dark-theme .pg-faq h2 { color: #F0EFEA; } .dark-theme .pg-faq__sub, .dark-theme .pg-faq > .inner > p { color: rgba(240,239,234,.6); } .dark-theme .pg-faq .faq-item, .dark-theme .pg-faq details { background: #161B22; border-color: rgba(240,239,234,.08); border-radius: 4px; box-shadow: none; } .dark-theme .pg-faq .faq-item[open], .dark-theme .pg-faq details[open] { border-color: rgba(83,132,235,.25); box-shadow: 0 4px 20px rgba(0,0,0,.2); } .dark-theme .pg-faq .faq-question, .dark-theme .pg-faq summary { color: #F0EFEA; } .dark-theme .pg-faq .faq-answer, .dark-theme .pg-faq .faq-answer p { color: rgba(240,239,234,.6); } .dark-theme .pg-faq .faq-answer strong { color: #F0EFEA; } .dark-theme .pg-faq .faq-num, .dark-theme .pg-faq .faq-num { background: #58A75B; border-radius: 4px; } .dark-theme .pg-faq .faq-chevron { background: rgba(83,132,235,.1); border-radius: 4px; } .dark-theme .pg-faq .faq-chevron svg { stroke: #5384EB; } .dark-theme .pg-faq .faq-item[open] summary .faq-chevron, .dark-theme .pg-faq details[open] summary .faq-chevron { background: #5384EB; } .dark-theme .pg-faq .faq-answer a { color: #5384EB; } /* ── Shared CTA section (.sp-cta) ───────────────────────────── */ .dark-theme .sp-cta { background: #111318 !important; } .dark-theme .sp-cta__eyebrow { display: none !important; } .dark-theme .sp-cta h2, .dark-theme .sp-cta__title { color: #F0EFEA !important; } .dark-theme .sp-cta p, .dark-theme .sp-cta__sub { color: rgba(240,239,234,.65) !important; } .dark-theme .sp-cta a[class*="btn"], .dark-theme .sp-cta .sp-cta__btn { background: #58A75B; border-radius: 4px; box-shadow: 0 4px 20px rgba(88,167,91,.25); } .dark-theme .sp-cta .cta-fine-print, .dark-theme .sp-cta p[style*="rgba(255,255,255"] { color: rgba(240,239,234,.4) !important; } /* ── Generic light sections → dark ──────────────────────────── */ /* White sections */ .dark-theme [class*="--white"], .dark-theme section[style*="background:#fff"], .dark-theme section[style*="background: #fff"], .dark-theme section[style*="background:white"] { background: #0D1117 !important; } /* Light gray sections (#F5FAF7) */ .dark-theme [class*="--gray"] { background: #0D1117 !important; } /* ── Generic card surfaces ──────────────────────────────────── */ /* Only target elements whose class starts with or is exactly a -card class, not BEM children like __label, __price, __desc, __cta, __features */ .dark-theme .service-card, .dark-theme [class*="-card"]:not([class*="__"]) { background: #161B22; border: 1px solid rgba(240,239,234,.08); border-radius: 4px; } .dark-theme .service-card:hover, .dark-theme [class*="-card"]:not([class*="__"]):hover { border-color: rgba(88,167,91,.25); } .dark-theme .service-card h3, .dark-theme [class*="-card"]:not([class*="__"]) h3 { color: #F0EFEA; } .dark-theme .service-card p, .dark-theme [class*="-card"]:not([class*="__"]) p { color: rgba(240,239,234,.6); } .dark-theme .service-link { color: #5384EB; } .dark-theme .service-link:hover { color: #F0EFEA; } .dark-theme .service-icon { background: rgba(83,132,235,.08); border-radius: 4px; } /* ── Footer ─────────────────────────────────────────────────── */ .dark-theme #footer { background: #0D1117 !important; } .dark-theme .footer-top { border-bottom-color: rgba(240,239,234,.07); } .dark-theme .footer-social-link { border-radius: 4px; } .dark-theme .footer-social-link:hover { background: #5384EB; } .dark-theme .footer-newsletter { border-radius: 4px; } .dark-theme .footer-newsletter input { font-family: 'Inter', sans-serif; } .dark-theme .footer-newsletter button { background: #58A75B; font-family: 'Space Grotesk', sans-serif; } .dark-theme .footer-contact-item svg { fill: #58A75B; } /* ── Generic heading colors on dark surfaces ─────────────────── */ .dark-theme section h2, .dark-theme section h3 { color: #F0EFEA; } .dark-theme section p { color: rgba(240,239,234,.6); } /* ── Gradient text in inline styles → solid green ────────────── */ /* Inline