/* Theme Name: Dawid Kukliński — Divi Child Theme URI: https://dawidkuklinski.pl/ Description: Motyw potomny Divi dla dawidkuklinski.pl. Nosi nową warstwę wizualną opartą o tokeny wyciągnięte z Figmy (assets/css/tokens.css). Wygląd trzymamy w plikach, nie w Divi Builderze — darmowy WP Staging nie ma „push to live", więc tylko pliki przenoszą się na produkcję czysto. Author: Hubert Template: Divi Version: 0.19.2 Requires PHP: 7.4 Text Domain: dk-divi-child */ /* ============================================================================= UWAGA — co to jest, a czym jeszcze nie jest ============================================================================= To jest RUSZTOWANIE motywu potomnego, nie gotowa warstwa wizualna. Poniżej siedzi baza: kroje pisma, kolory, skala typograficzna i responsywność, podpięte pod selektory Divi. Sekcje strony (hero, karty na zdjęciach, ciemny pas, portfolio, formularz) będą dokładane osobno. Wszystkie wartości pochodzą z assets/css/tokens.css — nie wpisywać tu surowych hexów ani pikseli, tylko zmienne. Jeśli czegoś brakuje w tokenach, najpierw dopisać je tam. RESPONSYWNOŚĆ: rozmiary biorą się ze zmiennych `--dk-fluid-*`, które skalują się płynnie między 390px a 1920px. Breakpointy poniżej służą do przełamywania UKŁADU (kolumny, szerokości), nie do zmiany rozmiarów czcionek — tym zajmuje się clamp(). Wartości 980px i 767px są celowo takie same jak w Divi Builderze. ========================================================================== */ /* ----------------------------------------------------------------------------- Baza -------------------------------------------------------------------------- */ /* SPECYFICZNOŚĆ — czemu `html body`, a nie samo `body`. Divi wypisuje własne style bazowe INLINE (bloki `divi-style-parent-inline` i `et-critical-inline`), m.in. `body { font-size: 14px }` oraz `h1 { font-size: 30px }`, `h2 { 26px }`, `h3 { 22px }`. Mają tę samą specyficzność co goła reguła na elemencie (0,0,1), ale stoją PÓŹNIEJ w dokumencie, więc przy remisie wygrywają. `html body` (0,0,2) i `html body h1` (0,0,3) rozstrzygają to bez !important. Sprawdzone na Divi 4.27.4 przez odczyt cssRules na żywej stronie. ZASIĘG — czemu `:where(.dk-v2)` (decyzja 2026-08-03). Klasa `dk-v2` siedzi na WYŁĄCZNIE na szablonie landinga. Motyw potomny jedzie od teraz na produkcji, gdzie oprócz landinga żyją stare strony zbudowane w Divi Builderze (/rzemioslo/, /portfolio/, /umow-spotkanie/, wersja EN). Gdyby te reguły były globalne, publikacja JEDNEJ podstrony przemalowałaby cały serwis. ⚠ MUSI to być `:where(.dk-v2)`, a NIE `.dk-v2` — i to nie jest kwestia gustu. `:where()` ma z definicji specyficzność ZERO, więc zawęża zasięg, nie ruszając kaskady. Zwykłe `.dk-v2` dokłada klasę i podnosi wagę reguł bazowych POWYŻEJ klas komponentów, przez co reguła na elemencie zaczyna bić `.dk-*`: .dk-hero-title (0,1,0) html body.dk-v2 h1 (0,1,3) ← wygrywa: ta sama liczba klas, a więcej elementów html body:where(.dk-v2) h1 (0,0,3) ← przegrywa, i o to chodzi Kosztowało to realną wpadkę na produkcji 2026-08-03: tytuł hero zrobił się czarny zamiast białego i zjechał ze 104px na 46px, a `:where`-owa reguła `img { height: auto }` przebiła `.dk-hero__bg { height: 100% }` — zdjęcie rozwinęło się na pełne 2867px zamiast wypełnić kadr i hero pokazywał pustą ścianę nad głową. Objaw wyglądał na „rozjechane zdjęcie", przyczyna leżała w jednym znaku specyficzności. Gdy nowa warstwa wizualna obejmie resztę witryny, zasięg się poszerza: wystarczy zdjąć `:where(.dk-v2)` z tych selektorów. Do tego czasu każda nowa reguła bazowa (element bez klasy `.dk-*`) MUSI być tak zawężona. */ html body:where(.dk-v2), body:where(.dk-v2).et-db #et-boc .et-l { background-color: var(--dk-bg); color: var(--dk-ink-body); font-family: var(--dk-font-body); font-size: var(--dk-fluid-body); font-weight: var(--dk-fw-regular); letter-spacing: var(--dk-ls-body-r); line-height: var(--dk-lh-body); } /* Nic nie może rozpychać strony w poziomie. Przy płynnej typografii i długich słowach (a „Kukliński" i „bespoke" to jeszcze nic — jest „made-to-measure") to najczęstsza przyczyna poziomego paska przewijania na telefonie. */ :where(.dk-v2) img, :where(.dk-v2) video, :where(.dk-v2) iframe { height: auto; max-width: 100%; } /* ----------------------------------------------------------------------------- Nagłówki Bricolage Grotesque jest fontem zmiennym — bez font-variation-settings przeglądarka użyje domyślnych osi, a projekt zakłada opsz 14 / wdth 100. -------------------------------------------------------------------------- */ html body:where(.dk-v2) h1, html body:where(.dk-v2) h2, html body:where(.dk-v2) h3, html body:where(.dk-v2) h4, html body:where(.dk-v2) h5, html body:where(.dk-v2) h6 { color: var(--dk-ink); font-family: var(--dk-font-display); font-variation-settings: var(--dk-display-axes); font-weight: var(--dk-fw-regular); /* Tracking -2% należy w Figmie WYŁĄCZNIE do stylu „Body" (Montserrat 20px). Ustawiony na body dziedziczył się na nagłówki, które mają letterSpacing: 0 — wychodziło ok. -0.35px za dużo. Zerujemy jawnie. */ letter-spacing: normal; /* Długie polskie złożenia w wielkich stopniach potrafią wyjść poza kontener. Dzielenie wyrazów włączamy dopiero na wąskich ekranach — patrz niżej. */ overflow-wrap: break-word; } html body:where(.dk-v2) h1 { font-size: var(--dk-fluid-h2); /* Figma „Hero S", 61px — patrz uwaga 4 w tokenach */ line-height: var(--dk-lh-h2); } html body:where(.dk-v2) h2 { font-size: var(--dk-fluid-h1); /* Figma „H1", 49px */ line-height: var(--dk-lh-h1); } html body:where(.dk-v2) h3 { font-size: var(--dk-fluid-h3); line-height: var(--dk-lh-h3); } /* Hero i wielki display — interlinia jako współczynnik, nie piksele. W Figmie są podane bezwzględnie (159.887px / 135px); przy płynnym rozmiarze czcionki sztywna wartość rozjechałaby się natychmiast. */ .dk-hero-title { font-family: var(--dk-font-display); font-size: var(--dk-fluid-hero); font-variation-settings: var(--dk-display-axes); letter-spacing: normal; /* patrz uwaga przy nagłówkach */ line-height: var(--dk-lh-hero-r); } .dk-display { font-family: var(--dk-font-display); font-size: var(--dk-fluid-display); font-variation-settings: var(--dk-display-axes); letter-spacing: normal; line-height: var(--dk-lh-display-r); } /* Kursywa w nagłówkach to w tym projekcie zawsze Playfair Display, nigdy pochylony Bricolage. Divi nie wie o tym nic — stąd jawna reguła. */ :where(.dk-v2) h1 em, :where(.dk-v2) h2 em, :where(.dk-v2) h3 em, :where(.dk-v2) h4 em, :where(.dk-v2) h5 em, :where(.dk-v2) h6 em, :where(.dk-v2) h1 i, :where(.dk-v2) h2 i, :where(.dk-v2) h3 i, :where(.dk-v2) h4 i, :where(.dk-v2) h5 i, :where(.dk-v2) h6 i, .dk-hero-title em, .dk-display em, .dk-accent { font-family: var(--dk-font-accent); font-style: italic; font-variation-settings: normal; } /* ----------------------------------------------------------------------------- Tekst treści -------------------------------------------------------------------------- */ .dk-lead { font-size: var(--dk-fluid-lead); letter-spacing: var(--dk-ls-lead); line-height: var(--dk-lh-lead); } .dk-muted { color: var(--dk-ink-muted); } /* Kolumna tekstu z makiety ma 457px. Poniżej tej szerokości bierze 100%, a nie wymusza przewijania. */ .dk-measure { max-width: min(var(--dk-measure), 100%); } /* ----------------------------------------------------------------------------- Kontener i siatka -------------------------------------------------------------------------- */ .dk-container { margin-inline: auto; max-width: var(--dk-container); padding-inline: var(--dk-fluid-gutter); width: 100%; } .dk-content { margin-inline: auto; max-width: min(var(--dk-content), 100%); } /* Trzykolumnowy blok „o mnie" (Figma 68:1243) — 3 × 457px z gapem 87px. */ .dk-cols-3 { display: grid; gap: var(--dk-fluid-gap-cols); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Karta tekstowa na tle zdjęcia (Figma 68:1228 i pokrewne) — 673px, px-100 py-50. */ .dk-card { background-color: var(--dk-bg); max-width: min(var(--dk-card), 100%); padding: var(--dk-fluid-sp-6) var(--dk-fluid-sp-7); } /* ----------------------------------------------------------------------------- Sekcja na ciemnym tle -------------------------------------------------------------------------- */ .dk-section--dark { background-color: var(--dk-bg-dark); color: var(--dk-on-dark); } .dk-section--dark h1, .dk-section--dark h2, .dk-section--dark h3, .dk-section--dark .dk-hero-title, .dk-section--dark .dk-display { color: var(--dk-on-dark); } .dk-section--dark .dk-accent { color: var(--dk-on-dark-accent); } /* ----------------------------------------------------------------------------- Tekst dekoracyjny („pytań / pasji / pracy / chęci") -------------------------------------------------------------------------- */ /* Tekst rotujący (Figma 73:250 „Rotating Text"). Cztery słowa leżą jedno na drugim w tej samej komórce gridu — widoczność przełącza animacja w sections.css. */ .dk-decor { color: var(--dk-decor); display: grid; font-family: var(--dk-font-accent); font-size: var(--dk-fluid-decor); justify-items: start; letter-spacing: normal; line-height: var(--dk-lh-decor-r); opacity: var(--dk-decor-opacity); white-space: nowrap; /* BEZ overflow: hidden. Interlinia 0.8 celowo robi pudełko niższe od liter, więc wersaliki i polskie ogonki wychodzą poza nie w obie strony. Przycinanie ucinało górę „chęci" i dolny ogonek „ę”. Poziome rozpychanie strony jest już zablokowane przez `body.dk-v2 { overflow-x: hidden }` — tutaj nie trzeba nic ciąć. */ } /* ----------------------------------------------------------------------------- Przycisk CTA (Figma 53:1264) Divi opakowuje przyciski w .et_pb_button i dokleja własną strzałkę przez ::after. Projekt ma własną ikonę arrow-up-right po prawej stronie, więc pseudo-element Divi wyłączamy, żeby nie było dwóch strzałek. -------------------------------------------------------------------------- */ .dk-btn, .et_pb_button.dk-btn { align-items: center; background-color: var(--dk-btn-bg); border: 0; border-radius: var(--dk-radius-pill); color: var(--dk-btn-text); /*