/**
* reviews.css — opinie klientów na dwóch pasach przewijanych w przeciwne strony.
*
* Wymaga tokens.css, base.css i components/marquee.css. Wszystko pod prefiksem
* .dc-reviews__, nic stąd nie wycieka na cudze znaczniki.
*
* PODZIAŁ Z KOMPONENTEM. Maska krawędzi, szerokość pasa, wyściółka pod cień
* i warstwa kompozycji siedzą w components/marquee.css, bo są prawdziwe
* o KAŻDYM wystąpieniu pasa. Tutaj zostaje to, czym różni się to konkretne
* wystąpienie: wygląd karty opinii i stos dwóch okien jedno pod drugim.
* Prędkości i próg zawijania nie są ani tu, ani
* w komponencie — są w marquee.js, wpisane na stałe, bo to arytmetyka
* klatki, nie wartość z palety.
*
* PIERWSZA OD DAWNA SEKCJA Z KARTAMI NA JASNYM TLE — nie ciemny panel.
* Karta bierze więc ten sam zestaw co .dc-origin__table-card: szkło
* --dc-surface-glass, obwódka --dc-border-subtle i para cieni z reguły 13.
* Nie ma tu ani jednej reguły [data-theme='dark'], bo nie ma czego
* różnicować poza kolorem (reguła 10).
*
* CO JEST TU LICZBĄ, A NIE TOKENEM (reguła 17, punkt 4 — trafienia grepa
* są świadome): NIC. Jedyna wartość spoza skali to line-height: 0.6 przy
* znaku cudzysłowu — bez jednostki, więc grep jej nie widzi, ale wymaga
* uzasadnienia tak samo. Stoi przy swojej deklaracji.
*/
/* ==========================================================================
1. RAMA SEKCJI
.dc-section z base.css daje pionowy oddech 64 px, dokładnie jak makieta.
.dc-container NIE jest tu użyty: pasy mają iść przez całą szerokość okna,
a własny kontener dostaje wyłącznie nagłówek (sekcja 2).
overflow: hidden JEST POTRZEBNE mimo maski na oknie pasa. Okno pasa
ma własny overflow: hidden, ale to zabezpieczenie sekcji: gdyby cokolwiek
w pasie wystawało (cień karty, przyszły element z ujemnym marginesem),
dokument dostałby poziomy pasek przewijania — a przy pasie szerszym od
okna o kilka tysięcy pikseli byłby to pasek nie do przeoczenia.
========================================================================== */
.dc-reviews {
overflow: hidden;
}
/* ==========================================================================
2. NAGŁÓWEK
WŁASNY KONTENER ZAMIAST .dc-container — reguła 8. Makieta daje nagłówkowi
wcięcie boczne 80 px zamiast zwykłych 32 px; to jedyne takie miejsce na
stronie głównej (16 z 18 kontenerów w home.html ma 32 px). Wynika ono
z tego, że pasy pod spodem idą przez całą szerokość okna — przy 32 px
nagłówek stałby niemal równo z kartami i przestałby czytać się jako
osobna warstwa nad nimi. Użycie .dc-container i natychmiastowe nadpisanie
jego padding-inline rozdzieliłoby ten układ na dwa pliki, więc kontener
stoi tu w całości.
Dolne 44 px z makiety scalone do --dc-space-48 (reguła 15; skala tokenu
to 44 / 46 / 48).
align-items: flex-end wyrównuje plakietkę do DOŁU nagłówka, nie do góry —
dzięki temu jej linia pisma siada przy ostatnim wierszu h2 niezależnie
od tego, czy nagłówek złamał się na dwa wiersze, czy na trzy.
========================================================================== */
.dc-reviews__header {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: var(--dc-space-20);
width: 100%;
max-width: var(--dc-container);
margin-inline: auto;
padding-inline: var(--dc-space-80);
padding-block-end: var(--dc-space-48);
}
/* Nadtytuł z kreską. Kolor to --dc-accent-strong, a NIE --dc-accent-text —
reguła J: złoty TEKST bierze wariant mocniejszy, bo liczy się dla niego
próg 4,5:1, którego --dc-accent-text nie spełnia. Sama kreska obok jest
dekoracją i zostaje na --dc-accent (sekcja niżej).
Odstęp 0,2em z makiety scalony do --dc-tracking-widest (0,18em) —
reguła 15, skala tokenu to 0,16 / 0,18 / 0,20 / 0,22. Pismo 12 px / 600
jak każdy nadtytuł sekcji (design-audit.md, C.8; partia 6) — makietowe
11 / 700 zeszło do wzorca. */
.dc-reviews__eyebrow {
display: flex;
align-items: center;
gap: var(--dc-space-16);
margin-block-end: var(--dc-space-14);
font-size: var(--dc-text-sm);
font-weight: var(--dc-weight-medium);
letter-spacing: var(--dc-tracking-widest);
text-transform: uppercase;
color: var(--dc-accent-strong);
}
/* Kreska przed nadtytułem: 40 px złota włoskowatość. --dc-border-thick
(1,5 px) to wartość makiety co do dziesiątej, bez scalania. flex: none,
żeby nie ścisnęła się przy wąskim nagłówku — kreska krótsza niż 40 px
przestaje czytać się jako kreska. */
.dc-reviews__eyebrow-rule {
flex: none;
width: var(--dc-space-40);
height: var(--dc-border-thick);
background-color: var(--dc-accent);
}
/* h2 bierze z base.css krój, wagę (800), interlinię i odstęp liter
(-0,02em; makieta ma -0,025em — reguła 15, skala tokenu to
-0,020 / -0,025 / -0,028). Tu tylko rozmiar i szerokość łamania.
Rozmiar: makieta clamp(26px, 3vw, 36px) scalony do --dc-display-4,
czyli clamp(26px, 3.2vw, 34px) — reguła 15, skala sufitów tokenu to
38 / 36 / 34. Dolna granica i zachowanie przy zwężaniu są identyczne.
max-width + text-wrap: balance dają dwuwierszowy nagłówek makiety
(„Co mówią ci, którzy już / palą naszym węglem.") bez ani jednego
w znaczniku — łamanie zostaje sprawą szerokości kolumny, więc przekład
na inny język złamie się w swoim miejscu, a nie w polskim. */
.dc-reviews__heading {
max-width: var(--dc-measure-md);
font-size: var(--dc-display-4);
text-wrap: balance;
}
/* Plakietka zaufania. Kolor --dc-text-subtle (makieta #9a958a) — token
podnosi kontrast z 2,63:1 do 4,75:1, co jest podmianą palety zrobioną
raz w tokens.css, a nie decyzją tej sekcji.
white-space: nowrap z makiety: napis ma nie łamać się na dwa wiersze,
bo wtedy przestaje wyglądać jak plakietka. Przy wąskim oknie cały blok
zjeżdża pod nagłówek dzięki flex-wrap na rodzicu. */
.dc-reviews__verified {
display: flex;
align-items: center;
gap: var(--dc-space-8);
font-size: var(--dc-text-base);
color: var(--dc-text-subtle);
white-space: nowrap;
}
/* Kropka jest DEKORACJĄ — znaczenie niesie napis obok (WCAG 1.4.1), więc
w znaczniku ma aria-hidden. --dc-success-on-dark, nie --dc-success:
jedna jasna zieleń dla wszystkich kropek statusu na stronie (help-cta,
oba okna — poprawki po audycie, 2026-08-30). --dc-success w jasnym motywie
jest przyciemniony pod próg kontrastu TEKSTU (#35704E), a próg nie
dotyczy dekoracji — ten sam przypadek co numer kroku w how-to-order;
przez to kropka tu była ciemniejsza niż w help-cta, choć obie znaczą to
samo. Makieta rysuje ją jako #4caf72 w obu motywach, czyli jasno. Token
nazywa się „-on-dark", bo powstał dla czarnego panelu, ale jest STAŁY
w obu motywach (tokens.css) — na jasnej karcie robi dokładnie to, o co
chodzi: ta sama zieleń w obu motywach, bez nowego tokenu. */
.dc-reviews__verified-dot {
flex: none;
width: var(--dc-space-8);
height: var(--dc-space-8);
border-radius: var(--dc-radius-full);
background-color: var(--dc-success-on-dark);
}
/* ==========================================================================
3. STOS PASÓW
Dwa okna jedno pod drugim z odstępem 16 px, dokładnie jak makieta.
Ten element jest zarazem grupą, którą widzi skrypt: trzyma wspólny stan
pauzy obu pasów i jest jednostką dla IntersectionObservera.
========================================================================== */
.dc-reviews__marquee {
display: flex;
flex-direction: column;
gap: var(--dc-space-16);
}
/* Pas jest listą (), więc dokłada wyrównanie kart do
równej wysokości. align-items: stretch sprawia, że karta krótsza
od najwyższej w pasie i tak sięga jego dołu — bez tego stopka z awatarem
„podskakiwałaby" z karty na kartę i pas przestałby mieć równą dolną
krawędź. Wysokość równa się najwyższej karcie w CAŁYM pasie, a nie
w oknie, więc nie zmienia się w trakcie przewijania. */
.dc-reviews__track {
align-items: stretch;
}
/* ==========================================================================
4. KARTA OPINII
Szerokość 300 px z makiety scalona do --dc-grid-min-md (280 px) —
reguła 15, skala tokenu to 260 / 280 / 300. Zawijanie pasa liczy się
ze ZMIERZONEJ szerokości treści, więc ta zmiana nie rusza mechanizmu:
skrypt czyta scrollWidth, jaki wyjdzie.
Margines prawy zostaje na KAŻDEJ karcie, także ostatniej — to on tworzy
odstęp między ostatnią kartą pierwszej kopii a pierwszą kartą drugiej.
Gdyby ostatnia karta go nie miała, w chwili zawinięcia dwie karty
stykałyby się bokami i szew stałby się widoczny.
========================================================================== */
.dc-reviews__card {
display: flex;
flex: none;
flex-direction: column;
width: var(--dc-grid-min-md);
margin-inline-end: var(--dc-space-20);
padding: var(--dc-space-22);
border: var(--dc-border) solid var(--dc-border-subtle);
border-radius: var(--dc-radius-18);
background-color: var(--dc-surface-glass);
box-shadow: var(--dc-shadow-md), var(--dc-shadow-inset-top);
}
/* Znak cudzysłowu — ozdoba typograficzna, w znaczniku z aria-hidden.
--dc-numeral-lg to dokładnie 44 px makiety, bez scalania (token powstał
m.in. z tego właśnie znaku — 46 wystąpień).
Barwa --dc-accent-a20: makietowe .22 scalone do drabinki alfy złota
w partii 4 audytu (design-audit.md, C.3). Wcześniej color-mix na .22,
z obawy, że dwie setne alfy widać — zmierzone na zrzucie karty przed
i po: różnica poniżej progu 3/255, liczby w partii 4.
line-height: 0.6 — JEDYNA wartość w tym pliku spoza skali tokenów.
Skala --dc-leading-* zaczyna się na 1 i nie ma czym tego zastąpić, bo
to nie jest interlinia tekstu, tylko PRZYCIĘCIE pudełka pojedynczego
glifu: cudzysłów rysuje się przy górnej krawędzi swojego pola, więc przy
interlinii 1 zostawiałby pod sobą ~18 px pustki, której makieta nie ma.
To ta sama kategoria co perspective(700px) w tilt-card.css — geometria
rysunku, nie wartość projektowa. */
.dc-reviews__quote-mark {
margin-block-end: var(--dc-space-10);
font-family: var(--dc-font-display);
font-size: var(--dc-numeral-lg);
font-weight: var(--dc-weight-black);
line-height: 0.6;
color: var(--dc-accent-a20);
}
/* ==========================================================================
5. OCENA
Pięć gwiazdek dla oka, jedno zdanie (.dc-sr-only) dla czytnika ekranu.
Napis jest wyjęty z układu przez position: absolute w .dc-sr-only, więc
nie wpływa na odstęp między gwiazdkami.
========================================================================== */
.dc-reviews__rating {
margin-block-end: var(--dc-space-10);
}
.dc-reviews__stars {
display: flex;
gap: var(--dc-space-2);
color: var(--dc-accent);
}
/* GWIAZDKA JEST JEDYNĄ IKONĄ RYSOWANĄ WYPEŁNIENIEM, a dc_icon() dokłada
każdej ikonie fill="none" i stroke="currentColor" — i słusznie, bo
wszystkie pozostałe są kreskowe (patrz inc/icons.php). Samo zdjęcie
atrybutu nie wystarczy: base.css ma pod niego regułę svg[fill='none']
o specyficzności (0,1,1), która bije atrybut prezentacyjny.
Dlatego selektor jest DWUKLASOWY — (0,2,0) wygrywa z (0,1,1), bo liczba
klas rozstrzyga przed liczbą atrybutów. Jedna klasa (0,1,0) by przegrała
i gwiazdki wyszłyby konturem zamiast pełnym złotem.
stroke: none zdejmuje obrys, którym dc_icon() obrysowałby wypełniony
już kształt — bez tego gwiazdka jest o 1,7 px grubsza z każdej strony
i jej ramiona się zlewają przy rozmiarze 12 px.
currentColor bierze złoto z .dc-reviews__stars wyżej, więc ikona działa
w obu motywach bez ani jednej reguły dark. */
.dc-reviews__stars .dc-icon--star {
fill: currentColor;
stroke: none;
}
/* GWIAZDKA PUSTA — TA SAMA BRYŁA, PRZYGASZONE ZŁOTO
Ocena jedzie z bazy, więc gwiazdek jest zawsze pięć, a różni je samo
wypełnienie. Puste NIE są rysowane konturem: obrys z rejestru ma 1,7 px,
co przy ikonie 12 px zlewa ramiona gwiazdki w plamę — ten sam powód, dla
którego wypełniona gwiazdka wyżej zdejmuje stroke. Zostaje ta sama bryła
w złocie o alfie 0,30, czyli rządek pięciu kształtów, w którym od razu
widać, ile jest zapalonych. --dc-accent-a30 nie zmienia się z motywem
(złoto jest w obu to samo), więc i tu nie ma ani jednej reguły dark.
OCENA JEST ATRYBUTEM DANYCH, NIE KLASĄ MODYFIKUJĄCĄ. Klasa w rodzaju
--rating-3 wpisywałaby wartość w nazwę, a to jest DANA — ta sama zasada
co przy szerokości słupka rozkładu, która idzie zmienną własną zamiast
style="width:81%".
:nth-child liczy tu SVG-i, bo są jedynymi elementami wewnątrz rządka.
Progi są wypisane wprost dla czterech ocen zamiast liczone, bo skala ma
pięć stopni i CSS nie umie sparametryzować :nth-child zmienną własną.
Piątka nie ma tu wiersza — przy ocenie 5 nie gaśnie nic i drzewo jest
dokładnie takie jak przed podłączeniem bazy.
Specyficzność: (0,3,0) — atrybut (0,1,0) + klasa ikony (0,1,0) +
:nth-child (0,1,0). Bije regułę wypełnienia wyżej, która ma (0,2,0). */
.dc-reviews__stars[data-dc-rating='4'] .dc-icon--star:nth-child(n + 5),
.dc-reviews__stars[data-dc-rating='3'] .dc-icon--star:nth-child(n + 4),
.dc-reviews__stars[data-dc-rating='2'] .dc-icon--star:nth-child(n + 3),
.dc-reviews__stars[data-dc-rating='1'] .dc-icon--star:nth-child(n + 2) {
fill: var(--dc-accent-a30);
}
/* ==========================================================================
6. TREŚĆ I AUTOR
========================================================================== */
/* 13,5 px scalone do --dc-text-base (13 px; skala tokenu to 13 / 13,5)
i 1,68 do --dc-leading-relaxed (1,6; skala to 1,6 / 1,62 / 1,65 / 1,68
/ 1,7 / 1,72) — oba reguła 15.
flex: 1 rozpycha akapit na całą wolną wysokość karty, przez co stopka
z awatarem siada przy dolnej krawędzi niezależnie od długości opinii.
To ono, razem z align-items: stretch na pasie, daje równą dolną
krawędź wszystkich kart. */
.dc-reviews__text {
flex: 1;
font-size: var(--dc-text-base);
line-height: var(--dc-leading-relaxed);
color: var(--dc-text-secondary);
}
.dc-reviews__author {
display: flex;
align-items: center;
gap: var(--dc-space-10);
margin-block-start: var(--dc-space-16);
padding-block-start: var(--dc-space-16);
border-block-start: var(--dc-border) solid var(--dc-border-line);
}
/* Awatar i kółko z inicjałami mają być tym samym krążkiem w tym samym
miejscu, więc dzielą rozmiar i promień. 36 px makiety scalone do
--dc-space-40 (reguła 15; skala tokenu to 36 / 38 / 40 / 42).
Token odstępu użyty jako ROZMIAR — tak samo jak szerokość paska
wyróżnienia w origin.css (width: var(--dc-space-4)). Skala odstępów
jest w tym systemie jedyną skalą małych długości i nie ma osobnej
skali rozmiarów, do której ten krążek mógłby należeć. */
.dc-reviews__avatar,
.dc-reviews__initials {
flex: none;
width: var(--dc-space-40);
height: var(--dc-space-40);
border-radius: var(--dc-radius-full);
}
/* Zdjęcie jest kwadratowe (200×200), więc cover niczego nie przycina —
deklaracja stoi tu na wypadek zdjęć z bazy, które kwadratowe nie będą.
base.css daje obrazom height: auto, co przy jawnej wysokości wyżej
spłaszczyłoby krążek do elipsy — dlatego wysokość jest tu powtórzona
selektorem o wyższej specyficzności niż `img` z base.css. */
.dc-reviews__avatar {
height: var(--dc-space-40);
object-fit: cover;
}
/* Inicjały: kolor --dc-accent-strong, nie --dc-accent-text z makiety —
reguła J. Litery są tu tekstem (rysunkiem liter), nawet jeśli dla
czytnika ekranu są schowane: próg czytelności obowiązuje wzrok, a nie
drzewo dostępności.
Tło i obwódka to DEKORACJA: makietowe .12 i .28 scalone do
--dc-accent-a10 i --dc-border-accent (.3) w partii 4 audytu — jak przy
znaku cudzysłowu, zmierzone jako nierozróżnialne na zrzucie karty
(design-audit.md, partia 4). */
.dc-reviews__initials {
display: flex;
align-items: center;
justify-content: center;
border: var(--dc-border) solid var(--dc-border-accent);
background-color: var(--dc-accent-a10);
font-family: var(--dc-font-display);
font-size: var(--dc-text-xs);
font-weight: var(--dc-weight-black);
color: var(--dc-accent-strong);
}
/* min-width: 0 na kolumnie z podpisem — bez tego element flex nie zejdzie
poniżej swojej treści i długi podpis („Częstochowa · kocioł automatyczny")
rozepchnąłby kartę ponad zadaną szerokość, psując arytmetykę zawijania. */
.dc-reviews__identity {
display: flex;
min-width: 0;
flex-direction: column;
}
/* 12,5 px scalone do --dc-text-sm (12 px; skala tokenu to 12 / 12,5). */
.dc-reviews__name {
font-family: var(--dc-font-display);
font-size: var(--dc-text-sm);
font-weight: var(--dc-weight-bold);
color: var(--dc-text);
}
/* Kolor --dc-text-muted, a NIE --dc-text-subtle z makiety (#9a958a).
Podpis jest tekstem do przeczytania — miasto i rodzaj pieca to treść
opinii, nie ozdoba — więc obowiązuje go próg 4,5:1.
--dc-text-subtle zmierzone na złożonym tle TEJ karty dawało 4,20:1
w motywie jasnym i 4,49:1 w ciemnym, czyli pod progiem po obu stronach.
Karta jest półprzezroczysta, a pasy jadą nad zmiennym tłem strony, więc
realne tło podpisu wędruje — nominalne 4,75:1 tokenu tu nie obowiązuje.
--dc-text-muted to najmniejszy krok w górę w drabince tekstu (o jeden
stopień), ten sam ruch co w origin.css przy etykietach na złotej karcie.
Zmierzone po zmianie: patrz raport zadania. */
.dc-reviews__meta {
margin-block-start: var(--dc-space-2);
font-size: var(--dc-text-xs);
color: var(--dc-text-muted);
}
/* ==========================================================================
7. UKŁAD WĄSKI — WCIĘCIE NAGŁÓWKA WRACA DO ZWYKŁEGO
PRÓG 440 px — JEDYNA WARTOŚĆ W TYM PLIKU SPOZA TOKENÓW
Dlaczego nie token: warunku @media nie da się zapisać przez var() —
custom properties rozwiązują się w kaskadzie na elemencie, a warunek
@media jest oceniany wcześniej, zanim taki element w ogóle istnieje.
To samo uzasadnienie co przy 1024 px w header.css i 790 px w origin.css;
ta wartość jest w projekcie TRZECIA.
Skąd akurat 440. Zmierzone na żywej sekcji, krokiem 1 px: przy wcięciu
80 px nagłówek trzyma się dwóch wierszy do szerokości okna 440 px
(kolumna 280 px), a przy 439 px (kolumna 279 px) łamie się na trzy —
czyli traci dwuwierszowy kształt, który makieta pokazuje jako swój.
439 to więc najszersze okno, w którym nagłówek już się psuje;
zaokrąglone w górę do pełnej dziesiątki daje 440, tak samo jak przy
progu w origin.css.
Poniżej progu wcięcie wraca do 32 px, czyli do wartości, którą ma
.dc-container i 16 z 18 kontenerów w makiecie. To NIE jest odejście
od makiety: makieta nie ma ani jednego zapytania medialnego i opisuje
wyłącznie szerokość projektową. Poniżej 440 px wcięcie 80 px zabiera
z 390 px okna 160 px, czyli 41% szerokości — a zostawiona kolumna
230 px jest węższa niż sama karta opinii, przez co nagłówek przestaje
czytać się jako nadrzędny wobec pasów.
========================================================================== */
@media (max-width: 440px) {
.dc-reviews__header {
padding-inline: var(--dc-space-32);
}
}