/* design-2026.css: 1-op-1 kopie van premiumpartytent.nl (actuele versie, gesynchroniseerd 9 okt 2026). Bovenaan het --pp-palet (staat bij PPT in main.css). */ :root{--pp-black:#191817;--pp-black-2:#222120;--pp-black-3:#2E2C2A;--pp-surface:rgba(66, 63, 57, .97);--pp-surface-2:rgba(46, 44, 40, .97);--pp-gold:#C49A54;--pp-gold-2:#E5C983;--pp-gold-deep:#9C7838;--pp-cream:#F8E8B0;--pp-white:#F6F3EA;--pp-muted:#CFC9C0;--pp-line:rgba(196, 154, 84, .26);--pp-line-soft:rgba(250, 245, 235, .10);--pp-ok:#58B368;--pp-error:#E4572E;--fs-12:.75rem;--fs-14:.875rem;--fs-16:1rem;--fs-18:clamp(1.0625rem, 1rem + .3vw, 1.125rem);--fs-22:clamp(1.175rem, 1.05rem + .6vw, 1.375rem);--fs-28:clamp(1.45rem, 1.2rem + 1.2vw, 1.75rem);--fs-40:clamp(1.85rem, 1.4rem + 2.2vw, 2.5rem);--fs-56:clamp(2.25rem, 1.6rem + 3.4vw, 3.5rem);--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-6:1.5rem;--space-8:2rem;--space-12:3rem;--space-16:4rem;--space-24:6rem;--radius:14px;--radius-sm:8px;--radius-pill:999px;--container:1200px;--shadow-card:0 10px 40px rgba(0, 0, 0, .45);--glow-gold:0 0 22px rgba(196, 154, 84, .38), 0 4px 14px rgba(0, 0, 0, .5);--ease:cubic-bezier(.22, .61, .36, 1)} @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/montserrat-var.woff2') format('woff2'); } /* ========================================================================== PREMIUM PARTYTENT — DESIGNSYSTEEM 2026 ========================================================================== Zo zit het ontwerp in elkaar. Lees dit voordat je iets wijzigt; de meeste aanpassingen hoeven maar op één plek te gebeuren. --------------------------------------------------------------------------- 1. KLEUR --------------------------------------------------------------------------- Basis blijft zwart/goud uit het logo (--pp-gold, --pp-gold-2, --pp-cream). Nieuw is --cx-paper: een warme crème voor "feiten"-secties. Ritme van de pagina: donker (sfeer) → crème (feiten) → donker. Puur wit gebruiken we nooit als vlak; dat leest als een gat in de pagina. --------------------------------------------------------------------------- 2. HET GOUDEN VLAK (.cx-blok + .cx-blok__vlak) --------------------------------------------------------------------------- Het handelsmerk van dit ontwerp: achter een beeld of kaart ligt een gouden vlak dat --cx-off naar rechtsonder uitsteekt (9px desktop, 7px mobiel). REGELS: - Het vlak zit ALTIJD om precies één beeld of één kaart. Nooit om een blok waar ook losse tekst in staat, anders loopt het goud achter je tekst door. - Het element met .cx-blok moet zelf een border-radius hebben: het vlak erft die met `border-radius: inherit`. Vergeet je dat, dan krijg je een rechthoek achter een afgeronde kaart. - Kinderen die zelf absoluut gepositioneerd zijn (stickers, vlaggetjes) krijgen `data-los`, anders duwt de stapelregel ze in de flow. - Voor losse elementen (badge, overzichtspaneel) mag het ook met box-shadow: 9px 9px 0 goud — zelfde effect, minder markup. --------------------------------------------------------------------------- 3. TYPOGRAFIE --------------------------------------------------------------------------- Montserrat voor alles, Caveat voor de handgeschreven accenten (.cx-hand). - Koppen (.cx-h2, .cx-paginakop) staan in gewone zinsvorm: alleen de eerste letter een hoofdletter. Kapitalen zijn voorbehouden aan de kleine labels (eyebrows, pills, kruimelpad, knoplabels), niet aan koppen. Eén accentwoord per kop staat in Josefin Sans (.cx-mark), niet in de pen van handgeschreven taglines, in goud. Meestal het laatste woord. Let op de line-height van .72: die houdt de regelhoogte gelijk aan de rest van de kop. Zonder dat duwt het grotere font tweeregelige koppen uit elkaar. - Elke sectie opent met dezelfde opbouw: handgeschreven regel → kop → optionele zin. Gebruik cx_kop() zodat dat ritme overal gelijk is. - De handgeschreven regel staat 1.6rem boven de kop: de rotatie eet een deel van die ruimte op, vandaar meer dan je zou verwachten. --------------------------------------------------------------------------- 4. KNOPPEN --------------------------------------------------------------------------- - .cx-btn--goud hoofdactie: gouden pill, harde zwarte schaduw, pijl naar rechtsboven (via ::after, volgt de tekstkleur). - .cx-btn--lijn tweede keus: zelfde vorm, gouden rand op een derde dekking, witte letters, geen schaduw. - .cx-btn--zwart voor lichte secties. - .cx-link derde niveau: geen knop maar een tekstlink in kapitalen met pijl naar rechts. Gebruik deze naast een hoofdknop. Regel: per blok één hoofdactie. Een knop die niets kan doen tonen we niet; dan komt er een zin die uitlegt wat er eerst moet gebeuren. --------------------------------------------------------------------------- 5. SECTIES EN RASTERS --------------------------------------------------------------------------- .cx-sec (donker) / .cx-sec--donker (paneel) / .cx-sec--licht (crème). .cx-wrap is de container (max --container, 1340px voor de pakketten). Rasters altijd met minmax(0,1fr) en min-width:0 op de kinderen: anders duwt lange inhoud de kolom breder dan het scherm. --------------------------------------------------------------------------- 6. MOBIEL --------------------------------------------------------------------------- Let op bij het omdraaien van de volgorde op mobiel: de stickers (.cx-st) staan absoluut en steken 24px boven hun blok uit, en het gouden vlak achter .cx-blok loopt --cx-off (9px) naar rechtsonder. Schuift zo'n blok onder een knop of kop, geef het dan margin-top mee, anders valt de sticker daar overheen. Zie de regel bij .cx-over > .cx-blok in het 899px-blok. --------------------------------------------------------------------------- De meeste bezoekers komen op hun telefoon. Vaste afspraken: - Productkaarten blijven twee naast elkaar, ook op 375px. - In de hero staat de tekst boven het beeld. - Knoppen over de volle breedte, terug-links eronder. - Nooit horizontale overloop: controleer met document.documentElement.scrollWidth - clientWidth === 0. --------------------------------------------------------------------------- 7. WAT NIET VAN ONS IS --------------------------------------------------------------------------- De funnel (.pp-bk-*), de checkout (WooCommerce) en de galerij (.pp-gallery) houden hun oorspronkelijke markup, omdat daar JavaScript aan hangt die rekent, valideert en verstuurt. Wij zetten daar alleen een nieuwe laag overheen. Let op: eigen display-waarden kunnen het hidden-attribuut overrulen dat die scripts gebruiken — vandaar .cx-funnel [hidden]. ========================================================================== */ /* Zelf gehost: Caveat staat sinds het accentwoord in de koppen zelf, en een externe font-request laat de kop dan zichtbaar omspringen. */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/caveat.woff2') format('woff2'); } /* Figtree, zelf gehost (variabel 300-900, latin-subset, 20 KB per snit). Alleen in gebruik op de previewpagina, zie het blok onderaan dit bestand. */ @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('../fonts/figtree-var.woff2') format('woff2'); } @font-face { font-family: 'Figtree'; font-style: italic; font-weight: 300 900; font-display: swap; src: url('../fonts/figtree-italic-var.woff2') format('woff2'); } /* Accentwoord in de koppen. Variabel font (100-700), latin-subset, 28 KB. */ @font-face { font-family: 'Josefin Sans'; font-style: normal; font-weight: 100 700; font-display: swap; src: url('../fonts/josefin-var.woff2') format('woff2'); } /* ========================================================================== Vormtaal "cx". Volledig los van de live stylesheet: alles begint met .cx- of staat binnen .cx-page, zodat de rest van de site niets merkt. ========================================================================== */ .cx-page { --cx-ink: #100F0E; --cx-ink-2: #1A1917; --cx-paper: #F2ECDF; /* warm crème, geen steriel wit */ --cx-paper-2: #E7DFCD; --cx-goud: var(--pp-gold); --cx-goud-2: var(--pp-gold-2); --cx-off: 9px; /* hoeveel het vlak achter een blok uitsteekt */ } /* ---- bouwsteen 1: het verschoven vlak ---------------------------------- */ .cx-blok { position: relative; } .cx-blok > .cx-blok__vlak { position: absolute; inset: 0; z-index: 0; border-radius: inherit; transform: translate(var(--cx-off), var(--cx-off)); background: linear-gradient(150deg, var(--cx-goud-2), var(--cx-goud) 55%, var(--pp-gold-deep)); } .cx-blok > *:not(.cx-blok__vlak):not([data-los]) { position: relative; z-index: 1; } /* ---- bouwsteen 2: handgeschreven tagline ------------------------------- */ .cx-hand { display: block; font-family: 'Caveat', 'Segoe Script', cursive; font-weight: 700; font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: 1; color: var(--cx-goud-2); transform: rotate(-2.5deg); margin-bottom: 1.6rem; } /* ---- bouwsteen 3: kop met gemarkeerd accentwoord ----------------------- */ .cx-h2 { font-size: clamp(1.85rem, 1.2rem + 2.6vw, 3rem); font-weight: 800; letter-spacing: -.015em; line-height: 1.05; margin: 0; overflow-wrap: break-word; } /* Het accentwoord: een gouden baan over de onderste helft, de tekst houdt de kleur van de kop. Bewust geen doos meer: de site heeft al veel goud in vlakvorm (het offset-vlak achter elk blok, de knoppen, de spec-tegels), en een blok mét padding duwde bij tweeregelige koppen tegen de regel erboven. Deze baan heeft geen padding in de hoogte, dus de regelafstand blijft heel. */ /* Het accentwoord in Josefin Sans: een geometrisch art deco-font dat de gouden lijnen op de site volgt. Gewicht 600, want lichter valt het naast Montserrat 800 weg. De contour van .012em vult de streek nog iets aan. Josefin heeft een lage x-hoogte, dus 1.06em om optisch gelijk te lopen. */ .cx-mark { font-family: 'Josefin Sans', 'Century Gothic', sans-serif; font-weight: 600; font-size: 1.06em; line-height: .95; letter-spacing: .02em; color: var(--cx-goud-2); padding: 0 .04em; -webkit-text-stroke: .012em var(--cx-goud-2); paint-order: stroke fill; } .cx-kop { max-width: 720px; margin-bottom: clamp(2rem, 4vw, 3rem); } .cx-kop--mid { margin-inline: auto; text-align: center; } .cx-kop--mid .cx-hand { transform: rotate(-2.5deg) translateX(0); } .cx-h2 + p, .cx-h2 + .cx-kop__tekst, .cx-kop__tekst { margin-top: 1.4rem; } .cx-kop__tekst { margin-bottom: 0; color: var(--pp-muted); font-size: var(--fs-16); max-width: 58ch; } .cx-kop--mid .cx-kop__tekst { margin-inline: auto; } /* ---- bouwsteen 4: knoppen met harde schaduw ---------------------------- */ .cx-btn { display: inline-flex; align-items: center; gap: .55rem; padding: .9rem 1.7rem; border-radius: 999px; font-weight: 800; font-size: var(--fs-15, .95rem); letter-spacing: .01em; border: 2px solid #14130F; text-decoration: none; cursor: pointer; transition: transform .12s var(--ease), box-shadow .12s var(--ease); } .cx-btn--goud { background: linear-gradient(140deg, var(--cx-goud-2), var(--cx-goud)); color: #14130F; box-shadow: 5px 5px 0 #14130F; } /* pijl naar rechtsboven, als masker zodat hij altijd de tekstkleur volgt */ .cx-btn--goud::after, .cx-btn--zwart::after, .cx-btn--lijn::after { content: ''; flex: none; width: .78em; height: .78em; background: currentColor; transition: transform .12s var(--ease); -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='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%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='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E") center/contain no-repeat; } .cx-btn--goud:hover::after, .cx-btn--zwart:hover::after, .cx-btn--lijn:hover::after { transform: translate(1px,-1px); } .cx-btn--goud:hover { transform: translate(3px,3px); box-shadow: 2px 2px 0 #14130F; color: #14130F; } .cx-btn--lijn { background: transparent; color: rgba(246,243,234,.85); border-color: rgba(196,154,84,.34); box-shadow: none; } .cx-btn--lijn:hover { background: rgba(196,154,84,.1); border-color: rgba(196,154,84,.7); color: var(--cx-goud-2); } .cx-btn--zwart { background: #14130F; color: var(--cx-goud-2); box-shadow: 5px 5px 0 var(--cx-goud); } .cx-btn--zwart:hover { transform: translate(3px,3px); box-shadow: 2px 2px 0 var(--cx-goud); color: var(--cx-goud-2); } .cx-cta-rij { display: flex; gap: 1.4rem 1rem; flex-wrap: wrap; align-items: center; } /* tweede actie: geen knop maar een tekstlink onder de hoofdknop */ .cx-acties { display: flex; align-items: center; gap: .8rem 1.6rem; flex-wrap: wrap; } .cx-link { display: inline-flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: rgba(246,243,234,.78); text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid transparent; transition: color .15s, border-color .15s; } .cx-link::after { content: ''; flex: none; width: .95em; height: .95em; background: currentColor; transition: transform .14s var(--ease); -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='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='M13 6l6 6-6 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='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; } .cx-link:hover { color: var(--cx-goud-2); border-bottom-color: rgba(196,154,84,.5); } .cx-link:hover::after { transform: translateX(3px); } .cx-sec--licht .cx-link { color: #46413A; } .cx-sec--licht .cx-link:hover { color: #14130F; border-bottom-color: var(--cx-goud); } /* ---- secties ----------------------------------------------------------- */ .cx-sec { padding-block: clamp(3.5rem, 7vw, 6rem); position: relative; } .cx-sec--licht { background: var(--cx-paper); color: #14130F; } .cx-sec--licht .cx-kop__tekst { color: #5A544A; } .cx-sec--licht .cx-hand { color: var(--pp-gold-deep); } .cx-sec--licht .cx-mark { color: var(--pp-gold-deep); -webkit-text-stroke-color: var(--pp-gold-deep); } .cx-sec--donker { background: linear-gradient(180deg, rgba(26,25,23,.94), rgba(20,19,17,.94)); } .cx-wrap { max-width: var(--container); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); } /* ========================================================================== 2. hero ========================================================================== */ .cx-hero { padding-block: clamp(1.8rem, 4vw, 3.4rem); } .cx-hero__grid { display: grid; grid-template-columns: minmax(0,1.04fr) minmax(0,.96fr); gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center; } .cx-hero__label { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .cx-pill { display: inline-flex; align-items: center; gap: .5rem; color: rgba(246,243,234,.86); font-size: .68rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; padding: .36rem .95rem; border-radius: 999px; border: 1px solid rgba(246,243,234,.45); } .cx-hero__label .cx-hand { margin: 0; font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: rgba(229,201,131,.85); transform: rotate(-3deg); } /* de zoekterm zit nu in de pill: die is meteen de H1 */ h1.cx-pill { margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .15em; line-height: 1.3; } /* Het pilletje in de hero is geen

meer (die zit nu op de grote kop), dus dezelfde maatvoering ook op de

-variant. */ .cx-hero__label .cx-pill { margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .15em; line-height: 1.3; } /* h1 erft anders de browsermarge; de rest van de opmaak staat al op .cx-hero__display. */ h1.cx-hero__display { margin: 0; } .cx-hero__display { margin: 0; font-size: clamp(2.45rem, 1.4rem + 3.4vw, 3.3rem); font-weight: 800; line-height: 1.14; letter-spacing: -.02em; max-width: 17ch; } .cx-hero__sub { color: var(--pp-muted); margin: 1.4rem 0 2rem; max-width: 48ch; font-size: var(--fs-15,.95rem); } .cx-hero__trust { list-style: none; margin: 2rem 0 0; padding: 1.4rem 0 0; display: flex; align-items: center; gap: .7rem 1.6rem; flex-wrap: wrap; border-top: 1px solid var(--pp-line-soft); font-size: .76rem; color: var(--pp-muted); } .cx-hero__trust li { display: flex; align-items: center; gap: .45rem; } .cx-hero__trust li > span:first-child { display: grid; place-content: center; width: 22px; height: 22px; border-radius: 7px; background: rgba(196,154,84,.16); color: var(--cx-goud-2); flex: none; } .cx-hero__trust svg { width: 13px; height: 13px; } .cx-hero__trust b { color: rgba(246,243,234,.92); font-weight: 700; } /* =========================================================================== Hero van de homepage, versie 6 okt 2026. Google-badge boven de slogan, slogan groot in hoofdletters met het accentwoord goud cursief, en daaronder de H1 met het zoekwoord en de prijs. ======================================================================== */ .cx-hero__badge { display: inline-flex; align-items: center; gap: .55rem; background: #fff; color: #14130F; border-radius: 12px; padding: .55rem .85rem; font-weight: 700; font-size: .84rem; text-decoration: none; margin: 0 0 1.2rem; box-shadow: 0 6px 20px rgba(0,0,0,.25); } .cx-hero__badge b { font-weight: 800; } .cx-hero__badge:hover { transform: translateY(-1px); } .cx-hero__badge-sterren { color: #F5B50A; letter-spacing: .04em; } .cx-hero__badge-streep { opacity: .3; } .cx-hero__badge-g { font-weight: 800; letter-spacing: -.01em; } .cx-hero__badge-g span:nth-child(1){color:#4285F4}.cx-hero__badge-g span:nth-child(2){color:#DB4437} .cx-hero__badge-g span:nth-child(3){color:#F4B400}.cx-hero__badge-g span:nth-child(4){color:#4285F4} .cx-hero__badge-g span:nth-child(5){color:#0F9D58}.cx-hero__badge-g span:nth-child(6){color:#DB4437} .cx-hero__slogan { margin: 0; font-weight: 900; text-transform: uppercase; line-height: .92; letter-spacing: -.02em; color: #F7F2E8; font-size: clamp(2.4rem, 10vw, 5rem); text-wrap: balance; } @media (min-width: 900px) { .cx-hero__slogan { font-size: clamp(3rem, 4.6vw, 4.4rem); max-width: 11ch; } } .cx-hero__slogan em { font-style: italic; color: var(--cx-goud); } .cx-hero__h1 { margin: 1.05rem 0 0; font-weight: 800; line-height: 1.35; color: #F0E4CC; font-size: clamp(1rem, 3.4vw, 1.2rem); } /* De knoppen volgen direct op de H1, dus daar hoort meer lucht tussen dan de 32px die bedoeld was voor als er nog een alinea tussen stond. */ .cx-hero__h1 + .cx-acties { margin-top: 2.6rem; } /* Het beeld is vierkant, op telefoon en desktop hetzelfde. De homepage heeft een video, de stadspagina's een foto, vandaar de aparte modifier. */ .cx-hero .cx-beeld__kader video { aspect-ratio: 1 / 1; } /* height:auto is nodig: de pagina-eigen hero's (.cx-b2bhero, .cx-nchero, .cx-tfhero, .cx-fohero, .cx-brhero) zetten height:100% op dit beeld, en dan zou de aspect-ratio niets doen. */ .cx-hero--vk .cx-beeld__kader img { aspect-ratio: 1 / 1; height: auto; object-fit: cover; } /* Op een stadspagina blijft de H1 de grote kop, dus daar hoort de badge wat dichter op de labelregel te staan dan op de homepage. */ .cx-hero--vk .cx-hero__badge { margin-bottom: .9rem; } .cx-beeld { position: relative; } .cx-beeld__kader { position: relative; z-index: 1; border-radius: 30px; overflow: hidden; border: 3px solid rgba(20,19,17,.9); box-shadow: 0 24px 60px rgba(0,0,0,.55); } .cx-beeld__kader video, .cx-beeld__kader img { display: block; width: 100%; aspect-ratio: 9/10; object-fit: cover; } .cx-beeld .cx-blok__vlak { border-radius: 34px; } .cx-st { position: absolute; z-index: 3; font-weight: 800; line-height: 1.15; text-align: center; box-shadow: 0 10px 26px rgba(0,0,0,.45); text-decoration: none; } .cx-st--wit { background: #fff; color: #14130F; } /* Compacter dan het oorspronkelijke blok: het wit eiste te veel aandacht op naast het beeld, terwijl de reviews juist ondersteunend horen te zijn. De onderdelen zijn hier gescoped op --reviews, want cx-st__groot en __klein worden ook gebruikt door de badges op de andere hero's. */ .cx-st--reviews { border-radius: 13px; padding: .7rem .85rem .75rem; min-width: 104px; display: block; border: 1px solid rgba(20,19,17,.5); box-shadow: 4px 4px 0 var(--cx-goud), 8px 10px 18px rgba(0,0,0,.45); } .cx-st--reviews .cx-st__groot { font-size: 1.15rem; } .cx-st--reviews .cx-st__klein { font-size: .54rem; letter-spacing: .08em; } .cx-st--reviews .cx-st__g { font-size: .62rem; } .cx-st--reviews .cx-st__sterren { font-size: .62rem; margin: .2rem 0 .1rem; } .cx-st__groot { display: block; font-size: var(--fs-18); line-height: 1.05; white-space: nowrap; } .cx-st__klein { display: block; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; opacity: .85; margin-top: .2rem; } .cx-st__g { display: block; font: 800 .72rem/1 'Montserrat', system-ui, sans-serif; } .cx-st__g span:nth-child(1){color:#4285f4} .cx-st__g span:nth-child(2){color:#ea4335} .cx-st__g span:nth-child(3){color:#fbbc05} .cx-st__g span:nth-child(4){color:#4285f4} .cx-st__g span:nth-child(5){color:#34a853} .cx-st__g span:nth-child(6){color:#ea4335} .cx-st__sterren { display: block; color: #f5a623; font-size: .72rem; letter-spacing: .1em; margin: .3rem 0 .15rem; } .cx-st--wit .cx-st__klein { opacity: .6; } .cx-st--lb { top: -14px; left: -14px; transform: rotate(-5deg) skewY(-1deg); } .cx-st--wit:hover { transform: rotate(-5deg) skewY(-1deg) scale(1.03); } /* ========================================================================== 3. logobalk ========================================================================== */ .cx-logos { padding-block: 3.2rem; border-block: 1px solid var(--pp-line-soft); } .cx-logos__label { text-align: center; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--pp-muted); margin: 0 0 1.2rem; } .cx-logos__rij { display: flex; align-items: center; justify-content: center; gap: clamp(1.8rem, 5vw, 4rem); flex-wrap: wrap; } .cx-logos__rij img { height: clamp(48px, 5.5vw, 76px); width: auto; opacity: .95; transition: opacity .2s, transform .2s; } .cx-logos__rij img:hover { opacity: 1; transform: scale(1.05); } /* ========================================================================== 4. de korte versie (licht) ========================================================================== */ .cx-kort { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: clamp(2rem,5vw,4rem); align-items: center; } .cx-kort__badge { display: inline-block; background: #14130F; color: var(--cx-goud-2); font-size: .64rem; font-weight: 800; letter-spacing: .22em; padding: .3rem .7rem; border-radius: 4px; margin-bottom: .9rem; } h2.cx-kort__lead { font-size: clamp(1.15rem, .9rem + 1vw, 1.55rem); font-weight: 800; line-height: 1.3; color: #14130F; margin: 0 0 1.1rem; letter-spacing: -.01em; } .cx-kort__lead em { font-style: normal; font-family: 'Josefin Sans', 'Century Gothic', sans-serif; font-weight: 600; font-size: 1.06em; line-height: .95; letter-spacing: .02em; padding: 0 .04em; color: var(--pp-gold-deep); -webkit-text-stroke: .012em var(--pp-gold-deep); paint-order: stroke fill; } .cx-kort__tekst { color: #5A544A; font-size: var(--fs-15, .95rem); margin: 0; max-width: 52ch; } .cx-specs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-rows: 1fr; gap: 1.1rem; } .cx-spec { position: relative; padding: 1.15rem 1.2rem 1.3rem; border: 2px solid #14130F; border-radius: 6px; box-shadow: 7px 7px 0 #14130F; min-width: 0; } .cx-spec:nth-child(1) { background: #fff; transform: rotate(-1.2deg); } .cx-spec:nth-child(2) { background: linear-gradient(140deg, var(--cx-goud-2), var(--cx-goud)); transform: rotate(1deg); } .cx-spec:nth-child(3) { background: #14130F; box-shadow: 7px 7px 0 var(--cx-goud); transform: rotate(.8deg); } .cx-spec:nth-child(4) { background: #fff; transform: rotate(-.6deg); } .cx-spec__label { display: block; font-family: 'Caveat','Segoe Script',cursive; font-size: 1.1rem; font-weight: 700; line-height: 1; margin-bottom: .45rem; color: var(--pp-gold-deep); } .cx-spec:nth-child(2) .cx-spec__label { color: #6B4E18; } .cx-spec:nth-child(3) .cx-spec__label { color: var(--cx-goud-2); } .cx-spec__waarde { display: block; font-size: clamp(1.35rem, 1rem + 1.4vw, 1.9rem); font-weight: 800; line-height: 1; color: #14130F; letter-spacing: -.02em; } .cx-spec:nth-child(3) .cx-spec__waarde { color: #fff; } .cx-spec__waarde small { font-size: .58em; font-weight: 800; letter-spacing: .02em; } .cx-spec__oud { font-size: .8rem; color: #8A8378; text-decoration: line-through; font-weight: 700; margin-left: .35rem; } .cx-spec__extra { display: block; margin-top: .3rem; font-size: .7rem; font-weight: 600; color: #6B6459; } .cx-spec:nth-child(3) .cx-spec__extra { color: rgba(246,243,234,.6); } .cx-spec__vlag { position: absolute; top: -12px; right: -10px; background: #14130F; color: var(--cx-goud-2); font-size: .58rem; font-weight: 800; letter-spacing: .1em; padding: .28rem .6rem; border-radius: 999px; border: 2px solid var(--cx-goud); } /* ========================================================================== 5. formaten ========================================================================== */ .cx-form { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(1.6rem,4vw,3rem); align-items: center; } /* display:block omdat dit ook een kan zijn (klikbare sfeerfoto); inline zou de hoogte en de afgeronde hoeken laten verspringen. */ .cx-form__foto { display: block; border-radius: 20px; overflow: hidden; border: 3px solid rgba(20,19,17,.9); } .cx-form__foto img { width: 100%; aspect-ratio: 3/4; object-fit: cover; } .cx-form .cx-blok__vlak { border-radius: 24px; } .cx-maten { display: grid; gap: .55rem; } .cx-maat { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 1rem; padding: .95rem 1.15rem; border: 1px solid var(--pp-line); border-radius: 12px; text-decoration: none; background: rgba(46,44,40,.55); transition: border-color .15s, transform .15s, background .15s; } .cx-maat:hover { border-color: var(--cx-goud); background: rgba(196,154,84,.1); transform: translateX(4px); } /* De maatnaam is op de homepage een h3 en elders een span. Deze regels maken dat visueel niet uit te maken: geen marge, geen eigen lettergrootte. */ .cx-maat__tekst { min-width: 0; } .cx-maat__naam { font-weight: 800; color: var(--pp-white); font-size: var(--fs-16); margin: 0; line-height: 1.25; letter-spacing: 0; } h3.cx-maat__naam { font-family: inherit; } .cx-maat__meta { display: block; font-weight: 400; font-size: .74rem; color: var(--pp-muted); margin-top: .12rem; } .cx-maat__pers { font-size: .74rem; font-weight: 700; color: var(--cx-goud-2); white-space: nowrap; } .cx-props { display: flex; gap: .55rem; flex-wrap: wrap; margin-top: 1.4rem; } .cx-props span { display: inline-flex; align-items: center; gap: .42rem; } .cx-props span svg { width: 15px; height: 15px; flex: none; color: var(--cx-goud); } .cx-props span { font-size: .7rem; font-weight: 700; letter-spacing: .04em; padding: .32rem .8rem; border-radius: 999px; border: 1px solid var(--pp-line); color: var(--pp-muted); } /* ========================================================================== 6. pakketten ========================================================================== */ .cx-pak-wrap { max-width: 1340px; } .cx-pak { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 2rem; align-items: stretch; } .cx-pakkaart { display: flex; } .cx-pakkaart { border-radius: 16px; width: 100%; } .cx-pakkaart .cx-blok__vlak { border-radius: 18px; background: linear-gradient(150deg, rgba(196,154,84,.5), rgba(156,120,56,.35)); } .cx-pakkaart--top .cx-blok__vlak { background: linear-gradient(150deg, var(--cx-goud-2), var(--cx-goud) 55%, var(--pp-gold-deep)); } .cx-pakkaart__in { background: var(--pp-surface-2); border: 2px solid rgba(20,19,17,.9); border-radius: 16px; padding: 2rem 1.9rem 2.1rem; display: flex; flex-direction: column; height: 100%; min-width: 0; flex: 1 1 auto; width: 100%; } .cx-pakkaart--top .cx-pakkaart__in { border-color: var(--cx-goud); background-color: var(--pp-surface-2); background-image: linear-gradient(168deg, rgba(196,154,84,.09), rgba(196,154,84,0) 42%); box-shadow: 0 0 22px rgba(196,154,84,.08); } .cx-pakkaart__vlag { position: absolute; top: -13px; left: 1.3rem; z-index: 2; background: linear-gradient(140deg, var(--cx-goud-2), var(--cx-goud)); color: #14130F; font-size: .6rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: .3rem .8rem; border-radius: 999px; border: 2px solid #14130F; transform: rotate(-2deg); } .cx-pakkaart__tier { font-family: 'Caveat','Segoe Script',cursive; font-size: 1.35rem; font-weight: 700; color: var(--cx-goud-2); line-height: 1; } .cx-pakkaart__naam { font-size: var(--fs-28); font-weight: 800; margin: .35rem 0 .6rem; letter-spacing: -.015em; } .cx-pakkaart__desc { font-size: .92rem; line-height: 1.55; color: var(--pp-muted); margin: 0 0 1.3rem; flex: 1 0 auto; } .cx-pakkaart__prijs { display: flex; align-items: baseline; gap: .5rem; margin-bottom: 1.1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--pp-line-soft); } .cx-pakkaart__prijs b { font-size: clamp(2rem,1.5rem+1.6vw,2.6rem); font-weight: 800; letter-spacing: -.02em; line-height: 1; } .cx-pakkaart__prijs s { color: var(--pp-muted); font-size: 1rem; opacity: .7; } .cx-pakkaart__prijs em { font-style: normal; font-size: .78rem; color: var(--pp-muted); margin-left: auto; } .cx-feats { list-style: none; margin: 0 0 1.7rem; padding: 0; display: grid; gap: .62rem; flex: 0 0 auto; align-content: start; } .cx-feats li { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: .7rem; align-items: start; font-size: .94rem; line-height: 1.45; color: var(--pp-white); } .cx-feats li[data-uit] { color: rgba(207,201,192,.7); text-decoration: line-through; text-decoration-color: rgba(207,201,192,.55); } .cx-feats i { font-style: normal; font-weight: 800; font-size: 1rem; color: var(--cx-goud-2); display: grid; place-content: center; width: 22px; height: 1.5em; line-height: 1; } .cx-feats li[data-uit] i { color: rgba(207,201,192,.55); text-decoration: none; } .cx-pakkaart__in .cx-btn { justify-content: center; padding: .95rem 1.4rem; font-size: 1rem; } .cx-pak__voet { text-align: center; margin-top: 2.4rem; font-size: .82rem; color: var(--pp-muted); } /* ========================================================================== 7. usp's ========================================================================== */ .cx-usps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.2rem; } .cx-usp { border: 1px solid var(--pp-line); border-radius: 14px; padding: 1.4rem 1.3rem; min-width: 0; background: rgba(46,44,40,.55); transition: transform .18s var(--ease), border-color .18s; } .cx-usp:hover { transform: translateY(-4px); border-color: var(--cx-goud); } .cx-usp__icoon { display: grid; place-content: center; width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(140deg, var(--cx-goud-2), var(--cx-goud)); color: #14130F; margin-bottom: .9rem; } .cx-usp__icoon svg { width: 21px; height: 21px; } .cx-usp h3 { font-size: var(--fs-16); font-weight: 800; margin: 0 0 .35rem; } .cx-usp p { font-size: .82rem; color: var(--pp-muted); margin: 0; } /* ========================================================================== 8. stappen (licht) ========================================================================== */ .cx-stappen { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); grid-auto-rows: 1fr; gap: 1.3rem; align-items: stretch; padding-bottom: 1.6rem; } .cx-stap { position: relative; background: #fff; border: 2px solid #14130F; border-radius: 18px; padding: 1.4rem 1.35rem 1.5rem; box-shadow: 8px 8px 0 #14130F; min-width: 0; transition: transform .16s var(--ease), box-shadow .16s var(--ease); } .cx-stap:nth-child(even) { top: 1.6rem; } .cx-stap:hover { transform: translate(4px,4px); box-shadow: 4px 4px 0 #14130F; } .cx-sec--donker .cx-stap, .cx-page > .cx-sec:not(.cx-sec--licht) .cx-stap { box-shadow: 7px 7px 0 var(--cx-goud); } .cx-sec--donker .cx-stap:hover, .cx-page > .cx-sec:not(.cx-sec--licht) .cx-stap:hover { box-shadow: 4px 4px 0 var(--cx-goud); } .cx-sec--donker .cx-stappen__voet span { color: #CFC9C0; } .cx-stap__nr { display: block; font-size: 2.4rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: rgba(196,154,84,.5); margin-bottom: .6rem; } .cx-stap__punt { position: absolute; top: 1.5rem; right: 1.35rem; width: 11px; height: 11px; border-radius: 50%; background: linear-gradient(140deg, var(--cx-goud-2), var(--cx-goud)); border: 1px solid #14130F; } .cx-stap h3 { font-size: var(--fs-16); font-weight: 800; color: #14130F; margin: 0 0 .35rem; } .cx-stap p { font-size: .82rem; color: #5A544A; margin: 0; } .cx-stappen__voet { display: flex; align-items: center; justify-content: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 2.6rem; } .cx-stappen__voet span { font-size: .78rem; color: #5A544A; font-weight: 600; } /* ========================================================================== 9. reviews ========================================================================== */ .cx-reviews__in { margin-top: 1rem; } /* ========================================================================== 10. evenementen ========================================================================== */ .cx-even { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.85fr); gap: clamp(1.6rem,4vw,3rem); align-items: center; } .cx-even__lijst { list-style: none; margin: 0 0 1.8rem; padding: 0; display: grid; gap: .6rem; } .cx-even__lijst li { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: .8rem; align-items: center; padding: .7rem .9rem; border-radius: 12px; border: 1px solid var(--pp-line-soft); background: rgba(46,44,40,.45); font-size: .88rem; font-weight: 600; } .cx-even__ico { display: grid; place-content: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(196,154,84,.16); color: var(--cx-goud-2); } .cx-even__ico svg { width: 17px; height: 17px; } .cx-even__beeld { border-radius: 20px; overflow: hidden; border: 3px solid rgba(20,19,17,.9); } .cx-even__beeld img, .cx-even__beeld video { width: 100%; aspect-ratio: 3/4; object-fit: cover; } .cx-even .cx-blok__vlak { border-radius: 24px; } /* ========================================================================== 11. accessoires ========================================================================== */ .cx-acc { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.2rem; } /* Zelfde opbouw als op de live site: groot productvlak, naam en prijs gecentreerd, knop onderin. Alleen de kleuren volgen de nieuwe vormtaal. */ .cx-acckaart { display: flex; flex-direction: column; border: 2px solid rgba(20,19,17,.9); border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, rgba(58,55,50,.75), rgba(38,36,33,.9)); text-decoration: none; min-width: 0; text-align: center; transition: transform .18s var(--ease), border-color .18s, box-shadow .18s var(--ease); } .cx-acckaart:hover { transform: translateY(-5px); border-color: var(--cx-goud); box-shadow: 0 14px 34px rgba(0,0,0,.5); } .cx-acckaart__foto { aspect-ratio: 1; flex: none; display: flex; align-items: center; justify-content: center; padding: 1.2rem; overflow: hidden; background: radial-gradient(60% 55% at 50% 45%, rgba(196,154,84,.18), transparent 70%); } .cx-acckaart__foto img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .cx-acckaart__in { padding: 1.1rem 1rem 1.2rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; border-top: 1px solid var(--pp-line-soft); } /* twee regels ruimte voor de naam, zodat prijs en knop overal gelijk liggen */ .cx-acckaart__naam { font-size: .92rem; font-weight: 800; color: var(--pp-white); line-height: 1.3; min-height: 2.6em; display: flex; align-items: center; justify-content: center; } .cx-acckaart__prijs { font-size: .95rem; font-weight: 800; color: var(--cx-goud-2); } .cx-acckaart__prijs small { font-size: .78rem; font-weight: 400; color: var(--pp-muted); margin-left: .2rem; } .cx-acckaart__knop { margin-top: auto; padding: .62rem 1rem; border: 1px solid var(--pp-line); border-radius: 999px; font-size: .84rem; font-weight: 700; color: var(--pp-white); transition: background .18s, border-color .18s; } .cx-acckaart:hover .cx-acckaart__knop { background: linear-gradient(140deg, var(--cx-goud-2), var(--cx-goud)); border-color: var(--cx-goud); color: #14130F; } /* ========================================================================== 12. galerij ========================================================================== */ /* de galerij gebruikt de coverflow van de live site (.pp-gallery) */ /* ========================================================================== 13. over ons ========================================================================== */ .cx-over { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(1.6rem,4vw,3.2rem); align-items: center; } .cx-over__foto { border-radius: 20px; overflow: hidden; border: 3px solid rgba(20,19,17,.9); } .cx-over__foto img { width: 100%; aspect-ratio: 3/4; object-fit: cover; } .cx-over .cx-blok__vlak { border-radius: 24px; } .cx-over__tekst { color: var(--pp-muted); font-size: var(--fs-15,.95rem); } .cx-over__tekst strong { color: var(--pp-white); } .cx-over__wie { display: flex; align-items: center; gap: .6rem; margin: 1.2rem 0 1.6rem; font-size: .8rem; } .cx-over__wie b { color: var(--pp-white); } .cx-over__wie span { color: var(--pp-muted); } .cx-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .9rem; margin-top: 1.8rem; } .cx-stat { border-top: 2px solid var(--cx-goud); padding-top: .7rem; min-width: 0; } .cx-stat b { display: block; font-size: clamp(1.2rem,1rem+.8vw,1.6rem); font-weight: 800; line-height: 1; } .cx-stat span { display: block; font-size: .68rem; color: var(--pp-muted); margin-top: .3rem; } /* ========================================================================== 14. faq (licht) ========================================================================== */ .cx-faq { display: grid; grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr); gap: clamp(1.8rem,4vw,3.2rem); align-items: start; } .cx-faq__lijst { border: 2px solid #14130F; border-radius: 18px; overflow: hidden; box-shadow: 9px 9px 0 #14130F; background: #fff; } .cx-faq details { border-bottom: 2px solid #14130F; } .cx-faq details:last-child { border-bottom: 0; } .cx-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.3rem; cursor: pointer; list-style: none; font-weight: 800; font-size: .95rem; color: #14130F; } .cx-faq summary::-webkit-details-marker { display: none; } .cx-faq summary::after { content: '+'; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #14130F; display: grid; place-content: center; font-size: 1.05rem; font-weight: 700; line-height: 1; transition: background .15s, color .15s; } .cx-faq details[open] summary::after { content: '×'; background: linear-gradient(140deg, var(--cx-goud-2), var(--cx-goud)); } .cx-faq details[open] summary { padding-bottom: .3rem; } .cx-faq__a { padding: 0 1.3rem 1.15rem; font-size: .88rem; color: #5A544A; } .cx-faq__a a { color: var(--pp-gold-deep); text-decoration: underline; } .cx-faq__zij .cx-hand { color: var(--pp-gold-deep); } .cx-faq__zij .cx-h2 { color: #14130F; } .cx-faq__zij p { color: #5A544A; font-size: .92rem; margin-bottom: 1.6rem; } .cx-faq__wa { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; font-size: .85rem; color: #14130F; text-decoration: none; border-bottom: 2px solid var(--cx-goud); padding-bottom: 2px; } .cx-faq__wa:hover { color: var(--pp-gold-deep); } .cx-faq__tel { display: block; margin-top: 1rem; font-size: .8rem; color: #5A544A; } .cx-faq__tel a { color: #14130F; font-weight: 800; } /* ========================================================================== 15. slot-cta ========================================================================== */ .cx-slot { text-align: center; } .cx-slot h2 { font-size: clamp(2rem,1.3rem+3vw,3.4rem); font-weight: 800; letter-spacing: -.015em; line-height: 1.08; margin: 0 auto; max-width: 21ch; } .cx-slot p { color: var(--pp-muted); margin: 1.4rem auto 2rem; max-width: 44ch; } .cx-acties--mid { justify-content: center; } /* ========================================================================== mobiel ========================================================================== */ @media (max-width: 1023px) { .cx-usps, .cx-acc, .cx-stappen { grid-template-columns: repeat(2, minmax(0,1fr)); } .cx-pak { grid-template-columns: minmax(0,1fr); gap: 2rem; } .cx-stap:nth-child(even) { top: 0; } .cx-stappen { padding-bottom: 0; } } @media (max-width: 899px) { .cx-page { --cx-off: 7px; } .cx-hero__grid, .cx-kort, .cx-form, .cx-even, .cx-over, .cx-faq { grid-template-columns: minmax(0,1fr); } /* Mobiel: eerst lezen, dan kijken. Op over-ons staat het beeld als eerste in de opmaak, wat op één kolom betekent dat je door een foto heen moet scrollen voordat je weet waar de sectie over gaat. Staat de tekst al eerst, dan verandert deze regel niets. */ .cx-over > .cx-blok, .cx-even > .cx-blok, .cx-stad > .cx-stad__fotos { order: 2; } .cx-over > .cx-blok, .cx-even > .cx-blok, .cx-stad > .cx-stad__fotos { margin-top: 2.4rem; } .cx-hero__grid > *, .cx-kort > *, .cx-form > *, .cx-even > *, .cx-over > *, .cx-faq > * { min-width: 0; } .cx-beeld { margin-top: 2rem; } .cx-hero__display { max-width: none; line-height: 1.1; } .cx-beeld__kader video, .cx-beeld__kader img { aspect-ratio: 1/1; } .cx-st--lb { left: -10px; } .cx-st--rm { right: -10px; } .cx-st--lo { left: -8px; } .cx-st--reviews { min-width: 96px; padding: .6rem .75rem .65rem; box-shadow: 3px 4px 0 var(--cx-goud), 6px 9px 16px rgba(0,0,0,.45); } .cx-form__wrap { order: 2; margin-top: 1.6rem; } .cx-even__beeld { order: -1; } .cx-stats { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 767px) { /* logo's in een net raster van drie in plaats van een rafelige rij */ .cx-logos__rij { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .7rem .35rem; place-items: center; } .cx-logos__rij img { height: clamp(48px, 15vw, 60px); max-width: 100%; } } @media (max-width: 599px) { .cx-usps, .cx-stappen, .cx-specs { grid-template-columns: minmax(0,1fr); } .cx-acc { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .8rem; } .cx-acckaart__foto { padding: .7rem; } .cx-acckaart__in { padding: .8rem .7rem .9rem; gap: .4rem; } .cx-acckaart__naam { font-size: .8rem; min-height: 3.2em; } .cx-acckaart__prijs { font-size: .86rem; } .cx-acckaart__prijs small { display: block; margin: .1rem 0 0; } .cx-acckaart__knop { padding: .5rem .6rem; font-size: .76rem; } .cx-spec { transform: none !important; } .cx-faq__lijst { box-shadow: 6px 6px 0 #14130F; } } @media (prefers-reduced-motion: reduce) { .cx-btn, .cx-stap, .cx-usp, .cx-acckaart { transition: none; } } /* ========================================================================== Header (header-club.php) ========================================================================== */ /* ---- gedeelde tokens: ook de page en de footer lezen hieruit ---- */ :root { --cx-ink: #100F0E; --cx-paper: #F2ECDF; --cx-goud: var(--pp-gold); --cx-goud-2: var(--pp-gold-2); --cx-off: 9px; } /* ================= topbalk ================= */ .cxh-top { background: #0B0A09; border-bottom: 1px solid rgba(196,154,84,.22); } .cxh-top__in { max-width: var(--container); margin-inline: auto; padding: .5rem clamp(1rem,4vw,2rem); display: flex; align-items: center; justify-content: center; gap: .6rem; text-align: center; } /* De actiebalk mag gezien worden: iets groter dan een voetnoot, en het bedrag in goud zodat het oog daar landt in plaats van op "zomeractie". De regels liggen gestapeld in één grid-cel: zo houdt de balk de hoogte van de langste regel aan en springt hij niet tijdens het wisselen. */ .cxh-top__slider { display: grid; } .cxh-top__slider > * { grid-area: 1 / 1; } .cxh-top p { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(246,243,234,.92); opacity: 0; transition: opacity .45s var(--ease); pointer-events: none; } .cxh-top p.is-actief { opacity: 1; pointer-events: auto; } /* Eén regel: geen animatie nodig, gewoon tonen. */ .cxh-top__slider:not([data-topslider]) p { opacity: 1; } /* Wie beweging liever vermijdt ziet alleen de eerste regel; het script start dan niet. Deze regel moet ná de definitie hierboven staan, anders verliest hij het in de cascade. */ @media (prefers-reduced-motion: reduce) { .cxh-top p { transition: none; } } .cxh-top__bedrag { color: var(--cx-goud-2); font-weight: 900; font-size: 1.18em; letter-spacing: .01em; } @media (max-width: 599px) { .cxh-top p { font-size: .72rem; letter-spacing: .05em; } .cxh-top__bedrag { font-size: 1.2em; } } /* ================= header ================= */ .cxh { position: sticky; top: 0; z-index: 200; background: rgba(16,15,14,.92); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid rgba(196,154,84,.18); } .cxh__in { max-width: var(--container); margin-inline: auto; padding: .7rem clamp(1rem,4vw,2rem); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.4rem; } .cxh__logo { flex: none; display: block; } .cxh__logo img { height: 46px; width: auto; } /* De header is sticky en ongeveer 90px hoog. Zonder deze regel landt elke ankerlink (#pakketten, #formaten) met zijn kop onder de header. */ html { scroll-padding-top: 108px; } @media (max-width: 979px) { html { scroll-padding-top: 84px; } } .cxh__nav { justify-self: center; } .cxh__nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 1.6rem; } .cxh__nav a { position: relative; font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: rgba(246,243,234,.8); text-decoration: none; padding: .35rem 0; transition: color .15s; } .cxh__nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--cx-goud-2), var(--cx-goud)); transition: right .18s var(--ease); } .cxh__nav a:hover { color: var(--pp-white); } .cxh__nav a:hover::after { right: 0; } .cxh__cta { display: inline-flex; align-items: center; gap: .5rem; justify-self: end; padding: .62rem 1.3rem; border-radius: 999px; border: 2px solid #14130F; background: linear-gradient(140deg, var(--cx-goud-2), var(--cx-goud)); color: #14130F; font-size: .82rem; font-weight: 800; text-decoration: none; box-shadow: 4px 4px 0 #14130F; transition: transform .12s var(--ease), box-shadow .12s var(--ease); } .cxh__cta::after, .cxh__cta-mob::after { content: ''; flex: none; width: .78em; height: .78em; background: currentColor; -webkit-mask: var(--cxh-pijl) center/contain no-repeat; mask: var(--cxh-pijl) center/contain no-repeat; } .cxh__cta:hover { transform: translate(2px,2px); box-shadow: 2px 2px 0 #14130F; color: #14130F; } .cxh__mob { display: none; grid-column: 2 / -1; justify-self: end; align-items: center; gap: .7rem; } .cxh__burger { width: 44px; height: 40px; display: grid; place-content: center; gap: 5px; background: transparent; border: 1px solid rgba(196,154,84,.4); border-radius: 12px; cursor: pointer; padding: 0; } .cxh__burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--cx-goud-2); } @media (max-width: 979px) { .cxh__nav, .cxh__cta { display: none; } .cxh__in { grid-template-columns: auto 1fr; } .cxh__mob { display: flex; } .cxh__logo img { height: 40px; } .cxh__cta-mob { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1.05rem; border-radius: 999px; border: 2px solid #14130F; background: linear-gradient(140deg, var(--cx-goud-2), var(--cx-goud)); color: #14130F; font-size: .8rem; font-weight: 800; text-decoration: none; box-shadow: 3px 3px 0 #14130F; } } /* ========================================================================== Footer (footer-club.php) ========================================================================== */ .cxf { position: relative; background: linear-gradient(180deg, #131211, #0B0A09); border-top: 1px solid rgba(196,154,84,.2); } .cxf__wrap { max-width: var(--container); margin-inline: auto; padding-inline: clamp(1rem,4vw,2rem); } .cxf a { text-decoration: none; } /* ---- contactband: het signature-vlak, nu als afsluiter ---- */ .cxf__band { padding-block: clamp(2.6rem,5vw,4rem); } .cxf__kaart { position: relative; border-radius: 20px; } .cxf__kaart-vlak { position: absolute; inset: 0; z-index: 0; border-radius: 22px; transform: translate(var(--cx-off,9px), var(--cx-off,9px)); background: linear-gradient(150deg, var(--cx-goud-2), var(--cx-goud) 55%, var(--pp-gold-deep)); } .cxf__kaart-in { position: relative; z-index: 1; border: 2px solid rgba(20,19,17,.9); border-radius: 20px; background: linear-gradient(160deg, rgba(58,55,50,.85), rgba(30,28,26,.95)); padding: clamp(1.8rem,4vw,2.8rem); display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; flex-wrap: wrap; } .cxf__hand { display: block; font-family: 'Caveat','Segoe Script',cursive; font-weight: 700; font-size: clamp(1.15rem,1.8vw,1.5rem); line-height: 1; color: var(--cx-goud-2); transform: rotate(-2.5deg); margin-bottom: .9rem; } .cxf__titel { margin: 0; font-size: clamp(1.5rem,1.1rem+1.6vw,2.2rem); font-weight: 800; letter-spacing: -.015em; line-height: 1.1; } .cxf__sub { margin: .8rem 0 0; color: var(--pp-muted); font-size: .92rem; max-width: 46ch; } .cxf__acties { display: flex; align-items: center; gap: .8rem 1.5rem; flex-wrap: wrap; } .cxf__btn { display: inline-flex; align-items: center; gap: .55rem; padding: .9rem 1.7rem; border-radius: 999px; border: 2px solid #14130F; background: linear-gradient(140deg, var(--cx-goud-2), var(--cx-goud)); color: #14130F; font-weight: 800; font-size: .95rem; box-shadow: 5px 5px 0 #14130F; transition: transform .12s var(--ease), box-shadow .12s var(--ease); } .cxf__btn:hover { transform: translate(3px,3px); box-shadow: 2px 2px 0 #14130F; color: #14130F; } .cxf__btn svg { width: 17px; height: 17px; } .cxf__link { display: inline-flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: rgba(246,243,234,.78); padding-bottom: 3px; border-bottom: 1px solid transparent; transition: color .15s, border-color .15s; } .cxf__link:hover { color: var(--cx-goud-2); border-bottom-color: rgba(196,154,84,.5); } .cxf__link svg { width: 15px; height: 15px; } /* ---- kolommen ---- */ .cxf__grid { display: grid; grid-template-columns: minmax(0,1.5fr) repeat(3, minmax(0,1fr)); gap: clamp(1.6rem,4vw,3rem); padding-bottom: clamp(2rem,4vw,3rem); border-top: 1px solid rgba(196,154,84,.16); padding-top: clamp(2rem,4vw,3rem); } .cxf__logo img { height: 66px; width: auto; } .cxf__about { margin: 1.1rem 0 1.3rem; color: var(--pp-muted); font-size: .86rem; max-width: 40ch; } .cxf__socials { display: flex; gap: .6rem; } .cxf__socials a { display: grid; place-content: center; width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(196,154,84,.32); color: var(--cx-goud-2); transition: background .15s, border-color .15s; } .cxf__socials a:hover { background: rgba(196,154,84,.14); border-color: var(--cx-goud); } .cxf__socials svg { width: 17px; height: 17px; } .cxf__kop { margin: 0 0 1rem; font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--pp-white); display: flex; align-items: center; gap: .55rem; } .cxf__kop::before { content: ''; width: 16px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--cx-goud-2), var(--cx-goud)); } .cxf__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; } .cxf__col a, .cxf__col span { font-size: .86rem; color: var(--pp-muted); } .cxf__col a:hover { color: var(--cx-goud-2); } .cxf__data li { display: grid; grid-template-columns: 26px minmax(0,1fr); gap: .5rem; align-items: center; } .cxf__ico { display: grid; place-content: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(196,154,84,.14); color: var(--cx-goud-2); } .cxf__ico svg { width: 13px; height: 13px; } .cxf__data strong { color: rgba(246,243,234,.9); font-weight: 700; } /* ---- onderbalk ---- */ .cxf__bar { border-top: 1px solid rgba(196,154,84,.16); } .cxf__bar-in { max-width: var(--container); margin-inline: auto; padding: 1.1rem clamp(1rem,4vw,2rem); display: flex; align-items: center; justify-content: space-between; gap: .6rem 1.5rem; flex-wrap: wrap; } .cxf__bar p { margin: 0; font-size: .74rem; color: rgba(207,201,192,.6); } .cxf__bar a { color: var(--cx-goud-2); } @media (max-width: 899px) { .cxf__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .cxf__grid > *:first-child { grid-column: 1 / -1; } .cxf__kaart-in { flex-direction: column; align-items: flex-start; } .cxf__bar-in { justify-content: center; text-align: center; } } @media (max-width: 519px) { .cxf__grid { grid-template-columns: minmax(0,1fr); } } /* ========================================================================== Extra bouwstenen voor de losse pagina's ========================================================================== */ .cx-usps--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .cx-specs--4 { grid-template-columns: repeat(4, minmax(0,1fr)); } .cx-punch { margin: 1.4rem 0 1.8rem; font-family: 'Caveat','Segoe Script',cursive; font-weight: 700; font-size: clamp(1.3rem,1.9vw,1.65rem); line-height: 1.1; color: var(--cx-goud-2); transform: rotate(-1.5deg); } .cx-loc { display: inline-flex; align-items: center; gap: .7rem; margin: 1.6rem 0 0; padding: .7rem 1.1rem; border-radius: 14px; border: 1px solid var(--pp-line); background: rgba(46,44,40,.5); } .cx-loc__ico { display: grid; place-content: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(196,154,84,.16); color: var(--cx-goud-2); flex: none; } .cx-loc__ico svg { width: 16px; height: 16px; } .cx-loc b { display: block; font-size: .88rem; color: var(--pp-white); } .cx-loc span span { display: block; font-size: .74rem; color: var(--pp-muted); } /* beeld dat niet bijgesneden mag worden (kaart, plattegrond) */ /* Deze variant snijdt niet bij (het is een kaartje, geen sfeerfoto), dus het frame moet de verhouding van de afbeelding zelf aannemen. Anders blijft er lege ruimte over waar de gouden lijst doorheen schijnt. */ .cx-even__beeld--vrij { display: flex; } .cx-even__beeld--vrij img { height: auto; object-fit: contain; background: rgba(255,255,255,.04); } .cx-hero h1.cx-h2 { margin: 0 0 0; } @media (max-width: 1023px) { .cx-usps--3 { grid-template-columns: repeat(2, minmax(0,1fr)); } .cx-specs--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 599px) { .cx-usps--3, .cx-specs--4 { grid-template-columns: minmax(0,1fr); } } /* ---- kop van een subpagina: rustiger dan de homepage-hero ---- */ .cx-paginahero { padding-block: clamp(2.2rem, 4vw, 3.4rem); } .cx-kruimel { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.1rem; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pp-muted); } .cx-kruimel a { color: var(--pp-muted); text-decoration: none; } .cx-kruimel a:hover { color: var(--cx-goud-2); } .cx-kruimel span[aria-hidden] { color: rgba(196,154,84,.55); } .cx-paginakop { max-width: min(100%, 28ch); } @media (max-width: 599px) { .cx-paginakop { max-width: 100%; } } .cx-paginahero .cx-kop__tekst { margin-top: 1.3rem; } /* ========================================================================== Contact ========================================================================== */ .cx-contact { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); gap: clamp(1.6rem,4vw,3rem); align-items: start; } .cx-contact__form { border-radius: 18px; } .cx-kaart { position: relative; z-index: 1; border: 2px solid rgba(20,19,17,.9); border-radius: 18px; background: var(--pp-surface-2); padding: clamp(1.5rem,3vw,2.2rem); } .cx-h3 { font-size: var(--fs-28); font-weight: 800; letter-spacing: -.015em; line-height: 1.1; margin: 0; } .cx-kaart .cx-kop__tekst { margin-top: .9rem; } .cx-formulier { margin-top: 1.6rem; } /* het FluentForms-formulier in de nieuwe stijl zetten */ .cx-formulier .ff-el-input--label label { font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--pp-white); } .cx-formulier input[type=text], .cx-formulier input[type=email], .cx-formulier input[type=tel], .cx-formulier textarea, .cx-formulier select { width: 100%; background: rgba(20,19,17,.5); border: 1px solid var(--pp-line); border-radius: 12px; padding: .8rem 1rem; color: var(--pp-white); font: inherit; font-size: .92rem; } .cx-formulier input:focus, .cx-formulier textarea:focus, .cx-formulier select:focus { outline: none; border-color: var(--cx-goud); box-shadow: 0 0 0 3px rgba(196,154,84,.16); } .cx-formulier .ff-btn-submit, .cx-formulier button[type=submit] { display: inline-flex; align-items: center; gap: .55rem; padding: .9rem 1.7rem; border-radius: 999px; border: 2px solid #14130F; background: linear-gradient(140deg, var(--cx-goud-2), var(--cx-goud)); color: #14130F !important; font-weight: 800; font-size: .95rem; box-shadow: 5px 5px 0 #14130F; cursor: pointer; transition: transform .12s var(--ease), box-shadow .12s var(--ease); } .cx-formulier .ff-btn-submit:hover, .cx-formulier button[type=submit]:hover { transform: translate(3px,3px); box-shadow: 2px 2px 0 #14130F; } .cx-contact__lead { color: var(--pp-muted); font-size: var(--fs-15,.95rem); margin: 0 0 1.4rem; } .cx-contact__wa { margin-bottom: 2rem; } .cx-kop__label { margin: 0 0 1rem; font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--pp-white); display: flex; align-items: center; gap: .55rem; } .cx-kop__label::before { content: ''; width: 16px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--cx-goud-2), var(--cx-goud)); } .cx-gegevens { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .8rem; } .cx-gegevens li { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: .8rem; align-items: center; } .cx-gegevens__ico { display: grid; place-content: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(196,154,84,.14); color: var(--cx-goud-2); } .cx-gegevens__ico svg { width: 16px; height: 16px; } .cx-gegevens__label { display: block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--pp-muted); } .cx-gegevens a, .cx-gegevens__waarde { font-size: .88rem; color: var(--pp-white); overflow-wrap: anywhere; } .cx-gegevens a:hover { color: var(--cx-goud-2); } .cx-promo { display: inline-block; margin: 0; padding: .55rem 1.1rem; border-radius: 999px; border: 1px dashed rgba(196,154,84,.55); background: rgba(196,154,84,.08); font-size: .78rem; font-weight: 700; color: var(--cx-goud-2); } @media (max-width: 899px) { .cx-contact { grid-template-columns: minmax(0,1fr); } .cx-contact > * { min-width: 0; } .cx-contact__zij { order: -1; } } /* ========================================================================== FAQ-pagina (alle vragen, per onderwerp) ========================================================================== */ .cx-faq__zij--sticky { position: sticky; top: 90px; } .cx-faq__intro { color: #5A544A; font-size: .92rem; margin: 0 0 1.8rem; } .cx-kop__label--donker { color: #14130F; } .cx-sprong { list-style: none; margin: 0 0 1.8rem; padding: 0; display: grid; gap: .3rem; } .cx-sprong a { display: block; padding: .5rem .8rem; border-radius: 10px; font-size: .86rem; font-weight: 700; color: #46413A; text-decoration: none; transition: background .15s, color .15s; } .cx-sprong a:hover { background: rgba(196,154,84,.16); color: #14130F; } .cx-faq__groepen { display: grid; gap: 2.4rem; min-width: 0; } .cx-faq__groepkop { margin: 0 0 1rem; font-size: var(--fs-22); font-weight: 800; letter-spacing: -.015em; color: #14130F; display: flex; align-items: center; gap: .7rem; } .cx-faq__groepkop::before { content: ''; width: 22px; height: 3px; border-radius: 3px; flex: none; background: linear-gradient(90deg, var(--cx-goud-2), var(--cx-goud)); } .cx-faq__a p:last-child, .cx-faq__a ul:last-child { margin-bottom: 0; } .cx-faq__a ul { margin: .6rem 0; padding-left: 1.1rem; } .cx-faq__a li { margin-bottom: .3rem; } .cx-faq__slot { margin: 0; font-size: .9rem; color: #5A544A; } .cx-faq__slot a { color: var(--pp-gold-deep); font-weight: 700; text-decoration: underline; } @media (max-width: 899px) { .cx-faq__zij--sticky { position: static; } .cx-sprong { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 519px) { .cx-sprong { grid-template-columns: minmax(0,1fr); } } /* ========================================================================== Productpagina ========================================================================== */ .cx-pdp { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(1.6rem,4vw,3rem); align-items: start; margin-top: 1.8rem; } .cx-pdp__kader { border-radius: 20px; } .cx-pdp__hoofd { position: relative; z-index: 1; border-radius: 20px; overflow: hidden; border: 2px solid rgba(20,19,17,.9); background: linear-gradient(165deg, #FBF7EE, var(--cx-paper) 60%, var(--cx-paper-2)); } .cx-pdp__hoofd img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: contain; display: block; padding: 4%; border-radius: 14px; } .cx-pdp__thumbs { position: relative; z-index: 1; display: flex; gap: .6rem; margin-top: .9rem; flex-wrap: wrap; } .cx-pdp__thumbs button { width: 68px; height: 68px; padding: 0; border-radius: 12px; cursor: pointer; overflow: hidden; border: 1px solid var(--pp-line); background: var(--cx-paper); } .cx-pdp__thumbs button.is-active { border-color: var(--cx-goud); } .cx-pdp__thumbs img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 3px; border-radius: 9px; } .cx-pdp__info .cx-h2 { margin: .3rem 0 0; } .cx-pdp__kort { color: var(--pp-muted); font-size: var(--fs-15,.95rem); margin: 1.2rem 0 0; } .cx-pdp__kort p:last-child { margin-bottom: 0; } .cx-pdp__prijs { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin: 1.6rem 0 .5rem; padding-top: 1.4rem; border-top: 1px solid var(--pp-line-soft); } .cx-pdp__bedrag { font-size: clamp(1.9rem,1.4rem+1.6vw,2.5rem); font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--cx-goud-2); } .cx-pdp__per { font-size: .8rem; color: var(--pp-muted); } .cx-pdp__note { font-size: .82rem; color: var(--pp-muted); margin: 0 0 1.6rem; max-width: 44ch; } .cx-pdp__note strong { color: var(--pp-white); } .cx-pdp__info .cx-hero__trust { margin-top: 1.8rem; } .cx-pdp__detail { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,.65fr); gap: clamp(1.6rem,4vw,3rem); align-items: start; } .cx-prose { color: #46413A; font-size: .95rem; } .cx-prose h2, .cx-prose h3 { color: #14130F; font-size: var(--fs-22); margin: 1.6rem 0 .6rem; } .cx-prose ul { padding-left: 1.1rem; } .cx-prose a { color: var(--pp-gold-deep); text-decoration: underline; } .cx-speckaart { background: #fff; border: 2px solid #14130F; border-radius: 18px; box-shadow: 7px 7px 0 #14130F; padding: 1.4rem 1.5rem 1.6rem; min-width: 0; } .cx-speclijst { margin: 0; display: grid; gap: .1rem; } .cx-speclijst > div { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1rem; padding: .6rem 0; border-bottom: 1px solid rgba(20,19,17,.1); } .cx-speclijst > div:last-child { border-bottom: 0; } .cx-speclijst dt { font-size: .8rem; font-weight: 700; color: #5A544A; margin: 0; } .cx-speclijst dd { font-size: .84rem; font-weight: 700; color: #14130F; margin: 0; } /* pakketten als rijen */ .cx-pkg { display: grid; gap: .8rem; } .cx-pkg__rij { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1.2rem; align-items: center; padding: 1.15rem 1.4rem; border-radius: 16px; border: 1px solid var(--pp-line); text-decoration: none; background: rgba(46,44,40,.55); transition: border-color .15s, transform .15s, background .15s; } .cx-pkg__rij:hover { border-color: var(--cx-goud); background: rgba(196,154,84,.1); transform: translateX(4px); } .cx-pkg__rij.is-top { border-color: rgba(196,154,84,.6); background: rgba(196,154,84,.08); } .cx-pkg__naam { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; font-size: var(--fs-18); font-weight: 800; color: var(--pp-white); } .cx-pkg__vlag { font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: .22rem .6rem; border-radius: 999px; color: #14130F; background: linear-gradient(140deg, var(--cx-goud-2), var(--cx-goud)); } .cx-pkg__tekst { display: block; margin-top: .25rem; font-size: .84rem; color: var(--pp-muted); } .cx-pkg__prijs { text-align: right; white-space: nowrap; } .cx-pkg__prijs b { display: block; font-size: var(--fs-22); font-weight: 800; color: var(--cx-goud-2); line-height: 1; } .cx-pkg__prijs span { font-size: .7rem; color: var(--pp-muted); } /* oude pakketprijs (actie), doorgestreept boven de nieuwe */ .cx-pkg__prijs s { display: block; margin-bottom: .2rem; font-size: .8rem; font-weight: 700; color: var(--pp-muted); opacity: .75; } .cx-pdp__note s { color: var(--pp-muted); opacity: .75; font-weight: 600; } @media (max-width: 899px) { .cx-pdp, .cx-pdp__detail { grid-template-columns: minmax(0,1fr); } .cx-pdp > *, .cx-pdp__detail > * { min-width: 0; } .cx-pkg__rij { grid-template-columns: minmax(0,1fr); gap: .6rem; } .cx-pkg__prijs { text-align: left; } } /* ========================================================================== Categorie-overzicht: zelfde kaart als op de homepage, ruimer raster ========================================================================== */ /* Het hub-raster vult zichzelf, maar onder de 230px-drempel zou dat op mobiel één kaart per rij worden. Productkaarten staan daar altijd met z'n tweeën. Deze media query moet ná de algemene mobiele blokken staan, anders wint de auto-fill hierboven alsnog. */ .cx-acc--hub { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } @media (max-width: 639px) { .cx-acc--hub { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .8rem; } } .cx-acckaart__foto { position: relative; } /* de bestaande productbadge (bv. "Populair") op de kaart houden */ .cx-acckaart__foto .pp-product__badge, .cx-acckaart__foto [class*="badge"] { position: absolute; top: .6rem; left: .6rem; z-index: 2; } /* ========================================================================== Stadspagina ========================================================================== */ .cx-stad { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,.65fr); gap: clamp(1.6rem,4vw,3rem); align-items: start; } .cx-stad__omliggend { margin-top: 2rem; padding: 1.2rem 1.4rem; border-radius: 16px; border: 2px solid #14130F; background: #fff; box-shadow: 6px 6px 0 #14130F; } .cx-stad__omliggend h3 { margin: 0 0 .5rem; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #14130F; } .cx-stad__omliggend p { margin: 0; font-size: .88rem; color: #5A544A; } .cx-stad__fotos { display: grid; gap: 1.6rem; } .cx-stad__foto { border-radius: 18px; } .cx-stad__kader { position: relative; z-index: 1; border-radius: 18px; overflow: hidden; border: 2px solid rgba(20,19,17,.9); } .cx-stad__kader img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; } /* plaatsen in de buurt */ .cx-chips { display: flex; flex-wrap: wrap; gap: .55rem; } .cx-chip { padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--pp-line); background: rgba(46,44,40,.55); font-size: .82rem; font-weight: 700; color: var(--pp-white); text-decoration: none; transition: border-color .15s, background .15s; } .cx-chip:hover { border-color: var(--cx-goud); background: rgba(196,154,84,.12); color: var(--cx-goud-2); } .cx-chips__voet { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: 1.8rem 0 0; } @media (max-width: 899px) { .cx-stad { grid-template-columns: minmax(0,1fr); } .cx-stad > * { min-width: 0; } .cx-stad__fotos { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 519px) { .cx-stad__fotos { grid-template-columns: minmax(0,1fr); } } /* ========================================================================== Locatie-overzicht ========================================================================== */ .cx-specs--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .cx-regios { display: grid; gap: clamp(1.8rem,3vw,2.6rem); } .cx-regio { padding-bottom: clamp(1.6rem,3vw,2.2rem); border-bottom: 1px solid var(--pp-line-soft); } .cx-regio:last-child { border-bottom: 0; padding-bottom: 0; } .cx-regio__kop { display: flex; align-items: center; gap: .8rem; margin: 0 0 .5rem; font-size: var(--fs-22); font-weight: 800; letter-spacing: -.015em; } .cx-regio__kop a { color: var(--pp-white); text-decoration: none; border-bottom: 2px solid transparent; } .cx-regio__kop a:hover { color: var(--cx-goud-2); border-bottom-color: var(--cx-goud); } .cx-regio__aantal { display: grid; place-content: center; min-width: 26px; height: 22px; padding: 0 .45rem; border-radius: 999px; background: rgba(196,154,84,.16); color: var(--cx-goud-2); font-size: .68rem; font-weight: 800; letter-spacing: 0; } .cx-regio__tekst { margin: 0 0 1.1rem; font-size: .88rem; color: var(--pp-muted); max-width: 70ch; } @media (max-width: 899px) { .cx-specs--3 { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 599px) { .cx-specs--3 { grid-template-columns: minmax(0,1fr); } } /* ========================================================================== B2B ========================================================================== */ .cx-gebruik { display: flex; flex-wrap: wrap; gap: .7rem; } .cx-gebruik__item { display: inline-flex; align-items: center; gap: .7rem; padding: .7rem 1.1rem; border-radius: 14px; border: 1px solid var(--pp-line-soft); background: rgba(46,44,40,.5); font-size: .88rem; font-weight: 600; color: var(--pp-white); } .cx-showcase { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.6rem; } .cx-showcase__item { margin: 0; } .cx-showcase__wrap { display: block; border-radius: 18px; } .cx-showcase__kader { display: block; position: relative; z-index: 1; border-radius: 18px; overflow: hidden; border: 2px solid rgba(20,19,17,.9); } .cx-showcase__kader img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; } .cx-showcase figcaption { margin-top: 1.1rem; font-size: .84rem; color: var(--pp-muted); } @media (max-width: 899px) { .cx-showcase { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 599px) { .cx-showcase { grid-template-columns: minmax(0,1fr); } } /* ========================================================================== Funnel — de markup is gelijk aan live (pp-bk-*), alleen de opmaak is nieuw. ========================================================================== */ /* De funnel toont en verbergt regels met het hidden-attribuut. Een eigen display-waarde wint daarvan, dus dat expliciet terugzetten. */ /* Laagopbouw van de funnel. De vlakken lagen alle drie binnen een luminantie van .005 tot .013, dus het verschil tussen sectie, stapkaart en keuzeblok was met 1,12 contrast praktisch onzichtbaar: je zag ze alleen aan hun randen. Deze drie tinten trappen met ruim 1,4 per stap, wat de kaarten leesbaar maakt als losse, aanraakbare vlakken zonder de donkere sfeer op te geven. Warme ondertoon vasthouden, geen grijs. Draai je hieraan, houd dan de volgorde 0 < gesloten < 1 < 2 aan. */ :root { --cx-laag-1: #302D29; /* stapkaart, open */ --cx-laag-1-dicht: #211F1C; /* stapkaart, vergrendeld */ --cx-laag-2: #443F39; /* keuzeblok en invoerveld op de stapkaart */ } .cx-funnel [hidden] { display: none !important; } .cxh--kaal { position: static; } .cxh__in--kaal { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; } .cxh__kaal-links { display: flex; align-items: center; gap: 1.2rem; } .cxh__terug { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pp-muted); text-decoration: none; } .cxh__terug:hover { color: var(--cx-goud-2); } .cxh__usps { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.4rem; flex-wrap: wrap; font-size: .76rem; color: var(--pp-muted); } .cxh__usps strong { color: var(--pp-white); } .cxh__sterren { color: var(--cx-goud-2); letter-spacing: .06em; } @media (max-width: 767px) { .cxh__usps li:not(:first-child) { display: none; } } .cx-funnel .pp-bk__grid { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,.5fr); gap: clamp(1.4rem,3vw,2.4rem); align-items: start; } .cx-funnel .pp-bk__steps { display: grid; gap: 1.2rem; min-width: 0; } /* stapkaart */ /* De stapkaart moet los komen van de paginakleur: een tint lichter en een rand die je ziet in plaats van een die wegvalt in het zwart. */ .cx-funnel .pp-bk-step { background: var(--cx-laag-1); border: 1px solid rgba(246,243,234,.14); border-radius: 18px; overflow: hidden; } .cx-funnel .pp-bk-step__head { display: flex; align-items: flex-start; gap: .8rem; padding: 1.1rem 1.4rem; } .cx-funnel .pp-bk-step__head > div { flex: 1 1 auto; min-width: 0; } /* De bol met het stapnummer: altijd goud, zodat de nummering rustig en herkenbaar blijft. Vergrendelde stappen dempen we met opacity in plaats van met een andere kleur, dan blijft de reeks 1 t/m 4 in één oogopslag leesbaar. */ .cx-funnel .pp-bk-step__num { display: grid !important; place-content: center; flex: none; width: 30px; height: 30px; border-radius: 50%; font-size: .84rem; font-weight: 800; line-height: 1; background: linear-gradient(140deg, var(--cx-goud-2), var(--cx-goud)) !important; color: #14130F !important; border: 0 !important; box-shadow: none !important; transition: opacity .18s var(--ease); } .cx-funnel .pp-bk-step.is-vergrendeld .pp-bk-step__num { opacity: .4; } .cx-funnel .pp-bk-step__head { display: flex; align-items: flex-start; gap: .8rem; padding: 1.1rem 1.4rem; } .cx-funnel .pp-bk-step__head > div { flex: 1 1 auto; min-width: 0; } /* De bol met het stapnummer: rustig bij een vergrendelde stap, gouden rand als hij open is, gevuld zodra er een keuze in staat. */ .cx-funnel .pp-bk-step__num { display: grid; place-content: center; flex: none; width: 30px; height: 30px; border-radius: 50%; font-size: .82rem; font-weight: 800; border: 1px solid rgba(246,243,234,.22); color: var(--pp-muted); background: none; box-shadow: none; transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease); } .cx-funnel .pp-bk-step.cx-actueel .pp-bk-step__num { border-color: var(--cx-goud); color: var(--pp-white); } .cx-funnel .pp-bk-step.is-klaar .pp-bk-step__num { background: linear-gradient(140deg, var(--cx-goud-2), var(--cx-goud)); border-color: var(--cx-goud); color: #14130F; } .cx-funnel .pp-bk-step.is-vergrendeld .pp-bk-step__num { border-color: rgba(246,243,234,.12); color: rgba(207,201,192,.45); background: none; } .cx-funnel .pp-bk-step__title { margin: 0; font-size: var(--fs-18); font-weight: 800; letter-spacing: -.015em; } .cx-funnel .pp-bk-step__hint { margin: .25rem 0 0; font-size: .8rem; color: var(--pp-muted); } .cx-funnel .pp-bk-step__opt { font-size: .7rem; font-weight: 700; color: var(--pp-muted); text-transform: none; letter-spacing: 0; } .cx-funnel .pp-bk-step__lock { color: var(--pp-muted); opacity: .6; } .cx-funnel .pp-bk-step__body { padding: 1.3rem 1.4rem 1.4rem; } .cx-funnel .pp-bk-step.is-open { border-color: rgba(196,154,84,.4); } .cx-funnel .pp-bk-step.is-open .pp-bk-step__head { border-bottom: 1px solid var(--pp-line-soft); } /* pakketten */ .cx-funnel .pp-bk-pkgs { display: grid; grid-template-columns: minmax(0,1fr); gap: .9rem; margin-top: 0; } /* Compacter dan eerst: drie kaarten onder elkaar werden anders een muur. De rand is dunner, de vulling krapper en de tekst een maat kleiner. */ .cx-funnel .pp-bk-pkg { position: relative; padding: 1rem 1.15rem; border-radius: 14px; cursor: pointer; border: 1px solid rgba(246,243,234,.16); background: var(--cx-laag-2); display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 1.5rem; align-items: start; transition: border-color .15s, background .15s, transform .15s; } .cx-funnel .pp-bk-pkg:hover { transform: translateX(3px); } /* Uitgelicht pakket even breed als de rest: het accent zit in rand en label. */ .cx-funnel .pp-bk-pkg.is-featured, .cx-funnel .pp-bk-pkg.is-featured:hover { transform: none; } .cx-funnel .pp-bk-pkg.is-featured:hover { transform: translateX(3px); } .cx-funnel .pp-bk-pkg.is-featured { border-color: rgba(196,154,84,.55); } .cx-funnel .pp-bk-pkg:hover { border-color: rgba(196,154,84,.7); } .cx-funnel .pp-bk-pkg.is-selected { border-color: var(--cx-goud); background: rgba(196,154,84,.12); } .cx-funnel .pp-bk-pkg__flag { position: absolute; top: -11px; left: 1.3rem; z-index: 2; padding: .22rem .7rem; border-radius: 999px; background: linear-gradient(140deg, var(--cx-goud-2), var(--cx-goud)); color: #14130F; border: 2px solid #14130F; font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .cx-funnel .pp-bk-pkg__radio { position: absolute; top: auto; bottom: 1rem; right: 1.15rem; left: auto; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--pp-line); } .cx-funnel .pp-bk-pkg.is-selected .pp-bk-pkg__radio { border-color: var(--cx-goud); background: radial-gradient(circle, var(--cx-goud) 45%, transparent 46%); } .cx-funnel .pp-bk-pkg__name { grid-column: 1; grid-row: 1; font-weight: 800; font-size: var(--fs-18); letter-spacing: -.015em; line-height: 1.15; } .cx-funnel .pp-bk-pkg__price { grid-column: 2; grid-row: 1 / span 2; text-align: right; white-space: nowrap; font-size: clamp(1.25rem,1rem+.8vw,1.6rem); font-weight: 800; color: var(--cx-goud-2); line-height: 1.1; } .cx-funnel .pp-bk-pkg__price s { display: block; color: var(--pp-muted); font-size: .82rem; font-weight: 400; opacity: .7; } .cx-funnel .pp-bk-pkg__desc { grid-column: 1; grid-row: 2; margin-top: .3rem; font-size: .82rem; color: var(--pp-muted); } .cx-funnel .pp-bk-pkg__details { grid-column: 1; grid-row: 3; margin-top: .8rem; font-size: .8rem; color: var(--pp-muted); } .cx-funnel .pp-bk-pkg__details summary { cursor: pointer; color: var(--cx-goud-2); font-weight: 600; } .cx-funnel .pp-bk-pkg__details ul { margin: .5rem 0 0; padding-left: 1.1rem; } /* tenten + extra's */ .cx-funnel .pp-bk-tents { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: .8rem; } /* De accessoires staan als brede rijen: foto links, naam in het midden, prijs rechts. Op een telefoon onder elkaar (een halve rij is te smal voor foto, naam en prijs naast elkaar), vanaf 720 px twee naast elkaar. */ .cx-funnel .pp-bk-extras { display: grid; grid-template-columns: minmax(0,1fr); gap: .55rem; } @media (min-width: 720px) { .cx-funnel .pp-bk-extras { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .6rem; } } .cx-funnel .pp-bk-tent { position: relative; padding: .8rem; border-radius: 14px; border: 1px solid rgba(246,243,234,.16); background: var(--cx-laag-2); cursor: pointer; text-align: center; color: var(--pp-white); font: inherit; transition: border-color .15s, background .15s; } .cx-funnel .pp-bk-extra { position: relative; display: grid; grid-template-columns: 56px minmax(0,1fr) auto 22px; align-items: center; gap: .55rem .8rem; padding: .6rem .8rem; border-radius: 14px; border: 1px solid rgba(246,243,234,.16); background: var(--cx-laag-2); cursor: pointer; text-align: left; color: var(--pp-white); font: inherit; transition: border-color .15s, background .15s; } .cx-funnel .pp-bk-tent:hover, .cx-funnel .pp-bk-extra:hover { border-color: rgba(196,154,84,.7); } .cx-funnel .pp-bk-tent.is-selected, .cx-funnel .pp-bk-extra.is-active { border-color: var(--cx-goud); background: rgba(196,154,84,.12); } .cx-funnel .pp-bk-extra__media { display: block; width: 56px; height: 56px; margin: 0; border-radius: 10px; background: rgba(246,243,234,.05); overflow: hidden; } .cx-funnel .pp-bk-extra__media img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; display: block; padding: 3px; } .cx-funnel .pp-bk-extra__info { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; } /* De productbadge zat als gouden vlag op de foto; in een rij van 56 px is die onleesbaar, dus staat hij nu als tekstlabel onder de naam. */ .cx-funnel .pp-bk-extra .pp-imgbadge { position: static; padding: .12rem .45rem; font-size: .6rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; box-shadow: none; } .cx-funnel .pp-bk-tent__size { display: block; font-size: .84rem; font-weight: 800; } .cx-funnel .pp-bk-extra__name { display: block; font-size: .88rem; font-weight: 800; line-height: 1.3; } .cx-funnel .pp-bk-tent__price { display: block; margin-top: .2rem; font-size: .8rem; font-weight: 700; color: var(--cx-goud-2); } .cx-funnel .pp-bk-extra__price { display: block; margin: 0; font-size: .88rem; font-weight: 800; color: var(--cx-goud-2); text-align: right; white-space: nowrap; } .cx-funnel .pp-bk-extra__price s { color: var(--pp-muted); font-weight: 400; opacity: .7; } .cx-funnel .pp-bk-extra__per { color: var(--pp-muted); font-weight: 400; font-size: .7rem; } .cx-funnel .pp-bk-extra__tip { display: inline-block; margin-left: .3rem; padding: .1rem .4rem; border-radius: 999px; background: linear-gradient(140deg, var(--cx-goud-2), var(--cx-goud)); color: #14130F; font-size: .55rem; font-weight: 800; letter-spacing: .08em; } .cx-funnel .pp-bk-tent__check { position: absolute; top: .6rem; right: .6rem; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--pp-line); background: rgba(20,19,17,.6); } .cx-funnel .pp-bk-extra__check { position: relative; top: auto; right: auto; left: auto; bottom: auto; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--pp-line); background: rgba(20,19,17,.6); justify-self: end; align-self: center; } .cx-funnel .pp-bk-tent.is-selected .pp-bk-tent__check, .cx-funnel .pp-bk-extra.is-active .pp-bk-extra__check { border-color: var(--cx-goud); background: linear-gradient(140deg, var(--cx-goud-2), var(--cx-goud)); } .cx-funnel .pp-bk-extra.is-active .pp-bk-extra__check::after { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 9px; border: solid #14130F; border-width: 0 2px 2px 0; transform: rotate(45deg); } .cx-funnel .pp-bk-extra__qty { grid-column: 2 / -1; display: inline-flex; align-items: center; gap: .5rem; margin-top: .1rem; justify-self: start; } .cx-funnel .pp-bk-qty__btn { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--pp-line); background: rgba(20,19,17,.5); color: var(--pp-white); cursor: pointer; font-weight: 800; } .cx-funnel .pp-bk-extra__num { grid-column: 2 / -1; display: flex; align-items: center; gap: .55rem; margin-top: .1rem; font-size: .72rem; color: var(--pp-muted); } .cx-funnel .pp-bk-extra__num input { width: 5.5rem; margin-top: 0; padding: .45rem .6rem; border-radius: 8px; border: 1px solid var(--pp-line); background: rgba(20,19,17,.6); color: var(--pp-white); text-align: center; font: inherit; } /* formulier */ .cx-funnel .pp-bk-notice { display: flex; align-items: center; gap: .8rem; padding: .9rem 1.1rem; margin-bottom: 1.2rem; border-radius: 14px; border: 1px dashed rgba(196,154,84,.5); background: rgba(196,154,84,.08); font-size: .84rem; } .cx-funnel .pp-bk-notice__icon { color: var(--cx-goud-2); flex: none; } .cx-funnel .pp-bk-fieldset { border: 0; padding: 0; margin: 0 0 1.4rem; } .cx-funnel .pp-bk-fieldset legend { padding: 0; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--pp-white); } .cx-funnel .pp-bk-fieldset__note { margin: .35rem 0 .9rem; font-size: .76rem; color: var(--pp-muted); } .cx-funnel .pp-bk-form__row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .8rem; } .cx-funnel .pp-bk-form__row--pchn { grid-template-columns: minmax(0,2fr) minmax(0,1fr); } .cx-funnel .pp-bk-field { display: block; margin-bottom: .8rem; } .cx-funnel .pp-bk-field > span { display: block; margin-bottom: .3rem; font-size: .76rem; font-weight: 700; color: var(--pp-muted); } .cx-funnel .pp-bk-field input, .cx-funnel .pp-bk-field select { width: 100%; padding: .75rem .95rem; border-radius: 12px; border: 1px solid rgba(246,243,234,.18); background: var(--cx-laag-2); color: var(--pp-white); font: inherit; font-size: .9rem; } .cx-funnel .pp-bk-field input:focus, .cx-funnel .pp-bk-field select:focus { outline: none; border-color: var(--cx-goud); box-shadow: 0 0 0 3px rgba(196,154,84,.16); } .cx-funnel .pp-bk-address-status { margin: 0 0 .8rem; font-size: .78rem; color: var(--cx-goud-2); } /* samenvatting */ .cx-funnel .pp-bk-summary { position: sticky; top: 20px; min-width: 0; } .cx-funnel .pp-bk-summary__inner { border: 2px solid rgba(20,19,17,.9); border-radius: 18px; background: linear-gradient(170deg, rgba(58,55,50,.92), rgba(26,25,23,.97)); padding: 1.5rem 1.5rem 1.7rem; box-shadow: 9px 9px 0 var(--cx-goud), 14px 18px 34px rgba(0,0,0,.5); } .cx-funnel .pp-bk-summary__title { margin: 0 0 1rem; font-size: var(--fs-18); font-weight: 800; letter-spacing: -.015em; } .cx-funnel .pp-bk-summary__empty { font-size: .84rem; color: var(--pp-muted); margin: 0; } .cx-funnel .pp-bk-summary__lines { display: grid; gap: .5rem; font-size: .84rem; } .cx-funnel .pp-bk-summary__meta { display: grid; gap: .45rem; font-size: .82rem; color: var(--pp-muted); } /* pas een scheidingslijn zodra er echt regels staan */ .cx-funnel .pp-bk-summary__meta:has(.pp-bk-summary__row:not([hidden])) { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--pp-line-soft); } .cx-funnel .pp-bk-summary__row { display: flex; justify-content: space-between; gap: 1rem; } .cx-funnel .pp-bk-summary__row--discount { color: var(--pp-ok); } .cx-funnel .pp-bk-summary__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--pp-line-soft); font-weight: 800; } .cx-funnel .pp-bk-summary__amount { font-size: clamp(1.5rem,1.2rem+1vw,2rem); color: var(--cx-goud-2); letter-spacing: -.02em; } .cx-funnel .pp-bk-summary__vat { margin: .2rem 0 1.2rem; font-size: .72rem; color: var(--pp-muted); text-align: right; } .cx-funnel .pp-bk-calc, .cx-funnel .pp-bk-submit { display: flex; width: 100%; justify-content: center; align-items: center; gap: .5rem; padding: .9rem 1.4rem; border-radius: 999px; border: 2px solid #14130F; font-weight: 800; font-size: .92rem; cursor: pointer; margin-bottom: .7rem; } .cx-funnel .pp-bk-calc { background: transparent; border-color: rgba(196,154,84,.34); color: rgba(246,243,234,.85); } .cx-funnel .pp-bk-calc:hover { background: rgba(196,154,84,.1); border-color: rgba(196,154,84,.7); color: var(--cx-goud-2); } .cx-funnel .pp-bk-submit { background: linear-gradient(140deg, var(--cx-goud-2), var(--cx-goud)); color: #14130F; box-shadow: 5px 5px 0 #14130F; } .cx-funnel .pp-bk-submit:hover:not(:disabled) { transform: translate(3px,3px); box-shadow: 2px 2px 0 #14130F; } .cx-funnel .pp-bk-submit:disabled { opacity: .45; cursor: not-allowed; box-shadow: 3px 3px 0 rgba(20,19,17,.6); } .cx-funnel .pp-bk-summary__reassure { font-size: .74rem; color: var(--pp-muted); text-align: center; margin: .9rem 0 0; line-height: 1.5; } .cx-funnel .pp-bk-summary__reassure strong { color: var(--cx-goud-2); } .cx-funnel .pp-bk-summary__empty { font-size: .84rem; color: var(--pp-muted); margin: 0; } @media (max-width: 1023px) { .cx-funnel .pp-bk__grid { grid-template-columns: minmax(0,1fr); } .cx-funnel .pp-bk-summary { position: static; } } @media (max-width: 599px) { .cx-funnel .pp-bk-form__row { grid-template-columns: minmax(0,1fr); } .cx-funnel .pp-bk-form__row--pchn { grid-template-columns: minmax(0,2fr) minmax(0,1fr); } .cx-funnel .pp-bk-tents { grid-template-columns: repeat(2, minmax(0,1fr)); } } /* geruststellingsbalk */ .cx-gerust { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin: 1.6rem 0 1.8rem; padding: .8rem 1.2rem; border-radius: 999px; background: rgba(196,154,84,.1); border: 1px solid rgba(196,154,84,.28); font-size: .76rem; font-weight: 700; color: var(--cx-goud-2); justify-content: center; } .cx-gerust li { display: flex; align-items: center; gap: .4rem; } .cx-gerust li::before { content: '✓'; font-weight: 800; } .cx-gerust li.cx-gerust__score::before { content: none; } .cx-gerust__sterren { color: var(--cx-goud-2); letter-spacing: .04em; font-size: .72rem; } .cx-gerust__kort { display: none; } .cx-gerust__score strong { color: var(--pp-white); } @media (max-width: 767px) { .cx-gerust { border-radius: 999px; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; gap: .75rem; padding: .65rem .9rem; font-size: .65rem; } .cx-gerust::-webkit-scrollbar { display: none; } .cx-gerust li { flex: 0 0 auto; white-space: nowrap; } .cx-gerust__lang { display: none; } .cx-gerust__kort { display: inline; } .cx-gerust__sterren { display: none; } .cx-gerust { gap: .8rem; } .cx-gerust__sterren { font-size: .64rem; } } @media (max-width: 599px) { .cx-funnel .pp-bk-pkg { grid-template-columns: minmax(0,1fr); } .cx-funnel .pp-bk-pkg__price { grid-column: 1; grid-row: 2; text-align: left; margin-top: .3rem; } .cx-funnel .pp-bk-pkg__price s { display: inline; margin-right: .4rem; } .cx-funnel .pp-bk-pkg__desc { grid-row: 3; } .cx-funnel .pp-bk-pkg__details { grid-row: 4; } } /* ---- één stap tegelijk ---- */ /* Alle stappen staan onder elkaar op de pagina; alleen de inhoud van de actieve stap is uitgeklapt. Zo zie je in één blik hoeveel er nog komt, kun je terugscrollen naar wat je koos, en blijft het scherm rustig. */ .cx-funnel .pp-bk-step { display: block; } .cx-funnel .pp-bk-step__body { display: none; } .cx-funnel .pp-bk-step.cx-actueel > .pp-bk-step__body { display: block; } .cx-funnel .pp-bk-step.cx-actueel { border-color: rgba(196,154,84,.4); } /* afgerond: klikbaar, met een vinkje voor de titel */ .cx-funnel .pp-bk-step.is-klaar { border-color: rgba(196,154,84,.22); } /* nog niet aan de beurt: gedempt, geen muisaanwijzer */ /* Vergrendeld: gedempt maar leesbaar. Met opacity .5 werd de tekst grijs op grijs en verdween ook de rand. */ .cx-funnel .pp-bk-step.is-vergrendeld { opacity: 1; background: var(--cx-laag-1-dicht); border-color: rgba(246,243,234,.06); } .cx-funnel .pp-bk-step.is-vergrendeld .pp-bk-step__hint { color: rgba(207,201,192,.7); } .cx-funnel .pp-bk-step.is-vergrendeld .pp-bk-step__head { cursor: default; } /* Nog niet aan de beurt: zichtbaar maar duidelijk buiten bereik. */ .cx-funnel .pp-bk-step.is-vergrendeld .pp-bk-step__title { color: var(--pp-muted); } .cx-stapnav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid var(--pp-line-soft); } .cx-stapnav__door { display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.7rem; border-radius: 999px; border: 2px solid #14130F; background: linear-gradient(140deg, var(--cx-goud-2), var(--cx-goud)); color: #14130F; font: inherit; font-weight: 800; font-size: .95rem; cursor: pointer; box-shadow: 5px 5px 0 #14130F; transition: transform .12s var(--ease), box-shadow .12s var(--ease); } .cx-stapnav__door:hover:not(:disabled) { transform: translate(3px,3px); box-shadow: 2px 2px 0 #14130F; } .cx-stapnav__door:disabled { opacity: .45; cursor: not-allowed; box-shadow: 3px 3px 0 rgba(20,19,17,.6); } .cx-stapnav__terug { background: none; border: 0; padding: .4rem 0; color: var(--pp-muted); cursor: pointer; font: inherit; font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .cx-stapnav__terug:hover { color: var(--cx-goud-2); } .cx-stapnav__hint { font-size: .8rem; color: var(--pp-muted); } /* Verwijst naar het overzicht zonder een richting te noemen: dat staat op desktop rechts en op mobiel onder de stappen. */ .cx-stapnav__naar { display: inline-flex; align-items: center; gap: .4rem; background: none; border: 0; padding: .4rem 0; font: inherit; font-size: .8rem; font-weight: 700; color: var(--cx-goud-2); cursor: pointer; } .cx-stapnav__naar:hover { color: var(--pp-white); } .cx-stapnav__naar svg { transition: transform .15s var(--ease); } .cx-stapnav__naar:hover svg { transform: translateX(3px); } @media (max-width: 1023px) { .cx-stapnav__naar:hover svg { transform: translateY(3px); } } /* ---- tentmaten als rijen ---- */ .cx-funnel .pp-bk-tents { grid-template-columns: minmax(0,1fr); gap: .7rem; } .cx-funnel .pp-bk-tent { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; column-gap: 1.2rem; padding: 1rem 1.3rem; text-align: left; border-radius: 14px; } .cx-funnel .pp-bk-tent__size { grid-column: 1; grid-row: 1; font-size: var(--fs-18); font-weight: 800; } .cx-funnel .pp-bk-tent__gasten { grid-column: 1; grid-row: 2; margin-top: .2rem; font-size: .88rem; font-weight: 600; color: var(--cx-goud-2); } .cx-funnel .pp-bk-tent__price { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; font-size: var(--fs-18); white-space: nowrap; padding-right: 2rem; } .cx-funnel .pp-bk-tent__check { top: 50%; right: 1.2rem; transform: translateY(-50%); } /* knop die nog niet kan: gedempt, maar wel klikbaar (brengt je naar de stap) */ .cx-funnel .pp-bk-calc.cx-wacht { opacity: .6; border-style: dashed; } .cx-funnel .pp-bk-calc.cx-wacht:hover { opacity: 1; } /* rustige uitleg in het overzicht zolang er nog geen knop nodig is */ .cx-funnel .cx-overzicht-hint { margin: 0 0 .2rem; font-size: .78rem; color: var(--pp-muted); text-align: center; } /* Laagopbouw van de funnel. De vlakken lagen alle drie binnen een luminantie van .005 tot .013, dus het verschil tussen sectie, stapkaart en keuzeblok was met 1,12 contrast praktisch onzichtbaar: je zag ze alleen aan hun randen. Deze drie tinten trappen met ruim 1,4 per stap, wat de kaarten leesbaar maakt als losse, aanraakbare vlakken zonder de donkere sfeer op te geven. Warme ondertoon vasthouden, geen grijs. Draai je hieraan, houd dan de volgorde 0 < gesloten < 1 < 2 aan. */ :root { --cx-laag-1: #302D29; /* stapkaart, open */ --cx-laag-1-dicht: #211F1C; /* stapkaart, vergrendeld */ --cx-laag-2: #443F39; /* keuzeblok en invoerveld op de stapkaart */ } .cx-funnel [hidden] { display: none !important; } /* ========================================================================== Footer van de funnel: rustig afsluiten, niets om op weg te klikken ========================================================================== */ .cxf-kaal { border-top: 1px solid rgba(196,154,84,.2); background: #0B0A09; margin-top: clamp(3rem,6vw,5rem); } .cxf-kaal__in { max-width: var(--container); margin-inline: auto; padding: 1.6rem clamp(1rem,4vw,2rem); display: grid; gap: .8rem; justify-items: center; text-align: center; } .cxf-kaal__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.4rem; } .cxf-kaal__links a { font-size: .78rem; color: var(--pp-muted); text-decoration: none; } .cxf-kaal__links a:hover { color: var(--cx-goud-2); } .cxf-kaal__copy { margin: 0; font-size: .72rem; color: rgba(207,201,192,.55); } /* geen zwevende WhatsApp-knop tijdens het boeken */ .cx-funnel ~ .ppt-wa-float, body:has(.cx-funnel) .ppt-wa-float { display: none; } /* ========================================================================== Funnel op mobiel — de meeste bezoekers komen hier op hun telefoon binnen ========================================================================== */ @media (max-width: 899px) { /* gouden vlak achter het overzicht subtieler */ .cx-funnel .pp-bk-summary__inner { box-shadow: 5px 5px 0 var(--cx-goud), 10px 14px 24px rgba(0,0,0,.45); padding: 1.2rem 1.2rem 1.4rem; } .cx-funnel .pp-bk-summary { margin-top: 1.4rem; } } @media (max-width: 599px) { .cx-funnel .pp-bk-step__head { padding: 1rem 1.1rem; } .cx-funnel .pp-bk-step__body { padding: 1.1rem 1.1rem 1.2rem; } /* pakketkaart: naam, prijs, tekst, dan het rondje rechtsonder */ .cx-funnel .pp-bk-pkg { padding: .95rem 1.05rem 2.4rem; } .cx-funnel .pp-bk-pkg__name { font-size: var(--fs-18); } .cx-funnel .pp-bk-pkg__price { font-size: 1.3rem; } .cx-funnel .pp-bk-pkg__radio { bottom: .85rem; right: 1.05rem; } .cx-funnel .pp-bk-pkg__flag { left: 1.1rem; } /* tentmaten: maat en personen links, prijs rechts */ .cx-funnel .pp-bk-tent { padding: .9rem 3rem .9rem 1.1rem; } .cx-funnel .pp-bk-tent__size { font-size: var(--fs-16); } .cx-funnel .pp-bk-tent__price { font-size: var(--fs-16); padding-right: 0; } .cx-funnel .pp-bk-tent__check { right: .9rem; } /* extra's blijven ook op een telefoon brede rijen */ .cx-funnel .pp-bk-extras { grid-template-columns: minmax(0,1fr); gap: .5rem; } /* knoprij onder de stap */ .cx-stapnav { flex-wrap: wrap; gap: .8rem; } .cx-stapnav__door { width: 100%; justify-content: center; order: -1; } .cx-stapnav__terug { width: 100%; text-align: center; } /* stappenbalk compact: alleen bollen, actieve stap met naam */ } /* ---- kop en funnel dichter op elkaar ---- */ .cx-funnel .cx-paginahero { padding-block: clamp(1.8rem,3vw,2.6rem) clamp(1rem,2vw,1.4rem); } .cx-funnel .pp-bk { padding-block: 0 clamp(2.5rem,5vw,4rem); } /* ========================================================================== Checkout (/boeking-afronden/) ========================================================================== */ .cx-ck__body { margin-top: 1.6rem; } .cx-checkout .woocommerce { display: block; } .cx-checkout form.checkout { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); gap: clamp(1.4rem,3vw,2.4rem); align-items: start; } .cx-checkout #customer_details { min-width: 0; } .cx-checkout #customer_details, .cx-checkout .woocommerce-checkout-review-order { background: var(--pp-surface-2); border: 2px solid rgba(20,19,17,.9); border-radius: 18px; padding: clamp(1.3rem,3vw,1.9rem); } .cx-checkout #order_review { position: sticky; top: 20px; background: var(--pp-surface-2); border: 2px solid rgba(20,19,17,.9); border-radius: 18px; padding: clamp(1.3rem,3vw,1.9rem); box-shadow: 9px 9px 0 var(--cx-goud), 14px 18px 34px rgba(0,0,0,.5); } .cx-checkout #order_review_heading { margin: 0 0 1.1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--pp-line-soft); } .cx-checkout .woocommerce-checkout-review-order { background: none; border: 0; padding: 0; } .cx-checkout h3, .cx-checkout .woocommerce-billing-fields h3 { font-size: var(--fs-18); font-weight: 800; letter-spacing: -.015em; margin: 0 0 1.1rem; } .cx-checkout label { font-size: .76rem; font-weight: 700; color: var(--pp-muted); } .cx-checkout .form-row { margin-bottom: .9rem; } .cx-checkout input[type=text], .cx-checkout input[type=email], .cx-checkout input[type=tel], .cx-checkout textarea, .cx-checkout select, .cx-checkout .select2-selection { width: 100%; padding: .75rem .95rem; border-radius: 12px; border: 1px solid var(--pp-line); background: rgba(20,19,17,.5); color: var(--pp-white); font: inherit; font-size: .9rem; } .cx-checkout input:focus, .cx-checkout textarea:focus, .cx-checkout select:focus { outline: none; border-color: var(--cx-goud); box-shadow: 0 0 0 3px rgba(196,154,84,.16); } .cx-checkout table.shop_table { width: 100%; border-collapse: collapse; font-size: .88rem; } .cx-checkout table.shop_table th, .cx-checkout table.shop_table td { padding: .55rem 0; text-align: left; border-bottom: 1px solid var(--pp-line-soft); } .cx-checkout table.shop_table tfoot .order-total th, .cx-checkout table.shop_table tfoot .order-total td { border-bottom: 0; padding-top: 1rem; font-size: var(--fs-18); font-weight: 800; color: var(--cx-goud-2); } .cx-checkout #place_order, .cx-checkout .button.alt { display: block; width: 100%; margin-top: 1.2rem; padding: 1rem 1.6rem; border-radius: 999px; border: 2px solid #14130F; background: linear-gradient(140deg, var(--cx-goud-2), var(--cx-goud)); color: #14130F !important; font: inherit; font-weight: 800; font-size: 1rem; cursor: pointer; box-shadow: 5px 5px 0 #14130F; transition: transform .12s var(--ease), box-shadow .12s var(--ease); } .cx-checkout #place_order:hover { transform: translate(3px,3px); box-shadow: 2px 2px 0 #14130F; } .cx-checkout .woocommerce-privacy-policy-text, .cx-checkout .woocommerce-terms-and-conditions-wrapper { font-size: .78rem; color: var(--pp-muted); } .cx-checkout .woocommerce-info, .cx-checkout .woocommerce-error, .cx-checkout .woocommerce-message { border-radius: 14px; border: 1px solid var(--pp-line); background: rgba(196,154,84,.08); padding: .9rem 1.1rem; font-size: .86rem; list-style: none; margin: 0 0 1.2rem; } /* WooCommerce zet in zo'n melding zijn eigen knop ('Bekijk winkelwagen'), die standaard wit is. Hem meteen in de vormtaal trekken, anders springt er een witte blok uit een verder zwart/gouden pagina. */ .cx-checkout .woocommerce-info .button, .cx-checkout .woocommerce-error .button, .cx-checkout .woocommerce-message .button, .cx-checkout .wc-forward { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1.1rem; border-radius: 999px; border: 1px solid var(--cx-goud); background: transparent; color: var(--cx-goud-2) !important; font: inherit; font-weight: 700; font-size: .82rem; text-decoration: none; cursor: pointer; box-shadow: none; transition: background .15s var(--ease), color .15s var(--ease); } .cx-checkout .woocommerce-message .button:hover, .cx-checkout .wc-forward:hover { background: var(--cx-goud); color: #14130F !important; } @media (max-width: 1023px) { .cx-checkout form.checkout { grid-template-columns: minmax(0,1fr); } .cx-checkout #order_review { position: static; box-shadow: 5px 5px 0 var(--cx-goud), 10px 14px 24px rgba(0,0,0,.45); } } /* ========================================================================== Bevestiging (thankyou.php) ========================================================================== */ .cx-bevestiging .pp-thanks { max-width: 720px; margin-inline: auto; text-align: center; } .cx-bevestiging .pp-thanks__title { font-size: clamp(1.9rem,1.3rem+2.4vw,2.8rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: 0 0 1rem; } .cx-bevestiging .pp-thanks__lead { color: var(--pp-muted); font-size: var(--fs-16); margin: 0 auto 2rem; max-width: 52ch; } .cx-bevestiging .pp-thanks__lead strong { color: var(--pp-white); } .cx-bevestiging .pp-thanks__card { position: relative; text-align: left; border: 2px solid rgba(20,19,17,.9); border-radius: 18px; background: var(--pp-surface-2); padding: clamp(1.3rem,3vw,1.8rem); box-shadow: 9px 9px 0 var(--cx-goud), 14px 18px 34px rgba(0,0,0,.5); margin-bottom: 2.6rem; } .cx-bevestiging .pp-thanks__card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--pp-line-soft); font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } .cx-bevestiging .pp-thanks__ordernr { color: var(--cx-goud-2); } .cx-bevestiging .pp-thanks__rows { margin: 0; display: grid; gap: .5rem; font-size: .9rem; } .cx-bevestiging .pp-thanks__rows > div { display: flex; justify-content: space-between; gap: 1rem; } .cx-bevestiging .pp-thanks__rows dt { color: var(--pp-muted); margin: 0; } .cx-bevestiging .pp-thanks__rows dd { margin: 0; text-align: right; } .cx-bevestiging .pp-thanks__total { margin-top: .6rem; padding-top: .8rem; border-top: 1px solid var(--pp-line-soft); font-weight: 800; font-size: var(--fs-18); } .cx-bevestiging .pp-thanks__total dd { color: var(--cx-goud-2); } .cx-bevestiging .pp-thanks__note { margin: 1.1rem 0 0; font-size: .78rem; color: var(--pp-muted); } /* De markup is:

kop

  1. …
. Eerder mikte deze CSS op "elk direct kind is een kaart", waardoor de kop zelf een kolom werd, alle stappen in de tweede kolom geperst raakten en de derde kolom leeg bleef. Nu staat de kop bóven het raster en is elk
  • de kaart. */ .cx-bevestiging .pp-thanks__steps { text-align: left; margin-bottom: 2.4rem; } .cx-bevestiging .pp-thanks__steps h2 { font-size: var(--fs-22); font-weight: 800; letter-spacing: -.015em; margin: 0 0 1.1rem; } .cx-bevestiging .pp-thanks__steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0,1fr); gap: .8rem; } /* Icoon links, tekst rechts: de rij is nu breed, dus naast elkaar leest beter dan onder elkaar en het houdt de drie kaarten laag. */ .cx-bevestiging .pp-thanks__steps li { min-width: 0; border: 1px solid var(--pp-line); border-radius: 16px; background: rgba(46,44,40,.55); padding: 1.1rem 1.3rem; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 1rem; align-items: start; } .cx-bevestiging .pp-thanks__steps li.is-done { border-color: rgba(196,154,84,.55); } .cx-bevestiging .pp-thanks__steps li > div { display: grid; gap: .25rem; } .cx-bevestiging .pp-thanks__steps li strong { font-size: var(--fs-16); font-weight: 800; color: var(--pp-white); line-height: 1.3; } .cx-bevestiging .pp-thanks__steps li span:not(.pp-thanks__step-ico) { font-size: .84rem; color: var(--pp-muted); line-height: 1.5; overflow-wrap: break-word; } .cx-bevestiging .pp-thanks__step-ico { display: grid; place-content: center; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(140deg, var(--cx-goud-2), var(--cx-goud)); color: #14130F; } .cx-bevestiging .pp-thanks__step-ico svg { width: 19px; height: 19px; } .cx-bevestiging .pp-thanks__contact-btns { display: flex; justify-content: center; gap: .8rem 1.2rem; flex-wrap: wrap; margin: 1rem 0 1.4rem; } .cx-bevestiging .pp-thanks__home { font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pp-muted); text-decoration: none; } .cx-bevestiging .pp-thanks__home:hover { color: var(--cx-goud-2); } @media (max-width: 767px) { .cx-bevestiging .pp-thanks__card { box-shadow: 5px 5px 0 var(--cx-goud), 10px 14px 24px rgba(0,0,0,.45); } } /* ========================================================================== Blog ========================================================================== */ .cx-chips--tabs { margin-bottom: 2rem; } .cx-chip.is-actief { border-color: var(--cx-goud); background: linear-gradient(140deg, var(--cx-goud-2), var(--cx-goud)); color: #14130F; } .cx-posts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.6rem; } .cx-post { display: flex; flex-direction: column; border: 2px solid rgba(20,19,17,.9); border-radius: 18px; overflow: hidden; background: rgba(46,44,40,.55); text-decoration: none; min-width: 0; transition: transform .18s var(--ease), border-color .18s, box-shadow .18s var(--ease); } .cx-post:hover { transform: translateY(-5px); border-color: var(--cx-goud); box-shadow: 0 14px 34px rgba(0,0,0,.5); } .cx-post__beeld { position: relative; display: block; background: rgba(255,255,255,.04); } .cx-post__beeld img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; } .cx-post__cat { position: absolute; top: .8rem; left: .8rem; padding: .28rem .8rem; border-radius: 999px; background: linear-gradient(140deg, var(--cx-goud-2), var(--cx-goud)); color: #14130F; border: 2px solid #14130F; font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .cx-post__in { display: flex; flex-direction: column; gap: .5rem; padding: 1.2rem 1.3rem 1.4rem; flex: 1; } .cx-post__titel { font-size: var(--fs-18); font-weight: 800; color: var(--pp-white); line-height: 1.25; } .cx-post__meta { margin-top: auto; font-size: .76rem; color: var(--pp-muted); } .cx-paginatie { margin-top: 2.6rem; } .cx-paginatie .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; } .cx-paginatie .page-numbers { display: grid; place-content: center; min-width: 42px; height: 42px; padding: 0 .8rem; border-radius: 999px; border: 1px solid var(--pp-line); color: var(--pp-white); text-decoration: none; font-size: .86rem; font-weight: 700; } .cx-paginatie .page-numbers:hover { border-color: var(--cx-goud); color: var(--cx-goud-2); } .cx-paginatie .page-numbers.current { background: linear-gradient(140deg, var(--cx-goud-2), var(--cx-goud)); color: #14130F; border-color: #14130F; } .cx-paginatie .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* brede prose op lichte achtergrond (voorwaarden, privacy) */ .cx-prose--breed { max-width: 78ch; margin-inline: auto; } .cx-prose--breed h2, .cx-prose--breed h3 { text-transform: none; letter-spacing: 0; } @media (max-width: 899px) { .cx-posts { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 599px) { .cx-posts { grid-template-columns: minmax(0,1fr); } } /* ========================================================================== Blogartikel ========================================================================== */ .cx-postkop { position: relative; padding-block: clamp(3rem,7vw,5.5rem); overflow: hidden; } .cx-postkop__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .cx-postkop__waas { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(16,15,14,.72), rgba(16,15,14,.93)); } .cx-postkop__in { position: relative; z-index: 2; } .cx-postkop__cat { display: inline-block; margin-bottom: .9rem; padding: .3rem .9rem; border-radius: 999px; background: linear-gradient(140deg, var(--cx-goud-2), var(--cx-goud)); color: #14130F; font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .cx-postkop h1 { font-size: clamp(1.9rem,1.3rem+2.6vw,3rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: 0 0 1.1rem; max-width: 22ch; } .cx-postkop .cx-kruimel { margin: 0; } .cx-postauteur { display: flex; align-items: center; gap: .7rem; padding-block: 1.2rem; font-size: .82rem; color: var(--pp-muted); border-bottom: 1px solid var(--pp-line-soft); } .cx-postauteur strong { color: var(--pp-white); } .cx-postauteur__ico { display: grid; place-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(196,154,84,.16); color: var(--cx-goud-2); flex: none; } .cx-postbody { padding-block: clamp(2rem,4vw,3rem); } .cx-post__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.34fr); gap: clamp(1.6rem,4vw,3rem); align-items: start; } .cx-post__hoofd { min-width: 0; } .cx-post__prose { color: var(--pp-muted); font-size: var(--fs-16); } .cx-post__prose h2, .cx-post__prose h3 { color: var(--pp-white); margin-top: 2rem; } .cx-post__prose a { color: var(--cx-goud-2); text-decoration: underline; } .cx-post__prose img { border-radius: 14px; } .cx-tldr { border-left: 3px solid var(--cx-goud); border-radius: 0 14px 14px 0; background: rgba(196,154,84,.08); padding: 1.1rem 1.3rem; margin-bottom: 1.8rem; } .cx-tldr__label { display: block; margin-bottom: .35rem; font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--cx-goud-2); } .cx-tldr__tekst { margin: 0; font-size: .95rem; color: var(--pp-white); } .cx-toc { border: 1px solid var(--pp-line); border-radius: 14px; background: rgba(46,44,40,.5); padding: .9rem 1.1rem; margin-bottom: 1.8rem; } .cx-toc summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .cx-toc summary::-webkit-details-marker { display: none; } .cx-toc__pijl { width: 8px; height: 8px; border-right: 2px solid var(--cx-goud-2); border-bottom: 2px solid var(--cx-goud-2); transform: rotate(45deg); transition: transform .2s; } .cx-toc[open] .cx-toc__pijl { transform: rotate(-135deg); } .cx-toc ol { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .4rem; } .cx-toc a { display: flex; gap: .5rem; font-size: .84rem; color: var(--pp-muted); text-decoration: none; } .cx-toc a:hover { color: var(--cx-goud-2); } .cx-toc__nr { color: var(--cx-goud-2); font-weight: 800; flex: none; } .cx-toc__item--n3 { padding-left: 1rem; } /* De zijkolom plakt als geheel. Alleen de inhoudsopgave sticky maken ging mis bij lange artikelen: die bleef staan terwijl de CTA-kaart eronder gewoon meescrollde en dwars over de lijst heen liep. Nu is de kolom één sticky blok met een eigen maximum, zodat inhoudsopgave en kaart altijd bij elkaar staan. */ .cx-toc--vast { position: static; } .cx-toc--inline { display: block; } @media (min-width: 900px) { .cx-toc--inline { display: none; } } .cx-bloglocaties { margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--pp-line-soft); } .cx-bloglocaties__titel { display: block; margin-bottom: .9rem; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .cx-chip--alle { border-color: var(--cx-goud); color: var(--cx-goud-2); } .cx-postnav { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; margin-top: 2.4rem; } .cx-postnav__link { display: grid; gap: .3rem; padding: 1.1rem 1.3rem; border-radius: 16px; border: 1px solid var(--pp-line); background: rgba(46,44,40,.5); text-decoration: none; transition: border-color .15s, background .15s; } .cx-postnav__link:hover { border-color: var(--cx-goud); background: rgba(196,154,84,.1); } .cx-postnav__link--next { text-align: right; } .cx-postnav__richting { font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--cx-goud-2); } .cx-postnav__titel { font-size: .9rem; font-weight: 700; color: var(--pp-white); } .cx-post__zij { display: grid; gap: 1.4rem; min-width: 0; } .cx-post__cta { border: 2px solid rgba(20,19,17,.9); border-radius: 18px; background: linear-gradient(180deg, rgba(58,55,50,.75), rgba(38,36,33,.9)); padding: 1.4rem 1.4rem 1.6rem; text-align: center; box-shadow: 7px 7px 0 var(--cx-goud); } .cx-post__cta-logo { margin: 0 auto .8rem; } .cx-post__cta strong { display: block; margin-bottom: .5rem; font-size: var(--fs-16); } .cx-post__cta p { font-size: .84rem; color: var(--pp-muted); margin: 0 0 1.1rem; } @media (max-width: 899px) { .cx-post__grid { grid-template-columns: minmax(0,1fr); } .cx-toc--vast { display: none; } .cx-postnav { grid-template-columns: minmax(0,1fr); } .cx-postnav__link--next { text-align: left; } .cx-post__cta { box-shadow: 5px 5px 0 var(--cx-goud); } } /* ========================================================================== Events en drankspellen ========================================================================== */ .cx-eventfilters { margin-bottom: 2rem; } .cx-eventfilters .cx-chip { cursor: pointer; font: inherit; font-size: .82rem; font-weight: 700; } .cx-events, .cx-spellen { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.6rem; } .cx-event, .cx-spel { display: flex; flex-direction: column; border: 2px solid rgba(20,19,17,.9); border-radius: 18px; overflow: hidden; background: rgba(46,44,40,.55); text-decoration: none; min-width: 0; transition: transform .18s var(--ease), border-color .18s, box-shadow .18s var(--ease); } .cx-event:hover, .cx-spel:hover { transform: translateY(-5px); border-color: var(--cx-goud); box-shadow: 0 14px 34px rgba(0,0,0,.5); } .cx-event__beeld, .cx-spel__beeld { position: relative; display: block; } .cx-event__beeld img, .cx-spel__beeld img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; } .cx-event__badge, .cx-event__fotos { position: absolute; top: .8rem; padding: .28rem .8rem; border-radius: 999px; font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .cx-event__badge { left: .8rem; background: linear-gradient(140deg, var(--cx-goud-2), var(--cx-goud)); color: #14130F; border: 2px solid #14130F; } .cx-event__fotos { right: .8rem; background: rgba(20,19,17,.9); color: var(--cx-goud-2); border: 1px solid rgba(214,170,94,.5); } .cx-event__titel, .cx-spel__titel { display: block; padding: 1rem 1.2rem 0; font-size: var(--fs-18); font-weight: 800; color: var(--pp-white); line-height: 1.25; } .cx-event__link, .cx-spel__cta { display: block; padding: .8rem 1.2rem 1.2rem; margin-top: auto; font-size: .82rem; font-weight: 800; letter-spacing: .06em; color: var(--cx-goud-2); text-decoration: none; } .cx-spel__in, .cx-spel__tekst { padding: 0 1.2rem; font-size: .86rem; color: var(--pp-muted); } @media (max-width: 899px) { .cx-events, .cx-spellen { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 599px) { .cx-events, .cx-spellen { grid-template-columns: minmax(0,1fr); } } /* ========================================================================== Single event + single drankspel De galerij (pp-event-gallery) en het spel (pp-game) houden hun eigen klassen: daar hangt JS aan. Hier alleen de omlijsting in onze vormtaal. ========================================================================== */ .cx-chips--stil { margin: 1.4rem 0 1.3rem; } .cx-chips--stil .cx-chip { cursor: default; pointer-events: none; } /* Let op: geen .cx-prose gebruiken in deze hero. Die is voor de lichte secties en zet donkergrijze tekst, die op zwart wegvalt. */ .cx-event__tekst { margin-bottom: 1.6rem; color: var(--pp-muted); font-size: var(--fs-16); line-height: 1.65; } .cx-event__tekst p { margin: 0 0 .9rem; } .cx-event__tekst p:last-child { margin-bottom: 0; } .cx-event__tekst strong { color: var(--pp-white); } .cx-event__tekst a { color: var(--cx-goud-2); text-decoration: underline; } /* Spelkaart op het gouden vlak; de stage zelf wordt door JS gevuld. */ .cx-spel__speel { display: grid; gap: 1.4rem; max-width: 760px; } .cx-spel__speel .pp-game__intro { margin: 0; } .cx-spel__speel .pp-game__card { border: 1px solid rgba(246,243,234,.14); border-radius: 18px; background: var(--cx-laag-1); padding: clamp(1.4rem,3vw,2.2rem); box-shadow: 6px 6px 0 var(--cx-goud), 12px 18px 34px rgba(0,0,0,.5); } .cx-spel__speel .pp-game__num { display: inline-block; padding: .3rem .8rem; border-radius: 999px; background: rgba(196,154,84,.16); border: 1px solid rgba(196,154,84,.4); color: var(--cx-goud-2); font-size: .68rem; letter-spacing: .12em; margin-bottom: 1.1rem; } .cx-spel__speel .pp-game__q h3 { font-size: clamp(1.15rem,1rem+.9vw,1.5rem); line-height: 1.32; letter-spacing: -.015em; margin-bottom: 1.6rem; } .cx-spel__speel .pp-game__answers { gap: .65rem; } .cx-spel__speel .pp-game__ans { background: var(--cx-laag-2); border: 1px solid rgba(246,243,234,.16); padding: 1.05rem 1.3rem; border-radius: 14px; text-align: left; transition: border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease); } .cx-spel__speel .pp-game__ans:hover:not(:disabled) { border-color: var(--cx-goud); background: rgba(196,154,84,.12); transform: translateX(3px); } .cx-spel__speel .pp-game__ans.is-correct { border-color: var(--pp-ok); background: rgba(88,179,104,.18); } .cx-spel__speel .pp-game__ans.is-wrong { border-color: #d9534f; background: rgba(217,83,79,.18); } .cx-spel__speel .pp-game__intro { text-align: center; max-width: 54ch; margin-inline: auto; } .cx-spel__speel .pp-game__disclaimer { margin: 0; font-size: .78rem; color: var(--pp-muted); } @media (max-width: 599px) { .cx-spel__speel .pp-game__card { padding: 1.1rem; } } /* De vier spec-tegels in "in het kort" blijven ook op mobiel met z'n tweeën: de waarden zijn kort en vier tegels onder elkaar maakt de sectie onnodig lang. Deze regel moet ná het algemene mobiele blok staan dat .cx-specs op één kolom zet. */ @media (max-width: 599px) { .cx-kort .cx-specs { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .7rem; } .cx-kort .cx-spec { padding: .9rem .85rem 1rem; } .cx-kort .cx-spec__label { font-size: .95rem; } .cx-kort .cx-spec__waarde { font-size: 1.25rem; } .cx-kort .cx-spec__oud { display: block; margin: .1rem 0 0; font-size: .72rem; } .cx-kort .cx-spec__extra { font-size: .64rem; } .cx-kort .cx-spec__vlag { top: -10px; right: -6px; } } /* Vangnet: .cx-prose is voor de lichte secties gemaakt (donkergrijze tekst op crème). Belandt hij toch in een donkere sectie of hero, dan keren we de kleuren om. Zonder dit valt de tekst weg in het zwart. */ .cx-sec--donker .cx-prose, .cx-hero .cx-prose, .cx-page > .cx-sec:not(.cx-sec--licht) .cx-prose { color: var(--pp-muted); } .cx-sec--donker .cx-prose h2, .cx-sec--donker .cx-prose h3, .cx-hero .cx-prose h2, .cx-hero .cx-prose h3, .cx-page > .cx-sec:not(.cx-sec--licht) .cx-prose h2, .cx-page > .cx-sec:not(.cx-sec--licht) .cx-prose h3 { color: var(--pp-white); } .cx-sec--donker .cx-prose strong, .cx-hero .cx-prose strong, .cx-page > .cx-sec:not(.cx-sec--licht) .cx-prose strong { color: var(--pp-white); } .cx-sec--donker .cx-prose a, .cx-hero .cx-prose a, .cx-page > .cx-sec:not(.cx-sec--licht) .cx-prose a { color: var(--cx-goud-2); } /* Vangnet lange klantinvoer: e-mailadressen en URL's zijn aaneengesloten strings die zonder dit de kaart uit lopen. */ .cx-bevestiging .pp-thanks__rows dd, .cx-bevestiging .pp-thanks__card, .cx-funnel .pp-bk-summary__value, .cx-funnel .pp-bk-summary li { overflow-wrap: anywhere; } /* .pp-accent is het accent uit de oude stylesheet (gradient in de letters zelf) en staat nog in een paar koppen. Binnen onze pagina's krijgt het dezelfde marker; de text-fill moet expliciet terug, anders blijven de letters doorzichtig door de background-clip uit main.css. */ .cx-page .pp-accent { -webkit-text-fill-color: currentColor; color: inherit; -webkit-background-clip: border-box; background-clip: border-box; background: none; font-family: 'Josefin Sans', 'Century Gothic', sans-serif; font-weight: 600; font-size: 1.06em; line-height: .95; letter-spacing: .02em; padding: 0 .04em; color: var(--cx-goud-2) !important; -webkit-text-fill-color: var(--cx-goud-2); -webkit-text-stroke: .012em var(--cx-goud-2); paint-order: stroke fill; } .cx-page .cx-sec--licht .pp-accent { color: var(--pp-gold-deep) !important; -webkit-text-fill-color: var(--pp-gold-deep); -webkit-text-stroke-color: var(--pp-gold-deep); } /* Toetsenbordfocus in de huisstijl; de blauwe standaardring van de browser viel uit de toon op dit donkere ontwerp. */ .cx-funnel :focus-visible, .cx-page :focus-visible { outline: 2px solid var(--cx-goud-2); outline-offset: 2px; border-radius: 4px; } /* Op desktop staat het overzicht naast de funnel; deze knop heeft daar geen functie. Alleen op smalle schermen tonen, waar het overzicht eronder valt. */ .cx-stapnav--slot { display: none; } @media (max-width: 1023px) { .cx-stapnav--slot { display: flex; justify-content: flex-end; margin-top: 1.2rem; } } /* Het aanbevolen pakket had alleen een gouden randje en viel daardoor nauwelijks op tussen de twee andere kaarten. Een warme onderlaag met een zweem goud zet het apart zonder de rustige, donkere opzet te breken. */ .cx-funnel .pp-bk-pkg.is-featured { background: linear-gradient(165deg, rgba(196,154,84,.14), var(--cx-laag-2) 58%); border-color: rgba(196,154,84,.75); } .cx-funnel .pp-bk-pkg.is-featured:hover { border-color: var(--cx-goud); } .cx-funnel .pp-bk-pkg.is-featured .pp-bk-pkg__name { color: var(--pp-white); } /* ========================================================================== Melding linksonder (social proof) Stond nog in de oude vormtaal: vlakke kaart, zachte schaduw, drie regels waarvan de middelste afbrak. Nu de cx-signatuur (gouden offset-schaduw, dezelfde laagkleur als de funnelkaarten) en compacter: naam op regel 1, pakket en tijd samen op regel 2. ========================================================================== */ .ppt-proof { gap: .8rem; padding: .85rem 2.4rem .85rem .85rem; border-radius: 16px; background: var(--cx-laag-1); border: 1px solid rgba(196,154,84,.34); box-shadow: 5px 5px 0 var(--cx-goud), 10px 16px 30px rgba(0,0,0,.5); width: min(320px, calc(100vw - 24px)); align-items: center; } .ppt-proof__icon { width: 34px; height: 34px; border: 0; background: linear-gradient(140deg, var(--cx-goud-2), var(--cx-goud)); color: #14130F; } .ppt-proof__icon svg { width: 17px; height: 17px; stroke-width: 3; } .ppt-proof__name { font-size: .92rem; font-weight: 800; letter-spacing: -.01em; } .ppt-proof__act { font-size: .82rem; color: var(--pp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ppt-proof__act b { color: var(--cx-goud-2); font-weight: 700; } .ppt-proof__body { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .5rem; row-gap: .12rem; } .ppt-proof__name { flex: 0 0 100%; } .ppt-proof__act { flex: 0 1 auto; } .ppt-proof__time { flex: 0 0 100%; margin-top: .18rem; font-size: .7rem; } .ppt-proof__close { top: .5rem; right: .55rem; font-size: 1.05rem; } @media (max-width: 599px) { .ppt-proof { width: min(300px, calc(100vw - 20px)); padding: .75rem 2.2rem .75rem .75rem; box-shadow: 4px 4px 0 var(--cx-goud), 8px 12px 24px rgba(0,0,0,.5); } .ppt-proof__icon { width: 30px; height: 30px; } .ppt-proof__name { font-size: .86rem; } .ppt-proof__act { font-size: .76rem; } } /* Gelegenheden onder de plaatslinks op een stadspagina. */ .cx-gelegenheden { margin-top: 1.8rem; padding-top: 1.6rem; border-top: 1px solid var(--pp-line-soft); } .cx-gelegenheden__kop { margin: 0 0 .9rem; font-size: .9rem; font-weight: 700; color: var(--pp-muted); } .cx-chip--goud { border-color: rgba(196,154,84,.6); color: var(--cx-goud-2); } /* Knoppen binnen lopende tekst. .cx-prose a kleurt en onderstreept elke link in de tekst, en pakte daarmee ook de knop in de tussenliggende banner: goudkleurige letters op een gouden vlak, mét onderstreping. Knoppen zijn geen tekstlinks, dus die uitzonderen. */ .cx-prose a.pp-btn, .cx-prose a.cx-btn, .cx-sec--donker .cx-prose a.pp-btn, .cx-sec--donker .cx-prose a.cx-btn, .cx-page > .cx-sec:not(.cx-sec--licht) .cx-prose a.pp-btn { text-decoration: none; } .cx-prose a.pp-btn--primary, .cx-prose a.cx-btn--goud, .cx-sec--donker .cx-prose a.pp-btn--primary, .cx-sec--donker .cx-prose a.cx-btn--goud, .cx-page > .cx-sec:not(.cx-sec--licht) .cx-prose a.pp-btn--primary { color: #14130F; } .cx-prose a.pp-btn--lijn, .cx-prose a.cx-btn--lijn, .cx-sec--donker .cx-prose a.cx-btn--lijn { color: var(--pp-white); } /* Vragen die iemand nog tegenhouden, onder de plaats- en gelegenheidslinks. */ .cx-bezwaren { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--pp-line-soft); } .cx-bezwaren__lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .5rem 1.6rem; } .cx-bezwaren__lijst a { color: var(--pp-cream); text-decoration: none; font-size: .92rem; display: inline-flex; align-items: baseline; gap: .45rem; } .cx-bezwaren__lijst a::before { content: '\2192'; color: var(--cx-goud-2); flex: none; } .cx-bezwaren__lijst a:hover { color: var(--cx-goud-2); } @media (max-width: 599px) { .cx-bezwaren__lijst { grid-template-columns: minmax(0,1fr); } } /* Ruimte voor de vlag op het aanbevolen pakket. De vlag hangt over de bovenrand van de kaart en had bij een korte tekst net genoeg lucht. Met een langere tekst ("70% kiest deze upgrade") botste hij tegen de pakketnaam eronder. De kaart krijgt daarom bovenaan extra ruimte, en de vlag zelf wordt compacter zodat hij binnen de kaartbreedte blijft. */ .cx-funnel .pp-bk-pkg.is-featured { padding-top: 1.75rem; } .cx-funnel .pp-bk-pkg__flag { letter-spacing: .06em; white-space: nowrap; max-width: calc(100% - 2.6rem); overflow: hidden; text-overflow: ellipsis; } .cx-pakkaart__vlag { letter-spacing: .07em; white-space: nowrap; max-width: calc(100% - 2.6rem); } @media (max-width: 599px) { .cx-funnel .pp-bk-pkg.is-featured { padding-top: 1.6rem; } .cx-funnel .pp-bk-pkg__flag { font-size: .54rem; letter-spacing: .04em; padding: .22rem .6rem; } } /* Spelkaarten op het drankspel-archief en de speltype-pagina's. De knop heeft een slagschaduw van 5px, maar er stond 2px ruimte onder en de kaart knipt af (overflow: hidden): de schaduw viel weg en de knop leek af te lopen. Titels van één of twee regels maakten de rijen bovendien ongelijk. */ .cx-spel__in { padding-bottom: 1.5rem; } .cx-spel__titel { display: block; min-height: 2.6em; } .cx-spel .pp-game-card__cta { margin-top: auto; align-self: flex-start; } @media (max-width: 599px) { .cx-spel__titel { min-height: 0; } } /* ========================================================================== Rekentools in de cx-vormtaal (7 pagina's: tentmaat, drank, bier, hapjes, budget, playlist, uitnodiging). Ze stonden nog in de oude opmaak: halfdoorzichtige invoervelden op een grijze kaart, een gewone slagschaduw en een klein radius. Nu dezelfde laagopbouw als de funnel (kaart op laag 1, velden op laag 2, allebei dekkend) en de gouden offset-schaduw die de rest van de site gebruikt. De uitkomst is het hart van een rekentool en krijgt daarom het meeste gewicht: die stond eerder als een fluisterzacht vlak onderaan. ========================================================================== */ .pp-tool-wrap { max-width: 820px; } /* Tools met twee kolommen hebben meer breedte nodig; op 820px werd elke kolom zo smal dat de knoppen gingen breken. */ .pp-tool-wrap--breed { max-width: 1140px; } .cx-page .pp-tool { background: var(--cx-laag-1); border: 1px solid rgba(246,243,234,.14); border-radius: 18px; padding: clamp(1.4rem,3vw,2.2rem); box-shadow: 6px 6px 0 var(--cx-goud), 12px 18px 34px rgba(0,0,0,.5); } /* Invoer: dekkend, zelfde tint als de keuzeblokken in de funnel. */ .cx-page .pp-tool__field input, .cx-page .pp-tool__field select { background: var(--cx-laag-2); border: 1px solid rgba(246,243,234,.18); border-radius: 12px; height: 52px; } .cx-page .pp-tool__field input:focus, .cx-page .pp-tool__field select:focus { border-color: var(--cx-goud); box-shadow: 0 0 0 3px rgba(196,154,84,.16); } .cx-page .pp-tool__field label { font-size: .82rem; letter-spacing: -.005em; } .cx-page .pp-tool__chip { background: var(--cx-laag-2); border: 1px solid rgba(246,243,234,.16); border-radius: 12px; padding: .7rem .85rem; } .cx-page .pp-tool__chip:hover { border-color: var(--cx-goud); } .cx-page .pp-tool__chip:has(input:checked) { border-color: var(--cx-goud); background: rgba(196,154,84,.16); } /* De uitkomst: het antwoord waarvoor iemand de pagina opende. */ .cx-page .pp-tool__result { margin-top: 1.6rem; padding: 1.4rem 1.5rem; border-radius: 16px; background: linear-gradient(165deg, rgba(196,154,84,.14), var(--cx-laag-2) 62%); border: 1px solid rgba(196,154,84,.45); } .cx-page .pp-tool__result h3 { font-size: clamp(1.3rem,1.1rem+1vw,1.75rem); letter-spacing: -.02em; color: var(--cx-goud-2); margin-bottom: .7rem; } .cx-page .pp-tool__result p { font-size: .95rem; } /* Knoppen: dezelfde vorm als de rest van de site. */ .cx-page .ppt-cta { padding: .85rem 1.4rem; border-radius: 999px; border: 1px solid rgba(196,154,84,.4); font-size: .92rem; transition: border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease); } .cx-page .ppt-cta:hover { border-color: var(--cx-goud); background: rgba(196,154,84,.1); } .cx-page .ppt-cta.primary { background: linear-gradient(140deg, var(--cx-goud-2), var(--cx-goud)); color: #14130F; border-color: var(--cx-goud); box-shadow: 3px 3px 0 #14130F; } .cx-page .ppt-cta.primary:hover { transform: translate(2px,2px); box-shadow: 1px 1px 0 #14130F; } .cx-page .pp-tool__submit, .cx-page .pp-tool #berekenBtn { margin-top: 1.4rem; } /* De uitleg onder de tool. */ .cx-page .pp-tool-content h2 { letter-spacing: -.02em; } .cx-page .pp-tool-content { max-width: 720px; } .cx-page .pp-tool__trust { gap: 1.2rem; margin-top: 1.3rem; } @media (max-width: 599px) { .cx-page .pp-tool { padding: 1.15rem; border-radius: 16px; box-shadow: 4px 4px 0 var(--cx-goud), 8px 12px 24px rgba(0,0,0,.5); } .cx-page .pp-tool__result { padding: 1.15rem 1.2rem; } } /* ========================================================================== Vijf rekentools met een eigen prefix (dc = drank, bc = bier, ec = hapjes, pg = playlist, ug = uitnodiging). Ze delen dezelfde opbouw maar hebben elk hun eigen inline CSS in de template, waardoor ze uit elkaar zijn gegroeid. Hier één vormtaal overheen. De .cx-page ervoor is nodig omdat de inline