/* * Układ podstawowy i typografia. * * TO JEST WARSTWA, KTÓRĄ W STARYM UKŁADZIE DAWAŁ GENERATEPRESS. * * Wartości przeniesione z `generatepress/assets/css/main.min.css` — nie z oka. * Bez nich strony bez `pages.css` (Kody USSD, FAQ, regulaminy, polityka * prywatności) dostają domyślne marginesy przeglądarki: akapit ma wtedy odstęp * u góry I u dołu, odstępy sumują się, a stopka rozciąga się w pionie na dwa * ekrany. Na stronach oferty tego nie widać, bo `pages.css` zeruje marginesy sam * — i właśnie dlatego usterka wyszła tylko na części serwisu. * * Świadomie bez stylu osadzanego w stronie: to był jeden z powodów, dla których * w poprzednim projekcie nie dało się włączyć Content-Security-Policy na ostro. */ /* * TU NIE MA AKCENTU — SZUKAJ GO W `style.css` * * Barwy marki (`--pakiet-red`, `--pakiet-ink`, `--pakiet-cream`, `--pakiet-line`) * mieszkają w `:root` w `style.css` i to jest jedyne ich źródło. Ten blok trzyma * wyłącznie warstwę, którą w starym układzie dawał GeneratePress. * * Do 17.08.2026 stała tu `--kolor-akcent: #d32f2f` — trzecia czerwień w projekcie, * NIEUŻYWANA ANI RAZU. Usunięta, żeby nikt jej przy zmianie barw nie poprawił * w przekonaniu, że zmienia akcent serwisu. * * DWA KOLORY PISMA, ŚWIADOMIE RÓŻNE: * * --kolor-tekst #222 pismo stron ogólnych (FAQ, regulaminy, polityka) * --pakiet-ink #515555 szarość z logo, pismo stron ofertowych — 26 użyć * * Różnica nie jest decyzją projektową, tylko historią: `#222` przyszło 1:1 * z GeneratePressa, `#515555` jest barwą napisu KLUCZ ze znaku. Oba mają na bieli * kontrast powyżej progu (15,9:1 i 7,55:1), więc nie ma tu usterki do naprawienia * — ale ustawienie „kolor pisma” w panelu musi zmieniać OBA, inaczej połowa * serwisu zostanie przy starej barwie. */ :root { /* * Barwy przeniesione stąd do `style.css` 17.08.2026 — `--kolor-tekst`, * `--kolor-tlo` i `--kolor-naglowek`. Ten arkusz wczytuje się PO `style.css`, * więc deklaracja tutaj wygrywała z blokiem barw z panelu i unieważniała trzy * pola ekranu „Barwy” bez żadnego śladu. * * Nie dopisywać tu barw. Zostają wymiary. */ --szerokosc: 1200px; --odstep: 1.5rem; } /* --------------------------------------------------------------------------- Reset — 1:1 z GeneratePress --------------------------------------------------------------------------- */ blockquote, body, dd, dl, dt, fieldset, figure, h1, h2, h3, h4, h5, h6, hr, html, iframe, legend, li, ol, p, pre, textarea, ul { margin: 0; padding: 0; border: 0; } html { box-sizing: border-box; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } *, *::before, *::after { box-sizing: inherit; } /* --------------------------------------------------------------------------- Typografia 17 px i interlinia 1,5 — wartości GeneratePressa. Stos krojów systemowych, bo taki był w motywie nadrzędnym; Geist (`--klucz-font-ui`) zakładają na to poszczególne składniki, a nie całe body. --------------------------------------------------------------------------- */ body, button, input, select, textarea { font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-weight: 400; font-size: 17px; line-height: 1.5; text-transform: none; } body { color: var(--kolor-tekst); background: var(--kolor-tlo); } /* Akapit ma odstęp WYŁĄCZNIE u dołu. Domyślny margines przeglądarki daje odstęp z obu stron i sąsiadujące akapity sumują go — stąd rozciągnięta stopka. */ p { margin-bottom: 1.5em; } h1, h2, h3, h4, h5, h6 { font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; } h1 { font-size: 42px; margin-bottom: 20px; line-height: 1.2em; font-weight: 400; } h2 { font-size: 35px; margin-bottom: 20px; line-height: 1.2em; font-weight: 400; } h3 { font-size: 29px; margin-bottom: 20px; line-height: 1.2em; font-weight: 400; } h4 { font-size: 24px; margin-bottom: 20px; } h5 { font-size: 20px; margin-bottom: 20px; } h6 { margin-bottom: 20px; } ol, ul { margin: 0 0 1.5em 3em; } ul { list-style: disc; } ol { list-style: decimal; } li > ol, li > ul { margin-bottom: 0; margin-left: 1.5em; } dt { font-weight: 700; } dd { margin: 0 1.5em 1.5em; } b, strong { font-weight: 700; } cite, dfn, em, i { font-style: italic; } figure { margin: 0; } img { max-width: 100%; height: auto; } embed, iframe, object { max-width: 100%; } a { text-decoration: none; } table { border-collapse: separate; border-spacing: 0; border-width: 1px 0 0 1px; margin: 0 0 1.5em; width: 100%; } table, td, th { border: 1px solid rgba(0, 0, 0, .1); } td, th { padding: 8px; border-width: 0 1px 1px 0; } th { font-weight: 700; } /* --------------------------------------------------------------------------- Widżety — odstępy z GeneratePress `.footer-widgets .widget :last-child { margin-bottom: 0 }` jest tu kluczowe: bez niego ostatni akapit w każdej kolumnie dokłada 1,5 em pod spodem, pięć razy, i stopka rośnie bez powodu. --------------------------------------------------------------------------- */ .footer-widgets .widget { margin-bottom: 30px; } .footer-widgets .widget:last-child { margin-bottom: 0; } .footer-widgets .widget :last-child { margin-bottom: 0; } .widget__tytul, .widget-title { margin-bottom: 30px; font-size: 20px; line-height: 1.5; font-weight: 400; } .widget ol, .widget ul { margin: 0; } .widget ul li { list-style-type: none; position: relative; margin-bottom: .5em; } .widget ul li ul { margin-left: 1em; margin-top: .5em; } /* --------------------------------------------------------------------------- Dostępność --------------------------------------------------------------------------- */ /* Odsyłacz pomijający menu: widoczny dopiero po dojściu do niego klawiaturą. */ .klucz-pomin { position: absolute; left: -9999px; z-index: 100; padding: 0.75rem 1.25rem; background: var(--kolor-tekst); color: #fff; } .klucz-pomin:focus { left: 0; top: 0; } /* * Widoczne dla czytnika ekranu, niewidoczne dla oka. * * `display: none` i `visibility: hidden` chowają element przed OBIEMA drogami — * czytnik też go pomija. Dlatego element zostaje w układzie, tylko przycięty * do zera. `white-space: nowrap` zapobiega temu, żeby zawinięty tekst * rozepchnął stronę o piksel w bok. */ .klucz-tylko-czytnik { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .tresc { min-height: 50vh; } .strona__tresc { max-width: var(--szerokosc); margin: 0 auto; padding: var(--odstep); } /* * Strona 404 nie miała żadnego stylu: `
` szedł od krawędzi do krawędzi, * bez kolumny i bez odstępu od nagłówka, a odsyłacz „Wróć na stronę główną” * zostawał przy domyślnym niebieskim przeglądarki (#0000ee) — jedynym miejscu * w serwisie poza paletą. Widać to było dopiero po wpisaniu nieistniejącego * adresu, więc przeżyło całą przebudowę. */ .strona--404 { max-width: var(--szerokosc); margin: 0 auto; padding: var(--klucz-sekcja-y, 4rem) var(--odstep); } .strona--404 a { color: var(--pakiet-red); text-decoration: underline; } /* * Długie adresy łamią się zamiast rozpychać stronę. * * W polityce prywatności stoi lista adresów pomocy przeglądarek — jeden ciąg * bez spacji, dłuższy niż ekran telefonu. Bez tego cała strona robiła się * szeroka na 510 px przy oknie 412 px i dawała się przewijać w bok; ucierpiał * przez to każdy inny akapit, bo tekst uciekał poza prawą krawędź. * * `break-word`, nie `anywhere`: łamie dopiero wtedy, gdy słowo samo nie mieści * się w wierszu, więc zwykły tekst zawija się normalnie po spacjach. */ .strona__tresc { overflow-wrap: break-word; } /* * Data i podpis w komunikatach. * * Komunikaty mają formę pisma: data u góry, podpis u dołu przy prawej. Wcześniej * robiły to klasy przyniesione razem ze starą treścią (`p-right`, `right`) * i sztywna szerokość 250 px, przez którą podpis łamał się na telefonie. */ .dokument-data { margin-bottom: 2.5rem; color: var(--pakiet-muted, #6f6b68); } .dokument-podpis { margin-top: 2.5rem; /* Blok dosunięty do prawej, ale wiersze w środku wyrównane do lewej — tak podpisuje się pismo. */ width: fit-content; margin-left: auto; text-align: left; } /* ============================================================= Dotyk na telefonie ============================================================= */ /* * Zdjęcie niebieskiego prostokąta po dotknięciu. * * Android rysuje po każdym dotknięciu prostokątną poświatę na całym polu * klikalnym — także pod przyciskami z zaokrąglonymi rogami, gdzie wychodzi * poza ich kształt i wygląda na usterkę. Do tej pory zdejmował ją tylko * `strony-faq.css`, czyli jedna strona z kilkunastu. * * ALE NIE ZDEJMUJEMY BEZ ZASTĄPIENIA. Ta poświata jest jedynym potwierdzeniem, * że palec trafił — bez niej przy wolniejszym łączu nie wiadomo, czy dotknięcie * doszło, i ludzie klikają drugi raz. Dlatego niżej stan `:active` daje własne, * spokojniejsze potwierdzenie, dopasowane kształtem do samego elementu. */ html { -webkit-tap-highlight-color: transparent; } /* * Potwierdzenie dotknięcia: krótkie przygaszenie. * * Krycie, nie tło ani obwódka — działa na każdym elemencie niezależnie od tego, * jak jest pomalowany, i nie wymaga znajomości jego barw. Przygaszenie do 70% * jest widoczne, a nie krzykliwe. * * `transition` celowo krótkie w jedną stronę i dłuższe w drugą: zapalenie ma być * natychmiastowe, żeby nadążyło za palcem, a powrót łagodny. * * Wyłączone tam, gdzie element ma już własny stan wciśnięcia — inaczej dwa * potwierdzenia nakładałyby się na siebie. */ @media (hover: none) and (pointer: coarse) { a:active, button:active, summary:active, [role="button"]:active, input[type="submit"]:active { opacity: .7; transition: opacity 40ms ease-out; } a, button, summary, [role="button"], input[type="submit"] { transition: opacity 180ms ease-out; } }