/** * about.css — „Kim jesteśmy": ciemny panel z nagłówkiem firmowym i trzema * licznikami osiągnięć. * * Wymaga tokens.css, base.css i components/ring.css. Wszystko pod prefiksem * .dc-about__, 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 — czwarty taki przypadek po * help-cta, fuel-switch i loyalty-cta (patrz docblock about.php). Wynikają * z tego te same rzeczy co w loyalty-cta.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. * Makieta ma tu #C9A84C, czyli co do znaku wartość --dc-accent — * tokenu NIEPODMIENIANEGO między motywami (tokens.css, sekcja 11). * Reguła J broni kontrastu złota na tle JASNYM, a tła jasnego pod tym * tekstem nigdy nie ma. To samo rozstrzygnięcie co w loyalty-cta.css. * * 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. * * CO JEST TU LICZBĄ, A NIE TOKENEM (reguła 17, punkt 4 — grep ma coś * znaleźć i te trafienia są świadome). Wszystkie z tego samego powodu, * co w loyalty-cta.css i fuel-switch.css, gdzie stoi ich pełny wywód * (decisions.md, 2026-08-28 — „fuel-switch: atmosfera wprost z makiety"): * * a) TŁO PANELU (#1c1c1c / #0e0e0e). Drugi z tych odcieni jest ciemniejszy * niż najciemniejsza powierzchnia palety w motywie jasnym * (--dc-surface-inverse, #1C1A17), więc nie da się go zbudować alfą * nałożoną na token — kompozycja nigdy nie zejdzie poniżej podłoża. * * 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 (to była przyczyna odrzucenia pierwszej wersji * fuel-switch). Jedyny czysty token, --dc-blur-sm (blur(10px)), jest * tu o 14 px za wąski. * * c) GEOMETRIA PLAMY W PIKSELACH, nie w procentach panelu. To różnica * wobec fuel-switch.css i loyalty-cta.css, gdzie poświaty są * procentowe — tam procenty były w makiecie, tu makieta podaje * 560 × 560 px przy stałym przesunięciu. Procent policzony z tych * pikseli wiązałby rozmiar plamy z WYSOKOŚCIĄ panelu, czyli z długością * tekstu, i przy każdej zmianie treści plama zmieniałaby rozmiar. * * d) ALFA PLAMY Z DRABINKI: makietowe .22 -> --dc-accent-a20 (partia 3 * audytu, design-audit.md, B.3 — przy rozmyciu 24 px dwóch setnych * alfy nie widać; to samo rozstrzygnięcie co w loyalty-cta * i fuel-switch). 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). * * TRZY WARTOŚCI PONIŻEJ WRÓCIŁY DO MAKIETY PO PRZEGLĄDZIE (2026-08-28). * Każda była wcześniej scalona do tokenu i każde z tych scaleń ZMIENIAŁO * WYGLĄD, a reguła 15 pozwala scalać wyłącznie wartości nierozróżnialne — * ten sam wniosek co przy fuel-switch (decisions.md, 2026-08-28, * „atmosfera wprost z makiety"). Zmierzone różnice stoją przy każdej: * * e) NAGŁÓWEK clamp(28px, 3.4vw, 38px). Na --dc-display-4 (sufit 34 px) * był przy 1440 px o 10% mniejszy niż w makiecie; --dc-display-3 * (sufit 40 px) przestrzeliwuje w drugą stronę. Sufit 38 px wraca * w starter-kit-promo i blog-carousel — przy trzecim wystąpieniu * rozstrzygnie się, czy tokens.css potrzebuje własnego stopnia. * * f) SZEROKOŚĆ KOLUMNY TEKSTU 620 px. Na --dc-measure-lg (640 px) akapit * prowadzący łamał się na DWA wiersze zamiast trzech — pierwszy wiersz * kończy się na 625 px, czyli między jedną wartością a drugą — a panel * był przez to o 39 px niższy (395 px wobec makietowych 434 px). * * g) MINIMALNA KOLUMNA SIATKI 180 px. To nie jest różnica rozmiaru, tylko * UKŁADU: na --dc-grid-min-sm (220 px) trzy liczniki przy 768 px stawały * 2+1 zamiast trzech w rzędzie, bo trzy tory po 220 px z odstępami * żądały 700 px przy 608 px dostępnych wewnątrz panelu. */ /* ========================================================================== 1. PANEL ========================================================================== */ /* .dc-about 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, więc background-color jest tylko awaryjny, a reguły [data-theme] panel nie potrzebuje wcale. overflow: hidden — plama atmosfery (sekcja 3) celowo wychodzi poza obrys panelu i musi zostać przycięta jego promieniem. Makieta robi to samo, tyle że na warstwę wyżej, bo tam ten sam overflow obcinał jeszcze obracający się stożek starej obwódki. Scalenia: promień 30 px z makiety jasnej (28 px w ciemnej) -> --dc-radius-28; cień 0 30px 80px rgba(0,0,0,.3) -> --dc-shadow-2xl, największy w zestawie (to samo scalenie co w fuel-switch i loyalty-cta). Padding 56 / 48 px trafia w --dc-space-56 i --dc-space-48 bez scalania. */ .dc-about__panel { position: relative; isolation: isolate; padding-block: var(--dc-space-56); padding-inline: var(--dc-space-48); border-radius: var(--dc-radius-28); background-color: #0e0e0e; background-image: linear-gradient(150deg, #1c1c1c 0%, #0e0e0e 100%); box-shadow: var(--dc-shadow-2xl); } /* ========================================================================== 2. OBWÓDKA — DOSTROJENIE KOMPONENTU Warstwy wstawia znacznik: poświata, refleks i łuk. Wartości makiety ciemnej trafiają w domyślne pokrętła co do jednej: rant 1,5 px (--dc-ring-inset), obrót w prawo (dcRingSpin), gradient refleksu 155deg to co do przecinka --dc-gradient-specular. Jedyna różnica to czas — 9 s w makiecie ciemnej, 5 s w jasnej — scalony do domyślnych 7 s (--dc-duration-ring) zgodnie z regułą 15, tak samo jak w fuel-switch. Poświata (.dc-ring--halo) DOŁOŻONA w partii 6 audytu — odwołanie decyzji z 2026-08-28 „obwódka z makiety ciemnej, bez poświaty" (decisions.md, 2026-08-30). Powód z pomiaru partii 5: kreska łuku jest w obu motywach identyczna co do piksela, ale w motywie jasnym za krawędzią czarnego panelu leży jasna strona (7–10 poziomów kontrastu wobec 237 w ciemnym), więc bez poświaty łuk czyta się jako prześwit tła, nie jako obwódka; help-cta — też czarny w obu motywach — poświatę ma i jako jedyny ciemny panel czytał się w jasnym motywie. W motywie ciemnym komponent chowa poświatę sam (display: none), więc tam nic się nie zmienia. ========================================================================== */ /* 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 loyalty-cta.css. */ .dc-about__panel .dc-ring--specular { display: block; } /* FAZA I ZWROT — numer 2 z rejestru w components/ring.css: start o 2/12 obrotu (60°), parzysty numer, czyli obrót w prawo (domyślny dcRingSpin, wypisany jawnie, żeby rejestr był czytelny u siebie). Liczba jest umowna — znaczy tylko, że żadna inna sekcja jej nie ma; nie zależy od miejsca sekcji na stronie (partia 5 audytu). Pokrętła na panelu, nie na warstwie: zmienne własne dziedziczą się w dół. */ .dc-about__panel { --dc-ring-spin: dcRingSpin; --dc-ring-delay: calc(var(--dc-duration-ring) * -2 / 12); } /* ========================================================================== 3. ATMOSFERA — jedna warstwa dekoracji z makiety Leży pod treścią (--dc-z-base) i nie łapie kursora. ========================================================================== */ /* Złota plama wychodząca poza prawy górny róg panelu. Kolor, rozmycie i geometria literalne — nagłówek pliku, punkty b, c i d. Tętno 20 s jest wprost z makiety: rodzina --dc-duration-float kończy się na 11 s (float-slow), a ściągnięcie 20 s do 11 s przyspieszyłoby dryf o 80% — to już nie jest scalenie wartości nierozróżnialnych (reguła 15). Krzywa ease-in-out scalona do --dc-ease, jak w fuel-switch i loyalty-cta. */ /* WARSTWA ATMOSFERY — owijka plam (partia 6 audytu). Do partii 6 panel sam miał overflow: hidden i to on przycinał plamę do obrysu. Poświata obwódki (.dc-ring--halo) leży 4 px POZA panelem, więc przy takim panelu byłaby obcięta — dlatego przycinanie schodzi z panelu na tę warstwę: absolutna, równa z panelem, z jego promieniem, pod treścią. Plamy w niej mają ten sam układ odniesienia co przedtem (pudełko panelu), więc ich procenty i przesunięcia nie zmieniają znaczenia. */ .dc-about__atmosphere { position: absolute; inset: 0; z-index: var(--dc-z-base); overflow: hidden; border-radius: inherit; pointer-events: none; } .dc-about__blob { position: absolute; z-index: var(--dc-z-base); inset-block-start: -200px; inset-inline-end: -120px; width: 560px; height: 560px; border-radius: var(--dc-radius-full); background-image: radial-gradient(circle, var(--dc-accent-a20), var(--dc-accent-a00) 65%); filter: blur(24px); pointer-events: none; animation: dcAboutBlob 20s var(--dc-ease) infinite; } /* ========================================================================== 4. NAGŁÓWEK SEKCJI Do lewej i ograniczony do 620 px WPROST Z MAKIETY — nagłówek pliku, punkt f. Odstęp pod nagłówkiem 42 px -> --dc-space-40. ========================================================================== */ .dc-about__header { position: relative; z-index: var(--dc-z-raised); max-width: 620px; margin-block-end: var(--dc-space-40); } /* Nadtytuł jest samym tekstem, bez pigułki i bez kropki — jak w help-cta i loyalty-cta. Rozmiar 12 px i waga 600 trafiają w --dc-text-sm i --dc-weight-medium bez scalania; trakt .16em -> --dc-tracking-widest (.18em). Złoto: --dc-accent, patrz nagłówek pliku, punkt 2. */ .dc-about__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); } /* font-size WPROST Z MAKIETY — nagłówek pliku, punkt e. Ani --dc-display-3 (sufit 40 px), ani --dc-display-4 (34 px) nie trafiają w makietowe 38 px, a różnicy nie da się nie zauważyć: na --dc-display-4 nagłówek był przy 1440 px o 10% mniejszy niż w makiecie. Przeniesiony jest CAŁY clamp, nie sam sufit. Sufit bez podłogi znaczyłby 38 px także przy 390 px, gdzie makieta chce 28 px — czyli naprawienie jednej szerokości kosztem pozostałych. Waga 800, interlinia i trakt -0,025em przychodzą z base.css bez zmian — --dc-tracking-tight to ten sam przystanek co makietowe -0,025em. */ .dc-about__heading { margin-block-end: var(--dc-space-14); font-size: clamp(28px, 3.4vw, 38px); color: var(--dc-text-on-dark); } /* Akapit prowadzący: makietowe #aaa498 to co do jedności biel z alfą .6 złożona na tle panelu, czyli --dc-text-on-dark-muted w motywie jasnym — więc token, a nie color-mix. */ .dc-about__lead { font-size: var(--dc-text-xl); line-height: var(--dc-leading-relaxed); color: var(--dc-text-on-dark-muted); } /* ========================================================================== 5. LICZNIKI Siatka auto-fit bez breakpointu (reguła 9) — minmax(180px) WPROST Z MAKIETY, nagłówek pliku, punkt g. 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 liczniki wychodzą poza jego obrys. Sam auto-fit tego nie chroni — zwija liczbę kolumn, nie ich minimalną szerokość. ========================================================================== */ .dc-about__stats { position: relative; z-index: var(--dc-z-raised); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: var(--dc-space-20); } /* Złota kreska po stronie początku wiersza. Grubość 1 px i alfa .3 trafiają w --dc-border i --dc-border-accent co do wartości; wcięcie 22 px w --dc-space-22. Właściwości logiczne, nie border-left/padding-left, żeby kreska przeszła na drugą stronę razem z kierunkiem pisma. */ .dc-about__stat { border-inline-start: var(--dc-border) solid var(--dc-border-accent); padding-inline-start: var(--dc-space-22); } /* Liczba: makietowe clamp(34px, 4vw, 46px) to --dc-display-2 (clamp 34/4.4vw/48) — dolna granica trafia co do piksela, sufit 46 px jest przystankiem skali tego tokenu. Rodzina i waga jak w nagłówkach, ale to NIE jest nagłówek (patrz docblock about.php), więc obie deklarowane wprost. */ .dc-about__stat-value { font-family: var(--dc-font-display); font-size: var(--dc-display-2); font-weight: var(--dc-weight-black); line-height: var(--dc-leading-none); letter-spacing: var(--dc-tracking-tight); color: var(--dc-accent); } /* Podpis: 13,5 px -> --dc-text-base (13 px), odstęp 8 px -> --dc-space-8. Makietowe #c9c3b6 to biel z alfą ok. .74 złożona na tle panelu — między --dc-text-on-dark-muted (.6, za ciemno o cały stopień) a pełną bielą, więc color-mix zamiast tokenu (nagłówek pliku, punkt 1). */ .dc-about__stat-label { margin-block-start: var(--dc-space-8); font-size: var(--dc-text-base); color: color-mix(in srgb, var(--dc-text-on-dark) 74%, transparent); } /* ========================================================================== 6. RUCH — dryf plamy Klatki mieszkają w pliku sekcji, nie w base.css: base.css rejestruje prymitywy używane przez KOMPONENTY (@property --dc-ring, dcRingSpin), a ten dryf ma tylko ta jedna sekcja — dokładnie jak dcFuelSwitchGlow w fuel-switch.css i dcLoyaltyCtaGlow w loyalty-cta.css. Wartości wprost z makiety (klatki dcBlobA): przesunięcie o 6% w prawo i 5% w górę przy powiększeniu o 15%, i z powrotem. ========================================================================== */ @keyframes dcAboutBlob { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6%, -5%) scale(1.15); } } /* 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 w pozycji przesuniętej i powiększonej, wychodzącej poza róg panelu bardziej niż w spoczynku. Skrót animation: none zeruje animation-name, którego tamten !important nie obejmuje (dotyczy tylko czasu i liczby iteracji), więc wygrywa i zostaje plama w pozycji wyjściowej (reguła 12). 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-about__blob { animation: none; } }