/* ========================================================= green-accent.css — site-wide green accent + Geist font Mirrors the "Scalar" green treatment already on index.html so every other page matches. Link this LAST in . Deliberately restrained: only text/marks turn green, button fills stay ink (--gold-fill) so the UI never feels busy. ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;700&display=swap'); /* 1 — Subtle green accent (text / marks / rules only) */ :root{ --gold: rgb(11,93,59); --gold-2: rgb(7,68,43); --gold-deep: rgb(3,46,29); /* button + solid fills stay ink so the page reads clean */ } /* 2 — Consistent typography across every page (matches index) */ body{ font-family:'Geist','Inter','Helvetica Neue',Helvetica,Arial,sans-serif; } h1,h2,h3,h4, .section-headline,.page-headline,.hero-q-h1,.s-title,.pkg-name,.faq-q,.article-title{ font-family:'Geist','Plus Jakarta Sans','Helvetica Neue',Helvetica,Arial,sans-serif; } /* 3 — Soft green glow by the footer (echoes the index hero) */ footer{ position:relative; overflow:hidden; } footer::before{ content:''; position:absolute; left:50%; bottom:-45%; width:120%; height:160%; transform:translateX(-50%); z-index:0; pointer-events:none; filter:blur(26px); background: radial-gradient(44% 42% at 50% 100%, rgba(11,93,59,.28), transparent 62%), radial-gradient(30% 34% at 22% 92%, rgba(31,180,120,.14), transparent 60%); animation:footGlow 16s ease-in-out infinite alternate; } footer .footer-top, footer .footer-bottom, footer .footer-brand, footer .footer-links{ position:relative; z-index:1; } @keyframes footGlow{ 0%{ transform:translateX(-53%) scale(1); } 100%{ transform:translateX(-47%) scale(1.12); } } @media (prefers-reduced-motion:reduce){ footer::before{ animation:none; } } /* 4 — Touch targets on phones. Footer link columns render ~21px tall, well under the 44px minimum, which makes them easy to mis-tap. Applied only at touch widths so the desktop footer is visually unchanged. Pages that also load shared.css get the same values there; the rules agree, so load order does not matter. */ @media (max-width:900px){ footer .footer-col{ gap:2px; } footer .footer-col a{ font-size:14px; min-height:44px; display:flex; align-items:center; } footer .footer-legal, footer .footer-legal-links{ gap:8px; flex-wrap:wrap; } footer .footer-legal a, footer .footer-legal-links a{ font-size:13px; min-height:44px; display:inline-flex; align-items:center; padding:0 8px; } /* blog + landing footers are a single inline sentence of links, so grow the hit area with padding rather than forcing them to block-level 44px rows */ footer > p a{ display:inline-block; padding:11px 2px; } } /* ══════════════════════════════════════════════════════════════════════════ 5 — Deep glass, applied site-wide. The nav is the reference: a LOW white fill with a DEEP blur and a bright inset rim. Two rules learned the hard way: 1. Only elements that ALREADY had a surface get a fill. A previous pass forced a background onto `.section-label` (a bare text span) and onto shared.css's `.btn-ghost` (an underlined text link, not a button), which painted milky boxes behind plain text. 2. Border-only chips get blur and a rim but NO fill, so they work on dark bands as well as light ones. A light fill over a dark gradient reads as washed-out plastic, not glass. ══════════════════════════════════════════════════════════════════════════ */ :root{ --glass-blur:24px; /* was 14px — the nav runs 26px */ --glass-sat:150%; --glass-rim: inset 0 1px 0 rgba(255,255,255,.62), inset 0 0 0 1px rgba(17,17,22,.07); --glass-lift: 0 1px 2px rgba(17,17,22,.04), 0 10px 28px rgba(17,17,22,.09); --glass-pill-bg:rgba(255,255,255,.55); } /* ── Card surfaces: keep their fill, take the nav's depth ─────────────── */ .card,.form-card,.form-section,.blog-card,.sys-card,.faq-item,.stat-box, .step-item,.ind-card,.pcard,.guarantee,.cal-embed-box,.svcb,.svc-card, .ladder-card,.vs-free,.founding-banner,.pricing-note,.wk-strip, .testi-card,.about-card,.sys-item,.sb-card,.price-card,.pkg-card{ -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)); } /* ── A. Chips that ALREADY carried an opaque fill → swap it for glass ──── */ .a-eyebrow,.hero-tag,.mini-btn,.trust-item,.trust .who span,.wk-go{ background:var(--glass-pill-bg)!important; border-color:transparent!important; -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)); box-shadow:var(--glass-rim),var(--glass-lift); } /* ── B. Border-only pills → blur behind, keep the outline, NO fill ─────── */ .method-loop .ml-note,.cert-chip,.s-tag,.pkg-chip,.wchips span{ -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)); } /* ── C. Light chips sitting on dark bands → dark glass, never a light wash */ .dark-card .a-eyebrow,.dark-card .s-tag,.dark-card .pkg-chip, .onsite-hero .hero-tag,header.hero .hero-tag,.hero--quiet .hero-tag{ background:rgba(255,255,255,.10)!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.26), inset 0 0 0 1px rgba(255,255,255,.14), 0 10px 30px rgba(0,0,0,.22)!important; } /* Phones: deep blur is the expensive part of a scroll, so ease it off. */ @media (max-width:860px){ :root{ --glass-blur:16px; } } /* No backdrop-filter support: fall back to a solid-enough fill. */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .a-eyebrow,.hero-tag,.mini-btn,.trust-item,.wk-go{ background:rgba(255,255,255,.92)!important; } } /* ── Final CTA band: the primary button must not be white on white ─────── The band used to be dark (#0C0A08) and the button was #fff to sit on it. A later pass turned the band light but the button kept its white fill, so the main call to action on the homepage and the pricing page was white on white — visible only by its shadow. Solid ink, like every other primary CTA on the site. */ body .section.cta .btn-primary{background:var(--ink)!important;color:#fff!important} body .section.cta .btn-primary:hover{background:#2A2724!important;color:#fff!important}