/* Decotrap – homepagina "A · Geist" Eén stijlgids, drie thema's: [data-theme="lime"], [data-theme="zw"] (zwart-wit met subtiele lime) en [data-theme="huisstijl"] (tokens van decotrap.be). Componenten gebruiken enkel de semantische tokens hieronder; een thema zet alleen tokens. */ /* ---------- 1. Tokens ---------- */ :root { --bg: #ECEAE5; /* pagina */ --bg-rgb: 236 234 229; --paper: #F6F5F1; /* lichte tekst op donker, knoppen */ --ink: #1F211C; /* tekst, donkere knoppen */ --deep: #2A3320; /* donkere band (treden, toonzaalkaart) */ --text: #33362F; /* broodtekst */ --muted: #4A4D44; /* labels */ --line: #C9C6BE; /* lijnen */ --footer: #1F211C; --shade: 20 22 17; /* rgb voor fotolagen */ --on-dark: 246 245 241; /* rgb voor transparant wit op donker */ --brand: #C4C800; /* logogroen */ /* component-tokens (verschillen per thema) */ --hero-btn-bg: var(--brand); --hero-btn-fg: var(--ink); --usp-dot: 8px; --label-on-dark: var(--brand); --step-border: 6px solid var(--brand); --step-last-bg: var(--brand); --step-last-fg: var(--ink); --step-last-border: 6px solid var(--brand); --step-last-icon-on: var(--ink); --step-last-icon-off: rgb(31 33 28 / 0.25); --card-btn-bg: var(--brand); --card-btn-fg: var(--ink); --cta-bg: var(--brand); --cta-fg: var(--ink); --cta-border: 0; --cta-mark: none; --footer-label: var(--brand); --footer-mark: 120px; } [data-theme="huisstijl"] { /* tokens van www.decotrap.be (theme.css): accent #BCBE00, beige #F7F3EB, donker #232828, tekst #717171, Fedra Sans Screen, radius 3px */ --bg: #FAF9F4; --bg-rgb: 250 249 244; --paper: #FFFFFF; --ink: #232828; --deep: #232828; --text: #717171; --muted: #717171; --line: #E4E0D6; --footer: #232828; --shade: 35 40 40; --on-dark: 255 255 255; --brand: #BCBE00; --hero-btn-bg: var(--brand); --hero-btn-fg: var(--ink); --usp-dot: 8px; --label-on-dark: var(--brand); --step-border: 6px solid var(--brand); --step-last-bg: var(--brand); --step-last-fg: var(--ink); --step-last-border: 6px solid var(--brand); --step-last-icon-on: var(--ink); --step-last-icon-off: rgb(35 40 40 / 0.25); --card-btn-bg: var(--brand); --card-btn-fg: var(--ink); --cta-bg: var(--brand); --cta-fg: var(--ink); --cta-border: 0; --cta-mark: none; --footer-label: var(--brand); --footer-mark: 120px; } /* lettertype en hoeken van de huisstijl (html[...] gaat voor op :root hieronder) */ html[data-theme="huisstijl"] { --font: 'Fedra Sans Screen', Arial, sans-serif; --mono: 'Fedra Sans Screen', Arial, sans-serif; --serif: 'Fedra Sans Screen', Arial, sans-serif; --radius: 3px; } /* Fedra Sans Screen (huisstijl decotrap.be), enkel geladen in het thema 'huisstijl' */ @font-face { font-family: 'Fedra Sans Screen'; src: url('fonts/FedraSansScreen.woff2') format('woff2'), url('fonts/FedraSansScreen.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Fedra Sans Screen'; src: url('fonts/FedraSansScreen-Bold.woff2') format('woff2'), url('fonts/FedraSansScreen-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } :root { --font: 'Geist', system-ui, sans-serif; --mono: 'Geist Mono', ui-monospace, monospace; --serif: 'Instrument Serif', Georgia, serif; --gutter: max(clamp(20px, 4.5vw, 64px), calc((100vw - 1680px) / 2)); /* gsm en tablet */ --radius: 4px; --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* desktop: 6,25% ruimte aan elke kant (inhoud 87,5vw), zoals --section-content-width op decotrap.be */ @media (min-width: 961px) { :root { --gutter: max(6.25vw, calc((100vw - 1680px) / 2)); } } /* grote schermen: inhoud tot 1680px, zodat er links en rechts niet te veel leegte is */ /* ---------- 2. Basis ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.6; transition: background-color 300ms var(--ease), color 300ms var(--ease); } img { display: block; max-width: 100%; } a { color: inherit; } h1, h2, h3, p, blockquote, figure { margin: 0; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* width/height in de HTML zijn er voor een stabiele opbouw; de hoogte volgt de breedte (zonder specificiteit, zodat elke regel voorgaat) */ :where(img) { height: auto; } h2.label { margin: 0; font-weight: 400; line-height: inherit; } .label { font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .h2 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.04; font-weight: 500; text-transform: uppercase; letter-spacing: -0.01em; } .arrow { width: 14px; height: 14px; flex: none; } /* knoppen */ .btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: var(--radius); font-size: 15px; font-weight: 500; text-decoration: none; transition: background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease); } .btn--dark { background: var(--ink); color: var(--paper); } .btn--outline { border: 1px solid currentColor; } @media (hover: hover) { .btn--dark:hover { background: var(--brand); color: var(--ink); } .btn--outline:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } } .link { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; min-height: 44px; box-sizing: border-box; font-size: 15px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid var(--brand); padding-bottom: 6px; } /* ---------- 3. Hero ---------- */ .hero { position: relative; /* altijd precies één scherm hoog (svh: stabiel op gsm's met in- en uitschuivende adresbalk) */ min-height: 100vh; min-height: 100svh; color: #F6F5F1; display: flex; flex-direction: column; isolation: isolate; } .hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(var(--shade) / 0.34) 0%, rgb(var(--shade) / 0.12) 40%, rgb(var(--shade) / 0) 60%), linear-gradient(180deg, rgb(var(--shade) / 0.38) 0%, rgb(var(--shade) / 0) 16%, rgb(var(--shade) / 0) 55%, rgb(var(--shade) / 0.5) 100%); } .nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px var(--gutter); } .nav__logo img { width: 52px; height: auto; } .nav__menu { display: flex; align-items: center; gap: 36px; list-style: none; margin: 0; padding: 0; } .nav__menu a, .nav__trigger { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; line-height: 1; font-size: 14px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; padding: 8px 0; border-bottom: 2px solid transparent; } .nav__trigger { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; border-bottom: 2px solid transparent; color: inherit; font-family: inherit; cursor: pointer; } .nav__trigger .chev { transition: transform 200ms var(--ease); } .nav__trigger[aria-expanded="true"] { border-bottom-color: var(--brand); } .nav__trigger[aria-expanded="true"] .chev { transform: rotate(180deg); } @media (hover: hover) { .nav__menu a:hover, .nav__trigger:hover { border-bottom-color: var(--brand); } } .nav__ctas { display: flex; align-items: center; gap: 24px; } .nav__menu a, .nav__trigger, .nav__link, .nav__offerte { white-space: nowrap; } .nav__link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 500; text-decoration: none; border-bottom: 2px solid transparent; } @media (hover: hover) { .nav__link:hover { border-bottom-color: var(--brand); } } /* Gratis offerte = primaire knop (lime: logogroen; zwart-wit: licht op foto, inkt op licht vlak) */ /* rustige glazen knop: de groene knop in de hero blijft de hoofdactie, deze is de snelle uitweg */ .nav__offerte { min-height: 48px; font-weight: 600; color: #F6F5F1; background: rgb(246 245 241 / 0.12); border: 1px solid rgb(246 245 241 / 0.45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease); } @media (hover: hover) { .nav__offerte:hover { background: var(--hero-btn-bg); color: var(--hero-btn-fg); border-color: var(--hero-btn-bg); } } .nav__toggle { display: none; } .hero__content { margin-top: auto; padding: 0 var(--gutter) 72px; max-width: 960px; display: flex; flex-direction: column; gap: 24px; } .hero h1 { font-size: clamp(40px, 5.3vw, 76px); line-height: 1; font-weight: 500; text-transform: uppercase; letter-spacing: -0.01em; } .hero__sub { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5; max-width: 520px; } .hero__actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 8px; } .hero__cta { min-height: 52px; padding: 0 24px; font-weight: 600; background: var(--hero-btn-bg); color: var(--hero-btn-fg); } @media (hover: hover) { .hero__cta:hover { background: var(--paper); color: var(--ink); } } /* ---------- 6b. Projecten (realisaties) ---------- */ .projects { padding: 0 var(--gutter) 160px; display: flex; flex-direction: column; gap: 64px; } .projects__head { display: flex; flex-direction: column; gap: 16px; } .projects__dots { display: none; } .project picture, .project img { display: block; width: 100%; } /* desktop: projectindex. Links de lijst, rechts één grote foto die wisselt met het actieve project */ .projects__list { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: repeat(3, auto) 1fr; column-gap: clamp(40px, 5vw, 88px); } .project { display: contents; } .project:nth-child(1) .project__txt { grid-row: 1; } .project:nth-child(2) .project__txt { grid-row: 2; } .project:nth-child(3) .project__txt { grid-row: 3; } .project__txt { grid-column: 1; position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 16px; row-gap: 8px; align-items: baseline; padding: 28px 0; border-top: 1px solid var(--line); cursor: pointer; outline: none; } .project:nth-child(3) .project__txt { border-bottom: 1px solid var(--line); } .project__txt::before { content: ""; grid-row: 1; width: 18px; height: 18px; align-self: center; background: var(--brand); clip-path: polygon(0 100%, 0 66.6%, 33.3% 66.6%, 33.3% 33.3%, 66.6% 33.3%, 66.6% 0, 100% 0, 100% 100%); transform: scale(0.4); opacity: 0; transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1), opacity 250ms var(--ease); } .project__txt h3 { grid-column: 2; font-size: clamp(34px, 3.6vw, 56px); line-height: 1; font-weight: 500; text-transform: uppercase; letter-spacing: -0.02em; color: var(--muted); transition: color 300ms var(--ease), transform 400ms cubic-bezier(0.22, 1, 0.36, 1); } .project__txt p { grid-column: 2; font-size: 15px; line-height: 1.5; color: var(--muted); max-width: 360px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 450ms var(--ease), opacity 300ms var(--ease); } /* voortgangslijn onder het actieve project */ .project__txt::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1); } .project.is-active .project__txt::before { transform: none; opacity: 1; } .project.is-active .project__txt::after { transform: scaleX(1); } .project.is-active .project__txt h3 { color: var(--ink); } .project.is-active .project__txt p { color: var(--text); max-height: 80px; opacity: 1; transition-delay: 80ms; } @media (hover: hover) { .project:not(.is-active) .project__txt:hover h3 { color: var(--ink); transform: translateX(4px); } } .project__txt:focus-visible h3 { outline: 2px solid var(--brand); outline-offset: 6px; } /* bühne: alle foto's liggen op elkaar in de rechterkolom */ .project__main, .project__detail { grid-column: 2; grid-row: 1 / -1; } .project .project__main { position: relative; overflow: hidden; border-radius: var(--radius); align-self: start; opacity: 0; transition: opacity 700ms var(--ease); } .project__main img { aspect-ratio: 5 / 4; object-fit: cover; transform: scale(1.06); transition: transform 1400ms cubic-bezier(0.22, 1, 0.36, 1); } .project .project__detail { position: relative; z-index: 2; align-self: end; justify-self: start; width: 28%; margin: 0 0 -40px -56px; opacity: 0; transform: translateY(24px); transition: opacity 500ms var(--ease), transform 700ms cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; } .project__detail img { aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); box-shadow: 0 24px 48px -16px rgb(0 0 0 / 0.35); border: 6px solid var(--bg); } .project.is-active .project__main { opacity: 1; z-index: 1; } .project.is-active .project__main img { transform: none; } .project.is-active .project__detail { opacity: 1; transform: none; transition-delay: 180ms; } @media (prefers-reduced-motion: reduce) { .project__main, .project__main img, .project__detail, .project__txt h3, .project__txt p, .project__txt::before, .project__txt::after { transition: none !important; } } .projects__more { align-self: flex-start; } /* ---------- 4. USP-balk ---------- */ .usp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 0; border-bottom: 1px solid var(--line); list-style: none; margin: 0; font-size: clamp(17px, 1.5vw, 22px); font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; } /* drie gelijke vakken met een trapje in logogroen, gescheiden door dunne lijnen */ .usp li { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 44px 24px; } .usp li + li { border-left: 1px solid var(--line); } .usp li::before { content: ""; width: 18px; height: 18px; background: var(--brand); flex: none; clip-path: polygon(0 100%, 0 66.6%, 33.3% 66.6%, 33.3% 33.3%, 66.6% 33.3%, 66.6% 0, 100% 0, 100% 100%); } /* ---------- 5. Over Decotrap ---------- */ .split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding: 140px var(--gutter); align-items: center; } /* doet niet mee in het raster, de foto zelf wel */ .split__pic, .quote__pic { display: contents; } .split__img { grid-column: 1 / span 5; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); } .split__body { grid-column: 7 / span 5; display: flex; flex-direction: column; gap: 28px; } .split__body p { color: var(--text); } .split__facts { display: none; } /* desktop: foto tot tegen de rand met de trapuitsnede van het logo, feiten als rustige lijst */ @media (min-width: 961px) { .split { align-items: center; } .split .split__img { grid-column: 1 / span 6; margin-left: calc(-1 * var(--gutter)); width: calc(100% + var(--gutter)); aspect-ratio: 5 / 6; border-radius: 0 var(--radius) var(--radius) 0; --cut: clamp(56px, 6vw, 96px); clip-path: polygon(0 0, calc(100% - var(--cut)) 0, calc(100% - var(--cut)) calc(var(--cut) / 3), calc(100% - var(--cut) * 2 / 3) calc(var(--cut) / 3), calc(100% - var(--cut) * 2 / 3) calc(var(--cut) * 2 / 3), calc(100% - var(--cut) / 3) calc(var(--cut) * 2 / 3), calc(100% - var(--cut) / 3) var(--cut), 100% var(--cut), 100% 100%, 0 100%); } .split__body { grid-column: 8 / span 5; gap: 24px; } .split__body .h2 { font-size: clamp(40px, 3.6vw, 58px); } .split__body .extra { display: none; } .split__facts { display: flex; flex-direction: column; margin: 8px 0 12px; border-top: 1px solid var(--line); } .split__facts div { display: grid; grid-template-columns: 22px clamp(96px, 9vw, 130px) minmax(0, 1fr); align-items: start; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); } .split__facts div::before { content: ""; width: 12px; height: 12px; background: var(--brand); margin-top: 5px; clip-path: polygon(0 100%, 0 66.6%, 33.3% 66.6%, 33.3% 33.3%, 66.6% 33.3%, 66.6% 0, 100% 0, 100% 100%); } .split__facts dt { padding-top: 4px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .split__facts dd { margin: 0; font-size: 16px; line-height: 1.4; font-weight: 500; color: var(--ink); } } /* ---------- 6. Collecties (redactioneel) ---------- */ .tel { white-space: nowrap; } /* ---------- 8b. Sociale bewijskracht ---------- */ .proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 16px; padding-top: 28px; border-top: 1px solid var(--line); } .proof__item { margin: 0; display: flex; flex-direction: column; gap: 8px; } .proof__stars { color: var(--ink); font-size: 12px; letter-spacing: 0.2em; } .proof blockquote { font-family: var(--font); font-style: normal; font-size: 16px; line-height: 1.55; font-weight: 400; color: var(--ink); } .proof figcaption { font-size: 13px; font-weight: 500; color: var(--text); } .award { display: flex; align-items: center; gap: 16px; font-size: 14px; color: var(--muted); max-width: 440px; } .award img { width: 56px; height: 56px; flex: none; border-radius: var(--radius); } /* ---------- 6. Collecties: image accordion (naar Bencho, in gewone CSS/JS) ---------- */ .collections { padding: 0 var(--gutter) 160px; display: flex; flex-direction: column; gap: 40px; } .collections__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; } .collections__head p { max-width: 380px; font-size: 16px; color: var(--text); } .acc { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; height: clamp(460px, 44vw, 640px); } .acc__item { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: var(--radius); cursor: pointer; isolation: isolate; color: #F6F5F1; transition: flex-grow 700ms cubic-bezier(0.65, 0, 0.35, 1); } .acc__item.is-open { flex-grow: 4; cursor: default; } .acc__img, .acc__img img { position: absolute; inset: 0; width: 100%; height: 100%; } .acc__img img { object-fit: cover; z-index: -2; transform: scale(1.04); transition: transform 1200ms var(--ease); } .acc__item.is-open .acc__img img { transform: scale(1); } .acc__item::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(var(--shade) / 0.1) 30%, rgb(var(--shade) / 0.72) 100%); transition: background-color 400ms var(--ease); } .acc__item:not(.is-open)::before { background-color: rgb(var(--shade) / 0.25); } .acc__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px; display: flex; flex-direction: column; gap: 14px; } .acc__title { font-size: clamp(24px, 2.4vw, 40px); line-height: 1; font-weight: 500; text-transform: uppercase; letter-spacing: -0.01em; white-space: nowrap; } /* dichte strook: titel staat verticaal, zoals de rug van een boek */ .acc__item:not(.is-open) .acc__title { position: absolute; left: 24px; bottom: 28px; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 22px; } .acc__more { display: flex; flex-direction: column; gap: 16px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 500ms var(--ease), opacity 250ms var(--ease); } .acc__item.is-open .acc__more { max-height: 220px; opacity: 1; transition: max-height 600ms var(--ease) 200ms, opacity 400ms var(--ease) 300ms; } .acc__more p { font-size: 16px; line-height: 1.5; max-width: 420px; color: rgb(246 245 241 / 0.88); } .acc__more .acc__cta { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 44px; font-size: 14px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid var(--brand); } /* snelkoppelingen naar de modellen, als glazen labels op de foto */ .acc__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: 520px; } .acc__tags a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 500; text-decoration: none; color: #F6F5F1; background: rgb(246 245 241 / 0.12); border: 1px solid rgb(246 245 241 / 0.28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background-color 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease); } @media (hover: hover) { .acc__tags a:hover { background: var(--brand); border-color: var(--brand); color: #1F211C; } } .acc__tags a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .acc__item.is-open .acc__more { max-height: 320px; } /* open kaart: tekst, labels en link komen na elkaar binnen */ .acc__more > * { transform: translateY(10px); opacity: 0; transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1), opacity 400ms var(--ease); } .acc__item.is-open .acc__more > * { transform: none; opacity: 1; } .acc__item.is-open .acc__more > :nth-child(1) { transition-delay: 260ms; } .acc__item.is-open .acc__more > :nth-child(2) { transition-delay: 340ms; } .acc__item.is-open .acc__more > :nth-child(3) { transition-delay: 420ms; } /* dichte kaarten: trapje bovenaan, bij hover wat lichter */ .acc__item::after { content: ""; position: absolute; top: 24px; left: 24px; width: 16px; height: 16px; background: var(--brand); clip-path: polygon(0 100%, 0 66.6%, 33.3% 66.6%, 33.3% 33.3%, 66.6% 33.3%, 66.6% 0, 100% 0, 100% 100%); opacity: 0; transform: translateY(6px); transition: opacity 300ms var(--ease), transform 400ms cubic-bezier(0.22, 1, 0.36, 1); } .acc__item:not(.is-open)::after { opacity: 1; transform: none; } @media (hover: hover) { .acc__item:not(.is-open):hover::before { background-color: rgb(var(--shade) / 0.08); } .acc__item:not(.is-open):hover .acc__img img { transform: scale(1.08); } } @media (prefers-reduced-motion: reduce) { .acc__item, .acc__more, .acc__more > *, .acc__img img, .acc__item::after { transition: none !important; } } /* ---------- 9. Trap-o-theek (signature) ---------- */ /* desktop: tekst links, video rechts over de volle hoogte, alles samen binnen één scherm */ .tot { background: var(--deep); color: var(--paper); transition: background-color 300ms var(--ease); padding: clamp(80px, 9vh, 120px) var(--gutter); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; grid-template-areas: "head head head head head . media media media media media media" "lead lead lead lead lead . media media media media media media" "visit visit visit visit visit . media media media media media media"; grid-template-rows: auto 1fr auto; min-height: min(100svh, 980px); box-sizing: border-box; } .tot .label { color: var(--label-on-dark); } .tot__head { grid-area: head; display: flex; flex-direction: column; gap: 20px; } .tot__title { font-size: clamp(40px, 4.4vw, 68px); line-height: 0.98; font-weight: 500; text-transform: uppercase; letter-spacing: -0.02em; } .tot__media { grid-area: media; position: relative; border-radius: var(--radius); overflow: hidden; background: #000; min-height: 420px; } .tot__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .tot__pause { position: absolute; right: 20px; bottom: 20px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 999px; background: rgb(var(--shade) / 0.45); border: 1px solid rgb(246 245 241 / 0.5); color: #F6F5F1; cursor: pointer; } .tot__pause .i-play { display: none; } .tot__pause[aria-pressed="true"] .i-play { display: block; } .tot__pause[aria-pressed="true"] .i-pause { display: none; } .tot__film { position: absolute; left: 20px; bottom: 20px; z-index: 2; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 16px 6px 6px; border: 0; border-radius: 999px; background: rgb(var(--shade) / 0.55); color: #F6F5F1; font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; } .tot__film .play { width: 36px; height: 36px; border-radius: 999px; background: #F6F5F1; display: grid; place-items: center; } .tot__film .play path { fill: #1F211C; } .tot__lead { grid-area: lead; align-self: center; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; color: rgb(var(--on-dark) / 0.82); max-width: 520px; } .tot__btns { display: flex; gap: 12px; flex-wrap: wrap; } .tot__btn2 { color: var(--paper); border-color: rgb(var(--on-dark) / 0.5); min-height: 52px; } @media (hover: hover) { .tot__btn2:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); } } .tot__visit { grid-area: visit; display: flex; flex-direction: column; gap: 24px; } .tot__places { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .place { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border: 1px solid rgb(var(--on-dark) / 0.18); border-radius: var(--radius); font-size: 14px; line-height: 1.5; } .place strong { font-weight: 600; font-size: 15px; } .place span { color: rgb(var(--on-dark) / 0.75); } .place__links { display: flex; gap: 16px; margin-top: 0; } .place__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--paper); font-weight: 500; text-underline-offset: 3px; } .tot__cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .tot__cta p { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(var(--on-dark) / 0.7); } .tot__btn { background: var(--card-btn-bg); color: var(--card-btn-fg); font-weight: 600; min-height: 52px; } .tot__how { display: none; } /* desktop: filmische toonzaal. De video vult de sectie, tekst links erover, bezoekinfo in een glazen balk onderaan */ @media (min-width: 961px) { .tot { position: relative; overflow: hidden; isolation: isolate; grid-template-columns: minmax(0, 620px) minmax(0, 1fr); grid-template-areas: "head ." "lead ." "how how" "visit visit"; grid-template-rows: auto auto auto auto; align-content: end; row-gap: 28px; column-gap: 0; min-height: min(100svh, 960px); padding-top: 160px; padding-bottom: 40px; } .tot__media { position: absolute; inset: 0; grid-area: auto; z-index: -1; min-height: 0; border-radius: 0; } .tot__media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgb(var(--shade) / 0.88) 0%, rgb(var(--shade) / 0.7) 32%, rgb(var(--shade) / 0.18) 62%, rgb(var(--shade) / 0.05) 100%), linear-gradient(180deg, rgb(var(--shade) / 0.35) 0%, rgb(var(--shade) / 0) 25%, rgb(var(--shade) / 0) 60%, rgb(var(--shade) / 0.75) 100%); } .tot__film { left: auto; right: calc(var(--gutter) + 56px); top: 40px; bottom: auto; background: rgb(var(--shade) / 0.5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .tot__pause { right: var(--gutter); top: 40px; bottom: auto; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .tot__title { font-size: clamp(48px, 5vw, 80px); } .tot__lead { align-self: start; color: rgb(246 245 241 / 0.88); max-width: 540px; } .tot__how { grid-area: how; display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0 0 24px; padding: 0; } .tot__how li { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px 0 12px; border-radius: 999px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: #F6F5F1; background: rgb(246 245 241 / 0.1); border: 1px solid rgb(246 245 241 / 0.22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .tot__how li::before { content: ""; width: 12px; height: 12px; background: var(--brand); clip-path: polygon(0 100%, 0 66.6%, 33.3% 66.6%, 33.3% 33.3%, 66.6% 33.3%, 66.6% 0, 100% 0, 100% 100%); } .tot__visit { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; padding: 20px 20px 20px 28px; border-radius: calc(var(--radius) * 2); background: rgb(var(--shade) / 0.5); border: 1px solid rgb(246 245 241 / 0.16); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); } .tot__places { display: flex; gap: 0; } .place { border: 0; border-radius: 0; padding: 4px 32px; color: #F6F5F1; } .place:first-child { padding-left: 0; } .place + .place { border-left: 1px solid rgb(246 245 241 / 0.2); } .place span { color: rgb(246 245 241 / 0.75); } .place__links a { color: #F6F5F1; } .tot__cta { flex-direction: row; align-items: center; gap: 20px; flex-wrap: nowrap; } .tot__cta p { order: -1; max-width: 150px; text-align: right; line-height: 1.5; color: rgb(246 245 241 / 0.7); } .tot__btn2 { color: #F6F5F1; border-color: rgb(246 245 241 / 0.5); } } @media (min-width: 961px) and (max-width: 1240px) { .tot__visit { flex-direction: column; align-items: stretch; } .tot__cta { justify-content: space-between; } .tot__cta p { order: 0; text-align: left; max-width: none; } } /* ---------- 7. Treden ---------- */ .step__line { display: none; } .steps { position: relative; background: var(--deep); color: var(--paper); padding: 120px var(--gutter); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: end; transition: background-color 300ms var(--ease); } .steps__intro { grid-column: 1 / span 2; grid-row: 1; align-self: start; display: flex; flex-direction: column; gap: 20px; max-width: 520px; } .steps__intro .label { color: var(--label-on-dark); } .steps__intro p { font-size: 16px; color: rgb(var(--on-dark) / 0.78); max-width: 420px; } .step { grid-row: 1; background: rgb(var(--on-dark) / var(--tint)); border-top: var(--step-border); border-radius: var(--radius) var(--radius) 0 0; padding: 28px; display: flex; flex-direction: column; gap: 12px; min-height: var(--h); position: relative; z-index: 1; } /* de treden stijgen steiler, zodat titel en intro vrij boven trede 1 en 2 liggen */ .step:nth-of-type(1) { grid-column: 1; --h: 210px; --tint: 0.06; } .step:nth-of-type(2) { grid-column: 2; --h: 310px; --tint: 0.12; } .step:nth-of-type(3) { grid-column: 3; --h: 460px; --tint: 0.2; } .step:nth-of-type(4) { grid-column: 4; --h: 610px; background: var(--step-last-bg); color: var(--step-last-fg); border-top: var(--step-last-border); } .step h3 { font-size: 22px; line-height: 1.2; font-weight: 500; text-transform: uppercase; } .step p { font-size: 15px; color: rgb(var(--on-dark) / 0.8); } .step:nth-of-type(4) p { color: inherit; } .stair rect { fill: rgb(var(--on-dark) / 0.22); } .stair rect.on { fill: var(--brand); } .step:nth-of-type(4) .stair rect { fill: var(--step-last-icon-off); } .step:nth-of-type(4) .stair rect.on { fill: var(--step-last-icon-on); } .steps::after { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 119px; height: 1px; background: rgb(var(--on-dark) / 0.35); } /* actie onderaan de trede, zoals de voet van een stap */ .step__link { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: inherit; border-bottom: 2px solid var(--brand); } .step__link .arrow { transition: transform 200ms var(--ease); } .step h3 { margin-top: 6px; } @media (hover: hover) { .step:not(:nth-of-type(4)) { transition: background-color 250ms var(--ease); } .step:not(:nth-of-type(4)):hover { background: rgb(var(--on-dark) / calc(var(--tint) + 0.06)); } .step__link:hover .arrow { transform: translate(2px, -2px); } } /* ---------- 8. Klantervaring ---------- */ .quote { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding: 140px var(--gutter); align-items: center; } .quote__body { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: 32px; } .quote__main > blockquote { font-family: var(--serif); font-style: italic; font-size: clamp(34px, 3.8vw, 54px); line-height: 1.1; } .quote__main { display: flex; flex-direction: column; gap: 24px; } .quote__main::before { content: "\201C"; order: 1; font-family: var(--serif); font-size: 120px; line-height: 0.6; height: 44px; color: var(--brand); } .quote__main > blockquote { order: 2; } .quote__main .quote__who { order: 3; } .proof__label, .proof__dots { display: none; } .quote__who { display: flex; align-items: center; gap: 16px; font-size: 15px; } .quote__who::before { content: ""; width: 32px; height: 2px; background: var(--brand); } .quote__pic > img { grid-column: 8 / span 5; width: 100%; aspect-ratio: 5 / 6; object-fit: cover; border-radius: var(--radius); } /* desktop: citaat breed naast een kleinere foto, reviews als kaarten over de volle breedte, award als eigen kaart */ @media (min-width: 961px) { .quote { row-gap: 72px; align-items: end; } .quote__body { display: contents; } .quote__main { grid-column: 1 / span 8; grid-row: 1; align-self: center; padding-right: 24px; } .quote__main > blockquote { font-size: clamp(38px, 4vw, 60px); line-height: 1.08; } .quote__pic > img { grid-column: 9 / span 4; grid-row: 1; aspect-ratio: 4 / 5; } .proof { grid-column: 1 / span 9; grid-row: 2; align-self: stretch; gap: 16px; margin: 0; padding: 0; border: 0; align-items: stretch; } .proof__item { background: var(--paper); border-radius: var(--radius); padding: 28px; gap: 14px; transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 300ms var(--ease); } .proof__item figcaption { margin-top: auto; display: flex; align-items: center; gap: 10px; padding-top: 8px; } .proof__item figcaption::before { content: ""; width: 20px; height: 2px; background: var(--brand); } .proof__stars { font-size: 13px; } .proof blockquote { font-size: 17px; line-height: 1.5; } @media (hover: hover) { .proof__item:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgb(0 0 0 / 0.25); } } .award { grid-column: 10 / span 3; grid-row: 2; align-self: stretch; max-width: none; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 28px; border-radius: var(--radius); background: var(--deep); color: rgb(246 245 241 / 0.85); font-size: 15px; line-height: 1.45; } .award img { width: 72px; height: 72px; } } @media (prefers-reduced-motion: reduce) { .proof__item { transition: none; } } /* ---------- 11. Footer ---------- */ /* desktop: grote openingszin, contact als lijst, toonzalen en links ernaast, woordmerk over de volle breedte */ /* ---------- 12. Themaschakelaar (enkel voor de preview) ---------- */ .preview-bar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 50; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: max-content; max-width: calc(100vw - 24px); } .theme-switch { display: flex; gap: 2px; padding: 4px; background: rgb(20 20 20 / 0.82); backdrop-filter: blur(8px); border-radius: 999px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 6px 24px rgb(0 0 0 / 0.2); } .theme-switch button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer; background: transparent; color: #F6F5F1; font: inherit; letter-spacing: inherit; text-transform: inherit; display: inline-flex; align-items: center; gap: 8px; } .theme-switch button[aria-pressed="true"] { background: #F6F5F1; color: #141414; } .preview-bar__toggle { display: none; } @media (max-width: 960px) { /* op gsm en tablet ingeklapt achter één knop, zodat de balk de pagina niet bedekt */ .preview-bar { top: auto !important; bottom: 88px; left: auto; right: 12px; transform: none; flex-direction: column; align-items: flex-end; width: auto; } .preview-bar__toggle { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: rgb(20 20 20 / 0.82); color: #F6F5F1; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 6px 24px rgb(0 0 0 / 0.2); cursor: pointer; order: 2; } .preview-bar .theme-switch { display: none; } .preview-bar.is-open .theme-switch { display: flex; } } /* ---------- 12b. Herofoto 'raam' (zelfde donkere stijl als de andere hero's) ---------- */ .hero__pic--raam, .logo--normaal { display: none; } /* de persoon en de trap staan rechts van het midden: tekst links blijft vrij */ /* lichte foto: iets sterkere laag zodat witte tekst en nav leesbaar blijven */ /* ---------- 12b0. Herofoto 'hal' (hoge hal, trap in het midden, tuin rechts) ---------- */ .hero__pic--hal { display: none; } /* lichte bovenkant (dakraam): sterkere laag achter de navigatie; links onder rust achter de titel */ /* ---------- 12b2. Herofoto 'inkom' (lichte inkomhal, eiken trap rechts) ---------- */ .hero__pic--inkom { display: none; } [data-hero="inkom"] .hero__img--latten { display: none; } [data-hero="inkom"] .hero__pic--inkom { display: block; } [data-hero="inkom"] .hero__img--inkom { object-position: 60% 55%; } /* heel lichte foto: duidelijke laag links en onder voor de titel, bovenaan voor de navigatie; de trap rechts blijft helder */ [data-hero="inkom"] .hero::before { background: linear-gradient(90deg, rgb(var(--shade) / 0.72) 0%, rgb(var(--shade) / 0.55) 32%, rgb(var(--shade) / 0.15) 58%, rgb(var(--shade) / 0) 72%), linear-gradient(180deg, rgb(var(--shade) / 0.5) 0%, rgb(var(--shade) / 0.08) 22%, rgb(var(--shade) / 0.05) 45%, rgb(var(--shade) / 0.6) 100%); } @media (max-width: 960px) { [data-hero="inkom"] .hero__img--inkom { object-position: 66% 50%; } [data-hero="inkom"] .hero::before { background: linear-gradient(180deg, rgb(var(--shade) / 0.55) 0%, rgb(var(--shade) / 0.2) 22%, rgb(var(--shade) / 0.62) 42%, rgb(var(--shade) / 0.9) 100%); } } /* tekst op elke herofoto: een zachte schaduw houdt de letters los van drukke details */ .hero h1, .hero__sub { text-shadow: 0 1px 2px rgb(0 0 0 / 0.25), 0 4px 28px rgb(0 0 0 / 0.35); } /* ---------- 12b1. Herofoto 'zon' (warm zonlicht, trap rechts, rust links voor de titel) ---------- */ .hero__pic--zon { display: none; } [data-hero="zon"] .hero::before { background: linear-gradient(90deg, rgb(var(--shade) / 0.66) 0%, rgb(var(--shade) / 0.5) 30%, rgb(var(--shade) / 0.15) 55%, rgb(var(--shade) / 0) 72%), linear-gradient(180deg, rgb(var(--shade) / 0.5) 0%, rgb(var(--shade) / 0.08) 22%, rgb(var(--shade) / 0.05) 42%, rgb(var(--shade) / 0.55) 100%); } @media (max-width: 960px) { [data-hero="zon"] .hero::before { background: linear-gradient(180deg, rgb(var(--shade) / 0.5) 0%, rgb(var(--shade) / 0.15) 22%, rgb(var(--shade) / 0.58) 42%, rgb(var(--shade) / 0.86) 100%); } } /* ---------- 12b2. Herofoto 'reeks' (diavoorstelling) ---------- */ .hero__reeks, .hero__reeks-ctrl { display: none; } .hero__slide { position: absolute; inset: 0; opacity: 0; z-index: 0; transition: opacity 2200ms cubic-bezier(0.45, 0, 0.55, 1); } /* de vorige foto blijft volledig zichtbaar onder de nieuwe tot die helemaal ingefaded is: geen donkere dip */ .hero__slide.is-leaving { opacity: 1; z-index: 1; transition: none; } .hero__slide.is-active { opacity: 1; z-index: 2; } .hero__slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.07); } /* de zoom loopt door tijdens het wegfaden, zodat de beweging nooit stokt */ .hero__slide.is-active img, .hero__slide.is-leaving img { transform: scale(1); transition: transform 11000ms cubic-bezier(0.25, 0.1, 0.25, 1); } /* iets sterkere laag: witte tekst moet op elke foto leesbaar blijven, ook de lichte */ .hero__bars { display: flex; gap: 6px; } .hero__bars span { width: 28px; height: 2px; background: rgb(246 245 241 / 0.35); position: relative; overflow: hidden; } .hero__bars span::after { content: ""; position: absolute; inset: 0; background: var(--brand); transform: scaleX(0); transform-origin: left; } .hero__bars span.is-done::after { transform: scaleX(1); } .hero__bars span.is-active::after { animation: reeks-bar var(--reeks-duur, 6500ms) linear forwards; } .hero__reeks-ctrl.is-paused .hero__bars span.is-active::after { animation-play-state: paused; } @keyframes reeks-bar { to { transform: scaleX(1); } } .hero__pause { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 999px; background: rgb(var(--shade) / 0.35); border: 1px solid rgb(246 245 241 / 0.5); color: #F6F5F1; cursor: pointer; } .hero__pause .i-play { display: none; } .hero__pause[aria-pressed="true"] .i-play { display: block; } .hero__pause[aria-pressed="true"] .i-pause { display: none; } @media (prefers-reduced-motion: reduce) { .hero__slide img, .hero__slide.is-active img, .hero__slide.is-leaving img { transform: none; transition: none; } } @media (min-width: 961px) { .steps--scrub { min-height: 100vh; } } /* ---------- 12c. Megamenu (desktop) ---------- */ .nav { position: relative; z-index: 30; transition: background-color 200ms var(--ease), color 200ms var(--ease); } /* open megamenu: de balk wordt effen, logo en tekst in inkt */ .hero.is-mega { z-index: 25; } /* de hero zelf ook dimmen onder het paneel, zoals de rest van de pagina (scrim) */ .hero::after { content: ""; position: absolute; inset: 0; z-index: 28; background: rgb(var(--shade) / 0.28); opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease); } .hero.is-mega::after { opacity: 1; pointer-events: auto; } /* boven de scrim (20), zodat menu en balk bedienbaar blijven */ .hero.is-mega .nav { background: var(--paper); color: var(--ink); } .hero.is-mega .logo--licht { display: none; } .hero.is-mega .logo--normaal { display: block; } .hero.is-mega .nav__offerte { background: transparent; color: var(--ink); border-color: var(--line); } @media (hover: hover) { .hero.is-mega .nav__offerte:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } } .mega { position: absolute; left: 0; right: 0; top: var(--nav-h, 131px); z-index: 29; border-top: 1px solid var(--line); } .mega__inner { background: var(--paper); color: var(--ink); box-shadow: 0 24px 48px -12px rgb(0 0 0 / 0.18); padding: 40px var(--gutter) 48px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: 40px; animation: mega-in 560ms cubic-bezier(0.22, 1, 0.36, 1); } /* opent als een cirkel vanuit het menu-onderdeel, zoals het mobiele menu vanuit de knop */ @keyframes mega-in { from { clip-path: circle(0 at var(--mega-x, 50%) 0); } to { clip-path: circle(150% at var(--mega-x, 50%) 0); } } /* sluiten: cirkel krimpt terug naar het menu-onderdeel, inhoud vervaagt iets sneller */ .hero.is-mega-closing .mega__inner { animation: mega-out 420ms cubic-bezier(0.64, 0, 0.78, 0) forwards; pointer-events: none; } .hero.is-mega-closing .mega__inner > * { animation: mega-fade 200ms var(--ease) forwards; } .hero.is-mega-closing::after { opacity: 0; } @keyframes mega-out { from { clip-path: circle(100% at var(--mega-x, 50%) 0); } to { clip-path: circle(0 at var(--mega-x, 50%) 0); } } @keyframes mega-fade { to { opacity: 0; transform: translateY(-8px); } } /* wisselen tussen twee open panelen: zonder infade, anders schemert de pagina er even door */ .hero.is-mega-switch .mega__inner { animation: none; } /* inhoud komt gelaagd binnen: kolommen en foto's een voor een, zoals treden */ .mega__inner > *, .mega__thumbs li { animation: mega-rise 520ms cubic-bezier(0.22, 1, 0.36, 1) backwards; } .mega__inner > * { animation-delay: calc(70ms + var(--i, 0) * 70ms); } .mega__inner > :nth-child(2) { --i: 1; } .mega__inner > :nth-child(3) { --i: 2; } .mega__thumbs li { animation-delay: calc(110ms + var(--j, 0) * 45ms); } .mega__thumbs li:nth-child(2) { --j: 1; } .mega__thumbs li:nth-child(3) { --j: 2; } .mega__thumbs li:nth-child(4) { --j: 3; } .mega__thumbs li:nth-child(5) { --j: 4; } .mega__thumbs li:nth-child(6) { --j: 5; } .mega__thumbs li:nth-child(n+7) { --j: 6; } .mega-panel img { animation: mega-zoom 1100ms cubic-bezier(0.22, 1, 0.36, 1) backwards; } @keyframes mega-rise { from { opacity: 0; transform: translateY(14px); } } @keyframes mega-zoom { from { transform: scale(1.1); } } /* wisselen: de inhoud schuift mee in de richting waarin je over het menu beweegt */ .hero.is-mega-switch .mega__inner > *, .hero.is-mega-switch .mega__thumbs li { animation-name: mega-swap; animation-duration: 380ms; } .hero.is-mega-switch .mega__inner > * { animation-delay: calc(var(--i, 0) * 40ms); } .hero.is-mega-switch .mega__thumbs li { animation-delay: calc(30ms + var(--j, 0) * 25ms); } .hero.is-mega-switch .mega-panel img { animation: none; } @keyframes mega-swap { from { opacity: 0; transform: translateX(calc(var(--mega-dir, 1) * 24px)); } } /* één lijn in logogroen die onder het menu meeglijdt */ .nav__menu { position: relative; } .nav__ink { position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--brand); opacity: 0; pointer-events: none; transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), width 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms var(--ease); } .nav__ink.is-on { opacity: 1; } .nav__ink.is-jump { transition: opacity 180ms var(--ease); } .nav__menu.has-ink a, .nav__menu.has-ink .nav__trigger { border-bottom-color: transparent !important; } @media (prefers-reduced-motion: reduce) { .mega__inner, .mega__inner > *, .mega__thumbs li, .mega-panel img { animation: none !important; } .nav__ink { transition: opacity 120ms linear; } } .mega .label, .mnav .label { margin-bottom: 20px; } .mega__thumbs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .mega__thumbs a { display: flex; align-items: center; gap: 16px; padding: 6px 0; text-decoration: none; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.04em; text-transform: uppercase; } .mega__thumbs img { width: 72px; height: 54px; object-fit: cover; border-radius: var(--radius); flex: none; } .mega__thumbs span { border-bottom: 1px solid transparent; transition: border-color 150ms var(--ease); } /* desktop: grote rijen met lijnen en pijltje, zoals het mobiele menu */ .mega .mega__thumbs { gap: 0; border-top: 1px solid var(--line); } .mega .mega__thumbs li { border-bottom: 1px solid var(--line); } .mega .mega__thumbs a { min-height: 64px; padding: 7px 4px 7px 0; gap: 18px; font-size: 19px; letter-spacing: 0.01em; transition: color 200ms var(--ease); } .mega .mega__thumbs img { width: 64px; height: 48px; transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1); } .mega .mega__thumbs span { border: 0; transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1); } .mega .mega__thumbs a::after { content: ""; flex: none; margin-left: auto; width: 8px; height: 8px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.45; transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms var(--ease), border-color 200ms var(--ease); } @media (hover: hover) { .mega .mega__thumbs a:hover span { transform: translateX(4px); } .mega .mega__thumbs a:hover img { transform: scale(1.06); } .mega .mega__thumbs a:hover::after { opacity: 1; border-color: var(--brand); transform: translateX(4px) rotate(45deg); } } .mega .mega__thumbs a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .mega__alle { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; min-height: 44px; font-size: 14px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid var(--brand); } .mega__info { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 15px; } .mega__info a { text-decoration: none; border-bottom: 1px solid transparent; } @media (hover: hover) { .mega__thumbs a:hover span, .mega__info a:hover { border-bottom-color: var(--brand); } .mega__alle:hover { color: var(--deep); } } .mega-panel { position: relative; display: block; border-radius: var(--radius); overflow: hidden; color: #F6F5F1; text-decoration: none; min-height: 420px; isolation: isolate; } .mega-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 600ms var(--ease); } .mega-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(var(--shade) / 0) 35%, rgb(var(--shade) / 0.78) 100%); } .mega-panel__body { position: absolute; left: 24px; right: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 8px; } .mega-panel__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(246 245 241 / 0.85); } .mega-panel__eyebrow::before { content: ""; width: 12px; height: 12px; background: var(--brand); clip-path: polygon(0 100%, 0 66%, 33% 66%, 33% 33%, 66% 33%, 66% 0, 100% 0, 100% 100%); } .mega-panel__title { font-size: 26px; line-height: 1.1; font-weight: 500; text-transform: uppercase; } .mega-panel__text { font-size: 15px; line-height: 1.5; color: rgb(246 245 241 / 0.85); max-width: 340px; } .mega-panel__cta { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; margin-top: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--radius); background: var(--card-btn-bg); color: var(--card-btn-fg); font-size: 14px; font-weight: 600; } @media (hover: hover) { .mega-panel:hover img { transform: scale(1.03); } } .mega-scrim { position: fixed; inset: 0; z-index: 20; background: rgb(var(--shade) / 0.28); opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease); } .mega-scrim.is-on { opacity: 1; pointer-events: auto; } /* ---------- 12c-bis. Megamenu 'tekst' (enkel preview) ---------- Zonder kleine foto's en zonder hoofdletters, naar de Mega Navigation van Osmo: één vlak dat in hoogte meegroeit, kolommen met lijnen, inhoud schuift mee in de richting van de muis (GSAP in main.js). */ .mega-wrap { display: contents; } /* laatste kolom: getint vlak met de toonzaalkaart, foto boven en tekst eronder */ /* balk en mobiel menu: ook geen hoofdletters */ /* ---------- 12c-ter. Megamenu 'groot' (enkel preview) ---------- Huidig design en animatie, maar enkel tekst: producten groot, de rest klein (naar het menu van Apple). Geen lijnen, geen hoofdletters. */ [data-menu="groot"] .mega__thumbs img { display: none; } [data-menu="groot"] .mega .label, [data-menu="groot"] .mnav .label, [data-menu="groot"] .mnav__back { font-family: var(--font); font-size: 13px; letter-spacing: 0; text-transform: none; } [data-menu="groot"] .mega .label { margin-bottom: 16px; } [data-menu="groot"] .mega .mega__thumbs { gap: 4px; border-top: 0; } [data-menu="groot"] .mega .mega__thumbs li { border-bottom: 0; } [data-menu="groot"] .mega__thumbs a, [data-menu="groot"] .mega .mega__thumbs a { min-height: 0; padding: 4px 0; gap: 0; font-size: clamp(18px, 1.45vw, 22px); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; text-transform: none; /* Fedra kent enkel 400 en 700 */ } [data-menu="groot"] .mega .mega__thumbs a::after { display: none; } @media (hover: hover) { [data-menu="groot"] .mega .mega__thumbs a:hover { color: var(--muted); } } [data-menu="groot"] .mega__info { gap: 10px; } [data-menu="groot"] .mega__info a { font-size: 14px; font-weight: 500; } [data-menu="groot"] .mega__alle { margin-top: 28px; font-size: 14px; letter-spacing: 0; text-transform: none; } [data-menu="groot"] .mega-panel__eyebrow { font-family: var(--font); font-size: 13px; letter-spacing: 0; text-transform: none; } [data-menu="groot"] .mega-panel__title { text-transform: none; letter-spacing: -0.01em; } /* balk en mobiel menu: ook geen hoofdletters */ [data-menu="groot"] .nav__menu a, [data-menu="groot"] .nav__trigger { font-size: 15px; letter-spacing: 0; text-transform: none; } [data-menu="groot"] .mnav__root a, [data-menu="groot"] .mnav__root button { text-transform: none; letter-spacing: -0.01em; } [data-menu="groot"] .mnav .mega__thumbs a { padding: 4px 0; font-size: 20px; } [data-menu="groot"] .mnav .mega__thumbs { gap: 2px; } /* smallere desktops: kaart minder hoog, kolommen dichter bij elkaar */ @media (max-width: 1200px) { [data-menu="groot"] .mega__inner { gap: 28px; padding-top: 32px; padding-bottom: 36px; } [data-menu="groot"] .mega .mega-panel { min-height: 340px; } [data-menu="groot"] .mega-panel__body { left: 20px; right: 20px; bottom: 20px; gap: 6px; } [data-menu="groot"] .mega-panel__title { font-size: 21px; } [data-menu="groot"] .mega-panel__text { font-size: 14px; } } /* ---------- 12d. Mobiel menu (doorklikpanelen) ---------- */ .mnav { position: fixed; inset: 0; z-index: 60; background: var(--bg); color: var(--ink); overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--gutter) 40px; clip-path: circle(26px at var(--mx, calc(100% - 46px)) var(--my, 54px)); transition: clip-path 620ms cubic-bezier(0.76, 0, 0.24, 1); } .mnav.is-open { clip-path: circle(150vmax at var(--mx, calc(100% - 46px)) var(--my, 54px)); } .burger { position: relative; display: block; width: 20px; height: 10px; } .burger > span { position: absolute; left: 0; right: 0; height: 1.75px; border-radius: 2px; background: currentColor; transition: transform 420ms cubic-bezier(0.76, 0, 0.24, 1); } .burger > span:first-child { top: 0; } .burger > span:last-child { bottom: 0; } /* in het open menu draaien de twee lijnen tot een kruisje, op dezelfde plek als de menuknop */ .mnav.is-open .mnav__close .burger > span:first-child { transform: translateY(4.1px) rotate(45deg); transition-delay: 160ms; } .mnav.is-open .mnav__close .burger > span:last-child { transform: translateY(-4.1px) rotate(-45deg); transition-delay: 160ms; } /* items schuiven gestaffeld in */ .mnav [data-view="root"] > * > li, .mnav [data-view="root"] > .mnav__ctas, .mnav [data-view="root"] > .mnav__meta, .mnav__bar img { opacity: 0; transform: translateY(18px); transition: opacity 380ms var(--ease), transform 520ms var(--ease); } .mnav.is-open [data-view="root"] > * > li, .mnav.is-open [data-view="root"] > .mnav__ctas, .mnav.is-open [data-view="root"] > .mnav__meta, .mnav.is-open .mnav__bar img { opacity: 1; transform: none; transition-delay: calc(220ms + var(--d, 0) * 45ms); } .mnav__root li:nth-child(1) { --d: 0; } .mnav__root li:nth-child(2) { --d: 1; } .mnav__root li:nth-child(3) { --d: 2; } .mnav__root li:nth-child(4) { --d: 3; } .mnav__root li:nth-child(5) { --d: 4; } .mnav__root li:nth-child(6) { --d: 5; } .mnav .mnav__ctas { --d: 7; } .mnav .mnav__meta { --d: 8; } @media (prefers-reduced-motion: reduce) { .mnav, .mnav.is-open { clip-path: none; transition: opacity 1ms; } .mnav [data-view="root"] > * > li, .mnav [data-view="root"] > .mnav__ctas, .mnav [data-view="root"] > .mnav__meta, .mnav__bar img { opacity: 1; transform: none; } } .mnav[hidden] { display: none; } .mnav__bar { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; padding: 28px 0 20px; background: var(--bg); } .mnav__bar img { width: 52px; height: auto; } .mnav__close { width: 52px; height: 52px; display: grid; place-items: center; background: rgb(var(--shade) / 0.06); border: 0; border-radius: 999px; color: var(--ink); cursor: pointer; } .mnav__view { animation: mnav-in 260ms var(--ease); } @keyframes mnav-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } } .mnav__root { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--line); } .mnav__root li { border-bottom: 1px solid var(--line); } .mnav__root a, .mnav__root button { display: flex; width: 100%; justify-content: space-between; align-items: center; min-height: 64px; background: none; border: 0; padding: 0; color: inherit; font-family: inherit; font-size: 26px; font-weight: 500; text-transform: uppercase; text-decoration: none; text-align: left; cursor: pointer; } .mnav__ctas { display: flex; flex-direction: column; gap: 10px; margin-top: 32px; } .mnav__ctas .btn { justify-content: space-between; min-height: 52px; } .mnav__ctas .btn--dark { background: var(--hero-btn-bg); color: var(--hero-btn-fg); } .mnav__meta { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 15px; color: var(--muted); } .mnav__meta a { text-decoration: none; } .mnav__back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 8px 0 24px; background: none; border: 0; padding: 0; color: var(--muted); font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; } .mnav .mega__thumbs a { font-size: 15px; } .mnav .mega__thumbs img { width: 56px; height: 42px; } .mnav .mega__info { margin-bottom: 8px; } .mnav .label { margin-top: 28px; } .mnav .mnav__back + .label { margin-top: 0; } .mega-panel--mobile { min-height: 300px; margin-top: 32px; } @media (max-width: 960px) { .mega, .mega-scrim { display: none; } } /* ---------- 12e. Vaste CTA-balk (mobiel) ---------- */ .mbar { display: none; } @media (max-width: 960px) { .mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgb(var(--bg-rgb) / 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform 280ms var(--ease); } .mbar.is-on { transform: none; } .mbar .btn { justify-content: center; min-height: 48px; font-weight: 600; font-size: 14px; } .mbar__offerte { background: var(--hero-btn-bg); color: var(--hero-btn-fg); } .mbar__bezoek { color: var(--ink); } } /* ---------- 13. Beweging ---------- */ .js .reveal:not(.is-in) { opacity: 0; transform: translateY(10px); } .reveal { transition: opacity 500ms var(--ease), transform 500ms var(--ease); } /* zonder JS altijd zichtbaar */ .reveal.is-in { opacity: 1; transform: none; } /* treden rijzen één voor één uit de vloerlijn */ .js .step { transform: scaleY(0); transform-origin: bottom; transition: transform 700ms var(--ease); } .js .step > * { opacity: 0; transition: opacity 400ms var(--ease); } .js .steps.is-in .step { transform: none; } .js .steps.is-in .step > * { opacity: 1; } .js .steps.is-in .step:nth-of-type(2) { transition-delay: 90ms; } .js .steps.is-in .step:nth-of-type(3) { transition-delay: 180ms; } .js .steps.is-in .step:nth-of-type(4) { transition-delay: 270ms; } .js .steps.is-in .step:nth-of-type(1) > * { transition-delay: 450ms; } .js .steps.is-in .step:nth-of-type(2) > * { transition-delay: 540ms; } .js .steps.is-in .step:nth-of-type(3) > * { transition-delay: 630ms; } .js .steps.is-in .step:nth-of-type(4) > * { transition-delay: 720ms; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 1ms !important; transition-delay: 0ms !important; } .reveal, .js .step, .js .step > * { opacity: 1; transform: none; } } /* treden die meegroeien met scrollen (GSAP ScrollTrigger): GSAP stuurt transform en opacity zelf */ .steps--scrub .step, .steps--scrub .step > * { transition: none !important; } .steps--scrub .step { will-change: transform; } /* ---------- 14. Tablet en mobiel ---------- */ @media (max-width: 1240px) { .nav__menu { gap: 22px; } .nav__menu a, .nav__trigger { font-size: 13px; } .nav { gap: 20px; } .steps__intro { grid-column: 1 / -1; grid-row: 1; margin-bottom: 40px; } .step { grid-row: 2; } .step:nth-of-type(1) { --h: 250px; } .step:nth-of-type(2) { --h: 310px; } .step:nth-of-type(3) { --h: 370px; } .step:nth-of-type(4) { --h: 430px; } .step { padding: 24px; } .step h3 { font-size: 19px; } } @media (max-width: 960px) { .nav__menu, .nav__ctas { display: none; } .nav__toggle { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; background: rgb(246 245 241 / 0.16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 0; border-radius: 999px; color: #F6F5F1; cursor: pointer; transition: transform 200ms var(--ease), background-color 200ms var(--ease); } .nav__toggle:active { transform: scale(0.94); } .split, .quote { grid-template-columns: minmax(0, 1fr); row-gap: 40px; padding-block: 88px; } .split__img, .split__body, .quote__body, .quote__pic > img { grid-column: 1; } .proof { grid-template-columns: 1fr; } .collections { padding-bottom: 88px; } .collections__head { flex-direction: column; align-items: flex-start; gap: 12px; } /* mobiel: stapelkaarten. Elke kaart kleeft even en de volgende schuift eroverheen. */ .acc { display: block; height: auto; } .acc__more > *, .acc__item .acc__more > * { opacity: 1; transform: none; transition: none; } .acc__item::after { display: none; } /* mobiel: geen modellabels (de beschrijving noemt de modellen al), wel het trapje voor de titel */ .acc__tags { display: none; } .acc__item .acc__title { display: flex; align-items: center; gap: 12px; } .acc__item .acc__title::before { content: ""; flex: none; width: 16px; height: 16px; background: var(--brand); clip-path: polygon(0 100%, 0 66.6%, 33.3% 66.6%, 33.3% 33.3%, 66.6% 33.3%, 66.6% 0, 100% 0, 100% 100%); } .acc__more { gap: 14px; } .acc__item, .acc__item.is-open { position: sticky; top: calc(84px + var(--i, 0) * 14px); height: min(520px, 68svh); margin-bottom: 20px; transform-origin: 50% 0; will-change: transform; box-shadow: 0 -12px 30px -18px rgb(0 0 0 / 0.35); } .acc__item:nth-child(1) { --i: 0; } .acc__item:nth-child(2) { --i: 1; } .acc__item:nth-child(3) { --i: 2; } .acc__item:nth-child(4) { --i: 3; } .acc__item:not(.is-open)::before { background-color: transparent; } .acc__item .acc__img img { transform: none; } .acc__item:not(.is-open) .acc__title { position: static; writing-mode: horizontal-tb; transform: none; font-size: 30px; } .acc__item .acc__title { font-size: 30px; } .acc__item:not(.is-open) .acc__body { padding: 22px; height: auto; justify-content: flex-end; } .acc__item .acc__more, .acc__item.is-open .acc__more { max-height: none; opacity: 1; transition: none; } .acc__body { padding: 22px; } .acc__shade { position: absolute; inset: 0; z-index: 0; background: rgb(var(--shade) / 1); opacity: 0; pointer-events: none; } .tot { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "lead" "how" "visit"; grid-template-rows: auto; min-height: 0; padding: 0 0 72px; row-gap: 36px; } .tot__media { grid-area: media; min-height: 0; border-radius: 0; aspect-ratio: 4 / 5; max-height: 86svh; width: 100%; } .tot__media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgb(var(--shade) / 0.25) 0%, rgb(var(--shade) / 0) 18%, rgb(var(--shade) / 0.1) 38%, rgb(var(--shade) / 0.7) 62%, rgb(var(--shade) / 0.94) 100%); } .tot__head { grid-area: media; align-self: end; z-index: 3; padding: 0 var(--gutter) 88px; gap: 14px; pointer-events: none; } .tot__title { font-size: clamp(34px, 9.5vw, 56px); } .tot__lead, .tot__visit { padding-inline: var(--gutter); } .tot__btns { flex-direction: row; flex-wrap: wrap; gap: 10px; } .tot__btns .btn { gap: 12px; padding: 0 20px; } .tot__film { top: 16px; bottom: auto; left: var(--gutter); font-size: 13px; } .tot__pause { top: 16px; bottom: auto; right: var(--gutter); } .tot__places { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* knoppen zo breed als hun tekst, naast elkaar: de vaste onderbalk heeft al brede knoppen */ .tot__cta { flex-direction: column; align-items: flex-start; gap: 14px; } .tot__cta p { text-align: left; } /* mobiel/tablet: veegbare portfolio-kaarten met de tekst op de foto */ .projects { padding-bottom: 88px; gap: 28px; } .projects__list { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; scroll-padding-inline: var(--gutter); scrollbar-width: none; } .projects__list::-webkit-scrollbar { display: none; } .project, .project--flip { flex: 0 0 84%; scroll-snap-align: start; position: relative; display: block; border-radius: var(--radius); overflow: hidden; isolation: isolate; color: #F6F5F1; } .project__main, .project--flip .project__main { margin: 0; } .project .project__main img { aspect-ratio: 4 / 5; border-radius: 0; } .project::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(var(--shade) / 0) 45%, rgb(var(--shade) / 0.82) 100%); pointer-events: none; } .project .project__detail { display: none; } .project__txt, .project--flip .project__txt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 22px; gap: 6px; } .project__txt h3 { font-size: 34px; } /* de projectindex van desktop mag niet doorlekken in de veegkaarten: alle kaarten tonen foto en tekst */ .project .project__txt, .project.is-active .project__txt { display: flex; flex-direction: column; border: 0; cursor: auto; } .project .project__txt::before, .project .project__txt::after { display: none; } .project .project__txt h3, .project.is-active .project__txt h3 { color: #F6F5F1; transform: none; } .project .project__txt p, .project.is-active .project__txt p { max-height: none; opacity: 1; color: rgb(246 245 241 / 0.88); font-size: 15px; max-width: none; } .project .project__main, .project.is-active .project__main { opacity: 1; } .project .project__main img { transform: none; } .projects__dots { display: flex; justify-content: center; gap: 8px; margin-top: -8px; } .projects__dots span { width: 6px; height: 6px; border-radius: 999px; background: var(--line); transition: width 250ms var(--ease), background-color 250ms var(--ease); } .projects__dots span.is-on { width: 20px; background: var(--ink); } /* knop zo breed als zijn tekst: de vaste onderbalk neemt de brede knop over bij het scrollen */ .hero__actions { flex-direction: column; align-items: flex-start; gap: 18px; } .hero__cta { gap: 14px; padding: 0 22px; } .steps { grid-template-columns: 1fr; padding-block: 88px; gap: 10px; } .steps__intro { grid-column: 1; grid-row: auto; margin-bottom: 28px; } /* mobiel: verticale traplijn met het logotrapje als markering per stap */ .step, .step:nth-of-type(n) { grid-column: 1 !important; grid-row: auto; min-height: 0; background: transparent; border-top: 0; border-radius: 0; color: var(--paper); padding: 0 0 36px 56px; position: relative; } .step .stair { position: absolute; left: 0; top: 0; } .step h3, .step:nth-of-type(4) h3 { padding-top: 2px; } .step p, .step:nth-of-type(4) p { color: rgb(var(--on-dark) / 0.78); } .step:nth-of-type(4) h3 { color: var(--brand); } .step:nth-of-type(4) { padding-bottom: 0; } .step .stair rect, .step:nth-of-type(4) .stair rect { fill: rgb(var(--on-dark) / 0.22); } .step .stair rect.on, .step:nth-of-type(4) .stair rect.on { fill: var(--brand); } /* lijnstuk van dit trapje naar het volgende; de lime vulling groeit mee met de scroll */ .step__line { display: block; position: absolute; left: 15px; top: 34px; bottom: 6px; width: 2px; background: rgb(var(--on-dark) / 0.18); } .step__line > span { position: absolute; inset: 0; background: var(--brand); transform-origin: top; transform: scaleY(1); } .steps::after { display: none; } .js .step, .js .steps.is-in .step { transform: none; } } @media (max-width: 520px) { .hero__content { padding-bottom: calc(56px + env(safe-area-inset-bottom)); } .theme-switch button { padding: 0 12px; white-space: nowrap; } } /* ---------- 15. Mobiel verfijnd (≤ 600 px) ---------- */ @media (max-width: 600px) { body { font-size: 16px; } .h2 { font-size: 30px; } .label { font-size: 12px; } /* hero: rustiger label, kop die niet tegen de rand loopt */ .hero h1 { font-size: clamp(34px, 10.4vw, 44px); } .hero__sub { font-size: 15px; } .hero__content { gap: 18px; } /* USP's: één compacte regel, geen lijst */ /* USP's: drie gelijke kolommen, elk met een trapje in logogroen */ /* USP's: drie gelijke, gecentreerde vakken met een trapje dat bij het laden een voor een opkomt */ .usp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 0; font-size: 14px; line-height: 1.3; letter-spacing: -0.005em; } .usp li { flex-direction: column; align-items: center; justify-content: flex-start; gap: 12px; padding: 26px 18px 24px; text-align: center; text-wrap: balance; } .usp li + li { border-left: 1px solid var(--line); } .usp li::before { width: 20px; height: 20px; transform-origin: 50% 100%; animation: usp-trede 700ms cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: calc(300ms + var(--i, 0) * 120ms); } .usp li:nth-child(2) { --i: 1; } .usp li:nth-child(3) { --i: 2; } @keyframes usp-trede { from { transform: scaleY(0); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .usp li::before { animation: none; } } /* over Decotrap: liggend beeld, één alinea */ .split { padding-block: 72px; row-gap: 32px; } .split__img { aspect-ratio: 4 / 3; } .split__body { gap: 20px; } .split__body .extra { display: none; } /* collecties: veegbare rij met een stukje van de volgende kaart in beeld */ /* treden: compacter */ .steps { padding-block: 72px; } .steps__intro { margin-bottom: 20px; } .step, .step:nth-of-type(n) { padding: 0 0 32px 52px; gap: 6px; } .step:nth-of-type(4) { padding-bottom: 0; } .step h3 { font-size: 18px; } .step p { font-size: 14px; } /* klantervaring: foto over de volle breedte, quote als kaart die over de foto schuift, reviews veegbaar */ .quote { padding: 0 0 72px; row-gap: 0; grid-template-columns: minmax(0, 1fr); } .quote__pic > img { order: -1; aspect-ratio: 4 / 5; border-radius: 0; width: 100%; } .quote__body { min-width: 0; gap: 0; } .quote__main { position: relative; z-index: 1; margin: -112px 16px 0; padding: 30px 24px 26px; background: var(--paper); border-radius: var(--radius); box-shadow: 0 24px 40px -24px rgb(0 0 0 / 0.35); gap: 16px; } .quote__main::before { font-size: 96px; height: 36px; } .quote__main > blockquote { font-size: 26px; line-height: 1.15; } .proof__label { display: block; margin: 48px var(--gutter) 0; } .proof { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0; padding: 16px var(--gutter) 4px; scroll-padding-inline: var(--gutter); scrollbar-width: none; border-top: 0; } .proof::-webkit-scrollbar { display: none; } .proof__item { flex: 0 0 84%; scroll-snap-align: start; background: var(--paper); border-radius: var(--radius); padding: 22px 20px; gap: 12px; } .proof blockquote { font-size: 16px; line-height: 1.55; } .proof__dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; } .proof__dots span { width: 6px; height: 6px; border-radius: 999px; background: var(--line); transition: width 250ms var(--ease), background-color 250ms var(--ease); } .proof__dots span.is-on { width: 20px; background: var(--ink); } .award { margin: 36px var(--gutter) 0; padding-top: 24px; border-top: 1px solid var(--line); max-width: none; font-size: 13px; } .award img { width: 48px; height: 48px; } /* Trap-o-theek: video over de volle breedte */ /* CTA en footer */ } /* ---------- Tablet (601–960): projecten compacter, reviews als drie kaarten ---------- */ @media (min-width: 601px) and (max-width: 960px) { .project, .project--flip { flex-basis: 58%; } .proof { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; border-top: 0; padding-top: 0; } .proof__item { background: var(--paper); border-radius: var(--radius); padding: 22px 20px; gap: 12px; } .proof__item figcaption { margin-top: auto; } .proof blockquote { font-size: 15px; } } /* ---------- Trap-o-theek op gsm en tablet ---------- */ @media (max-width: 960px) { .tot .label { text-wrap: balance; } /* drie stapjes als korte lijst met trapjes */ .tot__how { grid-area: how; display: flex; flex-direction: column; list-style: none; margin: -12px 0 0; padding: 0 var(--gutter); border-top: 0; } .tot__how li { display: flex; align-items: center; gap: 14px; min-height: 48px; border-bottom: 1px solid rgb(var(--on-dark) / 0.14); font-size: 15px; font-weight: 500; color: rgb(var(--on-dark) / 0.92); } .tot__how li:first-child { border-top: 1px solid rgb(var(--on-dark) / 0.14); } .tot__how li::before { content: ""; flex: none; width: 14px; height: 14px; background: var(--brand); clip-path: polygon(0 100%, 0 66.6%, 33.3% 66.6%, 33.3% 33.3%, 66.6% 33.3%, 66.6% 0, 100% 0, 100% 100%); } /* toonzalen onder elkaar, bellen en route als duidelijke knoppen */ .tot__places { grid-template-columns: minmax(0, 1fr); gap: 10px; } .place { padding: 18px 18px 16px; gap: 2px; background: rgb(var(--on-dark) / 0.05); } .place strong { font-size: 17px; } .place__links { gap: 8px; margin-top: 12px; } .place__links a { flex: 1; justify-content: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid rgb(var(--on-dark) / 0.3); text-decoration: none; font-size: 14px; } .place__links a.tel { flex: 1.4; } .place__links a::before { content: ""; width: 14px; height: 14px; flex: none; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; } .place__links a.tel::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z'/%3E%3C/svg%3E"); } .place__links a:not(.tel)::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.3 7 13 7 13s7-7.7 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E"); } } /* ---------- Navigatie op kleine laptops en iPad liggend (961–1100): alles op één regel ---------- */ @media (min-width: 961px) and (max-width: 1100px) { .nav { gap: 16px; } /* zijruimte volgt --gutter, zodat logo en inhoud uitlijnen */ .nav__logo img { width: 44px; } .nav__menu { gap: 18px; } .nav__menu a, .nav__trigger { font-size: 12.5px; letter-spacing: 0.04em; } .nav__link { display: none; } .nav__offerte { padding-inline: 16px; min-height: 44px; font-size: 14px; } } /* hero-label: evenwichtig afbreken, geen los woord op de tweede regel */ /* ---------- Realisaties desktop: strakke compositie ---------- */ /* grote foto en detail naast elkaar, even hoog; de drie projectrijen verdelen zich over dezelfde hoogte */ @media (min-width: 961px) { .projects__list { grid-template-rows: repeat(3, minmax(0, 1fr)); height: clamp(480px, 42vw, 640px); } .project__txt { align-content: center; } .project .project__main { align-self: stretch; justify-self: start; width: calc(64% - 8px); height: 100%; } .project .project__main img { height: 100%; aspect-ratio: auto; } .project .project__detail { align-self: stretch; justify-self: end; width: calc(36% - 8px); height: 100%; margin: 0; overflow: hidden; border-radius: var(--radius); transform: translateY(16px); } .project .project__detail img { height: 100%; aspect-ratio: auto; border: 0; box-shadow: none; border-radius: 0; transform: scale(1.06); transition: transform 1400ms cubic-bezier(0.22, 1, 0.36, 1) 120ms; } .project.is-active .project__detail img { transform: none; } } /* ---------- Realisaties op gsm en tablet: kaart met foto boven en een lichte strook met detail en tekst eronder ---------- */ @media (max-width: 960px) { .project, .project--flip { display: grid; grid-template-columns: 90px minmax(0, 1fr); grid-template-areas: "main main" "detail txt"; column-gap: 14px; row-gap: 0; align-items: center; background: var(--paper); color: var(--ink); border-radius: var(--radius); overflow: hidden; } .project::after { display: none; } .project .project__main, .project--flip .project__main { grid-area: main; border-radius: 0; } .project .project__main img { aspect-ratio: 1 / 1; } .project .project__detail, .project--flip .project__detail { display: block; grid-area: detail; width: 76px; height: 76px; margin: 14px 0 14px 14px; border-radius: calc(var(--radius) * 0.75); overflow: hidden; } .project .project__detail img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border: 0; box-shadow: none; } .project .project__txt, .project--flip .project__txt, .project.is-active .project__txt { grid-area: txt; position: static; padding: 12px 16px 12px 0; gap: 4px; } .project .project__txt h3, .project.is-active .project__txt h3 { color: var(--ink); font-size: 26px; } .project .project__txt p, .project.is-active .project__txt p { color: var(--text); font-size: 14px; line-height: 1.4; } /* de desktopregels (rijen per project, verborgen detail) hier uitschakelen */ .projects .project .project__main { grid-area: main; align-self: stretch; } .projects .project .project__detail { grid-area: detail; align-self: center; justify-self: start; opacity: 1; transform: none; pointer-events: auto; } .projects .project .project__txt { grid-area: txt; border: 0; align-self: center; } } /* ---------- Preview-opties op gsm en tablet: één paneel dat binnen het scherm blijft ---------- */ @media (max-width: 960px) { .preview-bar { max-width: calc(100vw - 24px); } .preview-bar.is-open { gap: 10px; padding: 12px; border-radius: 22px; background: rgb(20 20 20 / 0.9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 16px 48px rgb(0 0 0 / 0.35); max-height: calc(100svh - 140px); overflow-y: auto; } .preview-bar.is-open .theme-switch { flex-wrap: wrap; justify-content: flex-end; max-width: 100%; box-sizing: border-box; background: rgb(246 245 241 / 0.08); border-radius: 18px; padding: 4px; box-shadow: none; } .preview-bar.is-open .theme-switch button { min-height: 38px; padding: 0 12px; font-size: 11px; white-space: nowrap; } .preview-bar.is-open .preview-bar__toggle { box-shadow: none; background: #F6F5F1; color: #141414; } } /* ---------- Over ons op gsm en tablet ---------- */ @media (max-width: 960px) { .split { padding-top: 0; } /* foto van rand tot rand, met de trapuitsnede van het logo rechtsboven */ .split .split__img { width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter)); max-width: none; aspect-ratio: 4 / 3; border-radius: 0; --cut: 54px; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, calc(100% - var(--cut)) calc(var(--cut) / 3), calc(100% - var(--cut) * 2 / 3) calc(var(--cut) / 3), calc(100% - var(--cut) * 2 / 3) calc(var(--cut) * 2 / 3), calc(100% - var(--cut) / 3) calc(var(--cut) * 2 / 3), calc(100% - var(--cut) / 3) var(--cut), 100% var(--cut), 100% 100%, 0 100%); } /* drie korte feiten, zoals op desktop */ .split__facts { display: flex; flex-direction: column; margin: 0; border-top: 1px solid var(--line); } .split__facts div { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; row-gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--line); } .split__facts div::before { content: ""; grid-row: 1 / span 2; width: 12px; height: 12px; margin-top: 3px; background: var(--brand); clip-path: polygon(0 100%, 0 66.6%, 33.3% 66.6%, 33.3% 33.3%, 66.6% 33.3%, 66.6% 0, 100% 0, 100% 100%); } .split__facts dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .split__facts dd { margin: 0; font-size: 15px; line-height: 1.4; font-weight: 500; color: var(--ink); } } /* ---------- 14. Thema 'huisstijl': componenten zoals op decotrap.be ---------- Titels vet en niet in hoofdletters; knoppen klein, vet, in hoofdletters met wat letterafstand. Fedra heeft enkel 400 en 700. */ [data-theme="huisstijl"] :is(h1, h2, h3, .h2, .tot__title, .acc__title, .project__txt h3, .step h3, .mega-panel__title) { font-weight: 700; text-transform: none; letter-spacing: 0; } [data-theme="huisstijl"] .hero h1 { font-size: clamp(36px, 4.2vw, 60px); line-height: 1.12; } [data-theme="huisstijl"] .quote__main > blockquote { font-style: normal; font-weight: 700; font-size: clamp(26px, 2.8vw, 40px); line-height: 1.25; } [data-theme="huisstijl"] .btn { font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; } [data-theme="huisstijl"] .label { letter-spacing: 1px; } [data-theme="huisstijl"] strong { font-weight: 700; } @media (max-width: 960px) { [data-theme="huisstijl"] .hero h1 { font-size: clamp(30px, 8.6vw, 40px); } } /* ---------- 15. Enkel hero (enkel preview) ---------- Alleen het eerste scherm: de rest van de pagina valt weg en er valt niets te scrollen. */ [data-page="hero"] body > main, [data-page="hero"] body > footer, [data-page="hero"] .mbar { display: none !important; } /* de hero vult precies één scherm; enkel als de inhoud niet past (bv. gsm liggend) kan je binnen de hero scrollen */ /* ---------- 16. Gratis offerte zoals op decotrap.be (thema 'huisstijl') ---------- Effen logogroen, witte tekst, halfvet, gewone letters, 3px hoeken; geen glas-, blur- of schaduweffect en geen pijltje. */ [data-theme="huisstijl"] :is(.hero__cta, .nav__offerte, .hero.is-mega .nav__offerte, .mbar__offerte, .mnav__ctas .btn--dark) { min-height: 0; padding: 12px 20px; gap: 0; background: var(--brand); color: #FFFFFF; border: 1px solid transparent; border-radius: 3px; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; text-shadow: none; font-size: 15px; font-weight: 400; line-height: 1.4; letter-spacing: 0.01em; text-transform: none; /* halfvet: Fedra heeft enkel 400 en 700; een dunne contour geeft een gewicht ertussen */ -webkit-text-stroke: 0.45px currentColor; } [data-theme="huisstijl"] :is(.hero__cta, .nav__offerte, .mbar__offerte, .mnav__ctas .btn--dark) .arrow { display: none; } @media (hover: hover) { [data-theme="huisstijl"] :is(.hero__cta, .nav__offerte, .hero.is-mega .nav__offerte, .mbar__offerte, .mnav__ctas .btn--dark):hover { background: #A6A800; color: #FFFFFF; border-color: transparent; } } /* ---------- 17. Hero-opbouw 'split' (enkel preview) ---------- Navigatie als aparte effen balk bovenaan; daaronder tekst links op de achtergrond en de foto rechts. */ [data-layout="split"] .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); background: var(--bg); color: var(--ink); } [data-layout="split"] .hero::before { display: none; } [data-layout="split"] .nav { grid-column: 1 / -1; grid-row: 1; padding-block: 20px; background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--line); } [data-layout="split"] .logo--licht { display: none; } [data-layout="split"] .logo--normaal { display: block; } [data-layout="split"] .hero > picture { grid-column: 2; grid-row: 2; position: relative; min-height: 0; } [data-layout="split"] .hero__content { grid-column: 1; grid-row: 2; align-self: center; margin: 0; max-width: calc(var(--gutter) + 640px); /* tekstbreedte gelijk, ongeacht de zijruimte */ padding: 48px clamp(32px, 5vw, 80px) 48px var(--gutter); } [data-layout="split"] .hero h1, [data-layout="split"] .hero__sub { text-shadow: none; } [data-layout="split"] .hero__sub { color: var(--text); } [data-layout="split"] .nav__toggle { background: rgb(var(--shade) / 0.06); color: var(--ink); } @media (max-width: 960px) { /* gsm: navigatie, tekst en de foto die de rest van het scherm vult */ [data-layout="split"] .hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); } [data-layout="split"] .nav { padding-block: 14px; } [data-layout="split"] .hero__content { grid-column: 1; grid-row: 2; padding: 28px var(--gutter) 24px; } [data-layout="split"] .hero > picture { grid-column: 1; grid-row: 3; min-height: 220px; } /* foto blijft zichtbaar, ook op lage schermen */ } /* ---------- 18. Afspraak maken: outline-knop zoals decotrap.be (btn-outline-black) ---------- Rand en tekst in de tekstkleur van de hero: wit op de foto, donker naast de foto (split). */ .hero__afspraak, [data-theme="huisstijl"] .hero__afspraak { min-height: 0; padding: 12px 20px; gap: 0; background: transparent; color: inherit; border: 1px solid currentColor; border-radius: 3px; font-size: 15px; font-weight: 400; line-height: 1.4; letter-spacing: 0; text-transform: none; } @media (hover: hover) { .hero__afspraak:hover { background: #FFFFFF; color: var(--ink); border-color: #FFFFFF; } [data-layout="split"] .hero__afspraak:hover { background: var(--ink); color: #FFFFFF; border-color: var(--ink); } } @media (max-width: 960px) { .hero__actions .hero__afspraak { align-self: flex-start; } } /* ---------- 19. Navigatie: menu links, vlak naast het logo; knoppen blijven rechts ---------- */ .nav__menu { margin-left: clamp(16px, 3vw, 48px); margin-right: auto; } /* ---------- 20. Navigatie: 'Afspraak maken' als outline-knop (zoals in de hero) en logo zoals op decotrap.be ---------- */ .nav__link, [data-theme="huisstijl"] .nav__link { min-height: 0; padding: 12px 20px; background: transparent; color: inherit; border: 1px solid currentColor; border-radius: 3px; font-size: 15px; font-weight: 400; line-height: 1.4; letter-spacing: 0; text-transform: none; } .nav__ctas { gap: 12px; } @media (hover: hover) { .nav__link:hover { background: #FFFFFF; color: var(--ink); border-color: #FFFFFF; } .hero.is-mega .nav__link:hover, [data-layout="split"] .nav__link:hover { background: var(--ink); color: #FFFFFF; border-color: var(--ink); } } /* navigatiebalk 76px hoog; logo 52px hoog en verticaal gecentreerd met ruimte erboven en eronder (zonder bovenbalk zoals op decotrap.be oogt een logo tegen de rand afgesneden) */ @media (min-width: 961px) { .nav, [data-layout="split"] .nav { padding-block: 12px; min-height: 76px; } .nav .nav__logo { display: flex; align-items: center; flex: none; } .nav .nav__logo img { width: auto; height: 52px; } /* menu iets groter en luchtiger, zodat het in evenwicht is met de knoppen */ [data-menu="groot"] .nav__menu { gap: 32px; } [data-menu="groot"] .nav__menu a, [data-menu="groot"] .nav__trigger { font-size: 16px; font-weight: 400; } .nav__trigger .chev { width: 11px; height: 11px; opacity: 0.7; } } /* kleine laptops (tot 1280px): menu iets compacter, zodat logo, menu en knoppen op één regel passen */ @media (min-width: 961px) and (max-width: 1280px) { [data-menu="groot"] .nav__menu { gap: 20px; } [data-menu="groot"] .nav__menu a, [data-menu="groot"] .nav__trigger { font-size: 14.5px; } .nav .nav__logo img { height: 48px; } } /* ---------- 21. Hero-titel groeit mee op grote schermen ---------- Tot 1440px blijft alles gelijk (max. 60px); daarboven groeit de titel rustig mee tot 84px (bij ±2400px). De tekstkolom groeit mee, zodat de titel niet op meer regels breekt. */ @media (min-width: 1441px) { [data-theme="huisstijl"] .hero h1 { font-size: min(84px, calc(60px + (100vw - 1440px) * 0.025)); } [data-theme="huisstijl"] .hero__content { max-width: calc(2 * var(--gutter) + 860px); } /* zijruimte links en rechts + vaste tekstbreedte */ [data-theme="huisstijl"][data-layout="split"] .hero__content { max-width: none; } /* split: de linkerkolom bepaalt de breedte */ [data-theme="huisstijl"][data-layout="split"] .hero h1 { font-size: min(74px, calc(60px + (100vw - 1440px) * 0.0125)); } [data-theme="huisstijl"] .hero__sub { font-size: min(21px, calc(19px + (100vw - 1440px) * 0.002)); max-width: 600px; } } /* ---------- 22. Hover in het menu: duidelijker lijn onder het item (ook bij Trap-o-theek en Over ons) ---------- */ .nav__ink { height: 3px; border-radius: 2px; } /* ---------- 23. Productpagina: multiplex ondertrap (multiplex-ondertrap.html) ---------- */ /* hero: zelfde split-opbouw als de homepagina, maar niet schermvullend */ .hero.hero--sub { min-height: clamp(560px, 82svh, 820px); } .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); } .crumbs a { color: inherit; text-decoration: none; } @media (hover: hover) { .crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } } .crumbs [aria-current] { color: var(--ink); } .op__section { padding: clamp(72px, 8vw, 128px) var(--gutter); } .op__section + .op__section { padding-top: 0; } .op__head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 56px); } .op__head .h2 { margin-top: 12px; } .op .h2 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.12; } .op p { color: var(--text); } .op__link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px; font-weight: 700; color: var(--ink) !important; text-decoration: none; border-bottom: 2px solid var(--brand); } /* troeven: acht rustige kaarten met het trapje */ /* nu een werftrap, later je eindtrap */ .later { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; } .later__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); } .later__txt { max-width: 560px; display: flex; flex-direction: column; gap: 16px; } .later__txt .h2 { margin-top: -4px; } .later__txt p { font-size: 17px; line-height: 1.65; } /* traptypes */ .types__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .types__card { display: block; color: var(--ink); text-decoration: none; } .types__card img { width: 100%; aspect-ratio: 72 / 52; object-fit: cover; border-radius: var(--radius); transition: transform 500ms var(--ease); } .types__card picture { display: block; overflow: hidden; border-radius: var(--radius); } .types__body { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; } .types__title { font-size: 21px; font-weight: 700; } .types__link { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-size: 15px; color: var(--text); border-bottom: 1px solid transparent; transition: border-color 200ms var(--ease), color 200ms var(--ease); } @media (hover: hover) { .types__card:hover img { transform: scale(1.03); } .types__card:hover .types__link { color: var(--ink); border-bottom-color: var(--brand); } } /* realisaties: raster met twee grote foto's, klik om groot te bekijken */ /* zo verloopt het */ /* veelgestelde vragen */ .faq__list { max-width: 880px; border-top: 1px solid var(--line); } .faq__item { border-bottom: 1px solid var(--line); } .faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 64px; padding: 16px 0; font-size: 18px; font-weight: 700; cursor: pointer; list-style: none; } .faq__item summary::-webkit-details-marker { display: none; } .faq__icon { position: relative; flex: none; width: 14px; height: 14px; } .faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--ink); transition: transform 250ms var(--ease); } .faq__icon::after { transform: rotate(90deg); } .faq__item[open] .faq__icon::after { transform: rotate(0deg); } .faq__item p { padding: 0 0 24px; max-width: 720px; font-size: 16px; line-height: 1.65; } .faq__item summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; } /* afsluitende actie */ .op__cta { margin: 0 var(--gutter) clamp(72px, 8vw, 128px); padding: clamp(48px, 6vw, 88px) clamp(24px, 5vw, 80px); border-radius: var(--radius); background: var(--deep); color: #FFFFFF; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; } .op__cta p { max-width: 560px; color: rgb(255 255 255 / 0.75); } .op__cta .hero__actions { justify-content: center; margin-top: 8px; } @media (max-width: 960px) { .hero.hero--sub { min-height: 0; } .later { grid-template-columns: minmax(0, 1fr); } .later__img img { aspect-ratio: 4 / 3; } .types__list { grid-template-columns: minmax(0, 1fr); gap: 32px; } .op__cta { margin-inline: 0; border-radius: 0; text-align: left; align-items: flex-start; } .op__cta .hero__actions { justify-content: flex-start; } } @media (max-width: 560px) { .faq__item summary { font-size: 16px; } } .op .label { font-size: 15px; letter-spacing: 0; text-transform: none; } /* labels op de productpagina in gewone letters */ /* vaste knoppenbalk op gsm: 'Afspraak maken' op één regel en in normaal gewicht, zoals de outline-knoppen */ [data-theme="huisstijl"] .mbar .btn { white-space: nowrap; font-size: 15px; letter-spacing: 0; text-transform: none; } [data-theme="huisstijl"] .mbar__bezoek { font-weight: 400; } @media (max-width: 960px) { /* donkere actie sluit naadloos aan op de (even donkere) footer, met een lijn ertussen */ .op__cta { margin-bottom: 0; border-bottom: 1px solid rgb(255 255 255 / 0.12); } /* traptypes compact: foto naast de tekst */ .types__list { gap: 16px; } .types__card { display: grid; grid-template-columns: 132px 1fr; gap: 16px; align-items: center; } .types__card img { aspect-ratio: 4 / 3; } .types__body { padding-top: 0; } .types__title { font-size: 18px; } } /* ---------- 24. Productpagina: moderne componenten (naar voorbeelden op Mobbin), zelfde tokens ---------- */ /* hero: drie hoogtepunten onder de knoppen */ .highlights { list-style: none; margin: 12px 0 0; padding: 20px 0 0; display: flex; flex-wrap: wrap; gap: 12px 28px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink); } .highlights li { display: inline-flex; align-items: center; gap: 10px; } /* sticky sub-navigatie met ankers en de hoofdactie */ .subnav { position: sticky; top: 0; z-index: 22; /* onder een open megamenu (25), boven de inhoud */ background: rgb(var(--bg-rgb) / 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .subnav__inner { display: flex; align-items: center; gap: 32px; min-height: 64px; padding: 0 var(--gutter); } .subnav__title { flex: none; font-weight: 700; } .subnav__links { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none; } .subnav__links::-webkit-scrollbar { display: none; } .subnav__links a { display: inline-flex; align-items: center; min-height: 64px; color: var(--text); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; transition: color 200ms var(--ease), border-color 200ms var(--ease); } .subnav__links a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--brand); } @media (hover: hover) { .subnav__links a:hover { color: var(--ink); } } .subnav__cta { margin-left: auto; flex: none; } [id="werftrap"], [id="troeven"], [id="traptypes"], [id="realisaties"], [id="werkwijze"], [id="vragen"] { scroll-margin-top: 64px; } /* troeven: open raster met dunne lijnen in plaats van losse kaarten */ /* stappen als fotokaarten */ /* vragen in twee kolommen: titel en contact links (blijft staan), vragen rechts */ .faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; } .faq__aside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 12px; } .faq__aside .h2 { margin-bottom: 4px; } .faq .faq__list { max-width: none; } @media (max-width: 960px) { .subnav__title, .subnav__cta { display: none; } /* gsm: enkel de ankers; de knoppenbalk onderaan doet de actie */ .subnav__inner { min-height: 52px; } .subnav__links { gap: 22px; } .subnav__links a { min-height: 52px; font-size: 15px; } [id="werftrap"], [id="troeven"], [id="traptypes"], [id="realisaties"], [id="werkwijze"], [id="vragen"] { scroll-margin-top: 52px; } .faq { grid-template-columns: minmax(0, 1fr); } .faq__aside { position: static; } } /* sub-navigatie op kleine laptops: zonder titel, zodat alle ankers en de knop passen */ @media (min-width: 961px) and (max-width: 1280px) { .subnav__title { display: none; } } /* ---------- 25. Fotogalerij met lightbox (lightbox.js, naar 'Lightbox Setup' van Osmo Supply) ---------- Geen overflow: hidden op tegel of knop, anders loopt de Flip-animatie mank; de foto zelf snijdt bij met object-fit. */ /* open foto: in zijn eigen verhouding, zo groot als past (cover op die verhouding = geen bijsnijding, vloeiende overgang vanuit de tegel) */ .lb-open .mbar { visibility: hidden; } /* knoppenbalk (gsm) niet door de lightbox heen laten schemeren */ /* ---------- 26. Troeven als bento-raster: tegels van verschillende grootte, foto's en accenttegels (zelfde tokens) ---------- */ /* donker: de hoofdtroef */ /* logogroen accent */ /* fototegels: foto over de hele tegel, tekst onderaan op een donkere laag */ /* tegels komen gelaagd binnen wanneer de sectie in beeld schuift */ /* ---------- 28. Footer (compact): merk en acties boven, vier kolommen, juridisch onderaan ---------- */ .sfoot { background: var(--footer); color: #FFFFFF; padding: clamp(56px, 6vw, 88px) var(--gutter) 28px; } .sfoot a { color: inherit; text-decoration: none; } .sfoot__top { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding-bottom: clamp(36px, 4vw, 56px); border-bottom: 1px solid rgb(255 255 255 / 0.12); } .sfoot__brand { display: flex; align-items: center; gap: 24px; max-width: 560px; } .sfoot__brand img { flex: none; width: 44px; height: auto; } .sfoot__brand p { font-size: 17px; line-height: 1.55; color: rgb(255 255 255 / 0.78); } .sfoot__cta { margin: 0; flex: none; } .sfoot__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding: clamp(36px, 4vw, 56px) 0; } .sfoot__label { margin-bottom: 14px; font-size: 14px; font-weight: 400; color: rgb(255 255 255 / 0.55); } .sfoot__col p { font-size: 16px; line-height: 1.6; color: rgb(255 255 255 / 0.9); } .sfoot__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .sfoot__list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } .sfoot__list a { font-size: 16px; } .sfoot__list span { font-size: 14px; color: rgb(255 255 255 / 0.55); } .sfoot__route { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-top: 6px; font-size: 15px; border-bottom: 1px solid var(--brand); } .sfoot__route .arrow { width: 12px; height: 12px; } @media (hover: hover) { .sfoot__list a:hover, .sfoot__legal a:hover, .sfoot__social a:hover, .sfoot__top-link:hover { color: var(--brand); } .sfoot__route:hover { color: var(--brand); } } .sfoot a:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 2px; } .sfoot__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; padding-top: 24px; border-top: 1px solid rgb(255 255 255 / 0.12); font-size: 14px; color: rgb(255 255 255 / 0.6); } .sfoot__social { list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; } .sfoot__top-link { display: inline-flex; align-items: center; gap: 8px; } @media (max-width: 960px) { .sfoot__top { flex-direction: column; align-items: flex-start; } .sfoot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; } .sfoot { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } /* ruimte voor de knoppenbalk op gsm */ } @media (max-width: 560px) { .sfoot__brand { flex-direction: column; align-items: flex-start; gap: 16px; } .sfoot__cta { flex-direction: column; align-items: stretch; width: 100%; } .sfoot__cta .btn { justify-content: center; } .sfoot__cols { grid-template-columns: minmax(0, 1fr); gap: 28px; } .sfoot__bottom { flex-direction: column; align-items: flex-start; } } .op ~ .sfoot .sfoot__cta { display: none; } /* pagina met eigen afsluitende actie: de knoppen niet twee keer na elkaar */ /* ---------- 29. Troeven in de stijl van een Apple-productpagina: donker vlak, grote titel in accentkleur, twee kolommen met kerncijfers ---------- */ .usps2__box { padding: clamp(56px, 7vw, 112px) clamp(24px, 6vw, 96px); border-radius: var(--radius); background: var(--deep); color: #FFFFFF; text-align: center; } .usps2__head { display: flex; justify-content: center; align-items: center; gap: clamp(20px, 3vw, 40px); } .usps2__title { font-size: clamp(36px, 5.2vw, 76px) !important; line-height: 1.04 !important; letter-spacing: -0.02em !important; color: var(--brand); text-align: left; } .usps2__intro { max-width: 760px; margin: clamp(24px, 3vw, 40px) auto 0; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; color: rgb(255 255 255 / 0.62) !important; } .usps2__intro strong { color: #FFFFFF; font-weight: 700; } .usps2__link { display: inline-flex; align-items: center; gap: 8px; margin-top: clamp(40px, 5vw, 64px); font-size: 18px; color: var(--brand); text-decoration: none; } @media (hover: hover) { .usps2__link:hover { text-decoration: underline; text-underline-offset: 5px; } } .usps2__link:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 2px; } /* kerncijfers komen een voor een binnen */ @media (max-width: 960px) { .usps2 { padding-left: 0; padding-right: 0; } .usps2__box { border-radius: 0; } } @media (max-width: 640px) { .usps2__head { flex-direction: column; gap: 18px; } .usps2__title { text-align: center; } } /* ---------- 30. Troeven (Apple-stijl) verfijnd: minder vet, rustiger maten, meer lucht ---------- */ .usps2__box { padding: clamp(64px, 7.5vw, 116px) clamp(24px, 6vw, 96px) clamp(56px, 6.5vw, 100px); } .usps2__head { gap: clamp(18px, 2.4vw, 32px); } .usps2__title { font-size: clamp(34px, 4.6vw, 66px) !important; line-height: 1.02 !important; letter-spacing: -0.03em !important; } /* intro: rustig grijs, kernwoorden wit maar niet vet */ .usps2__intro { max-width: 660px; margin-top: clamp(22px, 2.4vw, 32px); font-size: clamp(17px, 1.35vw, 19px); line-height: 1.65; color: rgb(255 255 255 / 0.58) !important; } .usps2__intro strong { font-weight: 400; color: #FFFFFF; } /* kolommen: meer afstand tot de intro, subtielere scheidingslijn */ /* kolomtitel halfvet in plaats van vet, zodat de titel bovenaan de baas blijft */ .usps2__link { margin-top: clamp(48px, 5.5vw, 76px); font-size: 17px; } @media (max-width: 640px) { .usps2__intro { font-size: 17px; } } /* ---------- 31. Troeven compacter: kleinere letters en minder witruimte ---------- */ .usps2__box { padding: clamp(48px, 5vw, 80px) clamp(24px, 5vw, 80px) clamp(44px, 4.5vw, 72px); } .usps2__title { font-size: clamp(30px, 3.6vw, 52px) !important; } .usps2__intro { max-width: 600px; margin-top: clamp(16px, 1.8vw, 24px); font-size: clamp(16px, 1.2vw, 17px); line-height: 1.6; } .usps2__link { margin-top: clamp(32px, 3.6vw, 48px); font-size: 16px; } @media (max-width: 640px) { } /* ---------- 32. Herbruikbaar blok: vermelding multiplex ondertrap (componenten/multiplex-teaser.html) ---------- Liggende kaart: tekst links, foto rechts. Bedoeld net boven de footer op andere pagina's. */ .mpx-teaser { padding: clamp(56px, 7vw, 112px) var(--gutter); } .mpx-teaser__card { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); overflow: hidden; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); } .mpx-teaser__body { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: clamp(32px, 4.5vw, 64px); } .mpx-teaser__label { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--bg); font-size: 14px; color: var(--ink) !important; } .mpx-teaser__title { margin-top: 4px; font-size: clamp(26px, 2.8vw, 40px) !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; max-width: 520px; } .mpx-teaser__text { max-width: 520px; font-size: 16px; line-height: 1.6; color: var(--text); } .mpx-teaser__btn { gap: 10px; min-height: 0; padding: 13px 20px; border-radius: 3px; background: var(--ink); color: #FFFFFF; font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none; text-decoration: none; } .mpx-teaser__btn .arrow { transition: transform 250ms var(--ease); } @media (hover: hover) { .mpx-teaser__btn:hover { background: var(--brand); color: var(--ink); } .mpx-teaser__btn:hover .arrow { transform: translate(2px, -2px); } } .mpx-teaser__btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; } .mpx-teaser__media { position: relative; min-height: 320px; } .mpx-teaser__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } @media (max-width: 860px) { .mpx-teaser__card { grid-template-columns: minmax(0, 1fr); } .mpx-teaser__media { order: -1; min-height: 0; aspect-ratio: 16 / 10; } } /* ---------- 33. Vangnet: de pagina scrollt nooit horizontaal (clip maakt geen scrollcontainer, sticky blijft werken) ---------- */ html, body { overflow-x: clip; } .gallery { overflow-x: clip; } /* tablet (641–960px): uitleg en stappen naast elkaar, zodat foto's niet schermbreed en reusachtig worden */ @media (min-width: 641px) and (max-width: 960px) { .later { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 32px; } .later__img img { aspect-ratio: 4 / 5; } } /* voorbeeld van het herbruikbare blok op de multiplex-pagina, met titel erboven (enkel om te tonen) */ .demo-blok { margin: 0 var(--gutter) clamp(64px, 7vw, 112px); padding-top: clamp(40px, 5vw, 64px); border-top: 2px dashed var(--line); } .demo-blok__head { max-width: 720px; margin-bottom: 20px; } .demo-blok__label { font-size: 15px; font-weight: 700; color: var(--ink); } .demo-blok__text { margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--muted); } .demo-blok .mpx-teaser { padding: 0; } @media (max-width: 960px) { .demo-blok { padding-top: 40px; } } [data-theme="huisstijl"] .mpx-teaser__btn { font-weight: 400; font-size: 15px; letter-spacing: 0; text-transform: none; } /* zelfde gewicht als de andere knoppen */ /* ---------- 35. Split-opbouw: navigatiebalk doorzichtig (zelfde achtergrond als de pagina), enkel effen bij open megamenu ---------- */ [data-layout="split"] .nav { background: transparent; } [data-layout="split"] .hero.is-mega .nav { background: var(--paper); } /* ---------- 36. Productpagina: collage van drie foto's in de hero (hoge foto links, twee kleinere rechts) ---------- */ [data-layout="split"] .hero--sub > .hero__collage { grid-column: 2; grid-row: 2; align-self: center; justify-self: end; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: 1fr 1fr; gap: 12px; width: clamp(360px, 40vw, 600px); aspect-ratio: 6 / 5; margin: clamp(32px, 4vw, 56px) var(--gutter) clamp(32px, 4vw, 56px) 0; } .hero__collage-item { position: relative; display: block; overflow: hidden; border-radius: var(--radius); background: var(--paper); } .hero__collage-item--groot { grid-row: span 2; } .hero__collage-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } @media (max-width: 960px) { [data-layout="split"] .hero--sub > .hero__collage { grid-column: 1; grid-row: 3; justify-self: stretch; width: auto; aspect-ratio: 4 / 3; gap: 8px; margin: 0 var(--gutter) 28px; } } /* ---------- 37. Lettergroottes in lijn met het gemiddelde op Mobbin (huisstijl) ---------- broodtekst 16px, sectietitels 32–36px, kleinere titels 18px, sub-navigatie 15px, FAQ 17px, footer 15px. H1 blijft. */ html[data-theme="huisstijl"] body { font-size: 16px; } [data-theme="huisstijl"] .nav__menu a, [data-theme="huisstijl"] .nav__trigger { font-size: 15px; } [data-theme="huisstijl"] .hero__sub { font-size: clamp(16px, 1.25vw, 18px); } /* sectietitels */ .op .h2, .op__cta .h2 { font-size: clamp(26px, 2.5vw, 36px); line-height: 1.15; } .op__head .h2 { margin-top: 8px; } .op__head { margin-bottom: clamp(28px, 3.2vw, 44px); } .usps2__title { font-size: clamp(28px, 3.1vw, 44px) !important; } .mpx-teaser__title { font-size: clamp(24px, 2.3vw, 32px) !important; } /* kleinere titels */ .types__title { font-size: 18px; } .later__txt p { font-size: 16px; } /* sub-navigatie en vragen */ .subnav__links a { font-size: 15px; } .subnav__title { font-size: 15px; } .faq__item summary { font-size: 17px; min-height: 58px; } .faq__item p { font-size: 16px; } /* footer */ .sfoot__brand p { font-size: 15px; } .sfoot__list a, .sfoot__col p { font-size: 15px; } .sfoot__route { font-size: 14px; } .sfoot__label { font-size: 13px; } /* gsm: duidelijk verschil tussen H1 en sectietitels */ @media (max-width: 960px) { .op .h2, .op__cta .h2 { font-size: clamp(24px, 6.4vw, 26px); } .usps2__title { font-size: clamp(26px, 7vw, 30px) !important; } .faq__item summary { font-size: 16px; } } /* ---------- 38. Geen trapje-icoontjes meer: vinkjes in de hero, tags in het blok, labels zonder icoon ---------- */ .highlights li { gap: 8px; } .highlights .check { width: 16px; height: 16px; flex: none; color: var(--brand); } .mpx-teaser__label { padding: 0; background: none; color: var(--muted) !important; } .usps2__head { display: block; } .usps2__title { text-align: center; } .mega-panel__eyebrow::before { display: none; } [data-theme="huisstijl"] .mnav__ctas .btn--outline { font-weight: 400; } /* zelfde gewicht als de andere outline-knoppen */ /* ---------- 39. Mobiel menu: rustiger lettergroottes en klikvlakken van minstens 44px ---------- */ .mnav__root a, .mnav__root button { font-size: 22px; min-height: 58px; } [data-menu="groot"] .mnav .mega__thumbs { gap: 0; } [data-menu="groot"] .mnav .mega__thumbs a { display: flex; align-items: center; min-height: 44px; padding: 4px 0; font-size: 18px; } .mnav .mega__info { gap: 0; } .mnav .mega__info a { display: flex; align-items: center; min-height: 44px; font-size: 16px; } .mnav__meta { gap: 0; } .mnav__meta a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; } [data-theme="huisstijl"] .mnav__ctas .btn { min-height: 48px; padding-top: 0; padding-bottom: 0; } /* ---------- 40. Mobiel menu: overgang tussen hoofdmenu en submenu (richting zoals op iOS) ---------- */ .mnav__view { animation: none; } .mnav__view.is-leaving { position: absolute; left: var(--gutter); right: var(--gutter); pointer-events: none; } .mnav__view.is-in-fwd { animation: mnav-view-in-fwd 320ms var(--ease) both; } .mnav__view.is-in-back { animation: mnav-view-in-back 320ms var(--ease) both; } .mnav__view.is-out-fwd { animation: mnav-view-out-fwd 240ms cubic-bezier(0.4, 0, 1, 1) both; } .mnav__view.is-out-back { animation: mnav-view-out-back 240ms cubic-bezier(0.4, 0, 1, 1) both; } @keyframes mnav-view-in-fwd { from { opacity: 0; transform: translateX(32px); } } @keyframes mnav-view-in-back { from { opacity: 0; transform: translateX(-32px); } } @keyframes mnav-view-out-fwd { to { opacity: 0; transform: translateX(-32px); } } @keyframes mnav-view-out-back { to { opacity: 0; transform: translateX(32px); } } /* items van het nieuwe scherm komen gelaagd binnen */ .mnav__view.is-in-fwd :is(.mega__thumbs, .mega__info, .mnav__root) > li, .mnav__view.is-in-back :is(.mega__thumbs, .mega__info, .mnav__root) > li { animation: mnav-item-in 380ms var(--ease) backwards; animation-delay: calc(80ms + var(--k, 0) * 35ms); } @keyframes mnav-item-in { from { opacity: 0; transform: translateY(10px); } } :is(.mega__thumbs, .mega__info, .mnav__root) > li:nth-child(2) { --k: 1; } :is(.mega__thumbs, .mega__info, .mnav__root) > li:nth-child(3) { --k: 2; } :is(.mega__thumbs, .mega__info, .mnav__root) > li:nth-child(4) { --k: 3; } :is(.mega__thumbs, .mega__info, .mnav__root) > li:nth-child(5) { --k: 4; } :is(.mega__thumbs, .mega__info, .mnav__root) > li:nth-child(6) { --k: 5; } :is(.mega__thumbs, .mega__info, .mnav__root) > li:nth-child(n+7) { --k: 6; } @media (prefers-reduced-motion: reduce) { .mnav__view.is-in-fwd, .mnav__view.is-in-back, .mnav__view.is-out-fwd, .mnav__view.is-out-back, .mnav__view :is(.mega__thumbs, .mega__info, .mnav__root) > li { animation: none !important; } } html[data-theme="huisstijl"] .mnav .mnav__ctas .btn { min-height: 48px; padding-top: 0; padding-bottom: 0; } /* beide knoppen in het mobiele menu even hoog */ /* ---------- 41. Sub-navigatie: 'Gratis offerte' pas zichtbaar als de hero (met zijn eigen knoppen) uit beeld is ---------- */ .subnav__cta { opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 250ms var(--ease), transform 300ms var(--ease), visibility 0s linear 300ms; } .subnav.is-stuck .subnav__cta { opacity: 1; visibility: visible; transform: none; transition: opacity 250ms var(--ease), transform 300ms var(--ease), visibility 0s; } @media (prefers-reduced-motion: reduce) { .subnav__cta, .subnav.is-stuck .subnav__cta { transition: none; transform: none; } } /* ---------- 42. Werkwijze in drie stappen (naar het voorbeeld van Stage): stappen links op een lijn, foto rechts die meewisselt ---------- */ /* groene lijn van de actieve stap; vult zich als voortgangsbalk terwijl de stappen vanzelf doorschuiven */ /* uitleg klapt open bij de actieve stap */ /* foto rechts: kruisovergang */ /* ---------- 43. Mobiel menu verfijnd (naar Open, Instacart en de mobiele menu's van Apple/Stripe) ---------- Compacte bovenbalk, extra links op één rij, knoppen vast onderaan naast elkaar. */ @media (max-width: 960px) { /* logo even groot in de paginabalk als in het menu, zodat er bij openen niets verspringt */ .nav .nav__logo img, .mnav__bar img { width: auto; height: 48px; } } .mnav__bar { padding: 14px 0; border-bottom: 1px solid var(--line); } .mnav__close { width: 44px; height: 44px; } .mnav__root { margin-top: 8px; border-top: 0; } /* hoofdmenu: knoppen onderaan vast, extra links er net boven */ .mnav [data-view="root"] { display: flex; flex-direction: column; min-height: calc(100svh - 77px); } .mnav [data-view="root"] > .mnav__meta { order: 2; margin-top: auto; padding-top: 28px; flex-direction: row; flex-wrap: wrap; gap: 0 22px; } .mnav__meta a { font-size: 15px; color: var(--muted); } .mnav [data-view="root"] > .mnav__ctas { order: 3; position: sticky; bottom: 0; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px calc(-1 * var(--gutter)) -40px; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line); } html[data-theme="huisstijl"] .mnav .mnav__ctas .btn { justify-content: center; padding-left: 12px; padding-right: 12px; } .mnav { padding-bottom: 0; } .mnav__view:not([data-view="root"]) { padding-bottom: 40px; } .mnav [data-view="root"] { min-height: calc(100svh - 77px); } /* 77px = bovenbalk (14 + 48 + 14 + lijn) */ .mnav [data-view="root"] > .mnav__ctas { margin-bottom: 0; } .mnav [data-view="root"] > .mnav__meta { padding-top: 20px; } [data-theme="huisstijl"] .mega-panel__cta { font-weight: 400; } /* zelfde gewicht als de andere knoppen */ /* ---------- 44. Werkwijze als vastgezet scherm: scrollen schuift door de drie stappen ---------- */ /* groene lijn volgt de scrollvoortgang (--p van 0 tot 1); afgewerkte stappen blijven gevuld */ /* lage schermen (bv. gsm liggend) of minder beweging: gewoon klikbare stappen, niet vastgezet */ /* ---------- 45. Gsm: klikvlakken van minstens 44px (footer, stappen, links) ---------- */ @media (max-width: 960px) { .sfoot__list { gap: 0; } .sfoot__list li { min-height: 44px; align-items: center; } .sfoot__list a { display: inline-flex; align-items: center; min-height: 44px; } .sfoot__legal a, .sfoot__social a, .sfoot__top-link { display: inline-flex; align-items: center; min-height: 44px; } .sfoot__social { gap: 20px; } .sfoot__bottom { gap: 4px 24px; } .usps2__link { min-height: 44px; } .crumbs a { display: inline-flex; align-items: center; min-height: 44px; } .crumbs { row-gap: 0; } } /* ---------- 46. Werkwijze: donkere achtergrond en zachtere overgangen ---------- */ /* lijn wordt per beeld door het script gezet: geen eigen vertraging */ /* zachtere wissel van uitleg en foto */ /* pijltjes helemaal links */ /* bubbels */ /* uitleg: ligt al op zijn eindbreedte (--tw) en vloeit pas in als het kader bijna open is */ /* open bubbel */ /* foto rechts */ @media (max-width: 960px) { /* op gsm is elke kaart open: enkel de uitleg, even hoog */ /* pijltabs tegen de randen van het donkere vlak, ter hoogte van de kaart */ /* voortgang: drie segmenten, actieve in de huisstijlkleur */ } /* ---------- 48. Realisaties: 'Draggable Infinite Slider' van Osmo Supply (gallery.js), in een donker vlak binnen de zijmarges ---------- */ .slider__section { --sw: clamp(320px, 38vw, 660px); --pad: clamp(32px, 4.5vw, 72px); position: relative; display: flex; align-items: center; min-height: clamp(480px, 36vw, 640px); border-radius: var(--radius); background: var(--deep); color: #FFFFFF; overflow: hidden; } .slider__main { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .slider__wrap { display: flex; align-items: center; width: 100%; height: 100%; } .slider__list { position: relative; display: flex; cursor: grab; touch-action: pan-y; } .slider__list:active { cursor: grabbing; } .slider__slide { flex: none; position: relative; width: var(--sw); aspect-ratio: 3 / 2; padding-inline: 10px; transition: opacity 400ms; } .slider__slide-inner { position: relative; width: 100%; height: 100%; border-radius: var(--radius); overflow: hidden; background: rgb(255 255 255 / 0.06); } .slide__img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-select: none; user-select: none; } /* caption van de actieve foto */ .slide__caption { position: absolute; top: 14px; left: 14px; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: var(--radius); background: rgb(255 255 255 / 0.16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #FFFFFF; white-space: nowrap; opacity: 0; transform: translateX(-25%); transition: transform 525ms cubic-bezier(0.625, 0.05, 0, 1), opacity 525ms cubic-bezier(0.625, 0.05, 0, 1); } .slide__caption-dot { flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--brand); } .slider__section .slide__caption-label { color: #FFFFFF; margin: 0; font-size: 13px; line-height: 1.5; } [data-slider="slide"] { opacity: 0.2; } [data-slider="slide"].active { opacity: 1; } [data-slider="slide"].active .slide__caption { opacity: 1; transform: none; transition-delay: 300ms; } /* links: titel, teller en pijltjes, over de eerste (gedimde) foto */ .slider__overlay { position: absolute; inset: 0 auto 0 0; z-index: 2; display: flex; width: var(--sw); padding: var(--pad); background-image: linear-gradient(90deg, var(--deep) 85%, color-mix(in srgb, var(--deep) 0%, transparent)); } .slider__overlay-inner { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 32px; width: 100%; } .slider__overlay-head .label { color: rgb(255 255 255 / 0.6); } .slider__overlay-head .h2 { color: #FFFFFF; margin-top: 8px; } .slider__overlay-count { display: flex; align-items: center; gap: 0.2em; font-size: clamp(48px, 4.6vw, 72px); line-height: 1; } .slider__count-col { height: 1em; overflow: hidden; } .slider__section .slider__count-heading { width: 2ch; margin: 0; color: #FFFFFF; font-size: 1em; font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; } .slider__count-divider { width: 2px; height: 0.75em; background: rgb(255 255 255 / 0.5); transform: rotate(15deg); } /* pijltjes: zelfde knop als bij de werkwijze */ .slider__overlay-nav { display: flex; gap: 12px; } .slider__btn { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgb(255 255 255 / 0.3); border-radius: var(--radius); background: transparent; color: #FFFFFF; cursor: pointer; transition: background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease); } .slider__btn-arrow { width: 16px; height: 16px; } @media (hover: hover) { .slider__btn:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--ink); } } .slider__btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; } /* tablet en gsm: tekst boven, slider eronder */ @media (max-width: 991px) { .slider__section { display: block; min-height: 0; --pad: clamp(24px, 5vw, 40px); } .slider__main { position: relative; padding-bottom: var(--pad); } .slider__wrap { padding-left: calc(var(--pad) - 10px); } .slider__slide { width: 75vw; } .slider__overlay { position: relative; inset: auto; width: 100%; padding-bottom: 24px; background: none; } .slider__overlay-inner { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; } .slider__overlay-head { grid-column: 1 / -1; } .slider__overlay-count { font-size: 44px; } } @media (max-width: 479px) { .slider__slide { width: 80vw; padding-inline: 6px; } .slider__wrap { padding-left: calc(var(--pad) - 6px); } .slide__caption { top: 8px; left: 8px; } } @media (prefers-reduced-motion: reduce) { .slide__caption, .slider__btn, .slider__slide { transition: none; } } /* ---------- 49. Troeven compacter: minder witruimte, cijfers per kolom naast elkaar (tekst min. 13–14px voor leesbaarheid) ---------- */ .usps2__box { padding: clamp(40px, 4vw, 60px) clamp(20px, 4vw, 64px) clamp(36px, 3.6vw, 52px); } .usps2__title { font-size: clamp(28px, 3vw, 44px) !important; } .usps2__intro { max-width: 620px; margin-top: clamp(12px, 1.4vw, 18px); font-size: 16px; line-height: 1.55; } .usps2__link { margin-top: clamp(24px, 2.6vw, 36px); font-size: 15px; } @media (max-width: 960px) { } /* ---------- 50. Werftrap/eindtrap: tekst gecentreerd, drie kleinere foto's eronder ---------- */ .later { display: block; } .later__txt { max-width: 680px; margin: 0 auto; align-items: center; text-align: center; gap: 14px; } .later__txt .op__link { align-self: center; } .later__fotos { list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); } .later__fotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); } .later__fotos p { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--text); } .later__fotos strong { color: var(--ink); font-weight: 700; } /* gsm: foto's horizontaal swipen */ @media (max-width: 760px) { .later__fotos { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); } .later__fotos::-webkit-scrollbar { display: none; } .later__fotos li { flex: none; width: 72vw; scroll-snap-align: start; } } /* ---------- 51. Gsm-afwerking productpagina: knoppen naast elkaar en even breed, voordelen in één kolom ---------- */ @media (max-width: 640px) { .hero--sub .hero__actions, .op__cta .hero__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; } .hero--sub .hero__actions .btn, .op__cta .hero__actions .btn { justify-content: center; min-height: 48px; padding-inline: 12px; white-space: nowrap; } .hero--sub .hero__actions .hero__afspraak { align-self: stretch; } .highlights { flex-direction: column; gap: 10px; padding-top: 18px; } } /* ---------- 52. Troeven op gsm: links uitgelijnd, icoon + titel op één rij, cijfers in twee gelijke vakjes, donker vlak binnen de marges ---------- */ @media (max-width: 760px) { .usps2 { padding-left: var(--gutter); padding-right: var(--gutter); } .usps2__box { border-radius: var(--radius); padding: 28px 20px 24px; text-align: left; } .usps2__head { align-items: flex-start; } .usps2__title { text-align: left; font-size: 28px !important; } .usps2__intro { margin-left: 0; font-size: 16px; } .usps2__link { margin-top: 24px; } } /* ---------- 53. Gsm: donkere secties schermbreed (inhoud op de paginamarge), pijltabs tegen de schermrand ---------- */ @media (max-width: 760px) { .usps2 { padding-left: 0; padding-right: 0; } .usps2__box { border-radius: 0; padding: 32px var(--gutter) 28px; } .slider__section { margin-inline: calc(-1 * var(--gutter)); border-radius: 0; --pad: var(--gutter); } } @media (max-width: 960px) { } /* ---------- 54. Afsluitende CTA: label in huisstijlkleur; gsm links uitgelijnd op de paginamarge ---------- */ .op__cta .op__cta-label { margin-bottom: -8px; color: var(--brand); } @media (max-width: 760px) { .op__cta { padding: 36px var(--gutter) 32px; gap: 14px; } .op__cta p:not(.label) { font-size: 16px; } .op__cta .hero__actions { margin-top: 10px; } } /* ---------- 55. Teaser op gsm: compacter, knop over de volle breedte ---------- */ @media (max-width: 640px) { .mpx-teaser__body { padding: 24px 20px; gap: 12px; } .mpx-teaser__btn { align-self: stretch; justify-content: center; min-height: 48px; margin-top: 4px; } } /* ---------- 56. Traptypes op gsm: pijltje loopt mee achter het laatste woord ---------- */ @media (max-width: 640px) { .types__link { display: inline; font-size: 14px; } .types__link svg { display: inline-block; margin-left: 6px; vertical-align: -1px; } } /* ---------- 57. Troeven: vier voordelen, elk één titel en één korte zin (zelfde kleuren en lettertype) ---------- */ .usps2__box { text-align: left; } .usps2__head { justify-content: flex-start; } .usps2__title { text-align: left; } .usps2__intro { margin-left: 0; max-width: 640px; } .usps2__grid { list-style: none; margin: clamp(28px, 3vw, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; } .usps2__grid li { padding: 4px clamp(16px, 2vw, 28px) 4px 0; } .usps2__grid li + li { padding-left: clamp(16px, 2vw, 28px); border-left: 1px solid rgb(255 255 255 / 0.14); } .usps2__item-title { margin: 0; font-size: clamp(18px, 1.4vw, 20px); line-height: 1.25; font-weight: 700; color: var(--brand); } .usps2__box .usps2__grid p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: rgb(255 255 255 / 0.72); } .usps2__link { margin-top: clamp(24px, 2.6vw, 36px); } @media (max-width: 960px) { .usps2__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 0; } .usps2__grid li:nth-child(3) { padding-left: 0; border-left: 0; } } @media (max-width: 480px) { .usps2__grid { grid-template-columns: minmax(0, 1fr); gap: 0; } .usps2__grid li, .usps2__grid li + li { padding: 16px 0; border-left: 0; } .usps2__grid li + li { border-top: 1px solid rgb(255 255 255 / 0.14); } } /* ---------- 58. Realisaties: compactere linkerkolom en teller, grotere foto's (eerste, gedimde foto schuift grotendeels achter de kolom) ---------- */ @media (min-width: 992px) { .slider__section { --sw: clamp(380px, 46vw, 760px); --ow: clamp(300px, 26vw, 420px); min-height: clamp(520px, 40vw, 700px); } .slider__overlay { width: var(--ow); } .slider__wrap { width: calc(100% + var(--sw) - var(--ow)); margin-left: calc(var(--ow) - var(--sw)); } .slider__overlay-count { font-size: clamp(40px, 3.4vw, 56px); } } /* ---------- 59. Gsm-afwerking: werftrap links uitgelijnd, bredere pijltabs bij de stappen, korte traptype-links ---------- */ @media (max-width: 760px) { .later__txt { align-items: flex-start; text-align: left; } .later__txt .op__link { align-self: flex-start; } } @media (max-width: 960px) { } @media (max-width: 640px) { .types__link-rest { display: none; } } /* ---------- 60. Voorbeeldblok: duidelijk gemarkeerd als component (enkel ter illustratie voor collega's) ---------- */ .demo-blok__badge { display: inline-block; margin-bottom: 10px; padding: 4px 10px; border: 1px dashed var(--ink); border-radius: var(--radius); font-size: 13px; color: var(--ink) !important; } .demo-blok__text code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; padding: 1px 5px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); } @media (max-width: 960px) { /* de scrollrij is precies zo breed als één kaart: 10px vrij naast elke pijltab */ } /* ---------- 62. Vaste knoppenbalk (gsm): twee even brede knoppen zoals in de hero, past ook op 320px ---------- */ @media (max-width: 960px) { .mbar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mbar .btn { min-width: 0; padding-inline: 12px; } } /* ---------- 63. Realisaties desktop: titel in de smallere linkerkolom iets kleiner, zodat hij op twee regels past ---------- */ @media (min-width: 992px) { .slider__overlay-head .h2 { font-size: clamp(24px, 1.9vw, 30px); } } /* ---------- 64. Werkwijze: drie stappen naast elkaar, statisch en in één blik leesbaar ---------- */ .steps4__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); } .steps4__list li { padding-top: 24px; border-top: 1px solid var(--line); } .steps4__nr { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius); background: var(--brand); color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1; } .steps4__title { margin-top: 16px; font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--ink); } .steps4__list p { margin-top: 6px; max-width: 36ch; font-size: 16px; line-height: 1.55; color: var(--text); } @media (max-width: 760px) { .steps4__list { grid-template-columns: minmax(0, 1fr); gap: 0; } .steps4__list li { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; padding: 18px 0; } .steps4__nr { grid-row: span 2; } .steps4__title { margin-top: 4px; } .steps4__list p { grid-column: 2; margin-top: 4px; } }