/* ============================================================ The Classic Car Register — 2026 campaign landing Satoshi (sans) + Newsreader (serif) ============================================================ */ /* ---------- Fonts ---------- */ @font-face { font-family: "Satoshi"; src: url("../fonts/satoshi/Satoshi-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Satoshi"; src: url("../fonts/satoshi/Satoshi-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Satoshi"; src: url("../fonts/satoshi/Satoshi-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Newsreader"; src: url("../fonts/newsreader/Newsreader.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; } @font-face { font-family: "Newsreader"; src: url("../fonts/newsreader/Newsreader-Italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; } /* ---------- Design tokens ---------- */ :root { /* surfaces */ --paper: #fcfaf6; --cream: #f7f4ed; --white: #ffffff; --navy: #0b1228; --card-cream: #fefcf4; /* ink */ --ink: #091126; --ink-alt: #0f1428; --brand: #0d3266; --body: rgba(18, 33, 61, 0.65); --body-soft: rgba(18, 33, 61, 0.45); --muted: #727792; /* on dark */ --on-dark: #f7f4ed; --on-dark-88: rgba(247, 244, 237, 0.88); --on-dark-80: rgba(247, 244, 237, 0.8); --on-dark-70: rgba(247, 244, 237, 0.7); --on-dark-65: rgba(247, 244, 237, 0.65); --on-dark-20: rgba(247, 244, 237, 0.2); /* accent */ --gold: #d4a017; --gold-deep: #b8892e; --gold-hover: #c0900f; /* lines */ --rule: #e3ddd0; --rule-input: #d6d9e8; --foot-link: #7e91b3; --foot-meta: #a6abb8; /* type */ --serif: "Newsreader", Georgia, "Times New Roman", serif; --sans: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* fluid scale — design values are the max */ --fs-h1: clamp(34px, 1.6rem + 2.1vw, 54px); --fs-h2: clamp(27px, 1.35rem + 1.45vw, 40px); --fs-h2-lg: clamp(28px, 1.4rem + 1.6vw, 44px); --fs-quote: clamp(25px, 1.3rem + 1.35vw, 40px); --fs-lead: clamp(15px, 0.9rem + 0.2vw, 16px); --fs-sub: clamp(16px, 0.95rem + 0.25vw, 18px); /* layout */ --content: 1240px; --gutter: clamp(20px, 6.944vw, 100px); --r-btn: 2px; /* bar height lives at the root so the drawer can track it from outside the header; toggled by .is-scrolled on */ --bar-h: 96px; } html.is-scrolled { --bar-h: 68px; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--body); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* iOS-safe scroll lock — the script pins body at its current offset so the page doesn't snap to the top while the drawer is open */ body.menu-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; } h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 400; color: var(--ink); line-height: 1.2; } p { margin: 0; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ol, ul { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--navy); color: var(--on-dark); padding: 12px 20px; } .skip:focus { left: 0; } .wrap { width: 100%; max-width: calc(var(--content) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } /* ---------- Shared pieces ---------- */ .sq { display: inline-block; width: 8px; height: 8px; flex: none; background: var(--gold); margin-inline: 8px; vertical-align: 1px; } .hero-meta .sq, .archive-eyebrow .sq { background: rgba(212, 160, 23, 0.8); } .eyebrow { display: flex; align-items: center; font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink); line-height: 1.5; } .eyebrow.on-dark { color: #fff; letter-spacing: 2px; } /* :first-child/:last-child would also match a square sitting between two bare text nodes, so the edge cases are flagged explicitly. */ .sq-lead { margin-left: 0; } .sq-trail { margin-right: 0; } .quote { margin: 0; font-family: var(--serif); font-size: var(--fs-quote); line-height: 1.4; color: var(--ink); } .lead { margin-top: 24px; font-size: var(--fs-lead); line-height: 1.83; color: var(--body); } .fine { margin-top: 16px; font-size: 14px; line-height: 1.63; color: var(--body-soft); } h2.on-dark, .on-dark h2 { color: var(--on-dark); } /* section heading block */ .sec-head h2 { font-size: var(--fs-h2); line-height: 1.4; } .sec-head .eyebrow { margin-bottom: 20px; } .sec-head-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 467px); gap: 40px 80px; align-items: start; } .sec-note { font-size: var(--fs-lead); line-height: 1.83; color: var(--body); padding-top: 6px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding-inline: 26px; border: 1px solid transparent; border-radius: var(--r-btn); font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: -0.15px; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .btn-gold { background: var(--gold); color: var(--ink); } .btn-gold:hover { background: var(--gold-hover); } .btn-gold:active { transform: translateY(1px); } .btn-ghost { border-color: #c5c9de; color: #fff; } .btn-ghost:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; } .btn-block { width: 100%; } /* the hero pair runs a touch tighter than the nav / section CTAs */ .hero-cta .btn { padding-inline: 23px; font-size: 14.2px; } /* ============================================================ NAV ============================================================ */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 60; border-bottom: 1px solid transparent; transition: border-color 0.45s ease; } /* The ground and blur live on a pseudo-element and fade via opacity — `backdrop-filter` itself does not transition smoothly. */ .nav::before { content: ""; position: absolute; inset: 0; background: rgba(11, 18, 40, 0.9); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); opacity: 0; transition: opacity 0.45s ease; pointer-events: none; } .nav.scrolled::before { opacity: 1; } .nav.scrolled { border-bottom-color: rgba(247, 244, 237, 0.1); } .nav-inner { position: relative; z-index: 1; } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--bar-h); transition: height 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .nav-logo img { width: 231px; height: auto; } .nav-links { display: flex; gap: 44px; } .nav-links a { font-size: 16px; font-weight: 500; color: var(--on-dark-88); transition: color 0.2s ease; } .nav-links a:hover { color: #fff; } .nav-right { display: flex; align-items: center; gap: 20px; } .nav-signin { font-size: 16px; font-weight: 500; color: var(--on-dark-88); transition: color 0.2s ease; } .nav-signin:hover { color: #fff; } .nav-right .btn { height: 44px; font-size: 16px; } .burger { display: none; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; align-items: center; } .burger span { display: block; width: 22px; height: 1.5px; background: var(--on-dark); transition: transform 0.25s ease, opacity 0.2s ease; } .burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .burger.open span:nth-child(2) { opacity: 0; } .burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* full-height drawer under the bar; the bar itself goes solid via .is-open */ .mobile-menu { position: fixed; left: 0; right: 0; top: var(--bar-h); bottom: 0; z-index: 55; display: none; flex-direction: column; background: var(--navy); padding: 12px var(--gutter) 44px; overflow-y: auto; overscroll-behavior: contain; } .mobile-menu.open { display: flex; } .nav.is-open::before, .nav.is-open.scrolled::before { opacity: 1; /* the drawer appears instantly, so the bar must not fade in behind it */ transition: none; background: var(--navy); backdrop-filter: none; -webkit-backdrop-filter: none; } .nav.is-open, .nav.is-open.scrolled { border-bottom-color: transparent; } .mobile-menu li a { display: block; padding: 18px 0; font-size: 19px; color: var(--on-dark-88); border-bottom: 1px solid rgba(247, 244, 237, 0.08); } .mobile-menu-cta { margin-top: auto; padding-top: 40px; display: grid; gap: 18px; justify-items: center; } .mm-signin { font-size: 15px; color: var(--on-dark-70); } /* ============================================================ 1 — HERO ============================================================ */ .hero { position: relative; height: 100svh; min-height: 600px; display: flex; align-items: center; overflow: hidden; background: var(--navy); } .hero-media { position: absolute; inset: 0; overflow: hidden; transform: scaleX(-1); } .hero-media img { position: absolute; width: 125.63%; height: 288.76%; left: -25.63%; top: -96.94%; max-width: none; object-fit: cover; } .hero-scrim { position: absolute; inset: 0; background: linear-gradient( to top, rgba(15, 20, 40, 0) 69.97%, rgba(15, 20, 40, 0.65) 100% ), linear-gradient(to left, rgba(15, 20, 40, 0) 0%, rgba(15, 20, 40, 0.89) 100%); } .hero-inner { position: relative; z-index: 2; } .hero-copy { max-width: 551px; } .hero h1 { max-width: 470px; font-size: var(--fs-h1); line-height: 1.195; color: #fff; } .hero-sub { margin-top: 12px; max-width: 500px; font-size: var(--fs-sub); line-height: 1.56; color: #d3d3d4; } .hero-cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; } .hero-meta { margin-top: 30px; display: flex; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: #8b90a8; } .hero-meta .sq { margin-inline: 16px; } /* ============================================================ 2 — HOW SEARCH WORKS ============================================================ */ .howworks { background: var(--cream); padding-block: clamp(72px, 8.3vw, 120px); } .hw-grid { margin-top: clamp(40px, 5.4vw, 78px); display: grid; grid-template-columns: minmax(0, 509px) minmax(0, 572px); gap: clamp(32px, 4vw, 56px); justify-content: center; align-items: start; } /* search builder card */ .search-card { background: #fff; border-radius: 4px; padding: 25px; box-shadow: 0 1px 2px rgba(15, 20, 40, 0.04), 0 18px 44px -26px rgba(15, 20, 40, 0.22); } .sc-body { display: grid; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid #eceef4; margin-bottom: 18px; } .sc-label { display: block; margin-bottom: 6px; font-size: 11px; letter-spacing: 0.4px; color: var(--muted); } .control { width: 100%; height: 36px; padding: 0 14px; border: 1px solid var(--rule-input); border-radius: 3px; background: #fff; font-family: var(--sans); font-size: 13.5px; color: var(--ink-alt); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .control:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.14); outline: none; } .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .select-wrap { position: relative; } .select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer; } .select-wrap svg { position: absolute; right: 13px; top: 50%; width: 12px; height: 8px; transform: translateY(-50%); color: var(--muted); pointer-events: none; } .year-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; } .year-row .sep { color: var(--muted); } .search-card .btn { height: 44px; color: #fff; } .search-card .btn svg { color: #fff; } /* result cards */ .hw-results { display: grid; gap: 14px; } .res-card { display: flex; gap: 21px; align-items: center; padding: 15px 16px; background: var(--card-cream); border: 1px solid var(--gold-deep); border-radius: 6px; box-shadow: 0 2px 16px rgba(184, 137, 46, 0.17), 0 1px 4px rgba(12, 26, 46, 0.05); } .res-thumb { flex: none; width: 155px; height: 121px; border-radius: 2px; overflow: hidden; background: #d8d1bf; } .res-thumb img { width: 100%; height: 100%; object-fit: cover; } .res-body { min-width: 0; } .res-title { font-size: 22px; letter-spacing: -0.11px; color: var(--ink-alt); } .res-title em { font-style: italic; } .res-specs { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 4px 16px; } .res-specs > div { display: flex; align-items: baseline; gap: 5px; } .res-specs dt { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); } .res-specs dd { margin: 0; font-size: 12.5px; font-weight: 500; color: var(--ink-alt); } .res-match { margin-top: 14px; display: flex; align-items: center; gap: 5px; font-size: 11px; line-height: 1.5; color: var(--gold-deep); } .res-match svg { flex: none; width: 12px; height: 12px; } .res-match code { font-family: var(--mono); font-size: 11px; } .close-card { padding: 18px 17px; background: #fff; border: 1px solid #eceef4; border-radius: 6px; box-shadow: 0 1px 3px rgba(12, 26, 46, 0.04); } .cc-kicker { font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); } .cc-compare { margin-top: 12px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; } .cc-cell { padding: 10px 13px; border: 1px solid #eceef4; border-radius: 3px; background: #fbfbfd; } .cc-k { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); } .cc-v { margin-top: 3px; font-family: var(--mono); font-size: 14px; color: var(--ink-alt); } .cc-v b { color: var(--gold-deep); } .cc-arrow { color: var(--muted); font-size: 16px; } .cc-note { margin-top: 12px; font-size: 11.5px; color: var(--body-soft); } /* numbered steps */ .steps, .reason-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(24px, 4vw, 100px); } .steps { margin-top: clamp(48px, 6.25vw, 90px); } .reason-cols { margin-top: clamp(32px, 3.4vw, 49px); } .step-label { font-size: 14px; line-height: 1.43; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink); } .step-label b { font-weight: 500; color: var(--gold); } .step-desc { margin-top: 5px; font-size: 14px; line-height: 1.63; color: var(--body-soft); } /* ============================================================ 3 — THE ARCHIVE ============================================================ */ .archive { position: relative; background: var(--navy); overflow: hidden; padding-block: clamp(60px, 7vw, 100px); } .archive-bg { position: absolute; inset: 0; opacity: 0.09; } .archive-bg img { width: 100%; height: 100%; object-fit: cover; } .archive-inner { position: relative; } .archive-eyebrow { margin-bottom: clamp(20px, 2vw, 29px); } .archive-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px clamp(24px, 4vw, 58px); } .archive-num { font-family: var(--serif); font-size: clamp(64px, 9.7vw, 140px); line-height: 1; letter-spacing: 5px; color: var(--on-dark); } .archive-num span { color: var(--gold); } .archive-note { max-width: 250px; font-size: var(--fs-sub); line-height: 1.74; color: #fff; } /* ============================================================ 4 — THE ARCHIVE PROBLEM ============================================================ */ .problem { background: #fff; padding-block: clamp(72px, 8.3vw, 120px); } .problem-grid { display: grid; grid-template-columns: minmax(0, 566px) minmax(0, 491px); gap: clamp(40px, 7.6vw, 110px); align-items: start; } .problem-figure { margin: 0; aspect-ratio: 566 / 600; overflow: hidden; } .problem-figure img { width: 100%; height: 100%; object-fit: cover; } .problem-copy { padding-top: clamp(0px, 5.5vw, 80px); } /* ============================================================ 5 — WHY PROVENANCE MATTERS ============================================================ */ .provenance { background: var(--cream); padding-block: clamp(72px, 8.3vw, 120px); overflow: hidden; } .provenance-grid { display: grid; grid-template-columns: minmax(0, 491px) minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); align-items: center; } .provenance-copy .quote { margin-top: 20px; } /* dossier collage — a square stage, docs placed by % of it */ .dossier { position: relative; width: 100%; aspect-ratio: 1 / 1; } .dossier .doc { position: absolute; height: auto; transform-origin: center; transform: translate(-50%, -50%) rotate(var(--rot)); } .doc-catalogue { --rot: -2.27deg; left: 47.44%; top: 29.23%; width: 44.68%; z-index: 3; } .doc-history { --rot: -4.87deg; left: 22.8%; top: 53.82%; width: 35.77%; z-index: 2; } .doc-publisher { --rot: 4.75deg; left: 75.31%; top: 43.15%; width: 40.33%; z-index: 1; } .doc-club { --rot: 6.79deg; left: 48.81%; top: 69.65%; width: 39.31%; z-index: 4; } /* ============================================================ 6 — TIMELINE ============================================================ */ /* overflow-x: clip lets the car break the section floor without creating a scroll container the way `hidden` would. */ .timeline { position: relative; z-index: 2; background: var(--navy); padding-block: clamp(72px, 8.3vw, 120px) clamp(190px, 26vw, 380px); overflow-x: clip; overflow-y: visible; } /* Anchored to the section floor so the car keeps its crop at any height. */ .timeline-car { position: absolute; left: 24.06%; bottom: 0; width: 52.49%; height: auto; transform: translate(-50%, 30.37%) rotate(1.31deg); pointer-events: none; } .timeline-inner { position: relative; z-index: 2; } .timeline .sec-head h2 { font-size: var(--fs-h2-lg); line-height: 1.25; max-width: 744px; } .tl-track { margin-top: clamp(48px, 6.3vw, 91px); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); } .tl-item { position: relative; padding-inline: 20px; } .tl-item:first-child { padding-left: 0; } .tl-item:last-child { padding-right: 0; } .tl-year { font-family: var(--serif); font-size: 22px; line-height: 1.27; color: var(--gold); padding-bottom: 8px; } /* the rule between year and label, carrying the milestone dot */ .tl-dot { display: block; position: relative; height: 1px; background: var(--on-dark-20); margin-inline: -20px; } .tl-item:first-child .tl-dot { margin-left: 0; } .tl-item:last-child .tl-dot { margin-right: 0; } .tl-dot::after { content: ""; position: absolute; left: 20px; top: -2.5px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); transition: transform 0.45s ease, box-shadow 0.45s ease; } .tl-item:first-child .tl-dot::after { left: 0; } .tl-item.is-on .tl-dot::after { transform: scale(1.3); box-shadow: 0 0 0 4px rgba(212, 160, 23, 0.22); } .tl-label { padding-top: 12px; font-size: 14px; line-height: 1.43; color: var(--on-dark-65); } /* ============================================================ 7 — THREE REASONS ============================================================ */ /* generous top padding — the Miura overhangs from the section above */ .reasons { background: var(--paper); padding-block: clamp(174px, 14.2vw, 204px) clamp(48px, 5vw, 72px); overflow: hidden; } .reasons-stage { position: relative; width: 100%; max-width: 1440px; margin: clamp(56px, 7vw, 100px) auto 0; aspect-ratio: 1440 / 383; } .reasons-stage img { position: absolute; height: auto; } .rs-car { left: 26.36%; top: 0; width: 47.27%; } /* drop-shadow, not box-shadow — these PNGs have transparent margins */ .rs-chassis { left: 12.8%; top: 8.26%; width: 23.54%; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.14)); } .rs-record { left: 66.44%; top: 16.52%; width: 23.47%; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.14)); } /* min-width guard: this is more specific than the stacking rule below, so it has to be scoped or it would keep two columns on mobile */ @media (min-width: 1025px) { .reasons .sec-head-split { grid-template-columns: minmax(0, 1fr) minmax(0, 333px); } } .reasons .sec-note { line-height: 1.96; } .reason-title { margin-top: 5px; font-size: var(--fs-lead); line-height: 1.83; color: var(--body); } /* ============================================================ 8 — PRICING ============================================================ */ .pricing { position: relative; background: var(--navy); overflow: hidden; padding-block: calc(clamp(80px, 10vw, 157px) + 24px) clamp(80px, 10vw, 150px); } /* One square repeated with flat box-shadows — matches the Figma grid exactly. */ .price-deco { position: absolute; left: 61.56%; top: 55.3%; width: 118px; height: 118px; color: rgba(217, 217, 217, 0.05); background: currentColor; box-shadow: 169px 0, 338px 0, 507px 0, 0 165px, 169px 165px, 507px 165px, 0 337px, 169px 337px, 338px 337px, 507px 337px; pointer-events: none; } .pricing-inner { position: relative; text-align: center; display: grid; justify-items: center; gap: 24px; } .pricing-inner h2 { font-size: var(--fs-h2); line-height: 1.25; max-width: 900px; } .pricing-note { max-width: 520px; font-size: 15.5px; line-height: 1.55; color: var(--on-dark-70); } .pricing-note .gold { color: var(--gold); } .pricing-inner .btn { height: 52px; padding-inline: 36px; font-size: 16px; margin-top: 8px; } /* ============================================================ 9 — WHO ARE WE ============================================================ */ .team { position: relative; overflow: hidden; background: var(--paper); padding-block: clamp(72px, 6.94vw, 100px); } /* Decorative square grid, centred on the gap between the two portraits and running off the right edge. 106.64px tall in total, hence the half-height offset — it tracks the gap instead of a fixed percentage of the section. */ .team-deco { position: absolute; right: 9px; top: calc(var(--people-pad) + 225px + var(--people-gap) / 2 - 53.32px); z-index: 0; width: 27.63px; height: 27.63px; color: rgba(13, 50, 102, 0.08); background: currentColor; /* 11 squares, not 12 — the middle of the second row is deliberately empty */ box-shadow: 39.61px 0, 79.22px 0, 118.63px 0, 0 38.67px, 39.61px 38.67px, 118.63px 38.67px, 0 79.01px, 39.61px 79.01px, 79.22px 79.01px, 118.63px 79.01px; pointer-events: none; } .team-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 446px) minmax(0, 1fr); gap: clamp(40px, 7vw, 100px); align-items: start; } .team-copy h2 { margin-top: 20px; font-size: var(--fs-h2); line-height: 1.4; } .people { --people-gap: clamp(36px, 5vw, 68px); --people-pad: clamp(0px, 3vw, 40px); position: relative; display: grid; gap: var(--people-gap); padding-top: var(--people-pad); } .person { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: clamp(24px, 3vw, 44px); align-items: start; } /* the gold rule sits on the right, so both bios share one vertical line */ .person-bio { padding: 4px 22px 0 2px; border-right: 2px solid var(--gold); } .person--right .person-bio { text-align: right; } .person.is-hidden { display: none; } .person-bio h3 { font-size: 18px; color: var(--brand); } .person-bio p { margin-top: 5px; font-size: 14px; line-height: 1.81; color: var(--body); } .person-photo { margin: 0; width: 180px; height: 225px; border: 6px solid var(--cream); background: var(--cream); box-shadow: 2px 3px 7px rgba(92, 74, 53, 0.4); overflow: hidden; } .person-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } /* ============================================================ 10 — FINAL CTA ============================================================ */ .final { position: relative; min-height: 665px; display: flex; align-items: flex-end; overflow: hidden; background: var(--navy); } .final-media { position: absolute; inset: 0; } /* Figma's overlay — the footage is raw now, so the scrim lives in CSS */ .final-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(11, 18, 40, 0.25) 0%, rgba(11, 18, 40, 0.87) 100% ); pointer-events: none; } .final-media img, .final-media video { width: 100%; height: 100%; object-fit: cover; } .final-inner { position: relative; z-index: 2; padding-bottom: clamp(56px, 7vw, 80px); text-align: center; display: grid; justify-items: center; gap: 22px; } .final-inner h2 { font-size: clamp(28px, 1.4rem + 1.55vw, 42px); line-height: 1.25; color: var(--on-dark); max-width: 700px; } .final-inner p { max-width: 560px; font-size: 16px; line-height: 1.6; color: var(--on-dark-80); } .final-inner .btn { height: 52px; padding-inline: 38px; margin-top: 8px; } /* ============================================================ FOOTER ============================================================ */ .foot { background: var(--navy); padding-block: 80px 40px; } .foot-top { display: grid; grid-template-columns: minmax(0, 1fr) 160px 160px; gap: 48px clamp(60px, 12vw, 290px); justify-content: space-between; } .foot-brand img { width: 271px; height: auto; } .foot-brand p { margin-top: 19px; max-width: 300px; font-size: 14px; line-height: 1.7; color: var(--foot-link); } .foot-col { display: grid; align-content: start; gap: 14px; } .foot-col h4 { margin: 0 0 6px; font-family: var(--sans); font-size: 12px; font-weight: 400; letter-spacing: 1.4px; text-transform: uppercase; color: #fff; } .foot-col a { font-size: 14.5px; color: var(--foot-link); transition: color 0.2s ease; } .foot-col a:hover { color: #fff; } .foot-bottom { margin-top: 60px; padding-top: 27px; border-top: 1px solid rgba(239, 234, 224, 0.14); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 28px; font-size: 13px; color: var(--foot-meta); } .foot-links { display: flex; gap: 28px; } .foot-links a:hover { color: #fff; } /* ============================================================ MOTION — quiet entrances, nothing that announces itself ============================================================ */ :root { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* --- page load: hero settles in --- */ .has-reveal .hero-copy > * { opacity: 0; transform: translateY(16px); } .is-loaded .hero-copy > * { opacity: 1; transform: none; transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); } .is-loaded .hero-copy > *:nth-child(1) { transition-delay: 0.1s; } .is-loaded .hero-copy > *:nth-child(2) { transition-delay: 0.22s; } .is-loaded .hero-copy > *:nth-child(3) { transition-delay: 0.34s; } .is-loaded .hero-copy > *:nth-child(4) { transition-delay: 0.46s; } /* the hero frame eases back to its resting crop */ .has-reveal .hero-media img { transform: scale(1.05); transform-origin: center; } .is-loaded .hero-media img { transform: scale(1); transition: transform 2s var(--ease-out); } .has-reveal .nav { opacity: 0; } .is-loaded .nav { opacity: 1; transition: opacity 0.7s ease 0.15s; } /* --- on scroll: blocks --- */ .has-reveal [data-reveal] { opacity: 0; transform: translateY(18px); } .has-reveal [data-reveal].in { opacity: 1; transform: none; transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); } /* --- on scroll: children of a grid arrive one after another --- */ .has-reveal [data-stagger] > * { opacity: 0; transform: translateY(14px); } .has-reveal [data-stagger].in > * { opacity: 1; transform: none; transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out); } .has-reveal [data-stagger].in > *:nth-child(2) { transition-delay: 0.09s; } .has-reveal [data-stagger].in > *:nth-child(3) { transition-delay: 0.18s; } .has-reveal [data-stagger].in > *:nth-child(4) { transition-delay: 0.27s; } .has-reveal [data-stagger].in > *:nth-child(5) { transition-delay: 0.36s; } /* --- the dossier settles into its scatter --- */ .has-reveal .dossier .doc { opacity: 0; transform: translate(-50%, calc(-50% + 24px)) rotate(calc(var(--rot) * 0.35)); } .has-reveal .dossier.in .doc { opacity: 1; transform: translate(-50%, -50%) rotate(var(--rot)); transition: opacity 0.8s var(--ease-out), transform 0.95s var(--ease-out); } .has-reveal .dossier.in .doc:nth-child(2) { transition-delay: 0.1s; } .has-reveal .dossier.in .doc:nth-child(3) { transition-delay: 0.2s; } .has-reveal .dossier.in .doc:nth-child(4) { transition-delay: 0.3s; } /* --- the archive figure holds a beat longer than everything else --- */ .has-reveal .archive-row { transition-duration: 1.1s; } /* ============================================================ RESPONSIVE ============================================================ */ /* ---- ≤ 1200 ---- */ @media (max-width: 1200px) { .hw-grid { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); } .res-card { gap: 18px; } .res-thumb { width: 130px; height: 102px; } .nav-links { gap: 30px; } } /* ---- ≤ 1024 : two columns get tighter, nav collapses ---- */ @media (max-width: 1024px) { /* the drawer snaps open and shut, so the bar must too — no fades here, open or close, background or border */ .nav, .nav::before, .nav-inner { transition: none; } .nav-links, .nav-signin { display: none; } .burger { display: flex; } .nav-right .btn { height: 40px; padding-inline: 18px; font-size: 14px; } /* the tall Figma crop stops working once the frame is no longer wide — fall back to a straight cover with the car kept in frame */ .hero-media img { inset: 0; width: 100%; height: 100%; left: 0; top: 0; object-fit: cover; object-position: 32% center; } .sec-head-split { grid-template-columns: 1fr; gap: 20px; } .sec-note { max-width: 620px; } .hw-grid { grid-template-columns: 1fr; gap: 24px; max-width: 620px; } .problem-grid, .provenance-grid, .team-grid { grid-template-columns: 1fr; } .problem-copy { padding-top: 0; } .problem-figure { max-width: 566px; } .dossier { max-width: 520px; margin-inline: auto; } .provenance-copy { max-width: 620px; } .people { padding-top: 0; max-width: 620px; } .archive-row { justify-content: flex-start; } .price-deco { display: none; } } /* ---- ≤ 860 : steps + timeline stack ---- */ @media (max-width: 860px) { .steps, .reason-cols { grid-template-columns: 1fr; gap: 28px; max-width: 560px; } .tl-track { grid-template-columns: 1fr; gap: 0; max-width: 480px; } .tl-item, .tl-item:first-child, .tl-item:last-child { padding: 0 0 28px 28px; border-left: 1px solid var(--on-dark-20); } .tl-item:first-child { border-left-color: transparent; } .tl-item:last-child { padding-bottom: 0; border-left-color: transparent; } /* the rule runs dot-to-dot: it starts at the first dot and stops at the last */ .tl-item:first-child::before, .tl-item:last-child::before { content: ""; position: absolute; left: -1px; top: 13px; bottom: 0; width: 1px; background: var(--on-dark-20); } .tl-item:last-child::before { top: 0; height: 13px; bottom: auto; } .tl-year { padding-bottom: 4px; } .tl-label { padding-top: 0; } /* the rule turns vertical — the dot rides the left border instead */ .tl-dot, .tl-item:first-child .tl-dot, .tl-item:last-child .tl-dot { position: absolute; top: 13px; left: -3.5px; width: 6px; height: 0; margin: 0; background: none; } .tl-dot::after, .tl-item:first-child .tl-dot::after { left: 0; top: 0; } .timeline-car { left: 46%; bottom: 0; width: 104%; transform: translate(-50%, 40%) rotate(1.31deg); } } /* ---- ≤ 767 : mobile ---- */ @media (max-width: 767px) { /* the copy is taller than a phone viewport minus the car strip, so the hero grows with it: the top pad keeps the headline clear of the fixed bar, the bottom pad lifts it clear of the car */ .hero { height: auto; min-height: 100svh; padding-top: 120px; padding-bottom: 140px; } /* oversize the cover box so the crop zooms in and the car actually reads */ .hero-media img { inset: auto; width: 145%; height: 145%; left: -22%; top: -2%; object-position: 16% 50%; } /* lifted over the lower third so the car isn't buried */ .hero-scrim { background: linear-gradient( to bottom, rgba(15, 20, 40, 0.74) 0%, rgba(15, 20, 40, 0.66) 55%, rgba(15, 20, 40, 0.26) 82%, rgba(15, 20, 40, 0.5) 100% ); } .hero-cta { gap: 12px; } /* section CTAs go full width inside the existing gutters */ .hero-cta .btn, .pricing-inner .btn, .final-inner .btn { flex: 1 1 100%; width: 100%; } .hero-meta { font-size: 12px; color: #fff; } .hero-meta .sq { margin-inline: 10px; } :root { --bar-h: 76px; } html.is-scrolled { --bar-h: 60px; } .nav-logo img { width: 180px; } /* the CTA lives in the drawer at this width — the bar keeps just the burger */ .nav-right .btn { display: none; } .hero-media img { object-position: 10% 62%; } .archive-row { gap: 16px; } .archive-num { letter-spacing: 2px; } .archive-note { max-width: none; font-size: 15px; } /* result card stacks so the thumbnail stays legible */ .res-card { flex-direction: column; align-items: stretch; gap: 14px; } .res-thumb { width: 100%; height: 160px; } .res-thumb img { object-position: center bottom; } .cc-compare { grid-template-columns: 1fr; gap: 6px; } .cc-arrow { justify-self: center; transform: rotate(90deg); } /* the collage keeps its overlap, just tucked into the photo's own corners */ .reasons-stage { position: relative; display: block; aspect-ratio: auto; width: calc(100% - var(--gutter) * 2); max-width: 460px; margin-inline: auto; } /* scoped, so they outrank the `.reasons-stage img` base rule */ .reasons-stage .rs-car { position: static; width: 100%; left: auto; top: auto; } /* both cards break the photo's edges, the way they do on desktop — it keeps more of the car visible */ .reasons-stage .rs-chassis { left: -4%; top: -14%; width: 58%; } .reasons-stage .rs-record { left: auto; right: -4%; top: auto; bottom: -30%; width: 52%; } .reasons .reason-cols { margin-top: 60px; } .person { grid-template-columns: 1fr; gap: 22px; } .person-photo { order: -1; } /* full-width bios read better with the rule on the reading edge */ .person-bio { padding: 4px 2px 0 22px; border-right: 0; border-left: 2px solid var(--gold); } /* LN mirrors: photo and rule to the right, name right, prose still left */ .person--right .person-photo { justify-self: end; } .person--right .person-bio { padding: 4px 22px 0 2px; border-left: 0; border-right: 2px solid var(--gold); text-align: left; } .person--right .person-bio h3 { text-align: right; } /* the prose block hugs the rule on the right; the lines stay left-aligned */ .person--right .person-bio p { width: fit-content; max-width: 100%; margin-left: auto; } .team-deco { display: none; } /* height comes from the content — the shallower the band, the less of the landscape footage gets cropped away by object-fit: cover */ .final { min-height: 0; } .final-inner { padding-block: 56px 48px; gap: 18px; } .final-inner .btn { margin-top: 2px; } .foot { padding-block: 56px 32px; } .foot-top { grid-template-columns: 1fr 1fr; gap: 40px 24px; } .foot-brand { grid-column: 1 / -1; } .foot-brand img { width: 220px; } .foot-bottom { margin-top: 40px; flex-direction: column; } .foot-links { gap: 20px; } } /* ---- ≤ 480 ---- */ @media (max-width: 480px) { .hero h1 { max-width: none; } .search-card { padding: 18px; } .field-grid { grid-template-columns: 1fr; } .archive-num { letter-spacing: 0; } .foot-top { grid-template-columns: 1fr; } } /* ---- Motion ---- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .has-reveal [data-reveal], .has-reveal [data-stagger] > *, .has-reveal .hero-copy > * { opacity: 1; transform: none; } .has-reveal .hero-media img { transform: none; } .has-reveal .dossier .doc { opacity: 1; transform: translate(-50%, -50%) rotate(var(--rot)); } .has-reveal .nav { opacity: 1; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }