/* =========================================================================== WARSTWA ZGODNOSCI GEOMETRII PO ZDJECIU MOTYWU KADENCE UWAGA REDAKCYJNA, WAZNIEJSZA NIZ WYGLADA: W KOMENTARZACH TEGO PLIKU NIE WOLNO UZYWAC NAWIASOW KLAMROWYCH. Autoptimize minifikuje ten arkusz i jego minifikator liczy klamry takze wewnatrz komentarzy. Pierwsza wersja tego pliku miala w komentarzu wklejony fragment kodu PHP z klamrami - i minifikator WYCIAL z pliku pierwsza regule, zostawiajac 158 bajtow zamiast szesciu kilobajtow. Objaw byl mylacy: padding dzialal, a `max-width` nie, mimo ze obie wlasciwosci stoja w tym samym bloku. Znalezione 2026-09-02 dopiero przez pobranie sklejki Autoptimize i policzenie jej znakow. Opis mechanizmu w formie kodu lezy w `PLAN-MOTYW-BP.md`. Tutaj proza. =========================================================================== 1. SZEROKOSC I ODDECH RZEDOW KADENCE ------------------------------------ Motyw Kadence ustawial globalna zmienna PHP `content_width` na 2380 (plik `themes/kadence/inc/components/base_support/component.php`, linia 651 - iloczyn 140 razy 17). Wtyczka Kadence Blocks czyta te zmienna przy generowaniu CSS kazdego rzedu z wlaczonym "dziedzicz szerokosc tresci", w pliku `includes/blocks/class-kadence-blocks-row-layout-block.php`, linie 409-421. Sa tam trzy przypadki: - zmienna ustawiona i motyw Kadence obecny - szerokosc bierze sie ze zmiennej CSS `--global-content-width`, a oddech od krawedzi ze zmiennej `--global-content-edge-padding`. TAK BYLO DO TERAZ. - zmienna ustawiona, motywu Kadence brak - szerokosc sztywne 2380 px i ZERO oddechu. - zmiennej brak - szerokosc ze zmiennej `--wp--style--global--content-size` i nadal zero oddechu. Po zdjeciu motywu wchodzi przypadek trzeci, bo `content_width` ustawial wylacznie tamten motyw. Sprawdzone przeszukaniem calego `wp-content`. Na tej stronie dawalo to 1320 px zamiast 1440 px i utrate 40 px oddechu z kazdej strony. Regula nizej przywraca jedno i drugie, biorac wartosci z tych samych zmiennych, ktorych uzywal Kadence. Klasa jest powtorzona dwa razy, zeby dac wage 0-3-0 wobec 0-2-0 reguly wtyczki - wygrywa wiec niezaleznie od kolejnosci wczytywania, bez `!important`. Klase `kb-theme-content-width` wtyczka nadaje wylacznie rzedom z dziedziczona szerokoscia, wiec regula nie dotyka zadnego rzedu o wlasnej szerokosci. Przypadek "breakout" na tej witrynie nie wystepuje ani razu - sprawdzone w kodzie zywej strony. =========================================================================== */ .wp-block-kadence-rowlayout > .kb-theme-content-width.kb-theme-content-width { max-width: var(--global-content-width, 144rem); padding-left: var(--global-content-edge-padding); padding-right: var(--global-content-edge-padding); } /* =========================================================================== 2. ODSTEP MIEDZY BLOKAMI - 24 px, KTORYCH TU NIGDY NIE BYLO ----------------------------------------------------------- Znalezione pomiarem PO przelaczeniu motywu: kazda podstrona urosla o 45-72 px, mimo ze wszystkie szerokosci, paddingi, sekcje, naglowek i stopka zgadzaly sie co do piksela. WordPress generuje z `theme.json` aktywnego motywu reguly nadajace `margin-block-start` 24 px kazdemu dziecku `.wp-site-blocks`, kazdemu dziecku pojemnika `is-layout-flow` i kazdemu dziecku pojemnika `is-layout-constrained`. Element `#wrapper` ma klase `wp-site-blocks`, wiec `#inner-wrap` i stopka dostawaly po 24 px z gory. PULAPKA JEST W WARTOSCI `false`. Motyw `brand-perspective` ma w `theme.json` ustawienie `spacing.blockGap` rowne `false` - i to NIE WYLACZA tych regul. `false` chowa tylko suwak w edytorze, a WordPress dalej wypisuje domyslne 24 px. Wylacza je dopiero `null`. Motyw Kadence mial tam `null` - dlatego w przechwyconym `zgodnosc-kadence.css`, czyli w zapisie tego, co Kadence naprawde wysylal, nie ma ani jednego `margin-block-start`. Poprawka stoi w dwoch miejscach naraz: - `theme.json` motywu potomnego ustawia `blockGap` na `null`, czyli te reguly w ogole nie powstaja. To jest wlasciwy mechanizm. - regula nizej zeruje je, gdyby jednak powstaly. Scalanie `theme.json` potomnego z nadrzednym potrafi pogubic wartosci `null`, a to jest roznica, ktorej nie widac w logu - tylko w liczbach. `theme.json` motywu NADRZEDNEGO zostaje nietkniety. Stoi na nim szesc innych witryn, a `blockGap` rowne `false` moze byc tam swiadomym wyborem. =========================================================================== */ :root:root :where(.wp-site-blocks) > *, :root:root :where(.is-layout-flow) > *, :root:root :where(.is-layout-constrained) > * { margin-block-start: 0; margin-block-end: 0; } /* ===================================================================== ZGODNOŚĆ Z MOTYWEM NADRZĘDNYM (1.4.0) Reguły szerokości motywu nadrzędnego (M9, M19) i wyglądu formularza (F5-F9). Wartości biorą się ze zmiennych motywu nadrzędnego, więc zmiana w „Dostosuj" działa i tutaj. ===================================================================== */ /* --- Nagłówek (pigułka): logo i przycisk na krawędzi treści ---------- Ta sama geometria co nagłówek pływający motywu: pigułka jest szersza od treści o pół oddechu z każdej strony i ma w środku wyściółkę pół oddechu. Pół plus pół daje cały oddech, więc logo stoi dokładnie tam, gdzie treść sekcji - przy każdej szerokości ekranu. */ .bpmh { padding-left: 0; padding-right: 0; } .bpmh .bpmh__kontener { --bpsx-oddech: max(var(--bp-oddech), 10px); width: calc(min(100%, var(--bp-tresc)) - var(--bpsx-oddech)); /* Wtyczka nagłówka ma przy szerokim ekranie własną szerokość i wyściółkę - bez `!important` wygrywa jej reguła z zapytania o szerokość. */ max-width: none !important; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; box-sizing: border-box; } .bpmh .bpmh__pigulka { padding-left: calc(var(--bpsx-oddech) / 2) !important; padding-right: calc(var(--bpsx-oddech) / 2) !important; } .bpmh .bpmh__logo { padding-left: 0; } /* M5: przycisk menu na telefonie ma ten sam promień co każdy przycisk. */ .bpmh .bpmh__hamburger { border-radius: var(--bp-btn-promien); } /* --- 404, wyniki wyszukiwania, lista wpisów (M19) -------------------- Szablony niosą pojemnik `content-container` bez szerokości treści (klasa pełnej szerokości na `body` zeruje jego ograniczenie). */ body.error404 .content-container.site-container, body.search .content-container.site-container, body.blog .content-container.site-container, body.archive .content-container.site-container { max-width: var(--bp-tresc); margin-left: auto; margin-right: auto; padding-left: max(var(--bp-oddech), 10px); padding-right: max(var(--bp-oddech), 10px); box-sizing: border-box; } /* --- Karuzela produktów ---------------------------------------------- M9: gdy wszystkie kafle mieszczą się naraz (tryb `jest-statyczna`), stoją w szerokości treści, a nie od krawędzi do krawędzi ekranu. M11: na telefonie strzałki stoją obok siebie pod karuzelą, na środku - wcześniej każda lądowała w osobnym wierszu przy krawędzi ekranu. */ .bpsx-produkty.jest-statyczna .bpsx-produkty__tor { max-width: calc(var(--bp-tresc) - 2 * max(var(--bp-oddech), 10px)); margin-left: auto; margin-right: auto; padding-left: 0; } .bpsx-produkty.jest-statyczna .bpsx-kafel { flex: 1 1 0; min-width: 0; } @media (max-width: 767px) { .bpsx-produkty__okno { flex-direction: row; flex-wrap: wrap; justify-content: center; } .bpsx-produkty__okno .bpsx-produkty__tor { flex: 0 0 100%; } .bpsx-produkty__okno .bpsx-strzalka--lewo { margin: 2.4rem .6rem 0 0; } .bpsx-produkty__okno .bpsx-strzalka--prawo { margin: 2.4rem 0 0 .6rem; } } /* --- Formularz wspólny (F5-F9) ----------------------------------------- Dodatkowy CSS tej strony zeruje marginesy akapitów w formularzach wtyczki i rysuje własne pole wyboru. Formularz motywu (`.bp-formularz`) wraca do wzorca: odstęp 1.8rem między polami, systemowe pole wyboru 18 px w kolorze głównym. */ .wpcf7-form .bp-formularz .bp-pole { margin: 0 0 1.8rem !important; } .wpcf7-form .bp-formularz .bp-pole-para .bp-pole { margin: 0 !important; } .wpcf7-form .bp-formularz .bp-modal__stopka { margin: 2.4rem 0 0 !important; } .bp-formularz .bp-pole--zgoda input[type="checkbox"] { -webkit-appearance: auto; appearance: auto; width: 1.8rem !important; height: 1.8rem !important; border: 0; border-radius: 0; background: none; accent-color: var(--bp-akcent); } .bp-formularz .bp-pole--zgoda input[type="checkbox"]::before { content: none !important; } /* --- Poprawki po Sprawdzaczu (1.4.2) ------------------------------------ */ /* M9: sekcja „Dane techniczne" na podstronie produktu bez zdjęć stała od krawędzi do krawędzi ekranu. Poniżej 48em oddech daje już sama sekcja (reguła motywu dla treści), więc pojemnik go nie dubluje. */ @media (min-width: 48em) { .bpsx-produkt--sama-spec .bpsx-kontener { max-width: var(--bp-tresc); margin-left: auto; margin-right: auto; padding-left: max(var(--bp-oddech), 10px); padding-right: max(var(--bp-oddech), 10px); box-sizing: border-box; } } /* M5: przycisk z ramką w kaflach produktów ma promień przycisków motywu. */ .bpsx-pill { border-radius: var(--bp-btn-promien); } /* F5: wiersz „lub zadzwoń" 1.6rem pod przyciskiem (Dodatkowy CSS strony zeruje marginesy akapitów w formularzach). */ .wpcf7-form .bp-formularz-telefon, .bp-modal .bp-formularz-telefon { margin-top: 1.6rem !important; } /* F9: pole aktywne bez cienia - tylko ramka w kolorze głównym. */ .bp-formularz .bp-pole input:focus, .bp-formularz .bp-pole textarea:focus { box-shadow: none !important; }