/* Theme Name: K-Esthetic Child Theme URI: https://k-esthetic.pl Description: Motyw potomny Hello Elementor dla K-Esthetic. Nosi tokeny designu (mono: czerń / biel / jeden akcent / szarości) oraz warstwę wydajnościową (self-host fontów, defer, preload). Budowany w ramach COS-24 / COS-255. Author: Deverr Web Agency Author URI: https://deverr.pl Template: hello-elementor Version: 1.0.1 License: GNU General Public License v3 or later License URI: https://www.gnu.org/licenses/gpl-3.0.html Text Domain: k-esthetic-child */ /* ========================================================================= 1. TOKENY DESIGNU — mono Jedno źródło prawdy dla CSS. Wartości lustrzane wobec Global Colors aktywnego kitu Elementora (post 4993) — przy zmianie aktualizuj OBA miejsca. Kontrast liczony wobec #FFFFFF (WCAG 2.1). ========================================================================= */ :root { /* Ink i biel */ --ke-ink: #241923; /* 16,9:1 — nagłówki, tekst nośny, tła inwersyjne */ --ke-ink-soft: #413142; /* 9,9:1 — wariant ink dla warstw/hoverów */ --ke-white: #FFFFFF; /* Akcent — JEDEN */ --ke-accent: #7B3F5F; /* 7,7:1 — linki, CTA, stany aktywne; biel na nim 7,7:1 */ /* Szarości */ --ke-grey-50: #F6F5F6; /* tło sekcji przełamujące biel */ --ke-grey-100: #EEECED; /* tło kart, pasków */ --ke-grey-200: #DEDCDE; /* hairline — linie DEKORACYJNE, nie kontrolki */ --ke-grey-400: #8C8A8C; /* 3,4:1 — obramowania KONTROLEK (SC 1.4.11 ≥ 3:1) */ --ke-grey-600: #6B676B; /* 5,6:1 — tekst drugorzędny (AA dla tekstu) */ --ke-text: #2B2530; /* 14,9:1 — tekst podstawowy (D-635, 2026-10-01: jedna wartosc na :root dla koszyka, ekranu prezentu i panelu; bylo #333333) */ /* Tokeny komponentow eCommerce (D-630, 2026-10-01): koszyk, karta i ekran prezentu, panel koszyka, pusty koszyk. Jedno zrodlo na :root - dotad tylko lokalnie w skorce modulu prezentow. */ --ke-g50: #F6F5F6; /* = --ke-grey-50 */ --ke-g100: #EEECED; /* = --ke-grey-100; :hover przyciskow obrysowych */ --ke-hairline: #DEDCDE; /* = --ke-grey-200; linie dekoracyjne, :active obrysowych */ --ke-border: #C6C4C6; /* 1,73:1 - obrys DEKORACYJNY */ --ke-kontrola: #8C8A8C; /* 3,43:1 = --ke-grey-400; obrys KONTROLEK */ --ke-muted: #6B676B; /* 5,56:1 = --ke-grey-600; tekst drugorzedny */ --ke-fine: #454049; /* 10,08:1 - nota ustawowa */ --ke-dis: #5E5B5E; /* 5,70:1 na #EEECED - tekst stanu wylaczonego */ --ke-ink800: #413142; /* = --ke-ink-soft; tylko tekst/obrys, nie stany (D-595) */ --ke-ink-deep: #121212; /* 18,7:1 - :hover/:active przyciskow wypelnionych (D-595, D-616) */ /* Motyw M-5 (luk-horyzont, D-624): tokeny jednego zrodla na :root (2026-10-02, ST5 b) */ --ke-mot-luk: #A8A5A8; /* kolor kreski luku (dekoracja) */ --ke-mot-luk-a: .62; /* krycie luku */ --ke-mot-luk-w: 1px; /* grubosc kreski luku */ /* Skala odstępów 8 px (kanon: STANDARD — Design i odstępy) */ --ke-space-4: 4px; --ke-space-8: 8px; --ke-space-12: 12px; --ke-space-16: 16px; --ke-space-20: 20px; --ke-space-24: 24px; --ke-space-32: 32px; --ke-space-40: 40px; --ke-space-48: 48px; --ke-space-56: 56px; --ke-space-64: 64px; --ke-space-80: 80px; --ke-space-96: 96px; --ke-space-120: 120px; --ke-space-160: 160px; /* Układ */ --ke-content-width: 1200px; } /* ========================================================================= 2. FOKUS KLAWIATUROWY Hello Elementor nie daje wlasnego wskaznika, a jego reset.css (3.5.x) ustawia `a/button/input/select/textarea:focus-visible{outline:2px solid #000}` (0-1-1) i `[tabindex]:not([tabindex="-1"]):focus-visible` (0-3-0) - spoza palety. Kolor = --ke-ink (D-661, 2026-10-04; wczesniej --ke-accent - fiolet wycofany D-595/D-616). Specyficznosc 0-1-2 / 0-3-1: wygrywa z resetem Hello i kitem 4993 (0-1-0), przegrywa z regulami komponentow (0-2-0 i wyzej) - te zostaja. Token --ke-accent zostaje na :root dla innych zastosowan. ========================================================================= */ html :is(a, button, input, select, textarea, summary):focus-visible, html [tabindex]:not([tabindex="-1"]):focus-visible { outline: 2px solid var(--ke-ink); outline-offset: 2px; } /* Pierscien do wewnatrz tam, gdzie przodek przycina go `overflow`, element ma pelna szerokosc kontenera albo sasiad go przykrywa (HC-FK2, E2c batch 1). Przedrostek `html body` - reguly inline komponentow o tej samej wadze stoja w kaskadzie pozniej. */ html body .kh-sz .kh-acc > button:focus-visible, html body .woocommerce-cart-form :is(.kos-kupon__sum, .kos-stepper__akcja, .product-name a):focus-visible, html body .jet-filter .jet-filter-label:focus-visible:not(#ke-fk-x) { outline-offset: -4px; } /* Miniatury galerii PDP: pasek przewijany - nakladkowy suwak (telefon) przykrywa dolne 4 px miniatury; pierscien glebiej (E2c 1b). */ html body .ke-pdp__miniatury button.ke-pdp__miniatura:focus-visible { outline-offset: -7px; } /* Kafel produktu ma overflow:hidden (kanon kafla) - pierscien tytulu jest przyciety. Caly kafel jest celem (D-279): wskaznik na kaflu, pierscien tytulu zdjety. */ html body .ke-kafel:has(.ke-ktyt a:focus-visible) { outline: 2px solid var(--ke-ink); outline-offset: -2px; } html body .ke-kafel .ke-ktyt a:focus-visible { outline: none; box-shadow: none; } /* Slajd hero: pierscien slajdu jest przykryty - wskaznik na warstwie nad slajdami (ink + wewnetrzna linia biala: widoczny na jasnym i ciemnym zdjeciu). */ html body #home-hero .ke-hero-slajd:focus-visible { outline: none; box-shadow: none; } html body #home-hero .ke-hero-slajdy:has(.ke-hero-slajd:focus-visible)::after { content: ""; position: absolute; inset: 0; z-index: 10; pointer-events: none; border: 3px solid var(--ke-ink); box-shadow: inset 0 0 0 2px var(--ke-white); } /* Miniatura w koszyku: link liniowy, dysk zdjecia (pozycjonowany) przykrywal jego obrys. W stanie fokusu link staje sie blokiem z wlasna warstwa (obrys rysowany nad dyskiem), zaokraglony jak dysk, wskaznik do wewnatrz (lewa krawedz kolumny). Wskaznik NA KONTROLCE (E2ab-ST4), geometria bez zmian. */ html body .woocommerce-cart-form .product-thumbnail a:focus-visible { display: block; position: relative; z-index: 1; border-radius: 50%; outline: 2px solid var(--ke-ink); outline-offset: -3px; box-shadow: none; } html body .woocommerce-cart-form .product-thumbnail a:focus-visible .kos-poz__foto { outline: none; } /* Kit 4993 ustawia przyciskom w :focus obramowanie --ke-ink-soft (wycofane w stanach, D-595) - ta sama waga + `html`, kolor ink. Pola formularza Elementora: cien rgba(0,0,0,.1) przy :focus spoza palety - zdjety (wskaznikiem jest obrys). */ html .elementor-kit-4993 button:focus, html .elementor-kit-4993 input[type="button"]:focus, html .elementor-kit-4993 input[type="submit"]:focus, html .elementor-kit-4993 .elementor-button:focus { border-color: var(--ke-ink); } html .elementor-field-group .elementor-field-textual:focus { box-shadow: none; } /* ========================================================================= 3. OBRAMOWANIA PÓL FORMULARZA — pomost do czasu przebudowy szablonów Zmierzone na stagingu 2026-08-09: pola (m.in. wyszukiwarka JetSearch) miały obramowanie #BBBABB na bieli = 1,93:1 przy grubości 0,67 px. SC 1.4.11 wymaga ≥ 3:1 dla granic kontrolek. Token --ke-grey-400 = 3,44:1. `!important` jest konieczne: style Jeta ładują się po arkuszu motywu. USUNĄĆ, gdy Etap B/C zdejmie legacy szablony i widżety Jet. ========================================================================= */ .jet-ajax-search__field, .woocommerce form .form-row input.input-text, .woocommerce form .form-row select, .woocommerce form .form-row textarea, input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], select, textarea { border: 1px solid var(--ke-grey-400) !important; } /* Pasek administratora ma własny, poprawny kontrast — nie ruszamy go. */ #wpadminbar input, #wpadminbar select { border-width: 0 !important; }