/* ═══════════════════════════════════════════════════════════════ shared.css — GAP (Grow, Adapt, Play) Bevat: reset, launcher, iframe-overlay, app-specifieke stijlen en toegankelijkheidsvariabelen ═══════════════════════════════════════════════════════════════ */ /* ── OpenDyslexic laden ─────────────────────────────────────── */ @import url('https://fonts.cdnfonts.com/css/opendyslexic'); /* ── Toegankelijkheidsvariabelen (defaults) ─────────────────── */ :root { --a11y-font-size: 16px; --a11y-line-height: 1.6; } /* ── Dyslexie-lettertype klasse (op ) ─────────────────── */ html.font-dyslexia, html.font-dyslexia body, html.font-dyslexia button, html.font-dyslexia input, html.font-dyslexia select, html.font-dyslexia textarea { font-family: 'OpenDyslexic', 'Comic Sans MS', cursive !important; } /* ── Reset ──────────────────────────────────────────────────── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* ── Base ───────────────────────────────────────────────────── */ html, body { width: 100%; height: 100%; overflow: hidden; font-family: 'Segoe UI', system-ui, sans-serif; background: #0d0d1a; color: #fff; font-size: var(--a11y-font-size); line-height: var(--a11y-line-height); } /* ── Geanimeerde achtergrond ────────────────────────────────── */ #bg-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 0; } /* ══════════════════════════════════════════════════════════════ LAUNCHER — cartoon stijl Palet: hemelsblauw #C8EEFF · wit #FFFFFF · zwart #1A1A1A Accentkleuren per tegel: koraal · geel · mint · lila · sky Handtekening: dikke zwarte outline + harde drop-shadow offset ══════════════════════════════════════════════════════════════ */ /* ── Baloo 2 — rond, vet, speels ──────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@700;800;900&display=swap'); /* ── Base override: lichte achtergrond, donkere tekst ──────── */ html, body { background: #ddf0ff; color: #1A1A1A; font-family: 'Baloo 2', 'Segoe UI', system-ui, sans-serif; } /* ── Wolken-achtergrond (vervangt canvas) ───────────────────── */ #bg-canvas { display: none; } #sky-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: linear-gradient(180deg, #5bb8f5 0%, #89cffa 30%, #b8e4fd 65%, #ddf0ff 88%, #eef8ff 100%); pointer-events: none; } .cloud { position: absolute; opacity: 0.85; animation: cloudDrift linear infinite; } @keyframes cloudDrift { from { transform: translateX(-120%); } to { transform: translateX(110vw); } } /* ── Topbalk ────────────────────────────────────────────────── */ #topbar-btns { position: fixed; top: 14px; left: 14px; display: flex; align-items: center; gap: 8px; z-index: 10; } /* Gedeelde stijl voor alle topbar-knoppen */ #lang-btn, #a11y-btn, #main-fs-btn { background: #fff; border: 3px solid #1A1A1A; color: #1A1A1A; font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 800; border-radius: 50px; cursor: pointer; touch-action: manipulation; user-select: none; box-shadow: 3px 3px 0 #1A1A1A; transition: transform 0.1s, box-shadow 0.1s; } #lang-btn:active, #a11y-btn:active, #main-fs-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #1A1A1A; } #lang-btn:focus-visible, #a11y-btn:focus-visible, #main-fs-btn:focus-visible { outline: 3px solid #FF6B6B; outline-offset: 3px; } #lang-btn { font-size: 0.95rem; padding: 7px 14px; display: flex; align-items: center; gap: 6px; } #a11y-btn { font-size: 1.1rem; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; } #a11y-btn.active { background: #C77DFF; color: #fff; border-color: #1A1A1A; } #main-fs-btn { font-size: 1.1rem; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; } /* ── Launcher layout ────────────────────────────────────────── */ main#app { position: relative; z-index: 1; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(12px, 3vw, 28px); padding: 20px 16px; overflow-y: auto; } /* ── Titel ──────────────────────────────────────────────────── */ #title { text-align: center; } #title h1 { font-family: 'Baloo 2', system-ui, sans-serif; font-size: clamp(2rem, 8vw, 3.8rem); font-weight: 900; color: #1A1A1A; /* Cartoon text-stroke look */ -webkit-text-stroke: 0; text-shadow: 3px 3px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; letter-spacing: -0.5px; background: none; -webkit-text-fill-color: #1A1A1A; filter: none; } #title h1 .emoji-plain { -webkit-text-fill-color: initial; } #title p { color: #3a5a6e; font-size: clamp(0.9rem, 3vw, 1.15rem); font-weight: 700; margin-top: 2px; } /* ── Grid ───────────────────────────────────────────────────── */ #grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: clamp(12px, 3vw, 20px); width: min(680px, calc(100% - 32px)); } /* ── Tegels ─────────────────────────────────────────────────── */ .tile { position: relative; overflow: hidden; border-radius: 22px; padding: clamp(16px,3.5vw,26px) clamp(12px,2.5vw,20px) clamp(14px,3vw,22px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; /* White card with thick black outline + hard shadow = cartoon panel */ background: #ffffff; border: 3px solid #1A1A1A; box-shadow: 5px 5px 0 #1A1A1A; transition: transform 0.1s, box-shadow 0.1s; touch-action: manipulation; user-select: none; text-decoration: none; color: #1A1A1A; animation: tileIn 0.45s cubic-bezier(.175,.885,.32,1.275) both; min-width: 0; } .tile:nth-child(1) { animation-delay: 0.05s; } .tile:nth-child(2) { animation-delay: 0.13s; } .tile:nth-child(3) { animation-delay: 0.21s; } .tile:nth-child(4) { animation-delay: 0.29s; } .tile:nth-child(5) { animation-delay: 0.37s; } @keyframes tileIn { from { opacity: 0; transform: scale(0.75) translateY(18px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* Gekleurde top-stripe (cartoon header-band) */ .tile::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: clamp(44px, 10vw, 60px); background: var(--tile-color); border-radius: 18px 18px 0 0; border-bottom: 3px solid #1A1A1A; } .tile:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 #1A1A1A; } .tile:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 #1A1A1A; } .tile:focus-visible { outline: 3px solid #FF6B6B; outline-offset: 4px; } .tile-icon { position: relative; z-index: 1; font-size: clamp(2.2rem, 7vw, 3.2rem); /* icon sits on top of the coloured stripe */ margin-top: clamp(16px, 4vw, 28px); filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.18)); animation: iconBob 2.8s ease-in-out infinite; } .tile:nth-child(2) .tile-icon { animation-delay: 0.5s; } .tile:nth-child(3) .tile-icon { animation-delay: 1.0s; } .tile:nth-child(4) .tile-icon { animation-delay: 1.5s; } @keyframes iconBob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-5px) rotate(3deg); } } .tile-name { font-size: clamp(0.9rem, 3.2vw, 1.15rem); font-weight: 900; text-align: center; color: #1A1A1A; } .tile-desc { font-size: clamp(0.68rem, 2.2vw, 0.82rem); color: #4a6070; font-weight: 700; text-align: center; line-height: 1.3; } /* "Tik hier!"-knop in tegel-kleur — de duidelijkste klikaanwijzing */ .tile-tap { margin-top: 6px; background: var(--tile-color); border: 2.5px solid #1A1A1A; border-radius: 50px; padding: 4px 14px; font-size: clamp(0.65rem, 2vw, 0.78rem); font-weight: 900; color: #1A1A1A; box-shadow: 2px 2px 0 #1A1A1A; white-space: nowrap; } /* Badge */ .tile-badge { position: absolute; top: 8px; right: 10px; z-index: 2; background: #fff; border: 2px solid #1A1A1A; border-radius: 20px; padding: 2px 8px; font-size: 0.58rem; font-weight: 900; color: #1A1A1A; text-transform: uppercase; letter-spacing: .05em; } /* Ripple */ .ripple-fx { position: absolute; border-radius: 50%; background: rgba(0,0,0,0.08); width: 20px; height: 20px; pointer-events: none; animation: rippleFx 0.5s ease-out forwards; transform: translate(-50%,-50%) scale(0); } @keyframes rippleFx { to { transform: translate(-50%,-50%) scale(12); opacity: 0; } } /* ── Mascottes ──────────────────────────────────────────────── */ #mascots { display: flex; align-items: flex-end; justify-content: center; gap: clamp(20px, 6vw, 60px); width: 100%; max-width: 680px; flex-shrink: 0; } .mascot { width: clamp(80px, 18vw, 130px); height: auto; animation: mascotBob 3s ease-in-out infinite; filter: drop-shadow(3px 4px 0 rgba(0,0,0,0.2)); user-select: none; } .mascot:nth-child(2) { animation-delay: 1.2s; } @keyframes mascotBob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } } /* ══════════════════════════════════════════════════════════════ IFRAME OVERLAY — back-bar in cartoon stijl ══════════════════════════════════════════════════════════════ */ #iframe-wrap { display: none; position: fixed; inset: 0; z-index: 100; flex-direction: column; } #iframe-wrap.open { display: flex; } #back-bar { background: #fff; border-bottom: 3px solid #1A1A1A; padding: 10px 14px; display: flex; align-items: center; gap: 10px; flex-shrink: 0; box-shadow: 0 3px 0 #1A1A1A; } /* Gedeelde stijl back-bar knoppen */ #back-btn, #lang-btn-bar, #a11y-btn-bar, #fs-btn { background: #fff; border: 3px solid #1A1A1A; color: #1A1A1A; font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 800; border-radius: 50px; cursor: pointer; touch-action: manipulation; user-select: none; box-shadow: 3px 3px 0 #1A1A1A; transition: transform 0.1s, box-shadow 0.1s; } #back-btn:active, #lang-btn-bar:active, #a11y-btn-bar:active, #fs-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #1A1A1A; } #back-btn:focus-visible, #lang-btn-bar:focus-visible, #a11y-btn-bar:focus-visible, #fs-btn:focus-visible { outline: 3px solid #FF6B6B; outline-offset: 3px; } #back-btn { font-size: 0.95rem; padding: 7px 16px; } #lang-btn-bar { font-size: 0.9rem; padding: 6px 12px; } #a11y-btn-bar { font-size: 1rem; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; } #a11y-btn-bar.active { background: #C77DFF; color: #fff; } #fs-btn { font-size: 1rem; padding: 7px 13px; line-height: 1; } #app-title-bar { font-size: 1rem; font-weight: 800; color: #1A1A1A; flex: 1; } #app-frame { flex: 1; border: none; width: 100%; background: #C8EEFF; } /* ── Gedeelde animaties ─────────────────────────────────────── */ @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } } @keyframes fadeOut { 0%, 70% { opacity: 1; } 100% { opacity: 0; } } /* ── Verminderde beweging ───────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .cloud { display: none; } } /* ═══════════════════════════════════════════════════════════════ APP-SPECIFIEKE STIJLEN — cartoon / licht thema Elk app voegt een body-klasse toe (.app-*). Gedeelde cartoon-regels: wit, zwarte outlines, harde shadows, hemelsblauw background, Baloo 2. ═══════════════════════════════════════════════════════════════ */ /* ── Gedeelde basis voor alle apps ─────────────────────────── */ body.app-sensory, body.app-prik, body.app-geluiden, body.app-blokkendoos, body.app-muziek { background: linear-gradient(180deg, #5bb8f5 0%, #89cffa 30%, #b8e4fd 65%, #ddf0ff 88%, #eef8ff 100%); background-attachment: fixed; font-family: 'Baloo 2', 'Segoe UI', system-ui, sans-serif; color: #1A1A1A; } /* ── Start-overlay (alle apps) ─────────────────────────────── */ #start-overlay { position: fixed; inset: 0; background: rgba(200, 235, 255, 0.92); backdrop-filter: blur(6px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; z-index: 500; touch-action: manipulation; } #start-overlay h2 { font-family: 'Baloo 2', system-ui, sans-serif; color: #1A1A1A; font-weight: 900; text-align: center; font-size: clamp(2rem, 8vw, 3.5rem); animation: pulse 2s ease-in-out infinite; } #start-overlay p { color: #3a5a6e; font-size: clamp(1rem, 4vw, 1.3rem); font-weight: 700; text-align: center; max-width: 300px; line-height: var(--a11y-line-height, 1.6); } #start-btn { font-family: 'Baloo 2', system-ui, sans-serif; background: #FF6B6B; border: 3px solid #1A1A1A; color: #fff; font-size: clamp(1.2rem, 5vw, 1.8rem); font-weight: 900; padding: 18px 52px; border-radius: 60px; cursor: pointer; box-shadow: 5px 5px 0 #1A1A1A; touch-action: manipulation; user-select: none; animation: pulse 2s ease-in-out infinite; transition: transform 0.1s, box-shadow 0.1s; } #start-btn:active { transform: translate(3px,3px); box-shadow: 2px 2px 0 #1A1A1A; } #start-btn:focus-visible { outline: 3px solid #C77DFF; outline-offset: 3px; } /* ── FAB-knoppen (modus / geluid) ───────────────────────────── */ .fab { position: fixed; bottom: 24px; background: #fff; border: 3px solid #1A1A1A; color: #1A1A1A; font-size: 1.5rem; border-radius: 50%; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 300; touch-action: manipulation; user-select: none; box-shadow: 4px 4px 0 #1A1A1A; transition: transform 0.1s, box-shadow 0.1s; } .fab:active { transform: translate(3px,3px); box-shadow: 1px 1px 0 #1A1A1A; } .fab:focus-visible { outline: 3px solid #C77DFF; outline-offset: 3px; } #mode-btn { right: 24px; } #sound-btn { left: 24px; } /* ── sensorische-app ────────────────────────────────────────── */ body.app-sensory { cursor: none; } #canvas-layer { position: fixed; inset: 0; pointer-events: none; } #scene { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; pointer-events: none; } #scene #title { font-family: 'Baloo 2', system-ui, sans-serif; color: #1A1A1A; font-size: clamp(1.8rem, 8vw, 3.5rem); font-weight: 900; text-align: center; /* Cartoon text shadow for readability on sky bg */ text-shadow: 3px 3px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; animation: pulse 3s ease-in-out infinite; user-select: none; background: none; -webkit-text-fill-color: #1A1A1A; filter: none; } #hint { color: #3a5a6e; font-size: clamp(0.9rem, 3.5vw, 1.3rem); font-weight: 700; text-align: center; background: rgba(255,255,255,0.75); border: 2px solid #1A1A1A; border-radius: 50px; padding: 6px 18px; animation: fadeOut 5s ease-in-out 1s forwards; user-select: none; line-height: var(--a11y-line-height, 1.6); } .bubble { position: fixed; border-radius: 50%; pointer-events: none; animation: floatUp linear forwards; border: 2px solid rgba(0,0,0,0.12); } @keyframes floatUp { 0% { transform: translateY(0) scale(1); opacity: .9; } 100% { transform: translateY(-110vh) scale(.4); opacity: 0; } } .ripple { position: fixed; border-radius: 50%; pointer-events: none; animation: rippleOut .7s ease-out forwards; border: 4px solid currentColor; } @keyframes rippleOut { 0% { transform: translate(-50%,-50%) scale(0); opacity: 1; } 100% { transform: translate(-50%,-50%) scale(6); opacity: 0; } } .star { position: fixed; pointer-events: none; user-select: none; font-size: clamp(1.4rem, 4vw, 2.8rem); animation: starPop .9s cubic-bezier(.175,.885,.32,1.275) forwards; } @keyframes starPop { 0% { transform: translate(-50%,-50%) scale(0) rotate(0deg); opacity: 1; } 60% { transform: translate(-50%,-50%) scale(1.3) rotate(20deg); opacity: 1; } 100% { transform: translate(-50%,-50%) scale(0) rotate(40deg); opacity: 0; } } .burst { position: fixed; border-radius: 50%; pointer-events: none; animation: burstOut .5s ease-out forwards; } @keyframes burstOut { 0% { transform: translate(-50%,-50%) scale(0); opacity: .85; } 100% { transform: translate(-50%,-50%) scale(4); opacity: 0; } } /* ── prik-app ───────────────────────────────────────────────── */ body.app-prik { cursor: none; } #canvas { position: fixed; inset: 0; pointer-events: none; } #hud { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; z-index: 100; pointer-events: none; } .hud-box { background: #fff; border: 3px solid #1A1A1A; border-radius: 50px; padding: 6px 18px; box-shadow: 3px 3px 0 #1A1A1A; color: #1A1A1A; font-size: clamp(1rem, 4vw, 1.4rem); font-weight: 900; font-family: 'Baloo 2', system-ui, sans-serif; } #score-val { color: #FF6B6B; } #combo-val { color: #C77DFF; display: none; } .balloon { position: fixed; cursor: none; touch-action: manipulation; transform: translate(-50%,-50%); transition: transform 0.08s; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; user-select: none; animation: wobble linear infinite; will-change: transform; } .balloon:active { transform: translate(-50%,-50%) scale(0.88); } @keyframes wobble { 0%,100%{margin-left:0} 25%{margin-left:6px} 75%{margin-left:-6px} } .pop-burst { position: fixed; border-radius: 50%; pointer-events: none; animation: popOut 0.45s ease-out forwards; } @keyframes popOut { 0% { transform: translate(-50%,-50%) scale(0); opacity: 1; } 100% { transform: translate(-50%,-50%) scale(5); opacity: 0; } } .pop-star { position: fixed; pointer-events: none; user-select: none; font-size: clamp(1.6rem, 5vw, 2.8rem); animation: starPop .8s cubic-bezier(.175,.885,.32,1.275) forwards; } .score-float { position: fixed; pointer-events: none; font-family: 'Baloo 2', system-ui, sans-serif; color: #1A1A1A; font-size: clamp(1.2rem, 5vw, 2rem); font-weight: 900; background: #fff; border: 2px solid #1A1A1A; border-radius: 50px; padding: 2px 12px; box-shadow: 2px 2px 0 #1A1A1A; animation: floatScore 1s ease-out forwards; } @keyframes floatScore { 0% { transform: translate(-50%,-100%) scale(1); opacity: 1; } 100% { transform: translate(-50%,-220%) scale(1.1); opacity: 0; } } #needle { position: fixed; pointer-events: none; z-index: 200; font-size: 2rem; transform: translate(-4px,-28px) rotate(-30deg); filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.3)); transition: transform 0.05s; } #needle.pop-anim { transform: translate(-4px,-28px) rotate(-30deg) scale(1.3); } .toast { position: fixed; bottom: 90px; right: 16px; font-family: 'Baloo 2', system-ui, sans-serif; color: #1A1A1A; font-size: 1rem; font-weight: 800; background: #fff; border: 2.5px solid #1A1A1A; padding: 8px 18px; border-radius: 50px; box-shadow: 3px 3px 0 #1A1A1A; pointer-events: none; z-index: 400; animation: fadeOut 2s forwards; } /* ── geluiden-app ───────────────────────────────────────────── */ body.app-geluiden { overflow-x: hidden; overflow-y: auto; } .app-geluiden #app { padding: 20px 16px 32px; height: auto; min-height: 100%; justify-content: flex-start; gap: clamp(14px,3vw,24px); } .app-geluiden #title { animation: pulse 3s ease-in-out infinite; } .app-geluiden #title h1 { font-family: 'Baloo 2', system-ui, sans-serif; font-size: clamp(1.8rem, 7vw, 3.2rem); font-weight: 900; color: #1A1A1A; text-shadow: 3px 3px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; background: none; -webkit-text-fill-color: #1A1A1A; filter: none; } .app-geluiden #title p { color: #3a5a6e; font-size: clamp(0.85rem, 3vw, 1rem); font-weight: 700; margin-top: 4px; } .app-geluiden #grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px,42vw), 1fr)); gap: clamp(10px, 2.5vw, 18px); width: 100%; max-width: 680px; } /* Sound cards — cartoon white cards with coloured top stripe */ .card { position: relative; overflow: hidden; border-radius: 20px; padding: clamp(14px,3vw,22px) 10px clamp(12px,2.5vw,18px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; background: #fff; border: 3px solid #1A1A1A; box-shadow: 4px 4px 0 #1A1A1A; touch-action: manipulation; user-select: none; transition: transform 0.1s, box-shadow 0.1s; animation: cardIn 0.45s cubic-bezier(.175,.885,.32,1.275) both; } /* Coloured top stripe using the card's --col variable */ .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: clamp(38px, 9vw, 52px); background: var(--col, #FFD93D); border-radius: 16px 16px 0 0; border-bottom: 3px solid #1A1A1A; } .card:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 #1A1A1A; } .card:active { transform: translate(3px,3px); box-shadow: 1px 1px 0 #1A1A1A; } .card:focus-visible { outline: 3px solid #C77DFF; outline-offset: 4px; } .card.playing { border-color: var(--col); box-shadow: 4px 4px 0 #1A1A1A, 0 0 0 3px var(--col); } @keyframes cardIn { from{opacity:0;transform:scale(0.7) translateY(14px)} to{opacity:1;transform:scale(1) translateY(0)} } .card-emoji { position: relative; z-index: 1; font-size: clamp(2.2rem, 8vw, 3.4rem); line-height: 1; margin-top: clamp(14px, 3.5vw, 22px); filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.15)); transition: transform 0.15s; } .card.playing .card-emoji { animation: bounce 0.35s ease; } @keyframes bounce { 0%{transform:scale(1)} 40%{transform:scale(1.4) rotate(-8deg)} 70%{transform:scale(0.9) rotate(6deg)} 100%{transform:scale(1)} } .card-name { font-family: 'Baloo 2', system-ui, sans-serif; font-size: clamp(0.78rem, 2.8vw, 0.96rem); font-weight: 900; text-align: center; color: #1A1A1A; } .wave { display:flex; gap:3px; align-items:flex-end; height:20px; opacity:0; transition:opacity 0.15s; } .card.playing .wave { opacity: 1; } .wave span { display:block; width:4px; border-radius:2px; background:var(--col); animation:waveBar 0.5s ease-in-out infinite alternate; } .wave span:nth-child(1){animation-delay:.0s;height:6px} .wave span:nth-child(2){animation-delay:.1s;height:14px} .wave span:nth-child(3){animation-delay:.2s;height:10px} .wave span:nth-child(4){animation-delay:.3s;height:18px} .wave span:nth-child(5){animation-delay:.4s;height:8px} @keyframes waveBar { to{transform:scaleY(0.2)} } /* ── blokkendoos-app ────────────────────────────────────────── */ body.app-blokkendoos { touch-action: none; } #fw-canvas { position:fixed; inset:0; pointer-events:none; z-index:50; } .app-blokkendoos #app { justify-content: space-between; padding: clamp(10px,2.5vh,22px) clamp(10px,3vw,24px); gap: clamp(6px,2vh,16px); } .app-blokkendoos #title { font-family: 'Baloo 2', system-ui, sans-serif; font-size: clamp(1.4rem,5vw,2.4rem); font-weight: 900; text-align: center; color: #1A1A1A; text-shadow: 3px 3px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; background: none; -webkit-text-fill-color: #1A1A1A; filter: none; flex-shrink: 0; } #blocks-area { display:flex; gap:clamp(10px,3vw,22px); align-items:center; justify-content:center; flex-wrap:wrap; flex-shrink:0; } .block { width:clamp(62px,14vw,88px); height:clamp(62px,14vw,88px); display:flex; align-items:center; justify-content:center; cursor:grab; border-radius:14px; border: 3px solid #1A1A1A; box-shadow: 4px 4px 0 #1A1A1A; transition:transform 0.15s, box-shadow 0.15s, opacity 0.3s; touch-action:none; user-select:none; position:relative; flex-shrink:0; background: #fff; } .block:active { cursor:grabbing; } .block.used { opacity:0.25; pointer-events:none; transform:scale(0.85); } .block.dragging { opacity:0.7; transform:scale(1.1); box-shadow:6px 6px 0 #1A1A1A; } .block svg { width:70%; height:70%; pointer-events:none; } #box-area { display:flex; flex-direction:column; align-items:center; gap:clamp(6px,1.5vh,12px); flex:1; justify-content:center; } #box { position:relative; width:clamp(220px,70vw,360px); background: #fff; border: 3px solid #1A1A1A; border-radius: 20px; padding: clamp(14px,3vw,22px); box-shadow: 5px 5px 0 #1A1A1A; } #box-label { text-align:center; font-size:clamp(0.75rem,2.5vw,1rem); color: #3a5a6e; font-weight: 900; font-family: 'Baloo 2', system-ui, sans-serif; margin-bottom:clamp(8px,2vh,14px); letter-spacing:.05em; text-transform:uppercase; } #slots-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(10px,3vw,18px); } .slot { aspect-ratio:1; border-radius:12px; display:flex; align-items:center; justify-content:center; background: #f0f8ff; border: 3px dashed #aacce0; transition:border-color 0.2s, background 0.2s, transform 0.15s; position:relative; overflow:hidden; } .slot svg { width:55%; height:55%; opacity:0.4; transition:opacity 0.2s, transform 0.3s; } .slot.hover { border-color:#1A1A1A; border-style:solid; background:#e0f0ff; transform:scale(1.05); } .slot.hover svg { opacity: 0.7; } .slot.wrong { animation:shake 0.4s; border-color:#FF6B6B; background:rgba(255,107,107,0.12); } .slot.filled { border-style:solid; border-color:var(--slot-col); background:#fff; } .slot.filled svg { opacity:1; transform:scale(1.15); } @keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-6px)} 80%{transform:translateX(6px)} } #ghost { position:fixed; pointer-events:none; z-index:200; display:none; align-items:center; justify-content:center; border-radius:14px; opacity:0.85; border: 3px solid #1A1A1A; box-shadow: 4px 4px 0 #1A1A1A; background: #fff; } #ghost svg { width:70%; height:70%; } #feedback { font-family: 'Baloo 2', system-ui, sans-serif; font-size:clamp(1.1rem,4vw,1.7rem); font-weight:900; text-align:center; color: #1A1A1A; min-height:2.2em; display:flex; align-items:center; justify-content:center; transition:opacity 0.3s; flex-shrink:0; line-height: var(--a11y-line-height, 1.6); } #celebrate { display:none; position:fixed; inset:0; z-index:150; flex-direction:column; align-items:center; justify-content:center; gap:16px; background: rgba(200,235,255,0.9); backdrop-filter: blur(4px); } #celebrate.show { display:flex; } #celebrate h2 { font-family: 'Baloo 2', system-ui, sans-serif; font-size:clamp(2rem,8vw,4rem); font-weight:900; text-align:center; color: #1A1A1A; text-shadow: 4px 4px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; animation:pulse 0.8s ease-in-out infinite; background: none; -webkit-text-fill-color: #1A1A1A; } #celebrate p { color: #3a5a6e; font-size:clamp(1rem,4vw,1.4rem); font-weight: 700; text-align:center; line-height:var(--a11y-line-height, 1.6); } #replay-btn { font-family: 'Baloo 2', system-ui, sans-serif; background: #6BCB77; border: 3px solid #1A1A1A; color: #1A1A1A; font-size:clamp(1rem,4vw,1.4rem); font-weight:900; padding:14px 44px; border-radius:50px; cursor:pointer; box-shadow: 5px 5px 0 #1A1A1A; touch-action:manipulation; user-select:none; animation:pulse 2s ease-in-out infinite; transition: transform 0.1s, box-shadow 0.1s; } #replay-btn:active { transform: translate(3px,3px); box-shadow: 2px 2px 0 #1A1A1A; } /* ── muziek-app ─────────────────────────────────────────────── */ body.app-muziek { touch-action: none; } .skip-link { position:absolute; left:-9999px; top:4px; padding:8px 16px; background:#FFD93D; color:#1A1A1A; font-weight:900; border: 2px solid #1A1A1A; border-radius:4px; z-index:9999; text-decoration:none; } .skip-link:focus { left:4px; } .app-muziek #app { justify-content:space-between; padding:clamp(10px,2vh,18px) clamp(8px,2vw,20px); gap:clamp(6px,1.5vh,12px); } #header { display:flex; align-items:center; justify-content:center; gap:10px; flex-shrink:0; width:100%; position:relative; } .app-muziek #title { font-family: 'Baloo 2', system-ui, sans-serif; font-size:clamp(1.3rem,5vw,2.2rem); font-weight:900; text-align:center; color: #1A1A1A; text-shadow: 2px 2px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; background: none; -webkit-text-fill-color: #1A1A1A; filter: none; } .app-muziek #title .emoji-plain { -webkit-text-fill-color: initial; } #controls { display:flex; align-items:center; justify-content:center; gap:8px; flex-shrink:0; flex-wrap:wrap; } .ctrl-btn { font-family: 'Baloo 2', system-ui, sans-serif; background: #fff; border: 2.5px solid #1A1A1A; color: #1A1A1A; font-size:clamp(0.75rem,2.5vw,0.95rem); font-weight:800; padding:7px 14px; border-radius:50px; cursor:pointer; touch-action:manipulation; user-select:none; box-shadow: 3px 3px 0 #1A1A1A; transition:transform 0.1s, box-shadow 0.1s; } .ctrl-btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 #1A1A1A; } .ctrl-btn:focus-visible { outline:3px solid #C77DFF; outline-offset:2px; } .ctrl-btn.active { background: #FFD93D; border-color: #1A1A1A; color: #1A1A1A; } #inst-toggle { display:flex; background:#f0f8ff; border:2.5px solid #1A1A1A; border-radius:50px; overflow:hidden; box-shadow: 3px 3px 0 #1A1A1A; } .inst-btn { font-family: 'Baloo 2', system-ui, sans-serif; padding:7px 16px; font-size:clamp(0.75rem,2.5vw,0.95rem); font-weight:800; cursor:pointer; border:none; background:transparent; color:#3a5a6e; transition:background 0.15s, color 0.15s; touch-action:manipulation; user-select:none; } .inst-btn.active { background:#FFD93D; color:#1A1A1A; } .inst-btn:focus-visible { outline:3px solid #C77DFF; outline-offset:-2px; } #xylophone { display:flex; align-items:flex-end; justify-content:center; gap:clamp(4px,1.2vw,10px); flex:1; width:100%; padding:0 4px; } .xyl-key { flex:1; border-radius:0 0 clamp(8px,2vw,16px) clamp(8px,2vw,16px); cursor:pointer; touch-action:manipulation; user-select:none; display:flex; align-items:flex-end; justify-content:center; padding-bottom:clamp(8px,2vh,16px); font-family: 'Baloo 2', system-ui, sans-serif; font-size:clamp(0.55rem,1.8vw,0.85rem); font-weight:900; color:#1A1A1A; border: 3px solid #1A1A1A; border-top: none; position:relative; overflow:hidden; transition:filter 0.1s, transform 0.08s; box-shadow: 0 5px 0 #1A1A1A; } .xyl-key:active, .xyl-key.hit { filter:brightness(1.15); transform:translateY(4px); box-shadow: 0 1px 0 #1A1A1A; } .xyl-key:focus-visible { outline:3px solid #C77DFF; outline-offset:2px; } .xyl-key::after { content:''; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(255,255,255,0.35), transparent 45%); pointer-events:none; } #piano { flex:1; width:100%; display:flex; flex-direction:column; gap:6px; justify-content:center; } #piano-white-row { position:relative; display:flex; gap:3px; height:clamp(60px,18vh,130px); width:100%; } #piano-black-row { display:grid; grid-template-columns:repeat(14,1fr); height:clamp(40px,12vh,90px); width:100%; position:relative; pointer-events:none; } .piano-white { flex:1; border-radius:0 0 10px 10px; background:linear-gradient(to bottom,#f8f8f8,#fff); cursor:pointer; touch-action:manipulation; user-select:none; display:flex; align-items:flex-end; justify-content:center; padding-bottom:6px; font-family: 'Baloo 2', system-ui, sans-serif; font-size:clamp(0.5rem,1.5vw,0.75rem); font-weight:900; color:#3a5a6e; transition:filter 0.08s, transform 0.08s; box-shadow:0 5px 0 #aaa, 0 6px 12px rgba(0,0,0,0.15); border:2px solid #ccc; border-top:none; position:relative; overflow:hidden; } .piano-white::after { content:''; position:absolute; top:0; left:0; right:0; height:30%; background:linear-gradient(to bottom,rgba(255,255,255,0.9),transparent); pointer-events:none; } .piano-white:active, .piano-white.hit { filter:brightness(0.9); transform:translateY(3px); box-shadow:0 2px 0 #aaa; } .piano-white:focus-visible { outline:3px solid #C77DFF; outline-offset:2px; } .piano-black { height:100%; border-radius:0 0 8px 8px; background:linear-gradient(to bottom,#333,#111); border:none; cursor:pointer; touch-action:manipulation; user-select:none; pointer-events:all; font-family: 'Baloo 2', system-ui, sans-serif; font-size:clamp(0.4rem,1.2vw,0.6rem); font-weight:900; color:rgba(255,255,255,0.7); display:flex; align-items:flex-end; justify-content:center; padding-bottom:4px; box-shadow:0 5px 0 #000, 2px 6px 10px rgba(0,0,0,0.4); transition:filter 0.08s, transform 0.08s; position:relative; overflow:hidden; } .piano-black::after { content:''; position:absolute; top:0; left:0; right:0; height:25%; background:linear-gradient(to bottom,rgba(255,255,255,0.2),transparent); pointer-events:none; } .piano-black:active, .piano-black.hit { filter:brightness(1.5); transform:translateY(2px); box-shadow:0 2px 0 #000; } .piano-black:focus-visible { outline:3px solid #C77DFF; } #rec-strip { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); flex-shrink:0; width:calc(100% - 32px); max-width:700px; display:flex; align-items:center; gap:8px; background:#fff; border:3px solid #1A1A1A; border-radius:50px; padding:8px 18px; box-shadow: 4px 4px 0 #1A1A1A; } #rec-dot { width:12px; height:12px; border-radius:50%; background:#FF6B6B; flex-shrink:0; border:2px solid #1A1A1A; transition:opacity 0.3s; } #rec-dot.recording { animation:recPulse 0.8s ease-in-out infinite; } @keyframes recPulse { 0%,100%{opacity:1} 50%{opacity:0.2} } #rec-label { font-family:'Baloo 2',system-ui,sans-serif; font-size:0.8rem; font-weight:900; color:#1A1A1A; flex-shrink:0; } #rec-notes { flex:1; font-size:0.75rem; font-weight:700; color:#3a5a6e; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .note-pop { position:fixed; pointer-events:none; user-select:none; font-family: 'Baloo 2', system-ui, sans-serif; font-size:clamp(1.2rem,4vw,2rem); font-weight:900; color:#1A1A1A; background:#fff; border:2px solid #1A1A1A; border-radius:50px; padding:2px 10px; box-shadow:2px 2px 0 #1A1A1A; animation:notePop 0.8s ease-out forwards; z-index:100; } @keyframes notePop { 0%{transform:translate(-50%,-50%) scale(0);opacity:1} 50%{transform:translate(-50%,-120%) scale(1.2);opacity:1} 100%{transform:translate(-50%,-200%) scale(0.8);opacity:0} }