/* Healthcheck, kale pagina naar het model van joincellular.com/nl/performance-score (Timon, 13 okt 2026). Eén pagina: logo en taalkeuze bovenaan, een donkere introkaart met een gsm-mockup waarop de spinnenwebgrafiek van de vier pijlers opbouwt, en meteen daarnaast (op gsm eronder) de eerste vraag. Daarna één vraag per scherm met onderaan Terug, de voortgang en Volgende. Het rapport opent met dezelfde spinnenwebgrafiek op de echte scores. Laadt na site.css en ronde3-site.css; die leveren de variabelen (--creme-100 is ivory, --wit is softgray, --ink is charcoal, --blauw is goudbruin) en de letters. Kleuren uit tokens.json (ronde 3): ivory als grond, charcoal voor de introkaart, goud enkel als accent (de grafiek, de voortgang en de ene knop). Gedrag: js/healthcheck.js. Zeven talen, één opmaak. */ .hc-kaal { --hc-ivory: #F2E8DA; --hc-charcoal: #1A1A1A; --hc-goud: #D3B27E; --hc-ivorydof: #ADA79C; --hc-goldengrey: #5B5B5B; --hc-tekst: #454545; --hc-goudbruin: #8A6D39; background: var(--creme-100); color: var(--ink); } .hc-kaal ::selection { background: var(--hc-goud); color: var(--hc-charcoal); } .hc-kaal [hidden] { display: none !important; } /* ---- kop: enkel het logo en de taalkeuze ---- */ .hc-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1180px; margin: 0 auto; padding: 22px 24px 8px; } .hc-logo { display: inline-flex; flex: none; } .hc-logo img { display: block; height: 44px; width: auto; } /* site.css verbergt .nav-talen onder 992 px, omdat ze daar in het uitklapmenu zit; hier is geen menu. */ .hc-kaal .hc-top .nav-talen { display: flex; position: static; margin: 0; } .hc-kaal .nav-talen.zeven summary { background: var(--wit); border: 1px solid var(--rand); } /* ---- de start: introkaart naast de eerste vraag ---- */ .hc-main { max-width: 1180px; margin: 0 auto; padding: 8px 24px 40px; } .hc-start { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 560px); gap: 56px; justify-content: center; align-items: center; min-height: calc(100dvh - 200px); } .hc-intro { position: relative; overflow: hidden; background: var(--hc-charcoal); color: var(--hc-ivory); border-radius: 24px; padding: 0 30px 30px; text-align: center; isolation: isolate; } .hc-intro::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url(/css/korrel-180.png) repeat; background-size: 180px; opacity: .45; mix-blend-mode: overlay; } .hc-mockup { position: relative; height: 300px; overflow: hidden; margin: 0 -30px; } .hc-mockup::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 110px; background: linear-gradient(to bottom, rgba(26,26,26,0), var(--hc-charcoal)); } .hc-gsm { position: relative; width: 262px; height: 520px; margin: 34px auto 0; border-radius: 44px; background: #0F0F0F; border: 7px solid #2B2B2B; box-shadow: 0 0 0 1px rgba(242,232,218,.14), 0 30px 60px rgba(0,0,0,.5); } .hc-gsm::before { content: ""; position: absolute; top: 14px; left: 50%; width: 84px; height: 24px; margin-left: -42px; border-radius: 14px; background: #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); } .hc-gsm::after { content: ""; position: absolute; top: -9px; left: 50%; width: 100px; height: 2px; margin-left: -50px; background: rgba(242,232,218,.3); border-radius: 2px; } .hc-gsm .hc-radar { position: absolute; left: 6px; right: 6px; top: 60px; } .hc-radar svg { display: block; width: 100%; height: auto; } .hc-radar .hc-ring { fill: none; stroke: rgba(242,232,218,.14); stroke-width: 1; } .hc-radar .hc-as { stroke: rgba(242,232,218,.14); stroke-width: 1; } .hc-radar .hc-vlak { fill: rgba(211,178,126,.22); stroke: var(--hc-goud); stroke-width: 2; stroke-linejoin: round; } .hc-radar .hc-punt { fill: var(--hc-goud); } .hc-radar text { font-family: var(--body); font-size: 13px; font-weight: 600; fill: var(--hc-ivorydof); } .hc-radar text.hc-winst { fill: var(--hc-goud); } .hc-pil { display: inline-flex; align-items: center; gap: 2px; margin-top: 6px; padding: 4px; border-radius: 999px; background: rgba(242,232,218,.07); border: 1px solid rgba(242,232,218,.14); font-size: 13px; font-weight: 600; line-height: 1.2; } .hc-pil b { font-weight: 700; color: var(--hc-charcoal); background: var(--hc-ivory); border-radius: 999px; padding: 7px 12px; } .hc-pil span { padding: 7px 12px 7px 10px; color: var(--hc-ivorydof); } .hc-intro h1 { font-family: var(--display); font-weight: 400; font-size: 31px; line-height: 1.12; letter-spacing: -0.01em; color: var(--hc-ivory); margin: 20px auto 10px; max-width: 18ch; text-wrap: balance; } .hc-kern { margin: 0 auto; max-width: 40ch; font-size: 15.5px; line-height: 1.6; color: rgba(242,232,218,.76); } .hc-badges { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; margin: 24px 0 0; padding: 20px 0 0; border-top: 1px solid rgba(242,232,218,.14); font-size: 13px; font-weight: 600; color: var(--hc-ivorydof); } .hc-badges li { display: inline-flex; align-items: center; gap: 7px; } .hc-badges svg { width: 15px; height: 15px; flex: none; color: var(--hc-goud); } .hc-badges a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(173,167,156,.5); } .hc-badges a:hover { color: var(--hc-ivory); } /* ---- de vragen ---- */ .hc-vraagvak { min-width: 0; } .checkpaneel { position: relative; } .vraagnr { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--hc-goldengrey); margin-bottom: 12px; } .vraagkop { font-family: var(--display); font-weight: 400; font-size: 27px; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 22px; text-wrap: balance; } .opties { display: flex; flex-direction: column; gap: 10px; } .optie { position: relative; text-align: left; font: inherit; font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--ink); padding: 16px 20px 16px 20px; border: 1px solid var(--rand); border-radius: 16px; background: var(--wit); cursor: pointer; transition: background .15s, border-color .15s, transform .15s; } .optie:hover { border-color: var(--ink); } .optie:active { transform: scale(.995); } .optie.aan { border-color: var(--ink); padding-left: 40px; } .optie.aan::before { content: ""; position: absolute; left: 16px; top: 50%; width: 11px; height: 11px; margin-top: -6px; border-radius: 50%; background: var(--kleur-antw, var(--hc-goud)); } /* De kleur van het gekozen antwoord zegt in één oogopslag wat het waard is (bleef uit v2). */ .optie.aan.s0 { --kleur-antw: #8F2E22; } .optie.aan.s1 { --kleur-antw: #C27A2C; } .optie.aan.s2 { --kleur-antw: #8BA45A; } .optie.aan.s3 { --kleur-antw: #2F7A4F; } .keuzes { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 22px; } .keuze { font: inherit; font-size: 15px; font-weight: 500; color: var(--ink); background: var(--wit); border: 1px solid var(--rand); border-radius: 999px; padding: 11px 18px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .keuze:hover { border-color: var(--ink); } .keuze.aan { background: var(--ink); color: var(--hc-ivory); border-color: var(--ink); } .keuze:focus-visible, .optie:focus-visible, .terug:focus-visible, .opnieuw:focus-visible { outline: 2px solid var(--hc-goud); outline-offset: 3px; } .profielvraag { font-weight: 600; font-size: 15.5px; margin: 0 0 10px; } .klein { font-size: 14px; color: var(--hc-goldengrey); } .hc-hint { margin: 0; min-height: 1.4em; } abbr[title] { text-decoration: underline dotted; cursor: help; } #stap, #rapportvak { scroll-margin-top: 16px; } /* onderaan: Terug, de voortgang, Volgende */ .hc-nav { display: flex; align-items: center; gap: 18px; margin-top: 26px; } .terug { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--hc-goldengrey); cursor: pointer; padding: 10px 0; } .terug::before { content: ""; width: 7px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-right: 2px; } .terug:hover { color: var(--ink); } .hc-nav .leeg { width: 1px; } .voortgang { flex: 1; height: 3px; border-radius: 2px; background: rgba(26,26,26,.14); overflow: hidden; } .voortgang span { display: block; height: 100%; width: 0; background: var(--hc-goud); transition: width .4s ease; } .hc-nav .knop { flex: none; padding: 12px 22px; font-size: 15px; } .knop[disabled] { opacity: .35; cursor: not-allowed; pointer-events: none; } /* het e-mailmoment */ .gatetekst { font-size: 15.5px; margin: 0 0 20px; } .foutmelding { display: none; background: rgba(143,46,34,.08); border: 1px solid #8F2E22; border-radius: 14px; padding: 14px 18px; font-size: 15px; margin-top: 16px; } .foutmelding.zichtbaar { display: block; } .hc-kaal .toestemming.fout { color: #8F2E22; } .hc-kaal .veld input.fout { border-color: #8F2E22; background: #FBF1EF; } .hc-kaal .veld input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(211,178,126,.35); } .hc-kaal .toestemming input { accent-color: var(--hc-goudbruin); } /* bezig: de introkaart gaat weg en de vraag staat in het midden */ .hc-bezig .hc-intro { display: none; } .hc-bezig .hc-start { grid-template-columns: minmax(0, 640px); min-height: calc(100dvh - 210px); align-content: center; } .hc-rapport .hc-start { display: none; } /* ---- het rapport ---- */ #rapportvak { max-width: 760px; margin: 0 auto; } .rapportkaart { background: var(--wit); border: 1px solid var(--rand); border-radius: 24px; padding: 12px 34px; } .rp-deel { padding: 28px 0; border-top: 1px solid var(--rand); } .rp-deel:first-child { border-top: 0; } .rp-label { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--hc-goldengrey); margin-bottom: 12px; } .rp-deel p { font-size: 15.5px; } .rp-radarvak { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; } .rp-radarvak .hc-radar { max-width: 360px; margin: 0 auto; } .rp-radarvak .hc-radar .hc-ring, .rp-radarvak .hc-radar .hc-as { stroke: rgba(26,26,26,.14); } .rp-radarvak .hc-radar .hc-vlak { fill: rgba(211,178,126,.3); stroke: var(--hc-goudbruin); } .rp-radarvak .hc-radar .hc-punt { fill: var(--hc-goudbruin); } .rp-radarvak .hc-radar text { fill: var(--hc-goldengrey); } .rp-radarvak .hc-radar text.hc-winst { fill: var(--hc-goudbruin); } .rp-groot { font-family: var(--display); font-weight: 400; font-size: clamp(56px, 7vw, 76px); letter-spacing: -.02em; line-height: 1; color: var(--ink); } .rp-groot small { font-size: .4em; color: var(--hc-goldengrey); margin-left: 4px; } .rp-scorevak { display: flex; flex-direction: column; gap: 10px; } .rp-band { font-family: var(--display); font-weight: 400; letter-spacing: -.01em; font-size: 24px; line-height: 1.1; } .dombalk { height: 8px; border-radius: 6px; background: rgba(26,26,26,.1); overflow: hidden; margin: 5px 0 14px; } .dombalk i { display: block; height: 100%; width: 0; background: var(--hc-goud); border-radius: 6px; transition: width .4s ease; } .dombalk.lek i { background: var(--ink); } .domregel { font-size: 15px; font-weight: 600; } .domregel .klein { font-weight: 400; margin-left: 6px; } .gevolg { border-radius: 14px; padding: 16px 18px; font-size: 15px; line-height: 1.6; margin-top: 18px; background: rgba(26,26,26,.04); border-left: 3px solid var(--hc-goud); } .gevolg.kost { border-left-color: var(--ink); } .gevolg .label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--hc-goudbruin); margin-bottom: 6px; } .gevolg.kost .label { color: var(--ink); } .gevolg .bron { display: block; margin-top: 8px; font-size: 13px; color: var(--hc-goldengrey); } .rp-stap strong { font-weight: 700; } .bronnenlijst, .bsdeel { border: 1px solid var(--rand); border-radius: 14px; background: var(--creme-100); padding: 14px 20px; margin-top: 10px; } .bronnenlijst summary, .bsdeel summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 15px; } .bronnenlijst summary::-webkit-details-marker, .bsdeel summary::-webkit-details-marker { display: none; } .bronnenlijst summary::after, .bsdeel summary::after { content: "+"; font-family: var(--display); font-size: 22px; color: var(--hc-goudbruin); line-height: 1; flex: none; margin-left: auto; } .bronnenlijst[open] summary::after, .bsdeel[open] summary::after { content: "\2212"; } .bsdeel[open] { background: var(--wit); } .bsdeel .bsnaam { font-family: var(--display); font-weight: 400; font-size: 17px; } .bsdeel .bsnaam em { font-family: var(--body); font-style: normal; font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--hc-goudbruin); margin-left: 8px; white-space: nowrap; } .bsdeel .bspct { font-size: 14px; color: var(--hc-goldengrey); flex: none; } .bsdeel .bsbalk { flex: none; width: 56px; height: 5px; border-radius: 99px; background: rgba(26,26,26,.12); overflow: hidden; } .bsdeel .bsbalk i { display: block; height: 100%; background: var(--hc-goud); } .bsdeel.lek .bsbalk i { background: var(--ink); } .bsdeel summary::after { margin-left: 0; } .bsdeel .bspct { margin-left: auto; } .bsdeel .gevolg { margin-top: 12px; } .bronnenlijst ol { margin: 14px 0 4px; padding-left: 20px; font-size: 13.5px; color: var(--hc-tekst); } .bronnenlijst li { margin: 6px 0; } .opnieuw { background: none; border: 0; font: inherit; font-size: 13.5px; color: var(--hc-goldengrey); text-decoration: underline; cursor: pointer; margin-top: 14px; padding: 0; } .geendruk { font-size: 14px; color: var(--hc-goldengrey); } /* ---- voet: enkel wat moet ---- */ .hc-voet { max-width: 1180px; margin: 0 auto; padding: 24px 24px 40px; text-align: center; font-size: 12.5px; line-height: 1.7; color: var(--hc-goldengrey); } .hc-voet p { margin: 0; } .hc-voet a, .hc-voet button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .hc-voet a:hover, .hc-voet button:hover { color: var(--ink); } /* ---- maten ---- */ @media (max-width: 991px) { .hc-start { grid-template-columns: minmax(0, 560px); gap: 28px; min-height: 0; justify-items: stretch; } .hc-vraagvak { padding-top: 8px; } } @media (max-width: 640px) { .hc-top { padding: 16px 16px 4px; } .hc-logo img { height: 36px; } .hc-main { padding: 4px 16px 32px; } .hc-intro { padding: 0 20px 24px; border-radius: 20px; } .hc-mockup { margin: 0 -20px; height: 250px; } .hc-gsm { width: 236px; margin-top: 26px; } .hc-intro h1 { font-size: 26px; } .hc-kern { font-size: 15px; } .vraagkop { font-size: 23px; } .optie { padding: 14px 16px; font-size: 15.5px; } .optie.aan { padding-left: 36px; } .optie.aan::before { left: 14px; } .hc-nav { gap: 12px; margin-top: 22px; } .hc-nav .knop { padding: 11px 16px; font-size: 14px; } .rapportkaart { padding: 6px 20px; border-radius: 20px; } .rp-radarvak { grid-template-columns: 1fr; } .veldrij { grid-template-columns: 1fr; gap: 0; } .bsdeel .bsbalk { display: none; } .hc-voet { font-size: 12px; } } @media (prefers-reduced-motion: reduce) { .optie, .keuze, .voortgang span, .dombalk i { transition: none; } } /* ---- taalkeuze: zeven talen, de actieve als knop, uitklappen zonder JavaScript (healthcheck_kiezer in bouw.py) ---- */ .hc-talen { position: relative; font-size: 13px; font-weight: 700; } .hc-talen summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 999px; color: var(--ink); background: var(--wit); border: 1px solid var(--rand); } .hc-talen summary::-webkit-details-marker { display: none; } .hc-talen summary::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; margin-left: 2px; opacity: .7; } .hc-talen details[open] summary::after { transform: rotate(180deg); } .hc-talen details > div { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; display: grid; min-width: 172px; padding: 6px; background: var(--wit); border: 1px solid var(--rand); border-radius: 14px; box-shadow: 0 10px 30px rgba(26,26,26,.12); } .hc-talen a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; color: var(--hc-goldengrey); text-decoration: none; } .hc-talen a:hover { background: var(--creme-100); color: var(--ink); } .hc-talen a.actief { color: var(--ink); background: var(--creme-100); } .hc-talen .vlag { width: 18px; height: 12px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(26,26,26,.14); } /* site.css geeft elke