/* ============================================================================ FKD GROUP — v2 "Cinematic Construction" design language ---------------------------------------------------------------------------- Brief unchanged (ICP Brian/Mick/Phil, anti-tech-bro, §5.3 vocabulary, offer ladder, mobile-first, book-Matt CTA). FEEL elevated: art direction + real photography + outcome mockups + editorial composition + depth — not animation. North star: prophet.ml (composition & visual weight). Floor: Hi-Vis grit. Anti-slop: no Inter/Roboto body, no centred card grids, no flat colour blocks, OKLCH tinted neutrals, custom easings, film grain, micro-details. ============================================================================ */ /* ---------- Fonts (Fontshare — premium, anti-slop) ---------- */ /* Clash Display (display) + Satoshi (body) loaded in */ /* ---------- Tokens ---------- */ :root { /* Warm cinematic neutrals (OKLCH, never pure black/white) */ --ink: oklch(0.16 0.010 70); /* warm near-black */ --ink-2: oklch(0.20 0.012 70); --asphalt: oklch(0.24 0.013 72); --steel: oklch(0.32 0.012 74); --steel-line: oklch(0.38 0.012 74); --concrete: oklch(0.66 0.014 76); --concrete-2: oklch(0.78 0.012 78); --paper: oklch(0.955 0.010 82); /* warm off-white */ --paper-2: oklch(0.915 0.013 80); --paper-line: oklch(0.86 0.015 78); --white: oklch(0.99 0.004 85); /* Safety amber — surgical accent */ --amber: oklch(0.71 0.180 52); /* hot safety amber / ute orange */ --amber-2: oklch(0.64 0.175 46); /* deeper */ --amber-hi: oklch(0.81 0.160 66); /* brighter highlight */ --amber-glow: oklch(0.715 0.165 55 / 0.35); --amber-soft: oklch(0.715 0.165 55 / 0.12); --success: oklch(0.66 0.13 155); --success-bg: oklch(0.95 0.04 155); --danger: oklch(0.58 0.18 28); /* Hex fallbacks for engines without OKLCH (progressive) */ --ink-hex: #15130E; --paper-hex: #F6F2EA; --amber-hex: #F0821C; /* Type */ --display: "Archivo", "Helvetica Neue", Arial, sans-serif; --body: "Satoshi", "Helvetica Neue", Arial, sans-serif; /* Fluid scale — measured (prophet restraint), not 120px hero */ --step--1: clamp(0.95rem, 0.91rem + 0.18vw, 1.04rem); --step-0: clamp(1.06rem, 1.00rem + 0.30vw, 1.20rem); --step-1: clamp(1.30rem, 1.16rem + 0.66vw, 1.62rem); --step-2: clamp(1.66rem, 1.42rem + 1.10vw, 2.30rem); --step-3: clamp(2.10rem, 1.74rem + 1.72vw, 3.20rem); --step-4: clamp(2.70rem, 2.10rem + 2.9vw, 4.40rem); --step-5: clamp(3.20rem, 2.30rem + 4.3vw, 5.40rem); --section: clamp(84px, 11vw, 168px); --gutter: clamp(22px, 5vw, 48px); --container: 1240px; --container-wide: 1400px; --radius: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 100px; /* Named easings (no bare ease/ease-in-out) */ --ease-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-quint: cubic-bezier(0.83, 0, 0.17, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1); --ease-smooth: cubic-bezier(0.4, 0, 0, 1); /* Layered shadows */ --shadow-md: 0 2px 6px rgb(0 0 0 / 0.18), 0 10px 30px rgb(0 0 0 / 0.22); --shadow-lg: 0 4px 10px rgb(0 0 0 / 0.16), 0 20px 50px rgb(0 0 0 / 0.30), 0 40px 90px rgb(0 0 0 / 0.18); --shadow-amber: 0 12px 40px -12px var(--amber-glow); } /* ---------- Reset ---------- */ *,*::before,*::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } body { font-family: var(--body); font-size: var(--step-0); line-height: 1.62; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img,svg,video { display:block; max-width:100%; height:auto; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; color: inherit; } ul { list-style: none; padding: 0; } :focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; } /* Micro-detail: selection + scrollbar */ ::selection { background: var(--amber); color: var(--ink); } ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: var(--ink); } ::-webkit-scrollbar-thumb { background: var(--steel); border-radius: 10px; border: 3px solid var(--ink); } ::-webkit-scrollbar-thumb:hover { background: var(--amber-2); } /* ---------- Film grain (depth on dark sections) ---------- */ .grain { position: relative; isolation: isolate; } .grain::after { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.06; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .grain > * { position: relative; z-index:1; } /* ---------- Layout ---------- */ .wrap { width:100%; max-width: var(--container); margin-inline:auto; padding-inline: var(--gutter); } .wrap--wide { max-width: var(--container-wide); } .section { padding-block: var(--section); position: relative; } .section--ink { background: var(--ink); color: var(--paper); } .section--asphalt { background: var(--asphalt); color: var(--paper); } .section--paper2 { background: var(--paper-2); } /* Gradient divider (micro-detail, between dark sections) */ .rule-amber { height:2px; border:0; background: linear-gradient(90deg, transparent, var(--amber) 30%, var(--amber-hi) 50%, var(--amber) 70%, transparent); opacity:.8; } /* ---------- Section heading block ---------- */ .eyebrow { font-family: var(--display); font-weight: 600; letter-spacing:.22em; text-transform: uppercase; font-size: .78rem; color: var(--amber-2); display:inline-flex; align-items:center; gap:.7rem; } .section--ink .eyebrow, .section--asphalt .eyebrow { color: var(--amber-hi); } .eyebrow::before { content:""; width:28px; height:2px; background: currentColor; } .sec-head { max-width: 720px; margin-bottom: clamp(40px,6vw,72px); } .sec-head .eyebrow { margin-bottom: 1.3rem; } .sec-head.center { margin-inline:auto; text-align:center; } .sec-head.center .lede { margin-inline:auto; } /* ---------- Typography ---------- */ h1,h2,h3,h4 { font-family: var(--display); font-weight: 600; line-height: 1.04; letter-spacing:-.02em; } .h-hero { font-size: var(--step-5); font-weight: 700; line-height: 1.0; letter-spacing:-.025em; } .h-sec { font-size: var(--step-4); font-weight: 700; letter-spacing:-.025em; } .h-sub { font-size: var(--step-2); font-weight: 600; } .lede { font-size: var(--step-1); line-height: 1.5; color: var(--concrete); max-width: 40ch; font-weight: 400; } .section--ink .lede, .section--asphalt .lede { color: var(--concrete-2); } .measure { max-width: 60ch; } .measure-tight { max-width: 50ch; } .up { text-transform: uppercase; } .on-ink { color: var(--white); } .amber-text { color: var(--amber); } .section--ink .amber-text, .section--asphalt .amber-text { color: var(--amber-hi); } /* ---------- Buttons ---------- */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:.6rem; font-family: var(--display); font-weight: 600; letter-spacing:.005em; font-size: 1.04rem; padding: 17px 30px; border:2px solid transparent; border-radius: var(--radius); min-height: 60px; transition: transform .25s var(--ease-spring), background .25s var(--ease-smooth), box-shadow .25s, border-color .25s, color .25s; text-align:center; will-change: transform; } .btn:active { transform: translateY(1px) scale(.99); } .btn--primary { background: var(--amber); color: var(--ink); box-shadow: var(--shadow-amber); } .btn--primary:hover { background: var(--amber-hi); transform: translateY(-3px); box-shadow: 0 18px 50px -14px var(--amber-glow); } .btn--ghost { background: transparent; color: var(--paper); border-color: rgb(255 255 255 / 0.28); } .btn--ghost:hover { border-color: var(--amber); color: var(--amber-hi); transform: translateY(-3px); } .btn--dark { background: var(--ink); color: var(--paper); } .btn--dark:hover { background: var(--steel); transform: translateY(-3px); } .btn--lg { font-size: 1.14rem; padding: 20px 38px; min-height: 66px; } .btn--block { width: 100%; } .btn .arw { transition: transform .25s var(--ease-spring); } .btn:hover .arw { transform: translateX(4px); } /* ---------- Header ---------- */ .site-head { position: sticky; top:0; z-index: 60; transition: background .3s, backdrop-filter .3s, border-color .3s; border-bottom:1px solid transparent; } .site-head.scrolled { background: color-mix(in oklch, var(--ink) 86%, transparent); backdrop-filter: blur(14px) saturate(1.2); border-bottom-color: var(--steel-line); } .site-head__row { display:flex; align-items:center; justify-content:space-between; min-height: 76px; gap:1rem; } .brand { display:flex; align-items:center; gap:.65rem; color: var(--paper); font-family: var(--display); font-weight: 700; font-size:1.3rem; letter-spacing:-.01em; } .brand__mark { width:40px; height:40px; display:grid; place-items:center; background: var(--amber); color: var(--ink); border-radius:5px; font-weight:700; font-size:.92rem; letter-spacing:-.04em; clip-path: polygon(0 0,100% 0,100% 76%,80% 100%,0 100%); } .brand small { display:block; color: var(--concrete-2); font-family: var(--body); font-weight:500; font-size:.6rem; letter-spacing:.18em; margin-top:-2px; } .nav { display:none; align-items:center; gap:2.1rem; } .nav a { color: var(--paper); font-weight:500; font-size:.98rem; opacity:.82; position:relative; transition: opacity .2s, color .2s; } .nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-6px; height:2px; background: var(--amber); transition: right .3s var(--ease-quart); } .nav a:hover { opacity:1; } .nav a:hover::after { right:0; } .head-cta { display:none; } .burger { display:inline-flex; flex-direction:column; gap:5px; background:none; border:0; padding:10px; } .burger span { width:26px; height:2px; background: var(--paper); border-radius:2px; transition: transform .25s var(--ease-quart), opacity .2s; } .burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2){ opacity:0; } .burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } .mobile-nav { position: fixed; inset:76px 0 0 0; background: var(--ink); z-index:55; transform: translateX(100%); transition: transform .35s var(--ease-quart); display:flex; flex-direction:column; padding:1.8rem var(--gutter) 2rem; gap:.3rem; } .mobile-nav.open { transform: none; } .mobile-nav a { color: var(--paper); font-family: var(--display); font-weight:600; font-size:1.7rem; padding:1rem 0; border-bottom:1px solid var(--steel-line); } .mobile-nav .btn { margin-top:1.4rem; } /* ---------- Reveal system (content visible by default; entrance only with JS) ---------- */ .reveal { } html.js .reveal { opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease-expo), transform .8s var(--ease-expo); } html.js .reveal.in { opacity:1; transform:none; } html.js .reveal.d1{ transition-delay:.09s; } html.js .reveal.d2{ transition-delay:.18s; } html.js .reveal.d3{ transition-delay:.27s; } html.js .reveal.d4{ transition-delay:.36s; } @media (prefers-reduced-motion: reduce){ html.js .reveal{ opacity:1 !important; transform:none !important; transition:none; } } /* ---------- Marquee (tools they already use) ---------- */ .marquee { overflow:hidden; border-block:1px solid var(--steel-line); background: var(--ink-2); padding-block:1.4rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); } .marquee__row { display:flex; gap:3.5rem; width:max-content; animation: marquee 34s linear infinite; } .marquee__row:hover { animation-play-state: paused; } .marquee__item { display:inline-flex; align-items:center; gap:.7rem; color: var(--concrete-2); font-family: var(--display); font-weight:600; font-size:1.25rem; white-space:nowrap; letter-spacing:-.01em; } .marquee__item .dot { width:7px; height:7px; border-radius:50%; background: var(--amber); } @keyframes marquee { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce){ .marquee__row{ animation:none; } } /* ---------- Counters / stat band ---------- */ .stats { display:grid; gap:clamp(24px,4vw,40px); } .stat__num { font-family: var(--display); font-weight:700; font-size: clamp(2.6rem,6vw,4rem); line-height:1; color: var(--amber-hi); letter-spacing:-.03em; } .stat__label { color: var(--concrete-2); margin-top:.6rem; font-size:.98rem; max-width: 26ch; } /* ---------- Device mockup (outcome = product as hero) ---------- */ .phone { width: 290px; max-width: 78vw; aspect-ratio: 295/600; background: linear-gradient(160deg, var(--steel), var(--ink)); border-radius: 38px; padding: 11px; box-shadow: var(--shadow-lg); border:1px solid var(--steel-line); position:relative; } .phone::before { content:""; position:absolute; top:16px; left:50%; transform:translateX(-50%); width:42%; height:22px; background: var(--ink); border-radius:0 0 14px 14px; z-index:3; } .phone__screen { width:100%; height:100%; background: var(--paper); border-radius:28px; overflow:hidden; position:relative; display:flex; flex-direction:column; } /* ---------- Feature row (alternating text + visual — breaks the card grid) ---------- */ .frow { display:grid; gap:clamp(28px,5vw,72px); align-items:center; } .frow + .frow { margin-top: clamp(56px,8vw,120px); } .frow__media { display:grid; place-items:center; } .frow__tag { font-family:var(--display); font-weight:600; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color: var(--amber-2); margin-bottom:1rem; } .section--ink .frow__tag, .section--asphalt .frow__tag { color: var(--amber-hi); } .frow h3 { font-size: var(--step-2); margin-bottom:1rem; letter-spacing:-.02em; } .frow p { color: var(--concrete); max-width: 46ch; margin-bottom:1.4rem; } .section--ink .frow p, .section--asphalt .frow p { color: var(--concrete-2); } .frow__win { display:inline-flex; align-items:center; gap:.6rem; font-family:var(--display); font-weight:600; color: var(--amber); } .section--ink .frow__win, .section--asphalt .frow__win { color: var(--amber-hi); } /* ---------- Image treatment (graded for cohesion) ---------- */ .img-graded { position:relative; overflow:hidden; border-radius: var(--radius-lg); } .img-graded img { width:100%; height:100%; object-fit:cover; filter: saturate(.82) contrast(1.06); } .img-graded::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 40%, color-mix(in oklch, var(--ink) 55%, transparent)); mix-blend-mode: multiply; } .img-duotone img { filter: grayscale(1) contrast(1.12) brightness(.95); } .img-duotone::before { content:""; position:absolute; inset:0; z-index:1; background: color-mix(in oklch, var(--amber) 22%, transparent); mix-blend-mode: color; } /* ---------- Responsive (mobile-first) ---------- */ @media (min-width: 600px){ .stats{ grid-template-columns: repeat(2,1fr);} } @media (min-width: 900px){ .nav { display:flex; } .head-cta{ display:inline-flex; } .burger{ display:none; } .mobile-nav{ display:none; } .stats { grid-template-columns: repeat(4,1fr); } .frow { grid-template-columns: 1fr 1fr; } .frow--reverse .frow__media { order: -1; } } /* ============================================================================ COMPONENTS ============================================================================ */ /* ---------- HERO (full-bleed graded photo, editorial, asymmetric) ---------- */ .hero { position: relative; color: var(--paper); background: var(--ink); overflow: hidden; min-height: 92vh; display: flex; align-items: center; } .hero__bg { position:absolute; inset:0; z-index:0; overflow:hidden; } .hero__bg img { width:100%; height:120%; object-fit:cover; filter: saturate(.72) contrast(1.08) brightness(.62); will-change: transform; transform: translate3d(0,0,0) scale(1.08); } /* Subtle hero background video — desktop + motion-ok only; the poster image stays the mobile / reduced-motion / fallback layer beneath it. Graded to match the photo so it reads subtle under the copy; the grade overlay (.hero__bg::after) renders above it. */ .hero__vid { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:58% center; filter: saturate(.72) contrast(1.08) brightness(.6); opacity:0; transition: opacity .9s var(--ease-smooth); pointer-events:none; } .hero__bg.video-on .hero__vid { opacity:1; } .hero__bg::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, color-mix(in oklch, var(--ink) 38%, transparent) 0%, color-mix(in oklch, var(--ink) 30%, transparent) 40%, color-mix(in oklch, var(--ink) 88%, transparent) 100%), linear-gradient(90deg, color-mix(in oklch, var(--ink) 82%, transparent) 0%, transparent 62%); } .hero .wrap { position: relative; z-index: 2; width: 100%; padding-block: clamp(110px, 16vh, 180px) clamp(64px, 9vh, 110px); } .hero__grid { display: grid; gap: clamp(40px, 6vw, 72px); align-items: center; } .hero__badge { display:inline-flex; align-items:center; gap:.6rem; background: color-mix(in oklch, var(--amber) 14%, transparent); border:1px solid color-mix(in oklch, var(--amber) 42%, transparent); color: var(--amber-hi); font-family: var(--display); font-weight:600; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; padding:.55rem 1rem; border-radius:100px; margin-bottom:1.8rem; } .hero__badge .dot { width:8px; height:8px; border-radius:50%; background: var(--amber-hi); box-shadow:0 0 0 4px color-mix(in oklch, var(--amber-hi) 22%, transparent); } .hero h1 { margin-bottom: 1.6rem; max-width: 15ch; } .hero h1 .line { display:block; overflow:hidden; } .hero h1 .line > span { display:block; } html.js .hero h1 .line > span { transform: translateY(110%); transition: transform .9s var(--ease-expo); } html.js .hero.lit h1 .line > span { transform: none; } .hero h1 .line:nth-child(2) > span { transition-delay:.08s; } .hero h1 .line:nth-child(3) > span { transition-delay:.16s; } @media (prefers-reduced-motion: reduce){ html.js .hero h1 .line > span { transform:none !important; } } .hero__lede { font-size: var(--step-1); color: var(--concrete-2); max-width: 50ch; line-height:1.5; margin-bottom: 2.3rem; } .hero__cta { display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom: 2.2rem; } .hero__founding { display:inline-flex; align-items:center; gap:.6rem; font-size:.94rem; color: var(--concrete-2); } .hero__founding b { color: var(--amber-hi); font-family: var(--display); font-weight:600; } .hero__founding .pulse { width:9px; height:9px; border-radius:50%; background: var(--amber-hi); animation: pulse 2.4s infinite; flex:none; } @keyframes pulse { 0%{box-shadow:0 0 0 0 color-mix(in oklch, var(--amber-hi) 50%, transparent);} 70%{box-shadow:0 0 0 11px transparent;} 100%{box-shadow:0 0 0 0 transparent;} } @media (prefers-reduced-motion: reduce){ .hero__founding .pulse, .hero__badge .dot { animation:none; } } .hero__visual { display:flex; justify-content:center; } /* ---------- Device screen UIs (outcome = product-as-hero) ---------- */ .screen { display:flex; flex-direction:column; height:100%; background: var(--paper); font-family: var(--body); } .screen__bar { background: var(--ink); color: var(--paper); padding: 30px 18px 14px; display:flex; align-items:center; gap:.5rem; font-weight:700; font-size:.8rem; } .screen__bar .dot { width:8px; height:8px; border-radius:50%; background: var(--amber); } .screen__body { padding: 16px; display:flex; flex-direction:column; gap:11px; flex:1; } .scard { background: var(--white); border:1px solid var(--paper-line); border-radius: 12px; padding: 13px; } .scard--amber { background: var(--ink); color: var(--paper); border:none; } .scard__top { display:flex; align-items:center; gap:8px; font-size:.72rem; color: var(--concrete); margin-bottom:6px; font-weight:600; } .scard--amber .scard__top { color: var(--amber-hi); } .scard__ico { width:26px; height:26px; border-radius:50%; background: var(--amber); color: var(--ink); display:grid; place-items:center; font-weight:800; flex:none; font-size:.78rem; } .scard__big { font-family: var(--display); font-weight:700; font-size:1rem; letter-spacing:-.01em; line-height:1.15; } .scard__sub { font-size:.74rem; color: var(--concrete); margin-top:3px; } .scard--amber .scard__sub { color: var(--concrete-2); } .scard__row { display:flex; justify-content:space-between; align-items:center; font-size:.76rem; padding:5px 0; border-top:1px dashed var(--paper-line); } .scard__row:first-of-type { border-top:none; } .scard__row b { font-family: var(--display); } .spill { display:inline-block; font-size:.66rem; font-weight:700; padding:2px 8px; border-radius:100px; background: var(--success-bg); color:#15723f; } .spill--amber { background: var(--amber-soft); color: var(--amber-2); } /* Take-off output card (plans -> quantities) */ .takeoff { width: 340px; max-width: 84vw; background: var(--white); border:1px solid var(--paper-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow:hidden; } .takeoff__head { background: var(--ink); color: var(--paper); padding: 16px 18px; display:flex; align-items:center; justify-content:space-between; font-family: var(--display); font-weight:600; font-size:.92rem; } .takeoff__head .tag { font-size:.66rem; color: var(--amber-hi); letter-spacing:.1em; } .takeoff__body { padding: 6px 18px 16px; } .takeoff__row { display:grid; grid-template-columns: 1fr auto; gap:8px; padding:11px 0; border-bottom:1px solid var(--paper-line); align-items:center; } .takeoff__row:last-child { border-bottom:none; } .takeoff__row .t { font-weight:600; font-size:.9rem; } .takeoff__row .s { font-size:.74rem; color: var(--concrete); } .takeoff__row .q { font-family: var(--display); font-weight:700; color: var(--ink); font-size:1.02rem; } /* ---------- Promise bar ---------- */ .promise { background: var(--asphalt); border-top:1px solid var(--steel-line); border-bottom:1px solid var(--steel-line); } .promise__row { display:flex; flex-wrap:wrap; gap:.7rem 1.6rem; justify-content:center; align-items:center; padding-block:1.1rem; } .promise__item { display:inline-flex; align-items:center; gap:.55rem; color: var(--paper); font-family: var(--display); font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:.82rem; } .promise__item .tick { color: var(--amber); font-weight:800; } .promise__sep { color: var(--concrete); display:none; } @media(min-width:820px){ .promise__sep{ display:inline; } } /* ---------- Pain (editorial: photo + ordered list) ---------- */ .pain-grid { display:grid; gap: clamp(40px,6vw,72px); align-items:center; } .pain-media { position: relative; } .pain-media .img-graded { aspect-ratio: 4/5; box-shadow: var(--shadow-lg); } .pain-media__tag { position:absolute; left:-14px; bottom:24px; background: var(--amber); color: var(--ink); font-family: var(--display); font-weight:700; padding:.8rem 1.1rem; border-radius: 8px; max-width: 64%; box-shadow: var(--shadow-md); font-size:.96rem; line-height:1.2; } .pain-list { display:grid; gap: 0; } .pain-item { display:grid; grid-template-columns: auto 1fr; gap: 1.1rem; padding: 1.25rem 0; border-top:1px solid var(--paper-line); align-items:start; } .pain-item:last-child { border-bottom:1px solid var(--paper-line); } .pain-item .n { font-family: var(--display); font-weight:700; color: var(--amber-2); font-size:1.05rem; line-height:1.4; } .pain-item h3 { font-size: var(--step-1); margin-bottom:.3rem; letter-spacing:-.01em; } .pain-item p { color: var(--concrete); font-size: 1rem; } /* ---------- Pillars (elevated) ---------- */ .pillars { display:grid; gap: clamp(20px,3vw,28px); } .pillar { background: color-mix(in oklch, var(--steel) 60%, var(--ink)); border:1px solid var(--steel-line); border-radius: var(--radius-lg); padding: clamp(30px,4vw,44px); position:relative; overflow:hidden; transition: transform .35s var(--ease-expo), border-color .35s; } .pillar:hover { transform: translateY(-5px); border-color: color-mix(in oklch, var(--amber) 55%, transparent); } .pillar__n { font-family: var(--display); font-weight:700; font-size:.9rem; color: var(--amber-hi); letter-spacing:.1em; margin-bottom:1.6rem; } .pillar h3 { color: var(--white); font-size: var(--step-1); margin-bottom:.9rem; } .pillar p { color: var(--concrete-2); } .pillar::after { content:""; position:absolute; right:-40px; bottom:-40px; width:130px; height:130px; border-radius:50%; background: radial-gradient(circle, color-mix(in oklch, var(--amber) 30%, transparent), transparent 70%); } /* ---------- Steps (designed stepper) ---------- */ .steps { display:grid; gap: clamp(18px,2.5vw,24px); } .step { display:grid; grid-template-columns: auto 1fr auto; gap: clamp(18px,3vw,40px); align-items:center; background: var(--white); border:1px solid var(--paper-line); border-radius: var(--radius-lg); padding: clamp(26px,3.4vw,40px); position:relative; transition: box-shadow .3s, transform .3s var(--ease-expo); } .step:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } .step::before { content:""; position:absolute; left:0; top:18px; bottom:18px; width:5px; border-radius:5px; background: linear-gradient(var(--amber), var(--amber-2)); } .step__no { font-family: var(--display); font-weight:700; font-size: clamp(2.4rem,6vw,3.6rem); line-height:.85; color: var(--paper-2); -webkit-text-stroke: 2px var(--amber); padding-left: 1rem; } .step__price { font-family: var(--display); font-weight:700; font-size: var(--step-2); } .step__price small { font-family: var(--body); font-weight:600; font-size:.42em; color: var(--concrete); letter-spacing:.01em; } .step h3 { font-size: var(--step-1); margin:.2rem 0 .7rem; letter-spacing:-.01em; } .step p { color: var(--concrete); margin-bottom: 1rem; max-width: 52ch; } .step__win { display:inline-flex; align-items:center; gap:.5rem; background: var(--success-bg); color:#15723f; font-weight:600; font-size:.92rem; padding:.55rem .9rem; border-radius: 6px; } .step__win::before { content:"✓"; font-weight:800; } /* ---------- Secondary deployment grid (the rest of the menu) ---------- */ .dgrid { display:grid; gap: clamp(16px,2vw,20px); } .dcard { background: var(--asphalt); border:1px solid var(--steel-line); border-radius: var(--radius-md); padding: clamp(22px,3vw,30px); transition: transform .3s var(--ease-expo), border-color .3s; } .dcard:hover { transform: translateY(-4px); border-color: color-mix(in oklch, var(--amber) 50%, transparent); } .dcard__tag { font-family: var(--display); font-weight:700; font-size:.72rem; letter-spacing:.12em; color: var(--amber-hi); text-transform:uppercase; } .dcard h4 { color: var(--white); font-size:1.12rem; line-height:1.2; margin:.8rem 0 .6rem; letter-spacing:-.01em; } .dcard p { color: var(--concrete-2); font-size:.95rem; } .dcard--wild { background: linear-gradient(150deg, var(--amber-2), var(--amber)); border:none; } .dcard--wild .dcard__tag { color: color-mix(in oklch, var(--ink) 70%, transparent); } .dcard--wild h4 { color: var(--ink); } .dcard--wild p { color: color-mix(in oklch, var(--ink) 82%, transparent); } /* ---------- Contrast (what we're not / are) ---------- */ .contrast { display:grid; gap: clamp(18px,3vw,24px); margin-top: clamp(8px,2vw,20px); } .contrast__card { border-radius: var(--radius-lg); padding: clamp(28px,3.6vw,40px); border:1px solid var(--paper-line); } .contrast__card h3 { font-size: var(--step-1); margin-bottom:1.2rem; } .contrast__card ul { display:grid; gap:.85rem; } .contrast__card li { display:grid; grid-template-columns:auto 1fr; gap:.7rem; align-items:start; } .contrast--not { background: var(--white); } .contrast--not h3 { color: var(--danger); } .contrast--not li { color: var(--concrete); } .contrast--not li::before { content:"✕"; color: var(--danger); font-weight:800; } .contrast--are { background: var(--ink); color: var(--paper); border-color: var(--steel-line); } .contrast--are h3 { color: var(--amber-hi); } .contrast--are li { color: var(--concrete-2); } .contrast--are li::before { content:"✓"; color: var(--amber); font-weight:800; } /* ---------- Founders (with photo support) ---------- */ .founders { display:grid; gap: clamp(18px,2.6vw,24px); margin-top: clamp(40px,5vw,64px); } .founder { background: var(--white); border:1px solid var(--paper-line); border-radius: var(--radius-lg); overflow:hidden; transition: transform .3s var(--ease-expo), box-shadow .3s; } .founder:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .founder__photo { aspect-ratio: 4/3; background: var(--ink); position:relative; overflow:hidden; } .founder__photo img { width:100%; height:100%; object-fit:cover; filter: grayscale(.3) contrast(1.05); } .founder__photo--mono { display:grid; place-items:center; background: radial-gradient(circle at 40% 30%, var(--steel), var(--ink)); } .founder__photo--mono span { font-family: var(--display); font-weight:700; font-size:2.4rem; color: var(--amber); letter-spacing:-.03em; } .founder__b { padding: clamp(20px,2.6vw,26px); } .founder h4 { font-family: var(--display); font-size:1.2rem; margin-bottom:.15rem; } .founder .role { color: var(--amber-2); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:.7rem; } .founder p { color: var(--concrete); font-size:.95rem; } .local-line { display:flex; align-items:center; gap:.7rem; margin-top:1.5rem; font-weight:600; color: var(--amber-2); font-family:var(--display); text-transform:uppercase; letter-spacing:.04em; font-size:.92rem; } .local-line::before { content:""; width:14px; height:14px; background:var(--amber); border-radius:50%; flex:none; box-shadow:0 0 0 4px var(--amber-soft); } .local-line a { color: inherit; text-decoration: none; border-bottom: 1px solid color-mix(in oklch, currentColor 45%, transparent); transition: border-color .2s; } .local-line a:hover { border-bottom-color: currentColor; } /* ---------- Guarantee ---------- */ .guarantee { display:grid; gap: clamp(28px,4vw,56px); align-items:center; } .guarantee__seal { width: clamp(160px,42vw,220px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center; text-align:center; background: radial-gradient(circle at 50% 38%, var(--steel), var(--ink)); border:3px solid var(--amber); color: var(--paper); font-family: var(--display); font-weight:700; text-transform:uppercase; padding:1.4rem; margin-inline:auto; box-shadow: 0 0 60px -20px var(--amber-glow); } .guarantee__seal b { display:block; font-size:2.8rem; color: var(--amber-hi); line-height:1; } .guarantee__seal span { font-size:.72rem; letter-spacing:.14em; color: var(--concrete-2); } .guarantee ul { display:grid; gap:1.1rem; margin-top:1.5rem; } .guarantee li { display:grid; grid-template-columns:auto 1fr; gap:.9rem; align-items:start; } .guarantee li .tick { width:28px; height:28px; flex:none; display:grid; place-items:center; background: var(--amber); color: var(--ink); border-radius:50%; font-weight:800; margin-top:2px; } .guarantee li strong { color: var(--white); } /* ---------- FAQ ---------- */ .faq { display:grid; gap:1rem; max-width: 820px; } .qa { background: var(--white); border:1px solid var(--paper-line); border-radius: var(--radius-md); overflow:hidden; transition: border-color .25s; } .qa[open] { border-color: color-mix(in oklch, var(--amber) 50%, transparent); } .qa summary { list-style:none; cursor:pointer; padding: clamp(20px,3vw,26px); display:flex; justify-content:space-between; align-items:center; gap:1rem; font-family: var(--display); font-weight:600; font-size: var(--step-0); } .qa summary::-webkit-details-marker { display:none; } .qa summary .pm { flex:none; width:30px; height:30px; display:grid; place-items:center; background: var(--paper-2); border-radius:50%; font-weight:800; color: var(--amber-2); transition: transform .25s var(--ease-spring), background .2s; font-size:1.2rem; } .qa[open] summary .pm { transform: rotate(135deg); background: var(--amber); color: var(--ink); } .qa__a { padding: 0 clamp(20px,3vw,26px) clamp(22px,3vw,26px); color: var(--concrete); } .qa__a p + p { margin-top:.8rem; } /* ---------- Booking / form ---------- */ .book-grid { display:grid; gap: clamp(32px,5vw,56px); } .form-card { background: var(--white); border:1px solid var(--paper-line); border-radius: var(--radius-lg); padding: clamp(26px,3.6vw,40px); box-shadow: var(--shadow-lg); } .form-card h3 { font-size: var(--step-1); margin-bottom:.4rem; } .form-card .sub { color: var(--concrete); margin-bottom:1.6rem; } .field { margin-bottom:1.1rem; } .field label { display:block; font-weight:600; font-size:.92rem; margin-bottom:.45rem; } .field input, .field textarea { width:100%; font:inherit; padding:15px 16px; border:2px solid var(--paper-line); border-radius: var(--radius); background: var(--paper); color: var(--ink); transition: border-color .2s, background .2s; } .field input:focus, .field textarea:focus { border-color: var(--amber); outline:none; background: var(--white); box-shadow: 0 0 0 3px color-mix(in oklch, var(--amber) 32%, transparent); } .field textarea { min-height:110px; resize:vertical; } .field--hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .form-note { font-size:.84rem; color: var(--concrete); margin-top:1rem; text-align:center; } .form-msg { padding:1rem 1.1rem; border-radius: var(--radius); font-weight:600; margin-top:1rem; display:none; } .form-msg.show { display:block; } .form-msg.ok { background: var(--success-bg); color:#0f5c3a; border:1px solid color-mix(in oklch, var(--success) 40%, white); } .form-msg.err { background: color-mix(in oklch, var(--danger) 14%, white); color: var(--danger); border:1px solid color-mix(in oklch, var(--danger) 36%, white); } /* ---------- Footer ---------- */ .foot { background: var(--ink); color: var(--concrete-2); padding-block: clamp(56px,8vw,90px) 2rem; } .foot__cta { display:grid; gap:1.6rem; align-items:center; padding-bottom: clamp(40px,6vw,64px); margin-bottom: clamp(40px,5vw,56px); border-bottom:1px solid var(--steel-line); } .foot__cta h2 { color: var(--paper); font-size: var(--step-3); max-width: 16ch; } .foot__top { display:grid; gap:2rem; padding-bottom:2.4rem; border-bottom:1px solid var(--steel-line); } .foot__brand p { max-width:36ch; margin-top:1rem; color: var(--concrete); font-size:.96rem; } .foot__cols { display:grid; grid-template-columns:1fr 1fr; gap:2rem; } .foot h4 { font-family: var(--display); color: var(--paper); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:1rem; } .foot a { color: var(--concrete-2); display:block; padding:.32rem 0; font-size:.98rem; transition: color .2s; } .foot a:hover { color: var(--amber-hi); } .foot__bottom { display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; justify-content:space-between; padding-top:1.8rem; font-size:.86rem; } /* ---------- Mobile sticky action bar ---------- */ .callbar { position: fixed; left:0; right:0; bottom:0; z-index:45; display:flex; gap:.6rem; padding:.7rem var(--gutter); background: color-mix(in oklch, var(--ink) 95%, transparent); backdrop-filter: blur(10px); border-top:2px solid var(--amber); transform: translateY(115%); transition: transform .35s var(--ease-quart); } .callbar.show { transform:none; } .callbar .btn { flex:1; min-height:54px; padding:14px 14px; font-size:1rem; } .callbar .btn--call { flex:0 0 54px; padding:14px; } /* ---------- Component responsive ---------- */ @media (min-width: 760px){ .pain-list { grid-template-columns: 1fr; } } @media (min-width: 900px){ .hero__grid { grid-template-columns: 1.05fr .95fr; } .promise__sep { display:inline; } .pain-grid { grid-template-columns: .9fr 1.1fr; } .pillars { grid-template-columns: repeat(3,1fr); } .dgrid { grid-template-columns: repeat(3,1fr); } .contrast { grid-template-columns: 1fr 1fr; } .founders { grid-template-columns: repeat(3,1fr); } .guarantee { grid-template-columns: auto 1fr; } .book-grid { grid-template-columns: 1fr 1fr; align-items:start; } .foot__cta { grid-template-columns: 1.5fr auto; } .foot__top { grid-template-columns: 1.4fr 1fr; } .callbar { display:none; } } @media (min-width: 1100px){ .dgrid { grid-template-columns: repeat(3,1fr); } } /* ============================================================================ ITERATION 1 — above-the-fold first screen, header legibility, fixes ============================================================================ */ /* Header: fixed overlay + permanent dark scrim so logo/nav are always legible */ .site-head { position: fixed; top: 0; left: 0; right: 0; background: linear-gradient(to bottom, color-mix(in oklch, var(--ink) 84%, transparent), color-mix(in oklch, var(--ink) 30%, transparent) 55%, transparent); } .site-head.scrolled { background: color-mix(in oklch, var(--ink) 92%, transparent); } /* Anchor jumps clear the fixed header */ [id] { scroll-margin-top: 88px; } /* First screen: hero + promise + marquee all within one viewport, scaling to fit */ .firstscreen { min-height: 100svh; display: flex; flex-direction: column; } .hero { min-height: 0; flex: 1 1 auto; } .hero .wrap { padding-block: clamp(94px, 13vh, 134px) clamp(16px, 3vh, 38px); } .hero__copy { max-width: 62ch; } .hero__badge { margin-bottom: clamp(.85rem, 2.1vh, 1.5rem); } .hero h1 { margin-bottom: clamp(.85rem, 2.3vh, 1.4rem); } .hero__lede { margin-bottom: clamp(1rem, 2.7vh, 1.9rem); } .hero__cta { margin-bottom: clamp(1rem, 2.5vh, 1.8rem); } .promise__row { padding-block: clamp(.65rem, 1.5vh, 1.05rem); } .marquee { padding-block: clamp(.75rem, 1.7vh, 1.3rem); } .marquee__item { font-size: clamp(1rem, 2.6vw, 1.25rem); } /* Balanced heading wrapping (kills the weird forced breaks) */ .h-sec { text-wrap: balance; } .lede { text-wrap: pretty; } .h-hero .line > span { white-space: nowrap; } /* Short / mobile screens: keep the whole first screen fitting */ @media (max-width: 560px){ .hero .wrap { padding-block: 80px 8px; } .hero h1 { font-size: 2.55rem; margin-bottom: .8rem; } .hero__badge { margin-bottom: .8rem; font-size: .72rem; padding: .45rem .8rem; } .hero__lede { font-size: .98rem; line-height: 1.4; margin-bottom: 1rem; } .hero__cta { gap: .6rem; margin-bottom: .9rem; } .hero__cta .btn--primary { width: 100%; min-height: 54px; padding: 14px 20px; } .hero__cta .btn--ghost { display: none; } .hero__founding { font-size: .86rem; } .promise__row { gap: .4rem .9rem; padding-block: .6rem; } .promise__item { font-size: .72rem; } .marquee { padding-block: .7rem; } .marquee__item { font-size: .96rem; gap: .5rem; } } @media (max-height: 720px) and (min-width: 561px){ .hero h1 { font-size: clamp(2.4rem, 5vh, 3.4rem); } } /* ============================================================================ ITERATION 2 — header button, pain, stat band, floor plan, seal, banner, footer ============================================================================ */ /* Header CTA: trimmer, doesn't crowd the header height */ .head-cta { padding: 11px 22px; min-height: 44px; font-size: .98rem; } /* Pain — make "their pain" lines obvious */ .pain-item h3 { color: var(--ink); } .pain-item p { color: var(--asphalt); font-size: clamp(1.04rem,1.6vw,1.18rem); font-weight: 500; line-height: 1.45; } /* Stat band — structured with hairline dividers (was floating/amateur) */ .stats { gap: 0; border-top: 1px solid var(--steel-line); } .stat { padding: clamp(26px,3.2vw,38px) clamp(14px,2.2vw,28px); border-bottom: 1px solid var(--steel-line); } .stat__label { text-transform: none; max-width: 24ch; } @media (min-width:600px){ .stat:nth-child(odd){ border-right: 1px solid var(--steel-line); } } @media (min-width:900px){ .stat { border-bottom: none; border-right: 1px solid var(--steel-line); } .stat:last-child { border-right: none; } } /* Centre the number + label within each stat cell once they sit side by side */ @media (min-width:600px){ .stat { text-align: center; } .stat__num { display: block; } .stat__label { margin-inline: auto; } } /* Floor-plan take-off card */ .floorplan { width: 420px; max-width: 88vw; background: var(--white); border: 1px solid var(--paper-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; } .floorplan__head { background: var(--ink); color: var(--paper); padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; font-family: var(--display); font-weight: 600; font-size: .92rem; } .floorplan__head .tag { font-size: .66rem; color: var(--amber-hi); letter-spacing: .1em; } .floorplan__svg { width: 100%; height: auto; display: block; } .floorplan__legend { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px 16px; background: var(--paper-2); border-top: 1px solid var(--paper-line); } .fp-chip { font-size: .8rem; color: var(--concrete); background: var(--white); border: 1px solid var(--paper-line); border-radius: 100px; padding: 5px 11px; } .fp-chip b { color: var(--ink); font-family: var(--display); font-weight: 700; } /* Money-back seal — the SVG is the badge */ .guarantee__seal { width: clamp(190px, 46vw, 252px); aspect-ratio: 1; background: none; border: none; box-shadow: none; padding: 0; border-radius: 0; display: block; filter: drop-shadow(0 16px 40px rgba(0,0,0,.35)); } .guarantee__seal svg { width: 100%; height: 100%; display: block; } /* Who-turns-up team banner */ .who-banner { margin: clamp(8px,2vw,20px) 0 clamp(36px,5vw,56px); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--paper-line); box-shadow: var(--shadow-lg); } .who-banner img { width: 100%; height: auto; display: block; } /* Footer CTA — centred conversion band */ .foot__cta { display: block; text-align: center; padding: clamp(40px,6vw,76px) clamp(24px,4vw,48px); margin-bottom: clamp(44px,5vw,60px); border: 1px solid var(--steel-line); border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--ink-2), var(--ink)); } .foot__cta .eyebrow { color: var(--amber-hi); margin-bottom: 1.2rem; } .foot__cta h2 { color: var(--paper); font-size: var(--step-3); max-width: 20ch; margin: 0 auto 1rem; } .foot__cta p { color: var(--concrete-2); max-width: 46ch; margin: 0 auto 2rem; font-size: var(--step-0); } .foot__cta .btn { margin-inline: auto; } .foot__cta-note { display: block; margin-top: 1.4rem; color: var(--concrete); font-size: .86rem; letter-spacing: .03em; } /* footer's `.foot a` colour was bleeding into the CTA button — force ink on amber */ .foot .btn--primary, .foot .btn--primary:hover { color: var(--ink); } /* ============================================================================ ITERATION 3 — authority visuals: realistic quote + phone status bar ============================================================================ */ /* Footer CTA button: auto width, centred */ .foot__cta .btn--primary { display: inline-flex; width: auto; margin-inline: auto; } /* Phone: drop the notch, add a realistic dark status bar */ .phone::before { display: none; } .screen__status { background: var(--ink); color: var(--paper); display: flex; justify-content: space-between; align-items: center; padding: 9px 16px 4px; font-family: var(--display); font-weight: 700; font-size: .72rem; } .screen__sig { display: inline-flex; align-items: center; gap: 2px; } .screen__sig i { width: 3px; background: var(--paper); border-radius: 1px; display: inline-block; } .screen__sig i:nth-child(1){ height: 4px; } .screen__sig i:nth-child(2){ height: 6px; } .screen__sig i:nth-child(3){ height: 8px; } .screen__sig i:nth-child(4){ height: 10px; } .screen__sig b { width: 18px; height: 9px; border: 1.5px solid var(--paper); border-radius: 2px; margin-left: 5px; position: relative; display: inline-block; } .screen__sig b::after { content: ""; position: absolute; left: 1.5px; top: 1.5px; bottom: 1.5px; right: 6px; background: var(--paper); border-radius: 1px; } .screen__bar { padding: 7px 18px 13px; } /* Realistic quote document */ .quote { width: 384px; max-width: 88vw; background: var(--white); border: 1px solid var(--paper-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; font-family: var(--body); } .quote__head { display: flex; justify-content: space-between; align-items: flex-start; padding: 20px 22px 15px; border-bottom: 2px solid var(--ink); } .quote__biz { font-family: var(--display); font-weight: 700; font-size: 1.16rem; color: var(--ink); letter-spacing: -.01em; } .quote__sub { font-size: .7rem; color: var(--concrete); margin-top: 4px; } .quote__meta { text-align: right; } .quote__doc { font-family: var(--display); font-weight: 700; font-size: 1.12rem; color: var(--amber-2); letter-spacing: .1em; } .quote__no { font-size: .72rem; color: var(--concrete); margin-top: 3px; } .quote__to { padding: 11px 22px; background: var(--paper-2); font-size: .8rem; color: var(--ink); border-bottom: 1px solid var(--paper-line); } .quote__to span { color: var(--concrete); margin-right: 4px; } .quote__body { padding: 6px 22px 2px; } .quote__row { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--paper-line); font-size: .85rem; color: var(--asphalt); } .quote__row b { font-family: var(--display); font-weight: 600; white-space: nowrap; color: var(--ink); } .quote__totals { padding: 12px 22px 16px; } .quote__trow { display: flex; justify-content: space-between; padding: 4px 0; font-size: .84rem; color: var(--concrete); } .quote__trow span:last-child { font-family: var(--display); color: var(--ink); } .quote__trow--grand { margin-top: 6px; padding-top: 12px; border-top: 2px solid var(--ink); } .quote__trow--grand span { font-size: 1.02rem; font-weight: 700; font-family: var(--display); color: var(--ink); } .quote__trow--grand span:last-child { color: var(--amber-2); } .quote__foot { padding: 11px 22px; background: var(--ink); color: var(--concrete-2); font-size: .7rem; text-align: center; letter-spacing: .02em; } /* Hero friction-killer line (under the CTA) */ .hero__reassure { font-size: .86rem; opacity: .72; margin: 10px 0 2px; max-width: 36ch; color: var(--concrete-2); } /* Who turns up — founder cards under the banner (no avatars), contrast below */ .founders { margin-top: 0; } .founder { border-top: 3px solid var(--amber); } .contrast { margin-top: clamp(40px, 6vw, 68px); } /* ============================================================================ ITERATION 4 — mobile spacing dynamics ============================================================================ */ /* Tall + wide (desktop): centre the hero copy vertically in the space below the fixed header. Top padding ≈ header height so "centred" reads as centred between the header and the promise bar — not centred on the whole hero and half-buried under the nav. */ @media (min-height: 800px) and (min-width: 761px) { .hero { align-items: center; } .hero .wrap { padding-block: clamp(96px, 13vh, 132px) clamp(28px, 4vh, 52px); } } /* Tall + narrow (mobile portrait): bottom-anchor so the photo features up top instead of pooling dead space between the content and the promise bar. Short screens keep the centred, everything-above-the-fold behaviour. */ @media (min-height: 800px) and (max-width: 760px) { .hero { align-items: flex-end; } .hero .wrap { padding-block: 30px clamp(30px, 4.5vh, 56px); } } /* How it works on mobile: stack cleanly — step number sits by the heading, content runs full width, and the button drops below at full width. */ @media (max-width: 760px) { .step { display: block; padding: clamp(26px, 6vw, 34px) clamp(24px, 5.5vw, 32px); } .step::before { top: 16px; bottom: 16px; } .step__no { font-size: 2.3rem; line-height: 1; margin-bottom: 2px; padding-left: 0; } .step__price { margin-top: 4px; } .step h3 { margin-top: .5rem; } .step p { max-width: none; } .step .btn { display: flex; width: 100%; margin-top: 20px; } } /* New hero image — keep the builder in frame; feature him on mobile (he's on the right) */ .hero__bg img { object-position: 58% center; } @media (max-width: 760px) { .hero__bg img { object-position: 72% center; } } /* ============================================================================ ITERATION 5 — footer logo parity + footer CTA pill padding ============================================================================ */ /* The footer brand was inheriting `.foot a` (grey colour, display:block, .98rem, vertical padding) — making the logo look unlike the header. The markup is identical to the header; restore the header `.brand` treatment here. */ .foot .brand, .foot .brand:hover { color: var(--paper); display: flex; padding: 0; font-size: 1.3rem; } /* Footer CTA pill — wider, with even breathing room around the text */ .foot__cta .btn--primary { padding: 24px 56px; min-height: 0; } /* ============================================================================ ITERATION 6 — audit fixes: layout transparency ============================================================================ */ /* Images are wrapped in for WebP delivery. defaults to inline, which would break the width:100% fills on .hero__bg/.img-graded/ .who-banner imgs. display:contents removes from the box tree so the lays out as a direct child of its container, exactly as before. */ picture { display: contents; } /* ===== Book section — left column: two stacked detail modules beside the form. Cards are content-height with EVEN padding on all four sides (no stretch/centre-float). ===== */ .book-col-left { display:grid; gap: clamp(20px,2.6vw,28px); align-content: start; } .book-card { background: var(--white); border:1px solid var(--paper-line); border-radius: var(--radius-lg); padding: clamp(30px,3.4vw,42px); display:flex; flex-direction:column; } /* Top module — book a time with Matt (Cal.com) */ .book-meet__title { font-family: var(--display); font-size: var(--step-1); line-height: 1.1; margin-bottom: .6rem; } .book-meet__sub { color: var(--asphalt); } .book-meet__list { list-style: none; margin-top: 1.2rem; display: grid; gap: .65rem; } .book-meet__list li { position: relative; padding-left: 1.7rem; color: var(--asphalt); line-height: 1.4; } .book-meet__list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--amber-2); font-weight: 700; } .book-meet__cta { margin-top: 1.8rem; } .book-meet__cta .btn { width: 100%; } .book-meet .btn-ic { width: 20px; height: 20px; } .book-meet__note { font-size: .84rem; color: var(--concrete); margin-top: .9rem; text-align: center; } /* Bottom module — our details + socials */ .book-info__title { font-family: var(--display); font-size: var(--step-1); margin-bottom: 1.5rem; } .book-info__list { list-style: none; display: grid; gap: 1.2rem; } .book-info__list li { display: flex; align-items: flex-start; gap: .9rem; } .book-info__ic { width: 22px; height: 22px; flex: none; color: var(--amber-2); margin-top: 1px; } .book-info__list span, .book-info__list a { color: var(--asphalt); line-height: 1.45; } .book-info__list a { transition: color .2s; } .book-info__list a:hover { color: var(--amber-2); } .book-info__social { display: flex; gap: .6rem; margin-top: 1.8rem; padding-top: 1.6rem; border-top: 1px solid var(--paper-line); } .book-info__social a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius-pill); color: var(--ink); background: var(--paper-2); transition: color .2s var(--ease-smooth), background-color .2s var(--ease-smooth), transform .2s var(--ease-smooth); } .book-info__social svg { width: 20px; height: 20px; fill: currentColor; display: block; } .book-info__social a:hover { color: var(--amber-2); background: var(--amber-soft); transform: translateY(-2px); } /* ===== Case-study metric strip + pull quote ===== */ .cs-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:2rem 0 .8rem; } .cs-stats > div { border:1px solid rgba(240,130,28,.32); border-radius:14px; background:rgba(240,130,28,.06); padding:1.5rem 1.2rem; text-align:center; } .cs-stats__n { display:block; font-family:var(--display); font-weight:900; font-size:clamp(2rem,5vw,2.9rem); line-height:1; color:var(--amber); } .cs-stats__l { display:block; margin-top:.55rem; font-size:.92rem; line-height:1.35; color:var(--asphalt); } .cs-stats-note { font-size:.84rem; color:var(--concrete); margin:0 0 2rem; } @media (max-width:560px){ .cs-stats { grid-template-columns:1fr; } } .cs-quote { margin:2.2rem 0; padding:1.5rem 1.8rem; border-left:4px solid var(--amber); background:var(--paper-2); border-radius:0 12px 12px 0; } .cs-quote p { font-family:var(--display); font-weight:500; font-size:clamp(1.15rem,2.4vw,1.45rem); line-height:1.42; color:var(--ink); } .cs-quote cite { display:block; margin-top:1rem; font-style:normal; font-weight:700; font-size:.95rem; color:var(--asphalt); } /* Privacy collection-notice link under the form + guarantee terms link */ .form-note a, .guarantee__terms a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: color-mix(in oklch, currentColor 45%, transparent); transition: color .2s; } .form-note a:hover, .guarantee__terms a:hover { color: var(--amber-2); } .guarantee__terms { margin: 1.4rem 0 0; font-size: .92rem; } .guarantee__terms a { color: var(--concrete-2); } .guarantee__terms a:hover { color: var(--amber-hi); } /* ============================================================================ SUB-PAGES — shared shell for /privacy /terms /about /compare /case-studies ============================================================================ */ .subpage { background: var(--paper); } .subpage-head { position: sticky; top: 0; z-index: 50; background: color-mix(in oklch, var(--ink) 95%, transparent); backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid var(--steel-line); } .subpage-head .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 68px; gap: 1rem; } .subpage-head .brand { font-size: 1.2rem; } .subpage-head__r { display: inline-flex; gap: clamp(.8rem,2vw,1.4rem); align-items: center; } .subpage-back { color: var(--concrete-2); font-family: var(--display); font-weight: 600; font-size: .92rem; white-space: nowrap; } .subpage-back:hover { color: var(--amber-hi); } .subpage-head .btn { min-height: 46px; padding: 11px 22px; font-size: .98rem; } .subhero { background: var(--ink); color: var(--paper); padding: clamp(40px,7vw,84px) 0 clamp(32px,5vw,56px); position: relative; overflow: hidden; } .subhero .wrap { position: relative; z-index: 1; } .subhero .eyebrow { color: var(--amber-hi); } .subhero h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 1.4rem + 3.4vw, 3.5rem); line-height: 1.04; letter-spacing: -.02em; max-width: 22ch; margin: .55rem 0 0; } .subhero .lede { color: var(--concrete-2); max-width: 60ch; margin: 1.1rem 0 0; font-size: var(--step-1); line-height: 1.5; } .subwrap { padding: clamp(40px,6vw,76px) 0 clamp(24px,4vw,40px); } .doc { max-width: 760px; margin: 0 auto; } .doc__meta { color: var(--concrete); font-size: .9rem; margin: 0 0 2rem; } .doc h2 { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: clamp(1.3rem,1.1rem + 1vw,1.7rem); margin: 2.4rem 0 .7rem; } .doc h3 { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 1.1rem; margin: 1.6rem 0 .4rem; } .doc p, .doc li { color: var(--asphalt); line-height: 1.66; font-size: 1.02rem; } .doc p { margin: 0 0 1rem; } .doc ul { margin: 0 0 1.2rem; padding-left: 1.25rem; } .doc li { margin: 0 0 .5rem; } .doc a { color: var(--amber-2); text-decoration: underline; text-underline-offset: 2px; } .doc__note { background: color-mix(in oklch, var(--amber) 9%, var(--white)); border: 1px solid color-mix(in oklch, var(--amber) 28%, transparent); border-radius: var(--radius-md); padding: 1rem 1.2rem; font-size: .96rem; color: var(--asphalt); margin: 0 0 1.6rem; } .doc__note p:last-child { margin-bottom: 0; } /* Comparison page */ .cmp { max-width: 940px; margin: 0 auto; } .verdict { background: var(--white); border: 1px solid var(--paper-line); border-left: 4px solid var(--amber); border-radius: var(--radius-md); padding: clamp(20px,3vw,28px); margin: 0 0 2.2rem; color: var(--asphalt); line-height: 1.6; } .verdict strong { font-family: var(--display); color: var(--ink); } .tldr { background: var(--ink); color: var(--paper); border-radius: var(--radius-lg); padding: clamp(22px,3.5vw,34px); margin: 0 0 2.4rem; } .tldr h2 { color: var(--amber-hi); font-size: .82rem; text-transform: uppercase; letter-spacing: .09em; margin: 0 0 .7rem; font-family: var(--display); } .tldr p { color: var(--concrete-2); line-height: 1.6; margin: 0; font-size: 1.06rem; } .cmp-table-wrap { overflow-x: auto; margin: 0 0 1rem; border: 1px solid var(--paper-line); border-radius: var(--radius-md); -webkit-overflow-scrolling: touch; } .cmp-table { width: 100%; border-collapse: collapse; min-width: 580px; font-size: .95rem; background: var(--white); } .cmp-table th, .cmp-table td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--paper-line); vertical-align: top; line-height: 1.45; color: var(--asphalt); } .cmp-table thead th { background: var(--paper-2); font-family: var(--display); font-weight: 700; color: var(--ink); } .cmp-table tbody th { font-weight: 600; color: var(--concrete); font-size: .9rem; } .cmp-table .col-fkd { background: var(--success-bg); color: var(--ink); } .cmp-table thead .col-fkd { background: var(--ink); color: var(--paper); } /* Green tick on every FKD body cell — signals the winning column. Header stays charcoal (no tick). */ .cmp-table td.col-fkd::before { content: "✓ "; color: #15723f; font-weight: 900; } .cmp-note { color: var(--concrete); font-size: .86rem; margin: 0 0 2.4rem; } .cmp-cols { display: grid; gap: clamp(18px,3vw,28px); grid-template-columns: 1fr; margin: 2.2rem 0; } @media (min-width: 720px){ .cmp-cols { grid-template-columns: 1fr 1fr; } } .cmp-col { background: var(--white); border: 1px solid var(--paper-line); border-radius: var(--radius-md); padding: clamp(20px,3vw,26px); } .cmp-col h3 { font-family: var(--display); font-weight: 700; color: var(--ink); margin: 0 0 .9rem; font-size: 1.12rem; } .cmp-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; } .cmp-col li { position: relative; padding-left: 1.6rem; color: var(--asphalt); line-height: 1.5; } .cmp-col.win { border-top: 3px solid var(--success); } .cmp-col.win li::before { content: "✓"; position: absolute; left: 0; color: #15723f; font-weight: 700; } .cmp-col.lose li::before { content: "→"; position: absolute; left: 0; color: var(--concrete); font-weight: 700; } /* About founders */ .about-founders { display: grid; gap: clamp(18px,3vw,28px); grid-template-columns: 1fr; margin: 2rem 0; } @media (min-width: 760px){ .about-founders { grid-template-columns: repeat(3,1fr); } } .about-founder { background: var(--white); border: 1px solid var(--paper-line); border-top: 3px solid var(--amber); border-radius: var(--radius-md); padding: clamp(20px,3vw,28px); } .about-founder h3 { font-family: var(--display); font-weight: 700; color: var(--ink); margin: 0 0 .15rem; } .about-founder .role { color: var(--amber-2); font-weight: 600; font-size: .88rem; font-family: var(--display); margin: 0 0 .8rem; } .about-founder p { color: var(--asphalt); line-height: 1.55; font-size: .97rem; margin: 0; } /* FAQ on sub-pages (reuses .qa look, standalone) */ .subfaq { max-width: 760px; margin: clamp(36px,5vw,56px) auto 0; } .subfaq h2 { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: clamp(1.3rem,1.1rem + 1vw,1.7rem); margin: 0 0 1.2rem; } .subfaq details { border-bottom: 1px solid var(--paper-line); } .subfaq summary { list-style: none; cursor: pointer; padding: 1.1rem 0; display: flex; justify-content: space-between; gap: 1rem; font-family: var(--display); font-weight: 600; color: var(--ink); } .subfaq summary::-webkit-details-marker { display: none; } .subfaq summary .pm { color: var(--amber-2); } .subfaq details[open] summary .pm { transform: rotate(45deg); } .subfaq .qa__a { padding: 0 0 1.1rem; } .subfaq .qa__a p { color: var(--asphalt); line-height: 1.6; margin: 0 0 .8rem; } /* Sub-page CTA band + footer */ .cta-band { background: var(--ink); color: var(--paper); border-radius: var(--radius-lg); text-align: center; padding: clamp(36px,6vw,60px) clamp(24px,4vw,48px); margin: clamp(40px,6vw,72px) auto 0; max-width: 860px; } .cta-band h2 { font-family: var(--display); color: var(--paper); font-size: clamp(1.5rem,1.1rem + 2vw,2.2rem); margin: 0 0 1rem; } .cta-band p { color: var(--concrete-2); max-width: 48ch; margin: 0 auto 1.6rem; line-height: 1.5; } .subfoot { background: var(--ink); color: var(--concrete-2); padding: clamp(40px,6vw,60px) 0 clamp(26px,4vw,38px); margin-top: clamp(40px,6vw,72px); } .subfoot__grid { display: grid; gap: clamp(24px,4vw,40px); grid-template-columns: 1fr; } @media (min-width: 760px){ .subfoot__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } } .subfoot__brand p { color: var(--concrete); max-width: 34ch; margin: .9rem 0 0; font-size: .92rem; line-height: 1.5; } .subfoot__col h4 { color: var(--paper); font-family: var(--display); font-size: .8rem; text-transform: uppercase; letter-spacing: .09em; margin: 0 0 .7rem; } .subfoot__col a { display: block; color: var(--concrete-2); padding: .3rem 0; font-size: .94rem; transition: color .2s; } .subfoot__col a:hover { color: var(--amber-hi); } .subfoot__bottom { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between; margin-top: clamp(26px,4vw,40px); padding-top: 1.5rem; border-top: 1px solid var(--steel-line); font-size: .85rem; color: var(--concrete); } /* Home footer expanded to 4 link columns for the new sub-pages */ @media (min-width: 700px) { .foot__top { grid-template-columns: 1.3fr 2.2fr; } .foot__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ============================================================================ ITERATION 7 — Lenis momentum smooth-scroll + FAQ open animation Lenis added from the GODN web-design-stack (verified). Momentum wheel/trackpad scroll that native `scroll-behavior:smooth` (anchor-only) can't provide. The .lenis-* rules are Lenis's required stylesheet; JS init + reduced-motion guard live in app.js. FAQ answers previously snapped open — now they ease in. ============================================================================ */ /* Lenis required CSS (only active once app.js adds the .lenis classes to ) */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-smooth iframe { pointer-events: none; } /* FAQ: ease the answer in on open (was an instant snap). Uses the existing named easing; degrades to an instant open where animations are off. */ .qa[open] .qa__a, .subfaq details[open] .qa__a { animation: qaIn .34s var(--ease-quart) both; } @keyframes qaIn { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .qa[open] .qa__a, .subfaq details[open] .qa__a { animation: none; } } /* ===== Social icons — footer only (temporary placeholders: Instagram / TikTok / Facebook / LinkedIn) ===== */ .foot__brand .social { display:flex; align-items:center; gap:.55rem; margin-top:1.5rem; } .foot__brand .social__link { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:var(--radius-pill); color: var(--concrete); background: oklch(1 0 0 / 0.06); transition: color .2s var(--ease-smooth), background-color .2s var(--ease-smooth), transform .2s var(--ease-smooth); } .foot__brand .social__ic { width:21px; height:21px; fill:currentColor; display:block; } .foot__brand .social__link:hover { color: var(--amber-hi); background: var(--amber-soft); transform: translateY(-2px); } .foot__brand .social__link:focus-visible { color: var(--amber-hi); }