{"id":78,"date":"2026-05-20T11:18:40","date_gmt":"2026-05-20T11:18:40","guid":{"rendered":"https:\/\/demo.aardo.nl\/?page_id=78"},"modified":"2026-05-20T14:23:04","modified_gmt":"2026-05-20T14:23:04","slug":"jw-test","status":"publish","type":"page","link":"https:\/\/demo.aardo.nl\/?page_id=78","title":{"rendered":"JW test"},"content":{"rendered":"\n\n\n\n \n \n JW Live \u2013 Jan Willem Live<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Josefin+Sans:wght@300;400;600;700&display=swap\" rel=\"stylesheet\" \/>\n <style>\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n :root {\n --black: #232323;\n --purple: #4D528B;\n --yellow: #CED156;\n --white: #FFFFFF;\n }\n\n html, body {\n margin: 0 !important;\n padding: 0 !important;\n width: 100% !important;\n max-width: 100% !important;\n overflow-x: hidden !important;\n }\n\n \/* All common WordPress\/theme wrappers *\/\n .site, .site-content, #content, #page, main, article,\n .entry-content, .post-content, .page-content,\n .wp-block-group, .wp-site-blocks, .is-layout-flow,\n .elementor, .elementor-section-wrap,\n .fl-builder-content, .et_pb_section,\n div[class*=\"container\"], div[id*=\"wrapper\"],\n div[id*=\"content\"], div[id*=\"main\"],\n \/* Astra \/ GeneratePress \/ Neve \/ Kadence specific *\/\n .ast-container, .ast-page-builder-template,\n #ast-content-id, .content-area,\n .generate-columns-container,\n .entry, .post, .page,\n \/* Block editor wrappers *\/\n .wp-block-post-content,\n .editor-styles-wrapper,\n [class*=\"wp-container\"],\n [class*=\"layout-\"] {\n margin: 0 !important;\n padding: 0 !important;\n max-width: 100% !important;\n width: 100% !important;\n box-sizing: border-box !important;\n }\n\n \/* Fix Kadence --global-content-edge-padding that shifts content right *\/\n :root {\n --global-content-edge-padding: 0px !important;\n --scrollbar-offset: 0px !important;\n }\n\n .wp-site-blocks {\n padding-left: 0 !important;\n padding-right: 0 !important;\n --global-vw: 100vw !important;\n }\n\n\n .entry-content,\n .entry-content > *,\n .post-content,\n .post-content > *,\n .page-content,\n .page-content > * {\n max-width: 100vw !important;\n width: 100% !important;\n margin-left: 0 !important;\n margin-right: 0 !important;\n padding-left: 0 !important;\n padding-right: 0 !important;\n box-sizing: border-box !important;\n }\n\n\n .content-wrap,\n .entry-content-wrap,\n .entry-content-bg,\n .single-entry,\n .kadence-page-layout-fullwidth .site,\n .kadence-page-layout-fullwidth .content-container,\n .kadence-page-layout-fullwidth #primary,\n .kadence-page-layout-fullwidth .content-area,\n body.kadence-page-layout-fullwidth,\n .kadence-page-layout-fullwidth .site-container,\n #kt-inner-blocks-id,\n .kadence-inner-column-content,\n .wp-block-kadence-column,\n .wp-block-kadence-rowlayout,\n .kadence-blocks-row-layout-wrap,\n .kb-row-layout-wrap,\n .kb-inner-column-inner,\n .site-container,\n .content-container,\n #primary,\n .entry-hero,\n .entry-header {\n margin: 0 !important;\n padding: 0 !important;\n max-width: 100% !important;\n width: 100% !important;\n }\n\n \/* Remove Kadence top\/bottom inner spacing *\/\n .content-container .content-inner-wrap,\n article.type-page,\n article.type-page > .entry-content-wrap,\n .single-page-content,\n .hentry {\n margin: 0 !important;\n padding: 0 !important;\n }\n\n\n\n \/* Prevent WordPress from injecting image elements into content flow *\/\n .entry-content > img,\n .wp-post-image,\n figure.wp-block-image {\n display: none !important;\n }\n\n body {\n font-family: 'Josefin Sans', sans-serif;\n background: var(--white);\n color: var(--white);\n }\n\n \/* \u2500\u2500 HERO WRAPPER (spacing on non-mobile) \u2500\u2500 *\/\n .hero-wrapper {\n background: var(--white);\n padding: 0;\n }\n\n \/* \u2500\u2500 HERO \u2500\u2500 *\/\n .hero {\n position: relative;\n width: 100%;\n height: 100vh;\n min-height: 500px;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n border-radius: 0 0 12px 12px;\n }\n\n \/* Placeholder hero background *\/\n .hero-bg {\n position: absolute;\n inset: 0;\n background: linear-gradient(160deg, #1a1040 0%, #3a2060 25%, #5a3080 45%, #8060a0 60%, #c08060 80%, #e0a040 100%);\n z-index: 0;\n }\n\n \/* Simulated crowd\/lights overlay for placeholder feel *\/\n .hero-bg::before {\n content: '';\n position: absolute;\n inset: 0;\n background:\n radial-gradient(ellipse 40% 30% at 20% 30%, rgba(255,180,80,0.35) 0%, transparent 60%),\n radial-gradient(ellipse 30% 25% at 75% 20%, rgba(120,80,255,0.3) 0%, transparent 55%),\n radial-gradient(ellipse 50% 40% at 50% 60%, rgba(200,120,255,0.2) 0%, transparent 60%),\n radial-gradient(ellipse 25% 20% at 85% 40%, rgba(255,200,60,0.25) 0%, transparent 50%);\n }\n\n .hero-bg::after {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(to top,\n #232323 0%,\n rgba(77,82,139,0.20) 55%,\n rgba(77,82,139,0.00) 70%,\n rgba(35,35,35,0.00) 100%\n );\n }\n\n \/* Placeholder label *\/\n .hero-placeholder-label {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n pointer-events: none;\n }\n\n .hero-placeholder-label svg {\n width: 52px;\n height: 52px;\n opacity: 0.5;\n }\n\n .hero-placeholder-label span {\n font-family: 'Josefin Sans', sans-serif;\n font-weight: 300;\n font-size: 13px;\n letter-spacing: 0.15em;\n color: rgba(255,255,255,0.45);\n text-transform: uppercase;\n }\n\n \/* \u2500\u2500 NAVBAR \u2500\u2500 *\/\n nav {\n position: relative;\n z-index: 10;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 32px 48px;\n gap: 24px;\n }\n\n .nav-logo {\n font-weight: 700;\n font-size: 28px;\n letter-spacing: 0.04em;\n color: var(--white);\n text-decoration: none;\n flex-shrink: 0;\n }\n\n .nav-right {\n display: flex;\n align-items: center;\n gap: 40px;\n }\n\n .nav-links {\n display: flex;\n align-items: center;\n gap: 40px;\n list-style: none;\n }\n\n .nav-links a {\n font-weight: 600;\n font-size: 14px;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: var(--white);\n text-decoration: none;\n transition: color 0.2s;\n }\n\n .nav-links a:hover {\n color: var(--yellow);\n }\n\n .btn-boek {\n background: var(--yellow);\n color: var(--black);\n font-family: 'Josefin Sans', sans-serif;\n font-weight: 700;\n font-size: 14px;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n border: none;\n border-radius: 6px;\n padding: 14px 28px;\n cursor: pointer;\n text-decoration: none;\n display: inline-block;\n transition: background 0.2s, transform 0.15s;\n flex-shrink: 0;\n }\n\n .btn-boek:hover {\n background: #d8db5e;\n transform: translateY(-1px);\n }\n\n \/* Hamburger (mobile) *\/\n .nav-toggle {\n display: none;\n flex-direction: column;\n gap: 5px;\n background: none;\n border: none;\n cursor: pointer;\n padding: 4px;\n }\n\n .nav-toggle span {\n display: block;\n width: 26px;\n height: 2px;\n background: var(--white);\n transition: transform 0.3s, opacity 0.3s;\n }\n\n \/* \u2500\u2500 HERO CONTENT \u2500\u2500 *\/\n .hero-content {\n position: relative;\n z-index: 10;\n margin-top: auto;\n padding: 0 48px 56px;\n text-align: center;\n }\n\n .hero-title {\n font-weight: 700;\n font-size: clamp(56px, 9vw, 120px);\n letter-spacing: 0.02em;\n line-height: 1;\n color: var(--white);\n display: flex;\n align-items: center;\n justify-content: center;\n gap: clamp(12px, 2vw, 28px);\n flex-wrap: wrap;\n }\n\n .hero-dot {\n width: clamp(14px, 2vw, 22px);\n height: clamp(14px, 2vw, 22px);\n border-radius: 50%;\n background: var(--yellow);\n flex-shrink: 0;\n display: inline-block;\n }\n\n .hero-subtitle {\n margin-top: 16px;\n font-weight: 300;\n font-size: clamp(16px, 2.2vw, 22px);\n letter-spacing: 0.08em;\n color: var(--white);\n }\n\n \/* \u2500\u2500 MOBILE NAV OPEN \u2500\u2500 *\/\n .nav-mobile-menu {\n display: none;\n position: absolute;\n top: 0; left: 0; right: 0;\n background: rgba(35,35,35,0.97);\n z-index: 20;\n padding: 32px 48px 40px;\n flex-direction: column;\n gap: 0;\n }\n\n .nav-mobile-menu.open {\n display: flex;\n }\n\n .nav-mobile-top {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 36px;\n }\n\n .nav-mobile-links {\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 24px;\n margin-bottom: 36px;\n }\n\n .nav-mobile-links a {\n font-weight: 600;\n font-size: 18px;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: var(--white);\n text-decoration: none;\n }\n\n .btn-close {\n background: none;\n border: none;\n cursor: pointer;\n padding: 4px;\n }\n\n .btn-close svg { display: block; }\n\n \/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\n @media (max-width: 900px) {\n nav {\n padding: 24px 28px;\n }\n\n .nav-links {\n gap: 24px;\n }\n\n .nav-right {\n gap: 24px;\n }\n\n .hero-content {\n padding: 0 28px 44px;\n }\n }\n\n @media (max-width: 700px) {\n .nav-right {\n display: none;\n }\n\n .nav-toggle {\n display: flex;\n }\n\n nav {\n padding: 22px 20px;\n }\n\n .hero-wrapper {\n padding: 0;\n width: 100vw;\n }\n\n .hero {\n width: 100%;\n height: 100vh;\n border-radius: 0;\n }\n\n \/* Center hero content vertically *\/\n .hero-content {\n margin-top: auto;\n margin-bottom: auto;\n padding: 0 20px;\n }\n\n .hero-title {\n gap: 10px;\n }\n\n .nav-mobile-menu {\n padding: 22px 20px 36px;\n }\n\n .nav-mobile-top {\n margin-bottom: 28px;\n }\n }\n \/* \u2500\u2500 DEMO SECTION \u2500\u2500 *\/\n .demo-section {\n position: relative;\n z-index: 1;\n background: var(--white);\n padding: 100px 0 80px;\n overflow: visible;\n }\n\n \/* Clip only the glow blob, not the cards *\/\n .demo-glow {\n position: absolute;\n top: 30%;\n left: 50%;\n transform: translateX(-50%);\n width: 80%;\n height: 55%;\n background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(77,82,139,0.28) 0%, rgba(180,100,220,0.13) 45%, transparent 75%);\n pointer-events: none;\n z-index: 0;\n }\n\n .demo-heading {\n position: relative;\n z-index: 2;\n text-align: center;\n font-family: 'Josefin Sans', sans-serif;\n font-weight: 700;\n font-size: clamp(28px, 5vw, 64px);\n letter-spacing: 0.06em;\n color: var(--black);\n margin-bottom: 48px;\n }\n\n \/* Track wrapper \u2014 NO overflow hidden, padding absorbs shadow *\/\n .demo-track-wrap {\n position: relative;\n z-index: 2;\n cursor: grab;\n user-select: none;\n padding: 48px 0 48px;\n }\n\n .demo-track-wrap:active { cursor: grabbing; }\n\n .demo-track {\n display: flex;\n align-items: center;\n gap: 24px;\n padding: 0 80px;\n will-change: transform;\n }\n\n \/* \u2500\u2500 CARD \u2500\u2500 *\/\n .demo-card {\n flex-shrink: 0;\n width: clamp(140px, 18vw, 260px);\n border-radius: 16px;\n overflow: hidden;\n background: var(--purple);\n box-shadow: 0 8px 32px rgba(0,0,0,0.18);\n transition: transform 0.38s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.38s;\n pointer-events: auto;\n }\n\n .demo-card:hover {\n box-shadow: 0 16px 40px rgba(0,0,0,0.28);\n }\n\n .demo-card--active {\n border: 3px solid var(--yellow);\n box-shadow: 0 0 0 0px var(--yellow), 0 16px 48px rgba(206,209,86,0.25);\n transform: scale(1.2);\n margin-left: clamp(14px, 1.8vw, 24px);\n margin-right: clamp(14px, 1.8vw, 24px);\n }\n\n \/* Card image area *\/\n .demo-card-img {\n position: relative;\n width: 100%;\n aspect-ratio: 1 \/ 1;\n overflow: hidden;\n }\n\n \/* 70% opacity on all white elements in inactive cards *\/\n .demo-card:not(.demo-card--active) .demo-waveform span { opacity: 0.7; }\n .demo-card:not(.demo-card--active) .demo-play-btn svg { opacity: 0.7; }\n .demo-card:not(.demo-card--active) .demo-title { opacity: 0.7; }\n .demo-card:not(.demo-card--active) .demo-artist { opacity: 0.7; }\n\n .demo-placeholder-img {\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, #2a2040 0%, #1a1530 40%, #3a2850 100%);\n }\n\n .demo-card--active .demo-placeholder-img {\n background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 50%, #0d0d0d 100%);\n }\n\n \/* Waveform bars *\/\n .demo-waveform {\n position: absolute;\n top: 18px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n align-items: center;\n gap: 3px;\n height: 40px;\n }\n\n .demo-waveform span {\n display: block;\n width: 4px;\n border-radius: 2px;\n background: rgba(255,255,255,0.55);\n animation: none;\n }\n\n \/* Different heights for natural waveform look *\/\n .demo-waveform span:nth-child(1) { height: 12px; }\n .demo-waveform span:nth-child(2) { height: 22px; }\n .demo-waveform span:nth-child(3) { height: 30px; }\n .demo-waveform span:nth-child(4) { height: 38px; }\n .demo-waveform span:nth-child(5) { height: 28px; }\n .demo-waveform span:nth-child(6) { height: 38px; }\n .demo-waveform span:nth-child(7) { height: 40px; }\n .demo-waveform span:nth-child(8) { height: 36px; }\n .demo-waveform span:nth-child(9) { height: 40px; }\n .demo-waveform span:nth-child(10) { height: 28px; }\n .demo-waveform span:nth-child(11) { height: 34px; }\n .demo-waveform span:nth-child(12) { height: 20px; }\n .demo-waveform span:nth-child(13) { height: 12px; }\n\n .demo-waveform--active span {\n background: var(--yellow);\n animation: wave 0.9s ease-in-out infinite alternate;\n }\n\n .demo-waveform--active span:nth-child(1) { animation-delay: 0.0s; }\n .demo-waveform--active span:nth-child(2) { animation-delay: 0.07s; }\n .demo-waveform--active span:nth-child(3) { animation-delay: 0.14s; }\n .demo-waveform--active span:nth-child(4) { animation-delay: 0.21s; }\n .demo-waveform--active span:nth-child(5) { animation-delay: 0.28s; }\n .demo-waveform--active span:nth-child(6) { animation-delay: 0.35s; }\n .demo-waveform--active span:nth-child(7) { animation-delay: 0.42s; }\n .demo-waveform--active span:nth-child(8) { animation-delay: 0.35s; }\n .demo-waveform--active span:nth-child(9) { animation-delay: 0.28s; }\n .demo-waveform--active span:nth-child(10) { animation-delay: 0.21s; }\n .demo-waveform--active span:nth-child(11) { animation-delay: 0.14s; }\n .demo-waveform--active span:nth-child(12) { animation-delay: 0.07s; }\n .demo-waveform--active span:nth-child(13) { animation-delay: 0.0s; }\n\n @keyframes wave {\n from { transform: scaleY(0.45); }\n to { transform: scaleY(1); }\n }\n\n \/* Play button *\/\n .demo-play-btn {\n position: absolute;\n bottom: 50%;\n left: 50%;\n transform: translate(-50%, 50%);\n width: 56px;\n height: 56px;\n background: none;\n border: none;\n cursor: pointer;\n padding: 0;\n }\n\n .demo-play-btn svg {\n width: 100%;\n height: 100%;\n }\n\n \/* Card info *\/\n .demo-card-info {\n background: var(--purple);\n padding: 16px 18px 20px;\n text-align: center;\n }\n\n .demo-card-info--active {\n background: var(--white);\n padding: 16px 18px 20px;\n }\n\n .demo-title {\n font-family: 'Josefin Sans', sans-serif;\n font-weight: 700;\n font-size: 16px;\n color: var(--white);\n line-height: 1.3;\n margin-bottom: 4px;\n }\n\n .demo-card-info--active .demo-title {\n color: var(--purple);\n }\n\n .demo-artist {\n font-family: 'Josefin Sans', sans-serif;\n font-weight: 300;\n font-size: 13px;\n color: rgba(255,255,255,0.7);\n letter-spacing: 0.06em;\n }\n\n .demo-card-info--active .demo-artist {\n color: var(--purple);\n opacity: 0.7;\n }\n\n \/* \u2500\u2500 ARROWS \u2500\u2500 *\/\n .demo-arrow {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n z-index: 10;\n width: 48px;\n height: 48px;\n border-radius: 50%;\n border: 2px solid rgba(255,255,255,0.6);\n background: rgba(77,82,139,0.7);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;\n backdrop-filter: blur(4px);\n }\n\n .demo-arrow:hover {\n background: var(--purple);\n border-color: var(--yellow);\n box-shadow: 0 0 0 3px rgba(206,209,86,0.3);\n }\n\n .demo-arrow--left { left: 20px; }\n .demo-arrow--right { right: 20px; }\n\n \/* Tablet *\/\n @media (max-width: 900px) {\n .demo-track {\n gap: 16px;\n }\n .demo-arrow--left { left: 10px; }\n .demo-arrow--right { right: 10px; }\n }\n\n \/* Mobile *\/\n @media (max-width: 600px) {\n .demo-track {\n padding: 0 16px;\n gap: 12px;\n }\n\n .demo-arrow {\n width: 36px;\n height: 36px;\n }\n\n .demo-arrow--left { left: 4px; }\n .demo-arrow--right { right: 4px; }\n\n .demo-heading {\n margin-bottom: 32px;\n padding: 0 16px;\n }\n }\n \/* \u2500\u2500 VIDEO SECTION \u2500\u2500 *\/\n .video-section {\n position: relative;\n z-index: 2;\n background: var(--white);\n padding: 100px 0 80px;\n overflow: visible;\n margin-top: 0;\n }\n\n \/* Paint-stroke glow \u2014 warm yellow\/orange like the design *\/\n .video-glow {\n position: absolute;\n top: 20%;\n left: 50%;\n transform: translateX(-50%);\n width: 90%;\n height: 60%;\n background:\n radial-gradient(ellipse 55% 35% at 30% 50%, rgba(206,209,86,0.22) 0%, transparent 65%),\n radial-gradient(ellipse 45% 35% at 75% 45%, rgba(206,160,60,0.18) 0%, transparent 60%);\n pointer-events: none;\n z-index: 0;\n }\n\n .video-heading {\n position: relative;\n z-index: 2;\n text-align: center;\n font-family: 'Josefin Sans', sans-serif;\n font-weight: 700;\n font-size: clamp(28px, 5vw, 64px);\n letter-spacing: 0.06em;\n color: var(--black);\n margin-bottom: 48px;\n }\n\n \/* Track wrapper *\/\n .video-track-wrap {\n position: relative;\n z-index: 2;\n cursor: grab;\n user-select: none;\n padding: 48px 0;\n }\n .video-track-wrap:active { cursor: grabbing; }\n\n .video-track {\n display: flex;\n align-items: center;\n gap: clamp(12px, 2vw, 24px);\n padding: 0;\n will-change: transform;\n }\n\n \/* \u2500\u2500 VIDEO CARD \u2500\u2500 *\/\n .video-card {\n flex-shrink: 0;\n width: clamp(220px, 28vw, 480px);\n aspect-ratio: 16 \/ 9;\n border-radius: 16px;\n overflow: hidden;\n background: var(--purple);\n box-shadow: 0 8px 32px rgba(0,0,0,0.18);\n position: relative;\n transition: transform 0.38s cubic-bezier(0.25,0.46,0.45,0.94),\n box-shadow 0.38s,\n opacity 0.38s;\n pointer-events: auto;\n }\n\n .video-card:hover {\n box-shadow: 0 16px 40px rgba(0,0,0,0.28);\n }\n\n .video-card--active {\n border: 3px solid var(--yellow);\n box-shadow: 0 16px 48px rgba(206,209,86,0.35);\n transform: scale(1.25);\n \/* margin = card-width * (scale-1) \/ 2 = card-width * 0.125\n Using a JS-computed CSS variable set on init for pixel accuracy *\/\n margin-left: var(--v-active-margin, 30px);\n margin-right: var(--v-active-margin, 30px);\n }\n\n \/* 70% opacity on inactive cards *\/\n .video-card:not(.video-card--active) { opacity: 0.7; }\n\n \/* YouTube iframe fills card, disabled on inactive *\/\n .video-card iframe {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n border: none;\n pointer-events: none;\n }\n .video-card--active iframe { pointer-events: auto; }\n\n \/* Play\/pause button \u2014 same as demo cards *\/\n .video-play-btn {\n position: absolute;\n bottom: 50%;\n left: 50%;\n transform: translate(-50%, 50%);\n width: 56px;\n height: 56px;\n background: none;\n border: none;\n cursor: pointer;\n padding: 0;\n z-index: 4;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .video-play-btn svg { width: 100%; height: 100%; }\n\n \/* Hide play button on active card (YouTube controls take over) *\/\n .video-card--active .video-play-btn { display: none; }\n\n \/* Fullscreen btn *\/\n .video-fullscreen-btn {\n position: absolute;\n bottom: 10px;\n right: 10px;\n z-index: 5;\n background: rgba(0,0,0,0.55);\n border: none;\n border-radius: 6px;\n padding: 6px 8px;\n cursor: pointer;\n display: none;\n color: white;\n transition: background 0.2s;\n }\n .video-card--active .video-fullscreen-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .video-fullscreen-btn:hover { background: rgba(0,0,0,0.8); }\n\n \/* Arrows *\/\n .video-arrow {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n z-index: 10;\n width: 48px;\n height: 48px;\n border-radius: 50%;\n border: 2px solid rgba(255,255,255,0.6);\n background: rgba(77,82,139,0.7);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;\n backdrop-filter: blur(4px);\n }\n\n .video-arrow:hover {\n background: var(--purple);\n border-color: var(--yellow);\n box-shadow: 0 0 0 3px rgba(206,209,86,0.3);\n }\n\n .video-arrow--left { left: 20px; }\n .video-arrow--right { right: 20px; }\n\n \/* Responsive *\/\n @media (max-width: 900px) {\n .video-card { width: clamp(200px, 55vw, 420px); }\n .video-arrow--left { left: 10px; }\n .video-arrow--right { right: 10px; }\n }\n\n @media (max-width: 600px) {\n .video-track { padding: 0; gap: 12px; }\n .video-card { width: calc(100vw - 48px); flex-shrink: 0; }\n .video-arrow { width: 36px; height: 36px; }\n .video-arrow--left { left: 4px; }\n .video-arrow--right { right: 4px; }\n .video-heading { margin-bottom: 32px; padding: 0 24px; }\n }\n\n @media (max-width: 700px) {\n .about-wrapper { margin-top: 80px; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; }\n .contact-wrapper { margin-top: 80px; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; }\n .footer-wrapper { margin-top: 80px; margin-left: 0 !important; margin-right: 0 !important; }\n }\n \/* \u2500\u2500 OVER MIJ SECTION \u2500\u2500 *\/\n .about-wrapper {\n position: relative;\n z-index: 3;\n padding: 0 !important;\n margin-top: 180px;\n margin-left: 3vw !important;\n margin-right: 3vw !important;\n margin-bottom: 3vw !important;\n background: var(--white);\n }\n\n .about-section {\n display: grid;\n grid-template-columns: 1fr 2fr;\n align-items: stretch;\n background: var(--white);\n border-radius: 16px;\n overflow: visible;\n gap: 0;\n }\n\n \/* Left column \u2014 image: always 2vh taller top+bottom than the text column *\/\n .about-img-col {\n position: relative;\n overflow: hidden;\n border-radius: 16px;\n margin-top: -1vh;\n margin-bottom: -1vh;\n }\n\n .about-img-placeholder {\n position: absolute;\n inset: 0;\n background: linear-gradient(135deg, #0d0d0d 0%, #1a1530 50%, #2a1a40 100%);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 12px;\n }\n\n .about-img-placeholder svg {\n width: 52px;\n height: 52px;\n }\n\n .about-img-placeholder span {\n font-family: 'Josefin Sans', sans-serif;\n font-weight: 300;\n font-size: 12px;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: rgba(255,255,255,0.35);\n }\n\n \/* Gradient overlay: left\u2192right, same stops as hero (but horizontal) *\/\n .about-img-overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(to right,\n #4D528B 0%,\n rgba(77,82,139,0.20) 55%,\n rgba(35,35,35,0.00) 70%,\n rgba(35,35,35,1.00) 100%\n );\n pointer-events: none;\n }\n\n \/* Right column \u2014 text *\/\n .about-text-col {\n padding: clamp(48px, 7vw, 100px) clamp(40px, 6vw, 96px) clamp(48px, 7vw, 100px) clamp(32px, 4vw, 64px);\n display: flex;\n flex-direction: column;\n justify-content: center;\n background: var(--white);\n }\n\n .about-heading {\n font-family: 'Josefin Sans', sans-serif;\n font-weight: 700;\n font-size: clamp(36px, 5vw, 72px);\n letter-spacing: 0.06em;\n color: var(--black);\n margin-bottom: 32px;\n line-height: 1;\n }\n\n .about-body {\n font-family: 'Josefin Sans', sans-serif;\n font-weight: 300;\n font-size: clamp(16px, 1.8vw, 24px);\n line-height: 1.8;\n color: var(--black);\n margin-bottom: 24px;\n }\n\n .about-body:last-child { margin-bottom: 0; }\n\n @media (max-width: 768px) {\n .about-wrapper {\n padding: 0;\n }\n\n .about-section {\n grid-template-columns: 1fr;\n grid-template-rows: auto auto;\n border-radius: 0;\n }\n\n \/* Image: same width as text content, centered, with same side padding *\/\n .about-img-col {\n min-height: 0;\n margin: 0 24px; \/* matches text col side padding *\/\n border-radius: 16px;\n aspect-ratio: 4 \/ 3;\n }\n\n \/* On mobile the fade goes bottom\u2192top *\/\n .about-img-overlay {\n background: linear-gradient(to top,\n #4D528B 0%,\n rgba(77,82,139,0.20) 55%,\n rgba(35,35,35,0.00) 70%,\n rgba(35,35,35,0.00) 100%\n );\n }\n\n .about-text-col {\n padding: 32px 24px 56px;\n text-align: center;\n align-items: center;\n }\n\n .about-heading {\n text-align: center;\n }\n\n .about-body {\n text-align: center;\n }\n }\n \/* \u2500\u2500 CONTACT SECTION \u2500\u2500 *\/\n .contact-wrapper {\n position: relative;\n z-index: 4;\n padding: 0 !important;\n margin-top: 180px;\n margin-left: 3vw !important;\n margin-right: 3vw !important;\n margin-bottom: 3vw !important;\n background: var(--white);\n }\n\n .contact-section {\n background: var(--white);\n padding: clamp(48px, 7vw, 80px) clamp(32px, 6vw, 80px);\n border-radius: 16px;\n }\n\n .contact-heading {\n font-family: 'Josefin Sans', sans-serif;\n font-weight: 700;\n font-size: clamp(32px, 5vw, 72px);\n letter-spacing: 0.06em;\n color: var(--black);\n text-align: center;\n margin-bottom: clamp(32px, 5vw, 56px);\n }\n\n .contact-fields-row {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n gap: 24px;\n margin-bottom: 24px;\n }\n\n .contact-field {\n display: flex;\n flex-direction: column;\n gap: 8px;\n }\n\n .contact-field--full {\n margin-bottom: 32px;\n }\n\n .contact-label {\n font-family: 'Josefin Sans', sans-serif;\n font-weight: 300;\n font-size: clamp(16px, 1.8vw, 24px);\n color: var(--black);\n letter-spacing: 0.04em;\n }\n\n .contact-input {\n font-family: 'Josefin Sans', sans-serif;\n font-weight: 300;\n font-size: clamp(14px, 1.2vw, 16px);\n color: var(--black);\n background: #f5f5f7;\n border: none;\n border-radius: 8px;\n padding: 14px 16px;\n outline: none;\n transition: box-shadow 0.2s;\n width: 100%;\n box-sizing: border-box;\n }\n\n .contact-input:focus {\n box-shadow: 0 0 0 2px var(--purple);\n }\n\n .contact-textarea {\n resize: vertical;\n min-height: 180px;\n }\n\n .contact-submit-row {\n display: flex;\n justify-content: center;\n }\n\n .btn-contact-submit {\n font-family: 'Josefin Sans', sans-serif;\n font-weight: 700;\n font-size: 16px;\n letter-spacing: 0.12em;\n color: var(--white);\n background: var(--purple);\n border: none;\n border-radius: 8px;\n padding: 18px 56px;\n cursor: pointer;\n transition: background 0.2s, transform 0.15s;\n }\n\n .btn-contact-submit:hover {\n background: #5c62a0;\n transform: translateY(-1px);\n }\n\n @media (max-width: 768px) {\n .contact-wrapper {\n padding: 0;\n margin-top: 60px;\n }\n\n .contact-section {\n border-radius: 0;\n padding: 48px 20px 64px;\n }\n\n .contact-fields-row {\n grid-template-columns: 1fr;\n }\n }\n \/* \u2500\u2500 FOOTER TOP (duplicate above hero) \u2500\u2500 *\/\n .footer-top-wrapper {\n margin-top: 0 !important;\n }\n\n .footer-top {\n border-radius: 0 0 12px 12px !important;\n }\n\n\n position: relative;\n z-index: 5;\n padding: 0 !important;\n margin-top: 180px;\n margin-left: 3vw !important;\n margin-right: 3vw !important;\n background: var(--white);\n }\n\n .footer {\n position: relative;\n width: 100%;\n height: calc(100vh - 3vh);\n min-height: 500px;\n overflow: hidden;\n border-radius: 12px 12px 0 0;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n }\n\n \/* Background placeholder \u2014 same feel as hero *\/\n .footer-bg {\n position: absolute;\n inset: 0;\n background: linear-gradient(135deg, #2a2060 0%, #3a2878 30%, #4D528B 60%, #8a9040 85%, #ced156 100%);\n z-index: 0;\n }\n\n .footer-bg::after {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(to top,\n rgba(35,35,35,0.55) 0%,\n rgba(35,35,35,0.0) 40%\n );\n }\n\n \/* Placeholder img icon *\/\n .footer-bg-label {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n pointer-events: none;\n }\n\n .footer-bg-label svg { width: 48px; height: 48px; opacity: 0.35; }\n .footer-bg-label span {\n font-family: 'Josefin Sans', sans-serif;\n font-weight: 300;\n font-size: 12px;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: rgba(255,255,255,0.35);\n }\n\n \/* Inner content *\/\n .footer-inner {\n position: relative;\n z-index: 2;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 100%;\n padding: clamp(64px, 10vh, 128px) clamp(28px, 4vw, 64px) clamp(32px, 5vh, 64px);\n }\n\n \/* Top: title \u2014 full content width *\/\n .footer-title {\n font-family: 'Josefin Sans', sans-serif;\n font-weight: 700;\n font-size: clamp(48px, 8.5vw, 160px);\n letter-spacing: 0.02em;\n line-height: 1;\n color: var(--white);\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n white-space: nowrap;\n }\n\n .footer-title-dot {\n width: clamp(14px, 2vw, 28px);\n height: clamp(14px, 2vw, 28px);\n border-radius: 50%;\n background: var(--yellow);\n flex-shrink: 0;\n }\n\n \/* Middle: contact columns \u2014 full width, space-between *\/\n .footer-contacts {\n display: flex;\n justify-content: space-between;\n gap: 24px;\n width: 100%;\n }\n\n .footer-col-heading {\n font-family: 'Josefin Sans', sans-serif;\n font-weight: 700;\n font-size: clamp(14px, 1.4vw, 20px);\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: var(--white);\n margin-bottom: 12px;\n }\n\n .footer-col-line {\n font-family: 'Josefin Sans', sans-serif;\n font-weight: 300;\n font-size: clamp(16px, 1.8vw, 24px);\n color: rgba(255,255,255,0.85);\n line-height: 1.9;\n display: block;\n text-decoration: none;\n }\n\n a.footer-col-line:hover { text-decoration: underline; }\n\n \/* Nav row: between contacts and social, full width, space-between, centered *\/\n .footer-nav-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n gap: 24px;\n }\n\n .footer-nav-link {\n font-family: 'Josefin Sans', sans-serif;\n font-weight: 700;\n font-size: clamp(18px, 1.8vw, 24px);\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: var(--white);\n text-decoration: none;\n transition: color 0.2s;\n }\n\n .footer-nav-link:hover { color: var(--yellow); }\n\n \/* Bottom row: credit left, social right *\/\n .footer-bottom {\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n gap: 20px;\n }\n\n .footer-nav {\n display: flex;\n align-items: center;\n gap: clamp(20px, 3vw, 48px);\n flex-wrap: wrap;\n }\n\n .footer-nav a {\n font-family: 'Josefin Sans', sans-serif;\n font-weight: 700;\n font-size: clamp(18px, 1.8vw, 24px);\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: var(--white);\n text-decoration: none;\n transition: color 0.2s;\n }\n\n .footer-nav a:hover { color: var(--yellow); }\n\n .footer-right {\n display: flex;\n align-items: center;\n gap: 20px;\n }\n\n \/* Placeholder logo in footer credit *\/\n .footer-credit-logo {\n display: flex;\n align-items: center;\n gap: 10px;\n opacity: 0.5;\n }\n\n .footer-credit-logo-mark {\n width: 32px;\n height: 32px;\n border-radius: 6px;\n background: rgba(255,255,255,0.25);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n\n .footer-credit-logo span {\n font-family: 'Josefin Sans', sans-serif;\n font-weight: 300;\n font-size: 12px;\n color: rgba(255,255,255,0.8);\n letter-spacing: 0.1em;\n text-transform: uppercase;\n white-space: nowrap;\n }\n\n .footer-social {\n display: flex;\n align-items: center;\n gap: 14px;\n }\n\n .footer-social a {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n border: 1.5px solid rgba(255,255,255,0.6);\n border-radius: 8px;\n transition: border-color 0.2s;\n }\n\n .footer-social a:hover { border-color: var(--yellow); }\n .footer-social svg { display: block; }\n\n .btn-footer-boek {\n font-family: 'Josefin Sans', sans-serif;\n font-weight: 700;\n font-size: clamp(18px, 1.8vw, 24px);\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: var(--white);\n background: var(--purple);\n border: none;\n border-radius: 8px;\n padding: 21px 48px;\n cursor: pointer;\n text-decoration: none;\n display: inline-block;\n transition: background 0.2s;\n flex-shrink: 0;\n }\n\n .btn-footer-boek:hover { background: #5c62a0; }\n\n @media (max-width: 700px) {\n .footer-wrapper { padding: 0; margin-top: 80px; }\n .footer {\n height: auto;\n min-height: unset;\n border-radius: 0;\n }\n .footer-inner {\n padding: 40px 20px 40px;\n gap: 36px;\n }\n .footer-title {\n font-size: clamp(28px, 9vw, 56px);\n justify-content: space-between;\n white-space: nowrap;\n }\n \/* Contacts: 2 columns *\/\n .footer-contacts {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 24px;\n justify-content: unset;\n }\n \/* Nav: 2 columns, Boek nu spans full width *\/\n .footer-nav-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n }\n .footer-nav-row .btn-footer-boek {\n grid-column: 1 \/ -1;\n text-align: center;\n }\n .footer-bottom {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n<!-- \u2500\u2500 HEADER (footer duplicate) \u2500\u2500 -->\n<div class=\"footer-wrapper footer-top-wrapper\">\n<footer class=\"footer footer-top\">\n\n <div class=\"footer-bg\"><\/div>\n\n <div class=\"footer-inner\">\n\n <div class=\"footer-title\">\n JAN WILLEM\n <span class=\"footer-title-dot\"><\/span>\n LIVE\n <\/div>\n\n <div class=\"footer-contacts\">\n <div>\n <p class=\"footer-col-heading\">Boekingen<\/p>\n <span class=\"footer-col-line\">Burovoormuziek.nl<\/span>\n <a class=\"footer-col-line\" href=\"mailto:info@burovoormuziek.nl\">info@burovoormuziek.nl<\/a>\n <a class=\"footer-col-line\" href=\"tel:+31534608000\">31 53 460 8000<\/a>\n <\/div>\n <div>\n <p class=\"footer-col-heading\">Management<\/p>\n <span class=\"footer-col-line\">Wilco Temmink<\/span>\n <a class=\"footer-col-line\" href=\"mailto:mail@adres.nl\">mail@adres.nl<\/a>\n <a class=\"footer-col-line\" href=\"tel:+31653383014\">tel: +31 653383014<\/a>\n <\/div>\n <div>\n <p class=\"footer-col-heading\">Press Contact<\/p>\n <span class=\"footer-col-line\">Jan Willem<\/span>\n <a class=\"footer-col-line\" href=\"mailto:info@janwillem.live\">info@janwillem.live<\/a>\n <a class=\"footer-col-line\" href=\"tel:+31629990190\">+31 629990190<\/a>\n <\/div>\n <\/div>\n\n <div class=\"footer-nav-row\">\n <a href=\"#demos\" class=\"footer-nav-link\">Demo’s<\/a>\n <a href=\"#videos\" class=\"footer-nav-link\">Video’s<\/a>\n <a href=\"#over\" class=\"footer-nav-link\">Over mij<\/a>\n <a href=\"#contact\" class=\"footer-nav-link\">Contact<\/a>\n <a href=\"#contact\" class=\"btn-footer-boek\">Boek nu<\/a>\n <\/div>\n\n <div class=\"footer-bottom\">\n <div class=\"footer-credit-logo\">\n <div class=\"footer-credit-logo-mark\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\n <rect x=\"2\" y=\"2\" width=\"6\" height=\"6\" rx=\"1.5\" fill=\"rgba(255,255,255,0.7)\"\/>\n <rect x=\"10\" y=\"2\" width=\"6\" height=\"6\" rx=\"1.5\" fill=\"rgba(255,255,255,0.5)\"\/>\n <rect x=\"2\" y=\"10\" width=\"6\" height=\"6\" rx=\"1.5\" fill=\"rgba(255,255,255,0.5)\"\/>\n <rect x=\"10\" y=\"10\" width=\"6\" height=\"6\" rx=\"1.5\" fill=\"rgba(255,255,255,0.3)\"\/>\n <\/svg>\n <\/div>\n <span>Logo placeholder<\/span>\n <\/div>\n <div class=\"footer-social\">\n <a href=\"#\" aria-label=\"Instagram\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" stroke=\"white\" stroke-width=\"1.8\"\/><circle cx=\"12\" cy=\"12\" r=\"5\" stroke=\"white\" stroke-width=\"1.8\"\/><circle cx=\"17.5\" cy=\"6.5\" r=\"1\" fill=\"white\"\/><\/svg>\n <\/a>\n <a href=\"#\" aria-label=\"Facebook\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" stroke=\"white\" stroke-width=\"1.8\"\/><path d=\"M13 21v-8h3l.5-3H13V8c0-.8.4-1.5 1.5-1.5H17V4s-1.2-.2-2.4-.2c-2.4 0-4 1.5-4 4V10H8v3h2.6v8H13z\" fill=\"white\"\/><\/svg>\n <\/a>\n <a href=\"#\" aria-label=\"YouTube\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" stroke=\"white\" stroke-width=\"1.8\"\/><path d=\"M17.8 9.2a2 2 0 00-1.4-1.4C15.2 7.5 12 7.5 12 7.5s-3.2 0-4.4.3A2 2 0 006.2 9.2 20 20 0 006 12a20 20 0 00.2 2.8 2 2 0 001.4 1.4c1.2.3 4.4.3 4.4.3s3.2 0 4.4-.3a2 2 0 001.4-1.4A20 20 0 0018 12a20 20 0 00-.2-2.8z\" stroke=\"white\" stroke-width=\"1.8\"\/><polygon points=\"10.5,14.5 14.5,12 10.5,9.5\" fill=\"white\"\/><\/svg>\n <\/a>\n <\/div>\n <\/div>\n\n <\/div>\n\n<\/footer>\n<\/div>\n\n<div class=\"hero-wrapper\">\n<section class=\"hero\">\n\n <!-- Background placeholder -->\n <div class=\"hero-bg\"><\/div>\n <div class=\"hero-placeholder-label\">\n <svg viewBox=\"0 0 52 52\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <rect x=\"2\" y=\"2\" width=\"48\" height=\"48\" rx=\"6\" stroke=\"white\" stroke-width=\"1.5\"\/>\n <circle cx=\"18\" cy=\"20\" r=\"5\" stroke=\"white\" stroke-width=\"1.5\"\/>\n <path d=\"M2 36l12-10 8 8 10-12 18 14\" stroke=\"white\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <span>Hero foto \/ video<\/span>\n <\/div>\n\n <!-- Navbar -->\n <nav>\n <a href=\"#\" class=\"nav-logo\">JWL<\/a>\n\n <div class=\"nav-right\">\n <ul class=\"nav-links\">\n <li><a href=\"#demos\">Demo’s<\/a><\/li>\n <li><a href=\"#videos\">Video’s<\/a><\/li>\n <li><a href=\"#over\">Over mij<\/a><\/li>\n <li><a href=\"#contact\">Contact<\/a><\/li>\n <\/ul>\n <a href=\"#contact\" class=\"btn-boek\">Boek nu<\/a>\n <\/div>\n\n <button class=\"nav-toggle\" aria-label=\"Menu openen\" onclick=\"openMenu()\">\n <span><\/span><span><\/span><span><\/span>\n <\/button>\n <\/nav>\n\n <!-- Mobile menu overlay -->\n <div class=\"nav-mobile-menu\" id=\"mobileMenu\">\n <div class=\"nav-mobile-top\">\n <a href=\"#\" class=\"nav-logo\">JWL<\/a>\n <button class=\"btn-close\" aria-label=\"Menu sluiten\" onclick=\"closeMenu()\">\n <svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\">\n <path d=\"M6 6l16 16M22 6L6 22\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <\/svg>\n <\/button>\n <\/div>\n <ul class=\"nav-mobile-links\">\n <li><a href=\"#demos\" onclick=\"closeMenu()\">Demo’s<\/a><\/li>\n <li><a href=\"#videos\" onclick=\"closeMenu()\">Video’s<\/a><\/li>\n <li><a href=\"#over\" onclick=\"closeMenu()\">Over mij<\/a><\/li>\n <li><a href=\"#contact\" onclick=\"closeMenu()\">Contact<\/a><\/li>\n <\/ul>\n <a href=\"#contact\" class=\"btn-boek\" onclick=\"closeMenu()\">Boek nu<\/a>\n <\/div>\n\n <!-- Hero text -->\n <div class=\"hero-content\">\n <h1 class=\"hero-title\">\n JAN WILLEM\n <span class=\"hero-dot\"><\/span>\n LIVE\n <\/h1>\n <p class=\"hero-subtitle\">Entertainerpianist \u00b7 Liedjeszanger \u00b7 Presentator<\/p>\n <\/div>\n\n<\/section>\n<\/div>\n\n<!-- \u2500\u2500 DEMO SECTION \u2500\u2500 -->\n<section class=\"demo-section\" id=\"demos\">\n\n <div class=\"demo-glow\"><\/div>\n\n <h2 class=\"demo-heading\">BELUISTER MIJN DEMO’S<\/h2>\n\n <!-- Arrow left -->\n <button class=\"demo-arrow demo-arrow--left\" id=\"arrowLeft\" aria-label=\"Vorige\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M15 18l-6-6 6-6\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <\/button>\n\n <!-- Slider track -->\n <div class=\"demo-track-wrap\">\n <div class=\"demo-track\" id=\"demoTrack\">\n\n <div class=\"demo-card\" data-index=\"0\">\n <div class=\"demo-card-img\">\n <div class=\"demo-placeholder-img\"><\/div>\n <div class=\"demo-waveform\">\n <span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span>\n <\/div>\n <button class=\"demo-play-btn\" aria-label=\"Afspelen\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\"><circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"white\" stroke-width=\"1.8\"\/><polygon points=\"10,8 17,12 10,16\" fill=\"white\"\/><\/svg>\n <\/button>\n <\/div>\n <div class=\"demo-card-info\">\n <p class=\"demo-title\">Titel van het nummer<\/p>\n <p class=\"demo-artist\">Artiest<\/p>\n <\/div>\n <\/div>\n\n <div class=\"demo-card\" data-index=\"1\">\n <div class=\"demo-card-img\">\n <div class=\"demo-placeholder-img\"><\/div>\n <div class=\"demo-waveform\">\n <span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span>\n <\/div>\n <button class=\"demo-play-btn\" aria-label=\"Afspelen\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\"><circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"white\" stroke-width=\"1.8\"\/><polygon points=\"10,8 17,12 10,16\" fill=\"white\"\/><\/svg>\n <\/button>\n <\/div>\n <div class=\"demo-card-info\">\n <p class=\"demo-title\">Titel van het nummer<\/p>\n <p class=\"demo-artist\">Artiest<\/p>\n <\/div>\n <\/div>\n\n <div class=\"demo-card demo-card--active\" data-index=\"2\">\n <div class=\"demo-card-img\">\n <div class=\"demo-placeholder-img\"><\/div>\n <div class=\"demo-waveform demo-waveform--active\">\n <span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span>\n <\/div>\n <button class=\"demo-play-btn demo-play-btn--pause\" aria-label=\"Pauzeren\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\"><circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"white\" stroke-width=\"1.8\"\/><rect x=\"9\" y=\"8\" width=\"2.2\" height=\"8\" rx=\"1\" fill=\"white\"\/><rect x=\"12.8\" y=\"8\" width=\"2.2\" height=\"8\" rx=\"1\" fill=\"white\"\/><\/svg>\n <\/button>\n <\/div>\n <div class=\"demo-card-info demo-card-info--active\">\n <p class=\"demo-title\">Titel van het nummer<\/p>\n <p class=\"demo-artist\">Artiest<\/p>\n <\/div>\n <\/div>\n\n <div class=\"demo-card\" data-index=\"3\">\n <div class=\"demo-card-img\">\n <div class=\"demo-placeholder-img\"><\/div>\n <div class=\"demo-waveform\">\n <span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span>\n <\/div>\n <button class=\"demo-play-btn\" aria-label=\"Afspelen\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\"><circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"white\" stroke-width=\"1.8\"\/><polygon points=\"10,8 17,12 10,16\" fill=\"white\"\/><\/svg>\n <\/button>\n <\/div>\n <div class=\"demo-card-info\">\n <p class=\"demo-title\">Titel van het nummer<\/p>\n <p class=\"demo-artist\">Artiest<\/p>\n <\/div>\n <\/div>\n\n <div class=\"demo-card\" data-index=\"4\">\n <div class=\"demo-card-img\">\n <div class=\"demo-placeholder-img\"><\/div>\n <div class=\"demo-waveform\">\n <span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span>\n <\/div>\n <button class=\"demo-play-btn\" aria-label=\"Afspelen\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\"><circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"white\" stroke-width=\"1.8\"\/><polygon points=\"10,8 17,12 10,16\" fill=\"white\"\/><\/svg>\n <\/button>\n <\/div>\n <div class=\"demo-card-info\">\n <p class=\"demo-title\">Titel van het nummer<\/p>\n <p class=\"demo-artist\">Artiest<\/p>\n <\/div>\n <\/div>\n\n <div class=\"demo-card\" data-index=\"5\">\n <div class=\"demo-card-img\">\n <div class=\"demo-placeholder-img\"><\/div>\n <div class=\"demo-waveform\">\n <span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span>\n <\/div>\n <button class=\"demo-play-btn\" aria-label=\"Afspelen\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\"><circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"white\" stroke-width=\"1.8\"\/><polygon points=\"10,8 17,12 10,16\" fill=\"white\"\/><\/svg>\n <\/button>\n <\/div>\n <div class=\"demo-card-info\">\n <p class=\"demo-title\">Titel van het nummer<\/p>\n <p class=\"demo-artist\">Artiest<\/p>\n <\/div>\n <\/div>\n\n <div class=\"demo-card\" data-index=\"6\">\n <div class=\"demo-card-img\">\n <div class=\"demo-placeholder-img\"><\/div>\n <div class=\"demo-waveform\">\n <span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span>\n <\/div>\n <button class=\"demo-play-btn\" aria-label=\"Afspelen\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\"><circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"white\" stroke-width=\"1.8\"\/><polygon points=\"10,8 17,12 10,16\" fill=\"white\"\/><\/svg>\n <\/button>\n <\/div>\n <div class=\"demo-card-info\">\n <p class=\"demo-title\">Titel van het nummer<\/p>\n <p class=\"demo-artist\">Artiest<\/p>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n\n <!-- Arrow right -->\n <button class=\"demo-arrow demo-arrow--right\" id=\"arrowRight\" aria-label=\"Volgende\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M9 18l6-6-6-6\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <\/button>\n\n<\/section>\n\n<!-- \u2500\u2500 VIDEO SECTION \u2500\u2500 -->\n<section class=\"video-section\" id=\"videos\">\n\n <div class=\"video-glow\"><\/div>\n <h2 class=\"video-heading\">BEKIJK MIJN VIDEO’S<\/h2>\n\n <button class=\"video-arrow video-arrow--left\" id=\"vArrowLeft\" aria-label=\"Vorige\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M15 18l-6-6 6-6\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <\/button>\n\n <div class=\"video-track-wrap\">\n <div class=\"video-track\" id=\"videoTrack\">\n\n <div class=\"video-card\" data-vi=\"0\">\n <iframe src=\"https:\/\/www.youtube.com\/embed\/9dZfM33O4ys?enablejsapi=1\" allow=\"autoplay; fullscreen\" allowfullscreen title=\"Video 1\"><\/iframe>\n <button class=\"video-play-btn\" aria-label=\"Afspelen\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\"><circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"white\" stroke-width=\"1.8\"\/><polygon points=\"10,8 17,12 10,16\" fill=\"white\"\/><\/svg>\n <\/button>\n <button class=\"video-fullscreen-btn\" title=\"Volledig scherm\" onclick=\"videoFullscreen(this)\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"><path d=\"M1 6V1h5M10 1h5v5M15 10v5h-5M6 15H1v-5\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <\/button>\n <\/div>\n\n <div class=\"video-card\" data-vi=\"1\">\n <iframe src=\"https:\/\/www.youtube.com\/embed\/9dZfM33O4ys?enablejsapi=1\" allow=\"autoplay; fullscreen\" allowfullscreen title=\"Video 2\"><\/iframe>\n <button class=\"video-play-btn\" aria-label=\"Afspelen\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\"><circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"white\" stroke-width=\"1.8\"\/><polygon points=\"10,8 17,12 10,16\" fill=\"white\"\/><\/svg>\n <\/button>\n <button class=\"video-fullscreen-btn\" title=\"Volledig scherm\" onclick=\"videoFullscreen(this)\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"><path d=\"M1 6V1h5M10 1h5v5M15 10v5h-5M6 15H1v-5\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <\/button>\n <\/div>\n\n <div class=\"video-card\" data-vi=\"2\">\n <iframe src=\"https:\/\/www.youtube.com\/embed\/9dZfM33O4ys?enablejsapi=1\" allow=\"autoplay; fullscreen\" allowfullscreen title=\"Video 3\"><\/iframe>\n <button class=\"video-play-btn\" aria-label=\"Afspelen\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\"><circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"white\" stroke-width=\"1.8\"\/><polygon points=\"10,8 17,12 10,16\" fill=\"white\"\/><\/svg>\n <\/button>\n <button class=\"video-fullscreen-btn\" title=\"Volledig scherm\" onclick=\"videoFullscreen(this)\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"><path d=\"M1 6V1h5M10 1h5v5M15 10v5h-5M6 15H1v-5\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <\/button>\n <\/div>\n\n <div class=\"video-card\" data-vi=\"3\">\n <iframe src=\"https:\/\/www.youtube.com\/embed\/9dZfM33O4ys?enablejsapi=1\" allow=\"autoplay; fullscreen\" allowfullscreen title=\"Video 4\"><\/iframe>\n <button class=\"video-play-btn\" aria-label=\"Afspelen\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\"><circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"white\" stroke-width=\"1.8\"\/><polygon points=\"10,8 17,12 10,16\" fill=\"white\"\/><\/svg>\n <\/button>\n <button class=\"video-fullscreen-btn\" title=\"Volledig scherm\" onclick=\"videoFullscreen(this)\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"><path d=\"M1 6V1h5M10 1h5v5M15 10v5h-5M6 15H1v-5\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <\/button>\n <\/div>\n\n <div class=\"video-card\" data-vi=\"4\">\n <iframe src=\"https:\/\/www.youtube.com\/embed\/9dZfM33O4ys?enablejsapi=1\" allow=\"autoplay; fullscreen\" allowfullscreen title=\"Video 5\"><\/iframe>\n <button class=\"video-play-btn\" aria-label=\"Afspelen\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\"><circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"white\" stroke-width=\"1.8\"\/><polygon points=\"10,8 17,12 10,16\" fill=\"white\"\/><\/svg>\n <\/button>\n <button class=\"video-fullscreen-btn\" title=\"Volledig scherm\" onclick=\"videoFullscreen(this)\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"><path d=\"M1 6V1h5M10 1h5v5M15 10v5h-5M6 15H1v-5\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <\/button>\n <\/div>\n\n <\/div>\n <\/div>\n\n <button class=\"video-arrow video-arrow--right\" id=\"vArrowRight\" aria-label=\"Volgende\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M9 18l6-6-6-6\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <\/button>\n\n<\/section>\n\n<!-- \u2500\u2500 OVER MIJ SECTION \u2500\u2500 -->\n<div class=\"about-wrapper\">\n<section class=\"about-section\" id=\"over\">\n\n <div class=\"about-img-col\">\n <div class=\"about-img-placeholder\">\n <!-- Placeholder afbeelding -->\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"3\" stroke=\"rgba(255,255,255,0.4)\" stroke-width=\"1.2\"\/>\n <circle cx=\"9\" cy=\"9\" r=\"2.5\" stroke=\"rgba(255,255,255,0.4)\" stroke-width=\"1.2\"\/>\n <path d=\"M2 16l5-5 4 4 3-3 8 6\" stroke=\"rgba(255,255,255,0.4)\" stroke-width=\"1.2\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <span>Foto placeholder<\/span>\n <\/div>\n <!-- Gradient overlay: links naar rechts, zelfde stops als hero -->\n <div class=\"about-img-overlay\"><\/div>\n <\/div>\n\n <div class=\"about-text-col\">\n <h2 class=\"about-heading\">OVER MIJ<\/h2>\n <p class=\"about-body\">Jan Willem is een veelzijdige Nederlandse artiest, zanger en musicus die bekend staat om zijn authentieke geluid, gevoelige teksten en indrukwekkende podiumpresentatie. Met een stem die zowel kracht als kwetsbaarheid uitstraalt, weet hij moeiteloos het publiek te raken, of hij nu optreedt in een intieme zaal of op een groot festivalpodium.<\/p>\n <p class=\"about-body\">Jan Willem groeide op in een muzikaal gezin en ontwikkelde al op jonge leeftijd een passie voor muziek. Wat begon met klassiek pianospel en zang, groeide al snel uit tot een diepgewortelde liefde voor het schrijven van eigen nummers. Zijn muziekstijl laat zich niet gemakkelijk in een hokje plaatsen: van akoestische pop en folk tot invloeden uit jazz en kleinkunst. Hij mengt genres op een manier die altijd herkenbaar is. Jan Willem blijft zichzelf steeds opnieuw uitvinden.<\/p>\n <\/div>\n\n<\/section>\n<\/div>\n\n<!-- \u2500\u2500 CONTACT SECTION \u2500\u2500 -->\n<div class=\"contact-wrapper\">\n<section class=\"contact-section\" id=\"contact\">\n\n <h2 class=\"contact-heading\">NEEM CONTACT OP<\/h2>\n\n <div class=\"contact-fields-row\">\n <div class=\"contact-field\">\n <label class=\"contact-label\" for=\"naam\">Je naam<\/label>\n <input class=\"contact-input\" type=\"text\" id=\"naam\" placeholder=\"\" \/>\n <\/div>\n <div class=\"contact-field\">\n <label class=\"contact-label\" for=\"email\">Je e-mailadres<\/label>\n <input class=\"contact-input\" type=\"email\" id=\"email\" placeholder=\"\" \/>\n <\/div>\n <div class=\"contact-field\">\n <label class=\"contact-label\" for=\"onderwerp\">Onderwerp<\/label>\n <input class=\"contact-input\" type=\"text\" id=\"onderwerp\" placeholder=\"\" \/>\n <\/div>\n <\/div>\n\n <div class=\"contact-field contact-field--full\">\n <label class=\"contact-label\" for=\"bericht\">Je bericht (optioneel)<\/label>\n <textarea class=\"contact-input contact-textarea\" id=\"bericht\" rows=\"8\"><\/textarea>\n <\/div>\n\n <div class=\"contact-submit-row\">\n <button class=\"btn-contact-submit\">BOEK NU<\/button>\n <\/div>\n\n<\/section>\n<\/div>\n\n<!-- \u2500\u2500 FOOTER \u2500\u2500 -->\n<div class=\"footer-wrapper\">\n<footer class=\"footer\">\n\n <div class=\"footer-bg\">\n <div class=\"footer-bg-label\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"3\" stroke=\"white\" stroke-width=\"1.2\"\/><circle cx=\"9\" cy=\"9\" r=\"2.5\" stroke=\"white\" stroke-width=\"1.2\"\/><path d=\"M2 16l5-5 4 4 3-3 8 6\" stroke=\"white\" stroke-width=\"1.2\" stroke-linejoin=\"round\"\/><\/svg>\n <span>Achtergrond foto<\/span>\n <\/div>\n <\/div>\n\n <div class=\"footer-inner\">\n\n <!-- Title -->\n <div class=\"footer-title\">\n JAN WILLEM\n <span class=\"footer-title-dot\"><\/span>\n LIVE\n <\/div>\n\n <!-- Contact columns -->\n <div class=\"footer-contacts\">\n <div>\n <p class=\"footer-col-heading\">Boekingen<\/p>\n <span class=\"footer-col-line\">Burovoormuziek.nl<\/span>\n <a class=\"footer-col-line\" href=\"mailto:info@burovoormuziek.nl\">info@burovoormuziek.nl<\/a>\n <a class=\"footer-col-line\" href=\"tel:+31534608000\">31 53 460 8000<\/a>\n <\/div>\n <div>\n <p class=\"footer-col-heading\">Management<\/p>\n <span class=\"footer-col-line\">Wilco Temmink<\/span>\n <a class=\"footer-col-line\" href=\"mailto:mail@adres.nl\">mail@adres.nl<\/a>\n <a class=\"footer-col-line\" href=\"tel:+31653383014\">tel: +31 653383014<\/a>\n <\/div>\n <div>\n <p class=\"footer-col-heading\">Press Contact<\/p>\n <span class=\"footer-col-line\">Jan Willem<\/span>\n <a class=\"footer-col-line\" href=\"mailto:info@janwillem.live\">info@janwillem.live<\/a>\n <a class=\"footer-col-line\" href=\"tel:+31629990190\">+31 629990190<\/a>\n <\/div>\n <\/div>\n\n <!-- Nav row: centered, space-between -->\n <div class=\"footer-nav-row\">\n <a href=\"#demos\" class=\"footer-nav-link\">Demo’s<\/a>\n <a href=\"#videos\" class=\"footer-nav-link\">Video’s<\/a>\n <a href=\"#over\" class=\"footer-nav-link\">Over mij<\/a>\n <a href=\"#contact\" class=\"footer-nav-link\">Contact<\/a>\n <a href=\"#contact\" class=\"btn-footer-boek\">Boek nu<\/a>\n <\/div>\n\n <!-- Bottom row: credit + social -->\n <div class=\"footer-bottom\">\n <div class=\"footer-credit-logo\">\n <div class=\"footer-credit-logo-mark\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\n <rect x=\"2\" y=\"2\" width=\"6\" height=\"6\" rx=\"1.5\" fill=\"rgba(255,255,255,0.7)\"\/>\n <rect x=\"10\" y=\"2\" width=\"6\" height=\"6\" rx=\"1.5\" fill=\"rgba(255,255,255,0.5)\"\/>\n <rect x=\"2\" y=\"10\" width=\"6\" height=\"6\" rx=\"1.5\" fill=\"rgba(255,255,255,0.5)\"\/>\n <rect x=\"10\" y=\"10\" width=\"6\" height=\"6\" rx=\"1.5\" fill=\"rgba(255,255,255,0.3)\"\/>\n <\/svg>\n <\/div>\n <span>Logo placeholder<\/span>\n <\/div>\n <div class=\"footer-social\">\n <a href=\"#\" aria-label=\"Instagram\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" stroke=\"white\" stroke-width=\"1.8\"\/><circle cx=\"12\" cy=\"12\" r=\"5\" stroke=\"white\" stroke-width=\"1.8\"\/><circle cx=\"17.5\" cy=\"6.5\" r=\"1\" fill=\"white\"\/><\/svg>\n <\/a>\n <a href=\"#\" aria-label=\"Facebook\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" stroke=\"white\" stroke-width=\"1.8\"\/><path d=\"M13 21v-8h3l.5-3H13V8c0-.8.4-1.5 1.5-1.5H17V4s-1.2-.2-2.4-.2c-2.4 0-4 1.5-4 4V10H8v3h2.6v8H13z\" fill=\"white\"\/><\/svg>\n <\/a>\n <a href=\"#\" aria-label=\"YouTube\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" stroke=\"white\" stroke-width=\"1.8\"\/><path d=\"M17.8 9.2a2 2 0 00-1.4-1.4C15.2 7.5 12 7.5 12 7.5s-3.2 0-4.4.3A2 2 0 006.2 9.2 20 20 0 006 12a20 20 0 00.2 2.8 2 2 0 001.4 1.4c1.2.3 4.4.3 4.4.3s3.2 0 4.4-.3a2 2 0 001.4-1.4A20 20 0 0018 12a20 20 0 00-.2-2.8z\" stroke=\"white\" stroke-width=\"1.8\"\/><polygon points=\"10.5,14.5 14.5,12 10.5,9.5\" fill=\"white\"\/><\/svg>\n <\/a>\n <\/div>\n <\/div>\n\n <\/div>\n\n<\/footer>\n<\/div>\n\n<script>\n function openMenu() {\n document.getElementById('mobileMenu').classList.add('open');\n document.body.style.overflow = 'hidden';\n }\n function closeMenu() {\n document.getElementById('mobileMenu').classList.remove('open');\n document.body.style.overflow = '';\n }\n\n \/\/ \u2500\u2500 AUDIO ENGINE \u2500\u2500\n let audioCtx = null;\n let allOscillators = [];\n let currentGain = null;\n let playingDataIndex = -1; \/\/ tracks which data-index is playing\n\n const NOTE_FREQS = [261.6, 293.7, 329.6, 349.2, 392.0, 440.0, 493.9];\n\n function getAudioCtx() {\n if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();\n return audioCtx;\n }\n\n function stopAudio() {\n allOscillators.forEach(osc => { try { osc.stop(); } catch(e) {} });\n allOscillators = [];\n if (currentGain) { try { currentGain.disconnect(); } catch(e) {} currentGain = null; }\n playingDataIndex = -1;\n }\n\n function playTone(dataIndex) {\n const ctx = getAudioCtx();\n if (ctx.state === 'suspended') ctx.resume();\n stopAudio();\n\n const gain = ctx.createGain();\n gain.gain.setValueAtTime(0, ctx.currentTime);\n gain.gain.linearRampToValueAtTime(0.18, ctx.currentTime + 0.08);\n gain.connect(ctx.destination);\n currentGain = gain;\n\n [1, 1.5].forEach((mult, i) => {\n const osc = ctx.createOscillator();\n osc.type = i === 0 ? 'sine' : 'triangle';\n osc.frequency.value = NOTE_FREQS[dataIndex % NOTE_FREQS.length] * mult;\n osc.connect(gain);\n osc.start();\n allOscillators.push(osc);\n });\n\n playingDataIndex = dataIndex;\n }\n\n \/\/ \u2500\u2500 TRUE LOOP SLIDER \u2500\u2500\n \/\/ 3 sets of clones: [before 0-6] [original 7-13] [after 14-20]\n \/\/ current always stays in range 7-13. Arrows animate via clone then snap back.\n\n const trackEl = document.getElementById('demoTrack');\n const arrowL = document.getElementById('arrowLeft');\n const arrowR = document.getElementById('arrowRight');\n const GAP = 24;\n const N = 7; \/\/ number of cards\n const START = 3; \/\/ data-index to start on\n\n const origCards = Array.from(trackEl.querySelectorAll('.demo-card'));\n const before = origCards.map(c => { const n=c.cloneNode(true); n.dataset.set='b'; return n; });\n const after = origCards.map(c => { const n=c.cloneNode(true); n.dataset.set='a'; return n; });\n origCards.forEach(c => c.remove());\n [...before, ...origCards, ...after].forEach(c => trackEl.appendChild(c));\n\n const all = Array.from(trackEl.querySelectorAll('.demo-card'));\n \/\/ all[0..6]=before all[7..13]=original all[14..20]=after\n\n let cur = N + START; \/\/ absolute index, always kept in [N, 2N-1] at rest\n let baseOffset = 0;\n let dragging = false;\n let startX = 0;\n let dragDx = 0;\n let animating = false;\n\n const ACTIVE_MARGIN = 24; \/\/ matches margin-left\/right on .demo-card--active\n\n function cw() {\n \/\/ Read actual rendered gap and card width so it works at any screen size\n const style = getComputedStyle(trackEl);\n const gap = parseFloat(style.gap) || 24;\n return all[N].offsetWidth + gap;\n }\n\n function activeMargin() {\n \/\/ Read actual rendered margin of active card\n const activeCard = all.find(c => c.classList.contains('demo-card--active'));\n if (!activeCard) return ACTIVE_MARGIN;\n return parseFloat(getComputedStyle(activeCard).marginLeft) || ACTIVE_MARGIN;\n }\n\n function cardGap() {\n return parseFloat(getComputedStyle(trackEl).gap) || 24;\n }\n\n function trackPadLeft() {\n return parseFloat(getComputedStyle(trackEl).paddingLeft) || 0;\n }\n\n \/\/ Pure-math offset: accounts for padding, gap, active margins\n function calcOffset(idx, activeData) {\n const w = trackEl.parentElement.offsetWidth;\n const gap = cardGap();\n const am = ACTIVE_MARGIN;\n const cw = all[N].offsetWidth;\n const pad = trackPadLeft();\n\n let pos = pad;\n for (let i = 0; i < idx; i++) {\n const isAct = (i % N) === activeData;\n pos += cw + gap + (isAct ? am * 2 : 0);\n }\n if (idx % N === activeData) pos += am;\n return (w \/ 2) - pos - cw \/ 2;\n }\n\n function move(px, animated) {\n trackEl.style.transition = animated ? 'transform 0.38s cubic-bezier(0.25,0.46,0.45,0.94)' : 'none';\n trackEl.style.transform = `translateX(${px}px)`;\n }\n\n \/\/ Navigate one step in direction (+1 right, -1 left)\n function step(dir) {\n if (animating) return;\n animating = true;\n\n const destData = ((cur - N + dir + N) % N + N) % N;\n const animTo = cur + dir;\n const snapTo = N + destData;\n\n if (playingDataIndex !== -1) playTone(destData);\n\n \/\/ Calculate both positions BEFORE touching the DOM (pure math, no layout read)\n const toOffset = calcOffset(animTo, destData);\n const snapOffset = calcOffset(snapTo, destData);\n\n \/\/ Apply visuals (adds\/removes margin class) then immediately animate\n updateVisuals(destData);\n cur = snapTo;\n baseOffset = snapOffset;\n\n move(toOffset, true);\n\n setTimeout(() => {\n move(snapOffset, false);\n animating = false;\n }, 400);\n }\n\n arrowL.addEventListener('click', () => step(-1));\n arrowR.addEventListener('click', () => step(+1));\n\n \/\/ \u2500\u2500 VISUALS \u2500\u2500\n function updateVisuals(activeData) {\n all.forEach((card, i) => {\n const d = i % N;\n const isActive = d === activeData;\n const isPlay = isActive && playingDataIndex === d;\n\n card.classList.toggle('demo-card--active', isActive);\n card.querySelector('.demo-card-info').classList.toggle('demo-card-info--active', isActive);\n card.querySelector('.demo-waveform').classList.toggle('demo-waveform--active', isPlay);\n\n const btn = card.querySelector('.demo-play-btn');\n btn.setAttribute('aria-label', isPlay ? 'Pauzeren' : 'Afspelen');\n btn.innerHTML = isPlay\n ? `<svg viewBox=\"0 0 24 24\" fill=\"none\"><circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"white\" stroke-width=\"1.8\"\/><rect x=\"9\" y=\"8\" width=\"2.2\" height=\"8\" rx=\"1\" fill=\"white\"\/><rect x=\"12.8\" y=\"8\" width=\"2.2\" height=\"8\" rx=\"1\" fill=\"white\"\/><\/svg>`\n : `<svg viewBox=\"0 0 24 24\" fill=\"none\"><circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"white\" stroke-width=\"1.8\"\/><polygon points=\"10,8 17,12 10,16\" fill=\"white\"\/><\/svg>`;\n });\n }\n\n \/\/ \u2500\u2500 PLAY \/ PAUSE \u2500\u2500\n trackEl.addEventListener('click', e => {\n const btn = e.target.closest('.demo-play-btn');\n if (!btn) return;\n e.stopPropagation();\n const d = all.indexOf(btn.closest('.demo-card')) % N;\n if (playingDataIndex === d) {\n stopAudio();\n updateVisuals(cur % N);\n } else {\n playTone(d);\n const targetAbs = N + d;\n cur = targetAbs;\n updateVisuals(d); \/\/ set active class BEFORE calcOffset\n baseOffset = calcOffset(cur, d);\n move(baseOffset, true);\n }\n });\n\n \/\/ \u2500\u2500 DRAG mouse \u2500\u2500\n trackEl.addEventListener('mousedown', e => {\n if (e.target.closest('.demo-play-btn') || animating) return;\n dragging = true; startX = e.clientX; dragDx = 0;\n trackEl.style.transition = 'none';\n });\n window.addEventListener('mousemove', e => {\n if (!dragging) return;\n dragDx = e.clientX - startX;\n trackEl.style.transform = `translateX(${baseOffset + dragDx}px)`;\n });\n window.addEventListener('mouseup', () => {\n if (!dragging) return;\n dragging = false;\n if (dragDx < -60) step(+1);\n else if (dragDx > 60) step(-1);\n else { move(baseOffset, true); }\n dragDx = 0;\n });\n\n \/\/ \u2500\u2500 DRAG touch \u2500\u2500\n trackEl.addEventListener('touchstart', e => {\n if (e.target.closest('.demo-play-btn') || animating) return;\n startX = e.touches[0].clientX; dragDx = 0;\n trackEl.style.transition = 'none';\n }, { passive: true });\n trackEl.addEventListener('touchmove', e => {\n dragDx = e.touches[0].clientX - startX;\n trackEl.style.transform = `translateX(${baseOffset + dragDx}px)`;\n }, { passive: true });\n trackEl.addEventListener('touchend', () => {\n if (dragDx < -60) step(+1);\n else if (dragDx > 60) step(-1);\n else { move(baseOffset, true); }\n dragDx = 0;\n });\n\n function init() {\n cur = N + START;\n updateVisuals(START);\n baseOffset = calcOffset(cur, START);\n move(baseOffset, false);\n }\n if (document.readyState === 'complete') init();\n else window.addEventListener('load', init);\n\n let resizeTimer;\n window.addEventListener('resize', () => {\n clearTimeout(resizeTimer);\n resizeTimer = setTimeout(() => {\n baseOffset = calcOffset(cur, cur % N);\n move(baseOffset, false);\n }, 80);\n });\n\n \/\/ \u2500\u2500 VIDEO SLIDER \u2500\u2500\n (function() {\n const VN = 5;\n const VSTART = 2; \/\/ middle of 5\n\n const vTrack = document.getElementById('videoTrack');\n const vArrowL = document.getElementById('vArrowLeft');\n const vArrowR = document.getElementById('vArrowRight');\n\n \/\/ Build 3 sets: [before 0-4][original 5-9][after 10-14]\n const vOrig = Array.from(vTrack.querySelectorAll('.video-card'));\n const vBefore = vOrig.map(c => { const n = c.cloneNode(true); n.dataset.set='b'; return n; });\n const vAfter = vOrig.map(c => { const n = c.cloneNode(true); n.dataset.set='a'; return n; });\n vOrig.forEach(c => c.remove());\n [...vBefore, ...vOrig, ...vAfter].forEach(c => vTrack.appendChild(c));\n\n const vAll = Array.from(vTrack.querySelectorAll('.video-card'));\n\n let vCur = VN + VSTART;\n let vBase = 0;\n let vDragging = false;\n let vStartX = 0;\n let vDragDx = 0;\n let vAnimating = false;\n let vPlayingIdx = -1;\n\n const ICON_PLAY = `<svg viewBox=\"0 0 24 24\" fill=\"none\"><circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"white\" stroke-width=\"1.8\"\/><polygon points=\"10,8 17,12 10,16\" fill=\"white\"\/><\/svg>`;\n const ICON_PAUSE = `<svg viewBox=\"0 0 24 24\" fill=\"none\"><circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"white\" stroke-width=\"1.8\"\/><rect x=\"9\" y=\"8\" width=\"2.2\" height=\"8\" rx=\"1\" fill=\"white\"\/><rect x=\"12.8\" y=\"8\" width=\"2.2\" height=\"8\" rx=\"1\" fill=\"white\"\/><\/svg>`;\n\n function vGap() {\n return parseFloat(getComputedStyle(vTrack).gap) || 24;\n }\n\n function vActiveMarginPx() {\n \/\/ Use CSS variable we set on init (avoids layout reads)\n const val = getComputedStyle(document.documentElement).getPropertyValue('--v-active-margin');\n return parseFloat(val) || 30;\n }\n\n \/\/ Pure-math: no offsetLeft, no DOM layout race\n function vCalcOffset(idx, activeData) {\n const w = vTrack.parentElement.offsetWidth;\n const gap = vGap();\n const am = vActiveMarginPx();\n const cw = vAll[VN].offsetWidth;\n\n let pos = 0;\n for (let i = 0; i < idx; i++) {\n const isAct = (i % VN) === activeData;\n pos += cw + gap + (isAct ? am * 2 : 0);\n }\n if (idx % VN === activeData) pos += am;\n return (w \/ 2) - pos - cw \/ 2;\n }\n\n function vMove(px, animated) {\n vTrack.style.transition = animated ? 'transform 0.38s cubic-bezier(0.25,0.46,0.45,0.94)' : 'none';\n vTrack.style.transform = `translateX(${px}px)`;\n }\n\n function postToIframe(iframe, func) {\n try { iframe.contentWindow.postMessage(JSON.stringify({event:'command', func, args:[]}), '*'); } catch(e) {}\n }\n\n function vUpdateVisuals(activeData) {\n vAll.forEach((card, i) => {\n const d = i % VN;\n const isActive = d === activeData;\n const isPlay = isActive && vPlayingIdx === d;\n\n card.classList.toggle('video-card--active', isActive);\n\n const btn = card.querySelector('.video-play-btn');\n if (btn) {\n btn.innerHTML = isPlay ? ICON_PAUSE : ICON_PLAY;\n btn.setAttribute('aria-label', isPlay ? 'Pauzeren' : 'Afspelen');\n btn.style.display = 'flex';\n }\n\n const fsBtn = card.querySelector('.video-fullscreen-btn');\n if (fsBtn) fsBtn.style.display = isActive ? 'flex' : 'none';\n\n const iframe = card.querySelector('iframe');\n if (iframe && !isPlay) postToIframe(iframe, 'pauseVideo');\n });\n }\n\n function vStep(dir) {\n if (vAnimating) return;\n vAnimating = true;\n\n const destData = ((vCur - VN + dir + VN) % VN + VN) % VN;\n const animTo = vCur + dir;\n const snapTo = VN + destData;\n\n if (vPlayingIdx !== -1) vPlayingIdx = destData;\n\n \/\/ Calculate BEFORE DOM changes\n const toOffset = vCalcOffset(animTo, destData);\n const snapOffset = vCalcOffset(snapTo, destData);\n\n vUpdateVisuals(destData);\n vCur = snapTo;\n vBase = snapOffset;\n\n vMove(toOffset, true);\n\n setTimeout(() => {\n vMove(snapOffset, false);\n vAnimating = false;\n }, 400);\n }\n\n \/\/ Play\/pause click\n vTrack.addEventListener('click', e => {\n const btn = e.target.closest('.video-play-btn');\n if (btn) {\n e.stopPropagation();\n const card = btn.closest('.video-card');\n const absIdx = vAll.indexOf(card);\n const dataIdx = absIdx % VN;\n const snapTo = VN + dataIdx;\n\n vCur = snapTo;\n if (vPlayingIdx === dataIdx) {\n vPlayingIdx = -1;\n const iframe = vAll[snapTo].querySelector('iframe');\n if (iframe) postToIframe(iframe, 'pauseVideo');\n } else {\n vPlayingIdx = dataIdx;\n const iframe = vAll[snapTo].querySelector('iframe');\n if (iframe) postToIframe(iframe, 'playVideo');\n }\n vUpdateVisuals(dataIdx);\n vBase = vCalcOffset(vCur, dataIdx);\n vMove(vBase, true);\n return;\n }\n\n \/\/ Click inactive card \u2192 navigate\n const card = e.target.closest('.video-card');\n if (!card || card.classList.contains('video-card--active')) return;\n const absIdx = vAll.indexOf(card);\n const dataIdx = absIdx % VN;\n vCur = VN + dataIdx;\n if (vPlayingIdx !== -1) vPlayingIdx = dataIdx;\n vUpdateVisuals(dataIdx);\n vBase = vCalcOffset(vCur, dataIdx);\n vMove(vBase, true);\n });\n\n vArrowL.addEventListener('click', () => vStep(-1));\n vArrowR.addEventListener('click', () => vStep(+1));\n\n \/\/ Drag \u2014 mouse\n vTrack.addEventListener('mousedown', e => {\n if (e.target.closest('.video-play-btn') || vAnimating) return;\n vDragging = true; vStartX = e.clientX; vDragDx = 0;\n vTrack.style.transition = 'none';\n });\n window.addEventListener('mousemove', e => {\n if (!vDragging) return;\n vDragDx = e.clientX - vStartX;\n vTrack.style.transform = `translateX(${vBase + vDragDx}px)`;\n });\n window.addEventListener('mouseup', () => {\n if (!vDragging) return;\n vDragging = false;\n if (vDragDx < -60) vStep(+1);\n else if (vDragDx > 60) vStep(-1);\n else vMove(vBase, true);\n vDragDx = 0;\n });\n\n \/\/ Drag \u2014 touch\n vTrack.addEventListener('touchstart', e => {\n if (e.target.closest('.video-play-btn')) return;\n vStartX = e.touches[0].clientX; vDragDx = 0;\n vTrack.style.transition = 'none';\n }, { passive: true });\n vTrack.addEventListener('touchmove', e => {\n vDragDx = e.touches[0].clientX - vStartX;\n vTrack.style.transform = `translateX(${vBase + vDragDx}px)`;\n }, { passive: true });\n vTrack.addEventListener('touchend', () => {\n if (vDragDx < -60) vStep(+1);\n else if (vDragDx > 60) vStep(-1);\n else vMove(vBase, true);\n vDragDx = 0;\n });\n\n function vInit() {\n vCur = VN + VSTART;\n const cardWidth = vAll[VN].offsetWidth;\n const margin = Math.round(cardWidth * 0.125);\n document.documentElement.style.setProperty('--v-active-margin', margin + 'px');\n vUpdateVisuals(VSTART);\n vBase = vCalcOffset(vCur, VSTART);\n vMove(vBase, false);\n }\n\n if (document.readyState === 'complete') vInit();\n else window.addEventListener('load', vInit);\n\n let vResizeTimer;\n window.addEventListener('resize', () => {\n clearTimeout(vResizeTimer);\n vResizeTimer = setTimeout(() => {\n const cardWidth = vAll[VN].offsetWidth;\n const margin = Math.round(cardWidth * 0.125);\n document.documentElement.style.setProperty('--v-active-margin', margin + 'px');\n vBase = vCalcOffset(vCur, vCur % VN);\n vMove(vBase, false);\n }, 80);\n });\n })();\n\n \/\/ Fullscreen helper\n function videoFullscreen(btn) {\n const iframe = btn.closest('.video-card').querySelector('iframe');\n if (iframe.requestFullscreen) iframe.requestFullscreen();\n else if (iframe.webkitRequestFullscreen) iframe.webkitRequestFullscreen();\n }\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>JW Live \u2013 Jan Willem Live JAN WILLEM LIVE Boekingen Burovoormuziek.nl info@burovoormuziek.nl 31 53 460 8000 Management Wilco Temmink mail@adres.nl tel: +31 653383014 Press Contact Jan Willem info@janwillem.live +31 629990190 Demo’s Video’s Over mij Contact Boek nu Logo placeholder Hero foto \/ video JWL Demo’s Video’s Over mij Contact Boek nu JWL Demo’s Video’s Over…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"hide","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":true,"_kad_post_footer":true,"_kad_post_classname":"","footnotes":""},"class_list":["post-78","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demo.aardo.nl\/index.php?rest_route=\/wp\/v2\/pages\/78","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.aardo.nl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.aardo.nl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.aardo.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.aardo.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=78"}],"version-history":[{"count":25,"href":"https:\/\/demo.aardo.nl\/index.php?rest_route=\/wp\/v2\/pages\/78\/revisions"}],"predecessor-version":[{"id":105,"href":"https:\/\/demo.aardo.nl\/index.php?rest_route=\/wp\/v2\/pages\/78\/revisions\/105"}],"wp:attachment":[{"href":"https:\/\/demo.aardo.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=78"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}