/* ========================================================================== Color styleguide — EdukacjaplusTerapia ========================================================================== Elementor jest źródłem prawdy. Każdy token czyta najpierw zmienną z kita, a hex wpisany tutaj jest wyłącznie fallbackiem na wypadek, gdyby dana wartość nie była w Elementorze ustawiona. Źródło odniesienia: homepage (WP page ID 14099) + kit 13276. Skąd pochodzą wartości: - Global Colors kita: --e-global-color-primary / -secondary / -text / -accent (Site Settings → Global Colors). - Custom CSS kita (:root): --main-color, --secondary, --text-dark, --dark-bgc, --white, --dark-blue, --gray-text. - Kolory wpisane na sztywno w widgetach (np. #19247C, #1E1E1E, #AFAFAF2E) — nie mają odpowiednika w Elementorze, więc zostają jako literały. Deklaracja siedzi na `body`, bo tam Elementor definiuje --e-global-color-* (klasa .elementor-kit-13276). `:root` jest dublowany tylko po to, żeby tokeny istniały też poza . Uwaga na kolizję nazw: w Custom CSS kita --secondary to szary #757575, podczas gdy Global "Secondary" to prawie-czarny #211E1F. Dlatego tokeny nazywane są po roli, nie po numerze slotu. Nie definiujemy tu z powrotem --main-color, --dark-blue itd. — powstałby cykl odwołań i wszystkie zmienne stałyby się nieprawidłowe. ========================================================================== */ :root, body { /* --- Marka ---------------------------------------------------------- */ --ept-color-brand: var(--e-global-color-primary, #19cbe1); --ept-color-brand-dark: var(--dark-blue, #00889d); --ept-color-navy: #19247c; /* --- Neutralne ------------------------------------------------------ */ --ept-color-white: var(--white, #fff); --ept-color-gray-100: var(--e-global-color-accent, #f2f2f2); --ept-color-gray-500: var(--secondary, #757575); --ept-color-ink: var(--e-global-color-secondary, #211e1f); --ept-color-ink-900: #1e1e1e; --ept-color-black: #000; /* --- Role semantyczne ----------------------------------------------- */ --ept-color-text: var(--ept-color-ink); --ept-color-text-inverse: var(--ept-color-white); --ept-color-bg: var(--ept-color-white); --ept-color-bg-dark: var(--ept-color-ink); --ept-color-surface: var(--ept-color-gray-100); --ept-color-border: rgba(175, 175, 175, 0.18); --ept-color-accent: var(--ept-color-brand); --ept-color-accent-hover: var(--ept-color-brand-dark); /* Tekst pomocniczy ma własną wartość, nie czyta --secondary z kita, bo musi spełniać WCAG 1.4.3. Zmierzone kontrasty: #757575 (z kita) → 4.61:1 na białym, 4.12:1 na #F2F2F2 — nie zdaje #6A6A6A (poniżej) → 5.41:1 na białym, 4.83:1 na #F2F2F2 — zdaje AA Labele typu „TERAPIA” mają 12–14px, więc obowiązuje próg 4.5:1. */ --ept-color-text-muted: #6a6a6a; --ept-color-text-muted-on-dark: #a5a5a5; /* Linki dziedziczą kolor tekstu kontekstu; podświetlenie marką. Hover ma własną wartość, nie czyta --dark-blue, bo musi spełniać WCAG 1.4.3 (4.5:1 dla tekstu poniżej 24px). Zmierzone kontrasty: #00889d (z kita) → 4.19:1 na białym, 3.75:1 na #F2F2F2 — nie zdaje #007A8C (poniżej) → 5.05:1 na białym, 4.51:1 na #F2F2F2 — zdaje AA Na ciemnym tle oba warianty turkusu są za ciemne (≈3.5:1), dlatego tam podświetlamy jasnym brandem: #19CBE1 daje 8.40:1 na #211E1F. */ --ept-color-link: inherit; --ept-color-link-hover: #007a8c; --ept-color-link-hover-on-dark: var(--ept-color-brand); } /* -------------------------------------------------------------------------- Nadpisanie zmiennej kita dla WCAG. Widgety Elementora na homepage czytają własną zmienną `var(--secondary)` (np. eyebrow „TERAPIA"), nie tokeny --ept-*. Ustawiamy ją na `body`, które jest bliższym przodkiem niż `:root` kita, więc wygrywa dla wszystkich widgetów bez walki specyficznością. To świadomy wyjątek od zasady „Elementor wygrywa": #757575 daje tylko 4.12:1 na #F2F2F2 i nie zdaje AA. #6A6A6A daje 4.83:1 (AA ✓). -------------------------------------------------------------------------- */ body { --secondary: #6a6a6a; } /* Sekcje na ciemnym tle — przełącza hover linków i tekst pomocniczy na jasne warianty (#A5A5A5 daje 6.71:1 na #211E1F). Dodaj tę klasę kontenerowi w Elementorze (Advanced → CSS Classes). */ .ept-on-dark { --ept-color-link-hover: var(--ept-color-link-hover-on-dark); --ept-color-text-muted: var(--ept-color-text-muted-on-dark); --secondary: var(--ept-color-text-muted-on-dark); }