/* ============================================================================ CamperBay.nl — MOBILE / PWA app design for the HOMEPAGE (plugins/main). -------------------------------------------------------------------------- Rebuilt to the "Mobile Marketplace UX Implementation Brief": a genuine app-style experience — sticky app header + off-canvas nav drawer, floating blurred bottom nav, bottom sheets, scroll-snap carousels, compact cards, safe-area insets, backdrop blur — NOT a shrunk desktop page. It REUSES the desktop tokens / components / real content (home.css); it does not redesign the brand. DESKTOP IS FROZEN: every rule lives inside @media(max-width:768px) or is a base `display:none` on a brand-new .m-* element, so the desktop render stays byte-identical. Loaded AFTER home.css so ≤768 rules win over home.css mobile rules. ⚠ DARK MODE IS PAUSED by the user. The measured dark block is kept verbatim at the bottom; it has NOT yet been extended to the new app elements (drawer / bottom sheet / floating nav) — that happens when dark is re-enabled. ============================================================================ */ /* ---- new mobile-only chrome — hidden on desktop (base rules, no media query) ---- */ .m-tabbar,.m-burger,.m-saved,.m-drawer,.m-scrim,.lp-handle{display:none} /* language → compact trigger + bottom sheet on mobile (DAY 27). The four inline links were a non-shrinking 139px row that overflowed the topbar at 320px and widened the DOCUMENT to 349px — which is also why the fixed bottom nav hung off the screen (it sizes to the initial containing block). See the long note in app-mobile.css. Wrappers are display:contents + trigger/handle/title display:none → desktop frozen. */ .cp-langwrap,.cp-langpop{display:contents} .cp-langbtn{display:none} .cp-langpop h4{display:none} /* the flag and the full language name exist ONLY for the mobile sheet — hidden at every other width so the desktop topbar keeps rendering the bare NL/DE/FR/EN codes it always did */ .langs .flag,.langs .lg-name{display:none} .cp-theme-toggle{display:none;align-items:center;justify-content:center;width:30px;height:26px;border:1px solid rgba(255,255,255,.16);border-radius:7px;background:rgba(255,255,255,.06);color:#D6DED8;cursor:pointer;padding:0;flex-shrink:0} .cp-theme-toggle:hover{background:rgba(255,255,255,.12)} .cp-theme-toggle svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.9;fill:none} @media(max-width:768px){ /* ===== reusable mobile design tokens (scoped — the desktop never reads these) ===== */ :root{ --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px; --r-sm:10px;--r-md:14px;--r-lg:18px;--r-xl:22px; --sh-1:0 1px 2px rgba(21,33,28,.05),0 1px 3px rgba(21,33,28,.09); --sh-2:0 6px 18px -8px rgba(21,33,28,.20); --sh-3:0 16px 36px -18px rgba(21,33,28,.32); --sh-nav:0 8px 26px -8px rgba(21,33,28,.30); --t-fast:.15s var(--ease);--t-med:.25s var(--ease); } /* tighter page gutters on phones (desktop wrap = 24px) */ .wrap{padding-left:16px;padding-right:16px} /* the floating bottom nav overlays the page; the footer clears it (below) */ body{padding-bottom:0} /* ========================================================================== 1. APP HEADER — utility strip (location · theme · lang) + main row (burger · brand · saved) + full-width search row. Sticky, blurred, safe-area. ========================================================================== */ .topbar{font-size:12px} .topbar .wrap{height:auto;min-height:34px;padding-top:5px;padding-bottom:5px;gap:8px;justify-content:space-between} .topbar .left,.topbar .tb-ship{display:none} .cp-topright{gap:6px 8px;min-width:0;flex-wrap:nowrap} .cp-deliver{height:28px;min-width:0;max-width:100%} .cp-deliver .dt-l{display:none} .cp-deliver .dt-v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px} header{padding-top:env(safe-area-inset-top);background:rgba(239,241,237,.82); backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3)} header .wrap{height:auto;min-height:56px;flex-wrap:wrap;row-gap:10px;column-gap:12px; padding-top:9px;padding-bottom:11px;align-items:center} /* app-bar icon buttons in bordered rounded-square boxes (matches the mockups); brand centred */ .m-burger{display:inline-flex;order:0;align-items:center;justify-content:center;width:44px;height:44px; border:1px solid var(--line);background:var(--card);color:var(--pine);cursor:pointer;border-radius:12px;flex-shrink:0;padding:0} .m-burger:active{background:var(--mist)} .m-burger svg{width:23px;height:23px;stroke:currentColor;stroke-width:1.9;fill:none} .brand{order:1;flex:1;justify-content:center} .brand .name{font-size:18px} .m-saved{display:inline-flex;order:2;align-items:center;justify-content:center;width:44px;height:44px; border:1px solid var(--line);background:var(--card);border-radius:12px;color:var(--pine);flex-shrink:0} .m-saved:active{background:var(--mist)} .m-saved svg{width:23px;height:23px;stroke:currentColor;stroke-width:1.8;fill:none} .headnav{display:none} .headsearch{order:3;display:flex;flex:1 1 100%;min-width:0;max-width:none;margin:0;height:46px;border-radius:13px;background:var(--card)} .headsearch input{min-width:0} /* ========================================================================== 2. FLOATING BOTTOM NAV — rounded, blurred, safe-area; centre Sell FAB. Home · Zoeken · Plaatsen(FAB) · Berichten · Account (real routes). ========================================================================== */ /* subtle FLOATING tab bar (master-prompt §5.3 "subtle floating container"); centre Sell elevated */ .m-tabbar{display:flex;position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:60; align-items:center;justify-content:space-around;gap:2px; background:rgba(255,255,255,.9);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5); border:1px solid var(--line);border-radius:22px;padding:7px 6px;box-shadow:var(--sh-nav)} .m-tabbar .mt{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; min-height:48px;color:var(--muted);text-decoration:none;position:relative;border-radius:14px;transition:color var(--t-fast)} .m-tabbar .mt svg{width:23px;height:23px;stroke:currentColor;stroke-width:1.85;fill:none} .m-tabbar .mt span{font-size:10px;font-weight:600;letter-spacing:.01em} .m-tabbar .mt.on{color:var(--pine)} .m-tabbar .mt.on::before{content:"";position:absolute;top:-1px;width:20px;height:3px;border-radius:3px;background:currentColor} .m-tabbar .mt:active{background:var(--mist)} .m-tabbar .mt.sell{flex:0 0 auto;justify-content:flex-end} .m-tabbar .mt.sell .fab{width:52px;height:52px;border-radius:18px;background:var(--amber); display:grid;place-items:center;margin-top:-24px;box-shadow:0 10px 22px -8px rgba(224,138,44,.6);border:3px solid var(--card); transition:transform var(--t-fast)} .m-tabbar .mt.sell .fab svg{width:25px;height:25px;stroke:#3a2408;stroke-width:2.6} .m-tabbar .mt.sell:active .fab{transform:scale(.93)} .m-tabbar .mt.sell span{color:var(--ink);margin-top:3px} .m-tabbar .mt.sell.on::before{display:none} /* ========================================================================== 3. NAV DRAWER (off-canvas, left) + shared scrim. Categories / vehicles / parts / account / help / language / place-listing. ========================================================================== */ .m-scrim{display:block;position:fixed;inset:0;z-index:70;background:rgba(21,33,28,.5); backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px); opacity:0;visibility:hidden;transition:opacity var(--t-med),visibility var(--t-med)} body.m-drawer-open .m-scrim,body.m-loc-open .m-scrim,body.m-lang-open .m-scrim{opacity:1;visibility:visible} body.m-drawer-open,body.m-loc-open,body.m-lang-open{overflow:hidden} /* ---- language pill + sheet (mirrors .cp-deliver / .cp-locpop right next to it) ---- */ /* ⚠ scoped to body.m-lang-ready, which the footer/homepage script adds only after it has wired the pill: without JS the sheet could never open, so a no-JS visitor must keep the plain inline row rather than lose the language switcher entirely (progressive enhancement, the same contract as the footer accordion's `.js` class). */ body.m-lang-ready .cp-langwrap{display:block;position:static} body.m-lang-ready .cp-langbtn{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 8px;flex-shrink:0; border:1px solid rgba(255,255,255,.16);border-radius:7px;background:rgba(255,255,255,.06); color:#D6DED8;font:600 12px/1 inherit;letter-spacing:.06em;cursor:pointer} body.m-lang-ready .cp-langbtn svg{width:13px;height:13px;flex-shrink:0;transition:transform .2s var(--ease)} body.m-lang-ready .cp-langbtn[aria-expanded="true"]{background:rgba(255,255,255,.14);color:#fff} body.m-lang-ready .cp-langbtn[aria-expanded="true"] svg{transform:rotate(180deg)} body.m-lang-ready .cp-langpop{display:block;position:fixed;left:0;right:0;bottom:0;top:auto;z-index:82; background:var(--card);border-top:1px solid var(--line);border-radius:20px 20px 0 0; max-height:86dvh;overflow-y:auto;-webkit-overflow-scrolling:touch; padding:6px 18px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -18px 44px -20px rgba(21,33,28,.5); visibility:hidden;transform:translateY(101%);transition:transform .3s var(--ease),visibility .3s var(--ease)} body.m-lang-ready .cp-langpop.open{visibility:visible;transform:none} body.m-lang-ready .cp-langpop .lp-handle{display:block;width:42px;height:4px;border-radius:99px;background:var(--line);margin:8px auto 12px} body.m-lang-ready .cp-langpop h4{display:block;margin:0 0 10px;font-family:"Archivo",system-ui,sans-serif;font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--ink)} body.m-lang-ready .cp-langpop .langs{display:flex;flex-direction:column;gap:6px} /* row: [flag] [Nederlands] [NL] [check when current] — everything vertically centred */ body.m-lang-ready .cp-langpop .langs a{display:flex;align-items:center;gap:11px;min-height:52px;padding:0 14px;border-radius:12px; border:1px solid var(--line);background:var(--paper);color:var(--ink); font-family:"Inter",system-ui,sans-serif;font-weight:600;font-size:15px;line-height:1;text-decoration:none} /* CSS-only flags, same 20x14 component the location picker already uses (no image assets). NL/DE reuse its exact gradients; FR is built the same way (vertical thirds, like .be) and EN is the Union Jack layered from the same primitive — blue field, white saltire, red saltire, white cross, red cross. At 20x14 it reads as the flag without needing an asset. */ body.m-lang-ready .cp-langpop .langs .flag{display:block;width:20px;height:14px;border-radius:3px;flex:0 0 20px;box-shadow:0 0 0 1px rgba(0,0,0,.1)} body.m-lang-ready .cp-langpop .langs .flag.nl{background:linear-gradient(#AE1C28 0 33.33%,#fff 33.33% 66.66%,#21468B 66.66%)} body.m-lang-ready .cp-langpop .langs .flag.de{background:linear-gradient(#000 0 33.33%,#DD0000 33.33% 66.66%,#FFCE00 66.66%)} body.m-lang-ready .cp-langpop .langs .flag.fr{background:linear-gradient(90deg,#0055A4 0 33.33%,#fff 33.33% 66.66%,#EF4135 66.66%)} body.m-lang-ready .cp-langpop .langs .flag.en{background: linear-gradient(to bottom,transparent 43%,#C8102E 43% 57%,transparent 57%), linear-gradient(to right,transparent 43%,#C8102E 43% 57%,transparent 57%), linear-gradient(to bottom,transparent 36%,#fff 36% 64%,transparent 64%), linear-gradient(to right,transparent 36%,#fff 36% 64%,transparent 64%), linear-gradient(45deg,transparent 45%,#C8102E 45% 55%,transparent 55%), linear-gradient(-45deg,transparent 45%,#C8102E 45% 55%,transparent 55%), linear-gradient(45deg,transparent 39%,#fff 39% 61%,transparent 61%), linear-gradient(-45deg,transparent 39%,#fff 39% 61%,transparent 61%), #012169} body.m-lang-ready .cp-langpop .langs .lg-name{display:block;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} body.m-lang-ready .cp-langpop .langs .lg-code{flex:0 0 auto;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--muted)} body.m-lang-ready .cp-langpop .langs a.active .lg-code{color:inherit;opacity:.72} body.m-lang-ready .cp-langpop .langs a:active{background:var(--mist)} body.m-lang-ready .cp-langpop .langs a.active{background:var(--pine);border-color:var(--pine);color:#fff} body.m-lang-ready .cp-langpop .langs a.active::after{content:"";margin-left:auto;width:15px;height:9px; border-left:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(-45deg) translateY(-3px)} .m-drawer{display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;z-index:80; width:min(87vw,340px);background:var(--paper);box-shadow:0 0 44px -8px rgba(21,33,28,.5); transform:translateX(-100%);visibility:hidden;transition:transform .3s var(--ease),visibility .3s var(--ease); padding-top:env(safe-area-inset-top);overscroll-behavior:contain} body.m-drawer-open .m-drawer{transform:none;visibility:visible} .m-drawer .dw-head{display:flex;align-items:center;gap:10px;padding:15px 15px 14px;border-bottom:1px solid var(--line)} .m-drawer .dw-head .brand .name{font-size:18px} .m-drawer .dw-x{margin-left:auto;width:44px;height:44px;border-radius:11px;border:1px solid var(--line); background:var(--card);display:grid;place-items:center;color:var(--muted);cursor:pointer;flex-shrink:0} .m-drawer .dw-x:active{background:var(--mist)} .m-drawer .dw-x svg{width:17px;height:17px;stroke:currentColor;stroke-width:2;fill:none} .m-drawer .dw-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 12px calc(20px + env(safe-area-inset-bottom))} .m-drawer .dw-sec{margin-top:12px} .m-drawer .dw-lbl{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:0 10px;margin-bottom:5px} .m-drawer a.dw-link{display:flex;align-items:center;gap:13px;padding:12px 10px;border-radius:12px;color:var(--ink);font-weight:600;font-size:14.5px} .m-drawer a.dw-link svg{width:20px;height:20px;stroke:var(--pine);stroke-width:1.8;fill:none;flex-shrink:0} .m-drawer a.dw-link .cnt{margin-left:auto;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11.5px;color:var(--muted)} .m-drawer a.dw-link:active{background:var(--mist)} .m-drawer a.dw-sell{background:var(--amber);color:#3a2408;justify-content:center;font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:14.5px;margin:2px 0 6px;height:48px;padding:0} .m-drawer a.dw-sell svg{stroke:#3a2408} .m-drawer .dw-langs{display:flex;gap:6px;padding:4px 10px 2px;flex-wrap:wrap} .m-drawer .dw-langs a{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:600;font-size:12px;letter-spacing:.05em; color:var(--pine);border:1px solid var(--line);background:var(--card);border-radius:9px;padding:0 14px;min-height:44px;display:inline-flex;align-items:center} .m-drawer .dw-langs a.active{background:var(--pine);color:#fff;border-color:var(--pine)} /* ========================================================================== 4. HERO + FINDER (the tool). Compact hero; the finder dominates. Tabs become a horizontal scroller; the form stacks; the action is a full-width button; popular/trending become horizontally-scrollable chips. ========================================================================== */ .hero{padding:14px 0 4px} .hero::before{display:none} .herotop{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:14px} .herotop h1{font-size:clamp(21px,6.2vw,27px);line-height:1.12} .livecounts{gap:12px 18px;flex-wrap:wrap} .finder{border-radius:16px;box-shadow:var(--sh-3)} .tabs{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scroll-padding-inline:14px} .tabs::-webkit-scrollbar{display:none} .tab{flex:0 0 auto;padding:14px 15px;font-size:13.5px;gap:6px;white-space:nowrap;min-height:48px;scroll-snap-align:center} .tab .ti{display:none} .tab[aria-selected="true"]::after{bottom:0} .panel{padding:15px} .bttoggle{width:100%} .selectrow,.selectrow.two{grid-template-columns:1fr;gap:11px} .go{width:100%;justify-content:center;height:50px;font-size:15px} .quickpick,.quickpick #fgChips,.quickpick #fcChips{display:flex;align-items:center} .quickpick{margin-top:12px;gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch} .quickpick::-webkit-scrollbar{display:none} .quickpick .ql,.quickpick .qchip{flex-shrink:0} .quickpick #fgChips,.quickpick #fcChips{gap:8px} .trustinline{margin-top:14px;gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-left:-16px;margin-right:-16px;padding:0 16px} .trustinline::-webkit-scrollbar{display:none} .ti-item{flex-shrink:0} /* section rhythm */ section.block{padding:20px 0} .sechead{flex-wrap:wrap;gap:8px 12px;margin-bottom:14px} .sechead h2{font-size:19px} .sechead .rightgrp{width:100%;margin-left:0;gap:10px;align-items:center;justify-content:space-between;flex-wrap:nowrap} /* ========================================================================== 5. SHOP BY CATEGORY rail (.crail) — already a horizontal rail; add snap + hide the desktop arrow buttons (touch swipes instead). Full-bleed to screen edge. ========================================================================== */ .crail-title h2{font-size:21px} .crail-wrap{margin:0 -16px;padding:0 16px} .crail{scroll-snap-type:x proximity;scroll-padding-left:16px} .crail-item{scroll-snap-align:start} .crail-arrow{display:none} /* ========================================================================== 6. "Bladeren per systeem" (.catsec) → compact 2-column app cards (icon on top, name, count pill top-right). Touch pressed state; no hover chevron. ========================================================================== */ .catsec .shead{margin-bottom:15px} .catsec .shead .tt h2{font-size:19px} .catsec .catgrid{grid-template-columns:1fr 1fr;gap:10px} .catsec .cat{flex-direction:column;align-items:flex-start;gap:10px;padding:14px 13px;border-radius:14px;min-height:96px} .catsec .cat .ic{width:42px;height:42px} .catsec .cat .body{width:100%;gap:2px} .catsec .cat .nm{white-space:normal;font-size:13.5px;line-height:1.2} .catsec .cat .sub{display:none} .catsec .cat .ct{position:absolute;top:12px;right:12px} .catsec .cat .chev{display:none} .catsec .cat:active{transform:scale(.985);border-color:var(--amber-line)} .catsec .cat:active .ic{background:var(--amber-tint);border-color:var(--amber-line)} /* ========================================================================== 7. LISTING GRIDS (.grid4 × Net toegevoegd + Caravans te koop) → horizontal scroll-snap carousels with a peek of the next card. Vehicle cards are wider than part cards (brief). Featured .promo-grid already carousels ≤640; keep it consistent here. ========================================================================== */ .grid4{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; scrollbar-width:none;margin:0 -16px;padding:2px 16px 6px;scroll-padding-left:16px} .grid4::-webkit-scrollbar{display:none} .grid4>.lcard{flex:0 0 46%;scroll-snap-align:start} .grid4>.van{flex:0 0 74%;scroll-snap-align:start} .lcard:active,.van:active{transform:scale(.985)} .van:active{box-shadow:none} .promo-grid{margin:0 -16px;padding:2px 16px 6px;scroll-padding-left:16px;grid-auto-columns:74%} /* ⚠⚠ USER-REPORTED (2026-07-25): "the featured slider doesn't stop on the second listing, it glides past it". Cause: the base rule (home.css:310) grants `scroll-snap-align` only to `.lcard` children, but this row renders VEHICLE cards (`.van`) — so the carousel carried `scroll-snap-type: x mandatory` with NOT ONE snap point, and a swipe just coasted. Cover every card type the row can render; the width already matches .grid4>.van (74%). */ .promo-grid>*{scroll-snap-align:start} /* the trust strip is a 4 × 225px card row — wide enough that free scrolling feels sloppy, so it gets proximity snapping too (chips like .quickpick/.condpills deliberately stay free-scrolling: snapping single words fights the thumb). */ .trustinline{scroll-snap-type:x proximity;scroll-padding-left:16px} .trustinline>*{scroll-snap-align:start} /* filter chips row (condpills on Caravans te koop) → horizontal scroller */ .condpills{gap:7px;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap;-webkit-overflow-scrolling:touch} .condpills::-webkit-scrollbar{display:none} .condpills .pill{flex-shrink:0} /* ========================================================================== 8. BRAND CAROUSEL (.brandstrip) → single horizontal scroll row, full-bleed. ========================================================================== */ .brandstrip{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;gap:9px; margin:0 -16px;padding:2px 16px 6px;scroll-snap-type:x proximity;scroll-padding-left:16px} .brandstrip::-webkit-scrollbar{display:none} .brandstrip a{flex-shrink:0;scroll-snap-align:start;white-space:nowrap} /* ========================================================================== 9. SELL CTA (.sellstrip) → compact stacked card, full-width button. ========================================================================== */ .sellstrip{flex-direction:column;align-items:stretch;gap:14px;padding:20px;border-radius:18px} .sellstrip h3{font-size:18px} .sellstrip p{font-size:13.5px} .sellstrip .st-act{margin-left:0;width:100%;flex-direction:column-reverse;align-items:stretch;gap:10px} .sellstrip .primary{height:50px;width:100%;justify-content:center} .sellstrip .st-note{text-align:center} /* ========================================================================== 10. FOOTER → accordion (progressive enhancement: only when footer.js is set by the mobile script; without JS the columns just stack, links visible). Extra bottom padding so the floating nav never covers footer content. ========================================================================== */ footer{padding:26px 0 calc(96px + env(safe-area-inset-bottom));margin-top:6px} .fgrid{grid-template-columns:1fr;gap:0;padding-bottom:14px} .fbrand{margin-bottom:4px} .fbrand .name{font-size:19px} .fbrand p{max-width:none} footer.js .fcol:not(.fbrand){border-top:1px solid rgba(255,255,255,.09)} footer.js .fcol:not(.fbrand) h4{margin:0} footer.js .fcol:not(.fbrand) .facc-btn{width:100%;margin:0;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px; padding:15px 2px;font:inherit;font-size:14.5px;font-weight:600;color:#fff;background:none;border:0;text-align:left;user-select:none} footer.js .fcol:not(.fbrand) .facc-btn::after{content:"";width:8px;height:8px;border-right:2px solid currentColor; border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform var(--t-fast);opacity:.65;margin-right:4px;flex-shrink:0} footer.js .fcol:not(.fbrand).open .facc-btn::after{transform:rotate(-135deg)} footer.js .fcol:not(.fbrand) a{display:none} footer.js .fcol:not(.fbrand).open a{display:block} footer.js .fcol:not(.fbrand).open a:first-of-type{margin-top:2px} footer.js .fcol:not(.fbrand).open a:last-of-type{margin-bottom:12px} .fbot{flex-direction:column;align-items:flex-start;gap:9px;padding-top:16px} /* ========================================================================== 11. LOCATION SELECTOR (.cp-locpop) → mobile bottom sheet: rounded top, drag handle, up to 86dvh, internal scroll, sticky Apply, slide-up, dark scrim. ========================================================================== */ .cp-locwrap{position:static} .cp-locpop{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;z-index:82; border:0;border-top:1px solid var(--line);border-radius:20px 20px 0 0; max-height:86dvh;overflow-y:auto;-webkit-overflow-scrolling:touch; padding:6px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow:0 -18px 44px -20px rgba(21,33,28,.5); display:block;visibility:hidden;transform:translateY(101%);transition:transform .3s var(--ease),visibility .3s var(--ease)} .cp-locpop.open{display:block;visibility:visible;transform:none} .lp-handle{display:block;width:42px;height:4px;border-radius:99px;background:var(--line);margin:8px auto 12px} .cp-locpop h4{font-size:17px} .cp-locpop .lp-field select{height:46px} .cp-locpop .lp-country{padding:12px 12px} .cp-locpop .lp-apply{position:sticky;bottom:0;height:48px;margin-top:14px} /* respect reduced motion for the new moving surfaces */ @media(prefers-reduced-motion:reduce){ .m-drawer,.cp-locpop,.m-scrim,.m-tabbar .mt.sell .fab{transition:none} footer.js .fcol:not(.fbrand) .facc-btn::after{transition:none} } } /* ============================================================================ 6. DARK MODE — MOBILE ONLY (≤768px). Desktop stays light/frozen: there are NO [data-theme] rules outside this media query, so a dark preference never alters the desktop render. Palette = DARKMODE-BRIEF.md (measured, WCAG). The token remap adapts everything var()-driven; the rest are hardcoded-hex / overloaded-token / contrast overrides. --ink is remapped to LIGHT (it was the primary text colour) and the three dark bars that used it as a BACKGROUND are overridden below. ⚠ PAUSED: not yet extended to the new app elements (drawer / bottom sheet / floating nav / accordion) — to be completed when the user re-enables dark. ============================================================================ */ @media(max-width:768px){ .cp-theme-toggle{display:inline-flex} html[data-theme="dark"]{ --paper:#141716; --card:#292E2C; --card-2:#363D3A; --line:#586760; --mist:#252A28; --ink:rgba(255,255,255,.88); --muted:rgba(255,255,255,.62); --pine:#5FA584; --pine-2:#4E8163; --fern:#7EB99E; --amber:#CF913F; --amber-soft:#E6C294; --brand-ink:#0F150E; } html[data-theme="dark"] body{font-weight:420} /* dark bars (were background:var(--ink); --ink is now light text) */ html[data-theme="dark"] .topbar, html[data-theme="dark"] footer, html[data-theme="dark"] .sellstrip{background:#0F1210} html[data-theme="dark"] header{background:rgba(20,23,22,.9)} /* pine-fill + white-text controls → dark ink text (contrast) */ html[data-theme="dark"] .go{color:var(--brand-ink)} html[data-theme="dark"] .go svg{stroke:var(--brand-ink)} html[data-theme="dark"] .bttoggle .bt.on, html[data-theme="dark"] .pill[aria-pressed="true"], html[data-theme="dark"] .lcond.new, html[data-theme="dark"] .van .vcond.new, html[data-theme="dark"] .cp-locpop .lp-apply{color:var(--brand-ink)} html[data-theme="dark"] .m-tabbar .mt.on{color:var(--fern)} /* photo placeholders (light gradients) → dark; dim real photos (--img-filter) */ html[data-theme="dark"] .lthumb, html[data-theme="dark"] .van .photo, html[data-theme="dark"] .promo-hero .ph-img{background:linear-gradient(135deg,#2E332F,#242926)} html[data-theme="dark"] .crail-img{background:radial-gradient(130% 90% at 50% 18%,#30352f 0%,#232823 60%,#1c211c 100%)} html[data-theme="dark"] .lthumb img, html[data-theme="dark"] .van .photo img, html[data-theme="dark"] .crail-img img, html[data-theme="dark"] .promo-spot .ps-img img{filter:brightness(.84) contrast(.95)} /* no-photo placeholder SVGs (ph-*.svg = light bg + green icon) → invert to dark bg + light icon; raster photos (jpg/png) keep the brightness-dim above. Only [src$=".svg"] is matched. */ html[data-theme="dark"] .lthumb img[src$=".svg"], html[data-theme="dark"] .van .photo img[src$=".svg"], html[data-theme="dark"] .promo-spot .ps-img img[src$=".svg"]{filter:invert(1) hue-rotate(180deg)} /* white fav-heart chip → dark */ html[data-theme="dark"] .lthumb .fav{background:rgba(30,34,32,.82)} html[data-theme="dark"] .lthumb .fav svg{stroke:var(--pine)} /* fitment flags (hardcoded light tints) */ html[data-theme="dark"] .fitflag.confirmed{background:#183A2A;color:#60BE92} html[data-theme="dark"] .fitflag.confirmed svg{stroke:#60BE92} html[data-theme="dark"] .fitflag.universal{background:#2a302c;color:rgba(255,255,255,.6)} html[data-theme="dark"] .fitflag.universal svg{stroke:rgba(255,255,255,.6)} /* location popup — hardcoded light 'selected' state */ html[data-theme="dark"] .cp-locpop .lp-country.on{background:#20302a;border-color:var(--fern)} /* categories (.catsec local token block — catcards.css dark was not ported) */ html[data-theme="dark"] .catsec{ --cat-card:#292E2C; --cat-line:#586760; --cat-muted:rgba(255,255,255,.62); --ic-bg:#363D3A; --ic-line:#586760; --cat-pine:#7EB99E; --amber-tint:#3A2C15; --amber-line:#5a4420; --amber-2:#E0A050; } /* native