/* Sahel — arkusz działu. Paleta: bogolan, czyli malijska tkanina błotna — ciemna ziemia i kaolinowa biel, do tego laterytowa czerwień dróg, złoto prosa i zieleń Nigru. ŚWIADOMIE NIE GRANAT: granat należy do Amazigh. Dwa sąsiadujące działy Afryki muszą się rozróżniać na pierwszy rzut oka, tak samo jak filary Azji. UWAGA NA ESCAPE: ten plik piszemy narzędziem, nigdy przez wklejanie bloków w PHP z pojedynczych cudzysłowów ani heredokiem w powłoce — `\t` zamienia się wtedy w dosłowny backslash z literą t, a CSS zjada całą deklarację po nim. Kosztowało to siedemdziesiąt siedem miejsc w arkuszu Arabii. Nazwy bloków dobrane tak, żeby warstwa wspólna zrobiła z nich suwaki: `-rodzaje`, `-bostwa`, `-praktyki`, `-etapy`, `-okresy`, `-ramy__siatka` są na liście DO_TORU_BLOKI. Podpis strony (`tsh-sigui`) celowo NIE jest torem: sztafetę trzeba widzieć w całości, bo jej sensem jest długość. */ .tsh-strona { --tlo: #14100d; --panel: rgba( 30, 24, 19, .8 ); --obrys: rgba( 216, 198, 168, .3 ); --wlos: rgba( 216, 198, 168, .13 ); --kaolin: #e8e0d0; --kaolin-j: #f6f1e6; --laterit: #b85a34; --laterit-j: #d97f56; --proso: #d9a63c; --proso-j: #efc668; --niger: #3f7a8a; --niger-j: #6fb0c0; --zielen: #6f8a4a; --zielen-j: #96b06e; --etyk: #a8977c; --tekst: #b3a794; --tekst-slaby: #8a7f6e; --tekst-mocny: #ece4d5; --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( 184, 90, 52, .2 ), transparent 70% ), radial-gradient( 900px 520px at 86% 40%, rgba( 217, 166, 60, .12 ), transparent 70% ), radial-gradient( 700px 420px at 8% 78%, rgba( 63, 122, 138, .12 ), transparent 72% ), linear-gradient( 180deg, #1b1610, var( --tlo ) 48% ); overflow-x: clip; } .tsh-strona *, .tsh-strona *::before, .tsh-strona *::after { box-sizing: border-box; } body:has( .tsh-strona ) .wp-site-blocks > header, body:has( .tsh-strona ) header.wp-block-template-part, body:has( .tsh-strona ) .wp-site-blocks > footer, body:has( .tsh-strona ) footer.wp-block-template-part, body:has( .tsh-strona ) .wp-block-post-title { display: none !important; } body:has( .tsh-strona ) .wp-site-blocks, body:has( .tsh-strona ) .wp-block-group, body:has( .tsh-strona ) .wp-block-post-content { padding: 0 !important; margin: 0 !important; max-width: none !important; } body:has( .tsh-strona ) .wp-block-post-content > *, body:has( .tsh-strona ) .entry-content > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } body:has( .tsh-strona ) { background: #14100d; } body:has( .tsh-strona ) .wp-block-post-content > .tsh-strona, body:has( .tsh-strona ) .entry-content > .tsh-strona, .tsh-strona { box-sizing: border-box; max-width: 1600px !important; margin-left: auto !important; margin-right: auto !important; } .tsh-strona button { font-family: inherit; } /* ══════════════ ŚCIEŻKA ══════════════ */ .tsh-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 ); } .tsh-sciezka i { font-style: normal; color: var( --etyk ); } .tsh-sciezka b { font-weight: 400; color: var( --laterit-j ); } .tsh-poziom { margin: 0 0 0 auto; } .tsh-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 ); } .tsh-poziom span::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var( --proso ); box-shadow: 0 0 10px var( --proso ); } /* ══════════════ HERO ══════════════ */ /* Padding poziomy 32 px = tyle, ile ma .tsh-sekcja--scisla, wiec tytul stoi w jednej linii z trescia sekcji nizej. Zero dawalo tekst wprost na krawedzi tla hero — zglosil to Przemo 2026-09-11. */ .tsh-hero { position: relative; padding: 46px 32px 8px; } .tsh-hero__tresc { max-width: 82ch; } .tsh-nad { margin: 0 0 12px; font: 400 11px var( --sans ); letter-spacing: .34em; text-transform: uppercase; color: var( --etyk ); } .tsh-tytul { margin: 0; font: 500 clamp( 44px, 5.4vw, 80px )/1.03 var( --serif ); color: var( --kaolin ); letter-spacing: -.01em; text-shadow: 0 0 66px rgba( 217, 166, 60, .42 ); } .tsh-tytul small { display: block; margin-top: 10px; font: 300 16px var( --sans ); letter-spacing: .12em; line-height: 1.5; color: var( --proso-j ); } .tsh-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. */ .tsh-hero.tsh-sekcja--tlo { max-width: none; margin: 0 -40px; padding: 214px 72px 34px; border-radius: 0 0 30px 30px; overflow: clip; isolation: isolate; } .tsh-hero.tsh-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% ); } .tsh-hero.tsh-sekcja--tlo::after { content: ''; position: absolute; inset: 0 0 auto; height: 540px; z-index: -1; background: linear-gradient( 90deg, rgba( 20, 16, 13, .94 ) 0%, rgba( 20, 16, 13, .7 ) 36%, rgba( 20, 16, 13, .2 ) 66%, transparent 100% ), radial-gradient( 900px 430px at 6% 34%, rgba( 20, 16, 13, .8 ), transparent 74% ); } /* Pas liczb: cztery równe kolumny, wyśrodkowany. */ .tsh-liczby { display: grid; grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); gap: 16px; max-width: 1180px; margin: 40px auto 0; } .tsh-liczby span { display: grid; align-content: center; gap: 3px; padding: 18px 24px; border: 1px solid var( --wlos ); border-left: 3px solid var( --proso ); border-radius: 0 16px 16px 0; background: linear-gradient( 100deg, rgba( 217, 166, 60, .15 ), transparent ); } .tsh-liczby span:last-child { border-left-color: var( --laterit ); background: linear-gradient( 100deg, rgba( 184, 90, 52, .17 ), transparent ); } .tsh-liczby b { font: 500 32px var( --serif ); color: var( --proso-j ); } .tsh-liczby span:last-child b { color: var( --laterit-j ); } .tsh-liczby i { font-style: normal; font: 400 11px var( --sans ); letter-spacing: .14em; color: var( --etyk ); } /* ══════════════ PRZERYWNIK: rząd muszelek kauri ══════════════ */ .tsh-przerywnik { display: block; width: 100%; height: 46px; margin: 62px 0 -22px; color: var( --kaolin ); opacity: .34; filter: drop-shadow( 0 0 9px rgba( 232, 224, 208, .25 ) ); } /* ══════════════ SEKCJE ══════════════ */ .tsh-sekcja { position: relative; margin: 84px 0 0; } .tsh-sekcja--scisla { padding: 36px 32px 42px; border: 1px solid var( --wlos ); border-radius: 26px; background: radial-gradient( 980px 470px at 50% 0%, rgba( 217, 166, 60, .13 ), transparent 66% ), linear-gradient( 180deg, rgba( 34, 27, 21, .9 ), rgba( 16, 13, 10, .96 ) ); box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .05 ), 0 44px 96px -54px rgba( 0, 0, 0, .96 ); } .tsh-sekcja--tlo:not( .tsh-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 ); } .tsh-sekcja--tlo:not( .tsh-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. */ .tsh-sekcja--tlo:not( .tsh-hero )::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient( 90deg, rgba( 16, 13, 10, .92 ) 0%, rgba( 16, 13, 10, .62 ) 34%, rgba( 16, 13, 10, .18 ) 62%, transparent 100% ), linear-gradient( 180deg, rgba( 16, 13, 10, .3 ) 0%, rgba( 16, 13, 10, .14 ) 42%, rgba( 16, 13, 10, .62 ) 100% ); } /* Sekcje bez własnego tła też dostają przejście tonalne — naprzemiennie od lewej i od prawej, żeby oko miało za czym schodzić w dół strony. */ .tsh-sekcja:not( .tsh-sekcja--scisla ):not( .tsh-sekcja--tlo ):not( .tsh-hero ) { isolation: isolate; } .tsh-sekcja:not( .tsh-sekcja--scisla ):not( .tsh-sekcja--tlo ):not( .tsh-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( 184, 90, 52, .12 ), transparent 68% ); } .tsh-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; } .tsh-sekcja__tytul { margin: 0; font: 500 clamp( 30px, 3.2vw, 44px )/1.12 var( --serif ); color: var( --kaolin ); position: relative; z-index: 1; text-shadow: 0 2px 16px rgba( 0, 0, 0, .9 ), 0 0 46px rgba( 217, 166, 60, .25 ); } .tsh-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; } .tsh-sekcja--nie { padding: 36px 32px 42px; border: 1px solid rgba( 184, 90, 52, .28 ); border-radius: 26px; background: linear-gradient( 180deg, rgba( 54, 28, 20, .6 ), rgba( 16, 13, 10, .92 ) ); } .tsh-uwaga { max-width: 82ch; margin: 26px 0 0; padding: 18px 22px; border-left: 2px solid var( --proso ); border-radius: 0 14px 14px 0; background: rgba( 217, 166, 60, .1 ); font-size: 16px; line-height: 1.66; color: var( --tekst-mocny ); } .tsh-uwaga b { color: var( --proso-j ); } /* ══════════════ KAFLE ══════════════ */ .tsh-bostwa, .tsh-rodzaje, .tsh-praktyki, .tsh-etapy, .tsh-okresy, .tsh-ramy__siatka { display: grid; grid-template-columns: repeat( auto-fit, minmax( 272px, 1fr ) ); gap: 16px; margin-top: 28px; } .tsh-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( --laterit ) ) 60%, transparent ); border-radius: 4px 4px 18px 18px; background: var( --panel ); cursor: pointer; transition: transform .24s, border-color .24s, box-shadow .24s; } .tsh-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( --laterit ) ) 65%, transparent ); } .tsh-kafel:focus-visible { outline: 2px solid var( --proso-j ); outline-offset: 3px; } .tsh-kafel h3 { margin: 2px 0 4px; font: 500 23px var( --serif ); color: var( --kaolin ); } .tsh-kafel p { margin: 6px 0 0; font-size: 16px; line-height: 1.6; color: var( --tekst ); } .tsh-kafel__gdzie { display: block; font: 400 10px var( --sans ); letter-spacing: .2em; text-transform: uppercase; color: var( --proso-j ); } .tsh-kafel__gdzie i { font-style: normal; margin-right: 7px; font-size: 12px; color: var( --etyk ); } .tsh-kafel .tsh-zd-wiecej { margin-top: auto; font-family: var( --sans ); } .tsh-kafel .zd-klocek__skrot { display: contents; } .tsh-skad { margin: 22px 0 0; padding: 14px 18px; border-left: 2px solid var( --niger ); border-radius: 0 12px 12px 0; background: rgba( 63, 122, 138, .12 ); font-size: 15px; line-height: 1.6; color: var( --tekst ); } .tsh-skad b { display: block; margin-bottom: 5px; font: 400 10px var( --sans ); letter-spacing: .24em; text-transform: uppercase; color: var( --niger-j ); } /* ══════════════ SZTAFETA SIGUI — podpis strony ══════════════ */ .tsh-sigui { display: grid; grid-template-columns: minmax( 0, 1.3fr ) minmax( 0, 1fr ); gap: 26px 40px; align-items: start; margin-top: 30px; } .tsh-lata { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin: 0; padding: 0; list-style: none; } .tsh-lata li { display: flex; align-items: center; gap: 8px; } .tsh-rok { display: grid; gap: 3px; padding: 13px 15px 11px; text-align: left; cursor: pointer; min-width: 108px; border: 1px solid var( --wlos ); border-radius: 4px 4px 16px 16px; border-top: 2px solid color-mix( in srgb, var( --k ) 45%, transparent ); background: linear-gradient( 180deg, rgba( 34, 27, 21, .9 ), rgba( 16, 13, 10, .95 ) ); transition: border-color .22s, box-shadow .22s, transform .22s; } .tsh-rok i { font-style: normal; font: 500 11px var( --serif ); width: 21px; height: 21px; display: grid; place-items: center; border: 1px solid color-mix( in srgb, var( --k ) 45%, transparent ); border-radius: 50%; color: var( --proso-j ); } .tsh-rok b { font: 500 21px var( --serif ); color: var( --tekst-mocny ); } .tsh-rok small { font: 400 10px var( --sans ); letter-spacing: .1em; line-height: 1.45; color: var( --tekst-slaby ); } .tsh-rok:hover { transform: translateY( -3px ); box-shadow: 0 0 30px -12px var( --k ); } .tsh-rok:focus-visible { outline: 2px solid var( --proso-j ); outline-offset: 2px; } .tsh-rok.jest-wybrany { border-top-color: var( --k ); box-shadow: 0 0 0 1px color-mix( in srgb, var( --k ) 45%, transparent ), 0 0 44px -14px var( --k ); } .tsh-rok.jest-wybrany b { color: var( --kaolin-j ); } .tsh-strzalka { color: var( --etyk ); opacity: .5; font-size: 15px; } .tsh-sigui__karta { min-height: 300px; padding: 26px 28px; border: 1px solid var( --wlos ); border-radius: 20px; background: radial-gradient( 420px 260px at 70% 0%, rgba( 217, 166, 60, .15 ), transparent 70% ), linear-gradient( 180deg, rgba( 34, 27, 21, .92 ), rgba( 16, 13, 10, .96 ) ); } .tsh-sigui__karta h3 { margin: 8px 0 0; font: 500 28px var( --serif ); color: var( --kaolin ); } .tsh-sigui__karta p { margin: 12px 0 0; font-size: 16.5px; line-height: 1.68; } .tsh-karta__uwaga { margin-top: 18px; padding: 14px 18px; border-left: 2px solid var( --laterit ); border-radius: 0 12px 12px 0; background: rgba( 184, 90, 52, .12 ); font-size: 15.5px; color: var( --tekst-mocny ); } /* ══════════════ OKNO PO KLIKNIĘCIU ══════════════ Okno wisi na `body`, POZA `.tsh-strona`, więc reguły scope'owane na stronę go nie widzą, a zmienne CSS w nim nie istnieją. Stąd `body:has(...)` i powtórzenie zmiennych na `.zd-tlo`. */ body:has( .tsh-strona ) .zd-tlo { --serif: 'Cormorant Garamond', Georgia, serif; --sans: Jost, system-ui, sans-serif; } body:has( .tsh-strona ) .zd-okno { background: radial-gradient( 120% 70% at 50% -6%, rgba( 217, 166, 60, .18 ), transparent 62% ), radial-gradient( 90% 60% at 92% 108%, rgba( 184, 90, 52, .15 ), transparent 68% ), linear-gradient( 178deg, #2a2118 0%, #1c1710 46%, #100d09 100% ); border: 1px solid rgba( 216, 198, 168, .3 ); box-shadow: inset 0 1px 0 rgba( 255, 244, 224, .1 ), 0 0 0 1px rgba( 0, 0, 0, .6 ), 0 40px 120px -40px rgba( 0, 0, 0, .95 ), 0 0 90px -30px rgba( 217, 166, 60, .38 ); } body:has( .tsh-strona ) .zd-okno__tekst, body:has( .tsh-strona ) .zd-okno__pelne p, body:has( .tsh-strona ) .zd-okno__gora p, body:has( .tsh-strona ) .zd-okno p { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 20px; line-height: 1.72; color: #e3d9c7; } body:has( .tsh-strona ) .zd-okno__tytul, body:has( .tsh-strona ) .zd-okno h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp( 34px, 3.4vw, 46px ); font-weight: 500; letter-spacing: .015em; color: #f3e8d3; text-shadow: 0 0 42px rgba( 217, 166, 60, .45 ), 0 2px 18px rgba( 0, 0, 0, .8 ); } body:has( .tsh-strona ) .zd-okno__gora::after { content: ''; display: block; height: 2px; margin: 18px 0 4px; background: linear-gradient( 90deg, rgba( 217, 166, 60, .85 ), rgba( 184, 90, 52, .5 ) 38%, transparent 88% ); box-shadow: 0 0 18px rgba( 217, 166, 60, .45 ); } body:has( .tsh-strona ) .zd-okno::before, body:has( .tsh-strona ) .zd-okno::after { content: ''; position: absolute; width: 62px; height: 62px; pointer-events: none; border-color: rgba( 216, 198, 168, .68 ); border-style: solid; border-width: 0; filter: drop-shadow( 0 0 10px rgba( 216, 198, 168, .45 ) ); } body:has( .tsh-strona ) .zd-okno::before { left: 14px; top: 14px; border-left-width: 2px; border-top-width: 2px; border-radius: 16px 0 0 0; } body:has( .tsh-strona ) .zd-okno::after { right: 14px; bottom: 14px; border-right-width: 2px; border-bottom-width: 2px; border-radius: 0 0 16px 0; } body:has( .tsh-strona ) .zd-okno__pelne > * > p:first-of-type::first-letter, body:has( .tsh-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: #efc668; text-shadow: 0 0 26px rgba( 217, 166, 60, .5 ); } body:has( .tsh-strona ) .zd-okno .tsh-kafel__gdzie, body:has( .tsh-strona ) .zd-okno .tsh-skad b, body:has( .tsh-strona ) .zd-okno .zd-wiecej, body:has( .tsh-strona ) .zd-okno__x { font-family: Jost, system-ui, sans-serif; } @media ( prefers-reduced-motion: no-preference ) { body:has( .tsh-strona ) .zd-tlo .zd-okno { animation: tsh-okno-wschodzi .42s cubic-bezier( .2, .7, .3, 1 ) both; } @keyframes tsh-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 ) { .tsh-sigui { grid-template-columns: minmax( 0, 1fr ); } .tsh-strzalka { display: none; } } @media ( max-width: 780px ) { .tsh-strona { padding: 0 18px 70px; } .tsh-sekcja { margin-top: 58px; } .tsh-sekcja--scisla, .tsh-sekcja--nie { padding: 26px 18px 30px; } .tsh-sekcja--tlo:not( .tsh-hero ) { padding: 26px 18px 30px; border-radius: 18px; } .tsh-hero { padding: 46px 18px 8px; } .tsh-hero.tsh-sekcja--tlo { margin: 0 -18px; padding: 150px 36px 24px; } .tsh-hero.tsh-sekcja--tlo::before, .tsh-hero.tsh-sekcja--tlo::after { height: 380px; } .tsh-sekcja:not( .tsh-sekcja--scisla ):not( .tsh-sekcja--tlo ):not( .tsh-hero )::before { inset-inline: -18px; } .tsh-poziom { margin: 6px 0 0; } .tsh-liczby { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 12px; margin-top: 30px; } .tsh-rok { min-width: 92px; } } @media ( max-width: 520px ) { .tsh-liczby { grid-template-columns: minmax( 0, 1fr ); } .tsh-lata li { width: 100%; } .tsh-rok { width: 100%; } } @media ( prefers-reduced-motion: reduce ) { .tsh-strona *, .tsh-strona *::before, .tsh-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. */ .tsh-sekcja--tlo .tsh-kafel, .tsh-hero.tsh-sekcja--tlo .tsh-kafel { background: rgba( 30, 24, 19, .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,14 : 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. */ .tsh-sekcja--tlo { --tekst-slaby: #a49b8e; /* 3,14 : 1 -> 4,50 : 1 nad bielą */ --etyk: #ab9b81; } /* ═══ OPRAWA 2026-09-11 — BOGOLAN zamiast gradientu, gniazda, poświata ═══ */ .tsh-strona { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2296%22%20height%3D%2296%22%20viewBox%3D%220%200%2096%2096%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2523e0b455%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.085%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%2248%22%20y2%3D%220%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%2248%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%2212%22%20x2%3D%2248%22%20y2%3D%2212%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%220%22%20x2%3D%2212%22%20y2%3D%2248%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%2224%22%20x2%3D%2248%22%20y2%3D%2224%22%2F%3E%3Cline%20x1%3D%2224%22%20y1%3D%220%22%20x2%3D%2224%22%20y2%3D%2248%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%2236%22%20x2%3D%2248%22%20y2%3D%2236%22%2F%3E%3Cline%20x1%3D%2236%22%20y1%3D%220%22%20x2%3D%2236%22%20y2%3D%2248%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%2248%22%20x2%3D%2248%22%20y2%3D%2248%22%2F%3E%3Cline%20x1%3D%2248%22%20y1%3D%220%22%20x2%3D%2248%22%20y2%3D%2248%22%2F%3E%3Cpolyline%20points%3D%2252%2C12%2060%2C4%2068%2C12%2076%2C4%2084%2C12%2092%2C4%22%2F%3E%3Cpolyline%20points%3D%2252%2C28%2060%2C20%2068%2C28%2076%2C20%2084%2C28%2092%2C20%22%2F%3E%3Cpolyline%20points%3D%2252%2C44%2060%2C36%2068%2C44%2076%2C36%2084%2C44%2092%2C36%22%2F%3E%3Ccircle%20cx%3D%224%22%20cy%3D%2256%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2256%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2228%22%20cy%3D%2256%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2256%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%224%22%20cy%3D%2268%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2268%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2228%22%20cy%3D%2268%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2268%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%224%22%20cy%3D%2280%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2280%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2228%22%20cy%3D%2280%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2280%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%224%22%20cy%3D%2292%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2292%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2228%22%20cy%3D%2292%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2292%22%20r%3D%221.6%22%2F%3E%3Cpolygon%20points%3D%2261%2C52%2070%2C61%2061%2C70%2052%2C61%22%2F%3E%3Cpolygon%20points%3D%2283%2C52%2092%2C61%2083%2C70%2074%2C61%22%2F%3E%3Cpolygon%20points%3D%22105%2C52%20114%2C61%20105%2C70%2096%2C61%22%2F%3E%3Cpolygon%20points%3D%2261%2C74%2070%2C83%2061%2C92%2052%2C83%22%2F%3E%3Cpolygon%20points%3D%2283%2C74%2092%2C83%2083%2C92%2074%2C83%22%2F%3E%3Cpolygon%20points%3D%22105%2C74%20114%2C83%20105%2C92%2096%2C83%22%2F%3E%3Cpolygon%20points%3D%2261%2C96%2070%2C105%2061%2C114%2052%2C105%22%2F%3E%3Cpolygon%20points%3D%2283%2C96%2092%2C105%2083%2C114%2074%2C105%22%2F%3E%3Cpolygon%20points%3D%22105%2C96%20114%2C105%20105%2C114%2096%2C105%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-size: 96px 96px; } .tsh-hero:not( .tsh-sekcja--tlo ) { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2296%22%20height%3D%2296%22%20viewBox%3D%220%200%2096%2096%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2523e0b455%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.14%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%2248%22%20y2%3D%220%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%2248%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%2212%22%20x2%3D%2248%22%20y2%3D%2212%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%220%22%20x2%3D%2212%22%20y2%3D%2248%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%2224%22%20x2%3D%2248%22%20y2%3D%2224%22%2F%3E%3Cline%20x1%3D%2224%22%20y1%3D%220%22%20x2%3D%2224%22%20y2%3D%2248%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%2236%22%20x2%3D%2248%22%20y2%3D%2236%22%2F%3E%3Cline%20x1%3D%2236%22%20y1%3D%220%22%20x2%3D%2236%22%20y2%3D%2248%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%2248%22%20x2%3D%2248%22%20y2%3D%2248%22%2F%3E%3Cline%20x1%3D%2248%22%20y1%3D%220%22%20x2%3D%2248%22%20y2%3D%2248%22%2F%3E%3Cpolyline%20points%3D%2252%2C12%2060%2C4%2068%2C12%2076%2C4%2084%2C12%2092%2C4%22%2F%3E%3Cpolyline%20points%3D%2252%2C28%2060%2C20%2068%2C28%2076%2C20%2084%2C28%2092%2C20%22%2F%3E%3Cpolyline%20points%3D%2252%2C44%2060%2C36%2068%2C44%2076%2C36%2084%2C44%2092%2C36%22%2F%3E%3Ccircle%20cx%3D%224%22%20cy%3D%2256%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2256%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2228%22%20cy%3D%2256%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2256%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%224%22%20cy%3D%2268%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2268%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2228%22%20cy%3D%2268%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2268%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%224%22%20cy%3D%2280%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2280%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2228%22%20cy%3D%2280%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2280%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%224%22%20cy%3D%2292%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2292%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2228%22%20cy%3D%2292%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2292%22%20r%3D%221.6%22%2F%3E%3Cpolygon%20points%3D%2261%2C52%2070%2C61%2061%2C70%2052%2C61%22%2F%3E%3Cpolygon%20points%3D%2283%2C52%2092%2C61%2083%2C70%2074%2C61%22%2F%3E%3Cpolygon%20points%3D%22105%2C52%20114%2C61%20105%2C70%2096%2C61%22%2F%3E%3Cpolygon%20points%3D%2261%2C74%2070%2C83%2061%2C92%2052%2C83%22%2F%3E%3Cpolygon%20points%3D%2283%2C74%2092%2C83%2083%2C92%2074%2C83%22%2F%3E%3Cpolygon%20points%3D%22105%2C74%20114%2C83%20105%2C92%2096%2C83%22%2F%3E%3Cpolygon%20points%3D%2261%2C96%2070%2C105%2061%2C114%2052%2C105%22%2F%3E%3Cpolygon%20points%3D%2283%2C96%2092%2C105%2083%2C114%2074%2C105%22%2F%3E%3Cpolygon%20points%3D%22105%2C96%20114%2C105%20105%2C114%2096%2C105%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"), linear-gradient( 160deg, rgba( 184, 83, 42, .16 ), rgba( 0, 0, 0, 0 ) 60% ); background-size: 128px 128px, cover; } /* ZASŁONA BYŁA PRAWIE NIEPRZEZROCZYSTA — 0,84 u góry i 0,93 u dołu, czyli przez zdjęcie przechodziło od 7 do 16 procent obrazu. Przemo zgłosił, że teł „słabo widać", i miał rację co do liczby. Wartości niżej NIE SĄ MOJE — to dokładnie te, które ten arkusz ma już w `.tsh-sekcja--tlo::after` jako zamysł autora: zasłona ciężka po LEWEJ, gdzie stoi nagłówek i lead, i schodząca do zera po prawej, gdzie stoi sam obraz. Przeniosłem je tylko na warstwę, która naprawdę maluje, bo ::after przegrywa tu ze wspólnym `zdobienia.css`. */ .tsh-sekcja--tlo { background-image: linear-gradient( 90deg, rgba( 20, 16, 13, .94 ) 0%, rgba( 20, 16, 13, .70 ) 36%, rgba( 20, 16, 13, .20 ) 66%, transparent 100% ), linear-gradient( 180deg, rgba( 12, 10, 8, .10 ) 0%, rgba( 12, 10, 8, .34 ) 100% ), var( --tlo ) !important; background-size: cover !important; background-position: center; } .tsh-sekcja:not( .tsh-sekcja--tlo ):nth-of-type( odd ) { background-image: linear-gradient( 180deg, rgba( 184, 83, 42, .07 ), transparent 60% ); } .tsh-sekcja:not( .tsh-sekcja--tlo ):nth-of-type( even ) { background-image: linear-gradient( 180deg, transparent, rgba( 184, 83, 42, .06 ) ); } .tsh-tytul, .tsh-sekcja__tytul { text-shadow: 0 0 26px rgba( 224, 180, 85, .26 ), 0 2px 16px rgba( 0, 0, 0, .5 ); } .tsh-foto { margin: -20px -20px 14px; aspect-ratio: 1 / 1; overflow: hidden; } .tsh-foto img { display: block; width: 100%; height: 100%; object-fit: cover; } .tsh-kafel { overflow: hidden; } /* ===== MIT W KAFLU 2026-09-12 ===== */ .tsh-kafel__nad--mit { color: #c4826e; letter-spacing: .16em; } .tsh-kafel__mit { color: var( --tekst-slaby ); font-style: italic; } .tsh-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. */ .tsh-strona .tsh-hero .tsh-okno.zd-okno, .tsh-strona .tsh-hero .zd-okno.zd-okno, .tsh-strona .tsh-hero .tsh-okno.tsh-okno { background: radial-gradient( 720px 240px at 42% 0%, rgba( 30, 24, 19, .10 ), transparent 70% ), linear-gradient( 168deg, #1f1b18, #14100d ); } /* ===== 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(.tsh-strona){ background-color: #14100d; background-image: linear-gradient( #14100dbb, #14100ddd ), url( '/wp-content/uploads/tarot-kompat/afryka/sahel/gfx/tlo-calosc.webp' ); background-position: center; background-size: cover; background-attachment: fixed; }