/* Theme Name: Biel Description: Lekki motyw blokowy pod landing page. Design system w theme.json. Version: 0.3.0 Requires at least: 6.5 Tested up to: 6.8 Requires PHP: 8.0 Text Domain: biel */ /* * Design system siedzi w theme.json. Tutaj tylko to, czego theme.json nie wyraża. * Zasada: nic, co da się ustawić presetem, nie ląduje w tym pliku. * * Zero animacji wejścia — strona idzie do weryfikacji ofertowej. Jedyne przejścia * to reakcje na hover/focus, czyli afordancja, nie dekoracja. * * KIERUNEK (v3): dominantą strony jest granat, nie krem. Krem to rzadkie jasne * wyspy. Powód: zdjęcia klientki są zimne (szkło, stal, granatowy garnitur), * a ciepły krem + książkowy szeryf odpowiadały za zarzut „wygląda jak dla starej * kobiety". Paleta bez zmian — zmienione wyłącznie rozłożenie. */ /* ============================================================ zmienne */ :root { /* Gradienty teł. Przystanki to wyłącznie kolory z palety — żaden nowy kolor nie wchodzi do projektu tylnymi drzwiami. Wyłączenie gradientów: podmień obie wartości na `none`. GRANICA, KTÓREJ NIE WOLNO PRZEKROCZYĆ: ciemny gradient nie może zaczynać się jaśniej niż #2E2E4F. Złoto #AF9560 ma na tym granacie dokładnie 4,5:1 i cała paleta była pod ten punkt liczona. Pierwsza wersja startowała od #3A3A5E (anchor-soft) i zbijała złote etykiety do 3,9:1 — poniżej AA. Ciemniej wolno zawsze: im ciemniejsze tło, tym wyższy kontrast złota. */ --biel-grad-ciemny: linear-gradient( 172deg, #2e2e4f 0%, #2e2e4f 45%, #22222e 100% ); --biel-grad-jasny: linear-gradient(172deg, #faf9f7 0%, #f0ede7 100%); /* Włosowe linie. Na granacie i na kremie potrzebują różnego krycia, żeby ważyły optycznie tyle samo. */ --biel-kreska-ciemna: rgba(250, 249, 247, 0.16); --biel-kreska-jasna: rgba(34, 34, 46, 0.14); } /* ============================================================ podstawy */ /* Gradient idzie jako background-IMAGE, nie background-color. To nie przypadek: klasy `has-*-background-color` z theme.json trafiają do po tym arkuszu i przy równej specyficzności wygrywają. background-image kładzie się warstwę wyżej i nie wchodzi w ten spór w ogóle. */ .biel-ciemna { background-image: var(--biel-grad-ciemny); } .biel-jasna { background-image: var(--biel-grad-jasny); } /* Kotwice muszą uwzględnić wysokość sticky headera, inaczej scroll ucina nagłówek. */ .biel-section { scroll-margin-top: 4.75rem; } /* Tekst drugorzędny na granacie — paleta nie ma tokenu „przygaszona biel”, a #55555F na granacie jest nieczytelny. Hierarchia przez krycie, nie nowy kolor. 0.78 na #FAF9F7/#2E2E4F daje ~8,4:1, czyli wciąż grubo ponad AA. */ .biel-muted { opacity: 0.78; } /* Etykieta sekcji. Bez złotej kreski ::before — Justyna wprost napisała, że kreski „—” nad nazwami sekcji są niepotrzebne. Etykieta niesie nazwę sekcji i tyle; nie udaje ornamentu. */ .biel-label { margin-bottom: 0.8rem; font-size: var(--wp--preset--font-size--small); font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; } /* Cienkie linie zamiast domyślnych 2 px. */ .wp-block-separator.has-background { height: 1px; border: 0; } /* Widoczny focus — stronę czyta urzędnik, dostępność jest wymogiem, nie dodatkiem. */ a:focus-visible, .wp-element-button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ========================================================= teza otwierająca */ /* * Do 19.07.2026 stała tu ANTYTEZA (.biel-teza-nie / .biel-teza-tak) — figura * „nie X, tylko Y”, na której zbudowana była cała zatwierdzona treść. Dagmara * poprosiła o jej usunięcie (S1.1), więc para klas poszła razem z copy. * Powód notuję, bo to była świadoma decyzja projektowa, nie przypadek: * hero straciło kontrapunkt i otwiera się teraz zwykłym wykładem. * * Zostaje sama skala — duże zdanie wprowadzające, mniejszy komentarz pod nim. * Kontrast niesie STOPIEŃ, nie kolor, więc nie ma tu progu WCAG do pilnowania. */ .biel-hero-teza { /* Stopień NIE tutaj, tylko w atrybucie bloku (fontSize:"x-large"). Klasa .has-x-large-font-size ma tę samą specyficzność, a globalne style WP wstrzykują się PO arkuszu motywu — font-size ustawiony w tym miejscu przegrywał i teza renderowała się w stopniu „large”. */ font-family: var(--wp--preset--font-family--serif); font-weight: 600; letter-spacing: -0.026em; line-height: 1.15; text-wrap: balance; } /* Blok tezy wyśrodkowany na prośbę Dagmary (20.07.2026, uwaga 3). Miara ścięta i wyśrodkowana marginesem, bo samo text-align rozciągnęłoby zdanie na całą szerokość alignwide (~80 rem) — przy wyrównaniu do środka każdy wiersz zaczyna się w innym miejscu i im dłuższe wiersze, tym gorzej to wygląda. Teza i komentarz mają RÓŻNE miary specjalnie: przy wspólnych 46 rem teza łamała się na pięć krótkich, poszarpanych wierszy. */ .biel-hero-teza-blok > * { margin-inline: auto; max-width: 42rem; } .biel-hero-teza-blok > .biel-hero-teza { max-width: 58rem; } /* ============================================================= nagłówek */ /* Sticky, bo strona to jeden długi scroll — CTA musi być stale w zasięgu. Granatowy, nie kremowy: nagłówek jest częścią dominanty, nie paskiem nad nią. */ .biel-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--biel-kreska-ciemna); background: rgba(46, 46, 79, 0.86); backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px); } .biel-header .wp-block-site-title a { color: var(--wp--preset--color--base); font-family: var(--wp--preset--font-family--serif); font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; text-decoration: none; } .biel-nav a:not(.wp-element-button) { color: var(--wp--preset--color--base); font-size: var(--wp--preset--font-size--small); letter-spacing: 0.01em; opacity: 0.76; text-decoration: none; transition: opacity 0.15s ease, color 0.15s ease; } .biel-nav a:not(.wp-element-button):hover { color: var(--wp--preset--color--accent-on-dark); opacity: 1; } @media (max-width: 900px) { /* Selektor musi być bardziej szczegółowy niż wygenerowana przez WP klasa `wp-container-core-group-is-layout-*`, która ustawia display:flex i trafia do PO arkuszu motywu. Przy równej specyficzności wygrywała ona, linki zostawały na ekranie i wypychały CTA poza viewport. */ .biel-header .biel-nav-links { display: none; } } /* ============================================================== zdjęcia */ /* Materiał źródłowy ma 800×1200 / 1200×800 — świadomie nie robimy z niego teł full-bleed, bo przy 1440 px poszedłby w górę i zmiękł. Zdjęcia żyją w kadrach o kontrolowanej szerokości. Potwierdzone z właścicielem projektu: pracujemy na tym, co jest, oryginałów z sesji nie będzie. */ .biel-foto img { display: block; width: 100%; height: 100%; border-radius: 0.3rem; object-fit: cover; } /* Bez passe-partout. Włosowa ramka odsunięta po przekątnej była ornamentem, który nic nie kodował — poszła razem z nadliniami i numeracją. */ /* REGUŁA, której nie wolno złamać: kadr musi zgadzać się z orientacją pliku. Materiał ma dwie orientacje — `portret-*` to 800×1200, `szer-*` to 1200×800. Wrzucenie pionowego pliku w kadr 3:2 przy object-fit:cover obcina modelce głowę (zdarzyło się w sekcji „Zasady”). Stąd sztywne przypisanie: portret-* → .biel-foto-pion · szer-* → .biel-foto-poziom */ .biel-foto-pion img { aspect-ratio: 4 / 5; } .biel-foto-poziom img { aspect-ratio: 3 / 2; } /* Hero: portret sięga od góry do dołu kolumny tekstu. * * Sedno: obraz jest pozycjonowany ABSOLUTNIE, więc nie wnosi własnej wysokości * do wiersza. Bez tego plik 800×1200 przy 507 px szerokości rozpychał się * naturalnie na 760 px i to ON dyktował wysokość hero — kolumna tekstu * (698 px treści) tylko się do niego rozciągała. Skutkiem był hero wyższy * od ekranu i ucięty dół: zdjęcie i blok kontaktowy wypadały poza krawędź, * a przycinanie marginesów w tekście nie dawało absolutnie nic, bo tekst * nie był tu ograniczeniem. * * Teraz wysokość wiersza wyznacza tekst, a zdjęcie wypełnia dokładnie tyle, * ile zostało. Kadr trzyma object-fit: cover z .biel-foto. */ .biel-hero-kolumny { align-items: stretch; } .biel-hero-kolumny > .wp-block-column:last-child { display: flex; } .biel-hero-foto { position: relative; flex: 1; min-height: 20rem; /* podłoga, gdyby kolumna tekstu kiedyś zjechała */ } .biel-hero-foto img { position: absolute; inset: 0; aspect-ratio: auto; } @media (max-width: 781px) { /* Po zwinięciu kolumn nie ma sąsiada, od którego zdjęcie wzięłoby wysokość — wraca do normalnego przepływu i własnych proporcji. Rozciągnięty portret byłby tu paskiem przez pół ekranu, stąd kadr pionowy. */ .biel-hero-foto { position: static; min-height: 0; aspect-ratio: 4 / 5; } .biel-hero-foto img { position: static; } } /* ======================================================== bloki treści */ /* Nota pod przyciskami hero — wydzielona włosową linią, nie pudełkiem. Do 20.07.2026 stały tu mail i telefon; Dagmara kazała je usunąć (uwaga 1), więc został sam przypis o ofercie. Klasa i linia zostają: oddzielają notę od przycisków. Odstęp celowo mniejszy niż odstęp sekcyjny (2,5 rem zamiast 5 rem) — przy 5 rem cała kolumna hero kończyła się 101 px poniżej viewportu. */ .biel-kontakt-formalny { margin-top: 2rem; padding-top: var(--wp--preset--spacing--30); border-top: 1px solid var(--biel-kreska-ciemna); } /* --- „Z kim pracuję”: cztery profile na jasnej wyspie --------------------- Karty, bo to cztery równoległe, zamknięte opisy sytuacji. Bez numeracji: nie są sekwencją, tylko czterema wariantami tego samego. */ .biel-profil { height: 100%; padding: clamp(1.6rem, 3vw, 2.4rem); border: 1px solid var(--biel-kreska-jasna); border-radius: 0.4rem; background: rgba(250, 249, 247, 0.6); } .biel-profil h3 { margin-bottom: 0.75rem; } /* --- „Formy pracy”: rejestr, nie karty ----------------------------------- Justyna: „Formy pracy powinny być ciekawym wyróżnikiem, a nie kolejną listą”. Odpowiedź nie jest dekoracyjna, tylko strukturalna: to jedyna sekcja o układzie dwukolumnowego rejestru (nazwa | zakres), czyli czyta się jak wykaz świadczeń do oferty. Odróżnia ją od siatek kart typ struktury, a nie odcień tła. */ .biel-forma { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: clamp(1.25rem, 4vw, 3.5rem); padding: clamp(1.5rem, 3vw, 2.25rem) 0; border-top: 1px solid var(--biel-kreska-ciemna); } .biel-forma:last-child { border-bottom: 1px solid var(--biel-kreska-ciemna); } .biel-forma-nazwa { font-family: var(--wp--preset--font-family--serif); font-size: var(--wp--preset--font-size--large); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; } @media (max-width: 781px) { .biel-forma { grid-template-columns: 1fr; gap: 0.6rem; } } /* --- „Zasady”: cztery deklaracje ---------------------------------------- Justyna: „tekst ułożony nudno, z kreskami”. Odpowiedź to skala, nie ozdobnik. Zasada jest ZDANIEM, więc dostaje stopień zdania, a nie stopień pozycji listy; wyjaśnienie schodzi do drobnego sansu. To ten sam mechanizm co w antytezie w hero — duże twierdzenie, mały komentarz — tylko bez powtarzania figury „nie X / tylko Y”, żeby sygnatura nie zrobiła się tikiem. Rozdzielone włosową linią, nie pudełkami: cztery ramki byłyby ciężkie, a to ma brzmieć jak warunki brzegowe, nie jak katalog. */ .biel-zasada { padding-top: var(--wp--preset--spacing--30); border-top: 1px solid var(--biel-kreska-jasna); } .biel-zasada-tytul { margin-bottom: 0.7rem; font-family: var(--wp--preset--font-family--serif); font-size: clamp(1.5rem, 2.4vw, 2.125rem); font-weight: 600; letter-spacing: -0.022em; line-height: 1.14; text-wrap: balance; } /* --------------------------------------------------------- kwalifikacje */ /* Liczby doświadczenia. Świadomie NIE są elementem sygnaturowym strony: „wielka liczba + mała etykieta” to najczęstsze rozwiązanie szablonowe. Mają być czytelne dla weryfikującego wykonawcę i nie więcej. */ /* Cyfry WERSALIKOWE, nie nautyczne. Cormorant Garamond domyślnie składa cyfry tekstowe (oldstyle): „4” schodzi pod linię pisma, a zera siedzą na wysokości x-height. W ciągłym tekście to zaleta, ale tutaj liczby są danymi do odczytania przez zamawiającego i „14+” wyglądało jak błąd składu. lining-nums wyrównuje je do wysokości wersalika. Dotyczy każdego miejsca, gdzie w szeryfie stoją cyfry — stąd reguła obok, nie tylko na .biel-liczba. */ .biel-liczba, .biel-section :is(h1, h2, h3, h4), .biel-forma-nazwa, .biel-zasada-tytul { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; } /* Trio liczb wyśrodkowane i powiększone (Dagmara, 20.07.2026, uwaga 5). Wyśrodkowanie robi max-width, NIE justify-content: siatka ma kolumny 1fr, więc i tak rozciąga je na całą szerokość — bez ścięcia miary trzy liczby siedziały w lewych 3/5 pasa alignwide. 54 rem dobrane pod regułę z CLAUDE.md (n × 13 rem + (n−1) × 2,5 rem gap): 3 kolumny potrzebują 44 rem, 4 kolumny już 59,5 rem — 54 rem trzyma dokładnie trzy i nie zwija się przypadkiem. */ .biel-liczby { text-align: center; } /* Selektor MUSI być bardziej szczegółowy niż `.is-layout-constrained > .alignwide` (0,2,0), którym WP ustawia max-width na wideSize. Ta reguła leci do PO arkuszu motywu, więc przy równej specyficzności wygrywa ona — samo `.biel-liczby { max-width }` nie działało i trzy liczby zostawały w lewych 3/5 pasa. To ta sama pułapka co z mobilną nawigacją, patrz CLAUDE.md. */ .is-layout-constrained > .biel-liczby.alignwide { margin-inline: auto; max-width: 54rem; } .biel-liczba { font-family: var(--wp--preset--font-family--serif); /* Powiększone z clamp(2.5rem, 4.5vw, 3.5rem). Górna granica 4,5 rem, nie więcej: przy 54 rem kolumna ma ~16 rem, a „2 000+” w szeryfie zaczyna wtedy dotykać jej krawędzi. */ font-size: clamp(3rem, 6vw, 4.5rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; } .biel-liczba-opis { margin-top: 0.55rem; font-size: var(--wp--preset--font-size--small); line-height: 1.45; } .biel-lista li + li { margin-top: 0.9rem; } .biel-lista li::marker { color: var(--wp--preset--color--accent-on-dark); } /* Certyfikaty jako wykaz rozdzielony włosową linią — czyta się jak rejestr dokumentów, nie jak akapit. To sekcja pod weryfikację formalną. */ /* Padding zbity z 1,25 rem na 0,8 rem (S6.2: „są duże odstępy — ważna sekcja, ale nie musi być tak rozbita”). Odstęp wewnątrz pozycji siedzi w blockGap bloku (0,3 rem), nie tutaj — wykaz ma się czytać jak rejestr, nie jak lista osobnych kart. */ .biel-cert { padding: 0.8rem 0; border-top: 1px solid var(--biel-kreska-ciemna); } .biel-cert:last-of-type { border-bottom: 1px solid var(--biel-kreska-ciemna); } /* Sygnatura dokumentu monospace'em: to dane do przepisania do oferty, nie do czytania ciągiem. */ .biel-cert-nr { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; font-size: 0.8125rem; letter-spacing: 0.01em; } /* ============================================================ formularz */ /* Formularz jest białą kartą na cieplejszym kremie — jedyna taka płaszczyzna na stronie. To celowe: sekcja kontaktu sąsiaduje z inną jasną sekcją, a różnicę ma robić faktura, nie kolejny odcień kremu. */ .biel-formularz { padding: clamp(1.5rem, 3.5vw, 2.75rem); border: 1px solid var(--biel-kreska-jasna); border-radius: 0.4rem; background: var(--wp--preset--color--base); } /* Fluent Forms wchodzi z własnym stylem, który nie ma nic wspólnego z tą stroną — sprowadzamy pola do tego samego języka: włosowa ramka, ten sam promień, ten sam krój. */ .biel-formularz .ff-el-input--label label { color: var(--wp--preset--color--contrast); font-size: var(--wp--preset--font-size--small); font-weight: 600; letter-spacing: 0.01em; } .biel-formularz input[type="text"], .biel-formularz input[type="email"], .biel-formularz input[type="tel"], .biel-formularz select, .biel-formularz textarea { width: 100%; padding: 0.85rem 1rem; border: 1px solid rgba(34, 34, 46, 0.22); border-radius: 0.3rem; background: var(--wp--preset--color--base); box-shadow: none; color: var(--wp--preset--color--contrast); font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--medium); line-height: 1.5; transition: border-color 0.15s ease; } .biel-formularz input:hover, .biel-formularz select:hover, .biel-formularz textarea:hover { border-color: rgba(34, 34, 46, 0.42); } .biel-formularz input:focus, .biel-formularz select:focus, .biel-formularz textarea:focus { border-color: var(--wp--preset--color--accent); outline: 2px solid var(--wp--preset--color--accent); outline-offset: 1px; } .biel-formularz textarea { min-height: 9rem; resize: vertical; } .biel-formularz .ff-el-group { margin-bottom: 1.35rem; } /* Przycisk wysyłki musi być tym samym przyciskiem co CTA — ale na jasnym tle, więc złoto w wariancie ciemniejszym (#877044, 4,5:1 na bieli). */ .biel-formularz .ff-btn-submit { padding: 0.95rem 1.9rem; border: 0; border-radius: 0.3rem; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base); font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--medium); font-weight: 600; cursor: pointer; transition: background-color 0.15s ease; } .biel-formularz .ff-btn-submit:hover { background: var(--wp--preset--color--contrast); } .biel-rodo { color: var(--wp--preset--color--contrast-soft); font-size: 0.8125rem; line-height: 1.5; } /* ============================================================ drobiazgi */ /* Przycisk-obrys: druga akcja obok głównego CTA, bez konkurowania o uwagę. */ .biel-btn-obrys .wp-element-button { border: 1px solid var(--wp--preset--color--accent-on-dark); background: transparent; color: var(--wp--preset--color--base); } .biel-btn-obrys .wp-element-button:hover { background: var(--wp--preset--color--accent-on-dark); color: var(--wp--preset--color--anchor); } /* Wariant na jasnej wyspie. */ .biel-btn-obrys-ciemny .wp-element-button { border: 1px solid var(--wp--preset--color--contrast); background: transparent; color: var(--wp--preset--color--contrast); } .biel-btn-obrys-ciemny .wp-element-button:hover { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); } .biel-kolumny-srodek { align-items: center; } @media (max-width: 781px) { /* Po zwinięciu kolumn (782 px) zdjęcie lądowałoby tuż pod tekstem bez oddechu. */ .wp-block-columns.biel-kolumny-srodek { gap: var(--wp--preset--spacing--50); } } /* ================================================ dokumenty prawne */ /* Polityka prywatności — jedyna podstrona serwisu. Osobna klasa, bo rządzą tu inne reguły niż na landingu: to tekst DO CZYTANIA, nie do przeskanowania wzrokiem. Landing jest granatowy i szeroki, dokument jest jasny i wąski. Treść żyje w bazie (Strona „polityka-prywatnosci”), źródło w biel/assets/polityka-prywatnosci.html, import przez bin/create-polityka.sh. */ .biel-dokument { /* contentSize motywu to 42 rem — dla ciągłego tekstu prawnego za szeroko przy tym stopniu pisma. 36 rem daje ~75 znaków w wierszu. */ --wp--style--global--content-size: 36rem; } .biel-dokument h1 { margin-bottom: var(--wp--preset--spacing--40); } .biel-dokument h2 { margin-top: var(--wp--preset--spacing--50); font-size: 1.75rem; } .biel-dokument h3 { margin-top: var(--wp--preset--spacing--40); font-size: 1.15rem; /* Numerowane cele przetwarzania z §3 bywają całymi zdaniami. W szeryfie przy 600 czytają się jak nagłówki działów, których tu nie ma — stąd krój tekstowy i lżejsza waga: to etykiety punktów, nie sekcje. */ font-family: var(--wp--preset--font-family--sans); font-weight: 600; line-height: 1.4; } .biel-dokument p, .biel-dokument li { font-size: 1rem; line-height: 1.7; } .biel-dokument .biel-dok-lista { padding-left: 1.2rem; } .biel-dokument .biel-dok-lista li + li { margin-top: 0.5rem; } /* Adresy URL wklejone w tekście przez prawnika (pełne linki do polityk Google i Meta) potrafią być dłuższe niż miara. Bez tego rozpychają stronę i robi się poziomy scroll na telefonie. */ .biel-dokument a { overflow-wrap: anywhere; }