/** * ring.css — obracająca się złota obwódka. Komponent wielokrotnego użytku. * * Wymaga tokens.css (kolory, czasy, --dc-ring-inset) oraz base.css, w którym * mieszka mechanika ruchu: rejestracja @property --dc-ring i klatki * dcRingSpin / dcRingSpinRev. Ten plik jest KONSTRUKCJĄ obwódki; base.css * jest jej PRYMITYWEM. Podział jest celowy — @property to rejestracja globalna, * bez selektora, i należy do warstwy, która rejestruje, a nie do tej, * która używa. * * DLACZEGO OSOBNY PLIK, A NIE base.css — patrz docs/section-conventions.md, * reguła 18. W skrócie: base.css to reset, typografia i 20 klas układu, i sam * o sobie mówi, że wszystko ponad to należy gdzie indziej. Obwódka nie jest * ani resetem, ani utility — to złożony element dekoracyjny z własnymi * wyjątkami motywu i własnym blokiem prefers-reduced-motion. * * KOLEJNOŚĆ WCZYTANIA: tokens -> base -> components -> sections. * Wymuszona zależnościami w dc_enqueue_assets(). Dzięki temu sekcja może * komponent dostroić, a w ostateczności nadpisać, bez zabawy w !important. * * NAZEWNICTWO: klasa .dc-ring jest GLOBALNA i to jest jej sens. Reguła * „wszystko pod prefiksem sekcji" obowiązuje pliki sekcji; komponent jest * dokładnie tym wyjątkiem, dla którego powstała ta warstwa. * * ZNACZNIKI, których komponent oczekuje — rodzic z position: relative * i isolation: isolate, w środku tyle warstw, ile sekcja potrzebuje: * * * * * * O tym, KTÓRE warstwy istnieją, decyduje sekcja doborem -ów, a nie * przełącznik w CSS. Obecność warstwy to fakt o znaczniku: warstwy, której * nie ma w HTML, nie trzeba potem chować regułą, a makieta ma wystąpienia * z samym łukiem (loyalty-card, plakietka na karcie produktu). * * POKRĘTŁA — ustawiaj je na KARCIE (rodzicu), nie na warstwie; zmienne * własne dziedziczą się w dół, a karta jest miejscem, w którym sekcja * i tak deklaruje swój wygląd: * * --dc-ring-thickness grubość złotej kreski (dom. --dc-ring-inset) * --dc-ring-duration czas pełnego obrotu (dom. --dc-duration-ring) * --dc-ring-spin nazwa klatek, czyli zwrot (dom. dcRingSpin) * --dc-ring-halo-spread j.w., ale dla poświaty (dom. --dc-space-4) * --dc-ring-halo-thickness j.w. (dom. --dc-space-6) * --dc-ring-halo-radius promień poświaty (dom. --dc-radius-28) * --dc-ring-delay faza startowa (animation-delay, dom. 0s) * * FAZA I ZWROT — REJESTR (partia 5 audytu, design-audit.md C.6). * Bez fazy każda obwódka startuje z załadowaniem strony i biegnie w tym * samym tempie, więc wszystkie rozbłyskują w tym samym miejscu obwodu * naraz — zmierzone: dwanaście łuków o kącie 72°, sekundę później 124°. * Przy przewijaniu wygląda to jak jeden efekt powielony, nie żywy detal. * * Lekarstwo to UJEMNE opóźnienie: cofa start o ułamek obrotu, więc każda * karta jest w innym miejscu cyklu. Tempo jest jedno (--dc-duration-ring, * w obu motywach); różnią się WYŁĄCZNIE faza i zwrot, bo tylko one służą * rozsunięciu. Każda sekcja wpisuje swoje u siebie, na sztywno — sekcja * nie wie, która jest na stronie, więc przestawienie kolejności sekcji * niczego w obwódkach nie zmienia (decyzja Andrzeja, 2026-08-30). * * Numer z rejestru to dwunastka obrotu: opóźnienie * calc(var(--dc-duration-ring) * -N / 12), czyli start o N × 30° dalej. * Numer NIEPARZYSTY = obrót w lewo (dcRingSpinRev), parzysty = w prawo. * Kolejno rejestrowane sekcje dostają numery co 5 (5 i 12 są względnie * pierwsze, więc wszystkie dwanaście faz zostaje zużytych, zanim któraś się * powtórzy; sąsiednie wpisy różnią się o 150° i mają przeciwną parzystość, * czyli przeciwny zwrot). Zajęte: * * 0 help-cta 1 facts 2 about 3 volume-picker * 4 origin 5 trust-badges 6 loyalty-cta 7 wholesale * 8 ai-assistant 9 how-to-order 10 fuel-switch 11 calculator * * Nowe wystąpienie bierze numer, którego nie ma jeszcze na TEJ SAMEJ * stronie. Okno .dc-modal fazy nie ma (0s, zwrot domyślny): jest na * ekranie samo, nie ma z czym się zsynchronizować. */ /* ========================================================================== 1. WARSTWA BAZOWA ========================================================================== */ .dc-ring { position: absolute; /* Równo z kartą. Pokrętła na to NIE MA celowo: wyjść poza obrys ma sens tylko dla poświaty i tylko ona je dostaje (sekcja 3). Zapis var(--cos, 0px) dołożyłby do komponentu zahardkodowanego piksela — jedyną taką wartość w pliku — po to, by nikt z niego nie skorzystał. */ inset: 0; z-index: var(--dc-z-base); pointer-events: none; /* Promień: DZIEDZICZONY z karty, celowo bez pokrętła. Zmiennej tu nie da się użyć — słowa kluczowe CSS-a (inherit, initial) nie przechodzą przez var(): własna zmienna o wartości `inherit` jest traktowana jako polecenie dziedziczenia SAMEJ ZMIENNEJ, a nie jako token do podstawienia. Ale strata jest pozorna: warstwa leżąca dokładnie na karcie ZAWSZE ma jej promień, więc dziedziczenie trafia w sedno bez ani jednej linii konfiguracji. Pokrętło dostaje tylko ta warstwa, która dziedziczyć nie może, bo leży poza kartą — poświata, sekcja 3. */ border-radius: inherit; /* Sztuczka na obramowanie gradientem: element jest wypełniony gradientem na całej powierzchni, a maska wycina z niego środek. Zostaje sama ramka o szerokości padding. Dwie warstwy maski — jedna ograniczona do content-box, druga do całego pudełka — odejmowane od siebie. Kolor w masce nie ma znaczenia, liczy się wyłącznie kanał alfa; black to stempel krycia, nie wartość projektowa. Stąd padding = grubość kreski. To jedyna geometria, którą maska ma. */ padding: var(--dc-ring-thickness, var(--dc-ring-inset)); -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0); -webkit-mask-composite: xor; mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0); mask-composite: exclude; } /* ========================================================================== 2. ŁUK ŚWIATŁA — wspólny dla poświaty i rantu ========================================================================== */ /* Gradient MUSI być zapisany tutaj, we właściwości background-image, a nie * jako token w tokens.css. var() wewnątrz zmiennej podstawia się przy * wyliczaniu wartości na elemencie, na którym zmienna jest ZADEKLAROWANA — * token na :root zamroziłby więc --dc-ring na wartości początkowej 0deg * i potomkowie odziedziczyliby gotowy, nieruchomy gradient. Zapisany wprost * we właściwości podstawia się na TYM elemencie, czyli bierze jego własny, * animowany kąt. * * Kąty to geometria obrotu, nie wartości projektowe — dlatego liczby, * a nie tokeny. Jeden zestaw scalony z wszystkich wystąpień w makietach * (jasna 84/126/140/154/196, ciemna 80/124/140/156/200, poświata * 86/130/142/154/198) — rozrzut kilku stopni. Wspólny zestaw sprawia, * że każde dwie obwódki na jednej stronie są identyczne. */ .dc-ring--halo, .dc-ring--arc { background-image: conic-gradient( from var(--dc-ring), var(--dc-accent-a00) 0deg, var(--dc-accent-a00) 82deg, var(--dc-ring-glow) 125deg, var(--dc-ring-glow-peak) 140deg, var(--dc-ring-glow) 155deg, var(--dc-accent-a00) 198deg, var(--dc-accent-a00) 360deg ); /* Zwrot obrotu siedzi w NAZWIE klatek, nie w animation-direction: reverse — reverse odwraca też krzywą czasu, a tu chodzi wyłącznie o zwrot (patrz base.css). Dlatego pokrętłem jest nazwa. */ animation: var(--dc-ring-spin, dcRingSpin) var(--dc-ring-duration, var(--dc-duration-ring)) linear infinite; /* Faza — patrz rejestr w nagłówku. Musi stać PO skrócie animation: skrót ustawia animation-delay na 0s i zjadłby wartość zapisaną przed nim. Ujemne opóźnienie nie „czeka" — cofa punkt startu. */ animation-delay: var(--dc-ring-delay, 0s); } /* ========================================================================== 3. POŚWIATA ========================================================================== */ /* Rozmyta poświata pod kartą. Wychodzi poza jej obrys, więc ma własny, większy promień, własną grubość i ujemny inset. To jedyna warstwa, która nie leży na karcie — i jedyna, która promienia nie może odziedziczyć. Trzy pokrętła, nie jedno wspólne z rantem: poświata i rant mają w każdym wystąpieniu makiety inne wartości, więc wspólne pokrętło ruszałoby obie warstwy naraz i nie dałoby się ich rozjechać. */ .dc-ring--halo { /* Grubość idzie przez zmienną BAZOWĄ, nadpisaną tu na sobie — dzięki temu padding z sekcji 1 liczy się już z wartością poświaty i nie trzeba powtarzać całej deklaracji maski. */ --dc-ring-thickness: var(--dc-ring-halo-thickness, var(--dc-space-6)); inset: calc(var(--dc-ring-halo-spread, var(--dc-space-4)) * -1); border-radius: var(--dc-ring-halo-radius, var(--dc-radius-28)); filter: var(--dc-blur-sm); } /* ========================================================================== 4. REFLEKS ========================================================================== */ /* Nieruchomy biały refleks. W motywie jasnym nie występuje — karta odcina się od tła sama. Ukryty przez display, a nie opacity, żeby nie zostawiać w drzewie renderowania niewidocznej warstwy (reguła 11). */ .dc-ring--specular { display: none; background-image: var(--dc-gradient-specular); } /* ========================================================================== 5. MOTYW CIEMNY — różnice NIEKOLOROWE Na ciemnym tle rozmyta poświata rozlewa się w brudną plamę, więc znika, a jej rolę przejmuje twardy biały refleks. To układ warstw, nie kolor, więc zgodnie z regułą 10 wyjątek stoi tutaj, a nie w tokens.css. Zwrot i tempo obrotu NIE są tu ustawiane, choć w makiecie potrafią się między motywami różnić: to decyzja pojedynczego wystąpienia, nie właściwość komponentu. Od partii 5 audytu żadna sekcja nie różnicuje ich między motywami: zwrot i faza są własnością SEKCJI (rejestr w nagłówku), tempo jest jedno i wspólne. ========================================================================== */ [data-theme='dark'] .dc-ring--halo { display: none; } [data-theme='dark'] .dc-ring--specular { display: block; } /* ========================================================================== 6. RUCH OGRANICZONY base.css tnie globalnie animation-duration do 0.01ms z jedną iteracją. Dla obrotu to znaczy „doskocz natychmiast do końca", a nie „stój" — łuk zamarłby w przypadkowym miejscu. Tu obrót jest ZATRZYMANY, nie zdjęty: animation-play-state: paused trzyma klatkę, a ujemne opóźnienie z rejestru (sekcja 2) dalej wyznacza, KTÓRA to klatka — paused liczy czas lokalny od opóźnienia, więc każda karta stoi w swojej fazie, w swoim zwrocie. Dlaczego nie animation: none (tak było do partii 6 audytu): skrót zeruje też opóźnienie, więc każdy łuk stawał na 0°, z rozbłyskiem w tym samym miejscu obwodu — na jednym panelu spokojny akcent, na dwunastu w kolumnie dokładnie to powielenie, które faza z rejestru miała usunąć (zmierzone: 12 × 0deg). Zdjęcie łuku w ogóle odrzucone: makieta jasna rysuje na panelach NIERUCHOMY złoty rant, więc stojący łuk jest wyglądem projektu, nie stopklatką; a użytkownik prosił o brak ruchu, nie o brak dekoracji. !important jest tu konieczny i tylko tu: globalny wyłącznik w base.css sam jest !important na `*`, a bez przywrócenia czasu trwania opóźnienie −N/12 obrotu wypadłoby poza 0,01 ms animacji. Selektor klasy (0,1,0) wygrywa z `*` (0,0,0) przy tej samej ważności. Zatrzymana animacja nie liczy klatek — koszt zerowy, tak jak przy display: none (reguła 11). Blok jest CZĘŚCIĄ KOMPONENTU, a nie sekcji: reguła 12 mówi, że blok dokłada ten, kto animuje — a animuje ten plik. Sekcja używająca .dc-ring nie musi już o tym pamiętać, i o to chodziło. ========================================================================== */ @media (prefers-reduced-motion: reduce) { .dc-ring--halo, .dc-ring--arc { animation-duration: var(--dc-ring-duration, var(--dc-duration-ring)) !important; animation-iteration-count: infinite !important; animation-play-state: paused; } }