/* ========================================================= SITE.CSS — Gedeelde stijl voor alle pagina's (inDRUKWERKend.be) Geladen door elke pagina via , ná de Tailwind CDN-script/config in . Zelfde architectuurpatroon als kledij-bedrukking.be en auto-belettering.be — enkel de brand-hex- waarden hieronder zijn aangepast naar het echte oranje van indrukwerkend.be (#FFA100/#D57D03, overgenomen uit de huidige live site, zie Kadence-theme --global-palette1/2 in de paginabron). ========================================================= */ *{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. */ #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)}} @keyframes badgePop{0%{transform:scale(0)}60%{transform:scale(1.3)}100%{transform:scale(1)}} @keyframes toastIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}} @keyframes toastOut{from{opacity:1;transform:translate(-50%,0)}to{opacity:0;transform:translate(-50%,12px)}} .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} .badge-pop{animation:badgePop .35s cubic-bezier(.25,.46,.45,.94) 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:#FFA100!important;box-shadow:0 0 0 3px rgba(255,161,0,.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:#FFA100;background:#FFF8EB;box-shadow:0 4px 12px rgba(255,161,0,.1)} .related-card:hover .related-arrow{color:#FFA100;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} } /* Toast onderaan het scherm die bevestigt dat een product aan het winkelmandje is toegevoegd, met een knop om het mandje meteen te openen (zie js/cart.js showAddedToast()). Bewust boven de wa-widget gepositioneerd (bottom:100px, wa-widget zit op bottom:24px/16px) zodat de twee elkaar nooit overlappen. left:50%+translateX(-50%) voor horizontale centrering, met een max-breedte + zijmarges zodat hij op smalle schermen nooit buiten beeld valt. */ .cart-toast{position:fixed;left:50%;bottom:100px;z-index:80;width:calc(100% - 32px);max-width:380px;transform:translate(-50%,0)} .cart-toast.toast-in{animation:toastIn .3s cubic-bezier(.25,.46,.45,.94) both} .cart-toast.toast-out{animation:toastOut .25s ease-in both} @media(max-width:640px){.cart-toast{bottom:88px}} /* Aantal-badge rechtsboven op de "Gratis offerte"-knop in de header, toont het aantal producten in de winkelmand (js/cart.js) — zelfde stijl/positionering als kledij-bedrukking.be, hier in het oranje van deze site. */ .cart-fab-badge{position:absolute;top:-8px;right:-8px;min-width:20px;height:20px;background:#D57D03;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(213,125,3,.3);line-height:1} .cart-fab-badge.visible{display:flex} /* Kaart-selector (bv. contact.html: "type aanvraag" / "u bent een") — zelfde patroon als de andere twee sites, hier in brand-600 (#FFA100). */ .topt{transition:all .15s ease;cursor:pointer;border:2px solid #e2e8f0} .topt:hover{border-color:#cbd5e1;background:#f8fafc} .topt.sel{border-color:#FFA100;background:#FFF8EB;box-shadow:0 0 0 3px rgba(255,161,0,.12)} .topt.sel .topt-icon{color:#D57D03} .topt.sel .topt-lbl{color:#D57D03;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 de andere twee sites, hier in brand-600 (#FFA100). */ .cbtn{transition:all .25s ease} .cbtn.act{background:#FFA100;color:#fff;border-color:#FFA100} .cbtn:not(.act):hover{background:#f1f5f9;border-color:#e2e8f0;color:#334155} .pg-btn{transition:all .15s ease;cursor:pointer} .pg-btn.act{background:#FFA100;color:#fff;border-color:#FFA100} .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}