/* ============================================================ NOSAVENOPAY — "THE LEDGER" SITE-WIDE THEME OVERRIDE Light editorial / financial-broadsheet re-skin. Loaded LAST in so it overrides each page's inline dark design-system styles. Re-themes by overriding the shared design tokens + component classes used site-wide. Fraunces (display) · Outfit (body) · IBM Plex Mono (data) ============================================================ */ /* ---- 1. TOKENS: flip the whole var()-based palette ---- */ :root{ --bg-primary:#F7F4EC !important; --bg-secondary:#FBF9F3 !important; --bg-tertiary:#F0ECE0 !important; --bg-elevated:#FBF9F3 !important; --bg-glass:rgba(19,17,12,.03) !important; --text-primary:#13110C !important; --text-secondary:#3A372E !important; --text-tertiary:#6E6A5C !important; --text-inverse:#FBF9F3 !important; --accent-primary:#0E6B4A !important; --accent-hover:#0A4E36 !important; --accent-muted:#0E6B4A !important; --accent-glow:rgba(14,107,74,.10) !important; --accent-glow-strong:rgba(14,107,74,.18) !important; --accent-subtle-bg:rgba(14,107,74,.07) !important; --accent-secondary:#9A6B12 !important; --accent-secondary-glow:rgba(154,107,18,.10) !important; --success:#0E6B4A !important; --warning:#9A6B12 !important; --danger:#9E2B25 !important; --info:#1F5F8B !important; --border-subtle:rgba(19,17,12,.10) !important; --border-medium:rgba(19,17,12,.16) !important; --border-strong:rgba(19,17,12,.26) !important; --border-accent:rgba(14,107,74,.30) !important; --gradient-hero:radial-gradient(ellipse at 18% 40%,rgba(14,107,74,.05),transparent 60%),linear-gradient(180deg,#F7F4EC,#FBF9F3) !important; --gradient-card:linear-gradient(180deg,#FBF9F3,#F7F4EC) !important; --gradient-accent:linear-gradient(135deg,#0E6B4A,#0A4E36) !important; --gradient-text:linear-gradient(90deg,#0E6B4A,#0A4E36) !important; --gradient-cta-bg:linear-gradient(135deg,#FBF9F3,#F0ECE0) !important; --gradient-savings:linear-gradient(135deg,#0E6B4A,#9A6B12) !important; --font-display:'Fraunces',Georgia,serif !important; --font-body:'Outfit',system-ui,sans-serif !important; --font-mono:'IBM Plex Mono',monospace !important; --lg-paper:#F7F4EC; --lg-paper2:#FBF9F3; --lg-ink:#13110C; --lg-inksoft:#3A372E; --lg-muted:#6E6A5C; --lg-em:#0E6B4A; --lg-gold:#9A6B12; --lg-rule:#13110C; --lg-line:rgba(19,17,12,.12); --lg-shadow:0 18px 50px -28px rgba(19,17,12,.45); } /* ---- 2. BASE ---- */ body{ background:var(--lg-paper) !important; color:var(--lg-inksoft) !important; font-family:'Outfit',system-ui,sans-serif !important; } body::before{display:none !important;} /* kill dark grain overlay */ ::selection{background:var(--lg-em);color:#fff;} h1,h2,h3,h4,h5,h6{font-family:'Fraunces',Georgia,serif !important;color:var(--lg-ink) !important;letter-spacing:-.02em;} h1{font-weight:900 !important;} h2,h3{font-weight:700 !important;} a{color:var(--lg-em);} a:hover{color:var(--lg-ink);} strong,b{color:var(--lg-ink);} hr{border-color:var(--lg-line) !important;} /* eyebrow / kicker */ .eyebrow{font-family:'IBM Plex Mono',monospace !important;color:var(--lg-em) !important;letter-spacing:.14em !important;} .eyebrow::before{background:var(--lg-em) !important;} .gradient-text,.savings-text{ background:linear-gradient(90deg,#0E6B4A,#9A6B12) !important; -webkit-background-clip:text !important;background-clip:text !important;-webkit-text-fill-color:transparent !important;color:transparent !important; } /* ---- 3. GUARANTEE BAR — signature ink bar ---- */ .guarantee-bar{ background:var(--lg-ink) !important; color:var(--lg-paper) !important; border-top:none !important;border-bottom:none !important; font-family:'IBM Plex Mono',monospace !important;letter-spacing:.04em !important; } .guarantee-bar a{color:#7FD8AE !important;text-decoration:underline !important;text-underline-offset:3px;} /* ---- 4. NAV ---- */ .nav{ background:rgba(247,244,236,.86) !important; -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); border-bottom:1px solid var(--lg-rule) !important; box-shadow:none !important; } .nav.scrolled,.nav[class*="scroll"]{background:rgba(247,244,236,.95) !important;} .nav-logo,.footer-logo{color:var(--lg-ink) !important;font-family:'Fraunces',serif !important;font-weight:900 !important;} .logo-mark{ background:var(--lg-em) !important;color:#fff !important; border-radius:6px;padding:0 6px;font-family:'IBM Plex Mono',monospace !important; -webkit-text-fill-color:#fff !important; } .logo-accent{color:var(--lg-em) !important;-webkit-text-fill-color:var(--lg-em) !important;} .nav-link{color:var(--lg-inksoft) !important;font-family:'Outfit',sans-serif !important;font-weight:600 !important;} .nav-link:hover{color:var(--lg-em) !important;} .dropdown,.dropdown-menu{ background:var(--lg-paper2) !important; border:1px solid var(--lg-rule) !important;border-radius:6px !important; box-shadow:var(--lg-shadow) !important; } .dropdown-link{color:var(--lg-inksoft) !important;} .dropdown-link:hover{background:rgba(19,17,12,.05) !important;color:var(--lg-em) !important;} .dropdown-label{color:var(--lg-gold) !important;font-family:'IBM Plex Mono',monospace !important;} /* ---- 5. BUTTONS ---- */ .btn-primary{ background:var(--lg-em) !important;color:#fff !important; border:1.5px solid var(--lg-em) !important;border-radius:4px !important; font-family:'Outfit',sans-serif !important;font-weight:700 !important; box-shadow:none !important; } .btn-primary:hover{background:var(--lg-ink) !important;border-color:var(--lg-ink) !important;color:#fff !important;transform:translateY(-2px);} .btn-secondary{ background:transparent !important;color:var(--lg-ink) !important; border:1.5px solid var(--lg-ink) !important;border-radius:4px !important; font-family:'Outfit',sans-serif !important;font-weight:700 !important; } .btn-secondary:hover{background:var(--lg-ink) !important;color:var(--lg-paper) !important;} /* ---- 6. CARDS / SECTIONS ---- */ .card{ background:var(--lg-paper2) !important; border:1.5px solid var(--lg-rule) !important;border-radius:6px !important; box-shadow:none !important; } .card::before{display:none !important;} .card:hover{ border-color:var(--lg-rule) !important;transform:translateY(-3px); box-shadow:var(--lg-shadow) !important; } .section-alt{background:var(--lg-paper2) !important;} .savings-badge{ background:rgba(14,107,74,.07) !important;color:var(--lg-em) !important; border:1px solid var(--lg-em) !important;font-family:'IBM Plex Mono',monospace !important; } .savings-badge::before{color:var(--lg-em);} /* stats */ .stat-number{font-family:'Fraunces',serif !important;color:var(--lg-em) !important;font-weight:900 !important;} .stat-label{color:var(--lg-muted) !important;font-family:'IBM Plex Mono',monospace !important;} /* vendor tags */ .vendor-tag{ background:var(--lg-paper2) !important;color:var(--lg-inksoft) !important; border:1px solid var(--lg-line) !important;border-radius:4px !important; font-family:'IBM Plex Mono',monospace !important; } .vendor-tag:hover{border-color:var(--lg-em) !important;color:var(--lg-em) !important;} /* details / FAQ accordion */ details{background:var(--lg-paper2) !important;border:1.5px solid var(--lg-line) !important;border-radius:6px !important;} details summary{color:var(--lg-ink) !important;font-family:'Fraunces',serif !important;} details summary:hover{background:rgba(19,17,12,.04) !important;} details[open] summary{background:rgba(14,107,74,.07) !important;} details summary::after,details[open] summary::after{color:var(--lg-em) !important;} details > div{color:var(--lg-inksoft) !important;} /* inline CTA / testimonial / process */ .cta-inline{background:var(--lg-paper2) !important;border:1.5px solid var(--lg-line) !important;border-left:3px solid var(--lg-em) !important;border-radius:6px !important;} .cta-inline h4{color:var(--lg-em) !important;} .testimonial{border-left:2px solid var(--lg-em) !important;} .testimonial blockquote{color:var(--lg-ink) !important;} .testimonial cite{color:var(--lg-muted) !important;} .process-step{border-bottom:1px solid var(--lg-line) !important;} .step-number{background:rgba(14,107,74,.10) !important;color:var(--lg-em) !important;} /* forms */ .form-input,.form-textarea,.form-select{ background:var(--lg-paper2) !important;color:var(--lg-ink) !important; border:1.5px solid var(--lg-line) !important;border-radius:4px !important; font-family:'Outfit',sans-serif !important; } .form-input:focus,.form-textarea:focus,.form-select:focus{ border-color:var(--lg-em) !important;box-shadow:0 0 0 3px rgba(14,107,74,.12) !important; } .form-label{color:var(--lg-ink) !important;} ::placeholder{color:var(--lg-muted) !important;opacity:1;} /* ---- 7. HERO (force light + serif, fix contrast) ---- */ .hero{background:var(--gradient-hero) !important;} .hero h1,.hero-content h1{color:var(--lg-ink) !important;} .hero p,.hero-sub,.hero-content p{color:var(--lg-inksoft) !important;} .hero .stat-number,.hero-stats .stat-number{color:var(--lg-em) !important;} /* ---- 8. FOOTER ---- */ .footer{background:var(--lg-paper2) !important;border-top:1.5px solid var(--lg-rule) !important;color:var(--lg-inksoft) !important;} .footer-guarantee,.footer-guarantee-inner{ background:var(--lg-paper) !important;border:1.5px solid var(--lg-rule) !important;border-radius:0 !important; } .footer-guarantee strong{color:var(--lg-ink) !important;font-family:'Fraunces',serif !important;} .footer-guarantee p{color:var(--lg-muted) !important;} .footer-heading{color:var(--lg-gold) !important;font-family:'IBM Plex Mono',monospace !important;} .footer-col a,.footer a{color:var(--lg-inksoft) !important;} .footer-col a:hover,.footer a:hover{color:var(--lg-em) !important;} .footer-desc,.footer-location,.footer-bottom,.footer-bottom p{color:var(--lg-muted) !important;} .footer-social a{color:var(--lg-inksoft) !important;} .footer-social a:hover{color:var(--lg-em) !important;} .footer-bottom{border-top:1px solid var(--lg-line) !important;} /* ---- 9. MISC dark-panel utilities seen across pages ---- */ [class*="dark"],.bg-dark{background:var(--lg-paper2) !important;} /* ---- 10. MOBILE NAV DRAWER (override hardcoded dark drawer) ---- Selectors are deliberately high-specificity (html .nav .nav-links …) so they win over the template's own !important mobile rules regardless of source order. ---- */ @media (max-width:768px){ html .nav .nav-links{ background:var(--lg-paper2) !important; border-left:1px solid var(--lg-em) !important; box-shadow:-12px 0 40px rgba(19,17,12,.25) !important; } html .nav .nav-links::before{background:var(--lg-paper2) !important;color:var(--lg-inksoft) !important;border-bottom:1px solid var(--lg-line) !important;} html .nav .nav-links .nav-link,html .nav .nav-links > a.nav-link{color:var(--lg-ink) !important;border-bottom-color:var(--lg-line) !important;background:transparent !important;} html .nav .nav-links .nav-link:hover,html .nav .nav-links > a.nav-link:hover{background:rgba(14,107,74,.07) !important;color:var(--lg-em) !important;} html .nav .nav-links .dropdown{background:var(--lg-paper) !important;border-top:1px solid var(--lg-line) !important;} html .nav .nav-links .dropdown-link{color:var(--lg-inksoft) !important;} html .nav .nav-links .dropdown-link:hover{color:var(--lg-em) !important;} html .nav .nav-links .dropdown-label{color:var(--lg-gold) !important;} html .nav .hamburger span{background:var(--lg-ink) !important;} }