/**
* The Villa Antwerp, ontwerp.
*
* Uitgangspunt: The Villa is een donkere club met neon en roze. De hero is donker, de voet
* is donker, en alles daartussen stond op wit. Daardoor leest de site als een brochure in
* plaats van als een club. Dat is de grootste ingreep hieronder: de grond wordt zwart,
* zoals de zaal zelf.
*
* De huisstijl blijft de hunne, afgelezen uit hun eigen Elementor-kit op 19-9-2026:
* #CD1962 roze #5A00A0 paars #040404 inkt Poppins
* Er komt geen nieuwe kleur bij. De foto's, de teksten en de volgorde blijven zoals ze zijn.
*/
:root {
--villa-roze: #CD1962;
--villa-paars: #5A00A0;
--villa-inkt: #040404;
/* ⚠️ Lichte grond, gevraagd door Thierry op 19-9-2026. Bewust NIET puur wit: een zachte
grijstint laat de witte kaarten opvallen. Op puur wit zou een witte kaart verdwijnen en
was al het kaartwerk voor niets. */
--villa-grond: #F4F4F7;
--villa-vlak: #FFFFFF;
--villa-lijn: rgba(4, 4, 4, .09);
--villa-zacht: rgba(4, 4, 4, .66);
}
/* ═══════════════════════════════════════════════════════════════════════════
* 1. DE GROND
*
* ⚠️ Eerst zwart gemaakt, op 19-9-2026 teruggedraaid naar licht op vraag van Thierry.
* Een zachte grijstint (#F4F4F7), niet puur wit, zodat de witte kaarten zichtbaar blijven
* als kaart. De voet blijft donker; dat geeft de pagina een afsluiting.
* ═══════════════════════════════════════════════════════════════════════════ */
body,
body .site-main,
body .page-content { background-color: var(--villa-grond); }
/* ⚠️ De TEKSTKLEUR wordt NIET hier omgezet.
*
* Elementor schrijft per element een regel als
* .elementor-10 .elementor-element.elementor-element-6324c6d .elementor-heading-title { color:#040404 }
* en daar wint `main h2 { color:#fff }` het nooit van. Gemeten: "Our story", "Welcome to
* The Villa Antwerp" en "Press" bleven `rgb(4,4,4)`, dus zwart op een zwarte grond.
*
* Met `!important` alles wit forceren zou óók de twee koppen raken die bewust roze zijn
* ("Dinner first?" en "We are a proud partner of"), en op de andere pagina's koppen die ik
* niet gezien heb. `site.js` kijkt daarom naar de BERKENDE kleur: alleen wat te donker is
* voor deze grond wordt opgehelderd. Roze blijft roze, wit blijft wit. */
.villa-licht { color: #fff !important; }
.villa-licht-zacht { color: var(--villa-zacht) !important; }
/* ═══════════════════════════════════════════════════════════════════════════
* 2. KOPPEN ALS VAN EEN CLUB
*
* De koppen stonden op 32 en 36 px in Poppins 600, netjes maar braaf. De hero doet het al
* goed: 80px in hoofdletters. Dat register wordt doorgetrokken naar de rest, met een
* strakkere letterafstand en een roze streep eronder.
* ═══════════════════════════════════════════════════════════════════════════ */
/* ⚠️ De MAAT en de HOOFDLETTERS worden NIET hier gezet.
*
* Eerste poging zette elke h2 op clamp(30px, 4.2vw, 52px) in hoofdletters. Gevolg:
* "VIP & TABLE RESERVATIONS" stond op 52px in een kaart van 380px en werd afgeknipt door de
* `overflow: hidden` die diezelfde ronde hoeken nodig hebben. Twee van mijn eigen
* wijzigingen die elkaar versterkten.
*
* Een kop in een sectie van 1140px en een kop in een kaart van 380px horen niet dezelfde
* behandeling te krijgen, en CSS kan de breedte van de houder niet bevragen. Daarom doet
* `site.js` dat: die meet de houder en zet `villa-sectiekop` op wat een sectiekop IS.
*/
main .villa-sectiekop {
text-transform: uppercase;
letter-spacing: -.01em;
line-height: 1.04;
font-size: clamp(28px, 3.6vw, 46px);
font-weight: 700;
}
/* Een roze streep onder een sectiekop. Kort, dus een accent en geen scheidingslijn. */
main .villa-sectiekop::after {
content: "";
display: block;
width: 64px; height: 3px;
margin: 18px 0 0;
background: linear-gradient(90deg, var(--villa-roze), var(--villa-paars));
border-radius: 3px;
}
main .villa-sectiekop.villa-gecentreerd::after { margin-inline: auto; }
/* De hero mag geen streep krijgen, die staat op zichzelf. */
main .e-parent:first-of-type .elementor-heading-title::after { display: none; }
/* ═══════════════════════════════════════════════════════════════════════════
* 3. KNOPPEN DIE OPVALLEN
*
* De knoppen waren wit met roze tekst en een witte rand van 1px. Op een witte grond zag je
* ze nauwelijks, en op een foto verdwenen ze. Nu gevuld met het eigen verloop van roze naar
* paars, dat op de hero al gebruikt werd.
* ═══════════════════════════════════════════════════════════════════════════ */
.elementor-button,
a.elementor-button {
background: linear-gradient(135deg, var(--villa-roze), var(--villa-paars)) !important;
color: #fff !important;
border: 0 !important;
padding: 14px 30px !important;
font-weight: 700 !important;
letter-spacing: .02em;
border-radius: 100px;
box-shadow: 0 8px 24px rgba(205, 25, 98, .28);
transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.elementor-button:hover {
transform: translateY(-2px);
box-shadow: 0 14px 34px rgba(205, 25, 98, .42);
filter: brightness(1.08);
}
.elementor-button:active { transform: translateY(0); }
/* De tweede knop in de hero mag een omlijnde blijven, zodat er een rangorde is. */
main .e-parent:first-of-type .elementor-button:nth-of-type(2),
main .e-parent:first-of-type .elementor-widget-button + .elementor-widget-button .elementor-button {
background: transparent !important;
border: 2px solid rgba(255, 255, 255, .85) !important;
box-shadow: none;
}
/* ═══════════════════════════════════════════════════════════════════════════
* 4. BEELDEN KRIJGEN VORM
*
* Alle foto's waren rechthoeken met scherpe hoeken, zonder reactie. Afgeronde hoeken en een
* rustige inzoom bij aanwijzen maken er kaarten van.
* ═══════════════════════════════════════════════════════════════════════════ */
main .elementor-widget-image img,
main .swiper-slide-image,
main .elementor-image-box-img img {
border-radius: 14px;
display: block;
}
main .elementor-image-carousel-wrapper .swiper-slide {
overflow: hidden;
border-radius: 14px;
}
main .swiper-slide-image {
transition: transform .5s cubic-bezier(.2, .6, .2, 1);
border-radius: 0;
}
main .swiper-slide:hover .swiper-slide-image { transform: scale(1.06); }
/* De drie kaarten op de voorpagina */
.elementor-element-730b913,
.elementor-element-2ec01c2,
.elementor-element-0dff112 {
border-radius: 16px;
overflow: hidden;
position: relative;
isolation: isolate;
transition: transform .25s ease, box-shadow .25s ease;
}
.elementor-element-730b913:hover,
.elementor-element-2ec01c2:hover,
.elementor-element-0dff112:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}
/* ⚠️ De sluier op die kaarten kwam effectief op ~32% zwart uit. Witte tekst op een neonfoto
haalt dat net niet. Een verloop in plaats van een vlakke tint: bovenaan blijft de foto,
onderaan waar de tekst staat wordt het donker. */
.elementor-element-730b913::after,
.elementor-element-2ec01c2::after,
.elementor-element-0dff112::after {
content: "";
position: absolute; inset: 0; z-index: -1;
background: linear-gradient(to bottom, transparent 26%, rgba(4, 4, 4, .72) 100%);
pointer-events: none;
}
/* ═══════════════════════════════════════════════════════════════════════════
* 5. DE PARTNERLOGO'S
*
* 🔴 Belvedere, Moët en Absolut zijn zwarte woordmerken, gemaakt voor een witte grond. Op
* de nieuwe zwarte grond zouden ze onzichtbaar zijn. Ze worden daarom wit gemaakt, en
* krijgen allemaal dezelfde hoogte zodat de rij rustig wordt in plaats van rommelig.
* ═══════════════════════════════════════════════════════════════════════════ */
main img[src*="belvedere" i],
main img[src*="moet" i], main img[src*="chandon" i],
main img[src*="absolut" i], main img[src*="havana" i] {
/* ⚠️ Op de zwarte grond werden deze zwarte woordmerken wit gemaakt. Op een lichte grond
moet dat juist NIET: dan zijn ze onzichtbaar. Alleen de hoogte gelijktrekken. */
opacity: .72;
max-height: 56px; width: auto; object-fit: contain;
border-radius: 0;
transition: opacity .2s ease, transform .2s ease;
}
main img[src*="belvedere" i]:hover,
main img[src*="moet" i]:hover, main img[src*="chandon" i]:hover,
main img[src*="absolut" i]:hover, main img[src*="havana" i]:hover {
opacity: 1; transform: scale(1.06);
}
/* ═══════════════════════════════════════════════════════════════════════════
* 6. RUST EN RITME
*
* De secties stonden strak tegen elkaar (padding 0). Lucht ertussen laat de foto's
* ademen en maakt duidelijk waar een onderwerp begint en eindigt.
* ═══════════════════════════════════════════════════════════════════════════ */
/* ⚠️ Alleen secties die een KOP dragen krijgen lucht.
*
* Eerste poging gaf elke sectie 88px boven en onder. Twee van de tien secties zijn lege
* tussenruimtes van 70px; die werden 246px en er ontstond een gat van driehonderd pixels
* midden op de voorpagina. De pagina groeide van 4403 naar 5871 pixels.
*
* Een kop is het betrouwbaarste teken dat er een onderwerp begint. De fotosecties en de
* tussenruimtes houden hun eigen maat. */
main > .page-content > .elementor > .e-con.e-parent:has(.elementor-widget-heading) {
padding-block: clamp(20px, 2.6vw, 44px);
}
/* De hero staat op zichzelf en heeft al een eigen hoogte. */
main > .page-content > .elementor > .e-con.e-parent:first-of-type { padding-block: 0 !important; }
/* ⚠️ Secties die ALLEEN een kop dragen waren 555 pixels hoog voor één regel tekst. Op een
* witte grond viel die leegte niet op; op zwart leest het als een gat. De eigen hoogte van
* zo'n sectie vervalt, de lucht komt van de padding hierboven. */
main .e-con.e-parent:has(> .e-con-inner > .elementor-widget-heading:only-child),
main .e-con.e-parent:has(> .elementor-widget-heading:only-child) {
min-height: 0 !important;
}
.elementor-widget-text-editor p { max-width: 68ch; }
h1, h2, h3 { text-wrap: balance; }
/* ═══════════════════════════════════════════════════════════════════════════
* 7. DE CARROUSEL
* ═══════════════════════════════════════════════════════════════════════════ */
.elementor-swiper-button {
color: #fff !important;
background: rgba(4, 4, 4, .45);
width: 44px; height: 44px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
backdrop-filter: blur(6px);
transition: background .2s ease, transform .2s ease;
}
.elementor-swiper-button:hover { background: var(--villa-roze); transform: scale(1.06); }
.swiper-pagination-bullet { background: rgba(4, 4, 4, .22) !important; opacity: 1 !important; }
.swiper-pagination-bullet-active { background: var(--villa-roze) !important; width: 22px; border-radius: 4px; }
/* ═══════════════════════════════════════════════════════════════════════════
* 8. DE TARIEVEN OP /tables/
*
* De prijzen stonden alleen in de plattegrond, onleesbaar voor Google en op een telefoon.
* De plattegrond blijft, want die toont wáár een tafel staat. De bedragen komen eronder als
* tekst, in kaarten die bij de donkere grond passen.
* ═══════════════════════════════════════════════════════════════════════════ */
.villa-tarieven {
max-width: 900px; margin: 0 auto; padding: clamp(40px, 6vw, 80px) 20px;
font-family: Poppins, sans-serif;
}
.villa-tarieven h2 {
font-size: clamp(28px, 4vw, 48px); font-weight: 700; text-transform: uppercase;
letter-spacing: -.01em; margin: 0 0 8px; color: var(--villa-inkt); text-align: center;
}
.villa-tarieven h2::after {
content: ""; display: block; width: 64px; height: 3px; margin: 18px auto 34px;
background: linear-gradient(90deg, var(--villa-roze), var(--villa-paars)); border-radius: 3px;
}
.villa-tarieven-lijst { margin: 0; display: grid; gap: 10px; }
.villa-tarief {
padding: 20px 22px; border-radius: 14px;
background: var(--villa-vlak); border: 1px solid var(--villa-lijn);
box-shadow: 0 1px 2px rgba(4, 4, 4, .04);
transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.villa-tarief:hover { border-color: rgba(205, 25, 98, .45); transform: translateX(3px);
box-shadow: 0 6px 18px rgba(205, 25, 98, .12); }
.villa-tarief dt {
display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
font-weight: 700; font-size: 18px; color: var(--villa-inkt); text-transform: uppercase;
letter-spacing: .01em;
}
.villa-tarief-prijs {
color: var(--villa-roze); white-space: nowrap; font-size: 20px;
font-variant-numeric: tabular-nums; /* bedragen onder elkaar uitgelijnd */
}
.villa-tarief dd { margin: 6px 0 0; font-size: 15px; color: var(--villa-zacht); }
.villa-tarieven-voet {
margin: 30px 0 0; padding: 22px 24px; border-radius: 14px; font-size: 16px; line-height: 1.65;
background: linear-gradient(135deg, rgba(205, 25, 98, .07), rgba(90, 0, 160, .07));
border: 1px solid rgba(205, 25, 98, .22); color: var(--villa-inkt);
}
.villa-tarieven-contact { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 0; }
.villa-tarieven-contact a {
flex: 1 1 240px; text-align: center; padding: 16px 22px; border-radius: 100px;
background: linear-gradient(135deg, var(--villa-roze), var(--villa-paars));
color: #fff; text-decoration: none; font-weight: 700; font-size: 16px;
min-height: 44px; display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 24px rgba(205, 25, 98, .28);
transition: transform .2s ease, box-shadow .2s ease;
}
.villa-tarieven-contact a:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(205, 25, 98, .42); }
/* ═══════════════════════════════════════════════════════════════════════════
* 9. WAT ONZICHTBAAR MOET WERKEN
*
* Geen ontwerp, wel nodig. Gemeten: `outline: none` op elke link en knop, tekst van 11 en
* 12px, en aanraakdoelen van 25px.
* ═══════════════════════════════════════════════════════════════════════════ */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible,
.elementor-button:focus-visible, .elementor-menu-toggle:focus-visible {
outline: 3px solid var(--villa-roze) !important;
outline-offset: 3px !important;
box-shadow: 0 0 0 5px rgba(255, 255, 255, .85) !important;
}
.skip-link:focus-visible {
position: fixed !important; top: 12px; left: 12px;
width: auto !important; height: auto !important;
clip: auto !important; clip-path: none !important;
padding: 12px 18px; z-index: 100000;
background: var(--villa-roze); color: #fff;
font: 700 16px/1 Poppins, sans-serif; text-decoration: none; border-radius: 100px;
}
/* ⚠️ 16px op invoervelden: onder die grens zoomt iOS automatisch in bij het tikken. */
input[type="search"], input[type="text"], input[type="email"], textarea { font-size: 16px !important; }
.elementor-location-footer { font-size: 15px; }
.elementor-location-footer p, .elementor-location-footer li,
.elementor-location-footer .elementor-icon-list-text { font-size: 15px; line-height: 1.6; }
@media (max-width: 1024px) {
.elementor-nav-menu a,
.elementor-location-footer .elementor-nav-menu a,
.elementor-icon-list-item > a { min-height: 44px; display: flex; align-items: center; }
.elementor-menu-toggle, .elementor-search-form__submit,
.elementor-social-icon { min-width: 44px; min-height: 44px; }
.elementor-search-form__input { min-height: 44px; }
.swiper-pagination-bullet { position: relative; }
.swiper-pagination-bullet::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important; animation-iteration-count: 1 !important;
transition-duration: .001ms !important; scroll-behavior: auto !important;
}
.elementor-button:hover, .swiper-slide:hover .swiper-slide-image { transform: none; }
}
/* ═══════════════════════════════════════════════════════════════════════════
* 10. KAARTEN
*
* ⚠️ Thierry, 19-9-2026: "enige wat je hebt gedaan is achtergrond zwart maken en dat trekt
* op niks, ik wil dat je de blokken en vakken enz op de website wat moderner maakt,
* afgeronde hoeken, cards."
*
* Hij had gelijk. De inhoud zweefde los op een vlakke grond: geen vlak, geen rand, geen
* hoek. Een donkere kleur alleen maakt niets moderner.
*
* Elke sectie zonder eigen achtergrondbeeld wordt nu een kaart. `site.js` zet de klasse,
* want of een sectie een achtergrondBEELD heeft is in CSS niet te bevragen, en een sectie
* die al een foto draagt mag geen grijs vlak overheen krijgen.
* ═══════════════════════════════════════════════════════════════════════════ */
main .villa-kaart {
background: var(--villa-vlak);
border: 1px solid var(--villa-lijn);
border-radius: 24px;
padding: clamp(24px, 3.5vw, 52px) clamp(20px, 3vw, 44px) !important;
/* Twee schaduwen: een korte voor de rand, een lange voor de diepte. Zacht, want op een
lichte grond wordt een harde schaduw meteen vuil. */
box-shadow: 0 1px 2px rgba(4, 4, 4, .04), 0 12px 32px rgba(4, 4, 4, .07);
}
/* ── de cijfers (100+, 11+, 1.000) worden losse kaarten ──────────────────── */
main .villa-kaart .e-con-inner > .e-con,
main .villa-kaart > .e-con {
border-radius: 18px;
}
/* ── de partnerlogo's in een eigen paneel ───────────────────────────────── */
main .villa-kaart:has(img[src*="belvedere" i]),
main .villa-kaart:has(img[src*="absolut" i]) {
background: #FAFAFC;
}
/* ── alles wat een hoek heeft, krijgt dezelfde hoek ─────────────────────── */
main .elementor-widget-image img,
main .elementor-image-box-img img,
main .sbi_photo,
main #sb_instagram .sbi_photo_wrap,
main .elementor-image-carousel-wrapper .swiper-slide { border-radius: 16px; }
/* De Instagram-feed stond als een raster scherpe vierkanten; met hoeken en ruimte ertussen
leest het als een galerij in plaats van als een contactblad. */
main #sb_instagram #sbi_images { gap: 12px !important; }
main #sb_instagram .sbi_item { border-radius: 16px; overflow: hidden; }
main #sb_instagram .sbi_photo { transition: transform .4s ease; }
main #sb_instagram .sbi_item:hover .sbi_photo { transform: scale(1.06); }
/* ── lucht aan de zijkant, maar ALLEEN waar een kaart staat ─────────────── */
/*
* 🔴 Dit stond eerst op `main` zelf, en dat gaf een witte rand van 24 px rond de HERO op
* elke pagina. Op de zwarte versie viel die rand weg tegen een zwarte grond; op de lichte
* grond is het een witte balk rond een foto die van rand tot rand hoort te lopen.
* Gemeten 19-9-2026: `main.site-main` stond op `padding: 0px 24px`, dus de hero begon op
* x=24 in een venster van 1512.
*
* ⚠️ Op desktop verplaatst dit de kaarten NIET. Een kaart is een `.e-con-inner` met
* `max-width: 1140px` die zichzelf centreert, dus zijn plek komt van die maat en niet van
* deze padding. Pas onder ongeveer 1190 px doet de padding echt iets, en dáár is hij ook
* nodig. Daarom mag hij hier ruimer dan de 28 die er stond: hij vervangt nu ook de 24 die
* van `main` kwam.
*/
main > .page-content > .elementor > .e-con.e-parent:has(.villa-kaart) {
padding-inline: clamp(14px, 4vw, 48px);
}
/* ── op een telefoon minder ronding en minder padding, anders wordt het benepen ── */
@media (max-width: 600px) {
main .villa-kaart { border-radius: 18px; padding: 22px 18px !important; }
main > .page-content > .elementor > .e-con.e-parent:has(.villa-kaart) {
padding-inline: 12px;
}
}
/* De tegenhangers van .villa-licht, voor een lichte grond. */
.villa-donker { color: var(--villa-inkt) !important; }
.villa-donker-zacht { color: var(--villa-zacht) !important; }
/* ⚠️ Een los beeld in een kaart stond links uitgelijnd zodra de kaart padding kreeg.
Gemeten op /tables/: de plattegrond liep van 165 tot 965 in een kaart van 1140 breed, met
een lege strook rechts. Beelden die smaller zijn dan hun kaart horen gecentreerd. */
main .villa-kaart .elementor-widget-image { text-align: center; }
main .villa-kaart .elementor-widget-image img { margin-inline: auto; }
/* ──────────────────────────────────────────────────────────────────────────
De galerij op /gallery/
🔴 Deze pagina stond leeg. De Gallery-widget van Elementor Pro schrijft geen `![]()
`
maar lege divs met `data-thumbnail`, en zijn eigen JavaScript maakte daar
achtergrondbeelden van. `inc/galerij.php` zet ze om naar echte beelden; hier krijgen
ze hun raster.
⚠️ Geen metselwerk. Alle 26 opnames zijn 768x512 liggend, dus een vast raster met
`aspect-ratio` geeft exact hetzelfde beeld zonder een regel script, zonder sprong
tijdens het laden en zonder dat de indeling afhangt van hoe snel een beeld binnenkomt.
────────────────────────────────────────────────────────────────────────── */
main .villa-galerij {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
main .villa-galerij-item {
display: block;
position: relative;
overflow: hidden;
border-radius: 14px;
background: rgba(4, 4, 4, .06);
aspect-ratio: 3 / 2;
}
main .villa-galerij-item img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}
main .villa-galerij-item::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 0 0 1px rgba(4, 4, 4, .07);
background: linear-gradient(to top, rgba(4, 4, 4, .28), transparent 45%);
opacity: 0;
transition: opacity .3s ease;
pointer-events: none;
}
main .villa-galerij-item:hover img,
main .villa-galerij-item:focus-visible img { transform: scale(1.05); }
main .villa-galerij-item:hover::after,
main .villa-galerij-item:focus-visible::after { opacity: 1; }
@media (max-width: 900px) {
main .villa-galerij { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}
@media (max-width: 600px) {
main .villa-galerij { grid-template-columns: repeat(2, 1fr); gap: 6px; }
main .villa-galerij-item { border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) {
main .villa-galerij-item img { transition: none; }
main .villa-galerij-item:hover img { transform: none; }
}
/* ──────────────────────────────────────────────────────────────────────────
Sluier onder tekst die op een foto staat
Zie `sluierOp()` in site.js voor waarom dit niet in CSS te selecteren is: of een
element een achtergrondBEELD draagt is geen selector.
────────────────────────────────────────────────────────────────────────── */
main .villa-sluier {
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(to top,
rgba(4, 4, 4, .74) 0%,
rgba(4, 4, 4, .52) 38%,
rgba(4, 4, 4, .22) 70%,
rgba(4, 4, 4, .08) 100%);
}
/* ⚠️ Zonder dit staat de inhoud ONDER de sluier en is de hele kaart grijs. */
main .villa-heeft-sluier > *:not(.villa-sluier) { position: relative; z-index: 1; }
/* ──────────────────────────────────────────────────────────────────────────
Het Absolut-logo had een wit kader
✓ Gemeten met `sips` op 19-9-2026: van de vier partnerlogo's is er precies één zonder
alfakanaal.
20449_absolut_logo_regular_blue_rgb.webp hasAlpha: no ← het witte kader
Havana-Club-logo.png hasAlpha: yes
belvedere-vodka-logo-png-transparent.png hasAlpha: yes
pngegg.png (Moët) hasAlpha: yes
Het vlak zat dus in het BESTAND, niet in de opmaak. Op de zwarte versie viel dat niet
op omdat alle logo's daar door een `brightness(0) invert(1)` gingen; op de lichte grond
staat er een wit blok om één logo.
`assets/absolut-logo.png` is hetzelfde beeld met het wit weggerekend in plaats van
weggeknipt: per pixel is de dekking berekend uit `P = a·C + (1-a)·wit` met C = #0032A1,
de eigen blauwtint van het merk. Een harde drempel had gekartelde randen gegeven.
⚠️ Het doek blijft 1920x813 met dezelfde marge eromheen. Bijsnijden zou het logo groter
maken dan de drie andere, want die staan met `background-size: contain` in een vak van
vaste maat.
⚠️ Deze regel hangt aan het element-ID uit de spiegel. Wordt de spiegel opnieuw gedraaid
én verandert The Villa de voettekst, dan kan dat ID wijzigen en komt het witte kader
terug. Zichtbaar in één oogopslag, dus geen stille fout.
────────────────────────────────────────────────────────────────────────── */
.elementor-54 .elementor-element.elementor-element-5dd4730:not(.elementor-motion-effects-element-type-background),
.elementor-54 .elementor-element.elementor-element-5dd4730 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
background-image: url("absolut-logo.png");
}
/* ──────────────────────────────────────────────────────────────────────────
De partnerlogo's op een telefoon
✓ Gemeten op 390 px, 19-9-2026: vier tegels naast elkaar van 86 bij 55 px, met 5 px
ertussen. Moët & Chandon is dan een grijze vlek; de tekst "CHAMPAGNE" haalt nog geen
2 px letterhoogte. Vier merknamen die niemand kan lezen zijn geen social proof.
Twee per rij geeft 177 px per logo, ruim twee keer zo groot. De rij stond al op
`flex-wrap: wrap`, dus er is alleen een breedte nodig.
⚠️ `!important` is hier nodig en niet lui: Elementor zet per tegel `width` én
`max-width: 23%` in de gebundelde CSS, en zonder overschrijven klemt die 23% mijn 50%
meteen terug naar de oude maat.
────────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
.elementor-element-d910103 > .e-con-inner { gap: 20px 14px; }
.elementor-element-d910103 > .e-con-inner > .e-con {
flex: 0 0 calc(50% - 7px) !important;
width: calc(50% - 7px) !important;
max-width: calc(50% - 7px) !important;
min-height: 78px;
}
}
/* ══════════════════════════════════════════════════════════════════════════
* DE VOET EN DE PARTNERLOGO'S OP EEN TELEFOON
*
* Thierry, 19-9-2026: "op mobile staan de logo's nog niet netjes naast elkaar
* en de footer ook niet netjes." Twee losse oorzaken, allebei opgemeten op 390 px.
* ══════════════════════════════════════════════════════════════════════════ */
/* ── 1. de logo's ──────────────────────────────────────────────────────────
*
* ✓ Gemeten: vier tegels van exact 186x78 met `background-size: contain`. De tegels zijn
* dus wél gelijk; de BEELDEN zijn dat niet. Met `contain` bepaalt de verhouding van het
* bronbestand hoe groot een logo uitvalt, en die lopen ver uiteen:
*
* belvedere 2400x800 3,0:1 vult de tegel van rand tot rand
* pngegg 518x518 1,0:1 haalt maar 78 px breedte
* havana 5000x2778 1,8:1
* absolut 1920x813 2,4:1 met 26% marge in het doek zelf
*
* Vandaar dat Belvedere de hele regel opslokt en Moët een vlekje is. Voor een logoreeks
* is gelijke BOUNDING BOX de verkeerde maat; gelijk optisch gewicht is de juiste. Dus per
* logo een eigen maat, zodat de vier ongeveer even zwaar wegen.
*
* ⚠️ De tegel gaat van 78 naar 96 px hoog, anders is er geen ruimte voor de gestapelde
* lockups (Moët en Havana hebben tekst ónder het merkteken).
*
* ⚠️ En de rij kreeg geen zijmarge: de eerste tegel begon op x=0, dus Belvedere raakte de
* schermrand. */
@media (max-width: 600px) {
.elementor-element-d910103 > .e-con-inner {
gap: 22px 14px;
padding-inline: 18px;
}
.elementor-element-d910103 > .e-con-inner > .e-con { min-height: 96px; }
.elementor-element-58735b5 { background-size: 155px auto !important; } /* Belvedere */
.elementor-element-b0f7958 { background-size: auto 92px !important; } /* Moët */
.elementor-element-c1d069b { background-size: auto 92px !important; } /* Havana */
.elementor-element-5dd4730 { background-size: 100% auto !important; } /* Absolut */
}
/* ── 2. de voet ────────────────────────────────────────────────────────────
*
* 🔴 De contactregels stonden op ACHT pixel. Niet door de herbouw: het staat zo in de
* Elementor-CSS van The Villa zelf, onder `@media (max-width: 767px)`:
*
* .elementor-element-5d4b8d04 .elementor-icon-list { font-size: 8px }
*
* Op de oude site was het dus net zo goed onleesbaar. Het adres en de openingsuren, precies
* de twee dingen waarvoor iemand op een telefoon de voet opent. De menulinks stonden op 10.
*
* ⚠️ De raakvlakken waren wél in orde: 122x44 voor de links, 44x44 voor de sociale iconen.
* Alleen de lettergrootte klopte niet, dus daar blijf ik vanaf.
*
* En de twee kolommen stonden naast elkaar in 136 en 204 px, waardoor het mailadres
* middenin een woord afbrak: "info@thevilla-" / "antwerp.be". Onder 600 px vol breed. */
@media (max-width: 600px) {
.elementor-location-footer .e-con-inner > .e-con.elementor-element-51914b98,
.elementor-location-footer .e-con-inner > .e-con.elementor-element-28f01b13 {
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
}
.elementor-location-footer .elementor-element-51914b98 { margin-bottom: 10px; }
/* ⚠️ De contactregels staan NIET hier maar in het blok onderaan, zonder media query,
* want dezelfde fout zat op elke breedte. Een regel van 14 px stond hier wel even, maar
* die werd overruled door die bredere regel (vijf klassen tegen vier) en deed dus niets.
* Gemeten op 390 px: alle vier staan op 15 en het telefoonnummer past op één regel. */
/* Het mailadres mag breken, maar niet middenin een woord. */
.elementor-location-footer .elementor-icon-list-text { word-break: normal; overflow-wrap: anywhere; }
/* ⚠️ Eén linkerkant voor het hele blok.
* Elementor zet de kolomtussenruimte als padding op de kolommen zelf: `Links` kreeg
* 13,6 px rechts, `Reach Out` 13,6 px links. Naast elkaar valt dat weg tegen elkaar;
* gestapeld staat de tweede kop ineens 13,6 px ingesprongen ten opzichte van de eerste.
* Gemeten op 390 px: Links op x=23, Reach Out op x=23 maar met padding-left 13,59. */
.elementor-location-footer .elementor-element-51914b98,
.elementor-location-footer .elementor-element-28f01b13,
.elementor-location-footer .elementor-element-6162c3ce {
padding-inline: 0 !important;
}
/* En het logo met de sociale iconen stond gecentreerd terwijl al de rest links uitlijnt.
* Op desktop staat dat blok in een eigen kolom ernaast, daar klopt het; gestapeld geeft
* het twee verschillende linkerkanten onder elkaar. */
.elementor-location-footer .elementor-element-6162c3ce { text-align: left; }
.elementor-location-footer .elementor-element-6162c3ce .elementor-social-icons-wrapper,
.elementor-location-footer .elementor-element-6162c3ce .elementor-widget-container {
text-align: left;
justify-content: flex-start;
}
/* ⚠️ Het VILLA-logo is een image-BOX, geen gewone afbeelding, en Elementor centreert die
* onder 767 px met een eigen `!important`:
* .elementor-widget-image-box .elementor-image-box-img { margin-left: auto !important }
* plus `text-align: center` op de wrapper. Een regel op `.elementor-widget-image img`
* raakt dat dus niet; gemeten stond het logo op x=142 terwijl al de rest op x=23 stond. */
/* ⚠️ De marges waren al 0 na de regel hieronder, en tóch stond het logo op x=142.
* De figure is `inline-block` en de WRAPPER staat op `text-align: center`; dan centreert
* de tekstuitlijning hem, niet zijn marge. Elementor zet die center met een selector op
* element-ID, dus daar is `!important` voor nodig. */
.elementor-location-footer .elementor-image-box-wrapper { text-align: left !important; }
.elementor-location-footer .elementor-image-box-img {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Het logo plakte tegen de openingsuren erboven. */
.elementor-location-footer .elementor-element-6162c3ce { margin-top: 26px; }
}
/* ──────────────────────────────────────────────────────────────────────────
De contactregels in de voet, op élke breedte
✓ Gemeten op 1512 px, 19-9-2026: vier regels in hetzelfde widget, dezelfde `ul` en `li`
op 15 px, maar twee spans op 10:
info@thevilla-antwerp.be 15px
Limbastraat 1, Antwerpen 10px
+32(0)477813636 15px
23PM - 5AM 10px
🔴 De oorzaak is een DIRECTE kindselector:
.elementor-element-5d4b8d04 .elementor-icon-list-item > .elementor-icon-list-text,
.elementor-element-5d4b8d04 .elementor-icon-list-item > a { font-size: 10px }
(en 8px onder 767 px)
Bij het adres en de openingsuren is de span een direct kind van de `li`. Bij het
mailadres en het telefoonnummer zit diezelfde span ín een ``, dus daar bijt `>` niet
en valt hij terug op de 15 px van de voet. De 10 px was voor alle vier bedoeld; twee zijn
er per ongeluk aan ontsnapt. Het verschil is dus geen ontwerpkeuze maar een ongelukje in
de opmaak, en het maakte het adres en de uren onleesbaar.
→ patterns/een-font-size-op-het-kind-wint-van-een-regel-op-de-lijst
Alle vier op 15 px, gelijk aan de rest van de voet, op élke breedte. Ik had een kleinere
stap voor mobiel ingebouwd uit angst dat "+32(0)477813636 (Whatsapp only)" zou omvallen;
nagemeten op 390 px past die op 15 px gewoon op één regel in 340 px. Die stap is er weer
uit, want een regel die niets doet is erger dan geen regel.
────────────────────────────────────────────────────────────────────────── */
.elementor-54 .elementor-element.elementor-element-5d4b8d04 .elementor-icon-list-item > .elementor-icon-list-text,
.elementor-54 .elementor-element.elementor-element-5d4b8d04 .elementor-icon-list-item > a,
.elementor-54 .elementor-element.elementor-element-5d4b8d04 .elementor-icon-list-item a > .elementor-icon-list-text {
font-size: 15px !important;
}
/* Het voetMENU had exact dezelfde kwaal, en ik had hem eerst maar half gerepareerd: de
* regel stond in de mobiele media query, dus alleen onder 600 px.
*
* ✓ Gemeten over acht pagina's op drie breedtes:
*
* 390 px 15px (mijn regel)
* 900 px 10px ← vier links per pagina onder de leesgrens
* 1440 px 12px ← net boven mijn drempel van 12, dus niet eens gemeld
*
* Dat gat op 900 px was met alleen desktop en mobiel onvindbaar geweest. Nu 15 px overal,
* gelijk aan de contactregels ernaast.
* → feedback_visual_qa_sweep */
.elementor-location-footer .elementor-nav-menu a,
.elementor-location-footer .elementor-nav-menu .elementor-item {
font-size: 15px !important;
}
/* ══════════════════════════════════════════════════════════════════════════
* DE AGENDA OP /events/
*
* 🔴 Hier stond één evenement, twee keer in de pagina: één blok met
* `elementor-hidden-desktop` en één met `elementor-hidden-mobile`. Elementor loste
* "responsive" op door het hele blok te verdubbelen en er één te verbergen, dus de bezoeker
* haalde beide binnen en gooide er één weg.
*
* `inc/evenement.php` gooit de mobiele kopie eruit en zet op de plek van de andere de echte
* agenda: zoveel evenementen als er klaarstaan, eerstvolgende bovenaan, en één opmaak die
* op elke breedte werkt.
*
* ⚠️ Deze sectie zit NIET meer in een Elementor-container, dus hij moet zelf zijn breedte
* en centrering regelen. Daarom hier een eigen `max-width` van 1140, gelijk aan de kaarten
* op de rest van de site.
* ══════════════════════════════════════════════════════════════════════════ */
main .villa-events {
max-width: 1140px;
margin: 0 auto;
padding: 0 clamp(14px, 4vw, 48px);
display: flex;
flex-direction: column;
gap: 26px;
}
main .villa-event {
display: grid;
grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
gap: clamp(20px, 3vw, 40px);
align-items: center;
background: var(--villa-vlak);
border: 1px solid var(--villa-lijn);
border-radius: 24px;
padding: clamp(20px, 2.6vw, 34px);
box-shadow: 0 1px 2px rgba(4, 4, 4, .04), 0 12px 32px rgba(4, 4, 4, .07);
}
/* ⚠️ Een evenement zonder banner mag geen lege kolom overhouden. */
main .villa-event:not(:has(.villa-event-beeld)) { grid-template-columns: 1fr; }
main .villa-event-beeld { margin: 0; }
main .villa-event-banner {
display: block; width: 100%; height: auto;
border-radius: 16px;
}
main .villa-event-datum {
margin: 0 0 6px;
font-weight: 700; font-size: 15px; letter-spacing: .12em; text-transform: uppercase;
color: var(--villa-roze);
}
main .villa-event-titel {
margin: 0 0 14px;
font-size: clamp(30px, 4vw, 46px); line-height: 1.02; letter-spacing: -.02em;
text-transform: uppercase; color: var(--villa-inkt);
}
main .villa-lineup { margin: 0 0 12px; }
/* ⚠️ Flex met `gap`, niet een spatie in de HTML. Een emoji is één teken breed maar rendert
op elk systeem anders; met een vaste kolom staan alle regels onder elkaar uitgelijnd,
ook als een naam over twee regels loopt. */
main .villa-lineup-regel {
display: flex; align-items: baseline; gap: 9px;
font-size: 16px; line-height: 1.55; color: var(--villa-zacht);
}
main .villa-lineup-regel > span[aria-hidden] {
flex: 0 0 auto; font-size: 13px; opacity: .55; line-height: 1;
}
main .villa-deuren {
margin: 0; font-size: 15px; font-weight: 600; color: var(--villa-inkt);
}
/* ── de knoppen ───────────────────────────────────────────────────────────
* De volle knop is de ticketknop en staat vooraan; de rest is een omlijning, zodat er één
* duidelijke eerste actie is in plaats van vier gelijke. Zonder ticketlink verdwijnt hij
* en wordt "Tables" vanzelf de eerste. */
main .villa-event-knoppen {
display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px;
}
main .villa-knop {
display: inline-flex; align-items: center; justify-content: center;
min-height: 44px; padding: 12px 22px;
border: 1px solid rgba(4, 4, 4, .22); border-radius: 100px;
font-size: 15px; font-weight: 700; text-decoration: none; color: var(--villa-inkt);
transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
main .villa-knop:hover { background: var(--villa-inkt); color: #fff; transform: translateY(-2px); }
main .villa-knop-vol {
border-color: transparent; color: #fff;
background: linear-gradient(135deg, var(--villa-roze), var(--villa-paars));
box-shadow: 0 8px 24px rgba(205, 25, 98, .28);
}
main .villa-knop-vol:hover {
background: linear-gradient(135deg, var(--villa-roze), var(--villa-paars));
color: #fff; box-shadow: 0 14px 34px rgba(205, 25, 98, .42);
}
/* Geen evenementen? Dan geen leeg gat maar een zin die iets doet. */
main .villa-events-leeg {
background: var(--villa-vlak); border: 1px solid var(--villa-lijn);
border-radius: 24px; padding: clamp(28px, 4vw, 52px); text-align: center;
}
main .villa-events-leeg p { margin: 0; font-size: 17px; color: var(--villa-zacht); }
main .villa-events-leeg a { color: var(--villa-roze); font-weight: 700; }
@media (max-width: 780px) {
main .villa-event { grid-template-columns: 1fr; padding: 18px; border-radius: 18px; }
main .villa-event-banner { border-radius: 12px; }
main .villa-event-knoppen { gap: 8px; }
main .villa-knop { flex: 1 1 calc(50% - 4px); padding: 12px 14px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
main .villa-knop { transition: none; }
main .villa-knop:hover { transform: none; }
}
/* ──────────────────────────────────────────────────────────────────────────
Twee kleintjes die de eindmeting opleverde, 21-9-2026
1. DE VOLGKNOP VAN DE INSTAGRAM-FEED
✓ Gemeten: witte tekst van 13 px op `rgb(233, 43, 130)`, de eigen roze van Smash Balloon.
Dat is 4,09:1 en de ondergrens is 4,5. Net te licht, op drie pagina's, op beide breedtes.
De merkroze van The Villa (#CD1962) haalt 5,37:1 met wit. Dus niet een willekeurige
donkerdere tint verzinnen: de kleur die hier al hoorde te staan lost het vanzelf op.
⚠️ `!important` is nodig omdat de plugin de kleur op het element zelf zet. Een gewone
regel in een stylesheet verliest daarvan; een `!important` wint er wel van.
2. DE COPYRIGHTREGEL
Stond op 12 px op desktop en groter op mobiel. Dezelfde ongelijkheid tussen breedtes als
bij het voetmenu en de contactregels, alleen omgekeerd. Nu 14 overal.
→ patterns/de-slechtste-waarde-zit-vaak-op-de-middelste-breedte
────────────────────────────────────────────────────────────────────────── */
main #sb_instagram .sbi_follow_btn a,
main #sb_instagram .sbi_follow_btn a:hover {
background: var(--villa-roze) !important;
}
.elementor-54 .elementor-element.elementor-element-1567c754 .elementor-heading-title,
.elementor-location-footer .elementor-element-1567c754 p {
font-size: 14px !important;
}