' - stad ':is(p, div)'. */ body.parent-pageid-430 #_rich_text-49-239 p, body.parent-pageid-430 #_rich_text-54-911 p, body.parent-pageid-430 #new_columns-20-239 .salone-block :is(p, div) { display: block; margin: 0; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: .95rem; line-height: 1.5; color: #3F4750; } body.parent-pageid-430 #_rich_text-49-239 a, body.parent-pageid-430 #_rich_text-54-911 a, body.parent-pageid-430 #new_columns-20-239 .salone-block a { font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(219, 6, 50, .35); transition: color .25s ease, border-color .25s ease; } body.parent-pageid-430 #_rich_text-49-239 a:hover, body.parent-pageid-430 #_rich_text-54-911 a:hover, body.parent-pageid-430 #new_columns-20-239 .salone-block a:hover { border-bottom-color: currentColor; } /* Zapytanie medialne dla waskiego ekranu bylo potrzebne tylko przy ukladzie 'flex' - blok i tak lamie sie naturalnie. Usuniete. */ /* ---- Uklad karty: pusta kolumna i polowiczna szerokosc ---- POPRAWKA 2026-09-16. Klientka: "nasi koordynatorzy regionu, tez nam sie tu rozjezdza... jak sobie klikniemy, to nam tu tez jakos tak cos ucina". Sprawdzone w przegladarce na dwoch wariantach szablonu: 1. WIEKSZOSC WOJEWODZTW (np. opolskie): karta ma jedna kolumne szeroka na 926 px, ale blok z trescia w srodku ma w zrodle 'width:50%', czyli 443 px. Nazwisko i kontakty siedzialy wiec w lewej polowie, a prawa polowa karty byla pusta. 2. MALOPOLSKIE: karta ma DWIE kolumny po 463 px. W drugiej jest pusty blok o wysokosci 0 - zostal po drugiej osobie, ktorej juz nie ma w tresci. Pusta kolumna dalej rezerwowala polowe karty, wiec wizytowka byla wciśnieta w lewa strone. Obie sytuacje zalatwia jedna zasada: kolumna bez nazwiska nie jest kolumna, a kolumna z nazwiskiem bierze cala dostepna szerokosc. Gdy redakcja dopisze druga osobe, kolumny wroca same - warunek jest na TRESCI, a nie na liczbie kolumn. */ /* Kolumna bez nazwiska ('h3') nie ma czego pokazac - znika z ukladu. */ body.parent-pageid-430 #section-15-239 .ct-new-columns:has(.salone-block) > .ct-div-block:not(:has(h3)) { display: none; } /* Kolumny z trescia dziela karte po rowno; przy jednej bierze calosc. */ body.parent-pageid-430 #section-15-239 .ct-new-columns:has(.salone-block) > .ct-div-block { flex: 1 1 0; width: auto; min-width: 0; } /* POPRAWKA 2026-09-25: na telefonie dwie osoby w jednej karcie (kujawsko-pomorskie) staly obok siebie w kolumnach po 154 px, a adresy e-mail wychodzily poza karte (zmierzone przy 390 px: tresc 190 i 248 px). Ponizej 768 px kazda osoba bierze caly wiersz - kolumny zawijaja sie same, bo kontener ma 'flex-wrap: wrap'. */ @media (max-width: 767px) { body.parent-pageid-430 #section-15-239 .ct-new-columns:has(.salone-block) { row-gap: 30px; } body.parent-pageid-430 #section-15-239 .ct-new-columns:has(.salone-block) > .ct-div-block { flex-basis: 100%; } } /* Blok w srodku kolumny mial w zrodle 'width:50%' - stad pusta prawa polowa karty na kazdym wojewodztwie poza malopolskiem. */ /* Kotwica '#section-15-239' jest tu konieczna: zrodlo daje wewnetrznemu blokowi 'width:50%' NA IDENTYFIKATORZE (1,0,0), wiec sam warunek strukturalny (0,4,1) by przegral. Z identyfikatorem sekcji mamy (1,4,1). */ body.parent-pageid-430 #section-15-239 .ct-new-columns:has(.salone-block) .ct-div-block .ct-div-block { width: 100%; max-width: none; } /* ============================================================ WERSJA ANGIELSKA ROZDROZA - '/en/find-the-store/' (strona 6937) Dolozone 2026-09-16. ROZJAZD, KTORY TO ZAMYKA: polskie '/salon-sprzedazy/' zostalo rozjasnione juz w sierpniu regula na '#new_columns-118-235'. Bliznniak angielski to OSOBNA strona w Oxygenie, z wlasnym kompletem identyfikatorow ('-6937') - nasza regula go nie dotykala i sekcja zostawala CZARNA ('#section-129-6937 { background-color:#000000 }'), z fabryczna, stara czerwienia '#ba0c2c' na spodzie kafelkow. Czyli ten sam ekran wygladal inaczej w obu jezykach. Zasada na przyszlosc jest zapisana w 'design.md', rozdzial "PL i EN": kazda zmiana wizualna ma dwa adresy, a tabela par PL-EN jest tam wypisana. Reguly ID-owe NIE przenosza sie miedzy wersjami jezykowymi - trzeba je dopisac swiadomie. Uklad jest inny niz po polsku (kafelek obracany '.oxel_flipbox' zamiast bloku z przyciskiem), wiec nie odtwarzamy go jeden do jednego - wyrownujemy PALETE i KSZTALT, czyli to, co w makiecie jest wspolne dla calego serwisu. ============================================================ */ body.page #section-129-6937 { background-color: #FCFAF6; } /* Kafelki - zaokraglenie ze skali i przyciecie zawartosci do naroznikow. */ body.page #div_block-144-6937, body.page #div_block-133-6937 { border-radius: var(--r); overflow: hidden; } /* Spod kafelka: stara czerwien marki na nowa. */ body.page #div_block-150-6937, body.page #div_block-139-6937 { background-color: #DB0632; } /* Odnosnik na spodzie kafelka. Efekt zamalowania dokłada 'pedzel.css' (regula na komponencie '.oxel_flipbox__back .ct-link'); tutaj tylko ksztalt i kolory. Farba JASNA na czerwonym tle, wiec napis pod nia musi byc ciemny, a zwloki odwrocone - patrz 'pedzel.css', blok "FARBA JASNA". */ body.page #link-153-6937, body.page #link-142-6937 { --bmx-farba: #fff; --bmx-tlo: #DB0632; --bmx-tekst: #0B2240; --bmx-zwloka-wej: 0s; --bmx-zwloka-wyj: .35s; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .85); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #fff; text-decoration: none; } /* ============================================================ LEGENDA KROPLI NA LISTACH WOJEWODZTW Zgloszenie klientki ze spotkania (A3): "nie czaje tej gigantycznej kropli z duzym odstepem i malutkim dopiskiem 'Salony z mieszalnikiem - kolor i produkty dostepne od reki'". ZMIERZONE PRZED POPRAWKA (mazowieckie, 1440 px): ikona ................ 55 x 55 px odstep do podpisu .... 116 px podpis ............... Playfair Display 14 px rzad ................. wysrodkowany, przy liscie salonow dosunietej do LEWEJ krawedzi Trzy rzeczy naraz: ikona kilka razy wieksza od tekstu, ktory opisuje, pustka miedzy nimi szersza od samego podpisu, i os inna niz reszta strony. Stad wrazenie, ze to dwa niezwiazane elementy. CO JEST TERAZ: jeden wiersz - kropla i podpis tuz obok siebie, WYSRODKOWANE jako calosc. Ikona schodzi do rozmiaru napisu, a podpis przechodzi na pismo tekstowe, bo to etykieta funkcjonalna, a nie naglowek. Wsrodkowania nie robimy dodatkowym kontenerem - wiersz jest 'flex', wiec 'justify-content:center' zbiera ikone i podpis w jedna grupe i stawia ja na srodku. Odstep miedzy nimi trzyma 'gap', wiec nie rozjedzie sie przy dluzszym napisie ani przy zawijaniu. SELEKTOR STRUKTURALNY, NIE IDENTYFIKATOROWY: legendy sa dzis tylko na dwoch listach (mazowieckie ma dwie - "z mieszalnikiem" i "bez mieszalnika", pomorskie jedna), ale to tresc, ktora klientka moze dopisac na kazdej z sesnastu. Reguly zapinaja sie o UKLAD: wiersz kolumn, ktory zawiera ikone i nic poza nia oraz podpis. Waga: zrodlo trzyma wyrownanie i rozmiary na identyfikatorach (1,0,0), wiec potrzebne jest '!important'. Ten sam przypadek co przy amerykanskich flagach i czarnych sekcjach - patrz design.md. */ body.page .ct-new-columns:has(.ct-fancy-icon):has(h3) { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: center !important; gap: 12px; /* LEGENDA JEST PODZIALEM UKLADU - zastepuje poziomy separator. Polecenie 2026-09-17: "zamiast dividera niech po prostu forma tego napisu rozdziela uklad z mieszalnikiem od ukladu bez mieszalnika". Podzial robia trzy rzeczy naraz: duzy odstep od poprzedniej grupy, wloskowata kreska nad napisem i wlasny oddech pod nia. Napis 18 px ma wiec czym rozdzielac, a strona nie potrzebuje osobnego ozdobnika. */ position: relative; margin-top: clamp(44px, 5vw, 72px); margin-bottom: clamp(20px, 2.4vw, 28px); padding-top: clamp(30px, 3.4vw, 40px); } /* OZDOBNY AKCENT ZAMIAST WLOSKOWATEJ KRESKI. Polecenie 2026-09-17: "na tym zamiast cienkiej kreski daj ozdobny divider". Pelna szerokosc kreski dzielila strone na pol jak linijka; akcent zbiera podzial do jednego znaku nad napisem. Ten sam gradient co w poziomym separatorze ('layout.css') i pod naglowkami - granat -> czerwien -> granat. SYMETRYCZNY, bo separator nie ma kierunku czytania; klin z podkreslnika naglowka wygladalby tu jak strzalka. 'position:absolute' zamiast dodatkowego elementu w siatce: wiersz jest 'flex' i wysrodkowany, wiec pseudoelement w przeplywie staby sie TRZECIM elementem obok ikony i napisu i rozpychal wiersz. */ body.page .ct-new-columns:has(.ct-fancy-icon):has(h3)::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); /* TE SAME tokeny co podkreslnik naglowkow i srodek separatora (patrz ':root' w 'bm-newhome.css'). Wczesniej bylo tu wlasne 72 x 3 px z symetrycznym gradientem - i to wlasnie ta roznica byla widoczna na jednej stronie obok akcentu spod naglowka. */ width: var(--akcent-szer); height: var(--akcent-wys); background-image: var(--akcent-tlo); clip-path: var(--akcent-klin); } /* PIERWSZA legenda stoi tuz pod naglowkiem strony - tam nie ma czego rozdzielac, wiec kreska i duzy odstep sa zbedne. */ body.page :is(h1, h2, h3) + .ct-new-columns:has(.ct-fancy-icon):has(h3) { margin-top: clamp(10px, 1.6vw, 18px); padding-top: 0; } /* Pierwsza legenda nie dostaje akcentu - stoi tuz pod naglowkiem strony, ktory ma juz swoj wlasny podkreslnik. Dwa akcenty jeden pod drugim powielalyby ten sam znak. */ body.page :is(h1, h2, h3) + .ct-new-columns:has(.ct-fancy-icon):has(h3)::before { content: none; } /* Poziomy separator jest tu juz zbedny - podzial robi sama legenda, a dwa podzialy jeden pod drugim to halas. ZAKRES: 'salony.css' laduje sie WYLACZNIE na stronach salonow (patrz warunek w 'bm-newlayout.php'), wiec regula nie wychodzi poza nie. Separator uzyty gdziekolwiek indziej zachowuje wyglad opisany w 'layout.css'. DLACZEGO NIE WARUNKOWO: pierwsza wersja brzmiala '.oxel_horizontal_divider:has(+ .ct-new-columns:has(...))' i nie dzialala - CSS NIE POZWALA ZAGNIEZDZAC ':has()' w ':has()'. Selektor jest wtedy niepoprawny i przegladarka odrzuca cala regule po cichu; zmierzone: separator dalej mial 'display' inny niz 'none'. */ body.page .oxel_horizontal_divider { /* '!important' KONIECZNE: zrodlo trzyma 'display:flex' na identyfikatorze bloku ('#div_block-136-864' = 1,0,0), a ta regula ma (0,2,1). Zmierzone bez niego: separator dalej mial 'display: flex'. */ display: none !important; } /* Kolumny w tym wierszu ZNIKAJA Z UKLADU. 'display:contents' sprawia, ze same pudelka nie powstaja, a ikona i podpis staja sie bezposrednimi elementami wiersza - wiec ich szerokosci przestaja cokolwiek znaczyc. DLACZEGO NIE 'width:auto': probowalismy i przegralo. W zrodle kolumna z ikona ma 217 px na desktopie, a na waskim ekranie 100% - i oba zapisy siedza na IDENTYFIKATORZE (1,0,0). Przy remisie na '!important' rozstrzyga specyficznosc, wiec regula klasowa (0,4,2) przegrywa nawet z '!important'. Zmierzone na 390 px: obie kolumny nadal mialy po 350 px, ikona lezala 176 px od podpisu, a grupa wychodzila poza wiersz. Licytowanie sie na wage wymagaloby wpisania identyfikatorow, ktore sa rozne na kazdej stronie. 'display' zrodlo ustawia BEZ '!important', wiec tu wygrywamy bez zadnej listy. */ body.page .ct-new-columns:has(.ct-fancy-icon):has(h3) > .ct-div-block { display: contents !important; } /* Kropla do rozmiaru napisu. Wysokosc podajemy obu warstwom: samemu pudelku i rysunkowi w srodku - inaczej SVG zostaje przy 55 px i rozpycha wiersz od srodka. */ body.page .ct-new-columns:has(.ct-fancy-icon):has(h3) .ct-fancy-icon { /* 26 px, czyli mniej wiecej wysokosc wiersza napisu - ikona ma stac przy tekscie jak znak, a nie gorowac nad nim. Podniesione z 22 px razem ze stopniem podpisu. */ width: 26px !important; height: 26px !important; margin: 0 !important; line-height: 0; } body.page .ct-new-columns:has(.ct-fancy-icon):has(h3) .ct-fancy-icon svg { width: 26px !important; height: 26px !important; display: block; } /* Podpis: pismo tekstowe zamiast szeryfowego, bo to etykieta, a nie naglowek sekcji. Stopien podniesiony z 14 na 15 px - przy 22-pikselowej ikonie 14 px czytalo sie jak przypis. */ body.page .ct-new-columns:has(.ct-fancy-icon):has(h3) h3 { margin: 0 !important; padding: 0 !important; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; /* PODNIESIONE 2026-09-17: "to wazna informacja, powinna byc widoczna". Bylo '.9375rem/400' (15 px) - stopien przypisu. Teraz 1.125rem/500, czyli tyle, co lead sekcji ('.bmx-lead'), bo to zdanie rozstrzyga, czy klient pojedzie do tego salonu po kolor od reki, czy zamowi. */ font-size: 1.125rem !important; font-weight: 500 !important; line-height: 1.45 !important; /* Wyrownanie do LEWEJ, mimo ze cala grupa jest wysrodkowana. Na desktopie nie robi to roznicy - pudelko podpisu jest dopasowane do tekstu. Na waskim ekranie podpis zajmuje cala pozostala szerokosc i przy wysrodkowaniu ODKLEJAL SIE od kropli: miedzy znakiem a pierwsza litera robila sie przerwa. Do lewej tekst zaczyna sie tuz za ikona, czyli tak, jak ma wygladac. */ text-align: left !important; /* Granat tresci zamiast szarosci - przy wiekszym stopniu szary czytal sie jak dopisek techniczny. */ color: #171A1E !important; } /* Puste kolumny rusztowania. Przy 'display:contents' i tak nie rysuja nic, ale zapis zostaje na wypadek przegladarki bez jego obslugi. */ body.page .ct-new-columns:has(.ct-fancy-icon):has(h3) > .ct-div-block:empty { display: none !important; } /* Waski ekran: podpis ma sie lamac OBOK kropli, a nie pod nia. 'flex:0 1 auto' plus 'min-width:0' pozwalaja mu sie zwezic i zawinac wewnatrz wlasnego pudelka; przy zawijaniu calej grupy ('flex-wrap:wrap') kropla zostawala sama w pierwszym wierszu, co zmierzylismy na 390 px: wysokosc rosla do 98 px, a ikona wisiala nad tekstem. */ body.page .ct-new-columns:has(.ct-fancy-icon):has(h3) h3 { flex: 0 1 auto; min-width: 0; } /* Kropla nigdy sie nie kurczy - to znak, nie tekst. */ body.page .ct-new-columns:has(.ct-fancy-icon):has(h3) .ct-fancy-icon { flex: 0 0 auto; } /* ============================================================ KARTY "ZNAJDZ SALON" I "KOORDYNATORZY" - KSZTALT Z WYTYCZNYCH Zgloszenie klientki 2026-09-17: "brakuje border radiusow i lekkich obrysow ktore wystepuja przy kartach". Miala racje - obie kolumny mialy biale tlo, ale zerowy promien, zerowy obrys i zdjecie dochodzace do ostrej krawedzi. Reszta serwisu ma w tym miejscu karte: promien '--r', obrys 1 px i uniesienie na hover. Kolumna JEST karta: zawiera blok z naglowkiem i przyciskiem, pod nim zdjecie, a na wierzchu rozciagniety odnosnik z 'karty.js'. 'overflow:hidden' jest konieczne, zeby to zdjecie przycielo sie do promienia karty. Wartosci te same co przy kafelkach kategorii i na rozdrozu - jeden ksztalt karty w calym serwisie. ============================================================ */ body.page #new_columns-118-235 { gap: var(--gap-karty); /* SZEROKOSC TRZYMA ODSTEP WEWNETRZNY, NIE 'max-width'. Karty szly na cala szerokosc okna (1600 px), podczas gdy reszta tresci tej strony trzyma sie 1360 px - klientka: "po co te karty sa na max do bokow?". Pierwsza poprawka dala wierszowi 'max-width:1360px; margin:auto' i wyszedl DRUGI blad, ten sam co wczesniej na '/en/decorative-effects/': ten wiersz NIESIE TLO (kremowe, z rozjasnienia czerni wyzej w tym pliku), a 'body' strony jest BIALE. Zwezony wiersz zrobil wiec kremowy pas z bialymi klockami po bokach. ZASADA: nie zwezamy elementu, ktory niesie tlo. Tlo idzie na cala szerokosc, a tresc centruje odstep wewnetrzny. */ padding-inline: max(20px, calc((100% - 1360px) / 2)); box-sizing: border-box; } body.page #new_columns-118-235 > .ct-div-block { /* KOLUMNY MUSZA SIE KURCZYC, inaczej odstep je zawija. Zrodlo daje kazdej sztywne 'width:800px' (polowa z 1600), wiec 800 + 32 + 800 nie miescilo sie w wierszu i druga karta spadala pod pierwsza. 'flex:1 1 0' dzieli szerokosc PO odjeciu odstepu. */ flex: 1 1 0; width: auto !important; min-width: 0; position: relative; isolation: isolate; overflow: hidden; border: 1px solid rgba(11, 34, 64, .13); border-radius: var(--r); background-color: #fff; transition: transform .55s cubic-bezier(.22, 1, .36, 1), box-shadow .55s cubic-bezier(.22, 1, .36, 1), border-color .45s cubic-bezier(.22, 1, .36, 1); } body.page #new_columns-118-235 > .ct-div-block:hover, body.page #new_columns-118-235 > .ct-div-block:focus-within { transform: translateY(-7px); box-shadow: var(--shadow-mh); border-color: transparent; } /* Zdjecie przycina karta - wlasny promien zostawilby biale rogi. */ body.page #new_columns-118-235 > .ct-div-block img { display: block; width: 100%; height: auto; border-radius: 0; } /* Waski ekran: karty jedna pod druga. Bez tego dziela szerokosc telefonu na pol i wychodzi 186 px na karte - zmierzone przy 390 px. */ @media (max-width: 760px) { body.page #new_columns-118-235 { flex-direction: column; } body.page #new_columns-118-235 > .ct-div-block { flex: 1 1 auto; } }