/* v89-polish.css — 2026-08-29 (audyt „pixel po pikselu" widoku gościa) * ========================================================================== * Ostatnia warstwa CSS w (wp_head 10004, za v87-mobile-drawer). Każda * sekcja odpowiada konkretnemu, zmierzonemu zjawisku z audytu — numer sekcji * = numer w raporcie. Kolory wyłącznie z tokenów motywu. * * Specyficzność: `html body …` (0,1,2 + selektor) — celowo TA SAMA rodzina co * w warstwach v65/v66/v84, żeby wygrywać kolejnością źródła, a nie kolejnym * !important. !important tylko tam, gdzie warstwa niżej już go używa. * ========================================================================== */ /* ── 1. Typografia: dzielenie wyrazów i skala nagłówków ────────────────── * `hyphens:auto` dzieliło polskie nazwy w środku („in-stalacji", „ma-szyn", * „techni-ki") w nagłówkach h1 i tytułach kart. Nagłówki i nazwy produktów: * dzielenie tylko ręczne; bardzo długie tokeny (numery katalogowe) łamią się * przez overflow-wrap, nie przez łącznik. */ html body h1, html body h2, html body h3, html body h4, html body .hbt-loop-card__title, html body .hbt-hero-uni-copy h1, html body .hbt-page-header h1, html body .entry-title { -webkit-hyphens: manual; hyphens: manual; } html body .hbt-loop-card__title { overflow-wrap: anywhere; } /* Nagłówki sekcji strony głównej: na 375 px było sześć rozmiarów h2 * (24/22/20/18/15.75/11) i trzy dekoracje (podkreślenie / belka / nic). * Jedna skala (22 → 26 px) i jedna dekoracja — zielona belka z lewej. */ html body .section-header, html body .section-header-lg { border-bottom: 0; padding-bottom: 0; margin-bottom: 16px; } html body .section-header h2, html body .section-header-lg h2, html body .about-content > h2 { font-size: 22px; line-height: 1.2; letter-spacing: -.01em; margin: 0; padding-left: 14px; border-left: 4px solid var(--primary, #8BC34A); } html body .section-header-lg .sh-accent { display: none; } @media (min-width: 992px) { html body .section-header h2, html body .section-header-lg h2, html body .about-content > h2 { font-size: 26px; } } /* h3 kafli oferty/branż (14 px) było MNIEJSZE od h4 stopki (17 px). */ html body .offer-card h3, html body .industry-card h3 { font-size: 16px; line-height: 1.3; } html body .footer-dept h4 { font-size: 15px; } /* Największy nagłówek strony (24 px) siedział w opisie SEO w stopce. */ html body .hbt-fd-title { font-size: 20px; } @media (min-width: 992px) { html body .hbt-fd-title { font-size: 22px; } } /* Slajdy hero: h2 równe h1 (32 px) na desktopie, 15.75 px na telefonie. */ html body .hbt-hero-slide h2 { font-size: 17px; line-height: 1.25; } @media (min-width: 992px) { html body .hbt-hero-slide h2 { font-size: clamp(22px, 2.2vw, 28px); } } /* Treść stron statycznych (O nas): śródtytuły h3 miały 14 px przy akapicie 16 px. */ html body .hbt-page-content h2 { font-size: 22px; line-height: 1.25; margin: 28px 0 10px; } html body .hbt-page-content h3 { font-size: 18px; line-height: 1.3; margin: 22px 0 8px; } @media (min-width: 992px) { html body .hbt-page-content h2 { font-size: 26px; } html body .hbt-page-content h3 { font-size: 20px; } } /* Długość wiersza: akapity na 1344 px (~168 znaków). Czytelny łam to 65–80. */ @media (min-width: 992px) { html body .about-content p, html body .hbt-page-content p, html body .hbt-page-content li, html body .hbt-fd-body p, html body .entry-content p { max-width: 74ch; } } /* ── 2. Karta produktu na listingach ───────────────────────────────────── * Tytuł 11 px / 15 px interlinii na 375 px — poniżej progu czytelności. */ html body .hbt-loop-card .hbt-loop-card__title { font-size: 13px; line-height: 1.3; } @media (min-width: 768px) { html body .hbt-loop-card .hbt-loop-card__title { font-size: 14px; } } /* Separator „·" był ::after sufiksu „z VAT" — gdy cena netto łamała się do * nowego wiersza, kropka zostawała sama na końcu linii. Separator należy do * ceny netto i łamie się razem z nią. */ html body .hbt-loop-card__price small.woocommerce-price-suffix::after { content: none; } html body .hbt-loop-card__price small.woocommerce-price-suffix { font-size: 11px; white-space: nowrap; } html body .hbt-loop-card__price-net { font-size: 11px; white-space: nowrap; } html body .hbt-loop-card__price-net::before { content: "\00b7\00a0"; color: var(--text-l, #6b6b6b); } html body .hbt-loop-card__rating--usp, html body .hbt-loop-card__rating--usp span { font-size: 11px; } /* ── 3. Cele dotyku (audyt: 107 elementów < 40 px na stronie głównej) ──── */ html body .hbt-hero-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; } html body .hbt-hero-arrow { width: 40px; height: 40px; } html body .hbt-hero-dot { position: relative; } html body .hbt-hero-dot::before { content: ""; position: absolute; inset: -8px; } html body .hbt-cat-chip, html body .hbt-brand-cat-chip { min-height: 40px; } /* ── 4. Pływające przyciski na telefonie ───────────────────────────────── * Cookies (lewy dół) + „do góry" + kontakt (prawy dół) + dolny pasek: * na każdej stronie zasłaniały treść. Jest dolny pasek, więc „do góry" * na telefonie jest zbędne; przycisk cookies równa się do FAB-a kontaktu * (pozycję dopina JS w legacy/v65-fixes.php). */ @media (max-width: 767px) { html body #btt, html body .btt { display: none !important; } html body .cmplz-manage-consent { width: 36px !important; height: 36px !important; opacity: .9; } } /* ── 5. Placeholder zgody na YouTube (Complianz) ───────────────────────── * Tekst i przycisk „Zgadzam się" były praktycznie niewidoczne (~1.2:1) na * jasnym obrazie-placeholderze. Własne tło pod tekstem uniezależnia kontrast * od obrazu za nim. */ html body .cmplz-blocked-content-notice { background: rgba(26, 23, 20, .78); color: #fff; padding: 18px 20px; border-radius: 12px; max-width: 420px; margin: 0 auto; text-align: center; } html body .cmplz-blocked-content-notice-body { color: #fff; font-size: 14px; line-height: 1.5; } html body .cmplz-blocked-content-notice .cmplz-links a { color: #fff; text-decoration: underline; } html body .cmplz-blocked-content-notice button.cmplz-accept-service { display: inline-block; margin-top: 12px; padding: 10px 18px; background: var(--primary-d, #7CB342); color: #fff; border: 0; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; } /* ── 6. Karta produktu (single) ─────────────────────────────────────────── * „Ocena ☆☆☆☆☆" przy 0 opiniach to szum; wiersz dzieli miejsce ze stepperem. */ html body .sp-rating-row .sp-stars[aria-label*=": 0 /"], html body .sp-rating-row:has(.sp-stars[aria-label*=": 0 /"]) .sp-rating-label { display: none; } /* „Na stanie" dublowało pill „Dostępny — wyślemy w ciągu 24h" wyżej. */ html body .sp-info:has(.sp-avail) p.stock { display: none; } /* SKU był pokazany trzy razy — zostaje karta identyfikacji, znika wpis w meta. */ html body .product_meta .sku_wrapper { display: none; } /* „Kategorie: … maszyn , Części…" — .posted_in było display:flex z gap 8px, * więc przecinek (anonimowy element flex) dostawał odstęp z obu stron. */ html body .product_meta .posted_in, html body .product_meta .tagged_as { display: inline; gap: 0; } html body .product_meta .posted_in a, html body .product_meta .tagged_as a { display: inline; margin: 0; } /* Trzy wtórne CTA WIELKIMI LITERAMI obok głównego przycisku w zdaniu. */ html body .sp-inquiry-btn, html body .sp-negotiate-btn, html body .hbt-raty-submit { text-transform: none; letter-spacing: 0; } @media (min-width: 400px) { html body .sp-inquiry-actions { grid-template-columns: 1fr 1fr; gap: 8px; } } /* ── 7. Konto / formularze ──────────────────────────────────────────────── * Etykieta zgody marketingowej była ściśnięta do ~150 px, bo „(opcjonalne)" * siedziało obok w jednym wierszu flex. Przyciski WC bez wersalików. */ html body .woocommerce-button, html body .woocommerce-Button, html body .woocommerce-form-login__submit { text-transform: none; letter-spacing: 0; } html body p.form-row:has(.gr-marketing-consent-label) { display: block; } html body .gr-marketing-consent-label { display: flex; align-items: flex-start; gap: 10px; width: 100%; font-size: 13px; line-height: 1.45; } html body .gr-marketing-consent-label input { margin-top: 3px; flex: 0 0 auto; } html body p.form-row:has(.gr-marketing-consent-label) .optional { display: inline-block; margin: 6px 0 0 28px; font-size: 12px; color: var(--text-l, #6b6b6b); } /* ── 8. Marka / kategoria / listing ────────────────────────────────────── * Licznik „8204" łamał się na „820 / 4" — odznaka bez nowrap. */ html body .hbt-brand-cat-cnt { white-space: nowrap; flex: 0 0 auto; } html body .hbt-brand-cat-chip { align-items: center; } /* Kafle podkategorii: 3 kolumny po 111 px na 375 px, 4. kafel sam w rzędzie. */ @media (max-width: 479px) { html body .hbt-subcat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } html body p.woocommerce-result-count { margin: 0 0 14px; } /* Kontrast: separator okruszków 3.0:1, aktywny chip 4.1:1 → ≥ 4.5:1. */ html body .hbt-breadcrumb-sep { color: #757575 !important; } html body .hbt-cat-chip.active { background: #4a7a24 !important; } html body .hbt-brand-gpsr-hint { text-align: left; } /* ── 9. Hero stron statycznych i karty branż ───────────────────────────── * „O nas": 220 px ciemnego hero z samym tytułem; karta „Komunalka" z 120 px * pustki (min-height 280 px liczony pod siatkę 4 kolumn, nie pod 1). */ @media (max-width: 767px) { html body .hbt-page-header { min-height: 0; padding: 26px 20px; } html body .industry-card { min-height: 0; } } /* ── 10. Stopka — linki prawne (odbiorca filtra hbt_footer_legal_links) ── */ html body .footer-legal ul { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; } html body .footer-legal a { color: rgba(255, 255, 255, .72); font-size: 12px; text-decoration: none; } html body .footer-legal a:hover, html body .footer-legal a:focus-visible { color: #fff; text-decoration: underline; } /* ── 11. Strona 404 — podpowiedzi produktów ─────────────────────────────── */ html body .hbt-404-suggest { margin: 32px 0 8px; } html body .hbt-404-suggest .hbt-404-menu-title em { font-style: normal; color: var(--primary-d, #7CB342); } html body ul.hbt-404-suggest-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; } @media (min-width: 768px) { html body ul.hbt-404-suggest-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ── 12. 768 px (iPad portret): reguły „mobile" (max-width:768) i „tablet" * (min-width:768) obowiązywały jednocześnie — dolny pasek był ukryty, ale * body trzymało pod niego 64 px paddingu. */ @media (min-width: 768px) and (max-width: 768px) { html body { padding-bottom: 0 !important; } } /* ── WARSTWA KASKADY (@layer) ──────────────────────────────────────────── * Sekcje 13-14 wiążą przyciski, ceny i linki z tokenami Customizera. Same * `!important` nie wystarczały: w legacy-main.css / chrome-vars.css / * shop-fixes.css siedzą 114 reguł typu `color:#fff!important` na selektorach * o specyficzności do (1,9,5) — np. * .hbt-main-wrap ul.products li.product.hbt-loop-card .hbt-loop-card__cta .button * — a reguły z tego pliku mają (0,1,2). Pomiar na żywej stronie potwierdził, * że ANI JEDEN przycisk nie reagował na zmianę --btn-bg/--btn-text, czyli * panel „Kolory → Przyciski" był w praktyce martwy. * * @layer rozwiązuje to bez wojny na specyficzność: dla deklaracji * `!important` kolejność warstw jest ODWRÓCONA — ważna deklaracja w * warstwie bije ważną deklarację spoza warstw NIEZALEŻNIE od * specyficzności. Sprawdzone na hbt.com.pl: reguła w warstwie o * specyficzności (0,1,2) przejmuje kontrolę nad `html body div#id.a.b.c`. * * WARUNEK: wszystko w środku MUSI mieć !important. Deklaracja bez * !important w warstwie jest SŁABSZA niż ta sama poza warstwą — dlatego * reguła .hbt-hero-slide-bg (bez !important) stoi poniżej, poza warstwą. * * Przeglądarki bez @layer (przed 2022) po prostu pomijają cały blok — * degradacja do stanu sprzed zmiany, bez regresji. */ @layer hbt-tokeny { /* ── 13. Przyciski i ceny spięte z tokenami Customizera ────────────────── * Wygląd → Dostosuj → HBT → Kolory → „Przyciski" i „Ceny" istniały od 5.5 * (--btn-bg / --btn-text / --btn-bg-h / --btn-text-h, --price / --price-old), * ale z 27 lokalnych definicji przycisku tylko 7 je czytało — reszta miała * kolory na sztywno (biały na #8BC34A = 2,1:1, cena #7CB342 na białym = 2,5:1; * 105 tekstów poniżej progu na stronie głównej). Tu każdy przycisk główny i * każda cena czyta tokeny, więc kolory zmienia się w panelu wizualnym, a * domyślne (ciemny tekst 8,5:1 na zieleni marki, cena #3F6E1A 5,9:1) przechodzą * WCAG AA bez zmiany koloru marki. Tokeny są drukowane z !important * (customizer-tokens.php @9999), więc wartość z panelu zawsze wygrywa. */ html body .hbt-loop-card__btn, html body .single_add_to_cart_button, html body .hbt-btn-primary, html body .hbt-404-btn-primary, html body .woocommerce-button.button, html body button.button.alt, html body .checkout-button, html body #place_order, html body .hbt-sticky-bar .button, html body .hbt-sticky-bar__btn, html body .hbt-inquiry-submit, html body .hbt-raty-submit, html body .cmplz-blocked-content-notice button.cmplz-accept-service, html body .hbt-mm-kafel--akcent, html body .hbt-newsletter button, html body .hbt-404-search-row button, html body .about-btn, html body .cmplz-btn.cmplz-accept, html body .cmplz-btn.cmplz-manage-consent, /* v8.9.7b — reszta rodziny „zielony przycisk główny", wyłapana pomiarem * na /koszyk/: wszystkie miały biały tekst/ikonę na #8BC34A = 2,10:1. */ html body .nav-cat-trigger, html body .button.wc-backward, html body .btn-go-shop, html body form.site-search button.search-submit, html body .hbt-mobile-search-row form button[type="submit"], html body form.mm-search button[type="submit"], html body .hbt-mobile-hamburger, html body button.btt { background: var(--btn-bg, #8BC34A) !important; color: var(--btn-text, #1A1714) !important; border-color: var(--btn-bg, #8BC34A) !important; } html body .hbt-loop-card__btn i, html body .single_add_to_cart_button i, html body .hbt-btn-primary i, html body .hbt-404-btn-primary i, html body .hbt-sticky-bar .button i, html body .hbt-mm-kafel--akcent strong, html body .hbt-mm-kafel--akcent span, html body .nav-cat-trigger i, html body .nav-cat-trigger span, html body .button.wc-backward i, html body .btn-go-shop i, html body form.site-search button.search-submit i, html body .hbt-mobile-search-row form button[type="submit"] i, html body form.mm-search button[type="submit"] i, html body .hbt-mobile-hamburger i, html body button.btt i { color: inherit !important; } html body .hbt-loop-card__btn:hover, html body .single_add_to_cart_button:hover, html body .hbt-btn-primary:hover, html body .hbt-404-btn-primary:hover, html body .woocommerce-button.button:hover, html body button.button.alt:hover, html body .checkout-button:hover, html body #place_order:hover, html body .hbt-sticky-bar .button:hover, html body .hbt-sticky-bar__btn:hover, html body .hbt-inquiry-submit:hover, html body .hbt-raty-submit:hover, html body .cmplz-blocked-content-notice button.cmplz-accept-service:hover, html body .hbt-mm-kafel--akcent:hover, html body .hbt-newsletter button:hover, html body .hbt-404-search-row button:hover, html body .about-btn:hover, html body .cmplz-btn.cmplz-accept:hover, html body .cmplz-btn.cmplz-manage-consent:hover, html body .nav-cat-trigger:hover, html body .button.wc-backward:hover, html body .btn-go-shop:hover, html body form.site-search button.search-submit:hover, html body .hbt-mobile-search-row form button[type="submit"]:hover, html body form.mm-search button[type="submit"]:hover, html body .hbt-mobile-hamburger:hover, html body button.btt:hover { background: var(--btn-bg-h, #7CB342) !important; color: var(--btn-text-h, #1A1714) !important; border-color: var(--btn-bg-h, #7CB342) !important; } /* Ceny: bieżąca z --price, przekreślona z --price-old. */ html body .hbt-loop-card__price .woocommerce-Price-amount, html body .hbt-loop-card__price ins .woocommerce-Price-amount, html body .sp-price-block .price ins .woocommerce-Price-amount, html body .sp-price-block .price > .woocommerce-Price-amount, html body .summary .price ins .woocommerce-Price-amount, html body .summary .price > .woocommerce-Price-amount, html body .hbt-sticky-bar .price .woocommerce-Price-amount, html body .wishlist_table .price ins .woocommerce-Price-amount, html body .cart .product-price .woocommerce-Price-amount, html body .cart .product-subtotal .woocommerce-Price-amount { color: var(--price, #3F6E1A) !important; } html body .hbt-loop-card__price del .woocommerce-Price-amount, html body .sp-price-block .price del .woocommerce-Price-amount, html body .summary .price del .woocommerce-Price-amount, html body .wishlist_table .price del .woocommerce-Price-amount { color: var(--price-old, #707070) !important; } /* ── 14. Kontrast: pozycje z raportu PSI 2026-09-03 ────────────────────── * Sekcja 13 pokolorowała kwoty z tokenów, ale WooCommerce owija symbol * waluty w OSOBNY wewnątrz * , a ten miał własny kolor #7CB342 — w efekcie „690,37" było * ciemnozielone, a stojące obok „zł" jasnozielone (2,50:1, dwa odcienie * w jednej cenie). Symbol dziedziczy teraz kolor kwoty. * Pozostałe trzy pozycje to zieleń marki i szarości użyte jako kolor tekstu * poniżej progu WCAG AA — zmieniamy na tokeny, które próg spełniają. */ html body .woocommerce-Price-amount .woocommerce-Price-currencySymbol, html body .woocommerce-Price-amount bdi, html body ins .woocommerce-Price-currencySymbol, html body del .woocommerce-Price-currencySymbol { color: inherit !important; } /* Link w opisie SEO stopki: #7CB342 = 2,50:1 → token --link (5,93:1) */ html body .hbt-fd-body a, html body .hbt-fd-body p a { color: var(--link, #3F6E1A) !important; } /* „Czytaj dalej" w kartach bloga: #558B2F przy 13 px = 4,10:1 (próg 4,5) */ html body .blog-link, html body .hbt-blog-card-more, html body .hbt-post-cat, html body .hbt-blog-card-cat, html body .blog-all-btn { color: var(--link, #3F6E1A) !important; } /* Podpisy metod płatności w stopce: #888 na #3D3936 = 4,13:1. * UWAGA na kaskadę: shop-fixes.css ma `.hbt-footer span:not([class])` * z `color: inherit !important`. `:not([class])` liczy się jak atrybut, * więc tamten selektor ma (0,2,1) i bije `html body .payment-icons span` * (0,1,2) — spany dziedziczyły #888 z rodzica mimo !important. * Dlatego kolorujemy JEDNOCZEŚNIE rodzica (ikony , 18 px = próg 4,5:1) * i spany, selektorem (0,2,3). #C4C4C4 to ten sam szary, którego stopka * używa już dla `.footer-bottom p`. */ html body .hbt-footer .payment-icons, html body .hbt-footer .payment-icons span, html body .hbt-footer .payment-icons i, html body .footer-bottom .payment-icons, html body .footer-bottom .payment-icons span, html body .footer-bottom .payment-icons i { color: #C4C4C4 !important; } } /* koniec @layer hbt-tokeny */ /* Hero: punkt kadrowania z ustawień slajdu (style="object-position" na ). * POZA warstwą — nie ma !important. */ html body .hbt-hero-slide-bg { object-fit: cover; } /* ── 15. .screen-reader-text — brakująca klasa bazowa ──────────────────── * Motyw używa `class="screen-reader-text"` w kilkunastu miejscach (H1 strony * głównej, przedrostek „Koszyk:", etykiety pól szukania i newslettera), ale * NIGDZIE nie definiował tej klasy. Przychodziła z arkuszy WordPressa * i WooCommerce, a legacy/perf-fixes.php usuwa OBA źródła naraz: * wp_dequeue_style('woocommerce-general') — gdy strona nie jest stroną WC * wp_dequeue_style('wp-block-library') — gdy !is_singular() || !has_blocks() * Strona główna spełnia oba warunki, więc klasa zostaje bez definicji * i elementy renderują się normalnie: H1 32 px nad sliderem, „Koszyk:” * w przycisku koszyka, „Szukaj produktu”, „Twój adres e-mail”. * Dowód: ten sam span na /sklep/ ma position:absolute i clip:rect(1px…), * bo tam arkusz WooCommerce zostaje; na / ma position:static i clip:auto. * * To także wyjaśnia pięć wąskich łatek, które narosły w motywie na objawy * tego samego braku (m.in. `.hbt-loop-card__price .screen-reader-text * {display:none}` w effects.css, opisane jako „bug iOS Safari” — właściwości * się nie „nie aplikowały”, ich po prostu nie było). Te łatki zostają: * używają display/visibility, więc nie kolidują z regułą poniżej. * * Reguła stoi POZA @layer hbt-tokeny — warstwa jest zarezerwowana dla * kolorów z Customizera. Wariant :focus ma wyższą specyficzność (0,2,0), * więc odsłania element przy nawigacji klawiaturą mimo !important wyżej. */ .screen-reader-text { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; border: 0 !important; overflow: hidden !important; clip: rect(1px, 1px, 1px, 1px) !important; clip-path: inset(50%) !important; white-space: nowrap !important; word-wrap: normal !important; } .screen-reader-text:focus { position: absolute !important; top: 8px !important; left: 8px !important; width: auto !important; height: auto !important; padding: 12px 20px !important; overflow: visible !important; clip: auto !important; clip-path: none !important; display: block !important; background: #FFFFFF !important; color: #1A1714 !important; font-size: 1rem !important; line-height: normal !important; text-decoration: none !important; z-index: 100000 !important; }