Visa

// Shared components: nav, logo, garments, product card, footer, now-playing const { useState, useEffect, useRef, useMemo, useCallback } = React; // ───────────────────────── icons ───────────────────────── const Icon = { menu: (p) => , search: (p) => , cart: (p) => , heart: (p) => , heartFill:(p)=> , user: (p) => , close: (p) => , arrow: (p) => , plus: (p) => , minus: (p) => , star: (p) => , yt: (p) => , ig: (p) => , sc: (p) => , tt: (p) => , spotify:(p) => , patreon:(p)=> , discord:(p)=> , coffee: (p) => , trash: (p) => , check: (p) => , }; // ───────────────────────── garment SVGs ───────────────────────── // Stylized, monochromatic apparel silhouettes. Designed to read as // editorial product photography placeholders. User can drop in real // images via . function Garment({ kind, color = 'currentColor', graphic = true, back = false }) { // viewBox 0 0 200 240 const common = { width: '100%', height: '100%', viewBox: '0 0 200 240', preserveAspectRatio: 'xMidYMid meet' }; const stroke = 'currentColor'; const fill = color; const Label = () => ( PVL ); const BackGraphic = () => ( ); if (kind === 'tee' || kind === 'tee-crop') { const bottom = kind === 'tee-crop' ? 175 : 220; return ( ); } if (kind === 'longsleeve') { return ( ); } if (kind === 'hoodie' || kind === 'hoodie-zip' || kind === 'pullover') { return ( ); } if (kind === 'tote') { return ( ); } if (kind === 'cap5') { return ( ); } if (kind === 'cap-trucker') { return ( ); } if (kind === 'beanie') { return ( ); } if (kind === 'tank') { return ( ); } if (kind === 'pullover') { return ( ); } if (kind === 'carrier') { return ( ); } return null; } function sampleCardBg(img, set) { try { const c = document.createElement('canvas'); c.width = c.height = 2; const ctx = c.getContext('2d', { willReadFrequently: true }); ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, 2, 2); const d = ctx.getImageData(0, 0, 2, 2).data; const spread = Math.max(d[0],d[4],d[8],d[12]) - Math.min(d[0],d[4],d[8],d[12]); if (spread < 30) set(`rgb(${Math.round((d[0]+d[4]+d[8]+d[12])/4)},${Math.round((d[1]+d[5]+d[9]+d[13])/4)},${Math.round((d[2]+d[6]+d[10]+d[14])/4)})`); } catch(e) {} } function readCardAltBg(imgEl) { try { const w = imgEl.naturalWidth, h = imgEl.naturalHeight; const c = document.createElement('canvas'); c.width = c.height = 1; const ctx = c.getContext('2d'); const px = (x, y) => { ctx.drawImage(imgEl, x, y, 1, 1, 0, 0, 1, 1); return [...ctx.getImageData(0,0,1,1).data]; }; const tl = px(0,0), tr = px(w-1,0), bl = px(0,h-1), br = px(w-1,h-1); const dist = (a,b) => Math.abs(a[0]-b[0]) + Math.abs(a[1]-b[1]) + Math.abs(a[2]-b[2]); const uniform = dist(tl,tr) < 40 && dist(tl,bl) < 40 && dist(tl,br) < 40; if (tl[3] < 128) return null; return { bg: `rgb(${tl[0]},${tl[1]},${tl[2]})`, full: !uniform }; } catch(_) { return null; } } // ───────────────────────── product card ───────────────────────── function ProductCard({ p, onOpen, wish, onWish, initialVariantType, initialCwIdx, initialShirtColorIdx, compact }) { const [cwIdx, setCwIdx] = useState(initialCwIdx ?? 0); const [variantType, setVariantType] = useState(initialVariantType ?? (p.printed?.length > 0 ? 'printed' : 'embroidered')); const [added, setAdded] = useState(false); const [pickingSize, setPickingSize] = useState(false); const [showMoreSizes, setShowMoreSizes] = useState(false); const [sampledBg, setSampledBg] = useState(null); const [altBg, setAltBg] = useState(null); const [hovered, setHovered] = useState(false); const isWished = wish.has(p.id); const card = useRef(null); const colorways = p[variantType]?.length ? p[variantType] : (p.printed?.length ? p.printed : (p.embroidered || [])); const cw = colorways[Math.min(cwIdx, colorways.length - 1)] || colorways[0]; const bg = cw?.hex || '#e8dfc8'; const CARD_DEFAULT_SIZES = new Set(['S', 'M', 'L']); const allSizes = cw?.sizes || p.sizes || []; const hasSML = allSizes.some(s => CARD_DEFAULT_SIZES.has(s)); const visibleSizes = (showMoreSizes || !hasSML) ? allSizes : allSizes.filter(s => CARD_DEFAULT_SIZES.has(s)); const hasMoreSizes = !showMoreSizes && hasSML && allSizes.some(s => !CARD_DEFAULT_SIZES.has(s)); const doAdd = (size) => { const shirtColor = cw?.shirtColors?.[0] || null; window.dispatchEvent(new CustomEvent('peripheral:quick-add', { detail: { product: p, colorway: cw, shirtColor, size, variantType } })); setPickingSize(false); setAdded(true); setTimeout(() => setAdded(false), 1800); }; const handleQuickAdd = (e) => { e.stopPropagation(); if (pickingSize) { setPickingSize(false); return; } const allSizes = cw?.sizes || p.sizes || []; if (allSizes.length > 1) { setPickingSize(true); return; } doAdd(allSizes[0] || ''); }; const scIdx = initialShirtColorIdx ?? 0; const frontImg = cw?.shirtColors?.[scIdx]?.images?.[0] || cw?.images?.[0] || null; const isBag = p.silhouette === 'tote' || p.silhouette === 'carrier'; const _altArr = cw?.shirtColors?.[scIdx]?.images || cw?.images || []; const altImg = isBag ? (_altArr[_altArr.length - 1] || frontImg) : (cw?.shirtColors?.[scIdx]?.images?.[2] || cw?.images?.[2] || (variantType === 'embroidered' && cw?.mockupImg ? cw.mockupImg : frontImg)); const altIsReal = altImg !== frontImg; return (

{ setHovered(true); onCursor('hover'); const urls = new Set(); ['printed','embroidered'].forEach(vt => { (p[vt]||[]).forEach(cw => { (cw.images||[]).forEach(u => urls.add(u)); (cw.shirtColors||[]).forEach(sc => (sc.images||[]).forEach(u => urls.add(u))); }); }); urls.forEach(u => { const i = new Image(); i.crossOrigin = 'anonymous'; i.src = u; }); }} onMouseLeave={() => { setHovered(false); onCursor('default'); setPickingSize(false); setShowMoreSizes(false); }} onClick={() => { onCursor('default'); onOpen(p, { variantType, cwIdx, shirtColorIdx: scIdx }); }}>

{frontImg ? ( <>

{p.name}

{ const r = readCardAltBg(e.target); if (r) setSampledBg(r.bg); } : undefined} style={{ width:'100%', height:'100%', objectFit: (isBag && !compact) ? 'cover' : 'contain', padding: (isBag && !compact) ? 0 : (compact ? (isBag ? '4% 8%' : '0') : '6% 10%') }}/>

{p.name}

setAltBg(readCardAltBg(e.target)) : undefined} style={{ width:'100%', height:'100%', objectFit: altIsReal ? 'cover' : 'contain', padding: (altIsReal || isBag) ? 0 : (compact ? '0' : '6% 10%') }}/>

) : ( <>

{variantType === 'embroidered' ? : }

)}

e.stopPropagation()}> {colorways.length > 1 && ( )} {(colorways || []).slice(0, 5).map((c, i) => ( { e.stopPropagation(); setCwIdx(i); }}/> ))} {colorways.length > 1 && ( )}

{pickingSize && (

e.stopPropagation()}> {visibleSizes.map(s => ( ))} {hasMoreSizes && ( )}

)}

onCursor('default')} onMouseLeave={() => onCursor('hover')}>

{p.name}

{window.fmt ? window.fmt(cw?.price || p.price) : `€${cw?.price || p.price}`}

{p.hasEmbroidered && p.printed?.length > 0 ? (

e.stopPropagation()}>

) : (p.printed?.length > 0 || p.hasEmbroidered) ? (

{p.printed?.length > 0 ? 'Print' : 'Embroidered'}

) : (

{p.type}

)}

); } // ───────────────────────── nav ───────────────────────── function Nav({ route, setRoute, navigate, cartCount, wishCount, onOpenCart, onOpenSearch, onOpenWish, openCollection, transparent }) { const [scrolled, setScrolled] = useState(false); const [menuOpen, setMenuOpen] = useState(false); useEffect(() => { const NAV_H = 72; if (!transparent) { setScrolled(window.scrollY > NAV_H); const onScroll = () => setScrolled(window.scrollY > NAV_H); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); } // On transparent pages, go solid the moment the hero-image bottom crosses the nav const hero = document.querySelector('.hero-image'); if (!hero) { setScrolled(window.scrollY > NAV_H); const onScroll = () => setScrolled(window.scrollY > NAV_H); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); } const check = () => setScrolled(hero.getBoundingClientRect().bottom <= NAV_H); check(); window.addEventListener('scroll', check, { passive: true }); return () => window.removeEventListener('scroll', check); }, [transparent]); useEffect(() => { document.body.style.overflow = menuOpen ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [menuOpen]); const showBg = !transparent || scrolled || menuOpen; const goShop = () => navigate({ name:'home' }, '/merch'); const goLanding = () => navigate({ name:'landing' }, '/'); const close = () => setMenuOpen(false); return ( <>

onCursor('hover')} onMouseLeave={()=>onCursor('default')}>

{menuOpen && (

{ goShop(); close(); }} onMouseEnter={()=>onCursor('hover')} onMouseLeave={()=>onCursor('default')}>Home { openCollection('all'); close(); }} onMouseEnter={()=>onCursor('hover')} onMouseLeave={()=>onCursor('default')}>Collections { navigate({ name:'about' }, '/merch/about'); close(); }} onMouseEnter={()=>onCursor('hover')} onMouseLeave={()=>onCursor('default')}>About

)} ); } function scrollToId(id) { const el = document.getElementById(id); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: 'smooth' }); } // ───────────────────────── footer ───────────────────────── const PAY_ICONS = [ { id: 'visa', label: 'Visa', el: ( )}, { id: 'mc', label: 'Mastercard', el: ( )}, { id: 'amex', label: 'American Express', el: ( )}, { id: 'paypal', label: 'PayPal', el: ( )}, { id: 'applepay', label: 'Apple Pay', el: ( )}, { id: 'gpay', label: 'Google Pay', el: ( )}, { id: 'ideal_wero', label: 'iDEAL / Wero', style: {background:'white',borderRadius:3,marginTop:1}, el: ( )}, ]; function Footer({ setRoute, openCollection, navigate }) { return ( ); } // ───────────────────────── now playing widget ───────────────────────── function NowPlaying() { const tracks = [ { side: 'A1', title: 'Yotto — Walls of Jericho (Mix 02)' }, { side: 'A2', title: 'Ben Böhmer — Lights Out (live edit)' }, { side: 'B1', title: 'Tinlicker — Because You Move Me' }, { side: 'B2', title: 'Marsh — Endless (Anjuna Deep)' }, ]; const [i, setI] = useState(0); useEffect(() => { const id = setInterval(() => setI(v => (v + 1) % tracks.length), 8000); return () => clearInterval(id); }, []); return (

Now Spinning · Side {tracks[i].side}

{tracks[i].title}

); } // ───────────────────────── custom cursor helpers ───────────────────────── let _cursorZoomActive = false; // true only while hovering a lightbox zoom target let _cursorDefaultRaf = null; // pending default-reset frame — cancelled if hover fires first function onCursor(mode) { const c = document.getElementById('cursor'); if (!c) return; if (mode === 'default') { // Defer the reset by one frame. If another element calls onCursor('hover') // before then (e.g. moving from a child button to its parent card), the // pending reset is cancelled and the cursor stays in hover state. if (_cursorDefaultRaf) cancelAnimationFrame(_cursorDefaultRaf); _cursorDefaultRaf = requestAnimationFrame(() => { _cursorDefaultRaf = null; // If the cursor is still over the card image area, keep hover state — don't reset. if (document.querySelector('.card-media:hover')) return; c.classList.remove('hover', 'text', 'hidden'); _cursorZoomActive = false; }); } else { if (_cursorDefaultRaf) { cancelAnimationFrame(_cursorDefaultRaf); _cursorDefaultRaf = null; } c.classList.remove('hover', 'text', 'hidden'); if (mode) c.classList.add(mode); _cursorZoomActive = (mode === 'hidden'); } } function useCursor() { useEffect(() => { const c = document.getElementById('cursor'); if (!c) return; if (!c.querySelector('.vinyl')) { const inner = document.createElement('div'); inner.className = 'vinyl'; c.appendChild(inner); } let x = window.innerWidth / 2, y = window.innerHeight / 2; let tx = x, ty = y; let needsSnap = false; let hasMovedOnce = false; c.style.opacity = '0'; const onBlur = () => { needsSnap = true; }; const onMove = (e) => { const dx = e.clientX - tx, dy = e.clientY - ty; tx = e.clientX; ty = e.clientY; // Snap instead of lerp on big positional jumps (returning from browser UI like // Chrome bookmarks dropdown — normal movement is <14px/frame at 60fps). const bigJump = (dx * dx + dy * dy) > 40000; // >200px if (needsSnap || bigJump) { x = tx; y = ty; needsSnap = false; } if (!hasMovedOnce) { x = tx; y = ty; hasMovedOnce = true; c.style.opacity = ''; } // If cursor is stuck hidden but we're not actively in zoom mode, clear it. if (c.classList.contains('hidden') && !_cursorZoomActive) { c.classList.remove('hidden'); } }; // Hide cursor IN the bfcache snapshot so the frozen frame is already clean. // pagehide fires before the snapshot is taken, so first-paint after restore // sees opacity:0 without needing pageshow to catch up. const onPageHide = (e) => { if (!e.persisted) return; c.style.opacity = '0'; hasMovedOnce = false; needsSnap = true; }; // Safety net: also hide on thaw in case pagehide didn't run. // macOS caches the OS-level cursor from the previous site and ignores // cursor:none until the CSS value actually changes — toggling auto→none // forces the OS cursor API to re-run. Two RAFs = one visible paint cycle // with cursor:auto so the OS registers the change before we revert. const onPageShow = (e) => { if (!e.persisted) return; hasMovedOnce = false; needsSnap = true; c.style.opacity = '0'; // Override * { cursor: none !important } on every element so macOS // re-evaluates the OS-level cursor. Setting on documentElement alone // doesn't work — macOS checks the element under the pointer, which is // always a child with its own cursor:none from the * rule. const tmp = document.createElement('style'); tmp.textContent = '* { cursor: auto !important; }'; document.head.appendChild(tmp); requestAnimationFrame(() => requestAnimationFrame(() => tmp.remove())); }; // Fired when cursor enters the document from browser chrome (toolbar, bookmark // dropdowns, scrollbar). Chrome does NOT dispatch mousemove while its native UI // overlays are open, so onMove never fires during that gap. mouseenter gives us // clientX/Y so we can snap the vinyl cursor to the right position immediately. const onDocEnter = (e) => { tx = e.clientX; ty = e.clientY; x = tx; y = ty; c.style.left = x + 'px'; c.style.top = y + 'px'; needsSnap = false; _cursorZoomActive = false; c.classList.remove('hidden'); if (!hasMovedOnce) { hasMovedOnce = true; c.style.opacity = ''; } }; window.addEventListener('mousemove', onMove); window.addEventListener('blur', onBlur); window.addEventListener('pagehide', onPageHide); window.addEventListener('pageshow', onPageShow); document.body.addEventListener('mouseenter', onDocEnter); let raf; const tick = () => { x += (tx - x) * 0.28; y += (ty - y) * 0.28; c.style.left = x + 'px'; c.style.top = y + 'px'; raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => { window.removeEventListener('mousemove', onMove); window.removeEventListener('blur', onBlur); window.removeEventListener('pagehide', onPageHide); window.removeEventListener('pageshow', onPageShow); document.body.removeEventListener('mouseenter', onDocEnter); cancelAnimationFrame(raf); }; }, []); } // Cart thumbnail — handles bag images with corner-sampled background so side // gutters blend seamlessly instead of showing the default --bg-elev colour. function CartThumb({ line, img, onClick }) { const isBag = line.silhouette === 'tote' || line.silhouette === 'carrier'; const [bg, setBg] = useState(null); const imgRef = useRef(null); const sample = (el) => { try { const c = document.createElement('canvas'); c.width = c.height = 1; const ctx = c.getContext('2d'); ctx.drawImage(el, 0, 0, 1, 1, 0, 0, 1, 1); const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data; if (a >= 128) setBg(`rgb(${r},${g},${b})`); } catch (_) {} }; useEffect(() => { if (!isBag || !imgRef.current) return; if (imgRef.current.complete && imgRef.current.naturalWidth > 0) sample(imgRef.current); }, [img]); return (

{img ? {line.name}

{line.name}

sample(e.target) : undefined} style={{ objectFit: isBag ? 'contain' : 'cover' }}/> :

}

); } // expose Object.assign(window, { Icon, Garment, ProductCard, Nav, Footer, NowPlaying, onCursor, useCursor, scrollToId, CartThumb });