/*
* BreinKid — Design System "Speels & Helder"
* ============================================
* Versie : 1.0.0 (2026-06-09)
* Fonts : Baloo 2 (display/koppen), Fredoka (speels accent), Nunito (body)
* De layout-partial (layout.php → bk_head) zet de in :
*
*
*
*
* Structuur
* ---------
* 1. Custom properties (palet, typeface, spatie, radius, schaduw)
* 2. Reset & base
* 3. Typografie
* 4. Knoppen — .bk-btn, .bk-btn-primary, .bk-btn-ghost, .bk-btn-danger
* 5. Kaarten — .bk-card, .bk-card-flat
* 6. Formuliervelden — .bk-input, .bk-label
* 7. Avatar — .bk-avatar (+ kleur-modifiers)
* 8. Oefening-opties — .bk-option (.is-correct / .is-wrong / .is-selected)
* 9. PIN-pad — .bk-pinpad
* 10. Streak & punten-badges — .bk-streak, .bk-points
* 11. Sterren-balk — .bk-stars
* 12. Mascotte — .bk-mascot
* 13. Top-bars — .bk-topbar (kind) / .bk-topbar-parent
* 14. Layout-helpers — .bk-wrap, .bk-screen, .bk-stack, .bk-row
* 15. Feedback-berichten — .bk-alert
* 16. Chip / badge — .bk-chip
* 17. Progress-bar — .bk-progress
* 18. Ouder-dashboard register — .bk-dash-* klassen
* 19. Animaties & reduced-motion
* 20. Responsive breakpoints
*/
/* ============================================================
1. CUSTOM PROPERTIES
============================================================ */
:root {
/* Palet — sluit aan op holding-pagina index.php */
--bk-bg: #f6f4ef;
--bk-surface: #ffffff;
--bk-ink: #1c2330;
--bk-ink-2: #4a5566;
--bk-ink-3: #8a95a0;
--bk-primary: #5e3aa9; /* paars */
--bk-primary-d:#4a2d85; /* donkerder hover */
--bk-primary-l:#ede6fb; /* licht tint */
--bk-accent: #f0a93b; /* oranje/geel */
--bk-accent-d: #d08a1a;
--bk-accent-l: #fef3dc;
--bk-pink: #e85a8c;
--bk-pink-d: #c4406f;
--bk-pink-l: #fde8f1;
--bk-green: #2a8f5c;
--bk-green-d: #1e6b44;
--bk-green-l: #e0f4eb;
--bk-red: #e03c3c;
--bk-red-l: #fde8e8;
/* Typeface */
--bk-font-display: 'Baloo 2', 'Fredoka', system-ui, sans-serif;
--bk-font-body: 'Nunito', system-ui, sans-serif;
/* Spatiëring (8px grid) */
--bk-space-1: 4px;
--bk-space-2: 8px;
--bk-space-3: 12px;
--bk-space-4: 16px;
--bk-space-5: 24px;
--bk-space-6: 32px;
--bk-space-7: 48px;
--bk-space-8: 64px;
/* Border-radius — royaal afgerond */
--bk-r-sm: 8px;
--bk-r-md: 16px;
--bk-r-lg: 24px;
--bk-r-xl: 32px;
--bk-r-pill: 9999px;
/* Zachte schaduwen */
--bk-shadow-sm: 0 2px 8px -2px rgba(60, 40, 100, .12);
--bk-shadow-md: 0 6px 24px -6px rgba(60, 40, 100, .18);
--bk-shadow-lg: 0 12px 40px -10px rgba(60, 40, 100, .22);
--bk-shadow-pop: 0 0 0 4px rgba(94, 58, 169, .25);
/* Focusring */
--bk-focus-ring: 0 0 0 3px rgba(94, 58, 169, .45);
/* Overgang */
--bk-ease: cubic-bezier(.34, 1.36, .64, 1);
--bk-dur: 180ms;
}
/* ============================================================
2. RESET & BASE
============================================================ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
font-family: var(--bk-font-body);
background-color: var(--bk-bg);
/* Subtiele achtergrondgradiënten — zacht, niet afleidend */
background-image:
radial-gradient(at 10% 20%, rgba(232, 90, 140, .07) 0, transparent 50%),
radial-gradient(at 90% 80%, rgba(94, 58, 169, .07) 0, transparent 50%),
radial-gradient(at 50% 50%, rgba(240, 169, 59, .04) 0, transparent 60%);
color: var(--bk-ink);
line-height: 1.55;
min-height: 100dvh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Speelse, levendige achtergrond voor de kind-omgeving (home + oefeningen) */
.bk-mode-kid {
background-image:
radial-gradient(circle at 12% 16%, rgba(232,90,140,.18) 0, transparent 24%),
radial-gradient(circle at 88% 20%, rgba(94,58,169,.18) 0, transparent 24%),
radial-gradient(circle at 18% 84%, rgba(42,143,92,.15) 0, transparent 24%),
radial-gradient(circle at 82% 86%, rgba(240,169,59,.20) 0, transparent 26%);
background-attachment: fixed;
}
.bk-mode-kid::before,
.bk-mode-kid::after {
content: '';
position: fixed;
z-index: -1;
width: 150px;
height: 150px;
border-radius: 42% 58% 55% 45%;
opacity: .16;
pointer-events: none;
}
.bk-mode-kid::before { left: -46px; top: 16%; background: var(--bk-pink); animation: bk-float-a 9s ease-in-out infinite; }
.bk-mode-kid::after { right: -50px; bottom: 12%; background: var(--bk-primary); animation: bk-float-b 11s ease-in-out infinite; }
@keyframes bk-float-a { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(26px) rotate(22deg); } }
@keyframes bk-float-b { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-30px) rotate(-18deg); } }
@media (prefers-reduced-motion: reduce) {
.bk-mode-kid::before, .bk-mode-kid::after { animation: none; }
}
img, svg, video {
max-width: 100%;
display: block;
}
a {
color: var(--bk-primary);
text-decoration: none;
}
a:hover { text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea {
font-family: inherit;
font-size: inherit;
}
/* Focusring zichtbaar voor toetsenbord, verborgen voor muis */
:focus-visible {
outline: none;
box-shadow: var(--bk-focus-ring);
}
:focus:not(:focus-visible) { outline: none; }
/* Geen focus-ring op niet-klikbare, geprogrammeerd gefocuste koppen (tabindex=-1) */
[tabindex="-1"]:focus { outline: none; box-shadow: none; }
/* ============================================================
3. TYPOGRAFIE
============================================================ */
.bk-display,
h1, h2, h3 {
font-family: var(--bk-font-display);
font-weight: 800;
line-height: 1.1;
color: var(--bk-ink);
}
h1 { font-size: clamp(28px, 6vw, 48px); }
h2 { font-size: clamp(22px, 4vw, 32px); font-weight: 700; }
h3 { font-size: clamp(18px, 3vw, 24px); font-weight: 700; }
/* Kleuraccenten in koppen */
.bk-brand { color: var(--bk-primary); }
.bk-accent { color: var(--bk-accent); }
/* Grote oefentekst voor kinderen — goed leesbaar op afstand */
.bk-question-text {
font-family: var(--bk-font-display);
font-size: clamp(22px, 5vw, 36px);
font-weight: 700;
line-height: 1.25;
color: var(--bk-ink);
}
/* Nog groter voor kleuters (leeftijds-context via parent class) */
.bk-age-kleuter .bk-question-text {
font-size: clamp(28px, 7vw, 48px);
}
.bk-lead {
font-size: clamp(16px, 2.5vw, 20px);
color: var(--bk-ink-2);
line-height: 1.6;
}
.bk-small {
font-size: 13px;
color: var(--bk-ink-3);
}
.bk-text-center { text-align: center; }
.bk-text-muted { color: var(--bk-ink-2); }
/* ============================================================
4. KNOPPEN
============================================================ */
/*
* Basisknop — altijd minstens 56px hoog (tikdoel voor kinderen).
* Combineer met een modifier: .bk-btn-primary, .bk-btn-ghost, etc.
*/
.bk-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--bk-space-2);
min-height: 56px;
padding: var(--bk-space-3) var(--bk-space-5);
border: 2px solid transparent;
border-radius: var(--bk-r-pill);
font-family: var(--bk-font-display);
font-size: 17px;
font-weight: 700;
line-height: 1.2;
cursor: pointer;
text-decoration: none;
transition:
background var(--bk-dur) var(--bk-ease),
transform var(--bk-dur) var(--bk-ease),
box-shadow var(--bk-dur) ease;
-webkit-tap-highlight-color: transparent;
user-select: none;
}
.bk-btn:active:not(:disabled) {
transform: scale(.95);
}
.bk-btn:disabled,
.bk-btn[aria-disabled="true"] {
opacity: .5;
cursor: not-allowed;
}
/* Primaire actie — paars */
.bk-btn-primary {
background: var(--bk-primary);
color: #fff;
box-shadow: 0 4px 16px -4px rgba(94, 58, 169, .4);
}
.bk-btn-primary:hover:not(:disabled) {
background: var(--bk-primary-d);
box-shadow: 0 6px 20px -4px rgba(94, 58, 169, .5);
transform: translateY(-1px);
}
.bk-btn-primary:focus-visible {
box-shadow: var(--bk-focus-ring), 0 4px 16px -4px rgba(94, 58, 169, .4);
}
/* Accent-knop — geel/oranje */
.bk-btn-accent {
background: var(--bk-accent);
color: var(--bk-ink);
box-shadow: 0 4px 16px -4px rgba(240, 169, 59, .45);
}
.bk-btn-accent:hover:not(:disabled) {
background: var(--bk-accent-d);
transform: translateY(-1px);
}
/* Ghost-knop — omtrek */
.bk-btn-ghost {
background: transparent;
border-color: var(--bk-primary);
color: var(--bk-primary);
}
.bk-btn-ghost:hover:not(:disabled) {
background: var(--bk-primary-l);
}
/* Gevaarlijk / uitloggen */
.bk-btn-danger {
background: var(--bk-red-l);
color: var(--bk-red);
border-color: transparent;
}
.bk-btn-danger:hover:not(:disabled) {
background: var(--bk-red);
color: #fff;
}
/* Klein (bijv. "stop"-knop in topbar) */
.bk-btn-sm {
min-height: 40px;
padding: var(--bk-space-2) var(--bk-space-4);
font-size: 14px;
border-radius: var(--bk-r-pill);
}
/* Volledige breedte */
.bk-btn-full { width: 100%; }
/* ============================================================
5. KAARTEN
============================================================ */
/*
* .bk-card — standaard kaart met zachte schaduw
* .bk-card-flat — kaart zonder schaduw (achtergrond-tint variant)
*/
.bk-card {
background: var(--bk-surface);
border-radius: var(--bk-r-lg);
padding: var(--bk-space-6);
box-shadow: var(--bk-shadow-md);
position: relative;
overflow: hidden;
}
/* Decoratieve achtergrondcirkel rechtsboven — subtiel */
.bk-card::before {
content: '';
position: absolute;
top: -32px;
right: -32px;
width: 120px;
height: 120px;
border-radius: 50%;
background: linear-gradient(135deg, var(--bk-pink), var(--bk-accent));
opacity: .08;
pointer-events: none;
}
.bk-card-flat {
background: var(--bk-bg);
border-radius: var(--bk-r-lg);
padding: var(--bk-space-5);
border: 1px solid rgba(28, 35, 48, .07);
}
/* Interactieve kaart (klikbaar profiel, vakkaart) */
.bk-card-action {
cursor: pointer;
transition: transform var(--bk-dur) var(--bk-ease), box-shadow var(--bk-dur) ease;
}
.bk-card-action:hover {
transform: translateY(-3px);
box-shadow: var(--bk-shadow-lg);
}
.bk-card-action:active { transform: translateY(0); }
.bk-card-action:focus-visible { box-shadow: var(--bk-focus-ring); }
/* ============================================================
6. FORMULIERVELDEN
============================================================ */
.bk-label {
display: block;
font-family: var(--bk-font-display);
font-size: 14px;
font-weight: 700;
color: var(--bk-ink);
margin-bottom: var(--bk-space-2);
}
.bk-input {
display: block;
width: 100%;
min-height: 52px;
padding: var(--bk-space-3) var(--bk-space-4);
border: 2px solid rgba(28, 35, 48, .15);
border-radius: var(--bk-r-md);
background: var(--bk-surface);
font-family: var(--bk-font-body);
font-size: 16px; /* voorkomt iOS-zoom */
color: var(--bk-ink);
transition: border-color var(--bk-dur) ease, box-shadow var(--bk-dur) ease;
-webkit-appearance: none;
}
.bk-input::placeholder { color: var(--bk-ink-3); }
.bk-input:focus {
outline: none;
border-color: var(--bk-primary);
box-shadow: var(--bk-focus-ring);
}
.bk-input.is-error {
border-color: var(--bk-red);
box-shadow: 0 0 0 3px rgba(224, 60, 60, .25);
}
.bk-field { margin-bottom: var(--bk-space-5); }
.bk-field-hint {
margin-top: var(--bk-space-1);
font-size: 13px;
color: var(--bk-ink-3);
}
/* ============================================================
7. AVATAR — ronde gekleurde cirkels
============================================================ */
/*
* .bk-avatar — standaard rond profielicoon
* Kleurmodifiers: --avatar-1 t/m --avatar-5
* Gebruik: 🦊
*/
.bk-avatar {
--_bg: var(--bk-primary-l);
--_border: var(--bk-primary);
display: inline-flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
border-radius: 50%;
background: var(--_bg);
border: 3px solid var(--_border);
font-size: 32px;
line-height: 1;
flex-shrink: 0;
overflow: hidden;
box-shadow: var(--bk-shadow-sm);
}
/* Grote avatar (profiel-kiesscherm) */
.bk-avatar-lg {
width: 96px;
height: 96px;
font-size: 44px;
border-width: 4px;
}
/* Klein (topbar) */
.bk-avatar-sm {
width: 44px;
height: 44px;
font-size: 20px;
border-width: 2px;
}
/* Kleurset — 5 varianten zodat kinderen visueel onderscheid hebben */
.bk-avatar-1 { --_bg: var(--bk-primary-l); --_border: var(--bk-primary); }
.bk-avatar-2 { --_bg: var(--bk-pink-l); --_border: var(--bk-pink); }
.bk-avatar-3 { --_bg: var(--bk-accent-l); --_border: var(--bk-accent); }
.bk-avatar-4 { --_bg: var(--bk-green-l); --_border: var(--bk-green); }
.bk-avatar-5 {
--_bg: #e8f0fe;
--_border: #4a90d9;
}
/* ============================================================
8. OEFENING-OPTIES
============================================================ */
/*
* .bk-option — grote tikdoelen voor meerkeuzevragen.
* Min 80px hoog. Feedback via .is-correct / .is-wrong / .is-selected.
* Gebruik:
*/
.bk-option {
display: flex;
align-items: center;
gap: var(--bk-space-3);
width: 100%;
min-height: 80px;
padding: var(--bk-space-4) var(--bk-space-5);
background: var(--bk-surface);
border: 3px solid rgba(28, 35, 48, .12);
border-radius: var(--bk-r-lg);
font-family: var(--bk-font-display);
font-size: clamp(16px, 3vw, 20px);
font-weight: 700;
color: var(--bk-ink);
cursor: pointer;
text-align: left;
transition:
border-color var(--bk-dur) ease,
background var(--bk-dur) ease,
transform var(--bk-dur) var(--bk-ease),
box-shadow var(--bk-dur) ease;
-webkit-tap-highlight-color: transparent;
}
/* Alleen op apparaten met echte muis — op touch blijft :hover anders
"plakken" op de plek van de vorige tik (iOS), waardoor bij de volgende
vraag een optie al geselecteerd lijkt. */
@media (hover: hover) and (pointer: fine) {
.bk-option:hover:not(:disabled):not(.is-correct):not(.is-wrong) {
border-color: var(--bk-primary);
background: var(--bk-primary-l);
transform: translateX(4px);
}
}
.bk-option:focus-visible {
outline: none;
box-shadow: var(--bk-focus-ring);
border-color: var(--bk-primary);
}
.bk-option:active:not(:disabled):not(.is-correct):not(.is-wrong) {
transform: scale(.97);
}
/* Geselecteerd — neutrale aanduiding vóór feedback */
.bk-option.is-selected {
border-color: var(--bk-primary);
background: var(--bk-primary-l);
}
/* Correct antwoord */
.bk-option.is-correct {
border-color: var(--bk-green);
background: var(--bk-green-l);
color: var(--bk-green-d);
animation: bk-pop var(--bk-dur) var(--bk-ease) forwards;
}
.bk-option.is-correct::after {
content: '✓';
margin-left: auto;
font-size: 24px;
flex-shrink: 0;
color: var(--bk-green);
}
/* Fout antwoord */
.bk-option.is-wrong {
border-color: var(--bk-red);
background: var(--bk-red-l);
color: var(--bk-red);
animation: bk-shake 350ms ease forwards;
}
.bk-option.is-wrong::after {
content: '✗';
margin-left: auto;
font-size: 24px;
flex-shrink: 0;
}
/* Uitgeschakeld na antwoord */
.bk-option:disabled {
cursor: default;
}
/* Opties-raster — voor meerdere keuzes naast elkaar (tablet) */
.bk-options-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--bk-space-3);
}
/* ============================================================
9. PIN-PAD
============================================================ */
/*
* .bk-pinpad — het 3×4-cijfertoetsenblok.
* Gebruik:
*
*/
.bk-pinpad {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--bk-space-5);
width: 100%;
max-width: 320px;
margin: 0 auto;
}
/* Invoer-indicatoren */
.bk-pin-dots {
display: flex;
gap: var(--bk-space-3);
}
.bk-pin-dot {
width: 18px;
height: 18px;
border-radius: 50%;
background: rgba(28, 35, 48, .15);
transition: background var(--bk-dur) ease, transform var(--bk-dur) var(--bk-ease);
}
.bk-pin-dot.is-filled {
background: var(--bk-primary);
transform: scale(1.2);
}
/* 3-koloms rooster */
.bk-pin-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--bk-space-3);
width: 100%;
}
.bk-pin-key {
display: flex;
align-items: center;
justify-content: center;
height: 72px;
border-radius: var(--bk-r-lg);
background: var(--bk-surface);
border: 2px solid rgba(28, 35, 48, .1);
font-family: var(--bk-font-display);
font-size: 26px;
font-weight: 700;
color: var(--bk-ink);
cursor: pointer;
box-shadow: var(--bk-shadow-sm);
transition:
background var(--bk-dur) ease,
transform var(--bk-dur) var(--bk-ease),
box-shadow var(--bk-dur) ease;
-webkit-tap-highlight-color: transparent;
}
.bk-pin-key:hover {
background: var(--bk-primary-l);
border-color: var(--bk-primary);
}
.bk-pin-key:active {
transform: scale(.9);
box-shadow: none;
}
.bk-pin-key:focus-visible {
outline: none;
box-shadow: var(--bk-focus-ring);
}
/* Wis-toets iets kleiner en neutraal */
.bk-pin-del {
font-size: 22px;
color: var(--bk-ink-2);
background: var(--bk-bg);
}
.bk-pin-del:hover {
background: var(--bk-red-l);
border-color: var(--bk-red);
color: var(--bk-red);
}
/* Shake bij fout PIN */
.bk-pin-dots.is-error .bk-pin-dot {
background: var(--bk-red);
animation: bk-shake 350ms ease forwards;
}
/* ============================================================
10. STREAK & PUNTEN-BADGES
============================================================ */
/*
* .bk-streak — vuurvlam + dagenteller
* .bk-points — ster + punten
* Gebruik in topbar of na een oefening.
*/
.bk-streak,
.bk-points {
display: inline-flex;
align-items: center;
gap: var(--bk-space-1);
padding: var(--bk-space-1) var(--bk-space-3);
border-radius: var(--bk-r-pill);
font-family: var(--bk-font-display);
font-size: 15px;
font-weight: 800;
line-height: 1;
white-space: nowrap;
}
.bk-streak {
background: var(--bk-accent-l);
color: var(--bk-accent-d);
}
.bk-streak::before {
content: '🔥';
font-size: 16px;
}
.bk-points {
background: var(--bk-primary-l);
color: var(--bk-primary);
}
.bk-points::before {
content: '⭐';
font-size: 14px;
}
/* Animatie bij nieuwe punten / streak-omhoog */
.bk-streak.is-up,
.bk-points.is-up {
animation: bk-pop var(--bk-dur) var(--bk-ease);
}
/* ============================================================
11. STERREN-BALK — afsluiting van een oefening
============================================================ */
/*
* .bk-stars — drie sterren als resultaat-weergave.
* Gebruik:
*
* ★
* ★
* ★
*
* Of voeg klasse .is-earned toe via JS op de eerste n .bk-star elementen.
*/
.bk-stars {
display: inline-flex;
gap: var(--bk-space-2);
align-items: center;
}
.bk-star {
font-size: 36px;
color: rgba(28, 35, 48, .15);
transition: color var(--bk-dur) ease, transform var(--bk-dur) var(--bk-ease);
display: inline-block;
line-height: 1;
}
.bk-star.is-earned {
color: var(--bk-accent);
filter: drop-shadow(0 2px 6px rgba(240, 169, 59, .5));
animation: bk-star-in calc(var(--bk-dur) * 1.5) var(--bk-ease) both;
}
/* Cascade-delay voor de drie sterren */
.bk-star:nth-child(1).is-earned { animation-delay: 0ms; }
.bk-star:nth-child(2).is-earned { animation-delay: 80ms; }
.bk-star:nth-child(3).is-earned { animation-delay: 160ms; }
/* Grote versie op het resultatenscherm */
.bk-stars-lg .bk-star { font-size: 56px; }
/* ============================================================
12. MASCOTTE
============================================================ */
/*
* .bk-mascot — toont de SVG-mascotte via background-image.
* De emoji-tekst in de HTML wordt onzichtbaar gemaakt (font-size 0).
* Werkt automatisch op alle plekken waar .bk-mascot al gebruikt wordt.
*
* Standaard (blij/zwaaiend): /assets/img/mascotte.svg
* Juich-variant: voeg klasse .bk-mascot-juich toe.
*/
.bk-mascot {
display: inline-block;
width: 80px;
height: 88px; /* iets hoger dan breed vanwege beentjes */
border-radius: 0; /* geen cirkel meer — SVG is zelf al rond */
background: transparent;
background-image: url('/assets/img/mascotte.svg');
background-repeat: no-repeat;
background-position: center bottom;
background-size: contain;
box-shadow: none;
font-size: 0; /* verbergt eventuele emoji-tekst in de HTML */
text-indent: -9999px; /* extra zekerheid voor oudere schermlezer-impls */
color: transparent;
line-height: 1;
flex-shrink: 0;
animation: bk-float 3s ease-in-out infinite;
}
/* ::before niet meer nodig — maar leeg laten zodat bestaande HTML niet breekt */
.bk-mascot::before {
content: none;
}
/* Juich-variant (celebration-scherm) */
.bk-mascot-juich {
background-image: url('/assets/img/mascotte-juich.svg');
}
/* Grote variant — welkomst-/beloningsscherm */
.bk-mascot-lg {
width: 120px;
height: 132px;
}
/* Mascotte met toespraakvak */
.bk-mascot-speech {
display: flex;
align-items: flex-start;
gap: var(--bk-space-4);
}
.bk-mascot-bubble {
background: var(--bk-surface);
border-radius: var(--bk-r-lg);
border-bottom-left-radius: 4px;
padding: var(--bk-space-3) var(--bk-space-4);
box-shadow: var(--bk-shadow-sm);
font-family: var(--bk-font-display);
font-size: 16px;
font-weight: 600;
color: var(--bk-ink);
position: relative;
flex: 1;
}
/* ============================================================
13. TOP-BARS
============================================================ */
/*
* Kind-topbar: avatar + naam + punten + streak + "stop"-knop
* .bk-topbar → gebruikt in de kind-leeromgeving
*
* Ouder-topbar: logo + naam + uitloggen
* .bk-topbar-parent → gebruikt in het ouder-dashboard
*/
/* ---- Gedeelde basis ---- */
.bk-topbar,
.bk-topbar-parent {
position: sticky;
top: 0;
z-index: 100;
width: 100%;
display: flex;
align-items: center;
gap: var(--bk-space-3);
padding: var(--bk-space-3) var(--bk-space-5);
background: var(--bk-surface);
box-shadow: 0 2px 12px -4px rgba(60, 40, 100, .12);
}
/* ---- Kind-topbar ---- */
.bk-topbar {
background: linear-gradient(to right, var(--bk-primary-l), var(--bk-surface));
}
.bk-topbar__info {
display: flex;
align-items: center;
gap: var(--bk-space-3);
flex: 1;
min-width: 0;
}
.bk-topbar__name {
font-family: var(--bk-font-display);
font-size: 16px;
font-weight: 800;
color: var(--bk-ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bk-topbar__badges {
display: flex;
align-items: center;
gap: var(--bk-space-2);
flex-shrink: 0;
}
.bk-topbar__actions {
display: flex;
align-items: center;
gap: var(--bk-space-2);
flex-shrink: 0;
margin-left: auto;
}
.bk-topbar__stop {
flex-shrink: 0;
/* Gebruikt .bk-btn .bk-btn-ghost .bk-btn-sm */
}
/* Kindwissel — compacte icoon-knop (⇆), neemt minimale ruimte in de topbar */
.bk-topbar__wissel {
flex-shrink: 0;
padding-left: 10px;
padding-right: 10px;
font-size: 18px;
line-height: 1;
}
/* ---- Ouder-topbar ---- */
.bk-topbar-parent {
justify-content: space-between;
background: var(--bk-surface);
}
.bk-topbar-parent__logo {
font-family: var(--bk-font-display);
font-size: 20px;
font-weight: 800;
color: var(--bk-ink);
text-decoration: none;
display: flex;
align-items: center;
gap: var(--bk-space-2);
}
.bk-topbar-parent__logo .logo-brein { color: var(--bk-primary); }
.bk-topbar-parent__logo .logo-kid { color: var(--bk-pink); }
.bk-topbar-parent__right {
display: flex;
align-items: center;
gap: var(--bk-space-3);
}
.bk-topbar-parent__name {
font-size: 14px;
font-weight: 600;
color: var(--bk-ink-2);
}
/* ============================================================
14. LAYOUT-HELPERS
============================================================ */
/*
* .bk-wrap — horizontale max-breedte container
* .bk-screen — volledig scherm voor kind (één taak per scherm)
* .bk-stack — verticale flex-kolom
* .bk-row — horizontale flex-rij
*/
.bk-wrap {
width: 100%;
max-width: 720px;
margin: 0 auto;
padding: 0 var(--bk-space-5);
}
/* Smal (auth-flows, PIN-schermen) — zelfstandig gecentreerd */
.bk-wrap-sm {
width: 100%;
max-width: 440px;
margin: 0 auto;
padding: 0 var(--bk-space-5);
}
/* Breed (ouder-dashboard) — zelfstandig gecentreerd */
.bk-wrap-lg {
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0 var(--bk-space-5);
}
/* Volledig-scherm kind-oefening: centreer alles vertikaal */
.bk-screen {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: calc(100dvh - 72px); /* min topbar-hoogte */
padding: var(--bk-space-5) var(--bk-space-5) var(--bk-space-7);
gap: var(--bk-space-5);
text-align: center;
}
.bk-stack {
display: flex;
flex-direction: column;
gap: var(--bk-space-4);
}
.bk-stack-sm { gap: var(--bk-space-2); }
.bk-stack-lg { gap: var(--bk-space-6); }
.bk-row {
display: flex;
align-items: center;
gap: var(--bk-space-3);
}
.bk-row-between { justify-content: space-between; }
.bk-row-center { justify-content: center; }
/* Opvulling */
.bk-spacer { flex: 1; }
/* Verbergen voor schermlezer maar wel zichtbaar */
.bk-sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* ============================================================
15. FEEDBACK-BERICHTEN
============================================================ */
/*
* .bk-alert — inline feedbackbalk.
* Modifiers: .bk-alert-success / .bk-alert-error / .bk-alert-info / .bk-alert-warn
*/
.bk-alert {
padding: var(--bk-space-3) var(--bk-space-4);
border-radius: var(--bk-r-md);
font-size: 14px;
font-weight: 600;
display: flex;
align-items: flex-start;
gap: var(--bk-space-2);
line-height: 1.4;
}
.bk-alert-success {
background: var(--bk-green-l);
color: var(--bk-green-d);
}
.bk-alert-error {
background: var(--bk-red-l);
color: var(--bk-red);
}
.bk-alert-info {
background: var(--bk-primary-l);
color: var(--bk-primary-d);
}
.bk-alert-warn {
background: var(--bk-accent-l);
color: var(--bk-accent-d);
}
/* ============================================================
16. CHIP / BADGE
============================================================ */
/*
* .bk-chip — kleine ronde etiket (vak-label, leeftijdspil, status)
*/
.bk-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 12px;
border-radius: var(--bk-r-pill);
font-size: 12px;
font-weight: 700;
font-family: var(--bk-font-display);
background: var(--bk-bg);
color: var(--bk-ink-2);
border: 1px solid rgba(28, 35, 48, .1);
white-space: nowrap;
}
.bk-chip-primary { background: var(--bk-primary-l); color: var(--bk-primary); border-color: transparent; }
.bk-chip-accent { background: var(--bk-accent-l); color: var(--bk-accent-d); border-color: transparent; }
.bk-chip-pink { background: var(--bk-pink-l); color: var(--bk-pink-d); border-color: transparent; }
.bk-chip-green { background: var(--bk-green-l); color: var(--bk-green-d); border-color: transparent; }
/* ============================================================
17. PROGRESS-BAR
============================================================ */
/*
* .bk-progress — voortgangsbalk binnen een oefening-sessie.
* Gebruik:
*/
.bk-progress {
width: 100%;
height: 12px;
background: rgba(28, 35, 48, .1);
border-radius: var(--bk-r-pill);
overflow: hidden;
}
.bk-progress-fill {
height: 100%;
width: var(--pct, 0%);
background: linear-gradient(to right, var(--bk-primary), var(--bk-pink));
border-radius: var(--bk-r-pill);
transition: width 500ms ease;
}
/* Dun (topbar-variant) */
.bk-progress-thin { height: 6px; }
/* ============================================================
18. OUDER-DASHBOARD REGISTER
============================================================ */
/*
* Rustiger, warm-zakelijk — zelfde palet maar minder uitgesproken speelsheid.
* Klassen beginnen met .bk-dash-*
*/
/* Pagina-omhulsel — naast topbar */
.bk-dash-layout {
display: flex;
flex-direction: column;
gap: var(--bk-space-6);
width: 100%;
max-width: 1080px;
margin: 0 auto;
padding-left: var(--bk-space-5);
padding-right: var(--bk-space-5);
}
/* Sectie-titel boven een blok */
.bk-dash-section-title {
font-family: var(--bk-font-display);
font-size: 13px;
font-weight: 800;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--bk-ink-3);
margin-bottom: var(--bk-space-3);
}
/* Statistiek-kaart (punten, oefeningen, streak) */
.bk-dash-stat {
background: var(--bk-surface);
border-radius: var(--bk-r-md);
padding: var(--bk-space-4) var(--bk-space-5);
display: flex;
flex-direction: column;
gap: var(--bk-space-1);
box-shadow: var(--bk-shadow-sm);
}
.bk-dash-stat__value {
font-family: var(--bk-font-display);
font-size: 32px;
font-weight: 800;
color: var(--bk-primary);
line-height: 1;
}
.bk-dash-stat__label {
font-size: 13px;
color: var(--bk-ink-2);
font-weight: 600;
}
/* Statistieken-raster */
.bk-dash-stats {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: var(--bk-space-3);
}
/* Kind-kaart in het dashboard */
.bk-dash-child-card {
background: var(--bk-surface);
border-radius: var(--bk-r-lg);
padding: var(--bk-space-5);
box-shadow: var(--bk-shadow-sm);
display: flex;
flex-direction: column;
gap: var(--bk-space-4);
border: 2px solid transparent;
transition: border-color var(--bk-dur) ease;
}
.bk-dash-child-card:hover {
border-color: var(--bk-primary-l);
}
.bk-dash-child-card__header {
display: flex;
align-items: center;
gap: var(--bk-space-3);
}
.bk-dash-child-card__name {
font-family: var(--bk-font-display);
font-size: 18px;
font-weight: 800;
color: var(--bk-ink);
}
.bk-dash-child-card__level {
font-size: 13px;
color: var(--bk-ink-2);
}
/* Abonnement-status balk (legacy — behouden voor compatibiliteit) */
.bk-dash-sub {
display: block; /* geen eigen achtergrond — de statuskaart binnenin styled zichzelf */
}
.bk-dash-sub__label {
font-family: var(--bk-font-display);
font-size: 15px;
font-weight: 700;
color: var(--bk-primary);
}
.bk-dash-sub__trial {
font-size: 13px;
color: var(--bk-primary-d);
}
/* ----------------------------------------------------------
DASHBOARD UITBREIDINGEN — warm-zakelijk (2026-06-09)
---------------------------------------------------------- */
/* Welkomst-header */
.bk-dash-welcome {
display: flex;
align-items: center;
gap: var(--bk-space-5);
margin-bottom: var(--bk-space-6);
flex-wrap: wrap;
}
.bk-dash-welcome__text h1 {
font-family: var(--bk-font-display);
font-size: clamp(24px, 5vw, 36px);
font-weight: 800;
color: var(--bk-ink);
line-height: 1.15;
margin-bottom: var(--bk-space-1);
}
.bk-dash-welcome__text h1 .bk-name-accent {
color: var(--bk-primary);
}
.bk-dash-welcome__sub {
font-size: 15px;
color: var(--bk-ink-2);
line-height: 1.5;
}
/* Statuskaart abonnement */
.bk-dash-status-card {
border-radius: var(--bk-r-lg);
padding: var(--bk-space-5) var(--bk-space-6);
display: flex;
align-items: center;
gap: var(--bk-space-5);
flex-wrap: wrap;
margin-bottom: var(--bk-space-6);
box-shadow: var(--bk-shadow-sm);
border: 1.5px solid transparent;
}
.bk-dash-status-card--trial {
background: var(--bk-accent-l);
border-color: var(--bk-accent);
}
.bk-dash-status-card--active {
background: var(--bk-green-l);
border-color: var(--bk-green);
}
.bk-dash-status-card--expired {
background: var(--bk-red-l);
border-color: var(--bk-red);
}
.bk-dash-status-card__icon {
font-size: 32px;
line-height: 1;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
}
.bk-dash-status-card--trial .bk-dash-status-card__icon { background: var(--bk-accent-l); }
.bk-dash-status-card--active .bk-dash-status-card__icon { background: var(--bk-green-l); }
.bk-dash-status-card--expired .bk-dash-status-card__icon { background: var(--bk-red-l); }
.bk-dash-status-card__body {
flex: 1;
min-width: 180px;
}
.bk-dash-status-card__title {
font-family: var(--bk-font-display);
font-size: 16px;
font-weight: 800;
line-height: 1.2;
margin-bottom: var(--bk-space-1);
}
.bk-dash-status-card--trial .bk-dash-status-card__title { color: var(--bk-accent-d); }
.bk-dash-status-card--active .bk-dash-status-card__title { color: var(--bk-green-d); }
.bk-dash-status-card--expired .bk-dash-status-card__title { color: var(--bk-red); }
.bk-dash-status-card__desc {
font-size: 13px;
color: var(--bk-ink-2);
}
/* Voortgangsbalkje voor proef-dagen */
.bk-dash-trial-progress {
margin-top: var(--bk-space-2);
height: 6px;
border-radius: var(--bk-r-pill);
background: rgba(208, 138, 26, .2);
overflow: hidden;
}
.bk-dash-trial-progress__fill {
height: 100%;
border-radius: var(--bk-r-pill);
background: var(--bk-accent);
transition: width 600ms ease;
}
/* Sectie-kop rij */
.bk-dash-section-row {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--bk-space-3);
margin-bottom: var(--bk-space-4);
}
/* Kindkaarten grid */
.bk-dash-children-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--bk-space-4);
}
/* Kindkaart — verbeterd */
.bk-dash-child-card-v2 {
background: var(--bk-surface);
border-radius: var(--bk-r-lg);
padding: var(--bk-space-5);
box-shadow: var(--bk-shadow-sm);
display: flex;
flex-direction: column;
gap: var(--bk-space-4);
border: 2px solid transparent;
transition:
border-color var(--bk-dur) ease,
transform var(--bk-dur) var(--bk-ease),
box-shadow var(--bk-dur) ease;
position: relative;
overflow: hidden;
}
/* Kleurstrook linksboven per avatar-kleur */
.bk-dash-child-card-v2::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: var(--_card-accent, var(--bk-primary));
border-radius: var(--bk-r-lg) var(--bk-r-lg) 0 0;
}
.bk-dash-child-card-v2:hover {
border-color: rgba(94, 58, 169, .18);
transform: translateY(-3px);
box-shadow: var(--bk-shadow-md);
}
.bk-dash-child-card-v2:focus-within {
border-color: var(--bk-primary);
box-shadow: var(--bk-focus-ring);
}
/* Kleurvarianten voor de accentstreep */
.bk-dash-child-card-v2.bk-card-accent-1 { --_card-accent: var(--bk-primary); }
.bk-dash-child-card-v2.bk-card-accent-2 { --_card-accent: var(--bk-pink); }
.bk-dash-child-card-v2.bk-card-accent-3 { --_card-accent: var(--bk-accent); }
.bk-dash-child-card-v2.bk-card-accent-4 { --_card-accent: var(--bk-green); }
.bk-dash-child-card-v2.bk-card-accent-5 { --_card-accent: #4a90d9; }
.bk-dash-child-card-v2__header {
display: flex;
align-items: center;
gap: var(--bk-space-4);
}
.bk-dash-child-card-v2__info {
flex: 1;
min-width: 0;
}
.bk-dash-child-card-v2__name {
font-family: var(--bk-font-display);
font-size: 18px;
font-weight: 800;
color: var(--bk-ink);
line-height: 1.2;
margin-bottom: var(--bk-space-1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Statistieken-rij in kindkaart */
.bk-dash-child-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--bk-space-2);
}
.bk-dash-child-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
background: var(--bk-bg);
border-radius: var(--bk-r-md);
padding: var(--bk-space-2) var(--bk-space-1);
}
.bk-dash-child-stat__icon {
font-size: 16px;
line-height: 1;
}
.bk-dash-child-stat__value {
font-family: var(--bk-font-display);
font-size: 17px;
font-weight: 800;
color: var(--bk-primary);
line-height: 1.1;
}
.bk-dash-child-stat__label {
font-size: 11px;
color: var(--bk-ink-3);
font-weight: 600;
text-align: center;
line-height: 1.2;
}
/* Lege-staat kindprofiel */
.bk-dash-empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--bk-space-4);
padding: var(--bk-space-7) var(--bk-space-5);
background: var(--bk-surface);
border-radius: var(--bk-r-xl);
box-shadow: var(--bk-shadow-sm);
border: 2px dashed rgba(94, 58, 169, .2);
}
.bk-dash-empty__title {
font-family: var(--bk-font-display);
font-size: 20px;
font-weight: 800;
color: var(--bk-ink);
}
.bk-dash-empty__desc {
font-size: 14px;
color: var(--bk-ink-2);
max-width: 320px;
line-height: 1.6;
}
/* Instellingen-tegels */
.bk-dash-settings-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--bk-space-4);
}
.bk-dash-settings-tile {
display: flex;
align-items: center;
gap: var(--bk-space-4);
background: var(--bk-surface);
border-radius: var(--bk-r-lg);
padding: var(--bk-space-4) var(--bk-space-5);
box-shadow: var(--bk-shadow-sm);
text-decoration: none;
border: 1.5px solid transparent;
transition:
border-color var(--bk-dur) ease,
transform var(--bk-dur) var(--bk-ease),
box-shadow var(--bk-dur) ease;
cursor: pointer;
color: var(--bk-ink);
}
.bk-dash-settings-tile:hover {
border-color: var(--bk-primary-l);
transform: translateY(-2px);
box-shadow: var(--bk-shadow-md);
text-decoration: none;
}
.bk-dash-settings-tile:focus-visible {
outline: none;
box-shadow: var(--bk-focus-ring);
}
.bk-dash-settings-tile__icon {
width: 44px;
height: 44px;
min-width: 44px;
border-radius: var(--bk-r-md);
background: var(--bk-primary-l);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.bk-dash-settings-tile:nth-child(2) .bk-dash-settings-tile__icon {
background: var(--bk-accent-l);
}
.bk-dash-settings-tile__body {
flex: 1;
min-width: 0;
}
.bk-dash-settings-tile__title {
font-family: var(--bk-font-display);
font-size: 14px;
font-weight: 800;
color: var(--bk-ink);
line-height: 1.2;
}
.bk-dash-settings-tile__desc {
font-size: 12px;
color: var(--bk-ink-3);
margin-top: 2px;
}
.bk-dash-settings-tile__arrow {
font-size: 18px;
color: var(--bk-ink-3);
flex-shrink: 0;
}
/* Niet-geverifieerd banner — rustiger */
.bk-dash-verify-banner {
display: flex;
align-items: center;
gap: var(--bk-space-4);
flex-wrap: wrap;
background: var(--bk-accent-l);
border: 1.5px solid var(--bk-accent);
border-radius: var(--bk-r-md);
padding: var(--bk-space-3) var(--bk-space-5);
margin-bottom: var(--bk-space-5);
font-size: 14px;
color: var(--bk-accent-d);
}
.bk-dash-verify-banner__icon {
font-size: 20px;
flex-shrink: 0;
}
.bk-dash-verify-banner__text {
flex: 1;
min-width: 200px;
font-weight: 600;
line-height: 1.45;
}
.bk-dash-verify-banner__ok {
font-weight: 800;
color: var(--bk-green);
}
.bk-dash-verify-banner__err {
font-size: 12px;
color: var(--bk-red);
font-weight: 700;
}
/* Responsive aanpassingen dashboard */
@media (min-width: 480px) {
.bk-dash-children-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 768px) {
.bk-dash-children-grid {
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.bk-dash-child-stats {
gap: var(--bk-space-3);
}
.bk-dash-child-stat {
padding: var(--bk-space-3) var(--bk-space-2);
}
.bk-dash-child-stat__value {
font-size: 20px;
}
.bk-dash-child-stat__label {
font-size: 12px;
}
}
@media (max-width: 479px) {
.bk-dash-settings-grid {
grid-template-columns: 1fr;
}
.bk-dash-status-card {
padding: var(--bk-space-4) var(--bk-space-5);
}
}
/* ============================================================
19. ANIMATIES & REDUCED-MOTION
============================================================ */
@keyframes bk-pop {
0% { transform: scale(1); }
40% { transform: scale(1.08); }
100% { transform: scale(1); }
}
@keyframes bk-shake {
0% { transform: translateX(0); }
20% { transform: translateX(-8px); }
40% { transform: translateX(8px); }
60% { transform: translateX(-6px); }
80% { transform: translateX(6px); }
100% { transform: translateX(0); }
}
@keyframes bk-star-in {
0% { transform: scale(0) rotate(-20deg); opacity: 0; }
60% { transform: scale(1.25) rotate(5deg); }
100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes bk-float {
0% { transform: translateY(0); }
50% { transform: translateY(-8px); }
100% { transform: translateY(0); }
}
@keyframes bk-fade-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
/* Klasse voor oefening-introtransitie */
.bk-fade-in {
animation: bk-fade-in 250ms ease both;
}
/* Respecteer reduced-motion — schakel alle animaties uit */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
.bk-mascot {
animation: none;
}
}
/* ============================================================
20. RESPONSIVE BREAKPOINTS
============================================================ */
/*
* Mobiel-first: alle styles hierboven zijn voor de kleinste schermen.
* Breakpoints:
* sm ≥ 480px — grote telefoon
* md ≥ 768px — tablet (primaire kind-omgeving)
* lg ≥ 1024px — desktop (ouder-dashboard)
*/
/* sm — grote telefoon */
@media (min-width: 480px) {
.bk-options-grid {
/* Twee opties naast elkaar als ze kort zijn */
grid-template-columns: repeat(2, 1fr);
}
/* Precies 3 opties: niet 2+1 (lelijke losse onderaan) maar netjes gestapeld
op telefoon; vanaf tablet komen ze op één rij (zie md-breakpoint). */
.bk-options-grid:has(> .bk-option:nth-child(3)):not(:has(> .bk-option:nth-child(4))) {
grid-template-columns: 1fr;
}
.bk-pin-key {
height: 80px;
font-size: 30px;
}
}
/* md — tablet */
@media (min-width: 768px) {
.bk-wrap { padding: 0 var(--bk-space-6); }
.bk-screen {
padding: var(--bk-space-6) var(--bk-space-6) var(--bk-space-8);
gap: var(--bk-space-6);
}
.bk-card { padding: var(--bk-space-7); }
.bk-topbar,
.bk-topbar-parent {
padding: var(--bk-space-4) var(--bk-space-6);
}
/* Opties-grid 2 kolommen op tablet standaard */
.bk-options-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--bk-space-4);
}
/* Bij 4 opties: 2×2 grid */
.bk-options-grid:has(> .bk-option:nth-child(4)) {
grid-template-columns: repeat(2, 1fr);
}
/* Bij precies 3 opties: één rij van 3 (i.p.v. 2+1) */
.bk-options-grid:has(> .bk-option:nth-child(3)):not(:has(> .bk-option:nth-child(4))) {
grid-template-columns: repeat(3, 1fr);
}
.bk-mascot-lg {
width: 140px;
height: 140px;
}
.bk-dash-stats {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
}
/* lg — desktop */
@media (min-width: 1024px) {
.bk-wrap-lg { padding: 0 var(--bk-space-7); }
.bk-options-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Hoog-contrast hulp: zorg dat fokus altijd zichtbaar is */
@media (forced-colors: active) {
.bk-btn,
.bk-option,
.bk-pin-key,
.bk-input {
border: 2px solid ButtonText;
}
:focus-visible {
outline: 3px solid Highlight;
}
}
/* ============================================================
21. LANDING-PAGINA (/index.php)
============================================================ */
/* ---- Nav ---- */
.lp-nav {
position: sticky;
top: 0;
z-index: 100;
background: rgba(246, 244, 239, .94);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(94, 58, 169, .10);
}
.lp-nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px var(--bk-space-5);
max-width: 960px;
margin: 0 auto;
}
.lp-nav__logo {
font-family: var(--bk-font-display);
font-size: 24px;
font-weight: 900;
text-decoration: none;
letter-spacing: -.02em;
display: flex;
align-items: center;
gap: 6px;
}
.lp-nav__logo-mascot {
width: 36px;
height: 40px;
background: url('/assets/img/mascotte.svg') no-repeat center/contain;
display: inline-block;
flex-shrink: 0;
}
.lp-nav__logo .logo-brein { color: var(--bk-primary); }
.lp-nav__logo .logo-kid { color: var(--bk-pink); }
.lp-nav__btns {
display: flex;
gap: 8px;
align-items: center;
flex-shrink: 0;
}
.lp-nav__btns .bk-btn { white-space: nowrap; } /* knoptekst nooit over twee regels */
.lp-nav__inner { position: relative; }
.lp-nav__toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.lp-nav__burger { display: none; }
@media (max-width: 640px) {
/* Hamburger tonen, knoppen als uitklap-menu */
.lp-nav__burger {
display: flex; flex-direction: column; justify-content: center; gap: 5px;
width: 44px; height: 44px; padding: 11px; cursor: pointer; border-radius: 10px; flex-shrink: 0;
}
.lp-nav__burger span { display: block; height: 3px; border-radius: 2px; background: var(--bk-primary); transition: transform .2s ease, opacity .2s ease; }
.lp-nav__btns {
position: absolute; top: calc(100% + 6px); right: 12px; left: 12px;
flex-direction: column; align-items: stretch; gap: 8px;
background: #fff; border: 1px solid rgba(94, 58, 169, .15); border-radius: 14px;
padding: 12px; box-shadow: 0 10px 28px rgba(0, 0, 0, .14); display: none;
}
.lp-nav__toggle:checked ~ .lp-nav__btns { display: flex; }
.lp-nav__btns .bk-btn { width: 100%; font-size: 15px; padding: 12px; }
/* hamburger → kruisje wanneer open */
.lp-nav__toggle:checked ~ .lp-nav__burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.lp-nav__toggle:checked ~ .lp-nav__burger span:nth-child(2) { opacity: 0; }
.lp-nav__toggle:checked ~ .lp-nav__burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.lp-nav__toggle:focus-visible ~ .lp-nav__burger { outline: 2px solid var(--bk-primary); outline-offset: 2px; }
}
@media (max-width: 440px) {
.lp-nav__inner { padding: 10px 14px; }
.lp-nav__logo { font-size: 19px; }
.lp-nav__logo-mascot { width: 28px; height: 31px; }
}
/* ---- Hero ---- */
.lp-hero {
padding: 56px 0 48px;
position: relative;
overflow: hidden;
text-align: center;
}
/* Speelse blob-achtergrond in de hero */
.lp-hero__bg {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 0;
}
.lp-hero__bg-blob {
position: absolute;
border-radius: 50%;
filter: blur(60px);
opacity: .55;
}
.lp-hero__bg-blob--1 {
width: 340px; height: 280px;
top: -80px; left: -80px;
background: radial-gradient(circle, rgba(94,58,169,.18), transparent 70%);
}
.lp-hero__bg-blob--2 {
width: 300px; height: 300px;
top: -60px; right: -60px;
background: radial-gradient(circle, rgba(232,90,140,.16), transparent 70%);
}
.lp-hero__bg-blob--3 {
width: 260px; height: 200px;
bottom: -40px; left: 30%;
background: radial-gradient(circle, rgba(240,169,59,.14), transparent 70%);
}
.lp-hero__inner {
position: relative;
z-index: 1;
max-width: 720px;
margin: 0 auto;
padding: 0 var(--bk-space-5);
}
/* Proef-badge */
.lp-hero__trial-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--bk-accent);
color: var(--bk-ink);
font-family: var(--bk-font-display);
font-size: 12px;
font-weight: 800;
padding: 6px 16px;
border-radius: var(--bk-r-pill);
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: 24px;
box-shadow: 0 3px 12px -3px rgba(240,169,59,.4);
}
/* De mascotte in de hero — groot, zweeft */
.lp-hero__mascot {
width: 150px;
height: 165px;
background: url('/assets/img/mascotte.svg') no-repeat center bottom / contain;
margin: 0 auto 16px;
animation: bk-float 3.5s ease-in-out infinite;
}
/* Zodra de Lottie geladen is: statische SVG + CSS-zweven uit (Lottie zweeft zelf) */
.lp-hero__mascot.is-lottie { background: none; animation: none; }
.lp-hero__mascot svg { display: block; width: 100%; height: 100%; }
.lp-hero h1 {
font-size: clamp(34px, 7vw, 60px);
font-weight: 900;
line-height: 1.08;
letter-spacing: -.03em;
color: var(--bk-ink);
margin-bottom: 16px;
}
.lp-hero h1 .lp-accent-pink { color: var(--bk-pink); }
.lp-hero h1 .lp-accent-purple { color: var(--bk-primary); }
.lp-hero__sub {
font-size: clamp(16px, 2.5vw, 19px);
color: var(--bk-ink-2);
max-width: 520px;
margin: 0 auto 28px;
line-height: 1.6;
}
.lp-hero__cta {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.lp-hero__fine {
font-size: 13px;
color: var(--bk-ink-3);
}
/* ---- Leeftijd-pills ---- */
.lp-ages {
padding: 36px 0;
background: var(--bk-surface);
}
.lp-ages__inner {
max-width: 720px;
margin: 0 auto;
padding: 0 var(--bk-space-5);
}
.lp-ages__pills {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin-top: 20px;
}
.lp-age-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border-radius: var(--bk-r-pill);
font-family: var(--bk-font-display);
font-size: 14px;
font-weight: 700;
background: var(--bk-bg);
border: 2px solid transparent;
color: var(--bk-ink);
cursor: default;
transition: transform var(--bk-dur) var(--bk-ease), box-shadow var(--bk-dur) ease;
box-shadow: var(--bk-shadow-sm);
}
.lp-age-pill:hover {
transform: translateY(-2px);
box-shadow: var(--bk-shadow-md);
}
.lp-age-pill--peuter { border-color: var(--bk-pink); background: var(--bk-pink-l); }
.lp-age-pill--kleuter { border-color: var(--bk-accent); background: var(--bk-accent-l); }
.lp-age-pill--onder { border-color: var(--bk-green); background: var(--bk-green-l); }
.lp-age-pill--boven { border-color: var(--bk-primary); background: var(--bk-primary-l); }
/* ---- Zo werkt het ---- */
.lp-how {
padding: 64px 0;
background: var(--bk-bg);
}
.lp-how__inner {
max-width: 840px;
margin: 0 auto;
padding: 0 var(--bk-space-5);
}
.lp-section-eyebrow {
display: block;
font-family: var(--bk-font-display);
font-size: 12px;
font-weight: 800;
letter-spacing: .10em;
text-transform: uppercase;
color: var(--bk-primary);
margin-bottom: 8px;
}
.lp-section-title {
font-size: clamp(22px, 4vw, 32px);
font-weight: 900;
letter-spacing: -.02em;
color: var(--bk-ink);
margin-bottom: 36px;
}
.lp-steps {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
.lp-step {
display: flex;
align-items: flex-start;
gap: 20px;
background: var(--bk-surface);
border-radius: var(--bk-r-lg);
padding: 28px 24px;
box-shadow: var(--bk-shadow-sm);
transition: transform var(--bk-dur) var(--bk-ease), box-shadow var(--bk-dur) ease;
}
.lp-step:hover {
transform: translateY(-2px);
box-shadow: var(--bk-shadow-md);
}
.lp-step__num {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
min-width: 48px;
border-radius: 50%;
background: var(--bk-primary);
color: #fff;
font-family: var(--bk-font-display);
font-size: 20px;
font-weight: 900;
}
.lp-step__num--2 { background: var(--bk-pink); }
.lp-step__num--3 { background: var(--bk-green); }
.lp-step__body h3 {
font-size: 17px;
font-weight: 800;
margin-bottom: 6px;
}
.lp-step__body p {
font-size: 14px;
color: var(--bk-ink-2);
line-height: 1.55;
margin: 0;
}
/* ---- Gamification ---- */
.lp-gamify {
padding: 64px 0;
background: var(--bk-surface);
}
.lp-gamify__inner {
max-width: 840px;
margin: 0 auto;
padding: 0 var(--bk-space-5);
}
.lp-gamify-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 32px;
}
.lp-gamify-card {
background: var(--bk-bg);
border-radius: var(--bk-r-lg);
padding: 28px 20px;
text-align: center;
border: 2px solid transparent;
transition: transform var(--bk-dur) var(--bk-ease), box-shadow var(--bk-dur) ease;
}
.lp-gamify-card:hover {
transform: translateY(-3px);
box-shadow: var(--bk-shadow-md);
}
.lp-gamify-card--streak { border-color: var(--bk-accent); background: var(--bk-accent-l); }
.lp-gamify-card--star { border-color: var(--bk-pink); background: var(--bk-pink-l); }
.lp-gamify-card--family { border-color: var(--bk-green); background: var(--bk-green-l); }
.lp-gamify-card--dash { border-color: var(--bk-primary); background: var(--bk-primary-l); }
.lp-gamify-card__icon {
font-size: 44px;
display: block;
margin-bottom: 10px;
line-height: 1;
}
.lp-gamify-card strong {
font-family: var(--bk-font-display);
font-size: 15px;
font-weight: 800;
display: block;
margin-bottom: 6px;
color: var(--bk-ink);
}
.lp-gamify-card p {
font-size: 13px;
color: var(--bk-ink-2);
line-height: 1.5;
margin: 0;
}
/* Demo-badges in gamify-sectie */
.lp-demo-badges {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
margin: 28px 0 0;
}
.lp-demo-streak {
display: inline-flex;
align-items: center;
gap: 5px;
background: var(--bk-accent-l);
color: var(--bk-accent-d);
border-radius: var(--bk-r-pill);
font-family: var(--bk-font-display);
font-size: 16px;
font-weight: 800;
padding: 8px 18px;
}
.lp-demo-points {
display: inline-flex;
align-items: center;
gap: 5px;
background: var(--bk-primary-l);
color: var(--bk-primary);
border-radius: var(--bk-r-pill);
font-family: var(--bk-font-display);
font-size: 16px;
font-weight: 800;
padding: 8px 18px;
}
.lp-demo-badge {
display: inline-flex;
align-items: center;
gap: 5px;
background: var(--bk-pink-l);
color: var(--bk-pink-d);
border-radius: var(--bk-r-pill);
font-family: var(--bk-font-display);
font-size: 16px;
font-weight: 800;
padding: 8px 18px;
}
/* ---- Vertrouwen/ouders ---- */
.lp-trust {
padding: 64px 0;
background: var(--bk-bg);
}
.lp-trust__inner {
max-width: 840px;
margin: 0 auto;
padding: 0 var(--bk-space-5);
}
.lp-trust-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin-top: 32px;
}
.lp-trust-item {
display: flex;
align-items: flex-start;
gap: 14px;
background: var(--bk-surface);
border-radius: var(--bk-r-lg);
padding: 20px 18px;
box-shadow: var(--bk-shadow-sm);
}
.lp-trust-item__icon {
font-size: 28px;
flex-shrink: 0;
line-height: 1.2;
}
.lp-trust-item h3 {
font-size: 14px;
font-weight: 800;
margin-bottom: 4px;
color: var(--bk-ink);
}
.lp-trust-item p {
font-size: 13px;
color: var(--bk-ink-2);
line-height: 1.5;
margin: 0;
}
/* ---- Vakken-strook ---- */
.lp-subjects {
padding: 56px 0;
background: var(--bk-surface);
overflow: hidden;
}
.lp-subjects__inner {
max-width: 840px;
margin: 0 auto;
padding: 0 var(--bk-space-5);
}
.lp-subjects-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
margin-top: 24px;
}
.lp-subject-tile {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 18px 16px;
border-radius: var(--bk-r-lg);
font-family: var(--bk-font-display);
font-size: 13px;
font-weight: 700;
color: var(--bk-ink);
min-width: 88px;
text-align: center;
background: var(--bk-bg);
border: 2px solid transparent;
box-shadow: var(--bk-shadow-sm);
transition: transform var(--bk-dur) var(--bk-ease), box-shadow var(--bk-dur) ease;
}
.lp-subject-tile:hover {
transform: translateY(-3px) scale(1.03);
box-shadow: var(--bk-shadow-md);
}
.lp-subject-tile__icon { font-size: 30px; line-height: 1; }
.lp-subject-tile--kleuren { border-color: var(--bk-pink); background: var(--bk-pink-l); }
.lp-subject-tile--tellen { border-color: var(--bk-accent); background: var(--bk-accent-l); }
.lp-subject-tile--vormen { border-color: var(--bk-primary); background: var(--bk-primary-l); }
.lp-subject-tile--puzzels { border-color: var(--bk-green); background: var(--bk-green-l); }
.lp-subject-tile--meer {
border-style: dashed;
border-color: rgba(28,35,48,.18);
background: var(--bk-surface);
color: var(--bk-ink-3);
}
.lp-subject-tile--meer .lp-subject-tile__icon { font-size: 22px; }
/* ---- Prijs ---- */
.lp-price {
padding: 64px 0;
background: linear-gradient(160deg, var(--bk-primary-l) 0%, var(--bk-bg) 60%);
}
.lp-price__inner {
max-width: 680px;
margin: 0 auto;
padding: 0 var(--bk-space-5);
text-align: center;
}
.lp-price-cards {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin: 32px 0;
}
.lp-price-card {
background: var(--bk-surface);
border-radius: var(--bk-r-xl);
padding: 32px 28px;
text-align: left;
box-shadow: var(--bk-shadow-md);
border: 2px solid transparent;
position: relative;
overflow: hidden;
}
.lp-price-card::before {
content: '';
position: absolute;
top: -40px;
right: -40px;
width: 130px;
height: 130px;
border-radius: 50%;
background: linear-gradient(135deg, var(--bk-primary-l), var(--bk-pink-l));
opacity: .5;
pointer-events: none;
}
.lp-price-card--featured {
background: var(--bk-primary);
color: #fff;
border-color: var(--bk-primary-d);
}
.lp-price-card--featured::before {
background: linear-gradient(135deg, rgba(255,255,255,.15), rgba(232,90,140,.3));
opacity: 1;
}
.lp-price-card__badge {
position: absolute;
top: 16px;
right: 16px;
background: var(--bk-accent);
color: var(--bk-ink);
font-family: var(--bk-font-display);
font-size: 11px;
font-weight: 800;
padding: 4px 12px;
border-radius: var(--bk-r-pill);
letter-spacing: .05em;
text-transform: uppercase;
}
.lp-price-card__label {
font-family: var(--bk-font-display);
font-size: 12px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--bk-primary);
margin-bottom: 8px;
}
.lp-price-card--featured .lp-price-card__label { color: var(--bk-accent); }
.lp-price-card__amount {
font-family: var(--bk-font-display);
font-size: 48px;
font-weight: 900;
line-height: 1;
margin-bottom: 4px;
color: var(--bk-ink);
}
.lp-price-card--featured .lp-price-card__amount { color: #fff; }
.lp-price-card__period {
font-size: 15px;
font-weight: 400;
opacity: .7;
}
.lp-price-card__list {
margin-top: 18px;
display: flex;
flex-direction: column;
gap: 8px;
list-style: none;
padding: 0;
}
.lp-price-card__list li {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--bk-ink-2);
}
.lp-price-card--featured .lp-price-card__list li { color: rgba(255,255,255,.88); }
.lp-price-card__list li::before {
content: '✓';
width: 20px;
height: 20px;
min-width: 20px;
border-radius: 50%;
background: var(--bk-green-l);
color: var(--bk-green);
font-size: 11px;
font-weight: 900;
display: inline-flex;
align-items: center;
justify-content: center;
}
.lp-price-card--featured .lp-price-card__list li::before {
background: rgba(255,255,255,.2);
color: #fff;
}
.lp-price__fine {
font-size: 13px;
color: var(--bk-ink-3);
margin-top: 12px;
}
/* ---- Footer-CTA ---- */
.lp-cta-bottom {
padding: 72px 0 56px;
background: var(--bk-bg);
text-align: center;
}
.lp-cta-bottom__inner {
max-width: 560px;
margin: 0 auto;
padding: 0 var(--bk-space-5);
}
.lp-cta-bottom__mascot {
width: 100px;
height: 110px;
background: url('/assets/img/mascotte-juich.svg') no-repeat center bottom / contain;
margin: 0 auto 16px;
animation: bk-float 3s ease-in-out infinite;
}
.lp-cta-bottom h2 {
font-size: clamp(24px, 4.5vw, 36px);
font-weight: 900;
margin-bottom: 12px;
letter-spacing: -.02em;
}
.lp-cta-bottom p {
font-size: 16px;
color: var(--bk-ink-2);
margin-bottom: 28px;
line-height: 1.6;
}
/* ---- Footer ---- */
.lp-footer {
background: var(--bk-surface);
border-top: 1px solid rgba(94,58,169,.10);
padding: 32px 0;
text-align: center;
}
.lp-footer__inner {
max-width: 720px;
margin: 0 auto;
padding: 0 var(--bk-space-5);
}
.lp-footer__logo {
font-family: var(--bk-font-display);
font-size: 20px;
font-weight: 900;
letter-spacing: -.02em;
margin-bottom: 8px;
}
.lp-footer__logo .logo-brein { color: var(--bk-primary); }
.lp-footer__logo .logo-kid { color: var(--bk-pink); }
.lp-footer p {
font-size: 13px;
color: var(--bk-ink-3);
line-height: 1.8;
}
.lp-footer a { color: var(--bk-primary); }
/* ---- Hero: sparkles & stats ---- */
.lp-hero__sparkle {
position: absolute;
font-size: 20px;
opacity: .55;
pointer-events: none;
animation: bk-float 4s ease-in-out infinite;
user-select: none;
}
.lp-hero__sparkle--a { top: 14%; left: 8%; font-size: 22px; animation-duration: 3.8s; animation-delay: 0s; }
.lp-hero__sparkle--b { top: 22%; right: 7%; font-size: 18px; animation-duration: 5.1s; animation-delay: .7s; }
.lp-hero__sparkle--c { bottom: 18%; left: 6%; font-size: 24px; animation-duration: 4.4s; animation-delay: 1.2s; }
.lp-hero__sparkle--d { bottom: 24%; right: 9%; font-size: 16px; animation-duration: 3.6s; animation-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
.lp-hero__sparkle { animation: none; }
}
/* Grote CTA-knop hero */
.lp-hero__cta-main {
font-size: 18px;
padding: 18px 40px;
box-shadow: 0 8px 28px -6px rgba(94, 58, 169, .45);
}
.lp-hero__cta-main:hover {
transform: translateY(-2px) scale(1.02);
}
/* Login-link under CTA */
.lp-hero__login-link {
display: inline-block;
margin-top: 10px;
font-size: 14px;
color: var(--bk-ink-2);
text-decoration: none;
}
.lp-hero__login-link:hover { color: var(--bk-primary); text-decoration: underline; }
/* Stat-strip */
.lp-hero__stats {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0;
margin-top: 32px;
background: var(--bk-surface);
border-radius: var(--bk-r-xl);
padding: 16px 8px;
box-shadow: var(--bk-shadow-sm);
max-width: 580px;
margin-left: auto;
margin-right: auto;
}
.lp-hero__stat {
display: flex;
flex-direction: column;
align-items: center;
padding: 6px 20px;
gap: 2px;
}
.lp-hero__stat-num {
font-family: var(--bk-font-display);
font-size: 22px;
font-weight: 900;
color: var(--bk-primary);
line-height: 1.1;
}
.lp-hero__stat-lbl {
font-size: 11px;
font-weight: 700;
color: var(--bk-ink-3);
text-transform: uppercase;
letter-spacing: .06em;
}
.lp-hero__stat-divider {
width: 1px;
height: 36px;
background: rgba(28, 35, 48, .1);
flex-shrink: 0;
}
/* Ages sub-tekst */
.lp-ages__sub {
font-size: 15px;
color: var(--bk-ink-2);
max-width: 500px;
margin: 12px auto 0;
line-height: 1.6;
}
/* ---- Vakken: 18-tegels grid ---- */
.lp-subjects-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
justify-items: stretch;
margin-top: 28px;
}
.lp-subjects__intro {
font-size: 15px;
color: var(--bk-ink-2);
max-width: 520px;
margin: 0 auto 4px;
line-height: 1.6;
}
.lp-subjects__note {
margin-top: 20px;
font-size: 13px;
color: var(--bk-ink-3);
}
/* Subject-tile kleur-varianten — nieuw */
.lp-subject-tile--puzzel { border-color: var(--bk-green); background: var(--bk-green-l); }
.lp-subject-tile--taal { border-color: var(--bk-primary); background: var(--bk-primary-l); }
.lp-subject-tile--rekenen { border-color: var(--bk-accent); background: var(--bk-accent-l); }
.lp-subject-tile--logica { border-color: var(--bk-pink); background: var(--bk-pink-l); }
.lp-subject-tile--wereld { border-color: #4a90d9; background: #e8f0fe; }
.lp-subject-tile--engels { border-color: #c0392b; background: #fdecea; }
.lp-subject-tile--natuur { border-color: var(--bk-green); background: var(--bk-green-l); }
.lp-subject-tile--muziek { border-color: var(--bk-primary); background: var(--bk-primary-l); }
.lp-subject-tile--geheugen { border-color: #9b59b6; background: #f5eef8; }
.lp-subject-tile--gevoelens { border-color: var(--bk-pink); background: var(--bk-pink-l); }
.lp-subject-tile--verkeer { border-color: #e67e22; background: #fef5e7; }
.lp-subject-tile--klok { border-color: #2980b9; background: #ebf5fb; }
.lp-subject-tile--geld { border-color: var(--bk-accent); background: var(--bk-accent-l); }
.lp-subject-tile--computers { border-color: #1abc9c; background: #e8f8f5; }
.lp-subject-tile--kunst { border-color: var(--bk-pink); background: var(--bk-pink-l); }
/* ---- How CTA ---- */
.lp-how__cta {
margin-top: 36px;
}
/* ---- Gamify: 6-kaarts grid, sub-tekst, extra tile-varianten ---- */
.lp-gamify__sub {
font-size: 15px;
color: var(--bk-ink-2);
max-width: 520px;
margin: 0 auto;
line-height: 1.6;
}
.lp-gamify-card--shop { border-color: #9b59b6; background: #f5eef8; }
.lp-gamify-card--path { border-color: #1abc9c; background: #e8f8f5; }
/* Demo-badge groen variant */
.lp-demo-badge--green {
background: var(--bk-green-l);
color: var(--bk-green-d);
}
/* ---- Trust: 6-items grid ---- */
/* (bestaande .lp-trust-grid is 1fr 1fr, werkt ook voor 6 items) */
/* ---- Prijs: kaart maand-equiv ---- */
.lp-price-card__month-equiv {
font-size: 12px;
color: rgba(255,255,255,.75);
margin-top: 2px;
margin-bottom: 0;
}
/* ---- FAQ ---- */
.lp-faq {
padding: 64px 0;
background: var(--bk-surface);
}
.lp-faq__inner {
max-width: 720px;
margin: 0 auto;
padding: 0 var(--bk-space-5);
}
.lp-faq-list {
margin-top: 32px;
display: flex;
flex-direction: column;
gap: 10px;
}
.lp-faq-item {
background: var(--bk-bg);
border-radius: var(--bk-r-lg);
border: 1.5px solid rgba(94, 58, 169, .10);
overflow: hidden;
transition: border-color var(--bk-dur) ease;
}
.lp-faq-item[open] {
border-color: var(--bk-primary);
}
.lp-faq-item__q {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 18px 20px;
font-family: var(--bk-font-display);
font-size: 15px;
font-weight: 800;
color: var(--bk-ink);
cursor: pointer;
list-style: none;
line-height: 1.4;
user-select: none;
-webkit-user-select: none;
}
/* Verberg standaard details-driehoek */
.lp-faq-item__q::-webkit-details-marker { display: none; }
.lp-faq-item__q::marker { content: ''; }
/* Chevron */
.lp-faq-item__q::after {
content: '+';
font-size: 22px;
font-weight: 400;
color: var(--bk-primary);
flex-shrink: 0;
transition: transform var(--bk-dur) ease;
line-height: 1;
}
.lp-faq-item[open] .lp-faq-item__q::after {
content: '−';
}
.lp-faq-item__q:hover {
color: var(--bk-primary);
}
.lp-faq-item__q:focus-visible {
outline: none;
box-shadow: var(--bk-focus-ring);
}
.lp-faq-item__a {
padding: 0 20px 18px;
}
.lp-faq-item__a p {
font-size: 14px;
color: var(--bk-ink-2);
line-height: 1.65;
margin: 0;
}
/* ---- Footer-CTA login-link ---- */
.lp-cta-bottom__login {
display: inline-block;
margin-top: 14px;
font-size: 14px;
color: var(--bk-ink-2);
}
.lp-cta-bottom__login:hover { color: var(--bk-primary); text-decoration: underline; }
/* ---- Responsief landing ---- */
/* sm: groter dan 480px */
@media (min-width: 480px) {
.lp-hero__mascot {
width: 180px;
height: 198px;
}
.lp-price-cards {
grid-template-columns: 1fr 1fr;
}
.lp-trust-grid {
grid-template-columns: 1fr 1fr;
}
.lp-subjects-grid {
grid-template-columns: repeat(4, 1fr);
}
}
/* md: tablet */
@media (min-width: 768px) {
.lp-hero {
padding: 72px 0 60px;
}
.lp-hero__mascot {
width: 200px;
height: 220px;
}
.lp-steps {
grid-template-columns: repeat(3, 1fr);
}
.lp-gamify-grid {
grid-template-columns: repeat(3, 1fr);
}
.lp-trust-grid {
grid-template-columns: repeat(3, 1fr);
}
.lp-price-cards {
grid-template-columns: 1fr 1fr;
}
.lp-subjects-grid {
grid-template-columns: repeat(6, 1fr);
}
}
/* ============================================================
19b. KIND-STATS — ouder/kind.php voortgangspagina
============================================================ */
/* Terug-link */
.bk-kind-back {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--bk-primary);
font-family: var(--bk-font-display);
font-weight: 600;
font-size: 14px;
text-decoration: none;
margin-bottom: var(--bk-space-5);
border-radius: var(--bk-r-sm);
padding: 4px 0;
}
.bk-kind-back:hover { text-decoration: underline; }
.bk-kind-back:focus-visible { box-shadow: var(--bk-focus-ring); outline: none; }
/* Sektie-wrapper */
.bk-kind-section {
margin-top: var(--bk-space-7);
}
.bk-kind-empty-note {
color: var(--bk-ink-3);
font-size: 15px;
margin-top: 8px;
}
/* ── Kopblok ──────────────────────────────────────────────── */
.bk-kind-header {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--bk-space-4);
padding: var(--bk-space-5);
}
.bk-kind-header__avatar { flex-shrink: 0; }
.bk-kind-header__info {
flex: 1 1 140px;
display: flex;
flex-direction: column;
gap: 6px;
}
.bk-kind-header__name {
font-family: var(--bk-font-display);
font-size: 22px;
font-weight: 800;
color: var(--bk-ink);
margin: 0;
line-height: 1.2;
}
.bk-kind-header__stats {
display: flex;
gap: var(--bk-space-4);
flex-wrap: wrap;
margin-top: 4px;
}
/* ── Vakken-grid ──────────────────────────────────────────── */
.bk-kind-subjects-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--bk-space-3);
margin-top: var(--bk-space-4);
}
.bk-kind-subj-card {
background: var(--bk-surface);
border-radius: var(--bk-r-md);
padding: var(--bk-space-4);
box-shadow: var(--bk-shadow-sm);
border-left: 4px solid transparent;
}
.bk-kind-subj--strong { border-left-color: var(--bk-green); }
.bk-kind-subj--attention { border-left-color: var(--bk-accent); }
.bk-kind-subj--new { border-left-color: var(--bk-ink-3); }
.bk-kind-subj-card__top {
display: flex;
align-items: center;
gap: var(--bk-space-3);
margin-bottom: var(--bk-space-3);
}
.bk-kind-subj-card__icon {
width: 40px;
height: 40px;
border-radius: var(--bk-r-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.bk-kind-subj-card__meta {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.bk-kind-subj-card__title {
font-family: var(--bk-font-display);
font-weight: 700;
font-size: 15px;
color: var(--bk-ink);
}
.bk-kind-subj-card__status {
font-size: 12px;
font-weight: 600;
color: var(--bk-ink-3);
}
.bk-kind-subj--strong .bk-kind-subj-card__status { color: var(--bk-green-d); }
.bk-kind-subj--attention .bk-kind-subj-card__status { color: var(--bk-accent-d); }
.bk-kind-subj-card__stars { display: flex; gap: 2px; font-size: 16px; flex-shrink: 0; }
/* Voortgangsbalk in vakkenkaart */
.bk-kind-subj-bar {
width: 100%;
height: 8px;
background: rgba(28, 35, 48, .1);
border-radius: var(--bk-r-pill);
overflow: hidden;
}
.bk-kind-subj-bar__fill {
height: 100%;
border-radius: var(--bk-r-pill);
transition: width .4s var(--bk-ease);
}
.bk-kind-subj-card__counts {
font-size: 12px;
color: var(--bk-ink-3);
margin-top: 4px;
text-align: right;
}
/* ── Ster-icoon helpers ───────────────────────────────────── */
.bk-kind-star--on { color: var(--bk-accent); }
.bk-kind-star--off { color: rgba(28, 35, 48, .18); }
/* ── Week-vergelijking ────────────────────────────────────── */
.bk-kind-week-compare {
display: flex;
align-items: center;
gap: var(--bk-space-4);
background: var(--bk-surface);
border-radius: var(--bk-r-md);
padding: var(--bk-space-4) var(--bk-space-5);
box-shadow: var(--bk-shadow-sm);
margin-bottom: var(--bk-space-4);
width: fit-content;
}
.bk-kind-week-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.bk-kind-week-stat__value {
font-family: var(--bk-font-display);
font-size: 24px;
font-weight: 800;
color: var(--bk-ink);
line-height: 1;
}
.bk-kind-week-stat__label {
font-size: 12px;
color: var(--bk-ink-3);
font-weight: 600;
}
.bk-kind-trend {
font-size: 22px;
font-weight: 800;
line-height: 1;
}
.bk-kind-trend--up { color: var(--bk-green); }
.bk-kind-trend--down { color: var(--bk-accent-d); }
.bk-kind-trend--eq { color: var(--bk-ink-3); }
/* ── CSS-staafgrafiek ─────────────────────────────────────── */
.bk-kind-chart {
display: flex;
align-items: flex-end;
gap: 4px;
height: 96px; /* totale kaarth. incl label */
padding: 0 4px 0;
background: var(--bk-surface);
border-radius: var(--bk-r-md);
box-shadow: var(--bk-shadow-sm);
padding: var(--bk-space-3) var(--bk-space-4) var(--bk-space-2);
overflow: hidden;
}
.bk-kind-chart__col {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
min-width: 0;
}
.bk-kind-chart__bar-wrap {
flex: 1;
width: 100%;
display: flex;
align-items: flex-end;
}
.bk-kind-chart__bar {
width: 100%;
min-height: 2px;
border-radius: var(--bk-r-sm) var(--bk-r-sm) 0 0;
background: var(--bk-primary-l);
transition: height .3s ease;
}
.bk-kind-chart__col--today .bk-kind-chart__bar {
background: var(--bk-primary);
}
.bk-kind-chart__label {
font-size: 9px;
font-weight: 700;
color: var(--bk-ink-3);
text-transform: uppercase;
letter-spacing: .02em;
white-space: nowrap;
}
.bk-kind-chart__col--today .bk-kind-chart__label {
color: var(--bk-primary);
}
.bk-kind-chart__count {
font-size: 9px;
font-weight: 700;
color: var(--bk-ink-2);
line-height: 1;
}
/* ── Recente oefeningen ───────────────────────────────────── */
.bk-kind-recent-list {
list-style: none;
margin: var(--bk-space-4) 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--bk-space-2);
}
.bk-kind-recent-item {
display: flex;
align-items: center;
gap: var(--bk-space-3);
background: var(--bk-surface);
border-radius: var(--bk-r-md);
padding: var(--bk-space-3) var(--bk-space-4);
box-shadow: var(--bk-shadow-sm);
}
.bk-kind-recent-item__icon {
width: 36px;
height: 36px;
border-radius: var(--bk-r-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.bk-kind-recent-item__body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.bk-kind-recent-item__title {
font-family: var(--bk-font-display);
font-weight: 700;
font-size: 14px;
color: var(--bk-ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bk-kind-recent-item__subject {
font-size: 12px;
color: var(--bk-ink-3);
}
.bk-kind-recent-item__right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
flex-shrink: 0;
}
.bk-kind-recent-stars { display: flex; gap: 1px; font-size: 14px; }
.bk-kind-recent-item__date {
font-size: 11px;
color: var(--bk-ink-3);
text-align: right;
line-height: 1.4;
}
.bk-kind-recent-item__date span { display: block; }
/* ── chip-muted (wordt ook in ouder/index.php gebruikt) ─── */
.bk-chip-muted {
background: var(--bk-bg);
color: var(--bk-ink-3);
border-color: rgba(28,35,48,.12);
}
/* ── Responsive: tablet (768px+) ─────────────────────────── */
@media (min-width: 768px) {
.bk-kind-subjects-grid {
grid-template-columns: 1fr 1fr;
}
.bk-kind-header {
flex-wrap: nowrap;
}
.bk-kind-chart {
height: 120px;
}
.bk-kind-chart__label { font-size: 10px; }
.bk-kind-chart__count { font-size: 10px; }
}
/* ── Responsive: desktop (1024px+) ───────────────────────── */
@media (min-width: 1024px) {
.bk-kind-subjects-grid {
grid-template-columns: 1fr 1fr 1fr;
}
.bk-kind-chart {
height: 140px;
gap: 6px;
}
}
/* lg: desktop */
@media (min-width: 1024px) {
.lp-nav__inner,
.lp-how__inner,
.lp-gamify__inner,
.lp-trust__inner,
.lp-subjects__inner,
.lp-faq__inner {
max-width: 960px;
}
.lp-hero {
padding: 88px 0 72px;
}
.lp-hero__mascot {
width: 220px;
height: 242px;
}
.lp-gamify-grid {
grid-template-columns: repeat(3, 1fr);
}
.lp-subjects-grid {
grid-template-columns: repeat(9, 1fr);
}
.lp-trust-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* ============================================================
/LEREN/ — SEO-landingspagina's (lrn-* + lp-leren-links)
============================================================ */
/* --- Breadcrumb --- */
.lrn-breadcrumb {
background: var(--bk-surface);
border-bottom: 1px solid rgba(28,35,48,.08);
}
.lrn-breadcrumb__inner {
max-width: 900px;
margin: 0 auto;
padding: 10px 20px;
font-size: 13px;
color: var(--bk-ink-3);
}
.lrn-breadcrumb a {
color: var(--bk-primary);
text-decoration: none;
}
.lrn-breadcrumb a:hover { text-decoration: underline; }
/* --- Hero (lrn-variant, slankere hero dan lp-hero) --- */
.lrn-hero {
background: linear-gradient(135deg, #ede6fb 0%, #f6f4ef 60%);
padding: 48px 20px 40px;
text-align: center;
}
.lrn-hero__inner {
max-width: 680px;
margin: 0 auto;
}
.lrn-hero__icon {
font-size: 48px;
margin-bottom: 12px;
line-height: 1;
}
.lrn-hero h1 {
font-family: var(--bk-font-display);
font-size: clamp(26px, 5vw, 40px);
font-weight: 800;
color: var(--bk-ink);
margin: 0 0 12px;
line-height: 1.15;
}
.lrn-hero__sub {
font-size: 17px;
color: var(--bk-ink-2);
margin: 0 0 16px;
}
.lrn-hero__trial {
font-size: 15px;
color: var(--bk-ink-2);
margin: 0;
}
/* --- Contextuele tip (groep-7 verkeer, groep-8 IEP, etc.) --- */
.lrn-tip {
background: var(--bk-accent-l);
border-left: 4px solid var(--bk-accent);
padding: 20px;
}
.lrn-tip__inner {
max-width: 900px;
margin: 0 auto;
display: flex;
gap: 16px;
align-items: flex-start;
}
.lrn-tip__icon {
font-size: 28px;
flex-shrink: 0;
line-height: 1.4;
}
.lrn-tip__title {
font-family: var(--bk-font-display);
font-size: 17px;
font-weight: 700;
margin: 0 0 6px;
color: var(--bk-ink);
}
.lrn-tip__body {
font-size: 15px;
color: var(--bk-ink-2);
margin: 0;
}
/* --- Secties --- */
.lrn-section {
padding: 48px 20px;
}
.lrn-section--alt {
background: var(--bk-surface);
}
.lrn-section--related {
padding: 28px 20px;
border-top: 1px solid rgba(28,35,48,.08);
}
.lrn-section__inner {
max-width: 900px;
margin: 0 auto;
}
.lrn-section__title {
font-family: var(--bk-font-display);
font-size: clamp(20px, 3vw, 28px);
font-weight: 800;
color: var(--bk-ink);
margin: 0 0 8px;
}
.lrn-section__intro {
font-size: 15px;
color: var(--bk-ink-2);
margin: 0 0 24px;
}
/* --- Niveau-grid (grote cards op overzicht, kleinere op vak-pagina) --- */
.lrn-level-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-top: 20px;
}
.lrn-level-grid--compact {
grid-template-columns: repeat(2, 1fr);
}
.lrn-level-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
background: var(--bk-surface);
border: 1.5px solid rgba(94,58,169,.15);
border-radius: var(--bk-radius-lg);
padding: 20px 12px;
text-decoration: none;
color: var(--bk-ink);
transition: border-color .18s, box-shadow .18s, transform .12s;
text-align: center;
}
.lrn-level-card:hover {
border-color: var(--bk-primary);
box-shadow: 0 4px 16px rgba(94,58,169,.14);
transform: translateY(-2px);
}
.lrn-level-card--sm {
padding: 14px 10px;
}
.lrn-level-card__icon { font-size: 28px; line-height: 1; }
.lrn-level-card__label { font-weight: 700; font-size: 15px; }
.lrn-level-card__sub { font-size: 12px; color: var(--bk-ink-3); }
.lrn-level-card__count {
font-size: 12px;
color: var(--bk-primary);
font-weight: 600;
margin-top: 4px;
}
/* --- Vak-grid --- */
.lrn-subject-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-top: 20px;
}
.lrn-subject-grid--with-count {
grid-template-columns: repeat(2, 1fr);
}
.lrn-subject-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 14px 10px;
background: var(--bk-surface);
border: 1.5px solid rgba(28,35,48,.1);
border-radius: var(--bk-radius);
text-decoration: none;
color: var(--bk-ink);
font-size: 13px;
text-align: center;
transition: border-color .18s, background .18s;
}
.lrn-subject-card:hover {
border-color: var(--bk-primary);
background: var(--bk-primary-l);
}
.lrn-subject-card__icon { font-size: 22px; line-height: 1; }
.lrn-subject-card__title { font-weight: 600; font-size: 13px; }
.lrn-subject-card__count { font-size: 11px; color: var(--bk-ink-3); }
/* --- Voorbeeld-lijst --- */
.lrn-example-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.lrn-example-item {
display: flex;
align-items: flex-start;
gap: 12px;
background: var(--bk-bg);
border-radius: var(--bk-radius);
padding: 12px 16px;
font-size: 14px;
}
.lrn-example-item__icon {
font-size: 20px;
flex-shrink: 0;
line-height: 1.3;
}
.lrn-example-item__sub {
display: block;
font-size: 11px;
color: var(--bk-ink-3);
margin-bottom: 2px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .4px;
}
/* --- Twee kolommen layout --- */
.lrn-two-col {
display: flex;
flex-direction: column;
gap: 28px;
}
/* --- USP-lijst --- */
.lrn-usp-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.lrn-usp {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 15px;
color: var(--bk-ink-2);
}
/* --- FAQ sectie --- */
.lrn-faq {
padding: 40px 20px;
background: var(--bk-surface);
}
.lrn-faq__inner {
max-width: 720px;
margin: 0 auto;
}
/* --- lp-leren-links (footer-blokje op index.php) --- */
.lp-leren-links {
background: var(--bk-surface);
border-top: 1px solid rgba(28,35,48,.08);
padding: 28px 20px;
}
.lp-leren-links__inner {
max-width: 960px;
margin: 0 auto;
}
.lp-leren-links__title {
font-family: var(--bk-font-display);
font-size: 14px;
font-weight: 700;
color: var(--bk-ink-2);
text-transform: uppercase;
letter-spacing: .5px;
margin: 0 0 12px;
}
.lp-leren-links__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
}
.lp-leren-links__list a {
font-size: 14px;
color: var(--bk-ink-2);
text-decoration: none;
border-bottom: 1px solid rgba(94,58,169,.2);
padding-bottom: 1px;
}
.lp-leren-links__list a:hover {
color: var(--bk-primary);
border-color: var(--bk-primary);
}
/* --- Responsive: tablet (560px+) --- */
@media (min-width: 560px) {
.lrn-level-grid {
grid-template-columns: repeat(4, 1fr);
}
.lrn-level-grid--compact {
grid-template-columns: repeat(4, 1fr);
}
.lrn-subject-grid {
grid-template-columns: repeat(4, 1fr);
}
.lrn-subject-grid--with-count {
grid-template-columns: repeat(3, 1fr);
}
}
/* --- Responsive: desktop (768px+) --- */
@media (min-width: 768px) {
.lrn-hero {
padding: 64px 20px 52px;
}
.lrn-level-grid {
grid-template-columns: repeat(4, 1fr);
}
.lrn-subject-grid {
grid-template-columns: repeat(5, 1fr);
}
.lrn-subject-grid--with-count {
grid-template-columns: repeat(4, 1fr);
}
.lrn-two-col {
flex-direction: row;
}
.lrn-two-col > * { flex: 1; }
.lrn-section__inner,
.lrn-faq__inner {
max-width: 900px;
}
.lrn-example-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
}
/* --- Responsive: desktop (1024px+) --- */
@media (min-width: 1024px) {
.lrn-level-grid {
grid-template-columns: repeat(8, 1fr);
}
.lrn-subject-grid {
grid-template-columns: repeat(6, 1fr);
}
.lrn-subject-grid--with-count {
grid-template-columns: repeat(5, 1fr);
}
.lp-leren-links__inner {
display: flex;
align-items: baseline;
gap: 20px;
}
.lp-leren-links__title { margin-bottom: 0; white-space: nowrap; }
}
/* Eigen gebouwde mascotte (inline SVG via bk_mascot_html) i.p.v. standaard-achtergrond */
.bk-mascot-eigen { background-image: none !important; }
.bk-mascot-eigen svg { width: 100%; height: 100%; display: block; }
/* Avatar-/kleurkiezer (kind-toevoegen & kind-bewerken): duidelijke selectie */
.bk-kies .bk-kies__vak { transition: outline-color .12s, transform .12s, box-shadow .12s; outline: 3px solid transparent; }
.bk-kies input:checked + .bk-kies__vak {
outline: 3px solid var(--primary, #5e3aa9);
outline-offset: 2px;
transform: scale(1.06);
box-shadow: 0 2px 10px rgba(94, 58, 169, .25);
}
.bk-kies input:focus-visible + .bk-kies__vak { outline: 3px dashed var(--primary, #5e3aa9); outline-offset: 2px; }
/* ============================================================
SCHOOL — onboarding (stap-indicator, gekozen-school, codes)
============================================================ */
.bk-steps {
display: flex;
list-style: none;
margin: 0 0 18px;
padding: 0;
font-size: 12.5px;
font-weight: 800;
}
.bk-steps li {
flex: 1;
text-align: center;
padding: 8px 4px;
color: var(--ink-2, #6b6580);
border-bottom: 3px solid #e5e1f5;
}
.bk-steps li.is-active {
color: var(--primary, #5e3aa9);
border-color: var(--primary, #5e3aa9);
}
.bk-steps li.is-done {
color: #2a8f5c;
border-color: #2a8f5c;
}
/* School-zoekveld: zichtbaar "gekozen" */
#school_zoek.is-chosen {
border-color: #2a8f5c !important;
background: #f0faf4;
font-weight: 700;
}
/* Akkoord-blok: ruimere tikzone + nadruk */
.bk-akkoord {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 12px 14px;
border-radius: 12px;
background: #f5f3ff;
font-size: 14px;
color: var(--ink-2, #6b6580);
}
.bk-akkoord input[type="checkbox"] {
width: 22px;
height: 22px;
margin-top: 1px;
flex-shrink: 0;
accent-color: var(--primary, #5e3aa9);
cursor: pointer;
}
/* Codes afdrukken: alleen de codekaart tonen */
@media print {
body * { visibility: hidden; }
.bk-printbaar, .bk-printbaar * { visibility: visible; }
.bk-printbaar { position: absolute; left: 0; top: 0; width: 100%; }
.bk-no-print { display: none !important; }
}
/* Herbruikbaar formulierveld (school-onboarding e.a.) */
.bk-input {
width: 100%;
padding: 11px 14px;
border: 1.5px solid #d0cce6;
border-radius: 10px;
font-size: 15px;
font-family: inherit;
background: #fff;
color: var(--ink, #2a2540);
transition: border-color .15s ease, box-shadow .15s ease;
}
.bk-input:focus-visible {
outline: none;
border-color: var(--primary, #5e3aa9);
box-shadow: 0 0 0 3px rgba(94, 58, 169, .18);
}
/* ============================================================
Alias-variabelen: korte namen → merk-tokens. Veel pagina's
gebruiken var(--primary)/var(--ink-2)/… ; die waren niet
gedefinieerd (alleen --bk-*). Hier koppelen we ze.
============================================================ */
:root {
--primary: var(--bk-primary);
--primary-d: var(--bk-primary-d);
--primary-l: var(--bk-primary-l);
--ink: var(--bk-ink);
--ink-2: var(--bk-ink-2);
--ink-3: var(--bk-ink-3);
--pink: var(--bk-pink);
--green: var(--bk-green);
--accent: var(--bk-accent);
}
/* Blog-teaser op de landing */
.lp-blogteaser { padding:56px 20px; background:#faf7f2; }
.lp-blogteaser__inner { max-width:960px; margin:0 auto; }
/* ── Actie-tegel (winkel, spelletjeshal, Wie is het, dashboard-ingangen) ──────
Stond eerst inline in kind/index.php, waardoor andere pagina's die dezelfde
klassen gebruikten geen opmaak kregen. Nu gedeeld.
Mobiel: knop onder de tekst in plaats van ernaast, anders wordt het te nauw. */
.bk-shop-tile {
display: flex;
align-items: center;
gap: var(--bk-space-4);
padding: var(--bk-space-5);
text-decoration: none;
color: inherit;
border-top: 6px solid var(--bk-primary);
}
.bk-shop-tile__icon { font-size: 44px; line-height: 1; flex-shrink: 0; }
.bk-shop-tile__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bk-shop-tile__title {
font-family: var(--bk-font-display);
font-size: clamp(18px, 3.2vw, 22px);
font-weight: 800;
color: var(--bk-ink);
}
.bk-shop-tile__sub { font-size: 14px; color: var(--bk-ink-3); }
@media (max-width: 560px) {
.bk-shop-tile {
flex-wrap: wrap;
gap: var(--bk-space-3);
padding: var(--bk-space-4);
}
.bk-shop-tile__icon { font-size: 36px; }
/* De knop krijgt een eigen regel over de volle breedte. */
.bk-shop-tile > .bk-btn { flex: 1 0 100%; text-align: center; }
}