/* Theme Name: SP Gardno Theme URI: http://spgardno.local Description: Motyw Szkoły Podstawowej im. Bohaterów Westerplatte w Gardnie. Motyw potomny Twenty Twenty-Five, w pełni sterowany z plików (theme.json + szablony blokowe). Author: Migracja Template: twentytwentyfive Version: 1.0.0 Requires at least: 6.6 Tested up to: 6.7 Requires PHP: 8.0 Text Domain: spgardno */ /* Drobne szlify, których nie da wygodnie theme.json */ /* === Fundament wizualny (referencja: ciepła kość + grafit + koral) === ponytail: akcent to JEDEN token — zamiana koralu na granat to jedna wartość w theme.json. */ :root { --spg-r-pill: 999px; /* przyciski, etykiety */ --spg-r-card: 22px; /* karty, zdjęcia sekcyjne, bloki */ --spg-r-media: 16px; /* obrazki w treści, kadry galerii */ --spg-r-field: 12px; /* pola formularza, wiersze FAQ, drobne bloki */ } /* Etykieta-pigułka nad nagłówkiem sekcji */ .spg-pill, .spg-eyebrow { display: inline-block; padding: .34rem .95rem; border: 1px solid var(--wp--preset--color--accent); border-radius: var(--spg-r-pill); font-size: .7rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--wp--preset--color--accent); margin: 0 0 1rem; } /* Ukryj podkreślenie linków w nawigacji i przyciskach */ .wp-block-navigation a { text-decoration: none; } /* Delikatny efekt na kartach aktualności */ .spg-news .wp-block-post { transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s cubic-bezier(.16,1,.3,1); } .spg-news .wp-block-post:hover { transform: translateY(-3px); } /* Przyciski: lekki „push" przy kliknięciu */ .wp-block-button__link:active { transform: translateY(1px); } /* Górny pasek nawigacji – subtelny cień po odklejeniu */ /* ponytail: Twenty Twenty-Five wstawia block-gap między
a
— stąd biały pasek nad hero */ .wp-site-blocks > main { margin-block-start: 0; } /* === Nagłówek: ciemny pasek kontaktowy + jasny pasek nawigacji (wg referencji) === */ .spg-topbar { padding: .45rem 1.5rem; font-size: .78rem; } .spg-topbar p { margin: 0; } .spg-topbar .wp-block-group { gap: 1.6rem; row-gap: .3rem; } .spg-topbar__item { color: #c9c3bc; letter-spacing: .01em; } .spg-topbar a { color: #c9c3bc; text-decoration: none; } .spg-topbar a:hover, .spg-topbar a:focus-visible { color: #fff; } .spg-header { padding: .9rem 1.5rem; border-bottom: 1px solid var(--wp--preset--color--border); } .spg-header > .wp-block-group { gap: 1.5rem; } .spg-brandbar { gap: .8rem; align-items: center; } .spg-logo { margin: 0; } .spg-logo img { display: block; height: 44px; width: auto; } .spg-brand { margin: 0; line-height: 1.3; font-size: .76rem; color: var(--wp--preset--color--muted); } .spg-brand a { text-decoration: none; color: inherit; } .spg-brand b { display: block; font-size: 1.02rem; font-weight: 600; letter-spacing: -.015em; color: var(--wp--preset--color--primary); } .spg-brand a:hover b { color: var(--wp--preset--color--accent); } .spg-navbar { gap: 1.8rem; } .spg-navbar .wp-block-navigation { font-size: .9rem; } .spg-navbar .wp-block-navigation a { color: var(--wp--preset--color--primary); text-decoration: none; } .spg-navbar .wp-block-navigation a:hover, .spg-navbar .wp-block-navigation a:focus-visible { color: var(--wp--preset--color--accent); } .spg-btn-dziennik .wp-block-button__link { font-size: .84rem; padding: .62rem 1.25rem; } .spg-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--base); } @media (max-width: 780px) { .spg-topbar { font-size: .72rem; } .spg-topbar .wp-block-group { justify-content: center; gap: 1rem; } .spg-brand { font-size: .7rem; } .spg-brand b { font-size: .92rem; } .spg-logo img { height: 38px; } } /* Hero – tekst zawsze czytelny na zdjęciu */ .spg-hero h1, .spg-hero p { text-shadow: 0 1px 24px rgba(10,20,35,.35); } /* Pasek „szybkie linki" – linia zamiast ciężkich kart */ .spg-quick .wp-block-column { border-top: 2px solid var(--wp--preset--color--accent); } /* --- Treść wpisów/stron: spójność po migracji z Joomli --- */ /* Obrazki w treści nigdy nie wychodzą poza kolumnę */ .wp-block-post-content img, .entry-content img, .wp-block-post-content figure, .entry-content figure { max-width: 100%; height: auto; } .wp-block-post-content img { border-radius: var(--spg-r-media); display: block; margin-inline: auto; } /* Wymuś jednolitą typografię treści (nadpisuje resztki inline z Joomli) */ .wp-block-post-content, .wp-block-post-content p, .wp-block-post-content li, .wp-block-post-content span, .wp-block-post-content td { font-family: var(--wp--preset--font-family--body) !important; font-size: 1.05rem; line-height: 1.7; } .wp-block-post-content h1, .wp-block-post-content h2, .wp-block-post-content h3, .wp-block-post-content h4 { font-family: var(--wp--preset--font-family--heading) !important; color: var(--wp--preset--color--primary); line-height: 1.2; } /* Odstępy między akapitami w treści */ .wp-block-post-content p { margin: 0 0 1.1rem; } /* Tabele z Joomli – responsywne */ .wp-block-post-content table { width: 100% !important; max-width: 100%; border-collapse: collapse; display: block; overflow-x: auto; } .wp-block-post-content table td, .wp-block-post-content table th { border: 1px solid var(--wp--preset--color--border); padding: .5rem .75rem; } /* Nagłówek wpisu / archiwum – oddech */ .wp-block-post-title, .wp-block-query-title { margin-bottom: .5rem; } .wp-block-post-date { color: var(--wp--preset--color--muted); font-size: .85rem; } /* --- Kalendarz wydarzeń (shortcode [spg_kalendarz]) --- */ .spg-kal__h { font-family: var(--wp--preset--font-family--heading); color: var(--wp--preset--color--primary); margin: 1.5rem 0 1rem; } .spg-kal__h--past { margin-top: 3rem; padding-top: 1.5rem; border-top: 2px solid var(--wp--preset--color--border); } .spg-kal__list { list-style: none; margin: 0; padding: 0; } .spg-kal__item { display: grid; grid-template-columns: 76px 1fr; gap: 1.25rem; padding: 1.1rem 0; border-top: 1px solid var(--wp--preset--color--border); align-items: start; } .spg-kal__list .spg-kal__item:first-child { border-top: none; } .spg-kal__date { display:flex; flex-direction:column; align-items:center; justify-content:center; background: var(--wp--preset--color--primary-soft); border-radius: var(--spg-r-field); padding:.5rem; text-align:center; } .spg-kal__d { font-size:1.7rem; font-weight:700; color: var(--wp--preset--color--primary); font-family: var(--wp--preset--font-family--heading); line-height:1; } .spg-kal__m { text-transform:uppercase; font-size:.72rem; letter-spacing:.06em; color: var(--wp--preset--color--accent); font-weight:700; margin-top:.15rem; } .spg-kal__y { font-size:.68rem; color: var(--wp--preset--color--muted); } .spg-kal__title { font-family: var(--wp--preset--font-family--heading); font-weight:600; font-size:1.15rem; color: var(--wp--preset--color--primary); text-decoration:none; } .spg-kal__title:hover { color: var(--wp--preset--color--accent); } .spg-kal__time { font-size:.8rem; color: var(--wp--preset--color--muted); margin:.15rem 0; } .spg-kal__ex { font-size:.92rem; color: var(--wp--preset--color--muted); margin:.3rem 0 0; } .spg-kal__empty { color: var(--wp--preset--color--muted); background: var(--wp--preset--color--surface); padding:1.25rem 1.5rem; border-radius: var(--spg-r-field); border:1px solid var(--wp--preset--color--border); } /* --- Galerie: równa siatka z kadrowaniem (koniec „rozjeżdżania") --- */ .wp-block-gallery.has-nested-images { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 10px; } .wp-block-gallery.has-nested-images .wp-block-image { margin: 0 !important; width: 100% !important; height: auto; } .wp-block-gallery.has-nested-images .wp-block-image img { width: 100% !important; height: 100% !important; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--spg-r-media); display: block; margin: 0 !important; } @media (max-width: 900px) { .wp-block-gallery.has-nested-images { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { .wp-block-gallery.has-nested-images { grid-template-columns: repeat(2, 1fr); } } /* --- Aktualności: kafelki z miniaturą --- */ .spg-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2rem; margin-top: 2rem; } @media (max-width: 900px) { .spg-news-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .spg-news-grid { grid-template-columns: 1fr; } } .spg-news-card { display: flex; flex-direction: column; } .spg-news-card__img { display: block; aspect-ratio: 16 / 10; background-size: cover; background-position: center; border-radius: var(--spg-r-card); background-color: var(--wp--preset--color--primary-soft); transition: transform .3s cubic-bezier(.16,1,.3,1); } .spg-news-card:hover .spg-news-card__img { transform: translateY(-4px); } .spg-news-card__date { display: block; color: var(--wp--preset--color--accent); font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; margin: 1rem 0 .35rem; } .spg-news-card__title { font-family: var(--wp--preset--font-family--heading); font-size: 1.12rem; line-height: 1.28; margin: 0 0 .45rem; } .spg-news-card__title a { color: var(--wp--preset--color--primary); text-decoration: none; } .spg-news-card__title a:hover { color: var(--wp--preset--color--accent); } .spg-news-card__ex { color: var(--wp--preset--color--muted); font-size: .92rem; margin: 0; line-height: 1.55; } /* Link do dokumentu PDF (po joomlowym {google_docs}) — pełna ramka, nie pasek z boku */ .spg-pdf { display: inline-flex; flex-direction: column; gap: .2rem; max-width: 100%; padding: .95rem 1.4rem; border: 1px solid var(--wp--preset--color--border); border-radius: var(--spg-r-field); background: var(--wp--preset--color--surface); text-decoration: none; transition: border-color .2s, background .2s, transform .2s; } .spg-pdf:hover, .spg-pdf:focus-visible { border-color: var(--wp--preset--color--accent); background: var(--wp--preset--color--base); transform: translateY(-1px); } .spg-pdf__label { font-family: var(--wp--preset--font-family--heading); font-size: 1.08rem; font-weight: 600; color: var(--wp--preset--color--primary); } .spg-pdf:hover .spg-pdf__label { color: var(--wp--preset--color--accent); } .spg-pdf__meta { font-size: .78rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--wp--preset--color--muted); } /* Paginacja list wpisów */ .spg-pagination { margin-top: 3rem; } .spg-pagination .page-numbers { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; justify-content: center; } .spg-pagination .page-numbers li { margin: 0; } .spg-pagination a.page-numbers, .spg-pagination span.page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; padding: 0 .8rem; border-radius: 8px; border: 1px solid var(--wp--preset--color--border); text-decoration: none; color: var(--wp--preset--color--primary); font-weight: 600; } .spg-pagination a.page-numbers:hover { background: var(--wp--preset--color--primary-soft); } .spg-pagination .page-numbers.current { background: var(--wp--preset--color--primary); color: #fff; border-color: var(--wp--preset--color--primary); } .spg-pagination .page-numbers.dots { border: none; } /* --- Sidebar bloga/kategorii --- */ .spg-archiwum { grid-template-columns: repeat(2, 1fr); gap: 1.6rem; } @media (max-width: 600px) { .spg-archiwum { grid-template-columns: 1fr; } } .spg-sidebar { display: flex; flex-direction: column; gap: 1.3rem; position: sticky; top: 1.5rem; background: #ebe7e2; border-radius: var(--spg-r-card); padding: 1.6rem; } .spg-side-box { background: transparent; border: none; border-radius: 0; padding: 0; } .spg-side-box + .spg-side-box { border-top: 1px solid rgba(27,58,91,.15); padding-top: 1.3rem; } .spg-side-box--accent { background: var(--wp--preset--color--primary); border-radius: var(--spg-r-card); padding: 1.3rem 1.4rem; } .spg-side-box--contact { background: transparent; } .spg-side-h { font-family: var(--wp--preset--font-family--heading); font-size: 1.02rem; margin: 0 0 .9rem; color: var(--wp--preset--color--primary); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; } .spg-side-box--accent .spg-side-h { color: #fff; } .spg-side-links { list-style: none; margin: 0; padding: 0; } .spg-side-links li { border-top: 1px solid rgba(255,255,255,.16); } .spg-side-links li:first-child { border-top: none; } .spg-side-links a { display: block; padding: .6rem 0; color: #fff; text-decoration: none; font-weight: 600; font-size: .95rem; transition: padding-left .2s; } .spg-side-links a:hover { color: #fde9e1; padding-left: .25rem; } .spg-side-cats { list-style: none; margin: 0; padding: 0; } .spg-side-cats li { padding: .45rem 0; border-top: 1px solid var(--wp--preset--color--border); font-size: .95rem; color: var(--wp--preset--color--muted); } .spg-side-cats li:first-child { border-top: none; } .spg-side-cats a { color: var(--wp--preset--color--primary); text-decoration: none; font-weight: 500; } .spg-side-cats a:hover { color: var(--wp--preset--color--accent); } .spg-side-box p { color: var(--wp--preset--color--muted); font-size: .92rem; line-height: 1.65; margin: 0; } .spg-side-more { margin: .9rem 0 0 !important; font-weight: 700; } .spg-side-more a { color: var(--wp--preset--color--primary); text-decoration: none; } .spg-side-more a:hover { color: var(--wp--preset--color--accent); } /* Sidebar chowa się pod treść na mobile (kolumny WP i tak się składają) */ @media (max-width: 780px) { .spg-sidebar { position: static; } } /* Galeria w treści wpisu (kolumna obok sidebara) — 3 kolumny = większe kafle */ .wp-block-post-content .wp-block-gallery.has-nested-images { grid-template-columns: repeat(3, 1fr); } @media (max-width: 900px) { .wp-block-post-content .wp-block-gallery.has-nested-images { grid-template-columns: repeat(2, 1fr); } } /* --- Stopka: linki muszą być jasne na ciemnym granacie (dziedziczyły granat = niewidoczne) --- */ .has-primary-dark-background-color a, .has-primary-dark-background-color .wp-block-list a { color: #ebe7e2; text-decoration: none; } .has-primary-dark-background-color a:hover, .has-primary-dark-background-color a:focus { color: #fde9e1; text-decoration: underline; } /* Nagłówki kolumn w stopce – lekko rozjaśnione dla hierarchii */ .has-primary-dark-background-color h3 { color: #ffffff; } /* Nawigacja między wpisami */ .wp-block-post-navigation-link a { color: var(--wp--preset--color--primary); text-decoration: none; font-weight: 600; } .wp-block-post-navigation-link a:hover { color: var(--wp--preset--color--accent); } /* --- Wydarzenia (mini, na homepage) --- */ .spg-evmini { list-style: none; margin: 0; padding: 0; } .spg-evmini__item { border-top: 1px solid var(--wp--preset--color--border); } .spg-evmini__item:first-child { border-top: none; } .spg-evmini__item a { display: flex; gap: 1rem; align-items: baseline; padding: .8rem 0; text-decoration: none; color: var(--wp--preset--color--contrast); } .spg-evmini__date { color: var(--wp--preset--color--accent); font-weight: 600; font-size: .78rem; text-transform: uppercase; white-space: nowrap; min-width: 58px; } .spg-evmini__date b { color: var(--wp--preset--color--primary); font-size: 1.15rem; font-family: var(--wp--preset--font-family--heading); } .spg-evmini__title { font-weight: 500; } .spg-evmini__item a:hover .spg-evmini__title { color: var(--wp--preset--color--accent); } /* --- Galeria teaser --- */ .spg-galteaser { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; } .spg-galteaser__img { display: block; aspect-ratio: 1; background-size: cover; background-position: center; border-radius: var(--spg-r-card); transition: transform .25s; } .spg-galteaser__img:hover { transform: scale(1.03); } /* ===================== Redesign strony głównej (styl referencyjny) ===================== */ .spg-eyebrow { text-transform:uppercase; letter-spacing:.12em; font-size:.8rem; font-weight:700; color:#1f1d1b; margin:0 0 .4rem; } /* Hero: split czerwony panel + zdjęcie */ /* === HERO: jasny, jak w referencji — ciemny kolor tylko punktowo === */ .spg-hero { padding: clamp(1.8rem, 2.6vw, 2.8rem) 1.5rem 0; } .spg-hero__title { font-size: clamp(2.1rem, 1.2rem + 3.1vw, 3.7rem); line-height: 1.05; letter-spacing: -.032em; margin: .35rem 0 0; max-width: 18ch; } .spg-hero__lead { color: var(--wp--preset--color--muted); font-size: .96rem; line-height: 1.7; max-width: 48ch; margin: 1.15rem 0 0; } /* Zakładki-skróty: jedna linia, przyklejone do górnej krawędzi zdjęcia (jak języczki) */ .spg-hero__tabs { gap: .4rem; flex-wrap: nowrap; margin: clamp(1.6rem, 3vw, 2.6rem) 0 0; } .spg-hero__tabs .wp-block-button { margin: 0; } .spg-hero__tabs .wp-block-button__link { font-size: .84rem; white-space: nowrap; padding: .78rem 1.4rem; border-radius: var(--spg-r-media) var(--spg-r-media) 0 0; transition: background .2s, color .2s; } .spg-tab--dark .wp-block-button__link { background: var(--wp--preset--color--primary); color: #fff; } .spg-tab--accent .wp-block-button__link { background: var(--wp--preset--color--accent); color: #fff; } .spg-tab--light .wp-block-button__link { background: var(--wp--preset--color--surface); color: var(--wp--preset--color--primary); } .spg-tab--light .wp-block-button__link:hover { background: var(--wp--preset--color--border); } /* Okładka hero: tekst nałożony na zdjęcie — całość podciągnięta do góry */ .spg-hero__cover { margin: 0; border-radius: var(--spg-r-card); overflow: hidden; min-height: clamp(360px, 46vw, 560px); padding: clamp(1.8rem, 3.4vw, 3.4rem); } .spg-hero__cover .wp-block-cover__inner-container { max-width: min(680px, 66%); } .spg-hero__cover .spg-hero__title { color: #fff; margin: .5rem 0 0; max-width: none; font-size: clamp(1.9rem, 1.1rem + 2.7vw, 3.3rem); text-shadow: 0 1px 18px rgba(31,29,27,.45); } .spg-hero__cover .spg-hero__lead { color: #f0ece7; margin: .9rem 0 0; max-width: 40ch; text-shadow: 0 1px 14px rgba(31,29,27,.5); } /* ponytail: czytelność z cienia tekstu, nie z przyciemniania całego kadru — twarze dzieci zostają jasne */ @media (max-width: 820px) { .spg-hero__lead { max-width: none; } .spg-hero__cover .wp-block-cover__inner-container { max-width: none; } /* ponytail: na wąskim ekranie zakładki przewijają się w bok zamiast łamać na dwie linie */ .spg-hero__tabs { justify-content: flex-start; overflow-x: auto; padding-bottom: 0; scrollbar-width: none; } .spg-hero__tabs::-webkit-scrollbar { display: none; } .spg-hero__tabs .wp-block-button__link { font-size: .78rem; padding: .68rem 1.05rem; } } /* Sekcja dwutonowa (błękit) */ .spg-link-more { color:#1f1d1b; font-weight:700; text-decoration:none; letter-spacing:.02em; } .spg-link-more:hover { text-decoration:underline; } /* Bento (siatka kafli) */ .spg-bento { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:210px; gap:14px; margin-top:2rem; } .spg-bento__a{ grid-column:1/3; } .spg-bento__b{ grid-column:3/5; } .spg-bento__c{ grid-column:1/2; } .spg-bento__d{ grid-column:2/3; } .spg-bento__e{ grid-column:3/5; } .spg-tile { position:relative; border-radius: var(--spg-r-card); overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; padding:1.5rem; text-decoration:none; color:#fff; transition:transform .25s cubic-bezier(.16,1,.3,1); } .spg-tile:hover { transform:translateY(-3px); } .spg-tile--photo { background-size:cover; background-position:center; } .spg-tile--photo::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,20,20,0) 25%, rgba(18,41,63,.86) 100%); } .spg-tile--red { background:#1f1d1b; } .spg-tile--red:hover { background:#141210; } /* Warianty kolorystyczne kafli — kolor niesie znaczenie sekcji */ .spg-tile--green { background: var(--wp--preset--color--green); } .spg-tile--green:hover { background: color-mix(in oklch, var(--wp--preset--color--green) 86%, black); } .spg-tile--terracotta { background: var(--wp--preset--color--terracotta); } .spg-tile--terracotta:hover { background: color-mix(in oklch, var(--wp--preset--color--terracotta) 86%, black); } /* Etykieta kategorii na kaflach wpisów */ .spg-news-card__cat { display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; padding: .28rem .65rem; border-radius: 999px; margin: .9rem 0 .1rem; } .spg-cat--primary { background: var(--wp--preset--color--primary-soft); color: var(--wp--preset--color--primary); } .spg-cat--green { background: var(--wp--preset--color--green-soft); color: var(--wp--preset--color--green); } .spg-cat--terracotta { background: var(--wp--preset--color--terracotta-soft); color: var(--wp--preset--color--terracotta); } .spg-cat--accent { background: oklch(95% 0.03 78); color: var(--wp--preset--color--accent); } .spg-news-card__cat + .spg-news-card__date { margin-top: .45rem; } .spg-tile > * { position:relative; z-index:1; } .spg-tile h3 { color:#fff; font-family:var(--wp--preset--font-family--heading); font-weight:600; font-size:1.3rem; line-height:1.15; margin:0 0 .3rem; } .spg-tile p { color:rgba(255,255,255,.86); font-size:.9rem; line-height:1.45; margin:0 0 .6rem; } .spg-tile__more { color:#fff; font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; } .spg-tile:hover .spg-tile__more { text-decoration:underline; } @media (max-width:820px){ .spg-bento{ grid-template-columns:repeat(2,1fr); grid-auto-rows:180px; } .spg-bento__a,.spg-bento__b,.spg-bento__e{ grid-column:span 2; } .spg-bento__c,.spg-bento__d{ grid-column:span 1; } } /* === Nagłówek sekcji: pigułka + tytuł, wyśrodkowane (wg referencji) === */ .spg-sec-head { max-width: 40ch; margin: 0 auto clamp(2.2rem, 4vw, 3.4rem); text-align: center; } .spg-sec-head .spg-pill { margin-inline: auto; } .spg-sec-title { font-size: clamp(1.75rem, 1.1rem + 2.1vw, 2.75rem); line-height: 1.12; margin: 0; } /* === Trzy karty: zdjęcie + kolorowy korpus + lista odnośników === */ .spg-cards { align-items: stretch; } .spg-cards .wp-block-column { display: flex; } .spg-card { width: 100%; display: flex; flex-direction: column; border-radius: var(--spg-r-card); overflow: hidden; } .spg-card__img { margin: 0; } .spg-card__img img { display: block; width: 100%; height: 208px; object-fit: cover; border-radius: 0; } .spg-card__body { display: flex; flex-direction: column; gap: .55rem; flex: 1; padding: 1.5rem 1.5rem 1.4rem; } .spg-card__title { margin: 0; font-size: 1.28rem; letter-spacing: -.02em; } .spg-card__lead { margin: 0; font-size: .88rem; line-height: 1.6; } .spg-card__list { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; } .spg-card__list li { margin: 0; } .spg-card__list a { display: flex; align-items: center; gap: .6rem; font-size: .87rem; text-decoration: none; } .spg-card__list a::before { content: "✓"; flex: 0 0 auto; width: 1.35rem; height: 1.35rem; border-radius: var(--spg-r-pill); display: grid; place-items: center; font-size: .68rem; font-weight: 700; } .spg-card__more { margin: auto 0 0; padding-top: 1.2rem; } .spg-card__more a { font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; text-decoration: none; } /* warianty kolorystyczne — ciemny, akcentowy, jasny */ .spg-card--dark { background: var(--wp--preset--color--primary); } .spg-card--dark .spg-card__title, .spg-card--dark .spg-card__list a, .spg-card--dark .spg-card__more a { color: #fff; } .spg-card--dark .spg-card__lead { color: #c9c3bc; } .spg-card--dark .spg-card__list a::before { background: rgba(255,255,255,.14); color: #fff; } .spg-card--dark .spg-card__list a:hover, .spg-card--dark .spg-card__more a:hover { color: var(--wp--preset--color--accent); } .spg-card--accent { background: var(--wp--preset--color--accent); } .spg-card--accent .spg-card__title, .spg-card--accent .spg-card__list a, .spg-card--accent .spg-card__more a { color: #fff; } .spg-card--accent .spg-card__lead { color: #ffe4d8; } .spg-card--accent .spg-card__list a::before { background: rgba(255,255,255,.22); color: #fff; } .spg-card--accent .spg-card__list a:hover, .spg-card--accent .spg-card__more a:hover { color: #ffe4d8; } .spg-card--light { background: var(--wp--preset--color--surface); } .spg-card--light .spg-card__title, .spg-card--light .spg-card__list a { color: var(--wp--preset--color--primary); } .spg-card--light .spg-card__lead { color: var(--wp--preset--color--muted); } .spg-card--light .spg-card__list a::before { background: var(--wp--preset--color--border); color: var(--wp--preset--color--primary); } .spg-card--light .spg-card__more a { color: var(--wp--preset--color--accent); } .spg-card--light .spg-card__list a:hover { color: var(--wp--preset--color--accent); } @media (max-width: 900px) { .spg-cards { flex-wrap: wrap !important; } .spg-cards .wp-block-column { flex-basis: 100% !important; } } /* === Baner: zdjęcie + panel akcentowy w jednej zaokrąglonej karcie (wg referencji) === */ .spg-banner { border-radius: var(--spg-r-card); overflow: hidden; align-items: stretch; } .spg-banner .wp-block-media-text__media { height: 100%; } .spg-banner .wp-block-media-text__media img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; display: block; border-radius: 0; } .spg-banner .wp-block-media-text__content { padding: clamp(2rem, 3.5vw, 3.4rem); display: flex; flex-direction: column; justify-content: center; gap: .35rem; } .spg-banner__title { margin: .3rem 0 0; color: #fff; font-size: clamp(1.6rem, 1.1rem + 1.7vw, 2.4rem); line-height: 1.12; } .spg-banner__lead { margin: .9rem 0 0; color: #ffe4d8; font-size: .95rem; line-height: 1.65; max-width: 42ch; } .spg-banner__cta { margin-top: 1.6rem; } .spg-banner__cta .wp-block-button__link { background: #fff; color: var(--wp--preset--color--primary); font-size: .88rem; padding: .8rem 1.5rem; } .spg-banner__cta .wp-block-button__link:hover { background: var(--wp--preset--color--primary); color: #fff; } /* pigułka na tle akcentowym */ .spg-pill--onaccent { border-color: rgba(255,255,255,.55); color: #fff; } @media (max-width: 780px) { .spg-banner .wp-block-media-text__media img { min-height: 240px; } } /* === Karuzela aktualności: natywny scroll-snap, strzałki bez biblioteki === */ .spg-carousel { display: flex; flex-direction: column; } .spg-carousel__nav { display: flex; gap: .5rem; align-self: flex-end; margin: 0 0 1rem; } .spg-carousel__btn { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; cursor: pointer; border: 1px solid var(--wp--preset--color--border); border-radius: var(--spg-r-pill); background: transparent; color: var(--wp--preset--color--primary); font-size: 1rem; line-height: 1; transition: background .25s cubic-bezier(.16,1,.3,1), transform .2s, opacity .2s; } .spg-carousel__btn:hover:not(:disabled) { background: var(--wp--preset--color--base); } .spg-carousel__btn:active:not(:disabled) { transform: translateY(1px); } .spg-carousel__btn:disabled { opacity: .3; cursor: default; } .spg-carousel__track { display: flex; gap: 1.6rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: .2rem; } .spg-carousel__track::-webkit-scrollbar { display: none; } .spg-carousel__item { flex: 0 0 clamp(248px, 26vw, 320px); scroll-snap-align: start; } .spg-carousel__item .spg-news-card { height: 100%; } /* === FAQ / Strefa rodzica: natywny core/details, zero JS === */ .spg-faq__head { max-width: 38ch; margin: 0 auto clamp(1.8rem, 3vw, 2.6rem); text-align: center; } .spg-faq__head .spg-pill { margin-inline: auto; } .spg-faq__title { margin: 0; font-size: clamp(1.6rem, 1.1rem + 1.7vw, 2.4rem); line-height: 1.14; } .spg-faq { max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; gap: .55rem; } /* ponytail: układ constrained daje dzieciom margin-inline:auto, co w kolumnie flex kurczy je do treści */ .spg-faq > * { width: 100%; max-width: none; margin-inline: 0; } .spg-faq__item { background: var(--wp--preset--color--surface); border-radius: var(--spg-r-field); overflow: hidden; } .spg-faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.25rem; font-weight: 600; font-size: .97rem; color: var(--wp--preset--color--primary); transition: background .25s cubic-bezier(.16,1,.3,1); } .spg-faq__item summary::-webkit-details-marker { display: none; } .spg-faq__item summary:hover { background: var(--wp--preset--color--border); } .spg-faq__item summary::after { content: "+"; flex: 0 0 auto; width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: var(--spg-r-pill); background: var(--wp--preset--color--accent); color: #fff; font-size: 1.05rem; line-height: 1; } .spg-faq__item[open] summary::after { content: "\2212"; } .spg-faq__item[open] summary { background: var(--wp--preset--color--border); } .spg-faq__item p { margin: 0; padding: 0 1.25rem; color: var(--wp--preset--color--muted); font-size: .92rem; line-height: 1.65; } .spg-faq__item p:first-of-type { padding-top: .9rem; } .spg-faq__item p:last-of-type { padding-bottom: 1.2rem; } .spg-faq__more a { color: var(--wp--preset--color--accent); font-weight: 600; font-size: .86rem; text-decoration: none; } .spg-faq__more a:hover { text-decoration: underline; } /* Dane pokazane wprost w wierszu FAQ — godziny, numery telefonów */ .spg-faq__dane { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .3rem; } .spg-faq__dane li { display: grid; grid-template-columns: 7.5rem 1fr; gap: .8rem; align-items: baseline; padding: .42rem 0; border-top: 1px solid var(--wp--preset--color--border); margin: 0; } .spg-faq__dane li:first-child { border-top: none; } .spg-faq__k { font-weight: 700; color: var(--wp--preset--color--primary); font-size: .95rem; letter-spacing: -.01em; } .spg-faq__v { color: var(--wp--preset--color--muted); font-size: .88rem; line-height: 1.5; } .spg-faq__uwaga { font-size: .85rem; } /* ponytail: blok wp:html nie daje opakowania — wcięcie ustawiamy wprost na liście */ .spg-faq__dane { margin-inline: 1.25rem; width: auto; } @media (max-width: 560px) { .spg-faq__dane li { grid-template-columns: 1fr; gap: .1rem; } } /* === Patron: cytat jako główny element + portret obok (wg referencji) === */ .spg-patron__quote { margin: .4rem 0 0; font-size: clamp(1.35rem, .95rem + 1.5vw, 2.05rem); line-height: 1.32; letter-spacing: -.02em; font-weight: 500; color: var(--wp--preset--color--primary); text-wrap: balance; } .spg-patron__kto { margin: 1.4rem 0 0; font-size: .82rem; line-height: 1.5; color: var(--wp--preset--color--muted); } .spg-patron__kto b { display: block; font-size: .95rem; font-weight: 600; color: var(--wp--preset--color--primary); } .spg-patron__lead { margin: 1.5rem 0 0; font-size: .93rem; line-height: 1.7; color: var(--wp--preset--color--muted); max-width: 52ch; } .spg-patron__more { margin: 1.3rem 0 0; } .spg-patron__more a { font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--wp--preset--color--accent); text-decoration: none; } .spg-patron__more a:hover { text-decoration: underline; } .spg-patron__img { margin: 0; } .spg-patron__img img { width: 100%; height: clamp(300px, 32vw, 430px); object-fit: cover; border-radius: var(--spg-r-card); display: block; } /* === Stopka jako sekcja kontaktowa (wg referencji) === */ .spg-footer { border-radius: 34px 34px 0 0; padding: clamp(2.6rem, 4.5vw, 4.2rem) 1.5rem 1.6rem; } .spg-footer__top { margin-bottom: clamp(2.2rem, 3.5vw, 3.2rem); } .spg-footer__title { margin: .2rem 0 1.8rem; color: #fff; font-size: clamp(1.4rem, 1rem + 1.4vw, 2.05rem); line-height: 1.18; max-width: 20ch; } .spg-footer__dane { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; } .spg-footer__dane li { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; align-items: start; margin: 0; } .spg-footer__k { font-size: .7rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: #8a8580; padding-top: .18rem; } .spg-footer__v { font-size: .92rem; line-height: 1.6; color: #ddd8d2; } .spg-footer__v a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.28); } .spg-footer__v a:hover { color: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); } .spg-footer__h { margin: 0 0 1.1rem; color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; } .spg-footer__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .62rem; } .spg-footer__lista li { margin: 0; } .spg-footer__lista a { color: #c9c3bc; text-decoration: none; font-size: .92rem; transition: color .2s; } .spg-footer__lista a:hover { color: var(--wp--preset--color--accent); } .spg-footer__bottom { padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12); gap: 1rem; } .spg-footer__mark { gap: .7rem; align-items: center; } .spg-footer__logo { margin: 0; } .spg-footer__copy, .spg-footer__prawne { margin: 0; font-size: .78rem; color: #8a8580; } .spg-footer__prawne { max-width: 62ch; text-align: right; line-height: 1.9; } @media (max-width: 900px) { .spg-footer__prawne { text-align: left; } } .spg-footer__prawne a { color: #8a8580; text-decoration: none; } .spg-footer__prawne a:hover { color: var(--wp--preset--color--accent); } @media (max-width: 560px) { .spg-footer__dane li { grid-template-columns: 1fr; gap: .15rem; } }