:root{ --bar-h:56px; --pad:12px; --a:#2575fc; --b:#6a11cb; /* blauw → paars */ --bg:#f7f8fb; --card:#ffffff; --ink:#1f2430; --muted:#6b7383; --ring:rgba(37,117,252,.35); --brd:#e8ecf3; --brd2:#dde3ee; --ok:#28a745; --warn:#ffb020; --err:#e74c3c; } /* Optioneel: plaats in voor mooiere fonts: */ *,*::before,*::after{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} body{font:16px/1.55 Inter, Rubik, system-ui, "Segoe UI", Roboto, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji",sans-serif} /* Typografie */ h1,h2,h3,h4{margin:0 0 .5em 0; line-height:1.15; letter-spacing:.2px} h1{font-size:clamp(24px,3.6vw,34px); font-weight:800} h2{font-size:clamp(20px,2.8vw,28px); font-weight:700} h3{font-size:clamp(18px,2.2vw,22px); font-weight:600} p{margin:.5em 0 1em; color:var(--ink)} .lead{font-size:1.0625rem; color:#2a313f} .muted{color:var(--muted)} .small{font-size:.875rem; color:var(--muted)} /* Links & focus */ a{color:var(--b); text-decoration:none} a:hover{text-decoration:underline} :focus-visible{outline:2px solid var(--ring); outline-offset:2px; border-radius:8px} /* Appbar */ .appbar{ position:sticky; top:0; z-index:1000; background:linear-gradient(90deg,var(--a),var(--b)); color:#fff; height:var(--bar-h); padding-top:env(safe-area-inset-top); box-shadow:0 2px 10px rgba(0,0,0,.15) } .appbar-inner{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:var(--bar-h); padding:0 var(--pad); gap:8px } .appbar .left,.appbar .right{display:flex; align-items:center; gap:6px} .appbar .right{justify-content:flex-end} .title{ min-width:0; padding:0; height:auto; background:none; font-weight:800; font-size:17px; letter-spacing:.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 1px 0 rgba(0,0,0,.12); } @media (min-width:768px){ .title{ font-size:18px } } .appbtn{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:12px; border:0; background:rgba(255,255,255,.12); color:#fff; cursor:pointer; transition:transform .12s ease, background .12s ease } .appbtn:hover{background:rgba(255,255,255,.18)} .appbtn:active{transform:scale(.96)} .appbtn svg{width:18px; height:18px; display:block} .badge{position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:#fff; color:#2b2e3a; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px rgba(0,0,0,.08)} .appbtn.badged{position:relative} /* Dropdown menu (Help/Notificaties) */ /* MENU boven alles, ondoorzichtig, mobile-first */ .menu{ position:fixed; right:8px; left:auto; top:calc(var(--bar-h) + 8px + env(safe-area-inset-top)); width:min(360px, 92vw); background:#fff; color:var(--ink); border-radius:16px; border:1px solid var(--brd); box-shadow:0 18px 48px rgba(20,24,33,.22); overflow:hidden; display:none; z-index:2000; } .menu.show{ display:block } .menu header{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--brd) } .menu header h4{ margin:0; font-size:13px; color:#5a6272; font-weight:800; letter-spacing:.35px; text-transform:uppercase } .menu .section{ padding:0 } .menu .item{ display:flex; gap:10px; padding:12px 14px; font-size:15px; line-height:1.3; cursor:pointer; background:#fff; } .menu .item:hover{ background:#f6f8fb } .menu .item .meta{ font-size:12px; color:var(--muted); margin-top:2px } /* ECHTE dividers tussen items */ .menu .item + .item{ border-top:1px solid var(--brd2) } /* Mobiel: iets grotere tappables en volle breedte als je dat wil */ @media (max-width:640px){ .menu{ right:8px; left:8px; width:auto } .menu .item{ padding:14px 16px; font-size:16px } } .overlay{ position:fixed; inset:0; background:rgba(0,0,0,.28); backdrop-filter:saturate(120%) blur(2px); display:none; z-index:1999; } .overlay.show{ display:block } /* Content wrapper */ .content{padding:16px} /* Formulieren (login) */ .form{ width:min(460px, 92vw); background:var(--card); border:1px solid var(--brd); border-radius:16px; padding:16px; box-shadow:0 10px 30px rgba(0,0,0,.06) } .form h2{margin-bottom:.25rem} .form .hint{margin-top:-.25rem; margin-bottom:1rem; color:var(--muted)} .field{display:grid; gap:6px; margin-bottom:12px} .label{font-weight:700; font-size:.9rem; color:#2a313f} .input{ display:flex; align-items:center; gap:8px; border:1px solid var(--brd); background:#fff; height:44px; border-radius:12px; padding:0 12px; transition:border-color .12s ease, box-shadow .12s ease } .input:focus-within{border-color:var(--a); box-shadow:0 0 0 4px var(--ring)} .input input{ border:0; outline:0; flex:1; font:inherit; color:inherit; background:transparent; min-width:0 } .input button.ghost{ border:0; background:transparent; cursor:pointer; padding:4px; border-radius:8px; color:#60697a } .input button.ghost:hover{background:#f1f4f9} .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 16px; border-radius:12px; border:1px solid transparent; font-weight:700; cursor:pointer; transition:transform .06s ease, box-shadow .12s ease, opacity .12s ease } .btn:active{transform:translateY(1px)} .btn.primary{background:linear-gradient(90deg,var(--a),var(--b)); color:#fff; box-shadow:0 6px 16px rgba(37,117,252,.25)} .btn.secondary{background:#fff; border-color:var(--brd); color:#2a313f} .btn.full{width:100%} /* Feedback */ .note{display:flex; align-items:flex-start; gap:8px; padding:10px 12px; border-radius:12px; background:#f6f8fb; border:1px solid var(--brd)} .note.ok{background:rgba(40,167,69,.07); border-color:rgba(40,167,69,.25)} .note.warn{background:rgba(255,176,32,.08); border-color:rgba(255,176,32,.28)} .note.err{background:rgba(231,76,60,.08); border-color:rgba(231,76,60,.3)} /* Kaarten */ .card{background:var(--card); border:1px solid var(--brd); border-radius:16px; padding:16px; box-shadow:0 10px 30px rgba(0,0,0,.05)} /* Pagina-transities */ .page{transform:translateX(100%); transition:transform .3s ease; will-change:transform} .page.in{transform:translateX(0)} .page.start-back{transform:translateX(-100%)} .page.out-left{transform:translateX(-100%)} .page.out-right{transform:translateX(100%)} /* ===== Help Fullscreen Modal ===== */ body.noscroll{overflow:hidden} .modal{position:fixed; inset:0; z-index:2100; display:none; background:#fff} .modal.show{display:flex; flex-direction:column; animation:helpFade .2s ease} @keyframes helpFade{from{opacity:.6;transform:scale(.997)} to{opacity:1;transform:scale(1)}} .modal__header{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; padding-top:calc(12px + env(safe-area-inset-top)); background:linear-gradient(90deg,var(--a),var(--b)); color:#fff; box-shadow:0 2px 12px rgba(0,0,0,.16); z-index:1 } .modal__title{ margin:0; font-size:18px; font-weight:800; letter-spacing:.3px; text-shadow:0 1px 0 rgba(0,0,0,.15) } .modal__close{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:12px; border:0; background:rgba(255,255,255,.12); color:#fff; cursor:pointer; transition:transform .12s ease, background .12s ease } .modal__close:hover{background:rgba(255,255,255,.18)} .modal__close:active{transform:scale(.96)} .modal__close svg{width:18px;height:18px;display:block} .modal__body{ position:relative; flex:1 1 auto; overflow:auto; -webkit-overflow-scrolling:touch; padding:16px; background:#fff } /* Typo binnen de modal — speels/modern */ .modal__body h1{font-size:clamp(24px,3.6vw,32px); font-weight:800; margin:.2em 0 .4em} .modal__body h2{font-size:clamp(20px,2.8vw,26px); font-weight:700; margin:1.2em 0 .4em} .modal__body p{margin:.5em 0 1em; color:#2a313f} .modal__body .note{margin:12px 0} /* Optionele inhoudsbreedte voor leesbaarheid */ .help-container{max-width:900px; margin:0 auto} /* Verberg je oude .menu voor help (als die nog bestaat) */ #helpMenu{display:none!important} /* Alleen voor klas-overzicht pagina */ .klas-overzicht-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: clamp(10px, 2.5vw, 16px); } .klas-overzicht-grid .klas-tile { display: grid; place-items: center; aspect-ratio: 1 / 1; border-radius: 16px; text-decoration: none; font-weight: 600; font-size: clamp(16px, 3.4vw, 22px); padding: 8px; box-shadow: 0 6px 18px rgba(0,0,0,0.12); border: 1px solid rgba(0,0,0,0.06); transform: translateZ(0); transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease; color: #fff; /* wordt inline overschreven */ text-align: center; line-height: 1.15; word-break: break-word; user-select: none; } .klas-overzicht-grid .klas-tile:active { transform: scale(0.98); box-shadow: 0 3px 10px rgba(0,0,0,0.18); } .klas-overzicht-grid .klas-tile:hover { filter: brightness(1.03); } .klas-overzicht-grid .klas-tile:focus-visible { outline: 3px solid #111; outline-offset: 3px; } @media (min-width: 768px) { .klas-overzicht-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } } @media (min-width: 1024px) { .klas-overzicht-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } } @media (prefers-reduced-motion: reduce) { .klas-overzicht-grid .klas-tile { transition: none; } } @media (prefers-color-scheme: dark) { .klas-overzicht-grid .klas-tile { border-color: rgba(255,255,255,0.08); } }