/* ============================================================ Barrett Martin Massage — black & white editorial system All tweak axes are driven by attributes on : data-direction = field | press | quiet data-hero = stacked | split | centered data-density = comfortable | airy | tight data-accent = black | warm | cool data-fonts = archivo | space | anton ============================================================ */ /* ---- Base tokens (overridden by attribute selectors below) ---- */ :root{ --footer-h:200px; --font-display:'Archivo', sans-serif; --font-body:'Hanken Grotesk', sans-serif; --font-mono:'JetBrains Mono', monospace; /* palette — true black/white default */ --paper:#ffffff; --paper-2:#f3f3f1; --ink:#0b0b0b; --ink-2:#42423f; --ink-3:#787773; --line:rgba(11,11,11,.16); --line-soft:rgba(11,11,11,.09); --line-strong:#0b0b0b; --inverse-bg:#0b0b0b; --inverse-fg:#f3f3f1; --inverse-ink-2:#a6a6a1; --inverse-line:rgba(243,243,241,.18); /* rhythm */ --section-y:clamp(80px,9vw,140px); --content-gap:28px; --maxw:1240px; --pad-x:clamp(20px,5vw,72px); /* direction-driven */ --hero-size:clamp(44px,8.4vw,116px); --hero-weight:800; --hero-tracking:-0.028em; --hero-leading:0.97; --h2-size:clamp(30px,4.6vw,62px); --h2-weight:760; --h2-tracking:-0.02em; --rule:1px; --label-transform:uppercase; --label-tracking:0.18em; --display-italic:italic; } /* ---- Accent / neutral tone ---- */ /* Painted on too: the preview injects `html,body{background:transparent}` at equal specificity, so this 0,1,1 selector is needed to win. */ html[data-accent]{ background:var(--paper); transition:background .4s ease; } html[data-accent="black"]{ --nav-bg:rgba(255,255,255,.9); --paper:#ffffff; --paper-2:#f3f3f1; --ink:#0b0b0b; --ink-2:#42423f; --ink-3:#787773; --line:rgba(11,11,11,.16); --line-soft:rgba(11,11,11,.09); --line-strong:#0b0b0b; --inverse-bg:#0b0b0b; --inverse-fg:#f4f4f2; --inverse-ink-2:#a6a6a1; --inverse-line:rgba(244,244,242,.18); } html[data-accent="warm"]{ --nav-bg:rgba(247,244,238,.9); --paper:#f7f4ee; --paper-2:#ece7dd; --ink:#1a1611; --ink-2:#494137; --ink-3:#827a6c; --line:rgba(26,22,17,.16); --line-soft:rgba(26,22,17,.08); --line-strong:#1a1611; --inverse-bg:#1a1611; --inverse-fg:#f3efe7; --inverse-ink-2:#a89f8f; --inverse-line:rgba(243,239,231,.18); } html[data-accent="cool"]{ --nav-bg:rgba(241,244,245,.9); --paper:#f1f4f5; --paper-2:#e1e8ea; --ink:#0c1518; --ink-2:#37454a; --ink-3:#6c7c81; --line:rgba(12,21,24,.16); --line-soft:rgba(12,21,24,.08); --line-strong:#0c1518; --inverse-bg:#0c1518; --inverse-fg:#eef3f4; --inverse-ink-2:#93a4a9; --inverse-line:rgba(238,243,244,.18); } /* ---- Fonts ---- */ html[data-fonts="archivo"]{ --font-display:'Archivo', sans-serif; --font-body:'Hanken Grotesk', sans-serif; } html[data-fonts="space"]{ --font-display:'Space Grotesk', sans-serif; --font-body:'Space Grotesk', sans-serif; } html[data-fonts="anton"]{ --font-display:'Anton', sans-serif; --font-body:'Archivo', sans-serif; } /* ---- Direction personalities ---- */ html[data-direction="field"]{ --hero-size:clamp(44px,8.4vw,116px); --hero-weight:800; --hero-tracking:-0.028em; --hero-leading:0.97; --h2-size:clamp(25px,2.9vw,40px); --h2-weight:760; --h2-tracking:-0.02em; --rule:1px; --label-transform:uppercase; --label-tracking:0.18em; --display-italic:italic; } html[data-direction="press"]{ --hero-size:clamp(54px,12.5vw,182px); --hero-weight:900; --hero-tracking:-0.018em; --hero-leading:0.86; --h2-size:clamp(38px,6.8vw,96px); --h2-weight:900; --h2-tracking:-0.015em; --rule:2px; --label-transform:uppercase; --label-tracking:0.2em; --display-italic:italic; } html[data-direction="quiet"]{ --hero-size:clamp(38px,6.4vw,88px); --hero-weight:330; --hero-tracking:-0.012em; --hero-leading:1.04; --h2-size:clamp(28px,3.8vw,50px); --h2-weight:360; --h2-tracking:-0.01em; --rule:1px; --label-transform:uppercase; --label-tracking:0.26em; --display-italic:italic; } /* Anton has a single heavy weight — don't let quiet/field try to thin it */ html[data-fonts="anton"]{ --hero-weight:400; --h2-weight:400; } /* ---- Density ---- */ html[data-density="comfortable"]{ --section-y:clamp(80px,9vw,140px); --content-gap:28px; } html[data-density="airy"]{ --section-y:clamp(120px,14vw,224px); --content-gap:44px; } html[data-density="tight"]{ --section-y:clamp(48px,6vw,86px); --content-gap:18px; } /* ============================================================ */ *{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); font-size:clamp(15.5px,1.05vw,17px); line-height:1.62; font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; transition:background .4s var(--ease,cubic-bezier(.32,.72,.24,1)), color .4s ease; } ::selection{ background:var(--ink); color:var(--paper); } h1,h2,h3,h4{ margin:0; font-family:var(--font-display); font-weight:var(--hero-weight); } p{ margin:0; } a{ color:inherit; text-decoration:none; } img{ display:block; max-width:100%; } ul{ margin:0; padding:0; list-style:none; } .wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad-x); } /* ---- Eyebrow / mono labels ---- */ .eyebrow{ font-family:var(--font-mono); font-size:clamp(10.5px,.8vw,12px); letter-spacing:var(--label-tracking); text-transform:var(--label-transform); color:var(--ink-3); font-weight:500; display:inline-flex; align-items:center; gap:.6em; } .eyebrow .tick{ width:18px; height:var(--rule); background:currentColor; display:inline-block; } /* ============================================================ NAV ============================================================ */ .nav{ position:fixed; top:0; left:0; right:0; inset:0 0 auto 0; z-index:100; height:66px; display:flex; align-items:center; background:var(--nav-bg,rgba(255,255,255,.9)); background:color-mix(in srgb, var(--paper) 86%, transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:var(--rule) solid var(--line); transition:background .4s ease, border-color .4s ease; } .nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%; } .brand{ font-family:var(--font-display); font-weight:800; font-size:18px; letter-spacing:-0.01em; line-height:1; display:flex; align-items:baseline; gap:8px; white-space:nowrap; } .brand .dot{ width:6px; height:6px; border-radius:50%; background:var(--ink); display:inline-block; } .brand .lmt{ font-family:var(--font-mono); font-size:10px; font-weight:500; letter-spacing:.16em; color:var(--ink-3); text-transform:uppercase; } .nav-links{ display:flex; align-items:center; gap:clamp(16px,2.4vw,38px); } .nav-links a{ font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); position:relative; padding:4px 0; transition:color .2s ease; } .nav-links a::after{ content:""; position:absolute; left:0; right:100%; bottom:-1px; height:var(--rule); background:var(--ink); transition:right .26s var(--ease,cubic-bezier(.32,.72,.24,1)); } .nav-links a:hover{ color:var(--ink); } .nav-links a:hover::after{ right:0; } .nav-call{ font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; border:var(--rule) solid var(--line-strong); color:var(--ink); padding:9px 16px; border-radius:2px; white-space:nowrap; transition:background .22s ease, color .22s ease, transform .12s ease; } .nav-call:hover{ background:var(--ink); color:var(--paper); } .nav-call:active{ transform:translateY(1px); } .nav-burger{ display:none; } /* ============================================================ HERO ============================================================ */ /* fill the viewport and optically centre the content: the extra 66px of top padding is the fixed nav, so the usable area below it centres exactly */ .hero{ min-height:100vh; min-height:100svh; display:flex; align-items:center; padding-top:calc(66px + var(--section-y) * .3); padding-bottom:calc(var(--section-y) * .3); position:relative; overflow:hidden; } .hero > .wrap{ width:100%; } .hero .wrap{ display:grid; gap:clamp(28px,4vw,56px); align-items:end; } .hero-inner{ display:flex; flex-direction:column; gap:var(--content-gap); max-width:760px; width:100%; } .hero[data-nomedia] .hero-media{ display:none; } .hero h1{ font-size:var(--hero-size); font-weight:var(--hero-weight); letter-spacing:var(--hero-tracking); line-height:var(--hero-leading); text-wrap:balance; /* headline is 40+ chars: cap the size and widen the measure so it sits on two lines and the CTAs stay above the fold on a laptop */ font-size:clamp(38px,5.6vw,82px); max-width:19ch; } .hero h1 em{ font-style:var(--display-italic); margin-right:.055em; } .hero-lede{ max-width:80ch; color:var(--ink); font-size:clamp(16px,1.25vw,19px); line-height:1.6; font-weight:700; } .hero-cta{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; } .hero-meta{ display:flex; flex-wrap:wrap; gap:10px 26px; padding-top:8px; border-top:var(--rule) solid var(--line); } .hero-meta li{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); display:flex; align-items:center; gap:8px; } .hero-meta li::before{ content:""; width:5px; height:5px; background:var(--ink); border-radius:50%; } .hero-media{ width:100%; } .hero-media image-slot{ width:100%; display:block; } /* hero layout variants */ .hero[data-hero-layout="stacked"] .hero-inner{ max-width:none; } .hero[data-hero-layout="stacked"] .hero-media image-slot{ height:clamp(220px,30vw,360px); } .hero[data-hero-layout="split"] .wrap{ grid-template-columns:1.15fr .85fr; align-items:center; } .hero[data-hero-layout="split"] .hero-media image-slot{ height:clamp(360px,46vw,560px); } .hero[data-hero-layout="centered"] .wrap{ justify-items:center; text-align:center; } .hero[data-hero-layout="centered"] .hero-inner{ align-items:center; text-align:center; max-width:760px; } .hero[data-hero-layout="centered"] .hero-lede{ text-align:center; max-width:56ch; } .hero[data-hero-layout="centered"] .hero-meta{ justify-content:center; } .hero[data-hero-layout="centered"] .hero-cta{ justify-content:center; } .hero[data-hero-layout="centered"] .hero-media image-slot{ height:clamp(200px,24vw,300px); } .hero[data-hero-layout="centered"] .hero-media{ max-width:760px; } /* a faint ridge line behind the hero */ .hero-ridge{ position:absolute; left:0; right:0; bottom:0; height:42%; pointer-events:none; opacity:.5; color:var(--line); } .hero-ridge svg{ width:100%; height:100%; } /* ============================================================ BUTTONS ============================================================ */ .btn{ display:inline-flex; align-items:center; gap:10px; white-space:nowrap; font-family:var(--font-mono); font-size:13px; letter-spacing:.03em; padding:14px 22px; border-radius:2px; cursor:pointer; border:var(--rule) solid transparent; transition:background .22s ease, color .22s ease, transform .12s ease, border-color .22s ease; } .btn .arrow{ transition:transform .22s var(--ease,cubic-bezier(.32,.72,.24,1)); } .btn:hover .arrow{ transform:translateX(4px); } .btn-primary{ background:var(--ink); color:var(--paper); } .btn-primary:hover{ background:var(--ink-2); } .btn-primary:active{ transform:translateY(1px); } .btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); } .btn-ghost:hover{ background:var(--ink); color:var(--paper); } .btn-ghost:active{ transform:translateY(1px); } .btn-soon{ background:transparent; color:var(--ink-3); border-color:var(--line); cursor:not-allowed; } .btn-soon .badge{ font-size:9.5px; letter-spacing:.12em; border:var(--rule) solid var(--line); padding:2px 5px; border-radius:2px; } /* inverse contexts */ .inverse .btn-primary{ background:var(--inverse-fg); color:var(--inverse-bg); } .inverse .btn-primary:hover{ background:#fff; } .inverse .btn-ghost{ color:var(--inverse-fg); border-color:var(--inverse-line); } .inverse .btn-ghost:hover{ background:var(--inverse-fg); color:var(--inverse-bg); } /* ============================================================ SECTION SCAFFOLD ============================================================ */ section{ padding-block:var(--section-y); position:relative; } /* exactly the fixed nav height, so a jump lands the section flush under the bar instead of showing a sliver of the previous one */ section[id],header[id]{ scroll-margin-top:66px; } .sec-head{ display:flex; flex-direction:column; gap:18px; margin-bottom:clamp(40px,5vw,72px); } .sec-head h2{ font-size:var(--h2-size); font-weight:var(--h2-weight); letter-spacing:var(--h2-tracking); line-height:1.0; text-wrap:balance; max-width:18ch; } .sec-head h2 em{ font-style:var(--display-italic); } .sec-head .lead{ color:var(--ink-2); max-width:52ch; font-size:clamp(16px,1.2vw,18px); } .sec-divider{ border:0; border-top:var(--rule) solid var(--line-strong); margin:0; } /* ============================================================ ABOUT ============================================================ */ .about-grid{ display:grid; grid-template-columns:.72fr 1.28fr; gap:clamp(36px,5vw,80px); align-items:start; } .about{ padding-block:clamp(30px,3vw,44px); } .about-media{ position:sticky; top:96px; } .about-media image-slot{ width:100%; height:clamp(300px,32vw,430px); display:block; } .about-cap{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-top:12px; display:flex; justify-content:space-between; gap:12px; } .about-body{ display:flex; flex-direction:column; gap:var(--content-gap); } .about-body p{ color:var(--ink); max-width:58ch; font-weight:700; } .about .sec-head{ margin-bottom:clamp(20px,2.2vw,30px); } .about-body p.lead-para{ color:var(--ink); font-size:clamp(17px,1.35vw,20px); line-height:1.5; font-family:var(--font-display); font-weight:var(--hero-weight); letter-spacing:-0.01em; max-width:40ch; } .about-quote{ border-left:3px solid var(--ink); padding:6px 0 6px 22px; margin:6px 0; } .about-quote p{ font-family:var(--font-display); font-style:var(--display-italic); font-size:clamp(19px,1.8vw,26px); font-weight:var(--hero-weight); line-height:1.32; color:var(--ink); letter-spacing:-0.01em; max-width:26ch; } .creds{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; border-top:var(--rule) solid var(--line); margin-top:6px; } .creds li{ padding:16px 0; border-bottom:var(--rule) solid var(--line); display:flex; flex-direction:column; gap:3px; } .creds li:nth-child(odd){ padding-right:18px; } .creds .k{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); } .creds .v{ font-family:var(--font-display); font-weight:var(--hero-weight); font-size:clamp(16px,1.3vw,19px); letter-spacing:-0.01em; } /* stat strip */ .stats{ display:grid; grid-template-columns:repeat(3,1fr); border-top:var(--rule) solid var(--line-strong); border-bottom:var(--rule) solid var(--line-strong); margin-top:clamp(22px,2.4vw,34px); } .stats li{ padding:clamp(14px,1.4vw,20px) 0; } .stats li + li{ border-left:var(--rule) solid var(--line); padding-left:clamp(16px,2vw,28px); } .stats .num{ font-family:var(--font-display); font-weight:var(--hero-weight); font-size:clamp(26px,2.4vw,34px); line-height:.95; letter-spacing:-0.03em; } .stats .lbl{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-top:7px; } /* ============================================================ SERVICES (ruled, numbered rows) ============================================================ */ .services{ background:var(--paper-2); transition:background .4s ease; } /* keep the whole section inside one viewport when jumped to from the nav */ .services{ padding-block:clamp(18px,1.5vw,22px); /* fill the screen below the fixed nav so the tint never stops short */ min-height:calc(100vh - 66px); min-height:calc(100svh - 66px); display:flex; align-items:center; } .services > .wrap{ width:100%; } .services .sec-head{ gap:8px; margin-bottom:clamp(14px,1.4vw,20px); } .services .sec-head h2{ max-width:26ch; } .services .sec-head .lead{ max-width:64ch; } .svc-list{ border-top:var(--rule) solid var(--line-strong); } .svc{ display:grid; grid-template-columns:84px minmax(0,1fr) max-content; gap:6px clamp(20px,2.4vw,40px); align-items:baseline; padding:clamp(12px,1.2vw,17px) 0; border-bottom:var(--rule) solid var(--line); position:relative; } .svc .no{ font-family:var(--font-mono); font-size:13px; letter-spacing:.08em; color:var(--ink-3); padding-top:6px; grid-row:span 2; } .svc h3{ font-family:var(--font-display); font-weight:var(--h2-weight); font-size:clamp(19px,1.7vw,23px); letter-spacing:-0.02em; line-height:1.02; } .svc p{ color:var(--ink-2); max-width:66ch; font-size:clamp(14px,1vw,15.5px); line-height:1.5; grid-column:2; } .svc .tag{ font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; grid-column:3; grid-row:1 / span 2; align-self:start; padding-top:11px; text-align:right; justify-self:end; margin-right:-.12em; } .svc::after{ content:""; position:absolute; left:0; right:0; bottom:0; top:0; background:var(--ink); opacity:0; transition:opacity .3s ease; z-index:-1; } .svc:hover h3{ transform:translateX(6px); } .svc h3{ transition:transform .3s var(--ease,cubic-bezier(.32,.72,.24,1)); } /* ============================================================ PRICING ============================================================ */ /* same treatment as the specialties section: fill the screen below the nav and centre the card so the space above and below it matches */ .pricing{ padding-block:clamp(24px,2.4vw,34px); min-height:calc(100vh - 66px); min-height:calc(100svh - 66px); display:flex; align-items:center; } .pricing > .wrap{ width:100%; } .pricing .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,5vw,80px); align-items:center; } .price-card{ border:var(--rule) solid var(--line-strong); padding:clamp(28px,3.4vw,52px); border-radius:3px; background:var(--paper); } .price-card .eyebrow{ margin-bottom:22px; } .price-big{ display:flex; align-items:flex-start; gap:6px; line-height:.9; } .price-big .cur{ font-family:var(--font-display); font-weight:var(--hero-weight); font-size:clamp(28px,2.6vw,40px); padding-top:.32em; } .price-big .amt{ font-family:var(--font-display); font-weight:var(--hero-weight); font-size:clamp(74px,11vw,150px); letter-spacing:-0.04em; } .price-big .per{ font-family:var(--font-mono); font-size:14px; letter-spacing:.04em; color:var(--ink-3); align-self:flex-end; padding-bottom:.7em; text-transform:uppercase; } .price-note{ color:var(--ink-2); margin-top:18px; max-width:38ch; } .price-incl{ margin-top:26px; border-top:var(--rule) solid var(--line); } .price-incl li{ display:flex; align-items:flex-start; gap:12px; padding:13px 0; border-bottom:var(--rule) solid var(--line); font-size:15px; color:var(--ink); } .price-incl .chk{ flex:none; width:16px; height:16px; margin-top:3px; color:var(--ink); } .price-side h3{ font-family:var(--font-display); font-weight:var(--h2-weight); font-size:clamp(24px,2.6vw,38px); letter-spacing:-0.02em; line-height:1.05; margin-bottom:20px; max-width:16ch; } .price-side h3 em{ font-style:var(--display-italic); } .dur-table{ border-top:var(--rule) solid var(--line-strong); margin-bottom:28px; } .dur-table li{ display:grid; grid-template-columns:1fr auto auto; gap:18px; align-items:baseline; padding:15px 0; border-bottom:var(--rule) solid var(--line); } .dur-table .d-name{ font-family:var(--font-display); font-weight:var(--hero-weight); font-size:clamp(16px,1.3vw,19px); letter-spacing:-0.01em; } .dur-table .d-dur{ font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; color:var(--ink-3); text-transform:uppercase; } .dur-table .d-price{ font-family:var(--font-mono); font-size:15px; font-weight:500; } .price-side p.fine{ color:var(--ink-3); font-size:13.5px; max-width:42ch; } /* ============================================================ REVIEWS ============================================================ */ .reviews .sec-head{ flex-direction:row; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:20px; margin-bottom:clamp(16px,1.8vw,26px); } .rev-rail{ position:relative; } .rev-hint{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:12px; } .rev-hint span{ color:var(--ink); } .rev-grid{ display:flex; gap:0; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; border-top:var(--rule) solid var(--line-strong); border-left:var(--rule) solid var(--line); scrollbar-width:thin; scrollbar-color:var(--ink-3) var(--line-soft); } .rev-grid::-webkit-scrollbar{ height:6px; } .rev-grid::-webkit-scrollbar-track{ background:var(--line-soft); } .rev-grid::-webkit-scrollbar-thumb{ background:var(--ink-3); } .rev{ flex:0 0 clamp(272px, 33.333%, 33.333%); box-sizing:border-box; margin:0; scroll-snap-align:start; scroll-snap-stop:always; padding:clamp(13px,1.2vw,17px); border-right:var(--rule) solid var(--line); border-bottom:var(--rule) solid var(--line); display:flex; flex-direction:column; gap:11px; } .rev-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--paper); color:var(--ink); border:var(--rule) solid var(--line-strong); cursor:pointer; font-family:var(--font-display); font-size:24px; line-height:0; padding-bottom:3px; transition:background .2s ease, color .2s ease, opacity .25s ease; box-shadow:0 2px 16px rgba(0,0,0,.12); } .rev-nav:hover{ background:var(--ink); color:var(--paper); } .rev-prev{ left:-14px; } .rev-next{ right:-14px; } .rev-nav[disabled]{ opacity:0; pointer-events:none; } .rev .stars{ display:flex; gap:3px; color:var(--ink); } .rev .stars svg{ width:13px; height:13px; } .rev p{ font-family:var(--font-display); font-weight:var(--hero-weight); font-size:clamp(12.5px,.9vw,13.5px); line-height:1.42; letter-spacing:-0.01em; color:var(--ink); } .rev .by{ margin-top:auto; font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); display:flex; justify-content:space-between; gap:12px; } .rev-note{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-top:18px; } .rev-note a{ border-bottom:var(--rule) solid var(--ink-3); color:var(--ink); } .rev blockquote{ margin:0; } /* google score on the section head */ .rev-score{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; } .rev-score .stars{ display:flex; gap:4px; color:var(--ink); align-self:center; } .rev-score .stars svg{ width:18px; height:18px; } .rev-score-line{ display:flex; align-items:baseline; gap:11px; } .rev-score .num{ font-family:var(--font-display); font-weight:var(--hero-weight); font-size:clamp(34px,4vw,56px); letter-spacing:-0.03em; line-height:.9; } .rev-score-lbl{ font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); } /* live map card (full colour) */ .rev-map{ display:grid; grid-template-columns:2.2fr 1fr; gap:0; border:var(--rule) solid var(--line-strong); margin-top:clamp(18px,2vw,26px); overflow:hidden; } .rev-map-embed{ position:relative; min-height:172px; border-right:var(--rule) solid var(--line-strong); background:var(--paper-2); } .rev-map-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; } .rev-map-info{ padding:clamp(16px,1.7vw,24px); display:flex; flex-direction:column; gap:9px; align-items:flex-start; justify-content:center; } .rev-map-info .eyebrow{ margin-bottom:2px; } .rev-map-name{ font-family:var(--font-display); font-weight:var(--hero-weight); font-size:clamp(21px,2vw,28px); letter-spacing:-0.02em; line-height:1; } .rev-map-name em{ font-style:var(--display-italic); } .rev-map-sub{ color:var(--ink-2); max-width:48ch; font-size:14px; } /* ============================================================ CONTACT (inverse band) ============================================================ */ .contact{ background:var(--inverse-bg); color:var(--inverse-fg); transition:background .4s ease, color .4s ease; } .contact .eyebrow{ color:var(--inverse-ink-2); } .contact h2{ font-family:var(--font-display); font-weight:var(--h2-weight); font-size:var(--h2-size); letter-spacing:var(--h2-tracking); line-height:.98; max-width:14ch; margin-bottom:clamp(40px,5vw,72px); } .contact h2 em{ font-style:var(--display-italic); } .contact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:var(--rule) solid var(--inverse-line); } .contact-col{ padding:clamp(26px,3vw,40px) 0; } .contact-col + .contact-col{ border-left:var(--rule) solid var(--inverse-line); padding-left:clamp(20px,2.4vw,36px); } .contact-col .k{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--inverse-ink-2); margin-bottom:16px; } .contact-col .big{ font-family:var(--font-display); font-weight:var(--hero-weight); font-size:clamp(22px,2.2vw,32px); letter-spacing:-0.02em; line-height:1.06; } .contact-col .sub{ color:var(--inverse-ink-2); font-size:14px; margin-top:8px; } .contact-col a.big:hover{ text-decoration:underline; text-underline-offset:5px; } .contact-foot{ display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between; margin-top:clamp(40px,5vw,64px); padding-top:30px; border-top:var(--rule) solid var(--inverse-line); } .contact-area{ color:var(--inverse-ink-2); font-size:14px; max-width:48ch; } /* ============================================================ FOOTER ============================================================ */ .footer{ background:var(--paper); border-top:var(--rule) solid var(--line); padding-block:clamp(40px,5vw,64px); } .footer .wrap{ display:flex; flex-direction:column; gap:30px; } .footer-ridge{ color:var(--line); } .footer-ridge svg{ width:100%; height:60px; } .footer-bottom{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; } .footer-brand{ font-family:var(--font-display); font-weight:800; font-size:clamp(28px,5vw,64px); letter-spacing:-0.03em; line-height:1; } .footer-meta{ display:flex; flex-wrap:wrap; gap:8px 26px; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); } .footer-meta a:hover{ color:var(--ink); } /* ============================================================ image-slot empty-state polish (B&W) ============================================================ */ image-slot{ --is-bg:var(--paper-2); background:var(--paper-2); border:var(--rule) dashed var(--line); color:var(--ink-3); border-radius:3px; } .inverse image-slot{ background:rgba(255,255,255,.04); border-color:var(--inverse-line); color:var(--inverse-ink-2); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1000px){ .hero[data-hero-layout="split"] .wrap{ grid-template-columns:1fr; align-items:start; } .about-grid{ grid-template-columns:1fr; } .about-media{ position:static; max-width:520px; } .pricing .wrap{ grid-template-columns:1fr; } .rev-grid{ grid-template-columns:1fr 1fr; } .rev-map{ grid-template-columns:1fr; } .rev-map-embed{ border-right:0; border-bottom:var(--rule) solid var(--line-strong); min-height:280px; } .svc{ grid-template-columns:54px 1fr; row-gap:8px; } .svc .no{ grid-row:auto; } .svc .tag{ grid-column:2; grid-row:auto; padding-top:0; text-align:left; justify-self:start; } .svc p{ grid-column:2; } } @media (max-width:680px){ .nav-links{ display:none; } .brand .lmt{ display:none; } .nav .wrap{ gap:12px; } .brand{ min-width:0; font-size:17px; } .nav-call{ flex:none; padding:8px 13px; font-size:11.5px; } .stats{ grid-template-columns:1fr 1fr; } .stats li:nth-child(3){ border-top:var(--rule) solid var(--line); border-left:0; padding-left:0; } .creds{ grid-template-columns:1fr; } .rev-grid{ grid-template-columns:1fr; } .rev-nav{ display:none; } .rev{ flex:0 0 82%; } .reviews .sec-head{ align-items:flex-start; } .rev-score{ align-items:flex-start; } .contact-grid{ grid-template-columns:1fr; } .contact-col + .contact-col{ border-left:0; border-top:var(--rule) solid var(--inverse-line); padding-left:0; } .dur-table li{ grid-template-columns:1fr auto; } .dur-table .d-dur{ grid-column:1; grid-row:2; } } /* respect reduced motion */ @media (prefers-reduced-motion:reduce){ *{ scroll-behavior:auto !important; } .reveal{ opacity:1 !important; transform:none !important; } html.js .hero-inner > *{ opacity:1 !important; transform:none !important; animation:none !important; } .mask-h2 > .mask-in{ transform:none !important; animation:none !important; } .mobile-cta{ transition:none !important; } } /* scroll reveal — hidden state only applies when JS is active (html.js), so a JS failure can never leave content invisible */ .reveal{ opacity:1; transform:none; } html.js .reveal{ opacity:0; transform:translateY(12px); transition:opacity .7s var(--ease,cubic-bezier(.32,.72,.24,1)), transform .7s var(--ease,cubic-bezier(.32,.72,.24,1)); } html.js .reveal.in{ opacity:1; transform:none; } /* tweaks helper hint */ .twk-hint{ font-size:10px; line-height:1.45; color:rgba(41,38,27,.5); margin:-4px 0 2px; letter-spacing:.01em; } /* ---- reviews: its own full screen, sized up to fill it ---- */ .reviews{ padding-block:clamp(28px,3vw,44px); min-height:calc(100vh - 66px); min-height:calc(100svh - 66px); display:flex; align-items:center; } .reviews > .wrap{ width:100%; } .reviews .sec-head{ margin-bottom:clamp(20px,2.2vw,30px); } .reviews .rev-hint{ display:block; margin-bottom:14px; } .rev{ padding:clamp(20px,1.9vw,28px); gap:15px; } .rev p{ font-size:clamp(15px,1.15vw,17.5px); line-height:1.45; } .rev .stars svg{ width:15px; height:15px; } .rev .by{ font-size:10.5px; } /* ---- contact + footer share one screen ---- */ /* contact fills the screen minus the white footer, so a jump to #contact shows the dark band and the footer together */ .contact{ padding-block:clamp(24px,2.6vw,38px); min-height:calc(100vh - 66px - var(--footer-h)); min-height:calc(100svh - 66px - var(--footer-h)); display:flex; flex-direction:column; justify-content:center; } .contact > .wrap{ width:100%; flex:1; display:flex; flex-direction:column; justify-content:center; } .contact h2{ font-size:var(--h2-size); max-width:20ch; margin-bottom:clamp(18px,2vw,28px); } .contact-col{ padding:clamp(14px,1.5vw,22px) 0; } .contact-col .k{ margin-bottom:12px; } .contact-col .big{ font-size:clamp(20px,1.9vw,28px); } .contact-col .sub{ font-size:13px; margin-top:6px; } .contact-foot{ margin-top:clamp(20px,2.2vw,32px); padding-top:22px; } .contact-area{ font-size:14px; max-width:64ch; } .footer{ padding-block:clamp(24px,2.6vw,36px); } .footer .wrap{ gap:clamp(14px,1.6vw,22px); } .footer-ridge svg{ height:clamp(30px,3.4vw,46px); } .footer-brand{ font-size:clamp(26px,3.6vw,46px); } /* ============================================================ MOBILE / TABLET SAFETY ============================================================ */ /* between the phone breakpoint and the desktop nav the five links plus the phone button run past the edge: tighten them before they overflow */ @media (max-width:900px){ .nav-links{ gap:clamp(12px,1.8vw,20px); } .nav-links a{ font-size:11px; letter-spacing:.05em; } .nav .wrap{ gap:14px; } .brand{ font-size:19px; } .brand .lmt{ display:none; } } /* on a phone, stop forcing sections to fill the viewport: the content is taller than the screen anyway, so stretching only adds dead space */ @media (max-width:680px){ .services, .pricing, .reviews, .contact{ min-height:0; display:block; } .services > .wrap, .pricing > .wrap, .reviews > .wrap, .contact > .wrap{ width:auto; } .hero{ min-height:0; display:block; padding-top:calc(66px + 40px); padding-bottom:44px; } .services, .pricing, .reviews, .contact, .footer{ padding-block:clamp(34px,9vw,52px); } .rev{ padding:20px; } } /* ============================================================ MOTION Every hidden state is gated behind html.js (set by the reveal script), so a JS failure can never leave content invisible. ============================================================ */ /* 01 · hero entrance: eyebrow, headline, lede, buttons, chips rise in turn */ html.js .hero-inner > *{ opacity:0; transform:translateY(14px); animation:hero-rise .62s var(--ease,cubic-bezier(.32,.72,.24,1)) forwards; } html.js .hero-inner > *:nth-child(1){ animation-delay:.06s } html.js .hero-inner > *:nth-child(2){ animation-delay:.14s } html.js .hero-inner > *:nth-child(3){ animation-delay:.22s } html.js .hero-inner > *:nth-child(4){ animation-delay:.30s } html.js .hero-inner > *:nth-child(5){ animation-delay:.38s } @keyframes hero-rise{ to{ opacity:1; transform:none } } /* 02 · section headings slide up from behind an invisible edge. The padding/margin pair keeps descenders from being clipped. */ .mask-h2{ display:block; overflow:hidden; padding-bottom:.14em; margin-bottom:-.14em; } .mask-h2 > .mask-in{ display:block; } html.motion .mask-h2 > .mask-in{ transform:translateY(110%); } html.motion .mask-h2.in > .mask-in{ animation:h2-unmask .72s var(--ease,cubic-bezier(.32,.72,.24,1)) forwards; } @keyframes h2-unmask{ to{ transform:none } } /* 04 / 05 · counters. Reserving width in ch stops the row from reflowing while the digits roll. */ .stats .num{ font-variant-numeric:tabular-nums; } .stats .num[data-count]{ display:inline-block; min-width:2ch; } .price-big .amt{ font-variant-numeric:tabular-nums; display:inline-block; min-width:3ch; } .rev-score .num{ font-variant-numeric:tabular-nums; display:inline-block; min-width:2.4ch; } /* 06 · the google score stars snap in one at a time */ html.motion .rev-score .stars.pop svg{ animation:star-pop .45s var(--ease,cubic-bezier(.32,.72,.24,1)) backwards; } html.motion .rev-score .stars.pop svg:nth-child(1){ animation-delay:.00s } html.motion .rev-score .stars.pop svg:nth-child(2){ animation-delay:.07s } html.motion .rev-score .stars.pop svg:nth-child(3){ animation-delay:.14s } html.motion .rev-score .stars.pop svg:nth-child(4){ animation-delay:.21s } html.motion .rev-score .stars.pop svg:nth-child(5){ animation-delay:.28s } @keyframes star-pop{ 0%{ opacity:0; transform:scale(.4) rotate(-14deg) } 60%{ opacity:1; transform:scale(1.14) rotate(3deg) } 100%{ opacity:1; transform:none } } /* 07 · sticky text bar, phones only, once the hero is behind you */ .mobile-cta{ position:fixed; left:0; right:0; bottom:0; z-index:90; display:none; gap:8px; padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px)); background:var(--nav-bg,rgba(255,255,255,.94)); background:color-mix(in srgb, var(--paper) 92%, transparent); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-top:var(--rule) solid var(--line); transform:translateY(130%); transition:transform .42s var(--ease,cubic-bezier(.32,.72,.24,1)); } .mobile-cta.show{ transform:none; } .mobile-cta a{ flex:1; text-align:center; font-family:var(--font-mono); font-size:12px; letter-spacing:.03em; padding:13px 0; border-radius:2px; white-space:nowrap; } .mobile-cta .primary{ background:var(--ink); color:var(--paper); } .mobile-cta .secondary{ border:var(--rule) solid var(--line-strong); color:var(--ink); } @media (max-width:680px){ .mobile-cta{ display:flex; } /* clear the bar so it never covers the last line of the footer */ .footer{ padding-bottom:calc(clamp(34px,9vw,52px) + 62px); } }