Pełnoekranowy indeks programu cyrkowego

<main class="circus-page" id="circus-home" data-nav-kind="desktop">
  <header class="circus-header">
    <nav aria-label="Nawigacja Cyrku Równowaga"><ul><li><a class="circus-logo" href="#circus-home" aria-current="page">CYRK RÓWNOWAGA</a></li><li><button id="circus-open" type="button" aria-expanded="false" aria-controls="circus-overlay">Menu</button></li><li><a href="#circus-tickets-target">Bilety</a></li></ul></nav>
  </header>
  <section class="circus-hero" aria-labelledby="circus-title"><p>NOWY PROGRAM / 18–27 PAŹDZIERNIKA</p><h1 id="circus-title">Ruch bez<br>siatki.</h1><div class="circus-mark" aria-hidden="true"><i></i><i></i><i></i></div></section>
  <p id="circus-page-status" class="circus-page-status" role="status" aria-live="polite">Program jest gotowy do przeglądania.</p>
  <section class="circus-targets" aria-label="Cele odnośników"><i id="circus-program-target"></i><i id="circus-artists-target"></i><i id="circus-workshops-target"></i><i id="circus-visit-target"></i><i id="circus-tickets-target"></i><i id="circus-contact-target"></i></section>
  <section id="circus-overlay" class="circus-overlay" hidden aria-label="Pełny indeks strony">
    <div class="circus-overlay-head"><span>INDEKS STRONY</span><button id="circus-close" type="button">Zamknij ×</button></div>
    <div class="circus-overlay-grid">
      <nav aria-label="Pełna nawigacja programu"><ul class="circus-links"><li><a data-circus-title="Program sezonu" data-circus-copy="Daty i godziny wszystkich spektakli." href="#circus-program-target" aria-current="page"><span>01</span>Program</a></li><li><a data-circus-title="Artyści" data-circus-copy="Poznaj osoby występujące w tegorocznym programie." href="#circus-artists-target"><span>02</span>Artyści</a></li><li><a id="circus-workshops" data-circus-title="Warsztaty ruchowe" data-circus-copy="Zajęcia dla młodzieży i dorosłych, także bez doświadczenia." href="#circus-workshops-target"><span>03</span>Warsztaty</a></li><li><a data-circus-title="Zaplanuj wizytę" data-circus-copy="Dojazd, dostępność i informacje dla publiczności." href="#circus-visit-target"><span>04</span>Wizyta</a></li><li><a data-circus-title="Bilety" data-circus-copy="Ceny, rezerwacje grupowe i zasady zwrotów." href="#circus-tickets-target"><span>05</span>Bilety</a></li><li><a data-circus-title="Kontakt" data-circus-copy="Kasa, biuro i współpraca programowa." href="#circus-contact-target"><span>06</span>Kontakt</a></li></ul></nav>
      <aside><p>DZISIAJ / DUŻY NAMIOT / 19:30</p><h2 id="circus-preview-title">Program sezonu</h2><p id="circus-preview-copy">Daty i godziny wszystkich spektakli.</p><strong>Najbliżej: „Punkt ciężkości”</strong><p id="circus-status" role="status" aria-live="polite">Wybierz dział programu.</p></aside>
    </div>
  </section>
</main>

*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;min-width:320px;min-height:100vh;overflow-x:hidden;background:#f3ead8;color:#26182e;font:16px/1.45 Arial,sans-serif}body.circus-locked{overflow:hidden}.circus-header{border-bottom:2px solid #26182e}.circus-header nav{max-width:1200px;margin:auto}.circus-header ul{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:0;margin:0;padding:0;list-style:none}.circus-header li{border-left:1px solid #8d7f89}.circus-header li:first-child{border-left:0}.circus-header a,.circus-header button{display:flex;align-items:center;min-height:62px;padding:10px 20px;border:0;border-radius:0;background:transparent;color:#26182e;text-decoration:none;font-weight:900}.circus-header button{cursor:pointer}.circus-header a:hover,.circus-header button:hover{background:#f07c64}.circus-logo{font:900 21px "Arial Narrow",Arial,sans-serif;letter-spacing:.08em}.circus-hero{position:relative;min-height:590px;padding:58px max(22px,calc((100vw - 1120px)/2));overflow:hidden;background:#26182e;color:#f3ead8}.circus-hero>p{margin:0;color:#b9d69a;font:12px "Courier New",monospace}.circus-hero h1{position:relative;z-index:2;margin:58px 0 0;font:900 clamp(74px,13vw,170px)/.7 "Arial Narrow",Arial,sans-serif;letter-spacing:-.075em}.circus-mark{position:absolute;right:7%;top:18%;width:240px;height:340px;border:3px solid #f3ead8;transform:rotate(7deg)}.circus-mark i{position:absolute;display:block;background:#f07c64}.circus-mark i:nth-child(1){left:20%;top:15%;width:60%;height:9px;transform:rotate(22deg)}.circus-mark i:nth-child(2){left:47%;top:22%;width:9px;height:58%;transform:rotate(-17deg)}.circus-mark i:nth-child(3){left:12%;bottom:16%;width:76%;height:9px;transform:rotate(-10deg);background:#b9d69a}.circus-page-status{min-height:50px;margin:0;padding:14px max(22px,calc((100vw - 1120px)/2));border-bottom:1px solid #8d7f89;font-weight:700}.circus-targets{display:none}.circus-overlay{position:fixed;z-index:20;inset:0;overflow:auto;background:#26182e;color:#f3ead8}.circus-overlay-head{position:sticky;z-index:2;top:0;display:flex;justify-content:space-between;align-items:center;min-height:66px;padding:8px 24px;border-bottom:1px solid #887790;background:#26182e}.circus-overlay-head span{font:12px "Courier New",monospace}.circus-overlay button{min-height:48px;padding:8px 14px;border:1px solid #f3ead8;border-radius:0;background:transparent;color:#f3ead8;font-weight:800;cursor:pointer}.circus-overlay-grid{display:grid;grid-template-columns:1.25fr .75fr;min-height:calc(100dvh - 66px)}.circus-overlay nav{border-right:1px solid #887790}.circus-links{margin:0;padding:0;list-style:none}.circus-links a{display:grid;grid-template-columns:58px 1fr;align-items:center;min-height:82px;padding:12px 26px;border-bottom:1px solid #887790;color:#f3ead8;text-decoration:none;font:900 clamp(34px,5vw,68px)/1 "Arial Narrow",Arial,sans-serif}.circus-links a span{font:12px "Courier New",monospace;color:#b9d69a}.circus-links a:hover,.circus-links a.is-active{background:#f07c64;color:#26182e}.circus-links a:hover span,.circus-links a.is-active span{color:#26182e}.circus-overlay aside{align-self:start;position:sticky;top:92px;padding:34px}.circus-overlay aside>p:first-child{margin:0;color:#b9d69a;font:12px "Courier New",monospace}.circus-overlay h2{margin:50px 0 18px;font:italic 48px/.92 Georgia,serif}.circus-overlay aside strong{display:block;margin-top:45px;padding-top:15px;border-top:6px solid #f07c64}.circus-overlay #circus-status{min-height:48px;margin-top:20px;color:#b9d69a}.circus-page a:focus-visible,.circus-page button:focus-visible{outline:4px solid #b9d69a;outline-offset:-4px}@media(max-width:720px){.circus-header a,.circus-header button{padding:8px 11px;font-size:13px}.circus-logo{font-size:16px}.circus-hero{min-height:500px}.circus-hero h1{font-size:74px}.circus-mark{right:-85px;opacity:.65}.circus-overlay-grid{grid-template-columns:1fr}.circus-overlay nav{border-right:0}.circus-links a{min-height:66px;font-size:38px}.circus-overlay aside{position:static;padding:27px}.circus-overlay h2{margin-top:24px}.circus-overlay-head{padding:8px 14px}}@media(max-width:390px){.circus-header ul{grid-template-columns:1fr auto}.circus-header li:last-child{display:none}.circus-links a{grid-template-columns:38px 1fr;padding:10px 15px;font-size:33px}.circus-overlay h2{font-size:38px}}@media(max-height:400px){.circus-links a{min-height:56px;font-size:30px}.circus-overlay h2{margin-top:18px}.circus-overlay aside{padding-top:20px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

$(function(){const overlay=$('#circus-overlay')[0],opener=$('#circus-open')[0],$links=$('.circus-links a');function focusable(){return $(overlay).find('a,button').filter(':visible').toArray()}function open(){$('#circus-overlay').prop('hidden',false);$('body').addClass('circus-locked');$(opener).attr('aria-expanded','true');$links.first().trigger('focus')}function close(){$('#circus-overlay').prop('hidden',true);$('body').removeClass('circus-locked');$(opener).attr('aria-expanded','false');opener.focus()}$('#circus-open').on('click',open);$('#circus-close').on('click',close);$('.circus-header nav a').on('click',function(){$(this).closest('nav').find('a[aria-current]').removeAttr('aria-current');$(this).attr('aria-current','page');$('#circus-page-status').text('Wybrano: '+$(this).text()+'.')});$links.on('click',function(event){event.preventDefault();$links.removeClass('is-active').removeAttr('aria-current');$(this).addClass('is-active').attr('aria-current','page');$('#circus-preview-title').text($(this).data('circus-title'));$('#circus-preview-copy').text($(this).data('circus-copy'));$('#circus-status').text('Wybrano: '+$(this).data('circus-title')+'.')});$(overlay).on('keydown',function(event){if(event.key==='Escape'){event.preventDefault();close();return}if(event.key!=='Tab')return;const list=focusable(),first=list[0],last=list[list.length-1];if(event.shiftKey&&document.activeElement===first){event.preventDefault();last.focus()}else if(!event.shiftKey&&document.activeElement===last){event.preventDefault();first.focus()}});$('nav a[href^="#"]').on('click',function(event){event.preventDefault();const nav=$(this).closest('nav');nav.find('[aria-current]').removeAttr('aria-current');$(this).attr('aria-current','page')});});