MOTEL 76 — analogowa pocztówka z drogi

<header><a class="motel-brand" href="#start">Motel <strong>76</strong></a><nav aria-label="Nawigacja"><a href="#postcard">Pocztówka</a><a href="#stay">Zostań na noc</a></nav><span>Somewhere off the highway.</span></header><main><section class="motel-intro" id="start"><p>Wyłącz silnik. Włącz wakacje.</p><h1>Droga może<br>poczekać.</h1><div class="sun-badge" aria-hidden="true">GOOD<br>TO BE<br>NOWHERE</div><a href="#postcard" class="down-link">Zajrzyj za zakręt <span aria-hidden="true">↓</span></a></section><section class="postcard-stage" id="postcard"><figure class="postcard"><div class="photo-frame"><img src="https://codepen.pl/media/codepen/immersive-2026/motel76.jpg" alt="Turkusowy motel, basen, palmy i czerwony kabriolet na pustyni" width="1536" height="1024" fetchpriority="high"></div><figcaption><span>Greetings from<br><strong>THE SLOW SIDE</strong></span><span class="postmark">MOTEL 76<br>TAKE IT EASY</span></figcaption></figure><span class="hand-note">Nie planuj każdej godziny.</span></section><section class="road-notes"><h2>Dziś nic<br>nie musisz.</h2><div><article><span>Rano</span><h3>Kawa przy basenie.</h3><p>Bez kubka na wynos. Bez sprawdzania, ile zostało do następnego zjazdu.</p></article><article><span>Po południu</span><h3>Cień, książka, cisza.</h3><p>Zostaw kluczyki na stoliku. Najlepszy plan mieści się na jednej pustej kartce.</p></article><article><span>Wieczorem</span><h3>Jeszcze jeden zachód.</h3><p>Usiądź przed pokojem. Pustynia sama zmienia scenografię.</p></article></div></section><section class="stay" id="stay"><div class="room-key" aria-hidden="true"><span>ROOM</span><strong>76</strong><span>PLEASE RETURN<br>TO THE GOOD TIMES</span></div><div class="stay-form"><p>Zaprojektuj swój postój</p><h2>Na ile zostajesz?</h2><label for="nights">Liczba nocy</label><input id="nights" type="range" min="1" max="7" value="2"><div class="stay-total"><output id="night-count" for="nights">2 noce</output><strong id="stay-price">640 zł</strong></div><div role="group" aria-label="Pokój"><button data-room="pool" aria-pressed="true">Przy basenie</button><button data-room="desert" aria-pressed="false">Od pustyni</button></div><p id="stay-status" role="status">Przy basenie / 2 noce</p><p class="demo-note">Przykładowa kalkulacja. Ten formularz nie dokonuje rezerwacji.</p></div></section></main><footer><strong>Motel 76</strong><span class="credit">Projekt koncepcyjny. Fotografia w estetyce filmu analogowego wygenerowana przez AI.</span><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:#f4e4bb;color:#703523;font-family:Georgia,serif;--focus:#155e61}header{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:25px 6%;border-bottom:2px solid #703523}.motel-brand{font-size:30px;text-decoration:none;font-style:italic}.motel-brand strong{font-style:normal;font-size:38px}nav{display:flex;gap:25px;font:13px "Courier New",monospace}header>span{font:11px "Courier New",monospace}.motel-intro{position:relative;padding:60px 7% 90px;text-align:center}.motel-intro>p{font:13px "Courier New",monospace}.motel-intro h1{font-size:clamp(72px,11vw,160px);font-weight:900;line-height:.92;letter-spacing:-.065em;margin:35px auto 25px}.sun-badge{position:absolute;right:7%;bottom:65px;font:bold 13px/1.3 "Courier New",monospace;transform:rotate(15deg);border:2px dashed #703523;padding:20px;border-radius:50%}.down-link{display:inline-flex;gap:18px;align-items:center;font:13px "Courier New",monospace;padding:15px}.down-link span{font-size:26px}.postcard-stage{padding:10px 10% 100px;position:relative;perspective:1300px}.postcard{background:#fff9e8;padding:18px 18px 0;box-shadow:0 18px 25px rgba(74,43,22,.14);transform:rotate(var(--postcard-rotation,-5deg)) translateY(var(--postcard-rise,0px));transform-origin:center;will-change:transform}.photo-frame{height:clamp(300px,43vw,620px);overflow:hidden}.photo-frame img{width:100%;height:100%;object-fit:cover}.postcard figcaption{display:flex;justify-content:space-between;align-items:center;gap:25px;padding:20px 5px 28px;font-style:italic;font-size:22px}.postcard figcaption strong{font-style:normal;font-size:30px;letter-spacing:-1px}.postmark{border:2px solid #9e664a;border-radius:50%;width:110px;height:110px;display:flex;align-items:center;justify-content:center;text-align:center;font:12px/1.5 "Courier New",monospace;transform:rotate(-15deg)}.hand-note{display:block;position:relative;text-align:right;font-style:italic;font-size:20px;margin-top:30px;margin-right:5%;transform:rotate(-5deg)}.road-notes{background:#22676a;color:#fff3d1;padding:80px 7%;display:grid;grid-template-columns:1fr 1.25fr;gap:12%}.road-notes h2{font-size:clamp(55px,7vw,90px);letter-spacing:-5px;line-height:1;position:sticky;top:50px;align-self:start}.road-notes article{padding:0 0 55px;margin-bottom:35px;border-bottom:1px solid #85aaa2}.road-notes article:last-child{margin-bottom:0}.road-notes article>span{font:12px "Courier New",monospace}.road-notes h3{font-size:30px;margin:20px 0;font-weight:400}.road-notes p{font-size:17px;max-width:38ch}.stay{padding:100px 9%;display:grid;grid-template-columns:.7fr 1fr;gap:15%;align-items:center}.room-key{max-width:240px;width:100%;background:#c95132;color:#fff2c7;padding:45px 20px;text-align:center;clip-path:polygon(50% 0,100% 18%,100% 82%,50% 100%,0 82%,0 18%);transform:rotate(-10deg)}.room-key>span{display:block;font:12px/1.5 "Courier New",monospace}.room-key strong{font-size:115px;letter-spacing:-10px;line-height:1.3}.stay-form>p:first-child{font:12px "Courier New",monospace}.stay h2{font-size:clamp(35px,5vw,56px);letter-spacing:-2px;margin:20px 0 30px}.stay label{font:13px "Courier New",monospace}.stay input{display:block;min-height:44px;width:100%;accent-color:#703523;margin:10px 0}.stay-total{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #b19166;padding-bottom:18px}.stay-total strong{font-size:35px}.stay [role="group"]{display:flex;gap:10px;margin:25px 0}.stay button{padding:12px 16px;border:1px solid #703523;background:none;color:#703523;font:13px "Courier New",monospace}.stay button[aria-pressed="true"]{background:#703523;color:#fff2c7}#stay-status{font:12px "Courier New",monospace}.demo-note{font:11px/1.6 "Courier New",monospace;margin-top:25px;max-width:45ch}footer{padding:30px 6%;border-top:2px solid #703523;display:flex;justify-content:space-between;gap:30px}footer strong{font-size:28px;font-style:italic}.credit{font-family:"Courier New",monospace;max-width:55ch}@media(max-width:650px){header{padding:18px 6%;gap:12px;flex-wrap:wrap}header>span{display:none}.motel-brand{font-size:23px}.motel-brand strong{font-size:30px}nav{gap:14px;font-size:11px}.motel-intro{padding:45px 6% 65px}.motel-intro h1{font-size:76px}.sun-badge{display:none}.postcard-stage{padding:0 7% 65px}.postcard{padding:10px 10px 0}.photo-frame{height:340px}.photo-frame img{object-position:65% center}.postcard figcaption{font-size:16px;padding-bottom:18px}.postcard figcaption strong{font-size:19px}.postmark{width:75px;height:75px;font-size:9px;flex-shrink:0}.hand-note{font-size:16px}.road-notes{display:block;padding:55px 8%}.road-notes h2{position:static;font-size:66px;margin-bottom:50px}.stay{grid-template-columns:1fr;padding:60px 8%;gap:40px}.room-key{width:140px;justify-self:center;padding:30px 15px}.room-key strong{font-size:70px}.room-key>span{font-size:8px}.stay h2{font-size:42px}footer{flex-direction:column}}
.motel-intro{padding-top:35px;padding-bottom:45px}.motel-intro h1{font-size:clamp(68px,8.5vw,122px);margin-top:20px;margin-bottom:10px}.sun-badge{bottom:35px}@media(max-width:650px){.motel-intro{padding-top:30px;padding-bottom:40px}.motel-intro h1{font-size:68px}}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 .postcard{transform:rotate(-3deg)!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 r=document.querySelector('.postcard-stage').getBoundingClientRect();const p=Math.max(0,Math.min(1,(window.innerHeight-r.top)/(window.innerHeight+r.height)));const card=document.querySelector('.postcard');card.style.setProperty('--postcard-rotation',motionOff()?'-3deg':(-7+p*11)+'deg');card.style.setProperty('--postcard-rise',motionOff()?'0px':(30-p*60)+'px');}let room='pool';function price(){const n=Number($('#nights').val()),label=n===1?'noc':n<5?'noce':'nocy';$('#night-count').text(n+' '+label);$('#stay-price').text(n*(room==='pool'?320:280)+' zł');$('#stay-status').text((room==='pool'?'Przy basenie':'Od pustyni')+' / '+n+' '+label);}$('#nights').on('input',price);$('[data-room]').on('click',function(){room=$(this).attr('data-room');$('[data-room]').attr('aria-pressed','false');$(this).attr('aria-pressed','true');price();});update();
});