/* ========================================================================== INSITELY TOKENS Eén bron voor kleur en typografie over alle web apps. Importeer dit als eerste, voor elke andere stylesheet. @import url('/static/css/insitely-tokens.css'); Regel: geen enkele andere stylesheet bevat nog een hex-waarde. Alles verwijst naar een variabele uit dit bestand. ========================================================================== */ /* ========================================================================== MONTSERRAT, zelf gehost Geen Google Fonts CDN: dat stuurt het IP van elke bezoeker naar Google en vraagt in de EU om toestemming. Zes woff2-bestanden in static/fonts/. Het pad is absoluut, zodat dit bestand vanuit elke map geladen kan worden. Voor losse statische pagina's buiten Flask, zoals www/, moet /static/ bereikbaar zijn of moet je het pad hier relatief maken. Samen 124 kB, de browser haalt enkel de gewichten op die een pagina effectief gebruikt. Regular 400, Medium 500, ExtraBold 800, elk met italic. ========================================================================== */ @font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap; src:url('/static/fonts/montserrat-v31-latin-regular.woff2') format('woff2')} @font-face{font-family:'Montserrat';font-style:italic;font-weight:400;font-display:swap; src:url('/static/fonts/montserrat-v31-latin-italic.woff2') format('woff2')} @font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap; src:url('/static/fonts/montserrat-v31-latin-500.woff2') format('woff2')} @font-face{font-family:'Montserrat';font-style:italic;font-weight:500;font-display:swap; src:url('/static/fonts/montserrat-v31-latin-500italic.woff2') format('woff2')} @font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap; src:url('/static/fonts/montserrat-v31-latin-800.woff2') format('woff2')} @font-face{font-family:'Montserrat';font-style:italic;font-weight:800;font-display:swap; src:url('/static/fonts/montserrat-v31-latin-800italic.woff2') format('woff2')} :root { /* --- Blauw ------------------------------------------------------------ Twee basissen, elk met een vaste rol. Digitaal bouwt op navy, print bouwt op printblauw. Nooit samen op dezelfde drager. */ --in-navy: #002844; /* digitale basis */ --in-navy-deep: #001B2E; /* footers, diepste vlak */ --in-blue: #1C4966; /* PRINTBLAUW. Uitsluitend voor print en PDF. Nooit in web-CSS, nooit in een template, nooit in een mail. Digitaal bouwt op navy. De canon zegt: nooit samen op dezelfde drager. Gebruik je dit op een scherm, dan is dat per definitie een afwijking. */ --in-blue-mid: #2D7397; /* links, hover, tussenvlak */ --in-light-blue: #99D9F2; /* Light Blue, links en accenten op donker */ --in-blue-100: #D6ECF6; --in-blue-50: #EFF7FB; /* --- Verde Scandal ----------------------------------------------------- Contrastkleur. Bewust schaars. Lijntjes, CTA's, highlights. Leeft op donker. Op wit enkel als vlak met donkere tekst erop, nooit als letter en nooit als haarlijn. */ --in-verde-scandal: #A6E800; /* Verde Scandal */ --in-verde-scandal-dark:#8DC500; /* hover en active */ /* --- Iron Ore, de neutralen ------------------------------------------- Eén familie, drie waarden. Deep is tekst, Iron Ore is signature, Light is tekst op donker. */ --in-ink: #26261F; /* Iron Ore Deep */ --in-iron-ore: #434343; /* signature, fysieke toepassingen */ --in-mist: #95A3AB; /* Iron Ore Light */ --in-line: #D9DEE1; --in-wash: #F7F9FA; --in-white: #FFFFFF; /* --- Status, geen huisstijl maar functie ------------------------------ Rood is uitsluitend voor fouten en leeft enkel op lichte dragers. Nooit rood op navy of printblauw: het contrast is daar 2,8 en 1,8. Een foutmelding hoort dus op een licht vlak te staan. Er is geen waarschuwingskleur: gebruik Iron Ore Light voor "let op". */ --in-error: #C0392B; /* 5,4 op wit, enkel op licht */ --in-error-bg: #FBEDEB; --in-success: #1E7A4A; --in-success-bg: #EAF5EF; /* --- Semantische rollen ----------------------------------------------- Gebruik bij voorkeur deze, niet de kleurnamen hierboven. */ --in-text: var(--in-ink); /* body op licht, 15,4:1 */ --in-text-muted: #5B5B54; /* bijschrift op licht, 7,2:1 */ --in-text-on-dark: var(--in-white); --in-text-link: var(--in-navy); /* links op licht, 15,1:1, ALTIJD onderlijnd */ --in-text-link-dark: var(--in-light-blue); /* links op donker, 9,8:1 */ --in-text-on-verde-scandal:var(--in-ink); /* nooit wit, zie onder */ /* Primaire knop, overal dezelfde. Op navy secties valt de vulling weg tegen de achtergrond en blijft de omlijning over. */ --in-btn-bg: var(--in-navy); --in-btn-border: var(--in-verde-scandal); --in-btn-text: var(--in-verde-scandal); --in-btn-bg-hover: var(--in-verde-scandal); --in-btn-text-hover: var(--in-ink); --in-border-strong: var(--in-mist); --in-focus: var(--in-verde-scandal); /* --- Typografie -------------------------------------------------------- */ --in-font-body: 'Montserrat', sans-serif; --in-font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace; --in-weight-medium: 500; /* --- Vorm en ritme ----------------------------------------------------- */ --in-radius-btn: 20px; /* alle knoppen, beslissing Roel: overal 20px */ --in-radius-sm: 6px; --in-radius-md: 12px; --in-radius-lg: 20px; --in-pad: 24px; --in-maxw: 1180px; } /* ========================================================================== CONTRASTREGELS, niet onderhandelbaar Gemeten volgens WCAG. Drempel 4,5 voor gewone tekst, 3 voor tekst vanaf 18,66px vet of 24px normaal. MAG wit op navy 15,2 alles wit op printblauw 9,7 alles Iron Ore Deep op wit 15,4 alles Verde Scandal op navy 10,2 alles Verde Scandal op printblauw 6,5 alles Verde Scandal op Iron Ore 6,7 alles Iron Ore Deep op Verde 10,3 knoptekst Iron Ore Light op navy 5,8 alles Light Blue op navy 9,8 links op donker navy op wit 15,1 links op licht, altijd onderlijnd MAG NIET rood op navy 2,8 foutmeldingen horen op een licht vlak rood op printblauw 1,8 idem Verde Scandal op wit 1,5 nooit als tekst en nooit als haarlijn. Op wit raakt het groen enkel wit als rand rond een navy knop, nooit als letter wit op Verde Scandal 1,5 zet Iron Ore Deep op groene knoppen Iron Ore Light op wit 2,6 gebruik --in-text-muted Light Blue op wit 1,6 gebruik --in-text-link navy zonder onderlijning links zijn dan niet herkenbaar naast Iron Ore Deep body (1,0) ========================================================================== */ /* ========================================================================== LEGACY ALIASSEN Zodat de bestaande templates blijven werken zonder aanpassing. Nieuwe code gebruikt deze namen niet meer. Verwijder een alias pas nadat je de laatste template hebt omgezet. ========================================================================== */ :root { /* insitelystyle.css */ --blue-900: var(--in-navy-deep); --blue-500: var(--in-blue-mid); --blue-400: var(--in-light-blue); --blue-100: var(--in-blue-100); --blue-50: var(--in-blue-50); --slate-800: var(--in-ink); --slate-700: var(--in-iron-ore); --slate-600: var(--in-text-muted); --slate-400: var(--in-mist); --slate-200: var(--in-line); --slate-100: var(--in-wash); --slate-50: var(--in-wash); --accent: var(--in-verde-scandal); /* legacy alias */ --error: var(--in-error); --error-bg: var(--in-error-bg); --success: var(--in-success); --success-bg: var(--in-success-bg); --white: var(--in-white); --font-mono: var(--in-font-mono); --radius-sm: var(--in-radius-sm); --radius-md: var(--in-radius-md); --radius-lg: var(--in-radius-lg); --radius-xl: var(--in-radius-lg); /* site.css */ /* styles.css */ --navy: var(--in-navy); --navy-dark: var(--in-navy-deep); --footer: var(--in-navy-deep); --teal: var(--in-navy); --grey: var(--in-text-muted); --mint: var(--in-wash); --maxw: var(--in-maxw); }