/* P&P Quickscan "Wipe-to-clean" INTRO — REDESIGN DEMO overlay (review only). Matched dirty/clean photo pairs: the CLEAN photo is this overlay's CSS background (the base layer), and js/intro-demo.js paints the DIRTY twin onto the canvas. Wiping the canvas (destination-out) reveals the clean photo behind. Per-service themed via [data-intro-theme] on the overlay root, set by js/intro-demo.js from ?from= (glasbewassing | kantoor | vakantieparken | direct). Brand base = P&P navy #1a2e4a + gold #FFC131 (the real LP tokens), Open Sans (type unchanged — only colours track the navy+gold default). PRESERVES the existing demo (quickscan-demo.css untouched). This file only adds the #pp-intro overlay + its children. NOTHING ships to prod — scoped to .qs-demo on + the injected overlay. Honors prefers-reduced-motion. Accessibility built in (the "better than WwM" part): - reduced-motion → overlay never renders (JS skips it). - A real visible Skip / Sla over button (keyboard-focusable). - Esc / Enter dismiss; auto-dismiss timeout in JS. Nobody is trapped. */ #pp-intro { --i-navy: #1a2e4a; --i-gold: #FFC131; --i-accent: #FFC131; /* per-service accent, overridden below */ --i-base: #1a2e4a; /* fallback tint before clean photo decodes, overridden below */ --i-word: rgba(255,193,49,.22); --i-scene: none; /* CLEAN photo behind the canvas, overridden per theme */ position: fixed; inset: 0; z-index: 99999; cursor: grab; touch-action: none; /* let canvas own the gesture (no scroll-steal) */ opacity: 1; transition: opacity .8s cubic-bezier(.4,0,.2,1); font-family: 'Poppins', sans-serif; overscroll-behavior: contain; /* The CLEAN photo sits BEHIND the canvas. The canvas paints the DIRTY twin opaque, hiding the clean photo until the visitor wipes — wiping the dirty photo reveals the clean one. So "dirty surface → real clean result". */ background-image: var(--i-scene); background-size: cover; background-position: center; background-repeat: no-repeat; background-color: var(--i-base); /* fallback before image decodes */ } #pp-intro.pp-intro--active:active { cursor: grabbing; } /* In the LP modal iframe (?embed=1) the overlay must size to the iframe, not the full viewport — position:fixed already scopes to the iframe document, so no change needed beyond fitting the hint/controls in. */ #pp-intro-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* Drifting service words (faint, behind the dirty-photo canvas) */ #pp-intro-words { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } .pp-iword { position: absolute; bottom: -70px; left: var(--x); font-family: 'Domine', serif; font-weight: 600; color: var(--i-word); white-space: nowrap; pointer-events: none; animation: ppFloatWord var(--dur) linear infinite; animation-delay: var(--del); will-change: transform, opacity; } @keyframes ppFloatWord { 0% { transform: translateY(0) rotate(var(--rot)); opacity: 0; } 12% { opacity: var(--op); } 88% { opacity: var(--op); } 100% { transform: translateY(calc(-100vh - 80px)) rotate(var(--rot)); opacity: 0; } } /* Centred pulsing hint */ #pp-intro-hint { position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%); z-index: 3; text-align: center; pointer-events: none; padding: 0 24px; animation: ppHintPulse 2.2s ease-in-out infinite; } #pp-intro-hint .pp-ih-eyebrow { font-family: 'Poppins', sans-serif; font-size: clamp(.62rem, 1.6vw, .72rem); font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--i-accent); margin: 0 0 14px; opacity: .9; } #pp-intro-hint h2 { font-family: 'Domine', serif; font-size: clamp(1.7rem, 5.2vw, 3rem); font-weight: 700; color: #fff; letter-spacing: -.5px; line-height: 1.12; margin: 0 0 14px; text-shadow: 0 2px 34px rgba(0,0,0,.55); } #pp-intro-hint p { font-family: 'Poppins', sans-serif; font-size: clamp(.9rem, 2.6vw, 1.1rem); font-weight: 500; color: rgba(255,255,255,.78); margin: 0; text-shadow: 0 2px 12px rgba(0,0,0,.6); } #pp-intro-hint .pp-ih-hand { display: inline-block; margin-left: 6px; animation: ppWave 1.6s ease-in-out infinite; transform-origin: 70% 80%; } @keyframes ppHintPulse { 0%,100% { opacity: 1; } 50% { opacity: .48; } } @keyframes ppWave { 0%,60%,100% { transform: rotate(0deg); } 15% { transform: rotate(16deg); } 30% { transform: rotate(-8deg); } 45% { transform: rotate(12deg); } } /* Gold progress bar */ #pp-intro-progress { position: absolute; bottom: 84px; left: 50%; transform: translateX(-50%); z-index: 3; text-align: center; pointer-events: none; width: min(240px, 70vw); } #pp-intro-progress .pp-ip-track { width: 100%; height: 4px; background: rgba(255,255,255,.16); border-radius: 4px; overflow: hidden; } #pp-intro-fill { width: 0%; height: 100%; background: var(--i-accent); border-radius: 4px; transition: width .25s ease; box-shadow: 0 0 10px var(--i-accent); } #pp-intro-progress .pp-ip-label { display: block; margin-top: 9px; font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.42); } /* Skip / Sla over — visible, keyboard-focusable escape hatch */ #pp-intro-skip { position: absolute; top: 18px; right: 18px; z-index: 4; pointer-events: auto; display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28); color: #fff; font-family: 'Poppins', sans-serif; font-size: .8rem; font-weight: 600; letter-spacing: .02em; padding: 9px 16px; border-radius: 50px; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .2s ease, border-color .2s ease, transform .15s ease; } #pp-intro-skip:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.5); } #pp-intro-skip:focus-visible { outline: 2px solid var(--i-accent); outline-offset: 2px; } #pp-intro-skip svg { width: 15px; height: 15px; } /* Reveal-out state */ #pp-intro.pp-intro--out { opacity: 0; pointer-events: none; } /* Embed: shrink chrome so it fits the modal iframe */ .qs-embed #pp-intro-hint h2 { font-size: clamp(1.4rem, 6vw, 2rem); } .qs-embed #pp-intro-hint p { font-size: clamp(.82rem, 3vw, .98rem); } .qs-embed #pp-intro-progress { bottom: 28px; } .qs-embed #pp-intro-skip { top: 12px; right: 12px; padding: 7px 13px; font-size: .74rem; } /* ── PER-SERVICE THEMES ─────────────────────────────────────────── Accent + drifting-word color shift per service. The dirty photo (canvas) and fallback tint are driven from JS, but the accent, word tint, and the CLEAN photo background live here so the brand layer stays declarative. */ /* glasbewassing → cool glass/silver-blue accent + clean glass photo behind */ #pp-intro[data-intro-theme="glasbewassing"] { --i-accent: #7FB6D6; --i-base: #0E2336; --i-word: rgba(173,210,232,.24); --i-scene: url("../img/intro/glas-clean-ai.jpg"); } /* kantoor → P&P navy + gold (the house default) + clean office photo behind */ #pp-intro[data-intro-theme="kantoor"] { --i-accent: #FFC131; --i-base: #1a2e4a; --i-word: rgba(255,193,49,.22); --i-scene: url("../img/intro/kantoor-clean-ai.jpg"); } /* vakantieparken → green/teal accent + clean holiday-park photo behind */ #pp-intro[data-intro-theme="vakantieparken"] { --i-accent: #5FB89A; --i-base: #0C2A28; --i-word: rgba(120,200,170,.22); --i-scene: url("../img/intro/vakantie-clean-ai.jpg"); } /* direct / fallback → neutral P&P navy + clean office photo behind */ #pp-intro[data-intro-theme="direct"] { --i-accent: #FFC131; --i-base: #1a2e4a; --i-word: rgba(255,193,49,.2); --i-scene: url("../img/intro/kantoor-clean-ai.jpg"); } /* ── REDUCED MOTION — overlay is skipped in JS, but belt-and-braces: if it ever renders, kill the animations and reveal it. ───────────── */ @media (prefers-reduced-motion: reduce) { #pp-intro { display: none !important; } .pp-iword { animation: none !important; } #pp-intro-hint { animation: none !important; } #pp-intro-hint .pp-ih-hand { animation: none !important; } }