/* op-tokens: de 67 open-props-variabelen die normalize gebruikt (2,2KB i.p.v. 29,6KB) */ :where(html){--blue-5:#339af0;--border-size-1:1px;--border-size-2:2px;--border-size-3:5px;--ease-2:cubic-bezier(.25,0,.4,1);--font-lineheight-1:1.25;--font-lineheight-3:1.5;--font-monospace-code:Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,Cascadia Code,Menlo,Consolas,DejaVu Sans Mono,monospace;--font-size-0:.75rem;--font-size-1:1rem;--font-size-2:1.1rem;--font-size-3:1.25rem;--font-size-4:1.5rem;--font-size-5:2rem;--font-size-6:2.5rem;--font-size-8:3.5rem;--font-system-ui:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;--font-weight-7:700;--font-weight-9:900;--gray-0:#f8f9fa;--gray-1:#f1f3f5;--gray-12:#030507;--gray-2:#e9ecef;--gray-3:#dee2e6;--gray-4:#ced4da;--gray-6:#868e96;--gray-7:#495057;--gray-8:#343a40;--gray-9:#212529;--green-1:#d3f9d8;--green-9:#2b8a3e;--indigo-2:#bac8ff;--indigo-3:#91a7ff;--indigo-7:#4263eb;--purple-2:#eebefa;--purple-3:#e599f7;--purple-7:#ae3ec9;--radius-2:5px;--radius-3:1rem;--red-2:#ffc9c9;--red-3:#ffa8a8;--red-6:#fa5252;--red-9:#c92a2a;--shadow-6:0 -1px 2px 0 hsl(var(--shadow-color)/var(--shadow-strength-3)),0 3px 2px -2px hsl(var(--shadow-color)/var(--shadow-strength-4)),0 7px 5px -2px hsl(var(--shadow-color)/var(--shadow-strength-4)),0 12px 10px -2px hsl(var(--shadow-color)/var(--shadow-strength-5)),0 22px 18px -2px hsl(var(--shadow-color)/var(--shadow-strength-6)),0 41px 33px -2px hsl(var(--shadow-color)/var(--shadow-strength-7)),0 100px 80px -2px hsl(var(--shadow-color)/var(--shadow-strength-8));--shadow-color:220 3% 15%;--shadow-strength:1%;--shadow-strength-3:calc(var(--shadow-strength) + 2%);--shadow-strength-4:calc(var(--shadow-strength) + 3%);--shadow-strength-5:calc(var(--shadow-strength) + 4%);--shadow-strength-6:calc(var(--shadow-strength) + 5%);--shadow-strength-7:calc(var(--shadow-strength) + 6%);--shadow-strength-8:calc(var(--shadow-strength) + 7%);--size-1:.25rem;--size-10:5rem;--size-2:.5rem;--size-3:1rem;--size-4:1.25rem;--size-5:1.5rem;--size-8:3rem;--size-content-1:20ch;--size-content-2:45ch;--size-content-3:60ch;--size-fluid-5:max(4rem,min(5vw,5rem));--size-header-1:20ch;--size-header-2:25ch;--size-header-3:35ch;--size-relative-4:1.25ch;} /* open-props normalize */ :where(html){--csstools-color-scheme--light:initial;--link:var(--indigo-7);--link-visited:var(--purple-7);--text-1:var(--gray-12);--text-2:var(--gray-7);--surface-1:var(--gray-0);--surface-2:var(--gray-2);--surface-3:var(--gray-3);--surface-4:var(--gray-4);--scrollthumb-color:var(--gray-7);-webkit-text-size-adjust:none;accent-color:var(--brand,var(--link));background-color:var(--surface-1);block-size:100%;caret-color:var(--brand,var(--link));color:var(--text-1);color-scheme:light;font-family:var(--font-system-ui);line-height:var(--font-lineheight-3);scrollbar-color:var(--scrollthumb-color) transparent}@media (dynamic-range:high) or (color-gamut:p3){@supports (color:color(display-p3 0 0 0)){:where(html){--link:color(display-p3 .1 .39 1);--link-visited:color(display-p3 .6 .2 1)}}}:where(html) :where(dialog){background-color:var(--surface-1)}:where(html) :where(button,.btn){--_highlight:var(--_highlight-light);--_bg:var(--_bg-light);--_ink-shadow:var(--_ink-shadow-light)}:where(html) :where(button,.btn) :where([type=reset]){--_text:var(--red-6);--_border:var(--red-3)}:where(html) [disabled]:where(button,input[type=button],.btn){--_text:var(--gray-6)}:where(html) [disabled]:where(button,input[type=submit],.btn){--_text:var(--gray-6)}:where(html) [disabled]:where(button,input[type=reset],.btn){--_text:var(--gray-6)}:where(html) :where(textarea,select,input:not([type=button],[type=submit],[type=reset])){background-color:var(--surface-2)}@media (prefers-color-scheme:dark){:where(html){--csstools-color-scheme--light: ;--link:var(--indigo-3);--link-visited:var(--purple-3);--text-1:var(--gray-1);--text-2:var(--gray-4);--surface-1:var(--gray-9);--surface-2:var(--gray-8);--surface-3:var(--gray-7);--surface-4:var(--gray-6);--scrollthumb-color:var(--gray-6);--shadow-strength:10%;--shadow-color:220 40% 2%;color-scheme:dark}}:where(a[href]){color:var(--brand,var(--link))}:where(a[href]):where(:visited){color:var(--link-visited)}:focus-visible{outline-color:var(--brand,var(--link))}*,:after,:before{box-sizing:border-box}:where(:not(dialog)){margin:0}:where(:not(fieldset,progress,meter)){background-origin:border-box;background-repeat:no-repeat;border-style:solid;border-width:0}@media (prefers-reduced-motion:no-preference){:where(html){scroll-behavior:smooth}}@media (prefers-reduced-motion:no-preference){:where(:focus-visible){transition:outline-offset 145ms var(--ease-2)}:where(:not(:active):focus-visible){transition-duration:.25s}}:where(:not(:active):focus-visible){outline-offset:5px}:where(body){min-block-size:100%}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance;font-weight:var(--font-weight-9);line-height:var(--font-lineheight-1)}:where(h1){font-size:var(--font-size-8);max-inline-size:var(--size-header-1)}:where(h2){font-size:var(--font-size-6);max-inline-size:var(--size-header-2)}:where(h3){font-size:var(--font-size-5)}:where(h4){font-size:var(--font-size-4)}:where(h5){font-size:var(--font-size-3)}:where(h3,h4,h5,h6,dt){max-inline-size:var(--size-header-3)}:where(p,ul,ol,dl,h6){font-size:var(--font-size-2)}:where(a,u,ins,abbr){text-underline-offset:1px}@supports (-moz-appearance:none){:where(a,u,ins,abbr){text-underline-offset:2px}}:where(a[href],area,button,input:not([type=text],[type=email],[type=number],[type=password],[type=""],[type=tel],[type=url]),label[for],select,summary,[tabindex]:not([tabindex*="-"],pre)){cursor:pointer}:where(a[href],area,button,input,label[for],select,summary,textarea,[tabindex]:not([tabindex*="-"])){-webkit-tap-highlight-color:transparent;touch-action:manipulation}:where(a):where([href]){text-decoration-color:var(--indigo-2)}:where(a):where([href]):where(:visited){text-decoration-color:var(--purple-2)}:where(a):where(:not(:hover)){text-decoration:inherit}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,svg,video){block-size:auto;max-inline-size:100%}:where(input,button,textarea,select),:where(input[type=file])::-webkit-file-upload-button{color:inherit;font:inherit;font-size:inherit;letter-spacing:inherit}::placeholder{color:var(--gray-7);opacity:.75}:where(input:not([type=range]),textarea){padding-block:var(--size-1);padding-inline:var(--size-2)}:where(select){field-sizing:content;padding-block:.75ch;padding-inline:var(--size-relative-4) 0}:where(textarea,select,input:not([type=button],[type=submit],[type=reset])){background-color:var(--surface-2);border-radius:var(--radius-2)}:where(textarea){field-sizing:content;min-block-size:2lh;min-inline-size:var(--size-content-1);resize:vertical}:where(input[type=checkbox],input[type=radio]){block-size:var(--size-3);inline-size:var(--size-3)}:where(svg:not([width])){inline-size:var(--size-10)}:where(code,kbd,samp,pre){font-family:var(--font-monospace-code),monospace}:where(:not(pre)>code,kbd){white-space:nowrap}:where(pre){direction:ltr;max-inline-size:max-content;min-inline-size:0;white-space:pre;writing-mode:lr}:where(:not(pre)>code){background:var(--surface-2);border-radius:var(--radius-2);padding:var(--size-1) var(--size-2);writing-mode:lr}:where(kbd,var){border-color:var(--surface-4);border-radius:var(--radius-2);border-width:var(--border-size-1);padding:var(--size-1) var(--size-2)}:where(mark){border-radius:var(--radius-2);padding-inline:var(--size-1)}:where(ol,ul){padding-inline-start:var(--size-8)}:where(li){padding-inline-start:var(--size-2)}:where(li,dd,figcaption){max-inline-size:var(--size-content-2)}:where(p){text-wrap:pretty;max-inline-size:var(--size-content-3)}:where(dt,summary){font-weight:var(--font-weight-7)}:where(dt:not(:first-of-type)){margin-block-start:var(--size-5)}:where(small){font-size:max(.5em,var(--font-size-0));max-inline-size:var(--size-content-1)}:where(hr){background-color:var(--surface-3);height:var(--border-size-2);margin-block:var(--size-fluid-5)}:where(figure){display:grid;gap:var(--size-2);place-items:center}:where(figure)>:where(figcaption){text-wrap:balance;font-size:var(--font-size-1)}:where(blockquote,:not(blockquote)>cite){border-inline-start-width:var(--border-size-3)}:where(blockquote){display:grid;gap:var(--size-3);max-inline-size:var(--size-content-2);padding-block:var(--size-3);padding-inline:var(--size-4)}:where(:not(blockquote)>cite){padding-inline-start:var(--size-2)}:where(summary){background:var(--surface-3);border-radius:var(--radius-2);margin:calc(var(--size-2)*-1) calc(var(--size-3)*-1);padding:var(--size-2) var(--size-3)}:where(details){background:var(--surface-2);border-radius:var(--radius-2);padding-block:var(--size-2);padding-inline:var(--size-3)}:where(details[open]>summary){border-end-end-radius:0;border-end-start-radius:0;margin-bottom:var(--size-2)}:where(fieldset){border:var(--border-size-1) solid var(--surface-4);border-radius:var(--radius-2)}:where(del){background:var(--red-9);color:var(--red-2)}:where(ins){background:var(--green-9);color:var(--green-1)}:where(abbr){text-decoration-color:var(--blue-5)}:where(dialog){background-color:var(--surface-1);border-radius:var(--radius-3);box-shadow:var(--shadow-6);color:inherit}:where(menu){display:flex;gap:var(--size-3);padding-inline-start:0}:where(sup){font-size:.5em}:where(table){--nice-inner-radius:calc(var(--radius-3) - 2px);background:var(--surface-2);border:1px solid var(--surface-2);border-radius:var(--radius-3);width:fit-content}:where(table:not(:has(tfoot)) tr:last-child td:first-child){border-end-start-radius:var(--nice-inner-radius)}:where(table:not(:has(tfoot)) tr:last-child td:last-child){border-end-end-radius:var(--nice-inner-radius)}:where(table thead tr:first-child th:first-child){border-start-start-radius:var(--nice-inner-radius)}:where(table thead tr:first-child th:last-child){border-start-end-radius:var(--nice-inner-radius)}:where(tfoot tr:last-child th:first-of-type){border-end-start-radius:var(--nice-inner-radius)}:where(tfoot tr:last-child td:first-of-type){border-end-start-radius:var(--nice-inner-radius)}:where(tfoot tr:last-child th:last-of-type){border-end-end-radius:var(--nice-inner-radius)}:where(tfoot tr:last-child td:last-of-type){border-end-end-radius:var(--nice-inner-radius)}:where(th){background-color:var(--surface-2);color:var(--text-1)}:where(table a:not(.does-not-exist):focus-visible){outline-offset:-2px}:where(table button:not(.does-not-exist):focus-visible){outline-offset:-2px}:where(table [contenteditable]:focus-visible){outline-offset:-2px}:where(td){text-wrap:pretty;background:var(--surface-1);max-inline-size:var(--size-content-2)}:where(td,th){padding:var(--size-2);text-align:left}:where(td:not([align])){text-align:center}:where(th:not([align])){text-align:center}:where(thead){border-collapse:collapse}:where(table tr:hover td),:where(tbody tr:nth-child(2n):hover td){background-color:var(--surface-3)}:where(table>caption){margin:var(--size-3)}:where(tfoot button){padding-block:var(--size-1);padding-inline:var(--size-3)}@media (prefers-color-scheme:dark){:where(textarea,select,input:not([type=button],[type=submit],[type=reset])){background-color:#171a1c}:where(dialog){background-color:var(--surface-2)}::placeholder{color:var(--gray-6)}} /* ═══════════════════════════════════════════════════════════════════════ FredFix — Stylesheet ═══════════════════════════════════════════════════════════════════════ */ /* ── Design Tokens ─────────────────────────────────────────────────── */ :root { /* Merk — beide kleuren gemeten uit de logobestanden (extract + spotsamples). Merkblauw is ALTIJD een vlak met wit erop: op de navy grond haalt het 1,76:1 en is het dus onleesbaar als tekst. Wit op merkblauw = 10,1:1. */ --primary: #013F8A; --accent: #013F8A; /* het merk heeft twee kleuren: navy = grond, blauw = accent */ /* Oppervlakken en tekst — donkere grond */ --bg: #05192D; --surface: #0B2237; --text: #F2F6FA; --text-muted: #93A6B8; --border: #16324B; /* Bedieningselementen hebben een eigen, lichtere rand dan een decoratieve lijn: WCAG 1.4.11 vraagt 3:1 voor de begrenzing van een invoerveld. --border haalt 1,35:1 op de grond en is dus alleen bruikbaar als scheiding, niet als rand van een veld. Gemeten: 3,43:1 op de grond, 3,13:1 op --surface. De focusrand is merkblauw OPGELICHT — #013F8A zelf haalt 1,76:1 op deze grond en is daarom nergens een lijn of rand op donker. */ --field-border: #51708F; --field-focus: #3B87E0; /* Licht register (registerwissel: storingen + werkgebied) */ --light-bg: #E8EDF2; --light-surface: #FFFFFF; --light-text: #05192D; --light-muted: #47607A; --light-border: #C9D4DE; /* Donkere secties — deze site IS donker, dus gelijk aan de basis */ --dark-bg: #05192D; --dark-text: #F2F6FA; --dark-text-muted: #93A6B8; /* Vorm en maat */ --radius: 2px; --radius-lg: 2px; --max-width: 1160px; --nav-height: 108px; --section-padding: clamp(2.5rem, 5vw, 4rem); /* ritme-preset Compact: dichtheid = competentie */ /* Hoever de actieband onder de heronaad uitsteekt. Eén bron, want dit getal staat op twee plekken die exact gelijk moeten blijven: de negatieve marge van de band en de compenserende bovenpadding van de sectie eronder. Stonden die los, dan is de ruimte onder de band niet meer gelijk aan het normale sectieritme — hier was dat 16px teveel op telefoon en 24px op desktop. */ --band-overhang: clamp(2.5rem, 5vw, 4rem); --transition: 0.28s cubic-bezier(0.32, 0.72, 0, 1); /* Typografie — zelf gehost, zie @font-face onderaan dit blok */ --font: 'Mulish', 'Mulish Fallback', system-ui, sans-serif; --font-heading: 'Saira', 'Saira Fallback', system-ui, sans-serif; /* Typeschaal — ratio 1.200 (Compact). Display-stappen 4/5 lopen bewust verder door: dit is een type-gedreven hero zonder beeld. */ --step--1: clamp(0.875rem, 0.85rem + 0.12vw, 0.95rem); --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.08rem); --step-1: clamp(1.15rem, 1.09rem + 0.3vw, 1.33rem); --step-2: clamp(1.38rem, 1.28rem + 0.5vw, 1.65rem); --step-3: clamp(1.66rem, 1.48rem + 0.85vw, 2.1rem); --step-4: clamp(2rem, 1.6rem + 1.9vw, 3rem); --step-5: clamp(2.05rem, 1.35rem + 3.6vw, 4.9rem); /* Spacing-schaal — normaal werk komt hieruit; gedocumenteerde optische uitzonderingen mogen. Semantiek: 1 inline/icoon-gap · 2 label→kop · 3 kop→body, binnen component 4 component-padding · 5 component→component · 6 blok→blok binnen sectie 7 sectiegroep · sectie-tot-sectie = var(--section-padding) */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2.5rem; --space-7: 4rem; /* Z-index-schaal — nooit losse 999/9999 */ --z-nav: 1000; --z-menu: 1100; /* mobiel menu + overlay: boven de nav */ --z-progress: 1200; --z-overlay: 1300; /* preloader, lightbox-laag */ /* Formulier-status (main.js verwacht deze namen) */ --color-success: #2f7a43; --color-danger: #b3372f; } /* ── Base reset ────────────────────────────────────────────────────── */ * { box-sizing: border-box; } /* open-props normalize indents the
  • via padding-inline-start (NOT the