/* ═══════════════════════════════════════════════════════════════ TESTROUTE — CANONICAL PAGE FRAME (single source of truth) ─────────────────────────────────────────────────────────────── Every full-width page must begin its content on the SAME vertical line as the logo in the header. The header defines that line: .tr-hdr__inner max-width 1200px, centred, 16px side gutter logo left edge = max(0,(100vw - 1200)/2) + 16px (all widths) Pages that ALREADY sit on that line (left untouched here): the homepage (.tr-hp__inner), Road signs (.trrs-w), single Guides (.trg-art-shell) and DTC content (.trdtc-w). All four use 16px. Pages that had drifted to a 32px desktop gutter (16px too far to the right of the logo) and are now pulled back to the canonical edge: .trh-w Test routes, Manoeuvres, Show me / tell me .trg-inner Guides hub .trdtc-md-w DTC "more details" content band WHY a central token plus overrides, instead of editing each module: the gutter had been "corrected" several times against stale ideas of what the header used (a DTC comment still claims 20px), so the value kept drifting back out of line. This file is the only knob. WHY these exact selectors: each one is deliberately one class more specific than any module rule it overrides, so the winner is chosen by SPECIFICITY, not by source order. That keeps the alignment correct even after BerqWP concatenates and reorders the stylesheets. Only the horizontal padding is set (never vertical, never an animated property), so every section's spacing and transitions stay exactly as designed. ═══════════════════════════════════════════════════════════════ */ :root { --tr-frame-max: 1200px; /* shared content width (informational) */ --tr-gutter: 16px; /* THE side gutter. Change it here only. */ /* ═══════════════════════════════════════════════════════════════ DE TYPETRAP Geteld, niet bedacht: 1196 font-size-regels over 35 stylesheets, verdeeld over 40 verschillende waarden. 320 daarvan staan op een halve pixel — 10.5, 11.5, 12.5, 13.5, 14.5, 15.5, 16.5, 17.5. Die halve stappen zijn geen ontwerp. Ze ontstaan doordat iets "net iets te groot" leek en een half pixeltje kleiner werd gezet, en het verschil tussen 14 en 14.5 is voor het oog geen verschil in HIËRARCHIE maar ruis: je ziet niet dat het kleiner is, je ziet dat het niet klopt. Zes stappen, en elke stap is een piek in die telling: --t-1 11px 132x uppercase labels, badges, eyebrows --t-2 12px 140x meta: bijschriften, datums, "one payment" --t-3 13px 188x secundair: chips, links, hulpteksten --t-4 14px 92x dichte tekst: tabelcellen, lijstitems --t-5 15px 74x lopende tekst --t-6 17px 23x lead: intro's, antwoordparagrafen Hiërarchie tussen twee dingen van dezelfde grootte maak je met gewicht en kleur, niet met een halve pixel. Dat staat al in pricing.css: "Head. Weight rather than size." Koppen vallen hier buiten: die staan op clamp() en schalen mee met de viewport. Cijfers die als cijfer gelezen worden (de prijs, de statistieken) ook — dat is beeld, geen tekst. ALTIJD MET FALLBACK GEBRUIKEN: font-size: var(--t-5, 15px). Laadt dit bestand een keer niet, dan erft de tekst anders de grootte van zijn ouder en klapt de pagina in elkaar. bin/typescale.py telt wat er nog naast staat. ═══════════════════════════════════════════════════════════════ */ --t-1: 11px; --t-2: 12px; --t-3: 13px; --t-4: 14px; --t-5: 15px; --t-6: 17px; } /* Test routes / Manoeuvres / Show me, tell me. Doubled .trh-w gives 3 classes, beating the 2-class section rules such as .trm-video > .trh-w and .trh-hero > .trh-w. */ .trh-root .trh-w.trh-w { padding-left: var(--tr-gutter, 16px) !important; padding-right: var(--tr-gutter, 16px) !important; } /* Guides hub. */ .trg-root .trg-inner.trg-inner { padding-left: var(--tr-gutter, 16px) !important; padding-right: var(--tr-gutter, 16px) !important; } /* DTC "more details" band. */ .trdtc .trdtc-md-w.trdtc-md-w { padding-left: var(--tr-gutter, 16px) !important; padding-right: var(--tr-gutter, 16px) !important; } /* ═══════════════════════════════════════════════════════════════ DE METRIC-FALLBACK, OVERAL BESCHIKBAAR Eerste poging hier was 'Lato', en die was op twee manieren fout. 1. HET VERKEERDE LETTERTYPE. Het thema laadt Lato, maar de plugin zet voor zijn eigen inhoud overal 'Inter'. De meting liet de werkelijk gebruikte stack zien: Inter, "Inter Fallback", -apple-system, … Die 'Lato Fallback' in header.css hoort bij de themetekst, niet bij de onze. 2. ZONDER !important, terwijl de moduleregels dat wél hebben. Mijn regel verloor dus sowieso. De @font-face voor 'Inter Fallback' bestond al, maar alleen in homepage.css — dus op elke andere pagina bestond hij niet eens, ook al had je hem in een stack gezet. Hier staat hij, in een stylesheet die overal geladen wordt. De stacks zelf worden per module aangevuld: die hebben !important en winnen van alles wat hier staat. ═══════════════════════════════════════════════════════════════ */ @font-face { font-family: 'Inter Fallback'; src: local('Arial'), local('Helvetica'); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } /* ── FIGUUR ──────────────────────────────────────────────────────────── In frame.css en niet in een module, want een figuur hoort net zo goed in een gids als in een nieuwsbericht — dat was de reden om het blokmechanisme te delen. Het ritme volgt guide.css: alinea 22, H2 48 erboven. Een figuur onderbreekt de tekst ongeveer net zo hard als een tussenkop. */ .trf{margin:48px 0 40px !important} .trf-kop{font-size:15px !important;font-weight:500 !important;color:#fff !important; margin:0 0 5px !important;letter-spacing:-.01em !important} .trf-sub{font-size:13.5px !important;line-height:1.55 !important; color:rgba(255,255,255,.5) !important;margin:0 0 22px !important} .trf-legenda{display:flex !important;flex-wrap:wrap !important;gap:16px !important; margin:0 0 12px !important;font-size:12px !important;color:rgba(255,255,255,.6) !important} .trf-legenda span{display:inline-flex !important;align-items:center !important;gap:6px !important} .trf-legenda i{width:14px !important;height:3px !important;border-radius:2px !important;display:block !important} /* Twee tekeningen, gewisseld met CSS — nooit met JavaScript, want een crawler moet ze allebei kunnen zien. Dezelfde regel als bij de prijstabel. De grens ligt op 640px: daaronder is de kolom zo smal dat een viewBox van 700 met 0,51 verkleint en een asgetal van 11px op 5,6px uitkomt. */ .trf-svg{display:block !important;width:100% !important;height:auto !important; overflow:visible !important} .trf-svg--breed{display:none !important} .trf-svg--smal{display:block !important} @media (min-width:640px){ .trf-svg--breed{display:block !important} .trf-svg--smal{display:none !important} } .trf-as{font-size:11px !important;fill:rgba(255,255,255,.38) !important} .trf-as-l{font-size:11px !important;fill:rgba(255,255,255,.45) !important;font-weight:500 !important} .trf-w{font-size:13.5px !important;fill:rgba(255,255,255,.85) !important;font-weight:600 !important} .trf-w.is-nu{fill:#fff !important;font-weight:700 !important} .trf-n{font-size:10.5px !important;fill:rgba(255,255,255,.5) !important;font-weight:500 !important} .trf-bron{font-size:12.5px !important;line-height:1.5 !important; color:rgba(255,255,255,.34) !important;margin:18px 0 0 !important; padding-top:12px !important;border-top:1px solid rgba(255,255,255,.10) !important} .trf-bron::before{content:"Source — " !important;color:rgba(255,255,255,.24) !important} .trf-bron a{color:rgba(255,255,255,.46) !important;text-decoration:underline !important} .trf-fout{color:#d4583f !important;font-size:13px !important} /* De cijfers als tekst: visueel verborgen, wel in de DOM. Een screenreader leest ze en Google kan ze indexeren — dat kan een plaatje niet, en dat is precies waarom dit geen plaatje is. */ .trf-data{position:absolute !important;width:1px !important;height:1px !important; overflow:hidden !important;clip:rect(0 0 0 0) !important;white-space:nowrap !important}