/* Theme Name: Zuzanna Sobczak Lite Author: Riomega Version: 1.0.7 Requires at least: 6.6 Requires PHP: 8.1 Text Domain: zuzannasobczak-lite */ /* Źródło tokenów (Task 2, Krok 2) — 2026-09-25 Polecenie: cd /tmp && for p in 7 8 9 10 530 888 1231 1268 1532 921; do curl -s https://zuzannasobczak.pl/wp-content/uploads/elementor/css/post-$p.css; done > zs_el.css curl -s https://zuzannasobczak.pl/wp-content/uploads/phlox/custom.css >> zs_el.css grep -ohE '#[0-9a-fA-F]{3,8}\b|rgba?\([^)]+\)' zs_el.css | sort | uniq -c | sort -rn | head -20 Kolory (top wystąpień): 54× #FFFFFF — tło białe 21× #008F86FC 20× #008F86 5× rgba(0,143,134,0.99) — turkus dominujący (linki, hover, menu) 4× #003531FC 1× linear-gradient(...#003531 69%...) — turkus ciemny (gradienty hero) 16× #4E4E4E — kolor tekstu (aux-text, treść) 4× #EAEAEA — bordery (subfooter/stopka) 4× #ACACAC — tło warstw motion-effects (jedyny realnie użyty "szary") 2× #7A7A7A, 2× #54595F, 2× #6EC1E4, 2× #61CE70 — to WYŁĄCZNIE nieużywane domyślne zmienne kitu Elementora (--e-global-color-primary/secondary/text/accent), zdefiniowane w phlox/custom.css, ale nigdzie realnie nie zaaplikowane jako color:/background-color: — pominięte jako szum. 1× #fafafa (subfooter-bar-layout-bg-color, phlox/custom.css) i 1× #F6F6F6 (tło popupu wyszukiwania) — obecne w CSS, ale to NIE tło sekcji "O PROJEKCIE" (ta sekcja istnieje na stronie głównej, poprzednia wersja tego komentarza błędnie sugerowała, że nie ma takiej sekcji — jest, zaraz pod hero). Właściwa wartość "light" zmierzona próbkowaniem pikseli tła sekcji "O PROJEKCIE" w sobczak/theme/baseline/index@1920.png (kilka niezależnych punktów poza zdjęciem/tekstem dało (248-249,248-249,248-249)) → przyjęto #F8F8F8 (poprawka rundy 1, nadpisuje wcześniejsze #FAFAFA z ekstrakcji CSS, które okazało się kolorem innej sekcji — subfooter — nie "O PROJEKCIE"). font-size (top): 19× 12px, 18× 10px (Phlox body/scaling, @1024px), 9× 31px + 9× 21px (H1 desktop/tablet — potwierdzone w phlox/custom.css: "general-heading-h1"), 7× 32px, 4× 20px, 4× 18px, 3× 16px, 2× 15px, 1× 91px, 1× 61px, 1× 22px, 1× 17px. letter-spacing/line-height: 14× letter-spacing:-1px + 12× line-height:23px (Phlox body @768px), 1× line-height:3em, 1× line-height:1.7em, 1× line-height:1.5em. Finalne tokeny (nadpisują placeholdery z briefu, gdzie różne): teal #008F86 (było #1a9a8b) teal-dark #003531 (było #0e6b61) ink #4E4E4E (było #3a3a3a) muted #ACACAC (było #8a8a8a) light #F8F8F8 (było #f7f7f7 w briefie; zmierzone próbkowaniem pikseli tła sekcji "O PROJEKCIE" w baseline/index@1920.png — poprawka rundy 1, patrz wyżej) white #FFFFFF (bez zmian) */ @font-face{font-family:'Lexend Zetta';font-style:normal;font-weight:300;font-display:swap;src:url(assets/fonts/lexend-zetta-300-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Lexend Zetta';font-style:normal;font-weight:300;font-display:swap;src:url(assets/fonts/lexend-zetta-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* Lexend jest fontem zmiennym (fvar wght 100–900) — Google serwuje IDENTYCZNY plik dla wag 300/400/600, więc zamiast 3 duplikatów per subset zostają 2 pliki (latin, latin-ext) z jedną deklaracją @font-face na subset i font-weight jako zakres "300 600" (poprawka rundy 1). */ @font-face{font-family:'Lexend';font-style:normal;font-weight:300 600;font-display:swap;src:url(assets/fonts/lexend-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Lexend';font-style:normal;font-weight:300 600;font-display:swap;src:url(assets/fonts/lexend-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} .wp-site-blocks > * { margin-block: 0 !important; } body { -webkit-font-smoothing: antialiased; } /* === header === */ /* Pomiary live (Playwright, o-mnie/, 2026-09-25): 1920: header 140.8px; logo 54.4x80.8; linia 47.2x95.5 (gap logo→linia 20, linia→tag 10); nav: li padding-left 40px (0 gap między boxami), font zuza→Zetta 12px/700/-1px/uppercase/#008F86. 1024: header 242.9px (2-rzędowy — nav zawija się, margin-top 55 z Elementora); logo 74x110; linia 40.2x81.2 (gap 20/15). Menu PEŁNE nadal widoczne (burger jeszcze nieaktywny — próg burgera to inny atrybut widżetu, patrz niżej). 768: header 169.9px; logo WCIĄŻ tabletowe 74x110 (próg tablet/mobile w Elementorze to 767, nie 768); burger AKTYWNY — potwierdzone atrybutem data-switch-width="768" na żywym markupie (aux_menu_box), niezależnym od progu tablet/mobile obrazków. Stąd 4 warstwy media queries niżej. 390: header 106.8px; logo mobilne 45x67; burger aktywny; letter-spacing tagline -1px. Scroll (aux-sticky, żywy #site-elementor-header): position:fixed; box-shadow: 0 4px 0 0 rgba(34,34,34,.03). Hover „Współpraca" (1440): submenu tło #008F86, box-shadow 0 0 10px rgba(0,41,38,.76), padding 10px 0; link 12px/uppercase/#FFFFFF, padding 15px, line-height 18px. Linia ukośna = SVG line_2.svg (assets/img/line.svg, 1:1) jako .zs-brand::before — patrz runda 5 niżej. */ .zs-header { position: fixed; inset-inline: 0; top: 0; z-index: 50; /* Runda 6: strefa 1025–1199 skaluje się płynnie jak live (boxed container = 100% viewportu, kolumny w %): wysokość = wys. logo + 60 = 1,48588·(8vw − 41,6px) + 60 → 11,887vw − 1,81px, ograniczona do 140,8px (≥1200, kontener 1200). Pomiar live 1025/1050/1100/1150/1180/1200. */ height: var(--zs-header-h); background: var(--wp--preset--color--white); } /* Wysokość nagłówka w JEDNYM miejscu: --zs-header-h per próg (niżej). Z niej: - body padding-top (strony zwykłe i wpisy: treść zaczyna się pod nagłówkiem), - --zs-header-clear = odległość od początku treści do dolnej krawędzi nagłówka na stronach, gdzie hero/tło wchodzi POD nagłówek (treść od --zs-under = 52,5 / ≤1024 43,75, jak na starej stronie). Pierwszy element takich stron (H1 / logo hero) ma margin/padding-top max(projekt, --zs-header-clear) → jego górna krawędź leży min. 10px (padding kolumny) pod nagłówkiem na KAŻDEJ szerokości (wcześniej 769–824 zasłaniało 7px, a „KONTAKT” 768–1053 cały). Pasek admina WP: html ma margin-top (32 / ≤782 46), więc treść przesuwa się sama; nagłówek fixed dostaje top = dolna krawędź paska (≤600 pasek NIE jest fixed — site.js liczy --zs-ab-top przy scrollu). */ :root { --zs-header-h: clamp(120px, calc(11.887vw - 1.81px), 140.8px); --zs-under: 52.5px; --zs-header-clear: calc(var(--zs-header-h) - var(--zs-under)); } body { padding-top: var(--zs-header-h); } body.admin-bar .zs-header { top: var(--zs-ab-top, var(--wp-admin--admin-bar--height, 32px)); } body.zs-scrolled .zs-header { box-shadow: 0 4px 0 0 rgba(34, 34, 34, .03); } .zs-header__in { height: 100%; align-items: center; flex-wrap: nowrap; column-gap: 0; padding-inline: 10px; } /* Runda 5 (14 szerokości): marka = 3 elementy flex jak 3 widżety Elementora live — [logo z paddingiem 20 (mobile 10)] [linia = line_2.svg 1:1, pseudo ::before z order] [tagline z paddingiem]. Wcześniej linia była ::before tagline z ręcznie dobranym `left` + column-gap — trafiało tylko w 5 mierzonych szerokościach (live liczy szerokość linii w % kolumny i rozkłada mobile space-between). */ .zs-brand { align-items: center; column-gap: 0; } .zs-brand::before { content: ""; order: 0; flex: 0 0 auto; /* live: widżet linii = 4% kolumny (kolumna = min(vw,1200) − 20) → 4vw − 0,8px, max 47,2 */ width: clamp(40.2px, calc(4vw - .8px), 47.2px); aspect-ratio: 98.37 / 199; background: url(assets/img/line.svg) center / 100% 100% no-repeat; } .zs-brand__logo { order: -1; display: inline-flex; line-height: 0; padding-inline: 20px; } /* live: widżet logo = 8% kolumny, obraz = widżet − 2×20 → 8vw − 41,6px (1025: 40,4 … ≥1200: 54,4), proporcje PNG 2550×3789 */ .zs-brand__logo img { display: block; width: clamp(40.4px, calc(8vw - 41.6px), 54.4px); height: auto; aspect-ratio: 2550 / 3789; } .zs-brand__tag { margin: 0; padding: 0 0 10px 10px; font-family: var(--wp--preset--font-family--zetta); font-size: 10px; font-weight: 900; line-height: 15px; color: var(--wp--preset--color--teal); white-space: nowrap; } /* Nawigacja desktop */ .zs-nav { font-family: var(--wp--preset--font-family--zetta); font-size: 12px; font-weight: 700; letter-spacing: -1px; text-transform: uppercase; color: var(--wp--preset--color--teal); } .zs-nav .wp-block-navigation__container { gap: 0; } .zs-nav .wp-block-navigation-item { padding-left: 40px; } .zs-nav .wp-block-navigation-item__content { color: var(--wp--preset--color--teal); line-height: 18px; } /* Strzałka „Współpraca” jak live .aux-submenu-indicator: 10×6, 9.5px od etykiety, #4c4c4c 1px (li live 168.5px, u nas było 159.2 → cały rząd menu węższy o 9px, @820 nie zawijał „Kontakt”). */ .zs-nav .wp-block-navigation__submenu-icon { width: 10px; height: 6px; margin-left: 9.5px; } .zs-nav .wp-block-navigation__submenu-icon svg { width: 10px; height: 10px; margin-top: -3px; stroke: #4c4c4c; stroke-width: 1px; } /* Submenu „Współpraca" — dropdown DESKTOP+TABLET (>768, czyli poza trybem burgera/overlay). Runda 2: te same reguły (tło, min-width:200px) wyciekały do panelu mobilnego, bo nic ich tam nie ograniczało — teraz w @media, a panel mobilny ma własne, osobne reguły niżej. Runda 3: próg poprawiony z 1025 na 769 — przy dokładnie 1025 zakres byłby wyłącznie desktopowy i WYKLUCZAŁ 1024 (tablet z pełnym menu + hover-dropdown, wciąż TA SAMA mechanika co desktop, nie overlay), więc dropdown na tablecie zostawałby bez turkusu/białego tekstu. Pomiar live @1024 (hover „Współpraca"): tło #008F86, padding 15px, font 12px/400/letter-spacing normal/line-height 18px — identyczne z desktopem, więc jedna wspólna reguła >768 wystarcza. */ @media (min-width: 769px) { /* !important na background/color: bez atrybutu overlayBackgroundColor (usuniętego w rundzie 2, patrz komentarz przy panelu mobilnym) submenu nie ma już klasy has-*-background-color, ale jakaś domyślna reguła core (drukowana najwyraźniej PO naszym arkuszu) nadal wygrywała samo tło, mimo że min-width z tej samej reguły działało — zweryfikowane zrzutem hover 1440. */ .zs-nav .wp-block-navigation__submenu-container { background: var(--wp--preset--color--teal) !important; box-shadow: 0 0 10px rgba(0, 41, 38, .76); padding: 10px; min-width: 200px; /* + padding 10 + ramka 1 = 222 jak live (content-box) */ } /* live: .sub-menu 222px (200 + 2×10 padding + 2×1 ramka), pozycje wyśrodkowane; strzałka NIE obraca się przy otwarciu (core robi rotate(180deg) na svg). */ .zs-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { text-align: center; justify-content: center; } .zs-nav .wp-block-navigation-item .wp-block-navigation__submenu-icon svg { transform: none !important; } /* !important na padding/letter-spacing: core ma `.has-child .submenu-container > .item > .item__content{padding:.5em 1em}` (5 klas, bije nasze 3) — dawało 6px/12px zamiast 15px; letter-spacing dziedziczy -1px z .zs-nav, a live ma tu "normal". */ .zs-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: var(--wp--preset--color--white) !important; font-weight: 400; font-size: 12px; line-height: 18px; letter-spacing: normal; padding: 15px !important; } .zs-nav .wp-block-navigation__submenu-container .wp-block-navigation-item { padding-left: 0; } } /* Burger (przycisk otwarcia) — gruby 3-kreskowy „≡” jak live (aux-thick-small), nie domyślny 2-kreskowy SVG WP („=”). Jeden pseudo-element + 2 box-shadow = środkowa+górna+dolna kreska. */ .zs-nav .wp-block-navigation__responsive-container-open { position: relative; width: 20px; height: 20px; padding: 0; } .zs-nav .wp-block-navigation__responsive-container-open svg { display: none; } .zs-nav .wp-block-navigation__responsive-container-open::before { content: ""; position: absolute; left: 0; top: 50%; width: 20px; height: 3px; background: var(--wp--preset--color--teal); box-shadow: 0 -6px 0 var(--wp--preset--color--teal), 0 6px 0 var(--wp--preset--color--teal); transform: translateY(-50%); } /* Panel mobilny (overlayMenu:mobile) — tło/kolor WŁASNYM CSS, nie atrybutem overlayBackgroundColor/overlayTextColor: WP kopiuje ten atrybut także w dół do KAŻDEGO submenu-container (patrz render_block_core_navigation_submenu — kopiuje overlayBackgroundColor jako backgroundColor submenu), więc „Współpraca” dostawała klasę has-light-background-color z !important i traciła turkus. Bez atrybutu na bloku — czysta kaskada, bez wojny z !important. */ /* !important: core ma regułę „.wp-block-navigation:not(.has-background) …:not(.disable-default-overlay) {background:...}” (podobnie color) o specyficzności 5 klas, która się właącza WŁAŚNIE dlatego, że nie dodajemy już overlayBackgroundColor/overlayTextColor (usunięte — patrz komentarz wyżej) — bez tych atrybutów nav traci klasy has-background/has-text-color i core wraca do domyślnego biało-czarnego panelu. */ .zs-nav .wp-block-navigation__responsive-container.is-menu-open { background-color: var(--wp--preset--color--light) !important; color: var(--wp--preset--color--teal) !important; } /* Pozycja/rozmiar/kolor z pomiaru live (.aux-panel-close): koło 30×30 WYŚRODKOWANE poziomo (center_x=195 @390 = środek viewportu, tak samo @768 center_x=384), top ~14.5px, obrys teal, ale sam krzyżyk („.aux-close.aux-cross-symbol") ma kolor #444, NIE teal — core domyślnie daje position:absolute;right:0;top:0 (przyciska do prawego górnego rogu), nadpisane niżej. */ .zs-nav .wp-block-navigation__responsive-container-close { position: absolute; top: 14px; left: 50%; right: auto; transform: translateX(-50%); color: #444; border: 1px solid var(--wp--preset--color--teal); border-radius: 50%; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; } .zs-nav .wp-block-navigation__responsive-container-close svg { width: 16px; height: 16px; } /* Wyśrodkowanie pionowe listy w panelu (jak live aux-fs-menu-layout-center) — WP core domyślnie nie centruje, tylko układa treść od góry. WAŻNE: przez pomyłkę rundy 2 ta reguła była niescope'owana do .is-menu-open — .wp-block-navigation__responsive-close/-dialog istnieją w DOM zawsze (nie tylko gdy panel otwarty), więc dokładała 100% wysokości + flex do UKŁADU DESKTOPOWEGO/TABLETOWEGO nawigacji (przesuwało 2-rzędowe menu @1024 o dodatkowe ~19px) — naprawione ograniczeniem do stanu otwartego panelu. */ .zs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close, .zs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { display: flex; flex-direction: column; justify-content: center; min-height: 100%; } /* Runda 5: lista w panelu wyśrodkowana względem CAŁEGO ekranu jak live (środek ul = środek viewportu) i na pełną szerokość (turkusowy pas submenu od krawędzi do krawędzi). Wcześniej przesunięta w dół o 56px (padding-top core na -content) + 74px (padding-top listy z warstwy ≤1024, który przeciekał do panelu). */ .zs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 0; align-items: stretch; } .zs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container { padding: 0; width: 100%; align-items: stretch; } /* padding-left:40px pozycji z paska desktopowego przesuwał w panelu tekst o 20px w prawo */ .zs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { padding-left: 0; } .zs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-family: var(--wp--preset--font-family--zetta); font-size: 17px; font-weight: 900; line-height: 3em; text-transform: uppercase; } /* „Współpraca” w panelu: etykieta + „+/−” w jednej linii (core domyślnie układa je w kolumnie — li ma flex-direction:column), submenu domyślnie ZWINIĘTE, rozwija się natywnym togglem WP (aria-expanded, ten sam button co na desktopie) — bez własnego JS, wystarczy nadpisać CSS, które w panelu na sztywno chowa ikonę i na sztywno pokazuje submenu (patrz selektory niżej, dobrane tak, by mieć wyższą specyficzność niż reguły core w wp-includes/blocks/navigation/style.css). */ .zs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item.has-child { display: block; position: relative; text-align: center; } .zs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item.has-child > .wp-block-navigation-item__content, .zs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-submenu__toggle { display: inline-flex; vertical-align: middle; } /* „+” zwinięte / „−” rozwinięte, jak aux-submenu-indicator na żywo (2 kreski, druga obrócona). */ /* Runda 5: live .aux-submenu-indicator 25×16 jest POZA przepływem — etykieta „Współpraca” jest wyśrodkowana sama, „+” doklejony 7px za nią (label 99.5–258.5, wskaźnik 265.5 @360). abspos bez left/top = pozycja statyczna tuż za etykietą, a wyśrodkowanie linii jej nie liczy. */ .zs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon { display: inline-flex; position: absolute; width: 25px; height: 16px; top: 19.5px; margin: 0 0 0 7px; } .zs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon svg { display: none; } .zs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon::before, .zs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 15px; height: 1px; background: #333; transform: translate(-50%, -50%); } .zs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .15s; } /* button ma OBIE klasy naraz (submenu-icon + submenu__toggle na tym samym elemencie) — selektor z rundy 2 (`.toggle .icon`, potomek) nigdy nie trafiał, bo to nie jest zagnieżdżenie tylko jeden element; poprawione na złączony selektor bez spacji (zweryfikowane realnym DOM). */ .zs-nav .wp-block-navigation-item.zs-open > .wp-block-navigation-submenu__toggle.wp-block-navigation__submenu-icon::after { transform: translate(-50%, -50%) rotate(0deg); } /* Domyślnie zwinięte (nadpisuje regułę core, która w panelu na sztywno ustawia visible/height:auto). UWAGA: aria-expanded z natywnego bindingu WP (state.isSubmenuOpen) w panelu overlay okazał się permanentnie "true" od razu po otwarciu panelu i NIE zmienia się po kliknięciu (zweryfikowane: 4× klik, aria-expanded pozostaje "true" cały czas) — inaczej niż na desktopie, gdzie ten sam button działa poprawnie (Step 6). Dlatego w panelu sterujemy zwijaniem/rozwijaniem WŁASNĄ klasą `.zs-open` (nadawaną w site.js), a nie [aria-expanded] — zgodnie z briefem „jeśli core nie daje tego natywnie w overlay, dopisz w site.js”. */ .zs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item.has-child .wp-block-navigation__submenu-container { visibility: hidden; opacity: 0; height: 0; overflow: hidden; position: static; width: 100%; min-width: 0; padding: 0; margin: 0; background: var(--wp--preset--color--teal) !important; } .zs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item.has-child.zs-open > .wp-block-navigation__submenu-container { visibility: visible; opacity: 1; height: auto; overflow: visible; padding: 18px 0 18px 7.275px; /* live .sub-menu: li padding-top 18 + padding-left 7.275 */ box-shadow: 0 0 10px rgba(0, 41, 38, .76); box-sizing: border-box; } .zs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: var(--wp--preset--color--white) !important; background: transparent !important; font-size: 17px; font-weight: 900; line-height: 3em; padding: 0; } /* 1025–1053: logo+linia+tagline (0,12·(w−20) + 105) + menu 804,5 nie mieszczą się w kolumnie w−20 — na live menu schodzi do 2. rzędu (x=10, wysokość widżetu 58), nagłówek = wys. logo + 60 + 58 (1025: 178, 1050: 181). */ @media (min-width: 1025px) and (max-width: 1053px) { :root { --zs-header-h: calc(11.887vw + 56.19px); } .zs-header__in { flex-wrap: wrap; align-content: flex-start; padding-top: 10px; } .zs-brand__logo { padding-block: 20px; } .zs-nav { flex: 1 0 100%; height: 58px; } .zs-nav .wp-block-navigation__container { justify-content: flex-start; } } /* T13 (parked z T4), runda poprawek 1: dokładnie przy 1054px kolumna .zs-header__in − szerokość marki dawała .zs-nav ~0,6px za mało miejsca na 7 pozycji w jednym rzędzie — "Kontakt" schodził do drugiego rzędu, mimo że przy 1055px (1px szerzej) mieści się już bez problemu (measured: preview 1054 = 804,92px dostępne, 1055 = 805,50px). Pierwsza wersja poprawki zmieniała padding-inline (obie strony) tylko w paśmie 1054–1060px — to przesuwało też logo_x (lewa krawędź loga = padding-left header__in 10 + padding-left brand__logo 20 = 30) o 1px w dół i z powrotem w górę na obu krawędziach pasma, dając SKOK, którego na żywo nie ma (logo_x na żywo jest stałe 30 w całej strefie 1054–1199, bo lewy padding się tam nie zmienia). Poprawka: zmieniamy WYŁĄCZNIE padding-right (prawa strona), nie inline — brand jest upakowany do lewej krawędzi (layout justifyContent:"left"), więc mniejszy prawy padding tylko odsłania dodatkowe miejsce dla .zs-nav (niewykorzystana przestrzeń z prawej, gdy pozycje i tak mieszczą się w rzędzie) i NIE przesuwa logo_x ani pozycji już mieszczących się w jednym rzędzie — zero skoku na obu krawędziach 1054/1053 i 1199/1200. Zasięg całej strefy płynnej 1054–1199 (nie tylko wąskiego pasma wokół 1054) z zapasem 2px (10→8px, czyli 2× większy niż zmierzony deficyt 0,6px) — odporne na drobne różnice renderowania fontu. */ @media (min-width: 1054px) and (max-width: 1199px) { .zs-header__in { padding-right: 8px; } } /* --- Tablet (≤1024): logo/linia większe, menu w pełni widoczne, zawija się w 2. rząd --- */ @media (max-width: 1024px) { :root { --zs-header-h: 243px; --zs-under: 43.75px; } .zs-header__in { flex-wrap: wrap; justify-content: center; align-content: flex-start; row-gap: 0; padding-top: 30px; } .zs-brand { flex: 1 0 100%; justify-content: center; } /* live: szerokość linii = 4% kolumny (1024→40.2, 820→32, 768→29.9) */ .zs-brand::before { width: 4%; } .zs-brand__logo img { width: 74px; height: 110px; } .zs-brand__tag { line-height: 17px; padding-left: 15px; } /* Przesunięcie w dół 2. rzędu menu (dokładna wartość z pomiaru live @1024, patrz komentarz na górze pliku). margin-top na .zs-nav jest zerowany przez `.is-layout-flex > :is(*, div) {margin:0}` z core (bez :where()); transform na .zs-nav też zawiódł — .wp-block-navigation__ responsive-container ma WŁASNY transform (animacja wsuwania panelu), więc dokładał się do naszego i dawał 2× wartość. Padding-top na samej liście `.wp-block-navigation__container` omija oba problemy. */ .zs-nav { flex: 1 0 100%; } .zs-nav .wp-block-navigation__container { padding-top: 74px; justify-content: center; } } /* 769–824: rząd menu live (804.5px) nie mieści się w kolumnie (w−20) — „Kontakt” schodzi do 3. rzędu, nagłówek live ma wtedy 260.9px (pomiar @820). */ @media (min-width: 769px) and (max-width: 824px) { :root { --zs-header-h: 261px; } } /* --- Przełącznik burgera (≤768, próg z żywego data-switch-width="768") --- */ @media (max-width: 768px) { :root { --zs-header-h: 170px; } .zs-header__in { flex-wrap: nowrap; justify-content: center; align-content: normal; column-gap: 0; padding-top: 0; } .zs-brand { flex: 0 1 auto; } .zs-brand::before { width: 29.9px; } .zs-brand__tag { letter-spacing: -1px; } .zs-nav { flex: 0 0 auto; margin-top: 0; } /* live @768: burger 20×20 przy dolnej krawędzi widżetu menu (y 102.5, nie środek 75) */ .zs-nav .wp-block-navigation__responsive-container-open { display: flex !important; top: 27.5px; } .zs-nav > .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; } /* Panel przy DOKŁADNIE 768 ma inny (mniejszy, ciasny) rozmiar liter niż @767 w dół — pomiar live runda 3 (getComputedStyle na .aux-fs-menu a / .sub-menu a przy viewport=768): pozycje 12px/line-height:12px (nie 2.2em — to był błąd rundy 2, kaskadował też na 390, patrz reset w @767 niżej); submenu 10.5px/line-height:10.5px/padding 12px 11px. */ .zs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 12px; line-height: 12px; } .zs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 10.5px; line-height: 10.5px; padding: 12px 11px; } /* live @768: pozycje 1. poziomu w panelu mają padding-left 40px (jak pasek desktopowy) → tekst +20px w prawo; „+” 5px za etykietą, wyżej niż @767. */ .zs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { padding-left: 40px; } .zs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon { top: 0; margin: 0 0 0 5px; } } /* --- Mobile (≤767): logo/linia mniejsze, letter-spacing tagline --- */ @media (max-width: 767px) { :root { --zs-header-h: 107px; } /* live: kolumna z paddingiem 10, widżety [logo 65][linia 23][tagline 152.8][menu 40] rozłożone space-between → 3 równe odstępy (w−300.8)/3. U nas: marka rośnie, jej padding-right = ostatni odstęp (33.333% szerokości kontenera − 93.6px), wewnątrz space-between daje dwa pozostałe. */ .zs-header__in { justify-content: space-between; } .zs-brand { flex: 1 1 auto; justify-content: space-between; padding-right: calc(33.333% - 93.6px); } .zs-brand::before { width: 23px; } .zs-brand__logo { padding-inline: 10px; } .zs-brand__logo img { width: 45px; height: 67px; } .zs-brand__tag { width: 152.8px; padding-left: 0; line-height: 15px; } .zs-nav { padding-inline: 10px; } .zs-nav .wp-block-navigation__responsive-container-open { top: 0; } /* Reset po warstwie ≤768 (runda 3): bez tego 12px/10.5px z próba 768 kaskadowały też na 390 — pomiar live @390: pozycje i submenu identycznie 17px/line-height:3em/letter-spacing:-1px, submenu padding:0 (cały odstęp robi line-height, nie padding). */ .zs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 17px; line-height: 3em; } .zs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 17px; line-height: 3em; padding: 0; } .zs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { padding-left: 0; } .zs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon { top: 19.5px; margin: 0 0 0 7px; } /* Blady szary znak w tle panelu (live: section.aux-fs-popup ma background-image sign_gray_2.svg, center center, 315px, no-repeat — TYLKO w wariancie mobilnym _mobile, stąd zakres ≤767, nie ≤768). */ .zs-nav .wp-block-navigation__responsive-container.is-menu-open { background-image: url(assets/img/cs-mark.svg); background-repeat: no-repeat; background-position: center center; background-size: 315px; } } /* === footer === */ /* Pomiary live (Playwright, o-mnie/, 2026-09-26; sekcja Elementor 333a101, elementor_library 9): Tło = HERO_footer_1.jpg, JUŻ turkusowo tonowane w samym pliku (duotone) — .elementor-background-overlay na żywo ma opacity:0.5, ale background-color:rgba(0,0,0,0) (brak ustawionego koloru w _elementor_data, brak globalnego fallbacku w kicie) → overlay REALNIE NIEWIDOCZNY. „Turkusowa nakładka” ze specu to sam obraz, nie CSS — potwierdzone odczytem pikseli hero-footer.jpg. Stąd: tło = assets/img/footer-bg.webp (ta sama grafika, WebP, bez dodatkowego CSS overlay). Wysokość całej sekcji STAŁA na każdej szerokości: padding-top 251px (250 + border-top 1px #EAEAEA), padding-bottom 50px — potwierdzone przeliczeniem na wszystkich 5 szerokościach (250/251+content+50 = zmierzona wysokość sekcji). Total: 1920/1440 414.6px→415; 1024 741.2px→741; 768 769.2px→769; 390 803.2px→803 (różne, bo interlinia tekstu na żywo skacze 15px→23px poniżej 1024 — to konsekwencja responsywnej typografii Phlox, nie coś do 1:1 odtwarzania; u nas wysokości wymuszone wprost, tak żeby pasmo testowe (crop od dołu strony) trafiało w to samo miejsce co na żywo). Kolumna ≤1024 rozłożona `justify-content:space-between` (logo przypięte do góry, ikony do dołu, tekst między) — jedyny układ, który odtwarza fakt, że live ma padding-top:251/padding-bottom:50 STAŁE na każdej szerokości (patrz niżej przy media queries; `space-evenly` z pierwszej próby wypychał całą kolumnę za wysoko, poprawione po wizualnej kontroli @390). Logo: białe „white.png” (mark CS + „ZUZANNA SOBCZAK”), własny WebP z zachowaną alfą, rozmiar renderowany z pomiaru: 1920/1440 63×94; 1024/768 161×239; 390 157×233 (ten sam współczynnik ~0.673 na każdej szerokości → brak zniekształceń). Tekst: live „Zuzanna Sobczak © 2023. All rights reserved. Powered by Marcin Jania” w foncie „zuza” (Use Any Font, znika z motywem) — odstępstwo świadome (ruling 5): bez „Powered by”, rok bieżący, font z naszej palety (Lexend). Ikony społecznościowe — RUNDA POPRAWEK 1 (2026-09-26, po przeglądzie kontrolera): pierwsza wersja (generyczne SVG, 22px, gap 10px) nie była 1:1 — zwłaszcza YouTube na żywo to glif auxin-youtube (plakietka „You/Tube”, font auxin-front), nie odtwarzalny żadnym generycznym kształtem. Naprawione przez wyciągnięcie PRAWDZIWYCH glifów z fontów użytych na żywo (fontTools, TTFont.getBestCmap + SVGPathPen + BoundsPen, y-flip przez matrix(1,0,0,-1,-xMin,yMax)): facebook-f U+F39E z .../elementor/assets/lib/font-awesome/webfonts/fa-brands-400.woff2 instagram U+F16D z tego samego pliku (fa-shared.css: elementor-icons-shared-0-css) youtube U+E1C2 (auxicon-youtube) z .../themes/phlox/css/fonts/fontastic/auxicon/auxin-front.ttf Wyekstrahowane ścieżki wklejone jako inline w patterns/footer.php (fill="currentColor") — ŻADEN font ikon nie trafia do motywu, tylko statyczne SVG. Rozmiar z pomiaru live: font-size/svg height:32px (nie 22px), szerokość auto (proporcja glifu: fb 274/512, ig 449/449, yt 424/512). Odstęp między ikonami z pomiaru live (rekonstrukcja z margin każdego widgetu w post-9.css: 10px margin-right na fb + 10px margin-left na ig = 20 luki między fb i ig; analogicznie ig→yt) = 20px, NIE 10px jak w pierwszej wersji (błąd: policzyłem odstęp między BOX-ami widgetów zamiast między samymi glifami, które mają dodatkowy margines wewnątrz boxa). URL-e z live (grep -oE 'href="https://(www\.)?(facebook|instagram|youtube)[^"]+"'): facebook.com/ZuzannaSobczakPL · instagram.com/zuzanna_sobczak · youtube.com/channel/UCgUTMDaNRbqAhgDITiUUkYA Hover: sprawdzone (Playwright .hover()) — kolor/opacity ikon się NIE zmienia na żywo, więc brak dedykowanego stanu :hover w CSS (zgodnie z live). Kontener treści — RUNDA POPRAWEK 1: zmierzony na 2560/1920/1440/1366/1280 — szerokość ZAWSZE dokładnie 1200px, wyśrodkowana ((viewportW-1200)/2), więc nasze max-width:1200px jest poprawne. 25px różnicy w x logo (live 385 vs nasze 360 @1920) to NIE różnica szerokości kontenera, tylko fakt, że kolumna Elementora dla logo jest szersza (112.98px, 9.416% z 1200) niż sam obrazek (62.98px) i Elementor centruje obrazek w tej kolumnie — stąd obrazek zaczyna się 25px od lewej krawędzi kontenera, nie 0px. Analogicznie ikony na żywo kończą się 29px przed prawą krawędzią kontenera (kolumna ikon też szersza niż realna szerokość glifów+marginesów). Odtworzone przez margin-left:25px na logo i margin-right:29px na social (tylko desktop row — w układzie kolumnowym ≤1024 wyzerowane, bo tam wszystko i tak wyśrodkowane text-align:center). Przycisk „do góry” (.aux-goto-top-btn na żywo): okrąg 35×35, tło białe, obrys 1px #3D3D3D (żywy render to inset box-shadow, u nas zwykły border — wizualnie identyczne), strzałka #444, po hover tło ciemnieje i strzałka bieleje; position:fixed;right:50px(30px ≤767);bottom:30px. Próg widoczności na żywo to płynne przejście transform translateY między scrollY≈200 a ≈550 (pełna widoczność ≈600) — site.js (Task 4) już przełącza klasę .is-visible przy scrollY>600, tu tylko styl. */ .zs-footer { position: relative; /* RUNDA POPRAWEK 3: strefa 1025–1199px live skaluje się PŁYNNIE (Elementor: kolumny % w kontenerze boxed, który poniżej max-width:1200 = width:100% widoku) — sekcja i logo NIE są tam stałe. Zmierzone live (Playwright, getBoundingClientRect, 1025/1050/1100/1150/1180/1200, dopasowanie liniowe, błąd <0,03px): wysokość sekcji = 14,0107vw + 246,4735px, ograniczona do [390,1px @1025 … 414,6px @1200] (powyżej 1200 kontener capuje się na 1200 i wartość jest STAŁA — potwierdzone identyczną wysokością na 1280/1366/1440/1920/2560 w poprzednich rundach). clamp() odtwarza to bez tabelaryzowania per-szerokość (jedna formuła na całą strefę >1024). */ height: clamp(390.1px, calc(14.0107vw + 246.4735px), 414.6px); background-color: var(--wp--preset--color--teal-dark); background-image: url(assets/img/footer-bg.webp); background-position: top center; background-size: cover; border-top: 1px solid #EAEAEA; } .zs-footer__in { max-width: 1200px; height: 100%; margin: 0 auto; display: flex; /* RUNDA POPRAWEK 2: align-items:flex-start + margin-top JAWNY per element (nie align-items:center) — center na całej wysokości 415px dawał ~161px od góry (kontroler: "za wysoko o ~100px"), a align-items:center WEWNĄTRZ paddingu (415-251-50=114) centrowałby KAŻDY element wg WŁASNEJ wysokości, co dla tekstu/ikon (krótsze pudełka niż logo) i tak nie trafiało dokładnie w live (live nie centruje tekstu/ikon względem logo — ma własne, stałe przesunięcie każdego elementu, zmierzone niezależnie, patrz margin-top niżej). Dokładny pomiar live (Playwright, section.getBoundingClientRect, y względem góry sekcji 1920/1440/ 1366/1280): logo.y=261, text.y=285,3, icons.y=289,3 — stąd margin-top = różnica od padding-top(251): logo 10px, tekst 34px, ikony 38px. RUNDA POPRAWEK 3: logo.y zostaje STAŁE 261px na całej strefie 1025–2560 (potwierdzone pomiarem — margin-top logo NIE skaluje się, tylko wysokość/szerokość obrazka), ale text.y i icons.y SKALUJĄ SIĘ w strefie 1025–1199 (7,0049vw + 201,2407 / +205,2407 względem góry sekcji — te same nachylenie, icons zawsze +4px od text) — stąd margin-top tekstu/ikon też jako clamp(). */ align-items: flex-start; padding: 251px 0 50px; box-sizing: border-box; } .zs-footer__logo { flex: 0 0 auto; line-height: 0; margin-left: 25px; margin-top: 10px; } /* RUNDA POPRAWEK 3: height jako clamp() (nie stałe 94px) — patrz formuła wysokości sekcji wyżej; logo skaluje się z tym samym nachyleniem (14,0107vw - 74,5265px, granice 69,1–93,6px), width:auto pozwala szerokości podążać za naturalną proporcją pliku (~0,673, potwierdzone na każdym z 6 zmierzonych punktów pośrednich). */ .zs-footer__logo img { display: block; height: clamp(69.1px, calc(14.0107vw - 74.5265px), 93.6px); width: auto; } /* RUNDA POPRAWEK 3 (issue 3): .zs-footer__meta opakowuje tekst+ikony w markupie (patterns/ footer.php), ale na desktopie (wiersz) ma być NIEWIDOCZNY dla layoutu — display:contents sprawia, że .zs-footer__text i .zs-footer__social są nadal BEZPOŚREDNIMI elementami wiersza .zs-footer__in, więc cały mechanizm wyżej (margin-left:50/auto, gap, itd.) działa bez zmian. W układzie kolumnowym (≤1024, niżej) .zs-footer__meta staje się prawdziwym kontenerem flex. */ .zs-footer__meta { display: contents; } .zs-footer__text { margin: clamp(22px, calc(7.0049vw - 49.7593px), 34.3px) 0 0 50px; /* RUNDA POPRAWEK 2: font live to niestandardowy „zuza” (Use Any Font, niedostępny w naszym zestawie) — kontroler zdecydował o mapowaniu na Zetta (nasz „wide/spaced” branding font), nie Lexend. Reszta wartości to DOSŁOWNY computed style z live (Playwright, 1920/1024/390): font-size:10px, font-weight:400 (u nas 300 — jedyny plik Zetty, który mamy; 400 dawałby syntetyczny bold), letter-spacing:-1px, line-height:15px (do 768 włącznie) / 23px (≤767, skok w responsywnej typografii Phlox — potwierdzone pomiarem PRZY 768: już 23px, nie dopiero ≤767), color #FFFFFF. */ font-family: var(--wp--preset--font-family--zetta); font-size: 10px; font-weight: 300; letter-spacing: -1px; line-height: 15px; color: var(--wp--preset--color--white); } .zs-footer__social { flex: 0 0 auto; display: flex; align-items: center; gap: 20px; margin-left: auto; margin-right: 29px; margin-top: clamp(26px, calc(7.0049vw - 45.7593px), 38.3px); } .zs-footer__social a { display: inline-flex; color: var(--wp--preset--color--white); } /* RUNDA POPRAWEK 2: box 32×32 STAŁY (nie height:32/width:auto) dla WSZYSTKICH trzech ikon — na żywo Elementor renderuje każdą ikonę w jednolitym kwadracie 32×32 (miara DOM: „glyph” rect każdej z 3 ikon = dokładnie 32×32, niezależnie od naturalnych proporcji glifu), a sam atrament glifu jest wyśrodkowany w tym kwadracie wg jego wymiarów w foncie (dlatego np. Instagram — w foncie już prawie kwadratowy, 449×449 w polu 512×512 — realnie maluje tylko 28×28 z 2px marginesem, potwierdzone skanem pikseli live). viewBox 0 0 512 512 (upm obu fontów) + glif wyśrodkowany transformem w patterns/footer.php odwzorowuje to 1:1 — przy stałym boxie 32×32 i gap:20px odtwarza się też DOKŁADNIE sumaryczna szerokość rzędu z live (136px, potwierdzone: x od 1394,95 do 1530,95 @1920) oraz realne odstępy atrament-do-atramentu z pomiaru live (~30px fb→ig, ~26px ig→yt — mimo jednakowego gap:20px, bo różne ikony mają różny margines wewnętrzny). Poprzednia wersja (height:32;width:auto, tight bbox) dawała nierówne boxy (fb 17px, ig 32px, yt 26px) i sumaryczną szerokość 115px zamiast 136px — stąd zauważalne przesunięcie. */ .zs-footer__social svg { display: block; width: 32px; height: 32px; } /* ≤1024 (tablet + telefon): kolumna, logo duże jak na żywo (161×239). RUNDA POPRAWEK 2: justify-content:space-between USUNIĘTE — dawało tylko przybliżone AE (bo pinowało logo/ikony do stałego padding-top/bottom sekcji, ignorując, że kolumny Elementora mają WŁASNE, niezależne od siebie marginesy wewnętrzne). Zamiast tego: normalny flow + margin-top JAWNY na każdym elemencie, wyliczony wprost z pomiaru live (Playwright, y względem góry sekcji, 1024/820/768 — identyczne na wszystkich trzech): logo.y=261 (margin-top:9, patrz niżej), text.y=550,2 (margin-top = 550,2 - (251+9+239,2) = 51 ≈ 50 od dołu logo). RUNDA POPRAWEK 3 (issue 3): margin-top ikon z rundy 2 zastąpiony mechanizmem flow — .zs-footer__meta (patrz baza wyżej) przestaje być display:contents i staje się kolumną flex z WŁASNĄ stałą wysokością + justify-content:space-between: tekst trzyma się GÓRY tego kontenera, ikony DOŁU, niezależnie od faktycznej wysokości NASZEGO (krótszego, inny font) tekstu — nie trzeba już przeliczać stałej „wstecz” z założonej liczby linii. margin-top samego .zs-footer__meta = to, co wcześniej miał tekst (pozycjonuje GÓRĘ kontenera tam, gdzie live ma text-top). Wysokość .zs-footer__meta = zmierzona live (icon-bottom − text-top): 112px (1024/820), 136px (768, bo tekst live wyżej — inna interlinia), 146px (≤767, bo tekst live niżej — inny margin-top). */ @media (max-width: 1024px) { .zs-footer { height: 741px; } .zs-footer__in { flex-direction: column; align-items: center; text-align: center; height: 100%; padding: 251px 0 50px; box-sizing: border-box; } .zs-footer__logo img { width: 161px; height: 239px; } /* Znak startuje 9px niżej niż surowe padding-top — kolumna Elementora ma własny wewnętrzny odstęp wokół obrazka (potwierdzone porównaniem pozycji jasnych pikseli znaku live vs preview: 260 vs 251 @1024/768). margin-left:0 zeruje inset z desktopu (25px) — w układzie kolumnowym wszystko jest wyśrodkowane, offset lewy/prawy z boxed containera nie ma sensu. */ .zs-footer__logo { margin-top: 9px; margin-left: 0; } .zs-footer__meta { display: flex; flex-direction: column; align-items: center; justify-content: space-between; margin-top: 50px; height: 112px; } /* width:173px = zmierzona szerokość bloku tekstu live. Nasz tekst (2 linie, krótszy o „Powered by…") renderuje się węższy (~168px) i wyśrodkowany w węższym pudełku wychodził 2,5px w bok względem live (połowa różnicy szerokości) — stałe 173px box (tekst nadal wyśrodkowany W ŚRODKU niego przez text-align:center z .zs-footer__in) usuwa tę różnicę. */ .zs-footer__text { margin: 0; width: 173px; } .zs-footer__social { margin: 0; } } /* Próg 768 z pomiaru live: wysokość sekcji inna (769 vs 741) I interlinia tekstu już 23px (nie dopiero ≤767) — potwierdzone pomiarem PRZY DOKŁADNIE 768 (live: line-height 23px). Wysokość .zs-footer__meta inna niż w bloku ≤1024 (136 nie 112) — bo nasz tekst tu wyższy (2×23=46 nie 2×15=30, przez line-height 23px), a target absolutny ikon (654,2 live) jest inny niż w grupie 1024/820 — ale mechanizm space-between wewnątrz .zs-footer__meta rozwiązuje to SAM, wystarczy podać poprawną wysokość kontenera. */ @media (max-width: 768px) { .zs-footer { height: 769px; } .zs-footer__text { line-height: 23px; } .zs-footer__meta { height: 136px; } } /* ≤767: logo mobilne mniejsze (157×233), wysokość jak na żywo. Odstęp nad znakiem tu większy (45px, nie 9px z ≤1024) — potwierdzone tym samym porównaniem pikseli @390 (296 vs 251): mobilny wariant kolumny Elementora ma dodatkowy margines (padding_mobile + margin_mobile). RUNDA POPRAWEK 2: margin-top .zs-footer__meta też inny niż w grupie 1024/820/768 (zmierzone niezależnie na 430/412/390/375/360 — identyczne na wszystkich pięciu): 60px od dołu logo (nie 50). Wysokość .zs-footer__meta = 146px (inna niż 768 — inny margin-top zmienia punkt startu, a target absolutny ikon live też inny). line-height:23px NIE powtórzone (RUNDA POPRAWEK 3, issue 2) — @media(max-width:768px) wyżej już obejmuje ≤767 (767<768). */ @media (max-width: 767px) { .zs-footer { height: 803px; } .zs-footer__logo img { width: 157px; height: 233px; } .zs-footer__logo { margin-top: 45px; } .zs-footer__meta { margin-top: 60px; height: 146px; } } /* Przycisk „do góry" (wp_footer, functions.php) — 1:1 z .aux-goto-top-btn */ .zs-totop { position: fixed; right: 50px; bottom: 30px; z-index: 40; width: 35px; height: 35px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--wp--preset--color--white); border: 1px solid #3D3D3D; color: #444; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .25s ease, transform .25s ease, background-color .2s ease, color .2s ease; } .zs-totop.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .zs-totop:hover, .zs-totop:focus-visible { background: #3D3D3D; color: var(--wp--preset--color--white); } .zs-totop svg { display: block; } @media (max-width: 767px) { .zs-totop { right: 30px; } } /* === index === */ /* Strona główna (ID 10) — pomiary live (Playwright, 2026-09-26, 15 szerokości + 1100/1025; pełna tabela w .superpowers/sdd/2026-09-25-zuzannasobczak-lite/task-6-report.md). Sekcje Elementora: ff1a137 hero · 69903b7 „O projekcie” ≤1024 (hidden-desktop) · 6c3cfb1 „O projekcie” ≥1025 (hidden-tablet/mobile) · 5744938 kafle. Obie wersje „O projekcie” mają INNĄ treść (≤1024: akapit „W wolnym czasie…” zamiast „Blog…”, separatory = line_1.png zamiast kreski) — dlatego są dwie sekcje przełączane progiem 1024, dokładnie jak na live. Kontekst typograficzny Phlox dziedziczony przez widżety live: >1024 12px/18px; 769–1024 10px/15px; ≤768 10px/23px + letter-spacing −1px — odtworzony na sekcjach (od niego zależą line-boxy obrazków inline i przycisków, a więc wysokości sekcji). */ /* Live: nagłówek jest fixed, a treść zaczyna się 52,5px (≤1024: 43,75px) od góry dokumentu — hero wchodzi pod nagłówek (tło liczone od 52,5). Na innych stronach body ma padding = wysokość nagłówka. */ body.home { padding-top: var(--zs-under); } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; word-wrap: normal !important; } .zs-hero, .zs-about, .zs-tiles { font-size: 12px; line-height: 18px; font-weight: 400; text-rendering: optimizeLegibility; overflow-wrap: break-word; } /* Hero: tło Hero_7 cover top center, kolor #008F86, nakładka 270deg rgba(24,189,161,0)→#008F86, padding 200/200; kolumna max 1200 z paddingiem 10; logo white.png = 17% kolumny (≤767: 39%). */ .zs-hero.wp-block-cover { display: block; min-height: 0; padding: 200px 0; overflow: visible; background: var(--wp--preset--color--teal); color: #fff; } /* logo hero min. 10px pod nagłówkiem (769–824 nagłówek 261 zasłaniał 7px) — patrz --zs-header-clear */ body.home .zs-hero.wp-block-cover { padding-top: max(200px, var(--zs-header-clear)); } .zs-hero.wp-block-cover > .wp-block-cover__background.has-background-dim { background-color: transparent; background-image: linear-gradient(270deg, rgba(24, 189, 161, 0) 0%, #008F86 100%); opacity: 1; } .zs-hero > .wp-block-cover__inner-container { max-width: 1200px; margin: 0 auto; padding: 10px; box-sizing: border-box; } .zs-hero__logo.wp-block-image { margin: 0; text-align: center; } .zs-hero__logo.wp-block-image img { display: inline-block; width: 17%; height: auto; vertical-align: middle; } /* „O projekcie” — wspólne */ .zs-about { position: relative; margin: 0; } .zs-about::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; } .zs-about__bg.wp-block-image { position: absolute; inset: 0; z-index: 0; margin: 0; } .zs-about__bg.wp-block-image img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 0; } .zs-about__bg.wp-block-image picture { display: contents; } /* z functions.php (ukryty wariant nie pobiera się) — bez własnego pudełka */ .zs-about__col { position: relative; z-index: 2; } .zs-about .zs-about__h { margin: 50px 0 51px; font-family: var(--wp--preset--font-family--zetta); font-size: 31px; font-weight: 700; line-height: 46.5px; } .zs-about .zs-about__p { margin: 0; font-size: 12px; line-height: 23px; letter-spacing: -1px; text-align: left; } /* ≥1025: tło Hero_6 cover top center + nakładka 271deg #FAFAFA 46% → #EFEFEF00 70%, opacity .92; padding 100/100; treść w prawej kolumnie 50% (padding 10), akapity i kreski 70% kolumny. */ .zs-about--m { display: none; } .zs-about--d { padding: 100px 0; } .zs-about--d::before { background-image: linear-gradient(271deg, #FAFAFA 46%, rgba(239, 239, 239, 0) 70%); opacity: .92; } .zs-about--d .zs-about__col { margin-left: 50%; padding: 10px; } .zs-about--d .zs-about__h { color: rgba(0, 143, 134, .99); text-align: left; } .zs-about--d .zs-about__p { width: 70%; color: var(--wp--preset--color--ink); } /* akapity z

w edytorze Elementora: margin-bottom 1em wewnątrz widżetu (nie zapada się z kreską) */ .zs-about--d .zs-about__p--pm { padding-bottom: 12px; } .zs-about.zs-about--d .zs-rule.wp-block-separator { width: 70%; height: 0; margin: 35px 0; padding: 0; opacity: 1; border: 0; border-top: 1px solid rgba(0, 143, 134, .99); background: none; } /* >1024 (świadome odejście od live, na życzenie): cover przy rosnącej wysokości sekcji powiększał zdjęcie i ucinał Zuzę (1180 px — ledwo widać, 1030 — samo ramię; na 1920+ ucięte obcasy/nogi). Zdjęcie ma szerokość i położenie liczone z szerokości sekcji (cqw), niezależne od jej wysokości (ta skacze o linię tekstu), więc sylwetka przesuwa się płynnie; Zuza (w pliku 1920×1080: x 185–662, y 175–1058) zawsze w całości. Skala 0,88 (1025) → 0,95 (1919–2360) → maleje z niższą sekcją (0,84 przy 3440). Do 1919 zdjęcie przyklejone do lewej krawędzi i prawą częścią wjeżdża pod tekst; szerzej odsuwa się od krawędzi (lewy brzeg wtopiony w tło, --f). top = max(prostych, nachylenie ≤ 0,39 px/px) dobrane pod pomiar wysokości sekcji (obcasy ≥ 20 px nad dołem). Nad zdjęciem ściana (#EAEAEA, wtopienie 48 px), pod nim przedłużona podłoga (::after, gradient z dolnego rzędu pikseli). Gradient tekstu do 1919 zaciśnięty (kolano ~20% zasłony, akapity ≥ 85%); od 1920 bez zmian. */ /* Wymagania: jednostki cqw (Chrome 105, Safari 16, Firefox 110); maska: standardowe mask-image/ mask-composite (Chrome 120, Safari 15.4, Firefox 53) + -webkit-mask-composite dla starszego Chrome/Safari. Media queries w starej składni min/max-width (składnia zakresów dopiero od Safari 16.4). */ @supports (width: 1cqw) { @media (min-width: 1024.01px) { .zs-about--d .zs-about__bg.wp-block-image { overflow: hidden; container-type: inline-size; background: #EAEAEA; /* s = --w / 1920: 0,88→0,95 (1025–1919), 0,95, potem maleje (niższa sekcja), min. 0,8 */ --w: max(1536px, min(15.0336cqw + 1535.51px, 1824px, 2268.25px - 18.816cqw)); /* lewy brzeg Zuzy (x 185 w pliku): 16 → 175 px (1025–1919), dalej +0,395 px/px */ --l: calc(max(17.7852cqw - 166.3px, 39.5cqw - 583px) - var(--w) * .0963542); --t: max(-39cqw + 709.79px, -37cqw + 676.41px, -98.57px); --f: clamp(0px, var(--l) * .6, 150px); } .zs-about--d .zs-about__bg.wp-block-image img { position: absolute; z-index: 1; left: var(--l); top: var(--t); width: var(--w); height: auto; aspect-ratio: 16 / 9; object-fit: fill; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 48px, #000 calc(100% - 6px), transparent), linear-gradient(to right, transparent, #000 var(--f)); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent, #000 48px, #000 calc(100% - 6px), transparent), linear-gradient(to right, transparent, #000 var(--f)); mask-composite: intersect; } .zs-about--d .zs-about__bg.wp-block-image::after { content: ""; position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; top: calc(var(--t) + var(--w) * .5625 - 6px); background: linear-gradient(rgba(234, 234, 234, 0) 30px, rgba(234, 234, 234, .6) 180px), linear-gradient(to right, #EAEAEA var(--l), #262624 calc(var(--l) + var(--f)), #262624 calc(var(--l) + var(--w) * .3645833), #292C2B calc(var(--l) + var(--w) * .375), #4F4F50 calc(var(--l) + var(--w) * .4166667), #7E7F81 calc(var(--l) + var(--w) * .4583333), #B6B6B6 calc(var(--l) + var(--w) * .5), #E2E2E2 calc(var(--l) + var(--w) * .5416667), #EAEAEA calc(var(--l) + var(--w) * .5833333)); } } @media (min-width: 1024.01px) and (max-width: 1919.99px) { .zs-about--d::before { background-image: linear-gradient(271deg, #FAFAFA calc(44.7427% + 24.39px), rgba(239, 239, 239, 0) calc(81.8792% - 224.26px)); } } } /* Bez cqw (Firefox < 110): zostaje cover, ale zakotwiczony tak, by Zuza była możliwie cała: poziomo do lewej z przesunięciem (przy skalowaniu wysokością Zuza ~16 px od krawędzi), pionowo max(dół, głowa 40 px od góry) — do ~1920 obcasy widoczne, szerzej sekcja jest za niska na całą sylwetkę, więc zostaje głowa. */ @supports not (width: 1cqw) { @media (min-width: 1024.01px) { .zs-about--d .zs-about__bg.wp-block-image img { object-position: max(100%, 8.3vw - 306px) max(100%, 40px - 9.1146vw); } } } /* ≤1024: tło HERO_mobile_1 cover top center (≤767: HERO_mobile_2 contain), tło #fff; nakładka 360deg #003531 69% / transparent 56% (twarda krawędź na 69% od dołu), opacity .92 (≤767: 1). */ @media (max-width: 1024px) { .zs-hero, .zs-about, .zs-tiles { font-size: 10px; line-height: 15px; } .zs-about--d { display: none; } .zs-about--m { display: block; padding: 700px 0 70px; background: var(--wp--preset--color--white); } .zs-about--m::before { background-image: linear-gradient(360deg, #003531 69%, rgba(0, 53, 49, 0) 56%); opacity: .92; } .zs-about__bg--m { display: none; } /* live ≤1024: background-size NIE jest ustawione (auto) → HERO_mobile_1 w naturalnym rozmiarze 1080×1920, top center (nie cover). Wymiary jawne, bo srcset zmienia „naturalny” rozmiar . */ .zs-about__bg--t.wp-block-image { overflow: hidden; } .zs-about__bg--t.wp-block-image img { position: absolute; top: 0; left: 50%; width: 1080px; height: 1920px; transform: translateX(-50%); object-fit: fill; } .zs-about--m .zs-about__h { color: #fff; text-align: center; } .zs-about--m .zs-about__p { width: 600px; max-width: 600px; margin: 0 auto 50px; color: #fff; } .zs-mark-rule.wp-block-image { margin: 0 0 20px; padding: 0; text-align: center; } .zs-mark-rule.wp-block-image img { display: inline-block; width: 100%; height: auto; aspect-ratio: 1536 / 79; vertical-align: middle; } } @media (max-width: 768px) { .zs-hero, .zs-about, .zs-tiles { line-height: 23px; letter-spacing: -1px; } .zs-about .zs-about__h { line-height: 23px; letter-spacing: -1px; } } @media (max-width: 767px) { .zs-hero.wp-block-cover .wp-block-cover__image-background { object-position: 50% 50%; } .zs-hero__logo.wp-block-image img { width: 39%; } .zs-about--m { padding: 220px 0 20px; } .zs-about--m::before { opacity: 1; } .zs-about__bg--t { display: none; } .zs-about__bg--m.wp-block-image { display: block; } .zs-about__bg--m.wp-block-image img { object-fit: contain; } .zs-about--m .zs-about__h { margin-top: 60px; margin-bottom: 41px; font-size: 21px; } .zs-about--m .zs-about__p { width: 300px; max-width: 300px; margin-bottom: 25px; font-size: 10px; } .zs-mark-rule.wp-block-image { padding: 10px 0; } } /* Kafle: tło #fff + sign_gray_2.svg (= assets/img/cs-mark.svg, ten sam plik) 190px −472px / 83% auto (≤1024: 0 0; ≤767: −107px 108px / 654px auto) pod białą nakładką 44%; kontener max 1700; kolumny 33,33% z paddingiem 10 i margin-top 170 (≤767: 70, kolumny jedna pod drugą); obraz 80% (≤767: 70%) z cieniem −10 −10 52 1 rgba(0,0,0,.34), padding-bottom 40; hover: cały widżet (obraz + padding) scale(1.1), 800ms, bez przycinania (overflow visible na live). Przycisk aux-button outline: 9px (≤1024: 7,5px) 900 uppercase #4E4E4E, padding 12/23, ramka inset 1px #3D3D3D; hover = koło 150px #3D3D3D rosnące od środka (.45s), tekst biały. Stopka live zachodzi na dół sekcji o 37,5px (≤1024: 43,75px) — ujemny margines. */ .zs-tiles { margin: 0; } /* :root :where(.is-layout-flow) > :last-child zeruje margin-bottom (0,2,0) — stąd selektor 0,3,0. post-content to flow-root: ujemny margines skraca jego wysokość, więc stopka podjeżdża jak na live. */ .wp-block-post-content > .zs-tiles.wp-block-group { margin-bottom: -37.5px; } /* live: sekcja kafli (z pozycjonowaną nakładką Elementora) leży NAD górnymi 37,5px stopki — tło stopki widać dopiero pod kaflami, więc kafle z-index nad stopką. */ .zs-tiles { position: relative; z-index: 1; } .zs-tiles { padding: 0 0 150px; background: linear-gradient(rgba(255, 255, 255, .44), rgba(255, 255, 255, .44)), url(assets/img/cs-mark.svg) 190px -472px / 83% auto no-repeat, var(--wp--preset--color--white); } .zs-tiles .zs-tiles__cols.wp-block-columns { max-width: 1700px; margin: 0 auto; gap: 0; align-items: flex-start; } .zs-tiles .zs-tiles__cols > .wp-block-column { flex: 1 1 0; margin-top: 170px; padding: 10px; text-align: center; } .zs-tile.wp-block-image { margin: 0; padding: 0 0 40px; text-align: center; transition: transform .8s; } .zs-tile.wp-block-image:hover { transform: scale(1.1); } .zs-tile.wp-block-image a { display: inline-block; width: 100%; } /* szer. = kolumna niezależnie od srcset/sizes (img 80% tej szerokości) */ .zs-tile.wp-block-image img { display: inline-block; width: 80%; height: auto; vertical-align: middle; box-shadow: -10px -10px 52px 1px rgba(0, 0, 0, .34); } .zs-tiles .zs-tiles__btns.wp-block-buttons { display: block; margin: 40px 0 0; text-align: center; } .zs-tiles .zs-btn-outline.wp-block-button { display: inline; } .zs-tiles .zs-btn-outline .wp-block-button__link { position: relative; isolation: isolate; overflow: hidden; /* padding-bottom: live .aux-text to inline-block w line-boxie o line-height 1em → box o 1,14px (≤1024: 0,28px) wyższy niż 24 + 1em; tekst na tej samej wysokości, nadmiar na dole */ display: inline-block; width: auto; margin: 0 0 1em; padding: 12px 23px 13.14px; font-family: var(--wp--preset--font-family--zetta); font-size: 9px; font-weight: 900; line-height: 1em; letter-spacing: inherit; text-transform: uppercase; text-decoration: none; color: var(--wp--preset--color--ink); background: transparent; border: 0; border-radius: 0; box-shadow: inset 0 0 0 1px #3D3D3D; transition: color .45s; } .zs-tiles .zs-btn-outline .wp-block-button__link::before { content: ""; position: absolute; z-index: -1; top: 50%; left: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; background: #3D3D3D; transform: scale(0); transition: transform .45s cubic-bezier(.75, .1, .25, .9); } .zs-tiles .zs-btn-outline .wp-block-button__link:hover, .zs-tiles .zs-btn-outline .wp-block-button__link:focus-visible { color: #fff; } .zs-tiles .zs-btn-outline .wp-block-button__link:hover::before, .zs-tiles .zs-btn-outline .wp-block-button__link:focus-visible::before { transform: scale(1); } @media (max-width: 1024px) { .wp-block-post-content > .zs-tiles.wp-block-group { margin-bottom: -43.75px; } .zs-tiles { background-position: 0 0, 0 0; } /* live: font „zuza” przy 7,5px ma zaokrąglone (hinting) szerokości znaków ≈ 8px → tekst o ~4px szerszy niż liniowo; odtworzone letter-spacing +0,5px (pomiar: 70/75/47 vs 66/69/43 bez korekty) */ .zs-tiles .zs-btn-outline .wp-block-button__link { font-size: 7.5px; letter-spacing: .5px; padding-bottom: 12.28px; } } @media (max-width: 768px) { .zs-tiles .zs-btn-outline .wp-block-button__link { letter-spacing: -.5px; } /* −1px Phlox + 0,5 korekty */ } @media (max-width: 767px) { .zs-tiles { padding-bottom: 20px; background-position: 0 0, -107px 108px; background-size: auto, 654px auto; } .zs-tiles .zs-tiles__cols.wp-block-columns { max-width: 1200px; flex-direction: column; align-items: stretch; } .zs-tiles .zs-tiles__cols > .wp-block-column { flex: 0 0 auto; margin-top: 70px; } .zs-tile.wp-block-image img { width: 70%; } .zs-tiles .zs-tiles__btns.wp-block-buttons { margin-top: 0; } } /* === o-mnie === */ /* O mnie (ID 530) — CELOWO odejście od 1:1 (2026-09-26, prośba o czytelność): na live tekst był w Lexend Zetta 12px (≤1024 10px) w wierszu ~1330px (119–136 znaków). Teraz tekst czyta się jak wpis: sekcja ma klasę .zs-prose (nagłówki H2/H3, linki, listy — reguły wpisu), a typografię i kolumnę dajemy tutaj: Lexend 300 18px (≤767 17px) / 1,7, kolumna tekstu 840px od 1024 (~86 znaków), niżej ≤660px z marginesami 24px (≤767 20px). ZDJĘCIA zostają jak na starej stronie (życzenie klientki): pełna szerokość dawnego kontenera — min(100% − 70px, 1600px), padding 10, widżet 98,861%, wyrównane do lewej krawędzi kontenera. H1 „O MNIE” zostaje w Zetcie (marka). Body ma zwykły padding = --zs-header-h (nagłówek fixed nie zasłania H1). Dawne linie-obrazki (line_1.webp) → core/separator: cienka turkusowa kreska 120px na środku. Wykazy Edukacja / Nagrody / Kursy / Inne to listy (core/list), pogrubienia z treści klienta zostają, ale w liście 500 zamiast 600, żeby cały wykaz nie był „krzykiem”. */ .zs-omnie.wp-block-group { --zs-omnie-col: 660px; box-sizing: border-box; margin: 0; padding: 56px 0 96px; font-family: var(--wp--preset--font-family--lexend); font-size: 18px; font-weight: 300; line-height: 1.7; color: var(--wp--preset--color--ink); overflow-wrap: break-word; text-rendering: optimizeLegibility; } .zs-omnie.wp-block-group > * { box-sizing: border-box; width: min(var(--zs-omnie-col), calc(100% - 48px)); max-width: none; margin-inline: auto; } .zs-omnie.wp-block-group > .zs-omnie__img.wp-block-image { width: calc(.98861 * (min(100% - 70px, 1600px) - 20px)); margin-left: calc((100% - min(100% - 70px, 1600px)) / 2 + 10px); margin-right: 0; } .zs-omnie .zs-omnie__h1.wp-block-heading { margin: 0 auto 1.6em; font-family: var(--wp--preset--font-family--zetta); font-size: 31px; font-weight: 700; line-height: 1.5; letter-spacing: normal; text-transform: none; text-align: center; color: var(--wp--preset--color--teal-dark); } .zs-omnie h2.wp-block-heading { margin-top: 2.4em; } .zs-omnie figure.wp-block-image { margin-block: 2.2em; } .zs-omnie .wp-block-image img { display: block; width: 100%; height: auto; } .zs-omnie .wp-block-separator.zs-omnie__rule.zs-omnie__rule { width: 120px; height: 0; margin-block: 2.2em; border: 0; border-top: 1px solid var(--wp--preset--color--teal); opacity: 1; background: none; } .zs-omnie ul.wp-block-list { padding-left: 1.2em; } .zs-omnie li { margin-block: .55em; line-height: 1.6; } .zs-omnie li::marker { color: var(--wp--preset--color--teal); } .zs-omnie li strong { font-weight: 500; } .zs-omnie a { overflow-wrap: anywhere; } .zs-omnie img.emoji { display: inline; width: 1em; height: 1em; margin: 0 .07em; padding: 0; vertical-align: -.1em; border: 0; box-shadow: none; background: none; } @media (min-width: 1024px) { .zs-omnie.wp-block-group { --zs-omnie-col: 840px; } } @media (max-width: 767px) { .zs-omnie.wp-block-group { padding: 32px 0 64px; font-size: 17px; } .zs-omnie.wp-block-group > * { width: calc(100% - 40px); } .zs-omnie .zs-omnie__h1.wp-block-heading { font-size: 21px; margin-bottom: 1.2em; } .zs-omnie h2.wp-block-heading { font-size: 1.4rem; } .zs-omnie h3.wp-block-heading { font-size: 1.15rem; } } /* === podcasty === */ /* Podcasty (ID 1231) — pomiary live (Playwright, 2026-09-26, 15 szerokości + 1100/1025; raport .superpowers/sdd/2026-09-25-zuzannasobczak-lite/task-8-report.md). Na live JEDNA sekcja stretched 15f9622 (kolumna 100%, max 1200 z paddingiem 10, widget-wrap = flex-wrap, justify center): text-editor „PODCASTY” → H1 · obraz Podcast_cover_5 (link #ostatnie) · lead · „GOŚCINNIE” → H2 · 6 widżetów html (odtwarzacze Spotify, core/html dosłownie). Tło: #FFFFFFFC + nakładka sign_gray_2.svg (= assets/img/cs-mark.svg) 190px −472px, rozmiar naturalny (≤1024: 0 0), padding-bottom 200 (≤767: 50). Typografia Phlox jak na stronie głównej: >1024 12/18; 769–1024 10/15; ≤768 10/23 + letter-spacing −1. Nagłówki: widżet ma margin-bottom 20 (Elementor), a

w nim 1em — stąd 31+20 (≤767: 21+20). Widżety width-initial (obraz, lead, odtwarzacze, ≤767 H2) nie mają marginesu 20. Kontener jest flex, więc marginesy się nie zapadają (lead 12 + H2 100 = 112, jak na live). Nagłówek fixed: treść od 52,5px (≤1024: 43,75). Stopka zaczyna się 22,5px (≤1024: 31,25) nad dołem sekcji, a sekcja leży NAD nią (z-index). */ body.page-id-1231 { padding-top: var(--zs-under); } .wp-block-post-content > .zs-podcasty.wp-block-group { position: relative; z-index: 1; margin: 0 0 -22.5px; padding: 0 0 200px; /* dwie warstwy #FFFFFFFC jak na live (sekcja + nakładka) — łącznie nieprzezroczyste w strefie nad stopką */ background: url(assets/img/cs-mark.svg) 190px -472px no-repeat, linear-gradient(rgba(255, 255, 255, .99), rgba(255, 255, 255, .99)), rgba(255, 255, 255, .99); font-family: var(--wp--preset--font-family--zetta); font-size: 12px; font-weight: 400; line-height: 18px; color: #444; text-rendering: optimizeLegibility; } .zs-podcasty .zs-podcasty__in.wp-block-group { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; box-sizing: border-box; max-width: 1200px; margin: 0 auto; padding: 10px; } .zs-podcasty .zs-podcasty__in > * { box-sizing: border-box; flex: 0 0 auto; max-width: none; } .zs-podcasty .zs-podcasty__in > .zs-podcasty__h1, .zs-podcasty .zs-podcasty__in > .zs-podcasty__h2 { width: 100%; margin: 150px 0 51px; padding: 0; font-family: var(--wp--preset--font-family--zetta); font-size: 31px; font-weight: 700; line-height: 46.5px; letter-spacing: normal; text-transform: none; text-align: center; color: var(--wp--preset--color--ink); } .zs-podcasty .zs-podcasty__in > .zs-podcasty__h2 { margin-top: 100px; } .zs-podcasty .zs-podcasty__in > .zs-podcasty__h1 { margin-top: max(150px, var(--zs-header-clear)); } .zs-podcasty .zs-podcasty__in > .zs-podcasty__cover.wp-block-image { width: 100%; margin: 0; padding: 0 0 40px; text-align: center; } .zs-podcasty__cover.wp-block-image a { display: block; } .zs-podcasty__cover.wp-block-image img { display: block; width: 37%; height: auto; margin: 0 auto; box-shadow: 0 -3px 24px 18px rgba(0, 0, 0, .27); } .zs-podcasty .zs-podcasty__in > .zs-podcasty__lead { width: 50%; margin: 0 0 12px; padding: 0; font-size: 12px; line-height: 23px; letter-spacing: -1px; text-align: center; color: var(--wp--preset--color--ink); } /* odtwarzacze: widżet 37,288% z kontenerem margin 20 → iframe = 37,288% − 40px, wysokość 100 */ .zs-podcasty .zs-podcasty__in > iframe { display: block; width: calc(37.288% - 40px); height: 100px; margin: 20px; } @media (max-width: 1024px) { .wp-block-post-content > .zs-podcasty.wp-block-group { margin-bottom: -31.25px; background-position: 0 0, 0 0; font-size: 10px; line-height: 15px; } .zs-podcasty .zs-podcasty__in > .zs-podcasty__h1 { margin-top: max(200px, var(--zs-header-clear)); } .zs-podcasty__cover.wp-block-image img { width: 48%; } } @media (max-width: 768px) { .wp-block-post-content > .zs-podcasty.wp-block-group { line-height: 23px; letter-spacing: -1px; } .zs-podcasty .zs-podcasty__in > .zs-podcasty__h1, .zs-podcasty .zs-podcasty__in > .zs-podcasty__h2 { line-height: 23px; letter-spacing: -1px; } } @media (max-width: 767px) { .wp-block-post-content > .zs-podcasty.wp-block-group { padding-bottom: 50px; } .zs-podcasty .zs-podcasty__in > .zs-podcasty__h1, .zs-podcasty .zs-podcasty__in > .zs-podcasty__h2 { font-size: 21px; margin-bottom: 41px; } .zs-podcasty .zs-podcasty__in > .zs-podcasty__h1 { margin-top: max(100px, var(--zs-header-clear)); } .zs-podcasty .zs-podcasty__in > .zs-podcasty__h2 { width: 300px; margin-top: 50px; } .zs-podcasty__cover.wp-block-image img { width: 70%; } .zs-podcasty .zs-podcasty__in > .zs-podcasty__lead { width: 300px; margin-bottom: 10px; font-size: 10px; } .zs-podcasty .zs-podcasty__in > iframe { width: 260px; } } /* === video === */ /* Kanał YouTube (ID 1268) — pomiary live (Playwright, 2026-09-26, 15 szerokości + 1100/1025; raport .superpowers/sdd/2026-09-25-zuzannasobczak-lite/task-9-report.md). Na live: hero aaff2b9 (stretched, kolumna 100% max 1200, widget-wrap flex-wrap center z paddingiem 10): text-editor „Kanał YouTube” → H1 · ikona auxicon-youtube (link do kanału) · „Popularne diagnozy trenerów” · widżet video 52,627% (≤1024 445,073px, ≤767 300px) · ikona chevron. Potem 3 sekcje po 3 kolumny 33,33% (widget-wrap padding 10, justify center) z widżetami video: desktop >100% kolumny → efektywnie 100%, ≤1024 stałe px per film (ucięte do szerokości kolumny), ≤767 329px. Na końcu pusta sekcja c3a133c (padding 50 + kolumna 1px = 101). Ikony: glify z auxin-front(-2).woff (fontTools) jako SVG w pudełku 1em (przesunięcie glifu względem pudełka z metryk hhea 524/−1 i 512/−3 przy line-height 1 zaszyte w transform ścieżki). img inline-block na linii bazowej wrappera (Phlox 12/18 itd.) — wysokość widżetu jak na live (pomiar: 0 px różnicy). Filmy: core/embed + filtr render_block (functions.php) → .zs-yt (miniatura + przycisk, jak odtwarzacz YouTube przed startem); ramka = .wp-block-embed__wrapper (responsive-embeds: 56,25%). Nagłówek fixed: treść od 52,5px (≤1024 43,75). Stopka zachodzi 22,5px (≤1024 31,25) na pusty odstęp. */ body.page-id-1268 { padding-top: var(--zs-under); } .wp-block-post-content > .zs-video.wp-block-group { margin: 0 0 -22.5px; } .zs-video { font-family: var(--wp--preset--font-family--zetta); font-size: 12px; font-weight: 400; line-height: 18px; color: #444; text-rendering: optimizeLegibility; } .zs-video > * { margin: 0; } .zs-video .zs-video-hero.wp-block-group { position: relative; margin: 0; padding: 0 0 50px; background-color: var(--wp--preset--color--muted); background-position: -513px -800px; background-size: cover; background-repeat: repeat; } .zs-video-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(260deg, #003531FC 23%, #000000BA 86%); pointer-events: none; } .zs-video .zs-video-hero__in.wp-block-group { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; box-sizing: border-box; max-width: 1200px; margin: 0 auto; padding: 10px; } .zs-video-hero__in > * { box-sizing: border-box; flex: 0 0 auto; max-width: none; margin: 0; } .zs-video-hero__in > .zs-video__h1 { width: 100%; margin: 150px 0 20px; margin-top: max(150px, var(--zs-header-clear)); padding: 0; font-family: var(--wp--preset--font-family--zetta); font-size: 31px; font-weight: 700; line-height: 1.5; letter-spacing: normal; text-transform: none; text-align: center; color: #fff; } .zs-video-hero__in > .zs-video__lead { width: 100%; margin: 0 0 26px; padding: 0; font-size: 16px; font-weight: 700; line-height: 1.5; text-align: center; color: #fff; } .zs-video-hero__in > .zs-video__yt.wp-block-image, .zs-video-hero__in > .zs-video__chev.wp-block-image { width: 100%; margin: 0 0 20px; padding: 0 0 50px; text-align: center; } .zs-video-hero__in > .zs-video__chev.wp-block-image { margin: 0; padding: 50px 0 20px; } .zs-video__yt a { display: inline; } .zs-video__yt.wp-block-image img, .zs-video__chev.wp-block-image img { display: inline-block; max-width: none; vertical-align: baseline; } .zs-video__yt.wp-block-image img { width: 91px !important; height: 91px !important; } .zs-video__chev.wp-block-image img { width: 50px; height: 50px; } .zs-video-hero__in > .zs-video__v--hero { width: 52.627%; } .zs-video .zs-video-grid.wp-block-group { margin: 50px 0 0; padding: 0; background: var(--wp--preset--color--white); } .zs-video .zs-video-grid--1.wp-block-group { margin-top: 100px; } .zs-video .zs-video-grid__cols.wp-block-columns { max-width: 1200px; margin: 0 auto; gap: 0; flex-wrap: nowrap; align-items: stretch; } .zs-video .zs-video-grid__cols > .wp-block-column { display: flex; flex: 0 0 33.333%; flex-wrap: wrap; justify-content: center; align-content: flex-start; box-sizing: border-box; min-width: 0; padding: 10px; } .zs-video-grid__cols .zs-video__v { width: 100%; } .zs-video .zs-video__spacer.wp-block-spacer { width: min(calc(100% - 70px), 1600px); height: 101px !important; margin: 0 auto; } .zs-video .zs-video__v.wp-block-embed { flex: 0 0 auto; box-sizing: border-box; max-width: 100%; margin: 0; } /* Lekkie osadzenie YouTube (wszystkie strony i wpisy; filtr w functions.php dokłada .zs-yt-embed i klasy proporcji). Ramka: ::before responsive-embeds (56,25%), a aspect-ratio to zapas, gdy go brak. Przycisk i iframe po kliknięciu wypełniają ramkę. Chrome jak odtwarzacz YouTube przed startem (pomiar DOM odtwarzacza na live 2026-09-26): gradient 70px, avatar 36px, tytuł 700 20/28 (tryb „small” <400px: 18/26 i mniejsze wcięcia), kanał 12/13,2, przycisk play 68×48. */ .zs-yt-embed .wp-block-embed__wrapper { position: relative; aspect-ratio: 16 / 9; } .zs-yt-embed .wp-block-embed__wrapper > .zs-yt, .zs-yt-embed .wp-block-embed__wrapper > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .zs-yt { display: block; margin: 0; padding: 0; overflow: hidden; container-type: inline-size; border: 0; border-radius: 0; background: #000; color: #fff; font: inherit; letter-spacing: normal; text-align: left; cursor: pointer; } .zs-yt .zs-yt__thumb { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; } .zs-yt::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 1; height: 70px; background: linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)); pointer-events: none; } .zs-yt .zs-yt__avatar { position: absolute; top: 16px; left: 30px; z-index: 2; width: 36px; height: 36px; max-width: none; margin: 0; border-radius: 50%; } .zs-yt__info { position: absolute; top: 0; left: 26px; right: 36px; z-index: 2; font-family: Roboto, Arial, sans-serif; color: #fff; } .zs-yt__info--logo { padding-left: 52px; } .zs-yt__title { display: block; padding-top: 10px; overflow: hidden; font-size: 20px; font-weight: 700; line-height: 28px; white-space: nowrap; } .zs-yt__channel { display: block; overflow: hidden; font-size: 12px; font-weight: 400; line-height: 13.2px; white-space: nowrap; text-overflow: ellipsis; } @container (max-width: 399.98px) { .zs-yt .zs-yt__avatar { left: 16px; } .zs-yt__info { left: 12px; right: 12px; } .zs-yt__title { font-size: 18px; line-height: 26px; } } .zs-yt__play { position: absolute; top: 50%; left: 50%; z-index: 2; width: 68px; height: 48px; margin: -24px 0 0 -34px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath fill='%23f03' d='M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55C3.97 2.33 2.27 4.81 1.48 7.74.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z'/%3E%3Cpath fill='%23fff' d='M45 24 27 14v20z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } .zs-yt:focus-visible { outline: 3px solid #fff; outline-offset: -3px; } @media (max-width: 1024px) { .wp-block-post-content > .zs-video.wp-block-group { margin-bottom: -31.25px; } .zs-video { font-size: 10px; line-height: 15px; } .zs-video .zs-video-hero.wp-block-group { padding: 50px; background-position: 0 0; } .zs-video-hero__in > .zs-video__chev.wp-block-image { padding: 30px 0 0; } .zs-video-hero__in > .zs-video__h1 { margin-top: max(150px, calc(var(--zs-header-clear) - 50px)); } /* hero ma tu padding-top 50 */ .zs-video-hero__in > .zs-video__v--hero { width: 445.073px; } .zs-video-grid__cols .zs-video__v--t224 { width: 223.719px; } .zs-video-grid__cols .zs-video__v--t253 { width: 252.719px; } .zs-video-grid__cols .zs-video__v--t263 { width: 262.719px; } .zs-video-grid__cols .zs-video__v--t264 { width: 263.719px; } .zs-video-grid__cols .zs-video__v--t292 { width: 291.719px; } .zs-video-grid__cols .zs-video__v--t338 { width: 337.719px; } } @media (max-width: 768px) { .zs-video { line-height: 23px; letter-spacing: -1px; } .zs-video-hero__in > .zs-video__h1, .zs-video-hero__in > .zs-video__lead { line-height: 23px; letter-spacing: -1px; } } @media (max-width: 767px) { .zs-video .zs-video-hero.wp-block-group { padding: 0 0 30px; background-position: center center; background-repeat: no-repeat; } .zs-video-hero__in > .zs-video__h1 { margin-top: max(100px, var(--zs-header-clear)); font-size: 21px; } .zs-video-hero__in > .zs-video__yt.wp-block-image { padding-bottom: 30px; } .zs-video__yt.wp-block-image img { width: 61px !important; height: 61px !important; } .zs-video-hero__in > .zs-video__lead { width: 300px; margin: 20px 0 15px; font-size: 15px; } .zs-video-hero__in > .zs-video__v--hero { width: 300px; } .zs-video-hero__in > .zs-video__chev.wp-block-image { margin-top: 20px; } .zs-video .zs-video-grid.wp-block-group { margin: 10px 0; padding: 0 20px; } .zs-video .zs-video-grid--1.wp-block-group { padding-top: 20px; } .zs-video .zs-video-grid--3.wp-block-group { margin: 3px 0; padding-bottom: 20px; } .zs-video .zs-video-grid__cols.wp-block-columns { flex-direction: column; } .zs-video .zs-video-grid__cols > .wp-block-column { flex: 0 0 auto; } .zs-video-grid__cols .zs-video__v.wp-block-embed { width: 329px; } } /* === kontakt === */ /* Kontakt (ID 921) — pomiary live (Playwright, 2026-09-26, 15 szerokości + 1100/1025; raport .superpowers/sdd/2026-09-25-zuzannasobczak-lite/task-10-report.md). Na live JEDNA sekcja stretched b148b42 (kontener max 1200, kolumna z paddingiem 10, widget-wrap = flex-wrap, justify center): „KONTAKT” → H1 · obraz square_6 (37%, ≤767 70%, cień −10 −10 0 1 turkus) · lead · 4 ikony (32 px, odstęp 60, ≤767 40) · „Napisz:” · formularz CF7 (aux_contact_form: margin 0 100 70; ≤1024 widżet 600 px; ≤767 300 px bez marginesów). Tło: #FFF + sign_gray_2.svg (= cs-mark.svg) 190 −472 / 83% (≤1024 0 0; ≤767 −107 108 / 654 px) i nakładka #FFF .44. Typografia jak body Phlox: >1024 12 px/1.5; ≤1024 10 px; ≤768 line-height 23 px + letter-spacing −1. Widżety pełnej szerokości mają margin-bottom 20 (Elementor), a

w nich 1em; widżety width-initial (obraz, ikony) — bez 20. Ikony: widżet wyższy od glifu o linię tekstu (37 / ≤1024 36 / ≤768 40 px). Pola formularza: reguły Phlox base.css/main.css (.wpcf7 …) w em, 1:1; przejścia .3s ease-out z post-921.css. Nagłówek fixed: treść od 52,5px (≤1024: 43,75). Stopka zachodzi o 22,5 (≤1024: 31,25). */ body.page-id-921 { padding-top: var(--zs-under); } .wp-block-post-content > .zs-kontakt.wp-block-group { position: relative; z-index: 1; margin: 0 0 -22.5px; padding: 0 0 100px; background: linear-gradient(rgba(255, 255, 255, .44), rgba(255, 255, 255, .44)), url(assets/img/cs-mark.svg) 190px -472px / 83% auto no-repeat, #fff; font-family: var(--wp--preset--font-family--zetta); font-size: 12px; font-weight: 400; line-height: 1.5; color: #444; text-rendering: optimizeLegibility; } .zs-kontakt .zs-kontakt__in.wp-block-group { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; box-sizing: border-box; max-width: 1200px; margin: 0 auto; padding: 10px; } .zs-kontakt .zs-kontakt__in > * { box-sizing: border-box; flex: 0 0 auto; max-width: none; margin: 0; } .zs-kontakt .zs-kontakt__in > .zs-kontakt__h1 { width: 100%; margin: 100px 0 51px; margin-top: max(100px, var(--zs-header-clear)); padding: 0; font-family: var(--wp--preset--font-family--zetta); font-size: 31px; font-weight: 700; line-height: 1.5; letter-spacing: normal; text-transform: none; text-align: center; color: #4E4E4E; } .zs-kontakt .zs-kontakt__in > .zs-kontakt__img.wp-block-image { width: 100%; padding: 0 0 40px; text-align: center; } .zs-kontakt__img.wp-block-image img { display: block; width: 37%; height: auto; margin: 0 auto; box-shadow: -10px -10px 0 1px rgba(0, 143, 134, .99); } .zs-kontakt .zs-kontakt__in > .zs-kontakt__lead { width: 100%; margin: 0 0 42px; padding: 20px 0 0; font-size: 22px; line-height: 23px; letter-spacing: -1px; text-align: center; color: #4E4E4E; } .zs-kontakt .zs-kontakt__in > .zs-kontakt__ico.wp-block-image { width: 32px; height: 37px; } .zs-kontakt .zs-kontakt__in > .zs-kontakt__ico + .zs-kontakt__ico { margin-left: 60px; } .zs-kontakt__ico.wp-block-image a, .zs-kontakt__ico.wp-block-image img { display: block; width: 32px; height: 32px; } .zs-kontakt .zs-kontakt__in > .zs-kontakt__napisz { width: 100%; margin: 100px 0 36px; padding: 0 0 30px; font-size: 16px; font-weight: 900; line-height: 23px; letter-spacing: -1px; text-align: center; color: rgba(0, 143, 134, .988); } .zs-kontakt .zs-kontakt__in > .zs-kontakt__form.wp-block-group { width: 100%; padding: 0 100px 70px; } /* CF7 — reguły Phlox (base.css + main.css) */ .zs-kontakt .wpcf7 p { margin: 0 0 1em; } .zs-kontakt .wpcf7 label { display: block; margin-bottom: 1em; font-size: 1.1em; color: #3D3D3D; } .zs-kontakt .wpcf7 label + br { display: none; } .zs-kontakt .wpcf7 input[type="text"], .zs-kontakt .wpcf7 input[type="email"], .zs-kontakt .wpcf7 textarea { display: block; box-sizing: border-box; width: 100%; height: 46px; max-width: none; margin: 0 0 1.875em; padding: .9375em; font: inherit; font-size: 100%; line-height: normal; letter-spacing: normal; color: #444; border: 1px solid #BBB; border-radius: 0; background: transparent; box-shadow: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: all .3s ease-out; } .zs-kontakt .wpcf7 textarea { min-height: 240px; height: auto; max-width: 100%; overflow: auto; line-height: inherit; } .zs-kontakt .wpcf7 input[type="text"]:focus, .zs-kontakt .wpcf7 input[type="email"]:focus, .zs-kontakt .wpcf7 textarea:focus { border-color: #3D3D3D; outline: none; } .zs-kontakt .wpcf7 ::placeholder { color: #C5C5C5; font-style: italic; } .zs-kontakt .wpcf7 input[type="submit"] { -webkit-appearance: button; appearance: button; cursor: pointer; display: inline-block; position: relative; z-index: 1; overflow: hidden; box-sizing: border-box; margin: 0 5px 1em 0; padding: 1.25em 3.125em; vertical-align: top; font: inherit; font-size: .8125em; font-weight: 700; line-height: 100%; letter-spacing: normal; text-transform: uppercase; color: #FFF; background-color: #3D3D3D; border: none; border-radius: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: all .3s ease-out; } .zs-kontakt .wpcf7 input[type="submit"]:hover { background-color: #505050; } .zs-kontakt .wpcf7 input[type="submit"]:focus { outline: none; } @media (max-width: 1024px) { .wp-block-post-content > .zs-kontakt.wp-block-group { margin-bottom: -31.25px; background-position: 0 0, 0 0; font-size: 10px; } .zs-kontakt .zs-kontakt__in > .zs-kontakt__ico.wp-block-image { height: 36px; } .zs-kontakt .zs-kontakt__in > .zs-kontakt__form.wp-block-group { width: 600px; max-width: 100%; } } @media (max-width: 768px) { .wp-block-post-content > .zs-kontakt.wp-block-group { line-height: 23px; letter-spacing: -1px; } .zs-kontakt .zs-kontakt__in > .zs-kontakt__h1 { line-height: 23px; letter-spacing: -1px; } .zs-kontakt .zs-kontakt__in > .zs-kontakt__ico.wp-block-image { height: 40px; } /* live: letter-spacing −1 zwęża ::before glifu o 1px → translateX(−50%) przesuwa go o 0,5px, a Chrome rysuje glif ikony-fontu od pełnego piksela (+1px) */ .zs-kontakt__ico.wp-block-image img { transform: translateX(1px); } } @media (max-width: 767px) { .wp-block-post-content > .zs-kontakt.wp-block-group { background-position: 0 0, -107px 108px; background-size: auto, 654px auto; } .zs-kontakt .zs-kontakt__in > .zs-kontakt__h1 { font-size: 21px; margin-bottom: 41px; } .zs-kontakt__img.wp-block-image img { width: 70%; } .zs-kontakt .zs-kontakt__in > .zs-kontakt__lead { margin-bottom: 40px; font-size: 16px; } .zs-kontakt .zs-kontakt__in > .zs-kontakt__ico + .zs-kontakt__ico { margin-left: 40px; } .zs-kontakt .zs-kontakt__in > .zs-kontakt__napisz { margin-bottom: 32px; font-size: 12px; } .zs-kontakt .zs-kontakt__in > .zs-kontakt__form.wp-block-group { width: 300px; padding: 0; } } /* === artykuly === */ /* Artykuły (ID 888) — pomiary live (Playwright, 2026-09-26; raport task-11-report.md). Na live jedna sekcja stretched b1bed37: #ACACAC + HERO_footer_3.jpg cover, pozycja −513px 0 (≤1024: 0 0; ≤767: −750px 0), nakładka 260deg #003531FC 23% → przezroczysta 86%; kolumna max 1200 z paddingiem 10; padding-bottom 200 (≤767: 50). „ARTYKUŁY” → H1 (31/46,5, 700, biały; margin 150/70 + 20 widżetu, ≤1024: 200 +

1em + 20, ≤767: 100 + 1em, szer. 300). Lista = aux_recent_posts_masonry (Isotope masonry, 5/2/1 kolumn) → core/query z kartami .zs-cards (niżej, niezależne od strony — Task 12). Nagłówek fixed: treść od 52,5 (≤1024: 43,75); stopka zachodzi 22,5 (≤1024: 31,25), sekcja NAD nią. */ body.page-id-888 { padding-top: var(--zs-under); } .zs-artykuly.wp-block-cover { display: block; position: relative; z-index: 1; min-height: 0; margin: 0 0 -22.5px; padding: 0 0 200px; overflow: visible; background: #ACACAC; color: #fff; font-family: var(--wp--preset--font-family--zetta); font-size: 12px; font-weight: 400; line-height: 18px; text-rendering: optimizeLegibility; } .zs-artykuly.wp-block-cover .wp-block-cover__image-background { object-position: -513px 0; } .zs-artykuly.wp-block-cover > .wp-block-cover__background.has-background-dim { background-color: transparent; opacity: 1; background-image: linear-gradient(260deg, rgba(0, 53, 49, .988) 23%, rgba(0, 0, 0, 0) 86%); } .zs-artykuly > .wp-block-cover__inner-container { box-sizing: border-box; max-width: 1200px; margin: 0 auto; padding: 10px; } .zs-artykuly .zs-artykuly__h1 { margin: 150px 0 90px; margin-top: max(150px, var(--zs-header-clear)); padding: 0; font-family: var(--wp--preset--font-family--zetta); font-size: 31px; font-weight: 700; line-height: 46.5px; letter-spacing: normal; text-transform: none; text-align: center; color: #fff; } .zs-artykuly .wp-block-query.zs-cards { margin: 0; } @media (max-width: 1024px) { .zs-artykuly.wp-block-cover { margin-bottom: -31.25px; font-size: 10px; line-height: 15px; } .zs-artykuly.wp-block-cover .wp-block-cover__image-background { object-position: 0 0; } .zs-artykuly .zs-artykuly__h1 { margin: 200px 0 51px; margin-top: max(200px, var(--zs-header-clear)); } } @media (max-width: 768px) { .zs-artykuly .zs-artykuly__h1 { line-height: 23px; letter-spacing: -1px; } } @media (max-width: 767px) { .zs-artykuly.wp-block-cover { padding-bottom: 50px; } .zs-artykuly.wp-block-cover .wp-block-cover__image-background { object-position: -750px 0; } .zs-artykuly .zs-artykuly__h1 { width: 300px; margin: 100px auto 21px; margin-top: max(100px, var(--zs-header-clear)); font-size: 21px; } } /* Karty wpisów .zs-cards (core/query > post-template .zs-cards__list > li > .zs-card) — 1:1 z Phlox aux_recent_posts_masonry z /artykuly/, samowystarczalne (działają w dowolnym kontenerze; Task 12: powiązane wpisy). Kolumny jak aux-de-col5 / aux-tb-col2 (768–1024) / aux-mb-col1 (≤767): li z paddingiem 15, karta z paddingiem 0 10 (≤767: 10). Wiersze od drugiego: margin-top 30 (base.css nth-child). Układ masonry (najkrótsza kolumna, remis → lewa, jak Isotope) liczy assets/js/cards.js; bez JS zostaje flex-wrap w rzędach. Karta: obraz w naturalnych proporcjach z cieniem −9 −9 27 (.36, hover .79 bez przejścia), tytuł 15/22,5 900 biały (h4 Phlox: optimizeSpeed), pod nim 12; info 10px rgba(197,197,197,.99): data Y-m-d • kategoria (kropka 3×3 #BBB), margin-bottom 16. Bez zajawki i „czytaj dalej” (author_or_readmore = none, zajawki live nie wyświetla). */ .zs-cards { font-family: var(--wp--preset--font-family--zetta); } .zs-cards .zs-cards__list.wp-block-post-template { display: flex; flex-wrap: wrap; align-items: flex-start; position: relative; margin: 0; padding: 0; list-style: none; max-width: none; } .zs-cards .zs-cards__list > li { box-sizing: border-box; width: 20%; margin: 0; padding: 0 15px; } .zs-cards .zs-cards__list > li:nth-child(n+6) { margin-top: 30px; } .zs-cards .zs-cards__list.zs-cards--m { display: block; } .zs-cards .zs-cards__list.zs-cards--m > li { position: absolute; } .zs-cards .zs-card.wp-block-group { box-sizing: border-box; margin: 0; padding: 0 10px; } /* jak .hentry::after — margin-bottom info zostaje w karcie */ .zs-cards .zs-card.wp-block-group::after { content: ""; display: table; clear: both; } .zs-card .zs-card__img.wp-block-post-featured-image { position: relative; overflow: hidden; margin: 0 0 17.25px; padding: 0; box-shadow: -9px -9px 27px 0 rgba(0, 0, 0, .36); } .zs-card:hover .zs-card__img.wp-block-post-featured-image { box-shadow: -9px -9px 27px 0 rgba(0, 0, 0, .79); } .zs-card .zs-card__img a { display: block; } .zs-card .zs-card__img img { display: block; width: 100%; max-width: 100%; height: auto; margin: 0 auto; } .zs-card .zs-card__title.wp-block-post-title { margin: 0 0 12px; padding: 0; font-family: var(--wp--preset--font-family--zetta); font-size: 15px; font-weight: 900; line-height: 22.5px; letter-spacing: 0; text-transform: none; text-align: left; color: var(--zs-card-fg, #fff); text-rendering: optimizeSpeed; word-break: break-word; overflow-wrap: inherit; } .zs-card .zs-card__title a { color: inherit; text-decoration: none; } .zs-card .zs-card__info.wp-block-group { margin: 0 0 16px; padding: 0; font-family: var(--wp--preset--font-family--zetta); font-size: 10px; font-weight: 400; line-height: 15px; letter-spacing: normal; text-align: left; color: var(--zs-card-meta, rgba(197, 197, 197, .99)); } .zs-card .zs-card__info > * { display: inline; margin: 0; } .zs-card .zs-card__info a { color: var(--zs-card-meta, rgba(197, 197, 197, .99)); text-decoration: none; } .zs-card .zs-card__tax::before, .zs-card .zs-card__tax .wp-block-post-terms__separator::before { content: ""; position: relative; top: 0; display: inline-block; width: 3px; height: 3px; margin: 0; border-radius: 50%; vertical-align: middle; background-color: var(--zs-card-dot, #BBB); } .zs-card .zs-card__tax a { display: inline-block; } /* kilka kategorii: „a • b” (separator = spacja, kropka przed nią) */ .zs-card .zs-card__tax .wp-block-post-terms__separator::before { margin-left: .3em; } /* paginacja (live pokazuje wszystkie ≤20 wpisów; spec: >12 → strony) */ .zs-cards .zs-cards__pages.wp-block-query-pagination { justify-content: center; gap: 20px; margin: 30px 0 0; font-size: 12px; font-weight: 700; line-height: 18px; color: #fff; } .zs-cards .zs-cards__pages a { color: inherit; text-decoration: none; } .zs-cards .zs-cards__pages a:hover, .zs-cards .zs-cards__pages .current { color: #00FFCD; } .zs-cards .zs-cards__pages .page-numbers { padding: 0 4px; } @media (max-width: 1024px) { .zs-cards .zs-cards__list > li { width: 50%; } .zs-cards .zs-cards__list > li:nth-child(n+3) { margin-top: 30px; } .zs-card .zs-card__img.wp-block-post-featured-image { margin-bottom: 14.375px; } } @media (max-width: 768px) { .zs-card .zs-card__info.wp-block-group { line-height: 23px; letter-spacing: -1px; } } @media (max-width: 767px) { .zs-cards .zs-cards__list > li { width: 100%; } .zs-cards .zs-cards__list > li:nth-child(n+2) { margin-top: 30px; } .zs-cards .zs-card.wp-block-group { padding: 10px; } } /* === szkolenia === */ /* Szkolenia (ID 1532) — pomiary live (Playwright, 2026-09-26; raport task-11-report.md). Cztery sekcje stretched (kontener max 1200, kolumna z paddingiem 10), w każdej sekcja wewnętrzna 50/50 (kolumny z paddingiem 10): obraz 70% (≤767: 80%) wyśrodkowany w pionie, cień −10 −10 0 1 rgba(0,143,134,.99); obok nazwa szkolenia (20/30, 700; ≤767: 18, szer. 300) i opis (12/18; ≤767: 10, szer. 300). _mask_image (square_3.jpg) w Elementorze nie generuje CSS — pominięte. a: art_12 cover −513 0 (≤1024: 0 0; ≤767: −750 0), nakładka 260deg #003531FC 23% → #000000B0 86%, padding 0/100 (≤767: 0/50), H1 „SZKOLENIA” margin 150/100+20 (≤1024: 200/1em+20; ≤767: 100/50). b, d: białe, padding 100/100 (≤767: 0/50, kolumna margin-top 50), tekst #4E4E4E. c: post_8 jak a, nakładka → #00000091, padding 100/0 (≤767: 0/50), wiersz margin-bottom 100 (≤767: kolumna bez paddingu, margin 50/−70). Akapity z   mają na live wysokość linii — zachowane (html2blocks --keep-nbsp). Listy jak Phlox .entry-content: ul disc outside, padding 1.1em; ol decimal inside; li line-height 190%. Nagłówek fixed: treść od 52,5 (≤1024: 43,75); stopka zachodzi 22,5 (≤1024: 31,25). */ body.page-id-1532 { padding-top: var(--zs-under); } .zs-szk.wp-block-cover, .zs-szk.wp-block-group { display: block; position: relative; min-height: 0; margin: 0; overflow: visible; font-family: var(--wp--preset--font-family--zetta); font-size: 12px; font-weight: 400; line-height: 18px; text-rendering: optimizeLegibility; } .zs-szk--a.wp-block-cover { padding: 0 0 100px; background: #ACACAC; color: #fff; } .zs-szk--c.wp-block-cover { padding: 100px 0 0; background: #ACACAC; color: #fff; } .zs-szk--b.wp-block-group, .zs-szk--d.wp-block-group { padding: 100px 0; background: #fff; color: #4E4E4E; } .zs-szk--d.wp-block-group { z-index: 1; margin-bottom: -22.5px; } /* tło jako isRepeated (div z background-image): Elementor powtarza kafel (repeat) — przy −513px drugi kafel widać po prawej. Blok zapisuje inline background-position 50% 50% → !important. */ .zs-szk.wp-block-cover .wp-block-cover__image-background.is-repeated { background-size: cover; background-repeat: repeat; background-position: -513px 0 !important; } .zs-szk.wp-block-cover > .wp-block-cover__background.has-background-dim { background-color: transparent; opacity: 1; } .zs-szk--a > .wp-block-cover__background.has-background-dim { background-image: linear-gradient(260deg, rgba(0, 53, 49, .988) 23%, rgba(0, 0, 0, .69) 86%); } .zs-szk--c > .wp-block-cover__background.has-background-dim { background-image: linear-gradient(260deg, rgba(0, 53, 49, .988) 23%, rgba(0, 0, 0, .569) 86%); } .zs-szk > .wp-block-cover__inner-container, .zs-szk .zs-szk__in.wp-block-group { box-sizing: border-box; max-width: 1200px; margin: 0 auto; padding: 10px; color: inherit; } .zs-szk .zs-szk__h1 { margin: 150px 0 120px; margin-top: max(150px, var(--zs-header-clear)); padding: 0; font-family: var(--wp--preset--font-family--zetta); font-size: 31px; font-weight: 700; line-height: 46.5px; letter-spacing: normal; text-transform: none; text-align: center; color: #fff; } .zs-szk .zs-szk__row.wp-block-columns { gap: 0; margin: 0; padding: 0; } .zs-szk--c .zs-szk__row.wp-block-columns { margin-bottom: 100px; } .zs-szk .zs-szk__row > .zs-szk__col.wp-block-column { box-sizing: border-box; flex: 0 0 50%; min-width: 0; margin: 0; padding: 10px; } .zs-szk .zs-szk__col--img.wp-block-column { display: flex; align-items: center; justify-content: center; } .zs-szk .zs-szk__img.wp-block-image { width: 100%; margin: 0; text-align: center; } .zs-szk .zs-szk__img.wp-block-image img { display: inline-block; width: 70%; height: auto; vertical-align: middle; box-shadow: -10px -10px 0 1px rgba(0, 143, 134, .99); } .zs-szk .zs-szk__col--txt > * { margin: 0 0 1em; } .zs-szk .zs-szk__col.zs-szk__col--txt > :last-child { margin-bottom: 1em; } /* live: ostatni

zachowuje 1em */ .zs-szk .zs-szk__col--txt > .zs-szk__title { margin: 0 0 50px; padding: 0; font-family: var(--wp--preset--font-family--zetta); font-size: 20px; font-weight: 700; line-height: 30px; letter-spacing: normal; text-transform: none; text-align: left; color: inherit; } .zs-szk .zs-szk__col--txt p { font-size: inherit; line-height: inherit; } .zs-szk strong { font-weight: 600; } .zs-szk .zs-szk__col--txt > ul { padding: 0 0 0 1.1em; list-style: disc outside; } .zs-szk .zs-szk__col--txt > ol { padding: 0; list-style: decimal inside; } .zs-szk .zs-szk__col--txt li { margin: 0; line-height: 190%; } @media (max-width: 1024px) { .zs-szk--d.wp-block-group { margin-bottom: -31.25px; } .zs-szk.wp-block-cover .wp-block-cover__image-background.is-repeated { background-position: 0 0 !important; } .zs-szk .zs-szk__h1 { margin: 200px 0 51px; margin-top: max(200px, var(--zs-header-clear)); } } @media (max-width: 768px) { .zs-szk.wp-block-cover, .zs-szk.wp-block-group { line-height: 23px; letter-spacing: -1px; } .zs-szk .zs-szk__h1, .zs-szk .zs-szk__col--txt > .zs-szk__title { line-height: 23px; letter-spacing: -1px; } } @media (max-width: 767px) { /* live: padding 0/50 + kolumna margin-top 50 — tu jako padding sekcji (margines by się zapadł) */ .zs-szk--a.wp-block-cover { padding: 0 0 50px; } .zs-szk--c.wp-block-cover { padding: 50px 0; } .zs-szk--b.wp-block-group, .zs-szk--d.wp-block-group { padding: 50px 0; } .zs-szk.wp-block-cover .wp-block-cover__image-background.is-repeated { background-position: -750px 0 !important; background-repeat: no-repeat; } .zs-szk .zs-szk__h1 { margin: 100px 0 50px; margin-top: max(100px, var(--zs-header-clear)); font-size: 21px; } .zs-szk--c > .wp-block-cover__inner-container { margin: 0 auto -70px; padding: 0; } .zs-szk .zs-szk__row.wp-block-columns { flex-direction: column; } .zs-szk .zs-szk__row > .zs-szk__col.wp-block-column { flex: 0 0 auto; width: 100%; } .zs-szk .zs-szk__img.wp-block-image img { width: 80%; } .zs-szk .zs-szk__col--txt { font-size: 10px; } .zs-szk .zs-szk__col--txt > * { width: 300px; margin-left: auto; margin-right: auto; } .zs-szk .zs-szk__col--txt > .zs-szk__title { margin: 0 auto 20px; font-size: 18px; } .zs-szk--a .zs-szk__col--txt > .zs-szk__title, .zs-szk--c .zs-szk__col--txt > .zs-szk__title { text-align: center; } } /* === single === */ /* Widok wpisu (templates/single.html). Pas tytułu 1:1 z live (wpis 429, Elementor, pomiar Playwright 2026-09-26): sekcja pod nagłówkiem, tło = obraz cover 50% 50%, nakładka linear-gradient(260deg, #000 0%, rgba(0,143,134,.99) 100%) z opacity .74; kolumna max 1200 z paddingiem 10 i marginesem 100/100 (≤767: 40/40); tytuł zuza→Zetta 22/33 900 biały, wyśrodkowany (1024: 20/30; ≤768: 20/23 ls −1; ≤767: 16/23, szer. 300). Wysokość z paddingu, nie min-height — długi tytuł rozpycha pas. Treść wpisu: NOWA typografia (spec) — Lexend 300 18/1.7 (≤767: 17); kolumna 660 (≤720): przy 720 Lexend 300 daje średnio ~79 znaków w wierszu, 660 → ~72 (spec: ~68). Meta i ramka autorki w tej samej kolumnie. */ .wp-block-cover.zs-hero--post { display: block; min-height: 0; margin: 0; padding: 100px 0; overflow: hidden; background-color: var(--wp--preset--color--teal-dark); color: #fff; } .wp-block-cover.zs-hero--post .wp-block-cover__image-background { object-position: 50% 50%; } .wp-block-cover.zs-hero--post > .wp-block-cover__background.has-background-dim.has-background-dim-70 { background-color: transparent; background-image: linear-gradient(260deg, #000 0%, rgba(0, 143, 134, .99) 100%); opacity: .74; } .wp-block-cover.zs-hero--nothumb { background-image: linear-gradient(135deg, var(--wp--preset--color--teal), var(--wp--preset--color--teal-dark)); } .zs-hero--post > .wp-block-cover__inner-container { box-sizing: border-box; width: 100%; max-width: 1200px; margin: 0 auto; padding: 10px; } .zs-hero--post .zs-post-title.wp-block-post-title { margin: 0; padding: 0; font-family: var(--wp--preset--font-family--zetta); font-size: 22px; font-weight: 900; line-height: 33px; letter-spacing: normal; text-transform: none; text-align: center; color: #fff; overflow-wrap: break-word; hyphens: manual; } .zs-post { box-sizing: border-box; padding: 0 24px; } .zs-post__meta.wp-block-group { box-sizing: border-box; max-width: 660px; margin: 2.5rem auto 0; gap: .25rem 1.25rem; font-family: var(--wp--preset--font-family--lexend); font-size: .875rem; font-weight: 400; line-height: 1.5; color: #6B6B6B; } .zs-post__meta p, .zs-post__meta .wp-block-post-date { margin: 0; } .zs-post__meta p:empty { display: none; } .zs-prose.wp-block-post-content { margin: 2rem 0 4rem; font-family: var(--wp--preset--font-family--lexend); font-weight: 300; font-size: 18px; line-height: 1.7; color: var(--wp--preset--color--ink); overflow-wrap: break-word; text-rendering: optimizeLegibility; } .zs-prose > * { margin-block: 0 1.2em; } .zs-prose > :last-child { margin-bottom: 0; } .zs-prose.wp-block-post-content > .alignwide { max-width: 960px; } .zs-prose.wp-block-post-content > .alignleft { float: left; margin: .3em 1.5em 1em max(0px, calc(50% - 330px)); max-width: min(50%, 330px); } .zs-prose.wp-block-post-content > .alignright { float: right; margin: .3em max(0px, calc(50% - 330px)) 1em 1.5em; max-width: min(50%, 330px); } .zs-prose h2, .zs-prose h3, .zs-prose h4 { font-family: var(--wp--preset--font-family--lexend); font-weight: 600; line-height: 1.3; letter-spacing: normal; text-transform: none; color: var(--wp--preset--color--teal-dark); margin-block: 2em .6em; } .zs-prose h2 { font-size: 1.55rem; } .zs-prose h3 { font-size: 1.25rem; } .zs-prose h4 { font-size: 1.05rem; } .zs-prose strong, .zs-prose b { font-weight: 600; } .zs-prose a { color: var(--wp--preset--color--teal-dark); text-decoration: underline; text-decoration-color: var(--wp--preset--color--teal); text-decoration-thickness: 1px; text-underline-offset: .2em; } .zs-prose a:hover { text-decoration-thickness: 2px; } .zs-prose a:focus-visible, .zs-author a:focus-visible, .zs-related a:focus-visible { outline: 2px solid var(--wp--preset--color--teal); outline-offset: 2px; border-radius: 2px; } .zs-prose ul, .zs-prose ol { padding-left: 1.3em; } .zs-prose li { margin-block: .35em; } .zs-prose li > ul, .zs-prose li > ol { margin-block: .35em 0; } .zs-prose blockquote { margin-inline: 0; padding-left: 1.2em; border-left: 3px solid var(--wp--preset--color--teal); font-style: normal; color: #555; } .zs-prose blockquote > :last-child { margin-bottom: 0; } .zs-prose blockquote cite { display: block; margin-top: .5em; font-size: .85em; font-style: normal; color: #6B6B6B; } .zs-prose figure { margin-block: 2em; } .zs-prose img { max-width: 100%; height: auto; } .zs-prose figcaption, .zs-prose .wp-element-caption { margin-top: .6em; font-size: .85rem; line-height: 1.5; color: #6B6B6B; text-align: center; } .zs-prose .wp-block-table { overflow-x: auto; } .zs-prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: .9em; line-height: 1.5; } .zs-prose .wp-block-table table { display: table; width: 100%; } /* has-fixed-layout wymusza równe kolumny i tekst wychodzi z komórek — w treści wpisu szerokości z zawartości, a szersza od kolumny tabela przewija się w ramce figure. */ .zs-prose .wp-block-table table.has-fixed-layout { table-layout: auto; } .zs-prose td, .zs-prose th { border: 1px solid #E3E3E3; padding: .45em .6em; text-align: left; vertical-align: top; } .zs-prose th, .zs-prose thead td { font-weight: 600; background: var(--wp--preset--color--light); } .zs-prose pre { white-space: pre-wrap; overflow-wrap: anywhere; } .zs-prose code { overflow-wrap: anywhere; font-size: .9em; } .zs-prose .wp-block-embed { margin-block: 2em; } .zs-prose::after { content: ""; display: table; clear: both; } .zs-author.wp-block-group { box-sizing: border-box; gap: 1.25rem; max-width: 660px; margin: 0 auto 4rem; padding: 1.5rem; background: var(--wp--preset--color--light); font-family: var(--wp--preset--font-family--lexend); font-size: .95rem; font-weight: 300; line-height: 1.6; color: var(--wp--preset--color--ink); } .zs-author .zs-author__img { flex: 0 0 96px; margin: 0; } .zs-author .zs-author__img img { display: block; border-radius: 50%; } .zs-author__body p { margin: 0 0 .5em; } .zs-author__body p:last-child { margin: 0; } .zs-author .zs-author__name { font-family: var(--wp--preset--font-family--zetta); font-size: 15px; font-weight: 900; line-height: 1.4; color: var(--wp--preset--color--teal-dark); } .zs-author__more a { color: var(--wp--preset--color--teal-dark); font-weight: 400; text-decoration: underline; text-decoration-color: var(--wp--preset--color--teal); text-underline-offset: .2em; } /* Powiązane: karty .zs-cards (T11) na białym tle — kolory przez zmienne, 3 kolumny (≤767: 1). */ .wp-block-query.zs-related { --zs-card-fg: var(--wp--preset--color--teal-dark); --zs-card-meta: #6B6B6B; --zs-card-dot: #ACACAC; box-sizing: border-box; max-width: 1200px; margin: 0 auto 5rem; padding-top: 3rem; border-top: 1px solid #EAEAEA; } .zs-related .zs-related__title { margin: 0 0 2.5rem; font-family: var(--wp--preset--font-family--zetta); font-size: 20px; font-weight: 700; line-height: 1.5; letter-spacing: normal; text-align: center; color: var(--wp--preset--color--teal-dark); } .zs-related.zs-cards .zs-cards__list > li:nth-child(n) { width: 33.3333%; margin-top: 0; } .zs-related .zs-card .zs-card__title a:hover { color: var(--wp--preset--color--teal); } @media (max-width: 1024px) { .zs-hero--post .zs-post-title.wp-block-post-title { font-size: 20px; line-height: 30px; } } @media (max-width: 768px) { .zs-hero--post .zs-post-title.wp-block-post-title { line-height: 23px; letter-spacing: -1px; } .zs-related .zs-card .zs-card__info.wp-block-group { letter-spacing: normal; } } @media (max-width: 767px) { .wp-block-cover.zs-hero--post { padding: 40px 0; } .zs-hero--post .zs-post-title.wp-block-post-title { max-width: 300px; margin: 0 auto; font-size: 16px; } .zs-post { padding: 0 20px; } .zs-prose.wp-block-post-content { font-size: 17px; } /* wąsko: nagłówki tabeli w jednym wierszu, komórki nie węższe niż 7em — szersza tabela przewija się w figure */ .zs-prose th { white-space: nowrap; } .zs-prose td { min-width: 7em; } .zs-prose.wp-block-post-content > .alignleft, .zs-prose.wp-block-post-content > .alignright { float: none; max-width: 100%; margin-inline: 0; } .zs-author.wp-block-group { flex-wrap: wrap; } .zs-related.zs-cards .zs-cards__list > li:nth-child(n) { width: 100%; } .zs-related.zs-cards .zs-cards__list > li:nth-child(n+2) { margin-top: 30px; } } /* Tła CSS na telefonie: mniejszy wariant z --zs-bg-m (functions.php) — gradient i tak zakrywa detale. */ @media (max-width: 767px) { .zs-szk .wp-block-cover__image-background.is-repeated[style*="--zs-bg-m"], .zs-video .zs-video-hero.wp-block-group[style*="--zs-bg-m"] { background-image: var(--zs-bg-m) !important; } }