/**
* hero.css — pierwszy ekran strony głównej: teza marki i zdjęcie produktu.
*
* Wymaga tokens.css i base.css. Każdy plik sekcji ładuje się na KAŻDEJ
* stronie, więc wszystko siedzi pod prefiksem .dc-hero__ i nic stąd
* nie może wyciec na cudze znaczniki.
*
* ANI JEDNEJ REGUŁY [data-theme='dark']. Cała różnica między motywami
* to kolory, a te podmieniają tokeny — łącznie z wypełnieniem głównego
* przycisku, dla którego powstał --dc-gradient-cta (patrz tokens.css,
* sekcja 11). Zgodnie z regułą 10 blok dark w tym pliku znaczyłby,
* że został użyty zły token.
*
* CO JEST W TYM PLIKU LICZBĄ, A NIE TOKENEM, I DLACZEGO
* Reguła 17, punkt 5, każe zgrepować nowy CSS po hex, rgb() i px
* i oczekiwać pustki. Ten plik daje trzy trafienia i wszystkie trzy
* są świadome:
*
* 1. `50%` przy wyśrodkowaniu warstw pod zdjęciem oraz `66%` / `70%`
* jako punkty zatrzymania gradientów. To geometria rysunku, nie
* wartość projektowa — dokładnie jak kąty gradientu obwódki
* w components/ring.css i jak DC_ICON_STROKE w inc/icons.php.
* 2. `rotate(-1deg)` / `rotate(1deg)` w klatkach unoszenia. Jak wyżej.
* 3. `rgba(var(--dc-shadow-color), 0.3)` w cieniu pod workiem.
* To NIE jest zahardkodowany kolor: kanał barwy pochodzi z tokenu
* (jasny 30,40,60 — ciemny 0,0,0), literałem jest sama alfa.
* Tak samo składa wszystkie osiem cieni tokens.css w sekcji 13,
* bo CSS nie ma jak podać alfy do gotowego koloru bez relative
* color syntax, której Safari jeszcze nie ma. Gdyby zapisać ten
* cień jako token, byłby tokenem pod jeden przypadek (reguła 15).
* Grep po `rgb` trafia więc w tę linię — i ma trafiać.
*
* BEZ OBWÓDKI .dc-ring. Makieta nie daje hero ani jednej warstwy stożkowej;
* złoto jest tu poświatą ZA produktem, nie rantem karty.
*
* DWA PANELE LEŻĄCE NA ZDJĘCIU (karta parametrów i plakietka wagi) mają tło
* NIEPRZEZROCZYSTE, wbrew makiecie, która daje im szkło. Powód jest zmierzony
* i opisany przy sekcji 7: szkło pożycza kontrast od tła, a tłem jest tu
* fotografia, więc kontrastu nie da się zagwarantować. Wszystkie pozostałe
* szklane powierzchnie sekcji (plakietka parametru, drugie CTA) leżą na tle
* strony i szkło zachowują.
*/
/* ==========================================================================
1. RAMA SEKCJI
========================================================================== */
/* Szerokość i marginesy boczne daje .dc-container z base.css, użyta bez
żadnej zmiany. Pionowy oddech deklarujemy tutaj, bo .dc-section daje
64 px z obu stron, a makieta chce 72 u góry i 56 u dołu — pierwszy ekran
ma więcej powietrza nad treścią niż pod nią. Klasa użyta i natychmiast
nadpisana rozdzieliłaby jeden układ na dwa pliki (reguła 8).
Scalenia wg reguły 15: 72 -> --dc-space-80 (skupisko 72/80/88/100). */
.dc-hero {
padding-block: var(--dc-space-80) var(--dc-space-56);
}
/* Dwie kolumny bez ani jednego breakpointu: liczba kolumn wynika z miejsca,
nie z progu (reguła 9). Siatka deklarowana tutaj, a nie brana z .dc-grid-lg,
bo dokładamy align-items i mamy inny gap.
UWAGA POMIAROWA. Makieta ma tu minmax(380px, 1fr), a token jest 320 px
(--dc-grid-min-lg scala 320/340/380). Ta różnica PRZESUWA PRÓG ZWINIĘCIA
o ok. 136 px, więc nie jest kosmetyczna — zmierzone szerokości okna,
przy których wypadają dwie kolumny: makietowe 380 px potrzebuje 888 px,
tokenowe 320 px potrzebuje 752 px. Zwycięża token: przy 768 px kolumny
są wtedy dwie, po ok. 328 px, i to jest układ zamierzony — zdjęcie ma
max-width 400 px, więc samo się do kolumny wpisuje, a nie jest przycinane.
Pomiar w raporcie zadania. */
.dc-hero__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(var(--dc-grid-min-lg), 100%), 1fr));
gap: var(--dc-space-48);
align-items: center;
}
/* .dc-hero__copy nie ma ani jednej deklaracji i to jest zamierzone:
kolumna tekstu jest zwykłym blokiem, a odstępy niosą same elementy
swoimi marginesami. Klasa zostaje w znaczniku jako nazwa bloku. */
/* ==========================================================================
2. PLAKIETKA PARAMETRU
========================================================================== */
/* Pigułka ze szkła nad nagłówkiem. Jest akapitem, więc inline-flex zamiast
flex — ma obejmować treść, a nie rozciągać się na całą kolumnę.
Padding jest niesymetryczny za makietą: od strony sygnetu węższy, bo
kółko samo w sobie niesie już światło (11 -> --dc-space-12, reguła 15). */
.dc-hero__badge {
display: inline-flex;
align-items: center;
gap: var(--dc-space-10);
margin-block-end: var(--dc-space-24);
padding: var(--dc-space-8) var(--dc-space-16) var(--dc-space-8) var(--dc-space-12);
border: var(--dc-border) solid var(--dc-border-subtle);
border-radius: var(--dc-radius-pill);
background-color: var(--dc-surface-glass);
-webkit-backdrop-filter: var(--dc-blur-xl);
backdrop-filter: var(--dc-blur-xl);
box-shadow: var(--dc-shadow-lg), var(--dc-shadow-inset-top);
}
/* Kółko pod sygnetem. flex: none, żeby nie ścisnęło się przy długim tekście. */
.dc-hero__badge-mark {
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: var(--dc-space-24);
height: var(--dc-space-24);
border-radius: var(--dc-radius-full);
background-color: var(--dc-accent-a15);
}
/* Rozmiar sygnetu niosą atrybuty width/height w znaczniku, a base.css
dokłada height: auto — dlatego tutaj nie ma ani jednej reguły na ![]()
.
Powtórzenie tych liczb w CSS dałoby dwa miejsca prawdy dla jednej. */
/* Wersaliki i rozstrzelenie robią z niego etykietę, nie zdanie.
Kolor to --dc-accent-strong, a NIE --dc-accent-text mimo makiety:
przy 12 px obowiązuje próg 4,5:1, którego jaśniejsze złoto nie osiąga
(reguła J). Pomiar na złożonym tle w raporcie. */
.dc-hero__badge-text {
font-size: var(--dc-text-sm);
font-weight: var(--dc-weight-medium);
letter-spacing: var(--dc-tracking-wider);
text-transform: uppercase;
color: var(--dc-accent-strong);
}
/* ==========================================================================
3. NAGŁÓWEK I AKAPIT
========================================================================== */
/* Jedyna właściwość, jaką h1 dostaje od sekcji. Krój, --dc-display-1
(clamp 40->58 px, dokładnie tyle co makieta), wagę 800, interlinię,
światło międzyliterowe, kolor i text-wrap: balance ma już z base.css. */
.dc-hero__heading {
margin-block-end: var(--dc-space-22);
}
/* Druga linia nagłówka. --dc-accent-strong jak każdy złoty tekst na jasnym
tle (design-audit.md, C.3). Do partii 3 stała na --dc-accent-text
(#9a8230, 3,30:1 — dla nagłówka od 40 px wystarczające), ale była jednym
z pięciu tekstów na tym odcieniu obok 65 na --dc-accent-strong: jedna
rola, dwa odcienie. Tokenu w motywie jasnym już nie ma. */
.dc-hero__heading-accent {
color: var(--dc-accent-strong);
}
/* Szerokość ograniczona, żeby wiersz nie robił się dłuższy, niż da się
wygodnie przeczytać — makieta trzyma tu 480 px, czyli --dc-measure-md
co do piksela. Interlinii nie deklarujemy: body ma --dc-leading-relaxed
(1.6) jako liczbę, więc akapit liczy ją od własnego rozmiaru. */
.dc-hero__lead {
max-width: var(--dc-measure-md);
margin-block-end: var(--dc-space-32);
font-size: var(--dc-text-3xl);
color: var(--dc-text-muted);
}
/* ==========================================================================
4. WEZWANIA DO DZIAŁANIA
========================================================================== */
.dc-hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--dc-space-14);
}
/* Wspólna geometria obu przycisków. Makieta różnicuje padding boczny
(28 px kontra 26 px) — to szum eksportu, oba wpadają w --dc-space-28
(reguła 15).
text-decoration: none i własny kolor są konieczne, bo base.css nadaje
każdemu złoty kolor i podkreślenie. */
.dc-hero__cta {
display: inline-flex;
align-items: center;
gap: var(--dc-space-8);
padding: var(--dc-space-16) var(--dc-space-28);
border-radius: var(--dc-radius-16);
font-size: var(--dc-text-lg);
line-height: var(--dc-leading-none);
text-decoration: none;
transition:
background-color var(--dc-duration-base) var(--dc-ease),
border-color var(--dc-duration-base) var(--dc-ease),
color var(--dc-duration-base) var(--dc-ease),
box-shadow var(--dc-duration-base) var(--dc-ease),
transform var(--dc-duration-fast) var(--dc-ease-out);
}
/* Kliknięcie = nacisk: zmniejszenie plus cień wciśnięcia zamiast
rozjaśnienia od góry — jedyna transformacja dozwolona na elementach
klikalnych (design-audit.md, C.2). .97, nie .96 — najmniejszy przycisk
ma 42 px i przy .96 traci 1,7 px na krawędź, widać drżenie tekstu. */
.dc-hero__cta:active {
transform: scale(0.97);
}
/* base.css daje :focus-visible promień --dc-radius-6, co ścięłoby rogi
pigułki na czas fokusu. Zapis niżej przywraca promień przycisku
i bije base'a wyższą specyficznością (0,2,0 wobec 0,1,0) — nie licząc
na to, że sekcje wczytują się później (reguła 8). Obwódka zostaje na
zewnątrz elementu, bo tu nic jej nie przycina, inaczej niż w faq. */
.dc-hero__cta:focus-visible {
border-radius: var(--dc-radius-16);
}
/* Główne wezwanie. Wypełnienie bierze --dc-gradient-cta, token dodany dla
tej roli: w motywie jasnym jest tożsamy ze złotym tintem nagłówka,
w ciemnym staje się pełnym złotem, bo tint pod ciemnym tekstem dałby
1,8:1 (patrz tokens.css). Tekst to --dc-on-accent, czyli odcień, który
tokens.css wprowadził właśnie po to, żeby główne CTA przechodziło próg. */
.dc-hero__cta--primary {
border: var(--dc-border) solid var(--dc-accent-a50);
background-image: var(--dc-gradient-cta);
color: var(--dc-on-accent);
font-weight: var(--dc-weight-bold);
-webkit-backdrop-filter: var(--dc-blur-md);
backdrop-filter: var(--dc-blur-md);
box-shadow: var(--dc-shadow-accent);
}
/* Najazd: tint CIEMNIEJE, bez uniesienia. Gradient CTA jest półprzezroczysty
(w jasnym .62 -> .36), więc złoto a50 podłożone POD nim jako
background-color prześwituje i pogłębia tint — mechanizm „wciśnięcia"
z .dc-header__ai, bez nowego tokenu gradientu. W ciemnym motywie gradient
jest pełnym złotem, więc podkład nie zmienia nic — tak ma być
(design-audit.md, C.1: „w D pełne złoto bez zmiany").
Deklaracja koloru jest tu OBOWIĄZKOWA, choć wygląda na powtórzenie:
base.css ma a:hover { color: --dc-accent-strong } o specyficzności
(0,1,1), czyli WYŻSZEJ niż sama klasa. Bez tej linii tekst przycisku
zmieniałby pod kursorem kolor na złoty. */
.dc-hero__cta--primary:hover {
background-color: var(--dc-accent-a50);
color: var(--dc-on-accent);
}
.dc-hero__cta--primary:active {
box-shadow: var(--dc-shadow-accent), var(--dc-shadow-inset-press);
}
/* Drugie wezwanie — szkło bez wypełnienia. */
.dc-hero__cta--secondary {
border: var(--dc-border) solid var(--dc-border-subtle);
background-color: var(--dc-surface-glass);
color: var(--dc-text);
font-weight: var(--dc-weight-medium);
-webkit-backdrop-filter: var(--dc-blur-sm);
backdrop-filter: var(--dc-blur-sm);
}
/* Pod kursorem przycisk się ODWRACA. Para --dc-surface-inverse
/ --dc-surface jest jedyną w tokenach, która robi to poprawnie w OBU
motywach: w jasnym daje ciemny przycisk z białym tekstem (tak chce
makieta), w ciemnym jasny przycisk z ciemnym tekstem.
Makieta w motywie ciemnym zostawia przycisk ciemnym (#1a1a1a) z jasnym
tekstem, czyli nie odwraca go wcale. Nie przenosimy tego, bo para
--dc-surface-inverse + --dc-text-on-dark, która by to dała, jest wewnętrznie
niespójna: pierwszy token przełącza się z motywem, drugi zawsze zostaje
jasny — w motywie ciemnym wyszedłby jasny tekst na jasnym tle.
Zgłoszone w raporcie jako usterka tokenów, nie naprawiane tutaj. */
.dc-hero__cta--secondary:hover {
border-color: var(--dc-surface-inverse);
background-color: var(--dc-surface-inverse);
color: var(--dc-surface);
}
.dc-hero__cta--secondary:active {
box-shadow: var(--dc-shadow-inset-press);
}
/* ==========================================================================
5. LINIJKA CENOWA
========================================================================== */
.dc-hero__price {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--dc-space-8);
margin-block-start: var(--dc-space-14);
font-size: var(--dc-text-base);
color: var(--dc-text-subtle);
}
/* Sama kwota wybija się krojem nagłówkowym i pełnym kontrastem tekstu —
to jedyna liczba, którą czytelnik ma z tej linijki zapamiętać. */
.dc-hero__price-value {
font-family: var(--dc-font-display);
font-weight: var(--dc-weight-bold);
color: var(--dc-text);
}
/* Kropka rozdzielająca. Złoto jest tu czystą DEKORACJĄ, nie tekstem,
więc zostaje przy --dc-accent (reguła J). Znak jest aria-hidden,
czytnik ekranu go nie przeczyta. */
.dc-hero__price-separator {
color: var(--dc-accent);
}
/* ==========================================================================
6. KOLUMNA ZDJĘCIA
isolation: isolate zamyka warstwy we własnym kontekście nakładania —
bez tego sąsiednia sekcja mogłaby wjechać między poświatę a produkt.
ŻADNA WARSTWA NIE MA z-index. Wewnątrz tego kontekstu elementy
pozycjonowane bez z-index malują się w kolejności dokumentu, więc
o warstwach decyduje kolejność znaczników w hero.php (poświata, cień,
worek, karta, plakietka). Dlatego zdjęcie dostaje position: relative:
element statyczny malowałby się POD elementami pozycjonowanymi,
czyli schowałby się za własną poświatą. Makietowe z-index 2 i 4 są
w ten sposób niepotrzebne — a nie trzeba wymyślać tokenu warstwy
dla wartości pomiędzy --dc-z-raised a --dc-z-sticky.
========================================================================== */
.dc-hero__figure {
position: relative;
isolation: isolate;
display: flex;
align-items: center;
justify-content: center;
}
/* Złota poświata za produktem. Okrąg większy od zdjęcia, rozmyty tak,
że nie ma widocznej krawędzi. max 108% pilnuje, żeby na wąskiej kolumnie
nie wystawał poza nią bardziej niż w makiecie.
Scalenia: 470 -> --dc-measure-md (skupisko 460/470/480/520),
blur(20px) -> --dc-blur-lg (który dokłada saturate(165%), przez co złoto
jest odrobinę żywsze niż w makiecie — różnica na warstwie rozmytej
do niewidoczności). */
.dc-hero__glow {
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
width: min(var(--dc-measure-md), 108%);
aspect-ratio: 1;
transform: translate(-50%, -50%);
border-radius: var(--dc-radius-full);
background-image: radial-gradient(circle, var(--dc-accent-a30), var(--dc-accent-a00) 66%);
filter: var(--dc-blur-lg);
pointer-events: none;
}
/* Cień na podłożu — to on stawia worek na ziemi zamiast zawieszać go
w powietrzu. Kanał barwy z --dc-shadow-color, więc w motywie jasnym
jest chłodno-granatowy (30,40,60), a w ciemnym czarny — bez ani jednej
reguły [data-theme]. Literałem jest sama alfa; dlaczego tak, patrz
nagłówek pliku, punkt 3.
Scalenia: 330 -> --dc-measure-xs, 44 -> --dc-space-48, blur(11px)
-> --dc-blur-sm. */
.dc-hero__ground {
position: absolute;
inset-block-end: var(--dc-space-56);
inset-inline-start: 50%;
width: min(var(--dc-measure-xs), 80%);
height: var(--dc-space-48);
transform: translateX(-50%);
border-radius: var(--dc-radius-full);
background-image: radial-gradient(
ellipse,
rgba(var(--dc-shadow-color), 0.3),
rgba(var(--dc-shadow-color), 0) 70%
);
filter: var(--dc-blur-sm);
pointer-events: none;
}
/* Zdjęcie produktu.
*
* Makieta ustala WYSOKOŚĆ (510 px) i pozwala szerokości wyniknąć z proporcji.
* Tutaj odwrotnie: ustalamy szerokość, a wysokość liczy przeglądarka
* z atrybutów width/height znacznika. Powód jest praktyczny — przy stałej
* wysokości i max-width: 100% obraz na wąskiej kolumnie zostaje wpisany
* w prostokąt o niepasujących proporcjach i trzeba go ratować object-fit.
* Przy stałej szerokości nic takiego się nie dzieje: zdjęcie skaluje się
* proporcjonalnie na każdej szerokości i nigdy nie ma czego dopasowywać.
* Makietowe 383 px szerokości (510 x proporcja pliku) scala się do
* --dc-measure-sm = 400 px, czyli o 4% więcej.
*
* Cień rzucany bierze --dc-shadow-2xl w całości. drop-shadow() przyjmuje
* dokładnie tę składnię co box-shadow bez rozmycia bocznego, a nasze tokeny
* cieni rozmycia bocznego nie mają — więc token wchodzi tu bez przeróbek
* i, co ważniejsze, sam przełącza kolor razem z motywem.
* Dlaczego drop-shadow, a nie box-shadow: box-shadow obrysowałby PROSTOKĄT
* obrazu, a drop-shadow idzie po kształcie widocznym w kanale alfa, czyli
* po sylwetce worka. */
.dc-hero__image {
position: relative;
width: 100%;
max-width: var(--dc-measure-sm);
height: auto;
filter: drop-shadow(var(--dc-shadow-2xl));
animation: dcHeroFloatSlow var(--dc-duration-float-slow) var(--dc-ease) infinite;
}
/* ==========================================================================
7. KARTA „ŚWIADECTWO JAKOŚCI"
========================================================================== */
/* Karta wychodzi lewą krawędzią poza kolumnę (makietowe -10 px), przez co
nachodzi na zdjęcie i czyta się jako etykieta przypięta do produktu,
a nie osobny kafel obok.
Scalenia: szerokość 214 -> --dc-grid-min-sm (220 px).
TŁO JEST NIEPRZEZROCZYSTE (--dc-surface), a nie szklane jak w makiecie,
i to jest ODSTĘPSTWO WYMUSZONE POMIAREM, nie preferencja.
Szkło pożycza kontrast od tego, co leży pod spodem. Dla karty stojącej
na tle strony to bezpieczne, bo tło strony jest znane. Ta karta leży
na ZDJĘCIU, a piksele zdjęcia nie są znane w chwili pisania CSS-u —
i to nie jest teoria: --dc-surface-glass w motywie ciemnym to
rgba(255,250,242,.05), czyli 5% bieli. Nad ciemnym tłem strony wystarcza,
ale nad białym workiem nie robi nic, więc jasny tekst karty lądował
na jasnym zdjęciu. Sprawdzone zrzutami przy 390 i 1440 px: w obu wypadkach
prawa połowa wierszy („26–28", „< 5%") była wyprana do granicy czytelności.
Pomiar wyliczany z tokenów tego NIE WYŁAPUJE, bo dla niego tłem jest
token, a nie fotografia — złapały to dopiero oczy na zrzucie.
Dlatego panel niesie własne tło. Zniknął przy okazji backdrop-filter:
nad tłem nieprzezroczystym rozmycie nie ma czego rozmywać, więc zostałby
martwym zapisem. W motywie jasnym różnica jest prawie niewidoczna
(biel .86 -> biel 1 na białym worku), w ciemnym to zmiana widoczna
i zamierzona. Zgłoszone w raporcie jako kandydat na regułę:
„panel leżący na zdjęciu nie może być szklany". */
.dc-hero__cert {
position: absolute;
inset-block-end: var(--dc-space-48);
inset-inline-start: calc(var(--dc-space-10) * -1);
width: var(--dc-grid-min-sm);
padding: var(--dc-space-18) var(--dc-space-20);
border: var(--dc-border) solid var(--dc-border-subtle);
border-radius: var(--dc-radius-18);
background-color: var(--dc-surface);
box-shadow: var(--dc-shadow-2xl), var(--dc-shadow-inset-top);
}
.dc-hero__cert-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--dc-space-10);
margin-block-end: var(--dc-space-14);
}
.dc-hero__cert-label {
font-size: var(--dc-text-2xs);
font-weight: var(--dc-weight-medium);
letter-spacing: var(--dc-tracking-wider);
text-transform: uppercase;
color: var(--dc-text-subtle);
}
/* Kwadracik z ptaszkiem. Makieta daje mu czarne tło (#0e0e0e) i to samo
czarne tło w motywie ciemnym — czyli kolor, który się nie przełącza.
Żaden token nie jest ciemny w obu motywach, a --dc-surface-inverse by się
odwrócił i zostawił złoty ptaszek na jasnym tle przy 2,0:1. Zamiast
wymyślać token pod jeden kwadrat (reguła 15), znaczek bierze ten sam
złoty motyw, co ikony w kaflach facts: tło --dc-accent-a15, obwódka
--dc-border-accent, kreska --dc-accent-strong. Działa w obu motywach
i jest już wzorcem w tym projekcie. Odstępstwo zgłoszone w raporcie.
Kreska ikony bierze ten sam odcień co złoty tekst — od partii 3 audytu
(design-audit.md, C.3) --dc-accent-text w motywie jasnym nie istnieje. */
.dc-hero__cert-mark {
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: var(--dc-space-28);
height: var(--dc-space-28);
border: var(--dc-border) solid var(--dc-border-accent);
border-radius: var(--dc-radius-8);
background-color: var(--dc-accent-a15);
color: var(--dc-accent-strong);
}
/* Wiersz parametru. align-items: baseline, a nie center: nazwa i wartość
mają różne rozmiary i kroje, więc wyrównanie do środka pudełek
rozjechałoby je optycznie — linia pisma jest tym, co oko porównuje. */
.dc-hero__param {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--dc-space-10);
padding-block: var(--dc-space-8);
border-block-end: var(--dc-border) solid var(--dc-border-line);
}
/* Ostatni wiersz bez kreski — kreska rozdziela wiersze, a pod ostatnim
nie ma czego rozdzielać; zostałaby podkreśleniem karty. */
.dc-hero__param:last-child {
border-block-end: 0;
}
.dc-hero__param-label {
font-size: var(--dc-text-sm);
color: var(--dc-text-muted);
}
/* tabular-nums na WSZYSTKICH wartościach, nie tylko na liczbowej: cyfry
o stałej szerokości ustawiają się w pionową kolumnę, przez co karta
czyta się jak tabela wyników, a nie jak lista zdań. */
.dc-hero__param-value {
font-family: var(--dc-font-display);
font-size: var(--dc-text-md);
font-weight: var(--dc-weight-black);
font-variant-numeric: tabular-nums;
color: var(--dc-text);
}
/* ==========================================================================
8. PLAKIETKA WAGI
========================================================================== */
/* Wychodzi prawą krawędzią poza kolumnę o --dc-space-6, symetrycznie do
karty po lewej. Scalenia: top 42 -> --dc-space-40, promień 15
-> --dc-radius-16, padding 11 -> --dc-space-12.
Tło nieprzezroczyste z tego samego powodu co przy karcie wyżej —
plakietka też leży na zdjęciu, a przy 390 px siedzi wprost na białej
części worka. */
.dc-hero__weight {
position: absolute;
inset-block-start: var(--dc-space-40);
inset-inline-end: calc(var(--dc-space-6) * -1);
display: inline-flex;
align-items: center;
gap: var(--dc-space-10);
padding: var(--dc-space-12) var(--dc-space-16);
border: var(--dc-border) solid var(--dc-border-subtle);
border-radius: var(--dc-radius-16);
background-color: var(--dc-surface);
box-shadow: var(--dc-shadow-xl), var(--dc-shadow-inset-top);
animation: dcHeroFloat var(--dc-duration-float) var(--dc-ease) infinite;
}
/* Studzienka ikony jak każda w motywie: tło a15 Z obwódką a30
(design-audit.md, C.8; partia 6) — to była jedyna studzienka bez kreski.
Promień r8 „małej studzienki" zostaje: reguła zagnieżdżenia (C.9) dałaby
przy odstępie 13 px w ramce r16 promień 3, ale audyt (B.9) nie policzył
tej pary jako błędu, a r3 nie jest szczeblem drabinki. */
.dc-hero__weight-mark {
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: var(--dc-space-32);
height: var(--dc-space-32);
border: var(--dc-border) solid var(--dc-border-accent);
border-radius: var(--dc-radius-8);
background-color: var(--dc-accent-a15);
}
/* Waga i podpis stoją jeden pod drugim, więc oba są blokami.
line-height: 1 na wadze, żeby podpis przykleił się do niej
zamiast odpływać na interlinii odziedziczonej z body (1,6). */
.dc-hero__weight-value {
display: block;
font-family: var(--dc-font-display);
font-size: var(--dc-text-lg);
font-weight: var(--dc-weight-black);
line-height: var(--dc-leading-none);
color: var(--dc-text);
}
.dc-hero__weight-note {
display: block;
margin-block-start: var(--dc-space-2);
font-size: var(--dc-text-2xs);
line-height: var(--dc-leading-none);
color: var(--dc-text-subtle);
}
/* ==========================================================================
9. UNOSZENIE
Dwa ruchy o różnym tempie: worek płynie wolno i lekko się kołysze,
plakietka unosi się szybciej i bez obrotu. Rozjazd tempa jest celowy —
gdyby oba szły równo, całość wyglądałaby jak jeden przesuwany obrazek.
Klatki zostają W TYM PLIKU, a nie w base.css obok dcRingSpin, mimo że
makieta używa dcFloat i dcFloatSlow także w product, starter-kit
i loyalty-card. Reguła 18: wydzielamy przy TRZECIM wystąpieniu, bo
dopiero wtedy widać, która wartość jest zmienną. To jest wystąpienie
pierwsze. Kandydat do przeniesienia zgłoszony w raporcie.
Kąty obrotu to geometria ruchu, nie wartości projektowe — dlatego liczby,
tak samo jak kąty gradientu w components/ring.css.
========================================================================== */
@keyframes dcHeroFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(calc(var(--dc-space-12) * -1));
}
}
@keyframes dcHeroFloatSlow {
0%,
100% {
transform: translateY(0) rotate(-1deg);
}
50% {
transform: translateY(calc(var(--dc-space-18) * -1)) rotate(1deg);
}
}
/* ==========================================================================
10. RUCH OGRANICZONY
Sekcja animuje, więc dokłada własny blok (reguła 12). Oba ruchy są
CIĄGŁE, więc globalne ścięcie czasu z base.css do 0.01 ms nie wystarcza:
dla pętli znaczy ono „doskocz natychmiast do końca i stój", a końcem
klatki 100% jest wprawdzie pozycja wyjściowa, ale przy iteracji ściętej
do jednej element i tak przechodzi przez cały ruch w jednej klatce.
Skrót animation: none zeruje animation-name, którego tamten !important
nie obejmuje — worek i plakietka po prostu stoją.
========================================================================== */
@media (prefers-reduced-motion: reduce) {
.dc-hero__image,
.dc-hero__weight {
animation: none;
}
}