/* ============================================================================
Bruuks Huus — Feest-transformatie (motor-CSS)
----------------------------------------------------------------------------
Poort van het GOEDGEKEURDE concept: _concepts/feest-transformatie-concept-v4.html
(totaalgedrag) + _concepts/logo-choreografie.html (logo-component, 2x).
PRINCIPE — één custom property stuurt alles.
--feest (0 = rustige basis-huisstijl, 1 = vol feest) wordt door GSAP scroll-
gescrubd getweend (feest-transformatie.js). Elke kleur hieronder is een
color-mix tussen de HUIDIGE basiskleur (bij --feest:0 exact de bestaande
waarde uit main.css/tokens.css, dus GEEN sprong in rust) en een feest-tint.
De achtergrond blijft LICHT (creme -> warmer creme); de feestkleur komt uit
grafische accenten (verf-strepen, logo, koppen, knoppen), niet uit een donkere
achtergrond.
ACTIVERING — alles is gescoped onder body.feest-evenement. Die class zet
header.php op evenement-detailpagina's (is_singular('evenement')); dit bestand
wordt daar ook alleen dan ge-enqueued. Dubbele veiligheid: op elke andere
pagina bestaat geen enkele regel hieronder.
Reduced-motion / geen-JS: --feest blijft 0 (rustige basis). Bij reduced-motion
zet de JS de eindstaat direct (--feest:1, --paint:1, logo-eindstand); geen scrub.
============================================================================ */
body.feest-evenement {
/* Transformatie-motor: GSAP tweent dit van 0 -> 1 */
--feest: 0;
/* Feest-accenten (bron: event-icoon.svg + Bruuks-Beats-lime). Leesbare
tekstvarianten hebben AA-contrast op creme; felle tinten zijn grafisch. */
--fe-diep: #A8451B; /* leesbare feest-kop/accenttekst (5,29:1 op creme) */
--fe-diep-2: #B8491A;
--fe-warm-meta: #7A5A3C; /* meta/label-tekst in feest */
--fe-btn: #C4371A; /* vibrante knop-vulling, wit erop ~4,6:1 */
--fe-badge: #E0531C;
--fe-oranje: #FF8811;
--fe-geel: #FFD400;
--fe-rood: #FF3B30;
--fe-koraal: #FF8848;
--fe-lime: #94C020;
/* Diepe warme "nacht" voor de donkere secties in feest-modus (Wave F2 punt 1):
geen groen meer — een chique aubergine/bruinrood die past bij de club-beelden.
Lichte tekst (--paper) hierop = hoog contrast. */
--fe-nacht: #2C1622;
--fe-nacht-2: #3A1C28; /* iets lichter, voor randen/scheiders op de donkere band */
}
/* Verf-strepen die zichzelf schilderen: eigen --paint per element (0..1),
scroll-getriggerd door de JS. Default 0 = onzichtbaar. */
body.feest-evenement [data-paint] { --paint: 0; }
/* ============================================================================
1. PAGINA-ACHTERGROND — blijft licht, wordt alleen warmer
main.css tekent de zichtbare achtergrond via body::before (opaak verloop);
we her-declareren dat verloop met een --feest-morph. Bij 0 exact gelijk aan
het origineel (#f8f4ec / --paper / --paper-2).
============================================================================ */
/* Benjamin-besluit (Wave F2, 2026-07-04): de feest-ACHTERGROND wordt ECHT WIT
(#FFFFFF) — "echt wit wit". Alle feest-warmte komt uit de ACCENTEN (verf-
strepen, slinger, kleurrijke knoppen/labels/donkere secties), NIET uit de
achtergrond. De feest-eindtinten zijn daarom puur wit. */
body.feest-evenement::before {
background: linear-gradient(178deg,
color-mix(in srgb, #f8f4ec calc((1 - var(--feest)) * 100%), #FFFFFF) 0%,
color-mix(in srgb, var(--paper) calc((1 - var(--feest)) * 100%), #FFFFFF) 46%,
color-mix(in srgb, var(--paper-2) calc((1 - var(--feest)) * 100%), #FFFFFF) 100%);
}
/* Achtergrond-canvas (gradient-mesh) dat de JS injecteert: licht, traag, ~30fps,
pointer-events uit, achter alle content. */
#bh-feest-canvas {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
z-index: -1;
pointer-events: none;
display: block;
}
/* ============================================================================
2. HEADER TRANSFORMEERT MEE (harde Benjamin-eis)
De masthead, de navigatie en het logo verkleuren met --feest.
============================================================================ */
/* Bovenrand-liniaal: terracotta -> zacht warm feest-verloop. Wave F2 punt 6:
subtieler dan het eerdere geel/oranje/rood — een gedempt warm verloop dat niet
als verkeerslicht leest. */
body.feest-evenement .mast-rule {
background:
linear-gradient(90deg, var(--fe-oranje), var(--fe-koraal) 50%, var(--fe-diep)) no-repeat,
var(--green);
background-size: calc(var(--feest) * 100%) 100%, 100% 100%;
}
/* Masthead-rand warmer. */
body.feest-evenement .mast {
border-bottom-color: color-mix(in srgb, var(--line) calc((1 - var(--feest)) * 100%), rgba(255, 136, 17, 0.42));
}
/* Merknaam + tagline. */
body.feest-evenement .brand .wm b {
color: color-mix(in oklab, var(--ink) calc((1 - var(--feest)) * 100%), var(--fe-diep));
}
body.feest-evenement .brand .wm span {
color: color-mix(in oklab, var(--green-deep) calc((1 - var(--feest)) * 100%), var(--fe-warm-meta));
}
/* Nav-links + dropdown-knoppen: tekst en onderstreep-accent. */
body.feest-evenement .mast-nav a.lk,
body.feest-evenement .drop-toggle {
color: color-mix(in oklab, var(--ink-soft) calc((1 - var(--feest)) * 100%), var(--fe-warm-meta));
}
body.feest-evenement .mast-nav a.lk.is-active,
body.feest-evenement .drop-toggle.is-active {
color: color-mix(in oklab, var(--green-deep) calc((1 - var(--feest)) * 100%), var(--fe-diep));
}
body.feest-evenement .mast-nav a.lk::after,
body.feest-evenement .drop-toggle::after {
background: color-mix(in oklab, var(--green) calc((1 - var(--feest)) * 100%), var(--fe-oranje));
}
/* Reserveren-CTA: groene vulling -> vibrant feest-rood. GEEN rust-schaduw meer
(Benjamin/Webby 2026-07-04): main.css haalde de statische box-shadow op .lk-cta
in rust weg zodat Contact en Reserveren optisch even zwaar zijn; deze feest-
herdeclaratie zette 'm terug en bracht de bug op de feest-pagina's terug. Nu
alleen de kleur-morph — de hover-schaduw blijft in main.css .lk-cta:hover. */
body.feest-evenement .mast-nav a.lk-cta {
background: color-mix(in oklab, var(--bh-action) calc((1 - var(--feest)) * 100%), var(--fe-btn));
/* Wave F2 punt 5: witte tekst — anders erft de knop de bruine .lk-kleur uit de
nav-regel hierboven (onleesbaar op feest-rood). Wit op #C4371A ~ 5,0:1 (AA). */
color: #fff;
}
/* Duidelijke feest-hover: dieper rood, wit blijft leesbaar. Wave F2-addendum:
main.css hover zet een HARDE groene lip (0 4px 0 var(--bh-action-hover)); in
feest-modus vervangen we die door een zachte, warme schaduw-taal (subtiele
donkerrode lip + zachte warme drop) — geen groen, geen kapotte rand. De lift
(-2px) uit main.css blijft. */
body.feest-evenement .mast-nav a.lk-cta:hover,
body.feest-evenement .mast-nav a.lk-cta.is-active {
background: color-mix(in oklab, var(--bh-action-hover) calc((1 - var(--feest)) * 100%), #A62A12);
color: #fff;
box-shadow:
0 3px 0 color-mix(in srgb, var(--bh-action-hover) calc((1 - var(--feest)) * 100%), #7F2412),
0 12px 22px -14px color-mix(in srgb, rgba(20, 26, 22, .6) calc((1 - var(--feest)) * 100%), rgba(140, 35, 18, .5));
}
/* Contact-outline-knop: rand + tekst warmer (rust). */
body.feest-evenement .mast-nav a.lk-secondary {
border-color: color-mix(in oklab, var(--green-deep) calc((1 - var(--feest)) * 100%), var(--fe-diep));
color: color-mix(in oklab, var(--green-deep) calc((1 - var(--feest)) * 100%), var(--fe-diep));
}
/* Contact-hover in feest: main.css vult met --green-deep (groen blok) terwijl de
warme rust-tekstkleur hierboven wint -> donkerrode tekst op groen = onleesbaar
én groen. In feest-modus dus een EIGEN warme hover: terracotta-vulling + witte
tekst + dezelfde zachte warme schaduw-taal als Reserveren (consistent hover-
gevoel, zelfde lift). Wit op #A8451B ~ 4,9:1 (AA). */
body.feest-evenement .mast-nav a.lk-secondary:hover,
body.feest-evenement .mast-nav a.lk-secondary.is-active {
background: color-mix(in oklab, var(--green-deep) calc((1 - var(--feest)) * 100%), var(--fe-diep));
border-color: color-mix(in oklab, var(--green-deep) calc((1 - var(--feest)) * 100%), var(--fe-diep));
color: #fff;
box-shadow:
0 3px 0 color-mix(in srgb, transparent calc((1 - var(--feest)) * 100%), #7F2412),
0 12px 22px -14px color-mix(in srgb, transparent calc((1 - var(--feest)) * 100%), rgba(140, 35, 18, .5));
}
/* ============================================================================
3. LOGO-CHOREOGRAFIE in de header (goedgekeurde component, 2x)
De inline-SVG staat in header.php (.brand .logo-svg). GSAP zet de start-/
eindstaat; hieronder alleen sizing, FOUC-guard en de feest-gloed.
============================================================================ */
body.feest-evenement .brand .logo-svg {
width: 40px;
height: auto;
flex: none;
overflow: visible;
display: block;
}
/* FOUC-guard: vóór init (svg zonder .is-ready) geen feest-elementen tonen,
zodat er niets flitst en het logo in rust identiek is aan logo-beeldmerk.svg. */
body.feest-evenement .brand .logo-svg:not(.is-ready) .arch-new,
body.feest-evenement .brand .logo-svg:not(.is-ready) .doors-new,
body.feest-evenement .brand .logo-svg:not(.is-ready) .rays {
opacity: 0;
}
/* Zachte warme gloed achter het logo, komt op met --feest. */
body.feest-evenement .brand .logo-glow {
position: absolute;
inset: -6px;
border-radius: 50%;
z-index: -1;
opacity: var(--feest);
pointer-events: none;
background: radial-gradient(circle, rgba(255, 180, 90, 0.34), rgba(255, 210, 0, 0.10) 52%, transparent 72%);
filter: blur(14px);
}
body.feest-evenement .brand { position: relative; }
/* ============================================================================
4. CONTENT TRANSFORMEERT MEE
Koppen, knoppen en accenten in de hoofdinhoud verkleuren met --feest.
Bij --feest:0 exact de basiskleur uit main.css -> geen sprong.
============================================================================ */
body.feest-evenement main h1,
body.feest-evenement main h2,
body.feest-evenement main h3,
body.feest-evenement main .kicker .no {
color: color-mix(in oklab, var(--green-deep) calc((1 - var(--feest)) * 100%), var(--fe-diep));
}
body.feest-evenement main .kicker {
color: color-mix(in oklab, var(--ink-soft) calc((1 - var(--feest)) * 100%), var(--fe-diep-2));
}
/* Generieke primaire knoppen in de content (styleguide .btn-primary). */
body.feest-evenement main .btn-primary {
background: color-mix(in oklab, var(--bh-action) calc((1 - var(--feest)) * 100%), var(--fe-btn));
box-shadow: inset 0 3px 0 color-mix(in srgb, transparent calc((1 - var(--feest)) * 100%), rgba(255, 180, 60, 0.85));
}
/* REVISIE-RONDE 2 (2026-07-05) — "Bekijk de hele agenda"-knop (.on-paper
.btn-ghost, main.css:276-277): bosgroen -> feest-terracotta, zelfde morph-
patroon als .btn-primary hierboven. In rust (--feest:0) exact de basiskleur. */
body.feest-evenement .on-paper .btn-ghost {
color: color-mix(in oklab, var(--green-deep) calc((1 - var(--feest)) * 100%), var(--fe-diep));
border-color: color-mix(in oklab, var(--green-deep) calc((1 - var(--feest)) * 100%), var(--fe-diep));
}
body.feest-evenement .on-paper .btn-ghost:hover {
background: color-mix(in oklab, var(--green-deep) calc((1 - var(--feest)) * 100%), var(--fe-diep));
color: var(--paper);
}
/* REVISIE-RONDE 2 — content-secties die --ink-soft (olijfgroen) gebruiken en
nergens naar een feest-tint remappen: vaste-momenten-tijd, uitgelichte-
kaart-meta/body, praktisch-blok en de generieke .head .intro-lead-tekst.
REVISIE-RONDE 2 (Visier V1, 2026-07-06): .vast-dag (dag-labels onder "De
vaste momenten") miste dezelfde remap — zelfde --ink-soft-bron als
.vast-tijd hierboven, dus zelfde morph. */
body.feest-evenement .head .intro,
body.feest-evenement .vast-dag,
body.feest-evenement .vast-tijd,
body.feest-evenement .ev-featured__meta span,
body.feest-evenement .ev-featured__body p,
body.feest-evenement .praktisch-item p {
color: color-mix(in oklab, var(--ink-soft) calc((1 - var(--feest)) * 100%), var(--fe-warm-meta));
}
/* REVISIE-RONDE 2 — "Alle vaste activiteiten"-knop (page-evenementen.php:415):
compound class="btn-ghost on-paper" op HETZELFDE element (geen voorouder)
matcht de descendant-selector .on-paper .btn-ghost (main.css:276) niet en
valt terug op de basis .btn-ghost (main.css:274) — bijna-wit op de bijna-
witte .vast-strook-sectie, onzichtbaar. Geen --feest-var in main.css, dus
vlakke fix (geen color-mix-morph nodig). */
body.feest-evenement .btn-ghost.on-paper {
background: transparent;
color: var(--ink);
border-color: var(--ink);
}
body.feest-evenement .btn-ghost.on-paper:hover {
background: var(--ink);
color: var(--paper);
}
/* Opt-in accent-hook: elk element met data-feest-accent krijgt een warme rand. */
body.feest-evenement [data-feest-accent] {
border-color: color-mix(in srgb, var(--line) calc((1 - var(--feest)) * 100%), rgba(255, 136, 17, 0.4));
}
/* ============================================================================
5. VERF-STREPEN (penseelstreken) — dragend transformatie-element
Elke streek wordt "geschilderd" via een clip-path-wipe. De JS injecteert het
penseel-symbool (#bh-brushA) + ruw-filter (#bh-rough). Zie de contract-comment
bovenin feest-transformatie.js voor de markup die het template kan plaatsen.
============================================================================ */
body.feest-evenement .pstroke {
display: block;
line-height: 0;
color: var(--fe-oranje);
clip-path: inset(0 100% 0 0);
will-change: clip-path;
}
body.feest-evenement .pstroke svg { width: 100%; height: 100%; display: block; }
body.feest-evenement .pstroke use { fill: currentColor; }
/* Lager-op-de-pagina strepen: elk door z'n eigen --paint (0..1) geschilderd. */
body.feest-evenement [data-paint] {
clip-path: inset(0 calc((1 - var(--paint)) * 100%) 0 0);
}
body.feest-evenement [data-paint].from-right {
clip-path: inset(0 0 0 calc((1 - var(--paint)) * 100%));
}
/* Markeer-highlight (geel penseel) achter een accent-woord: schildert mee met
--feest. Template gebruikt: woord */
body.feest-evenement .feest-em { position: relative; display: inline-block; white-space: nowrap; }
body.feest-evenement .feest-em > .feest-hl {
position: absolute;
left: -6%;
right: -6%;
top: 14%;
bottom: 2%;
z-index: 0;
color: var(--fe-geel);
clip-path: inset(0 calc((1 - var(--feest)) * 100%) 0 0);
}
body.feest-evenement .feest-em > .feest-hl svg { width: 100%; height: 100%; }
body.feest-evenement .feest-em > .feest-hl use { fill: currentColor; }
body.feest-evenement .feest-em > .feest-woord { position: relative; z-index: 1; }
/* Penseel-sprite die de JS injecteert: nooit zichtbaar zelf. */
#bh-feest-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* ============================================================================
WAVE F (2026-07-04) — expressiever feest + geschilderde divider + slinger
----------------------------------------------------------------------------
Benjamin-feedback: de transformatie was "lafjes", de verf-strepen kwamen niet
terug op /evenementen/, en de creme->donkergroen-overgang was een harde lijn.
De motor (feest-transformatie.js) injecteert nu template-vrij: brede verf-
vegen boven de lichte secties, een geschilderde divider vóór elke .disco-band,
en een gele highlight + subtiele slinger in de hero. Hieronder de styling.
Alles gescoped onder body.feest-evenement.
============================================================================ */
/* --- Punt 2: oude diagonale Bruuks Beats-lijnen weg op feest-pagina's.
De .disco-sfeerband krijgt op de evenement-detailpagina het antigravity-veld
(assets/js/beats-antigravity.js) i.p.v. de snelle CSS-lijnen uit wave-d.css.
We schakelen die lijnen hier expliciet uit — óók als het antigravity-script
(nog) niet ge-enqueued is — zodat de band nooit meer de oude look toont.
Op /plannen/ (geen feest-body) blijft wave-d.css ongemoeid. --- */
body.feest-evenement .disco::before { display: none !important; }
/* --- Punt 3+4: brede, zichzelf-schilderende verf-vegen boven de lichte
content-secties. Groter dan de concept-default zodat ze zichtbaar over de
pagina vegen. --- */
body.feest-evenement .fd-stroke {
display: block;
width: 100%;
height: clamp(38px, 6.5vw, 64px); /* groter/breder — Benjamin 2026-07-04 */
margin: clamp(.4rem, 2.4vw, 1.5rem) 0 clamp(.9rem, 3vw, 2rem);
overflow: visible;
pointer-events: none;
}
body.feest-evenement .fd-stroke .pstroke {
height: 100%;
filter: drop-shadow(0 5px 9px rgba(184, 73, 26, .16));
}
/* --- Punt 5: geschilderde divider tussen creme hero en donkergroene sfeer-
sectie. Wipet zichzelf in via [data-paint] en dipt een paar px in de donkere
band zodat de harde naadlijn verdwijnt. --- */
body.feest-evenement .feest-divider {
position: relative;
z-index: 2;
width: 100%;
height: clamp(46px, 7vw, 82px);
margin-bottom: -2px; /* overlap de bovenrand van .disco */
overflow: visible;
pointer-events: none;
}
body.feest-evenement .feest-divider .fd-edge {
display: block;
width: 100%;
height: 100%;
filter: drop-shadow(0 8px 12px rgba(168, 69, 27, .3));
}
body.feest-evenement .feest-divider .fd-edge svg { width: 100%; height: 100%; display: block; }
/* --- Punt 3: subtiele slinger bovenaan de hero. Absoluut gepositioneerd en
opacity gekoppeld aan --feest → geen layout-verschuiving in de rustige basis,
komt mee op tijdens de transformatie / staat vol in instant-mode. --- */
body.feest-evenement .pagehero { position: relative; }
body.feest-evenement .feest-slinger {
position: absolute;
top: clamp(4px, 1.6vw, 14px);
left: 0;
right: 0;
z-index: 1;
height: clamp(26px, 4.4vw, 44px);
opacity: calc(var(--feest) * .92);
pointer-events: none;
filter: drop-shadow(0 3px 5px rgba(20, 26, 22, .35));
}
body.feest-evenement .feest-slinger svg { width: 100%; height: 100%; display: block; }
/* --- Punt 3: bredere gele highlight achter een -accent in de hero-kop, plus
een leesbaar accent-woord. De hero-em is in rust green-bright; op de gele
highlight zou dat slecht lezen, dus het woord verkleurt met --feest naar een
donker-warme tint. --- */
body.feest-evenement .pagehero h1 .feest-hl {
left: -9%;
right: -9%;
top: 4%;
bottom: -8%; /* breder + hoger dan de content-default */
}
body.feest-evenement .pagehero h1 .feest-woord {
color: color-mix(in oklab, var(--green-bright) calc((1 - var(--feest)) * 100%), #7A2E12);
}
/* --- Punt 3c (Benjamin 2026-07-04): kleurrijker eindbeeld — meer geel/oranje/rood
in de LABELS/accenten in de feest-staat. De achtergrond blijft licht; de kleur
zit in de accenten. Alles morpht met --feest, dus in rust exact de basiskleur. --- */
/* Datum-chip op evenement-kaarten: donkergroen -> warm feest-rood. */
body.feest-evenement .ev-card .ev-datum {
background: color-mix(in srgb, rgba(46, 58, 49, .62) calc((1 - var(--feest)) * 100%), rgba(196, 55, 26, .88));
border-color: color-mix(in srgb, rgba(226, 152, 104, .45) calc((1 - var(--feest)) * 100%), var(--fe-oranje));
}
/* "Binnenkort"-badge staat op de DONKERE Beats-band. Wave F2 punt 6: was amper
leesbaar (donkere tekst op donker). Nu: cremewitte tekst op een solide warm-
rode vulling → duidelijk leesbaar op de feest-nacht. */
body.feest-evenement .ev-beats-badge {
color: color-mix(in oklab, var(--green-bright) calc((1 - var(--feest)) * 100%), #FFF3E9);
background: color-mix(in srgb, rgba(122, 184, 86, .16) calc((1 - var(--feest)) * 100%), var(--fe-btn));
border-color: color-mix(in srgb, rgba(122, 184, 86, .4) calc((1 - var(--feest)) * 100%), rgba(255, 170, 120, .6));
}
/* "Bekijk het evenement"-link: groen -> feest-terracotta. */
body.feest-evenement .ev-card .pillar-go {
color: color-mix(in oklab, var(--green-deep) calc((1 - var(--feest)) * 100%), var(--fe-diep));
}
/* Uitgelichte-kaart-variant (.ev-featured .pillar-go, wave-g.css:36) — miste
deze morph tot revisie-ronde 2 en bleef vlak op --ink in feest-modus terwijl
de gewone kaart-variant hierboven al wel meekleurt. Eigen basis-token (--ink,
niet --green-deep — dat is de daadwerkelijke rust-kleur van dit element) zodat
in rust (--feest:0) niets verspringt. */
body.feest-evenement .ev-featured .pillar-go {
color: color-mix(in oklab, var(--ink) calc((1 - var(--feest)) * 100%), var(--fe-diep));
}
/* ============================================================================
WAVE F2 punt 1 — de HELE pagina transformeert: GEEN GROEN meer op feest-
pagina's. De donkere Beats-band én de footer krijgen de warme feest-nacht
(aubergine/bruinrood) i.p.v. donkergroen; alle groene accenten worden warm.
Alles morpht met --feest (in rust exact de basiskleur). Op /plannen/ (geen
feest-body) blijft alles groen.
============================================================================ */
/* Donkere Bruuks Beats-band: groen -> warme feest-nacht. De antigravity-particles
poppen erop (kleur in beats-antigravity.js). */
body.feest-evenement .disco {
background: color-mix(in srgb, var(--night) calc((1 - var(--feest)) * 100%), var(--fe-nacht));
border-top-color: color-mix(in srgb, var(--green-ink) calc((1 - var(--feest)) * 100%), var(--fe-nacht-2));
}
body.feest-evenement .disco .head h2,
body.feest-evenement .disco .head .kicker .no,
body.feest-evenement .disco-side .ds-row .no,
body.feest-evenement .disco-stage .cap span {
color: color-mix(in oklab, var(--green-bright) calc((1 - var(--feest)) * 100%), var(--fe-koraal));
}
body.feest-evenement .disco-stage {
border-color: color-mix(in srgb, rgba(226, 152, 104, .28) calc((1 - var(--feest)) * 100%), rgba(255, 136, 17, .42));
}
/* FOOTER transformeert mee — geen groen (Wave F2 punt 1 + 6). */
body.feest-evenement footer {
background: color-mix(in srgb, var(--green-ink) calc((1 - var(--feest)) * 100%), var(--fe-nacht));
}
body.feest-evenement footer .brand .wm span,
body.feest-evenement footer h4,
body.feest-evenement footer ul li svg {
color: color-mix(in oklab, var(--green-bright) calc((1 - var(--feest)) * 100%), var(--fe-koraal));
}
body.feest-evenement .foot-bar .imp-foot .dot {
background: color-mix(in oklab, var(--green-bright) calc((1 - var(--feest)) * 100%), var(--fe-koraal));
}
body.feest-evenement footer a:hover,
body.feest-evenement .foot-bar .foot-legal a:hover {
color: color-mix(in oklab, var(--green-bright) calc((1 - var(--feest)) * 100%), var(--fe-oranje));
}
/* Wave F2 punt 4 (herzien): de exit is nu een zichtbare OMGEKEERDE transformatie
(--feest tweent terug naar 0 + logo morpht terug), afgehandeld in
feest-transformatie.js. Geen witte fade-sluier meer. */
/* ============================================================================
REVISIE-RONDE 2 (2026-07-05) — evenement-detail: schone twee-koloms layout
----------------------------------------------------------------------------
Benjamin: weg met de grote (niet-onderhoudbare) achtergrondafbeelding. In
plaats daarvan een makkelijk-genereerbare layout: LINKS het geanimeerde
feest-logo → kicker → titel → datum/meta → tekst → CTA; RECHTS de zelf-
uploadbare event-foto (SCF `beeld`) of, zonder foto, het feest-logo.
Alles gescoped onder body.feest-evenement (de detailpagina heeft die class
altijd) zodat de STRUCTUUR bij elke --feest-waarde geldt; de KLEUR morpht mee.
Sizing/structuur werkt ook zonder JS (progressive enhancement).
============================================================================ */
/* Terug-naar-evenementen-link bovenin (simpel, geen toggle). */
body.feest-evenement .ev-topbar { padding: clamp(16px, 3vw, 28px) 0 0; }
body.feest-evenement .ev-back {
display: inline-flex; align-items: center; gap: 9px;
font-family: var(--sans); font-weight: 700; font-size: .92rem; letter-spacing: .01em;
text-decoration: none; padding: 6px 2px;
color: color-mix(in oklab, var(--green-deep) calc((1 - var(--feest)) * 100%), var(--fe-diep));
}
body.feest-evenement .ev-back:hover { text-decoration: underline; text-underline-offset: 4px; }
body.feest-evenement .ev-back-arrow { transition: transform .25s var(--ease); }
body.feest-evenement .ev-back:hover .ev-back-arrow { transform: translateX(-4px); }
/* Twee-koloms raster: content links, beeld rechts. Stapelt op smal scherm. */
body.feest-evenement .ev-layout {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: clamp(28px, 5vw, 60px);
align-items: start;
}
@media (max-width: 860px) {
body.feest-evenement .ev-layout { grid-template-columns: 1fr; gap: clamp(24px, 6vw, 36px); }
}
body.feest-evenement .ev-detail h1 { margin: .05em 0 .3em; line-height: 1.08; }
body.feest-evenement .ev-lead {
font-family: var(--serif); font-size: clamp(1.05rem, 1.6vw, 1.28rem); margin: 0 0 22px;
color: color-mix(in oklab, var(--green-deep) calc((1 - var(--feest)) * 100%), var(--fe-diep-2));
}
/* --- Geanimeerd feest-logo (statische feest-eindstaat + zachte CSS-entree +
gloed). Losstaand van de GSAP-masthead-choreografie. --- */
body.feest-evenement .ev-mark-wrap { margin: 0 0 clamp(12px, 2.2vw, 20px); }
body.feest-evenement .ev-mark {
position: relative; display: inline-flex; line-height: 0;
width: clamp(72px, 11vw, 112px); aspect-ratio: 1 / 1;
}
body.feest-evenement .ev-mark-svg {
position: relative; z-index: 1; width: 100%; height: auto; display: block; overflow: visible;
transform-origin: 50% 100%;
animation: bh-ev-mark-in .7s var(--ease) both;
}
body.feest-evenement .ev-mark-glow {
position: absolute; inset: -16%; z-index: 0; border-radius: 50%; pointer-events: none;
opacity: var(--feest);
background: radial-gradient(circle, rgba(255, 180, 90, .42), rgba(255, 210, 0, .12) 52%, transparent 72%);
filter: blur(16px);
}
body.feest-evenement .ev-mark-rays path { opacity: 0; animation: bh-ev-ray-fade .5s var(--ease) forwards; }
body.feest-evenement .ev-mark-rays path:nth-child(1) { animation-delay: .34s; }
body.feest-evenement .ev-mark-rays path:nth-child(2) { animation-delay: .40s; }
body.feest-evenement .ev-mark-rays path:nth-child(3) { animation-delay: .46s; }
body.feest-evenement .ev-mark-rays path:nth-child(4) { animation-delay: .52s; }
body.feest-evenement .ev-mark-rays path:nth-child(5) { animation-delay: .58s; }
body.feest-evenement .ev-mark-rays path:nth-child(6) { animation-delay: .64s; }
body.feest-evenement .ev-mark-rays path:nth-child(7) { animation-delay: .70s; }
@keyframes bh-ev-mark-in { from { opacity: 0; transform: translateY(12px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes bh-ev-ray-fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
body.feest-evenement .ev-mark-svg { animation: none; }
body.feest-evenement .ev-mark-rays path { opacity: 1; animation: none; }
}
/* --- Rechterkolom: event-foto of (zonder foto) het feest-logo in een zachte kaart. --- */
body.feest-evenement .ev-media { position: relative; }
body.feest-evenement .ev-photo {
margin: 0; border-radius: var(--bh-radius-lg, 14px); overflow: hidden;
border: 1px solid var(--line); box-shadow: 0 18px 40px -24px rgba(40, 20, 16, .5);
}
body.feest-evenement .ev-photo img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
body.feest-evenement .ev-media-mark {
display: grid; place-items: center; padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
border-radius: var(--bh-radius-lg, 14px); border: 1px solid var(--line);
background: linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--green-wash) 34%, #ffffff));
}
body.feest-evenement .ev-media-mark .ev-mark { width: min(72%, 240px); }
/* --- Beats "Zo was het": placeholder-galerij (Melvin vult later via WordPress).
Ligt op de donkere feest-club-band (.disco) — warme dashed frames lezen daarop. --- */
body.feest-evenement .ev-zowashet .ev-gallery {
display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2vw, 20px);
margin-top: clamp(24px, 4vw, 40px); position: relative; z-index: 1;
}
@media (max-width: 760px) { body.feest-evenement .ev-zowashet .ev-gallery { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { body.feest-evenement .ev-zowashet .ev-gallery { grid-template-columns: 1fr; } }
body.feest-evenement .ev-gallery-item { margin: 0; }
body.feest-evenement .ev-ph-frame {
aspect-ratio: 4 / 3; display: grid; place-items: center; align-content: center; gap: 10px;
border-radius: var(--bh-radius-md); text-align: center; padding: 14px;
background: color-mix(in srgb, #241611 66%, transparent);
border: 1px dashed rgba(255, 194, 77, .42);
color: rgba(247, 241, 231, .72);
}
body.feest-evenement .ev-ph-ico { opacity: .82; }
body.feest-evenement .ev-ph-label {
font-family: var(--sans); font-weight: 700; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
color: rgba(255, 194, 77, .92);
}
/* ============================================================================
OPTIE A — IMMERSIEVE FEEST-DETAIL "de hele pagina is het feest" (2026-07-06)
----------------------------------------------------------------------------
Benjamin-akkoord op Pixel's mockup (_concepts/impeccable-demo-evenement-detail-
feest.html + detail-feest-1440/390.png). Het warme donkere feest-podium draagt de
HELE evenement-detailpagina vanaf de hero. GESCOPED onder `body.feest-detail` —
die class zet single-evenement.php via een body_class-filter, ALLEEN op detail-
pagina's. Het overzicht (/evenementen/) deelt wel `feest-evenement` maar NOOIT
`feest-detail` → geen regressie op het lichte instant-feest daar.
Dit is een STATISCH donker thema (JS-onafhankelijk, progressive enhancement): de
motor injecteert hier bewust niets (de nieuwe markup mijdt .block.on-paper/.pagehero/
.disco). De motor blijft alleen de masthead-logo-film + persistentie/exit + de
fold-in-gate aansturen.
CONTRAST (WCAG, tool-geverifieerd, mockup-blok): crème #F7F1E7 op nacht #2C1622
= 15.0:1 · meta #E6D4C2 op nacht = 11.7:1 · amber #FFC24D op nacht = 10.5:1 (ook
klein) · koraal #FF8848 = 7.1:1 (AA-large) · wit op knop #C4371A = 5.4:1. Terracotta
#E0531C alleen grafisch/knop/grote tekst. GEEN groen, GEEN neon.
============================================================================ */
body.feest-detail {
--ev-nacht: #2C1622;
--ev-nacht-deep: #20101A;
--ev-nacht-deeper: #170A11;
--ev-nacht-2: #3A1C28;
--ev-cream: #F7F1E7;
--ev-cream-warm: #FBF4EA;
--ev-meta: #E6D4C2;
--ev-meta-dim: rgba(247, 241, 231, .72);
--ev-amber: #FFC24D;
--ev-amber-lt: #FFD27A;
--ev-terracotta: #E0531C;
--ev-koraal: #FF8848;
--ev-btn: #C4371A;
--ev-btn-hover: #A62A12;
--ev-line-warm: rgba(255, 200, 150, .20);
--ev-line-soft: rgba(255, 200, 150, .12);
--ev-ease: cubic-bezier(0.22, 0.68, 0.16, 1);
/* De HELE pagina is donker — al vanaf de eerste paint, ook zonder JS. */
background: var(--ev-nacht-deeper);
/* Duur van de zichtbare reverse-transformatie bij het wegnavigeren. De motor
(feest-transformatie.js) leest --feest-exit-dur zodat de navigatie exact op
het einde van deze CSS-transitions valt. */
--feest-exit-dur: 0.5s;
}
/* De lichte body::before-gloed + het lichte gloed-canvas horen niet op het donkere
podium — uitzetten op de detailpagina (de eigen .ev-stage neemt het over). */
body.feest-detail::before { display: none !important; }
body.feest-detail #bh-feest-canvas { display: none !important; }
/* ---- Zichtbare REVERSE-transformatie bij exit (bug #4, 2026-07-07) ----------
De donkere feest-detail-look is STATISCH (deze scope, niet --feest-gestuurd),
dus de exit-tween op --feest verandert hier niets zichtbaars → de pagina bleef
in de feest-look tot de harde navigatie 'snapte'. Bij het WEGnavigeren naar
een niet-feest-pagina zet de motor body.feest-exiting; onderstaande transitions
morphen de zichtbare donkere staat (achtergrond + vaste podium-backdrop + de
content/masthead) vloeiend terug naar de rustige lichte basis vóór de navigatie.
Gradueel over --feest-exit-dur → geen harde snap, geen witte flits.
-------------------------------------------------------------------------- */
body.feest-detail.feest-exiting {
background: #f8f4ec; /* rustige lichte basis (--paper) */
transition: background var(--feest-exit-dur) ease;
}
body.feest-detail.feest-exiting .ev-stage,
body.feest-detail.feest-exiting .ev-flow,
body.feest-detail.feest-exiting .mast {
opacity: 0;
transition: opacity var(--feest-exit-dur) ease;
}
/* Content boven de vaste backdrop. */
body.feest-detail .ev-flow { position: relative; z-index: 2; }
body.feest-detail .ev-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* ---- Doorlopende immersieve podium-backdrop (vast; door het template naar
verplaatst zodat main's page-in-transform 'm niet vangt) ---- */
body.feest-detail .ev-stage {
position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
background:
radial-gradient(120% 70% at 50% -8%, rgba(255, 136, 72, .16), transparent 55%),
radial-gradient(90% 60% at 82% 8%, rgba(255, 194, 77, .08), transparent 60%),
linear-gradient(180deg, var(--ev-nacht) 0%, var(--ev-nacht-deep) 46%, var(--ev-nacht-deeper) 100%);
}
body.feest-detail .ev-beam {
position: absolute; top: -12%; width: 30px; height: 120%;
transform-origin: top center; filter: blur(20px); mix-blend-mode: screen; opacity: 0;
clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
animation: bh-ev-beam-in 1.4s var(--ev-ease) forwards, bh-ev-beam-sway 11s ease-in-out infinite alternate;
}
body.feest-detail .ev-b1 { left: 16%; --rot: -14deg; --swing: 6deg;
background: linear-gradient(to bottom, rgba(255, 136, 72, .30), transparent 72%); }
body.feest-detail .ev-b2 { left: 63%; --rot: 12deg; --swing: -6deg;
background: linear-gradient(to bottom, rgba(255, 194, 77, .24), transparent 70%); }
body.feest-detail .ev-b3 { left: 88%; --rot: 20deg; --swing: 7deg; width: 22px;
background: linear-gradient(to bottom, rgba(224, 83, 28, .22), transparent 66%); }
@keyframes bh-ev-beam-in { to { opacity: .8; } }
@keyframes bh-ev-beam-sway {
0% { transform: translateX(-50%) rotate(var(--rot)) scaleY(1); }
100% { transform: translateX(-50%) rotate(calc(var(--rot) + var(--swing))) scaleY(1.03); }
}
body.feest-detail .ev-stage-spark { position: absolute; inset: 0; overflow: hidden; }
body.feest-detail .ev-stage-spark i,
body.feest-detail .venster .v-spark i {
position: absolute; bottom: -12px; width: 3px; height: 3px; border-radius: 50%;
background: var(--ev-amber); box-shadow: 0 0 7px 1px rgba(255, 194, 77, .75);
opacity: 0; animation: bh-ev-rise linear infinite;
}
@keyframes bh-ev-rise {
0% { transform: translateY(0) scale(.6); opacity: 0; }
12% { opacity: .9; }
82% { opacity: .45; }
100% { transform: translateY(-88vh) scale(1); opacity: 0; }
}
/* ============================================================================
MASTHEAD (feeststaat, detail) — de site-chrome zit óók op het donkere podium,
zodat "de hele pagina is het feest" al vanaf de bovenrand leest.
============================================================================ */
body.feest-detail .mast {
background: rgba(28, 18, 26, .72);
backdrop-filter: blur(14px) saturate(1.1);
-webkit-backdrop-filter: blur(14px) saturate(1.1);
border-bottom: 1px solid var(--ev-line-soft);
}
body.feest-detail .brand .wm b { color: var(--ev-cream-warm); }
body.feest-detail .brand .wm span { color: var(--ev-amber); }
/* Crème/amber linkkleuren zijn alleen leesbaar tegen het donkere podium van de
desktop-mast. Op mobiel (<=940px, zie main.css) wordt .mast-nav het lichte
uitklap-paneel (background:var(--paper)) — daar zou deze crème tekst dof/
onleesbaar worden. Scope daarom achter de desktop-breakpoint die main.css's
mobiele @media (max-width:940px) spiegelt (zie main.css:231). */
@media (min-width: 941px) {
body.feest-detail .mast-nav a.lk,
body.feest-detail .drop-toggle { color: var(--ev-meta); }
body.feest-detail .mast-nav a.lk:hover,
body.feest-detail .mast-nav a.lk.is-active,
body.feest-detail .drop-toggle:hover,
body.feest-detail .drop-toggle.is-active { color: var(--ev-cream-warm); }
body.feest-detail .mast-nav a.lk::after { background: var(--ev-amber); }
body.feest-detail .mast-nav a.lk-secondary { color: var(--ev-cream); border-color: rgba(255, 170, 120, .5); background: transparent; }
body.feest-detail .mast-nav a.lk-secondary:hover,
body.feest-detail .mast-nav a.lk-secondary.is-active { background: var(--ev-terracotta); border-color: transparent; color: #fff; }
}
body.feest-detail .mast-nav a.lk-cta { background: var(--ev-btn); color: #fff; }
body.feest-detail .mast-nav a.lk-cta:hover,
body.feest-detail .mast-nav a.lk-cta.is-active { background: var(--ev-btn-hover); color: #fff; }
body.feest-detail .nav-toggle { background: rgba(255, 240, 220, .06); border-color: var(--ev-line-warm); }
body.feest-detail .nav-toggle span,
body.feest-detail .nav-toggle span::before,
body.feest-detail .nav-toggle span::after { background: var(--ev-cream); }
/* ============================================================================
KICKER (merk-anker per kamer) — amber kapitaaltjes + warm terracotta-streepje.
============================================================================ */
body.feest-detail .ev-flow .kicker {
display: inline-flex; align-items: center; gap: 12px;
font-family: var(--sans);
font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .2em;
color: var(--ev-amber); margin: 0 0 16px;
}
body.feest-detail .ev-flow .kicker::before {
content: ""; width: 28px; height: 2px; background: var(--ev-terracotta); border-radius: 2px;
}
body.feest-detail .ev-flow .kicker.center { justify-content: center; }
/* ============================================================================
KAMER — elke sectie een eigen warme glow-pool (spotlight). Het donker TUSSEN
de pools tekent de scheiding; content erboven via z-index.
============================================================================ */
body.feest-detail .ev-room { position: relative; }
body.feest-detail .ev-room > .wrap { position: relative; z-index: 2; }
body.feest-detail .ev-room .pool { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
body.feest-detail .ev-flow h1,
body.feest-detail .ev-flow h2 {
font-family: var(--sans); line-height: 1.08; letter-spacing: -0.015em; font-weight: 800;
color: var(--ev-cream-warm); text-wrap: balance;
}
/* ---- Back-link topbar ---- */
body.feest-detail .ev-topbar { padding: clamp(18px, 3vw, 30px) 0 0; }
body.feest-detail .ev-back { color: var(--ev-amber); }
body.feest-detail .ev-back:hover { color: var(--ev-amber-lt); text-decoration: none; }
/* ============================================================================
HERO — de entree van het podium. Diepste sfeer, grootste spotlight.
============================================================================ */
body.feest-detail .ev-hero { padding: clamp(28px, 5vw, 52px) 0 clamp(40px, 6vw, 68px); }
body.feest-detail .ev-hero .pool {
background:
radial-gradient(75% 90% at 26% 34%, rgba(255, 136, 72, .20), transparent 60%),
radial-gradient(60% 80% at 82% 40%, rgba(224, 83, 28, .14), transparent 65%);
}
body.feest-detail .ev-hero .ev-layout {
display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(30px, 5vw, 60px); align-items: start;
}
@media (max-width: 880px) {
body.feest-detail .ev-hero .ev-layout { grid-template-columns: 1fr; gap: clamp(26px, 6vw, 38px); }
}
body.feest-detail .ev-hero .ev-mark-wrap { margin: 0 0 clamp(14px, 2vw, 22px); }
body.feest-detail .ev-hero .ev-mark { width: clamp(78px, 10vw, 104px); }
body.feest-detail .ev-mark-glow { opacity: .9; }
body.feest-detail .ev-hero h1 {
font-size: clamp(2.5rem, 1.6rem + 4.2vw, 4.4rem); margin: 0 0 .26em;
}
body.feest-detail .ev-hero .ev-lead {
font-family: var(--sans);
font-size: clamp(1.08rem, 1vw + .82rem, 1.32rem); font-weight: 700; color: var(--ev-amber);
margin: 0 0 20px;
}
body.feest-detail .ev-intro { font-size: 1.06rem; color: var(--ev-cream); max-width: 60ch; margin: 0 0 26px; }
body.feest-detail .ev-intro p { margin: 0 0 .9em; color: var(--ev-cream); }
body.feest-detail .ev-intro p:last-child { margin-bottom: 0; }
body.feest-detail .ev-intro a { color: var(--ev-amber-lt); text-underline-offset: 3px; }
body.feest-detail .ev-intro strong,
body.feest-detail .ev-intro b { color: var(--ev-amber-lt); }
/* ---- CTA-rij + knoppen (donker) — geen .on-paper hier ---- */
body.feest-detail .ev-flow .cta-row { display: flex; flex-wrap: wrap; gap: 14px; }
body.feest-detail .ev-flow .btn {
display: inline-flex; align-items: center; gap: 10px;
font-weight: 800; font-size: 1rem; padding: 15px 26px; border-radius: 9px; border: none;
}
body.feest-detail .ev-flow .btn .arr { transition: transform .25s var(--ev-ease); }
body.feest-detail .ev-flow .btn:hover .arr { transform: translateX(4px); }
body.feest-detail .ev-flow .btn-primary {
background: var(--ev-btn); color: #fff;
box-shadow: 0 18px 40px -18px rgba(196, 55, 26, .95), inset 0 2px 0 rgba(255, 180, 60, .55);
}
body.feest-detail .ev-flow .btn-primary:hover {
transform: translateY(-2px); background: var(--ev-btn-hover);
box-shadow: 0 22px 44px -16px rgba(196, 55, 26, 1), 0 0 34px -8px rgba(255, 150, 60, .5), inset 0 2px 0 rgba(255, 180, 60, .5);
}
body.feest-detail .ev-flow .btn-ghost {
background: rgba(255, 240, 220, .05); color: var(--ev-cream); border: 1.5px solid var(--ev-line-warm);
backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
body.feest-detail .ev-flow .btn-ghost:hover {
transform: translateY(-2px); border-color: rgba(255, 194, 77, .6); background: rgba(255, 240, 220, .09); color: var(--ev-cream-warm);
}
/* ============================================================================
LEVEND PODIUM-VENSTER (rechterkolom zonder foto) — geen holle doos.
Lokale club-bundels + opstijgende vonken + gloeiend boog-logo + live-caption.
============================================================================ */
body.feest-detail .venster {
position: relative; border-radius: 18px; overflow: hidden; isolation: isolate;
aspect-ratio: 4 / 3.4; min-height: 300px;
background: radial-gradient(120% 100% at 50% 8%, #3a1a26 0%, #22101a 60%, #180b12 100%);
border: 1px solid rgba(255, 170, 120, .28);
box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .85), inset 0 0 60px -20px rgba(255, 120, 50, .35), inset 0 1px 0 rgba(255, 220, 180, .14);
}
body.feest-detail .venster .v-lights { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
body.feest-detail .venster .v-beam {
position: absolute; top: -12%; width: 26px; height: 130%; transform-origin: top center;
filter: blur(13px); mix-blend-mode: screen; opacity: 0;
clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
animation: bh-ev-beam-in 1.2s var(--ev-ease) forwards, bh-ev-beam-sway 8s ease-in-out infinite alternate;
}
body.feest-detail .venster .vb1 { left: 26%; --rot: -16deg; --swing: 8deg; background: linear-gradient(to bottom, rgba(255, 136, 72, .7), transparent 72%); }
body.feest-detail .venster .vb2 { left: 52%; --rot: 8deg; --swing: -7deg; background: linear-gradient(to bottom, rgba(255, 194, 77, .62), transparent 70%); }
body.feest-detail .venster .vb3 { left: 74%; --rot: 20deg; --swing: 8deg; background: linear-gradient(to bottom, rgba(224, 83, 28, .55), transparent 68%); }
body.feest-detail .venster .v-beam .src { position: absolute; top: -5px; left: 50%; transform: translateX(-50%); width: 15px; height: 15px; border-radius: 50%; filter: blur(3px); }
body.feest-detail .venster .vb1 .src { background: var(--ev-koraal); box-shadow: 0 0 16px 5px rgba(255, 140, 80, .75); }
body.feest-detail .venster .vb2 .src { background: var(--ev-amber); box-shadow: 0 0 16px 5px rgba(255, 194, 77, .7); }
body.feest-detail .venster .vb3 .src { background: var(--ev-terracotta); box-shadow: 0 0 14px 5px rgba(224, 83, 28, .65); }
body.feest-detail .venster .v-haze {
position: absolute; left: 0; right: 0; bottom: 0; height: 55%; z-index: 2; pointer-events: none;
mix-blend-mode: screen; opacity: .7;
background: linear-gradient(to top, rgba(224, 120, 60, .5), rgba(255, 150, 70, .16) 55%, transparent);
}
body.feest-detail .venster .v-spark { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
body.feest-detail .venster .v-mark { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; }
body.feest-detail .venster .v-mark .ev-mark { width: min(52%, 190px); }
body.feest-detail .venster .v-mark .ev-mark-glow { inset: -22%; opacity: .95; background: radial-gradient(circle, rgba(255, 190, 90, .55), rgba(255, 210, 0, .16) 50%, transparent 72%); filter: blur(20px); }
body.feest-detail .venster .v-mark .ev-mark-svg { filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .5)); }
body.feest-detail .venster .v-live {
position: absolute; top: 16px; left: 16px; z-index: 4; display: inline-flex; align-items: center; gap: 8px;
font-family: var(--sans); font-size: .64rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ev-amber);
padding: 7px 12px; border-radius: 100px; background: rgba(20, 10, 14, .6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
border: 1px solid rgba(255, 194, 77, .35);
}
body.feest-detail .venster .v-live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ev-koraal); box-shadow: 0 0 8px 2px rgba(255, 140, 80, .9); animation: bh-ev-pulse 1.6s ease-in-out infinite; }
@keyframes bh-ev-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }
body.feest-detail .venster .v-cap {
position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 4;
font-family: var(--sans); font-size: .96rem; font-weight: 700; color: var(--ev-cream); text-shadow: 0 2px 14px rgba(0, 0, 0, .7);
}
body.feest-detail .venster .v-cap span { display: block; font-size: .82rem; font-weight: 600; color: var(--ev-meta); font-style: italic; }
/* ---- Rechterkolom MET foto: warm vignet zodat 'ie bij de wereld hoort. ---- */
body.feest-detail .ev-photo {
position: relative; margin: 0; border-radius: 18px; overflow: hidden;
border: 1px solid rgba(255, 170, 120, .28);
box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 220, 180, .14);
}
body.feest-detail .ev-photo img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3.4; }
body.feest-detail .ev-photo .ev-photo-vignet {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(120% 90% at 50% 0%, transparent 45%, rgba(24, 11, 18, .34) 100%),
linear-gradient(180deg, transparent 55%, rgba(224, 83, 28, .12) 100%);
box-shadow: inset 0 0 70px -20px rgba(0, 0, 0, .6);
}
/* ============================================================================
VERF-VEEG-GORDIJN — het bewuste sectie-anker tussen kamers.
============================================================================ */
body.feest-detail .ev-seam {
position: relative; z-index: 3; height: clamp(66px, 9vw, 108px); pointer-events: none;
}
body.feest-detail .ev-seam-naad {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: min(100%, 1360px); height: 100%;
background: radial-gradient(72% 74% at 50% 50%, rgba(255, 150, 70, .16), transparent 72%);
}
/* Veiligheidsnet tegen horizontale bleed van de naad-gloed op smalle schermen. */
body.feest-detail .ev-seam { overflow: hidden; }
body.feest-detail .ev-seam-brush {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: min(92%, 1040px); height: clamp(28px, 4vw, 52px);
filter: drop-shadow(0 6px 16px rgba(224, 83, 28, .42));
}
body.feest-detail .ev-seam-brush svg { width: 100%; height: 100%; display: block; }
/* ============================================================================
PRAKTISCH — gloeiende frosted-glas-tegels (bewuste, doelbewuste glass-inzet).
============================================================================ */
body.feest-detail .ev-praktisch { padding: clamp(6px, 2vw, 18px) 0 clamp(28px, 5vw, 48px); }
body.feest-detail .ev-praktisch .pool { background: radial-gradient(70% 120% at 50% 40%, rgba(255, 170, 90, .14), transparent 62%); }
body.feest-detail .glass-panel {
display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(12px, 1.6vw, 20px);
}
@media (max-width: 520px) { body.feest-detail .glass-panel { grid-template-columns: 1fr; } }
body.feest-detail .glass-tile {
position: relative; margin: 0;
background: linear-gradient(158deg, rgba(255, 232, 210, .11), rgba(255, 232, 210, .035));
backdrop-filter: blur(13px) saturate(1.15); -webkit-backdrop-filter: blur(13px) saturate(1.15);
border: 1px solid var(--ev-line-warm); border-radius: 14px; padding: 20px 20px 22px;
box-shadow: inset 0 1px 0 rgba(255, 240, 220, .16), 0 24px 44px -34px rgba(0, 0, 0, .7), 0 0 44px -22px rgba(255, 150, 60, .4);
}
body.feest-detail .glass-tile .ic { width: 30px; height: 30px; display: grid; place-items: center; margin-bottom: 12px; color: var(--ev-amber); }
body.feest-detail .glass-tile dt {
font-family: var(--sans); font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ev-amber); margin: 0 0 5px;
}
body.feest-detail .glass-tile dd { margin: 0; font-size: 1.06rem; font-weight: 600; color: var(--ev-cream); line-height: 1.35; }
body.feest-detail .glass-tile.wide dd { font-size: .98rem; font-weight: 500; color: var(--ev-meta); }
/* ============================================================================
LINE-UP — veld-gedreven-ready kamer met een verzorgde LEGE-STAAT (nu geen veld).
============================================================================ */
body.feest-detail .ev-lineup { padding: clamp(14px, 3vw, 30px) 0 clamp(24px, 4vw, 44px); }
body.feest-detail .ev-lineup .pool { background: radial-gradient(72% 100% at 50% 34%, rgba(255, 136, 72, .12), transparent 62%); }
body.feest-detail .ev-lineup h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); margin: 0 0 clamp(18px, 3vw, 28px); }
body.feest-detail .ev-lineup-empty {
display: grid; place-items: center; text-align: center; gap: 8px;
padding: clamp(30px, 5vw, 48px) clamp(20px, 4vw, 40px);
border-radius: 16px; border: 1px dashed rgba(255, 194, 77, .40);
background:
radial-gradient(80% 120% at 50% 0%, rgba(255, 150, 70, .10), transparent 70%),
color-mix(in srgb, #241611 60%, transparent);
}
body.feest-detail .ev-lineup-empty .ic { color: var(--ev-amber); margin-bottom: 6px; opacity: .92; }
body.feest-detail .ev-lineup-empty__title { font-family: var(--sans); font-weight: 800; font-size: 1.16rem; color: var(--ev-cream-warm); margin: 0; }
body.feest-detail .ev-lineup-empty__sub { color: var(--ev-meta); font-size: .98rem; margin: 0; max-width: 46ch; }
/* ============================================================================
ZO WAS HET — galerij-kamer op het diepere donker, spotlit placeholder-frames.
============================================================================ */
body.feest-detail .ev-zowashet { padding: clamp(18px, 3vw, 32px) 0 clamp(34px, 6vw, 60px); }
body.feest-detail .ev-zowashet .pool { background: radial-gradient(80% 90% at 50% 22%, rgba(224, 83, 28, .12), transparent 60%); }
body.feest-detail .ev-zowashet .head { max-width: 62ch; margin-bottom: clamp(22px, 3.5vw, 36px); }
body.feest-detail .ev-zowashet h2 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.9rem); margin: 0 0 14px; }
body.feest-detail .ev-zowashet .intro { font-size: 1.06rem; color: var(--ev-meta); max-width: 60ch; }
body.feest-detail .ev-zowashet .ev-gallery {
display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 22px); margin-top: 0;
}
@media (max-width: 760px) { body.feest-detail .ev-zowashet .ev-gallery { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { body.feest-detail .ev-zowashet .ev-gallery { grid-template-columns: 1fr; } }
body.feest-detail .ev-frame {
position: relative; margin: 0; aspect-ratio: 4 / 3; display: grid; place-items: center; align-content: center; gap: 12px;
border-radius: 12px; text-align: center; padding: 16px;
background:
radial-gradient(70% 80% at 50% 30%, rgba(255, 150, 70, .10), transparent 70%),
color-mix(in srgb, #241611 72%, transparent);
border: 1px dashed rgba(255, 194, 77, .42);
transition: transform .3s var(--ev-ease), border-color .3s var(--ev-ease), box-shadow .3s var(--ev-ease);
}
body.feest-detail .ev-frame:hover {
transform: translateY(-3px); border-color: rgba(255, 194, 77, .7);
box-shadow: 0 26px 46px -30px rgba(0, 0, 0, .7), 0 0 40px -18px rgba(255, 150, 60, .35);
}
body.feest-detail .ev-frame .ic { color: rgba(247, 241, 231, .72); }
body.feest-detail .ev-frame .lbl { font-family: var(--sans); font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ev-amber); }
/* ============================================================================
UITNODIGING — sluitende CTA-kamer, vloeit door naar de footer.
============================================================================ */
body.feest-detail .ev-invite { padding: clamp(28px, 5vw, 54px) 0 clamp(38px, 6vw, 66px); text-align: center; }
body.feest-detail .ev-invite .pool { background: radial-gradient(60% 120% at 50% 60%, rgba(255, 136, 72, .16), transparent 66%); }
body.feest-detail .ev-invite h2 { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.9rem); margin: 0 0 14px; }
body.feest-detail .ev-invite p { font-size: 1.1rem; color: var(--ev-meta); max-width: 50ch; margin: 0 auto 26px; }
body.feest-detail .ev-invite .cta-row { justify-content: center; }
/* ============================================================================
FOLD-IN-GATE (S5) — geen .ev-mark-fold-in-herstart bij event→event-navigatie.
`feest-skip-entry` wordt gezet door het vroege inline-script in single-evenement.php
(peekt bhFeestJump) én door feest-transformatie.js (jump + bfcache-herstel).
Hogere specificiteit (2 body-classes) dan de fold-in-regel → wint; eindstaat direct.
============================================================================ */
body.feest-detail.feest-skip-entry .ev-mark-svg { animation: none; }
body.feest-detail.feest-skip-entry .ev-mark-rays path { opacity: 1; animation: none; }
/* ============================================================================
S9 — ANTIGRAVITY-MOUNT in de feest-hero. Het Three.js particle-veld
(assets/js/beats-antigravity.js) landt op elk element met [data-beats-bg] en
voegt zelf een absoluut-gevulde