/* ============================================================ V1 :: DE OPNAME Donker, werkplaatsachtig, precies. De zes vragen uit hun eigen offerteformulier zijn de ruggengraat van de pagina. Alle tokens genamespaced --v1-*. ============================================================ */ #version-v1 { /* Vlakken. Elk token is benoemd naar het vlak waarop het leesbaar is, met de gemeten verhouding erbij, zodat LES 1 vanzelf gaat. */ --v1-ink: #14161A; /* pagina */ --v1-ink-2: #1B1E23; /* opgetild vlak */ --v1-ink-3: #23272E; /* kaart */ --v1-paper: #F4F5F0; /* tekst op ink, 18:1 */ --v1-muted: #A9AFAA; /* tekst op ink, 7,7:1 en op ink-3, 6,4:1 */ --v1-muted-2: #8C918D; /* labels op ink, 5,4:1. Niet op ink-3 gebruiken. */ --v1-line: rgba(244,245,240,.15); --v1-line-2: rgba(244,245,240,.08); /* Het merkgroen #00543C is te donker als TEKST op donker: 1,2:1. LES 2: afgeleide stappen leveren in plaats van de hex overal gebruiken. */ --v1-green-fill: #00543C; /* vlakvulling, wit erop is 9,0:1 */ --v1-green-txt: #3FB185; /* tekst op ink, 6,8:1 */ --v1-green-dim: #0B7350; /* rand en hover van een gevuld vlak */ --v1-disp: "Space Grotesk", system-ui, sans-serif; --v1-body: "Inter", system-ui, sans-serif; --v1-gut: clamp(20px, 4.2vw, 60px); --v1-max: 1320px; background: var(--v1-ink); color: var(--v1-paper); font-family: var(--v1-body); -webkit-font-smoothing: antialiased; } /* LES 19: outline-offset tekent op het vlak van de ouder, dus een currentColor ring verdwijnt juist op een gevulde knop. Dubbele ring. */ #version-v1 :focus-visible { outline: 2px solid var(--v1-ink); outline-offset: 2px; box-shadow: 0 0 0 4px var(--v1-green-txt); border-radius: 2px; } .v1-wrap { width: 100%; max-width: var(--v1-max); margin: 0 auto; padding-inline: var(--v1-gut); } /* ---------- reveals ---------- */ /* De verborgen staat bestaat alleen als .anim op staat, en die klasse wordt niet gezet bij prefers-reduced-motion. Alleen opacity en transform, nooit clip-path: dat zet intersectionRatio op nul (LES 7 en 8). */ .anim #version-v1 .reveal { opacity: 0; transform: translateY(18px); } .anim #version-v1 .reveal.is-in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); } /* ---------- type ---------- */ .v1-h1 { font-family: var(--v1-disp); font-weight: 700; font-size: clamp(2.1rem, 5.6vw, 4.4rem); line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; } .v1-h2 { font-family: var(--v1-disp); font-weight: 700; font-size: clamp(1.65rem, 3.6vw, 2.9rem); line-height: 1.06; letter-spacing: -.025em; text-wrap: balance; } .v1-h3, .v1-dip__item h3, .v1-steps h3 { font-family: var(--v1-disp); font-weight: 700; font-size: clamp(1.05rem, 1.8vw, 1.3rem); letter-spacing: -.015em; } .v1-lead { margin-top: 18px; max-width: 48ch; font-size: clamp(.98rem, 1.15vw, 1.08rem); line-height: 1.62; color: var(--v1-muted); } .v1-eyebrow { font-family: var(--v1-disp); font-weight: 500; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--v1-green-txt); } .v1-shead { max-width: 640px; margin-bottom: clamp(30px, 4.4vw, 56px); } .v1-shead .v1-h2 { margin-top: 12px; } /* ---------- knoppen ---------- */ .v1-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 22px; border-radius: 3px; font-family: var(--v1-disp); font-weight: 500; font-size: 14px; letter-spacing: .01em; text-decoration: none; border: 1px solid transparent; transition: background .2s ease, border-color .2s ease, transform .2s ease; cursor: pointer; } .v1-btn--lg { padding: 15px 28px; font-size: 15px; } .v1-btn--green { background: var(--v1-green-fill); color: #fff; } .v1-btn--green:hover { background: var(--v1-green-dim); transform: translateY(-1px); } .v1-btn--line { border-color: var(--v1-line); color: var(--v1-paper); } .v1-btn--line:hover { border-color: var(--v1-green-txt); color: var(--v1-green-txt); } /* ---------- nav ---------- */ .v1-nav { position: sticky; top: 0; z-index: 500; background: rgba(20,22,26,.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--v1-line-2); } .v1-nav__in { max-width: var(--v1-max); margin: 0 auto; padding: 14px var(--v1-gut); display: flex; align-items: center; gap: 24px; } .v1-nav__brand { flex: none; } .v1-nav__brand img { width: 152px; } .v1-nav__links { display: flex; gap: 26px; margin-left: auto; } .v1-nav__links a { color: var(--v1-muted); text-decoration: none; font-size: 14px; font-weight: 500; padding-block: 4px; border-bottom: 1px solid transparent; } .v1-nav__links a:hover { color: var(--v1-paper); border-bottom-color: var(--v1-green-txt); } .v1-nav__end { display: flex; align-items: center; gap: 14px; } .v1-nav__tel { font-family: var(--v1-disp); font-size: 14px; font-weight: 500; color: var(--v1-paper); text-decoration: none; } .v1-nav__tel:hover { color: var(--v1-green-txt); } .v1-burger { display: none; width: 40px; height: 34px; position: relative; background: transparent; border: 1px solid var(--v1-line); border-radius: 3px; } .v1-burger span:not(.sr-only) { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--v1-paper); transition: transform .25s ease; } .v1-burger span:not(.sr-only):nth-child(1) { top: 13px; } .v1-burger span:not(.sr-only):nth-child(2) { top: 19px; } .v1-burger[aria-expanded="true"] span:not(.sr-only):nth-child(1) { transform: translateY(3px) rotate(45deg); } .v1-burger[aria-expanded="true"] span:not(.sr-only):nth-child(2) { transform: translateY(-3px) rotate(-45deg); } .v1-drawer { display: flex; flex-direction: column; padding: 4px var(--v1-gut) 22px; background: var(--v1-ink); border-bottom: 1px solid var(--v1-line-2); } .v1-drawer[hidden] { display: none; } .v1-drawer a { color: var(--v1-paper); text-decoration: none; font-family: var(--v1-disp); font-size: 18px; font-weight: 500; padding: 12px 0; border-bottom: 1px solid var(--v1-line-2); } .v1-drawer .v1-btn { margin-top: 14px; justify-content: center; border-bottom: 0; font-size: 15px; } /* ============================================================ 1. HERO ============================================================ */ .v1-hero { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(30px, 4.5vw, 68px); align-items: start; max-width: var(--v1-max); margin: 0 auto; padding: clamp(38px, 5.5vw, 76px) var(--v1-gut) clamp(46px, 6vw, 86px); } .v1-hero__copy { min-width: 0; } .v1-hero__copy .v1-h1 { margin-top: 16px; } .v1-hero__cta { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; } /* het opnameformulier in de hero */ .v1-intake { margin-top: 30px; padding: 22px 22px 24px; background: var(--v1-ink-2); border: 1px solid var(--v1-line-2); border-left: 3px solid var(--v1-green-fill); border-radius: 3px; display: grid; gap: 20px; } .v1-field legend, .v1-field__lbl { font-family: var(--v1-disp); font-weight: 500; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--v1-muted); display: block; margin-bottom: 10px; } .v1-choice { display: flex; flex-wrap: wrap; gap: 8px; } .v1-choice label { position: relative; } .v1-choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .v1-choice span { display: block; padding: 9px 16px; border-radius: 3px; border: 1px solid var(--v1-line); font-size: 14px; color: var(--v1-paper); transition: background .18s ease, border-color .18s ease; } .v1-choice label:hover span { border-color: var(--v1-green-txt); } .v1-choice input:checked + span { background: var(--v1-green-fill); border-color: var(--v1-green-fill); color: #fff; } .v1-choice input:focus-visible + span { outline: 2px solid var(--v1-ink); outline-offset: 2px; box-shadow: 0 0 0 4px var(--v1-green-txt); } .v1-slider { display: flex; align-items: center; gap: 16px; } .v1-slider input[type="range"] { flex: 1; min-width: 0; height: 26px; /* eigen doos van 26px, LES over tikdoelen */ background: transparent; appearance: none; -webkit-appearance: none; margin: 0; } .v1-slider input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--v1-green-fill) 0 var(--v1-fill, 20%), rgba(244,245,240,.18) var(--v1-fill, 20%) 100%); } .v1-slider input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(244,245,240,.18); } .v1-slider input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--v1-green-fill); } .v1-slider input[type="range"]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: var(--v1-paper); border: 3px solid var(--v1-green-fill); cursor: pointer; } .v1-slider input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--v1-paper); border: 3px solid var(--v1-green-fill); cursor: pointer; } .v1-slider output { font-family: var(--v1-disp); font-weight: 700; font-size: 20px; min-width: 3.4ch; text-align: right; } .v1-field__hint { margin-top: 8px; font-size: 12.5px; color: var(--v1-muted); } .v1-hero__side { display: grid; gap: 18px; min-width: 0; } .v1-hero__fig { border-radius: 3px; overflow: hidden; } .v1-hero__fig img { width: 100%; } .v1-card { background: var(--v1-ink-3); border: 1px solid var(--v1-line-2); border-top: 3px solid var(--v1-green-fill); border-radius: 3px; padding: 22px; } .v1-card__kicker { font-family: var(--v1-disp); font-weight: 500; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--v1-green-txt); } .v1-card__h { font-family: var(--v1-disp); font-weight: 700; font-size: 1.25rem; margin-top: 8px; letter-spacing: -.02em; } .v1-card__list { margin-top: 18px; display: grid; gap: 1px; background: var(--v1-line-2); border: 1px solid var(--v1-line-2); } .v1-card__list > div { background: var(--v1-ink-3); padding: 11px 13px; display: flex; align-items: baseline; justify-content: space-between; gap: 14px; } .v1-card__list dt { font-family: var(--v1-disp); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--v1-muted); } .v1-card__list dd { font-weight: 600; font-size: 15px; text-align: right; } .v1-card__note { margin-top: 14px; font-size: 12.5px; line-height: 1.55; color: var(--v1-muted); } /* ============================================================ 2. FEITENBAND ============================================================ */ .v1-slab { background: var(--v1-ink-2); border-block: 1px solid var(--v1-line-2); padding-block: clamp(26px, 3.4vw, 40px); } .v1-slab__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .v1-fact { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .v1-fact__k { font-family: var(--v1-disp); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--v1-muted); } .v1-fact__v { font-size: 15px; font-weight: 500; overflow-wrap: anywhere; } .v1-fact__v a { color: var(--v1-paper); text-decoration: none; border-bottom: 1px solid var(--v1-green-txt); } .v1-fact__v a:hover { color: var(--v1-green-txt); } /* ============================================================ 3. BINNEN / BUITEN ============================================================ */ .v1-dip { padding-block: clamp(56px, 7vw, 104px); } .v1-dip__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); } .v1-dip__item figure { border-radius: 3px; overflow: hidden; margin-bottom: 18px; } .v1-dip__item img { width: 100%; } .v1-dip__item h3 { margin-bottom: 8px; } .v1-dip__item p { color: var(--v1-muted); font-size: 15px; line-height: 1.6; max-width: 42ch; } /* ============================================================ 4. DE OPNAME, LADDER ============================================================ */ .v1-ladder { padding-block: clamp(56px, 7vw, 104px); background: var(--v1-ink-2); border-block: 1px solid var(--v1-line-2); } .v1-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--v1-line-2); border: 1px solid var(--v1-line-2); } .v1-steps li { background: var(--v1-ink-2); padding: 24px 22px 26px; min-width: 0; } .v1-steps__n { font-family: var(--v1-disp); font-weight: 700; font-size: 12px; letter-spacing: .14em; color: var(--v1-green-txt); display: block; margin-bottom: 12px; } .v1-steps h3 { margin-bottom: 8px; } .v1-steps p { color: var(--v1-muted); font-size: 14.5px; line-height: 1.58; } /* ============================================================ 5. HET WERK, VERSPRINGEND RASTER ============================================================ */ .v1-grid { padding-block: clamp(56px, 7vw, 104px); } .v1-grid__set { display: grid; grid-template-columns: 1.35fr .9fr .75fr; gap: clamp(16px, 2.2vw, 26px); align-items: start; } .v1-grid__set figure { min-width: 0; } .v1-grid__set img { width: 100%; border-radius: 3px; } .v1-grid__b { margin-top: clamp(24px, 4vw, 56px); } .v1-grid__c { margin-top: clamp(48px, 8vw, 108px); } .v1-grid__set figcaption { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--v1-muted); } /* ============================================================ 6. DRIE WOORDEN ============================================================ */ .v1-three { padding-block: clamp(56px, 7vw, 104px); background: var(--v1-ink-2); border-block: 1px solid var(--v1-line-2); } .v1-three__h { font-family: var(--v1-disp); font-weight: 500; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--v1-muted); margin-bottom: 34px; } .v1-three__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3.6vw, 52px); } .v1-three__list li { min-width: 0; border-top: 2px solid var(--v1-green-fill); padding-top: 18px; } .v1-three__list b { display: block; font-family: var(--v1-disp); font-weight: 700; font-size: clamp(1.4rem, 3.1vw, 2.4rem); line-height: 1.05; letter-spacing: -.025em; margin-bottom: 12px; } .v1-three__list span { display: block; color: var(--v1-muted); font-size: 15px; line-height: 1.6; } /* ============================================================ 7. OFFERTEFORMULIER ============================================================ */ .v1-form { padding-block: clamp(56px, 7vw, 104px); } .v1-form__in { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(30px, 4.5vw, 68px); align-items: start; } .v1-form__aside .v1-h2 { margin-top: 12px; } .v1-form__alt { margin-top: 20px; font-size: 14.5px; color: var(--v1-muted); } .v1-form__alt a { color: var(--v1-paper); } .v1-form__form { background: var(--v1-ink-2); border: 1px solid var(--v1-line-2); border-radius: 3px; padding: clamp(20px, 2.6vw, 30px); display: grid; gap: 16px; } .v1-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .v1-inp { display: grid; gap: 7px; min-width: 0; } .v1-inp label { font-family: var(--v1-disp); font-weight: 500; font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--v1-muted); } .v1-inp input, .v1-inp select, .v1-inp textarea { width: 100%; padding: 11px 13px; border-radius: 3px; background: var(--v1-ink); color: var(--v1-paper); border: 1px solid var(--v1-line); font-size: 15px; } .v1-inp textarea { resize: vertical; } .v1-inp input:hover, .v1-inp select:hover, .v1-inp textarea:hover { border-color: var(--v1-muted-2); } .v1-submit { justify-self: start; margin-top: 4px; } .v1-form__demo { font-size: 12.5px; color: var(--v1-muted); } /* ============================================================ 8. CONTACT ============================================================ */ .v1-contact { padding-block: clamp(56px, 7vw, 104px); background: var(--v1-ink-2); border-top: 1px solid var(--v1-line-2); } .v1-contact__in { display: grid; grid-template-columns: 1fr .85fr; gap: clamp(30px, 4.5vw, 64px); align-items: center; } .v1-contact__in .v1-h2 { margin-top: 12px; } .v1-clist { margin-top: 28px; display: grid; gap: 1px; background: var(--v1-line-2); border: 1px solid var(--v1-line-2); } .v1-clist li { background: var(--v1-ink-2); padding: 12px 14px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .v1-clist span { font-family: var(--v1-disp); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--v1-muted); } .v1-clist a, .v1-clist b { font-size: 15px; font-weight: 500; color: var(--v1-paper); text-decoration: none; text-align: right; overflow-wrap: anywhere; } .v1-clist a:hover { color: var(--v1-green-txt); } .v1-contact__cta { margin-top: 24px; } .v1-contact__fig img { width: 100%; border-radius: 3px; } /* ============================================================ FOOTER ============================================================ */ .v1-foot { background: var(--v1-ink); border-top: 1px solid var(--v1-line-2); padding-block: clamp(40px, 5vw, 64px) 96px; } .v1-foot__in { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; } .v1-foot__logo { width: 168px; } .v1-foot__addr { font-size: 14px; color: var(--v1-muted); } .v1-foot__credit { font-size: 13px; color: var(--v1-muted); } .v1-foot__credit a { color: var(--v1-paper); text-decoration: underline; text-underline-offset: 3px; } .v1-foot__credit a:hover { color: var(--v1-green-txt); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1040px) { .v1-hero { grid-template-columns: 1fr; } .v1-hero__side { grid-template-columns: 1fr; } .v1-slab__grid { grid-template-columns: 1fr 1fr; } .v1-steps { grid-template-columns: 1fr 1fr; } .v1-grid__set { grid-template-columns: 1fr 1fr; } .v1-grid__c { grid-column: 1 / -1; max-width: 420px; margin-top: 8px; } .v1-form__in { grid-template-columns: 1fr; } .v1-contact__in { grid-template-columns: 1fr; } } @media (max-width: 860px) { /* Alleen inklappen als JavaScript de lade ook echt kan openen. Zonder .js blijven de links staan en wikkelen ze gewoon, want een hamburger die niets doet laat een mobiele bezoeker zonder navigatie achter. */ .js .v1-nav__links, .js .v1-nav__tel { display: none; } .js .v1-nav__end .v1-btn--green { display: none; } .js .v1-burger { display: block; } .v1-nav__in { flex-wrap: wrap; } .v1-nav__links { flex-wrap: wrap; gap: 14px 18px; margin-left: 0; width: 100%; } .v1-nav__end { margin-left: auto; } .v1-dip__grid { grid-template-columns: 1fr; } .v1-three__list { grid-template-columns: 1fr; } .v1-three__list li { border-top-width: 2px; } } @media (max-width: 620px) { .v1-slab__grid { grid-template-columns: 1fr; gap: 16px; } .v1-steps { grid-template-columns: 1fr; } .v1-grid__set { grid-template-columns: 1fr; } .v1-grid__b, .v1-grid__c { margin-top: 0; } .v1-row { grid-template-columns: 1fr; } .v1-btn { white-space: normal; text-align: center; } /* de vaste wisselaar zit rechtsonder; houd de primaire actie uit die hoek */ .v1-hero { padding-bottom: 96px; } .v1-hero__cta .v1-btn { width: 100%; } .v1-clist li { flex-direction: column; align-items: flex-start; gap: 4px; } .v1-clist a, .v1-clist b { text-align: left; } /* de vaste wisselaar mag de laatste actie niet bedekken (LES 12) */ .v1-foot { padding-bottom: 104px; } }