ZENIT — nowoczesne obserwatorium

<header><a class="brand" href="#start">zenit<span>obserwatorium</span></a><nav aria-label="Nawigacja"><a href="#niebo">Mapa nieba</a><a href="#wizyta">Zaplanuj wieczór</a></nav></header>
<main><section class="cosmos" id="start"><div class="intro"><p class="eyebrow">Dalej niż wzrok.</p><h1>Noc otwiera nowy świat.</h1><p>Znajdź chwilę na spojrzenie w górę. Poznaj planety, ich orbity i odległości, których nie da się objąć wzrokiem.</p><a class="cta" href="#niebo">Wybierz planetę</a></div><div class="sky" aria-hidden="true"><svg viewBox="0 0 900 600"><circle cx="21" cy="39" r="2" fill="#bed9ee" opacity="0.3"/><circle cx="194" cy="128" r="1" fill="#bed9ee" opacity="0.43"/><circle cx="367" cy="217" r="1" fill="#bed9ee" opacity="0.56"/><circle cx="540" cy="306" r="2" fill="#bed9ee" opacity="0.69"/><circle cx="713" cy="395" r="1" fill="#bed9ee" opacity="0.8200000000000001"/><circle cx="886" cy="484" r="1" fill="#bed9ee" opacity="0.3"/><circle cx="159" cy="573" r="2" fill="#bed9ee" opacity="0.43"/><circle cx="332" cy="62" r="1" fill="#bed9ee" opacity="0.56"/><circle cx="505" cy="151" r="1" fill="#bed9ee" opacity="0.69"/><circle cx="678" cy="240" r="2" fill="#bed9ee" opacity="0.8200000000000001"/><circle cx="851" cy="329" r="1" fill="#bed9ee" opacity="0.3"/><circle cx="124" cy="418" r="1" fill="#bed9ee" opacity="0.43"/><circle cx="297" cy="507" r="2" fill="#bed9ee" opacity="0.56"/><circle cx="470" cy="596" r="1" fill="#bed9ee" opacity="0.69"/><circle cx="643" cy="85" r="1" fill="#bed9ee" opacity="0.8200000000000001"/><circle cx="816" cy="174" r="2" fill="#bed9ee" opacity="0.3"/><circle cx="89" cy="263" r="1" fill="#bed9ee" opacity="0.43"/><circle cx="262" cy="352" r="1" fill="#bed9ee" opacity="0.56"/><circle cx="435" cy="441" r="2" fill="#bed9ee" opacity="0.69"/><circle cx="608" cy="530" r="1" fill="#bed9ee" opacity="0.8200000000000001"/><circle cx="781" cy="19" r="1" fill="#bed9ee" opacity="0.3"/><circle cx="54" cy="108" r="2" fill="#bed9ee" opacity="0.43"/><circle cx="227" cy="197" r="1" fill="#bed9ee" opacity="0.56"/><circle cx="400" cy="286" r="1" fill="#bed9ee" opacity="0.69"/><circle cx="573" cy="375" r="2" fill="#bed9ee" opacity="0.8200000000000001"/><circle cx="746" cy="464" r="1" fill="#bed9ee" opacity="0.3"/><circle cx="19" cy="553" r="1" fill="#bed9ee" opacity="0.43"/><circle cx="192" cy="42" r="2" fill="#bed9ee" opacity="0.56"/><circle cx="365" cy="131" r="1" fill="#bed9ee" opacity="0.69"/><circle cx="538" cy="220" r="1" fill="#bed9ee" opacity="0.8200000000000001"/><circle cx="711" cy="309" r="2" fill="#bed9ee" opacity="0.3"/><circle cx="884" cy="398" r="1" fill="#bed9ee" opacity="0.43"/><circle cx="157" cy="487" r="1" fill="#bed9ee" opacity="0.56"/><circle cx="330" cy="576" r="2" fill="#bed9ee" opacity="0.69"/><circle cx="503" cy="65" r="1" fill="#bed9ee" opacity="0.8200000000000001"/><circle cx="676" cy="154" r="1" fill="#bed9ee" opacity="0.3"/><circle cx="849" cy="243" r="2" fill="#bed9ee" opacity="0.43"/><circle cx="122" cy="332" r="1" fill="#bed9ee" opacity="0.56"/><circle cx="295" cy="421" r="1" fill="#bed9ee" opacity="0.69"/><circle cx="468" cy="510" r="2" fill="#bed9ee" opacity="0.8200000000000001"/><circle cx="641" cy="599" r="1" fill="#bed9ee" opacity="0.3"/><circle cx="814" cy="88" r="1" fill="#bed9ee" opacity="0.43"/><circle cx="87" cy="177" r="2" fill="#bed9ee" opacity="0.56"/><circle cx="260" cy="266" r="1" fill="#bed9ee" opacity="0.69"/><circle cx="433" cy="355" r="1" fill="#bed9ee" opacity="0.8200000000000001"/><circle cx="606" cy="444" r="2" fill="#bed9ee" opacity="0.3"/><circle cx="779" cy="533" r="1" fill="#bed9ee" opacity="0.43"/><circle cx="52" cy="22" r="1" fill="#bed9ee" opacity="0.56"/><circle cx="225" cy="111" r="2" fill="#bed9ee" opacity="0.69"/><circle cx="398" cy="200" r="1" fill="#bed9ee" opacity="0.8200000000000001"/><circle cx="571" cy="289" r="1" fill="#bed9ee" opacity="0.3"/><circle cx="744" cy="378" r="2" fill="#bed9ee" opacity="0.43"/><circle cx="17" cy="467" r="1" fill="#bed9ee" opacity="0.56"/><circle cx="190" cy="556" r="1" fill="#bed9ee" opacity="0.69"/><circle cx="363" cy="45" r="2" fill="#bed9ee" opacity="0.8200000000000001"/><circle cx="536" cy="134" r="1" fill="#bed9ee" opacity="0.3"/><circle cx="709" cy="223" r="1" fill="#bed9ee" opacity="0.43"/><circle cx="882" cy="312" r="2" fill="#bed9ee" opacity="0.56"/><circle cx="155" cy="401" r="1" fill="#bed9ee" opacity="0.69"/><circle cx="328" cy="490" r="1" fill="#bed9ee" opacity="0.8200000000000001"/><circle cx="501" cy="579" r="2" fill="#bed9ee" opacity="0.3"/><circle cx="674" cy="68" r="1" fill="#bed9ee" opacity="0.43"/><circle cx="847" cy="157" r="1" fill="#bed9ee" opacity="0.56"/><circle cx="120" cy="246" r="2" fill="#bed9ee" opacity="0.69"/><circle cx="293" cy="335" r="1" fill="#bed9ee" opacity="0.8200000000000001"/><g transform="translate(470 310) rotate(-25)"><ellipse rx="310" ry="160" fill="none" stroke="#42607b"/><ellipse rx="225" ry="115" fill="none" stroke="#42607b"/><ellipse rx="140" ry="72" fill="none" stroke="#42607b"/><circle r="68" fill="#8febf2"/><path d="M0-68A68 68 0 0 1 0 68A50 68 0 0 0 0-68" fill="#39a7bc"/><circle cx="-225" r="15" fill="#c1d3f4"/><circle cx="140" r="22" fill="#e69778"/><g class="satellite"><circle cx="310" r="32" fill="#dcbd8b"/><ellipse cx="310" rx="58" ry="12" fill="none" stroke="#dcbd8b" stroke-width="7"/></g></g></svg><span class="sky-caption">Układ Słoneczny / schemat orbit</span></div><div class="coordinate">Spójrz w górę.<span>Reszta może poczekać.</span></div></section>
<section class="planet-panel" id="niebo"><div><p class="eyebrow">Twój cel na dziś</p><h2 id="planet-name">Saturn</h2><p id="planet-copy">Gazowy olbrzym otoczony pierścieniami lodu i skał. Każdy obrót wokół Słońca zajmuje mu niemal trzy dekady.</p></div><div><div class="planet-options" role="group" aria-label="Wybierz planetę"><button data-planet="0" aria-pressed="true">Saturn</button><button data-planet="1" aria-pressed="false">Mars</button><button data-planet="2" aria-pressed="false">Neptun</button></div><dl><div><dt>Średnica</dt><dd id="diameter">116 460 km</dd></div><div><dt>Obieg Słońca</dt><dd id="orbit">29,4 roku</dd></div></dl><p id="planet-status" role="status">Wybrano: Saturn</p></div></section>
<section class="visit" id="wizyta"><h2>Przygotuj się na noc.</h2><div><p>Wybierz miejsce z dala od ulicznych latarni. Daj oczom około 20 minut na przyzwyczajenie do ciemności. Ciepła kurtka przyda się nawet latem.</p><details><summary>Co zabrać na obserwację?</summary><p>Lornetkę, mapę nieba, termos i latarkę z czerwonym światłem. Zanim wyjdziesz, sprawdź zachmurzenie.</p></details></div></section></main><footer><strong>zenit</strong><span>Przestrzeń dla ciekawości.</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:#081827;color:#eaf5ff;font-family:Arial,Helvetica,sans-serif}header,footer{padding:24px 5%;border-bottom:1px solid #334b60}.brand{font-size:32px;font-weight:700;text-decoration:none;letter-spacing:-2px}.brand span{font-size:12px;letter-spacing:1px;display:block;margin-top:3px}nav{font-size:14px}nav a{text-decoration:none}.cosmos{position:relative;min-height:660px;display:flex;align-items:center;overflow:hidden}.intro{position:relative;z-index:1;padding:65px 5%;width:57%}.eyebrow{color:#8febf2;font-size:14px;margin-bottom:22px}.intro h1{font-size:clamp(46px,6.5vw,104px);font-weight:500;line-height:1.02;letter-spacing:-.055em;margin-bottom:28px}.intro p:not(.eyebrow){max-width:38ch;color:#c5d7e5}.cta{display:inline-flex;min-height:48px;align-items:center;background:#8febf2;color:#081827;padding:12px 24px;text-decoration:none;margin-top:30px}.cta:hover{background:#fff}.sky{position:absolute;right:-9%;top:2%;width:72%;height:90%;pointer-events:none}.sky svg{width:100%;height:100%;object-fit:contain}.sky-caption{position:absolute;right:20%;bottom:5%;font-size:12px;color:#bed9ee}.coordinate{position:absolute;bottom:25px;left:5%;font-size:12px;color:#bed9ee}.coordinate span{margin-left:22px}.satellite{transform-origin:0 0;transition:transform 700ms}.planet-panel{padding:64px 5%;background:#122c40;display:grid;grid-template-columns:1fr 1fr;gap:10%}.planet-panel h2{margin-bottom:20px}.planet-options{display:flex;gap:8px;flex-wrap:wrap}.planet-options button{background:transparent;border:1px solid #7895a9;color:#eaf5ff;padding:12px 20px}.planet-options button[aria-pressed="true"]{background:#8febf2;color:#081827;border-color:#8febf2}dl{display:flex;gap:48px;margin:32px 0}dt{font-size:13px;color:#bed9ee}dd{margin:10px 0 0;font-size:26px}#planet-status{font-size:13px;color:#8febf2}.visit{padding:80px 5%;display:grid;grid-template-columns:1fr 1fr;gap:10%}details{margin-top:24px;border-top:1px solid #7895a9;padding-top:18px}summary{cursor:pointer;min-height:44px}footer{border-top:1px solid #334b60;font-size:14px}@media(max-width:700px){.cosmos{display:block;min-height:780px}.intro{width:100%;padding-top:40px}.intro h1{font-size:58px}.sky{top:355px;right:-15%;width:125%;height:360px}.sky-caption{bottom:0}.planet-panel,.visit{grid-template-columns:1fr;gap:36px}.coordinate span{display:block;margin:5px 0 0}dl{gap:28px}}
.cosmos{min-height:940px;display:block}.intro{width:100%;text-align:center;padding:50px 5% 0}.intro h1{font-size:clamp(54px,7vw,104px)}.intro h1 br{display:none}.intro p:not(.eyebrow){margin:auto;max-width:54ch}.intro .eyebrow{margin-bottom:18px}.intro .cta{margin-top:24px}.sky{top:370px;right:7%;width:86%;height:480px}.sky-caption{bottom:0;right:10%}.coordinate{bottom:30px}.sky svg{height:100%}@media(max-width:700px){.cosmos{min-height:890px}.intro{padding-top:35px}.intro h1{font-size:54px}.sky{top:470px;right:-9%;width:118%;height:310px}.sky-caption{bottom:-25px;font-size:10px}.coordinate{bottom:25px}}@media(min-width:701px){.cosmos{min-height:800px}.sky{top:300px;height:410px}.intro h1{font-size:clamp(54px,6.8vw,98px)}}

$(function(){
const planets=[['Saturn','Gazowy olbrzym otoczony pierścieniami lodu i skał. Każdy obrót wokół Słońca zajmuje mu niemal trzy dekady.','116 460 km','29,4 roku'],['Mars','Skalista planeta o rdzawym kolorze. Jej powierzchnię przecinają wielkie kaniony, a nad równinami górują wygasłe wulkany.','6 779 km','687 dni'],['Neptun','Daleki, lodowy olbrzym. Błękitna atmosfera skrywa niezwykle silne wiatry i świat, do którego dociera niewiele światła.','49 244 km','164,8 roku']];$('[data-planet]').on('click',function(){const i=Number($(this).attr('data-planet'));const p=planets[i];$('[data-planet]').attr('aria-pressed','false');$(this).attr('aria-pressed','true');$('#planet-name').text(p[0]);$('#planet-copy').text(p[1]);$('#diameter').text(p[2]);$('#orbit').text(p[3]);$('#planet-status').text('Wybrano: '+p[0]);$('.satellite').css('transform','rotate('+i*60+'deg)');});
});