/** * fixes.css - poprawki ladowane po global.css * Nie edytuj global.css - dodawaj poprawki tutaj. */ /* ============================================================ Fix 11 - podpisy nazw profilowan POD thumbnailami slidera Kazdy span = dokladnie 1 slot Owl Carousel. Formula: flex: 0 0 calc(100%/N - gap*(N-1)/N) gdzie N = items w Owl, gap = 12px Odpowiada breakpointom z owlCarousel thumbnails-slider: 0px+: items:2 -> calc(50% - 6px) [1 gap / 2 items = 6px] 960px+: items:3 -> calc(33.33% - 8px) [2 gapy / 3 items = 8px] 1240px+: items:4 -> calc(25% - 9px) [3 gapy / 4 items = 9px] padding:0 44px = padding .thumbnails (chevrony wysute na zewnatrz) ============================================================ */ .profiling-thumbs-labels { display: flex; gap: 12px; margin-top: 8px; padding: 0 44px; } .profiling-thumbs-labels span { flex: 0 0 calc(50% - 6px); text-align: center; font-size: 13px; font-weight: 600; color: #1f1f1f; line-height: 1.3; padding: 0 2px; word-break: break-word; hyphens: auto; } @media (min-width: 960px) { .profiling-thumbs-labels span { flex: 0 0 calc(33.333% - 8px); } } @media (min-width: 1240px) { .profiling-thumbs-labels span { flex: 0 0 calc(25% - 9px); } } /* ============================================================ Fix 22 - Fix 20 scoped do desktop (lg+) Na mobile `.reset-wrapper` musi mieć width:100%, bo 33.3% powoduje łamanie tekstu 'RESETUJ FILTRY' na dwie linie. ============================================================ */ @media (min-width: 992px) { .portfolio .portfolio-list form .reset-wrapper { width: calc(33.3% - 20px) !important; padding-right: 0 !important; justify-content: flex-start !important; } .portfolio .portfolio-list form .reset-wrapper a { width: 100% !important; } } /* ============================================================ Fix 23 - obróbki blacharskie: tabela danych technicznych ============================================================ PROBLEM: Reguła w _product.scss (lg+) ustawia .product-technical__wrapper .table { width: 50%; } bo design zakłada układ 50/50: tabela + zdjęcie obok. 3 produkty obróbek (010A/010B, 014, 039) nie mają zdjęcia ".photo", więc tabela utrzymuje 50% (~700px) podczas gdy wrapper ma ~1400px. Tabela 12-kolumnowa nie mieści się i wymusza poziomy scroll wewnątrz wrappera (~277px overflow). FIX: Gdy .product-technical__table jest JEDYNYM dzieckiem wrappera (brak siostrzanego .photo) -> rozciągnij tabelę na 100% oraz zmniejsz padding td z 30px do 12px/10px, żeby content 12 kolumn zmieścił się w 1400px. SCOPE: - selektor :only-child = aplikuje się WYŁĄCZNIE na tych stronach, gdzie wrapper ma jedno dziecko (obróbki bez zdjęcia). Inne produkty (z .photo) NIE są dotknięte. COFNIĘCIE: Usuń cały blok od tego komentarza do końca pliku. Backup oryginału: fixes.css.bak-fix23-20260520 ============================================================ */ .product-technical__wrapper > .product-technical__table:only-child { width: 100%; } .product-technical__wrapper > .product-technical__table:only-child .table { width: 100%; } .product-technical__wrapper > .product-technical__table:only-child .table table td { padding: 12px 10px; } /* ============================================================ Fix 24 - Wyniki wyszukiwania: pokaż pliki (downloads) ============================================================ PROBLEM: Reguła w global.css: .downloads__wrapper .right > span article, .downloads__wrapper .right > div article { display: none; } służy akordeonowi na /do-pobrania/ (artykuły chowane do czasu kliknięcia "Rozwiń"). Ta sama struktura jest używana w search.php do prezentacji wyników typu "Pliki" - tam nie ma mechanizmu rozwijania, więc pliki pozostawały ukryte (nagłówek "Pliki (1)" + przycisk "zobacz więcej" bez listy). FIX: Przywróć display dla
wewnątrz #all-files i #search-files (kontenery search.php) - tylko na stronach wyników wyszukiwania (body.search-results). COFNIĘCIE: Usuń cały blok od tego komentarza do końca pliku. Backup oryginału: fixes.css.bak-fix24-pre ============================================================ */ body.search-results #all-files article, body.search-results #search-files article { display: block; } /* ============================================================ Fix 25 - Wyniki wyszukiwania: odstep od sekcji "Skontaktuj sie z nami" ============================================================ PROBLEM: Na search.php ostatni wynik (np. pliki) styka sie bezposrednio z ciemnaszara sekcja .footer-form (Skontaktuj sie z nami) - brak oddechu wizualnego miedzy zawartoscia a stopka kontaktowa. FIX: Dodaj 60px padding-bottom do kontenera .fp-products tylko na stronach wyszukiwania (body.search-results). COFNIECIE: Usun ten blok do konca pliku. Backup: fixes.css.bak-fix25-pre ============================================================ */ body.search-results .fp-products { padding-bottom: 60px; } /* ============================================================ Fix 28 - Baza wiedzy: pokaz tytuly artykulow (display: block) ============================================================ PROBLEM: Sekcje /baza-wiedzy/ (#porady-montazowe, #pytania-i-odpowiedzi, #slowniczek) po naprawie JS (guard #select-downloads) sa juz widoczne, ale tytuly artykulow zostaly ukryte regula .knowledge__wrapper .right > div article { display: none } z global.css (wspoldzielona z /do-pobrania/ gdzie sa accordion). FIX: Na .knowledge__wrapper przywroc widocznosc
. .knowledge-description rozwija sie po kliknieciu (handler app.js). COFNIECIE: usun ten blok do konca pliku. Backup: fixes.css.bak-fix28-prod-* ============================================================ */ .knowledge__wrapper .right > div article { display: block; } /* ============================================================ Fix CLS - aspect-ratio dla obrazow bez wymiarow (2026-07-28 Alex) Problem: bloki ACF wypluwaja bez width/height, a CSS ma .photo img{width:100%;height:auto} -> przegladarka nie zna proporcji do czasu doladowania -> skok ukladu (CLS ~1.0). Fix: rezerwuj miejsce przez aspect-ratio na kontenerach. Proporcje zmierzone na zywo (mobile 412px, Lighthouse boundingRect). object-fit:cover bo proporcja pliku != proporcja wyswietlania. COFNIECIE: usun ten blok do konca / przywroc fixes.css.PRZED ============================================================ */ /* Hero text-photo (ratio ~1.57 -> 3/2) */ .text-photo__wrapper .photo img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; height: auto; } /* Blok hall (ratio ~1.88 -> 16/9) */ .hall__wrapper img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; height: auto; } /* Ikony/kafle oferty fp-offer (ratio ~1 -> kwadrat) */ .fp-offer__wrapper a img { aspect-ratio: 1 / 1; object-fit: contain; width: 100%; height: auto; } /* Kafle realizacji w sliderze Owl (184x188 ~ kwadrat, 27 szt) */ .owl-item a.item img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; height: auto; } /* Portfolio / news thumbnaile (jesli sa, kwadrat) */ .fp-portfolio img, .fp-news__wrapper img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; height: auto; } /* ============================================================ Fix CLS #2 (v2) - slider hero (Owl Carousel) - 2026-07-28 Alex ROOT CAUSE (PerformanceObserver + timing): shift @2663ms nastepuje 6ms PO dodaniu klasy owl-loaded. Owl NAJPIERW dodaje owl-loaded, POTEM przebudowuje DOM (5 slajdow x100vh -> 1x100vh). Wersja z :not(.owl-loaded) zwalniala rezerwacje za wczesnie. FIX v2: zablokuj wysokosc SEKCJI .slider = 100vh na stale + overflow hidden. Cokolwiek owl robi w srodku, sekcja trzyma wysokosc -> tresc ponizej sie nie rusza. Niezalezne od timingu JS. COFNIECIE: usun ten blok. ============================================================ */ .slider { height: 100vh; overflow: hidden; position: relative; } .slider .header-slider, .slider .header-slider .item { height: 100vh; } /* ============================================================ Banner hero - warianty responsywne (2026-07-28 Alex) Problem: slajd .item ma inline style background-image = pelny banner-glowna-02.webp (1920x1060, 110KB) ladowany ZAWSZE, tez na mobile gdzie background-size:cover pokazuje ~25% (reszta ucieta). Fix: podmien tlo per breakpoint (przyciete warianty, mniejsze): - desktop: banner-glowna-02-desktop.webp (1887x1060 16:9, 113KB) - bez zbednych bokow - mobile: banner-glowna-02-mobile.webp (760x1013 portret, 55KB) - kadr na budynek, -50% wagi !important bo nadpisujemy inline style slajdu. Dotyczy tylko strony glownej (.home) i tego slajdu (position-middle). COFNIECIE: usun ten blok. ============================================================ */ /* ============================================================ Formularz kontaktowy - zmniejszenie fontu zgody RODO + widget Turnstile (2026-08-13 Alex) 1) Tekst zgody RODO byl 14px (global.css: .footer-form .wpcf7-acceptance p) - dlugi akapit zajmowal duzo miejsca. Zmniejszamy do 11px / interlinia 1.4. 2) Odstep nad widgetem Cloudflare Turnstile. Dotyczy formularza .footer-form (/kontakt/ oraz footer-form). !important bo nadpisujemy skompilowany global.css. COFNIECIE: usun ten blok. ============================================================ */ .footer-form .wpcf7-acceptance, .footer-form .wpcf7-acceptance p, .footer-form .wpcf7-acceptance .wpcf7-list-item-label { font-size: 11px !important; line-height: 1.4 !important; } .footer-form .cf-turnstile { margin: 15px 0; } /* Offteam 2026-09-08 (Poprawka 4b): hover wiersza pliku Do pobrania na czerwono */ .eur-row-open{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:12px;transition:color .3s} .eur-row-open:hover{color:#e93033!important} .eur-row-open:hover svg path{fill:#e93033!important;transition:fill .3s}