/* Skip Pilot shared site chrome. Extracted verbatim from about-us.html so generated pages render identically to the hand-built ones. Do not edit page-specific rules here. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 900; /* optional, not swap: see the CLS note above. This is the only value that guarantees no re-paint, and therefore no layout shift, once text is drawn. */ font-display: optional; src: url('/inter-latin-var.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; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{--purple:#9333ea;--purple-hi:#a855f7;--ink:#171226;--muted:rgba(23,18,38,0.72);--faint:rgba(23,18,38,0.45);--line:rgba(20,10,40,.10);--card:rgba(20,10,40,0.04);--card-border:rgba(20,10,40,0.10)} html{scroll-behavior:smooth} body{font-family:'Inter',sans-serif;background:#fff;background-image:radial-gradient(circle,rgba(0,0,0,.035) 1px,transparent 1px);background-size:30px 30px;color:var(--ink);-webkit-font-smoothing:antialiased;line-height:normal} a{color:var(--purple)} nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 max(6%,calc((100% - 1290px)/2));height:68px;background:rgba(255,255,255,.9);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid rgba(0,0,0,.08)} .nav-logo{display:flex;align-items:center;gap:12px;text-decoration:none} .nav-logo img{height:40px;width:auto;display:block} .nav-links{display:flex;align-items:center;gap:28px;list-style:none} .nav-links a{text-decoration:none;color:#3a3548;font-size:14px;font-weight:600;transition:color .2s} .nav-links a:hover{color:#111} .nav-right{display:flex;align-items:center;gap:20px} .nav-phone{display:inline-flex;align-items:center;gap:7px;color:#171226;font-size:14px;font-weight:600;text-decoration:none;transition:color .2s} .nav-phone svg{color:var(--purple);flex-shrink:0} .nav-phone:hover{color:#111} .btn-login{display:inline-flex;align-items:center;gap:8px;background:var(--purple);color:#fff;text-decoration:none;font-size:14px;font-weight:700;padding:10px 22px;border-radius:12px;transition:background .2s,transform .15s,box-shadow .2s;box-shadow:0 4px 20px rgba(147,51,234,.45)} .btn-login:hover{background:var(--purple-hi);transform:translateY(-1px);box-shadow:0 8px 28px rgba(147,51,234,.55)} .nav-menu{display:flex;flex:1;align-items:center;justify-content:space-between;margin-left:48px} .nav-burger{display:none;background:none;border:none;color:#171226;cursor:pointer;padding:6px;align-items:center} @media (max-width:1440px){.nav-social{display:none}}@media (max-width:1400px){.nav-links{gap:18px}.nav-phone{display:none}}@media (max-width:1180px){.nav-burger{display:flex}.nav-menu{display:none}#siteNav.open .nav-menu{display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0;position:absolute;top:68px;left:0;right:0;background:#fff;border-bottom:1px solid rgba(0,0,0,.08);box-shadow:0 16px 32px rgba(0,0,0,.12);padding:14px 5% 22px}#siteNav.open .nav-links{display:flex;flex-direction:column;align-items:flex-start;gap:4px}#siteNav.open .nav-links li{width:100%}#siteNav.open .nav-links a{display:block;width:100%;padding:12px 2px;font-size:16px;border-bottom:1px solid rgba(0,0,0,.05)}#siteNav.open .nav-right{display:flex;flex-direction:column;align-items:stretch;gap:14px;margin-top:16px;padding-top:16px;border-top:1px solid rgba(0,0,0,.08)}#siteNav.open .nav-phone{display:flex;justify-content:center;font-size:16px}#siteNav.open .btn-login{justify-content:center;padding:14px 22px;font-size:15px} /* In the burger menu the icons get a row of their own, centred and comfortably tappable rather than squeezed beside the phone number. */ #siteNav.open .nav-social{display:flex;justify-content:center;gap:10px;order:3} #siteNav.open .nav-social a{width:44px;height:44px;border:1px solid rgba(23,18,38,.10)}} .pagehead{position:relative;background:linear-gradient(135deg,rgba(109,40,217,.88) 0%,rgba(124,58,237,.83) 55%,rgba(139,92,246,.78) 100%),url('banner-img.webp') center/cover;border-bottom:1px solid rgba(255,255,255,.12);padding:calc(68px + 58px) max(6%,calc((100% - 1290px)/2)) 58px;overflow:hidden} .pagehead::before{content:"";position:absolute;top:-45%;right:-8%;width:460px;height:460px;background:rgba(255,255,255,.16);filter:blur(120px);border-radius:50%;pointer-events:none} .pagehead h1{position:relative;color:#fff;font-size:clamp(2rem,3.6vw,3rem);font-weight:800;letter-spacing:-.5px;line-height:1.12;margin-bottom:12px;text-transform:uppercase} .pagehead p{position:relative;color:rgba(255,255,255,.85);font-size:16px;max-width:640px;line-height:1.6} main{padding:64px max(6%,calc((100% - 1290px)/2)) 88px} footer{--muted:rgba(255,255,255,.80);--faint:rgba(255,255,255,.50);padding:56px max(6%,calc((100% - 1290px)/2)) 36px;background:#0f0e17;border-top:1px solid rgba(255,255,255,.06)} .footer-top{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap;margin-bottom:48px} .footer-brand{max-width:280px} .footer-brand img{height:38px;display:block} .logo-tagline{font-size:13px;color:var(--muted);line-height:1.65;margin-top:14px;font-weight:500} .footer-cols{display:flex;gap:56px;flex-wrap:wrap}.footer-cols[data-cols="4"]{gap:44px}.footer-cols[data-cols="5"]{gap:30px} .footer-col h3{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--faint);margin-bottom:16px} .footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px} .footer-col ul a{text-decoration:none;color:var(--muted);font-size:13px;font-weight:600;transition:color .2s} .footer-col ul a:hover{color:#fff} .footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:26px;border-top:1px solid rgba(255,255,255,.06);flex-wrap:wrap;gap:12px} .footer-bottom p{font-size:12px;color:var(--faint);font-weight:500} .footer-bottom a{color:var(--purple-hi);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px} .footer-bottom .social-link{text-decoration:none} @media(max-width:680px){nav{padding:0 5%}.pagehead{padding:calc(68px + 40px) 5% 40px}main{padding:44px 5% 60px}.footer-top{flex-direction:column}.footer-cols{gap:36px}} .grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start} .card{border:1px solid var(--line);border-radius:16px;padding:30px} .card h2{font-size:19px;font-weight:700;margin-bottom:18px} .contact-row{display:flex;gap:12px;align-items:flex-start;margin-bottom:18px} .contact-row .ico{width:38px;height:38px;border-radius:10px;background:rgba(147,51,234,.10);color:var(--purple);display:flex;align-items:center;justify-content:center;flex-shrink:0} .contact-row .lbl{font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--faint)} .contact-row .val{font-size:15px;font-weight:600;color:var(--ink);text-decoration:none} .contact-row .val:hover{color:var(--purple)} label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--ink)} input,textarea,select{width:100%;border:2px solid #e5e0ec;border-radius:10px;padding:11px 13px;font-family:inherit;font-size:14px;margin-bottom:16px;outline:none;transition:border-color .15s;background:#fff} input:focus,textarea:focus,select:focus{border-color:var(--purple)} textarea{resize:vertical;min-height:120px} /* Scoped to the form. As a bare `button` rule it also matched .nav-burger, whose width:100% stretched the mobile burger across the header. */ form button{background:var(--purple);color:#fff;border:none;border-radius:10px;padding:13px 22px;font-family:inherit;font-weight:700;font-size:15px;cursor:pointer;width:100%} button:hover{background:var(--purple-hi)} .note{font-size:12px;color:var(--faint);margin-top:10px} .faq{margin-bottom:18px}.faq h3{font-size:14px;font-weight:700;margin-bottom:4px;color:var(--ink)}.faq p{font-size:14px;color:var(--muted)} .quick{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px} .quick a{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:10px 14px;text-decoration:none;color:var(--ink);font-weight:600;font-size:14px} .quick a:hover{border-color:var(--purple)} @media(max-width:760px){.grid{grid-template-columns:1fr}} /* ── Footer: app badges + social. Identical on every page. ── .footer-brand is widened to fit both badges on ONE line (two 168px badges need ~346px; the old 280px cap forced them to stack and left the column looking empty). Android is a , not an : the Play listing is not live, so a real link would 404 and register as a dead outbound link while we are asking Google to crawl. */ .footer-brand { max-width:360px; } .app-badges { display:flex; gap:10px; flex-wrap:nowrap; align-items:center; margin-top:18px; } .app-badge { display:block; line-height:0; border-radius:7px; transition:transform .15s, opacity .15s; } .app-badge img { height:42px; width:auto; display:block; } a.app-badge:hover { transform:translateY(-2px); } .app-badge.disabled { opacity:.38; filter:grayscale(1); cursor:default; pointer-events:none; } .footer-bottom-right { display:flex; align-items:center; gap:16px; } .social-link { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:8px; background:rgba(255,255,255,.08); color:rgba(255,255,255,.72); transition:background .15s, color .15s, transform .15s; flex-shrink:0; } .social-link:hover { background:var(--purple); color:#fff; transform:translateY(-2px); } @media (max-width:600px){ .app-badges { flex-wrap:wrap; } .footer-bottom-right { gap:12px; } } /* ── Heading treatment ported VERBATIM from index.html so this page matches the homepage and About page: same uppercase .section-title, same accent, same .section-label kicker. ── */ .section-label { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; color:#4c1d95; letter-spacing:2px; text-transform:uppercase; margin-bottom:14px; } .section-title { font-size:clamp(1.65rem,3vw,2.4rem); font-weight:800; letter-spacing:-.3px; line-height:1.2; margin-bottom:14px; color:#171226; text-transform:uppercase; } .section-sub { font-size:15px; color:var(--muted); line-height:1.7; max-width:560px; font-weight:500; } .section-head { margin-bottom:52px; } .section-head.centered { text-align:center; } .section-head.centered .section-sub { margin-left:auto; margin-right:auto; } .section-title em { font-style:normal; color:#7c3aed; font-weight:300; } /* ── Inner-page banner: breadcrumb + kicker ── The banner was an h1 and one line of text. The breadcrumb gives orientation and is a real search signal (it pairs with the BreadcrumbList schema already on these pages); the kicker mirrors the homepage's .section-label so inner pages read as part of the same site. Height is unchanged: both sit in the space that was already empty. */ .pagehead-crumbs { position:relative; display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:rgba(255,255,255,.72); margin-bottom:14px; } .pagehead-crumbs a { color:rgba(255,255,255,.72); text-decoration:none; } .pagehead-crumbs a:hover { color:#fff; text-decoration:underline; text-underline-offset:2px; } .pagehead-crumbs .sep { opacity:.55; } .pagehead-crumbs [aria-current="page"] { color:#fff; } .pagehead-kicker { position:relative; display:inline-flex; align-items:center; font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.82); margin-bottom:10px; } @media (max-width:680px) { .pagehead-crumbs { font-size:12px; } } /* ── Ported VERBATIM from index.html so this page renders identically to the homepage: same .section-label, .section-title (with its accent and uppercase treatment), .feat-card and .cta-strip. ── */ /* DARK SECTIONS - re-scope the light-on-dark variables back to white so text inside the hero, CTA strip and footer stays readable. */ .hero, .cta-strip, footer { --muted: rgba(255,255,255,0.80); --faint: rgba(255,255,255,0.50); --card: rgba(255,255,255,0.05); --card-border: rgba(255,255,255,0.10); --card-hi: rgba(255,255,255,0.14); } /* GLOWS */ .glow { position: absolute; border-radius: 50%; filter: blur(130px); pointer-events: none; animation: breathe 9s ease-in-out infinite alternate; } .glow-purple { background: rgba(124,58,237,0.30); } .glow-indigo { background: rgba(79,70,229,0.18); } .hero .glow-1 { width:700px; height:700px; top:-10%; left:5%; } .hero .glow-2 { width:450px; height:450px; bottom:-15%; right:0; animation-delay:4s; } .hero-ctas { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:20px; } .btn-primary { display:inline-flex; align-items:center; gap:9px; background:var(--purple); color:#fff; text-decoration:none; font-size:15px; font-weight:700; padding:14px 30px; border-radius:14px; transition:background .2s,transform .15s,box-shadow .2s; box-shadow:0 6px 28px rgba(147,51,234,.5); } .btn-primary:hover { background:var(--purple-hi); transform:translateY(-2px); box-shadow:0 12px 36px rgba(147,51,234,.55); } .btn-ghost { display:inline-flex; align-items:center; gap:8px; background:transparent; color:var(--muted); text-decoration:none; font-size:15px; font-weight:600; padding:14px 26px; border-radius:14px; border:1px solid var(--card-hi); transition:color .2s,border-color .2s,background .2s; } .btn-ghost:hover { color:#fff; border-color:rgba(255,255,255,.28); background:var(--card); } .section-label { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; color:#4c1d95; letter-spacing:2px; text-transform:uppercase; margin-bottom:14px; } .section-title { font-size:clamp(1.65rem,3vw,2.4rem); font-weight:800; letter-spacing:-.3px; line-height:1.2; margin-bottom:14px; color:#171226; text-transform:uppercase; } .section-sub { font-size:15px; color:var(--muted); line-height:1.7; max-width:560px; font-weight:500; } .industries-split { display:grid; grid-template-columns:1fr 1.05fr; gap:44px; align-items:stretch; } .ind-image { border-radius:18px; overflow:hidden; border:1px solid #e5e0f0; background:linear-gradient(135deg,#efeaf9,#e2d9f6); min-height:440px; display:flex; align-items:center; justify-content:center; color:#9a8cbf; font-weight:700; font-size:14px; letter-spacing:1px; text-transform:uppercase; } .ind-image img { width:100%; height:100%; object-fit:cover; display:block; } .ind-content { display:flex; flex-direction:column; justify-content:center; } #industries .section-label { color:#4c1d95; } #industries .section-title { color:#171226; } #industries .section-title em { color:#7c3aed; } #industries .section-sub { color:#5a5568; margin-bottom:26px; max-width:none; } @media (max-width:820px) { .industries-split { grid-template-columns:1fr; } .ind-image { min-height:240px; } } .section-head { margin-bottom:52px; } .section-head.centered { text-align:center; } .section-head.centered .section-sub { margin-left:auto; margin-right:auto; } .section-title em { font-style:normal; color:#7c3aed; font-weight:300; } .features-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; } .feat-card { flex:1 1 280px; max-width:380px; background:#ffffff; border:1px solid #ece7f6; box-shadow:0 4px 18px rgba(20,10,40,.05); border-radius:20px; padding:24px; transition:box-shadow .2s,border-color .2s,transform .2s; } .feat-card:hover { border-color:rgba(147,51,234,.32); box-shadow:0 10px 28px rgba(20,10,40,.10); transform:translateY(-3px); } .feat-card h3 { font-size:15px; font-weight:800; color:#171226; margin-bottom:7px; text-transform:uppercase; letter-spacing:.3px; } .feat-card h3 em { font-style:normal; font-weight:300; color:inherit; } .feat-card p { font-size:13px; color:var(--muted); line-height:1.6; font-weight:500; } .ftag { font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:6px; border:1px solid; } .ftag.p { background:var(--purple-dim); border-color:var(--purple-border); color: #802ccc; } .ftag.g { background:var(--green-dim); border-color:var(--green-border); color: #147638; } .ftag.b { background:var(--blue-dim); border-color:var(--blue-border); color: #3c689e; } .ftag.a { background:var(--amber-dim); border-color:var(--amber-border); color: #8e5c06; } /* CTA */ .cta-strip { position:relative; background:linear-gradient(135deg,#6d28d9 0%,#7c3aed 55%,#8b5cf6 100%); border-top:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12); padding:88px max(6%, calc((100% - 1290px) / 2)); overflow:hidden; text-align:center; } .cta-strip .glow-c { width:700px; height:700px; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(124,58,237,.18); } .cta-inner { position:relative; z-index:2; } .cta-strip h2 { font-size:clamp(1.65rem,3vw,2.4rem); font-weight:800; letter-spacing:-.3px; margin-bottom:12px; color:#fff; text-transform:uppercase; } .cta-strip h2 em { font-style:normal; color:#e9d5ff; font-weight:300; } .cta-strip p { font-size:15px; color:var(--muted); margin-bottom:36px; font-weight:500; } .cta-strip .btn-primary { background:#ffffff; color:#6d28d9; box-shadow:0 6px 28px rgba(0,0,0,.20); } .cta-strip .btn-primary:hover { background:#f3eefd; color:#5b21b6; } .cta-stats { display:flex; justify-content:center; gap:0; flex-wrap:wrap; margin:40px 0 36px; } .cta-stat { padding:20px 36px; border-right:1px solid rgba(255,255,255,.08); } .cta-stat:last-child { border-right:none; } .cta-stat-val { font-size:clamp(1.6rem,3vw,2.4rem); font-weight:700; color:#fff; letter-spacing:-.5px; } .cta-stat-lbl { font-size:12px; color:var(--muted); font-weight:600; margin-top:4px; } @media (max-width:680px) { .cta-strip { padding:64px 5%; overflow:hidden; } .features-grid { grid-template-columns:1fr; } } #faq .section-title { text-align:center; margin-bottom:10px; } /* ── SEO content section. Deliberately mirrors #industries: same grid, same gap, same .ind-image treatment, align-items:stretch so the image matches the copy height (443px at desktop). Column ratio is flipped so the copy takes the wider side while the image stays the same width as the one above it. */ /* Top padding so the image is not jammed against the section above it. The section previously sat at 0 because it followed a block that carried its own bottom space. */ #seo-content { padding:76px max(6%, calc((100% - 1290px)/2)) 84px; background:#fff; } #seo-content .industries-split { grid-template-columns:1fr 1.05fr; } #seo-content .seo-copy p { color:var(--muted); font-size:16.2px; line-height:1.75; margin-bottom:15px; } #seo-content .seo-copy p:last-of-type { margin-bottom:0; } #seo-content .seo-copy strong { color:#171226; font-weight:700; } @media (max-width:820px) { #seo-content .industries-split { grid-template-columns:1fr; } /* Desktop puts the image first in the DOM so it renders on the left. Stacked on a phone that would push the copy below the fold, so flip the visual order back to copy-first here, matching the hero. Screen readers still follow DOM order. */ #seo-content .ind-image { order:2; } #seo-content .seo-copy { order:1; } } /* must fill .ind-image, or the img's height:100% resolves against the picture (auto height) instead of the container, leaving the container background visible as bands top and bottom. Border removed so the photo reads edge to edge. */ .ind-image { border:0; } .ind-image picture { display:block; width:100%; height:100%; } .ind-image picture img { width:100%; height:100%; object-fit:cover; display:block; } /* ── Mobile overflow fix (2026-08-07) ── Grid items default to min-width:auto, so they refuse to shrink below their content's min-content width. On a 375px iPhone that made .ind-content 378px inside a 330px container, pushing the page to 400px and giving the whole site a horizontal scroll. min-width:0 lets the track shrink; the industry cards then go single-column on the narrowest phones so their labels do not truncate. */ .industries-split > *, .cs-inner > * { min-width:0; } .industries-split, .ind-content, .ind-image { max-width:100%; } .ind-image picture, .ind-image img { max-width:100%; } @media (max-width:680px) { /* Tighter buttons so both CTAs fit comfortably side by side on a narrow screen. .btn-ghost is matched to .btn-primary here: they sit next to each other, and shrinking only one leaves them visibly mismatched. */ .btn-primary { padding:14px 20px; } .btn-ghost { padding:14px 20px; } } #get-the-app .section-label { justify-content:center; } #get-the-app .section-sub { margin:0 auto 30px; } #how-it-helps .section-title { margin-bottom:30px; } /* Alias the homepage's #seo-content body-copy sizing onto this page's story section. */ #about-story .seo-copy p { color:var(--muted); font-size:16.2px; line-height:1.75; margin-bottom:15px; } #about-story .seo-copy p:last-of-type { margin-bottom:0; } #about-story .seo-copy strong { color:#171226; font-weight:700; } #about-story .industries-split { grid-template-columns:1.05fr 1fr; } #about-story { padding:64px max(6%, calc((100% - 1290px)/2)) 76px; background:#fff; } #about-built { padding:0 max(6%, calc((100% - 1290px)/2)) 84px; background:#fff; } #about-built .features-grid { max-width:1180px; margin:0 auto; } .about-cta-meta { font-size:14px; color:var(--muted); margin-top:26px; font-weight:500; } .about-cta-meta a { color:#fff; text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; font-weight:600; } /* The About photo is square (1000x998) but .ind-image is a tall panel, so object-fit:cover would crop both faces out of frame. Hold the photo's own ratio and pin it to the top. */ #about-story .ind-image { aspect-ratio:1 / 1; min-height:0; align-self:start; position:sticky; top:96px; } @media (max-width:900px) { #about-story { padding:44px 5% 52px; } #about-built { padding:0 5% 56px; } #about-story .industries-split { grid-template-columns:1fr; } #about-story .ind-image { position:static; order:2; } #about-story .ind-content { order:1; } } /* ── Header social icons ── The footer's .social-link is styled for a dark surface (pale icon on translucent white); the nav is a light bar, so these need their own treatment rather than reusing it. */ .nav-social { display:flex; align-items:center; gap:6px; } .nav-social a { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:8px; color:rgba(23,18,38,.55); background:transparent; transition:color .15s, background .15s, transform .15s; flex-shrink:0; } .nav-social a:hover { color:#fff; background:var(--purple); transform:translateY(-1px); } /* Below the widest breakpoint the nav gets tight; drop the icons before the phone number and the login button, which matter more. */ @media (max-width:900px) and (min-width:681px) { .nav-social { display:none; } } /* ── The Run Line: shared core ──────────────────────────────────────────── Everything here is surface-agnostic. It is used by the inner-page banner (.pagehead) AND by the homepage hero (.hero); neither one owns it, and neither should redefine it. A host only has to do three things: be a positioned box, set --pg, and contain a .ph-road with the markup. Two variables drive the whole thing. --pg is the accent (route, waypoints, glow). --tw is the rendered truck width, and every part of the truck — contact patch, exhaust position, smoke drift, tyre dust — is a calc() ratio off it, measured from the sprite rather than eyeballed. Change --tw per breakpoint and the sprite's parts stay stuck together. Everything animates on transform and opacity only, so it stays on the compositor and never triggers layout. */ /* ── Road band ── --tw is the rendered truck width and the only size that changes across breakpoints. The contact patch, the exhaust position and the smoke drift are all derived from it, so the sprite's parts never come unstuck. Ratios come from the sprite itself (480x201): the exhaust stack sits at 74.2% across and 13.9% down, height is 41.9% of width. */ .ph-road { position:absolute; left:0; right:0; bottom:34px; height:80px; --tw:178px; } /* Route ahead: dashed and dim. Route travelled: solid accent, drawn in behind the truck by a scaleX synced to the drive timing. */ .ph-line { position:absolute; left:0; right:0; bottom:0; height:2px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.26) 0 14px, transparent 14px 26px); } .ph-trail { position:absolute; left:0; right:0; bottom:0; height:2px; background: linear-gradient(90deg, transparent, var(--pg) 12%, var(--pg)); box-shadow: 0 0 12px var(--pg); transform-origin: left center; transform: scaleX(0); animation: ph-trail 22s linear infinite; animation-delay: -8s; will-change: transform, opacity; } @keyframes ph-trail { 0% { transform: scaleX(0); opacity:0; } 12% { transform: scaleX(0); opacity:1; } 89% { transform: scaleX(1); opacity:1; } 99%, 100% { transform: scaleX(1); opacity:0; } } /* ── Waypoints ── .ph-wp is a zero-size anchor on the route carrying two things: the pin that pops as the truck arrives, and a small info window naming what happened there. Each --d marks the point in the 22s loop where the truck reaches that pin; the -8s shifts the whole loop so the first painted frame already has a truck on the road. The info window waits until 11% of a lap after the pin — about 2.4s — by which time the truck has driven clear and is not sitting on top of its own label. */ .ph-wp { position:absolute; bottom:0; width:0; height:0; z-index:3; } .ph-pin { position:absolute; bottom:-3px; left:-4px; width:8px; height:8px; border-radius:50%; background:var(--pg); box-shadow: 0 0 0 3px rgba(255,255,255,.10), 0 0 14px var(--pg); opacity:0; transform: scale(.35); animation: ph-pin 22s linear infinite; animation-delay: calc(var(--d) - 8s); will-change: transform, opacity; } @keyframes ph-pin { 0% { transform: translateY(0) scale(.35); opacity:0; } 2.5% { transform: translateY(-5px) scale(1.3); opacity:1; } 5% { transform: translateY(0) scale(1); opacity:1; } 28% { transform: translateY(0) scale(1); opacity:1; } 36%, 100% { transform: translateY(0) scale(.35); opacity:0; } } /* The info window itself. Status dot, what happened, when. */ .ph-tag { position:absolute; left:0; bottom:16px; display:flex; align-items:center; gap:7px; padding:5px 9px 5px 8px; border-radius:9px; background:rgba(13,12,20,.92); border:1px solid rgba(255,255,255,.16); box-shadow:0 8px 22px rgba(0,0,0,.55); font:800 9.5px/1 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.94); white-space:nowrap; opacity:0; transform: translate(-50%, 7px) scale(.9); animation: ph-tag 22s linear infinite; animation-delay: calc(var(--d) - 8s); will-change: transform, opacity; } .ph-tag::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--st); box-shadow:0 0 8px var(--st); flex:none; } .ph-tag::after { content:""; position:absolute; left:50%; bottom:-4px; width:7px; height:7px; margin-left:-3.5px; background:rgba(13,12,20,.92); border-right:1px solid rgba(255,255,255,.16); border-bottom:1px solid rgba(255,255,255,.16); transform:rotate(45deg); } .ph-tag em { font-style:normal; font-weight:600; font-size:9px; letter-spacing:.04em; color:rgba(255,255,255,.55); font-variant-numeric:tabular-nums; } @keyframes ph-tag { 0%, 11% { opacity:0; transform: translate(-50%, 7px) scale(.9); } 14% { opacity:1; transform: translate(-50%, 0) scale(1); } 28% { opacity:1; transform: translate(-50%, 0) scale(1); } 36%, 100% { opacity:0; transform: translate(-50%, -5px) scale(.96); } } /* ── Truck ── The rail is the full width of the road, so translating it -18% → 116% walks the truck in from off one edge and out past the other using transform alone. The bob lives on the truck itself so the two never conflict. */ .ph-rail { position:absolute; inset:0; animation: ph-drive 22s linear infinite; animation-delay: -8s; will-change: transform; } @keyframes ph-drive { from { transform: translate3d(-18%,0,0); } to { transform: translate3d(116%,0,0); } } .ph-truck { position:absolute; left:0; bottom:0; width:var(--tw); height:auto; filter: drop-shadow(0 10px 20px rgba(0,0,0,.55)); animation: ph-bob 1.9s ease-in-out infinite; } @keyframes ph-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } /* Contact patch. Without it a photographed truck floats over the line. */ .ph-shadow { position:absolute; bottom:-4px; height:10px; left:calc(var(--tw) * .062); width:calc(var(--tw) * .877); border-radius:50%; background:rgba(0,0,0,.5); filter:blur(6px); } /* ── Exhaust ── Four puffs on one loop with negative delays, so the stack is already smoking on the first painted frame. They trail backwards and up: the truck is driving right, so the smoke it leaves behind goes left. */ .ph-smoke { position:absolute; left:calc(var(--tw) * .742); bottom:calc(var(--tw) * .361); } .ph-puff { position:absolute; left:0; bottom:0; width:calc(var(--tw) * .072); aspect-ratio:1; border-radius:50%; background:rgba(222,216,238,.62); filter:blur(3.5px); opacity:0; animation: ph-puff 2.6s linear infinite; will-change: transform, opacity; } .ph-puff:nth-child(2) { animation-delay:-.43s; } .ph-puff:nth-child(3) { animation-delay:-.87s; } .ph-puff:nth-child(4) { animation-delay:-1.3s; } .ph-puff:nth-child(5) { animation-delay:-1.73s; } .ph-puff:nth-child(6) { animation-delay:-2.17s; } @keyframes ph-puff { 0% { opacity:0; transform: translate3d(0,0,0) scale(.3); } 10% { opacity:.62; } 100% { opacity:0; transform: translate3d(calc(var(--tw) * -.29), calc(var(--tw) * -.19), 0) scale(2.6); } } /* ── Tyre dirt ── Off the rear (driven) wheel, which the sprite puts at 21.9%. Kept distinct from the exhaust on purpose: warmer, smaller, faster, and it stays low instead of climbing, so it reads as grit off the road rather than more smoke. */ .ph-dirt { position:absolute; bottom:0; left:calc(var(--tw) * .165); } .ph-grit { position:absolute; left:0; bottom:0; width:calc(var(--tw) * .058); aspect-ratio:1; border-radius:50%; background:rgba(208,192,172,.62); filter:blur(2.5px); opacity:0; animation: ph-grit 1.15s linear infinite; will-change: transform, opacity; } .ph-grit:nth-child(2) { animation-delay:-.23s; } .ph-grit:nth-child(3) { animation-delay:-.46s; } .ph-grit:nth-child(4) { animation-delay:-.69s; } .ph-grit:nth-child(5) { animation-delay:-.92s; } @keyframes ph-grit { 0% { opacity:0; transform: translate3d(0,0,0) scale(.35); } 18% { opacity:.72; } 100% { opacity:0; transform: translate3d(calc(var(--tw) * -.24), calc(var(--tw) * -.075), 0) scale(2.4); } } /* Paused off-screen, on whichever surface is hosting the run. Cheaper than letting the loops run under the fold. */ .is-parked .ph-rail, .is-parked .ph-truck, .is-parked .ph-trail, .is-parked .ph-puff, .is-parked .ph-grit, .is-parked .ph-tag, .is-parked .ph-pin { animation-play-state: paused; } /* Reduced motion: park the truck two-thirds along a half-drawn route with the waypoints it has already passed lit. Still reads as a run in progress, it just is not moving. Particles are hidden rather than frozen — a puff stopped mid-air reads as a smudge. */ @media (prefers-reduced-motion: reduce) { .ph-trail, .ph-pin, .ph-rail, .ph-truck, .ph-tag { animation:none !important; } .ph-smoke, .ph-dirt { display:none; } .ph-rail { transform: translate3d(62%,0,0); } .ph-trail { transform: scaleX(.68); opacity:1; } .ph-pin { opacity:1; transform:scale(1); } .ph-tag { opacity:1; transform: translate(-50%, 0) scale(1); } .ph-wp[data-late] .ph-pin, .ph-wp[data-late] .ph-tag { opacity:0; } } /* ── Inner-page banner: "The Run Line" ──────────────────────────────────── Replaces the flat purple wash + `banner-img.webp` that every inner page shared. Three things were wrong with that banner: it inverted the homepage (the hero is a DARK surface with purple as light, the banner was bright purple), the photo sat under an 88%-opaque gradient so it cost 66KB per page and rendered as noise, and all four pages looked identical. This replaces the surface only. The markup inside — breadcrumb, kicker, h1, sub — is untouched, because it is load-bearing for the BreadcrumbList schema already on these pages. The backdrop is the homepage hero's own magnet grid: same gradient stack, same canvas, same script. The banner and the hero are literally the same surface rather than two things that merely look alike. Along the bottom a route line runs the width of the banner and a skip truck drives it, waypoints pinging as it passes, then leaves the frame. The title wipes in behind it. Cost control: the truck, route and title all animate on transform, opacity and clip-path only, so they stay on the compositor. The canvas reuses the hero's own IntersectionObserver gating, and a second observer parks the CSS loops once the banner scrolls away. Reduced motion stops everything with the truck already on screen rather than hiding it. */ .pagehead { /* Per-page accent. Each inner page sets --pg / --pg-glow via a block appended below, so the pages read as different places rather than one template rendered four times. */ --pg: #a855f7; --pg-glow: rgba(147,51,234,.22); /* Identical to .hero on the homepage, with the first radial taking the page accent. The magnet grid draws on top of it, same as the hero. */ background: radial-gradient(900px 520px at 78% 18%, var(--pg-glow), transparent 62%), radial-gradient(760px 460px at 22% 88%, rgba(79,70,229,.18), transparent 66%), linear-gradient(112deg, #0f0e17 0%, #171029 46%, #1e1236 100%); border-bottom: 1px solid rgba(255,255,255,.08); /* Two centred columns, same idea as .hero on the homepage: copy left, product shot right, both vertically centred against each other. The banner then sizes to its content instead of being propped open by a min-height with dead space under the copy. Bottom padding is the one fixed quantity — it reserves the road band (34px offset + a 74px truck), so nothing ever runs behind the copy. */ display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 44px; padding: calc(68px + 44px) max(6%, calc((100% - 1290px) / 2)) 116px; } .pagehead-copy { position: relative; z-index: 2; min-width: 0; } /* An optional line under the lead for the one thing a visitor has to know before they read anything else. Smaller and quieter than the lead so it reads as an aside, boxed so it does not just look like a third paragraph of hero copy. */ .pagehead-note { position:relative; z-index:2; margin-top:14px; max-width:640px; font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.82); border-left:2px solid rgba(255,255,255,.38); padding:2px 0 2px 14px; } .pagehead-note strong { color:#fff; font-weight:700; } .pagehead-note a { color:#fff; text-decoration:underline; text-underline-offset:2px; } .pagehead p.pagehead-note { animation: ph-up .6s .62s cubic-bezier(.22,.61,.36,1) both; } /* ── Product shot ── Sits outside .pagehead-fx (which is aria-hidden) so it keeps real alt text. z-index 1 puts it over the grid and under the copy; the copy is on the left and the device on the right, so they never actually meet. No float loop: a device mockup bobbing on a marketing banner is the exact thing that reads as generated. It arrives with the title and then holds still. */ .ph-device { z-index:1; justify-self:end; align-self:center; width:min(30vw, 360px); height:auto; filter: drop-shadow(0 26px 52px rgba(0,0,0,.55)); animation: ph-rise 1s .34s cubic-bezier(.22,.61,.36,1) both; } @keyframes ph-rise { from { opacity:0; transform: translateY(26px) scale(.975); } to { opacity:1; transform: translateY(0) scale(1); } } /* The old banner's blurred orb, retinted to the page accent. */ .pagehead::before { background: var(--pg-glow); opacity: .9; } .pagehead-kicker { color: var(--pg); } .pagehead-crumbs { color: rgba(255,255,255,.78); } .pagehead-crumbs a { color: rgba(255,255,255,.78); } .pagehead p { color: rgba(255,255,255,.88); } .pagehead-fx { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; } /* The copy already carries position:relative; this just guarantees it stays above the effects layer regardless of source order. */ .pagehead-crumbs, .pagehead-kicker, .pagehead h1, .pagehead p { z-index:2; } /* ── Magnet grid ── Same canvas the hero uses. Sized in JS against devicePixelRatio so the points stay crisp on retina instead of being upscaled. */ .ph-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; display:block; } /* ── Title entrance ── Runs once on load. The breadcrumb and kicker fade up, the h1 wipes in from the left in the direction the truck travels, the sub follows. */ .pagehead-crumbs { animation: ph-up .55s .05s cubic-bezier(.22,.61,.36,1) both; } .pagehead-kicker { animation: ph-up .55s .16s cubic-bezier(.22,.61,.36,1) both; } .pagehead h1 { animation: ph-wipe .78s .26s cubic-bezier(.22,.61,.36,1) both; } .pagehead p { animation: ph-up .6s .52s cubic-bezier(.22,.61,.36,1) both; } @keyframes ph-up { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: translateY(0); } } @keyframes ph-wipe { from { opacity:0; transform: translateX(-16px); clip-path: inset(0 100% 0 0); } 60% { opacity:1; } to { opacity:1; transform: translateX(0); clip-path: inset(0 0 0 0); } } /* ── Legal pages get the quiet variant ── A privacy policy is not the place for a truck driving past. The surface and grid stay so the page still belongs to the site; the run line holds still. */ .pagehead--legal { padding-bottom: 76px; grid-template-columns: minmax(0,1fr); } .pagehead--legal .ph-device { display:none; } /* Hide the whole waypoint anchor, not just the pin — it also carries the info window, which was still popping "Delivered" on the privacy page. */ .pagehead--legal .ph-rail, .pagehead--legal .ph-wp, .pagehead--legal .ph-trail { display:none; } @media (max-width:1080px) { .ph-device { width:32vw; } } @media (max-width:900px) { /* No room for a device beside the copy, and four info windows would crowd a narrow road. Both drop out; the run itself stays. */ .ph-device { display:none; } .pagehead .ph-tag { display:none; } .pagehead .ph-road { bottom:28px; height:64px; --tw:140px; } .pagehead { padding-bottom:100px; grid-template-columns:minmax(0,1fr); gap:0; } } @media (max-width:680px) { .pagehead { padding: calc(68px + 42px) 5% 86px; } .pagehead .ph-road { bottom:24px; height:52px; --tw:96px; } .pagehead .ph-shadow { height:8px; } } /* Reduced motion: park the truck two-thirds along a half-drawn route and show the title as it lands. The banner still reads as a run in progress, it just is not moving. (The canvas script opts out on its own.) */ @media (prefers-reduced-motion: reduce) { .ph-device, .pagehead-crumbs, .pagehead-kicker, .pagehead h1, .pagehead p { animation:none !important; } .ph-device { opacity:1; transform:none; } .pagehead h1 { clip-path:none; opacity:1; transform:none; } } /* Page accent. */ .pagehead { --pg: #a855f7; --pg-glow: rgba(147,51,234,.22); }