/* ============================================================ Inburgerify — stylesheet Ontwerptaal: Delfts blauw als basis, oranje als actie/voortgang, tulpen & fietsroute in pijler 1–3, bewust sober in pijler 4 (Examen). Mobile-first; desktop krijgt een gecentreerde kolom. ============================================================ */ :root { --blue: #1b64da; --blue-dark: #12429b; --blue-deep: #0d2f6e; --blue-100: #e8f0fc; --blue-50: #f3f7fd; --orange: #f5860c; --orange-dark: #d96f00; --orange-50: #fef4e6; --orange-line: #f8d9ae; --green: #1e9e50; --green-50: #e7f7ee; --green-line: #bfe6cd; --red: #d64541; --red-50: #fdecec; --ink: #1c2733; --ink-soft: #51606f; --line: #dde6f0; --card: #ffffff; --bg: #f2f6fc; --surface: #ffffff; --heading: var(--blue-deep); --topbar-bg: rgba(255, 255, 255, .94); --paper-bg: #fffdf6; --paper-line: #eadfc3; --notice-ink: #7a4a05; --exam-page-bg: #eceff3; --exam-card-bg: #ffffff; --exam-card-line: #d5dae1; --exam-track-bg: #e6eaef; --exam-heading: #22303e; --radius: 16px; --shadow: 0 2px 10px rgba(18, 66, 155, 0.08); --tabbar-h: 62px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* ---------- donker thema ---------- 'Systeem' volgt prefers-color-scheme; 'Licht'/'Donker' in Instellingen forceren via [data-theme] op , ongeacht het OS-thema. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --blue: #5b93ff; --blue-dark: #cfe0ff; --blue-100: #1c3a63; --blue-50: #16283f; --orange: #ff9d3d; --orange-dark: #ffcf8a; --orange-50: #3a2811; --orange-line: #5c4420; --green: #3ecb79; --green-50: #123321; --green-line: #1f5c3a; --red: #ff6b66; --red-50: #3a1616; --ink: #e7edf6; --ink-soft: #a3b3c6; --line: #2a3a4e; --card: #182634; --bg: #0e1620; --surface: #1d2b3a; --heading: #dbe9ff; --topbar-bg: rgba(14, 22, 32, .9); --paper-bg: #241f14; --paper-line: #4a3f26; --notice-ink: #ffdca8; --exam-page-bg: #12181f; --exam-card-bg: #1a232d; --exam-card-line: #33404d; --exam-track-bg: #24303b; --exam-heading: #dbe6f0; --shadow: 0 2px 14px rgba(0, 0, 0, .45); } } :root[data-theme="dark"] { --blue: #5b93ff; --blue-dark: #cfe0ff; --blue-100: #1c3a63; --blue-50: #16283f; --orange: #ff9d3d; --orange-dark: #ffcf8a; --orange-50: #3a2811; --orange-line: #5c4420; --green: #3ecb79; --green-50: #123321; --green-line: #1f5c3a; --red: #ff6b66; --red-50: #3a1616; --ink: #e7edf6; --ink-soft: #a3b3c6; --line: #2a3a4e; --card: #182634; --bg: #0e1620; --surface: #1d2b3a; --heading: #dbe9ff; --topbar-bg: rgba(14, 22, 32, .9); --paper-bg: #241f14; --paper-line: #4a3f26; --notice-ink: #ffdca8; --exam-page-bg: #12181f; --exam-card-bg: #1a232d; --exam-card-line: #33404d; --exam-track-bg: #24303b; --exam-heading: #dbe6f0; --shadow: 0 2px 14px rgba(0, 0, 0, .45); } /* ---------- tekstgrootte (Instellingen → Uiterlijk) ---------- Pragmatische, layout-behoudende schaal via CSS zoom (breed ondersteund in Chrome/Edge/Safari en Firefox 126+). */ html.text-groot { zoom: 1.12; } html.text-extra-groot { zoom: 1.25; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--ink); line-height: 1.55; transition: background .15s ease, color .15s ease; } button { font-family: var(--font); } /* ---------- topbar & woordmerk ---------- */ .topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--topbar-bg); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .brand { text-decoration: none; } .wordmark { font-weight: 800; font-size: 26px; letter-spacing: -0.5px; color: var(--blue); } .wm-i { position: relative; } .wm-tulip { position: absolute; width: 0.62em; height: 0.62em; left: 50%; transform: translateX(-50%); top: -0.60em; fill: var(--orange); } .wm-dot { color: var(--orange); } .topbar-right { font-size: 14px; color: var(--ink-soft); display:flex; gap:8px; align-items:center; } .daychip { background: var(--blue-100); color: var(--blue-dark); padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: 13px; white-space: nowrap; } /* ---------- layout ---------- */ .view { max-width: 680px; margin: 0 auto; padding: 16px 16px calc(var(--tabbar-h) + 28px); } @media (min-width: 760px) { .view { padding-top: 24px; } } /* ---------- tabbar ---------- */ .tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; display: flex; height: var(--tabbar-h); background: var(--card); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); } .tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-decoration: none; color: var(--ink-soft); font-size: 11px; font-weight: 600; } .tabbar a .tab-ico { font-size: 20px; line-height: 1; } .tabbar a.active { color: var(--blue); } .tabbar a.active::after { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 40px; height: 3px; background: var(--orange); border-radius: 0 0 4px 4px; } .tabbar a { position: relative; } body.exam-mode .tabbar { display: none; } body.exam-mode .topbar { display: none; } body.exam-mode { background: var(--exam-page-bg); } body.exam-mode .view { padding-bottom: 40px; max-width: 760px; } /* ---------- generieke bouwstenen ---------- */ .card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-bottom: 14px; } .card h2 { margin: 0 0 6px; font-size: 19px; } .card h3 { margin: 0 0 6px; font-size: 16px; } .muted { color: var(--ink-soft); font-size: 14px; } .small { font-size: 13px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: 12px; cursor: pointer; font-size: 15px; font-weight: 700; padding: 12px 18px; background: var(--blue); color: #fff; text-decoration: none; transition: transform .06s ease, background .15s ease; } .btn:active { transform: scale(.97); } .btn.orange { background: var(--orange); } .btn.ghost { background: var(--blue-100); color: var(--blue-dark); } .btn.subtle { background: #eef2f7; color: var(--ink-soft); } .btn.danger { background: var(--red); } .btn.block { display: flex; width: 100%; } .btn:disabled { opacity: .45; cursor: default; } .btn.sm { padding: 7px 12px; font-size: 13px; border-radius: 9px; } .pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; } .pill.blue { background: var(--blue-100); color: var(--blue-dark); } .pill.orange { background: var(--orange-50); color: var(--orange-dark); } .pill.green { background: var(--green-50); color: var(--green); } .pill.gray { background: #eef1f5; color: var(--ink-soft); } .breadcrumb { font-size: 13px; color: var(--ink-soft); margin: 2px 0 12px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .breadcrumb a { color: var(--blue); text-decoration: none; font-weight: 600; } .breadcrumb .sep { opacity: .5; } .page-title { font-size: 24px; font-weight: 800; margin: 4px 0 16px; color: var(--heading); } .progressbar { height: 8px; border-radius: 999px; background: var(--blue-100); overflow: hidden; } .progressbar > div { height: 100%; background: var(--orange); border-radius: 999px; transition: width .4s ease; } .progressbar.blue > div { background: var(--blue); } /* AI-feedback (lokaal model) */ .ai-fb-card .progressbar { margin: 4px 0 8px; } .ai-fb-card .btn { margin-top: 4px; } .ai-fb-out { line-height: 1.55; margin: 4px 0 8px; } .ai-fb-out strong { color: var(--heading); } .ai-fb-status { font-style: italic; } /* dunne les-voortgangsbalk bovenaan */ .lesson-topbar { position: sticky; top: 57px; z-index: 30; margin: -6px -16px 12px; padding: 8px 16px; background: var(--topbar-bg); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); } .lesson-topbar .progressbar { height: 6px; } .lesson-topbar .lt-label { font-size: 12px; color: var(--ink-soft); margin-bottom: 4px; display:flex; justify-content:space-between; } /* ---------- Home ---------- */ .routemap-card { background: linear-gradient(150deg, var(--blue-deep) 0%, var(--blue) 78%); color: #fff; border-radius: 20px; padding: 18px 16px 8px; box-shadow: var(--shadow); margin-bottom: 14px; overflow: hidden; } .routemap-card h2 { margin: 0; font-size: 18px; } .routemap-card .muted { color: #cfe0fa; } .routemap-svg { width: 100%; height: auto; display: block; margin-top: 4px; } .badge-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 2px; min-height: 30px; } .tulp-badge { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: var(--orange-50); border-radius: 999px; font-size: 16px; } .tulp-badge.locked { filter: grayscale(1); opacity: .35; background: #eef1f5; } .continue-card { display: flex; align-items: center; gap: 14px; background: var(--orange); color: #fff; border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); margin-bottom: 14px; text-decoration: none; } .continue-card .cc-ico { font-size: 30px; } .continue-card .cc-label { font-size: 12px; font-weight: 700; opacity: .85; text-transform: uppercase; letter-spacing: .4px; } .continue-card .cc-title { font-size: 17px; font-weight: 800; line-height: 1.3; } .continue-card .cc-arrow { margin-left: auto; font-size: 22px; } .pillar-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .pillar-mini { background: var(--card); border-radius: 14px; box-shadow: var(--shadow); padding: 12px; text-decoration: none; color: var(--ink); } .pillar-mini .pm-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .pillar-mini .pm-title { font-weight: 800; font-size: 14px; } .pillar-mini .pm-ico { font-size: 18px; } /* ---------- lijstkaarten (modules, thema's, units) ---------- */ .list-card { display: flex; align-items: center; gap: 14px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 10px; text-decoration: none; color: var(--ink); } .list-card .lc-ico { width: 44px; height: 44px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; background: var(--blue-100); } .list-card .lc-body { flex: 1; min-width: 0; } .list-card .lc-title { font-weight: 800; font-size: 15px; margin-bottom: 6px; } .list-card .lc-check { flex: none; font-size: 18px; } .list-card.done { outline: 2px solid var(--green-50); } .lesson-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); } .lesson-row:last-child { border-bottom: none; } .lesson-row .lr-num { flex: none; width: 34px; height: 34px; border-radius: 999px; background: var(--blue-100); color: var(--blue-dark); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; } .lesson-row.done .lr-num { background: var(--green-50); color: var(--green); } .lesson-row .lr-title { flex: 1; font-weight: 600; font-size: 14.5px; } .lesson-row .lr-state { font-size: 16px; } /* ---------- lesinhoud ---------- */ .section-card { margin-bottom: 14px; } .section-card .sec-kicker { font-size: 12px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; } .section-card .sec-kicker .en-btn { margin-left: auto; } .en-btn { flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: .3px; color: var(--blue); background: var(--blue-100); border: none; border-radius: 6px; padding: 2px 7px; cursor: pointer; text-transform: none; } .en-btn.on, .en-btn:hover { background: var(--blue); color: #fff; } .en-box { margin-top: 8px; padding: 10px 12px; background: var(--blue-50); border: 1px dashed var(--blue-100); border-radius: 10px; font-size: 14px; font-style: italic; color: var(--ink-soft); text-align: left; } .en-box p { margin: 0 0 6px; } .en-box p:last-child { margin-bottom: 0; } .section-card p { margin: 0 0 8px; } .section-card p:last-child { margin-bottom: 0; } .section-card ul { margin: 4px 0 0; padding-left: 20px; } .section-card li { margin-bottom: 4px; } table.les-tabel { border-collapse: collapse; width: 100%; font-size: 14px; } table.les-tabel td, table.les-tabel th { border: 1px solid var(--line); padding: 6px 10px; text-align: left; } table.les-tabel tr:first-child td { background: var(--blue-50); font-weight: 700; } .woord-chips { display: flex; flex-wrap: wrap; gap: 8px; } .woord-chip { background: var(--blue-50); border: 1px solid var(--blue-100); color: var(--blue-dark); border-radius: 999px; padding: 5px 12px; font-size: 13.5px; font-weight: 600; } .fout-item { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 14.5px; } .fout-item:last-child { border-bottom: none; } .fout-item .f-fout { color: var(--red); text-decoration: line-through; text-decoration-thickness: 1px; } .fout-item .f-goed { color: var(--green); font-weight: 600; } .leestekst-card { background: var(--blue-50); border: 1px solid var(--blue-100); } .leestekst-card .lees-tekst { font-size: 15.5px; } .qa-item { border-bottom: 1px solid var(--line); padding: 8px 0; } .qa-item:last-child { border-bottom: none; } .qa-item .qa-q { font-weight: 600; font-size: 14.5px; } .qa-item .qa-a { display: none; margin-top: 6px; color: var(--blue-dark); background: var(--blue-50); padding: 8px 10px; border-radius: 8px; font-size: 14px; } .qa-item.open .qa-a { display: block; } .qa-item .qa-toggle { margin-top: 4px; } .tip-card { background: var(--orange-50); border: 1px solid var(--orange-line); } .tip-card .sec-kicker { color: var(--orange-dark); } /* ---------- oefeningen ---------- */ .exercise-card { margin-bottom: 14px; } .ex-item { padding: 12px 0; border-bottom: 1px solid var(--line); } .ex-item:last-child { border-bottom: none; } .ex-q { display: flex; align-items: baseline; gap: 6px; font-weight: 600; margin-bottom: 8px; font-size: 15px; } .ex-q .ex-num { color: var(--blue); font-weight: 800; margin-right: 4px; } .ex-q-text { flex: 1 1 auto; min-width: 0; } .ex-q .en-btn { margin-left: auto; flex: none; } .opt-list { display: flex; flex-direction: column; gap: 8px; } .opt-btn { text-align: left; border: 1.5px solid var(--line); background: var(--surface); border-radius: 12px; padding: 10px 14px; font-size: 14.5px; cursor: pointer; display: flex; gap: 10px; align-items: flex-start; color: var(--ink); transition: border-color .12s ease, background .12s ease; } .opt-btn .opt-letter { flex: none; width: 24px; height: 24px; border-radius: 999px; background: var(--blue-100); color: var(--blue-dark); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; } .opt-btn:not(:disabled):hover { border-color: var(--blue); } .opt-btn.selected { border-color: var(--blue); background: var(--blue-50); } .opt-btn.correct { border-color: var(--green); background: var(--green-50); } .opt-btn.correct .opt-letter { background: var(--green); color: #fff; } .opt-btn.wrong { border-color: var(--red); background: var(--red-50); } .opt-btn.wrong .opt-letter { background: var(--red); color: #fff; } .opt-btn:disabled { cursor: default; } .ex-feedback { margin-top: 8px; font-size: 13.5px; font-weight: 600; } .ex-feedback.ok { color: var(--green); } .ex-feedback.nok { color: var(--red); } .ai-fb-verdict { display: flex; align-items: center; gap: 6px; } .ai-fb-verdict .en-btn { margin-left: auto; } .ex-uitleg { margin-top: 6px; font-size: 13px; } .ex-uitleg-line { padding: 2px 0; } .ex-uitleg-line.ok { color: var(--green); } .ex-uitleg-line.nok { color: var(--red); } .fill-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .fill-input { flex: 1; min-width: 130px; border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 12px; font-size: 15px; font-family: var(--font); } .fill-input:focus { outline: none; border-color: var(--blue); } .fill-input.ok { border-color: var(--green); background: var(--green-50); } .fill-input.nok { border-color: var(--red); background: var(--red-50); } .chip-row { display: flex; gap: 8px; flex-wrap: wrap; } textarea.write-box { width: 100%; min-height: 130px; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px; font-size: 15px; font-family: var(--font); resize: vertical; line-height: 1.55; } textarea.write-box:focus { outline: none; border-color: var(--blue); } .word-counter { font-size: 13px; color: var(--ink-soft); text-align: right; margin-top: 4px; } .word-counter.out { color: var(--orange-dark); font-weight: 700; } .model-card { background: var(--green-50); border: 1px solid var(--green-line); } .model-card .sec-kicker { color: var(--green); } .model-card p { white-space: pre-wrap; } .criteria-item { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; font-size: 14.5px; } .criteria-item input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--green); } /* ---------- KNM ---------- */ .knm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (min-width: 560px) { .knm-grid { grid-template-columns: 1fr 1fr 1fr; } } .knm-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; text-decoration: none; color: var(--ink); text-align: center; } .knm-card .knm-ico { font-size: 30px; width: 56px; height: 56px; margin: 0 auto 8px; background: var(--blue-100); border-radius: 16px; display: flex; align-items: center; justify-content: center; } .knm-card .knm-title { font-weight: 800; font-size: 14px; } .knm-card .knm-sub { font-size: 12px; color: var(--ink-soft); margin: 2px 0 8px; } .flip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .flip-tile { perspective: 700px; cursor: pointer; min-height: 140px; border: none; background: transparent; padding: 0; text-align: center; font-family: var(--font); } .flip-inner { display: block; position: relative; width: 100%; height: 100%; min-height: 140px; transition: transform .45s; transform-style: preserve-3d; } .flip-tile.flipped .flip-inner { transform: rotateY(180deg); } .flip-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 12px; display: flex; align-items: center; justify-content: center; padding: 10px; font-size: 13px; overflow: hidden; word-break: break-word; hyphens: auto; text-align: center; } .flip-face.front { background: var(--blue); color: #fff; font-weight: 800; font-size: 14px; } .flip-face.back { background: var(--blue-50); border: 1px solid var(--blue-100); color: var(--ink); transform: rotateY(180deg); line-height: 1.35; font-size: 12.5px; } .praktijk-card { background: var(--green-50); border: 1px solid var(--green-line); } .praktijk-card .sec-kicker { color: var(--green); } /* ---------- Oefenen ---------- */ .subtabs { display: flex; gap: 6px; margin-bottom: 14px; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; } .subtabs a { flex: 1; text-align: center; padding: 9px 12px; border-radius: 999px; background: var(--surface); border: 1.5px solid var(--line); text-decoration: none; color: var(--ink-soft); font-weight: 700; font-size: 13.5px; white-space: nowrap; } .subtabs a.active { background: var(--blue); border-color: var(--blue); color: #fff; } .niveau-head { display: flex; align-items: center; gap: 8px; margin: 18px 0 8px; font-size: 14px; font-weight: 800; color: var(--heading); } .niveau-head .nh-line { flex: 1; height: 1px; background: var(--line); } .doc-card { background: var(--paper-bg); border: 1px solid var(--paper-line); border-radius: 12px; padding: 16px 18px; font-size: 15px; box-shadow: var(--shadow); } .doc-card .doc-type { font-size: 11.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--ink-soft); font-weight: 800; border-bottom: 1px solid var(--paper-line); padding-bottom: 6px; margin-bottom: 10px; } .doc-card p { margin: 0 0 8px; } .doc-card p.blank { margin: 0 0 4px; } /* audiospeler (Luisteren) */ .player-card { text-align: center; } .play-btn { width: 74px; height: 74px; border-radius: 999px; border: none; cursor: pointer; background: var(--blue); color: #fff; font-size: 30px; box-shadow: var(--shadow); display: inline-flex; align-items: center; justify-content: center; transition: transform .08s ease; } .play-btn:active { transform: scale(.94); } .play-btn.playing { background: var(--orange); } .player-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; } .player-row .progressbar { flex: 1; } .speed-btn { border: 1.5px solid var(--line); background: var(--surface); border-radius: 999px; font-size: 12.5px; font-weight: 800; padding: 5px 10px; cursor: pointer; color: var(--ink-soft); } .speed-btn.on { background: var(--blue-100); border-color: var(--blue); color: var(--blue-dark); } .now-speaking { margin-top: 10px; font-size: 13.5px; color: var(--ink-soft); min-height: 20px; } .transcript-box { text-align: left; margin-top: 12px; } .transcript-box .tr-line { padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 14.5px; } .transcript-box .tr-line:last-child { border: none; } .transcript-box .tr-speaker { font-weight: 800; color: var(--blue-dark); } /* opnamekaart (Spreken) */ .rec-card { text-align: center; } .rec-btn { width: 88px; height: 88px; border-radius: 999px; border: 4px solid var(--card); cursor: pointer; background: var(--red); color: #fff; font-size: 30px; box-shadow: 0 0 0 3px var(--red), var(--shadow); display: inline-flex; align-items: center; justify-content: center; margin: 8px 0; transition: transform .08s ease; } .rec-btn.recording { animation: pulse 1.2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 3px var(--red), 0 0 0 0 rgba(214,69,65,.45); } 70% { box-shadow: 0 0 0 3px var(--red), 0 0 0 16px rgba(214,69,65,0); } 100% { box-shadow: 0 0 0 3px var(--red), 0 0 0 0 rgba(214,69,65,0); } } .rec-countdown { font-size: 34px; font-weight: 800; color: var(--blue-deep); font-variant-numeric: tabular-nums; } .rec-audio { width: 100%; margin-top: 12px; } .rec-transcript { background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: 12px; padding: 12px 14px; text-align: left; } .sc-label { display: flex; align-items: center; } .sc-label .en-btn { margin-left: auto; flex: none; } .rec-transcript .sc-label { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--blue); margin-bottom: 4px; } .rec-transcript-text { color: var(--ink); } .scenario-box { background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: 12px; padding: 12px 14px; text-align: left; font-size: 14.5px; margin-bottom: 10px; } .scenario-box .sc-label { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--blue); } .time-badge { display: inline-flex; align-items: center; gap: 4px; background: var(--blue-deep); color: #fff; border-radius: 999px; font-size: 12px; font-weight: 800; padding: 3px 10px; } /* stopwatch / examentimer chip */ .timer-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 800; cursor: pointer; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .timer-chip.on { border-color: var(--orange); color: var(--orange-dark); background: var(--orange-50); } /* ---------- klaar!-overlay ---------- */ .done-overlay { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: rgba(13, 47, 110, .55); padding: 24px; } .done-box { background: var(--card); border-radius: 20px; padding: 28px 24px; max-width: 380px; width: 100%; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,.25); animation: pop .25s ease; } @keyframes pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } } .done-box .done-tulp { font-size: 52px; } .done-box h2 { margin: 8px 0 4px; color: var(--heading); } .done-box .muted { margin-bottom: 18px; } .done-box .btn { margin-top: 6px; } /* ---------- Examen (pijler 4 — sober, geen tulpen) ---------- Eigen, grijzere surface-tokens (--exam-*) i.p.v. de blauw/oranje tulpenstijl, maar wél theme-bewust: ook pijler 4 werkt in donker thema. */ .exam-card { background: var(--exam-card-bg); border: 1px solid var(--exam-card-line); border-radius: 10px; padding: 16px; margin-bottom: 12px; box-shadow: none; color: var(--ink); } .exam-card h3 { margin: 0 0 4px; font-size: 16px; color: var(--exam-heading); } .exam-attempts { margin: 10px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--ink-soft); } .exam-attempts li { padding: 4px 0; border-top: 1px dashed var(--exam-card-line); display: flex; justify-content: space-between; } .exam-topbar { position: sticky; top: 0; z-index: 50; background: #22303e; color: #fff; margin: -16px -16px 16px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .exam-topbar .et-part { font-weight: 800; font-size: 15px; } .exam-topbar .et-sub { font-size: 12px; color: #aebccb; } .exam-timer { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 20px; background: rgba(255,255,255,.1); border-radius: 8px; padding: 4px 12px; } .exam-timer.low { background: #7a2b28; } .exam-plain-card { background: var(--exam-card-bg); border: 1px solid var(--exam-card-line); border-radius: 8px; padding: 16px; margin-bottom: 12px; color: var(--ink); } .exam-progress-note { font-size: 13px; color: var(--ink-soft); margin: 4px 0 10px; } .result-bar-wrap { margin: 6px 0 14px; } .result-bar { height: 14px; background: var(--exam-track-bg); border-radius: 999px; overflow: hidden; position: relative; } .result-bar > div { height: 100%; border-radius: 999px; } .result-bar .rb-pass-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--exam-heading); } .result-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 14.5px; margin-bottom: 2px; } .result-row .rr-score { font-weight: 800; font-variant-numeric: tabular-nums; } .advies-card { background: var(--exam-card-bg); border: 1px solid var(--exam-card-line); border-radius: 8px; padding: 14px 16px; font-size: 14.5px; color: var(--ink); } /* ---------- diversen ---------- */ .notice { background: var(--orange-50); border: 1px solid var(--orange-line); color: var(--notice-ink); border-radius: 12px; padding: 10px 14px; font-size: 13.5px; margin-bottom: 14px; } .center { text-align: center; } .mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; } .row-between { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .hidden { display: none !important; } /* ---------- Instellingen ---------- */ .gear-btn { width: 32px; height: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); font-size: 15px; text-decoration: none; cursor: pointer; transition: border-color .12s ease, color .12s ease; } .gear-btn:hover { border-color: var(--blue); color: var(--blue); } .greeting-line { font-size: 15px; color: var(--ink-soft); margin: 0 0 10px; } .daily-goal-mini { font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; } .settings-section h3 { margin: 0 0 2px; font-size: 15px; } .settings-section .sett-desc { font-size: 13px; color: var(--ink-soft); margin: 0 0 10px; } .settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .settings-row:last-child { border-bottom: none; } .settings-row .sr-label { font-weight: 700; font-size: 14.5px; } .settings-row .sr-hint { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; max-width: 320px; } .text-input, .number-input, select.select-input { border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 14.5px; font-family: var(--font); background: var(--surface); color: var(--ink); } .text-input { max-width: 180px; } .number-input { max-width: 90px; } select.select-input { max-width: 240px; font-size: 14px; } .text-input:focus, .number-input:focus, select.select-input:focus { outline: none; border-color: var(--blue); } .segmented { display: inline-flex; background: var(--blue-50); border-radius: 999px; padding: 3px; gap: 2px; } .segmented button { border: none; background: transparent; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--ink-soft); cursor: pointer; } .segmented button.active { background: var(--card); color: var(--blue-dark); box-shadow: 0 1px 3px rgba(0,0,0,.12); } .range-row { display: flex; align-items: center; gap: 10px; min-width: 200px; } .range-row input[type=range] { flex: 1; accent-color: var(--blue); } .range-val { font-size: 13px; font-weight: 800; color: var(--blue-dark); min-width: 44px; text-align: right; } .file-row { display: flex; gap: 8px; flex-wrap: wrap; } .file-row label.btn input[type=file] { display: none; } .import-feedback { font-size: 13px; margin-top: 8px; } .import-feedback.ok { color: var(--green); } .import-feedback.nok { color: var(--red); } .concept-badge { display: inline-block; background: var(--orange-50); color: var(--orange-dark); border: 1px solid var(--orange-line); border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 800; margin-bottom: 10px; } .legal-card p { margin: 0 0 10px; font-size: 14.5px; } .legal-card h4 { margin: 14px 0 4px; font-size: 14.5px; color: var(--heading); } /* ---------- mastery, Herhalen & dagelijkse sessie ---------- */ .mastery-note { margin: 4px 0 10px; } /* subtiel "opnieuw proberen"-linkje onder een oefenblok */ .reset-ex-row { text-align: right; margin: -2px 0 2px; } .reset-ex-link { background: none; border: 0; padding: 2px 0; cursor: pointer; font-size: 12px; color: var(--ink-soft); opacity: .7; } .reset-ex-link:hover { opacity: 1; text-decoration: underline; } .review-list .lesson-row .lr-num { background: var(--orange-50); color: var(--orange-dark); }