/* ============================================================ Poprawki UI z audytu wizualnego 2026-07-19. Każdy blok = jeden bug ze screenshotów w ~/lidos-pipeline/audits/screenshots_2026_07_19/ Uwaga: selektory celowo powtarzają długie łańcuchy klas motywu — muszą przebić specyficznością reguły parenta. ============================================================ */ /* ------------------------------------------------------------ FIX 1 — listy modeli / podkategorii: karta bez miniatury rezerwowała kolumnę 250px + min-height 250px, przez co strony typu maszyny (45 modeli) były prawie pustą ścianą scrolla. Karta bez w .machines_tax_thumb przechodzi na 1 kolumnę bez min-height. Stare przeglądarki bez :has() zachowują dotychczasowy wygląd (bez pogorszenia). ------------------------------------------------------------ */ .products_cards .product_card:not(:has(.machines_tax_thumb img)) { min-height: 0; grid-template-columns: 100%; } .products_cards .product_card:not(:has(.machines_tax_thumb img)) .machines_tax_thumb { display: none; } .products_cards .product_card:not(:has(.machines_tax_thumb img)) .desc { padding: 16px 0 16px 30px; } /* ------------------------------------------------------------ FIX 2 — H1 na stronach taksonomii wystawał poza lewą krawędź viewportu („kład hydrauliczny”): .left_col ma margin-left:-10vw (żółte tło ma krwawić do krawędzi), ale razem z boxem poza ekran wyjeżdżał też tekst (i breadcrumb!). Oddajemy ten sam offset paddingiem — tło dalej sięga krawędzi, treść wraca na ekran. Font lekko mniejszy, żeby długie nazwy (Układ hydrauliczny, Uszczelnienia siłowników, DE/IS odpowiedniki) łamały się między wyrazami, nie w środku wyrazu. ------------------------------------------------------------ */ @media (min-width: 851px) { body.tax-kategorie .grid320_1fr .left_col { padding-left: calc(10vw + 20px); } body.tax-kategorie .grid320_1fr .left_col h1 { font-size: 2.4rem; word-break: normal; hyphens: auto; } } /* ------------------------------------------------------------ FIX 3 — mobile wpis części: H1 wjeżdżał pod slider zdjęć. Pusty .mini_titles_box (brak badge „Nowy produkt”/„Zamiennik”) ma margin -15px górą i dołem — podciągał tytuł o 30px pod obrazek. Gdy box nie ma dzieci, chowamy go. Długi łańcuch klas = przebicie specyficzności reguły parenta (5 klas). ------------------------------------------------------------ */ .all_machines_with_list_section_single_product_page.all_machines_with_list_section .product_info_main_content .left_col_product_text .mini_titles_box:not(:has(div)) { display: none; } /* Bufor pod sliderem na mobile — żeby kropki paginacji swiper (bottom:-25px) nie wjeżdżały na tytuł przy kilku zdjęciach. */ @media (max-width: 1050px) { .all_machines_with_list_section_single_product_page.all_machines_with_list_section .product_info_main_content .slider_product { margin-bottom: 40px; } } /* ------------------------------------------------------------ FIX 4 — „Pasuje do maszyn”: ściana 300+ pozycji (~4000px scrolla). Listy > 30 pozycji dostają z fixes.js klasę .machines-collapsible + przycisk toggle. Treść zostaje w DOM (SEO bez zmian), domyślnie widać ~400px + gradient. Bez JS nic się nie zmienia (klasa nie zostanie nadana). ------------------------------------------------------------ */ .left_col_product_text ul.machines-collapsible { max-height: 400px; overflow: hidden; position: relative; } .left_col_product_text ul.machines-collapsible:not(.expanded)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff); pointer-events: none; } .left_col_product_text ul.machines-collapsible.expanded { max-height: none; } .left_col_product_text .machines-toggle { display: inline-block; margin: 10px 0 25px; padding: 10px 22px; background-color: #000; color: #ffd302; font-family: "Impact"; font-size: 14px; letter-spacing: 0.5px; text-transform: uppercase; border: 0; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; } .left_col_product_text .machines-toggle:hover { background-color: #ffd302; color: #000; } /* ------------------------------------------------------------ FIX 5 — opis części: drobny, gęsty blok tekstu. Lekko większy font i interlinia dla czytelności (bez zmian struktury). ------------------------------------------------------------ */ .left_col_product_text .single_product_main_desc, .left_col_product_text .single_product_main_desc p { font-size: 16px; line-height: 1.65; } /* ============================================================ TYPOGRAFIA (feedback zespołu 2026-07-20): parentowy @font-face "Impact" wskazuje pliki fonts/Impact.*, których NIE MA na serwerze → przeglądarka bierze systemowy Impact (Windows): skrajnie ścieśniony, jednogruby → h1-h4 (domyślny bold) dostają SZTUCZNE pogrubienie = "rozmycie/cień" zgłoszone przez zespół. Fix: nadpisujemy rodzinę "Impact" self-hostowanym Barlow Condensed 600/700 (prawdziwe grubości, zero faux bold; spójny z Barlow w body). Kolejność deklaracji jest ISTOTNA: local("Impact") pierwszy = fallback dla pism spoza łaciny (ru/bg/el — późniejsze face'y z unicode-range wygrywają dla łaciny, reszta spada do lokalnego Impacta). ============================================================ */ @font-face { font-family: "Impact"; src: local("Impact"); font-weight: 100 600; font-style: normal; } @font-face { font-family: "Impact"; src: local("Impact"); font-weight: 700 900; font-style: normal; } @font-face { font-family: "Impact"; src: url("../fonts/BarlowCondensed-600-latin-ext.woff2") format("woff2"); font-weight: 100 600; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Impact"; src: url("../fonts/BarlowCondensed-600-latin.woff2") format("woff2"); font-weight: 100 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Impact"; src: url("../fonts/BarlowCondensed-700-latin-ext.woff2") format("woff2"); font-weight: 700 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Impact"; src: url("../fonts/BarlowCondensed-700-latin.woff2") format("woff2"); font-weight: 700 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Face'y z DOKŁADNĄ wagą i PEŁNYM pokryciem glifów (latin+latin-ext, 525 glifów). Przeglądarki preferują dokładną wagę nad zakresem — przez to parentowy face (exact 400, plik tylko-latin) wygrywał dobór dla KAŻDEGO znaku i polskie Ę/Ł/Ś spadały do fontu systemowego. Te deklaracje (później = wyższy priorytet, ta sama dokładna waga) przejmują dobór; nowe nazwy plików omijają stary cache Cloudflare. */ @font-face { font-family: "Impact"; src: url("../fonts/BarlowCondensed-600-full.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "Impact"; src: url("../fonts/BarlowCondensed-700-full.woff2") format("woff2"); font-weight: bold; font-style: normal; font-display: swap; } /* rozsunięcie liter w nagłówkach (feedback: "zlewająca się") */ h1, h2, h3, h4 { letter-spacing: 0.02em; }