/* DealDepot24 — gedeelde stijl van de publieke site (homepage, aanbod, product) */ :root{ --font-display:"Bricolage Grotesque","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; --font-body:"Work Sans","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; --green:#2fd35e; --green-deep:#27bb52; --green-tint:#e2f7e9; --green-tint-line:#bfe9cd; /* Extra accentkleuren -- naast het groen, gebruikt voor productstaat-labels en speelse icoon-accenten, zodat de site niet monotoon groen aanvoelt. */ --amber:#f5a524; --amber-deep:#c97f0a; --amber-tint:#fdf1dc; --amber-tint-line:#f6ddaa; --blue:#3e8ef7; --blue-deep:#2266d1; --blue-tint:#e6f0fe; --blue-tint-line:#bcd8fc; --coral:#ff6b57; --coral-deep:#e14b36; --coral-tint:#ffe9e5; --coral-tint-line:#ffc9c0; --ink:#0c0f0d; --ink-soft:#171b18; --white:#ffffff; --grey-bg:#f4f6f3; --grey-line:#e2e6e0; --grey-text:#5f6b62; --radius:16px; --radius-lg:22px; --radius-sm:10px; --wrap:1180px; --shadow-sm:0 2px 10px rgba(12,15,13,.06); --shadow-md:0 16px 36px rgba(12,15,13,.12); } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ font-family:var(--font-body); background:var(--white); color:var(--ink); -webkit-font-smoothing:antialiased; } img{max-width:100%} a{color:inherit;text-decoration:none} .wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px} /* Koppen, merknaam en prijzen krijgen het karaktervollere display-font; lopende tekst en formulieren blijven op het rustige, goed leesbare Work Sans. */ h1,h2,h3,h4,.logo,.eyebrow,.btn,.prijs,.prijs-groot,.tegel-klant .cijfer,.mandje-totaal strong{ font-family:var(--font-display); } /* Zichtbare focusring voor toetsenbordgebruik, zonder de muis-ervaring te veranderen (elementen met een eigen focusstijl, zoals formuliervelden, blijven die houden). */ a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--green);outline-offset:3px;border-radius:4px; } /* ---------- Kortingsbalk (optioneel, aan/uit via het beheerpaneel) ---------- */ .korting-balk{background:linear-gradient(90deg,var(--coral),var(--amber));color:#fff;position:relative} .korting-balk-inner{ display:flex;align-items:center;justify-content:center;gap:10px; padding:11px 20px;text-align:center;flex-wrap:wrap; } .korting-balk p{margin:0;font-size:14px;font-weight:700;letter-spacing:.2px} .korting-emoji{font-size:18px;display:inline-block;animation:korting-wiebel 1.8s ease-in-out infinite} .korting-code{ display:inline-block;background:rgba(255,255,255,.22);border:1px dashed rgba(255,255,255,.75); padding:2px 11px;border-radius:999px;font-family:var(--font-display);letter-spacing:1px;margin-left:2px; } @keyframes korting-wiebel{ 0%,100%{transform:rotate(0deg)} 25%{transform:rotate(-12deg)} 75%{transform:rotate(12deg)} } @media (prefers-reduced-motion: reduce){ .korting-emoji{animation:none} } /* Prijzen mét actieve korting: overal waar dd_prijs_weergave() of de winkelwagen dit rendert -- productkaarten, productpagina, hero, mandje. */ .prijs-van{ text-decoration:line-through;color:var(--grey-text);font-weight:600; font-size:.82em;margin-right:7px;white-space:nowrap; } .prijs-nu{color:var(--coral-deep);white-space:nowrap} .korting-badge{ display:inline-block;background:var(--coral);color:#fff;font-size:11px;font-weight:800; padding:2px 8px;border-radius:999px;margin-left:7px;letter-spacing:.3px;vertical-align:middle; } /* Op de donkere hero-kaart is de standaard grijstint van .prijs-van te donker om nog leesbaar te zijn -- hier lichter maken. */ .hero-spotlight .hs-prijs .prijs-van{color:rgba(255,255,255,.55)} .korting-toegepast{ display:flex;align-items:center;gap:8px;background:var(--coral-tint);color:var(--coral-deep); border:1px solid var(--coral-tint-line);border-radius:10px;padding:10px 14px; font-size:13px;font-weight:600;margin:14px 0; } /* ---------- Header ---------- */ header{background:var(--ink);color:var(--white);padding:18px 0 22px} .topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap} .logo{font-size:30px;font-weight:800;letter-spacing:-.5px;line-height:1} .logo span{color:var(--green)} .logo small{display:block;font-size:12px;font-weight:500;color:#9aa19c;letter-spacing:0;margin-top:6px} .top-actions{display:flex;gap:10px;flex-wrap:wrap} .pill{ display:inline-flex;align-items:center;gap:8px; background:#2a2f2c;color:#dfe3e0; border:0;border-radius:999px;padding:12px 20px; font-size:14px;font-weight:600;cursor:pointer;font-family:inherit; transition:background .15s ease,transform .15s ease; } .pill:hover{background:#363c38;transform:translateY(-1px)} .pill .count{color:var(--green)} .searchbar{display:flex;margin-top:20px;background:var(--white);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm)} .searchbar input{ flex:1;border:0;outline:0;padding:16px 18px;font-size:15px; font-family:inherit;color:var(--ink);background:transparent;min-width:0; } .searchbar button{ border:0;background:var(--green);color:#08210f;width:64px; font-size:18px;cursor:pointer;display:grid;place-items:center; transition:background .15s ease; } .searchbar button:hover{background:var(--green-deep)} /* ---------- Categorieen ---------- */ .cats{background:var(--ink);padding-bottom:26px} .cat-row{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 8px} .cats-leeg{color:#9aa19c;font-size:14px;padding:16px 2px 8px;margin:0} .cat{ flex:0 0 auto;min-width:148px;background:var(--white);color:var(--ink); border-radius:var(--radius);padding:20px 18px;text-align:center; font-weight:700;font-size:15px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease; display:block; } .cat:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)} .cat.aan{background:var(--green)} .cat .ico{display:block;font-size:24px;margin-bottom:8px} /* ---------- Hero ---------- */ .hero{ background:radial-gradient(120% 120% at 0% 0%, #1c6b39 0%, #0f3a20 42%, var(--ink) 78%); color:var(--white);padding:64px 0 72px; position:relative;overflow:hidden; } /* Zachte kleurvlekken op de achtergrond -- puur decoratief, geeft de hero wat meer diepte en speelsheid dan een vlakke gradient. */ .hero-blob{ position:absolute;border-radius:50%;filter:blur(70px);opacity:.32; pointer-events:none;z-index:0;animation:hero-float 10s ease-in-out infinite; } .hero-blob-amber{width:340px;height:340px;background:var(--amber);top:-130px;right:-90px} .hero-blob-blauw{width:280px;height:280px;background:var(--blue);bottom:-110px;left:-70px;animation-delay:-5s} @keyframes hero-float{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(-18px,16px)} } @media (prefers-reduced-motion: reduce){ .hero-blob{animation:none} } .hero-golf{position:absolute;left:0;bottom:-1px;width:100%;height:44px;display:block;z-index:1} .hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center} .eyebrow{ color:var(--green);font-weight:800;font-size:13px; letter-spacing:2.4px;text-transform:uppercase;margin:0 0 18px; } .hero h1{ font-size:clamp(38px,5.4vw,62px);line-height:1.03;margin:0 0 22px; font-weight:800;letter-spacing:-1.5px; } .hero h1 em{font-style:normal;color:var(--green);display:block} .hero p.lead{font-size:18px;line-height:1.6;color:#cdd4cf;margin:0 0 30px;max-width:520px} .hero-feiten{ list-style:none;margin:34px 0 0;padding:22px 0 0;border-top:1px solid rgba(255,255,255,.12); display:flex;flex-wrap:wrap;gap:16px 30px; } .hero-feiten li{display:flex;align-items:center;gap:8px;font-size:14px;color:#cdd4cf;font-weight:600} .hero-feiten .ico{font-size:15px} .btns{display:flex;gap:14px;flex-wrap:wrap} .btn{ display:inline-flex;align-items:center;gap:10px; padding:16px 26px;border-radius:var(--radius-sm);font-size:16px;font-weight:700; cursor:pointer;border:2px solid transparent; transition:transform .15s cubic-bezier(.16,.8,.3,1),background .15s ease,box-shadow .15s ease; } .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0)} .btn-primary{background:var(--green);color:#08210f;box-shadow:0 1px 2px rgba(8,33,15,.18)} .btn-primary:hover{background:var(--green-deep);box-shadow:var(--shadow-md)} .btn-ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.55)} .btn-ghost:hover{border-color:var(--white);background:rgba(255,255,255,.07)} /* ---------- Hero: uitgelicht product (vervangt de aankondiging zodra er al een populair product is) ---------- */ .hero-spotlight{ position:relative;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-lg);overflow:hidden;backdrop-filter:blur(8px); transition:transform .2s ease,border-color .2s ease; } .hero-spotlight:hover{transform:translateY(-3px);border-color:rgba(47,211,94,.4)} .hero-spotlight .hs-foto{ display:block;aspect-ratio:16/10;background:rgba(255,255,255,.04);position:relative;overflow:hidden; } .hero-spotlight .hs-foto img{ width:100%;height:100%;object-fit:contain;display:block;padding:18px; transition:transform .35s cubic-bezier(.16,.8,.3,1); } .hero-spotlight:hover .hs-foto img{transform:scale(1.06)} .hero-spotlight .hs-vlag{ position:absolute;top:14px;left:14px;background:var(--green);color:#08210f; font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase; padding:6px 12px;border-radius:999px; } .hero-spotlight .hart-knop{position:absolute;top:14px;right:14px;z-index:2} .hero-spotlight .hs-body{padding:22px} .hero-spotlight h3{margin:0 0 6px;font-size:20px;letter-spacing:-.4px;color:var(--white)} .hero-spotlight .hs-prijs{font-size:27px;font-weight:800;color:var(--white);margin:0 0 18px;letter-spacing:-.5px} .hero-spotlight .btn{width:100%;justify-content:center} .link-knop{ background:0;border:0;color:var(--green);font-weight:700;cursor:pointer; padding:0;font-family:inherit;font-size:inherit;text-decoration:underline; } /* ---------- Aankondiging ---------- */ .announce{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-lg);padding:30px; backdrop-filter:blur(8px); } .badge{ display:inline-flex;align-items:center;gap:8px;background:var(--green);color:#08210f; font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase; padding:7px 14px;border-radius:999px;margin-bottom:18px; } .dot{width:8px;height:8px;border-radius:50%;background:#08210f;animation:pulse 1.6s infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}} .announce h2{margin:0 0 8px;font-size:24px;letter-spacing:-.5px} .announce h2.soon{font-size:clamp(30px,4vw,40px);font-weight:800;letter-spacing:-1.2px;color:var(--green)} .announce p{margin:0 0 22px;color:#c6cec8;font-size:15px;line-height:1.6} .mailcard{ display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer; font-family:inherit;color:inherit; background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.12); border-radius:14px;padding:16px 18px;transition:border-color .15s ease,background .15s ease; } .mailcard:hover{border-color:var(--green);background:rgba(0,0,0,.5)} .mail-ico{font-size:22px;color:var(--green);line-height:1} .mail-lbl{display:block;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#9aa19c;margin-bottom:4px} .mail-adr{display:block;font-size:16px;font-weight:800;color:var(--white);word-break:break-all} .form-note{font-size:12px;color:#8b938d;margin:14px 0 0} /* ---------- Secties ---------- */ section.light{background:var(--grey-bg);padding:70px 0} section.plain{background:var(--white);padding:70px 0} h2.section{font-size:clamp(26px,3.4vw,36px);font-weight:800;letter-spacing:-1px;margin:0 0 12px} p.section-sub{color:var(--grey-text);font-size:17px;line-height:1.6;margin:0 0 40px;max-width:640px} .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px} .card{ background:var(--white);border:1px solid var(--grey-line);border-radius:var(--radius);padding:28px; box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease; } .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)} section.plain .card{background:var(--grey-bg);border-color:transparent;box-shadow:none} section.plain .card:hover{box-shadow:var(--shadow-sm)} .card .ico{ width:52px;height:52px;border-radius:14px;background:var(--green-tint); display:flex;align-items:center;justify-content:center; font-size:24px;margin-bottom:16px; transition:transform .3s cubic-bezier(.34,1.56,.64,1); } .card:hover .ico{transform:rotate(-8deg) scale(1.08)} /* Kleurtje per kaart in plaats van overal hetzelfde groen -- speelser en maakt de rij in één oogopslag scanbaar. */ .card .ico.ico-groen{background:var(--green-tint);color:var(--green-deep)} .card .ico.ico-blauw{background:var(--blue-tint);color:var(--blue-deep)} .card .ico.ico-amber{background:var(--amber-tint);color:var(--amber-deep)} .card .ico.ico-koraal{background:var(--coral-tint);color:var(--coral-deep)} .card h3{margin:0 0 8px;font-size:18px;font-weight:800} .card p{margin:0;color:var(--grey-text);font-size:15px;line-height:1.6} .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px;margin-top:36px} .step .num{ width:42px;height:42px;border-radius:12px; background:linear-gradient(135deg,var(--ink-soft),var(--ink));color:var(--green); display:grid;place-items:center;font-weight:800;font-size:18px;margin-bottom:14px; font-family:var(--font-display); } /* Elke stap zijn eigen kleur, in dezelfde volgorde als de rest van de site (groen/blauw/amber/koraal) -- maakt de vier stappen visueel losser van elkaar in plaats van vier identieke blokjes. */ .step .num.num-groen{background:linear-gradient(135deg,var(--green-deep),var(--green));color:#08210f} .step .num.num-blauw{background:linear-gradient(135deg,var(--blue-deep),var(--blue));color:#fff} .step .num.num-amber{background:linear-gradient(135deg,var(--amber-deep),var(--amber));color:#3a2600} .step .num.num-koraal{background:linear-gradient(135deg,var(--coral-deep),var(--coral));color:#fff} .step h3{margin:0 0 6px;font-size:17px} .step p{margin:0;color:var(--grey-text);font-size:15px;line-height:1.6} /* ---------- Verkoop-blok ---------- */ .sell{ background:radial-gradient(130% 160% at 100% 0%, var(--ink-soft) 0%, var(--ink) 62%); color:var(--white);border-radius:var(--radius-lg); padding:52px;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center; } .sell h2{font-size:clamp(24px,3vw,34px);margin:0 0 14px;letter-spacing:-.8px} .sell p{color:#c6cec8;font-size:16px;line-height:1.7;margin:0 0 26px} .sell ul{list-style:none;margin:0;padding:0;display:grid;gap:12px} .sell li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:#dfe3e0} .sell li::before{content:"\2713";color:var(--green);font-weight:800} /* ---------- Footer ---------- */ footer{background:var(--ink);color:#9aa19c;padding:52px 0 34px;font-size:14px} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;margin-bottom:34px} footer h4{color:var(--white);font-size:15px;margin:0 0 14px} footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px} footer a:hover{color:var(--green)} .foot-bottom{border-top:1px solid #262b28;padding-top:22px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px} .foot-bottom-bedrijf{text-align:right;line-height:1.7} .foot-bottom-bedrijf a{color:#9aa19c} .foot-bottom-bedrijf a:hover{color:var(--green)} .foot-bottom-nb{opacity:.65} @media (max-width:560px){.foot-bottom-bedrijf{text-align:left}} /* ---------- Contactformulier (modal) ---------- */ .modal-laag{ position:fixed;inset:0;background:rgba(6,10,7,.72);z-index:80; display:none;align-items:flex-start;justify-content:center;padding:26px 16px;overflow-y:auto; } .modal-laag.open{display:flex} .modal{ background:var(--white);color:var(--ink);border-radius:18px;width:100%;max-width:600px; box-shadow:0 26px 70px rgba(0,0,0,.45);animation:omhoog .18s ease-out; } @keyframes omhoog{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .modal-kop{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:24px 26px 0} .modal-kop h2{margin:0 0 4px;font-size:22px;letter-spacing:-.5px} .modal-kop p{margin:0;font-size:14px;color:var(--grey-text);line-height:1.5} .sluit{background:0;border:0;font-size:28px;line-height:1;cursor:pointer;color:#9aa19c;padding:0 2px} .sluit:hover{color:var(--ink)} .modal form{padding:22px 26px 26px} .fveld{margin-bottom:15px} .fveld label{display:block;font-size:13px;font-weight:700;margin-bottom:6px} .fveld input,.fveld select,.fveld textarea{ width:100%;border:1px solid var(--grey-line);border-radius:var(--radius-sm);padding:12px 14px; font-family:inherit;font-size:15px;color:var(--ink);background:#fff;outline:0; transition:border-color .15s ease,box-shadow .15s ease; } .fveld textarea{min-height:110px;resize:vertical;line-height:1.55} .fveld input:focus,.fveld select:focus,.fveld textarea:focus{ border-color:var(--green);box-shadow:0 0 0 3px rgba(47,211,94,.18); } .fveld .tip{font-size:12px;color:var(--grey-text);margin-top:5px} .frij{display:grid;grid-template-columns:1fr 1fr;gap:14px} .honing{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .fmelding{border-radius:10px;padding:13px 16px;margin-bottom:16px;font-size:14px;line-height:1.55;display:none} .fmelding.ok{background:var(--green-tint);color:#166534;border:1px solid var(--green-tint-line);display:block} .fmelding.fout{background:#fbe9e8;color:#9b2c28;border:1px solid #f3cfcd;display:block} .modal .btn{width:100%;justify-content:center} .kleine-letters{font-size:12px;color:var(--grey-text);margin:14px 0 0;text-align:center;line-height:1.6} .kleine-letters a{color:var(--ink);font-weight:700} /* ---------- Aanbodpagina: subkop, filters ---------- */ .subhero{background:var(--ink);color:var(--white);padding:34px 0} .subhero h1{font-size:clamp(26px,3.6vw,38px);margin:0 0 6px;letter-spacing:-1px} .subhero p{margin:0;color:#c6cec8;font-size:15px} .kruimel{font-size:13px;color:#9aa19c;margin:0 0 10px} .kruimel a:hover{color:var(--white)} .winkel-lay{display:grid;grid-template-columns:250px 1fr;gap:32px;align-items:flex-start} .filters{ background:var(--white);border:1px solid var(--grey-line);border-radius:var(--radius); padding:22px;position:sticky;top:20px; } .filters h2{display:flex;align-items:center;gap:8px;font-size:15px;margin:0 0 16px;letter-spacing:-.2px} .filter-telling{ display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px; border-radius:999px;background:var(--green-tint);color:var(--green-deep);font-size:12px;font-weight:800; } .filtergroep{margin-bottom:20px} .filtergroep:last-child{margin-bottom:0} .filtergroep label{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--grey-text);margin-bottom:8px} .filtergroep select,.filtergroep input{ width:100%;border:1px solid var(--grey-line);border-radius:9px;padding:10px 11px; font-family:inherit;font-size:14px;color:var(--ink);background:#fff;outline:0; } .filtergroep select:focus,.filtergroep input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(47,211,94,.16)} .prijs-rij{display:grid;grid-template-columns:1fr 1fr;gap:8px} .filter-knoppen{display:grid;gap:10px;margin-top:22px} .filter-knoppen .btn{width:100%;justify-content:center;padding:12px 18px;font-size:14px} .wis-filters{ display:block;text-align:center;font-size:13px;color:var(--grey-text);font-weight:700; padding:6px;border-radius:8px; } .wis-filters:hover{color:var(--ink);background:var(--grey-bg)} .resultaten-kop{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px} .resultaten-aantal{color:var(--grey-text);font-size:14px} .sorteer select{ border:1px solid var(--grey-line);border-radius:9px;padding:10px 12px;font-family:inherit; font-size:14px;color:var(--ink);background:#fff; } .filter-chips{display:flex;flex-wrap:wrap;gap:8px;margin:-6px 0 18px} .filter-chip{ display:inline-flex;align-items:center;gap:6px;background:var(--white);border:1px solid var(--grey-line); border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;color:var(--ink); transition:border-color .15s ease,background .15s ease; } .filter-chip:hover{border-color:var(--ink);background:var(--grey-bg)} .filter-chip span{color:var(--grey-text);font-weight:700} .productgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px} .productkaart{ background:var(--white);border:1px solid var(--grey-line);border-radius:var(--radius); overflow:hidden;display:block;transition:transform .15s ease,box-shadow .15s ease; box-shadow:var(--shadow-sm); } .productkaart:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)} .productkaart .foto-wrap{aspect-ratio:1/1;background:var(--grey-bg);position:relative;overflow:hidden} .productkaart .foto-wrap img{ width:100%;height:100%;object-fit:contain;display:block; transition:transform .35s cubic-bezier(.16,.8,.3,1); } .productkaart:hover .foto-wrap img{transform:scale(1.07)} .productkaart .geen-foto{width:100%;height:100%;display:grid;place-items:center;color:#c3c8c4;font-size:34px} .productkaart .staat-vlag{ position:absolute;top:10px;left:10px;background:rgba(12,15,13,.82);color:#fff; font-size:11px;font-weight:700;padding:5px 10px;border-radius:999px; } /* Staat op kleur: in één oogopslag zien of iets nieuw is of gebruikssporen heeft, zonder de tekst te hoeven lezen. Zelfde kleurcode overal waar een staat-label voorkomt (kaarten, hero, productpagina). */ .staat-vlag.staat-nieuw,.hs-vlag.staat-nieuw{background:var(--green);color:#08210f} .staat-vlag.staat-als_nieuw,.hs-vlag.staat-als_nieuw{background:var(--blue);color:#fff} .staat-vlag.staat-goed,.hs-vlag.staat-goed{background:var(--amber);color:#3a2600} .staat-vlag.staat-gebruikssporen,.hs-vlag.staat-gebruikssporen{background:var(--coral);color:#fff} .staat-vlag.staat-defect,.hs-vlag.staat-defect{background:#6b7280;color:#fff} .badge-info.staat-nieuw{background:var(--green-tint);border:1px solid var(--green-tint-line);color:var(--green-deep)} .badge-info.staat-als_nieuw{background:var(--blue-tint);border:1px solid var(--blue-tint-line);color:var(--blue-deep)} .badge-info.staat-goed{background:var(--amber-tint);border:1px solid var(--amber-tint-line);color:var(--amber-deep)} .badge-info.staat-gebruikssporen{background:var(--coral-tint);border:1px solid var(--coral-tint-line);color:var(--coral-deep)} .badge-info.staat-defect{background:#eceff1;border:1px solid #d7dbdd;color:#52606d} .productkaart .info{padding:16px} .productkaart .cat-naam{font-size:12px;color:var(--grey-text);margin:0 0 4px} .productkaart h3{margin:0 0 6px;font-size:16px;line-height:1.35;font-weight:700} .productkaart .prijs{font-size:19px;font-weight:800;letter-spacing:-.3px;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 0} .productkaart .prijs .prijs-van{font-size:.6em;margin-right:5px} .productkaart .prijs .korting-badge{font-size:10px;padding:1px 6px;margin-left:5px} .productkaart .voorraad-laag{display:block;font-size:12px;color:#c47b12;font-weight:700;margin-top:4px} .geen-resultaten{ background:var(--grey-bg);border-radius:var(--radius);padding:50px 30px;text-align:center; color:var(--grey-text); } .geen-resultaten-icoon{font-size:32px;margin-bottom:14px} .geen-resultaten strong{display:block;color:var(--ink);font-size:18px;margin-bottom:8px} .paginering{display:flex;justify-content:center;gap:8px;margin-top:34px} .paginering a,.paginering span{ display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px; border-radius:9px;font-size:14px;font-weight:700;padding:0 6px; } .paginering a{background:var(--white);border:1px solid var(--grey-line);color:var(--ink)} .paginering a:hover{border-color:var(--ink)} .paginering span.actief{background:var(--ink);color:var(--white)} .paginering span.uit{color:#c3c8c4} /* ---------- Productpagina ---------- */ /* Op grote schermen krijgt de galerij iets meer ruimte dan de infokolom, zodat de foto zelf groter in beeld komt (op de telefoon staat hij toch al vol breed, want daar valt deze kolomverdeling weg -- zie de 900px-regel verderop). */ .product-lay{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:flex-start} /* Geen vast vierkant meer: de foto bepaalt zelf zijn vorm (staand blijft staand, liggend blijft liggend), zodat hij het vak zo veel mogelijk vult zonder bijgesneden te worden en zonder brede grijze randen ernaast. */ .galerij .hoofd{ background:var(--grey-bg);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:12px; display:flex;align-items:center;justify-content:center;position:relative; max-height:min(76vh,700px); } .galerij .hoofd img{width:auto;height:auto;max-width:100%;max-height:min(76vh,700px);object-fit:contain;display:block} .galerij .hoofd .geen-foto{width:100%;aspect-ratio:1/1;display:grid;place-items:center;color:#c3c8c4;font-size:60px} .galerij .hoofd.dd-kan-inzoomen{cursor:zoom-in} .galerij .zoom-hint{ position:absolute;bottom:12px;right:12px;width:38px;height:38px;border-radius:50%; background:rgba(12,15,13,.72);color:#fff;display:grid;place-items:center;font-size:16px; pointer-events:none; } /* ---------- Foto uitvergroten (productpagina) ---------- */ .foto-zoom-laag{ position:fixed;inset:0;background:rgba(6,10,7,.94);z-index:90; display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:12px 64px; cursor:zoom-out;overflow-y:auto; } .foto-zoom-laag.open{display:flex} /* Dit is het scherm waar de foto juist zo groot mogelijk moet komen. Eerder stond hier max-height:64vh, wat bij een staande foto (smal en hoog) veel te veel onbenutte ruimte links en rechts overliet -- de hoogte was de beperkende factor, dus de foto werd vanzelf ook smal. Met 80vh (en minder padding eromheen) komt zo'n foto nu een stuk groter in beeld. */ .foto-zoom-laag img#dd-foto-zoom-img{max-width:100%;max-height:90vh;object-fit:contain;display:block;border-radius:6px;cursor:default} .foto-zoom-sluit{ position:fixed;top:16px;right:20px;background:0;border:0;color:#fff; font-size:34px;line-height:1;cursor:pointer;padding:4px 8px;z-index:1; } .foto-zoom-sluit:hover{color:var(--green)} .foto-zoom-pijl{ position:fixed;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);border:0;color:#fff; width:48px;height:48px;border-radius:50%;font-size:26px;line-height:1;cursor:pointer; display:grid;place-items:center;transition:background .15s ease; } .foto-zoom-pijl:hover{background:rgba(255,255,255,.26)} .foto-zoom-vorige{left:12px} .foto-zoom-volgende{right:12px} .foto-zoom-duimen{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:100%;cursor:default} .foto-zoom-duimen .duim{ width:56px;height:56px;border-radius:8px;overflow:hidden;border:2px solid transparent; background:rgba(255,255,255,.08);cursor:pointer;padding:0;opacity:.6; transition:opacity .15s ease,border-color .15s ease; } .foto-zoom-duimen .duim.aan{border-color:var(--green);opacity:1} .foto-zoom-duimen .duim img{width:100%;height:100%;object-fit:cover;display:block} @media (max-width:560px){ .foto-zoom-laag{padding:16px 52px} .foto-zoom-pijl{width:40px;height:40px;font-size:22px} .foto-zoom-duimen .duim{width:44px;height:44px} } .galerij .duimen{display:flex;gap:10px;flex-wrap:wrap} .galerij .duim{ width:76px;height:76px;border-radius:10px;overflow:hidden;border:2px solid transparent; background:var(--grey-bg);cursor:pointer;padding:0; } .galerij .duim.aan{border-color:var(--green)} .galerij .duim img{width:100%;height:100%;object-fit:cover;display:block} .product-info .cat-naam{color:var(--grey-text);font-size:14px;margin:0 0 6px} .product-info .cat-naam a:hover{color:var(--ink);text-decoration:underline} .product-info h1{font-size:clamp(24px,3.2vw,32px);margin:0 0 12px;letter-spacing:-.8px;line-height:1.2} .product-info .merk-model{color:var(--grey-text);font-size:15px;margin:0 0 18px} .product-info .prijs-groot{font-size:34px;font-weight:800;letter-spacing:-1px;margin:0 0 18px} .badges{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px} .badge-info{ display:inline-flex;align-items:center;gap:6px;background:var(--grey-bg); padding:8px 14px;border-radius:999px;font-size:13px;font-weight:700;color:var(--ink); } .badge-info.verkocht{background:#fbe9e8;color:#9b2c28} .product-info .oms{font-size:15px;line-height:1.7;color:#2a2f2c;margin:0 0 24px;white-space:pre-line} .speclijst{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:9px} .speclijst li{ display:flex;justify-content:space-between;gap:16px;font-size:14px; padding-bottom:9px;border-bottom:1px solid var(--grey-line); } .speclijst li span:first-child{color:var(--grey-text)} .speclijst li span:last-child{font-weight:700;text-align:right} /* ---------- Kaart: klikbare hele-kaart-link onder de knoppen ---------- */ .productkaart{position:relative} .kaart-link{position:absolute;inset:0;z-index:1} .productkaart .foto-wrap,.productkaart .info{position:relative;z-index:0} .productkaart.niet-meer-te-koop{opacity:.6} .productkaart.niet-meer-te-koop .staat-vlag{background:rgba(155,44,40,.85)} /* ---------- Hartje (favoriet) ---------- */ .hart-knop{ position:relative;z-index:2;border:0;background:rgba(255,255,255,.92);color:#9aa19c; width:36px;height:36px;border-radius:50%;font-size:17px;cursor:pointer; display:grid;place-items:center;transition:color .15s ease,transform .12s ease; } .hart-knop:hover{transform:scale(1.08)} .hart-knop.aan{color:#e0453f} .foto-wrap .hart-knop{position:absolute;top:10px;right:10px} .titel-rij{display:flex;justify-content:space-between;align-items:flex-start;gap:14px} .titel-rij .hart-knop{background:var(--grey-bg);flex:0 0 auto} /* ---------- Prijs + snel-toevoegen op de kaart ---------- */ .kaart-onder{display:flex;align-items:center;justify-content:space-between;gap:10px} .mini-mandje{ position:relative;z-index:2;border:0;background:var(--ink);color:var(--white); width:34px;height:34px;border-radius:9px;font-size:15px;cursor:pointer; display:grid;place-items:center;transition:background .15s ease; } .mini-mandje:hover{background:var(--green-deep)} .mini-mandje:disabled{opacity:.7;cursor:default} /* ---------- Tabbladen (inloggen/registreren) ---------- */ .tabbladen{display:flex;gap:6px;margin-bottom:20px;background:var(--grey-bg);padding:5px;border-radius:12px} .tabbladen .tab{ flex:1;text-align:center;padding:11px 14px;border-radius:9px;font-weight:700;font-size:14px;color:var(--grey-text); } .tabbladen .tab.aan{background:var(--white);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)} /* ---------- Kaarten voor account-achtige pagina's ---------- */ .kaart-account{background:var(--white);border:1px solid var(--grey-line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm)} .tegels-klant{display:grid;grid-template-columns:1fr 1fr;gap:16px} .tegel-klant{ display:block;background:var(--white);border:1px solid var(--grey-line);border-radius:var(--radius); padding:20px;text-align:center;transition:transform .15s ease,box-shadow .15s ease; box-shadow:var(--shadow-sm); } .tegel-klant:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)} .tegel-klant[data-scroll-reveal]:hover{transition:transform .15s ease,box-shadow .15s ease} .tegel-klant .cijfer{display:block;font-size:28px;font-weight:800;letter-spacing:-1px} .tegel-klant .label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.8px;color:var(--grey-text);margin-top:4px} /* ---------- Winkelwagen ---------- */ .melding-let-op{background:#fdf3e0;color:#7a5310;border:1px solid #f0dcb4;border-radius:10px;padding:14px 18px;margin-bottom:20px;font-size:14px} .mandje-tabel{background:var(--white);border:1px solid var(--grey-line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)} .mandje-regel{ display:grid;grid-template-columns:64px 1fr auto auto auto;gap:16px;align-items:center; padding:16px 18px;border-bottom:1px solid var(--grey-line); } .mandje-regel:last-child{border-bottom:0} .mandje-regel.niet-meer-te-koop{opacity:.55} .mandje-foto{width:64px;height:64px;border-radius:9px;overflow:hidden;background:var(--grey-bg);display:grid;place-items:center} .mandje-foto img{width:100%;height:100%;object-fit:cover;display:block} .mandje-info a{font-weight:700} .mandje-info a:hover{text-decoration:underline} .mini-fout{display:block;font-size:12px;color:#9b2c28;font-weight:700;margin-top:2px} .mandje-aantal select{border:1px solid var(--grey-line);border-radius:8px;padding:8px 10px;font-family:inherit;font-size:14px} .mandje-prijs{font-weight:800;white-space:nowrap} .knop-verwijder{ background:0;border:0;font-size:22px;line-height:1;color:#9aa19c;cursor:pointer;padding:4px 8px;border-radius:8px; } .knop-verwijder:hover{color:#9b2c28;background:#fbe9e8} .mandje-totaal{ display:flex;justify-content:space-between;align-items:baseline;padding:20px 4px;font-size:17px;font-weight:700; } .mandje-totaal strong{font-size:24px;letter-spacing:-.5px} .afreken-blok{text-align:center;max-width:360px;margin:0 auto} .afreken-blok .btn{width:100%;justify-content:center} .afreken-blok .btn:disabled{opacity:.5;cursor:not-allowed;transform:none} .mandje-form{display:flex;gap:10px} .mandje-form select{border:1px solid var(--grey-line);border-radius:9px;padding:0 10px;font-family:inherit} .mandje-form .btn{flex:1} @media (max-width:900px){ .hero-grid{grid-template-columns:1fr;gap:36px} .sell{grid-template-columns:1fr;padding:34px} .foot-grid{grid-template-columns:1fr 1fr} .winkel-lay{grid-template-columns:1fr} .filters{position:static} .product-lay{grid-template-columns:1fr;gap:28px} .mandje-regel{grid-template-columns:56px 1fr;grid-template-areas:"foto info" "foto aantal" "foto verwijder";row-gap:8px} .mandje-foto{grid-area:foto} .mandje-info{grid-area:info} .mandje-aantal{grid-area:aantal} .mandje-prijs{grid-area:aantal;justify-self:end} .knop-verwijder{grid-area:verwijder;justify-self:start} } @media (max-width:560px){ .logo{font-size:26px} .pill{padding:11px 15px;font-size:13px} .hero{padding:46px 0 54px} .announce{padding:22px} .foot-grid{grid-template-columns:1fr} .prijs-rij{grid-template-columns:1fr} .tegels-klant{grid-template-columns:1fr} .frij{grid-template-columns:1fr} /* Zoekbalk: op smalle telefoons paste de placeholdertekst niet en werd "merken" en "categorie" afgekapt -- kleiner lettertype, minder padding en een smallere knop geven de tekst meer ruimte. */ .searchbar input{font-size:13px;padding:14px 10px} .searchbar button{width:48px;font-size:16px} /* Categorieën-balk: laat het volgende blokje net zichtbaar meepiepen zodat duidelijk is dat je verder kan scrollen naar meer categorieën. */ .cat-row{scroll-snap-type:x proximity} .cat{scroll-snap-align:start;min-width:132px;padding:18px 14px} } /* ===================================================================== Scroll-animaties (homepage, aanbod, productpagina) Werkt samen met scroll-fx.js: dat script zet --p (pin-en-zoom) en --z (zachte zoom) op de elementen, en plakt de klasse "in-beeld" op [data-scroll-reveal] zodra dat in het zicht komt. Zonder JavaScript staat alles gewoon leesbaar (zie de