/* ============================================================ Rocco Resin - shared site styles (all pages except the Home scroll-video, which keeps its own inline styles). ============================================================ */ :root { --black: #0a0a0a; --black-2: #111110; --black-3: #17160f; --ink: #f1ece3; --muted: #ffffff; /* was grijs (#a8a294) - superwit voor leesbaarheid */ --gold: #c8a45c; --gold-2: #e7cf97; --gold-deep:#8a6d33; --brand: #c28e3a; --line: rgba(200, 164, 92, 0.18); --line-soft:rgba(200, 164, 92, 0.10); --font-display: "Cormorant Garamond", Georgia, serif; --font-body: "Jost", system-ui, sans-serif; --shell: 1240px; --ease: cubic-bezier(0.16, 1, 0.3, 1); } *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { background: var(--black); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overscroll-behavior: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background: transparent; color: var(--ink); font-family: var(--font-body); font-weight: 300; font-size: clamp(15px, 0.4vw + 14px, 17px); line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; overscroll-behavior-y: none; /* no pull-to-refresh reload at the top on mobile */ } img, video, canvas { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ::selection { background: var(--gold); color: var(--black); } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.06; letter-spacing: 0.01em; color: var(--gold-2); text-shadow: 0 2px 18px rgba(0, 0, 0, 0.65), 0 1px 2px rgba(0, 0, 0, 0.5); } :focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; } .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); } .kicker { font-family: var(--font-body); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); display: inline-block; } /* ---------- verbergen betekent verbergen ---------- Een element met het kenmerk hidden hoort weg te zijn. De browser regelt dat met display:none, maar elke eigen regel met een display erin wint daarvan: .offertekeuze had display:grid, en dus bleef een weggehaald blok op het offerteformulier gewoon staan (gemeld door de eigenaar 23 aug 2026, nadat hetzelfde eerder al bij de stappen, de adviestypes en het mobiele menu was gebeurd). Daar stonden zeven losse regels voor; die zijn vervangen door deze ene. Iets tonen doen we overal door het kenmerk weg te halen, nooit door er een display overheen te zetten, dus dit kan niets breken. */ [hidden] { display: none !important; } /* ---------- Background layers (starfield + fluid) ---------- */ #starfield { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -2; pointer-events: none; display: block; } /* Fluid sits BEHIND the content (above the starfield, below the text). */ #fluid-cursor { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; z-index: -1 !important; pointer-events: none !important; } #fluid-cursor canvas { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; display: block; } /* ---------- Legibility over the animated background ---------- */ /* Display headings in gold (not plain white) + a soft glow for contrast. */ /* Body copy stays light but gets a subtle dark halo so it reads over the stars. */ .page-hero p, .section__head p, .prose p, .prose p.lead, .cta p, .faq__q, .faq__a > div, .info-list li, .field label, .field__help, .foot-tag, .foot-col a, .foot-col address, .foot-bottom, .post__body p, .card p { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); } /* A soft dark scrim directly behind the heaviest text blocks for readability, without hiding the cosmic background elsewhere. */ /* See-through black reading panels: text stays crisp and the fluid never disturbs it, while the cosmic background still glimmers faintly through. */ .page-hero .shell, .section__head, .prose, .faq, .cta .shell, .detail-info, .projgroep__tekst, .projstory, .contact-grid > form, .page-hero .shell { max-width: 900px; margin-inline: auto; } .cta .shell { max-width: 760px; margin-inline: auto; } /* Footer band gets its own translucent black so its text reads too. */ footer.site-footer { background: rgba(8, 8, 8, 0.55); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; font-family: var(--font-body); font-weight: 500; font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 1rem 1.9rem; cursor: pointer; white-space: nowrap; border: 1px solid var(--gold); color: var(--gold); background: transparent; border-radius: 2px; transition: background-color 0.4s var(--ease), color 0.4s var(--ease), transform 0.3s var(--ease); } .btn:hover { background: var(--gold); color: var(--black); transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--solid { background: var(--gold); color: var(--black); } .btn--solid:hover { background: var(--gold-2); border-color: var(--gold-2); } .link-arrow { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--gold-2); transition: gap 0.25s var(--ease); } .link-arrow:hover { gap: 0.85rem; } /* ---------- Nav ---------- */ header.nav { position: fixed; inset: 0 0 auto 0; top: var(--actiehoogte); z-index: 50; height: var(--navhoogte); background: color-mix(in srgb, var(--black) 78%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-soft); } .nav__inner { height: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 1.2rem; } .nav__inner .brand { margin-right: auto; } /* Taalmenu (rechtsboven): zelfde uitklaplijst als Info, gedrag in js/menu.js. De knop toont de vlag van de actieve taal; de lijst de vier talen voluit. */ .lang-switch .nav-drop__knop img { width: 28px; height: 20px; object-fit: cover; display: block; border: 1px solid var(--line-soft); border-radius: 3px; } .nav-drop__lijst button { display: flex; align-items: center; gap: 0.6rem; width: 100%; background: none; border: 0; cursor: pointer; text-align: left; padding: 0.55rem 1.2rem; font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); transition: color 0.3s var(--ease); white-space: nowrap; } .nav-drop__lijst button:hover, .nav-drop__lijst button.is-active { color: var(--gold); } .nav-drop__lijst button img { width: 24px; height: 17px; object-fit: cover; border-radius: 2px; border: 1px solid var(--line-soft); flex: none; } @media (max-width: 768px) { .lang-switch .nav-drop__knop img { width: 24px; height: 17px; } } /* Btw-schakelaar: prijzen incl. (consument) of excl. (zakelijk) */ .btw-switch { display: flex; align-items: center; border: 1px solid var(--line-soft); border-radius: 999px; overflow: hidden; } .btw-switch button { padding: 0.22rem 0.6rem; font-size: 0.72rem; letter-spacing: 0.03em; background: none; border: 0; color: var(--ink); cursor: pointer; opacity: 0.5; white-space: nowrap; transition: opacity 0.25s var(--ease), color 0.25s var(--ease), background-color 0.25s var(--ease); } .btw-switch button:hover { opacity: 1; } .btw-switch button.is-active { opacity: 1; color: var(--gold); background: rgba(154, 123, 51, 0.12); } @media (max-width: 768px) { .btw-switch button { padding: 0.18rem 0.45rem; font-size: 0.66rem; } } .brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; letter-spacing: 0.16em; position: relative; } /* ---------- Kleine viering bij het logo ---------- In de geest van een Google-doodle: het merk blijft precies hetzelfde, alleen op een paar dagen per jaar staat er een klein voorwerp op de linkerbovenhoek van het logo. Het scriptje in de head zet data-viering op (op datum, of op de keuze in het CMS, zie Instellingen > Site). De plaatjes staan in assets/viering/ en worden een jaar gecachet; vervang je er ooit een, geef het bestand dan een nieuwe naam, anders blijven bezoekers de oude zien. */ .viering { display: none; position: absolute; pointer-events: none; background-repeat: no-repeat; background-position: center; background-size: contain; } :root[data-viering="kerst"] .viering { display: block; width: 34px; height: 29px; top: -14px; left: -12px; } :root[data-viering="koningsdag"] .viering { display: block; width: 31px; height: 24px; top: -15px; left: -10px; } :root[data-viering="blackfriday"] .viering { display: block; width: 32px; height: 19px; top: -13px; left: -11px; } /* ---------- Kortingsstrook met aftelklok, boven de menubalk ---------- Verschijnt alleen tijdens een actie (het scriptje in de head zet data-actie op , de klok telt af naar het einde van de laatste actiedag en de strook verdwijnt zodra hij op nul staat). Buiten een actie bestaat de strook niet: partials/actie.njk maakt hem pas als er een actie loopt. De menubalk en het uitgeklapte telefoonmenu schuiven mee omlaag via --actiehoogte. */ :root { --actiehoogte: 0px; --navhoogte: 76px; } :root[data-actie] { --actiehoogte: 34px; } .actie { display: none; } :root[data-actie] .actie { display: flex; align-items: center; justify-content: center; gap: 0.7rem; position: fixed; top: 0; left: 0; right: 0; z-index: 51; height: var(--actiehoogte); padding: 0 1rem; white-space: nowrap; overflow: hidden; background: linear-gradient(90deg, var(--gold-deep), var(--gold) 45%, var(--gold-2) 75%, var(--gold)); color: #14110a; font-family: var(--font-body); font-weight: 500; font-size: clamp(0.54rem, 2.5vw, 0.7rem); letter-spacing: 0.14em; text-transform: uppercase; } .actie__tekst { display: inline; } /* Scheidingsteken tussen de naam van het moment en het aanbod; verdwijnt vanzelf mee op een telefoon, want daar valt de naam weg. */ .actie__naam::after { content: " ·"; opacity: 0.6; font-weight: 400; } .actie__klok { font-variant-numeric: tabular-nums; font-weight: 600; background: rgba(20, 17, 10, 0.16); border-radius: 999px; padding: 0.1rem 0.55rem; } /* Koningsdag: de klok als fel neon. Een donkere plaat eronder, want neon licht alleen op tegen donker; op de gouden strook zou oranje anders wegvallen. */ :root[data-actie="koningsdag"] .actie__klok { background: #14110a; color: #ff7d1f; text-shadow: 0 0 6px rgba(255, 125, 31, 0.95), 0 0 16px rgba(255, 125, 31, 0.6); box-shadow: 0 0 10px rgba(255, 125, 31, 0.5), inset 0 0 6px rgba(255, 125, 31, 0.25); animation: neon-puls 2.4s ease-in-out infinite; } @keyframes neon-puls { 0%, 100% { box-shadow: 0 0 9px rgba(255, 125, 31, 0.42), inset 0 0 6px rgba(255, 125, 31, 0.22); } 50% { box-shadow: 0 0 18px rgba(255, 125, 31, 0.75), inset 0 0 9px rgba(255, 125, 31, 0.35); } } @media (prefers-reduced-motion: reduce) { :root[data-actie="koningsdag"] .actie__klok { animation: none; } } @media (max-width: 700px) { :root[data-actie] { --actiehoogte: 30px; } /* Kleine letters in plaats van kapitalen: die zijn een stuk smaller, en zo past het aanbod met de klok op een telefoonscherm. */ :root[data-actie] .actie { letter-spacing: 0.01em; gap: 0.4rem; text-transform: none; font-size: 0.68rem; } :root[data-actie] .actie__klok { padding: 0.05rem 0.4rem; } /* Op een telefoon past de naam van het moment er niet bij; het aanbod en de klok zijn wat telt, en het icoon op het logo zegt al genoeg. */ :root[data-actie] .actie__naam { display: none; } } .brand__logo { height: 46px; width: auto; max-width: none; display: block; flex: none; } /* De menulinks staan gecentreerd tussen het logo en de offerteknop: de balk vult de vrije ruimte (flex: 1) en de twee auto-marges (voor de eerste link en voor de knop) verdelen die ruimte gelijk. Onder de 1024px verdwijnt de balk achter de burger en duwt de auto-marge op .brand de rest weer rechts. */ .nav__links { display: flex; align-items: center; gap: 1.9rem; flex: 1 1 auto; } .nav__links > a:first-child { margin-left: auto; } .nav__links .btn { margin-left: auto; } .nav__links a { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); transition: color 0.3s var(--ease); } .nav__links a:hover, .nav__links a.is-active { color: var(--gold); } .nav__links .btn { padding: 0.7rem 1.3rem; color: var(--gold); } .nav__links .btn:hover { color: var(--black); } /* ---------- Info-uitklaplijst in het menu ---------- De muis op Info zetten toont de onderdelen meteen; klikken hoeft niet, en de knop navigeert dus nergens heen. WANNEER de lijst opent en sluit staat op EEN plek: js/menu.js zet de klasse "open" (muis erop en eraf, focus, buiten klikken, Escape, aanraakscherm). Hier staat alleen hoe het eruitziet. De lege ruimte tussen knop en lijst is padding van de lijst zelf, anders sluit hij zodra de muis het gaatje oversteekt. */ /* Flex in plaats van block: anders lijnt de knop uit op de basislijn van de (grotere) bodytekst-strut van dit omhulsel en hangt Info ~2px lager dan de gewone menulinks. */ .nav-drop { position: relative; display: flex; align-items: center; } .nav-drop__knop { text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0.16em; /* De browser-knopstijl zet gewicht 400 en regelhoogte "normal"; daardoor stond Info ~2px lager en iets dikker dan de gewone menulinks. */ font-weight: inherit; line-height: inherit; text-transform: uppercase; color: var(--muted); transition: color 0.3s var(--ease); } .nav-drop.open .nav-drop__knop, .nav-drop__knop.is-active { color: var(--gold); } .nav-drop__pijl { font-size: 0.55rem; transform: translateY(-1px); } .nav-drop__lijst { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 1.15rem; display: none; } .nav-drop.open .nav-drop__lijst { display: block; } .nav-drop__lijst > div { min-width: 10.5rem; padding: 0.45rem 0; background: rgba(10, 10, 10, 0.94); border: 1px solid var(--line-soft); border-radius: 8px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); } .nav-drop__lijst a { display: block; padding: 0.55rem 1.2rem; white-space: nowrap; } .nav__burger { display: none; background: none; border: 0; color: var(--ink); font-size: 1.6rem; cursor: pointer; } .mobile-menu { display: none; flex-direction: column; gap: 0.25rem; padding: 1rem clamp(1.25rem,4vw,2.5rem) 1.5rem; background: var(--black); border-bottom: 1px solid var(--line-soft); } .mobile-menu.open { display: flex; position: fixed; top: calc(var(--navhoogte) + var(--actiehoogte)); left: 0; right: 0; z-index: 49; max-height: calc(100vh - var(--navhoogte) - var(--actiehoogte)); overflow-y: auto; } .mobile-menu a { padding: 0.75rem 0; color: var(--muted); font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; border-bottom: 1px solid var(--line-soft); } .mobile-menu a:last-of-type { border: none; } .mobile-menu .btn { margin-top: 0.75rem; } /* ---------- Social rail (fixed left) ---------- */ .social-rail { position: fixed; left: clamp(8px,1.4vw,20px); top: 50%; transform: translateY(-50%); z-index: 46; display: flex; flex-direction: column; gap: 1rem; align-items: center; } .social-rail a { display: inline-flex; opacity: 0.9; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease), filter 0.3s var(--ease); } .social-rail a:hover { transform: translateX(4px) scale(1.08); opacity: 1; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.55)); } .social-rail img { height: 56px; width: auto; max-width: none; display: block; } /* ---------- Page hero (inner pages) ---------- */ .page-hero { position: relative; z-index: 2; padding: clamp(8rem, 16vh, 12rem) clamp(1.25rem, 4vw, 2.5rem) clamp(3rem, 7vw, 5rem); text-align: center; } .page-hero h1 { font-size: clamp(2.6rem, 7vw, 5rem); letter-spacing: -0.02em; margin-top: 1rem; } .page-hero p { color: #d7d0c2; margin: 1.25rem auto 0; max-width: 60ch; font-size: 1.08rem; } /* ---------- Sections / content ---------- */ .section { position: relative; z-index: 2; padding-block: clamp(3.5rem, 8vw, 6rem); } .section__head { max-width: 60ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .section__head h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); margin-top: 0.9rem; } .section__head p { color: #ffffff; margin-top: 1rem; max-width: 52ch; } .prose { max-width: 70ch; } .prose p { color: var(--ink); margin-bottom: 1.2rem; } .prose p.lead { color: var(--gold-2); font-size: 1.2rem; } /* Op de uitlegpagina staan de inleidende alinea's in wit in plaats van goud: het zijn hele stukken lopende tekst en die lezen in goud minder prettig dan de korte accentzinnen waar .lead oorspronkelijk voor bedoeld was. Zelfde wit als de intro onder een sectiekop. */ /* ---------- Cards (services / projects / blog) ---------- */ .grid { display: grid; gap: 1.25rem; } .card { position: relative; padding: 2rem 1.8rem; min-height: 220px; display: flex; flex-direction: column; justify-content: flex-end; background: color-mix(in srgb, var(--black-2) 75%, transparent); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), background-color 0.5s var(--ease); } .card:hover { transform: translateY(-8px); border-color: var(--gold); background: color-mix(in srgb, var(--black-3) 85%, transparent); } .card h3 { font-size: 1.6rem; margin-bottom: 0.5rem; } .card p { color: var(--muted); font-size: 0.95rem; } /* ---------- Stijlgroepen (uitlegpagina) ---------- Vier kaarten naast elkaar, elk met wat erin zit en de vanaf-prijs eronder. De prijs staat met margin-top:auto onderaan, zodat de prijsregels van vier kaarten met verschillend veel opsommingstekens toch op dezelfde hoogte uitkomen. */ .groepen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } .groep { display: flex; flex-direction: column; padding: 1.9rem 1.6rem; background: color-mix(in srgb, var(--black-2) 75%, transparent); border: 1px solid var(--line); border-radius: 3px; transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), background-color 0.5s var(--ease); } .groep:hover { transform: translateY(-6px); border-color: var(--gold); background: color-mix(in srgb, var(--black-3) 85%, transparent); } .groep h3 { font-size: 1.35rem; margin: 0.4rem 0 0.6rem; } .groep__lijst { list-style: none; margin: 0 0 1.4rem; padding: 0; } .groep__lijst li { position: relative; padding-left: 1.05rem; margin-bottom: 0.5rem; color: var(--muted); font-size: 0.88rem; line-height: 1.5; } .groep__lijst li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); } /* Ook deze regel op een leesplaat: hij staat los onder de kaarten en zou anders als enige tekst op deze pagina rechtstreeks op het sterrenveld liggen. Zelfde waarden als het blok bovenaan dit bestand. */ @media (max-width: 1024px) { .groepen { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .groepen { grid-template-columns: 1fr; } } /* ---------- Documentenlijst (Info-pagina) ---------- */ .doclijst { list-style: none; margin: 1.2rem 0 0; padding: 0; } .doclijst li { border-top: 1px solid var(--line-soft); } .doclijst li:last-child { border-bottom: 1px solid var(--line-soft); } .doclijst a { display: block; padding: 0.8rem 0.2rem; color: var(--muted); transition: color 0.3s var(--ease), padding-left 0.3s var(--ease); } .doclijst a:hover { color: var(--gold); padding-left: 0.6rem; } /* ---------- Gallery tiles ---------- */ .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .tile { position: relative; aspect-ratio: 7/8; border-radius: 3px; overflow: hidden; border: 1px solid var(--line); } .tile__art { position: absolute; inset: 0; transition: transform 0.7s var(--ease); } .tile:hover .tile__art { transform: scale(1.06); } .art-marble { background: radial-gradient(140% 120% at 20% 20%, #efe4c4, #b9923f 45%, #2b2310 100%); } .art-ocean { background: radial-gradient(140% 120% at 25% 25%, #bfe3ec, #2a6f8f 45%, #07151c 100%); } .art-metal { background: radial-gradient(140% 120% at 30% 20%, #d9b86a, #5a4a1f 45%, #0a0a0a 100%); } .art-copper { background: radial-gradient(140% 120% at 25% 25%, #e7a36a, #8a4a25 45%, #1c0f08 100%); } .art-ink { background: radial-gradient(140% 120% at 30% 25%, #9aa0b0, #2a2f3a 45%, #07080c 100%); } .tile__label { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.4rem 1.25rem 1.1rem; display: flex; justify-content: space-between; align-items: flex-end; background: linear-gradient(180deg, transparent, rgba(10,10,10,0.85)); } .tile__label h3 { font-size: 1.4rem; } .tile__label span { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); } .tile__tag { position: absolute; top: 1rem; left: 1rem; z-index: 2; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-2); background: rgba(10,10,10,0.55); border: 1px solid var(--line); padding: 0.3rem 0.6rem; border-radius: 2px; } /* ---------- Blog cards ---------- */ .post { display: flex; flex-direction: column; background: color-mix(in srgb, var(--black-2) 70%, transparent); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; transition: transform 0.5s var(--ease), border-color 0.5s var(--ease); } .post:hover { transform: translateY(-6px); border-color: var(--gold); } /* ---------- Galerij: pure media-grid (foto's & video's van epoxywerk) ---------- */ /* Gelijke tegels, want een raster met wisselende hoogtes wordt rommelig. De foto's komen van een telefoon en staan door elkaar liggend en rechtop, dus in een liggend vak wordt een staande foto bijgesneden. Dat mag hier: de uitsnede kijkt naar beneden (60%) zodat de vloer in beeld blijft en niet het plafond, en wie de hele foto wil zien klikt erop. Dan opent hij schermvullend en volledig. Geen zoom bij het aanwijzen, want die snijdt er nog eens vanaf. */ .media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } .media-tile { position: relative; margin: 0; aspect-ratio: 4/3; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--black-2); transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease); } .media-tile:hover { border-color: var(--gold); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45); } .media-tile__media { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 60%; background: var(--black-2); } /* Een film hoort niet bijgesneden te worden, die kijk je van begin tot eind: die past zich in het vak in en houdt zijn eigen vorm. */ video.media-tile__media { object-fit: contain; object-position: center; cursor: pointer; } /* Klein hintje dat een foto groter kan. Staat er altijd, ook op een telefoon, want daar bestaat aanwijzen niet. */ .media-tile__zoom { position: absolute; right: 0.6rem; bottom: 0.6rem; z-index: 3; font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-2); background: rgba(10, 10, 10, 0.55); border: 1px solid var(--line); padding: 0.26rem 0.5rem; border-radius: 999px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0.75; transition: opacity 0.25s var(--ease); pointer-events: none; } .media-tile:hover .media-tile__zoom { opacity: 1; } .media-tile__badge { position: absolute; top: 0.7rem; left: 0.7rem; z-index: 3; font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-2); background: rgba(10,10,10,0.6); border: 1px solid var(--line); padding: 0.28rem 0.55rem; border-radius: 999px; backdrop-filter: blur(4px); pointer-events: none; } .media-tile__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.6rem 1rem 0.85rem; font-size: 0.82rem; color: #fff; background: linear-gradient(180deg, transparent, rgba(10,10,10,0.82)); pointer-events: none; } @media (max-width: 980px) { .media-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .media-grid { grid-template-columns: 1fr; } } /* ---------- Projecten: overzicht in kaarten ---------- */ /* Per project één foto en een korte samenvatting. De hele kaart is klikbaar (zie .projcard__body h3 a::after), zodat er niet naar een knopje gemikt hoeft te worden. Het eerste project is de uitgelichte case en ligt over de volle breedte met de foto naast de tekst. */ .projcard { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: rgba(10, 10, 10, 0.68); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease); } .projcard:hover { transform: translateY(-6px); border-color: var(--gold); box-shadow: 0 22px 54px rgba(0, 0, 0, 0.5); } .projcard__art { position: relative; overflow: hidden; background: var(--black-2); flex: none; } /* De foto's komen van een telefoon en staan door elkaar liggend en rechtop, en ze zijn van bovenaf genomen: bovenin het behang, onderin de vloer. Op de kaart snijden we daarom naar beneden toe (60%), zodat de vloer in beeld blijft en niet het plafond. In de sliders blijft elke foto heel, daar staat "contain". */ .projcard__art img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; display: block; transition: transform 0.7s var(--ease); } .projcard:hover .projcard__art img { transform: scale(1.05); } .projcard:not(.projcard--groot) .projcard__art { aspect-ratio: 4 / 3; } /* De onzichtbare laag die de hele kaart klikbaar maakt. */ @media (max-width: 900px) { /* min-height hoort bij de brede kaart met de foto ernaast; onder elkaar zou die de 4:3-verhouding overrulen en het beeld bijna vierkant maken. */ } /* ---------- Projectpagina: het werkschema dag voor dag ---------- */ /* Een tijdlijn met een gouden lijn erlangs. De dagen zijn stappen die elkaar opvolgen, dus geen kaarten naast elkaar maar onder elkaar. */ /* Op de leesplaat, net als de andere tekstblokken: zonder die achtergrond komt de tekst rechtstreeks op het sterrenveld te staan en leest hij slecht. */ .planning { list-style: none; margin: 0 auto clamp(1.4rem, 3vw, 2rem); max-width: 72ch; background: rgba(10, 10, 10, 0.68); border: 1px solid var(--line-soft); border-radius: 10px; padding: clamp(1.6rem, 3.5vw, 2.6rem); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); } /* het stipje op de lijn */ .planning__na { max-width: 72ch; margin: 0 auto clamp(2rem, 5vw, 3rem); padding: clamp(0.9rem, 2vw, 1.2rem) clamp(1.6rem, 3.5vw, 2.6rem); background: rgba(10, 10, 10, 0.68); border: 1px solid var(--line-soft); border-radius: 10px; color: var(--gold-2); } @media (max-width: 600px) { } /* ---------- Foto schermvullend bekijken ---------- */ .lightbox { position: fixed; inset: 0; z-index: 200; display: none; background: rgba(6, 6, 6, 0.94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .lightbox.is-open { display: block; } :root.lightbox-open body { overflow: hidden; } .lightbox__vak { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: clamp(0.75rem, 3vw, 3rem); overflow: hidden; } .lightbox__beeld { max-width: 100%; max-height: 100%; display: block; border-radius: 6px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); cursor: zoom-in; touch-action: none; /* het watermerk zit in de foto zelf; dit maakt wegslepen en lang indrukken lastig */ -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: transform 0.25s var(--ease); } .lightbox.is-zoom .lightbox__beeld { cursor: grab; transition: none; } .lightbox__sluit, .lightbox__nav { position: absolute; z-index: 2; width: 46px; height: 46px; border-radius: 999px; border: 1px solid var(--line); background: rgba(10, 10, 10, 0.6); color: var(--gold); font-size: 1.6rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.25s var(--ease), color 0.25s var(--ease); } .lightbox__sluit:hover, .lightbox__nav:hover { background: var(--gold); color: var(--black); } .lightbox__sluit { top: clamp(0.75rem, 2vw, 1.5rem); right: clamp(0.75rem, 2vw, 1.5rem); } .lightbox__nav { top: 50%; transform: translateY(-50%); } .lightbox__nav--prev { left: clamp(0.5rem, 2vw, 1.5rem); } .lightbox__nav--next { right: clamp(0.5rem, 2vw, 1.5rem); } .lightbox__teller { position: absolute; bottom: clamp(0.75rem, 2vw, 1.5rem); left: 0; right: 0; z-index: 2; text-align: center; margin: 0; font-size: 0.74rem; letter-spacing: 0.2em; color: var(--gold); } @media (max-width: 560px) { .lightbox__sluit, .lightbox__nav { width: 40px; height: 40px; font-size: 1.35rem; } } /* ---------- Projectpagina: feiten, film en de ruimtes ---------- */ /* Het feitenblok: alleen de regels die gevuld zijn komen mee, dus de rij past zich aan het project aan in plaats van lege hokjes te tonen. */ .feiten { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; margin: 0 0 clamp(2rem, 5vw, 3rem); background: var(--line-soft); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } .feiten dt { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.5rem; } .feiten dd { margin: 0; color: var(--ink); line-height: 1.5; } .feiten dd.feiten__prijs { font-family: var(--font-display); color: var(--gold-2); font-size: 1.5rem; font-weight: 600; } /* De rondgang is met een telefoon gefilmd en staat dus rechtop. Geen vast kader daarom: de film houdt zijn eigen vorm en wordt alleen in hoogte begrensd. Een liggende film die er later bij komt vult vanzelf de volle breedte. */ .projfilm { margin: 0 auto clamp(2rem, 5vw, 3rem); text-align: center; } .projfilm video { max-height: 72vh; max-width: 100%; width: auto; height: auto; display: inline-block; border: 1px solid var(--line); border-radius: 10px; background: var(--black-2); } /* Het bijschrift staat los onder de film en lag daardoor als enige tekst op deze pagina rechtstreeks op het sterrenveld. Een klein leesplaatje eromheen, in dezelfde stijl als de grote tekstblokken maar strak om de woorden heen. Geen inline-block: dan gaat het bijschrift naast de film staan zodra die smal genoeg is. Blok met fit-content houdt de plaat om de woorden heen en zet hem toch netjes op de volgende regel, gecentreerd. */ .projfilm figcaption { display: block; width: fit-content; margin: 0.75rem auto 0; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); background: rgba(10, 10, 10, 0.68); border: 1px solid var(--line-soft); border-radius: 999px; padding: 0.5rem 1.1rem; } /* Het verhaal achter een project: rustiger dan de intro erboven, in een kolom die op leesbare regellengte blijft. */ .projstory { max-width: 62ch; margin: 0 auto clamp(2rem, 5vw, 3rem); } .projstory p { line-height: 1.75; color: rgba(255, 255, 255, 0.8); margin: 0 0 1rem; } .projstory p:last-child { margin-bottom: 0; } /* Pigmenten per ruimte: een rij kleine gouden pillen onder de tekst, elk een link naar de kleurpagina. Dezelfde kop-stijl als de feiten erboven, zodat het als een specificatie leest en niet als een tweede alinea. */ .pigmenten { margin-top: 1.4rem; } .pigmenten__kop { display: block; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.7rem; } .pigmenten__lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .pigmenten__lijst a { display: inline-block; padding: 0.38rem 0.85rem; border: 1px solid rgba(200, 164, 92, 0.45); border-radius: 999px; color: var(--ink); text-decoration: none; font-size: 0.85rem; letter-spacing: 0.02em; transition: border-color 0.3s ease, background 0.3s ease; } .pigmenten__lijst a:hover { border-color: var(--gold); background: rgba(200, 164, 92, 0.12); } .pigmenten__noot { margin-top: 0.8rem; font-size: 0.85rem; color: rgba(255, 255, 255, 0.62); max-width: 46ch; } /* Over ons: de rococo-collage naast het verhaal. Hergebruikt het raster van de projectpagina. Twee dingen moeten er wel bij: dit blok heeft een h2 in plaats van een h3, en de goudkleurige openingsregel is elders alleen binnen .prose opgemaakt. Het bijschrift krijgt hetzelfde leesplaatje als dat onder de film, maar in gewone letters, want een hele zin in kapitalen leest niet. */ .rococo { margin: 0; } .rococo img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; } .rococo figcaption { display: block; width: fit-content; margin: 0.8rem auto 0; max-width: 100%; letter-spacing: 0.02em; line-height: 1.6; text-align: center; color: var(--gold); background: rgba(10, 10, 10, 0.68); border: 1px solid var(--line-soft); border-radius: 12px; padding: 0.5rem 1.1rem; } /* Telefoonfoto's staan door elkaar liggend en rechtop. Met "cover" op een liggend vak wordt een staande foto tot een strook afgesneden en verdwijnt juist de vloer uit beeld. Daarom een 4:3-vak met "contain": elke foto blijft heel, en het zwart eromheen valt weg tegen de plaat. */ .projgroep .slider__track img, .proj__art { flex: 0 0 100%; width: 100%; aspect-ratio: 4/3; display: block; } @media (max-width: 860px) { } /* ---------- Contact ---------- */ .field { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.25rem; } .field label { font-size: 0.85rem; font-weight: 600; color: var(--ink); } .field input, .field textarea, .field select { font: inherit; color: var(--ink); background: color-mix(in srgb, var(--black-2) 80%, transparent); border: 1px solid var(--line); border-radius: 2px; padding: 0.85rem 0.95rem; resize: vertical; transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease); } .field input::placeholder, .field textarea::placeholder { color: var(--muted); } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--gold-2); } .field__help { font-size: 0.8rem; color: var(--muted); } .form-status { font-size: 0.9rem; color: var(--gold-2); min-height: 1.2em; margin-top: 0.5rem; } /* De uitweg onder een mislukte verzending: mailadres en WhatsApp, aanklikbaar. */ .status__uitweg { display: inline-block; margin-top: 0.35rem; } .status__uitweg a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; } /* Beeld meesturen kan niet via het formulier zelf, dus wijzen we naar WhatsApp. Staat binnen het formulier, gescheiden door een dunne lijn. */ .form-extra { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line-soft); } .form-extra p { color: rgba(255, 255, 255, 0.8); margin-bottom: 1rem; max-width: 46ch; } .info-list { list-style: none; padding: 0; } .info-list li { padding: 0.9rem 0; border-bottom: 1px solid var(--line-soft); } .info-list .lbl { display: block; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.3rem; } .info-list a { color: var(--gold-2); } /* ---------- Colour-group menu cards ---------- */ .group-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } /* Vierkante categorie-tegels: de kleurenfoto's zijn zelf vierkant, dus in een cirkel werden de randen en soms de tekst op het etiket weggesneden. */ .group-card { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(0.8rem, 2vw, 1.4rem); background: color-mix(in srgb, var(--black-2) 70%, transparent); transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease); } .group-card:hover { transform: translateY(-6px); border-color: var(--gold); box-shadow: 0 16px 38px rgba(0, 0, 0, 0.45); } .group-card__art { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 4px; width: 62%; margin: 0 auto 0.7rem; border: 1px solid var(--line); flex: none; } .group-card__art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease), opacity 0.25s ease; } .group-card:hover .group-card__art img { transform: scale(1.06); } .group-card__cap { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0 0.9rem; } .group-card__cap h3 { font-size: clamp(1.05rem, 1.6vw, 1.3rem); margin: 0; line-height: 1.15; } .group-card__cap span { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); white-space: nowrap; } @media (max-width: 1024px) { .group-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 680px) { .group-grid { grid-template-columns: repeat(2, 1fr); } /* Kleine tegels: tekst mag wrappen en wordt iets kleiner zodat alles past. */ .group-card__cap h3 { font-size: 0.92rem; } .group-card__cap span { white-space: normal; font-size: 0.54rem; line-height: 1.3; } .group-card__art { width: 56%; margin-bottom: 0.45rem; } } /* ---------- Colour detail: image slider ---------- */ .detail-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; } @media (max-width: 860px) { .detail-grid { grid-template-columns: 1fr; } } .detail-info .kicker { display: block; } .detail-info h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin: 0.5rem 0 1rem; } .detail-info p { color: var(--muted); margin-bottom: 1.5rem; max-width: 46ch; } /* De uitgebreide kleurbeschrijving onder het beeld: drie kolommen met elk een klein gouden kopje, op mobiel onder elkaar. Regellengte begrensd zodat het leest als een tekst en niet als een strook. */ /* Op een leesplaat: dezelfde doorzichtige zwarte plaat als op de home, zodat de tekst leesbaar blijft boven de sterren en het vloeistofeffect. Regel van de eigenaar: lopende tekst op een subpagina staat altijd op zo'n plaat. */ .kleurtekst { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.4rem, 3.5vw, 2.6rem); margin-top: clamp(2.2rem, 5vw, 3.5rem); background: rgba(10, 10, 10, 0.55); border: 1px solid rgba(200, 164, 92, 0.14); border-radius: 16px; padding: clamp(1.6rem, 3.5vw, 2.4rem) clamp(1.4rem, 3vw, 2.2rem); box-shadow: 0 22px 60px rgba(0, 0, 0, 0.4); } .kleurtekst__deel h3 { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); font-family: var(--font-body); font-weight: 500; margin: 0 0 0.7rem; } .kleurtekst__deel p { color: rgba(255, 255, 255, 0.8); line-height: 1.75; max-width: 42ch; margin: 0; } @media (max-width: 860px) { .kleurtekst { grid-template-columns: 1fr; gap: 1.6rem; } } .slider { position: relative; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; } .slider__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; } .slider__track::-webkit-scrollbar { display: none; } .slider__track img { flex: 0 0 100%; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; scroll-snap-align: center; display: block; } .slider__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--line); background: rgba(10, 10, 10, 0.5); color: var(--gold); font-size: 1.5rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background 0.25s var(--ease), color 0.25s var(--ease); } .slider__nav:hover { background: var(--gold); color: var(--black); } .slider__nav--prev { left: 12px; } .slider__nav--next { right: 12px; } .slider__dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; } .slider__dots button { width: 9px; height: 9px; border-radius: 999px; border: 1px solid rgba(0,0,0,0.25); background: rgba(0,0,0,0.25); cursor: pointer; padding: 0; } .slider__dots button.is-active { background: var(--gold); border-color: var(--gold); } .slider[data-single] .slider__nav, .slider[data-single] .slider__dots { display: none; } /* ---------- Colour swatches (pigments) ---------- */ .swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; } .swatch { display: block; margin: 0; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; background: color-mix(in srgb, var(--black-2) 70%, transparent); transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease); } .swatch:hover { transform: translateY(-6px); border-color: var(--gold); box-shadow: 0 16px 38px rgba(0, 0, 0, 0.45); } .swatch__chip { aspect-ratio: 1 / 1; width: 100%; display: block; object-fit: cover; transition: opacity 0.25s ease; } .swatch__meta { padding: 0.7rem 0.85rem 0.85rem; } .swatch__meta h3 { font-size: 1.05rem; margin: 0; } .swatch__meta span { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); } /* De schermnotitie onder elk kleurenraster en op elke kleurpagina, op een kleine leesplaat: zelfde plaat als de rest, iets minder padding omdat het een enkele regel is. Regel van de eigenaar: lopende tekst altijd op een plaat. Regel 220 keer op de site, dus deze ene regel doet het overal. */ .swatch-note { color: var(--muted); font-size: 0.85rem; margin-top: 1.5rem; max-width: 60ch; font-style: italic; display: inline-block; background: rgba(10, 10, 10, 0.55); border: 1px solid rgba(200, 164, 92, 0.14); border-radius: 12px; padding: 0.85rem 1.2rem; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35); } @media (max-width: 1024px) { .swatches { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 680px) { .swatches { grid-template-columns: repeat(2, 1fr); } } /* Solid colour tile (RAL) - used as a instead of */ .swatch__chip--solid { display: block; } /* RAL live search */ .ral-search { margin-top: 1.6rem; } .ral-search input { width: 100%; max-width: 540px; padding: 0.85rem 1.1rem; background: var(--black-2); border: 1px solid rgba(200,164,92,0.28); border-radius: 10px; color: var(--ink); font-family: inherit; font-size: 1rem; } .ral-search input::placeholder { color: var(--muted); } .ral-search input:focus { outline: none; border-color: var(--gold); } .ral-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.6rem; } .ral-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.6rem; border: 1px solid rgba(255,255,255,0.08); border-radius: 9px; text-decoration: none; color: var(--ink); background: var(--black-2); transition: border-color 0.2s; } .ral-item:hover { border-color: var(--gold); } .ral-item__chip { width: 36px; height: 36px; border-radius: 6px; flex: 0 0 auto; border: 1px solid rgba(255,255,255,0.18); } .ral-item__txt { display: flex; flex-direction: column; line-height: 1.25; } .ral-item__txt b { font-size: 0.95rem; font-weight: 500; } .ral-item__txt span { font-size: 0.72rem; color: var(--gold); letter-spacing: 0.08em; } .color-block { width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; border: 1px solid rgba(200, 164, 92, 0.22); box-shadow: inset 0 0 60px rgba(0,0,0,0.18); } .color-block__code { display: inline-block; margin-top: 0.9rem; font-family: monospace; font-size: 0.95rem; color: var(--gold); letter-spacing: 0.08em; } /* ---------- Intake info cards (why we ask) ---------- */ .intake { display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem 1.4rem; min-height: 0; background: color-mix(in srgb, var(--black-2) 70%, transparent); border: 1px solid var(--line); border-radius: 4px; transition: transform 0.4s var(--ease), border-color 0.4s var(--ease); } .intake:hover { transform: translateY(-4px); border-color: var(--gold); } .intake h3 { font-size: 1.2rem; margin-bottom: 0.35rem; } .intake p { color: var(--muted); font-size: 0.95rem; } /* ---------- FAQ accordion ---------- */ .faq { max-width: 820px; } .faq__item { border-top: 1px solid var(--line); } .faq__item:last-child { border-bottom: 1px solid var(--line); } .faq__q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; color: var(--gold-2); font-family: var(--font-display); font-size: 1.3rem; padding: 1.3rem 2.5rem 1.3rem 0; position: relative; } .faq__q::after { content: "+"; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); color: var(--gold); font-family: var(--font-body); font-size: 1.4rem; transition: transform 0.3s var(--ease); } .faq__item.open .faq__q::after { content: "\2212"; } .faq__a { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); } .faq__a > div { padding: 0 0 1.3rem; color: #ffffff; max-width: 65ch; } .faq__item.open .faq__a { max-height: 600px; } /* ---------- CTA band ---------- */ .cta { position: relative; z-index: 2; text-align: center; padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 4vw, 2.5rem); border-top: 1px solid var(--line-soft); background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 12%, transparent), transparent 60%); } .cta h2 { font-size: clamp(2rem, 5vw, 3.4rem); max-width: 18ch; margin: 0 auto; } .cta p { color: var(--muted); margin: 1.25rem auto 2rem; max-width: 46ch; } /* ---------- Footer ---------- */ footer.site-footer { position: relative; z-index: 2; border-top: 1px solid var(--line); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; margin-top: clamp(3rem, 8vw, 6rem); } .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; } .foot-grid .brand { font-size: 1.1rem; } .foot-tag { color: var(--muted); margin-top: 1rem; max-width: 30ch; font-size: 0.95rem; } /* De kolomkoppen in de voettekst zijn kleine hoofdletterlabels, geen displaykop. Daarom het diepere goud van de kickers en niet het lichte van de koppen. */ .foot-col h4 { font-family: var(--font-body); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); text-shadow: none; margin-bottom: 1rem; } .foot-col a, .foot-col address { display: block; color: var(--muted); font-style: normal; padding: 0.3rem 0; transition: color 0.2s var(--ease); } .foot-col a:hover { color: var(--gold); } .foot-bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 0.85rem; } /* reveal on scroll */ /* Inhoud mag nooit van een animatie afhangen. Daarom is .rise standaard zichtbaar, en verstopt hij zich alleen als het script echt draait: dat zet .animatie op . Werkt javascript niet, of gaat de onthulling om welke reden dan ook niet af, dan staat alles er gewoon. */ .rise { transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); } :root.animatie .rise { opacity: 0; transform: translateY(28px); } :root.animatie .rise.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { :root.animatie .rise { opacity: 1; transform: none; } .rise { transition: none; } } /* Cinematic heading reveal - 3D tilt-up + letter-spacing settle + gold glint */ .split-reveal { display: block; letter-spacing: -0.04em; transition: letter-spacing 1s var(--ease); } .split-reveal.in { letter-spacing: 0.01em; } .split-word { display: inline-block; vertical-align: top; white-space: nowrap; } /* word group: never breaks mid-letter */ .split-char { display: inline-block; vertical-align: top; } .split-char__in { display: inline-block; opacity: 0; transform: perspective(700px) translateY(0.5em) rotateX(-75deg); transform-origin: 50% 100%; transition: transform 0.55s var(--ease), opacity 0.45s var(--ease); transition-delay: var(--d, 0s); will-change: transform, opacity; } .split-reveal.in .split-char__in { opacity: 1; transform: perspective(700px) translateY(0) rotateX(0deg); animation: gold-glint 0.6s ease both; animation-delay: calc(var(--d, 0s) + 0.35s); } @keyframes gold-glint { 0%, 100% { filter: brightness(1); } 45% { filter: brightness(1.85) drop-shadow(0 0 7px rgba(255, 224, 150, 0.45)); } } @media (prefers-reduced-motion: reduce) { .split-reveal { letter-spacing: 0.01em; transition: none; } .split-char__in { opacity: 1; transform: none; transition: none; animation: none; } } /* Sub-text under a heading - word-by-word rise (lighter than the heading) */ .rw-word { display: inline-block; } .rw-word__in { display: inline-block; opacity: 0; transform: translateY(0.6em); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); transition-delay: var(--d, 0s); will-change: transform, opacity; } .rw-reveal.in .rw-word__in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .rw-word__in { opacity: 1; transform: none; transition: none; } } /* ---------- Responsive ---------- */ @media (max-width: 1024px) { /* Collapse the horizontal menu to the burger early enough that the logo + language flags always fit (and the logo never gets pushed off-screen). */ .nav__links { display: none; } .nav__burger { display: inline-flex; } .lang-switch { gap: 0.35rem; } /* Alleen het vlaggetje waarmee je het menu opent kleiner maken. Deze regel gold voor elke knop in het taalmenu, dus ook voor de zes regels in de lijst eronder: die werden platgedrukt tot 24 bij 17 en lagen over elkaar heen (gevonden 23 aug 2026, juist op de breedte waar het burgermenu aangaat). */ .lang-switch > .nav-drop__knop { width: 24px; height: 17px; } } @media (max-width: 768px) { .grid--2, .grid--3, .grid--4, .gallery { grid-template-columns: 1fr; } .contact-grid, .foot-grid { grid-template-columns: 1fr; } /* Phones: horizontal social bar pinned to the bottom-centre (stays visible). */ .social-rail { flex-direction: row; top: auto; bottom: 14px; left: 50%; right: auto; transform: translateX(-50%); gap: 0.7rem; padding: 0.35rem 0.75rem; background: rgba(10, 10, 10, 0.5); border: 1px solid var(--line-soft); border-radius: 999px; } .social-rail a:hover { transform: translateY(-2px) scale(1.08); } .social-rail img { height: 46px; } /* Reserveer ruimte zodat de fixed social-pil de footer-onderkant niet bedekt. */ footer.site-footer { padding-bottom: 110px; } } /* ============================================================ VLAKKE STIJL (nieuwe lay-out, aug 2026) Naar de mockups van de eigenaar: rustig vlak zwart en creme in afwisselende secties, grote fotografie, serif-koppen, gouden sierlijnen. De sterrenhemel en het vloeistofeffect blijven aan (verzoek eigenaar 19 aug): de donkere vlakken zijn halfdoorzichtig zodat het decor erdoorheen schemert; creme blijft dekkend, want sterren achter een lichte ondergrond ogen als vuil. Alles is begrensd tot html.vlak; een pagina doet mee via vlak: true in de frontmatter. Zijn alle pagina's om, dan kan de oude laag hierboven worden opgeruimd. ============================================================ */ :root { --creme: #faf5eb; /* het beige van de aangeleverde collages */ --creme-2: #f0e9db; --inkt-donker: #26231d; /* koppen op creme */ --tekst-creme: #45413a; /* lopende tekst op creme */ --lijn-creme: rgba(38, 35, 29, 0.14); } /* Sterren en vloeistofeffect zichtbaar (eigenaar 21 aug, opnieuw gevraagd): de donkere vlakken staan op 0,6 zodat beide erdoorheen schemeren. */ /* De achtergrond blijft doorzichtig zodat het sterrenveld (z-index -2) en het vloeistofeffect (-1) door de halfdoorzichtige donkere vlakken heen schemeren; verzoek eigenaar 19 aug 2026. */ html.vlak body { background: transparent; } /* De contact-mockup loopt bijna tot de schermranden; de shell van 1240 px liet op een brede monitor alles smal in het midden staan. Per pagina via `breed: true` in de frontmatter (Over ons houdt de goedgekeurde 1240 px). */ html.breed .shell { max-width: min(1640px, 94vw); } /* Koppen: op zwart warm wit in plaats van goud (goud blijft voor kickers en sierlijnen), op creme bijna zwart. De tekstschaduw van de sterrenlaag gaat uit. */ html.vlak h1, html.vlak h2, html.vlak h3 { color: #f4efe5; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55); } html.vlak .sek--creme h2, html.vlak .sek--creme h3 { color: var(--inkt-donker); text-shadow: none; } html.vlak .sek--creme .kicker { color: var(--gold-deep); } /* ---------- Sierlijn: het teken met de uitlopende gouden lijn ---------- */ .sier { display: flex; align-items: center; gap: 0.85rem; margin: 1.2rem 0 1.5rem; } .sier::before { content: ""; width: 15px; height: 15px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0C9.5 3 12 5 16 8 12 11 9.5 13 8 16 6.5 13 4 11 0 8 4 5 6.5 3 8 0Z' fill='%23c8a45c'/%3E%3C/svg%3E") center / contain no-repeat; } .sier::after { content: ""; height: 1px; width: 92px; background: linear-gradient(90deg, var(--gold), transparent); } /* ---------- Secties ---------- */ .sek { position: relative; z-index: 2; padding-block: clamp(3.8rem, 9vw, 7rem); background: rgba(10, 10, 10, 0.55); } .sek--creme { background: var(--creme); } .sek--creme p { color: var(--tekst-creme); text-shadow: none; } .sek--creme p.lead { color: var(--gold-deep); font-weight: 400; } .sek--zwart p { color: rgba(244, 239, 229, 0.86); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); } .sek--zwart p.lead { color: var(--gold-2); } .sek h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.08; } .sek p { margin-bottom: 1.15rem; max-width: 58ch; } .sek p:last-child { margin-bottom: 0; } .sek p.lead { font-size: 1.15rem; } /* Twee kolommen: tekst en beeld naast elkaar, zoals in de mockups. */ /* Beeldkolom iets breder dan de tekst (45/55), zoals in de mockups. */ /* Een liggend beeld met eigen zwarte achtergrond (het logobeeld) in een staande zwarte kaart: zo staat het even hoog als de tekst ernaast en leest het als een vlak met het logo in het midden, in plaats van een plaatje dat halverwege zweeft. De rand zit op de kaart, niet op het beeld. */ @media (max-width: 900px) { } /* ---------- Hero: tekst links op zwart, groot beeld rechts ---------- */ .held { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.18fr); min-height: min(82vh, 860px); align-items: center; background: rgba(10, 10, 10, 0.55); padding-top: calc(var(--navhoogte) + var(--actiehoogte)); } /* Hero op teksthoogte (Contact, naar de wensen en de tekening van de eigenaar, 21 aug): de band zo hoog als de tekst, de foto tot achter de doorzichtige menubalk, de tekst in zichzelf gecentreerd en naar de kant van de foto geschoven. Over ons houdt de goedgekeurde standaardhero hierboven. */ .held--tekstmaat { padding-top: 0; min-height: 0; } .held--tekstmaat .held__tekst { padding-top: calc(var(--navhoogte) + var(--actiehoogte) + 1.5rem); padding-right: clamp(2rem, 8vw, 10rem); padding-left: clamp(1.25rem, 2.2vw, 2.75rem); max-width: 680px; text-align: center; } .held--tekstmaat .sier { justify-content: center; } .held--tekstmaat .held__tekst p { margin-inline: auto; } .held--tekstmaat .held__beeld { min-height: 0; } .held__tekst { padding: clamp(2.2rem, 5vw, 4rem) clamp(1.4rem, 4vw, 3rem) clamp(2.2rem, 5vw, 4rem) clamp(1.4rem, 5vw, 6rem); max-width: 640px; justify-self: end; width: 100%; } .held__tekst h1 { font-size: clamp(2.5rem, 5.2vw, 4.2rem); letter-spacing: -0.01em; margin-top: 0.9rem; } .held__tekst p { color: rgba(244, 239, 229, 0.88); max-width: 44ch; font-size: 1.05rem; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); } .held__beeld { position: relative; align-self: stretch; min-height: 420px; } .held__beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* zachte overloop het zwart in, zodat beeld en tekstvlak een geheel zijn */ /* De overloop van tekst naar foto zit in de foto ZELF (mask-image): aan de tekstkant is hij doorzichtig en rond een kwart is hij dekkend. Een zwart verloop eroverheen werkte niet: op zwart liep dat naar massief zwart, terwijl het vlak ernaast halfdoorzichtig is met sterren, en die rand bleef zichtbaar. Door de foto zelf uit te laten lopen schemert het vlak, sterren en al, door de rand heen, op zwart en op creme precies hetzelfde. Kort gehouden op verzoek van de eigenaar: een kwart, niet de helft. */ /* Vaste, korte lengte in pixels en geen percentage: bij vijf panelen naast elkaar slokte een kwart van de breedte het hele eerste paneel op. */ .held__beeld { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 90px); mask-image: linear-gradient(90deg, transparent 0, #000 90px); } @media (max-width: 900px) { .held { grid-template-columns: 1fr; min-height: 0; } .held__tekst { max-width: none; justify-self: stretch; padding-inline: clamp(1.25rem, 4vw, 2.5rem); } .held--tekstmaat .held__tekst { max-width: none; justify-self: stretch; padding-right: clamp(1.25rem, 4vw, 2.5rem); } .held__beeld { min-height: 52vw; } .held__beeld { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 90px); mask-image: linear-gradient(180deg, transparent 0, #000 90px); } } /* ---------- Nieuwe voettekst (vaste basis, naar het footer-ontwerp) ---------- */ .voet { position: relative; z-index: 2; background: rgba(11, 11, 10, 0.62); color: var(--ink); } .voet__marmer { height: clamp(96px, 15vw, 168px); background: url("../assets/uploads/footer-marmer.webp") center / cover no-repeat; border-bottom: 1px solid var(--gold); } .voet__boven { display: grid; grid-template-columns: 1.45fr 1fr 1fr 1.15fr; gap: clamp(1.6rem, 4vw, 3rem); padding-block: clamp(2.6rem, 6vw, 4.2rem) clamp(2rem, 4vw, 3rem); } .voet__merk .brand { font-size: 1.05rem; } .voet__merk p { color: rgba(244, 239, 229, 0.78); margin-top: 1.1rem; max-width: 30ch; font-size: 0.94rem; line-height: 1.75; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); } .voet__kolom { border-left: 1px solid var(--line-soft); padding-left: clamp(1.2rem, 2.5vw, 2rem); } .voet__kolom h4 { font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); text-shadow: none; margin-bottom: 1.1rem; font-weight: 500; } .voet__kolom a { display: block; color: rgba(244, 239, 229, 0.8); padding: 0.32rem 0; font-size: 0.95rem; transition: color 0.25s var(--ease), padding-left 0.25s var(--ease); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); } .voet__kolom a:hover { color: var(--gold-2); padding-left: 0.35rem; } .voet__soc { display: flex; gap: 0.8rem; margin-top: 1.4rem; } .voet__soc a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid rgba(200, 164, 92, 0.45); border-radius: 999px; color: var(--gold); transition: background-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease); } .voet__soc a:hover { background: var(--gold); color: var(--black); transform: translateY(-2px); } .voet__soc svg { width: 18px; height: 18px; display: block; } /* het scheidsteken tussen de kolommen en de CTA-band */ .voet__scheiding { display: flex; align-items: center; gap: 1rem; } .voet__scheiding::before, .voet__scheiding::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); } .voet__scheiding i { width: 14px; height: 14px; display: block; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0C9.5 3 12 5 16 8 12 11 9.5 13 8 16 6.5 13 4 11 0 8 4 5 6.5 3 8 0Z' fill='%23c8a45c'/%3E%3C/svg%3E") center / contain no-repeat; } .voet__cta { text-align: center; padding-block: clamp(2.6rem, 6vw, 4rem); } .voet__cta h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); max-width: 20ch; margin: 0.6rem auto 0; } .voet__cta p { color: rgba(244, 239, 229, 0.8); margin: 1.1rem auto 1.8rem; max-width: 48ch; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); } .voet__onder { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding-block: 1.3rem; border-top: 1px solid var(--line-soft); color: rgba(244, 239, 229, 0.55); font-size: 0.84rem; } @media (max-width: 980px) { .voet__boven { grid-template-columns: 1fr 1fr; } .voet__merk { grid-column: 1 / -1; } } @media (max-width: 600px) { .voet__boven { grid-template-columns: 1fr; } .voet__kolom { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-soft); padding-top: 1.2rem; } } /* ---------- Brede foto onder of boven de tekst ---------- De eigenaar leverde voor Over ons panoramastroken (3:1) en een liggende groepsfoto; in een halve kolom worden die te klein, dus over de volle breedte van de shell, met de tekst erboven of eronder. */ /* Langere stukken tekst in twee kolommen, als in een tijdschrift. Een alinea breekt niet halverwege een kolom af. */ @media (max-width: 800px) { .sek__kolommen { columns: 1; } } /* ---------- CTA als gespiegelde hero onderaan de pagina ---------- Zelfde raster als .held (tekst links, beeld dat naar de rand loopt), maar zonder de ruimte voor de menubalk en met een h2. Een pagina die dit blok heeft zet eigenCta: true in de frontmatter, dan slaat de voet zijn eigen CTA-band over: anders staat dezelfde kop twee keer onder elkaar. */ /* De CTA zo laag als de tekst zelf (eigenaar, 21 aug): nauwelijks lucht boven en onder, een kleinere kop die op een regel past en strakke tussenruimtes. Zo komt de band rond de 270 px uit in plaats van 440. */ .held--cta { padding-top: 0; min-height: 0; border-top: 1px solid var(--line-soft); } /* Breder tekstvak dan de andere banden, zodat de kop op een brede monitor op een regel past en de band nog lager uitkomt. */ .held--cta .held__tekst { padding-block: clamp(1rem, 2vw, 1.4rem); max-width: 780px; } /* CTA-variant van Contact (eigenaar 21 aug): band hoger dan de tekst, tekst in zichzelf gecentreerd en naar de kant van de foto geschoven ('meer recht centre'). Over ons houdt de goedgekeurde CTA hierboven. */ .held--cta-midden { min-height: 440px; } .held--cta-midden .held__tekst { padding-block: clamp(1.6rem, 3vw, 2.4rem); padding-right: clamp(2rem, 6vw, 7.5rem); max-width: 760px; text-align: center; } .held--cta-midden .sier { justify-content: center; } .held--cta-midden .held__tekst p { margin-inline: auto; } /* Op een smal scherm mag de CTA-tekst de hele breedte hebben. Deze regel stond eerst in het mediablok hierboven, maar .held--cta-midden .held__tekst wordt daar verderop met dezelfde zwaarte overschreven, dus hij deed niets (gevonden 23 aug 2026). */ @media (max-width: 900px) { .held--cta-midden .held__tekst { max-width: none; justify-self: stretch; padding-right: clamp(1.25rem, 4vw, 2.5rem); } } .held--cta .held__beeld { min-height: 0; } .held--cta .kicker { font-size: 0.66rem; } .held--cta h2 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); margin-top: 0.3rem; line-height: 1.08; } .held--cta .sier { margin: 0.65rem 0 0.85rem; } .held--cta p { margin-bottom: 1rem; font-size: 0.97rem; } /* ---------- Banden: elke sectie als de hero, de foto tot aan de rand ---------- Wens van de eigenaar (21 aug): geen foto in een kader naast de tekst, maar de foto die de hele rechterhelft vult tot de schermrand, precies als de hero bovenaan. Zelfde raster als .held; de band heeft geen ruimte voor de menubalk nodig en krijgt een vaste hoogte, zodat de tekst in het midden staat en het beeld het vlak vult (object-fit: cover). Op creme draait de tekstkleur om en loopt het beeld in creme uit in plaats van in zwart. */ .held--band { padding-top: 0; min-height: 0; border-top: 1px solid var(--line-soft); } .held--band h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); margin-top: 0; line-height: 1.08; } .held--band .held__tekst p { margin-bottom: 1.15rem; max-width: 52ch; font-size: 1rem; } .held--band .held__tekst p:last-child { margin-bottom: 0; } .held--band .held__tekst p.lead { font-size: 1.15rem; color: var(--gold-2); } figure.held__beeld { margin: 0; } .held--creme { background: var(--creme); border-top: 0; } html.vlak .held--creme h2 { color: var(--inkt-donker); text-shadow: none; } .held--creme .held__tekst p { color: var(--tekst-creme); text-shadow: none; } .held--creme .held__tekst p.lead { color: var(--gold-deep); } .held--creme .kicker { color: var(--gold-deep); } /* Een beeld met eigen zwarte achtergrond (het logo) past in het vlak in plaats van het te vullen: vullend zou het woordmerk aan de zijkanten afsnijden, en de zwarte balken vallen weg tegen de eigen achtergrond. */ /* De hele foto zichtbaar in een band die zo hoog is als de tekst (wens eigenaar voor de gietfoto, 21 aug): niets afknippen en de band niet laten meegroeien, dus de foto wordt verticaal samengedrukt tot de hoogte van de band (object-fit: fill). Dat vervormt hem; de eigenaar koos daar bewust voor boven een hogere band of een afgeknipte foto. */ /* Wazige variant (Contact-CTA, eigenaar 21 aug: samendrukken vond hij daar lelijk): de foto heel en onvervormd in het midden van de helft, eromheen een wazige, donkere versie van dezelfde foto (de pagina geeft hem door in --foto). De wazige laag steekt iets buiten het vak, anders ziet u de rand van de vervaging. */ /* Herofoto die de hele helft vult, op de hoogte van de tekst samengedrukt (Contact, eigenaar 21 aug: 'de foto mag verticaal samendruk'). */ .held__beeld--vullend img { object-fit: fill; } /* Langere overloop in het midden dan bij de banden (90 px): een lichte foto leest anders als een harde rand ('doorzichtig lopen zoals bij over ons'). */ .held__beeld--vullend { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 220px); mask-image: linear-gradient(90deg, transparent 0, #000 220px); } @media (max-width: 900px) { .held__beeld--vullend { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 90px); mask-image: linear-gradient(180deg, transparent 0, #000 90px); } } /* Portret (de teamfoto, vierkant van hoofd tot riem): naast de tekst vult het de kolom met de hoofden bovenin. Op de telefoon maakt .held--band de figuur 64vw hoog; van het portret bleef zo alleen een band met gekruiste armen over, de hoofden onder de overloop. Daar krijgt hij zijn eigen verhouding en een kortere overloop, zodat de gezichten vrij staan. */ .held__beeld--portret img { object-position: 50% 25%; } @media (max-width: 900px) { /* width en justify-self staan er nadrukkelijk: een rasteritem met een aspect-ratio wordt in Safari niet meer uitgerekt maar links gezet, zo breed als hij hoog is (rechts bleef de helft leeg, iPhone, 19 sep 2026). Chrome rekt wel uit, dus in de proefweergave viel het niet op. */ /* Geen aspect-ratio meer maar een hoogte in vw, hetzelfde mechanisme als de 64vw van .held--band die op de iPhone bewezen werkt. De dubbele klasse wint het van die regel, die verderop in dit bestand staat. */ .held--band .held__beeld.held__beeld--portret { min-height: 100vw; width: 100%; justify-self: stretch; aspect-ratio: auto; } .held__beeld--portret { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40px); mask-image: linear-gradient(180deg, transparent 0, #000 40px); } } .held__beeld--passend { background: #040404; } .held__beeld--passend img { object-fit: contain; } /* Het bijschrift ligt als smalle strook onderin het beeld. */ .held__beeld figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 2.4rem 1.5rem 1rem; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-2); background: linear-gradient(180deg, transparent, rgba(10, 10, 10, 0.8)); } @media (max-width: 900px) { .held--band { min-height: 0; } .held--band .held__beeld { min-height: 64vw; } /* Op de telefoon staat de foto onder de tekst; zonder hoogte viel hij weg (de min-height: 0 van de CTA won van de algemene 52vw). */ .held--cta .held__beeld { min-height: 56vw; } .held--tekstmaat .held__beeld { min-height: 56vw; } } /* ---------- Panelen naast elkaar, van boven tot onder de tekst ---------- Wens van de eigenaar (21 aug): het beeld vult de volle hoogte van de tekst, geen lege strook erboven of eronder, en van zijn collages blijven alle foto's naast elkaar zichtbaar. Dat kan alleen als elk paneel een eigen afbeelding is: in een rij rekt elk paneel zelf mee tot de hoogte van de band (cover per paneel) en blijft elk paneel in beeld. Een vooraf samengesteld plaatje zou bij cover tot twee panelen worden bijgesneden. De naad ertussen is goud; de band is precies zo hoog als de tekst. */ /* contain: size laat de rij niet meetellen voor de hoogte van het raster, anders bracht de natuurlijke hoogte van de panelen de band boven de tekst uit; nu bepaalt alleen de tekst de hoogte en rekken de panelen daarnaar. */ .held__rij { display: flex; gap: 3px; background: var(--gold); contain: size; } .held__rij img { position: static; flex: 1 1 0; min-width: 0; width: auto; height: auto; align-self: stretch; object-fit: cover; } @media (max-width: 900px) { .held--band .held__rij { min-height: 58vw; } } /* Drie foto's naast elkaar worden op een telefoon drie smalle reepjes. Vanaf hier vouwen ze om: twee naast elkaar, de derde eronder. */ @media (max-width: 600px) { /* contain: size zegt dat de hoogte NIET van de inhoud afhangt. Op de brede weergave klopt dat, want daar geeft .held--band de rij zijn hoogte. Hier mag de rij juist omvouwen en zelf meegroeien met de foto's, en met min-height: 0 erbij was er dan geen enkele bron van hoogte meer over: de rij werd nul pixels hoog en de foto's waren op elke telefoon onzichtbaar, zowel op het projectenoverzicht als in de kamerbanden (gevonden 25 aug 2026). De insluiting moet hier dus uit. */ .held--band .held__rij { flex-wrap: wrap; min-height: 0; contain: none; } .held--band .held__rij img { flex: 1 1 calc(50% - 3px); min-height: 42vw; } } /* ---------- Contacttegels ---------- De informatieband uit de contact-mockup: naast elkaar, elk met een gouden lijntjesicoon, een klein label en de waarde eronder, gescheiden door een dunne lijn. Telefoon en openingstijden uit de mockup staan er bewust niet in (keuze eigenaar); de drie tegels zijn de bestaande contactgegevens. */ .tegels { list-style: none; margin: clamp(1.6rem, 3vw, 2.4rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.4rem, 3vw, 2.6rem); } .tegel { display: grid; grid-template-columns: 44px 1fr; column-gap: 1rem; align-items: start; padding-left: clamp(1rem, 2vw, 1.6rem); border-left: 1px solid var(--line); } .tegel:first-child { padding-left: 0; border-left: 0; } .tegel svg { width: 40px; height: 40px; color: var(--gold); grid-row: 1 / 3; margin-top: 0.1rem; } .tegel__lbl { display: block; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.35rem; } .tegel__waarde, .tegel__waarde a { color: rgba(244, 239, 229, 0.88); font-size: 1.02rem; line-height: 1.5; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); } .tegel__waarde a:hover { color: var(--gold-2); } .sek--creme .tegel { border-left-color: var(--lijn-creme); } .sek--creme .tegel__waarde, .sek--creme .tegel__waarde a { color: var(--inkt-donker); text-shadow: none; } .sek--creme .tegel__lbl, .sek--creme .tegel svg { color: var(--gold-deep); } .tegels + .btn { margin-top: clamp(1.8rem, 3.5vw, 2.6rem); } @media (max-width: 860px) { .tegels { grid-template-columns: 1fr; gap: 1.2rem; } .tegel { padding-left: 0; border-left: 0; padding-top: 1.1rem; border-top: 1px solid var(--line); } .tegel:first-child { padding-top: 0; border-top: 0; } } /* De menubalk blijft in de vlakke stijl precies zoals hij was (besluit eigenaar 21 aug): zelfde hoogte, zelfde links, zelfde logo. Het woordmerk naast het monogram bestaat niet meer. */ /* ---------- Kop met het tweede deel in goud ---------- In de mockups eindigt elke kop in goud. De tekst blijft een knooppunt (de vertaling hangt eraan), dus geen los element om het goud: een kleurverloop dat door de letters heen schijnt, van warm wit naar goud. Inline-block, zodat het verloop over de tekst loopt en niet over de hele kolom. */ /* De kicker erboven is een blok, anders schuift hij naast de inline kop. */ html.vlak .held--tekstmaat .kicker, html.vlak .held--cta-midden .kicker, html.vlak .kaart .kicker, html.vlak .cta-band .kicker, html.vlak .sek .kicker { display: block; margin-bottom: 0.5rem; } html.vlak .tweetoon { display: inline-block; background: linear-gradient(90deg, #f4efe5 0%, #f4efe5 40%, var(--gold-2) 60%, var(--gold) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; } /* ---------- Gegevensstrook direct onder de hero ---------- */ .strook { position: relative; z-index: 2; background: rgba(14, 14, 13, 0.72); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: clamp(1.8rem, 3.5vw, 2.6rem); } .strook .tegels { margin-top: 0; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- Twee kaarten naast elkaar: formulier en advies ---------- */ .kaarten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1rem, 2vw, 1.5rem); padding-block: clamp(1.8rem, 4vw, 3rem); } .kaart { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; padding: clamp(1.6rem, 3.2vw, 2.8rem); background: rgba(12, 12, 11, 0.8); } .kaart--marmer { background: #0b0b0a url("../assets/uploads/advies-garage.webp") center / cover no-repeat; } .kaart--marmer::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 8, 8, 0.82) 0%, rgba(8, 8, 8, 0.6) 55%, rgba(8, 8, 8, 0.25) 100%); } .kaart > * { position: relative; } .kaart__kop { display: block; font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.4rem; font-weight: 500; } .kaart h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.12; } .kaart p { color: rgba(244, 239, 229, 0.86); line-height: 1.75; margin: 1rem 0 0; max-width: 48ch; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); } .kaart .sier { margin: 0 0 1.2rem; } .kaart__punten { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: 1.1rem; } .kaart__punten li { display: flex; align-items: center; gap: 1rem; color: rgba(244, 239, 229, 0.9); font-size: 0.95rem; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); } .kaart__punten svg { width: 30px; height: 30px; color: var(--gold); flex: none; } /* Velden op donker: dunne gouden rand, lichte tekst, tekst in het veld zelf. */ .veld { margin-bottom: 0.9rem; } .veld input, .veld textarea { width: 100%; font: inherit; font-size: 0.95rem; color: var(--ink); background: rgba(20, 20, 19, 0.72); border: 1px solid rgba(200, 164, 92, 0.28); border-radius: 3px; padding: 0.95rem 1.1rem; resize: vertical; transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease); } .veld input::placeholder, .veld textarea::placeholder { color: rgba(244, 239, 229, 0.55); } .veld input:focus, .veld textarea:focus { outline: none; border-color: var(--gold); background: rgba(24, 24, 22, 0.85); } .kaart .btn--solid { width: 100%; margin-top: 0.4rem; } .kaart__noot { font-size: 0.8rem; color: rgba(244, 239, 229, 0.68); text-align: center; margin: 1rem 0 0; max-width: none; } .kaart__noot a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; } .kaart .form-status { text-align: center; } @media (max-width: 900px) { .kaarten { grid-template-columns: 1fr; } } /* ---------- CTA-band op marmer ---------- */ /* ---------- FAQ (vlakke stijl, naar de faq-mockup, 21 aug) ---------- De hero is de Contact-variant (held--tekstmaat + held__beeld--vullend): zo hoog als de tekst, foto van de eigenaar vult de helft. */ /* Kop van twee regels met de tweede regel in goud (mockup: 'Veelgestelde' wit, 'vragen.' goud). Het verloop loopt van boven naar beneden en slaat na precies een regelhoogte (1lh) om; in een taal met drie regels zijn regel twee en drie goud. Kent de browser lh niet, dan valt hij terug op het gewone tweetoon. */ html.vlak .tweetoon--regels { background-image: linear-gradient(180deg, #f4efe5 0, #f4efe5 1lh, var(--gold-2) 1lh, var(--gold) 100%); } /* Hero-hoogte op alle pagina's (eigenaar 21 aug: eerst 'iets groter' op Offerte, toen 'gebruik deze hoogte voor alle pagina, dat is perfect'); de tekst blijft in het midden, de foto vult mee. */ .held--ruim { min-height: 540px; } @media (max-width: 900px) { .held--ruim { min-height: 0; } } /* Categorierail links, vragen rechts. De rail blijft bij het scrollen staan. */ .vragen__raster { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: start; } /* De rail op creme met donkere tekst (wens eigenaar 21 aug), zoals de creme blokken op Offerte. */ .vragen__rail { position: sticky; top: calc(var(--navhoogte) + var(--actiehoogte) + 1.5rem); background: var(--creme); color: var(--inkt-donker); padding: clamp(1.4rem, 2.4vw, 2rem) clamp(1.2rem, 2vw, 1.7rem); border-radius: 6px; } .vragen__cats { display: grid; gap: 0.45rem; } .vragen__cat { display: block; width: 100%; text-align: left; background: none; border: 0; border-left: 2px solid transparent; cursor: pointer; font-family: var(--font-body); font-weight: 500; font-size: 0.84rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tekst-creme); padding: 0.7rem 0 0.7rem 1.05rem; transition: color 0.3s var(--ease), border-color 0.3s var(--ease); } .vragen__cat:hover { color: var(--gold-deep); } .vragen__cat.is-actief { color: var(--gold-deep); border-left-color: var(--gold-deep); } .vragen__hulp { margin-top: clamp(2.6rem, 5vw, 4.8rem); padding-left: 1.05rem; } .vragen__hulp svg { width: 66px; height: 66px; color: var(--gold-deep); display: block; margin-bottom: 1.5rem; } .vragen__hulp p { font-size: 0.92rem; line-height: 1.7; color: var(--tekst-creme); max-width: 24ch; margin: 0 0 1.4rem; } /* De knop neemt de breedte van het vak (stak er eerst uit, eigenaar 21 aug). */ .vragen__hulp .btn { width: 100%; justify-content: space-between; font-size: 0.72rem; letter-spacing: 0.14em; padding: 0.85rem 1rem; gap: 0.6rem; border-color: var(--gold-deep); color: var(--gold-deep); } .vragen__hulp .btn:hover { background: var(--gold-deep); color: #fff; } .vragen__hulp .btn svg { width: 17px; height: 17px; margin: 0; flex: none; } /* De vragen als kaarten: dunne gouden rand op het donkere vlak, de vraag in de serif, een plus die een min wordt, en de open kaart iets lichter. De klassen zijn die van de oude accordeon, want het script hangt eraan. */ html.vlak .faq { max-width: none; display: grid; gap: 0.85rem; background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } html.vlak .faq__item { border: 1px solid rgba(200, 164, 92, 0.28); border-radius: 6px; background: rgba(16, 16, 15, 0.6); transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease); } html.vlak .faq__item:last-child { border-bottom: 1px solid rgba(200, 164, 92, 0.28); } html.vlak .faq__item.open { background: rgba(28, 27, 24, 0.86); border-color: rgba(200, 164, 92, 0.5); } html.vlak .faq__q { color: #f4efe5; font-size: clamp(1.1rem, 1.7vw, 1.4rem); padding: 1.2rem 3.6rem 1.2rem 1.5rem; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); transition: color 0.3s var(--ease); } html.vlak .faq__item.open .faq__q, html.vlak .faq__q:hover { color: var(--gold-2); } html.vlak .faq__q::after { right: 1.45rem; font-weight: 300; font-size: 1.7rem; } html.vlak .faq__a > div { padding: 0 1.5rem 1.45rem; color: rgba(244, 239, 229, 0.84); max-width: 74ch; line-height: 1.75; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); } html.vlak .faq__item.open .faq__a { max-height: 1400px; } @media (max-width: 900px) { .vragen__raster { grid-template-columns: 1fr; gap: 1.6rem; } .vragen__rail { position: static; } .vragen__cats { display: flex; flex-wrap: wrap; gap: 0.2rem 1.2rem; } .vragen__cat { width: auto; border-left: 0; border-bottom: 2px solid transparent; padding: 0.45rem 0; } .vragen__cat.is-actief { border-bottom-color: var(--gold); } .vragen__hulp { margin-top: 1.6rem; padding-left: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 1.2rem; align-items: center; } .vragen__hulp svg { width: 48px; height: 48px; margin: 0; grid-row: 1 / 3; } .vragen__hulp p { margin-bottom: 0.8rem; max-width: none; } } /* ---------- Offerte (vlakke stijl, naar de offerte-mockup, 21 aug) ---------- Vier pluspunten in de strook onder de hero: icoon boven, titel in goud, tekst eronder, gescheiden door dunne lijnen. */ .tegels--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tegel--usp { display: block; } .tegel--usp svg { display: block; width: 40px; height: 40px; margin: 0 0 0.9rem; color: var(--gold); } .tegel--usp .tegel__lbl { font-size: 0.74rem; letter-spacing: 0.2em; margin-bottom: 0.45rem; } .tegel--usp .tegel__waarde { display: block; font-size: 0.95rem; color: rgba(244, 239, 229, 0.84); max-width: 26ch; } @media (max-width: 1100px) and (min-width: 861px) { .tegels--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.8rem; } .tegel--usp:nth-child(3) { padding-left: 0; border-left: 0; } } /* Formulier links, stappen en direct contact rechts achter een dunne lijn. */ .offerte__raster { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; padding-block: clamp(2.4rem, 5vw, 4rem); } .offerte__kop h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); } .offerte__kop .sier { margin: 0.8rem 0 1.6rem; } .offerte__zij { border-left: 1px solid var(--line); padding-left: clamp(1.5rem, 3.5vw, 3.5rem); } .offerte__zij > h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.15; max-width: 14ch; } /* Velden zoals in de mockup: het label klein in het vak, de waarde eronder. */ html.vlak .field { gap: 0.1rem; margin-bottom: 0.8rem; padding: 0.55rem 1rem 0.6rem; border: 1px solid rgba(200, 164, 92, 0.28); border-radius: 3px; background: rgba(20, 20, 19, 0.72); transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease); } html.vlak .field:focus-within { border-color: var(--gold); background: rgba(24, 24, 22, 0.85); } html.vlak .field label { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.04em; color: rgba(244, 239, 229, 0.62); } html.vlak .field__help { font-size: 0.7rem; color: rgba(244, 239, 229, 0.5); font-weight: 400; } html.vlak .field input, html.vlak .field textarea, html.vlak .field select { background: transparent; border: 0; border-radius: 0; padding: 0.15rem 0; color: var(--ink); font-size: 0.98rem; } html.vlak .field select option { background: #141413; color: var(--ink); } html.vlak .field input:focus, html.vlak .field textarea:focus, html.vlak .field select:focus { outline: none; border: 0; } html.vlak .field input::placeholder, html.vlak .field textarea::placeholder { color: rgba(244, 239, 229, 0.4); } html.vlak #quoteForm .btn--solid { width: 100%; margin-top: 0.4rem; } html.vlak #quoteForm .form-status { text-align: center; } /* Het blok met de WhatsApp-tip en de privacyverwijzing op creme, zoals het stappenblok (wens eigenaar 21 aug). */ html.vlak .form-extra--creme { border-top: 0; margin-top: 1.4rem; background: var(--creme); color: var(--inkt-donker); padding: clamp(1.4rem, 2.6vw, 2rem); border-radius: 6px; } html.vlak .form-extra--creme p { color: var(--tekst-creme); font-size: 0.92rem; text-shadow: none; } html.vlak .form-extra--creme .btn { font-size: 0.74rem; padding: 0.85rem 1.35rem; margin-bottom: 1.1rem; border-color: var(--gold-deep); color: var(--gold-deep); } html.vlak .form-extra--creme .btn:hover { background: var(--gold-deep); color: #fff; } html.vlak .form-extra--creme .form-note { color: var(--tekst-creme); } html.vlak .form-extra--creme .link-arrow { color: var(--gold-deep); } /* De stappen na de aanvraag: nummer in de serif, titel in goud, tekst eronder. */ .stappen { list-style: none; margin: 1.4rem 0 0; padding: 0; } .stappen li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); column-gap: 0.5rem; padding: 1.3rem 0; border-bottom: 1px solid var(--line); } .stappen__nr { font-family: var(--font-display); font-size: 2rem; line-height: 1; color: var(--gold); } .stappen__kop { display: block; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); font-weight: 500; margin-bottom: 0.4rem; } .stappen p { margin: 0; font-size: 0.92rem; line-height: 1.65; color: rgba(244, 239, 229, 0.84); max-width: 34ch; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); } /* De stappen op een creme vlak met donkere tekst, zoals de creme banden van Over ons (wens eigenaar 21 aug). */ .offerte__stappen { background: var(--creme); color: var(--inkt-donker); padding: clamp(1.6rem, 3vw, 2.4rem); border-radius: 6px; } html.vlak .offerte__stappen h2 { color: var(--inkt-donker); text-shadow: none; } .offerte__stappen .stappen li { border-bottom-color: var(--lijn-creme); } .offerte__stappen .stappen li:last-child { border-bottom: 0; padding-bottom: 0.4rem; } .offerte__stappen .stappen__nr, .offerte__stappen .stappen__kop { color: var(--gold-deep); } .offerte__stappen .stappen p { color: var(--tekst-creme); text-shadow: none; } .offerte__direct { margin-top: 2.2rem; } .offerte__direct h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin: 0.5rem 0 0.9rem; } html.vlak .offerte__direct .info-list li { color: rgba(244, 239, 229, 0.88); } html.vlak .offerte__direct .link-arrow { margin-top: 0.6rem; display: inline-block; } /* CTA met een gouden onderregel in de serif (mockup: tweede zin in goud). */ .held--cta p.lead { font-family: var(--font-display); font-size: clamp(1.35rem, 2.3vw, 1.9rem); color: var(--gold); margin: 0.15rem 0 0; line-height: 1.2; } @media (max-width: 860px) { .tegels--vier { grid-template-columns: 1fr; } } @media (max-width: 900px) { .offerte__raster { grid-template-columns: 1fr; } .offerte__zij { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 1.8rem; } } /* ---------- Galerij (vlakke stijl, naar de galerij-mockup, 21 aug) ---------- */ /* Het raster: drie kolommen, strakke tegels zonder zware rand. */ html.vlak .media-grid { gap: 0.9rem; margin-top: clamp(1.4rem, 3vw, 2.2rem); } html.vlak .media-tile { border-radius: 4px; border-color: rgba(200, 164, 92, 0.22); background: #0d0d0c; } html.vlak .galerij__noot { text-align: center; color: rgba(244, 239, 229, 0.72); font-size: 0.92rem; margin: clamp(1.6rem, 3vw, 2.4rem) 0 0; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); } html.vlak .galerij__noot a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; } /* ---------- Voet op creme (wens eigenaar 21 aug: 'footer in wit-creme') ---------- Dekkend creme met donkere tekst en diepgoud, zoals de creme blokken. */ html.vlak .voet { background: var(--creme); color: var(--inkt-donker); } html.vlak .voet__merk p { color: var(--tekst-creme); text-shadow: none; } html.vlak .voet__kolom { border-left-color: var(--lijn-creme); } html.vlak .voet__kolom h4 { color: var(--gold-deep); } html.vlak .voet__kolom a { color: var(--inkt-donker); text-shadow: none; } html.vlak .voet__kolom a:hover { color: var(--gold-deep); } html.vlak .voet__soc a { border-color: var(--gold-deep); color: var(--gold-deep); background: transparent; } html.vlak .voet__soc a:hover { background: var(--gold-deep); color: #fff; } html.vlak .voet__scheiding::before, html.vlak .voet__scheiding::after { background: var(--lijn-creme); } html.vlak .voet__cta h2 { color: var(--inkt-donker); text-shadow: none; } html.vlak .voet__cta p { color: var(--tekst-creme); text-shadow: none; } html.vlak .voet__onder { border-top-color: var(--lijn-creme); color: var(--tekst-creme); } /* ---------- Kleuren (vlakke stijl, naar de kleuren-mockup, 21 aug) ---------- Creme blok met tekst links en vier pluspunten rechts. */ .mogelijk { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; } .mogelijk__tekst h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); } .mogelijk__tekst .sier { margin: 0.8rem 0 1.1rem; } .mogelijk__tekst p { color: var(--tekst-creme); line-height: 1.8; margin: 0; max-width: 52ch; } .mogelijk__punten { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; } .mogelijk__punten li { display: flex; align-items: center; gap: 1rem; color: var(--inkt-donker); font-size: 0.98rem; } .mogelijk__punten svg { width: 34px; height: 34px; color: var(--gold-deep); flex: none; } /* Kop met lijnen links en rechts, en een onderregel. */ .kop-lijn { display: flex; align-items: center; justify-content: center; gap: 1.2rem; text-align: center; font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin: 0; } .kop-lijn::before, .kop-lijn::after { content: ""; width: clamp(50px, 9vw, 150px); height: 1px; background: var(--gold); flex: none; } .sek--creme .kop-lijn::before, .sek--creme .kop-lijn::after { background: var(--gold-deep); } .kop-sub { text-align: center; color: var(--tekst-creme); margin: 0.7rem auto 0; max-width: 60ch; font-size: 0.95rem; } /* Het assortiment: vier groepen met kaarten, op creme. */ .assort-sek { padding-top: 0; } .assort { display: grid; grid-template-columns: 0.95fr 1fr 1fr 1fr; gap: clamp(1rem, 1.8vw, 1.6rem); margin-top: clamp(1.8rem, 3.5vw, 2.8rem); align-items: start; } .assort__kolom h3 { font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-deep); text-align: center; margin: 0 0 0.9rem; font-weight: 500; } /* html.vlak .sek--creme h3 hierboven weegt zwaarder en verft deze kopjes weer donker, waardoor ze nooit goud werden (gevonden 23 aug 2026). Zelfde vorm als de andere uitzonderingen die daar al voor gemaakt zijn. */ html.vlak .sek--creme .assort__kolom h3 { color: var(--gold-deep); } .assort__kaarten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; background: rgba(255, 255, 255, 0.55); padding: 0.7rem; border-radius: 6px; } .assort__kaarten--een { grid-template-columns: 1fr; } html.vlak .sek--creme .group-card { display: block; aspect-ratio: auto; background: #fff; border: 1px solid var(--lijn-creme); border-radius: 4px; overflow: hidden; padding: 0; text-align: left; position: relative; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); } html.vlak .sek--creme .group-card:hover { transform: translateY(-3px); border-color: var(--gold-deep); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12); } html.vlak .sek--creme .group-card--breed { grid-column: 1 / -1; } html.vlak .sek--creme .group-card__art { display: block; aspect-ratio: 1 / 1; width: 100%; margin: 0; border-radius: 0; border: 0; } html.vlak .sek--creme .group-card--breed .group-card__art { aspect-ratio: 2.2 / 1; } html.vlak .assort .assort__kaarten--een .group-card__art { aspect-ratio: 1.6 / 1; } html.vlak .sek--creme .group-card__cap { display: block; padding: 0.7rem 2.4rem 0.8rem 0.75rem; align-items: start; } html.vlak .sek--creme .group-card__cap h3 { font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--inkt-donker); text-shadow: none; margin: 0 0 0.25rem; text-align: left; font-weight: 600; line-height: 1.3; } html.vlak .sek--creme .group-card__cap span { font-size: 0.68rem; letter-spacing: 0.04em; text-transform: none; color: var(--gold-deep); white-space: normal; } html.vlak .sek--creme .group-card__pijl { position: absolute; right: 0.6rem; bottom: 0.7rem; width: 22px; height: 22px; border: 1px solid var(--inkt-donker); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--inkt-donker); } html.vlak .sek--creme .group-card__pijl svg { width: 12px; height: 12px; } html.vlak .assort-sek .swatch-note { display: block; color: var(--tekst-creme); text-align: center; max-width: none; margin-top: 1.6rem; background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; } /* Populaire kleuren: acht vierkante foto's met de naam eronder. */ .populair { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0.8rem; margin-top: clamp(1.6rem, 3vw, 2.4rem); } .populair__kleur { display: block; text-align: center; color: var(--ink); } .populair__kleur img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid rgba(200, 164, 92, 0.3); border-radius: 4px; transition: transform 0.4s var(--ease), border-color 0.3s var(--ease); } .populair__kleur:hover img { transform: translateY(-3px); border-color: var(--gold); } .populair__kleur span { display: block; margin-top: 0.6rem; font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(244, 239, 229, 0.9); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); } .populair__knop { text-align: center; margin: clamp(1.6rem, 3vw, 2.4rem) 0 0; } /* Slotstrook met vier korte pluspunten: icoon en titel naast elkaar. */ .tegel--kort { display: flex; align-items: center; gap: 0.9rem; } .tegel--kort svg { width: 34px; height: 34px; color: var(--gold); flex: none; } .tegel--kort .tegel__lbl { margin: 0; font-size: 0.72rem; } @media (max-width: 1100px) { .assort { grid-template-columns: repeat(2, minmax(0, 1fr)); } .populair { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 900px) { .mogelijk { grid-template-columns: 1fr; gap: 1.6rem; } } @media (max-width: 600px) { .assort { grid-template-columns: 1fr; } .populair { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- Projecten (vlakke stijl, naar de project-mockup, 21 aug) ---------- Compacte kop boven de banden, en per project een band als de hero: tekst links, foto rechts op de volle bandhoogte, de hele foto klikbaar. */ .projkop { padding-block: clamp(2.2rem, 4.5vw, 3.4rem) clamp(1rem, 2vw, 1.6rem); } .kop-los__tekst { text-align: center; max-width: 780px; margin-inline: auto; } .kop-los__tekst h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); margin: 0.4rem 0 0.6rem; line-height: 1.1; } .kop-los__tekst p { margin: 0 auto; max-width: 62ch; color: rgba(244, 239, 229, 0.88); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); } .projband .held__tekst h2 a { color: inherit; transition: color 0.3s var(--ease); } .projband .held__tekst h2 a:hover { color: var(--gold-2); } .projband__voet { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.6rem 1.4rem; margin-top: 1.4rem; } .projband__prijs { font-family: var(--font-display); color: var(--gold-2); font-size: clamp(1.2rem, 2.2vw, 1.6rem); font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); } .held--creme .projband__prijs { color: var(--gold-deep); text-shadow: none; } .projband .link-arrow { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); } /* De foto's staan als panelen in een flexrij (held__rij); display: block zou die rij breken en de tweede foto onder de band duwen. */ .projband__beeld { display: flex; overflow: hidden; } .projband__beeld img { transition: transform 0.7s var(--ease); } .projband:hover .projband__beeld img { transform: scale(1.04); } /* Lange projecttitels iets kleiner, zodat ze in twee regels vallen zoals de mockup ('Twee kinderkamers,' wit, 'twee eigen werelden' goud). */ .held--kop-kleiner h1 { font-size: clamp(2.2rem, 3.6vw, 3.4rem); } /* ---------- Projectdetail (vlakke stijl, naar de Spiderman-mockup, 21 aug) ---------- Feiten als strook onder de hero: label in goud, waarde eronder, in drie kolommen met dunne lijnen. */ .feitenraster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.3rem clamp(1.4rem, 3vw, 2.6rem); margin: 0; } .feit { border-left: 1px solid var(--line); padding-left: clamp(1rem, 2vw, 1.4rem); } .feit dt { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.35rem; } .feit dd { margin: 0; color: rgba(244, 239, 229, 0.9); font-size: 0.95rem; line-height: 1.55; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); } .feit dd.feiten__prijs { font-family: var(--font-display); color: var(--gold-2); font-size: 1.35rem; font-weight: 600; } /* Het concept op creme: het verhaal links, een foto per kamer rechts. */ .concept { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; } .concept__tekst .kicker { display: block; margin-bottom: 1.1rem; } html.vlak .concept .projstory { max-width: 58ch; margin: 0; background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } html.vlak .concept .projstory p { color: var(--tekst-creme); line-height: 1.8; text-shadow: none; } html.vlak .concept .projstory h2, html.vlak .concept .projstory h3 { color: var(--inkt-donker); text-shadow: none; } .concept__fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); position: sticky; top: calc(var(--navhoogte) + var(--actiehoogte) + 1.5rem); } .concept__fotos figure { margin: 0; } .concept__fotos img { display: block; width: 100%; aspect-ratio: 1 / 1.15; object-fit: cover; border-radius: 4px; border: 1px solid var(--lijn-creme); } .concept__fotos figcaption { margin-top: 0.75rem; } .concept__fotos figcaption .kicker { display: block; font-size: 0.66rem; } .concept__fotos figcaption b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; color: var(--inkt-donker); margin-top: 0.2rem; } /* De rondgangfilm op zwart. */ html.vlak .projfilm { max-width: 1100px; margin: 0 auto; text-align: center; } html.vlak .projfilm video { width: auto; max-width: 100%; max-height: 82vh; display: block; margin: 0 auto; border: 1px solid var(--line); border-radius: 4px; background: #000; } html.vlak .projfilm figcaption { display: block; margin: 0.8rem auto 0; font-size: 0.85rem; color: rgba(244, 239, 229, 0.72); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); background: none; border: 0; padding: 0; box-shadow: none; } /* De afspeelknop van de projectfilm: een eigen foto met een driehoek erover. Pas na de klik komt de speler van youtube-nocookie binnen, zie js/film.js. De knop is een echte button, dus toetsenbord en schermlezer werken vanzelf. */ .projfilm__start { position: relative; display: block; width: 100%; max-width: 1100px; margin: 0 auto; padding: 0; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: #000; cursor: pointer; color: inherit; } .projfilm__start img { display: block; width: 100%; height: auto; opacity: 0.72; transition: opacity 0.4s var(--ease), transform 0.6s var(--ease); } .projfilm__start:hover img, .projfilm__start:focus-visible img { opacity: 0.85; transform: scale(1.02); } .projfilm__knop { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: clamp(58px, 7vw, 82px); aspect-ratio: 1; border-radius: 999px; display: grid; place-items: center; background: rgba(12, 12, 11, 0.72); border: 1px solid var(--gold); color: var(--gold-2); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); transition: background 0.3s var(--ease); } .projfilm__start:hover .projfilm__knop { background: rgba(12, 12, 11, 0.88); } .projfilm__knop svg { width: 46%; height: 46%; margin-left: 6%; } .projfilm__label { position: absolute; left: 50%; bottom: clamp(0.9rem, 2.4vw, 1.6rem); transform: translateX(-50%); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-2); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); white-space: nowrap; } /* Het vakje houdt de plek op de pagina vast; de speler erin mag groter zijn dan het vakje en wordt teruggeschaald, zodat YouTube 1080p stuurt in plaats van 720p. Zie de uitleg in js/film.js. */ .projfilm__vak { position: relative; display: block; width: 100%; max-width: 1100px; aspect-ratio: 16 / 9; margin: 0 auto; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: #000; } .projfilm__speler { position: absolute; top: 0; left: 0; border: 0; width: var(--breed, 100%); height: var(--hoog, 100%); transform: scale(var(--schaal, 1)); transform-origin: top left; } /* Op volledig scherm mag er niets meer geschaald worden. Twee losse regels: een browser die de ene selector niet kent, gooit anders de andere ook weg. */ .projfilm__speler:fullscreen { width: 100%; height: 100%; transform: none; } .projfilm__speler:-webkit-full-screen { width: 100%; height: 100%; transform: none; } .sek--creme .projfilm figcaption { color: var(--tekst-creme); text-shadow: none; } /* Per kamer een band: de slider vult de fotohelft op de volle bandhoogte. */ .projkamer__beeld { position: relative; align-self: stretch; min-height: 0; } html.vlak .projkamer .slider { position: absolute; inset: 0; border: 0; border-radius: 0; background: #0a0a0a; } html.vlak .projkamer .slider__track { height: 100%; } html.vlak .projkamer .slider__track img { height: 100%; aspect-ratio: auto; object-fit: cover; background: transparent; } html.vlak .projkamer .slider__dots button { border-color: rgba(255, 255, 255, 0.5); background: rgba(0, 0, 0, 0.35); } html.vlak .held--creme .pigmenten__kop { color: var(--gold-deep); } html.vlak .held--creme .pigmenten__lijst a { color: var(--inkt-donker); border-color: rgba(140, 106, 40, 0.45); } html.vlak .held--creme .pigmenten__lijst a:hover { border-color: var(--gold-deep); background: rgba(200, 164, 92, 0.18); } html.vlak .held--creme .pigmenten__noot { color: var(--tekst-creme); } html.vlak .projkamer .pigmenten__noot { text-shadow: none; } /* Het werkschema op creme: kop links, stappen rechts. */ .plan { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; } .plan__kop h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); } .plan__kop .sier { margin: 0.8rem 0 1.1rem; } .plan__kop p { color: var(--tekst-creme); line-height: 1.8; max-width: 44ch; } html.vlak .plan__kop .planning__na { margin-top: 1rem; font-size: 0.9rem; color: var(--tekst-creme); background: none; border: 0; padding: 0; box-shadow: none; max-width: 44ch; } .plan__stappen { margin-top: 0; } .plan__stappen li { grid-template-columns: 4.6rem minmax(0, 1fr); border-bottom-color: var(--lijn-creme); } .plan__stappen .stappen__nr { font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-deep); padding-top: 0.3rem; } .plan__stappen .stappen__kop { color: var(--gold-deep); } .plan__stappen p { color: var(--tekst-creme); text-shadow: none; max-width: 60ch; } @media (max-width: 900px) { .feitenraster { grid-template-columns: repeat(2, minmax(0, 1fr)); } .concept, .plan { grid-template-columns: 1fr; gap: 1.8rem; } .concept__fotos { position: static; } .projkamer__beeld { min-height: 64vw; } } @media (max-width: 560px) { .feitenraster { grid-template-columns: 1fr; } } /* ---------- Wat is epoxy (vlakke stijl, naar de mockup, 21 aug) ---------- Genummerde banden; bij 'band-links' staat de foto links en de tekst rechts, met de overloop aan de rechterkant van de foto. */ .nr { display: block; font-family: var(--font-display); font-size: 1.5rem; color: var(--gold); letter-spacing: 0.08em; margin-bottom: 0.35rem; } .held--creme .nr { color: var(--gold-deep); } .held--band-links { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1.02fr); } .held--band-links .held__tekst { order: 2; justify-self: start; } .held--band-links .held__beeld { order: 1; -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 90px); mask-image: linear-gradient(270deg, transparent 0, #000 90px); } .epoxyband .held__tekst p { max-width: 56ch; } .epoxyband .held__tekst .lijst { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.6rem; } .epoxyband .held__tekst .lijst li { position: relative; padding-left: 1.6rem; color: rgba(244, 239, 229, 0.88); line-height: 1.65; font-size: 0.97rem; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); max-width: 56ch; } .epoxyband.held--creme .held__tekst .lijst li { color: var(--tekst-creme); text-shadow: none; } .lijst--vink li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--gold); font-weight: 700; } .held--creme .lijst--vink li::before { color: var(--gold-deep); } .lijst--punt li::before { content: ""; position: absolute; left: 0.25rem; top: 0.6em; width: 0.45rem; height: 0.45rem; background: var(--gold); transform: rotate(45deg); } .held--creme .lijst--punt li::before { background: var(--gold-deep); } .epoxyband .held__tekst .link-arrow { margin-top: 0.6rem; } .held--creme .held__tekst a { color: var(--gold-deep); } .held--creme .held__tekst .link-arrow { color: var(--gold-deep); } /* De vier types als kaarten op creme. */ .types-sek { padding-top: 0; } .types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } .type { background: #fff; border: 1px solid var(--lijn-creme); border-radius: 6px; padding: 1.4rem 1.3rem; display: flex; flex-direction: column; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); } .type .kicker { color: var(--gold-deep); } html.vlak .type h3 { color: var(--inkt-donker); text-shadow: none; font-size: 1.3rem; margin: 0.4rem 0 0.5rem; } .type__wat { color: var(--tekst-creme); font-size: 0.92rem; margin: 0 0 0.8rem; } .type__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; font-size: 0.9rem; color: var(--tekst-creme); } .type__lijst li { position: relative; padding-left: 1.1rem; } .type__lijst li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.4rem; height: 0.4rem; background: var(--gold-deep); transform: rotate(45deg); } .type__prijs { margin: auto 0 0; padding-top: 1rem; font-family: var(--font-display); color: var(--gold-deep); font-weight: 600; font-size: 1.05rem; } .types__voet { text-align: center; color: var(--tekst-creme); max-width: 72ch; margin: 1.6rem auto 0; font-size: 0.92rem; line-height: 1.7; } @media (max-width: 1100px) { .types { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { /* Op de telefoon onder elkaar. Dit stond er niet, en omdat de regel met de twee kolommen verderop in het bestand staat dan de mobiele regel van .held, hielden juist deze banden hun twee kolommen: de tekst werd dan in een halve schermbreedte geperst (gemeld door de eigenaar 22 aug). */ .held--band-links { grid-template-columns: 1fr; } .held--band-links .held__tekst { order: 0; justify-self: stretch; } .held--band-links .held__beeld { order: 0; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 90px); mask-image: linear-gradient(180deg, transparent 0, #000 90px); } } @media (max-width: 600px) { .types { grid-template-columns: 1fr; } } /* ---------- Info (vlakke stijl, 21 aug) ---------- De vier onderdelen als kaarten op creme; de documenten als knoppen op zwart. */ .infokaarten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } .infokaart { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--lijn-creme); border-radius: 6px; padding: 1.5rem 1.4rem; color: var(--inkt-donker); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease); } .infokaart:hover { transform: translateY(-3px); border-color: var(--gold-deep); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12); } .infokaart .nr { color: var(--gold-deep); font-size: 1.3rem; margin-bottom: 0.6rem; } html.vlak .infokaart h3 { color: var(--inkt-donker); text-shadow: none; font-size: 1.35rem; margin: 0 0 0.5rem; } .infokaart p { color: var(--tekst-creme); font-size: 0.92rem; line-height: 1.65; margin: 0 0 1.2rem; } .infokaart__pijl { margin-top: auto; width: 26px; height: 26px; border: 1px solid var(--inkt-donker); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--inkt-donker); } .infokaart__pijl svg { width: 13px; height: 13px; } html.vlak .doclijst { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; margin: clamp(1.4rem, 3vw, 2.2rem) 0 0; padding: 0; } html.vlak .doclijst li { border: 0; } html.vlak .doclijst a { display: inline-flex; align-items: center; padding: 0.85rem 1.3rem; border: 1px solid var(--gold); border-radius: 2px; color: var(--gold); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; transition: background-color 0.3s var(--ease), color 0.3s var(--ease); } html.vlak .doclijst a:hover { background: var(--gold); color: var(--black); padding-left: 1.3rem; } @media (max-width: 1100px) { .infokaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .infokaarten { grid-template-columns: 1fr; } } /* ---------- Catalogus (vlakke stijl, 22 aug) ---------- Compacte donkere kop voor de categorie-, kleur- en RAL-pagina's (800 stuks, dus geen foto per pagina), inhoud op creme. */ .kop-los { padding-top: calc(var(--navhoogte) + var(--actiehoogte) + clamp(2.4rem, 5vw, 3.8rem)); padding-bottom: clamp(1.8rem, 3.5vw, 2.8rem); } .kop-los--vol { min-height: 70vh; display: flex; align-items: center; } .kop-los--vol .shell { width: 100%; } .kop-los__tekst .link-arrow { display: inline-flex; margin-bottom: 1.1rem; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); font-weight: 500; } .kop-los__tekst h1 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); letter-spacing: -0.01em; margin: 0.3rem 0 0; line-height: 1.1; } .kop-los__tekst .sier { justify-content: center; margin: 0.9rem 0 1rem; } .kop-los__tekst p { margin: 0 auto; max-width: 62ch; color: rgba(244, 239, 229, 0.88); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); } .kop-los__tekst p + p { margin-top: 0.8rem; } .kop-los__tekst p.lead { color: var(--gold-2); font-size: 1rem; } .kop-los__tekst .btn { margin-top: 1.6rem; } .kop-los__tekst .ral-search { margin-top: 1.4rem; } .kop-los__tekst .ral-search input { margin-inline: auto; display: block; background: rgba(20, 20, 19, 0.72); border-radius: 3px; color: var(--ink); } /* Kleurstalen en categoriekaarten als witte kaarten op creme. */ html.vlak .sek--creme .group-grid { gap: 1rem; } html.vlak .sek--creme .swatches { gap: 1rem; } html.vlak .sek--creme .swatch { background: #fff; border: 1px solid var(--lijn-creme); border-radius: 4px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); } html.vlak .sek--creme .swatch:hover { border-color: var(--gold-deep); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12); transform: translateY(-3px); } html.vlak .sek--creme .swatch__meta h3 { color: var(--inkt-donker); text-shadow: none; font-size: 1rem; } html.vlak .sek--creme .swatch__meta span { color: var(--gold-deep); } html.vlak .sek--creme .swatch-note { display: block; text-align: center; color: var(--tekst-creme); max-width: 70ch; margin: 1.8rem auto 0; background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; } /* Kleurdetail: slider links, uitleg rechts, de kleurtekst eronder. */ /* De oude leesplaat (donkere plaat achter de tekst) gaat eraf op creme. */ html.vlak .sek--creme .detail-info, html.vlak .sek--creme .kleurtekst, html.vlak .sek--creme .kleurtekst__deel { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } html.vlak .sek--creme .detail-info h2 { color: var(--inkt-donker); text-shadow: none; } html.vlak .sek--creme .detail-info p, html.vlak .sek--creme .detail-info .ral-extra { color: var(--tekst-creme); text-shadow: none; } html.vlak .sek--creme .kleurtekst__deel p { text-shadow: none; } html.vlak .sek--creme .detail-info .kicker { color: var(--gold-deep); } html.vlak .sek--creme .detail-info p { color: var(--tekst-creme); } html.vlak .sek--creme .detail-info p span { color: inherit; } html.vlak .sek--creme .kleurtekst__deel h3 { color: var(--gold-deep); } html.vlak .sek--creme .kleurtekst__deel p { color: var(--tekst-creme); } html.vlak .sek--creme .color-block { border-radius: 4px; border-color: var(--lijn-creme); box-shadow: none; } html.vlak .sek--creme .color-block__code { color: var(--gold-deep); } html.vlak .sek--creme .slider { border-color: var(--lijn-creme); border-radius: 4px; } /* ---------- Kleurcombinatie (22 aug 2026) ---------- De knop op een kleurpagina, het zwevende balkje, en de pagina zelf met de looks, de gekozen kleuren en de schematische impressie. */ .kiesknop { display: inline-flex; align-items: center; gap: 0.6rem; margin-right: 0.7rem; font-family: var(--font-body); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 1rem 1.6rem; cursor: pointer; border: 1px solid var(--gold-deep); border-radius: 2px; background: transparent; color: var(--gold-deep); transition: background-color 0.3s var(--ease), color 0.3s var(--ease); } .kiesknop svg { width: 17px; height: 17px; flex: none; } .kiesknop:hover { background: var(--gold-deep); color: #fff; } .kiesknop.is-gekozen { background: var(--gold-deep); color: #fff; } .kiesknop.is-gekozen svg { transform: rotate(45deg); } /* Het zwevende balkje: rechtsonder, boven de sterren en onder het menu. */ /* Rechtsboven, net onder de menubalk (wens eigenaar 22 aug); hij stond eerst rechtsonder en zat daar de nieuwe telefoonbalk in de weg. */ .keuzebalk { position: fixed; right: clamp(0.8rem, 2vw, 1.6rem); top: calc(var(--navhoogte) + var(--actiehoogte) + clamp(0.6rem, 1.5vw, 1rem)); bottom: auto; z-index: 46; display: grid; gap: 0.6rem; padding: 0.9rem 1rem 1rem; background: rgba(12, 12, 11, 0.92); border: 1px solid rgba(200, 164, 92, 0.4); border-radius: 6px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); max-width: min(320px, 82vw); } .keuzebalk.is-weg { display: none; } /* Op de kleurkeuzepagina staat de keuze al op het blad zelf. */ body:has(#keuzeLijst) .keuzebalk { display: none; } .keuzebalk__sluit { position: absolute; top: 0.2rem; right: 0.35rem; background: none; border: 0; color: rgba(244, 239, 229, 0.6); font-size: 1.1rem; line-height: 1; cursor: pointer; } .keuzebalk__sluit:hover { color: var(--gold); } .keuzebalk__kop { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); } .keuzebalk__stalen { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; } .keuzebalk__meer { font-size: 0.78rem; color: rgba(244, 239, 229, 0.8); } .keuzebalk .btn { font-size: 0.7rem; letter-spacing: 0.14em; padding: 0.7rem 1rem; } .keuze__staal { display: block; width: 34px; height: 34px; border-radius: 3px; object-fit: cover; border: 1px solid rgba(200, 164, 92, 0.45); } /* Op een telefoon staat het balkje bovenaan in beeld; smaller houden, anders legt het de halve pagina onder zich. Dit blok stond eerst boven .keuzebalk .btn en .keuze__staal hierboven, en die overschreven het weer met dezelfde zwaarte: op een telefoon bleven de knop en de stalen gewoon groot (gevonden 23 aug 2026). Nu staat het erna, en wint het weer. */ @media (max-width: 768px) { .keuzebalk { max-width: min(260px, 66vw); padding: 0.7rem 0.8rem 0.8rem; } .keuzebalk .btn { font-size: 0.6rem; padding: 0.6rem 0.7rem; letter-spacing: 0.1em; } .keuze__staal { width: 28px; height: 28px; } } .keuze__staal--groot { width: 66px; height: 66px; border-radius: 4px; } /* De pagina: werkblad links, impressie rechts. */ /* Alles in een gecentreerde kolom (wens eigenaar 22 aug). */ .keuzeblad { max-width: 820px; margin-inline: auto; text-align: center; } .keuzestap { font-size: clamp(1.2rem, 2vw, 1.6rem); margin: 0 0 0.2rem; } html.vlak .sek--creme .keuzestap { color: var(--inkt-donker); text-shadow: none; } /* De kleurcombinatie staat op het doorzichtige zwart (de sterren komen erdoorheen), maar de keuzeknoppen en velden blijven wit (wens eigenaar). */ html.vlak .sek--zwart .keuzestap { color: #f4efe5; } .keuzeblad .keuzestap:not(:first-child) { margin-top: clamp(1.8rem, 3.5vw, 2.6rem); } .keuzestap__hulp { color: rgba(244, 239, 229, 0.86); font-size: 0.92rem; margin: 0 auto 1rem; max-width: 56ch; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); } .looks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin-top: 1rem; } .look { display: block; text-align: center; background: #fff; border: 1px solid var(--lijn-creme); border-radius: 6px; padding: 0.85rem 1rem; cursor: pointer; transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease); } .look:hover { border-color: var(--gold-deep); } .look.is-actief { border-color: var(--gold-deep); box-shadow: 0 0 0 2px rgba(200, 164, 92, 0.35); } .look__naam { display: block; font-family: var(--font-display); font-size: 1.02rem; color: var(--inkt-donker); } .look__uitleg { display: block; font-size: 0.8rem; color: var(--tekst-creme); line-height: 1.45; } /* De gekozen kleuren staan in hetzelfde raster als een categorie; op deze pagina passen er drie naast elkaar. */ #keuzeLijst.swatches, #selectieLijst.swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1rem; } /* De naam onder een gekozen kleur staat op wit creme, net als in een categorie (wens eigenaar 22 aug); de pagina eromheen blijft donker. */ #keuzeLijst .swatch, #selectieLijst .swatch { background: var(--creme); border-color: var(--lijn-creme); } #keuzeLijst .swatch:hover, #selectieLijst .swatch:hover { border-color: var(--gold-deep); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4); } #keuzeLijst .swatch__meta, #selectieLijst .swatch__meta { display: block; text-align: left; background: var(--creme); } #keuzeLijst .swatch__meta h3, #selectieLijst .swatch__meta h3 { color: var(--inkt-donker); text-shadow: none; font-size: 1rem; } #keuzeLijst .swatch__meta span, #selectieLijst .swatch__meta span { display: block; margin-top: 0.15rem; color: var(--gold-deep); } @media (max-width: 640px) { #keuzeLijst.swatches, #selectieLijst.swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .keuzeleeg { color: rgba(244, 239, 229, 0.86); font-size: 0.92rem; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); } .keuzeleeg a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; } .keuzevelden { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; margin-top: 1rem; } html.vlak .keuzeblad .veld, html.vlak .keuzeblad .veld--breed { background: #fff; border-color: var(--lijn-creme); } html.vlak .keuzeblad .veld label { color: var(--tekst-creme); } html.vlak .keuzeblad .veld { text-align: left; } html.vlak .keuzeblad .veld label { display: block; margin-bottom: 0.35rem; font-size: 0.72rem; letter-spacing: 0.06em; } html.vlak .keuzeblad .veld input, html.vlak .keuzeblad .veld textarea, html.vlak .keuzeblad .veld select { color: var(--inkt-donker); background: transparent; border: 0; padding: 0.1rem 0; width: 100%; } html.vlak .keuzeblad .veld input::placeholder, html.vlak .keuzeblad .veld textarea::placeholder { color: rgba(69, 65, 58, 0.5); } html.vlak .keuzeblad .veld { padding: 0.55rem 0.9rem 0.65rem; border-radius: 4px; } html.vlak .keuzeblad .veld:focus-within { border-color: var(--gold-deep); } html.vlak .keuzeblad .veld select option { background: #fff; color: var(--inkt-donker); } .veld--breed { grid-column: 1 / -1; } .keuzeknoppen { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; margin-top: 1.6rem; } html.vlak .keuzeknoppen .btn:not(.btn--solid) { border-color: var(--gold); color: var(--gold); } html.vlak .keuzeknoppen .btn:not(.btn--solid):hover { background: var(--gold); color: var(--black); } .keuzestatus { color: var(--gold-2); font-size: 0.88rem; min-height: 1.2em; margin-top: 0.6rem; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); } /* Het blokje in het offerteformulier. */ .offertekeuze { position: relative; display: grid; gap: 0.5rem; margin-bottom: 1rem; padding: 0.9rem 1rem; border: 1px solid rgba(200, 164, 92, 0.35); border-radius: 4px; background: rgba(20, 20, 19, 0.5); } .offertekeuze__kop { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); } .offertekeuze__stalen { display: flex; flex-wrap: wrap; gap: 0.35rem; } .offertekeuze__regel { font-size: 0.85rem; color: rgba(244, 239, 229, 0.84); } @media (max-width: 700px) { .looks { grid-template-columns: repeat(2, minmax(0, 1fr)); } .keuzevelden { grid-template-columns: 1fr; } } /* Kiezen vanuit het kleurenraster: elke staal heeft een knopje in de hoek. Het was eerst een kaal plusje en dat zag niemand; nu massief goud met het woord erbij (wens eigenaar 22 aug). */ .staalvak { position: relative; } .staalvak .swatch { display: block; } .kiesknop--rond { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2; margin: 0; gap: 0.4rem; padding: 0.5rem 0.8rem; border-radius: 999px; background: var(--gold); border-color: var(--gold); color: var(--black); font-size: 0.68rem; letter-spacing: 0.12em; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); } .kiesknop--rond svg { width: 14px; height: 14px; } .kiesknop--rond:hover { background: var(--gold-2); border-color: var(--gold-2); color: var(--black); } .kiesknop--rond.is-gekozen { background: rgba(12, 12, 11, 0.9); border-color: var(--gold); color: var(--gold); } .kiesknop--rond.is-gekozen svg { transform: rotate(45deg); } /* Het kruisje op een kleur die al gekozen is (op de kleurcombinatiepagina). */ .kiesknop--weg { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2; margin: 0; padding: 0; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 999px; background: rgba(12, 12, 11, 0.85); border-color: rgba(200, 164, 92, 0.6); color: var(--gold); } .kiesknop--weg svg { width: 15px; height: 15px; transform: rotate(45deg); } .kiesknop--weg:hover { background: #a4331f; border-color: #a4331f; color: #fff; } /* ============================================================ NIEUWE ONDERDELEN (aug 2026) Ontwerp jouw vloer, de prijsindicatie, de voor/na-schuif en de vaste balk onderaan op de telefoon. Alles staat hier bij elkaar en heeft eigen klassen, zodat de goedgekeurde pagina's er niet door veranderen en elk onderdeel los aan te passen blijft. ============================================================ */ /* ---------- Ontwerp jouw vloer ---------- */ .ontwerper { max-width: 1000px; margin-inline: auto; text-align: center; } /* De stappenbalk: op een smal scherm valt hij netjes over twee regels. */ .stapbalk { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem 0.9rem; list-style: none; padding: 0; margin: 0 0 clamp(1.4rem, 3vw, 2.2rem); } .stapbalk__knop { background: none; border: 0; padding: 0.35rem 0.1rem 0.5rem; cursor: pointer; font-family: var(--font-body); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(244, 239, 229, 0.62); border-bottom: 2px solid transparent; transition: color 0.25s var(--ease), border-color 0.25s var(--ease); } .stapbalk__knop:hover { color: var(--gold-2); } /* Gekozen is goud, met een vinkje ervoor. Alleen een kleurverschil tussen wit en gebroken wit was niet af te lezen (wens eigenaar 23 aug 2026): je zag niet of je een vraag al beantwoord had. De stap waar je nu staat houdt daarnaast zijn gouden streep eronder. */ .stapbalk__knop.is-klaar { color: var(--gold-2); font-weight: 600; } .stapbalk__knop.is-klaar::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 0.42em; vertical-align: -1px; background: var(--gold-2); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l6 6L20 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l6 6L20 6'/%3E%3C/svg%3E") center / contain no-repeat; } .stapbalk__knop.is-nu { border-bottom-color: var(--gold); } .stapbalk__knop.is-nu:not(.is-klaar) { color: #f4efe5; } .stapvak { min-height: 320px; } .stap .keuzestap__hulp { max-width: 52ch; } /* De keuzevakken: wit op het donkere blad, net als bij de kleurcombinatie. */ .keuzes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; margin-top: 1.2rem; } .keuzes--breed { grid-template-columns: repeat(2, minmax(0, 1fr)); } .keuzes--meer { grid-template-columns: repeat(3, minmax(0, 1fr)); } .keuzes--kleur { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; } .keus { position: relative; display: block; text-align: center; cursor: pointer; background: #fff; border: 1px solid var(--lijn-creme); border-radius: 6px; padding: 0.85rem 0.9rem; font-family: var(--font-body); transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease); } .keus:hover { border-color: var(--gold-deep); transform: translateY(-2px); } .keus.is-gekozen { border-color: var(--gold-deep); box-shadow: 0 0 0 2px rgba(200, 164, 92, 0.35); } .keus.is-gekozen::after { content: ""; position: absolute; top: 0.5rem; right: 0.5rem; width: 17px; height: 17px; border-radius: 999px; background: var(--gold-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l6 6L20 6'/%3E%3C/svg%3E") center / 11px no-repeat; } .keus__naam { display: block; font-family: var(--font-display); font-size: 1.02rem; line-height: 1.3; color: var(--inkt-donker); } .keus__uitleg { display: block; font-size: 0.78rem; color: var(--tekst-creme); line-height: 1.45; margin-top: 0.15rem; } .keus__code { display: block; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); } .keus--kleur { padding: 0; overflow: hidden; } .keus--kleur .keus__naam { font-size: 0.85rem; padding: 0.5rem 0.5rem 0.6rem; } .keus--kleur .keus__code { padding: 0 0.5rem 0.55rem; margin-top: -0.4rem; } .keus__staal { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } .keus__staal--vlak { background: #333333; } .keus--geen { display: grid; place-items: center; min-height: 96px; } /* Zoeken tussen alle kleuren, zonder de pagina te verlaten. */ .kleurkies { margin-top: 1.2rem; } .veld--zoek { max-width: 420px; margin-inline: auto; } .kleurkies__meer { margin-top: 1rem; } .kleurkies__meer a { color: var(--gold); } .kleurkies__melding { grid-column: 1 / -1; color: rgba(244, 239, 229, 0.86); font-size: 0.92rem; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); } .stapknoppen { display: flex; justify-content: center; gap: 0.7rem; margin-top: clamp(1.4rem, 3vw, 2.2rem); } .stapknoppen .btn[disabled] { opacity: 0.4; cursor: default; pointer-events: none; } /* .btn zet zelf display, dus het hidden-attribuut alleen is niet genoeg: zonder deze regel blijft 'Volgende stap' op de laatste stap staan. */ .stapknoppen .btn:not(.btn--solid) { border-color: var(--gold); color: var(--gold); } .stapknoppen .btn:not(.btn--solid):hover { background: var(--gold); color: var(--black); } /* Het overzicht: een cremeblad met de gemaakte keuzes. */ .ontwerpblad { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.2rem; text-align: left; background: var(--creme); color: var(--tekst-creme); border-radius: 6px; padding: clamp(1.1rem, 2.2vw, 1.6rem) clamp(1.2rem, 2.4vw, 1.8rem); margin: 1.2rem 0; } .ontwerpblad dt { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-deep); align-self: center; } .ontwerpblad dd { margin: 0; color: var(--inkt-donker); display: flex; align-items: center; gap: 0.55rem; } .ontwerpblad__staal { display: block; width: 30px; height: 30px; border-radius: 3px; object-fit: cover; border: 1px solid var(--lijn-creme); flex: none; } .ontwerpprijs { margin-top: 1rem; } .ontwerpprijs__kop { display: block; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); } /* ---------- Prijsindicatie ---------- */ .prijsind { max-width: 900px; margin-inline: auto; text-align: center; } .prijsind__velden { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; margin-top: 1.2rem; } .prijsind__gelijk { font-size: 0.82rem; color: rgba(244, 239, 229, 0.8); margin-top: 0.6rem; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); } .prijsind__uit { margin-top: 1.4rem; min-height: 96px; } .prijsind__bedrag { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.15; color: var(--gold-2); } .prijsind__eenheid { font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); vertical-align: middle; } .prijsind__uitleg { font-size: 0.88rem; color: rgba(244, 239, 229, 0.86); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); } .prijsind__leeg, .prijsind__groot { color: rgba(244, 239, 229, 0.86); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); max-width: 58ch; margin-inline: auto; } .prijsind__noot { font-size: 0.8rem; font-style: italic; color: rgba(244, 239, 229, 0.72); max-width: 62ch; margin: 1rem auto 0; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); } .prijsind__knoppen { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; margin-top: 1.5rem; } .prijsind__knoppen .btn:not(.btn--solid) { border-color: var(--gold); color: var(--gold); } .prijsind__knoppen .btn:not(.btn--solid):hover { background: var(--gold); color: var(--black); } /* De invulvelden van de nieuwe onderdelen: wit, zoals bij de kleurcombinatie. */ html.vlak .ontwerper .veld, html.vlak .prijsind .veld { background: #ffffff; border: 1px solid var(--lijn-creme); border-radius: 4px; padding: 0.55rem 0.9rem 0.65rem; text-align: left; margin-bottom: 0; } html.vlak .ontwerper .veld label, html.vlak .prijsind .veld label { display: block; margin-bottom: 0.35rem; font-size: 0.72rem; letter-spacing: 0.06em; color: var(--tekst-creme); } html.vlak .ontwerper .veld input, html.vlak .ontwerper .veld textarea, html.vlak .ontwerper .veld select, html.vlak .prijsind .veld input, html.vlak .prijsind .veld select { color: var(--inkt-donker); background: transparent; border: 0; padding: 0.1rem 0; width: 100%; font-family: inherit; font-size: 1rem; } html.vlak .ontwerper .veld input::placeholder, html.vlak .ontwerper .veld textarea::placeholder, html.vlak .prijsind .veld input::placeholder { color: rgba(69, 65, 58, 0.5); } html.vlak .ontwerper .veld:focus-within, html.vlak .prijsind .veld:focus-within { border-color: var(--gold-deep); } html.vlak .ontwerper .veld select option, html.vlak .prijsind .veld select option { background: #ffffff; color: var(--inkt-donker); } /* ---------- Voor en na ---------- */ .voorna-kop { text-align: center; max-width: 62ch; margin: 0 auto clamp(1.4rem, 3vw, 2rem); } .voorna-kop .sier { justify-content: center; } .voorna { --voorna: 50%; position: relative; margin: 0 auto; max-width: 1100px; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; border: 1px solid var(--lijn-creme); background: var(--creme-2); touch-action: pan-y; } .voorna__beeld { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .voorna__voor { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--voorna)) 0 0); } .voorna__lijn { position: absolute; top: 0; bottom: 0; left: var(--voorna); width: 2px; margin-left: -1px; background: var(--gold); box-shadow: 0 0 18px rgba(0, 0, 0, 0.5); pointer-events: none; } .voorna__lijn::after { content: ""; position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; transform: translate(-50%, -50%); border-radius: 999px; background: rgba(12, 12, 11, 0.82); border: 1px solid var(--gold); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8a45c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-5 6 5 6M15 6l5 6-5 6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 22px; } .voorna__label { position: absolute; top: 0.9rem; z-index: 2; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-2); background: rgba(10, 10, 10, 0.6); border: 1px solid var(--line); padding: 0.28rem 0.6rem; border-radius: 999px; pointer-events: none; } .voorna__label--voor { left: 0.9rem; } .voorna__label--na { right: 0.9rem; } .voorna__schuif { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; padding: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: ew-resize; } .voorna__schuif::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 46px; height: 46px; border-radius: 999px; background: transparent; border: 0; cursor: ew-resize; } .voorna__schuif::-moz-range-thumb { width: 46px; height: 46px; border-radius: 999px; background: transparent; border: 0; cursor: ew-resize; } .voorna__schuif::-moz-range-track { background: transparent; border: 0; } .voorna:has(.voorna__schuif:focus-visible) .voorna__lijn::after { outline: 2px solid var(--gold-2); outline-offset: 3px; } .voorna figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.6rem 1rem 0.8rem; font-size: 0.82rem; color: #ffffff; background: linear-gradient(180deg, transparent, rgba(10, 10, 10, 0.82)); pointer-events: none; } /* ---------- De vaste balk onderaan op de telefoon ---------- */ .onderbalk { display: none; } @media (max-width: 768px) { .onderbalk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 47; display: flex; gap: 0.5rem; padding: 0.5rem 0.7rem calc(0.5rem + env(safe-area-inset-bottom)); background: rgba(10, 10, 10, 0.94); border-top: 1px solid var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); } .onderbalk.is-weg { transform: translateY(110%); opacity: 0; pointer-events: none; } .onderbalk__knop { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 46px; padding: 0.6rem 0.8rem; border-radius: 4px; border: 1px solid var(--gold); color: var(--gold); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; } .onderbalk__knop svg { width: 18px; height: 18px; flex: none; } .onderbalk__knop--goud { background: var(--gold); border-color: var(--gold); color: var(--black); } /* De sociale pil en het kleurkeuzebalkje schuiven omhoog, anders staan ze op de nieuwe balk. De voet krijgt extra ruimte voor allebei. */ body:has(.onderbalk) .social-rail { bottom: 76px; } body:has(.onderbalk) footer.site-footer, body:has(.onderbalk) .voet { padding-bottom: 180px; } } @media (prefers-reduced-motion: reduce) { .onderbalk { transition: none; } } /* ---------- Smalle schermen ---------- */ @media (max-width: 900px) { .keuzes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .keuzes--breed, .keuzes--meer { grid-template-columns: repeat(2, minmax(0, 1fr)); } .keuzes--kleur { grid-template-columns: repeat(4, minmax(0, 1fr)); } .prijsind__velden { grid-template-columns: 1fr; } .voorna { aspect-ratio: 4 / 3; } } @media (max-width: 600px) { .keuzes--breed { grid-template-columns: 1fr; } .keuzes--kleur { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ontwerpblad { grid-template-columns: 1fr; gap: 0.15rem; } .ontwerpblad dd { margin-bottom: 0.6rem; } .stapbalk { gap: 0.25rem 0.7rem; } .stapbalk__knop { font-size: 0.6rem; letter-spacing: 0.12em; } } /* ---------- Keuzehulp: het advies ---------- */ .stap--advies { text-align: center; } .adviesregel { margin-bottom: 1rem; } /* display beat het hidden-attribuut, waardoor alle vier de types tegelijk in beeld stonden; deze regel zet dat recht. */ .adviestype { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); background: var(--creme); border-radius: 6px; overflow: hidden; text-align: left; margin-bottom: 1.4rem; } .adviestype img { width: 100%; height: 100%; object-fit: cover; min-height: 280px; } .adviestype__tekst { padding: clamp(1.4rem, 3vw, 2.2rem); align-self: center; } .adviestype__tekst .kicker { color: var(--gold-deep); } html.vlak .adviestype__tekst h3, .adviestype__tekst h3 { color: var(--inkt-donker); text-shadow: none; font-size: clamp(1.5rem, 3vw, 2.1rem); margin-top: 0.2rem; line-height: 1.1; } .adviestype__tekst p { color: var(--tekst-creme); margin-top: 0.7rem; } .adviestype__prijs { font-family: var(--font-display); color: var(--gold-deep); font-weight: 600; font-size: 1.05rem; margin-top: 1rem; } @media (max-width: 700px) { .adviestype { grid-template-columns: 1fr; } .adviestype img { min-height: 52vw; } } /* ---------- Mijn selectie: het hartje ---------- */ .hartknop { display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; background: none; border: 1px solid var(--line); border-radius: 999px; color: var(--gold); padding: 0.45rem 0.9rem; margin: 0; font-family: var(--font-body); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; transition: border-color 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease); } .hartknop svg { width: 16px; height: 16px; flex: none; } .hartknop:hover { border-color: var(--gold); background: rgba(200, 164, 92, 0.14); } .hartknop.is-gekozen { color: var(--gold-2); border-color: var(--gold); } .hartknop.is-gekozen svg { fill: var(--gold); } /* Op een foto: alleen het hartje, in de hoek. */ .hartknop--rond { position: absolute; top: 0.7rem; right: 0.7rem; z-index: 4; width: 38px; height: 38px; padding: 0; justify-content: center; background: rgba(12, 12, 11, 0.55); border-color: rgba(200, 164, 92, 0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .hartknop--rond:hover { background: rgba(12, 12, 11, 0.8); } /* Op creme staat goud op wit te licht. */ html.vlak .sek--creme .hartknop, html.vlak .held--creme .hartknop { color: var(--gold-deep); border-color: rgba(140, 106, 40, 0.4); } html.vlak .sek--creme .hartknop:hover, html.vlak .held--creme .hartknop:hover { background: rgba(140, 106, 40, 0.1); } .projband__voet .hartknop { margin-left: 0.2rem; } /* Het aantal achter Mijn selectie in het menu. */ [data-favtel] { color: var(--gold); font-size: 0.85em; } /* De blokken op de selectiepagina. */ .selectieblok { margin-top: clamp(1.8rem, 3.5vw, 2.6rem); } .selectie__stalen { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 0.9rem; } /* ---------- Klikbare punten op een projectfoto ---------- */ .hotsek { max-width: 1200px; margin-inline: auto; } .hotfoto { position: relative; margin: 0 auto; max-width: 1100px; border-radius: 6px; overflow: hidden; } .hotfoto > img { display: block; width: 100%; height: auto; } .hotpunt { position: absolute; transform: translate(-50%, -50%); z-index: 3; width: 34px; height: 34px; padding: 0; margin: 0; cursor: pointer; display: grid; place-items: center; background: rgba(12, 12, 11, 0.55); border: 1px solid var(--gold); border-radius: 999px; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); transition: background 0.25s var(--ease), transform 0.25s var(--ease); } .hotpunt::before, .hotpunt::after { content: ""; position: absolute; background: var(--gold); border-radius: 2px; } .hotpunt::before { width: 13px; height: 1.5px; } .hotpunt::after { width: 1.5px; height: 13px; transition: transform 0.25s var(--ease); } .hotpunt:hover { background: rgba(12, 12, 11, 0.8); transform: translate(-50%, -50%) scale(1.08); } .hotpunt.is-open::after { transform: rotate(90deg); } .hotpunt.is-open { background: var(--gold); } .hotpunt.is-open::before, .hotpunt.is-open::after { background: var(--black); } /* De rustige ring eromheen: hij pulseert een paar keer en houdt dan op, zodat hij opvalt zonder de foto te overheersen. */ .hotpunt__ring { position: absolute; inset: -6px; border-radius: 999px; border: 1px solid rgba(200, 164, 92, 0.6); animation: hotpuls 2.6s ease-out 3; } @keyframes hotpuls { 0% { transform: scale(0.9); opacity: 0.9; } 70% { transform: scale(1.35); opacity: 0; } 100% { transform: scale(1.35); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .hotpunt__ring { animation: none; } } .hotkaart { position: absolute; z-index: 4; width: min(260px, 62vw); transform: translate(14px, -50%); background: rgba(12, 12, 11, 0.94); border: 1px solid rgba(200, 164, 92, 0.45); border-radius: 6px; padding: 0.9rem 1rem 1rem; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .hotkaart--links { transform: translate(calc(-100% - 14px), -50%); } .hotkaart--boven { transform: translate(14px, calc(-100% - 14px)); } .hotkaart--links.hotkaart--boven { transform: translate(calc(-100% - 14px), calc(-100% - 14px)); } /* Het staal van de kleur boven de tekst: bij een pigment de stalenfoto, bij een RAL-tint een vlak in die kleur. Het beeld wordt niet meer afgesneden (eigenaar, 30 aug 2026): een sprayblik is vierkant en een pigmentfoto ligt, en bij bijsnijden zag je van het blik alleen een strook. Nu past de hele foto in het vakje, gecentreerd op een licht plaatje, en blijft het kaartje even breed. */ .hotkaart__staal { display: block; width: 100%; height: 104px; margin: 0 0 0.75rem; object-fit: contain; border-radius: 4px; border: 1px solid rgba(200, 164, 92, 0.4); background: rgba(244, 239, 229, 0.06); } /* Een RAL-tint is geen foto maar een vlak; dat heeft die hoogte niet nodig. */ .hotkaart__staal--vlak { height: 62px; } .hotkaart h3 { font-size: 1.05rem; color: #f4efe5; text-shadow: none; margin: 0; } .hotkaart ul { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.25rem; } .hotkaart li { font-size: 0.84rem; color: rgba(244, 239, 229, 0.86); line-height: 1.5; } .hotkaart .link-arrow { margin-top: 0.7rem; display: inline-block; font-size: 0.72rem; } .hotfoto figcaption { padding: 0.9rem 0 0; font-size: 0.82rem; color: rgba(244, 239, 229, 0.72); text-align: center; } /* De blokken hierboven waren alleen voor een zwarte band gemaakt. Sinds de banden per project van beurt wisselen kunnen ze ook op creme staan, en dan viel de tekst weg (eigenaar, 28 aug 2026). Het kaartje bij een punt houdt zijn eigen donkere achtergrond, dus daar blijft de tekst licht; het bijschrift eronder staat wel op creme en wordt dus donker. */ html.vlak .sek--creme .hotkaart h3 { color: #f4efe5; } .sek--creme .hotkaart li { color: rgba(244, 239, 229, 0.86); } .sek--creme .hotfoto figcaption { color: var(--tekst-creme); } .sek--creme .concept__fotos figcaption, .sek--creme .concept__fotos figcaption b { color: var(--inkt-donker); } .sek--creme .concept__fotos figcaption .kicker { color: var(--gold-deep); } @media (max-width: 600px) { .hotpunt { width: 30px; height: 30px; } .hotkaart { width: min(230px, 74vw); } } /* ---------- Rococo naar Rocco ---------- */ /* De schuif zelf is dezelfde als bij voor en na; hier alleen de zaalverhouding en de twee merknamen als etiket. */ .voorna--rococo { aspect-ratio: 21 / 9; max-width: 1200px; } .voorna--rococo .voorna__label { font-size: 0.62rem; letter-spacing: 0.28em; } .rococosek .voorna-kop { max-width: 70ch; } .rococosek .voorna-kop h2 { font-size: clamp(1.5rem, 3.2vw, 2.4rem); line-height: 1.15; } @media (max-width: 700px) { .voorna--rococo { aspect-ratio: 4 / 3; } } /* ---------- Hulp bij kiezen: de zes kaarten ---------- */ /* Drie op een rij in plaats van vier: de titels zijn hier langer. Een lang woord als Kleurcombinatie liep anders zijn kaart uit. */ .infokaarten--hulp { grid-template-columns: repeat(3, minmax(0, 1fr)); } .infokaart h2 { overflow-wrap: break-word; } .infokaarten--hulp .infokaart h2 { font-size: clamp(1.25rem, 2.1vw, 1.7rem); line-height: 1.12; } @media (max-width: 1100px) { .infokaarten--hulp { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .infokaarten--hulp { grid-template-columns: 1fr; } } /* Twee schuiven onder elkaar (een per ruimte) hebben lucht nodig. */ .voorna-sek .voorna + .voorna { margin-top: clamp(1.4rem, 3vw, 2.2rem); } .voorna figcaption b { color: #fff; font-weight: 500; } /* ---------- Telefoonmenu met groepen ---------- */ /* Een flexitem is standaard nooit smaller dan zijn inhoud (min-width: auto). Met min-width: 0 blijft een groep binnen het scherm, ook als er ooit een langere regel in de uitklaplijst komt. */ .mob-groep { min-width: 0; } .mob-groep__rij { display: flex; align-items: center; gap: 0.5rem; border-bottom: 1px solid var(--line-soft); } .mob-groep__rij > a { min-width: 0; } .mob-groep__rij > a { flex: 1; border-bottom: 0; } .mob-groep__knop { background: none; border: 0; cursor: pointer; color: var(--gold); padding: 0.75rem 0.1rem 0.75rem 1.2rem; font-size: 0.8rem; line-height: 1; transition: transform 0.25s var(--ease); } .mob-groep.open .mob-groep__knop { transform: rotate(180deg); } /* display wint van het hidden-attribuut, dus die regel is nodig. */ .mob-groep__lijst { display: grid; padding-left: 1rem; min-width: 0; } .mob-groep__lijst a { font-size: 0.76rem; color: rgba(255, 255, 255, 0.78); padding: 0.6rem 0; } .mob-groep__lijst a:last-child { border-bottom: 0; } /* ---------- Drie badges bij Geen verrassingen achteraf ---------- */ .badges { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(0.8rem, 2.5vw, 2.2rem); list-style: none; margin: clamp(1.6rem, 3vw, 2.4rem) 0 clamp(2rem, 4vw, 3rem); padding: 0; } .badge { display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.55rem 1.1rem 0.55rem 0.6rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(12, 12, 11, 0.6); } .badge__teken { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 999px; border: 1px solid rgba(200, 164, 92, 0.45); color: var(--gold); } .badge__teken svg { width: 18px; height: 18px; } .badge__tekst { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: #f4efe5; white-space: nowrap; } @media (max-width: 600px) { .badges { gap: 0.6rem; } .badge { padding: 0.45rem 0.9rem 0.45rem 0.5rem; } .badge__teken { width: 30px; height: 30px; } .badge__tekst { font-size: 0.66rem; letter-spacing: 0.12em; white-space: normal; } } /* "Geschikt voor" bij elk vloertype (wens eigenaar 22 aug): een bezoeker ziet zo in een regel of dit type bij zijn ruimte hoort, nog voor de prijs. */ .type__voor { margin: auto 0 0; padding-top: 1rem; font-size: 0.85rem; color: var(--tekst-creme); line-height: 1.5; } .type__voor + .type__prijs { margin-top: 0.35rem; padding-top: 0; } .type__voor-lbl { display: block; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 0.15rem; } /* ---------- Bedanktpagina ---------- */ .bedankt { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(1.6rem, 4vw, 3.5rem); align-items: start; } /* De stappenlijst is voor een donkere ondergrond gemaakt; op creme moeten de kleuren om, net als in het stappenblok op de offertepagina. */ .bedankt__stappen .stappen li { border-bottom-color: var(--lijn-creme); } .bedankt__stappen .stappen li:last-child { border-bottom: 0; } .bedankt__stappen .stappen__nr, .bedankt__stappen .stappen__kop { color: var(--gold-deep); } .bedankt__stappen .stappen p { color: var(--tekst-creme); text-shadow: none; max-width: 44ch; } .bedankt__nu p { color: var(--tekst-creme); max-width: 46ch; } .bedankt__nu .btn { margin-top: 1.2rem; } .bedankt__terug { margin-top: 1.4rem; } .bedankt__terug a { color: var(--gold-deep); } @media (max-width: 900px) { .bedankt { grid-template-columns: 1fr; } } /* De robotcontrole staat op interaction-only: meestal zie je niets en komt er niets in beeld. Moet iemand toch iets aanklikken, dan hoort het niet tegen de rand van het formulier te plakken. */ .field--robot { margin-top: 0.2rem; } .field--robot:empty { display: none; } /* Het vinkje voor de voorbeeldplaten: het hokje links, het label ernaast, en de toelichting eronder op dezelfde lijn als het label. */ .field--vink { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 0.1rem 0.7rem; } .field--vink input[type="checkbox"] { width: 20px; height: 20px; margin-top: 0.15rem; accent-color: var(--gold); cursor: pointer; } .field--vink label { cursor: pointer; margin: 0; } .field--vink .field__help { display: block; margin-top: 0.2rem; } /* ---------- Foto's meesturen bij de offerteaanvraag ---------- */ /* De bestandsknop van de browser bleef altijd in de taal van de computer staan: op de Engelse site stond er "Bestanden kiezen" en "Geen bestand gekozen" (gemeld door de eigenaar 23 aug 2026). Daar is geen stijlblad tegen opgewassen, dus staat het echte invoerveld nu uit het zicht en bedienen een eigen knop en een eigen regel het. Het veld blijft wel bereikbaar met de toetsen: het staat onder de knop, en de omranding bij focus valt op de knop. */ .bestandkies { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; margin-top: 0.15rem; } .bestandkies__invoer { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .bestandkies__knop { display: inline-flex; align-items: center; min-height: 40px; padding: 0.5rem 0.95rem; border-radius: 3px; cursor: pointer; border: 1px solid var(--gold); background: transparent; color: var(--gold); font-family: var(--font-body); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; transition: background 0.25s var(--ease), color 0.25s var(--ease); } .bestandkies__knop:hover { background: var(--gold); color: var(--black); } .bestandkies__invoer:focus-visible + .bestandkies__knop { outline: 2px solid var(--gold-2); outline-offset: 3px; } .bestandkies__stand { color: rgba(244, 239, 229, 0.62); font-size: 0.85rem; } /* Het kruisje waarmee de klant een blok uit zijn aanvraag haalt. Zijn ontwerp of kleuren blijven gewoon bewaard; hij stuurt ze alleen deze keer niet mee. */ /* De link en de knop op een eigen regel. Eerst stond het kruisje klein in de hoek; op een telefoon was dat een doelwit van dertien pixels en miste je hem steeds (gemeld door de eigenaar 23 aug 2026). Nu zijn het allebei knoppen waar een vinger op past. */ .offertekeuze__voet, .selectie__voet { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 0.3rem; } .offertekeuze__weg, .selectie__weg { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 40px; background: none; border: 1px solid rgba(200, 164, 92, 0.3); border-radius: 4px; padding: 0.5rem 0.9rem; cursor: pointer; color: rgba(244, 239, 229, 0.72); font-family: var(--font-body); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease); } .offertekeuze__weg svg, .selectie__weg svg { width: 14px; height: 14px; } .offertekeuze__weg:hover, .selectie__weg:hover { color: var(--gold-2); border-color: var(--gold); background: rgba(200, 164, 92, 0.1); } /* Het tabje Advies zolang er nog vragen open staan. */ .stapbalk__knop.is-vergrendeld { opacity: 0.55; } /* Op Mijn selectie kan elk blok weg of aangepast worden (wens eigenaar 23 aug 2026). Daar staat alles gecentreerd, en anders dan op het offerteformulier gooit het kruisje de keuze echt weg. Daarom de regel eronder: een klik te veel is met een enkele druk terug te draaien. */ .selectie__voet { justify-content: center; margin-top: 1.1rem; } /* Het kruisje op een kleurstaal: het staal is 66 bij 66, dus het kruisje van 32 zou er half overheen liggen. Kleiner, en net buiten de hoek. */ .selectie__stalen { padding-top: 9px; gap: 1.15rem; } .staalvak--kleur .kiesknop--weg { top: -9px; right: -9px; width: 26px; height: 26px; } .staalvak--kleur .kiesknop--weg svg { width: 12px; height: 12px; } .selectie__hersteld { margin: 1.2rem auto 0; max-width: 56ch; text-align: center; color: rgba(244, 239, 229, 0.86); font-size: 0.92rem; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); } .linkknop { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; font-size: inherit; color: var(--gold); text-decoration: underline; text-underline-offset: 3px; } .linkknop:hover { color: var(--gold-2); } /* Vergrootbare foto's zijn sinds 23 aug 2026 ook met de toetsen te bedienen. Dan hoort er een zichtbare rand omheen zodra je er met Tab op staat. */ .slider__track img:focus-visible, .media-grid img:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 3px; border-radius: 2px; } /* De adviesstap krijgt de focus zodat de volgende Tab op de goede plek begint. Dat is bediening, geen aanwijzing, dus zonder rand. */ .stap[tabindex="-1"]:focus { outline: none; } /* ---------- De opbouw van de vloer, opengewerkt ---------- De foto is bewust zonder tekst gemaakt, zodat er een beeld is voor alle zes de talen. De namen van de lagen liggen er hier overheen, op een plek in procenten van de foto, zodat ze meeschalen. Op een telefoon is daar geen ruimte voor: daar worden het gewone regels onder de foto. */ .opbouw-sek .shell { max-width: 1180px; } .opbouw__kop { text-align: center; max-width: 62ch; margin: 0 auto clamp(1.4rem, 3vw, 2.2rem); } .opbouw__kop .sier { justify-content: center; } .opbouw { position: relative; margin: 0 auto; max-width: 1100px; border-radius: 6px; overflow: hidden; border: 1px solid var(--lijn-creme); } .opbouw__beeld { display: block; width: 100%; height: auto; } .opbouw__lagen { list-style: none; margin: 0; padding: 0; } .opbouw__laag { position: absolute; top: var(--y); left: 72.5%; right: 0; transform: translateY(-50%); display: flex; align-items: center; gap: 0.55rem; padding-right: clamp(0.6rem, 2vw, 1.4rem); } /* Het streepje van de stip naar de naam. */ .opbouw__stip { position: relative; flex: none; width: 7px; height: 7px; border-radius: 999px; background: var(--inkt-donker); } .opbouw__stip::after { content: ""; position: absolute; left: 7px; top: 50%; width: clamp(18px, 5vw, 62px); height: 1px; background: var(--inkt-donker); opacity: 0.55; } .opbouw__naam { margin-left: clamp(18px, 5vw, 62px); font-family: var(--font-body); font-size: clamp(0.68rem, 1.15vw, 0.95rem); color: var(--inkt-donker); line-height: 1.3; /* Vet en onderstreept, op verzoek van de eigenaar (24 aug 2026): de namen liggen op de foto en moeten er los van staan. De streep iets lager, anders raakt hij de staarten van de g en de j. */ font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .opbouw__noot { max-width: 62ch; margin: clamp(1rem, 2.5vw, 1.6rem) auto 0; text-align: center; font-size: 0.92rem; color: var(--tekst-creme); } /* Onder de 820 px past er naast de foto niets meer. Dan de lagen eronder, in dezelfde volgorde van boven naar beneden, met hetzelfde stipje ervoor. */ @media (max-width: 820px) { .opbouw { overflow: visible; border: 0; border-radius: 0; } .opbouw__beeld { border-radius: 6px; border: 1px solid var(--lijn-creme); } .opbouw__lagen { display: grid; gap: 0.5rem; margin-top: 1.1rem; counter-reset: laag; } .opbouw__laag { position: static; transform: none; left: auto; right: auto; padding: 0.5rem 0.8rem; border-left: 2px solid var(--gold-deep); background: rgba(255, 255, 255, 0.6); border-radius: 0 4px 4px 0; } .opbouw__stip::after { display: none; } .opbouw__naam { margin-left: 0; font-size: 0.9rem; } } /* ---------- Het overzicht bij een aanvraag ---------- */ .overzicht__blok + .overzicht__blok { margin-top: clamp(2rem, 4vw, 3rem); } .overzicht__blok .swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 1.2rem; } .overzicht__blok .swatch { background: var(--creme); border-color: var(--lijn-creme); } .overzicht__blok .swatch__meta { display: block; text-align: left; background: var(--creme); } .overzicht__blok .swatch__meta h3 { color: var(--inkt-donker); text-shadow: none; font-size: 1rem; } .overzicht__blok .swatch__meta span { display: block; margin-top: 0.15rem; color: var(--gold-deep); } .overzicht__rol { display: block; font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.4rem; text-align: left; } @media (max-width: 900px) { .overzicht__blok .swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 600px) { .overzicht__blok .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }