/* Opmaak van coenfirmationbias.nl Alles staat in dit ene bestand. Kleuren en maten staan bovenaan, zodat je ze kunt aanpassen zonder de rest te hoeven begrijpen. */ :root { --inkt: #16181d; --grijs: #5b6472; --lijn: #dfe3e8; --papier: #ffffff; --achtergrond: #f7f7f5; --accent: #7a1f1f; --breedte: 42rem; --breed: 62rem; /* alleen de homepagina is zo breed */ } @media (prefers-color-scheme: dark) { :root { --inkt: #e8e8e6; --grijs: #9aa3b0; --lijn: #333941; --papier: #1a1c21; --achtergrond: #121418; --accent: #e0a0a0; } } * { box-sizing: border-box; } body { margin: 0; background: var(--achtergrond); color: var(--inkt); font: 1.0625rem/1.7 Georgia, "Iowan Old Style", "Times New Roman", serif; -webkit-text-size-adjust: 100%; /* body is een "container": daardoor betekent 100cqw de breedte van de pagina ZONDER de verticale schuifbalk. De rijen op /alle-stukken/ rekenen daarmee (zie .rij). Met 100vw telde de schuifbalk mee: op Windows, met een gewone schuifbalk van 15 punten, stak de rij dan 7,5 punten uit, en stond de eerste kaart bij vensters smaller dan ongeveer 1000 punten 7 punten links van de naam van het onderwerp. Gemeten op 11 sep 2026. Keuze van CB. */ container-type: inline-size; /* Vangnet: is er toch iets breder dan het venster, dan schuift de pagina zelf niet opzij. clip maakt, anders dan hidden, geen schuifgebied aan. Let op: iets wat te breed is, wordt hierdoor afgeknipt in plaats van dat het opvalt. Meet dus niet alleen of de pagina opzij schuift, maar ook of er iets buiten de pagina steekt. */ overflow-x: hidden; overflow-x: clip; } /* ------------------------------------------------------------- kop */ .kop { text-align: center; padding: 2.5rem 1.25rem 1.5rem; border-bottom: 1px solid var(--lijn); background: var(--papier); } .kop .leus { margin: 0 auto 1.25rem; max-width: 34rem; font-size: 0.8125rem; letter-spacing: 0.12em; color: var(--grijs); font-style: italic; } .kop .naam { margin: 0 0 1rem; font-size: clamp(1.75rem, 6vw, 2.75rem); font-weight: 700; letter-spacing: -0.01em; } .kop .naam a { color: inherit; text-decoration: none; } .kop nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.75rem; } .kop nav a { font-family: system-ui, sans-serif; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grijs); text-decoration: none; } .kop nav a:hover { color: var(--accent); } /* ------------------------------------------------------------ main */ main { max-width: var(--breedte); margin: 0 auto; padding: 2.5rem 1.25rem 4rem; } /* ================================================== de homepagina Alles hieronder tot aan "overzicht" is voor de homepagina. Die pagina heeft ; de artikelen niet. Daarom staat body.home voor de regel van main: zonder die beperking zouden ook de artikelen breder worden, en die moeten 42rem blijven. */ body.home main { max-width: var(--breed); margin: 0 auto; padding-block: 3rem 4rem; padding-inline: 1.25rem; display: flex; flex-direction: column; gap: 4rem; } .sectiekop { font-family: system-ui, sans-serif; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grijs); font-weight: 600; margin: 0 0 1.25rem; } /* De introductie bovenaan. Op verzoek van CB gecentreerd, zoals bij De Correspondent: margin-inline zet het blok van 42rem in het midden van de bredere kolom, text-align centreert de regels binnen dat blok. In het goedgekeurde ontwerp stond hij links; dit is een bewuste afwijking. */ .intro { max-width: var(--breedte); margin-inline: auto; text-align: center; } .intro h1 { font-size: clamp(1.6rem, 4.5vw, 2.1rem); line-height: 1.25; letter-spacing: -0.015em; margin: 0 0 1rem; text-wrap: balance; } .intro p { margin: 0 0 1rem; } .intro p:last-child { margin-bottom: 0; } /* ------------------------------------------ een kaart in de waaier */ .uitkaart { border: 1px solid var(--lijn); border-radius: 3px; background: var(--papier); padding: 1rem; display: flex; flex-direction: column; gap: 0.7rem; } .uitkaart .beeld { border-radius: 2px; overflow: hidden; display: grid; place-items: center; } .uitkaart .beeld img { max-height: 15rem; width: auto; max-width: 100%; display: block; } .uitkaart time { display: block; font-family: system-ui, sans-serif; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grijs); } .uitkaart h3 { margin: 0; font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.005em; text-wrap: balance; } .uitkaart h3 a { color: inherit; text-decoration: none; } .uitkaart h3 a:hover { color: var(--accent); } .uitkaart .samenvatting { margin: 0; color: var(--grijs); font-size: 0.9375rem; line-height: 1.55; } .verder { font-family: system-ui, sans-serif; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; align-self: flex-start; } /* ------------------------------------------------- de waaier zelf */ .balk { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .balk .sectiekop { margin: 0; } .knoppen { display: none; gap: 0.5rem; align-items: center; } .waaier-aan .knoppen { display: flex; } .knoppen button { font-family: system-ui, sans-serif; font-size: 1rem; line-height: 1; width: 2.25rem; height: 2.25rem; border: 1px solid var(--lijn); background: var(--papier); color: var(--inkt); border-radius: 999px; cursor: pointer; } .knoppen button:hover { border-color: var(--accent); color: var(--accent); } .stippen { display: flex; gap: 0.35rem; margin: 0 0.35rem; } .stippen button { width: 0.5rem; height: 0.5rem; padding: 0; border-radius: 999px; border: 1px solid var(--grijs); background: transparent; cursor: pointer; } .stippen button[aria-current="true"] { background: var(--accent); border-color: var(--accent); } /* zonder JavaScript: gewoon drie kaarten onder elkaar */ .waaier { display: flex; flex-direction: column; gap: 1.25rem; } /* met JavaScript: één voorop, twee half erachter */ .waaier-aan .waaier { display: block; position: relative; min-height: 34rem; } .waaier-aan .waaier > article { position: absolute; top: 0; left: 50%; width: 52%; transform-origin: center center; transition: transform 0.35s ease, opacity 0.35s ease; } .waaier-aan .waaier > article.voor { transform: translateX(-50%); z-index: 3; opacity: 1; } .waaier-aan .waaier > article.links { transform: translateX(-95%) translateY(2rem) scale(0.8); z-index: 1; opacity: 0.7; cursor: pointer; } .waaier-aan .waaier > article.rechts { transform: translateX(-5%) translateY(2rem) scale(0.8); z-index: 1; opacity: 0.7; cursor: pointer; } .waaier-aan .waaier > article.links:hover, .waaier-aan .waaier > article.rechts:hover { opacity: 0.92; } /* op de zijkaarten alleen plaatje en titel */ .waaier-aan .waaier > article .samenvatting, .waaier-aan .waaier > article .verder, .waaier-aan .waaier > article time { display: none; } .waaier-aan .waaier > article.voor .samenvatting, .waaier-aan .waaier > article.voor time { display: block; } .waaier-aan .waaier > article.voor .verder { display: inline-block; } @media (prefers-reduced-motion: reduce) { .waaier-aan .waaier > article { transition: none; } } /* op een smal scherm past de waaier niet: alleen het voorste stuk */ @media (max-width: 52rem) { .waaier-aan .waaier { min-height: 0; } /* De regels hierboven voor .voor, .links en .rechts zijn preciezer dan een regel op alleen article. In CSS wint de preciezere regel, ook binnen een blok voor smalle schermen. Stonden ze hier niet apart genoemd, dan bleef translateX(-50%) staan en schoof de voorste kaart 168 punten naar links, half buiten het scherm. Gemeten en hersteld op 10 sep 2026. */ .waaier-aan .waaier > article, .waaier-aan .waaier > article.voor, .waaier-aan .waaier > article.links, .waaier-aan .waaier > article.rechts { position: static; width: 100%; transform: none; opacity: 1; } .waaier-aan .waaier > article:not(.voor) { display: none; } } /* ------------------------------------------------- de twee blokken */ .blokken { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } @media (max-width: 46rem) { .blokken { grid-template-columns: 1fr; } } .blok { border: 1px solid var(--lijn); border-left: 3px solid var(--accent); border-radius: 3px; background: var(--papier); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; } .blok h3 { margin: 0; font-size: 1.25rem; line-height: 1.3; } .blok p { margin: 0; font-size: 0.9375rem; color: var(--grijs); } .blok .aanbeveling { margin: 0; font-size: 0.875rem; font-style: italic; color: var(--grijs); border-top: 1px solid var(--lijn); padding-top: 0.75rem; } .blok .aanbeveling span { display: block; font-style: normal; font-size: 0.75rem; margin-top: 0.4rem; } .blok .verder { margin-top: auto; } /* ----------------------------------------- de onderwerpen onderaan */ .rooster { display: grid; /* 16rem in plaats van 14rem: bij 14rem kwamen er vier tegels op een rij van 226 punten, en "Voedingswetenschap 8 stukken" heeft er 252 nodig. Bij 16rem worden het drie tegels van ruim 300. Gemeten op 10 sep 2026. */ grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.85rem; } .onderwerp { border: 1px solid var(--lijn); border-radius: 3px; background: var(--papier); padding: 0.9rem 1rem; text-decoration: none; color: inherit; display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; } .onderwerp:hover { border-color: var(--accent); color: var(--accent); } /* min-width: 0 en overflow-wrap zijn de vangnetten: zonder die twee weigert een lang woord als "Voedingswetenschap" te krimpen of af te breken, en steekt het buiten de tegel. Nodig zodra jij een groep een lange naam geeft. */ .onderwerp b { font-weight: 600; font-size: 1rem; min-width: 0; overflow-wrap: anywhere; } .onderwerp span { font-family: system-ui, sans-serif; font-size: 0.75rem; color: var(--grijs); font-variant-numeric: tabular-nums; flex: none; } .alles { margin: 1.25rem 0 0; font-family: system-ui, sans-serif; font-size: 0.875rem; } .alles a { color: var(--accent); } /* ============================================ einde van de homepagina */ .siteknop { font-size: 0.8125rem; font-family: system-ui, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grijs); font-weight: 600; margin: 0 0 1.5rem; } /* --------------------------------------------------------- overzicht */ .lijst { list-style: none; margin: 0; padding: 0; } .kaart { border-bottom: 1px solid var(--lijn); } .kaart:last-child { border-bottom: 0; } .kaart a { display: flex; gap: 1.25rem; align-items: flex-start; padding: 1.5rem 0; color: inherit; text-decoration: none; } .kaart img { width: 7.5rem; height: 7.5rem; /* contain, niet cover: de omslagen bevatten vaak tekst, en die mag niet worden weggesneden */ object-fit: contain; flex: none; border-radius: 2px; background: var(--achtergrond); } .kaart-tekst { min-width: 0; } .kaart time { display: block; font-family: system-ui, sans-serif; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--grijs); margin-bottom: 0.35rem; } .kaart h2 { margin: 0 0 0.4rem; font-size: 1.3125rem; line-height: 1.3; } .kaart a:hover h2 { color: var(--accent); } .kaart p { margin: 0; color: var(--grijs); font-size: 0.9375rem; line-height: 1.55; } @media (max-width: 34rem) { .kaart a { flex-direction: column; gap: 0.75rem; } .kaart img { width: 100%; height: 11rem; } } /* -------------------------------------------------------------- post */ .post .datum { font-family: system-ui, sans-serif; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grijs); margin: 0 0 0.75rem; } .post h1 { font-size: clamp(1.6rem, 5vw, 2.25rem); line-height: 1.2; margin: 0 0 1rem; letter-spacing: -0.015em; } .post .samenvatting { color: var(--grijs); font-size: 1.0625rem; margin: 0 0 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--lijn); } /* ------------------------------------------------- inhoudsopgave Staat boven aan een artikel, tussen de samenvatting en de tekst. Alleen de hoofdstukken; de onderdelen daaronder komen er niet in. Het is een echte lijst, zodat een voorleesprogramma meldt hoeveel stukken erin staan. De regels hieronder staan buiten .tekst, dus ze botsen niet met de opmaak van de kopjes in het artikel. */ .inhoudsopgave { margin: 0 0 2.5rem; padding: 1.25rem 1.5rem; border: 1px solid var(--lijn); border-left: 3px solid var(--accent); border-radius: 3px; background: var(--papier); } .inhoudsopgave h2 { margin: 0 0 0.75rem; font-family: system-ui, sans-serif; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grijs); font-weight: 600; } .inhoudsopgave ul { margin: 0; padding-left: 1.25rem; } .inhoudsopgave li { margin-bottom: 0.4rem; font-size: 0.9375rem; line-height: 1.45; } .inhoudsopgave li:last-child { margin-bottom: 0; } .inhoudsopgave a { color: var(--accent); text-decoration: none; } .inhoudsopgave a:hover { text-decoration: underline; } /* ------------------------------------------------- luisterregel Staat boven een artikel dat bij een aflevering van de podcast hoort, tussen de samenvatting en de inhoudsopgave. Hetzelfde kader als de inhoudsopgave eronder, met minder ruimte ertussen, zodat de twee als een geheel boven het artikel staan. */ .luisteren { margin: 0 0 1rem; padding: 0.9rem 1.5rem; border: 1px solid var(--lijn); border-left: 3px solid var(--accent); border-radius: 3px; background: var(--papier); font-size: 0.9375rem; line-height: 1.45; } .luisteren a { color: var(--accent); text-decoration: none; } .luisteren a:hover { text-decoration: underline; } /* ------------------------------------------------- podcastpagina De lijst met afleveringen op /podcast/. Die staat binnen .tekst; de gewone opmaak van lijsten daar wordt hier eerst weer uitgezet. */ .tekst .afleveringen { list-style: none; margin: 2rem 0 0; padding: 0; } .tekst .afleveringen .aflevering { margin: 0; padding: 1.1rem 0; border-top: 1px solid var(--lijn); display: flex; flex-direction: column; gap: 0.25rem; } .tekst .afleveringen .aflevering:last-child { border-bottom: 1px solid var(--lijn); } .afleveringen .nummer, .afleveringen .gegevens { font-family: system-ui, sans-serif; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grijs); } .tekst .afleveringen .titel { font-size: 1.125rem; line-height: 1.35; text-decoration: none; } .tekst .afleveringen .titel:hover { text-decoration: underline; } .tekst .afleveringen .lees { font-family: system-ui, sans-serif; font-size: 0.8125rem; align-self: flex-start; } .tekst h2 { font-size: 1.4375rem; line-height: 1.3; margin: 2.75rem 0 0.75rem; letter-spacing: -0.01em; } .tekst h3 { font-size: 1.1875rem; margin: 2rem 0 0.5rem; } .tekst h4, .tekst h5, .tekst h6 { font-size: 1rem; margin: 1.75rem 0 0.5rem; font-family: system-ui, sans-serif; letter-spacing: 0.02em; } .tekst p { margin: 0 0 1.25rem; } .tekst a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.15em; } /* Lange webadressen en lange woorden mogen niet buiten de tekstkolom steken. Gemeten op 10 sep 2026 op de draaiende site: op een scherm van 375 punten liepen 15 van de 24 artikelen over, bijna altijd door een link die als één onbreekbaar woord telt. "anywhere" mag alleen op links: die hebben geen spaties om op af te breken. Gewone tekst breekt met "break-word" alleen af als een woord echt niet past. */ .tekst { overflow-wrap: break-word; } .tekst a { overflow-wrap: anywhere; } .post h1, .post .samenvatting, .tekst h2, .tekst h3, .tekst h4, .tekst h5, .tekst h6 { overflow-wrap: break-word; } .tekst ul, .tekst ol { margin: 0 0 1.25rem; padding-left: 1.5rem; } .tekst li { margin-bottom: 0.5rem; } .tekst img { max-width: 100%; height: auto; display: block; margin: 2rem auto 0.5rem; border-radius: 2px; } .tekst img + em, .tekst figcaption { display: block; text-align: center; font-size: 0.875rem; color: var(--grijs); } .tekst blockquote { margin: 2rem 0; padding: 1rem 1.25rem; border-left: 3px solid var(--accent); background: var(--papier); font-size: 0.9375rem; } .tekst blockquote p:last-child { margin-bottom: 0; } /* Een brede tabel schuift binnen zijn eigen kader en duwt de tekst eromheen niet naar buiten. Gemeten op 10 sep 2026: op een scherm van 375 punten was de tabel in het pre-workoutstuk 511 punten breed in een tekstkolom van 320. */ .tabelrol { overflow-x: auto; margin: 1.75rem 0; } /* Hier staat .tekst voor, en dat is met opzet: ".tabelrol table" is even sterk als ".tekst table" hieronder, en bij gelijke sterkte wint in CSS de regel die het laatst staat. Zonder dat woord bleef de marge van de tabel staan bovenop die van het omhulsel en werd het gat boven elke tabel 56 punten in plaats van 28. Gemeten op 10 sep 2026. */ .tekst .tabelrol table { margin: 0; } .tekst table { width: 100%; border-collapse: collapse; margin: 1.75rem 0; font-size: 0.9375rem; font-family: system-ui, sans-serif; } .tekst th, .tekst td { border: 1px solid var(--lijn); padding: 0.5rem 0.7rem; text-align: left; } .tekst th { background: var(--papier); font-weight: 600; } /* Oordeelkleuren in tabellen. Deze kleuren dragen betekenis: ze kwamen zo van de oude site. Wie kleurenblind is of de pagina laat voorlezen, mist die betekenis nog; daarvoor moet er een woord bij komen te staan. */ .tekst td:has(.oordeel-groen) { background: #25a55a; color: #fff; } .tekst td:has(.oordeel-oranje) { background: #ffb700; color: #16181d; } .tekst td:has(.oordeel-rood) { background: #e62214; color: #fff; } /* op een vaste pagina staat vaak een portretfoto; die hoeft het scherm niet te vullen */ /* min(22rem, 100%): 22rem is 352 punten, en op een telefoonscherm is de tekstkolom maar 320 punten breed. Met alleen 22rem stak de foto er 32 punten uit, op Over Coen en op de ScienceChecker-pagina. Gemeten op 10 sep 2026. */ .vaste-pagina .tekst img { max-width: min(22rem, 100%); margin: 2rem 0; } /* --------------------------------------------------- aanbevelingen Een vaste pagina met "breed: ja" in het kopblok krijgt . Die pagina is 62rem breed, maar de lopende tekst blijft 42rem: bredere regels lezen slechter. Dat gaat zo: de tekst is een rooster van drie kolommen, alles staat in de middelste van 42rem, en alleen het blok met aanbevelingen gebruikt alle drie de kolommen. Op een smal scherm zijn de buitenste kolommen nul breed en verandert er niets. */ body.breed main { max-width: var(--breed); } body.breed .vaste-pagina .tekst { display: grid; grid-template-columns: 1fr min(var(--breedte), 100%) 1fr; } body.breed .vaste-pagina .tekst > * { grid-column: 2; } body.breed .vaste-pagina .tekst > .aanbevelingen { grid-column: 1 / -1; } .aanbevelingen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 3rem 0 0; } @media (max-width: 52rem) { .aanbevelingen { grid-template-columns: 1fr; } } .aanbevelingen .aanbeveling { border: 1px solid var(--lijn); border-left: 3px solid var(--accent); border-radius: 3px; background: var(--papier); padding: 1.25rem; display: flex; flex-direction: column; gap: 0.9rem; } .aanbevelingen .aanbeveling p { margin: 0; font-size: 0.9375rem; line-height: 1.55; font-style: italic; } .aanbevelingen .aanbeveling .wie { margin-top: auto; font-style: normal; font-size: 0.8125rem; line-height: 1.45; color: var(--grijs); border-top: 1px solid var(--lijn); padding-top: 0.9rem; } /* uitklapblokken */ .tekst details { margin: 1.75rem 0; border: 1px solid var(--lijn); border-radius: 3px; background: var(--papier); padding: 0 1.1rem; } .tekst details[open] { padding-bottom: 0.5rem; } .tekst summary { cursor: pointer; padding: 0.85rem 0; font-family: system-ui, sans-serif; font-size: 0.9375rem; font-weight: 600; } .tekst summary:hover { color: var(--accent); } /* een leeg ankerpunt mag geen ruimte innemen */ .tekst a[id]:empty { display: block; height: 0; } /* ------------------------------------------------------------- tags */ .tags { margin: 3rem 0 2rem; padding-top: 1.5rem; border-top: 1px solid var(--lijn); line-height: 2.2; } .tag { font-family: system-ui, sans-serif; font-size: 0.75rem; color: var(--grijs); border: 1px solid var(--lijn); border-radius: 999px; padding: 0.25rem 0.7rem; white-space: nowrap; } .terug { font-family: system-ui, sans-serif; font-size: 0.875rem; } .terug a { color: var(--accent); } /* ------------------------------------------------------------- voet */ .voet { border-top: 1px solid var(--lijn); background: var(--papier); text-align: center; padding: 2rem 1.25rem; font-family: system-ui, sans-serif; font-size: 0.8125rem; color: var(--grijs); } .voet p { margin: 0.25rem 0; } .voet a { color: var(--grijs); } /* wie met het toetsenbord navigeert moet kunnen zien waar hij is */ a:focus-visible, summary:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ===================================== alle stukken, per onderwerp /alle-stukken/ toont elk onderwerp als een rij die opzij schuift. De pagina heeft body class="breed", dus main is 62rem (--breed). De klasse heet rijkaart en niet kaart: .kaart is de liggende regel op de onderwerppagina's, en die twee moeten elkaar niet in de weg zitten. */ .paginakop { margin: 0 0 0.5rem; font-size: clamp(1.6rem, 5vw, 2.25rem); text-wrap: balance; } .inleiding { margin: 0 0 2.5rem; color: var(--grijs); font-size: 0.9375rem; } .onderwerprij { margin-bottom: 2.75rem; } .rijkop { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; border-bottom: 1px solid var(--lijn); padding-bottom: 0.5rem; } .rijkop a { color: inherit; text-decoration: none; } .rijkop a:hover h2 { color: var(--accent); } .rijkop h2 { margin: 0; font-family: system-ui, sans-serif; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; } .rijkop .aantal { margin: 0.15rem 0 0; font-family: system-ui, sans-serif; font-size: 0.75rem; color: var(--grijs); } .pijlen { display: flex; gap: 0.4rem; flex: none; } .pijlen[hidden] { display: none; } .pijl { width: 2.1rem; height: 2.1rem; border: 1px solid var(--lijn); border-radius: 999px; background: var(--papier); color: var(--inkt); display: grid; place-items: center; cursor: pointer; padding: 0; } .pijl svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .pijl:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } .pijl:disabled { opacity: 0.3; cursor: default; } .pijl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* De rij loopt over de volle breedte van de pagina: kaarten gaan links het scherm uit en komen rechts binnen. De opvulling links is precies zo breed als de marge van main, zodat de eerste kaart onder de naam van het onderwerp begint. cqw en niet vw: 100cqw is de breedte zonder de schuifbalk, want body is de container (zie body). Wat er is nagemeten en bij welke breedtes, staat in MEMORY.md onder 11 september 2026. */ .rij { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(50% - 50cqw); padding-block: 0.25rem 1rem; padding-inline: max(1.25rem, calc(50cqw - var(--breed) / 2 + 1.25rem)); scroll-padding-inline-start: max(1.25rem, calc(50cqw - var(--breed) / 2 + 1.25rem)); scrollbar-width: thin; } .rij:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .rijkaart { flex: none; width: 16.5rem; scroll-snap-align: start; background: var(--papier); border: 1px solid var(--lijn); border-radius: 3px; overflow: hidden; } .rijkaart > a { display: block; color: inherit; text-decoration: none; height: 100%; } /* contain, niet cover: de omslagen bevatten vaak tekst, en die mag niet worden weggesneden. De verhoudingen lopen van 0,61 tot 1,89, dus één vaste uitsnede bestaat hier niet. Gemeten op 11 sep 2026. */ .rijkaart .beeld { display: grid; place-items: center; height: 9.5rem; background: var(--achtergrond); border-bottom: 1px solid var(--lijn); overflow: hidden; } .rijkaart .beeld img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; } .rijkaart .geen-beeld { font-family: system-ui, sans-serif; font-size: 0.75rem; color: var(--grijs); letter-spacing: 0.06em; } .rijkaart-tekst { display: block; padding: 0.9rem 1rem 1.1rem; } .rijkaart time { display: block; font-family: system-ui, sans-serif; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--grijs); margin-bottom: 0.35rem; } .rijkaart h3 { margin: 0 0 0.4rem; font-size: 1.0625rem; line-height: 1.3; text-wrap: balance; overflow-wrap: break-word; } .rijkaart a:hover h3 { color: var(--accent); } .rijkaart p { margin: 0; color: var(--grijs); font-size: 0.875rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 34rem) { .rijkaart { width: 14rem; } }