/* zaalzeven.nl v2 home. Gegenereerd uit de blokkenkiezer (zaalzeven-home-asteria-blokkenkiezer), keuze 1a-2g-3a-4b-5e-6d-7h-8b-9j. Deel 1-3 zijn letterlijk uit de kiezer; deel 4 (productie) is handwerk: echte links, interactie, menu, overflow. */ /* Lettertypes: Abhaya Libre 700 + Montserrat variabel 300-700, latin-subset (Google Fonts), self-hosted */ @font-face{font-family:"Abhaya Libre";font-style:normal;font-weight:700;font-display:swap;src:url(/v2/fonts/abhaya-libre-700.woff2) format("woff2")} @font-face{font-family:"Montserrat";font-style:normal;font-weight:300 700;font-display:swap;src:url(/v2/fonts/montserrat-var.woff2) format("woff2")} /* ===== 1. paginastijl.css (kiezer) ===== */ /* Gedeelde stijl van de voorbeeldpagina Zaal Zeven (alles onder .pv). VORMENTAAL = nieuwe Asteria-huisstijl 2026 (brand book hotel_asteria_brand_identity_2026.html + wellness-asteria.pages.dev, CSS letterlijk uit ~/Projects/wellness-asteria/static/css/style.css). KLEUREN = alleen Zaal Zeven. Bouwers gebruiken deze klassen en variabelen en schrijven eigen klassen met een blokprefix (b1-, b2-, ...). Kleurmapping Asteria -> Zaal Zeven zand (pagina) #F7E7D1 -> --zz-zand #f3eef6 lavendel-licht (achtergrond van .pv) ivoor (kaart, nav) #FFFAF1 -> --zz-ivoor #fff schelp (topbalk) #FEF1E2 -> --zz-schelp #e9e0ef (tweede, warmere tint) terracotta (actie) #C76E4E -> --zz-rood #d71921 kastanje (koppen) #442A06 -> --zz-paars #170024 (ook donkere vlakken en voet) taupe (bodytekst) #4C4841 -> --zz-paars-2 #2e1747 inkt (nav, UI-tekst) #221F1F -> --zz-paars #170024 warmbruine schaduw 93,52,20 -> aubergine 23,0,36 ster-watermerk terracotta 2% -> --zz-lavendel #cec0d6 (watermerk, lijnen, chips-rand) extra ZZ: --zz-oranje #f39400 alleen kleine labels en sterren; --zz-grijs #927f94 omschrijvende tekst. Componenten (prefix as-), en waar ze op wellness-asteria.pages.dev staan as-topbalk topbalk boven de navigatie: contact links, onderstreepte servicelinks rechts (.hd-top, bovenaan) as-nav navbalk: logo, gecentreerd menu, primaire knop rechts (.hd-nav, sticky) as-hero hero-foto met donker verloop onderin, serif-kop linksonder (.hb / .hb-kop) as-zoekbalk witte balk, radius 14, hangt half over de onderrand van de hero (.zoekbalk, onder de hero) as-tegels 4 fototegels met verloop, eerste bijna dubbel zo breed (.fac-row "Cabines", direct onder de zoekbalk) as-intro-ster gecentreerde intro met teken erboven en watermerk erachter (.intro-ster "Ontspanning op het hoogste niveau") as-lint USP-lint: horizontale rij chips over de volle breedte (.usp-lint, onder de intro) as-okaart kaart over foto, kaart overlapt zijwaarts; --spiegel = kaart links (.ok / .ok-rechts: stoomcabine, relaxruimte, fitness) as-carrousel aanbod-carrousel: kop + dots, strook met .as-ak-kaarten (tekst links, foto rechts) (.aanbod "Ons aanbod") as-dots carrousel-indicator: pill-streepjes 9 px, actief 39 px (.dots naast de aanbod-kop, onder de tegels op mobiel) as-wm-band witte band (70%) over een vlak met watermerk, gecentreerde CTA (.wm-band, boven de FAQ) as-wm watermerklaag op een sectie (de 7), as-wm--ster = de Asteria-ster (body::before ster-patroon) as-icoon Feather-lijnicoon 24-raster, stroke 2, ronde uiteinden; --cirkel / --vol (overal: topbalk, chips, specs, voet) HTML-opbouw (verkort; ICOON = ...) as-hero

Kop

Wat viert u?Bruiloft ICOON
... Bereken richtprijs
as-tegels
Vanaf € 395

Bruiloften

...

Bekijk
x4
as-intro

..

..

..
as-lint
ICOON Tekst ...
as-okaart

..

..

ICOON Detail x4
....
as-carrousel

..

..

..

ICOONDetail
..
x2
as-wm-band

..

..

..
AANNAME watermerk: Asteria gebruikt de ster uit het logo als watermerk. Zaal Zeven heeft geen ster; het meest herkenbare teken in het logo is de rode "7". --zz-wm-7 is een gestileerde 7 naar het logo (eigen pad, geen officieel logobestand), in lavendel. --zz-wm-ster is het originele Asteria-sterpad (asteria-ster-patroon.svg) in lavendel, zodat de kiezer beide kan tonen. Ter beoordeling door de opdrachtgever. */ .pv{ --zz-paars:#170024; --zz-paars-2:#2e1747; --zz-lavendel:#cec0d6; --zz-lavendel-licht:#f3eef6; --zz-lavendel-warm:#e9e0ef; --zz-rood:#d71921; --zz-oranje:#f39400; --zz-grijs:#927f94; --zz-zand:var(--zz-lavendel-licht); --zz-ivoor:#fff; --zz-schelp:var(--zz-lavendel-warm); /* vorm: bijna alles 4 px; chips 8, zoekbalk 14, dots pill */ --zz-radius:4px; --zz-radius-klein:4px; --zz-radius-chip:8px; --zz-radius-zoekbalk:14px; --zz-schaduw:-10px 12px 10px 0 rgba(23,0,36,.03),-5px 6px 7px 0 rgba(23,0,36,.04),-1px 1px 4px 0 rgba(23,0,36,.05); --zz-font-kop:"Abhaya Libre","Times New Roman",serif; /* alleen gewicht 700 */ --zz-font-tekst:"Montserrat","Trebuchet MS",Helvetica,Arial,sans-serif; --zz-wm-7:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400'%3E%3Cpath fill='%23cec0d6' d='M52 10H262Q292 10 288 40L284 72Q282 86 272 98Q200 190 160 290Q146 330 140 372Q137 392 116 392H86Q64 392 68 370Q82 280 130 190Q156 140 190 98H48Q20 98 22 70L26 38Q30 10 52 10Z'/%3E%3C/svg%3E"); --zz-wm-ster:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-515 -0 2841 2972' fill='none'%3E %3Cpath fill='%23cec0d6' d='M2326.3 844.054C1971.04 683.274 1569.16 654.676 1197.04 761.897C693.44 256.226 260.538 -1.0535e-05 260.538 -1.0535e-05C285.237 390.639 354.425 766.419 468.775 1140.02C171.892 1343.36 -221.438 1665.22 -515.148 2101.06C-514.595 2191.32 -450.336 2146.81 -406.138 2113.61C-19.8775 1851.23 332.681 1701.15 640.888 1621.12C820.582 2060.08 1062.53 2503.67 1368.99 2972.4C1195.3 2294.84 1248.65 1724.99 1248.65 1724.99C1248.65 1724.99 1231.79 1755.64 1197.35 1734.48C1169.88 1835.13 1180.46 2278.62 1162.91 2023.06C1154.65 1903.22 1177.6 1714.55 1205.01 1541.85C1604.09 1535.18 1861.25 1641.15 1926.51 1671.51C1932.18 1674.18 1937.51 1676.78 1942.98 1679.57C1743.99 1374.25 1527.59 1109.91 1318 887.113C1943.46 678.278 2326.1 844.182 2326.1 844.182M484.13 332.439C692.344 466.352 894.517 635.446 1073.03 803.037C1008.51 827.479 945.051 855.812 883.155 888.848C846.69 908.299 742.96 963.057 602.262 1052.12C542.831 817.741 503.929 581.725 484.13 332.439ZM-16.9162 1761.59C170.947 1578.75 351.147 1428.99 522.41 1306.27C543.821 1369.04 566.832 1431.65 590.707 1494.27C409.307 1549.63 207.473 1634.49 -16.7139 1761.46M1071.96 2250.35C954.771 2019.32 856.261 1802.06 774.68 1590.01C886.274 1567.3 991.031 1553.49 1088.86 1546.65C1062.19 1705.77 1053.78 1889.19 1071.96 2250.35ZM1718.96 1501.56C1611.22 1469.1 1449.6 1416.16 1227.88 1406.23C1252.34 1270.45 1274.7 1163.07 1278.87 1137.91C1288.99 1075.64 1246.25 1070.01 1246.25 1070.01L1196.58 1244.31C1196.58 1244.31 1178.55 1306.2 1171.38 1184.52C1151.09 1269.21 1133.02 1339.09 1117.57 1405.04C1001.4 1407.58 870.922 1422.9 725.745 1457.53C697.625 1377.94 671.693 1298.67 648.485 1219.66C847.594 1088.95 1033.18 995.034 1203.09 928.738C1509.17 1233.3 1718.96 1501.56 1718.96 1501.56Z'/%3E %3C/svg%3E"); --zz-teken-7:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400'%3E%3Cpath fill='%23d71921' stroke='%23cec0d6' stroke-width='10' stroke-linejoin='round' d='M52 10H262Q292 10 288 40L284 72Q282 86 272 98Q200 190 160 290Q146 330 140 372Q137 392 116 392H86Q64 392 68 370Q82 280 130 190Q156 140 190 98H48Q20 98 22 70L26 38Q30 10 52 10Z'/%3E%3C/svg%3E"); width:1200px;position:relative;background:var(--zz-zand);color:var(--zz-paars-2); font-family:var(--zz-font-tekst);font-weight:300;font-size:16px;line-height:1.875; -webkit-font-smoothing:antialiased;container:pv / inline-size} .pv *{box-sizing:border-box} .pv img{display:block;max-width:100%} .pv a{color:inherit;text-decoration:none} .pv p{margin:0} .pv b,.pv strong{font-weight:600} .pv .wrap{width:min(1152px,100% - 48px);margin-inline:auto;position:relative} /* typografie: Abhaya Libre Bold voor koppen (kastanje -> aubergine), Montserrat Light voor tekst */ .pv h1,.pv h2,.pv h3,.pv h4{font-family:var(--zz-font-kop);font-weight:700;margin:0;color:var(--zz-paars);line-height:1.05;text-wrap:balance} .pv h1{font-size:80px;line-height:1} .pv h2{font-size:52px} .pv h3{font-size:26px;line-height:1.15} .pv h4{font-size:19px;line-height:1.15} .pv .r{color:var(--zz-rood)} /* één woord in rood (Asteria .accent) */ .pv .om{color:var(--zz-grijs)} /* omschrijvende tekst */ .pv .lead{font-size:17px;line-height:1.8} /* Asteria .section-sub */ /* eyebrows: alleen als bewuste uitzondering; stijl van Asteria (uppercase, 13 px, 2.5 px spatiëring, rood) */ .pv .eyebrow{display:none} .pv .as-eyebrow{display:block;font-family:var(--zz-font-tekst);font-weight:500;font-size:13px;letter-spacing:2.5px;text-transform:uppercase;color:var(--zz-rood);line-height:1.4} /* secties: standaard transparant op lavendel-licht (watermerk schijnt door), zoals Asteria op zand */ .pv .sec{position:relative;padding:96px 0} .pv .sec--licht{background:var(--zz-ivoor)} /* Asteria .section-ivoor: lichter vlak */ .pv .sec--warm{background:var(--zz-schelp)} .pv .sec--donker{background:var(--zz-paars);color:var(--zz-lavendel)} .pv .sec--donker h1,.pv .sec--donker h2,.pv .sec--donker h3,.pv .sec--donker h4{color:#fff} .pv .sec--donker .om{color:var(--zz-lavendel)} /* knoppen: radius 4, Montserrat Bold, geen pill, geen schaduw */ .pv .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--zz-rood);color:#fff; font-family:var(--zz-font-tekst);font-weight:700;font-size:15px;line-height:1;padding:14px 26px;border:1.5px solid var(--zz-rood); border-radius:var(--zz-radius);cursor:pointer;white-space:nowrap} .pv .btn svg{flex:none;width:16px;height:16px} .pv .btn--klein{font-size:13.5px;padding:10px 18px} .pv .btn--ghost{background:transparent;border:1px solid #fff;color:#fff;font-weight:500} /* op foto of donker (Asteria btn-foto) */ .pv .btn--ghost-donker{background:transparent;border-color:var(--zz-rood);color:var(--zz-rood);font-weight:500} /* secundair op licht */ /* chips: wit, radius 8, Medium 15, icoon in rood, zachte schaduw */ .pv .chip{display:inline-flex;align-items:center;gap:9px;padding:10px 18px;border-radius:var(--zz-radius-chip);background:var(--zz-ivoor); color:var(--zz-paars-2);font-size:15px;font-weight:500;line-height:1.3;white-space:nowrap;box-shadow:var(--zz-schaduw)} .pv .chip svg{flex:none;width:16px;height:16px;color:var(--zz-rood)} .pv .sec--donker .chip{background:var(--zz-paars-2);color:#fff;box-shadow:none} .pv .chip--aan{background:var(--zz-paars);color:#fff} .pv .chip--aan svg{color:#fff} /* klein label, bijvoorbeeld "earlybird" */ .pv .label{display:inline-block;background:var(--zz-oranje);color:var(--zz-paars);font-size:11px;font-weight:600;letter-spacing:1.4px; text-transform:uppercase;line-height:1;padding:6px 10px;border-radius:var(--zz-radius)} .pv .label--rood{background:var(--zz-rood);color:#fff} .pv .label--lavendel{background:var(--zz-lavendel);color:var(--zz-paars)} /* kaarten: wit, radius 4, zachte schaduw, geen rand */ .pv .kaart{background:var(--zz-ivoor);border-radius:var(--zz-radius);box-shadow:var(--zz-schaduw);overflow:hidden;color:var(--zz-paars-2)} .pv .sec--licht .kaart{background:var(--zz-zand);box-shadow:none} .pv .sec--donker .kaart{background:var(--zz-paars-2);box-shadow:none;color:var(--zz-lavendel)} /* vinkjes: Feather check in rood (Asteria: functioneel icoon, geen gevulde bol) */ .pv .checks{list-style:none;margin:0;padding:0;display:grid;gap:10px} .pv .checks li{display:flex;align-items:flex-start;gap:11px;font-size:15px;line-height:1.6} .pv .checks li::before{content:"";flex:none;width:18px;height:18px;margin-top:3px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d71921' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/18px no-repeat} .pv .sec--donker .checks li::before{filter:brightness(0) invert(1)} /* ---------- as-icoon: Feather (feathericons.com, MIT), 24-raster, stroke 2, ronde uiteinden ---------- Paden (Feather): phone: mail: map-pin: calendar: users: star: arrow-right: chevron-down: check: heart: music: coffee: play: clock: ---------------------------------------------------------------------------------------------------------------- */ .pv .as-icoon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .pv .as-icoon--rood{color:var(--zz-rood)} .pv .as-icoon--cirkel{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border-radius:50%; background:var(--zz-ivoor);color:var(--zz-rood);box-shadow:var(--zz-schaduw)} .pv .as-icoon--cirkel svg{width:18px;height:18px} .pv .as-icoon--vol{background:var(--zz-rood);color:#fff;box-shadow:none} .pv .as-icoon--zacht{width:38px;height:38px;background:var(--zz-schelp);box-shadow:none} /* Asteria .icon-chip */ .pv .as-icoon--zacht svg{width:17px;height:17px} /* ---------- as-wm: watermerk als laag in een sectie (de 7, of de Asteria-ster) ---------- */ .pv .as-wm{position:relative;overflow:hidden} .pv .as-wm::before{content:"";position:absolute;z-index:0;pointer-events:none; width:1500px;height:2000px;right:-420px;top:-260px;background:var(--zz-wm-7) center/contain no-repeat;opacity:.3} .pv .as-wm--links::before{right:auto;left:-520px;top:-160px;transform:rotate(-8deg)} .pv .as-wm--ster::before{background-image:var(--zz-wm-ster);width:2100px;height:2200px;right:-760px;top:-500px;opacity:.5} .pv .as-wm--ster.as-wm--links::before{left:-980px;right:auto} .pv .sec--donker.as-wm::before{filter:brightness(0) invert(1);opacity:.06} .pv .as-wm>*{position:relative;z-index:1} /* ---------- as-topbalk + as-nav (kop van de pagina, gebruikt door de opbouwer) ---------- */ .pv .as-topbalk{background:var(--zz-schelp);display:flex;justify-content:space-between;align-items:center;gap:16px; padding:11px 64px;font-size:13px;line-height:1.4;color:var(--zz-paars);flex-wrap:wrap} .pv .as-topbalk__groep{display:flex;gap:26px;align-items:center;flex-wrap:wrap} .pv .as-topbalk__groep>span{display:inline-flex;align-items:center;gap:8px;font-weight:400;letter-spacing:.2px} .pv .as-topbalk .as-icoon{width:15px;height:15px} .pv .as-topbalk__links>span{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} .pv .as-nav{background:var(--zz-ivoor);display:flex;align-items:center;gap:24px;padding:14px 64px;min-height:64px} .pv .as-nav__logo{height:56px;width:auto} .pv .as-nav nav{display:flex;gap:34px;flex:1;justify-content:center;font-weight:500;font-size:15.5px;line-height:1.4;color:var(--zz-paars)} .pv .as-nav nav span{display:inline-flex;align-items:center;gap:5px} .pv .as-nav nav .as-icoon{width:14px;height:14px} .pv .as-nav .btn{padding:13px 24px;font-size:15px} .pv .as-nav__menu{display:none;color:var(--zz-paars)} .pv .as-nav__menu .as-icoon{width:26px;height:26px} /* ---------- as-hero + as-zoekbalk: zoekbalk-kaart hangt half over de onderrand van de hero ---------- */ .pv .as-hero{position:relative;padding-bottom:46px} .pv .as-hero__foto{position:relative;height:640px;overflow:hidden} .pv .as-hero__foto>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .pv .as-hero__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,0,36,0) 40%,rgba(23,0,36,.5))} .pv .as-hero__kop{position:absolute;left:24px;bottom:110px;z-index:1;font-size:88px;line-height:1;color:#fff;max-width:12em} .pv .as-hero__kop.wrap{left:0;right:0} .pv .as-zoekbalk{position:absolute;left:24px;right:24px;bottom:0;z-index:2;background:var(--zz-ivoor);border-radius:var(--zz-radius-zoekbalk); box-shadow:var(--zz-schaduw);display:flex;align-items:center;gap:26px;padding:14px 14px 14px 26px;flex-wrap:wrap} .pv .as-zoekbalk__veld{line-height:1.35} .pv .as-mini{display:block;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--zz-paars-2);font-weight:500} .pv .as-waarde{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:500;color:var(--zz-paars)} .pv .as-waarde .as-icoon{width:14px;height:14px;color:var(--zz-grijs)} .pv .as-zoekbalk .btn{margin-left:auto} /* losse zoekbalk (niet in een hero): .as-zoekbalk.as-zoekbalk--los */ .pv .as-zoekbalk--los{position:relative;left:auto;right:auto;bottom:auto} /* ---------- as-tegels: 4 fototegels met donker verloop ---------- */ .pv .as-tegels{display:grid;grid-template-columns:1.9fr 1fr 1fr 1fr;gap:14px;height:460px} .pv .as-tegels--overlap{margin-top:-20px} .pv .as-tegel{position:relative;border-radius:var(--zz-radius);overflow:hidden;min-width:0;color:#fff} .pv .as-tegel>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .pv .as-tegel::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(23,0,36,.8) 0%,rgba(23,0,36,.25) 45%,transparent 72%)} .pv .as-tegel__tekst{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:30px} .pv .as-tegel__mini{display:block;margin-bottom:8px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8);white-space:nowrap} .pv .as-tegel h3{color:#fff;font-size:28px;line-height:1.1;margin:0 0 12px;hyphens:auto;overflow-wrap:break-word} .pv .as-tegel p{font-size:14px;line-height:1.6;color:rgba(255,255,255,.85);max-width:360px;margin:0 0 18px} .pv .as-tegel .btn{padding:11px 24px;font-size:13.5px} /* ---------- as-intro-ster: gecentreerde intro, teken erboven, watermerk erachter ---------- */ .pv .as-intro-ster{position:relative;padding:96px 0;text-align:center} .pv .as-intro-ster__teken{display:block;width:auto;height:64px;aspect-ratio:3/4;margin:0 auto 22px;background:var(--zz-teken-7) center/contain no-repeat} .pv .as-intro-ster h2{max-width:760px;margin:0 auto 18px} .pv .as-intro-ster p{max-width:640px;margin:0 auto 10px} .pv .as-intro-ster .btn{margin-top:28px} /* ---------- as-lint: USP-chips als lint over de volle breedte (op de site schuift het door; hier vaste stand) ---------- */ .pv .as-lint{display:flex;gap:12px;padding:10px 0 34px;overflow:hidden} .pv .as-lint__baan{display:flex;gap:12px;flex:none;margin-left:-60px} .pv .as-lint .chip{flex:none} /* ---------- as-okaart: kaart over foto, kaart overlapt zijwaarts (--spiegel = kaart links, foto rechts) ---------- */ .pv .as-okaart{position:relative;padding:40px 24px;display:grid;grid-template-columns:minmax(0,700px) minmax(0,440px);justify-content:center;align-items:center} .pv .as-okaart__foto{position:relative;border-radius:var(--zz-radius);overflow:hidden;box-shadow:var(--zz-schaduw)} .pv .as-okaart__foto>img{display:block;width:100%;height:460px;object-fit:cover} .pv .as-okaart__kaart{position:relative;z-index:1;max-width:440px;background:var(--zz-ivoor);border-radius:var(--zz-radius);box-shadow:var(--zz-schaduw); padding:30px 32px 32px;margin-left:-90px} .pv .as-okaart--spiegel{grid-template-columns:minmax(0,440px) minmax(0,700px)} .pv .as-okaart--spiegel .as-okaart__foto{order:2} .pv .as-okaart--spiegel .as-okaart__kaart{order:1;margin-left:0;margin-right:-90px;justify-self:end} .pv .as-okaart__kaart h3{font-size:27px;line-height:1.15} .pv .as-okaart__kaart .as-body,.pv .as-body{font-size:13.5px;line-height:1.7;color:var(--zz-paars-2);margin-top:10px} .pv .as-okaart__kaart hr,.pv .as-hr{border:0;border-top:1px solid rgba(23,0,36,.14);margin:16px 0} .pv .as-specs{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px} .pv .as-spec{display:flex;align-items:center;gap:9px;font-size:12.5px;letter-spacing:.52px;line-height:1.35;color:var(--zz-paars)} .pv .as-spec .as-icoon{width:16px;height:16px;color:var(--zz-rood)} .pv .as-knoppen{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap} .pv .as-knoppen .btn{padding:10px 18px;font-size:13.5px} /* ---------- as-carrousel + as-ak (aanbod-kaart) + as-dots ---------- */ .pv .as-carrousel__kop{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:36px} .pv .as-carrousel__strook{display:flex;gap:24px;overflow:hidden;padding-bottom:10px} .pv .as-ak{flex:0 0 min(820px,92%);display:grid;grid-template-columns:1fr 1.45fr;align-items:center;background:var(--zz-ivoor); border-radius:var(--zz-radius);box-shadow:var(--zz-schaduw);overflow:hidden} .pv .as-ak__vlak{padding:34px 30px;display:flex;flex-direction:column;justify-content:center} .pv .as-ak__naam{font-size:34px;color:var(--zz-rood);line-height:1.1} .pv .as-ak__body{font-size:13px;line-height:1.7;margin-top:12px} .pv .as-ak__details{margin-top:14px;display:grid;gap:9px} .pv .as-ak__details .as-spec .as-icoon--cirkel{width:32px;height:32px;box-shadow:none;background:var(--zz-schelp)} .pv .as-ak__details .as-spec .as-icoon--cirkel svg{width:14px;height:14px} .pv .as-ak__knoppen{display:flex;gap:10px;padding-top:20px;flex-wrap:wrap} .pv .as-ak__knoppen .btn{padding:10px 18px;font-size:13.5px} .pv .as-ak__foto{padding:14px 14px 14px 0} .pv .as-ak__foto img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--zz-radius)} .pv .as-dots{display:flex;gap:7px;align-items:center} .pv .as-dots span{height:9px;width:25px;border-radius:22px;background:rgba(215,25,33,.25)} .pv .as-dots span.is-aan{width:39px;background:var(--zz-rood)} .pv .sec--donker .as-dots span{background:rgba(206,192,214,.35)} .pv .sec--donker .as-dots span.is-aan{background:var(--zz-rood)} /* ---------- as-wm-band: band van 70% wit over een vlak met watermerk (of foto/patroon), gecentreerde CTA ---------- */ .pv .as-wm-band{position:relative;min-height:380px;display:flex;align-items:center;padding:60px 24px;overflow:hidden;background:var(--zz-zand)} .pv .as-wm-band::before{content:"";position:absolute;width:720px;height:960px;left:-40px;top:-230px;transform:rotate(-8deg); background:var(--zz-wm-7) center/contain no-repeat;opacity:.7;pointer-events:none} .pv .as-wm-band.as-wm--ster::before{background-image:var(--zz-wm-ster);width:2100px;height:2200px;left:-700px;top:-700px;transform:none;opacity:.6} .pv .as-wm-band__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* optioneel: foto i.p.v. watermerk (zoals de mozaïekfoto op de site) */ .pv .as-wm-band__band{position:relative;z-index:1;width:min(1080px,100%);margin:0 auto;background:rgba(255,255,255,.7);border-radius:var(--zz-radius); padding:56px 32px;text-align:center;box-shadow:var(--zz-schaduw)} .pv .as-wm-band__band h2{margin-bottom:16px} .pv .as-wm-band__band p{max-width:560px;margin:0 auto 26px} .pv .as-wm-band__foto~.as-wm-band__band{background:rgba(255,255,255,.85)} /* mobiel: de voorbeeldpagina is een container van 390 px breed (Asteria-breekpunt 900 px) */ @container pv (max-width:700px){ .pv .wrap{width:calc(100% - 40px)} .pv h1{font-size:44px} .pv h2{font-size:32px} .pv h3{font-size:24px} .pv .lead{font-size:16px} .pv .sec{padding:72px 0} .pv .btn{font-size:15px;padding:14px 22px} .pv .btn--klein{font-size:13px;padding:10px 16px} .pv .as-topbalk{justify-content:center;padding:10px 20px;gap:8px 16px} .pv .as-topbalk__groep{gap:16px;justify-content:center} .pv .as-nav{padding:12px 20px;gap:12px} .pv .as-nav__logo{height:44px} .pv .as-nav nav{display:none} .pv .as-nav .btn{margin-left:auto;padding:10px 14px;font-size:13px} .pv .as-nav__menu{display:flex} .pv .as-hero{padding-bottom:0} .pv .as-hero__foto{height:560px} .pv .as-hero__kop{left:20px;right:20px;bottom:60px;font-size:44px} .pv .as-hero__kop.wrap{left:0;right:0} .pv .as-zoekbalk{position:relative;left:0;right:0;margin:-34px 20px 0;gap:14px 24px;padding:16px 18px 18px} .pv .as-zoekbalk .btn{margin-left:0;width:100%} .pv .as-tegels{display:flex;height:420px;gap:14px;overflow:hidden} .pv .as-tegel{flex:0 0 80%} .pv .as-tegel h3{font-size:24px} .pv .as-tegel__tekst{padding:24px} .pv .as-intro-ster{padding:72px 0} .pv .as-lint__baan{margin-left:-30px} .pv .as-okaart,.pv .as-okaart--spiegel{grid-template-columns:1fr;padding:32px 0} .pv .as-okaart__foto>img{height:300px} .pv .as-okaart__foto{border-radius:0} .pv .as-okaart--spiegel .as-okaart__foto{order:0} .pv .as-okaart__kaart,.pv .as-okaart--spiegel .as-okaart__kaart{order:1;margin:-60px 16px 0;max-width:none;justify-self:stretch;padding:24px 22px 26px} .pv .as-carrousel__kop{flex-direction:column;align-items:flex-start} .pv .as-ak{flex-basis:92%;grid-template-columns:1fr;align-content:start} .pv .as-ak__foto{padding:0;order:-1} .pv .as-ak__foto img{border-radius:0} .pv .as-ak__vlak{padding:24px 24px 28px} .pv .as-wm-band{min-height:0;padding:56px 20px} .pv .as-wm-band__band{padding:40px 22px} .pv .as-wm::before{width:900px;height:1200px;right:-560px;top:-60px} .pv .as-wm--ster::before{width:1300px;height:1400px;right:-600px;top:-300px} } /* ===== 2. kop, voet, sticky (kiezer build.py VAST_CSS) ===== */ .pv .pv-kop{position:sticky;top:0;z-index:30;box-shadow:0 1px 0 var(--zz-lavendel),0 6px 18px rgba(23,0,36,.06)} html{scroll-padding-top:136px} @media (max-width:700px){html{scroll-padding-top:72px}} .pv .pv-voet{position:relative;overflow:hidden;background:var(--zz-paars);color:var(--zz-lavendel);padding:80px 0 0;font-size:14.5px;line-height:1.8} .pv .pv-voet::before{content:"";position:absolute;width:900px;height:1200px;right:-260px;top:-380px;background:var(--zz-wm-7) center/contain no-repeat; filter:brightness(0) invert(1);opacity:.06;pointer-events:none} .pv .vv-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:56px;padding-bottom:56px} .pv .vv-merk img{width:150px;height:auto;margin-bottom:14px} .pv .vv-merk h3{color:#fff;font-size:26px;margin-bottom:16px} .pv .vv-merk p{display:flex;gap:12px;align-items:flex-start;margin-bottom:10px} .pv .vv-merk .as-icoon{color:var(--zz-rood);margin-top:4px;width:18px;height:18px} .pv .vv-social{display:flex;gap:10px;margin-top:18px} .pv .vv-social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid rgba(206,192,214,.35);color:#fff;transition:background .25s,border-color .25s} .pv .vv-social a:hover{background:var(--zz-rood);border-color:var(--zz-rood)} .pv .vv-social .as-icoon{width:18px;height:18px;margin:0} .pv .vv-kol{display:flex;flex-direction:column;gap:6px} .pv .vv-kol h4{color:#fff;font-family:var(--zz-font-tekst);font-weight:500;font-size:13px;letter-spacing:2.5px;text-transform:uppercase;margin:0 0 12px} .pv .vv-onder{position:relative;border-top:1px solid rgba(206,192,214,.18);padding:22px 0;text-align:center;font-size:13px;color:var(--zz-grijs)} .pv .pv-sticky{position:sticky;bottom:0;z-index:6;background:var(--zz-ivoor);color:var(--zz-paars);border-top:1px solid var(--zz-lavendel);padding:10px 16px; display:none;justify-content:space-between;align-items:center;gap:12px;box-shadow:0 -6px 18px rgba(23,0,36,.08)} .pv .pv-sticky b{display:block;font-family:var(--zz-font-kop);font-weight:700;font-size:19px;line-height:1.1} .pv .pv-sticky span.om{display:block;font-size:12.5px;line-height:1.4;margin-top:2px} .pv .pv-sticky .btn{font-size:13.5px;padding:12px 16px} @container pv (max-width:700px){ .pv .pv-voet{padding:56px 0 0} .pv .vv-grid{grid-template-columns:1fr 1fr;gap:32px 24px;padding-bottom:40px} .pv .vv-grid>.vv-merk{grid-column:1/-1} .pv .ev-sticky{display:flex} /* alleen de ticketbalk op evenementpagina's; algemene richtprijsbalk is weg (8 okt) */ } /* ===== 3. gekozen blokken ===== */ /* ===== blok 1a (uit blokkenkiezer) ===== */ .pv .b1a{position:relative;height:720px;overflow:hidden;color:#fff} .pv .b1a-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0} .pv .b1a::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,0,36,0) 30%,rgba(23,0,36,.78)),linear-gradient(90deg,rgba(23,0,36,.45),rgba(23,0,36,0) 60%)} .pv .b1a-tekst{position:absolute;left:0;right:0;bottom:56px;z-index:1} .pv .b1a h1{color:#fff;font-size:88px;max-width:9em} .pv .b1a-sub{font-size:18px;line-height:1.7;max-width:520px;margin-top:18px;color:rgba(255,255,255,.9)} .pv .b1a-knoppen{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap} .pv .b1a-play{position:absolute;right:48px;bottom:56px;z-index:2;display:flex;align-items:center;gap:14px;font-weight:500;font-size:15px;color:#fff} .pv .b1a-play .as-icoon--cirkel{width:64px;height:64px} .pv .b1a-play .as-icoon--cirkel svg{width:22px;height:22px;margin-left:3px} @container pv (max-width:700px){ .pv .b1a{height:auto;min-height:680px;display:flex;flex-direction:column;justify-content:flex-end;padding:0 0 40px} .pv .b1a-foto{object-position:62% 20%} .pv .b1a::after{background:linear-gradient(180deg,rgba(23,0,36,0) 20%,rgba(23,0,36,.85) 62%)} .pv .b1a-tekst{position:relative;bottom:auto} .pv .b1a h1{font-size:44px} .pv .b1a-sub{font-size:16px} .pv .b1a-knoppen{flex-direction:column} .pv .b1a-knoppen .btn{width:100%} .pv .b1a-play{top:24px;bottom:auto;right:auto;left:20px;font-size:14px;gap:10px} .pv .b1a-play .as-icoon--cirkel{width:48px;height:48px} .pv .b1a-play .as-icoon--cirkel svg{width:18px;height:18px} } /* ===== blok 2g (uit blokkenkiezer) ===== */ .pv .b2g{padding-top:0;padding-bottom:80px} .pv .b2g .as-tegels{position:relative;z-index:2} .pv .b2g .as-tegel::after{background:linear-gradient(to top,rgba(23,0,36,.88) 0%,rgba(23,0,36,.45) 50%,transparent 78%)} .pv .b2g .as-tegel h3{font-size:30px} .pv .b2g .as-tegel:first-child h3{font-size:40px} .pv .b2g-dots{display:none;margin-top:18px;justify-content:center} @container pv (max-width:700px){ .pv .b2g{padding-bottom:56px} .pv .b2g .as-tegel:first-child h3{font-size:30px} .pv .b2g-dots{display:flex} } /* ===== blok 3a (uit blokkenkiezer) ===== */ .pv .b3a{padding:80px 0} .pv .b3a-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:32px} .pv .b3a-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--zz-rood);white-space:nowrap} .pv .b3a-link .as-icoon{width:16px;height:16px} .pv .b3a-lijst{display:grid;gap:14px} .pv .b3a-rij{display:grid;grid-template-columns:96px 150px minmax(0,1fr) auto;align-items:center;gap:28px;background:var(--zz-ivoor); border-radius:var(--zz-radius);box-shadow:var(--zz-schaduw);padding:16px 26px 16px 16px} .pv .b3a-datum{display:flex;flex-direction:column;align-items:center;justify-content:center;height:96px;border-radius:var(--zz-radius);background:var(--zz-schelp);color:var(--zz-paars);line-height:1} .pv .b3a-dag{font-size:12px;font-weight:500;letter-spacing:1.4px;text-transform:uppercase} .pv .b3a-nr{font-family:var(--zz-font-kop);font-weight:700;font-size:40px;margin:4px 0 2px} .pv .b3a-mnd{font-size:12px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--zz-rood)} .pv .b3a-foto img{width:100%;height:96px;object-fit:cover;border-radius:var(--zz-radius)} .pv .b3a-foto--poster img{object-fit:contain;background:var(--zz-paars)} .pv .b3a-leeg{height:96px;border-radius:var(--zz-radius);background:var(--zz-zand);display:flex;align-items:center;justify-content:center;color:var(--zz-grijs)} .pv .b3a-info h3{font-size:26px} .pv .b3a-meta{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:8px;font-size:13.5px;line-height:1.5} .pv .b3a-meta span{display:inline-flex;align-items:center;gap:7px} .pv .b3a-meta .as-icoon{width:15px;height:15px;color:var(--zz-rood)} .pv .b3a-actie{display:flex;align-items:center;gap:20px} .pv .b3a-prijs{font-size:13px;line-height:1.3;text-align:right;color:var(--zz-grijs)} .pv .b3a-prijs b{display:block;font-family:var(--zz-font-kop);font-weight:700;font-size:24px;color:var(--zz-paars)} .pv .b3a-rij--leeg h3{color:var(--zz-grijs)} .pv .b3a-pijl{display:none} /* watermerk-7 (kiezer 1a): kleiner dan de standaard as-wm zodat de hele 7 (balk rechtsboven, poot naar rechtsonder) in de sectie valt */ @container pv (min-width:701px){ .pv .b3a.as-wm::before{width:1100px;height:1460px;right:-180px;top:-150px} .pv .b3a.as-wm::after{content:"";position:absolute;z-index:0;pointer-events:none;width:760px;height:1010px;left:-330px;bottom:-560px; background:var(--zz-lavendel);-webkit-mask:var(--zz-logo-7) center/contain no-repeat;mask:var(--zz-logo-7) center/contain no-repeat;opacity:.3} } /* telefoon = kiezer 1e: eerste zichtbare evenement groot (foto 16:9 + datumlabel), de rest compact (vierkant 80 px + pijl). :nth-child(1 of ...) i.p.v. :first-child, want home.js laat voorbije rijen verborgen vooraan staan. */ @container pv (max-width:700px){ .pv .b3a{padding:64px 0} .pv .b3a-kop{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:24px} .pv .b3a .b3a-rij{position:relative;grid-template-columns:80px minmax(0,1fr) auto;grid-template-areas:"foto info pijl" "foto actie pijl"; gap:2px 14px;padding:12px 14px 12px 12px;align-items:center} .pv .b3a .b3a-datum,.pv .b3a .b3a-tekst,.pv .b3a .b3a-actie .btn{display:none} .pv .b3a .b3a-foto{display:block;grid-area:foto} .pv .b3a .b3a-foto img{width:80px;height:80px;object-fit:cover} .pv .b3a .b3a-foto--poster img{object-fit:contain;background:var(--zz-paars)} .pv .b3a .b3a-leeg{display:flex;grid-area:foto;width:80px;height:80px} .pv .b3a .b3a-info{grid-area:info;align-self:end;display:flex;flex-direction:column} .pv .b3a .b3a-meta{order:-1;margin-top:0;font-size:12.5px;line-height:1.4} .pv .b3a .b3a-meta .as-icoon{width:14px;height:14px} .pv .b3a .b3a-info h3{font-size:20px;margin-top:4px} .pv .b3a .b3a-rij--leeg .b3a-meta{order:0;margin-top:2px} .pv .b3a .b3a-actie{grid-area:actie;align-self:start;display:block} .pv .b3a .b3a-prijs{text-align:left;font-size:13px} .pv .b3a .b3a-prijs b{display:inline;font-size:20px;margin-left:6px} .pv .b3a .b3a-pijl{grid-area:pijl;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%; background:var(--zz-schelp);color:var(--zz-rood)} .pv .b3a .b3a-pijl::after{content:"";position:absolute;inset:0;border-radius:var(--zz-radius)} /* hele compacte rij klikbaar */ .pv .b3a .b3a-pijl .as-icoon{width:18px;height:18px} /* groot: eerste zichtbare evenement */ .pv .b3a .b3a-rij:nth-child(1 of :not([hidden],.b3a-rij--leeg)){grid-template-columns:minmax(0,1fr);grid-template-areas:"foto" "info" "actie"; gap:0;padding:0;overflow:hidden} .pv .b3a .b3a-rij:nth-child(1 of :not([hidden],.b3a-rij--leeg)) .b3a-foto img{width:100%;height:auto;aspect-ratio:16/9;border-radius:0} .pv .b3a .b3a-rij:nth-child(1 of :not([hidden],.b3a-rij--leeg)) .b3a-datum{display:flex;grid-area:foto;align-self:start;justify-self:start; position:relative;z-index:1;margin:12px;width:58px;height:68px;background:var(--zz-ivoor);box-shadow:0 6px 16px rgba(23,0,36,.2)} .pv .b3a .b3a-rij:nth-child(1 of :not([hidden],.b3a-rij--leeg)) .b3a-nr{font-size:30px;margin:3px 0 2px} .pv .b3a .b3a-rij:nth-child(1 of :not([hidden],.b3a-rij--leeg)) .b3a-info{align-self:auto;padding:18px 18px 0} .pv .b3a .b3a-rij:nth-child(1 of :not([hidden],.b3a-rij--leeg)) .b3a-meta{order:0;margin-top:8px;font-size:13.5px} .pv .b3a .b3a-rij:nth-child(1 of :not([hidden],.b3a-rij--leeg)) .b3a-info h3{font-size:26px;margin-top:0} .pv .b3a .b3a-rij:nth-child(1 of :not([hidden],.b3a-rij--leeg)) .b3a-tekst{display:block;font-size:13px} .pv .b3a .b3a-rij:nth-child(1 of :not([hidden],.b3a-rij--leeg)) .b3a-actie{display:flex;align-items:center;justify-content:space-between;gap:12px; margin:18px;padding-top:16px;border-top:1px solid rgba(23,0,36,.1)} .pv .b3a .b3a-rij:nth-child(1 of :not([hidden],.b3a-rij--leeg)) .b3a-prijs b{display:block;font-size:26px;margin-left:0} .pv .b3a .b3a-rij:nth-child(1 of :not([hidden],.b3a-rij--leeg)) .b3a-actie .btn{display:inline-flex;flex:1} .pv .b3a .b3a-rij:nth-child(1 of :not([hidden],.b3a-rij--leeg)) .b3a-pijl{display:none} } /* ===== blok 4b (uit blokkenkiezer) ===== */ .pv .b4b-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:36px} .pv .b4b-kop h2{margin-bottom:12px} .pv .b4b-kop p{max-width:560px} .pv .b4b-mozaiek{display:grid;grid-template-columns:1.6fr 1fr 1fr;grid-template-rows:250px 250px;gap:14px} .pv .b4b-tegel{position:relative;border-radius:var(--zz-radius);overflow:hidden;color:#fff} .pv .b4b-tegel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .pv .b4b-tegel::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(23,0,36,.78) 0%,rgba(23,0,36,.2) 45%,transparent 70%)} .pv .b4b-tegel--groot{grid-row:span 2} .pv .b4b-label{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:22px 24px} .pv .b4b-label .as-tegel__mini{margin-bottom:4px} .pv .b4b-label h3{color:#fff;font-size:26px} .pv .b4b-tegel--groot .b4b-label{padding:30px} .pv .b4b-tegel--groot h3{font-size:34px} .pv .b4b-vraag{position:absolute;top:14px;right:14px;z-index:1} .pv .b4b-voet{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:24px;font-size:14px;color:var(--zz-paars)} .pv .b4b-voet span{display:inline-flex;align-items:center;gap:8px;font-weight:500} .pv .b4b-voet .as-icoon{width:16px;height:16px;color:var(--zz-rood)} @container pv (max-width:700px){ .pv .b4b-kop{flex-direction:column;align-items:flex-start;gap:20px} .pv .b4b-kop .btn{width:100%} .pv .b4b-mozaiek{grid-template-columns:1fr 1fr;grid-template-rows:260px 180px 180px;gap:10px} .pv .b4b-tegel--groot{grid-row:auto;grid-column:span 2} .pv .b4b-label{padding:14px 14px} .pv .b4b-label h3{font-size:21px} .pv .b4b-tegel--groot h3{font-size:28px} .pv .b4b-label .as-tegel__mini{font-size:9.5px;letter-spacing:.08em;white-space:normal;line-height:1.4} .pv .b4b-vraag{top:10px;right:10px} } /* ===== blok 5e (uit blokkenkiezer) ===== */ .pv .b5e{padding-bottom:40px} .pv .b5e .as-lint{margin-top:48px} .pv .b5e-nr{font-family:var(--zz-font-kop);font-weight:700;font-size:19px;line-height:1;color:var(--zz-rood)} @container pv (max-width:700px){ .pv .b5e{padding-bottom:24px} .pv .b5e .btn{width:100%} .pv .b5e .as-lint{margin-top:36px} } /* ===== blok 6d (uit blokkenkiezer) ===== */ .pv .b6d .b6d-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:44px} .pv .b6d .b6d-muur{columns:3;column-gap:24px} .pv .b6d .b6d-kaart{break-inside:avoid;margin-bottom:24px;padding:28px 28px 30px} .pv .b6d .b6d-kaart p{font-size:14px;line-height:1.75} .pv .b6d .b6d-kaart--groot p{font-family:var(--zz-font-kop);font-weight:700;font-size:24px;line-height:1.3;color:var(--zz-paars)} .pv .b6d .b6d-naam{margin-top:16px;font-size:13px;line-height:1.5;font-weight:600;color:var(--zz-paars)} .pv .b6d .b6d-kaart .b6d-naam{font-family:var(--zz-font-tekst);font-size:13px;line-height:1.5} .pv .b6d .b6d-naam span{display:block;font-weight:300;color:var(--zz-grijs)} .pv .b6d .b6d-voet{display:flex;justify-content:center;gap:12px;margin-top:16px;flex-wrap:wrap} @container pv (max-width:700px){ .pv .b6d .b6d-kop{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:28px} .pv .b6d .b6d-muur{columns:1} .pv .b6d .b6d-kaart{margin-bottom:14px;padding:24px 22px} .pv .b6d .b6d-kaart--groot p{font-size:21px} .pv .b6d .b6d-voet .btn{width:100%} } /* ===== blok 7h (uit blokkenkiezer) ===== */ .pv .b7h{padding:96px 0} .pv .b7h__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center} .pv .b7h__teken{display:block;height:58px;aspect-ratio:3/4;background:var(--zz-teken-7) left center/contain no-repeat;margin-bottom:26px} .pv .b7h__tekst h2{max-width:440px} .pv .b7h__tekst .lead{margin-top:18px;max-width:460px} .pv .b7h__knoppen{display:flex;gap:10px;margin-top:30px;flex-wrap:wrap} .pv .b7h__beeld{position:relative;display:grid;grid-template-columns:280px 1fr;align-items:center} .pv .b7h__beeld>img{grid-column:1;grid-row:1;width:100%;height:470px;object-fit:cover;border-radius:var(--zz-radius);box-shadow:var(--zz-schaduw)} .pv .b7h__lijst{grid-column:1 / 3;grid-row:1;margin-left:266px;display:flex;flex-direction:column;align-items:stretch;gap:12px;position:relative;z-index:1} .pv .b7h__pijl{align-self:center;width:32px;height:32px} .pv .b7h__pijl svg{width:15px;height:15px} .pv .b7h__usp{display:flex;align-items:center;gap:14px;padding:15px 20px;border-radius:var(--zz-radius);background:rgba(255,255,255,.55);font-size:15px;font-weight:500;line-height:1.3;color:var(--zz-paars);white-space:nowrap} .pv .b7h__usp .as-icoon{color:var(--zz-rood)} .pv .b7h__usp--aan{background:var(--zz-ivoor);box-shadow:var(--zz-schaduw)} .pv .b7h__usp--vaag{opacity:.45} .pv .b7h__usp--vaagst{opacity:.2} @container pv (max-width:700px){ .pv .b7h{padding:64px 0} .pv .b7h__grid{grid-template-columns:1fr;gap:36px} .pv .b7h__teken{height:48px;margin-bottom:18px} .pv .b7h__knoppen .btn{width:100%} .pv .b7h__beeld{grid-template-columns:1fr} .pv .b7h__beeld>img{height:260px} .pv .b7h__lijst{grid-column:1;grid-row:2;margin:-28px 14px 0} .pv .b7h__pijl,.pv .b7h__usp--vaagst{display:none} .pv .b7h__usp{background:var(--zz-ivoor);padding:13px 16px;font-size:14px;white-space:normal} .pv .b7h__usp--vaag{opacity:1;color:var(--zz-grijs)} .pv .b7h__usp--vaag .as-icoon{opacity:.5} } /* ===== blok 8b (uit blokkenkiezer) ===== */ .pv .b8b-grid{display:grid;grid-template-columns:360px 1fr;gap:72px;align-items:start} .pv .b8b-links h2{margin-bottom:16px} .pv .b8b-links .lead{margin-bottom:26px} .pv .b8b-regels{display:grid;gap:12px;margin-bottom:28px} .pv .b8b-regels a{display:flex;align-items:center;gap:12px;font-weight:500;color:var(--zz-paars)} .pv .b8b-item{background:var(--zz-zand);border-radius:var(--zz-radius);margin-bottom:12px} .pv .b8b-item summary{padding:20px 24px;font-size:16px;font-weight:600;line-height:1.4;color:var(--zz-paars)} .pv .b8b-antw{padding:0 24px 22px;font-size:14.5px;line-height:1.8} .pv .b8b-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer} .pv .b8b-item summary::-webkit-details-marker{display:none} .pv .b8b-item summary .as-icoon{width:20px;height:20px;color:var(--zz-rood);transition:transform .25s} .pv .b8b-item[open] summary .as-icoon{transform:rotate(180deg)} .pv .b8b-antw p+p{margin-top:10px} .pv .b8b-link a{display:inline-flex;align-items:center;gap:8px;color:var(--zz-rood);font-weight:600} .pv .b8b-link .as-icoon{width:16px;height:16px} .pv .b8b-link{margin-top:10px} @container pv (max-width:700px){ .pv .b8b-grid{grid-template-columns:1fr;gap:36px} .pv .b8b-links .btn{width:100%} .pv .b8b-item summary{padding:18px 18px;font-size:15px} .pv .b8b-antw{padding:0 18px 20px} } /* ===== blok 9j (uit blokkenkiezer) ===== */ .pv .b9j{background:var(--zz-schelp);padding:80px 0 88px} .pv .b9j-wolk{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:auto auto;column-gap:20px;align-items:start;width:min(1356px,100cqw - 48px);margin-left:calc((100% - min(1356px,100cqw - 48px)) / 2)} .pv .b9j-kol{display:flex;flex-direction:column;gap:20px;min-width:0} .pv .b9j-kol--buiten{grid-row:1 / 3} .pv .b9j-kol--laag{padding-top:50px} .pv .b9j-kol img{display:block;width:100%;height:auto;object-fit:cover;border-radius:12px;box-shadow:0 6px 16px rgba(23,0,36,.08)} .pv .b9j-h1{aspect-ratio:152/189} .pv .b9j-h2{aspect-ratio:1/1} .pv .b9j-h3{aspect-ratio:152/303} .pv .b9j-midden{grid-column:3 / 7;grid-row:2;text-align:center;padding-top:44px} .pv .b9j-midden h2{font-size:48px} .pv .b9j-midden .lead{margin:12px auto 0;max-width:470px} .pv .b9j-balk{display:flex;align-items:center;gap:16px;margin:30px auto 0;max-width:640px;background:var(--zz-ivoor);border-radius:var(--zz-radius-zoekbalk);box-shadow:0 18px 36px -16px rgba(23,0,36,.2),var(--zz-schaduw);padding:12px 12px 12px 24px;text-align:left} .pv .b9j-veld{flex:1;min-width:0;line-height:1.35} .pv .b9j-veld .as-waarde .as-icoon{color:var(--zz-rood)} .pv .b9j-balk .btn{flex:none;font-size:14px;padding:12px 18px} .pv .b9j-regel{display:flex;justify-content:center;gap:8px 28px;flex-wrap:wrap;margin-top:18px;font-size:13px;letter-spacing:.3px;line-height:1.5;color:var(--zz-paars)} .pv .b9j-regel span{display:inline-flex;align-items:center;gap:8px} .pv .b9j-regel .as-icoon{width:15px;height:15px;color:var(--zz-rood)} @container pv (max-width:700px){ .pv .b9j{padding:56px 0 64px} .pv .b9j-wolk{grid-template-columns:repeat(3,98px);justify-content:center;column-gap:8px;width:auto;margin-left:0} .pv .b9j-kol--buiten,.pv .b9j-kol--weg{display:none} .pv .b9j-kol--laag{padding-top:0} .pv .b9j-kol img{width:98px;height:131px;aspect-ratio:auto} .pv .b9j-midden{grid-column:1 / -1;margin-inline:calc((310px - (100cqw - 32px)) / 2);padding-top:28px} .pv .b9j-midden h2{font-size:34px} .pv .b9j-balk{flex-direction:column;align-items:stretch;gap:10px;padding:12px} .pv .b9j-veld{background:var(--zz-zand);border-radius:var(--zz-radius);padding:10px 14px} .pv .b9j-balk .btn{width:100%;font-size:15px;padding:14px 22px} .pv .b9j-regel{flex-direction:column;align-items:center;gap:8px} } /* ===== 4. productie ===== */ /* De kiezer toont .pv op een vaste 1200 px; op de site is .pv vloeibaar en de container voor alle @container-regels. */ html{-webkit-text-size-adjust:100%} body.v2{margin:0;background:#f3eef6} .pv{width:auto;min-height:100vh;overflow-x:clip} .pv [hidden]{display:none!important} .pv button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer} .pv :focus-visible{outline:2px solid var(--zz-rood);outline-offset:3px} .pv .btn{transition:background-color .2s,border-color .2s,color .2s} .pv .btn:hover{background:#b3141b;border-color:#b3141b} .pv .btn--ghost:hover{background:rgba(255,255,255,.14);border-color:#fff} .pv .btn--ghost-donker:hover{background:var(--zz-rood);border-color:var(--zz-rood);color:#fff} .pv .as-okaart__kaart a:not(.btn),.pv .b8b-antw a:not(.btn){color:var(--zz-rood)} /* kop: echte links i.p.v. spans uit de kiezer */ .pv .as-topbalk__groep>a{display:inline-flex;align-items:center;gap:8px;font-weight:400;letter-spacing:.2px} .pv .as-topbalk__links>a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} .pv .pv-logo{flex:none;display:block} .pv .as-nav nav>a,.pv .pv-sub__kop{display:inline-flex;align-items:center;gap:5px;padding:6px 0;position:relative} .pv .as-nav nav>a:hover,.pv .pv-sub__kop:hover{color:var(--zz-rood)} .pv .as-nav nav .as-icoon{width:14px;height:14px} .pv .pv-sub{position:relative} .pv .pv-sub__lijst{position:absolute;top:100%;left:-18px;min-width:230px;padding:10px 0;background:var(--zz-ivoor);border-radius:var(--zz-radius); box-shadow:var(--zz-schaduw),0 12px 28px rgba(23,0,36,.08);display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(6px); transition:opacity .18s,transform .18s,visibility .18s;z-index:10} .pv .pv-sub__lijst a{padding:9px 18px;font-size:15px;font-weight:500} .pv .pv-sub__lijst a:hover{color:var(--zz-rood)} .pv .pv-sub:hover .pv-sub__lijst,.pv .pv-sub:focus-within .pv-sub__lijst{opacity:1;visibility:visible;transform:none} .pv .as-nav__menu{align-items:center;justify-content:center;width:44px;height:44px;margin-right:-8px} .pv .pv-menu__kop,.pv .pv-menu__voet,.pv .pv-menu__overlay{display:none} html.pv-menu-open,html.pv-menu-open body{overflow:hidden} @media (prefers-reduced-motion:reduce){ .pv .as-nav nav,.pv .as-nav nav.is-open,.pv .pv-menu__overlay,.pv .as-nav nav .pv-sub__kop .as-icoon{transition:none!important} } /* taalkiezer: knop (vlag + NL/EN/DE + caret) rechts in de topbalk en in de drawer-kop; paneel met de drie talen, huidige taal vet + vinkje en zonder link. Open/dicht: /v2/home.js. In de topbalk geen padding/eigen regelhoogte, zodat de topbalk even hoog blijft. Topbalk is op telefoon verborgen: daar alleen de kiezer in de drawer. */ .pv .pv-taal{position:relative;display:inline-flex;align-items:center} .pv .pv-taal__knop{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;color:inherit} .pv .as-topbalk .pv-taal__knop{padding:0;font:inherit;font-weight:600;letter-spacing:.2px;line-height:inherit} .pv .pv-taal .pv-menu__vlag{width:20px;height:14px;border-radius:2px;flex:none} .pv .pv-taal .pv-menu__caret{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s} .pv .pv-taal__knop[aria-expanded="true"] .pv-menu__caret{transform:rotate(180deg)} .pv .pv-taal .pv-taal__paneel{position:absolute;top:calc(100% + 10px);right:-12px;z-index:60;min-width:200px;padding:8px 0;margin:0; background:var(--zz-ivoor);border-radius:var(--zz-radius);box-shadow:var(--zz-schaduw),0 12px 28px rgba(23,0,36,.12); display:flex;flex-direction:column;font-family:var(--zz-font-tekst);font-size:14px;line-height:1.4;font-weight:500; letter-spacing:0;color:var(--zz-paars);text-align:left} .pv .pv-taal .pv-taal__paneel[hidden]{display:none} .pv .pv-taal--menu .pv-taal__paneel{left:-4px;right:auto;top:calc(100% + 4px)} .pv .pv-taal .pv-taal__optie{display:flex;align-items:center;gap:10px;padding:10px 16px;white-space:nowrap;text-decoration:none} .pv .pv-taal a.pv-taal__optie:hover,.pv .pv-taal a.pv-taal__optie:focus-visible{color:var(--zz-rood)} .pv .pv-taal .pv-taal__optie.is-actief{font-weight:700} .pv .pv-taal .pv-taal__vink{width:16px;height:16px;margin-left:auto;fill:none;stroke:var(--zz-rood);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round} @media (prefers-reduced-motion:reduce){.pv .pv-taal .pv-menu__caret{transition:none}} /* tablet: menu valt niet meer op één regel, hamburger vanaf 1100 px */ @container pv (max-width:1100px){ .pv .as-topbalk{padding:10px 24px} .pv .as-nav{padding:12px 24px;position:relative} .pv .as-nav nav{display:none} .pv .as-nav .btn{margin-left:auto} .pv .as-nav__menu{display:flex} /* zijpaneel (drawer) van rechts, opbouw en maten 1-op-1 naar asteria.staging.effectytools.com op telefoon: paneel 80% (max 400 px), padding 24/20; kopregel taal + sluitkruis; regels 65 px; voet onderaan via margin-top:auto */ .pv .as-nav nav{display:flex;flex-direction:column;align-items:stretch;gap:0;position:fixed;top:0;right:0;z-index:40; width:80%;max-width:400px;height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior:contain;background:var(--zz-ivoor); padding:24px 20px;box-shadow:-12px 0 32px rgba(23,0,36,.14);transform:translateX(100%);visibility:hidden; font-family:var(--zz-font-tekst);color:var(--zz-paars); transition:transform .28s cubic-bezier(.2,.7,.2,1),visibility 0s linear .28s} .pv .as-nav nav.is-open{transform:none;visibility:visible;transition:transform .28s cubic-bezier(.2,.7,.2,1),visibility 0s} .pv .pv-menu__kop{display:flex;align-items:flex-start;justify-content:space-between;flex:none;min-height:72px} .pv .pv-menu__taal{display:inline-flex;align-items:center;gap:8px;margin:-8px 0 0 -4px;padding:4px 8px;border-radius:4px; font-family:var(--zz-font-tekst);font-weight:600;font-size:13px;line-height:21px;color:var(--zz-paars)} .pv .pv-menu__vlag{width:20px;height:14px;border-radius:2px;flex:none} .pv .pv-menu__caret{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .pv .pv-menu__sluit{display:flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;padding:0 6px;color:var(--zz-paars)} .pv .pv-menu__sluit svg{width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round} .pv .as-nav nav>a,.pv .as-nav nav .pv-sub__kop{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:65px;padding:16px 12px; border-bottom:1px solid rgba(23,0,36,.1);font-family:var(--zz-font-kop);font-weight:700;font-size:20px;line-height:32px;color:var(--zz-paars)} .pv .as-nav nav .pv-sub__kop .as-icoon{width:18px;height:18px;stroke-width:1.5;transition:transform .28s} .pv .as-nav nav .pv-sub.is-open .pv-sub__kop .as-icoon{transform:rotate(180deg)} .pv .as-nav nav .pv-sub__lijst{position:static;display:none;opacity:1;visibility:visible;transform:none;box-shadow:none;padding:0; min-width:0;background:none;border-radius:0;transition:none} .pv .as-nav nav .pv-sub.is-open .pv-sub__lijst{display:flex} .pv .as-nav nav .pv-sub__lijst a{display:flex;align-items:center;min-height:51px;padding:12px 12px 12px 36px;border-bottom:1px solid rgba(23,0,36,.1); font-family:var(--zz-font-tekst);font-weight:500;font-size:16px;line-height:26px;color:var(--zz-paars)} .pv .pv-menu__voet{display:flex;flex-direction:column;align-items:stretch;gap:8px;flex:none;padding-top:20px;border-top:1px solid rgba(23,0,36,.12); font-family:var(--zz-font-tekst);color:var(--zz-paars)} .pv .as-nav nav .pv-menu__voet{margin-top:auto} .pv .pv-menu__voet>a:not(.btn){display:flex;align-items:center;gap:10px;font-weight:600;font-size:16px;line-height:26px} .pv .as-nav nav .pv-menu__voet .as-icoon{width:18px;height:18px;color:var(--zz-rood)} .pv .pv-menu__adres{margin:0;font-weight:500;font-size:13px;line-height:21px;color:var(--zz-grijs)} .pv .as-nav .pv-menu__voet .btn{margin:16px 0 0;min-height:48px;padding:14px 24px;font-size:16px} .pv .pv-menu__overlay{display:block;position:fixed;top:0;left:0;right:0;height:100vh;height:100dvh;z-index:35; background:rgba(23,0,36,.55);opacity:0;transition:opacity .28s} html.pv-menu-open .pv .pv-menu__overlay{opacity:1} .pv .pv-menu__overlay[hidden]{display:none!important} .pv .b3a-rij{grid-template-columns:96px 130px minmax(0,1fr)} .pv .b3a-actie{grid-column:3} .pv .b8b-grid{grid-template-columns:300px 1fr;gap:48px} .pv .vv-grid{grid-template-columns:1.3fr 1fr 1fr;gap:40px} .pv .vv-grid>.vv-merk{grid-row:span 2} } /* voet: echte links */ .pv .vv-kol a:hover,.pv .vv-merk a:hover,.pv .vv-onder a:hover{color:#fff} .pv .vv-onder a{color:inherit} /* blok 1a: play-knop is een echte knop; na klik vervangt de YouTube-embed (nocookie) de foto */ .pv .b1a-play{font-weight:500;font-size:15px;color:#fff;text-align:left} .pv .b1a-play:hover .as-icoon--cirkel{background:var(--zz-rood);color:#fff} .pv .b1a-play .as-icoon--cirkel{transition:background-color .2s,color .2s} .pv .b1a-video{position:absolute;inset:0;z-index:4;background:#000} .pv .b1a-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .pv .b1a-sluit{position:absolute;top:16px;right:16px;z-index:5;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--zz-paars); display:flex;align-items:center;justify-content:center} .pv .b1a-sluit .as-icoon{width:20px;height:20px} /* blok 1a: Google-sticker, maten gemeten op asteria.staging (.review-badge, 7 okt) in Zaal Zeven-kleuren */ .pv .b1a-review,.pv .g-sticker{display:inline-flex;align-items:center;gap:clamp(14px,1.4vw,22px);background:var(--zz-ivoor); box-shadow:0 6px 16px rgba(23,0,36,.1);font-family:var(--zz-font-tekst);color:var(--zz-paars);text-decoration:none} .pv .b1a-review{position:absolute;top:clamp(20px,3vw,40px);right:0;z-index:3; padding:14px clamp(20px,5vw,80px) 14px 28px;border-radius:var(--zz-radius-zoekbalk) 0 0 var(--zz-radius-zoekbalk)} /* zelfde sticker als inline element in de flow (reviewblokken, via {{REVIEWS_GOOGLE_STICKER}} in build.py) */ .pv .g-sticker{position:static;flex:none;text-align:left;padding:14px 28px;border-radius:var(--zz-radius-zoekbalk);max-width:100%;box-sizing:border-box} .pv .b1a-review__score,.pv .b1a-review__bron,.pv .g-sticker__score,.pv .g-sticker__bron{display:inline-flex;align-items:center;gap:8px} .pv .b1a-review__ster,.pv .g-sticker__ster{width:30px;height:30px;flex:none} .pv .b1a-review__ster polygon,.pv .g-sticker__ster polygon{fill:#f5b400;stroke:#f5b400;stroke-width:.5;stroke-linejoin:round} .pv .b1a-review__score>span,.pv .g-sticker__score>span{font-weight:700;font-size:24px;line-height:1;letter-spacing:-.01em} .pv .b1a-review__lijn,.pv .g-sticker__lijn{width:1px;height:40px;background:var(--zz-lavendel-warm);flex:none} .pv .b1a-review__g,.pv .g-sticker__g{width:34px;height:34px;flex:none} .pv .b1a-review__tekst,.pv .g-sticker__tekst{display:flex;flex-direction:column;line-height:1.2} .pv .b1a-review__rev,.pv .g-sticker__rev{font-size:13px;font-weight:600;color:var(--zz-paars)} .pv .b1a-review__merk,.pv .g-sticker__merk{font-size:13px;font-weight:500;color:var(--zz-grijs)} @container pv (max-width:700px){ .pv .b1a-review{top:16px;max-width:calc(100% - 16px)} .pv .b1a-review,.pv .g-sticker{gap:8px;padding:8px 14px 8px 12px;box-sizing:border-box} .pv .b1a-review__ster,.pv .g-sticker__ster{width:20px;height:20px} .pv .b1a-review__score>span,.pv .g-sticker__score>span{font-size:18px} .pv .b1a-review__lijn,.pv .g-sticker__lijn{height:22px} .pv .b1a-review__g,.pv .g-sticker__g{width:22px;height:22px} } /* blok 2g: uitklaptegels zoals wellness-asteria.pages.dev (.fac-row/.fac-tile, oorspronkelijk asteria-pages welkom.html). Eerste tegel standaard uit (is-default, flex 2.6); hover of toetsenbordfocus klapt een andere uit, de rest krimpt. Beschrijving (.b2g-extra) alleen zichtbaar op de uitgeklapte tegel; label, titel en knop altijd. <=900 px: veegstrip 80%. */ .pv .b2g .as-tegels{display:flex;gap:14px;height:460px;width:100%} .pv .b2g .as-tegel{flex:1 1 0;min-width:0;transition:flex-grow .55s cubic-bezier(.4,0,.2,1)} .pv .b2g .as-tegel.is-default{flex-grow:2.6} .pv .b2g .as-tegels:hover .as-tegel,.pv .b2g .as-tegels:focus-within .as-tegel{flex-grow:1} .pv .b2g .as-tegels:focus-within .as-tegel:focus-within{flex-grow:2.6} .pv .b2g .as-tegels:hover .as-tegel:hover{flex-grow:2.6} .pv .as-tegel>img{transition:transform .6s ease} .pv .as-tegel:hover>img{transform:scale(1.04)} .pv .b2g .as-tegel__tekst{padding:30px 26px} .pv .b2g .as-tegel h3,.pv .b2g .as-tegel:first-child h3{font-size:clamp(24px,2.1vw,32px);white-space:nowrap;hyphens:none;overflow-wrap:normal;margin-bottom:12px} .pv .b2g .as-tegel__mini{overflow:hidden;text-overflow:ellipsis} .pv .b2g-extra{max-height:0;opacity:0;transform:translateY(8px);overflow:hidden; transition:max-height .45s cubic-bezier(.4,0,.2,1),opacity .35s ease,transform .35s ease} .pv .b2g-extra p{width:340px;max-width:none;margin:0 0 18px} .pv .b2g .as-tegel.is-default .b2g-extra, .pv .b2g .as-tegels:hover .as-tegel:hover .b2g-extra, .pv .b2g .as-tegels:focus-within .as-tegel:focus-within .b2g-extra{max-height:140px;opacity:1;transform:none} .pv .b2g .as-tegels:hover .as-tegel.is-default:not(:hover) .b2g-extra, .pv .b2g .as-tegels:focus-within .as-tegel.is-default:not(:focus-within) .b2g-extra{max-height:0;opacity:0;transform:translateY(8px)} .pv .b2g .as-tegel .btn{padding:10px 16px;font-size:13px} @container pv (max-width:1100px){ .pv .b2g .as-tegel.is-default,.pv .b2g .as-tegels:hover .as-tegel:hover,.pv .b2g .as-tegels:focus-within .as-tegel:focus-within{flex-grow:2} .pv .b2g .as-tegel__tekst{padding:24px 20px} .pv .b2g-extra p{width:280px} } @container pv (max-width:900px){ .pv .b2g .as-tegels{height:auto;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch} .pv .b2g .as-tegels::-webkit-scrollbar{display:none} .pv .b2g .as-tegel,.pv .b2g .as-tegel.is-default,.pv .b2g .as-tegels:hover .as-tegel,.pv .b2g .as-tegels:hover .as-tegel:hover, .pv .b2g .as-tegels:focus-within .as-tegel,.pv .b2g .as-tegels:focus-within .as-tegel:focus-within{flex:0 0 80%;height:420px;scroll-snap-align:start} .pv .b2g .b2g-extra,.pv .b2g .as-tegels .as-tegel .b2g-extra{max-height:none!important;opacity:1!important;transform:none!important} .pv .b2g-extra p{width:auto;max-width:360px} .pv .b2g .as-tegel h3,.pv .b2g .as-tegel:first-child h3{font-size:26px} .pv .b2g-dots{display:flex} } /* blok 3a: datarijen uit evenementen.json (korte tekst onder de meta) */ .pv .b3a-tekst{margin-top:6px;font-size:13.5px;line-height:1.6;max-width:620px} .pv .b3a-rij--leeg .b3a-datum .as-icoon{width:26px;height:26px;color:var(--zz-grijs)} .pv .b3a-leeg .as-icoon{width:26px;height:26px} /* blok 3a groter op desktop */ @container pv (min-width:1101px){ .pv .b3a-lijst,.pv .b3a-kop{--b3a-w:min(1500px,calc(100vw - 96px));width:var(--b3a-w);margin-left:calc((100% - var(--b3a-w)) / 2)} .pv .b3a-lijst{gap:20px} .pv .b3a-rij{grid-template-columns:132px 300px minmax(0,1fr) auto;gap:40px;padding:22px 40px 22px 22px} .pv .b3a-tekst{max-width:760px} .pv .b3a-datum{height:176px} .pv .b3a-dag,.pv .b3a-mnd{font-size:14px} .pv .b3a-nr{font-size:56px;margin:8px 0 6px} .pv .b3a-foto img,.pv .b3a-leeg{height:176px} .pv .b3a-info h3{font-size:32px} .pv .b3a-meta{font-size:15px;margin-top:10px} .pv .b3a-tekst{font-size:15.5px;margin-top:10px} .pv .b3a-prijs{font-size:14px} .pv .b3a-prijs b{font-size:30px} } @container pv (max-width:700px){ .pv .b3a-rij{grid-template-columns:72px minmax(0,1fr)} .pv .b3a-actie{grid-column:1/-1} .pv .b3a-tekst{font-size:13px} } /* blok 5e: lint schuift door zoals op wellnessasteria (dubbele baan, -50%) */ .pv .as-lint__baan{animation:pv-lint 48s linear infinite} @keyframes pv-lint{to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.pv .as-lint__baan{animation:none}} /* blok 6d: full-bleed muur met echte Google-reviews (content/reviews-google.json). home.js verdeelt de kaarten over 1-5 kolommen (.is-loop) en laat elke kolom naadloos naar beneden lopen (inhoud verdubbeld, translateY -50% -> 0, eigen snelheid en startpunt). Hover of focus = stil. Zonder JS of bij prefers-reduced-motion: statische muur met de eerste 9 kaarten. */ .pv .b6d .b6d-muur{columns:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;padding:0 24px;align-items:start} .pv .b6d .b6d-muur:not(.is-loop) .b6d-kaart:nth-child(n+10){display:none} .pv .b6d .b6d-kaart{margin:0;padding:26px 26px 28px} .pv .b6d .b6d-kaart p{font-size:14px;line-height:1.75} .pv .b6d .b6d-kaart p.b6d-naam{font-size:13px;margin-top:14px} .pv .b6d .b6d-k-sterren{display:flex;gap:3px;margin-bottom:12px} .pv .b6d .b6d-k-sterren svg{width:15px;height:15px;fill:var(--zz-oranje)} .pv .b6d .b6d-muur.is-loop{display:flex;gap:24px;height:660px;overflow:hidden; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%)} .pv .b6d .b6d-kol{flex:1 1 0;min-width:0} .pv .b6d .b6d-baan{display:flex;flex-direction:column;animation:b6d-omlaag var(--duur,60s) linear infinite;animation-delay:var(--start,0s);will-change:transform} .pv .b6d .b6d-baan .b6d-kaart{margin-bottom:24px} .pv .b6d .b6d-muur.is-loop:hover .b6d-baan,.pv .b6d .b6d-muur.is-loop:focus-within .b6d-baan{animation-play-state:paused} @keyframes b6d-omlaag{from{transform:translateY(-50%)}to{transform:translateY(0)}} @media (prefers-reduced-motion:reduce){.pv .b6d .b6d-baan{animation:none}} .pv .b6d .b6d-voet{margin-top:36px} @container pv (max-width:700px){ .pv .b6d .b6d-muur{padding:0 16px;grid-template-columns:1fr;gap:14px} .pv .b6d .b6d-muur:not(.is-loop) .b6d-kaart:nth-child(n+6){display:none} .pv .b6d .b6d-muur.is-loop{height:560px;gap:14px} .pv .b6d .b6d-baan .b6d-kaart{margin-bottom:14px} .pv .b6d .b6d-kaart{padding:22px} } /* blok 7h: USP-lijst loopt door zoals asteria.nl (home.js zet .is-wiel; zonder JS staan alle regels stil onder elkaar). Venster toont 5 regels (telefoon 4); --b7h-actief = index in de baan incl. klonen, --b7h-voor = regels boven de actieve. */ .pv .b7h__usp{list-style:none;margin:0} .pv .b7h__baan{display:flex;flex-direction:column;gap:12px;margin:0;padding:0} .pv .b7h__usp .as-icoon{flex:none} .pv .b7h__pijl:hover{color:#fff;background:var(--zz-rood)} .pv .b7h.is-wiel{--b7h-h:50px;--b7h-stap:62px;--b7h-voor:2;--b7h-rijen:5} .pv .is-wiel .b7h__venster{height:calc(var(--b7h-rijen) * var(--b7h-stap) - 12px);overflow:hidden;padding:0 14px;margin:0 -14px} .pv .is-wiel .b7h__baan{transform:translateY(calc((var(--b7h-voor) - var(--b7h-actief, 0)) * var(--b7h-stap)));transition:transform 1s cubic-bezier(.32,.72,0,1)} .pv .is-wiel .b7h__baan.is-direct,.pv .is-wiel .b7h__baan.is-direct .b7h__usp{transition:none} .pv .is-wiel .b7h__usp{height:var(--b7h-h);box-sizing:border-box;transition:opacity .8s,background-color .8s,box-shadow .8s,color .8s} .pv .is-wiel .b7h__usp--weg{opacity:0} @container pv (max-width:700px){ .pv .b7h.is-wiel{--b7h-h:46px;--b7h-stap:58px;--b7h-voor:1;--b7h-rijen:4} .pv .is-wiel .b7h__usp{white-space:nowrap} .pv .is-wiel .b7h__usp--vaagst{display:flex;opacity:0} .pv .b7h__lijst{position:relative} } @media (prefers-reduced-motion:reduce){ .pv .is-wiel .b7h__baan,.pv .is-wiel .b7h__usp{transition:none} } /* blok 8b: details-accordeon */ .pv .b8b-item summary:focus-visible{outline-offset:-2px} /* blok 9j: telefoon, mail en adres als links */ .pv .b9j-veld{display:block;color:inherit} .pv .b9j-veld:hover .as-waarde{color:var(--zz-rood)} .pv .b9j-regel a{display:inline-flex;align-items:center;gap:8px} .pv .b9j-regel a:hover{color:var(--zz-rood)} /* sticky balk telefoon: echte knop */ .pv .pv-sticky .btn{white-space:nowrap} /* telefoon: 16 px zijmarge */ @container pv (max-width:700px){ .pv .wrap{width:calc(100% - 32px)} .pv .as-topbalk{display:none} .pv .as-nav{padding:12px 16px} .pv .b1a-play{left:16px} .pv .vv-grid>.vv-merk{grid-row:auto} .pv .vv-grid{grid-template-columns:1fr 1fr} .pv .b8b-grid{grid-template-columns:1fr;gap:36px} .pv .pv-sticky{padding:10px 16px} } /* Echte Zaal Zeven-7 (content-archief/assets/zaalzeven-7-higgsfield-2048.png, gevectoriseerd naar /v2/img/zaalzeven-7.svg) vervangt de gestileerde 7 van de kiezer: embleem in originele kleuren, watermerken als lavendel/witte mask-laag. */ .pv{--zz-logo-7:url(/v2/img/zaalzeven-7.svg);--zz-teken-7:var(--zz-logo-7)} .pv .b7h__teken{aspect-ratio:1350/1560;height:72px} .pv .as-intro-ster__teken{height:80px;aspect-ratio:1350/1560;background:var(--zz-logo-7) center/contain no-repeat} .pv .as-wm::before,.pv .as-wm-band::before,.pv .pv-voet::before{background:var(--zz-lavendel); -webkit-mask:var(--zz-logo-7) center/contain no-repeat;mask:var(--zz-logo-7) center/contain no-repeat} .pv .as-wm::before{opacity:.3} .pv .as-wm-band::before{opacity:.55} .pv .pv-voet::before{background:#fff;filter:none;opacity:.05} /* blok 4b: hover-effect tegels */ .pv .b4b-tegel img{transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .5s ease} .pv .b4b-tegel::after{transition:opacity .5s ease} .pv .b4b-tegel::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(23,0,36,.9) 0%,rgba(23,0,36,.35) 55%,transparent 85%);opacity:0;transition:opacity .5s ease;pointer-events:none} .pv .b4b-label{z-index:2;transition:transform .5s cubic-bezier(.2,.7,.2,1)} .pv .b4b-label h3{position:relative;display:inline-block;padding-bottom:6px} .pv .b4b-label h3::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--zz-rood);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)} @media (hover:hover){ .pv .b4b-tegel:hover img{transform:scale(1.07);filter:saturate(1.1)} .pv .b4b-tegel:hover::before{opacity:1} .pv .b4b-tegel:hover .b4b-label{transform:translateY(-8px)} .pv .b4b-tegel:hover .b4b-label h3::after{transform:scaleX(1)} } @media (prefers-reduced-motion:reduce){ .pv .b4b-tegel img,.pv .b4b-label,.pv .b4b-label h3::after{transition:none} } /* ===== blok 8 FAQ: opzet van optie 7c (bruiloften-kiezer), accordeon links + contactkaart rechts ===== */ .pv .b8c-rij{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:48px;align-items:start} .pv .b8c h2{margin-bottom:32px} .pv .b8c-item{background:var(--zz-ivoor);border-radius:var(--zz-radius);box-shadow:var(--zz-schaduw);margin-bottom:14px;overflow:hidden} .pv .b8c-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px; font-size:15px;font-weight:500;line-height:1.5;color:var(--zz-paars);cursor:pointer} .pv .b8c-item summary::-webkit-details-marker{display:none} .pv .b8c-item summary:hover{color:var(--zz-rood)} .pv .b8c-item summary:focus-visible{outline-offset:-3px} .pv .b8c-item summary .as-icoon{color:var(--zz-paars);transition:transform .3s cubic-bezier(.4,0,.2,1)} .pv .b8c-item[open] summary .as-icoon{transform:rotate(180deg)} .pv .b8c-antw{overflow:hidden} .pv .b8c-antw__in{padding:0 22px 20px;font-size:14.5px;line-height:1.75} .pv .b8c-antw__in p+p{margin-top:8px} .pv .b8c-antw__in a{color:var(--zz-rood)} .pv .b8c-link a{display:inline-flex;align-items:center;gap:8px;font-weight:600} .pv .b8c-link .as-icoon{width:16px;height:16px} .pv .b8c-kaart{position:sticky;top:24px;margin-top:84px;padding:36px 34px;background:var(--zz-ivoor);border-radius:var(--zz-radius); box-shadow:var(--zz-schaduw);border-top:3px solid var(--zz-rood);color:var(--zz-paars-2)} .pv .b8c-kaart h3{font-size:30px;margin-bottom:12px} .pv .b8c-kaart>p{font-size:14.5px;line-height:1.75} .pv .b8c-lijn{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid rgba(23,0,36,.14);color:var(--zz-paars);font-weight:500;font-size:16px} .pv .b8c-lijn:first-of-type{border-top:1px solid rgba(23,0,36,.14);margin-top:22px} .pv .b8c-lijn:hover{color:var(--zz-rood)} .pv .b8c-lijn div span{display:block;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--zz-paars-2);font-weight:500;line-height:1.3} .pv .b8c-kaart .btn{margin-top:24px;width:100%} @container pv (max-width:900px){ .pv .b8c-rij{grid-template-columns:1fr;gap:20px} .pv .b8c h2{margin-bottom:22px} .pv .b8c-kaart{position:static;margin-top:0} } @container pv (max-width:700px){ .pv .b8c-item summary{padding:16px 18px;font-size:14.5px} .pv .b8c-antw__in{padding:0 18px 18px} .pv .b8c-kaart{padding:26px 22px} .pv .b8c-kaart h3{font-size:26px} } .pv .b8c-item.is-sluitend summary .as-icoon{transform:none} /* ===== blok 1a: zelf-gehoste gedempte achtergrondloop (home.js), fade-in bij 'playing'; geen bediening ===== */ .pv .b1a-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;pointer-events:none;opacity:0;transition:opacity .9s ease} .pv .b1a-bg.is-zichtbaar{opacity:1} .pv .b1a-bg::-webkit-media-controls,.pv .b1a-bg::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none} @container pv (max-width:700px){.pv .b1a-bg{object-position:62% 20%}} /* lightbox voor de volledige video met geluid */ html.pv-lightbox-open{overflow:hidden} .pv-lightbox{position:fixed;inset:0;z-index:100;background:rgba(23,0,36,.88);display:flex;align-items:center;justify-content:center;padding:64px 24px} .pv-lightbox__kader{position:relative;width:min(1200px,100%,calc((100vh - 128px) * 16 / 9));aspect-ratio:16/9;background:#000;border-radius:4px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.4)} .pv-lightbox__kader iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .pv-lightbox__sluit{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.92);color:#170024;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center} .pv-lightbox__sluit .as-icoon{width:20px;height:20px} .pv-lightbox__sluit .as-icoon{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round} .pv-lightbox__sluit:focus-visible{outline:2px solid #d71921;outline-offset:3px} @media (max-width:700px){.pv-lightbox{padding:64px 12px}} /* ===== blok 4b groter op desktop (zelfde aanpak als 3a): breder dan de container, hogere rijen ===== */ @container pv (min-width:1101px){ .pv .b4b-kop,.pv .b4b-mozaiek,.pv .b4b-voet{--b4b-w:min(1500px,calc(100vw - 96px));width:var(--b4b-w);margin-left:calc((100% - var(--b4b-w)) / 2)} .pv .b4b-mozaiek{grid-template-rows:340px 340px;gap:18px} .pv .b4b-label{padding:28px 36px} .pv .b4b-label h3{font-size:30px} .pv .b4b-tegel--groot .b4b-label{padding:36px} .pv .b4b-tegel--groot h3{font-size:42px} .pv .b4b-voet{font-size:15px;margin-top:28px} } /* blok 8: link naar /faq/ onder de vragen (vragen uit content/faq.json) */ .pv .b8c-alle{margin-top:22px} .pv .b8c-alle a{color:var(--zz-rood)} .pv .b8c-alle a:hover{text-decoration:underline;text-underline-offset:3px}