OŚ — minimalistyczna wystawa rzeźby

<header><a class="museum-logo" href="#start" aria-label="Oś — przestrzeń sztuki">oś<span>przestrzeń sztuki</span></a><nav aria-label="Nawigacja"><a href="#obiekt">Obiekt</a><a href="#wystawa">O wystawie</a></nav></header><main><section class="museum-hero" id="start"><div class="vertical-label">Studium przestrzeni</div><div class="museum-title"><p>Wystawa koncepcyjna</p><h1>Forma<br>i cisza.</h1><p class="museum-intro">Jeden obiekt. Wiele punktów widzenia.<br>Zatrzymaj się przy tym, co pomiędzy.</p></div><div class="sculpture-wrap" id="obiekt"><div class="sculpture" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div class="plinth" aria-hidden="true"></div><span class="object-caption">Studium VII / papier, światło, przestrzeń</span></div><div class="rotation"><label for="angle">Zmień punkt widzenia</label><input id="angle" type="range" min="-60" max="60" value="0"><output for="angle" id="angle-value">0°</output><button id="reset-angle">Widok początkowy</button></div></section><section id="wystawa" class="exhibition"><h2>Mniej formy.<br>Więcej miejsca<br>na spojrzenie.</h2><div><p>Siedem płaszczyzn przecina światło. Obiekt zmienia się z każdym krokiem: raz wydaje się zamknięty, za chwilę niemal znika.</p><p>Ta wystawa zaczyna się od prostego gestu. Nie trzeba znać odpowiedzi. Wystarczy zmienić perspektywę.</p><details><summary>Jak oglądać obiekt?</summary><p>Przesuń suwak, aby obrócić rzeźbę. Możesz też użyć strzałek na klawiaturze. Porównaj krawędzie i odstępy pomiędzy płaszczyznami.</p></details></div></section><section class="museum-note"><span>Przestrzeń do patrzenia</span><p>Nie wszystko musi być od razu nazwane.</p></section></main><footer><strong>oś</strong><span>Sztuka zaczyna się od uwagi.</span></footer>

*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input{touch-action:manipulation}button,a{color:inherit}button{cursor:pointer}a{text-underline-offset:5px}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid currentColor;outline-offset:5px}button{min-height:44px}svg{display:block;max-width:100%}p{line-height:1.65;max-width:62ch}h1,h2,p,figure{margin:0}header,footer{display:flex;align-items:center;justify-content:space-between;gap:20px}nav{display:flex;flex-wrap:wrap;gap:24px}nav a{min-height:44px;display:flex;align-items:center}h2{font-size:clamp(28px,4vw,52px);line-height:1.12}section{scroll-margin-top:24px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}@media(max-width:650px){header,footer{align-items:flex-start;flex-wrap:wrap}nav{gap:16px}}
body{font-family:"Helvetica Neue",Arial,sans-serif;color:#252525;background:#fdfdfc}header{padding:28px 5%}.museum-logo{font-size:48px;font-weight:500;letter-spacing:-4px;text-decoration:none;display:flex;align-items:center;gap:24px}.museum-logo span{font-size:12px;letter-spacing:0;max-width:60px;line-height:1.4}nav{font-size:14px}.museum-hero{position:relative;min-height:670px;display:grid;grid-template-columns:1fr 1.25fr;align-items:center;padding:15px 8% 120px 12%}.vertical-label{position:absolute;left:3%;top:90px;writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;letter-spacing:2px}.museum-title>p:first-child{font-size:12px;margin-bottom:35px}.museum-title h1{font-size:clamp(68px,9vw,140px);letter-spacing:-.06em;font-weight:300;line-height:.98}.museum-intro{font-size:15px;margin-top:32px;line-height:1.7}.sculpture-wrap{position:relative;height:480px;display:flex;justify-content:center;align-items:center;perspective:1100px}.sculpture{position:relative;width:210px;height:300px;transform-style:preserve-3d;transform:rotateX(-12deg) rotateY(-25deg);transition:transform 180ms ease}.sculpture i{position:absolute;inset:0;border:1px solid #7b7b76;background:#dddfd5;transform:rotateY(0deg);box-shadow:inset -30px 0 45px rgba(0,0,0,.12)}.sculpture i:nth-child(2){transform:rotateY(25deg);background:#d0d3c9}.sculpture i:nth-child(3){transform:rotateY(50deg);background:#e5e7de}.sculpture i:nth-child(4){transform:rotateY(75deg);background:#b9bdb2}.sculpture i:nth-child(5){transform:rotateY(100deg);background:#c8ccc1}.sculpture i:nth-child(6){transform:rotateY(125deg);background:#dee1d6}.sculpture i:nth-child(7){transform:rotateY(150deg);background:#eef0e8}.plinth{position:absolute;bottom:55px;width:260px;height:28px;background:#d2d3cd;transform:skewX(-30deg);z-index:-1}.object-caption{position:absolute;bottom:0;font-size:11px;text-align:center}.rotation{position:absolute;bottom:30px;right:8%;width:46%;display:grid;grid-template-columns:1fr 48px;align-items:center;gap:10px 18px}.rotation label{font-size:12px;grid-column:1 / -1}.rotation input{width:100%;accent-color:#252525;min-height:44px;cursor:ew-resize}.rotation output{font-size:12px}.rotation button{grid-column:1 / -1;justify-self:start;background:none;border:0;border-bottom:1px solid #252525;padding:8px 0;font-size:12px}.exhibition{border-top:1px solid #aaa;padding:80px 12%;display:grid;grid-template-columns:1fr 1fr;gap:12%}.exhibition h2{font-size:clamp(32px,4vw,54px);font-weight:400;letter-spacing:-2px}.exhibition p{font-size:17px;margin-bottom:25px;line-height:1.8}.exhibition details{margin-top:30px;border-top:1px solid #aaa;padding-top:20px}.exhibition summary{cursor:pointer;min-height:44px;font-size:14px}.exhibition details p{font-size:15px}.museum-note{padding:45px 12%;background:#e9ebe4;display:flex;justify-content:space-between;gap:25px}.museum-note span{font-size:12px}.museum-note p{font-size:22px}footer{padding:24px 5%;font-size:12px}footer strong{font-size:40px;font-weight:400;letter-spacing:-3px}@media(max-width:700px){.museum-hero{grid-template-columns:1fr;min-height:950px;padding:35px 8% 155px}.vertical-label{display:none}.museum-title h1{font-size:90px}.museum-title>p:first-child{margin-bottom:20px}.museum-intro{margin-top:25px}.sculpture-wrap{height:400px}.sculpture{width:155px;height:240px}.plinth{width:215px}.rotation{left:8%;right:8%;width:auto;bottom:25px}.exhibition{grid-template-columns:1fr;gap:35px;padding:50px 8%}.museum-note{display:block;padding:35px 8%}.museum-note p{margin-top:20px}.museum-logo span{display:none}}

$(function(){
$('#angle').on('input',function(){const angle=Number(this.value);$('.sculpture').css('transform','rotateX(-12deg) rotateY('+(angle-25)+'deg)');$('#angle-value').text(angle+'°');});$('#reset-angle').on('click',function(){$('#angle').val(0).trigger('input');});
});