/* ============================================================================ MK Vision — Werkwijze-secties (workflow-board + visual-marquee). Port van ref4/workflow.css, ingepast in de site: - Font = Aeonik (site-breed), niet Inter. - Geen globale html/body/lenis-resets: de site bezit die. - Secties transparant zodat de site-gradient (.lower) doorschijnt. - Veils faden naar de crème site-tint i.p.v. het koele demo-blauw. Verder identiek: pinned board, playhead, balken, tweeweg-marquee. ========================================================================== */ :root { --mk-red: #fc5b34; --mk-red-deep: #f34b24; --mk-red-rgb: 252, 91, 52; --mk-ink: #10131c; --mk-ink-rgb: 16, 19, 28; --mk-muted: #697488; --mk-paper: #fcebe0; /* site-crème: gebruikt voor de dot-ringen op mobiel */ --mk-white: #ffffff; --mk-grid: rgba(31, 51, 72, .085); --mk-border: rgba(62, 83, 106, .12); --mk-phase-col: clamp(205px, 16.4vw, 278px); --mk-radius: 22px; --mk-progress: 0; /* Balkhoogte en de verticale sprong tussen lane 0 en lane 1. Op korte vensters worden deze kleiner, waardoor de rijen automatisch meekrimpen. */ --mk-bar-h: 48px; --mk-lane-step: 55px; --mk-font: Aeonik, Arial, sans-serif; } .mk-flow *, .mk-visuals * { box-sizing: border-box; } .mk-flow img, .mk-visuals img { display: block; max-width: 100%; } /* GEEN eigen font forceren: de site zet zelf het lettertype op h1..h6/p/span (SF Pro Rounded op desktop, Aeonik op mobiel). Door te erven is de typografie automatisch exact gelijk aan de andere pagina's. Alleen de mono-labels krijgen expliciet IBMPlexMono, net als .mk-diensten-hero__label elders. */ .mk-flow__kicker, .mk-flow__eyebrow, .mk-flow__phase-number, .mk-flow__board-head, .mk-flow__current, .mk-flow__legend, .mk-flow__playhead-label, .mk-flow__principles i { font-family: IBMPlexMono, MKVMono, monospace !important; } /* Workflow */ .mk-flow { position: relative; min-height: 100svh; isolation: isolate; font-family: var(--mk-font); color: var(--mk-ink); background: transparent; /* site-gradient schijnt door */ } /* Hero wordt gepind terwijl de proceslijn zich tekent; daarna pint het bord. */ .mk-flow__pin { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; } /* De pagina heeft twee gepinde secties. Een gepind blok staat stil terwijl de body-gradient eronder doorscrollt — dat gaf een zichtbare naad. De gradient vastzetten lost dat op: de achtergrond blijft staan, de inhoud beweegt. */ /* De pagina heeft twee gepinde secties. Rond de pin-spacers viel de body-box weg, waardoor de crème -kleur er als een harde rand doorheen sneed. De root dezelfde starttint geven maakt dat onzichtbaar; de body-gradient blijft gewoon meescrollen, dus de kleur verloopt nog steeds bij het scrollen. */ html:has(body.mk-page-werkwijze) { background-color: #f4f7f6; } /* Onderste blok (marquee + FAQ + eindsectie) op exact dezelfde kleurverloop als .lower bij over-ons. De FAQ zit daar rond 95% van het verloop en komt dus op dezelfde cremetint uit; de kleur verloopt nog steeds bij het scrollen. */ /* Zelfde kleuren als .lower, maar de stops liggen eerder: dit blok bevat minder content vóór de FAQ, dus zonder verschuiving zou de FAQ halverwege het verloop (lichtblauw) vallen i.p.v. op de cremetint van over-ons. */ .mk-wlower { background: linear-gradient(180deg, #ffffff 0%, #e7f5fd 22%, #fcebe0 44%, #fcebe0 100%); } /* ---- Timeline als eigen sectie -------------------------------------------- */ .mk-board { position: relative; isolation: isolate; background: transparent; } .mk-board__pin { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; } .mk-board__shell { position: relative; width: min(1460px, calc(100% - clamp(38px, 7.4vw, 150px))); margin-inline: auto; padding: clamp(28px, 4vh, 56px) 0; } /* Ambient-glow en grain uit: de radials dekten de sectie maar liepen buiten hun straal transparant af, waardoor de paginakleur er als een harde rand doorheen sneed zodra de sectie gepind stond. De site werkt sowieso zonder glow-lagen — de kale gradient is rustiger en naadloos. */ .mk-flow__ambient, .mk-flow__grain { display: none; } .mk-flow__cursor-orb { position: absolute; z-index: -2; right: -10vw; top: -18vw; width: min(44vw, 720px); aspect-ratio: 1; border-radius: 50%; pointer-events: none; opacity: .55; filter: blur(12px); background: radial-gradient(circle, rgba(var(--mk-red-rgb), .11), rgba(var(--mk-red-rgb), .022) 38%, transparent 68%); will-change: transform; } /* Zelfde ruimte onder de vaste header als .mk-diensten-main elders. */ .mk-flow__shell { position: relative; width: min(1460px, calc(100% - clamp(38px, 7.4vw, 150px))); margin-inline: auto; /* Ruime kop onder de vaste header — de hero mag er niet tegenaan plakken. */ padding: clamp(150px, 19vh, 230px) 0 clamp(70px, 9vh, 120px); } /* Het bord is gepind, dus het moet binnen één schermhoogte passen. Door alleen de balkhoogte en lane-sprong te verkleinen krimpen de rijen automatisch mee. */ @media (max-height: 900px) { :root { --mk-bar-h: 44px; --mk-lane-step: 50px; } } @media (max-height: 780px) { :root { --mk-bar-h: 38px; --mk-lane-step: 43px; } .mk-board__shell { padding: clamp(18px, 2.4vh, 32px) 0; } } .mk-flow__intro { display: grid; grid-template-columns: var(--mk-phase-col) minmax(0, 1fr); column-gap: clamp(48px, 6.2vw, 108px); align-items: start; margin-bottom: clamp(26px, 3.2vh, 46px); } /* Geen verticale scheidingslijn — de site werkt met ruimte, niet met kaders. */ .mk-flow__principles-wrap { min-height: 100%; padding-right: clamp(24px, 3vw, 46px); } /* Mono-labels exact zoals .mk-diensten-hero__label op de andere pagina's. */ .mk-flow__kicker, .mk-flow__eyebrow { margin: 0; font-size: clamp(11px, .8vw, 14px); font-weight: 400; line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: rgba(11, 15, 20, .55); } .mk-flow__eyebrow { color: var(--mk-red); } .mk-flow__kicker { margin: 1px 0 2.2em; } .mk-flow__eyebrow { margin: 0 0 2.2em; } /* Stappen op een doorlopende procesketen: een verticale rail die zich vult tijdens het scrollen, met een punt per stap die aanspringt zodra hij is bereikt (zelfde idee als de process-sectie op mdx.so/services). */ .mk-flow__steps { position: relative; padding-left: 48px; } /* Drawpath-rail: een licht slingerende lijn die zich tekent tijdens de gepinde hero — dezelfde techniek (stroke-dashoffset) als de drawpaths elders. */ /* Rail zo positioneren dat het midden van het pad door de markers loopt: marker-midden ligt op 14px vanaf de steps-rand, dus rail.left = 14 - (34/2). */ .mk-flow__steps-rail { position: absolute; left: -3px; top: .1em; bottom: .1em; width: 34px; pointer-events: none; } .mk-flow__steps-svg { width: 100%; height: 100%; display: block; overflow: visible; } .mk-flow__steps-track, .mk-flow__steps-draw { fill: none; stroke-width: 11; stroke-linecap: round; } .mk-flow__steps-track { stroke: rgba(11, 15, 20, .07); } .mk-flow__steps-draw { stroke: url(#mkStepGrad); filter: drop-shadow(0 4px 16px rgba(var(--mk-red-rgb), .32)); will-change: stroke-dashoffset; } .mk-flow__principles { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(26px, 2.4vw, 40px); } .mk-flow__principles li { position: relative; display: block; color: rgba(11, 15, 20, .8); font-size: clamp(14px, 1vw, 18px); line-height: 1.25; letter-spacing: -.025em; } /* Punt op de rail */ /* Markers in site-stijl: een schone witte pil met de bekende zachte schaduw (zelfde taal als de kaarten en .mk-hero-btn), met een accentkern die opengaat zodra de lijn de stap bereikt. Geen harde ringen of kaders. */ .mk-flow__dot { position: absolute; left: -46px; top: .18em; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 6px 18px rgba(17, 30, 43, .12); transition: box-shadow .45s ease, transform .5s cubic-bezier(.22,1,.36,1); } /* Kern: groeit open in de accentkleur bij het bereiken van de stap. */ .mk-flow__dot::after { content: ""; position: absolute; inset: 0; margin: auto; width: 9px; height: 9px; border-radius: 50%; background: var(--mk-red); transform: scale(0); transition: transform .5s cubic-bezier(.22,1,.36,1); } .mk-flow__principles li.is-reached .mk-flow__dot { box-shadow: 0 8px 22px rgba(var(--mk-red-rgb), .26); transform: scale(1.06); } .mk-flow__principles li.is-reached .mk-flow__dot::after { transform: scale(1); } .mk-flow__principles i { display: block; font-size: 11px; font-style: normal; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: rgba(11, 15, 20, .3); margin-bottom: .55em; transition: color .4s ease; } .mk-flow__principles li.is-reached i { color: var(--mk-red); } .mk-flow__copy { max-width: 970px; } /* Exact de hero-kop van de andere pagina's (.mk-diensten-hero h1): Aeonik regular, uppercase, strak gespatieerd en groot. */ .mk-flow__title { max-width: 14ch; margin: 0; font-weight: 400; font-size: clamp(46px, 9vw, 150px); line-height: .9; letter-spacing: -.07em; text-transform: uppercase; } .mk-flow__title .mk-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; } .mk-flow__title .mk-word > span { display: inline-block; will-change: transform, opacity, filter; } /* Zelfde sub-typografie als .mk-diensten-hero__sub. */ .mk-flow__lead { max-width: 30em; margin: 2.2em 0 0; color: rgba(11, 15, 20, .8); font-size: clamp(17px, 1.35vw, 24px); line-height: 1.2; letter-spacing: -.035em; } .mk-flow__lead strong { color: var(--mk-red); font-weight: 400; } .mk-flow__board-wrap { position: relative; width: 100%; overflow: visible; border-radius: var(--mk-radius); } /* Rustig paneel in site-stijl: zachte witte kaart met de bekende schaduw, géén randen of rasterlijnen. De site scheidt met ruimte en schaduw. */ .mk-flow__board { position: relative; width: 100%; min-width: 960px; overflow: hidden; border: 0; border-radius: clamp(18px, 1.6vw, 26px); background: rgba(255,255,255,.72); box-shadow: 0 18px 46px rgba(17,30,43,.08); backdrop-filter: blur(14px); transform-origin: center center; will-change: transform, opacity, filter; } .mk-flow__board-head { position: relative; z-index: 2; display: grid; grid-template-columns: var(--mk-phase-col) 1fr; height: 58px; color: rgba(11, 15, 20, .45); font-size: 11px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; } .mk-flow__board-head > span { display: flex; align-items: center; padding-inline: clamp(28px, 2.8vw, 44px); } .mk-flow__axis { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; padding: 0 30px; } .mk-flow__axis span:nth-child(2), .mk-flow__axis span:nth-child(3) { text-align: center; } .mk-flow__axis span:last-child { text-align: right; } /* Geen rasterlijnen meer op de achtergrond van het bord. */ .mk-flow__body { position: relative; } .mk-flow__row { position: relative; z-index: 1; display: grid; grid-template-columns: var(--mk-phase-col) minmax(0, 1fr); /* Twee lanes moeten passen: 14px marge + lane-offset + balkhoogte + marge. */ min-height: calc(var(--mk-bar-h) + var(--mk-lane-step) + 30px); } .mk-flow__phase { display: flex; align-items: center; gap: 17px; padding-inline: clamp(26px, 2.5vw, 40px); background: transparent; transition: color .35s ease, transform .5s cubic-bezier(.2,.75,.15,1); } .mk-flow__phase strong { font-size: clamp(15px, 1.15vw, 20px); font-weight: 400; line-height: 1.15; letter-spacing: -.035em; } .mk-flow__phase-number { display: none; color: var(--mk-red); font-size: 10px; font-weight: 800; letter-spacing: .08em; } .mk-flow__icon { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 10px 24px rgba(17,30,43,.08); transition: transform .42s cubic-bezier(.22,1,.36,1), box-shadow .42s ease; } .mk-flow__icon svg { width: 21px; height: 21px; stroke: #172033; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; } .mk-flow__row.is-active .mk-flow__phase { background: rgba(var(--mk-red-rgb), .032); transform: translateX(4px); } .mk-flow__row.is-active .mk-flow__icon { transform: translateY(-2px) scale(1.045); box-shadow: 0 10px 26px rgba(var(--mk-red-rgb), .14); } .mk-flow__track { position: relative; min-width: 0; padding-inline: 24px; } .mk-flow__bar { position: absolute; z-index: 1; left: calc(24px + (100% - 48px) * var(--start) / 100); top: calc(14px + var(--lane) * var(--mk-lane-step)); width: calc((100% - 48px) * (var(--end) - var(--start)) / 100); min-width: 126px; height: var(--mk-bar-h); display: flex; align-items: center; padding: 0 21px; overflow: hidden; border: 0; border-radius: 12px; color: rgba(11, 15, 20, .78); background: #fff; box-shadow: 0 8px 20px rgba(17,30,43,.07); transform-origin: left center; will-change: transform, opacity, filter; transition: color .28s ease, box-shadow .32s ease; } .mk-flow__bar::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: linear-gradient(105deg, rgba(255,255,255,.24), transparent 32%); transition: opacity .35s ease; } .mk-flow__bar-fill { position: absolute; z-index: 0; inset: -1px; display: block; border-radius: inherit; background: var(--mk-red); transform: scaleX(0); transform-origin: left center; will-change: transform; } .mk-flow__bar span { position: relative; z-index: 3; min-width: 0; overflow: hidden; font-size: clamp(13px, .85vw, 15px); font-weight: 400; line-height: 1.05; letter-spacing: -.025em; white-space: nowrap; text-overflow: ellipsis; } .mk-flow__bar.is-live { color: #fff; box-shadow: 0 12px 28px rgba(var(--mk-red-rgb), .20); } .mk-flow__bar.is-live::after { opacity: 1; } .mk-flow__bar.is-current { box-shadow: 0 16px 36px rgba(var(--mk-red-rgb), .26); } .mk-flow__playfield { position: absolute; z-index: 6; top: -63px; right: 0; bottom: 0; left: var(--mk-phase-col); pointer-events: none; } .mk-flow__playhead { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: linear-gradient(180deg, rgba(var(--mk-red-rgb), .92), rgba(var(--mk-red-rgb), .74)); box-shadow: 0 0 18px rgba(var(--mk-red-rgb), .15); will-change: transform; } .mk-flow__playhead-dot { position: absolute; top: 0; left: 50%; width: 16px; height: 16px; border: 2px solid #fff; border-radius: 50%; background: var(--mk-red); box-shadow: 0 0 0 2px rgba(var(--mk-red-rgb), .55), 0 7px 17px rgba(var(--mk-red-rgb), .25); transform: translate(-50%, -50%); } .mk-flow__playhead-aura { position: absolute; top: 0; bottom: 0; left: 50%; width: 110px; transform: translateX(-50%); background: linear-gradient(to right, transparent, rgba(var(--mk-red-rgb), .05), transparent); filter: blur(12px); } .mk-flow__playhead-label { position: absolute; top: -30px; left: 50%; padding: 5px 7px; border-radius: 4px; color: #fff; background: var(--mk-red); font-size: 8px; font-weight: 800; letter-spacing: .12em; transform: translateX(-50%); box-shadow: 0 7px 20px rgba(var(--mk-red-rgb), .18); } .mk-flow__mobile-line { display: none; } .mk-flow__footer { display: grid; grid-template-columns: minmax(230px, .9fr) auto minmax(160px, 18vw); align-items: center; gap: 24px; margin-top: 22px; color: #707b8e; } .mk-flow__current { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 11px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; } .mk-flow__counter { color: var(--mk-red); white-space: nowrap; } .mk-flow__current-name { min-width: 0; overflow: hidden; color: rgba(11, 15, 20, .7); font-weight: 400; white-space: nowrap; text-overflow: ellipsis; } .mk-flow__legend { display: flex; justify-content: center; gap: clamp(20px, 3vw, 46px); font-size: 11px; line-height: 1; } .mk-flow__legend span { display: flex; align-items: center; gap: 9px; white-space: nowrap; } /* Legenda: kleine gevulde stippen i.p.v. omrande blokjes — minder lijnwerk. */ .mk-flow__legend i { width: 9px; height: 9px; border: 0; border-radius: 50%; background: rgba(11, 15, 20, .16); } .mk-flow__legend i.is-live { background: var(--mk-red); } .mk-flow__legend i.is-current { background: #fff; box-shadow: 0 0 0 2px var(--mk-red); } .mk-flow__progress { position: relative; height: 1px; overflow: hidden; background: rgba(var(--mk-ink-rgb), .14); } .mk-flow__progress i { display: block; width: 100%; height: 100%; background: var(--mk-red); transform: scaleX(0); transform-origin: left center; will-change: transform; } /* Visual-only two-way marquee */ .mk-visuals { position: relative; z-index: 2; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: clamp(16px, 1.6vw, 24px); padding: clamp(34px, 4vh, 58px) 0 clamp(40px, 5vh, 70px); overflow: hidden; border-top: 0; background: transparent; /* site-gradient schijnt door */ } /* De randen faden via een mask op de rij zelf, niet via een gekleurde overlay. Een gekleurde veil moet de paginakleur raden en gaf een zichtbare band op de site-gradient; een mask werkt op élke achtergrond en is dus naadloos. */ .mk-visuals__row { position: relative; width: 100%; overflow: visible; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); } .mk-visuals__track { display: flex; width: max-content; gap: clamp(16px, 1.55vw, 28px); padding-left: clamp(18px, 2vw, 32px); will-change: transform; } .mk-visuals__group { display: flex; flex: 0 0 auto; gap: clamp(16px, 1.55vw, 28px); } .mk-visual-card { position: relative; width: clamp(300px, 24vw, 430px); height: clamp(220px, 17.5vw, 315px); flex: 0 0 auto; overflow: hidden; margin: 0; border: 1px solid rgba(67,91,115,.11); border-radius: 18px; background: #fff; box-shadow: 0 18px 42px rgba(54,79,103,.12), 0 5px 16px rgba(54,79,103,.06), inset 0 1px 0 rgba(255,255,255,.8); transform: translateZ(0); will-change: transform, opacity, filter; } .mk-visual-card.is-wide { width: clamp(390px, 34vw, 590px); } .mk-visual-card.is-tall { width: clamp(265px, 20vw, 365px); } .mk-visual-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(130deg, rgba(255,255,255,.14), transparent 36%, transparent 65%, rgba(255,255,255,.08)); opacity: .65; } .mk-visual-card img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.012); transition: transform .8s cubic-bezier(.22,1,.36,1), filter .8s ease; } .mk-visual-card:hover img { transform: scale(1.055); } /* Vervangen door de mask op .mk-visuals__row (zie boven) — een gekleurde overlay kan de site-gradient nooit exact volgen. */ .mk-visuals__veil { display: none; } @media (max-width: 1120px) { :root { --mk-phase-col: 220px; } .mk-flow__shell { width: calc(100% - 46px); } .mk-flow__intro { column-gap: 46px; } .mk-flow__title { font-size: clamp(39px, 5vw, 60px); } .mk-flow__phase { gap: 12px; padding-inline: 24px; } } /* Mobile uses the v2 vertical workflow style, not a horizontally scrolling board. */ @media (max-width: 940px) { .mk-flow__pin { min-height: auto; display: block; overflow: hidden; } .mk-flow__ambient, .mk-flow__cursor-orb { display: none; } /* Op mobiel is het bord een verticale lijst — niet pinnen of centreren. */ .mk-board__pin { min-height: 0; display: block; overflow: visible; } .mk-flow__shell { width: min(100% - 28px, 720px); /* Ruimte voor de vaste header, net als de andere pagina's op mobiel. */ padding: 128px 0 54px; } .mk-board__shell { width: min(100% - 28px, 720px); padding: 0 0 30px; } .mk-flow__intro { grid-template-columns: 1fr; gap: 34px; margin-bottom: 52px; } .mk-flow__copy { order: 1; } .mk-flow__principles-wrap { order: 2; padding: 0; border: 0; } .mk-flow__principles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; } .mk-flow__principles li { grid-template-columns: 22px 1fr; gap: 10px; font-size: 13px; } .mk-flow__kicker { margin-bottom: 18px; } .mk-flow__eyebrow { margin-bottom: 15px; } .mk-flow__title { max-width: 15ch; font-size: clamp(34px, 8.6vw, 54px); line-height: .99; } .mk-flow__lead { max-width: 42rem; margin-top: 20px; font-size: 16px; line-height: 1.52; } .mk-flow__board-wrap { width: 100%; overflow: visible; border-radius: 0; } .mk-flow__board { min-width: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; } .mk-flow__board::after, .mk-flow__board-head, .mk-flow__playfield { display: none; } .mk-flow__body { display: grid; gap: 38px; padding: 0 0 0 40px; background: none; } .mk-flow__body::before { content: ""; position: absolute; left: 8px; top: 0; bottom: 0; width: 1px; background: rgba(var(--mk-ink-rgb), .12); } .mk-flow__mobile-line { display: block; position: absolute; z-index: 4; left: 7px; top: 0; bottom: 0; width: 3px; overflow: hidden; border-radius: 999px; background: rgba(var(--mk-red-rgb), .08); } .mk-flow__mobile-line i { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--mk-red); transform: scaleY(0); transform-origin: top center; will-change: transform; } .mk-flow__row { display: block; min-height: 0; border: 0; } .mk-flow__phase { position: relative; gap: 9px; margin-bottom: 13px; padding: 0; border: 0; background: transparent !important; transform: none !important; } .mk-flow__icon { display: none; } .mk-flow__phase-number { display: inline; } .mk-flow__phase strong { font-size: 16px; font-weight: 600; letter-spacing: -.025em; } .mk-flow__phase::before { content: ""; position: absolute; left: -37px; top: 50%; width: 10px; height: 10px; border: 3px solid var(--mk-paper); border-radius: 50%; background: rgba(117,131,148,.42); box-shadow: 0 0 0 1px rgba(80,99,121,.12); transform: translateY(-50%); transition: background-color .3s ease, transform .35s ease; } .mk-flow__row.is-active .mk-flow__phase::before { background: var(--mk-red); transform: translateY(-50%) scale(1.18); } .mk-flow__track { display: grid; gap: 11px; padding: 0; } .mk-flow__bar { position: relative; top: auto; left: auto; width: 100%; min-width: 0; min-height: 64px; height: auto; padding: 15px 17px; border-radius: 13px; } .mk-flow__bar span { overflow: visible; font-size: 14px; line-height: 1.25; white-space: normal; text-overflow: clip; } .mk-flow__footer { grid-template-columns: minmax(0, 1fr) minmax(110px, .7fr); gap: 18px; margin-top: 42px; } .mk-flow__legend { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; gap: 18px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .mk-flow__legend::-webkit-scrollbar { display: none; } .mk-flow__current { font-size: 9px; } .mk-visuals { min-height: 0; padding: 34px 0 42px; gap: 13px; } .mk-visuals__track, .mk-visuals__group { gap: 13px; } .mk-visual-card { width: 285px; height: 200px; border-radius: 14px; } .mk-visual-card.is-wide { width: 370px; } .mk-visual-card.is-tall { width: 250px; } } @media (max-width: 560px) { .mk-flow__shell { width: calc(100% - 24px); padding-top: 118px; /* ruimte voor de vaste header */ } .mk-flow__principles { grid-template-columns: 1fr; } .mk-flow__title { max-width: 15ch; font-size: clamp(30px, 9.4vw, 44px); letter-spacing: -.045em; } .mk-flow__lead { font-size: 15px; } .mk-flow__body { padding-left: 35px; gap: 34px; } .mk-flow__phase::before { left: -32px; } .mk-flow__footer { grid-template-columns: 1fr; } .mk-flow__progress { grid-row: 2; } .mk-flow__legend { grid-row: 3; font-size: 10px; } .mk-visuals { padding: 28px 0 36px; } .mk-visual-card { width: 258px; height: 182px; } .mk-visual-card.is-wide { width: 330px; } .mk-visual-card.is-tall { width: 228px; } } @media (prefers-reduced-motion: reduce) { .mk-flow__bar-fill, .mk-flow__mobile-line i, .mk-flow__progress i, .mk-flow__title .mk-word > span, .mk-flow__board, .mk-visuals__track, .mk-visual-card { transform: none !important; opacity: 1 !important; filter: none !important; } }