/* ========================================================================== Motywy klubu Moje Atelier -------------------------------------------------------------------------- Barwy trzymamy tutaj jako ROLE („akcent", „powierzchnia", „tekst cichy"), a nie jako nazwy kolorów. Dzięki temu wymiana motywu to podmiana kilkunastu wartości w jednym pliku — reszta arkuszy nie wie nawet, że coś się zmieniło. Złoto zostaje w KAŻDYM motywie. To druga, obok różu, podpora znaku Atelier Słodyczy i jedyna rzecz, która trzyma warianty w jednej rodzinie. Motyw zmienia nastrój aplikacji, nie markę. Wszystkie zestawienia tekstu z tłem przechodzą próg czytelności WCAG 4,5:1 (duże napisy i elementy 3:1). Sprawdzone rachunkiem, nie okiem. ========================================================================== */ :root, [data-motyw="pudrowy"] { /* ------- Pudrowy: motyw podstawowy, wprost z księgi marki ------- */ --akcent: #AC5163; /* przyciski, tytuły, liczby */ --akcent-na: #FFFFFF; /* tekst na akcencie — 5,11:1 */ --akcent-jasny: #E9A3AF; /* stany aktywne, drugi kolor wykresu */ --akcent-tlo: #FDEEF1; /* delikatne panele, paski sekcji */ --akcent-pasek: #FAC7CE; /* pasek nagłówka sekcji */ --zloto: #C09338; --zloto-jasne: #E2CE9C; --zloto-ciemne: #8A6520; --tlo: #FDF2F4; --powierzchnia: #FFFFFF; --tekst: #1A1718; /* * Księga marki podaje tu #8B7C7E, ale przy rozmiarze tekstu ciągłego daje to * 3,98:1 — poniżej progu czytelności. Ściemniamy o tyle, ile trzeba, żeby * przejść 4,5:1 i ani odcienia więcej. */ --tekst-cichy: #786A6C; --linia: #F6DFE3; --karta-tlo: radial-gradient(120% 90% at 12% 0%, #FFFFFF 0%, #FEF7F8 42%, #FDEEF1 100%); --pieczatka-tlo: #FFFCFD; --wykres-nowi: #AC5163; --wykres-odeszli: #C09338; --ok: #2E7D32; --blad: #B3261E; --cien: 0 1px 2px rgba(26, 23, 24, .05), 0 10px 30px rgba(172, 81, 99, .10); --cien-mocny: 0 2px 6px rgba(26, 23, 24, .06), 0 24px 50px rgba(172, 81, 99, .18); color-scheme: light; } [data-motyw="grafit"] { /* ------- Grafit: ten sam znak, ciemniejszy nastrój ------- Róż ustępuje grafitowi, złoto przejmuje rolę akcentu. Napis na złotym przycisku jest ciemny — biały na złocie jest nieczytelny i księga marki mówi o tym wprost. */ --akcent: #C09338; --akcent-na: #17161A; /* 6,41:1 */ --akcent-jasny: #E2CE9C; --akcent-tlo: #2A272F; --akcent-pasek: #35313C; --zloto: #D9AC55; --zloto-jasne: #E9D4A4; --zloto-ciemne: #C09338; --tlo: #17161A; --powierzchnia: #211F25; --tekst: #F3F0EB; /* 14,35:1 na powierzchni */ --tekst-cichy: #A29B93; /* 5,94:1 na powierzchni */ --linia: #35323A; --karta-tlo: radial-gradient(120% 90% at 12% 0%, #2C2932 0%, #262229 45%, #1D1B21 100%); --pieczatka-tlo: #26232B; /* Para sprawdzona walidatorem na ciemnym tle: ΔE 19+ przy pełnym widzeniu i przy daltonizmie. Złoto w każdym motywie znaczy „odeszli". */ --wykres-nowi: #5B86C4; --wykres-odeszli: #B8892F; --ok: #6FBF73; --blad: #E88178; --cien: 0 1px 2px rgba(0, 0, 0, .40), 0 10px 30px rgba(0, 0, 0, .45); --cien-mocny: 0 2px 6px rgba(0, 0, 0, .45), 0 24px 50px rgba(0, 0, 0, .55); color-scheme: dark; } [data-motyw="klasyczny"] { /* ------- Klasyczny: kremowy papier, złoto, czerń. Bez różu. ------- */ --akcent: #8A6520; --akcent-na: #FFFFFF; /* 5,30:1 */ --akcent-jasny: #C09338; --akcent-tlo: #F4EFE4; --akcent-pasek: #EDE4D2; --zloto: #8A6520; --zloto-jasne: #D9C08A; --zloto-ciemne: #6B4E18; --tlo: #F7F4EF; --powierzchnia: #FFFFFF; --tekst: #1A1718; --tekst-cichy: #6F6862; /* 5,48:1 na bieli */ --linia: #E8E2D8; --karta-tlo: radial-gradient(120% 90% at 12% 0%, #FFFFFF 0%, #FDFBF7 42%, #F4EFE4 100%); --pieczatka-tlo: #FFFDF9; --wykres-nowi: #2F6FA8; --wykres-odeszli: #966A16; --ok: #2E7D32; --blad: #B3261E; --cien: 0 1px 2px rgba(26, 23, 24, .05), 0 10px 30px rgba(138, 101, 32, .10); --cien-mocny: 0 2px 6px rgba(26, 23, 24, .06), 0 24px 50px rgba(138, 101, 32, .16); color-scheme: light; } /* -------------------------------------------------------------------------- KOLORY POZIOMÓW KLUBU -------------------------------------------------------------------------- Karta klubowa nosi barwę poziomu, żeby obsługa poznała go rzutem oka na telefon — zanim zdąży przeczytać napis. Kolor dobiera `kolorPoziomu` w src/klub.js WEDŁUG INDEKSU poziomu (róż na dole drabinki, złoto na górze); tutaj są już tylko barwy, po jednej rodzinie na stopień. Dwie warstwy i celowo różne zasady: 1. POWIERZCHNIA KARTY (`-karta`, `-ramka`) chodzi za motywem. Karta jest dużą płaszczyzną, po której biegnie tekst w kolorze motywu — jasne srebro pod białym napisem grafitowego motywu byłoby nieczytelne. 2. PASTYLKA I PASEK (`-pastylka`, `-napis`, `-obwodka`, `-pasek`) są STAŁE w każdym motywie, dokładnie jak pastylka miejsca przy promocji. To zamknięte elementy z własnym tłem i własnym napisem, a sygnał dla kasy ma znaczyć to samo na każdym telefonie. 3. NAPISY NA KARCIE (`-tekst` — numer karty, `-cichy` — podpisy) chodzą za motywem razem z powierzchnią. Role motywu (róż akcentu, tekst cichy) trzymają próg tylko na różowej karcie; na srebrze i złocie schodziły do 3,2–4,0:1, więc każda rodzina dostała własną parę atramentów. Najniższy poziom wskazuje z powrotem na role motywu, żeby jego karta wyglądała dokładnie tak, jak wyglądała. Kontrasty policzone rachunkiem, nie ocenione okiem (napis na najciemniejszym końcu gradientu pastylki): róż #8E3446 na #FAC7CE — 5,17:1 srebro #3A424C na #D8DEE6 — 7,52:1 złoto #6B4E18 na #E2CE9C — 4,97:1 diament #14567F na #D7DEE6 — 5,80:1 Tekst karty (#1A1718 w motywach jasnych, #F3F0EB w grafitowym) na najmniej korzystnym końcu każdego gradientu karty: od 9,3:1 do 13,2:1. DIAMENT JEST WYJĄTKIEM od całej reguły powyżej: to jedyny poziom, którego karta (`-karta`, `-ramka`) NIE chodzi za motywem — została przeniesiona 1:1 z zatwierdzonej makiety (diament-propozycje.html, propozycja C — „Fuzja") i jest STAŁA w obu motywach: platyna u góry przechodzi w czarny diament u dołu, po przekątnej. Dlatego ma DWA atramenty zamiast jednej pary: `-tekst-gora`/`-cichy-gora` dla imienia i etykiety w jasnej, górnej strefie karty, `-tekst`/`-cichy` dla numeru karty i podpisu w ciemnej, dolnej strefie (pod kodem QR) — patrz .poziom-diament w styles.css. Kontrasty liczone OSOBNO dla każdej strefy, przeciwko tylko tym przystankom gradientu, które w niej realnie leżą: góra (0–26%: #FFFFFF, #EEF5FB, #D9E6EF) imię #16232E — 12,57:1 etykieta #2E4B63 — 7,17:1 dół (70–100%: #3C3D44, #2C2C33, #34353C) numer karty #F0F3F6 — 9,70:1 podpis #C7CDD4 — 6,75:1 -------------------------------------------------------------------------- */ :root { /* róż — najniższy poziom, dotychczasowy wygląd karty */ --poziom-roz-karta: radial-gradient(120% 90% at 12% 0%, #FFFFFF 0%, #FEF7F8 42%, var(--akcent-tlo) 100%); --poziom-roz-ramka: linear-gradient(140deg, var(--zloto-jasne), var(--zloto) 30%, #F3E4BE 52%, var(--zloto) 74%, var(--zloto-jasne)); --poziom-roz-pastylka: linear-gradient(135deg, #FDF2F4, #FAC7CE 55%, #F7D8DD); --poziom-roz-napis: #8E3446; --poziom-roz-obwodka: rgba(172, 81, 99, .5); --poziom-roz-pasek: linear-gradient(90deg, #E9A3AF, #AC5163 55%, #E9A3AF); --poziom-roz-tekst: var(--akcent); /* numer karty — bez zmian wzgledem dotychczasowej karty */ --poziom-roz-cichy: var(--tekst-cichy); /* podpisy — tez bez zmian */ /* srebro — środek drabinki */ --poziom-srebro-karta: radial-gradient(120% 90% at 12% 0%, #FFFFFF 0%, #F5F7F9 42%, #DFE4EA 100%); --poziom-srebro-ramka: linear-gradient(140deg, #EEF1F5, #9AA4B0 30%, #FFFFFF 52%, #9AA4B0 74%, #EEF1F5); --poziom-srebro-pastylka: linear-gradient(135deg, #F5F7FA, #D8DEE6 55%, #E7EBF0); --poziom-srebro-napis: #3A424C; --poziom-srebro-obwodka: rgba(90, 100, 112, .5); --poziom-srebro-pasek: linear-gradient(90deg, #C9D1DA, #7C8794 55%, #C9D1DA); --poziom-srebro-tekst: #3A424C; /* 7,96:1 na najciemniejszym koncu karty */ --poziom-srebro-cichy: #545C66; /* 5,30:1 */ /* złoto — barwa marki, przy trzech poziomach najwyższy stopień */ --poziom-zloto-karta: radial-gradient(120% 90% at 12% 0%, #FFFDF7 0%, #FCF4E2 42%, #F0DFB6 100%); --poziom-zloto-ramka: linear-gradient(140deg, #F0DFB6, #C09338 30%, #FBF3DC 52%, #C09338 74%, #F0DFB6); --poziom-zloto-pastylka: linear-gradient(135deg, #FDF6E4, #E2CE9C 55%, #F1E3BC); --poziom-zloto-napis: #6B4E18; --poziom-zloto-obwodka: rgba(192, 147, 56, .6); --poziom-zloto-pasek: linear-gradient(90deg, #E2CE9C, #A5761B 55%, #E2CE9C); /* #C09338 dawalo na bialej karcie panelu 2,81:1 — ponizej progu 3:1 dla grafiki */ --poziom-zloto-tekst: #6B4E18; /* 5,69:1 */ --poziom-zloto-cichy: #6A5A2E; /* 4,98:1 */ /* diament „Fuzja" — szczyt drabinki, gdy poziomów jest cztery lub więcej. 1:1 z makiety: platyna (białe-błękitne) u góry przechodzi po przekątnej w czarny diament (grafit) u dołu. STAŁA w obu motywach — patrz uwaga nad tym blokiem — dlatego nie ma wpisu w [data-motyw="grafit"] niżej. */ --poziom-diament-karta: linear-gradient(162deg, #FFFFFF 0%, #EEF5FB 14%, #D9E6EF 26%, #AABDCB 40%, #6C7684 54%, #3C3D44 70%, #2C2C33 86%, #34353C 100%); --poziom-diament-ramka: linear-gradient(148deg, #E8F1F8 0%, #FFFFFF 16%, #7FA0BE 32%, #FFFFFF 48%, #9AA3AD 62%, #FFFFFF 78%, #4A4A52 92%, #6E6E76 100%); --poziom-diament-pastylka: linear-gradient(135deg, #EAF3FA, #D7DEE6 55%, #F2F2F4); --poziom-diament-napis: #14567F; --poziom-diament-obwodka: rgba(20, 86, 127, .45); --poziom-diament-pasek: linear-gradient(90deg, #AABDCB, #4A80A8 55%, #AABDCB); --poziom-diament-tekst: #F0F3F6; /* numer karty, dolna strefa — 9,70:1 */ --poziom-diament-cichy: #C7CDD4; /* podpis pod kodem, dolna strefa — 6,75:1 */ --poziom-diament-tekst-gora: #16232E; /* imię, górna strefa — 12,57:1 */ --poziom-diament-cichy-gora: #2E4B63; /* etykieta „Moje Atelier", górna strefa — 7,17:1 */ } /* Grafitowy: te same cztery rodziny, tylko przyciemnione do tła. Barwa poziomu zostaje rozpoznawalna, a napis karty (jasny) ma pod sobą ciemną powierzchnię. Pastylka i pasek zostają jasne — świecą na ciemnej karcie. */ [data-motyw="grafit"] { --poziom-roz-karta: radial-gradient(120% 90% at 12% 0%, #3B2C32 0%, #33262B 45%, #281F23 100%); --poziom-srebro-karta: radial-gradient(120% 90% at 12% 0%, #3C4149 0%, #31363D 45%, #242930 100%); --poziom-srebro-ramka: linear-gradient(140deg, #9AA4B0, #6C7682 30%, #DDE3EA 52%, #6C7682 74%, #9AA4B0); --poziom-srebro-tekst: #D3DAE3; /* 7,53:1 na najjasniejszym koncu ciemnej karty */ --poziom-srebro-cichy: #AFB7C1; /* 5,24:1 */ --poziom-zloto-karta: radial-gradient(120% 90% at 12% 0%, #453A25 0%, #3B3120 45%, #2C2519 100%); --poziom-zloto-tekst: #EBD9AC; /* 7,99:1 */ --poziom-zloto-cichy: #C6B384; /* 5,40:1 */ /* diament: BEZ wpisu tutaj celowo — karta „Fuzja" jest stała w obu motywach, więc dziedziczy komplet wartości wprost z :root powyżej. */ } /* -------------------------------------------------------------------------- TŁO KARTY PROMOCJI I KARTY URODZINOWEJ -------------------------------------------------------------------------- Do 08.09.2026 obie karty miały gradient zapisany w `styles.css` NA SZTYWNO (jasny róż / kremowy) — dokładnie ta sama usterka, jaką miała karta klubowa przed naprawą wyżej: w grafitowym motywie napis na karcie (`--tekst`, `--muted`, złoty akcent) jest jasny, a tło zostawało jasne, więc znikał. Tło idzie teraz przez zmienną, więc każdy motyw ma własny wariant — pudrowy i klasyczny wyglądają DOKŁADNIE tak, jak wyglądały. -------------------------------------------------------------------------- */ :root { --promocja-tlo: linear-gradient(135deg, var(--pink-soft), #FFFFFF 70%); --urodziny-tlo: linear-gradient(135deg, #FFF9EC, #FDF3F5 60%); } [data-motyw="grafit"] { /* * Obie karty noszą tylko trzy atramenty: tytuł/treść (`--tekst`), podpisy * (`--muted`) i złoty akcent (procent promocji, liczba dni, rabat — * wszystkie trzy przez `--akcent`/`--zloto-ciemne`, w graficie to ta sama * wartość). Kontrast policzony rachunkiem na obu końcach gradientu: * tekst #F3F0EB na #2A272F / #211F25 — 12,92:1 / 14,35:1 * cichy #A29B93 na #2A272F / #211F25 — 5,35:1 / 5,94:1 * złoto #C09338 na #2A272F / #211F25 — 5,23:1 / 5,80:1 * Wszystkie nad progiem 4,5:1 — ta sama para barw starcza obu kartom. */ --promocja-tlo: linear-gradient(135deg, var(--pink-soft), var(--powierzchnia) 70%); --urodziny-tlo: linear-gradient(135deg, var(--pink-soft), var(--powierzchnia) 60%); } /* -------------------------------------------------------------------------- Nazwy używane w arkuszach aplikacji. Wskazują na role powyżej, więc zmiana motywu przenosi się wszędzie sama. Zostawiamy je, bo przepisywanie nazw w kilkuset miejscach dałoby ryzyko bez żadnego zysku. -------------------------------------------------------------------------- */ :root { --pink: var(--akcent-pasek); --pink-soft: var(--akcent-tlo); --pink-strong: var(--akcent); --pink-accent: var(--akcent-jasny); --bg: var(--tlo); --white: var(--powierzchnia); --ink: var(--tekst); --muted: var(--tekst-cichy); --line: var(--linia); --gold: var(--zloto); --gold-light: var(--zloto-jasne); --gold-dark: var(--zloto-ciemne); --shadow: var(--cien); --shadow-lift: var(--cien-mocny); --err: var(--blad); /* --------------------- piętrowiec malowany (public/tort.js) -------------- * * Barwy tortu z licznika oszczędności. Wszystkie wskazują na ROLE motywu, * więc tort chodzi za motywem tak samo jak reszta aplikacji: w pudrowym * jest różowo-złoty, w grafitowym — ciepły na ciemnym tle. Osobnych * wartości nie wpisujemy, bo to samo złoto i ten sam róż niosą tu markę. * * Szkic (`--tort-szkic`) jest świadomie SŁABY — ma dać się przeczytać jako * „tu coś powstanie", a nie konkurować z tym, co już namalowane. */ --tort-kontur: var(--zloto-ciemne); --tort-szkic: var(--tekst-cichy); --tort-patera: var(--zloto-jasne); --tort-biszkopt: var(--pieczatka-tlo); --tort-krem: var(--akcent-pasek); --tort-masa: var(--akcent-tlo); --tort-polewa: var(--akcent-jasny); --tort-dekor: var(--zloto-jasne); /* Perełki — pełne złoto, mocniejsze od rozet, żeby drobiazg był widoczny. */ --tort-perla: var(--zloto); /* Wisienka jest STAŁA w każdym motywie — czerwień, nie kolor akcentu. Wisienka to wisienka, nie zależy od tego, czy motyw jest różowy czy złoty. Grafit dostaje własny, jaśniejszy odcień niżej — na ciemnej karcie ten sam czerwony gasł. */ --tort-wisienka: #C22B37; --tort-wisienka-polysk: #E8626C; --tort-listek: var(--zloto); --tort-blysk: var(--powierzchnia); } [data-motyw="grafit"] { /* Ta sama wiśnia, o ton jaśniejsza — na ciemnej karcie bazowa czerwień traciła czytelność. */ --tort-wisienka: #DE4F5B; --tort-wisienka-polysk: #F28E96; } /* Przejście przy przełączaniu motywu — bez niego zmiana wygląda jak usterka. */ @media (prefers-reduced-motion: no-preference) { html.motyw-przejscie, html.motyw-przejscie body, html.motyw-przejscie .karta, html.motyw-przejscie .klubowa { transition: background-color .35s ease, color .35s ease, border-color .35s ease; } }