/* * Vergelijker — resultaatkaarten, filters, badges, prijzen en CTA's. * * HERKOMST VAN DE WAARDEN * ----------------------- * De originele site rendert de vergelijker met een extern React-widget van TDS * dat styled-components gebruikt; er bestaat geen .css-bestand. De CSS is * daarom uit de widgetbundles geëxtraheerd met * `_migration/tools/extract_tds_css.py`. Resultaat: * - `_migration/raw/tds/extracted_theme.json` — het volledige TDS-thema * - `_migration/raw/tds/extracted_css.txt` — 315 styled-components * * Elke regel hieronder is gemarkeerd: * [TDS] letterlijk uit de geëxtraheerde bron-CSS of het TDS-thema; * de componentId staat erbij (bv. sc-13m9tqj-0). * [SHOT] gereconstrueerd uit de screenshots in * `_migration/shots/original//vergelijker-*.png`. * [GTA] eigen keuze: hoort bij onze server-side filter-UI, die het * origineel niet heeft (het widget filtert client-side). * * RESPONSIVE * ---------- * Het widget schakelt op *containerbreedte* via een klasse die het in JS zet * (`mediaSizeName: "smtablet-down"` → container ≤ 600px). Dat is hier vertaald * naar echte media queries op de breakpoints uit het TDS-thema * (`media.smtablet: 600`, `media.mdtablet: 768`, `media.smdesktop: 992`), * zodat alles ook zonder JavaScript klopt. */ /* ========================================================================== 0. Het lettertype van het widget — [TDS] font.family -------------------------------------------------------------------------- `--gta-font` stond hier vanaf het begin op `'Open Sans', Helvetica, Arial`, maar het lettertype zelf werd nergens geladen: er was geen @font-face en geen Google-Fonts-verwijzing. De hele vergelijker rende dus in Arial terwijl de bron Open Sans gebruikt. Dat is geen detail: de letterbak van Arial is 1,117 x de korpsgrootte en die van Open Sans 1,362, en de tekst is ~5 % smaller. Daardoor was de knop "Bekijken" 87,6 in plaats van 91,06 px breed en liepen alle kolommen in de kaart mee. De bron laadt exact deze drie bestanden (`raw/tds/vergelijker-sim-only/ {023,036,035}.meta.json`): https://pcf.tdscd.com/static/media/open-sans-v15-latin-regular.cffb686d.woff2 https://pcf.tdscd.com/static/media/open-sans-v15-latin-600.223a277b.woff2 https://pcf.tdscd.com/static/media/open-sans-v15-latin-700.d08c09f2.woff2 Ze staan nu in `assets/fonts/`. Open Sans staat onder de Apache-2.0-licentie en mag dus zelf gehost worden. ========================================================================== */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/open-sans-v15-latin-regular.woff2') format('woff2'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/open-sans-v15-latin-600.woff2') format('woff2'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/open-sans-v15-latin-700.woff2') format('woff2'); } /* ========================================================================== 1. Tokens — [TDS] extracted_theme.json ========================================================================== */ .gta-comparison { /* Kleurenpalet, letterlijk uit het TDS-thema. */ --gta-c-cornflower: #4A90E2; /* [TDS] color.cornFlowerBlue */ --gta-c-orange: #FF8A17; /* [TDS] color.darkOrange */ --gta-c-orange-hover: #FC7D00; /* [TDS] darken(.05, darkOrange) */ --gta-c-orange-shadow: #FFD0A3;/* [TDS] lighten(.274, darkOrange) */ --gta-c-blue-shadow: #C2DAF5; /* [TDS] lighten(.274, cornFlowerBlue) */ --gta-c-slate: #4B4D54; /* [TDS] color.darkSlateGray = font.color */ --gta-c-slate-blue: #2D4C77; /* [TDS] color.darkSlateBlue (badge 5G) */ --gta-c-gray: #AAAAAA; /* [TDS] color.darkGray */ --gta-c-card-shadow: #DDDDDD; /* [DOM] offerResults.borderColor van portaal nlTelecom */ --gta-c-silver: #BFC5CC; /* [TDS] color.silver */ --gta-c-smoke: #EEEEEE; /* [TDS] color.whiteSmoke */ --gta-c-snow: #FBFBFB; /* [TDS] color.snow */ --gta-c-ghost: #F6FAFC; /* [TDS] color.ghostWhite */ --gta-c-alice: #ECF3FC; /* [TDS] color.aliceBlue */ --gta-c-azure: #F3FCFF; /* [TDS] color.azure */ --gta-c-lavender: #E1F0FC; /* [TDS] color.lavender */ --gta-c-powder: #C6D9EF; /* [TDS] color.powderBlue */ --gta-c-select-border: #E2EAF4;/* [DOM] bron: rand van sc-12zp8ht-2 (het keuzemenu) */ --gta-c-select-shadow: #BDCEE6;/* [DOM] bron: slagschaduw van datzelfde menu */ --gta-c-turquoise: #5BC0DE; /* [TDS] color.mediumTurquoise */ --gta-c-olive: #6EB918; /* [TDS] color.oliveDrab */ --gta-c-olive-dark: #417505; /* [TDS] color.darkOliveGreen */ --gta-c-olive-bg: #EBFFD3; /* [TDS] color.lightGoldenRodyel */ --gta-c-white: #FFFFFF; /* [TDS] color.white */ /* Typografie. */ --gta-font: 'Open Sans', Helvetica, Arial, Sans-Serif; /* [TDS] font.family */ --gta-fs: 14px; /* [TDS] font.size */ --gta-fs-lg: 16px; /* [TDS] font.sizeLg */ --gta-fs-sm: 13px; /* [TDS] font.sizeSm */ --gta-fs-xs: 12px; /* [TDS] font.sizeXs */ --gta-fs-xxs: 11px; /* [TDS] font.sizeXxs */ --gta-fs-xxxs: 10px; /* [TDS] font.sizeXxxs — badge 4G/5G */ --gta-fs-xl: 18px; /* [TDS] font.sizeXl */ --gta-fs-xxl: 20px; /* [TDS] font.sizeXxl */ --gta-fw-normal: 400; /* [TDS] font.weightNormal */ --gta-fw-semi: 600; /* [TDS] font.weightSemiBold */ --gta-fw-bold: 700; /* [TDS] font.weightBold */ /* Spacing-schaal. */ --gta-sp-xxs: 1px; /* [TDS] spacing.xxs */ --gta-sp-xs: 2px; /* [TDS] spacing.xs */ --gta-sp-sm: 5px; /* [TDS] spacing.sm */ --gta-sp-smm: 8px; /* [TDS] spacing.smm */ --gta-sp-md: 10px; /* [TDS] spacing.md */ --gta-sp-lg: 15px; /* [TDS] spacing.lg */ --gta-sp-xl: 20px; /* [TDS] spacing.xl */ --gta-sp-xxl: 25px; /* [TDS] spacing.xxl */ --gta-radius: 2px; /* [TDS] generic.borderRadius */ font-family: var(--gta-font); font-size: var(--gta-fs); color: var(--gta-c-slate); /* * [TDS] pc-inpage.js injecteert BINNEN de widgetwortel een eigen reset * (een normalize-variant) met letterlijk `line-height:1.15`, plus een regel * `div,span,a,img,input,dl,dt,dd,ol,ul,li,form,label,table,… { border:0; * box-sizing:border-box; color:font.color; float:none; margin:0; padding:0; * font-family:font.family; font-size:font.size; font-weight:font.weightNormal; * letter-spacing:font.letterSpacing; text-align:left; vertical-align:baseline; * word-break:normal; position:static }`. * * Die reset was nooit overgenomen. Hier stond `1.4` — een eigen aanname. Het * verschil is 0,25 em op ELKE regel in de kaart: de bundelbalk werd 56,39 in * plaats van 51,89 px, de bijschriften 16,8 in plaats van 13,8 px en het * maandbedrag 28 in plaats van 23 px. Nagemeten aan de live bron @1280: * `getComputedStyle` geeft daar overal `line-height: 16.1px` (= 14 x 1,15). * * Het tweede deel van die reset — font-size erft NIET, elk element valt terug * op 14px — is niet als algemene regel overgenomen (dat zou met CSS- * specificiteit niet na te bouwen zijn zonder alle klassen te overschrijven), * maar per plek waar het zichtbaar wordt; zie `.gta-card__tco` hieronder. */ line-height: 1.15; } .gta-comparison *, .gta-comparison *::before, .gta-comparison *::after { box-sizing: border-box; } /* * DE VERGELIJKER MAG OP 320 PX WEL OVERLOPEN — bewuste keuze, want de bron doet * het ook. * * Hier stond `overflow-x: hidden`, met als reden "de vergelijker mag nooit * horizontaal overlopen". Dat is correcter dan de bron, maar niet gelijk aan de * bron, en de opdracht is een 1-op-1 reconstructie. * * [DOM] bron @320, `vergelijker-sim-only`: het blokelement `sc-14f0y3g-0` meet * x 15..305 (290 px), maar het widgetomhulsel `r7ha0i-0` daarbinnen draagt * `min-width: 310px; max-width: 1500px` en meet daardoor x 15..325 — 20 px * BUITEN zijn eigen kolom. Het resultatenblok `r7ha0i-15` (#FBFBFB) loopt * daarin mee tot 325 en de kaart wordt 290 px (x 25..315). `scrollWidth` van * het document is daar 325 in plaats van 320. * * Bij ons hield deze regel de kaart binnen de kolom op 270 px. Dat is geen * cosmetisch verschil: de tekst brak eerder, de kaarten werden hoger (176,17 * in plaats van 160,08) en negen pagina's die op 1 a 2 px klopten werden op * 320 px 99 tot 682 px te lang. De ondermaat staat nu op * `.gta-comparison__body`, precies waar de bron hem heeft, en dit blok mag hem * weer laten uitsteken. * * De compacte toplijst en de in-artikel-vergelijker hebben in de bron een ANDER * omhulsel (`sc-1snaqs1-0`, `min-width: 250px`) en lopen op 320 px niet over. * Zij hebben bij ons geen `.gta-comparison__body`, dus de ondermaat raakt ze * niet — nagemeten: kaart 270 px aan beide kanten. */ .gta-comparison { max-width: 100%; } /* * De 10 px onder het vergelijkerblok (RESPONSIVE_GAPS.md A15) — en waar hij NIET * hoort. * * Het widget zelf heeft in de bron nooit een ondermarge: `#tds-comparer-…` en * het element dat TDS erin zet (`#tdsp1.tdsa`) meten beide `margin-bottom: 0px`. * Die 10 px komt van de LEGE ALINEA die de CMSMS-editor achterlaat wanneer de * `
` van de widget midden in een `

` staat: de browser sluit de alinea * bij de bloktag, en de losse `

` erna wordt een lege alinea van 10 px via * `p { margin: 0 0 10px }`. Hetzelfde mechanisme als A21 en A27. * * Dat is dus geen eigenschap van het blok maar van de plek waar het staat, en * die plek verschilt per variant. Geteld over alle 144 opgeslagen bronpagina's: * `tds-comparer-1` 51 x binnen een alinea (de 2 uitzonderingen zijn de * VERBORGEN eerste vergelijker op `/telefoonabonnement`), `tds-comparer-2` 38 x * binnen een alinea, en `tds-comparer-in-article` (22 x) en * `tds-comparer-bottom` (31 x) altijd erbuiten. * * Nagemeten @1280 op de live bron: * hoofdvergelijker `/goedkoopste-telefoon-abonnement-zonder-telefoon`: * blok eindigt op y 1592,05, volgende `

` begint op y 1602,05 -> 10 px; * in-artikel `/telefoonnummer-blokkeren-blokkade-provider-of-toestel`: * blok eindigt op y 1188,25, volgende `

` begint op y 1188,25 -> 0 px; * onder het artikel: `#tds-comparer-bottom` eindigt op y 3174,50, de * `div.divider` erna begint op y 3194,50 en dat zijn diens eigen 20 px * `margin-top`. * * PHP zet daarom `gta-comparison--trailing-paragraph` op elke vergelijker die * in de bron een lege alinea achter zich heeft; zie * `gta_comparison_elements_without_trailing_paragraph()` in inc/comparison.php. * De laatste kaart heeft zelf al `margin-bottom`, maar dat valt binnen het blok. */ .gta-comparison--trailing-paragraph { margin-bottom: var(--gta-sp-md); } /* ========================================================================== 2. Layout: filterkolom + resultaten — [SHOT] 1280/vergelijker-sim-only.png ========================================================================== */ .gta-comparison__body { display: flex; /* [TDS] r7ha0i-0 { display:flex } */ flex-direction: row; align-items: flex-start; /* * [TDS] r7ha0i-0 { min-width: 310px; max-width: 1500px } — nagemeten op de * live bron. Boven 310 px beschikbare breedte doet deze ondermaat niets; op * 320 px zorgt zij voor de overloop van de bron. Zie de toelichting bij * `.gta-comparison` hierboven. */ min-width: 310px; max-width: 1500px; /* * GEEN flex-gap. De bron heeft er geen: de 10 px tussen filterkolom en * resultaten komt uit `r7ha0i-1 { padding-right:5px }` plus de 10 px padding * van het resultatenblok (`r7ha0i-15`), en de tellerregel begint daardoor * WEL op de linkerrand van de resultatenkolom (x 295 @1280) terwijl de * kaarten 10 px verder inspringen (x 305). Met een gap van 10 px stonden * teller en kaart bij ons op dezelfde x (300) en was de kaart 15 px te breed. */ } .gta-comparison__filters { /* * [TDS] sc-1k8cnet-0 { width:220px } zit BINNEN r7ha0i-1, en die heeft * { padding-right:5px }. De kolom is in de bron dus 225 px breed met 220 px * inhoud — nagemeten @1280: x 70…295, `padding: 0px 5px 0px 0px`. * Hier stond alleen de 220 van de binnenkant. */ flex: 0 0 225px; width: 225px; max-width: 225px; padding-right: 5px; } .gta-comparison__results { flex: 1 1 auto; min-width: 0; /* [GTA] voorkomt overflow van de flexkolom */ max-width: 100%; /* * De 10 px onder de laatste kaart zat hier als `padding-bottom`. Dat was maar * de helft van het verhaal: in de bron is het de padding van het * RESULTATENBLOK `r7ha0i-15`, en dat blok heeft die padding aan alle vier de * kanten plus een eigen achtergrond. Zie `.gta-results` hieronder; deze kolom * heeft zelf geen padding meer. */ } @media (max-width: 991px) { /* [SHOT] 768/375: filters boven de resultaten, volle breedte. */ .gta-comparison__body { flex-direction: column; /* In kolomrichting zou flex-start de kinderen op max-content zetten; dat liep op 320px 17px buiten beeld. */ align-items: stretch; /* * GEEN tussenruimte tussen de filterbalk en de resultaten. * * De bron zet de tellerregel met de knop "Filter" direct onder de balk: * de balk is daar exact 150 px hoog EN de afstand tot de eerste kaart is * ook exact 150 px (RESPONSIVE_GAPS.md par. 2 en 4). Bij ons is de balk * 114 px en de tellerregel 36 px — samen precies die 150 — maar er zat * 10 px flex-gap tussen, waardoor de eerste kaart op 159 px begon. Dit is * de laatste 9 px van A5. * * NAGEMETEN, 2026-08-26: het is geen 0 maar 5 — de bron zet * `padding-bottom: 5px` op het omhulsel van de balk ([TDS] r7ha0i-7). * @768 eindigt de azuren balk op 97,88 en begint de knoppenrij op 102,88. */ row-gap: var(--gta-sp-sm); } .gta-comparison__filters, .gta-comparison__results { flex: 0 0 auto; width: 100%; max-width: 100%; } /* [TDS] r7ha0i-1 vervalt onder 992 px (`display:none` in de bron; bij ons wordt hij een balk over de volle breedte), dus ook zijn 5 px rechts. */ .gta-comparison__filters { padding-right: 0; } } /* ========================================================================== 3. Tabs "met toestel" / "zonder toestel" Bootstrap .nav-tabs blijft leidend (staat al in site.css); alleen de afwijking uit het origineel. — [SHOT] beide vergelijkerpagina's ========================================================================== */ .gta-comparison .tds-picker, .gta-comparison .gta-picker { margin-bottom: var(--gta-sp-md); } /* * De tabbalk staat in de bron BOVEN de vergelijker, niet erin. Daartussen zit * in de bron-HTML een leeg

(de widget-div staat in dezelfde alinea als de * inline scripts, waardoor de browser de

ervoor sluit). Dat lege

levert * via Bootstraps `p { margin: 0 0 10px }` precies 10px op. * [SHOT/DOM] origineel @768: tabbalk eindigt op 378, #tds-comparer-1 begint op * 388. Zonder deze regel begint onze vergelijker op 378. */ ul.tds-picker { margin-bottom: 10px; } .gta-comparison .gta-picker > li > a { cursor: pointer; } /* ========================================================================== 4. Resultatenkop "De beste 12 SIM Only deals." ========================================================================== */ .gta-results__count { color: var(--gta-c-gray); /* [TDS] sc-1j9z4f9-0 { color:#AAAAAA } */ /* * [TDS] sc-1j9z4f9-0 { font-size:12px }. Hier stond `font.size` (14px), de * standaardmaat van het thema. Nagemeten op de live bron @1280: de span met * "De beste 12 SIM Only deals." meet `font-size: 12px`, `line-height: 13.8px` * en 154,83 px breed; bij ons 14 px, 19,6 px en 178,22 px. Op de * toestelvergelijker: 170,80 tegen 190,70 px voor dezelfde tekst. */ font-size: var(--gta-fs-xs); margin: 0 0 var(--gta-sp-sm); } .gta-results__count b { color: var(--gta-c-slate); /* [SHOT] alleen het getal is donker/vet */ font-weight: var(--gta-fw-bold); } /* * [TDS] r7ha0i-4 { padding-bottom:5px } — de kop van de resultatenkolom. * * Hier stond `margin-bottom: 9px`, een compensatie: onze tellerregel was * 19,59 px hoog in plaats van de 13,8 px van de bron, en met 9 px eronder kwam * de eerste kaart toevallig op dezelfde y uit. Nu de regel 12 px is en de * regelhoogte 1,15, klopt de opbouw van de bron zelf: * 13,8 (tellerregel) + 5 (r7ha0i-4) + 10 (padding van `.gta-results`) = 28,8 * en de eerste kaart begint op y 283,80 net als in de bron. */ @media (min-width: 992px) { .gta-results__count { margin-bottom: var(--gta-sp-sm); } } /* * [SHOT/DOM] origineel @1280 en @768: boven de resultatenlijst staat precies * EEN regel — "De beste 12 SIM Only deals." — en de afstand tussen de bovenkant * van de vergelijker en de eerste rij is 29px. Onze sorteerkeuze (een eigen * toevoeging, zie COMPARISON_ENGINE.md B4) stond op een eigen regel en maakte * die zone 53px; daardoor schoof alles eronder 24px op. Op tabletbreedte en * hoger staat de sorteerkeuze daarom op dezelfde regel als de telling. */ @media (min-width: 768px) { .gta-comparison__results { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--gta-sp-md); } .gta-comparison__results > .gta-results__head { flex: 0 0 auto; } .gta-comparison__results > .gta-results, .gta-comparison__results > .gta-no-results, .gta-comparison__results > .gta-pagination { flex: 0 0 100%; } } /* * Het RESULTATENBLOK — [TDS] r7ha0i-15 { background-color:#FBFBFB; padding:10px } * (`offerResults.blockBackgroundColor`). * * Dit blok was nooit gebouwd. Gevolg: de kaarten liepen tot aan de rand van de * resultatenkolom en waren daardoor 20 px te breed, en de zachtgrijze band die * de bron rond en tussen de kaarten toont ontbrak volledig. * * Nagemeten in de referentiebeelden (kleurbanden op een rij tussen twee * kaarten), bron tegen herbouw: * @1280 bron x 295-1209 #FBFBFB, kaart 305-1199; herbouw alles #FFFFFF, * kaart 300-1209 * @768 bron x 24- 743 #FBFBFB, kaart 34- 733; herbouw alles #FFFFFF * @375 bron x 15- 359 #FBFBFB, kaart 25- 349; herbouw alles #FFFFFF * Ook de compacte toplijst in een nieuwsartikel heeft hem * (`shots/original/1280/nieuws-archief.png`, x 70-1209 tegen kaart 80-1199). * * De opsomming had zijn opmaak als inline `style` in results.php staan; die is * daar weggehaald zodat deze regel hem kan zetten. */ .gta-results { background-color: var(--gta-c-snow); /* [TDS] offerResults.blockBackgroundColor */ list-style: none; margin: 0; padding: var(--gta-sp-md); } /* ========================================================================== 5. Resultaatkaart Basis letterlijk uit [TDS] sc-13m9tqj-0 / vb06ic-0 / sc-1v3hu4w-0. ========================================================================== */ .gta-card { background-color: var(--gta-c-white); border-radius: var(--gta-radius); /* * [DOM] bron @1280: `box-shadow: rgb(221, 221, 221) 0px 1px 3px 0px`. * Het geëxtraheerde THEMA zegt `offerResults.borderColor: #AAAAAA` en die * waarde is hier destijds overgenomen, maar dat is de FABRIEKSINSTELLING van * het widget; de portaalinstelling voor `nlTelecom` zet hem op #DDDDDD. Dat * is te zien in de referentiebeelden: naast de kaart loopt de schaduw bij de * bron van #FBFBFB via #FAFAFA/#F7F7F7/#F0F0F0 naar wit, bij ons van #FFFFFF * via #FEFEFE/#FCFCFC/#F8F8F8 — en aan de rechterkant was onze schaduw zelfs * volledig weg omdat de kaart daar tegen de rand van de kolom aan lag. * De gesponsorde variant houdt zijn eigen kleur (zie hieronder). */ box-shadow: 0 1px 3px 0 var(--gta-c-card-shadow); margin-bottom: var(--gta-sp-md); padding: var(--gta-sp-md); /* [TDS] de ${…} in sc-13m9tqj-0 is spacing.md */ position: relative; } .gta-card--sponsored { box-shadow: 0 1px 3px 0 var(--gta-c-orange); /* [TDS] offerResults.sponsoredBorderColor */ } .gta-card__sponsored-label { color: var(--gta-c-orange); /* [TDS] sc-1s3ow8v-0 */ font-size: var(--gta-fs-xs); font-weight: var(--gta-fw-normal); margin-bottom: var(--gta-sp-sm); } /* Positienummer linksboven — [TDS] sc-13m9tqj-2 */ .gta-card__rank { background-color: var(--gta-c-cornflower); border-radius: 17px; color: var(--gta-c-white); display: inline-block; font-size: var(--gta-fs-xxs); font-weight: var(--gta-fw-bold); left: -5px; line-height: 17px; position: absolute; text-align: center; top: -5px; width: 17px; z-index: 1; } /* Kaartkop: toestelnaam + opslag + eenmalig — [TDS] sc-13m9tqj-1 / vb06ic-1 */ .gta-card__head { display: flex; flex-wrap: wrap; align-items: center; /* * GEEN flex-gap. In de bron staan de vier onderdelen als inline-inhoud naast * elkaar en komt de tussenruimte uit `ji1rnf-3 { padding-right:2px }` en * `f635ir-3 { padding-right:2px }`; nagemeten @1280 sluit de toestelnaam * direct op het beeldje aan (beide x 37). Met een gap van 5 px schoof de hele * kop 5 px naar rechts. */ gap: 0; padding-bottom: var(--gta-sp-sm); /* [TDS] sc-13m9tqj-1 { padding-bottom:5px } */ } /* [TDS] ji1rnf-3 { height:27px; width:27px; padding-right:2px; vertical-align:middle; img { max-width:25px; max-height:25px } } — hier stond een uit het beeld geschatte 22 px breed. */ .gta-card__device-image { flex: 0 0 auto; /* Het beeldje zit in de bron in een blokje van 27 x 27 px met een afbeelding van maximaal 25 x 25 erin. Hier is het beeldje zelf het element, dus die 2 px staan als padding eromheen — met `content-box`, anders zou de `max-height` van 25 px de padding er weer af snoepen en bleef de kop 30 in plaats van 32 px hoog. */ box-sizing: content-box; max-height: 25px; max-width: 25px; padding: 1px 2px 1px 0; width: auto; } .gta-card__device-name { font-weight: var(--gta-fw-bold); /* [TDS] f635ir-1 { font-weight:700 } */ font-size: var(--gta-fs-sm); /* [TDS] f635ir-1 { font-size:13px } */ color: var(--gta-c-slate); /* [TDS] ji1rnf-2 / offerTitle.textColor */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* Opslagbadge "256GB" — [TDS] kbtez5-0 { color:#4B4D54; border:1px #4B4D54 solid; border-radius:2px; background-color:#FFFFFF; font-size:12px; font-weight:400; line-height:13px; padding:1px 2px }. De rand stond hier op `silver` (#BFC5CC) met regelhoogte 1,4 en 4 px padding; de bron gebruikt de tekstkleur en een badge van 17 px hoog. */ .gta-card__storage { background-color: var(--gta-c-white); border: 1px solid var(--gta-c-slate); border-radius: var(--gta-radius); color: var(--gta-c-slate); display: inline-block; font-size: var(--gta-fs-xs); font-weight: var(--gta-fw-normal); line-height: 13px; margin-right: 2px; /* [TDS] f635ir-3 { padding-right:2px } */ padding: 1px 2px; white-space: nowrap; } /* Eenmalig bedrag naast de toestelnaam; groen zodra het € 0,- is. [TDS] spuq8k-0 + sc-15fr68a-0 { color:#417505; background-color:#EBFFD3 }. De badge is in de bron VET met een regelvak van 16 px en 1px/4px padding, dus 18 px hoog; hier stond alleen de korpsgrootte. */ .gta-card__upfront-inline { font-size: var(--gta-fs-xs); font-weight: var(--gta-fw-bold); /* * De gewone eenmalige prijs is bij de bron KALE tekst en staat dus op de * 1,15 van de widgetreset: [DOM] `bundel-onbeperkt-internet` @1280, * "EUR 16,- eenmalig" -> `span.` fs12px lh13,8px. Alleen de gratis variant * is een badge ([TDS] spuq8k-0, lh 16 px); die staat hieronder. * * Hier stond 16 px voor allebei. Dat viel niet op zolang de kop op één regel * paste — het beeldje van 27 px bepaalt daar het regelvak — maar zodra de * prijs naar een TWEEDE regel brak, werd de kop 27 + 16 = 43 px waar de bron * 27 + 13,8 = 40,8 rekent. [DOM] `provider-kpn` @320, eerste kaart met * identiek aanbod (Apple iPhone 16 128 GB / EUR 264,- eenmalig / 10 GB 5G / * 150 min / EUR 35,50 p.m.): bron 217,67 px, wij 219,88 — precies die * 2,21 px. Dat is de oorzaak van de twee kaarthoogten die de bron nooit * produceert; ze staat LOS van de actieregel (B3) en van de contractrij (B4). */ line-height: 13.8px; /* * GEEN `margin-left` hier. Wat de bron tussen de badgegroep en het eenmalige * bedrag heeft is een gewone SPATIE, een tekstknoop in `vb06ic-2` op 14 px * ([DOM] bron `provider-kpn` @375, kaart 4: de badgewrapper eindigt op * x 271,52 en het bedrag begint op 275,16 — 3,64 px, precies één spatie in * Open Sans 14). * * Een spatie VERDWIJNT bij een regelovergang, een `margin-left` niet. Met de * marge hier stond het bedrag op een tweede regel op x 14 waar de bron het op * x 10 zet. De spatie staat daarom hieronder op het element ERVOOR. */ white-space: nowrap; } /* * De spatie vóór het eenmalige bedrag. Het bedrag is altijd het laatste kind van * de kop, dus `:nth-last-child(2)` is wat eraan voorafgaat: de laatste badge, of * de toestelnaam wanneer er geen badges zijn. * * Op een badge komt hij BOVENOP de 2 px van de badgewrapper ([TDS] f635ir-3 * { padding-right:2px }) — de bron heeft daar allebei: wrapper 2 px, dan de * spatie. Vandaar 2 + 3,64 px. */ .gta-card__head > :nth-last-child(2) { margin-right: 3.64px; } .gta-card__head > .gta-card__storage:nth-last-child(2) { margin-right: 5.64px; } .gta-card__upfront-inline--free { background-color: var(--gta-c-olive-bg); color: var(--gta-c-olive-dark); border-radius: var(--gta-radius); padding: 1px 4px; /* [TDS] spuq8k-0 { padding:1px 4px } */ /* [TDS] spuq8k-0 { line-height: small ? "12px" : "16px" } — alleen de gratis-badge is een badge; [DOM] bron @320 `span.spuq8k-0 sc-15fr68a-0` meet 34,3 x 18 met lh 16 px. */ line-height: 16px; } /* Kaartrij: bundelblok links, prijs/CTA rechts. Verhoudingen letterlijk uit [TDS] vb06ic-5 (flex:2 1 0%; order:0) en vb06ic-6 (flex:3 1 0%; order:1; padding-left:10px). */ .gta-card__row { /* [TDS] vb06ic-4 / sc-13m9tqj-5 { display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between } */ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; /* * GEEN `align-items: center`. Die stond hier maar komt in de bron nergens * voor: `vb06ic-4` laat `align-items` op de standaard `stretch`, waardoor de * twee kolommen even hoog worden en hun inhoud BOVENAAN begint. Met de * centrering zakte de hele kaartinhoud naar het midden — de bundelbalk stond * op y 20,84 in plaats van y 10 en het providerlogo 14 beeldrijen te laag * (LEBARA-logo: bron beeldrij 313-325, herbouw 327-338). */ } /* Bundelblok: providerlogo, data, minuten [TDS] sc-1cqfm6i-0 { background:#F6FAFC; border-radius:2px; display:flex; justify-content:space-between; font-size:14px; min-width:190px; padding:10px 5px } */ /* [TDS] vb06ic-5 / sc-13m9tqj-7 { flex:2 1 0%; order:0 } — de KOLOM waarin de balk staat. Zie de toelichting in card.php: de padding van de balk zelf mag niet meetellen in de 2:3-verdeling van de rij. */ .gta-card__bundle-col { flex: 2 1 0%; order: 0; min-width: 0; } .gta-card__bundle { background-color: var(--gta-c-ghost); border-radius: var(--gta-radius); display: flex; justify-content: space-between; font-size: var(--gta-fs); min-width: 190px; /* * [TDS] sc-1cqfm6i-0: `padding: 10px 5px`, niet 10 px rondom, en GEEN gap. * Nagemeten @1280: de balk staat op x 10 en is 346 px breed; de eerste cel * begint op x 15 en de laatste eindigt op x 351 — dus 5 px links en rechts. * De 10 px rondom plus een gap van 10 px maakte de cellen te smal en zette * het logo op x 20 in plaats van x 29,14. */ padding: var(--gta-sp-md) var(--gta-sp-sm); } /* * [TDS] sc-1cqfm6i-2 en -4 { flex:4 1 0% }. De cellen zijn NIET gelijk * verdeeld: de providercel krijgt 3 delen en data en minuten elk 4. */ .gta-card__bundle-cell { flex: 4 1 0%; min-width: 0; } /* [TDS] sc-1cqfm6i-1 { height:31px; flex:3 1 0%; order:0; padding-right:5px; text-align:center; img { max-width:70px; max-height:31px } } */ .gta-card__bundle-cell--provider { flex: 3 1 0%; height: 31px; padding-right: var(--gta-sp-sm); text-align: center; } .gta-card__provider-logo { display: block; margin: 0 auto; /* [TDS] ls5wz8-2 { img { margin-left:auto; margin-right:auto } } */ /* * [TDS] sc-1cqfm6i-1 { img { max-width:70px; max-height:31px } } — die regel * staat dichter op het element dan de 30 px van ls5wz8-2 en wint dus. Met * 30 px werd het LEBARA-logo 60x30 in plaats van de 62x31 van de bron. */ max-height: 31px; max-width: 70px; width: auto; } .gta-card__bundle-value { display: block; font-weight: var(--gta-fw-bold); white-space: nowrap; } .gta-card__bundle-label { display: block; color: var(--gta-c-gray); /* [TDS] sc-1cqfm6i-3 { color:#AAAAAA } */ font-size: var(--gta-fs-xs); /* [TDS] sc-1cqfm6i-3 { font-size:12px } */ margin-top: var(--gta-sp-xs); /* [TDS] sc-1cqfm6i-3 { margin-top:2px } */ } /* Netwerkbadge 4G/5G — [TDS] spuq8k-0 + spuq8k-3 */ .gta-badge { display: inline-block; background-color: var(--gta-c-gray); border-radius: var(--gta-radius); color: var(--gta-c-white); /* * [DOM] bron @1280: de badge "5G" meet `font-size: 10px`, `line-height: 12px` * en 20,97 x 14 px. Hier stond `font.sizeXxs` (11px) met regelhoogte 1,4, wat * 22,69 x 17,39 px opleverde — een badge die anderhalve pixel te hoog en twee * px te breed is, op elke kaart. */ font-size: var(--gta-fs-xxxs); font-weight: var(--gta-fw-bold); line-height: 12px; padding: 1px 4px; text-align: center; white-space: nowrap; /* * [TDS] spuq8k-0: `vertical-align: ${e.small ? "1.5px" : ""}` * (`chunks/2_f2db2223_chunk.js`). De kleine badge — en dat is precies deze, * de 4G/5G-badge — wordt 1,5 px boven de basislijn gezet. Hier stond * `middle`, wat hem 1,67 px te laag zette en de bundelregel 0,08 px te hoog * maakte. */ vertical-align: 1.5px; } .gta-badge--gen5 { background-color: var(--gta-c-slate-blue); /* [TDS] spuq8k-3 #2D4C77 */ } .gta-badge--gen4 { background-color: var(--gta-c-turquoise); /* [TDS] spuq8k-2 #5BC0DE */ } /* Prijs- en CTA-deel van de kaart — [TDS] vb06ic-6 */ .gta-card__foot { display: flex; flex: 3 1 0%; order: 1; flex-direction: row; flex-wrap: wrap; justify-content: space-between; /* * GEEN `align-items: center` en GEEN `gap`: `vb06ic-6` heeft alleen * `display:flex; flex:3 1 0%; justify-content:space-between; order:1; * padding-left:10px`. De kolommen erin rekken dus mee met de kaart en hun * inhoud begint bovenaan, precies zoals in de bron. * * Die gap van 10 px was bovendien de reden dat het bundelblok 364 in plaats * van 346 px breed was: hij telt mee in de minimummaat van deze kolom en * verschoof daarmee de 2:3-verdeling van de rij. */ padding-left: var(--gta-sp-md); min-width: 0; } .gta-card__contract { flex: 1 1 0%; color: var(--gta-c-gray); /* [TDS] vb06ic-8 { * { color:#AAAAAA; font-size:12px } } */ font-size: var(--gta-fs-xs); min-width: 0; } .gta-card__contract-term { display: block; } /* Maandbedrag — [TDS] sc-13m9tqj-10 / vb06ic-11 */ .gta-card__monthly { flex: 1 1 0%; min-width: 0; padding-right: var(--gta-sp-sm); /* [TDS] vb06ic-11 { padding-right:5px } */ } .gta-price__symbol, .gta-price__main { font-size: var(--gta-fs-xxl); font-weight: var(--gta-fw-bold); letter-spacing: 1px; } .gta-price__trail { font-size: var(--gta-fs-xs); font-weight: var(--gta-fw-bold); } .gta-card__monthly-suffix { color: var(--gta-c-gray); font-size: var(--gta-fs-xs); } .gta-card__standard-monthly { color: var(--gta-c-gray); font-size: var(--gta-fs-xxs); } .gta-card__promotion-term { display: block; } /* Gemiddelde/totale kosten — [TDS] vb06ic-12 */ .gta-card__tco { flex: 1 1 0%; font-size: var(--gta-fs-xs); /* [TDS] vb06ic-12 { font-size:12px } */ min-width: 0; white-space: normal; } /* * ... maar de INHOUD staat op 14 px, niet op 12. * * Dit is het tweede deel van de reset die pc-inpage.js in de widgetwortel zet * (zie de toelichting bij `line-height` in §1): `div,span,a,… { font-size:14px }` * wint daar van overerving, dus de 12 px van `vb06ic-12` geldt alleen voor het * omhulsel en elke erbinnen valt terug op `font.size`. Nagemeten @1280: * "Gem. kosten" is bij de bron 14 px op y 8 en 82,31 px breed; bij ons 12 px op * y 30,25 en 68,03 px breed. Hetzelfde geldt voor het bedrag eronder. * * Alleen de kostenspecificatie in de uitklap houdt 12 px: die staat in de bron * in een modal met een eigen opmaak. */ .gta-card__tco > span, .gta-card__tco-details > summary > span { font-size: var(--gta-fs); } .gta-card__tco-value { border-color: var(--gta-c-slate); border-style: dotted; border-width: 0 0 1px 0; display: table; padding-top: var(--gta-sp-sm); font-weight: var(--gta-fw-bold); } /* CTA-kolom — [TDS] sc-4tqysy-0 / sc-4tqysy-3 */ .gta-card__cta { flex: 0 1 auto; text-align: center; } /* * De CTA-kolom houdt de rijmaat, ook op kaarten zonder "Alle shops". * * Zo doet de bron het ook, alleen met een ander middel: `vb06ic-14` (de regel * "Alle shops") krijgt daar `visibility: ${…}` en wordt bij één winkel * ONZICHTBAAR gemaakt in plaats van weggelaten — de 21,09 px blijft staan. Dat * is de reden dat elke toestelrij in de bron 130,19 px meet en elke Sim * Only-rij 98,19, of er nu "Alle shops" onder staat of niet; op 375 px is het * net zo (187,08 respectievelijk 160,08). * * Bij ons rendert de template die regel niet als er maar één winkel is, dus * staat de maat hier: 32,09 (knop) + 25 (winkellogo) + 21,09 = 78,19. * * Niet in de compacte toplijst: die toont winkellogo noch "Alle shops". */ .gta-comparison:not(.gta-comparison--toplist) .gta-card__cta { min-height: 78.19px; } .gta-btn-clickout { appearance: none; background-color: var(--gta-c-orange); border: 0; border-radius: var(--gta-radius); box-shadow: 0 1px 4px 0 var(--gta-c-orange-shadow); color: var(--gta-c-white); cursor: pointer; display: inline-block; font-family: var(--gta-font); font-size: 1em; font-weight: var(--gta-fw-bold); /* * [DOM] bron @1280: de knop "Bekijken" is 32,09 px hoog en 91,06 px breed. * Dat is precies `padding: 8px 15px` (spacing.smm / spacing.lg) op een * regelvak van 16,1 px: 8 + 16,1 + 8 = 32,1. Hier stond `5px 20px` met een * `min-height: 32px` als noodgreep om toch op 32 uit te komen; daardoor was * de knop 97,59 px breed en de hele CTA-kolom 6,5 px te breed. */ box-sizing: border-box; padding: var(--gta-sp-smm) var(--gta-sp-lg); text-align: center; text-decoration: none; user-select: none; vertical-align: middle; white-space: nowrap; } .gta-btn-clickout:hover, .gta-btn-clickout:focus, .gta-btn-clickout:active, .gta-btn-clickout:visited { background-color: var(--gta-c-orange-hover); /* [TDS] darken(.05, darkOrange) */ color: var(--gta-c-white); text-decoration: none; } .gta-btn-clickout:focus-visible { outline: 2px solid var(--gta-c-slate); /* [GTA] toegankelijkheid */ outline-offset: 2px; } .gta-card__shop { /* [SHOT] origineel 1280/768: het winkellogo staat ONDER de Bekijken-knop, niet ernaast; daaronder komt "Alle shops". Een is inline, dus width:100% deed niets — vandaar display:block. Zonder deze regel is de resultaatrij op desktop 76px in plaats van de 98px van de bron. */ display: block; padding-top: var(--gta-sp-sm); text-align: center; width: 100%; } .gta-card__shop img { max-width: 60px; /* [TDS] sc-4tqysy-3 */ max-height: 20px; vertical-align: middle; /* * [DOM] bron @1280: het blokje met het winkellogo is exact 25,00 px hoog * (5 px padding + 20 px logo). Bij ons was het 25,38: een inline * krijgt er de ruimte onder de basislijn bij. Als blokelement met * automatische zijmarges staat het logo nog steeds gecentreerd, maar zonder * die 0,38 px. Samen met de regel bij `.gta-card__shop-count` brengt dit de * CTA-kolom van 79,18 op 78,10 px — en daarmee de Sim Only-rij van 99 op de * 98 px van de bron (A24). */ display: block; margin: 0 auto; } .gta-card__shop-name { color: var(--gta-c-cornflower); /* [SHOT] shopnaam in blauw onder de knop */ font-size: var(--gta-fs-xs); font-weight: var(--gta-fw-bold); } .gta-card__shop-count { color: var(--gta-c-cornflower); /* [TDS] vb06ic-14 / offerResults.shopsLinkColor */ display: block; /* [SHOT] eigen regel onder het winkellogo */ /* * [DOM] bron @1280: `vb06ic-14` meet `font-size: 14px` — het element krijgt * geen eigen maat en valt dus terug op `font.size`. Hier stond 12 px. * De regel is 21,09 px hoog: 5 px `padding-top` plus een regelvak van 16,1, * en die 16,1 komt nu uit de regelhoogte 1,15 in §1 in plaats van uit een * losse pixelwaarde. */ font-size: var(--gta-fs); padding-top: var(--gta-sp-sm); text-decoration: none; } /* * Het filtericoontje achter "Alle shops". * * De bron zet daar de Material-Icons-ligatuur `filter_list` op 14 px * ([TDS] ejpm89-0: `font-family:'Material Icons'; font-size:14px`), een blokje * van exact 14 x 14 px. Sinds de prelive-ronde van 2026-10-13 is het bij ons * datzelfde icoon als inline SVG (`gta_icon_filter_list()` in * inc/template-tags.php), ook bij de knoppen "Filter" en "Meer filters"; * daarvoor stonden er Font-Awesome-glyphs (`fa-filter`, `fa-sliders`). */ .gta-icon { display: inline-block; flex: none; height: 14px; vertical-align: -2px; width: 14px; } /* Acties/kortingen onder de kaart — [TDS] sc-1f4u48f-0 / sc-7dsqeu-0 */ .gta-card__promotions { list-style: none; /* * [TDS] sc-13m9tqj-16 / vb06ic-16 { flex:1 1 100%; order:2; padding-top:0 } * met daarbinnen sc-1hawtph-1 { padding-top:2px }. Er zit dus GEEN marge * boven de actieregel, alleen 2 px padding. Hier stond 5 px marge met een * uitzondering voor de toestelkaart; dat is nu één regel voor beide. */ margin: 0; padding: var(--gta-sp-xs) 0 0; flex: 1 1 100%; order: 2; } .gta-card__promotion { color: var(--gta-c-slate); /* [TDS] offerExtraText.textColor */ font-size: var(--gta-fs-xs); font-weight: var(--gta-fw-normal); white-space: normal; /* * De regelhoogte is gewoon de geërfde 1,15 (12 x 1,15 = 13,8). Alleen de * EERSTE regel is 14,8 px hoog, en dat komt van het icoon ervoor; zie * `::before` hieronder. */ } .gta-card__promotion--strong { color: var(--gta-c-olive); /* [TDS] offerExtraText.strongTextColor */ font-weight: var(--gta-fw-semi); } .gta-card__promotion::before { content: "+ "; /* [SHOT] "+ Tijdelijk geen aansluitkosten" */ /* * [DOM] bron @1280: het actieblok is 16,80 px hoog — precies het verschil * tussen een toestelkaart mét (146,98) en zonder actieregel (130,19). Daarvan * is 2 px de padding van `.gta-card__promotions`, dus het EERSTE regelvak is * 14,80 px, en dat is geen 12 x regelhoogte: in de bron staat vóór de tekst * de Material-Icons-ligatuur "add" als inline-block van 14 px * (`ejpm89-0`, gemeten 14 x 14 op y 122,19). * * Hier stond die 14,8 als regelhoogte op de HELE regel. Dat klopte voor * actieteksten van één regel, maar op telefoonbreedte breken ze vaak over * twee: de bron rekent dan 14,8 + 13,8 = 28,6 en wij 29,6. Met het icoon * als eigen inline-block valt de 14,8 weer op alleen de eerste regel. * * DE BREEDTE ONTBRAK, en dat is wat deze regel toevoegt. De vorige versie * beschreef het blokje van 14 px wél in dit commentaar maar zette alleen * `display` en `line-height`; het blokje kreeg daardoor de breedte van zijn * eigen inhoud ("+" is 6,86 px in Open Sans 12) in plaats van 14 px. * [DOM] bron `bundel-onbeperkt-internet` @1280, kaart met identiek aanbod * (Apple iPhone Air 256 GB / EUR 16,- eenmalig / onbeperkt 5G / 150 min / * EUR 55,50 p.m. / "Tijdelijk geen aansluitkosten"): het icoonblokje staat * op x 10 en is 14 px breed, dan volgt één spatie van 3,13 px (Open Sans 12) * en pas daarna de tekst — inkt op x 27,13. Bij ons begon de inkt op 16,86. * De spatie zit bij ons in de witruimte van de template tussen `

  • ` en de * tekst; die telt alleen mee ZOLANG de ::before een inline-block is, en dat * is hij. */ display: inline-block; width: 14px; /* * 14,8 px en GEEN `height`. Nagemeten alternatief: met `height:14px; * line-height:14px` (de letterlijke maten van `i.tds-material-icon`) * wordt het actieblok 16,0 in plaats van 16,8 px en zakken de * kaarthoogten naar 203,08 / 216,88 -- 0,8 px onder de bron. De inkt van * de actietekst blijft 1 px hoger dan bij de bron (y 120,19 tegen * 121,19 @1280); dat is de grondlijn van een pseudo-element met een * "+" tegenover een Material-Icons-ligatuur, en het is de enige maat * van deze regel die niet sluit. */ line-height: 14.8px; } /* Kostenspecificatie. Het origineel toont die in een modal achter "Gem. kosten"; hier is het een
    , zodat het ook zonder JS werkt. Labels: [TDS] locales/nl/modal.json → "tco". */ .gta-card__tco-details summary { cursor: pointer; list-style: none; } .gta-card__tco-details summary::-webkit-details-marker { display: none; } .gta-card__tco-details summary:focus-visible { outline: 2px solid var(--gta-c-cornflower); outline-offset: 2px; } .gta-card__costs { list-style: none; margin: var(--gta-sp-sm) 0 0; padding: 0; color: var(--gta-c-gray); font-size: var(--gta-fs-xs); } .gta-card__costs li { display: flex; justify-content: space-between; gap: var(--gta-sp-md); white-space: nowrap; } .gta-card__costs .gta-card__cost-cashback { color: var(--gta-c-olive); /* [TDS] cashbackText.textColor */ font-weight: var(--gta-fw-semi); } .gta-card__costs .gta-card__cost-total { border-top: 1px solid var(--gta-c-smoke); color: var(--gta-c-slate); font-weight: var(--gta-fw-bold); margin-top: var(--gta-sp-xs); padding-top: var(--gta-sp-xs); } /* * [DOM] origineel @768 en @1280: ELKE Sim Only-resultaatrij is exact 98px hoog, * ongeacht of er een winkellogo of "Alle shops" onder de knop staat. De bron * houdt de rijen dus uniform. Onze kaarten waren 81-83px en bovendien ongelijk; * deze ondergrens maakt ze uniform op de gemeten bronhoogte. * * DE TOESTELKAART HEEFT PRECIES DEZELFDE VASTE MAAT NODIG (A23). * Gemeten aan de live bron op 2026-08-25, `vergelijker-met-toestel` @768 en * @1280, alle twintig rijen, met de afstand tussen de knoppen "Bekijken" als * onafhankelijke controle (157 px rijafstand = kaart 147 + 10 px marge): * * - kaart ZONDER actieregel -> 130 px (rij 4 en rij 12: "na 6 maanden" * wél, actieregel niet) * - kaart MÉT actieregel -> 147 px (de overige achttien) * * De bron laat de kaarthoogte dus NIET afhangen van de regels "na n maanden / * € x p.m." en evenmin van "Alle shops": rij 7 en 8 hebben geen "Alle shops" * en zijn toch 147, rij 9 heeft "na 6 maanden" en is óók 147. Alleen de * actieregel telt, en die is 17 px — precies het verschil 147 - 130. * * Bij ons hing de hele kaart wél aan de inhoud, omdat het kaartlichaam * meegroeide met de hoogste kolom: `gta-card__cta` is 79 px mét "Alle shops" * en 57 px zonder, `gta-card__monthly` 63 px mét de regels "na n maanden" en * 28 px zonder. Zolang die twee regels ONVOORWAARDELIJK werden gerenderd viel * dat niet op — de kaart was toen overal 152 px. Sinds ze conditioneel zijn * (`has_promotion_price()` in card.php) varieert de kaart van 104 tot 148 px. * Dat is de regressie. * * Het herstel legt de maat op waar de bron hem legt: het KAARTLICHAAM krijgt * een vaste hoogte en de actieregel komt daar als losse regel onder. * kaartlichaam = 10 px padding boven + 27 px kop + 83 px voet + 10 px padding * onder = 130 px * actieregel = 17 px (dus zonder de eigen marge van 5 px, want de bron * telt precies 17 px verschil) * De hoogste inhoud in de voet is 79 px (CTA mét "Alle shops"), dus 83 px * knelt nergens. */ @media (min-width: 601px) { /* De bron meet 98,19 px per Sim Only-rij; op 98 px liep het blok over twaalf rijen ruim 1 px achter. */ .gta-result-card.gta-card--sim-only { min-height: 98.19px; } /* * De CTA-kolom houdt de rijmaat, ook op kaarten zonder "Alle shops". * * Zo doet de bron het ook, alleen met een ander middel: `vb06ic-14` (de regel * "Alle shops") krijgt daar `visibility: ${…}` en wordt bij één winkel * ONZICHTBAAR gemaakt in plaats van weggelaten — de 21,09 px blijft staan. * Dat is de reden dat elke toestelrij in de bron 130,19 px meet en elke Sim * Only-rij 98,19, of er nu "Alle shops" onder staat of niet. * * Bij ons rendert de template die regel niet als er maar één winkel is, dus * staat de maat hier: 32,09 (knop) + 25 (winkellogo) + 21,09 = 78,19. * * Hier stond `.gta-card--device .gta-card__foot { min-height: 83px }`, een * noodgreep uit de tijd dat onze kaartkop 27 in plaats van 32 px hoog was. * Die is vervallen; met kop 32 + rij 78,19 + 2 x 10 padding komt de * toestelkaart vanzelf op 130,19 uit. */ .gta-card--device .gta-card__promotions { margin-top: 0; } } /* --- Kaart op smalle schermen ------------------------------------------- */ /* [TDS] sc-13m9tqj-1/-5/-8 onder "smtablet-down" (container ≤ 600px): bundel en prijsdeel gaan naar 100% en wisselen van volgorde. */ @media (max-width: 600px) { /* [TDS] vb06ic-5 / sc-13m9tqj-7 onder smtablet-down { flex:1 1 100% } */ .gta-card__bundle-col { flex: 1 1 100%; } .gta-card__bundle { flex-wrap: wrap; min-width: 0; } /* * [SHOT/DOM] origineel @375 (shots/original/375/vergelijker-sim-only.png): * onder de bundelbalk blijft het onderste deel DRIEKOLOMS — * links "2 jaar contract" met daaronder "Gem. kosten € 3,50" * midden het maandbedrag met de actieregels eronder * rechts "Bekijken" met daaronder het winkellogo en "Alle shops" * De volledige kaart is daar 160px hoog. Met de eerdere opzet (alles op * eigen regel, knop over de volle breedte) werd de kaart 246-275px, wat het * grootste hoogteverschil op mobiel veroorzaakte. */ /* * [DOM] bron @375, eerste Sim Only-kaart (identiek aanbod): de voet is een * flexrij met LINKS een groep van 213,94 px (`vb06ic-7`) en RECHTS de * knoppenkolom van 91,06 px (`vb06ic-13`). In die linkergroep staat * "2 jaar contract" op een EIGEN regel over de volle 213,94 px, met 10 px * eronder, en pas daaronder — op y 95,67 — "Gem. kosten" (108,73 px) naast * het maandbedrag (105,20 px). Op de toestelvergelijker is diezelfde * verdeling 106,16 naast 107,78: de twee kolommen worden dus door hun eigen * INHOUD verdeeld en niet door een vaste verhouding. `auto`-sporen doen dat * in een raster net als `flex: 1 1 auto` in een flexrij. * * Hier stond `1.15fr / 1fr / 1fr` met een gat van 5 px en "contract" naast * het maandbedrag. Gevolg op 375 px: de prijskolom stond 23,78 px te hoog, * "Gem. kosten" 5,61 px te laag en de knoppenkolom 2,60 px te ver naar * links en 2,58 px te breed. */ .gta-card__foot { flex: 1 1 100%; order: 2; padding-left: 0; padding-top: var(--gta-sp-md); display: grid; grid-template-columns: auto auto max-content; grid-template-areas: "contract contract cta" "tco monthly cta"; /* * Hier stond `grid-template-rows: min-content 1fr` — de contractregel op * zijn eigen hoogte en de rest voor rij twee. Dat was een compensatie * voor een contractregel die 2,7 px te hoog was (12 px / 13,8 px plus * 10 px lucht in plaats van de 14 px / 16,1 px plus 5 px van de bron); * ze klopte op de Sim Only-kaart zonder actieregel en zat er 6,75 px * naast op elke kaart mét. * * De bron verdeelt de vrije ruimte namelijk WEL gelijk. `vb06ic-7` is * daar een `flex-wrap: wrap` met twee flexregels en de standaard * `align-content: stretch`; de knoppenkolom staat ernaast en duwt beide * regels dus even ver uit elkaar. [DOM] `looptijd-per-maand-opzegbaar` * @375: bron `vb06ic-8` 30,55 hoog en rij twee op y 119,23, terwijl * dezelfde kolom op `vergelijker-sim-only` @375 23,78 meet — de hoogte * volgt de vrije ruimte, ze ligt niet vast. * * Twee `auto`-sporen doen in een raster precies dat: een item dat over * beide sporen loopt (de knoppenkolom) verdeelt zijn extra hoogte gelijk * over de sporen die het overspant. Met de contractregel op de maten van * de bron komt dat aan beide kanten op dezelfde px uit. */ grid-template-rows: auto auto; align-items: start; /* * De basisregel zet `justify-content: space-between` (voor de flexrij op * brede schermen). In een raster verdeelt dat de vrije ruimte TUSSEN de * sporen in plaats van ze te laten meegroeien: de sporen bleven op hun * max-content staan en er viel 26 px gat tussen. `normal` laat de twee * `auto`-sporen de vrije ruimte in gelijke delen opnemen — precies wat * `flex: 1 1 auto` in de bron doet. */ justify-content: normal; gap: 0; } /* * De contractkolom hoort op één regel te passen: de bron toont op 375 px * "2 jaar contract" ongebroken, met daaronder "Gem. kosten € 51,25" * (`shots/original/375/vergelijker-met-toestel.png`). Bij ons brak hij over * twee regels en werd de kaart daardoor hoger. */ .gta-card__contract { grid-area: contract; /* * [TDS] vb06ic-8 { padding: 0 0 5px; * { color:#AAAAAA; font-size:12px } } * * Onder 601 px staat de contractregel op een EIGEN regel, en dan bepaalt * de strut van dit omhulsel het regelvak. De bron laat dat omhulsel op de * 14 px / 16,1 px van de widgetreset staan en zet de 12 px alleen op de * KINDEREN; wij hadden 12 px / 13,8 px op het omhulsel zelf plus 10 px * lucht eronder in plaats van 5. De tekst viel daardoor 2 px te hoog in * het regelvak en de rij eronder begon 6,75 px te vroeg. * * [DOM] `looptijd-per-maand-opzegbaar` @375, kaart met identiek aanbod * (1 GB 5G / 250 min / 1 maand / EUR 6,- p.m. / "Niet tevreden? Geld * terug!"): bron "1 maand contract" op y 88,69 en "Gem. kosten" op * y 117,23; wij stonden op 86,69 en 110,48. * * Alleen HIER, niet in de basisregel. Vanaf 601 px is * `gta-card__contract-term` bij ons een BLOK met zijn eigen regelhoogte * en staat het woord "contract" in een anonieme regel eronder; de strut * van het omhulsel telt daar wél mee, en met 16,1 px verspringt die * tweede regel. Op die breedtes stond de kolom al goed (bron en herbouw * allebei "2 jaar" op y 40 en "contract" op y 53,8, @1280), dus daar * blijft alles zoals het was. */ font-size: var(--gta-fs); line-height: 16.1px; padding-bottom: var(--gta-sp-sm); white-space: nowrap; } .gta-card__contract > * { color: var(--gta-c-gray); font-size: var(--gta-fs-xs); line-height: 13.8px; } /* * Op brede schermen staat "2 jaar" boven "contract" (zo doet de bron het * ook), maar op telefoonbreedte zet de bron ze op EEN regel: "2 jaar * contract" (`shots/original/375/vergelijker-met-toestel.png`). */ .gta-card__contract-term { display: inline; } .gta-card__monthly { grid-area: monthly; } .gta-card__tco { grid-area: tco; } .gta-card__cta { grid-area: cta; padding-top: 0; } /* * De kaartkop staat op telefoonbreedte 5 px HOGER dan zijn eigen doos. * * Hier stond dat de 5 px `padding-bottom` er op deze breedte niet in zou * zitten. Dat klopt niet: [DOM] bron `provider-kpn` @375, `vb06ic-1` heeft * `height:27px; padding:0 0 5px; box-sizing:border-box` — de padding is er * wél. Wat er gebeurt is dit: het component wisselt naar * `flex-direction: column` en zet dan TWEE kinderen in die kolom — * `vb06ic-3`, een strook van 5 px met `margin:-10px 0 0 -10px` (order 0), en * daarna `vb06ic-2` met de eigenlijke kop (order 1). De strook trekt zichzelf * 10 px omhoog en beslaat y 0…5; de kop volgt op y 5…32 en past daarmee exact * in het inhoudsvak van 22 px (5 + 27 − 10 = 22). * * Netto: de INHOUD van de kop begint op y 5, niet op y 10, terwijl de rij * eronder gewoon op y 37 blijft. Bij ons begon alles op y 10 en stond de hele * kop dus 5 px te laag — nagemeten in de opname `provider-kpn` @375: de eerste * inktrij van het beeldje en van de naam staat bij de bron op y 636 en bij ons * op 642, en dat gold voor ELKE toestelkaart. * * `margin-top:-5px` met `padding-bottom:5px` levert precies diezelfde * geometrie: de inhoud schuift 5 px omhoog en de onderkant van de doos blijft * op y 37 (5 + 27 + 5), respectievelijk op y 55 wanneer de kop naar een tweede * regel breekt (5 + 45 + 5). De kop heeft geen achtergrond of rand, dus alleen * die twee dingen zijn zichtbaar. */ .gta-card__head { margin-top: -5px; padding-bottom: 5px; } /* * Actieregels tussen de bundelbalk (order 0) en de onderkant (order 2), zoals * de bron ze op telefoonbreedte toont. */ .gta-card__promotions { order: 1; /* * Geen extra marge: de 2 px staat sinds deze ronde als `padding-top` op de * basisregel ([TDS] sc-1hawtph-1). Met allebei werd de actieregel 18,8 px * en de toestelkaart @375 205,88 in plaats van de 203,88 van de bron. */ } /* * [SHOT] 375: de bron houdt op de Sim Only-kaart een hoogte van 160 px aan * met een rijafstand van 170 px. Met de contractkolom op één regel kwam onze * kaart op 149 px; deze extra tussenruimte brengt hem op de gemeten maat. * De toestelkaart heeft die ruimte niet nodig — die heeft een eigen kop met * toestelfoto erboven en is van zichzelf al hoger dan de bron. */ /* * De bron houdt de Sim Only-rij op telefoonbreedte op een VASTE maat: de * knoppen "Bekijken" staan op y 684, 854 en 1024 in * `shots/original/375/vergelijker-sim-only.png` -- rijafstand 170, dus een * kaart van 160 px, en dat geldt ook voor de rijen met een regel "Alle * shops" eronder. Die regel past daar dus in de bestaande speling. * * Bij ons kwam hij er bovenop: de kaart groeide van 160 naar 176 zodra de * datalaag de tweede winkel ging leveren. Vandaar dezelfde vaste maat als de * bron, met minder loze ruimte boven de knop zodat de inhoud er ook in past. */ /* * Hier stond `min-height: 160.08px` op de Sim Only-kaart en `204px` op de * toestelkaart: twee vaste rijmaten die de kaart op de gemeten bronhoogte * dwongen omdat het binnenwerk niet klopte. Met de maten van de bron * (bundelbalk 51,89, voet 88,19 en de CTA-kolom op 78,19) komt de kaart daar * vanzelf uit — en dan volgt hij de bron ook wáár die twee hoogten heeft: * 203,88 met actieregel en 187,08 zonder, in plaats van overal 204. */ /* * Dezelfde vaste rijmaat voor de toestelvergelijker: de knoppen "Bekijken" * staan in `shots/original/375/vergelijker-met-toestel.png` op y 713, 927 en * 1141 -- rijafstand 214, dus een kaart van 204 px. Ook hier is de rij in de * bron even hoog met en zonder de regel "Alle shops". */ /* * Hier stond `padding-top: 3px` voor de toestelkaart en 5 px voor Sim Only. * Allebei compensaties. De bron gebruikt één waarde voor beide: * [TDS] vb06ic-6 / sc-13m9tqj-8 onder smtablet-down { padding-left:0; * padding-top:10px; order:2 } — en die 10 px staat al in de basisregel van * `.gta-card__foot` hierboven. Nagemeten @375: de voet begint 10 px onder de * bundelbalk (bron y 88,89 met inhoud op 98,89) en de kaart komt daarmee op * 187,08 (toestel, zonder actieregel) respectievelijk 160,08 (Sim Only) uit. */ .gta-btn-clickout { width: 100%; } } /* * GEEN eigen breekpunt op 360px meer. * * Hier stond een `@media (max-width: 360px)`-blok dat elke bundelcel op een * eigen regel zette. Het origineel doet dat niet: `shots/original/320` en * `shots/original/375` van vergelijker-sim-only tonen exact dezelfde * kaartindeling, en de blokhoogte van het origineel is op 320, 375, 390 en * 414 px identiek (2201 px — RESPONSIVE_GAPS.md par. 4). Onze kaart sprong door * dat blok van 165 px naar 231 px zodra het scherm smaller werd dan 361 px, wat * over twaalf rijen 852 px kostte op Sim Only en over twintig rijen 1620 px op * de toestelvergelijker. * * Er is nu dus GEEN enkele regel meer die onder 361 px iets anders doet: de * kaart is van 320 tot 600 px identiek, precies zoals in de bron. */ /* ========================================================================== 6. Filters Kleuren en randen [TDS] filter.* uit het thema; de vorm van de UI is [GTA] omdat het origineel geen server-side filterformulier heeft. ========================================================================== */ .gta-filters { background-color: var(--gta-c-white); /* [TDS] filter.secondaryFiltersBackgroundColor */ border: 1px solid var(--gta-c-smoke); /* [TDS] filter.secondaryFiltersBorderColor */ border-radius: var(--gta-radius); margin: 0; } /* * De hoofdfilters (Data, Minuten, Maandelijks) staan op het origineel in een * eigen lichtblauw paneel; de rest van de filters staat op wit. Bewijs: * `shots/original/1024/vergelijker-sim-only.png` — de drie sliders liggen op * een blauw vlak, "Providers" eronder op wit. */ .gta-filters__quick { background-color: var(--gta-c-azure); /* [TDS] filter.mainFiltersBackgroundColor */ border-bottom: 1px solid var(--gta-c-powder); /* [TDS] filter.mainFiltersBorderColor */ border-radius: var(--gta-radius) var(--gta-radius) 0 0; /* [TDS] sc-1k8cnet-1 */ } .gta-filters__quick .gta-filters__group { border-bottom: none; } /* * De balk is in de bron 98 px hoog (gemeten op * `shots/original/768/vergelijker-sim-only.png`, y 388-485); bij ons 114 px. * Die 16 px gaan naar de knoppenrij eronder, waar de bron ze ook heeft staan. */ @media (max-width: 991px) { .gta-filters__quick .gta-filters__group--quick { padding-bottom: var(--gta-sp-md); padding-top: var(--gta-sp-md); } .gta-filters__more { padding-bottom: var(--gta-sp-md); } } .gta-filters__group { border-bottom: 1px solid var(--gta-c-smoke); /* [TDS] sc-1k8cnet-3 & > div */ padding: var(--gta-sp-md); } .gta-filters__group:last-of-type { border-bottom: none; /* [TDS] sc-1k8cnet-3 :last-child */ } .gta-filters__legend { border: 0; display: flex; font-size: var(--gta-fs); font-weight: var(--gta-fw-bold); /* [TDS] sc-1vr7wsw-2 { font-weight:700 } */ justify-content: space-between; align-items: center; margin: 0 0 var(--gta-sp-sm); padding: 0; width: 100%; /* * Hier stond `line-height: 1.4`, nog zo'n eigen aanname; het bijschrift erft * nu de 1,15 van het widget. In de smalle balk klopt daarmee de hele reeks * (labelregel 18,94 -> groep 70,94 -> balk 97,88, exact de bron). * * OOK IN DE ZIJKOLOM. Hier stond tot ronde 14 een media query die vanaf * 992 px alsnog 1,4 zette: een compensatie voor een groep die te kort was. * Ronde 14 heeft de oorzaak weggenomen (§23.x hieronder, blok "zijkolom op * de maat van de bron"), dus de compensatie is vervallen. [DOM] bron @1280: * het bijschrift in het azuren paneel meet 18,94 (chip 2 + 13 x 1,15 + 2) en * in het witte paneel 16,09 (14 x 1,15) — allebei regelhoogte 1,15. */ color: var(--gta-c-slate); } /* Waardechip naast de labelnaam — [TDS] sc-1vr7wsw-3 { padding: 2px 5px }. [DOM] bron @768: de chip meet 18,94 px hoog (2 + 13 x 1,15 + 2); hier stond geen verticale padding, wat er 18,19 van maakte. */ .gta-filters__value { background-color: var(--gta-c-lavender); color: var(--gta-c-cornflower); font-size: var(--gta-fs-sm); font-weight: var(--gta-fw-semi); padding: var(--gta-sp-xs) var(--gta-sp-sm); border-radius: var(--gta-radius); white-space: nowrap; } .gta-filters__scale { display: flex; font-size: var(--gta-fs-xs); /* [TDS] sc-1vr7wsw-4 { font-size:12px } */ justify-content: space-between; width: 100%; } .gta-filters__check { cursor: pointer; display: block; font-size: var(--gta-fs-sm); /* [TDS] sc-19ydw6r-2 label { font-size } */ font-weight: var(--gta-fw-normal); margin-bottom: var(--gta-sp-sm); padding-left: 22px; /* [TDS] sc-19ydw6r-2 { padding-left:22px } */ position: relative; user-select: none; } .gta-filters__check input { cursor: pointer; position: absolute; left: 0; top: 2px; margin: 0; width: 14px; /* [TDS] sc-19ydw6r-3 { height:14px; width:14px } */ height: 14px; accent-color: var(--gta-c-cornflower); /* [TDS] filter.checkboxList.checkedBackgroundColor */ } .gta-filters__check:hover { background-color: var(--gta-c-lavender); /* [TDS] filter.checkboxList.hoverBackgroundColor */ } /* * [DOM] bron @1280, het keuzemenu "Huidige provider" in de groep Verlengen: * 14 px, `padding: 2px 5px`, rand #E2EAF4 en schaduw #BDCEE6. Hier stond 13 px * zonder padding, met de rand- en schaduwkleur van het paneel eromheen; de * tekst begon daardoor 5 px te ver naar links en zat een korpsgrootte te klein. */ .gta-filters__select { background-color: var(--gta-c-white); border: 1px solid var(--gta-c-select-border); border-radius: var(--gta-radius); box-shadow: 0 1px 3px 0 var(--gta-c-select-shadow); /* [TDS] sc-12zp8ht-2 */ color: var(--gta-c-cornflower); /* [TDS] filter.selectFilter.textColor */ font-family: var(--gta-font); font-size: var(--gta-fs); /* * [DOM] bron `vergelijker-sim-only` @1280: het keuzemenu bij "Verlengen" * staat op `font-weight: 700`. Alle andere berekende waarden waren al * gelijk (81..279, 30 px hoog, 14 px, padding 2px 5px, rand #E2EAF4, * schaduw #BDCEE6, kleur #4A90E2); dit was het enige verschil, en het is * de hele reden dat het menu nog 0,663 % van zijn uitsnede afweek. Het is * dus NIET de pijl van de native