/* --------------------------------------------------------------------------- Search, in the landing page's livery. Taken from the Figma handover (Landing page (Desktop).pdf), sampled rather than guessed: white ground, pale lavender and pale peach section tints, violet as the structural colour, orange reserved for the thing you want pressed, and #121212 kept for ink and the footer. I had this dark before, from measuring the live site's and taking that for the page. The sections paint white over it and the dark was the footer. The PDF settled it. One thing this page cannot borrow from that design: the photography. It leans on pictures of cars throughout, and we hold none — they are not ours to show. So where the landing page puts a car, this puts the shape of the market, which is the one thing we can show that nobody else can. --------------------------------------------------------------------------- */ @font-face{font-family:'DM Sans';font-weight:700;src:url(/static/f/DMSans-Bold.ttf) format('truetype');font-display:swap} @font-face{font-family:'DM Sans';font-weight:500;src:url(/static/f/DMSans-Medium.ttf) format('truetype');font-display:swap} @font-face{font-family:'Inter';font-weight:400;src:url(/static/f/Inter-Regular.ttf) format('truetype');font-display:swap} @font-face{font-family:'Inter';font-weight:600;src:url(/static/f/Inter-SemiBold.ttf) format('truetype');font-display:swap} :root{ color-scheme:light; --paper:#FFFFFF; --lav:#F6F6FE; /* the pale lavender the landing page tints with */ --peach:#FEF3F0; /* the pale peach of the "buyer traps" band */ --card:#FFFFFF; --ink:#121212; --mute:#5A5A63; --faint:#70707B; /* 4.89 on white, 4.55 on the lavender tint */ --line:#E7E7F0; --edge:#D5D5E2; --acc:#FC5C2E; /* pressed things only */ --acc-ink:#B83E12; /* orange as text: 5.18:1 on white */ --acc-dark:#E24A1E; --violet:#4E37D5; --violet-lt:#644BF6; --violet-soft:#EEEBFF; --ok:#1F7A4D; --ok-soft:#E7F4ED; --grad:linear-gradient(90deg,#FC5C2E 0%,#F04A4F 55%,#4E37D5 100%); --pad:clamp(20px,5vw,64px); } *{margin:0;padding:0;box-sizing:border-box} body{background:var(--paper);color:var(--ink); font:400 16px/1.62 'Inter',-apple-system,BlinkMacSystemFont,sans-serif; -webkit-font-smoothing:antialiased} h1,h2,h3{font-family:'DM Sans',sans-serif;letter-spacing:-.03em} img{max-width:100%;display:block} a{color:inherit} .num{font-family:'DM Sans',sans-serif;font-variant-numeric:tabular-nums} /* ---------------------------------------------------------------- masthead */ .nav{display:flex;align-items:center;justify-content:space-between;gap:12px 20px; flex-wrap:wrap; /* a last resort: stack rather than collide */ padding:15px var(--pad);border-bottom:1px solid var(--line); position:sticky;top:0;background:rgba(255,255,255,.94); backdrop-filter:blur(8px);z-index:20} .brand{display:flex;align-items:center;gap:11px;text-decoration:none} .brand img{height:25px} .brand .sep{width:1px;height:18px;background:var(--edge)} .brand .what{font:600 13px 'Inter',sans-serif;color:var(--mute)} .nav nav{display:flex;gap:22px;align-items:center;font-size:14px;flex-wrap:wrap} .nav nav a{white-space:nowrap} .nav a{color:var(--mute);text-decoration:none} .nav a:hover{color:var(--ink)} .cta-sm{background:var(--acc);color:#121212 !important;padding:10px 20px; border-radius:100px;font-weight:600} .cta-sm:hover{background:var(--acc-dark)} .cta-sm .sm{display:none} /* ------------------------------------------------------- the bar on a phone This was one flex row that could not wrap, and on a real handset it got *wider* rather than narrower: the touch-target rules add padding to every link and 44px to the pill. So "Search" landed on top of "How this works" and the orange button was cut off past the right edge. Below this width the bar carries the two things that have to be there — who we are, and the one action — and nothing else. Neither link is lost: "how this works" is a section on this same page, and "Assist" is where the button already goes. */ @media (max-width:640px){ .nav{gap:12px;padding-left:16px;padding-right:16px} .nav nav a:not(.cta-sm){display:none} .cta-sm .lg{display:none} .cta-sm .sm{display:inline} .brand,.brand .what,.cta-sm{white-space:nowrap} .brand img{height:22px} } @media (max-width:380px){ /* The wordmark alone still says whose page this is. */ .brand .sep,.brand .what{display:none} } /* -------------------------------------------------------------------- hero */ .hero{padding:clamp(34px,6vw,64px) var(--pad) 0;max-width:1240px;margin:0 auto} .hero h1{font-size:clamp(32px,5.4vw,58px);line-height:1.03;font-weight:700; text-wrap:balance;max-width:17ch} .hero h1 em{font-style:normal;color:var(--violet)} .lede{margin-top:18px;font-size:clamp(16px,1.6vw,19px);color:var(--mute);max-width:56ch} .ask{display:flex;gap:10px;max-width:720px;margin-top:28px} .ask input{flex:1;min-width:0;font:400 16.5px 'Inter',sans-serif;padding:16px 18px; border:1px solid var(--edge);border-radius:10px;background:#fff;color:var(--ink)} .ask input::placeholder{color:var(--faint)} .ask input:focus{outline:none;border-color:var(--violet); box-shadow:0 0 0 3px var(--violet-soft)} .go{font:600 16px 'Inter',sans-serif;padding:16px 32px;border:none;border-radius:100px; background:var(--acc);color:#121212;cursor:pointer;white-space:nowrap} .go:hover{background:var(--acc-dark)} .egs{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px} .egs button{font:400 13px 'Inter',sans-serif;padding:8px 15px;border-radius:100px; border:1px solid var(--line);background:#fff;color:var(--mute);cursor:pointer} .egs button:hover{border-color:var(--violet);color:var(--violet);background:var(--violet-soft)} /* the market strip — where the landing page puts a photograph */ .market{margin-top:30px;padding:22px 24px;border-radius:16px;background:var(--lav); border:1px solid var(--line); display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:end} @media (max-width:760px){.market{grid-template-columns:1fr;gap:18px}} .mfig{display:flex;gap:32px} .mfig .k{font:600 10.5px/1 'Inter',sans-serif;letter-spacing:.11em;text-transform:uppercase; color:var(--faint);margin-bottom:7px} .mfig .v{font:700 22px/1 'DM Sans',sans-serif;font-variant-numeric:tabular-nums; letter-spacing:-.03em} .mfig .v.on{color:var(--violet)} .bars{display:flex;align-items:flex-end;gap:3px;height:50px} .bars i{flex:1;background:#E2E2F2;border-radius:3px 3px 0 0;min-height:3px} .bars i.on{background:var(--grad)} .blab{display:flex;justify-content:space-between;font:400 11.5px 'Inter',sans-serif; color:var(--faint);margin-top:7px;font-variant-numeric:tabular-nums} .understood{margin-top:16px;font-size:14px;color:var(--mute);padding-bottom:22px} .understood b{color:var(--ink);font-weight:600} .understood .ig{color:var(--faint)} /* ------------------------------------------------------------------ layout */ .shell{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:236px 1fr; gap:34px;padding:6px var(--pad) 72px;align-items:start} @media (max-width:900px){.shell{grid-template-columns:1fr;gap:22px}} .filters{position:sticky;top:84px;background:var(--card); border:1px solid var(--line);border-radius:16px;padding:20px} @media (max-width:900px){.filters{position:static}} .fhead{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px} .fhead h2{font:700 11.5px 'Inter',sans-serif;letter-spacing:.1em;text-transform:uppercase; color:var(--faint)} .link{background:none;border:none;color:var(--violet);font:600 12.5px 'Inter',sans-serif; cursor:pointer} .fgroup{margin-bottom:16px} .fgroup label{display:block;font:600 11px 'Inter',sans-serif;letter-spacing:.06em; text-transform:uppercase;color:var(--faint);margin-bottom:7px} .fgroup select{width:100%;font:400 14px 'Inter',sans-serif;padding:10px 11px; border:1px solid var(--edge);border-radius:8px;background:#fff;color:var(--ink)} .fgroup select:focus{outline:none;border-color:var(--violet)} .fgroup input[type=range]{width:100%;accent-color:var(--violet);margin-top:3px} .rangeval{font:500 12px 'DM Sans',sans-serif;color:var(--mute);margin-top:5px; font-variant-numeric:tabular-nums} /* ----------------------------------------------------------------- results */ .rbar{display:flex;align-items:baseline;justify-content:space-between;gap:12px; margin-bottom:14px;flex-wrap:wrap} .count{font:400 14px 'Inter',sans-serif;color:var(--mute)} .count b{color:var(--ink);font:700 17px 'DM Sans',sans-serif;font-variant-numeric:tabular-nums} .scope{font:500 12.5px 'Inter',sans-serif;color:var(--violet); background:var(--violet-soft);border-radius:100px;padding:5px 12px;white-space:nowrap} .sortwrap{font-size:13px;color:var(--mute);display:flex;align-items:center;gap:8px} .sortwrap select{font:400 13px 'Inter',sans-serif;padding:8px 11px;border-radius:8px; border:1px solid var(--edge);background:#fff;color:var(--ink)} .cars{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--card)} /* A card is a pick, not a link: a checkbox at the left, a selected state, and a hint that flips from "shortlist" to "in your list". */ .car{display:grid;grid-template-columns:auto 1fr auto;gap:12px 18px;padding:16px 20px; color:inherit;border-bottom:1px solid var(--line);cursor:pointer; transition:background .13s;align-items:start} .car:last-child{border-bottom:none} .car:hover{background:var(--lav)} .car:focus-visible{outline:2px solid var(--violet);outline-offset:-2px} .car.on{background:var(--violet-soft)} .pick{width:22px;height:22px;margin-top:2px;border:2px solid var(--edge);border-radius:6px; flex:none;position:relative;transition:background .12s,border-color .12s} .car:hover .pick{border-color:var(--violet)} .car.on .pick{background:var(--violet);border-color:var(--violet)} .car.on .pick::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px; border:solid #fff;border-width:0 2.4px 2.4px 0;transform:rotate(45deg)} .cmain{min-width:0} .car .nm{font:700 17px/1.25 'DM Sans',sans-serif;letter-spacing:-.03em;margin-bottom:3px} .car .var{font-size:13px;color:var(--faint);margin-bottom:9px} .car .spec{display:flex;flex-wrap:wrap;gap:6px} .chip{font:400 12.5px 'Inter',sans-serif;background:var(--lav);color:var(--mute); padding:4px 10px;border-radius:100px;border:1px solid var(--line)} .chip.n{font-family:'DM Sans';font-variant-numeric:tabular-nums} .chip.own{background:var(--ok-soft);color:var(--ok);border-color:#BFE0CD} .car .rt{text-align:right;display:flex;flex-direction:column;justify-content:space-between; align-items:flex-end;gap:9px} .car .price{font:700 20px/1 'DM Sans',sans-serif;font-variant-numeric:tabular-nums; letter-spacing:-.035em;white-space:nowrap} .car .src{font-size:11.5px;color:var(--faint);white-space:nowrap} .car .src .addhint{color:var(--acc-ink);font-weight:600} .car.on .src .addhint{color:var(--violet)} @media (max-width:540px){ .car{grid-template-columns:auto 1fr;row-gap:10px} .car .rt{grid-column:1 / -1;flex-direction:row;align-items:baseline; justify-content:space-between;width:100%} } /* ------------------------------------------------------- the shortlist bucket A sticky bar that fills as cars are picked and sends the whole lot to WhatsApp in one message — so the desk sees the full shortlist at once. */ .bucket{position:sticky;bottom:0;z-index:30;padding:0 var(--pad) 16px;pointer-events:none} .bucket-in{max-width:1240px;margin:0 auto;pointer-events:auto; display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap; background:var(--ink);color:#F4F1EE;border-radius:16px; padding:14px clamp(16px,2.4vw,24px);box-shadow:0 18px 40px -18px rgba(20,18,40,.55)} .bucket-say b{font:700 16px 'DM Sans',sans-serif} .bucket-say b .num{color:var(--acc)} .bucket-sub{color:#B8B2C0;font-size:13.5px;margin-left:8px} .bucket-acts{display:flex;align-items:center;gap:10px} .bucket-clear{background:none;border:none;color:#B8B2C0;font:600 13.5px 'Inter',sans-serif; cursor:pointer;padding:8px 10px} .bucket-clear:hover{color:#F4F1EE} .bucket-send{background:var(--acc);color:#160B06;border:none;border-radius:100px; font:700 14.5px 'Inter',sans-serif;padding:12px 22px;cursor:pointer;white-space:nowrap} .bucket-send:hover{background:var(--acc-dark)} @media (max-width:560px){ .bucket{padding-left:12px;padding-right:12px} .bucket-in{flex-direction:column;align-items:stretch;gap:12px;text-align:center} .bucket-sub{display:none} .bucket-acts{justify-content:center} .bucket-send{flex:1} } .empty{padding:50px 24px;text-align:center;color:var(--mute)} .empty b{display:block;color:var(--ink);font:700 19px 'DM Sans',sans-serif; margin-bottom:9px;letter-spacing:-.03em} .more{margin-top:18px;text-align:center} .more button{font:600 14px 'Inter',sans-serif;padding:12px 28px;border-radius:8px; border:1px solid var(--edge);background:#fff;color:var(--ink);cursor:pointer} .more button:hover{border-color:var(--violet);color:var(--violet)} /* the offer, on the peach band the landing page uses for consequences */ /* --------------------------------------------------------------- explainer */ .how{background:var(--lav);border-top:1px solid var(--line); padding:clamp(44px,5vw,72px) var(--pad)} .how-in{max-width:1240px;margin:0 auto} .how h2{font-size:clamp(25px,3.4vw,38px);margin-bottom:32px;text-wrap:balance;font-weight:700} .hgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px} .hgrid > div{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px} .hgrid .n{font:700 13px 'DM Sans',sans-serif;color:#fff;background:var(--violet); width:30px;height:30px;border-radius:100px;text-align:center;line-height:30px; margin-bottom:13px} .hgrid h3{font-size:16.5px;font-weight:700;margin-bottom:7px} .hgrid p{font-size:14.5px;color:var(--mute)} /* the footer is the one dark band, as on the landing page */ .foot{background:var(--ink);color:#A8A29C;padding:38px var(--pad) 52px;font-size:13.5px} .foot-in{max-width:1240px;margin:0 auto} .foot p{margin-bottom:10px;max-width:74ch} .foot strong{color:#F4F1EE} .foot a{color:#FF7A52} .tiny{font-size:12px;color:#6E6862} @media (prefers-reduced-motion:reduce){*{transition:none!important}} /* --------------------------------------------------------------- ornament */ /* The landing page opens with a violet angular field and a grid of violet dots behind the car. Both are drawn rather than cut from the export, so they cost nothing, scale to any screen, and stay crisp. */ .hero{position:relative;overflow:hidden} .shape{position:absolute;top:-90px;right:-120px;width:min(46vw,560px);height:420px; background:linear-gradient(135deg,#644BF6 0%,#4E37D5 55%,#3B27A8 100%); border-radius:0 0 0 200px;transform:rotate(-8deg);opacity:.2; pointer-events:none;z-index:0} @media (max-width:820px){.shape{display:none}} .hero > *:not(.shape){position:relative;z-index:1} .eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px; padding:7px 14px;border-radius:100px;background:var(--violet-soft); color:var(--violet);font:600 12.5px 'Inter',sans-serif;letter-spacing:.01em} .eyebrow img{display:block} /* Icons on the explainer cards: line drawings in the brand's own weight, carrying what the card is about rather than decorating it. */ .hgrid .ic{width:42px;height:42px;border-radius:12px;background:var(--violet-soft); color:var(--violet);display:grid;place-items:center;margin-bottom:14px} .hgrid .ic svg{width:21px;height:21px} /* The star marks the one figure worth reading first. */ .mfig .v.on{display:inline-flex;align-items:center;gap:7px} /* The landing page's own artwork for this exact section — "scanning the used car market" — beside the words, as it sits there. This is InspektAI's image, not a listing photograph, which is the distinction that matters. */ .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,52px); align-items:center} @media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:26px}} .hero-copy{min-width:0} .hero-shot{position:relative} .hero-shot img{width:100%;height:auto;border-radius:16px;position:relative;z-index:1} /* the dot field the handover sets at the car's shoulder */ .hero-shot::before{content:"";position:absolute;left:-38px;top:4%;width:30px;height:62%; background:radial-gradient(var(--violet) 1.4px,transparent 1.5px) 0 0/13px 13px; opacity:.34;z-index:0;pointer-events:none} @media (max-width:900px){.hero-shot::before{display:none}} @media (max-width:900px){.hero-shot{order:-1}.hero-shot img{max-width:520px;margin:0 auto}} /* The four claims, as drawn in the handover. */ /* --------------------------------------------------------- the badge strip The handover sets four line icons in violet rings over a hairline-divided row. It was a screenshot here until now, which meant it blurred on a retina screen and could not take a colour. These are the same four, drawn. */ .trust{list-style:none;display:grid;grid-template-columns:repeat(4,1fr); margin:30px 0 0;max-width:760px} .trust li{display:flex;flex-direction:column;align-items:center;text-align:center; gap:3px;padding:0 10px;border-left:1px solid var(--line)} .trust li:first-child{border-left:none} .tic{width:58px;height:58px;border-radius:100px;border:1.5px solid var(--violet); color:var(--violet);display:grid;place-items:center;margin-bottom:9px} .tic svg{width:30px;height:30px} .trust b{font:700 13px/1.25 'Inter',sans-serif;letter-spacing:.02em;text-transform:uppercase} .trust span:not(.tic){font:400 13px/1.25 'Inter',sans-serif;letter-spacing:.02em; text-transform:uppercase;color:var(--mute)} @media (max-width:640px){ .trust{grid-template-columns:repeat(2,1fr);gap:22px 0;max-width:420px} .trust li:nth-child(odd){border-left:none} .tic{width:50px;height:50px}.tic svg{width:26px;height:26px} .trust b,.trust span:not(.tic){font-size:12px} } /* ------------------------------------------------- what a listing cannot say The handover's peach "buyer traps" panel. The artwork is cropped with that peach already in it, so the panel has to keep the same tint or the car will sit on a visible rectangle. */ .traps{padding:0 var(--pad) clamp(48px,7vw,80px)} .traps-in{max-width:1240px;margin:0 auto;background:var(--peach);border-radius:24px; padding:clamp(28px,4.5vw,56px);display:grid;grid-template-columns:1fr 1fr; gap:clamp(20px,4vw,48px);align-items:center} @media (max-width:860px){.traps-in{grid-template-columns:1fr;gap:24px}} .traps h2{font-size:clamp(27px,3.8vw,42px);line-height:1.06;font-weight:700; margin-bottom:16px} .traps-copy > p{font-size:16px;color:#6B4436;max-width:46ch} .traps-list{list-style:none;margin:22px 0 26px} .traps-list li{position:relative;padding-left:26px;margin-bottom:11px;font-size:15.5px; color:#5C3A2E} .traps-list li::before{content:"";position:absolute;left:0;top:7px;width:13px;height:13px; border-radius:100px;border:1.6px solid var(--acc)} .pill-acc{display:inline-block;background:var(--acc);color:#121212;text-decoration:none; font:600 15px 'Inter',sans-serif;padding:14px 30px;border-radius:100px} .pill-acc:hover{background:var(--acc-dark)} .traps-shot img{width:100%;height:auto;border-radius:16px} @media (max-width:860px){.traps-shot{order:-1}.traps-shot img{max-width:460px;margin:0 auto}} /* the rider mascot beside a section heading — a brand moment away from the hero, so the market scan can keep the hero. Halftone swirl faint behind it. */ .how-head{display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,4vw,44px); margin-bottom:clamp(24px,3.5vw,36px)} .how-mascot{position:relative;flex:none;width:min(34%,300px);display:flex;justify-content:center; align-items:flex-end} .how-mascot .halftone{position:absolute;top:50%;left:50%;translate:-50% -50%;width:100%;height:auto; opacity:.13;z-index:0;pointer-events:none} .how-mascot .rider{position:relative;z-index:1;width:auto;height:auto;max-height:240px; filter:drop-shadow(0 16px 34px rgba(20,18,40,.18))} @media (max-width:640px){.how-mascot{display:none}} .kick{font:600 12.5px 'Inter',sans-serif;letter-spacing:.02em;color:var(--violet); margin-bottom:9px;text-transform:none}