/* >>> isa-design-system | odcisk b65a9eca6ff8 >>> Generowane przez `npm run gen-wp-sklepy`. NIE EDYTUJ TEGO PLIKU — edytuj docs/wordpress-sklepy/warstwy/ i uruchom generator ponownie. Cofnięcie na produkcji: dezaktywacja wtyczki isa-design-system. */ /* --- tokeny: WYPROWADZONE z src/styles/global.css, nie edytuj tutaj --- */ body.isa-ds { --isa-red: #cb092a; --isa-red-dark: #cb092a; --isa-red-darker: #a8071f; --isa-red-soft: #ffe3e8; --isa-red-ink: #cb092a; --error-ink: #cb092a; --success-ink: #177349; --ink: #0a0a0a; --ink-2: #1d1d1f; --ink-3: #424245; --ink-4: #61616b; --line: #d2d2d7; --line-2: #e8e8ed; --bg: #ffffff; --bg-2: #f5f5f7; --bg-3: #fbfbfd; --always-dark: #0a0a0a; --always-dark-2: #1d1d1f; --always-dark-ink: #f5f5f7; --always-dark-ink-muted: #98989d; --always-dark-line: #2c2c2e; --always-dark-red: #ff4d68; --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --maxw: 1280px; --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --siatka-kolor: #d2d2d7; --siatka-skok: 18px; --track-fe: #e66b1a; /* most do palety Kadence — komponenty motywu idą za naszymi kolorami bez ani jednej naszej reguły (MAPA_PALETY w scripts/gen-wp-sklepy.mjs) */ --global-palette1: var(--isa-red); /* akcent marki — jedyna pozycja zgodna na obu sklepach przed zmianą */ --global-palette2: var(--isa-red-darker); /* drugi akcent; zastępuje fiolet #7400fc (.com) i granat #215387 (.online) */ --global-palette3: var(--ink); /* najciemniejszy — nagłówki */ --global-palette4: var(--ink-2); /* ciemny — tekst wyróżniony */ --global-palette5: var(--ink-3); /* tekst pomocniczy; to on malował linki menu na .com */ --global-palette6: var(--ink-4); /* tekst wyciszony */ --global-palette7: var(--bg-2); /* tło pomocnicze / karty */ --global-palette8: var(--bg-3); /* tło jaśniejsze */ --global-palette9: var(--bg); /* biel; na .com było #efefef i służyło za kolor tekstu na czerwonym przycisku */ } /* ===== 05-most-kadence.css ===== */ /* Most do motywu: to, czego przedefiniowanie palety nie łapie. * * Paleta (MAPA_PALETY w generatorze) obsługuje komponenty, które czytają --global-palette*. * Zostają trzy miejsca, gdzie Kadence trzyma kolor poza paletą — zmierzone * w docs/wordpress-sklepy/pomiar-startowy.md §1. */ /* Tło strony: SZARE, kafle BIAŁE — decyzja właściciela 2026-09-15. * * To jest świadome odstępstwo od serwisu, który ma odwrotnie (białe tło, kafle na --bg-2). * Powód jest funkcjonalny, nie estetyczny: sklep to siatka kafli produktów, a białe kafle * na szarym tle same rysują swoje granice. Pierwsza wersja szła za serwisem i właściciel * zgłosił, że kafle zniknęły — bo białe na białym odcina już tylko włosowa ramka. * * Zmierzone wartosci zastane: #efefef (.com wszędzie), #F7FAFC (.online produkt i koszyk), * #ededed (.online archiwum, spoza palety). Zastępuje je jeden token. */ body.isa-ds { background-color: var(--bg-2); color: var(--ink); } body.isa-ds.post-type-archive-product, body.isa-ds.tax-product_cat { background-color: var(--bg-2); } /* Kontener treści: szerokość systemu zamiast domyślnej motywu. */ body.isa-ds .content-container, body.isa-ds .site-container { max-width: var(--maxw); } /* Linki w treści — Kadence maluje je paletą 5 (tekst pomocniczy), więc po zmapowaniu * wyszłyby szare. W systemie link w treści jest czerwienią tekstową. */ body.isa-ds .entry-content a:not(.button):not(.wp-block-button__link) { color: var(--isa-red-ink); text-underline-offset: 2px; } body.isa-ds .entry-content a:not(.button):not(.wp-block-button__link):hover { color: var(--isa-red-darker); } /* Obramowania i separatory motywu na token linii. */ body.isa-ds hr, body.isa-ds .entry-content hr { border-color: var(--line-2); } /* ===== 10-typografia.css ===== */ /* Typografia systemu na sklepie. * * Stan zastany (pomiar-startowy.md §2): rodzina jest już wspólna (Poppins, self-host), * ale reszta nie. Trzy z czterech zmierzonych h1 mają wagę 400, wszystkie nagłówki mają * letter-spacing `normal`, a body 16px na .com wobec 17px na .online. * System serwisu: body 17px/1.5/-0.01em, nagłówki 700/-0.035em/1.12. * * Skali `clamp()` nie przenosimy w wersji landingowej (`.t-display` sięga 92 px) — sklep * to strona zadaniowa, nie okładka. Bierzemy trzy dolne stopnie skali. */ /* Interlinia 1,5 — dokładnie jak `body` serwisu. * * ⚠️ WYCOFANE ODSTĘPSTWO. Stało tu 1,6 z uzasadnieniem „sklep ma długie opisy w kolumnie * zwężonej przez sidebar, więc gęstszy skład czyta się gorzej". Uzasadnienie było * ODWRÓCONE: interlinię dobiera się do DŁUGOŚCI WIERSZA i to długi wiersz wymaga większego * odstępu, żeby oko trafiło w początek następnego. Wąska kolumna potrzebuje MNIEJSZEJ * interlinii, nie większej — argument przemawiał więc za 1,5, a wyciągnięto z niego 1,6. * * Do tego reguła `max-width: 68ch` niżej i tak trzyma wiersz w zakresie czytelnym, czyli * przesłanka o „długich opisach" nie opisuje stanu faktycznego tego arkusza. * * Rozjazd zmierzony 2026-09-15 porównaniem wyliczonych stylów obu serwisów: body sklepu * 27,2 px wobec 25,5 px na Astro przy identycznym 17 px i tej samej rodzinie. Żadna bramka * go nie widziała, bo obie strony są poprawne każda z osobna — rozjazd istnieje wyłącznie * MIĘDZY nimi, a sklep ma być przedłużeniem serwisu, nie jego wariantem. */ body.isa-ds { font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 17px; line-height: 1.5; letter-spacing: -0.01em; } /* Akapity w treści dostają górną granicę długości wiersza. Bez niej opis produktu * na 1440 px biegnie przez całą szerokość kontenera — ok. 120 znaków w wierszu, dwa razy * więcej niż zakres czytelny (45-75). */ body.isa-ds .entry-content p, body.isa-ds .woocommerce-product-details__short-description p { max-width: 68ch; } /* Nagłówki — skala serwisu, wiązana z ROZMIAREM, nie z poziomem znacznika. * * Serwis ma cztery stopnie i w każdym tracking oraz interlinia zależą od stopnia: * .t-display 92px −0,045em 1,08 * .t-h1 72px −0,035em 1,10 * .t-h2 48px −0,030em 1,12 * .t-h3 30px −0,020em 1,18 * Im większy stopień, tym ciaśniej — bo przy dużym piśmie odstępy optycznie rosną. * `.t-display` i `.t-h1` pomijamy: sklep to strona zadaniowa, nie okładka; największy * stopień na sklepie to 48 px, czyli odpowiednik `.t-h2`. * * ⚠️ POPRZEDNIA WERSJA SKLEJAŁA h1 Z h2 W JEDEN STOPIEŃ i przez to przeczyła sama sobie: * `body.isa-ds h1, body.isa-ds h2` deklarowało −0,035em, a stojąca niżej reguła * `body.isa-ds .page-title` −0,030em i to ona wygrywała kaskadę. Zmierzone po `cssRules` * 2026-09-15: na h1 archiwum trafiały obie moje reguły, wynik −1,44 px przy 48 px. * Wartość wychodziła poprawna PRZYPADKIEM — przez kolejność, nie przez zamysł. Dwie własne * reguły mówiące o tym samym elemencie co innego to defekt nawet wtedy, gdy wynik się zgadza, * bo znika przy pierwszej zmianie kolejności warstw. * * Teraz stopień przypisuje się do rozmiaru, a nie do znacznika: h2 o 33 px dostaje stopień * `.t-h3`, a nie ten sam co h1 o 48 px. */ body.isa-ds h1, body.isa-ds h2, body.isa-ds h3, body.isa-ds h4 { font-weight: 700; color: var(--ink); text-wrap: balance; } /* Stopień 48 px — odpowiednik .t-h2 serwisu. */ body.isa-ds h1 { letter-spacing: -0.03em; line-height: 1.12; } /* Stopień 30–33 px — odpowiednik .t-h3. h2 na sklepie mierzy 33 px (zmierzone na karcie * produktu), więc należy tu, a nie do stopnia h1. */ body.isa-ds h2 { letter-spacing: -0.02em; line-height: 1.18; } /* Poniżej skali serwisu: h3 i h4 schodzą ku wartościom tekstu ciągłego. Interlinia luźniejsza * niż 1,18 jest tu celowa — te nagłówki w sklepie regularnie łamią się na dwie linie. */ body.isa-ds h3, body.isa-ds h4 { letter-spacing: -0.015em; line-height: 1.3; } /* Odstęp nad nagłówkiem większy niż pod nim — nagłówek należy do tekstu POD sobą. * Bez tej pary Kadence daje symetryczne marginesy i sekcje zlewają się w jedną płachtę. */ body.isa-ds .entry-content h2, body.isa-ds .entry-content h3 { margin-top: 1.8em; margin-bottom: 0.6em; } /* Tytuł strony/archiwum — stopień .t-h2 serwisu (48 px), ten sam co h1 wyżej. * * Interlinia podana JAWNIE, choć powtarza wartość z reguły h1. To nie jest nadmiar: * zmierzone 2026-09-15 — `.page-title` i `.entry-title` dawały 1,15, a `.product_title` * 1,12, czyli dwa tytuły tego samego stopnia na sąsiednich stronach sklepu miały różną * interlinię. Brało się to stąd, że tylko jedna z trzech reguł ją ustawiała, a reszta * dziedziczyła z ogólnego h1. */ body.isa-ds .entry-title, body.isa-ds .page-title, body.isa-ds h1.entry-title { font-size: clamp(30px, 3.4vw, 48px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; } /* Tytuł produktu. * * Kadence ma dla niego regułę `.woocommerce div.product .product_title{font-weight:600}` * o specyficzności (0,3,1) — bije `body.isa-ds .product_title` (0,2,1). Zmierzone * dochodzeniem po `cssRules` 2026-09-15: w h1 na karcie produktu trafiają dokładnie dwie * reguły wagi — `h1{800}` Kadence i ta Woo z 600, i to ona wygrywa. * * Powtarzamy jej kształt z prefiksem zasięgu (0,4,2) zamiast sięgać po !important — * ten sam chwyt co program-b2b.css na obcym motywie. * * ⚠️ Pierwsza wersja celowała w `.elementor-widget-woocommerce-product-title` i nie * trafiała w nic: widget nazywa się `single-product-title`, a sam tytuł i tak nosi * zwykłe klasy Woo. Elementor nie miał z tym nic wspolnego. */ body.isa-ds .product_title, body.isa-ds.single-product .entry-title, body.isa-ds .woocommerce div.product .product_title, body.isa-ds div.product .product_title { font-size: clamp(30px, 3.4vw, 48px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; color: var(--ink); } body.isa-ds h2 { font-size: clamp(23px, 2.4vw, 33px); letter-spacing: -0.03em; } body.isa-ds h3 { font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.02em; } /* Krótki opis produktu pełni rolę leadu. */ body.isa-ds .woocommerce-product-details__short-description { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.45; letter-spacing: -0.015em; color: var(--ink-3); } /* Tekst drobny i pomocniczy. */ body.isa-ds .woocommerce-result-count, body.isa-ds .product_meta, body.isa-ds .woocommerce-breadcrumb { font-size: 14px; color: var(--ink-4); letter-spacing: 0; } /* Okruszki: cel dotykowy 24 px wg WCAG 2.5.8 — ta sama reguła co .okruszki w serwisie. */ body.isa-ds .woocommerce-breadcrumb a { display: inline-flex; align-items: center; min-height: 24px; color: var(--ink-3); } body.isa-ds .woocommerce-breadcrumb a:hover { color: var(--isa-red-ink); } /* Cena. W serwisie cena jest jednym z dwóch miejsc z wagą 700 poza nagłówkami * (.cd-price: 40px/700/-0.03em), a cena przekreślona jest wyciszona, nie czerwona. */ body.isa-ds .woocommerce-Price-amount { font-weight: 700; letter-spacing: -0.03em; color: var(--ink); } body.isa-ds del .woocommerce-Price-amount, body.isa-ds del { font-weight: 500; color: var(--ink-4); letter-spacing: 0; } body.isa-ds ins { text-decoration: none; } body.isa-ds.single-product p.price .woocommerce-Price-amount { font-size: 40px; } /* Kwota na listingu: 18 px, nie 20. * * Przy 20 px w kafelku trzykolumnowej siatki para „990,00 zl" + „z VAT" nie mieściła się * w jednym wierszu i dopisek spadał pod kwotę — złapane na zrzucie porównawczym. * Dodatkowo sama kwota nie może się łamać w środku. */ body.isa-ds ul.products li.product .price .woocommerce-Price-amount { font-size: 18px; white-space: nowrap; } /* Przy przecenie w kaflu stoją obok siebie DWIE kwoty i sufiks „z VAT". Przy 18 px na * kazdej „z VAT" spadal do drugiej linii (zlapane na zrzucie 2026-09-15). Kwota przekreslona * i sufiks są podrzędne wobec ceny aktualnej — mniejsze zwalniają miejsce i cała fraza * mieści się w jednym wierszu, a hierarchia staje się czytelniejsza. */ body.isa-ds ul.products li.product .price del, body.isa-ds ul.products li.product .price del .woocommerce-Price-amount { font-size: 14px; } body.isa-ds ul.products li.product .price .woocommerce-price-suffix { font-size: 13px; color: var(--ink-4); white-space: nowrap; } /* Odstępy w bloku ceny. Zmierzone na żywo na .online 2026-09-15 — obie wartości brały się * z samej spacji tekstowej w znaczniku, bez żadnego marginesu, więc nie skalowały się * ze stopniem pisma i przy dużych kwotach znikały: * · strona produktu: `del` → `ins` 5,5 px przy kwocie 40 px — litera „ł" ceny przekreślonej * dotykała pierwszej cyfry ceny aktualnej (reguła `margin-right` istniała WYŁĄCZNIE * dla kafla listingu, `ul.products li.product .price del`, i nie obejmowała produktu); * · listing i produkt: `ins` → sufiks 2,7 px przy kwocie 18 px/700 — czytało się „złbrutto". * Odstęp daje margines, nie spacja: `.woocommerce-Price-amount` ma `letter-spacing: -0.03em` * i wagę 700, które dodatkowo zjadają światło między znakami. */ body.isa-ds .summary p.price del, body.isa-ds div.product p.price del { margin-right: 14px; } /* Cena przekreślona na stronie produktu: 24 px, nie 40. * * ⚠️ Marginesy wyżej trzeba było czymś opłacić. Blok ceny na produkcie ma 407,8 px treści * (del 190,7 + ins 166,1 + sufiks 51) przy kolumnie 378–438 px na dużych szerokościach — * czyli mieścił się zapasem 12,7 px, a +20 px marginesów zrzuciło „brutto" do drugiej linii * na 900 / 1024 / 1440 px (zmierzone na żywo zaraz po wgraniu). Zmniejszenie kwoty * przekreślonej zwalnia ~76 px i przywraca jeden wiersz z zapasem 26,7 px, a przy okazji * daje tę samą hierarchię co w kaflu: cena aktualna dominuje, poprzednia jest podrzędna. * * ⚠️ Na 375 i 768 px fraza łamie się NADAL (kolumna 311–315 px < 351 px) — to stan ZASTANY, * nie skutek tych reguł: przy zapasie 5,5 px sufiks spadał tam do drugiej linii również * przed zmianą. Zejście w jeden wiersz na telefonie wymaga zmniejszenia ceny AKTUALNEJ * poniżej 40 px, czyli decyzji o typografii, nie poprawki odstępu. */ body.isa-ds.single-product p.price del .woocommerce-Price-amount, body.isa-ds.single-product p.price del { font-size: 24px; } body.isa-ds .price .woocommerce-price-suffix { margin-left: 6px; } /* Informacja Omnibus o najniższej cenie z 30 dni. Na .online wtyczka Simple Custom CSS * malowała ją czystą czerwienią 14 px — to komunikat prawny, nie alarm. */ body.isa-ds .iworks-omnibus { font-size: 13px; font-weight: 400; color: var(--ink-4); letter-spacing: 0; } /* ===== 20-przyciski-formularze.css ===== */ /* Przyciski i pola formularzy. * * Stan zastany (pomiar-startowy.md §3): SZEŚĆ różnych przycisków „dodaj do koszyka" * w jednej marce — wysokości 30/40/43/46/50 px, promienie 100 i 120 px, dwa kolory tekstu * (#ffffff i #efefef), wagi 400 i 700. * * Najgorszy przypadek: na archiwum .com Kadence renderuje CTA w trybie * `woo-archive-btn-text` — przezroczyste tło, fioletowy tekst, 30 px wysokości. Główne * wezwanie do zakupu na liście kursów nie wygląda tam jak przycisk. * * System: .btn = 48 px, promień 999 px, waga 500, 15 px, ls -0.01em, hover z uniesieniem * o 1 px i cieniem w kolorze marki. */ body.isa-ds .button, body.isa-ds .wp-block-button__link, body.isa-ds .add_to_cart_button, body.isa-ds .single_add_to_cart_button, body.isa-ds .checkout-button, body.isa-ds input[type="submit"], body.isa-ds button[type="submit"] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--isa-red-dark); color: #fff; font-family: inherit; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; text-align: center; text-decoration: none; /* ⚠️ `normal`, nie `nowrap`. Zmierzone 2026-09-16 na .com przy 601 px: `nowrap` w parze * z `max-width: 100%` to sprzeczne polecenia — „nie łam" i „nie wychodź poza rodzica" * naraz. Przeglądarka wykonuje oba i przycina napis: `clientWidth` 101 przy `scrollWidth` * 117, na ekranie „YBIERZ OPC" zamiast „WYBIERZ OPCJĘ”. Przycisk, który się nie mieści, * ma się ZŁAMAĆ, nie stracić litery — złamany jest tylko wyższy, ucięty kłamie. */ white-space: normal; max-width: 100%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.22s var(--ease), box-shadow 0.25s; } body.isa-ds .button:hover, body.isa-ds .wp-block-button__link:hover, body.isa-ds .add_to_cart_button:hover, body.isa-ds .single_add_to_cart_button:hover, body.isa-ds .checkout-button:hover, body.isa-ds input[type="submit"]:hover, body.isa-ds button[type="submit"]:hover { background: var(--isa-red-darker); color: #fff; transform: translateY(-1px); box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--isa-red) 72%, transparent); } body.isa-ds .button:active, body.isa-ds .add_to_cart_button:active, body.isa-ds .single_add_to_cart_button:active, body.isa-ds .checkout-button:active { transform: translateY(0) scale(0.97); } /* Widoczna obwódka fokusu. Kadence zdejmuje `outline` na przyciskach Woo, a bez niej * ścieżka zakupu jest nieprzechodnia z klawiatury (WCAG 2.4.7). */ body.isa-ds .button:focus-visible, body.isa-ds .add_to_cart_button:focus-visible, body.isa-ds .single_add_to_cart_button:focus-visible, body.isa-ds .checkout-button:focus-visible, body.isa-ds input[type="submit"]:focus-visible, body.isa-ds button[type="submit"]:focus-visible, body.isa-ds a:focus-visible, body.isa-ds input:focus-visible, body.isa-ds select:focus-visible, body.isa-ds textarea:focus-visible { outline: 2px solid var(--isa-red); outline-offset: 2px; } /* Przycisk wtórny — „wróć do sklepu", „zaktualizuj koszyk". W systemie to .btn-outline. */ body.isa-ds .button.wc-backward, body.isa-ds button[name="update_cart"], body.isa-ds .woocommerce-message .button, body.isa-ds .woocommerce-info .button { background: transparent; border: 1px solid var(--line); color: var(--ink); } body.isa-ds .button.wc-backward:hover, body.isa-ds button[name="update_cart"]:hover, body.isa-ds .woocommerce-message .button:hover, body.isa-ds .woocommerce-info .button:hover { background: transparent; border-color: var(--ink); color: var(--ink); box-shadow: none; } /* Przycisk nieaktywny — Woo wyłącza „zaktualizuj koszyk", dopóki nic nie zmieniono. */ body.isa-ds .button:disabled, body.isa-ds .button[disabled], body.isa-ds button[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; } /* CTA na listingu. Kadence ma tam wariant „przycisk jako tekst" — na .com właśnie tak * wyglądało jedyne wezwanie do zakupu na liście kursów. */ body.isa-ds ul.products li.product .button, body.isa-ds .woo-archive-btn-text ul.products li.product .button { background: var(--isa-red-dark); color: #fff; font-size: 16px; padding: 0 20px; } /* Wąskie ekrany: przycisk może się złamać, zamiast wyjechać poza kadr. * Ta sama reguła co @max-400px w systemie. */ @media (max-width: 400px) { body.isa-ds .button, body.isa-ds .add_to_cart_button, body.isa-ds .single_add_to_cart_button, body.isa-ds .checkout-button { white-space: normal; height: auto; padding-block: 10px; overflow-wrap: anywhere; } } /* --- Pola formularzy (Field.astro: h48, promień 32 px, ramka --line, fokus --ink) --- */ body.isa-ds input[type="text"], body.isa-ds input[type="email"], body.isa-ds input[type="tel"], body.isa-ds input[type="number"], body.isa-ds input[type="password"], body.isa-ds input[type="search"], body.isa-ds input[type="url"], body.isa-ds select, body.isa-ds textarea, body.isa-ds .select2-container .select2-selection--single { min-height: 48px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--bg); color: var(--ink); font-family: inherit; font-size: 16px; letter-spacing: -0.01em; transition: border-color 0.2s; } body.isa-ds textarea { min-height: 120px; padding: 14px 16px; line-height: 1.6; } body.isa-ds input:hover, body.isa-ds select:hover, body.isa-ds textarea:hover { border-color: var(--ink-3); } body.isa-ds input:focus, body.isa-ds select:focus, body.isa-ds textarea:focus { border-color: var(--ink); } body.isa-ds ::placeholder { color: var(--ink-4); } /* Etykiety pól — w systemie 12 px, wersaliki, rozstrzelone, --ink-4. */ body.isa-ds .woocommerce form .form-row label, body.isa-ds .woocommerce-billing-fields label { font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-4); } body.isa-ds .required { color: var(--isa-red-ink); text-decoration: none; } /* Cel dotykowy zgód wg WCAG 2.5.8 — ta sama wartość co .zgoda-pole w serwisie. */ body.isa-ds input[type="checkbox"], body.isa-ds input[type="radio"] { width: 24px; height: 24px; accent-color: var(--isa-red-dark); } /* Komunikaty Woo — kolory semantyczne systemu zamiast domyślnej zieleni motywu. */ body.isa-ds .woocommerce-message, body.isa-ds .woocommerce-info, body.isa-ds .woocommerce-error { border-radius: var(--r-md); border: 1px solid var(--line-2); border-top-width: 2px; background: var(--bg-2); color: var(--ink-2); font-size: 15px; } body.isa-ds .woocommerce-message { border-top-color: var(--success-ink); } body.isa-ds .woocommerce-info { border-top-color: var(--ink-3); } body.isa-ds .woocommerce-error { border-top-color: var(--error-ink); color: var(--error-ink); } /* ⚠️ Selektora `.woocommerce ul.products` NIE zakladamy jako ścieżki. * * Zmierzone 2026-09-15 przez `element.matches()` na żywym `.online`: kontener `.woocommerce` * NIE jest tam przodkiem `ul.products`, więc cały człon nie trafiał w nic i przycisk zostawał * przy promieniu 120 px mimo pozornie wyższej specyficzności. Reguły pisane "na oko" z wiedzy * o WooCommerce chybiają na Kadence. * * Wariant działający: `body.isa-ds.isa-ds ul.products li.product .product-action-wrap .button` * (0,6,3) bije `.woocommerce ul.products.woo-archive-btn-button .product-action-wrap .button` * (0,6,1). Warianty z `.woocommerce` zostają na wypadek innej struktury, ale nie liczymy na nie. */ /* --- Podbicie specyficzności: trzy reguły Kadence, które biją blok wyżej --- * * Zmierzone 2026-09-15 dochodzeniem po `cssRules` na żywych stronach (nie z dokumentacji * motywu). Każda pozycja niesie regułę, którą pokonuje, i jej wagę: * * 1. `.woocommerce ul.products:not(.woo-archive-btn-button) li:where(…) .button:not(.kb-button)` * (0,5,2) ustawia `display:inline`. To nie jest kosmetyka: element `inline` IGNORUJE * `min-height`, więc przycisk na archiwum .com miał 33 px mimo `min-height:48px`. * 2. `.kadence-cart-button-medium-large.woocommerce div.product .button.single_add_to_cart_button` * (0,6,1) ustawia `height:50px` — a `height` bije `min-height` niezależnie od wagi. * 3. `.woocommerce ul.products.woo-archive-btn-button .product-action-wrap .button:not(.kb-button)` * (0,6,1) ustawia `border-radius:120px` (tylko .online). * * Podbijamy powtórzeniem klasy zasięgu (`body.isa-ds.isa-ds`), nie `!important` — budżet * wyjątków pilnuje reguła R7 strażnika i startuje z zerem. */ body.isa-ds.isa-ds ul.products li.product .product-action-wrap .button, body.isa-ds.isa-ds ul.products li.product .button, body.isa-ds.isa-ds .woocommerce ul.products li.product .button { display: inline-flex; align-items: center; justify-content: center; height: 48px; min-height: 48px; border-radius: 999px; line-height: 1.2; padding: 0 20px; /* Stopień pisma MUSI być tutaj: Kadence ma dla CTA listingu regułę `font-size: 80%` * o specyficzności (0,5,2), która biła deklarację z bloku bazowego — zmierzone 13,6 px * zamiast żądanych 14. */ font-size: 16px; font-weight: 600; /* Odstępu między tekstem a ikoną NIE dajemy przez `gap`. Kadence wstawia do przycisku * TRZY elementy `.kadence-svg-iconset` (strzalka, spinner, ptaszek), z których widoczny * jest jeden, a dwa mają zero szerokości — ale `gap` dolicza się do KAŻDEGO. Zmierzone: * tekst 18 px od lewej krawędzi i 62 px od prawej, czyli wizualnie przyklejony do lewej * przy poprawnym `justify-content: center`. */ gap: 0; /* Tlo i kolor MUSZĄ być tutaj, nie tylko w bloku bazowym: Kadence maluje CTA listingu * własną regułą o tej samej klasie specyficzności. Bez tego przycisk miał poprawną * wysokość i promien, a zostawał gołym tekstem — czyli asercje na wymiarach przechodziły, * a wezwanie do zakupu dalej nie wyglądało jak przycisk (złapane na zrzucie 2026-09-15). */ background: var(--isa-red-dark); color: #fff; font-weight: 500; } body.isa-ds.isa-ds ul.products li.product .product-action-wrap .button:hover, body.isa-ds.isa-ds ul.products li.product .button:hover { background: var(--isa-red-darker); color: #fff; } body.isa-ds.isa-ds .woocommerce div.product .button.single_add_to_cart_button, body.isa-ds.isa-ds div.product .button.single_add_to_cart_button { height: 48px; min-height: 48px; line-height: 1.2; border-radius: 999px; padding: 0 22px; } /* Ikony stanu w CTA listingu — zdjęte z przepływu. * * Kadence renderuje w przycisku trzy ``: strzałkę, * spinner ładowania i ptaszek potwierdzenia. Widoczny jest zawsze jeden, ale wszystkie * trzy liczą się do układu flex — a `gap` dolicza się także do tych o zerowej szerokości. * Zmierzone przed zmianą: tekst 18 px od lewej i 62 px od prawej, przy poprawnym * `justify-content: center`. */ body.isa-ds.isa-ds ul.products li.product .button { position: relative; } body.isa-ds.isa-ds ul.products li.product .button .kadence-svg-iconset { display: none; } /* ⚠️ Strzałkę na CTA listingu USUWAMY, nie przesuwamy. * * Przymiarka pośrednia stawiała ją jako element absolutny przy prawej krawędzi * (`right: 14px`) z symetrycznym padding 40/40. Zmierzone na zrzucie: przy tekście * „Wybierz opcje" i kafelku szerokości ok. 160 px strzałka NACHODZIŁA NA OSTATNIĄ LITERĘ — * bo tekst jest środkowany względem całej szerokości, a strzałka stoi poza tym rachunkiem. * * Do wyboru były trzy drogi i tylko jedna spełnia prośbę „bardziej wycentrowane": * asymetryczny padding (tekst przestaje być na środku), węższy tekst (łamie się na dwie * linie w kafelku), albo zdjęcie strzałki. Strzałka nie niosła informacji — przycisk * w kafelku produktu i tak jest jednoznaczny — więc znika ona, a nie środek. */ body.isa-ds.isa-ds ul.products li.product .button { padding-right: 22px; padding-left: 22px; } /* Pole wyboru potrzebuje miejsca na strzalke. * * Regula ogolna dla pol daje `padding: 0 16px`, ale `select` rysuje wlasna strzalke po * prawej — przy 16 px tekst wchodzi pod nia. Zmierzone na dropdownie kategorii: * `padding-right: 0px`, `appearance: none` (Kadence zdejmuje natywny wyglad i podklada * wlasna ikone w tle). Dajemy 40 px z prawej i zostawiamy ikone motywu w spokoju. */ body.isa-ds select { padding-right: 40px; } /* Pole szukania wewnatrz rozwijanej listy (Select2) NIE jest pastylka — to pole w kadrze * dropdownu, gdzie promien 32 px wyglada jak balon. */ body.isa-ds .select2-container .select2-search__field, body.isa-ds .select2-dropdown input { border-radius: var(--r-sm); min-height: 40px; padding: 0 12px; } /* ===== 30-listing-produkt.css ===== */ /* Listing kursów i karta produktu. * * Odpowiednik `.card-tile` z serwisu (87 użyć): tło --bg-2, ramka jako `inset box-shadow` * zamiast `border` (żeby nie dokładać 2 px do wymiarów), promień 32 px, uniesienie o 4 px * przy najechaniu, zdjęcie powiększane do 1,04. * * Powód, dla którego ta warstwa musi iść razem z tłem: po zmianie tła strony na biel * karty produktów zniknęły — wcześniej odcinały się bielą od szarego #efefef. Widoczne * na zrzucie porównawczym 2026-09-15. */ /* --- Kafel produktu --- */ /* Kafel MUSI odcinac sie od tla NIEZALEZNIE od tego, co pod nim lezy. * * Zmierzone na ZYWEJ stronie 2026-09-15 (wtyczka aktywna na .online): na listingu kafel * bialy na tle --bg-2 mial roznice jasnosci 9,3 i byl widoczny; w sekcji „Podobne produkty" * na karcie produktu roznica wynosila ZERO — bo tresc karty siedzi na BIALEJ plycie motywu, * wiec bialy kafel na bialym tle znikal. Zgloszenie wlasciciela: „zlewaja sie boxy z tlem". * * Ramka idzie na --line (wyrazniejsza), nie --line-2, ktora gubi sie na bieli. Kafel * przestaje zalezec od kontekstu — to wazniejsze niz subtelnosc ramki. * * ⚠️ Poprzednia asercja tego NIE zlapala, bo porownywala kafel z tlem BODY, a nie z realnym * rodzicem — cel swiecil na zielono przy widocznym bugu. */ body.isa-ds ul.products li.product { background: var(--bg); border-radius: var(--r-xl); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; transition: transform 0.22s var(--ease), box-shadow 0.25s; } body.isa-ds ul.products li.product:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line), 0 24px 50px -26px rgba(0, 0, 0, 0.3); } body.isa-ds ul.products li.product img { transition: transform 0.5s var(--ease); } body.isa-ds ul.products li.product:hover img { transform: scale(1.04); } /* Kadence rozdziela kafel na obrazek i `.product-details` — wnętrze dostaje oddech * systemu, a nie domyślny motywu. */ body.isa-ds ul.products li.product .product-details, body.isa-ds ul.products li.product .entry-content-wrap { padding: 20px; background: transparent; } /* Kafle w wierszu kończyły się na różnych wysokościach, bo tytuł jednego łamie się * w dwie linie. Kolumna z akcją dosuwana do dołu wyrównuje przyciski w jednej linii — * ta sama zasada co stopka `.card-tile` w serwisie. * * ODSTĘPY SĄ USTANDARYZOWANE — `gap`, nie marginesy poszczególnych elementow. * Zmierzone przed zmianą (2026-09-15, oba sklepy): tytuł i cena sklejone (luka 0 px), * `.price` z marginesem 4 px na .com i 14,57 px na .online — bo Kadence liczy go w `em`, * więc skakał razem ze stopniem pisma. Odstęp akcji: 47,09 px na .com, 0,02 px na .online. * Żadnej z tych liczb nikt nie wybrał; wzięły się z dziedziczenia. * Teraz jest jedna wartosc (--kafel-odstep) i dosunięcie akcji do dolu. */ body.isa-ds ul.products li.product { --kafel-odstep: 12px; display: flex; flex-direction: column; } body.isa-ds ul.products li.product .product-details, body.isa-ds ul.products li.product .entry-content-wrap { display: flex; flex-direction: column; flex: 1 1 auto; gap: var(--kafel-odstep); } /* Marginesy własne elementów zerujemy — inaczej sumują sie z `gap` i wracamy do chaosu. */ body.isa-ds ul.products li.product .product-details > *, body.isa-ds ul.products li.product .entry-content-wrap > * { margin-top: 0; margin-bottom: 0; } /* Cena i przycisk to JEDNA grupa dosunieta do dolu kafla. * * Wczesniej do dolu szla sama akcja, wiec pustka ladowala MIEDZY cena a przyciskiem — * i to w kazdym kaflu inna, bo zalezala od liczby linii tytulu. Zmierzone: cena na 543 px * w dwoch kaflach i 518 px w trzecim, pustka 39 px wobec 64 px. Zgloszenie wlasciciela: * „bardzo brzydko sie to zawija". * * Teraz elastyczna przestrzen jest POD TYTULEM, a cena z przyciskiem stoja razem przy dolnej * krawedzi — czyli w calym rzedzie na tej samej wysokosci, bez sztywnej wysokosci tytulu * (ta wymuszalaby pustke takze tam, gdzie nazwa kursu jest krotka). */ body.isa-ds ul.products li.product .price { margin-top: auto; } body.isa-ds ul.products li.product .product-action-wrap { padding-top: var(--kafel-odstep); /* Sam action-wrap też jest kolumną z odstępem — inaczej jego własne dzieci się sklejają. * Zmierzone 2026-09-15 na .com: widget rat PayU (`.payu-mini-installments-widget`) kończy * się na 824 px, a przycisk zaczyna na 824 px — zero odstępu, „raty przylegają do buttona" * (zgłoszenie właściciela). Rodzic miał `display: block`, więc `gap` z kafla go nie dotykał. * Na .online widgetu rat nie ma, więc `gap` nic tam nie zmienia. */ display: flex; flex-direction: column; gap: var(--kafel-odstep); } /* Znaczniki niewidoczne (screen-reader-text, dane GTM) nie mogą dokładać pustego odstępu * przez `gap` — wyjmujemy je z przepływu kolumny. */ body.isa-ds ul.products li.product .product-action-wrap > .screen-reader-text, body.isa-ds ul.products li.product .product-action-wrap > .gtm4wp_productdata { display: none; } /* Tytuł kafla. Interlinia 1,3 zamiast 1,2: przy dwóch liniach — a tak lamie sie większość * nazw kursów — 1,2 sklejało wiersze. Stopień nieco wyższy, bo to główny nośnik informacji * na listingu i konkuruje z ceną. */ body.isa-ds ul.products li.product .woocommerce-loop-product__title { font-size: clamp(17px, 1.5vw, 20px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; color: var(--ink); /* ⚠️ LINE-CLAMP USUNIETY — nie dziala tu i ucinal tekst w polowie linii. * * Zmierzone na zywej stronie: tytul ma `display: flow-root`, bo Kadence nadpisuje nasze * `-webkit-box`. A `-webkit-line-clamp` dziala WYLACZNIE przy `display: -webkit-box` — * bez niego jest ignorowany, tekst renderuje wszystkie cztery linie, a `overflow: hidden` * przycina czwarta W POLOWIE WYSOKOSCI LITER. Dokladnie to widac bylo na zrzutach: * ucięty pasek tekstu nachodzacy na cene (zgloszenie wlasciciela, dwa razy). * * Zamiast walczyc o specyficznosc prefiksowanej wlasciwosci — rezygnujemy z obcinania. * Pelny tytul jest bezpieczny na kazdym silniku (WebKit bywa tu kapryśny), a rowna * wysokosc kafli w rzedzie i tak zapewnia siatka; cena z przyciskiem sa dosuniete do dolu, * wiec dluzsza nazwa nie rozjezdza rytmu. Mniej magii CSS = mniej ryzyka. */ /* ⚠️ `break-word`, NIE `anywhere`. Zmierzone 2026-09-16 na .com przy 601 px (siatka * schodzi tam do dwóch bardzo wąskich kolumn): `anywhere` przełamało tytuł W ŚRODKU * WYRAZU — „Kurs / wieczorow / y AI Academy". Różnica nie jest kosmetyczna: `anywhere` * wolno łamać słowo nawet wtedy, gdy zmieściłoby się w osobnej linii, `break-word` łamie * dopiero, gdy słowo nie mieści się w CAŁEJ szerokości. Dla nazw kursów, które bywają * długie, ale nigdy dłuższe od kolumny, `break-word` wystarcza i nie tnie wyrazów. * * Warstwa 45 ma komentarz ostrzegający dokładnie przed `anywhere` przy kwotach — ta sama * pułapka wróciła tutaj piętro wyżej, bo ostrzeżenie stało przy jednym użyciu zamiast * przy właściwości. Żadna reguła bramki tego nie widzi: R2 mierzy przepełnienie pionowe, * R8 przycięcie poziome, a przełamany wyraz mieści się w boksie i nic nie przepełnia. */ overflow-wrap: break-word; } body.isa-ds ul.products li.product a:hover .woocommerce-loop-product__title { color: var(--isa-red-ink); } /* --- Kafle w „Podobne produkty" i „Może Cię zainteresować" --- * * ⚠️ TU NIE POMAGA KOLEJNOŚĆ, TYLKO SPECYFICZNOŚĆ — i to jest cała nauka tej reguły. * * Zgłoszenie właściciela ze zrzutem: „brak wewnętrznych marginesów w tych boxach, no * i w ogóle niespójność z kaflami na stronie głównej sklepu". Zmierzone porównawczo, * kafel do kafla, na 1440 px: * listing główny → padding detali 20/20/20/20, tytuł 29 px od krawędzi kafla * podobne produkty → padding detali 20/ 0/20/ 0, tytuł 0 px od krawędzi kafla * * Czyli poziomy padding był ZEROWANY tylko w tym jednym kontekście. Dochodzenie po * `cssRules` pokazało rzecz nieoczywistą: moja reguła stoi OSTATNIA W KASKADZIE (9 z 9 * źródeł ustawiających tę własność) i mimo to przegrywa. Wygrywa ósma — * `.woocommerce.single-product.content-style-boxed .products ul.products…` z `woocommerce.min.css` * Kadence — bo ma więcej klas. Przy nierównej specyficzności pozycja w pliku nie znaczy nic. * * To odwrotna sytuacja niż przy snippetach, gdzie przegrywaliśmy WŁAŚNIE przez kolejność * (wstrzykują się po nas przy równej specyficzności). Dwa różne mechanizmy, dwa różne * lekarstwa: tam trzeba było podwoić klasę, tu dopasować się kształtem do przeciwnika. * * ⚠️ PIERWSZA POPRAWKA NIE WYSTARCZYŁA i policzenie specyficzności pokazało dlaczego. * Selektor TRAFIAŁ (`element.matches()` → true), a mimo to przegrywał: * Kadence (0,8,2) `.woocommerce.single-product.content-style-boxed .products ul.products…` * moja (0,6,3) `body.isa-ds.single-product .related ul.products li.product …` * Osiem klas bije sześć; liczba elementów rozstrzyga dopiero przy równych klasach. Dlatego * „selektor trafia" i „reguła działa" to dwie różne rzeczy, a sprawdzenie pierwszego nie * dowodzi drugiego — trzeba było policzyć obie strony. * * Potrojone `.isa-ds` daje (0,8,3): tyle samo klas co Kadence, o jeden element więcej. * To MINIMUM wystarczające, nie zapas na wyrost — gdyby Kadence dołożył kiedyś klasę, * reguła przegra i trzeba będzie policzyć na nowo, zamiast dokładać w ciemno. * * Powtórzenie klasy zamiast `!important`, bo `!important` wygrywa ze WSZYSTKIM, także * z przyszłymi regułami, których jeszcze nie ma — a to przenosi problem, nie rozwiązuje. * Ten sam chwyt co `body.isa-ds.isa-ds` w warstwie 45, tam z innego powodu (kolejność, * nie specyficzność). * * Nazwa sekcji to `.up-sells`, nie `.upsells` — zmierzone w DOM; `.upsells` nie trafiało w nic. */ body.isa-ds.isa-ds.isa-ds.single-product .related ul.products li.product .product-details, body.isa-ds.isa-ds.isa-ds.single-product .related ul.products li.product .entry-content-wrap, body.isa-ds.isa-ds.isa-ds.single-product .up-sells ul.products li.product .product-details, body.isa-ds.isa-ds.isa-ds.single-product .up-sells ul.products li.product .entry-content-wrap, body.isa-ds.isa-ds.isa-ds.single-product .cross-sells ul.products li.product .product-details, body.isa-ds.isa-ds.isa-ds.single-product .cross-sells ul.products li.product .entry-content-wrap { padding-left: 20px; padding-right: 20px; } /* --- Dwa poziomy nazwy: kurs jako etykieta, ścieżka jako tytuł --- * * Oferta ma strukturę, której płaska nazwa nie pokazywała. Jest KURS („Machine Learning * Masters", „PythON: Academy") i jest ŚCIEŻKA albo pakiet w jego ramach („Ścieżka Początek", * „Optymalizacja i zarządzanie modelami"). Na listingu czytało się to jako jeden długi ciąg * i pięć wariantów tego samego kursu wyglądało na pięć niepowiązanych produktów — widać to * było na zrzucie po podmianie grafik, gdzie pięć kafli ML Masters stało się wizualnie * nierozróżnialnych. * * ⚠️ NAZWA W BAZIE ZOSTAJE NIETKNIĘTA — idzie na fakturę. Rozbicia dokonuje * `isa_ds_tytul_na_kaflu()` w PHP, wyłącznie przy renderowaniu listingu; `post_title` * nie jest ani zmieniany, ani zapisywany. * * Etykieta bierze kształt `eyebrow` z systemu — ten sam, co nagłówki kolumn stopki * (`#colophon .widget-title`) i tytuł banera RODO: 13 px, waga 600, wersaliki, tracking * dodatni. Dodatni, bo przy wersalikach litery zlewają się bez rozstrzelenia — to jedyne * miejsce w tym arkuszu, gdzie światło międzyliterowe jest większe od zera, i właśnie * dlatego nie jest błędem. */ body.isa-ds ul.products li.product .isa-kurs { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; line-height: 1.2; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; } /* Ścieżka niesie rozróżnienie, więc zostaje przy stopniu tytułu — zmienia się tylko to, * że nie musi już mieścić w sobie nazwy kursu. */ body.isa-ds ul.products li.product .isa-sciezka { display: block; } /* Najechanie podświetla całość, nie samą ścieżkę — kafel jest jednym celem kliknięcia. */ body.isa-ds ul.products li.product a:hover .isa-kurs { color: var(--isa-red-ink); } /* Cena na listingu. * * ⚠️ NIE rób z tego kontenera flex. Pierwsza wersja miała `display:flex; gap:8px` * i rozbiła cenę na osobne elementy flex — przez co dopisek „z VAT" odrywał się do nowej * linii pod kwotę (złapane na zrzucie porównawczym). Cena z sufiksem to JEDEN ciąg tekstu * i ma płynąć jak tekst; odstęp między kwotami daje margines, nie `gap`. */ /* Cena na listingu. Stopień ustawiony na SAMYM `.price`, nie tylko na kwocie: na .online * kontener miał 14,57 px odziedziczone, więc dopisek „brutto" był mniejszy od kwoty obok. */ body.isa-ds ul.products li.product .price { color: var(--ink); font-size: 15px; line-height: 1.4; } body.isa-ds ul.products li.product .price del { margin-right: 8px; } /* Plakietka „Promocja!" — odpowiednik `.pill-red` z serwisu. * Widoczności NIE zmieniamy: na .online jest ukryta świadomą regułą właściciela. */ body.isa-ds .onsale, body.isa-ds span.onsale { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; background: var(--isa-red-soft); color: var(--isa-red-ink); font-size: 12px; font-weight: 500; letter-spacing: 0; line-height: 1; } /* --- Nagłówek archiwum --- */ /* Pastelowy gradient `linear-gradient(135deg,#8beaf6,#e8bae6,#f1dabe)` stoi na obu sklepach * i nie ma nic wspólnego z paletą marki — to jedyne miejsce, gdzie sklepy były zgodne, * i akurat zgodne w błędzie. Zastępujemy go poświatą w kolorze marki, tym samym wzorem * co `.hero-grad` w serwisie. */ body.isa-ds .page-hero-section, body.isa-ds .entry-hero-container-inner, body.isa-ds .product-hero-section { background: var(--bg); background-image: radial-gradient( ellipse 60% 80% at 20% 0%, color-mix(in srgb, var(--isa-red) 10%, transparent), transparent 60% ), radial-gradient( ellipse 50% 70% at 85% 10%, color-mix(in srgb, var(--isa-red) 6%, transparent), transparent 62% ); border-bottom: 1px solid var(--line-2); } /* Sortowanie i licznik wyników — pasek narzędzi listingu. */ body.isa-ds .woocommerce-ordering select, body.isa-ds .orderby { min-height: 44px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); font-size: 14px; padding: 0 40px 0 16px; } /* --- Karta produktu --- */ body.isa-ds div.product .woocommerce-product-gallery__image img, body.isa-ds div.product .woocommerce-product-gallery img { border-radius: var(--r-lg); } /* Blok ceny na karcie — w serwisie cena stoi w kafelku z ramką, nie luzem na tle. */ body.isa-ds div.product p.price, body.isa-ds div.product .price { color: var(--ink); line-height: 1.2; } /* Warianty produktu (termin kursu) — tabela wyboru. */ body.isa-ds .variations th, body.isa-ds .variations td { border: 0; padding: 6px 0; } body.isa-ds .variations label { font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-4); } body.isa-ds .reset_variations { font-size: 13px; color: var(--ink-4); } /* Metadane produktu (kategoria, SKU) — najniższy stopień hierarchii. */ body.isa-ds .product_meta { padding-top: 16px; border-top: 1px solid var(--line-2); } /* Zakładki i „Podobne produkty" — nagłówki sekcji zamiast domyślnych motywu. */ body.isa-ds .related > h2, body.isa-ds .upsells > h2, body.isa-ds .up-sells > h2 { font-size: clamp(23px, 2.4vw, 33px); font-weight: 700; letter-spacing: -0.03em; margin-bottom: 24px; } /* Ilość sztuk — w sklepie kursowym to liczba miejsc, więc pole ma być czytelne. */ body.isa-ds .quantity input.qty { min-height: 48px; width: 80px; text-align: center; border-radius: 999px; border: 1px solid var(--line); } /* Przycisk na kaflu — węższy wyściółka niż przycisk samodzielny. * * Warstwa 20 daje przyciskom `padding: 0 22px`, co jest dobre dla przycisku stojącego * w treści, ale nie dla przycisku w kolumnie siatki. Na .com przy 601 px siatka schodzi * do dwóch wąskich kolumn i 44 px samej wyściółki zjada tyle, że „WYBIERZ OPCJĘ" przestaje * się mieścić. Samo `white-space: normal` z warstwy 20 już chroni przed UCIĘCIEM napisu; * to tutaj chroni przed łamaniem go na dwie linie w typowej szerokości kolumny. */ body.isa-ds ul.products li.product .button, body.isa-ds ul.products li.product .add_to_cart_button { padding-inline: 14px; } /* ===== 35-etykiety.css ===== */ /* Etykiety produktów — „Promocja −28%", „Przedsprzedaż", „Ostatnie 3 miejsca", „Nowość". * * Zastępują naklejki wtapiane w grafikę produktu. Powód nie jest estetyczny: naklejka * na obrazku wymaga podmiany pliku, gdy promocja się kończy, a procent policzony w głowie * potrafi się rozjechać z ceną w koszyku. Tutaj tekst przychodzi z `isa_ds_etykiety()` * w PHP i liczy się z `regular_price` vs `sale_price` przy każdym wyświetleniu. * * Kształt 1:1 z komponentem `` serwisu Astro (`src/components/ui/Badge.astro`): * pastylka, 12 px, waga 500, `rounded-full`, tło „soft" + tekst w mocnym odcieniu tej samej * rodziny. Warianty nie-markowe biora kolory z palety Tailwinda tak samo jak tam — dlatego * stoja tu jako wartosci, a nie tokeny: w systemie serwisu one rowniez nie sa tokenami. */ /* ⚠️ Etykiety leza NA grafice — i ta decyzja byla raz odwrocona, wiec warto wiedziec czemu. * * Pierwsza wersja kladla je na zdjeciu i wygladalo to zle: „−33%" zaslonilo wypalony na * grafice tytul „Pakiet Python + Power BI", a „−29%" nazwy „Webflow" i „Power BI Academy". * Grafiki mialy wtedy zajety KAZDY rog — tytul w lewym gornym, plakietki kategorii w lewym * dolnym, logo technologii w prawym gornym, naklejka „promocja" w prawym dolnym. Dlatego * druga wersja przeniosla etykiety pod grafike: komunikat przestawal zalezec od TRESCI pliku. * * Decyzja wlasciciela 2026-09-15 cofa to swiadomie: etykiety wracaja na grafike, bo pod nia * wygladaja slabo, a grafiki produktowe zostana przerobione tak, zeby zrobic im miejsce. * Przeslanka poprzedniej wersji („kazdy rog zajety") przestaje obowiazywac razem z tamtymi * plikami — nie jest wiec odwroceniem wniosku, tylko zmiana faktu, na ktorym wniosek stal. * * Co z tamtej wersji ZOSTAJE, bo bylo sluszne niezaleznie od polozenia: tresc etykiety nadal * liczy sie z `regular_price`/`sale_price` w PHP, a nie jest malowana w pliku. Zmiana dotyczy * wylacznie tego, GDZIE etykieta stoi — nie tego, skad bierze sie jej tresc. * * Czytelnosc na dowolnym zdjeciu zalatwia separacja, nie zmiana palety: kolory zostaja te * z `` serwisu, a od tla odcina je cien plus wewnetrzna obwodka. Gdyby zamiast tego * wzmocnic same kolory, etykiety na sklepie przestalyby pasowac do tych w serwisie. */ body.isa-ds .isa-etykiety { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; } /* Na kaflu listingu: warstwa nad grafika. * * Rodzicem jest `a.woocommerce-loop-image-link`, ktory ma juz `position: relative` i obejmuje * dokladnie obszar zdjecia (zmierzone: 294x167 przy kaflu 294x401) — nie trzeba wiec niczego * pozycjonowac dodatkowo. `right` domyka pas, zeby przy dwoch etykietach druga zawinela sie * do nowej linii zamiast wyjsc poza kadr. * * Etykiety zostaja WEWNATRZ linku, wiec klikniecie w nie prowadzi do produktu tak samo jak * klikniecie w zdjecie — nie trzeba `pointer-events: none` i nie powstaje martwe pole. */ body.isa-ds ul.products li.product .isa-etykiety { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 2; margin-bottom: 0; } /* Separacja od zdjecia: cien pod pastylka. */ body.isa-ds ul.products li.product .isa-etykieta { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28); } /* ⚠️ NA KAFLU WSZYSTKIE PASTYLKI SA BIALE — i to jest wynik pomiaru, nie gustu. * * Etykieta lezy na zdjeciu, wiec liczy sie kontrast PASTYLKI WOBEC TLA, nie tylko tekstu * wobec pastylki. WCAG 1.4.11 stawia dla elementu nietekstowego prog 3:1. Tlo jest przy tym * nieprzewidywalne i zmienia sie z kazdym produktem, wiec wariant musi dzialac na kazdym. * * Droga do tego wniosku prowadzila przez dwa bledne warianty i oba warto znac: * 1. PASTEL (`--isa-red-soft` #ffe3e8) — zmierzone na zrzucie z zywej strony: „−33%" * na rozowo-fioletowym gradiencie obecnej grafiki praktycznie znikalo. Pastel zaklada * jednolite jasne podloze strony; zdjecie takiego nie daje. * 2. PELNY KOLOR MARKI (`--isa-red-dark` #cb092a) — poprawil sytuacje na dzisiejszych * zdjeciach i bylby KATASTROFA na nowych. Nowe grafiki produktowe to gradienty w barwach * sciezek, a `--track-ai` (#f20b32) to niemal ta sama czerwien co etykieta promocji. * Policzone dla czterech gradientow, ktore realnie powstaja: * czerwien #cb092a → 1,20 / 1,35 / 1,11 / 1,79 : 1 (prog 3:1 — wszystkie ZLE) * biel #ffffff → 4,84 / 4,31 / 6,48 / 3,24 : 1 (wszystkie przechodza) * Czerwona pastylka na czerwonym torze AI dawalaby 1,35:1, czyli plame. * * Biel jest jedynym tlem, ktore odcina sie od KAZDEGO nasyconego gradientu, a przy tym stoi * blizej `` serwisu niz wariant pelny: tam tez jest jasne tlo i mocny tekst tej samej * rodziny. Rozroznienie miedzy etykietami niesie wiec KOLOR TEKSTU, nie kolor tla. * * Kontrast tekstu na bieli (prog 4,5:1 dla 12 px): promocja 5,81 · nowosc 5,86 · * przedsprzedaz 5,82 po przyciemnieniu · bestseller 16,83. Surowy `--track-fe` dawalby 3,24 * i dlatego jako JEDYNY jest tu mieszany z ciemnym tokenem. */ body.isa-ds ul.products li.product .isa-etykieta { background: #fff; } body.isa-ds ul.products li.product .isa-etykieta--promocja { color: var(--isa-red-dark); font-weight: 600; } body.isa-ds ul.products li.product .isa-etykieta--nowosc { color: var(--success-ink); } body.isa-ds ul.products li.product .isa-etykieta--przedsprzedaz { /* Pomarancz sciezki frontendowej przyciemniony `--always-dark-2` do 5,82:1 na bieli. * Token „always-dark", nie `--ink-2`: etykieta lezy na zdjeciu, ktore nie odwraca sie * z motywem, wiec przyciemnienie tez nie moze. */ color: color-mix(in srgb, var(--track-fe) 70%, var(--always-dark-2)); } body.isa-ds ul.products li.product .isa-etykieta--bestseller { color: var(--ink-2); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28), inset 0 0 0 1px var(--line); } /* „Ostatnie miejsca" to jedyny wyjatek od bieli: pilnosc ma byc widoczna z daleka, * a ta etykieta pojawia sie rzadko i nigdy obok promocji na tym samym kaflu. */ body.isa-ds ul.products li.product .isa-etykieta--ostatnie { background: var(--isa-red-dark); color: #fff; } body.isa-ds .isa-etykieta { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 500; letter-spacing: 0; line-height: 1; white-space: nowrap; } /* Promocja — czerwien marki, ten sam wariant co `red`/`accent` w Badge serwisu. */ body.isa-ds .isa-etykieta--promocja { background: var(--isa-red-soft); color: var(--isa-red-ink); } /* Przedsprzedaz — pomaranczowy, jak wariant `orange`. Informacja o czasie, nie o cenie, * wiec swiadomie INNY kolor niz promocja; inaczej klient czyta ja jako rabat. */ body.isa-ds .isa-etykieta--przedsprzedaz { /* Pomarancz z tokenow systemu (--track-fe, sciezka frontendowa), nie z palety Tailwinda. * Tlo mieszane z biela, bo etykieta lezy na zdjeciu i musi miec pelne krycie. */ background: color-mix(in srgb, var(--track-fe) 16%, #fff); color: color-mix(in srgb, var(--track-fe) 78%, var(--ink)); } /* Ostatnie miejsca — pilnosc. Mocniejszy kontrast niz promocja, bo to ostrzezenie. */ body.isa-ds .isa-etykieta--ostatnie { background: var(--isa-red-dark); color: #fff; font-weight: 600; } /* Nowosc — zielen, wariant `green`. */ body.isa-ds .isa-etykieta--nowosc { background: color-mix(in srgb, var(--success-ink) 14%, #fff); color: var(--success-ink); } /* Bestseller — najspokojniejszy z calej piatki: to nie jest wezwanie do pospiechu, * tylko informacja spoleczna, wiec nie konkuruje z promocja o uwage. */ body.isa-ds .isa-etykieta--bestseller { background: var(--bg-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); } /* Osoby z ustawieniem „mniej ruchu" i tak nic tu nie traca — etykiety sa statyczne. */ /* ===== 50-naglowek-stopka.css ===== */ /* Nagłówek i stopka — to one mówią klientowi „jesteś wciąż w tym samym serwisie". * * Stan zastany: nagłówek `.com` ma linki w kolorze #514d7c i ikonę koszyka #5500fc * (fiolet spoza marki), `.online` w #215387 (granat). Stopki są czarne na obu, ale jedna * pisze tekstem #e5e5e5, druga #ffffff, i mają różne kolory najechania (#ff0000 vs brak). * * System: nagłówek to szkło (`--bg` 80% + blur), link `--ink-3` → `--ink`, wysokość * wiersza 60 px; stopka stoi na `--always-dark` (#0a0a0a), nie na czystej czerni. */ /* Ikona domku jako maska SVG w `data:`. * * Nie emoji i nie font ikonowy: emoji renderuje się inaczej na każdym systemie, a font * ikonowy to kolejny zasób do pobrania. Maska bierze kolor z `background-color`, więc * idzie za motywem i za stanem najechania bez drugiej definicji. * * Kształt celowo pełny (`fill`), nie konturowy — przy 20 px kontur o grubości 1,5 px * robi się szary i gubi czytelność obok tekstu tej samej wagi. */ body.isa-ds { --isa-ikona-domek: url("data:image/svg+xml;utf8,"); } /* --- Nagłówek --- */ /* Naglowek ma PELNE tlo, nie szklo. * * Serwis Astro ma tu `color-mix(var(--bg) 88%, transparent)` + `backdrop-filter: blur(20px)` * i tam to dziala, bo jego naglowek jest zaprojektowany jako sticky nad wlasna trescia. * Na Kadence naglowek bywa uslicky'owany skryptem motywu — i wtedy przez polprzezroczyste * tlo PRZESWITUJE tresc strony. Zgloszenie wlasciciela ze zrzutem: tytul strony widoczny * na pasku z logo i menu. Zmierzone: `background: color(srgb 1 1 1 / 0.88)`. * * Przy okazji znika `backdrop-filter` — to jeden z najdrozszych efektow w przegladarce * (wymusza osobna warstwe kompozycji na kazdej klatce przewijania), a przy nieprzezroczystym * tle nie daje NIC. Mniej pracy GPU na telefonach. */ body.isa-ds #masthead, body.isa-ds .site-header { background: var(--bg); border-bottom: 1px solid var(--line-2); box-shadow: none; } body.isa-ds #masthead a, body.isa-ds .site-header .header-navigation a { color: var(--ink-3); font-size: 14px; letter-spacing: -0.01em; transition: color 0.2s; } body.isa-ds #masthead a:hover, body.isa-ds .site-header .header-navigation a:hover, body.isa-ds #masthead .current-menu-item > a { color: var(--ink); } /* Cel dotykowy pozycji menu — WCAG 2.5.8. * * ⚠️ ODSTĘPY MIĘDZY POZYCJAMI NIE ISTNIEJĄ — zmierzone: `li` stoją stykiem (0 px), * a cały rytm robi padding wewnątrz ``. I właśnie dlatego był nierówny: zwykłe linki * miały 8,4 px, a „Kontakt" 16 px, bo jest stylizowany na pigułkę. Odstęp ustawiamy więc * `gap` na liście, a padding linków zrównujemy — inaczej każdy nowy przycisk w menu * znów rozjedzie rytm. */ body.isa-ds #masthead ul#primary-menu, body.isa-ds #masthead .header-navigation > div > ul, body.isa-ds #masthead .primary-menu-container > ul { display: flex; align-items: center; gap: 4px; } body.isa-ds #masthead .header-navigation li > a { display: inline-flex; align-items: center; min-height: 40px; padding-inline: 12px; } /* --- Okruszki (breadcrumbs) --- * * Zmierzone na karcie produktu: stopień **9 px**, kolor rgb(24,44,68) — granat spoza * palety marki — i podkreślenie na każdym ogniwie. Dziewięć pikseli to poniżej progu * czytelności; okruszki mają prowadzić, a nie zmuszać do mrużenia oczu. * * Podkreślenie zdejmujemy ze stanu spoczynku i zostawiamy na najechaniu: przy czterech * ogniwach obok siebie ciągła linia zlewa całą ścieżkę w jeden pasek i gubi granice * między poziomami. Ostatnie ogniwo (bieżąca strona) nie jest linkiem, więc dostaje * mocniejszy kolor — to ono mówi „tu jesteś". */ body.isa-ds .kadence-breadcrumbs, body.isa-ds .woocommerce-breadcrumb, body.isa-ds .entry-breadcrumbs { font-size: 13px; line-height: 1.5; color: var(--ink-4); letter-spacing: -0.01em; } body.isa-ds .kadence-breadcrumbs a, body.isa-ds .woocommerce-breadcrumb a, body.isa-ds .entry-breadcrumbs a { color: var(--ink-3); text-decoration: none; transition: color 0.2s; } body.isa-ds .kadence-breadcrumbs a:hover, body.isa-ds .woocommerce-breadcrumb a:hover, body.isa-ds .entry-breadcrumbs a:hover { color: var(--isa-red-ink); text-decoration: underline; } /* Separator „/" ma być cichszy od ogniw, bo nie niesie treści — tylko je rozdziela. */ body.isa-ds .kadence-breadcrumbs .kadence-bc-sep, body.isa-ds .kadence-breadcrumbs > span > span:not(a) { color: var(--line); padding-inline: 2px; } /* --- Widget listy kategorii --- * * Kadence renderuje go raz jako listę, raz jako `