/* ============================================================ Paying Attention Challenge — stylesheet Tokens overgenomen uit het Buckaroo design system dat bij de mock-up zat (basisstijl V1.0). Niet aanpassen zonder reden: dit zijn de merkkleuren en -maten. ============================================================ */ /* ---------- Poppins, zelf gehost ---------- */ @font-face { font-family:"Poppins"; font-style:normal; font-weight:400; font-display:swap; src:url("assets/fonts/Poppins-Regular.ttf") format("truetype"); } @font-face { font-family:"Poppins"; font-style:normal; font-weight:500; font-display:swap; src:url("assets/fonts/Poppins-Medium.ttf") format("truetype"); } @font-face { font-family:"Poppins"; font-style:normal; font-weight:600; font-display:swap; src:url("assets/fonts/Poppins-SemiBold.ttf") format("truetype"); } @font-face { font-family:"Poppins"; font-style:normal; font-weight:700; font-display:swap; src:url("assets/fonts/Poppins-Bold.ttf") format("truetype"); } :root { /* Primair */ --bkr-green:#CDF564; --bkr-blue:#163255; --bkr-warm-grey:#EFE9E4; /* Secundair */ --bkr-white:#FFFFFF; --bkr-orange:#FA784B; /* Tints */ --bkr-green-600:#B6E23F; --bkr-blue-800:#0E2440; --bkr-blue-600:#234876; --bkr-warm-grey-200:#F6F2EE; --bkr-warm-grey-400:#DED5CC; /* Semantisch */ --text-body:#2C3F5C; --text-muted:#6B7A90; --border-default:#D7DEE7; --status-success:#2E9E6B; --status-warning:#FA784B; /* Vorm */ --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-pill:999px; --shadow-sm:0 1px 3px rgba(22,50,85,.08), 0 1px 2px rgba(22,50,85,.04); --shadow-md:0 4px 12px rgba(22,50,85,.08), 0 2px 4px rgba(22,50,85,.04); --shadow-lg:0 12px 32px rgba(22,50,85,.12), 0 4px 8px rgba(22,50,85,.05); /* Motion */ --ease-standard:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.16,1,.3,1); /* Type */ --font-sans:"Poppins", Arial, Helvetica, sans-serif; } /* ---------- Kiosk-basis ---------- Geen selectie, geen zoom, geen overscroll, geen callout. Een beursbezoeker moet niets kapot kunnen tikken. */ *, *::before, *::after { box-sizing:border-box; } html, body { margin:0; padding:0; height:100%; width:100%; overflow:hidden; background:var(--bkr-blue); font-family:var(--font-sans); color:var(--text-body); -webkit-font-smoothing:antialiased; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; overscroll-behavior:none; touch-action:manipulation; } body, button { user-select:none; -webkit-user-select:none; } input { user-select:text; -webkit-user-select:text; } button { font-family:inherit; } /* ---------- Podium: 1280x800, geschaald naar het scherm ---------- Zo ziet de challenge er op elke tablet identiek uit. Wat er naast overblijft krijgt via app.js de kleur van het scherm dat erop staat, zodat je geen rechthoek in een lijst ziet. Blauw hieronder is alleen de terugvaloptie voor het eerste moment. */ #stage-wrap { position:fixed; inset:0; overflow:hidden; background:var(--bkr-blue); } #stage { position:absolute; top:50%; left:50%; width:1280px; height:800px; overflow:hidden; background:var(--bkr-warm-grey); /* Absoluut plaatsen in plaats van centreren met grid: een grid-item dat groter is dan zijn container wordt door de browser naar de startrand geduwd, en dan staat het podium na het schalen scheef. */ transform:translate(-50%,-50%) scale(1); transform-origin:center center; } /* ---------- Schermen ---------- */ .screen { position:absolute; inset:0; display:none; } .screen.is-active { display:block; animation:fadeIn 260ms var(--ease-out); } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } } /* ---------- Herbruikbaar ---------- */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:12px; height:60px; padding:0 34px; border:none; border-radius:var(--radius-pill); background:var(--bkr-green); color:var(--bkr-blue); font:600 21px/1 var(--font-sans); cursor:pointer; transition:transform 140ms var(--ease-standard), background 140ms var(--ease-standard); } .btn:active { transform:scale(.97); background:var(--bkr-green-600); } .btn[disabled] { opacity:.35; pointer-events:none; } .btn--onlight { background:var(--bkr-blue); color:var(--bkr-white); } .btn--onlight:active { background:var(--bkr-blue-800); } .btn .arrow { font-size:22px; line-height:1; } .eyebrow { font:500 15px/1 var(--font-sans); letter-spacing:.08em; text-transform:uppercase; } /* align-self voorkomt dat de SVG in een flex-kolom oprekt tot de volle breedte en daardoor gecentreerd lijkt te staan. */ .wordmark { height:26px; width:auto; display:block; align-self:flex-start; flex:none; } .deco { position:absolute; pointer-events:none; } /* ---------- 1. Attract ---------- */ #s-attract { background:var(--bkr-blue); cursor:pointer; overflow:hidden; } #s-attract .deco { right:-180px; bottom:-220px; width:760px; opacity:.16; animation:drift 9s var(--ease-standard) infinite alternate; } @keyframes drift { from { transform:translate(0,0) rotate(0deg); } to { transform:translate(-40px,26px) rotate(-6deg); } } .attract-inner { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:30px; padding:0 92px; } .attract-head { font:600 116px/.92 var(--font-sans); color:var(--bkr-white); } .attract-head em { font-style:normal; color:var(--bkr-green); display:block; } .attract-sub { font:400 27px/1.4 var(--font-sans); color:rgba(255,255,255,.86); max-width:640px; } .attract-cta { display:flex; align-items:center; gap:16px; margin-top:8px; } .attract-cta .dot { width:22px; height:22px; border-radius:50%; background:var(--bkr-green); animation:pulse 1.8s var(--ease-standard) infinite; } @keyframes pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.5; transform:scale(.8); } } .attract-cta span { font:500 23px/1 var(--font-sans); color:var(--bkr-green); } .attract-foot { position:absolute; left:92px; bottom:44px; font:500 17px/1 var(--font-sans); color:rgba(255,255,255,.6); } /* ---------- 2. Intro ---------- */ #s-intro.is-active { display:grid; grid-template-columns:1fr 1fr; } .intro-left { padding:72px 56px; display:flex; flex-direction:column; gap:26px; background:var(--bkr-warm-grey); } .intro-title { font:600 54px/1.05 var(--font-sans); color:var(--bkr-blue); } .intro-text { font:400 21px/1.6 var(--font-sans); color:var(--text-body); max-width:460px; } .steps { display:flex; flex-direction:column; gap:14px; margin-top:6px; } .step { display:flex; align-items:center; gap:14px; } .step b { display:grid; place-items:center; width:34px; height:34px; flex:none; border-radius:var(--radius-pill); background:var(--bkr-blue); color:var(--bkr-white); font:600 15px/1 var(--font-sans); } .step span { font:500 19px/1.3 var(--font-sans); color:var(--bkr-blue); } .intro-right { position:relative; background:var(--bkr-blue); overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; padding:56px; } .intro-right .deco { top:-140px; left:-120px; width:620px; opacity:.14; } .intro-payoff { position:relative; font:600 40px/1.15 var(--font-sans); color:var(--bkr-green); } .intro-prize { position:relative; margin-top:16px; font:400 18px/1.6 var(--font-sans); color:rgba(255,255,255,.82); max-width:380px; } /* ---------- 3. Observe: de nagebouwde slechte checkout ---------- */ #s-observe { background:var(--bkr-white); } .shop { position:absolute; inset:0; display:grid; grid-template-rows:54px 1fr; } .shop-bar { display:flex; align-items:center; justify-content:space-between; padding:0 28px; background:#2C3F5C; color:#fff; font:400 13px/1 var(--font-sans); } .shop-body { display:grid; grid-template-columns:1.25fr 1fr; } .shop-main { padding:26px 30px; display:flex; flex-direction:column; gap:18px; border-right:1px solid var(--border-default); } .shop-top { display:flex; align-items:center; justify-content:space-between; } .shop-logo { font:600 26px/1 var(--font-sans); color:#1B1B1B; } .shop-step { font:400 13px/1 var(--font-sans); color:#777; } .shop-warn { padding:14px 16px; border-radius:var(--radius-sm); background:#FFF3CD; border:1px solid #F3DF9A; font:500 14px/1.4 var(--font-sans); color:#6B5A1E; } .shop-fields { display:flex; flex-direction:column; gap:10px; } .shop-field { height:42px; display:flex; align-items:center; padding:0 12px; border:1px solid #CFCFCF; border-radius:6px; font:400 14px/1 var(--font-sans); color:#9A9A9A; background:#fff; } .shop-label { font:500 15px/1 var(--font-sans); color:#1B1B1B; } .shop-methods { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; } .shop-method { display:flex; align-items:center; gap:8px; padding:12px 10px; border:1px solid #CFCFCF; border-radius:6px; font:400 13px/1 var(--font-sans); color:#333; } .shop-method i { width:12px; height:12px; flex:none; border:1px solid #999; border-radius:50%; } .shop-check { display:flex; align-items:center; gap:10px; font:400 13px/1 var(--font-sans); color:#555; } .shop-check i { width:14px; height:14px; flex:none; border:1px solid #999; border-radius:3px; } .shop-side { padding:26px 28px; background:#F7F7F7; display:flex; flex-direction:column; gap:14px; } .shop-row { display:flex; justify-content:space-between; font:400 14px/1.3 var(--font-sans); color:#444; } .shop-rule { height:1px; background:#DDD; } .shop-total { display:flex; justify-content:space-between; align-items:baseline; } .shop-total span:first-child { font:600 17px/1 var(--font-sans); color:#1B1B1B; } .shop-total span:last-child { font:600 26px/1 var(--font-sans); color:#1B1B1B; } .shop-pay { margin-top:6px; height:46px; display:grid; place-items:center; border-radius:6px; background:#E4572E; color:#fff; font:500 15px/1 var(--font-sans); } .shop-fine { font:400 12px/1.5 var(--font-sans); color:#888; } .shop-popup { position:absolute; right:26px; bottom:26px; width:240px; padding:16px; background:#1B1B1B; color:#fff; border-radius:var(--radius-sm); font:400 13px/1.5 var(--font-sans); } .timer { position:absolute; top:6px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:14px; padding:12px 24px 12px 18px; background:var(--bkr-blue); border-radius:var(--radius-pill); box-shadow:var(--shadow-lg); } .timer .eye { width:24px; height:24px; border-radius:50%; border:3px solid var(--bkr-green); } .timer b { font:600 32px/1 var(--font-sans); color:var(--bkr-white); font-variant-numeric:tabular-nums; min-width:34px; text-align:center; } .timer span { font:500 14px/1 var(--font-sans); color:rgba(255,255,255,.7); } .timer.is-low b { color:var(--bkr-orange); } /* ---------- 4. Quiz ---------- */ #s-quiz.is-active { display:flex; flex-direction:column; padding:48px 64px; gap:26px; background:var(--bkr-warm-grey); } .quiz-top { display:flex; align-items:center; justify-content:space-between; } .quiz-top .eyebrow { color:var(--bkr-blue); } .pips { display:flex; gap:8px; } .pip { width:54px; height:6px; border-radius:var(--radius-pill); background:var(--bkr-warm-grey-400); transition:background 200ms var(--ease-standard); } .pip.on { background:var(--bkr-blue); } .quiz-q { font:600 46px/1.1 var(--font-sans); color:var(--bkr-blue); max-width:960px; } .quiz-opts { display:grid; grid-template-columns:1fr 1fr; gap:18px; } .opt { display:flex; align-items:center; gap:18px; padding:26px 28px; text-align:left; background:var(--bkr-white); border:2px solid transparent; border-radius:var(--radius-md); box-shadow:var(--shadow-sm); cursor:pointer; transition:border-color 160ms var(--ease-standard), transform 160ms var(--ease-standard); } .opt:active { border-color:var(--bkr-blue); transform:translateY(-2px); } .opt b { display:grid; place-items:center; width:40px; height:40px; flex:none; border-radius:var(--radius-pill); background:var(--bkr-warm-grey); font:600 17px/1 var(--font-sans); color:var(--bkr-blue); } .opt span { font:500 24px/1.3 var(--font-sans); color:var(--bkr-blue); } .quiz-foot { margin-top:auto; font:400 15px/1 var(--font-sans); color:var(--text-muted); } /* ---------- 5. Score + reveal ---------- */ #s-score.is-active { display:grid; grid-template-columns:420px 1fr; } .score-left { position:relative; background:var(--bkr-blue); padding:52px 44px; display:flex; flex-direction:column; gap:10px; overflow:hidden; } .score-left .deco { bottom:-160px; right:-140px; width:520px; opacity:.14; } .score-left > *:not(.deco) { position:relative; } .score-left .eyebrow { color:var(--bkr-green); } .score-num { font:600 128px/1 var(--font-sans); color:var(--bkr-white); font-variant-numeric:tabular-nums; } .score-sub { font:400 19px/1.6 var(--font-sans); color:rgba(255,255,255,.82); } .verdict { margin-top:20px; padding:20px; border-radius:var(--radius-md); background:rgba(205,245,100,.14); border:1px solid rgba(205,245,100,.35); font:500 19px/1.45 var(--font-sans); color:var(--bkr-green); } .score-foot { margin-top:auto; font:500 16px/1 var(--font-sans); color:rgba(255,255,255,.55); } .score-right { background:var(--bkr-warm-grey); padding:40px 44px; display:flex; flex-direction:column; gap:12px; } .score-right h2 { margin:0; font:600 30px/1.1 var(--font-sans); color:var(--bkr-blue); } .reveal { display:flex; gap:16px; padding:16px 18px; background:var(--bkr-white); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); } .reveal .mark { width:28px; height:28px; flex:none; border-radius:50%; display:grid; place-items:center; color:#fff; font:700 15px/1 var(--font-sans); } .reveal.ok .mark { background:var(--status-success); } .reveal.no .mark { background:var(--status-warning); } .reveal.bonus .mark { background:var(--bkr-blue); } .reveal-q { font:500 16px/1.3 var(--font-sans); color:var(--text-muted); } .reveal-a { font:600 18px/1.3 var(--font-sans); color:var(--bkr-blue); margin-top:2px; } .reveal-n { font:400 15px/1.45 var(--font-sans); color:var(--text-body); margin-top:4px; } .score-cta { margin-top:auto; display:flex; align-items:center; gap:20px; } .score-cta small { font:400 15px/1.4 var(--font-sans); color:var(--text-muted); } /* ---------- 6. Gegevens ---------- */ #s-lead.is-active { display:grid; grid-template-columns:1fr 1fr; background:var(--bkr-warm-grey); } .lead-left { padding:52px 48px; display:flex; flex-direction:column; gap:16px; } .lead-title { font:600 44px/1.08 var(--font-sans); color:var(--bkr-blue); } .lead-text { font:400 19px/1.6 var(--font-sans); color:var(--text-body); max-width:430px; } .prize { margin-top:auto; padding:22px; border-radius:var(--radius-md); background:var(--bkr-green); color:var(--bkr-blue); } .prize b { display:block; font:600 20px/1.3 var(--font-sans); } .prize span { display:block; margin-top:6px; font:400 16px/1.5 var(--font-sans); } .lead-right { background:var(--bkr-white); padding:40px 44px; display:flex; flex-direction:column; gap:14px; justify-content:center; } .fields { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .field label { display:block; font:500 14px/1 var(--font-sans); color:var(--bkr-blue); margin-bottom:6px; } .field input { width:100%; height:52px; padding:0 16px; border:1.5px solid var(--border-default); border-radius:var(--radius-sm); background:var(--bkr-white); font:400 18px/1 var(--font-sans); color:var(--bkr-blue); } .field input::placeholder { color:#A9B4C2; } .field input:focus { outline:none; border-color:var(--bkr-blue); box-shadow:0 0 0 3px rgba(35,72,118,.18); } .field.invalid input { border-color:var(--status-warning); } .topics-label { font:500 15px/1.3 var(--font-sans); color:var(--bkr-blue); margin-top:2px; } .topics { display:flex; flex-wrap:wrap; gap:9px; } .topic { padding:11px 17px; border-radius:var(--radius-pill); border:1.5px solid var(--border-default); background:transparent; color:var(--bkr-blue); font:500 16px/1 var(--font-sans); cursor:pointer; transition:background 140ms var(--ease-standard), border-color 140ms var(--ease-standard); } .topic.on { background:var(--bkr-blue); border-color:var(--bkr-blue); color:var(--bkr-white); } .consents { display:flex; flex-direction:column; gap:9px; margin-top:4px; } .consent { display:flex; align-items:flex-start; gap:12px; cursor:pointer; /* Het is een