/** * first-burn.css — „Pierwsze palenie krok po kroku": ciemny panel * z czterema krokami rozpalania. * * Wymaga tokens.css, base.css i components/ring.css. Wszystko pod prefiksem * .dc-first-burn__, nic stąd nie wycieka na cudze znaczniki. Jedyny wyjątek * to .dc-ring (komponent), dostrajany WYŁĄCZNIE w selektorze potomnym pod * prefiksem sekcji. * * PANEL JEST CIEMNY W OBU MOTYWACH STRONY — piąty taki przypadek po * help-cta, fuel-switch, loyalty-cta i about (patrz docblock first-burn.php). * Wynikają z tego te same rzeczy co w about.css i fuel-switch.css: * * 1. color-mix() zamiast tokenów z rodziny --dc-surface-glass / * --dc-border-subtle. Tamte są PODMIENIANE między motywami i w motywie * jasnym dałyby biel tam, gdzie ma być przygaszona biel na czerni. * color-mix(in srgb, var(--dc-text-on-dark) N%, transparent) daje biel * z alfą W OBU MOTYWACH, bez nowego tokenu i bez wpisanego koloru — * grep po hex/rgb go nie widzi. Technika z help-cta.css. * * 2. Złoto bierze --dc-accent, nie --dc-accent-strong z reguły J. * Reguła J broni kontrastu złota na tle JASNYM, a tła jasnego pod tym * tekstem nigdy nie ma. Makieta ma tu #e8cf8a (--dc-accent-light); * scalone do --dc-accent zgodnie z design-audit.md C.3, gdzie * fuel-switch przeszedł tę samą drogę (#E8CF8A -> #C9A84C), a * --dc-accent-light został wyłącznie przystankiem --dc-gradient-gold. * * 3. ANI JEDNEJ reguły [data-theme]. Tło panelu jest nieprzezroczystym * obrazem, a tekst i złoto stoją na tokenach jasnych w obu motywach. * * TŁO I ROZBŁYSK POWTARZAJĄ fuel-switch.css CO DO LICZBY. Makieta zapisała * tu ten sam przepis (ten sam czteroprzystankowy gradient, ta sama plama * -20% / 50% / 75% / 65% z blur 32 px i tętnem 7 s), więc powtórzone są też * tamte scalenia — inaczej dwa panele o identycznym źródle wyglądałyby * różnie. To DRUGIE wystąpienie obu; reguła 18 każe wydzielać przy trzecim * albo przy pierwszym rozjeździe kopii (zgłoszone w raporcie zadania). * * CO JEST TU LICZBĄ, A NIE TOKENEM (reguła 17, punkt 5 — grep ma coś * znaleźć i te trafienia są świadome), z tymi samymi powodami co * w fuel-switch.css i about.css: * * a) TŁO PANELU (#2e2318 / #1a1208 / #0d0b07 / #0a0907). Dwa ostatnie * odcienie są ciemniejsze niż najciemniejsza powierzchnia palety * w motywie jasnym (--dc-surface-inverse, #1C1A17), więc nie da się * ich zbudować alfą nałożoną na token — kompozycja nigdy nie zejdzie * poniżej podłoża. Cztery przystanki, nie dwa: środkowe robią całą * głębię (to samo rozstrzygnięcie co w fuel-switch). * * b) `filter: blur()` Z LICZBĄ, nie --dc-blur-*. Rodzina --dc-blur-* * niesie saturate() (md 175%, lg 165%, xl 190%), którego makieta nie * ma w tej warstwie — a plama jest złota, więc podbicie nasycenia * idzie wprost na panel. Jedyny czysty token, --dc-blur-sm * (blur(10px)), jest tu o 22 px za wąski. */ /* ========================================================================== 1. PANEL ========================================================================== */ /* .dc-first-burn nie ma tu żadnej deklaracji — szerokość i marginesy boczne daje .dc-container, pionowy oddech .dc-section, obie z base.css bez modyfikacji (reguła 8). Klasa zostaje w znaczniku jako nazwa bloku. Gradient jest NIEPRZEZROCZYSTY na całej powierzchni — ostatni przystanek rozlewa się poza elipsę — więc background-color jest tylko awaryjny, a reguły [data-theme] panel nie potrzebuje wcale. BEZ overflow: hidden na panelu — poświata obwódki leży 4 px poza obrysem (design-audit.md, partia 6); przycina dopiero owijka __atmosphere. Scalenia: promień 30 px -> --dc-radius-28 (skala tokenu obejmuje 30); padding clamp(40px, 5vw, 60px) / clamp(24px, 4vw, 48px) złożony z tokenów, sufit 60 -> --dc-space-56; cień 0 40px 100px rgba(0,0,0,.4) -> --dc-shadow-2xl, największy w zestawie i ten sam, który wzięły fuel-switch, loyalty-cta i about (C.4, stopień 4 — panel wystawowy). */ .dc-first-burn__panel { position: relative; isolation: isolate; padding-block: clamp(var(--dc-space-40), 5vw, var(--dc-space-56)); padding-inline: clamp(var(--dc-space-24), 4vw, var(--dc-space-48)); border-radius: var(--dc-radius-28); background-color: #0a0907; background-image: radial-gradient( ellipse 120% 90% at 50% -8%, #2e2318 0%, #1a1208 38%, #0d0b07 68%, #0a0907 100% ); box-shadow: var(--dc-shadow-2xl); } /* ========================================================================== 2. OBWÓDKA — DOSTROJENIE KOMPONENTU Warstwy wstawia znacznik: poświata, refleks i łuk. Makieta rysuje obwódkę starą konstrukcją w OBU wersjach — brany jest zapis komponentu, bo zachodzi rozszerzenie reguły 21 z 2026-08-29 (patrz docblock first-burn.php). Cena tego wyboru jest zmierzona i zapisana tam, gdzie ją zmierzono (section-conventions.md, reguła 21): kreska schodzi z 2 px na 1,5 px, a złoto blednie z rgba(201,168,76,…) do --dc-ring-glow. Obrót 5 s scalony do --dc-duration-ring (7 s) regułą 15 — to samo scalenie co w fuel-switch i about. ========================================================================== */ /* Refleks jest w komponencie widoczny WYŁĄCZNIE w motywie ciemnym: na jasnym tle strony karta odcina się sama. Ten panel jest ciemny w obu motywach, więc obowiązuje go układ warstw motywu ciemnego — zawsze. To różnica NIEKOLOROWA (obecność warstwy), czyli typ wyjątku, który reguła 10 każe trzymać w pliku sekcji. Tak samo w fuel-switch.css i about.css. */ .dc-first-burn__panel .dc-ring--specular { display: block; } /* FAZA I ZWROT — numer 9 z rejestru w components/ring.css: start o 9/12 obrotu (270°), nieparzysty numer, czyli obrót W LEWO. Rejestr ma zajęte wszystkie dwanaście numerów, więc obowiązuje reguła „numer, którego nie ma na TEJ SAMEJ stronie": 9 nosi how-to-order, sekcja wyłącznie strony głównej, która z kartą produktu nigdy nie stoi razem. Ten sam sposób wyboru, co przy product-hero (4 po origin) i product-details (2 po about). Na karcie produktu zajęte są 4, 2, 6 (loyalty-cta), 0 (help-cta) oraz 11 i 8 wewnątrz product-details. Pokrętła na panelu, nie na warstwie — zmienne własne dziedziczą się w dół. */ .dc-first-burn__panel { --dc-ring-spin: dcRingSpinRev; --dc-ring-delay: calc(var(--dc-duration-ring) * -9 / 12); } /* ========================================================================== 3. ATMOSFERA — jedna plama z makiety: złoty rozbłysk u góry Leży pod treścią (--dc-z-base) i nie łapie kursora. ========================================================================== */ /* WARSTWA ATMOSFERY — owijka plamy. Absolutna, równa z panelem, z jego promieniem, pod treścią; to ona przycina plamę, a nie panel, bo panel z overflow: hidden obciąłby poświatę obwódki (partia 6 audytu). */ .dc-first-burn__atmosphere { position: absolute; inset: 0; z-index: var(--dc-z-base); overflow: hidden; border-radius: inherit; pointer-events: none; } /* Rozbłysk centralny u góry — geometria w procentach panelu, bo taka jest makieta i bo dzięki temu skaluje się razem z nim bez breakpointu. Przystanki z drabinki złota: makietowe .18 -> --dc-accent-a20, rgba(180,130,40,.06) -> --dc-accent-a05 (literał z tej rodziny wskazany w design-audit.md C.3 jako do zamiany na --dc-accent-aNN). Plama gaśnie do --dc-accent-a00, a nie do `transparent`, żeby nie interpolować przez przezroczystą czerń (uwaga z tokens.css przy --dc-accent-a00). Rozmycie jest liczbą — nagłówek pliku, punkt b. Tętno 7 s trafia w --dc-duration-float co do sekundy, krzywa ease-in-out scalona do --dc-ease. Wszystko identyczne z .dc-fuel-switch__glow--crown. */ .dc-first-burn__glow { position: absolute; z-index: var(--dc-z-base); inset-block-start: -20%; inset-inline-start: 50%; width: 75%; height: 65%; transform: translateX(-50%); background-image: radial-gradient( ellipse, var(--dc-accent-a20), var(--dc-accent-a05) 45%, var(--dc-accent-a00) 70% ); filter: blur(32px); pointer-events: none; animation: dcFirstBurnGlow var(--dc-duration-float) var(--dc-ease) infinite; } /* ========================================================================== 4. NAGŁÓWEK SEKCJI Wyśrodkowany i ograniczony do 640 px — --dc-measure-lg trafia w makietę dokładnie. Odstęp pod nagłówkiem 44 -> --dc-space-48 (skala tokenu obejmuje 44), jak w how-to-order i fuel-switch. ========================================================================== */ .dc-first-burn__header { position: relative; z-index: var(--dc-z-raised); max-width: var(--dc-measure-lg); margin-inline: auto; margin-block-end: var(--dc-space-48); text-align: center; } /* Nadtytuł jest samym tekstem, bez pigułki i bez kropki — jak w about, help-cta i loyalty-cta. Rozmiar 12 px, waga 600 i trakt .16em trafiają w jedną czwórkę nadtytułu z design-audit.md C.8 (partia 6): 12 / 600 / --dc-tracking-widest i odstęp 14 do h2. Złoto: --dc-accent, patrz nagłówek pliku, punkt 2. */ .dc-first-burn__eyebrow { 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); } /* Makietowe clamp(28px, 3.6vw, 42px) to --dc-display-3 (clamp(30px, 3.8vw, 40px)) — sufit 42 jest jednym z trzech sufitów, które ten token scala (tokens.css: „scala sufity 44/42/40"), a podłoga różni się o 2 px. Inaczej niż w about, gdzie żaden stopień nie trafiał i clamp wrócił z makiety: tam --dc-display-4 był o 10% za mały, tu różnica na suficie to 5%, czyli szum eksportu z reguły 15. Rozmiar dziedziczy się z base.css razem z wagą, krojem i traktem — sekcji zostaje sam odstęp i kolor. */ .dc-first-burn__heading { margin-block-end: var(--dc-space-14); color: var(--dc-text-on-dark); } /* Akapit prowadzący: makietowe rgba(255,255,255,.6) to co do jedności --dc-text-on-dark-muted, więc token, a nie color-mix. */ .dc-first-burn__lead { font-size: var(--dc-text-xl); line-height: var(--dc-leading-relaxed); color: var(--dc-text-on-dark-muted); } /* ========================================================================== 5. SIATKA KROKÓW Siatka auto-fit bez breakpointu (reguła 9) — makietowe minmax(240px) trafia w --dc-grid-min-sm (220 px; tokens.css scala tam 240). Liczba kolumn na trzech szerokościach zmierzona — tabela w raporcie. min(..., 100%) jest OBOWIĄZKOWE, tak samo jak w .dc-grid z base.css: bez niego ścieżka minimalna toru jest przy 390 px szersza niż wnętrze panelu i kafle wychodzą poza jego obrys. Sam auto-fit tego nie chroni — zwija liczbę kolumn, nie ich minimalną szerokość. Odstęp 18 px trafia w --dc-space-18 bez scalania. ========================================================================== */ .dc-first-burn__list { position: relative; z-index: var(--dc-z-raised); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--dc-grid-min-sm), 100%), 1fr)); gap: var(--dc-space-18); } /* ========================================================================== 6. KAFEL KROKU Szkło na czerni budowane przez color-mix (nagłówek pliku, punkt 1), nie przez --dc-surface-glass: tamten token jest w motywie jasnym bielą i dałby białą kartę na czarnym panelu. BEZ CIENIA — reguła z design-audit.md C.4: elementy NA czarnym panelu cienia nie mają, krawędź daje im obwódka biel .1 i tło. Makieta też żadnego tu nie rysuje. To różnica wobec how-to-order, gdzie kafel stoi na jasnej karcie i bierze --dc-shadow-lg. Scalenia: padding 28px 26px -> --dc-space-28 na obu osiach (tokens.css scala 26 do 28); promień 18 px trafia w --dc-radius-18 bez scalania. ========================================================================== */ .dc-first-burn__item { padding: var(--dc-space-28); border: var(--dc-border) solid color-mix(in srgb, var(--dc-text-on-dark) 10%, transparent); border-radius: var(--dc-radius-18); background-color: color-mix(in srgb, var(--dc-text-on-dark) 5%, transparent); } /* Makieta ma na kaflu najazd kursorem (obwódka na złoto, tło na złoto .06) z transition. Nie przenosimy: kafel nie jest odnośnikiem ani przyciskiem, nie da się w niego kliknąć, a runtime makiety (support.js) nigdy tych stylów nie wyrenderował — style-hover jest wymyślonym atrybutem (reguła 14). Reakcja na kursor na elemencie nieinteraktywnym byłaby fałszywą obietnicą, więc nie przenosimy ani zmiany koloru, ani samego transition. To samo rozstrzygnięcie co w how-to-order. */ /* ========================================================================== 7. TREŚĆ KAFLA ========================================================================== */ /* Numer kroku — czysta dekoracja, aria-hidden w znaczniku. Znaczenie kolejności niesie już pozycja w
    (patrz docblock first-burn.php). Makietowe 40 px trafia w --dc-numeral-md co do piksela — token, którego komentarz w tokens.css mówi wprost „numer kroku". Odstęp 14 -> --dc-space-14, alfa .5 -> --dc-accent-a50. */ .dc-first-burn__numeral { display: block; margin-block-end: var(--dc-space-14); font-family: var(--dc-font-display); font-weight: var(--dc-weight-black); font-size: var(--dc-numeral-md); line-height: var(--dc-leading-none); color: var(--dc-accent-a50); } /* h3 bierze wagę, krój i interlinię z base.css — tu tylko rozmiar (17 px, dokładne trafienie w --dc-text-2xl, bez scalania), odstęp do akapitu pod spodem i kolor na ciemnym tle. */ .dc-first-burn__title { margin-block-end: var(--dc-space-8); font-size: var(--dc-text-2xl); color: var(--dc-text-on-dark); } /* Akapit kroku: 13,5 px -> --dc-text-base (13 px; tokens.css scala 13,5), interlinia 1,6 -> --dc-leading-relaxed. Makietowe rgba(255,255,255,.58) to --dc-text-on-dark-muted (.6) w granicach szumu alfy z reguły 15. */ .dc-first-burn__text { font-size: var(--dc-text-base); line-height: var(--dc-leading-relaxed); color: var(--dc-text-on-dark-muted); } /* ========================================================================== 8. ODESŁANIE DO INSTRUKCJI KOTŁA Jedyny element spoza makiety (patrz docblock first-burn.php). Wyrównany jak nagłówek — do środka — i o stopień drobniejszy od akapitu kroku, bo to przypis do całej sekcji, a nie jej treść. Kolor --dc-text-on-dark-muted, a NIE -subtle: -subtle (.4) jest w tokens.css opisany jako „tylko tekst duży" (3,66:1), a to jest tekst 12 px. Kontrast policzony w raporcie. ========================================================================== */ .dc-first-burn__note { position: relative; z-index: var(--dc-z-raised); max-width: var(--dc-measure-lg); margin-block-start: var(--dc-space-28); margin-inline: auto; font-size: var(--dc-text-sm); line-height: var(--dc-leading-relaxed); text-align: center; color: var(--dc-text-on-dark-muted); } /* ========================================================================== 9. RUCH — tętno rozbłysku Klatki mieszkają w pliku sekcji, nie w base.css: base.css rejestruje prymitywy używane przez KOMPONENTY (@property --dc-ring, dcRingSpin), a to tętno ma tylko ta sekcja — dokładnie jak dcFuelSwitchGlow w fuel-switch.css i dcAboutBlob w about.css. Wartości wprost z makiety (klatki dcGlow): krycie .35 -> .85 i z powrotem. ========================================================================== */ @keyframes dcFirstBurnGlow { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.85; } } /* Globalny wyłącznik w base.css tnie animation-duration do 0.01ms z jedną iteracją. Dla ruchu CIĄGŁEGO to znaczy „doskocz do końca i stój", czyli dla tej plamy — zamarznięcie na 35% krycia, w połowie oddechu. Skrót animation: none zeruje animation-name, którego tamten !important nie obejmuje (dotyczy tylko czasu i liczby iteracji), więc wygrywa — a że sam element krycia nie deklaruje, opacity wraca do 1 i rozbłysk świeci pełnią, nieruchomo (reguła 12). To samo rozstrzygnięcie co w fuel-switch.css. Obwódki ten blok NIE dotyczy — jej własny stoi w components/ring.css, bo blok wędruje razem z animacją, a animuje ją komponent. */ @media (prefers-reduced-motion: reduce) { .dc-first-burn__glow { animation: none; } }