/* ========================================================= SITE.CSS — Gedeelde stijl voor alle pagina's (Auto-Belettering.be) Geladen door elke pagina via , ná de Tailwind CDN-script/config in . Zelfde architectuurpatroon als kledij-bedrukking.be, maar getrimd: geen productcatalogus/winkelwagen op deze site, dus geen kleurswatch/maattabel/positie-kaart-classes. ========================================================= */ *{font-family:'Inter',sans-serif} h1,h2,h3,h4,h5,h6{font-family:'Roboto',sans-serif} html{scroll-behavior:smooth} /* #siteHeader draagt de sticky-positie, niet de door header.js geïnjecteerde binnenste div — zie toelichting in js/header.js (kledij-bedrukking.be-precedent: sticky op een kind zonder eigen "resthoogte" in de ouder werkt niet). */ #siteHeader{position:sticky;top:0;z-index:40} @keyframes fadeInUp{0%{opacity:0;transform:translateY(25px)}100%{opacity:1;transform:translateY(0)}} @keyframes blurIn{0%{opacity:0;filter:blur(12px);transform:scale(.97)}100%{opacity:1;filter:blur(0);transform:scale(1)}} @keyframes slideInRight{from{transform:translateX(100%)}to{transform:translateX(0)}} @keyframes slideOutRight{from{transform:translateX(0)}to{transform:translateX(100%)}} @keyframes spin{to{transform:rotate(360deg)}} @keyframes waPulse{0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}50%{box-shadow:0 0 0 14px rgba(37,211,102,0)}} @keyframes waFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} .anim-fade{animation:fadeInUp .7s cubic-bezier(.25,.46,.45,.94) both} .anim-blur{animation:blurIn .9s cubic-bezier(.25,.46,.45,.94) both} .d1{animation-delay:.1s}.d2{animation-delay:.2s} .slide-open{animation:slideInRight .3s ease-out both} .slide-close{animation:slideOutRight .25s ease-in both} .spinner{animation:spin .8s linear infinite} .wa-pulse{animation:waPulse 2s ease-in-out infinite} .wa-float{animation:waFloat 3s ease-in-out infinite} input:focus,textarea:focus,select:focus{outline:none;border-color:#3296FF!important;box-shadow:0 0 0 3px rgba(50,150,255,.15)} ::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#f1f5f9}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px} .overlay-bg{background:rgba(0,0,0,.4);backdrop-filter:blur(4px)} .lc2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .btn-loading{pointer-events:none;opacity:.7} .pcard{transition:all .35s cubic-bezier(.25,.46,.45,.94)} .pcard:hover{transform:translateY(-6px);box-shadow:0 20px 40px -12px rgba(0,0,0,.15)} .related-card{transition:all .2s ease;cursor:pointer;border:2px solid #e2e8f0} .related-card:hover{border-color:#3296FF;background:#EFF6FF;box-shadow:0 4px 12px rgba(50,150,255,.1)} .related-card:hover .related-arrow{color:#3296FF;transform:translateX(2px)} .related-arrow{transition:all .15s ease} .wa-widget{position:fixed;bottom:24px;right:20px;z-index:50;display:flex;flex-direction:column;align-items:flex-end;gap:10px} .wa-tooltip{background:#fff;border-radius:12px;padding:10px 16px;box-shadow:0 8px 30px rgba(0,0,0,.15);max-width:220px;opacity:0;transform:translateY(10px) scale(.95);transition:all .25s ease;pointer-events:none} .wa-widget:hover .wa-tooltip{opacity:1;transform:translateY(0) scale(1);pointer-events:auto} .wa-btn{width:60px;height:60px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 20px rgba(37,211,102,.4)} .wa-btn:hover{transform:scale(1.08);box-shadow:0 6px 28px rgba(37,211,102,.5)} .wa-btn:active{transform:scale(.95)} @media(max-width:640px){ .wa-widget{right:12px;bottom:16px} .wa-btn{width:52px;height:52px} } /* Aantal-badge rechtsboven op de "Offerte aanvragen"-knop in de header — zelfde stijl/positionering als kledij-bedrukking.be's winkelwagen-badge, hier voor het aantal toegevoegde voertuigen op offerte.html (blijft op 0/verborgen op elke andere pagina, want de voertuigenlijst leeft enkel daar, zie js/offerte.js). */ .cart-fab-badge{position:absolute;top:-8px;right:-8px;min-width:20px;height:20px;background:#036ED8;border-radius:10px;font-size:10px;font-weight:800;color:#fff;display:none;align-items:center;justify-content:center;padding:0 5px;border:2px solid #fff;box-shadow:0 2px 8px rgba(3,110,216,.3);line-height:1} .cart-fab-badge.visible{display:flex} /* Kaart-selector (contact.html: "type aanvraag" / "u bent een") — zelfde patroon als kledij-bedrukking.be's .topt, hier in het blauw van deze site (brand-600 #036ED8 / brand-50 #EFF6FF) i.p.v. hun teal. */ .topt{transition:all .15s ease;cursor:pointer;border:2px solid #e2e8f0} .topt:hover{border-color:#cbd5e1;background:#f8fafc} .topt.sel{border-color:#036ED8;background:#EFF6FF;box-shadow:0 0 0 3px rgba(3,110,216,.12)} .topt.sel .topt-icon{color:#036ED8} .topt.sel .topt-lbl{color:#1159AF;font-weight:600} .company-row{max-height:0;opacity:0;overflow:hidden;transition:max-height .3s ease,opacity .3s ease,margin .3s ease;margin-top:0} /* Blog-filterknoppen (blog.html: .cbtn) en paginering (.pg-btn) — zelfde patroon als kledij-bedrukking.be, hier in brand-600 (#036ED8) i.p.v. teal. */ .cbtn{transition:all .25s ease} .cbtn.act{background:#036ED8;color:#fff;border-color:#036ED8} .cbtn:not(.act):hover{background:#f1f5f9;border-color:#e2e8f0;color:#334155} .pg-btn{transition:all .15s ease;cursor:pointer} .pg-btn.act{background:#036ED8;color:#fff;border-color:#036ED8} .pg-btn:not(.act):not(:disabled):hover{background:#f1f5f9;border-color:#cbd5e1;color:#334155} .pg-btn:disabled{opacity:.35;cursor:not-allowed} .company-row.show{max-height:80px;opacity:1;margin-top:1rem}