Holographic Foil Card Nieuw

<!-- Holographic Foil Card · Bron: SmoothUI · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="hlf"><div class="hlf__card" tabindex="0" aria-label="Ledenpas Sportschool Kralingen"><div class="hlf__foil"></div><div class="hlf__glare"></div><div class="hlf__in"><div class="hlf__head"><span class="hlf__brand">Sportschool<br>Kralingen</span><span class="hlf__chip"></span></div><span class="hlf__tier">Goud · lid sinds 2019</span><div class="hlf__foot"><span class="hlf__name">M. de Boer</span><span class="hlf__no">0412 8823 1907</span></div></div></div></div>
</div>

/* Holographic Foil Card · Bron: SmoothUI · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.hlf{perspective:900px;font-family:'Switzer',system-ui,sans-serif}
.hlf__card{--rx:0deg;--ry:0deg;--mx:50%;--my:50%;position:relative;width:250px;max-width:74vw;aspect-ratio:1.586;border-radius:6px;background:linear-gradient(135deg,#1f1d1b,#0a0a0a);overflow:hidden;transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;box-shadow:0 18px 40px rgba(10,10,10,.28);touch-action:none;outline:none}
.hlf__card:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4px #F5480F}
.hlf__foil{position:absolute;inset:0;background:repeating-linear-gradient(115deg,#ff8a52 0%,#ffd98f 7%,#cdeedd 14%,#bfe0f2 21%,#ffd2b5 28%,#ff8a52 35%);background-size:260% 260%;background-position:var(--mx) var(--my);mix-blend-mode:screen;opacity:.34;-webkit-mask-image:repeating-linear-gradient(45deg,#000 0 1px,rgba(0,0,0,.7) 1px 3px);mask-image:repeating-linear-gradient(45deg,#000 0 1px,rgba(0,0,0,.7) 1px 3px)}
.hlf__glare{position:absolute;inset:0;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.42),rgba(255,255,255,0) 48%);mix-blend-mode:overlay}
.hlf__in{position:absolute;inset:0;padding:14px 16px;display:flex;flex-direction:column;justify-content:space-between;color:#fff}
.hlf__head{display:flex;justify-content:space-between;align-items:flex-start}
.hlf__brand{font-size:15px;font-weight:800;line-height:1.05;letter-spacing:-.01em}
.hlf__chip{width:30px;height:22px;border-radius:3px;background:linear-gradient(135deg,#f6d38c,#b8893a);opacity:.9}
.hlf__tier{font:500 9px/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#ff7a45}
.hlf__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:8px}
.hlf__name{font-size:12px;font-weight:600}
.hlf__no{font:500 10px/1 'JetBrains Mono',monospace;letter-spacing:.06em;opacity:.8}

// Holographic Foil Card · Bron: SmoothUI · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
var w = root.querySelector('.hlf'); if (!w) return;
    var card = w.querySelector('.hlf__card'), stage = root, reduce = matchMedia('(prefers-reduced-motion:reduce)').matches;
    var tx = .5, ty = .5, cx = .5, cy = .5, idle = true, raf = 0, t0 = performance.now(), lastMove = 0;
    function apply() {
      card.style.setProperty('--ry', ((cx - .5) * 26).toFixed(2) + 'deg');
      card.style.setProperty('--rx', ((.5 - cy) * 22).toFixed(2) + 'deg');
      card.style.setProperty('--mx', (cx * 100).toFixed(1) + '%');
      card.style.setProperty('--my', (cy * 100).toFixed(1) + '%');
    }
    function loop(now) {
      if (now - lastMove > 1600) idle = true;
      if (idle) { var t = (now - t0) / 1000; tx = .5 + Math.cos(t * .8) * .32; ty = .5 + Math.sin(t * 1.1) * .26; }
      cx += (tx - cx) * .1; cy += (ty - cy) * .1; apply();
      raf = requestAnimationFrame(loop);
    }
    function mv(e) { var r = card.getBoundingClientRect(); tx = Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)); ty = Math.max(0, Math.min(1, (e.clientY - r.top) / r.height)); idle = false; lastMove = performance.now(); if (reduce) { cx = tx; cy = ty; apply(); } }
    stage.addEventListener('pointermove', mv);
    if (reduce) { cx = .62; cy = .38; apply(); return; }
    var io = 'IntersectionObserver' in window ? new IntersectionObserver(function (es) { if (es[0].isIntersecting) { if (!raf) raf = requestAnimationFrame(loop); } else if (raf) { cancelAnimationFrame(raf); raf = 0; } }) : null;
    if (io) io.observe(w); else raf = requestAnimationFrame(loop);
}
init(document.querySelector('.jouw-container'));