SUMIRE — restauracja z przypiętym kadrem

<aside class="sumire-rail"><a href="#start" class="sumire-logo">SUMIRE</a><nav aria-label="Nawigacja"><a href="#menu">Menu</a><a href="#ritual">Rytuał</a><a href="#taste">Degustacja</a></nav><span>Smak wymaga chwili.</span></aside><main><section id="start" class="sumire-cover"><img src="https://codepen.pl/media/codepen/immersive-2026/sumire.jpg" alt="Nigiri z łososiem, tuńczykiem i makrelą na czarnym ceramicznym talerzu" width="1536" height="1024" fetchpriority="high"><div class="cover-shade"></div><div class="restaurant-name"><p>Omakase / małe porcje, pełna uwaga</p><h1>Jeden kęs.<br>Cała historia.</h1></div><a class="menu-link" href="#menu">Przejdź do menu <span aria-hidden="true">↓</span></a><span class="red-stamp" aria-hidden="true">S</span></section><div class="menu-story" id="menu"><figure class="plate-sticky"><img src="https://codepen.pl/media/codepen/immersive-2026/sumire.jpg" alt="Detal ceramicznego talerza z nigiri" width="1536" height="1024" loading="lazy"><figcaption>Ryż. Ryba. Równowaga.</figcaption></figure><div class="menu-copy"><section data-course="1"><p class="course-index">Pierwszy smak</p><h2>Prostota<br>ma strukturę.</h2><p>Ciepły ryż, chłodna ryba i odrobina wasabi. Każdy element ma własną temperaturę, fakturę i miejsce.</p><span>Nigiri / trzy kompozycje</span></section><section data-course="2" id="ritual"><p class="course-index">Przy stole</p><h2>Zwolnij<br>między kęsami.</h2><p>Delikatny smak łatwo przeoczyć. Odłóż pałeczki na moment, spróbuj herbaty i wróć do kolejnego kawałka.</p><span>Spokojny rytm / uważna kuchnia</span></section><section data-course="3"><p class="course-index">Na koniec</p><h2>To, co zostaje<br>w pamięci.</h2><p>Nie wielkość porcji, lecz dobrze dobrany detal. Kwasowość, aromat i krótki, czysty finisz.</p><span>Sezonowość / bez zbędnych dodatków</span></section></div></div><section class="tasting" id="taste"><div><p>Karta degustacji</p><h2>Wybierz kierunek.</h2></div><div role="group" aria-label="Wariant menu"><button data-menu="classic" aria-pressed="true">Klasyczne</button><button data-menu="plant" aria-pressed="false">Roślinne</button></div><div class="tasting-list" aria-live="polite"><h3 id="tasting-title">Degustacja klasyczna</h3><ol id="tasting-items"><li><span>Na początek</span><strong>Ogórek, sezam, ocet ryżowy</strong></li><li><span>Główna kompozycja</span><strong>Nigiri: łosoś, tuńczyk, makrela</strong></li><li><span>Ostatni akcent</span><strong>Gruszka z herbatą hojicha</strong></li></ol></div><p class="menu-note">Przykładowe menu projektu. Składniki i alergeny należy potwierdzić przed zamówieniem.</p></section></main><footer><span>SUMIRE</span><p class="credit">Projekt restauracji. Fotografia wygenerowana przez AI.</p><button type="button" class="motion-toggle" aria-pressed="false">Animacje</button></footer>

*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}h1,h2,h3,p,figure{margin:0}button,input,select{font:inherit}button,a,input,summary{touch-action:manipulation}button{cursor:pointer;min-height:44px}a{color:inherit;text-underline-offset:5px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--focus,currentColor);outline-offset:5px}img{display:block;max-width:100%}p{line-height:1.6}button,input,select{border-radius:0}[hidden]{display:none!important}section{scroll-margin-top:25px}.credit{font-size:11px;line-height:1.5}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{background:#181613;color:#f4ead9;font-family:Georgia,serif;--focus:#e8ac81}.sumire-rail{position:fixed;top:0;left:0;width:95px;height:100svh;z-index:5;background:#181613;border-right:1px solid #554539;display:flex;flex-direction:column;align-items:center;padding:25px 0;gap:45px}.sumire-logo{writing-mode:vertical-rl;letter-spacing:4px;font-size:25px;text-decoration:none}.sumire-rail nav{display:flex;writing-mode:vertical-rl;gap:25px;font:12px Arial,sans-serif}.sumire-rail nav a{padding:8px}.sumire-rail>span{margin-top:auto;writing-mode:vertical-rl;font-size:11px;color:#d2bda5}main,footer{margin-left:95px}.sumire-cover{position:relative;min-height:650px;height:100svh;overflow:hidden}.sumire-cover>img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}.cover-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.15),rgba(0,0,0,.35) 45%,rgba(0,0,0,.78))}.restaurant-name{position:absolute;top:16%;right:6%;text-align:right}.restaurant-name p{font:12px Arial,sans-serif;letter-spacing:1px}.restaurant-name h1{font-size:clamp(56px,6.8vw,105px);font-weight:400;line-height:1.07;margin-top:28px;letter-spacing:-4px}.menu-link{position:absolute;bottom:8%;right:6%;display:flex;gap:55px;align-items:center;font:14px Arial,sans-serif;text-decoration:none;border-bottom:1px solid #b99d83;padding-bottom:15px}.menu-link span{font-size:35px}.red-stamp{position:absolute;bottom:8%;left:5%;background:#a72426;color:#ffe4cc;font-size:45px;padding:10px 18px}.menu-story{display:grid;grid-template-columns:1fr 1fr;align-items:start}.plate-sticky{position:sticky;top:0;height:100svh;overflow:hidden}.plate-sticky img{width:100%;height:100%;object-fit:cover;object-position:25% center;transform:scale(var(--plate-scale,1.2)) rotate(var(--plate-turn,0deg));will-change:transform}.plate-sticky figcaption{position:absolute;bottom:30px;left:30px;background:#181613e8;padding:12px 18px;font-size:13px}.menu-copy section{min-height:90svh;padding:90px 12%;display:flex;flex-direction:column;justify-content:center;border-bottom:1px solid #554539}.course-index{font:12px Arial,sans-serif;color:#e8ac81;margin-bottom:45px}.menu-copy h2{font-size:clamp(34px,4.5vw,68px);font-weight:400;line-height:1.1;letter-spacing:-2px;margin-bottom:30px}.menu-copy p:not(.course-index){font-size:18px;line-height:1.8}.menu-copy section>span{font:11px Arial,sans-serif;color:#d2bda5;margin-top:35px}.tasting{padding:80px 8%;background:#ece2d0;color:#30241d}.tasting>div:first-child p{font:12px Arial,sans-serif;margin-bottom:20px}.tasting h2{font-size:clamp(38px,5vw,68px);font-weight:400;letter-spacing:-2px}.tasting [role="group"]{display:flex;gap:12px;margin:35px 0}.tasting button{background:none;border:1px solid #574233;color:#30241d;padding:12px 25px;font:14px Arial,sans-serif}.tasting button[aria-pressed="true"]{background:#30241d;color:#fff5e6}.tasting-list h3{font-size:24px;font-weight:400;margin-bottom:25px}.tasting-list ol{list-style:none;padding:0;margin:0}.tasting-list li{display:flex;justify-content:space-between;gap:30px;border-top:1px solid #a99b87;padding:22px 0}.tasting-list li span{font:12px Arial,sans-serif}.tasting-list li strong{font-weight:400;font-size:20px}.menu-note{font:12px/1.6 Arial,sans-serif;margin-top:30px;max-width:60ch}footer{padding:35px 5%;display:flex;justify-content:space-between;gap:30px}footer>span{letter-spacing:4px}.credit{font-family:Arial,sans-serif}@media(max-width:700px){.sumire-rail{position:relative;width:100%;height:auto;flex-direction:row;justify-content:space-between;padding:18px 6%;gap:15px;border-right:0}.sumire-logo{writing-mode:initial;font-size:20px;letter-spacing:2px}.sumire-rail nav{writing-mode:initial;gap:8px}.sumire-rail>span{display:none}main,footer{margin-left:0}.sumire-cover{height:85svh;min-height:570px}.sumire-cover>img{object-position:32% center}.restaurant-name{top:10%;left:7%;right:7%;text-align:left}.restaurant-name p{max-width:27ch;font-size:11px}.restaurant-name h1{font-size:60px;letter-spacing:-3px}.cover-shade{background:linear-gradient(180deg,rgba(0,0,0,.75),rgba(0,0,0,.15) 60%,rgba(0,0,0,.7))}.menu-story{display:block}.plate-sticky{position:relative;height:50svh;min-height:300px}.menu-copy section{min-height:70svh;padding:65px 9%}.menu-copy h2{font-size:54px}.tasting-list li{display:block}.tasting-list li strong{display:block;margin-top:10px}footer{flex-direction:column}}
footer{flex-wrap:wrap}.motion-toggle{background:transparent;border:1px solid currentColor;color:inherit;font:11px monospace;padding:10px 14px;min-height:44px}body.motion-off .plate-sticky img{transform:scale(1.2)!important}

$(function(){
const reduce=window.matchMedia('(prefers-reduced-motion: reduce)');let motionChoice=null;const motionOff=()=>motionChoice===null?reduce.matches:!motionChoice;function syncMotion(){document.body.classList.toggle('motion-off',motionOff());$('.motion-toggle').attr('aria-pressed',String(!motionOff())).text(motionOff()?'Włącz animacje':'Wyłącz animacje');}$('.motion-toggle').on('click',function(){motionChoice=motionOff();syncMotion();requestPaint();});syncMotion();let queued=false;function paint(){queued=false;update();}function requestPaint(){if(!queued){queued=true;requestAnimationFrame(paint);}}window.addEventListener('scroll',requestPaint,{passive:true});window.addEventListener('resize',requestPaint);reduce.addEventListener('change',function(){syncMotion();requestPaint();});function update(){const story=document.querySelector('.menu-story');const r=story.getBoundingClientRect();const progress=Math.max(0,Math.min(1,-r.top/Math.max(1,story.offsetHeight-window.innerHeight)));story.style.setProperty('--plate-scale',motionOff()?1.2:1.2+progress*.15);story.style.setProperty('--plate-turn',motionOff()?'0deg':(progress*8)+'deg');}const menus={classic:['Degustacja klasyczna',['Ogórek, sezam, ocet ryżowy','Nigiri: łosoś, tuńczyk, makrela','Gruszka z herbatą hojicha']],plant:['Degustacja roślinna',['Rzodkiew, shiso, ponzu','Bakłażan miso i pieczony boczniak','Gruszka z herbatą hojicha']]};$('[data-menu]').on('click',function(){const menu=menus[$(this).attr('data-menu')];$('[data-menu]').attr('aria-pressed','false');$(this).attr('aria-pressed','true');$('#tasting-title').text(menu[0]);$('#tasting-items strong').each(function(i){$(this).text(menu[1][i]);});});update();
});