/* ========================================================================== ALLMEBLO. Stopka: dopracowanie wizualne. 2026-08-06. Wlascicielem tego pliku jest zadanie "stopka". NIE dopisywac tu stylow naglowka, menu, karty produktu ani checkoutu. Arkusz wpinany jest w layouts/layout-both-columns.tpl jako OSTATNI (po a11y-fixes.css), wiec przy rownej specyficznosci wygrywa z theme.css i z custom.css. Tam gdzie theme.css ma wyzsza specyficznosc, podbijamy selektorem, nie !important. W calym pliku nie ma ani jednego !important. PULAPKA SPECYFICZNOSCI (uderzyla juz raz w tej stopce): theme.css:3070 .footer-container .block .title_block -> 0,3,0 theme.css:4765 .footer-container li a:hover -> 0,2,2 theme.css:5079 .footer-container .block-toggler ul li -> 0,2,2 theme.css:5081 .footer-container .block-toggler ul li a -> 0,2,3 theme.css .block-toggler.ApBlockLink ul li -> 0,2,2 (mb 1.25rem) theme.css:4830 @media(max-width:767px) .footer-container .ApColumn .block-toggler .title_block -> 0,4,0 Dlatego kazdy selektor ponizej ma wpiete dodatkowo .footer-center albo znacznik (h2, ul, li, a), zeby przebic te wartosci z zapasem. TLO STOPKI: .footer-center ma #f5f5f5 (zmierzone), a NIE biel. Wszystkie kontrasty ponizej sa liczone wzgledem #f5f5f5 i zmierzone w Chromium. KONTRASTY (zmierzone funkcja WCAG w przegladarce, tlo #f5f5f5): #4d4d4d = 7,75:1 tekst linkow (bez zmian, z theme.css) #1f5c00 = 7,44:1 hover i focus linkow <- BYLO #f04e54 = 3,25:1 (BLAD) #2a7c00 = 4,84:1 naglowki kolumn h2 (bez zmian, z a11y-fixes.css) #94836c = 3,37:1 obwodka kropki przy linku (element nietekstowy, prog 3:1) UWAGA: #a1937f z menu glownego daje na #f5f5f5 tylko 2,75:1, dlatego w stopce jest ciemniejszy odcien. #595959 = 6,42:1 tekst pomocniczy (podpisy, dane firmy) ========================================================================== */ :root { --alm-fp-zielen: #2a7c00; --alm-fp-zielen-ciemna: #1f5c00; --alm-fp-kropka: #94836c; --alm-fp-tekst: #4d4d4d; --alm-fp-tekst-slaby: #595959; --alm-fp-tlo: #f5f5f5; --alm-fp-linia: #e3ded6; --alm-fp-czas: .18s; --alm-fp-krzywa: cubic-bezier(.4, 0, .2, 1); } /* ========================================================================== 1. NAGLOWKI KOLUMN Bylo: margin-bottom 40 px przy wysokosci wiersza 17 px, czyli ponad dwa i pol wiersza pustki miedzy naglowkiem a pierwszym linkiem. Przy zageszczonej liscie wygladalo to jak dziura. 16 px trzyma naglowek wyraznie ponad lista, ale nie odrywa go od niej. Znacznik h2 zostaje (poprawka dostepnosci z 2026-08-06, nie cofamy jej), kolor #2a7c00 zostaje z a11y-fixes.css. ========================================================================== */ .footer-container .footer-center .block h2.title_block { margin: 0 0 16px; font-size: 16px; line-height: 1.3; letter-spacing: .3px; } /* Ikona przy naglowku miala z motywu #2a8300, czyli INNA zielen niz sam naglowek (#2a7c00) i przy tym 4,43:1 na tle #f5f5f5 - zmierzone. Ten sam odcien co naglowek daje 4,84:1 i jednolity kolor calego wiersza. */ .footer-container .footer-center .block h2.title_block .footer-col-icon { font-size: 15px; color: #2a7c00; } /* ========================================================================== 2. LISTY LINKOW: hover jak w menu glownym (kropka + zielen + przesuniecie) Odwzorowanie manier z header-menu.css sekcja 6 (.megamenu a.dropdown-item): - pusty pierscien 9x9 px przy kazdej pozycji, - na hover pierscien wypelnia sie zielenia marki, rosnie do 1.35 i dostaje miekka poswiate 4 px, - tekst przesuwa sie o 6 px w prawo i zmienia kolor na zielen. Roznice wobec menu: obwodka jest ciemniejsza (#94836c zamiast #a1937f), bo tlo stopki to #f5f5f5, a nie biel, oraz tekst hoveru jest ciemniejszy (#1f5c00 zamiast #2a7c00) z tego samego powodu. ODSTEPY. Bylo: li margin-bottom 20 px + padding-bottom 6 px + kreska, link inline-block bez paddingu, czyli wiersz 43 px na 21 px tekstu. Jest: kreski zdjete (rytm robia kropki), li bez marginesow, caly odstep siedzi w paddingu LINKU, dzieki czemu odstep JEST celem dotykowym, zamiast byc martwa przerwa miedzy celami. desktop (>= 992 px): padding 5 px -> wiersz 30 px (bylo 43 px) mobile/tablet (< 992 px): padding 12 px -> wiersz 44 px (WCAG 2.5.5) ========================================================================== */ /* Kreska rozdzielajaca i marginesy z motywu - zdejmujemy. */ .footer-container .footer-center .block-toggler.ApBlockLink ul li, .footer-container .footer-center .block-toggler.ApBlockLink ul li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; line-height: normal; transition: none; } .footer-container .footer-center .block-toggler.ApBlockLink ul li a { position: relative; display: block; margin-bottom: 0; padding: 12px 0 12px 21px; font-size: 15px; line-height: 20px; color: var(--alm-fp-tekst); text-decoration: none; transition: color var(--alm-fp-czas) var(--alm-fp-krzywa), padding-left var(--alm-fp-czas) var(--alm-fp-krzywa); } /* Pierscien. Wyrownany do PIERWSZEGO wiersza tekstu, a nie do srodka calego linku: czesc pozycji lamie sie na dwa wiersze ("Jak zamawiac, takze na wymiar?", "Wyposazenie hoteli i pensjonatow") i przy top:50% kropka wisiala miedzy wierszami. Srodek pierwszego wiersza = padding-top + polowa interlinii, czyli 12 + 10 = 22 px na malym ekranie i 5 + 10 = 15 px od 992 px w gore. */ .footer-container .footer-center .block-toggler.ApBlockLink ul li a::before { content: ""; position: absolute; left: 2px; top: 22px; width: 9px; height: 9px; margin-top: -4.5px; border: 1.5px solid var(--alm-fp-kropka); border-radius: 50%; background-color: transparent; box-shadow: 0 0 0 0 rgba(42, 124, 0, 0); transition: background-color var(--alm-fp-czas) var(--alm-fp-krzywa), border-color var(--alm-fp-czas) var(--alm-fp-krzywa), transform var(--alm-fp-czas) var(--alm-fp-krzywa), box-shadow var(--alm-fp-czas) var(--alm-fp-krzywa); } .footer-container .footer-center .block-toggler.ApBlockLink ul li a:hover::before, .footer-container .footer-center .block-toggler.ApBlockLink ul li a:focus::before { background-color: var(--alm-fp-zielen); border-color: var(--alm-fp-zielen); transform: scale(1.35); box-shadow: 0 0 0 4px rgba(42, 124, 0, .14); } /* UWAGA, ZMIERZONE NA ZYWO: kolor hoveru MUSI byc powtorzony wlasnie tutaj. Ogolna regula z sekcji 3 (`.footer-container .footer-center li a:hover`, specyficznosc 0,3,2) przebija wprawdzie motyw, ale przegrywa z regula BAZOWA kilka linijek wyzej (`... .block-toggler.ApBlockLink ul li a`, 0,4,3), ktora te linki koloruje. Efekt w przegladarce: kropka, cien i przesuniecie dzialaly, a tekst zostawal szary rgb(77,77,77). Ten selektor ma 0,5,3, wiec wygrywa. */ .footer-container .footer-center .block-toggler.ApBlockLink ul li a:hover, .footer-container .footer-center .block-toggler.ApBlockLink ul li a:focus { padding-left: 27px; color: var(--alm-fp-zielen-ciemna); text-decoration: none; } /* -------------------------------------------------------------------------- 2b. LINIE MIEDZY ODSYLACZAMI (prosba wlasciciela, 2026-08-06, runda "j") Kreski z motywu byly wczesniej zdjete (rytm mialy robic same kropki). Wlasciciel poprosil o delikatne linie oddzielajace na desktopie i na telefonie, wiec wracaja, ale wlasnym kolorem i tylko MIEDZY pozycjami. KOLOR. #e3ded6 to ten sam cieply odcien, ktorego uzywa juz kreska pod naglowkiem akordeonu na telefonie, wiec stopka nie dostaje drugiego, konkurencyjnego szarego. Na tle #f5f5f5 daje kontrast 1,22:1: linia jest widoczna, ale nie tnie kolumny na kawalki. Motywowe rgba(0,0,0,0.07) bylo zimne i przy tekscie #4d4d4d robilo wrazenie brudnej ramki. Kreska jest elementem czysto dekoracyjnym (nie niesie tresci ani stanu), wiec nie podlega progowi 3:1 z WCAG 1.4.11 i nie rusza kontrastu tekstu, ktory zostaje 7,75:1. BRAK LINII PO OSTATNIM: `:not(:last-child)`. Specyficznosc 0,5,3 przebija reset kilka linijek wyzej (0,4,3), wiec nie trzeba nic tam odkrecac. RYTM. Kreska dokladalaby 1 px do kazdego wiersza, czyli 31 px zamiast umowionych 30 px na desktopie. Dlatego od 992 px w gore dolny padding linku schodzi z 5 px na 4 px: 5 + 20 + 4 + 1 = 30 px, rytm bez zmian. Gorny padding zostaje 5 px, wiec kropka dalej siedzi na top:15px. Na telefonie nic nie odejmujemy: 12 + 20 + 12 = 44 px celu dotykowego (WCAG 2.5.5 spelnione), a kreska idzie POZA linkiem, dajac 45 px rytmu. -------------------------------------------------------------------------- */ .footer-container .footer-center .block-toggler.ApBlockLink ul li:not(:last-child) { border-bottom: 1px solid var(--alm-fp-linia); } @media (min-width: 992px) { .footer-container .footer-center .block-toggler.ApBlockLink ul li a { padding-top: 5px; padding-bottom: 4px; } .footer-container .footer-center .block-toggler.ApBlockLink ul li a::before { top: 15px; } } /* ========================================================================== 3. HOVER W CALEJ STOPCE theme.css:4765 `.footer-container li a:hover` daje #f04e54 z podkresleniem. Zmierzony kontrast tego czerwonego na tle #f5f5f5 to 3,25:1, czyli PONIZEJ progu WCAG 1.4.3 (4,5:1). Dotyczy nie tylko kolumn z linkami, ale tez telefonu i adresu e-mail w kolumnie kontaktowej. Podmieniamy globalnie w obrebie .footer-center na #1f5c00 (7,44:1). Specyficznosc: 0,3,2 wobec 0,2,2 w motywie. ========================================================================== */ .footer-container .footer-center li a:hover, .footer-container .footer-center li a:focus { color: var(--alm-fp-zielen-ciemna); text-decoration: none; } /* Widoczny fokus klawiaturowy. W stopce nie bylo zadnego wlasnego stylu fokusu, a przegladarkowy domyslny ginal na szarym tle. */ .footer-container .footer-center a:focus-visible, .footer-container .footer-bottom a:focus-visible { outline: 2px solid var(--alm-fp-zielen-ciemna); outline-offset: 2px; border-radius: 2px; } /* ========================================================================== 4. KOLUMNA KONTAKTOWA I SOCIAL (kolumna 1) Odstepy takie same jak w kolumnach linkow, zeby stopka miala jeden rytm. Ikony social maja 33x33 px. NIE zmieniamy ich rozmiaru (tlo to sprite z motywu i przeskalowanie rozjechaloby kadrowanie) - zamiast tego powiekszamy sam obszar klikalny niewidoczna nakladka ::after do 45x45 px. ========================================================================== */ /* Pozycje kontaktu sa flex-containerami (motyw + custom.css), ale bez align-items, czyli domyslnie stretch. Ikona rozciagala sie na cala wysokosc pozycji, a jej glif rysowal sie przy GORNEJ krawedzi - przy powiekszonym celu dotykowym na telefonie (44 px) ikona wizualnie odjezdzala od tekstu o kilkanascie pikseli w gore. Zmierzone: li.mail mialo 59 px wysokosci przy 44 px linku. `center` zrownuje ikone z tekstem i sciaga li.mail do 44 px. 4a. UKLAD WIERSZY (polecenie wlasciciela 2026-08-06: "w stopce dwa numery telefony pod soba ikony, godziny tez w nowej lini z ikona"). Bylo w jednym li.call: numer + przecinek + numer + "(Pon-Pt: 8:00 - 16:00)". Na desktopie kolumna ma 264 px, wiec ta zawartosc i tak sie lamala - li.call mialo zmierzone 42,5 px, czyli dwa wiersze, a godziny doklejaly sie do drugiego numeru bez zadnego wlasnego znacznika. Jest: piec osobnych pozycji, kazda z wlasna ikona - adres, numer 1, numer 2, godziny, e-mail. RYTM. Kolumny linkow maja wiersz 30 px na desktopie i 44 px na mobile, z odstepem schowanym w paddingu LINKU (odstep jest wtedy celem dotykowym, a nie martwa przerwa). Kolumna kontaktowa dostaje ten sam rytm: desktop (>= 992 px): kazdy wiersz 30 px (20 px tekstu + 2 x 5 px) mobile (< 992 px): wiersze z odsyłaczem 44 px (20 px + 2 x 12 px), wiersze bez odsyłacza (adres, godziny) zostaja 30 px, zeby nie rozdac kolumny bez powodu - nie sa celami dotykowymi. Marginesy li zdjete do zera, caly odstep siedzi w paddingu. */ .footer-container .footer-center #footer-html-contact li { margin-bottom: 0; padding: 5px 0; line-height: 20px; align-items: center; } .footer-container .footer-center #footer-html-contact li:last-child { margin-bottom: 0; } /* Wiersze z odsyłaczem: padding przenosimy z li na , zeby caly odstep miedzy wierszami byl klikalny/dotykalny. */ .footer-container .footer-center #footer-html-contact li.call, .footer-container .footer-center #footer-html-contact li.mail { padding: 0; } /* Motyw daje odsylaczom mailto margin-bottom 15 px (zmierzone: li.mail 59 px przy 44 px linku na mobile). W szablonie bylo to gaszone inline stylem `style="margin:0"` przy telefonach - inline style usuniety, gasimy tutaj. */ .footer-container .footer-center #footer-html-contact li a { display: block; margin: 0; padding: 5px 0; font-size: 14px; line-height: 20px; } /* custom.css ma `#footer-html-contact li.call{gap:.3rem;flex-wrap:wrap}` - to byla proteza pod trzy elementy w jednym wierszu (numer, przecinek, numer). Teraz w li.call jest ikona i jeden numer, wiec gap doklejalby sie do padding-right ikony (15 px -> 19,8 px) i rozjezdzal kolumne wzgledem pozostalych wierszy. Specyficznosc: 1,3,2 wobec 1,1,1 w custom.css. */ .footer-container .footer-center #footer-html-contact li.call { gap: 0; flex-wrap: nowrap; } /* Ikony pozycji kontaktowych. Motyw (theme.css:4854) daje `.footer-center .contact-box li i{color:#2a8300}` - ta zielen ma na tle #f5f5f5 tylko 4,43:1. Ten sam blad byl juz naprawiony przy ikonie naglowka kolumny, wiec i tu wchodzi #2a7c00 (4,84:1), jednolicie z reszta stopki. Ikony sa czysto dekoracyjne (informacje niesie tekst obok), wszystkie maja aria-hidden="true" w szablonie. */ .footer-container .footer-center #footer-html-contact li i, .footer-container .footer-center #footer-html-contact li .footer-ico { color: var(--alm-fp-zielen); flex: 0 0 auto; } /* Zegar przy godzinach: wbudowany SVG (currentColor), rownany do szerokosci i odstepu glifow icomoon (20 px + 15 px), zeby wszystkie piec wierszy mialo tekst na tej samej osi pionowej. */ .footer-container .footer-center #footer-html-contact li .footer-ico { width: 20px; height: 20px; margin-right: 15px; } /* Godziny: bylo font-size 12px + opacity .7 wpisane inline. Opacity na tekscie psuje kontrast w sposob niemierzalny dla autora (0,7 x #4d4d4d na #f5f5f5 schodzi do okolo 4,2:1). Zamiast tego pelne krycie i kolor #595959 = 6,42:1, ten sam odcien co reszta tekstu pomocniczego w stopce. */ .footer-container .footer-center #footer-html-contact li.hours .footer-hours { font-size: 13px; line-height: 20px; color: var(--alm-fp-tekst-slaby); white-space: nowrap; } .footer-container .footer-center .block-social li a { position: relative; } .footer-container .footer-center .block-social li a::after { content: ""; position: absolute; top: -6px; right: -6px; bottom: -6px; left: -6px; } /* Mobile: caly blok kontaktowy wysrodkowany, ale WIERSZE wyrownane do lewej. theme.css (Punkt C, 2026-08-04) robil `ul{align-items:center}`, czyli kazdy li byl centrowany OSOBNO. Przy trzech wierszach bylo to niewidoczne, przy pieciu (dwa numery + godziny) ikony rozjezdzaja sie na piec roznych osi pionowych i kolumna wyglada na poszarpana. Zamiast tego zwezamy sam ul do szerokosci najszerszego wiersza (width:max-content) i centrujemy JEGO marginesami auto: blok nadal stoi na srodku kolumny, zgodnie z decyzja z 08-04, a wszystkie ikony stoja w jednej linii. Specyficznosc 1,2,1 wobec 0,2,1 w motywie. */ @media (max-width: 767px) { .footer-container .footer-center #footer-html-contact ul { align-items: flex-start; width: -webkit-max-content; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; } } /* Cel dotykowy telefonu i e-maila na malym ekranie: 44 px wysokosci (WCAG 2.5.5). Dotyczy obu numerow osobno - kazdy jest teraz wlasnym wierszem. */ @media (max-width: 991.98px) { .footer-container .footer-center #footer-html-contact li a { display: block; padding: 12px 0; line-height: 20px; } .footer-container .footer-center #footer-html-contact li { margin-bottom: 0; } } /* ========================================================================== 5. KOLUMNA 2: "Bezpieczne zakupy" Bylo: trzy luzno rzucone obrazki (laureat, Oferteo, trzy ikonki platnosci) bez naglowka, kolumna wysoka na 204 px przy sasiadkach 512-680 px, wiec caly wiersz wygladal na niedokonczony. Jest: kolumna z naglowkiem h2 (rowna wizualnie z kolumnami 3-5) i czterema blokami o wspolnym rytmie: metody platnosci -> ocena -> odznaki -> dane rejestrowe. Kazdy kafel ma stala wysokosc i object-fit: contain, wiec logotypy o roznych proporcjach (2:1 PayU, 4,1:1 Visa/MC, 3,6:1 PayPo) ustawiaja sie w rowna siatke i NIC nie przesuwa ukladu po doczytaniu obrazkow (kazdy ma width/height w HTML). ========================================================================== */ .footer-container .footer-center .footer-trust-col .block.ApHtml { margin-bottom: 0; } /* --- 5a. Kafle metod platnosci --- Szerokosc kafla liczona z szerokosci kolumny, a nie stala: przy stalych 76 px zmierzylem 3 wiersze zamiast 2 (kolumna ma 234 px w srodku, wiec dwa kafle po 76 px + odstep to 158 px, a trzeci juz sie nie miescil). calc((100% - 12px)/3) daje ZAWSZE trzy kafle w wierszu, czyli 2 wiersze dla pieciu metod, i skaluje sie razem z kolumna. */ .footer-container .footer-center .footer-pay-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; } .footer-container .footer-center .footer-pay-list li { display: flex; align-items: center; justify-content: center; box-sizing: border-box; flex: 0 0 calc((100% - 12px) / 3); max-width: 96px; height: 38px; margin: 0; padding: 0 6px; background-color: #fff; border: 1px solid var(--alm-fp-linia); border-radius: 5px; } /* Wysokosc STALA (20 px), szerokosc z proporcji atrybutow width/height, plus object-fit: contain. Dzieki temu miejsce na logo jest zarezerwowane, zanim plik SVG sie doczyta (obrazki sa lazy i leza pod zagieciem), a szerokie logotypy - Visa/Mastercard 95:23, Raty PayU 95:25, PayPo 91:25 - mieszcza sie w kaflu bez znieksztalcenia proporcji. */ .footer-container .footer-center .footer-pay-list li img { display: block; width: auto; max-width: 100%; height: 20px; object-fit: contain; } /* Miedzy 992 a 1199 px kontener Bootstrapa ma 970 px, czyli kolumna stopki 192 px (zmierzone). Trzy kafle daja wtedy po 50 px, a w kaflu zostaje 36 px na logo - Visa/Mastercard schodzi do 36x9 px i jest nieczytelne. W tym jednym zakresie idziemy po dwa kafle w wierszu (po 93 px). */ @media (min-width: 992px) and (max-width: 1199.98px) { .footer-container .footer-center .footer-pay-list li { flex: 0 0 calc((100% - 6px) / 2); } } .footer-container .footer-center .footer-pay-note { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--alm-fp-tekst-slaby); } /* PayPo i raty to uslugi finansowe, wiec obok logotypow musi byc dostep do warunkow. Linki sa podkreslone (nie polegamy na samym kolorze - WCAG 1.4.1) i prowadza do /content/raty-payu.html i /content/paypo.html. */ .footer-container .footer-center .footer-pay-note a { color: var(--alm-fp-tekst-slaby); text-decoration: underline; text-underline-offset: 2px; } .footer-container .footer-center .footer-pay-note a:hover, .footer-container .footer-center .footer-pay-note a:focus { color: var(--alm-fp-zielen-ciemna); } /* --- 5b. Odznaki: laureat + Oferteo --- (blok oceny Trusted Shops zostal usuniety z szablonu - zywy widget Trusted Shops pokazuje na tej samej stronie 4,84, a wpisana na sztywno wartosc z JSON-LD to 4,85; uzasadnienie w footer-content.tpl) */ .footer-container .footer-center .footer-trust-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; } .footer-container .footer-center .footer-trust-badges img { display: block; width: auto; height: auto; max-width: 100%; background-color: #fff; border: 1px solid var(--alm-fp-linia); border-radius: 5px; padding: 5px 7px; } /* Laureat ma proporcje 298:78 (3,82:1), Oferteo 320:208 (1,54:1). Wspolna wysokosc kafla 54 px daje szerokosci 206 px i 83 px, czyli razem z odstepem 299 px - wiecej niz kolumna (264 px na 1440, 198 px na 992). Dlatego laureat dostaje pelna szerokosc wiersza, a Oferteo staje pod nim po lewej. Wysokosci sa stale, wiec nic nie skacze. */ .footer-container .footer-center .footer-trust-badges img:first-child { width: 100%; max-width: 200px; height: auto; aspect-ratio: 298 / 78; object-fit: contain; } .footer-container .footer-center .footer-trust-badges img:last-child { width: 104px; height: auto; aspect-ratio: 320 / 208; object-fit: contain; } /* --- 5d. Fakty rejestrowe --- */ .footer-container .footer-center .footer-facts { margin: 0; padding: 0; list-style: none; } .footer-container .footer-center .footer-facts li { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 6px; font-size: 12.5px; line-height: 1.45; color: var(--alm-fp-tekst-slaby); } .footer-container .footer-center .footer-facts li:last-child { margin-bottom: 0; } .footer-container .footer-center .footer-facts li svg { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 2px; fill: var(--alm-fp-zielen); } .footer-container .footer-center .footer-facts .footer-facts-id { padding-left: 20px; letter-spacing: .2px; } /* ========================================================================== 6. DOL STOPKI Trzy ikonki platnosci z _partials/footer.tpl (PayU / Visa-MC / BLIK) sa teraz pelnym podzbiorem kafli z kolumny 2, ktora lezy doslownie kilkadziesiat pikseli wyzej. Zostawienie obu daje to samo logo dwa razy na jednym ekranie, wiec dol stopki gasimy stylem (samego szablonu footer.tpl nie ruszamy - nalezy do innego zadania, wiec zmiana jest odwracalna jedna linia CSS). PULAPKA: custom.css ma `#footer .footer-bottom .footer-payment-icons` o specyficznosci 1,2,0 (identyfikator!), wiec selektor bez #footer przegrywal mimo pozniejszego wczytania arkusza. Zmierzone na zywo: display pozostawal `flex`. Stad #footer + .inner, czyli 1,3,0. ========================================================================== */ #footer .footer-bottom .inner .footer-payment-icons { display: none; } /* Koloru copyrightu NIE ruszamy: #333 na bieli to 12,63:1, kazda zmiana moglaby ten kontrast tylko pogorszyc. Zdejmujemy natomiast `text-transform: capitalize` (zmierzone w motywie), przez ktore linia czytala sie "Wszystkie Prawa Do Tresci Oraz Grafik Zastrzezone. Kopiowanie Zabronione." - kazde slowo wielka litera to w polszczyznie blad ortograficzny i utrudnia czytanie. */ .footer-container .footer-bottom .copyright { line-height: 1.5; text-transform: none; } /* ========================================================================== 7. MALE EKRANY < 768 px: kolumny 3-5 sa akordeonami. Naglowek jest wyzwalaczem, wiec musi miec wlasny cel dotykowy 48 px. theme.css daje mu w tym zakresie margin-bottom 35 px (selektor 0,4,0), co przy zamknietym akordeonie robi 35 px pustki pod kazda zwinieta sekcja - zerujemy. ========================================================================== */ @media (max-width: 767.98px) { .footer-container .footer-center .ApColumn .block-toggler .title { display: flex; align-items: center; justify-content: space-between; min-height: 48px; border-bottom: 1px solid var(--alm-fp-linia); } .footer-container .footer-center .ApColumn .block-toggler h2.title_block { margin: 0; } /* ----------------------------------------------------------------- STRZALKI AKORDEONU W JEDNEJ OSI (zgloszenie wlasciciela 2026-08-06) PRZYCZYNA, znaleziona w kodzie, nie zgadnieta: wyzwalacz ma klase `clearfix`, a theme.css:833 daje `.clearfix::after{content:""; display:table;clear:both}`. Odkad `.title` jest kontenerem flex, to pseudo-element przestaje byc czyszczeniem oplywania i staje sie TRZECIM elementem flex. Przy `justify-content:space-between` to wlasnie ON siada przy prawej krawedzi, a strzalka laduje w srodku, w miejscu wyliczonym z szerokosci naglowka. Naglowki maja rozne dlugosci ("Obsluga klienta", "Informacje", "Kategorie"), wiec kazda strzalka wypadala w innym miejscu - dokladnie te "schodki", ktore widac na telefonie. NAPRAWA w dwoch krokach, obie potrzebne: 1. `content:none` gasi pseudo-element, wiec w wierszu zostaja dwa realne elementy. Oplywania i tak juz nie ma czego czyscic, bo `.float-xs-right{float:right!important}` (theme.css:838) w kontekscie flex jest ignorowane. 2. Zamiast polegac na space-between, strzalka dostaje wlasne `margin-left:auto`. Dzieki temu siedzi przy prawej krawedzi nawet gdyby ktos kiedys dolozyl trzeci element do wiersza. Strzalka dostaje pudelko 44x44 px z ikona dosunieta do prawej: prawe krawedzie wszystkich ikon leza na jednej pionowej osi, wspolnej dla calej stopki. Ikona jest wysrodkowana w pionie (motywowe `margin-top:.3125rem` spychalo ja o 5 px w dol wzgledem naglowka). Cel dotykowy sie nie zmniejsza: klikalny jest caly wiersz `.title` o wysokosci 48 px. ----------------------------------------------------------------- */ .footer-container .footer-center .ApColumn .block-toggler .title::after { content: none; } .footer-container .footer-center .ApColumn .block-toggler .title > .float-xs-right { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; width: 44px; height: 44px; margin-left: auto; } .footer-container .footer-center .ApColumn .block-toggler .title .navbar-toggler.collapse-icons { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 0; } .footer-container .footer-center .ApColumn .block-toggler ul.collapse.in, .footer-container .footer-center .ApColumn .block-toggler ul.collapse.show { padding: 6px 0 10px; } /* Kolumna 2 na telefonie: kafle platnosci i odznaki ustawiaja sie w wiersz i wysrodkowuja, zeby nie robic dlugiej kolumny obrazkow. */ .footer-container .footer-center .footer-trust-col { text-align: center; } .footer-container .footer-center .footer-pay-list, .footer-container .footer-center .footer-trust-badges { justify-content: center; } .footer-container .footer-center .footer-trust-badges img:first-child { width: 200px; } .footer-container .footer-center .footer-facts li { justify-content: center; text-align: left; } .footer-container .footer-center .footer-facts .footer-facts-id { padding-left: 0; } } /* Bardzo waskie ekrany (320 px): kolumna wewnetrzna ma ok. 290 px, a trzy kafle po 76 px z odstepami to 240 px, wiec mieszcza sie po trzy w wierszu bez przewijania poziomego. Nic nie trzeba zwezac, ale zabezpieczamy sie przed wyjsciem szerokiego logotypu poza kolumne. */ @media (max-width: 359.98px) { .footer-container .footer-center .footer-pay-list li { width: 72px; } .footer-container .footer-center .footer-trust-badges img:first-child { width: 100%; max-width: 200px; } } /* ========================================================================== 8. OGRANICZENIE RUCHU (prefers-reduced-motion) ========================================================================== */ @media (prefers-reduced-motion: reduce) { .footer-container .footer-center .block-toggler.ApBlockLink ul li a, .footer-container .footer-center .block-toggler.ApBlockLink ul li a::before { transition: none; } .footer-container .footer-center .block-toggler.ApBlockLink ul li a:hover, .footer-container .footer-center .block-toggler.ApBlockLink ul li a:focus { padding-left: 21px; } .footer-container .footer-center .block-toggler.ApBlockLink ul li a:hover::before, .footer-container .footer-center .block-toggler.ApBlockLink ul li a:focus::before { transform: none; } }