/* ========================================================================= WYGLĄD STEROWANY Z PANELU Ten arkusz ładuje się JAKO OSTATNI — po page.css/home.css i parts.css. To jest jego jedyne zadanie: wartości, które redakcja zmienia z wp-admin, muszą wygrywać z arkuszami przeniesionymi z prototypu, a te definiują `.hdr`, `.brand` i nawigację po swojemu. Wartości poniżej to DOMYŚLNE. Ustawienia motywu → Wygląd nadpisuje je inline'em zaraz za tym plikiem (wp_add_inline_style), więc kolejność kaskady jest zawsze ta sama. ========================================================================= */ :root { /* Pasek był składany pod prototyp, w którym treść była mniejsza. Przy nagłówkach sięgających 8,6rem znak marki na 1,02rem i nawigacja na 0,8125rem czytały się jak stopka, nie jak nawigacja. */ --ui-brand: 1.62rem; /* znak marki */ --ui-nav: 0.95rem; /* pozycje nawigacji */ --ui-nav-track: 0.1em; /* rozstrzelenie nawigacji — im większy tekst, tym mniejsze */ --ui-nav-cta: 0.9rem; /* przycisk w pasku */ --ui-hdr: 104px; /* wysokość paska */ --ui-hdr-stuck: 78px; /* wysokość paska po przewinięciu */ /* Nawigacja stała na --fg-faint (#6B6486). Nad żywym polem hero, które przepływa różem i fioletem, ten stopień szarości gubił się w tle — zgłoszone jako „kolor, który się gubi". --ink-600 trzyma ~10:1 na papierze i nadal jest cichszy od pozycji aktywnej (ta bierze pełne --fg). */ --ui-nav-color: #3A3459; /* Nagłówek diagnozy: patrz home.css — akt audytu ma się mieścić na JEDNYM ekranie, a przy 7rem sam nagłówek zjadał pół kadru. */ --ui-skan-h: 4.4rem; /* Rozmycie tła pod przyklejonym paskiem. 0px = bez rozmycia. */ --ui-hdr-blur: 18px; /* Ile papieru (a w ciemnym rozdziale atramentu) ma w sobie szklo paska. Bylo 66% bieli — tyle krycia zabija kolor pola pod spodem i pasek czyta sie jak martwa, szara tasma naklejona na zywy swiat. */ --ui-hdr-tint: 40%; --ui-hdr-tint-ink: 46%; /* Jak mocno pasek odrywa sie od sceny. 0px = plasko, bez cienia. */ --ui-hdr-lift: 26px; /* JAK DLUGO HERO STOI PRZYPIETE. Bylo 190svh. Zmierzone na zywej stronie: przy 190svh tresc hero przez przewiniecie 100->800 px przesuwala sie o 43 px, czyli przez blisko polowe drogi do diagnozy obraz PRAKTYCZNIE STAL. Gest z hero czytalo sie wiec jako drgniecie, martwe pole i dopiero wlasciwy ruch - zglaszane jako "dwa ruchy". W gore tego nie bylo, bo martwe pole wypada na koncu drogi, gdzie przejazd i tak juz hamuje. 130svh zostawia scrub, ale skraca martwe pole z ~700 px do ~250 px - ale efekt tylko sie skrocil, nie zniknal, bo martwe pole zostalo. 100svh znaczy: hero NIE STOI ANI PIKSELA, od pierwszej klatki jedzie razem ze strona, a jego wygaszenie i tak gra dalej (jest liczone z pozycji strony, nie z dlugosci sekcji). Jeden gest = doklandnie jeden ekran. Wartosc jest w panelu (Hero - jak dlugo stoi przypiete): 130svh albo 190svh przywracaja przypiecie i scrub w miejscu. */ --ui-hero-h: 100svh; /* Kafel w stopce: wzor zwiazku jest duzo dluzszy od symbolu pierwiastka (C10H12N2O to dziewiec znakow zamiast dwoch), wiec ma wlasny stopien. */ --ui-el-sym: 2.1rem; /* Wewnetrzny luz kafla. Odstepy miedzy wierszami i odsuniecie od krawedzi licza sie z tej jednej wartosci, wiec kafel da sie rozluznic albo scisnac jednym polem w panelu, nie czterema. */ --ui-el-pad: 20px; /* Odstep miedzy przyciskami w rzedzie CTA. Od niego zalezy tez, ile moze uciec magnes: przycisk zatrzymuje sie 8 px przed sasiadem. */ --ui-acts-gap: 24px; /* Ile najwyzej ucieka magnetyczne CTA za kursorem. Przycisk i tak nigdy nie wjedzie na sasiada w rzedzie (silnik liczy wolne miejsce z ich polozenia), to jest gorna granica samego gestu. 0px wylacza magnes. */ --ui-mag: 28px; } /* --- pasek --- */ .hdr { height: var(--ui-hdr) } .hdr[data-stuck] { height: var(--ui-hdr-stuck) } /* WARSTWA ROZMYCIA MUSI ISTNIEC OD STARTU STRONY. Wczesniej backdrop-filter pojawial sie dopiero razem z [data-stuck], czyli po przewinieciu 30 px — a wiec w pierwszych pikselach KAZDEGO zejscia z hero. Utworzenie warstwy rozmycia szerokiej na caly ekran w trakcie ruchu kosztuje klatke dokladnie tam, gdzie bylo czuc potkniecie. Teraz warstwa jest od poczatku, a zmienia sie wylacznie promien — to juz tylko animacja wartosci. W gore potkniecia nie bylo, bo pasek wraca do stanu spoczynku dopiero na samej gorze, kiedy ruch sie skonczyl. */ .hdr { backdrop-filter: blur(0px) saturate(100%); -webkit-backdrop-filter: blur(0px) saturate(100%); will-change: backdrop-filter; /* uklad paska nie ma prawa uniewazniac ukladu strony */ contain: layout style; transition: background .3s var(--ease), height .35s var(--ease-out), box-shadow .3s var(--ease), backdrop-filter .3s var(--ease); } .hdr[data-stuck] { /* Mniej bieli, mocniej podbite nasycenie: pasek NIESIE barwe tego, nad czym stoi, zamiast ja zasłaniac. Pod spodem plynie pole w rozach i fioletach — szklo ma to przepuszczac. */ background: color-mix(in srgb, var(--paper) var(--ui-hdr-tint, 40%), transparent); backdrop-filter: blur(var(--ui-hdr-blur, 18px)) saturate(180%); -webkit-backdrop-filter: blur(var(--ui-hdr-blur, 18px)) saturate(180%); /* PASEK MA BYC WARSTWA NAD SCENA, NIE JEJ GORNYM BRZEGIEM. Samo szklo tego nie mowi: przepuszcza barwe sceny, wiec czyta sie jak jej czesc. Krawedz na pelna szerokosc daje twardy koniec paska (kreska gradientowa w ::after konczy sie przezroczystoscia przy obu brzegach ekranu i tam nie odcina niczego), a miekki cien pod nia mowi, ze pasek LEZY WYZEJ. Cien jest wciagniety ujemnym rozlewem, wiec nie robi ciemnej obwodki — tylko opada w dol. */ box-shadow: 0 1px 0 color-mix(in srgb, var(--fg) 14%, transparent), 0 var(--ui-hdr-lift, 26px) calc(var(--ui-hdr-lift, 26px) * 1.8) calc(var(--ui-hdr-lift, 26px) * -1.2) color-mix(in srgb, var(--ink-950) 42%, transparent); } /* CIEMNY ROZDZIAL: swiat schodzi w atrament, wiec pasek schodzi razem z nim. Podmieniamy TOKENY — brand, nawigacja i hamburger licza sie z --fg, wiec zadnej reguly nie trzeba przepisywac. Flage `data-ink` stawia silnik palety na tym samym rozdziale, ktory trzyma srodek kadru. */ :root[data-ink] .hdr { --fg: #F4F2FA; --ui-nav-color: rgba(244, 242, 250, .76); } :root[data-ink] .hdr[data-stuck] { background: color-mix(in srgb, var(--ink-950) var(--ui-hdr-tint-ink, 46%), transparent); /* Na czerni cien nie istnieje — odcina swiatlo. Krawedz jest jasna, a pod nia i tak zostaje glebokie scienienie, zeby scena pod paskiem gasla. */ box-shadow: 0 1px 0 rgba(244, 242, 250, .16), 0 var(--ui-hdr-lift, 26px) calc(var(--ui-hdr-lift, 26px) * 1.9) calc(var(--ui-hdr-lift, 26px) * -1.15) rgba(0, 0, 0, .72); } .brand { font-size: var(--ui-brand) } .hdr nav a { font-size: var(--ui-nav); letter-spacing: var(--ui-nav-track); color: var(--ui-nav-color); } /* Pozycja bieżąca i najechana zostają na pełnym --fg — różnica między „cicho" a „tu jesteś" ma być widoczna, więc nie idą za zmienną z panelu. */ .hdr nav a:hover, .hdr nav a[data-here] { color: var(--fg) } .hdr .btn { font-size: var(--ui-nav-cta); height: calc(var(--ui-hdr-stuck) - 32px); padding: 0 clamp(18px, 1.6vw, 26px); } /* Znak w pasku ma pierścień jako literę „o” — rośnie razem z tekstem, bo jest liczony w `em`, ale przy większym stopniu potrzebuje odrobiny więcej luzu. */ .brand { gap: .08em } /* --- sekcje przypięte muszą schodzić spod paska --- home.css ustawia tu stałe 92px pod pasek o wysokości 94px. Skoro pasek jest teraz sterowany zmienną, zapas musi iść za nim, inaczej pierwszy wiersz hero chowa się pod paskiem. */ .sc.pinned > .stick { padding-top: calc(var(--ui-hdr) - 2px) } /* Podstrony: pierwszy rozdział też liczy odstęp od paska. */ .open, .lg-hero, .po-head, .sv-hero, .cs-hero, .ab-hero, .co-hero { padding-top: max(clamp(140px, 19vh, 230px), calc(var(--ui-hdr) + 46px)); } #skan { padding-top: max(clamp(120px, 16vh, 190px), calc(var(--ui-hdr) + 30px)) } /* --- nawigacja mobilna zaczyna się pod paskiem --- */ .navpanel { padding-top: var(--ui-hdr) } /* Pasek administracyjny WordPressa jest przyklejony u góry, a nasz pasek też siedzi na `top:0` — więc chował się pod nim. Widoczne wyłącznie dla zalogowanych, ale to właśnie oni oglądają stronę najczęściej. Poniżej 600 px pasek admina przewija się razem ze stroną i nie przeszkadza. */ body.admin-bar .hdr { top: 32px } body.admin-bar .navpanel { top: 32px } @media screen and (max-width: 782px) { body.admin-bar .hdr { top: 46px } body.admin-bar .navpanel { top: 46px } } @media screen and (max-width: 600px) { body.admin-bar .hdr { top: 0 } body.admin-bar .navpanel { top: 0 } } /* --- hamburger dorasta do paska --- */ @media (max-width: 999px) { .burger { width: calc(var(--ui-hdr-stuck) - 32px); height: calc(var(--ui-hdr-stuck) - 32px) } } /* --- kafel zwiazku w stopce --- Wzor sklada sie z , a NIE ze znakow unikodowych (₁₀, ₂): te potrafia nie istniec w podzbiorze kroju i wychodza kwadratami. Cyfry schodza do indeksu w PHP (seotonin_formula_html), wiec w panelu wpisuje sie po ludzku „C10H12N2O". Rezerwa: kiedy okno jest bardzo waskie, wzor nie lamie sie w polowie — kafel ma wlasny, mniejszy stopien zamiast zawijania. */ /* Kafel byl skladany pod dwuznakowy symbol pierwiastka: odstepy miedzy wierszami 2 px i 14 px od krawedzi. Przy dziewiecioznakowym wzorze wszystko to zlepilo sie w jedna plame — trzy wiersze o zupelnie roznym stopniu pisma potrzebuja powietrza, zeby czytaly sie jako osobne informacje. */ .el--zw { padding: var(--ui-el-pad) calc(var(--ui-el-pad) + 2px) calc(var(--ui-el-pad) - 5px); row-gap: calc(var(--ui-el-pad) * .5); column-gap: calc(var(--ui-el-pad) * 1.1); } .el--zw .el-sym { font-size: var(--ui-el-sym, 2.1rem); /* .9 sciskalo wiersz tak, ze indeksy dolne podchodzily pod nazwe */ line-height: 1; letter-spacing: -.01em; white-space: nowrap; } /* gorny wiersz i nazwa: drobny druk kafla ma stac spokojnie, a nie przy samej krawedzi wzoru */ .el--zw .el-no, .el--zw .el-mass { letter-spacing: .12em } .el--zw .el-name { letter-spacing: .24em } .el--zw .el-sym sub { font-size: .55em; /* BEZ position:relative. Element POZYCJONOWANY wypada spod background-clip:text rodzica: gradientu juz tam nie ma, a kolor tekstu jest przezroczysty — cyfry znikaja, choc siedza w kodzie i zajmuja szerokosc. Opuszczenie zalatwia vertical-align, ktory nie tworzy wlasnego kontekstu malowania. */ vertical-align: -.16em; line-height: 0; letter-spacing: 0; font-variation-settings: 'wght' 640, 'wdth' 92; } @media (max-width: 420px) { .el--zw .el-sym { font-size: calc(var(--ui-el-sym, 2.1rem) * .82) } }