/* Van District — design tokens ported from the Claude Design artboards. */ :root{ --bg:#0F1110; --fg:#F2F2EE; --muted:#A2A6A0; --band:#181B19; --chip:#222623; --hair:rgba(255,255,255,.1); --rule:rgba(255,255,255,.24); --accent:#C8102E; --onaccent:#fff; --inv:#F2F2EE; --oninv:#0F1110; color-scheme:dark light; } :root[data-theme="light"]{ --bg:#F4F4F1; --fg:#141514; --muted:#666A64; --band:#FFFFFF; --chip:#E9E9E4; --hair:rgba(0,0,0,.08); --rule:rgba(0,0,0,.22); --inv:#141514; --oninv:#F4F4F1; } @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ --bg:#F4F4F1; --fg:#141514; --muted:#666A64; --band:#FFFFFF; --chip:#E9E9E4; --hair:rgba(0,0,0,.08); --rule:rgba(0,0,0,.22); --inv:#141514; --oninv:#F4F4F1; } } *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--fg); font-family:'Manrope',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased; transition:background .2s,color .2s} a{color:var(--fg);text-decoration:none} a:hover{color:var(--accent)} button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer} select,input,textarea{font-family:inherit;color:inherit;background:var(--band); border:1px solid var(--hair);border-radius:10px;padding:13px 14px;font-size:14px; width:100%;appearance:none} select option{color:var(--fg);background:var(--band)} img,video{max-width:100%} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}} /* responsive visibility, from the artboards */ .vd-desk{display:flex} .vd-mob{display:none} @media (max-width:980px){ .vd-desk{display:none!important} .vd-mob{display:flex} } /* header nav pills — active state driven by */ .navlink{padding:9px 14px;border-radius:999px;background:var(--band);color:var(--fg); font-size:13px;font-weight:600;white-space:nowrap} .navlink:hover{background:var(--chip);color:var(--fg)} .mobnav{padding:14px 16px;border-radius:12px;background:var(--band);color:var(--fg); font-size:16px;font-weight:700} body[data-nav="vehicles"] [data-nav="vehicles"], body[data-nav="finance"] [data-nav="finance"], body[data-nav="sell"] [data-nav="sell"], body[data-nav="workshop"] [data-nav="workshop"], body[data-nav="about"] [data-nav="about"]{background:var(--inv);color:var(--oninv)} #mobmenu[hidden]{display:none} /* floating WhatsApp button, revealed after 60% of a viewport of scrolling */ #wa{position:fixed;right:clamp(14px,3vw,28px);bottom:clamp(14px,3vw,28px);z-index:60; width:54px;height:54px;border-radius:999px;background:#25D366;color:#fff; display:flex;align-items:center;justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,.28); opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;transform:translateY(6px)} #wa.on{opacity:1;pointer-events:auto;transform:none} #wa:hover{background:#1EBE5B;color:#fff} /* Sell hero: the design's 90deg gradient stops working once the grid stacks, so below that breakpoint darken vertically instead. */ .sell-scrim { background: none; } @media (max-width: 760px) { .sell-scrim { background: linear-gradient(180deg, color-mix(in srgb, var(--band) 70%, transparent) 0%, color-mix(in srgb, var(--band) 40%, transparent) 55%, color-mix(in srgb, var(--band) 85%, transparent) 100%); } }