/* ========================================================================== Truck Guardian — design system · v3 "elegant corporate" Same white ground and same program-colour system as the brochures, but the execution moves from stamped-placard brutalism to how the serious end of this industry presents itself — Volvo Trucks, Caterpillar: generous space, restrained colour, fine rules, and depth that comes from real geometry and light rather than from weight. The 3D is literal. Buttons, cards, chips and the hero object are built from a lit top plane sitting on a shaded side wall. Nothing here is a blurred grey drop shadow standing in for dimension. Elegance here means restraint, not decoration: mixed-case headings instead of shouting caps, hairlines instead of 2px rules, colour used as an edge rather than a fill. Still deliberately absent: gradient blobs, glassmorphism, dark hero washes. ========================================================================== */ /* Fonts load via in — an @import here would block rendering on a second round trip after the CSS itself. */ :root { /* --- ground ------------------------------------------------------------ Warm white rather than pure. Pure #FFF against grayscale photography reads clinical; a few degrees of warmth reads considered. */ --paper: #FFFFFF; --paper-2: #FAF9F7; --paper-3: #F1EFEB; /* --- ink --------------------------------------------------------------- Every step clears 4.5:1 on BOTH grounds. Measured, not estimated. Do not lighten these — fine print is small, so it needs the ratio more than body copy does, not less. */ --ink: #15191F; --ink-2: #3B424C; /* body — 10.2:1 on white, 9.1:1 on the band */ --ink-3: #545C68; /* secondary — 6.8:1 / 6.0:1 */ --ink-4: #5F6773; /* fine print — 5.7:1 / 5.1:1 */ --hairline: #E4E1DC; --hairline-2: #D2CEC7; /* --- program colours --------------------------------------------------- Three tokens each, because a 3D object needs two faces and text needs a third value: block — the lit top face. Carries #000 text. deep — the shaded side wall of the extrusion. ink — the hue darkened to clear 4.5:1 as text on white. */ --blue-block: #2E7FD4; --blue-deep: #1B5490; --blue-ink: #14538F; --red-block: #E0453C; --red-deep: #9E2F28; --red-ink: #B31F16; --green-block: #35A85A; --green-deep: #23743E; --green-ink: #15703A; --gold-block: #E8A81E; --gold-deep: #A37515; --gold-ink: #7A5600; --accent-block: var(--blue-block); --accent-deep: var(--blue-deep); --accent-ink: var(--blue-ink); --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif; --font-body: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --wrap: 1240px; --gut: clamp(22px, 5vw, 60px); --radius: 3px; /* just enough to read as manufactured, not printed */ --depth: 5px; /* extrusion depth — refined; was 9 in the brutalist pass */ /* Elegance lives in the shadow stack: a tight contact shadow plus a wide, very soft ambient one. A single blurry shadow always looks cheap. */ --lift-1: 0 1px 2px rgba(21,25,31,.06), 0 2px 8px -4px rgba(21,25,31,.10); --lift-2: 0 2px 4px rgba(21,25,31,.07), 0 18px 36px -18px rgba(21,25,31,.22); --lift-3: 0 3px 6px rgba(21,25,31,.08), 0 34px 60px -28px rgba(21,25,31,.30); --ease: cubic-bezier(.22,.68,.28,1); --ease-out: cubic-bezier(.16,.84,.32,1); } .t-blue { --accent-block: var(--blue-block); --accent-deep: var(--blue-deep); --accent-ink: var(--blue-ink); } .t-red { --accent-block: var(--red-block); --accent-deep: var(--red-deep); --accent-ink: var(--red-ink); } .t-green { --accent-block: var(--green-block); --accent-deep: var(--green-deep); --accent-ink: var(--green-ink); } .t-gold { --accent-block: var(--gold-block); --accent-deep: var(--gold-deep); --accent-ink: var(--gold-ink); } /* ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink-2); font-family: var(--font-body); font-size: 17px; line-height: 1.68; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: var(--accent-ink); text-decoration: none; } :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; } /* --- type ---------------------------------------------------------------- Mixed case, not uppercase. Shouting is the opposite of elegant, and the condensed face already supplies the authority. Tight tracking and a near-1 line height carry the rest. */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.02; letter-spacing: -.012em; color: var(--ink); margin: 0; text-wrap: balance; } h1 { font-size: clamp(2.7rem, 6.2vw, 5.4rem); font-weight: 700; letter-spacing: -.026em; } h2 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); } h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); } section { padding-block: clamp(72px, 9.5vw, 132px); } .band { background: color-mix(in srgb, var(--accent-block) 4%, var(--paper-2)); border-block: 1px solid color-mix(in srgb, var(--accent-block) 14%, var(--hairline)); } /* --- small type ---------------------------------------------------------- The eyebrow is no longer a filled placard. A fine coloured rule plus letterspaced mono is quieter, and quiet reads as expensive. */ .eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 22px; font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-ink); } .eyebrow::before { content: ''; width: 26px; height: 3px; border-radius: 2px; background: var(--accent-block); flex: none; } .lede { font-size: clamp(1.08rem, 1.5vw, 1.26rem); line-height: 1.62; color: var(--ink-2); max-width: 58ch; } .muted { color: var(--ink-3); } .fineprint { font-size: .8rem; line-height: 1.55; color: var(--ink-4); } .snum { display: flex; justify-content: space-between; gap: 20px; font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); border-bottom: 1px solid var(--hairline); padding-bottom: 14px; margin-bottom: 40px; } /* --- buttons: a lit face on a shaded wall -------------------------------- The first box-shadow is a zero-blur offset in the *deep* tone — that is the side wall of the extrusion. The lift stack behind it grounds the object. Pressing sinks the face into the wall. */ .btn { --bg: var(--ink); --fg: #fff; --wall: var(--accent-deep); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 30px; background: var(--bg); color: var(--fg); border: 0; border-radius: var(--radius); font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; letter-spacing: .04em; cursor: pointer; white-space: nowrap; box-shadow: 0 var(--depth) 0 var(--wall), var(--lift-1); transition: transform .18s var(--ease), box-shadow .18s var(--ease); } .btn:hover { transform: translateY(-2px); box-shadow: 0 calc(var(--depth) + 2px) 0 var(--wall), var(--lift-2); } .btn:active { transform: translateY(var(--depth)); box-shadow: 0 0 0 var(--wall), var(--lift-1); } .btn--ghost { --bg: var(--paper); --fg: var(--ink); --wall: var(--hairline-2); box-shadow: 0 var(--depth) 0 var(--wall), inset 0 0 0 1px var(--hairline-2), var(--lift-1); } .btn--ghost:hover { box-shadow: 0 calc(var(--depth) + 2px) 0 var(--wall), inset 0 0 0 1px var(--hairline-2), var(--lift-2); } .btn--ghost:active { box-shadow: 0 0 0 var(--wall), inset 0 0 0 1px var(--hairline-2), var(--lift-1); } .btn--block { --bg: var(--accent-block); --fg: #0B0D11; --wall: var(--accent-deep); } .btn--flat { box-shadow: none; } .btn--flat:hover { transform: none; box-shadow: var(--lift-1); } .btn svg { width: 18px; height: 18px; flex: none; } /* --- nav ----------------------------------------------------------------- */ .nav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.88); backdrop-filter: blur(16px) saturate(1.3); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease), box-shadow .3s var(--ease); } .nav.is-stuck { border-bottom-color: var(--hairline); box-shadow: var(--lift-1); } /* Reading progress, drawn through the four program colours in order. The brand system doing a second job. */ .nav__progress { position: absolute; left: 0; bottom: -1px; height: 3px; width: 0; background: linear-gradient(90deg, var(--blue-block) 0%, var(--red-block) 34%, var(--green-block) 67%, var(--gold-block) 100%); background-size: 100vw 100%; background-attachment: fixed; /* the gradient stays put; the bar reveals it */ pointer-events: none; } .nav__inner { display: flex; align-items: center; gap: 10px; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); min-height: 86px; transition: min-height .3s var(--ease); } .nav.is-stuck .nav__inner { min-height: 68px; } .nav__logo { display: flex; align-items: center; flex: none; margin-right: 24px; } /* --- brand lockup -------------------------------------------------------- Illustrated rig + live wordmark. The rig is a bitmap cut out to transparency, so it is capped at a modest height and served at ~2x that — scaling a PNG up is what made the old chrome mark look soft. The wordmark stays live text, which keeps half the lockup razor sharp. */ .brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); line-height: 1; } .brand__mark { height: 34px; width: auto; flex: none; transition: height .3s var(--ease); } /* Chakra Petch is squarish and slightly technical — it echoes the angularity of the original chrome lettering without imitating the bevel, and it is clearly distinct from Barlow, which the rest of the site uses. */ .brand__name { font-family: 'Chakra Petch', var(--font-display); font-size: 1.42rem; font-weight: 700; letter-spacing: -.005em; white-space: nowrap; transition: font-size .3s var(--ease); } .brand__name span { font-weight: 600; color: var(--ink-3); } .brand--lg .brand__mark { height: 44px; } .brand--lg .brand__name { font-size: 1.66rem; } .nav.is-stuck .brand__mark { height: 28px; } .nav.is-stuck .brand__name { font-size: 1.28rem; } .nav__links { display: flex; align-items: center; gap: 2px; margin-left: auto; list-style: none; margin-block: 0; padding: 0; } .nav__link { position: relative; display: block; padding: 10px 15px; color: var(--ink-3); font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; border-radius: var(--radius); transition: color .2s var(--ease), background-color .2s var(--ease); } .nav__link::after { content: ''; position: absolute; left: 15px; right: 15px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--accent-block); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out); } .nav__link:hover { color: var(--ink); background: var(--paper-3); } .nav__link[aria-current="page"] { color: var(--ink); } .nav__link[aria-current="page"]::after { transform: scaleX(1); } .nav__cta { min-height: 46px; padding: 0 20px; font-size: 1rem; margin-left: 14px; } .nav__burger { display: none; margin-left: auto; width: 46px; height: 46px; background: var(--paper); border: 1px solid var(--hairline-2); border-radius: var(--radius); color: var(--ink); cursor: pointer; align-items: center; justify-content: center; } /* --- skip link ----------------------------------------------------------- */ .skip { position: fixed; top: 10px; left: 10px; z-index: 200; transform: translateY(calc(-100% - 40px)); transition: transform .18s var(--ease); } .skip:focus { transform: none; } /* :focus, not :focus-visible — it must appear for every way it can be reached */ /* --- hero ---------------------------------------------------------------- */ .hero { padding-block: 0; border-bottom: 1px solid var(--hairline); background: radial-gradient(1100px 520px at 78% 16%, rgba(46,127,212,.07), transparent 62%), var(--paper); } .hero__grid { display: grid; grid-template-columns: 1.06fr .94fr; align-items: center; gap: clamp(24px, 4vw, 60px); max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); } .hero__copy { padding-block: clamp(64px, 8vw, 116px); } .hero h1 { margin-bottom: 26px; } .hero h1 > span { display: block; } /* direct children only — the nested .mark must stay inline or its underline stretches the full column */ /* Emphasis is an underline sitting under the baseline, not a highlighter block — a filled rectangle behind live text is a marker-pen gesture. */ .hero h1 .mark { display: inline; color: var(--ink); background: linear-gradient(var(--accent-block), var(--accent-block)) 0 92% / 100% 9px no-repeat; padding-bottom: 2px; } .hero .lede { margin-bottom: 38px; } .hero__actions { display: flex; flex-wrap: wrap; gap: 16px; } .hero__viz { position: relative; margin: 0; min-height: 470px; padding-block: 40px 0; } /* --- the key ------------------------------------------------------------- The stack is a diagram, not decoration, so it has to say what it maps to. Ordered and numbered exactly like the cards further down the page. */ .iso__key { /* In normal flow beneath the figure, where a chart legend belongs. Absolute positioning here collided with the stack at every viewport. */ margin-top: 104px; /* clears the stack's overhang below the photo */ padding-top: 20px; border-top: 1px solid var(--hairline); } .iso__key-title { margin: 0 0 12px; font-family: var(--font-display); font-size: 1.06rem; font-weight: 600; color: var(--ink); } .iso__key ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 10px 18px; } .iso__key li { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: .71rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; } /* each swatch is a miniature of the slab it points at — same lit face, same shaded wall, so the mapping is unmistakable */ .iso__key .k { width: 15px; height: 9px; flex: none; border-radius: 2px; background: linear-gradient(148deg, color-mix(in srgb, var(--k) 80%, white), var(--k)); box-shadow: 0 2px 0 -.5px var(--k-deep); } .k--blue { --k: var(--blue-block); --k-deep: var(--blue-deep); } .k--red { --k: var(--red-block); --k-deep: var(--red-deep); } .k--green { --k: var(--green-block); --k-deep: var(--green-deep); } .k--gold { --k: var(--gold-block); --k-deep: var(--gold-deep); } /* The photograph is the colour in the hero; the slab stack sits in front of it as the abstract layer. Two planes at different depths — the composition is the 3D idea, not just the objects in it. */ .hero__photo { margin: 0; border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--paper-3); box-shadow: 0 2px 4px rgba(21,25,31,.10), 0 40px 70px -34px rgba(21,25,31,.45); } .hero__photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s var(--ease-out); } .hero__viz:hover .hero__photo img { transform: scale(1.05); } .hero__viz .iso { position: absolute; left: 3%; bottom: 112px; --w: min(226px, 33%); z-index: 2; filter: drop-shadow(0 26px 34px rgba(21,25,31,.34)); } /* At hero scale the slabs are ~258px, which puts the labels at roughly 8px — too small to read and too busy against the photograph. The four colours are restated with names on the cards directly below, so the stack works here as a pure colour motif. */ .hero__viz .slab__label { display: none; } /* --- the isometric stack ------------------------------------------------- Four extruded slabs, one per program, on a shared isometric plane. Each is a lit top face (a gradient running off the light source) sitting on a shaded side wall drawn as a zero-blur offset in the deep tone, plus a soft contact shadow. This is the site's one piece of ornament, so it carries the whole 3D idea by itself. */ .iso { --w: min(390px, 74vw); position: relative; width: var(--w); height: calc(var(--w) * .94); animation: iso-float 9s var(--ease) infinite; } @keyframes iso-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } .slab { position: absolute; left: 0; right: 0; height: 23%; border-radius: 3px; transform: rotateX(58deg) rotateZ(-45deg); transform-origin: 50% 50%; display: grid; place-items: center; background: linear-gradient(148deg, color-mix(in srgb, var(--c) 82%, white) 0%, var(--c) 58%, color-mix(in srgb, var(--c) 88%, black) 100%); box-shadow: 0 11px 0 -1px var(--c-deep), /* the side wall */ 0 30px 42px -24px rgba(21,25,31,.55); /* contact shadow on the ground */ transition: transform .55s var(--ease-out); } .slab__side { display: none; } /* the wall is the offset shadow above */ .slab__top { display: contents; } .slab__label { font-family: var(--font-mono); font-size: .62rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(0,0,0,.66); transform: rotateZ(45deg) scaleY(1.5); /* un-skew back to readable */ white-space: nowrap; } .iso__l1 { top: 2%; --c: var(--blue-block); --c-deep: var(--blue-deep); } .iso__l2 { top: 21%; --c: var(--red-block); --c-deep: var(--red-deep); } .iso__l3 { top: 40%; --c: var(--green-block); --c-deep: var(--green-deep); } .iso__l4 { top: 59%; --c: var(--gold-block); --c-deep: var(--gold-deep); } /* hovering fans the stack apart along the viewing axis */ .iso:hover .iso__l1 { transform: rotateX(58deg) rotateZ(-45deg) translate(-16px, -16px); } .iso:hover .iso__l2 { transform: rotateX(58deg) rotateZ(-45deg) translate(-10px, -10px); } .iso:hover .iso__l3 { transform: rotateX(58deg) rotateZ(-45deg) translate(-5px, -5px); } .iso__caption { position: absolute; left: 0; right: 0; bottom: -34px; text-align: center; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-4); } /* --- stats --------------------------------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--hairline); } .stat { position: relative; padding: 34px 30px 34px; border-left: 1px solid var(--hairline); } .stat:first-child { border-left: 0; padding-left: 0; } .stat::before { /* colour marker, one per programme */ content: ''; position: absolute; top: -1px; left: 0; width: 46px; height: 3px; border-radius: 0 0 2px 2px; background: var(--m); } .stat:nth-child(1) { --m: var(--blue-block); } .stat:nth-child(2) { --m: var(--red-block); } .stat:nth-child(3) { --m: var(--green-block); } .stat:nth-child(4) { --m: var(--gold-block); } .stat__n { font-family: var(--font-display); font-size: clamp(2.1rem, 3.3vw, 2.9rem); font-weight: 600; line-height: 1; letter-spacing: -.02em; color: var(--ink); } .stat__l { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-4); margin-top: 12px; } .stats--inset { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); } /* --- section heading ----------------------------------------------------- */ .shead { max-width: 60ch; margin-bottom: clamp(40px, 5vw, 66px); } .shead h2 { margin-bottom: 20px; } /* --- program cards: dimensional objects ---------------------------------- The grid owns the perspective; each card is a plane inside it. On hover the card lifts toward the viewer and tilts about two degrees. More than that becomes a novelty — this is the difference between depth and gimmick. */ .grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); gap: 26px; perspective: 1800px; } .pcard { position: relative; display: flex; flex-direction: column; background: var(--paper); border-radius: var(--radius); overflow: hidden; box-shadow: inset 0 0 0 1px var(--hairline), 0 var(--depth) 0 -1px var(--paper-3), var(--lift-1); transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); } .pcard:hover { transform: translateY(-8px) rotateX(2.2deg) rotateY(-2.2deg) scale(1.012); box-shadow: inset 0 0 0 1px var(--hairline-2), 0 var(--depth) 0 -1px var(--accent-block), var(--lift-3); } /* the program colour reads as a lit edge along the top of the object */ .pcard__tag { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 13px; background: color-mix(in srgb, var(--accent-block) 7%, var(--paper)); border-bottom: 1px solid color-mix(in srgb, var(--accent-block) 22%, var(--hairline)); font-family: var(--font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); } .pcard__tag::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--accent-block), var(--accent-deep)); } .pcard__tag span:last-child { color: var(--ink-4); } .pcard__media { aspect-ratio: 4 / 3.4; overflow: hidden; background: var(--paper-3); } .pcard__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.06) brightness(1.02); transition: transform .8s var(--ease-out), filter .5s var(--ease); } .pcard:hover .pcard__media img { transform: scale(1.055); filter: saturate(1) contrast(1.08); } .pcard__body { padding: 26px 24px 28px; display: flex; flex-direction: column; flex: 1; } .pcard h3 { margin-bottom: 12px; } .pcard p { font-size: .95rem; color: var(--ink-2); } .pcard__meta { margin: 20px 0 22px; padding-top: 4px; border-top: 1px solid var(--hairline); font-family: var(--font-mono); font-size: .73rem; } .pcard__meta > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hairline); color: var(--ink-4); letter-spacing: .08em; text-transform: uppercase; } .pcard__meta > div:last-child { border-bottom: 0; } .pcard__meta strong { color: var(--ink); font-weight: 600; text-align: right; } .pcard__link { margin-top: auto; display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--accent-ink); } .pcard__link svg { width: 17px; height: 17px; transition: transform .3s var(--ease-out); } .pcard:hover .pcard__link svg { transform: translateX(6px); } .pcard__link::before { content: ''; position: absolute; inset: 0; } /* --- value blocks -------------------------------------------------------- */ .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(276px, 1fr)); gap: 0; border-top: 1px solid var(--hairline); } .vcard { padding: 38px 36px 40px; border-left: 1px solid var(--hairline); } .vcard:first-child { border-left: 0; padding-left: 0; } .vcard__n { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-bottom: 24px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1px var(--hairline-2), 0 3px 0 -1px var(--accent-block), var(--lift-1); font-family: var(--font-mono); font-size: .74rem; font-weight: 600; color: var(--accent-ink); } .vcard h3 { margin-bottom: 12px; } .vcard p { font-size: .96rem; } /* --- comparison table ---------------------------------------------------- */ .tablewrap { overflow-x: auto; border-radius: var(--radius); background: var(--paper); box-shadow: inset 0 0 0 1px var(--hairline), var(--lift-1); -webkit-overflow-scrolling: touch; } table.cmp { width: 100%; min-width: 840px; border-collapse: collapse; font-size: .94rem; } .cmp th, .cmp td { padding: 17px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hairline); } .cmp thead th { background: var(--paper-2); border-bottom: 1px solid var(--hairline-2); font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; letter-spacing: -.005em; color: var(--ink); vertical-align: bottom; } .cmp thead th[data-c] { box-shadow: inset 0 4px 0 var(--c); } .cmp thead th[data-c="blue"] { --c: var(--blue-block); } .cmp thead th[data-c="red"] { --c: var(--red-block); } .cmp thead th[data-c="green"] { --c: var(--green-block); } .cmp thead th[data-c="gold"] { --c: var(--gold-block); } .cmp tbody th { font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); width: 208px; } .cmp td { color: var(--ink-2); } .cmp tbody tr { transition: background-color .2s var(--ease); } .cmp tbody tr:hover { background: var(--paper-2); } .cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; } .yes { color: var(--green-ink); font-weight: 600; } .no { color: var(--ink-4); } /* --- coverage chips ------------------------------------------------------ */ .covergrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 0; } .covergrid li { position: relative; padding: 15px 18px 15px 22px; background: var(--paper); border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--hairline), 0 3px 0 -1px var(--paper-3), var(--lift-1); font-size: .94rem; font-weight: 500; color: var(--ink); transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out); } .covergrid li::before { content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent-block); } .covergrid li:hover { transform: translateY(-3px); background: color-mix(in srgb, var(--accent-block) 5%, var(--paper)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-block) 30%, var(--hairline-2)), 0 3px 0 -1px var(--accent-block), var(--lift-2); } /* --- checklists ---------------------------------------------------------- */ .checks { list-style: none; padding: 0; margin: 0; } .checks li { display: grid; grid-template-columns: 24px 1fr; gap: 16px; align-items: start; padding: 19px 0; border-bottom: 1px solid var(--hairline); } .checks li:first-child { border-top: 1px solid var(--hairline); } .checks svg { width: 21px; height: 21px; color: var(--accent-ink); margin-top: 3px; } .checks strong { color: var(--ink); font-weight: 600; } /* --- panel --------------------------------------------------------------- */ .panel { background: var(--paper); border-radius: var(--radius); padding: clamp(28px, 3.4vw, 42px); box-shadow: inset 0 0 0 1px var(--hairline), 0 var(--depth) 0 -1px var(--paper-3), var(--lift-2); } .panel--accent { box-shadow: inset 0 0 0 1px var(--hairline), 0 var(--depth) 0 -1px var(--accent-block), var(--lift-2); } /* --- data plate ---------------------------------------------------------- */ .deflist { display: grid; margin: 0; border-top: 1px solid var(--hairline); } .deflist > div { display: grid; grid-template-columns: 1fr auto; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--hairline); } .deflist > div:last-child { border-bottom: 0; } .deflist dt { font-family: var(--font-mono); font-size: .71rem; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); align-self: center; } .deflist dd { margin: 0; font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; letter-spacing: -.005em; color: var(--ink); text-align: right; line-height: 1.2; } /* --- split --------------------------------------------------------------- */ .split { display: grid; grid-template-columns: repeat(auto-fit, minmax(316px, 1fr)); gap: clamp(34px, 5vw, 72px); align-items: start; } .split--center { align-items: center; } /* --- CTA ----------------------------------------------------------------- */ .cta { text-align: center; color: #E8EBF0; background: radial-gradient(760px 340px at 50% 0%, rgba(46,127,212,.20), transparent 66%), linear-gradient(180deg, #1A1F27 0%, #12161C 100%); } .cta h2 { color: #fff; } .cta .lede { color: #B9C0CB; margin-inline: auto; margin-bottom: 30px; } .cta .eyebrow { color: #9FC4EC; } .cta .tel { color: #fff; } .cta__actions { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin-top: 10px; } .cta .btn--ghost { --bg: transparent; --fg: #fff; --wall: rgba(255,255,255,.22); box-shadow: 0 var(--depth) 0 var(--wall), inset 0 0 0 1px rgba(255,255,255,.28); } /* --- phone --------------------------------------------------------------- */ .tel { font-family: var(--font-display); font-size: clamp(2.2rem, 4.2vw, 3.1rem); font-weight: 600; letter-spacing: -.015em; color: var(--ink); display: inline-block; line-height: 1.1; } /* --- page header --------------------------------------------------------- */ .phead { position: relative; border-bottom: 1px solid var(--hairline); padding-block: clamp(48px, 6vw, 82px) clamp(44px, 5vw, 68px); background: radial-gradient(880px 380px at 6% 0%, color-mix(in srgb, var(--accent-block) 16%, transparent), transparent 68%), linear-gradient(180deg, color-mix(in srgb, var(--accent-block) 5%, var(--paper-2)), var(--paper-2)); } .phead::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--accent-block), var(--accent-deep)); } .phead h1 { font-size: clamp(2.3rem, 4.6vw, 3.7rem); margin-bottom: 18px; } .crumbs { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-family: var(--font-mono); font-size: .71rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 22px; } .crumbs a { color: var(--ink-3); } .crumbs a:hover { color: var(--ink); } /* --- form ---------------------------------------------------------------- */ .form { display: grid; gap: 20px; } .field { display: grid; gap: 8px; } .field label { font-family: var(--font-mono); font-size: .71rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); } .field .req { color: var(--red-ink); } .field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 13px 16px; background: var(--paper); border: 0; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--hairline-2); color: var(--ink); font-family: var(--font-body); font-size: 1rem; transition: box-shadow .2s var(--ease); } .field textarea { min-height: 140px; resize: vertical; } .field input::placeholder, .field textarea::placeholder { color: var(--ink-4); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--blue-block), 0 0 0 4px rgba(46,127,212,.14); } .field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 20px; } /* --- footer -------------------------------------------------------------- */ .footer { border-top: 1px solid var(--hairline); background: var(--paper); padding-block: 64px 30px; } .footer__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 48px; padding-bottom: 42px; border-bottom: 1px solid var(--hairline); } .footer__logo { display: inline-block; margin-bottom: 20px; } .footer h4 { font-family: var(--font-mono); font-size: .71rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 18px; } .footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; } .footer a { color: var(--ink-2); font-size: .95rem; } .footer a:hover { color: var(--ink); } .footer__bottom { padding-top: 24px; display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between; } /* --- reveal -------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(38px); transition: opacity .85s var(--ease-out), transform .85s var(--ease-out); transition-delay: var(--d, 0ms); } .reveal.is-in { opacity: 1; transform: none; } /* --- responsive ---------------------------------------------------------- */ @media (max-width: 1000px) { .hero__grid { grid-template-columns: 1fr; } .hero__copy { padding-block: 68px 8px; } .hero__viz { min-height: 0; padding-bottom: 0; } .hero__viz .iso { --w: min(260px, 52%); left: -4%; bottom: -6%; } .stats { grid-template-columns: repeat(2, 1fr); } .stat { border-top: 1px solid var(--hairline); padding-inline: 22px; } .stat:nth-child(-n+2) { border-top: 0; } .stat:nth-child(odd) { border-left: 0; padding-left: 0; } .grid-3 { grid-template-columns: 1fr; } .vcard { border-left: 0; border-top: 1px solid var(--hairline); padding-inline: 0; } .vcard:first-child { border-top: 0; } } @media (max-width: 900px) { .nav__burger { display: flex; } .nav__links { position: absolute; inset: 100% 0 auto; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); border-bottom: 1px solid var(--hairline); box-shadow: var(--lift-2); padding: 8px var(--gut) 22px; display: none; } .nav__links.is-open { display: flex; } .nav__link { padding: 15px 4px; font-size: 1.14rem; border-bottom: 1px solid var(--hairline); border-radius: 0; } .nav__link::after { display: none; } .nav__cta { margin: 20px 0 0; align-self: flex-start; } .footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { :root { --depth: 4px; } body { font-size: 16px; } .footer__grid { grid-template-columns: 1fr; gap: 34px; } .deflist > div { grid-template-columns: 1fr; gap: 3px; } .deflist dd { text-align: left; } .btn { width: 100%; } .hero__viz .iso { position: static; --w: min(280px, 74vw); margin: 26px auto 0; } .hero__viz { padding-bottom: 20px; } .iso__key { margin-top: 30px; } .iso__key ul { grid-template-columns: repeat(2, auto); justify-content: start; gap: 10px 24px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } .iso { animation: none; } } @media print { .nav, .cta { display: none; } .pcard, .panel { box-shadow: none; border: 1px solid #ccc; } } /* ========================================================================== HERO — the rig drives in, once. Deliberately not a scrolling world. A parallax scene needs the truck and the scenery to share a perspective, and every layer added is another thing that can disagree with the artwork. One entrance says the same thing and cannot fall out of register. ========================================================================== */ .scene { position: relative; aspect-ratio: 16 / 8; display: grid; align-items: end; overflow: hidden; /* the rig starts outside this box */ } /* the ground the rig sits on: a soft contact shadow, no drawn road */ .scene::after { content: ''; position: absolute; left: 6%; right: 6%; bottom: 8%; height: 16px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(21,25,31,.26) 0%, rgba(21,25,31,.10) 45%, transparent 72%); } .scene__truck { position: relative; z-index: 1; width: 100%; padding-bottom: 6%; } .scene__truck img { width: 100%; height: auto; display: block; } /* The rig faces left, so it enters from the right — driving forwards. Overshoot slightly and settle back, which reads as weight coming to rest rather than a box sliding to a stop. */ @keyframes rig-arrive { 0% { transform: translateX(122%); } 78% { transform: translateX(-1.2%); } 100% { transform: translateX(0); } } /* Slower, and it waits a beat. Landing the rig the instant the page paints means nobody sees it arrive — the eye is still on the headline. Holding for 0.55s lets the copy land first, then the truck pulls in over 2.1s with a long tail on the easing, which reads as weight rather than a slide. */ .scene__truck { animation: rig-arrive 2.1s cubic-bezier(.16,.72,.24,1) .55s both; } @media (prefers-reduced-motion: reduce) { .scene__truck { animation: none; } } /* ========================================================================== MOTION — borrowed from the agency playbook, minus the parts that would cost the reader something. Kept: staggered type, considered easing, timings in the 0.6–1.2s band. Dropped: hijacked scrolling, WebGL, glassmorphism, particle fields — all of which read as the current house style rather than as this company, and none of which help someone compare a deductible. ========================================================================== */ /* --- headline stagger ---------------------------------------------------- */ .hero h1 .wd { display: inline-block; } /* words stay whole when wrapping */ .hero h1.is-split .ch { display: inline-block; opacity: 0; transform: translateY(.42em); animation: ch-rise .78s cubic-bezier(.2,.75,.3,1) both; animation-delay: calc(var(--i) * 17ms); } @keyframes ch-rise { from { opacity: 0; transform: translateY(.42em); } to { opacity: 1; transform: none; } } /* the underline is drawn on after the word it belongs to has landed */ .hero h1.is-split .mark { background-size: 0% 9px; animation: mark-draw .7s cubic-bezier(.2,.75,.3,1) .72s both; } @keyframes mark-draw { to { background-size: 100% 9px; } } /* --- hero drift ---------------------------------------------------------- */ .scene__truck { opacity: var(--fade, 1); will-change: transform; } /* the entrance owns the transform while it plays, so drift waits its turn */ /* Slower, and it waits a beat. Landing the rig the instant the page paints means nobody sees it arrive — the eye is still on the headline. Holding for 0.55s lets the copy land first, then the truck pulls in over 2.1s with a long tail on the easing, which reads as weight rather than a slide. */ .scene__truck { animation: rig-arrive 2.1s cubic-bezier(.16,.72,.24,1) .55s both; } @media (prefers-reduced-motion: reduce) { .hero h1.is-split .ch { opacity: 1; transform: none; animation: none; } .hero h1.is-split .mark { background-size: 100% 9px; animation: none; } .scene__truck { transform: none; opacity: 1; } } /* ========================================================================== SECTION MOTION — the page had almost nothing below the hero. These are the moments worth animating: things arriving in sequence, and the one moment where colour explains the product. ========================================================================== */ /* --- program cards: rise and settle, one after another ------------------- */ .grid-4 .pcard.reveal { transform: translateY(54px) scale(.965); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); } .grid-4 .pcard.reveal.is-in { transform: none; } /* the colour cap on each card draws across once the card has landed */ .pcard__tag::before { transform: scaleX(0); transform-origin: left; } .pcard.is-in .pcard__tag::before { transform: scaleX(1); transition: transform .7s var(--ease-out) calc(var(--d, 0ms) + .34s); } /* --- comparison table: rows arrive in sequence --------------------------- */ .cmp tbody tr { opacity: 0; transform: translateY(14px); } .tablewrap.is-in .cmp tbody tr { opacity: 1; transform: none; transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); } .tablewrap.is-in .cmp tbody tr:nth-child(1) { transition-delay: .10s; } .tablewrap.is-in .cmp tbody tr:nth-child(2) { transition-delay: .18s; } .tablewrap.is-in .cmp tbody tr:nth-child(3) { transition-delay: .26s; } .tablewrap.is-in .cmp tbody tr:nth-child(4) { transition-delay: .34s; } .tablewrap.is-in .cmp tbody tr:nth-child(5) { transition-delay: .42s; } .tablewrap.is-in .cmp tbody tr:nth-child(n+6) { transition-delay: .5s; } /* the four programme colours draw in across the header */ .cmp thead th[data-c] { position: relative; overflow: hidden; } .cmp thead th[data-c]::before { transform: scaleX(0); transform-origin: left; } .tablewrap.is-in .cmp thead th[data-c]::before { transform: scaleX(1); transition: transform .8s var(--ease-out); } .tablewrap.is-in .cmp thead th[data-c="blue"]::before { transition-delay: .05s; } .tablewrap.is-in .cmp thead th[data-c="red"]::before { transition-delay: .15s; } .tablewrap.is-in .cmp thead th[data-c="green"]::before { transition-delay: .25s; } .tablewrap.is-in .cmp thead th[data-c="gold"]::before { transition-delay: .35s; } /* --- lists: benefits and value blocks arrive in order -------------------- */ .checks li, .vcard, .covergrid li { --lag: 0ms; } .checks.is-in li, .grid-3.is-in .vcard, .covergrid.is-in li { animation: item-rise .62s var(--ease-out) both; animation-delay: var(--lag); } @keyframes item-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .grid-4 .pcard.reveal, .grid-4 .pcard.reveal.is-in { transform: none; } .pcard__tag::before, .cmp thead th[data-c]::before { transform: scaleX(1); } .cmp tbody tr { opacity: 1; transform: none; } .checks.is-in li, .grid-3.is-in .vcard, .covergrid.is-in li { animation: none; } } /* ========================================================================== CINEMATIC COVERAGE — a pinned, scroll-scrubbed sequence. This is the piece that makes a page feel authored rather than scrolled: the section holds still while its content advances under your scroll. The rig is built procedurally in WebGL from primitives — no model files, so nothing to download and nothing to go missing. Everything here degrades: without JS or WebGL the canvas stays empty, the panels are plain stacked text, and a plain-language fallback line explains the same coverage. ========================================================================== */ .cine { position: relative; padding: 0; background: radial-gradient(140% 90% at 60% 42%, #131C27 0%, #0C1219 62%, #090E14 100%); color: #E6ECF4; } /* the scroll distance that the pinned stage plays across */ .cine.is-live { height: 380vh; } /* ramps get ~68% of a 280vh run: ~39px of scroll per frame at 1100 tall */ .cine__stage { position: relative; min-height: 100vh; overflow: hidden; } .cine.is-live .cine__stage { position: sticky; top: 0; height: 100vh; } /* the diagram: the illustration we already have, with the four systems marked on it. Dimming the rig and lighting one marker communicates the same thing a 3D model would, and it cannot be mis-drawn. */ .cine__diagram { position: absolute; inset: 0; display: grid; place-items: center; padding-left: 27%; padding-right: 2%; overflow: hidden; /* the rig grows past the frame as it pushes in */ } .cine__rig { position: relative; width: 100%; max-width: 1040px; /* origin animates too, so the push-in glides between parts instead of snapping to a new anchor */ transition: transform-origin 1.1s var(--ease-out); will-change: transform; } /* The schematic is black line art on white. Inverting it gives white lines on black, and screen blending then drops that black away — so it sits on the dark section as clean line work with no cutout needed, and nothing to go ragged around thin lines the way a background remover would. */ .cine__rig img { width: 100%; height: auto; display: block; /* Fallback only, for the moment before the canvas keyer runs (or if it cannot). Inverting plus screen gets white lines on dark, at the cost of a faintly lighter rectangle where the image box sits. */ filter: invert(1) grayscale(1) contrast(3.2) brightness(.72); mix-blend-mode: screen; opacity: .55; transition: opacity .5s var(--ease); } /* Keyed: the image now carries real transparency, so every workaround comes off. No filter, no blend, no bounding box — it sits on the section the way a PNG cutout would. */ .cine__rig img.is-keyed { filter: none; mix-blend-mode: normal; opacity: .92; } .cine__spot { position: absolute; left: var(--x); top: var(--y); width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; opacity: 0; transform: scale(.7); transition: opacity .45s var(--ease), transform .45s var(--ease-out); background: radial-gradient(circle, rgb(var(--spot-rgb) / .34) 0%, rgb(var(--spot-rgb) / .12) 45%, transparent 70%); box-shadow: 0 0 0 2px rgb(var(--spot-rgb) / .55) inset; } .cine__spot.is-lit { opacity: 1; transform: scale(1); } .cine__spot.is-lit::after { content: ''; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgb(var(--spot-rgb) / .4); animation: spot-ping 2.1s ease-out infinite; } @keyframes spot-ping { 0% { transform: scale(.72); opacity: .9; } 100% { transform: scale(1.25); opacity: 0; } } .cine__spot--engine { --spot-rgb: 46 127 212; } .cine__spot--transmission { --spot-rgb: 224 69 60; } .cine__spot--axle { --spot-rgb: 53 168 90; } .cine__spot--emissions { --spot-rgb: 232 168 30; } /* vignette so the UI never fights the wireframe for contrast */ .cine__veil { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(135% 100% at 64% 50%, transparent 46%, rgba(8,12,18,.55) 100%), linear-gradient(90deg, rgba(8,12,18,.90) 0%, rgba(8,12,18,.74) 18%, rgba(8,12,18,.40) 34%, rgba(8,12,18,.14) 46%, transparent 60%); } .cine__ui { position: relative; z-index: 2; min-height: 100vh; display: grid; align-content: center; gap: 34px; padding-block: 90px; } .cine__head h2 { color: #fff; max-width: 18ch; } .cine__head .eyebrow { color: #8FBDF0; } .cine__panels { position: relative; min-height: 210px; max-width: 430px; } /* floating panel: a real surface, blurred over the scene behind it */ .cine__panel { position: absolute; inset: 0 auto auto 0; width: 100%; padding: 26px 28px 28px; border-radius: 6px; background: rgba(20, 28, 38, .58); backdrop-filter: blur(14px) saturate(1.4); box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 3px 8px rgba(0,0,0,.30), 0 30px 60px -30px rgba(0,0,0,.9); opacity: 0; transform: translateY(26px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); pointer-events: none; } .cine__panel.is-on { opacity: 1; transform: none; pointer-events: auto; } .cine__panel::before { /* the programme colour, as a lit edge */ content: ''; position: absolute; inset: 0 0 auto; height: 3px; border-radius: 6px 6px 0 0; background: linear-gradient(90deg, var(--accent-block), var(--accent-deep)); } .cine__panel h3 { color: #fff; margin-bottom: 10px; } .cine__panel p { color: #B4C0CE; font-size: .96rem; margin: 0; } .cine__num { display: block; margin-bottom: 12px; font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .18em; color: var(--accent-block); } /* progress rail — shows how far through the sequence you are */ .cine__rail { position: relative; width: 100%; max-width: 430px; height: 2px; background: rgba(255,255,255,.13); border-radius: 2px; overflow: hidden; } .cine__railfill { position: absolute; inset: 0 auto 0 0; width: 0%; background: linear-gradient(90deg, var(--blue-block), var(--gold-block)); } /* shown only when the sequence cannot run */ .cine__fallback { position: relative; z-index: 2; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut) 72px; color: #A9B6C6; } .cine.is-live .cine__fallback { display: none; } @media (max-width: 900px) { .cine.is-live { height: auto; } .cine.is-live .cine__stage { position: relative; height: auto; min-height: 0; } .cine__diagram { position: relative; padding: 0 0 12px; } .cine__ui { min-height: 0; padding-block: 48px 60px; } .cine__panels { min-height: 0; } .cine__panel { position: relative; opacity: 1; transform: none; margin-bottom: 14px; } } @media (prefers-reduced-motion: reduce) { .cine.is-live { height: auto; } .cine.is-live .cine__stage { position: relative; height: auto; } .cine__panel { position: relative; opacity: 1; transform: none; margin-bottom: 14px; } } /* the 3D rig replaces the flat schematic when WebGL is available */ .cine__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* ========================================================================== TOUCH TARGETS — measured on a 390px viewport, not assumed. Anything you tap needs ~44px of height. Three things were under it: the phone links (28–39px), the nav logo (34px), and inline text links in the footer and body copy. The phone number is the primary call to action on a site aimed at drivers, so it mattered most. ========================================================================== */ @media (max-width: 900px) { /* phone links: pad to a comfortable tap without changing how they look */ .tel { display: inline-flex; align-items: center; min-height: 48px; } .nav__logo { min-height: 44px; } /* inline links in prose, the footer list, and standalone body links */ .footer a, .crumbs a, .fineprint a, .cine__fallback a, .lede a, .muted a { display: inline-block; padding-block: 11px; /* 8px left these at 42 — two short of the mark */ } /* the card link already spans the whole card via its ::before, but give the visible text a real height too so it is obvious what is tappable */ .pcard__link { min-height: 46px; align-items: center; } } /* ========================================================================== MOBILE LAYOUT — measured on the live site at 390px. Nothing was broken; it was loose. The hero had ~150px of air between the buttons and the rig, the coverage stage kept a desktop 100vh floor, and the schematic showed with none of its markers — so on a phone it was a small truck floating over a dark block, unrelated to the panels beneath it. ========================================================================== */ @media (max-width: 1000px) { .hero__copy { padding-block: 56px 0; } .hero__viz { padding-top: 12px; } } @media (max-width: 560px) { /* the scene box takes its height from the rig instead of a 16:8 frame */ .scene { aspect-ratio: auto; } .scene__truck { padding-bottom: 9%; } /* room for the contact shadow */ .hero__viz { padding-top: 6px; padding-bottom: 8px; } .iso__key { margin-top: 10px; padding-top: 14px; } } @media (max-width: 900px) { /* Order becomes heading → labelled schematic → panels. `display: contents` lifts the heading and panels out of .cine__ui so they can be siblings of the diagram and take an explicit order; .cine__ui's own padding goes with it, so each child carries the gutter itself. */ .cine__stage { min-height: 0; display: flex; flex-direction: column; } .cine__ui { display: contents; } .cine__head { order: 1; padding: 56px var(--gut) 0; } .cine__diagram { order: 2; position: relative; padding: 26px 8px 8px; } /* near-bleed: every px of width is drawing */ .cine__panels { order: 3; padding: 0 var(--gut); max-width: none; } .cine__rail { display: none; } .cine__rig { max-width: none; } /* The veil is a desktop device: it darkens the left of the stage so copy reads over the diagram. With .cine__ui flattened by display: contents, its z-index went too, and the veil ended up painting OVER the heading — left half dim, right half bright, on every line. On mobile the diagram is in flow and the rig image feathers its own edges, so the veil has no job here. */ .cine__veil { display: none; } .cine__head, .cine__diagram, .cine__panels { position: relative; z-index: 2; } /* Every marker shows, numbered to match the panels. On desktop they light one at a time under the scroll; here there is no scroll sequence, so the diagram has to explain itself at a glance. */ .cine__spot { opacity: 1; transform: none; /* 38px collided on a ~230px-wide drawing: engine, transmission and axle sit within ~110px of each other at this scale */ width: 28px; height: 28px; margin: -14px 0 0 -14px; display: grid; place-items: center; background: rgb(var(--spot-rgb) / .30); box-shadow: 0 0 0 2px rgb(var(--spot-rgb) / .95) inset, 0 0 0 4px rgba(9, 14, 20, .75); } .cine__spot::before { font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .04em; color: #FFFFFF; } .cine__spot--engine::before { content: '01'; } .cine__spot--transmission::before { content: '02'; } .cine__spot--axle::before { content: '03'; } .cine__spot--emissions::before { content: '04'; } .cine__spot::after { display: none; } /* no ping ring without a sequence */ } /* ========================================================================== TURNTABLE — a frame sequence painted to a canvas under the scroll. Until the first frame lands (or if none ever do) the schematic + markers stay exactly as before. Mobile never loads frames and keeps the labelled schematic. ========================================================================== */ .cine__turn { display: none; width: 100%; height: auto; } .cine.has-turntable .cine__turn { display: block; } .cine.has-turntable .cine__rig img, .cine.has-turntable .cine__spot { display: none; } .cine.has-turntable .cine__rig { transform: none !important; } /* The frames carry their own light background (~#E1E0DE), and the flag's white stripes are lighter than it — so it can't be keyed out without punching holes in the flag. Instead the frame IS the plate: rounded, with a contact shadow, it reads as a product viewer sitting on the dark stage. */ .cine.has-turntable .cine__turn { border-radius: 12px; box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 2px 6px rgba(0,0,0,.45), 0 48px 90px -36px rgba(0,0,0,.75); } /* ========================================================================== COVERAGE SECTION — LIGHT The turntable frames carry a warm-grey background (#E0DEDC, measured). A light plate on a navy stage is a seam, so the section takes the frame's colour instead and the truck sits in it with no edge. Text and panels flip to ink; the frame edge is feathered so a few levels of tonal drift between frames never reads as a rectangle. ========================================================================== */ .cine { background: #E0DEDC; color: var(--ink-2); border-block: 1px solid var(--hairline-2); } .cine__head h2 { color: var(--ink); } .cine__num { color: var(--accent-ink); } .cine__panel { background: rgba(255,255,255,.66); backdrop-filter: blur(14px) saturate(1.2); box-shadow: inset 0 0 0 1px rgba(21,25,31,.08), 0 2px 4px rgba(21,25,31,.06), 0 24px 48px -24px rgba(21,25,31,.28); } .cine__panel h3 { color: var(--ink); } .cine__panel p { color: var(--ink-2); } .cine__rail { background: rgba(21,25,31,.12); } .cine__fallback { color: var(--ink-3); } /* copy legibility where the panel rides over the frame — light, not dark */ .cine__veil { background: linear-gradient(90deg, #E0DEDC 0%, rgba(224,222,220,.88) 24%, rgba(224,222,220,.42) 42%, transparent 58%); } /* the frame dissolves into the section; no plate, no radius, no shadow */ .cine.has-turntable .cine__turn { border-radius: 0; box-shadow: none; -webkit-mask-image: radial-gradient(ellipse 128% 132% at 50% 50%, #000 66%, transparent 100%); mask-image: radial-gradient(ellipse 128% 132% at 50% 50%, #000 66%, transparent 100%); } /* Schematic on the light ground (mobile, reduced-motion, pre-turntable). The dark-stage version inverted the art and screened it — white lines that disappear on grey. Here it stays black line art and the white paper is multiplied away, so the lines sit directly on the section colour. */ .cine__rig img { filter: grayscale(1) contrast(1.55); mix-blend-mode: multiply; opacity: .82; } .cine__rig img.is-keyed { filter: invert(1); /* keyer emits light lines on alpha; flip to dark */ mix-blend-mode: normal; opacity: .88; } /* eyebrow was tinted pale for the dark stage; on grey it needs the ink value */ .cine .eyebrow { color: var(--accent-ink); } /* Frames drift a level or two from each other in the sky area, and against a flat section colour that reads as faint banding. A whisper of grain across the whole block breaks the steps up; a light vignette keeps the eye centred. Both sit over everything and ignore the pointer. */ .cine::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background-image: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(21,25,31,.07) 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 100% 100%, 160px 160px; mix-blend-mode: multiply; } .cine__stage { z-index: 1; } /* keep the pinned stage under the grain, above the section bg */ /* a touch more feather so edge drift fades sooner */ .cine.has-turntable .cine__turn { -webkit-mask-image: radial-gradient(ellipse 128% 132% at 50% 50%, #000 58%, transparent 100%); mask-image: radial-gradient(ellipse 128% 132% at 50% 50%, #000 58%, transparent 100%); } /* The residual banding lives in the top ~19% of the frame — sky, no truck. The stacks reach to ~25% in the tallest frames, so a vertical fade that completes by 18% clears them. Intersected with the radial so both apply; where mask-composite is unsupported the layers add and the edge simply shows, which is cosmetic. */ .cine.has-turntable .cine__turn { -webkit-mask-image: radial-gradient(ellipse 128% 132% at 50% 50%, #000 58%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 18%, #000 95%, transparent 100%); mask-image: radial-gradient(ellipse 128% 132% at 50% 50%, #000 58%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 18%, #000 95%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; } /* Markers return on the turntable. Positions are set per station by turntable.js; they light only while the truck holds at that station, so a ring never floats over the wrong part mid-rotation. Numbered to match the panels, ink on the light ground. */ .cine.has-turntable .cine__spot { display: grid; place-items: center; z-index: 2; width: 108px; height: 108px; margin: -54px 0 0 -54px; transition: opacity .35s var(--ease), transform .45s var(--ease-out), left .6s var(--ease-out), top .6s var(--ease-out); } .cine.has-turntable .cine__spot::before { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--ink); background: rgba(255,255,255,.82); padding: 4px 8px 3px; border-radius: 3px; box-shadow: 0 0 0 1.5px rgb(var(--spot-rgb) / .9); } .cine.has-turntable .cine__spot--engine::before { content: '01'; } .cine.has-turntable .cine__spot--transmission::before { content: '02'; } .cine.has-turntable .cine__spot--axle::before { content: '03'; } .cine.has-turntable .cine__spot--emissions::before { content: '04'; } /* ========================================================================== HERO GROUND The truck was floating in white with a legend that no longer labelled anything (it was written for the slab stack). Now there is a horizon: a warm-grey ground band across the lower hero — the same #E0DEDC the coverage section uses, so the page reads as one place — with the four programme colours as the road stripe along its edge. The legend labels that stripe and doubles as a selector: each item links to its programme. ========================================================================== */ .hero { position: relative; overflow: hidden; } .hero::before { /* the ground */ content: ''; position: absolute; left: 0; right: 0; /* --horizon is measured by main.js from the buttons' top edge, which sits within a few px of the wheel line because both columns bottom-align. A fixed % put the stripe through the trailer at some widths. */ top: var(--horizon, 66%); bottom: 0; background: linear-gradient(180deg, #E4E2DF 0%, #E0DEDC 40%, #DAD8D5 100%); border-top: 4px solid transparent; border-image: linear-gradient(90deg, var(--blue-block) 0 25%, var(--red-block) 25% 50%, var(--green-block) 50% 75%, var(--gold-block) 75% 100%) 1; z-index: 0; } .hero__grid, .stats--inset { position: relative; z-index: 1; } /* the rig stands on the ground instead of hovering mid-column */ .hero__grid { align-items: end; } .hero__viz { min-height: 0; padding-top: 24px; padding-bottom: 0; } .scene__truck { padding-bottom: 2%; } /* the legend, now a selector */ .iso__key { margin-top: 26px; padding-top: 16px; border-top: 1px solid rgba(21,25,31,.14); } .iso__key-title { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; } .iso__key-hint { font-family: var(--font-body); font-weight: 400; font-size: .9rem; color: var(--ink-3); } .iso__key li a { display: inline-flex; align-items: center; gap: 10px; padding: 6px 8px 6px 0; color: var(--ink-2); border-radius: 3px; transition: color .18s var(--ease), transform .18s var(--ease-out); } .iso__key li a:hover { color: var(--ink); transform: translateX(3px); } .iso__key li a:hover .k { transform: translateY(-1px); } .iso__key .k { transition: transform .18s var(--ease-out); } /* the stats row sits on the ground too: lift it off with the paper colour */ .stats--inset { background: var(--paper); } @media (max-width: 1000px) { /* stacked layout: the ground is the viz strip itself, full-bleed */ .hero::before { display: none; } .hero__viz { margin-inline: calc(-1 * var(--gut)); padding: 22px var(--gut) 18px; background: linear-gradient(180deg, #E4E2DF 0%, #DAD8D5 100%); border-top: 4px solid transparent; border-image: linear-gradient(90deg, var(--blue-block) 0 25%, var(--red-block) 25% 50%, var(--green-block) 50% 75%, var(--gold-block) 75% 100%) 1; } .hero__copy { padding-bottom: 28px; } .iso__key li a { min-height: 44px; } /* tap target */ } /* The selector row (four nowrap links) gave the right column a min-content wide enough to shrink the copy column and wrap the headline to six lines. fr tracks won't go below min-content unless told; minmax(0, …) tells them. The selector wraps to 2×2 when it must, and the hero loses some air so the rig and the buttons land inside a 900px viewport. */ @media (min-width: 1001px) { .hero__grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); } } .iso__key ul { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 14px; } .hero__copy { padding-block: clamp(44px, 5.6vw, 80px) 0; } h1 { font-size: clamp(2.7rem, 5.8vw, 4.9rem); } /* The selector as a full-width row on the ground, under both columns. Stacked under the truck it wrapped to two rows and — because that column bottom-aligns — lifted the wheels off the horizon. Here it has the whole width, never wraps on desktop, and reads as signage on the road. */ .iso__key--row { position: relative; z-index: 1; max-width: var(--wrap); margin: 0 auto; padding: 14px var(--gut) 24px; border-top: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 34px; } .iso__key--row .iso__key-title { margin: 0; } .iso__key--row ul { flex: 1 1 auto; justify-content: flex-end; gap: 6px 26px; } .hero__viz { padding-bottom: 0; } @media (max-width: 1000px) { .iso__key--row { /* a direct child of .hero, which has no gutter — so no negative margins; full width with its own inset keeps the text off the edge */ max-width: none; width: 100%; margin: 0; padding: 4px var(--gut) 20px; background: #DAD8D5; /* continues the strip the truck stands on */ } .iso__key--row ul { justify-content: flex-start; width: 100%; } .hero__viz { padding-bottom: 6px; } } /* Desktop: the rig runs larger than its column and bleeds off the right edge. Fills the empty top-right of the hero and reads as the truck arriving, rather than a small illustration parked in a corner. .hero already clips. */ @media (min-width: 1001px) { .hero__viz { overflow: visible; } .scene { overflow: visible; } .scene__truck { width: 124%; margin-left: 2%; } .hero { background: radial-gradient(1200px 600px at 80% 22%, rgba(46,127,212,.11), transparent 62%), var(--paper); } } /* The stats panel was sitting flush on the hero's bottom edge, so the ground band stopped dead beneath it. Room under the panel lets the ground show, and the panel reads as resting on it rather than cut off by the section. */ .stats--inset { margin-bottom: clamp(32px, 4.5vw, 56px); } @media (max-width: 1000px) { /* no ground band here (the viz strip is the ground), so a shorter gap */ .stats--inset { margin-bottom: 24px; } } /* ========================================================================== HERO SKY + SCROLL DRIVE The empty top-right is sky once there's a horizon — so it gets scenery, not content: distant hills in the ground tones and the four programmes as road signs receding along the horizon. Scroll then drives the scene: the truck pulls away while hills and signs parallax at their own rates. The load-in entrance is untouched; scroll takes over after it. ========================================================================== */ .hero__viz { --drive: 0px; --par1: 0px; --par2: 0px; } .sky { position: absolute; inset: 0 0 5% 0; /* bottom ≈ the wheel line */ pointer-events: none; z-index: 0; overflow: visible; } .sky__hills { position: absolute; left: -6%; right: -6%; bottom: 0; width: 112%; height: 64%; /* peaks clear the trailer roof */ transform: translateX(var(--par1)); will-change: transform; } /* the scene (truck) drives on scroll; entrance animation lives on the child */ .scene { position: relative; z-index: 1; transform: translateX(var(--drive)); will-change: transform; } @media (max-width: 640px) { .sky { display: none; } } @media (prefers-reduced-motion: reduce) { .scene, .sky__hills { transform: none !important; } } /* The viz was only as tall as the truck, bottom-aligned in a tall grid cell, so the "sky" layer had no sky to fill — the range rose 2px above the roof. Stretch the viz to the full cell and keep the scene at its floor; now the sky box is the whole column above the truck. */ .hero__viz { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; } .sky__hills { height: 52%; } /* Small laptops (1001–1360px): the panel's 1240px max-width exceeds the viewport, so its white bled edge to edge and the ground only showed below it. In this band the panel is inset by the gutter like the copy above, and carries its own card padding instead of the page gutter. Above 1360 the existing centred-1240 layout is untouched. */ @media (min-width: 1001px) and (max-width: 1360px) { .stats--inset { max-width: none; margin-inline: var(--gut); padding-inline: 0; } .stats--inset .stat { padding-inline: 28px; } .stats--inset .stat:first-child { padding-left: 28px; } .stats--inset .stat:first-child::before { left: 28px; } /* colour tab inside the card, not on its corner */ } /* The rig runs at 124% of its column so it breaks out of the grid — a deliberate overhang. Above 1400px the page gutter beside the column absorbs it; below, the gutter is narrower than the overhang and the trailer's rear falls off the viewport (66px at 1200). In that band the rig sits inside its column. The scroll drive still carries it off to the right on purpose. Kept out of the stacked layout, which has its own full-bleed strip. */ @media (min-width: 1001px) and (max-width: 1400px) { .scene__truck { width: 100%; margin-left: 0; } } /* The range was drawn inside the viz column, so the silhouette stopped dead at the column's edge — mid-air, on both sides. A range runs to the edge of the page. It now extends right to the viewport edge (the distance from the column to the edge is expressible: the larger of the gutter and the centred-wrap margin plus gutter), and left under the copy column, where a mask fades it out so the headline stays on clean paper. */ @media (min-width: 1001px) { .sky { left: -58%; right: calc(-1 * max(var(--gut), (100vw - var(--wrap)) / 2 + var(--gut)) - 140px); /* last peak clips off-page, mid-slope */ /* The copy column ends ~30% into the sky's width at 1200 and 1440 alike (sky = 158% of the viz plus the gutter extension). Clear to 28% keeps every line of copy on paper; solid by 50% is just behind the cab. */ -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 28%, #000 50%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, transparent 28%, #000 50%, #000 100%); } } /* --- FAQ (compare page) --------------------------------------------------- */ .faq__list { max-width: 74ch; display: grid; gap: 0; border-top: 1px solid var(--hairline); } .faq__item { border-bottom: 1px solid var(--hairline); } .faq__item summary { cursor: pointer; list-style: none; padding: 20px 44px 20px 0; position: relative; font-family: var(--font-display); font-size: 1.22rem; font-weight: 600; color: var(--ink); } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: '+'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 1.1rem; color: var(--accent-ink); transition: transform .25s var(--ease); } .faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); } .faq__item p { margin: 0 0 22px; color: var(--ink-2); max-width: 66ch; }