/* ══════════════════════════════════════════════════════════════════════════ STRONY OPISOWE AKCJI — DOPROWADZENIE DO JEDNEJ IDENTYFIKACJI 23.09.2026. Dotyczy /polakzsercem/index, calosc, droga-daru, bank-potrzeb, caritas, gotow, platforma, podrecznik, verifis, verifis-portal. PO CO TEN ARKUSZ, SKORO JEST JUŻ `marka-pzs.css`. Tamten opisuje markę: barwy odczytane ze znaku i kroje z naszego serwera. Ten jest tłumaczem — te strony mają własne nazwy barw (`--serce`, `--papier`, `--atrament`…), nadane zanim znak akcji trafił do wrzutni. Zamiast przepisywać dziesięć plików i ryzykować, że po drodze zginie treść, podmieniam WARTOŚCI pod tamtymi nazwami. Układ i treść zostają nietknięte, zmienia się barwa i krój. CZEGO TU NIE MA: nie ruszam sensu żadnej strony, nie dodaję i nie usuwam ani jednego zdania. To jest arkusz stylu, nie redakcja. MOTYW CIEMNY. Te strony miały własny motyw ciemny na `prefers-color-scheme` i na `[data-theme="dark"]`. Zostaje — dokładam tylko odcienie marki, żeby czerwień w nocy nie schodziła poniżej progu czytelności. ══════════════════════════════════════════════════════════════════════════ */ @import url('/polakzsercem/marka-pzs.css?v=20260923'); :root{ /* Barwy z pliku znaku. Zmierzone na tle #FFFDF2: #C21319 → 6,05:1 #2A2622 → 14,72:1 #605A50 → 6,69:1 */ --papier: #FFFDF2; --karta: #FFFFFF; --atrament: #2A2622; --serce: #C21319; --przygas: #605A50; --linia: #E4DCC8; --linia-moc: #CFC4A8; --zloto: #8A6410; /* 5,92:1 na #FFFDF2 — poprzednie #9a6b12 dawało 5,17:1 */ --cien: rgba(42,38,34,.08); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --papier: #1B1815; --karta: #262219; --atrament: #F4EFE4; /* 15,41:1 */ --serce: #F0A8AC; /* 9,18:1 */ --przygas: #C9C0AE; /* 9,79:1 */ --linia: #3B352B; --linia-moc: #4E4739; --zloto: #E8C169; --cien: rgba(0,0,0,.45); } } :root[data-theme="dark"], :root[data-motyw="ciemny"]{ --papier: #1B1815; --karta: #262219; --atrament: #F4EFE4; --serce: #F0A8AC; --przygas: #C9C0AE; --linia: #3B352B; --linia-moc: #4E4739; --zloto: #E8C169; --cien: rgba(0,0,0,.45); } /* ── KROJE ──────────────────────────────────────────────────────────────── */ /* Georgia ustępuje Poppinsowi, bo napis POLAK Z SERCEM w znaku jest geometrycznym groteskiem, a nie antykwą. Tekst idzie na Lato. */ body{font-family:'Lato',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif !important; font-size:17px;line-height:1.65} h1,h2,h3,h4,h5,.podtytul,.we h3,.pzs-nav{ font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif !important; letter-spacing:-.012em} .podtytul{font-style:normal !important;font-weight:700} /* ── PODŁOGA STOPNIA PISMA: 16 px ───────────────────────────────────────── */ /* NIE ROBIĘ TEGO STĄD. Zapisy `font-size` poniżej 16 px podniosłem w samych plikach stron — każdy z osobna, bo tylko tam widać, czy 0,74 rem to nadtytuł, czy podpis pod liczbą. Tu zostaje jedynie odstęp międzyliterowy nadtytułów, który po powiększeniu pisma był za ciasny. */ .nad,.we .etyk{letter-spacing:.1em} /* ── CELE DOTYKU ────────────────────────────────────────────────────────── */ .pzs-nav a{min-height:44px;display:inline-flex;align-items:center;padding:10px 14px} a.przyc,button,.btn,input[type=submit]{min-height:44px} /* ── PASEK NAWIGACJI AKCJI ──────────────────────────────────────────────── */ /* Był granatowy z czerwoną kreską. Granat nie występuje w znaku akcji — zastępuje go ciemna czerwień marki, a kreska bierze żółć z ilustracji. */ .pzs-nav{background:var(--pzs-czerwien-c) !important;border-bottom:4px solid var(--pzs-zolc) !important} .pzs-nav a{color:#FFF1F2 !important} /* 8,62:1 na #8E0D12 */ .pzs-nav a:hover{background:rgba(0,0,0,.28) !important;color:#fff !important} .pzs-nav .pzs-nav-marka{color:#fff !important;font-weight:700} .pzs-nav .pzs-nav-teraz{background:var(--pzs-zolc) !important;color:#2A2622 !important} /* 10,35:1 */ .pzs-nav a:focus-visible{outline:3px solid #fff;outline-offset:2px} /* ── TABELE NIE WYPYCHAJĄ STRONY W BOK ──────────────────────────────────── */ /* Na telefonie szeroka tabela rozpychała całą stronę. Obudowa przewijana w poziomie trzyma ją u siebie; `display:block` na samej tabeli wystarcza, bo te strony nie mają tabel zagnieżdżonych. */ /* `body table` (waga 0-0-2) bije `table` (0-0-1) ze stron — inaczej zapis `width:max-content` z arkusza strony zostawał i tabela wypychała stronę o kilka pikseli mimo `overflow-x:auto`. Zmierzone na /polakzsercem/caritas przy 380 px: przed poprawką scrollWidth 384 przy clientWidth 380. */ body table{display:block;width:100%;max-width:100%;min-width:0; overflow-x:auto;-webkit-overflow-scrolling:touch} img{max-width:100%;height:auto} body{overflow-x:hidden} /* ── DWA MIEJSCA, KTÓRE ROZPYCHAŁY STRONĘ PRZY 320 px ───────────────────── */ /* Zmierzone 23.09.2026 przeglądarką, nie na oko: przy szerokości 320 px strona dawała się przesunąć w bok o 24 px (/polakzsercem/caritas) i o 16 px (/polakzsercem/gotow). Po tych dwóch regułach — o 0 px. 1. Siatki kafli mają tor `minmax(230px, 1fr)`. Przy 320 px treść okna ma 280 px, więc tor 230 px mieści się, ale najwęższa możliwa treść kafla bywa szersza i wypycha siatkę. `min(230px,100%)` pozwala torowi zejść poniżej 230 px, gdy okno jest węższe. 2. Znacznik „WYMAGA KONTA" stoi za nagłówkiem jako `inline-block` z lewym marginesem — na wąskim ekranie nie miał się gdzie złamać. Na telefonie schodzi do własnego wiersza. */ .kafle,.wejscia,.siatka,.karty{ grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr)) !important} @media(max-width:480px){ .kafel .klucz{margin-left:0;margin-top:6px} } /* Długi adres albo nazwa bez spacji nie ma prawa wypchnąć strony. */ h1,h2,h3,h4,td,th,li,p,a{overflow-wrap:anywhere} /* Odnośnik, który JEST całą pozycją wykazu (spis treści, lista źródeł), jest celem palca, a nie odnośnikiem w zdaniu — dostaje 44 px wysokości. Odnośników wplecionych w tekst to nie dotyczy: tam celem jest wyraz. */ li > a:only-child{display:inline-block;padding:11px 0;min-height:44px} /* ── MOTYW NOCNY: PRZYCISKI NA CZERWIENI ────────────────────────────────── */ /* Strony mają przyciski zapisane jako `background:var(--serce);color:#fff`. W nocy `--serce` musi być JASNE, bo jest też pismem — i wtedy biały napis na przycisku schodził do 2,38:1. Zmierzone 23.09.2026. Tło przycisku bierze więc ciemną czerwień marki, która nie zmienia się między motywami: biel na #8E0D12 to 9,47:1. */ :root[data-theme="dark"] button.glowny, :root[data-motyw="ciemny"] button.glowny, :root[data-theme="dark"] .filtr.wybrany, :root[data-motyw="ciemny"] .filtr.wybrany{ background:var(--pzs-czerwien-c) !important; color:#fff !important; border-color:var(--pzs-czerwien-c) !important} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) button.glowny, :root:not([data-theme="light"]) .filtr.wybrany{ background:var(--pzs-czerwien-c) !important; color:#fff !important; border-color:var(--pzs-czerwien-c) !important} } /* Przycisk na złocie ma pismo ciemne w OBU motywach — złoto jest jasne zawsze. */ :root[data-theme="dark"] button.g, :root[data-motyw="ciemny"] button.g{color:#1A1A1A !important} /* Ostatnie ogniwo „drogi pomocy" (SPOTKANIE) też stoi na `--serce` z białym pismem — w nocy 2,38:1. Ta sama poprawka co przy przyciskach. */ :root[data-theme="dark"] .droga span:last-child, :root[data-motyw="ciemny"] .droga span:last-child{ background:var(--pzs-czerwien-c) !important; color:#fff !important; border-color:var(--pzs-czerwien-c) !important} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .droga span:last-child{ background:var(--pzs-czerwien-c) !important; color:#fff !important; border-color:var(--pzs-czerwien-c) !important} } /* ── verifis-portal: CZEGO TU NIE ZROBIŁEM ──────────────────────────────── */ /* Ta strona (symulacja narzędzia Verifisu) ma własną paletę granatowo-kremową i nigdy nie miała motywu nocnego. W nocy motyw.css ratuje stare strony, przestawiając globalnie `--navy` na jasny granat — a tu `--navy` bywa TŁEM z białym napisem. Zmierzone 23.09.2026 w motywie ciemnym: sześć napisów poniżej progu, najgorszy 1,26:1 (przycisk „Zaplanuj odbiór"). PRÓBOWAŁEM przypiąć jej własne wartości nocne i było GORZEJ (dwanaście napisów poniżej progu), bo treść tej strony ma barwy wpisane na twardo, nie przez tokeny. Porządna poprawka to przepisanie jej stylów — to robota na osobne zlecenie, a nie doklejka do arkusza marki. Zostawiam więc stan sprzed mojej pracy i zgłaszam. W MOTYWIE JASNYM — tym, który widzi człowiek z ulicy — strona jest czysta: jedyny napis poniżej progu to pas „Polak z Sercem" z `wspolne/pasy.css`. */