/* ===================================================================== Verhoeven & Partners — accountants & adviseurs Voorbeeldproject / portfoliodemo van Klaassens Digital Ontwerptaal: Zwitsers jaarverslag. Streng grid, 1px-hairlines, royale witruimte, serif-koppen. Geen kaarten, geen schaduwen, geen decoratief beeld — alleen teamportretten. ===================================================================== */ :root { --paper: #fbfbf9; /* koel off-white canvas */ --ink: #14202b; /* diepe navy-inkt */ --ink-soft: #46525d; /* gedempte tekst */ --hairline: #d8d6d0; /* de enige lijn */ --accent: #8a5a38; /* gedempt koper — spaarzaam */ --serif: Georgia, "Times New Roman", Times, serif; --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Courier New", monospace; --wrap: 74rem; --gutter: clamp(1.25rem, 5vw, 3rem); } /* ---------- Basis ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; /* iOS Safari toont bij de overscroll-bounce voorbij de footer de canvas-kleur van . Stond die op niets, dan was dat wit. Nu is het de kleur van de eigen voet, dus je veert in de site door. overscroll-behavior alleen op html, niet op body. */ background: var(--paper); overscroll-behavior-y: none; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { min-height: 100svh; font-family: var(--sans); font-size: 1rem; line-height: 1.65; color: var(--ink); background: var(--paper); overflow-wrap: break-word; } h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--ink); } img { display: block; max-width: 100%; height: auto; } a { color: inherit; } ::selection { background: var(--ink); color: var(--paper); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ---------- Skip-link ---------- */ .skip { position: absolute; left: -999px; top: 0; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.25rem; background: var(--ink); color: var(--paper); text-decoration: none; font-size: .875rem; } .skip:focus { left: 0; } /* ---------- Disclaimernotitie ---------- */ .note { border-bottom: 1px solid var(--hairline); font-size: .8125rem; color: var(--ink-soft); } .note__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1.5rem; } .note__in span { padding-block: .5rem; } .note a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; text-underline-offset: 3px; text-decoration-color: var(--hairline); } .note a:hover { color: var(--ink); text-decoration-color: var(--accent); } /* ---------- Sticky top-nav ---------- */ .topbar { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--hairline); } .topbar__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1rem; padding-block: .3rem; } .wordmark { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; font-family: var(--serif); font-size: 1.125rem; letter-spacing: .02em; text-decoration: none; } .wordmark__amp { color: var(--accent); } .topnav { display: flex; flex-wrap: wrap; list-style: none; gap: 0 .25rem; } .topnav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .625rem; font-size: .875rem; letter-spacing: .04em; color: var(--ink-soft); text-decoration: none; } .topnav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--accent); } /* ---------- Hero — typografisch ---------- */ .hero { padding-bottom: clamp(3rem, 8vw, 6rem); } .hero__in { min-height: 56svh; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(4rem, 12svh, 9rem) clamp(3.5rem, 10svh, 7rem); } .kicker { font-family: var(--mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .18em; color: var(--ink-soft); } .hero h1 { margin-top: 2.5rem; max-width: 21ch; font-size: clamp(2.375rem, 6vw + .5rem, 4.75rem); line-height: 1.05; letter-spacing: -.015em; text-wrap: balance; } .lead { margin-top: 2rem; max-width: 34rem; font-size: 1.0625rem; color: var(--ink-soft); } .hero__cta { margin-top: 3rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2.25rem; } /* ---------- Knoppen & tekstlinks ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .5rem 1.75rem; background: var(--ink); color: var(--paper); border: 0; border-radius: 0; font-family: var(--sans); font-size: .9375rem; letter-spacing: .03em; text-decoration: none; cursor: pointer; } .btn:hover { background: var(--accent); } .btn--wide { width: 100%; margin-top: 2.25rem; } .textlink { display: inline-flex; align-items: center; min-height: 44px; font-size: .9375rem; color: var(--ink-soft); text-underline-offset: 4px; text-decoration-color: var(--hairline); } .textlink:hover { color: var(--ink); text-decoration-color: var(--accent); } /* ---------- Kerncijfers — hairline-rij ---------- */ .facts { list-style: none; display: grid; border-top: 1px solid var(--hairline); } /* Het getal boven het label in plaats van ernaast. Naast elkaar liepen de labels uit de pas doordat "35+", "RA & AA" en "1" sterk in breedte verschillen — dat was wat de rij scheef deed ogen. Gestapeld begint elk item op dezelfde x, ongeacht hoe breed het getal is. */ .facts li { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: .3rem; padding-block: 1.1rem; border-top: 1px solid var(--hairline); font-size: .875rem; color: var(--ink-soft); } .facts li:first-child { border-top: 0; } .facts strong { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; color: var(--ink); white-space: nowrap; } @media (min-width: 720px) { /* Gelijke kolommen, gelijke hoogte (stretch), en ELK item dezelfde binnenruimte — eerder had alleen kolom 1 geen padding-left, waardoor de drie kolommen hun inhoud op verschillende posities begonnen. */ .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } .facts li { border-top: 0; padding-block: 1.5rem; padding-inline: 2rem; } .facts li:first-child { padding-left: 0; } .facts li + li { border-left: 1px solid var(--hairline); } } /* ---------- Sectieskelet: nummer in de marge ---------- */ .sec { border-top: 1px solid var(--hairline); padding-block: clamp(3.5rem, 9vw, 7.5rem); scroll-margin-top: 5rem; } .sec__grid { display: grid; gap: 2.25rem; } .sec__label { display: flex; gap: .875rem; font-family: var(--mono); font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); } .sec__label span { color: var(--ink-soft); } @media (min-width: 900px) { .sec__grid { grid-template-columns: 11rem minmax(0, 1fr); gap: 3rem; } .sec__label { flex-direction: column; gap: .3rem; position: sticky; top: 5.5rem; align-self: start; } } .sec h2 { max-width: 24ch; font-size: clamp(1.875rem, 2.4vw + 1rem, 2.75rem); line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; } .sec__intro { margin-top: 1.25rem; max-width: 38rem; color: var(--ink-soft); } /* ---------- 01 Diensten — lijst met hairlines ---------- */ .svc { list-style: none; margin-top: 3.25rem; border-bottom: 1px solid var(--hairline); } .svc li { display: grid; gap: .4rem 2.5rem; padding-block: 1.75rem; border-top: 1px solid var(--hairline); } @media (min-width: 720px) { .svc li { grid-template-columns: 3rem 15rem minmax(0, 1fr); align-items: baseline; padding-block: 2.25rem; } } .svc__i { font-family: var(--mono); font-size: .75rem; letter-spacing: .12em; color: var(--accent); } .svc h3 { font-size: 1.375rem; line-height: 1.25; } .svc p { max-width: 44rem; font-size: .9375rem; color: var(--ink-soft); } /* ---------- 02 Team — portretten, het enige beeld ---------- */ .team { list-style: none; margin-top: 3.25rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1.5rem; } @media (min-width: 900px) { .team { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem 2rem; } } .team img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; filter: grayscale(1); } .team__name { margin-top: 1rem; font-family: var(--serif); font-size: 1.0625rem; line-height: 1.35; } .team__role { margin-top: .2rem; font-size: .8125rem; letter-spacing: .02em; color: var(--ink-soft); } /* ---------- 03 Over ons ---------- */ .prose { margin-top: 1.5rem; max-width: 40rem; color: var(--ink-soft); } .prose p + p { margin-top: 1.25rem; } .values { list-style: none; margin-top: 2.5rem; max-width: 40rem; } .values li { padding-block: .9rem; border-top: 1px solid var(--hairline); font-size: .9375rem; color: var(--ink-soft); } .values li:last-child { border-bottom: 1px solid var(--hairline); } .values strong { font-weight: 600; color: var(--ink); } .sub { margin-top: 3.5rem; font-size: 1.375rem; } .steps { list-style: none; margin-top: 1.25rem; max-width: 40rem; } .steps li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: baseline; padding-block: .9rem; border-top: 1px solid var(--hairline); font-size: .9375rem; color: var(--ink-soft); } .steps li:last-child { border-bottom: 1px solid var(--hairline); } .steps__n { font-family: var(--mono); font-size: .75rem; letter-spacing: .12em; color: var(--accent); } /* ---------- 04 Contact ---------- */ /* Géén twee kolommen. Dit blok zit al binnen sec__grid (11rem-labelkolom + 3rem gap), dus een tweede splitsing perst twee kolommen in wat er overblijft — ook op 1440. Nu: gegevens als horizontale hairline-rij (dezelfde taal als de .facts-rij in de hero), formulier daaronder over de volle breedte. */ .contact { margin-top: 2.5rem; } .contact__info .sec__intro { margin-top: 0; } .details { margin-top: clamp(2.25rem, 4vw, 3rem); display: grid; border-top: 1px solid var(--hairline); } .details > div { padding-block: 1.15rem; border-top: 1px solid var(--hairline); } .details > div:last-child { border-bottom: 1px solid var(--hairline); } @media (min-width: 560px) { .details { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 860px) { .details { grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--hairline); } /* Zelfde correctie als bij .facts: élk blok dezelfde binnenruimte, zodat de vier kolommen hun inhoud op dezelfde positie beginnen in plaats van dat alleen kolom 1 flush staat. */ .details > div { border-top: 0; border-bottom: 0; padding-block: 1.75rem; padding-inline: 2rem; } .details > div:first-child { padding-left: 0; } .details > div + div { border-left: 1px solid var(--hairline); } .details > div:last-child { border-bottom: 0; } } .details dt { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .16em; color: var(--ink-soft); } .details dd { margin: .55rem 0 0; font-size: .9375rem; line-height: 1.5; /* Ook de niet-gelinkte regels (adres, KvK) mogen nooit buiten hun vak. */ min-width: 0; overflow-wrap: break-word; } /* Formulier: volle breedte, ruim. Korte velden naast elkaar zodra dat kan — dat is de breedte benutten, niet hem opdelen. */ .contact__form { margin-top: clamp(2.75rem, 5vw, 4.5rem); } .form .btn { margin-top: 2.25rem; } @media (min-width: 640px) { .form { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(1.5rem, 3vw, 2.5rem); row-gap: 0; align-items: start; } .form__note, .form .field--wide, .form .btn, .form__feedback { grid-column: 1 / -1; } .form .btn { justify-self: start; } } .details a { display: inline-flex; align-items: center; min-height: 44px; /* Hier zat de overflow: een inline-flex groeit tot zijn max-content breedte en kan niet over regels breken. Het e-mailadres was daardoor 205px breed in een kolom van 152px en stak dwars door de scheidingslijn heen. max-width dwingt hem binnen de kolom, overflow-wrap laat de tekst afbreken als het adres alsnog te lang is voor één regel. */ max-width: 100%; overflow-wrap: anywhere; text-underline-offset: 3px; text-decoration-color: var(--hairline); } .details a:hover { text-decoration-color: var(--accent); } /* ---------- Formulier — hairline-onderlijnen, geen dozen ---------- */ .form__note { padding-bottom: .9rem; border-bottom: 1px solid var(--hairline); font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--accent); } .field { margin-top: 1.75rem; display: flex; flex-direction: column; gap: .3rem; } .field label { font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); } .field input, .field textarea { font: inherit; font-size: 1rem; /* 16px — voorkomt iOS-zoom */ color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0; padding: .55rem 0; } .field input { min-height: 44px; } .field textarea { min-height: 7rem; resize: vertical; } .field input:focus-visible, .field textarea:focus-visible { outline: none; border-bottom-color: var(--accent); } .form__feedback { margin-top: 1.25rem; font-size: .9375rem; color: var(--accent); } .form__feedback:focus { outline: none; } /* ---------- Footer ---------- */ .footer { border-top: 1px solid var(--hairline); padding-block: 3rem calc(3rem + env(safe-area-inset-bottom)); font-size: .8125rem; color: var(--ink-soft); } .footer__in { display: grid; gap: .35rem; } .footer__brand { font-family: var(--serif); font-size: .9375rem; color: var(--ink); } .footer__note { margin-top: 1.25rem; } .footer a { text-underline-offset: 3px; text-decoration-color: var(--hairline); } .footer a:hover { color: var(--ink); text-decoration-color: var(--accent); } /* De sticky mobiele contactbalk is verwijderd: vastgeplakte balken onderin beeld willen we nergens meer. Bellen en de kennismaking staan bovenaan in de header en in de contactsectie. Daarmee vervalt ook de padding-bottom op body, die een strook body-kleur onder de footer liet staan. */