Kobaltowo-terakotowa ceramika

<main class="ceramic-signup">
  <section class="tile-wall" aria-label="Ceramiczna tablica pracowni">
    <div class="tile sun"></div><div class="tile wave"></div><div class="tile mark"><b id="tile-mark">PR</b></div><div class="tile sprig"></div>
    <div class="studio-sign"><span>PRACOWNIA 12</span><h1>Glina<br>i kobalt</h1><p id="tile-course">Koło garncarskie</p></div>
    <div class="tile arch"></div><div class="tile dots"></div><div class="tile cross"></div><div class="tile half"></div>
  </section>
  <form id="ceramic-form" novalidate>
    <header><span>Zapisy / sezon jesienny</span><h2>Wybierz miejsce przy stole</h2><p>Podaj dane i zdecyduj, przy której grupie chcesz pracować.</p></header>
    <label>Imię i nazwisko<input id="student-name" name="name" autocomplete="name" required minlength="3" maxlength="48" placeholder="Np. Maja Lis"></label>
    <label>Adres e-mail<input id="student-email" name="email" type="email" autocomplete="email" required placeholder="maja@example.com"></label>
    <label>Rodzaj zajęć<select id="ceramic-course" name="course"><option>Koło garncarskie</option><option>Szkliwa i pigmenty</option><option>Projektowanie kafli</option></select></label>
    <fieldset><legend>Pora spotkania</legend><label><input type="radio" name="session" value="Rano" checked><span>Rano</span></label><label><input type="radio" name="session" value="Po południu"><span>Po południu</span></label><label><input type="radio" name="session" value="Wieczorem"><span>Wieczorem</span></label></fieldset>
    <div class="ceramic-actions"><button class="primary" type="submit">Zapisz mnie</button><button class="secondary" type="reset">Wyczyść dane</button><button type="button" disabled>Lista rezerwowa zamknięta</button></div>
    <p id="ceramic-status" class="status" role="status" aria-live="polite"></p>
  </form>
</main>

*{box-sizing:border-box}body{margin:0;min-height:100vh;padding:22px;background:#c24f34;color:#17283a;font:16px/1.45 Verdana,Arial,sans-serif;display:grid;place-items:center}.ceramic-signup{width:min(100%,960px);display:grid;grid-template-columns:1.08fr .92fr;background:#f6edd9;border:4px solid #17283a}.tile-wall{min-height:560px;padding:14px;background:#1f4aa0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:1fr 1.6fr 1fr;gap:7px;border-right:4px solid #17283a}.tile{background:#f6edd9;border:2px solid #17283a;position:relative;overflow:hidden}.studio-sign{grid-column:1/5;background:#f6edd9;border:2px solid #17283a;padding:27px;text-align:center;display:grid;place-items:center;align-content:center}.studio-sign span{font-size:11px;letter-spacing:.18em}.studio-sign h1{margin:6px 0;font:700 clamp(51px,7vw,82px)/.78 Georgia,serif;color:#1f4aa0;letter-spacing:-.05em}.studio-sign p{margin:12px 0 0;color:#a53e29;font-weight:800}.sun:before{content:"";position:absolute;width:46px;height:46px;background:#c24f34;left:50%;top:50%;transform:translate(-50%,-50%) rotate(45deg)}.wave:before,.wave:after{content:"";position:absolute;width:68px;height:68px;background:#1f4aa0;top:33px;transform:rotate(45deg)}.wave:before{left:-45px}.wave:after{right:-45px}.mark{display:grid;place-items:center;background:#c24f34;color:#f6edd9;font:900 25px Georgia,serif}.sprig:before{content:"✣";position:absolute;color:#1f4aa0;font-size:66px;inset:50% auto auto 50%;transform:translate(-50%,-50%)}.arch:before{content:"";position:absolute;inset:18px 13px -20px;background:#c24f34;clip-path:polygon(0 100%,0 45%,12% 20%,30% 5%,50% 0,70% 5%,88% 20%,100% 45%,100% 100%)}.dots{background:#c24f34}.dots:before{content:"•••";position:absolute;color:#f6edd9;font:900 30px Georgia;letter-spacing:3px;inset:50% auto auto 50%;transform:translate(-50%,-50%)}.cross:before,.cross:after{content:"";position:absolute;background:#1f4aa0;inset:15px 43%}.cross:after{inset:43% 15px}.half{background:#f6edd9}.half:before{content:"";position:absolute;left:0;right:50%;top:0;bottom:0;background:#c24f34}form{padding:33px 35px;background:#f6edd9}form header{border-bottom:3px solid #1f4aa0;padding-bottom:17px;margin-bottom:21px}form header span{font-size:11px;color:#a53e29;font-weight:800}form h2{margin:4px 0 6px;font:700 clamp(35px,5vw,53px)/.95 Georgia,serif;color:#1f4aa0}form header p{margin:0}label{display:block;margin-top:14px;font-size:13px;font-weight:800}input,select,button{font:inherit}input:not([type=radio]),select{display:block;width:100%;min-height:46px;margin-top:5px;padding:8px 10px;border:2px solid #1f4aa0;border-radius:2px;background:#fffaf0;color:#17283a}input::placeholder{color:#596579}fieldset{border:2px solid #c24f34;margin:19px 0;padding:9px 11px 5px}legend{padding:0 8px;font:700 16px Georgia,serif;color:#943522}fieldset label{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:0 12px 0 0}input[type=radio]{width:21px;height:21px;accent-color:#1f4aa0}.ceramic-actions{display:flex;gap:8px;flex-wrap:wrap}button{min-height:44px;padding:9px 13px;border:2px solid #1f4aa0;border-radius:2px;background:#f6edd9;color:#1f4aa0;font-weight:800;cursor:pointer}.primary{background:#1f4aa0;color:#fff}.secondary:hover{background:#ead7b6}button:disabled{border-color:#b5a78e;color:#9c8f78;cursor:not-allowed}.status{min-height:25px;margin:14px 0 0;color:#943522;font-weight:800}.tile-wall.is-saved .mark{background:#1f4aa0;outline:5px solid #c24f34;outline-offset:-9px}input:focus-visible,select:focus-visible,button:focus-visible{outline:4px solid #c24f34;outline-offset:3px}@media(max-width:730px){body{padding:12px}.ceramic-signup{grid-template-columns:1fr}.tile-wall{min-height:330px;border-right:0;border-bottom:4px solid #17283a}.studio-sign h1{font-size:56px}form{padding:28px 23px}}@media(max-width:380px){body{padding:0}.ceramic-signup{border-left:0;border-right:0}.tile-wall{padding:8px;gap:4px;min-height:280px}.studio-sign{padding:16px}.studio-sign h1{font-size:45px}form{padding:23px 16px}.ceramic-actions button{width:100%}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=$('#ceramic-form'),$wall=$('.tile-wall'),$status=$('#ceramic-status');function sync(){const name=$('#student-name').val().trim();const initials=name.split(/\s+/).filter(Boolean).slice(0,2).map(part=>part.charAt(0).toUpperCase()).join('');$('#tile-mark').text(initials||'PR');$('#tile-course').text($('#ceramic-course').val());$wall.removeClass('is-saved');}$form.on('input change',sync);$form.on('submit',function(event){event.preventDefault();if(!this.checkValidity()){$status.text('Podaj imię i poprawny adres e-mail.');this.reportValidity();return;}const first=$('#student-name').val().trim().split(/\s+/)[0];$wall.addClass('is-saved');$status.text('Miejsce dla '+first+' zostało zapisane.');});$form.on('reset',()=>setTimeout(()=>{$status.text('Formularz jest gotowy na nowy zapis.');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)})});