/* Afryka Środkowa — arkusz działu. Paleta: ciemne drewno lasu, ŻELAZO i MIEDŹ z Katangi, biel kaolinu — gliny, którą oznacza się to, co należy do drugiej strony wody. ŚWIADOMIE nie granat (Amazigh), nie bogolan (Sahel) i nie zieleń z indygo (Afryka Zachodnia). Cztery działy Afryki stoją obok siebie w menu i muszą się rozróżniać na pierwszy rzut oka. UWAGA NA ESCAPE: ten plik powstaje narzędziem plikowym, nigdy heredokiem w powłoce — `\t` zamienia się wtedy w dosłowny backslash z literą t, a arkusz zjada całą deklarację po nim. Kosztowało to siedemdziesiąt siedem miejsc w Arabii. Nazwy bloków dobrane tak, żeby warstwa wspólna zrobiła z nich suwaki: `-rodzaje`, `-skladniki`, `-etapy`, `-praktyki`, `-granice`, `-echa` są na liście DO_TORU_BLOKI. Deska rejestru (`tkg-deska`) celowo NIE jest torem: trzynaście spraw ma być widocznych naraz, bo cała rzecz polega na tym, że żelaza PRZYBYWA. */ .tkg-strona { --tlo: #14100e; --panel: rgba( 34, 25, 21, .82 ); --obrys: rgba( 214, 190, 166, .3 ); --wlos: rgba( 214, 190, 166, .13 ); --miedz: #b5651d; --miedz-j: #e09a4e; --zelazo: #6f7d8c; --zelazo-j: #9fb0bf; --rdza: #8c3a24; --rdza-j: #c4705a; --las: #3f6b57; --las-j: #6f9e86; --kaolin: #ece4d6; --kosc: #ece4d6; --etyk: #b09a80; --tekst: #c0ae9c; --tekst-slaby: #93826f; --tekst-mocny: #ece4d6; /* zgodność z układem przeniesionym z Afryki Zachodniej */ --mosiadz: #b5651d; --mosiadz-j: #e09a4e; --koral: #8c3a24; --koral-j: #c4705a; --indygo: #46606f; --indygo-j: #8aa6b5; --serif: 'Cormorant Garamond', Georgia, serif; --sans: Jost, system-ui, sans-serif; position: relative; max-width: 1520px; margin: 0 auto; padding: 0 40px 90px; color: var( --tekst ); font: 300 17px var( --serif ); background: radial-gradient( 1200px 620px at 50% -10%, rgba( 181, 101, 29, .22 ), transparent 70% ), radial-gradient( 900px 520px at 86% 40%, rgba( 111, 125, 140, .14 ), transparent 70% ), radial-gradient( 700px 420px at 8% 78%, rgba( 63, 107, 87, .16 ), transparent 72% ), linear-gradient( 180deg, #1d1713, var( --tlo ) 48% ); overflow-x: clip; } .tkg-strona *, .tkg-strona *::before, .tkg-strona *::after { box-sizing: border-box; } body:has( .tkg-strona ) .wp-site-blocks > header, body:has( .tkg-strona ) header.wp-block-template-part, body:has( .tkg-strona ) .wp-site-blocks > footer, body:has( .tkg-strona ) footer.wp-block-template-part, body:has( .tkg-strona ) .wp-block-post-title { display: none !important; } body:has( .tkg-strona ) .wp-site-blocks, body:has( .tkg-strona ) .wp-block-group, body:has( .tkg-strona ) .wp-block-post-content { padding: 0 !important; margin: 0 !important; max-width: none !important; } body:has( .tkg-strona ) .wp-block-post-content > *, body:has( .tkg-strona ) .entry-content > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } body:has( .tkg-strona ) { background: #14100e; } body:has( .tkg-strona ) .wp-block-post-content > .tkg-strona, body:has( .tkg-strona ) .entry-content > .tkg-strona, .tkg-strona { box-sizing: border-box; max-width: 1600px !important; margin-left: auto !important; margin-right: auto !important; } .tkg-strona button { font-family: inherit; } /* ══════════════ ŚCIEŻKA ══════════════ */ .tkg-sciezka { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 18px 0 6px; font: 400 10.5px var( --sans ); letter-spacing: .26em; text-transform: uppercase; color: var( --tekst-slaby ); } .tkg-sciezka i { font-style: normal; color: var( --etyk ); } .tkg-sciezka b { font-weight: 400; color: var( --las-j ); } .tkg-poziom { margin: 0 0 0 auto; } .tkg-poziom span { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border: 1px solid var( --wlos ); border-radius: 999px; font: 400 10.5px var( --sans ); letter-spacing: .12em; text-transform: uppercase; color: var( --tekst ); } .tkg-poziom span::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var( --mosiadz ); box-shadow: 0 0 10px var( --mosiadz ); } /* ══════════════ HERO ══════════════ */ .tkg-hero { position: relative; padding: 46px 0 8px; } .tkg-hero__tresc { max-width: 82ch; } .tkg-nad { margin: 0 0 12px; font: 400 11px var( --sans ); letter-spacing: .34em; text-transform: uppercase; color: var( --etyk ); } .tkg-tytul { margin: 0; font: 500 clamp( 42px, 5.2vw, 76px )/1.04 var( --serif ); color: var( --kosc ); letter-spacing: -.01em; text-shadow: 0 0 66px rgba( 224, 154, 78, .4 ); } .tkg-tytul small { display: block; margin-top: 10px; font: 300 16px var( --sans ); letter-spacing: .12em; line-height: 1.5; color: var( --mosiadz-j ); } .tkg-lead { margin: 24px 0 0; font-size: 19px; line-height: 1.7; color: var( --tekst-mocny ); } /* Uwertura: pas obrazu nad tytułem, gdy grafika jest. Bez niej strona zostaje gładka i nadal wygląda skończenie. */ .tkg-hero.tkg-sekcja--tlo { max-width: none; margin: 0 -40px; padding: 214px 40px 34px; border-radius: 0 0 30px 30px; overflow: clip; isolation: isolate; } .tkg-hero.tkg-sekcja--tlo::before { content: ''; position: absolute; inset: 0 0 auto; height: 540px; z-index: -1; background: var( --tlo ) center 34% / cover no-repeat; mask-image: linear-gradient( 180deg, #000 0%, #000 36%, rgba( 0, 0, 0, .5 ) 70%, transparent 100% ); } .tkg-hero.tkg-sekcja--tlo::after { content: ''; position: absolute; inset: 0 0 auto; height: 540px; z-index: -1; background: linear-gradient( 90deg, rgba( 20, 16, 14, .94 ) 0%, rgba( 20, 16, 14, .7 ) 36%, rgba( 20, 16, 14, .2 ) 66%, transparent 100% ), radial-gradient( 900px 430px at 6% 34%, rgba( 20, 16, 14, .8 ), transparent 74% ); } /* Pas liczb: cztery równe kolumny, wyśrodkowany. */ .tkg-liczby { display: grid; grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); gap: 16px; max-width: 1180px; margin: 40px auto 0; } .tkg-liczby span { display: grid; align-content: center; gap: 3px; padding: 18px 24px; border: 1px solid var( --wlos ); border-left: 3px solid var( --las ); border-radius: 0 16px 16px 0; background: linear-gradient( 100deg, rgba( 181, 101, 29, .18 ), transparent ); } .tkg-liczby span:last-child { border-left-color: var( --koral ); background: linear-gradient( 100deg, rgba( 140, 58, 36, .16 ), transparent ); } .tkg-liczby b { font: 500 32px var( --serif ); color: var( --las-j ); } .tkg-liczby span:last-child b { color: var( --koral-j ); } .tkg-liczby i { font-style: normal; font: 400 11px var( --sans ); letter-spacing: .14em; color: var( --etyk ); } /* ══════════════ PRZERYWNIK: pas w typie adinkra ══════════════ */ .tkg-przerywnik { display: block; width: 100%; height: 46px; margin: 62px 0 -22px; color: var( --mosiadz ); opacity: .4; filter: drop-shadow( 0 0 10px rgba( 111, 125, 140, .3 ) ); } /* ══════════════ SEKCJE ══════════════ */ .tkg-sekcja { position: relative; margin: 84px 0 0; } .tkg-sekcja--scisla { padding: 36px 32px 42px; border: 1px solid var( --wlos ); border-radius: 26px; background: radial-gradient( 980px 470px at 50% 0%, rgba( 181, 101, 29, .16 ), transparent 66% ), linear-gradient( 180deg, rgba( 34, 25, 21, .9 ), rgba( 16, 12, 10, .96 ) ); box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .05 ), 0 44px 96px -54px rgba( 0, 0, 0, .96 ); } .tkg-sekcja--tlo:not( .tkg-hero ) { position: relative; isolation: isolate; overflow: clip; padding: 40px 36px 44px; border: 1px solid var( --wlos ); border-radius: 26px; box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .05 ), 0 40px 90px -50px rgba( 0, 0, 0, .95 ); } .tkg-sekcja--tlo:not( .tkg-hero )::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var( --tlo ) center 55% / cover no-repeat; opacity: .95; } /* Maska mocniejsza po LEWEJ, bo tam stoi kolumna tekstu. */ .tkg-sekcja--tlo:not( .tkg-hero )::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient( 90deg, rgba( 16, 12, 10, .92 ) 0%, rgba( 16, 12, 10, .62 ) 34%, rgba( 16, 12, 10, .18 ) 62%, transparent 100% ), linear-gradient( 180deg, rgba( 16, 12, 10, .3 ) 0%, rgba( 16, 12, 10, .14 ) 42%, rgba( 16, 12, 10, .62 ) 100% ); } /* Sekcje bez własnego tła też dostają przejście tonalne, naprzemiennie. */ .tkg-sekcja:not( .tkg-sekcja--scisla ):not( .tkg-sekcja--tlo ):not( .tkg-hero ) { isolation: isolate; } .tkg-sekcja:not( .tkg-sekcja--scisla ):not( .tkg-sekcja--tlo ):not( .tkg-hero )::before { content: ''; position: absolute; z-index: -1; pointer-events: none; inset: -40px -40px auto -40px; height: 420px; background: radial-gradient( 760px 360px at 18% 0%, rgba( 181, 101, 29, .13 ), transparent 68% ); } .tkg-sekcja__nad { margin: 0 0 8px; font: 400 10.5px var( --sans ); letter-spacing: .3em; text-transform: uppercase; color: var( --etyk ); position: relative; z-index: 1; } .tkg-sekcja__tytul { margin: 0; font: 500 clamp( 28px, 3vw, 42px )/1.14 var( --serif ); color: var( --kosc ); position: relative; z-index: 1; text-shadow: 0 2px 16px rgba( 0, 0, 0, .9 ), 0 0 46px rgba( 134, 199, 156, .24 ); } .tkg-sekcja__lead { max-width: 76ch; margin: 14px 0 0; font-size: 17.5px; line-height: 1.68; color: var( --tekst-mocny ); position: relative; z-index: 1; } .tkg-sekcja--nie { padding: 36px 32px 42px; border: 1px solid rgba( 140, 58, 36, .28 ); border-radius: 26px; background: linear-gradient( 180deg, rgba( 48, 26, 22, .6 ), rgba( 16, 12, 10, .92 ) ); } .tkg-uwaga { max-width: 82ch; margin: 26px 0 0; padding: 18px 22px; border-left: 2px solid var( --mosiadz ); border-radius: 0 14px 14px 0; background: rgba( 111, 125, 140, .1 ); font-size: 16px; line-height: 1.66; color: var( --tekst-mocny ); } .tkg-uwaga b { color: var( --mosiadz-j ); } /* ══════════════ KAFLE ══════════════ */ .tkg-bostwa, .tkg-rodzaje, .tkg-praktyki, .tkg-skladniki, .tkg-okresy, .tkg-ramy__siatka { display: grid; grid-template-columns: repeat( auto-fit, minmax( 272px, 1fr ) ); gap: 16px; margin-top: 28px; } .tkg-kafel { position: relative; display: grid; align-content: start; gap: 6px; padding: 24px 24px 20px; border: 1px solid var( --wlos ); border-top: 2px solid color-mix( in srgb, var( --k, var( --las ) ) 60%, transparent ); border-radius: 4px 4px 18px 18px; background: var( --panel ); cursor: pointer; transition: transform .24s, border-color .24s, box-shadow .24s; } .tkg-kafel:hover { transform: translateY( -5px ); border-color: var( --obrys ); box-shadow: 0 26px 54px -28px rgba( 0, 0, 0, .95 ), 0 0 44px -20px color-mix( in srgb, var( --k, var( --las ) ) 65%, transparent ); } .tkg-kafel:focus-visible { outline: 2px solid var( --las-j ); outline-offset: 3px; } .tkg-kafel h3 { margin: 2px 0 4px; font: 500 23px var( --serif ); color: var( --kosc ); } .tkg-kafel p { margin: 6px 0 0; font-size: 16px; line-height: 1.6; color: var( --tekst ); } .tkg-kafel__gdzie { display: block; font: 400 10px var( --sans ); letter-spacing: .2em; text-transform: uppercase; color: var( --mosiadz-j ); } .tkg-kafel__gdzie i { font-style: normal; margin-right: 7px; font-size: 11px; color: var( --etyk ); } .tkg-kafel .tkg-zd-wiecej { margin-top: auto; font-family: var( --sans ); } .tkg-kafel .zd-klocek__skrot { display: contents; } .tkg-skad { margin: 22px 0 0; padding: 14px 18px; border-left: 2px solid var( --indygo ); border-radius: 0 12px 12px 0; background: rgba( 52, 80, 127, .16 ); font-size: 15px; line-height: 1.6; color: var( --tekst ); } .tkg-skad b { display: block; margin-bottom: 5px; font: 400 10px var( --sans ); letter-spacing: .24em; text-transform: uppercase; color: var( --indygo-j ); } /* ══════════════ OZDOBNIKI WEKTOROWE ══════════════ WYSOKOSC PODANA WPROST, nie `auto`. W Armenii ten sam rodzaj ozdobnika przy `height: auto` urosl do 353 px zamiast 44 i zrobil 477-pikselowe pasy miedzy sekcjami, bo plik mial siedemdziesiat jeden procent pustego marginesu w ramce. Wymiar jest czescia ozdobnika, nie jego opakowania. Po kazdej dostawie mierze `getBBox()` wobec `viewBox` na zywej stronie. */ .tkg-plecionka { display: block; width: min( 100%, 760px ); margin: 34px auto -14px; color: var( --miedz ); opacity: .5; } .tkg-plecionka svg { display: block; width: 100%; height: auto; } /* `height: auto` jest tu POPRAWNE, bo ramka zostala przyciete do tuszu: 912 x 166 przy szerokosci 760 px daje okolo 138 px wysokosci. W Armenii to samo `auto` dalo 353 px, bo ramka miala 71 % pustego marginesu. Regula brzmi: `auto` wolno dopiero PO sprawdzeniu getBBox wobec viewBox. */ .tkg-dikenga { display: block; width: 92px; margin: 0 0 14px; color: var( --kaolin ); opacity: .8; } .tkg-dikenga svg { display: block; width: 100%; height: 92px; } .tkg-znak { display: inline-block; color: var( --miedz ); } /* ══════════════ DESKA REJESTRU — podpis strony ══════════════ Deska po lewej, karta sprawy po prawej. Żelazo jest klikalne i ma pole trafienia szersze niż rysunek, bo trzon gwoździa ma dwa piksele i palcem nie da się w niego trafić. Klin rysujemy JAŚNIEJ niż resztę, bo jest jedynym rodzajem, który wolno wyjąć — różnica materiału niesie tu różnicę stanu sprawy. */ .tkg-rejestr { display: grid; grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1.15fr ); gap: 26px 40px; align-items: start; margin-top: 30px; } .tkg-rejestr__deska { min-width: 0; } .tkg-deska { display: block; width: 100%; height: auto; max-width: 420px; margin: 0 auto; overflow: visible; } .tkg-deska__pole { fill: rgba( 38, 27, 22, .82 ); stroke: var( --wlos ); stroke-width: 1; } .tkg-deska__sloj { fill: none; stroke: rgba( 181, 101, 29, .16 ); stroke-width: 1; } .tkg-zelazo { cursor: pointer; } .tkg-zelazo__trzon { stroke: var( --zelazo ); stroke-width: 2.4; stroke-linecap: round; } .tkg-zelazo__glowa { fill: var( --zelazo-j ); } .tkg-zelazo--klin .tkg-zelazo__trzon { stroke: var( --kaolin ); stroke-width: 3.2; } .tkg-zelazo--klin .tkg-zelazo__glowa { fill: var( --kaolin ); } .tkg-zelazo--ostrze .tkg-zelazo__trzon { stroke-width: 3; } .tkg-zelazo:hover .tkg-zelazo__trzon, .tkg-zelazo:focus-visible .tkg-zelazo__trzon { stroke: var( --miedz-j ); } .tkg-zelazo:hover .tkg-zelazo__glowa, .tkg-zelazo:focus-visible .tkg-zelazo__glowa { fill: var( --miedz-j ); } .tkg-zelazo:focus-visible { outline: 2px solid var( --miedz-j ); outline-offset: 2px; } .tkg-zelazo.jest-wybrane .tkg-zelazo__trzon { stroke: var( --miedz-j ); stroke-width: 3.4; filter: drop-shadow( 0 0 7px var( --miedz ) ); } .tkg-zelazo.jest-wybrane .tkg-zelazo__glowa { fill: var( --miedz-j ); filter: drop-shadow( 0 0 9px var( --miedz ) ); } .tkg-licznik { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 18px 0 0; padding: 14px 20px; border: 1px solid var( --wlos ); border-left: 3px solid var( --miedz ); border-radius: 0 16px 16px 0; background: linear-gradient( 100deg, rgba( 181, 101, 29, .14 ), transparent ); } .tkg-licznik b { font: 500 30px var( --serif ); color: var( --miedz-j ); } .tkg-licznik span { flex: 1 1 200px; font: 400 11px var( --sans ); letter-spacing: .1em; line-height: 1.6; color: var( --etyk ); } .tkg-rejestr__podpis { margin: 16px 0 0; font: 400 11px var( --sans ); letter-spacing: .14em; text-transform: uppercase; text-align: center; color: var( --tekst-slaby ); } .tkg-rejestr__karta { min-height: 300px; padding: 26px 28px; border: 1px solid var( --wlos ); border-radius: 20px; background: radial-gradient( 420px 260px at 70% 0%, rgba( 181, 101, 29, .16 ), transparent 70% ), linear-gradient( 180deg, rgba( 34, 25, 21, .94 ), rgba( 16, 12, 10, .96 ) ); } .tkg-rejestr__karta h3 { margin: 8px 0 0; font: 500 30px var( --serif ); color: var( --kaolin ); } .tkg-rejestr__karta p { margin: 12px 0 0; font-size: 16.5px; line-height: 1.68; } .tkg-karta__uwaga { margin-top: 18px; padding: 14px 18px; border-left: 2px solid var( --rdza ); border-radius: 0 12px 12px 0; background: rgba( 140, 58, 36, .14 ); font-size: 15.5px; color: var( --tekst-mocny ); } /* ══════════════ ZDJĘCIE PRZEDMIOTU W OKNIE ══════════════ Obraz w OKNIE, nie w kaflu: kafle są torami, a rozrzut ich wysokości pilnuje piąty punkt testu. `aspect-ratio` trzyma kwadrat niezależnie od długości tekstu obok — to był błąd ołtarza Arabii, gdzie obraz spadł z 501 do 293 px po skróceniu sąsiedniej kolumny. */ .tkg-foto { margin: 0 0 22px; } .tkg-foto img { display: block; width: 100%; max-width: 420px; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid rgba( 214, 190, 166, .22 ); border-radius: 4px 4px 18px 18px; box-shadow: 0 26px 60px -30px rgba( 0, 0, 0, .95 ), 0 0 50px -24px rgba( 111, 125, 140, .35 ); } body:has( .tkg-strona ) .zd-okno .tkg-foto { float: right; margin: 0 0 18px 26px; max-width: 360px; } body:has( .tkg-strona ) .zd-okno .tkg-foto img { max-width: 360px; } body:has( .tkg-strona ) .zd-okno .tkg-foto + p::first-letter { float: none; margin: 0; font-size: inherit; line-height: inherit; color: inherit; text-shadow: none; } /* ══════════════ OKNO PO KLIKNIĘCIU ══════════════ Okno wisi na `body`, POZA `.tkg-strona`, więc reguły scope'owane na stronę go nie widzą, a zmienne CSS w nim nie istnieją. Stąd `body:has(...)`. */ body:has( .tkg-strona ) .zd-tlo { --serif: 'Cormorant Garamond', Georgia, serif; --sans: Jost, system-ui, sans-serif; } body:has( .tkg-strona ) .zd-okno { background: radial-gradient( 120% 70% at 50% -6%, rgba( 181, 101, 29, .2 ), transparent 62% ), radial-gradient( 90% 60% at 92% 108%, rgba( 111, 125, 140, .15 ), transparent 68% ), linear-gradient( 178deg, #1a2c22 0%, #12201a 46%, #09110d 100% ); border: 1px solid rgba( 214, 190, 166, .3 ); box-shadow: inset 0 1px 0 rgba( 230, 245, 235, .1 ), 0 0 0 1px rgba( 0, 0, 0, .6 ), 0 40px 120px -40px rgba( 0, 0, 0, .95 ), 0 0 90px -30px rgba( 181, 101, 29, .42 ); } body:has( .tkg-strona ) .zd-okno__tekst, body:has( .tkg-strona ) .zd-okno__pelne p, body:has( .tkg-strona ) .zd-okno__gora p, body:has( .tkg-strona ) .zd-okno p { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 20px; line-height: 1.72; color: #dce8e0; } body:has( .tkg-strona ) .zd-okno__tytul, body:has( .tkg-strona ) .zd-okno h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp( 34px, 3.4vw, 46px ); font-weight: 500; letter-spacing: .015em; color: #edf4ef; text-shadow: 0 0 42px rgba( 134, 199, 156, .45 ), 0 2px 18px rgba( 0, 0, 0, .8 ); } body:has( .tkg-strona ) .zd-okno__gora::after { content: ''; display: block; height: 2px; margin: 18px 0 4px; background: linear-gradient( 90deg, rgba( 134, 199, 156, .85 ), rgba( 111, 125, 140, .5 ) 38%, transparent 88% ); box-shadow: 0 0 18px rgba( 134, 199, 156, .45 ); } body:has( .tkg-strona ) .zd-okno::before, body:has( .tkg-strona ) .zd-okno::after { content: ''; position: absolute; width: 62px; height: 62px; pointer-events: none; border-color: rgba( 214, 190, 166, .68 ); border-style: solid; border-width: 0; filter: drop-shadow( 0 0 10px rgba( 214, 190, 166, .45 ) ); } body:has( .tkg-strona ) .zd-okno::before { left: 14px; top: 14px; border-left-width: 2px; border-top-width: 2px; border-radius: 16px 0 0 0; } body:has( .tkg-strona ) .zd-okno::after { right: 14px; bottom: 14px; border-right-width: 2px; border-bottom-width: 2px; border-radius: 0 0 16px 0; } body:has( .tkg-strona ) .zd-okno__pelne > * > p:first-of-type::first-letter, body:has( .tkg-strona ) .zd-okno__tekst:first-of-type::first-letter { float: left; margin: 6px 12px 0 0; font-size: 3.1em; line-height: .82; font-weight: 500; color: #e6c377; text-shadow: 0 0 26px rgba( 111, 125, 140, .5 ); } body:has( .tkg-strona ) .zd-okno .tkg-kafel__gdzie, body:has( .tkg-strona ) .zd-okno .tkg-skad b, body:has( .tkg-strona ) .zd-okno .zd-wiecej, body:has( .tkg-strona ) .zd-okno__x { font-family: Jost, system-ui, sans-serif; } @media ( prefers-reduced-motion: no-preference ) { body:has( .tkg-strona ) .zd-tlo .zd-okno { animation: tkg-okno-wschodzi .42s cubic-bezier( .2, .7, .3, 1 ) both; } @keyframes tkg-okno-wschodzi { from { opacity: 0; transform: translateY( 16px ) scale( .985 ); filter: blur( 3px ); } to { opacity: 1; transform: none; filter: none; } } } /* ══════════════ WĄSKIE EKRANY ══════════════ */ @media ( max-width: 1000px ) { .tkg-ifa { grid-template-columns: minmax( 0, 1fr ); } } @media ( max-width: 780px ) { .tkg-strona { padding: 0 18px 70px; } .tkg-sekcja { margin-top: 58px; } .tkg-sekcja--scisla, .tkg-sekcja--nie { padding: 26px 18px 30px; } .tkg-sekcja--tlo:not( .tkg-hero ) { padding: 26px 18px 30px; border-radius: 18px; } .tkg-hero.tkg-sekcja--tlo { margin: 0 -18px; padding: 150px 18px 24px; } .tkg-hero.tkg-sekcja--tlo::before, .tkg-hero.tkg-sekcja--tlo::after { height: 380px; } .tkg-sekcja:not( .tkg-sekcja--scisla ):not( .tkg-sekcja--tlo ):not( .tkg-hero )::before { inset-inline: -18px; } .tkg-poziom { margin: 6px 0 0; } .tkg-liczby { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 12px; margin-top: 30px; } .tkg-tablica { grid-template-columns: repeat( auto-fill, minmax( 118px, 1fr ) ); } body:has( .tkg-strona ) .zd-okno .tkg-foto { float: none; margin: 0 0 18px; max-width: none; } body:has( .tkg-strona ) .zd-okno .tkg-foto img { max-width: none; } } @media ( max-width: 520px ) { .tkg-liczby { grid-template-columns: minmax( 0, 1fr ); } } @media ( prefers-reduced-motion: reduce ) { .tkg-strona *, .tkg-strona *::before, .tkg-strona *::after { transition: none !important; animation: none !important; } } /* ══ CZYTELNOŚĆ KAFLA NAD ZDJĘCIEM ═══════════════════════════════════════ * * Kafel stoi na `--panel` o kryciu 0,78–0,82. Nad płaską barwą to jest * w porządku i tak był projektowany. Nad ZDJĘCIEM przestaje wystarczać, * bo przez kafel przebija jasne miejsce fotografii. * * ZMIERZONE na żywej stronie (amazigh, pięć sekcji z tłem), kontrast tekstu * po złożeniu krycia kafla z podłożem: * * nad bielą 4,01 : 1 <- PONIŻEJ progu 4,5 * nad jasnym piaskiem 4,87 : 1 * nad średnim 6,16 : 1 * nad ciemnym 7,92 : 1 * * Próg 4,5 osiągany jest przy kryciu 0,82; bierzemy 0,88 na zapas, bo * fotografia bywa jaśniejsza niż biel po rozjaśnieniu gammą. * * NIE PODNOSIMY KRYCIA ZASŁONY NA SEKCJI. Żeby tą drogą dojść do progu, * zasłona musiałaby mieć krycie 0,80 — czyli obraz przestaje być obrazem. * Nie ma sensu zamawiać tła, żeby je potem zamalować. Naprawa siedzi * w kaflu i działa TYLKO tam, gdzie pod spodem faktycznie jest zdjęcie. * * Zgłoszone przez sesję Grafika po wgraniu próbnego tła; u nich kafel miał * krycie 0,07 i kontrast 1,23 : 1, czyli tekst znikał całkowicie. */ .tkg-sekcja--tlo .tkg-kafel, .tkg-hero.tkg-sekcja--tlo .tkg-kafel { background: rgba( 34, 25, 21, .88 ); backdrop-filter: blur( 2px ); -webkit-backdrop-filter: blur( 2px ); border-color: rgba( 255, 255, 255, .16 ); } /* BARWY POBOCZNE — DRUGI KROK, WYMUSZONY POMIAREM. * * Podniesienie krycia kafla do 0,88 uratowało tekst główny (5,2–5,8 : 1), * ale NIE tekst poboczny: podpis „skąd wiemy" i nadtytuł kafla schodziły * do 3,25 : 1 nad bielą. Żeby wyciągnąć je samym kryciem, trzeba by * 0,93–0,99 — czyli zamalować zdjęcie, po które właśnie wysłaliśmy zamówienie. * * Wąskim gardłem jest więc BARWA TEKSTU, nie tło, i to ją poprawiamy. * Przesunięcie jest o kilka procent w stronę bieli, w tej samej rodzinie * barw, i obowiązuje WYŁĄCZNIE wewnątrz sekcji ze zdjęciem — na płaskim tle * paleta zostaje bez zmian. * * Obserwacja od sesji Grafika, potwierdzona rachunkiem: próg 4,5 : 1 wypada * mniej więcej w tym samym miejscu niezależnie od tego, od jakiego krycia * się startuje, bo decyduje jasność tekstu. */ .tkg-sekcja--tlo { --tekst-slaby: #ab9e8f; /* 3,25 : 1 -> 4,60 : 1 nad bielą */ --etyk: #b29c83; } /* ===== MIT W KAFLU 2026-09-12 ===== */ .tkg-kafel__nad--mit { color: #c4826e; letter-spacing: .16em; } .tkg-kafel__mit { color: var( --tekst-slaby ); font-style: italic; } .tkg-kafel__nie { color: #c4826e; font-style: normal; letter-spacing: .04em; } /* OKNO TEZY — przejscie tonalne. Wspolna warstwa daje oknu tezy plaska pobialke rgba(255,255,255,.028) regulami o swoistosci 0,2,0 i 0,3,0 — jedna wartosc dla wszystkich dzialow naraz. Dublowana klasa daje 0,4,0 i zamyka sprawe bez !important. Barwy sa z palety TEGO dzialu. Dopisane po stronie SERWERA, bo lokalna kopia modulu bywa starsza niz wgrana. */ .tkg-strona .tkg-hero .tkg-okno.zd-okno, .tkg-strona .tkg-hero .zd-okno.zd-okno, .tkg-strona .tkg-hero .tkg-okno.tkg-okno { background: radial-gradient( 720px 240px at 42% 0%, rgba( 34, 25, 21, .10 ), transparent 70% ), linear-gradient( 168deg, #1f1b19, #14100e ); } /* ===== TLO CALEJ STRONY 2026-09-13 ===== Ten sam wzorzec, co Celtowie / Hiszpania / Rumunia: obraz pod cala strona, nieruchomy przy przewijaniu, przyciemniony do barwy dzialu. Dopoki pliku nie ma, maluje sie sam kolor - nic sie nie psuje. */ body:has(.tkg-strona){ background-color: #14100e; background-image: linear-gradient( #14100ebb, #14100edd ), url( '/wp-content/uploads/tarot-kompat/afryka/srodkowa/gfx/tlo-calosc.webp' ); background-position: center; background-size: cover; background-attachment: fixed; }