Afisz z drewnianej typografii

<main class="print-order">
  <section class="poster-wrap" aria-label="Podgląd afisza">
    <article class="wood-poster" data-ink="Ceglasty"><span>DRUKARNIA / 1936–2026</span><h1 id="poster-title">TWÓJ<br>AFISZ</h1><div class="poster-rule"></div><p><strong id="poster-count">50</strong> ODBITEK</p><b id="poster-size">B2 / papier naturalny</b></article>
  </section>
  <form id="print-form" novalidate>
    <header><span>Zamówienie numer 018</span><h2>Ustaw afisz</h2><p>Wpisz hasło i wybierz parametry krótkiej serii drukowanej ręcznie.</p></header>
    <label>Hasło na afiszu<input id="print-title" name="title" required minlength="3" maxlength="24" placeholder="Np. Nocny targ"></label>
    <div class="print-row"><label>Nakład<input id="print-count" name="count" type="number" required min="10" max="500" step="10" value="50"></label><label>Format i papier<select id="print-stock" name="stock"><option value="B2 / papier naturalny">B2 / naturalny</option><option value="A2 / papier niebieski">A2 / niebieski</option><option value="B3 / papier kremowy">B3 / kremowy</option></select></label></div>
    <fieldset><legend>Farba drukarska</legend><label><input type="radio" name="ink" value="Ceglasty" checked><span>Ceglasty</span></label><label><input type="radio" name="ink" value="Granat"><span>Granat</span></label><label><input type="radio" name="ink" value="Dwie farby"><span>Dwie farby</span></label></fieldset>
    <div class="print-actions"><button class="primary" type="submit">Zamów odbitki</button><button class="secondary" type="reset">Zacznij od nowa</button><button type="button" disabled>Nakład zamknięty</button></div>
    <p id="print-status" class="status" role="status" aria-live="polite"></p>
  </form>
</main>

*{box-sizing:border-box}body{margin:0;min-height:100vh;padding:22px;background:#253b48;color:#1b1915;font:16px/1.45 Rockwell,"Courier New",serif;display:grid;place-items:center}.print-order{width:min(100%,960px);display:grid;grid-template-columns:1fr 1fr;border:4px solid #171612;background:#d8bd80;box-shadow:10px 10px 0 #111}.poster-wrap{padding:31px;background:#d8bd80;border-right:4px solid #171612;display:grid;place-items:center}.wood-poster{width:min(100%,390px);min-height:485px;border:8px double #171612;padding:20px;background:#e2c98f;color:#9a2e20;display:grid;grid-template-rows:auto 1fr auto auto;position:relative;overflow:hidden}.wood-poster:before{content:"";position:absolute;width:86px;height:86px;right:-20px;top:48px;border:15px solid #243f52;transform:rotate(12deg)}.wood-poster:after{content:"✦";position:absolute;right:23px;bottom:50px;color:#243f52;font-size:68px;transform:rotate(-8deg)}.wood-poster>span{font-size:11px;letter-spacing:.08em;color:#171612;border-bottom:3px solid #171612;padding-bottom:9px}.wood-poster h1{align-self:center;margin:15px 0;font:900 clamp(55px,8vw,91px)/.78 Impact,"Arial Black",sans-serif;letter-spacing:-.04em;max-width:4ch;text-shadow:4px 3px 0 #243f52;overflow-wrap:anywhere}.poster-rule{height:17px;width:58%;background:#243f52}.wood-poster p{font-size:17px;color:#171612;margin:18px 0 2px}.wood-poster p strong{font-size:35px}.wood-poster>b{font-size:12px;color:#171612;text-transform:uppercase;max-width:220px}.wood-poster[data-ink="Granat"] h1{color:#243f52;text-shadow:4px 3px 0 #171612}.wood-poster[data-ink="Dwie farby"] h1{color:#9a2e20;text-shadow:6px 0 0 #243f52}form{padding:37px 39px;background:#f2e7c9}form header{border-bottom:4px solid #171612;padding-bottom:17px;margin-bottom:23px}form header span{font-size:11px;letter-spacing:.08em}form h2{margin:5px 0 4px;font:900 clamp(38px,6vw,58px)/.95 Impact,"Arial Black",sans-serif;letter-spacing:.01em}form header p{margin:0;max-width:42ch}label{display:block;font-size:13px;font-weight:700}input,select,button{font:inherit}input,select{display:block;width:100%;min-height:46px;margin-top:6px;padding:8px 10px;border:3px solid #171612;border-radius:0;background:#fff9e8;color:#171612}input::placeholder{color:#61584a}.print-row{display:grid;grid-template-columns:.7fr 1.3fr;gap:13px;margin-top:18px}fieldset{border:3px solid #171612;margin:21px 0;padding:10px 12px 7px}legend{padding:0 8px;font-weight:900}fieldset label{min-height:44px;display:inline-flex;align-items:center;gap:7px;margin-right:12px}input[type=radio]{width:20px;height:20px;accent-color:#9a2e20}.print-actions{display:flex;flex-wrap:wrap;gap:8px}button{min-height:44px;padding:8px 13px;border:3px solid #171612;border-radius:0;background:#f2e7c9;color:#171612;font-weight:900;cursor:pointer}.primary{background:#9a2e20;color:#fff}.secondary:hover{background:#e2c98f}button:disabled{border-color:#a89a7b;color:#998d73;cursor:not-allowed}.status{min-height:25px;margin:14px 0 0;color:#7e261d;font-weight:900}.wood-poster.is-saved{outline:5px solid #f2e7c9;outline-offset:-17px}input:focus-visible,select:focus-visible,button:focus-visible{outline:4px solid #187c8a;outline-offset:3px}@media(max-width:720px){body{padding:12px}.print-order{grid-template-columns:1fr}.poster-wrap{border-right:0;border-bottom:4px solid #171612}.wood-poster{min-height:315px}.wood-poster h1{font-size:65px;max-width:none}.wood-poster:after{font-size:45px}form{padding:28px 23px}}@media(max-width:380px){body{padding:0}.print-order{box-shadow:none;border-left:0;border-right:0}.poster-wrap{padding:17px}.wood-poster{padding:15px}.print-row{grid-template-columns:1fr}.print-actions button{width:100%}form{padding:24px 16px}fieldset label{display:flex;margin-right:0}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

$(()=>{const $form=$('#print-form'),$poster=$('.wood-poster'),$status=$('#print-status');function sync(){const title=$('#print-title').val().trim()||'TWÓJ AFISZ';const heading=$('#poster-title').empty();title.split(/\s+/).forEach((word,index)=>{if(index)heading.append(document.createElement('br'));heading.append(document.createTextNode(word))});$('#poster-count').text($('#print-count').val()||'0');$('#poster-size').text($('#print-stock').val().toUpperCase());$poster.attr('data-ink',$('input[name="ink"]:checked').val()||'Ceglasty').removeClass('is-saved');}$form.on('input change',sync);$form.on('submit',function(event){event.preventDefault();if(!this.checkValidity()){$status.text('Wpisz hasło i poprawny nakład.');this.reportValidity();return;}$poster.addClass('is-saved');$status.text('Zamówienie „'+$('#print-title').val().trim()+'” — '+$('#print-count').val()+' odbitek.');});$form.on('reset',()=>setTimeout(()=>{$status.text('Przywrócono wzór afisza.');sync();},0));sync();;const activate=event=>{event.preventDefault();$form.triggerHandler('submit')};$form.find('.primary').on('click',activate);$form.on('keydown','input:not([type=radio]):not([type=range])',event=>{if(event.key==='Enter')activate(event)})});