/* * KASCH — de landingspagina. * * Eén verhaal in zes tijdperken. Elk tijdperk heeft zijn eigen letter, kleur en zelfs * knopstijl: de pagina verandert mee met de tijd waar je doorheen scrollt. De tokens per * tijdperk staan op ; main.js zet dat attribuut bij elke overgang. * * Zonder JavaScript (of vóór het laden) staat alles gewoon onder elkaar. De filmische * opbouw hangt aan de klasse .js op . */ /* ------------------------------------------------------------------ */ /* Basis */ /* ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; } body { background: #050709; color: #e7eef7; font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, canvas { display: block; } a { color: inherit; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } h1, h2, h3, p { margin: 0; } ol, ul { margin: 0; padding: 0; list-style: none; } ::selection { background: #17d17d; color: #06110b; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } :focus-visible { outline: 2px solid #17d17d; outline-offset: 3px; border-radius: 4px; } /* Lenis, overgenomen uit lenis.css 1.3.26: zo is er geen extern stylesheet nodig. */ html.lenis, html.lenis body { height: auto; } .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; } .lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch], .lenis [data-lenis-prevent-vertical], .lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; } .lenis.lenis-smooth iframe { pointer-events: none; } .lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; } :root { color-scheme: dark; --bar: clamp(44px, 7.4vh, 80px); --rand: max(20px, 4.2vw); --horizon-y: 64vh; --vh: 1vh; --groen: #17d17d; --groen-2: #0fae66; --ink: #0b0f14; --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif; --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --f1900: "Bodoni Moda", Didot, "Bodoni 72", serif; --f1950: "Poiret One", Futura, "Century Gothic", sans-serif; --f1970: "Fraunces", "Cooper Black", Georgia, serif; --f2000: "VT323", "Lucida Console", "Courier New", monospace; --f2015: "Roboto", "Helvetica Neue", Arial, sans-serif; --ease: cubic-bezier(.2, .7, .1, 1); /* Wat het huidige tijdperk aan de gedeelde onderdelen geeft (hud, ondertitel). */ --fg: #efe6d2; --fg-zacht: rgba(239, 230, 210, .6); --hud-fg: #efe6d2; --hud-font: var(--sans); } /* ------------------------------------------------------------------ */ /* De tijdperken */ /* ------------------------------------------------------------------ */ html[data-era="0"] { --fg: #f1ead9; --fg-zacht: rgba(241, 234, 217, .62); --hud-fg: #f1ead9; --hud-font: var(--sans); } html[data-era="1"] { --fg: #2b1d10; --fg-zacht: rgba(43, 29, 16, .66); --hud-fg: #eadcbc; --hud-font: var(--f1900); } html[data-era="2"] { --fg: #f2f2f2; --fg-zacht: rgba(242, 242, 242, .6); --hud-fg: #e6e6e6; --hud-font: var(--f1950); } html[data-era="3"] { --fg: #3d1c0c; --fg-zacht: rgba(61, 28, 12, .68); --hud-fg: #f3d9a8; --hud-font: var(--f1970); } html[data-era="4"] { --fg: #d8e8f7; --fg-zacht: rgba(216, 232, 247, .62); --hud-fg: #bfe9cf; --hud-font: var(--f2000); } html[data-era="5"] { --fg: #2c3e50; --fg-zacht: rgba(44, 62, 80, .66); --hud-fg: #ecf0f1; --hud-font: var(--f2015); } html[data-era="6"] { --fg: #e7eef7; --fg-zacht: rgba(231, 238, 247, .64); --hud-fg: #e7eef7; --hud-font: var(--sans); } /* ------------------------------------------------------------------ */ /* Vaste lagen: horizon, korrel, krassen, flits, balken */ /* ------------------------------------------------------------------ */ #horizon { position: fixed; inset: 0; width: 100vw; height: 100vh; height: calc(var(--vh) * 100); z-index: 0; display: none; } .js #horizon { display: block; } .korrel { position: fixed; inset: -60px; z-index: 70; pointer-events: none; opacity: var(--korrel, 0); mix-blend-mode: overlay; background-size: 220px 220px; transition: opacity 1.2s; animation: korrel .8s steps(8) infinite; } @keyframes korrel { 0%, 100% { transform: translate(0, 0); } 12% { transform: translate(-22px, 14px); } 25% { transform: translate(18px, -30px); } 37% { transform: translate(-40px, -8px); } 50% { transform: translate(30px, 26px); } 62% { transform: translate(-10px, 40px); } 75% { transform: translate(44px, -12px); } 87% { transform: translate(-30px, -36px); } } html.stil .korrel { animation: none; } /* Geen WebGL: dan draagt de pagina zelf de kleur van het tijdperk. */ html.geen-webgl body { background: #07090c; transition: background .8s; } html.geen-webgl[data-era="1"] body { background: #ecdfc4; } html.geen-webgl[data-era="2"] body { background: #1b1b1b; } html.geen-webgl[data-era="3"] body { background: #f3dcb5; } html.geen-webgl[data-era="4"] body { background: #0a1626; } html.geen-webgl[data-era="5"] body { background: #f4f6f8; } #film { position: fixed; inset: 0; width: 100vw; height: 100vh; height: calc(var(--vh) * 100); z-index: 71; pointer-events: none; } .flits { position: fixed; inset: 0; z-index: 72; pointer-events: none; background: radial-gradient(ellipse at 50% 60%, #fff6e2, #ffe3b0 55%, #d89a5a); opacity: 0; mix-blend-mode: screen; } .balk { position: fixed; left: 0; right: 0; height: var(--bar); background: #000; z-index: 50; pointer-events: none; display: none; } .js .balk { display: block; } .balk--boven { top: 0; height: calc(var(--bar) + env(safe-area-inset-top, 0px)); } .balk--onder { bottom: 0; height: calc(var(--bar) + env(safe-area-inset-bottom, 0px)); } /* ------------------------------------------------------------------ */ /* Aftelband */ /* ------------------------------------------------------------------ */ .aftel { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; background: #0b0906; color: #e9dcc0; } .js.laden .aftel { display: grid; } .aftel__schijf { grid-area: 1 / 1; width: min(62vmin, 460px); height: auto; overflow: visible; } .aftel__schijf line, .aftel__ring { fill: none; stroke: rgba(233, 220, 192, .5); stroke-width: .8; } .aftel__ring--binnen { stroke: rgba(233, 220, 192, .8); stroke-width: 1.2; } .aftel__veeg { fill: rgba(233, 220, 192, .16); } .aftel__cijfer { grid-area: 1 / 1; font-family: var(--f1900); font-weight: 500; font-size: min(34vmin, 250px); line-height: 1; font-variant-numeric: lining-nums; } /* ------------------------------------------------------------------ */ /* Hud */ /* ------------------------------------------------------------------ */ .overslaan { position: fixed; left: 50%; top: 10px; z-index: 120; transform: translate(-50%, -150%); padding: 10px 16px; border-radius: 999px; background: #17d17d; color: #06110b; font: 600 14px/1 var(--sans); text-decoration: none; transition: transform .3s var(--ease); } .overslaan:focus-visible { transform: translate(-50%, 0); } .hud { position: fixed; top: 0; left: 0; right: 0; height: calc(var(--bar) + env(safe-area-inset-top, 0px)); z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: env(safe-area-inset-top, 0px) var(--rand) 0; color: var(--hud-fg); font-family: var(--hud-font); transition: color .6s; } .hud::before { content: ""; position: absolute; inset: 0 0 -28px; background: linear-gradient(#050709 0%, rgba(5, 7, 9, .82) 55%, rgba(5, 7, 9, 0)); opacity: 0; transition: opacity .5s; pointer-events: none; z-index: -1; } html.na-verhaal .hud::before { opacity: 1; } html.na-verhaal .hud__jaar { opacity: 0; } .hud__merk { font: 800 clamp(15px, 1.25vw, 19px)/1 var(--sans); letter-spacing: .08em; text-decoration: none; color: inherit; } .punt { color: var(--groen); letter-spacing: 0; } .hud__jaar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--hud-font); font-size: clamp(15px, 1.3vw, 20px); letter-spacing: .08em; line-height: 1; font-variant-numeric: tabular-nums lining-nums; display: flex; align-items: center; } .odo { display: inline-flex; height: 1em; overflow: hidden; } .odo__cijfer { display: inline-block; width: .66em; height: 1em; overflow: hidden; text-align: center; } .odo__cijfer > span { display: block; will-change: transform; } .odo__cijfer > span > i { display: block; height: 1em; font-style: normal; } .hud__nu { position: absolute; left: 50%; transform: translateX(-50%); opacity: 0; letter-spacing: .2em; text-transform: uppercase; font: 600 .72em/1 var(--sans); } html.is-nu .odo { opacity: 0; } html.is-nu .hud__nu { opacity: 1; } .hud__rechts { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 22px); } .hud__geluid { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; letter-spacing: .04em; opacity: .82; transition: opacity .3s; } .hud__geluid:hover { opacity: 1; } .golf { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; } .golf i { display: block; width: 2px; height: 3px; background: currentColor; border-radius: 1px; transition: height .3s; } .hud__geluid[aria-pressed="true"] .golf i { animation: golf 1s ease-in-out infinite; } .hud__geluid[aria-pressed="true"] .golf i:nth-child(2) { animation-delay: -.3s; } .hud__geluid[aria-pressed="true"] .golf i:nth-child(3) { animation-delay: -.6s; } .hud__geluid[aria-pressed="true"] .golf i:nth-child(4) { animation-delay: -.15s; } @keyframes golf { 0%, 100% { height: 3px; } 50% { height: 12px; } } /* De knop draagt de mode van zijn tijd. */ .knop { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .82em 1.35em; border-radius: 999px; font: 600 14px/1 var(--sans); letter-spacing: .01em; text-decoration: none; white-space: nowrap; transition: background .5s, color .5s, border-color .5s, box-shadow .5s, border-radius .5s, filter .3s; } .knop:hover { filter: brightness(1.06); } .knop--groen { background: var(--groen); color: #04110a; box-shadow: 0 0 0 0 rgba(23, 209, 125, 0); } .knop--groen:hover { box-shadow: 0 10px 40px -6px rgba(23, 209, 125, .55); } .knop--rand { border: 1px solid rgba(231, 238, 247, .28); color: #e7eef7; } .knop--rand:hover { border-color: rgba(231, 238, 247, .6); } .knop--groot { font-size: 17px; padding: 1.05em 1.8em; } .hud__cta { background: var(--groen); color: #04110a; font-size: 13px; padding: .78em 1.15em; } html[data-era="1"] .hud__cta { background: transparent; color: #eadcbc; border: 1px solid rgba(234, 220, 188, .7); border-radius: 2px; font: italic 500 14px/1 var(--f1900); letter-spacing: .03em; box-shadow: inset 0 0 0 3px #000, inset 0 0 0 4px rgba(234, 220, 188, .45); } html[data-era="2"] .hud__cta { background: linear-gradient(180deg, #fafafa, #9a9a9a 52%, #d8d8d8); color: #111; border-radius: 3px; font: 400 14px/1 var(--f1950); letter-spacing: .12em; text-transform: uppercase; } html[data-era="3"] .hud__cta { background: #e8892b; color: #3d1c0c; border-radius: 14px; font: 800 14px/1 var(--f1970); font-variation-settings: "SOFT" 100, "WONK" 1; box-shadow: 0 3px 0 #7a3514; } html[data-era="4"] .hud__cta { background: #d4d0c8; color: #000; border-radius: 0; font: 400 17px/1 var(--f2000); padding: .5em .9em; box-shadow: inset -1px -1px #404040, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf; } html[data-era="5"] .hud__cta { background: #1abc9c; color: #fff; border-radius: 3px; font: 500 12px/1 var(--f2015); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 2px 4px rgba(0, 0, 0, .26); } /* Tijdlijn onderin */ .tijdlijn { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--bar) + env(safe-area-inset-bottom, 0px)); z-index: 60; display: none; align-items: center; justify-content: center; gap: clamp(6px, 2.4vw, 40px); padding: 0 var(--rand) env(safe-area-inset-bottom, 0px); color: var(--hud-fg); font-family: var(--hud-font); transition: color .6s, opacity .6s; } .js .tijdlijn { display: flex; } .tijdlijn.is-weg { opacity: 0; pointer-events: none; } .tijdlijn button { position: relative; font-size: clamp(11px, .95vw, 14px); letter-spacing: .08em; padding: 10px 4px; opacity: .42; transition: opacity .4s; font-variant-numeric: tabular-nums; } .tijdlijn button:hover { opacity: .85; } .tijdlijn button.is-aan { opacity: 1; } .tijdlijn button.is-aan::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; transform: translateX(-50%); } .tijdlijn__spoor { position: absolute; left: var(--rand); right: var(--rand); top: 0; height: 1px; background: rgba(255, 255, 255, .12); } .tijdlijn__vulling { height: 100%; width: 100%; background: var(--hud-fg); transform-origin: 0 50%; transform: scaleX(0); opacity: .7; } /* ------------------------------------------------------------------ */ /* Het verhaal */ /* ------------------------------------------------------------------ */ /* Zonder JavaScript: gewoon onder elkaar. */ .verhaal { position: relative; } .podium { position: relative; } .intro, .hoofdstuk, .finale { padding: 14vh var(--rand) 6vh; max-width: 760px; margin: 0 auto; } .intro__acties, .zin, .lucht, .rekwisieten, .zon { display: none; } .js .verhaal { height: calc(var(--vh) * 100); } .js .podium { position: absolute; inset: 0; overflow: hidden; } .js .beeld { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform; } .js .lucht { display: block; position: absolute; inset: 0; -webkit-mask-image: var(--masker); mask-image: var(--masker); } .js .tijdperk { position: absolute; inset: 0; visibility: hidden; } .jaartal { position: absolute; left: 0; right: 0; bottom: calc(100% - var(--horizon-y) - .12em); text-align: center; font-size: clamp(8.5rem, 27vw, 31rem); line-height: .8; white-space: nowrap; pointer-events: none; will-change: transform; } .tijdperk[data-era="1"] .jaartal { font-family: var(--f1900); font-style: italic; font-weight: 500; color: rgba(60, 38, 16, .13); } .tijdperk[data-era="2"] .jaartal { font-family: var(--f1950); color: rgba(255, 255, 255, .09); letter-spacing: -.02em; } .tijdperk[data-era="3"] .jaartal { font-family: var(--f1970); font-weight: 900; font-variation-settings: "SOFT" 100, "WONK" 1; color: rgba(194, 86, 28, .16); letter-spacing: -.04em; } .tijdperk[data-era="4"] .jaartal { font-family: var(--f2000); color: rgba(108, 240, 168, .1); letter-spacing: -.02em; font-size: clamp(10rem, 32vw, 36rem); } .tijdperk[data-era="5"] .jaartal { font-family: var(--f2015); font-weight: 100; color: rgba(44, 62, 80, .09); letter-spacing: -.04em; } .toestel { position: absolute; right: 5vw; width: min(35vw, 560px); bottom: var(--voet, 30vh); will-change: transform; } .toestel[data-toestel="2000"] { width: min(40vw, 640px); right: 3vw; } .toestel[data-toestel="2015"] { width: min(37vw, 580px); } .toestel svg { width: 100%; height: auto; overflow: visible; } .js .rekwisieten { display: block; position: absolute; inset: 0; pointer-events: none; } .rekwisiet-laag { position: absolute; inset: 0; visibility: hidden; } .rekwisiet { position: absolute; will-change: transform; } .rekwisiet svg { width: 100%; height: auto; overflow: visible; } .rekwisiet--app { font-size: clamp(9px, .78vw, 12px); } .app { position: relative; } .app svg { filter: drop-shadow(0 6px 10px rgba(44, 62, 80, .22)); } .app__badge { position: absolute; top: -.5em; right: -.5em; min-width: 1.7em; height: 1.7em; padding: 0 .45em; border-radius: 999px; background: #e74c3c; color: #fff; font: 500 1em/1.7em var(--f2015); text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); } .app__naam { display: block; margin-top: .5em; text-align: center; font: 400 1em/1.2 var(--f2015); color: #2c3e50; white-space: nowrap; } /* De ondertitel */ .js .zin { display: block; position: absolute; left: 0; right: 0; bottom: calc(100% - var(--horizon-y) + 2.6vh); padding: 0 var(--rand); text-align: center; font: 400 clamp(1.05rem, 1.55vw, 1.6rem)/1.32 var(--serif); letter-spacing: .004em; color: var(--fg); transition: color .8s; pointer-events: none; } .zin__deel { opacity: 0; transition: opacity .9s var(--ease), filter .9s var(--ease); filter: blur(6px); } .zin__deel.is-was { opacity: .4; filter: blur(0); } .zin__deel.is-aan { opacity: 1; filter: blur(0); } .zin.is-vol .zin__deel { opacity: 1; filter: blur(0); } .zin.is-weg .zin__deel { opacity: 0; filter: blur(8px); } /* Intro */ .js .intro { position: absolute; inset: 0; max-width: none; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--bar) var(--rand) calc(100vh - var(--horizon-y) + 5vh); color: #f1ead9; } .intro__boven { font: 500 12px/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; opacity: .7; margin-bottom: 3.2vh; } .intro__titel { font: 300 clamp(2.7rem, 6.6vw, 7rem)/.96 var(--serif); letter-spacing: -.02em; max-width: 13ch; } .intro__titel em { font-style: italic; font-weight: 300; color: #f6d9a8; } .intro__onder { margin-top: 3.2vh; font: 400 clamp(1rem, 1.25vw, 1.2rem)/1.5 var(--serif); opacity: .72; max-width: 36ch; } .js .intro__acties { display: flex; align-items: center; gap: 18px; margin-top: 4.4vh; } .intro__speel { display: inline-flex; align-items: center; gap: 12px; padding: 13px 22px 13px 14px; border-radius: 999px; border: 1px solid rgba(241, 234, 217, .35); font: 500 14px/1 var(--sans); letter-spacing: .02em; transition: border-color .3s, background .3s; } .intro__speel:hover { border-color: rgba(241, 234, 217, .8); background: rgba(241, 234, 217, .06); } .intro__speel-icoon { position: relative; width: 30px; height: 30px; border-radius: 50%; background: #f1ead9; } .intro__speel-icoon::after { content: ""; position: absolute; left: 12px; top: 9px; border-left: 10px solid #0b0906; border-top: 6px solid transparent; border-bottom: 6px solid transparent; } .intro__of { font: 400 13px/1 var(--sans); opacity: .5; letter-spacing: .04em; } /* De hoofdstukken */ .hoofdstuk__label { display: flex; align-items: baseline; gap: .9em; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 2.6vh; } .hoofdstuk__nr { font-weight: 700; } .hoofdstuk h2 { margin-bottom: 2.4vh; } .hoofdstuk__tekst { font-size: clamp(15px, 1.08vw, 17px); line-height: 1.62; max-width: 44ch; } .feit { margin-top: 2.6vh; padding-top: 1.4vh; font-size: 12.5px; line-height: 1.5; letter-spacing: .02em; max-width: 46ch; border-top: 1px solid currentColor; border-top-color: color-mix(in srgb, currentColor 30%, transparent); } .js .hoofdstuk { position: absolute; left: var(--rand); top: calc(var(--bar) + 6.5vh); width: min(34vw, 540px); max-width: none; padding: 0; visibility: hidden; } .hoofdstuk[data-era="1"] { color: #2b1d10; } .hoofdstuk[data-era="1"] .hoofdstuk__label { font-family: var(--f1900); font-style: italic; letter-spacing: .12em; color: #6b4a24; } .hoofdstuk[data-era="1"] h2 { font: italic 500 clamp(2rem, 3.5vw, 3.5rem)/1.02 var(--f1900); letter-spacing: -.01em; } .hoofdstuk[data-era="1"] .hoofdstuk__tekst { font-family: var(--f1900); font-size: clamp(15.5px, 1.12vw, 18px); color: #3b2918; } .hoofdstuk[data-era="1"] .feit { font-family: var(--f1900); font-style: italic; color: #6b4a24; } .hoofdstuk[data-era="2"] { color: #f2f2f2; } .hoofdstuk[data-era="2"] .hoofdstuk__label { font-family: var(--f1950); letter-spacing: .3em; color: #bdbdbd; } .hoofdstuk[data-era="2"] h2 { font: 400 clamp(1.9rem, 3.2vw, 3.2rem)/1.06 var(--f1950); letter-spacing: .01em; } .hoofdstuk[data-era="2"] .hoofdstuk__tekst { font-family: var(--sans); font-weight: 300; color: #cfcfcf; } .hoofdstuk[data-era="2"] .feit { font-family: var(--f1950); letter-spacing: .12em; color: #a9a9a9; } .hoofdstuk[data-era="3"] { color: #3d1c0c; } .hoofdstuk[data-era="3"] .hoofdstuk__label { font-family: var(--f1970); font-weight: 700; letter-spacing: .14em; color: #c2561c; } .hoofdstuk[data-era="3"] h2 { font: 900 clamp(2.2rem, 4.1vw, 4.1rem)/.94 var(--f1970); font-variation-settings: "SOFT" 100, "WONK" 1; letter-spacing: -.03em; color: #5a2410; } .hoofdstuk[data-era="3"] .hoofdstuk__tekst { font-family: var(--f1970); font-weight: 400; font-variation-settings: "SOFT" 50; color: #4a2512; } .hoofdstuk[data-era="3"] .feit { font-family: var(--f1970); font-weight: 600; color: #8a4b20; } .hoofdstuk[data-era="4"] { color: #d8e8f7; } .hoofdstuk[data-era="4"] .hoofdstuk__label { font-family: var(--f2000); font-size: 17px; letter-spacing: .08em; color: #6cf0a8; } .hoofdstuk[data-era="4"] h2 { font: 400 clamp(2.3rem, 3.9vw, 3.9rem)/.92 var(--f2000); letter-spacing: .005em; text-shadow: 1.5px 0 rgba(255, 60, 60, .45), -1.5px 0 rgba(60, 170, 255, .45), 0 0 18px rgba(120, 200, 255, .35); } .hoofdstuk[data-era="4"] .hoofdstuk__tekst { font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-size: 14.5px; color: #b9cde0; } .hoofdstuk[data-era="4"] .feit { font-family: var(--f2000); font-size: 18px; letter-spacing: .04em; color: #6cf0a8; } .hoofdstuk[data-era="5"] { color: #2c3e50; } .hoofdstuk[data-era="5"] .hoofdstuk__label { font-family: var(--f2015); font-weight: 500; letter-spacing: .16em; color: #16a085; } .hoofdstuk[data-era="5"] h2 { font: 300 clamp(2rem, 3.4vw, 3.4rem)/1.08 var(--f2015); letter-spacing: -.015em; } .hoofdstuk[data-era="5"] .hoofdstuk__tekst { font-family: var(--f2015); font-weight: 400; color: #4d5d6c; } .hoofdstuk[data-era="5"] .feit { font-family: var(--f2015); color: #7f8c8d; } /* De finale */ .js .finale { position: absolute; inset: 0; max-width: none; padding: 0 var(--rand); display: grid; place-items: center; pointer-events: none; text-align: center; } .finale > * { grid-area: 1 / 1; } .finale__totnu { font: italic 300 clamp(3rem, 8.4vw, 8.6rem)/1 var(--serif); letter-spacing: -.02em; color: #eef3f8; margin-bottom: calc(100vh - var(--horizon-y)); } .js .finale__totnu { visibility: hidden; } .finale__merk { display: flex; flex-direction: column; align-items: center; margin-bottom: calc((100vh - var(--horizon-y)) * .7); } .js .finale__merk { visibility: hidden; } .finale__woordmerk { font: 800 clamp(4.2rem, 15vw, 15rem)/.84 var(--sans); letter-spacing: .08em; margin-right: -.08em; color: #eef3f8; } /* De punt van het woordmerk is de zon die net opkwam: hier staat alleen zijn plek. */ .punt-vorm { display: inline-block; width: .13em; height: .13em; border-radius: 50%; margin-left: .05em; vertical-align: baseline; } .js .punt-vorm { background: transparent; } .punt-vorm { background: var(--groen); } .finale__onder { margin-top: 3.4vh; font: 400 clamp(1.15rem, 1.9vw, 1.9rem)/1.25 var(--serif); letter-spacing: -.005em; color: #eef3f8; } .finale__uitleg { margin-top: 1.6vh; font-size: clamp(14px, 1.05vw, 16.5px); line-height: 1.6; color: #a3b2c6; max-width: 50ch; } .finale__acties { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 3.4vh; pointer-events: auto; } .js .zon { display: block; position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 3px rgba(255, 255, 255, .8), 0 0 60px 18px rgba(23, 209, 125, .35); opacity: 0; pointer-events: none; will-change: transform, opacity; } /* ------------------------------------------------------------------ */ /* Woorden die opkomen */ /* ------------------------------------------------------------------ */ .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .1em .04em .16em; margin: -.1em -.04em -.16em; } .w__in { display: inline-block; will-change: transform; } /* ------------------------------------------------------------------ */ /* Na het verhaal: KASCH */ /* ------------------------------------------------------------------ */ main > section:not(.verhaal) { position: relative; z-index: 2; } .sectiekop { text-align: center; max-width: 980px; margin: 0 auto; padding: 0 var(--rand); } .boventitel { font: 600 12px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--groen); margin-bottom: 26px; } .sectiekop h2, .proef h2 { font: 300 clamp(2.4rem, 5.2vw, 5rem)/1.02 var(--serif); letter-spacing: -.02em; color: #eef3f8; } .sectiekop h2 em, .proef h2 em { font-style: italic; color: #bfead3; } /* Beloftes */ .beloftes { padding: 22vh 0 16vh; } .beloftes__lijst { max-width: 1240px; margin: 12vh auto 0; padding: 0 var(--rand); } .belofte { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4vw; align-items: start; padding: 6.2vh 0; border-top: 1px solid rgba(231, 238, 247, .1); position: relative; } .belofte:last-child { border-bottom: 1px solid rgba(231, 238, 247, .1); } .belofte::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: linear-gradient(90deg, transparent, var(--groen), transparent); transform: scaleX(var(--veeg, 0)); transform-origin: 0 50%; opacity: .9; } .belofte__toen { display: flex; flex-direction: column; gap: 10px; } .belofte__jaar { font-size: 13px; letter-spacing: .18em; opacity: .7; } .belofte__oud { font-size: clamp(1.6rem, 2.6vw, 2.6rem); line-height: 1.08; } .belofte__nu h3 { font: 600 clamp(1.25rem, 1.7vw, 1.6rem)/1.25 var(--sans); letter-spacing: -.01em; color: #eef3f8; margin-bottom: 12px; } .belofte__nu h3::before { content: ""; display: inline-block; width: .42em; height: .42em; border-radius: 50%; background: var(--groen); margin-right: .55em; vertical-align: .12em; box-shadow: 0 0 14px rgba(23, 209, 125, .8); } .belofte__nu p { color: #a3b2c6; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.65; max-width: 58ch; } .belofte[data-era="1"] .belofte__toen { font-family: var(--f1900); font-style: italic; color: #dcc8a0; } .belofte[data-era="2"] .belofte__toen { font-family: var(--f1950); color: #d6d6d6; } .belofte[data-era="2"] .belofte__jaar { letter-spacing: .3em; } .belofte[data-era="3"] .belofte__toen { font-family: var(--f1970); font-weight: 800; font-variation-settings: "SOFT" 100, "WONK" 1; color: #f0913a; } .belofte[data-era="4"] .belofte__toen { font-family: var(--f2000); color: #6cf0a8; text-shadow: 0 0 14px rgba(108, 240, 168, .45); } .belofte[data-era="4"] .belofte__oud { font-size: clamp(2rem, 3.2vw, 3.2rem); line-height: .95; } .belofte[data-era="4"] .belofte__jaar { font-size: 18px; } .belofte[data-era="5"] .belofte__toen { font-family: var(--f2015); font-weight: 300; color: #48d1b5; } /* Stroom */ .stroom { padding: 14vh 0 10vh; } .stroom__podium { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 4vw; max-width: 1320px; margin: 8vh auto 0; padding: 0 var(--rand); } .stroom__toestellen { position: sticky; top: calc(50vh - 260px); height: 540px; align-self: start; } .stroom__stappen { padding: 18vh 0 30vh; } .stap { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; opacity: .28; transition: opacity .6s; } .stap.is-aan { opacity: 1; } .stap__nr { font: 600 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--groen); margin-bottom: 18px; } .stap h3 { font: 300 clamp(1.8rem, 2.8vw, 2.8rem)/1.08 var(--serif); letter-spacing: -.015em; color: #eef3f8; margin-bottom: 16px; } .stap p { color: #a3b2c6; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.65; max-width: 40ch; } /* De tablet */ .tablet { position: absolute; left: 0; top: 30px; width: min(100%, 640px); aspect-ratio: 4 / 3; border-radius: 28px; background: linear-gradient(145deg, #1b222c, #0c1016); padding: 14px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .07) inset, 0 40px 90px -30px rgba(0, 0, 0, .9), 0 0 120px -40px rgba(23, 209, 125, .25); } .tablet__scherm { width: 100%; height: 100%; border-radius: 16px; overflow: hidden; background: #0b0f14; position: relative; } .ui { position: absolute; inset: 0; display: flex; flex-direction: column; font: 500 11px/1.3 var(--sans); color: #e7eef7; } .ui__kop { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid #1b232e; background: #0e141b; } .ui__merk { font-weight: 800; letter-spacing: .08em; font-size: 11px; margin-right: 10px; } .ui__merk b { color: var(--groen); } .ui__tab { padding: 5px 10px; border-radius: 7px; color: #a3b2c6; } .ui__tab--aan { background: #1b232e; color: #e7eef7; } .ui__klok { margin-left: auto; color: #a3b2c6; font-variant-numeric: tabular-nums; } .ui__bord { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px; position: relative; } .ui__kolom { background: #10161e; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; } .ui__kolomkop { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #a3b2c6; display: flex; justify-content: space-between; } .ui__teller { color: var(--groen); font-weight: 700; } .kaartje { background: #161e28; border: 1px solid #26313f; border-radius: 10px; padding: 9px 10px; display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; color: #cfd9e5; transition: transform .8s var(--ease), opacity .6s, border-color .6s, box-shadow .6s; } .kaartje__kop { display: flex; justify-content: space-between; font-weight: 700; color: #e7eef7; margin-bottom: 3px; } .kaartje__bron { font-weight: 600; color: #6ee7b7; background: rgba(23, 209, 125, .12); padding: 2px 6px; border-radius: 5px; font-size: 9.5px; } .kaartje__bron--tafel { color: #93c5fd; background: rgba(147, 197, 253, .12); } .kaartje__voet { display: flex; justify-content: space-between; margin-top: 4px; color: #a3b2c6; } .kaartje__voet b { color: #e7eef7; } .kaartje__knop { margin-top: 7px; text-align: center; background: var(--groen); color: #04110a; font-weight: 700; border-radius: 7px; padding: 6px; } .kaartje--nieuw { opacity: 0; transform: translateY(-14px) scale(.96); } /* Bon */ .bon { position: absolute; right: 2%; bottom: 0; width: 190px; height: 250px; overflow: hidden; pointer-events: none; } .bon__papier { position: absolute; left: 0; right: 0; top: 0; padding: 16px 16px 26px; background: #f6f4ef; color: #111; font: 500 12px/1.5 "Courier New", ui-monospace, monospace; transform: translateY(-105%); transition: transform 1.4s steps(14); -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 8px repeat-x; mask: linear-gradient(#000, #000) top / 100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 8px repeat-x; box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .6); } .bon__kop { font-weight: 700; font-size: 14px; border-bottom: 1px dashed #999; padding-bottom: 6px; margin-bottom: 6px; } .bon__tijd { margin-bottom: 8px; } .bon__regel { font-size: 13px; } .bon__regel [data-taal="tr"] { display: none; } .bon__taal { margin-top: 10px; font-size: 10px; letter-spacing: .1em; color: #666; } .bon.is-vertaald [data-taal="nl"] { display: none; } .bon.is-vertaald [data-taal="tr"] { display: inline; } /* Telefoon */ .telefoon { position: absolute; left: -3%; bottom: -130px; width: 170px; aspect-ratio: 9 / 19; border-radius: 30px; background: #07090c; padding: 8px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1) inset, 0 30px 70px -20px rgba(0, 0, 0, .9); transform: translateY(40px) rotate(-4deg); transition: transform 1s var(--ease); } .telefoon__scherm { position: relative; width: 100%; height: 100%; border-radius: 23px; overflow: hidden; background: #f4f5f7; } .telefoon__app { position: absolute; inset: 0; padding: 30px 12px 12px; display: flex; flex-direction: column; gap: 8px; font: 500 11px/1.35 var(--sans); color: #16212e; opacity: 0; transition: opacity .6s; } .telefoon__app.is-aan { opacity: 1; } .t-kop { font-weight: 700; font-size: 13px; margin-bottom: 4px; } .t-product, .t-totaal { display: flex; justify-content: space-between; background: #fff; padding: 9px 10px; border-radius: 10px; } .t-totaal { background: transparent; font-weight: 700; } .t-knop { margin-top: auto; background: #d23a2a; color: #fff; text-align: center; font-weight: 700; padding: 10px; border-radius: 10px; } .t-bericht { background: #fff; padding: 10px; border-radius: 12px 12px 12px 4px; box-shadow: 0 2px 10px rgba(0, 0, 0, .06); } .t-kaart { width: 100%; height: auto; background: #e9eef3; border-radius: 10px; } .t-weg { fill: none; stroke: #c9d3dd; stroke-width: 7; stroke-linecap: round; } .t-route { fill: none; stroke: #0fae66; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 320; stroke-dashoffset: 320; transition: stroke-dashoffset 1.6s var(--ease); } .t-kaart circle { fill: #16212e; } .telefoon__app[data-telefoon="route"] .t-knop { background: #0fae66; } /* Standen van de stroom */ .stroom__podium[data-stap="1"] .kaartje--nieuw, .stroom__podium[data-stap="2"] .kaartje--nieuw, .stroom__podium[data-stap="3"] .kaartje--nieuw, .stroom__podium[data-stap="4"] .kaartje--nieuw { opacity: 1; transform: none; } .stroom__podium[data-stap="1"] .kaartje--nieuw { border-color: var(--groen); box-shadow: 0 0 0 4px rgba(23, 209, 125, .15), 0 0 30px rgba(23, 209, 125, .35); animation: piep 1.2s ease-in-out infinite; } @keyframes piep { 50% { box-shadow: 0 0 0 8px rgba(23, 209, 125, .05), 0 0 40px rgba(23, 209, 125, .5); } } .stroom__podium[data-stap="2"] .kaartje--nieuw { transform: translateX(calc(100% + 30px)); } .stroom__podium[data-stap="2"] .kaartje--nieuw .kaartje__knop, .stroom__podium[data-stap="3"] .kaartje--nieuw .kaartje__knop, .stroom__podium[data-stap="4"] .kaartje--nieuw .kaartje__knop { opacity: 0; } .stroom__podium[data-stap="3"] .kaartje--nieuw, .stroom__podium[data-stap="4"] .kaartje--nieuw { transform: translateX(calc(200% + 60px)); } .stroom__podium[data-stap="2"] [data-kaartje="keuken"] { transform: translateY(calc(100% + 8px)); } .stroom__podium[data-stap="3"] [data-kaartje="onderweg"], .stroom__podium[data-stap="4"] [data-kaartje="onderweg"] { transform: translateY(calc(100% + 8px)); } .stroom__podium[data-stap="2"] .bon__papier, .stroom__podium[data-stap="3"] .bon__papier, .stroom__podium[data-stap="4"] .bon__papier { transform: translateY(0); } .stroom__podium[data-stap="1"] .telefoon, .stroom__podium[data-stap="3"] .telefoon { transform: none; } .stroom__podium[data-stap="3"] .t-route { stroke-dashoffset: 0; } .stroom__podium[data-stap="4"] .kaartje { opacity: .35; } .stroom__podium[data-stap="4"] .ui__bord::after { content: "Dagafsluiting klaar · kas klopt"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #0e141b; border: 1px solid var(--groen); color: #e7eef7; padding: 14px 18px; border-radius: 12px; font-weight: 600; font-size: 12px; white-space: nowrap; box-shadow: 0 0 40px rgba(23, 209, 125, .3); } /* Alles in één */ .alles { padding: 16vh 0 12vh; } .bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(230px, auto); grid-auto-flow: dense; gap: 16px; max-width: 1320px; margin: 10vh auto 0; padding: 0 var(--rand); } .tegel { position: relative; border-radius: 24px; padding: 28px; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(23, 209, 125, .12), transparent 60%), linear-gradient(160deg, rgba(22, 30, 40, .82), rgba(11, 15, 20, .88)); border: 1px solid rgba(231, 238, 247, .07); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; backdrop-filter: blur(6px); transition: border-color .4s; } .tegel:hover { border-color: rgba(23, 209, 125, .35); } .tegel--groot { grid-column: span 2; grid-row: span 2; } .tegel--hoog { grid-row: span 2; } .tegel--breed { grid-column: span 2; } .tegel h3 { font: 600 19px/1.25 var(--sans); letter-spacing: -.01em; color: #eef3f8; margin-bottom: 8px; hyphens: auto; -webkit-hyphens: auto; } @media (max-width: 1180px) and (min-width: 821px) { .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .tegel p { font-size: 14.5px; line-height: 1.6; color: #a3b2c6; max-width: 46ch; } .tegel__icoon { width: 40px; height: 40px; margin-bottom: auto; color: var(--groen); } .tegel__icoon svg { width: 100%; height: 100%; } .tegel__beeld { flex: 1; display: grid; place-items: center; margin-bottom: 22px; min-height: 120px; } .tafels { display: grid; grid-template-columns: repeat(3, 76px); gap: 12px; } .tafel { height: 64px; border-radius: 14px; display: grid; place-items: center; background: #121a23; border: 1px solid #26313f; color: #a3b2c6; font-weight: 700; font-size: 15px; transition: background .5s, border-color .5s, color .5s; } .tafel--bezet { background: rgba(23, 209, 125, .12); border-color: rgba(23, 209, 125, .5); color: #bdf5d8; } .tafel--rekening { background: rgba(255, 176, 32, .12); border-color: rgba(255, 176, 32, .5); color: #ffd98c; } .mini-shop { width: 100%; max-width: 230px; display: flex; flex-direction: column; gap: 10px; } .mini-shop__balk { height: 50px; border-radius: 12px; background: linear-gradient(120deg, #d23a2a, #f08a4b); } .mini-shop__product { height: 38px; border-radius: 10px; background: #121a23; border: 1px solid #26313f; position: relative; } .mini-shop__product::after { content: ""; position: absolute; right: 10px; top: 10px; width: 18px; height: 18px; border-radius: 50%; background: var(--groen); } .mini-shop__talen { font: 600 10px/1.6 var(--sans); letter-spacing: .12em; color: #a3b2c6; text-align: center; margin-top: 6px; } .mini-shop__talen b { color: var(--groen); } .scan { position: relative; width: 250px; height: 150px; } .scan__foto { position: absolute; left: 0; top: 0; width: 110px; height: 150px; border-radius: 8px; background: repeating-linear-gradient(180deg, transparent 0 16px, rgba(60, 40, 20, .28) 16px 18px), linear-gradient(160deg, #efe6d2, #d8c9a8); transform: rotate(-5deg); box-shadow: 0 16px 30px -10px rgba(0, 0, 0, .7); } .scan__lijn { position: absolute; left: -4px; width: 118px; height: 2px; top: 0; background: var(--groen); box-shadow: 0 0 16px var(--groen); animation: scan 2.6s ease-in-out infinite; } @keyframes scan { 0%, 100% { top: 6px; } 50% { top: 144px; } } .scan__regels { position: absolute; right: 0; top: 18px; width: 118px; display: flex; flex-direction: column; gap: 10px; } .scan__regels i { height: 18px; border-radius: 6px; background: #121a23; border: 1px solid #26313f; position: relative; overflow: hidden; } .scan__regels i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(23, 209, 125, .35), transparent); transform: translateX(-100%); animation: regel 2.6s ease-in-out infinite; } .scan__regels i:nth-child(2)::after { animation-delay: .25s; } .scan__regels i:nth-child(3)::after { animation-delay: .5s; } .scan__regels i:nth-child(4)::after { animation-delay: .75s; } @keyframes regel { 60%, 100% { transform: translateX(100%); } } /* Rekenhulp */ .rekenhulp { padding: 16vh 0; } .rekenhulp__paneel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; max-width: 1120px; margin: 9vh auto 0; border-radius: 28px; overflow: hidden; border: 1px solid rgba(231, 238, 247, .08); background: rgba(11, 15, 20, .72); backdrop-filter: blur(10px); margin-left: max(var(--rand), calc(50% - 560px)); margin-right: max(var(--rand), calc(50% - 560px)); } .rekenhulp__invoer { padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; gap: 38px; border-right: 1px solid rgba(231, 238, 247, .08); } .schuif { display: flex; flex-direction: column; gap: 16px; } .schuif__kop { display: flex; justify-content: space-between; gap: 16px; font-size: 14.5px; color: #cfd9e5; } .schuif output { font: 600 15px/1 var(--sans); color: #eef3f8; font-variant-numeric: tabular-nums; } .schuif input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--groen) var(--vol, 30%), #26313f var(--vol, 30%)); outline-offset: 8px; } .schuif input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #eef3f8; border: 0; box-shadow: 0 0 0 6px rgba(23, 209, 125, .18), 0 4px 14px rgba(0, 0, 0, .5); cursor: grab; } .schuif input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #eef3f8; border: 0; box-shadow: 0 0 0 6px rgba(23, 209, 125, .18), 0 4px 14px rgba(0, 0, 0, .5); } .rekenhulp__uitkomst { padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; background: radial-gradient(600px circle at 100% 0%, rgba(23, 209, 125, .16), transparent 60%); } .rekenhulp__label { font: 600 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #a3b2c6; } .rekenhulp__bedrag { font: 300 clamp(3.2rem, 6.4vw, 6rem)/1 var(--serif); letter-spacing: -.03em; color: #eef3f8; margin: 18px 0 22px; font-variant-numeric: tabular-nums lining-nums; } .rekenhulp__terug { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; color: #cfd9e5; max-width: 36ch; } .rekenhulp__terug b { color: var(--groen); font-weight: 700; } .rekenhulp__klein { margin-top: 26px; font-size: 12.5px; line-height: 1.55; color: #7d8ea3; max-width: 52ch; } /* Het slot: de oproep, met onder de knoppen een nieuwe zonsopgang (main.js laat hem opkomen). */ .proef { min-height: calc(100vh - 64px); padding: 18vh var(--rand) 36vh; text-align: center; display: flex; flex-direction: column; align-items: center; } .proef h2, .proef__tekst { text-shadow: 0 0 36px rgba(5, 7, 9, .85); } .proef__tekst { margin: 26px 0 40px; font: 400 clamp(1.05rem, 1.4vw, 1.35rem)/1.5 var(--serif); color: #cfd9e5; max-width: 40ch; } .proef__acties { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } .proef__mail { margin-top: 26px; font-size: 13.5px; color: #8595aa; } .proef__mail span { color: #d6e0ea; user-select: all; } .pijl { display: inline-block; transition: transform .35s var(--ease); } .knop:hover .pijl { transform: translateX(4px); } .voet { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; max-width: 1320px; margin: 0 auto; padding: 20px var(--rand) calc(22px + env(safe-area-inset-bottom, 0px)); font-size: 13px; color: #8595aa; } .voet a { color: #d6e0ea; text-decoration: none; border-bottom: 1px solid rgba(214, 224, 234, .3); } .voet a:hover { border-bottom-color: var(--groen); } .voet__merk { font-weight: 800; letter-spacing: .08em; color: #e7eef7; } .finale__boven { font: 500 12px/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: #a3b2c6; margin-bottom: 2.4vh; } /* ------------------------------------------------------------------ */ /* De kassa van nu: het product, opkomend boven de horizon */ /* ------------------------------------------------------------------ */ .product { padding: 24vh 0 12vh; } .pk { position: relative; max-width: 1180px; margin: 8vh auto 0; padding: 0 var(--rand); } .pk__gloed { position: absolute; left: 50%; bottom: -8%; width: 92%; height: 46%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(23, 209, 125, .34), rgba(23, 209, 125, 0)); filter: blur(24px); pointer-events: none; } .pk__toestel { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 2.4%; transform-origin: 50% 100%; will-change: transform; } .pk-tablet { position: relative; width: 78%; aspect-ratio: 16 / 10.4; border-radius: clamp(16px, 2.4vw, 34px); padding: clamp(8px, 1.2vw, 16px); background: linear-gradient(145deg, #1d2530, #0b0f15); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 60px 120px -40px rgba(0, 0, 0, .95), 0 0 160px -40px rgba(23, 209, 125, .35); } .pk-scherm { width: 100%; height: 100%; border-radius: clamp(9px, 1.2vw, 18px); overflow: hidden; background: #0b0f14; display: flex; flex-direction: column; color: #e7eef7; container-type: inline-size; } .pk-scherm > * { font: 500 clamp(6px, 1.32cqw, 13px)/1.3 var(--sans); } .pk-kop { display: flex; align-items: center; gap: .8em; padding: 1em 1.3em; background: #0e141b; border-bottom: 1px solid #1b232e; } .pk-merk { font-weight: 800; letter-spacing: .08em; margin-right: .8em; } .pk-merk b { color: var(--groen); } .pk-tab { padding: .45em .9em; border-radius: .6em; color: #a3b2c6; } .pk-tab--aan { background: #1b232e; color: #e7eef7; } .pk-status { position: relative; margin-left: auto; display: inline-flex; align-items: center; gap: .5em; padding: .4em .8em; border-radius: 999px; background: rgba(23, 209, 125, .1); color: #bdf5d8; } .pk-status i { width: .6em; height: .6em; border-radius: 50%; background: var(--groen); box-shadow: 0 0 .8em var(--groen); } .pk-klok { color: #a3b2c6; font-variant-numeric: tabular-nums; } .pk-lijf { flex: 1; min-height: 0; display: grid; grid-template-columns: 15% minmax(0, 1fr) 30%; } .pk-groepen { display: flex; flex-direction: column; gap: .3em; padding: 1em .8em; border-right: 1px solid #1b232e; } .pk-groepen li { padding: .7em .8em; border-radius: .6em; color: #a3b2c6; } .pk-groepen li.is-aan { background: rgba(23, 209, 125, .12); color: #e7eef7; box-shadow: inset .25em 0 0 var(--groen); } .pk-midden { display: flex; flex-direction: column; gap: 1em; padding: 1em; min-width: 0; } .pk-kanalen { position: relative; align-self: flex-start; display: flex; flex-wrap: wrap; gap: .5em; } .pk-kanalen > span:not(.pk-punt) { padding: .45em .8em; border-radius: 999px; background: #131a23; border: 1px solid #26313f; color: #cfd9e5; } .pk-kanalen b { color: var(--groen); margin-left: .25em; display: inline-block; } .pk-kanalen b.is-nieuw { animation: nieuw 1s var(--ease); } @keyframes nieuw { 30% { transform: scale(1.5); text-shadow: 0 0 .8em var(--groen); } } .pk-producten { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: .7em; } .pk-producten span { display: flex; flex-direction: column; justify-content: space-between; gap: .4em; padding: .8em; border-radius: .8em; background: #131a23; border: 1px solid #222c38; color: #a3b2c6; } .pk-producten b { color: #e7eef7; font-weight: 600; } .pk-bon { display: flex; flex-direction: column; gap: .8em; padding: 1em; background: #0e141b; border-left: 1px solid #1b232e; } .pk-bon__kop { display: flex; justify-content: space-between; align-items: baseline; } .pk-bon__kop span { color: #93c5fd; background: rgba(147, 197, 253, .12); padding: .2em .6em; border-radius: .5em; } .pk-bon__regels { display: flex; flex-direction: column; gap: .55em; color: #cfd9e5; } .pk-bon__regels li { display: flex; justify-content: space-between; gap: .6em; } .pk-bon__totaal { margin-top: auto; display: flex; justify-content: space-between; padding-top: .8em; border-top: 1px dashed #26313f; } .pk-bon__totaal b { font-size: 1.2em; } .pk-bon__knoppen { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; } .pk-knop { position: relative; text-align: center; padding: .9em .4em; border-radius: .7em; background: var(--groen); color: #04110a; font-weight: 700; } .pk-knop--rand { background: transparent; color: #bdf5d8; border: 1px solid rgba(23, 209, 125, .6); } .pk-telefoon { position: relative; width: 17%; aspect-ratio: 9 / 19; margin-bottom: 1.5%; border-radius: clamp(14px, 2vw, 30px); padding: clamp(4px, .6vw, 8px); background: #07090c; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1) inset, 0 40px 80px -30px rgba(0, 0, 0, .9); /* De maat van het scherm bepaalt de letter: cqw hieronder is een procent van de telefoon. */ container-type: inline-size; } .pk-telefoon__scherm { width: 100%; height: 100%; border-radius: clamp(10px, 1.6vw, 24px); overflow: hidden; background: #f4f6f9; color: #16212e; display: flex; flex-direction: column; gap: 4cqw; padding: 16cqw 8cqw 8cqw; } .pk-telefoon__scherm > * { font: 500 7cqw/1.3 var(--sans); } .pk-rooster__kop { font-weight: 700 !important; font-size: 9.5cqw !important; } .pk-rooster__week { color: #5c6b7d; margin-top: -3cqw; } .pk-rooster__dagen { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1.5cqw; text-align: center; color: #5c6b7d; font-size: 6cqw !important; } .pk-rooster__dagen li { padding: 1.5cqw 0; } .pk-rooster__dagen li.is-aan { background: #16212e; color: #fff; border-radius: 3cqw; } .pk-dienst { display: flex; flex-direction: column; gap: 1.5cqw; background: #fff; border-radius: 5cqw; padding: 5cqw; box-shadow: 0 1px 4px rgba(0, 0, 0, .06); border-left: 3cqw solid #0fae66; } .pk-dienst span { color: #5c6b7d; font-size: 6.5cqw; } .pk-dienst--vrij { border-left-color: #c3ccd6; } /* De genummerde punten en hun uitleg */ .pk-punt { position: absolute; top: -13px; right: -13px; z-index: 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--groen); color: #04110a; font: 700 12px/1 var(--sans) !important; box-shadow: 0 0 0 5px rgba(23, 209, 125, .22), 0 0 18px rgba(23, 209, 125, .8); transition: box-shadow .35s, filter .35s; animation: puls 2.6s ease-in-out infinite; } .pk-telefoon > .pk-punt { top: 18%; right: -13px; } .pk-punt.is-aan { animation: none; filter: brightness(1.12); box-shadow: 0 0 0 9px rgba(23, 209, 125, .28), 0 0 28px rgba(23, 209, 125, 1); } @keyframes puls { 50% { box-shadow: 0 0 0 9px rgba(23, 209, 125, .08), 0 0 22px rgba(23, 209, 125, .9); } } .pk-uitleg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; max-width: 1180px; margin: 9vh auto 0; padding: 0 var(--rand); } .pk-uitleg li { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid rgba(231, 238, 247, .1); transition: border-color .35s; cursor: default; } .pk-uitleg li.is-aan { border-top-color: var(--groen); } .pk-uitleg__nr { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(23, 209, 125, .14); color: var(--groen); font: 700 12px/1 var(--sans); } .pk-uitleg h3 { font: 600 17px/1.3 var(--sans); color: #eef3f8; } .pk-uitleg p { font-size: 15px; line-height: 1.6; color: #a3b2c6; } /* ------------------------------------------------------------------ */ /* De band */ /* ------------------------------------------------------------------ */ .band { position: relative; z-index: 2; overflow: hidden; padding: 5vh 0; border-block: 1px solid rgba(231, 238, 247, .06); background: rgba(5, 7, 9, .35); } .band__spoor { display: flex; align-items: center; width: max-content; white-space: nowrap; font: 300 clamp(3rem, 8.6vw, 8.4rem)/1.05 var(--serif); letter-spacing: -.02em; color: #eef3f8; will-change: transform; } .band__spoor span:nth-of-type(even) { font-style: italic; color: #bfead3; } .band__spoor i { display: inline-block; flex: none; width: .15em; height: .15em; border-radius: 50%; margin: 0 .42em; background: var(--groen); box-shadow: 0 0 .35em rgba(23, 209, 125, .9); } /* ------------------------------------------------------------------ */ /* Gemaakt voor jouw zaak: de menukaart */ /* ------------------------------------------------------------------ */ .voorwie { padding: 18vh 0 8vh; } .menukaart { position: relative; max-width: 900px; margin: 8vh auto 0; margin-inline: max(var(--rand), calc(50% - 450px)); padding: clamp(28px, 5vw, 64px) clamp(22px, 5vw, 72px); border: 1px solid rgba(231, 238, 247, .16); outline: 1px solid rgba(231, 238, 247, .07); outline-offset: 7px; border-radius: 3px; background: linear-gradient(180deg, rgba(17, 24, 32, .78), rgba(11, 15, 20, .78)); backdrop-filter: blur(6px); } .menukaart__kop { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: clamp(18px, 4vh, 40px); font: italic 400 clamp(1.3rem, 2vw, 1.7rem)/1 var(--serif); color: #cfd9e5; } .menukaart__kop::before, .menukaart__kop::after { content: ""; flex: 0 1 90px; height: 1px; background: linear-gradient(90deg, transparent, rgba(231, 238, 247, .4)); } .menukaart__kop::after { transform: scaleX(-1); } .menukaart__kop span { white-space: nowrap; } .menukaart__lijst li { display: flex; align-items: baseline; gap: 14px; padding: 13px 0; } .menukaart__zaak { font: 400 clamp(1.25rem, 2.2vw, 1.8rem)/1.2 var(--serif); color: #eef3f8; white-space: nowrap; transition: color .3s; } .menukaart__stip { flex: 1; min-width: 24px; border-bottom: 2px dotted rgba(231, 238, 247, .22); transform: translateY(-.35em); transition: border-color .3s; } .menukaart__wat { max-width: 24em; text-align: right; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.45; color: #a3b2c6; } .menukaart__lijst li:hover .menukaart__zaak { color: #bfead3; } .menukaart__lijst li:hover .menukaart__stip { border-bottom-color: rgba(23, 209, 125, .65); } /* ------------------------------------------------------------------ */ /* Zo begin je */ /* ------------------------------------------------------------------ */ .overstap { padding: 18vh 0 8vh; } .overstap__stappen { --kol: calc((100% - 2 * var(--rand) - 84px) / 4); position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; max-width: 1180px; margin: 9vh auto 0; padding: 0 var(--rand); counter-reset: stap; } .overstap__stappen::before, .overstap__stappen::after { content: ""; position: absolute; left: calc(var(--rand) + 19px); right: calc(var(--rand) + var(--kol) - 19px); top: 19px; height: 1px; } .overstap__stappen::before { background: rgba(231, 238, 247, .14); } .overstap__stappen::after { background: var(--groen); box-shadow: 0 0 12px rgba(23, 209, 125, .8); transform: scaleX(var(--voortgang, 0)); transform-origin: 0 50%; } .overstap__stappen li { position: relative; z-index: 1; counter-increment: stap; display: flex; flex-direction: column; gap: 10px; } .overstap__stappen li::before { content: counter(stap); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; margin-bottom: 10px; background: #0b0f14; border: 1px solid rgba(23, 209, 125, .55); color: var(--groen); font: 600 15px/1 var(--sans); } .overstap__stappen h3 { font: 600 18px/1.3 var(--sans); color: #eef3f8; } .overstap__stappen p { font-size: 15px; line-height: 1.6; color: #a3b2c6; max-width: 30ch; } /* ------------------------------------------------------------------ */ /* Veelgestelde vragen */ /* ------------------------------------------------------------------ */ .vragen { padding: 18vh 0 6vh; } .vragen__lijst { max-width: 860px; margin: 8vh auto 0; margin-inline: max(var(--rand), calc(50% - 430px)); border-top: 1px solid rgba(231, 238, 247, .1); } .vraag { border-bottom: 1px solid rgba(231, 238, 247, .1); } .vraag summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; font: 400 clamp(1.15rem, 1.7vw, 1.45rem)/1.3 var(--serif); color: #eef3f8; transition: color .3s; } .vraag summary::-webkit-details-marker { display: none; } .vraag summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(var(--groen), var(--groen)) center / 100% 1.5px no-repeat, linear-gradient(var(--groen), var(--groen)) center / 1.5px 100% no-repeat; transition: transform .35s var(--ease); } .vraag[open] summary::after { transform: rotate(45deg); } .vraag summary:hover { color: #bfead3; } .vraag p { padding: 0 0 26px; max-width: 62ch; font-size: 16px; line-height: 1.65; color: #a3b2c6; } .vraag[open] p { animation: open .45s var(--ease); } @keyframes open { from { opacity: 0; transform: translateY(-6px); } } /* Verder */ .alles__meer { display: flex; justify-content: center; margin-top: 44px; padding: 0 var(--rand); } .rekenhulp__knop { align-self: flex-start; margin-top: 26px; } .plakbalk { display: none; } /* ------------------------------------------------------------------ */ /* Smal scherm */ /* ------------------------------------------------------------------ */ @media (max-width: 820px) { :root { --bar: clamp(40px, 6vh, 56px); } .hud__jaar { font-size: 14px; } .hud__geluid-tekst { display: none; } .hud__cta { font-size: 12px; padding: .72em 1em; } .tijdlijn { gap: 2px; justify-content: space-between; } .tijdlijn button { font-size: 11px; padding: 10px 2px; } .jaartal { font-size: 42vw; } .tijdperk[data-era="4"] .jaartal { font-size: 50vw; } .toestel { left: 16vw; right: 16vw; width: auto; } .toestel[data-toestel="2000"] { left: 8vw; right: 8vw; width: auto; } .toestel[data-toestel="2015"] { left: 13vw; right: 13vw; width: auto; } .js .hoofdstuk { left: var(--rand); right: var(--rand); width: auto; top: calc(var(--bar) + 3vh); } .hoofdstuk__label { margin-bottom: 1.4vh; font-size: 11px; } .hoofdstuk h2 { margin-bottom: 1.4vh; } .hoofdstuk__tekst { font-size: 14.5px !important; line-height: 1.5; } .hoofdstuk .lang, .hoofdstuk .feit { display: none; } .hoofdstuk[data-era="1"] h2 { font-size: 1.9rem; } .hoofdstuk[data-era="2"] h2 { font-size: 1.75rem; } .hoofdstuk[data-era="3"] h2 { font-size: 2.15rem; } .hoofdstuk[data-era="4"] h2 { font-size: 2.2rem; } .hoofdstuk[data-era="5"] h2 { font-size: 1.85rem; } .js .zin { bottom: auto; top: calc(var(--horizon-y) + 7vh); font-size: 1.05rem; color: #f3efe6; text-shadow: 0 1px 12px rgba(0, 0, 0, .6); } .zin__breuk { display: none; } .belofte { grid-template-columns: 1fr; gap: 18px; padding: 5vh 0; } .stroom__podium { grid-template-columns: 1fr; } .stroom__toestellen { position: sticky; top: var(--bar); height: 350px; z-index: 3; padding-top: 10px; background: linear-gradient(#050709 88%, rgba(5, 7, 9, 0)); } .tablet { width: 100%; top: 0; border-radius: 20px; padding: 9px; } .ui { font-size: 8px; } .ui__kop { padding: 7px 8px; } .ui__tab:not(.ui__tab--aan) { display: none; } .ui__bord { gap: 6px; padding: 7px; } .ui__kolom { padding: 6px; gap: 5px; } .kaartje { font-size: 8px; padding: 6px; } .kaartje__bron { font-size: 7.5px; } .kaartje p:nth-child(3) { display: none; } .telefoon { width: 104px; left: auto; right: 0; bottom: -4px; border-radius: 20px; padding: 5px; } .telefoon__scherm { border-radius: 16px; } .telefoon__app { padding: 18px 7px 7px; font-size: 7.5px; gap: 5px; } .t-kop { font-size: 9px; } .t-product, .t-totaal { padding: 5px 6px; border-radius: 6px; } .t-knop { padding: 6px; border-radius: 6px; } .bon { width: 132px; height: 170px; right: 26%; } .bon__papier { font-size: 9px; padding: 10px 10px 18px; } .bon__kop { font-size: 10px; } .bon__regel { font-size: 10px; } .stroom__stappen { padding: 4vh 0 10vh; position: relative; z-index: 1; } .stap { min-height: 56vh; padding: 30px 0; } .bento { grid-template-columns: 1fr; } .tegel--groot, .tegel--hoog, .tegel--breed { grid-column: auto; grid-row: auto; } .tafels { grid-template-columns: repeat(3, 64px); } .rekenhulp__paneel { grid-template-columns: 1fr; } .rekenhulp__invoer { border-right: 0; border-bottom: 1px solid rgba(231, 238, 247, .08); } } @media (max-width: 820px) { .product { padding: 16vh 0 8vh; } .pk { padding-bottom: 12%; } .pk__toestel { display: block; } .pk-tablet { width: 100%; } /* Links onder de tablet: daar staan de groepen, en blijven de bon en de punten vrij. */ .pk-telefoon { position: absolute; left: -2%; bottom: -18%; width: 26%; margin: 0; } .pk-telefoon > .pk-punt { right: auto; left: -13px; } .pk-uitleg { grid-template-columns: 1fr; gap: 18px; margin-top: 8vh; } .band__spoor { font-size: 3.4rem; } .menukaart__lijst li { flex-wrap: wrap; gap: 4px 12px; padding: 12px 0; } .menukaart__stip { display: none; } .menukaart__zaak { white-space: normal; } .menukaart__wat { width: 100%; text-align: left; } .overstap__stappen { grid-template-columns: 1fr; gap: 28px; } .overstap__stappen::before, .overstap__stappen::after { left: calc(var(--rand) + 19px); right: auto; top: 19px; bottom: 64px; width: 1px; height: auto; } .overstap__stappen::after { transform: scaleY(var(--voortgang, 0)); transform-origin: 50% 0; } .overstap__stappen li { padding-left: 58px; } .overstap__stappen li::before { position: absolute; left: 0; top: 0; margin: 0; } /* De oproep blijft onderin in beeld, tot het slot zelf eraan komt. */ .plakbalk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 65; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px var(--rand) calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(8, 11, 15, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid rgba(231, 238, 247, .08); transform: translateY(110%); transition: transform .45s var(--ease); } html.na-verhaal:not(.bij-slot) .plakbalk { transform: none; } .plakbalk .knop { flex: 1; } .plakbalk__link { font-size: 13.5px; color: #cfd9e5; text-decoration: none; white-space: nowrap; } } @media (max-width: 480px) { .hud__cta { display: none; } } /* ------------------------------------------------------------------ */ /* Minder beweging */ /* ------------------------------------------------------------------ */ html.stil .korrel, html.stil #film, html.stil .flits { display: none; } @media (prefers-reduced-motion: reduce) { .scan__lijn, .scan__regels i::after, .golf i { animation: none !important; } .kaartje, .telefoon, .bon__papier, .t-route { transition: none !important; } }