/* Zdobienia (wspólna warstwa dla działów Wschodu). Ten sam język, co na kartach mudr: cienka złota linia wewnątrz panelu, zawijasy w narożnikach, lotos na osi, przerywana oś z kropkami. Selektory po końcówce klasy, więc jeden arkusz obejmuje wszystkie prefiksy (tqm-, tch-, tbo-, …). Ładowany PO arkuszu modułu — nic tu nie zmienia układu, tylko dokłada. */ :root { --zd-zloto: #f9d57a; --zd-linia: rgba( 230, 196, 138, .22 ); --zd-linia-mocna: rgba( 249, 213, 122, .55 ); --zd-narozek: url( "data:image/svg+xml;utf8," ); --zd-lotos: url( "data:image/svg+xml;utf8," ); } /* ── oś sekcji: przerywana złota linia z lotosem, jak na kartach ── TRZY FORMY, NIE JEDNA. `[class$="-sekcja"]` łapie tylko sekcję bez modyfikatora. Realny zapis w modułach brzmi `tnr-sekcja tnr-sekcja--scisla`, więc atrybut NIE kończy się na `-sekcja` i ozdobnik gasł. Zmierzone na żywo: Celtowie 5 sekcji z 10 bez znaku, Grecja 3 z 13, Nordyckie 1 z 5. Nie wolno tu użyć gołego `[class*="-sekcja"]`, bo to złapałoby też `-sekcja__nad`, `-sekcja__tytul` i `-sekcja__lead` i obsypało lotosami wnętrze każdej sekcji. Stąd dokładnie trzy kształty: `-sekcja` na końcu — sekcja bez modyfikatora, `-sekcja ` ze spacją — baza, po której idzie druga klasa, `-sekcja--` — sam modyfikator, także doklejone `--tlo`. Żaden z nich nie pasuje do `-sekcja__`, bo tam po `sekcja` stoi podkreślnik. */ [class$="-sekcja"], [class*="-sekcja "], [class*="-sekcja--"] { position: relative; } /* SEKCJA Z WŁASNYM TŁEM JEST WYŁĄCZONA, I TO NIE JEST ostrożność, tylko pomiar. Moduły malują tło sekcji na `::before`, a przyciemniacz na `::after`. Kiedy rozszerzyłem selektor o `-sekcja--`, złapał też `--tlo` i wtłoczył cudzy obraz w pudełko lotosu: Armenia, pięć sekcji, obraz 40×24 px zamiast pełnej szerokości, a przyciemniacz hero ścięty z 540 px do 1 px. Ten sam wypadek mam zapisany sprzed tygodni — dlatego wyjątek stoi w kodzie, nie w pamięci. Sekcja z tłem nie potrzebuje lotosu: jej znakiem rozpoznawczym jest obraz. ARABII TU NIE MA, CHOĆ PRZEZ CHWILĘ BYŁA. Lokalna kopia jej arkusza kładzie zdjęcia sekcji na `::before` i wyglądała na kolejną ofiarę. Serwerowa kopia jest o trzy godziny nowsza i robi to inaczej: tło idzie na `background` samego elementu, a `::before` służy tam wyłącznie do zgaszenia lotosu w jednej sekcji. Wyjątek oparty na starym pliku odebrałby znak pięciu sekcjom i nie przywrócił niczego. Mierzone na serwerze, nie u siebie. CAŁE WYŁĄCZENIE SIEDZI W `:where()`, bo `:where()` nie wnosi swoistości. Bez tego `:not()` podniósłby regułę z (0,1,1) na (0,2,1) i zacząłbym wygrywać z modułami, które dotąd wygrywały ze mną — po cichu, w pięćdziesięciu działach naraz. Wyjątek ma wyłączać, nie awansować. */ [class$="-sekcja"]:not( :where( [class*="--tlo"] ) )::before, [class*="-sekcja "]:not( :where( [class*="--tlo"] ) )::before, [class*="-sekcja--"]:not( :where( [class*="--tlo"] ) )::before { content: ''; position: absolute; left: 50%; top: -52px; width: 40px; height: 24px; transform: translateX( -50% ); background: var( --zd-lotos ) center / contain no-repeat; opacity: .75; pointer-events: none; } [class$="-sekcja"]:not( :where( [class*="--tlo"] ) )::after, [class*="-sekcja "]:not( :where( [class*="--tlo"] ) )::after, [class*="-sekcja--"]:not( :where( [class*="--tlo"] ) )::after { content: ''; position: absolute; left: 0; right: 0; top: -40px; height: 1px; pointer-events: none; background: linear-gradient( 90deg, transparent, var( --zd-linia-mocna ) 30%, var( --zd-linia-mocna ) 70%, transparent ); -webkit-mask-image: linear-gradient( 90deg, transparent 47.5%, #000 47.5%, #000 52.5%, transparent 52.5% ); mask-image: linear-gradient( 90deg, #000 0, #000 47%, transparent 47%, transparent 53%, #000 53%, #000 100% ); } /* Pierwsza sekcja po uwerturze nie dostaje kreski — i tu też trzeba wszystkich trzech form, bo hero po dostawie grafiki nosi `--tlo`. */ [class*="-hero"] + [class$="-sekcja"]::before, [class*="-hero"] + [class$="-sekcja"]::after, [class*="-hero"] + [class*="-sekcja "]::before, [class*="-hero"] + [class*="-sekcja "]::after, [class*="-hero"] + [class*="-sekcja--"]::before, [class*="-hero"] + [class*="-sekcja--"]::after { display: none; } /* ── eyebrow z linią i rombem ── */ [class$="-sekcja__nad"]::after { content: ''; display: inline-block; vertical-align: middle; width: 54px; height: 1px; margin-left: 14px; background: linear-gradient( 90deg, var( --zd-linia-mocna ), transparent ); } /* ── panele: ramka wewnętrzna, światło u góry, zawijasy w narożnikach ── */ [class*="-ramy__siatka"] > div, [class$="-powody__siatka"] > div, [class$="-uczciwie"], [class$="-plyta__opis"], [class$="-klucz__opis"], [class$="-para__pole"], [class$="-panel"], [class$="-brama"], [class$="-zap"], [class$="-etap"], [class$="-zwierz"], [class$="-warstwa"], [class$="-pien"] { box-shadow: inset 0 0 0 1px rgba( 230, 196, 138, .07 ), inset 0 1px 0 rgba( 255, 255, 255, .06 ), 0 24px 60px -30px rgba( 0, 0, 0, .8 ); } :where( [class*="-ramy__siatka"] > div, [class$="-powody__siatka"] > div, [class$="-uczciwie"], [class$="-plyta__opis"], [class$="-klucz__opis"], [class$="-para__pole"], [class$="-panel"], [class$="-brama"], [class$="-zap"], [class$="-etap"], [class$="-zwierz"], [class$="-warstwa"], [class$="-pien"] ) { position: relative; } [class*="-ramy__siatka"] > div::before, [class*="-ramy__siatka"] > div::after, [class$="-powody__siatka"] > div::before, [class$="-powody__siatka"] > div::after, [class$="-uczciwie"]::before, [class$="-uczciwie"]::after, [class$="-plyta__opis"]::before, [class$="-plyta__opis"]::after, [class$="-klucz__opis"]::before, [class$="-klucz__opis"]::after, [class$="-para__pole"]::before, [class$="-para__pole"]::after, [class$="-panel"]::before, [class$="-panel"]::after, [class$="-brama"]::before, [class$="-brama"]::after, [class$="-zap"]::before, [class$="-zap"]::after { content: ''; position: absolute; width: 26px; height: 26px; pointer-events: none; opacity: .85; background: var( --zd-narozek ) center / contain no-repeat; } [class*="-ramy__siatka"] > div::before, [class$="-powody__siatka"] > div::before, [class$="-uczciwie"]::before, [class$="-plyta__opis"]::before, [class$="-klucz__opis"]::before, [class$="-para__pole"]::before, [class$="-panel"]::before, [class$="-brama"]::before, [class$="-zap"]::before { left: 6px; top: 6px; opacity: .5; } [class*="-ramy__siatka"] > div::after, [class$="-powody__siatka"] > div::after, [class$="-uczciwie"]::after, [class$="-plyta__opis"]::after, [class$="-klucz__opis"]::after, [class$="-para__pole"]::after, [class$="-panel"]::after, [class$="-brama"]::after, [class$="-zap"]::after { right: 6px; bottom: 6px; transform: rotate( 180deg ); opacity: .5; } /* Narożnik nie ma prawa wejść na tekst — panel dostaje na to zapas z każdej strony. */ [class*="-ramy__siatka"] > div, [class$="-powody__siatka"] > div, [class$="-uczciwie"], [class$="-para__pole"], [class$="-panel"], [class$="-brama"], [class$="-zap"] { padding-left: max( 26px, var( --zd-luz, 0px ) ); padding-right: max( 26px, var( --zd-luz, 0px ) ); } [class$="-sekcja__tytul"], [class$="-rzad__tytul"], [class$="-sekcja__nad"] { position: relative; z-index: 1; } /* Panele klikalne: kursor, podniesienie i wyraźniejsza rama pod palcem. */ .jest-klikalny { cursor: pointer; transition: transform .22s, box-shadow .22s, border-color .22s; } .jest-klikalny:hover { transform: translateY( -3px ); border-color: var( --zd-linia-mocna ); box-shadow: inset 0 0 0 1px rgba( 249, 213, 122, .16 ), 0 26px 60px -34px rgba( 0, 0, 0, .95 ), 0 0 44px -20px rgba( 249, 213, 122, .45 ); } .jest-klikalny:hover::before, .jest-klikalny:hover::after { opacity: 1; } .jest-klikalny:focus-visible { outline: 2px solid #fde291; outline-offset: 3px; } .jest-klikalny .zd-wiecej { display: block; margin-top: 12px; padding-top: 10px; border-top: 1px solid var( --zd-linia ); font: 400 10px Jost, system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var( --zd-zloto ); opacity: .75; } .jest-klikalny:hover .zd-wiecej { opacity: 1; } /* ── kafle w torach: światło u góry i głębszy cień przy najeździe ── */ [class$="-kafel"] { box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .05 ); } [class$="-kafel"]:hover { box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .08 ), 0 22px 48px rgba( 0, 0, 0, .55 ), 0 0 0 1px rgba( 230, 196, 138, .14 ); } /* ── okno: ramka, narożniki i lotos nad tytułem ── */ [class$="-okno"] { box-shadow: inset 0 0 0 1px rgba( 230, 196, 138, .1 ), 0 40px 90px rgba( 0, 0, 0, .6 ), 0 0 120px -30px color-mix( in srgb, var( --k, #cda474 ) 45%, transparent ); } [class$="-okno"]::before, [class$="-okno"]::after { content: ''; position: absolute; width: 30px; height: 30px; pointer-events: none; opacity: .85; background: var( --zd-narozek ) center / contain no-repeat; } [class$="-okno"]::before { left: 12px; top: 12px; } [class$="-okno"]::after { right: 12px; bottom: 12px; transform: rotate( 180deg ); } [class$="-okno__nad"]::before { content: ''; display: block; width: 34px; height: 20px; margin: 0 0 8px; background: var( --zd-lotos ) left center / contain no-repeat; opacity: .7; } /* ── tytuły: ciepła poświata zamiast płaskiego złota ── */ [class$="-tytul"] { text-shadow: 0 0 40px rgba( 249, 213, 122, .18 ); } [class$="-sekcja__tytul"] { text-shadow: 0 0 30px rgba( 249, 213, 122, .14 ); } @media ( max-width: 680px ) { [class$="-sekcja"]::before, [class*="-sekcja "]::before, [class*="-sekcja--"]::before { top: -44px; width: 32px; } [class$="-sekcja"]::after, [class*="-sekcja "]::after, [class*="-sekcja--"]::after { top: -34px; } [class$="-sekcja__nad"]::after { width: 30px; } } /* ── okno zdobień: ten sam język co okna działów, ale bez ich zależności ── */ .zd-tlo { position: fixed; inset: 0; z-index: 100001; display: grid; place-items: center; padding: 28px; background: rgba( 4, 3, 12, .74 ); backdrop-filter: blur( 14px ); opacity: 0; transition: opacity .2s; } .zd-tlo.jest-widoczne { opacity: 1; } .zd-okno { position: relative; display: flex; flex-direction: column; width: min( 720px, 100% ); max-height: min( 86vh, 900px ); overflow: hidden; padding: 0; border: 1px solid rgba( 230, 196, 138, .3 ); border-top: 3px solid var( --zd-zloto ); border-radius: 4px 4px 22px 22px; background: linear-gradient( 180deg, rgba( 16, 12, 40, .97 ), rgba( 7, 5, 22, .98 ) ); box-shadow: 0 40px 90px rgba( 0, 0, 0, .6 ), inset 0 0 0 1px rgba( 230, 196, 138, .1 ); transform: translateY( 12px ); transition: transform .2s; } .zd-tlo.jest-widoczne .zd-okno { transform: none; } .zd-okno::before, .zd-okno::after { content: ''; position: absolute; width: 30px; height: 30px; pointer-events: none; opacity: .7; background: var( --zd-narozek ) center / contain no-repeat; } .zd-okno::before { left: 10px; top: 10px; } .zd-okno::after { right: 10px; bottom: 10px; transform: rotate( 180deg ); } .zd-okno__x { position: absolute; right: 16px; top: 16px; width: 38px; height: 38px; border: 1px solid rgba( 230, 196, 138, .16 ); border-radius: 50%; background: rgba( 7, 5, 22, .6 ); color: #cda474; font: 400 17px Jost, system-ui, sans-serif; cursor: pointer; z-index: 1; } .zd-okno__x:hover { color: #fde291; border-color: rgba( 249, 213, 122, .5 ); } .zd-okno__glif { display: block; margin: 0 0 12px; font-size: 26px; font-style: normal; color: #e6c48a; } .zd-okno__tytul { margin: 0 0 18px; padding-right: 46px; font: 500 32px/1.1 'Cormorant Garamond', Georgia, serif; color: #f9d57a; } /* PODSTAWA 18 px DLA KAZDEGO DZIALU, nie tylko dla dziesieciu. Dyrektywa o ozdobnym oknie mowi: tekst od 18 px, tytul od 32. Spelnialo ja dziesiec dzialow na ponad sto, bo kazdy dopisywal sobie wlasny blok `body:has( .-strona ) .zd-okno ...`, a reszta zostawala przy 15,5 px z tego pliku. Podstawa nalezy do warstwy wspolnej; dzialom zostaje to, co jest ich wlasne — barwa, szeryf, inicjal. */ .zd-okno__tekst { margin: 0 0 14px; max-width: 74ch; font: 300 18px/1.75 Jost, system-ui, sans-serif; color: #b3b1c2; } .zd-okno__tekst:last-child { margin-bottom: 0; } @media ( max-width: 680px ) { .zd-okno__tytul { font-size: 24px; } } @media ( prefers-reduced-motion: reduce ) { .zd-tlo, .zd-okno, .jest-klikalny { transition: none; } } /* ── pasek przewijania: złota nitka, nie systemowy suwak ──────────────────── Panele z własnym przewijaniem pokazywały szary suwak ze strzałkami — obcy element w całej reszcie. Zamiast niego: cienka prowadnica z włosa i złota nitka o zaokrąglonych końcach. Strzałki znikają, bo w panelu na 12 pozycji nie mają co robić. Reguły dotyczą wnętrza działów, nie paska całej strony. */ [class*="-strona"], [class*="-strona"] *, [class$="-tlo"], [class$="-tlo"] *, .zd-okno { scrollbar-width: thin; scrollbar-color: rgba( 230, 196, 138, .42 ) transparent; } [class*="-strona"] ::-webkit-scrollbar, [class$="-tlo"] ::-webkit-scrollbar, .zd-okno::-webkit-scrollbar { width: 11px; height: 11px; } [class*="-strona"] ::-webkit-scrollbar-button, [class$="-tlo"] ::-webkit-scrollbar-button, .zd-okno::-webkit-scrollbar-button { display: none; width: 0; height: 0; } [class*="-strona"] ::-webkit-scrollbar-corner, [class$="-tlo"] ::-webkit-scrollbar-corner, .zd-okno::-webkit-scrollbar-corner { background: transparent; } [class*="-strona"] ::-webkit-scrollbar-track, [class$="-tlo"] ::-webkit-scrollbar-track, .zd-okno::-webkit-scrollbar-track { background: linear-gradient( 90deg, transparent calc( 50% - .5px ), rgba( 230, 196, 138, .14 ) calc( 50% - .5px ), rgba( 230, 196, 138, .14 ) calc( 50% + .5px ), transparent calc( 50% + .5px ) ); } [class*="-strona"] ::-webkit-scrollbar-thumb, [class$="-tlo"] ::-webkit-scrollbar-thumb, .zd-okno::-webkit-scrollbar-thumb { border: 3.5px solid transparent; border-radius: 999px; background-clip: content-box; background-image: linear-gradient( 180deg, rgba( 249, 213, 122, .2 ), rgba( 230, 196, 138, .7 ) 22%, rgba( 230, 196, 138, .7 ) 78%, rgba( 249, 213, 122, .2 ) ); } [class*="-strona"] ::-webkit-scrollbar-thumb:hover, [class$="-tlo"] ::-webkit-scrollbar-thumb:hover, .zd-okno::-webkit-scrollbar-thumb:hover { border-width: 3px; background-image: linear-gradient( 180deg, rgba( 253, 226, 145, .35 ), #f9d57a 22%, #f9d57a 78%, rgba( 253, 226, 145, .35 ) ); } /* ── Pasy suwaków chowają natywny pasek ────────────────────────────────── Każdy tor ma własne strzałki i licznik, więc systemowy pasek tylko je dubluje. Reguła złotej nitki wyżej celuje w `[class*="-strona"] *`, co bije `.x-siatka` specyficznością — dlatego tutaj trzeba wprost i z !important. */ [class$="-siatka"], [class$="-polka"], [class$="-tor__pas"] { scrollbar-width: none !important; } [class$="-siatka"]::-webkit-scrollbar, [class$="-polka"]::-webkit-scrollbar, [class$="-tor__pas"]::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } /* ══════════════ wspólny tor kafli ══════════════ Pas przewijany w poziomie ze strzałkami i licznikiem. Barwy bierze z tokenów działu (`--zloto`, `--wlos`, `--tekst-slaby`), więc w każdym module wygląda jak jego własny element, a nie jak wtręt z zewnątrz. */ /* Boczne marginesy szerokie na strzałkę: kafle jeżdżą między nimi, więc pod strzałką nigdy nic nie ma. */ .zd-tor { position: relative; contain: inline-size; padding: 0 56px; } .zd-pas { display: flex !important; flex-wrap: nowrap !important; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none !important; padding: 4px 2px 16px; margin: 0 !important; } .zd-pas::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } .zd-pas.jest-ciagniety { cursor: grabbing; scroll-snap-type: none; } /* Kafel w pasie ma stałą szerokość i nie kurczy się do zera. */ .zd-pas > * { flex: 0 0 clamp( 246px, 23vw, 320px ) !important; max-width: none !important; min-width: 0; scroll-snap-align: start; } .zd-tor__strz { position: absolute; top: 38%; z-index: 3; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var( --obrys, rgba( 205, 175, 120, .3 ) ); border-radius: 50%; background: rgba( 12, 10, 8, .9 ); color: var( --zloto, #cdaf78 ); cursor: pointer; box-shadow: 0 0 26px -10px var( --zloto, #cdaf78 ); transition: transform .2s, background .2s; } .zd-tor__strz:hover { transform: scale( 1.08 ); background: rgba( 12, 10, 8, .98 ); } .zd-tor__strz:focus-visible { outline: 2px solid var( --zloto, #cdaf78 ); outline-offset: 3px; } .zd-tor__strz--lewo { left: 0; } .zd-tor__strz--prawo { right: 0; } .zd-tor__strz[disabled] { opacity: .26; cursor: default; box-shadow: none; } .zd-tor__strz[disabled]:hover { transform: none; background: rgba( 12, 10, 8, .9 ); } .zd-tor__strz::before { content: '‹'; font: 400 26px/1 var( --serif, Georgia, serif ); } .zd-tor__strz--prawo::before { content: '›'; } .zd-tor__licznik { margin: 2px 0 0; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var( --tekst-slaby, #8a8177 ); } /* Pas, który i tak się mieści, nie potrzebuje sterowania. */ .zd-tor.jest-zbedny .zd-tor__strz, .zd-tor.jest-zbedny .zd-tor__licznik { display: none; } @media ( max-width: 760px ) { .zd-tor { padding: 0 46px; } .zd-tor__strz { width: 36px; height: 36px; } .zd-pas > * { flex-basis: 80vw !important; } } @media ( prefers-reduced-motion: reduce ) { .zd-tor__strz { transition: none; } } /* ── Tor paneli tekstowych ──────────────────────────────────────────────── Panel w torze pokazuje tytuł i pierwszy akapit; całość otwiera się w oknie, bo te panele są klikalne. Bez tego cztery bloki po pół tysiąca pikseli robiły ze zwykłej sekcji ścianę tekstu na ponad tysiąc. */ .zd-pas--bloki > * { flex: 0 0 clamp( 300px, 29vw, 430px ) !important; } .zd-pas--bloki > * p:not( :first-of-type ) { display: none; } .zd-pas--bloki > * p:first-of-type { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; } /* ══════════════ KLOCEK: skrót w kaflu, komplet w oknie ══════════════ Zasada dla każdego bloku z dużą ilością tekstu. Warstwa wspólna daje zachowanie i okno; wygląd kafla należy do działu, bo każdy ma własną paletę. */ .zd-klocek { cursor: pointer; } /* Komplet treści jest w HTML-u zawsze — tu tylko go chowamy. Nie `display:none`, bo to samo drzewo klonujemy do okna. */ .zd-klocek__pelne { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset( 50% ); white-space: nowrap; border: 0; } .zd-klocek:focus-visible { outline: 2px solid #fde291; outline-offset: 4px; } .zd-klocek .zd-wiecej { display: block; margin-top: auto; padding-top: 12px; border-top: 1px solid var( --zd-linia ); font: 400 10px Jost, system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var( --zd-zloto ); opacity: .75; transition: opacity .2s, letter-spacing .2s; } .zd-klocek:hover .zd-wiecej, .zd-klocek:focus-visible .zd-wiecej { opacity: 1; letter-spacing: .24em; } /* Okno z pełną treścią. Okno stoi poza `.-strona`, więc NIE MA tam zmiennych ani reguł działu. Wszystko, co tu potrzebne, musi być zdefiniowane na miejscu — inaczej `color-mix` na pustej zmiennej daje czerń i tekst znika. Akcent `--k` przenosi skrypt z kafla; poniżej stoi wartość zapasowa. */ .zd-okno--pelne { --k: #cda474; --o-tekst: #cfc9bd; --o-mocny: #ece4d2; --o-slaby: #a79f92; --o-etyk: #a08b5e; width: min( 880px, 100% ); } .zd-okno--pelne, .zd-okno--pelne p, .zd-okno--pelne div, .zd-okno--pelne span { color: var( --o-tekst ); } .zd-okno--pelne h3 { color: var( --o-mocny ); } .zd-okno__gora { margin: 0 0 24px; padding: 0 52px 22px 0; border-bottom: 1px solid rgba( 230, 196, 138, .18 ); } .zd-okno__gora .zd-wiecej { display: none; } .zd-okno__gora h3 { margin: 12px 0 0; font: 500 32px/1.12 'Cormorant Garamond', Georgia, serif; } /* KRÓJ, NIE TYLKO MARGINES. Ta reguła ustawiała wyłącznie odstęp, więc akapit nagłówka dziedziczył krój po `body` — czyli po stronie głównej. OKNO STOI POZA `.-strona`, więc zmienne i kroje działu tam nie sięgają. Zmierzone na żywo (azja-pd, 2026-09-11): nagłówek okna Manrope 22 px tuż nad treścią Jost 18 px — dwa różne kroje w jednym oknie, w dwóch sąsiednich akapitach. Dotyczyło połowy działów: 12 z 24 miało własny blok `body:has(...) .zd-okno`, reszta pokazywała krój strony głównej. Naprawa idzie tutaj, bo wada jest we wspólnej warstwie. */ .zd-okno__gora p { margin: 4px 0 0; font: 300 20px/1.62 Jost, system-ui, sans-serif; color: var( --o-tekst, #b3b1c2 ); } .zd-okno__gora span, .zd-okno__gora i, .zd-okno__gora b { font-family: Jost, system-ui, sans-serif; } .zd-okno--pelne .zd-klocek__pelne { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; display: grid; gap: 18px; } .zd-okno__pelne p { margin: 0; font: 300 18px/1.78 Jost, system-ui, sans-serif; color: var( --o-tekst ); } .zd-okno__pelne > * > * { display: grid; gap: 12px; } /* Pola dodatkowe: wyraźnie odcięte od wywodu, ale bez krzyku. */ .zd-okno__pelne [class*="-pole"] { padding: 18px 20px; border-radius: 12px; background: rgba( 205, 164, 116, .06 ); } .zd-okno__pelne [class*="-pole"] b { display: block; margin-bottom: 4px; font: 400 10px Jost, system-ui, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var( --o-etyk ); } .zd-okno__pelne [class*="--uwaga"] { border-left: 2px solid color-mix( in srgb, var( --k ) 46%, transparent ); border-radius: 0 12px 12px 0; background: rgba( 205, 164, 116, .04 ); } /* Stopka okna: więzi na dole, na własnej podstawie. Włos złota, ciemniejsze podłoże i narożnik z tego samego zestawu, co ramka okna. */ .zd-okno__stopka { position: relative; margin: 30px -50px 0; padding: 22px 50px 26px; border-top: 1px solid rgba( 230, 196, 138, .2 ); background: linear-gradient( 180deg, rgba( 205, 164, 116, .07 ), transparent 70% ); border-radius: 0 0 20px 20px; } .zd-okno__stopka::before { content: ''; position: absolute; left: 50%; top: -1px; width: 92px; height: 1px; margin-left: -46px; background: linear-gradient( 90deg, transparent, var( --k ), transparent ); box-shadow: 0 0 14px 1px color-mix( in srgb, var( --k ) 60%, transparent ); } .zd-okno__stopka > * { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0; } .zd-okno__stopka [class*="__etyk"] { font: 400 10px Jost, system-ui, sans-serif; letter-spacing: .24em; text-transform: uppercase; color: var( --o-etyk ); } .zd-okno__stopka a { display: inline-flex; align-items: baseline; gap: 9px; padding: 9px 17px; border: 1px solid rgba( 230, 196, 138, .2 ); border-radius: 999px; background: linear-gradient( 180deg, color-mix( in srgb, var( --k ) 14%, transparent ), transparent ); text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; } .zd-okno__stopka a b { font: 400 14.5px Jost, system-ui, sans-serif; color: color-mix( in srgb, var( --k ) 62%, #fff ); } .zd-okno__stopka a i { font: italic 300 13.5px 'Cormorant Garamond', Georgia, serif; color: var( --o-slaby ); } .zd-okno__stopka a:hover { border-color: var( --k ); transform: translateY( -2px ); box-shadow: 0 0 28px -10px var( --k ); } .zd-okno__stopka a:focus-visible { outline: 2px solid var( --k ); outline-offset: 3px; } @media ( max-width: 680px ) { .zd-okno__gora { padding-right: 46px; } .zd-okno__gora h3 { font-size: 25px; } .zd-okno__stopka { margin: 24px -22px 0; padding: 20px 22px 22px; } } @media ( prefers-reduced-motion: reduce ) { .zd-tlo, .zd-okno { transition: none; } .zd-okno__stopka a:hover { transform: none; } } /* Rama okna stoi, przewija się tylko treść. Narożniki są ozdobą RAMY i przy `overflow: auto` na samym oknie jechały z tekstem — złota zawijaska lądowała wtedy w połowie akapitu. */ .zd-okno__przewijak { overflow: auto; overscroll-behavior: contain; padding: 40px 44px 42px; } .zd-okno--pelne { padding: 0; } .zd-okno--pelne .zd-okno__przewijak { padding: 46px 50px 20px; } .zd-okno::before, .zd-okno::after { z-index: 2; } /* Pasek przewijania w oknie: cienki i w barwie akcentu, żeby nie wyglądał jak wtręt z systemu. */ .zd-okno__przewijak { scrollbar-width: thin; scrollbar-color: rgba( 205, 164, 116, .4 ) transparent; } .zd-okno__przewijak::-webkit-scrollbar { width: 8px; } .zd-okno__przewijak::-webkit-scrollbar-track { background: transparent; } .zd-okno__przewijak::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; border-radius: 999px; background-color: rgba( 205, 164, 116, .38 ); } .zd-okno__przewijak:hover::-webkit-scrollbar-thumb { background-color: rgba( 205, 164, 116, .62 ); } @media ( max-width: 680px ) { .zd-okno__przewijak { padding: 32px 24px 28px; } .zd-okno--pelne .zd-okno__przewijak { padding: 32px 22px 14px; } } /* ══════════════════════════════════════════════════════════════════════ PODKŁAD OPRAWY — światłocień i poświata dla całego serwisu dopisane 2026-09-11 po pytaniu Przema „gdzie testy na piękne zdobienie, światłocienie, przejścia tonalne i glow?" Punkt 20 testu zmierzył wtedy: Amazigh 0 z 82 paneli z cieniem, Afryka Zachodnia 0 z 59, Afryka Środkowa 0 z 56. Sprawdzone `getComputedStyle`: naprawdę `box-shadow: none`, panele leżą płasko na tle. `@layer` JEST TU ISTOTĄ RZECZY. Ten arkusz wczytuje się PO arkuszu działu, więc zwykła reguła skasowałaby staranne cienie tym działom, które już je mają. Reguła w warstwie przegrywa z każdą regułą spoza warstwy, więc działy ze swoją oprawą zachowują swoją, a reszta dostaje podkład. ══════════════════════════════════════════════════════════════════════ */ @layer podstawa-oprawy { /* BRYŁA: cień pod spodem odrywa panel od tła, wewnętrzna kreska u góry udaje światło z przodu, ciepły obrys dokłada poświatę. */ .zd-klocek { box-shadow: 0 10px 26px rgba( 0, 0, 0, .34 ), inset 0 1px 0 rgba( 255, 255, 255, .07 ), 0 0 22px rgba( 224, 180, 85, .07 ); transition: box-shadow .24s ease, transform .24s ease, border-color .24s ease; } .zd-klocek:hover, .zd-klocek:focus-visible { box-shadow: 0 18px 44px rgba( 0, 0, 0, .46 ), inset 0 1px 0 rgba( 255, 255, 255, .1 ), 0 0 34px rgba( 224, 180, 85, .2 ); } /* POŚWIATA NA TYTUŁACH. Rozmycie duże i barwa ciepła, bo to ma świecić, a nie rzucać cień — cień pod literą robi z nagłówka naklejkę. */ [class$="-sekcja__tytul"], [class$="-tytul"] { text-shadow: 0 0 48px rgba( 217, 166, 60, .3 ); } /* OKNO też jest panelem i też ma być bryłą. */ .zd-okno { box-shadow: 0 40px 90px -30px rgba( 0, 0, 0, .8 ), inset 0 1px 0 rgba( 255, 255, 255, .08 ), 0 0 60px rgba( 224, 180, 85, .1 ); } /* HERO BEZ ZDJECIA TEZ MA MIEC PRZEJSCIE TONALNE. Punkt 16 zglaszal plaskie hero w dzialach, ktore czekaja na grafike: dopoki tla nie ma, uwertura jest jednolita plama. Delikatna poswiata od gory i cieplejszy dol daja glebie bez udawania zdjecia. `[class*=]`, NIE `[class$=]` — po doklejeniu klasy `--tlo` atrybut przestaje konczyc sie na `-hero` i regula by nie zadzialala. */ [class*="-hero"]:not( [class*="--tlo"] ) { background-image: linear-gradient( 180deg, rgba( 224, 180, 85, .05 ), rgba( 0, 0, 0, 0 ) 46%, rgba( 0, 0, 0, .14 ) ); } /* ZNAK SEKCJI — ozdobnik przy nadtytule, wspólny dla całego serwisu. Rysowany MASKĄ, więc bierze `currentColor`, czyli barwę etykiety danego działu: jeden kod, dwanaście palet. Romb w rombie powtarza się w ornamencie od Sahary po Bałkany i nie udaje znaku żadnej konkretnej religii. Punkt 17 zgłaszał po 5 zdobień na 12 sekcji w czterech działach naraz — to jest poprawka w jednym miejscu zamiast w czterech modułach. */ /* TAKŻE `-nad`, nie tylko `-sekcja__nad`: Chiny nie mają ani jednej klasy `-sekcja__nad`, ich etykiety nazywają się `tch-nad`, i dlatego punkt 17 zgłaszał tam „zero zdobień" mimo wspólnego znaku. To ten sam rodzaj elementu — etykieta nad tytułem — więc dostaje ten sam znak. */ /* Także formy z modyfikatorem: `tgn-nad tgn-nad--srodek`, `tsw-sekcja__nad tsw-sekcja__nad--duzy` — atrybut nie kończy się wtedy na `-nad` i etykieta zostawała bez znaku. */ .zd-znak-sekcji, [class$="-sekcja__nad"], [class*="-sekcja__nad "], [class*="-sekcja__nad--"], [class$="-nad"], [class*="-nad "], [class*="-nad--"] { display: flex; align-items: center; gap: 9px; } [class$="-sekcja__nad"]::before, [class*="-sekcja__nad "]::before, [class*="-sekcja__nad--"]::before, [class$="-nad"]::before, [class*="-nad "]::before, [class*="-nad--"]::before { content: ""; flex: 0 0 auto; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202%20L22%2012%20L12%2022%20L2%2012%20Z%22%2F%3E%3Cpath%20d%3D%22M12%207.5%20L16.5%2012%20L12%2016.5%20L7.5%2012%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202%20L22%2012%20L12%2022%20L2%2012%20Z%22%2F%3E%3Cpath%20d%3D%22M12%207.5%20L16.5%2012%20L12%2016.5%20L7.5%2012%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat; opacity: .8; } /* Kreska biegnąca w prawo od etykiety — prowadzi oko przez szerokość strony. */ [class$="-sekcja__nad"]::after, [class*="-sekcja__nad "]::after, [class*="-sekcja__nad--"]::after, [class$="-nad"]::after, [class*="-nad "]::after, [class*="-nad--"]::after { content: ""; flex: 1 1 auto; height: 1px; min-width: 24px; background: linear-gradient( 90deg, currentColor, transparent ); opacity: .34; } /* PODKŁAD DLA LICZNIKÓW. Kafle licznika (`-karta`) nie noszą klasy `zd-klocek`, więc podkład ich omijał. Zmierzone: Malta 8 z 15, Syberia 0 z 22 — brakujące to zawsze były karty licznika. Mój błąd w selektorze, nie błąd testu. */ [class*="-karta"], [class*="-kafel"] { box-shadow: 0 8px 20px rgba( 0, 0, 0, .28 ), inset 0 1px 0 rgba( 255, 255, 255, .06 ), 0 0 18px rgba( 224, 180, 85, .06 ); } /* PRZEJŚCIE TONALNE DLA SEKCJI BEZ WŁASNEGO TŁA. Zostawały pojedyncze sekcje: `echa` u Słowian, `nie-znali` u Celtów, `mongolia` na Syberii, `groby` u Etrusków, `dom` i `wedrowka` w Grecji. Zawsze ten sam przypadek — sekcja, której dział nie dał tła. `[class*=]`, NIE `[class$=]`: po doklejeniu `--tlo` atrybut przestaje kończyć się na `-sekcja` i reguła zgasłaby w chwili dostawy grafiki. */ [class*="-sekcja"] { background-image: linear-gradient( 180deg, rgba( 255, 255, 255, .022 ), rgba( 0, 0, 0, 0 ) 40%, rgba( 0, 0, 0, .07 ) ); } @media ( prefers-reduced-motion: reduce ) { .zd-klocek { transition: none; } } } /* ══════════════════════════════════════════════════════════════════════ POŚWIATA FILTREM — dopisane 2026-09-11 `box-shadow` się nie dokłada, tylko podmienia: dział, który ustawia swój cień, kasuje podkład w całości. Zmierzone po wprowadzeniu warstwy: Słowianie 16 z 26 kafli bez poświaty, Celtowie 35 z 73, Malta 8 z 15, Syberia 0 z 22 — wszystkie mają cień, tylko czarny. `filter: drop-shadow()` jest osobną własnością i SKŁADA SIĘ z każdym `box-shadow`, więc dokłada ciepło, nie zabierając nikomu jego głębi. Reguła stoi SPOZA warstwy, żeby dosięgnąć też działów z własną oprawą. ══════════════════════════════════════════════════════════════════════ */ /* `-kafel` I `-karta` PO KONWENCJI NAZW, nie po klasie `zd-klocek`. Zmierzone na Syberii: 22 kafle, z czego ani jeden nie jest klockiem ani kartą — to zwykłe `tsy-kafel`. Podkład wieszany na `zd-klocek` omijał je w całości. Konwencja `-kafel` jest w tym serwisie powszechna i to ona, a nie klasa pomocnicza, wyznacza „panel". */ .zd-klocek, [class*="-kafel"], [class*="-karta"] { filter: drop-shadow( 0 0 16px rgba( 224, 180, 85, .085 ) ); } .zd-klocek:hover, .zd-klocek:focus-visible, [class*="-kafel"]:hover, [class*="-karta"]:hover { filter: drop-shadow( 0 0 26px rgba( 224, 180, 85, .2 ) ); } @media ( prefers-reduced-motion: no-preference ) { .zd-klocek { transition: filter .24s ease, box-shadow .24s ease, transform .24s ease, border-color .24s ease; } } /* ══════════════════════════════════════════════════════════════════════ TEKST W OKNIE — dyrektywa mówi 18 px, a było 15 Punkt 13 zmierzył 15 px na /joga/ i /trzy-tradycje/ oraz 16 px na /tantra/. Okno jest komponentem WSPÓLNYM, więc rozmiar ustawiam raz tutaj, zamiast poprawiać trzy moduły i przegapić czwarty. ══════════════════════════════════════════════════════════════════════ */ /* TAKŻE OKNA WŁASNE DZIAŁÓW. Joga, Tantra i Trzy tradycje nie używają wspólnego `zd-okno`, tylko budują swoje (`tjg-okno` itd.) — dyrektywa o ozdobnym oknie obowiązuje je tak samo. */ .zd-okno p, .zd-okno li, [class$="-okno"] p, [class$="-okno"] li { font-size: 18px; line-height: 1.74; } .zd-okno__tytul, .zd-okno h2, .zd-okno h3, [class$="-okno"] h2, [class$="-okno"] h3 { font-size: clamp( 32px, 3vw, 40px ); } /* ══════════════════════════════════════════════════════════════════════ TŁO OKNA — punkt 13 zgłaszał „płaskie tło, brak przejścia tonalnego" na /ziola/ i /kabala/. Okno jest największym panelem, jaki czytelnik ogląda, więc płaska plama widać w nim najbardziej. Gradient w warstwie, żeby dział z własnym tłem okna zachował swoje. ══════════════════════════════════════════════════════════════════════ */ @layer podstawa-oprawy { .zd-okno, [class$="-okno"] { background-image: radial-gradient( 900px 420px at 50% 0%, rgba( 224, 180, 85, .085 ), transparent 62% ), linear-gradient( 180deg, rgba( 255, 255, 255, .035 ), rgba( 0, 0, 0, .2 ) ); } } /* ══════════════════════════════════════════════════════════════════════ ZNAK SEKCJI Z OZDOBNIKA FILARU — dopisane 2026-09-11 Sesja Grafiki wgrała ozdobniki do `wspolne/ozdoby//`, a sprawdzenie pokazało, że ANI JEDEN moduł stamtąd nie czyta: jedenaście sięga wyłącznie do własnego `gfx/ozdoby/`, a dwadzieścia rysunków leżało nieużywanych. Podpinam je do wspólnego znaku sekcji; mapowanie po PREFIKSIE działu, bo to jedyne, po czym CSS pozna filar. Maska bierze `currentColor`, więc jeden rysunek przyjmuje barwę etykiety każdego działu. TYLKO OZDOBNIKI, KTÓRE CZYTAJĄ SIĘ W 18 px — i to jest pomiar, nie gust. Policzone komendy rysunku w ścieżkach SVG: rozeta-etruska 34 bierzemy rozeta-asyryjska 66 bierzemy wezel-nieskonczony 74 bierzemy bordiura-amazigh 323 ZA GESTE na 18 px plecionka-nordycka 1368 ZA GESTE na 18 px Bordiura i plecionka zostają przy działach jako pas i jako przerywnik, gdzie 1024 px rysunku naprawdę widać. W kwadracie 18 px dałyby plamę, a plama jest gorsza od prostego rombu. Afryka i Północ zachowują więc romb z reguły wyżej. PNG-i (adinkra, boli, kauri, wić winna, smocza głowa, wrąb) też tu nie wchodzą: `mask-image` wziąłby ich kanał alfa, ale są wycięte z fotografii i w tym rozmiarze dałyby sylwetkę bez rysunku. ══════════════════════════════════════════════════════════════════════ */ @layer podstawa-oprawy { /* bliski-wschod — rozeta-asyryjska.svg, 66 komend rysunku, czyta się w 18 px */ .tmz-strona [class$="-sekcja__nad"]::before, .tmz-strona [class$="-nad"]::before, .teg-strona [class$="-sekcja__nad"]::before, .teg-strona [class$="-nad"]::before, .tlw-strona [class$="-sekcja__nad"]::before, .tlw-strona [class$="-nad"]::before, .tpe-strona [class$="-sekcja__nad"]::before, .tpe-strona [class$="-nad"]::before, .tar-strona [class$="-sekcja__nad"]::before, .tar-strona [class$="-nad"]::before, .tos-strona [class$="-sekcja__nad"]::before, .tos-strona [class$="-nad"]::before, .tam-strona [class$="-sekcja__nad"]::before, .tam-strona [class$="-nad"]::before, .tpi-strona [class$="-sekcja__nad"]::before, .tpi-strona [class$="-nad"]::before, .tgm-strona [class$="-sekcja__nad"]::before, .tgm-strona [class$="-nad"]::before, .tni-strona [class$="-sekcja__nad"]::before, .tni-strona [class$="-nad"]::before, .tiw-strona [class$="-sekcja__nad"]::before, .tiw-strona [class$="-nad"]::before, .tbw-strona [class$="-sekcja__nad"]::before, .tbw-strona [class$="-nad"]::before, .tfh-strona [class$="-sekcja__nad"]::before, .tfh-strona [class$="-nad"]::before { -webkit-mask-image: url( "/wp-content/uploads/tarot-kompat/wspolne/ozdoby/bliski-wschod/rozeta-asyryjska.svg" ); mask-image: url( "/wp-content/uploads/tarot-kompat/wspolne/ozdoby/bliski-wschod/rozeta-asyryjska.svg" ); } /* azja — wezel-nieskonczony.svg, 74 komend rysunku, czyta się w 18 px */ .tbo-strona [class$="-sekcja__nad"]::before, .tbo-strona [class$="-nad"]::before, .tch-strona [class$="-sekcja__nad"]::before, .tch-strona [class$="-nad"]::before, .tjp-strona [class$="-sekcja__nad"]::before, .tjp-strona [class$="-nad"]::before, .ttb-strona [class$="-sekcja__nad"]::before, .ttb-strona [class$="-nad"]::before, .tjg-strona [class$="-sekcja__nad"]::before, .tjg-strona [class$="-nad"]::before, .ttn-strona [class$="-sekcja__nad"]::before, .ttn-strona [class$="-nad"]::before, .ttr-strona [class$="-sekcja__nad"]::before, .ttr-strona [class$="-nad"]::before, .tap-strona [class$="-sekcja__nad"]::before, .tap-strona [class$="-nad"]::before, .tmn-strona [class$="-sekcja__nad"]::before, .tmn-strona [class$="-nad"]::before, .tmd-strona [class$="-sekcja__nad"]::before, .tmd-strona [class$="-nad"]::before, .tme-strona [class$="-sekcja__nad"]::before, .tme-strona [class$="-nad"]::before, .twy-strona [class$="-sekcja__nad"]::before, .twy-strona [class$="-nad"]::before, .tmo-strona [class$="-sekcja__nad"]::before, .tmo-strona [class$="-nad"]::before, .tom-strona [class$="-sekcja__nad"]::before, .tom-strona [class$="-nad"]::before, .tqm-strona [class$="-sekcja__nad"]::before, .tqm-strona [class$="-nad"]::before, .tcs-strona [class$="-sekcja__nad"]::before, .tcs-strona [class$="-nad"]::before, .tdr-strona [class$="-sekcja__nad"]::before, .tdr-strona [class$="-nad"]::before, .tat-strona [class$="-sekcja__nad"]::before, .tat-strona [class$="-nad"]::before, .tws-strona [class$="-sekcja__nad"]::before, .tws-strona [class$="-nad"]::before, .tzw-strona [class$="-sekcja__nad"]::before, .tzw-strona [class$="-nad"]::before, .tbg-strona [class$="-sekcja__nad"]::before, .tbg-strona [class$="-nad"]::before { -webkit-mask-image: url( "/wp-content/uploads/tarot-kompat/wspolne/ozdoby/azja/wezel-nieskonczony.svg" ); mask-image: url( "/wp-content/uploads/tarot-kompat/wspolne/ozdoby/azja/wezel-nieskonczony.svg" ); } /* srodziemnomorze — rozeta-etruska.svg, 34 komend rysunku, czyta się w 18 px */ .tgr-strona [class$="-sekcja__nad"]::before, .tgr-strona [class$="-nad"]::before, .tet-strona [class$="-sekcja__nad"]::before, .tet-strona [class$="-nad"]::before, .tce-strona [class$="-sekcja__nad"]::before, .tce-strona [class$="-nad"]::before, .tan-strona [class$="-sekcja__nad"]::before, .tan-strona [class$="-nad"]::before, .tml-strona [class$="-sekcja__nad"]::before, .tml-strona [class$="-nad"]::before, .thm-strona [class$="-sekcja__nad"]::before, .thm-strona [class$="-nad"]::before, .tkr-strona [class$="-sekcja__nad"]::before, .tkr-strona [class$="-nad"]::before { -webkit-mask-image: url( "/wp-content/uploads/tarot-kompat/wspolne/ozdoby/srodziemnomorze/rozeta-etruska.svg" ); mask-image: url( "/wp-content/uploads/tarot-kompat/wspolne/ozdoby/srodziemnomorze/rozeta-etruska.svg" ); } }