/* ============================================================================= dawidkuklinski.pl — design tokens (SZKIC, nie wdrażać) ============================================================================= Źródło: Figma Desktop MCP, plik "Dawid_Kukliński_Home_v2A", strona "Page 3", frame 68:1214 (1920 × 15932). Odczyt 2026-07-31. Status: szkic. Nic z tego pliku nie jest jeszcze wpięte w żaden motyw. Docelowo trafi do child theme Divi jako pierwszy blok `style.css`. Legenda pochodzenia wartości: [VAR] — zmienna Figmy (get_variable_defs), wartość 1:1 [NODE] — odczytane z konkretnego węzła (get_design_context), wartość 1:1 [DERIV] — wyprowadzone przeze mnie z powtarzających się wartości w layoucie [?] — niepewne, opisane w komentarzu — do potwierdzenia ========================================================================== */ :root { /* --------------------------------------------------------------------- KOLORY W Figmie kolory NIE są zmiennymi — są wpisane jako surowe hexy przy węzłach. Nazwy semantyczne poniżej są moje, wartości pochodzą z designu. --------------------------------------------------------------------- */ /* Tła */ --dk-bg: #ededed; /* [NODE] tło strony + tło kart tekstowych */ --dk-bg-dark: #141416; /* [NODE] ciemny pas „Moja perspektywa" */ /* Tekst na jasnym tle */ --dk-ink: #000000; /* [NODE] nagłówki Bricolage */ --dk-ink-body: #2c2721; /* [NODE] podstawowy tekst treści */ --dk-ink-muted: #80786d; /* [NODE] tekst drugorzędny */ --dk-ink-placeholder: #585862; /* [NODE] placeholdery formularza + ramka checkboxa */ /* Tekst na ciemnym tle */ --dk-on-dark: #ffffff; /* [NODE] */ --dk-on-dark-accent: #8d8d98; /* [NODE] kursywa Playfair w ciemnym pasie */ /* Akcenty */ --dk-accent-warm: #4a453e; /* [NODE] kursywa „Opisz czego potrzebujesz" ORAZ tło przycisku w stanie Variant2 */ --dk-decor: #a29580; /* [NODE] wielki tekst rotujący, renderowany z opacity: .5 — patrz --dk-decor-opacity */ --dk-decor-opacity: .5; /* [NODE] */ /* Przycisk (component set 53:1264) */ --dk-btn-bg: #1e1e1e; /* [NODE] Property 1=Default */ --dk-btn-bg-alt: #4a453e; /* [NODE] Property 1=Variant2 — brak nazwy stanu w Figmie; zakładam :hover, do potwierdzenia */ --dk-btn-text: #ffffff; /* [NODE] */ /* Linie */ --dk-rule: #585862; /* [NODE] POTWIERDZONE 2026-07-31. Podkreślenia pól formularza są eksportowane jako SVG, więc koloru nie było w kodzie. Pobrałem plik Line 1 i odczytałem atrybut: . Zgadza się z ramką checkboxa 68:1300. */ --dk-rule-active: #C6A664; /* [NODE] ODKRYTE 2026-07-31 przy węzłach 83:1712-1722. Linia pod polem, w którym jest wpisany tekst (83:1713), ma inny kolor niż linie pod pustymi polami (83:1717, 83:1722 → #585862). Projekt rozróżnia więc stan pusty i wypełniony. Tego nie widać po samych zrzutach — wychodzi dopiero z atrybutu stroke w SVG. */ --dk-rule-width: 1px; /* [NODE] inset[-1px] przy liniach */ /* --------------------------------------------------------------------- TYPOGRAFIA — rodziny Trzy kroje, wszystkie z Google Fonts. Bricolage Grotesque jest zmienny (variable font) — design ustawia osie: opsz 14, wdth 100. --------------------------------------------------------------------- */ --dk-font-display: "Bricolage Grotesque", system-ui, sans-serif; /* [NODE] nagłówki */ --dk-font-accent: "Playfair Display", Georgia, serif; /* [NODE] tylko kursywa */ --dk-font-body: "Montserrat", system-ui, sans-serif; /* [NODE] treść */ --dk-display-axes: "opsz" 14, "wdth" 100; /* [NODE] font-variation-settings */ /* --------------------------------------------------------------------- TYPOGRAFIA — skala Wartości desktopowe (viewport 1920). Cztery pozycje mają w Figmie własne zmienne — oznaczone [VAR]. Reszta to surowe rozmiary z węzłów. --------------------------------------------------------------------- */ /* Hero — „Razem stworzymy ubranie, które opowiada Twoją historię" */ --dk-fs-hero: 151.892px; /* [NODE] 68:1216 */ --dk-lh-hero: 159.887px; /* [NODE] wartość bezwzględna, nie mnożnik (≈1.0526) */ /* Display — „Wszystko / zaczęło się od" */ --dk-fs-display: 126px; /* [NODE] 68:1251 */ --dk-lh-display: 135px; /* [NODE] wartość bezwzględna (≈1.071) */ /* H2 — nagłówki sekcji. Figma: zmienna „Hero S" */ --dk-fs-h2: 61px; /* [VAR] Hero S */ --dk-lh-h2: 1.2; /* [VAR] */ /* H1 — Figma: zmienna „H1”. W layoucie użyta raz (68:1219), realnie mniejsza od „Hero S”. Nazewnictwo Figmy jest tu mylące — zostawiam obie pozycje, bo obie występują w designie. */ --dk-fs-h1: 49px; /* [VAR] H1 */ --dk-lh-h1: 1.2; /* [VAR] */ /* H3 / lead-in — Bricolage 31px. Dwa różne interlinie w zależności od tła */ --dk-fs-h3: 31px; /* [NODE] */ --dk-lh-h3: 1.3; /* [NODE] na jasnym tle + etykieta przycisku */ --dk-lh-h3-loose: 1.5; /* [NODE] w ciemnym pasie 68:1268 */ /* Lead — Montserrat 25px. Figma: zmienna „Lead" */ --dk-fs-lead: 25px; /* [VAR] Lead */ --dk-lh-lead: 1.5; /* [VAR] */ --dk-ls-lead: 0; /* [VAR] */ /* Body — Montserrat 20px. Figma: zmienna „Body" */ --dk-fs-body: 20px; /* [VAR] Body */ --dk-lh-body: 1.6; /* [VAR] */ --dk-ls-body: -0.4px; /* [VAR] zmienna trzyma -2 (procent osi); przy 20px daje -0.4px — tak też renderuje to eksport z Figmy. Nie wpisywać „-2px". */ /* Tekst dekoracyjny rotujący („pytań / pasji / pracy / chęci") */ --dk-fs-decor: 461.689px; /* [NODE] 73:250, Playfair Regular */ --dk-lh-decor: 371px; /* [NODE] wartość bezwzględna */ /* Wagi */ --dk-fw-regular: 400; /* [NODE] domyślna dla wszystkich trzech krojów */ --dk-fw-semibold: 600; /* [NODE] wyłącznie etykieta przycisku */ /* --------------------------------------------------------------------- ODSTĘPY Skala wyprowadzona z faktycznie powtarzających się wartości w layoucie. Nie jest to czysta skala 4/8 — design ma własny rytm oparty o 50 i 100. --------------------------------------------------------------------- */ --dk-sp-1: 8px; /* [NODE] gap w stopce (dane kontaktowe) */ --dk-sp-2: 16px; /* [NODE] padding pionowy pól formularza */ --dk-sp-3: 24px; /* [NODE] gap checkbox ↔ etykieta */ --dk-sp-4: 30px; /* [NODE] margines zewnętrzny kontenera, gap w listach, padding pionowy przycisku */ --dk-sp-5: 32px; /* [NODE] gap między polami formularza w rzędzie */ --dk-sp-6: 50px; /* [NODE] podstawowy gap sekcji + padding poziomy przycisku */ --dk-sp-7: 100px; /* [NODE] padding poziomy kart tekstowych */ --dk-sp-8: 130px; /* [NODE] padding poziomy sticky headera */ --dk-sp-9: 160px; /* [NODE] lewy margines bloków tekstowych pełnej szerokości */ /* Jednorazowe, świadomie poza skalą */ --dk-sp-gap-cols: 87px; /* [NODE] gap w trzykolumnowym bloku „o mnie" 68:1243 */ --dk-sp-icon-pt: 19px; /* [NODE] padding ikony strzałki w przycisku */ --dk-sp-icon-pb: 25px; /* [NODE] j.w. — celowo niesymetryczny */ /* --------------------------------------------------------------------- LAYOUT --------------------------------------------------------------------- */ --dk-frame: 1920px; /* [NODE] szerokość projektowa */ --dk-container: 1860px; /* [NODE] kontener treści (frame − 30px z każdej strony) */ --dk-gutter: 30px; /* [DERIV] (1920 − 1860) / 2 */ --dk-content: 1111px; /* [NODE] blok treści wyśrodkowany (nagłówki sekcji) */ --dk-measure: 457px; /* [NODE] kolumna tekstu — miara wiersza */ --dk-form: 1056px; /* [NODE] szerokość formularza */ --dk-card: 673px; /* [NODE] karta tekstowa na tle zdjęcia */ --dk-card-pad-x: 100px; /* [NODE] */ --dk-card-pad-y: 50px; /* [NODE] */ /* --------------------------------------------------------------------- PROMIENIE W całym designie występują dokładnie dwa. Reszta elementów ma 0. --------------------------------------------------------------------- */ --dk-radius-pill: 1000px; /* [NODE] przycisk CTA */ --dk-radius-header: 24px; /* [NODE] sticky header — tylko dolne rogi */ --dk-radius-none: 0; /* [NODE] zdjęcia, karty, pola formularza */ /* --------------------------------------------------------------------- CIENIE I EFEKTY UWAGA: w tym projekcie NIE MA ANI JEDNEGO box-shadow. Sprawdzone na całym frame 68:1214, na obu wariantach przycisku i na obu wariantach headera. Głębię buduje kontrast tła i zdjęcia, nie cienie. Nie dodawać własnych. Jedyny efekt w designie to rozmycie tła sticky headera. --------------------------------------------------------------------- */ --dk-blur-header: 12px; /* [NODE] backdrop-filter: blur(12px) na 83:2683 */ /* --------------------------------------------------------------------- KOMPONENT: przycisk CTA (Figma 53:1264, użyty 3× na stronie) --------------------------------------------------------------------- */ --dk-btn-w: 577px; /* [NODE] stała szerokość w designie */ --dk-btn-h: 103px; /* [NODE] */ --dk-btn-pad-x: 50px; /* [NODE] */ --dk-btn-pad-y: 30px; /* [NODE] */ --dk-btn-icon: 26.667px;/* [NODE] strzałka arrow-up-right */ /* --------------------------------------------------------------------- KOMPONENT: sticky header (Figma 83:2683) --------------------------------------------------------------------- */ --dk-header-pad-x: 130px; /* [NODE] */ --dk-header-pad-y: 20px; /* [NODE] */ --dk-header-logo-w: 197.843px; /* [NODE] logo w stanie sticky */ --dk-header-logo-h: 42.886px; /* [NODE] */ --dk-header-logo-w-top: 273.96px; /* [NODE] logo w stanie początkowym */ --dk-header-logo-h-top: 57.53px; /* [NODE] */ } /* ============================================================================= WARSTWA RESPONSYWNA ============================================================================= Wszystko powyżej to zapis projektu 1:1 przy 1920px — zostaje nietknięte jako źródło prawdy. Poniżej wartości POCHODNE, których faktycznie używa style.css. Metoda: clamp() z interpolacją liniową między dwoma kotwicami: 390px (typowy telefon) → wartość minimalna 1920px (szerokość makiety) → wartość z Figmy, co do piksela Wzór: preferowana = b + m·100vw, gdzie m = (max − min) / (1920 − 390) b = min − m·390 Dlaczego płynnie, a nie skokowo na breakpointach: makieta istnieje wyłącznie w 1920px. Nie ma projektu mobilnego, więc każdy „rozmiar na telefon" byłby moim wymysłem. Interpolacja zachowuje przynajmniej proporcje oryginału. Gdy powstanie makieta mobilna, te wartości należy zastąpić prawdziwymi. Jednostki: min i max w rem, część zmienna w vw. Dzięki rem powiększenie domyślnej czcionki w przeglądarce nadal działa na krańcach skali — przy samych pikselach ustawienie użytkownika byłoby ignorowane. ========================================================================== */ :root { /* --- Typografia płynna ------------------------------------------------- ŚWIADOME ODEJŚCIE OD FIGMY 1:1 — decyzja z 2026-07-31. Makieta jest rysowana na płótnie 1920px i tam hero ma 151.892px. Przeniesione dosłownie do przeglądarki czyta się jako grubo za duże: makieta jest oglądana w całości, przeskalowana do ekranu, a strona — w skali 1:1, w oknie, które u większości ma 1280–1600px. Zachowuję PROPORCJE i hierarchię, obniżam sufity. Kolumna „max" poniżej to wartość przy 1920px, nie wartość z Figmy. Odniesienie do makiety zostaje w komentarzu przy każdej pozycji, żeby było wiadomo, o ile i gdzie zeszliśmy. Kontrola przy typowych szerokościach (px): 390 1280 1440 1920 Figma hero 34 75 82 104 151.9 display 28 61 66 84 126 h2 26 38 40 46 61 h1 22 31 33 38 49 h3 19 22 22 24 31 lead 17 19 20 21 25 body 16 17 17 18 20 */ --dk-fluid-hero: clamp(2.125rem, 1.0098rem + 4.5752vw, 6.5rem); /* Figma 151.892 */ --dk-fluid-display: clamp(1.75rem, 0.8578rem + 3.6601vw, 5.25rem); /* Figma 126 */ --dk-fluid-h2: clamp(1.625rem, 1.3064rem + 1.3072vw, 2.875rem); /* Figma 61 */ --dk-fluid-h1: clamp(1.375rem, 1.1201rem + 1.0458vw, 2.375rem); /* Figma 49 */ --dk-fluid-h3: clamp(1.1875rem, 1.1078rem + 0.3268vw, 1.5rem); /* Figma 31 */ --dk-fluid-lead: clamp(1.0625rem, 0.9988rem + 0.2614vw, 1.3125rem); /* Figma 25 */ /* Poniżej 16px nie schodzimy — iOS Safari powiększa wtedy stronę przy fokusie w polu formularza. */ --dk-fluid-body: clamp(1rem, 0.9681rem + 0.1307vw, 1.125rem); /* Figma 20 */ /* Tekst dekoracyjny — PODNIESIONY z powrotem po obejrzeniu nagrania makiety. Obniżyłem go najmocniej ze wszystkich pozycji i to był błąd: w makiecie to słowo zajmuje ok. połowę szerokości strony i jest nośnikiem całego efektu, a nie drobnym ozdobnikiem. Przy 1440px daje ok. 297px (makieta: ~346px). */ --dk-fluid-decor: clamp(4.5rem, -0.7256rem + 21.438vw, 25rem); /* Figma 461.689 */ /* --- Interlinie jako WSPÓŁCZYNNIKI, nie piksele ------------------------- Figma podaje hero, display i decor z interlinią bezwzględną. Przy płynnym rozmiarze czcionki sztywne 159.887px rozjechałoby się natychmiast, więc przeliczam je na proporcje względem rozmiaru z makiety. */ --dk-lh-hero-r: 1.0526; /* 159.887 / 151.892 */ --dk-lh-display-r: 1.0714; /* 135 / 126 */ --dk-lh-decor-r: 0.8036; /* 371 / 461.689 */ /* --- Trackingi względne ------------------------------------------------- -0.4px było policzone dla 20px. Przy płynnym rozmiarze musi być w em, inaczej na telefonie tekst zrobi się nienaturalnie ciasny. */ --dk-ls-body-r: -0.02em; /* = -2%, czyli to samo, co -0.4px przy 20px */ /* --- Odstępy płynne ---------------------------------------------------- Obniżone tą samą decyzją co typografia. Rytm makiety opiera się na 50 i 100 — przy 1920px to działa, w oknie laptopa robi z sekcji pustostany. */ --dk-fluid-gutter: clamp(16px, 13.961px + 0.5229vw, 24px); /* Figma 30 */ --dk-fluid-sp-6: clamp(20px, 15.922px + 1.0458vw, 36px); /* Figma 50 */ --dk-fluid-sp-7: clamp(20px, 8.784px + 2.8758vw, 64px); /* Figma 100 */ --dk-fluid-sp-8: clamp(16px, 1.725px + 3.6601vw, 72px); /* Figma 130 */ --dk-fluid-sp-9: clamp(16px, -4.392px + 5.2288vw, 96px); /* Figma 160 */ --dk-fluid-gap-cols: clamp(24px, 17.882px + 1.5686vw, 48px); /* Figma 87 */ /* --- Przycisk CTA ------------------------------------------------------- Przy pierwszym obniżaniu skali PRZEOCZYŁEM przycisk — został z pełnymi wymiarami z makiety (577×103), podczas gdy typografia zeszła o ~30%. Efekt: przycisk wyglądał na dwa razy za duży względem reszty. Proporcja z makiety jest zachowana: 577/1860 = 31% szerokości kontenera, wysokość ~18% szerokości przycisku. */ --dk-fluid-btn-w: clamp(260px, 224.314px + 9.1503vw, 400px); /* Figma 577 */ --dk-fluid-btn-h: clamp(52px, 48.941px + 0.7843vw, 64px); /* Figma 103 */ --dk-fluid-btn-pad-y: clamp(14px, 12.47px + 0.3922vw, 20px); /* Figma 30 */ --dk-fluid-btn-icon: clamp(16px, 14.98px + 0.2614vw, 20px); /* Figma 26.667 */ /* --- Punkty przełamania ------------------------------------------------- Celowo TE SAME co w Divi. Divi Builder przełącza układ na 980px i 767px; własne, rozjechane breakpointy dawałyby zakres, w którym moduły Divi są już mobilne, a nasz CSS jeszcze desktopowy. Wartości podane informacyjnie — CSS nie pozwala użyć zmiennej w @media. */ --dk-bp-tablet: 980px; --dk-bp-phone: 767px; } /* ============================================================================= CZEGO W TYM SZKICU NIE MA — do rozstrzygnięcia przed wdrożeniem ============================================================================= 1. RESPONSYWNOŚĆ JEST MOJA, NIE PROJEKTANTA. Makieta istnieje wyłącznie w 1920px. Warstwa `--dk-fluid-*` powyżej trzyma proporcje oryginału, ale wszystkie wartości minimalne (hero 40px, display 32px, decor 96px) to moje decyzje. Gdy powstanie makieta mobilna — zastąpić je prawdziwymi, a nie dopasowywać makietę do tych liczb. 2. BRAK STANÓW INTERAKCJI. Figma daje tylko dwa warianty przycisku (Default / Variant2). Nie ma opisanych :hover dla linków, :focus dla pól formularza ani stanu błędu walidacji. Focus trzeba dorobić samodzielnie — bez tego dostępność formularza kontaktowego jest do wyrzucenia. 3. KOLOR LINII FORMULARZA jest zgadnięty — patrz komentarz przy --dk-rule. 4. NAZWA „H1" w zmiennych Figmy oznacza 49px, a większy nagłówek sekcji nazywa się „Hero S" (61px). Przy pisaniu CSS iść za rozmiarem, nie za nazwą. 5. FONTY. Bricolage Grotesque, Playfair Display i Montserrat to Google Fonts. Divi ma własny mechanizm ładowania fontów — do ustalenia, czy wpinamy je przez Divi, czy przez @font-face w child theme z plikami lokalnymi (drugie jest lepsze dla RODO: brak strzału do fonts.googleapis.com). ========================================================================== */