OFF/FORM — modowy lookbook w poziomie

<header><a href="#cover" class="off-logo">OFF/FORM</a><nav aria-label="Nawigacja"><a href="#lookbook">Lookbook</a><a href="#details">Konstrukcja</a></nav><span>Volume 04</span></header><main><section class="cover" id="cover"><div class="cover-bar"><span>Clothes for moving.</span><span>Kolekcja koncepcyjna / 2026</span></div><h1><span>Nie mieść się</span><br><span>w ramie.</span></h1><figure class="cover-image"><img src="https://codepen.pl/media/codepen/immersive-2026/offform.jpg" alt="Model w obszernej jasnej kurtce na tle betonowej ściany" width="1536" height="1024" fetchpriority="high"><figcaption>LOOK 04 / CITY SHELL</figcaption></figure><div class="red-note"><span>Wolna<br>forma.</span><a href="#lookbook">Przesuń perspektywę <span aria-hidden="true">↗</span></a></div><span class="cover-index" aria-hidden="true">04</span></section><section class="lookbook" id="lookbook"><div class="lookbook-top"><h2>Jeden look.<br>Trzy odległości.</h2><div class="gallery-buttons"><button data-direction="-1" aria-label="Poprzedni kadr">←</button><button data-direction="1" aria-label="Następny kadr">→</button></div></div><div class="filmstrip" tabindex="0" aria-label="Kadry kolekcji, przewijaj w poziomie"><figure><div class="photo wide"><img src="https://codepen.pl/media/codepen/immersive-2026/offform.jpg" alt="Pełna sylwetka w obszernej kurtce" width="1536" height="1024" loading="lazy"></div><figcaption><span>01 / Sylwetka</span><strong>Przestrzeń dla ruchu.</strong></figcaption></figure><figure><div class="photo texture"><img src="https://codepen.pl/media/codepen/immersive-2026/offform.jpg" alt="Zbliżenie na fakturę i fałdy jasnej tkaniny" width="1536" height="1024" loading="lazy"></div><figcaption><span>02 / Materiał</span><strong>Załamania łapią światło.</strong></figcaption></figure><figure><div class="photo detail"><img src="https://codepen.pl/media/codepen/immersive-2026/offform.jpg" alt="Detal kołnierza i ramion kurtki" width="1536" height="1024" loading="lazy"></div><figcaption><span>03 / Konstrukcja</span><strong>Objętość bez ciężaru.</strong></figcaption></figure></div><p id="frame-status" role="status">Kadr 1 z 3</p></section><section id="details" class="construction"><p class="scroll-type" aria-hidden="true">OUT OF THE FRAME</p><div><h2>Forma dopasowuje<br>się do Ciebie.</h2><p>Szeroki rękaw, wysoki kołnierz i swobodny korpus. Zobacz, jak zmienia się przykładowa długość kurtki w wybranym rozmiarze.</p><div role="group" aria-label="Rozmiar kurtki"><button data-size="S" aria-pressed="false">S</button><button data-size="M" aria-pressed="true">M</button><button data-size="L" aria-pressed="false">L</button></div><p id="size-readout" role="status">M / długość 78 cm</p></div></section></main><footer><strong>OFF/FORM</strong><p class="credit">Autorski projekt koncepcyjny. 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{font-family:Arial,Helvetica,sans-serif;background:#eeede9;color:#191919;--focus:#c62c22}header{display:flex;gap:35px;align-items:center;padding:20px 4%;border-bottom:1px solid #222}.off-logo{font-size:25px;font-weight:900;letter-spacing:-2px;text-decoration:none}nav{display:flex;gap:25px;margin-left:auto;font-size:13px}header>span{font:11px monospace}.cover{position:relative;min-height:800px;padding:20px 4% 60px;display:grid;grid-template-columns:1fr 1.5fr .6fr;grid-template-rows:auto 1fr;gap:20px}.cover-bar{grid-column:1 / -1;display:flex;justify-content:space-between;font:11px monospace;padding-bottom:25px}.cover h1{position:relative;grid-column:1 / 3;grid-row:2;z-index:2;align-self:start;font-size:clamp(75px,11vw,170px);line-height:.85;letter-spacing:-.085em;font-weight:900;pointer-events:none;width:max-content;max-width:100%;margin-top:25px;mix-blend-mode:multiply}.cover-image{grid-column:2 / 4;grid-row:2;margin-top:120px;min-width:0}.cover-image img{width:100%;height:490px;object-fit:cover;object-position:65% center}.cover-image figcaption{font:10px monospace;margin-top:12px;text-align:right}.red-note{grid-column:1;grid-row:2;align-self:end;background:#ce2a22;color:#fff;padding:28px 20px;min-height:220px;display:flex;flex-direction:column;justify-content:space-between;gap:25px;z-index:3;transform:rotate(-3deg)}.red-note>span{font-size:46px;line-height:.92;font-weight:700;letter-spacing:-2px}.red-note a{font-size:12px}.cover-index{position:absolute;right:4%;top:65px;font-size:100px;font-weight:900;letter-spacing:-8px}.lookbook{padding:70px 0 35px;background:#191919;color:#eeede9;overflow:hidden}.lookbook-top{padding:0 5% 35px;display:flex;align-items:end;justify-content:space-between;gap:25px}.lookbook h2{font-size:clamp(36px,5vw,66px);line-height:1;letter-spacing:-3px;font-weight:500}.gallery-buttons{display:flex;gap:12px}.gallery-buttons button{width:50px;min-height:50px;border:1px solid #aaa;background:none;color:inherit;font-size:24px}.gallery-buttons button:disabled{opacity:.35;cursor:default}.filmstrip{display:flex;gap:28px;overflow-x:auto;padding:0 5% 20px;scroll-snap-type:x mandatory;scrollbar-color:#ccc #444}.filmstrip figure{flex:0 0 70%;min-width:0;scroll-snap-align:center}.photo{height:460px;overflow:hidden}.photo img{width:100%;height:100%;object-fit:cover}.texture img{transform:scale(2);transform-origin:72% 45%}.detail img{transform:scale(2.8);transform-origin:72% 10%}.filmstrip figcaption{display:flex;justify-content:space-between;gap:20px;padding-top:15px}.filmstrip figcaption span{font:11px monospace}.filmstrip figcaption strong{font-size:16px;font-weight:400}#frame-status{font:12px monospace;padding:20px 5%}.construction{padding:65px 5% 80px;overflow:hidden}.scroll-type{font-size:clamp(50px,12vw,190px);white-space:nowrap;letter-spacing:-.07em;font-weight:900;transform:translateX(var(--type-shift,0px));line-height:1;border-bottom:2px solid #191919;padding-bottom:30px;margin-bottom:45px}.construction>div{max-width:720px;margin-left:auto}.construction h2{font-size:clamp(38px,5vw,64px);line-height:1;letter-spacing:-3px}.construction p:not(.scroll-type){max-width:45ch;margin-top:24px}.construction [role="group"]{display:flex;gap:12px;margin-top:25px}.construction button{width:62px;background:transparent;border:1px solid #191919;color:#191919}.construction button[aria-pressed="true"]{background:#191919;color:#fff}#size-readout{font:13px monospace}footer{padding:30px 5%;display:flex;justify-content:space-between;gap:30px;border-top:1px solid #191919}footer strong{font-size:23px;letter-spacing:-1px}@media(max-width:650px){header{flex-wrap:wrap;gap:15px}header>span{display:none}.cover{display:block;min-height:0;padding:20px 5% 40px}.cover-bar{font-size:9px;gap:20px}.cover h1{font-size:70px;margin:15px 0 -35px}.cover-image{margin:0 0 0 15%;padding-top:0}.cover-image img{height:390px;object-position:72% center}.red-note{width:48%;min-height:160px;margin-top:-100px;position:relative;padding:20px 15px}.red-note>span{font-size:34px}.red-note a{font-size:11px}.cover-index{display:none}.filmstrip figure{flex-basis:88%}.photo{height:380px}.filmstrip figcaption{display:block}.filmstrip figcaption strong{display:block;margin-top:10px}.lookbook-top{align-items:start}.lookbook h2{font-size:38px}.gallery-buttons{gap:8px}.gallery-buttons button{width:44px}.construction h2{font-size:42px}footer{flex-direction:column}}
.cover h1{mix-blend-mode:normal;line-height:.95}.cover h1 span{background:#eeede9;padding-right:.1em;box-decoration-break:clone;-webkit-box-decoration-break:clone}.cover-image img{object-position:65% top}footer{flex-wrap:wrap}.motion-toggle{background:transparent;border:1px solid currentColor;color:inherit;font:11px monospace;padding:10px 14px;min-height:44px}

$(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();});const strip=document.querySelector('.filmstrip');function current(){const width=strip.querySelector('figure').getBoundingClientRect().width+28;return Math.max(0,Math.min(2,Math.round(strip.scrollLeft/width)));}function status(){const i=current();$('#frame-status').text('Kadr '+(i+1)+' z 3');$('[data-direction="-1"]').prop('disabled',i===0);$('[data-direction="1"]').prop('disabled',i===2);}function move(delta){const i=Math.max(0,Math.min(2,current()+delta));const step=strip.querySelector('figure').getBoundingClientRect().width+28;strip.scrollTo({left:i*step,behavior:motionOff()?'instant':'smooth'});}strip.addEventListener('scroll',status,{passive:true});strip.addEventListener('keydown',function(e){if(e.key==='ArrowRight'||e.key==='ArrowLeft'){e.preventDefault();move(e.key==='ArrowRight'?1:-1);}});$('[data-direction]').on('click',function(){move(Number($(this).attr('data-direction')));});const lengths={S:74,M:78,L:82};$('[data-size]').on('click',function(){const size=$(this).attr('data-size');$('[data-size]').attr('aria-pressed','false');$(this).attr('aria-pressed','true');$('#size-readout').text(size+' / długość '+lengths[size]+' cm');});function update(){const r=document.querySelector('.construction').getBoundingClientRect();document.querySelector('.scroll-type').style.setProperty('--type-shift',motionOff()?'0px':Math.min(0,(r.top-window.innerHeight)*.15)+'px');status();}update();
});