/* Motyw adsdata.pl: to, czego nie da się zapisać w theme.json. Wartości z glowna_warianty/zrodlo/wspolne/baza.css (paleta P20, fonty T19, logo L03), żeby podstrony wyglądały tak samo jak wybrany wariant strony głównej. */ :root { --linia: rgba(250, 255, 243, .12); --linia-slaba: rgba(250, 255, 243, .06); --promien: 18px; --c-tlo: var(--wp--preset--color--tlo); --c-karta: var(--wp--preset--color--karta); --c-kosc: var(--wp--preset--color--kosc); --c-tekst: var(--wp--preset--color--tekst); --c-szary: var(--wp--preset--color--szary); --c-limonka: var(--wp--preset--color--limonka); --c-zielen: var(--wp--preset--color--zielen); --c-na-limonce: #0A0D04; /* tekst na limonce: stały w obu wersjach, bo limonka się nie zmienia */ --f-naglowki: var(--wp--preset--font-family--naglowki); --fokus: var(--c-limonka); /* obrys fokusu: zmienia go wersja jasna i powierzchnie w kolorze obrysu (niżej) */ } body { -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; } /* stopka przy dolnej krawędzi okna także na krótkich stronach (404, podziękowanie) */ .wp-site-blocks { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } .wp-site-blocks > main { flex: 1 0 auto; } body.admin-bar .wp-site-blocks { min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 32px)); } :where(a) { text-decoration-color: var(--c-limonka); text-underline-offset: 5px; text-decoration-thickness: 1px; } :focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; border-radius: 4px; } html:root :focus-visible { outline-color: var(--fokus); } /* mocniejsze od :focus-visible ze stylu strony głównej */ /* obrys znika na powierzchni w swoim kolorze: ciemny na limonce i kremowej karcie formularza, limonka na ciemnym panelu */ .glowna .ciemna { --fokus: var(--c-limonka); } .kontakt-formularz, .kontakt-karta { --fokus: #0A0D04; } ::selection { background: var(--c-limonka); color: var(--c-na-limonce); } /* ── nagłówek ───────────────────────────────────────────────────────────── */ .naglowek-pas { position: relative; z-index: 10; border-bottom: 1px solid var(--linia-slaba); } .naglowek { gap: 24px; padding-block: 20px; } .naglowek-prawa { gap: 28px; } @media (max-width: 380px) { .naglowek, .naglowek-prawa { gap: 12px; } .naglowek .logo span { font-size: 13px; } } /* poniżej 360 px (najmniejsze telefony, większy rozmiar wyświetlania w Androidzie, powiększenie 400%) nazwa w dwóch wierszach */ @media (max-width: 359px) { .naglowek .logo span { white-space: normal; font-size: 12px; line-height: 1.15; } } .logo { display: inline-flex; align-items: center; gap: 12px; color: var(--c-kosc); text-decoration: none; } .logo .znak { width: 56px; height: auto; flex: none; } .logo span { font: 400 15px/1 var(--f-naglowki); white-space: nowrap; } .logo:hover { color: var(--c-kosc); } .menu-glowne .wp-block-navigation-item__content:hover { color: var(--c-kosc); } .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { color: var(--c-kosc); } .wp-block-navigation__responsive-container-open { display: grid; place-items: center; width: 44px; height: 44px; margin: -10px; } /* menu na telefonie: pełny ekran w kolorach motywu (kolory nadaje blok nawigacji), znak i krzyżyk tam, gdzie znak i ikona menu w nagłówku, duże linki od lewej, na dole przycisk przeglądu i e-mail; te dwa ostatnie linki menu widać tylko w nakładce. Selektory z nav.menu-glowne, bo reguły nakładki w WordPressie są mocniejsze od zwykłych klas. */ .wp-block-navigation__responsive-container:not(.is-menu-open) .menu-cta, .wp-block-navigation__responsive-container:not(.is-menu-open) .menu-mail { display: none; } nav.menu-glowne .is-menu-open .wp-block-navigation__responsive-dialog { min-height: 100%; padding: 0 0 32px; } nav.menu-glowne .is-menu-open .wp-block-navigation__responsive-dialog::before { content: ""; position: absolute; top: 8px; left: 0; width: 46px; height: 22px; background: currentColor; -webkit-mask: url("../img/znak.svg") no-repeat left center / contain; mask: url("../img/znak.svg") no-repeat left center / contain; } nav.menu-glowne .is-menu-open .wp-block-navigation__responsive-container-close { top: -4px; right: -10px; display: grid; place-items: center; width: 44px; height: 44px; } nav.menu-glowne .is-menu-open .wp-block-navigation__responsive-container-content { align-items: stretch; gap: 0; padding-top: 64px; } nav.menu-glowne .is-menu-open .wp-block-navigation__container { align-items: stretch !important; gap: 0; width: 100%; } nav.menu-glowne .is-menu-open .wp-block-navigation-item { justify-content: flex-start; width: 100%; border-bottom: 1px solid var(--linia); } nav.menu-glowne .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content { box-sizing: border-box; display: block; width: 100%; padding: 16px 0; font: 400 26px/1.15 var(--f-naglowki); text-align: left; } nav.menu-glowne .is-menu-open .menu-cta, nav.menu-glowne .is-menu-open .menu-mail { border-bottom: 0; } nav.menu-glowne .is-menu-open .menu-cta { margin-top: 32px; } nav.menu-glowne .is-menu-open .wp-block-navigation__responsive-container-content .menu-cta .wp-block-navigation-item__content { padding: 16px 24px; border-radius: 999px; background: var(--c-limonka); color: var(--c-na-limonce); font: 600 17px/1.2 var(--wp--preset--font-family--tekst); text-align: center; } nav.menu-glowne .is-menu-open .wp-block-navigation__responsive-container-content .menu-mail .wp-block-navigation-item__content { padding: 12px 0; font: 400 16px/1.4 var(--wp--preset--font-family--tekst); color: var(--c-szary); text-align: center; } /* nagłówek przyklejony u góry na telefonie; kotwice sekcji (#uslugi itd.), skok do pola po błędzie i fokus z klawiatury zatrzymują się pod nim, nie za nim. Odstęp mają tylko elementy treści: przy scroll-padding na całej stronie zamknięcie menu cofało stronę o pół ekranu, bo przeglądarka uznawała przycisk menu w nagłówku za zasłonięty i przewijała do niego. */ @media (max-width: 781px) { .wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 50; } body.admin-bar .wp-site-blocks > header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 46px); } .naglowek-pas { background: var(--c-tlo); } .naglowek { padding-block: 12px; } .wp-site-blocks > main, .wp-site-blocks > :not(header) :is([id], a, button, summary) { scroll-margin-top: 80px; } .wp-site-blocks > :not(header) :is(input, select, textarea) { scroll-margin-top: 112px; } /* z etykietą nad polem */ } /* 600-899 px (telefon poziomo, mały tablet, laptop w powiększeniu): ikona menu jak na telefonie. WordPress pokazuje pełne menu od 600 px, a pięć linków z przyciskiem mieści się w jednym rzędzie dopiero od 900 px; wcześniej łamały się w 2-5 wierszy i przyklejony nagłówek zasłaniał do 65% ekranu. Ikona menu z prawej, żeby krzyżyk pojawiał się tam, gdzie ją dotknięto. */ @media (min-width: 600px) and (max-width: 899px) { .menu-glowne .wp-block-navigation__responsive-container-open:not(.always-shown) { display: grid; } .menu-glowne .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; } .naglowek-prawa { gap: 16px; } } @media (max-width: 899px) { .naglowek-prawa .przelacznik-motywu { order: -2; } .naglowek-prawa .naglowek-cta { order: -1; } } /* przycisk „do góry”: pokazuje go motyw.js po przewinięciu o półtora ekranu, ale tylko przy przewijaniu w górę albo na końcu strony (przy czytaniu w dół nie zasłania plusów FAQ i pól) i nie nad formularzem */ .do-gory { position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px 0 12px; border: 1px solid rgba(250, 255, 243, .45); border-radius: 999px; background: var(--c-karta); color: var(--c-kosc); box-shadow: 0 6px 18px rgba(0, 0, 0, .28); font: 600 14px/1 var(--wp--preset--font-family--tekst); cursor: pointer; } .do-gory[hidden] { display: none; } .do-gory svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .do-gory:hover, .do-gory:focus-visible { border-color: var(--c-limonka); } .naglowek-cta .wp-block-button__link { white-space: nowrap; } @media (max-width: 600px) { .naglowek-prawa .wp-block-buttons.naglowek-cta { display: none; } .logo .znak { width: 46px; } } /* na stronie podziękowania nie zachęcamy do przeglądu, o który gość właśnie poprosił */ body.strona-dziekuje .naglowek-prawa .naglowek-cta, body.strona-dziekuje li.menu-cta { display: none !important; } /* bieżąca strona w menu (Kontakt, Usługi i strony usług; znacznik aria-current dodaje functions.php) */ .menu-glowne a[aria-current="page"] { color: var(--c-kosc); text-decoration: underline; text-decoration-color: var(--c-limonka); text-underline-offset: 6px; } /* podmenu „Usługi” na komputerze: karta pod linkiem w kolorach motywu, linki w pełnej wysokości 44 px; strzałka obok „Usługi” to osobny przycisk rozwijania (WordPress dodaje mu aria-expanded), sam link prowadzi na /uslugi/ */ .menu-glowne .wp-block-navigation__submenu-container { min-width: 248px !important; padding: 8px !important; border: 1px solid var(--linia) !important; border-radius: 16px; background: var(--c-karta) !important; color: var(--c-kosc) !important; box-shadow: 0 14px 34px rgba(0, 0, 0, .38); } .menu-glowne .wp-block-navigation__submenu-container .wp-block-navigation-item__content { box-sizing: border-box; display: block; width: 100%; min-height: 44px; padding: 11px 14px !important; border-radius: 10px; line-height: 1.3; } .menu-glowne .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--linia-slaba); } .menu-glowne .menu-uslugi-wszystkie { border-bottom: 1px solid var(--linia); margin-bottom: 4px; padding-bottom: 4px; } .menu-glowne .wp-block-navigation__submenu-icon { width: 20px; height: 20px; margin-left: 2px; padding: 0; } .menu-glowne .wp-block-navigation__submenu-icon svg { width: 12px; height: 12px; stroke: currentColor; } /* podmenu w nakładce na telefonie: zawsze rozwinięte, mniejsze linki z wcięciem pod „Usługi”; menu jest wyrównane do prawej, więc WordPress dosuwał podmenu do prawej krawędzi, stąd wyrównanie do lewej na całą szerokość */ nav.menu-glowne .is-menu-open .wp-block-navigation-item.has-child { align-items: stretch !important; } nav.menu-glowne .is-menu-open .wp-block-navigation__submenu-container { box-sizing: border-box; width: 100% !important; margin: 0 0 14px !important; padding: 0 0 0 18px !important; border: 0 !important; border-left: 2px solid var(--c-limonka) !important; border-radius: 0; background: transparent !important; box-shadow: none; } nav.menu-glowne .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { align-items: stretch !important; border-bottom: 0; } nav.menu-glowne .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 10px 0 !important; font: 400 18px/1.3 var(--wp--preset--font-family--tekst); color: var(--c-tekst); } nav.menu-glowne .is-menu-open .menu-uslugi-wszystkie { margin: 0; padding: 0; border: 0; } nav.menu-glowne .is-menu-open .wp-block-navigation__submenu-icon { display: none; } /* ── przyciski: warianty ────────────────────────────────────────────────── */ .wp-element-button, .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; text-decoration: none; transition: box-shadow .2s, background-color .2s, color .2s; } .is-style-poswiata .wp-block-button__link { background: var(--c-tlo); color: var(--c-kosc); border-color: var(--c-limonka); box-shadow: 0 0 0 1px rgba(192, 245, 61, .2), 0 0 18px rgba(192, 245, 61, .35); min-height: 40px; padding: 8px 18px; font-size: 14px; } .is-style-poswiata .wp-block-button__link:hover { background: var(--c-tlo); color: var(--c-kosc); box-shadow: 0 0 0 1px rgba(192, 245, 61, .5), 0 0 30px rgba(192, 245, 61, .6); } .is-style-obrys .wp-block-button__link { background: transparent; color: var(--c-kosc); border-color: var(--c-kosc); } .is-style-obrys .wp-block-button__link:hover { background: var(--c-kosc); color: var(--c-tlo); } /* ciemny przycisk na limonce albo jasnej karcie: taki sam w obu wersjach strony */ .is-style-ciemny .wp-block-button__link { background: var(--c-na-limonce); color: #FAFFF3; } .is-style-ciemny .wp-block-button__link:hover { background: var(--c-na-limonce); color: var(--c-limonka); } /* ── treść stron ───────────────────────────────────────────────────────── */ /* długie dokumenty (polityka, narzędzie) w kolumnie 640 px, około 75 znaków w wierszu; kontakt ma bloki szerokie, więc się nie zmienia */ .tresc-strony { --wp--style--global--content-size: 640px; } .tresc-strony .wp-block-post-title { margin-bottom: 0; } .lead { max-width: 760px; font-size: 19px; color: var(--c-kosc); } /* w kolumnie 640 px (dziękuję, narzędzie, polityka) akapit wstępny nie wystaje 60 px w lewo poza tytuł (29.10.2026) */ .tresc-strony .wp-block-post-content > .lead { max-width: var(--wp--style--global--content-size); } .meta-strony { font-size: 14px; color: var(--c-szary); } .wp-block-separator { border: 0; border-top: 1px solid var(--linia); opacity: 1; } .wp-block-list li + li { margin-top: .45em; } .wp-block-list li::marker { color: var(--c-zielen); } code { padding: 1px 6px; border-radius: 6px; background: var(--linia-slaba); font-size: .86em; color: var(--c-kosc); overflow-wrap: anywhere; } /* kod w bloku (np. wywołanie API we wpisie): łamie się w kolumnie zamiast rozpychać stronę na telefonie */ pre { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; } .wp-block-table { overflow-x: auto; } /* nazwy w kodzie w tabeli (np. analytics_storage) w jednym kawałku: tabela przewija się w bok, zamiast łamać słowo */ .wp-block-table td code, .wp-block-table th code { white-space: nowrap; overflow-wrap: normal; } /* „server-side” w nagłówkach bez łamania na dywizie (span dokłada functions.php) */ .bez-lamania { white-space: nowrap; } .wp-block-table table { width: 100%; border-collapse: collapse; } .wp-block-table th, .wp-block-table td { padding: 10px 12px; border: 0; border-bottom: 1px solid var(--linia); text-align: left; vertical-align: top; } .wp-block-table th { color: var(--c-kosc); font-weight: 600; } .wp-block-table thead { border-bottom: 0; } .is-style-karta { padding: 22px 24px; border: 1px solid var(--linia); border-radius: var(--promien); background: var(--c-karta); } .is-style-karta > :first-child { margin-top: 0; } .wersja-en { margin-top: var(--wp--preset--spacing--l); } /* spis treści długiego dokumentu (polityka prywatności): linki do sekcji na początku strony */ .spis-tresci { margin-top: 28px; padding: 18px 22px; border: 1px solid var(--linia); border-radius: var(--promien); background: var(--c-karta); } .spis-tresci-tytul { margin: 0; font-weight: 600; color: var(--c-kosc); } .spis-tresci ul { margin: 8px 0 0; padding-left: 20px; } .spis-tresci li + li { margin-top: 0; } .spis-tresci a { display: inline-block; padding-block: 6px; } /* znacznik roboczy: rzeczy do potwierdzenia przed publikacją (znika, gdy treść jest gotowa) */ .dp { display: inline-block; margin: 2px 0; padding: 1px 7px; vertical-align: middle; border: 1px dashed #B8941F; border-radius: 4px; background: #4A3A12; color: #FFE08A; font: 500 12px/1.45 var(--wp--preset--font-family--tekst); letter-spacing: 0; text-transform: none; } /* propozycja do zatwierdzenia (np. cena): tekst zostaje widoczny w swoim kroju, przerywana ramka mówi, że to jeszcze nie decyzja; z propozycją wersja na żywo się nie zbuduje (buduj.py) */ mark.propozycja { padding: 0 4px; border-radius: 4px; outline: 2px dashed #E0A526; outline-offset: 1px; background: rgba(224, 165, 38, .16); color: inherit; } /* ── kontakt ───────────────────────────────────────────────────────────── */ .kontakt-siatka { gap: 28px; } .kontakt-formularz { padding: clamp(20px, 3vw, 30px); border-radius: 20px; background: var(--c-limonka); color: var(--c-na-limonce); } .kontakt-formularz h2 { margin-top: 0; color: var(--c-na-limonce); } .formularz { display: grid; gap: 12px; margin-top: 16px; } .formularz label { display: block; font: 600 14px/1.2 var(--wp--preset--font-family--tekst); color: var(--c-na-limonce); } .formularz label small { font-size: inherit; font-weight: 400; } /* pola 16 px: przy mniejszym tekście iPhone przybliża stronę po dotknięciu pola i zostawia ją przybliżoną; ramka .55 odcina pole od karty (3:1 dla granic elementów), także w trybie wysokiego kontrastu */ .formularz input, .formularz select, .formularz textarea { box-sizing: border-box; display: block; width: 100%; margin-top: 6px; min-height: 44px; padding: 10px 12px; border: 1px solid rgba(10, 13, 4, .55); border-radius: 8px; background: rgba(10, 13, 4, .1); color: var(--c-na-limonce); font: 400 16px/1.3 var(--wp--preset--font-family--tekst); } .formularz textarea { min-height: 96px; resize: vertical; } .formularz ::placeholder { color: rgba(10, 13, 4, .68); opacity: 1; } .formularz input:focus, .formularz select:focus, .formularz textarea:focus { outline: 2px solid var(--c-na-limonce); outline-offset: 1px; } .formularz button { justify-self: start; min-height: 48px; margin-top: 4px; padding: 12px 24px; border: 1px solid transparent; border-radius: 999px; background: var(--c-na-limonce); color: #FAFFF3; font: 600 15px/1.2 var(--wp--preset--font-family--tekst); cursor: pointer; } .formularz button:hover { color: var(--c-limonka); } .formularz button:disabled { cursor: progress; opacity: .8; } .formularz .drobne { font-size: 12.5px; line-height: 1.45; color: #2F3D12; } .formularz .drobne a { color: var(--c-na-limonce); } .kontakt-formularz a:not(.wp-block-button__link) { color: var(--c-na-limonce); text-decoration-color: currentColor; } /* pole-pułapka na boty: niewidoczne dla ludzi i czytników ekranu; komunikat o błędzie po powrocie z wysyłki stoi nad pierwszym polem (formularz to siatka) i wygląda jak komunikat, a nie jak kolejne pole */ .formularz-pulapka { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .formularz-komunikat { order: -1; margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--c-na-limonce); color: #FAFFF3; font-size: 14px; font-weight: 600; line-height: 1.45; } .formularz .formularz-komunikat a { color: inherit; } .kroki { counter-reset: krok; list-style: none; padding-left: 0; } .kroki li { position: relative; padding-left: 52px; counter-increment: krok; } .kroki li::before { content: counter(krok); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--c-limonka); font: 400 14px/1 var(--f-naglowki); color: var(--c-na-limonce); } .kroki li + li { margin-top: 18px; } .kroki b { display: block; color: var(--c-kosc); } .kontakt-osoba { display: flex; align-items: center; gap: 14px; } .kontakt-osoba img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; } .kontakt-osoba strong { display: block; color: var(--c-kosc); } .kontakt-osoba span { font-size: 14px; color: var(--c-szary); } /* ── 404 ───────────────────────────────────────────────────────────────── */ .blad404-kod { margin: 0; font: 400 var(--wp--preset--font-size--gigant)/1 var(--f-naglowki); color: var(--c-limonka); text-shadow: 0 0 40px rgba(192, 245, 61, .35); } /* ── podziękowanie ─────────────────────────────────────────────────────── */ .dziekuje-ikona { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; background: var(--c-limonka); color: var(--c-na-limonce); } .dziekuje-ikona svg { width: 30px; height: 30px; } /* ── aktualności: lista z filtrem kategorii, karty wpisów, wpis ─────────── */ .aktualnosci-glowa > * { margin-block: 0; } .aktualnosci-glowa h1 { margin-top: 6px; } .aktualnosci-wstep { max-width: 640px; margin-top: 14px !important; font-size: 18px; color: var(--c-tekst); } .aktualnosci-okruszki { font-size: 14px; } .aktualnosci-okruszki a { display: inline-block; padding-block: 13px; margin-block: -13px; color: var(--c-szary); text-decoration: none; } /* 44 px do dotknięcia bez zmiany układu */ .aktualnosci-okruszki a::before { content: "← "; content: "← " / ""; } /* strzałka bez czytania na głos */ .aktualnosci-okruszki a:hover { color: var(--c-kosc); } /* filtr: zwykłe linki do archiwów kategorii (każda ma swój adres), aktywna wypełniona limonką */ .filtr { gap: 8px; margin-top: 28px !important; } .filtr-kategorie { display: contents; } .filtr-kategorie li { margin: 0; list-style: none; } .filtr-kategorie .cat-item-none { display: none; } .filtr a { box-sizing: border-box; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border: 1px solid var(--linia); border-radius: 999px; color: var(--c-kosc); font: 600 14px/1.2 var(--wp--preset--font-family--tekst); text-decoration: none; white-space: nowrap; } .filtr a:hover { border-color: var(--c-limonka); } .filtr a.aktywna, .filtr .current-cat > a { border-color: var(--c-limonka); background: var(--c-limonka); color: var(--c-na-limonce); } @media (forced-colors: active) { .filtr [aria-current], .wpisy-strony .current { border-width: 3px; } } /* siatka: 3 kolumny, na pierwszej stronie listy najnowszy wpis na całą szerokość (zdjęcie obok tekstu); cała karta klikalna */ .wpisy { margin-top: clamp(32px, 4vw, 48px) !important; } .wpisy-siatka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; } .wpisy-siatka > li { margin: 0; } .wpis-karta { position: relative; display: flex; flex-direction: column; height: 100%; padding: 14px; border: 1px solid var(--linia); border-radius: var(--promien); background: var(--c-karta); transition: border-color .2s; } .wpis-karta:hover, .wpis-karta:focus-within { border-color: var(--c-limonka); } .wpis-karta > .wpis-zdjecie { margin: 0 0 16px; overflow: hidden; border-radius: 10px; background: var(--wp--preset--color--oliwka); } .wpis-zdjecie img { display: block; width: 100%; height: 100%; object-fit: cover; } .wpis-tekst { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 0 4px 4px; } .wpis-tekst > * { margin: 0 !important; } .wpis-kategorie { font-size: 13px; color: var(--c-szary); } .wpis-kategorie a { position: relative; z-index: 2; display: inline-block; padding-block: 4px; color: var(--c-szary); text-decoration: none; } .wpis-kategorie a:hover { color: var(--c-kosc); text-decoration: underline; } .wpis-tytul { font: 400 clamp(18px, 1.6vw, 21px)/1.3 var(--f-naglowki); } .wpis-tytul a { color: var(--c-kosc); text-decoration: none; } .wpis-tytul a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .wpis-tytul a:focus-visible { outline: none; } .wpis-karta:has(.wpis-tytul a:focus-visible) { outline: 2px solid var(--fokus); outline-offset: 3px; } .wpis-zajawka { font-size: 15px; color: var(--c-tekst); } .wpis-zajawka p { margin: 0; } .wpis-tekst .wpis-data { margin-top: auto !important; padding-top: 4px; font-size: 13px; color: var(--c-szary); } body:not(.paged) .aktualnosci .wpisy-siatka > li:first-child { grid-column: 1 / -1; } body:not(.paged) .aktualnosci .wpisy-siatka > li:first-child .wpis-karta:has(> .wpis-zdjecie) { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; padding: 16px; } body:not(.paged) .aktualnosci .wpisy-siatka > li:first-child .wpis-karta > .wpis-zdjecie { margin: 0; } body:not(.paged) .aktualnosci .wpisy-siatka > li:first-child .wpis-tytul { font-size: clamp(22px, 2.4vw, 32px); } @media (max-width: 1000px) { .wpisy-siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .wpisy-siatka { grid-template-columns: 1fr; } /* wyróżniona karta jak zwykła: bez odstępu i wyśrodkowania z siatki komputera (ramka obrazka była wyższa niż grafika) */ body:not(.paged) .aktualnosci .wpisy-siatka > li:first-child .wpis-karta:has(> .wpis-zdjecie) { display: flex; gap: 0; align-items: stretch; padding: 14px; } body:not(.paged) .aktualnosci .wpisy-siatka > li:first-child .wpis-karta > .wpis-zdjecie { margin-bottom: 16px; } } .wpisy-strony { gap: 8px; margin-top: 36px !important; font-size: 15px; } .wpisy-strony a, .wpisy-strony .page-numbers { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 14px; border: 1px solid var(--linia); border-radius: 999px; color: var(--c-kosc); text-decoration: none; } .wpisy-strony .current { border-color: var(--c-limonka); background: var(--c-limonka); color: var(--c-na-limonce); } .wpisy-strony a:hover { border-color: var(--c-limonka); } .wpisy-pusto { padding: 28px; border: 1px dashed var(--linia); border-radius: var(--promien); } /* pas zaproszenia pod listą i pod wpisem (pod wpisem tak szeroki jak tekst) */ .aktualnosci-cta { margin-top: clamp(48px, 6vw, 80px) !important; padding: clamp(28px, 4vw, 48px); border: 1px solid var(--linia); border-radius: 24px; background: var(--c-karta); } .aktualnosci-cta h2 { margin: 0; font-size: clamp(22px, 2.6vw, 32px); } .aktualnosci-cta p { max-width: 560px; margin: 12px 0 0; } .aktualnosci-cta .wp-block-buttons { margin-top: 22px; } .wpis > .aktualnosci-cta { max-width: var(--wp--style--global--content-size); } /* wpis: kolumna 800 px (31.10.2026, prośba właściciela: przy 640 px wpis był „bardzo wąsko napisany”), od 861 px tekst 19 px, czyli około 80 znaków w wierszu; tytuł, zdjęcie, ramka autora i pas zaproszenia biorą tę samą szerokość z układu WordPressa. Telefon bez zmian; na tablecie kolumna zajmuje teraz całą szerokość ekranu (wcześniej trzymało ją 640 px), tekst 18 px. */ .wpis { --wp--style--global--content-size: 800px; } .wpis-glowa > * { margin-block: 0; } .wpis-glowa .wpis-kategorie { margin-top: 22px; } /* tytuł wpisu mniejszy niż nagłówki stron: tytuły wpisów są długie (przy kolumnie 640 px w rozmiarze nagłówka strony miałby 5 wierszy); na telefonie 26-32 px, bo długie polskie słowa w 33 px łamały się bez dywizu */ .wpis-tytul-glowny { margin-top: 10px !important; font-size: clamp(30px, 3.4vw, 44px) !important; line-height: 1.12 !important; } @media (max-width: 480px) { .wpis-tytul-glowny { font-size: clamp(26px, 7.2vw, 32px) !important; } } .wpis-tytul-glowny, .wpis-tytul { -webkit-hyphens: auto; hyphens: auto; } .wpis-meta { gap: 4px 12px; margin-top: 14px !important; font-size: 14px; color: var(--c-szary); } .wpis-meta > * { margin: 0 !important; } /* podpisy dat w środku