/* ========================================================================== JJolly's — Design System Direction: photo-first editorial. The store photography carries the page; chrome gets out of its way. Full-bleed images, sharp corners, hairline rules, no cards and no shadows. Mobile-first: base styles target 360px; media queries scale UP. ========================================================================== */ /* ---------- Fonts ---------- One typeface does the whole site (Archivo, 400–800). Fredoka is kept for exactly one thing: the logo wordmark. A single grotesk across huge display sizes and small body copy is what gives this an editorial voice rather than a friendly-app one. */ @font-face{font-family:'Archivo';src:url('../fonts/archivo-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap;font-style:normal} @font-face{font-family:'Archivo';src:url('../fonts/archivo-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap;font-style:normal} @font-face{font-family:'Archivo';src:url('../fonts/archivo-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap;font-style:normal} @font-face{font-family:'Archivo';src:url('../fonts/archivo-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap;font-style:normal} @font-face{font-family:'Archivo';src:url('../fonts/archivo-latin-800-normal.woff2') format('woff2');font-weight:800;font-display:swap;font-style:normal} @font-face{font-family:'Fredoka';src:url('../fonts/fredoka-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap;font-style:normal} /* ---------- Tokens ---------- */ :root{ /* warm paper neutrals — the photos are cool-lit, so the page runs warm */ --paper:#F6F3ED; --paper-2:#EAE5DB; --white:#fff; --ink:#14140F; --ink-2:#33322B; --muted:#6C685E; --muted-2:#948F84; --rule:rgba(20,20,15,.16); --rule-2:rgba(20,20,15,.09); --rule-light:rgba(255,255,255,.28); /* brand — used as accent, never as wallpaper */ --red:#EC2019; --red-700:#B3140C; --orange:#FF9D18; --amber:#FFC629; --green:#12915A; --font-display:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --font-body:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --font-brand:'Fredoka','Trebuchet MS',system-ui,sans-serif; /* sharp. the only curves on the page are in the photographs. */ --r-sm:0; --r-md:0; --r-lg:0; --r-xl:0; --r-2xl:0; --r-pill:0; --shadow-sm:none; --shadow-md:none; --shadow-lg:none; --shadow-red:none; --shadow-amber:none; --wrap:1240px; --wrap-narrow:760px; --gut:1.25rem; --nav-h:58px; --bar-h:0px; --ease:cubic-bezier(.22,.61,.36,1); } /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box} *{margin:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 8px)} body{ font-family:var(--font-body); font-size:17px;line-height:1.55;color:var(--ink-2); background:var(--paper); -webkit-font-smoothing:antialiased; /* `clip`, never `hidden`. overflow-x:hidden makes its own scroll container, and iOS Safari only collapses its bottom toolbar when the document itself is the thing scrolling — `hidden` pins the bar open for the whole page. `clip` contains overflow without creating a scroller. */ overflow-x:clip; } img,video{display:block;max-width:100%;height:auto} svg{display:block;flex:none;width:1.15em;height:1.15em} a{color:inherit;text-decoration:none} button,input,textarea,select{font:inherit;color:inherit} ul,ol{list-style:none;padding:0} :focus-visible{outline:2px solid var(--red);outline-offset:3px} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important} } /* ========================================================================== Typography — big, tight, editorial ========================================================================== */ h1,h2,h3,h4,.display{ font-family:var(--font-display);font-weight:800;color:var(--ink); line-height:.98;letter-spacing:-.035em;text-wrap:balance; } /* min is deliberately low: at 320px a 2.9rem minimum pushes "Cheaper gas." past the gutter, and body{overflow-x:clip} would silently crop it */ h1{font-size:clamp(2.3rem,11.5vw,6.2rem);letter-spacing:-.045em} h2{font-size:clamp(2.1rem,7.5vw,4rem);letter-spacing:-.04em} h3{font-size:clamp(1.25rem,4vw,1.7rem);letter-spacing:-.03em;line-height:1.08} h4{font-size:1.02rem;letter-spacing:-.02em;line-height:1.2} .h1-sm{font-size:clamp(2.1rem,7.5vw,4rem);line-height:.98;letter-spacing:-.04em} p{text-wrap:pretty} .lede{font-size:clamp(1.05rem,3vw,1.3rem);line-height:1.5;color:var(--muted);max-width:46ch} /* editorial kicker — no decorative bar, just tracked-out small caps */ .eyebrow{ display:block;font-family:var(--font-body);font-weight:600;font-size:.68rem; letter-spacing:.24em;text-transform:uppercase;color:var(--muted); margin-bottom:1rem; } .eyebrow::before{content:none} .eyebrow--plain::before{content:none} .eyebrow--light{color:rgba(255,255,255,.72)} .hl{color:var(--red)} .hl-amber{color:var(--amber)} .tight{max-width:58ch} .center{text-align:center} .nowrap{white-space:nowrap} .num{font-family:var(--font-display);font-weight:800;letter-spacing:-.05em;line-height:.82;font-variant-numeric:tabular-nums} /* ========================================================================== Layout ========================================================================== */ /* calc + max-width rather than min() — a parenthesised `var() * 2` inside min() fails to parse, which silently drops the width and lets every section run off the edge of the screen. */ .wrap{width:calc(100% - var(--gut) * 2);max-width:var(--wrap);margin-inline:auto} .wrap-narrow{width:calc(100% - var(--gut) * 2);max-width:var(--wrap-narrow);margin-inline:auto} section{position:relative} .sec{padding:clamp(3.5rem,11vw,8rem) 0} .sec-sm{padding:clamp(2.5rem,7vw,4.5rem) 0} /* phones get a tighter rhythm — desktop's airiness reads as dead space when the column is only ~360px wide and you're thumbing past it */ @media (max-width:759px){ .sec{padding:2.75rem 0} .sec-sm{padding:2rem 0} .head{margin-bottom:1.75rem} } .sec-cream{background:var(--paper-2)} .sec-ink{background:var(--ink);color:rgba(255,255,255,.72)} .sec-ink h2,.sec-ink h3,.sec-ink h4{color:#fff} .sec-ink .lede{color:rgba(255,255,255,.6)} .sec-ink .eyebrow{color:rgba(255,255,255,.5)} /* No width cap on .head itself — `ch` here resolves against the *body* font size, which throttles a 4rem heading to ~200px and shreds its line breaks. The cap belongs on the heading, in its own em, so it scales with the type. */ .head{margin-bottom:clamp(2rem,5vw,3.5rem)} .head h2,.head h1{max-width:13em} .head .lede{margin-top:1.1rem;max-width:44ch} .head.center{margin-inline:auto;text-align:center} .head.center h2,.head.center h1{margin-inline:auto} .head.center .lede{margin-inline:auto} .grid{display:grid;gap:clamp(1rem,2.5vw,2rem)} .g-2,.g-3,.g-4{grid-template-columns:1fr} .split{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center} /* full-bleed escape hatch — the core device of this design */ .bleed{width:100vw;margin-left:calc(50% - 50vw)} /* ========================================================================== Buttons — one solid rectangle, one quiet text link. No pills, no shadows. ========================================================================== */ .btn{ --btn-bg:var(--ink);--btn-fg:#fff; display:inline-flex;align-items:center;justify-content:center;gap:.6rem; font-family:var(--font-body);font-weight:700;font-size:1rem;letter-spacing:-.005em; padding:1.05rem 1.9rem;border:1px solid transparent;border-radius:0; background:var(--btn-bg);color:var(--btn-fg);cursor:pointer;line-height:1.2; transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease); text-align:center; } .btn:hover{background:var(--red);border-color:var(--red);color:#fff} .btn svg{flex:none;width:18px;height:18px} .btn--lg{padding:1.2rem 2.2rem;font-size:1.05rem} .btn--sm{padding:.7rem 1.2rem;font-size:.88rem} .btn--sm svg{width:15px;height:15px} .btn--amber{--btn-bg:var(--red);--btn-fg:#fff} .btn--amber:hover{background:var(--ink);border-color:var(--ink)} .btn--ink{--btn-bg:var(--ink);--btn-fg:#fff} .btn--white{--btn-bg:#fff;--btn-fg:var(--ink)} .btn--white:hover{background:var(--red);color:#fff} .btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);border-color:var(--rule)} .btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:#fff} .btn--ghost-light{--btn-bg:transparent;--btn-fg:#fff;border-color:var(--rule-light)} .btn--ghost-light:hover{background:#fff;color:var(--ink);border-color:#fff} .btn--block{width:100%} .btns{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center} .btns.center{justify-content:center} .btns .btn{flex:1 1 auto} @media (min-width:560px){.btns .btn{flex:0 0 auto}} /* quiet secondary: underlined text with a rule that grows on hover */ .tlink{ display:inline-flex;align-items:center;gap:.5rem; font-weight:600;font-size:1rem;color:var(--ink); padding-bottom:.3rem;border-bottom:1px solid var(--ink); transition:color .2s,border-color .2s,gap .2s; } .tlink:hover{color:var(--red);border-color:var(--red);gap:.75rem} .tlink svg{width:15px;height:15px} .tlink--light{color:#fff;border-color:rgba(255,255,255,.5)} .tlink--light:hover{color:#fff;border-color:#fff} /* ========================================================================== Chips — reduced to plain tracked text, no capsules ========================================================================== */ .chip{ display:inline-flex;align-items:center;gap:.45rem; font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase; color:var(--muted);white-space:nowrap; } .chip--glass{color:rgba(255,255,255,.82)} .chip--live{color:var(--green)} .dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex:none} /* ========================================================================== Header — thin, quiet, gets out of the photograph's way ========================================================================== */ .topbar{display:none} .nav{ position:sticky;top:0;z-index:90; background:rgba(246,243,237,.92);backdrop-filter:blur(12px); border-bottom:1px solid var(--rule-2); transition:background .25s,border-color .25s; } .nav.is-stuck{border-bottom-color:var(--rule)} .nav__inner{display:flex;align-items:center;gap:1rem;height:var(--nav-h)} .nav__links,.nav__cta,.nav__phone{display:none} /* --- logo: vector badge + Fredoka wordmark (the one place Fredoka lives) --- */ .logo{display:inline-flex;align-items:center;gap:.5rem;flex:none} .logo__badge{width:32px;height:32px;flex:none;border-radius:8px} .logo__word{ font-family:var(--font-brand);font-weight:700;font-size:1.4rem; letter-spacing:-.025em;line-height:1;color:var(--red);padding-bottom:.06em; } .logo--light .logo__word{color:#fff} .logo--lg .logo__badge{width:42px;height:42px;border-radius:10px} .logo--lg .logo__word{font-size:1.85rem} /* Phone-only quick actions in the sticky nav — call and directions, one tap, without a bar parked over the content. The wrapper carries margin-left:auto so the whole set pins to the right edge. */ .nav__actions{display:flex;align-items:center;gap:.5rem;margin-left:auto;flex:none} .nav__act{ display:grid;place-items:center;width:44px;height:44px;flex:none; border:1px solid var(--rule);color:var(--ink);transition:background .18s,color .18s,border-color .18s; } .nav__act svg{width:18px;height:18px} .nav__act:hover,.nav__act:active{background:var(--ink);border-color:var(--ink);color:#fff} .nav__inner{gap:.5rem} .burger{ display:grid;width:44px;height:44px;border:1px solid var(--rule);background:transparent; border-radius:0;cursor:pointer;place-items:center; } .burger span{display:block;width:17px;height:1.5px;background:var(--ink);position:relative;transition:.2s} .burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:1.5px;background:var(--ink);transition:.24s} .burger span::before{top:-5px}.burger span::after{top:5px} .burger[aria-expanded="true"] span{background:transparent} .burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)} .burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)} .mobile{ display:none;position:fixed;inset:var(--nav-h) 0 0;z-index:89; background:var(--paper);padding:1.5rem 0 3rem;overflow-y:auto; } .mobile.is-open{display:block} .mobile a.m-link{ display:flex;align-items:baseline;justify-content:space-between;gap:1rem; padding:1.1rem 0;border-bottom:1px solid var(--rule-2); font-family:var(--font-display);font-weight:800;font-size:1.9rem; letter-spacing:-.035em;color:var(--ink); } .mobile a.m-link small{ font-family:var(--font-body);font-size:.72rem;font-weight:600;color:var(--muted); letter-spacing:.12em;text-transform:uppercase;text-align:right; } .mobile .btns{margin-top:2rem;flex-direction:column;align-items:stretch} .mobile .btns .btn{width:100%} .dd{display:none} @media (min-width:961px){ :root{--nav-h:76px} .burger,.nav__act,.nav__actions{display:none} .nav__inner{gap:1rem} .nav__links{display:flex;align-items:center;gap:2rem;margin-left:auto} .nav__link{ display:flex;align-items:center;gap:.35rem; font-weight:600;font-size:.82rem;letter-spacing:.13em;text-transform:uppercase; color:var(--ink-2);padding:.4rem 0;border-bottom:1px solid transparent;transition:.18s; } .nav__link:hover{color:var(--red);border-bottom-color:var(--red)} .nav__link[aria-current="page"]{border-bottom-color:var(--ink)} .nav__link .caret{width:10px;transition:transform .2s} .nav__item{position:relative} .nav__item:hover .caret,.nav__item:focus-within .caret{transform:rotate(180deg)} .nav__cta{display:inline-flex;margin-left:.5rem;flex:none} /* the top bar is gone so the hero photo runs to the very top — the phone number moves into the nav rather than disappearing */ .nav__phone{ display:inline-flex;font-weight:700;font-size:.82rem;letter-spacing:.06em; color:var(--ink);border-bottom:1px solid transparent;padding:.4rem 0;transition:.18s; } .nav__phone:hover{color:var(--red);border-bottom-color:var(--red)} .logo__badge{width:38px;height:38px;border-radius:9px} .logo__word{font-size:1.65rem} .dd{ display:block;position:absolute;top:calc(100% + 14px);left:50%;translate:-50% 0;width:320px; background:var(--paper);border:1px solid var(--rule);padding:.4rem; opacity:0;visibility:hidden;transform:translateY(6px); transition:opacity .2s,transform .2s,visibility .2s; } .nav__item:hover .dd,.nav__item:focus-within .dd{opacity:1;visibility:visible;transform:translateY(0)} .dd::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px} .dd a{display:flex;gap:.85rem;padding:.85rem;transition:background .16s} .dd a:hover{background:var(--paper-2)} .dd__ico{flex:none;width:34px;height:34px;display:grid;place-items:center;background:var(--ink);color:#fff} .dd__ico svg{width:17px;height:17px} .dd b{display:block;font-family:var(--font-display);font-weight:700;font-size:.98rem;letter-spacing:-.02em;color:var(--ink);line-height:1.2} .dd span{font-size:.82rem;color:var(--muted);line-height:1.4;display:block;text-transform:none;letter-spacing:0} } /* ========================================================================== HERO — the photograph is the page. Type sits on it, nothing boxes it in. ========================================================================== */ .hero{ position:relative;isolation:isolate;background:var(--ink); /* Fill the screen under the sticky nav, on any size of phone. A fixed px cap (the old clamp topped out at 760px) leaves a strip of the next section showing on a big handset; `svh` is the viewport with Safari's toolbars still expanded, so this fits the first paint exactly and doesn't reflow when the toolbar collapses the way `vh`/`dvh` would. */ min-height:max(560px,calc(100svh - var(--nav-h))); display:flex;align-items:flex-end; } .hero__bg{position:absolute;inset:0;z-index:-2} .hero__bg img{width:100%;height:100%;object-fit:cover;object-position:58% 42%} /* Only enough scrim to hold type — the photo still reads as a photo. */ /* Scrim stays off the sky and canopy up top, then ramps hard from mid-height down so every line of type sits on a dark base. */ /* Decisive, not muddy: the top third stays a clean photograph — sky, canopy, the storefront sign — then the scrim ramps hard so every line of type below sits on a near-solid base. A gradient hovering around 45% under the text is what reads as "weird": neither a real photo nor a real read. */ .hero::after{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg, rgba(10,10,8,.24) 0%, rgba(10,10,8,.04) 14%, rgba(10,10,8,.52) 27%, rgba(12,12,10,.88) 40%, rgba(12,12,10,.96) 62%, rgba(12,12,10,.98) 100%); } /* Belt and braces: pages carry different amounts of hero copy, so a line can still land on a bright patch. */ .hero h1{text-shadow:0 2px 20px rgba(0,0,0,.5)} .hero__chips .chip{text-shadow:0 1px 8px rgba(0,0,0,.85)} .hero__sub,.hero__meta{text-shadow:0 1px 12px rgba(0,0,0,.7)} .hero .offer__n,.hero .offer__t,.hero .offer__d{text-shadow:0 1px 10px rgba(0,0,0,.6)} /* no width here — `.wrap` owns it, and a later width:100% would silently beat it on specificity and send every line off the edge of the screen */ .hero__inner{padding:2.5rem 0 2.25rem;position:relative} .hero__content,.hero__lead{color:#fff} .hero h1{color:#fff} .hero h1 .smile{ display:inline-block;width:.62em;height:.62em;vertical-align:.02em;margin-left:.1em; background:url('../img/logo-smile.svg') center/contain no-repeat; } .hero__sub{ font-size:1.05rem;line-height:1.5;color:rgba(255,255,255,.82); margin-top:1rem;max-width:38ch; } .hero__chips{display:flex;flex-wrap:wrap;gap:1.25rem;margin-bottom:1.25rem} .hero .btns{margin-top:1.5rem} .hero__meta{ display:block;margin-top:1.25rem;font-size:.72rem;font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7); } /* inline, not a flex item — as a flex child the dot wraps onto its own line */ .hero__meta .dot{display:inline-block;vertical-align:middle;margin-right:.45rem} /* --- the two offers, as type on the photo. No cards. --- */ .offers{ display:grid;grid-template-columns:1fr 1fr; margin-top:1.75rem;border-top:1px solid var(--rule-light); } .offer{ position:relative;display:block;color:#fff;padding:1.1rem 1rem 0 0; transition:opacity .2s; } .offer + .offer{padding-left:1rem;border-left:1px solid var(--rule-light)} .offer:hover{opacity:.72} .offer__n{ font-family:var(--font-display);font-weight:800;line-height:.82; letter-spacing:-.06em;font-size:3.1rem;color:#fff; display:flex;align-items:baseline;gap:.03em; } .offer__u{font-size:.34em;font-weight:700;letter-spacing:-.02em;color:var(--amber)} .offer__body{display:block} .offer__t{ display:block;margin-top:.5rem;font-size:.68rem;font-weight:700; letter-spacing:.2em;text-transform:uppercase;color:var(--amber); } .offer__d{display:block;font-size:.86rem;line-height:1.35;color:rgba(255,255,255,.76);margin-top:.3rem} .offer__go{display:none} .trust{ display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin-top:1.4rem; font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase; color:rgba(255,255,255,.66); } .trust li{display:flex;align-items:center;gap:.4rem} .trust svg{width:13px;height:13px;color:var(--amber)} /* ---- Phones: type over the photograph, same as desktop ---- The hero is one image again rather than a picture sitting above a separate black block. The trade this forces, for whoever touches it next: a full-height portrait `cover` crop reveals only ~37% of this frame's width, and the pump and the J roundel on the wall are ~70% apart. One overlay hero can hold one or the other, never both. Framed on the pump — it's what "cheaper gas" is about, and the JJolly's name still reads twice, on the pump canopy and on the storefront behind it. */ @media (max-width:759px){ .hero__bg img{object-position:34% 44%} .hero__inner{padding:1.5rem 0 2rem} /* Top third stays a clean photograph, then a hard ramp so every line below sits on a near-solid base. Steeper than the desktop curve because the phone's copy block starts higher up the frame. */ .hero::after{ background:linear-gradient(180deg, rgba(10,10,8,.22) 0%, rgba(10,10,8,.03) 16%, rgba(10,10,8,.22) 34%, rgba(12,12,10,.78) 48%, rgba(12,12,10,.94) 62%, rgba(12,12,10,.99) 100%); } /* Copy stays stripped back to the message, the two numbers and the button — the intro line and programme names only restate the headline and numerals. */ .hero__sub{display:none} .hero .offer__d{display:none} /* The display settings are tuned for a 6rem desktop headline: .98 line-height and -.045em tracking. At phone size the same values read as cramped — the lines nearly touch and the letters run together. Both open up here. */ .hero h1{ font-size:12.5vw; line-height:1.12; letter-spacing:-.012em; } .offers{margin-top:1.6rem} .offer{padding-top:1.05rem;padding-right:1.25rem} .offer + .offer{padding-left:1.25rem} /* same story on the numerals: -.06em is a desktop setting */ .offer__n{font-size:3.2rem;letter-spacing:-.015em;gap:.1em} .offer__t{margin-top:.6rem;font-size:.66rem;letter-spacing:.16em} .hero .btns{margin-top:1.5rem} .hero__meta{margin-top:1.1rem} } /* Short phones. The full-height photo plus full copy pushes "Join free" below the fold on anything under ~820px tall, so the hero gives ground in order of least value: photo height first, then type size, then the intro line. Tall handsets never hit these and keep the uncropped frame. */ @media (max-width:759px) and (max-height:820px){ .hero h1{font-size:2.3rem} .hero__sub{font-size:.95rem;margin-top:.55rem} .offers{margin-top:.9rem} .offer__n{font-size:2.5rem} .hero .btns{margin-top:.9rem} .hero__meta{margin-top:.7rem} } @media (max-width:759px) and (max-height:700px){ .hero__sub{display:none} } @media (min-width:760px){ .hero{min-height:max(640px,calc(100svh - var(--nav-h)))} .hero__inner{padding:4rem 0 3.25rem} .hero__sub{font-size:1.2rem;max-width:42ch} .offers{max-width:620px;margin-top:2.25rem} .offer{padding-top:1.4rem} .offer__n{font-size:4.2rem} .offer__d{font-size:.95rem} } /* Scoped to the home hero: other pages keep a plain single-column hero. */ @media (min-width:1080px){ .hero--split .hero__inner{ display:grid;grid-template-columns:1.15fr .85fr; column-gap:clamp(2.5rem,5vw,4.5rem);row-gap:1.5rem;align-items:end; } .hero--split .hero__lead{grid-column:1;grid-row:1} .hero--split .hero__actions{grid-column:1;grid-row:2} .hero--split .offers{grid-column:2;grid-row:1 / span 2;align-self:end;margin-top:0;max-width:none;margin-bottom:.35rem} } /* ========================================================================== Full-bleed feature panels — the rewards, told with photographs ========================================================================== */ .panels{display:grid;grid-template-columns:1fr} .panel{ position:relative;isolation:isolate;min-height:clamp(420px,62svh,560px); display:flex;align-items:flex-end;color:#fff;overflow:hidden; padding:var(--gut); } .panel img.bgimg{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2; transition:transform .9s var(--ease); } .panel:hover img.bgimg{transform:scale(1.04)} .panel::after{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(10,10,8,.28) 0%,rgba(10,10,8,.12) 38%,rgba(10,10,8,.74) 78%,rgba(10,10,8,.92) 100%); } .panel__in{width:100%;max-width:34ch} .panel__n{ font-family:var(--font-display);font-weight:800;line-height:.8;letter-spacing:-.06em; font-size:clamp(4.2rem,17vw,7rem);color:#fff;display:flex;align-items:baseline;gap:.03em; } .panel__n small{font-size:.24em;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-left:.35em} .panel h3{color:#fff;font-size:clamp(1.5rem,5vw,2.1rem);margin-top:.6rem} .panel p{color:rgba(255,255,255,.8);font-size:.98rem;line-height:1.45;margin-top:.6rem} .panel .tlink{margin-top:1.25rem} .panel__tag{ position:absolute;top:var(--gut);left:var(--gut);z-index:1; font-size:.66rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase; color:rgba(255,255,255,.8); } /* ---- Phones: same treatment as the hero ---- These sat on a frosted blurred slab. It read cleanly, but a 58% fill plus a 16px blur hid most of the photograph behind it. Matching the hero instead — type straight on the image with a gradient doing the legibility work — so the picture stays a picture all the way down. */ @media (max-width:759px){ .panel{min-height:clamp(480px,68svh,600px);padding:0;align-items:flex-end} /* the heading right below already says "Fuel Rewards" / "Store Rewards" */ .panel__tag{display:none} .panel__in{ width:100%;max-width:none; padding:0 var(--gut) 1.5rem; background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-top:0; } /* stacked, not inline: at this size the unit label runs into the numeral */ .panel__n{display:block;font-size:3.5rem;line-height:.92;letter-spacing:-.02em} .panel__n small{display:block;margin-left:0;margin-top:.5rem;font-size:.7rem} .panel h3{margin-top:.45rem;font-size:1.4rem} .panel p{font-size:.93rem;margin-top:.45rem} .panel .tlink{margin-top:.95rem;font-size:.92rem} /* the hero's curve: clean photograph up top, hard ramp under the type */ .panel::after{ background:linear-gradient(180deg, rgba(10,10,8,.2) 0%, rgba(10,10,8,.03) 18%, rgba(10,10,8,.24) 38%, rgba(12,12,10,.78) 54%, rgba(12,12,10,.94) 70%, rgba(12,12,10,.99) 100%); } .panel__n,.panel h3{text-shadow:0 2px 18px rgba(0,0,0,.5)} .panel p,.panel .tlink{text-shadow:0 1px 12px rgba(0,0,0,.65)} /* the interior shot's subject sits low in the frame — a centred crop on a tall panel shows mostly ceiling ductwork */ .panels .panel:nth-child(2) img.bgimg{object-position:center 72%} } @media (min-width:900px){ .panels{grid-template-columns:1fr 1fr} .panel{min-height:clamp(560px,72svh,720px);padding:clamp(1.75rem,3vw,2.75rem)} } /* ========================================================================== Editorial numbered list — replaces the old three-card "how it works" ========================================================================== */ .how{display:grid;gap:0;border-top:1px solid var(--rule);counter-reset:s} /* Three children (number / title / body) in a two-column grid, so each is placed explicitly — left to auto-flow, the body drops into the narrow number column and sets one word per line. */ .how__step{ display:grid;grid-template-columns:2.5rem 1fr;gap:.4rem 1.25rem;align-items:start; padding:1.6rem 0;border-bottom:1px solid var(--rule);counter-increment:s; } .how__step b{ grid-column:1;grid-row:1; font-family:var(--font-display);font-weight:800;font-size:1.05rem; letter-spacing:.02em;color:var(--red);line-height:1.3; } .how__step b::before{content:counter(s,decimal-leading-zero)} .how__step h3{grid-column:2;grid-row:1} .how__step p{grid-column:2;grid-row:2;font-size:.98rem;color:var(--muted);line-height:1.5;max-width:52ch} .how--light{border-top-color:var(--rule-light)} .how--light .how__step{border-bottom-color:var(--rule-light)} .how--light .how__step b{color:var(--amber)} .how--light .how__step p{color:rgba(255,255,255,.62)} @media (min-width:900px){ .how__step{grid-template-columns:4rem 15rem 1fr;gap:2rem;align-items:baseline;padding:2rem 0} .how__step b{font-size:1.15rem} .how__step p{grid-column:3;grid-row:1} } /* ========================================================================== Reward ladder — a price list, set as one ========================================================================== */ .ladder{display:grid;gap:0;border-top:1px solid var(--rule)} .ladder__row{ display:grid;grid-template-columns:4.5rem 1fr;gap:1.25rem;align-items:baseline; padding:1.1rem 0;border-bottom:1px solid var(--rule);transition:color .18s; } .ladder__row:hover{color:var(--red)} .ladder__pts{ font-family:var(--font-display);font-weight:800;font-size:1.5rem; letter-spacing:-.04em;color:var(--red);line-height:1; } .ladder__pts strong{display:block} .ladder__pts small{display:block;font-size:.55rem;font-weight:600;letter-spacing:.18em;color:var(--muted);margin-top:.25rem} .ladder__item{display:block;font-family:var(--font-display);font-weight:700;font-size:1.08rem;letter-spacing:-.02em;color:inherit;line-height:1.25} .sec-ink .ladder{border-top-color:var(--rule-light)} .sec-ink .ladder__row{border-bottom-color:var(--rule-light);color:#fff} .sec-ink .ladder__row:hover{color:var(--amber)} .sec-ink .ladder__pts{color:var(--amber)} .sec-ink .ladder__pts small{color:rgba(255,255,255,.55)} /* ========================================================================== Photo mosaic — gapless, edge to edge ========================================================================== */ .tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:0} .tile{ position:relative;isolation:isolate;overflow:hidden; aspect-ratio:1/1.15;display:flex;flex-direction:column;justify-content:flex-end; padding:1rem .9rem;color:#fff; } .tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s var(--ease)} .tile:hover img{transform:scale(1.06)} .tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(12,12,9,0) 40%,rgba(12,12,9,.72) 82%,rgba(12,12,9,.92) 100%)} .tile b{font-family:var(--font-display);font-weight:800;font-size:1.02rem;letter-spacing:-.03em;line-height:1.1;display:block} .tile span{font-size:.74rem;color:rgba(255,255,255,.7);margin-top:.25rem;display:block;line-height:1.3} @media (min-width:760px){ .tiles{grid-template-columns:repeat(4,1fr)} .tile{aspect-ratio:1/1.25;padding:1.4rem 1.25rem} .tile b{font-size:1.15rem} .tile span{font-size:.8rem} } /* ========================================================================== Steps / perks — flattened to rules, no boxes ========================================================================== */ .steps{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--rule);counter-reset:s} .step{ position:relative;padding:1.75rem 0;border-bottom:1px solid var(--rule);counter-increment:s; } .step__n{ font-family:var(--font-display);font-weight:800;font-size:.95rem;letter-spacing:.02em; color:var(--red);margin-bottom:.65rem;display:block; } .step__n::before{content:counter(s,decimal-leading-zero)} .step h3{margin-bottom:.4rem} .step p{font-size:.98rem;color:var(--muted);max-width:52ch} .steps--ink{border-top-color:var(--rule-light)} .steps--ink .step{border-bottom-color:var(--rule-light)} .steps--ink .step__n{color:var(--amber)} .steps--ink .step p{color:rgba(255,255,255,.62)} .perks{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--rule)} .perk{padding:1.75rem 0;border-bottom:1px solid var(--rule)} .perk__ico{width:26px;height:26px;display:block;margin-bottom:.9rem;color:var(--red);background:none} .perk__ico svg{width:26px;height:26px} .perk h3{margin-bottom:.4rem} .perk p{font-size:.98rem;color:var(--muted);max-width:52ch} .perks--ink{border-top-color:var(--rule-light)} .perks--ink .perk{border-bottom-color:var(--rule-light)} .perks--ink .perk p{color:rgba(255,255,255,.62)} .perks--ink .perk__ico{color:var(--amber)} @media (min-width:760px){ .steps,.perks,.g-3{grid-template-columns:repeat(3,1fr);gap:0 clamp(1.5rem,3vw,3rem)} .g-2{grid-template-columns:repeat(2,1fr)} .g-4{grid-template-columns:repeat(2,1fr)} .split{grid-template-columns:1fr 1fr} } @media (min-width:1080px){.g-4{grid-template-columns:repeat(4,1fr)}} /* ---------- checklist ---------- */ .checks{border-top:1px solid var(--rule)} .checks li{display:flex;gap:.85rem;padding:.85rem 0;align-items:flex-start;font-size:1rem;border-bottom:1px solid var(--rule)} .checks svg{flex:none;width:17px;height:17px;color:var(--red);margin-top:.3rem} .checks--light{border-top-color:var(--rule-light)} .checks--light li{color:rgba(255,255,255,.86);border-bottom-color:var(--rule-light)} .checks--light svg{color:var(--amber)} /* ---------- stat band ---------- */ .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--rule);border-left:1px solid var(--rule)} .stat{padding:1.5rem 1.1rem;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)} .stat b{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(1.9rem,7vw,3rem);color:var(--ink);line-height:.9;letter-spacing:-.05em} .stat span{display:block;font-size:.68rem;color:var(--muted);margin-top:.6rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase} .sec-ink .stats{border-top-color:var(--rule-light);border-left-color:var(--rule-light)} .sec-ink .stat{border-right-color:var(--rule-light);border-bottom-color:var(--rule-light)} .sec-ink .stat b{color:#fff} .sec-ink .stat span{color:rgba(255,255,255,.55)} @media (min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}.stat{padding:2rem 1.5rem}} /* ========================================================================== Media ========================================================================== */ .frame{position:relative;overflow:hidden} /* biased low: in these interiors the subject — counters, coolers, shelves — sits in the lower two-thirds, and a centred crop fills up with ceiling */ .frame img{width:100%;height:100%;object-fit:cover;object-position:center 64%;aspect-ratio:4/5} .frame--tall img{aspect-ratio:3/4} .frame--wide img{aspect-ratio:16/10} .frame__tag{ position:absolute;left:0;bottom:0;background:var(--ink);color:#fff; padding:.6rem 1rem;font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase; display:flex;align-items:center;gap:.5rem; } .frame__tag svg{width:15px;height:15px;color:var(--amber);flex:none} .stack{display:grid;grid-template-columns:1fr 1fr;gap:0} .stack .frame:first-child{grid-column:span 2} .stack .frame img{aspect-ratio:1/1} .stack .frame:first-child img{aspect-ratio:16/10} .float-card{ display:flex;align-items:center;gap:.9rem;margin-top:1.25rem; padding-top:1.25rem;border-top:1px solid var(--rule); } .float-card__ico{width:26px;height:26px;display:grid;place-items:center;color:var(--red);flex:none} .float-card__ico svg{width:26px;height:26px} .float-card b{display:block;font-family:var(--font-display);font-weight:700;font-size:1rem;letter-spacing:-.02em;color:var(--ink);line-height:1.2} .float-card span{font-size:.85rem;color:var(--muted)} /* ========================================================================== Ink band (was the red band) — restrained, photo-adjacent ========================================================================== */ .band-red{background:var(--ink);color:rgba(255,255,255,.72);position:relative;overflow:hidden} .band-red::before{content:none} .band-red h2,.band-red h3{color:#fff} .band-red .lede{color:rgba(255,255,255,.6)} .band-red .eyebrow{color:rgba(255,255,255,.5)} .band-red .wrap{position:relative} .poster{display:block;width:100%} .mini-steps{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--rule-light)} .mini-step{ display:grid;grid-template-columns:2.25rem 1fr;gap:1rem;align-items:baseline; padding:1.1rem 0;border-bottom:1px solid var(--rule-light); } .mini-step b{ font-family:var(--font-display);font-weight:800;font-size:.95rem;color:var(--amber); background:none;width:auto;height:auto;display:block; } .mini-step span{font-size:.95rem;color:rgba(255,255,255,.78);line-height:1.4;display:block} @media (min-width:900px){.mini-steps{grid-template-columns:repeat(3,1fr);gap:0 2rem}} /* ========================================================================== Menu page ========================================================================== */ .menu-hero{position:relative;isolation:isolate;background:var(--ink);overflow:hidden} .menu-hero__bg{position:absolute;inset:0;z-index:-2} .menu-hero__bg img{width:100%;height:100%;object-fit:cover} .menu-hero::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(10,10,8,.62) 0%,rgba(10,10,8,.4) 45%,rgba(10,10,8,.9) 100%)} .menu-hero__inner{padding:clamp(3rem,9vw,6.5rem) 0 clamp(2.5rem,6vw,4.5rem);color:#fff;position:relative} .menu-hero h1{color:#fff} /* Wide phones have tablet-like CSS widths in landscape but only ~300px of usable height below the nav. Keep the primary action in the first view without changing portrait phones or full-size desktop layouts. */ @media (orientation:landscape) and (max-width:960px) and (max-height:500px){ .hero{min-height:calc(100svh - var(--nav-h))} .hero__inner{padding:.75rem 0} .hero__chips{gap:.75rem;margin-bottom:.5rem} .hero h1{font-size:clamp(2.25rem,6vw,3.1rem);line-height:1} .hero__sub{display:none} .offers{margin-top:.5rem} .offer{padding-top:.55rem} .offer__n{font-size:2.35rem} .hero .offer__d{display:none} .offer__t{margin-top:.3rem} .hero .btns{margin-top:.65rem} .hero__meta{display:none} .menu-hero__inner{padding:.75rem 0} .menu-hero .hero__sub{display:none} .menu-hero .btns{margin-top:.65rem!important} } .menu-nav{position:sticky;top:var(--nav-h);z-index:60;background:var(--paper);border-bottom:1px solid var(--rule)} .menu-nav ul{display:flex;gap:1.5rem;overflow-x:auto;padding:.9rem 0;scrollbar-width:none} .menu-nav ul::-webkit-scrollbar{display:none} .menu-nav a{ display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap; font-weight:600;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase; color:var(--muted);border:0;background:none;padding:.25rem 0; border-bottom:1px solid transparent;transition:.18s; } .menu-nav a i{font-style:normal;font-weight:700;color:var(--rule);background:none;width:auto;height:auto;display:inline} .menu-nav a:hover,.menu-nav a.is-active{background:none;color:var(--ink);border-bottom-color:var(--red)} .menu-nav a:hover i,.menu-nav a.is-active i{background:none;color:var(--red)} .mboard{margin-bottom:clamp(3rem,8vw,6rem);scroll-margin-top:calc(var(--nav-h) + 60px)} .mboard__head{ display:grid;grid-template-columns:1fr;gap:1.25rem;align-items:end; padding-bottom:1.25rem;margin-bottom:1.75rem;border-bottom:1px solid var(--ink); } .mboard__head h2{margin-top:.4rem} .mboard__head .lede{margin-top:.6rem;font-size:1rem} .mboard__kicker{ display:inline-flex;align-items:center;gap:.6rem;font-weight:600;font-size:.68rem; letter-spacing:.24em;text-transform:uppercase;color:var(--muted); } .mboard__kicker i{font-style:normal;font-weight:700;color:var(--red);background:none;width:auto;height:auto;display:inline} .mboard__thumb{position:relative;flex:none;width:100%;max-width:280px;overflow:hidden;transition:opacity .25s} .mboard__thumb:hover{opacity:.88} .mboard__thumb img{width:100%;display:block} .mboard__thumb span{ position:absolute;inset:auto 0 0 0;padding:1.4rem .8rem .55rem;text-align:center; background:linear-gradient(transparent,rgba(12,12,9,.85));color:#fff;font-size:.62rem;font-weight:700; letter-spacing:.18em;text-transform:uppercase; } @media (min-width:760px){.mboard__head{grid-template-columns:1fr auto;gap:2.5rem}.mboard__thumb{width:210px}} .mgroups{columns:1;column-gap:clamp(1.5rem,4vw,3.5rem)} @media (min-width:1080px){.mgroups{columns:2}} .mgroup{ break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 clamp(1.75rem,4vw,2.75rem); background:none;border:0;border-top:1px solid var(--ink);padding:1.1rem 0 0; } .mgroup:hover{transform:none} .mgroup__head{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;flex-wrap:wrap;margin-bottom:.85rem} .mgroup__head h3{font-size:1.15rem;text-transform:uppercase;letter-spacing:.02em;font-family:var(--font-display);font-weight:800;color:var(--ink)} .mgroup__cols{font-size:.64rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);line-height:1.4} .mgroup__note{font-size:.84rem;color:var(--muted);margin-top:.9rem;padding-top:.75rem;border-top:1px solid var(--rule-2)} .mitems{display:block} .mitem{display:flex;align-items:baseline;gap:.5rem;padding:.45rem 0} .mitem__body{flex:0 1 auto;min-width:0} .mitem__name{font-weight:600;font-size:1rem;color:var(--ink);line-height:1.3} .mitem__desc{display:block;font-size:.84rem;color:var(--muted);line-height:1.4;font-weight:400;margin-top:.05rem} .mitem__dots{flex:1 1 auto;border-bottom:1px dotted var(--rule);min-width:14px;transform:translateY(-4px)} .mitem__price{font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--ink);white-space:nowrap;letter-spacing:-.02em} .boards{display:grid;grid-template-columns:1fr;gap:0} @media (min-width:760px){.boards{grid-template-columns:repeat(3,1fr)}} .boardfig{position:relative;overflow:hidden;display:block;border:0} .boardfig img{width:100%;display:block;transition:transform .8s var(--ease)} .boardfig:hover img{transform:scale(1.04)} .boardfig:hover{transform:none} .boardfig__cap{ position:absolute;inset:auto 0 0 0;padding:2rem 1rem .85rem;color:#fff; font-weight:600;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase; background:linear-gradient(transparent,rgba(12,12,9,.88)); } /* ========================================================================== FAQ ========================================================================== */ .faq{border-top:1px solid var(--rule)} .faq details{border-bottom:1px solid var(--rule)} .faq summary{ display:flex;align-items:baseline;justify-content:space-between;gap:1.25rem; padding:1.4rem 0;cursor:pointer;list-style:none; font-family:var(--font-display);font-weight:700;letter-spacing:-.025em; font-size:clamp(1.05rem,3.4vw,1.3rem);color:var(--ink); } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"+";flex:none;font-family:var(--font-display);font-weight:700; font-size:1.3rem;line-height:1;color:var(--red);transition:transform .24s; width:auto;height:auto;background:none;border-radius:0; } .faq details[open] summary::after{transform:rotate(45deg)} .faq details > div{padding-bottom:1.4rem;color:var(--muted);max-width:70ch;font-size:.98rem} .faq--light{border-top-color:var(--rule-light)} .faq--light summary{color:#fff} .faq--light details{border-bottom-color:var(--rule-light)} .faq--light details > div{color:rgba(255,255,255,.62)} /* ========================================================================== Join instructions ========================================================================== */ .enrollment-anchor{scroll-margin-top:calc(var(--nav-h) + 12px)} .signup{background:var(--paper);border:1px solid var(--ink);padding:clamp(1.5rem,5vw,3rem)} .rewards-menu .ladder__row[data-reward-kind="club"]{background:var(--paper-2)} /* ========================================================================== Visit / map ========================================================================== */ .visit{display:grid;grid-template-columns:1fr;gap:2rem;align-items:stretch} @media (min-width:900px){.visit{grid-template-columns:1fr 1.2fr;gap:clamp(2.5rem,5vw,4.5rem)}} .map{position:relative;overflow:hidden;min-height:320px;background:var(--paper-2);border:1px solid var(--rule)} .map iframe{position:relative;z-index:1;width:100%;height:100%;min-height:320px;border:0;display:block} @media (min-width:900px){.map,.map iframe{min-height:460px}} .map__fallback{ position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:.75rem;text-align:center;padding:2rem;background:var(--paper-2); } .map__fallback svg{width:26px;height:26px;color:var(--red)} .map__fallback b{font-family:var(--font-display);font-weight:800;font-size:1.15rem;letter-spacing:-.03em;color:var(--ink)} .map__fallback span{color:var(--muted);font-size:.92rem} .info-list{border-top:1px solid var(--rule)} .info-list li{display:grid;grid-template-columns:1.75rem 1fr;gap:1rem;padding:1.15rem 0;border-bottom:1px solid var(--rule)} .info-list__ico{width:20px;height:20px;background:none;color:var(--red);display:block} .info-list__ico svg{width:20px;height:20px} .info-list b{display:block;font-family:var(--font-body);font-weight:600;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem} .info-list span,.info-list a{color:var(--ink);font-size:1rem;display:block;line-height:1.45} .info-list a:hover{color:var(--red)} /* ========================================================================== Gallery — gapless mosaic ========================================================================== */ /* A real grid of uniform crops, not CSS columns. With gap:0 and photos of mixed aspect ratio, column flow leaves ragged holes that read as broken layout rather than as a mosaic. */ .gal{display:grid;grid-template-columns:repeat(2,1fr);gap:0} @media (min-width:760px){.gal{grid-template-columns:repeat(3,1fr)}} @media (min-width:1200px){.gal{grid-template-columns:repeat(4,1fr)}} .gal figure{margin:0;overflow:hidden;position:relative;aspect-ratio:1/1} .gal img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)} .gal figure:hover img{transform:scale(1.05)} .gal figcaption{ position:absolute;left:0;right:0;bottom:0;padding:2rem .9rem .8rem; background:linear-gradient(transparent,rgba(12,12,9,.88));color:#fff; font-weight:600;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase; opacity:0;transition:opacity .28s; } .gal figure:hover figcaption{opacity:1} .rail{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none} .rail::-webkit-scrollbar{display:none} .rail > *{flex:none;width:min(80vw,360px);scroll-snap-align:start} /* ========================================================================== CTA band ========================================================================== */ .cta-band{background:var(--ink);color:rgba(255,255,255,.72);padding:clamp(2.5rem,8vw,5rem) var(--gut)} /* when it spans the viewport an inner .wrap supplies the gutters — keeping the padding here too would indent the copy by a double gutter */ .cta-band.bleed{padding-left:0;padding-right:0} .cta-band::before,.cta-band::after{content:none} .cta-band h2{color:#fff} .cta-band p{color:rgba(255,255,255,.68)} .cta-band .eyebrow{color:rgba(255,255,255,.5)} /* the default .btn is ink-on-paper — invisible against the ink band */ .cta-band .btn{background:#fff;color:var(--ink);border-color:#fff} .cta-band .btn:hover{background:var(--red);color:#fff;border-color:var(--red)} .cta-band .btn--ghost,.cta-band .btn--ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.32)} .cta-band .btn--ghost:hover,.cta-band .btn--ghost-light:hover{background:#fff;color:var(--ink);border-color:#fff} .cta-band .tlink{color:#fff;border-color:rgba(255,255,255,.5)} /* ========================================================================== Footer ========================================================================== */ .footer{background:var(--ink);color:rgba(255,255,255,.6);padding:clamp(3rem,7vw,5rem) 0 0;font-size:.95rem} .footer__grid{display:grid;grid-template-columns:1fr;gap:2.25rem;padding-bottom:2.5rem} @media (min-width:640px){.footer__grid{grid-template-columns:1fr 1fr;gap:2.5rem}} @media (min-width:1080px){.footer__grid{grid-template-columns:1.8fr 1fr 1fr 1.2fr;gap:clamp(2rem,4vw,3.5rem);padding-bottom:3.5rem}} .footer__logo{margin-bottom:1.1rem} .footer p{max-width:36ch;line-height:1.6;color:rgba(255,255,255,.55)} .footer h4{color:#fff;font-family:var(--font-body);font-weight:600;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:1.1rem} .footer li{padding:.4rem 0} .footer a:hover{color:#fff} .footer__bottom{ border-top:1px solid rgba(255,255,255,.12);padding:1.5rem 0; display:flex;justify-content:space-between;gap:.75rem;flex-wrap:wrap; font-size:.72rem;letter-spacing:.06em;color:rgba(255,255,255,.45); } /* the default .btn is ink-on-paper — invisible against the ink footer */ .footer .btn{background:transparent;color:#fff;border-color:rgba(255,255,255,.32)} .footer .btn:hover{background:#fff;color:var(--ink);border-color:#fff} .socials{display:flex;gap:1.25rem;margin-top:1.4rem} .socials a{width:auto;height:auto;background:none;color:rgba(255,255,255,.6);display:grid;place-items:center;transition:color .2s} .socials a:hover{background:none;color:#fff;transform:none} .socials svg{width:19px;height:19px} /* The sticky bottom action bar is gone. It covered content on every scroll and only repeated the hero's own "Join free" / "How it works". Call and directions now live in the nav bar, which is sticky anyway. */ .callbar{display:none} /* ========================================================================== Reveal — opt-in via html.js so no-JS renders fully visible ========================================================================== */ .js .rv{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .js .rv.in{opacity:1;transform:none} .rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s} @media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none}} /* never animate the thing an ad click paid for */ .hero .rv{opacity:1!important;transform:none!important} @media print{.nav,.topbar,.callbar,.footer,.btns{display:none}}