Dwukolorowy druk riso — zgłoszenie do zina

<main class="riso-sheet"><svg class="riso-dots" viewBox="0 0 120 520" aria-hidden="true"><defs><pattern id="riso-pattern" width="18" height="18" patternUnits="userSpaceOnUse"><circle cx="4" cy="4" r="3" fill="#ef493f"/><circle cx="13" cy="13" r="2" fill="#214b9b"/></pattern></defs><rect width="120" height="520" fill="url(#riso-pattern)"/></svg><header class="riso-header"><div><span>OTWARTY NABÓR / NUMER 08</span><h1>PRZEŚLIJ<br>SWOJĄ<br>HISTORIĘ</h1></div><p>Zin „Na marginesie” zbiera krótkie teksty, ilustracje i fotografie o mieście po godzinach.</p></header><section class="riso-content"><aside><p class="issue">Nakład 300 egzemplarzy</p><blockquote>Nie szukamy gładkich odpowiedzi. Szukamy rzeczy, które zostają pod paznokciem.</blockquote><dl><div><dt>Termin</dt><dd>30 listopada</dd></div><div><dt>Objętość</dt><dd>do 6 stron</dd></div><div><dt>Druk</dt><dd>2 kolory</dd></div></dl></aside><form id="riso-form" novalidate><div class="riso-fields"><div class="field"><label for="riso-name"><b>01</b> Podpis autora</label><input id="riso-name" name="name" autocomplete="name" required minlength="2" placeholder="Imię, pseudonim lub kolektyw"></div><div class="field"><label for="riso-email"><b>02</b> E-mail kontaktowy</label><input id="riso-email" name="email" type="email" autocomplete="email" required placeholder="autor@example.com"></div><div class="field wide"><label for="riso-section"><b>03</b> Dział numeru</label><select id="riso-section" name="section" required><option value="" selected disabled>Wybierz dział</option><option value="Nocne notatki">Nocne notatki</option><option value="Obraz i znak">Obraz i znak</option><option value="Krótka forma">Krótka forma</option></select></div></div><fieldset><legend><b>04</b> Rodzaj zgłoszenia</legend><div class="riso-radios"><label><input type="radio" name="work" value="Tekst" required checked><span>Tekst</span></label><label><input type="radio" name="work" value="Ilustracja"><span>Ilustracja</span></label><label><input type="radio" name="work" value="Fotografia"><span>Fotografia</span></label></div></fieldset><div class="riso-actions"><button id="riso-submit" class="primary" type="submit">Wyślij zgłoszenie</button><button class="secondary" type="reset">Wyczyść arkusz</button><button type="button" disabled>Nakład zamknięty</button></div><p id="riso-status" class="status" role="alert" aria-live="polite"></p></form></section><section id="riso-success" class="riso-success" tabindex="-1" hidden><div class="stamp" aria-hidden="true">PRZYJĘTO<br>DO WGLĄDU</div><div><h2 id="riso-person">Zgłoszenie zapisane.</h2><p id="riso-summary"></p><button id="riso-again" class="secondary" type="button">Dodaj kolejne</button></div></section></main>

*{box-sizing:border-box}html{color-scheme:light}body{margin:0;min-width:320px;min-height:100vh;padding:26px;background:#d9d1bd;color:#214b9b;font-family:"Courier New",Courier,monospace;line-height:1.45}.riso-sheet{position:relative;width:min(1040px,100%);min-height:calc(100vh - 52px);margin:auto;padding:38px 44px;background:#f4eddc;border:2px solid #214b9b;box-shadow:10px 10px 0 #ef493f;overflow:hidden}.riso-dots{position:absolute;right:-12px;top:110px;width:104px;height:520px;opacity:.7;mix-blend-mode:multiply}.riso-header{position:relative;z-index:1;display:grid;grid-template-columns:1.35fr .65fr;align-items:end;gap:46px;padding-bottom:28px;border-bottom:5px solid #214b9b}.riso-header span{font-size:13px;font-weight:700}.riso-header h1{margin:14px 0 0;color:#214b9b;font-family:Impact,"Arial Black",sans-serif;font-size:clamp(52px,8vw,98px);font-weight:900;letter-spacing:.025em;line-height:.78;text-shadow:4px 3px 0 #ef493f}.riso-header p{max-width:290px;margin:0;padding:14px;border:3px solid #ef493f;background:#f4eddc;color:#214b9b;font-weight:700;transform:rotate(-1deg)}.riso-content{position:relative;z-index:1;display:grid;grid-template-columns:.72fr 1.28fr;gap:44px;padding-top:30px}.riso-content aside{padding-right:26px;border-right:2px dashed #ef493f}.issue{display:inline-block;margin:0 0 22px;padding:7px 9px;background:#214b9b;color:#f4eddc;font-weight:700}.riso-content blockquote{margin:0 0 30px;color:#ef493f;font-family:Georgia,serif;font-size:clamp(24px,3vw,37px);font-weight:700;line-height:1.05}.riso-content dl{margin:0}.riso-content dl div{display:flex;justify-content:space-between;gap:12px;border-top:2px solid #214b9b;padding:8px 0}.riso-content dt{font-size:13px}.riso-content dd{margin:0;font-weight:700}.riso-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}.field{min-width:0}.field.wide{grid-column:1/-1}label,legend{font-weight:700}label{display:block;margin-bottom:7px}label b,legend b{color:#b82127}input,select,button{font:inherit;border-radius:0}input,select{width:100%;min-height:50px;padding:10px 8px;border:0;border-bottom:3px solid #214b9b;background:transparent;color:#214b9b}select{border:3px solid #214b9b;background:#f4eddc;cursor:pointer}input::placeholder{color:#435b87}fieldset{margin:24px 0;padding:0;border:0}legend{margin-bottom:9px}.riso-radios{display:grid;grid-template-columns:repeat(3,1fr);border:3px solid #ef493f}.riso-radios label{display:flex;align-items:center;gap:9px;min-height:52px;margin:0;padding:8px;cursor:pointer}.riso-radios label+label{border-left:3px solid #ef493f}.riso-radios input{width:21px;height:21px;min-height:0;margin:0;accent-color:#ef493f}.riso-actions{display:flex;flex-wrap:wrap;gap:9px}button{min-height:48px;padding:10px 15px;border:3px solid #214b9b;background:#f4eddc;color:#214b9b;font-weight:700;cursor:pointer}button.primary{background:#214b9b;color:#f4eddc;box-shadow:4px 4px 0 #ef493f}button:not(:disabled):hover{transform:translate(2px,2px)}button.primary:hover{box-shadow:2px 2px 0 #ef493f}button.secondary{border-color:#ef493f;color:#b82127}button:disabled{cursor:not-allowed;border-style:dashed;color:#77716a;border-color:#77716a;text-decoration:line-through}.status{min-height:25px;margin:13px 0 0;color:#b82127;font-weight:700}.riso-success{position:relative;z-index:2;display:grid;grid-template-columns:230px 1fr;gap:36px;align-items:center;margin-top:42px;padding:28px;border-top:5px solid #214b9b;border-bottom:5px solid #ef493f;background:#f4eddc}.stamp{display:grid;place-items:center;width:210px;height:126px;border:8px double #ef493f;color:#ef493f;font-family:Impact,"Arial Black",sans-serif;font-size:28px;line-height:.95;text-align:center;transform:rotate(-7deg);animation:stamp-in .34s cubic-bezier(.2,.8,.2,1)}.riso-success h2{margin:0 0 8px;font:700 clamp(30px,5vw,55px)/.95 Georgia,serif;color:#214b9b}.riso-success p{margin:0 0 18px}input:focus-visible,select:focus-visible,button:focus-visible,.riso-success:focus-visible{outline:4px solid #ef493f;outline-offset:3px;box-shadow:0 0 0 7px #f4eddc,0 0 0 10px #214b9b}[aria-invalid=true]{border-color:#b82127;background:#fce0d7}[hidden]{display:none!important}@keyframes stamp-in{from{transform:scale(1.7) rotate(-17deg);opacity:0}to{transform:scale(1) rotate(-7deg);opacity:1}}@media(max-width:780px){body{padding:16px}.riso-sheet{min-height:calc(100vh - 32px);padding:28px 24px}.riso-header{grid-template-columns:1fr;gap:22px}.riso-header p{max-width:430px}.riso-content{grid-template-columns:1fr}.riso-content aside{padding-right:80px;border-right:0;border-bottom:2px dashed #ef493f;padding-bottom:22px}.riso-dots{top:360px}.riso-success{grid-template-columns:1fr}.stamp{width:190px}}@media(max-width:480px){body{padding:10px}.riso-sheet{min-height:calc(100vh - 20px);padding:22px 14px;box-shadow:5px 5px 0 #ef493f}.riso-header h1{font-size:50px;text-shadow:3px 2px 0 #ef493f}.riso-header p{transform:none}.riso-content{gap:26px}.riso-content aside{padding-right:44px}.riso-fields{grid-template-columns:1fr}.field.wide{grid-column:auto}.riso-radios{grid-template-columns:1fr}.riso-radios label+label{border-left:0;border-top:3px solid #ef493f}.riso-actions button{width:100%}.riso-dots{right:-34px;width:84px}.riso-success{padding:20px 0}.stamp{width:170px;height:105px;font-size:23px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}button:not(:disabled):hover{transform:none}}

$(function(){const $form=$('#riso-form');const form=$form[0];const $status=$('#riso-status');const $success=$('#riso-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':'riso-status'}).trigger('focus');$status.text('Uzupełnij wskazane pole przed wysłaniem zgłoszenia.');return false}$form.on('submit',function(event){event.preventDefault();if(!validate())return;const name=String($('#riso-name').val()).trim();const section=$('#riso-section').val();const work=$form.find('input[name=work]:checked').val();$('#riso-person').text(name+', materiał jest w kolejce.');$('#riso-summary').text(work+' trafi do działu „'+section+'”. Odpowiedź przyjdzie 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)});$('#riso-again').on('click',function(){form.reset();$success.prop('hidden',true);$form.prop('hidden',false);window.setTimeout(function(){$('#riso-name').trigger('focus')},0)});const activate=event=>{event.preventDefault();$form.triggerHandler('submit')};$('#riso-submit').on('click',activate);$form.on('keydown','input:not([type=radio]):not([type=range])',event=>{if(event.key==='Enter')activate(event)})});