/** * how-to-order.css — trzy kroki zamówienia, od wyboru po sezon. * * Wymaga tokens.css, base.css i components/ring.css. Wszystko pod prefiksem * .dc-how-to-order__, nic stąd nie wycieka na cudze znaczniki. * * Zero wartości zahardkodowanych: kolory, odstępy, promienie i czasy * pochodzą wyłącznie z var(--dc-*). */ /* ========================================================================== 1. RAMA SEKCJI I KARTA ========================================================================== */ /* .dc-how-to-order 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. */ .dc-how-to-order__card { position: relative; isolation: isolate; padding: var(--dc-space-48); border: var(--dc-border) solid var(--dc-border-subtle); border-radius: var(--dc-radius-28); background-color: var(--dc-surface-glass-soft); -webkit-backdrop-filter: var(--dc-blur-lg); backdrop-filter: var(--dc-blur-lg); box-shadow: var(--dc-shadow-xl), var(--dc-shadow-inset-top); } /* ========================================================================== 2. OBWÓDKA — FAZA I ZWROT Konstrukcja siedzi w assets/css/components/ring.css, warstwy wstawia znacznik. Sekcji zostaje jedno: to, czym RÓŻNI SIĘ jej wystąpienie — faza i zwrot z rejestru w ring.css. Numer 9: start o 9/12 obrotu (270°) i nieparzysty numer, czyli obrót W LEWO. 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 karcie (rodzicu), nie na warstwie — zmienne własne dziedziczą się w dół. W OBU motywach tak samo. Do partii 5 karta kręciła w ciemnym „wolniej i w drugą stronę" jak w makiecie ciemnej (9,5 s, scalone do --dc-duration-ring-slow — cztery zapisy tej samej idei w home-dark.html: 9 / 9,5 / 10 / 11 s). Zdjęte: tempo jest jedno, --dc-duration-ring, a zwrot różnicuje sekcje między sobą, nie motywy. ========================================================================== */ .dc-how-to-order__card { --dc-ring-spin: dcRingSpinRev; --dc-ring-delay: calc(var(--dc-duration-ring) * -9 / 12); } /* ========================================================================== 3. NAGŁÓWEK SEKCJI ========================================================================== */ .dc-how-to-order__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; } /* Kolor --dc-accent-strong, nie --dc-accent-text — reguła J (section-conventions.md). Ten sam wybór co w origin i facts: złoty TEKST niosący znaczenie bierze zawsze wariant o wyższym kontraście. */ .dc-how-to-order__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-strong); } /* h2 bierze krój, wagę i interlinię z base.css — tu tylko odstęp do akapitu pod spodem, jak w origin. */ .dc-how-to-order__header h2 { /* Odstęp do leadu 14 jak w każdej sekcji (design-audit.md, C.10; partia 6). */ margin-block-end: var(--dc-space-14); } .dc-how-to-order__lead { font-size: var(--dc-text-xl); color: var(--dc-text-muted); } /* ========================================================================== 4. SIATKA KROKÓW ========================================================================== */ /* min(var(--dc-grid-min-md), 100%) — ta sama osłona przed przepełnieniem co w facts i trust-badges: bez niej pojedyncza kolumna na wąskim ekranie próbowałaby wymusić 280 px szerokości nawet tam, gdzie dostępne jest mniej, i wywołała poziome przewijanie karty. */ .dc-how-to-order__list { position: relative; z-index: var(--dc-z-raised); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--dc-grid-min-md), 100%), 1fr)); gap: var(--dc-space-22); } /* ========================================================================== 5. KAFEL Szkło mocniejsze niż karta pod spodem — kafel ma się od niej odcinać, ten sam porządek warstw co w facts (glass/glass-soft). Makieta dokłada tu jeszcze dwa wewnętrzne rozjaśnienia (poświata od dołu i włosowa obwódka) — token cieni ich nie ma. Pominięte jak w facts (uwaga E z section-conventions.md, „Do uzupełnienia"): to DRUGIE wystąpienie tego samego pominięcia, nie pierwsze. Padding z makiety jest asymetryczny (34 px pionowo, 30 px poziomo) i różni się od facts (tam 30 px w obu osiach) — scalone osobno na każdej osi do najbliższych tokenów (34→32, 30→28), oba mieszczą się w tolerancji 1–2 px z reguły 15. Cień o stopień NIŻSZY niż karta-rodzic (--dc-shadow-lg pod --dc-shadow-xl; design-audit.md, C.4) — jak kafel w facts. Do partii 4 audytu oba miały xl. ========================================================================== */ .dc-how-to-order__item { padding-block: var(--dc-space-32); padding-inline: var(--dc-space-28); border: var(--dc-border) solid var(--dc-border-subtle); border-radius: var(--dc-radius-16); 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); } /* Makieta ma na kaflu najazd kursorem (uniesienie o 6 px) 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ł (reguła 14). Reakcja na kursor na elemencie nieinteraktywnym byłaby fałszywą obietnicą, więc nie przenosimy ani uniesienia, ani samego transition — nie ma tu więc też bloku prefers-reduced-motion (reguła 12 dotyczy ruchu, którego sekcja faktycznie dokłada; tu żadnego nie dokłada). */ /* ========================================================================== 6. TREŚĆ KAFLA ========================================================================== */ /* Numer kroku — czysta dekoracja, aria-hidden w znaczniku. Znaczenie kolejności niesie już pozycja w
    (patrz docblock how-to-order.php). Skala liczebników --dc-numeral-lg użyta tu PIERWSZY RAZ w projekcie — 44 px, dokładnie tyle, ile ma makieta. */ .dc-how-to-order__numeral { display: block; margin-block-end: var(--dc-space-16); font-family: var(--dc-font-display); font-weight: var(--dc-weight-black); font-size: var(--dc-numeral-lg); line-height: var(--dc-leading-none); color: var(--dc-accent-a50); } /* h3 bierze wagę, krój i interlinię z base.css — tu tylko rozmiar (20 px, dokładne trafienie w --dc-text-4xl, bez scalania) i odstęp do akapitu pod spodem. */ .dc-how-to-order__title { margin-block-end: var(--dc-space-8); font-size: var(--dc-text-4xl); } .dc-how-to-order__text { font-size: var(--dc-text-md); color: var(--dc-text-muted); }