/* CO Koffie Machines - productsheet: knop op de kaart + fullscreen PDF-popup. De popup wordt door de JS aan gehangen; daarom staat alles hier los (geen afhankelijkheid van de .co-km CSS-variabelen). Font Montserrat. */ /* Knop op de kaart. z-index 4 zodat hij boven de kaart-overlaylink (z-index 3) uitkomt en dus zelf klikbaar is, terwijl de rest van de kaart naar de detailpagina blijft linken. */ .co-km-sheet-btn{ position:relative; z-index:4; display:inline-flex; align-items:center; gap:8px; margin:0 0 12px; padding:9px 15px; font-family:'Montserrat',sans-serif; font-size:12.5px; font-weight:600; line-height:1; color:#3b2417; background:#fff; border:1.5px solid #e7ddcf; border-radius:30px; cursor:pointer; transition:border-color .15s, background .15s, color .15s; -webkit-tap-highlight-color:transparent; } .co-km-sheet-btn:hover{ border-color:#b07d4f; background:#fdfaf4; color:#6b4226; } .co-km-sheet-btn svg{ width:15px; height:15px; flex:0 0 auto; } /* ---- Fullscreen popup ---- */ .co-km-sheet-modal{ position:fixed; inset:0; z-index:2147483000; display:none; align-items:stretch; justify-content:center; padding:0; background:rgba(20,12,6,.86); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); font-family:'Montserrat',sans-serif; opacity:0; transition:opacity .25s ease; } .co-km-sheet-modal.is-open{ display:flex; opacity:1; } .co-km-sheet-dialog{ display:flex; flex-direction:column; width:100%; max-width:min(1500px, 96vw); height:100%; background:#fdfaf4; overflow:hidden; box-shadow:0 30px 90px -20px rgba(0,0,0,.6); } @media(min-width:900px){ .co-km-sheet-modal{ padding:16px; } .co-km-sheet-dialog{ height:100%; border-radius:16px; } } /* Balk bovenaan */ .co-km-sheet-bar{ flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:12px 14px; background:#2a1810; color:#fdfaf4; } .co-km-sheet-title{ flex:1; min-width:0; font-size:14px; font-weight:700; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .co-km-sheet-actions{ display:flex; align-items:center; gap:8px; flex:0 0 auto; } /* Zoomknoppen */ .co-km-sheet-zoomgrp{ display:inline-flex; align-items:center; gap:2px; background:rgba(253,250,244,.1); border:1px solid rgba(253,250,244,.18); border-radius:30px; padding:3px; } .co-km-sheet-zoom{ width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; padding:0; background:transparent; border:0; border-radius:50%; color:#fdfaf4; cursor:pointer; transition:background .18s; } .co-km-sheet-zoom:hover{ background:rgba(253,250,244,.16); } .co-km-sheet-zoom svg{ width:17px; height:17px; } .co-km-sheet-act{ display:inline-flex; align-items:center; gap:7px; font-family:inherit; font-size:12.5px; font-weight:600; line-height:1; color:#2a1810; background:linear-gradient(120deg,#d8b483,#b07d4f); border:0; border-radius:30px; padding:9px 15px; cursor:pointer; text-decoration:none; transition:transform .15s, filter .15s; } .co-km-sheet-act:hover{ transform:translateY(-1px); filter:brightness(1.05); } .co-km-sheet-act svg{ width:15px; height:15px; flex:0 0 auto; } /* Deel-knop iets rustiger (omlijnd) */ .co-km-sheet-share{ background:transparent; color:#fdfaf4; border:1.5px solid rgba(253,250,244,.35); } .co-km-sheet-share:hover{ border-color:#d8b483; color:#fff; } /* Sluitknop */ .co-km-sheet-close{ width:38px; height:38px; padding:0; justify-content:center; background:rgba(253,250,244,.1); color:#fdfaf4; border:1px solid rgba(253,250,244,.22); border-radius:50%; cursor:pointer; transition:background .2s, transform .2s; } .co-km-sheet-close:hover{ background:rgba(253,250,244,.2); transform:rotate(90deg); } .co-km-sheet-close svg{ width:16px; height:16px; } /* Label-tekst verbergen op smalle schermen: alleen iconen */ @media(max-width:560px){ .co-km-sheet-act .co-km-sheet-lbl{ display:none; } .co-km-sheet-act{ padding:9px; } } /* PDF-weergave: scrollbaar canvas-gebied (PDF.js rendert de pagina's hierin). Block + margin:auto i.p.v. flex-centrering: zo blijft bij inzoomen ook de linkerkant bereikbaar via horizontaal scrollen. */ .co-km-sheet-frame{ flex:1; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch; background:#e9e2d6; padding:14px; text-align:center; } .co-km-sheet-page{ display:block; margin:0 auto 14px; max-width:none; background:#fff; box-shadow:0 6px 22px -6px rgba(0,0,0,.35); border-radius:2px; } .co-km-sheet-page:last-child{ margin-bottom:0; } .co-km-sheet-loading{ padding:40px 24px; text-align:center; color:#6b5844; font-size:14px; font-weight:600; } /* Kleine "gekopieerd"-melding bij delen zonder deelvenster */ .co-km-sheet-toast{ position:absolute; left:50%; bottom:18px; transform:translateX(-50%); background:#2a1810; color:#fdfaf4; font-size:12.5px; font-weight:600; padding:9px 16px; border-radius:30px; opacity:0; pointer-events:none; transition:opacity .25s; z-index:5; } .co-km-sheet-toast.is-show{ opacity:1; } @media(prefers-reduced-motion:reduce){ .co-km-sheet-modal,.co-km-sheet-act,.co-km-sheet-close,.co-km-sheet-btn{ transition:none; } }