/* ========================================================================= fryzjerkosmetyczka — motyw potomny Flatsome Arkusz przeniesiony z wizualizacji. Kroje laduje functions.php przez wp_enqueue_style, nie @import. Reset zawężony do .fk-app. Prefiks klas: fk- ========================================================================= */ /* ========================================================================= FRYZJERKOSMETYCZKA — wizualizacja, wersja 3 „Gabinet" Nisza: gabinety kosmetyczne i salony fryzjerskie. Jasno, klinicznie, jeden akcent. Zero zaokraglen, zero zlota, zero cieni. Prefiks klas: fk- ========================================================================= */ /* --- 0. Reset (zawężony do .fk-app) ------------------------------------ Wewnątrz WordPressa reset nie może być globalny: `ul { list-style: none }` skasowałby punktory w treści wpisów, w podsumowaniu koszyka i w oknach bramki platnosci. Globalnie zostaja tylko rzeczy bezpieczne. */ .fk-app *, .fk-app *::before, .fk-app *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 16px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .fk-app *, .fk-app *::before, .fk-app *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* Pas bezpieczeństwa dla układu „w ramce” Flatsome. Motyw zdejmuje klasy `boxed` i `framed` filtrem `body_class`, ale to zależy od kolejności filtrów. Ta reguła jest od niej niezależna: ma wyższą specyficzność (0,2,1) niż `body.boxed` Flatsome (0,1,1), więc wygrywa bez względu na to, który arkusz wypisze się później. Bez tego `body` dostaje `max-width: 1350px`, a nagłówek, szuflada i pasek zakupu — jako `position: fixed` — zostają na pełnej szerokości okna i wystają poza treść. */ body.fk-redesign.boxed, body.fk-redesign.framed { max-width: none; margin-inline: 0; } body.fk-redesign { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-ui); font-size: 1rem; font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Reset o ZEROWEJ specyficzności. `:where()` nie wnosi wagi, więc `:where(.fk-app) :where(ul, ol)` to (0,0,0) — reguła zdejmuje style przeglądarki, ale przegrywa z każdą regułą autorską. To nie jest kosmetyka. Motyw nadpisuje nagłówek i stopkę, więc koszyk, kasa i moje konto renderują się wewnątrz `.fk-app`, a ich wygląd daje arkusz WooCommerce selektorami o specyficzności (0,1,0). Reset pisany jako `.fk-app ul` miałby (0,1,1) i wygrywał: komunikaty Woo traciłyby wcięcie, a przyciski koszyka tło i ramkę. */ :where(.fk-app) :where(ul, ol) { list-style: none; margin: 0; padding: 0; } :where(.fk-app) :where(figure, blockquote, dl, dd) { margin: 0; } :where(.fk-app) :where(h1, h2, h3, h4, h5, h6, p) { margin: 0; } /* Listy wpisane w edytorze muszą odzyskać strukturę — ale TYLKO tam, gdzie arkusz ich nie rysuje. `.fk-proza ul` ma własny znacznik (różowa kreska przez `::before`) i układ grid; dołożenie tam `disc` dawało DWA znaczniki naraz i wcięcie 21,6 px, którego projekt nie przewiduje. Listy numerowane w prozie nie mają własnego stylu, więc te przywracamy. */ .fk-app .woocommerce-Tabs-panel ul, .fk-app .fk-tresc ul { list-style: disc; padding-left: 1.35em; } .fk-app .fk-proza ol, .fk-app .woocommerce-Tabs-panel ol, .fk-app .fk-tresc ol { list-style: decimal; padding-left: 1.35em; } .fk-app .fk-proza ol li, .fk-app .woocommerce-Tabs-panel li, .fk-app .fk-tresc li { margin-bottom: .4em; } :where(.fk-app) :where(img, picture, video, svg) { display: block; max-width: 100%; } :where(.fk-app) :where(img) { height: auto; } /* Ikona bez klasy = nasza ikona ze sprite'a; bez rozmiaru SVG rozdyma się do 300x150 px, więc reguła musi zostać. Ale BEZ prefiksu `.fk-app` w wadze: `.fk-app svg:not([class])` to (0,2,0) i wygrywało z regułami komponentów w rodzaju `.fk-topbar__usp svg` (0,1,1) — ikony w pasku górnym rosły z 14 na 17 px. `:where()` zeruje wagę prefiksu i kolejność wraca do normy. */ :where(.fk-app) svg:not([class]) { width: 17px; height: 17px; flex: none; } /* Link bez klasy w naszej prozie ma być różowy — celowa decyzja, nie reset. */ /* Waga celowo obniżona przez :where() do (0,1,0). Wersja bez niego miala (0,2,1) i bila KAZDA regule kontekstowa pisana jako `.fk-foot a` czy `.fk-card__title a` (0,1,1). Skutek zmierzony na produkcji: odnosniki w ciemnej stopce renderowaly sie rozem zamiast mgla, z kontrastem 3,04 zamiast 7,15 — mimo ze regula naprawiajaca to istniala w pliku i wygladala na dzialajaca. */ .fk-app :where(a:not([class])) { color: var(--rose); text-underline-offset: .2em; } :where(.fk-app) :where(a) { color: inherit; } :where(.fk-app) :where(button, input, select, textarea) { font: inherit; color: inherit; } /* Reset przycisków WLASNYCH — z prawdziwą wagą, nie przez `:where()`. Poprzednia wersja tej reguły miała (0,0,0) i przegrywała z regułą Flatsome `button { padding: 0 1.2em }`, czyli (0,0,1). Skutki były widoczne na produkcji: lupa w wyszukiwarce miała **2,78 px** zamiast 17 (padding 18,624 px zjadał 42-pikselowy przycisk, a `max-width: 100%` domykało ikonę do resztki), strzałki karuzel 7 px, a wszystkie przyciski dostawały ramkę 1 px i krój Lato z Flatsome. Waga (0,1,0): `.fk-app` liczy się jako klasa, `:where()` zeruje resztę. To wystarcza, żeby wygrać z selektorem elementu Flatsome, a jednocześnie remisuje z komponentami (`.fk-btn`, `.fk-tab`), które stoją NIŻEJ w tym pliku — więc to one mają ostatnie słowo. Kolejność w pliku jest tu częścią mechanizmu, nie przypadkiem. Zakres zawężony do `[class*="fk-"]`: przyciski WooCommerce (koszyk, kasa) mają zostać przy swoim wyglądzie. */ .fk-app :where(button[class*="fk-"]) { padding: 0; /* `margin: 0` nie jest tu na zapas. Flatsome nadaje przyciskom margines dolny, a reset przez `:where()` go nie zerował. Zmierzone: kontener przełącznika widoku miał 57,44 px przy przyciskach 42 — po wyzerowaniu dokładnie 44, czyli przycisk plus obwódka. */ margin: 0; border: 0; background: none; font: inherit; color: inherit; line-height: inherit; letter-spacing: inherit; text-transform: none; text-shadow: none; box-shadow: none; border-radius: 0; min-height: 0; cursor: pointer; } /* Flatsome nadaje `h1–h6` własny krój (Lato). Nasze nagłówki niemal zawsze niosą klasę `.fk-h*`, ale nie wszystkie: pytanie w FAQ to `