/* kleine hulpklassen, in plaats van style-attributen in de html */ .main-top { padding-top: clamp(84px, 11vh, 120px); } .mb-0 { margin-bottom: 0; } .ratio-16-9 { aspect-ratio: 16 / 9; } /* ---- uit ---- */ /* paden vanuit deze map naar het logo */ /* pagina-eigen stijlen hieronder */ .prose img { max-height: 68vh; object-fit: cover; width: 100%; } /* == artikel-opmaak == */ :root { --art-uit: clamp(0px, calc((100vw - 792px) / 2), 268px); } #art .wrap.narrow > h1.h1 { font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -0.04em; } #art .art-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; margin-bottom: clamp(20px, 3.4vh, 34px); } #art .art-terug { color: rgba(var(--ink-rgb), 0.7); } #art .art-eyebrow { font-size: var(--fs-caption); font-weight: 600; line-height: 1.4; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.7); } #art .art-beeld { position: relative; margin: clamp(28px, 5vh, 52px) calc(-1 * var(--art-uit)) 0; border-radius: var(--radius-card); overflow: hidden; background: var(--tint-b); } #art .art-beeld .frame { border-radius: inherit; } #art .art-beeld::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(var(--scrim-rgb), 0.22) 0%, rgba(var(--scrim-rgb), 0) 42%, rgba(var(--scrim-rgb), 0.4) 100%); box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), 0.08); } /* Het artikel zelf zonder onthulling. [data-rise] in pagina.css zet opacity op 0 tot pagina.js de klasse .in geeft; dat script staat met defer onderaan, dus op een telefoon wachtte de grootste verf ruim een seconde op de IntersectionObserver — bij de meeste artikelen het heldenbeeld, bij een lange openingsalinea de tekst. Metaregel, titel, beeld en broodtekst staan daarom meteen in het eerste frame. Buiten
(de slotband, de footer) blijft de onthulling gewoon werken. */ #art .art-meta[data-rise], #art h1.h1[data-rise], #art .art-beeld[data-rise], #art .prose[data-rise] { opacity: 1; transform: none; transition: none; } #art .prose { margin-top: clamp(32px, 5vh, 52px); } #art .prose > p:first-of-type { color: var(--ink); } /* slotband, overgenomen van #laatste-stap op de homepage */ [data-curtain-dim] { position: absolute; inset: 0; z-index: 5; background: var(--deep); opacity: 0; pointer-events: none; } #art-slot { position: relative; z-index: 7; padding-bottom: clamp(40px, 6vh, 80px); } #art-slot .ls-card { position: relative; overflow: hidden; border-radius: clamp(20px, 2vw, 32px); background: var(--tint-c); color: var(--ink); isolation: isolate; } #art-slot .ls-body { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr); align-items: center; gap: clamp(28px, 5vw, 80px); padding: clamp(36px, 6vh, 76px) clamp(22px, 4.5vw, 64px); } #art-slot .ls-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(var(--ink-rgb), 0.68); } #art-slot .ls-kicker i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--cta); box-shadow: 0 0 14px 2px rgba(var(--green-rgb), 0.45); } #art-slot .ls-h { margin: clamp(16px, 3vh, 28px) 0 0; max-width: 14ch; font-size: var(--fs-h2); line-height: 0.98; font-weight: 600; letter-spacing: -0.045em; text-wrap: balance; color: var(--ink); } #art-slot .ls-h em { font-style: normal; color: rgba(var(--ink-rgb), 0.7); } #art-slot .ls-sub { margin: clamp(14px, 2.4vh, 24px) 0 0; max-width: 42ch; font-size: var(--fs-small); line-height: 1.5; letter-spacing: -0.015em; color: rgba(var(--ink-rgb), 0.7); text-wrap: pretty; } #art-slot .ls-acts { display: flex; flex-direction: column; align-items: stretch; gap: 12px; } #art-slot .ls-acts .btn { justify-content: space-between; } @media (max-width: 860px) { #art-slot .ls-body { grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vh, 34px); padding: clamp(28px, 5vh, 40px) clamp(18px, 5vw, 30px); } #art-slot .ls-h { max-width: 18ch; } } @media (max-width: 620px) { #art .art-meta { gap: 8px; } }