/* ========================================================================== Schijvens Kabelwerken B.V. — versie 2 Donker, monochroom, met het busblauw als enige accent. HUISSTIJL: deze site gebruikt alleen de VIJF geauthorde M&I-variabelen (--mi-primair/-secundair/-accent/-tekst/-achtergrond) plus de twee lettertypes. Alle vlakken en randen worden hier met color-mix afgeleid, zodat ze automatisch kloppen bij zowel een donker als een licht palet. De afgeleide variabelen die Site Studio meestuurt (--mi-zacht, --mi-lijn, --mi-grijs) zijn voor een LICHT thema uitgerekend en worden hier bewust niet gebruikt. BEWEGING: volgt de Apple-benadering — springs in plaats van vaste duur, onderbreekbaar, en er wordt uitsluitend transform en opacity geanimeerd. Zie motion.js. ========================================================================== */ :root { /* Sjabloonvariabelen (Site Studio overschrijft deze in de ) */ --mi-primair: #0b0d10; --mi-secundair: #161b21; /* Gemeten op de echte lak (IMG_0132, mediaan over vijf vlakke plekken): #0a5181, tint 204 graden. Die kleur zelf haalt maar 2,3:1 contrast op de donkere achtergrond, te weinig voor tekst; dit is dezelfde tint op een leesbaar niveau (5,5:1). */ --mi-accent: #2a8fd0; --mi-tekst: #eef2f6; --mi-achtergrond: #0b0d10; --mi-font-kop: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mi-font-tekst: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Afgeleid — werkt in beide richtingen dankzij color-mix */ --vlak-1: color-mix(in oklab, var(--mi-achtergrond) 94%, var(--mi-tekst)); --vlak-2: color-mix(in oklab, var(--mi-achtergrond) 88%, var(--mi-tekst)); --lijn: color-mix(in oklab, var(--mi-achtergrond) 82%, var(--mi-tekst)); --gedempt: color-mix(in oklab, var(--mi-tekst) 58%, var(--mi-achtergrond)); --zacht: color-mix(in oklab, var(--mi-tekst) 78%, var(--mi-achtergrond)); --accent-zacht: color-mix(in oklab, var(--mi-accent) 16%, transparent); --accent-rand: color-mix(in oklab, var(--mi-accent) 42%, transparent); --op-accent: color-mix(in oklab, var(--mi-accent) 12%, #000); --breedte: 1180px; --smal: 760px; --radius: 22px; --radius-s: 14px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--mi-achtergrond); color: var(--mi-tekst); font-family: var(--mi-font-tekst); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* height:auto is hier geen detail: de -tags dragen een width/height-attribuut (nodig om layout-shift te voorkomen), en zo'n attribuut zet een expliciete hoogte die het van `aspect-ratio` WINT. Zonder deze regel wordt een foto van 1200x800 in een 4:3-vak 800px hoog uitgerekt in plaats van bijgesneden. Elementen die bewust een eigen hoogte hebben (.bus-beeld img, .nav-logo img) zijn specifieker en blijven ongemoeid. */ img, canvas { max-width: 100%; height: auto; display: block; } a { color: inherit; } /* ── Typografie ─────────────────────────────────────────────────────────── Tracking is size-specifiek: strak op groot, neutraal op body. Leading omgekeerd evenredig met de grootte. */ h1, h2, h3 { font-family: var(--mi-font-kop); margin: 0; font-weight: 700; font-optical-sizing: auto; overflow-wrap: break-word; } .display { /* Deze kop is een zin van twee helften met een komma ertussen. De maat is zo gekozen dat hij op een breed scherm in twee regels valt met de breuk op die komma. De ondergrens wordt bepaald door het langste woord ("verkeerstechniek"): wordt de letter groter, dan past dat woord niet meer op een smal scherm en steekt het uit de kolom. */ font-size: clamp(1.75rem, 5.2vw, 4rem); line-height: 1.02; letter-spacing: -0.03em; font-weight: 800; text-wrap: balance; /* houdt de twee regels ongeveer even lang */ } .titel { font-size: clamp(2rem, 5.2vw, 3.6rem); line-height: 1.04; letter-spacing: -0.028em; } .subtitel { font-size: clamp(1.25rem, 2.6vw, 1.7rem); line-height: 1.2; letter-spacing: -0.018em; font-weight: 600; } .lead { font-size: clamp(1.05rem, 2.1vw, 1.35rem); line-height: 1.55; letter-spacing: -0.006em; color: var(--zacht); max-width: 54ch; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } .klein { font-size: .92rem; color: var(--gedempt); } .eyebrow { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--mi-accent); margin-bottom: 20px; } .container { width: min(100% - 44px, var(--breedte)); margin-inline: auto; } .smal { max-width: var(--smal); } .midden { text-align: center; margin-inline: auto; } /* ── Knoppen ────────────────────────────────────────────────────────────── Feedback op pointer-down, niet op release. */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; border: 0; border-radius: 999px; font: inherit; font-weight: 650; font-size: 1rem; text-decoration: none; cursor: pointer; transform: translateZ(0); transition: transform 100ms ease-out, background-color 160ms ease-out, border-color 160ms ease-out; } .btn:active { transform: scale(0.97); } .btn-primair { background: var(--mi-accent); color: var(--op-accent); } .btn-primair:hover { background: color-mix(in oklab, var(--mi-accent) 88%, var(--mi-tekst)); } .btn-stil { background: color-mix(in oklab, var(--mi-tekst) 8%, transparent); color: var(--mi-tekst); border: 1px solid var(--lijn); } .btn-stil:hover { background: color-mix(in oklab, var(--mi-tekst) 14%, transparent); } /* ── Navigatie: translucente laag, content scrollt eronder ────────────────── */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 100; background: color-mix(in oklab, var(--mi-achtergrond) 62%, transparent); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); border-bottom: 1px solid transparent; transition: background-color 240ms ease, border-color 240ms ease; } .nav.vast { background: color-mix(in oklab, var(--mi-achtergrond) 82%, transparent); border-bottom-color: var(--lijn); } .nav-rij { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 68px; } .nav-logo img { height: 30px; width: auto; } .nav-links { display: flex; align-items: center; gap: 4px; } .nav-links a { position: relative; padding: 9px 14px; border-radius: 10px; font-size: .95rem; font-weight: 550; text-decoration: none; color: var(--zacht); transition: color 160ms ease, background-color 160ms ease; } .nav-links a:hover { color: var(--mi-tekst); background: color-mix(in oklab, var(--mi-tekst) 8%, transparent); } /* De pagina waar je nu bent, aangewezen met aria-current. Niet alleen kleur: het streepje blijft leesbaar als kleur wegvalt of niet te onderscheiden is. */ .nav-links a[aria-current="page"] { color: var(--mi-tekst); } .nav-links a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--mi-accent); } .nav-cta { margin-left: 8px; padding: 10px 20px !important; background: var(--mi-accent); color: var(--op-accent) !important; border-radius: 999px; } .nav-knop { display: none; width: 42px; height: 42px; border: 1px solid var(--lijn); border-radius: 12px; background: transparent; color: var(--mi-tekst); cursor: pointer; } .nav-knop span, .nav-knop span::before, .nav-knop span::after { content: ""; display: block; width: 18px; height: 1.5px; margin: 0 auto; background: currentColor; border-radius: 2px; } .nav-knop span::before { transform: translateY(-5.5px); } .nav-knop span::after { transform: translateY(4px); } @media (max-width: 900px) { .nav-knop { display: block; } .nav-links { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding: 12px 22px 22px; /* DEKKEND, geen translucentie. Twee redenen, allebei gemeten op de live site: (1) de blur deed hier niets — .nav is zelf al een backdrop-root, dus een backdrop-filter op een KIND blurt alleen de nav en niet de pagina eronder; (2) zonder werkende blur liet 92% dekking de witte hero-koppen duidelijk doorschemeren, dwars door de menu-items heen. */ background: var(--mi-achtergrond); border-bottom: 1px solid var(--lijn); display: none; } .nav-links.open { display: flex; } /* De kopbalk hoort bij hetzelfde paneel zolang het menu openstaat; op 62% schemerde de hero er anders doorheen boven de menu-items. */ .nav:has(.nav-links.open) { background: var(--mi-achtergrond); backdrop-filter: none; -webkit-backdrop-filter: none; } .nav-links a { padding: 14px 6px; font-size: 1.05rem; } /* Volle-breedte streep onder een menu-item leest als een scheidingslijn; op mobiel een kort streepje links, zoals een actief-markering hoort. */ .nav-links a[aria-current="page"]::after { left: 6px; right: auto; width: 26px; bottom: 8px; } .nav-cta { margin: 10px 0 0; text-align: center; } } /* ── Secties ──────────────────────────────────────────────────────────────── */ .sectie { padding: clamp(90px, 13vw, 170px) 0; position: relative; } .sectie-vlak { background: var(--vlak-1); } .sectie-kop { margin-bottom: clamp(44px, 6vw, 76px); } /* ── Hero ─────────────────────────────────────────────────────────────────── */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: 120px 0 90px; overflow: hidden; } .hero-glow { position: absolute; left: 50%; top: -10%; width: min(150vw, 1500px); aspect-ratio: 1; transform: translateX(-50%); background: radial-gradient(circle at 50% 35%, var(--accent-zacht) 0%, transparent 62%); pointer-events: none; } .hero-inhoud { position: relative; max-width: min(100%, 940px); } /* De breedte hoort op de KOP zelf: `ch` schaalt mee met de displaygrootte, dus op de wrapper levert het een kolom van één woord breed op. */ .hero h1 { max-width: 26ch; } .hero .lead { margin-top: 26px; } .hero-knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; } .hero-onder { position: absolute; left: 0; right: 0; bottom: 34px; display: flex; justify-content: center; } .scrollhint { display: inline-flex; align-items: center; gap: 10px; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gedempt); } .scrollhint i { display: block; width: 1px; height: 30px; background: linear-gradient(var(--mi-accent), transparent); } /* ── De bus: vastgezette sectie met scroll-gestuurde beweging ─────────────── */ .bus-track { position: relative; height: 320svh; } .bus-plak { position: sticky; top: 0; height: 100svh; overflow: hidden; } /* Kop, beeld en badges staan in drie rasterrijen. Met absolute percentages liepen ze bij bepaalde vensterhoogtes over elkaar heen (gemeten: 20px overlap op 1280x900); in een raster kan dat per constructie niet. */ .bus-scene { position: relative; height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; align-items: center; justify-items: center; padding: clamp(88px, 12vh, 132px) 22px clamp(26px, 5vh, 54px); gap: clamp(16px, 3vh, 34px); } .bus-weg { position: absolute; left: 0; right: 0; top: 62%; height: 1px; background: linear-gradient(90deg, transparent, var(--lijn) 12%, var(--lijn) 88%, transparent); } .bus-tekst { grid-row: 1; text-align: center; pointer-events: none; } .bus-tekst .titel { max-width: 16ch; margin-inline: auto; } .bus-beeld { grid-row: 2; position: relative; width: min(78vw, 1000px); /* verhouding van de uitgeknipte foto zelf (2668x1123), niet van de oude placeholder; anders wordt de bus uitgerekt of komt er lucht omheen */ aspect-ratio: 2668 / 1123; max-height: 100%; will-change: transform; } .bus-beeld img, .bus-beeld canvas { width: 100%; height: 100%; object-fit: contain; } /* Grondschaduw. Een vrijstaande foto zonder schaduw zweeft; deze ellips staat onder de wielen en wordt door motion.js meegeschaald met de snelheid, zodat de bus lijkt te versnellen in plaats van te glijden. */ .bus-beeld::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: -1.5%; height: 7%; background: radial-gradient(ellipse at center, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 45%, transparent 72%); filter: blur(6px); transform: scaleX(var(--schaduw-breedte, 1)); opacity: var(--schaduw-sterkte, .9); pointer-events: none; z-index: -1; } @media (prefers-reduced-motion: reduce) { .bus-beeld::after { transform: none; } } .bus-beeld canvas { position: absolute; inset: 0; display: none; } .bus-scene.canvas-actief .bus-beeld img { visibility: hidden; } .bus-scene.canvas-actief .bus-beeld canvas { display: block; } .bus-badges { grid-row: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; pointer-events: none; } .bus-badge { padding: 9px 18px; border: 1px solid var(--accent-rand); border-radius: 999px; background: color-mix(in oklab, var(--mi-achtergrond) 55%, transparent); backdrop-filter: blur(10px); font-size: .8rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--mi-tekst); will-change: transform, opacity; } /* ── Diensten ─────────────────────────────────────────────────────────────── */ .diensten { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); } @media (max-width: 820px) { .diensten { grid-template-columns: 1fr; } } .dienst { position: relative; padding: clamp(28px, 4vw, 44px); border: 1px solid var(--lijn); border-radius: var(--radius); background: var(--vlak-1); overflow: hidden; transition: border-color 240ms ease, transform 240ms cubic-bezier(.16,1,.3,1); } .dienst:hover { border-color: var(--accent-rand); transform: translateY(-3px); } .dienst-nr { font-size: .78rem; font-weight: 700; letter-spacing: .18em; color: var(--mi-accent); margin-bottom: 16px; } .dienst h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); letter-spacing: -.02em; margin-bottom: 12px; } .dienst p { color: var(--gedempt); font-size: 1rem; } .dienst ul { list-style: none; margin: 20px 0 0; padding: 0; } .dienst li { position: relative; padding-left: 20px; margin-bottom: 9px; color: var(--gedempt); font-size: .95rem; } .dienst li::before { content: ""; position: absolute; left: 0; top: .65em; width: 6px; height: 6px; border-radius: 50%; background: var(--mi-accent); } /* ── Cijfers ──────────────────────────────────────────────────────────────── */ .cijfers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } @media (max-width: 820px) { .cijfers { grid-template-columns: repeat(2, 1fr); } } .cijfer .waarde { font-family: var(--mi-font-kop); font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--mi-tekst); } .cijfer .label { margin-top: 10px; font-size: .92rem; color: var(--gedempt); } /* ── Werkwijze: stappen die op scroll aanhaken ────────────────────────────── */ .stappen { display: grid; gap: 1px; background: var(--lijn); border: 1px solid var(--lijn); border-radius: var(--radius); overflow: hidden; } .stap { background: var(--mi-achtergrond); padding: clamp(26px, 4vw, 40px); display: grid; grid-template-columns: 68px 1fr; gap: 22px; align-items: start; } @media (max-width: 620px) { .stap { grid-template-columns: 1fr; gap: 12px; } } .stap-nr { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--accent-rand); color: var(--mi-accent); font-weight: 700; font-size: .95rem; } .stap h3 { font-size: 1.2rem; letter-spacing: -.015em; margin-bottom: 8px; } .stap p { color: var(--gedempt); font-size: 1rem; } /* ── Galerij ──────────────────────────────────────────────────────────────── */ .galerij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 900px) { .galerij { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .galerij { grid-template-columns: 1fr; } } .galerij figure { margin: 0; border-radius: var(--radius-s); overflow: hidden; border: 1px solid var(--lijn); background: var(--vlak-2); } .galerij img { width: 100%; aspect-ratio: 4/3; object-fit: cover; } .galerij figcaption { padding: 14px 18px; font-size: .9rem; color: var(--gedempt); } /* ── Projectgalerij: meerdere foto's per project ───────────────────────────── De extra fotovakken staan hier standaard UIT. galerij.js zet ze om in een strip met duimnagels; draait er geen JS, dan blijft de tegel gewoon één nette foto (de reeks is een verrijking, geen kerninhoud). In Site Studio gebeurt bewust het omgekeerde: de bewerk-preview neutraliseert scripts en forceert alles met "slides"/"slide" in de klassenaam zichtbaar, zodat elk fotovak daar aanklikbaar en vervangbaar is. Hernoem deze klassen dus niet zonder dat mee te wegen. */ .werk-slides { display: none; } .galerij figure { position: relative; } .galerij figure .werk-hoofd { cursor: zoom-in; } .galerij figure.heeft-reeks .werk-hoofd { cursor: pointer; } /* Badge met het aantal foto's, alleen als er echt een reeks is */ .werk-telling { position: absolute; top: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; font-size: .78rem; font-weight: 600; letter-spacing: .01em; color: var(--mi-tekst); background: color-mix(in oklab, var(--mi-achtergrond) 72%, transparent); border: 1px solid var(--lijn); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); pointer-events: none; } .werk-telling svg { width: 13px; height: 13px; flex: none; } /* Duimnagelstrip onder de hoofdfoto */ .werk-strip { display: flex; gap: 8px; padding: 10px 14px 0; overflow-x: auto; scrollbar-width: none; } .werk-strip::-webkit-scrollbar { display: none; } .werk-strip button { flex: none; width: 62px; padding: 0; cursor: pointer; border: 1px solid var(--lijn); border-radius: 8px; overflow: hidden; background: var(--vlak-2); line-height: 0; transition: border-color .18s ease, transform .18s cubic-bezier(.2,.8,.2,1); } .werk-strip button:hover { border-color: var(--mi-accent); transform: translateY(-2px); } .werk-strip button:focus-visible { outline: 2px solid var(--mi-accent); outline-offset: 2px; } .werk-strip img { width: 100%; aspect-ratio: 4/3; object-fit: cover; } /* ── Lightbox ───────────────────────────────────────────────────────────── */ .lb { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); background: color-mix(in oklab, var(--mi-achtergrond) 88%, #000); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); /* Dicht: écht weg uit de pagina. Alleen opacity:0 laat een onzichtbare laag over de site liggen die alle klikken opvangt — dan is de site na één keer openen en sluiten onbruikbaar. Het weghalen gebeurt met het hidden-attribuut vanuit galerij.js en NIET met een visibility-transitie: een transitie draait niet in een tab op de achtergrond, en dan zou de laag alsnog blijven staan. pointer-events staat er als vangnet los overheen. */ opacity: 0; pointer-events: none; transition: opacity .22s ease; } .lb[hidden] { display: none; } /* display:flex hierboven wint anders van hidden */ .lb.open { opacity: 1; pointer-events: auto; } .lb-fig { margin: 0; max-width: min(1200px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 12px; } .lb-beeld { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; } .lb-beeld img { max-width: 100%; max-height: 78svh; width: auto; height: auto; border-radius: var(--radius-s); object-fit: contain; transform: scale(.97); opacity: 0; transition: transform .26s cubic-bezier(.2,.8,.2,1), opacity .2s ease; } .lb.open .lb-beeld img { transform: scale(1); opacity: 1; } .lb-onder { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--gedempt); font-size: .92rem; } .lb-bijschrift { min-width: 0; } .lb-teller { flex: none; font-variant-numeric: tabular-nums; } .lb-knop { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--lijn); border-radius: 50%; background: color-mix(in oklab, var(--mi-achtergrond) 70%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--mi-tekst); cursor: pointer; transition: background-color .18s ease, border-color .18s ease, transform .18s ease; } .lb-knop:hover { border-color: var(--mi-accent); transform: translateY(-50%) scale(1.06); } .lb-knop:focus-visible { outline: 2px solid var(--mi-accent); outline-offset: 3px; } .lb-knop[disabled] { opacity: .3; cursor: default; transform: translateY(-50%); } .lb-vorige { left: 14px; } .lb-volgende { right: 14px; } .lb-sluit { position: absolute; top: 14px; right: 14px; transform: none; width: 42px; height: 42px; } .lb-sluit:hover { transform: scale(1.06); } .lb-knop svg { width: 20px; height: 20px; } @media (max-width: 640px) { .lb-knop { width: 40px; height: 40px; } .lb-vorige { left: 8px; } .lb-volgende { right: 8px; } .lb-beeld img { max-height: 68svh; } } @media (prefers-reduced-motion: reduce) { .lb, .lb-beeld img, .lb-knop, .werk-strip button { transition: none; } .lb-beeld img { transform: none; } } /* ── Afsluiter ────────────────────────────────────────────────────────────── */ .slot { position: relative; overflow: hidden; text-align: center; } .slot-glow { position: absolute; left: 50%; bottom: -40%; width: min(140vw, 1200px); aspect-ratio: 1; transform: translateX(-50%); background: radial-gradient(circle, var(--accent-zacht) 0%, transparent 60%); pointer-events: none; } .slot .container { position: relative; } .slot-knoppen { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 34px; } /* ── Footer ───────────────────────────────────────────────────────────────── */ .voet { padding: 70px 0 34px; border-top: 1px solid var(--lijn); background: var(--vlak-1); } .voet-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; } @media (max-width: 800px) { .voet-grid { grid-template-columns: 1fr; gap: 28px; } } .voet h4 { font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gedempt); margin: 0 0 16px; font-weight: 700; } .voet ul { list-style: none; margin: 0; padding: 0; } .voet li { margin-bottom: 10px; } .voet a { color: var(--zacht); text-decoration: none; } .voet a:hover { color: var(--mi-accent); } .voet p { color: var(--gedempt); } .voet-onder { margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--lijn); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: .86rem; color: var(--gedempt); } /* ── Onthullen op scroll ────────────────────────────────────────────────── De beginstand staat in CSS zodat er niets flitst; motion.js neemt het daarna over met een spring. */ [data-reveal] { opacity: 0; transform: translate3d(0, 26px, 0); } [data-reveal].klaar { opacity: 1; transform: none; } /* ── Toegankelijkheid ─────────────────────────────────────────────────────── */ .skip { position: absolute; left: -9999px; top: 0; z-index: 200; padding: 12px 18px; background: var(--mi-accent); color: var(--op-accent); font-weight: 700; } .skip:focus { left: 12px; top: 12px; } :focus-visible { outline: 2px solid var(--mi-accent); outline-offset: 3px; border-radius: 6px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: .001ms !important; transition-duration: .001ms !important; } /* Geen verschuiving, alleen een zachte overgang in dekking. */ [data-reveal] { transform: none; transition: opacity 200ms ease; } .bus-track { height: auto; } .bus-plak { position: static; height: auto; padding: 80px 0; } .bus-beeld { transform: none !important; } } @media (prefers-reduced-transparency: reduce) { .nav, .nav-links, .bus-badge { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--mi-achtergrond); } } /* ── Binnenpagina's ───────────────────────────────────────────────────────── */ .pagina-kop { position: relative; padding: clamp(140px, 18vh, 200px) 0 clamp(60px, 9vh, 100px); overflow: hidden; } .pagina-kop .titel { max-width: 18ch; } .pagina-kop .lead { margin-top: 22px; } /* Tekst naast beeld, om en om */ .duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 6vw, 76px); align-items: center; } .duo + .duo { margin-top: clamp(70px, 10vw, 130px); } .duo-om .duo-beeld { order: -1; } @media (max-width: 880px) { .duo { grid-template-columns: 1fr; gap: 30px; } .duo-om .duo-beeld { order: 0; } } .duo-beeld { position: relative; /* draagvlak voor de foto-teller */ border-radius: var(--radius); overflow: hidden; border: 1px solid var(--lijn); background: var(--vlak-2); } /* Een dienstbeeld heeft geen bijschrift, dus de strip sluit direct op de foto aan; in de galerij zit er nog een figcaption onder. */ .duo-beeld .werk-strip { padding: 10px 12px 12px; } .duo-beeld img { width: 100%; aspect-ratio: 4/3; object-fit: cover; } .duo-beeld.staand img { aspect-ratio: 9/11; } /* Duimnagels houden hun eigen maat, ook binnen een blok dat zijn afbeeldingen anders uitsnijdt (zoals .duo-beeld.staand met 9/11). Zonder deze regel zou een wijziging aan de beeldverhouding hierboven de strip meevervormen. */ .werk-strip img, .duo-beeld.staand .werk-strip img { aspect-ratio: 4/3; object-fit: cover; } .duo h2 { margin-bottom: 16px; } .duo p { color: var(--gedempt); } .lijst { list-style: none; margin: 24px 0 0; padding: 0; } .lijst li { position: relative; padding-left: 26px; margin-bottom: 11px; color: var(--gedempt); } .lijst li::before { content: ""; position: absolute; left: 0; top: .58em; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--mi-accent); } /* Contact */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 6vw, 70px); align-items: start; } @media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; gap: 34px; } } .gegevens { list-style: none; margin: 0; padding: 0; } .gegevens li { padding: 18px 0; border-bottom: 1px solid var(--lijn); } .gegevens li:last-child { border-bottom: 0; } .gegevens .veldnaam { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gedempt); margin-bottom: 6px; } .gegevens .waarde { font-size: 1.1rem; font-weight: 600; color: var(--mi-tekst); text-decoration: none; } .gegevens a.waarde:hover { color: var(--mi-accent); } .kaartje { padding: clamp(26px, 4vw, 38px); border: 1px solid var(--lijn); border-radius: var(--radius); background: var(--vlak-1); } .kaartje h3 { font-size: 1.25rem; letter-spacing: -.018em; margin-bottom: 12px; } .kaartje p { color: var(--gedempt); } /* Tekstpagina */ .tekstpagina { max-width: 72ch; } .tekstpagina h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); letter-spacing: -.018em; margin: 2.2em 0 .6em; } .tekstpagina h2:first-child { margin-top: 0; } .tekstpagina p, .tekstpagina li { color: var(--gedempt); } .tekstpagina ul { padding-left: 22px; margin: 0 0 1em; } .tekstpagina li { margin-bottom: 8px; }