/* ========================================================= AUTONOMY — Premium automotive · engineered White + Ink + MTC Blue · Manrope + JetBrains Mono (self-hosted) ========================================================= */ /* Self-hosted fonts (previously a render-blocking @import from Google Fonts). */ @font-face { font-family:'Manrope'; font-style:normal; font-weight:400 800; font-display:swap; src:url('/assets/fonts/manrope-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family:'Manrope'; font-style:normal; font-weight:400 800; font-display:swap; src:url('/assets/fonts/manrope-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400 500; font-display:swap; src:url('/assets/fonts/jetbrains-mono-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400 500; font-display:swap; src:url('/assets/fonts/jetbrains-mono-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* ---- Color ---- */ --paper: #FFFFFF; --bg: #F6F5F2; /* very subtle warm off-white */ --bg-2: #ECEAE5; /* secondary surface */ --line: rgba(14, 16, 20, 0.10); --line-soft: rgba(14, 16, 20, 0.06); --line-dark: rgba(255, 255, 255, 0.10); --line-dark-soft: rgba(255, 255, 255, 0.06); --ink-900: #0A0C10; /* primary type */ --ink-800: #14171C; --ink-700: #232830; --ink-500: #5A5F69; --ink-400: #80848D; --ink-300: #A8ACB3; --ink-200: #C8CBD0; --night: #08090C; /* dark section */ --night-2: #11141A; /* Autonomy accent — soft lavender blue from the existing site */ --autonomy-blue: #5876E0; --autonomy-blue-dark: #3A57C5; --autonomy-blue-soft: rgba(88, 118, 224, 0.10); /* legacy aliases */ --accent: var(--ink-900); --accent-dark: var(--ink-700); --accent-light: var(--ink-500); --accent-soft: rgba(14, 16, 20, 0.06); --mtc-blue: var(--ink-900); --mtc-blue-dark: var(--ink-700); --mtc-blue-light: var(--ink-300); --blue-glow: rgba(88, 118, 224, 0.12); --signal: var(--autonomy-blue); --signal-soft: var(--autonomy-blue); /* ---- Type ---- */ --font-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; /* ---- Motion ---- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* Motion system ("night drive"): fast-out expo easing, tuned durations and a stagger step. Every animation should draw on these, nothing ad hoc. */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 300ms; --dur-base: 500ms; --dur-slow: 700ms; --stagger: 60ms; /* ---- Layout ---- */ --max: 1440px; --gutter: clamp(28px, 4vw, 64px); --nav-h: 68px; } /* Font theme variants — applied via [data-font] on */ /* Alternate display fonts removed: only Manrope + JetBrains Mono are loaded now. */ * { box-sizing: border-box; } /* Accessibility: honour reduced-motion globally. Near-instant durations (rather than 0) keep transitionend/animationend handlers firing. Catches the logo marquee, the pulsate dot, the carousel slide and any future animation, on top of the targeted disables elsewhere. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } html, body { margin: 0; padding: 0; background: var(--paper); /* Kill the elastic overscroll bounce: on macOS it exposes the white root background as a full-width flash against the dark hero (top) and dark footer (bottom) while scrolling. */ overscroll-behavior: none; color: var(--ink-900); font-family: var(--font-body); /* NB the background above is overridden for html alone just below. */ font-size: 16px; font-weight: 400; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11"; } /* The canvas takes its colour from html, not body. The viewport meta does not use viewport-fit=cover, so iOS insets the page and fills the home-indicator strip with that canvas colour: white, directly under the dark footer, which read as a white gap at the bottom on an iPhone (UB 8183737). Both ends of the document are dark (hero and footer) and --night already matches the declared theme-color, so the canvas takes it. body keeps --paper, so light pages are unchanged. */ html { background: var(--night); } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; font-size: inherit; cursor: pointer; border: 0; background: none; color: inherit; } ::selection { background: var(--ink-900); color: #fff; } /* ========================================================= TYPE — weight contrast, no serif ========================================================= */ .eyebrow { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-500); display: inline-flex; align-items: center; gap: 12px; } .eyebrow::before { content: ''; display: none; } /* Display: BIG, tight, demibold. No internal weight contrast — emphasis via colour only */ .display { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 6vw, 96px); line-height: 1.04; letter-spacing: -0.034em; margin: 0; color: var(--ink-900); } .display em { font-style: normal; font-weight: inherit; color: inherit; } .h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 4.6vw, 64px); line-height: 1.06; letter-spacing: -0.028em; margin: 0; color: var(--ink-900); } .h1 em { font-style: normal; font-weight: inherit; color: inherit; } .h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 3.4vw, 46px); line-height: 1.08; letter-spacing: -0.023em; margin: 0; color: var(--ink-900); } .h2 em { font-style: normal; font-weight: inherit; color: inherit; } .h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 2vw, 28px); line-height: 1.2; letter-spacing: -0.015em; margin: 0; } /* ========================================================= HOME-LEVEL DISPLAY SYSTEM (.disp / .title-2 / .title-3 / .eyebrow-row) Migrated from home.css so all pages can share the same vocabulary. ========================================================= */ .disp { font-family: var(--font-display); font-weight: 600; font-size: clamp(44px, 6.8vw, 116px); line-height: 1; letter-spacing: -0.038em; margin: 0; } .title-2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(30px, 4.2vw, 60px); line-height: 1.06; letter-spacing: -0.03em; margin: 0; } .title-3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3vw, 42px); line-height: 1.05; letter-spacing: -0.028em; margin: 0; } .eyebrow-row { display: flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-500); font-weight: 500; margin-bottom: 28px; } .eyebrow-row::before { content: ''; display: none; } .eyebrow-row--dark { color: rgba(255,255,255,0.82); } /* Platform page — too much else going on; drop the line accent before numbers */ /* Platform + Home pages — drop the line accent before section numbers (too much else going on) */ [data-page="platform"] .eyebrow-row::before, [data-page="index"] .eyebrow-row::before { display: none; } /* Platform page — align the right-column lede to the h2 baseline (skip the eyebrow row) */ [data-page="platform"] .two-col > .lede { padding-top: 44px; } @media (max-width: 900px) { [data-page="platform"] .two-col > .lede { padding-top: 0; } } /* Header two-cols where the right lede should align to the heading, not the eyebrow */ .two-col--lede-offset > .lede { padding-top: var(--lede-offset, 44px); } @media (max-width: 900px) { .two-col--lede-offset > .lede { padding-top: 0; } } /* inside display headings — strip italic, keep weight, mute to ink-400 (matches home pattern) */ .disp em, .title-2 em, .title-3 em { font-style: normal; font-weight: inherit; color: var(--ink-400); } .section--dark .disp em, .section--dark .title-2 em, .section--dark .title-3 em { color: rgba(255,255,255,0.4); } .label { font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: -0.005em; } .lede { font-family: var(--font-body); font-size: clamp(17px, 1.35vw, 20px); font-weight: 500; line-height: 1.5; color: var(--ink-700); letter-spacing: -0.005em; max-width: 60ch; } .body { font-size: 16px; line-height: 1.6; color: var(--ink-700); font-weight: 500; } .body p { margin: 0 0 1em 0; } .tiny { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); } .num { font-family: var(--font-display); font-weight: 800; font-size: clamp(54px, 7vw, 96px); line-height: 0.95; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--ink-900); } .num em { font-style: normal; font-weight: inherit; font-size: 0.7em; color: var(--ink-400); } .mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: -0.005em; font-variant-numeric: tabular-nums; } /* ========================================================= NAV ========================================================= */ /* Skip-to-content link: first focusable element, off-screen until focused. */ .skip-link { position: absolute; top: 10px; left: 10px; z-index: 2000; padding: 10px 16px; border-radius: 8px; background: var(--ink-900); color: #fff; font-family: var(--font-body); font-size: 14px; font-weight: 600; text-decoration: none; transform: translateY(-150%); transition: transform 160ms var(--ease-out); } .skip-link:focus { transform: translateY(0); outline: 2px solid #fff; outline-offset: 2px; } #main-content:focus { outline: none; } /* Keyboard focus ring for every interactive element. :focus-visible keeps the ring off mouse/touch clicks, so it only appears for keyboard and assistive-tech navigation. Brand blue reads against both the light and dark sections; the outline follows each element's own border-radius, so pill buttons stay round. */ a:focus-visible, button:focus-visible, [role="button"]:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible { outline: 2px solid var(--autonomy-blue); outline-offset: 2px; } /* Screen-reader-only utility: visually hidden, still announced. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 100; display: flex; align-items: center; padding: 0 var(--gutter); background: transparent; transition: transform 360ms var(--ease-out), background 320ms var(--ease-out), color 320ms var(--ease-out); } .nav--scrolled { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid transparent; pointer-events: none; /* empty bar lets scroll/clicks pass through — children re-enable below */ } .nav--scrolled .brand { opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out), visibility 0s linear 280ms; } .nav--scrolled .nav__links, .nav--scrolled .nav__cta { pointer-events: auto; } .brand img { transition: filter 280ms var(--ease-out); } .nav--dark { color: #fff; } .nav--dark.nav--scrolled { background: transparent; border-bottom-color: transparent; } /* Mobile: hide the fixed nav on scroll down, reveal a frosted bar with the logo on scroll up. Driven by nav--hidden / nav--peek in assets/site.js. */ @media (max-width: 1024px) { .nav--hidden { transform: translateY(-100%); } .nav--peek { background: rgba(246, 245, 242, 0.72); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); border-bottom: 1px solid var(--line); pointer-events: auto; } .nav--dark.nav--peek { background: rgba(10, 12, 16, 0.58); border-bottom-color: var(--line-dark); } /* Keep the logo present on mobile — the desktop scrolled state hides it. */ .nav--scrolled .brand { opacity: 1; visibility: visible; transform: none; transition: opacity 240ms var(--ease-out); } } .nav__inner { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: var(--max); margin: 0 auto; gap: 16px; } .nav__links { margin-left: auto; } .brand { display: inline-flex; align-items: center; line-height: 1; } .brand img { height: 24px; width: auto; display: block; } .nav--dark .brand img { filter: brightness(0) invert(1); } .brand--white img { filter: brightness(0) invert(1); } .nav__links { display: inline-flex; align-items: center; gap: 2px; padding: 5px; background: rgba(14, 16, 20, 0.05); border-radius: 999px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid transparent; transition: background 280ms var(--ease-out), border-color 280ms var(--ease-out), box-shadow 280ms var(--ease-out); } .nav--scrolled .nav__links { background: rgba(255, 255, 255, 0.94); backdrop-filter: saturate(160%) blur(20px); -webkit-backdrop-filter: saturate(160%) blur(20px); border-color: var(--line-soft); box-shadow: 0 8px 28px rgba(10, 12, 18, 0.08); } .nav--dark.nav--scrolled .nav__links { background: rgba(20, 24, 30, 0.9); border-color: rgba(255, 255, 255, 0.10); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28); } .nav__link { font-size: 13px; font-weight: 500; letter-spacing: -0.005em; color: inherit; opacity: 0.75; padding: 8px 16px; border-radius: 999px; transition: opacity 200ms var(--ease-out), background 200ms var(--ease-out), color 200ms var(--ease-out); position: relative; } .nav__link:hover { opacity: 1; } .nav__link--active { opacity: 1; background: var(--ink-900); color: #fff; } .nav--dark .nav__links { background: rgba(255, 255, 255, 0.08); } .nav--dark .nav__link--active { background: #fff; color: var(--ink-900); } .nav__cta { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 10px 18px; border-radius: 999px; background: var(--ink-900); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: -0.005em; transition: transform 240ms var(--ease-out), background 240ms var(--ease-out), color 240ms var(--ease-out); } .nav__cta:hover { transform: translateY(-1px); background: var(--accent); } .nav--dark .nav__cta { background: var(--paper); color: var(--ink-900); } .nav--dark .nav__cta:hover { background: var(--accent); color: #fff; } .nav__link--active { transition: background 280ms var(--ease-out), color 280ms var(--ease-out); } /* ========================================================= NAV — mobile ========================================================= */ @media (max-width: 760px) { .nav { padding: 0 var(--gutter); } .nav__inner { gap: 8px; } .nav__links { gap: 0; padding: 4px; } .nav__link { font-size: 12px; padding: 6px 10px; } .nav__cta { padding: 9px 14px; font-size: 12px; gap: 6px; } .nav__cta .arrow { width: 12px; } } @media (max-width: 520px) { /* On phones: hide pills entirely, keep just logo + Book a demo */ .nav__links { display: none; } .nav__inner { justify-content: space-between; } } /* ========================================================= BUTTON ========================================================= */ .btn { display: inline-flex; align-items: center; gap: 12px; padding: 14px 24px; border-radius: 999px; font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: -0.005em; white-space: nowrap; transition: transform 240ms var(--ease-out), background 240ms var(--ease-out), color 240ms var(--ease-out), border-color 240ms var(--ease-out), box-shadow 240ms var(--ease-out); cursor: pointer; border: 1px solid transparent; } .btn--lg { padding: 18px 30px; font-size: 15px; } .btn--sm { padding: 10px 16px; font-size: 12px; } .btn--primary { background: var(--ink-900); color: #fff; padding-right: 8px; } .btn--primary:hover { background: var(--ink-700); transform: translateY(-1px); box-shadow: 0 12px 28px rgba(14, 16, 20, 0.20); } .btn--primary .btn__nub { background: #fff; color: var(--ink-900); } .btn--accent { background: var(--accent); color: #fff; } .btn--accent:hover { background: var(--accent-dark); transform: translateY(-1px); box-shadow: 0 12px 28px rgba(242, 107, 44, 0.30); } .btn--dark { background: var(--ink-900); color: #fff; } .btn--dark:hover { background: var(--ink-700); transform: translateY(-1px); } .btn--ghost { background: transparent; color: var(--ink-900); border-color: var(--line); } .btn--ghost:hover { border-color: var(--ink-900); background: var(--ink-900); color: #fff; } .btn--invert { background: var(--paper); color: var(--ink-900); padding-right: 8px; } .btn--invert:hover { background: var(--ink-900); color: #fff; transform: translateY(-1px); } .btn--invert .btn__nub { background: var(--ink-900); color: #fff; } .btn--invert:hover .btn__nub { background: #fff; color: var(--ink-900); } /* The circular arrow chip on the right of pill CTAs */ .btn__nub { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; min-width: 32px; border-radius: 50%; margin-left: 6px; transition: transform 280ms var(--ease-out), background 240ms var(--ease-out), color 240ms var(--ease-out); } .btn__nub .arrow { display: block; } .btn:hover .btn__nub { transform: translateX(3px); } .btn--lg { padding-right: 10px; } .btn--lg .btn__nub { width: 38px; height: 38px; min-width: 38px; } .btn--bare { padding: 0; background: none; border: 0; color: var(--ink-900); border-radius: 0; gap: 8px; font-weight: 600; } .btn--bare::after { content: '→'; display: inline-block; margin-left: 4px; font-weight: 500; transition: transform 280ms var(--ease-out); } .btn--bare:hover::after { transform: translateX(4px); } .btn .arrow { width: 18px; height: 8px; transition: transform 320ms var(--ease-out); } .btn:hover .arrow { transform: translateX(4px); } /* ========================================================= LAYOUT ========================================================= */ .section { padding: clamp(58px, 8.6vh, 115px) var(--gutter); } .section--dark { /* Inset rounded card on cream — matches the homepage Trusted-by treatment */ background: var(--bg) !important; color: var(--ink-900); padding: clamp(17px, 2.9vh, 35px) clamp(16px, 2.5vw, 32px) !important; } .section--dark > .container, .section--dark > .container--narrow { background: var(--night); color: #fff; border-radius: clamp(18px, 2vw, 28px); padding: clamp(40px, 5.8vh, 79px) clamp(28px, 4vw, 60px); max-width: var(--max); margin: 0 auto; } .section--dark .lede { color: var(--ink-300); } .section--dark .eyebrow { color: var(--ink-300); } .section--dark .display em, .section--dark .h1 em, .section--dark .h2 em { color: var(--ink-300); } .section--bg { background: var(--bg); } .container { max-width: var(--max); margin: 0 auto; } .container--narrow { max-width: 1080px; } .container--text { max-width: 760px; } .grid { display: grid; gap: clamp(20px, 2.4vw, 32px); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } } /* ========================================================= HERO (full-bleed) ========================================================= */ .hero { position: relative; min-height: 100vh; background: var(--night); color: #fff; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--gutter); padding-top: calc(var(--nav-h) + 40px); } .hero__stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .hero__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,9,12,0.10) 0%, rgba(8,9,12,0.05) 35%, rgba(8,9,12,0.85) 100%); z-index: 1; pointer-events: none; } .hero__copy { position: relative; z-index: 2; max-width: var(--max); margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1.4fr auto; align-items: end; gap: 60px; padding-bottom: 24px; } .hero__title { color: #fff; } .hero__title em { color: var(--ink-300); } .hero__sub { color: var(--ink-300); max-width: 380px; font-size: 15px; line-height: 1.55; } .hero__cta { display: flex; align-items: center; gap: 14px; margin-top: 22px; } @media (max-width: 900px) { .hero__copy { grid-template-columns: 1fr; } } /* ========================================================= BROWSER FRAME ========================================================= */ .browser { border-radius: 10px; background: var(--paper); box-shadow: 0 30px 80px rgba(0,0,0,0.35), 0 8px 20px rgba(0,0,0,0.18); overflow: hidden; border: 1px solid rgba(255,255,255,0.05); } .browser__bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #F2F0EC; border-bottom: 1px solid var(--line); } .browser__dots { display: flex; gap: 6px; } .browser__dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(0,0,0,0.12); } .browser__url { flex: 1; background: rgba(255,255,255,0.7); border-radius: 6px; padding: 4px 12px; font-size: 11px; font-weight: 500; color: var(--ink-500); text-align: center; letter-spacing: -0.005em; margin: 0 60px 0 12px; font-family: var(--font-body); } /* ========================================================= STATS ========================================================= */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; border-top: 1px solid var(--line); padding-top: 56px; } .stat__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(48px, 5vw, 80px); line-height: 0.95; letter-spacing: -0.045em; margin-bottom: 14px; font-variant-numeric: tabular-nums; color: var(--ink-900); } .stat__num em { font-style: normal; font-weight: inherit; font-size: 0.7em; color: var(--ink-400); margin-left: 1px; letter-spacing: -0.02em; } .stat__label { font-size: 13px; color: var(--ink-500); max-width: 180px; line-height: 1.45; letter-spacing: -0.005em; } .section--dark .stats { border-top-color: var(--line-dark); } .section--dark .stat__num em { color: var(--ink-400); } .section--dark .stat__label { color: var(--ink-300); } @media (max-width: 900px) { .stats { grid-template-columns: repeat(2, 1fr); } } /* ========================================================= FEATURE LIST ========================================================= */ .feature { padding: 30px 0; border-top: 1px solid var(--line); /* The numeral sits above the title rather than in a 100px hanging column. That column cost every item a third of its width, which pushed the bodies taller, and three-up needs the width back. */ display: block; transition: padding 320ms var(--ease-out); } .feature__no { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--ink-400); letter-spacing: 0.04em; margin-bottom: 10px; } .feature__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.18; letter-spacing: -0.018em; margin: 0 0 10px 0; } .feature__body { color: var(--ink-700); max-width: 60ch; font-size: 15px; line-height: 1.55; } /* Feature list laid out two-up so the items don't read as one tall stack; collapses to a single column on mobile. Each .feature keeps its top rule; the container closes the bottom edge. */ .feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(28px, 3vw, 52px); border-bottom: 1px solid var(--line); } @media (max-width: 1080px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .feature-grid { grid-template-columns: 1fr; } } /* ---- Dealerships: trust wall ------------------------------------------- The homepage wall is styled white-on-dark for its night band. This one sits on the cream section, so the rules are hairline-on-light instead. */ .trust-wall { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); } .trust-wall .cell { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: center; height: 128px; padding: 24px 32px; background: var(--paper); transition: background 240ms var(--ease-out); } .trust-wall .cell:hover { background: #fff; } .trust-wall .cell img { max-height: 34px; max-width: 86%; width: auto; object-fit: contain; opacity: 0.82; } /* Per-logo heights, as the homepage wall does. These marks run from 1.67:1 (Prestige) to 17.13:1 (Acklam), so one shared height renders the wide ones as slivers: max-width clamps them and object-fit shrinks the height to suit. */ .trust-wall .cell img[alt="Sandicliffe Motor Group"] { max-height: 30px; } .trust-wall .cell img[alt="Windsor Motors"] { max-height: 30px; } .trust-wall .cell img[alt="Hippo Motor Group"] { max-height: 44px; } .trust-wall .cell img[alt="Batchelors"] { max-height: 38px; } .trust-wall .cell img[alt="Dales of Cornwall"] { max-height: 42px; } .trust-wall .cell img[alt="Prestige Cars Kent"] { max-height: 54px; } /* Stays four across on a phone: eight logos in two short rows rather than four tall ones. A logo wall reads fine small, and the page is long enough. */ @media (max-width: 900px) { .trust-wall { grid-template-columns: repeat(3, 1fr); } .trust-wall .cell { height: 92px; padding: 14px 14px; } .trust-wall .cell img { max-height: 26px; } .trust-wall .cell img[alt="Hippo Motor Group"] { max-height: 34px; } .trust-wall .cell img[alt="Prestige Cars Kent"] { max-height: 42px; } } /* ---- Dealerships: why us ---------------------------------------------- */ .whyus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 52px); } @media (max-width: 900px) { .whyus { grid-template-columns: 1fr; gap: 36px; } } .whyus__fig { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 4vw, 60px); line-height: 1; letter-spacing: -0.03em; color: var(--ink-900); font-variant-numeric: tabular-nums; } .whyus__fig em { font-style: normal; font-size: 0.3em; font-weight: 600; color: var(--ink-400); letter-spacing: 0; margin-left: 4px; } .whyus__title { font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.2; letter-spacing: -0.015em; margin: 18px 0 8px; } .whyus__body { color: var(--ink-700); font-size: 14px; line-height: 1.55; margin: 0; } /* ---- Dealerships: how a launch works ---------------------------------- */ .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 2.6vw, 40px); } @media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; } } @media (max-width: 380px) { .steps { grid-template-columns: 1fr; } } .step { border-top: 1px solid var(--line); padding-top: 20px; } .step__no { font-family: var(--font-mono); font-size: 12px; color: var(--ink-400); letter-spacing: 0.04em; margin-bottom: 12px; } .step__title { font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 8px; } .step__body { color: var(--ink-700); font-size: 14px; line-height: 1.55; margin: 0; } /* ---- Dealerships: results (dark band) --------------------------------- */ .results { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 2.6vw, 40px); } @media (max-width: 1000px) { .results { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; } } @media (max-width: 380px) { .results { grid-template-columns: 1fr; } } .result { border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 20px; } .result__fig { font-family: var(--font-display); font-weight: 700; font-size: clamp(42px, 4.4vw, 68px); line-height: 1; letter-spacing: -0.035em; color: #fff; font-variant-numeric: tabular-nums; } .result__fig em { font-style: normal; font-size: 0.4em; color: var(--ink-300); letter-spacing: 0; } .result__what { margin-top: 14px; font-size: 15px; font-weight: 600; color: #fff; } .result__who { margin-top: 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-300); } /* Leasing points. Plain stacked copy, no numerals and no hairlines, so the section reads differently from the numbered feature table above it. */ .lease-point + .lease-point { margin-top: clamp(24px, 2.4vw, 32px); } /* ========================================================= ACCORDION ========================================================= */ .acc { border-top: 1px solid var(--line); } .acc__item { border-bottom: 1px solid var(--line); } .acc__btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 28px 0; text-align: left; gap: 32px; font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.2; letter-spacing: -0.018em; color: var(--ink-900); transition: color 200ms var(--ease-out); } .acc__btn:hover { color: var(--accent); } .acc__icon { width: 22px; height: 22px; flex-shrink: 0; position: relative; } .acc__icon::before, .acc__icon::after { content: ''; position: absolute; background: currentColor; transition: transform 320ms var(--ease-out); } .acc__icon::before { left: 0; right: 0; top: 50%; height: 1.5px; transform: translateY(-50%); } .acc__icon::after { top: 0; bottom: 0; left: 50%; width: 1.5px; transform: translateX(-50%); } .acc__item--open .acc__icon::after { transform: translateX(-50%) rotate(90deg); } .acc__panel { max-height: 0; overflow: hidden; transition: max-height 380ms var(--ease-out); } .acc__panel-inner { padding: 0 0 32px 0; max-width: 64ch; color: var(--ink-700); font-size: 16px; line-height: 1.6; } /* ========================================================= MODAL ========================================================= */ .modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 24px; } .modal[data-open="true"] { display: flex; } .modal__veil { position: absolute; inset: 0; background: rgba(8, 9, 12, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: fadein 280ms var(--ease-out); } .modal__card { position: relative; background: var(--paper); border-radius: 14px; max-width: 560px; width: 100%; padding: 44px; box-shadow: 0 40px 120px rgba(0,0,0,0.4); animation: pop 320ms var(--ease-out); max-height: calc(100vh - 48px); overflow-y: auto; } .modal__close { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(14,16,20,0.06); transition: background 200ms var(--ease-out); } .modal__close:hover { background: rgba(14,16,20,0.12); } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @keyframes pop { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Slow idle bob for hero browser mockup */ @keyframes browser-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .pagehead__visual-inner { /* idle bob disabled — dashboard sits still */ } @media (prefers-reduced-motion: reduce) { .pagehead__visual-inner { animation: none; } } /* Live indicator pulse on the floating tag eyebrow */ @keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } .pagehead__tag-eyebrow::before { content: ''; display: none; /* default: no pulse dot — only the --live variant gets it */ } .pagehead__tag-eyebrow--live::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--autonomy-blue); margin-right: 8px; vertical-align: middle; animation: live-pulse 1.6s ease-in-out infinite; box-shadow: 0 0 0 3px rgba(88, 118, 224, 0.18); } /* Architecture stack — sticky cards that layer over each other on scroll */ .arch-stack { display: flex; flex-direction: column; gap: 28px; /* Trailing room so the last card can stack before the section ends. 24vh left 278px of dead space under it once tier 4 lost its four service cards; 8vh is enough for the stack to resolve without the void. */ padding-bottom: 8vh; } .arch-layer { position: sticky; background: var(--night-2); border: 1px solid var(--line-dark); border-radius: 14px; padding: 40px; min-height: 320px; z-index: 0; transition: transform 600ms var(--ease-out); } /* Cascade resting positions so cards peek from above each other when stacked */ .arch-layer:nth-of-type(1) { top: calc(var(--nav-h) + 32px); z-index: 1; } .arch-layer:nth-of-type(2) { top: calc(var(--nav-h) + 56px); z-index: 2; } .arch-layer:nth-of-type(3) { top: calc(var(--nav-h) + 80px); z-index: 3; } .arch-layer:nth-of-type(4) { top: calc(var(--nav-h) + 104px); z-index: 4; } .arch-layer--core { background: #15233A; border-color: rgba(88, 118, 224, 0.30); } @media (max-width: 900px) { /* Sticky stacking is off below 900px, reversing an earlier decision to match desktop here. Measured at 440x956, tier 3 renders 1088px tall and rests at a 114px offset, so 246px of it was clipped and its last bullets were unreachable; tier 4 lost 86px the same way. Tightening the offsets cannot fix that, because the card is taller than the viewport on its own. Static cards scroll normally and show all of their content, which is worth more on a phone than the stacking flourish. The trailing scroll room goes with it, since it only existed to let the stack resolve. */ /* The nth-of-type cascade above still sets `top`, but it is inert once these are static, so it is left rather than overridden at higher specificity. */ .arch-layer { position: static; min-height: 0; padding: 28px; } .arch-stack { padding-bottom: 0; } } /* Platform modules. Grouped rather than a flat grid of cards: nine equal boxes read as one repeated shape, and on a phone that was nine 240px blocks in a 2288px column. Groups give the eye somewhere to land and collapse to a short outline on small screens, because the structure is an outline, not a layout. */ .modules { display: flex; flex-direction: column; gap: clamp(38px, 4.4vw, 56px); } /* The heading sits on a hairline that runs out to the measure, the same idiom the homepage platform section uses for its numerals. */ /* A label, not a heading. At display weight it sat 25px against the 20px module names in the same face and colour, so the two read as one level. Mono uppercase makes it a divider in the site's existing label language and leaves the module name as the largest thing in the list, which is what it should be. */ .modgroup__title { display: flex; align-items: center; gap: 16px; font-family: var(--font-mono); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-400); margin: 0 0 clamp(20px, 2.2vw, 26px); } .modgroup__title::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--line); } /* Equal 1fr tracks, not flex: a no-grow flex basis aligned the columns but left cards at their 260px floor in a 319px container on a phone, and letting them grow to fill made widths differ between groups (572px in the twos against 370px in the three). 1fr tracks always fill and always match. Two columns, not three. Every group now holds two modules, so two columns fill every row exactly: no empty trailing cell anywhere, which is what three columns left under each pair (UB 8183671). Keep this in step with data/modules.yml: if a group ever holds an odd number again, the last row of that group goes back to having a gap. */ .modgroup__items { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 2.6vw, 40px); } @media (max-width: 620px) { .modgroup__items { grid-template-columns: 1fr; } } .mod { min-width: 0; } /* Sharper contrast between name and detail, so the modules scan as a list of capabilities first and prose second rather than as a run of equal paragraphs. */ .mod__name { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.18; letter-spacing: -0.018em; margin: 0 0 7px; color: var(--ink-900); } .mod__body { margin: 0; color: var(--ink-500); font-size: 13.5px; line-height: 1.6; } /* Architecture layers — clickable jump targets */ /* Tier marker. The numeral is what tells you these four blocks sit on each other; without it they read as four unrelated cards that happen to stack. */ .arch-layer__tier { display: flex; align-items: baseline; gap: 10px; } .arch-layer__no { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: #fff; letter-spacing: 0.04em; } .arch-layer__label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-300); } /* The stack is a diagram, not navigation: it carried a pointer cursor and a hover colour but the only thing a click did was nudge the page down a little. The site thumbnails inside it are the real links, so the affordance lives on them instead. */ .arch-shot { display: block; } .arch-shot img { transition: transform 600ms var(--ease-out); } .arch-shot:hover img, .arch-shot:focus-visible img { transform: scale(1.04); } /* ========================================================= FORM ========================================================= */ /* reCAPTCHA v3's floating badge, bottom-right of every page. Google permits hiding it on one condition: the branding must appear visibly in the user flow instead, which is what the .form-legal line inside every form now carries. Hiding it WITHOUT that line breaches their terms, so the two belong together and neither should be removed on its own. visibility rather than display, because the widget still has to be laid out for reCAPTCHA to score the visitor. */ .grecaptcha-badge { visibility: hidden; } /* The legal line under a form's submit button. It exists to carry the link underline, which was eight inline styles waiting to happen as soon as the two Google links joined the privacy one. */ .form-legal a { border-bottom: 1px solid currentColor; } /* A pair of fields on one line. This is a class rather than the inline grid these rows used to carry, because an inline style outranks every selector: the modal had to fight its own markup with a [style*="grid-template-columns:1fr 1fr"] hack, spelled twice to catch the declaration written with and without a space after the colon. One class covers all four forms, and a fifth gets it free. */ .field-row { display: grid; /* minmax(0,1fr), not 1fr, so a long placeholder cannot push the track wider than its container and take the page sideways with it. */ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } /* One field per line on phones. Two columns left each field 116px wide at 390px, against a "you@dealership.co.uk" placeholder needing 176px and "Dealership or OEM" needing 145px, so both were cut off mid-word. The modal already collapsed at this width and the page forms did not, which is the inconsistency here. */ @media (max-width: 560px) { .field-row { grid-template-columns: minmax(0, 1fr); /* row-gap, not gap: .field already carries margin-bottom:18px, so leaving the 20px on would stack the two and give 38px between the fields inside a row against 18px between one row and the next. Measured 38/18/38 down the stacked form. Zeroing it lets .field's own margin set one rhythm. */ row-gap: 0; } } .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; } .field__label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); } .field__input, .field__textarea { width: 100%; border: 0; border-bottom: 1.5px solid var(--ink-900); background: transparent; font-family: inherit; font-size: 17px; font-weight: 500; color: var(--ink-900); padding: 8px 0 10px 0; outline: none; transition: border-color 200ms var(--ease-out); letter-spacing: -0.005em; /* Came out 43px, one pixel under the 44px minimum. */ min-height: 44px; } .field__input::placeholder, .field__textarea::placeholder { color: var(--ink-300); font-weight: 400; } .field__input:focus, .field__textarea:focus { border-color: var(--accent); } .field__textarea { resize: vertical; min-height: 100px; font-family: inherit; } /* ========================================================= CHIPS / FILTERS ========================================================= */ .chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: transparent; font-size: 13px; font-weight: 600; color: var(--ink-700); transition: all 200ms var(--ease-out); letter-spacing: -0.005em; /* Set explicitly so the element type cannot change the height: a