/* ============================================================ HETT Veranda — stylesheet Gebaseerd op design_handoff_hett_veranda/tokens.css (richting 2a, definitief). Het ontwerp gebruikt inline styles; die zijn hier omgezet naar componentklassen. Reden: inline styles zijn niet te thematiseren, niet te overschrijven en niet te onderhouden. Alle waarden komen letterlijk uit het tokenbestand. ============================================================ */ /* ---------------------------------------------------------- tokens */ :root { --hett-orange: #FF7300; --hett-orange-hover: #E56700; --hett-orange-text: #C24E00; --hett-ink: #14161A; --hett-ink-2: #23262B; --hett-ink-3: #2C2F35; --hett-body: #4A4E57; --hett-muted: #7A7E88; --hett-line: #ECE8E2; --hett-line-strong: #D9D5CF; --hett-line-input: #E4E0DA; --hett-surface: #FAFAF8; --hett-surface-2: #F4F3F0; --hett-sand: #FFF4EA; --hett-tint: #FFF7F0; --hett-photo-bg: #E9E4DD; --hett-on-dark: #FFFFFF; --hett-on-dark-body: #B7BAC1; --hett-on-dark-muted: #9AA0AA; --hett-on-dark-line: #262A31; --hett-star: #FFB400; --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --fs-hero: 50px; --lh-hero: 1.05; --ls-hero: -0.035em; --fs-hero-mark: 43px; --lh-hero-mark: 1.07; --fs-h1-page: 38px; --lh-h1-page: 1.12; --fs-h2: 31px; --lh-h2: 1.20; --ls-h2: -0.03em; --fs-h2-sm: 29px; --fs-h3: 23px; --lh-h3: 1.25; --fs-h4: 20px; --lh-h4: 1.30; --fs-eyebrow: 14px; --ls-eyebrow: 0.12em; --fs-eyebrow-sec: 13px; --ls-eyebrow-sec: 0.16em; --fs-lead: 18px; --lh-lead: 1.60; --fs-intro: 18px; --lh-intro: 1.70; --fs-body: 17px; --lh-body: 1.6; --fs-ui: 16px; --fs-meta: 15px; --lh-meta: 1.55; --fs-fine: 13px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-9: 36px; --sp-10: 44px; --sp-11: 52px; --sp-12: 64px; --sp-13: 84px; --sp-14: 88px; --page-x: 36px; --page-x-mobile: 16px; --section-y: 68px; --section-y-mobile: 34px; --panel-pad: clamp(20px, 4vw, 44px); --grid-gap: 22px; --grid-gap-wide: 44px; --r-hero: 20px; --r-panel: 20px; --r-card: 16px; --r-media: 14px; --r-media-lg: 18px; --r-input: 12px; --r-btn-square: 14px; --r-pill: 999px; --shadow-menu: 0 14px 40px rgba(20, 22, 26, .10); --ease: cubic-bezier(.2, 0, .2, 1); --dur-fast: 150ms; --dur: 200ms; --content-max: 1440px; /* Hoogte van de menubalk. Staat als variabele omdat de hero er precies zoveel bovenruimte bij krijgt als de balk eroverheen ligt. */ --hett-navhoogte: 102px; } @media (max-width: 640px) { :root { --fs-hero: 38px; --fs-hero-mark: 32px; --fs-h1-page: 30px; --fs-h2: 26px; --fs-h2-sm: 24px; --fs-h3: 21px; --fs-h4: 19px; --fs-lead: 17px; --fs-intro: 16px; --fs-body: 16px; --page-x: var(--page-x-mobile); --section-y: var(--section-y-mobile); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ---------------------------------------------------------- basis */ /* Eén element dat over de rand steekt maakt het document breder dan het scherm, en een telefoon zoomt dan uit om alles te laten passen — de pagina lijkt ineens verkleind. `clip` snijdt dat af zonder een scrollcontainer te maken; met `hidden` zou position: sticky in de header het niet meer doen. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html, body { overflow-x: clip; max-width: 100%; } /* Zonder border-box lopen knoppen met width:100% plus padding buiten hun kolom. Hello Elementor zet dit zelf niet op alles, dus binnen onze eigen scope wel. */ .hett, .hett *, .hett *::before, .hett *::after { box-sizing: border-box; } .hett-scope, body.hett { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--hett-body); background: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* :where() houdt de specificiteit op nul. Zonder dat wint `.hett a` van `.hett-btn--light` en `.hett h1` van `.hett-hero__title`, met witte tekst op een witte knop en een donkere kop op een donker paneel tot gevolg. */ .hett :where(h1, h2, h3, h4) { color: var(--hett-ink); font-weight: 800; margin: 0; } .hett :where(p) { margin: 0; } .hett :where(a) { color: inherit; text-decoration: none; } .hett :where(img) { max-width: 100%; height: auto; display: block; } .hett-wrap { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--page-x); } .hett-section { padding-block: var(--section-y); } .hett-section--tight { padding-block: calc(var(--section-y) * .6); } .hett-eyebrow { font-size: var(--fs-eyebrow); font-weight: 800; line-height: 1; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--hett-orange); } .hett-eyebrow--sec { font-size: var(--fs-eyebrow-sec); font-weight: 700; letter-spacing: var(--ls-eyebrow-sec); color: var(--hett-muted); } .hett-h1 { font-size: var(--fs-h1-page); line-height: var(--lh-h1-page); letter-spacing: -.035em; text-wrap: pretty; } .hett-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); text-wrap: pretty; } .hett-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: -.02em; } .hett-h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: -.02em; } .hett-intro { font-size: var(--fs-intro); line-height: var(--lh-intro); color: var(--hett-body); max-width: 62ch; } .hett-lead { font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: 500; } .hett-meta { font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: 500; color: var(--hett-muted); } .hett-fine { font-size: var(--fs-fine); font-weight: 600; color: var(--hett-muted); } /* ---------------------------------------------------------- knoppen */ .hett-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 26px; border: 1px solid transparent; border-radius: var(--r-pill); font: 700 var(--fs-ui)/1 var(--font-sans); cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .hett-btn--primary { background: var(--hett-orange); color: #fff; } .hett-btn--primary:hover { background: var(--hett-orange-hover); color: #fff; } .hett-btn--dark { background: var(--hett-ink); color: #fff; } .hett-btn--dark:hover { background: #000; color: #fff; } .hett-btn--light { background: #fff; color: var(--hett-ink); } .hett-btn--light:hover { background: var(--hett-surface); } .hett-btn--outline { background: transparent; border-color: var(--hett-line-strong); color: var(--hett-ink); } .hett-btn--outline:hover { border-color: var(--hett-ink); } .hett-btn--on-dark { background: transparent; border-color: rgba(255,255,255,.28); color: #fff; } .hett-btn--on-dark:hover { background: rgba(255,255,255,.10); } .hett-btn--square { border-radius: var(--r-btn-square); } .hett-btn--block { display: flex; width: 100%; padding-inline: 15px; } .hett-btn:focus-visible, .hett-link:focus-visible { outline: 3px solid var(--hett-orange); outline-offset: 2px; } .hett-link { font: 700 var(--fs-ui)/1 var(--font-sans); color: var(--hett-ink); transition: color var(--dur) var(--ease); } .hett-link:hover { color: var(--hett-orange); } /* ---------------------------------------------------------- topbalk */ /* De z-index staat hoger dan die van de header eronder, en niet zomaar: de header heeft `position: relative; z-index: 40` en maakt daarmee een eigen stapelcontext. De topbalk stond in de gewone stroom, dus alles wat daarin uitklapt — de taalwissel — werd door de header overschilderd, hoe hoog de z-index van dat uitklapmenu zelf ook stond. Die telt namelijk alleen mee binnen zijn eigen context. Elkaar overlappen doen ze verder nooit: tegen de tijd dat de sticky header vastklikt is de topbalk het scherm al uit. */ .hett-topbar { position: relative; z-index: 50; border-bottom: 1px solid var(--hett-line); background: #fff; font-size: var(--fs-meta); } /* ----------------------------------------------------------- taalbalk "Diese Seite gibt es auch auf Deutsch." Boven de topbalk, in de gewone stroom, alleen voor wie een andere taal in zijn browser heeft staan. Waarom bovenaan en niet zwevend onderin: onderin zit op een telefoon al de actiebalk, en zwevend zou hij over het toestemmingsvenster van Complianz heen of eronder vallen. Boven de pagina duwt hij alles netjes één strook naar beneden, en omdat het scriptje dat hem tevoorschijn haalt direct onder de markup staat gebeurt dat vóór de eerste tekening — er verspringt niets. Oranje tint en geen inkt: het is een aanbod, geen waarschuwing. */ .hett-taalbalk { display: block; background: var(--hett-tint); border-bottom: 1px solid rgba(255, 115, 0, .22); font-size: var(--fs-meta); color: var(--hett-ink); } /* Zonder deze regel wint `display: block` hierboven van het hidden-attribuut en staan alle drie de balken tegelijk in beeld. */ .hett-taalbalk[hidden] { display: none; } .hett-taalbalk__inner { display: flex; align-items: center; gap: var(--sp-3); min-height: 46px; padding-block: 8px; } .hett-taalbalk__vlag { display: flex; flex: none; } .hett-taalbalk__tekst { font-weight: 600; min-width: 0; } .hett-taalbalk__knop { display: inline-flex; align-items: center; flex: none; min-height: 32px; padding: 6px 14px; border-radius: var(--r-pill); background: var(--hett-orange); color: #fff; font-weight: 700; white-space: nowrap; transition: background var(--dur) var(--ease); } .hett-taalbalk__knop:hover { background: var(--hett-orange-hover); color: #fff; } .hett-taalbalk__knop:focus-visible { outline: 2px solid var(--hett-ink); outline-offset: 2px; } /* Het kruisje staat rechts en duwt zichzelf daarheen, zodat de tekst en de knop bij elkaar blijven staan ook als de balk breder is dan ze nodig hebben. */ .hett-taalbalk__sluit { margin-inline-start: auto; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; /* Zonder deze regel tekent de browser zijn eigen `2px outset` om de knop en krijgt het kruisje een grijze ring die harder roept dan de oranje knop ernaast. Hello Elementor haalt hem meestal weg, maar daar wil je niet van afhangen. */ border: 0; cursor: pointer; border-radius: var(--r-pill); color: var(--hett-muted); transition: color var(--dur) var(--ease), background var(--dur) var(--ease); } @media (max-width: 700px) { /* Op een telefoon past de zin niet naast de knop. Dan de zin op de eerste regel met het kruisje erachter, en de knop eronder over de volle breedte — daar hoef je niet naar te mikken. */ .hett-taalbalk__inner { flex-wrap: wrap; row-gap: 8px; padding-block: 8px; min-height: 0; } /* flex-basis 0 en niet auto: met auto claimt de zin zijn volle tekstbreedte, duwt hij het kruisje naar de volgende regel en wordt de balk een blok van 136 pixels. Zo krimpt hij mee en staat het kruisje ernaast. */ .hett-taalbalk__tekst { flex: 1 1 0; min-width: 0; line-height: 1.35; } .hett-taalbalk__sluit { order: 1; } .hett-taalbalk__knop { order: 2; flex: 1 0 100%; justify-content: center; min-height: 42px; } } /* De USP's staan links, de reviews en de contactpictogrammen rechts. Het rechterblok stond hier absoluut, zodat de USP-rij niet zou meeschuiven met de breedte ervan. Dat werkte tot er drie dingen bij kwamen — de contactpictogrammen, het cijfer vóór de sterren en een langer reviewaantal — en toen bleek waar absoluut positioneren altijd op stukloopt: het blok neemt geen ruimte in, dus de USP-rij weet niet dat het er is en schuift er gewoon onderdoor. Vanaf 1280 px las je "Levertijd 5 tot 10 werkdag24 reviews". Nu staat alles in de normale stroom en duwt het rechterblok zichzelf met `margin-inline-start: auto` naar de rand. Overlappen kan dan niet meer; wat wél kan is dat het te krap wordt, en dat vangen de twee breekpunten verderop op door de laatste USP's weg te laten. Die getallen zijn gemeten, niet gegokt: drie USP's passen vanaf 1350, twee vanaf 1070. */ .hett-topbar__inner { position: relative; display: flex; align-items: center; justify-content: flex-start; gap: var(--sp-6); min-height: 46px; padding-block: 8px; flex-wrap: nowrap; } .hett-topbar__right { margin-inline-start: auto; } /* Vangnet voor een USP-tekst die langer wordt dan waar de breekpunten op gemeten zijn: dan wordt de laatste afgeknipt in plaats van dat de balk twee regels hoog wordt of de tekst alsnog onder het cijfer doorschuift. */ .hett-topbar .hett-ticker { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; overflow: hidden; } @media (max-width: 1360px) { .hett-topbar .hett-ticker__item:nth-child(n+3) { display: none; } } @media (max-width: 1120px) { .hett-topbar .hett-ticker__item:nth-child(n+2) { display: none; } } .hett-topbar__list { display: flex; gap: var(--sp-6); flex-wrap: wrap; margin: 0; padding: 0; list-style: none; } .hett-topbar__item { display: flex; align-items: center; gap: 8px; color: var(--hett-body); font-weight: 500; } .hett-topbar__check { color: var(--hett-orange); flex: none; } .hett-topbar__right { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; min-width: 0; } .hett-topbar__stars { color: var(--hett-star); letter-spacing: 1px; } /* De beoordeling gaat naar het Google-profiel. Sterren en cijfer zitten in één anker, zodat er één raakvlak is en niet twee kleintjes naast elkaar. */ .hett-topbar__score { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px; margin: -4px -8px; border-radius: var(--r-pill); transition: background var(--dur) var(--ease); } .hett-topbar__score:hover { background: var(--hett-surface-2); } .hett-topbar__score:hover .hett-topbar__reviews { color: var(--hett-orange-text); } .hett-topbar__score:focus-visible { outline: 2px solid var(--hett-orange); outline-offset: 2px; } /* Hello Elementor levert deze klasse zelf ook, maar daar wil je niet van afhangen: zonder deze regel staat de toelichting voor schermlezers gewoon zichtbaar in de balk. */ .hett .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .hett-topbar__reviews { font-weight: 700; color: var(--hett-ink); } /* Het cijfer staat voor de sterren, zoals Google het zelf ook zet: eerst het getal, dan het beeld dat het herhaalt. Beide komen uit de Places-API zodra de plaats-id staat — een getal dat je met de hand bijhoudt klopt precies één dag. */ .hett-topbar__cijfer { font-weight: 800; color: var(--hett-ink); } /* Showroom, e-mail en telefoon als pictogram, rechts in de balk. Alleen het icoon en geen tekst: de topbalk is één regel hoog, en een adres plus een e-mailadres plus een nummer maakt die regel op een laptop al vol — dan verspringt de rest. Wie de tekst er toch bij wil zet de schakelaar om in Elementor. De uitleg voor een schermlezer staat er altijd bij; een svg zonder tekst is voor die bezoeker een lege link. De streep links scheidt ze van de beoordeling. Zonder die streep lezen het cijfer en de drie iconen als één groepje, en dat zijn het niet. */ .hett-topbar__contact { display: flex; align-items: center; gap: 2px; padding-inline-start: var(--sp-4); border-inline-start: 1px solid var(--hett-line); } .hett-topbar__ico { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 6px 8px; border-radius: var(--r-pill); color: var(--hett-muted); transition: color var(--dur) var(--ease), background var(--dur) var(--ease); } .hett-topbar__ico svg { flex: none; } a.hett-topbar__ico:hover { color: var(--hett-orange-text); background: var(--hett-surface-2); } a.hett-topbar__ico:focus-visible { outline: 2px solid var(--hett-orange); outline-offset: 2px; } .hett-topbar__icotekst { display: none; } .hett-topbar__contact--tekst .hett-topbar__icotekst { display: inline; font-weight: 600; color: var(--hett-body); } .hett-topbar__contact--tekst a.hett-topbar__ico:hover .hett-topbar__icotekst { color: var(--hett-orange-text); } /* De talenrij onderin het uitschuifmenu. Zie de toelichting in de header-widget: een uitklapper die onderaan een schuifbaar paneel opent valt buiten beeld, en met drie talen kost de rij evenveel ruimte als de knop die ze zou verbergen. Vlag plus landcode en niet de hele taalnaam: op een telefoon van 390 pixels houdt elk vakje zo'n zeventig pixels tekstruimte over, en "Nederlands" past daar niet in zonder af te kappen. De volle naam staat er wel, onzichtbaar, voor wie het scherm niet ziet. */ .hett-langrij { display: flex; gap: 8px; padding-top: 4px; } .hett-langrij__item { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 44px; padding: 8px 10px; border: 1px solid var(--hett-line); border-radius: var(--r-input); font-weight: 700; font-size: 14px; color: var(--hett-body); } .hett-langrij__item svg, .hett-langrij__item img { flex: none; } .hett-langrij__code { letter-spacing: .04em; } .hett-langrij__item.is-active { border-color: var(--hett-orange); background: var(--hett-tint); color: var(--hett-orange-text); } /* De oude, uitgeklapte talenrij is vervangen door de uitklapper verderop in dit bestand. Wat hier stond zette elke link in hoofdletters — ook de taalnamen in het menu — en is daarom weg. */ /* ---------------------------------------------------------- header */ .hett-header { background: #fff; border-bottom: 1px solid var(--hett-line); position: relative; z-index: 40; } .hett-header--sticky { position: sticky; top: 0; } .hett-header__inner { display: flex; align-items: center; gap: var(--sp-8); min-height: var(--hett-navhoogte); } .hett-logo { font: 800 22px/1 var(--font-sans); color: var(--hett-ink); letter-spacing: -.03em; flex: none; } .hett-logo span { font-weight: 400; } .hett-logo img { height: 38px; width: auto; max-width: 100%; } .hett-nav { display: flex; align-items: center; gap: var(--sp-6); margin-inline-start: var(--sp-4); } .hett-nav__link { position: relative; padding-block: 6px; font: 700 var(--fs-ui)/1.2 var(--font-sans); color: var(--hett-ink); display: inline-flex; align-items: center; gap: 6px; } .hett-nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--hett-orange); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease); } .hett-nav__link:hover::after, .hett-nav__item.is-current > .hett-nav__link::after { transform: scaleX(1); } .hett-nav__item { position: relative; } /* Onzichtbare brug tussen het menu-item en de uitklapper. Zonder dit valt de muis door de tussenruimte en sluit het menu voordat je een subitem kunt aanklikken. De brug hoort bij het item, niet bij het menu — dan blijft het uitklapmenu zelf één schoon wit paneel. */ .hett-nav__item--has-sub::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 26px; display: none; } .hett-nav__item--has-sub:hover::after, .hett-nav__item--has-sub.is-open::after { display: block; } .hett-nav__sub { position: absolute; top: calc(100% + 26px); left: -18px; min-width: 250px; padding: 10px; background: #fff; border: 1px solid var(--hett-line); border-radius: var(--r-panel); box-shadow: var(--shadow-menu); display: none; margin: 0; list-style: none; z-index: 50; } .hett-nav__item.is-open > .hett-nav__sub { display: block; } .hett-nav__sub a { display: block; padding: 11px 14px; border-radius: 12px; font-weight: 600; color: var(--hett-ink); white-space: nowrap; } .hett-nav__sub a:hover { background: var(--hett-surface); } .hett-header__actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--sp-4); } .hett-burger { display: none; width: 46px; height: 46px; align-items: center; justify-content: center; border: 1px solid var(--hett-line-strong); border-radius: 12px; background: #fff; color: var(--hett-ink); cursor: pointer; } .hett-drawer { position: fixed; inset: 0; z-index: 60; display: none; } .hett-drawer.is-open { display: block; } .hett-drawer__scrim { position: absolute; inset: 0; background: rgba(20,22,26,.5); } .hett-drawer__panel { position: absolute; inset-block: 0; inset-inline-start: 0; width: min(86%, 380px); background: #fff; display: flex; flex-direction: column; overflow-y: auto; } .hett-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 18px var(--page-x-mobile); border-bottom: 1px solid var(--hett-line); } .hett-drawer__nav { padding: 8px 0; } .hett-drawer__nav a { display: flex; align-items: center; justify-content: space-between; padding: 16px var(--page-x-mobile); font: 700 17px/1.3 var(--font-sans); color: var(--hett-ink); border-bottom: 1px solid var(--hett-line); } .hett-drawer__foot { margin-top: auto; padding: 20px var(--page-x-mobile) 28px; display: grid; gap: 10px; } /* ---------------------------------------------------------- hero */ .hett-hero { padding: 0 28px; } .hett-hero__panel { position: relative; border-radius: var(--r-hero); background: var(--hett-ink-3); color: #fff; overflow: hidden; min-height: 560px; display: flex; align-items: center; } .hett-hero__media { position: absolute; inset: 0; } .hett-hero__media img { width: 100%; height: 100%; object-fit: cover; } .hett-hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,22,26,.82) 0%, rgba(20,22,26,.62) 45%, rgba(20,22,26,.25) 100%); } .hett-hero__body { position: relative; padding: var(--panel-pad); max-width: 640px; } .hett-hero__title { font-size: var(--fs-hero); line-height: var(--lh-hero); letter-spacing: var(--ls-hero); color: #fff; margin: 14px 0 0; text-wrap: pretty; } .hett-hero__mark { display: inline-block; margin-top: 10px; padding: 6px 16px 9px; border-radius: var(--r-btn-square); background: var(--hett-orange); color: #fff; font-size: var(--fs-hero-mark); line-height: var(--lh-hero-mark); letter-spacing: var(--ls-hero); } .hett-hero__lead { margin: 26px 0 0; color: rgba(255,255,255,.88); max-width: 46ch; } .hett-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } /* ----------------------------------------------------- sociaal bewijs Een rijtje klantfoto's, het cijfer ernaast, de belofte eronder. Het staat onder de knoppen en niet erboven: eerst wat je kunt doen, dan de reden om het te doen. De foto's overlappen elkaar met een witte rand ertussen. Die rand is geen versiering maar het enige wat drie donkere pasfoto's op een donkere hero uit elkaar houdt — zonder die rand wordt het één vlek. Het blok leeft standaard op inkt (de hero), maar de kleuren staan als eigen variabelen zodat hij het elders op wit ook doet. */ .hett-proof { --hett-proof-tekst: rgba(255, 255, 255, .92); --hett-proof-rand: rgba(255, 255, 255, .92); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: var(--sp-7); } .hett-proof__rij { display: flex; align-items: center; gap: 12px; } .hett-proof__fotos { display: flex; } .hett-proof__foto { width: 38px; height: 38px; flex: none; border-radius: 50%; object-fit: cover; border: 2px solid var(--hett-proof-rand); background: var(--hett-surface-2); } .hett-proof__foto + .hett-proof__foto { margin-inline-start: -12px; } .hett-proof__cijfer { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 16px; color: var(--hett-star); line-height: 1; } .hett-proof__cijfer svg { flex: none; } .hett-proof__tekst { font-size: var(--fs-meta); font-weight: 600; color: var(--hett-proof-tekst); } /* Op wit: de rand om de foto's mag dan geen wit zijn, want dan zie je hem niet, en de tekst is gewone bodytekst. */ .hett-section--wit .hett-proof, .hett-prose .hett-proof { --hett-proof-tekst: var(--hett-body); --hett-proof-rand: #fff; } .hett-hero__note { position: absolute; right: var(--panel-pad); bottom: 20px; max-width: 30ch; text-align: right; font-size: 11px; line-height: 1.4; font-weight: 600; color: rgba(255,255,255,.42); } /* ---------------------------------------------------------- usp-strip */ .hett-usps { border-bottom: 1px solid var(--hett-line); } .hett-usps__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--grid-gap); padding-block: var(--sp-7); } .hett-usp { display: flex; gap: 14px; } .hett-usp__icon { color: var(--hett-orange); flex: none; margin-top: 2px; } .hett-usp__title { font: 700 var(--fs-ui)/1.35 var(--font-sans); color: var(--hett-ink); } .hett-usp__sub { font-size: var(--fs-meta); line-height: 1.45; color: var(--hett-muted); margin-top: 3px; } /* ---------------------------------------------------------- sectiekop */ .hett-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-8); flex-wrap: wrap; margin-bottom: var(--sp-8); } .hett-head__text { max-width: 66ch; } .hett-head__text .hett-intro { margin-top: 10px; } /* ---------------------------------------------------------- productkaarten */ .hett-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--grid-gap); } .hett-card { display: flex; flex-direction: column; } .hett-card__media { aspect-ratio: 3 / 2; border-radius: var(--r-media); background: var(--hett-photo-bg); overflow: hidden; position: relative; } .hett-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .hett-card__ph { position: absolute; inset-inline-start: 14px; inset-block-end: 14px; max-width: calc(100% - 28px); font: 600 11px/1.4 var(--font-sans); color: #8A857C; } .hett-card__body { padding-top: var(--sp-5); display: flex; flex-direction: column; flex: 1; } .hett-card__title { margin-bottom: 6px; } .hett-card__text { font-size: var(--fs-ui); line-height: 1.55; color: var(--hett-body); margin-bottom: var(--sp-4); } .hett-card__cta { margin-top: auto; } .hett-card__fine { margin-top: 9px; text-align: center; } /* ---------------------------------------------------------- montage-duo */ .hett-duo { background: #fff; } .hett-duo__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--grid-gap); } .hett-duo__card { border-radius: var(--r-panel); padding: var(--sp-5); background: #fff; border: 1px solid var(--hett-line); } .hett-duo__card--dark { border-color: transparent; } .hett-duo__card--dark { background: var(--hett-ink); color: var(--hett-on-dark-body); } .hett-duo__card--dark .hett-h3 { color: #fff; } .hett-duo__media { aspect-ratio: 16 / 9; border-radius: var(--r-media); background: var(--hett-photo-bg); overflow: hidden; position: relative; } .hett-duo__card--dark .hett-duo__media { background: var(--hett-ink-2); } .hett-duo__media img { width: 100%; height: 100%; object-fit: cover; } .hett-duo__head { max-width: 640px; margin-bottom: var(--sp-8); } .hett-duo__head .hett-intro { margin-top: 14px; } .hett-duo__body { padding: var(--sp-6) 6px 6px; } .hett-duo__text { margin: 12px 0 var(--sp-6); font-size: var(--fs-ui); line-height: 1.6; } /* ---------------------------------------------------------- reviews */ .hett-reviews__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); margin-bottom: var(--sp-8); flex-wrap: wrap; } .hett-reviews__title { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .hett-reviews__count { font-size: var(--fs-meta); font-weight: 600; color: var(--hett-muted); } .hett-reviews__nav { display: flex; gap: 10px; } .hett-reviews__btn { width: 44px; height: 44px; border-radius: var(--r-pill); border: 1px solid var(--hett-line-strong); background: #fff; color: var(--hett-ink); cursor: pointer; display: grid; place-items: center; } .hett-reviews__btn:hover { border-color: var(--hett-ink); } .hett-reviews__btn[disabled] { opacity: .35; cursor: default; } .hett-reviews__track { display: flex; gap: var(--grid-gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; } .hett-reviews__track::-webkit-scrollbar { display: none; } .hett-review { flex: 0 0 clamp(280px, 31%, 430px); scroll-snap-align: start; border: 1px solid var(--hett-line); border-radius: var(--r-card); padding: var(--sp-6); background: #fff; } .hett-review__stars { color: var(--hett-star); letter-spacing: 2px; margin-bottom: 12px; } .hett-review__quote { font-size: var(--fs-ui); line-height: 1.6; color: var(--hett-ink); margin: 0 0 var(--sp-5); } .hett-review__name { font-weight: 700; color: var(--hett-ink); } .hett-review__meta { font-size: var(--fs-meta); color: var(--hett-muted); } /* ------------------------------------------- reviews van Google Het logo is geen versiering maar de bron. Daarom staat het twee keer: in de kop bij het gemiddelde, en klein op elke kaart. Zonder dat verschilt een opgehaalde beoordeling in niets van een zelf ingetypte, en dat is precies het verschil waar het om gaat. */ .hett-google { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .hett-google__mark { flex: none; display: block; } .hett-google__score { font: 800 20px/1 var(--font-sans); color: var(--hett-ink); letter-spacing: -.02em; } .hett-google .hett-link { margin-inline-start: 4px; } .hett-review--google { display: flex; flex-direction: column; } .hett-review__top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .hett-review__top > div { min-width: 0; } .hett-review__avatar { flex: none; width: 44px; height: 44px; border-radius: var(--r-pill); object-fit: cover; background: var(--hett-surface-2); } .hett-review__avatar--letter { display: grid; place-items: center; font: 700 17px/1 var(--font-sans); color: var(--hett-muted); } .hett-review__source { margin-inline-start: auto; flex: none; display: block; } .hett-review--google .hett-review__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hett-review--google .hett-review__quote { margin-bottom: 0; } /* ---------------------------------------------------------- faq */ .hett-faq__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: var(--grid-gap-wide); } .hett-faq__list { border-top: 1px solid var(--hett-line); } .hett-faq__item { border-bottom: 1px solid var(--hett-line); } .hett-faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); padding: var(--sp-6) 0; background: none; border: 0; cursor: pointer; text-align: start; font: 700 var(--fs-h4)/1.35 var(--font-sans); color: var(--hett-ink); } .hett-faq__sign { flex: none; width: 34px; height: 34px; border-radius: var(--r-pill); background: var(--hett-surface-2); display: grid; place-items: center; transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .hett-faq__item.is-open .hett-faq__sign { background: var(--hett-orange); color: #fff; transform: rotate(180deg); } .hett-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease); } .hett-faq__item.is-open .hett-faq__a { grid-template-rows: 1fr; } .hett-faq__a > div { overflow: hidden; } .hett-faq__a p { padding-bottom: var(--sp-6); font-size: var(--fs-ui); line-height: 1.7; color: var(--hett-body); max-width: 62ch; } /* ---------------------------------------------------------- projecten */ .hett-projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--grid-gap); } .hett-project__media { aspect-ratio: 4 / 3; border-radius: var(--r-card); background: var(--hett-photo-bg); overflow: hidden; position: relative; } .hett-project__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); } .hett-project:hover .hett-project__media img { transform: scale(1.04); } .hett-project__title { margin-top: 14px; font: 700 18px/1.35 var(--font-sans); color: var(--hett-ink); } .hett-project__meta { font-size: var(--fs-meta); color: var(--hett-muted); margin-top: 2px; } /* ---------------------------------------------------------- cta-paneel */ .hett-cta { padding-inline: 28px; } .hett-cta__panel { border-radius: var(--r-panel); background: var(--hett-ink); color: var(--hett-on-dark-body); padding: var(--panel-pad); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--grid-gap-wide); align-items: center; } .hett-cta__title { color: #fff; font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -.03em; margin-bottom: 12px; max-width: 24ch; } .hett-cta__text { max-width: 52ch; font-size: var(--fs-ui); line-height: 1.65; } /* De knoppenkolom mag niet meegroeien met het scherm. Op een breed scherm werd een knop van achthonderd pixels breed één streep tekst met een halve meter ruimte eromheen — dat leest niet meer als een knop. */ .hett-cta__actions { display: grid; gap: 12px; justify-items: stretch; width: 100%; max-width: 380px; margin-inline-start: auto; } .hett-cta__actions .hett-btn { justify-content: center; } /* ---------------------------------------------------------- paginakop */ .hett-pagehead { padding: 68px 0 0; } .hett-pagehead__inner { max-width: 1000px; } .hett-pagehead .hett-eyebrow { margin-bottom: 18px; display: block; } .hett-pagehead .hett-h1 { margin-bottom: 14px; } .hett-crumbs { display: flex; align-items: center; gap: 8px; font: 600 13px/1.5 var(--font-sans); color: var(--hett-muted); margin-bottom: 18px; flex-wrap: wrap; } .hett-crumbs a { color: var(--hett-muted); } .hett-crumbs a:hover { color: var(--hett-ink); } .hett-crumbs [aria-current] { color: var(--hett-ink); } /* ---------------------------------------------------------- configurator */ /* De geruststellende regels boven de configurator. Stonden met alleen een marge eronder tegen de bovenkant van hun witte vlak aan: ruimte eronder, niets erboven. Nu symmetrisch, zodat de rij midden in de band staat in plaats van eraan te hangen. */ .hett-configintro { display: flex; align-items: center; gap: var(--grid-gap); flex-wrap: wrap; padding-block: var(--sp-5); margin-bottom: var(--sp-5); } .hett-configintro__item { display: flex; align-items: center; gap: 10px; font: 600 var(--fs-ui)/1.4 var(--font-sans); color: var(--hett-ink); } .hett-configintro__dot { width: 28px; height: 28px; border-radius: var(--r-pill); background: var(--hett-surface-2); display: grid; place-items: center; font: 800 13px/1 var(--font-sans); flex: none; } .hett-embed { border-top: 1px solid var(--hett-line); border-bottom: 1px solid var(--hett-line); background: var(--hett-surface); } .hett-embed iframe { display: block; width: 100%; border: 0; } .hett-helpgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--grid-gap); } .hett-help { border-top: 1px solid var(--hett-line); padding-top: var(--sp-6); } .hett-help .hett-h4 { margin-bottom: 8px; } .hett-help p { font-size: var(--fs-ui); line-height: 1.6; margin-bottom: var(--sp-4); } /* ---------------------------------------------------------- formulier */ .hett-form__step { border-top: 1px solid var(--hett-line); padding-top: var(--sp-6); margin-bottom: var(--sp-10); } .hett-form__steptitle { font: 800 var(--fs-h4)/1.3 var(--font-sans); color: var(--hett-ink); margin-bottom: var(--sp-5); } .hett-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--sp-5); } .hett-field { display: grid; gap: 7px; } .hett-field label { font: 700 var(--fs-meta)/1.3 var(--font-sans); color: var(--hett-ink); } .hett-field input, .hett-field select, .hett-field textarea { font: 400 var(--fs-ui)/1.5 var(--font-sans); color: var(--hett-ink); background: #fff; border: 1px solid var(--hett-line-input); border-radius: var(--r-input); padding: 13px 14px; width: 100%; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .hett-field input:focus, .hett-field select:focus, .hett-field textarea:focus { outline: none; border-color: var(--hett-orange); box-shadow: 0 0 0 3px rgba(255,115,0,.16); } .hett-field__hint { font-size: var(--fs-fine); color: var(--hett-muted); } .hett-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; } .hett-choice label { border: 1px solid var(--hett-line-input); border-radius: var(--r-input); padding: 14px 16px; cursor: pointer; font: 600 var(--fs-ui)/1.4 var(--font-sans); color: var(--hett-ink); transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); } .hett-choice input { position: absolute; opacity: 0; pointer-events: none; } .hett-choice input:checked + label, .hett-choice label:has(input:checked) { border-color: var(--hett-orange); background: var(--hett-tint); } /* ---------------------------------------------------------- footer */ .hett-footer { background: var(--hett-ink); color: var(--hett-on-dark-body); padding-block: var(--sp-13) var(--sp-10); } .hett-footer a { color: var(--hett-on-dark-body); } .hett-footer a:hover { color: #fff; } /* Flex in plaats van grid met auto-fit. auto-fit maakt tracks op basis van de beschikbare ruimte, niet op basis van het aantal kolommen: als een menu ontbrak stond de contactkolom ineens midden in de footer. Met flex neemt een ontbrekende kolom simpelweg geen ruimte in. */ .hett-footer__grid { display: flex; flex-wrap: wrap; gap: var(--grid-gap-wide); } .hett-footer__grid > * { flex: 1 1 150px; min-width: 0; } .hett-footer__grid > :first-child { flex: 1 1 300px; } .hett-footer__logo { font: 800 22px/1 var(--font-sans); color: #fff; letter-spacing: -.03em; } .hett-footer__logo span { font-weight: 400; } .hett-footer__logoimg { height: 34px; width: auto; max-width: 100%; } .hett-footer__about { margin-top: 14px; font-size: var(--fs-meta); line-height: 1.65; color: var(--hett-on-dark-muted); max-width: 40ch; } .hett-footer__title { font: 700 var(--fs-meta)/1 var(--font-sans); color: #fff; text-transform: uppercase; letter-spacing: .1em; margin-bottom: var(--sp-5); } .hett-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-size: var(--fs-ui); } /* De contactkolom met iconen. Het icoon staat in een eigen kolom, zodat een regel die afbreekt — een showroomregel met een plaatsnaam erachter — netjes onder de tekst doorloopt en niet onder het pictogram. */ .hett-footer__list--contact { gap: 13px; } .hett-footer__list--contact li { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 10px; } .hett-footer__icon { color: var(--hett-orange); display: flex; justify-content: center; padding-top: 2px; } .hett-footer__bottom { margin-top: var(--sp-12); padding-top: var(--sp-6); border-top: 1px solid var(--hett-on-dark-line); display: flex; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; font-size: var(--fs-meta); color: var(--hett-on-dark-muted); } /* ---------------------------------------------------------- vrije tekst */ .hett-prose { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--hett-body); } .hett-prose > :first-child { margin-top: 0; } .hett-prose > :last-child { margin-bottom: 0; } .hett-prose h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); margin: var(--sp-9) 0 var(--sp-3); } .hett-prose h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); margin: var(--sp-7) 0 var(--sp-2); } .hett-prose h4 { font-size: var(--fs-h4); margin: var(--sp-7) 0 var(--sp-2); } .hett-prose p { margin: 0 0 var(--sp-4); } .hett-prose ul, .hett-prose ol { margin: 0 0 var(--sp-5); padding-inline-start: 22px; } .hett-prose li { margin: 7px 0; } /* Ook in een tekstblok op volle breedte blijven de regels leesbaar: alleen tabellen en beeld mogen de hele kolom gebruiken, lopende tekst niet. */ .hett-prose > p, .hett-prose > ul, .hett-prose > ol, .hett-prose > h3, .hett-prose > h4, .hett-prose > blockquote { max-width: 72ch; } .hett-prose a { color: var(--hett-orange-text); text-decoration: underline; text-underline-offset: 3px; } .hett-prose strong { color: var(--hett-ink); font-weight: 700; } .hett-prose hr { border: 0; border-top: 1px solid var(--hett-line); margin: var(--sp-10) 0; } .hett-prose table { width: 100%; border-collapse: collapse; margin: 0 0 var(--sp-6); font-size: var(--fs-ui); } .hett-prose th, .hett-prose td { text-align: start; padding: 12px 14px; border-bottom: 1px solid var(--hett-line); } .hett-prose th { color: var(--hett-ink); font-weight: 700; } .hett-prose blockquote { margin: var(--sp-6) 0; padding: var(--sp-5) var(--sp-6); background: var(--hett-tint); border-radius: var(--r-card); color: var(--hett-ink); font-weight: 600; } /* Een tabel met meer dan twee kolommen past niet op een telefoon. In plaats van de tekst onleesbaar klein te maken, laten we de tabel zelf zijwaarts scrollen. */ @media (max-width: 640px) { .hett-prose table { display: block; width: 100%; overflow-x: auto; font-size: 15px; } .hett-prose th, .hett-prose td { padding: 10px 12px; } } .hett-prose img { border-radius: var(--r-media); } /* ---------------------------------------------------------- terug naar boven */ .hett-totop { position: fixed; inset-block-end: 28px; inset-inline-end: 28px; width: 50px; height: 50px; border: 0; border-radius: var(--r-pill); background: var(--hett-ink); color: #fff; display: grid; place-items: center; cursor: pointer; z-index: 45; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), background-color var(--dur) var(--ease); } .hett-totop.is-visible { opacity: 1; transform: none; pointer-events: auto; } .hett-totop:hover { background: var(--hett-orange); } /* ---------------------------------------------------------- responsive */ @media (max-width: 1024px) { .hett-faq__grid { grid-template-columns: 1fr; } .hett-cta__panel { grid-template-columns: 1fr; } /* Eén kolom: dan hoort de knoppenrij links te beginnen, niet rechts uitgelijnd. */ .hett-cta__actions { margin-inline-start: 0; max-width: 440px; } .hett-footer__grid > * { flex-basis: 40%; } } @media (max-width: 900px) { .hett-nav { display: none; } .hett-burger { display: flex; } /* Onder de 900px past er naast het hamburgermenu en het mandje geen knop meer bij. Allebei de knoppen staan onderin de uitschuiflade. */ .hett-header__actions .hett-btn--primary, .hett-header__actions .hett-header__cta2 { display: none; } } /* De showroomknop verdwijnt als eerste: tussen 900 en 1180px is er wel plek voor één knop naast het menu, maar niet voor twee. De offerteknop is dan de belangrijkste van de twee. */ @media (max-width: 1180px) { .hett-header__cta2 { display: none; } } @media (max-width: 640px) { .hett-hero { padding-inline: var(--page-x-mobile); } .hett-hero__panel { min-height: 0; } .hett-hero__note { display: none; } .hett-hero__actions .hett-btn { width: 100%; } .hett-proof { margin-top: var(--sp-6); } .hett-proof__foto { width: 34px; height: 34px; } .hett-cta { padding-inline: var(--page-x-mobile); } .hett-footer__grid { gap: var(--sp-9); } .hett-footer__grid > *, .hett-footer__grid > :first-child { flex-basis: 100%; } .hett-topbar__list .hett-topbar__item:nth-child(n+2) { display: none; } .hett-review { flex-basis: 84%; } } /* ---------------------------------------------------------- Elementor Pro formulier */ .elementor-field-group .elementor-field-label { font: 700 var(--fs-meta)/1.3 var(--font-sans); color: var(--hett-ink); margin-bottom: 7px; } .elementor-field-group .elementor-field-textual { font: 400 var(--fs-ui)/1.5 var(--font-sans); color: var(--hett-ink); border: 1px solid var(--hett-line-input); border-radius: var(--r-input); padding: 13px 14px; background: #fff; } .elementor-field-group .elementor-field-textual:focus { border-color: var(--hett-orange); box-shadow: 0 0 0 3px rgba(255,115,0,.16); outline: none; } .elementor-form .elementor-button { background: var(--hett-orange); color: #fff; border-radius: var(--r-pill); font: 700 var(--fs-ui)/1 var(--font-sans); padding: 15px 26px; } .elementor-form .elementor-button:hover { background: var(--hett-orange-hover); } /* ============================================================ Aanvullingen — ronde 2 ============================================================ */ /* ---------------------------------------------------- USP-carrousel */ /* ------------------------------------------------------------ De USP's in de topbalk Op een breed scherm staan ze gewoon naast elkaar: er is plek voor alle drie, en dan is roteren alleen maar onrustig — je leest er twee half en mist er één. Pas als het niet meer past gaat hij lopen, en dat is op een telefoon. Eén stuk markup voor allebei: op desktop staan de items in de normale stroom, onder 900px vallen ze op elkaar en neemt de rotatie het over. De JS kijkt naar dezelfde grens en laat de rotatie op desktop achterwege. ============================================================ */ .hett-ticker { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 10px var(--sp-7); min-width: 0; } .hett-ticker__item { display: flex; align-items: center; gap: 8px; color: var(--hett-body); font-weight: 500; white-space: nowrap; } .hett-ticker__check { color: var(--hett-orange); flex: none; } /* De strook onder het menu bestaat alleen op een telefoon; op een breed scherm staan de USP's in de topbalk en zou dit ze een tweede keer tonen. */ .hett-uspbar { display: none; } @media (max-width: 900px) { /* Boven blijft alleen waar mensen op afgaan: het cijfer links, de drie contactpictogrammen rechts. De taalwissel is hier weg — die stond met een uitklapper in een balk van veertig pixels en is verhuisd naar de onderkant van het uitschuifmenu, waar wel ruimte is om hem uit te schrijven. */ .hett-topbar .hett-ticker { display: none; } .hett-topbar .hett-lang { display: none; } .hett-topbar__inner { justify-content: center; min-height: 40px; } .hett-topbar__right { position: static; transform: none; width: 100%; justify-content: space-between; flex-wrap: nowrap; gap: var(--sp-3); } .hett-topbar__contact { border-inline-start: 0; padding-inline-start: 0; margin-inline-end: -8px; } .hett-topbar__contact--tekst .hett-topbar__icotekst { display: none; } /* De strook onder het menu is eruit. Hij kostte eenenveertig pixels boven aan elk scherm om één belofte te herhalen die verderop toch al staat, en op een telefoon is dat precies de ruimte waar het beeld hoort te beginnen. De opmaak blijft hieronder staan voor als hij ooit terugkomt. */ .hett-ticker { position: relative; display: block; overflow: hidden; height: 22px; flex: 0 1 420px; } .hett-ticker__item { position: absolute; inset: 0; justify-content: center; opacity: 0; transform: translateY(100%); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .hett-ticker__item.is-active { opacity: 1; transform: none; } .hett-ticker__item.is-leaving { opacity: 0; transform: translateY(-100%); } } /* ---------------------------------------------------- taalwissel */ .hett-lang { position: relative; display: inline-flex; } .hett-lang__toggle { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--hett-line); border-radius: var(--r-pill); background: #fff; color: var(--hett-ink); font: 700 var(--fs-fine)/1 var(--font-sans); text-transform: uppercase; cursor: pointer; transition: border-color var(--dur) var(--ease); } .hett-lang__toggle:hover { border-color: var(--hett-line-strong); } .hett-lang__chevron { transition: transform var(--dur) var(--ease); } .hett-lang.is-open .hett-lang__chevron { transform: rotate(180deg); } .hett-flag { width: 20px; height: 14px; border-radius: 3px; flex: none; display: block; box-shadow: inset 0 0 0 1px rgba(20, 22, 26, .10); } .hett-lang__menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; min-width: 190px; padding: 8px; margin: 0; list-style: none; background: #fff; border: 1px solid var(--hett-line); border-radius: var(--r-panel); box-shadow: var(--shadow-menu); display: none; z-index: 60; } .hett-lang.is-open .hett-lang__menu { display: block; } .hett-lang__menu a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; font: 600 var(--fs-meta)/1.2 var(--font-sans); color: var(--hett-ink); } .hett-lang__menu a:hover { background: var(--hett-surface); } .hett-lang__menu .is-active { background: var(--hett-tint); } /* ---------------------------------------------------- FAQ volle breedte */ .hett-faq--full .hett-faq__grid { display: block; } .hett-faq--full .hett-faq__list { max-width: 900px; margin-inline: auto; } /* margin-inline neemt twee waarden als start en eind, niet als horizontaal en verticaal. `auto var(--sp-10)` duwde de kop dus naar rechts in plaats van hem te centreren met ruimte eronder. */ .hett-faq--full .hett-faq__head { max-width: 900px; margin-inline: auto; margin-block-end: var(--sp-10); } .hett-faq__groups { display: grid; gap: var(--sp-12); } .hett-faq__grouptitle { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: -.02em; margin-bottom: var(--sp-4); } /* ---------------------------------------------------- blogkaarten */ .hett-posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--grid-gap); } .hett-post { display: flex; flex-direction: column; border: 1px solid var(--hett-line); border-radius: var(--r-card); overflow: hidden; background: #fff; transition: border-color var(--dur) var(--ease); } .hett-post:hover { border-color: var(--hett-line-strong); } .hett-post__media { aspect-ratio: 16 / 10; background: var(--hett-photo-bg); overflow: hidden; position: relative; } .hett-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); } .hett-post:hover .hett-post__media img { transform: scale(1.04); } .hett-post__body { padding: var(--sp-6); display: flex; flex-direction: column; flex: 1; } .hett-post__meta { display: flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-fine); color: var(--hett-muted); margin-bottom: var(--sp-3); } .hett-post__meta span { display: inline-flex; align-items: center; gap: 6px; } .hett-post__meta svg { color: var(--hett-orange); } .hett-post__title { font: 800 var(--fs-h4)/1.3 var(--font-sans); letter-spacing: -.02em; color: var(--hett-ink); margin-bottom: 8px; } .hett-post__excerpt { font-size: var(--fs-ui); line-height: 1.6; color: var(--hett-body); flex: 1; } .hett-post__more { margin-top: var(--sp-5); font: 700 var(--fs-ui)/1 var(--font-sans); color: var(--hett-ink); display: inline-flex; align-items: center; gap: 8px; } .hett-post:hover .hett-post__more { color: var(--hett-orange); } .hett-post__badge { align-self: flex-start; margin-bottom: var(--sp-3); padding: 5px 11px; border-radius: var(--r-pill); background: var(--hett-tint); color: var(--hett-orange-text); font: 700 11px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .08em; } /* ---------------------------------------------------- stappenplan */ .hett-steps { display: grid; gap: var(--sp-6); counter-reset: hett-step; } .hett-step { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--sp-6); align-items: start; padding-bottom: var(--sp-6); border-bottom: 1px solid var(--hett-line); } .hett-step:last-child { border-bottom: 0; padding-bottom: 0; } .hett-step__num { width: 56px; height: 56px; border-radius: var(--r-pill); background: var(--hett-ink); color: #fff; display: grid; place-items: center; font: 800 20px/1 var(--font-sans); flex: none; } .hett-step--accent .hett-step__num { background: var(--hett-orange); } .hett-step__title { font: 800 var(--fs-h4)/1.3 var(--font-sans); letter-spacing: -.02em; color: var(--hett-ink); margin-bottom: 6px; } .hett-step__text { font-size: var(--fs-ui); line-height: 1.65; color: var(--hett-body); } /* ---------------------------------------------------- infopaneel */ .hett-panel { border-radius: var(--r-panel); padding: var(--panel-pad); background: var(--hett-surface); } .hett-panel--sand { background: #fff; border: 1px solid var(--hett-line); } .hett-panel--dark { background: var(--hett-ink); color: var(--hett-on-dark-body); } .hett-panel--dark :where(h2, h3, h4) { color: #fff; } .hett-panel--outline { background: #fff; border: 1px solid var(--hett-line); } .hett-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: var(--grid-gap-wide); align-items: start; } /* ---------------------------------------------------- lijst met vinkjes */ .hett-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .hett-checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-ui); line-height: 1.55; color: var(--hett-ink); } .hett-checklist svg { color: var(--hett-orange); flex: none; margin-top: 3px; } @media (max-width: 640px) { .hett-step { grid-template-columns: 44px minmax(0, 1fr); gap: var(--sp-4); } .hett-step__num { width: 44px; height: 44px; font-size: 17px; } } /* ============================================================ Knoppen beschermen tegen thema- en Elementor-stijlen Hello Elementor en de meeste Elementor-kits geven een kale