* (np. post-title z isLink) — element z kolorem linku nadpisałby
* inaczej samo ustawienie na rodzicu.
*/
h1,
h1 a {
background: linear-gradient(180deg, var(--wp--preset--color--contrast) 0%, var(--wp--preset--color--contrast-2) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
/*
* Baner-badge nad hero sliderem strony głównej ("Nasze zabytki") —
* tytuł nad sliderem był świadomie usunięty tylko na stronie
* głównej (zob. CLAUDE.md), więc odznaka jest nakładką na samym
* sliderze, nie "nad tytułem" (którego już tam nie ma). Ta sama technika
* co istniejący hover-tooltip "Zobacz nasze pojazdy →" w hero-slider.css
* (tekst przez CSS content, nie osobny blok w treści strony).
*/
.fpsm-hero-slider {
position: relative;
}
.fpsm-hero-slider::after {
content: "Nasze zabytki";
position: absolute;
top: 1em;
left: 1em;
z-index: 2;
background: var(--wp--preset--color--accent);
color: var(--wp--preset--color--contrast);
padding: 0.4em 1em;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/*
* Honeypot formularza kontaktowego (Contact Form 7) — pole "fpsm_hp" musi
* zniknąć wizualnie, ale zostać dostępne w DOM/formularzu (żeby proste boty
* je wypełniły), więc position:absolute + wyniesienie poza ekran zamiast
* display:none. Logika sprawdzająca pole jest w
* includes/contact-form-antispam.php.
*/
.fpsm-hp-field-wrap {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
/*
* Wygląd formularza kontaktowego (Contact Form 7, strona Kontakt) —
* domyślny output CF7 to gołe pola przeglądarki, więc bez tego odstawał
* od ciemnego motywu. CF7 sam owija swój output w ,
* więc karta jest stylowana na tym kontenerze bez ruszania treści strony.
* Ta sama "karta" co Aktualności/stopka (border 1px contrast-3, radius
* 8px, tło base-2), pola na zmiennych palety jak reszta wtyczki.
*/
.wpcf7 {
margin: 1.5em 0 2em;
padding: 1.5em;
border: 1px solid var(--wp--preset--color--contrast-3);
border-radius: 8px;
background: var(--wp--preset--color--base-2);
}
.wpcf7-form p {
margin: 0 0 1.1em;
}
.wpcf7-form-control:not(.wpcf7-submit) {
display: block;
width: 100%;
padding: 0.65em 0.9em;
border: 1px solid var(--wp--preset--color--contrast-3);
border-radius: 6px;
background: var(--wp--preset--color--base);
color: var(--wp--preset--color--contrast);
font-size: 1em;
font-family: inherit;
box-sizing: border-box;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wpcf7-form-control::placeholder {
color: var(--wp--preset--color--contrast-2);
opacity: 1;
}
.wpcf7-form-control:focus {
outline: none;
border-color: var(--wp--preset--color--accent-3);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent-3) 25%, transparent);
}
textarea.wpcf7-form-control {
min-height: 9em;
resize: vertical;
}
.wpcf7-form-control.wpcf7-not-valid {
border-color: var(--wp--preset--color--accent);
}
.wpcf7-not-valid-tip {
display: block;
margin-top: 0.35em;
color: var(--wp--preset--color--accent);
font-size: 0.85em;
}
.wpcf7-submit {
display: inline-block;
padding: 0.75em 1.75em;
border: none;
border-radius: 6px;
/* accent-4, nie accent-2 — jak przyciski w Stylach Globalnych
(2026-10-22): granatowy przycisk ginął na granatowym tle. */
background: var(--wp--preset--color--accent-4);
color: var(--wp--preset--color--contrast);
font-size: 1em;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease;
}
.wpcf7-submit:hover,
.wpcf7-submit:focus {
background: var(--wp--preset--color--accent);
}
.wpcf7-spinner {
vertical-align: middle;
}
.wpcf7-response-output {
margin: 1em 0 0;
padding: 0.9em 1.1em;
border-radius: 6px;
border: 1px solid var(--wp--preset--color--contrast-3);
background: var(--wp--preset--color--base);
color: var(--wp--preset--color--contrast);
font-size: 0.95em;
}
/*
* !important wymagane: selektor rdzenia CF7 (`.wpcf7 form.invalid
* .wpcf7-response-output` itd.) ma wyższą specyficzność niż nasz
* (dodatkowy element `form` w łańcuchu), więc bez !important nasze
* kolory nigdy się nie stosowały — border zostawał zawsze na
* domyślnych kolorach CF7 (zielony/czerwony/pomarańczowy/żółty),
* niezależnie od kolejności ładowania arkuszy.
*/
.wpcf7-form.sent .wpcf7-response-output {
border-color: var(--wp--preset--color--accent-3) !important;
}
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output,
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output {
border-color: var(--wp--preset--color--accent) !important;
}
/*
* Sekcja "Zarząd" na stronie Kontakt — karty osób w tej samej konwencji
* co reszta kart na stronie (border 1px contrast-3, radius 8px, tło
* base-2).
*/
.fpsm-zarzad {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.25em;
margin: 1.5em 0 2em;
}
.fpsm-zarzad__osoba {
padding: 1.25em 1.5em;
border: 1px solid var(--wp--preset--color--contrast-3);
border-radius: 8px;
background: var(--wp--preset--color--base-2);
}
.fpsm-zarzad__imie {
margin: 0 0 0.15em;
font-size: 1.1em;
font-weight: 600;
color: var(--wp--preset--color--contrast);
}
.fpsm-zarzad__funkcja {
margin: 0 0 0.75em;
font-size: 0.85em;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--wp--preset--color--contrast-2);
}
.fpsm-zarzad__dane {
margin: 0;
font-size: 0.95em;
line-height: 1.7;
}
/* Blok "Zarząd" jest wstawiony jako Custom HTML (wp:html) — globalny
kolor linków ze Stylów Globalnych (selektor :where(), zerowa
specyficzność) tam nie sięga, więc dogrywamy go ręcznie: czerwień
(accent) jak reszta linków w treści, niebieski (accent-3) na hover —
te same role co w tabeli palety w CLAUDE.md. */
.fpsm-zarzad__dane a {
color: var(--wp--preset--color--accent);
}
.fpsm-zarzad__dane a:hover {
color: var(--wp--preset--color--accent-3);
}
/*
* Karty "Czym się zajmujemy" na stronie głównej — ikonka w odznace +
* delikatny "unos" karty na hover. Podpatrzone na osobnym placeholderze
* "strona w budowie" na fundacjapsm.pl (nie ma nic wspólnego z tym
* WordPressem, ale wartości hover/ramki zostały dosłownie podejrzane w
* ich CSS: transform: translateY(-4px), border-color na
* rgb(71,85,105) — to dokładnie nasz --wp--preset--color--accent-5).
* Świadomie TYLKO ta jedna sekcja (klasa .fpsm-feature-card na
* konkretnych 3 kartach) — nie karty Aktualności/stopki/katalogu, które
* mają inne, własne klasy i zostają bez zmian.
*/
.fpsm-feature-card {
transition: transform 0.2s ease, border-color 0.2s ease;
}
.fpsm-feature-card:hover {
transform: translateY(-4px);
/* !important konieczne — WP generuje klasę koloru obramowania
(has-contrast-3-border-color) z !important, więc zwykła
specyficzność by tego nie nadpisała. */
border-color: var(--wp--preset--color--accent-5) !important;
}
.fpsm-feature-icon {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
/* margin-left/right:0 z !important — motyw ma regułę
".is-layout-constrained > :where(...)" z margin-left/right:auto
!important (mechanizm centrowania węższych bloków w layoutcie
"constrained"), więc zwykła wartość (nawet bez :where()) by tego
nie przebiła. Bez tego odznaka wychodziła wyśrodkowana, a
nagłówek/tekst pod nią zostawały przy lewej krawędzi. */
margin-bottom: 18px;
margin-left: 0 !important;
margin-right: auto !important;
border-radius: 8px;
background: rgba(255, 255, 255, 0.05);
color: var(--wp--preset--color--accent);
}
.fpsm-feature-icon svg {
width: 24px;
height: 24px;
}
/*
* Równe wysokości kart (2026-10-22). Kolumny bloku "Kolumny" i komórki
* siatek same się rozciągają do najwyższej w rzędzie, ale karta (grupa)
* w środku miała wysokość swojej treści — stąd nierówne dolne krawędzie
* w "Czym się zajmujemy" i w stopce.
*/
.fpsm-feature-card,
footer .wp-block-column > .wp-block-group {
box-sizing: border-box;
height: 100%;
}
/*
* H1 na stronie głównej (szablon front-page, post 56) — nadal stonowany
* (kolor contrast-2, nad sliderem), ale nie 17 px jak drobny podpis
* (2026-10-23). Na telefonie dostaje boczne odstępy jak reszta treści —
* grupa w tym szablonie nie ma własnego paddingu.
*/
.fpsm-home-h1 {
font-size: clamp(1.15rem, 0.9rem + 1vw, 1.5rem) !important;
line-height: 1.35;
text-wrap: balance;
padding-left: var(--wp--style--root--padding-left, 1rem);
padding-right: var(--wp--style--root--padding-right, 1rem);
}
/* Paginacja (katalog, Aktualności) — numery i strzałki jako przyciski
zamiast gołych podkreślonych linków (2026-10-23). */
.wp-block-query-pagination {
gap: 0.5em;
margin-top: 2em;
}
.wp-block-query-pagination-numbers {
display: flex;
gap: 0.5em;
}
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.5em;
height: 2.5em;
padding: 0 0.9em;
box-sizing: border-box;
border: 1px solid var(--wp--preset--color--contrast-3);
border-radius: 6px;
background: var(--wp--preset--color--base-2);
color: var(--wp--preset--color--contrast);
text-decoration: none;
margin: 0 !important;
}
.wp-block-query-pagination a.page-numbers:hover,
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
border-color: var(--wp--preset--color--accent-5);
}
.wp-block-query-pagination .page-numbers.current {
background: var(--wp--preset--color--accent-4);
border-color: var(--wp--preset--color--accent-4);
}
.wp-block-query-pagination .page-numbers.dots {
border: none;
background: none;
}
/* Dolny pasek stopki: © + dane rejestrowe (2026-10-23). */
.fpsm-stopka-dol {
margin-top: var(--wp--preset--spacing--30) !important;
color: var(--wp--preset--color--contrast-2);
font-size: 0.85rem;
text-align: center;
}
/* Numer konta na stronie Wesprzyj nas (shortcode [fpsm_numer_konta]). */
.fpsm-konto {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5em 1.25em;
margin: 1em 0 2em;
padding: 1.25em 1.5em;
border: 1px solid var(--wp--preset--color--contrast-3);
border-radius: 8px;
background: var(--wp--preset--color--base-2);
}
.fpsm-konto__etykieta {
flex-basis: 100%;
font-size: 0.8em;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--wp--preset--color--contrast-2);
}
.fpsm-konto__numer {
/* Numer w jednej linii — na telefonie czcionka trochę mniejsza, żeby
ostatnia grupa cyfr nie spadała do nowej linii. */
font-size: clamp(0.95rem, 0.7rem + 1.2vw, 1.35rem);
font-weight: 700;
white-space: nowrap;
letter-spacing: 0.02em;
color: var(--wp--preset--color--contrast);
font-variant-numeric: tabular-nums;
}
@media (max-width: 480px) {
.fpsm-konto {
padding: 1.1em 1em;
}
}
.fpsm-konto__kopiuj {
padding: 0.5em 1.1em;
border: 1px solid var(--wp--preset--color--contrast);
border-radius: 6px;
background: transparent;
color: var(--wp--preset--color--contrast);
font: inherit;
font-size: 0.9em;
font-weight: 600;
cursor: pointer;
}
.fpsm-konto__kopiuj:hover,
.fpsm-konto__kopiuj:focus-visible {
background: var(--wp--preset--color--accent-4);
border-color: var(--wp--preset--color--accent-4);
}
/*
* Logo w nagłówku (26.10.2026): blok Logo witryny z header.html motywu
* (custom_logo = białe logo, logo/logo-bialy.svg). Logo zawiera pełną
* nazwę fundacji, więc tekstowy Tytuł witryny obok jest ukryty wizualnie
* (zostaje dla czytników ekranu). Szerokość nadpisuje atrybut width:60
* z header.html.
*/
header.wp-block-template-part .wp-block-site-logo img {
width: 190px !important;
height: auto;
}
header.wp-block-template-part .wp-block-site-title {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
@media (max-width: 600px) {
header.wp-block-template-part .wp-block-site-logo img {
width: 140px !important;
}
}
/* Logo w stopce, nad dolnym paskiem z adresem. */
.fpsm-stopka-logo {
margin-top: var(--wp--preset--spacing--40) !important;
}
.fpsm-stopka-logo img {
width: 220px !important;
height: auto;
}
/*
* Strona „Dla mediów” (26.10.2026): karty z logo do pobrania, zasady,
* opis fundacji do skopiowania. Klasy nadane blokom w treści strony.
*/
.fpsm-media-loga {
gap: var(--wp--preset--spacing--30);
}
/* karty z logo szersze niż kolumna tekstu (620 px), ale nie na całe 1280 px */
.fpsm-media-loga.alignwide {
max-width: 960px !important;
}
.fpsm-media-karta {
height: 100%;
box-sizing: border-box;
padding: var(--wp--preset--spacing--30);
border: 1px solid var(--wp--preset--color--contrast-3);
border-radius: 8px;
background: var(--wp--preset--color--base-2);
}
.fpsm-media-karta h3 {
margin-top: var(--wp--preset--spacing--20);
}
.fpsm-media-podglad {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 16 / 9;
padding: 8% 10%;
box-sizing: border-box;
border-radius: 6px;
}
.fpsm-media-podglad--jasny {
background: #ffffff;
}
.fpsm-media-podglad--ciemny {
background: var(--wp--preset--color--base);
border: 1px solid var(--wp--preset--color--contrast-3);
}
.fpsm-media-podglad .wp-block-image,
.fpsm-media-podglad .wp-block-image img {
margin: 0;
width: 100%;
height: auto;
}
.fpsm-media-pliki {
gap: 0.5rem;
}
.fpsm-media-pliki .wp-block-button__link {
padding: 0.45em 1em;
font-size: 0.85rem;
}
.fpsm-media-uwaga {
font-size: 0.9rem;
color: var(--wp--preset--color--contrast-2);
}
.fpsm-media-opis {
padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
border-left: 4px solid var(--wp--preset--color--accent);
border-radius: 0 8px 8px 0;
background: var(--wp--preset--color--base-2);
}