Nocne Art déco — członkostwo w klubie filmowym

<main class="deco-night"><svg class="deco-fan top-fan" viewBox="0 0 420 150" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-width="2"><path d="M210 145V8M210 145 116 24M210 145 44 64M210 145 304 24M210 145 376 64"/><path d="M79 145a131 131 0 0 1 262 0M113 145a97 97 0 0 1 194 0M150 145a60 60 0 0 1 120 0"/></g></svg><header class="deco-header"><span>Kino Kosmos</span><div><i></i><b>Klub nocnych seansów</b><i></i></div><p>Warszawa / od 1927</p></header><section class="deco-frame"><aside class="deco-intro"><p class="deco-kicker">Sezon jesień–zima</p><h1>Dołącz<br>do klubu</h1><p>Premiery po zmroku, odrestaurowane klasyki i rozmowy po ostatnim napisie.</p><dl><div><dt>Seanse</dt><dd>czwartki, 21:30</dd></div><div><dt>Sala</dt><dd>kameralna 2</dd></div><div><dt>Start sezonu</dt><dd>5 listopada</dd></div></dl></aside><div class="deco-form-wrap"><form id="deco-form" novalidate><div class="deco-fields"><div class="field"><label for="deco-name">Imię i nazwisko</label><input id="deco-name" name="name" autocomplete="name" required minlength="2" placeholder="Ada Kowalska"></div><div class="field"><label for="deco-email">E-mail</label><input id="deco-email" name="email" type="email" autocomplete="email" required placeholder="ada@example.com"></div><div class="field wide"><label for="deco-era">Ulubiona epoka kina</label><select id="deco-era" name="era" required><option value="" selected disabled>Wybierz epokę</option><option value="Kino nieme">Kino nieme</option><option value="Złota era Hollywood">Złota era Hollywood</option><option value="Nowa fala">Nowa fala</option><option value="Kino współczesne">Kino współczesne</option></select></div></div><fieldset><legend>Rodzaj członkostwa</legend><div class="deco-radios"><label><input type="radio" name="membership" value="Srebrny ekran" required checked><span><b>Srebrny ekran</b><small>1 seans w miesiącu</small></span></label><label><input type="radio" name="membership" value="Nocna loża"><span><b>Nocna loża</b><small>wszystkie seanse</small></span></label></div></fieldset><div class="deco-actions"><button id="deco-submit" class="primary" type="submit">Zapisz do klubu</button><button class="secondary" type="reset">Wyczyść</button><button type="button" disabled>Loża zamknięta</button></div><p id="deco-status" class="status" role="alert" aria-live="polite"></p></form><section id="deco-success" class="deco-success" tabindex="-1" hidden><div class="deco-ticket"><span>KINO KOSMOS</span><strong>MEMBER / 26</strong><b id="deco-member">Ada Kowalska</b></div><h2>Kurtyna idzie w górę.</h2><p id="deco-summary"></p><button id="deco-again" class="secondary" type="button">Dodaj członka</button></section></div></section><svg class="deco-fan bottom-fan" viewBox="0 0 420 150" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-width="2"><path d="M210 145V8M210 145 116 24M210 145 44 64M210 145 304 24M210 145 376 64"/><path d="M79 145a131 131 0 0 1 262 0M113 145a97 97 0 0 1 194 0M150 145a60 60 0 0 1 120 0"/></g></svg></main>

*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;min-width:320px;min-height:100vh;background:#080f1d;color:#f3ead7;font-family:"Gill Sans","Trebuchet MS",Arial,sans-serif;line-height:1.5}.deco-night{position:relative;width:min(1120px,100%);min-height:100vh;margin:auto;padding:32px 42px 44px;overflow:hidden}.deco-fan{position:absolute;width:420px;color:#d8b66b;opacity:.28;pointer-events:none}.top-fan{top:-52px;right:-72px}.bottom-fan{bottom:-50px;left:-74px;transform:rotate(180deg)}.deco-header{position:relative;z-index:1;text-align:center;color:#d8b66b}.deco-header>span{font:700 clamp(26px,4vw,46px)/1 Georgia,serif;letter-spacing:.08em}.deco-header>div{display:flex;align-items:center;justify-content:center;gap:14px;margin:12px auto 4px;max-width:580px}.deco-header i{display:block;flex:1;height:2px;background:#d8b66b}.deco-header b{font-size:13px;font-weight:600;letter-spacing:.1em}.deco-header p{margin:0;font-size:12px}.deco-frame{position:relative;z-index:1;display:grid;grid-template-columns:.78fr 1.22fr;width:min(100%,970px);margin:32px auto 0;border:1px solid #d8b66b;outline:4px double #d8b66b;outline-offset:8px;background:#0d1729}.deco-frame::before,.deco-frame::after{content:"";position:absolute;width:40px;height:40px;border:2px solid #d8b66b;pointer-events:none}.deco-frame::before{top:10px;left:10px;border-right:0;border-bottom:0}.deco-frame::after{right:10px;bottom:10px;border-left:0;border-top:0}.deco-intro{padding:42px 34px;border-right:1px solid #d8b66b;background:#111d31}.deco-kicker{margin:0 0 26px;color:#d8b66b;font-size:12px;letter-spacing:.1em}.deco-intro h1{margin:0 0 24px;color:#f3ead7;font:700 clamp(44px,6vw,72px)/.9 Georgia,serif;letter-spacing:-.04em}.deco-intro>p:not(.deco-kicker){max-width:290px}.deco-intro dl{margin:32px 0 0;border-top:1px solid #6f6248}.deco-intro dl div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #6f6248}.deco-intro dt{color:#cbbd9d;font-size:12px}.deco-intro dd{margin:0;text-align:right;font-size:13px}.deco-form-wrap{display:grid;align-items:center;min-width:0;padding:42px}.deco-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}.field{min-width:0}.field.wide{grid-column:1/-1}label,legend{color:#e4cc94;font-family:Georgia,serif;font-weight:700}label{display:block;margin-bottom:7px}input,select,button{font:inherit;border-radius:0}input,select{width:100%;min-height:50px;padding:10px 11px;border:1px solid #8d7749;background:#080f1d;color:#f3ead7}input::placeholder{color:#999286}select{cursor:pointer}fieldset{margin:24px 0;padding:0;border:0}legend{margin-bottom:10px}.deco-radios{display:grid;grid-template-columns:1fr 1fr;gap:10px}.deco-radios label{display:flex;align-items:center;min-height:66px;margin:0;padding:9px;border:1px solid #8d7749;cursor:pointer}.deco-radios input{width:21px;height:21px;min-height:0;margin:0 10px 0 0;accent-color:#d8b66b}.deco-radios span{display:block}.deco-radios b,.deco-radios small{display:block}.deco-radios small{margin-top:2px;color:#c1b79f;font-family:"Gill Sans","Trebuchet MS",sans-serif}.deco-actions{display:flex;flex-wrap:wrap;gap:9px}button{min-height:48px;padding:10px 15px;border:1px solid #d8b66b;background:#0d1729;color:#f3ead7;font-weight:700;cursor:pointer}button.primary{background:#d8b66b;color:#101526}button:not(:disabled):hover{outline:2px solid #d8b66b;outline-offset:3px}button.secondary{border-style:double;border-width:4px}button:disabled{cursor:not-allowed;color:#777872;border-color:#555c63}.status{min-height:24px;margin:12px 0 0;color:#ffb7a1;font-weight:700}.deco-success{animation:deco-open .42s ease-out}.deco-ticket{display:grid;grid-template-columns:1fr auto;gap:10px;border:4px double #d8b66b;padding:18px;color:#d8b66b}.deco-ticket span,.deco-ticket strong{font-size:12px;letter-spacing:.08em}.deco-ticket b{grid-column:1/-1;color:#f3ead7;font:700 clamp(26px,4vw,42px)/1 Georgia,serif}.deco-success h2{margin:30px 0 10px;color:#f3ead7;font:700 clamp(36px,5vw,58px)/.95 Georgia,serif}.deco-success p{margin:0 0 22px;color:#d5cab3}input:focus-visible,select:focus-visible,button:focus-visible,.deco-success:focus-visible{outline:3px solid #fff;outline-offset:4px;box-shadow:0 0 0 7px #d8b66b}[aria-invalid=true]{border:3px solid #ffb7a1;background:#291927}[hidden]{display:none!important}@keyframes deco-open{from{transform:scaleY(.82);opacity:0}to{transform:scaleY(1);opacity:1}}@media(max-width:800px){.deco-night{padding:28px 26px 42px}.deco-frame{grid-template-columns:1fr}.deco-intro{border-right:0;border-bottom:1px solid #d8b66b;padding:32px}.deco-intro dl{max-width:500px}.deco-form-wrap{padding:34px 32px}}@media(max-width:500px){.deco-night{padding:22px 14px 36px}.deco-header>span{font-size:29px}.deco-header b{font-size:11px}.deco-frame{margin-top:28px;outline-offset:5px}.deco-intro{padding:28px 20px}.deco-intro h1{font-size:50px}.deco-form-wrap{padding:28px 18px}.deco-fields{grid-template-columns:1fr}.field.wide{grid-column:auto}.deco-radios{grid-template-columns:1fr}.deco-actions button{width:100%}.deco-fan{width:300px}.deco-ticket{grid-template-columns:1fr}.deco-ticket strong,.deco-ticket b{grid-column:1}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

$(function(){const $form=$('#deco-form');const form=$form[0];const $status=$('#deco-status');const $success=$('#deco-success');function clearErrors(){$form.find('[aria-invalid=true]').attr('aria-invalid','false').removeAttr('aria-describedby');$status.text('')}function validate(){clearErrors();const invalid=form.querySelector(':invalid');if(!invalid)return true;$(invalid).attr({'aria-invalid':'true','aria-describedby':'deco-status'}).trigger('focus');$status.text('Uzupełnij zaznaczone pole przed zapisaniem do klubu.');return false}$form.on('submit',function(event){event.preventDefault();if(!validate())return;const name=String($('#deco-name').val()).trim();const era=$('#deco-era').val();const membership=$form.find('input[name=membership]:checked').val();$('#deco-member').text(name);$('#deco-summary').text(membership+' · '+era+'. Pierwszy repertuar otrzymasz na podany e-mail.');$form.prop('hidden',true);$success.prop('hidden',false).trigger('focus')});$form.on('input change','input,select',function(){$(this).attr('aria-invalid','false').removeAttr('aria-describedby');$status.text('')});$form.on('reset',function(){window.setTimeout(clearErrors,0)});$('#deco-again').on('click',function(){form.reset();$success.prop('hidden',true);$form.prop('hidden',false);window.setTimeout(function(){$('#deco-name').trigger('focus')},0)});const activate=event=>{event.preventDefault();$form.triggerHandler('submit')};$('#deco-submit').on('click',activate);$form.on('keydown','input:not([type=radio]):not([type=range])',event=>{if(event.key==='Enter')activate(event)})});