/*
Theme Name: FATBLACKCAT
Theme URI: https://fatblackcat.io
Author: SOLARDESIGN
Description: Motyw blokowy sklepu FATBLACKCAT. Kierunek premium przez odejmowanie — ciężka czerń, cisza wokół produktu, akcent użyty rzadko. Tokeny w theme.json, nadpisania WooCommerce klasyczne (Fluid Checkout).
Version: 1.133.86
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fatblackcat
Tags: block-theme, e-commerce, full-site-editing
*/
/* ==========================================================================
Uwaga: kolory, typografia i odstępy są w theme.json.
Ten arkusz dokłada wyłącznie to, czego theme.json nie wyraża.
Nie duplikuj tu wartości z palety — używaj zmiennych --wp--preset--*.
========================================================================== */
/* --------------------------------------------------------------------------
1. Poprawki zastane — długi z audytu produkcji
-------------------------------------------------------------------------- */
/* Divi justował akapity: na wąskim ekranie robiły się rzeki i dziury. */
body,
.wp-block-post-content p,
.entry-content p {
text-align: left;
hyphens: none;
}
/* Tekst czytelny: nie szerszy niż ~66 znaków, niezależnie od kontenera. */
.wp-block-post-content > p,
.wp-block-post-content > ul,
.wp-block-post-content > ol {
max-width: 66ch;
}
/* Nagłówki nie zostawiają sierot. */
h1, h2, h3, h4, h5,
.wp-block-heading {
text-wrap: balance;
}
/* --------------------------------------------------------------------------
2. Dostępność
-------------------------------------------------------------------------- */
:focus-visible {
outline: 2px solid var(--wp--preset--color--purr);
outline-offset: 3px;
border-radius: 2px;
}
/* W sekcjach ciemnych fiolet jako obwódka focusu jest niewidoczny (1,59:1).
Reguła akcentu: na ciemnym rolę przejmuje biel. */
.is-style-sekcja-ciemna :focus-visible {
outline-color: var(--wp--preset--color--base);
}
.skip-link:focus {
position: fixed;
top: var(--wp--preset--spacing--40);
left: var(--wp--preset--spacing--40);
z-index: 999;
padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
background: var(--wp--preset--color--contrast);
color: var(--wp--preset--color--base);
border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* --------------------------------------------------------------------------
3. Nagłówek strony
Na produkcji logo i pasek koszyka zjadały ~250 px na telefonie, zanim
zaczynała się treść — przy tym, że mobile ma lepszy CTR i pozycję w Google
niż desktop. Nagłówek ma się zmieścić w 64 px.
-------------------------------------------------------------------------- */
.fbc-header {
/* Trzy pasy: logo, menu, ikony (klient 2026-09-18). Skrajne pasy mają tę
samą szerokość (`1fr`), więc menu stoi na osi nagłówka niezależnie od
tego, jak szerokie jest logo i ile ikon leży po prawej. */
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--wp--preset--spacing--40);
min-height: 64px;
padding-block: var(--wp--preset--spacing--30);
}
.fbc-header > .wp-block-site-logo { justify-self: start; }
.fbc-header__ikony { justify-self: end; align-items: center; }
/* Konto przyjeżdża tu jako pozycja listy z menu, więc poza listą pokazywałoby
znacznik punktora — a jako `list-item` zajmowałoby też własny wiersz. */
.fbc-header__ikony > .wp-block-navigation-item {
display: flex;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
}
/* Stopka menu pełnoekranowego leży pod siatką, na całej szerokości. */
.fbc-header > .fbc-menu-stopka { grid-column: 1 / -1; }
@media (max-width: 781.98px) {
/* Na telefonie menu zwija się do hamburgera i ten ma stać ZA ikonami
(klient 2026-09-18). Trzy pasy zamiast dwóch: bez tego nawigacja i ikony
trafiały do tej samej komórki i zawijały się do drugiego wiersza. */
.fbc-header { grid-template-columns: 1fr auto auto; column-gap: var(--wp--preset--spacing--40); }
/* Wiersz podany WPROST. Nawigacja stoi w znacznikach przed ikonami, a ma
trafić do trzeciej kolumny — przy samym `grid-column` automat przesuwał
ikony do drugiego wiersza, bo kursor był już za nimi (klient 2026-09-18:
„bez wrapowania"). */
.fbc-header > .wp-block-site-logo { grid-column: 1; grid-row: 1; }
.fbc-header__ikony { grid-column: 2; grid-row: 1; flex-wrap: nowrap; }
.fbc-header > nav.wp-block-navigation { grid-column: 3; grid-row: 1; justify-content: flex-end; }
}
.fbc-header .custom-logo,
.fbc-header .wp-block-site-logo img {
height: 28px;
width: auto;
display: block;
}
/* Nawigacja na produkcji łamała się na dwie linie na desktopie. */
.fbc-header .wp-block-navigation {
flex-wrap: nowrap;
white-space: nowrap;
}
.fbc-header .wp-block-navigation__responsive-container-open,
.fbc-header .wp-block-navigation__responsive-container-close {
padding: var(--wp--preset--spacing--20);
}
/* Bez sierot: przeglądarka nie zostawia pojedynczego słowa w ostatnim
wierszu akapitu (`text-wrap: pretty`, Chrome 117+, inne ignorują bez
szkody). Nagłówki mają `balance` tam, gdzie ustawione punktowo — globalnie
nie, bo zmieniałoby to łamanie hero dostrojone ręcznie. */
p,
li,
dd,
dt,
figcaption,
blockquote,
.fbc-punkty__rozwiniecie > p {
text-wrap: pretty;
}
/* --------------------------------------------------------------------------
4. Komponenty
-------------------------------------------------------------------------- */
/* Etykieta sekcji. Na jasnym tle fioletowa, na ciemnym biała — reguła akcentu. */
.fbc-eyebrow {
font-family: var(--wp--preset--font-family--mono);
font-size: var(--wp--preset--font-size--small);
letter-spacing: 0.14em;
color: var(--wp--preset--color--purr);
margin-block-end: var(--wp--preset--spacing--30);
}
/* Nadlinia jest akapitem, więc otwierając blok zbierała górny margines z rytmu
akapitów — 13 px doklejone do każdego odstępu nad treścią sekcji. W kodzie
padding wychodził równy, a optycznie góra była większa od dołu (klient 2026-09-15).
Odstęp nad nią ma dawać wyłącznie kontener. */
.fbc-eyebrow:first-child { margin-block-start: 0; }
/* Akcent na ciemnym tle jaśniejszym odcieniem: brandowy fiolet ma na Coal
kontrast 1,59 i jako tekst po prostu znika. #C561BE trzyma tę samą barwę
i daje 4,62 na Coal oraz 5,15 na Ground dark — AA dla tekstu.
UWAGA: na Graphite (#313338) to tylko 3,51, czyli poniżej progu.
Ten odcień jest do tła Coal i ciemniejszego, nie do szarości. */
.is-style-sekcja-ciemna .fbc-eyebrow {
color: var(--wp--preset--color--purr-light);
}
/* --------------------------------------------------------------------------
Zestawienia etykieta — wartość: JEDNA konwencja na cały motyw
Wcześniej `.fbc-spec` miał własną typografię (mono, tabular-nums, rozmiar
bazowy), a tabele w specyfikacji swoją (sans, `small`). Wychodziły z tego dwa
różne wyglądy tego samego typu treści, a lista wyglądała jak wyjątek —
do tego wartość była wizualnie większa od etykiety, bo `dd` nie miało
ustawionego rozmiaru i dziedziczyło bazowy (klient 2026-09-15).
Teraz obowiązuje jedno: rozmiar `small`, krój sans, etykieta w `contrast-2`
i szerokości 40%, wartość w `contrast`, obie do lewej, wiersze oddzielone
linią. Ta sama reguła obsługuje listy `.fbc-spec` i tabele `.fbc-tabele`,
więc nowy blok tego typu nie wymaga własnych stylów.
-------------------------------------------------------------------------- */
.fbc-spec {
display: flex;
align-items: baseline;
gap: var(--wp--preset--spacing--40);
padding-block: var(--wp--preset--spacing--30);
border-block-end: 1px solid var(--wp--preset--color--line);
font-size: var(--wp--preset--font-size--small);
line-height: 1.5;
}
.is-style-sekcja-ciemna .fbc-spec {
border-block-end-color: var(--wp--preset--color--line-dark);
}
.fbc-spec dt {
flex: 0 0 40%;
color: var(--wp--preset--color--contrast-2);
margin: 0;
}
.is-style-sekcja-ciemna .fbc-spec dt {
color: var(--wp--preset--color--contrast-3);
}
.fbc-spec dd {
flex: 1;
margin: 0;
color: var(--wp--preset--color--contrast);
/* Bez mono i bez `tabular-nums`: kolumna nie jest już wyrównana do prawej,
więc nie ma czego wyrównywać cyframi o stałej szerokości. */
font-variant-numeric: normal;
}
.is-style-sekcja-ciemna .fbc-spec dd {
color: var(--wp--preset--color--base);
}
/* Plakietka. Fiolet jako powierzchnia — działa na obu tłach. */
.fbc-badge {
display: inline-block;
background: var(--wp--preset--color--purr);
color: var(--wp--preset--color--base);
font-family: var(--wp--preset--font-family--mono);
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 3px var(--wp--preset--spacing--20);
border-radius: 2px;
}
/* --------------------------------------------------------------------------
5. Tabele i treści szerokie
Knowledge Base ma 6 823 słowa i tabele specyfikacji — nie mogą rozpychać
strony w poziomie.
-------------------------------------------------------------------------- */
.wp-block-table,
.wp-block-preformatted,
.wp-block-code {
overflow-x: auto;
}
.wp-block-table table {
font-variant-numeric: tabular-nums;
}
.wp-block-table th {
font-family: var(--wp--preset--font-family--mono);
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--wp--preset--color--contrast-3);
}
/* --------------------------------------------------------------------------
6. Obrazy
-------------------------------------------------------------------------- */
img,
.wp-block-image img {
max-width: 100%;
height: auto;
}
/* Produkt na ciemnym tle: brak ramek i cieni, sam przedmiot. */
.is-style-sekcja-ciemna .wp-block-image img {
border-radius: 2px;
}
/* --------------------------------------------------------------------------
7. Lista specyfikacji (.fbc-specs)
-------------------------------------------------------------------------- */
.fbc-specs {
margin: 0;
max-width: 46rem;
}
/* Galeria produktu na ciemnym tle — bez ramek, sam przedmiot. */
.is-style-sekcja-ciemna .woocommerce-product-gallery img {
border-radius: 2px;
}
/* Blok "details" w FAQ: kanciasty, z linią zamiast tła. */
.wp-block-details {
border-block-end: 1px solid var(--wp--preset--color--line);
padding-block: var(--wp--preset--spacing--40);
}
.is-style-sekcja-ciemna .wp-block-details {
border-block-end-color: var(--wp--preset--color--line-dark);
}
.wp-block-details summary {
cursor: pointer;
font-weight: 700;
list-style: none;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
content: "+";
float: right;
font-family: var(--wp--preset--font-family--mono);
font-weight: 400;
}
.wp-block-details[open] summary::after { content: "–"; }
/* --------------------------------------------------------------------------
8. Strona główna
-------------------------------------------------------------------------- */
/* Pasek danych pod hero. Liczby są argumentem sprzedażowym, więc mono
i wyrównanie tabelaryczne, a nie ozdobnik. */
.fbc-stat {
font-family: var(--wp--preset--font-family--mono);
font-size: var(--wp--preset--font-size--small);
font-variant-numeric: tabular-nums;
color: var(--wp--preset--color--contrast-3);
margin: 0;
}
.fbc-stat strong {
display: block;
font-family: var(--wp--preset--font-family--sans);
font-size: var(--wp--preset--font-size--x-large);
font-weight: 800;
letter-spacing: -0.02em;
color: inherit;
}
.is-style-sekcja-ciemna .fbc-stat { color: var(--wp--preset--color--contrast-3); }
.is-style-sekcja-ciemna .fbc-stat strong { color: var(--wp--preset--color--base); }
/* Górna linia paska danych — cienka, w kolorze linii sekcji. */
.fbc-hero > .wp-block-group[style*="border"] {
border-top-color: var(--wp--preset--color--line-dark);
}
/* Przycisk obrysowany („ghost") ma jedną definicję — sekcja 18 (kolory przez
zmienne `--fbc-ghost-*`) i sekcja 24 (kształt). Nie dopisuj tu wariantów:
nowy kontekst ustawia trzy zmienne, nie własne reguły. */
/* Kolumny na telefonie: WordPress układa je w pion, ale bez odstępu. */
@media (max-width: 781px) {
.wp-block-columns { gap: var(--wp--preset--spacing--60); }
}
/* --------------------------------------------------------------------------
8a. Karty produktów („What we are building")
Trzy karty na jasnym tle. Narożniki ścięte tak samo jak w przyciskach
(lewy górny i prawy dolny): `corner-shape: bevel` rysuje prawdziwe
obramowanie, `clip-path` zostaje jako zapas (bez linii, ale z kształtem).
Ścięcie większe niż w przycisku, bo karta jest większa — 22 px zamiast 10.
Kadr jest szarą płaszczyzną (base-2) z renderem z alfą w całości
(`object-fit: contain`), bez kadrowania.
-------------------------------------------------------------------------- */
.fbc-produkty-karty {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-block-start: var(--wp--preset--spacing--70);
}
.fbc-karta-produktu {
--fbc-sciecie: 22px;
position: relative;
display: flex;
flex-direction: column;
background: var(--wp--preset--color--base);
border: 1px solid var(--wp--preset--color--line);
clip-path: polygon(
var(--fbc-sciecie) 0,
100% 0,
100% calc(100% - var(--fbc-sciecie)),
calc(100% - var(--fbc-sciecie)) 100%,
0 100%,
0 var(--fbc-sciecie)
);
transition: border-color 250ms ease, transform 350ms cubic-bezier(.2,.7,.2,1);
}
@supports (corner-shape: bevel) {
.fbc-karta-produktu {
clip-path: none;
corner-shape: bevel;
border-radius: var(--fbc-sciecie) 0 var(--fbc-sciecie) 0;
/* Bez tego kadr obrazu (własne tło) leży NA skośnej krawędzi i zakrywa
linię ramki w lewym górnym rogu; `clip` tnie dzieci do kształtu karty,
więc skos jest widoczny z obu stron tak samo. */
overflow: clip;
}
}
/* Najazd jak w kartach sekcji „After the box" (8f): fioletowa ramka i lekkie
uniesienie. Obrys rysowany stożkowym gradientem zdjęty na życzenie klienta
(2026-09-05). */
@media (hover: hover) {
.fbc-karta-produktu:hover { border-color: var(--wp--preset--color--purr); transform: translateY(-3px); }
.fbc-karta-produktu:hover .fbc-karta-produktu__kadr img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
.fbc-karta-produktu:hover { transform: none; }
}
.fbc-karta-produktu__kadr {
position: relative;
/* Kwadrat (klient 2026-09-15): zdjęcia z sesji są niemal kwadratowe, więc
w kadrze 4:3 zostawały szerokie puste pasy po bokach. */
aspect-ratio: 1 / 1;
overflow: hidden;
/* Tło jak karty w sklepie i galeria produktu: płyta z ziarnem (klient 2026-09-27:
„ujednolić tła — do tego, co jest w sklepie”). Zmienne w woocommerce.css (:root). */
background-color: var(--fbc-plyta, #e8e8eb);
background-image: var(--fbc-ziarno);
background-repeat: repeat;
border-block-end: 1px solid var(--wp--preset--color--line);
padding: var(--wp--preset--spacing--50);
box-sizing: border-box;
}
.fbc-karta-produktu__kadr img {
width: 100%;
height: 100%;
max-width: none;
object-fit: contain;
object-position: 50% 50%;
display: block;
transition: transform 900ms cubic-bezier(.2,.7,.2,1);
}
/* Okładki pedałów (meta `fbc_okladka`, kwadrat o wspólnej geometrii) — JEDNA reguła
dla kart w sklepie i na stronie głównej (2026-09-27: „to musi być powiązane jedno
z drugim”): produkt w optycznym środku, oddech 10 % u góry i z boków, 6 % pod
spodem na wygasający cień. Kadr karty na głównej traci przy nich własny padding. */
.fbc-produkt-karta__kadr img.fbc-okladka,
.fbc-karta-produktu__kadr img.fbc-okladka {
padding: 10% 10% 6%;
box-sizing: border-box;
object-fit: contain;
object-position: 50% 50%;
}
.fbc-karta-produktu__kadr:has(img.fbc-okladka) { padding: 0; }
/* Drugie ujęcie na hover na kartach głównej — jak w sklepie (woocommerce.css, karty):
leży nad okładką i przenika się po najechaniu na całą kartę; bez kursora go nie ma. */
@media (hover: hover) {
.fbc-karta-produktu__kadr .fbc-okladka-hover { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.fbc-karta-produktu__kadr img { transition: opacity .35s ease, transform 900ms cubic-bezier(.2,.7,.2,1); }
.fbc-karta-produktu:hover .fbc-karta-produktu__kadr .fbc-okladka-hover { opacity: 1; }
.fbc-karta-produktu:hover .fbc-karta-produktu__kadr:has(.fbc-okladka-hover) img:not(.fbc-okladka-hover) { opacity: 0; }
}
@media not (hover: hover) { .fbc-karta-produktu__kadr .fbc-okladka-hover { display: none; } }
.fbc-karta-produktu__tresc {
display: flex;
flex-direction: column;
flex: 1;
padding: var(--wp--preset--spacing--50);
}
.fbc-karta-produktu__tresc .fbc-badge { align-self: flex-start; }
.fbc-karta-produktu__tresc h3 { margin-block-start: var(--wp--preset--spacing--40); text-wrap: balance; }
.fbc-karta-produktu__tresc p { margin-block-start: var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--contrast-2); max-width: 40ch; }
.fbc-karta-produktu__link {
display: inline-block;
align-self: flex-start;
margin-block-start: auto;
padding-block: var(--wp--preset--spacing--50) 0;
font-family: var(--wp--preset--font-family--mono);
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--wp--preset--color--purr);
text-decoration: none;
}
.fbc-karta-produktu__link span { display: inline-block; transition: transform 250ms ease; }
.fbc-karta-produktu__link:hover span { transform: translateX(4px); }
/* Cala karta klikalna (klient 2026-09-16: "wszystkie karty produktow maja sie
tak zachowywac"). Obszar klikniecia rozciaga warstwa `::after` odnosnika,
zamiast opakowywac tresc karty w : w drzewie dostepnosci zostaje jeden
odnosnik z krotka nazwa, a nie blok z badge'em, naglowkiem i akapitem
w srodku. Karta ma juz `position: relative`, wiec warstwa trzyma sie jej
krawedzi; kursor rowniez jest na calej karcie, bo to ciagle ten . */
.fbc-karta-produktu__link::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.fbc-badge--obrys { background: transparent; border: 1px solid var(--wp--preset--color--purr); color: var(--wp--preset--color--purr); }
@media (max-width: 899.98px) {
.fbc-produkty-karty { grid-template-columns: 1fr; }
.fbc-karta-produktu { --fbc-sciecie: 16px; }
.fbc-karta-produktu__kadr { aspect-ratio: 1 / 1; }
}
/* --------------------------------------------------------------------------
8b. Atuty — punkty na renderze
Jeden render z alfą wprost na tle sekcji (bez płaszczyzny), głowa pedału
wystaje ponad sekcję; cztery znaczniki w mono; aktywny wypełnia się
fioletem (powierzchnia, nie tekst). Lista po lewej i znaczniki po prawej
są tą samą listą — JS je spina, CSS tylko stanami `is-active`.
Ziarno z hero: sekcja dostaje `fbc-z-ziarnem` i warstwę `.fbc-ziarno`
na końcu grupy (powody: sekcja 14).
-------------------------------------------------------------------------- */
.fbc-z-ziarnem {
position: relative;
isolation: isolate;
}
.fbc-z-ziarnem > .fbc-ziarno {
position: absolute;
inset: 0;
margin: 0 !important;
z-index: -1;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23z)' opacity='.09'/%3E%3C/svg%3E");
background-repeat: repeat;
}
.fbc-punkty {
position: relative;
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
/* Etykiety wyprowadzeń wystają 7 % kadru w lewo, więc odstęp musi być
większy niż zwykłe 96 px — inaczej lista i etykiety siedziały obok siebie. */
gap: clamp(6rem, 11vw, 11rem);
/* Od góry, nie na środku: przy centrowaniu każda zmiana wysokości listy
przesuwała nagłówek. */
align-items: start;
}
.fbc-punkty h2 { max-width: 16ch; text-wrap: balance; }
.fbc-punkty__lista {
list-style: none;
margin: var(--wp--preset--spacing--70) 0 0;
padding: 0;
border-block-start: 1px solid var(--wp--preset--color--line-dark);
}
/* Jedna typografia dla trzech list rozwijanych (atuty 8b, PurrOS 8f, FAQ):
siatka numer | tytuł | znak, tytuł 700 w rozmiarze bazowym, interlinia
1,35, numer mono 400 w rozmiarze small, opis wcięty pod tytuł o kolumnę
numeru + odstęp. Klient (2026-09-05): „why purrpro ma większe nagłówki —
ujednolić". Zmienne dzielone z FAQ (`--fbc-faq-nr`, `--fbc-faq-gap`). */
.fbc-punkty { --fbc-faq-nr: 2.4rem; --fbc-faq-gap: var(--wp--preset--spacing--30); }
.fbc-punkty__pozycja {
display: grid;
grid-template-columns: var(--fbc-faq-nr) minmax(0, 1fr) 1.5rem;
gap: var(--fbc-faq-gap);
align-items: baseline;
width: 100%;
padding: var(--wp--preset--spacing--40) 0;
margin: 0;
border: 0;
border-block-end: 1px solid var(--wp--preset--color--line-dark);
border-radius: 0;
background: transparent;
color: var(--wp--preset--color--contrast-3);
font: inherit;
font-weight: 700;
line-height: 1.35;
text-align: left;
cursor: pointer;
transition: color 250ms ease;
}
.fbc-punkty__pozycja .fbc-nr {
font-family: var(--wp--preset--font-family--mono);
font-size: var(--wp--preset--font-size--small);
font-weight: 400; /* bez pogrubienia z przycisku (klient) */
color: var(--wp--preset--color--contrast-3);
transition: color 250ms ease;
}
.fbc-punkty__pozycja:hover,
.fbc-punkty__pozycja.is-active { color: var(--wp--preset--color--base); }
.fbc-punkty__pozycja.is-active .fbc-nr { color: var(--wp--preset--color--purr-light); }
.fbc-punkty__pozycja:focus-visible { outline: 2px solid var(--wp--preset--color--base); outline-offset: 2px; }
/* Znak rozwijania jak w FAQ (8f): dwie kreski, + zwinięte, × otwarte;
biały na ciemnym, wypchnięty do prawej krawędzi listy. */
.fbc-punkty__znak {
position: relative;
align-self: center;
justify-self: end;
width: 14px;
height: 14px;
}
.fbc-punkty__znak::before,
.fbc-punkty__znak::after {
content: "";
position: absolute;
left: 0;
top: 6px;
width: 14px;
height: 2px;
/* currentColor: zwinięta pozycja jest szara (contrast-3), aktywna i po najeździe biała — znak idzie za tekstem. */
background: currentColor;
transition: transform 300ms cubic-bezier(.2,.7,.2,1);
}
.fbc-punkty__znak::after { transform: rotate(90deg); }
.fbc-punkty__pozycja.is-active .fbc-punkty__znak::before { transform: rotate(45deg); }
.fbc-punkty__pozycja.is-active .fbc-punkty__znak::after { transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
.fbc-punkty__znak::before, .fbc-punkty__znak::after { transition: none; }
}
/* Rozwijany opis: `max-height` 0 → stała wartość (trzy linie + odstęp),
ta sama dla każdej pozycji. Dzięki temu w trakcie przejścia zwijanie
jednej i rozwijanie drugiej sumują się dokładnie do stałej i nic pod
listą nie drga. Wariant z wierszami siatki (0fr → 1fr) tego nie dawał,
bo wysokość zależała od treści. */
/* Rezerwa wysokości opisu (stała, żeby lista nie drgała przy przełączaniu):
cztery linie w paśmie 1200–1439 px (kolumna ok. 430–500 px, najdłuższy
opis ma 112 znaków, a `text-wrap: pretty` potrafi dołożyć linię), dwie
linie od 1440 px. Rezerwa musi być ≥ realnej liczbie
linii, bo `overflow: hidden` obciąłby tekst. Poniżej 1200 px rezerwy nie
ma — patrz blok przy regułach rozwijania. */
.fbc-punkty { --fbc-opis-h: calc(4 * 1.55em + var(--wp--preset--spacing--40)); }
@media (min-width: 1440px) {
.fbc-punkty { --fbc-opis-h: calc(3 * 1.55em + var(--wp--preset--spacing--40)); }
}
.fbc-punkty__el { position: relative; border-block-end: 1px solid var(--wp--preset--color--line-dark); }
/* Pasek auto-przełączania pod aktywną pozycją (5 s, atuty.js reaguje na
`animationend`) — ta sama mechanika co punkty PurrOS (8f). Najazd NIE
zatrzymuje zegara (klient 2026-09-05: „nie chcę, żeby hover pauzował"). */
.fbc-punkty__pasek { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--wp--preset--color--purr-light); transform: scaleX(0); transform-origin: left; }
.fbc-punkty__pasek--biegnie { animation: fbc-postep 5s linear forwards; }
@media (prefers-reduced-motion: reduce) { .fbc-punkty__pasek--biegnie { animation: none; } }
.fbc-punkty__el .fbc-punkty__pozycja { border-block-end: 0; }
.fbc-punkty__rozwiniecie {
max-height: 0;
overflow: hidden;
transition: max-height 420ms cubic-bezier(.2,.7,.2,1);
}
.fbc-punkty__rozwiniecie > p {
margin: 0;
/* Cała szerokość kolumny — bez sztucznego limitu w ch; przed sierotą
chroni globalne `text-wrap: pretty`. Wcięcie = kolumna numeru + odstęp
(jak odpowiedź w FAQ), z prawej miejsce na znak. */
max-width: none;
min-height: var(--fbc-opis-h);
padding: 0 calc(1.5rem + var(--fbc-faq-gap)) var(--wp--preset--spacing--40) calc(var(--fbc-faq-nr) + var(--fbc-faq-gap));
box-sizing: border-box;
line-height: 1.55;
color: var(--wp--preset--color--contrast-3);
}
.fbc-punkty__el.is-active .fbc-punkty__rozwiniecie { max-height: var(--fbc-opis-h); }
/* Poniżej 1200 px (układ pionowy) nic nie stoi obok listy, więc opis bierze
wysokość z treści (wiersz siatki 0fr → 1fr) — pełna szerokość i bez
ryzyka obcięcia na wąskim telefonie. Blok MUSI stać po regułach bazowych,
bo przy równej specyficzności decyduje kolejność. */
@media (max-width: 1199.98px) {
.fbc-punkty__rozwiniecie { max-height: none; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 420ms cubic-bezier(.2,.7,.2,1); }
.fbc-punkty__rozwiniecie > p { min-height: 0; overflow: hidden; }
.fbc-punkty__el.is-active .fbc-punkty__rozwiniecie { max-height: none; grid-template-rows: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.fbc-punkty__rozwiniecie { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
.fbc-punkty__rozwiniecie { transition: none; }
}
.fbc-punkty__foto {
margin: 0;
aspect-ratio: 3 / 4;
/* Żadnej płaszczyzny pod renderem — pedał stoi wprost na tle sekcji. */
background: transparent;
padding: 0;
}
/* Render wyjęty z przepływu siatki: o wysokości wiersza decyduje sama kolumna
z listą, a render dostaje jej wysokość plus 100 px u góry (grupa nie
przycina dzieci, więc górna krawędź może wyjść ponad sekcję). Szerokość wynika z proporcji 3:4, więc na ultrawide render
nie rośnie razem z kolumną, a przy krótszym oknie nie jest przycinany. */
/* Pasmo 1200–1523 px: dwie kolumny, ale render zwyczajnie w prawej,
w przepływie, bez wystawania i przesunięć (decyzja klienta). */
@media (min-width: 1200px) and (max-width: 1523.98px) {
.fbc-punkty__foto { width: 100%; }
}
@media (min-width: 1524px) {
/* Od 1524 px render wychodzi z przepływu. Prawa kolumna to pusty,
rozciągnięty na wiersz kontener — nie dokłada nic do wysokości, a render
jest w nim wyśrodkowany (na ultrawide siedzi na środku prawej połowy). */
.fbc-punkty__prawa { position: relative; align-self: stretch; min-height: 0; container-type: size; }
/* Szerokość: 3/4 z (wysokość kolumny + padding sekcji + 3rem), ale nigdy
więcej niż szerokość prawej kolumny (jednostki kontenera `cqh`/`cqw`).
Dzięki temu w paśmie 1200–1440 px render nie wchodzi na listę. */
.fbc-punkty__foto {
position: absolute;
left: 50%;
/* Render wyższy od kolumny o 100 px (decyzja klienta): zaczyna się
100 px nad górą listy i kończy z jej dołem. */
/* Góra jak przedtem: padding sekcji + 3rem nad listą, czyli głowa
pedału 48 px ponad sekcją (decyzja klienta: tej pozycji nie ruszać).
Wysokość: kolumna + 200 px, więc dół schodzi poniżej listy. */
top: calc(-1 * clamp(3.5rem, 7vw, 6rem) - 3rem);
width: min(100cqw, calc((100cqh + 200px) * 3 / 4));
transform: translateX(-50%);
}
}
/* Kadr = pudełko obrazu (render ma proporcje 3:4, tak jak pudełko, więc
`contain` nie zostawia pasów) — procenty znaczników liczą się od niego. */
.fbc-punkty__kadr { position: relative; height: 100%; }
.fbc-punkty__foto img {
width: 100%;
height: 100%;
max-width: none;
object-fit: contain;
display: block;
}
/* Wyprowadzenia. Etykieta (numer) stoi POZA pedałem i ZA obrazem — jeśli
pedał na nią nachodzi, pedał wygrywa. Na samym miejscu jest mały cel
(kwadrat 8 px) NAD obrazem, a między nimi linia 1 px w SVG, którą rysuje
skrypt z realnych pozycji etykiety i celu (procenty kadru), więc układ
na telefonie nie wymaga przeliczania. Aktywna linia rysuje się od
etykiety do celu (stroke-dashoffset), aktywny cel dostaje sonar. */
.fbc-punkt {
position: absolute;
z-index: 0;
left: var(--lx);
top: var(--ly);
transform: translate(-50%, -50%);
width: 32px;
height: 32px;
padding: 0;
border: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 45%, transparent);
border-radius: 2px;
background: var(--wp--preset--color--ground-dark);
color: var(--wp--preset--color--base);
font-family: var(--wp--preset--font-family--mono);
font-size: 0.68rem;
letter-spacing: 0.06em;
line-height: 1;
cursor: pointer;
opacity: 0.75;
transition: background 250ms ease, border-color 250ms ease, opacity 250ms ease;
}
.fbc-punkt:hover { opacity: 1; border-color: var(--wp--preset--color--base); }
.fbc-punkt.is-active { opacity: 1; background: var(--wp--preset--color--purr); border-color: var(--wp--preset--color--purr); }
.fbc-punkt:focus-visible { outline: 2px solid var(--wp--preset--color--base); outline-offset: 3px; }
.fbc-punkty__linie {
position: absolute;
inset: 0;
z-index: 2;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
}
.fbc-punkty__linie polyline {
stroke: var(--wp--preset--color--base);
stroke-width: 1;
stroke-linejoin: miter;
opacity: 0.18;
transition: opacity 300ms ease;
}
.fbc-punkty__linie polyline.is-active {
stroke: var(--wp--preset--color--purr-light);
opacity: 1;
stroke-dasharray: 1;
stroke-dashoffset: 1;
animation: fbc-linia 600ms cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes fbc-linia { to { stroke-dashoffset: 0; } }
.fbc-punkt__cel {
position: absolute;
z-index: 3;
left: var(--x);
top: var(--y);
width: 8px;
height: 8px;
transform: translate(-50%, -50%);
background: var(--wp--preset--color--base);
border-radius: 1px;
opacity: 0.55;
pointer-events: none;
transition: opacity 250ms ease, background 250ms ease;
}
.fbc-punkt__cel.is-active { opacity: 1; background: var(--wp--preset--color--purr-light); }
.fbc-punkt__cel::before,
.fbc-punkt__cel::after {
content: "";
position: absolute;
inset: -1px;
border: 1px solid color-mix(in srgb, var(--wp--preset--color--purr-light) 90%, transparent);
border-radius: 1px;
opacity: 0;
}
.fbc-punkt__cel.is-active::before,
.fbc-punkt__cel.is-active::after { animation: fbc-sonar 2s ease-out infinite; }
.fbc-punkt__cel.is-active::after { animation-delay: 1s; }
@keyframes fbc-sonar {
0% { transform: scale(1); opacity: 0.95; }
70% { opacity: 0.25; }
100% { transform: scale(4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.fbc-punkty__linie polyline.is-active { animation: none; stroke-dashoffset: 0; }
.fbc-punkt__cel.is-active::before { animation: none; opacity: 1; transform: scale(2.2); }
.fbc-punkt__cel.is-active::after { display: none; }
}
/* Więcej powietrza pod sekcją atutów: render schodzi poniżej listy
(kolumna + 200 px), więc sam rytm sekcji zostawiał go przy krawędzi. */
.wp-site-blocks main > .alignfull.fbc-punkty-sekcja { padding-block-end: calc(clamp(3.5rem, 7vw, 6rem) + 4rem); }
/* Poświata jak w hero, w prawym górnym rogu, duża. Własna warstwa
`.fbc-poswiata` z `overflow: hidden`: sekcja sama nie może przycinać
(głowa pedału ma wystawać), a skalowana poświata musi zostać w kadrze.
Skala rośnie od narożnika (`transform-origin: 100% 0`), więc krawędzie
nigdy się nie odsłaniają. Bez siatki — decyzja klienta. */
.fbc-z-ziarnem > .fbc-poswiata {
position: absolute;
inset: 0;
margin: 0 !important;
z-index: -1;
overflow: hidden;
pointer-events: none;
}
.fbc-poswiata::before {
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(78% 88% at 100% 0%, rgba(118, 0, 112, 0.62) 0%, rgba(118, 0, 112, 0.32) 30%, rgba(118, 0, 112, 0.1) 58%, transparent 78%),
radial-gradient(34% 38% at 100% 0%, rgba(180, 0, 168, 0.35) 0%, transparent 65%);
background-repeat: no-repeat, no-repeat;
transform-origin: 100% 0;
animation: fbc-dryf-punkty 14s ease-in-out infinite alternate;
}
@keyframes fbc-dryf-punkty {
from { transform: scale(1); }
to { transform: scale(1.14); }
}
@media (prefers-reduced-motion: reduce) {
.fbc-poswiata::before { animation: none; }
}
/* Cień pod podstawą: szeroka fioletowa plama światła na „podłodze"
(poświata odbita od blatu) i wąska, czarna elipsa kontaktu tuż pod
podstawą. Render nie ma cienia w alfie; sama czerń na czerni nie istnieje. */
.fbc-punkty__kadr::before {
content: "";
position: absolute;
left: 4%;
right: -6%;
bottom: -4%;
height: 20%;
z-index: 0;
background: radial-gradient(50% 50% at 52% 50%, rgba(118, 0, 112, 0.42) 0%, rgba(118, 0, 112, 0.18) 45%, transparent 72%);
filter: blur(4px);
pointer-events: none;
}
.fbc-punkty__cien {
position: absolute;
left: 16%;
right: 4%;
bottom: 1%;
height: 8%;
z-index: 0;
background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.6) 40%, transparent 70%);
filter: blur(5px);
pointer-events: none;
}
.fbc-punkty__kadr > img { position: relative; z-index: 1; }
/* Znaczniki zawsze nad zdjęciem. Na desktopie stoją obok pedału, ale od
1200 px w dół przesuwają się na samo zdjęcie — i obraz z `z-index: 1`
przejmował każde stuknięcie; na telefonie żaden znacznik nie reagował
(audyt 2026-09-23). */
.fbc-punkt { z-index: 2; }
@media (max-width: 1199.98px) {
.fbc-punkty { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--60); }
.fbc-punkty__foto { order: -1; aspect-ratio: 4 / 5; }
.fbc-punkt { left: var(--lxm, var(--lx)); top: var(--lym, var(--ly)); }
}
/* --------------------------------------------------------------------------
8c. Opinie — zdjęcie na całą szerokość, jeden cytat w rotacji
Fotografia z sesji w czerni i bieli pod ciemną warstwą; grupa sama jest
kadrem (`fbc-glos-tlo`), zdjęcie to jej bezpośrednie dziecko na z-index -2,
ziarno na -1, treść na wierzchu. Linia nad pasem marek jest paskiem
postępu: tor to linia sekcji, wypełnienie to fiolet skalowany od lewej
przez czas jednego cytatu (--fbc-glos-czas); najazd wstrzymuje zegar.
Strzałki 32 px z obrysem w kolorze linii. Cytat trzyma miejsce na trzy
linie, żeby zmiana tekstu nie ruszała reszty.
-------------------------------------------------------------------------- */
.fbc-glos-tlo {
--fbc-glos-czas: 7s;
min-height: min(88vh, 760px);
display: flex;
flex-direction: column;
justify-content: center; /* treść na środku sekcji (klient), nie przy dole */
}
/* W kolumnie flexa `margin-inline: auto` od układu constrained centruje
dzieci — tu ma być lewa krawędź, jak wszędzie. */
.fbc-glos-tlo > * { margin-inline: 0 !important; }
.fbc-glos-tlo__foto {
position: absolute;
inset: 0;
z-index: -2;
margin: 0 !important;
max-width: none !important;
overflow: hidden;
}
.fbc-glos-tlo__foto img {
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 62% 50%;
filter: grayscale(1) brightness(0.55) contrast(1.1);
}
.fbc-glos-tlo__foto::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(to right, color-mix(in srgb, var(--wp--preset--color--ground-dark) 88%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--ground-dark) 45%, transparent) 55%, transparent 100%),
linear-gradient(to top, var(--wp--preset--color--ground-dark) 0%, transparent 45%);
}
.fbc-ocena {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--wp--preset--spacing--30);
margin: 0;
font-family: var(--wp--preset--font-family--mono);
font-size: var(--wp--preset--font-size--small);
letter-spacing: 0.08em;
color: var(--wp--preset--color--contrast-3);
}
.fbc-gwiazdki { letter-spacing: 0.12em; color: var(--wp--preset--color--purr-light); }
.fbc-ocena strong { font-weight: 500; color: var(--wp--preset--color--base); }
.fbc-glos-tlo .fbc-glos {
min-height: calc(3 * 1.12 * clamp(1.8rem, 3.4vw, 3.4rem) + 3.5rem);
transition: opacity 320ms ease;
}
.fbc-glos-tlo .fbc-glos--znika { opacity: 0; }
.fbc-glos-tlo .fbc-glos__cytat {
margin: var(--wp--preset--spacing--50) 0 0;
max-width: 24ch;
font-size: clamp(1.8rem, 3.4vw, 3.4rem);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.12;
text-wrap: balance;
}
.fbc-glos__cytat::before { content: "\201C"; color: var(--wp--preset--color--purr-light); margin-inline-end: 0.05em; }
.fbc-glos__cytat::after { content: "\201D"; color: var(--wp--preset--color--purr-light); margin-inline-start: 0.05em; }
.fbc-glos__autor {
margin-block-start: var(--wp--preset--spacing--40);
font-family: var(--wp--preset--font-family--mono);
font-size: var(--wp--preset--font-size--small);
letter-spacing: 0.08em;
color: var(--wp--preset--color--contrast-3);
}
.fbc-glos__autor b { font-weight: 500; color: var(--wp--preset--color--base); }
.fbc-postep {
position: relative;
height: 1px;
margin-block-start: var(--wp--preset--spacing--80);
background: var(--wp--preset--color--line-dark);
}
.fbc-postep__wypelnienie {
position: absolute;
inset: -1px 0 0; /* 2 px: linia 1 px w fiolecie ginęła na czerni */
background: var(--wp--preset--color--purr);
transform: scaleX(0);
transform-origin: left center;
}
.fbc-postep__wypelnienie--biegnie { animation: fbc-postep var(--fbc-glos-czas) linear forwards; }
@keyframes fbc-postep { to { transform: scaleX(1); } }
.fbc-postep__nawigacja {
position: absolute;
right: 0;
bottom: var(--wp--preset--spacing--30);
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--30);
}
.fbc-postep__licznik {
min-width: 5ch;
text-align: center;
font-family: var(--wp--preset--font-family--mono);
font-size: 0.66rem;
letter-spacing: 0.12em;
color: var(--wp--preset--color--contrast-3);
}
.fbc-postep__wstecz,
.fbc-postep__dalej {
display: inline-grid;
place-items: center;
width: 32px;
height: 32px;
padding: 0;
border: 1px solid var(--wp--preset--color--line-dark);
border-radius: 2px;
background: transparent;
color: var(--wp--preset--color--base);
opacity: 0.7;
cursor: pointer;
transition: opacity 200ms ease, border-color 200ms ease;
}
.fbc-postep__wstecz:hover,
.fbc-postep__dalej:hover { opacity: 1; border-color: var(--wp--preset--color--base); }
.fbc-postep__wstecz:focus-visible,
.fbc-postep__dalej:focus-visible { outline: 2px solid var(--wp--preset--color--base); outline-offset: 2px; }
.fbc-postep__odbicie { display: inline-grid; transform: scaleX(-1); }
@media (prefers-reduced-motion: reduce) {
.fbc-postep__wypelnienie--biegnie { animation: none; }
}
.fbc-przesiadki {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--60);
margin-block-start: var(--wp--preset--spacing--40);
font-family: var(--wp--preset--font-family--mono);
font-size: 0.72rem;
letter-spacing: 0.1em;
color: var(--wp--preset--color--contrast-3);
}
.fbc-przesiadki span { color: var(--wp--preset--color--base); opacity: 0.85; }
.fbc-przesiadki .fbc-przesiadki__etyk { color: var(--wp--preset--color--purr-light); opacity: 1; }
/* --------------------------------------------------------------------------
8d. Baner akcesoriów
Ciemna wyspa na jasnej sekcji: Ground dark, ścięte narożniki jak w kartach
(22 px) i ziarno jak w hero. Tekst po lewej, zdjęcie po prawej wtopione
maską od lewej — zdjęcie produktowe ma ciemny blat, więc szew znika.
Przycisk i nadlinia biorą wariant ciemny przez klasę `is-style-sekcja-ciemna`
nadaną w CSS? Nie — variation działa tylko na blokach. Dlatego kolory
są tu ustawione wprost: biały tekst, ghost-zmienne dla przycisku.
-------------------------------------------------------------------------- */
.fbc-baner {
--fbc-sciecie: 22px;
--fbc-ghost-linia: rgba(255, 255, 255, 0.85);
--fbc-ghost-plomba: transparent;
--fbc-ghost-tekst: rgba(255, 255, 255, 0.85);
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
min-height: 420px;
color: var(--wp--preset--color--base);
background: var(--wp--preset--color--ground-dark);
border: 1px solid var(--wp--preset--color--line-dark);
overflow: clip;
clip-path: polygon(
var(--fbc-sciecie) 0,
100% 0,
100% calc(100% - var(--fbc-sciecie)),
calc(100% - var(--fbc-sciecie)) 100%,
0 100%,
0 var(--fbc-sciecie)
);
}
@supports (corner-shape: bevel) {
.fbc-baner {
clip-path: none;
corner-shape: bevel;
border-radius: var(--fbc-sciecie) 0 var(--fbc-sciecie) 0;
}
}
.fbc-baner .fbc-eyebrow { color: var(--wp--preset--color--purr-light); }
.fbc-baner h2 { color: var(--wp--preset--color--base); max-width: 12ch; text-wrap: balance; margin-block-start: var(--wp--preset--spacing--30); font-size: clamp(2.2rem, 3.4vw, 3.6rem) !important; line-height: 1.05; letter-spacing: -0.02em; }
.fbc-baner__tresc {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--70);
}
.fbc-baner__lead { margin-block-start: var(--wp--preset--spacing--40); max-width: 40ch; color: var(--wp--preset--color--contrast-3); }
.fbc-baner .wp-block-buttons { margin-block-start: var(--wp--preset--spacing--60); }
/* Przycisk w banerze: biały na ciemnym, jak w sekcji ciemnej. */
.fbc-baner .wp-block-button__link { background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); }
.fbc-baner__foto {
position: relative;
margin: 0;
min-height: 320px;
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 38%, #000 100%);
mask-image: linear-gradient(to right, transparent 0%, #000 38%, #000 100%);
}
/* Zdjęcie ma u góry jasną ścianę — przyciemniamy ją, żeby wyspa została
ciemna; blat na dole zostaje. */
.fbc-baner__foto::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom, color-mix(in srgb, var(--wp--preset--color--ground-dark) 78%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--ground-dark) 30%, transparent) 45%, transparent 70%);
pointer-events: none;
}
.fbc-baner__foto img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 50% 45%;
display: block;
}
/* Baner z tłem na całą kartę (klient 2026-09-05): scena z Higgsfield ze
sprężynami po prawej; tekst po lewej na łagodnym ściemnieniu, żeby czytał
się na jaśniejszej części blatu. Bez kolumny ze zdjęciem. */
.fbc-baner--tlo {
grid-template-columns: minmax(0, 1fr);
min-height: 460px;
background: var(--fbc-baner-tlo) 50% 50% / cover no-repeat, var(--wp--preset--color--ground-dark);
}
.fbc-baner--tlo::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to right, color-mix(in srgb, var(--wp--preset--color--ground-dark) 78%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--ground-dark) 45%, transparent) 42%, transparent 62%);
pointer-events: none;
}
.fbc-baner--tlo .fbc-baner__tresc { max-width: 34rem; }
@media (max-width: 899.98px) {
.fbc-baner--tlo { min-height: 520px; background-position: 72% 50%; }
.fbc-baner--tlo::before { background: linear-gradient(to bottom, color-mix(in srgb, var(--wp--preset--color--ground-dark) 82%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--ground-dark) 40%, transparent) 55%, transparent 80%); }
}
@media (max-width: 899.98px) {
.fbc-baner { grid-template-columns: 1fr; --fbc-sciecie: 16px; }
.fbc-baner__tresc { padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50); }
.fbc-baner__foto {
min-height: 260px;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 100%);
mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 100%);
}
}
/* --------------------------------------------------------------------------
8e. Historia — taśma
Poziomy pas kart do krawędzi okna (ujemne marginesy równe gutterowi),
scroll-snap, karta w kadrze w kolorze, reszta czarno-biała. Pas jest
przyklejony do sekcji wyżej: sekcja ciemna po ciemnej nie ma górnego
paddingu (sekcja 9), a taśma jest pierwszym dzieckiem grupy. Pasek pod
taśmą to pozycja przewinięcia (skrypt), strzałki przewijają o kartę.
Nagłówek dopiero POD taśmą — decyzja klienta.
-------------------------------------------------------------------------- */
/* Przyklejenie do sekcji wyżej: rdzeń daje blokom w main odstęp 24 px
(margines), a rytm sekcji (sekcja 9) górny padding — oba selektorem
z `>` o wyższej specyficzności niż reguła „ciemna po ciemnej", więc
trzeba tak samo. */
.wp-site-blocks main > .alignfull.fbc-historia-sekcja { margin-block-start: 0; padding-block-start: 0; }
/* Sekcja opinii nad taśmą: dolny padding schodzi do 48 px, żeby pas zdjęć
siedział tuż pod pasem marek, a nie 96 px niżej. */
.wp-site-blocks main > .alignfull.fbc-glos-tlo { padding-block-end: var(--wp--preset--spacing--70); }
.fbc-tasma { margin: 0; }
/* Taśma sterowana scrollem (historia): pojemnik `.fbc-tasma__lep` przykleja
się do okna, a wysokość `.fbc-tasma` (ustawiana skryptem) daje drogę
przewijania równą szerokości ukrytej części taśmy. Klasa `is-scroll`
nadawana przez historia.js tylko przy ≥ 900 px i bez ograniczenia ruchu. */
.fbc-tasma.is-scroll .fbc-tasma__lep { position: sticky; top: 0; }
.fbc-tasma.is-scroll .fbc-tasma__tor { overflow-x: hidden; scroll-snap-type: none; }
.wp-site-blocks main .fbc-tasma__tor {
display: flex;
gap: 12px;
margin-inline: calc(-1 * var(--fbc-gutter));
max-width: none;
padding-inline: var(--fbc-gutter);
padding-block-end: var(--wp--preset--spacing--20);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--fbc-gutter);
scrollbar-width: none;
}
.fbc-tasma__tor::-webkit-scrollbar { display: none; }
.fbc-tasma__tor:focus-visible { outline: 2px solid var(--wp--preset--color--base); outline-offset: -2px; }
.fbc-tasma__karta {
position: relative;
flex: 0 0 min(62vw, 880px);
aspect-ratio: 16 / 10;
overflow: hidden;
border-radius: 2px;
scroll-snap-align: start;
background: var(--wp--preset--color--contrast);
}
.fbc-tasma__karta img,
.fbc-tasma__karta .fbc-wideo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
display: block;
filter: grayscale(1) brightness(0.7);
transition: filter 700ms ease;
}
.fbc-tasma__karta.is-active img,
.fbc-tasma__karta.is-active .fbc-wideo { filter: grayscale(0) brightness(0.85); }
.fbc-tasma__karta::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, color-mix(in srgb, var(--wp--preset--color--ground-dark) 92%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--ground-dark) 30%, transparent) 50%, transparent 100%);
}
.fbc-tasma__tekst {
position: absolute;
inset-inline: 0;
bottom: 0;
z-index: 1;
padding: var(--wp--preset--spacing--50);
}
.fbc-tasma__tekst .fbc-nr {
display: block;
font-family: var(--wp--preset--font-family--mono);
font-size: var(--wp--preset--font-size--small);
letter-spacing: 0.14em;
color: var(--wp--preset--color--purr-light);
}
.fbc-tasma__tekst h3 { margin-block-start: var(--wp--preset--spacing--20); }
.fbc-tasma__tekst p { margin-block-start: var(--wp--preset--spacing--30); max-width: 48ch; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--base-3); }
/* 96 px, nie 32: strzałki stoją nad linią (32 px + 12 px), przy 32 px wchodziły na karty. */
.fbc-tasma .fbc-postep { margin-block-start: var(--wp--preset--spacing--90); }
.fbc-postep__wypelnienie--reczne { transition: transform 120ms linear; }
/* Wideo w karcie: pętla bez dźwięku, przy ograniczonym ruchu sama klatka. */
.fbc-wideo__poster { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Przy ograniczonym ruchu film taśmy ZOSTAJE (decyzja klienta 2026-09-05:
„film wciąż nie działa" — poster zamiast filmu czytał się jako brak filmu);
pętla jest wyciszona i bez dźwięku. Poster tylko jako zapas bez JS. */
/* Nagłówek pod taśmą: tekst po lewej, portret założyciela po prawej.
Portret jest wycięty z tła i wygaszony w alfie od dołu, więc siedzi
wprost na tle sekcji i „wyrasta” z jej dolnej krawędzi. */
.fbc-historia-naglowek {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: var(--wp--preset--spacing--80);
align-items: end;
margin-block-start: var(--wp--preset--spacing--80);
}
.fbc-historia-naglowek h2 { max-width: 22ch; text-wrap: balance; }
.fbc-zalozyciel {
position: relative;
margin: 0;
justify-self: end;
width: min(100%, 32rem);
/* Od 2026-09-30 zwykłe zdjęcie (bez maski wygaszającej) — nie dochodzi już do krawędzi sekcji. */
}
.fbc-zalozyciel img { width: 100%; height: auto; max-width: none; display: block; }
.fbc-zalozyciel__podpis {
/* Pod zdjęciem, nie na nim — na zwykłym zdjęciu podpis leżał na bolidzie (2026-09-30). */
position: static;
margin-block-start: var(--wp--preset--spacing--30);
display: grid;
gap: var(--wp--preset--spacing--10);
}
/* Podpis odręczny — PLACEHOLDER: Caveat 600 hostowany lokalnie, jasny
fiolet, lekki skos. Do podmiany na skan (SVG) prawdziwego podpisu. */
@font-face {
font-family: "Caveat";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("assets/fonts/caveat-600-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Caveat";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("assets/fonts/caveat-600-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.fbc-podpis {
font-family: "Caveat", "Segoe Script", cursive;
font-weight: 600;
font-size: clamp(2rem, 3vw, 2.8rem);
line-height: 1;
color: var(--wp--preset--color--purr-light);
transform: rotate(-4deg);
transform-origin: left bottom;
white-space: nowrap;
}
.fbc-zalozyciel__rola {
font-family: var(--wp--preset--font-family--mono);
font-size: 0.7rem;
letter-spacing: 0.1em;
color: var(--wp--preset--color--contrast-3);
white-space: nowrap;
}
@media (max-width: 899.98px) {
.fbc-historia-naglowek { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--60); }
.fbc-zalozyciel { justify-self: start; width: min(100%, 20rem); }
.fbc-zalozyciel__podpis { left: 0; }
}
.fbc-historia-naglowek__lead {
max-width: 52ch;
margin-block-start: var(--wp--preset--spacing--40);
color: var(--wp--preset--color--contrast-3);
font-size: var(--wp--preset--font-size--large);
}
@media (max-width: 599.98px) {
.fbc-tasma__karta { flex-basis: 86vw; aspect-ratio: 4 / 5; }
}
/* --------------------------------------------------------------------------
8f. Po zakupie — PurrOS, społeczność (wzorzec home-wsparcie) i FAQ (home-faq)
Jasna sekcja pod historią, bloki oddzielone liniami
(`.fbc-wsparcie__blok`). Wspólne klocki: `.fbc-etykieta` (mono, szara
nadlinia bloku), `.fbc-link-dalej` (link ze strzałką, jak w kartach
produktów) i `.fbc-sciety` (ścięte narożniki jak w przyciskach i kartach:
`corner-shape: bevel` z zapasem `clip-path`). FAQ to natywne ,
znak +/× rysowany dwoma kreskami, bez skryptu.
-------------------------------------------------------------------------- */
.fbc-wsparcie { display: block; }
.fbc-wsparcie__naglowek h2 { max-width: 20ch; text-wrap: balance; }
.fbc-wsparcie__lead {
max-width: 56ch;
margin-block-start: var(--wp--preset--spacing--40);
font-size: var(--wp--preset--font-size--large);
color: var(--wp--preset--color--contrast-2);
}
.fbc-wsparcie__blok { margin-block-start: var(--wp--preset--spacing--80); }
.fbc-wsparcie__blok + .fbc-wsparcie__blok {
padding-block-start: var(--wp--preset--spacing--80);
border-block-start: 1px solid var(--wp--preset--color--line);
}
/* Klocki wspólne. */
.fbc-etykieta {
margin: 0 0 var(--wp--preset--spacing--30);
font-family: var(--wp--preset--font-family--mono);
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--wp--preset--color--contrast-3);
}
.fbc-link-dalej {
display: inline-block;
font-family: var(--wp--preset--font-family--mono);
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--wp--preset--color--purr);
text-decoration: none;
}
.fbc-link-dalej span { display: inline-block; transition: transform 250ms ease; }
.fbc-link-dalej:hover span { transform: translateX(4px); }
.fbc-sciety {
--fbc-sciecie: 16px;
clip-path: polygon(
var(--fbc-sciecie) 0,
100% 0,
100% calc(100% - var(--fbc-sciecie)),
calc(100% - var(--fbc-sciecie)) 100%,
0 100%,
0 var(--fbc-sciecie)
);
}
@supports (corner-shape: bevel) {
.fbc-sciety {
clip-path: none;
corner-shape: bevel;
border-radius: var(--fbc-sciecie) 0 var(--fbc-sciecie) 0;
overflow: clip;
}
}
/* Blok 1: PurrOS. Tekst po lewej, zrzut aplikacji po prawej w ciemnej ramce
(aplikacja ma ciemny interfejs, więc ramka w Ground dark szyje się ze zrzutem). */
/* Sekcja PurrOS: pełna wysokość okna, bez paddingu i marginesu (styka się
z sekcjami wyżej i niżej), kolumny 40 / 60 liczone od krawędzi OKNA ze
stałym odstępem; siatka na 40 % szerokości prawej kolumny, do prawej
krawędzi ekranu (klient). */
.wp-site-blocks main > .alignfull.fbc-purros-sekcja {
position: relative;
padding-block: 0;
margin-block: 0;
min-height: 100dvh;
overflow: clip;
background: var(--wp--preset--color--base);
}
/* Sekcja pod spodem bez odstępu bloku — siatka ma się stykać z następną sekcją. */
.wp-site-blocks main > .fbc-purros-sekcja + * { margin-block-start: 0; }
/* Linia pod sekcją (jak wcześniej między PurrOS a kartami), na całą szerokość okna. */
.fbc-purros-sekcja::after {
content: "";
position: absolute;
bottom: 0;
left: 0; /* od krawędzi do krawędzi okna (klient) */
right: 0;
height: 1px;
background: var(--wp--preset--color--line);
}
.fbc-purros-sekcja::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
/* Od lewej krawędzi prawej kolumny (środek + pół odstępu) + 100 px do prawej
krawędzi ekranu: karty zostają na krawędzi kolumny, a siatka zaczyna się
100 px dalej (klient) — przy zwężaniu okna karty nie wchodzą na tekst. */
left: calc(40% + clamp(2rem, 5vw, 5rem) * 0.4 + 100px); /* start prawej kolumny (40 % + 2/5 odstępu) + 100 px */
right: 0;
background-image:
repeating-linear-gradient(to right, rgba(19, 19, 21, 0.08) 0 1px, transparent 1px 40px),
repeating-linear-gradient(to bottom, rgba(19, 19, 21, 0.08) 0 1px, transparent 1px 40px);
pointer-events: none;
}
.fbc-purros {
position: relative;
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); /* 40 / 60 (klient) */
column-gap: clamp(2rem, 5vw, 5rem); /* ustalony odstęp między kolumnami */
min-height: 100dvh;
align-items: center;
}
.fbc-purros__tekst {
/* Sekcja alignfull ma już wcięcie gutter z układu (root padding), więc bez własnego. */
padding: clamp(3.5rem, 7vw, 6rem) 0;
max-width: 33.5rem; /* 33,5 zamiast 34: przy 1440 px deck przesunięty 100 px w lewo stykał się z listą */
box-sizing: border-box;
}
.fbc-purros__tekst h2 { max-width: 14ch; text-wrap: balance; }
.fbc-purros__lead { margin-block-start: var(--wp--preset--spacing--40); max-width: 44ch; color: var(--wp--preset--color--contrast-2); font-size: var(--wp--preset--font-size--large); }
.fbc-wsparcie > .fbc-wsparcie__blok:first-child { margin-block-start: 0; }
.fbc-purros__punkty {
list-style: none;
margin: var(--wp--preset--spacing--60) 0 0;
padding: 0;
border-block-start: 1px solid var(--wp--preset--color--line);
}
/* Punkty w stylu FAQ (8f) i listy atutów (8b): numer mono, tytuł 700,
znak + / × po prawej, opis rozwijany pod tytułem tylko dla aktywnego. */
.fbc-purros__punkty li {
position: relative;
display: grid;
grid-template-columns: var(--fbc-faq-nr, 2.4rem) minmax(0, 1fr) 1.5rem;
gap: var(--wp--preset--spacing--20) var(--fbc-faq-gap, var(--wp--preset--spacing--30)); /* row-gap stały, żeby opis w max-height nie potrzebował paddingu */
align-items: baseline;
padding-block: var(--wp--preset--spacing--40);
border-block-end: 1px solid var(--wp--preset--color--line);
font-weight: 700;
line-height: 1.35;
color: var(--wp--preset--color--contrast);
cursor: pointer;
outline: 0;
}
.fbc-purros__punkty li:focus-visible { outline: 2px solid var(--wp--preset--color--purr); outline-offset: 4px; }
.fbc-purros__punkty .fbc-nr {
font-family: var(--wp--preset--font-family--mono);
font-size: var(--wp--preset--font-size--small);
font-weight: 400; /* jak w atutach — jedna typografia list rozwijanych */
color: var(--wp--preset--color--purr);
}
.fbc-purros__punkty strong { font-weight: 700; }
.fbc-purros__znak { position: relative; align-self: center; width: 14px; height: 14px; justify-self: end; }
.fbc-purros__znak::before,
.fbc-purros__znak::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; background: currentColor; transition: transform 300ms cubic-bezier(.2,.7,.2,1); }
.fbc-purros__znak::after { transform: rotate(90deg); }
.fbc-purros__punkty li.is-active .fbc-purros__znak::before { transform: rotate(45deg); }
.fbc-purros__punkty li.is-active .fbc-purros__znak::after { transform: rotate(-45deg); }
/* Opis tylko dla aktywnego punktu. Zwijanie i rozwijanie idą tym samym
przejściem `max-height` między 0 a STAŁĄ wysokością (2 linie + odstęp),
więc gdy jeden punkt się zwija, a drugi rozwija, suma wysokości listy nie
zmienia się w żadnej klatce — lewa kolumna nie drga (klient). Wiersze
siatki 0fr → 1fr (jak w FAQ) nie dawały tej symetrii. */
.fbc-purros__punkty li > span:last-of-type {
grid-column: 2;
display: block;
font-weight: 400;
color: var(--wp--preset--color--contrast-2);
/* Rezerwa wysokości = NAJDŁUŻSZY opis w tym paśmie szerokości. Musi być
równa realnej liczbie linii, bo `overflow: hidden` inaczej utnie tekst
(po tekstach klienta z 2026-09-18 pierwszy opis ma 139 znaków i nie
mieścił się w dwóch liniach). Zmierzone: 3 linie od 1600 px, 4 w paśmie
1200–1599, 5 poniżej 1200. Wysokość jest stała, żeby przy przełączaniu
punktów lista nie drgała. */
--fbc-opis-h: calc(5 * 1.55em);
}
@media (min-width: 1200px) {
.fbc-purros__punkty li > span:last-of-type { --fbc-opis-h: calc(4 * 1.55em); }
}
@media (min-width: 1600px) {
.fbc-purros__punkty li > span:last-of-type { --fbc-opis-h: calc(3 * 1.55em); }
}
.fbc-purros__punkty li > span:last-of-type > i {
display: block;
box-sizing: border-box;
height: var(--fbc-opis-h); /* stała, żeby 1-liniowy opis ważył tyle samo co 2-liniowy */
max-height: 0;
overflow: hidden;
padding: 0; /* padding tworzyłby podłogę pod max-height: 0 i psuł symetrię przejść */
font-style: normal;
line-height: 1.55;
transition: max-height 420ms cubic-bezier(.2,.7,.2,1);
}
.fbc-purros__punkty li.is-active > span:last-of-type > i { max-height: var(--fbc-opis-h); }
/* Pasek auto-przełączania pod aktywnym punktem (5 s, purros.js). */
.fbc-purros__pasek { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--wp--preset--color--purr); transform: scaleX(0); transform-origin: left; }
.fbc-purros.is-auto .fbc-purros__punkty li.is-active .fbc-purros__pasek { animation: fbc-postep 5s linear forwards; }
.fbc-purros__tekst .fbc-link-dalej { margin-block-start: var(--wp--preset--spacing--50); }
/* Deck zrzutów PurrOS — wariant D z laboratorium (runda 8), wybrany przez
klienta. Scena izometryczna (rotateX + rotateZ) z LIMITEM 640 px
i wyśrodkowana, więc na ultrawide nie rośnie z kolumną. Trzy okna 4:3
— kadr na detal panelu (object-position), nie cały ekran 16:9 — w trzech
slotach na osi Y/Z; aktywne okno dostaje slot 1 (przód), reszta cofa się
(purros.js ustawia data-slot). Zrzuty prawdziwe, bez generatora. */
.fbc-purros__stos {
position: relative;
align-self: stretch;
min-height: 100dvh;
margin: 0;
}
.fbc-purros__scena {
position: absolute;
/* Bez rzutu izometrycznego (klient): karty 16:9 płasko, jedna na drugiej,
przesunięte w górę i lekko pomniejszone w głąb; aktywna z przodu.
Wyśrodkowane w pionie, dosunięte do prawej. */
top: 50%;
left: 0;
/* Kaskada (klient): aktywna karta najbardziej po lewej i na dole, dotyka
lewej krawędzi kolumny; każda kolejna w prawo (7 % i 14 % swojej
szerokości) i wyżej, pomniejszona o 5 % na warstwę.
Karty na całą szerokość kolumny, zaczepione z lewej (klient: „powiększ,
punkt zaczepienia z lewej") — kaskada może wyjść poza prawą krawędź okna. */
width: 100%;
aspect-ratio: 16 / 9;
/* Delikatnie mniejszy cały stos, zaczepiony z lewej na środku wysokości (klient). */
transform: translateY(-46%) scale(0.9);
transform-origin: 0 50%;
}
.fbc-purros__okno {
position: absolute;
left: 0;
top: 0;
width: 100%;
/* Karta 16:9 (klient). Zrzuty PurrOS są 16:10, więc obraz wypełnia pole pod
paskiem okna z lekkim przycięciem dołu (góra z paskiem narzędzi zostaje). */
aspect-ratio: 16 / 9;
display: grid;
grid-template-rows: minmax(0, 1fr);
transform-origin: 0 0;
border-radius: 6px;
background: var(--wp--preset--color--ground-dark); /* czarne, kryjące podtło (klient): karty z tyłu mają zrzut w 50 %, nie przenikają się i ciemnieją zamiast blednąć */
/* Bez białej ramki (klient); 2 px ciemnej krawędzi u dołu, do tego dwa miękkie cienie — w dół (na
siatkę) i w górę sceny (na kartę za nią, która przez to ciemnieje bez
żadnej nakładki). */
overflow: hidden;
box-shadow:
0 2px 0 0 #2a2a2f,
16px -18px 22px -6px rgba(5, 5, 8, 0.3); /* cień w prawą górę: mniej rozproszony, słabszy (klient) */
/* Bez przenikania i bez nakładki (klient): okna kryjące; karta niżej
w stosie jest ciemniejsza tylko tam, gdzie pada na nią cień karty
z przodu — cień skierowany „w górę" sceny (w stronę kart za nią). */
opacity: 1;
transition: transform 900ms cubic-bezier(.2,.7,.2,1), top 900ms cubic-bezier(.2,.7,.2,1);
backface-visibility: hidden;
}
.fbc-purros__okno img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 50% 0;
}
/* Karty z tyłu: zrzut w 50 % krycia na białym, kryjącym podtle. */
.fbc-purros__okno:not([data-slot="1"]) img { opacity: 0.5; filter: grayscale(1); } /* karty pod spodem: czerń-biel (klient) */
.fbc-purros__okno img { transition: opacity 400ms ease, filter 400ms ease; }
/* Bez udawanego paska okna (klient 2026-09-18: „do screenów aplikacji nie
dodawaj już okna aplikacji, screen go ma") — zrzuty PurrOS mają własny pasek
tytułu, a nasz siedział nad nim i wychodziły dwa paski jeden na drugim. */
.fbc-purros__okno[data-slot="1"] { transform: translateY(0) scale(1); z-index: 3; }
.fbc-purros__okno[data-slot="2"] { transform: translate(7%, -9%) scale(0.95); z-index: 2; }
.fbc-purros__okno[data-slot="3"] { transform: translate(14%, -18%) scale(0.9); z-index: 1; }
/* Czwarte okno od 2026-09-18 (komplet zrzutów od klienta): ten sam krok kaskady
co poprzednie, czyli 7 % w prawo i 9 % w górę na warstwę. */
.fbc-purros__okno[data-slot="4"] { transform: translate(21%, -27%) scale(0.85); z-index: 0; }
@media (prefers-reduced-motion: reduce) {
.fbc-purros__scena, .fbc-purros__okno, .fbc-purros__punkty li > span:last-of-type > i { transition: none; }
.fbc-purros.is-auto .fbc-purros__punkty li.is-active .fbc-purros__pasek { animation: none; }
}
/* Blok 2: trzy karty. Hairline, na najeździe fioletowa ramka i lekkie uniesienie. */
.fbc-wsparcie-karty {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)); /* trzy karty od 2026-09-18 (gwarancja skasowana) */
gap: 12px;
}
.fbc-wsparcie-karta {
display: flex;
flex-direction: column;
padding: var(--wp--preset--spacing--50);
background: var(--wp--preset--color--base);
border: 1px solid var(--wp--preset--color--line);
transition: border-color 250ms ease, transform 350ms cubic-bezier(.2,.7,.2,1);
}
/* Ikona karty w kolorze akcentu (klient), nad nadlinią. */
.fbc-wsparcie-karta__ikona {
display: block;
width: 32px;
height: 32px;
margin-block-end: var(--wp--preset--spacing--40);
color: var(--wp--preset--color--purr);
}
.fbc-wsparcie-karta__ikona svg { display: block; width: 100%; height: 100%; }
.fbc-wsparcie-karta h3 { text-wrap: balance; }
.fbc-wsparcie-karta > p:not(.fbc-etykieta) {
margin-block-start: var(--wp--preset--spacing--30);
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--contrast-2);
max-width: 36ch;
}
.fbc-wsparcie-karta .fbc-link-dalej {
align-self: flex-start;
margin-block-start: auto;
padding-block-start: var(--wp--preset--spacing--50);
}
/* Cała karta klikalna (klient 2026-09-18: „każda karta klikalna") — warstwa
`::after` odnośnika zamiast opakowywania treści w , tak samo jak
w kartach produktów: w drzewie dostępności zostaje jeden odnośnik
z krótką nazwą, a nie blok z nadlinią, nagłówkiem i akapitem w środku. */
.fbc-wsparcie-karta { position: relative; }
.fbc-wsparcie-karta .fbc-link-dalej::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
@media (hover: hover) {
.fbc-wsparcie-karta:hover { border-color: var(--wp--preset--color--purr); transform: translateY(-3px); }
}
/* FAQ (wzorzec home-faq, własna jasna sekcja). Nagłówek przyklejony po lewej, lista po prawej. */
.fbc-faq {
display: grid;
grid-template-columns: var(--fbc-dwie-kolumny);
gap: var(--fbc-dwie-kolumny-gap);
}
/* Odwrócone kolumny (klient): kadr z lewej w węższej kolumnie, tekst z prawej. */
.fbc-recenzja__tekst { order: 2; }
.fbc-recenzja__wideo { order: 1;
gap: clamp(2.5rem, 6vw, 5rem);
align-items: start;
}
/* Sam margines okna, bez rezerwy na nagłówek: nagłówek motywu nie jest przyklejony
(`position: relative`), więc w chwili przyklejenia dawno go nie ma na ekranie,
a `72px + 24px` zostawiało nad tekstem pustą listwę (klient 2026-09-15).
`--fbc-naglowek-h` nigdzie nie było zdefiniowane — działał sam fallback 72px. */
.fbc-faq__naglowek { position: sticky; top: var(--wp--preset--spacing--50); }
.fbc-faq__naglowek h3 { max-width: 14ch; text-wrap: balance; }
.fbc-faq__naglowek .fbc-link-dalej { margin-block-start: var(--wp--preset--spacing--50); }
.fbc-faq__lista { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--wp--preset--color--line); }
.fbc-faq__el { border-block-end: 1px solid var(--wp--preset--color--line); }
/* Kolumna numeru i odstęp siatki — te same wartości wcinają odpowiedź,
żeby jej lewa krawędź stała dokładnie pod pytaniem. */
.fbc-faq { --fbc-faq-nr: 2.4rem; --fbc-faq-gap: var(--wp--preset--spacing--30); }
.fbc-faq__pytanie {
display: grid;
grid-template-columns: var(--fbc-faq-nr) minmax(0, 1fr) 1.5rem;
gap: var(--fbc-faq-gap);
align-items: baseline;
width: 100%;
padding: var(--wp--preset--spacing--40) 0;
margin: 0;
border: 0;
background: none;
color: var(--wp--preset--color--contrast);
font: inherit;
font-weight: 700;
line-height: 1.35;
text-align: start;
cursor: pointer;
}
.fbc-faq__pytanie:focus-visible { outline: 2px solid var(--wp--preset--color--purr); outline-offset: 4px; }
.fbc-faq__pytanie .fbc-nr {
font-family: var(--wp--preset--font-family--mono);
font-size: var(--wp--preset--font-size--small);
font-weight: 400; /* jak w atutach — jedna typografia list rozwijanych */
color: var(--wp--preset--color--purr);
}
.fbc-faq__znak {
position: relative;
align-self: center;
width: 14px;
height: 14px;
justify-self: end;
}
.fbc-faq__znak::before,
.fbc-faq__znak::after {
content: "";
position: absolute;
left: 0;
top: 6px;
width: 14px;
height: 2px;
background: var(--wp--preset--color--contrast);
transition: transform 300ms cubic-bezier(.2,.7,.2,1);
}
.fbc-faq__znak::after { transform: rotate(90deg); }
.fbc-faq__el.is-active .fbc-faq__znak::before { transform: rotate(45deg); }
.fbc-faq__el.is-active .fbc-faq__znak::after { transform: rotate(-45deg); }
/* Rozwinięcie jak w atutach (8b, układ pionowy): wiersz siatki 0fr → 1fr,
wysokość z treści, płynne przejście w obie strony. */
.fbc-faq__odpowiedz {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 420ms cubic-bezier(.2,.7,.2,1);
}
.fbc-faq__odpowiedz p {
min-height: 0;
overflow: hidden;
margin: 0;
padding: 0 calc(1.5rem + var(--fbc-faq-gap)) 0 calc(var(--fbc-faq-nr) + var(--fbc-faq-gap));
max-width: none;
line-height: 1.55;
color: var(--wp--preset--color--contrast-2);
box-sizing: border-box;
}
.fbc-faq__el.is-active .fbc-faq__odpowiedz { grid-template-rows: 1fr; }
.fbc-faq__el.is-active .fbc-faq__odpowiedz p { padding-block-end: var(--wp--preset--spacing--50); }
@media (prefers-reduced-motion: reduce) {
.fbc-faq__odpowiedz, .fbc-faq__znak::before, .fbc-faq__znak::after { transition: none; }
}
@media (max-width: 899.98px) {
.fbc-purros,
.fbc-faq { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--60); }
.wp-site-blocks main > .alignfull.fbc-purros-sekcja { min-height: 0; }
.fbc-purros { min-height: 0; grid-template-columns: 1fr; }
.fbc-purros-sekcja::before { left: 50%; }
.fbc-purros__tekst { padding-inline: var(--fbc-gutter); max-width: none; }
/* W układzie pionowym kolumna jest szeroka i nic nie stoi obok listy, więc
opis bierze wysokość z treści — stała rezerwa zostawiałaby tu puste wiersze. */
.fbc-purros__punkty li > span:last-of-type > i { height: auto; }
.fbc-purros__punkty li.is-active > span:last-of-type > i { max-height: 20em; }
.fbc-purros__stos { order: -1; align-self: auto; min-height: 0; aspect-ratio: 4 / 3; overflow: clip; }
.fbc-purros__scena { transform: translateY(-46%); transform-origin: 0 50%; }
.fbc-wsparcie-karty { grid-template-columns: 1fr; }
.fbc-faq__naglowek { position: static; }
.fbc-faq__odpowiedz p { padding-inline-end: var(--wp--preset--spacing--40); }
}
@media (max-width: 599.98px) {
.fbc-purros__punkty li { grid-template-columns: 2rem minmax(0, 1fr) 1.5rem; }
.fbc-faq, .fbc-punkty { --fbc-faq-nr: 2rem; }
}
/* --------------------------------------------------------------------------
8g. Recenzje wideo — ciemna sekcja z rotacją (wzorzec home-recenzje)
Tło „jak zawsze": poświata w prawym górnym rogu (warstwa `.fbc-poswiata`
z 8b, za kadrem), ziarno (`.fbc-ziarno`) i siatka techniczna z hero
(sekcja 14) pod kolumną tekstu po lewej — `::after` sekcji z maską.
Jeden kadr i tytuł naraz; przełączanie jak w opiniach (8c): pasek
postępu `--fbc-recenzje-czas`, strzałki, licznik, tytuł słowo po słowie,
kadr przez wygaszenie (`--znika`). Skrypt: assets/js/recenzje.js.
-------------------------------------------------------------------------- */
.fbc-recenzja-sekcja {
--fbc-siatka-modul: var(--wp--preset--spacing--80);
--fbc-siatka-linia: rgba(255, 255, 255, 0.045);
overflow: hidden;
}
.fbc-recenzja-sekcja::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background-image:
repeating-linear-gradient(to right, var(--fbc-siatka-linia) 0 1px, transparent 1px var(--fbc-siatka-modul)),
repeating-linear-gradient(to bottom, var(--fbc-siatka-linia) 0 1px, transparent 1px var(--fbc-siatka-modul));
-webkit-mask-image: radial-gradient(42% 60% at 76% 45%, #000 0%, rgba(0, 0, 0, 0.5) 50%, transparent 80%);
mask-image: radial-gradient(42% 60% at 76% 45%, #000 0%, rgba(0, 0, 0, 0.5) 50%, transparent 80%);
}
/* Trzy ostatnie sekcje nad stopką (recenzje, FAQ, CTA) dzielą jedną siatkę:
te same proporcje kolumn i ten sam odstęp — klient: „każda ma różne
szerokości kolumn i to brzydko wygląda". Zmiana tylko tutaj. */
:root { --fbc-dwie-kolumny: minmax(0, 0.8fr) minmax(0, 1.2fr); --fbc-dwie-kolumny-gap: clamp(2.5rem, 6vw, 5rem); }
.fbc-recenzja { --fbc-recenzje-czas: 7s; position: relative; z-index: 1; }
.fbc-recenzja__uklad {
display: grid;
grid-template-columns: var(--fbc-dwie-kolumny);
gap: var(--fbc-dwie-kolumny-gap);
align-items: center;
transition: opacity 320ms ease;
}
.fbc-recenzja--znika .fbc-recenzja__uklad { opacity: 0; }
.fbc-recenzja__tekst h2 { max-width: 16ch; text-wrap: balance; }
.fbc-recenzja__lead {
margin-block-start: var(--wp--preset--spacing--40);
max-width: 44ch;
color: var(--wp--preset--color--contrast-3);
}
.fbc-recenzja__tekst .fbc-link-dalej { margin-block-start: var(--wp--preset--spacing--50); color: var(--wp--preset--color--purr-light); }
.fbc-recenzja__wideo {
--fbc-sciecie: 22px;
position: relative;
display: block;
aspect-ratio: 16 / 9;
background: var(--wp--preset--color--ground-dark);
border: 1px solid var(--wp--preset--color--line-dark);
box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7);
}
.fbc-recenzja__wideo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
display: block;
filter: saturate(0.85);
transition: transform 900ms cubic-bezier(.2,.7,.2,1), filter 400ms ease;
}
.fbc-recenzja__play {
/* Prawy dolny róg kadru, ścięte narożniki jak w przyciskach (klient). */
--fbc-sciecie: 10px;
position: absolute;
right: var(--wp--preset--spacing--30);
bottom: var(--wp--preset--spacing--30);
display: grid;
place-items: center;
width: 56px;
height: 56px;
background: var(--wp--preset--color--purr);
color: var(--wp--preset--color--base);
box-shadow: 0 10px 30px rgba(118, 0, 112, 0.45);
clip-path: polygon(var(--fbc-sciecie) 0, 100% 0, 100% calc(100% - var(--fbc-sciecie)), calc(100% - var(--fbc-sciecie)) 100%, 0 100%, 0 var(--fbc-sciecie));
transition: transform 250ms ease, background-color 250ms ease;
}
@supports (corner-shape: bevel) {
.fbc-recenzja__play { clip-path: none; corner-shape: bevel; border-radius: var(--fbc-sciecie) 0 var(--fbc-sciecie) 0; }
}
.fbc-recenzja__play svg { margin-inline-start: 3px; }
.fbc-recenzja__czas {
position: absolute;
left: var(--wp--preset--spacing--30); /* lewy dolny róg (klient), play w prawym */
bottom: var(--wp--preset--spacing--30);
padding: 2px var(--wp--preset--spacing--20);
font-family: var(--wp--preset--font-family--mono);
font-size: 0.72rem;
letter-spacing: 0.06em;
color: var(--wp--preset--color--base);
background: rgba(19, 19, 21, 0.75);
border-radius: 2px;
}
@media (hover: hover) {
.fbc-recenzja__wideo:hover img { transform: scale(1.03); filter: saturate(1); }
.fbc-recenzja__wideo:hover .fbc-recenzja__play { transform: scale(1.06); background: var(--wp--preset--color--purr-hover); }
}
/* Pasek postępu — kolory ciemne z 8c; własny zegar, najazd wstrzymuje. */
/* Odliczanie przeniesione na kafle kanałów (klient 2026-09-18: „progressbar
niech będzie per kanał, bo za dużo linii na raz i się dublują"), więc długa
kreska z wypełnieniem znika. Element zostaje: trzyma strzałki i licznik,
które są pozycjonowane względem niego. */
.fbc-recenzja .fbc-postep { margin-block-start: var(--wp--preset--spacing--80); background: transparent; }
.fbc-recenzja .fbc-postep__wypelnienie { display: none; }
/* Pasek kanałów (klient 2026-09-18: „ustaw tytuły kanałów jako przyciski do
przełączania slajdów"). Ta sama minimalistyczna forma co zakładki rodziny
w hero: kreska nad nazwą, aktywna na fioletowo i w bieli, żadnych ramek
ani wypełnień. Kolumny dobierają się same — dopisanie recenzji zostaje
jednym wierszem w wzorcu. */
/* Liczba kolumn wprost z liczby recenzji (`--fbc-kanaly` podaje wzorzec),
nie przez `auto-fit`: przy siedmiu nazwach siatka wyliczała OSIEM kolumn,
ósma zwijała się do zera, ale jej odstęp zostawał i pasek kończył się 18 px
przed prawą krawędzią. Flex z kolei rozciągał ostatni, niepełny wiersz na
całą szerokość. Poniżej 1200 px kolumny są cztery, a na telefonie dwie —
siedmiu nazw nie da się czytelnie zmieścić w jednym wierszu. */
.fbc-recenzja__kanaly {
display: grid;
grid-template-columns: repeat(var(--fbc-kanaly, 4), minmax(0, 1fr));
gap: 18px;
margin-block-start: var(--wp--preset--spacing--60);
}
@media (max-width: 1199.98px) {
.fbc-recenzja__kanaly { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.fbc-recenzja__kanal-kafel {
position: relative;
padding: 12px 0 0;
text-align: start;
cursor: pointer;
background: none;
border: 0;
border-block-start: 1px solid var(--wp--preset--color--line-dark);
font-size: 0.78rem;
font-weight: 600;
line-height: 1.25;
color: var(--wp--preset--color--contrast-3);
transition: border-color 200ms ease, color 200ms ease;
}
@media (hover: hover) {
.fbc-recenzja__kanal-kafel:hover { border-block-start-color: var(--wp--preset--color--purr-light); color: var(--wp--preset--color--base); }
}
.fbc-recenzja__kanal-kafel.is-aktywny {
border-block-start-color: var(--wp--preset--color--purr);
color: var(--wp--preset--color--base);
}
.fbc-recenzja__kanal-kafel:focus-visible { outline: 2px solid var(--wp--preset--color--purr-light); outline-offset: 4px; }
/* Pasek postępu rysowany po kresce nad aktywnym kanałem — ta sama mechanika
co w zakładkach hero (`fbc-kafel-postep`). W czasie odliczania kreska
aktywnej pozycji wraca do koloru nieaktywnych, a nad nią narasta fioletowa;
dwie fioletowe linie jedna na drugiej nic by nie pokazały. Skrypt czeka na
`animationend` tej warstwy i wchodzi kolejną recenzją. */
.fbc-recenzja__kanal-kafel::after {
content: "";
position: absolute;
inset-block-start: -1px;
inset-inline-start: 0;
width: 100%;
height: 2px;
background: var(--wp--preset--color--purr);
transform: scaleX(0);
transform-origin: left center;
pointer-events: none;
}
.fbc-recenzja__kanal-kafel.is-odliczanie { border-block-start-color: var(--wp--preset--color--line-dark); }
.fbc-recenzja__kanal-kafel.is-odliczanie::after {
animation: fbc-kafel-postep var(--fbc-recenzje-czas) linear forwards;
}
@media (prefers-reduced-motion: reduce) {
.fbc-recenzja__kanal-kafel.is-odliczanie::after { animation: none; }
.fbc-recenzja__kanal-kafel.is-odliczanie { border-block-start-color: var(--wp--preset--color--purr); }
}
@media (max-width: 599.98px) {
.fbc-recenzja__kanaly { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fbc-recenzja__kanal-kafel { font-size: 0.72rem; }
}
.fbc-recenzja .fbc-postep__wypelnienie--biegnie { animation: fbc-postep var(--fbc-recenzje-czas) linear forwards; }
@media (max-width: 899.98px) {
.fbc-recenzja__uklad { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--60); }
.fbc-recenzja__wideo { --fbc-sciecie: 16px; }
/* Na telefonie tekst jest u góry — siatka trzyma się górnego pasa. */
.fbc-recenzja-sekcja::after {
-webkit-mask-image: radial-gradient(120% 30% at 30% 18%, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 78%);
mask-image: radial-gradient(120% 30% at 30% 18%, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 78%);
}
}
/* --------------------------------------------------------------------------
8h. Zamknięcie — „Ready to feel it?" z kolumną newslettera
Dwie kolumny: tekst i przyciski po lewej, po prawej karta newslettera ze
ściętymi rogami na Ground dark (jak baner akcesoriów). Formularz: pole
e-mail i przycisk w jednym pasku; komunikat pod spodem (JS albo parametr
`?newsletter=` po powrocie z admin-post). Zaplecze: inc/newsletter.php.
-------------------------------------------------------------------------- */
/* Tło sekcji „jak zawsze" (klient: „podłóż nasze tło"): siatka techniczna
pod tekstem po lewej, poświata i ziarno z warstw 8b. */
.fbc-cta {
--fbc-siatka-modul: var(--wp--preset--spacing--80);
--fbc-siatka-linia: rgba(255, 255, 255, 0.045);
overflow: hidden;
}
.fbc-cta::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background-image:
repeating-linear-gradient(to right, var(--fbc-siatka-linia) 0 1px, transparent 1px var(--fbc-siatka-modul)),
repeating-linear-gradient(to bottom, var(--fbc-siatka-linia) 0 1px, transparent 1px var(--fbc-siatka-modul));
-webkit-mask-image: radial-gradient(42% 60% at 22% 50%, #000 0%, rgba(0, 0, 0, 0.5) 50%, transparent 80%);
mask-image: radial-gradient(42% 60% at 22% 50%, #000 0%, rgba(0, 0, 0, 0.5) 50%, transparent 80%);
}
.fbc-cta__uklad {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: var(--fbc-dwie-kolumny);
gap: var(--fbc-dwie-kolumny-gap);
align-items: center;
}
.fbc-cta__lead { margin-block-start: var(--wp--preset--spacing--50); max-width: 40ch; color: var(--wp--preset--color--contrast-3); }
.fbc-cta__przyciski { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--30); margin-block-start: var(--wp--preset--spacing--60); }
.fbc-newsletter {
--fbc-sciecie: 22px;
--fbc-ghost-linia: rgba(255, 255, 255, 0.85);
--fbc-ghost-plomba: transparent;
--fbc-ghost-tekst: rgba(255, 255, 255, 0.85);
padding: var(--wp--preset--spacing--60);
background: var(--wp--preset--color--ground-dark); /* klient przywrócił ciemne tło (2026-09-05, po próbie przezroczystego) */
border: 1px solid var(--wp--preset--color--line-dark);
}
.fbc-newsletter h3 { margin: 0; text-wrap: balance; }
.fbc-newsletter__opis { margin-block-start: var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--contrast-3); max-width: 40ch; }
.fbc-newsletter__form { margin-block-start: var(--wp--preset--spacing--50); }
.fbc-newsletter__pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fbc-newsletter__pole {
display: flex;
gap: var(--wp--preset--spacing--20);
}
.fbc-newsletter__pole input {
flex: 1;
min-width: 0;
padding: 0 var(--wp--preset--spacing--40);
box-sizing: border-box;
height: 51px; /* = wysokość przycisku obok */
font: inherit;
color: var(--wp--preset--color--base);
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--wp--preset--color--line-dark);
border-radius: 2px;
transition: border-color 200ms ease;
}
.fbc-newsletter__pole input::placeholder { color: var(--wp--preset--color--contrast-3); }
.fbc-newsletter__pole input:focus { outline: 0; border-color: var(--wp--preset--color--purr-light); }
.fbc-newsletter__pole .wp-block-button__link { background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); } /* rozmiar z komponentu (sekcja 18) */
.fbc-newsletter__form.is-wysyla .wp-block-button__link { opacity: 0.6; }
.fbc-newsletter__komunikat {
margin-block-start: var(--wp--preset--spacing--30);
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--base);
padding-inline-start: var(--wp--preset--spacing--30);
border-inline-start: 2px solid var(--wp--preset--color--purr-light);
}
.fbc-newsletter__komunikat.is-err { border-inline-start-color: #e0554f; }
.fbc-newsletter__zgoda { margin-block-start: var(--wp--preset--spacing--40); font-size: 0.72rem; line-height: 1.5; color: var(--wp--preset--color--contrast-3); }
.fbc-newsletter__zgoda a { color: var(--wp--preset--color--contrast-3); text-decoration: underline; text-underline-offset: 0.18em; }
@media (max-width: 899.98px) {
.fbc-cta__uklad { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--70); }
.fbc-newsletter { --fbc-sciecie: 16px; padding: var(--wp--preset--spacing--50); }
}
@media (max-width: 479.98px) {
.fbc-newsletter__pole { flex-direction: column; }
/* `flex: 1` w kolumnie to podstawa 0 — pole kurczyło się do 23 px. */
.fbc-newsletter__pole input { flex: none; }
.fbc-newsletter__pole .wp-block-button__link { width: 100%; }
}
/* --------------------------------------------------------------------------
9. Rytm pionowy sekcji
theme.json deklaruje padding w atrybutach wzorców, ale przy alignfull
i useRootPaddingAwareAlignments WordPress nie renderuje go jako inline style.
Ustawiamy go tutaj — pewniej i w jednym miejscu.
-------------------------------------------------------------------------- */
/* Jedna miara oddechu między sekcjami. Element w środku sekcji, który ma stać od
treści tak daleko, jak treść stoi od krawędzi sekcji (na przykład pas malowany
na pełną szerokość), sięga po ten token — nie po przybliżenie ze skali odstępów.
`spacing--80` (64 px) i `spacing--90` (96 px) są stałe, a rytm skaluje się
z szerokością okna, więc równość trzymałaby się tylko przy jednej szerokości. */
:root { --fbc-rytm: clamp(3.5rem, 7vw, 6rem); }
.wp-site-blocks main > .wp-block-group,
.wp-site-blocks main > .alignfull {
padding-block: var(--fbc-rytm);
}
/* Hero dostaje więcej powietrza — to pierwsze, co widać. */
.fbc-hero {
padding-block: clamp(4.5rem, 9vw, 8rem);
}
/* Rytm stopki siedzi w sekcji 25, razem z resztą jej stylów. */
/* Sąsiadujące sekcje w tym samym trybie nie dublują odstępu na styku.
Zerujemy też odstęp blokowy: rdzeń daje każdej sekcji `margin-block-start:
24px`, a między dwiema ciemnymi sekcjami ten margines pokazuje BIAŁE tło
strony — wąski pasek w poprzek ekranu. Było go nie widać, dopóki między
recenzjami a CTA stało jasne FAQ (klient 2026-09-18: „pod recenzjami
i przed sekcją CTA jest jakaś biała przerwa"). Padding zostaje jak był,
bo obie sekcje podają go atrybutem bloku (styl inline) — na styku daje
96 + 96 px ciemnego oddechu zamiast 96 + 24 białego + 96. */
.is-style-sekcja-ciemna + .is-style-sekcja-ciemna {
padding-block-start: 0;
margin-block-start: 0;
}
/* --------------------------------------------------------------------------
10. Zabezpieczenie przed rozpychaniem strony
Treść przeniesiona z Divi zawiera własny HTML z klasami .gthome, .bg,
.glow, .scrim — szeroki na 1440 px i wychodzący poza viewport.
Do czasu przepisania treści w Fazie 4 trzymamy go w ryzach.
-------------------------------------------------------------------------- */
/* `clip`, nie `hidden`: `hidden` na html/body robi z body kontener
przewijania i `position: sticky` w środku przestaje działać (zdjęcie
w scrollytellingu zjeżdżało razem z treścią). `clip` tnie tak samo,
ale nie tworzy kontenera przewijania. */
html, body { max-width: 100%; overflow-x: clip; }
/* Miejsce na pasek przewijania rezerwowane tam, gdzie istnieje menu
pełnoekranowe. Nakładka blokuje przewijanie (`html.has-modal-open
{ overflow: hidden }`), a tam gdzie pasek jest klasyczny — Chrome na
Windowsie — znika wtedy z układu i wszystko przy prawej krawędzi
przeskakuje w bok: hamburger stoi w jednym miejscu, krzyżyk pojawia się obok.
Reguła CELOWO nie jest globalna. Rezerwacja zabiera 15 px szerokości, a gdy
pasek jest nakładkowy (albo strona akurat się nie przewija), w tym pasie
prześwituje tło `body` — biały słupek wzdłuż prawej krawędzi ciemnego hero.
Powyżej 600 px hamburgera nie ma, więc nie ma czego kompensować. */
@media (max-width: 599.98px) {
html {
scrollbar-gutter: stable;
}
}
.wp-block-post-content { max-width: 100%; overflow-x: clip; }
.wp-block-post-content .gthome,
.wp-block-post-content .bg,
.wp-block-post-content .glow,
.wp-block-post-content .scrim,
.wp-block-post-content .in {
max-width: 100% !important;
width: auto !important;
left: auto !important;
right: auto !important;
transform: none !important;
}
/* --------------------------------------------------------------------------
11. Hero — układ dwukolumnowy
Dopóki kadr produktu nie jest wstawiony, pusta kolumna wygląda jak błąd.
Kolumna bez treści zapada się zamiast zostawiać dziurę.
-------------------------------------------------------------------------- */
.fbc-hero .wp-block-column:empty,
.fbc-hero .wp-block-column:has(> figure.wp-block-image img[src=""]) {
display: none;
}
/* Pasek danych wyrównany do lewej krawędzi treści, nie rozstrzelony. */
.fbc-hero .wp-block-group.is-layout-flex {
gap: clamp(2rem, 5vw, 4rem);
justify-content: flex-start;
border-block-start: 1px solid var(--wp--preset--color--line-dark);
padding-block-start: var(--wp--preset--spacing--50);
margin-block-start: var(--wp--preset--spacing--70);
}
/* Nagłówki sekcji do lewej — wyśrodkowanie łamie rytm strony. */
.wp-site-blocks main .wp-block-heading { text-align: left; }
/* Pasek danych pod hero — równa siatka, nie rozstrzelony flex. */
.fbc-stats {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: var(--wp--preset--spacing--50);
border-block-start: 1px solid var(--wp--preset--color--line-dark);
padding-block-start: var(--wp--preset--spacing--50);
}
/* Nagłówek: logo nie może stykać się z nawigacją. */
.fbc-header .wp-block-site-logo { margin-inline-end: var(--wp--preset--spacing--60); }
.fbc-header .wp-block-navigation { gap: var(--wp--preset--spacing--40); }
/* Odstępy sekcji na stronie produktu — main jest tam grupą, nie kontenerem. */
main.wp-block-group > .wp-block-group,
main.wp-block-group > .alignfull {
padding-block: clamp(3.5rem, 7vw, 6rem);
}
/* Render w hero wypełnia kolumnę — kadr jest przycięty do produktu. */
.fbc-hero .wp-block-image { margin: 0; }
.fbc-hero .wp-block-image img {
width: 100%;
height: auto;
max-width: none;
}
/* --------------------------------------------------------------------------
11a. Hero — film zamiast renderu
Reel 9:16 bez wycinania tła. Od 782 px kadr wychodzi z kolumny i przykleja
się do górnej, dolnej i prawej krawędzi hero (50% szerokości); lewą krawędź
wygasza maska w poświatę, więc niebiesko-fioletowe tło reela znika w tle
sekcji. Kolumna tekstu dostaje z-index, żeby strefa przejścia nie kładła
się na nagłówku. Poniżej 782 px hero jest pionowe (tekst → film → liczby),
więc film zostaje w przepływie, na całą szerokość okna, w kadrze 4:5
z wygaszoną górą. Przy ograniczonym ruchu zostaje sama klatka.
-------------------------------------------------------------------------- */
.fbc-hero__film { margin: 0; }
.fbc-hero__film-kadr {
position: relative;
/* Bez przycinania (klient 2026-09-18: „rays mają odcięcie z lewej").
Promienie wychodzą poza kadr i to właśnie krawędź kadru cięła je pionową
linią. Wycinki produktu przycina `.fbc-hero__scena`, która ma własne
`overflow: hidden`, więc przy zmianie slajdu nic nie wyjeżdża poza kadr. */
overflow: visible;
}
.fbc-hero__wideo,
.fbc-hero__tlo,
.fbc-hero__pedaly,
.fbc-hero__wideo-poster {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 50% 50%;
display: block;
}
.fbc-hero__wideo-poster { display: none; }
/* Poświata w kadrze (klient 2026-09-18: „fioletowa poświata za pedałami, ale
nad tłem i bardziej z prawej"). Poświata sekcji (`.fbc-hero::before`) leży
pod wszystkim, więc od czasu, gdy tło kadru jest nieprzezroczystym zdjęciem,
w ogóle jej tam nie widać. Ta warstwa stoi między tłem a produktem i świeci
po prawej stronie kadru, tam gdzie kończy się cokół. `screen` rozjaśnia
szarość tła zamiast kłaść na niej płaską plamę. */
.fbc-hero__blask {
position: absolute;
/* Zapas poza kadrem: snopy wychodzą spoza prawego górnego rogu, a rozmycie
rozmywa też krawędzie warstwy. */
inset: -30%;
pointer-events: none;
mix-blend-mode: screen;
/* Miękka poświata, z której wychodzą snopy. Zostaje na rodzicu, tak samo jak
maska — rodzic stoi w miejscu, rusza się dopiero warstwa ze snopami. */
background-image: radial-gradient(42% 38% at 74% 22%, rgba(118, 0, 112, 0.5) 0%, rgba(118, 0, 112, 0.2) 45%, transparent 76%);
-webkit-mask-image: radial-gradient(86% 88% at 82% -4%, #000 0%, rgba(0, 0, 0, 0.78) 40%, rgba(0, 0, 0, 0.3) 66%, transparent 88%);
mask-image: radial-gradient(86% 88% at 82% -4%, #000 0%, rgba(0, 0, 0, 0.78) 40%, rgba(0, 0, 0, 0.3) 66%, transparent 88%);
filter: blur(4px);
}
/* Same snopy: powtarzany gradient liniowy pod kątem. Szerokość snopa podana
w pikselach (ok. 84 px światła, 164 px przerwy), każdy z miękkimi brzegami —
ostra krawędź zmiękczana globalnym rozmyciem dawała przy szerokich pasach
jednolitą łunę zamiast snopów. */
.fbc-hero__blask::before {
content: "";
position: absolute;
inset: -20%;
background-image:
repeating-linear-gradient(
104deg,
rgba(118, 0, 112, 0) 0px,
rgba(150, 0, 140, 0.16) 24px,
rgba(196, 0, 184, 0.5) 66px,
rgba(196, 0, 184, 0.5) 108px,
rgba(150, 0, 140, 0.16) 150px,
rgba(118, 0, 112, 0) 174px,
rgba(118, 0, 112, 0) 248px
);
/* Przesunięcie o DOKŁADNIE jeden okres wzdłuż osi gradientu, więc pętla wraca
w to samo miejsce i nawrotu nie widać (klient 2026-09-18: „czy te raysy mogą
się trochę animować?"). Do tego wolny oddech krycia, żeby światło pulsowało,
a nie tylko jechało. Maska i poświata zostają na rodzicu — gdyby jechały
razem ze snopami, wędrowałaby cała plama światła, a przy nawrocie pętli
byłoby widać skok. */
animation:
fbc-rays-przesuw 26s linear infinite,
fbc-rays-oddech 11s ease-in-out infinite alternate;
will-change: transform, opacity;
}
@keyframes fbc-rays-przesuw {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(240.6px, 60.0px, 0); }
}
@keyframes fbc-rays-oddech {
from { opacity: 0.72; }
to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.fbc-hero__blask::before { animation: none; }
}
/* Scena i produkt to dwie warstwy jednego kadru: tło z pustą halą stoi
nieruchomo, a wycinki pedałów wjeżdżają i wyjeżdżają razem ze slajdem
(assets/js/hero-slajdy.js). Wszystkie wycinki leżą na sobie w tym samym
miejscu, więc produkt nie drgnie przy zmianie — zmienia się tylko to, który
jest widoczny. */
.fbc-hero__scena {
position: absolute;
inset: 0;
overflow: hidden;
}
.fbc-hero__pedaly {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 50% 50%;
display: block;
opacity: 0;
/* Skąd wjechać albo dokąd wyjechać — skrypt ustawia znak przed każdą
zmianą, żeby kierunek zgadzał się z tym, w którą stronę idziemy. */
transform: translate3d(var(--fbc-hero-x, 55%), 0, 0) scale(0.96);
transition: transform 520ms cubic-bezier(.22, .68, .28, 1), opacity 380ms ease;
will-change: transform, opacity;
pointer-events: none;
}
.fbc-hero__pedaly.is-aktywny {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
/* Ustawienie pozycji startowej bez animacji — patrz komentarz w skrypcie. */
.fbc-hero__pedaly.is-bez-ruchu { transition: none; }
@media (prefers-reduced-motion: reduce) {
.fbc-hero__pedaly { transition: opacity 200ms ease; transform: none; }
.fbc-hero__pedaly.is-aktywny { transform: none; }
}
/* Wybór rodziny pod tekstem: pasek zakładek na całą szerokość kolumny, bez
ramek i wypełnień (klient 2026-09-16: „bardziej minimalistyczne"). Aktywną
pozycję znaczy kreska nad nią i jaśniejszy napis — tyle wystarczy, bo kadr
obok i tak mówi, na czym stoimy. Stoją w miejscu dawnego pasa z liczbami,
więc trzymają ten sam odstęp od przycisków. */
.fbc-hero__wybor {
display: grid;
/* Liczba pozycji z wzorca — produkt schowany w katalogu wypada z hero,
a pozostałe dzielą szerokość (2026-09-26: RALLY ukryty). */
grid-template-columns: repeat(var(--fbc-hero-pozycje, 3), minmax(0, 1fr));
gap: 18px;
width: 100%;
/* Dalej od przycisków niż daje skala (64 px), bo to osobne piętro hero,
a nie ciąg dalszy akcji (klient 2026-09-16). */
margin-block-start: clamp(var(--wp--preset--spacing--80), 9vh, var(--wp--preset--spacing--90));
}
.fbc-hero__kafel {
position: relative;
display: flex;
flex-direction: column;
gap: 3px;
padding: 12px 0 0;
text-align: start;
cursor: pointer;
background: none;
border: 0;
border-block-start: 1px solid var(--wp--preset--color--line-dark);
transition: border-color 200ms ease, color 200ms ease;
}
.fbc-hero__kafel-nazwa {
font-size: 0.78rem;
font-weight: 600;
line-height: 1.25;
color: var(--wp--preset--color--contrast-3);
transition: color 200ms ease;
}
.fbc-hero__kafel-stan {
font-family: var(--wp--preset--font-family--mono);
font-size: 0.6rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--wp--preset--color--contrast-3);
opacity: 0.7;
}
@media (hover: hover) {
.fbc-hero__kafel:hover { border-block-start-color: var(--wp--preset--color--purr-light); }
.fbc-hero__kafel:hover .fbc-hero__kafel-nazwa { color: var(--wp--preset--color--base); }
}
.fbc-hero__kafel.is-aktywny { border-block-start-color: var(--wp--preset--color--purr); }
.fbc-hero__kafel.is-aktywny .fbc-hero__kafel-nazwa { color: var(--wp--preset--color--base); }
.fbc-hero__kafel.is-aktywny .fbc-hero__kafel-stan { color: var(--wp--preset--color--purr-light); opacity: 1; }
.fbc-hero__kafel:focus-visible { outline: 2px solid var(--wp--preset--color--purr-light); outline-offset: 4px; }
/* Pasek postępu samego przewijania rysowany po kresce nad aktywną pozycją
(klient 2026-09-16). Kreska aktywnej pozycji wraca wtedy do koloru
nieaktywnych, a nad nią narasta fioletowa — inaczej dwie fioletowe linie
jedna na drugiej nic by nie pokazały. Najazd na pasek zatrzymuje zegar,
więc zatrzymuje też ten rysunek: `animation-play-state`, nie znikanie,
żeby było widać, ile czasu zostało. */
.fbc-hero__kafel::after {
content: "";
position: absolute;
inset-block-start: -1px;
inset-inline-start: 0;
width: 100%;
height: 2px;
background: var(--wp--preset--color--purr);
transform: scaleX(0);
transform-origin: left center;
pointer-events: none;
}
.fbc-hero__kafel.is-odliczanie { border-block-start-color: var(--wp--preset--color--line-dark); }
.fbc-hero__kafel.is-odliczanie::after {
animation: fbc-kafel-postep var(--fbc-kafel-czas, 6000ms) linear forwards;
}
.fbc-hero__wybor.is-pauza .fbc-hero__kafel::after { animation-play-state: paused; }
@keyframes fbc-kafel-postep {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
.fbc-hero__kafel.is-odliczanie::after { animation: none; }
.fbc-hero__kafel.is-odliczanie { border-block-start-color: var(--wp--preset--color--purr); }
}
/* Treść kolumny gaśnie na moment przy zmianie slajdu, żeby nie było widać,
jak nagłówek przeskakuje między długościami. Skrypt podmienia ją w połowie. */
.fbc-hero__tresc { transition: opacity 170ms ease; }
.fbc-hero__tresc.is-zmiana { opacity: 0.25; }
.fbc-hero__tresc.is-zmiana h1 { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.fbc-hero__tresc { transition: none; }
.fbc-hero__tresc.is-zmiana { opacity: 1; }
}
@media (max-width: 599.98px) {
.fbc-hero__wybor { gap: 0 14px; }
.fbc-hero__kafel-nazwa { font-size: 0.7rem; }
.fbc-hero__kafel-stan { font-size: 0.54rem; }
}
@media (prefers-reduced-motion: reduce) {
.fbc-hero__wideo { display: none; }
.fbc-hero__wideo-poster { display: block; }
}
/* Ruch nad zdjęciem w hero (klient 2026-09-16). Dym odpadł — rozjaśniał tło
za pedałem i zbierał mu kontrast, a to jedyny produkt na pierwszym ekranie.
W zamian pyłki w powietrzu: kilkanaście kropek w tle, każda z własnym
tempem, unoszą się i gasną. Kropki są małe i rzadkie, więc nic nie zasłaniają
— a kadr i tak ma już bokeh po prawej, do którego się dokładają.
Ruch wyłącznie przez `transform` i `opacity`. */
/* Pyłki zdjęte na życzenie klienta (2026-09-18, „na moment") — wracają przez
skasowanie tej jednej reguły; warstwa i jej style zostają nietknięte. */
.fbc-hero__pylki { display: none; }
.fbc-hero__pylki {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
opacity: var(--fbc-pylki-moc, 1);
/* Maska na produkt (klient 2026-09-16): nad pedałem pyłki nie znikają,
tylko przygasają do 30%, więc dalej przelatują przez cały kadr, a nie
sypią się po karbonie. Maska siedzi na rodzicu, który stoi w miejscu —
na warstwach z animacją jechałaby razem z nimi i przestałaby trzymać się
produktu. */
--fbc-iskra-b: radial-gradient(circle, #fff 0%, #fff 22%, rgba(255, 255, 255, 0.35) 42%, transparent 72%);
--fbc-iskra-f: radial-gradient(circle, #fff 0%, color-mix(in srgb, var(--wp--preset--color--purr) 65%, #fff) 26%, color-mix(in srgb, var(--wp--preset--color--purr) 80%, transparent) 48%, transparent 74%);
-webkit-mask-image: radial-gradient(46% 44% at 52% 52%, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 45%, #000 90%);
mask-image: radial-gradient(46% 44% at 52% 52%, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 45%, #000 90%);
}
.fbc-hero__pylki::before,
.fbc-hero__pylki::after {
content: "";
position: absolute;
inset: -10% -10% -30%;
background-repeat: no-repeat;
will-change: transform, opacity;
}
/* Bliższy plan: większe, wyraźniejsze kropki, rozrzucone po całym kadrze
(klient 2026-09-16: „są tylko z prawej"). Lewa krawędź i tak gaśnie w masce
hero, więc kropki tam bledną same z siebie. */
.fbc-hero__pylki::before {
background-image:
var(--fbc-iskra-b),
var(--fbc-iskra-f),
var(--fbc-iskra-b),
var(--fbc-iskra-b),
var(--fbc-iskra-f),
var(--fbc-iskra-b),
var(--fbc-iskra-b),
var(--fbc-iskra-f),
var(--fbc-iskra-b),
var(--fbc-iskra-b),
var(--fbc-iskra-f),
var(--fbc-iskra-b),
var(--fbc-iskra-b),
var(--fbc-iskra-f),
var(--fbc-iskra-b),
var(--fbc-iskra-b),
var(--fbc-iskra-f),
var(--fbc-iskra-b),
var(--fbc-iskra-b),
var(--fbc-iskra-f),
var(--fbc-iskra-b),
var(--fbc-iskra-b);
background-size: 5px 5px, 6px 6px, 4px 4px, 5px 5px, 7px 7px, 4px 4px, 6px 6px, 5px 5px, 4px 4px, 6px 6px, 5px 5px, 4px 4px, 6px 6px, 4px 4px, 5px 5px, 6px 6px, 4px 4px, 5px 5px, 6px 6px, 4px 4px, 5px 5px, 4px 4px;
background-position: 12% 58%, 24% 14%, 38% 38%, 47% 72%, 58% 24%, 63% 88%, 76% 36%, 88% 12%, 94% 52%, 31% 92%, 16% 36%, 29% 68%, 42% 22%, 54% 48%, 69% 14%, 71% 60%, 80% 86%, 85% 66%, 92% 78%, 20% 50%, 50% 90%, 36% 50%;
filter: blur(1px);
opacity: 0.95;
animation: fbc-pylki-a 26s linear infinite;
}
/* Dalszy plan: drobniejsze i wolniejsze, z lekkim rozmyciem. */
.fbc-hero__pylki::after {
background-image:
var(--fbc-iskra-b),
var(--fbc-iskra-f),
var(--fbc-iskra-b),
var(--fbc-iskra-b),
var(--fbc-iskra-f),
var(--fbc-iskra-b),
var(--fbc-iskra-f),
var(--fbc-iskra-b),
var(--fbc-iskra-b),
var(--fbc-iskra-f);
background-size: 5px 5px, 6px 6px, 4px 4px, 5px 5px, 7px 7px, 4px 4px, 6px 6px, 5px 5px, 4px 4px, 6px 6px;
background-position: 12% 58%, 24% 14%, 38% 38%, 47% 72%, 58% 24%, 63% 88%, 76% 36%, 88% 12%, 94% 52%, 31% 92%;
filter: blur(2px);
opacity: 0.65;
animation: fbc-pylki-b 41s linear infinite;
}
/* Jeden obieg to przesunięcie o wysokość pasa z kropkami, więc pętla wraca
w to samo miejsce i nie widać cięcia. Gaśnięcie na końcach chowa moment,
w którym kropki wskakują z powrotem na dół. */
@keyframes fbc-pylki-a {
0% { transform: translate3d(0, 12%, 0); opacity: 0; }
18% { opacity: 0.95; }
82% { opacity: 0.95; }
100% { transform: translate3d(-3%, -14%, 0); opacity: 0; }
}
@keyframes fbc-pylki-b {
0% { transform: translate3d(0, 14%, 0); opacity: 0; }
22% { opacity: 0.65; }
78% { opacity: 0.65; }
100% { transform: translate3d(4%, -16%, 0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.fbc-hero__pylki { display: none; }
}
@media (min-width: 782px) {
.fbc-hero { position: relative; }
.fbc-hero > .wp-block-columns > .wp-block-column:first-child { position: relative; z-index: 1; }
.fbc-hero figure.fbc-hero__film {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: auto;
width: 50%;
height: 100%;
margin: 0;
}
.fbc-hero .fbc-hero__film-kadr {
position: absolute;
inset: 0;
/* Bez maski od 2026-09-18: kadr nie ma już własnego tła (zdjęcie to sam
cokół na przezroczystości), więc nie ma czego wygaszać — a maska
ścinała przy okazji poświatę po lewej stronie kadru. */
}
}
@media (max-width: 781.98px) {
/* Telefon (klient 2026-09-18): kadr siada dołem na krawędzi sekcji, góra
sekcji prawie bez oddechu, a promieni nie ma wcale — na wąskim ekranie
ich pole wypadało nad tekstem, nie przy produkcie. */
/* Nagłówek leży NA hero (przyklejony, przezroczysty), więc „prawie zero"
liczymy od jego dolnej krawędzi: 72 px wysokości nagłówka i tyle.
Przy samym 12 px nadlinia wchodziła pod logo. */
.fbc-hero { padding-block-start: calc(72px + var(--wp--preset--spacing--20)) !important; padding-block-end: 0 !important; }
.fbc-hero__blask { display: none; }
.fbc-hero .fbc-hero__film { margin-block-end: 0; }
/* Przerwa nad kadrem (klient 2026-09-18) składała się z dwóch rzeczy:
odstępu między kolumnami (32 px) i własnego marginesu kolumny ze zdjęciem
(48 px). Zmierzone razem: 80 px pustego pasa między kaflami a produktem. */
/* `!important`, bo obie wartości mają bardziej szczegółowe selektory wyżej
w pliku: `.fbc-hero > .wp-block-columns.alignfull` (odstęp) i
`.fbc-hero > .wp-block-columns > .wp-block-column:last-child` (margines). */
.fbc-hero > .wp-block-columns.alignfull { row-gap: 0 !important; }
/* 60 px oddechu, nie zero (klient 2026-09-18: „przesadziliśmy z tą przerwą").
Cała przerwa jest teraz jawna w jednym miejscu — pusty pas ze zdjęcia
znika przez powiększenie sceny niżej, więc to, co widać, to dokładnie
ta wartość. */
.fbc-hero > .wp-block-columns > .wp-block-column:last-child { margin-block-start: 60px !important; }
/* Zdjęcia dosunięte dołem: cokół ma stać na krawędzi, a nie wisieć
w środku kadru. Do tego powiększenie od dołu — w pliku nad produktem
jest pusta scena (produkt zaczyna się na 14,6% wysokości) i to ona
robiła dziurę między kaflami a pedałami. Powiększamy SCENĘ, nie same
wycinki: te mają własny `transform` od przesuwania slajdów i skala
wchodziłaby z nim w konflikt. */
.fbc-hero .fbc-hero__film-kadr { overflow: hidden; }
.fbc-hero__tlo,
.fbc-hero__scena {
transform: scale(1.22);
transform-origin: 50% 100%;
}
.fbc-hero__tlo,
.fbc-hero__pedaly { object-position: 50% 100%; }
.fbc-hero .fbc-hero__film-kadr {
width: calc(100% + 2 * var(--fbc-gutter));
margin-inline: calc(-1 * var(--fbc-gutter));
/* Kadr niższy niż kwadrat zdjęcia, więc `cover` przycina PUSTĄ górę
sceny, a nie boki (klient 2026-09-18: nad pedałami zostawała dziura).
Produkt zaczyna się na 14,6% wysokości pliku — przy kwadracie widać
dolne 100% szerokości i tyle samo wysokości, czyli całą maszynę
z cokołem, bez pustego pasa nad nią. */
aspect-ratio: 1 / 1;
}
}
/* --------------------------------------------------------------------------
12. Nawigacja — mniejsza, cięższa, bez wersalików
Wersaliki brały się z nazw pozycji menu, nie z CSS — poprawione u źródła.
Tu zostaje typografia: mniejszy stopień i waga 500 zamiast domyślnej.
-------------------------------------------------------------------------- */
.fbc-header .wp-block-navigation {
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
}
.fbc-header .wp-block-navigation-item__label {
font-weight: 500;
text-transform: none;
}
/* Pozycja menu na najechanie: napis zjeżdża w dół i znika, a z góry wjeżdża jego
kopia (klient 2026-09-16). Dwie kopie jedna pod drugą wstawia assets/js/naglowek.js;
domyślnie widać dolną, więc ruch do zera przesuwa całość w dół. */
.fbc-rolka {
position: relative;
display: inline-block;
overflow: hidden;
vertical-align: bottom;
}
.fbc-rolka__tekst,
.fbc-rolka__kopia {
display: block;
white-space: nowrap;
transition: transform 380ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.fbc-rolka__kopia {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
transform: translateY(-100%);
}
.fbc-header a:hover .fbc-rolka__tekst,
.fbc-header a:focus-visible .fbc-rolka__tekst { transform: translateY(100%); }
.fbc-header a:hover .fbc-rolka__kopia,
.fbc-header a:focus-visible .fbc-rolka__kopia { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
.fbc-rolka__tekst,
.fbc-rolka__kopia { transition: none; }
}
/* Konto klienta to sama ikona — etykietę podmienia assets/js/naglowek.js
(klient 2026-09-16). Pole kliknięcia zostaje takie jak przy tekście. */
.fbc-header .fbc-konto .wp-block-navigation-item__label {
display: inline-flex;
align-items: center;
}
.fbc-header .fbc-konto svg {
display: block;
/* Kreska jak w koszyku obok — cieńsza ikona odstawała od reszty (klient 2026-09-16). */
stroke-width: 1.7;
width: 21px;
height: 21px;
}
/* Konto i koszyk stoją obok siebie na końcu paska, w jednej linii i blisko siebie,
a od pozycji tekstowych dzieli je wyraźny odstęp (klient 2026-09-16). */
.fbc-header .fbc-konto { margin-inline-start: var(--wp--preset--spacing--50); }
/* Bez menu tekstowego obok (hamburger poniżej 1200 px) odstęp przed profilem
nie ma czego oddzielać i tylko rozpychał ikony (klient 2026-09-26). */
@media (max-width: 1199.98px) { .fbc-header .fbc-konto { margin-inline-start: 0; } }
.fbc-header .wp-block-navigation,
.fbc-header > .wp-block-group { align-items: center; }
.fbc-header .wp-block-woocommerce-mini-cart { margin-inline-start: 0; }
.fbc-header .wc-block-mini-cart__button { padding: 0; display: flex; align-items: center; line-height: 0; }
/* Znaczek z liczbą sztuk jest wierszem tekstu, więc dokladał kilka pikseli pod
ikoną i koszyk siedział niżej niż konto (zmierzone: 3 px). */
.fbc-header .wc-block-mini-cart__quantity-badge { display: flex; align-items: center; line-height: 0; }
/* Konto siedzi w pozycji menu, koszyk w osobnym bloku obok — dwa różne pudełka
o różnej wysokości wiersza. Bez tego środki ikon różniły się o 3 px. */
.fbc-header .wp-block-navigation__container > li,
.fbc-header .wp-block-navigation__container > li > a { display: flex; align-items: center; }
.fbc-header .fbc-konto .wp-block-navigation-item__label { line-height: 0; }
/* Oba znaki w tym samym polu i na tej samej wysokości — ikona WooCommerce miała
32×32 i wypełnioną bryłę, przez co siedziała niżej i wyglądała grubiej. */
/* Jedno pudełko dla obu znaków: konto siedzi w pozycji menu, koszyk w przycisku
bloku, więc same `align-items` nie wystarczały — środki różniły się o 3 px,
bo licznik sztuk dokłada wiersz tekstu (klient 2026-09-18: „wciąż na różnym
poziomie"). Stała wysokość 24 px i wyśrodkowanie w niej zdejmują różnicę
niezależnie od tego, czy licznik jest widoczny. */
.fbc-header .fbc-konto,
.fbc-header .wc-block-mini-cart__button,
.fbc-header .wc-block-mini-cart__quantity-badge {
display: inline-flex;
align-items: center;
justify-content: center;
height: 24px;
line-height: 0;
}
.fbc-header .fbc-konto svg,
.fbc-header .fbc-koszyk-ikona {
display: block;
width: 21px;
height: 21px;
/* `!important`, bo zestaw reguł dla ciemnego hero ustawia `fill: currentColor`
na każdym SVG w nagłówku (specyficzność 0,4,2) i zalewał obrys — na stronie
głównej ikony wychodziły wypełnione (klient 2026-09-16). Atrybut `fill="none"`
z rysunku nie ma szans, bo CSS bije atrybuty prezentacyjne. */
fill: none !important;
}
/* Bez podnoszenia na najechanie (klient 2026-09-16) — zostaje sama zmiana koloru,
ta sama co przy pozycjach tekstowych. */
.fbc-header .wp-block-navigation a:hover .wp-block-navigation-item__label {
text-decoration: underline;
text-underline-offset: 4px;
}
/* --------------------------------------------------------------------------
13. Hero na pełną szerokość
Treść rozciąga się poza 1120 px, ale nie dotyka krawędzi — margines
boczny skaluje się z oknem.
-------------------------------------------------------------------------- */
.fbc-hero > .wp-block-columns.alignfull,
.fbc-hero > .fbc-stats.alignfull {
padding-inline: clamp(1.5rem, 5vw, 5rem);
max-width: 100%;
margin-inline: 0;
}
.fbc-hero > .wp-block-columns.alignfull {
gap: clamp(2rem, 5vw, 5rem);
}
/* Na szerokim ekranie kolumna tekstowa nie może się rozjechać
na całą szerokość — tekst przestaje być czytelny powyżej ~60 znaków.
Limity podane w `ch`, a nie w `rem`: rosną razem z krojem, więc gdy
typografia skaluje się z szerokością okna, blok tekstu rośnie z nią,
zamiast zatrzymać się i zostawić dziurę obok renderu. */
.fbc-hero__tresc > * { max-width: 44ch; }
/* Lead ma się łamać po zdaniu, a nie w przypadkowym miejscu. Naturalne
zawijanie robiło to dobrze tylko przypadkiem — przy szerokim oknie
„Designed" wskakiwało do pierwszej linii. Podział jest więc jawny,
ale włącza się dopiero tam, gdzie pierwsze zdanie mieści się w linii:
potrzebuje 495 px, a kolumna daje tyle od ok. 1300 px szerokości okna.
Niżej `br` znika i tekst zawija się naturalnie. */
.fbc-hero__tresc p br { display: none; }
@media (min-width: 1300px) {
.fbc-hero__tresc p br { display: inline; }
}
.fbc-hero__tresc > h1 { max-width: 20ch; }
/* Pasek liczb siedzi w kolumnie z tekstem, żeby nie zabierać wysokości
renderowi. `auto-fit` w węższym kontenerze układał go 3 + 1 i zostawiał
sierotę — wymuszamy cztery równe kolumny. Etykiety mogą się złamać
na dwie linie i to w porządku; pozycji ma być cztery obok siebie. */
.fbc-hero .wp-block-column:first-child > .fbc-stats {
max-width: none;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--wp--preset--spacing--40);
align-content: start;
}
/* Etykieta „at the pedal face" jest najdłuższa i przy 1440 px łamała się
na dwie linie, podbijając pasek z 85 na 106 px — a to wysokość odjęta
renderowi. Skala schodzi razem z szerokością kolumny. */
.fbc-hero .fbc-stat {
font-size: clamp(0.72rem, 0.58vw, 0.833rem);
}
/* Typografia hero skaluje się z szerokością okna. Bez tego na 2000 px+
nagłówek zostaje przy 3,5rem, kolumna tekstu przestaje rosnąć
i między nią a renderem otwiera się pusty pas. */
@media (min-width: 782px) {
/* !important, bo WordPress generuje klasy `has-*-font-size`
właśnie z !important — bez tego nagłówek zostawał na 3,5rem. */
/* Górne krańce `clamp()` ścięte (klient 2026-09-16: „tekst jest za duży",
po pierwszej korekcie „teraz za mały"). Nagłówek rósł do 5,5rem i na
szerokim ekranie zjadał kolumnę; teraz przestaje przy ~1850 px i zostaje
na 4,1rem, czyli o jedną czwartą niżej niż było. */
.fbc-hero h1 {
font-size: clamp(2.5rem, 3.55vw, 4.1rem) !important;
line-height: 1.05;
}
.fbc-hero__tresc > p:not(.fbc-eyebrow) {
font-size: clamp(1.05rem, 1.02vw, 1.25rem) !important;
}
.fbc-hero .fbc-eyebrow {
font-size: clamp(0.74rem, 0.58vw, 0.9rem);
}
}
.fbc-hero .fbc-stats > * { margin-block: 0; }
/* --------------------------------------------------------------------------
14. Poświata, ziarno i siatka w hero
Fiolet wraca tu jako powierzchnia, nie kolor tekstu — zgodnie z regułą
z docs/kierunek-artystyczny.md. Wypada po stronie renderu, więc daje mu
głębię, a nie dotyka kolumny z tekstem, gdzie obniżałby kontrast.
Świadomie oszczędny: przy kierunku Leica/Sennheiser gradient ma być
wyczuwalny, nie widowiskowy.
Trzy warstwy, dwa pseudoelementy — bo tyle jest dostępnych:
::before ziarno + obie poświaty (background-image się stackuje, pierwsza
warstwa jest na wierzchu). Ziarno MUSI leżeć nad gradientem,
nie pod nim: łamie pasmowanie, które ciemny fiolet robi
na 8-bitowych matrycach. Pod gradientem nie miałoby czego łamać.
::after siatka techniczna z maską.
Zero plików z zewnątrz — siatka to dwa gradienty, ziarno to feTurbulence
w data-URI (ok. 330 bajtów). Baseline strony to 1 646 KB przy celu <800 KB,
więc tło nie ma prawa dokładać wagi.
-------------------------------------------------------------------------- */
.fbc-hero {
position: relative;
isolation: isolate;
overflow: hidden;
/* Moduł siatki bierzemy ze skali odstępów, żeby nie był przypadkową
liczbą — spacing 80 to 64 px. */
--fbc-siatka-modul: var(--wp--preset--spacing--80);
--fbc-siatka-linia: rgba(255, 255, 255, 0.045);
}
/* Poświata sekcji zdjęta 2026-09-18 (klient: „jest jeszcze druga z lewej,
usuń ją"). Świeciła pod całym hero, więc po lewej kładła się za kolumną
z tekstem — a od czasu, gdy kadr ma własną poświatę (`.fbc-hero__blask`),
były dwie plamy naraz. Ziarno i siatka zostają: to osobne warstwy
(`.fbc-ziarno` i `.fbc-hero::after`). */
/* Ziarno — własna warstwa, nieruchoma. Leży nad poświatą (kolejność
malowania: ::before, potem dzieci elementu, potem ::after), więc łamie
pasmowanie gradientu; pod gradientem nie miałoby czego łamać.
NIE wolno go trzymać razem z poświatą na ::before: tamta jest animowana
transformem, więc szum przesuwałby się i skalował razem z nią. */
.fbc-hero > .fbc-ziarno {
position: absolute;
inset: 0;
/* Zerowanie marginesu jest tu KONIECZNE. WordPress daje dzieciom grupy
odstęp blokowy, a element pozycjonowany absolutnie z `inset: 0`
i wysokością `auto` przesuwa się o własny margines: warstwa zaczynała
się 24 px poniżej górnej krawędzi hero i o tyle samo była niższa,
przez co u góry było widać odcięcie szumu. */
margin: 0;
z-index: -1;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23z)' opacity='.09'/%3E%3C/svg%3E");
background-repeat: repeat;
}
/* Siatka techniczna — papier milimetrowy, nie dekoracja. Linie 1 px przy
4,5% krycia: przy tej wartości siatka jest wyczuwalna, ale nieczytelna,
czyli robi dokładnie to, co ma. Maska wygasza ją przed renderem po prawej
(przezroczysta ok. 760 px przy oknie 1440) i nad paskiem liczb u dołu
(ok. 590 px, pasek zaczyna się na 620) — nie wolno jej tam wejść. */
.fbc-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background-image:
repeating-linear-gradient(
to right,
var(--fbc-siatka-linia) 0 1px,
transparent 1px var(--fbc-siatka-modul)
),
repeating-linear-gradient(
to bottom,
var(--fbc-siatka-linia) 0 1px,
transparent 1px var(--fbc-siatka-modul)
);
-webkit-mask-image: radial-gradient(46% 34% at 16% 38%, #000 0%, rgba(0, 0, 0, 0.5) 50%, transparent 80%);
mask-image: radial-gradient(46% 34% at 16% 38%, #000 0%, rgba(0, 0, 0, 0.5) 50%, transparent 80%);
}
@media (max-width: 781px) {
/* Na telefonie tekst i render dzielą tę samą kolumnę — poświata schodzi
wyżej, żeby nie kłaść się na akapicie. Ziarno ma własną warstwę
i tej reguły nie dotyczy. */
.fbc-hero::before {
background-image:
radial-gradient(54.7% 23.2% at 65.8% 19.5%, rgba(118, 0, 112, 0.5) 0%, rgba(118, 0, 112, 0.15) 36%, transparent 62%);
}
/* Siatka trzyma się górnego pasa — niżej idzie render, a pod nim liczby. */
.fbc-hero::after {
-webkit-mask-image: radial-gradient(120% 22% at 30% 12%, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 78%);
mask-image: radial-gradient(120% 22% at 30% 12%, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 78%);
}
}
/* --------------------------------------------------------------------------
15. Nagłówek nałożony na ciemną sekcję
Warunkowo: tylko gdy pierwsza sekcja strony jest ciemna. Na stronach
treści (page.html) nagłówek zostaje normalny — biały na białym byłby
niewidoczny.
-------------------------------------------------------------------------- */
.fbc-header {
/* Układ nagłówka (siatka trzech pasów: logo, menu, ikony) jest w sekcji 2.
Tu została sama wysokość — wcześniej ta reguła ustawiała `display: flex`
i jako późniejsza wygrywała z siatką, przez co menu stało tuż za logo
zamiast na środku (klient 2026-09-18: „menu wcale nie jest na środku"). */
min-height: 72px;
}
.fbc-header > .wp-block-group {
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--40);
}
.fbc-header .wp-block-site-logo,
.fbc-header .wp-block-site-logo img,
.fbc-header .wp-block-navigation,
.fbc-header .wp-block-woocommerce-mini-cart {
display: flex;
align-items: center;
margin-block: 0;
}
/* Strony WooCommerce owijają w `div.woocommerce`; jako drugie dziecko
`.wp-site-blocks` dostawał odstęp bloków (24 px), który przez absolutny
nagłówek zapadał się na górę strony i robił biały pasek nad menu (klient). */
.wp-site-blocks > .woocommerce { margin-block-start: 0; }
/* --------------------------------------------------------------------------
Nagłówek chowany i wracający (klient 2026-09-15)
Przy górze strony nagłówek leży w układzie tak jak dotąd. Po przewinięciu
poniżej progu skrypt (assets/js/naglowek.js) daje `` klasę
`fbc-menu-przyklejone` — nagłówek wisi wtedy nad treścią — i dokłada
`fbc-menu-schowane`, gdy czytelnik jedzie w dół.
`--fbc-naglowek-teraz` mówi, ile nagłówka naprawdę zasłania górę okna.
Elementy przyklejone niżej (kolumna ze zdjęciem produktu) liczą z niej swój
odstęp, zamiast trzymać stałe 72 px — stąd brała się pusta listwa nad
zdjęciem po pasku, którego w tym momencie nie było na ekranie.
-------------------------------------------------------------------------- */
/* Domyślnie 72 px, bo przy górze strony nagłówek stoi w układzie i zajmuje
swoje miejsce; zeruje się dopiero wtedy, gdy naprawdę zjechał poza ekran. */
:root { --fbc-naglowek-teraz: 72px; }
body.fbc-menu-przyklejone { --fbc-naglowek-teraz: 72px; }
body.fbc-menu-schowane { --fbc-naglowek-teraz: 0px; }
/* Pozycjonowany jest zewnętrzny ``, nie
wewnętrzna grupa `.fbc-header` — szablon renderuje dwa zagnieżdżone ``.
`sticky`, nie `fixed`: nagłówek stoi w układzie strony, więc wyjęcie go z niego
podnosiło całą treść o jego wysokość — przy każdej zmianie kierunku przewijania
strona podskakiwała o 72 px (klient 2026-09-15: "menu jakby renderuje się
podwójnie"). `sticky` zostawia miejsce, które zajmował, więc nic się nie rusza.
Przyklejenie jest bezwarunkowe; klasy na `` sterują tylko wyglądem i ukryciem. */
.wp-site-blocks > header {
position: sticky;
inset-block-start: 0;
z-index: 60;
transition: transform 0.28s ease;
}
body.fbc-menu-przyklejone .wp-site-blocks > header {
background: var(--wp--preset--color--base);
box-shadow: 0 1px 0 var(--wp--preset--color--line);
}
/* Dodatkowy piksel ponad własną wysokość i cień zdjęty: kreska spod nagłówka
wypadała dokładnie na krawędzi okna i przy przewijaniu w dół zostawał jasny
pasek na 1 px (klient 2026-09-15). Wysokość bywa też ułamkowa, więc samo
`-100%` potrafi zostawić subpiksel. */
body.fbc-menu-schowane .wp-site-blocks > header {
transform: translateY(calc(-100% - 2px));
box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
body.fbc-menu-przyklejone .wp-site-blocks > header { transition: none; }
}
/* Jedna klatka bez animacji — skrypt nakłada tę klasę, gdy nagłówek ma od razu
stanąć poza ekranem, zamiast tam dojechać.
Dotyczy wyłącznie strony z ciemnym hero: tylko tam nagłówek leży nad treścią
jako `absolute` i przy progu jest już przewinięty, więc przejście na `fixed`
wracałoby go na górę okna i biały pasek migotałby przez kilkanaście klatek.
Na pozostałych stronach nagłówek jest `sticky`, stoi już przy górnej krawędzi
i ma skąd odjechać — tam blokada animacji sprawiała, że menu znikało skokiem
zamiast zjechać (klient 2026-09-16). */
body:has(.wp-site-blocks main > .is-style-sekcja-ciemna:first-child).fbc-menu-bez-ruchu .wp-site-blocks > header { transition: none; }
/* Na ciemnym hero nagłówek jest biały i przezroczysty. Po przyklejeniu leży już
nad jasną treścią, więc wraca do ciemnych kolorów, a logo do własnego — tamten
zestaw reguł wyłącza się sam przez `:not(.fbc-menu-przyklejone)` (niżej). */
body:has(.wp-site-blocks main > .is-style-sekcja-ciemna:first-child) {
&:not(.fbc-menu-przyklejone) .wp-site-blocks > header {
position: absolute;
inset-block-start: 0;
inset-inline: 0;
z-index: 20;
background: transparent;
}
/* Otwarta wyszukiwarka (body.fbc-szukaj-otwarte): nagłówek w białym stanie
jak po przewinięciu — pasek z polem jest jego przedłużeniem, a nie białym
pasem pod przezroczystym menu (klient 2026-09-27: „słabo to wygląda,
trzeba dodawać wtedy tło do menu”). Pozycja zostaje ta sama. */
&.fbc-szukaj-otwarte:not(.fbc-menu-przyklejone) .wp-site-blocks > header {
background: var(--wp--preset--color--base);
}
/* Tu nagłówek leży NAD hero i nie zajmuje miejsca w układzie, więc `absolute`
i `fixed` wymieniają się bez skoku — oba są poza układem. `sticky` z reguły
ogólnej zająłby miejsce i zepchnął hero w dół o 72 px. */
&.fbc-menu-przyklejone .wp-site-blocks > header {
position: fixed;
inset-block-start: 0;
inset-inline: 0;
z-index: 60;
}
/* wszystko w nagłówku na biało */
&:not(.fbc-menu-przyklejone):not(.fbc-szukaj-otwarte) .fbc-header,
&:not(.fbc-menu-przyklejone):not(.fbc-szukaj-otwarte) .fbc-header a,
&:not(.fbc-menu-przyklejone):not(.fbc-szukaj-otwarte) .fbc-header .wp-block-navigation-item__label,
&:not(.fbc-menu-przyklejone):not(.fbc-szukaj-otwarte) .fbc-header .wp-block-woocommerce-mini-cart a,
&:not(.fbc-menu-przyklejone):not(.fbc-szukaj-otwarte) .fbc-header svg {
color: var(--wp--preset--color--base);
fill: currentColor;
}
/* logo jest ciemne — odwracamy je na biel zamiast trzymać drugi plik */
&:not(.fbc-menu-przyklejone):not(.fbc-szukaj-otwarte) .fbc-header .wp-block-site-logo img {
filter: brightness(0) invert(1);
}
/* hero robi miejsce na nałożony nagłówek */
& .wp-site-blocks main > .is-style-sekcja-ciemna:first-child {
padding-block-start: calc(72px + clamp(3.5rem, 7vw, 6rem));
}
& .wp-site-blocks { position: relative; }
}
/* Licznik koszyka: kolory zależą od tła nagłówka — reguły w woocommerce.css
(klient 2026-09-25). Tu tylko kształt. */
.fbc-header .wc-block-mini-cart__badge { border-radius: 2px; }
/* --------------------------------------------------------------------------
16. Jedna krawędź dla całej strony
Strona miała cztery różne lewe krawędzie, bo nagłówek chodził na root
paddingu WordPressa, a sekcje na alignwide — dwa niezależne mechanizmy,
które nie mają jak się zgodzić.
Od teraz wcięcie boczne jest jedno i nakłada się DOKŁADNIE RAZ:
na sekcji pełnej szerokości. Nic w środku sekcji go nie powtarza.
-------------------------------------------------------------------------- */
:root {
--fbc-gutter: clamp(1.25rem, 8vw, 8.5rem);
}
/* Ultrawide: bez żadnego limitu szerokości — temat otwarty, do ustalenia
z klientem (2026-09-25). Dwa podejścia już były i zostały cofnięte:
limit całej treści do 1728 px powyżej 2000 px (v1.100.0, 20.09 — zwężał
stronę) i sufit 1728 px tylko na siatkach kart o stałej liczbie kolumn
(v1.111.5). Pomiar kart na 1920 / 2560 / 3440: `.work/ultrawide-karty.js`. */
/* Warstwa, która trzyma wcięcie — i tylko ona. */
.fbc-header,
.wp-site-blocks main > .alignfull,
.wp-site-blocks main > .has-global-padding {
max-width: 100%;
padding-inline: var(--fbc-gutter);
margin-inline: 0;
}
/* Nagłówek jest flexem, a WordPress dokłada jego dzieciom margin-inline: auto
z układu "constrained". W flexie auto zjada wolne miejsce — logo dostawało
przez to 66 px marginesu i uciekało z linii nagłówka.
!important jest tu konieczne: reguła rdzenia
`.is-layout-constrained > :where(...) { margin-left: auto !important }`
nie da się przebić samą specyficznością. */
.fbc-header.wp-block-group > * {
margin: 0 !important;
max-width: none;
}
.fbc-header.wp-block-group > .wp-block-group {
margin-inline-start: auto !important; /* menu i koszyk do prawej krawędzi */
}
/* Marginesu blokowego też trzeba się pozbyć, nie tylko bocznego: WordPress
daje drugiemu dziecku grupy odstęp `margin-block-start: 24px`, a we flexie
z `align-items: center` centrowane jest pudełko RAZEM z marginesem —
przez co menu i koszyk siedziały 12 px niżej niż logo. */
/* Wcięcie jest już na sekcji, więc treść w środku nie dokłada drugiego.
Dotyczy alignwide, zagnieżdżonych alignfull i obu bloków hero. */
.wp-site-blocks main .alignwide,
.wp-site-blocks main .alignfull > .alignfull,
.fbc-hero > .wp-block-columns,
.fbc-hero > .fbc-stats {
max-width: 100%;
margin-inline: 0;
padding-inline: 0;
}
.wp-site-blocks main .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide)) {
max-width: 100%;
margin-inline: 0;
}
/* Wyjątek: długi tekst nie ma prawa ciągnąć się przez cały ekran.
Ograniczamy miarę wiersza, ale od lewej — krawędź zostaje wspólna. */
.wp-block-post-content p,
.wp-block-woocommerce-product-details p,
.wp-block-woocommerce-product-details li {
max-width: 72ch;
}
/* Na telefonie: koszyk i hamburger w równym odstępie między rysunkami ikon;
konto jest w górnym pasku otwartego menu (`.fbc-menu-konto`, klient
2026-09-26: „za ciasno”, potem „nie jako kolejna linia w menu”). Dawne `order: -1` na koszyku pochodziło sprzed
przeniesienia konta do grupy ikon. Odstęp 24 px: tyle co flex-gap ikon; przy hamburgerze
odejmujemy zapas jego przycisku (8 px padding + 5 px pustego pola w SVG)
od 16 px odstępu kolumn siatki. */
@media (max-width: 599.98px) {
/* `.fbc-header >` — klasa układu WordPressa (`wp-container-…`) ma tę samą wagę i stoi później. */
.fbc-header > .fbc-header__ikony { gap: 24px; }
.fbc-header > nav.wp-block-navigation { margin-inline-start: -5px; }
/* Ikona powiększona z 24 do 30 px. Dwie cienkie kreski przy 31 px
odstępu optycznie „odpływają" od krawędzi — zwarty znak logo po
drugiej stronie ma znacznie większą masę. Większy rysunek wypełnia
ten sam odstęp i przestaje wyglądać na zagubiony, a wspólna krawędź
zostaje nienaruszona. */
.fbc-header .wp-block-navigation__responsive-container-open svg {
width: 30px;
height: 30px;
}
/* W gutter ma trafić RYSUNEK ikony, nie pudełko przycisku ani ramka SVG.
Zapasy: 8 px paddingu przycisku (powierzchnia dotyku) + pusty margines
w samym SVG — viewBox 24×24 z kreskami od x=4 do x=20, czyli po
powiększeniu do 30 px daje to 5 px z każdej strony. */
.fbc-header .wp-block-navigation__responsive-container-open {
margin-inline-end: calc(-1 * (var(--wp--preset--spacing--20) + 5px));
}
}
/* Powyżej 600 px hamburgera nie ma i skrajną ikoną jest koszyk — jego glif
ma 14 px na pudełko 40 px, czyli 13 px zapasu z każdej strony (8 px padding
przycisku + 5 px pustego marginesu w SVG). Wartości wzięte z pomiaru
wyrenderowanych pikseli, nie z arkusza: zapas w SVG jest inny dla każdej
ikony i nie da się go wyliczyć z tokenów. */
@media (min-width: 600px) {
/* Tylko zewnętrzny element — przy dwóch zagnieżdżonych selektorach
margines nakłada się podwójnie. */
.fbc-header .wp-block-woocommerce-mini-cart {
margin-inline-end: -13px;
}
}
/* --------------------------------------------------------------------------
20. Menu pełnoekranowe na telefonie
WordPress maluje nakładkę na biało i ustawia czarny tekst, ale nagłówek
jest u nas przezroczysty nad ciemnym hero i ma białe linki — te dwie
reguły spotykały się na bieli na bieli. Nakładka jest ciemna zawsze,
niezależnie od tego, czy strona pod spodem jest jasna czy ciemna:
pełny ekran to własna powierzchnia, nie przedłużenie sekcji.
-------------------------------------------------------------------------- */
/* !important na tle: rdzeń maluje nakładkę regułą
`.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(...)`,
czyli pięcioma klasami. Da się ją przebić dłuższym selektorem, ale byłby
kruchy — wystarczy zmiana klasy w rdzeniu i przestaje trafiać. */
/* Animacja wejścia rdzenia (`overlay-menu__fade-in-animation`) kończy się na `transform: translateY(0)`
z `fill-mode: forwards` — a każdy `transform` robi z nakładki blok zawierający dla `position: fixed`,
więc krzyżyk i pas pod „MY ACCOUNT” przewijały się z listą zamiast stać (2026-10-01). Samo rozjaśnienie. */
@keyframes fbc-menu-wejscie { from { opacity: 0; } to { opacity: 1; } }
.wp-block-navigation__responsive-container.is-menu-open {
animation: fbc-menu-wejscie .1s ease-out !important;
transform: none !important;
background-color: var(--wp--preset--color--ground-dark) !important;
color: var(--wp--preset--color--base);
/* Menu trzyma tę samą krawędź co logo i hamburger. Padding pionowy
zostawiamy rdzeniowi — robi miejsce na przycisk zamykania. */
padding-inline: var(--fbc-gutter) !important;
/* Zmienne ustawione tutaj, a nie na samej liście: dziedziczą je
i kontener treści, i `ul`, a WordPress wyrównuje oba przez nie. */
--navigation-layout-align: flex-start;
--navigation-layout-justification-setting: flex-start;
}
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
color: var(--wp--preset--color--base);
}
/* W nakładce jest miejsce, więc pozycje dostają czytelny stopień
i odstęp na palec — 44 px to minimum pola dotyku wg WCAG. */
/* Nakładka dziedziczy wyrównanie do prawej z poziomego paska nawigacji.
Na pełnym ekranie pozycje mają zaczynać się tam, gdzie oko wraca po
każdej linii — czyli od lewej, w tej samej krawędzi co logo. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
text-align: start;
/* Te same zmienne trzeba powtórzyć TUTAJ, nie tylko na nadrzędnym
elemencie: klasa `items-justified-right` siedzi bezpośrednio na tej
liście, a własność ustawiona na elemencie bije wartość dziedziczoną. */
--navigation-layout-align: flex-start;
--navigation-layout-justification-setting: flex-start;
}
/* Przycisk zamykania staje dokładnie tam, gdzie był hamburger — ten sam
rozmiar rysunku i ta sama korekta, żeby przy otwarciu menu nic nie skoczyło. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
width: 30px;
height: 30px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
margin-inline-end: calc(-1 * (var(--wp--preset--spacing--20) + 5px));
margin-block-start: -3px; /* zmierzone: bez tego krzyżyk siada 3 px niżej niż hamburger */
}
/* Biała szpara nad nagłówkiem. WordPress daje dzieciom .wp-site-blocks
margin-block-start 24 px i zeruje go tylko pierwszemu — a u nas nagłówek
jest nałożony (poza przepływem), więc pierwszy w przepływie jest
i to on ten margines dostawał. Margines wychodził na zewnątrz kontenera
(collapsing margins) i odsłaniał białe tło body.
Ten sam margines dostaje