/* =========================================== Kiosk mode — active when (entered via kiosk.html → index.html?kiosk) Single source of truth: the normal site is untouched; these rules only apply in kiosk mode. Goal: keep visitors contained on a touchscreen. =========================================== */ /* ── Contact: replace the external Bookings link with a QR code ── */ .contact-kiosk-qr { display: none; /* hidden on the normal site */ } [data-kiosk] .contact-link, [data-kiosk] .contact-cta-hint { display: none !important; } [data-kiosk] .contact-kiosk-qr { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-sm); } .contact-qr-code { background: #fff; padding: 16px; border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); line-height: 0; min-width: 204px; min-height: 204px; display: flex; align-items: center; justify-content: center; } .contact-qr-code img, .contact-qr-code canvas { display: block; } .contact-qr-hint { font-size: 0.92rem; line-height: 1.5; color: var(--text-color); opacity: 0.75; margin: 0; max-width: 340px; text-align: center; } /* ── Iframe viewer: no "open external" escape hatch on a kiosk ── (would let a visitor break out to the OS browser). QR + Sluiten remain. */ [data-kiosk] .iv-open-extern, [data-kiosk] #iv-fallback-open { display: none !important; } /* ── Touch-hardening for a fixed kiosk touchscreen (1920×1080) ── Prevents accidental pinch/double-tap zoom, text selection and the long-press callout that would otherwise mess up the kiosk layout. */ [data-kiosk], [data-kiosk] * { -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-touch-callout: none; } [data-kiosk] { touch-action: manipulation; /* kill double-tap zoom */ overscroll-behavior: none; /* no rubber-band / pull-to-refresh */ } /* Keep real inputs usable (e.g. search/edit fields) where they exist */ [data-kiosk] input, [data-kiosk] textarea, [data-kiosk] [contenteditable] { -webkit-user-select: text; user-select: text; } /* ── "Take it with you" QR badge (bottom-left, always visible on kiosk) ── */ .kiosk-site-qr { position: fixed; left: 22px; bottom: 22px; z-index: 900; /* below modal (1000) and viewer (11000) */ display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; -webkit-tap-highlight-color: transparent; } .kiosk-site-qr:hover, .kiosk-site-qr:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45); outline: none; } .ksq-code { background: #fff; padding: 8px; border-radius: 8px; line-height: 0; flex: 0 0 auto; } .ksq-code img, .ksq-code canvas { display: block; } .kiosk-site-qr .ksq-code { width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; } .ksq-meta { display: flex; flex-direction: column; gap: 2px; padding-right: 4px; } .ksq-title { font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 14px; color: var(--text-color); } .ksq-url { font-family: 'Inter', system-ui, sans-serif; font-size: 12px; color: var(--han-pink); font-weight: 600; } /* Enlarge overlay (tap badge to open) */ .kiosk-qr-overlay { position: fixed; inset: 0; z-index: 12000; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .kiosk-qr-overlay.active { display: flex; animation: iv-fade 0.2s ease-out; } .kqo-card { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 34px 40px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); text-align: center; } .kqo-card .ksq-code { padding: 16px; border-radius: var(--radius-md); } .kqo-title { font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 1.25rem; color: var(--text-color); } .kqo-url { font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 1.1rem; color: var(--han-pink); letter-spacing: 0.3px; } .kqo-hint { font-family: 'Inter', system-ui, sans-serif; font-size: 0.85rem; color: var(--text-color); opacity: 0.6; } @media screen and (max-width: 600px) { .kiosk-site-qr { left: 14px; bottom: 14px; padding: 8px 12px 8px 8px; gap: 9px; } .kiosk-site-qr .ksq-code { width: 72px; height: 72px; } .ksq-title { font-size: 12px; } .ksq-url { font-size: 11px; } }