/* ========================================================================= WoWPoPolsku — STYLE WŁASNE ------------------------------------------------------------------------- Wszystko, czego Tailwind nie da klasą narzędziową: ziarno tła, ścięte narożniki, animacje, zachowanie . W Django: static/css/wlasne.css, wciągane w base.html przez {% static %}. Zasada: tu trafia tylko to, co jest naprawdę wielokrotnego użytku. Jednorazowe odstępy i kolory robimy klasami Tailwinda w szablonie — inaczej wracamy do wielkiego arkusza CSS, którego nikt nie rusza ze strachu. ========================================================================= */ html { scroll-behavior: smooth; } /* ═══════════════ ZIARNO TŁA ═══════════════ Delikatny szum nałożony na całą stronę. Bez niego duże gradienty wyglądają jak plastik. SVG w data-uri, więc zero dodatkowych żądań do serwera. */ .ziarno::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .3; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); } /* ═══════════════ ŚCIĘTE NAROŻNIKI ═══════════════ Dwa przeciwległe rogi ucięte pod 45°. Daje „kuty" charakter bez ani jednej grafiki. Uwaga: clip-path przycina też obramowanie, więc ramkę robimy przez zagnieżdżenie — element zewnętrzny z tłem-gradientem i p-px, wewnętrzny z właściwym tłem. Oba muszą mieć tę samą klasę klipu. */ .klip { clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px); } .klip-s { clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); } /* ═══════════════ TYPOGRAFIA ═══════════════ */ .nadpis { letter-spacing: .34em; } /* Cyfry nowoczesne (lining) w całym interfejsie. Kroje o rodowodzie książkowym domyślnie składają cyfry mediewalne: 3, 4, 5, 7 i 9 schodzą pod linię pisma, 6 i 8 wystają w górę. W książce to zaleta, w tabeli postępu — wygląda jak błąd składu. Dotyczy to zarówno Georgii z awaryjnego stosu, jak i samego Cinzela. font-variant-numeric jest dziedziczone, więc dla zwykłych elementów starczy jedna reguła na . Wyjątkiem są elementy z tailwindowym `tabular-nums`: ta klasa składa całą własność z osobnych zmiennych i nadpisałaby wartość odziedziczoną. Dlatego druga reguła dokłada cyfry lining do jej zmiennej, zamiast walczyć o specyficzność. */ body { font-variant-numeric: lining-nums; } .tabular-nums { --tw-numeric-figure: lining-nums; } /* ═══════════════ ANIMACJE ═══════════════ */ @keyframes obrot { to { transform: rotate(360deg); } } @keyframes obrot-wstecz { to { transform: rotate(-360deg); } } @keyframes tetno { 0%,100% { opacity:.45; transform:scale(1); } 50% { opacity:.85; transform:scale(1.045); } } @keyframes unos { 0%,100% { transform:translateY(0); opacity:.25; } 50% { transform:translateY(-16px); opacity:.9; } } @keyframes zorza { 0%,100% { opacity:.35; } 50% { opacity:.7; } } @keyframes zjazd { 0%,100% { transform:translateY(0); opacity:.45; } 50% { transform:translateY(7px); opacity:1; } } .a-obrot { animation: obrot 70s linear infinite; transform-origin: center; } .a-wstecz { animation: obrot-wstecz 48s linear infinite; transform-origin: center; } .a-tetno { animation: tetno 5.5s ease-in-out infinite; transform-origin: center; } .a-zorza { animation: zorza 8s ease-in-out infinite; } .a-unos { animation: unos 7s ease-in-out infinite; } .a-zjazd { animation: zjazd 2.4s ease-in-out infinite; } /* ═══════════════ ISKRY OGNISKA ═══════════════ Żar unoszący się od dołu kadru, jakby ognisko stało poza ekranem. Rysowaniem zajmuje się wspolne/iskry.js na elemencie ; tutaj zostaje tylko ułożenie warstwy. Powód wyboru canvasu: losowe tory, boczne znoszenie i migotanie kilkudziesięciu cząstek nie dają się zrobić w statycznym CSS bez setek linii inline — i tak wyszłyby regularne. Bez JavaScriptu canvas jest pusty, więc strona pozostaje poprawna: iskry są ozdobą, nie treścią. Skrypt sam też pilnuje reduced-motion, reguła niżej jest drugim zabezpieczeniem. */ .iskry { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .iskry { display: none; } } /* ═══════════════ PORTAL ═══════════════ Zasłona teleportu między ekranem Obszarów a katalogiem. Znacznik: redakcja/_portal.html, logika czasu: static/js/portal.js. Domyślnie display: none. Pokazują ją WYŁĄCZNIE klasy na , które dokłada JavaScript — bez skryptów zasłona nie istnieje i nie ma jak przykryć platformy komuś, kto ma je wyłączone. */ .portal { position: fixed; inset: 0; z-index: 100; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 30px; background: #04070F; } html.portal-wejscie .portal, html.portal-wyjscie .portal { display: flex; } /* Wejście gaśnie szybko: użytkownik właśnie kliknął i czeka na reakcję. Wyjście schodzi wolniej, bo tam nikt już na nic nie czeka — strona pod spodem jest gotowa i chodzi tylko o to, żeby się wyłoniła, a nie mrugnęła. */ html.portal-wejscie .portal { animation: portal-zaslona .3s ease forwards; } html.portal-koniec .portal { animation: portal-odslona .68s ease forwards; } @keyframes portal-zaslona { from { opacity: 0; } to { opacity: 1; } } @keyframes portal-odslona { from { opacity: 1; } to { opacity: 0; } } .portal-scena { width: min(86vw, 620px); height: auto; } /* Wejście: kamera wjeżdża w scenę. Wyjście: przelatuje przez bramę i scena ucieka na boki — oko czyta to jako przejście PRZEZ nią, a nie jako drugie odtworzenie tej samej animacji. */ html.portal-wejscie .portal-scena { animation: scena-wjazd .85s cubic-bezier(.2,.85,.25,1) both; } html.portal-koniec .portal-scena { animation: scena-przelot .68s cubic-bezier(.4,0,.7,1) both; } @keyframes scena-wjazd { from { transform: scale(1.14); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes scena-przelot { from { transform: scale(1); opacity: 1; } to { transform: scale(1.7); opacity: 0; } } /* Wszystkie ruchy w scenie mają wspólny punkt zbiegu: środek bramy w układzie viewBoksu, czyli 200 140. Bez `transform-box: view-box` przeglądarka liczy początek układu z pudełka KAŻDEGO elementu osobno i pierścienie rozjeżdżają się w różne strony zamiast rozchodzić z jednego miejsca. */ .portal-tunel path, .portal-pyl circle { transform-box: view-box; transform-origin: 200px 140px; } /* Pierścienie tunelu: od punktu zbiegu na widza. Krycie rośnie na starcie i gaśnie na końcu, więc nie widać ani skąd wyskakują, ani gdzie znikają. */ .portal-tunel path { animation: portal-nadciaga 5.5s linear infinite; } @keyframes portal-nadciaga { 0% { transform: scale(.05); opacity: 0; } 12% { opacity: .5; } 70% { opacity: .22; } 100% { transform: scale(3.4); opacity: 0; } } /* Pył leci wyraźnie szybciej niż pierścienie — ta różnica prędkości jest tu całą głębią. Gdyby obie warstwy szły w tym samym tempie, tunel spłaszczyłby się do pulsującego wzoru. */ .portal-pyl circle { animation: portal-pyl 2.6s linear infinite; } @keyframes portal-pyl { 0% { transform: scale(.2); opacity: 0; } 18% { opacity: .85; } 100% { transform: scale(4.2); opacity: 0; } } .portal-brama { animation: tetno 2.8s ease-in-out infinite; transform-origin: center; } .portal-iskra { animation: tetno 1.9s ease-in-out infinite; transform-origin: center; } /* Kołysanie postaci. Okres 0,62 s to tempo spokojnego marszu: szybciej czyta się jako bieg, wolniej jako brodzenie. Amplituda celowo mikroskopijna — przy większej sylwetka zaczyna podskakiwać zamiast iść. */ .portal-postac { transform-box: view-box; transform-origin: center; animation: portal-krok .62s ease-in-out infinite; } @keyframes portal-krok { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } } .portal-podpis { margin: 0; text-align: center; } .portal-nazwa { display: block; font-family: Cinzel, Georgia, serif; font-size: clamp(20px, 3vw, 30px); font-weight: 700; letter-spacing: .06em; color: #EDE8DC; } .portal-nazwa:empty { display: none; } .portal-nota { display: block; margin-top: 9px; font-family: Inter, sans-serif; font-size: 10px; letter-spacing: .34em; text-transform: uppercase; color: #C9A227; } html.portal-wejscie .portal-podpis { animation: portal-podpis-wejscie .7s ease .12s both; } @keyframes portal-podpis-wejscie { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } } /* Kto ma wyłączony ruch, ten nie dostaje portalu w ogóle — portal.js pomija wtedy przejmowanie kliknięć. Reguła niżej jest drugim zabezpieczeniem na wypadek, gdyby klasa trafiła na inną drogą. */ @media (prefers-reduced-motion: reduce) { html.portal-wejscie .portal, html.portal-wyjscie .portal { display: none; } } /* ═══════════════ MAPA ŚWIATA ═══════════════ Rysowana od zera w SVG przez static/js/mapa-swiata.js. Kształt lądu jest jednocześnie obszarem klikalnym, więc nie ma osobnej warstwy hotspotów, która mogłaby się rozjechać z podkładem. Bez JavaScriptu plansza zostaje ukryta, a widoczna jest tabela z tymi samymi liczbami — mapa jest sposobem oglądania danych, nie jedynym do nich dostępem. */ #mapa-swiata { border: 1px solid #1E2E4F; background: #04070F; overflow: hidden; } .mw-gora { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 11px 18px; border-bottom: 1px solid #1E2E4F; background: #070C1A; } .mw-slad { display: flex; align-items: center; gap: 7px; font-size: 12px; } .mw-slad button { background: none; border: 0; color: #C9A227; cursor: pointer; font: inherit; padding: 2px 3px; text-decoration: underline; text-decoration-color: rgba(201, 162, 39, .3); text-underline-offset: 3px; } .mw-slad button:hover { color: #F0D284; } .mw-slad .teraz { font-family: Cinzel, Georgia, serif; letter-spacing: .05em; color: #EDE8DC; } .mw-slad .strz { color: #5E6980; } .mw-leg { display: flex; gap: 13px; font-size: 10px; color: #8794AE; flex-wrap: wrap; } .mw-leg i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; vertical-align: -1px; clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); } .mw-scena { position: relative; } .mw-svg { display: block; width: 100%; height: auto; } .mw-svg[hidden], .mw-region[hidden], .mw-szczegoly[hidden], .mw-region-pozostale[hidden] { display: none !important; } .mw-swiat { cursor: pointer; } .mw-swiat-sfera, .mw-swiat-orbita, .mw-swiat-blask, .mw-swiat-lad { transition: stroke .22s, stroke-width .22s, opacity .22s, filter .22s; } .mw-swiat:hover .mw-swiat-sfera, .mw-swiat:focus-visible .mw-swiat-sfera { stroke: #F0D284; stroke-width: 1.9; opacity: 1; filter: drop-shadow(0 0 12px rgba(240, 210, 132, .45)); } .mw-swiat:hover .mw-swiat-blask, .mw-swiat:focus-visible .mw-swiat-blask { opacity: .26; } .mw-swiat:hover .mw-swiat-orbita, .mw-swiat:focus-visible .mw-swiat-orbita { opacity: .75; stroke: #F0D284; } .mw-swiat:focus-visible { outline: none; } .mw-swiat-kropka { stroke: #04070F; stroke-width: 1.2px; } /* Łuk postępu bywa cienki na tle jasnej mgławicy — ciemny cień go odkleja. */ .mw-swiat-postep { filter: drop-shadow(0 0 3px rgba(4, 7, 15, .9)); } .mw-swiat-nazwa { fill: #F4F0E7; font-family: Cinzel, Georgia, serif; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-anchor: middle; paint-order: stroke; stroke: rgba(4, 7, 15, .98); stroke-width: 4px; pointer-events: none; } .mw-swiat:hover .mw-swiat-nazwa, .mw-swiat:focus-visible .mw-swiat-nazwa { fill: #F0D284; } /* Obrót planety. Trzy identyczne kopie pasm chmur stoją co --przesuw, więc przesunięcie o dokładnie ten okres wraca do stanu początkowego i pętla nie ma szwu. Sto pięćdziesiąt sekund to ruch na granicy zauważalności — mapa ma żyć, a nie migać komuś przed oczami przez cały dzień pracy. */ .mw-swiat-chmury { transform-box: view-box; transform-origin: 0 0; animation: mw-chmury 150s linear infinite; } @keyframes mw-chmury { to { transform: translateX(var(--przesuw, 0px)); } } /* Płyty Rubieży dryfują każda we własnym rytmie (czas i opóźnienie nadaje skrypt), bo zgodny ruch wyglądałby jak drganie całego obrazka. */ .mw-odlamek { transform-box: view-box; transform-origin: 0 0; animation: mw-dryf 15s ease-in-out infinite; } @keyframes mw-dryf { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(1.4px, -2.6px); } } /* Gwiazdy: bazowa jasność siedzi w --jasnosc, więc każda mruga we własnym zakresie zamiast wszystkie do tej samej wartości. */ .mw-gwiazda-mruga { animation: mw-mruganie 5s ease-in-out infinite; } @keyframes mw-mruganie { 0%, 100% { opacity: calc(var(--jasnosc, .6) * .3); } 50% { opacity: var(--jasnosc, .6); } } .mw-gwiazda-blask { animation: mw-rozblysk 7s ease-in-out infinite; } @keyframes mw-rozblysk { 0%, 100% { opacity: .5; } 50% { opacity: 1; } } .mw-mglawica-a { animation: mw-oddech-mgly 46s ease-in-out infinite; } .mw-mglawica-b { animation: mw-oddech-mgly 62s ease-in-out infinite reverse; } @keyframes mw-oddech-mgly { 0%, 100% { opacity: .72; } 50% { opacity: 1; } } .mw-maelstrom-nazwa { fill: #E7C39A; font-family: Cinzel, Georgia, serif; font-size: 8px; font-weight: 700; letter-spacing: .12em; text-anchor: middle; paint-order: stroke; stroke: #04070F; stroke-width: 3px; } /* UWAGA: obrotu wiru NIE ma w tym pliku i to jest decyzja, nie przeoczenie. Wcześniej stał tu `animation` z `transform-box: view-box; transform-origin: 0 0`, co miało obracać pasma wokół środka wiru. Wir jest jednak rysowany w grupie przesuniętej przez `translate(...)`, a przy takim ustawieniu punkt odniesienia bierze się z viewBoksu całego SVG, nie z lokalnego układu grupy — pasma zataczały więc wielkie koło wokół lewego górnego narożnika mapy i po chwili wyjeżdżały za kadr. Bez żadnego błędu w konsoli: wir po prostu „nie kręcił się", bo tego, co się kręciło, nie było widać. Obrót robi teraz SMIL (``) dokładany w mapa-swiata.js. W SVG obraca się on wokół (0,0) własnego układu współrzędnych elementu, więc nie ma tu żadnej dwuznaczności. Skrypt sam pomija animację przy `prefers-reduced-motion`, bo CSS-owa reguła z końca tego pliku nie zatrzymuje SMIL-a. Zostają za to animacje niezależne od punktu odniesienia (przesunięcia i krycie) — te są w CSS bezpieczne. */ .mw-region { background: #060A13; } .mw-region-kadr { position: relative; overflow: hidden; isolation: isolate; background: #070C1A; } .mw-region-svg { display: block; width: 100%; height: auto; } .mw-region-kartusz { position: absolute; left: 2.2%; top: 2.7%; z-index: 3; max-width: min(42%, 330px); padding: 10px 15px 9px; color: #EDE8DC; border: 1px solid rgba(201, 162, 39, .42); border-left: 3px solid #C9A227; background: rgba(4, 7, 15, .88); clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%); } .mw-region-kartusz strong { display: block; font-family: Cinzel, Georgia, serif; font-size: clamp(12px, 1.7vw, 21px); line-height: 1.16; letter-spacing: .08em; } .mw-region-kartusz span { display: block; margin-top: 3px; color: #AEB8CB; font-family: Inter, sans-serif; font-size: clamp(8px, .9vw, 11px); letter-spacing: .035em; } .mw-region-lad { pointer-events: none; } .mw-region-kontur { opacity: .9; filter: drop-shadow(0 0 5px rgba(91, 141, 224, .42)); } .mw-region-biomy { opacity: .88; } .mw-tunele-animy { mix-blend-mode: screen; } .mw-tunel-animy path { vector-effect: non-scaling-stroke; } .mw-tunel-animy-zew { filter: drop-shadow(0 0 13px rgba(117, 98, 181, .62)); } .mw-tunel-animy-powloka { filter: drop-shadow(0 0 7px rgba(110, 169, 218, .7)); } .mw-tunel-animy-rdzen { filter: drop-shadow(0 0 4px rgba(201, 223, 255, .9)); } .mw-tunel-animy-czastka { filter: url(#rTunelBlask); } .mw-zlowroga-anima { mix-blend-mode: screen; filter: url(#rCzeluscBlask); } .mw-zlowroga-anima-aura, .mw-zlowroga-anima-zyla { vector-effect: non-scaling-stroke; } .mw-zlowroga-anima-zyla { filter: drop-shadow(0 0 5px rgba(190, 16, 48, .82)); } .mw-zlowroga-anima-iskra { filter: drop-shadow(0 0 5px rgba(255, 59, 84, .95)); } .mw-cienie-emblematy { mix-blend-mode: screen; } .mw-cienie-torghast { filter: drop-shadow(0 0 7px rgba(166, 29, 59, .72)); } .mw-cienie-nekropolia { filter: drop-shadow(0 0 7px rgba(130, 173, 99, .58)); } .mw-cienie-nathria { filter: drop-shadow(0 0 7px rgba(164, 38, 68, .62)); } .mw-cienie-swiatynia_kyrian { filter: drop-shadow(0 0 8px rgba(225, 215, 156, .62)); } .mw-cienie-serce_lasu { filter: drop-shadow(0 0 9px rgba(102, 137, 204, .68)); } .mw-cienie-swiatlik { filter: drop-shadow(0 0 5px rgba(199, 220, 255, .95)); } .mw-cienie-pierwsi { filter: drop-shadow(0 0 7px rgba(211, 203, 163, .6)); } .mw-draenor-wojna { mix-blend-mode: screen; } .mw-draenor-szlak-cien, .mw-draenor-szlak-zelazo, .mw-draenor-szlak-zar { vector-effect: non-scaling-stroke; } .mw-draenor-szlak-zelazo { filter: drop-shadow(0 0 5px rgba(157, 67, 32, .72)); } .mw-draenor-szlak-zar { filter: drop-shadow(0 0 4px rgba(255, 139, 50, .95)); } .mw-draenor-szlak-iskra { filter: drop-shadow(0 0 5px rgba(255, 166, 66, .95)); } .mw-draenor-oddzial { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .9)) drop-shadow(0 0 2px rgba(196, 103, 56, .42)); } .mw-draenor-kuznia { filter: drop-shadow(0 0 8px rgba(220, 79, 31, .68)); } .mw-draenor-portal { filter: drop-shadow(0 0 10px rgba(214, 53, 27, .82)); } .mw-draenor-dym { vector-effect: non-scaling-stroke; } .mw-draenor-landmarki { mix-blend-mode: screen; } .mw-draenor-oshugun { filter: drop-shadow(0 0 8px rgba(154, 146, 218, .62)); } .mw-draenor-dusza { filter: drop-shadow(0 0 5px rgba(220, 230, 255, .94)); } .mw-draenor-iglice_araku { filter: drop-shadow(5px 7px 7px rgba(0, 0, 0, .7)); } .mw-draenor-auchindoun { filter: drop-shadow(0 0 7px rgba(141, 193, 233, .58)); } .mw-draenor-karabor { filter: drop-shadow(0 0 6px rgba(112, 132, 198, .52)); } .mw-strefa { cursor: pointer; } .mw-strefa.bez-danych { cursor: default; } .mw-strefa-plyta { opacity: .84; transition: filter .22s, opacity .22s; } .mw-strefa-stan { opacity: .8; stroke-linejoin: round; transition: fill .22s, stroke .22s, stroke-width .22s; } .mw-strefa:hover .mw-strefa-plyta, .mw-strefa:focus-visible .mw-strefa-plyta, .mw-strefa.aktywny .mw-strefa-plyta { opacity: 1; filter: drop-shadow(0 0 11px rgba(240, 210, 132, .45)); } .mw-strefa:hover .mw-strefa-stan, .mw-strefa:focus-visible .mw-strefa-stan, .mw-strefa.aktywny .mw-strefa-stan { stroke: #F0D284; stroke-width: 2.25; } .mw-strefa:focus-visible { outline: none; } .mw-strefa-nazwa { fill: #F4F0E7; font-family: Inter, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .025em; text-anchor: middle; paint-order: stroke; stroke: rgba(4, 7, 15, .98); stroke-width: 4.5px; stroke-linejoin: round; pointer-events: none; } .mw-strefa-nazwa.dluga { font-size: 10.5px; letter-spacing: .012em; } .mw-strefa.bez-danych .mw-strefa-nazwa { fill: #AEB8CB; } .mw-strefa:hover .mw-strefa-nazwa, .mw-strefa:focus-visible .mw-strefa-nazwa, .mw-strefa.aktywny .mw-strefa-nazwa { fill: #F0D284; } .mw-strefa-punkt { pointer-events: none; stroke: #F8F5EC; stroke-width: 1; filter: drop-shadow(0 0 4px rgba(4, 7, 15, .95)); } .mw-region-pozostale { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 18px; border-top: 1px solid #1E2E4F; background: #070C1A; } .mw-region-pozostale > span { color: #8794AE; font-family: Inter, sans-serif; font-size: 10px; letter-spacing: .04em; } .mw-region-pozostale > div { display: flex; gap: 7px; flex-wrap: wrap; } .mw-region-poboczna { --stan: #5E6980; padding: 5px 8px 5px 10px; border: 1px solid #29395D; border-left: 3px solid var(--stan); background: rgba(4, 7, 15, .76); color: #AEB8CB; cursor: pointer; font-family: Inter, sans-serif; font-size: 10px; } .mw-region-poboczna:hover, .mw-region-poboczna:focus-visible, .mw-region-poboczna.aktywny { border-color: #C9A227; border-left-color: var(--stan); color: #F0D284; } .mw-szczegoly { padding: 22px 24px 25px; border-top: 1px solid #C9A227; background: linear-gradient(135deg, rgba(201, 162, 39, .055), transparent 36%), #070C1A; } .mw-szczegoly-gora { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 17px; } .mw-nadpis { color: #C9A227; font-family: Inter, sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; } .mw-szczegoly h3 { margin: 4px 0 3px; color: #EDE8DC; font-family: Cinzel, Georgia, serif; font-size: clamp(20px, 2.5vw, 30px); line-height: 1.14; letter-spacing: .025em; } .mw-szczegoly-gora p { margin: 0; color: #8794AE; font-family: Inter, sans-serif; font-size: 12px; } .mw-katalog { flex: 0 0 auto; padding: 9px 13px; border: 1px solid #C9A227; background: rgba(201, 162, 39, .09); color: #F0D284; cursor: pointer; font-family: Inter, sans-serif; font-size: 11px; font-weight: 650; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); } .mw-katalog:hover, .mw-katalog:focus-visible { background: rgba(201, 162, 39, .17); } .mw-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 20px; } .mw-kpi-kafel { padding: 10px 12px; border: 1px solid #1E2E4F; background: rgba(4, 7, 15, .72); } .mw-kpi-kafel span { color: #8794AE; font-family: Inter, sans-serif; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; } .mw-kpi-kafel strong { display: block; margin-top: 2px; color: #EDE8DC; font-family: Cinzel, Georgia, serif; font-size: 20px; font-variant-numeric: tabular-nums; } .mw-kpi-tor { height: 3px; margin-top: 7px; overflow: hidden; background: #111B36; } .mw-kpi-tor i { display: block; height: 100%; } .mw-tabela-przewijana { overflow-x: auto; overflow-y: visible; overscroll-behavior-x: contain; overscroll-behavior-y: auto; } .mw-tabela-fabul { min-width: 900px; font-family: Inter, sans-serif; } .mw-tabela-fabul caption { color: #AEB8CB; } .mw-tabela-fabul thead th { text-align: left; } .mw-tabela-fabul th, .mw-tabela-fabul td { vertical-align: middle; } .mw-tabela.mw-tabela-fabul tbody th { min-width: 255px; max-width: 380px; color: #EDE8DC; font-family: Inter, sans-serif; font-size: 11.5px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; } .mw-tabela-fabul tbody td { color: #AEB8CB; text-align: left; font-size: 11px; } .mw-tabela-fabul .mw-liczba { color: #EDE8DC; text-align: right; font-variant-numeric: tabular-nums; } .mw-patch { display: inline-block; padding: 2px 6px; border: 1px solid #29395D; color: #A8CBFF; background: rgba(91, 141, 224, .08); font-variant-numeric: tabular-nums; } .mw-postep-komorka { display: grid; grid-template-columns: 32px 58px; align-items: center; gap: 7px; } .mw-postep-komorka b { color: #EDE8DC; font-size: 10.5px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; } .mw-postep-komorka > i { display: block; height: 3px; overflow: hidden; background: #111B36; } .mw-postep-komorka em { display: block; height: 100%; } .kont { cursor: pointer; } .kont .plyta { transition: filter .3s; } .kont:hover .plyta, .kont:focus-visible .plyta { filter: drop-shadow(0 0 14px rgba(240, 210, 132, .55)); } .kont .kontur { transition: stroke .3s, stroke-width .3s; } .kont:hover .kontur, .kont:focus-visible .kontur { stroke: #F0D284; stroke-width: 1.9; } .kont:focus-visible { outline: none; } .kont .nazwa { font-family: Cinzel, Georgia, serif; font-size: 11.5px; font-weight: 700; fill: #EDE8DC; letter-spacing: .17em; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: rgba(4, 7, 15, .94); stroke-width: 4.5px; transition: fill .3s; } .kont:hover .nazwa { fill: #F0D284; } .kont.spi { cursor: default; } .kont.spi .nazwa { fill: #8794AE; } .med { cursor: pointer; } .med .tarcza { transition: stroke .25s, stroke-width .25s, filter .25s; stroke-width: 1.2; } .med:hover .tarcza, .med:focus-visible .tarcza { stroke: #F0D284; stroke-width: 2; filter: drop-shadow(0 0 11px rgba(240, 210, 132, .55)); } .med:focus-visible { outline: none; } .med .podpis { font-family: Cinzel, Georgia, serif; font-size: 9.5px; fill: #EDE8DC; letter-spacing: .05em; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: rgba(4, 7, 15, .94); stroke-width: 3.5px; transition: fill .25s; } .med:hover .podpis { fill: #F0D284; } .mw-dymek { position: absolute; min-width: 216px; max-width: 270px; padding: 12px 14px; pointer-events: none; opacity: 0; transform: translateY(5px); transition: opacity .17s, transform .17s; background: rgba(4, 7, 15, .97); border: 1px solid #1E2E4F; border-left: 2px solid #C9A227; font-size: 11.5px; z-index: 6; clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); } .mw-dymek.jest { opacity: 1; transform: translateY(0); } .mw-dymek h4 { margin: 0 0 8px; font-family: Cinzel, Georgia, serif; font-size: 13px; letter-spacing: .04em; color: #EDE8DC; } .mw-w { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; color: #8794AE; } .mw-w b { color: #EDE8DC; font-weight: 500; font-variant-numeric: tabular-nums; } .mw-w.cicho { color: #5E6980; font-style: italic; } .mw-hr { height: 1px; background: #1E2E4F; margin: 8px 0; } .mw-tor { height: 3px; background: #111B36; margin-top: 3px; overflow: hidden; } .mw-tor i { display: block; height: 100%; } .mw-dol { padding: 9px 18px; border-top: 1px solid #1E2E4F; background: #070C1A; font-size: 10px; color: #5E6980; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } /* Notka dla gościa: mapa jest publiczna, treść misji nie. */ .mw-gosc { padding: 9px 18px; border-top: 1px solid #1E2E4F; background: #070C1A; font-size: 11px; color: #8794AE; margin: 0; } .mw-zapas { padding: 14px 18px; } .mw-tabela { width: 100%; border-collapse: collapse; font-size: 12px; } .mw-tabela caption { text-align: left; padding-bottom: 8px; color: #8794AE; font-size: 11px; } .mw-tabela th, .mw-tabela td { padding: 6px 8px; border-bottom: 1px solid #1E2E4F; text-align: right; color: #EDE8DC; } .mw-tabela thead th { color: #8794AE; font-weight: 500; font-size: 10px; text-transform: uppercase; } .mw-tabela tbody th { text-align: left; font-family: Cinzel, Georgia, serif; font-weight: 600; } @media (prefers-reduced-motion: reduce) { .plyta, .kontur, .nazwa, .tarcza, .podpis, .mw-dymek, .mw-strefa-plyta, .mw-strefa-stan { transition: none; } .oddech { display: none; } .mw-tunel-animy-rdzen { opacity: .56; } .mw-zlowroga-anima-aura { opacity: .58; } .mw-zlowroga-anima-zyla, .mw-zlowroga-anima-iskra { opacity: .62; } .mw-cienie-las-aura { opacity: .48; } .mw-cienie-swiatlik { opacity: .64; } .mw-draenor-szlak-zar { opacity: .68; } .mw-draenor-dym { opacity: .3; } .mw-draenor-portal-aura { opacity: .58; } .mw-draenor-oshugun-aura, .mw-draenor-auchindoun-aura { opacity: .48; } } @media (max-width: 700px) { .mw-region-kartusz { max-width: 56%; padding: 7px 10px 6px; } .mw-strefa-nazwa { font-size: 13px; stroke-width: 5px; } .mw-strefa-nazwa.dluga { font-size: 11.5px; } .mw-szczegoly { padding: 17px 14px 20px; } .mw-szczegoly-gora { display: block; } .mw-katalog { margin-top: 13px; } .mw-kpi { grid-template-columns: 1fr; } } /* ═══════════════ WSKAŹNIK SEKCJI ═══════════════ */ .wezel-etykieta { transition: color .3s, opacity .3s, transform .3s; } .wezel-kropka { transition: r .3s, fill .3s, opacity .3s; } [data-wezel][aria-current="true"] .wezel-etykieta { color:#F0D284; opacity:1; transform:translateX(-4px); } [data-wezel][aria-current="true"] .wezel-kropka { fill:#F0D284; opacity:1; } [data-wezel][aria-current="true"] .wezel-halo { opacity:.9; } /* ═══════════════ OKNO MODALNE ═══════════════ Natywny ma domyślną ramkę, tło i padding — zdejmujemy je, bo wygląd budujemy w środku. ::backdrop to natywna warstwa przyciemniająca, nie trzeba jej tworzyć ręcznie. */ dialog { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; } dialog::backdrop { background: rgba(4, 7, 15, .84); backdrop-filter: blur(7px); } @keyframes okno-wejscie { from { opacity:0; transform:translateY(20px) scale(.965); } to { opacity:1; transform:none; } } @keyframes tlo-wejscie { from { opacity:0; } to { opacity:1; } } dialog[open] { animation: okno-wejscie .3s cubic-bezier(.2,.85,.25,1); } dialog[open]::backdrop { animation: tlo-wejscie .3s ease; } /* ═══════════════ PANEL BOCZNY (filtry) ═══════════════ Ten sam , tylko dosunięty do prawej krawędzi na pełną wysokość. Nadal dostajemy Escape i pułapkę fokusu za darmo. */ dialog.panel-boczny { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; } @keyframes panel-wjazd { from { transform: translateX(100%); } to { transform: none; } } dialog.panel-boczny[open] { animation: panel-wjazd .28s cubic-bezier(.2,.85,.25,1); } /* ═══════════════ GRUPY ZWIJANE ═══════════════ Zbudowane na natywnym
/ — zwijanie działa bez ani jednej linii JavaScriptu, a czytnik ekranu sam ogłasza stan rozwinięcia. Zdejmujemy tylko domyślny trójkącik, bo rysujemy własną strzałkę. */ summary { list-style: none; cursor: pointer; } summary::-webkit-details-marker { display: none; } .strzalka-grupy { transition: transform .2s ease; } details[open] .strzalka-grupy { transform: rotate(90deg); } /* UWAGA NA PRZYSZŁOŚĆ: musi być BEZPOŚREDNIM dzieckiem
. Opakowanie go dodatkowym
(np. po to, żeby zrobić ramkę) sprawia, że przeglądarka uznaje sekcję za pozbawioną nagłówka i przestaje ją zwijać — bez żadnego błędu w konsoli. Ramkę robimy na elemencie NADRZĘDNYM wobec
, nigdy w środku. */ /* ═══════════════ OBSZARY PRZEWIJANE ═══════════════ Długie listy pokazujemy w okienku o stałej wysokości zamiast rozlewać je na całą stronę. Pasek przewijania stylowany, żeby nie wyglądał jak systemowy element doklejony do ciemnego interfejsu. */ .przewijane { scrollbar-width: thin; /* Firefox */ scrollbar-color: #2A3A5E transparent; /* Firefox: suwak / tło */ overscroll-behavior-x: contain; overscroll-behavior-y: auto; /* na krawędzi oddaje scroll stronie */ } .przewijane::-webkit-scrollbar { width: 10px; } .przewijane::-webkit-scrollbar-track { background: transparent; } .przewijane::-webkit-scrollbar-thumb { background: #2A3A5E; border: 3px solid transparent; background-clip: padding-box; border-radius: 99px; } .przewijane::-webkit-scrollbar-thumb:hover { background: #C9A227; background-clip: padding-box; } /* ═══════════════ POLA FORMULARZY ═══════════════ */ .pole { transition: border-color .2s, box-shadow .2s, background-color .2s; } .pole:focus { outline: none; border-color: rgba(201,162,39,.75); box-shadow: 0 0 0 1px rgba(201,162,39,.35), 0 0 22px -8px rgba(240,210,132,.65); background-color: rgba(24,39,74,.55); } /* ═══════════════ ODSŁANIANIE SEKCJI (strona powitalna) ═══════════════ Reguły działają wyłącznie pod `.js` na — dodaje ją mały skrypt w . Bez JavaScriptu nic nie jest ukryte, strona po prostu stoi. */ .js .odslon { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.85,.25,1); transition-delay: var(--odslon-opoznienie, 0s); } .js .odslon.jest { opacity: 1; transform: none; } /* ═══════════════ MIGOT ZŁOTA ═══════════════ Powolne przesuwanie gradientu w tekście z bg-clip-text. Element musi mieć gradientowe tło; rozmiar rozciągamy tutaj, żeby było czym oddychać. */ @keyframes blask { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .a-blask { background-size: 200% auto; animation: blask 7s ease-in-out infinite; } /* ═══════════════ DOSTĘPNOŚĆ ═══════════════ Kto ma włączone ograniczenie ruchu w systemie, dostaje statyczną stronę. Nic nie traci — animacje niosą tu wyłącznie nastrój, żadnej informacji. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }