/* ═══════════════════════════════════════════════════════════════════ * 4.153.0 · TELEFOON, VOOR ALLE PAGINA'S * * De telefoonregels van de centrumpagina's (4.132.0 en 4.133.0, in * modules/dtc/assets/css/frontend.css) en de homepage (4.131.0) voor de * rest van de site: Driving test routes, Manoeuvres, Road signs, Show me * tell me, About us, Help, Contact, Pricing, Reviews, E-book, Affiliate, * Work with us, Share a route, de gidsen, het nieuws, de 404 en de * inlogpagina's. Gemeten op 3 november 2026 op een iPhone van 393 pixels * breed, Micks keuzes van dezelfde dag (artefact "Telefoonopmaak Driving * test routes": 1 t/m 9 behalve 4, en dan voor alle pagina's). * * WAAROM ÉÉN BESTAND * De regels van 4.132/4.133 staan op de namen van de centrumpagina * (trdtc-) en golden dus nergens anders. Hier staan ze één keer, voor * alles wat de pagina's delen (de bovenkant, de koppen, het lettertype, * de vragen), met daaronder per pagina alleen wat die pagina eigen heeft. * Een nieuwe pagina met .trh-root krijgt deel 1 en 2 vanzelf. * * WAAROM PIXELS EN GEEN REM * Het thema (Pro/Cornerstone) zet de basismaat van html op 8px onder * 978px, 11px tot 1199px en 14px daarboven. Onze stylesheets rekenden met * rem alsof dat 16px was: de hoofdkop (2,875rem) werd op de telefoon 23px * in plaats van 41, kleiner dan de sectiekoppen van 30px eronder, en de * koppen met "* .089" (affiliate, work with us, share a route, help, * pricing) 16 tot 18px in plaats van 32. Alles hieronder staat in px. * * Geladen op elke pagina, na de stylesheets van de modules * (includes/phone.php, prioriteit 100). Alles !important, zoals de rest: * Cornerstone. Selectoren beginnen met de root (.trh-root, .trg-root, * .trg-art-root) zodat ze zwaarder zijn dan de regel die ze vervangen. * * BEWUST NIET AANGERAAKT * - Help en het bedankscherm van Contact: leestekst 17px, met opzet * ("de lezer is geïrriteerd en misschien buiten", help.css). * - Gidsartikelen, nieuwsartikelen, voorwaarden, privacy, cookies: * artikeltekst van 17 tot 17,5px. Alleen de hoofdkop en de letter. * - Tablet (700 tot 977px): ook daar halveert het thema de rem. Apart. * - De sessies van Show me tell me en Road signs (.tss): die zetten Lato * met opzet op hun koppen en winnen van deel 1 (zwaardere selector). * - De knoppen en chips van tr-cta-system.css: die zijn sitebreed. * ═══════════════════════════════════════════════════════════════════ */ /* ── 1 · ALLE SCHERMEN ─────────────────────────────────────────────── */ /* 1a · Eén letter. Het thema zet Lato op h1 t/m h6, knoppen en velden; alles eromheen staat in Inter. Zoals de homepage (4.131.0) en de centrumpagina's (4.133.0). */ :is(.trh-root,.trg-root,.trg-art-root) :is(h1,h2,h3,h4,h5,h6,button,input,select,textarea){ font-family:'Inter','Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif !important} /* 1b · Het label boven een kop: in kapitalen en 10px boven de kop. De reset ".trh-root *" (margin 0, text-transform none) staat in de meeste stylesheets ná de regel van het label en won, dus stond er "UK driving test routes" in kleine letters met wijde spatiëring tegen de kop aan. */ .trh-root .trh-eyebrow{text-transform:uppercase !important;margin:0 0 10px !important} /* 1c · Share a route: de kop boven de vragen had geen eigen opmaak en kreeg die van het thema (12px Lato). Nu die van de andere FAQ-koppen. */ .trh-root.trsr-page .trh-faq h2{margin:0 !important;font-size:24px !important;line-height:1.2 !important; font-weight:700 !important;letter-spacing:-.02em !important;color:rgba(255,255,255,.92) !important} @media (min-width:700px){.trh-root.trsr-page .trh-faq h2{font-size:28px !important}} /* ── 2 · TELEFOON, GEDEELD (onder 700px) ───────────────────────────── */ @media (max-width:699px){ /* 2a · Hoofdkop in px. Twee maten, zoals de plaatsnaam op een centrumpagina (40px, en kleiner als de naam lang is): - standaard 32px op 393 (29 op 360): twee regels voor een kop tot ongeveer 36 tekens; - groot, 41px op 393 (37,5 op 360, 33 op 320), voor koppen die op één regel passen. Dat is de oorspronkelijke formule van 3.23.0, die tot ongeveer 19 tekens altijd één regel geeft. Welke pagina's: 2b. Verander je de kop van zo'n pagina in iets langers, dan verdeelt text-wrap:balance hem over twee gelijke regels. De maat staat ook op de h1 zelf: de spatie tussen twee spans hoort bij de h1, en kreeg diens themamaat (een paar pixels), dus stond er op de telefoon "Driving teste-book". Niet op de strook voor leden (.tr-strip__title, assets/css/strip.css): die heeft zijn eigen maat en draagt trh-hero-h1 alleen voor de ruimte. */ :is(.trh-root,.trg-root) :is(.trh-hero-h1:not(.tr-strip__title),.trh-hero-lead,.trh-hero-city), .trg-root .trg-h1{font-size:clamp(26px,calc((100vw - 32px) * .089),36px) !important} .trg-art-root .trg-art-h1{font-size:clamp(28px,calc(17.6px + 2.2vw),44px) !important} /* 2b · Groot: Driving test routes, Reviews en de 404. */ :is(.trtr-page,.trv-page,.trnf-page) :is(.trh-hero-h1:not(.tr-strip__title),.trh-hero-lead,.trh-hero-city){ font-size:clamp(28px,calc((100vw - 32px) * .1142),46px) !important} /* 2c · Ruimte rond de kop in px (was rem, dus de helft): 14 onder de kop, 24 onder de intro, zoals de centrumpagina. Alleen boven en onder, zodat pagina's die de kop centreren (Reviews, 404) gecentreerd blijven. */ .trh-root .trh-hero-h1:not(.tr-strip__title){margin-top:0 !important;margin-bottom:14px !important;text-wrap:balance !important} /* 2d · Intro onder de hoofdkop 15px, regelafstand 1,6 (was 16,5 en 1,65). */ .trh-root .trh-hero-intro{font-size:15px !important;line-height:1.6 !important;margin-top:0 !important;margin-bottom:24px !important} /* 2e · Sectiekoppen 24px, de maat van de homepage en de centrumpagina's. Was 30px (Lato) op de meeste pagina's en 16 tot 18px waar de maat in rem stond. */ .trh-root :is(.trh-explain h2,.trh-wyg h2,.trh-faq h2,.tr-hp__sec-title,.trm-h2,.tsmt-h2,.tra-h2,.treb-h2,.traff-h2,.trwwu-h2,.trsr-h2,.trhp-sec-h,.trhp-end-t,.trp-h2,.trc-done-t){ font-size:24px !important;line-height:1.15 !important;letter-spacing:-.5px !important; font-weight:700 !important;color:rgba(255,255,255,.92) !important;text-wrap:balance !important} /* 2f · Lopende tekst één maat: 15px, regelafstand 1,6 (was 15,5, 16 en 16,5 door elkaar). */ .trh-root :is(.trh-explain p,.trh-wyg-intro,.trm-intro,.tsmt-intro,.trm-finder-line,.tsmt-finder-line, .tra-why-body p,.tra-how-lead,.tra-team-lead,.tra-close-line,.trp-answer,.trwwu-ask-lead, .trsr-lead,.trv-intro,.trn-lead-intro,.trh-fhead p){ font-size:15px !important;line-height:1.6 !important} .trg-root .trg-pillar-stand{font-size:15px !important;line-height:1.6 !important} /* 2g · Tekst in een kaart 14px, regelafstand 1,55, zoals de kaarten op een centrumpagina (was 13,5 en 14,5). */ .trh-root :is(.traff-earn-i dd,.traff-sd,.trwwu-get-item dd,.trsr-htext,.trn-card-intro){ font-size:14px !important;line-height:1.55 !important} .trg-root .trg-summary{font-size:14px !important;line-height:1.55 !important} /* 2h · Vragen en antwoorden. Vraag 15px, verdeeld over gelijke regels (geen los "centre?" op de tweede regel); antwoord 15px, 1,6. */ .trh-root .tr-hp__faq-q-text{font-size:15px !important;text-wrap:balance !important} .trh-root :is(.tr-hp__faq-a,.tr-hp__faq-a p){font-size:15px !important;line-height:1.6 !important} .trh-root :is(.traff-doubt dd,.trwwu-doubt dd){font-size:15px !important;line-height:1.6 !important} /* 2i · Kleine tekst: leestekst minstens 12px, labels in kapitalen minstens 11 (de kleinste stap van de site, --t-1). */ .trh-root :is(.trm-byline-bio,.tsmt-byline-bio,.trm-v-meta,.tra-note,.trh-stat-s,.trn-meta){font-size:12px !important} .trh-root :is(.trwwu-never-lbl,.trwwu-reply-lbl){font-size:11px !important} /* 2j · De rijen van "hoe het werkt" (Driving test routes en About us): titel 16px over gelijke regels (was 17,5), tekst regelafstand 1,6. */ .trh-root .trh-st-row h3{font-size:16px !important;line-height:1.3 !important;text-wrap:balance !important} .trh-root .trh-st-body-in > p{line-height:1.6 !important} } /* 2k · Tikvlakken van 44px op aanraakschermen, zonder dat er iets groter oogt: een onzichtbaar ::before over de link (zoals 4.131.0 en 4.132.0). */ @media (pointer:coarse){ .trh-root .tr-hp__faq-help-link{position:relative !important} .trh-root .tr-hp__faq-help-link::before{content:"" !important;position:absolute !important;left:-8px !important;right:-8px !important; top:50% !important;height:44px !important;transform:translateY(-50%) !important} } /* 2l · 4.153.1 · De beoordelingsregel in de hero op één regel, zoals op de centrumpagina (4.132.0, assets/css/rating.css): "4.5 out of 5 · 317 member ratings" naast de sterren in plaats van het aantal eronder. rating.css stapelt onder 600px omdat de kaart van de homepage maar 263px binnen heeft; hier is de rij net zo breed als de tekst erboven (361px op 393, 328 op 360) en de regel vraagt 309. Onder 360px past hij niet en valt het aantal vanzelf onder de score, zonder punt. Niet op Pricing: daar is de rij 295px breed, te smal voor één regel. */ @media (max-width:599px){ .trh-root:not(.trp-page) .trh-trust .tr-rt.is-hero .tr-rt__count{flex-basis:auto !important} } @media (min-width:360px) and (max-width:599px){ .trh-root:not(.trp-page) .trh-trust .tr-rt.is-hero .tr-rt__sep{display:inline !important} } /* ── 3 · PER PAGINA (onder 700px) ──────────────────────────────────── */ @media (max-width:699px){ /* 3a · Driving test routes (artefact, wijziging 1 t/m 9 behalve 4) */ .trtr-page .trh-explain p,.trtr-page .trh-explain p + p{margin-top:12px !important} .trtr-page .trh-wyg-intro{margin-top:12px !important} .trtr-page .trh-fhead h3{font-size:20px !important;text-wrap:balance !important} .trtr-page .trh-dir-head h3{font-size:17px !important} .trtr-page .trh-stat-v{font-size:24px !important} .trtr-page .trh-st-cta,.trtr-page .trh-browse,.trtr-page .trh-loc{font-size:14px !important} /* regio's: Inter is breder dan Lato; 2px minder ruimte aan de zijkant houdt "Greater London" en "East of England" op één regel vanaf 390px breed */ .trtr-page .trh-tl-name{font-size:14px !important;line-height:1.25 !important} .trtr-page .trh-tile{padding:0 12px 0 14px !important;gap:8px !important} /* voorbeeldkaart in "How our routes work": zoals de routekaart op een centrumpagina, naam 14px wit, regel eronder 12px */ .trtr-page .trh-st-rowscene p.trh-st-title{font-size:14px !important;font-weight:600 !important;color:#fff !important; line-height:1.3 !important;padding:0 !important;margin:0 !important;max-width:none !important} .trtr-page .trh-st-rowscene p.trh-st-sub{font-size:12px !important;color:rgba(255,255,255,.62) !important; line-height:1.3 !important;padding:0 !important;margin:3px 0 0 !important;max-width:none !important} } @media (pointer:coarse){ .trtr-page .trh-browse{position:relative !important} .trtr-page .trh-browse::before{content:"" !important;position:absolute !important;left:-8px !important;right:-8px !important; top:50% !important;height:44px !important;transform:translateY(-50%) !important} }