/* ══════════════════════════════════════════════════════════════════════════════════════ MERKLETTER VAN DE CONSOLE - Hanken Grotesk voor de tekst, Spectral voor de koppen 27 okt 2026 ------------------------------------------------------------------------------------------ WAAROM DIT BESTAND BESTAAT EN NIET IN DE SCHIL ZIT. De zestien @font-face-regels hieronder zijn samen 5.503 bytes, en crm.html mag van test-appsplit niet boven de 140.000 bytes komen. Hij zat op 129.454, dus het had erin gepast, maar dan was er van de 10.546 bytes lucht nog maar 5.000 over, en die lucht is vorige week met een verhuizing van 142 css-regels gewonnen. Een eigen stijlblad kost de schil alleen de -regel. De drie stijlbladen staan in dezelfde kop en worden door de browser naast elkaar opgehaald, dus er komt geen wachttijd bij; wat er wel bij komt is dat de browser de fontbestanden pas kent nadat DIT bestand binnen is. Daarom staat op elke regel font-display:swap: tot het font er is tekent hij de tekst in het systeemlettertype en daarna wisselt hij. Dat is dezelfde afweging die verkopersvolger.css en klantenbestand.css al dragen. VASTE REGEL, DEZELFDE ALS BIJ klantenbestand.css: Deploy-WebCRM.command stempelt ALLEEN crm-app.js. Wie dit bestand wijzigt, bumpt dus ZELF het ?v= van merk.css in crm.html. DE BESTANDEN ZIJN ZELF GEHOST EN KOMEN BYTE-IDENTIEK UIT DE MLS. Geen fonts.googleapis.com en geen fonts.gstatic.com: een link naar een derde partij zou bij elke console-start een verzoek buiten ons eigen domein sturen. De zestien woff2 in /fonts/ zijn md5-voor-md5 gelijk aan die in babysteps-live-site/fonts, die op hun beurt uit @fontsource/hanken-grotesk 5.3.0 en @fontsource/spectral 5.3.0 komen. De licentie reist mee in /fonts/LICENSE.txt. DE REGELS HIERONDER ZIJN LETTERLIJK DE REGELS VAN DE MLS. Ze zijn gegenereerd met dezelfde opbouw als fontFaces() in netlify/edge-functions/property-route.js: dezelfde families, dezelfde gewichten, dezelfde twee subsets, dezelfde unicode-range en dezelfde font-display. Daardoor laadt de console precies dezelfde letter als babystepsmls.com en de publieke pandpagina's, en kan een bezoeker die van de ene naar de andere gaat de bestanden hergebruiken. WAT DE SUBSETS NIET DEKKEN: CYRILLISCH. Hanken Grotesk heeft geen Cyrillische letters, en van Spectral zijn alleen latin en latin-ext overgenomen. De unicode-range zorgt ervoor dat de browser voor Russische tekst dus NIET naar deze bestanden grijpt maar naar de volgende letter in de rij, system-ui. Dat is precies wat de console vandaag al overal doet, dus voor een Russische gebruiker verandert er niets; hij krijgt alleen niet de merkletter. Tsjechisch en Lets vallen WEL binnen latin-ext en krijgen de merkletter dus volledig. Zie het rapport. ══════════════════════════════════════════════════════════════════════════════════════ */ @font-face{font-family:"Spectral";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/spectral-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Spectral";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/spectral-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Spectral";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/spectral-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Spectral";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/spectral-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Spectral";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/spectral-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Spectral";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/spectral-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/hanken-grotesk-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/hanken-grotesk-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/hanken-grotesk-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/hanken-grotesk-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/hanken-grotesk-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/hanken-grotesk-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/hanken-grotesk-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/hanken-grotesk-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/hanken-grotesk-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/hanken-grotesk-latin-ext-800-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} /* ── DE KOPPEN: SPECTRAL ───────────────────────────────────────────────────────────────── DE MLS ZET SPECTRAL MET EEN KLASSE (.serif) op zijn display-koppen, niet op alle h-elementen. Dat kan daar, want dat zijn een paar vaste pagina's. De console heeft tientallen schermen die hun koppen in javascript bouwen; een klasse zou betekenen dat elke nieuwe kop eraan gedacht moet worden, en dan loopt het na de derde order uit elkaar. Daarom hangt het hier aan de KOPELEMENTEN binnen het inhoudsdeel. Gevolg: elke kop die er al staat en elke kop die er nog bij komt krijgt de merkkop-letter, zonder dat iemand eraan hoeft te denken. WAT ER BEWUST BUITEN VALT: de ZIJBALK. Die staat buiten .content, dus de menu-items blijven Hanken. Een menu is navigatie en geen kop; in de MLS staat de merkbalk ook niet in Spectral. .pa-ptitle en .kl-kaart-naam. Dat zijn geen kopelementen maar labels van 12 en 15 pixels binnen een paneel. Een serif op een label van 12 pixels leest als een drukfout. HET CONTRACT (.ct). Dat is een document dat ondertekend en afgedrukt wordt en zijn eigen typografie draagt, inclusief een Georgia-firmanaam. Zijn koppen blijven dus waar ze stonden. De LOPENDE tekst van het contract volgt wel de body, net als alles. DE DRIE MERKKOP-TITELS zijn h2 (Klantenbestand) en h3 (Verkopersvolger en verkoperconsole) binnen .content en vallen dus onder de eerste regel. Dat is in een echte browser nagemeten op de computed font-family, niet aangenomen. */ .content h1, .content h2, .content h3, .content h4, .sheet h1, .sheet h2, .sheet h3, .login h1{ font-family:"Spectral",Georgia,serif; } .ct h1, .ct h2, .ct h3, .ct h4{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; } /* ── KNOPPEN ERVEN DE LETTER NIET VAN ZICHZELF ─────────────────────────────────────────── EEN