TAKT — festiwal dźwięku

<header id="top"><a class="brand" href="#top">TAKT—</a><nav aria-label="Nawigacja"><a href="#kolekcja">Program</a><a href="#o-nas">Miejsce</a></nav></header><main><section class="music-hero"><div class="music-type" data-reveal><p class="eyebrow">Spotkania z nowym dźwiękiem</p><h1>SŁUCHAJ<br>INACZEJ.</h1><div class="music-sub"><p>Elektronika.<br>Eksperyment.<br>Wspólna przestrzeń.</p><button class="button" type="button" data-beat aria-pressed="false">Włącz rytm</button></div><p id="selection-status" role="status">Rytm zatrzymany</p></div><div class="vinyl" data-reveal><svg viewBox="0 0 400 440" role="img" aria-label="Płyta winylowa z różową etykietą" xmlns="http://www.w3.org/2000/svg"><rect width="400" height="440" fill="#a18bd0"></rect><circle cx="200" cy="220" r="175" fill="#1a1627"></circle><circle cx="200" cy="220" r="55" stroke="#565064" stroke-width="1" fill="none"></circle><circle cx="200" cy="220" r="62" stroke="#565064" stroke-width="1" fill="none"></circle><circle cx="200" cy="220" r="69" stroke="#565064" stroke-width="1" fill="none"></circle><circle cx="200" cy="220" r="76" stroke="#565064" stroke-width="1" fill="none"></circle><circle cx="200" cy="220" r="83" stroke="#565064" stroke-width="1" fill="none"></circle><circle cx="200" cy="220" r="90" stroke="#565064" stroke-width="1" fill="none"></circle><circle cx="200" cy="220" r="97" stroke="#565064" stroke-width="1" fill="none"></circle><circle cx="200" cy="220" r="104" stroke="#565064" stroke-width="1" fill="none"></circle><circle cx="200" cy="220" r="111" stroke="#565064" stroke-width="1" fill="none"></circle><circle cx="200" cy="220" r="118" stroke="#565064" stroke-width="1" fill="none"></circle><circle cx="200" cy="220" r="125" stroke="#565064" stroke-width="1" fill="none"></circle><circle cx="200" cy="220" r="132" stroke="#565064" stroke-width="1" fill="none"></circle><circle cx="200" cy="220" r="139" stroke="#565064" stroke-width="1" fill="none"></circle><circle cx="200" cy="220" r="146" stroke="#565064" stroke-width="1" fill="none"></circle><circle cx="200" cy="220" r="153" stroke="#565064" stroke-width="1" fill="none"></circle><circle cx="200" cy="220" r="160" stroke="#565064" stroke-width="1" fill="none"></circle><circle cx="200" cy="220" r="59" fill="#fa6a9d"></circle><circle cx="200" cy="220" r="8" fill="#221932"></circle><path d="M80 135L164 187M240 260L320 325" stroke="#eee0fa" opacity=".25" stroke-width="30"></path></svg></div><div class="beat-bars" aria-hidden="true"><i style="--n:0"></i><i style="--n:1"></i><i style="--n:2"></i><i style="--n:3"></i><i style="--n:4"></i><i style="--n:5"></i><i style="--n:6"></i><i style="--n:7"></i><i style="--n:8"></i><i style="--n:9"></i><i style="--n:10"></i><i style="--n:11"></i><i style="--n:12"></i><i style="--n:13"></i><i style="--n:14"></i><i style="--n:15"></i></div></section><section class="section" id="kolekcja"><div class="section-head"><h2>Program</h2><div class="day-tabs" role="group" aria-label="Dzień programu"><button type="button" data-day-filter="all" aria-pressed="true">Całość</button><button type="button" data-day-filter="piatek" aria-pressed="false">Piątek</button><button type="button" data-day-filter="sobota" aria-pressed="false">Sobota</button></div></div><ul class="lineup"><li data-day="piatek"><time>18:00</time><b>NOCNY PRĄD</b><span>live electronics</span></li><li data-day="piatek"><time>20:00</time><b>MIĘKKI SZUM</b><span>ambient / live</span></li><li data-day="sobota"><time>17:00</time><b>STUDIO ECHO</b><span>experimental pop</span></li><li data-day="sobota"><time>21:00</time><b>PASMO</b><span>club / dj set</span></li></ul><p class="status" id="lineup-status" role="status">Występy: 4</p></section><section class="section split" id="o-nas"><h2>Daj się<br>zaskoczyć.</h2><div><p>Siądź bliżej sceny. Posłuchaj artysty, którego jeszcze nie znasz. Pozostań chwilę po ostatnim utworze.</p><div class="music-info"><button class="button" type="button" data-open="O tej edycji" data-description="TAKT to koncepcja kameralnego festiwalu. Program pokazuje przykładowych wykonawców i układ dwóch dni wydarzenia.">O koncepcji</button></div></div></section></main><footer><span>TAKT / kolekcja koncepcyjna</span><a href="#top">Na górę</a></footer><dialog aria-labelledby="dialog-title" aria-describedby="dialog-description"><h2 id="dialog-title">Szczegóły</h2><p id="dialog-description"></p><form method="dialog"><button class="button" type="submit">Zamknij</button></form></dialog>

*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 Arial,Helvetica,sans-serif}button,input,select{font:inherit;border-radius:0}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-underline-offset:5px}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--focus,var(--ink));outline-offset:5px}button:disabled{cursor:default;opacity:.5}h1,h2,h3,p,figure{margin:0}h1,h2{line-height:1;letter-spacing:-.055em}h1{font-size:clamp(54px,8vw,120px)}h2{font-size:clamp(34px,5vw,70px)}h3{font-size:22px;line-height:1.15}p{max-width:60ch}svg{display:block;width:100%;height:auto}header{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 4vw;border-bottom:1px solid var(--line)}.brand{font-size:24px;font-weight:800;text-decoration:none;letter-spacing:-1px}nav{display:flex;gap:24px;flex-wrap:wrap}nav a{min-height:44px;display:inline-flex;align-items:center;text-decoration:none;font-size:14px}nav a:hover{text-decoration:underline}.eyebrow{font:12px/1.4 monospace;letter-spacing:.08em;text-transform:uppercase}.button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 22px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);text-decoration:none}.button:hover{background:var(--paper);color:var(--ink)}.outline{background:transparent;color:var(--ink)}.section{padding:70px 4vw;border-top:1px solid var(--line)}.section>p{margin:22px 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:32px}.section-head p{max-width:36ch}.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.arrow{width:48px;height:48px;background:transparent;border:1px solid var(--ink);color:var(--ink);font-size:24px}.arrow:hover{background:var(--ink);color:var(--paper)}.muted{color:var(--muted)}.status{font-size:14px}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}footer{display:flex;justify-content:space-between;gap:20px;padding:28px 4vw;border-top:1px solid var(--line);font-size:13px}dialog{padding:32px;border:1px solid var(--ink);max-width:540px;width:calc(100% - 40px);background:var(--paper);color:var(--ink)}dialog::backdrop{background:#1119}dialog h2{font-size:36px;letter-spacing:-.03em}dialog p{margin:24px 0}dialog form{display:flex;justify-content:end}[hidden]{display:none!important}.split{display:grid;grid-template-columns:1fr 1fr;gap:40px}.list{list-style:none;padding:0;margin:0}.list li{padding:22px 0;border-bottom:1px solid var(--line)}.list li b{display:block;font-size:20px}.list li span{color:var(--muted)}@media(max-width:640px){header{padding:14px 5vw;gap:10px;flex-wrap:wrap}nav{gap:18px}.brand{font-size:21px}h1{font-size:clamp(46px,13vw,80px)}.section{padding:44px 5vw}.section-head{align-items:start;flex-direction:column;gap:16px}.split{grid-template-columns:1fr}.button{padding:10px 16px}.section-head h2{font-size:42px}footer{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{--paper:#eee6f4;--ink:#261439;--line:#a58bb8;--muted:#6d507e}.brand{font-family:Impact,sans-serif;font-size:34px}.music-hero{position:relative;display:grid;grid-template-columns:1.25fr 1fr;background:#a18bd0;color:#160d26;padding:44px 4vw 80px;overflow:hidden;min-height:590px}.music-type{position:relative;z-index:2}.music-type h1{font-family:Impact,'Arial Narrow',sans-serif;font-size:clamp(78px,10.5vw,155px);line-height:.9;letter-spacing:-.035em;margin:28px 0}.music-sub{display:flex;gap:30px;align-items:end}.music-sub .button{background:#261439;color:#fff;border-color:#261439}.music-type #selection-status{margin-top:20px;font:12px monospace}.vinyl{align-self:center;transform:rotate(-15deg)}.vinyl svg{max-height:510px}.beat-bars{position:absolute;bottom:0;left:0;right:0;height:55px;display:flex;align-items:end;gap:10px;padding:0 4vw}.beat-bars i{height:calc(15px + mod(var(--n),4)*9px);min-height:18px;flex:1;background:#261439;transform-origin:bottom}.beating .beat-bars i{animation:beat .7s calc(var(--n)*-.09s) ease-in-out infinite alternate}.beating .vinyl svg{animation:record 12s linear infinite}@keyframes beat{to{transform:scaleY(.25)}}@keyframes record{to{transform:rotate(360deg)}}.day-tabs{display:flex;gap:8px}.day-tabs button{border:1px solid var(--ink);color:var(--ink);background:transparent;min-height:44px;padding:8px 16px}.day-tabs button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.lineup{list-style:none;padding:0;margin:0}.lineup li{display:grid;grid-template-columns:100px 1fr 180px;align-items:center;gap:24px;padding:28px 0;border-top:1px solid var(--ink)}.lineup b{font-size:clamp(25px,3vw,44px);letter-spacing:-.03em}.lineup time,.lineup span{font-family:monospace}.music-info{margin-top:24px}.lineup+.status{margin-top:20px}@media(max-width:640px){.music-hero{grid-template-columns:1fr;padding:30px 5vw 65px}.music-type h1{font-size:19vw}.vinyl{max-width:340px;margin:25px auto 0}.music-sub{align-items:start;gap:15px;justify-content:space-between}.lineup li{grid-template-columns:64px 1fr;gap:12px}.lineup span{grid-column:2}.lineup b{font-size:26px}.day-tabs{flex-wrap:wrap}}

const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;
const dialog = document.querySelector('dialog');
$('[data-open]').on('click', function () {
  $('#dialog-title').text($(this).attr('data-open'));
  $('#dialog-description').text($(this).attr('data-description'));
  dialog.showModal();
});
if (!reduced) document.querySelectorAll('[data-reveal]').forEach((el, i) => el.animate([{opacity:0,transform:'translateY(24px)'},{opacity:1,transform:'translateY(0)'}],{duration:650,delay:i*70,easing:'cubic-bezier(.2,.7,.2,1)'}));

let playing=false;$('[data-beat]').on('click',function(){playing=!playing;document.body.classList.toggle('beating',playing);$(this).attr('aria-pressed',String(playing)).text(playing?'Zatrzymaj rytm':'Włącz rytm');$('#selection-status').text(playing?(reduced?'Rytm wybrany — animacja ograniczona':'Rytm włączony'):'Rytm zatrzymany');});$('[data-day-filter]').on('click',function(){let day=this.dataset.dayFilter,count=0;$('[data-day-filter]').attr('aria-pressed','false');$(this).attr('aria-pressed','true');$('.lineup [data-day]').each(function(){this.hidden=day!=='all'&&this.dataset.day!==day;if(!this.hidden)count++;});$('#lineup-status').text('Występy: '+count);});