/* Schoolschrift — website. Zelfde palet en letters als de app. */ :root{ --paper:#EFF3F9; --card:#FFFFFF; --sunk:#E4EAF4; --ink:#14213A; --ink-2:#4A5773; --ink-3:#7C88A3; --rule:#D5DEEC; --rule-strong:#B9C6DC; --brand:#2B4FD6; --brand-soft:#E3E9FD; --good:#0F9D63; --boven:#8A4FD6; --boven-soft:#EFE6FD; --shadow:0 1px 0 var(--rule-strong), 0 6px 18px -12px rgba(20,33,58,.5); --r:16px; --f-disp:"Bricolage Grotesque","Trebuchet MS",sans-serif; --f-body:"Atkinson Hyperlegible","Verdana",sans-serif; } /* Donker in drie standen, net als in de app: het systeem volgen, of zelf licht of donker kiezen. De keuze staat als data-theme op . */ @media (prefers-color-scheme: dark){ :root:not([data-theme="licht"]){ --paper:#0E1626; --card:#162033; --sunk:#1D293F; --ink:#E8EEFA; --ink-2:#A9B6CE; --ink-3:#7A88A3; --rule:#28344B; --rule-strong:#35435E; --brand:#7C9BFF; --brand-soft:#1E2C50; --good:#3BD08F; --boven:#B98CFF; --boven-soft:#2A1E45; --shadow:0 1px 0 #0a1120, 0 8px 22px -14px #000; } } :root[data-theme="donker"]{ --paper:#0E1626; --card:#162033; --sunk:#1D293F; --ink:#E8EEFA; --ink-2:#A9B6CE; --ink-3:#7A88A3; --rule:#28344B; --rule-strong:#35435E; --brand:#7C9BFF; --brand-soft:#1E2C50; --good:#3BD08F; --boven:#B98CFF; --boven-soft:#2A1E45; --shadow:0 1px 0 #0a1120, 0 8px 22px -14px #000; } *{box-sizing:border-box} body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:17px; line-height:1.65; -webkit-text-size-adjust:100%} h1,h2,h3{font-family:var(--f-disp); line-height:1.15; margin:0 0 .4em} h1{font-size:clamp(30px,5.2vw,50px); font-weight:800; letter-spacing:-.02em} h2{font-size:clamp(23px,3.4vw,32px); font-weight:800; letter-spacing:-.01em} h3{font-size:19px; font-weight:700} p{margin:0 0 1em} a{color:var(--brand)} .wrap{max-width:1060px; margin:0 auto; padding:0 20px} header.top{position:sticky; top:0; z-index:5; background:color-mix(in srgb,var(--paper) 88%,transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--rule)} .top .wrap{display:flex; align-items:center; gap:18px; height:66px} .merk{display:flex; align-items:center; gap:10px; font-family:var(--f-disp); font-weight:800; font-size:20px; color:var(--ink); text-decoration:none; letter-spacing:-.02em} .merk svg{width:34px; height:34px; flex:none} nav{margin-left:auto; display:flex; align-items:center; gap:6px; flex-wrap:wrap} nav a{padding:8px 12px; border-radius:999px; text-decoration:none; color:var(--ink-2); font-size:15px} nav a:hover{background:var(--sunk); color:var(--ink)} nav a[aria-current="page"]{color:var(--ink); font-weight:700} .themaknop{width:38px; height:38px; border-radius:999px; border:1.5px solid var(--rule); background:var(--card); color:var(--ink); font-size:17px; line-height:1; cursor:pointer; flex:none} .themaknop:hover{border-color:var(--rule-strong)} .btn{display:inline-flex; align-items:center; gap:9px; background:var(--brand); color:#fff; border:0; border-radius:999px; padding:13px 24px; font-family:var(--f-disp); font-weight:700; font-size:16.5px; text-decoration:none; box-shadow:var(--shadow)} .btn:hover{filter:brightness(1.07)} .btn.ghost{background:var(--card); color:var(--ink); border:1.5px solid var(--rule-strong)} .hero{padding:56px 0 44px} .hero .in{display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center} .hero p.lead{font-size:19.5px; color:var(--ink-2); max-width:46ch} .knoppen{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px} .held{background:var(--card); border:1px solid var(--rule); border-radius:26px; padding:26px; box-shadow:var(--shadow); display:flex; flex-direction:column; align-items:center; gap:14px} .held svg{width:min(260px,60vw); height:auto} .bubbel{position:relative; background:var(--brand-soft); color:var(--ink); border-radius:14px; padding:12px 16px; font-size:16px; max-width:34ch; text-align:center} .bubbel:before{content:""; position:absolute; top:-9px; left:50%; margin-left:-9px; border:9px solid transparent; border-top:0; border-bottom-color:var(--brand-soft)} section{padding:44px 0} section.sunk{background:var(--sunk); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)} .kop{max-width:62ch; margin-bottom:26px} .kop p{color:var(--ink-2); margin:0} .rooster{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr))} .kaart{background:var(--card); border:1px solid var(--rule); border-radius:var(--r); padding:20px 22px; box-shadow:var(--shadow)} .kaart .em{font-size:26px; line-height:1; margin-bottom:10px; display:block} .kaart p{margin:0; color:var(--ink-2); font-size:15.5px} .chips{display:flex; flex-wrap:wrap; gap:9px} .chip{display:inline-flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--rule); border-radius:999px; padding:8px 14px; font-size:14.5px} .chip b{font-weight:400} .chip i{font-style:normal; color:var(--ink-3); font-size:13px} .coaches{display:grid; gap:20px; grid-template-columns:repeat(auto-fill,minmax(268px,1fr))} .coach{background:var(--card); border:1px solid var(--rule); border-radius:var(--r); padding:20px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:12px} .coach .beeld{display:flex; align-items:center; gap:14px} .coach svg{width:74px; height:74px; flex:none} .coach h3{margin:0} .coach .obj{color:var(--ink-3); font-size:13.5px} .coach p{margin:0; font-size:15.5px; color:var(--ink-2)} .vakjes{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:4px} .vakje{font-size:12.5px; background:var(--brand-soft); color:var(--brand); border-radius:999px; padding:4px 10px; font-weight:700} .vakje.leeg{background:var(--sunk); color:var(--ink-3)} .strook{display:flex; gap:26px; flex-wrap:wrap; margin-top:8px} .cijfer{font-family:var(--f-disp); font-weight:800; font-size:30px; line-height:1.1} .cijfer span{display:block; font-family:var(--f-body); font-weight:400; font-size:14px; color:var(--ink-3)} footer{padding:36px 0 48px; border-top:1px solid var(--rule); color:var(--ink-3); font-size:14.5px} footer .wrap{display:flex; gap:18px; flex-wrap:wrap; align-items:center} footer a{color:var(--ink-2)} @media (max-width:760px){ .hero{padding:28px 0 30px} .hero .in{grid-template-columns:1fr; gap:26px} .held{order:-1} /* De balk mag op een smal scherm twee regels worden; een vaste hoogte laat de menuregel over de pagina heen vallen. */ .top .wrap{height:auto; flex-wrap:wrap; padding:10px 16px; gap:8px} .merk{font-size:18px} nav{width:100%; margin-left:0; gap:2px} nav a{padding:6px 10px; font-size:14.5px} .strook{gap:18px} }