/* Zuidgeluid theme CSS — design-tokens.css (Kadence child theme). Load ONCE site-wide via the child theme. Source: v87 styles.css (live mockup). Cleaned 2026-06-08: WordPress/Kadence integration folded in from Additional CSS, full-width conflict resolved, gallery section namespaced (.zg-gallery), duplicate gallery block removed, body overflow-x switched hidden→clip (sticky-header safe). Fonts (Hanken Grotesk + Fredoka) = set in Kadence Typography. */ :root{ --paper:#FBEFE2; --paper-deep:#F5E0CD; --ink:#213847; --ink-soft:#4C5E6A; --orange:#EA5128; --orange-dp:#C13C1B; --brick:#A8381C; --mustard:#E6B23C; --mustard-dp:#C7942A; --rose:#F1C9CD; --rose-dp:#E6A6AD; --sky:#6FB2D6; --sky-dp:#4D95BD; --green:#44A53E; --green-dp:#2F8A2C; --green-dk:#1E661F; --magenta:#E5217E; --magenta-dp:#C0156A; --card:#FCEBF0; --card-bd:rgba(230,166,173,.5); --max:1240px; --gutter:clamp(20px,4.5vw,64px); --display:'Hanken Grotesk','Trebuchet MS',sans-serif; --body:'Hanken Grotesk',sans-serif; --logo:'Fredoka','Trebuchet MS',sans-serif; --mono:'SFMono-Regular',Consolas,monospace; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;overflow-x:clip} body{font-family:var(--body);font-size:16px;line-height:1.62;color:var(--ink);background:var(--paper); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip} img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer;border:none;background:none;color:inherit} .grain{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.05;mix-blend-mode:multiply} .display{font-family:var(--display);font-weight:800;line-height:.94;letter-spacing:-.025em;color:var(--ink)} .o{color:var(--magenta)} .g{color:var(--green-dp)} .m{color:var(--mustard-dp)} .p{color:var(--magenta)} .b{color:var(--sky-dp)} .eyebrow{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase} .eyebrow svg{width:16px;height:16px} .lead{font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:var(--ink-soft);font-weight:500;max-width:52ch} .wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)} .sec-title{font-family:var(--display);font-weight:800;font-size:clamp(32px,5.2vw,62px);line-height:1.0;letter-spacing:-.02em} .btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;font-weight:800;font-size:15px;border-radius:14px;transition:transform .14s,box-shadow .14s} .btn svg{width:17px;height:17px} .btn-o{background:var(--green-dp);color:var(--paper);box-shadow:0 5px 0 var(--green-dk)} .btn-o:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--green-dk)} .btn-o:active{transform:translateY(3px);box-shadow:0 2px 0 var(--green-dk)} .btn-line{background:transparent;color:var(--ink);border:2.5px solid var(--ink)} .btn-line:hover{background:var(--ink);color:var(--paper)} .btn-paper{background:var(--paper);color:var(--ink);box-shadow:0 5px 0 rgba(0,0,0,.18)} .btn-paper:hover{transform:translateY(-2px);box-shadow:0 7px 0 rgba(0,0,0,.18)} .btn-line-sm{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13.5px;color:var(--ink-soft);border-bottom:2px solid transparent;padding-bottom:1px;transition:color .15s,border-color .15s} .btn-line-sm:hover{color:var(--magenta-dp);border-color:var(--magenta-dp)} /* header */ .header{position:sticky;top:0;z-index:60;background:rgba(251,239,226,.9);backdrop-filter:saturate(150%) blur(10px);-webkit-backdrop-filter:saturate(150%) blur(10px);transition:box-shadow .3s} .header.scrolled{box-shadow:0 1px 0 var(--paper-deep),0 8px 24px -18px rgba(33,56,71,.4)} .header-in{max-width:var(--max);margin:0 auto;padding:13px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:24px} .logo{display:inline-flex;align-items:center;gap:11px;cursor:pointer} .logo-badge{position:relative;background:var(--green);border-radius:16px 16px 16px 4px;padding:8px 13px 7px;transform:rotate(-2deg)} .logo-badge .wm{font-family:var(--logo);font-weight:600;color:#fff;font-size:18px;line-height:.84} .logo-badge .star{position:absolute;top:-7px;right:6px;width:15px;height:15px;fill:var(--magenta)} .nav{display:flex;align-items:center;gap:2px} .nav a{position:relative;font-weight:600;font-size:14.5px;padding:8px 9px;border-radius:9px;color:var(--ink);white-space:nowrap;flex:0 0 auto;transition:color .18s} .nav a:hover{color:var(--magenta)} .nav a.on{color:var(--magenta-dp)} .nav a.on::after{content:"";position:absolute;left:11px;right:11px;bottom:3px;height:3px;border-radius:3px;background:var(--magenta)} .header-cta{display:inline-flex;align-items:center;gap:14px} .burger{display:none;width:42px;height:42px;border-radius:11px;background:var(--green-dp);color:var(--paper);align-items:center;justify-content:center} .burger svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.4} .fstar{position:absolute;pointer-events:none;animation:bob 6s ease-in-out infinite} @keyframes bob{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-13px) rotate(9deg)}} /* hero */ .hero{position:relative;padding:clamp(34px,5vw,64px) 0 clamp(12px,2vw,26px);overflow:hidden} .hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(30px,4vw,60px);align-items:center;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)} .hero-pill{display:inline-flex;align-items:center;gap:9px;background:rgba(68,165,62,.16);color:var(--green-dk);font-weight:700;font-size:13px;padding:7px 15px 7px 11px;border-radius:999px;margin-bottom:22px} .hero-pill .dot{width:9px;height:9px;border-radius:50%;background:var(--green);animation:pulse 1.9s ease-in-out infinite} @keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.45);opacity:.5}} .hero-h1{font-family:var(--display);font-weight:900;font-size:clamp(50px,8.4vw,116px);line-height:.9;letter-spacing:-.035em;margin-bottom:24px} .hero-h1 .ln{display:block} .hero-sub{font-size:clamp(16px,1.5vw,19px);line-height:1.55;color:var(--ink-soft);font-weight:500;max-width:48ch;margin-bottom:30px} .hero-actions{display:flex;gap:13px;flex-wrap:wrap} .hero-art{position:relative;max-width:none;margin-inline:auto} @media(max-width:900px){.hero-art{max-width:440px}} .hero-art .hero-illu{width:100%;height:auto;display:block;filter:drop-shadow(0 18px 34px rgba(33,56,71,.16))} .hero-art .fstar{z-index:2} /* marquee */ .marquee{background:linear-gradient(100deg,var(--green-dk) 0%,var(--green-dp) 40%,var(--green) 72%,#5FBE51 100%);color:var(--paper);overflow:hidden;position:relative;transform:rotate(-1.2deg);width:106%;margin:clamp(54px,7vw,100px) -3% 0;border-top:4px solid var(--green-dk);border-bottom:4px solid var(--green-dk);padding:18px 0} .mq-track{display:flex;width:max-content;animation:mq 34s linear infinite;white-space:nowrap} .mq-item{display:inline-flex;align-items:center;gap:26px;padding:0 26px;font-family:var(--display);font-weight:800;font-size:24px} .mq-item svg{width:21px;height:21px;fill:var(--magenta);flex-shrink:0} @keyframes mq{to{transform:translateX(-50%)}} /* mission */ .mission{padding:clamp(64px,8vw,108px) 0} .mission .wrap{display:grid;grid-template-columns:minmax(280px,340px) 1fr;gap:clamp(36px,5vw,72px);align-items:center} .mission-statement{font-family:var(--display);font-weight:700;font-size:clamp(23px,2.5vw,36px);line-height:1.22;letter-spacing:-.015em} .mission-side{position:relative} .mission-card{background:var(--mustard);border-radius:22px;padding:30px 28px;position:relative;transform:rotate(1deg);box-shadow:0 16px 36px -22px rgba(33,56,71,.5);max-width:340px} .mission-card h4{font-family:var(--display);font-weight:800;font-size:20px;margin-bottom:8px;color:var(--ink)} .mission-card p{font-size:14.5px;color:var(--ink);font-weight:500;line-height:1.5} .mission-card .ms-star{position:absolute;top:-15px;right:-12px;width:40px;height:40px;fill:var(--magenta);filter:drop-shadow(0 5px 9px rgba(33,56,71,.22))} /* programmes */ .prog{padding:clamp(50px,6vw,90px) 0} .prog-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:42px} .prog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .card{position:relative;border-radius:22px;overflow:hidden;color:var(--ink);background:#fff;border:1px solid rgba(33,56,71,.06);box-shadow:0 18px 40px -26px rgba(33,56,71,.55);transition:transform .18s ease,box-shadow .18s ease;cursor:pointer;display:flex;flex-direction:column} .card:hover{transform:translateY(-5px) rotate(-.4deg)} .card .art{position:relative;min-height:172px;flex:1;overflow:hidden} .card .art svg{position:absolute;inset:0;width:100%;height:100%} .card .body{padding:20px 22px 24px;background:#fff} .card .tag{position:absolute;bottom:14px;right:14px;background:rgba(255,255,255,.94);box-shadow:0 4px 12px -6px rgba(22,36,44,.5);color:var(--ink);font-weight:800;font-size:11px;letter-spacing:.07em;text-transform:uppercase;padding:6px 11px;border-radius:999px;z-index:2} .card h3{font-family:var(--display);font-weight:800;font-size:22px;margin-bottom:4px} .card .loc{font-weight:700;font-size:12.5px;color:var(--magenta-dp);margin-bottom:8px} .card p{font-size:14px;color:var(--ink-soft);font-weight:500;line-height:1.5;margin-bottom:12px} .card .more{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:13.5px} .card .more svg{width:15px;height:15px;transition:transform .2s} .card:hover .more svg{transform:translateX(4px)} .card.feat{grid-column:span 1;grid-row:span 2} @media(min-width:901px){.card.feat .art{min-height:300px}} /* artists / quality */ .artists{background:linear-gradient(rgba(33,56,71,.82),rgba(33,56,71,.9)),url('/wp-content/uploads/2026/06/home-page-lady.png') right -8% bottom -22%/auto 150% no-repeat,var(--ink);color:var(--paper);padding:clamp(60px,7vw,104px) 0;position:relative;overflow:hidden} .artists .wrap{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(34px,4vw,64px);align-items:center;position:relative;z-index:2} .artists h2{font-family:var(--display);font-weight:900;font-size:clamp(30px,4.4vw,56px);line-height:.98;letter-spacing:-.02em;color:#fff;margin-bottom:18px} .artists h2 .m{color:var(--mustard)} .artists p{font-size:16.5px;color:rgba(255,255,255,.86);font-weight:500;line-height:1.6;max-width:50ch;margin-bottom:14px} .credits{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px} .credit{background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.16);border-radius:13px;padding:11px 15px} .credit .nm{font-family:var(--display);font-weight:800;font-size:15px;color:#fff} .credit .rl{font-size:12px;color:var(--mustard);font-weight:700} .artists-art{position:relative;border-radius:24px;overflow:hidden;box-shadow:0 26px 54px -30px rgba(0,0,0,.55)} .artists-art svg{width:80%;height:auto;overflow:visible} /* impact */ .impact{background:var(--sky);color:var(--ink);padding:clamp(60px,7vw,100px) 0;position:relative;overflow:hidden} .impact .deco{position:absolute;fill:rgba(255,255,255,.5)} .impact-head{max-width:var(--max);margin:0 auto 50px;padding:0 var(--gutter);position:relative;z-index:2} .impact-grid{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:repeat(4,1fr);gap:26px;position:relative;z-index:2} .stat .num{font-family:var(--display);font-weight:900;font-size:clamp(52px,6vw,80px);line-height:.92;color:#fff} .stat .num .plus{color:var(--mustard)} .stat .lbl{font-weight:600;font-size:14.5px;margin-top:7px;max-width:20ch} /* growth (B1) — "van 2018 naar 2027": reuses .impact-grid + .stat on the cream band */ .growth{padding:clamp(56px,7vw,96px) 0;position:relative;overflow:hidden} .growth-head{max-width:var(--max);margin:0 auto 42px;padding:0 var(--gutter);position:relative;z-index:2} .growth .impact-grid{row-gap:38px} .growth .stat .num{color:var(--ink)} .growth .stat .num .plus{color:var(--magenta)} .growth .stat .lbl{color:var(--ink-soft);max-width:24ch} .growth .stat .lbl .from{display:block;font-weight:600;opacity:.72;margin-top:3px} .growth .deco{position:absolute;fill:var(--rose-dp);opacity:.5;pointer-events:none} /* quote (Maud column) */ .quote{background:linear-gradient(90deg,#16242c 0%,#16242c 50%,rgba(22,36,44,.6) 72%,rgba(22,36,44,.08) 100%),url('/wp-content/uploads/2026/06/home-page-lady.png') right -20% center/auto 142% no-repeat,#182a35;color:var(--paper);padding:clamp(64px,8vw,116px) 0;position:relative;overflow:hidden} .quote .qstar{position:absolute;pointer-events:none} .quote-in{max-width:880px;margin:0 auto;padding:0 var(--gutter);position:relative;z-index:2;text-align:center} .quote-col{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.7vw,33px);line-height:1.32;letter-spacing:-.01em} .quote-col .hl{color:var(--mustard)} .quote-col .punch{display:block;margin-top:18px;font-weight:900;font-size:clamp(28px,4vw,52px);line-height:1.02;letter-spacing:-.02em} .quote-by{margin-top:26px;font-weight:700;font-size:15px;letter-spacing:.03em;color:var(--rose)} .gal-quote{font-family:var(--display);font-weight:900;font-size:clamp(26px,3.8vw,46px);line-height:1.04;letter-spacing:-.02em;color:var(--ink);margin-top:24px;max-width:17ch} .gal-quote .hl{color:var(--magenta)} .gal-quote .by{display:block;font-family:var(--body);font-weight:700;font-size:14px;letter-spacing:.02em;color:var(--ink-soft);margin-top:14px} /* agenda (real posters) */ .agenda{padding:clamp(56px,7vw,96px) 0} .agenda-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:40px} .agenda-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px} .event{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;background:var(--card);border:1px solid var(--card-bd);border-radius:22px;padding:18px;box-shadow:0 18px 40px -26px rgba(33,56,71,.55);transition:transform .18s ease,box-shadow .18s ease} .event:hover{transform:translateY(-6px);box-shadow:0 28px 54px -24px rgba(33,56,71,.6)} .event.is-static{cursor:default} .event.is-static:hover{transform:none;box-shadow:0 18px 40px -26px rgba(33,56,71,.55)} .event .poster{width:148px;border-radius:12px;overflow:hidden;box-shadow:0 8px 22px -12px rgba(33,56,71,.5);transform:rotate(-1.5deg)} .event .poster img{width:100%;display:block} .event .when{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--green-dk);margin-bottom:8px} .event .when svg{width:14px;height:14px;fill:var(--green)} .event h3{font-family:var(--display);font-weight:800;font-size:24px;line-height:1;margin-bottom:6px;color:var(--green-dk)} .event .det{font-size:14px;color:var(--ink-soft);font-weight:500;line-height:1.45} .event .ev-link{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:13.5px;color:var(--ink);margin-top:12px} .event .ev-link svg{width:14px;height:14px} /* gallery — photo placeholders (section namespaced .zg-gallery to avoid WP core .gallery collision) */ .zg-gallery{padding:clamp(40px,5vw,70px) 0 clamp(56px,7vw,96px)} .gallery-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:30px} .gallery-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .photo{position:relative;border-radius:18px;overflow:hidden;background:var(--paper-deep);border:2.5px dashed var(--rose-dp);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;padding:16px;aspect-ratio:4/3;min-height:0;color:var(--ink-soft)} .photo svg{width:34px;height:34px;opacity:.45} .photo .pl{font-weight:800;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase} .photo .pf{font-family:var(--mono);font-size:10.5px;color:var(--brick);background:var(--paper);padding:2px 7px;border-radius:6px;word-break:break-all} .gallery-strip .photo:nth-child(1){grid-column:span 2;grid-row:span 2} /* partners */ .partners{padding:clamp(56px,7vw,96px) 0} .partners .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start} .plist{display:flex;flex-wrap:wrap;gap:12px} .plist span{font-family:var(--display);font-weight:700;font-size:clamp(17px,1.9vw,23px);padding:9px 18px;border:2.5px solid var(--paper-deep);border-radius:14px;color:var(--ink)} /* steun */ .steun{background:linear-gradient(135deg,var(--green-dk) 0%,var(--green-dp) 52%,var(--green) 100%);color:var(--paper);padding:clamp(56px,7vw,96px) 0;position:relative;overflow:hidden} .steun .wrap{display:grid;grid-template-columns:1fr .8fr;gap:48px;align-items:center;position:relative;z-index:2} .steun h2{font-family:var(--display);font-weight:900;font-size:clamp(34px,5vw,64px);line-height:.96;letter-spacing:-.025em;margin-bottom:18px} .steun h2 .soft{color:rgba(255,255,255,.6)} .steun p{font-size:17px;font-weight:500;max-width:46ch;margin-bottom:26px;line-height:1.55} .steun .fine{font-size:12.5px;opacity:.78;margin-top:18px;max-width:48ch;line-height:1.5} .steun-art{background:var(--paper);border-radius:30px;padding:7% 8%;box-shadow:0 26px 54px -30px rgba(0,0,0,.5);transform:rotate(-1.6deg)} .steun-art svg{width:100%;height:auto;overflow:visible} .steun-art .steun-illu{width:100%;height:auto;display:block} .giftgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px} .gifttier{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:12px;background:#fff;border:1px solid var(--card-bd);border-radius:18px;padding:30px 22px 24px;text-decoration:none;color:var(--ink);box-shadow:0 14px 34px -24px rgba(33,56,71,.5);transition:transform .16s,box-shadow .16s} .gifttier::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:var(--tier,var(--magenta))} .gifttier:nth-child(1){--tier:var(--rose)} .gifttier:nth-child(2){--tier:var(--mustard)} .gifttier:nth-child(3){--tier:var(--sky)} .gifttier:nth-child(4){--tier:var(--green)} .gifttier:hover{transform:translateY(-5px);box-shadow:0 24px 48px -22px rgba(33,56,71,.55)} .gifttier .gt-ico{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--tier,var(--magenta))} .gifttier .gt-ico svg{width:23px;height:23px;fill:#fff} .gifttier .amt{font-family:var(--display);font-weight:900;font-size:36px;line-height:1;color:var(--magenta)} .gifttier .impact{background:none;padding:0;font-size:14px;color:var(--ink-soft);font-weight:600;line-height:1.45;flex:1} .gifttier .give{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:13px;color:var(--green-dk)} .gifttier .give svg{width:14px;height:14px;transition:transform .2s} .gifttier:hover .give svg{transform:translateX(3px)} @media(max-width:900px){.giftgrid{grid-template-columns:1fr 1fr}} @media(max-width:520px){.giftgrid{grid-template-columns:1fr}} /* footer */ .footer{background:var(--green-dk);color:var(--paper);padding:clamp(54px,6vw,80px) 0 30px} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px} .footer h4{font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--rose);margin-bottom:16px} .footer a.fl,.footer p.ft{display:block;color:rgba(255,255,255,.86);font-size:14.5px;line-height:2;font-weight:500} .footer a.fl{cursor:pointer} .footer a.fl:hover{color:var(--rose)} .footer .tagline{font-size:15px;color:rgba(255,255,255,.9);font-weight:500;line-height:1.55;margin:18px 0 14px;max-width:34ch} .nl-form{display:flex;flex-direction:column;gap:9px;margin-top:4px} .nl-form input{width:100%;font-family:var(--body);font-size:14px;color:var(--ink);background:var(--paper);border:2px solid transparent;border-radius:10px;padding:10px 12px;outline:none;transition:border-color .15s} .nl-form input::placeholder{color:var(--ink-soft)} .nl-form input:focus{border-color:var(--mustard)} .nl-form button{justify-content:center;margin-top:2px} .nl-done{margin-top:10px;font-weight:700;font-size:14px;color:#fff} /* legal row: flex layout (copyright left, socials right) + full-width hairline above it */ .footer-bottom{ position:relative; margin-top:46px; padding-top:24px; display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:13px; color:rgba(255,255,255,.7); border-top:none; } .footer-bottom::before{ content:""; position:absolute; top:0; left:calc(50% - 50vw); width:100vw; height:1px; background:rgba(255,255,255,.18); } .footer-bottom .socials{display:inline-flex;align-items:center;gap:15px} .footer-bottom .socials a{color:inherit;display:inline-flex;transition:color .2s ease,transform .2s ease} .footer-bottom .socials a:hover{color:#fff;transform:translateY(-1px)} .footer-bottom .socials svg{display:block} @media(max-width:900px){ .nav{display:none}.burger{display:inline-flex} .hero-grid,.mission .wrap,.partners .wrap,.steun .wrap,.artists .wrap{grid-template-columns:1fr} .hero-art,.steun-art{order:-1;max-width:440px;margin:0 auto} .prog-grid,.agenda-grid{grid-template-columns:1fr} .card.feat{grid-row:auto} .impact-grid{grid-template-columns:1fr 1fr;gap:30px} .footer-grid{grid-template-columns:1fr 1fr;gap:32px} .gallery-strip{grid-template-columns:repeat(2,1fr)} .gallery-strip .photo:nth-child(1){grid-column:auto;grid-row:auto;aspect-ratio:4/3} .mission .wrap{gap:30px}.mission-side{max-width:340px} .event{grid-template-columns:1fr}.event .poster{width:120px} } @media(max-width:520px){.impact-grid,.footer-grid{grid-template-columns:1fr}.gallery-strip{grid-template-columns:1fr 1fr;gap:10px}.header-cta .btn{display:none}} .logo-img{height:46px;width:auto;display:block;transform:rotate(-2deg);transition:transform .25s ease}.logo:hover .logo-img{transform:rotate(0deg) scale(1.03)}.footer .logo-img{height:50px} .card .art img.card-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .fname{position:absolute;bottom:9px;left:9px;z-index:3;font-family:var(--mono);font-size:10px;color:#fff;background:rgba(22,36,44,.72);padding:3px 8px;border-radius:6px;letter-spacing:.02em} .artists-art{padding:0} .artists-art img.portrait{width:100%;height:100%;min-height:240px;object-fit:cover;display:block} .photo.real{border:none;min-height:0} .gallery-strip .photo:nth-child(1){aspect-ratio:auto} .photo img.gphoto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .photo .pf.over{position:absolute;bottom:8px;left:8px;z-index:2;color:#fff;background:rgba(22,36,44,.72);border:none} .funders{display:flex;flex-wrap:wrap;gap:14px;margin-top:16px} .funder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;background:#fff;border:2.5px solid var(--paper-deep);border-radius:16px;padding:16px 20px;min-width:140px;min-height:96px} .funder img{height:auto;max-height:52px;width:auto;max-width:168px;object-fit:contain;display:block} .funder.lg img{max-height:64px} .funder.xl img{max-height:86px} .funder .cap{font-family:var(--body);font-weight:700;font-size:12.5px;color:var(--ink-soft);text-align:center;line-height:1.25;letter-spacing:.01em;max-width:160px} .funder .fn{font-family:var(--mono);font-size:9.5px;color:var(--brick);word-break:break-all;text-align:center;max-width:160px;line-height:1.3} .funder .pn{display:flex;align-items:center;min-height:48px;font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink);text-align:center} .funder.govvl{flex-basis:100%;background:none;border:none;box-shadow:none;padding:14px 0 0;min-width:0;min-height:0;align-items:flex-start} .funder.govvl img{height:160px;width:auto;max-width:100%} /* cut-paper photo badges */ .card .art{overflow:hidden} .cpbadge{position:absolute;left:14px;bottom:14px;z-index:4;width:66px;height:66px;border-radius:50%;overflow:hidden;border:3px solid #fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px -6px rgba(22,36,44,.55);transform:rotate(-4deg);transition:transform .25s ease} .cpbadge svg{display:block;width:72%;height:72%;overflow:visible} .card:hover .cpbadge{transform:rotate(3deg) scale(1.06)} .card.feat .cpbadge{width:82px;height:82px;border-width:3.5px;bottom:18px;left:18px} /* footer logo */ .footer .logo-img{height:58px} .card:hover{box-shadow:0 26px 52px -24px rgba(33,56,71,.6)} /* ============================================================ SUB-PAGE COMPONENTS (aanbod + programme detail pages) Shared by every non-home page. Reuses tokens above. ============================================================ */ .voor-leden{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:14px;color:var(--ink);padding:8px 4px} .voor-leden:hover{color:var(--magenta)} .voor-leden svg{width:15px;height:15px} /* aanbod lede */ .lede-band{position:relative;padding:clamp(40px,6vw,76px) 0 clamp(20px,3vw,32px);overflow:hidden} a.card{cursor:pointer;text-decoration:none;color:inherit} /* programme hero */ .phero{position:relative;padding:clamp(34px,5vw,68px) 0 clamp(30px,4vw,52px);overflow:hidden} .phero.banner{background:#fff;box-shadow:inset 0 -1px 0 var(--paper-deep)} .phero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4vw,60px);align-items:center} .crumb{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--magenta-dp)} .crumb a{color:var(--ink-soft)}.crumb a:hover{color:var(--magenta)} .phero h1{font-family:var(--display);font-weight:900;font-size:clamp(44px,7vw,92px);line-height:.9;letter-spacing:-.035em;margin:16px 0 18px;color:var(--ink)} .phero .lead{margin-bottom:24px} .phero-photo{position:relative;border-radius:24px;overflow:hidden;box-shadow:0 24px 50px -28px rgba(33,56,71,.6);transform:rotate(-1.2deg)} .phero-photo img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3} .phero-photo .cpbadge{width:84px;height:84px;border-width:3.5px} .pfacts{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px} .pfact{background:var(--card);border:2px solid var(--card-bd);border-radius:13px;padding:9px 14px} .pfact .k{display:block;font-weight:800;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--green-dk);margin-bottom:1px} .pfact .v{font-family:var(--display);font-weight:800;font-size:16px;color:var(--ink)} /* generic content section + readable prose */ .psection{padding:clamp(46px,6vw,88px) 0} .psection.tint{background:#fff} .sec-head{margin-bottom:30px} .sec-head h2{margin-top:14px} .prose{max-width:64ch} .prose p{font-size:clamp(16px,1.5vw,18px);line-height:1.66;color:var(--ink-soft);font-weight:500;margin-bottom:16px} .prose p:last-child{margin-bottom:0} .prose p strong{color:var(--ink);font-weight:700} /* tinted info panel (9 B's) */ .panel{background:var(--paper);border:2.5px solid var(--paper-deep);border-radius:24px;padding:clamp(24px,3vw,40px)} .psection.tint .panel{background:var(--paper)} .bmnemonic{font-family:var(--display);font-weight:800;font-size:clamp(17px,1.9vw,23px);line-height:1.35;color:var(--ink);letter-spacing:-.01em} .bmnemonic span{color:var(--magenta)} .bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px} .bcell{background:var(--card);border:1px solid var(--card-bd);border-radius:14px;padding:15px 16px} .bcell .bk{font-family:var(--display);font-weight:800;font-size:16px;color:var(--green-dp);margin-bottom:5px} .bcell .bd{font-size:13px;color:var(--ink-soft);font-weight:500;line-height:1.46} /* timeline */ .tl{border-left:3px solid var(--paper-deep);padding-left:26px;margin-top:8px} .tl .row{position:relative;padding:0 0 26px} .tl .row:last-child{padding-bottom:0} .tl .row::before{content:"";position:absolute;left:-33px;top:3px;width:13px;height:13px;border-radius:50%;background:var(--magenta);border:3px solid #fff} .tl .yr{font-family:var(--display);font-weight:900;font-size:21px;color:var(--magenta-dp);line-height:1} .tl .tx{font-size:14.5px;color:var(--ink-soft);font-weight:500;line-height:1.5;margin-top:4px;max-width:62ch} .tl .tx strong{color:var(--ink);font-weight:700} /* two-up distinction cards */ .duo{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:6px} .dcard{border-radius:20px;padding:26px;border:2.5px solid var(--card-bd);background:var(--card)} .dcard h3{font-family:var(--display);font-weight:800;font-size:23px;margin-bottom:4px;color:var(--green-dk)} .dcard .sub{font-weight:800;font-size:11.5px;color:var(--green-dk);text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px} .dcard ul{list-style:none;display:grid;gap:9px} .dcard li{font-size:14px;color:var(--ink-soft);font-weight:500;line-height:1.45;padding-left:20px;position:relative} .dcard li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;background:var(--mustard)} /* dark green CTA band */ .cta{background:linear-gradient(90deg,var(--green-dk) 0%,var(--green-dk) 46%,rgba(30,102,31,.5) 66%,rgba(30,102,31,.08) 100%),url('/wp-content/uploads/2026/06/home-page-lady.png') right -4% center/auto 86% no-repeat,var(--green-dk);color:var(--paper);padding:clamp(48px,6vw,84px) 0;position:relative;overflow:hidden} .cta .wrap{display:grid;grid-template-columns:1fr auto;gap:36px;align-items:center;position:relative;z-index:2} .cta h2{font-family:var(--display);font-weight:900;font-size:clamp(28px,4vw,52px);line-height:.98;letter-spacing:-.02em;color:#fff} .cta p{color:rgba(255,255,255,.86);font-weight:500;font-size:16px;margin-top:12px;max-width:48ch;line-height:1.55} .cta .actions{display:flex;gap:12px;flex-wrap:wrap} @media(max-width:900px){ .phero .wrap{grid-template-columns:1fr} .phero-photo{order:-1;max-width:520px;margin:0 auto} .bgrid{grid-template-columns:1fr 1fr} .duo,.cta .wrap{grid-template-columns:1fr} } @media(max-width:520px){.bgrid{grid-template-columns:1fr}} /* ============================================================ OVER-ONS / STEUN / CONTACT helpers ============================================================ */ .team{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px} .tmember{background:var(--card);border:1px solid var(--card-bd);border-radius:20px;overflow:hidden;box-shadow:0 18px 40px -26px rgba(33,56,71,.5)} .tmember img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block} .tmember .tm-body{padding:15px 18px 19px} .tmember .tm-name{font-family:var(--display);font-weight:800;font-size:19px;color:var(--green-dk)} .tmember .tm-role{font-weight:700;font-size:13px;color:var(--ink);margin-top:2px} .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px} .chip{background:var(--card);border:2px solid var(--card-bd);border-radius:13px;padding:10px 15px} .chip .cn{font-family:var(--display);font-weight:800;font-size:15px;color:var(--ink);display:block} .chip .cr{font-size:12.5px;color:var(--ink-soft);font-weight:600} .blist{list-style:none;display:grid;gap:2px;margin-top:6px} .blist li{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--paper-deep)} .blist li:last-child{border-bottom:none} .blist .bn{font-family:var(--display);font-weight:800;font-size:16.5px;color:var(--ink)} .blist .br{font-size:13.5px;color:var(--ink-soft);font-weight:600;text-align:right} .note{background:var(--rose);border-radius:14px;padding:14px 18px;font-size:13.5px;font-weight:600;color:var(--brick);line-height:1.5;margin-top:18px} /* contact */ .cgrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,4vw,56px);align-items:start} /* left info column → white card, matching the contact form card */ .cinfo{ display:grid; gap:16px; align-content:start; background:#fff; border:1px solid rgba(33,56,71,.08); border-radius:20px; padding:clamp(22px,3vw,32px); box-shadow:0 18px 44px -28px rgba(33,56,71,.5); } .cinfo .row{display:flex;gap:13px;align-items:flex-start} .cinfo .ic{flex-shrink:0;width:42px;height:42px;border-radius:12px;background:var(--paper);border:2px solid var(--paper-deep);display:flex;align-items:center;justify-content:center} .cinfo .ic svg{width:19px;height:19px;fill:none;stroke:var(--magenta);stroke-width:2} .cinfo .k{font-weight:800;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft)} .cinfo .v{font-size:15.5px;color:var(--ink);font-weight:600;line-height:1.45} .cinfo .v a:hover{color:var(--magenta)} .cform{display:block;background:#fff;border:1px solid rgba(33,56,71,.08);border-radius:20px;padding:clamp(22px,3vw,32px);box-shadow:0 18px 44px -28px rgba(33,56,71,.5)} .cform label{display:block;font-weight:800;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin:14px 0 5px} .cform label:first-of-type{margin-top:0} .cform input,.cform textarea{width:100%;font-family:var(--body);font-size:15px;color:var(--ink);background:var(--paper);border:2px solid var(--paper-deep);border-radius:11px;padding:11px 13px;outline:none;transition:border-color .18s} .cform input:focus,.cform textarea:focus{border-color:var(--magenta)} .cform select{width:100%;font-family:var(--body);font-size:15px;color:var(--ink);background-color:var(--paper);border:2px solid var(--paper-deep);border-radius:11px;padding:11px 40px 11px 13px;outline:none;transition:border-color .18s;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23213847' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:17px;cursor:pointer} .cform select:focus{border-color:var(--magenta)} .cform textarea{min-height:120px;resize:vertical;line-height:1.5} .cform .btn{margin-top:20px} .cform-done{display:none;margin-top:18px;padding:14px 16px;background:var(--paper);border-radius:12px;font-weight:700;color:var(--green-dp)} .cform.sent{display:none} .cform-done.show{display:block} @media(max-width:900px){.team{grid-template-columns:1fr 1fr}.cgrid{grid-template-columns:1fr}} @media(max-width:560px){.team{grid-template-columns:1fr}} /* ============================================================ DROPDOWN SUB-MENUS + working mobile menu ============================================================ */ .navitem{position:relative;display:inline-flex;align-items:center} .navitem>a{display:inline-flex;align-items:center;gap:5px} .caret{width:11px;height:11px;opacity:.6;transition:transform .2s} .navitem:hover .caret,.navitem:focus-within .caret{transform:rotate(180deg)} .navitem::after{content:"";position:absolute;top:100%;left:0;right:0;height:12px} /* hover bridge */ .submenu{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(8px);min-width:238px;background:#fff;border:1px solid rgba(33,56,71,.1);border-radius:16px;box-shadow:0 22px 50px -18px rgba(33,56,71,.45);padding:8px;opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease;z-index:70} .navitem:hover .submenu,.navitem:focus-within .submenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .submenu a{display:block;padding:9px 14px;border-radius:10px;font-size:14.5px;font-weight:600;color:var(--ink);white-space:nowrap;transition:background .15s,color .15s} .submenu a:hover{background:var(--paper);color:var(--magenta-dp)} /* mobile: burger opens the nav as a panel; submenus shown inline */ @media(max-width:900px){ .header.nav-open .nav{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;top:100%;left:0;right:0;background:var(--paper);border-top:1px solid var(--paper-deep);box-shadow:0 18px 34px -18px rgba(33,56,71,.4);padding:10px var(--gutter) 18px;max-height:calc(100vh - 68px);overflow-y:auto} .header.nav-open .nav>a,.header.nav-open .navitem>a{padding:13px 4px;font-size:16px;border-bottom:1px solid var(--paper-deep);justify-content:space-between} .header.nav-open .navitem{flex-direction:column;align-items:stretch} .header.nav-open .caret{display:none} .header.nav-open .submenu{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:none;background:transparent;padding:2px 0 10px 14px;min-width:0} .header.nav-open .submenu a{padding:9px 6px;font-size:14.5px;color:var(--ink-soft)} .header.nav-open .nav a.on::after{display:none} .burger[aria-expanded="true"]{background:var(--magenta)} } /* ============================================================ LARGE PROGRAMME ILLUSTRATION FEATURE ============================================================ */ .illu-feature{padding:clamp(44px,6vw,84px) 0;text-align:center} .illu-stage{position:relative;display:inline-flex;align-items:center;justify-content:center;width:clamp(250px,34vw,380px);height:clamp(250px,34vw,380px)} .illu-sheet{position:absolute;inset:7%;border-radius:42px;transform:rotate(-5deg);z-index:0;box-shadow:0 26px 54px -30px rgba(33,56,71,.55)} .cpbadge.cpbadge-xl{position:relative;left:auto;bottom:auto;width:clamp(176px,24vw,264px);height:clamp(176px,24vw,264px);border-width:6px;transform:rotate(2deg);box-shadow:0 14px 30px -12px rgba(22,36,44,.45)} .illu-feature .fstar{position:absolute;z-index:2} /* ============================================================ Redesigned programme cards (homepage) — clean photos, small illustration stamp, 3 main + 3 secondary hierarchy ============================================================ */ .pgrid{display:grid;gap:24px} .pgrid-main{grid-template-columns:repeat(3,1fr);margin-bottom:24px} .pgrid-sub{grid-template-columns:repeat(3,1fr)} .pcard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--card-bd);border-radius:20px;overflow:hidden;color:var(--ink);text-decoration:none;box-shadow:0 18px 40px -26px rgba(33,56,71,.55);transition:transform .18s ease,box-shadow .18s ease;cursor:pointer} .pcard:hover{transform:translateY(-6px);box-shadow:0 28px 54px -24px rgba(33,56,71,.6)} .pcard-media{position:relative;height:208px;overflow:hidden;background:var(--paper-deep)} .pcard-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease} .pcard:hover .pcard-media img{transform:scale(1.04)} .pcard-body{position:relative;padding:14px 22px 22px} .pcard-ill{position:absolute;top:-30px;left:20px;width:54px;height:54px;border-radius:50%;border:3px solid #fff;background:#fff;box-shadow:0 6px 16px -7px rgba(22,36,44,.55);display:flex;align-items:center;justify-content:center;overflow:hidden;transform:rotate(-4deg);transition:transform .25s ease;z-index:2} .pcard:hover .pcard-ill{transform:rotate(3deg) scale(1.07)} .pcard-ill svg{width:74%;height:74%;overflow:visible} .pcard-meta{display:flex;justify-content:flex-end;min-height:26px} .pcard-cat{font-weight:800;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--green-dk);background:rgba(68,165,62,.14);padding:5px 11px;border-radius:999px;white-space:nowrap} .pcard h3{font-family:var(--display);font-weight:800;font-size:22px;line-height:1.05;margin:8px 0 3px;color:var(--green-dk)} .pcard-loc{font-weight:700;font-size:12.5px;color:var(--ink);margin-bottom:9px} .pcard-desc{font-size:14px;color:var(--ink-soft);font-weight:500;line-height:1.5;margin-bottom:14px} .pcard .more{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:13.5px;color:var(--ink)} .pcard .more svg{width:15px;height:15px;transition:transform .2s} .pcard:hover .more svg{transform:translateX(4px)} /* secondary tier — visibly smaller / lighter */ .pcard-sm .pcard-media{height:208px} .pcard-sm .pcard-ill{width:46px;height:46px;top:-26px;border-width:2.5px} .pcard-sm .pcard-body{padding:12px 20px 20px} .pcard-sm h3{font-size:19px} .pcard-sm .pcard-desc{font-size:13px;margin-bottom:12px} /* "coming soon" placeholder card */ .pcard.is-soon{border-style:dashed;border-color:rgba(229,33,126,.4);box-shadow:none} .pcard.is-soon .pcard-media{background:linear-gradient(135deg,var(--paper-deep),#efd9c2)} @media(max-width:900px){.pgrid-main,.pgrid-sub{grid-template-columns:1fr}} @media(min-width:601px) and (max-width:900px){.pgrid-sub{grid-template-columns:1fr 1fr}} /* ===== team cards as links + Production Office logo chip ===== */ a.tmember{display:block;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease} a.tmember:hover{transform:translateY(-5px);box-shadow:0 28px 54px -24px rgba(33,56,71,.6)} .tmember .tm-more{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:12.5px;color:var(--ink);margin-top:10px} .tmember .tm-more svg{width:14px;height:14px;transition:transform .2s} a.tmember:hover .tm-more svg{transform:translateX(4px)} a.chip{cursor:pointer;text-decoration:none;color:inherit;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease} a.chip:hover{transform:translateY(-3px);box-shadow:0 16px 30px -20px rgba(33,56,71,.55);border-color:var(--magenta)} .chip.chip-po{display:inline-flex;align-items:center;gap:12px;background:#fff;border-color:rgba(33,56,71,.14)} .chip.chip-po img{height:26px;width:auto;display:block} .chip.chip-po .cr{display:block} /* --- Card sections on white, text-only sections on cream (alternating) --- */ .prog,.agenda{background:#fff} .phero:has(.pfacts), .psection:has(.bcell), .psection:has(.dcard), .psection:has(.tmember), .psection:has(.chip), .psection:has(.panel), .psection:has(.songgrid), .psection:has(.audio-card), .psection:has(.scoregrid), .psection:has(.stepgrid){background:#fff} .psection:has(.tl){background:#fff} /* programmapagina-tijdlijn op wit; agenda-tijdlijnen staan buiten .psection en blijven ongemoeid */ .psection.tint:not(:has(.bcell)):not(:has(.dcard)):not(:has(.tmember)):not(:has(.chip)):not(:has(.panel)):not(:has(.songgrid)):not(:has(.audio-card)):not(:has(.scoregrid)):not(:has(.stepgrid)){background:transparent} /* --- Brand stars in the white card sections (decorative, behind cards) --- */ .prog,.agenda,.psection:has(.bcell),.psection:has(.dcard),.psection:has(.tmember),.psection:has(.chip),.psection:has(.panel){position:relative} .prog::before,.agenda::before,.psection:has(.bcell)::before,.psection:has(.dcard)::before,.psection:has(.tmember)::before,.psection:has(.chip)::before,.psection:has(.panel)::before{content:"";position:absolute;z-index:-1;pointer-events:none;top:5%;right:4.5%;width:38px;height:38px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%201.6%20L14.62%208.4%20L21.89%208.79%20L16.23%2013.38%20L18.11%2020.41%20L12%2016.45%20L5.89%2020.41%20L7.77%2013.38%20L2.11%208.79%20L9.38%208.4%20Z%27%20fill%3D%27%23E6B23C%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;opacity:.6;transform:rotate(-9deg)} .prog::after,.agenda::after,.psection:has(.bcell)::after,.psection:has(.dcard)::after,.psection:has(.tmember)::after,.psection:has(.chip)::after,.psection:has(.panel)::after{content:"";position:absolute;z-index:-1;pointer-events:none;bottom:7%;left:4%;width:28px;height:28px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%201.6%20L14.62%208.4%20L21.89%208.79%20L16.23%2013.38%20L18.11%2020.41%20L12%2016.45%20L5.89%2020.41%20L7.77%2013.38%20L2.11%208.79%20L9.38%208.4%20Z%27%20fill%3D%27%23E5217E%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;opacity:.5;transform:rotate(11deg)} @media(max-width:700px){.prog::before,.agenda::before,.psection:has(.bcell)::before,.psection:has(.dcard)::before,.psection:has(.tmember)::before,.psection:has(.chip)::before,.psection:has(.panel)::before,.prog::after,.agenda::after,.psection:has(.bcell)::after,.psection:has(.dcard)::after,.psection:has(.tmember)::after,.psection:has(.chip)::after,.psection:has(.panel)::after{display:none}} /* ── Zigzag-pad decoratie ── */ .zz-divider{height:48px;background:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%2060%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M0%2046%20L30%2014%22%20stroke%3D%22%2344A53E%22%20stroke-width%3D%2213%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M30%2014%20L60%2046%22%20stroke%3D%22%23E5217E%22%20stroke-width%3D%2213%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M60%2046%20L90%2014%22%20stroke%3D%22%23E6B23C%22%20stroke-width%3D%2213%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M90%2014%20L120%2046%22%20stroke%3D%22%236FB2D6%22%20stroke-width%3D%2213%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E) repeat-x center;background-size:auto 60%} .footer{position:relative} .footer::before{content:"";position:absolute;left:0;right:0;top:0;height:30px; background:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%2060%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M0%2046%20L30%2014%22%20stroke%3D%22%2344A53E%22%20stroke-width%3D%2213%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M30%2014%20L60%2046%22%20stroke%3D%22%23E5217E%22%20stroke-width%3D%2213%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M60%2046%20L90%2014%22%20stroke%3D%22%23E6B23C%22%20stroke-width%3D%2213%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M90%2014%20L120%2046%22%20stroke%3D%22%236FB2D6%22%20stroke-width%3D%2213%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E) repeat-x center;background-size:auto 100%} @media(max-width:640px){ .zz-divider{height:32px;background-size:auto 56%} .footer::before{height:20px} } /* Negen B's: pink cards sit directly on the white section (no cream panel) */ .panel:has(.bgrid){background:transparent;border:none;border-radius:0;padding:0} /* Heart icons in bright magenta everywhere */ .ico-heart{fill:var(--magenta)} /* ════════════════════════════════════════════════════════════════ GALERIJ-pagina + LIEDEREN (freemium-liederen) — toegevoegd 2026-06-01 ════════════════════════════════════════════════════════════════ */ /* ── Volledige galerij-grid ── */ .galgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .songfotos{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px} @media(max-width:760px){.songfotos{grid-template-columns:1fr 1fr}} .galgrid .photo{aspect-ratio:3/2;cursor:zoom-in} .galgrid .photo img.gphoto{transition:transform .4s ease} .galgrid .photo:hover img.gphoto{transform:scale(1.05)} .galcredit{margin-top:26px;font-weight:700;font-size:13px;color:var(--ink-soft)} @media(max-width:840px){.galgrid{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.galgrid{grid-template-columns:1fr}} /* ── Lichtbak (lightbox) ── */ .lightbox{position:fixed;inset:0;background:rgba(22,36,44,.92);display:none;align-items:center;justify-content:center;z-index:9999;padding:24px;cursor:zoom-out} .lightbox.open{display:flex} .lightbox img{max-width:94vw;max-height:90vh;border-radius:12px;box-shadow:0 24px 60px -20px rgba(0,0,0,.6)} .lightbox .lb-close{position:absolute;top:18px;right:22px;width:44px;height:44px;border-radius:50%;border:none;background:var(--paper);color:var(--ink);font-size:24px;font-weight:800;cursor:pointer;line-height:1} /* ── Liederen-landing: lied-kaarten ── */ .songgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px} .songcard{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(33,56,71,.06);border-radius:22px;overflow:hidden;color:var(--ink);text-decoration:none;box-shadow:0 18px 40px -26px rgba(33,56,71,.55);transition:transform .18s ease,box-shadow .18s ease} .songcard:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 28px 54px -24px rgba(33,56,71,.6)} .songcard .art{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--paper-deep)} .songcard .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease} .songcard:hover .art img{transform:scale(1.05)} .songcard .art .freebadge{position:absolute;top:13px;left:13px;z-index:2;background:var(--magenta);color:#fff;font-weight:800;font-size:11px;letter-spacing:.07em;text-transform:uppercase;padding:6px 12px;border-radius:999px;box-shadow:0 5px 14px -6px rgba(22,36,44,.5)} .songcard .body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1} .songcard h3{font-family:var(--display);font-weight:800;font-size:24px;margin-bottom:5px} .songcard .by{font-weight:700;font-size:12.5px;color:var(--magenta-dp);margin-bottom:10px;letter-spacing:.02em} .songcard p{font-size:14.5px;color:var(--ink-soft);font-weight:500;line-height:1.55;margin-bottom:16px;flex:1} .songcard .more{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:14px;color:var(--green-dp)} .songcard .more svg{width:16px;height:16px;transition:transform .2s} .songcard:hover .more svg{transform:translateX(4px)} @media(max-width:700px){.songgrid{grid-template-columns:1fr}} /* ── Lied-detail: meta-balk, stappen, partituur, audio, download ── */ .songmeta{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px} .songmeta .mi{background:var(--card);border:2px solid var(--card-bd);border-radius:13px;padding:9px 14px} .songmeta .mi .k{display:block;font-weight:800;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--green-dk);margin-bottom:1px} .songmeta .mi .v{font-family:var(--display);font-weight:800;font-size:15px;color:var(--ink)} .stepgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .stepcard{border-radius:16px;overflow:hidden;background:#fff;border:1px solid rgba(33,56,71,.08);box-shadow:0 14px 32px -24px rgba(33,56,71,.5)} .stepcard .num{display:flex;align-items:center;gap:9px;padding:11px 15px;font-family:var(--display);font-weight:800;font-size:14px;color:var(--ink)} .stepcard .num b{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--magenta);color:#fff;font-size:13px} .stepcard .sh{position:relative;aspect-ratio:16/9;background:var(--paper-deep);cursor:zoom-in;overflow:hidden} .stepcard .sh img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} @media(max-width:780px){.stepgrid{grid-template-columns:repeat(2,1fr)}} @media(max-width:480px){.stepgrid{grid-template-columns:1fr}} .scoregrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .scoregrid .sheet{border-radius:12px;overflow:hidden;border:1px solid var(--card-bd);background:#fff;cursor:zoom-in;box-shadow:0 12px 28px -22px rgba(33,56,71,.5)} .scoregrid .sheet img{width:100%;display:block} @media(max-width:780px){.scoregrid{grid-template-columns:repeat(2,1fr)}} .audio-card{display:flex;align-items:center;gap:16px;background:var(--card);border:2px solid var(--card-bd);border-radius:18px;padding:16px 20px;margin-bottom:14px;flex-wrap:wrap} .audio-card .ac-ico{flex:0 0 auto;width:46px;height:46px;border-radius:50%;background:var(--green-dp);display:flex;align-items:center;justify-content:center;transition:transform .14s,background .14s} .audio-card .ac-ico:hover{transform:scale(1.07);background:var(--green-dk)} .audio-card .ac-ico:focus-visible{outline:3px solid var(--magenta);outline-offset:3px} .audio-card .ac-ico svg{width:22px;height:22px;fill:#fff} .audio-card .ac-txt{flex:1;min-width:160px} .audio-card .ac-txt .ac-t{font-family:var(--display);font-weight:800;font-size:16px;color:var(--ink)} .audio-card .ac-txt .ac-s{font-size:12.5px;font-weight:600;color:var(--ink-soft)} .audio-card audio{flex:1 1 240px;min-width:200px;height:40px} .dl{display:inline-flex;align-items:center;gap:9px;background:#fff;border:2.5px solid var(--ink);color:var(--ink);font-weight:800;font-size:14.5px;padding:13px 20px;border-radius:14px;transition:background .14s,color .14s,transform .14s} .dl svg{width:18px;height:18px} .dl:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px)} .songblock{margin-bottom:clamp(34px,5vw,56px)} .songblock:last-child{margin-bottom:0} .songblock > h3{font-family:var(--display);font-weight:800;font-size:clamp(22px,3vw,30px);color:var(--ink);margin-bottom:6px} .songblock > .bl-sub{font-size:15px;color:var(--ink-soft);font-weight:500;line-height:1.6;margin-bottom:18px;max-width:62ch} .yt-link{display:inline-flex;align-items:center;gap:9px;background:var(--magenta);color:#fff;font-weight:800;font-size:14.5px;padding:13px 20px;border-radius:14px;box-shadow:0 5px 0 var(--magenta-dp);transition:transform .14s,box-shadow .14s} .yt-link svg{width:18px;height:18px;fill:#fff} .yt-link:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--magenta-dp)} /* Legal / privacy document */ .legaldoc{max-width:760px} .legaldoc h2{font-family:var(--display);font-weight:800;font-size:clamp(20px,2.3vw,26px);color:var(--ink);margin:34px 0 10px} .legaldoc h2:first-of-type{margin-top:4px} .legaldoc p{font-size:15.5px;line-height:1.7;color:var(--ink-soft);margin:0 0 12px} .legaldoc ul{margin:0 0 14px;padding-left:22px} .legaldoc li{font-size:15.5px;line-height:1.6;color:var(--ink-soft);margin-bottom:7px} .legaldoc a{color:var(--green-dk);font-weight:700} .legaldoc strong{color:var(--ink)} .legaldoc .ctrl-box{background:#fff;border:2px solid var(--paper-deep);border-radius:14px;padding:18px 22px;font-size:15px;line-height:1.7;color:var(--ink);margin:6px 0 10px} .legaldoc .upd{font-size:13px;color:var(--ink-soft);font-style:italic} .legaldoc .lawbanner{background:#fff;border:2px solid var(--paper-deep);border-left:5px solid var(--mustard);border-radius:10px;padding:14px 18px;font-size:14px;line-height:1.6;color:var(--ink);margin:0 0 24px} .footer-bottom .legal-link{color:inherit;text-decoration:underline;text-underline-offset:2px} /* Linked partner cards */ a.funder{text-decoration:none;transition:transform .16s,box-shadow .16s} a.funder:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(33,56,71,.5)} /* Compact logos in the homepage partners/funders block (names listed on the left) */ .partners .funder{min-width:104px;min-height:70px;padding:10px 14px} .partners .funder img{max-height:42px} .partners .funder.lg img{max-height:50px} .partners .funder.xl img{max-height:56px} .namelist{margin-top:18px;font-family:var(--display);font-weight:600;font-size:15px;line-height:1.85;color:var(--ink-soft)} /* ============================================================= */ /* TEAMBUILDINGS — formule-kaarten, skills, video-facade */ /* ============================================================= */ /* "Wat het met je team doet" — skills */ .skills{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:26px} .skill{background:var(--card);border:1px solid var(--card-bd);border-radius:16px;padding:18px 16px 16px} .skill .sn{display:inline-flex;width:32px;height:32px;border-radius:50%;align-items:center;justify-content:center;background:var(--green-dp);color:#fff;font-family:var(--display);font-weight:900;font-size:14px;margin-bottom:11px} .skill h4{font-family:var(--display);font-weight:800;font-size:15px;color:var(--green-dk);margin-bottom:5px;line-height:1.18} .skill p{font-size:12.5px;color:var(--ink-soft);font-weight:500;line-height:1.42} /* Formule-kaarten (ENERGIZER / BOOSTER / EXTRA) */ .fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px;align-items:stretch} .fcard{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:14px;background:#fff;border:1px solid var(--card-bd);border-radius:20px;padding:30px 24px 26px;box-shadow:0 14px 34px -24px rgba(33,56,71,.5)} .fcard::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:var(--tier,var(--magenta))} .fcard:nth-child(1){--tier:var(--mustard)} .fcard:nth-child(2){--tier:var(--magenta)} .fcard:nth-child(3){--tier:var(--green)} .fcard .ftag{font-family:var(--display);font-weight:900;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--tier,var(--magenta))} .fcard .fprice{font-family:var(--display);font-weight:900;font-size:38px;line-height:1;color:var(--ink)} .fcard .fprice .cur{font-size:23px;vertical-align:top;margin-right:1px} .fcard .fprice small{display:block;font-family:var(--body);font-weight:600;font-size:12px;color:var(--ink-soft);letter-spacing:0;text-transform:none;margin-top:7px} .fcard .fmeta{display:flex;flex-wrap:wrap;gap:8px} .fcard .fmeta span{background:var(--card);border:1px solid var(--card-bd);border-radius:10px;padding:6px 11px;font-weight:800;font-size:12px;color:var(--green-dk)} .fcard .fdesc{font-size:14px;color:var(--ink-soft);font-weight:500;line-height:1.5} .fcard ul{list-style:none;display:grid;gap:8px;margin:0} .fcard li{font-size:13.5px;color:var(--ink-soft);font-weight:500;line-height:1.45;padding-left:22px;position:relative} .fcard li::before{content:"";position:absolute;left:0;top:6px;width:9px;height:9px;border-radius:50%;background:var(--tier,var(--magenta))} .fcard .fcta{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:13.5px;color:var(--green-dk);text-decoration:none} .fcard .fcta svg{width:15px;height:15px} .fcard .fcta:hover{color:var(--magenta)} .fnote{margin-top:18px;font-size:13px;color:var(--ink-soft);line-height:1.5} /* Video-facade (klik-om-te-spelen) */ .videowrap{position:relative;border-radius:24px;overflow:hidden;box-shadow:0 24px 50px -28px rgba(33,56,71,.6);aspect-ratio:16/9;background:var(--ink);cursor:pointer} .videowrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .videowrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block} .videowrap .vshade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(33,56,71,.04),rgba(33,56,71,.5))} .video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;background:var(--magenta);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 12px 30px -10px rgba(229,33,126,.7);transition:transform .16s} .videowrap:hover .video-play{transform:translate(-50%,-50%) scale(1.07)} .video-play svg{width:30px;height:30px;fill:#fff;margin-left:4px} .video-cap{position:absolute;left:20px;bottom:16px;z-index:2;color:#fff;font-weight:800;font-size:14px;text-shadow:0 1px 8px rgba(0,0,0,.5)} /* Twee-foto-rij */ .tb-photos{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px} .tb-photos .photo.real{aspect-ratio:4/3} @media(max-width:900px){ .fgrid{grid-template-columns:1fr} .skills{grid-template-columns:1fr 1fr} .tb-photos{grid-template-columns:1fr} } @media(max-width:520px){.skills{grid-template-columns:1fr}} /* Aquaquoise stap-video facade (binnen .stepcard .sh) */ .stepcard .sh[data-yt]{cursor:pointer} .stepcard .sh[data-yt] .video-play{width:54px;height:54px;box-shadow:0 10px 24px -8px rgba(229,33,126,.7)} .stepcard .sh[data-yt] .video-play svg{width:21px;height:21px;margin-left:3px} .stepcard .sh iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block} /* Havenlied hero als video-facade (volledig lied) */ .phero-photo[data-yt]{cursor:pointer} .phero-photo[data-yt] iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block} .stepcard .sh .vshade,.phero-photo .vshade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(33,56,71,.05),rgba(33,56,71,.5));pointer-events:none} /* ── Liedcoaches + photo chips ── */ .coach-banner{margin-top:14px;border-radius:20px;overflow:hidden;box-shadow:0 18px 40px -26px rgba(33,56,71,.5)} .coach-banner img{width:100%;aspect-ratio:16/7;object-fit:cover;display:block} .coachgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px} .coach{background:var(--card);border:2px solid var(--card-bd);border-radius:13px;padding:13px 16px;font-family:var(--display);font-weight:800;font-size:15px;color:var(--ink)} .chip.chip-ph{display:inline-flex;align-items:center;gap:11px;padding:8px 15px 8px 8px} .chip.chip-ph img{width:42px;height:42px;border-radius:50%;object-fit:cover;display:block;flex:none} .chip.chip-ph .ct{display:flex;flex-direction:column} @media(max-width:760px){.coachgrid{grid-template-columns:1fr 1fr}} /* ── Praktisch info card (programmapagina's) ── */ .practical{margin-top:22px;background:var(--card);border:2px solid var(--card-bd);border-radius:18px;padding:20px 24px;max-width:640px} .practical-h{font-family:var(--display);font-weight:800;font-size:16px;color:var(--green-dk);margin:0 0 12px} .practical-list{list-style:none;margin:0;padding:0;display:grid;gap:11px} .practical-list li{display:grid;grid-template-columns:118px 1fr;gap:12px;align-items:baseline} .practical-list .pl-k{font-family:var(--display);font-weight:800;font-size:12px;color:var(--magenta);text-transform:uppercase;letter-spacing:.05em} .practical-list .pl-v{font-size:15px;color:var(--ink);line-height:1.45} @media(max-width:600px){.practical-list li{grid-template-columns:1fr;gap:2px}} .psection-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,4.5vw,64px);align-items:center} .psection-split-text{min-width:0} .psection-photo{position:relative;display:block;border-radius:26px;overflow:hidden;box-shadow:0 28px 56px -32px rgba(0,0,0,.55);transform:rotate(1.1deg);text-decoration:none;background:var(--ink)} .psection-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .5s ease} .psection-photo .psection-photo-cap{position:absolute;left:0;right:0;bottom:0;padding:32px 18px 15px;font-family:var(--display);font-weight:700;color:#fff;font-size:14.5px;letter-spacing:.02em;background:linear-gradient(transparent,rgba(20,36,44,.74))} .psection-photo:hover img{transform:scale(1.04)} @media(max-width:820px){.psection-split{grid-template-columns:1fr;gap:28px}.psection-photo{transform:none;max-width:520px}} /* liederen 'Voor leerkrachten & coaches' panel — responsive (v62 fix) */ .lk-grid{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center} @media(max-width:720px){.lk-grid{grid-template-columns:1fr;gap:20px}.lk-grid>div:last-child{align-self:start}} /* liederen 'De makers' — twee bio-kaarten naast elkaar (v63) */ .duo-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px} @media(max-width:640px){.duo-grid{grid-template-columns:1fr}} /* illustratie in een psection-split rechterkolom (v66) */ .illu-col{display:flex;justify-content:center;align-items:center} @media(max-width:820px){.illu-col{order:-1;margin-bottom:6px}} /* kleine feiten-kaarten, 2x2 (v69) */ .factgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px} @media(max-width:640px){.factgrid{grid-template-columns:1fr}} /* ── Contact form (FluentForm #1) styled to match the mockup .cform ── */ /* Card wrapper */ .zg-cform-wrap{ background:#fff; border:1px solid rgba(33,56,71,.08); border-radius:20px; padding:clamp(22px,3vw,32px); box-shadow:0 18px 44px -28px rgba(33,56,71,.5); } .zg-cform-wrap .frm-fluent-form{ background:transparent; box-shadow:none; padding:0; } /* Spacing between fields */ .zg-cform-wrap .ff-el-group{ margin-bottom:14px; } /* Labels */ .zg-cform-wrap .ff-el-input--label label{ display:block; font-weight:800; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 5px; } .zg-cform-wrap .ff-el-is-required .text-danger, .zg-cform-wrap .ff-el-input--label .text-danger{ color:var(--magenta); } /* Inputs, email, textarea, select — all share .ff-el-form-control */ .zg-cform-wrap .ff-el-form-control{ width:100%; font-family:var(--body); font-size:15px; color:var(--ink) !important; background:var(--paper) !important; border:2px solid var(--paper-deep) !important; border-radius:11px !important; padding:11px 13px; outline:none; transition:border-color .18s; box-shadow:none !important; } .zg-cform-wrap .ff-el-form-control:focus{ border-color:var(--magenta) !important; } /* Dropdown caret (native