/* Theme Name: SkipTheBus Description: Store-like theme for Jacob Norris's used-car storefront. Navy + amber retail design. One action per page: reserve the test drive. Version: 0.10.15 */ :root{ --ink:#16202a; --muted:#5c6b78; --line:#d7e1e8; --bg:#f4f7fa; --soft:#e9f0f5; --navy:#0d2137; --navy2:#144a75; --accent:#0b5fa5; --amber:#ffb224; --amber-ink:#0d2137; --accent-ink:#ffffff; --radius:16px; --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; } *{box-sizing:border-box} body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility} a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline} .wrap{max-width:1180px;margin:0 auto;padding:0 20px} header.site{background:linear-gradient(90deg,var(--navy),var(--navy2));padding:16px 0;box-shadow:0 2px 10px rgba(13,33,55,.25)} header.site .wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap} .logo{font-size:22px;font-weight:800;color:#fff;letter-spacing:-.02em} .logo small{display:block;font-size:12.5px;font-weight:500;color:#bcd6ea;letter-spacing:0} header.site nav{margin-left:auto;display:flex;gap:18px;font-size:15px;align-items:center} header.site nav a{color:#dcecf7;font-weight:600} header.site nav a:hover{color:#fff} .hero{position:relative;z-index:0;color:#fff;padding:46px 0 40px;margin-bottom:8px} .hero h1{font-size:36px;line-height:1.15;margin:0 0 10px;letter-spacing:-.02em;color:#fff} .hero p{color:#c8dcee;font-size:17px;margin:0 0 22px;max-width:640px} .searchbar{display:flex;gap:10px;max-width:none;width:100%;margin:0 auto} .searchbar input{flex:1;padding:13px 16px;border:0;border-radius:10px;font-size:16px;background:#fff;color:var(--ink)} .btn{display:inline-block;background:var(--accent);color:var(--accent-ink);padding:13px 22px;border-radius:10px;font-weight:700;font-size:16px;border:0;cursor:pointer} .btn:hover{text-decoration:none;filter:brightness(1.08)} .btn.ghost{background:var(--soft);color:var(--ink)} .btn.amber{background:var(--amber);color:var(--amber-ink)} .searchbar .btn{background:var(--amber);color:var(--amber-ink)} .shelf{padding:26px 0 6px} .shelf h2{font-size:22px;margin:0 0 4px;letter-spacing:-.01em;color:var(--navy);border-left:5px solid var(--amber);padding-left:11px} .shelf .sub{color:var(--muted);font-size:14px;margin:0 0 14px;padding-left:16px} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px} .card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;display:flex;flex-direction:column;box-shadow:0 1px 3px rgba(13,33,55,.07),0 8px 22px rgba(13,33,55,.06)} .card img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--soft);display:block} .card .pad{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px;flex:1} .card .name{font-weight:700;font-size:16px;line-height:1.3} .card .spec{color:var(--muted);font-size:13.5px} .card .ids{color:var(--muted);font-size:12px;letter-spacing:.01em;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;word-break:break-all} .card .price{font-size:20px;font-weight:800;margin-top:6px;color:var(--navy)} .card .est{color:var(--muted);font-size:13px} .card .btn{margin-top:auto;text-align:center;padding:11px 16px;font-size:15px;background:var(--navy)} .filters{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0} .filters select,.filters input{padding:10px 12px;border:1px solid #b9c9d4;border-radius:9px;font-size:15px;background:#fff} .vdp{display:grid;grid-template-columns:1.5fr 1fr;gap:28px;padding:26px 0} @media(max-width:860px){.vdp{grid-template-columns:1fr}} .gallery img.main{width:100%;border-radius:var(--radius);aspect-ratio:4/3;object-fit:cover;background:var(--soft)} .thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px} .thumbs img{width:76px;height:57px;object-fit:cover;border-radius:8px;cursor:pointer;background:var(--soft)} .buybox{border:1px solid var(--line);border-top:5px solid var(--amber);border-radius:var(--radius);padding:20px;height:fit-content;position:sticky;top:16px;background:#fff;box-shadow:0 10px 30px rgba(13,33,55,.10)} .buybox .price{font-size:28px;font-weight:800;color:var(--navy)} .buybox .est{color:var(--muted);font-size:13.5px;margin:2px 0 14px} .buybox .btn{width:100%;text-align:center;background:var(--amber);color:var(--amber-ink)} .buybox .fineprint{color:var(--muted);font-size:12px;margin-top:12px} .vdp-disclosures{max-width:1100px;margin:26px auto 6px;padding:0 20px;color:var(--muted);font-size:12.5px;line-height:1.65} .vdp-disclosures h2{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-bottom:6px} .specs{border-top:1px solid var(--line);margin-top:8px} .specs div{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:15px} .specs div span:first-child{color:var(--muted)} .desc{white-space:pre-line;color:#2b3944;font-size:15px} footer.site{background:var(--navy);margin-top:44px;padding:28px 0 42px;color:#a9c3d8;font-size:13px} footer.site a{color:#dcecf7} .transport{background:linear-gradient(90deg,var(--navy),var(--navy2));color:#eaf3fa;border-radius:var(--radius);padding:18px 22px;margin:22px 0;font-size:15.5px;box-shadow:0 6px 18px rgba(13,33,55,.18)} .transport strong{color:#fff} /* === v0.3: inventory filters + mobile-first pass === */ .inv-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:26px 0 6px;flex-wrap:wrap} .inv-head h1{font-size:30px;margin:0;letter-spacing:-.02em;color:var(--navy)} .inv-count{color:var(--muted);margin:4px 0 0;font-size:15px} .inv-toggle{display:none} .inv-layout{display:grid;grid-template-columns:280px 1fr;gap:26px;align-items:start;padding-top:12px} .filters-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;position:sticky;top:16px} .fgroup{margin-bottom:14px} .flabel{display:block;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--navy);margin:12px 0 6px} .fgroup .flabel:first-child{margin-top:0} .filters-panel select,.filters-panel input[type="search"]{width:100%;padding:11px 12px;border:1px solid #b9c9d4;border-radius:9px;font-size:16px;background:#fff;min-height:44px} .frow{display:flex;gap:8px} .frow select{flex:1;min-width:0} .check{display:flex;gap:10px;align-items:center;padding:7px 0;font-size:15px;min-height:40px;cursor:pointer} .check input{width:20px;height:20px;accent-color:var(--navy);flex:none} .factions{display:flex;gap:10px;margin-top:8px} .factions .btn{flex:1;text-align:center} .chips{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 16px} .chip{display:inline-flex;gap:6px;align-items:center;background:var(--navy);color:#fff;border-radius:999px;padding:7px 12px;font-size:13.5px;font-weight:600} .chip:hover{text-decoration:none;background:var(--navy2)} .chip.clear{background:var(--soft);color:var(--ink)} .pager{margin:26px 0 8px;display:flex;gap:6px;flex-wrap:wrap} .pager .page-numbers{padding:9px 13px;border:1px solid var(--line);border-radius:9px;background:#fff;font-weight:600} .pager .page-numbers.current{background:var(--navy);color:#fff;border-color:var(--navy)} .empty{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;text-align:center} .mobile-reserve{display:none} .mr-spacer{display:none} @media(max-width:1023px){ .inv-layout{grid-template-columns:1fr} .inv-toggle{display:inline-block} .filters-panel{display:none;position:static} .filters-panel.open{display:block} .inv-head{position:sticky;top:0;background:var(--bg);z-index:30;padding:14px 0 10px} .inv-head h1{font-size:23px} .inv-count{font-size:13.5px} } @media(max-width:860px){ .hero{padding:32px 0 28px} .hero h1{font-size:28px} header.site nav{gap:12px;font-size:14px} .logo{font-size:19px} .card .pad{padding:12px 14px 14px} .buybox{position:static} .mobile-reserve{display:flex;gap:12px;align-items:center;position:fixed;left:0;right:0;bottom:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:50;box-shadow:0 -4px 18px rgba(13,33,55,.3)} .mobile-reserve .mr-price{font-size:19px;font-weight:800;line-height:1.2} .mobile-reserve .mr-price small{display:block;font-size:11px;font-weight:500;color:#bcd6ea} .mobile-reserve .btn{margin-left:auto;background:var(--amber);color:var(--amber-ink);white-space:nowrap} .mr-spacer{display:block;height:70px} } /* === v0.3.1: brand header === */ .brand{display:flex;align-items:center;gap:12px;color:#fff} .brand:hover{text-decoration:none} .brand-badge{width:46px;height:46px;flex:none;border-radius:12px;background:var(--amber);color:var(--navy);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:19px;letter-spacing:.02em;box-shadow:0 2px 8px rgba(0,0,0,.25)} .brand-text{display:flex;flex-direction:column;line-height:1.15} .brand-name{font-size:21px;font-weight:800;letter-spacing:-.01em} .brand-text small{color:#bcd6ea;font-size:12px;font-weight:500} /* v0.10.5: CarsWithJacob sub-brand wordmark (replaces the capitol-dome lockup) */ .brand-wordmark{font-size:23px;font-weight:800;letter-spacing:-.015em;color:#fff;line-height:1.1;white-space:nowrap} .brand-wordmark .wm-amber{color:var(--amber)} @media(max-width:860px){.brand-wordmark{font-size:19px}} header.site nav a.callbtn{background:var(--amber);color:var(--amber-ink);border-radius:999px;padding:9px 15px;font-weight:700} header.site nav a.callbtn:hover{background:#ffc44d;text-decoration:none} @media(max-width:860px){ .brand-badge{width:40px;height:40px;font-size:16px;border-radius:10px} .brand-name{font-size:18px} .brand-text small{font-size:11px} header.site nav a.callbtn{padding:8px 12px;font-size:13px} } /* === v0.4: homepage full-bleed redesign + mobile overflow fix === */ html,body{overflow-x:hidden} body{background:#e8eff5} /* v0.8.1 hero breakout, fixed: the v0.4 trick (100vw + negative margin + calc() side padding on .hero itself) broke when the v0.8 rhythm rule `.hero{padding:56px 0 48px}` — same specificity, later in the file — reset padding-left/right to 0, leaving the hero CONTENT flush against the viewport's left edge while the background still bled full-width (Jacob's 2026-10-29 screenshot: clipped headline, full-bleed search). Now the bleed lives on a ::before layer and the hero content stays in the normal
flow, so hero and shelves share the exact same centered container by construction. */ .hero{border-radius:0} .hero::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 78%);z-index:-1} .searchbar input{min-width:0} .hero .transport{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);box-shadow:none;margin:22px 0 0;max-width:640px} .shelf{margin-top:34px} .shelf h2{font-size:24px} @media(max-width:640px){ .wrap{padding:0 16px} .hero{padding-top:30px;padding-bottom:26px} .hero p{font-size:16px} .searchbar{flex-wrap:wrap} .searchbar input{flex:1 1 200px} .searchbar .btn{flex:1 1 auto;text-align:center} .grid{gap:14px} .shelf{margin-top:28px} .shelf h2{font-size:21px} .transport{padding:15px 17px;font-size:14.5px} } /* === v0.5: DealerOn-style filter rail, gallery controls, header photo, statewide === */ /* v0.5.1: header mark is an inline SVG logo (L + car) inside the amber badge — no photo */ .brand-mark svg{display:block} @media(max-width:860px){.brand-mark svg{width:30px;height:30px}} .view-tabs{display:flex;gap:8px;margin:14px 0 2px;flex-wrap:wrap} .vtab{padding:9px 16px;border:1px solid var(--line);border-radius:999px;background:#fff;font-weight:700;font-size:14.5px;color:var(--navy)} .vtab:hover{text-decoration:none;border-color:var(--navy)} .vtab.on{background:var(--navy);color:#fff;border-color:var(--navy)} /* filter rail (v0.7): plain page flow — NO scroll container of its own. The column takes its natural (very long) height and the PAGE scroll is the one and only scroll on desktop. Jacob killed the v0.5/v0.6 sticky full-viewport rail with its own scrollbar: nested scrolling trapped the wheel inside Make/Model and he had to close sections to move the panel. */ .inv-layout{grid-template-columns:300px 1fr} .filters-panel{position:static;top:auto;height:auto;max-height:none;overflow:visible;padding:0 0 14px} .rail-top{display:flex;align-items:center;gap:10px;position:sticky;top:0;background:#fff;padding:14px 18px 10px;z-index:2;border-bottom:1px solid var(--line)} .rail-title{font-weight:800;font-size:17px;color:var(--navy)} .rail-clear{margin-left:auto;font-size:13.5px;font-weight:700} .rail-close{display:none;margin-left:6px;background:var(--soft);border:0;border-radius:8px;width:34px;height:34px;font-size:20px;line-height:1;cursor:pointer;color:var(--navy)} .filters-panel form{padding:0 18px} .fsec{border-bottom:1px solid var(--line);padding:6px 0 10px} .fsec-head{width:100%;display:flex;justify-content:space-between;align-items:center;background:none;border:0;padding:10px 0 4px;font:inherit;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.05em;color:var(--navy);cursor:pointer;text-align:left} .fsec-head::after{content:"▾";font-size:13px;color:var(--muted);transition:transform .15s} .fsec:not(.open) .fsec-head::after{transform:rotate(-90deg)} .fsec-body{display:none;padding:2px 0 4px} .fsec.open .fsec-body{display:block} .fsec-body input[type="search"],.fsec-body select{width:100%;padding:11px 12px;border:1px solid #b9c9d4;border-radius:9px;font-size:16px;background:#fff;min-height:44px} .frow2{display:flex;gap:10px;align-items:center;padding:6px 0;font-size:15px;min-height:36px;cursor:pointer} .frow2 input{width:19px;height:19px;accent-color:var(--navy);flex:none} .frow-label{flex:1} .frow-count{color:var(--muted);font-size:13px} .filters-panel .factions{padding-top:12px} /* gallery */ .gal-stage{position:relative} .gal-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(13,33,55,.72);color:#fff;font-size:28px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 0 4px} .gal-arrow:hover{background:rgba(13,33,55,.92)} .gal-prev{left:12px} .gal-next{right:12px} .gal-counter{position:absolute;right:12px;bottom:12px;background:rgba(13,33,55,.72);color:#fff;border-radius:999px;padding:4px 11px;font-size:13px;font-weight:600} .thumbs img{border:2px solid transparent} .thumbs img.active{border-color:var(--amber)} /* statewide */ .sw-badge{margin-top:8px;background:#fdf3e0;border:1px solid #f3d194;color:#7a5200;border-radius:8px;padding:6px 9px;font-size:12.5px;font-weight:600;line-height:1.35} .statewide-note{background:#fdf3e0;border:1px solid #f3d194;color:#5c3f00;border-radius:var(--radius);padding:14px 18px;margin:10px 0 4px;font-size:15px} @media(max-width:1023px){ /* mobile drawer = the ONE scroll container on small screens: the whole filter list scrolls in a single gesture; no sub-list inside it scrolls */ .filters-panel{display:block;position:fixed;top:0;left:0;height:100dvh;overflow-y:auto;overscroll-behavior:contain;width:min(86vw,340px);z-index:60;border-radius:0;transform:translateX(-105%);transition:transform .22s ease;box-shadow:0 0 40px rgba(13,33,55,.35)} .filters-panel.open{transform:translateX(0)} .rail-close{display:block} .drawer-backdrop{position:fixed;inset:0;background:rgba(13,33,55,.45);z-index:55} body.drawer-open{overflow:hidden} } /* === v0.6: AJAX filtering, combined counts, NL search bar, financing block === (v0.7 note: the v0.6 "tall rail" rules that stood here — 100dvh height plus the panel's own wide navy scrollbar — are REMOVED. The rail no longer scrolls independently at any width; see the v0.5-block rail rule above and the mobile drawer rule in the max-width:1023px block.) */ .inv-sub{color:var(--muted);margin:6px 0 0;font-size:15.5px;max-width:760px} .vtabs-label{font-weight:700;color:var(--navy);align-self:center;font-size:14.5px} .inv-results.is-loading{opacity:.55;pointer-events:none;transition:opacity .15s} .inv-results{transition:opacity .15s} /* natural-language search */ .nl-bar{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin:16px 0 4px;box-shadow:0 1px 3px rgba(13,33,55,.06)} .nl-label{display:block;font-weight:800;font-size:17px;color:var(--navy);margin-bottom:9px;letter-spacing:-.01em} .nl-row{display:flex;gap:10px} .nl-row input{flex:1;padding:13px 16px;border:1px solid #b9c9d4;border-radius:10px;font-size:16px;background:#fff;color:var(--ink);min-width:0} .nl-hint{color:var(--muted);font-size:13.5px;margin:9px 0 0} /* (.nl-hero-hint removed in v0.8 with the homepage paragraph it styled) */ @media(max-width:640px){.nl-row{flex-wrap:wrap}.nl-row .btn{flex:1 1 auto;text-align:center}} /* financing block (VDP + /financing/) */ .fin-block{background:#fff;border:1px solid var(--line);border-top:5px solid var(--amber);border-radius:var(--radius);padding:22px 24px;margin:26px 0 6px;box-shadow:0 10px 30px rgba(13,33,55,.08)} .fin-block h2{margin:0 0 6px;color:var(--navy);letter-spacing:-.01em} .fin-lede{color:#2b3944;margin:0 0 12px;max-width:760px} .fin-qa{border-top:1px solid var(--line);padding:11px 0} .fin-qa summary{font-weight:700;color:var(--navy);cursor:pointer;font-size:15.5px} .fin-qa p{color:#2b3944;margin:8px 0 2px;max-width:760px} .fin-cta{margin-top:16px} .fin-block .fineprint{color:var(--muted);font-size:12.5px;margin-top:10px} /* === v0.5.1: dynamic facets (zero = visible but disabled), range sliders === */ .frow2.off{opacity:.42;cursor:not-allowed} .frow2.off input{cursor:not-allowed} .frow2 input:disabled{cursor:not-allowed} /* v0.7: facet option lists are NEVER height-capped and never scroll on their own (the v0.5.1 .fsec-body.tall 46vh cap is gone). An open Make/Model section expands to its full natural height inside the column; the page (desktop) or the drawer (mobile) is the only scroller. */ /* range sliders: two overlapping range inputs = dual draggable dot handles */ .range-val{font-weight:700;font-size:14.5px;color:var(--navy);margin:2px 0 4px;min-height:21px} .range-rail{position:relative;height:28px} .range-rail::before{content:"";position:absolute;left:0;right:0;top:50%;height:6px;transform:translateY(-50%);border-radius:999px;background:#d7e1e8} .range-fill{position:absolute;top:50%;height:6px;transform:translateY(-50%);border-radius:999px;background:var(--amber);z-index:1} .range-rail input[type="range"]{-webkit-appearance:none;appearance:none;position:absolute;left:0;top:0;width:100%;height:28px;margin:0;background:transparent;pointer-events:none;z-index:2;padding:0;border:0;min-height:0} .range-rail input[type="range"]::-webkit-slider-runnable-track{background:transparent;border:0} .range-rail input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--navy);box-shadow:0 1px 5px rgba(13,33,55,.35);cursor:grab;margin-top:0} .range-rail input[type="range"]::-moz-range-track{background:transparent;border:0} .range-rail input[type="range"]::-moz-range-thumb{pointer-events:auto;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--navy);box-shadow:0 1px 5px rgba(13,33,55,.35);cursor:grab} .range-rail input[type="range"]:active::-webkit-slider-thumb{cursor:grabbing;background:var(--amber)} .range-rail input[type="range"]:active::-moz-range-thumb{cursor:grabbing;background:var(--amber)} /* === v0.8: modern design refresh — Inter, brighter amber (#ffb224, set in :root), larger radii, soft layered shadows, glassy sticky header (desktop), homepage NL example chips, vehicle-documents row, CARFAX card pill. CSS-only: no frameworks, no builders, no new JS weight. Everything below is refinement of the v0.3–v0.7 component rules; no layout/behavior changes, so AJAX filtering, the single-scroll rail, facets, gallery and NL search are untouched. === */ /* typography: tighter, heavier headings; comfortable reading rhythm */ h1,h2,h3{font-weight:800;letter-spacing:-.022em;color:var(--navy)} .hero h1{font-size:42px;line-height:1.08} .shelf h2{font-size:26px;letter-spacing:-.02em} .card .name{font-size:16.5px;font-weight:700;letter-spacing:-.01em} .card .price{font-size:23px;font-weight:800;letter-spacing:-.015em} .buybox .price{font-size:31px;letter-spacing:-.02em} .inv-head h1{font-size:33px} .nl-label{font-size:18px} /* header: frosted navy glass; sticky on desktop only (the mobile archive header keeps its own sticky slot — no stacking fights) */ header.site{background:linear-gradient(90deg,rgba(13,33,55,.94),rgba(20,74,117,.94));-webkit-backdrop-filter:blur(12px) saturate(1.25);backdrop-filter:blur(12px) saturate(1.25);box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 10px 30px rgba(13,33,55,.18)} @media(min-width:1024px){header.site{position:sticky;top:0;z-index:40}} .brand-badge{border-radius:13px;box-shadow:0 4px 14px rgba(255,178,36,.35)} header.site nav a.callbtn{box-shadow:0 6px 16px -6px rgba(255,178,36,.6)} /* buttons: rounder, soft shadow, gentle press feedback */ .btn{border-radius:12px;box-shadow:0 1px 2px rgba(16,24,40,.10),0 8px 20px -10px rgba(16,24,40,.35);transition:filter .15s ease,transform .1s ease,box-shadow .15s ease} .btn:active{transform:translateY(1px)} .btn.amber,.searchbar .btn,header.site nav a.callbtn{box-shadow:0 1px 2px rgba(16,24,40,.08),0 10px 22px -8px rgba(255,178,36,.55)} .btn.ghost{box-shadow:none} .card .btn{border-radius:11px} /* surfaces: bigger radius (var), softer modern shadow stack, hover lift */ .card{position:relative;box-shadow:0 1px 2px rgba(16,24,40,.05),0 12px 32px -14px rgba(13,33,55,.20);transition:transform .18s ease,box-shadow .18s ease} .card:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(16,24,40,.06),0 22px 44px -16px rgba(13,33,55,.30)} .buybox{box-shadow:0 2px 4px rgba(16,24,40,.05),0 24px 48px -20px rgba(13,33,55,.28)} .fin-block{box-shadow:0 2px 4px rgba(16,24,40,.05),0 24px 48px -22px rgba(13,33,55,.25)} .filters-panel{box-shadow:0 1px 2px rgba(16,24,40,.05),0 16px 36px -18px rgba(13,33,55,.22)} .nl-bar{border-radius:var(--radius);box-shadow:0 1px 2px rgba(16,24,40,.05),0 16px 36px -18px rgba(13,33,55,.20)} .transport{box-shadow:0 14px 34px -14px rgba(13,33,55,.35)} .empty{box-shadow:0 1px 2px rgba(16,24,40,.05)} .gallery img.main{box-shadow:0 18px 40px -18px rgba(13,33,55,.35)} /* inputs: rounder corners + a visible amber focus ring */ .searchbar input,.nl-row input,.fsec-body input[type="search"],.fsec-body select,.filters-panel select,.filters-panel input[type="search"]{border-radius:12px} .searchbar input:focus,.nl-row input:focus,.fsec-body input[type="search"]:focus,.fsec-body select:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 4px rgba(255,178,36,.30)} .searchbar input{box-shadow:0 10px 30px -12px rgba(0,0,0,.45)} /* chips, tabs, pills */ .chip{box-shadow:0 6px 14px -8px rgba(13,33,55,.55);transition:background .15s ease} .vtab{transition:border-color .15s ease,background .15s ease;box-shadow:0 1px 2px rgba(16,24,40,.05)} .vtab.on{box-shadow:0 8px 18px -8px rgba(13,33,55,.5)} .gal-counter{font-weight:700} /* filter rail: lighter section labels, hoverable rows */ .fsec-head{font-size:13.5px;letter-spacing:.06em} .frow2{border-radius:8px;padding-left:6px;padding-right:6px;margin:0 -6px} .frow2:hover{background:var(--soft)} .frow2.off:hover{background:transparent} /* homepage rhythm */ .hero{padding:56px 0 48px} .shelf{margin-top:44px} @media(max-width:640px){.hero{padding-top:36px;padding-bottom:32px}.hero h1{font-size:31px}.shelf{margin-top:32px}} /* homepage NL example chips (replace the removed explainer paragraph): quiet translucent pills under the search; JS runs the phrase as a search */ .nl-examples{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:16px} .nl-examples-label{color:#c8dcee;font-size:13.5px;font-weight:600;margin-right:2px} .nl-chip{font-family:inherit;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.30);color:#eaf3fa;border-radius:999px;padding:7px 14px;font-size:13.5px;font-weight:600;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .1s ease} .nl-chip:hover{background:rgba(255,255,255,.18);border-color:var(--amber)} .nl-chip:active{transform:translateY(1px)} /* vehicle documents row (buy box): a proper outlined button pair — CARFAX / window sticker — each rendered ONLY when its meta URL exists */ .doc-row{margin:16px 0 4px} .doc-row-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:8px} .doc-btns{display:flex;gap:10px;flex-wrap:wrap} .doc-btn{flex:1 1 138px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 14px;border:1.5px solid var(--navy);border-radius:12px;color:var(--navy);font-weight:700;font-size:14.5px;background:#fff;transition:background .15s ease,color .15s ease;white-space:nowrap} .doc-btn:hover{background:var(--navy);color:#fff;text-decoration:none} .doc-btn svg{flex:none} /* === v0.8.1: secondary category bar under the header — the homepage shelf categories (3rd-row family, Winter-ready AWD, Easy in, easy out, Just arrived) + Financing, as a quiet second row. The primary nav in the header (All cars / Under $20k / SUVs / call) is untouched. On small screens the row becomes a single swipeable strip INSIDE its own container, so the page itself never scrolls sideways. === */ .catbar{background:#fff;border-bottom:1px solid var(--line)} .catnav{display:flex;gap:4px;align-items:center;overflow-x:auto;padding-top:8px;padding-bottom:8px;scrollbar-width:none;-webkit-overflow-scrolling:touch} .catnav::-webkit-scrollbar{display:none} .catnav a{white-space:nowrap;font-size:13.5px;font-weight:600;color:var(--navy2);padding:6px 11px;border-radius:999px} .catnav a:hover{background:var(--soft);color:var(--navy);text-decoration:none} .catnav a.catnav-fin{color:var(--navy);font-weight:700} /* CARFAX pill on archive/shelf cards (only when a report exists) */ .cxf-pill{position:absolute;top:10px;right:10px;z-index:2;background:rgba(255,255,255,.95);color:var(--navy);font-size:11px;font-weight:800;letter-spacing:.07em;padding:5px 10px;border-radius:999px;box-shadow:0 4px 12px rgba(13,33,55,.25);pointer-events:none} /* v0.9.22: value badges, top-left of the card photo (CARFAX moved right). */ .card-badges{position:absolute;top:10px;left:10px;z-index:2;display:flex;flex-direction:column;gap:6px;align-items:flex-start;pointer-events:none} .cbadge{font-size:11px;font-weight:800;letter-spacing:.02em;padding:5px 10px;border-radius:999px;box-shadow:0 4px 12px rgba(13,33,55,.25);white-space:nowrap} .cb-cpo{background:#FFB224;color:#0d2137} .cb-own{background:rgba(13,33,55,.88);color:#fff} .cb-value{background:#0f766e;color:#fff} .cb-drop{background:#1e7d32;color:#fff} /* === v0.8.2: mobile fixes (Jacob's phone test, 2026-10-29) === 1) CENTERED RESULTS — root cause was the cascade, not the grid: the v0.5 rule `.inv-layout{grid-template-columns:300px 1fr}` sits LATER in this file than the v0.3 `@media(max-width:1023px)` `1fr` rule, and at equal specificity the later rule wins — so phones kept the 300px rail track. The panel is position:fixed (out of flow) and the backdrop too, leaving .inv-results as the only in-flow grid item, auto-placed into that 300px track: cards capped at 300px wide, hugging the left with dead space on the right. This block sits after both rules, so the single column finally applies and the card grid (.grid's 1fr tracks fill the container) spans the full width — centered by construction. 2) STICKY DRAWER APPLY BAR — .factions (Show N cars / Clear all) becomes a bottom-pinned bar inside the mobile drawer, visible while scrolling the filters. position:sticky keeps the bar IN FLOW at the end of the form, so nothing is ever permanently covered: at full scroll it rests below the last option (Sort by), and the form's bottom padding gives that section clearance above it. The panel's 14px bottom padding (v0.5 rule, meant for the desktop rail) is zeroed here so the stuck bar sits flush with the drawer edge instead of floating above it. Mobile only — the desktop rail's in-flow actions row is untouched. */ @media(max-width:1023px){ .inv-layout{grid-template-columns:1fr} .filters-panel{padding-bottom:0} .filters-panel .factions{position:sticky;bottom:0;z-index:3;background:#fff;margin:10px -18px 0;padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);box-shadow:0 -10px 24px -14px rgba(13,33,55,.35)} } /* === v0.9.1: Capitol logo + mobile header/menu (Jacob's phone review, 2026-10-29) === 1) LOGO — the L+car badge is replaced in header.php with a Michigan State Capitol dome mark: Lansing is the capital, so the badge is a capitol. Same amber badge, navy silhouette. 2) MOBILE HEADER — the old header wrapped into a stacked mess on phones: the nav links piled up two-to-a-row ("Under $20k" breaking across lines) and the call pill wrapped its number onto a second line. Now: brand + hamburger on row one, the call button as one full-width single-line bar on row two, and BOTH the main nav and the category links live in the hamburger panel (the white category strip is desktop-only now — on phones it read as cut off mid-link). 3) The call button moved OUT of