/* ========================================================================== custom.css — Kancelaria Notarialna Krystyna Wisz -------------------------------------------------------------------------- Jedyne miejsce na własne style w tym projekcie. ZASADY (pełny opis w CLAUDE.md §4): 1. Ten arkusz jest podpięty JAKO OSTATNI, po krystynawisz.webflow.css. Nadpisujemy przez kolejność i normalną specyficzność, nie przez !important. Jeśli !important jest nieuniknione — z komentarzem dlaczego. 2. Nie ruszamy css/normalize.css ani js/webflow.js. 3. Nie ruszamy klas Webflow (w-nav, w-layout-grid, w-tabs, w-dropdown...). Sterują nimi webflow.js i webflow.css. 4. Nie duplikujemy reguł Webflow. Najpierw sprawdzamy, czy da się to zrobić przez nadpisanie zmiennej CSS w :root. 5. Własne klasy z prefiksem kw- (kw-hero, kw-faq, kw-doc-list), żeby było widać, co jest nasze. Stan: Etap 0 — plik utworzony i podpięty, celowo bez aktywnych reguł. Żadna zmiana wizualna nie należy do Etapu 0. ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKENY — nadpisania zmiennych z :root -------------------------------------------------------------------------- */ /* --- Etap 5: kolor akcentowy --------------------------------------------- Morska zieleń #02807e odchodzi z dwóch powodów. Po pierwsze czyta się medycznie, nie notarialnie. Po drugie — i to jest twardszy argument — miała na granatowej sekcji usług kontrast 2,36:1 przy wymaganych 3:1, czyli już wcześniej nie przechodziła. Żaden POJEDYNCZY kolor nie działa w obu kontekstach tej strony: akcent musi być czytelny na bieli (taglines, nagłówki pomocnicze) i na granacie #1c3d5a (sekcja usług, nagłówki podstron, focus). Stąd para. Barwy nie są wymyślone — zmierzone na zdjęciach, które już są w serwisie: lak na spadek.webp to #5d261a, mosiądz na pioro-ksiegi… to #694933. Bordo = pieczęć lakowa, mosiądz = pieczęć i tabliczka. Ikonografia zawodu. Kontrasty na wszystkich sześciu tłach występujących w serwisie: biel 9,21 | platyna 7,25 | gainsboro 6,71 | jasnoszare 8,45 granat 5,00 | ciemnoszare 4,98 */ :root { --kw-accent: #7b2d3b; --kw-accent-on-dark: #c9a961; --kw-rule: rgba(28, 61, 90, 0.16); --kw-rule-on-dark: rgba(255, 255, 255, 0.16); --kw-radius: 2px; } /* Akcent na jasnych tłach. Nie nadpisujemy --base-color-brand--accent globalnie, bo ta zmienna obsługuje też hovery przycisków — celujemy punktowo, żeby wiedzieć dokładnie, co zmieniamy. */ .text-style-tagline, .heading-style-h5, .text-color-accent { color: var(--kw-accent); } /* Akcent na ciemnych tłach. Selektory odpowiadają sekcjom, które faktycznie mają ciemne tło: nagłówek strony głównej, nagłówki podstron (granat), sekcja usług (granat) i stopka (#3b3b3b). */ .section_header103 .text-style-tagline, .section_header64 .text-style-tagline, .services .text-style-tagline, .footer3_component .text-style-tagline, .section_header103 .text-color-accent, .services .text-color-accent { color: var(--kw-accent-on-dark); } /* Hovery przycisków — z morskiej zieleni na bordo. Biel na bordo daje 9,21:1. */ .button:hover, .button.is-alternate:hover { border-color: var(--kw-accent); background-color: var(--kw-accent); } .button.is-link.is-icon:hover { color: var(--kw-accent); } /* Przycisk „Umów Wizytę". Stał na --base-color-brand--h2 (#6c7a89) z białym tekstem, co daje 4,39:1 — poniżej progu AA dla tego rozmiaru. Mosiądz z granatowym tekstem daje 5,00:1, a przy okazji odcina się od ciemnego paska nawigacji, więc kształt przycisku też jest widoczny. KOREKTA do AUDYT.md §5.1: napisałem tam, że #6c7a89 jest kolorem martwym. To była pomyłka — nieużywana jest KLASA text-color-h2, ale ZMIENNA --base-color-brand--h2 napędza właśnie ten przycisk. */ .button.is-navbar2-button { border-color: var(--kw-accent-on-dark); background-color: var(--kw-accent-on-dark); color: var(--base-color-brand--cta); } .button.is-navbar2-button:hover { border-color: #d4b876; background-color: #d4b876; color: var(--base-color-brand--cta); } /* -------------------------------------------------------------------------- 2. TYPOGRAFIA Zaplanowane (AUDYT.md §7 pkt 1, 2): skala H1, letter-spacing, baza mobilna 13px -> 16px z clamp() na nagłówkach. -------------------------------------------------------------------------- */ /* --- Etap 5: skala typograficzna ---------------------------------------- H1 miał 68,8 px przy tekście 18 px — stosunek 3,8:1, czyli krzyk zamiast hierarchii. Merriweather Bold w tej wielkości robi się ciężki, a przy zerowym trackingu litery się kleją. 3,4rem (54 px) z ujemnym trackingiem czyta się spokojniej i drożej. Zachowana drabinka responsywna Webflow, przeskalowana proporcjonalnie. */ .heading-style-h1 { font-size: 3.4rem; letter-spacing: -0.02em; line-height: 1.14; } h2, .heading-style-h2 { font-size: 2.125rem; letter-spacing: -0.015em; line-height: 1.22; } @media screen and (max-width: 991px) { .heading-style-h1 { font-size: 2.8rem; } h2, .heading-style-h2 { font-size: 1.9rem; } } @media screen and (max-width: 767px) { .heading-style-h1 { font-size: 2.3rem; } h2, .heading-style-h2 { font-size: 1.7rem; } } @media screen and (max-width: 479px) { .heading-style-h1 { font-size: 2rem; } h2, .heading-style-h2 { font-size: 1.55rem; } } /* --- Etap 5: miara wiersza ---------------------------------------------- Akapit wprowadzający miał 82 znaki w wierszu przy optimum 60–75 — oko gubi początek następnej linii. Ograniczenie do 36em daje ok. 68 znaków. Akapity w kolumnach siatki mają już 67 znaków, więc ta reguła ich nie dotknie — 36em to więcej niż ich obecna szerokość. */ p.text-size-medium, p.text-size-large { max-width: 36em; } .text-align-center p.text-size-medium, .align-center p.text-size-medium { margin-left: auto; margin-right: auto; } /* --- Etap 5: wersaliki -------------------------------------------------- Tagline jest wpisany wersalikami, ale miał tracking 0. Wersaliki bez rozstrzelenia to klasyczny błąd składu — litery zlewają się w blok. Mniejszy stopień plus dodatnie światło międzyliterowe. */ .text-style-tagline { font-size: 0.8125rem; letter-spacing: 0.08em; } /* --- Etap 5: podkreślenia ---------------------------------------------- Domyślne text-underline-offset: auto kładzie kreskę na linii bazowej, przez co tnie ogonki w ą, ę, j, y. Na polskim tekście widać to wszędzie. Odsunięcie i cieńsza kreska to najtańszy sygnał staranności w typografii. */ a, a[class] { text-underline-offset: 0.2em; text-decoration-thickness: 1px; } /* Uwaga na specyficzność: .text-style-link (krystynawisz.webflow.css:271) ustawia skrót `text-decoration`, a ten zeruje thickness do auto. Sam selektor `a` (0,0,1) przegrywa z klasą (0,1,0), dlatego dokładamy `a[class]` — 0,1,1, czyli wygrywa z każdą pojedynczą klasą, a nie wymaga wypisywania wszystkich nazw linków z Webflow. */ /* --- Etap 2: semantyka nagłówków --------------------------------------- Kilka elementów wyglądało jak nagłówki, ale nimi nie było (etykiety kontaktowe, zdanie wprowadzające, cytat). Zmieniliśmy im znaczniki. Reguły poniżej odtwarzają poprzedni wygląd co do piksela, żeby poprawka semantyki nie ruszyła układu. Uwaga: klasy .heading-style-* z Webflow NIE ustawiają font-family — krój wnosił element (h1..h6). Po przeniesieniu klasy na
lub

trzeba go podać jawnie. */ .heading-style-h1, .heading-style-h2, .heading-style-h5 { font-family: Merriweather, serif; } /* Etykiety "Email" / "Telefon" / "Adres kancelarii" w blokach kontaktowych. Było

(11 podstron x 3), jest
— to podpisy pól, nie nagłówki. */ .kw-contact-label { font-family: Merriweather, serif; font-size: 1.25rem; font-weight: 700; line-height: 1.4; } /* Kroki "Jak przygotować się do spotkania" na /kontakt/. Było

bez klasy (2rem), jest

— H2 -> H4 to był przeskok o poziom. */ .kw-heading-h4 { font-size: 2rem; font-weight: 700; line-height: 1.3; } /* Podnagłówki wewnątrz sekcji ("Kiedy potrzebujesz poświadczenia?", "Kiedy warto rozważyć umowę majątkową?"). Były akapitami z , są

— element wnosi wagę 700, klasa przywraca krój tekstowy. */ .kw-subheading { font-family: Open Sans, sans-serif; } /* Sentencja łacińska na stronie głównej. Było

z całym cytatem w środku, jest
. Kasujemy chrom blockquote z webflow.css (lewa kreska, padding, Open Sans 1.25rem) i przywracamy typografię sprzed zmiany. */ blockquote.kw-quote { border-left: 0; margin: 0; padding: 0; font-family: Merriweather, serif; font-weight: 700; line-height: 1.2; } /* -------------------------------------------------------------------------- 3. UKŁAD I ODSTĘPY Zaplanowane (AUDYT.md §7 pkt 3): rytm pionowy, powietrze między sekcjami. -------------------------------------------------------------------------- */ /* --- Etap 3: sekcja kontaktowa bez mapy --------------------------------- Mapa Google wisiała na 10 z 11 podstron. Zostawiliśmy ją tam, gdzie "gdzie jesteście?" to realne pytanie — na stronie głównej i na /kontakt/. Na pozostałych 9 zniknęła razem z kilkuset KB obcych skryptów i kafelków. .contact16_component to siatka 1fr / .75fr — bez mapy druga kolumna zostałaby pustą dziurą, więc na tych stronach schodzimy do jednej. */ .contact16_component.kw-no-map { grid-template-columns: 1fr; } /* -------------------------------------------------------------------------- 4. KOMPONENTY Zaplanowane (AUDYT.md §7 pkt 4, 5, 6): hero (warstwa treści nad przewijanymi zdjęciami), overlay hero, karty usług. -------------------------------------------------------------------------- */ /* --- Etap 5: rytm pionowy ----------------------------------------------- KOREKTA. Najpierw podniosłem odstęp sekcji ze 112 na 144 px w imię „więcej powietrza". Pomiar pokazał, że to był błąd: przy czterech sekcjach samo odstępowanie między pasami dawało 1152 px, czyli 1,3 ekranu scrolla. Wrażenie powietrza bierze się z rytmu WEWNĄTRZ treści — odstępów między pozycjami list, interlinii, miary wiersza — a nie z rozpychania pasów. Powrót do 112 px, bo tamto tylko wydłużało stronę. Własna drabinka responsywna — bez niej reguła bazowa nadpisałaby wartości mobilne Webflow, bo custom.css ładuje się później, a media query nie podnosi specyficzności. */ .padding-section-large { padding-top: 7rem; padding-bottom: 7rem; } @media screen and (max-width: 991px) { .padding-section-large { padding-top: 5.5rem; padding-bottom: 5.5rem; } } @media screen and (max-width: 767px) { .padding-section-large { padding-top: 4rem; padding-bottom: 4rem; } } @media screen and (max-width: 479px) { .padding-section-large { padding-top: 3rem; padding-bottom: 3rem; } } /* --- Etap 3: karty usług na bardzo wąskich ekranach ---------------------- Błąd z oryginalnego eksportu Webflow, NIE regresja po zmianie bazy fontu: krystynawisz.webflow.css:3884 przy <=479px ustawia .layout396_card na sztywne `width: 320px`. Kontener ma padding 5% (procenty, nie rem), więc przy oknie 320 px zostaje 288 px miejsca — karta wystaje o 32 px i strona główna dostaje poziome przewijanie. Widać to na każdym ekranie węższym niż ~352 px. Wartość jest w pikselach, więc baza 13 px czy 16 px nic tu nie zmieniała — problem istniał od początku, tylko testowaliśmy 375 px. Do kompletu `justify-items: stretch` (linia 3878 ustawia center, przez co karty w jednokolumnowej siatce i tak nie wypełniały kolumny). */ @media screen and (max-width: 479px) { .layout396_row { justify-items: stretch; } .layout396_card, .services-link { width: 100%; min-width: 0; } } /* --- Etap 3: responsywne tło sekcji usług ------------------------------- krystynawisz.webflow.css:1863 ładował jeden plik ~600 KB jako background sekcji .services — bez srcset, bez lazy, ten sam na telefonie i na 4K. Po konwersji do WebP to 340 KB, ale telefon dalej nie potrzebuje 2048 px. Poniżej trzy warianty. Reguła z webflow.css zostaje nietknięta — wygrywamy kolejnością, więc przeglądarka pobiera tylko wariant, który wybierze tutaj. Gradient musi być powtórzony, bo background-image to jedna właściwość: podanie samego url() skasowałoby przyciemnienie i tekst przestałby być czytelny na jasnych fragmentach zdjęcia. */ .services { background-image: linear-gradient(#000000a6, #000000a6), url('../images/tarnobrzeg-panorama-tlo-sekcji-800.webp'); } @media (min-width: 768px) { .services { background-image: linear-gradient(#000000a6, #000000a6), url('../images/tarnobrzeg-panorama-tlo-sekcji-1400.webp'); } } @media (min-width: 1400px) { .services { background-image: linear-gradient(#000000a6, #000000a6), url('../images/tarnobrzeg-panorama-tlo-sekcji.webp'); } } /* --- Etap 3: nagłówek /kontakt/ bez zdjęcia (rozwiązanie tymczasowe) ------- Poprzedni obraz był zrzutem ekranu z Google Street View — usunięty 2026-09-06 (AUDYT.md §4.6a). Klient robi własne zdjęcie budynku. Do czasu jego wstawienia nagłówek dostaje jednolite tło w kolorze marki, żeby nie był szarą plamą: dwie nakładki (gradient na wrapperze i .image-overlay-layer) leżały dotąd na zdjęciu, a bez niego prześwitywałby przez nie biały . Po wstawieniu zdjęcia usunąć klasę kw-hero-placeholder z
w kontakt/index.html — wtedy ta reguła przestaje cokolwiek robić. */ .kw-hero-placeholder .header65_background-image-wrapper { background-color: var(--base-color-brand--cta); } /* --- Etap 5b: gęstość i rytm list --------------------------------------- Diagnoza z pomiaru na /dokumenty/: 5838 px wysokości (6,5 ekranu), 26 pozycji list po 119–191 znaków każda, odstęp między pozycjami 4 px i pięć sekcji na IDENTYCZNYM tle. Treść była dobra, ale podana jako jednolita płachta — czytało się od deski do deski, zamiast skanować. .layout72_list i .layout72_item nie miały w Webflow żadnych własnych stylów, więc odstęp brał się z domyślnych marginesów. Stąd 4 px. Trzy zmiany naraz: powietrze między pozycjami, włos jako granica, i wyróżnik wyniesiony nad treść zamiast wtrętu w zdaniu. */ .layout72_list { display: grid; gap: 0; } .layout72_item { padding-top: 1.375rem; padding-bottom: 1.375rem; border-top: 1px solid var(--kw-rule); } .layout72_item:first-child { border-top: 0; padding-top: 0; } .layout72_item:last-child { padding-bottom: 0; } /* Etykieta pozycji: własna linia, kolor akcentowy, mniejszy stopień. Daje oku punkt zaczepienia — bez tego 26 akapitów wygląda tak samo. Myślnik po tytule usunięty z HTML, bo w układzie blokowym dyndał. */ .layout72_item p > strong:first-child, .layout18_item-text-wrapper p > strong:first-child { display: block; margin-bottom: 0.3rem; color: var(--kw-accent); font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.015em; } /* Na ciemnym tle etykieta musi być mosiężna, nie bordowa. */ .services .layout72_item p > strong:first-child, .section_header103 .layout72_item p > strong:first-child { color: var(--kw-accent-on-dark); } /* Listy w sekcjach layout18 miały 1rem odstępu — podciągamy do tego samego rytmu, żeby obie rodziny sekcji czytały się tak samo. */ .layout18_item-list { grid-row-gap: 1.75rem; } /* Nagłówek sekcji zostaje w polu widzenia podczas skanowania listy. .layout72_content ma align-items: start, więc sticky działa bez zmian w siatce. Tylko na desktopie — poniżej 992 px kolumny układają się pionowo i przyklejanie nie miałoby sensu. */ @media screen and (min-width: 992px) { .layout72_content-left { position: sticky; top: 3rem; } } /* --- Etap 5b: układ szeroki dla długich list ---------------------------- Problem nie kończył się na gęstości. Każda sekcja miała IDENTYCZNY kształt: H2 po lewej, pionowa lista po prawej — na /dokumenty/ pięć razy pod rząd. Monotonia plus scroll rosnący liniowo z liczbą pozycji. Sekcje z pięcioma lub więcej pozycjami dostają inny układ: nagłówek nad listą, lista w dwóch kolumnach na pełnej szerokości kontenera. Efekt jest podwójny — połowa wysokości i przełamany rytm, bo nie wszystkie sekcje wyglądają już tak samo. Krótsze zostają przy układzie H2 | lista. Kolumny mają po ok. 600 px, czyli miara wiersza zostaje w normie — wciśnięcie dwóch kolumn w istniejącą siatkę 1fr 1fr dałoby po 270 px, czyli za wąsko. */ .kw-wide .layout72_content { grid-template-columns: 1fr; grid-row-gap: 2.5rem; } .kw-wide .layout72_list { grid-template-columns: 1fr 1fr; grid-column-gap: 4rem; } /* W dwóch kolumnach pierwsza pozycja KAŻDEJ kolumny zaczyna blok, więc górny włos znika z dwóch pierwszych, nie z jednej. */ .kw-wide .layout72_item:nth-child(-n + 2) { border-top: 0; padding-top: 0; } /* W układzie szerokim nagłówek stoi nad listą, więc nie ma czego przyklejać. */ @media screen and (min-width: 992px) { .kw-wide .layout72_content-left { position: static; } } @media screen and (max-width: 767px) { .kw-wide .layout72_list { grid-template-columns: 1fr; } .kw-wide .layout72_item:nth-child(2) { border-top: 1px solid var(--kw-rule); padding-top: 1.375rem; } } /* --- Etap 5b: naprzemienne pasy ----------------------------------------- Wszystkie .section_layout72 miały platynowe tło. Na /dokumenty/ dawało to pięć identycznych pasów pod rząd. Klasy przypisane w HTML w kolejności występowania, żeby alternacja działała niezależnie od tego, czy strona zaczyna się sekcją layout18 (biała) czy layout72 (platynowa). */ .kw-band-white { background-color: var(--background-color--background-primary); } .kw-band-light { background-color: var(--base-color-brand--h1); } /* --- Etap 5: karty usług ------------------------------------------------ Granatowa płachta 76% z zaokrągleniem 6 px i sztywną wysokością 275 px była najbardziej „darmowy szablon" elementem na stronie. Zamiast wypełnienia — włos, promień 2 px i wysokość z treści. Cała robota zostaje na typografii i odstępach, zgodnie z kierunkiem „dokument, nie broszura". Sztywna wysokość trzymała siatkę wyrównaną, więc zastępujemy ją min-height — karty dalej są równe, ale mogą urosnąć, jeśli tytuł złamie się na dwie linie. */ .services-link { display: block; height: 100%; } .layout396_card, .layout396_card.shadow-medium { background-color: transparent; border: 1px solid var(--kw-rule-on-dark); border-radius: var(--kw-radius); height: 100%; min-height: 15rem; transition: background-color 200ms ease, border-color 200ms ease; } .services-link:hover .layout396_card { background-color: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.28); } /* Strzałka przesuwa się przy najechaniu — jedyny ruch, na jaki pozwalamy. */ .services-link .icon-embed-xxsmall { transition: transform 200ms ease; } .services-link:hover .icon-embed-xxsmall { transform: translateX(4px); } /* Karty na rozdzielaczu — ten sam język: włos zamiast wyraźnej ramki, promień 2 px zamiast 8 px. */ .layout299_item { border-color: var(--kw-rule); border-radius: var(--kw-radius); transition: border-color 200ms ease; } .layout299_item:hover { border-color: var(--kw-accent); } /* Promienie ujednolicone. 6 px na przyciskach czytało się jak interfejs aplikacji; 2 px to bliżej dokumentu. */ .button, .button.is-alternate { border-radius: var(--kw-radius); } /* --- Etap 5: nagłówek strony głównej ------------------------------------ Płaska płachta 65% czerni zabijała zdjęcie i nie dawała głębi. Gradient od 35% u góry do 85% u dołu: fotografia odzyskuje plan, a tekst i tak siedzi na stabilnym, ciemnym tle. */ .header103_tab-overlay { background-color: transparent; background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.62) 45%, rgba(0, 0, 0, 0.85) 100% ); } .header103_tab-overlay.less-overlay { background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.52) 45%, rgba(0, 0, 0, 0.78) 100% ); } /* --- Etap 5: hero jako dwie warstwy ------------------------------------- Było: cztery panele karuzeli, każdy z WŁASNĄ kopią nagłówka, podtytułu i pary przycisków. Czyli 4 x H1 o identycznej treści, 8 zdublowanych linków CTA i treść przeskakująca przy każdej zmianie slajdu. Jest: panele zawierają wyłącznie zdjęcia i dalej przenikają, a treść stoi nieruchomo w jednej warstwie nad nimi. Klient zachowuje zdjęcia Tarnobrzega, o które prosił, a z dokumentu znika duplikacja. Wysokość niesie .header103_tabs (min-height: 100vh), nie treść, więc opróżnienie paneli niczego nie zwaliło. Panele są position: absolute, ich zawartość nie wpływała na układ. pointer-events: none na warstwie sprawia, że kliknięcia przechodzą do kropek karuzeli pod spodem; przywracamy je tylko na samych przyciskach. Uwaga: reguły z osadzonego bloku header103_tab-change celujące w `.header103_tab-pane:not(.w--current) .header103_content-wrapper` nie mają już czego dopasować. To zamierzone — to one odpowiadały za przeskakiwanie treści. Zdjęcia dalej przenikają przez opacity panelu. */ .header103_component { position: relative; } .kw-hero-content { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; pointer-events: none; } .kw-hero-content > .padding-global { width: 100%; } .kw-hero-content .button-group, .kw-hero-content a { pointer-events: auto; } /* Podtytuł hero miał 24 px czystej bieli tuż pod nagłówkiem — dwa bardzo kontrastowe elementy walczyły o uwagę. Mniejszy stopień i platyna zamiast bieli porządkują hierarchię; kontrast na ciemnym zostaje wysoki. */ .header103_content-wrapper .text-size-xlarge { font-size: 1.1875rem; color: var(--base-color-brand--h1); letter-spacing: 0.01em; } /* -------------------------------------------------------------------------- 5. STANY INTERAKTYWNE I DOSTĘPNOŚĆ -------------------------------------------------------------------------- */ /* --- Widoczny focus ----------------------------------------------------- webflow.css kasuje outline w ośmiu miejscach (linie 364, 1018, 1049, 1110, 1140, 1182, 1680, 1765), m.in. na przycisku menu mobilnego, rozwijanej liście usług i kropkach karuzeli — czyli na całej głównej nawigacji. Tego pliku nie ruszamy, więc przywracamy focus stąd. :focus-visible, nie :focus — obrys ma się pokazywać przy nawigacji klawiaturą, a nie po kliknięciu myszą. */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible, .w-nav-button:focus-visible, .w-dropdown-toggle:focus-visible, .w-tab-link:focus-visible, .w-slider-dot:focus-visible { outline: 2px solid var(--kw-accent); outline-offset: 3px; border-radius: 2px; } /* Na ciemnym tle morska zieleń ginie — tam obrys biały. */ .section_header103 a:focus-visible, .services a:focus-visible, .footer3_component a:focus-visible, .text-color-alternate a:focus-visible { outline-color: var(--kw-accent-on-dark); } /* --- Link pomijający nawigację ----------------------------------------- Pierwszy element w . Widoczny dopiero po sfokusowaniu z klawiatury. */ .kw-skip-link { position: absolute; left: -9999px; top: 0; z-index: 9999; padding: 0.75rem 1.25rem; background-color: var(--base-color-brand--cta); color: #fff; font-family: Open Sans, sans-serif; text-decoration: none; } .kw-skip-link:focus { left: 0; } /* --- Cele dotykowe ------------------------------------------------------ WCAG 2.2, kryterium 2.5.8: minimum 24x24 px. Numery telefonu i adresy e-mail miały 15-20 px wysokości, czyli najważniejszy cel konwersji na telefonie był najtrudniejszy do trafienia. Powiększamy pole kliknięcia, nie tekst — układ zostaje bez zmian. */ a[href^="tel:"], a[href^="mailto:"] { display: inline-block; min-height: 24px; padding-block: 3px; } /* --- Treść ukryta w oczekiwaniu na animację ----------------------------- Pięć elementów na czterech podstronach ma wpisane w atrybut style opacity:0 i pokazuje je dopiero interakcja Webflow IX2 po przewinięciu (AUDYT.md §4.4a). Na /zespol/ to CAŁA unikalna treść strony — awaria jQuery albo webflow.js oznaczała pustą stronę. Zabezpieczenie na wypadek braku JS jest w