NOCTA — nocny klub i ruchomy plakat

<header><a href="#start" class="nocta-mark">N/</a><nav aria-label="Nawigacja"><a href="#manifest">Miejsce</a><a href="#lineup">Program</a><a href="#night">Twój wieczór</a></nav><span>AFTER DARK / BEFORE DAWN</span></header><main><section class="night-cover" id="start"><img src="https://codepen.pl/media/codepen/immersive-2026/nocta.jpg" alt="Sylwetki publiczności w industrialnym klubie oświetlonym niebieskim i czerwonym światłem" width="1536" height="1024" fetchpriority="high"><div class="night-shade"></div><p class="night-top">Dźwięk potrzebuje przestrzeni.</p><h1>NOCTA</h1><div class="night-bottom"><p>Elektronika.<br>Beton. Bliskość.</p><a href="#lineup">Sprawdź program <span aria-hidden="true">↗</span></a></div><div class="scanline" aria-hidden="true"></div></section><section class="manifest" id="manifest"><span>Przestrzeń niezależnego dźwięku</span><h2>WEJDŹ.<br><em>POCZUJ.</em><br>ZOSTAŃ.</h2><div><p>Nie potrzebujesz pierwszego rzędu. Tutaj każdy punkt sali jest dobrym miejscem, żeby złapać rytm.</p><p>Surowe ściany. Selekcja bez pośpiechu. Noc, która rozwija się razem z publicznością.</p></div></section><section class="lineup" id="lineup"><div class="lineup-header"><h2>NA SCENIE</h2><div role="group" aria-label="Wybierz scenę"><button data-stage="main" aria-pressed="true">Main room</button><button data-stage="ambient" aria-pressed="false">Listening room</button></div></div><div id="acts" aria-live="polite"><article><time>22:00</time><h3>LOW SIGNAL</h3><span>Warm-up / dub</span></article><article><time>00:00</time><h3>PHASE SHIFT</h3><span>Live / electronica</span></article><article><time>02:00</time><h3>SOFT ERROR</h3><span>Closing / techno</span></article></div><p id="stage-status" role="status">Program: Main room</p></section><section class="night-plan" id="night"><div class="ticket-title"><span>Twój wieczór</span><h2>ILE WAS<br>BĘDZIE?</h2></div><div class="ticket"><span class="ticket-label">NOCTA / DEMO PASS</span><div class="counter" role="group" aria-label="Liczba osób"><button id="less" aria-label="Odejmij osobę">−</button><output id="people" aria-live="polite">1</output><button id="more" aria-label="Dodaj osobę">+</button></div><div class="ticket-total"><span>Przykładowa suma</span><strong id="ticket-price">80 zł</strong></div><p id="ticket-status" role="status">1 osoba / Main room</p><p class="demo-note">Koncepcja interfejsu. Bez sprzedaży biletów i rezerwacji.</p><div class="barcode" aria-hidden="true"></div></div></section></main><footer><strong>N/</strong><span class="credit">Fikcyjny klub i program. Fotografia wygenerowana przez AI.</span><a href="#start">Do góry ↑</a><button type="button" class="motion-toggle" aria-pressed="false">Animacje</button></footer>

*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}h1,h2,h3,p,figure{margin:0}button,input,select{font:inherit}button,a,input,summary{touch-action:manipulation}button{cursor:pointer;min-height:44px}a{color:inherit;text-underline-offset:5px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--focus,currentColor);outline-offset:5px}img{display:block;max-width:100%}p{line-height:1.6}button,input,select{border-radius:0}[hidden]{display:none!important}section{scroll-margin-top:25px}.credit{font-size:11px;line-height:1.5}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{background:#080809;color:#f6f5f1;font-family:Arial,Helvetica,sans-serif;--focus:#9cb7ff}header{display:flex;gap:30px;align-items:center;padding:18px 4%;background:#080809;border-bottom:1px solid #414146}.nocta-mark{font-size:30px;font-weight:900;text-decoration:none}nav{display:flex;gap:25px;font:12px monospace}header>span{margin-left:auto;font:10px monospace;color:#bcc5db}.night-cover{height:calc(100svh - 75px);min-height:540px;position:relative;overflow:hidden;padding:30px 4%;display:flex;flex-direction:column;justify-content:space-between}.night-cover>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transform:scale(var(--night-zoom,1.03));will-change:transform}.night-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.05) 45%,rgba(0,0,0,.85))}.night-top,.night-bottom,.night-cover h1{position:relative;z-index:1}.night-top{font:12px monospace}.night-cover h1{font-size:clamp(105px,22.7vw,350px);font-weight:900;letter-spacing:-.08em;line-height:.72;transform:translateX(var(--night-x,0px));color:#fff;text-align:center}.night-bottom{display:flex;justify-content:space-between;align-items:end;gap:20px}.night-bottom p{font-size:18px;line-height:1.2}.night-bottom a{display:flex;gap:35px;align-items:center;background:#f6f5f1;color:#080809;padding:18px 22px;font:13px monospace;text-decoration:none}.night-bottom a span{font-size:25px}.scanline{position:absolute;left:0;right:0;top:var(--scan-top,65%);height:1px;background:#bfd2ff;opacity:.6;pointer-events:none}.manifest{padding:80px 7%;position:relative;overflow:hidden}.manifest>span{font:12px monospace;display:block;margin-bottom:40px}.manifest h2{font-size:clamp(80px,14vw,210px);line-height:.85;letter-spacing:-.07em;font-weight:900}.manifest h2 em{font-style:normal;color:#9cb7ff;display:inline-block;transform:translateX(var(--word-x,0px));will-change:transform}.manifest>div{max-width:450px;margin:50px 0 0 auto;display:grid;gap:20px;font-size:18px;color:#d4d6dd}.lineup{padding:65px 5%;background:#9cb7ff;color:#080809}.lineup-header{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-bottom:30px}.lineup h2{font-size:clamp(36px,5vw,68px);letter-spacing:-3px}.lineup [role="group"]{display:flex;gap:10px}.lineup button{border:1px solid #080809;color:#080809;background:transparent;padding:12px 20px;font:12px monospace}.lineup button[aria-pressed="true"]{background:#080809;color:#fff}#acts article{display:grid;grid-template-columns:80px 1fr 180px;gap:25px;align-items:center;border-top:1px solid #17203a;padding:28px 0}#acts time,#acts article>span{font:12px monospace}#acts h3{font-size:clamp(26px,5vw,70px);letter-spacing:-.06em;line-height:1}#stage-status{font:11px monospace;margin-top:20px}.night-plan{padding:80px 7%;display:grid;grid-template-columns:1fr 1fr;gap:12%;align-items:center}.ticket-title>span{font:12px monospace}.ticket-title h2{font-size:clamp(48px,7vw,100px);letter-spacing:-.06em;line-height:.95;margin-top:25px}.ticket{background:#f6f5f1;color:#080809;padding:28px;transform:rotate(-2deg)}.ticket-label{font:12px monospace;border-bottom:1px dashed #080809;display:block;padding-bottom:20px}.counter{display:flex;align-items:center;justify-content:space-between;margin:30px 0}.counter button{width:52px;min-height:52px;background:none;border:1px solid #080809;font-size:26px}.counter button:disabled{opacity:.35;cursor:default}.counter output{font-size:75px;font-weight:900;line-height:1}.ticket-total{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid #080809;padding-top:22px}.ticket-total span{font:11px monospace}.ticket-total strong{font-size:30px}#ticket-status{font:12px monospace;margin-top:22px}.demo-note{font:11px/1.5 monospace;margin-top:18px}.barcode{height:40px;background:repeating-linear-gradient(90deg,#080809 0 2px,transparent 2px 5px,#080809 5px 6px,transparent 6px 10px);margin-top:25px}footer{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:25px 5%;border-top:1px solid #414146;font:12px monospace}footer strong{font-size:32px}@media(max-width:650px){header{gap:20px}header>span{display:none}nav{font-size:10px;gap:16px}.night-cover{min-height:620px;padding:28px 6%}.night-cover h1{font-size:23vw}.night-cover>img{object-position:60% center}.night-bottom{align-items:start;flex-direction:column}.night-bottom p{font-size:23px}.night-bottom a{width:100%;justify-content:space-between}.manifest{padding:60px 7%}.manifest h2{font-size:22vw}.manifest>div{font-size:16px}.lineup{padding:50px 7%}.lineup-header{display:block}.lineup h2{font-size:44px;margin-bottom:25px}.lineup button{padding:12px}.lineup [role="group"]{gap:8px}#acts article{grid-template-columns:50px 1fr;gap:15px}#acts h3{font-size:31px}#acts article>span{grid-column:2}.night-plan{grid-template-columns:1fr;gap:45px;padding:60px 8%}.ticket-title h2{font-size:66px}.ticket{padding:22px}footer{flex-wrap:wrap}.credit{max-width:30ch}}
footer{flex-wrap:wrap}.motion-toggle{background:transparent;border:1px solid currentColor;color:inherit;font:11px monospace;padding:10px 14px;min-height:44px}body.motion-off .night-cover>img,body.motion-off .night-cover h1,body.motion-off .manifest h2 em{transform:none!important}

$(function(){
const reduce=window.matchMedia('(prefers-reduced-motion: reduce)');let motionChoice=null;const motionOff=()=>motionChoice===null?reduce.matches:!motionChoice;function syncMotion(){document.body.classList.toggle('motion-off',motionOff());$('.motion-toggle').attr('aria-pressed',String(!motionOff())).text(motionOff()?'Włącz animacje':'Wyłącz animacje');}$('.motion-toggle').on('click',function(){motionChoice=motionOff();syncMotion();requestPaint();});syncMotion();let queued=false;function paint(){queued=false;update();}function requestPaint(){if(!queued){queued=true;requestAnimationFrame(paint);}}window.addEventListener('scroll',requestPaint,{passive:true});window.addEventListener('resize',requestPaint);reduce.addEventListener('change',function(){syncMotion();requestPaint();});function update(){const r=document.querySelector('.night-cover').getBoundingClientRect();const p=Math.max(0,Math.min(1,-r.top/Math.max(1,r.height)));document.querySelector('.night-cover').style.setProperty('--night-zoom',motionOff()?1:1.03+p*.25);document.querySelector('.night-cover').style.setProperty('--night-x',motionOff()?'0px':(-p*70)+'px');document.querySelector('.night-cover').style.setProperty('--scan-top',(65-p*40)+'%');const m=document.querySelector('.manifest').getBoundingClientRect();document.querySelector('.manifest').style.setProperty('--word-x',motionOff()?'0px':Math.max(0,Math.min(90,(window.innerHeight-m.top)*.1))+'px');}const acts={main:[['22:00','LOW SIGNAL','Warm-up / dub'],['00:00','PHASE SHIFT','Live / electronica'],['02:00','SOFT ERROR','Closing / techno']],ambient:[['21:00','SLOW CURRENT','Field recordings'],['23:00','ROOM TONE','Live / ambient'],['01:00','AFTER IMAGE','Deep listening']]};let people=1,stage='main';function total(){$('#people').text(people);$('#ticket-price').text(people*80+' zł');$('#ticket-status').text(people+' '+(people===1?'osoba':people<5?'osoby':'osób')+' / '+(stage==='main'?'Main room':'Listening room'));$('#less').prop('disabled',people===1);$('#more').prop('disabled',people===6);}$('[data-stage]').on('click',function(){stage=$(this).attr('data-stage');$('[data-stage]').attr('aria-pressed','false');$(this).attr('aria-pressed','true');$('#acts article').each(function(i){$(this).find('time').text(acts[stage][i][0]);$(this).find('h3').text(acts[stage][i][1]);$(this).find('span').text(acts[stage][i][2]);});$('#stage-status').text('Program: '+(stage==='main'?'Main room':'Listening room'));total();});$('#more').on('click',function(){people=Math.min(6,people+1);total();});$('#less').on('click',function(){people=Math.max(1,people-1);total();});total();update();
});