/** * loyalty-card.css — rytm strony Klubu Dobrego Ciepła: kotwice, odstępstwa * od 128 px i warstwa atmosfery. * * Wymaga tokens.css i base.css. Każdy odstęp z var(--dc-*). * * TO NIE JEST PLIK SEKCJI, choć leży w sections/ — jak starter-kit.css, * front-page.css i single-product.css (uzasadnienie szuflady w nagłówku * starter-kit.css: szablon wisi na meta strony, nie na slugu, więc arkusz * pages/{slug}.css odłączyłby się przy zmianie sluga, zostawiając szablon). * Stylizuje WYŁĄCZNIE owijkę .dc-loyalty-card__section i warstwę * atmosfery z template-loyalty-card.php — nigdy sekcję w środku. * * ODSTĘPY ZMIERZONE W MAKIECIE (loyalty-card.html, 1440 px, 2026-08-31, * treść→treść: dolna krawędź ostatniego dziecka sekcji → górna krawędź * pierwszego dziecka następnej, z pominięciem warstw aria-hidden * i absolutnych) i w motywie (.dc-section = 64 + 64 = 128): * * odstęp makieta motyw ustawiamy różnica * nagłówek → hero 81 64 80 +16 * hero → tiers 241 128 192 +64 ← patrz niżej * tiers → steps 140 128 140 +12 * steps → savings-calculator 140 128 140 +12 * savings-calculator → compare 140 128 140 +12 * compare → rules 140 128 140 +12 * rules → faq 140 128 140 +12 * faq → help-cta 120 128 120 −8 * help-cta → stopka 100 64 96 +32 * * HERO → TIERS: 241 w makiecie zawiera PAS HASEŁ (marquee, 51 px z ramkami) * między sekcjami, którego strona nie składa (poza zakresem, nagłówek * template-loyalty-card.php). Bez pasa suma paddingów obu sekcji w makiecie * to 90 + 100 = 190; ustawiamy 192 (64 + 64 + 64) — 2 px to szum * scalenia (reguła 15). Gdy pas wejdzie, ta reguła schodzi. * * DODAJEMY PADDINGIEM, ODEJMUJEMY UJEMNYM MARGINESEM, jeden odstęp = jedna * reguła na jednym elemencie — uzasadnienie w nagłówku starter-kit.css * (sklejanie marginesów; padding nie zejdzie poniżej zera). Reguła stoi * na sekcji NIŻSZEJ. */ /* ========================================================================== 1. KOTWICE POD LEPKIM NAGŁÓWKIEM — jak front-page.css / starter-kit.css Nagłówek jest sticky, 61–65 px; --dc-space-80 to pierwszy token powyżej. Na tej stronie kotwicę ma #loyalty-rules (przycisk „Zobacz zasady" w hero). ========================================================================== */ .dc-loyalty-card__section { scroll-margin-block-start: var(--dc-space-80); } /* ========================================================================== 2. OTWARCIE STRONY: +16 NAD HERO (64 + 16 = 80; makieta 81) Padding, nie margines — margines pierwszego dziecka skleiłby się z
. ========================================================================== */ .dc-loyalty-card__section#loyalty-hero { padding-block-start: var(--dc-space-16); } /* ========================================================================== 3. HERO → PROGI: 192 (makieta 190 bez pasa haseł — nagłówek pliku) ========================================================================== */ .dc-loyalty-card__section#loyalty-tiers { padding-block-start: var(--dc-space-64); } /* ========================================================================== 4. PIĘĆ ODSTĘPÓW PO 140: +12 nad każdą z pięciu sekcji środka ========================================================================== */ .dc-loyalty-card__section#loyalty-steps, .dc-loyalty-card__section#savings-calculator, .dc-loyalty-card__section#loyalty-compare, .dc-loyalty-card__section#loyalty-rules, .dc-loyalty-card__section#faq { padding-block-start: var(--dc-space-12); } /* ========================================================================== 5. FAQ → CTA: 120 (128 − 8) i ZAMKNIĘCIE STRONY: 96 (64 + 32; makieta 100) Ujemny margines i padding na tym samym, ostatnim elemencie — dwa różne odstępy, więc nie ma czego skleić. help-cta jest w shared/ i na innych stronach stoi z innym domknięciem (strona główna 80, karta produktu 64), dlatego różnicę dokłada STRONA, nie sekcja. ========================================================================== */ .dc-loyalty-card__section#help-cta { margin-block-start: calc(-1 * var(--dc-space-8)); padding-block-end: var(--dc-space-32); } /* ========================================================================== 6. WARSTWA ATMOSFERY — CZTERY ZŁOTE PLAMY POD CAŁĄ STRONĄ Konstrukcja z starter-kit.css (sekcja 6): owijka absolutna z overflow i pointer-events: none, plamy radialne z drabinki alfy złota, klatki dcGoldBlobA/B z makiet, krycie warstwy jako jedyne pokrętło motywu (.31 jasny / .17 ciemny — skalibrowane pomiarem przy zestawie startowym wobec tej samej rampy makiety). DRUGIE WYSTĄPIENIE — kopia wg reguły 18, kandydat na komponent zgłoszony w raporcie. POZYCJE Z MAKIETY KLUBU, nie z zestawu: makieta klubu rysuje plamy per sekcja — dwie w hero (lewy górny róg, złota; prawy dolny, ciepła), jedną przy prawej krawędzi kroków, jedną w lewym dolnym rogu zasad. Cztery plamy tej warstwy stoją w tych czterech miejscach; współrzędne w pikselach to geometria sceny (jak w starter-kit.css i .dc-about__blob), dobrana do zmierzonych pozycji sekcji na złożonej stronie (raport). ========================================================================== */ .dc-loyalty-card { position: relative; } .dc-loyalty-card__atmosphere { position: absolute; z-index: var(--dc-z-base); inset: 0; overflow: hidden; pointer-events: none; opacity: 0.31; } [data-theme='dark'] .dc-loyalty-card__atmosphere { opacity: 0.17; } .dc-loyalty-card__sections { position: relative; z-index: var(--dc-z-raised); } .dc-loyalty-card__blob { position: absolute; border-radius: var(--dc-radius-full); } /* Plama 1 — lewy górny róg hero (makieta: top -12 %, left -8 %). */ .dc-loyalty-card__blob--1 { inset-block-start: -280px; inset-inline-start: -220px; width: 1100px; height: 1100px; background-image: radial-gradient( ellipse at 40% 52%, var(--dc-accent-a50), var(--dc-accent-a30) 34%, var(--dc-accent-a10) 58%, var(--dc-accent-a00) 76% ); filter: blur(78px); animation: dcLoyaltyCardBlobA 34s var(--dc-ease) infinite; } /* Plama 2 — prawy dolny róg hero (makieta: bottom -20 %, right -10 %); hero na złożonej stronie: 93–780 px (zmierzone 2026-08-31). */ .dc-loyalty-card__blob--2 { inset-block-start: 300px; inset-inline-end: -220px; width: 920px; height: 920px; background-image: radial-gradient( ellipse at 57% 44%, var(--dc-accent-a50), var(--dc-accent-a30) 36%, var(--dc-accent-a10) 60%, var(--dc-accent-a00) 78% ); filter: blur(70px); animation: dcLoyaltyCardBlobB 28s var(--dc-ease) infinite; } /* Plama 3 — prawa krawędź kroków (makieta: top 0, right -15 % sekcji); kroki: 1505–1996 px, środek plamy na środku sekcji. */ .dc-loyalty-card__blob--3 { inset-block-start: 1300px; inset-inline-end: -190px; width: 980px; height: 980px; background-image: radial-gradient( ellipse at 53% 50%, var(--dc-accent-a50), var(--dc-accent-a30) 38%, var(--dc-accent-a00) 70% ); filter: blur(80px); animation: dcLoyaltyCardBlobA 33s var(--dc-ease) 9s infinite; } /* Plama 4 — lewy dolny róg zasad (makieta: bottom -10 %, left -15 % sekcji); zasady: 3236–4009 px, plama przy dolnej krawędzi. */ .dc-loyalty-card__blob--4 { inset-block-start: 3450px; inset-inline-start: -190px; width: 860px; height: 860px; background-image: radial-gradient( ellipse at 47% 52%, var(--dc-accent-a50), var(--dc-accent-a30) 40%, var(--dc-accent-a00) 70% ); filter: blur(76px); animation: dcLoyaltyCardBlobB 35s var(--dc-ease) 14s infinite; } /* Klatki przepisane z makiety (dcGoldBlobA/B — te same co w starter-kit). */ @keyframes dcLoyaltyCardBlobA { 0%, 100% { transform: translate(0, 0) scale(1); } 30% { transform: translate(85px, -70px) scale(1.11); } 65% { transform: translate(-60px, -100px) scale(1.07); } } @keyframes dcLoyaltyCardBlobB { 0%, 100% { transform: translate(0, 0) scale(1.04); } 35% { transform: translate(-90px, 80px) scale(0.95); } 70% { transform: translate(80px, 110px) scale(1.14); } } /* Plamy zostają nieruchome, ale widoczne — to tło, nie ruch informacyjny. */ @media (prefers-reduced-motion: reduce) { .dc-loyalty-card__blob { animation: none; } }