{"id":1542,"date":"2026-05-26T06:45:40","date_gmt":"2026-05-26T06:45:40","guid":{"rendered":"https:\/\/watermolenfeesten.be\/?page_id=1542"},"modified":"2026-06-01T07:26:18","modified_gmt":"2026-06-01T07:26:18","slug":"sponsors","status":"publish","type":"page","link":"https:\/\/watermolenfeesten.be\/?page_id=1542","title":{"rendered":"Sponsors"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1542\" class=\"elementor elementor-1542\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8b4043f e-flex e-con-boxed e-con e-parent\" data-id=\"8b4043f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-82ce1bd elementor-widget elementor-widget-html\" data-id=\"82ce1bd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"nl\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Sponsors \u2014 Watermolenfeesten 2026<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@700;900&family=Lato:wght@300;400;700&display=swap\" rel=\"stylesheet\">\n<style>\n  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n  :root {\n    --blauw:       #41A9CC;\n    --blauw-donker:#2e87a8;\n    --geel:        #F8DE60;\n    --geel-donker: #e0c43a;\n    --bruin:       #5E4F45;\n    --bruin-licht: #7a6558;\n    --creme:       #faf8f4;\n    --wit:         #ffffff;\n    --tekst:       #3a3028;\n    --subtekst:    #6b5e55;\n  }\n\n  html { scroll-behavior: smooth; }\n\n  body {\n    font-family: 'Lato', sans-serif;\n    background-color: var(--creme);\n    color: var(--tekst);\n    overflow-x: hidden;\n  }\n\n  \/* \u2500\u2500 NAVIGATIE \u2500\u2500 *\/\n  nav {\n    position: fixed;\n    top: 0; left: 0; right: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0 2.5rem;\n    height: 64px;\n    background: rgba(94, 79, 69, 0.96);\n    backdrop-filter: blur(8px);\n  }\n\n  .nav-logo {\n    width: 42px;\n    height: 42px;\n    border-radius: 50%;\n    object-fit: cover;\n    border: 2px solid var(--geel);\n  }\n\n  .nav-links {\n    display: flex;\n    gap: 0.3rem;\n    list-style: none;\n  }\n\n  .nav-links a {\n    display: block;\n    padding: 0.4rem 1rem;\n    color: rgba(255,255,255,0.85);\n    text-decoration: none;\n    font-size: 0.82rem;\n    font-weight: 700;\n    letter-spacing: 2px;\n    text-transform: uppercase;\n    border-radius: 2px;\n    transition: color 0.2s, background 0.2s;\n  }\n\n  .nav-links a:hover,\n  .nav-links a.actief {\n    color: var(--bruin);\n    background: var(--geel);\n  }\n\n  .nav-burger {\n    display: none;\n    flex-direction: column;\n    gap: 5px;\n    cursor: pointer;\n    padding: 6px;\n    background: none;\n    border: none;\n  }\n\n  .nav-burger span {\n    display: block;\n    width: 24px;\n    height: 2px;\n    background: #fff;\n    border-radius: 2px;\n  }\n\n  @media (max-width: 640px) {\n    .nav-burger { display: flex; }\n    .nav-links {\n      display: none;\n      flex-direction: column;\n      position: absolute;\n      top: 64px; left: 0; right: 0;\n      background: var(--bruin);\n      padding: 1rem 2rem 1.5rem;\n      gap: 0.3rem;\n    }\n    .nav-links.open { display: flex; }\n    .nav-links a { font-size: 1rem; padding: 0.7rem 1rem; }\n  }\n\n  \/* \u2500\u2500 HERO \u2500\u2500 *\/\n  .hero {\n    position: relative;\n    min-height: 50vh;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    padding: 6rem 2rem 4rem;\n    background:\n      linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.6)),\n      url('https:\/\/watermolenfeesten.be\/wp-content\/uploads\/2026\/04\/bar_del_sol_square.jpg') center\/cover no-repeat;\n  }\n\n  .hero::after {\n    content: '';\n    position: absolute;\n    bottom: 0; left: 0; right: 0;\n    height: 80px;\n    background: linear-gradient(to bottom, transparent, var(--creme));\n  }\n\n  .hero-logo {\n    width: 120px;\n    height: 120px;\n    border-radius: 50%;\n    border: 3px solid var(--geel);\n    object-fit: cover;\n    margin-bottom: 2rem;\n    animation: fadeDown 1s ease both;\n  }\n\n  .hero h1 {\n    font-family: 'Playfair Display', serif;\n    font-size: clamp(3rem, 8vw, 6.5rem);\n    font-weight: 900;\n    color: #fff;\n    line-height: 1;\n    letter-spacing: -1px;\n    animation: fadeDown 1s ease 0.1s both;\n  }\n\n  .hero-datum {\n    font-size: clamp(1rem, 3vw, 1.4rem);\n    font-weight: 300;\n    letter-spacing: 6px;\n    text-transform: uppercase;\n    color: var(--geel);\n    margin: 1rem 0 0;\n    animation: fadeDown 1s ease 0.2s both;\n  }\n\n  \/* \u2500\u2500 SPONSORS SECTIE \u2500\u2500 *\/\n.sponsors-wrap {\n  max-width: 1400px;\n  margin: 0 auto;\n  padding: 4rem 1rem 5rem;\n}\n\n.sponsors-header {\n  text-align: center;\n  margin-bottom: 3rem;\n}\n\n.section-tag {\n  display: inline-block;\n  font-size: 0.72rem;\n  letter-spacing: 4px;\n  text-transform: uppercase;\n  color: var(--blauw);\n  font-weight: 700;\n  margin-bottom: 1rem;\n}\n\n.sponsors-header h2 {\n  font-family: 'Playfair Display', serif;\n  font-size: clamp(2rem, 5vw, 3rem);\n  color: var(--bruin);\n  line-height: 1.2;\n}\n\n.divider {\n  width: 60px;\n  height: 3px;\n  background: var(--geel);\n  margin: 2rem auto;\n  border-radius: 2px;\n}\n\n.sponsors-header p {\n  font-size: 1rem;\n  color: var(--subtekst);\n  line-height: 1.8;\n  max-width: 600px;\n  margin: 0 auto;\n}\n\n\/* \u2500\u2500 SPONSOR GRID \u2500\u2500 *\/\n.sponsor-grid {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 0.4rem;\n}\n\n@media (max-width: 900px) {\n  .sponsor-grid {\n    grid-template-columns: repeat(3, 1fr);\n  }\n}\n\n@media (max-width: 600px) {\n  .sponsor-grid {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 0.5rem;\n  }\n}\n\n.sponsor-item {\n  background: var(--wit);\n  border-radius: 6px;\n  padding: 1.2rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 180px;\n  border-top: 3px solid transparent;\n  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;\n}\n\n.sponsor-item img {\n  width: 100%;\n  max-height: 160px;\n  object-fit: contain;\n  display: block;\n}\n\n\/* \u2500\u2500 GROTERE LOGO'S OP DESKTOP \u2500\u2500 *\/\n@media (min-width: 601px) {\n  .sponsor-item {\n    min-height: 240px;\n    padding: 1.8rem;\n  }\n  .sponsor-item img {\n    max-height: 220px;\n  }\n}\n\n  \/* \u2500\u2500 LADEN \u2500\u2500 *\/\n  .sponsor-laden {\n    text-align: center;\n    padding: 4rem 2rem;\n    color: var(--subtekst);\n    font-size: 0.9rem;\n    letter-spacing: 2px;\n    text-transform: uppercase;\n  }\n\n  .sponsor-laden .spinner {\n    width: 36px;\n    height: 36px;\n    border: 3px solid rgba(65,169,204,0.2);\n    border-top-color: var(--blauw);\n    border-radius: 50%;\n    animation: spin 0.8s linear infinite;\n    margin: 0 auto 1rem;\n  }\n\n  @keyframes spin { to { transform: rotate(360deg); } }\n\n  .sponsor-fout {\n    text-align: center;\n    padding: 3rem 2rem;\n    color: var(--subtekst);\n    font-size: 0.9rem;\n  }\n\n  \/* \u2500\u2500 WORD SPONSOR \u2500\u2500 *\/\n  .word-sponsor {\n    text-align: center;\n    margin-top: 4rem;\n    padding: 3rem 2rem;\n    background: var(--wit);\n    border-radius: 6px;\n    border-top: 3px solid var(--geel);\n  }\n\n  .word-sponsor h3 {\n    font-family: 'Playfair Display', serif;\n    font-size: 1.6rem;\n    color: var(--bruin);\n    margin-bottom: 0.8rem;\n  }\n\n  .word-sponsor p {\n    font-size: 0.95rem;\n    color: var(--subtekst);\n    line-height: 1.7;\n    margin-bottom: 1.5rem;\n  }\n\n  .btn-sponsor {\n    display: inline-block;\n    padding: 1rem 2.5rem;\n    background: var(--blauw);\n    color: var(--geel) !important;\n    font-weight: 700;\n    font-size: 0.9rem;\n    letter-spacing: 3px;\n    text-transform: uppercase;\n    text-decoration: none;\n    border-radius: 2px;\n    transition: background 0.3s, transform 0.2s;\n  }\n\n  .btn-sponsor:hover { background: var(--blauw-donker); transform: translateY(-2px); }\n\n  \/* \u2500\u2500 FOOTER \u2500\u2500 *\/\n  footer {\n    background: #2a1f1a;\n    color: rgba(255,255,255,0.55);\n    text-align: center;\n    padding: 3rem 2rem;\n    font-size: 0.88rem;\n  }\n\n  .footer-logo {\n    width: 56px;\n    height: 56px;\n    border-radius: 50%;\n    object-fit: cover;\n    margin-bottom: 1rem;\n    opacity: 0.65;\n    border: 2px solid var(--geel);\n  }\n\n  .footer-links { margin-bottom: 1.2rem; }\n\n  footer a {\n    color: var(--geel);\n    text-decoration: none;\n    margin: 0 0.8rem;\n    font-weight: 700;\n    letter-spacing: 1px;\n    transition: color 0.2s;\n  }\n\n  footer a:hover { color: #fff; }\n\n  \/* \u2500\u2500 ANIMATIES \u2500\u2500 *\/\n  @keyframes fadeDown {\n    from { opacity: 0; transform: translateY(-20px); }\n    to   { opacity: 1; transform: translateY(0); }\n  }\n\n  .fade-in {\n    opacity: 0;\n    transform: translateY(30px);\n    transition: opacity 0.7s ease, transform 0.7s ease;\n  }\n  .fade-in.visible { opacity: 1; transform: translateY(0); }\n<\/style>\n<\/head>\n<body>\n\n<!-- NAVIGATIE -->\n<nav id=\"navbar\">\n  <img decoding=\"async\" class=\"nav-logo\"\n       src=\"https:\/\/watermolenfeesten.be\/wp-content\/uploads\/2026\/03\/logo-klein.jpg\"\n       alt=\"Logo Watermolenfeesten\">\n  <ul class=\"nav-links\" id=\"navLinks\">\n    <li><a href=\"https:\/\/watermolenfeesten.be\/\">Home<\/a><\/li>\n    <li><a href=\"https:\/\/watermolenfeesten.be\/?page_id=615\">Programma<\/a><\/li>\n    <li><a href=\"https:\/\/watermolenfeesten.be\/?page_id=1542\"class=\"actief\">Sponsors<\/a><\/li>\n    <li><a href=\"https:\/\/watermolenfeesten.be\/?page_id=963\">Kandidates 2026<\/a><\/li>\n    <li><a href=\"https:\/\/watermolenfeesten.be\/?page_id=1014\">Affiches<\/a><\/li>\n    <li><a href=\"https:\/\/watermolenfeesten.be\/?page_id=1064\">Info<\/a><\/li>\n    <li><a href=\"https:\/\/watermolenfeesten.be\/?page_id=1306\" >Vrijwilligers<\/a><\/li>\n    <li><a href=\"https:\/\/watermolenfeesten.be\/?page_id=1208\">Wie zijn we<\/a><\/li>\n  <\/ul>\n  <button class=\"nav-burger\" id=\"burger\" aria-label=\"Menu openen\">\n    <span><\/span><span><\/span><span><\/span>\n  <\/button>\n<\/nav>\n\n<!-- HERO -->\n<section class=\"hero\">\n  <img decoding=\"async\" class=\"hero-logo\"\n       src=\"https:\/\/watermolenfeesten.be\/wp-content\/uploads\/2026\/03\/logo-klein.jpg\"\n       alt=\"Logo Watermolenfeesten\">\n  <h1>Watermolen&shy;feesten<\/h1>\n  <p class=\"hero-datum\">3 &mdash; 4 &mdash; 5 Juli 2026<\/p>\n<\/section>\n\n<!-- SPONSORS -->\n<div class=\"sponsors-wrap\">\n\n  <div class=\"sponsors-header fade-in\">\n    <span class=\"section-tag\">Dankjewel<\/span>\n    <h2>Onze sponsors<\/h2>\n    <div class=\"divider\"><\/div>\n    <p>De Watermolenfeesten zijn mogelijk dankzij de geweldige steun van onze sponsors. Zonder hen geen feest! Een welgemeende dankjewel aan iedereen die ons dit jaar steunt.<\/p>\n  <\/div>\n\n  <!-- Grid wordt gevuld via JavaScript -->\n  <div id=\"sponsor-grid\" class=\"sponsor-grid\">\n    <div class=\"sponsor-laden\">\n      <div class=\"spinner\"><\/div>\n      Sponsors laden...\n    <\/div>\n  <\/div>\n\n  <!-- Word zelf sponsor -->\n  <div class=\"word-sponsor fade-in\">\n    <h3>\ud83e\udd1d Word ook sponsor!<\/h3>\n    <p>Wil jij de Watermolenfeesten 2026 steunen en tegelijk je zaak in de kijker zetten? Neem contact op of vul het formulier in.<\/p>\n    <a href=\"https:\/\/forms.gle\/sthDjN7jD6vynorF8\" target=\"_blank\" class=\"btn-sponsor\">Sponsor worden<\/a>\n  <\/div>\n\n<\/div>\n\n<!-- FOOTER -->\n<footer>\n  <img decoding=\"async\" class=\"footer-logo\"\n       src=\"https:\/\/watermolenfeesten.be\/wp-content\/uploads\/2026\/03\/logo-klein.jpg\"\n       alt=\"Logo\">\n  <div class=\"footer-links\">\n    <a href=\"https:\/\/www.facebook.com\/profile.php?id=61574036308953\" target=\"_blank\">Facebook<\/a>\n    <a href=\"https:\/\/www.instagram.com\/watermolenfeesten2025\/\" target=\"_blank\">Instagram<\/a>\n  <\/div>\n  <p>&copy; 2026 Watermolenfeesten &mdash; Alle rechten voorbehouden<\/p>\n  <a href=\"https:\/\/watermolenfeesten.be\/?page_id=1340\" target=\"_blank\">Privacy Policy<\/a>\n<\/footer>\n\n<script>\n  \/\/ \u2500\u2500 BURGER MENU \u2500\u2500\n  document.getElementById('burger').addEventListener('click', () => {\n    document.getElementById('navLinks').classList.toggle('open');\n  });\n\n  \/\/ \u2500\u2500 FADE IN \u2500\u2500\n  const els = document.querySelectorAll('.fade-in');\n  const obs = new IntersectionObserver(entries => {\n    entries.forEach((e, i) => {\n      if (e.isIntersecting) {\n        setTimeout(() => e.target.classList.add('visible'), i * 80);\n        obs.unobserve(e.target);\n      }\n    });\n  }, { threshold: 0.1 });\n  els.forEach(el => obs.observe(el));\n\n  \/\/ \u2500\u2500 SPONSORS LADEN VIA WORDPRESS REST API \u2500\u2500\n  \/\/ De Folders plugin slaat de map op als een term in de taxonomie 'media_folder'\n  \/\/ We halen alle afbeeldingen op die tot deze map behoren\n\n  const SITE_URL = 'https:\/\/watermolenfeesten.be';\n  const MAP_ID = 12;\n  const grid = document.getElementById('sponsor-grid');\n\n  async function laadSponsors() {\n    try {\n      \/\/ Haal alle afbeeldingen op uit de sponsors map (Folders plugin ID 12)\n      \/\/ per_page=100 haalt max 100 op per keer, we pageren indien nodig\n      let alleSponsors = [];\n      let pagina = 1;\n      let doorgaan = true;\n\n      while (doorgaan) {\n        const url = `${SITE_URL}\/index.php?rest_route=\/wp\/v2\/media&media_folder=${MAP_ID}&per_page=100&page=${pagina}&_fields=id,source_url,alt_text,title,media_details`;\n        const response = await fetch(url);\n\n        \/\/ Controleer hoeveel pagina's er zijn\n        const totaalPaginas = parseInt(response.headers.get('X-WP-TotalPages') || '1');\n\n        const data = await response.json();\n\n        if (!Array.isArray(data) || data.length === 0) {\n          doorgaan = false;\n        } else {\n          alleSponsors = alleSponsors.concat(data);\n          if (pagina >= totaalPaginas) {\n            doorgaan = false;\n          } else {\n            pagina++;\n          }\n        }\n      }\n\n      if (alleSponsors.length === 0) {\n        toonFout('Geen sponsors gevonden in de map.');\n        return;\n      }\n\n      toonSponsors(alleSponsors);\n\n    } catch (err) {\n      console.error('Fout bij laden sponsors:', err);\n      toonFout('Kon sponsors niet laden. Probeer de pagina te herladen.');\n    }\n  }\n\n  function toonSponsors(sponsors) {\n    grid.innerHTML = '';\n\n    \/\/ Alfabetisch sorteren op bestandsnaam\n    sponsors.sort((a, b) => {\n      const naamA = (a.title?.rendered || '').toLowerCase();\n      const naamB = (b.title?.rendered || '').toLowerCase();\n      return naamA.localeCompare(naamB);\n    });\n\n    sponsors.forEach((sponsor, i) => {\n      const div = document.createElement('div');\n      div.className = 'sponsor-item';\n      div.style.opacity = '0';\n      div.style.transform = 'translateY(20px)';\n      div.style.transition = 'opacity 0.4s ease, transform 0.4s ease';\n\n      const img = document.createElement('img');\n      \/\/ Gebruik medium thumbnail (300x300) voor sneller laden\n      const thumbUrl = sponsor.media_details?.sizes?.medium?.source_url || sponsor.source_url;\n      img.src = thumbUrl;\n      img.alt = sponsor.alt_text || sponsor.title?.rendered || 'Sponsor';\n      img.loading = 'lazy';\n\n      \/\/ Verberg items waar de afbeelding niet laadt\n      img.onerror = () => { div.style.display = 'none'; };\n\n      div.appendChild(img);\n      grid.appendChild(div);\n\n      \/\/ Fade in met vertraging per item\n      setTimeout(() => {\n        div.style.opacity = '1';\n        div.style.transform = 'translateY(0)';\n      }, i * 25);\n    });\n\n    \n  }\n\n  function toonFout(bericht) {\n    grid.innerHTML = `<div class=\"sponsor-fout\">\u26a0\ufe0f ${bericht}<\/div>`;\n  }\n\n  laadSponsors();\n<\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Sponsors \u2014 Watermolenfeesten 2026 Home Programma Sponsors Kandidates 2026 Affiches Info Vrijwilligers Wie zijn we Watermolen&shy;feesten 3 &mdash; 4 &mdash; 5 Juli 2026 Dankjewel Onze sponsors De Watermolenfeesten zijn mogelijk dankzij de geweldige steun van onze sponsors. Zonder hen geen feest! Een welgemeende dankjewel aan iedereen die ons dit jaar steunt. Sponsors laden&#8230; \ud83e\udd1d Word [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1542","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/watermolenfeesten.be\/index.php?rest_route=\/wp\/v2\/pages\/1542","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/watermolenfeesten.be\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/watermolenfeesten.be\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/watermolenfeesten.be\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/watermolenfeesten.be\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1542"}],"version-history":[{"count":19,"href":"https:\/\/watermolenfeesten.be\/index.php?rest_route=\/wp\/v2\/pages\/1542\/revisions"}],"predecessor-version":[{"id":1736,"href":"https:\/\/watermolenfeesten.be\/index.php?rest_route=\/wp\/v2\/pages\/1542\/revisions\/1736"}],"wp:attachment":[{"href":"https:\/\/watermolenfeesten.be\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1542"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}