GRIND — brutalistyczny sklep skate

<header><a href="#start" class="wordmark">GRIND</a><nav aria-label="Nawigacja"><a href="#deck">Deck</a><a href="#setup">Twój setup</a><a href="#faq">Pytania</a></nav></header><main><section class="skate-hero" id="start"><div class="headline"><p>Deska. Beton. Jeszcze raz.</p><h1>ULICA<br>TO TWÓJ<br>PARK.</h1><a href="#setup">Złóż swój setup</a></div><div class="deck-stage" id="deck"><span class="edition">CONCRETE SERIES</span><div class="board" aria-hidden="true"><svg viewBox="0 0 220 590"><defs><clipPath id="deck-outline"><rect x="12" y="10" width="196" height="570" rx="98"/></clipPath><pattern id="grip-grain" width="8" height="8" patternUnits="userSpaceOnUse"><rect width="8" height="8" fill="#252525"/><circle cx="2" cy="2" r="1" fill="#666"/></pattern></defs><g class="deck-front" clip-path="url(#deck-outline)"><rect x="12" y="10" width="196" height="570" rx="98" fill="#f8fc21" stroke="#000" stroke-width="5"/><path d="M12 135H208V215H12ZM12 295H208V375H12ZM12 455H208V535H12Z" fill="#000"/><g fill="#fff"><circle cx="77" cy="73" r="6"/><circle cx="143" cy="73" r="6"/><circle cx="77" cy="97" r="6"/><circle cx="143" cy="97" r="6"/><circle cx="77" cy="493" r="6"/><circle cx="143" cy="493" r="6"/></g><text x="110" y="265" text-anchor="middle" font-family="Arial" font-size="36" font-weight="900">GRIND</text></g><g class="deck-back"><rect x="12" y="10" width="196" height="570" rx="98" fill="url(#grip-grain)" stroke="#000" stroke-width="5"/><path d="M12 150H208" stroke="#fff" stroke-width="9"/><g fill="#aaa"><circle cx="77" cy="73" r="5"/><circle cx="143" cy="73" r="5"/><circle cx="77" cy="97" r="5"/><circle cx="143" cy="97" r="5"/><circle cx="77" cy="493" r="5"/><circle cx="143" cy="493" r="5"/></g></g></svg></div><button id="flip-deck" aria-pressed="false">Obróć deck</button><span class="deck-label" id="deck-status" role="status">Grafika / Concrete</span></div></section><section id="setup" class="setup"><div><h2>TWÓJ ROZMIAR.<br>TWÓJ RYTM.</h2><p>Węższy deck łatwiej obrócić. Szerszy daje więcej miejsca pod stopami. Wybierz punkt wyjścia do swojego setupu.</p></div><div class="selector"><div role="group" aria-label="Szerokość decku"><button data-size="7.75" aria-pressed="false">7.75″</button><button data-size="8.0" aria-pressed="true">8.0″</button><button data-size="8.5" aria-pressed="false">8.5″</button></div><p id="size-info" role="status">8.0″ — uniwersalny punkt wyjścia.</p><dl><div><dt>Profil</dt><dd>Medium concave</dd></div><div><dt>Materiał</dt><dd>7 warstw klonu</dd></div></dl></div></section><section id="faq" class="faq"><h2>BEZ ŚCIEMY.</h2><details><summary>Czy sam deck wystarczy do jazdy?</summary><p>Potrzebujesz jeszcze trucków, kółek, łożysk, śrub i gripu. Dopasuj szerokość trucków do deski.</p></details><details><summary>Jak wybrać pierwszy rozmiar?</summary><p>Zacznij od wygodnego ustawienia stóp. Jeśli możesz, stań na kilku deskach w sklepie i porównaj odczucia.</p></details></section></main><footer><strong>GRIND / KEEP ROLLING</strong><span>Projekt koncepcyjny sklepu skate.</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{background:#fff;color:#000;font-family:Arial,Helvetica,sans-serif}header{padding:20px 4%;border-bottom:4px solid #000}.wordmark{font-size:36px;letter-spacing:-3px;font-weight:900;text-decoration:none}nav{font-weight:bold}.skate-hero{display:grid;grid-template-columns:1.1fr 1fr;border-bottom:4px solid #000}.headline{padding:50px 7%;align-self:center}.headline p{font-size:15px;font-weight:bold}.headline h1{font-size:clamp(65px,9vw,150px);line-height:.87;letter-spacing:-.065em;font-weight:900;margin:28px 0 38px}.headline a{font-weight:bold;display:inline-block;border:3px solid #000;padding:16px 20px;box-shadow:6px 6px 0 #000;text-decoration:none}.headline a:hover{background:#f8fc21}.deck-stage{min-height:650px;position:relative;display:flex;align-items:center;justify-content:center;background:#183df0;color:#fff;overflow:hidden;border-left:4px solid #000;perspective:900px}.edition{position:absolute;left:25px;top:25px;font-weight:bold;letter-spacing:1px;font-size:12px}.board{height:500px;transform:rotate(23deg);transition:transform 600ms cubic-bezier(.2,.7,.2,1)}.board svg{height:100%;width:auto}.board.flipped{transform:rotate(-23deg) rotateY(180deg)}.board.flipped svg{filter:grayscale(1)}#flip-deck{position:absolute;bottom:25px;left:25px;background:#fff;color:#000;border:3px solid #000;padding:10px 20px;font-weight:bold}.deck-label{position:absolute;right:25px;bottom:42px;font-size:12px}.setup{display:grid;grid-template-columns:1fr 1fr;gap:8%;padding:65px 5%;border-bottom:4px solid #000;background:#f8fc21}.setup h2{font-weight:900;letter-spacing:-2px}.setup p{margin-top:25px}.selector [role="group"]{display:flex;gap:10px;flex-wrap:wrap}.selector button{background:transparent;border:3px solid #000;font-size:24px;font-weight:900;padding:15px}.selector button[aria-pressed="true"]{background:#000;color:#fff}.selector dl{margin-top:30px}.selector dl div{display:flex;justify-content:space-between;border-top:2px solid #000;padding:13px 0}.selector dd{margin:0;font-weight:bold}.faq{padding:65px 5%}.faq h2{margin-bottom:30px;font-weight:900}.faq details{border-top:2px solid #000;padding:22px 0}.faq summary{min-height:44px;cursor:pointer;font-size:20px;font-weight:bold}.faq p{margin-top:12px}footer{padding:25px 4%;background:#000;color:#fff;font-size:12px}@media(max-width:700px){.skate-hero,.setup{grid-template-columns:1fr}.headline{padding:40px 6%}.headline h1{font-size:85px}.deck-stage{border-left:0;border-top:4px solid #000;min-height:580px}.board{height:420px}.deck-label{bottom:90px;left:25px}.setup{gap:35px}.selector button{font-size:20px}}
.deck-back{display:none}.board.flipped .deck-front{display:none}.board.flipped .deck-back{display:block}.board.flipped svg{filter:none}

$(function(){
$('#flip-deck').on('click',function(){const flipped=$(this).attr('aria-pressed')!=='true';$(this).attr('aria-pressed',String(flipped));$('.board').toggleClass('flipped',flipped);$('#deck-status').text(flipped?'Grip / widok z góry':'Grafika / Concrete');});const descriptions={'7.75':'lekki deck do technicznych trików.','8.0':'uniwersalny punkt wyjścia.','8.5':'więcej stabilności pod stopami.'};$('[data-size]').on('click',function(){const size=$(this).attr('data-size');$('[data-size]').attr('aria-pressed','false');$(this).attr('aria-pressed','true');$('#size-info').text(size+'″ — '+descriptions[size]);});
});