/* Theme Name: Brand Perspective Theme URI: https://brandperspective.pl Author: Brand Perspective Description: Motyw w stronach firmowych Brand Perspective. Stabilny układ zapewniony jest dzięki szablonom PHP, natomiast treść osadzona jest w polach ACF. Daje to pełną swobodę edycji tekstów i multimediów przez właściciela witryny, natomiast zakodowany layout zapewnia trwałość wyglądu i zmniejsza ryzyko wystąpienia wszelkich błędów. Version: 1.24.2 Requires at least: 6.5 Requires PHP: 8.0 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: brand-perspective Tags: custom-menu, featured-images, translation-ready */ /* ===================================================================== 1. PODSTAWA rem - SYSTEM PROGÓW TEN BLOK MUSI STAĆ PRZED WSZYSTKIMI INNYMI REGUŁAMI. Ustala podstawę `rem`, więc każda wartość niżej zależy od tego, co tu jest. Typografia i odstępy pisane w `rem` skalują się same wraz z szerokością ekranu - nie ma osobnych rozmiarów w każdym progu. Piksel zostaje tylko tam, gdzie skalowanie jest niepożądane: włos ramki, cień, promień zaokrąglenia, grubość kreski. Punkt odniesienia przy mierzeniu: 90em (1440 px), gdzie 1rem = 10px. Zmierzone 24 px zapisujemy jako 2.4rem. ===================================================================== */ html { font-size: 9px; } /* SZEROKOSC I ODDECH BOCZNY (specyfikacja 2, M9) - WZOR WIAZACY. Kontener tresci ma STALA szerokosc 140rem (1260 px przy 9 px, 1400 px przy 10 px, 1960 px przy 14 px, 2240 px przy 16 px) i jest wysrodkowany. Od krawedzi kontenera tresc dzieli oddech, nigdy mniej niz 10 px. Progi (podstawa rem / oddech): 0-29.99em 9 px / 1rem 30-89.99em 9 px / 2rem 90-119.99em 10 px / 4rem 120-149.99em 10 px / 12rem 150-179.99em 14 px / 18rem 180em+ 16 px / 18rem Odstep tresci od krawedzi ekranu (przy pasku przewijania 15 px): 390: 10 1024: 18 1440: 52,5 1920: 372,5 Te liczby sa wzorem dla KAZDEJ strony, podstrony i wtyczki - nowa podstrona nie ustawia wlasnej szerokosci, tylko uzywa `.bp-tresc`. */ :root { --bp-szerokosc: 140rem; --bp-oddech: 1rem; } @media (min-width: 30em) { :root { --bp-oddech: 2rem; } } @media (min-width: 90em) { html { font-size: 10px; } :root { --bp-oddech: 4rem; } } @media (min-width: 120em) { :root { --bp-oddech: 12rem; } } @media (min-width: 150em) { html { font-size: 14px; } :root { --bp-oddech: 18rem; } } @media (min-width: 180em) { html { font-size: 16px; } } /* ===================================================================== 2. TOKENY Jedyne miejsce, w którym stoją kolory i rozmiary marki. Zmiana wyglądu strony zaczyna się tutaj, a nie w szablonach sekcji. Sekcje mają sięgać po zmienne, nigdy po wartość wprost. ===================================================================== */ :root { /* Kolory */ --bp-akcent: #2563eb; --bp-akcent-ciemny: #1e40af; --bp-czern: #020617; --bp-tekst: #1e293b; --bp-tekst-2: #475569; /* Szary słabszy niż `--bp-tekst-2`: etykiety w polach formularza, tekst zgody i wiersz z telefonem pod przyciskiem. Te napisy mają być czytelne, ale NIE mają przyciągać wzroku - konkurują wtedy z tym, co człowiek ma w formularzu zrobić. Wzięte ze strony kampanii usług instalacyjnych, gdzie sprawdziło się w praktyce. */ --bp-tekst-slabszy: #64748b; --bp-ramka: #cbd5e1; --bp-ramka-lekka: #e2e8f0; --bp-tlo-jasne: #f1f5f9; --bp-biel: #ffffff; /* Krój DWA KROJE, NIE JEDEN. Nagłówki i tekst ciągły to w typografii dwie różne role i bardzo często dwa różne kroje - nagłówek ma zatrzymać wzrok, tekst ma się czytać przez dziesięć minut. Do 1.13.0 było tu jedno pole i całą witrynę składało się jednym krojem. `--bp-pismo-naglowki` domyślnie DZIEDZICZY po `--bp-pismo`, więc strona, na której nikt nic nie wybierał, wygląda dokładnie tak samo jak przedtem. */ --bp-pismo: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; --bp-pismo-naglowki: var(--bp-pismo); /* Rozmiary pisma ROZMIARY SĄ ZMIENNYMI, ŻEBY DAŁO SIĘ JE ZMIENIĆ Z „DOSTOSUJ” dla całej witryny naraz, bez szukania po arkuszu. Wartości są dokładnie te, które stały tu wcześniej wpisane wprost - strona bez ustawień w panelu wygląda identycznie. H1 i H2 mają osobną wartość na telefon, bo na wąskim ekranie nagłówek w rozmiarze komputerowym zajmuje pół ekranu. Mniejsze nagłówki takiego rozjazdu nie potrzebują i mają jedną wartość. */ /* UWAGA NA NAZWY: `--bp-tekst` to KOLOR tekstu, ustawiony wyżej. Rozmiar musi mieć własną nazwę - inaczej druga deklaracja zjada pierwszą i akapity tracą kolor. Złapane przed wysyłką. */ --bp-rozmiar-tekstu-tel: 1.8rem; --bp-rozmiar-tekstu: 1.7rem; --bp-h1-tel: 4rem; --bp-h1: 6rem; --bp-h2-tel: 2.5rem; --bp-h2: 3rem; --bp-h3: 2rem; --bp-h4: 1.8rem; --bp-h5: 1.6rem; --bp-h6: 1.4rem; /* Szerokości treści */ --bp-tresc: var(--bp-szerokosc); /* progi: rozdzial 1 */ --bp-tresc-waska: 75rem; /* Przycisk KOLORY I KRÓJ PRZYCISKÓW SĄ OSOBNYMI ZMIENNYMI, a nie odwołaniem do koloru głównego wprost. Dzięki temu da się je zmienić hurtowo z „Dostosuj” dla wszystkich przycisków na witrynie - a domyślnie dziedziczą po kolorze głównym i kroju witryny, więc strona, na której nikt nic nie wybierał, wygląda tak samo jak przedtem. Dwa warianty i tylko dwa: PEŁNY i KONTUROWY. Tyle robimy i tyle ma być do wyboru - trzeci wariant to trzecia decyzja przy każdej sekcji i trzeci sposób, w jaki strona może przestać być spójna. */ --bp-blad: #b91c1c; /* komunikaty i ramki bledow formularza */ /* Kolor uniwersalny, celowo poza paleta marki: gwiazdki ocen sa zlote na kazdej stronie, niezaleznie od kolorow firmy. Sekcja siega po te zmienna, nigdy po wartosc wprost. */ --bp-gwiazdki: #f5a524; --bp-btn-promien: 1rem; /* w rem, bo taki jest w projekcie */ /* * Promien pol formularza IDZIE ZA PRZYCISKAMI (F6): przyciski kanciaste * (promien 0) - pola kanciaste; przyciski zaokraglone w jakimkolwiek * stopniu - pola zawsze 1rem. Wartosc 0 wypisuje „Dostosuj" sam, * razem z promieniem przyciskow. */ --bp-pole-promien: 1rem; --bp-btn-wysciolka: 1.6rem 5rem; --bp-btn-pismo: var(--bp-pismo); --bp-btn-tlo: var(--bp-akcent); --bp-btn-tlo-hover: var(--bp-akcent-ciemny); --bp-btn-napis: var(--bp-biel); --bp-btn-napis-hover: var(--bp-biel); --bp-btn-kontur-kreska: var(--bp-akcent); --bp-btn-kontur-napis: var(--bp-akcent); --bp-btn-kontur-tlo-hover: var(--bp-akcent); --bp-btn-kontur-napis-hover: var(--bp-biel); /* * PRZYCISKI - RODZAJE (od 1.22.0). Ksztalt i pismo wspolne dla kazdego * rodzaju (--bp-btn-promien, -pismo, -grubosc, -rozmiar, -wysciolka, * -litery); rodzaj rozni sie tylko kolorami. Ustawienia: „Dostosuj -> * Przyciski" (`includes/przyciski.php`). Puste pole = wartosc stad. */ --bp-btn-gradient: none; /* Wielkość pisma przycisku, gdy w „Dostosuj" jej nie ustawiono - dla przycisków wtyczek (baner zgód), które nie mają klasy `.bp-btn`. */ --bp-btn-rozmiar-domyslny: 1.7rem; --bp-btn-grubosc: 600; --bp-btn-litery: none; --bp-btn-odstep-liter: -0.02rem; --bp-btn-drugi-tlo: var(--bp-czern); --bp-btn-drugi-tlo-hover: var(--bp-akcent); --bp-btn-drugi-napis: var(--bp-biel); --bp-btn-drugi-napis-hover: var(--bp-biel); --bp-btn-drugi-gradient: none; --bp-btn-pomoc-tlo: color-mix(in srgb, var(--bp-akcent) 12%, var(--bp-biel)); --bp-btn-pomoc-tlo-hover: color-mix(in srgb, var(--bp-akcent) 22%, var(--bp-biel)); --bp-btn-pomoc-napis: var(--bp-akcent); --bp-btn-pomoc-napis-hover: var(--bp-akcent-ciemny); --bp-btn-jasny-tlo: var(--bp-biel); --bp-btn-jasny-tlo-hover: color-mix(in srgb, var(--bp-biel) 85%, var(--bp-akcent)); --bp-btn-jasny-napis: var(--bp-czern); --bp-btn-jasny-napis-hover: var(--bp-czern); --bp-btn-tekst-napis: var(--bp-akcent); --bp-btn-tekst-napis-hover: var(--bp-akcent-ciemny); /* Nagłówek */ --bp-naglowek-wysokosc-tel: 6.5rem; } /* ===================================================================== 3. RESET Pisany w `:where()`, żeby miał ZEROWĄ wagę. Bez tego reset na znaczniku z przedrostkiem klasy body ma wagę wyższą niż warianty pisane na samej klasie i po cichu je zjada. Reset ma ustawiać punkt wyjścia, a nie wygrywać ze wszystkim, co po nim. ===================================================================== */ *, *::before, *::after { box-sizing: border-box; } :where(body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) { margin: 0; } :where(img, picture, video, canvas, svg) { display: block; max-width: 100%; } :where(button, input, select, textarea) { font: inherit; color: inherit; } /* Atrybut `hidden` z arkusza przeglądarki ma zerową wagę i przegrywa z każdą regułą klasową ustawiającą `display`. Bez tego okna modalne są widoczne od wejścia na stronę. */ [hidden] { display: none !important; } /* ===================================================================== 4. TYPOGRAFIA Wartości wprost z projektu. Nagłówki nie mają własnego kroju - dziedziczą po `body`. ===================================================================== */ body { font-family: var(--bp-pismo); font-size: var(--bp-rozmiar-tekstu-tel); line-height: 1.5; font-weight: 400; color: var(--bp-tekst); background: var(--bp-biel); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { color: var(--bp-czern); font-family: var(--bp-pismo-naglowki); line-height: 1.15; } h1 { font-size: var(--bp-h1-tel); font-weight: 400; } h2 { font-size: var(--bp-h2-tel); font-weight: 700; } h3 { font-size: var(--bp-h3); font-weight: 700; } h4 { font-size: var(--bp-h4); font-weight: 700; } h5 { font-size: var(--bp-h5); font-weight: 700; } h6 { font-size: var(--bp-h6); font-weight: 700; } @media (min-width: 60em) { body { font-size: var(--bp-rozmiar-tekstu); } h1 { font-size: var(--bp-h1); } h2 { font-size: var(--bp-h2); } } p + p { margin-top: 1.6rem; } a { color: var(--bp-akcent); text-decoration: none; } a:hover { color: var(--bp-akcent-ciemny); } /* Obwódki skupienia NIE KASUJEMY - bez niej osoba chodząca klawiaturą nie wie, gdzie jest. Przemalowujemy ją na kolor marki. */ :focus-visible { outline: 2px solid var(--bp-akcent); outline-offset: 2px; } /* ===================================================================== 5. UKŁAD ===================================================================== */ /* ===================================================================== KONTENER TRESCI - REGULY BEZ KOMENTARZY W SRODKU. CELOWO. Minifikator Autoptimize DWA RAZY (23.09.2026) zepsul ten fragment: rano na funkcji rozbitej na linie, po poludniu na komentarzach wewnatrz blokow z funkcjami `max` i `min`. W ścisnietym pliku znikala wysciolka `.bp-tresc`, znikal selektor `.bp-tresc--waska`, a jego waska szerokosc (75rem + oddech) wskakiwala do glownego kontenera - kazda strona zwezala sie do 830 px. Dlatego: komentarze TYLKO NAD regula, w bloku same deklaracje, kazda funkcja w jednej linii. Po kazdej zmianie tutaj sprawdzamy ścisniety plik na zywej stronie, nie tylko ten. Co te reguly robia: - `.bp-tresc`: jeden kontener dla naglowka, sekcji i stopki. Szerokosc wedlug progow z rozdzialu 1, na telefonie tresc nigdy nie dotyka krawedzi (zasada wlasciciela z 8 sierpnia 2026) - `max` daje twarda podloge 10px niezalezna od podstawy `rem`. - `.bp-tresc--waska`: dokument pisany ciagiem (regulamin, polityka). 75rem to szerokosc KOLUMNY TEKSTU, oddech doliczany osobno - bez tego kolumna miala 51rem i wygladala na scisnieta (23.09.2026). `width: 100%` + `max-width` zamiast `min`, bo to zapis, ktory rozumie kazdy minifikator. ===================================================================== */ .bp-tresc { width: 100%; max-width: var(--bp-tresc); margin-inline: auto; padding-inline: max(var(--bp-oddech), 10px); } .bp-tresc--waska { max-width: calc(var(--bp-tresc-waska) + 2 * max(var(--bp-oddech), 10px)); } /* ===================================================================== RYTM PIONOWY DOKUMENTU PISANEGO CIĄGIEM Arkusz zeruje marginesy nagłówków i akapitów, bo w sekcjach odstępy ustala sam układ sekcji. Podstrona pisana ciągiem - regulamin, polityka, dłuższy tekst o firmie - nie ma takiego układu i przez to szła jednym zbitym blokiem: nagłówek paragrafu przyklejony do akapitu nad nim, listy bez odstępu. Wyglądało to na zepsutą stronę. Odstępy stoją WYŁĄCZNIE wewnątrz `.bp-tresc--waska`, czyli tam, gdzie treść jest dokumentem. Sekcje budowane szablonami nadal rządzą się same i nic im nie wchodzi w drogę. Nagłówek na SAMEJ GÓRZE nie dostaje górnego marginesu - inaczej pierwszy paragraf odskakiwałby od tytułu strony. ===================================================================== */ .bp-tresc--waska > h1 { margin-block-end: 3rem; } .bp-tresc--waska > h2 { margin-block: 4.4rem 1.2rem; } .bp-tresc--waska > h3 { margin-block: 3rem 0.8rem; } .bp-tresc--waska > p, .bp-tresc--waska > ul, .bp-tresc--waska > ol { margin-block: 0 1.6rem; } .bp-tresc--waska > ul, .bp-tresc--waska > ol { padding-inline-start: 2.4rem; } .bp-tresc--waska > ul > li, .bp-tresc--waska > ol > li { margin-block-end: 0.6rem; } .bp-tresc--waska > :first-child { margin-block-start: 0; } .bp-tresc--waska > :last-child { margin-block-end: 0; } /* TA SAMA PODŁOGA DLA WSZYSTKIEGO, CO NIE UŻYWA `.bp-tresc`. Sekcje pisane później, bloki wstawione w edytorze i treść wtyczek nie zawsze przechodzą przez nasz pojemnik. Żeby zasada obowiązywała naprawdę na całej stronie, a nie tylko tam, gdzie o niej pamiętaliśmy, dokładamy odstęp na samym pojemniku treści. `:where()` zeruje wagę, więc każda konkretna reguła sekcji nadal wygrywa i może dać własną wyściółkę. To jest podłoga, nie sufit. */ @media (max-width: 47.99em) { :where(.entry-content, .bp-strona__tresc) > * { padding-inline: max(var(--bp-oddech), 10px); } /* Elementy, które MAJĄ dotykać krawędzi: pasy tła, zdjęcia na całą szerokość, karuzele. Wyłączamy im podłogę, bo u nich brak marginesu jest zamiarem, a nie usterką. */ :where(.entry-content, .bp-strona__tresc) > :where(.bp-sekcja, .alignfull, .bp-pelna-szerokosc) { padding-inline: 0; } } .bp-sekcja { padding-block: 8rem; } .bp-sekcja--jasna { background: var(--bp-tlo-jasne); } .bp-sekcja--ciemna { background: var(--bp-czern); color: var(--bp-biel); } .bp-sekcja--ciemna h1, .bp-sekcja--ciemna h2, .bp-sekcja--ciemna h3 { color: var(--bp-biel); } /* Do czytników ekranu, poza ekranem - nie `display: none`, bo tego czytniki nie odczytują. */ .bp-tylko-dla-czytnika { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ===================================================================== 6. PRZYCISK ===================================================================== */ .bp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.8rem; padding: var(--bp-btn-wysciolka); border: 1px solid transparent; border-radius: var(--bp-btn-promien); background: var(--bp-btn-tlo); background-image: var(--bp-btn-gradient); color: var(--bp-btn-napis); font-family: var(--bp-btn-pismo); font-size: var(--bp-btn-rozmiar, 1.7rem); font-weight: var(--bp-btn-grubosc); line-height: 1.15; letter-spacing: var(--bp-btn-odstep-liter); /* Napis na przycisku zostaje taki, jak go wpisano (albo WIELKIE, gdy tak ustawiono w „Dostosuj -> Przyciski"). `capitalize` zamieniało „Zobacz oferty pracy" na „Zobacz Oferty Pracy". */ text-transform: var(--bp-btn-litery); cursor: pointer; transition: background-color .15s ease, color .15s ease; } @media (min-width: 60em) { :root { --bp-btn-rozmiar-domyslny: 1.6rem; } .bp-btn { font-size: var(--bp-btn-rozmiar, 1.6rem); } } /* Po najechaniu tlo jednolite `--bp-btn-tlo-hover` - takze przy gradiencie. */ .bp-btn:hover, .bp-btn:focus { background: var(--bp-btn-tlo-hover); color: var(--bp-btn-napis-hover); } /* Wariant konturowy. Stoi PO regule podstawowej celowo - przy równej wadze wygrywa reguła późniejsza. */ .bp-btn--kontur { background: transparent; border-color: var(--bp-btn-kontur-kreska); color: var(--bp-btn-kontur-napis); } .bp-btn--kontur:hover, .bp-btn--kontur:focus { background: var(--bp-btn-kontur-tlo-hover); color: var(--bp-btn-kontur-napis-hover); } /* RODZAJE PRZYCISKOW (od 1.22.0) - ten sam ksztalt, inne kolory. Stoja PO wariancie podstawowym: przy rownej wadze wygrywa pozniejsza. */ .bp-btn--drugi { background: var(--bp-btn-drugi-tlo); background-image: var(--bp-btn-drugi-gradient); color: var(--bp-btn-drugi-napis); } .bp-btn--drugi:hover, .bp-btn--drugi:focus { background: var(--bp-btn-drugi-tlo-hover); color: var(--bp-btn-drugi-napis-hover); } .bp-btn--pomocniczy { background: var(--bp-btn-pomoc-tlo); color: var(--bp-btn-pomoc-napis); } .bp-btn--pomocniczy:hover, .bp-btn--pomocniczy:focus { background: var(--bp-btn-pomoc-tlo-hover); color: var(--bp-btn-pomoc-napis-hover); } .bp-btn--jasny { background: var(--bp-btn-jasny-tlo); color: var(--bp-btn-jasny-napis); } .bp-btn--jasny:hover, .bp-btn--jasny:focus { background: var(--bp-btn-jasny-tlo-hover); color: var(--bp-btn-jasny-napis-hover); } /* Tekstowy: bez tla i obwodki, bez wyscielki - napis ze strzalka. Kroj, grubosc i wielkosc pisma te same co u pozostalych. */ .bp-btn--tekstowy, .bp-btn--tekstowy:hover, .bp-btn--tekstowy:focus { padding: 0; border-color: transparent; background: none; } .bp-btn--tekstowy { color: var(--bp-btn-tekst-napis); } .bp-btn--tekstowy:hover, .bp-btn--tekstowy:focus { color: var(--bp-btn-tekst-napis-hover); } .bp-btn--tekstowy::after { content: "\2192"; transition: transform .15s ease; } .bp-btn--tekstowy:hover::after { transform: translateX(.4rem); } /* Wszystko klikalne ma tę samą łapkę. Żadnych kursorów specjalnych. */ a, button, [role="button"], summary { cursor: pointer; } /* ===================================================================== IPHONE, TRYB CIEMNY I LINKI TELEFONICZNE Trzy osobne rzeczy, ktore latwo pomylic w jedna, bo objaw jest ten sam: „na iPhonie kolory sa inne niz wszedzie”. 1. SAFARI SAM ROBI LINKI Z NUMEROW TELEFONU Wykrywa ciag cyfr wygladajacy na numer i zamienia go w odnosnik, malujac systemowym niebieskim. Dotyczy takze numerow, ktore linkami nie mialy byc - NIP-u w stopce, numeru domu w adresie. Wylacza to `` w naglowku strony. Regula nizej leczy te numery, ktore linkami SA i maja zostac. 2. PRZEGLADARKA SAMA PRZEMALOWUJE STRONE W TRYBIE CIEMNYM iOS i Chrome potrafia odwrocic kolory strony, ktora nie powiedziala, w jakich schematach dziala. `color-scheme: light` mowi wprost: ta strona jest jasna, nie ruszaj jej. To nie blokuje trybu ciemnego systemu - blokuje ZGADYWANIE. 3. POLA FORMULARZY DOSTAJA WLASNE KOLORY OD SYSTEMU Na iOS w trybie ciemnym potrafi z tego wyjsc bialy tekst na bialym tle. Dlatego kolor i tlo pol wpisujemy jawnie. ===================================================================== */ :root { color-scheme: light; } /* Numery telefonu i adresy e-mail dziedzicza kolor po otoczeniu. Bez tego Safari maluje je swoim niebieskim, innym niz kolor marki. */ a[href^="tel"], a[href^="tel"]:visited, a[href^="mailto"], a[href^="mailto"]:visited { color: inherit; text-decoration: none; } /* Przycisk prowadzący do telefonu albo poczty zostaje przyciskiem. Reguła wyżej ma wagę `a[href]` i wygrywała z `.bp-btn` - przycisk „Zadzwoń" brał kolor otoczenia zamiast napisu przycisku. Zerowanie wagi reguły wyżej (`:where`) oddałoby numery w tekście zwykłemu kolorowi odnośnika, więc wyjątek dotyczy tylko przycisków. */ a.bp-btn[href^="tel"], a.bp-btn[href^="mailto"] { color: var(--bp-btn-napis); } a.bp-btn--kontur[href^="tel"], a.bp-btn--kontur[href^="mailto"] { color: var(--bp-btn-kontur-napis); } a.bp-btn[href^="tel"]:hover, a.bp-btn[href^="tel"]:focus, a.bp-btn[href^="mailto"]:hover, a.bp-btn[href^="mailto"]:focus { color: var(--bp-btn-napis-hover); } a.bp-btn--kontur[href^="tel"]:hover, a.bp-btn--kontur[href^="tel"]:focus, a.bp-btn--kontur[href^="mailto"]:hover, a.bp-btn--kontur[href^="mailto"]:focus { color: var(--bp-btn-kontur-napis-hover); } a.bp-btn--drugi[href^="tel"], a.bp-btn--drugi[href^="mailto"] { color: var(--bp-btn-drugi-napis); } a.bp-btn--drugi[href^="tel"]:hover, a.bp-btn--drugi[href^="mailto"]:hover { color: var(--bp-btn-drugi-napis-hover); } a.bp-btn--pomocniczy[href^="tel"], a.bp-btn--pomocniczy[href^="mailto"] { color: var(--bp-btn-pomoc-napis); } a.bp-btn--pomocniczy[href^="tel"]:hover, a.bp-btn--pomocniczy[href^="mailto"]:hover { color: var(--bp-btn-pomoc-napis-hover); } a.bp-btn--jasny[href^="tel"], a.bp-btn--jasny[href^="mailto"] { color: var(--bp-btn-jasny-napis); } a.bp-btn--jasny[href^="tel"]:hover, a.bp-btn--jasny[href^="mailto"]:hover { color: var(--bp-btn-jasny-napis-hover); } a.bp-btn--tekstowy[href^="tel"], a.bp-btn--tekstowy[href^="mailto"] { color: var(--bp-btn-tekst-napis); } a.bp-btn--tekstowy[href^="tel"]:hover, a.bp-btn--tekstowy[href^="mailto"]:hover { color: var(--bp-btn-tekst-napis-hover); } /* Pola formularzy: kolory jawnie, zeby system ich nie podmienil. */ input, textarea, select { color: var(--bp-tekst); background-color: var(--bp-biel); -webkit-text-fill-color: currentColor; } /* Zamiast `opacity`, ktore na iOS przygasza tez tlo pola. */ ::placeholder { color: var(--bp-tekst-slabszy); opacity: 1; } /* Tabela w treści podstrony (np. zestawienie ciasteczek w polityce) bywa szersza niż ekran telefonu. Przewija się sama, strona nie. */ @media (max-width: 40em) { .bp-tresc table { display: block; max-width: 100%; overflow-x: auto; } }