/* AirVoice Labs, design-systeem Palet uit het logo: diep indigo + elektrisch violet, donkere lab-achtergrond. */ @font-face { font-family: 'Space Grotesk'; src: url('/assets/fonts/space-grotesk-400.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Space Grotesk'; src: url('/assets/fonts/space-grotesk-500.woff2') format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Space Grotesk'; src: url('/assets/fonts/space-grotesk-700.woff2') format('woff2'); font-weight: 700; font-display: swap; } :root { /* kleuren */ --bg-0: #0b0514; /* diepste achtergrond */ --bg-1: #120822; /* pagina-achtergrond */ --bg-2: #1a0f30; /* kaarten */ --bg-3: #241542; /* verhoogde kaarten / hover */ --line: #33215c; /* randen */ --line-soft: #261847; --violet: #7c3aed; /* primair accent (logo-vulling) */ --violet-soft: #a78bfa; --violet-deep: #2d1b69; /* logo-outline */ --spark: #8b5cf6; --cyan: #22d3ee; /* bot / secundair accent */ --amber: #fbbf24; /* sterren, badges */ --green: #34d399; --red: #f87171; --text: #ece7f8; --text-dim: #b3a6d4; --text-faint: #776a99; --font-display: 'Space Grotesk', system-ui, sans-serif; --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --radius: 16px; --radius-sm: 10px; --shadow-glow: 0 0 40px rgba(124, 58, 237, .25); --maxw: 1120px; } /* ============================================================ LIGHT-thema — actief zodra . Enkel de tokens worden herzet; alle componenten erven mee. Gebruikt op de publieke homepage + ouder-portaal (de kind-app blijft bewust donker: dat is de "geheime club"). 'violet-soft' wordt hier een DIEPE violet, want dit token dient overal als accent-TEKST en moet leesbaar zijn op wit. ============================================================ */ :root[data-theme="light"] { --bg-0: #ece5fa; /* alt-secties, footer, inputs, hero-fade */ --bg-1: #f7f4fd; /* pagina-achtergrond */ --bg-2: #ffffff; /* kaarten */ --bg-3: #f1eafc; /* verhoogd / hover / placeholders */ --line: #e0d5f3; --line-soft: #ebe3f8; --violet: #6d28d9; /* primair accent + focus-rand */ --violet-soft: #6d28d9; /* accent-TEKST — diep genoeg voor wit */ --violet-deep: #4c1d95; --spark: #7c3aed; --cyan: #0e7490; /* donkerder voor contrast op wit */ --amber: #d97706; /* nog steeds "goud", maar leesbaar */ --green: #047857; --red: #dc2626; --text: #1c1533; --text-dim: #574b73; --text-faint: #8b7fa8; --shadow-glow: 0 12px 44px rgba(124, 58, 237, .18); } /* paar plekken met hardgecodeerde donkere waarden — per-thema herzet */ :root[data-theme="light"] .topnav { background: rgba(247, 244, 253, .82); } :root[data-theme="light"] .hero { background: radial-gradient(ellipse 80% 55% at 50% -5%, rgba(124, 58, 237, .13), transparent 62%), radial-gradient(ellipse 45% 35% at 82% 25%, rgba(34, 211, 238, .10), transparent 70%), radial-gradient(ellipse 45% 35% at 15% 40%, rgba(139, 92, 246, .10), transparent 70%), var(--bg-1); } :root[data-theme="light"] .grad { /* enkel de gradient-kleuren, clip/animatie blijft */ background-image: linear-gradient(100deg, #7c3aed 8%, #0891b2 52%, #7c3aed 92%); } /* op bijna-wit hebben kaarten wat diepte nodig i.p.v. enkel een flauwe rand */ :root[data-theme="light"] .card, :root[data-theme="light"] .news-card, :root[data-theme="light"] .ws-card, :root[data-theme="light"] .camera-scene, :root[data-theme="light"] .bundle { box-shadow: 0 1px 2px rgba(28, 21, 51, .04), 0 10px 28px rgba(90, 55, 150, .07); } :root[data-theme="light"] .pillar:hover, :root[data-theme="light"] .player:hover, :root[data-theme="light"] .news-card:hover, :root[data-theme="light"] .ws-card:hover { box-shadow: 0 6px 14px rgba(28, 21, 51, .06), 0 16px 40px rgba(90, 55, 150, .14); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--bg-1); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; font-weight: 700; } a { color: var(--violet-soft); text-decoration: none; } a:hover { color: var(--text); } img { max-width: 100%; } button { font-family: inherit; } /* ---------- knoppen ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem 1.6rem; border-radius: 999px; border: 0; cursor: pointer; font-family: var(--font-display); font-weight: 500; font-size: 1rem; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; text-decoration: none; } .btn:active { transform: scale(.97); } .btn-primary { background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: #fff; box-shadow: 0 4px 24px rgba(124, 58, 237, .4); } .btn-primary:hover { box-shadow: 0 6px 32px rgba(124, 58, 237, .6); transform: translateY(-2px); color:#fff; } .btn-ghost { background: transparent; color: var(--violet-soft); border: 1.5px solid var(--line); box-shadow: none; } .btn-ghost:hover { border-color: var(--violet); color: var(--text); background: rgba(124,58,237,.08); } .btn-sm { padding: .45rem 1rem; font-size: .875rem; } .btn:disabled { opacity: .5; cursor: not-allowed; } /* ---------- kaarten & vormen ---------- */ .card { background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 1.5rem; } .chip { display: inline-block; padding: .2rem .7rem; border-radius: 999px; font-size: .75rem; font-weight: 600; letter-spacing: .04em; background: rgba(124,58,237,.15); color: var(--violet-soft); border: 1px solid rgba(124,58,237,.35); } .chip-cyan { background: rgba(34,211,238,.1); color: var(--cyan); border-color: rgba(34,211,238,.3); } .chip-amber { background: rgba(251,191,36,.1); color: var(--amber); border-color: rgba(251,191,36,.3); } .chip-green { background: rgba(52,211,153,.1); color: var(--green); border-color: rgba(52,211,153,.3); } .chip-red { background: rgba(248,113,113,.1); color: var(--red); border-color: rgba(248,113,113,.3); } /* ---------- formulieren ---------- */ label { display: block; font-size: .85rem; color: var(--text-dim); margin: .9rem 0 .3rem; font-weight: 500; } input[type=text], input[type=email], input[type=password], input[type=number], input[type=datetime-local], input[type=color], select, textarea { width: 100%; padding: .7rem 1rem; border-radius: var(--radius-sm); background: var(--bg-0); color: var(--text); border: 1.5px solid var(--line); font-size: 1rem; font-family: inherit; transition: border-color .15s; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--violet); } textarea { resize: vertical; min-height: 90px; } .field-error { color: var(--red); font-size: .85rem; margin-top: .3rem; } .form-msg { padding: .8rem 1rem; border-radius: var(--radius-sm); margin: 1rem 0; font-size: .9rem; } .form-msg.ok { background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.3); color: var(--green); } .form-msg.err { background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.3); color: var(--red); } /* ---------- layout helpers ---------- */ .container { max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; } .grid { display: grid; gap: 1.25rem; } @media (min-width: 720px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } } .muted { color: var(--text-dim); } .faint { color: var(--text-faint); font-size: .85rem; } .center { text-align: center; } /* ---------- sparkles (AI-sterretjes uit het logo) ---------- */ .sparkle { position: absolute; pointer-events: none; width: 14px; height: 14px; opacity: 0; background: currentColor; color: var(--spark); clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%); animation: sparkle-float var(--dur, 9s) ease-in-out var(--delay, 0s) infinite; } @keyframes sparkle-float { 0% { opacity: 0; transform: translateY(24px) scale(.4) rotate(0deg); } 15% { opacity: var(--peak, .9); } 55% { opacity: var(--peak, .9); } 100% { opacity: 0; transform: translateY(-90px) scale(1.1) rotate(40deg); } } /* ---------- scrollbar ---------- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-0); } ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: var(--violet-deep); } /* ---------- modal ---------- */ .modal-backdrop { position: fixed; inset: 0; background: rgba(5,2,10,.75); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 1rem; } .modal { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); max-width: 560px; width: 100%; max-height: 88vh; overflow-y: auto; padding: 1.8rem; box-shadow: var(--shadow-glow); } .modal h3 { margin-bottom: .75rem; } /* ---------- toast ---------- */ #toast-zone { position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: .5rem; align-items: center; } .toast { background: var(--bg-3); border: 1px solid var(--line); color: var(--text); border-radius: 999px; padding: .6rem 1.3rem; font-size: .9rem; box-shadow: 0 8px 24px rgba(0,0,0,.5); animation: toast-in .25s ease; } .toast.err { border-color: rgba(248,113,113,.5); } @keyframes toast-in { from { opacity: 0; transform: translateY(12px); } } /* ---------- badge-icoon ---------- */ .badge-tile { display: flex; flex-direction: column; align-items: center; gap: .3rem; background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: .9rem .6rem; text-align: center; } .badge-tile .icon { font-size: 1.8rem; } .badge-tile .name { font-size: .78rem; font-weight: 600; }