/* ============================================================
STRONY TRESCIOWE - warstwa typograficzna
Ladowane na is_page(), z pominieciem stron majacych wlasne arkusze
(koszyk, zamowienie, moje konto) - patrz bm-newlayout.php.
DLACZEGO TYLKO TYPOGRAFIA, BEZ KOLOROW:
Uklady tych stron sa budowane indywidualnie w Oxygenie - 370 z 380 stron
ma wlasna zawartosc w builderze, wiec nie ma jednego layoutu do wdrozenia.
Wspolna jest za to typografia, i ona daje najwiecej za najmniejsze ryzyko.
Kolorow celowo NIE ruszamy. Oxygen ustawia globalnie 'h1..h6 { color:#ffffff }',
bo w serwisie jest **48 sekcji z ciemnym tlem** (policzone w CSS Oxygena).
Wymuszenie granatu unieczytelniloby naglowki na wszystkich tych sekcjach.
Kroje, rozmiary i wagi sa bezpieczne na kazdym tle - kolor nie.
Sprawdzone: 5 czarnych tel w 255.css siedzi w naglowku i stopce Oxygena,
ktore i tak ukrywamy (ostatnie to pasek copyrightu). Na tresci stron
problemu z czernia nie ma.
Autor: claude, 2026-08-20.
============================================================ */
body.page {
--navy: #0B2240;
--red: #DB0632;
--cream: #F5F1E9;
/* '--muted' byl tu UZYWANY, ale nigdy zdefiniowany - reguly z nim
byly wiec bezczynne i tekst dziedziczyl kolor z Oxygena.
Wartosc przyciemniona (2026-08-20): #6C7079 dawalo na bieli
kontrast 4.96:1, teraz jest 6.87:1. */
--muted: #3F4750;
--serif: "Playfair Display", Georgia, "Times New Roman", serif;
--sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* ---------- 1. Tekst biezacy -------------------------------
Oxygen ustawia 'body { font-family:Poppins; font-size:15px; font-weight:500 }'.
Przechodzimy na Inter i lzejsza grubosc, zgodnie z makieta. */
body.page {
font-family: var(--sans);
font-size: 16px;
/* Bylo 300. Inter Light na kremowym tle czytal sie jak wyblakly szary,
nawet po przyciemnieniu koloru - o czym uzytkownik dal znac dwa razy.
Grubosc 400 to normalny krok czytelnosci; Oxygen mial tu 500,
wiec strona nadal jest lzejsza od zrodla. */
font-weight: 400;
line-height: 1.7;
}
body.page p {
line-height: 1.7;
}
/* ---------- 2. Naglowki ------------------------------------
Oxygen: 'h1..h6 { font-family: Verdana; font-weight:700 }'.
Zamieniamy na szeryfowy Playfair o lzejszej grubosci - charakter
z makiety. KOLORU nie dotykamy (patrz naglowek pliku). */
body.page h1,
body.page h2,
body.page h3,
body.page h4,
body.page h5,
body.page h6 {
font-family: var(--serif);
font-weight: 500;
line-height: 1.18;
letter-spacing: -.01em;
text-wrap: balance;
}
/* Skala wielkosci - lagodniejsza niz sztywne 36px Oxygena
i skalujaca sie z szerokoscia ekranu. */
body.page h1 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
body.page h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
body.page h3 { font-size: clamp(1.22rem, 1.9vw, 1.5rem); }
body.page h4 { font-size: clamp(1.08rem, 1.5vw, 1.24rem); }
body.page h5,
body.page h6 { font-size: 1rem; }
/* ---------- 3. Nadtytuly i etykiety ------------------------
Krotkie teksty pisane wersalikami traktujemy jak nadtytuly z makiety -
sam krój i swiatlo miedzy literami, bez ingerencji w kolor. */
body.page .ct-text-block[style*="uppercase"],
body.page .ct-span[style*="uppercase"] {
font-family: var(--sans);
font-weight: 600;
letter-spacing: .14em;
}
/* ---------- 4. Listy i cytaty ------------------------------ */
body.page li {
line-height: 1.7;
}
body.page blockquote {
font-family: var(--serif);
font-style: italic;
font-size: 1.12rem;
line-height: 1.5;
}
/* ---------- 5. Tresc redakcyjna ----------------------------
Bloki wypelniane w edytorze (oxy-stock-content-styles) dostaja
szerokosc czytania, tak jak wpisy na blogu. */
body.page .oxy-stock-content-styles {
font-family: var(--sans);
font-size: 1.01rem;
font-weight: 300;
line-height: 1.78;
}
body.page .oxy-stock-content-styles p {
margin: 0 0 1.35em;
}
body.page .oxy-stock-content-styles img {
max-width: 100%;
height: auto;
}
/* ---------- 6. Menu boczne (#menu-sidebar-left-menu) -------
Zrodlo: universal.css, NIE szablon strony:
.sidebar-menu a { color:#000 }
.sidebar-menu .current-menu-item a,
.sidebar-menu a:hover { background-color:#000; color:#fff;
border-color:#000 }
Czern zamieniamy na granat z makiety.
Specyficznosc: zrodlo ma (0,1,1) i (0,2,2), a universal.css laduje sie PO
naszym arkuszu (sprawdzone przy karcie produktu), wiec remisu nie wolno
zrobic - dokladamy 'body.page' i wychodzimy na (0,2,2) oraz (0,3,3). */
body.page .sidebar-menu a {
color: var(--navy);
font-family: var(--sans);
}
body.page .sidebar-menu .current-menu-item a,
body.page .sidebar-menu a:hover {
background-color: var(--navy);
border-color: var(--navy);
color: #fff;
}
/* ---------- 7. /dla-profesjonalistow/ - czarne sekcje ------
225.css maluje na czarno sekcje z formularzem rejestracji i pasek
"Strefa architekta / Strefa wykonawcy". Zamieniamy na granat z makiety -
bialy tekst, ktory juz tam jest, zostaje czytelny.
Selektory zrodlowe to same ID (1,0,0); 'body.page' daje (1,1,1). */
body.page #section-138-225,
body.page #new_columns-122-225 {
background-color: var(--navy);
}
body.page #headline-139-225,
body.page #text_block-140-225 {
color: #fff;
}
/* Formularz rejestracji w tej sekcji.
225.css koloruje tylko naglowek i akapit wstepny (#headline-139-225,
#text_block-140-225). Sam formularz (#shortcode-141-225) ma w zrodle
WYLACZNIE 'width:100%' - zadnych kolorow. Zgody i akapity "Informujemy, ze"
dziedziczyly wiec ciemny kolor tekstu i na czarnym tle byly nieczytelne
juz wczesniej; na granacie byloby tak samo. Ustawiamy je na bialo.
Reguly WooCommerce dla inputow z universal.css tu NIE dzialaja - wszystkie
sa scope'owane pod '.woocommerce', a to jest Contact Form 7. */
body.page #section-138-225 .wpcf7,
body.page #section-138-225 .wpcf7 p,
body.page #section-138-225 .wpcf7 strong,
body.page #section-138-225 .wpcf7-list-item-label {
color: #fff;
font-family: var(--sans);
}
body.page #section-138-225 .wpcf7 a {
color: #fff;
text-decoration: underline;
text-underline-offset: 3px;
}
/* Pola: biale, zaokraglone jak komponenty makiety. */
body.page #section-138-225 .wpcf7 input[type="text"],
body.page #section-138-225 .wpcf7 input[type="email"],
body.page #section-138-225 .wpcf7 input[type="tel"],
body.page #section-138-225 .wpcf7 select,
body.page #section-138-225 .wpcf7 textarea {
background: #fff;
border: 1px solid transparent;
border-radius: var(--r-s);
padding: 11px 14px;
font-family: var(--sans);
font-size: .92rem;
color: var(--navy);
}
body.page #section-138-225 .wpcf7 input:focus,
body.page #section-138-225 .wpcf7 select:focus {
outline: none;
border-color: var(--red);
}
body.page #section-138-225 .wpcf7 ::placeholder {
color: #7b8797;
opacity: 1;
}
/* Przycisk wysylki - plaska czerwien, BEZ hoveru.
Decyzja klienta z 2026-08-20: wczesniejsza wersja odtwarzala efekt
"pedzla" z makiety na warstwie tla (input nie ma pseudoelementow,
wiec maski z .bmx-btn nie dalo sie uzyc) - cofnieta na zyczenie.
Przycisk ma byc czerwony i nieruchomy.
'appearance:none' zostaje - bez niego normalize Oxygena
('-webkit-appearance: button') kaze przegladarce narysowac wlasne tlo
i nasza czerwien znika. Ten sam problem zjadl kiedys ikone lupy
w wyszukiwarce naglowka. */
body.page #section-138-225 .wpcf7 input[type="submit"] {
-webkit-appearance: none;
appearance: none;
background: var(--red);
border: 1px solid var(--red);
border-radius: 999px;
padding: 15px 30px;
font-family: var(--sans);
font-size: .735rem;
font-weight: 600;
letter-spacing: .15em;
text-transform: uppercase;
color: #fff;
cursor: pointer;
}
/* CF7 trzyma przycisk wylaczony do czasu zaladowania skryptu - wtedy
bez lapki, zeby nie obiecywac klikniecia. */
body.page #section-138-225 .wpcf7 input[type="submit"][disabled] {
cursor: default;
opacity: .55;
}
/* Hover trzech przyciskow "PRZEJDZ" prowadzi teraz wspolny 'pedzel.css'.
Byly tu DWIE reguly hoveru na te same przyciski - ta (czerwien) i druga
przy wersji obrysowej nizej (granat). Wygrywala pozniejsza, czyli granat,
a ta byla martwa od 2026-08-20. Kolory podaje teraz jedno miejsce:
deklaracja '--bmx-farba' / '--bmx-tlo' przy wygladzie spoczynkowym. */
/* ============================================================
DLA PROFESJONALISTOW - oprawa (markup i kolejnosc: profesjonalisci.js)
============================================================ */
.bmx-pro-hero {
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(34px, 4.5vw, 68px) clamp(18px, 3vw, 30px) clamp(26px, 3vw, 44px);
background: #F5F1E9;
}
.bmx-pro-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(46% 58% at 12% 16%, rgba(219, 6, 50, .08), transparent 70%),
radial-gradient(50% 62% at 88% 22%, rgba(11, 34, 64, .10), transparent 72%);
}
.bmx-pro-hero__in { max-width: 1080px; margin: 0 auto; }
.bmx-pro-hero__e {
display: inline-block;
margin-bottom: 12px;
font-family: var(--sans);
font-size: .66rem;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--red);
}
.bmx-pro-hero__h {
margin: 0;
font-family: var(--serif);
font-weight: 400;
font-size: clamp(1.9rem, 4vw, 3rem);
line-height: 1.06;
letter-spacing: -.02em;
color: var(--navy);
}
.bmx-pro-hero__h em { font-style: italic; color: var(--red); }
.bmx-pro-hero__l {
margin: 18px 0 0;
max-width: 62ch;
font-family: var(--sans);
font-size: 1rem;
font-weight: 400;
line-height: 1.65;
color: var(--muted);
}
.bmx-pro-korzysci {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin: 30px 0 0;
padding: 0;
list-style: none;
}
@media (max-width: 780px) { .bmx-pro-korzysci { grid-template-columns: 1fr; } }
/* ============================================================
KORZYSCI - BEZ KART
Dwie poprzednie proby (biale prostokaty, potem prostokaty z ikonami
i czerwona krawedzia) wygladaly na doklejone: to tylko trzy krotkie
zdania, a dostawaly oprawe wazniejsza niz sama tresc.
Zostaje wiec sam tekst na tle naglowka, rozdzielony czerwona kreska
po lewej - dokladnie ten sam wzorzec, ktory dziala juz na ekranie
z mapa salonow. Zero pudelek, zero cieni.
============================================================ */
.bmx-pro-korzysci li {
display: flex;
flex-direction: column;
gap: 3px;
padding: 2px 0 2px 16px;
border-left: 2px solid var(--red);
background: transparent;
border-radius: 0;
box-shadow: none;
}
.bmx-pro-korzysci b {
font-family: var(--serif);
font-size: 1.16rem;
font-weight: 500;
line-height: 1.25;
color: var(--navy);
}
.bmx-pro-korzysci span {
font-family: var(--sans);
font-size: .84rem;
font-weight: 400;
line-height: 1.55;
color: var(--muted);
}
/* ---------- Strefy: trzy karty zamiast granatowego paska ---- */
body.page .bmx-pro-strefy,
body.page #new_columns-122-225 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(14px, 1.8vw, 24px);
max-width: 1080px;
margin: 0 auto;
padding: clamp(26px, 3vw, 46px) clamp(18px, 3vw, 30px);
background: #FCFAF6;
}
@media (max-width: 860px) {
body.page #new_columns-122-225 { grid-template-columns: 1fr; }
}
body.page #new_columns-122-225 > div {
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 190px;
padding: 22px;
background: #fff;
border: 1px solid rgba(11, 34, 64, .08);
border-radius: var(--r);
transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s cubic-bezier(.22,1,.36,1), border-color .5s cubic-bezier(.22,1,.36,1);
}
body.page #new_columns-122-225 > div:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-mh);
border-color: transparent;
}
body.page #new_columns-122-225 h2 {
margin: 0 0 14px;
font-family: var(--serif);
font-weight: 500;
font-size: clamp(1.15rem, 1.9vw, 1.45rem);
line-height: 1.2;
color: var(--navy);
}
/* Przyciski "PRZEJDZ" w kartach - wersja obrysowa, zeby nie konkurowaly
z czerwonym przyciskiem wysylki formularza nizej. */
body.page #link_button-126-225,
body.page #link_button-131-225,
body.page #link_button-136-225 {
/* Czym zamalowuje sie przycisk i co jest pod farba - patrz 'pedzel.css'. */
--bmx-farba: var(--navy);
--bmx-tlo: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
align-self: flex-start;
padding: 11px 22px;
border: 1px solid rgba(11, 34, 64, .3);
border-radius: 999px;
background: transparent;
font-family: var(--sans);
font-size: .68rem;
font-weight: 600;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--navy);
text-decoration: none;
}
/* ---------- Formularz: pola w dwoch kolumnach --------------- */
body.page #section-138-225 .cf-main > p {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 0;
}
@media (max-width: 700px) {
body.page #section-138-225 .cf-main > p { grid-template-columns: 1fr; }
}
body.page #section-138-225 .cf-main > p > br { display: none; }
body.page #section-138-225 .wpcf7-form-control-wrap { display: block; }
/* ============================================================
DLA PROFESJONALISTOW - STREFY: poprawka ukladu
============================================================
Zrodlo buduje kazda kolumne jako flex W POZIOMIE z dwoma blokami:
#div_block-123-225 (33%, display:flex)
|- #div_block-124-225 -> bialy blok z naglowkiem i przyciskiem
|- #div_block-127-225 -> blok ze ZDJECIEM w tle
Tekst i zdjecie dzielily wiec te same 33% szerokosci - stad waskie,
scisniete slupki, w ktorych nic nie bylo widac.
Odwracamy os na PIONOWA i przestawiamy kolejnosc ('column-reverse'),
zeby zdjecie trafilo NA GORE karty, a tresc pod nie. Zdjecia dostaja
wlasne proporcje, tresc rosnie do dolu - dzieki temu przyciski we
wszystkich trzech kartach sa na jednej wysokosci.
============================================================ */
body.page #new_columns-122-225 > div {
display: flex;
flex-direction: column-reverse; /* w kodzie: tresc, potem zdjecie */
justify-content: flex-end;
min-height: 0;
padding: 0;
overflow: hidden;
}
/* Blok ze zdjeciem - na gorze karty. */
body.page #div_block-127-225,
body.page #div_block-132-225,
body.page #div_block-137-225 {
width: 100%;
height: auto;
aspect-ratio: 16 / 10;
background-size: cover;
background-position: center;
transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
body.page #new_columns-122-225 > div:hover #div_block-127-225,
body.page #new_columns-122-225 > div:hover #div_block-132-225,
body.page #new_columns-122-225 > div:hover #div_block-137-225 {
transform: scale(1.04);
}
/* Blok z trescia - pod zdjeciem, wyrownany i dociagniety do dolu. */
body.page #div_block-124-225,
body.page #div_block-129-225,
body.page #div_block-134-225 {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
flex: 1;
width: 100%;
padding: 22px 22px 24px;
background-color: #fff;
text-align: left;
}
body.page #new_columns-122-225 h2 {
margin: 0;
width: 100%;
}
/* Przycisk zawsze przy dolnej krawedzi - rowno we wszystkich kartach. */
body.page #link_button-126-225,
body.page #link_button-131-225,
body.page #link_button-136-225 {
margin-top: auto;
}
/* ============================================================
DLA PROFESJONALISTOW - STREFY: pelna szerokosc i wysrodkowanie
Kolumny ('.ct-div-block.aos-init.aos-animate') maja w zrodle
'width: 33.33%'. Rozciagamy je na cala szerokosc komorki siatki,
a wszystko w srodku - zdjecie, naglowek i przycisk - ustawiamy
na pelna szerokosc i wysrodkowujemy.
============================================================ */
body.page #new_columns-122-225 > .ct-div-block,
body.page #div_block-123-225,
body.page #div_block-128-225,
body.page #div_block-133-225 {
width: 100%;
max-width: none;
flex: 1 1 auto;
}
/* Blok z trescia: wszystko na srodku i na cala szerokosc. */
body.page #div_block-124-225,
body.page #div_block-129-225,
body.page #div_block-134-225 {
align-items: center;
text-align: center;
width: 100%;
max-width: none;
}
body.page #new_columns-122-225 h2,
body.page #new_columns-122-225 h2 > div {
width: 100%;
text-align: center !important; /* zrodlo ma 'text-align' w atrybucie style */
}
/* Przycisk na cala szerokosc bloku, napis na srodku. */
body.page #link_button-126-225,
body.page #link_button-131-225,
body.page #link_button-136-225 {
align-self: stretch;
width: 100%;
text-align: center;
}
/* ============================================================
DLA PROFESJONALISTOW - TLA NA CALA SZEROKOSC EKRANU
Sekcje mialy 'max-width' razem z tlem, wiec po bokach zostawaly biale
pasy az do krawedzi okna. Rozciagamy SAM ELEMENT na pelna szerokosc
ujemnymi marginesami, a tresc trzymamy w tej samej kolumnie co reszta
serwisu duzym paddingiem bocznym.
Celowo bez '100vw': ta jednostka liczy takze pasek przewijania, przez
co strona dostawalaby kilkupikselowy poziomy suwak. 'calc(50% - 50vw)'
na marginesach daje ten sam efekt bez tego skutku ubocznego.
============================================================ */
body.page .bmx-pro-hero,
body.page #new_columns-122-225 {
max-width: none;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding-left: max(calc(50vw - 560px), 18px);
padding-right: max(calc(50vw - 560px), 18px);
}
body.page .bmx-pro-hero__in {
max-width: none;
margin: 0;
}
/* ============================================================
KOLOR I INSPIRACJE (/kolor-inspiracje/, szablon 63)
============================================================
Ta sama konstrukcja co strefy na /dla-profesjonalistow/: kazdy kafelek
to kolumna 33% z flexem W POZIOMIE, w ktorej tekst i zdjecie dziela
miejsce po polowie. Przy JEDENASTU kafelkach dawalo to scianke waskich
slupkow. Odwracamy os na pionowa - zdjecie na gorze, tresc pod nim.
Tlo siatki bylo czarne ('#new_columns-99-63'), a hovery przyciskow tez
czarne - przechodzimy na palete makiety.
============================================================ */
.bmx-insp-hero {
position: relative;
isolation: isolate;
overflow: hidden;
max-width: none;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding: clamp(34px, 4.5vw, 64px) max(calc(50vw - 560px), 18px) clamp(24px, 3vw, 40px);
background: var(--cream);
}
.bmx-insp-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(48% 60% at 14% 14%, rgba(219, 6, 50, .08), transparent 70%),
radial-gradient(52% 64% at 86% 22%, rgba(11, 34, 64, .10), transparent 72%);
}
.bmx-insp-hero__e {
display: inline-block;
margin-bottom: 12px;
font-family: var(--sans);
font-size: .66rem;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--red);
}
.bmx-insp-hero__h {
margin: 0;
font-family: var(--serif);
font-weight: 400;
font-size: clamp(1.9rem, 4vw, 3rem);
line-height: 1.06;
letter-spacing: -.02em;
color: var(--navy);
}
.bmx-insp-hero__h em { font-style: italic; color: var(--red); }
.bmx-insp-hero__l {
margin: 18px 0 0;
max-width: 58ch;
font-family: var(--sans);
font-size: 1rem;
font-weight: 400;
line-height: 1.65;
color: var(--muted);
}
/* ---------- Siatka kafelkow --------------------------------
TRZY KOLUMNY, nie 'auto-fill'. Poprawione 2026-09-16.
'repeat(auto-fill, minmax(262px, 1fr))' daje na 1440 px CZTERY
kolumny, a kafelkow jest szesc - wychodzilo 4 + 2, z dziura
w drugim wierszu. Makieta klientki pokazuje 3 + 3 i tak tez
dzielil je stary serwis.
Trzy kolumny sa wpisane na sztywno, bo liczba kafelkow jest
redakcyjna i stala; 'auto-fill' probowal ja zgadywac z szerokosci
ekranu i przy kazdej innej rozdzielczosci ukladal je inaczej. */
body.page #new_columns-99-63 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(14px, 1.8vw, 24px);
max-width: none;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding: clamp(26px, 3vw, 46px) max(calc(50vw - 560px), 18px);
background-color: #FCFAF6;
justify-content: initial;
}
/* Ponizej 1000 px trzy kolumny robia sie za waskie - schodzimy na dwie,
a na telefonie na jedna. */
@media (max-width: 1000px) {
body.page #new_columns-99-63 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
body.page #new_columns-99-63 { grid-template-columns: 1fr; }
}
/* Kafelek: zdjecie u gory, tresc pod spodem. */
body.page #new_columns-99-63 > .ct-div-block {
display: flex;
flex-direction: column-reverse; /* w kodzie: tresc, potem zdjecie */
justify-content: flex-end;
width: 100%;
min-width: 0;
padding: 0;
overflow: hidden;
background: #fff;
border: 1px solid rgba(11, 34, 64, .08);
border-radius: var(--r);
transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s cubic-bezier(.22,1,.36,1), border-color .5s cubic-bezier(.22,1,.36,1);
}
body.page #new_columns-99-63 > .ct-div-block:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-mh);
border-color: transparent;
}
/* Blok ze zdjeciem to DRUGIE dziecko kolumny - stad ':last-child'. */
body.page #new_columns-99-63 > .ct-div-block > .ct-div-block:last-child {
width: 100%;
height: auto;
aspect-ratio: 16 / 10;
background-size: cover;
background-position: center;
transition: transform .6s cubic-bezier(.22,1,.36,1);
}
body.page #new_columns-99-63 > .ct-div-block:hover > .ct-div-block:last-child {
transform: scale(1.04);
}
/* Blok z trescia. */
body.page #new_columns-99-63 > .ct-div-block > .ct-div-block:first-child {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
flex: 1;
width: 100%;
padding: 20px 20px 22px;
background-color: #fff;
text-align: center;
}
body.page #new_columns-99-63 h2,
body.page #new_columns-99-63 h2 > div {
margin: 0;
width: 100%;
font-family: var(--serif);
font-weight: 500;
font-size: clamp(1.06rem, 1.6vw, 1.28rem);
line-height: 1.24;
color: var(--navy);
text-align: center !important; /* zrodlo ustawia wyrownanie w atrybucie style */
}
/* Przyciski "poznaj" - obrysowe, przy dolnej krawedzi, rowno we wszystkich
kafelkach. W zrodle mialy czarny hover. */
body.page #new_columns-99-63 .ct-link-button {
display: inline-flex;
align-items: center;
justify-content: center;
align-self: stretch;
width: 100%;
margin-top: auto;
padding: 11px 20px;
border: 1px solid rgba(11, 34, 64, .3);
border-radius: 999px;
background: transparent;
font-family: var(--sans);
font-size: .68rem;
font-weight: 600;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--navy);
text-decoration: none;
text-align: center;
transition: background .3s cubic-bezier(.22,1,.36,1), color .3s cubic-bezier(.22,1,.36,1), border-color .3s cubic-bezier(.22,1,.36,1);
}
body.page #new_columns-99-63 .ct-link-button:hover {
background-color: var(--navy);
border-color: var(--navy);
color: #fff;
}
/* ============================================================
WERSJE ANGIELSKIE STRON KONTAKTU - TE SAME REGULY, DRUGI ADRES
Dopisane 2026-09-17 po zgloszeniu: "czemu to jest ciemne?"
o '/en/contact/about-us/'.
Czarne tlo pochodzi z '#section-7-81' - to identyfikator SZABLONU,
wiec dzieli go kazda strona kontaktu w OBU jezykach. Naprawa robiona
byla jednak strona po stronie: najpierw 249 (dane kontaktowe), potem
325 (o nas). Komentarz przy 325 mowi to wprost: "Dolacz do nas"
i "Kariera" korzystaja z tego samego szablonu, ale nie byly
przedmiotem zadania i zostaja bez zmian.
Skutek: angielskie blizniaki zostaly czarne, z 17 bialymi napisami
na 21 (zmierzone na '/en/contact/about-us/').
Zamiast pisac trzeci komplet regul, dopisujemy do KAZDEGO selektora
identyfikator blizniaka z WPML:
325 (o nas) -> 6945 (about-us)
249 (dane kontaktowe) -> 6941 (contact-data)
Dzieki temu obie wersje sa sterowane tym samym kodem i nie rozjada
sie przy nastepnej zmianie.
============================================================ */
/* ============================================================
KONTAKT (/kontakt/dane-kontaktowe/, szablon 249)
============================================================
Strona stala na CZARNYM tle ('#section-7-81') z bialym tekstem
rozsianym po TRZYNASTU miejscach: piec blokow z adresami dzialow,
piec ikon kopert, dane spolki, naglowek "Koordynatorzy" i menu boczne.
Przechodzimy na jasne tlo makiety, wiec kazde z tych miejsc trzeba
przemalowac - pominiecie jednego = bialy tekst na bieli.
Ciemny zostaje TYLKO panel "Koordynatorzy regionow" - jako swiadomy
akcent, nie zaszlosc.
Wszystkie selektory zrodlowe to ID (1,0,0); 'body.page' daje (1,1,1).
============================================================ */
body.page .bmx-kon-sekcja,
body.page.page-id-249 #section-7-81,
body.page.page-id-6941 #section-7-81 {
background-color: #FCFAF6;
}
/* ---------- Naglowek ---------------------------------------- */
.bmx-kon-hero { margin: 0 0 30px; }
.bmx-kon-hero__e {
display: inline-block;
margin-bottom: 12px;
font-family: var(--sans);
font-size: .66rem;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--red);
}
.bmx-kon-hero__h {
margin: 0;
font-family: var(--serif);
font-weight: 400;
font-size: clamp(1.8rem, 3.6vw, 2.7rem);
line-height: 1.08;
letter-spacing: -.02em;
color: var(--navy);
}
.bmx-kon-hero__h em { font-style: italic; color: var(--red); }
.bmx-kon-hero__l {
margin: 16px 0 0;
max-width: 60ch;
font-family: var(--sans);
font-size: .98rem;
font-weight: 400;
line-height: 1.65;
color: var(--muted);
}
/* ---------- Adresy dzialow jako karty -----------------------
Dwa osobne bloki kolumn (trzy + dwa dzialy) - obu dajemy te sama
siatke, wiec razem czytaja sie jak jeden komplet. */
/* FLEX, nie grid: przy siatce ostatni rzad zostawialby puste kolumny
i dwie ostatnie karty ("Rekrutacja", "Public Relations") wygladaly na
przyklejone do lewej. Przy 'flex-wrap' z 'flex-grow' karty w kazdym
rzedzie rozciagaja sie na cala dostepna szerokosc.
Oba bloki kolumn scala w jeden kontakt.js - patrz komentarz tam. */
body.page #new_columns-60-249,
body.page #new_columns-104-249 {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 14px;
width: 100%;
padding: 0;
}
body.page #div_block-61-249,
body.page #div_block-62-249,
body.page #div_block-63-249,
body.page #div_block-105-249,
body.page #div_block-111-249,
body.page #div_block-117-249 {
flex: 1 1 230px;
min-width: 0;
width: auto;
padding: 0;
}
body.page #new_columns-60-249 .ct-link,
body.page #new_columns-104-249 .ct-link {
display: flex;
flex-direction: column;
gap: 8px;
height: 100%;
padding: 20px;
background: #fff;
border: 1px solid rgba(11, 34, 64, .08);
border-radius: var(--r);
text-decoration: none;
transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s cubic-bezier(.22,1,.36,1), border-color .4s cubic-bezier(.22,1,.36,1);
}
body.page #new_columns-60-249 .ct-link:hover,
body.page #new_columns-104-249 .ct-link:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-mh);
border-color: transparent;
}
/* Nazwa dzialu */
body.page #text_block-71-249,
body.page #text_block-80-249,
body.page #text_block-89-249,
body.page #text_block-107-249,
body.page #text_block-113-249 {
font-family: var(--serif);
font-size: 1.1rem;
font-weight: 500;
line-height: 1.25;
color: var(--navy);
}
/* Wiersz z ikona i adresem e-mail */
body.page #div_block-74-249,
body.page #div_block-81-249,
body.page #div_block-90-249,
body.page #div_block-108-249,
body.page #div_block-114-249 {
display: flex;
align-items: flex-start;
gap: 9px;
}
body.page #text_block-67-249,
body.page #text_block-83-249,
body.page #text_block-92-249,
body.page #text_block-110-249,
body.page #text_block-116-249 {
font-family: var(--sans);
font-size: .84rem;
font-weight: 400;
line-height: 1.5;
color: var(--muted);
overflow-wrap: anywhere;
}
body.page #fancy_icon-66-249,
body.page #fancy_icon-82-249,
body.page #fancy_icon-91-249,
body.page #fancy_icon-109-249,
body.page #fancy_icon-115-249 {
flex: none;
color: var(--red);
}
/* ---------- Panel "Koordynatorzy regionow" ------------------
Jedyny ciemny element na stronie - celowo, zeby odcinal sie jako
glowne wezwanie do dzialania. Zrodlo mialo szarosc #323940. */
/* Panel koordynatorow byl w zrodle TRZECIA kolumna drugiego rzedu
(obok "Rekrutacja" i "Public Relations"), wiec wraca na swoje miejsce
w tym samym wierszu - z ta sama baza szerokosci co karty dzialow
i pelna wysokoscia rzedu. */
body.page #div_block-126-249 {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 14px;
width: 100%;
height: 100%;
margin: 0;
padding: 24px;
background-color: var(--navy);
border-radius: var(--r);
}
body.page #text_block-171-249 {
font-family: var(--serif);
font-size: 1.2rem;
font-weight: 500;
line-height: 1.25;
color: #fff;
}
body.page #link_button-132-249 {
/* WYJATEK. Ten przycisk stoi na GRANATOWEJ karcie ("Koordynatorzy
regionow"), wiec domyslna farba z 'pedzel.css' - granat - byla
by granatem na granacie i pedzla nie byloby widac.
Malujemy go bielą, tak jak makieta maluje przyciski stojace
na ciemnym tle ('.bmx-btn--light'). */
--bmx-farba: #fff;
--bmx-tlo: var(--red);
/* Farba jest JASNA, wiec napis pod nia musi byc ciemny, a zwloki
przejscia odwrocone - inaczej przez pierwsze 0,35 s bialy napis
stoi na bialej farbie i znika. Mechanizm w 'pedzel.css',
blok "FARBA JASNA". */
--bmx-tekst: var(--navy);
--bmx-zwloka-wej: 0s;
--bmx-zwloka-wyj: .35s;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 24px;
border: 1px solid var(--red);
border-radius: 999px;
background-color: var(--red);
font-family: var(--sans);
font-size: .69rem;
font-weight: 600;
letter-spacing: .13em;
text-transform: uppercase;
color: #fff;
text-decoration: none;
}
/* Na bialej farbie tekst musi byc granatowy, a nie bialy.
'pedzel.css' ustawia hoverom 'color:#fff !important' - remis
miedzy dwoma '!important' rozstrzyga specyficznosc, a nasza
(1,1,1) bije tamta (0,2,1). */
body.page #link_button-132-249:hover,
body.page #link_button-132-249:focus-visible {
color: var(--navy) !important;
}
/* ---------- Dane spolki, telefon, godziny ------------------- */
body.page #new_columns-134-249 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
width: 100%;
margin-top: 26px;
}
body.page #div_block-135-249,
body.page #div_block-136-249 { width: 100%; }
body.page #div_block-137-249,
body.page #div_block-149-249 {
height: 100%;
padding: 22px;
background: #fff;
border: 1px solid rgba(11, 34, 64, .08);
border-radius: var(--r);
}
body.page #headline-138-249 {
margin: 0 0 14px;
padding-bottom: 12px;
font-family: var(--serif);
font-size: 1.16rem;
font-weight: 500;
color: var(--navy);
border-bottom: 1px solid rgba(11, 34, 64, .1);
}
body.page #div_block-141-249,
body.page #div_block-145-249,
body.page #div_block-150-249,
body.page #div_block-158-249,
body.page #div_block-173-249 {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 10px;
font-family: var(--sans);
font-size: .88rem;
font-weight: 300;
line-height: 1.6;
color: var(--ink, #171A1E);
}
body.page #fancy_icon-142-249,
body.page #fancy_icon-146-249,
body.page #fancy_icon-159-249,
body.page #fancy_icon-174-249,
body.page #fancy_icon-180-249 {
flex: none;
color: var(--red);
}
body.page #_rich_text-154-249 {
font-family: var(--sans);
font-size: .88rem;
font-weight: 300;
line-height: 1.6;
color: var(--ink, #171A1E);
}
/* ---------- Menu boczne strony kontaktu -------------------- */
body.page #_nav_menu-133-249 .menu-item a {
color: var(--navy);
font-family: var(--sans);
}
body.page #_nav_menu-133-249 .current-menu-item a {
background-color: var(--navy);
color: #fff;
}
/* ============================================================
STRONA "O NAS" (/kontakt/o-nas/, ID 325) - i TYLKO ona
============================================================
TLO: '#section-7-81 { background-color:#000000 }' w 325.css to selektor
IDENTYFIKATORA, waga (1,0,0). Poprzednia proba uzywala klasy dokladanej
skryptem - (0,2,1) - i przegrywala, wiec czern zostawala. Trzeba wiec
celowac w ten sam identyfikator: 'body.page-id-325 #section-7-81'
celowac w ten sam identyfikator: 'body.page-id-6945 #section-7-81'
daje (1,1,1) i wygrywa.
Zakres zawezony do ID 325: "Dolacz do nas" i "Kariera" korzystaja z tego
samego szablonu, ale nie byly przedmiotem zadania i zostaja bez zmian.
============================================================ */
body.page-id-325 #section-7-81,
body.page-id-6945 #section-7-81 {
background-color: #FCFAF6;
}
/* ODSTEP POD NAGLOWKIEM - zmierzony i skorygowany 2026-09-17.
Zgloszenie: "pod naglowkiem jest za duza przestrzen do tresci".
Bylo 142 px i skladalo sie z TRZECH warstw, z ktorych zadna nie wiedziala
o pozostalych:
30 px margines dolny tego bloku
40 px odstep wierszy siatki '.bmx-onas-tresc'
72 px gorny margines pierwszej pary '.bmx-art__para' (5vw przy 1440)
Zerujemy trzecia warstwe (regula nizej) i zostawiamy dwie pierwsze,
ktore daja 40 px - tyle samo, co odstep miedzy kolejnymi parami tresci.
Wlasny margines bloku schodzi do zera, bo naglowek ma teraz ozdobny
akcent z wlasnym 'padding-bottom'. */
body.page-id-325 .bmx-onas-hero { margin: 0; }
body.page-id-6945 .bmx-onas-hero { margin: 0; }
/* Pierwsza para tresci stoi tuz pod naglowkiem, wiec nie potrzebuje
gornego marginesu, ktory komponent daje parom stojacym po sobie.
SASIEDZTWO, NIE ':first-of-type'. Pierwsza proba uzywala
'.bmx-art__para:first-of-type' i nie dzialala: blok naglowka tez jest
DIV-em i stoi przed parami, wiec "pierwszym tego typu" byl ON, a nie
para. Zmierzone: odstep zostawal 112 px zamiast 40. */
body.page-id-325 .bmx-onas-hero + .bmx-art__para,
body.page-id-6945 .bmx-onas-hero + .bmx-art__para {
margin-top: 0;
}
body.page-id-325 .bmx-onas-hero__e,
body.page-id-6945 .bmx-onas-hero__e {
display: inline-block;
margin-bottom: 10px;
font-family: var(--sans);
font-size: .66rem;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--red);
}
body.page-id-325 .bmx-onas-hero__h,
body.page-id-6945 .bmx-onas-hero__h {
margin: 0;
font-family: var(--serif);
font-weight: 400;
font-size: clamp(1.8rem, 3.6vw, 2.7rem);
line-height: 1.08;
letter-spacing: -.02em;
color: var(--navy);
}
/* Tresc: pary zdjecie + tekst, naprzemiennie. */
body.page-id-325 .bmx-onas-tresc,
body.page-id-6945 .bmx-onas-tresc {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(20px, 3vw, 40px) clamp(24px, 3.5vw, 52px);
align-items: center;
}
@media (max-width: 820px) {
body.page-id-325 .bmx-onas-tresc { grid-template-columns: 1fr; }
body.page-id-6945 .bmx-onas-tresc { grid-template-columns: 1fr; }
}
body.page-id-325 .bmx-onas-hero { grid-column: 1 / -1; }
body.page-id-6945 .bmx-onas-hero { grid-column: 1 / -1; }
body.page-id-325 .bmx-onas-tresc > img,
body.page-id-6945 .bmx-onas-tresc > img {
width: 100%;
height: auto;
border-radius: var(--r);
}
/* Druga para odwrocona - zdjecie z prawej. */
body.page-id-325 .bmx-onas-tresc > img:nth-of-type(2) { order: 2; }
body.page-id-6945 .bmx-onas-tresc > img:nth-of-type(2) { order: 2; }
body.page-id-325 .bmx-onas-tresc > .oxy-rich-text:nth-of-type(2) { order: 1; }
body.page-id-6945 .bmx-onas-tresc > .oxy-rich-text:nth-of-type(2) { order: 1; }
/* Tekst byl bialy ('color:#fff' w 325.css, waga ID) - stad ten sam chwyt. */
body.page-id-325 #_rich_text-173-325,
body.page-id-6945 #_rich_text-173-325,
body.page-id-325 #_rich_text-175-325,
body.page-id-6945 #_rich_text-175-325,
body.page-id-325 #_rich_text-178-325,
body.page-id-6945 #_rich_text-178-325 {
margin: 0;
font-family: var(--sans);
font-size: 1rem;
font-weight: 300;
line-height: 1.75;
color: #171A1E;
}
body.page-id-325 #_rich_text-173-325 p,
body.page-id-6945 #_rich_text-173-325 p,
body.page-id-325 #_rich_text-175-325 p,
body.page-id-6945 #_rich_text-175-325 p,
body.page-id-325 #_rich_text-178-325 p,
body.page-id-6945 #_rich_text-178-325 p {
margin: 0 0 1.1em;
}
body.page-id-325 #_rich_text-173-325 p:last-child,
body.page-id-6945 #_rich_text-173-325 p:last-child,
body.page-id-325 #_rich_text-175-325 p:last-child,
body.page-id-6945 #_rich_text-175-325 p:last-child,
body.page-id-325 #_rich_text-178-325 p:last-child { margin-bottom: 0; }
body.page-id-6945 #_rich_text-178-325 p:last-child { margin-bottom: 0; }
/* Cytat otwierajacy - w zrodle zwykle pogrubienie. */
body.page-id-325 #_rich_text-173-325 p:first-child strong,
body.page-id-6945 #_rich_text-173-325 p:first-child strong {
display: block;
font-family: var(--serif);
font-size: 1.22rem;
font-weight: 500;
line-height: 1.4;
color: var(--navy);
}
/* Menu boczne na tej stronie - w 325.css linki sa biale. */
body.page-id-325 #_nav_menu-133-249 .menu-item a { color: var(--navy); }
body.page-id-6945 #_nav_menu-133-249 .menu-item a { color: var(--navy); }
body.page-id-325 #_nav_menu-133-249 .current-menu-item a,
body.page-id-6945 #_nav_menu-133-249 .current-menu-item a {
background-color: var(--navy);
color: #fff;
}
/* ============================================================
KONTAKT - poprawka: rowne wysokosci i wyrownanie do lewej
============================================================
1. Panel "Koordynatorzy" byl nizszy od sasiednich kart, bo jego kolumna
('#div_block-117-249') nie rozciagala wnetrza na cala wysokosc rzedu.
Robimy z niej kontener flex, wiec panel wypelnia rzad.
2. Karty dzialow wyrownujemy do lewej WPROST. Zrodlo ustawia
'text-align:center' na panelu koordynatorow, a wyrownanie potrafi
splynac na sasiadow przez dziedziczenie - stad wysrodkowany tekst
w "Public Relations".
============================================================ */
body.page #div_block-117-249 {
display: flex;
align-items: stretch;
}
body.page #new_columns-60-249 > .ct-div-block,
body.page #new_columns-104-249 > .ct-div-block {
display: flex;
align-items: stretch;
}
/* Karty dzialow: tresc od lewej krawedzi. */
body.page #new_columns-60-249 .ct-link,
body.page #new_columns-104-249 .ct-link {
align-items: flex-start;
text-align: left;
width: 100%;
}
body.page #text_block-71-249,
body.page #text_block-80-249,
body.page #text_block-89-249,
body.page #text_block-107-249,
body.page #text_block-113-249,
body.page #text_block-67-249,
body.page #text_block-83-249,
body.page #text_block-92-249,
body.page #text_block-110-249,
body.page #text_block-116-249 {
width: 100%;
text-align: left;
}
/* Wyrownanie zapisane w atrybucie 'style' na wewnetrznych divach
(zrodlo generuje tam 'text-align: left') - domykamy calosc. */
body.page #new_columns-60-249 .ct-text-block > div,
body.page #new_columns-104-249 .ct-text-block > div {
text-align: left !important;
}
/* Naglowek "O nas" - do lewej.
Wysrodkowanie splywa z '#div_block-100-249', ktore w 325.css jest
flexem, a nasza siatka tresci dziedziczy po nim wyrownanie tekstu. */
body.page-id-325 .bmx-onas-hero,
body.page-id-6945 .bmx-onas-hero {
text-align: left;
justify-self: start;
}
body.page-id-325 .bmx-onas-hero__e,
body.page-id-6945 .bmx-onas-hero__e,
body.page-id-325 .bmx-onas-hero__h,
body.page-id-6945 .bmx-onas-hero__h {
text-align: left;
}
/* ---------- Kontakt: margines pod trescia karty -------------
Ostatni blok w karcie ("Email: ...") mial dolny margines z szablonu,
przez co karta "Public Relations" konczyla sie wyzej niz sasiednie.
Zerujemy go na wszystkich kartach dzialow. */
body.page #new_columns-60-249 .ct-link > *:last-child,
body.page #new_columns-104-249 .ct-link > *:last-child,
body.page #div_block-74-249,
body.page #div_block-81-249,
body.page #div_block-90-249,
body.page #div_block-108-249,
body.page #div_block-114-249,
body.page #text_block-67-249,
body.page #text_block-83-249,
body.page #text_block-92-249,
body.page #text_block-110-249,
body.page #text_block-116-249 {
margin-bottom: 0;
}
/* ---------- O nas: naglowek na pelna szerokosc --------------
Bez 'width:100%' blok zwezal sie do szerokosci tekstu i w siatce
ladowal na srodku kolumny - stad wrazenie wysrodkowania mimo
ustawionego 'text-align: left'. */
body.page-id-325 .bmx-onas-hero,
body.page-id-6945 .bmx-onas-hero {
width: 100%;
max-width: none;
justify-self: stretch;
}
/* Karta "Public Relations" - resztkowy margines pod odnosnikiem karty. */
body.page #link-112-249 {
margin-bottom: 0px;
}
/* ---------- Formularz rejestracji: pelna szerokosc pol -------
Pola mialy w znacznikach 'size="40"', ale bez ustawionej szerokosci
przegladarka liczy je ze znakow - przy dwukolumnowej siatce wychodzily
waskie paski, w ktorych nie bylo widac wpisywanego tekstu.
Rozciagamy pola i ich opakowania na cala szerokosc kolumny. */
body.page #section-138-225 .wpcf7-form-control-wrap {
display: block;
width: 100%;
min-width: 0;
}
body.page #section-138-225 .wpcf7 input[type="text"],
body.page #section-138-225 .wpcf7 input[type="email"],
body.page #section-138-225 .wpcf7 input[type="tel"],
body.page #section-138-225 .wpcf7 select,
body.page #section-138-225 .wpcf7 textarea {
box-sizing: border-box;
display: block;
width: 100%;
min-width: 0;
max-width: none;
height: 48px;
}
body.page #section-138-225 .wpcf7 textarea { height: auto; min-height: 110px; }
/* Pole "Miejscowosc" stoi w zrodle samo w drugim akapicie - niech zajmie
caly wiersz zamiast polowy. */
body.page #section-138-225 .cf-main > p > span[data-name="city"] {
grid-column: 1 / -1;
}
/* ---------- Formularz rejestracji: wysrodkowanie -------------
Sekcja ma pelna szerokosc ekranu, a formularz zostawal przy lewej
krawedzi. Ograniczamy jego szerokosc do kolumny czytania i centrujemy
razem z naglowkiem sekcji. */
body.page #section-138-225 > .ct-section-inner-wrap {
max-width: 1120px;
margin-left: auto;
margin-right: auto;
}
body.page #shortcode-141-225,
body.page #section-138-225 .wpcf7,
body.page #section-138-225 .wpcf7-form {
width: 100%;
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
body.page #headline-139-225,
body.page #text_block-140-225 {
max-width: 760px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
/* ============================================================
FORMULARZ REJESTRACJI - JASNA SEKCJA
============================================================
Sekcja byla granatowa, a stopka serwisu tez jest granatowa - obie
zlewaly sie w jedna plame i strona wygladala, jakby konczyla sie
wczesniej. Odwracamy wiec te sekcje na jasna: kremowe tlo, formularz
w bialej karcie, ciemny tekst. Granat zostaje tylko w stopce, dzieki
czemu widac, gdzie konczy sie tresc.
Wymaga to cofniecia WSZYSTKICH bialych kolorow, ktore ustawilismy tu
wczesniej pod ciemne tlo: naglowka, akapitu wstepnego, tresci zgod,
akapitow prawnych i odnosnikow.
============================================================ */
body.page #section-138-225 {
background-color: #F5F1E9;
}
body.page #headline-139-225 {
color: var(--navy);
}
body.page #text_block-140-225 {
color: #171A1E;
}
/* Formularz w bialej karcie - odcina sie od kremowego tla sekcji. */
body.page #shortcode-141-225 {
padding: clamp(22px, 3vw, 38px);
background: #fff;
border: 1px solid rgba(11, 34, 64, .08);
border-radius: var(--r);
box-shadow: var(--shadow-l);
}
body.page #section-138-225 .wpcf7,
body.page #section-138-225 .wpcf7 p,
body.page #section-138-225 .wpcf7 strong,
body.page #section-138-225 .wpcf7-list-item-label {
color: #171A1E;
}
body.page #section-138-225 .wpcf7 strong {
color: var(--navy);
}
body.page #section-138-225 .wpcf7 a {
color: var(--red);
text-decoration: underline;
text-underline-offset: 3px;
}
body.page #section-138-225 .wpcf7 a:hover {
color: var(--navy);
}
/* Pola: na bialej karcie potrzebuja widocznej ramki. */
body.page #section-138-225 .wpcf7 input[type="text"],
body.page #section-138-225 .wpcf7 input[type="email"],
body.page #section-138-225 .wpcf7 input[type="tel"],
body.page #section-138-225 .wpcf7 select,
body.page #section-138-225 .wpcf7 textarea {
background: #FCFAF6;
border: 1px solid rgba(11, 34, 64, .16);
}
body.page #section-138-225 .wpcf7 input:focus,
body.page #section-138-225 .wpcf7 select:focus,
body.page #section-138-225 .wpcf7 textarea:focus {
background: #fff;
border-color: var(--navy);
}
/* Akapity prawne - mniejsze i wyciszone, zeby nie konkurowaly z polami. */
body.page #section-138-225 .wpcf7-form > p {
font-size: .85rem;
line-height: 1.6;
color: #5C6773;
}
body.page #section-138-225 .wpcf7-list-item-label {
font-size: .85rem;
line-height: 1.55;
}
/* Oddech pod formularzem - bez niego biala karta konczyla sie tuz przy
krawedzi sekcji i stykala ze stopka. */
body.page #section-138-225 > .ct-section-inner-wrap {
padding-bottom: clamp(40px, 5vw, 80px);
}
/* "Wojewodztwo" i "Miejscowosc" obok siebie.
Wczesniej "Miejscowosc" rozciagala sie na caly wiersz, bo w zrodle stoi
po znaczniku
jako osobna pozycja. Znacznik i tak chowamy, wiec pola
ustawiaja sie naturalnie w dwoch kolumnach - wystarczy cofnac rozciagniecie.
To siodma i osma pozycja w siatce, wiec traficaja do jednego wiersza. */
body.page #section-138-225 .cf-main > p > span[data-name="city"] {
grid-column: auto;
}
/* ============================================================
HOVER "Z PEDZLA" NA PRZYCISKACH /kolor-inspiracje/
2026-09-01: mechanizm zamalowania byl tu wpisany od nowa - maska SVG,
szesc wlasciwosci maski, czasy przejscia, wszystko lokalnie.
2026-09-16: mechanizm przeniesiony do wspolnego 'pedzel.css', ktory
laduje sie na kazdej stronie i obejmuje WSZYSTKIE '.ct-link-button'.
Tutaj zostaje juz tylko to, co dla tych przyciskow wlasne: czym
maja byc zamalowane i jakie tlo maja pod farba.
Przy okazji poprawiony blad: stary blok uzywal 'var(--ease)', a ten
token nie jest zdefiniowany na 'body.page' (zyje w '.bmx', 'sklep.css',
'koszyk.css', 'blog.css', 'wpis.css' i 'kolory.css'). Cale 'transition'
bylo przez to nieprawidlowe i kolor tekstu zmienial sie skokowo.
'pedzel.css' ma wlasne tokeny '--bmx-ease' i '--bmx-walek'. */
body.page #new_columns-99-63 .ct-link-button {
--bmx-farba: var(--navy);
/* Przyciski sa obrysowe, na jasnym tle sekcji - spod farby ma
przezierac to samo jasne tlo, czyli nic wlasnego. */
--bmx-tlo: transparent;
}
/* ============================================================
DLUGI ARTYKUL - dwie kolumny na desktopie
PRZENIESIONE 2026-09-17 do 'bm-newhome.css'.
Uklad przestal byc wlasnoscia jednej strony: ten sam komponent robi
teraz dwie kolumny takze w opisie produktu (zgloszenie klientki:
"czemu na desktopie opis nie ma ukladu dwukolumnowego"). Zeby nie
powstala druga kopia tych samych regul - jak przy pedzlu, gdzie
mechanizm byl wpisany od nowa w pieciu arkuszach - komplet lezy
w 'bm-newhome.css', ktory laduje sie na kazdym widoku.
============================================================ */
/* ============================================================
KAFELKI BROSZUR - "Broszury inspiracyjne" i "produktowe"
Dolozone 2026-09-16, PRZEPISANE tego samego dnia po uwadze klientki:
"miedzy kafelkami powinien byc gap jak przy innych miejscach
z kafelkami, do tego zoltawe tlo i brak cieni w stanie bazowym".
Pierwsza wersja dostala biale karty Z CIENIEM w spoczynku - to bylo
niezgodne z reszta serwisu. Zmierzone na wzorcach wskazanych przez
klientke ('/en/' i '/en/colors-and-inspirations/'):
tlo kafelka #fff
ramka 1px solid rgba(11,34,64,.07)
promien 18px (--r)
CIEN brak
odstep w siatce 24px
tlo pod siatka #FCFAF6 (--paper, cieple "zoltawe")
hover translateY(-5px) + --shadow-mh, 0.5s
Odtwarzamy to jeden do jednego, zamiast wymyslac drugi wyglad karty.
DLACZEGO WARUNEK Z '.pdf', A NIE IDENTYFIKATORY STRON:
kafelki broszur roznia sie od kart, ktore juz obslugujemy, jedna
rzecza - przyciskiem. Karty maja '.ct-link-button', a te zwykly
'.ct-link' prowadzacy do pliku PDF. Tym je rozpoznajemy, dzieki czemu
regula obejmuje obie strony broszur, obie wersje jezykowe i kazda
przyszla siatke z plikami do pobrania.
============================================================ */
/* ---- Wiersz: cieple tlo i odstep miedzy kafelkami ----
Zrodlo dawalo wierszowi ZIMNE szare tlo '#F6F7F9' - obce wobec
kremowej palety serwisu. */
/* Cieple tlo idzie na CALA SEKCJE, a nie na poszczegolne wiersze.
POPRAWKA 2026-09-16: najpierw ustawilem je na '.ct-new-columns' i przez
to kazdy rzad dostawal wlasny pas koloru, a przerwy miedzy rzadami
i marginesy sekcji zostawaly biale - wygladalo to jak przypadkowy
element, a nie tlo. Sekcja daje jednolita plaszczyzne pod cala siatka. */
body.page .ct-section:has(a[href*=".pdf"]) {
background-color: var(--paper) !important;
}
body.page .ct-new-columns:has(a[href*=".pdf"]) {
gap: 24px;
/* Wiersz przezroczysty - kolor nalezy do sekcji. Zrodlo daje mu
zimne '#F6F7F9' na identyfikatorze (1,0,0), wiec trzeba je zgasic
jawnie; wierszy jest szesc na PL i kolejne na EN, kazdy pod innym
identyfikatorem, wiec lista sie nie utrzyma. */
background-color: transparent !important;
}
/* Kolumny maja w zrodle sztywna szerokosc 33,33% i 'flex:0 1 auto',
wiec samo dodanie odstepu rozpchneloby wiersz poza szerokosc tresci.
Przestawiamy je na podzial rowny - wtedy odstep wchodzi w rachunek. */
body.page .ct-new-columns:has(a[href*=".pdf"]) > .ct-div-block {
flex: 1 1 0;
width: auto;
min-width: 0;
}
/* ---- Kafelek ---- */
body.page .ct-new-columns > .ct-div-block:has(a[href*=".pdf"]) {
box-sizing: border-box;
/* Zero paddingu i przyciecie do naroznikow - tak jak na wzorcowym
kafelku '/kolor-inspiracje/' ('#div_block-101-63': pad 0, overflow
hidden, r 18). Zdjecie ma dochodzic do krawedzi karty, a odstepy
nalezec do bloku z tekstem. Wczesniej kafelek mial padding
'0 20px 20px' i zdjecie bylo wciete o 21 px z kazdej strony -
stad inny uklad niz w przykladach. */
padding: 0;
overflow: hidden;
border: 1px solid rgba(11, 34, 64, .07);
border-radius: var(--r);
background: #fff;
/* BEZ cienia w spoczynku - cien pojawia sie dopiero na hoverze,
tak jak na wszystkich pozostalych kafelkach serwisu. */
box-shadow: none;
transition: transform .5s cubic-bezier(.22, 1, .36, 1),
box-shadow .5s cubic-bezier(.22, 1, .36, 1),
border-color .5s cubic-bezier(.22, 1, .36, 1);
}
body.page .ct-new-columns > .ct-div-block:has(a[href*=".pdf"]):hover {
transform: translateY(-5px);
box-shadow: var(--shadow-mh);
border-color: transparent;
}
/* Okladka broszury - na cala szerokosc karty, bez wlasnego zaokraglenia:
zaokraglenie daje karta przez 'overflow:hidden', tak jak we wzorcu.
DWIE STRUKTURY, JEDNA REGULA: po polsku zdjecie jest bezposrednim
dzieckiem karty, a po angielsku siedzi w dodatkowym bloku. Dlatego
selektor nie moze wymagac bezposredniego dziecka. */
body.page .ct-new-columns > .ct-div-block:has(a[href*=".pdf"]) img {
display: block;
width: 100%;
margin: 0;
border-radius: 0;
}
/* Blok, ktory OWIJA zdjecie, nie moze miec odstepow - inaczej okladka
odsuwa sie od krawedzi karty (tak bylo w wersji EN). */
body.page .ct-new-columns > .ct-div-block:has(a[href*=".pdf"]) > .ct-div-block:has(img) {
padding: 0;
}
/* Odstepy nalezą do bloku z TEKSTEM. Wartosci jak we wzorcu
'/kolor-inspiracje/': '20px 20px 22px'.
'!important' konieczne: po polsku zrodlo trzyma tu wlasny padding
('0 15px 20px') na identyfikatorze bloku, czyli (1,0,0), a nasz
selektor komponentowy to (0,4,2). Po angielsku tej reguly nie ma
i padding wchodzil bez problemu - stad kafelki wygladaly inaczej
w obu jezykach. Identyfikatorow jest 16 na stronie PL i kolejne
na EN, wiec lista sie nie utrzyma. */
body.page .ct-new-columns > .ct-div-block:has(a[href*=".pdf"]) > .ct-div-block:not(:has(img)) {
padding: 20px 20px 22px !important;
}
/* Blok z przyciskami. Zgloszenie 2026-09-16: "czemu tu nad i pod buttonami
jest taka duza przestrzen?".
Zmierzone po polsku: '#div_block-290-166 { margin-top: 50px }' ze zrodla -
przy krotkim opisie robila sie przez to dziura na pol kafelka.
Po angielsku ten sam blok ma 20px i wyglada poprawnie, wiec 20px
przyjmujemy za wartosc wspolna. */
body.page .ct-new-columns > .ct-div-block:has(a[href*=".pdf"]) .ct-div-block:has(> a.ct-link[href*=".pdf"]) {
/* 'auto' zamiast stalej wartosci: w kolumnie flex dociaga przyciski
do DOLU karty, wiec w calym rzedzie stoja w jednej linii niezaleznie
od dlugosci opisu. Bez tego kazdy kafelek konczyl sie gdzie indziej
i rzad wygladal na poszarpany. Minimalny odstep od tekstu pilnuje
'margin-bottom' opisu nizej. */
margin-top: auto !important;
}
/* Blok tresci jako kolumna - warunek dzialania 'margin-top:auto' wyzej. */
body.page .ct-new-columns > .ct-div-block:has(a[href*=".pdf"]) > .ct-div-block:not(:has(img)) {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
/* Puste naglowki ZA blokiem przyciskow - rusztowanie z buildera.
Zmierzone na '/kolor-inspiracje/broszury-inspiracyjne/': 13 z 16
kafelkow ma za przyciskami pusty '' (28 px wysokosci, zero tresci)
i pusty ''. Zabieraly miejsce na dole karty, przez co przyciski
w rzedzie stawaly na roznych wysokosciach - rozrzut do 48 px.
Celujemy w RODZENSTWO PO bloku przyciskow, a nie w ':empty':
te naglowki nie sa puste skladniowo (maja w srodku znacznik lamania),
wiec ':empty' by ich nie zlapal. */
body.page .ct-new-columns > .ct-div-block:has(a[href*=".pdf"]) .ct-div-block:has(> a.ct-link[href*=".pdf"]) ~ :is(h1, h2, h3, h4) {
display: none;
}
/* Gwarantowany odstep opisu od przyciskow, gdy tekst jest dlugi
i 'auto' nie ma juz czego rozdzielic. */
body.page .ct-new-columns > .ct-div-block:has(a[href*=".pdf"]) .ct-text-block {
margin-bottom: 20px;
}
/* Przycisk "ZOBACZ" / "VIEW" - pigulka jak wszedzie. Efekt zamalowania
dokłada 'pedzel.css' (regula na komponencie), tutaj ksztalt i kolory. */
body.page a.ct-link[href*=".pdf"] {
--bmx-farba: var(--navy);
--bmx-tlo: transparent;
/* Zrodlo daje przyciskom fabryczne szare tlo '#eeeeee'. '!important'
konieczne: zrodlo trzyma je na identyfikatorze pojedynczego
przycisku (1,0,0), a identyfikatory sa inne na kazdej z 26 broszur
i osobne w wersji EN - lista nie mialaby sie jak utrzymac. */
background-color: transparent !important;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 26px;
border: 1px solid rgba(11, 34, 64, .3);
border-radius: 999px;
font-family: var(--sans);
font-size: .68rem;
font-weight: 600;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--navy);
text-decoration: none;
}
/* Opis do lewej - przy kolumnie okolo 40 znakow justowanie ze zrodla
robilo pionowe rzeki. Naglowek zostaje wysrodkowany razem z okladka. */
body.page .ct-new-columns > .ct-div-block:has(a[href*=".pdf"]) .ct-text-block,
body.page .ct-new-columns > .ct-div-block:has(a[href*=".pdf"]) .ct-text-block * {
text-align: left !important;
}
body.page .ct-new-columns > .ct-div-block:has(a[href*=".pdf"]) :is(h2, h3, h4) {
text-align: center;
}
@media (prefers-reduced-motion: reduce) {
body.page .ct-new-columns > .ct-div-block:has(a[href*=".pdf"]) { transition: none; }
}
/* ============================================================
BROSZURY PRODUKTOWE - placeholdery schowane
Decyzja klientki 2026-09-16: "jesli mowisz o placeholderach,
to one sa do wyjebania".
CO TAM JEST: piec par "To jest przykladowy tytul broszury" + Lorem
ipsum. Zero zdjec, zero plikow PDF, zadnej siatki kafelkow - to nie
jest wiec "stara wersja kafelkow do przestylowania", tylko rusztowanie,
ktorego nigdy nie wypelniono trescia. Stad pytanie "czemu ta strona
nadal ma stare stylowanie": nie ma tam czego stylowac.
Sprawdzone na STAREJ stronie (benjaminmoore.pl): dokladnie te same
piec placeholderow. Nie zginely wiec przy migracji - broszur
produktowych po prostu nigdy nie bylo.
DLACZEGO UKRYWAMY, A NIE KASUJEMY Z BAZY:
tresc siedzi w '_ct_builder_json' strony 96, a angielska 6893 jest jej
kopia co do bajtu. Wyciecie sekcji z JSON-a to operacja nieodwracalna
na drzewie buildera, a zysk jest ten sam: uzytkownik nie widzi
zmyslonych tytulow. Gdy klientka dostarczy prawdziwe broszury, ta
regula po prostu znika i rusztowanie wraca gotowe do wypelnienia.
Strona zostaje przez to PUSTA - o tym trzeba pamietac przy kafelku
"Broszury produktowe" na rozdrozu '/kolor-inspiracje/broszury/'.
============================================================ */
body.page #section-6-96 {
display: none;
}
/* ============================================================
MEDIA (/media/ = 246, /en/media/ = 6940)
Zgloszenie klientki 2026-09-17: "to trzeba koniecznie dostylowac
zgodnie z wytycznymi".
STAN ZASTANY: cztery wiersze kontaktowe (adres, komorka, telefon,
e-mail) to odnosniki '.ct-link' z ciemnym tlem '#323940' i bialym
tekstem, ostre rogi, brak obrysu. Reszta serwisu ma w tym miejscu
biale karty z lekkim obrysem - patrz '/kontakt/dane-kontaktowe/'.
Zakres obejmuje OBIE wersje jezykowe: '-246' to identyfikator
elementow z szablonu, wiec angielski blizniak (6940) uzywa tych
samych. Zamiast dwoch kompletow regul podajemy dwa identyfikatory
strony - ten sam sposob co przy stronach kontaktu.
============================================================ */
body.page-id-246 a[id^="link-"].ct-link,
body.page-id-6940 a[id^="link-"].ct-link {
display: flex;
align-items: center;
gap: 14px;
background-color: #fff !important;
border: 1px solid rgba(11, 34, 64, .13);
border-radius: var(--r-s);
padding: 16px 18px;
transition: transform .45s cubic-bezier(.22, 1, .36, 1),
box-shadow .45s cubic-bezier(.22, 1, .36, 1),
border-color .45s cubic-bezier(.22, 1, .36, 1);
}
body.page-id-246 a[id^="link-"].ct-link:hover,
body.page-id-6940 a[id^="link-"].ct-link:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-m);
border-color: transparent;
}
/* Tekst byl bialy - na czerni poprawny, na bieli niewidoczny.
Ten sam mechanizm zjadl juz raz naglowki stron tresciowych. */
body.page-id-246 a[id^="link-"].ct-link,
body.page-id-246 a[id^="link-"].ct-link *,
body.page-id-6940 a[id^="link-"].ct-link,
body.page-id-6940 a[id^="link-"].ct-link * {
color: var(--ink) !important;
}
/* Ikona w czerwieni marki - tak samo jak koperty przy dzialach
na stronie kontaktu. */
body.page-id-246 a[id^="link-"].ct-link svg,
body.page-id-6940 a[id^="link-"].ct-link svg {
flex: 0 0 auto;
fill: var(--red);
color: var(--red);
}
/* Zdjecie obok danych - promien wedlug zasady zaokraglen. */
body.page-id-246 .ct-image,
body.page-id-6940 .ct-image {
border-radius: min(var(--r), 8%);
}
/* ---------- Formularz profesjonalistow bez pola "Branza" (2026-09-24) ----------
Po usunieciu "Branzy" pary w siatce to: imie/nazwisko, e-mail/telefon,
zawod/wojewodztwo - a "Miejscowosc" zostaje sama w ostatnim wierszu,
wiec rozciagamy ja na cala szerokosc. */
body.page #section-138-225 .cf-main > p > span[data-name="city"] {
grid-column: 1 / -1;
}
/* ---------- Dolacz do nas (332) - uklad dwukolumnowy (2026-09-28) ----------
Zgloszenie klientki: baner na cala szerokosc, a pod nim TEKST + ZDJECIE
OBOK SIEBIE. Wczesniej wszystko stalo jedno pod drugim na 1130 px
(a jeszcze wczesniej waski tekst przy szerokich zdjeciach).
Oxygen uklada kolumne tresci '#div_block-100-249' flexem w pionie;
tu zamieniamy ja na siatke:
wiersz 1: baner (#image-171-325) - cala szerokosc,
lewa kolumna: "Szukamy partnerow..." (#_rich_text-187-332)
i "Cenimy partnerstwo... info@" (#text_block-180-332),
prawa kolumna: zdjecie dloni (#image-184-332) na wysokosc obu tekstow.
Identyfikatory sa z tej jednej strony (Oxygen), stad zakres page-id-332.
Tekst ma ~540 px szerokosci - ponizej progu 700 px z 'czytelnosc.js',
wiec skrypt go nie zweza. Telefon/tablet (<=900 px): jedna kolumna
w kolejnosci z edytora. */
@media (min-width: 901px) {
body.page-id-332 #div_block-100-249 {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: auto auto 1fr;
column-gap: clamp(32px, 4vw, 60px);
align-items: start;
}
body.page-id-332 #image-171-325 {
grid-column: 1 / -1;
grid-row: 1;
padding-bottom: 0;
margin-bottom: clamp(28px, 3vw, 44px);
}
body.page-id-332 #_rich_text-187-332 {
grid-column: 1;
grid-row: 2;
margin: 0;
}
body.page-id-332 #text_block-180-332 {
grid-column: 1;
grid-row: 3;
margin-top: 1.2em;
}
body.page-id-332 #image-184-332 {
grid-column: 2;
grid-row: 2 / span 2;
align-self: stretch;
width: 100%;
height: 100%;
min-height: 340px;
padding-top: 0;
object-fit: cover;
}
}
/* Dolny tekst ma w Oxygenie 'color:#000000', gorny - grafit marki.
W jednej kolumnie roznica rzuca sie w oczy, wiec wyrownujemy. */
body.page-id-332 #text_block-180-332 {
color: var(--muted, #3F4750);
}