@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap'); :root{ --white:#FFFFFF; --bg-soft:#F4F8F6; --ink:#0F241C; --ink-soft:#54655D; --ink-faint:#8A978F; --green-deep:#173A2C; --green:#2E9C6E; --green-dark:#227A56; --green-light:#DEF0E5; --blue:#215F91; --blue-light:#E3EDF6; --amber:#C67F05; --amber-light:#FBEDD6; --border:#DFE7E2; --shadow: 0 1px 2px rgba(15,36,28,.04), 0 6px 20px rgba(15,36,28,.06); --radius: 14px; --font-display:'Space Grotesk', sans-serif; --font-body:'Inter', sans-serif; --font-mono:'IBM Plex Mono', monospace; } *{box-sizing:border-box;} html,body{margin:0;padding:0;} body{ font-family:var(--font-body); color:var(--ink); background:var(--white); -webkit-font-smoothing:antialiased; line-height:1.5; } a{color:inherit;text-decoration:none;} button{font-family:inherit;cursor:pointer;} img{max-width:100%;display:block;} h1,h2,h3,h4{font-family:var(--font-display);margin:0;color:var(--green-deep);letter-spacing:-0.01em;} p{margin:0;} .mono{font-family:var(--font-mono);} /* BUGFIX (gemeld met screenshot: "dit verschil in vakje ziet er niet uit" — framenummer-veld had een lichtblauwe achtergrond, framemaat ernaast gewoon wit): dat kwam niet uit onze eigen CSS (die geeft nergens een achtergrondkleur aan input/textarea op basis van hun waarde) — het is de browser zelf die een veld met een eerder onthouden/ingevulde waarde (autofill) standaard highlight, ongeacht wat de site zelf stylet. Hier globaal voor elk tekstveld/textarea genegeerd, zodat elk veld altijd dezelfde witte achtergrond houdt, ook na autofill. De duizelingwekkende "transition... 5000s"-truc is de gangbare manier om dit te doen (box-shadow i.p.v. background-color, want Chrome staat niet toe dat background-color los overschreven wordt op een autofilled veld — een inset box-shadow ter grootte van het hele veld wél). */ input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus, textarea:-webkit-autofill,textarea:-webkit-autofill:hover,textarea:-webkit-autofill:focus, input:autofill,textarea:autofill{ -webkit-text-fill-color:var(--ink); -webkit-box-shadow:0 0 0px 1000px var(--white) inset; box-shadow:0 0 0px 1000px var(--white) inset; transition:background-color 5000s ease-in-out 0s; } /* ---- layout shells ---- */ #app{min-height:100vh;display:flex;flex-direction:column;} .wrap{max-width:1180px;margin:0 auto;padding:0 24px;} @media(max-width:640px){.wrap{padding:0 16px;}} /* BUGFIX (mobiel): vrijwel elk invoerveld in de app zit onder de 16px (13,5-14px, zie .filter-group/.form-row/.msg-textarea/.offer-input-row hieronder) — Safari op iOS zoomt automatisch in zodra je zo'n veld aantikt, op bijna elk formulier in de site (inloggen, wizard, zoekfilters, berichten, bieden). Alleen op mobiel-breedte overschreven, zodat de bestaande, compactere desktop-opmaak ongewijzigd blijft. HERSTELD: de eerste versie van deze regel (kale input/select/textarea-selector) werkte niet — elke class-gebonden regel hieronder (bv. .form-row input, specificiteit 0,1,1) wint altijd van een kale tag-selector (0,0,1), ongeacht mediaquery of volgorde in het bestand. CSS-cascade gaat op specificiteit, niet op "staat later in het bestand". !important is hier de juiste, gangbare oplossing voor precies dit soort altijd-moet-winnen mobiel-only overrides. */ @media(max-width:640px){input,select,textarea,.richtext-editor{font-size:16px !important;}} /* ---- top nav ---- */ .topnav{ position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92); backdrop-filter:blur(8px);border-bottom:1px solid var(--border); } .topnav .row{display:flex;align-items:center;justify-content:space-between;height:68px;gap:12px;} .logo{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--green-deep);flex-shrink:0;} .logo svg{flex-shrink:0;} .navlinks{display:flex;align-items:center;gap:6px;} .navlinks a{ padding:9px 14px;border-radius:999px;font-size:14.5px;font-weight:500;color:var(--ink-soft); transition:background .15s,color .15s; } .navlinks a:hover{background:var(--bg-soft);color:var(--ink);} .navlinks a.active{background:var(--green-light);color:var(--green-dark);font-weight:600;} .nav-right{display:flex;align-items:center;gap:12px;flex-shrink:0;} .mobile-menu-btn{display:none;background:none;border:none;font-size:22px;line-height:1;color:var(--ink);cursor:pointer;padding:6px;flex-shrink:0;} .mobile-menu{display:none;flex-direction:column;gap:4px;padding:0 20px 18px;border-top:1px solid var(--border);} /* BUGFIX (kritische esthetische blik, op verzoek): het open menu had geen eigen achtergrond/ onderrand — het "vloeide" zo direct door in de gewone paginainhoud eronder (bv. de hero), en las daardoor niet als een los, zwevend paneel. Een lichte achtergrondtint + rand/schaduw onderaan geeft het menu een duidelijke eigen begrenzing. */ .mobile-menu.open{display:flex;background:var(--bg-soft);border-bottom:1px solid var(--border);box-shadow:0 8px 16px rgba(23,58,44,.06);} .mobile-menu-links{display:flex;flex-direction:column;padding-top:12px;} .mobile-menu-links a{padding:12px 4px;font-size:15px;color:var(--ink-soft);border-bottom:1px solid var(--border);} .mobile-menu-links a.active{color:var(--green-dark);font-weight:600;} .mobile-menu-right{display:flex;flex-direction:column;padding-top:4px;} /* BUGFIX (kritische esthetische blik, op verzoek): "Beheer" en "Hoi, X" waren allebei een volle- breedte PIL met gecentreerde tekst — op een smal scherm vooral lege ruimte rond een paar woorden, en bovendien een heel ANDERE visuele taal (ronde, omlijnde knoppen) dan de platte, links uitgelijnde lijst-items erboven (Home/Fiets zoeken/...). Nu dezelfde rij-stijl als die lijst-items: volle breedte voor een groot tikgebied, maar de tekst zelf links uitgelijnd, geen pil-omlijning meer. Alleen .btn-outline (Beheer/Hoi X/Inloggen) — .btn-primary hieronder ("Advertentie plaatsen") blijft bewust wél een echte, opvallende knop: dat is hier de enige primaire call-to-action. */ .mobile-menu-right .btn-outline{ display:flex;width:100%;justify-content:flex-start;align-items:center;gap:8px; background:none;border:none;border-radius:0;border-bottom:1px solid var(--border); padding:12px 4px;font-size:15px;font-weight:400;color:var(--ink-soft); } /* BUGFIX (mobiel menu voelde "niet fijn" ingedeeld): navRightHTML wordt gedeeld met de desktop-navbalk, waar de volgorde outline-knop-dan-primaire-knop klopt (leesrichting eindigt op de belangrijkste actie, rechts). Rechtdoor gestapeld op mobiel kwam de primaire, groene "Advertentie plaatsen"-actie (uitgelogde staat) daardoor juist ONDERAAN te staan — zwakke hiërarchie voor een verticaal menu. Puur CSS-gebaseerde herordening (geen wijziging aan de gedeelde HTML/JS), dus desktop blijft ongewijzigd. */ .mobile-menu-right .btn-primary{order:-1;width:100%;justify-content:center;margin-bottom:10px;} /* "Beheer" is een beheerdersfunctie, geen persoonlijke accountactie — ziet er in de vorige opzet exact hetzelfde uit als "Hoi, X" eronder, zonder enige hiërarchie tussen de twee. Zelfde kleur-taal als .btn-blue elders in de app voor dit soort "net-even-anders"-acties. */ .mobile-menu-right .nav-admin-link{color:var(--blue);font-weight:600;} @media(max-width:760px){ .navlinks{display:none;} .nav-right{display:none;} .mobile-menu-btn{display:block;} /* BUGFIX (gemeld met screenshot: "als ik scroll heb ik een probleem met het menu"): .topnav is semi-transparant (92%) met een backdrop-filter-blur voor een "frosted glass"-effect — op desktop onopvallend, maar op mobiel gaf dat bij het scrollen zichtbaar doorschijnende/ spookbeeld-content van foto's die er precies onderdoor scrolden (te zien op de screenshot: een fietswiel dat door de header heen "bloedde"). Op mobiel de header gewoon volledig ondoorzichtig maken en de blur weglaten lost dat op; desktop (waar dit niet gemeld is) blijft ongewijzigd. */ .topnav{background:var(--white);backdrop-filter:none;} } .account-menu{position:relative;} .account-menu summary{list-style:none;cursor:pointer;} .account-menu summary::-webkit-details-marker{display:none;} /* BUGFIX (gemeld met screenshot, op verzoek: "wellicht handig dat we duidelijk maken dat als je op Hoi, Joey drukt er een menu uitkomt of niet?"): een los "▾"-lettertekentje (11px, vrij onopvallend) was op mobiel — sinds "Hoi, X" daar is afgevlakt tot een gewone rij i.p.v. een omlijnde knop (zie de mobiel-menu-herziening hierboven) — niet duidelijk genoeg meer als "dit klapt open"-signaal. Nu hetzelfde .disclosure-chevron-component (grotere, gekleurde cirkel met pijltje-SVG, draait bij open/dicht) dat #/meldingen en "Nog te beoordelen" al gebruiken voor precies hetzelfde doel — herkenbaar, consistent signaal door de hele site. */ .account-menu summary .account-menu-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;font-size:11px;flex-shrink:0;} .account-menu summary .disclosure-chevron{margin-left:auto;} .account-menu[open] .disclosure-chevron{transform:rotate(180deg);} .account-menu-dropdown{ position:absolute;top:calc(100% + 8px);right:0;background:var(--white);border:1px solid var(--border); border-radius:10px;box-shadow:0 8px 24px rgba(23,58,44,.14);padding:8px;min-width:230px; display:flex;flex-direction:column;gap:2px;z-index:60; } .account-menu-dropdown a,.account-menu-dropdown button{ display:block;width:100%;text-align:left;padding:9px 10px;border-radius:8px; font-size:13.5px;color:var(--ink);background:none;border:none;cursor:pointer;font-family:inherit; } .account-menu-dropdown a:hover,.account-menu-dropdown button:hover{background:var(--bg-soft);} .account-menu-section{border-bottom:1px solid var(--border);margin-bottom:4px;padding-bottom:4px;} .account-menu-notif{color:var(--blue) !important;font-weight:600;} /* Overflow-menu voor risicovolle rij-acties (op verzoek, i.c.m. de ernst-badges hierboven: de beheermeldingen-rij had 4 knoppen met gelijk visueel gewicht, inclusief 2 onomkeerbare acties (verwijderen/blokkeren) pal naast 2 onschuldige — zelfde
/-dropdown-patroon als .account-menu hierboven, generiek herbruikbaar voor elke rij met "1 directe hoofdactie + een paar minder-vaak-gebruikte/risicovollere acties erachter". */ .row-actions-menu{position:relative;display:inline-block;} .row-actions-menu summary{list-style:none;cursor:pointer;} .row-actions-menu summary::-webkit-details-marker{display:none;} .row-actions-menu-dropdown{ position:absolute;top:calc(100% + 6px);right:0;background:var(--white);border:1px solid var(--border); border-radius:10px;box-shadow:0 8px 24px rgba(23,58,44,.14);padding:8px;min-width:200px; display:flex;flex-direction:column;gap:2px;z-index:30; } .row-actions-menu-dropdown button{ display:block;width:100%;text-align:left;padding:9px 10px;border-radius:8px; font-size:13.5px;color:var(--ink);background:none;border:none;cursor:pointer;font-family:inherit; } .row-actions-menu-dropdown button:hover{background:var(--bg-soft);} .row-actions-menu-dropdown button.danger{color:#a83a3a;} .place-autocomplete{position:relative;} .place-suggestions{ position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--white);border:1px solid var(--border); border-radius:10px;box-shadow:0 8px 24px rgba(23,58,44,.14);padding:6px;z-index:40;max-height:220px;overflow-y:auto; } .place-suggestion-item{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:8px;font-size:13.5px;color:var(--ink);background:none;border:none;cursor:pointer;font-family:inherit;} .place-suggestion-item:hover,.place-suggestion-item:focus,.place-suggestion-item.active{background:var(--bg-soft);} .place-suggestion-label{display:block;} .place-suggestion-sub{display:block;font-size:11.5px;color:var(--ink-faint);margin-top:1px;} @media(max-width:760px){ /* .justify-content:flex-start voor "Hoi, X" komt inmiddels al van de generieke .mobile-menu-right .btn-outline-regel hierboven (zie de toelichting daar) — hier alleen nog de inspring/stijl van de uitgeklapte sub-items (Mijn advertenties/Mijn favorieten/...), zodat die duidelijk als ONDERGESCHIKT aan "Hoi, X" ogen i.p.v. als evenwaardige menu-items. */ .mobile-menu-right .account-menu-dropdown{position:static;box-shadow:none;border:none;padding:4px 0 8px 30px;margin-top:0;display:flex;flex-direction:column;gap:0;} .mobile-menu-right .account-menu-dropdown a,.mobile-menu-right .account-menu-dropdown button{color:var(--ink-soft);font-size:14px;padding:8px 6px;} } /* BUGFIX (gemeld met screenshot: "zoeken tekst staat niet in het midden van het groene vak"): .btn centerde de inhoud alleen VERTICAAL (align-items:center) — horizontaal niet, want een knop is normaal gesproken precies zo breed als zijn eigen inhoud, dus viel dat nooit op. De "Zoeken"-knop in .searchbar zit echter als laatste kolom in een CSS Grid: als grid-item krijgt een knop standaard justify-self:stretch, dus werd 'm breder dan zijn eigen tekst — en zonder justify-content:center bleef die tekst daardoor links binnen die extra breedte hangen. */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:999px; font-weight:600;font-size:14.5px;border:1px solid transparent;transition:transform .12s, background .15s, box-shadow .15s; } .btn:active{transform:scale(.97);} .btn-primary{background:var(--green);color:#fff;} .btn-primary:hover{background:var(--green-dark);} .btn-outline{background:transparent;border-color:var(--border);color:var(--ink);} .btn-outline:hover{border-color:var(--green);color:var(--green-dark);} .btn-blue{background:var(--blue);color:#fff;} .btn-blue:hover{background:#184a72;} .btn-sm{padding:7px 13px;font-size:13px;} .btn-block{width:100%;justify-content:center;} .btn[disabled]{opacity:.5;pointer-events:none;} select[disabled],input[disabled],textarea[disabled]{opacity:.55;cursor:not-allowed;background-color:var(--bg-soft);color:var(--ink-faint);} .filter-group select[disabled]:hover{border-color:var(--border);} /* ---- page fade ---- */ /* BUGFIX: was `animation:fadeUp .45s ease both` met een transform:translateY-slide. Doordat fill-mode "both" de eindstand van de animatie (transform: translateY(0)) permanent laat staan, werd .page een "containing block" voor position:fixed-nakomelingen (een bekend CSS-mechanisme: elk element met een actieve of "bevroren" transform vangt fixed-position kinderen af, in plaats van dat die relatief aan het viewport blijven staan). Gevolg: de #compare-bar op de zoekpagina (position:fixed, hoort altijd onderin het scherm te zweven) zat vast aan de onderkant van de .page-container zelf, en verscheen dus pas als je helemaal naar beneden scrolde. Opgelost door de transform uit de animatie te halen — de fade blijft, het (toch al subtiele) schuifeffect niet meer, in ruil voor correcte position:fixed-werking overal op de site. */ .page{animation:fadeIn .45s ease both;} @keyframes fadeIn{from{opacity:0;}to{opacity:1;}} @media (prefers-reduced-motion: reduce){.page{animation:none;}} /* ---- hero ---- */ .hero{ background: radial-gradient(1100px 420px at 85% -10%, var(--green-light) 0%, transparent 60%), radial-gradient(900px 400px at 5% 0%, var(--blue-light) 0%, transparent 55%), var(--white); padding:64px 0 40px;border-bottom:1px solid var(--border); } .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;} @media(max-width:900px){.hero-grid{grid-template-columns:1fr;}} /* BUGFIX (op verzoek, "zijn er gekke verschuivingen bij 0 advertenties?"): pickHeroListing() geeft dan null terug (geen advertentie om als voorbeeld te kiezen), dus stond .hero-visual leeg — het vaste 2-koloms grid hierboven bleef echter gewoon bestaan op elke breedte >900px, met als gevolg een breed leeg wit vlak rechts naast een onnodig smalle tekstkolom. Zelfde 1-koloms fallback als de bestaande mobiele breakpoint hierboven, maar dan gestuurd door "is er data", niet "is het scherm smal". */ .hero-grid.no-visual{grid-template-columns:1fr;} /* BikeScore-uitleg op de homepage, direct onder de hero (op verzoek: BikeScore is "bij binnenkomst niet vanzelfsprekend" — zie de eerdere TODO in pageHome() — dit keer een eigen sectie met visuele aandacht i.p.v. een tekstregel in de hero, die versie werd eerder alweer teruggedraaid). */ .bikescore-explainer{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;} @media(max-width:900px){.bikescore-explainer{grid-template-columns:1fr;}} .eyebrow{ display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;letter-spacing:.04em; color:var(--green-dark);background:var(--green-light);padding:6px 12px;border-radius:999px;margin-bottom:18px; } .hero h1{font-size:44px;line-height:1.08;margin-bottom:16px;} @media(max-width:640px){.hero h1{font-size:32px;}} .hero .sub{font-size:17px;color:var(--ink-soft);max-width:480px;margin-bottom:28px;} .searchbar{ background:var(--white);border:1px solid var(--border);border-radius:16px;padding:10px; display:grid;grid-template-columns:1.15fr 0.65fr 1.05fr 1.0fr auto;gap:8px;box-shadow:var(--shadow); } @media(max-width:720px){.searchbar{grid-template-columns:1fr;}} .searchbar input,.searchbar select{ border:none;background:var(--bg-soft);border-radius:10px;padding:12px 13px;font-size:14.5px;font-family:inherit;color:var(--ink);width:100%; } .searchbar input:focus,.searchbar select:focus{outline:2px solid var(--green);outline-offset:1px;} .searchbar select{ padding-right:30px; appearance:none;-webkit-appearance:none;-moz-appearance:none; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat;background-position:right 10px center;background-size:13px; } .searchbar .price-range-input{display:flex;gap:6px;} .searchbar .price-range-input input{width:50%;min-width:0;padding-left:10px;padding-right:4px;font-size:13.5px;} input[type=number]{-moz-appearance:textfield;} input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;} /* hero wheel visual */ .hero-visual{display:flex;justify-content:center;} .score-card{ background:var(--white);border:1px solid var(--border);border-radius:20px;padding:26px;box-shadow:var(--shadow); width:100%;max-width:340px;transition:box-shadow .18s, transform .18s; } .score-card:hover{box-shadow:0 8px 24px rgba(15,36,28,.12);transform:translateY(-2px);} .score-card .top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;} .score-card .top .name{font-family:var(--font-display);font-weight:700;font-size:17px;} .score-card .top .loc{font-size:12.5px;color:var(--ink-faint);margin-top:2px;} .score-card .price{font-family:var(--font-mono);font-weight:600;font-size:19px;color:var(--green-deep);} .wheel-row{display:flex;align-items:center;gap:16px;margin-top:6px;} .wheel-caption .label{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);font-weight:600;} /* ---- sections ---- */ .section{padding:56px 0;} /* Op verzoek (screenshot): de homepage oogde "enorm wit en dicht op elkaar" — met de twee nieuwe secties van vandaag (BikeScore-uitleg, Meest bekeken) stonden er inmiddels 3-4 witte vlakken zonder enige scheiding achter elkaar vóór je bij "Recent geplaatst" komt (de enige sectie met een eigen achtergrondkleur). .home-section geeft elk blok een duidelijke scheidingslijn erboven, zie pageHome()/bikeScoreExplainerHTML()/mostViewedHTML()/savedSearchNudgeHTML() — werkt ook correct als een tussenliggend blok (bv. "Meest bekeken" zonder data, of geen opgeslagen zoekopdracht) niet gerenderd wordt: de lijn verschijnt dan gewoon boven het eerstvolgende blok dat er wél is. */ .home-section{border-top:1px solid var(--border);} .section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:26px;gap:16px;flex-wrap:wrap;} .section-head h2{font-size:26px;} .section-head .desc{color:var(--ink-soft);font-size:14.5px;margin-top:4px;} /* how it works — real 3-step sequence */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} @media(max-width:800px){.steps{grid-template-columns:1fr;}} .step{ background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius);padding:24px; } .step .num{font-family:var(--font-mono);font-size:13px;color:var(--green-dark);font-weight:600;margin-bottom:10px;} .step h3{font-size:16.5px;margin-bottom:6px;} .step p{font-size:14px;color:var(--ink-soft);} /* listing cards */ .grid-listings{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} @media(max-width:980px){.grid-listings{grid-template-columns:repeat(2,1fr);}} /* "Laatst bekeken" — bewust een compacte horizontale strip i.p.v. een volle grid-sectie zoals "Recent geplaatst": stond eerder als eigen volle sectie vlak boven "Recent geplaatst", wat al snel twee bijna identieke kaartenrijen na elkaar gaf (soms zelfs dezelfde fiets dubbel). */ .recently-viewed-strip{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;} .recently-viewed-card{ display:flex;align-items:center;gap:10px;flex:0 0 auto;width:230px; border:1px solid var(--border);border-radius:10px;padding:8px;background:var(--white); text-decoration:none;color:inherit;cursor:pointer; } .recently-viewed-card .thumb{width:52px;height:52px;border-radius:8px;overflow:hidden;flex-shrink:0;background:var(--bg-soft);} .recently-viewed-card .thumb img{width:100%;height:100%;object-fit:cover;display:block;} .recently-viewed-card .info{min-width:0;} .recently-viewed-card .title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .recently-viewed-card .price{font-size:12.5px;color:var(--ink-soft);} @media(max-width:640px){.grid-listings{grid-template-columns:1fr;}} .card{ position:relative;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--white); transition:box-shadow .18s, transform .18s;cursor:pointer; } .card:hover{box-shadow:var(--shadow);transform:translateY(-2px);} /* "Stretched link" (bekend patroon, oa. Bootstrap's .stretched-link): een onzichtbare die de hele kaart overlapt, zodat de kaart een ECHTE link is (toetsenbord/rechtermuisklik/middelste- muisknop werken) i.p.v. een
. z-index:1 houdt 'm ONDER .fav-btn/.compare-check (z-index:2 hieronder) zodat die twee eigen, apart klikbare/focusbare controls blijven — ze zijn bewust NIET in de genest (interactieve content in is ongeldige HTML, zie de toelichting bij listingCard()). outline-offset is negatief omdat .card zelf overflow:hidden heeft — een normale (naar buiten toe getekende) focusring zou daardoor deels wegvallen. */ .card .card-link{position:absolute;inset:0;z-index:1;} .card .card-link:focus-visible{outline:2px solid var(--green);outline-offset:-3px;border-radius:var(--radius);} /* Op verzoek: lijst en kaart (zie updateDistanceMapListingPins()) waren twee losse weergaven van dezelfde resultaten — hoveren over een pin op de kaart markeert nu de bijbehorende kaart hier (zie highlightResultCardForListing()), zodat je in één oogopslag ziet welke fiets bij welke pin hoort zonder elke pin los te hoeven aanklikken. Zelfde visuele taal als de bestaande :hover hierboven (dezelfde transform/box-shadow-overgang staat al op .card zelf), plus een dunne groene rand als extra, duidelijk "dit is 'm"-signaal — nodig omdat deze highlight NIET van een echte muis-hover op de kaart zelf komt, dus zonder eigen indicator zou 'm makkelijk over het hoofd gezien worden tussen de andere kaarten. */ .card.map-pin-hover{box-shadow:0 0 0 2px var(--green-dark), var(--shadow);transform:translateY(-2px);} /* BUGFIX: was een VASTE hoogte (150px) bij een breedte die per pagina/kolomaantal verschilt (3 kolommen breed, 2 op de homepage, 1 op mobiel) — bij dezelfde object-fit:cover knipt een bredere kaart daardoor altijd meer van de foto weg dan een smallere. aspect-ratio houdt de hoogte verhoudingsgewijs mee met de breedte, dus de crop blijft overal even mild. */ .card .thumb{ aspect-ratio:4/3;background:linear-gradient(135deg,var(--green-light),var(--blue-light)); display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden; } .card .thumb img{width:100%;height:100%;object-fit:cover;} .card .thumb svg{width:64px;height:64px;opacity:.5;} /* Stond eerst als overlay bovenop de foto (top-rechts) — op verzoek verplaatst naast de tekst in .body, zodat de foto zelf niet deels wordt bedekt en helemaal te zien is. */ .card .badge-score{ background:var(--white);border:1px solid var(--border);border-radius:999px;padding:5px 12px 5px 6px; display:flex;align-items:center;gap:7px;font-size:15px;font-weight:700;font-family:var(--font-mono);flex-shrink:0; } .card .badge-score .unverified-dot{width:6px;height:6px;border-radius:50%;background:var(--amber);flex-shrink:0;margin-left:-1px;} .card .cat-badge{ position:absolute;top:10px;left:10px;background:rgba(255,255,255,.92);border-radius:999px;padding:3px 9px; font-size:11px;font-weight:600;color:var(--green-deep); } /* BUGFIX (kritische blik op mobiel, op verzoek): 30px is een krappe tikdoel voor een knop die vaak en snel aangetikt wordt (favoriet toevoegen), ruim onder de gangbare ~40-44px-richtlijn voor touch-targets — vergroot naar 40px, lettergrootte evenredig mee. */ .fav-btn{ width:40px;height:40px;border-radius:50%;background:var(--white);border:none; display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow); font-size:19px;line-height:1;color:var(--ink-faint);cursor:pointer;transition:color .15s, transform .1s;padding:0;flex-shrink:0; } .fav-btn:hover{transform:scale(1.1);} .fav-btn.active{color:#E0455F;} .card .fav-btn{position:absolute;bottom:10px;right:10px;z-index:2;} .fav-toggle-chip{ display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:10px; padding:8px 12px;font-size:12.5px;line-height:1.35;color:var(--ink-soft);cursor:pointer;background:var(--white); } .fav-toggle-chip.active{background:#FCE8EC;border-color:#E0455F;color:#C23A54;font-weight:600;} /* BUGFIX: stond eerst op top:10px;right:10px — exact dezelfde plek als .badge-score (de BikeScore-cirkel), die later in de DOM staat en 'm dus volledig overlapte. Het vinkje bestond wel, was alleen onzichtbaar (gevonden n.a.v. "waar is de vergelijkknop?"). Bottom-left is de enige hoek van de kaart die nog vrij was (top-links=categorie, top-rechts=BikeScore, rechtsonder=favoriet). */ .compare-check{position:absolute;bottom:10px;left:10px;z-index:2;display:flex;align-items:center;gap:5px;background:rgba(255,255,255,.92);border-radius:999px;padding:5px 10px 5px 8px;font-size:11.5px;font-weight:600;color:var(--ink-soft);box-shadow:var(--shadow);cursor:pointer;} .compare-check input{margin:0;cursor:pointer;} #compare-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--green-deep);color:var(--white);padding:14px 20px;display:none;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;box-shadow:0 -4px 16px rgba(0,0,0,.12);} #compare-bar .btn-outline{border-color:rgba(255,255,255,.5);color:var(--white);} /* BUGFIX (kritische blik, op verzoek: "vergelijking is niet symmetrisch", met concurrentie (Coolblue/Tweakers Pricewatch/Independer) als referentie): table-layout:fixed + colgroup (zie pageCompare()) i.p.v. content-gestuurde kolombreedtes — zonder dit maakte een lange titel ("Cube Reaction Hybrid Speed - Prachtige staat") z'n eigen kolom breder dan de andere twee. Nu altijd exact gelijke kolombreedtes, een lange titel wrapt gewoon over meerdere regels. BUGFIX (gemeld: "bij het scrollen zakken de foto's helemaal niet, die blijven nu structureel staan"): had hier ook position:sticky op de header-rij/labelkolom staan (zelfde idee als concurrerende vergelijkingstools) — in de praktijk verwarrend, de rijen eronder leken te "verdwijnen" achter de vastzittende foto's. Op verzoek weer weggehaald: de hele tabel scrolt nu gewoon normaal mee met de pagina. */ .compare-table{width:100%;border-collapse:collapse;table-layout:fixed;} .compare-table td,.compare-table th{border:1px solid var(--border);padding:12px;font-size:13.5px;vertical-align:top;word-wrap:break-word;} .compare-table td:first-child{color:var(--ink-soft);font-weight:600;background:var(--bg-soft);} .card .body{padding:15px;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;} .card .body-main{min-width:0;} .card .brand{font-size:12px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.05em;font-weight:600;} /* BUGFIX (gemeld met screenshot, "niet uitgelijnd"): geen regel-limiet hier betekende dat de kaarthoogte (en dus de positie van prijs/rating/aantal eronder) meeschoof met de titellengte — een korte titel ("Trek Allant+ 8") en een lange ("Cube Reaction Hybrid Speed - Prachtige staat", wrapt naar 2 regels) gaven zo zichtbaar ongelijke kaarten in dezelfde grid. Vast op max. 2 regels + "..." erna (zelfde patroon als vrijwel elke marktplaats), met min-height zodat ook een kaart met een KORTE titel (1 regel) evenveel ruimte reserveert als een met een lange (2 regels) — dat laatste is net zo belangrijk als de line-clamp zelf, anders blijft een korte titel alsnog een kortere kaart opleveren. */ .card .title{font-family:var(--font-display);font-weight:600;font-size:16px;line-height:1.3;margin:3px 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(1.3em * 2);} /* BUGFIX (gemeld met screenshot, "staat er nog steeds een beetje rommelig"): dit was display:flex + gap:12px met year/·/location/·/condition als 5 losse -flex-items — elk van die 12px gaps rond een los liggend streepje telt gewoon mee als layoutbreedte, waardoor deze regel al bij een bescheiden kaartbreedte (het 2-koloms grid) moest wrappen. Bij het wrappen springt zo'n los "·"-flex-item mee naar de volgende regel in plaats van bij zijn buurwoord te blijven, met een kaal streepje aan het einde van regel 1 en het laatste woord alleen op regel 2 als zichtbaar resultaat. Nu gewone inline tekst (zie listingCard()) i.p.v. losse flex-spans: geen kunstmatige gap-opslag meer, dus past de hele regel op vrijwel elke kaartbreedte gewoon op 1 regel; wrapt 'm alsnog, dan doet de browser dat als gewone tekst, niet als losse blokjes. */ .card .meta{font-size:12.5px;color:var(--ink-soft);} .card-rating{font-size:12px;color:var(--amber);font-weight:700;margin:-4px 0 10px;} .card-rating span{color:var(--ink-faint);font-weight:400;} .card .price{font-family:var(--font-mono);font-weight:700;font-size:17px;color:var(--green-deep);} /* ---- search page ---- */ .search-layout{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:flex-start;} @media(max-width:880px){.search-layout{grid-template-columns:1fr;}} .filters{ border:1px solid var(--border);border-radius:var(--radius);padding:20px;position:sticky;top:86px; } /* BUGFIX: bij het inklappen naar 1 kolom hierboven bleef .filters wél position:sticky houden — filters en resultaten staan dan in dezelfde kolom (filters eerst, resultaten eronder), dus de sticky-balk (incl. het kaartje) bleef bovenin "vastplakken" terwijl de resultaten eronderdoor scrolden: leek visueel alsof alles door elkaar liep. Op mobiel hoort een sidebar die boven de resultaten staat gewoon mee te scrollen, niet te blijven plakken. */ @media(max-width:880px){.filters{position:static;}} /* BUGFIX (gemeld, met concrete meting: 13 filtervelden bij elkaar zijn 1436px hoog — op een gangbaar telefoonscherm (844px) moest je 2 volle schermhoogtes scrollen vóórdat je ook maar 1 advertentie zag): op mobiel staan de filters nu standaard ingeklapt achter een knop (met een teller zodra er al filters actief zijn, zie updateFiltersToggleButton()), zodat de resultaten direct zichtbaar zijn — hetzelfde patroon als "Doe een bod"/"Bezichtiging voorstellen" elders. Desktop (>880px) blijft ongewijzigd: filters altijd zichtbaar in de vaste zijbalk. */ .filters-toggle-btn{display:none;width:100%;margin-bottom:14px;justify-content:center;} @media(max-width:880px){ .filters-toggle-btn{display:flex;} .filters{display:none;} .filters.expanded{display:block;} } .distance-map-wrap{position:relative;margin-top:6px;} #distance-map{height:200px;border-radius:10px;overflow:hidden;background:var(--bg-soft);} /* BUGFIX (gemeld: "Zoekpunt wissen" verschijnt niet in fullscreen, ook al hoort dat inmiddels wél zo): requestFullscreen() werd tot nu toe aangeroepen op #distance-map ZELF (zie toggleDistanceMapFullscreen()) — de Fullscreen API toont dan ALLEEN dat element en zijn eigen afstammelingen; alles daarbuiten, inclusief broertjes/zusjes in dezelfde .distance-map-wrap (de "Zoekpunt wissen"/"Toon alles"/fullscreen-knop en de zoom-hint, stuk voor stuk GEEN kind van #distance-map maar een sibling ervan), wordt in echte fullscreen simpelweg niet getekend — los van welke CSS-class ze wel of niet hebben. Waarschijnlijk al langer zo (ook de fullscreen-knop zelf zat hierdoor eigenlijk al onbereikbaar tijdens fullscreen), alleen nooit opgemerkt omdat Esc altijd als alternatief werkte om fullscreen te verlaten. Fix: het echte fullscreen-doelelement is nu #distance-map-wrap (de buitenste wrapper, zie toggleDistanceMapFullscreen() hieronder) — alle knoppen zijn daar wél een afstammeling van, dus blijven zichtbaar. #distance-map zelf (waar Leaflet z'n tegels in tekent) vult die wrapper gewoon volledig via height/width:100%. */ .distance-map-wrap:fullscreen,.distance-map-wrap:-webkit-full-screen{width:100vw;height:100vh;} .distance-map-wrap:fullscreen #distance-map,.distance-map-wrap:-webkit-full-screen #distance-map{height:100%;width:100%;border-radius:0;} .map-fullscreen-btn{ position:absolute;top:8px;right:8px;z-index:1050;width:34px;height:34px;border:none;border-radius:8px; background:#fff;color:var(--ink);font-size:16px;line-height:1;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.3); display:flex;align-items:center;justify-content:center; } .map-fullscreen-btn:hover{background:var(--bg-soft);} /* Op verzoek (gemeld met screenshot): een zoekpunt zetten via een kaartklik kon tot nu toe alleen VERPLAATST worden (opnieuw klikken), nooit echt verwijderd — er bestond al een manier om 'm te wissen (de "Binnen X km van ..."-filterchip bovenaan de pagina, zie removeFilter('radius')), maar die staat niet in de buurt van de kaart zelf, dus was voor een bezoeker die het zoekpunt daar net zette in de praktijk onvindbaar. Deze knop roept exact dezelfde, al bestaande removeFilter('radius') aan — geen nieuwe wis-logica, alleen een tweede, voor de hand liggende plek om 'm aan te roepen. Toont sowieso alleen in fullscreen (zie updateClearButtonVisibility()), dus RECHTS gepositioneerd, onder .map-fullscreen-btn — Leaflet's eigen +/- zoomknoppen blijven op hun standaard, werkende plek linksboven (zie de toelichting bij initDistanceMap() voor waarom die niet meer verplaatst worden), dus links is voor deze knop juist de kant om te vermijden. */ .map-clear-btn{ position:absolute;top:50px;right:8px;z-index:1050;height:34px;border:none;border-radius:8px;padding:0 12px; background:#fff;color:var(--ink);font-size:12.5px;font-weight:600;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.3); display:none;align-items:center;gap:5px; } .map-clear-btn.visible{display:flex;} .map-clear-btn:hover{background:var(--bg-soft);} /* Op verzoek: na het klikken op een cluster (zie updateDistanceMapListingPins()) ben je ingezoomd — deze knop past de kaart weer op alle huidige pins (fitDistanceMapToAllPins()), zodat je niet zelf hoeft terug te scrollen om het volledige overzicht terug te krijgen. Onder .map-clear-btn gepositioneerd i.p.v. ernaast: beide kunnen tegelijk zichtbaar zijn (een zoekpunt EN pins), en ernaast zou op een smalle (mobiele) kaart al snel niet meer passen. Zelfde rechts-redenering als bij .map-clear-btn hierboven. */ .map-fitall-btn{ position:absolute;top:92px;right:8px;z-index:1050;height:34px;border:none;border-radius:8px;padding:0 12px; background:#fff;color:var(--ink);font-size:12.5px;font-weight:600;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.3); display:none;align-items:center;gap:5px; } .map-fitall-btn.visible{display:flex;} .map-fitall-btn:hover{background:var(--bg-soft);} /* Op verzoek: scrollen/pinchen om te zoomen (muis + trackpad), zonder de klassieke valkuil dat een gewone paginascroll die toevallig over de kaart gaat, ongewild de kaart laat zoomen i.p.v. de pagina laat doorscrollen — zie de toelichting bij initDistanceMap() voor de Ctrl/Cmd-gate. Verschijnt alleen even (fade in/out) als iemand over de kaart scrollt zónder de modifier-toets, puur als korte hint, nooit blijvend in beeld. pointer-events:none zodat de hint zelf nooit de muis/scroll-interactie met de kaart eronder blokkeert. */ .map-zoom-hint{ position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:1050; background:rgba(23,58,44,.92);color:#fff;font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:20px; white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s; } .map-zoom-hint.visible{opacity:1;} /* Omgekeerde richting van de .card.map-pin-hover-highlight hierboven: hoveren over een kaartje in de resultatenlijst laat de bijbehorende pin hier opvallen (zie highlightMapPinForListing()). transform staat bewust op de SVG zelf, niet op de buitenste .leaflet-marker-icon-wrapper — Leaflet zet daar zelf al een inline transform op voor de positionering (translate3d), en een inline style wint altijd van een class in het stijlblad hier; de SVG erbinnen heeft geen eigen inline transform, dus is veilig om los te schalen. transform-origin onderin (de punt van de pin) houdt die punt op z'n plek terwijl de kop groter wordt, i.p.v. de hele pin uit het lood te laten groeien. */ .map-pin-marker svg{transition:transform .12s;} .map-pin-marker.hover-highlight svg{transform:scale(1.35);transform-origin:50% 100%;} /* Op verzoek, kritische blik op de kaart-popup: Leaflet's eigen sluitknop (X) heeft standaard geen achtergrond en overlapt de omslagfoto bovenin de popup — bij een lichte foto werd die onleesbaar. Een klein wit rondje erachter geeft altijd genoeg contrast. BUGFIX (gemeld met screenshot: "het kruisje valt in de foto"): top/right:6px zette de knop nog steeds BINNEN de contentruimte, dus bovenop de foto-hoek. Nu met een negatieve offset net BUITEN de afgeronde popup-kaart geplaatst (zwevend knopje op de rand), zodat 'm nooit meer over de foto zelf heen valt, ongeacht hoe die is uitgesneden. */ .leaflet-popup-close-button{ background:var(--white);border-radius:50%;width:22px;height:22px;line-height:22px!important; text-align:center;top:-9px!important;right:-9px!important;box-shadow:0 1px 4px rgba(0,0,0,.25); transition:color .12s; } /* Op verzoek: duidelijke hover-feedback, zelfde rood als de rest van de site bij waarschuwingen/fouten (.field-invalid) gebruikt. */ .leaflet-popup-close-button:hover{color:#c0392b!important;} .filters h3{font-size:14px;margin-bottom:14px;} .filter-group{margin-bottom:20px;} .filter-group:last-child{margin-bottom:0;} .filter-group label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:7px;} .filter-group input[type=text],.filter-group input[type=number]{ width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:8px;font-size:13.5px;font-family:inherit;background:var(--white); } .filter-group select{ width:100%;padding:9px 30px 9px 10px;border:1px solid var(--border);border-radius:8px;font-size:13.5px;font-family:inherit;background-color:var(--white);color:var(--ink); appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat;background-position:right 10px center;background-size:12px; } .filter-group select:hover{border-color:var(--green);} .filter-group select[disabled]{cursor:not-allowed;color:var(--ink-faint);background-color:var(--bg-soft);} .range-row{display:flex;gap:8px;} .chips{display:flex;flex-wrap:wrap;gap:7px;} .quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px;} @media(max-width:560px){.quiz-options{grid-template-columns:1fr;}} .quiz-option{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:10px;padding:12px 14px;cursor:pointer;font-size:14px;transition:border-color .15s,background .15s;} .quiz-option:hover{border-color:var(--green);} .quiz-option input{accent-color:var(--green);width:16px;height:16px;flex-shrink:0;} .quiz-option:has(input:checked){border-color:var(--green);background:var(--green-light);font-weight:600;color:var(--green-deep);} .quiz-entry-card{background:var(--green-deep);color:#fff;border-radius:var(--radius);padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:24px;} .quiz-entry-card .txt h3{color:#fff;font-size:16px;margin-bottom:4px;} .quiz-entry-card .txt p{color:rgba(255,255,255,.75);font-size:13.5px;} /* Bewust NIET dezelfde stijl als .quiz-entry-card hierboven (op verzoek, kritische blik): dat is de primaire CTA om een anonieme bezoeker te activeren, dit is een lichtere, lagere-inzet herinnering voor een al terugkerende, ingelogde gebruiker — zelfde .label-stijl als elders (.wheel-caption .label/.footer-grid .col-label) i.p.v. een eigen nieuwe visuele taal. */ .saved-search-nudge{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;} .saved-search-nudge .label{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--green-dark);font-weight:600;margin-bottom:4px;} .saved-search-nudge p{font-size:13.5px;color:var(--ink-soft);} .chip{ border:1px solid var(--border);border-radius:999px;padding:6px 11px;font-size:12.5px;color:var(--ink-soft);cursor:pointer;background:var(--white); } .chip.active{background:var(--green-light);border-color:var(--green);color:var(--green-dark);font-weight:600;} .filters-clear-link{background:none;border:none;color:var(--blue);font-size:12.5px;font-weight:600;padding:0;} .filters-clear-link:hover{text-decoration:underline;} .active-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;} .active-filters:empty{display:none;margin-bottom:0;} .active-filter-chip{ display:inline-flex;align-items:center;gap:7px;background:var(--green-light);color:var(--green-dark); border-radius:999px;padding:6px 8px 6px 12px;font-size:12.5px;font-weight:600; } .active-filter-chip button{ background:rgba(255,255,255,.6);border:none;color:var(--green-dark);width:16px;height:16px;border-radius:50%; font-size:10px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;font-weight:700; } .active-filter-chip button:hover{background:#fff;} .results-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:10px;min-width:0;} .results-head .count{font-size:14.5px;color:var(--ink-soft);} /* BUGFIX (gemeld met screenshot van een echt mobiel toestel: moest de pagina verkleinen om het hele scherm te zien): #sort-select had geen enkele breedtebeperking, en de langste optie ("Dichtstbijzijnde eerst (vul een postcode in)") duwde de NATIVE, gesloten select naar ~342px breed — flex-items krijgen standaard min-width:auto (niet 0), dus geen enkele voorouder mocht 'm smaller maken dan die intrinsieke inhoudsbreedte. Dat overflow-effect cascadeerde omhoog door alle geneste flex-containers (.results-head, .filters, de hele .search-layout), waardoor de HELE pagina breder werd gerenderd dan het scherm — vandaar dat inzoomen/verkleinen nodig leek om de rand te zien, een klassiek "iets ergens is breder dan de viewport"-symptoom. min-width:0 (mag nu overal in de keten kleiner) + een concrete max-breedte op de select zelf (native /.account-menu elders, hier via currentColor kleurbaar en ronddraaiend bij open/dicht (net als .comparables-details ▸/▾). */ .disclosure-chevron{color:var(--green-dark);background:var(--green-light);width:26px;height:26px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:transform .15s;} .notif-card[open] .disclosure-chevron{transform:rotate(180deg);} /* Confetti bij een verstuurde beoordeling (op verzoek) — puur CSS/DOM, geen library nodig: losse gekleurde blokjes die vanaf de bovenkant van het scherm vallen en na de animatie zichzelf weer verwijderen (zie launchConfetti()). */ .confetti-piece{position:fixed;top:-12px;width:8px;height:14px;pointer-events:none;z-index:9999;animation:confetti-fall linear forwards;} @keyframes confetti-fall{to{transform:translateY(105vh) rotate(720deg);opacity:0.2;}} .conversation-row{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--border);border-radius:var(--radius);text-decoration:none;color:inherit;margin-bottom:10px;background:var(--white);transition:box-shadow .15s;} .conversation-row:hover{box-shadow:var(--shadow);} .conversation-row .thumb{width:56px;height:44px;border-radius:8px;background:linear-gradient(135deg,var(--green-light),var(--blue-light));flex-shrink:0;overflow:hidden;} .conversation-row .thumb img{width:100%;height:100%;object-fit:cover;} .conversation-row .info{flex:1;min-width:0;} /* BUGFIX (kritische blik op mobiel, gevonden via een simulatie van 100 gesprekken met realistische, langere titel+verkoperscombinaties op een smal scherm): geen regelbegrenzing hier betekende dat een lange titel (advertentietitel + verkopersnaam) op een smal scherm over 2-3 regels wrapte — sinds .conversation-row zelf align-items:center gebruikt, centreert dat de datum/prullenbak- kolom dan tegen de HELE (nu hogere) rij i.p.v. tegen de bovenkant van de titel, waardoor de datum los leek te zweven, los van zowel titel als bericht-snippet. Nu dezelfde behandeling als .snippet hieronder (max 1 regel + "...") — voorkomt zowel het wrap-probleem als de losse-datum-bug in één keer, en is bovendien het gangbare patroon voor een compacte gespreksrij (WhatsApp/Marktplaats doen dit ook). */ .conversation-row .info .title{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .conversation-row .info .snippet{font-size:12.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .conversation-row .time{font-size:11.5px;color:var(--ink-faint);flex-shrink:0;} .conversation-row.unread{border-color:var(--green);background:var(--green-light);} .unread-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green-dark);margin-right:6px;flex-shrink:0;} .nav-badge{background:#E0455F;color:#fff;font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:999px;margin-left:6px;} .offer-card{border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin-bottom:14px;background:var(--bg-soft);} /* BUGFIX (esthetische blik: bod- en bezichtigingskaart in een berichtengesprek waren nauwelijks van elkaar te onderscheiden — zelfde grijze kader, zelfde badge/knoppenrij-opbouw). .offer-card is een generieke kaart-stijl die elders ook voor meldingen/rapportages/contactberichten wordt herbruikt (geen van die een "bod" is), dus de accentkleur hoort NIET in de basisregel maar alleen op de echte bod-kaart in een gesprek — vandaar deze losse modifier-class. */ .offer-card.offer-card-in-thread{border-left:3px solid var(--green);padding-left:13px;} .offer-row{display:flex;justify-content:space-between;align-items:center;} .offer-amount{font-family:var(--font-mono);font-size:20px;font-weight:700;color:var(--green-deep);} .status-declined{background:#FCE8EC;color:#C23A54;} /* BUGFIX (gemeld met screenshot: "het ziet er niet uit" + emoji weg): de bezichtiging/proefrit- kaart hergebruikte tot nu toe .offer-card/.offer-amount 1-op-1 — die laatste is een grote, vetgedrukte, monospace groene prijs-stijl, ontworpen voor een geldbedrag, niet voor een datum/ tijd. Vandaar dat het misplaatst oogde. Eigen, lichtere stijl: kleinere padding, geen zwaar accentkleur op het tijdstip zelf (dat is hier geen "hoofdgetal" zoals een bod dat wel is), een platte in plaats van uitgesproken-uppercase label. */ .appointment-card{border:1px solid var(--border);border-left:3px solid var(--blue);border-radius:var(--radius);padding:11px 14px 11px 12px;margin-bottom:14px;background:var(--bg-soft);} .appointment-label{font-size:12.5px;color:var(--ink-soft);font-weight:500;} .appointment-datetime{font-size:14.5px;font-weight:600;color:var(--ink);margin-top:1px;} /* Flatpickr in de eigen groene huisstijl i.p.v. de standaard blauwe kleuren (zie enhanceAppointmentDateInput()) — verder alleen kleur/afronding, geen structuurwijziging. Puur datum-kiezer (geen enableTime meer, zie de toelichting bij APPOINTMENT_TIME_OPTIONS), dus geen .flatpickr-time/.numInputWrapper-regels meer nodig. */ .flatpickr-calendar{border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,.14);font-family:inherit;} .flatpickr-day.selected,.flatpickr-day.selected:hover,.flatpickr-day.selected:focus{background:var(--green);border-color:var(--green);} .flatpickr-day.today{border-color:var(--green);} .flatpickr-day:hover{background:var(--green-light);} /* BUGFIX (gemeld met screenshot, op verzoek: "kunnen we dit esthetisch beter maken?"): twee losse dingen. (1) #appt-time was een kale -element voor de leesbare datumtekst) kopieert alleen className van het origineel, geen inline style — de inline-styling die #appt-date zelf had, ging zo verloren zodra flatpickr actief is (zelfde categorie bug als eerder bij het tegenbod-veld: terugval op onopgemaakte kale styling). Beide velden delen nu .appt-field (rand/radius/padding/ lettertype, gelijk aan de rest van de site se formulieren), en .appt-field wordt ook als altInputClass meegegeven zodat flatpickr's eigen kloon 'm gegarandeerd meekrijgt. */ /* min-width: zonder dit (gevonden tijdens het testen, en opnieuw nodig na #appt-time van