/**
Theme Name: SCh Tomy
Author: Daniel Świderski
Author URI: https://8814.pl
Description: SCh Tomy theme
Version: 1.8.29
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: schtomy
Template: astra
*/
/* ==========================================================================
Fundamenty projektu SCh Tomy
Tokeny, typografia i stany interakcji z Design Systemu v1.
Warstwa globalna dla calej strony; modul kazan niesie wlasna warstwe
(`body.sermons-design` w church-sermons/sermons.css) o wyzszej
specyficznosci, wiec ponizsze go nie dotyka.
========================================================================== */
/*
* Tokeny. Te same nazwy ustawia Style Guide Spectry na `body` i tam wygrywaja
* jego wartosci - ponizsze sa zrodlem prawdy w repo i siatka bezpieczenstwa,
* gdyby Style Guide zostal kiedys wyczyszczony.
*/
:root {
--paper: #faf7f2;
--ink: #16130f;
--text: #4a4640;
--muted: #6b6560;
--border: #e4dccb;
--subtle: #f6eedd;
--campus-tomaszow: #cdaa68;
--campus-lodz: #486ca0;
--campus-piotrkow: #cc6b5b;
/* Atrament rozjasniony - hover przyciskow primary. */
--ink-hover: #2c2620;
/* Niebieski Lodzi pelni tez role koloru interakcji na neutralnej bazie. */
--link-hover: #486ca0;
/* Zaokraglenia: pola, media, karty, pill. */
--radius-field: 10px;
--radius-media: 14px;
--radius-card: 18px;
--radius-pill: 999px;
/* Skala odstepow (4px). */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 48px;
--space-section: 96px;
--shadow-raised: 0 2px 10px -4px rgba(22, 19, 15, 0.3);
--shadow-float: 0 22px 50px -34px rgba(22, 19, 15, 0.5);
/* Ruch: jedna krzywa i trzy czasy dla animacji z sekcji "Ruch" na koncu. */
--ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);
--dur-fast: 150ms;
--dur-base: 350ms;
--dur-reveal: 600ms;
/*
* Wysokosc przyklejonego paska nawigacji. Realna wartosc (razem z
* paskiem administratora) mierzy js/sticky-header.js i nadpisuje te
* zmienna inline na ; ta tutaj jest awaryjna - przegladarka
* skacze do fragmentu adresu jeszcze przed skryptem, a bez zadnej
* wartosci tresc wladowalaby sie pod pasek.
*/
--sticky-offset: 80px;
/* Oddech miedzy paskiem a trescia, na ktorej stanela kotwica. Bez
niego naglowek sekcji przykleja sie do spodu paska i czyta sie jak
schowany pod menu, mimo ze technicznie jest widoczny. */
--anchor-gap: 24px;
}
/*
* Papier zamiast bieli; biel zostaje dla kart lezacych na papierze. Astra
* maluje tlo na klasie ukladu (`.ast-plain-container`), nie na `body`, wiec
* selektor musi ja powtorzyc - samo `body` przegrywa specyficznoscia.
*/
body.ast-plain-container,
body.ast-page-builder-template,
body.ast-separate-container,
body.ast-narrow-container {
background-color: var(--paper, #faf7f2);
}
body {
color: var(--text, #4a4640);
font-size: 17px;
line-height: 1.62;
-webkit-font-smoothing: antialiased;
}
/*
* Miejsce na pasek przewijania jest zarezerwowane na stale. Otwarcie menu
* mobilnego blokuje przewijanie strony (`overflow: hidden`), wiec bez tego
* pasek znika, strona robi sie o jego szerokosc szersza i wszystko przy
* prawej krawedzi - z przyciskiem zamkniecia menu na czele - przeskakuje.
*/
html {
scrollbar-gutter: stable;
/*
* Kotwice w obrebie strony (#dojazd, #faq, sekcje "Sluzb", menu) musza
* zatrzymac sie pod przyklejonym paskiem, nie za nim.
*
* Warunek: w Kustomizatorze Astry ma byc WYLACZONE "Scroll To ID".
* Wlaczone przechwytuje klik w kotwice (`astraSmoothScroll` w jej
* frontend.js), anuluje domyslne zachowanie i przewija samo - a wtedy
* `scroll-padding-top` nie ma nic do powiedzenia, bo steruje tylko
* przewijaniem, ktore wykonuje przegladarka. Przy naglowku ze Spectry
* Astra nie liczy zadnego odstepu i kotwice po prostu przestaja dzialac.
*/
scroll-padding-top: calc(var(--sticky-offset, 80px) + var(--anchor-gap, 24px));
/* Skok do sekcji jest animowany - inaczej strona zmienia sie w mgnieniu
oka i traci sie orientacje, ktory fragment wlasnie ogladamy. */
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
::selection {
background: var(--campus-tomaszow, #cdaa68);
color: var(--ink, #16130f);
}
/* ==========================================================================
Typografia
========================================================================== */
/*
* Skala z Design Systemu: H1 56/1.0, H2 40/1.05, H3 26/1.15, H4 22/1.2;
* dolne krance clampow to warianty mobilne.
*
* `:is(body, .entry-content)` daje specyficznosc klasy - tyle trzeba, by
* przebic reguly Astry (`h2, .entry-content :where(h2)`), a jednoczesnie
* objac naglowki spoza tresci (naglowek i stopka Spectry). Wczesniej te same
* ustawienia siedzialy w "Dodatkowy CSS" Customizera i wymagaly `!important`.
*/
:is(body, .entry-content) :is(h1, h2, h3, h4, h5, h6) {
color: var(--ink, #16130f);
font-family: "Libre Franklin", system-ui, sans-serif;
font-weight: 700;
letter-spacing: 0;
text-wrap: balance;
}
:is(body, .entry-content) h1 {
font-size: clamp(36px, 6vw, 56px);
line-height: 1;
}
:is(body, .entry-content) h2 {
font-size: clamp(28px, 4.5vw, 40px);
line-height: 1.05;
}
:is(body, .entry-content) h3 {
font-size: clamp(22px, 3vw, 26px);
line-height: 1.15;
}
:is(body, .entry-content) h4 {
font-size: 22px;
line-height: 1.2;
}
/* Display: najwiekszy stopien, tylko dla hero. Klasa dopisywana w edytorze. */
:is(body, .entry-content) .is-style-display {
font-size: clamp(48px, 9vw, 88px);
line-height: 0.98;
}
/*
* Nadlinia sekcji - wersaliki 13px / 0.12em z Design Systemu. Powtorzony
* selektor `.gs-eyebrow` wyrownuje utilitke ze Style Guide Spectry (byla
* 15px) - zapisany tak samo jak tam, zeby wygrac kolejnoscia, nie sila.
*/
.sch-eyebrow,
[class].gs-eyebrow.gs-eyebrow {
display: block;
color: var(--muted, #6b6560);
font-size: 13px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.12em;
text-transform: uppercase;
}
/* Metadane: autor, data, czas trwania. */
.sch-meta {
color: var(--muted, #6b6560);
font-size: 14px;
font-weight: 500;
line-height: 1.5;
}
/*
* Cyrylica potrzebuje luzniejszego interlinia niz lacina - Design System
* zaklada 1.7-1.75 w tekscie i odrobine wiecej w naglowkach.
*/
html[lang="uk"] body {
line-height: 1.72;
}
html[lang="uk"] :is(body, .entry-content) :is(h3, h4) {
line-height: 1.25;
}
/* ==========================================================================
Linki i fokus
========================================================================== */
/*
* Linki w tresci sa atramentowe, a niebieski Lodzi niesie hover. Przyciski,
* ikony spolecznosciowe i pozycje menu maja wlasne stany - stad wyjatki.
* `:where()` nie dodaje specyficznosci, wiec ta lista niczego nie blokuje.
*
* Odstep kreski jak wszedzie indziej - `under` mierzy od dolu pudelka znaku,
* wiec podkreslenie Astry laduje tam, gdzie obramowania linkow warstwy
* projektu. Pelne uzasadnienie przy `.sch-about-link`.
*/
.entry-content a:where(:not(.wp-block-button__link, .ast-button, .wp-block-social-link-anchor, .sch-ministries-social-link, .wp-block-navigation-item__content)) {
color: var(--ink, #16130f);
text-underline-position: under;
text-underline-offset: 2px;
}
.entry-content a:where(:not(.wp-block-button__link, .ast-button, .wp-block-social-link-anchor, .sch-ministries-social-link, .wp-block-navigation-item__content)):hover {
color: var(--link-hover, #486ca0);
}
/* Jeden, zawsze widoczny pierscien fokusu poza modulem kazan. */
body:not(.sermons-design) :where(a, button, input, select, textarea, summary):focus-visible {
outline: 3px solid var(--link-hover, #486ca0);
outline-offset: 3px;
border-radius: var(--radius-field, 10px);
}
/* ==========================================================================
Przyciski
========================================================================== */
/*
* Kolory przyciskow blokowych zostaja w Customizerze Astry i w Style Guide
* Spectry, zeby wybor koloru w edytorze nadal dzialal. Tu pilnujemy miary z
* Design Systemu: 14/26 przy 15px (Astra dawala 16/32 przy 16px, Style Guide
* 16/32). Selektory powtarzaja tamte zapisy, wiec wygrywaja kolejnoscia.
*/
.wp-block-button .wp-block-button__link,
.wp-block-search .wp-block-search__button,
[class].gs-pill.gs-pill {
padding: 14px 26px;
font-size: 15px;
font-weight: 600;
line-height: 1;
}
/* Przyciski klasyczne - Astra daje im 4px, Design System pill. */
.ast-button,
.button,
input[type="submit"],
input[type="button"] {
border-radius: var(--radius-pill, 999px);
font-weight: 600;
}
/*
* Na ciemnych sekcjach (`gs-dark` ze Style Guide) kontrast sie odwraca:
* primary staje sie papierowy, a obrys secondary jasnieje.
*/
.gs-dark .wp-block-button__link {
background-color: var(--paper, #faf7f2);
color: var(--ink, #16130f);
}
/* Hover jak przycisk naglowka (i globalny hover Astry): zloto + atrament. */
.gs-dark .wp-block-button__link:hover {
background-color: var(--campus-tomaszow, #cdaa68);
color: var(--ink, #16130f);
}
.gs-dark .wp-block-button.is-style-outline > .wp-block-button__link {
border-color: rgba(250, 247, 242, 0.3);
background-color: transparent;
color: var(--paper, #faf7f2);
}
.gs-dark .wp-block-button.is-style-outline > .wp-block-button__link:hover {
border-color: var(--paper, #faf7f2);
color: var(--paper, #faf7f2);
}
/* Logo w naglowku - przeniesione z "Dodatkowy CSS" w Customizerze. */
.wp-block-site-logo img {
height: 60px;
}
/* Language switcher (Polylang block): segmented pill matching the header buttons. */
.wp-block-polylang-language-switcher {
display: inline-flex;
gap: 2px;
align-items: center;
box-sizing: border-box;
margin: 0;
padding: 4px;
border: 1px solid var(--border, #e4dccb);
border-radius: 999px;
background: var(--wp--preset--color--white, #fff);
list-style: none;
}
.wp-block-polylang-language-switcher:hover {
border-color: var(--muted, #6b6560);
}
.wp-block-polylang-language-switcher .lang-item {
margin: 0;
padding: 0;
list-style: none;
}
.wp-block-polylang-language-switcher .lang-item > a {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-width: 25px;
height: 25px;
padding: 0 7px;
border-radius: 999px;
color: var(--muted, #6b6560);
font-size: 0.8125rem;
font-weight: 600;
/* `normal` keeps the line box at the font's natural height, so the flex
centering is exact; `1` shrinks it below IBM Plex Sans's content box
and the glyphs land ~1px above centre. */
line-height: normal;
text-decoration: none;
}
.wp-block-polylang-language-switcher .lang-item > a:hover,
.wp-block-polylang-language-switcher .lang-item > a:focus-visible {
background: rgba(0, 0, 0, 0.05);
color: var(--wp--preset--color--sg-heading, #0e0b05);
text-decoration: none;
}
.wp-block-polylang-language-switcher .lang-item > a:focus-visible {
outline: 2px solid var(--wp--preset--color--primary, #cdaa68);
outline-offset: 2px;
}
.wp-block-polylang-language-switcher .current-lang > a,
.wp-block-polylang-language-switcher .current-lang > a:hover,
.wp-block-polylang-language-switcher .current-lang > a:focus-visible {
background: var(--wp--preset--color--sg-heading, #0e0b05);
color: var(--wp--preset--color--white, #fff);
}
/* Extra air after the inline menu, only where that menu is shown. */
@media (min-width: 901px) {
.spectra-header-template nav.wp-block-navigation {
margin-right: 12px;
}
}
/* ==========================================================================
Utilities: per-block responsive visibility
Add `hide-mobile` / `hide-desktop` in the block sidebar under
Advanced -> Additional CSS class(es). Works on any block, so blocks no
longer need a wrapper container just to be hidden.
The 900/901px boundary mirrors the Navigation block's own mobile-menu
breakpoint set in Spectra - keep both in sync when changing it.
========================================================================== */
@media (max-width: 900px) {
.hide-mobile {
display: none !important;
}
}
@media (min-width: 901px) {
.hide-desktop {
display: none !important;
}
}
/* ==========================================================================
Utilities: per-language visibility
Add `only-pl` / `only-en` / `only-uk` in the block sidebar under
Advanced -> Additional CSS class(es). Built for the shared mobile menu
overlay (a template part, so Polylang cannot translate it): fixed texts
like the call to action live there once per language, and the page shows
the one matching its `lang`. In the editor all variants stay visible,
which is what you want while editing.
========================================================================== */
.only-pl:not(:lang(pl)),
.only-en:not(:lang(en)),
.only-uk:not(:lang(uk)) {
display: none !important;
}
/* ==========================================================================
Site header
========================================================================== */
/* Boxed content band (1200px) like the design, with a gutter that never drops
below 24px. The background stays full-bleed. */
.spectra-header-template .spectra-is-root-container {
padding-inline: max(24px, calc((100% - 1200px) / 2));
}
/*
* Sticky bar with a frosted-glass backdrop once the page is scrolled
* (js/sticky-header.js toggles `sch-is-stuck`); at rest the header stays
* plain paper. Spectra prints `.spectra-header-template { position:
* relative; z-index: 999; }` in an inline block after this stylesheet,
* so these selectors carry the `header` tag to win regardless of order
* (the z-index stays Spectra's 999).
*/
/* Logged-in offset for the WP admin bar comes from js/sticky-header.js as
an inline `top`: it measures the real bar box, because extensions can
hide the bar while the `admin-bar` body class stays. */
header.spectra-header-template {
position: sticky;
top: 0;
transition: transform 0.25s ease;
}
/*
* Hide on the way down, reveal on the way up (js/sticky-header.js toggles
* `sch-is-hidden`).
*
* The transform exists only in the hidden state, and only while the mobile
* menu is closed: a transformed element becomes the containing block for
* its `position: fixed` descendants, and the menu overlay - which renders
* inside this header - is fixed. Same reason the frosted glass sits on a
* pseudo-element, and the reason there is no `will-change` here either.
*
* Logged in, the bar already starts at the admin bar's height (inline `top`
* from the script), so -100% parks it right under that bar, without a gap.
*/
header.spectra-header-template.sch-is-hidden:not(:has(.wp-block-navigation__responsive-container.is-menu-open)) {
transform: translateY(-100%);
}
@media (prefers-reduced-motion: reduce) {
header.spectra-header-template {
transition: none;
}
}
/* The template paints opaque paper on its containers (the root band and
the inner row wrapping the menu and the buttons) - they would cover the
glass, so they go transparent and the paper stays on `body`. The root
container carries `.wp-block-spectra-container` too, so one selector
covers both; buttons and pills keep their own backgrounds. */
header.spectra-header-template .wp-block-spectra-container {
background: transparent;
}
/*
* The glass lives on a pseudo-element on purpose: `backdrop-filter` turns
* its element into a containing block for fixed descendants, and the
* mobile menu overlay (position: fixed) renders inside the header.
* Blur strength echoes the campus hero card in church-sermons.
*
* The blur is on permanently: toggling backdrop-filter mid-scroll makes
* the browser build a fresh compositing layer, which pops in a beat
* late. The tint never drops below solid paper at rest either - a fast
* wheel fling used to shove content under the bar quicker than a
* fading tint could catch up, flashing the page through the glass. So
* the resting bar is opaque paper (the original look) and the stuck
* class merely eases it to 80% and draws the hairline, via colors
* rather than opacity (backdrop-filter and opacity do not fade
* together reliably).
*/
header.spectra-header-template::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
background: rgba(250, 247, 242, 1);
box-shadow: 0 1px 0 rgba(22, 19, 15, 0);
transition: background-color 0.25s ease, box-shadow 0.25s ease;
pointer-events: none;
}
header.spectra-header-template.sch-is-stuck::before {
background: rgba(250, 247, 242, 0.8);
box-shadow: 0 1px 0 rgba(22, 19, 15, 0.12);
}
/* No backdrop-filter support: nearly opaque paper instead of glass. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
header.spectra-header-template.sch-is-stuck::before {
background: rgba(250, 247, 242, 0.97);
}
}
/* Current page and hovered items are underlined in the top menu; a parent
also counts as current while one of its children is the page (the mobile
overlay overrides this below - its rows have their own states). */
.spectra-header-template .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.spectra-header-template .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content,
.spectra-header-template .wp-block-navigation .wp-block-navigation-item__content:hover,
.spectra-header-template .wp-block-navigation .wp-block-navigation-item__content:focus-visible {
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 6px;
}
/* Desktop dropdown: a paper card whose rows lead with the short dash of
the section kickers, mirroring the mobile overlay's submenu. Hover and
the current page stretch and darken the dash instead of underlining -
the selectors carry enough specificity to mute the top-menu underline.
Scoped away from `open-always`, which is the overlay's accordion. */
.spectra-header-template .wp-block-navigation li.has-child:not(.open-always) > ul.wp-block-navigation__submenu-container {
background: var(--paper, #faf7f2);
border: 1px solid var(--border, #e4dccb);
border-radius: 14px;
box-shadow: 0 12px 32px rgba(22, 19, 15, 0.1);
padding: 6px 18px;
min-width: 230px;
margin-top: 8px;
/* Centered under the parent item. */
left: 50%;
right: auto;
transform: translateX(-50%);
}
/* The visual gap above the card must still belong to it, or the pointer
falls out of the item on the way down and the dropdown flickers - an
invisible bridge spans the gap. */
.spectra-header-template .wp-block-navigation li.has-child:not(.open-always) > ul.wp-block-navigation__submenu-container::before {
content: "";
position: absolute;
top: -12px;
left: 0;
right: 0;
height: 12px;
}
.spectra-header-template .wp-block-navigation li.has-child:not(.open-always) > ul.wp-block-navigation__submenu-container .wp-block-navigation-item {
width: 100%;
border-top: 1px solid var(--border, #e4dccb);
}
.spectra-header-template .wp-block-navigation li.has-child:not(.open-always) > ul.wp-block-navigation__submenu-container .wp-block-navigation-item:first-child {
border-top: none;
}
.spectra-header-template .wp-block-navigation li.has-child:not(.open-always) > ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
display: flex;
align-items: center;
gap: 12px;
box-sizing: border-box;
width: 100%;
padding: 8px 0;
/* Same 15px as the top-menu items, so the card reads as part of the menu. */
font-size: 15px;
font-weight: 600;
text-decoration: none;
}
.spectra-header-template .wp-block-navigation li.has-child:not(.open-always) > ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.spectra-header-template .wp-block-navigation li.has-child:not(.open-always) > ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible,
.spectra-header-template .wp-block-navigation li.has-child:not(.open-always) > ul.wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
text-decoration: none;
}
.spectra-header-template .wp-block-navigation li.has-child:not(.open-always) > ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
content: "";
flex: none;
width: 18px;
height: 2px;
border-radius: 1px;
background: var(--muted, #6b6560);
transition: width 0.15s ease, background 0.15s ease;
}
.spectra-header-template .wp-block-navigation li.has-child:not(.open-always) > ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover::before,
.spectra-header-template .wp-block-navigation li.has-child:not(.open-always) > ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible::before,
.spectra-header-template .wp-block-navigation li.has-child:not(.open-always) > ul.wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content::before {
width: 28px;
background: var(--ink, #16130f);
}
@media (prefers-reduced-motion: reduce) {
.spectra-header-template .wp-block-navigation li.has-child:not(.open-always) > ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
transition: none;
}
}
@media (max-width: 900px) {
/*
* A 60px bar on phones; the desktop one stays 80px. That height comes
* from Spectra, which prints `.wp-block-spectra-container` four times
* over plus a `[data-spectra-id]` attribute (five class-level selectors)
* in an inline block after this stylesheet - and that id differs for
* every language header, so the override repeats a class of ours to
* out-specify it instead of keying on the id.
*
* Everything in the row clears the shorter bar: the logo is 44px below
* (as is the menu button), the campus pill 33px.
*/
header.spectra-header-template .spectra-is-root-container.spectra-is-root-container.spectra-is-root-container.spectra-is-root-container.spectra-is-root-container {
height: 60px;
}
/* Design puts the menu button last; the Navigation block sits earlier in
the markup because the desktop menu belongs before the campus pill. */
.spectra-header-template .wp-block-navigation {
order: 1;
}
/* Same logo size before and after opening the menu: the header row is a
nowrap flex row that shrinks the logo, while the overlay renders it at
its full height. Pinning the height equalises both. */
.spectra-header-template .wp-block-site-logo {
flex: none;
}
.spectra-header-template .wp-block-site-logo img {
width: auto;
height: 44px;
}
/* Polylang renders `nav > ul`, and block classes land on the `ul`, so
hiding the switcher leaves an empty `nav` holding ~67px of the row.
Keyed on the class, so the switcher inside the mobile menu overlay -
which carries no class and must stay visible - is not affected. */
nav:has(> .wp-block-polylang-language-switcher.hide-mobile) {
display: none;
}
}
/* Mobile menu button: filled square matching the header buttons.
No `display` here on purpose - WordPress hides this button above its own
breakpoint, so the icon is centred with padding instead of flex.
`flex: none` keeps the header flex row from squeezing it. */
.spectra-header-template .wp-block-navigation .wp-block-navigation__responsive-container-open {
flex: none;
box-sizing: border-box;
width: 44px;
min-width: 44px;
height: 44px;
padding: 10px;
border: 0;
border-radius: 14px;
background: var(--wp--preset--color--sg-heading, #0e0b05);
color: var(--wp--preset--color--white, #fff);
line-height: 0;
cursor: pointer;
}
.spectra-header-template .wp-block-navigation .wp-block-navigation__responsive-container-open svg {
display: block;
width: 24px;
height: 24px;
fill: currentColor;
}
.spectra-header-template .wp-block-navigation .wp-block-navigation__responsive-container-open:focus-visible {
outline: 2px solid var(--wp--preset--color--primary, #cdaa68);
outline-offset: 2px;
}
/* ==========================================================================
Mobile menu overlay (Navigation block overlay container)
========================================================================== */
/* Section labels: the campus heading comes from the shortcode, the remaining
ones from paragraphs with the `overlay-label` class added in the editor. */
.wp-block-navigation__overlay-container .overlay-label {
margin: 0;
color: var(--muted, #6b6560);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* A label belongs to the block below it, so the 24px block gap is too much. */
.wp-block-navigation__overlay-container .overlay-label + * {
margin-block-start: 4px;
}
/* Close button: bordered square in the top-right corner. */
.wp-block-navigation__overlay-container .wp-block-navigation-overlay-close {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid var(--border, #e4dccb);
border-radius: 14px;
background: var(--wp--preset--color--white, #fff);
color: var(--wp--preset--color--sg-heading, #0e0b05);
cursor: pointer;
}
.wp-block-navigation__overlay-container .wp-block-navigation-overlay-close svg {
width: 18px;
height: 18px;
}
/* Menu rows: full width with hairline separators. */
.wp-block-navigation__overlay-container .wp-block-navigation__container,
.wp-block-navigation__overlay-container .wp-block-page-list {
gap: 0;
align-items: stretch;
width: 100%;
}
.wp-block-navigation__overlay-container .wp-block-navigation-item {
width: 100%;
border-top: 1px solid var(--border, #e4dccb);
}
.wp-block-navigation__overlay-container .wp-block-navigation-item__content {
display: flex;
gap: 16px;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 18px 0;
color: var(--wp--preset--color--sg-heading, #0e0b05);
font-size: 1.5rem;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
}
/* The overlay rows are full-width tap targets, so no underline here - not
even for the current page or on hover. Specificity has to beat the
top-menu rule. */
.wp-block-navigation__overlay-container .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation__overlay-container .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content,
.wp-block-navigation__overlay-container .wp-block-navigation-item .wp-block-navigation-item__content,
.wp-block-navigation__overlay-container .wp-block-navigation-item .wp-block-navigation-item__content:hover,
.wp-block-navigation__overlay-container .wp-block-navigation-item .wp-block-navigation-item__content:focus-visible {
text-decoration: none;
}
/* Submenu rows. The overlay renders submenus expanded (`open-always`), and
core styles them as a floating dropdown with zeroed padding - here they
become lighter rows led by a short dash, echoing the section kickers on
the pages. Core's open-always reset carries five classes of specificity,
so these selectors mirror it and add the `li` type to win. */
.wp-block-navigation__overlay-container li.has-child.open-always {
display: block;
}
.wp-block-navigation__overlay-container li.has-child.open-always > ul.wp-block-navigation__submenu-container {
display: block;
position: static;
width: 100%;
min-width: 0;
margin: 0;
padding: 0;
border: none;
background: none;
}
.wp-block-navigation__overlay-container li.has-child.open-always .wp-block-navigation__submenu-container > .wp-block-navigation-item {
box-sizing: border-box;
width: 100%;
border-top: 1px solid var(--border, #e4dccb);
}
.wp-block-navigation__overlay-container li.has-child.open-always .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
display: flex;
gap: 16px;
align-items: center;
justify-content: flex-start;
width: 100%;
padding: 14px 0;
font-size: 1.125rem;
font-weight: 600;
}
/* The leading dash marks the hierarchy, like the section kickers. */
.wp-block-navigation__overlay-container li.has-child.open-always .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
content: "";
flex: none;
width: 18px;
height: 2px;
border-radius: 1px;
background: var(--muted, #6b6560);
}
/* The current page's row stretches and darkens its dash, echoing the
desktop dropdown - the overlay carries no underlines. */
.wp-block-navigation__overlay-container li.has-child.open-always .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content::before {
width: 28px;
background: var(--ink, #16130f);
}
/* A current top-level row gains the kicker dash in front of its label
(rows have no dash otherwise, so it reads as "you are here"). The row
drops space-between, or the dash and the label would split apart. */
.wp-block-navigation__overlay-container .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
justify-content: flex-start;
}
.wp-block-navigation__overlay-container .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::before {
content: "";
flex: none;
width: 24px;
height: 3px;
border-radius: 1.5px;
background: var(--ink, #16130f);
}
/* Accordion state, added by js/overlay-accordion.js. All selectors key on
the `sch-accordion` class that only the script sets, so with JS absent
the rules above keep the submenus expanded and reachable. The parent
label stays a link; the chevron button after it does the folding - the
only arrow in the overlay, so expandable rows stand out on their own. */
.wp-block-navigation__overlay-container li.has-child.open-always.sch-accordion {
display: flex;
/* Core lays open-always items out as a column, which would center the
label and drop the chevron underneath - the row direction puts the
label left, the chevron right and lets the submenu wrap below. The
item also inherits the menu's 24px grid gap, which would pad the row
from below even with the submenu folded shut. */
flex-direction: row;
flex-wrap: wrap;
gap: 0;
align-items: center;
}
.wp-block-navigation__overlay-container li.has-child.open-always.sch-accordion > .wp-block-navigation-item__content {
flex: 1;
width: auto;
}
.wp-block-navigation__overlay-container .sch-submenu-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin: 0;
padding: 0;
border: none;
/* Astra dresses every button as a pill with a soft shadow - the chevron
is bare, so both resets matter even with no background. */
border-radius: 0;
box-shadow: none;
background: none;
color: var(--muted, #6b6560);
cursor: pointer;
}
.wp-block-navigation__overlay-container .sch-submenu-toggle svg {
transition: transform 0.25s ease;
}
.wp-block-navigation__overlay-container li.sch-submenu-open .sch-submenu-toggle svg {
transform: rotate(180deg);
}
/* Folded submenus go visibility: hidden a beat after the height reaches
zero: keyboard focus can no longer land on the clipped links, and the
browser skips painting them entirely. Both states live in classes only -
the script writes no inline styles, so half-lost state can at worst
leave a submenu expanded, never an invisible clickable one. The open
height comes from a custom property the script measures; the 32em
fallback covers the menu ever being read without it. */
.wp-block-navigation__overlay-container li.has-child.open-always.sch-accordion > ul.wp-block-navigation__submenu-container {
flex-basis: 100%;
overflow: hidden;
transition: max-height 0.25s ease, visibility 0s 0.25s;
}
/* The folded state must outrank core's dropdown reveals: after a mouse
click the chevron keeps focus, the item gets :focus-within (and on
mouse devices :hover), and core then flips the list to overflow and
visibility visible - a zero-height list whose links paint and click on
top of the rows below. The :not() lifts this rule past those. */
.wp-block-navigation__overlay-container li.has-child.open-always.sch-accordion:not(.sch-submenu-open) > ul.wp-block-navigation__submenu-container {
max-height: 0;
overflow: hidden;
visibility: hidden;
}
.wp-block-navigation__overlay-container li.has-child.open-always.sch-accordion.sch-submenu-open > ul.wp-block-navigation__submenu-container {
max-height: var(--sch-submenu-height, 32em);
visibility: visible;
transition: max-height 0.25s ease;
}
@media (prefers-reduced-motion: reduce) {
.wp-block-navigation__overlay-container li.has-child.open-always.sch-accordion > ul.wp-block-navigation__submenu-container,
.wp-block-navigation__overlay-container li.has-child.open-always.sch-accordion.sch-submenu-open > ul.wp-block-navigation__submenu-container,
.wp-block-navigation__overlay-container .sch-submenu-toggle svg {
transition: none;
}
}
/* Language switcher: bigger tap targets than in the desktop header. */
.wp-block-navigation__overlay-container .wp-block-polylang-language-switcher {
padding: 5px;
}
.wp-block-navigation__overlay-container .wp-block-polylang-language-switcher .lang-item > a {
min-width: 44px;
height: 36px;
padding: 0 14px;
font-size: 0.9375rem;
}
/* Call to action spans the overlay width. */
.wp-block-navigation__overlay-container .wp-block-button,
.wp-block-navigation__overlay-container .wp-block-button__link {
width: 100%;
}
.wp-block-navigation__overlay-container .wp-block-button__link {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 16px 24px;
border-radius: 999px;
}
/* Social icons as outlined circles. */
.wp-block-navigation__overlay-container .wp-block-social-links {
gap: 12px;
justify-content: center;
}
.wp-block-navigation__overlay-container .wp-block-social-link {
margin: 0;
border: 1px solid var(--border, #e4dccb);
border-radius: 50%;
background: none;
}
.wp-block-navigation__overlay-container .wp-block-social-link .wp-block-social-link-anchor {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 44px;
height: 44px;
padding: 0;
color: var(--wp--preset--color--sg-heading, #0e0b05);
}
.wp-block-navigation__overlay-container .wp-block-social-link .wp-block-social-link-anchor svg {
width: 20px;
height: 20px;
}
/* ==========================================================================
Stopka
Ciemny pas na calej szerokosci, cztery kolumny w kontenerze 1200px i pasek
prawny pod spodem - wg widoku "Homepage v2" z projektu.
========================================================================== */
.sch-footer {
background: var(--ink, #16130f);
color: var(--paper, #faf7f2);
}
/*
* Ta sama miara co pasmo naglowka i kontener kazan: tresc ma 1200px, a 24px
* bocznego luzu wchodzi dopiero, gdy okno jest wezsze. `max-width` razem z
* paddingiem zwezilby tresc do 1152px i rozjechalby logo stopki z naglowkiem.
*/
.sch-footer-inner {
box-sizing: border-box;
padding: 56px max(24px, calc((100% - 1200px) / 2));
}
.sch-footer-grid {
display: grid;
gap: 32px;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* Kolumny skladaja sie po dwie, zanim zejda do jednej - cztery waskie
kolumny na tablecie lamalyby nazwy kampusow. */
@media (max-width: 900px) {
.sch-footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 520px) {
.sch-footer-grid {
gap: 28px;
grid-template-columns: 1fr;
}
.sch-footer-inner {
padding-block: 44px;
}
}
/* Znak firmowy jest monochromatyczny, wiec na ciemnym tle wymuszamy biel -
`brightness(0)` zeruje kolor, `invert(1)` odwraca go na papier. */
.sch-footer-logo {
display: block;
width: auto;
height: 58px;
filter: brightness(0) invert(1);
}
.sch-footer-wordmark {
color: var(--paper, #faf7f2);
font-family: "Libre Franklin", system-ui, sans-serif;
font-size: 22px;
font-weight: 700;
line-height: 1.1;
text-decoration: none;
}
.sch-footer-note {
/* 30ch, nie 26ch: kazde zdanie tagline'u ma zmiescic sie w jednej linii -
polskie "Zapraszamy w kazda niedziele." to 28 znakow. */
max-width: 30ch;
margin: 16px 0 0;
color: rgba(250, 247, 242, 0.66);
font-size: 14px;
line-height: 1.5;
}
/* Kazde zdanie tagline'u w osobnej linii - `
` w samym ciagu znakow byloby
w co najmniej jednym jezyku w zlym miejscu, wiec podzial robi PHP. */
.sch-footer-note span {
display: block;
}
/* Nazwa klasy nie wystarcza: globalna skala nadaje `h2` clamp(28-40px),
a ten naglowek ma 12px - stad selektor przez rodzica. */
.sch-footer .sch-footer-heading {
margin: 0 0 14px;
color: rgba(250, 247, 242, 0.5);
font-family: "IBM Plex Sans", system-ui, sans-serif;
font-size: 12px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.1em;
text-transform: uppercase;
}
/*
* Stopien i interlinia naleza do listy, nie do linku: wysokosc wiersza bierze
* sie ze strutu `li`, ktory bez tego dziedziczy 17px/1.62 z `body` i rozpycha
* rzedy o kilkanascie pikseli ponad projekt (14/1 + 10px odstepu).
*/
.sch-footer-list {
display: flex;
flex-direction: column;
gap: 10px;
margin: 0;
padding: 0;
font-size: 14px;
line-height: 1;
list-style: none;
}
.sch-footer-list li {
margin: 0;
line-height: 1;
}
.sch-footer-list a,
.sch-footer-email a {
color: rgba(250, 247, 242, 0.85);
font-size: 14px;
line-height: 1;
text-decoration: none;
}
/* Wyrozniona pozycja (np. "Wesprzyj nas") - klasa dopisywana pozycji menu. */
.sch-footer-list .is-strong > a {
color: var(--paper, #faf7f2);
font-weight: 600;
}
/*
* Podkreslenie tej pozycji rysuje obramowanie, nie `text-decoration`: linia
* biegnie przez cala szerokosc linku razem ze strzalka, bez przerwy na jej
* marginesie. Przezroczysta krawedz stoi tam od poczatku, wiec hover nie
* przesuwa ukladu. Tak samo jak linki "Czytaj wiecej" w projekcie.
*/
.sch-footer-list .is-strong > a {
display: inline-flex;
align-items: center;
padding-bottom: 3px;
border-bottom: 2px solid transparent;
}
.sch-footer-list .is-strong > a:hover,
.sch-footer-list .is-strong > a:focus-visible {
border-bottom-color: currentColor;
text-decoration: none;
}
/*
* Grubosc podana wprost: `auto` bierze ja z metryk fontu (~1px przy 14px, i
* grubiej przy wadze 600), wiec podkreslenie rozjezdzalo sie z krawedzia 2px
* wyroznionej pozycji. 2px to zarazem miara podkreslen w menu naglowka.
*/
.sch-footer-list li:not(.is-strong) a:hover,
.sch-footer-list li:not(.is-strong) a:focus-visible,
.sch-footer-email a:hover,
.sch-footer-email a:focus-visible {
color: var(--paper, #faf7f2);
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
.sch-footer-email {
margin: 0 0 10px;
font-size: 14px;
line-height: 1;
}
/* Kropka niesie kolor kampusu, nazwa zostaje czytelna - jak w chipie. */
.sch-footer-campuses a {
display: inline-flex;
gap: 9px;
align-items: center;
}
.sch-footer-dot {
flex: 0 0 auto;
width: 8px;
height: 8px;
border-radius: var(--radius-pill, 999px);
}
/*
* Socjale: kazdy kampus niesie wlasny Facebook i Instagram przy swoim
* wierszu (male kolka), a jedyny wspolny kanal - YouTube - stoi wiekszym
* kolkiem w kolumnie kontaktu. Puste pole profilu = brak ikonki.
*/
.sch-footer-campuses li {
display: flex;
align-items: center;
gap: 8px;
}
.sch-footer-social {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border: 1px solid rgba(250, 247, 242, 0.28);
border-radius: var(--radius-pill, 999px);
color: rgba(250, 247, 242, 0.85);
}
.sch-footer-social svg {
width: 12px;
height: 12px;
}
/* Waga bije regule hoveru listy (0-3-2), ktora podkresla zwykle linki -
na samotnej ikonie podkreslenie rysuje kreske pod kolkiem. */
.sch-footer-list li:not(.is-strong) a.sch-footer-social:hover,
.sch-footer-list li:not(.is-strong) a.sch-footer-social:focus-visible,
.sch-footer-social:hover,
.sch-footer-social:focus-visible {
border-color: var(--paper, #faf7f2);
color: var(--paper, #faf7f2);
background: rgba(250, 247, 242, 0.08);
text-decoration: none;
}
.sch-footer-socials {
display: flex;
gap: 10px;
margin-top: 14px;
}
.sch-footer-social-lg {
width: 38px;
height: 38px;
}
.sch-footer-social-lg svg {
width: 19px;
height: 19px;
}
.sch-footer-sep {
color: rgba(250, 247, 242, 0.45);
}
.sch-footer-legal {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid rgba(250, 247, 242, 0.12);
color: rgba(250, 247, 242, 0.55);
font-size: 13px;
line-height: 1.5;
}
.sch-footer-legal-list {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
}
/* Srodkowa kropka miedzy pozycjami prawnymi - dekoracja, wiec bez tresci
dla czytnikow ekranu. */
.sch-footer-legal-list li + li::before {
content: "·";
margin-right: 8px;
color: rgba(250, 247, 242, 0.45);
}
.sch-footer-legal-list a {
color: rgba(250, 247, 242, 0.55);
font-size: 13px;
text-decoration: none;
}
.sch-footer-legal-list a:hover,
.sch-footer-legal-list a:focus-visible {
color: var(--paper, #faf7f2);
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
/* Pasek prawny to samodzielne zamkniecie strony pod linia - po zawinieciu
do dwoch wierszy centruje sie, tak jak adres kampusu. Blok musi stac za
regulami bazowymi, bo media query nie podbija specyficznosci. */
@media (max-width: 520px) {
.sch-footer-legal {
justify-content: center;
text-align: center;
}
.sch-footer-legal-list {
justify-content: center;
}
}
/* Przycisk ustawien ciasteczek stoi w tym samym rzedzie co linki prawne,
wiec musi wygladac jak one. Podkreslenie tylko na hover - tak jak cala
stopka. */
.sch-footer-legal-list button {
padding: 0;
border: 0;
background: none;
color: rgba(250, 247, 242, 0.55);
font: inherit;
font-size: 13px;
cursor: pointer;
}
.sch-footer-legal-list button:hover,
.sch-footer-legal-list button:focus-visible {
color: var(--paper, #faf7f2);
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
/* Pierscien fokusu z fundamentow jest niebieski - na atramencie ginie. */
.sch-footer a:focus-visible,
.sch-footer button:focus-visible {
outline-color: var(--paper, #faf7f2);
}
/* ==========================================================================
Strona glowna
Sekcje wg widoku "Homepage v2": hero, pasek godzin, aktualna seria,
naglowki sekcji, wartosc miesiaca, kafle pomocy, karty kampusow, finalne
CTA. Tresc wchodzi wzorcami blokow i shortcode'ami - tu tylko wyglad.
========================================================================== */
/* --- Wspolne --- */
/*
* Astra podkresla linki tresci selektorem `.ast-single-post .entry-content a`
* (waga 0-2-1). Linki sekcji strony glownej maja wlasne stany - jedna regula
* o tej samej wadze, ladowana pozniej, wylacza podkreslenie w calosci;
* zamierzone podkreslenia (hover kafli pomocy) wygrywaja kolejnoscia nizej.
*/
.entry-content :is(.sch-times, .sch-series, .sch-campus-cards, .sch-section-head, .sch-help-tiles, .sch-sermons) a {
text-decoration: none;
}
/* Nadlinia z kreska - eyebrow hero i ciemnych sekcji. */
.sch-kicker {
display: flex;
gap: 11px;
align-items: center;
margin: 0;
font-size: 13px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.sch-kicker::before {
content: "";
flex: 0 0 auto;
width: 24px;
height: 2px;
background: currentColor;
}
/* Rytm sekcji na papierze. */
.sch-section {
margin-top: 72px;
}
/*
* Astra dokleja domyslny padding blokom najwyzszego poziomu w tresci
* (`.entry-content > .wp-block-group/.wp-block-cover/.wp-block-columns`,
* 100px na desktopie) - nasz rytm niesie margines sekcji, wiec ten padding
* podwajal odstepy, a boczny zwezal sekcje wzgledem reszty strony i tresc
* "Ostatnich kazan" czy "Co przed nami" nie licowala z hero. Ta sama waga
* (0-2-0), pozniejsze ladowanie - wygrywa.
*/
.entry-content > :is(.sch-section, .sch-help-tiles, .sch-hero, .sch-closing) {
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
/*
* Boczny luz sekcji. Kontener Astry (1240px) nie niesie zadnego paddingu,
* a rdzen przycina tresc sekcji do 1200px tylko centrowaniem - ponizej
* ~1240px tresc dotykala krawedzi ekranu. Sekcja rozlewa sie wiec na caly
* kontener i sama niesie 24px luzu - tyle, ile minimum hero.
*/
.entry-content > .sch-section {
max-width: none;
padding-right: 24px;
padding-left: 24px;
}
/*
* Na szerokich ekranach kontener stoi w miejscu ((100vw - 1240px) / 2 od
* krawedzi), a gutter hero rosnie jako (100vw - 1200px) / 2 - roznica to
* stale 20px. Dzieki temu tresc sekcji dalej licuje z tekstem hero.
*/
@media (min-width: 1264px) {
.entry-content > .sch-section {
padding-right: 20px;
padding-left: 20px;
}
}
/* Gutter mobilny sekcji jak w hero i pasku godzin (22px). Wymaga ukladu
strony bez paddingu kontenera (szablon page-builder, jak strona glowna) -
na zwyklym kontenerze Astra doklada wlasny luz i odstepy sie sumuja. */
@media (max-width: 720px) {
.entry-content > .sch-section {
padding-right: 22px;
padding-left: 22px;
}
}
/*
* Rytm 72px jest z projektu desktopowego - na telefonie kazdy taki odstep to
* blisko pol ekranu przewijania, a strona ma dziewiec sekcji. Reguly nie
* zawezam do strony glownej: jeden rytm mobilny na calym serwisie, a strony
* z wlasnym nadpisaniem (motto "O nas") dalej licza po swojemu.
*/
@media (max-width: 720px) {
/* Pas CTA po pelnym selektorze: sam `.sch-closing` niesie swoje 72px
nizej w arkuszu, a przy tej samej wadze wygrywa regula pozniejsza. */
.sch-section,
.entry-content > .sch-closing {
margin-top: 48px;
}
/* Cover niesie min-height w atrybucie style - stad !important, jak w hero. */
.sch-closing {
min-height: 420px !important;
}
}
/*
* Pionowy rytm zwyklych podstron (polityki, przyszle strony tekstowe).
* Gora: 26px pod belka przy kazdej szerokosci - tyle, ile daje
* .sermons-archive-header (padding 26px 0 34px) nad pierwsza trescia
* widokow kazan; Astra dawala 60px i to dopiero od 1200px wzwyz.
* Dol: ponizej 1200px Astra nie daje nic i tresc kleila sie do stopki;
* od 1200px jej 60px zostaje. Wykluczenia: strona glowna (przezroczysty
* naglowek, konczy sie pelnym pasem CTA) i widoki modulu kazan
* (sermons.css niesie wlasny rytm z padding-bottom 64px). Na szablonie
* page-builder mocniejsza regula Astry dalej zeruje marginesy - celowo,
* tam odstepami rzadzi tresc strony.
*/
body:not(.ast-theme-transparent-header):not(.sermons-design) #primary {
margin-top: 26px;
}
@media (max-width: 1199px) {
body:not(.ast-theme-transparent-header):not(.sermons-design) #primary {
margin-bottom: 44px;
}
}
/* Naglowek sekcji: tytul po lewej, pigulka "Zobacz wszystkie" po prawej. */
.sch-section-head {
margin-bottom: 26px;
}
/*
* Na telefonach dluzszy tytul ("Ostatnie kazania") lamal sie pod pigulke,
* a krotszy ("Co przed nami") jeszcze miescil sie obok - dwa rozne uklady
* na jednej stronie. Ponizej 720px pigulka zawsze schodzi pod tytul.
* `.entry-content` w selektorze: reguly layoutu rdzenia (0-1-0) laduja sie
* po arkuszu motywu, sama klasa by ich nie przebila.
*/
@media (max-width: 720px) {
.entry-content .sch-section-head {
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
}
.sch-section-more {
margin: 0;
}
.sch-section-more a {
display: inline-block;
padding: 12px 22px;
border: 1.5px solid rgba(22, 19, 15, 0.2);
border-radius: var(--radius-pill, 999px);
color: var(--ink, #16130f);
font-size: 14px;
font-weight: 600;
line-height: 1;
text-decoration: none;
white-space: nowrap;
}
.sch-section-more a:hover,
.sch-section-more a:focus-visible {
border-color: var(--ink, #16130f);
color: var(--ink, #16130f);
}
/* --- Hero --- */
/* Tekst hero siedzi na dole zdjecia, na szerokosc tresci. */
.sch-hero {
margin-top: 0;
}
/*
* Rdzen daje coverom wewnetrzny padding 1em - dokladal sie do paddingu
* kontenera tresci i tekst hero nie licowal z sekcjami nizej (najlepiej
* widac na mobile wobec wierszy godzin). Caly luz niesie inner container.
*/
.sch-hero.wp-block-cover,
.sch-closing.wp-block-cover,
.sch-help-tile.wp-block-cover {
padding: 0;
}
.sch-hero .wp-block-cover__inner-container {
max-width: none;
padding: 0 max(24px, calc((100% - 1200px) / 2)) 40px;
}
/*
* Astra koloruje kazdy akapit w coverze regula
* `body .wp-block-cover:not(.has-text-color.has-link-color) p` (0-3-2) -
* selektor powtarza te wage, a pozniejsze ladowanie rozstrzyga.
*/
body .wp-block-cover.sch-hero p.sch-kicker {
color: var(--paper, #faf7f2);
}
/*
* Gradient konczy sie pelnym atramentem, bo zaraz pod hero lezy ciemny pas
* godzin nabozenstw - plynne zejscie zamiast szwu. `!important` celowo:
* cover niesie gradient w atrybucie style, inaczej go nie przebijemy.
*
* Gora kadru jest niemal czysta - naglowek strony lezy nad hero, nie na nim,
* wiec nie ma tam czego chronic. Rampa rusza dopiero ok. 36%, zeby zdjecie
* oddychalo jak najdluzej.
*
* Stopy sa mierzone, nie wybrane na oko: kicker startuje na 52% wysokosci,
* tytul na 57%, a zdjecie ma pod nimi przepalone jasne plamy (26% pikseli
* pod tytulem > 114/255). Przy tych wartosciach najgorszy piksel daje 3,9:1
* pod tytulem (duzy tekst, prog 3:1), a kicker trzyma 4,7:1 w 1. percentylu.
* Kazde dalsze rozjasnienie rampy schodzi ponizej normy - luz jest tylko
* w gornej czesci kadru.
*/
.sch-hero .wp-block-cover__background {
background: linear-gradient(180deg, rgba(22, 19, 15, 0.1) 0%, rgba(22, 19, 15, 0.02) 36%, rgba(22, 19, 15, 0.58) 58%, rgba(22, 19, 15, 0.88) 78%, #16130f 92%) !important;
/* Cover z dimRatio 40 wygasza nakladke do 40% - gradient nigdy nie
osiagal barwy pasa pod hero. Sila lezy w samych stopach gradientu. */
opacity: 1;
}
/* Chip kampusu nad kickerem - stan po wyborze kampusu. */
.sch-hero .sch-hero-chip {
margin: 0 0 18px;
}
.sch-chip-solid {
display: inline-flex;
align-items: center;
padding: 8px 14px;
border-radius: var(--radius-pill, 999px);
font-size: 13px;
font-weight: 600;
line-height: 1;
}
.sch-hero .sch-hero-title {
max-width: 19ch;
margin: 16px 0 0;
color: var(--paper, #faf7f2);
font-size: clamp(38px, 4.8vw, 72px);
font-weight: 400;
line-height: 1.04;
}
.sch-hero .sch-hero-title strong {
font-weight: 700;
}
.sch-hero .sch-hero-actions {
margin-top: 30px;
}
/* Przycisk papierowy - primary na ciemnych tlach. */
.sch-button-paper .wp-block-button__link {
background-color: var(--paper, #faf7f2);
color: var(--ink, #16130f);
}
.sch-button-paper .wp-block-button__link:hover {
background-color: var(--campus-tomaszow, #cdaa68);
color: var(--ink, #16130f);
}
/*
* "Ogladaj na zywo": obrys + trojkat odtwarzania. Astra styluje outline'y
* regula o wadze 0-5-0 (`.wp-block-buttons .wp-block-button.is-style-outline
* > .wp-block-button__link:not(.has-text-color)`) - zlote litery na zdjeciu.
* Selektor odtwarza te wage, kolejnosc ladowania rozstrzyga.
*/
.wp-block-buttons .wp-block-button.sch-button-live > .wp-block-button__link:not(.has-text-color) {
display: inline-flex;
gap: 9px;
align-items: center;
/* Wymiary tez tutaj: reguly outline Astry (ta sama waga 0-5-0) daja wlasny
padding i stopien - przycisk wychodzil 50px przy 43px sasiada. Padding
pomniejszony o obrys, zeby oba przyciski mialy rowna wysokosc. */
box-sizing: border-box;
padding: 12.5px 24.5px;
border-width: 1.5px;
border-style: solid;
border-color: rgba(250, 247, 242, 0.45);
background-color: rgba(250, 247, 242, 0.12);
color: var(--paper, #faf7f2);
font-size: 15px;
line-height: 1;
}
.sch-button-live .wp-block-button__link::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 6px 0 6px 10px;
border-color: transparent transparent transparent currentColor;
}
/* W oknie transmisji trojkat odtwarzania ustepuje pulsujacej kropce. */
.sch-button-live.sch-is-live .wp-block-button__link::before {
width: 9px;
height: 9px;
border: 0;
border-radius: var(--radius-pill, 999px);
background: #e5484d;
animation: sch-live-pulse 1.6s ease-in-out infinite;
}
@keyframes sch-live-pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.35;
}
}
@media (prefers-reduced-motion: reduce) {
.sch-button-live.sch-is-live .wp-block-button__link::before {
animation: none;
}
}
.wp-block-buttons .wp-block-button.sch-button-live > .wp-block-button__link:not(.has-text-color):hover,
.wp-block-buttons .wp-block-button.sch-button-live > .wp-block-button__link:not(.has-text-color):focus-visible {
border-color: var(--paper, #faf7f2);
background-color: rgba(250, 247, 242, 0.2);
color: var(--paper, #faf7f2);
}
/* Hero na mobile wg widoku "Strona glowna mobile v2": nizszy kadr, H1 32px,
przyciski w kolumnie na pelna szerokosc. */
@media (max-width: 720px) {
/* Cover niesie min-height w atrybucie style - stad !important. */
.sch-hero {
min-height: 540px !important;
}
/*
* Wezszy kadr wycina z tego samego zdjecia jasniejszy fragment - tekst
* startuje na tej samej wysokosci co na desktopie (51%), ale ma pod soba
* wiecej swiatla. Desktopowa rampa dawalaby tu 2,5:1 na kickerze, wiec
* mobile dostaje wlasna: te sama lekka gore, tylko szybsze zejscie.
*/
.sch-hero .wp-block-cover__background {
background: linear-gradient(180deg, rgba(22, 19, 15, 0.1) 0%, rgba(22, 19, 15, 0.02) 30%, rgba(22, 19, 15, 0.62) 52%, rgba(22, 19, 15, 0.9) 74%, #16130f 90%) !important;
}
.sch-hero .wp-block-cover__inner-container {
padding: 0 22px 26px;
}
.sch-hero .sch-kicker {
font-size: 11px;
letter-spacing: 0.13em;
}
.sch-hero .sch-kicker::before {
width: 20px;
}
.sch-hero .sch-hero-title {
font-size: 32px;
line-height: 1.12;
}
.sch-hero .sch-hero-actions {
gap: 10px;
flex-direction: column;
margin-top: 22px;
}
.sch-hero .sch-hero-actions .wp-block-button {
width: 100%;
}
.sch-hero .sch-hero-actions .wp-block-button__link {
display: inline-flex;
justify-content: center;
box-sizing: border-box;
width: 100%;
padding: 15px 22px;
font-size: 14.5px;
}
/* Przycisk transmisji trzyma wage 0-5-0 - wymiary mobilne musza ja
powtorzyc, korekta na obrys jak wyzej. */
.wp-block-buttons .wp-block-button.sch-button-live > .wp-block-button__link:not(.has-text-color) {
justify-content: center;
width: 100%;
padding: 13.5px 20.5px;
font-size: 14.5px;
}
}
/*
* Telefon trzymany w poziomie. Kadry hero maja stale wysokosci z projektu
* (760px na stronie glownej, 420-560px na podstronach), a okno lezacego
* telefonu ma tam 320-430px - zdjecie zajmowalo dwa ekrany, a tekst, ktory
* siedzi na dole kadru, startowal ok. 500px pod zgieciem. Kadr schodzi wiec
* do wysokosci okna bez paska naglowka: tytul i przyciski wracaja na
* pierwszy ekran, a sekcje pod hero zaczynaja sie zaraz za nimi.
*
* `svh` to wysokosc okna przy rozwinietych paskach przegladarki - w poziomie
* sa widoczne praktycznie zawsze, wiec to ta mniejsza, pewna wartosc;
* wczesniejszy `vh` zostaje dla przegladarek bez `svh`. `--sticky-offset`
* niesie zmierzona wysokosc paska (razem z paskiem admina, gdy ten jest
* przyklejony), a `!important` jak wyzej: cover niesie min-height
* w atrybucie style.
*
* Blok stoi za regulami mobilnymi, bo telefon w poziomie bywa wezszy niz
* 720px (np. 568px) i lapie sie tez na tamten zakres - przy tej samej wadze
* rozstrzyga kolejnosc. Prog sama wysokoscia, jak blok ukladu poziomego
* nizej: zadne okno w pionie nie ma 520px wysokosci, a nisko rozciagniete
* okno na desktopie ma dokladnie ten sam problem co telefon.
*/
@media (max-height: 520px) {
.sch-hero {
min-height: calc(100vh - var(--sticky-offset, 80px)) !important;
min-height: calc(100svh - var(--sticky-offset, 80px)) !important;
}
/*
* Rampa gradientu jest liczona w procentach kadru, wiec w plaskim kadrze
* zaczyna sie ponizej tekstu: kicker stoi tu na 26% wysokosci i wychodzil
* na przeswietlonym ekranie sceny z kontrastem 1,2:1. Ta rampa ciemnieje
* od razu - na zdjeciu strony glownej kicker trzyma 5,0:1 w najgorszym
* pikselu, a tytul 8,8:1 (prog 4,5:1 i 3:1).
*/
.sch-hero .wp-block-cover__background {
background: linear-gradient(180deg, rgba(22, 19, 15, 0.22) 0%, rgba(22, 19, 15, 0.46) 16%, rgba(22, 19, 15, 0.8) 42%, rgba(22, 19, 15, 0.93) 70%, #16130f 92%) !important;
}
.sch-hero .wp-block-cover__inner-container {
padding-bottom: 26px;
}
.sch-hero .sch-hero-title {
font-size: clamp(30px, 3.6vw, 40px);
}
/* Przyciski wracaja obok siebie: szerokosci starcza nawet przy 568px,
a w plaskim kadrze kazdy wiersz mniej to kilkanascie procent ekranu.
Przycisk transmisji powtarza wage 0-5-0 Astry, jak wyzej. */
.sch-hero .sch-hero-actions {
flex-direction: row;
margin-top: 20px;
}
.sch-hero .sch-hero-actions .wp-block-button,
.sch-hero .sch-hero-actions .wp-block-button__link,
.wp-block-buttons .wp-block-button.sch-button-live > .wp-block-button__link:not(.has-text-color) {
width: auto;
}
}
/* --- Pasek godzin nabozenstw --- */
.sch-times {
background: var(--ink, #16130f);
color: var(--paper, #faf7f2);
}
.sch-times-inner {
box-sizing: border-box;
padding: 0 max(24px, calc((100% - 1200px) / 2));
}
/*
* Kicker nazywajacy pas: te same litery co nad naglowkiem hero, tylko
* przygaszone, zeby nie konkurowal z miastami. Kreska hairline i odstepy
* licuja z separatorami kolumn i z .sch-times-note.
*
* `margin: 0` musi stac tutaj, nie wystarczy to z `.sch-kicker` (0-1-0):
* Astra dokleja akapitom tresci `.entry-content p { margin-bottom: 1.6em }`
* (0-1-1) i pod kreska zostawal odstep. Dwie klasy (0-2-0) to przebijaja.
*/
.sch-times .sch-times-label {
margin: 0;
padding: 18px 0 14px;
border-bottom: 1px solid rgba(250, 247, 242, 0.14);
color: rgba(250, 247, 242, 0.62);
}
.sch-times-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sch-times .sch-times-item {
display: flex;
gap: 12px;
align-items: center;
justify-content: center;
padding: 26px 10px;
color: var(--paper, #faf7f2);
text-decoration: none;
transition: background 0.18s ease;
}
.sch-times-item + .sch-times-item {
border-left: 1px solid rgba(250, 247, 242, 0.14);
}
.sch-times .sch-times-item:hover,
.sch-times .sch-times-item:focus-visible {
background: rgba(250, 247, 242, 0.08);
color: var(--paper, #faf7f2);
}
.sch-times-dot {
flex: 0 0 auto;
width: 12px;
height: 12px;
border-radius: var(--radius-pill, 999px);
}
.sch-times-name {
font-size: 18px;
font-weight: 600;
line-height: 1;
}
.sch-times-hour,
.sch-times-when {
font-family: "Libre Franklin", system-ui, sans-serif;
font-size: 18px;
font-weight: 700;
line-height: 1;
}
/* Wariant z wybranym kampusem: jeden wiersz z adresem i dojazdem. */
.sch-times-single {
display: flex;
gap: 16px;
flex-wrap: wrap;
align-items: center;
justify-content: center;
padding: 26px 10px;
}
.sch-times-address {
color: rgba(250, 247, 242, 0.78);
font-size: 18px;
line-height: 1.4;
text-align: center;
}
.sch-times .sch-times-route {
padding-bottom: 5px;
border-bottom: 2px solid rgba(250, 247, 242, 0.5);
color: var(--paper, #faf7f2);
font-size: 18px;
font-weight: 600;
line-height: 1;
text-decoration: none;
}
/* Globalny hover linkow tresci niesie niebieski Lodzi - na ciemnym pasie
link zostaje papierowy, a odzewem jest domkniecie kreski do pelnego
papieru. Ta sama para stanow co przy dojazdach i mailach. */
.sch-times .sch-times-route:hover,
.sch-times .sch-times-route:focus-visible {
border-bottom-color: var(--paper, #faf7f2);
color: var(--paper, #faf7f2);
}
@media (max-width: 720px) {
.sch-times-inner {
padding: 6px 22px 14px;
}
.sch-times .sch-times-label {
padding: 14px 0 12px;
}
.sch-times-grid {
grid-template-columns: 1fr;
}
.sch-times .sch-times-item {
gap: 11px;
justify-content: flex-start;
padding: 14px 0;
}
.sch-times-item + .sch-times-item {
border-top: 1px solid rgba(250, 247, 242, 0.14);
border-left: 0;
}
.sch-times-dot {
width: 10px;
height: 10px;
}
/* Nazwa rozpycha wiersz - godzina i strzalka laduja przy prawej. */
.sch-times-name {
flex: 1;
}
.sch-times .sch-times-item::after {
content: "";
flex: 0 0 auto;
width: 16px;
height: 9px;
background-color: rgba(250, 247, 242, 0.6);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10' fill='none' stroke='%23000' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.8 5H16.5M12.6 1.3 16.9 5 12.6 8.7'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10' fill='none' stroke='%23000' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.8 5H16.5M12.6 1.3 16.9 5 12.6 8.7'/%3E%3C/svg%3E") no-repeat center / contain;
}
}
/* --- Aktualna seria kazan --- */
.sch-series {
background: var(--ink, #16130f);
color: var(--paper, #faf7f2);
}
/* Wyrownanie do gory (nie centrowanie): rozwiniecie opisu doklada tresc
w dol, a grafika stoi w miejscu zamiast zjezdzac za srodkiem kolumny. */
.sch-series-inner {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 40px;
align-items: start;
box-sizing: border-box;
padding: 72px max(24px, calc((100% - 1200px) / 2));
}
.sch-series-copy .sch-kicker {
color: var(--paper, #faf7f2);
}
/* Rozmiar i interlinia jak panel "Aktualna seria" na stronie serii kazan
(.sermons-current-series-title) - ta sama seria mowi wszedzie tym samym
glosem; waga i kroj juz wspolne (naglowki motywu: Libre Franklin 700). */
.sch-series .sch-series-title {
margin: 16px 0 0;
color: var(--paper, #faf7f2);
font-size: clamp(32px, 4vw, 48px);
line-height: 1;
}
/*
* Opis serii przyciety do trzech wierszy; "Czytaj wiecej" go rozwija.
* Prefiks rodzica: bez niego dolny margines akapitow Astry (0-1-1) wygrywal
* i odsuwal przycisk. JS animuje max-height - line-clamp sam w sobie nie
* podlega przejsciom.
*/
.sch-series .sch-series-desc {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
max-width: 54ch;
margin: 18px 0 0;
overflow: hidden;
color: rgba(250, 247, 242, 0.82);
font-size: 16px;
line-height: 1.6;
transition: max-height 0.45s cubic-bezier(0.2, 0.6, 0.2, 1);
}
/*
* Opis niesie akapity z wpautop (jak na stronie serii). Marginesy pod
* kontrola: dolny margines akapitow Astry falszowalby pomiar wysokosci
* w JS i odsuwal przycisk - odstep robi wylacznie gorny margines
* kolejnego akapitu. Clamp liczy wersy przez granice akapitow, bo
* -webkit-box uklada je jako swoje elementy.
*/
.sch-series .sch-series-desc p {
margin: 0;
}
.sch-series .sch-series-desc p + p {
margin-top: 0.9em;
}
/* Rozwiniecie zdejmuje clamp; overflow zostaje ukryty, zeby max-height
z animacji przycinal tekst w trakcie ruchu. */
.sch-series .sch-series-desc.is-expanded {
display: block;
-webkit-line-clamp: unset;
line-clamp: unset;
overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
.sch-series .sch-series-desc {
transition: none;
}
}
/* Przycisk rozwijania - tekstowy, podkreslony jak w projekcie. JS pokazuje
go tylko wtedy, gdy opis faktycznie wystaje poza trzy wersy. */
.sch-series .sch-series-toggle {
align-self: flex-start;
margin-top: 6px;
padding: 4px 0;
border: 0;
background: none;
color: var(--paper, #faf7f2);
font-family: "IBM Plex Sans", system-ui, sans-serif;
font-size: 14px;
font-weight: 600;
line-height: 1;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
cursor: pointer;
}
.sch-series-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
align-items: center;
margin-top: 24px;
}
.sch-series .sch-series-cta {
padding: 15px 28px;
border-radius: var(--radius-pill, 999px);
background: var(--paper, #faf7f2);
color: var(--ink, #16130f);
font-size: 15px;
font-weight: 600;
line-height: 1;
text-decoration: none;
}
.sch-series .sch-series-cta:hover,
.sch-series .sch-series-cta:focus-visible {
background: var(--campus-tomaszow, #cdaa68);
color: var(--ink, #16130f);
}
.sch-series-count {
color: rgba(250, 247, 242, 0.7);
font-size: 14px;
font-weight: 500;
line-height: 1;
}
.sch-series-media img {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 16px;
object-fit: cover;
}
@media (max-width: 860px) {
.sch-series-inner {
grid-template-columns: 1fr;
gap: 28px;
padding-top: 56px;
padding-bottom: 56px;
}
/* Grafika nad tekstem jak na stronie serii (.sermons-series-intro-image):
rozwijany opis rosnie pod nia i niczym nie rusza. */
.sch-series-media {
order: -1;
}
}
/* --- Wartosc miesiaca --- */
.sch-value {
margin-top: 72px;
background: var(--subtle, #f6eedd);
}
/* Pion 72px jak w `.sch-series-inner`, czyli w blizniaczym ukladzie
"grafika obok tekstu". Wczesniej stalo tu 32px - najciasniejszy pas w
motywie - i cien grafiki dobijal do krawedzi piaskowego pola.
Tu `max()` z procentem liczy sie poprawnie - inaczej niz w
`.sch-about-mission`, gdzie padding siedzi na samym elemencie `alignfull`
i procent odnosi sie do jego kontenera (1240px). Padding stoi na dziecku
juz rozciagnietej sekcji, wiec `100%` to szerokosc pasa i miara wychodzi
na 1200px. */
.sch-value-inner {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 40px;
align-items: center;
box-sizing: border-box;
padding: 72px max(24px, calc((100% - 1200px) / 2));
}
/*
* Grafiki wartosci miesiaca maja zawsze jasne, cieple tlo (#fbf1e9 we
* wrzesniu 2026), wiec bez obrysu rozplywaja sie w piaskowym pasie. Obrys
* idzie przez `box-shadow`, nie `border`: `![]()
` ma tu wymiary i border
* zjadalby szerokosc zamiast stanac obok niej - ta sama sztuczka co przy
* zdjeciach mowcow. Stamtad tez krycie 0.16 zamiast kartowego 0.1, bo gdy
* po obu stronach linii jest cieple jasne tlo, 0.1 znika. Cien unoszacy jak
* przy grafice serii kazan, czyli w blizniaczym ukladzie "duza grafika obok
* tekstu".
*/
.sch-value-media img {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 16px;
object-fit: cover;
box-shadow:
0 0 0 1px rgba(22, 19, 15, 0.16),
0 26px 60px -38px rgba(22, 19, 15, 0.5);
}
.sch-value .sch-kicker {
color: var(--ink, #16130f);
}
.sch-value .sch-value-title {
margin: 14px 0 0;
font-size: clamp(40px, 5.4vw, 72px);
line-height: 0.96;
}
.sch-value .sch-value-sentence {
max-width: 32ch;
margin: 16px 0 0;
color: var(--text, #4a4640);
font-size: 18px;
line-height: 1.55;
}
@media (max-width: 860px) {
.sch-value-inner {
grid-template-columns: 1fr;
gap: 24px;
padding-top: 56px;
padding-bottom: 56px;
}
/* Jawna kolejnosc jak przy `.sch-series-media` - grafika nad tekstem
niezaleznie od tego, co stoi pierwsze w DOM. */
.sch-value-media {
order: -1;
}
}
/* --- Kafle "Jak mozemy pomoc?" --- */
.sch-help {
margin-bottom: 26px;
}
.sch-help-tiles {
gap: 0;
margin-top: 0;
}
.sch-help-tiles .wp-block-column {
margin: 0;
}
/*
* Astra ponizej 544px rozsuwa kolumny regula
* `.wp-block-columns .wp-block-column:not(:last-child)` (0-3-0) - samo
* `margin: 0` wyzej (0-2-0) jej nie przebija i miedzy kaflami zostawal
* 20px pas. Kafle maja lezec jeden pod drugim bez szpar.
*/
.sch-help-tiles .wp-block-column:not(:last-child) {
margin-bottom: 0;
}
.sch-help-tile {
aspect-ratio: 4 / 3;
min-height: 0;
/* Zoomowane zdjecie nie moze wystawac poza kafel. */
overflow: hidden;
}
/*
* Inner na caly kafel (zamiast flexowego wyrownania covera): dzieki temu
* ::before linku rozciaga klikalnosc na caly kafel - w projekcie kafel
* jest jednym wielkim linkiem, nie samym podpisem.
*/
.sch-help-tile .wp-block-cover__inner-container {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
gap: 8px;
padding: 0 36px 30px;
}
/*
* Zoom zdjecia po najechaniu - krzywa i czas z projektu. Spoczynkowe
* scale(1.01) to nie ozdoba: na starcie i koncu animacji przegladarka
* wynosi zdjecie na osobna warstwe kompozycji i zaokragla jej szerokosc do
* pelnych pikseli, a kafle maja ulamkowe szerokosci (1/3 kontenera) - przy
* zaokragleniu w dol na krawedzi migal ~1px tla. Lekki nadmiar sprawia, ze
* linia ciecia zawsze trafia w zdjecie.
*/
.sch-help-tile .wp-block-cover__image-background {
transform: scale(1.01);
transition: transform 700ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
.sch-help-tile:hover .wp-block-cover__image-background,
.sch-help-tile:focus-within .wp-block-cover__image-background {
transform: scale(1.06);
}
/*
* Cover z dimRatio 30 wygasza nakladke do 30% - gradient projektu (i lezace
* na nim znikajace przyciemnienie) ma dzialac w pelnej sile. Jak w hero,
* tyle ze tutaj span niesie klase liczbowa `has-background-dim-30`, ktorej
* regula rdzenia ma wieksza wage - selektor musi ja powtorzyc.
*/
.sch-help-tile .wp-block-cover__background.has-background-dim.has-background-dim-30 {
opacity: 1;
}
/*
* Drugie, znikajace przyciemnienie z projektu (helpDim): pseudoelement na
* spanie tla covera, wiec lezy nad zdjeciem i bazowym gradientem, a pod
* podpisem (inner container niesie z-index covera).
*/
.sch-help-tile .wp-block-cover__background::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(22, 19, 15, 0.04) 40%, rgba(22, 19, 15, 0.52) 100%);
transition: opacity 450ms cubic-bezier(0.3, 0.6, 0.3, 1);
}
.sch-help-tile:hover .wp-block-cover__background::after,
.sch-help-tile:focus-within .wp-block-cover__background::after {
opacity: 0;
}
.sch-help-caption {
margin: 0;
}
.sch-help-caption a {
color: var(--paper, #faf7f2);
font-size: clamp(26px, 2.2vw, 36px);
line-height: 1.05;
text-decoration: none;
}
/* Hover kafla mowi wszystko (zoom, swiatlo, strzalka) - bez podkreslenia. */
.sch-help-caption a:hover,
.sch-help-caption a:focus-visible {
color: var(--paper, #faf7f2);
text-decoration: none;
}
/* Klikalnosc na caly kafel. */
.sch-help-caption a::before {
content: "";
position: absolute;
inset: 0;
}
/*
* Jedno zdanie pod podpisem. Lezy pod ::before linku, wiec klik w opis to
* klik w kafel. Cien trzyma kontrast na jasnych zdjeciach, gdzie gradient
* u gory opisu jest jeszcze slaby. Selektor dorownuje wadze reguly
* Gutenberga `body .wp-block-cover:not(.has-text-color.has-link-color) p`
* (0-3-2), ktora inaczej barwi akapit na szaro.
*/
body .wp-block-cover.sch-help-tile p.sch-help-text {
max-width: 36ch;
margin: 0;
color: rgba(250, 247, 242, 0.92);
font-size: 16px;
line-height: 1.45;
text-shadow: 0 1px 12px rgba(22, 19, 15, 0.6);
}
/*
* Trzy kafle obok siebie ponizej 1024px maja ok. 260x195 - opis by sie nie
* zmiescil i ucial na overflow: hidden. Zostaje sam podpis.
*/
@media (min-width: 782px) and (max-width: 1023px) {
.sch-help-text {
display: none;
}
}
/* --- Ostatnie kazania: karty wtyczki w ukladzie z projektu --- */
/*
* Sekcja z kartami zyje w rytmie sekcji strony glownej (72px z .sch-section,
* 26px pod naglowkiem) - wlasne odstepy shortcode'u wtyczki (32px na sekcji,
* 30px nad gridem) by je podwoily, wiec znikaja.
*/
.sch-sermons.church-recent-sermons {
margin: 0;
}
.sch-sermons .sermons-grid {
margin-top: 0;
}
/* Stan kampusu: pierwsza karta wyrozniona - na cala szerokosc, poziomo. */
body.sermons-design .sch-sermons-campus .sermons-card:first-child {
grid-column: 1 / -1;
}
body.sermons-design .sch-sermons-campus .sermons-card:first-child > a {
display: grid;
/*
* Rowno po polowie: grafika 16:9 na polowie szerokosci jest nizsza, wiec
* cala karta jest nizsza, a tresc dostaje miejsce na zajawke. Wysokosc
* wiersza dyktuje wyzsza kolumna, czyli grafika.
*/
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
/*
* `center`, nie `stretch`: tresc jest krotsza od grafiki, wiec bez tego
* rozciagala sie na cala wysokosc wiersza i zostawiala pod soba dziure
* (mete trzyma na dole `margin-top: auto` z wtyczki - nizej znika).
* Wysrodkowana kolumna dzieli ten zapas na rowno nad i pod tekstem, wiec
* czyta sie jak swiatlo, nie jak brak. Drugi zysk: gdyby tresc kiedys
* wyszla wyzsza od grafiki (bardzo dlugi tytul), rozciagnieta miniatura
* przycinala kadr 1920x1080 po bokach - teraz zostanie w proporcji.
*/
align-items: center;
}
/*
* Miniatura zostaje przy 16:9 z wtyczki - to grafika dyktuje wysokosc
* wyroznionej karty. Bazowa karta wtyczki daje miniaturze margines dolny
* 12px (odstep od tresci w ukladzie pionowym) - w ukladzie poziomym ten
* margines wystaje pod grafika jako bialy pas, wiec znika.
*/
body.sermons-design .sch-sermons-campus .sermons-card:first-child .sermons-card-thumb {
margin-bottom: 0;
}
/* Wyrozniona karta oddycha szerzej i mowi wiekszym tytulem. */
body.sermons-design .sch-sermons-campus .sermons-card:first-child .sermons-card-body {
gap: 10px;
padding: 28px;
}
body.sermons-design .sch-sermons-campus .sermons-card:first-child .sermons-card-title {
font-size: 26px;
line-height: 1.12;
}
/* Wtyczka trzyma mete na dole karty (`margin-top: auto`) - na wyroznionej
karcie ma stac pod zajawka, bo o odstep dba juz `gap` tresci. */
body.sermons-design .sch-sermons-campus .sermons-card:first-child .sermons-card-meta {
margin-top: 0;
}
/* Zajawka to zajawka, nie akapit - trzy wiersze i wielokropek. Regula obejmuje
cala sekcje, bo bez kampusu ten sam tekst niesie zwykla karta. */
body.sermons-design .sch-sermons .sermons-card-excerpt {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
}
/*
* Na pelnej mierze kontenera grafika ma ~337px wysokosci, a tytul z meta
* zajmuja polowe tego - trzy wiersze zajawki zostawialy w karcie pusty pas.
* Szesc wierszy to caly typowy opis (~60 slow) i tresc konczy sie razem z
* grafika. Nizej kolumna jest wezsza, a grafika nizsza, wiec zostaja trzy.
*/
@media (min-width: 1200px) {
body.sermons-design .sch-sermons-campus .sermons-card:first-child .sermons-card-excerpt {
-webkit-line-clamp: 6;
line-clamp: 6;
}
}
/*
* Ponizej 922px polowa szerokosci daje grafike o wysokosci ~240px i mniej -
* tyle zajmuje sam tytul z meta, wiec trzeci wiersz zajawki zaczyna wypychac
* karte wyzej od grafiki. Dwa wiersze mieszcza sie w kazdym ukladzie, takze
* w pionowym na telefonie.
*/
@media (max-width: 921px) {
body.sermons-design .sch-sermons .sermons-card-excerpt {
-webkit-line-clamp: 2;
line-clamp: 2;
}
}
/* Bez kampusu projekt daje trzy karty przy samych tytulach - zajawka jest tam
tylko po to, zeby jedyna karta na telefonie nie byla uboga. */
@media (min-width: 545px) {
body.sermons-design .sch-sermons:not(.sch-sermons-campus) .sermons-card-excerpt {
display: none;
}
}
/*
* Waskie ekrany pokazuja mniej kart, zeby sekcja kosztowala mniej przewijania.
* Progi sa te same, na ktorych wtyczka przelacza siatke (921px na dwie
* kolumny, 544px na jedna), wiec nigdzie nie powstaje niepelny rzad - dzis
* trzecia karta siedzi sama w drugim rzedzie. O tym, ile kart widac, decyduje
* CSS, nie PHP: strona jest cache'owana per ciasteczko kampusu, nie per
* urzadzenie. `display: none` (nie `visibility` ani `height: 0`) zabiera
* karcie boks, wiec leniwe miniatury schowanych kart nie sa pobierane.
*/
@media (max-width: 921px) {
body.sermons-design .sch-sermons:not(.sch-sermons-campus) .sermons-card:nth-child(n + 3) {
display: none;
}
}
@media (max-width: 544px) {
body.sermons-design .sch-sermons:not(.sch-sermons-campus) .sermons-card:nth-child(n + 2) {
display: none;
}
}
@media (max-width: 720px) {
/*
* Powrot do flexa bazowej karty, nie grid z jedna kolumna: WebKit (Safari
* i kazda przegladarka na iOS) przy rozciagnietym elemencie siatki ignoruje
* aspect-ratio miniatury, a jej ![]()
jest absolutny - wiersz wychodzil
* 0px wysokosci i grafika pierwszej karty znikala w pionie telefonu.
*/
body.sermons-design .sch-sermons-campus .sermons-card:first-child > a {
display: flex;
/*
* I `stretch` z powrotem. W kolumnie flexa os poprzeczna jest pozioma,
* wiec `center` z ukladu poziomego zwezalby elementy do szerokosci ich
* tresci - a miniatura nie ma tresci w przeplywie (jej ![]()
jest
* absolutny), wiec wychodzila 0px szerokosci i grafika znikala.
*/
align-items: stretch;
}
body.sermons-design .sch-sermons-campus .sermons-card:first-child .sermons-card-body {
padding: 18px 18px 20px;
}
}
/* --- Karty kampusow ("Jedna misja, trzy miasta") --- */
.sch-campus-cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
/* Proporcje 4/5 i 16/10 (mobile) jak karty na stronie kampusow -
te same trzy miasta maja wszedzie te sama wysokosc. */
.sch-campus-cards .sch-campus-card {
position: relative;
display: block;
aspect-ratio: 4 / 5;
border-radius: 20px;
overflow: hidden;
background: #e7e1d6;
text-decoration: none;
transition: box-shadow 0.15s ease;
}
/* Cien po najechaniu - ten sam co na kartach kazan. */
.sch-campus-cards .sch-campus-card:hover,
.sch-campus-cards .sch-campus-card:focus-visible {
box-shadow: 0 22px 50px -34px rgba(22, 19, 15, 0.5);
}
.sch-campus-card-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.sch-campus-card:hover .sch-campus-card-photo,
.sch-campus-card:focus-visible .sch-campus-card-photo {
transform: scale(1.05);
}
@media (prefers-reduced-motion: reduce) {
.sch-campus-card-photo {
transition: none;
}
}
/* Ta sama nakladka co na kartach strony /kampusy/ (wtyczka). */
.sch-campus-card-veil {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(22, 19, 15, 0.12) 0%, rgba(22, 19, 15, 0.25) 40%, rgba(22, 19, 15, 0.92) 100%);
pointer-events: none;
}
/* Godzina i adres to osobne, ciasne linie - odstep od nazwy niesie nazwa. */
.sch-campus-card-body {
position: absolute;
right: 24px;
bottom: 24px;
left: 24px;
display: flex;
flex-direction: column;
gap: 3px;
}
.sch-campus-card-name {
display: inline-flex;
gap: 10px;
align-items: flex-start;
margin-bottom: 7px;
color: var(--paper, #faf7f2);
font-family: "Libre Franklin", system-ui, sans-serif;
font-size: 28px;
font-weight: 700;
line-height: 1.1;
}
/* Kropka przy pierwszej linii lamiacej sie nazwy - margines centruje ja
w pierwszym wierszu (fallback w em dla przegladarek bez jednostki lh).
Obwodka w kolorze papieru i cien pod nia: kolor kampusu lezy na zdjeciu
o nieznanym tle, wiec sam potrafi sie z nim zlac. */
.sch-campus-card-name .sch-times-dot {
width: 14px;
height: 14px;
margin-top: 0.3em;
margin-top: calc((1lh - 14px) / 2);
box-shadow: 0 0 0 2px var(--paper, #faf7f2), 0 1px 5px 2px rgba(22, 19, 15, 0.3);
}
.sch-campus-card-meta {
color: rgba(250, 247, 242, 0.85);
font-size: 15px;
font-weight: 500;
line-height: 1.4;
}
@media (max-width: 860px) {
.sch-campus-cards {
grid-template-columns: 1fr;
}
/* Pelny selektor: sama klasa (0-1-0) przegrywala z regula bazowa
(0-2-0) i karty trzymaly pionowa proporcje takze na telefonie. */
.sch-campus-cards .sch-campus-card {
aspect-ratio: 16 / 9;
}
}
/*
* Telefon w poziomie: ekran jest szeroki (~850px), ale bardzo niski
* (~390px). Prog 860px patrzy wylacznie na szerokosc, wiec lapie sie tu
* regula pisana dla waskiego telefonu w pionie - uklad schodzi do jednej
* kolumny, grafika 16/9 rozciaga sie na cala szerokosc i wychodzi wyzsza
* (789x444) niz caly ekran. Przy niskim ekranie wracamy wiec do ukladu
* poziomego, ktory te szerokosc realnie wykorzystuje. Dolna granica 560px
* lapie jeszcze iPhone'a SE w poziomie (568x320) - sprawdzone, wszystko
* sie tam miesci - a odcina waskie okna desktopowe, gdzie dwie kolumny
* bylyby za ciasne.
*
* Sufit podniesiony z 860px na 1023px (1.7.58). Sekcje ponizej stackuja sie
* dopiero przy 860px, wiec tuz nad ta granica byly juz wielokolumnowe - ale
* z pionowym paddingiem 56px, przez co seria kazan miala 102% wysokosci
* ekranu przy 861x393 i 97% przy 896x414 (iPhone XR/11 w poziomie). Sam
* ciasniejszy padding sprowadza to do 82% i 78%. Karty kampusow i kafle
* pomocy w tym zakresie nic nie zmieniaja - trzy kolumny i 4/5 sa tam juz
* stanem bazowym - ale zostaja w bloku, bo ponizej 860px nadal sa potrzebne.
* 1023px to ten sam sufit co w bloku poziomym kafli "Dzieci i mlodziez".
*/
@media (max-width: 1023px) and (max-height: 520px) and (min-width: 560px) {
.sch-series-inner,
.sch-value-inner {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
padding-top: 32px;
padding-bottom: 32px;
}
/* Cofamy `order` z bloku pionowego - grafika wraca obok tekstu. */
.sch-series-media,
.sch-value-media {
order: 0;
}
/* Trzy karty w rzedzie jak na desktopie: 252x315 miesci sie w ekranie,
zamiast jednej karty 789x444 na ekran. */
.sch-campus-cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sch-campus-cards .sch-campus-card {
aspect-ratio: 4 / 5;
}
/*
* Kafle "Jak mozemy pomoc" to kolumny Gutenberga, ktore WordPress
* uklada w stos ponizej 782px regula `flex-basis: 100% !important`
* o specyficznosci (0,3,0). Zeby ja cofnac, selektor musi byc rownie
* mocny - stad powtorzone `.wp-block-columns` i to samo `:not()`.
* W stosie kazdy kafel ma 665x499, czyli wiecej niz caly ekran.
*/
.sch-help-tiles.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
flex-basis: 0 !important;
flex-grow: 1;
}
/* Kafle obok siebie na poziomym telefonie - za malo miejsca na opis. */
.sch-help-text {
display: none;
}
}
@media (max-width: 544px) {
/*
* W jednej kolumnie karta jest waska, wiec przy pionowej proporcji wysoka -
* a caly jej sens to zdjecie miasta i trzy linie podpisu. Nizsza proporcja
* i mniejsza nazwa: podpis dalej sie miesci, karta kosztuje mniej ekranu.
*/
.sch-campus-cards .sch-campus-card {
aspect-ratio: 2 / 1;
}
.sch-campus-card-name {
font-size: 24px;
}
}
/* --- Finalne CTA ("Do zobaczenia w niedziele") --- */
.sch-closing {
margin-top: 72px;
}
.sch-closing .wp-block-cover__inner-container {
padding-bottom: 52px;
}
.sch-closing .sch-closing-title {
margin: 0 0 28px;
color: var(--paper, #faf7f2);
font-size: clamp(34px, 5vw, 68px);
line-height: 1.04;
}
/* ==========================================================================
Strona "Jestem tu nowy"
Sekcje wg widoku "Jestem tu nowy": hero z kotwicami, pasek godzin z
adresami, kafle niedzieli, kroki wizyty, pas dzieci, karta transmisji,
FAQ na blokach details i zamkniecie z dojazdem. Tresc wchodzi wzorcami
visit-* i shortcode'ami z inc/campuses.php - tu tylko wyglad.
========================================================================== */
/* Linki tych sekcji maja wlasne stany - bez podkreslenia Astry (jak przy
sekcjach strony glownej wyzej). */
.entry-content :is(.sch-visit-faq, .sch-visit-rows, .sch-visit-kids, .sch-visit-closing-grid) a {
text-decoration: none;
}
/* Astra dokleja domyslny padding blokom najwyzszego poziomu w tresci -
jak przy sekcjach strony glownej, rytm niosa same pasy. */
.entry-content > :is(.sch-visit-steps, .sch-visit-kids, .sch-visit-closing) {
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
/* --- Hero --- */
/* Tytul tej strony jest caly wytluszczony - homepage niesie polgruby
z akcentem w . */
.sch-visit-hero .sch-hero-title {
max-width: 12ch;
font-size: clamp(38px, 5vw, 68px);
font-weight: 700;
}
/* Astra koloruje kazdy akapit w coverze regula o wadze 0-3-2 - selektor
ja powtarza, pozniejsze ladowanie rozstrzyga (jak kicker hero). */
body .wp-block-cover.sch-visit-hero p.sch-visit-hero-standfirst {
max-width: 34ch;
margin: 18px 0 0;
color: rgba(250, 247, 242, 0.9);
font-size: 18px;
line-height: 1.55;
}
/* Przycisk widmo - obrys na zdjeciu, brat przycisku transmisji (ta sama
waga 0-5-0 wobec regul outline Astry), tylko bez ikony. */
.wp-block-buttons .wp-block-button.sch-button-ghost > .wp-block-button__link:not(.has-text-color) {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 12.5px 24.5px;
border-width: 1.5px;
border-style: solid;
border-color: rgba(250, 247, 242, 0.45);
background-color: rgba(250, 247, 242, 0.12);
color: var(--paper, #faf7f2);
font-size: 15px;
line-height: 1;
}
.wp-block-buttons .wp-block-button.sch-button-ghost > .wp-block-button__link:not(.has-text-color):hover,
.wp-block-buttons .wp-block-button.sch-button-ghost > .wp-block-button__link:not(.has-text-color):focus-visible {
border-color: var(--paper, #faf7f2);
background-color: rgba(250, 247, 242, 0.2);
color: var(--paper, #faf7f2);
}
@media (max-width: 720px) {
.wp-block-buttons .wp-block-button.sch-button-ghost > .wp-block-button__link:not(.has-text-color) {
width: 100%;
padding: 13.5px 20.5px;
font-size: 14.5px;
}
}
/* --- Pasek godzin z adresami --- */
/* Wpis kampusu w dwoch liniach: miasto z godzina, pod nimi ulica.
`order` trzyma ulice za strzalka mobilnego wiersza (::after). */
.sch-times--visit .sch-times-item {
flex-wrap: wrap;
row-gap: 7px;
padding: 22px 14px;
}
.sch-times--visit .sch-times-item-address {
flex-basis: 100%;
order: 99;
color: rgba(250, 247, 242, 0.66);
font-size: 18px;
line-height: 1.4;
text-align: center;
}
/* Linia pod godzinami: dlugosc nabozenstwa i tlumaczenie. Dwie klasy w
selektorze z tego samego powodu co przy .sch-times-label - inaczej Astra
dokleja margines akapitu i pas ma za duzo atramentu pod notka. */
.sch-times .sch-times-note {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin: 0;
padding: 13px 10px;
border-top: 1px solid rgba(250, 247, 242, 0.14);
color: rgba(250, 247, 242, 0.72);
font-size: 15px;
line-height: 1.5;
text-align: center;
}
@media (max-width: 720px) {
.sch-times--visit .sch-times-item {
row-gap: 4px;
}
/* Ulica licuje z miastem: kropka 10px + odstep 11px. */
.sch-times--visit .sch-times-item-address {
margin-left: 21px;
font-size: 15px;
text-align: left;
}
.sch-times-note {
padding: 13px 0;
}
}
/* --- Kafle "Niedziela u nas" --- */
.sch-visit-tiles.wp-block-columns {
gap: 16px;
margin-top: 26px;
}
.sch-visit-tiles .wp-block-column {
margin: 0;
}
.sch-visit-tile {
aspect-ratio: 3 / 4;
min-height: 0;
border-radius: 20px;
overflow: hidden;
}
.sch-visit-tile.wp-block-cover {
padding: 0;
}
.sch-visit-tile .wp-block-cover__inner-container {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 0 24px 22px;
}
/*
* Gradient projektu w pelnej sile - jak kafle pomocy (waga klasy dim-30) -
* i mocniejszy niz w patternie, bo stopy sa mierzone na wgranych zdjeciach:
* napis lezy na 84-96% wysokosci kafla, a "kawa.jpg" ma tam ceglana sciane
* i twarze w swietle. Przy gradiencie z patternu (0 na 45% -> 0,85) najgorszy
* piksel dawal 5,3:1 pod tytulem i 5,8:1 pod zdaniem; te stopy podnosza to do
* 8,5:1 i 8,3:1, a zdjecie nadal oddycha do 36% wysokosci. `!important`
* celowo: cover niesie gradient w atrybucie style, inaczej go nie przebijemy.
*/
.sch-visit-tile .wp-block-cover__background.has-background-dim.has-background-dim-30 {
background: linear-gradient(180deg, rgba(22, 19, 15, 0) 36%, rgba(22, 19, 15, 0.62) 72%, rgba(22, 19, 15, 0.92) 100%) !important;
opacity: 1;
}
/*
* Waga 0-2-0: sama klasa (0-1-0) przegrywala z wlasna regula motywu
* `:is(body, .entry-content) :is(h1..h6)` (0-1-1) i tytul kafla wychodzil
* atramentowy na ciemnym zdjeciu - praktycznie niewidoczny.
*/
.sch-visit-tile .sch-visit-tile-title {
margin: 0;
color: var(--paper, #faf7f2);
font-size: 24px;
line-height: 1.1;
}
/* Waga 0-3-2 wobec reguly akapitow covera Astry, jak wyzej. */
body .wp-block-cover.sch-visit-tile p.sch-visit-tile-text {
margin: 8px 0 0;
color: rgba(250, 247, 242, 0.85);
font-size: 14.5px;
line-height: 1.5;
}
/*
* Cien i najazd zdjecia jak na kartach kampusow i kazan - te same wartosci
* i te same czasy. Kafel nie jest linkiem (wiersz tylko pokazuje, co niesie
* niedziela), wiec nie ma tu stanu :focus-visible: nie ma czego ogniskowac.
*/
.sch-visit-tile {
transition: box-shadow 0.15s ease;
}
.sch-visit-tile:hover {
box-shadow: 0 22px 50px -34px rgba(22, 19, 15, 0.5);
}
.sch-visit-tile .wp-block-cover__image-background {
transition: transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.sch-visit-tile:hover .wp-block-cover__image-background {
transform: scale(1.05);
}
@media (prefers-reduced-motion: reduce) {
.sch-visit-tile .wp-block-cover__image-background {
transition: none;
}
}
/*
* Szerszy pas na duzych ekranach. Sekcja "Niedziela u nas" nie niesie
* wlasnej klasy (wzorzec daje jej samo `sch-section`), wiec bierzemy ja po
* zawartosci - `:has()` jak przy przelaczniku jezykow i formularzu kontaktu.
* Dzieki temu nic nie trzeba wstawiac na nowo w edytorze.
*
* Szerszy jest caly pas, nie sam rzad kafli: naglowek licuje z lewa krawedzia
* pierwszego kafla, wiec breakout samej siatki (jak przy kartach "Dlaczego
* prosimy") zostawilby tytul 120px w prawo od kafli. Sekcja wychodzi z
* kontenera Astry przez `left: 50%` i przesuniecie o polowe wlasnej
* szerokosci - tak nie trzeba znac szerokosci kontenera. 1480px = 1440px
* tresci + 2x20px bocznego luzu sekcji, czyli ta sama miara, co karty
* "Dlaczego prosimy" i znaki "Po co istniejemy". Prog 1520px ten sam:
* nizej pas dotykalby krawedzi ekranu.
*/
@media (min-width: 1520px) {
.entry-content > .sch-section:has(> .sch-visit-tiles) {
position: relative;
left: 50%;
box-sizing: border-box;
width: 1480px;
max-width: none;
transform: translateX(-50%);
}
/* Uklad "constrained" przycina dzieci do 1200px (waga 0-1-0) - w szerszym
pasie ma rzadzic sam pas. */
.entry-content > .sch-section:has(> .sch-visit-tiles) > * {
max-width: none;
}
}
/*
* Cztery kafle w rzedzie potrzebuja miejsca: przy oknie 1140px kolumna ma
* 257px, czyli 209px tresci - tyle wystarcza, zeby "Kawa po nabozenstwie"
* zlamalo sie na dwie linie i zadne slowo nie wyszlo poza kadr. Nizej
* rzad staje sie siatka 2x2. Zawijanie flexem odpada: rdzen trzyma
* `flex-wrap: nowrap !important` od 782px, wiec kolumny i tak staly w jednym
* rzedzie (sprawdzone na zywej stronie przy 1000px). Siatka omija ten spor -
* `flex-basis: 0` kolumn nic w niej nie znaczy - a przerwa zostaje ta sama,
* bo `gap` niesie juz regula wyzej. Kafel jest wtedy dwa razy szerszy, wiec
* pion schodzi z 3/4 na 4/3 - inaczej para kafli mialaby przy 1139px ponad
* 700px wysokosci. Trzy kafle zostaja w jednym rzedzie: regula patrzy na
* czwarta kolumne.
*/
@media (min-width: 782px) and (max-width: 1139px) {
.sch-visit-tiles.wp-block-columns:has(> .wp-block-column:nth-child(4)) {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sch-visit-tiles:has(> .wp-block-column:nth-child(4)) .sch-visit-tile {
aspect-ratio: 4 / 3;
}
}
/*
* Kafel na telefonie jest niski (16/10 to ok. 207 px), a zdania zawijaja sie
* tam na dwie-trzy linie - takze dlatego, ze to samo zdanie po ukrainsku jest
* o polowe dluzsze. Tytul wjezdza wtedy w gore kadru, gdzie rampa desktopu
* jest jeszcze przezroczysta: na "kazanie.jpg" dawalo to 2,2:1. Mobilna rampa
* rusza wiec od 18% i trzyma 4,7:1 pod tytulem przy dwoch liniach zdania
* (4,0:1 w 1. percentylu przy trzech), na wszystkich trzech zdjeciach.
*/
@media (max-width: 781px) {
.sch-visit-tile {
aspect-ratio: 16 / 10;
}
.sch-visit-tile .wp-block-cover__background.has-background-dim.has-background-dim-30 {
background: linear-gradient(180deg, rgba(22, 19, 15, 0) 18%, rgba(22, 19, 15, 0.5) 45%, rgba(22, 19, 15, 0.75) 70%, rgba(22, 19, 15, 0.94) 100%) !important;
}
}
/* --- Polowki zdjecie + tresc (kroki i dzieci) --- */
/*
* Uklad media-text pisany w motywie od zera, na wadze 0-3-0: Astra laduje
* arkusze blokow rdzenia warunkowo i pasy potrafily stanac bez zadnego
* ukladu, a przy pelnej szerokosci (ujemne marginesy alignfull Astry,
* ktorych domyslny padding znosimy wyzej) tresc wystawala poza ekran.
* Wartosci powtarzaja rdzen (kolumny 50%/1fr), wiec gdy jego arkusz
* jednak wejdzie, nic sie nie kloci; boczny luz od krawedzi ekranu niesie
* max() jak inner hero - w vw, bo polowka nie zna szerokosci strony.
*/
.entry-content .sch-visit-steps,
.entry-content .sch-visit-kids {
box-sizing: border-box;
display: grid;
grid-template-rows: auto;
}
.entry-content .sch-visit-steps {
grid-template-columns: 50% 1fr;
}
.entry-content .sch-visit-kids {
grid-template-columns: 1fr 50%;
}
.entry-content :is(.sch-visit-steps, .sch-visit-kids) .wp-block-media-text__media {
position: relative;
grid-row: 1;
height: 100%;
min-height: 480px;
margin: 0;
overflow: hidden;
}
.entry-content .sch-visit-steps .wp-block-media-text__media {
grid-column: 1;
}
.entry-content .sch-visit-kids .wp-block-media-text__media {
grid-column: 2;
}
/* Zdjecie wypelnia cala polowke (rdzeniowe is-image-fill-element). */
.entry-content :is(.sch-visit-steps, .sch-visit-kids) .wp-block-media-text__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.entry-content :is(.sch-visit-steps, .sch-visit-kids) .wp-block-media-text__content {
grid-row: 1;
align-self: center;
min-width: 0;
}
/*
* Waga 0-4-0: Astra ma wlasne paddingi tresci media-text, a wariant
* "media po prawej" niesie u niej cztery klasy
* (.entry-content .wp-block-media-text.has-media-on-the-right ...__content)
* - trzy klasy przegrywaly i pas dzieci stal bez lewego luzu. Czwarta
* klasa wlasnego markupu wyrownuje sily, pozniejsze ladowanie rozstrzyga.
*/
.entry-content .sch-visit-steps.alignfull .wp-block-media-text__content {
grid-column: 2;
padding: 64px max(24px, calc((100vw - 1200px) / 2)) 64px 56px;
}
.entry-content .sch-visit-kids.has-media-on-the-right .wp-block-media-text__content {
grid-column: 1;
padding: 64px 56px 64px max(24px, calc((100vw - 1200px) / 2));
}
@media (max-width: 720px) {
.entry-content .sch-visit-steps,
.entry-content .sch-visit-kids {
grid-template-columns: 100%;
}
.entry-content :is(.sch-visit-steps, .sch-visit-kids) .wp-block-media-text__media {
grid-row: 1;
grid-column: 1;
min-height: 280px;
}
/* :is() z czteroklasowymi wariantami trzyma wage 0-4-0 - mobilne
paddingi Astry (8% 0 0) maja te sama sile przy "media po prawej". */
.entry-content :is(.sch-visit-steps.alignfull, .sch-visit-kids.has-media-on-the-right) .wp-block-media-text__content {
grid-row: 2;
grid-column: 1;
padding: 40px 22px 44px;
}
}
/* --- Kroki "Jak to wyglada" --- */
.sch-visit-steps {
margin-top: 72px;
background: var(--ink, #16130f);
color: var(--paper, #faf7f2);
}
.sch-visit-steps h2 {
margin: 0 0 24px;
color: var(--paper, #faf7f2);
}
.sch-visit-steps-list {
margin: 0;
padding: 0;
list-style: none;
counter-reset: sch-step;
}
.sch-visit-steps-list li {
display: flex;
gap: 20px;
align-items: baseline;
margin: 0;
padding: 18px 0;
border-top: 1px solid rgba(250, 247, 242, 0.16);
color: rgba(250, 247, 242, 0.92);
font-size: 18px;
line-height: 1.45;
}
.sch-visit-steps-list li:last-child {
border-bottom: 1px solid rgba(250, 247, 242, 0.16);
}
/* Numer kroku w zlocie projektu (zloto Tomaszowa jako akcent). */
.sch-visit-steps-list li::before {
content: "0" counter(sch-step);
counter-increment: sch-step;
flex: 0 0 auto;
color: var(--campus-tomaszow, #cdaa68);
font-family: "Libre Franklin", system-ui, sans-serif;
font-size: 15px;
font-weight: 700;
}
@media (max-width: 720px) {
.sch-visit-steps-list li {
font-size: 16px;
}
}
/* --- Pas "Dzieci maja tu swoje miejsce" --- */
.sch-visit-kids {
background: var(--subtle, #f6eedd);
}
.sch-visit-kids h2 {
margin: 14px 0 6px;
}
.sch-visit-kids-label {
margin: 20px 0 0;
color: var(--muted, #6b6560);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.09em;
line-height: 1;
text-transform: uppercase;
}
.sch-visit-kids-text {
margin: 7px 0 0;
color: #3a362f;
font-size: 17px;
line-height: 1.5;
}
.sch-visit-kids-note {
margin: 26px 0 0;
color: var(--muted, #6b6560);
font-size: 14px;
line-height: 1.55;
}
.sch-visit-kids-note a {
padding-bottom: 2px;
border-bottom: 2px solid rgba(22, 19, 15, 0.25);
color: var(--ink, #16130f);
font-weight: 600;
}
/* Bez tej pary globalny hover tresci przemalowywal litery na niebiesko -
w warstwie projektu kolor tekstu zostaje, mocnieje sama kreska. */
.sch-visit-kids-note a:hover,
.sch-visit-kids-note a:focus-visible {
border-bottom-color: var(--ink, #16130f);
color: var(--ink, #16130f);
}
/* --- Karta "Wolisz najpierw zobaczyc" --- */
.sch-visit-watch {
gap: 24px;
box-sizing: border-box;
padding: 36px 40px;
border: 1px solid rgba(22, 19, 15, 0.1);
border-radius: 22px;
background: #fff;
}
.sch-visit-watch h2 {
margin: 0;
font-size: clamp(24px, 3vw, 34px);
line-height: 1.08;
}
.sch-visit-watch p {
max-width: 54ch;
margin: 10px 0 0;
color: var(--text, #4a4640);
font-size: 15.5px;
line-height: 1.6;
}
/*
* Layout constrained rdzenia centruje dzieci grupy autowymi marginesami
* z !important - tekst ma licowac do lewej z naglowkiem karty, wiec
* odpowiedz musi niesc te sama sile.
*/
.sch-visit-watch-copy > * {
margin-right: 0 !important;
margin-left: 0 !important;
}
@media (max-width: 720px) {
.sch-visit-watch {
padding: 26px 22px;
}
}
/* --- FAQ --- */
/*
* Kolumna pytan jest wezsza niz sekcje (900px tresci + boczny luz 24px).
* Pelny selektor: regula sekcji (0-2-0) ustawia max-width: none.
*/
.entry-content > .sch-section.sch-visit-faq {
max-width: 948px;
}
.sch-visit-faq h2 {
margin-bottom: 26px;
}
.sch-visit-faq-item {
margin: 0;
border: 1px solid rgba(22, 19, 15, 0.1);
border-radius: 16px;
background: #fff;
overflow: hidden;
}
.sch-visit-faq-item + .sch-visit-faq-item {
margin-top: 10px;
}
.sch-visit-faq-item summary {
display: flex;
gap: 16px;
align-items: center;
justify-content: space-between;
padding: 18px 22px;
font-size: 16px;
font-weight: 700;
line-height: 1.35;
list-style: none;
cursor: pointer;
}
.sch-visit-faq-item summary::-webkit-details-marker {
display: none;
}
/* Kolko z caretem wtyczki (przelacznik opisu serii w archiwum kazan) -
te same wymiary i obrot o 180 stopni po otwarciu. Ikona idzie tlem,
nie maska: maska przycielaby obrys kolka. Hover podmienia grafike na
atramentowa, jak toggle serii. */
.sch-visit-faq-item summary::after {
content: "";
flex: 0 0 auto;
box-sizing: border-box;
width: 36px;
height: 36px;
border: 1px solid rgba(22, 19, 15, 0.2);
border-radius: var(--radius-pill, 999px);
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b6560'%3E%3Cpath d='M4.53 7.72h14.94a.9.9 0 0 1 .67 1.5l-7.47 8.06a.9.9 0 0 1-1.34 0L3.86 9.22a.9.9 0 0 1 .67-1.5Z'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
transition: transform 0.15s ease;
}
.sch-visit-faq-item summary:hover::after,
.sch-visit-faq-item summary:focus-visible::after {
border-color: var(--ink, #16130f);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2316130f'%3E%3Cpath d='M4.53 7.72h14.94a.9.9 0 0 1 .67 1.5l-7.47 8.06a.9.9 0 0 1-1.34 0L3.86 9.22a.9.9 0 0 1 .67-1.5Z'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
}
.sch-visit-faq-item[open] summary::after {
transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
.sch-visit-faq-item summary::after {
transition: none;
}
}
.sch-visit-faq-item > :not(summary) {
margin: 0;
padding: 0 22px 18px;
}
/*
* Miekkie rozwijanie odpowiedzi. `::details-content` z `interpolate-size`
* animuje wysokosc az do `auto` bez JS i bez mierzenia czegokolwiek -
* to samo tempo co karuzela serii (0,3 s, ta sama krzywa). Przegladarka bez
* tych wlasnosci dostaje dawne, natychmiastowe otwarcie; nic sie nie psuje.
*
* `content-visibility` musi jechac w przejsciu z `allow-discrete`: bez tego
* przy zamykaniu tresc znika w pierwszej klatce i wysokosc zbiega do zera
* nad pustym miejscem.
*/
@supports (interpolate-size: allow-keywords) and selector(details::details-content) {
.sch-visit-faq-item {
interpolate-size: allow-keywords;
}
.sch-visit-faq-item::details-content {
block-size: 0;
overflow: hidden;
transition: block-size 0.3s cubic-bezier(0.2, 0.6, 0.2, 1), content-visibility 0.3s allow-discrete;
}
.sch-visit-faq-item[open]::details-content {
block-size: auto;
}
@media (prefers-reduced-motion: reduce) {
.sch-visit-faq-item::details-content {
transition: none;
}
}
}
/*
* Sciezka dla WebKit, czyli kazdej przegladarki na iOS (Chrome tam tez):
* `::details-content` jest, ale `interpolate-size` nie - to wlasnosc tylko
* Chromium, wiec blok @supports wyzej w ogole nie wchodzi i odpowiedz
* otwierala sie skokiem. js/faq-details.js animuje tam wysokosc samego
* (tresc FAQ siedzi w tresci strony i nie da sie jej opakowac)
* i na czas ruchu wlacza te klase - te same 0,3 s i ta sama krzywa.
*/
.sch-visit-faq-item.sch-faq-animating {
overflow: hidden;
transition: height 0.3s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.sch-visit-faq-item p {
color: var(--text, #4a4640);
font-size: 15px;
line-height: 1.6;
}
.sch-visit-faq-item a,
.sch-visit-faq-more a {
padding-bottom: 2px;
border-bottom: 2px solid rgba(22, 19, 15, 0.25);
color: var(--ink, #16130f);
font-weight: 600;
}
.sch-visit-faq-item a:hover,
.sch-visit-faq-item a:focus-visible,
.sch-visit-faq-more a:hover,
.sch-visit-faq-more a:focus-visible {
border-bottom-color: var(--ink, #16130f);
color: var(--ink, #16130f);
}
.sch-visit-faq-more {
margin: 22px 0 0;
color: var(--muted, #6b6560);
font-size: 14.5px;
}
/* --- Zamkniecie "Do zobaczenia w niedziele" --- */
.sch-visit-closing {
margin-top: 72px;
}
.sch-visit-closing.wp-block-cover {
padding: 0;
}
/*
* Ta sama historia co w hero: cover niesie gradient w atrybucie style (stad
* `!important`), a dimRatio 60 wygaszal go do 60% - stopy z patternu schodzily
* do 0,11 na gorze i 0,53 na dole kadru. Zdjecie ma za to przepalony ekran
* projektora dokladnie za tytulem, wiec najgorszy piksel dawal 2,1:1 pod
* tytulem i 2,1:1 pod zdaniem - ponizej normy, tekst faktycznie nie do
* odczytania.
*
* Stopy mierzone na wgranym zdjeciu, dla szerokosci okna 1024-2560 px (kadr
* przycina sie w pionie, wiec kazda szerokosc bierze inny fragment): tytul
* trzyma min. 4,2:1 (duzy tekst, prog 3:1), zdanie 5,1:1, a link pocztowy
* 12:1. Gora kadru zostaje najjasniejsza - nad nia nie ma tekstu.
*/
.sch-visit-closing .wp-block-cover__background.has-background-dim.has-background-dim-60 {
background: linear-gradient(180deg, rgba(22, 19, 15, 0.3) 0%, rgba(22, 19, 15, 0.68) 42%, rgba(22, 19, 15, 0.9) 100%) !important;
opacity: 1;
}
/*
* Wezszy kadr to inny fragment zdjecia i inne miejsce tekstu: kolumny wchodza
* na siebie od 781 px (rdzen), pas rosnie do ~650-800 px, a tytul laduje na
* 6-11% wysokosci - tam gdzie rampa desktopu jest najjasniejsza, wiec dawala
* 2,7:1. Prog media query idzie wiec za zlamaniem kolumn (781 px), nie za
* blokiem mobilnym nizej (720 px). Rampa startuje wysoko i prawie sie nie
* wznosi - nad tytulem nie ma czego oszczedzac, a pod karta godzin zdjecie i
* tak przechodzi przez jej matowe szklo. Najgorszy piksel: 5,4:1 pod tytulem
* i 4,8:1 pod zdaniem (375 px oraz 781 px).
*/
@media (max-width: 781px) {
.sch-visit-closing .wp-block-cover__background.has-background-dim.has-background-dim-60 {
background: linear-gradient(180deg, rgba(22, 19, 15, 0.62) 0%, rgba(22, 19, 15, 0.74) 50%, rgba(22, 19, 15, 0.9) 100%) !important;
}
}
.sch-visit-closing .wp-block-cover__inner-container {
max-width: none;
padding: 72px max(24px, calc((100% - 1200px) / 2));
}
.sch-visit-closing-grid {
gap: 48px;
}
.sch-visit-closing .sch-visit-closing-title {
margin: 0;
color: var(--paper, #faf7f2);
font-size: clamp(30px, 4vw, 48px);
line-height: 1.04;
}
/* Akapity covera koloruje Astra (0-3-2) - selektory powtarzaja wage. */
body .wp-block-cover.sch-visit-closing p.sch-visit-closing-text {
max-width: 34ch;
margin: 18px 0 0;
color: rgba(250, 247, 242, 0.82);
font-size: 17px;
line-height: 1.6;
}
.sch-visit-closing-mail {
margin: 24px 0 0;
}
/* Mail stal bez kreski - jedyny link warstwy projektu bez podkreslenia.
Wartosci jak w blizniaczym zamknieciu "Wesprzyj nas". */
.sch-visit-closing .sch-visit-closing-mail a {
padding-bottom: 2px;
border-bottom: 2px solid rgba(250, 247, 242, 0.5);
color: var(--paper, #faf7f2);
font-size: 15px;
font-weight: 600;
}
.sch-visit-closing .sch-visit-closing-mail a:hover,
.sch-visit-closing .sch-visit-closing-mail a:focus-visible {
border-bottom-color: var(--paper, #faf7f2);
color: var(--paper, #faf7f2);
}
/*
* Karta dojazdu na zdjeciu - matowe szklo jak karta godzin na stronie
* kampusu (`.sermons-campus-hero-card` we wtyczce): te same wartosci tla,
* obrysu i rozmycia.
*/
.sch-visit-rows {
box-sizing: border-box;
padding: 6px 32px;
border: 1px solid rgba(250, 247, 242, 0.16);
border-radius: 22px;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
background: rgba(22, 19, 15, 0.5);
color: var(--paper, #faf7f2);
}
/* Bez rozmycia karta musi sama zaciemnic zdjecie - jak pasek naglowka. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.sch-visit-rows {
background: rgba(22, 19, 15, 0.72);
}
}
.sch-visit-rows-list {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
list-style: none;
}
.sch-visit-row {
display: flex;
gap: 16px;
flex-wrap: wrap;
align-items: center;
margin: 0;
padding: 16px 0;
border-bottom: 1px solid rgba(250, 247, 242, 0.14);
}
.sch-visit-row:last-child {
border-bottom: 0;
}
.sch-visit-row .sch-times-dot {
width: 10px;
height: 10px;
}
.sch-visit-row-main {
flex: 1;
min-width: 200px;
}
.sch-visit-row-name {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: baseline;
font-family: "Libre Franklin", system-ui, sans-serif;
font-size: 17px;
font-weight: 700;
line-height: 1.2;
}
.sch-visit-row-time {
color: rgba(250, 247, 242, 0.88);
font-size: 16px;
}
.sch-visit-row-address {
display: block;
margin-top: 4px;
color: rgba(250, 247, 242, 0.72);
font-size: 13.5px;
line-height: 1.45;
}
.sch-visit-rows .sch-visit-route {
padding-bottom: 5px;
border-bottom: 2px solid rgba(250, 247, 242, 0.5);
color: var(--paper, #faf7f2);
font-size: 13.5px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
}
.sch-visit-rows .sch-visit-route:hover,
.sch-visit-rows .sch-visit-route:focus-visible {
border-color: var(--paper, #faf7f2);
color: var(--paper, #faf7f2);
}
/* Stan wybranego kampusu: jedna duza karta. */
.sch-visit-single {
padding: 18px 0;
}
body .wp-block-cover.sch-visit-closing p.sch-visit-single-label {
display: flex;
gap: 10px;
align-items: center;
margin: 0;
color: rgba(250, 247, 242, 0.6);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.12em;
line-height: 1;
text-transform: uppercase;
}
body .wp-block-cover.sch-visit-closing p.sch-visit-single-time {
margin: 14px 0 4px;
color: var(--paper, #faf7f2);
font-family: "Libre Franklin", system-ui, sans-serif;
font-size: 52px;
font-weight: 700;
line-height: 1;
}
body .wp-block-cover.sch-visit-closing p.sch-visit-single-address {
margin: 6px 0 0;
color: rgba(250, 247, 242, 0.82);
font-size: 15px;
line-height: 1.55;
}
.sch-visit-single .sch-visit-route {
display: inline-block;
margin-top: 16px;
font-size: 14px;
}
@media (max-width: 720px) {
.sch-visit-closing .wp-block-cover__inner-container {
padding: 44px 22px;
}
.sch-visit-rows {
padding: 4px 20px;
}
body .wp-block-cover.sch-visit-closing p.sch-visit-single-time {
font-size: 44px;
}
}
/* ==========================================================================
Strona "O nas"
Sekcje wg widoku "O nas": hero na zdjeciu, skrocone wyznanie wiary z
linkiem do Deklaracji Kosciola Chrystusowego, ciemny pas misji, praktyki
pierwszego kosciola, dwa fundamenty, regula "w zasadach jednosc", pas
zdjecia, os czasu od 1921 i motto. Tresc wchodzi wzorcami about-* z
inc/patterns-about.php - tu tylko wyglad. Sekcji o liderach na razie
nie publikujemy, jej miejsce zajmuje regula i zdjecie.
========================================================================== */
/* Linki tych sekcji maja wlasne stany - bez podkreslenia Astry (jak przy
sekcjach strony glownej i strony "Jestem tu nowy"). */
.entry-content :is(.sch-about-who, .sch-about-history, .sch-about-practice) a {
text-decoration: none;
}
/* Astra dokleja domyslny padding blokom najwyzszego poziomu w tresci -
pas zdjecia niesie rytm sam. Pas misji ma wlasny padding, wiec zamiast
zerowania dostaje ponizej regule o tej samej wadze (0-2-0). */
.entry-content > .sch-about-photo {
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
/* --- Hero --- */
/* Tytul jest krotki, wiec gorna granica nizsza niz na "Jestem tu nowy" -
inaczej samo "O nas" rozpychalo sie na pol ekranu. */
.sch-about-hero .sch-hero-title {
max-width: 12ch;
font-size: clamp(38px, 5vw, 64px);
font-weight: 700;
}
/* Astra koloruje kazdy akapit w coverze regula o wadze 0-3-2 - selektor
ja powtarza, pozniejsze ladowanie rozstrzyga (jak kicker hero). */
body .wp-block-cover.sch-about-hero p.sch-about-hero-standfirst {
max-width: 46ch;
margin: 16px 0 0;
color: rgba(250, 247, 242, 0.88);
font-size: 17px;
line-height: 1.55;
}
/*
* Odstep miedzy blokami z globalnych stylow rdzenia
* (`:root :where(.is-layout-flow) > *`, 24px) dawal gorny margines kazdemu
* dziecku grupy poza pierwszym. Te rzedy trzymaja odstepy przez `gap`, wiec
* margines zsuwal karty 2 i 3 w dol, a karta pierwsza - jako element siatki
* rozciagany do wysokosci rzedu - rosla w gore i rzad przestawal licowac.
* Na osi czasu ten sam margines rozrywal kreske miedzy datami.
*
* `.entry-content` w selektorze daje wage 0-2-0: regula rdzenia ma 0-1-0
* (`:where()` nie liczy sie do wagi), ale jest drukowana jako styl w
* po arkuszu motywu, wiec przy rownej wadze wygrywalaby kolejnoscia.
*/
.entry-content :is(.sch-about-marks, .sch-about-rule-cards, .sch-about-foundations, .sch-about-practice-list, .sch-about-timeline) > * {
margin-top: 0;
margin-bottom: 0;
}
/* --- Karta na papierze (wyznanie wiary, regula, "Wesprzyj nas") --- */
.sch-about-card,
.sch-support-card,
.sch-ministries-card {
box-sizing: border-box;
padding: 24px 26px;
border: 1px solid rgba(22, 19, 15, 0.1);
border-radius: var(--radius-card, 18px);
background: #fff;
}
.sch-about-card h3,
.sch-support-card h3,
.sch-ministries-card h3 {
margin: 0 0 8px;
font-size: 18px;
line-height: 1.2;
}
.sch-about-card p,
.sch-support-card p,
.sch-ministries-card p {
margin: 0;
color: var(--text, #4a4640);
font-size: 15px;
line-height: 1.6;
}
/*
* Odstep kreski od tekstu ma w calym motywie dwie wartosci, wedle roli
* linku: 2px dla linkow w toku zdania (wiecej podchodzi pod litery
* nastepnego wiersza przy `line-height: 1.55`) i 5px dla linkow
* samodzielnych, stojacych we wlasnym wierszu - tych z `inline-flex` i
* strzalka.
*
* Miejsca rysowane `text-decoration` zamiast obramowania (404, formularz
* Give, tresc wpisow) dostaja te sama geometrie przez
* `text-underline-position: under` z `text-underline-offset: 2px`: `under`
* mierzy od dolu pudelka znaku, tak jak obramowanie, wiec kreska laduje
* dokladnie tam, gdzie przy `border-bottom` z `padding-bottom: 2px`. Samo
* `text-underline-offset` liczy od pozycji podkreslenia z metryk fontu i
* sadzalo kreske widocznie blizej tekstu.
*
* Kontrolki (przycisk rozwijania serii, "wyczysc filtry") i stopka maja
* wlasne odstepy - to nie sa linki tresci.
*/
/* --- Link do zrodla (Deklaracja, chrystusowi.pl) --- */
.sch-about-link {
margin: 18px 0 0;
}
.sch-about-link a {
display: inline-flex;
align-items: center;
padding-bottom: 5px;
border-bottom: 2px solid rgba(22, 19, 15, 0.25);
color: var(--ink, #16130f);
font-size: 14px;
font-weight: 600;
}
/* Jak w calym motywie (`.sch-section-more`, `.sch-visit-faq-more`): kolor
tekstu zostaje, mocnieje sama kreska. Niebieski `--link-hover` nalezy do
stron poza warstwa projektu i do 404. */
.sch-about-link a:hover,
.sch-about-link a:focus-visible {
border-bottom-color: var(--ink, #16130f);
color: var(--ink, #16130f);
}
/* --- Kim jestesmy --- */
.sch-about-who.wp-block-columns {
gap: 44px;
}
/* Proporcje z projektu: opis wezszy, wyznanie wiary szersze. Ponizej
781px rdzen i tak zwija kolumny wlasnym `!important`. */
.sch-about-who > .wp-block-column:first-child {
flex-basis: 44%;
flex-grow: 0;
}
/* Karty i link pod nimi stoja w rownym rytmie - odstep niesie `gap`,
wiec same bloki zeruja marginesy. */
.sch-about-who > .wp-block-column + .wp-block-column {
display: flex;
flex-direction: column;
gap: 14px;
}
.sch-about-who > .wp-block-column + .wp-block-column > * {
margin: 0;
}
/* Link do Deklaracji konczy kolumne wyznania wiary, wiec licuje z prawa
krawedzia kart, a nie startuje od lewej pod ostatnia z nich - tak samo na
telefonie, gdzie kafle sa na cala szerokosc. Podpis miesci sie w jednej
linii az do 320px, wiec strzalka zostaje przy tekscie. */
.sch-about-who .sch-about-link {
text-align: right;
}
/* --- Po co istniejemy (ciemny pas) --- */
/* Wzorzec daje grupie uklad przeplywowy, nie "constrained", wiec miare
trzymaja limity na dzieciach, nie padding pasa. Wczesniej stalo tu
`padding: 76px max(24px, calc((100% - 1200px) / 2))`, ale grupa jest
`alignfull` (rozciaga sie ujemnymi marginesami) i procent w `calc()` liczy
sie od kontenera tresci (1240px), a nie od szerokosci pasa: (1240 - 1200)
/ 2 = 20px, wiec `max()` zawsze wybieral 24px i sekcja rozlewala sie na
cale okno - przy oknie 1846px kafle mialy ~1780px zamiast 1200px. Ta sama
pulapka co w `.sch-support-ways`. Padding zostaje jako luz na waskich
ekranach. */
.entry-content > .sch-about-mission {
box-sizing: border-box;
margin-top: 72px;
padding: 76px 24px;
background: var(--ink, #16130f);
color: var(--paper, #faf7f2);
}
.entry-content > .sch-about-mission > * {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
/* Trzy krotkie karty oddychaja szerzej niz miara czytania naglowka - do
1440px, tak samo jak karty "Dlaczego prosimy" na "Wesprzyj nas". Powyzej
1520px, zeby przy weszym oknie siatka nie dotykala krawedzi ekranu;
nizej zostaje miara 1200px. */
@media (min-width: 1520px) {
.entry-content > .sch-about-mission > .sch-about-marks {
max-width: 1440px;
}
}
.sch-about-mission .sch-kicker,
.sch-about-mission h2 {
color: var(--paper, #faf7f2);
}
.sch-about-mission-head.wp-block-columns {
gap: 44px;
margin-bottom: 40px;
}
.sch-about-mission-head > .wp-block-column:first-child {
flex-basis: 44%;
flex-grow: 0;
}
.sch-about-mission-head p:not(.sch-kicker) {
color: rgba(250, 247, 242, 0.82);
font-size: 16px;
line-height: 1.65;
}
.sch-about-marks {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.sch-about-mark {
box-sizing: border-box;
padding: 30px 28px;
border: 1px solid rgba(250, 247, 242, 0.14);
border-radius: var(--radius-card, 18px);
background: rgba(250, 247, 242, 0.05);
}
/*
* Pierwsza wersja wzorca niosla nad naglowkami numery 01-03. Tresc stron
* zapisanych wtedy zostaje w bazie, wiec numery gasimy zamiast zostawiac je
* bez stylu. Regule mozna usunac, gdy zadna strona ich nie niesie.
*/
.sch-about-mark-num {
display: none;
}
.sch-about-mark h3 {
margin: 0 0 10px;
color: var(--paper, #faf7f2);
font-size: clamp(22px, 2.4vw, 28px);
line-height: 1.1;
}
.sch-about-mark p {
margin: 0;
color: rgba(250, 247, 242, 0.72);
font-size: 14.5px;
line-height: 1.6;
}
/*
* Uklad "constrained" rdzenia centruje kazde wezsze dziecko grupy regula
* `.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull))`
* z `margin-left/right: auto !important`. Wszedzie, gdzie zwezamy miare
* czytania, wypychalo to tekst na srodek sekcji: naglowek praktyk odjezdzal
* o 170px od listy pod nim, a wstep reguly stawal osobno nad kaflami.
* `!important` po naszej stronie jest tu jedynym wyjsciem - specyficznosc
* nie przebija `!important` rdzenia. Karta motta zostaje wysrodkowana, bo
* tak ma wygladac, wiec jej ta regula nie dotyczy.
*/
.entry-content .sch-about-practices > :is(.sch-kicker, h2, .sch-about-quote, .sch-about-practices-lead),
.entry-content .sch-about-rule-lead {
margin-left: 0 !important;
margin-right: auto !important;
}
/* --- Jak pierwszy kosciol --- */
/* Wstep czyta sie w jednej kolumnie, lista praktyk pod nim idzie na cala
szerokosc sekcji. */
.sch-about-practices > :is(.sch-kicker, h2, .sch-about-quote, .sch-about-practices-lead) {
max-width: 860px;
}
.sch-about-quote.wp-block-quote,
.sch-support-quote.wp-block-quote {
margin: 26px 0 0;
padding: 0 0 0 22px;
border-left: 2px solid var(--campus-tomaszow, #cdaa68);
}
.sch-about-quote p,
.sch-support-quote p {
margin: 0;
color: var(--ink, #16130f);
font-family: "Libre Franklin", system-ui, sans-serif;
font-size: clamp(19px, 2.2vw, 26px);
font-style: normal;
font-weight: 400;
line-height: 1.45;
text-wrap: pretty;
}
.sch-about-quote cite,
.sch-support-quote cite {
display: block;
margin-top: 14px;
color: var(--muted, #6b6560);
font-size: 12px;
font-style: normal;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.sch-about-practices-lead {
margin: 26px 0 0;
color: var(--text, #4a4640);
font-size: 16px;
line-height: 1.65;
}
.sch-about-practice-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 56px;
margin-top: 44px;
border-top: 1px solid rgba(22, 19, 15, 0.14);
}
.sch-about-practice {
padding: 22px 0;
border-bottom: 1px solid rgba(22, 19, 15, 0.12);
}
/* Nad zdaniem naglowek moze byc mniejszy niz w samym spisie - inaczej
wiersz robil sie ciezki od gory. */
.sch-about-practice h3 {
margin: 0;
font-size: clamp(18px, 1.8vw, 22px);
line-height: 1.2;
}
.sch-about-practice p {
margin: 8px 0 0;
color: var(--text, #4a4640);
font-size: 14.5px;
line-height: 1.6;
}
/* Ostatni wiersz siatki bez kreski - lista domyka sie kreska gorna i
samym koncem tekstu, jak w projekcie. */
.sch-about-practice:nth-last-child(-n + 2) {
border-bottom: 0;
}
/*
* Pierwsza wersja wzorca dawala sama liste naglowkow, bez zdan. Tresc stron
* zapisanych wtedy zostaje w bazie taka, jaka jest, wiec dopoki sekcja nie
* zostanie wstawiona na nowo, jej wiersze musza wygladac jak nalezy. Te dwie
* reguly mozna usunac, gdy zadna strona nie niesie juz plaskiej listy.
*/
.sch-about-practice-list > h3 {
margin: 0;
padding: 22px 0;
border-bottom: 1px solid rgba(22, 19, 15, 0.12);
font-size: clamp(19px, 2vw, 24px);
line-height: 1.2;
}
.sch-about-practice-list > h3:nth-last-child(-n + 2) {
border-bottom: 0;
}
/* --- Dwa slowa, na ktorych stoimy --- */
.sch-about-foundations {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
margin-top: 28px;
}
.sch-about-foundation {
box-sizing: border-box;
padding: 34px 32px;
border: 1px solid rgba(22, 19, 15, 0.1);
border-radius: var(--radius-card, 18px);
background: #fff;
}
/* Lacina kursywa i lekka - to termin, nie krzyk. */
.sch-about-foundation h3 {
margin: 0;
font-size: clamp(24px, 2.8vw, 32px);
font-style: italic;
font-weight: 400;
line-height: 1.1;
}
.sch-about-foundation-gloss {
margin: 10px 0 0;
color: var(--muted, #6b6560);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.12em;
line-height: 1;
text-transform: uppercase;
}
.sch-about-foundation p:not(.sch-about-foundation-gloss) {
margin: 20px 0 0;
color: var(--text, #4a4640);
font-size: 15px;
line-height: 1.65;
}
/* --- Regula: w zasadach jednosc --- */
.sch-about-rule-lead {
max-width: 62ch;
margin: 16px 0 0;
color: var(--text, #4a4640);
font-size: 16px;
line-height: 1.65;
}
.sch-about-rule-cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 28px;
}
.sch-about-rule-cards .sch-about-card {
padding: 30px 28px;
}
.sch-about-rule-cards .sch-about-card h3 {
margin-bottom: 10px;
font-size: clamp(19px, 2vw, 22px);
}
/* --- Pas zdjecia --- */
/*
* Blok obrazu wchodzi pusty, wiec w edytorze otwiera sie od razu wybor z
* biblioteki mediow. Wysokosc trzyma kadr niezaleznie od proporcji pliku.
*
* Drugi selektor to siatka bezpieczenstwa: pusty blok obrazu nie zawsze
* utrzymuje `className` po wybraniu zdjecia, a wrzucenie obrazu z reki jest
* naturalnym odruchem. Na tej stronie obraz na cala szerokosc to zawsze pas
* zdjecia, wiec `sch-about` na (inc/patterns-about.php) wystarcza.
*/
/*
* Tylko gorny margines - nigdy skrot `margin`. Pelne wykrwawienie
* alignfull stoi na ujemnych marginesach bocznych (tu -12.5px), a skrot
* zerowal je i pas zjezdzal w prawo o szerokosc wciecia tresci.
*/
.sch-about-photo.wp-block-image,
.sch-about .entry-content > .wp-block-image.alignfull {
margin-top: 72px;
margin-bottom: 0;
}
.sch-about-photo img,
.sch-about .entry-content > .wp-block-image.alignfull img {
display: block;
width: 100%;
height: clamp(280px, 42vw, 520px);
object-fit: cover;
}
/* --- Nasza historia --- */
.sch-about-history.wp-block-columns {
gap: 44px;
}
/* Wstep zostaje w polu widzenia, gdy os czasu przewija sie obok.
`align-self` jest tu konieczne: rozciagnieta kolumna wypelnia rzad i
nie mialaby gdzie sie przykleic. Odstep od gory omija przyklejony
naglowek strony. */
.sch-about-history > .sch-about-history-intro {
position: sticky;
top: 108px;
flex-basis: 44%;
flex-grow: 0;
align-self: flex-start;
}
.sch-about-history-intro p:not(.sch-kicker):not(.sch-about-link) {
color: var(--text, #4a4640);
font-size: 15.5px;
line-height: 1.65;
}
/* `position: relative` daje punkt zaczepienia kresce postepu ponizej i
czyni z osi offsetParent kamieni, wiec js liczy ich pozycje wzgledem
niej, a nie calego dokumentu. */
.sch-about-timeline {
position: relative;
display: flex;
flex-direction: column;
}
/* Kamien milowy: kropka na osi (::before) i kreska do nastepnego
(::after) - bez dodatkowych pustych blokow w tresci. */
.sch-about-milestone {
position: relative;
padding: 0 0 26px 38px;
}
.sch-about-milestone::before {
content: "";
position: absolute;
z-index: 1;
top: 4px;
left: 0;
box-sizing: border-box;
width: 16px;
height: 16px;
border: 2.5px solid var(--ink, #16130f);
border-radius: var(--radius-pill, 999px);
background: var(--paper, #faf7f2);
}
/*
* Kreska idzie przez cala wysokosc kamienia, wiec styka sie z kreska
* nastepnego - wczesniej zaczynala sie pod kropka i konczyla na dole
* kamienia, a odstepy zostawialy widoczne przerwy. Pod kropka nie
* przeswituje, bo kropka ma swoj z-index i wypelnienie papierem.
*/
.sch-about-milestone::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 7px;
width: 2px;
background: rgba(22, 19, 15, 0.12);
}
/* Os zaczyna sie w pierwszej kropce i konczy w ostatniej - nie wystaje
ani nad pierwsza date, ani pod ostatnia. */
.sch-about-milestone:first-child::after {
top: 12px;
}
.sch-about-milestone:last-child::after {
bottom: auto;
height: 12px;
}
/* Pierwsza i ostatnia kropka pelne - poczatek i dzis. Statyczny widok osi
(bez JavaScriptu) zostaje przy tym ukladzie. */
.sch-about-milestone:first-child::before,
.sch-about-milestone:last-child::before {
border: 0;
background: var(--ink, #16130f);
}
.sch-about-milestone:last-child {
padding-bottom: 0;
}
/*
* Os wypelniana przewijaniem. `is-live` dokleja js/about-timeline.js, wiec
* dopiero wtedy kropki gasna i czekaja na swoja kolej - bez skryptu widok
* zostaje ten powyzej.
*
* Wypelnienie to jedna kreska na calej osi, ktorej wysokosc niesie zmienna
* `--sch-timeline-fill` w pikselach - skrypt przelicza ja co ramke, wiec
* kreska rosnie razem z przewijaniem, a nie skokami o cala date. Kropki
* maja swoj `z-index`, wiec kreska przechodzi za nimi. Bez `transition`
* celowo: wysokosc ma iskrzyc 1:1 z pozycja strony, kazde wygladzanie
* dodaloby opoznienie.
*/
.sch-about-timeline.is-live::after {
content: "";
position: absolute;
top: var(--sch-timeline-top, 12px);
left: 7px;
width: 2px;
height: var(--sch-timeline-fill, 0px);
background: var(--ink, #16130f);
}
.sch-about-timeline.is-live .sch-about-milestone::before {
border: 2.5px solid rgba(22, 19, 15, 0.22);
background: var(--paper, #faf7f2);
transition: border-color 180ms ease, background-color 180ms ease;
}
/* Kropka zapala sie w chwili, gdy kreska dojdzie do jej srodka. */
.sch-about-timeline.is-live .sch-about-milestone.is-reached::before {
border-color: var(--ink, #16130f);
background: var(--ink, #16130f);
}
@media (prefers-reduced-motion: reduce) {
.sch-about-timeline.is-live .sch-about-milestone::before {
transition: none;
}
}
.sch-about-year {
margin: 0;
font-size: 22px;
line-height: 1;
}
.sch-about-milestone p {
margin: 8px 0 0;
color: var(--text, #4a4640);
font-size: 14.5px;
line-height: 1.6;
}
/* --- Motto --- */
/* Regula zerujaca padding sekcji ma wage 0-2-0 (patrz "Strona glowna"),
wiec karta motta powtarza ja z klasa sekcji - jak FAQ na stronie
"Jestem tu nowy". */
/* Karta motta domyka strone, wiec potrzebuje oddechu przed stopka -
inaczej jej dolna krawedz stykala sie z ciemnym pasem stopki. */
.entry-content > .sch-section.sch-about-motto {
box-sizing: border-box;
margin-bottom: 96px;
padding: 64px 44px;
border: 1px solid rgba(22, 19, 15, 0.1);
border-radius: 24px;
background: linear-gradient(180deg, #f6eedd, #fbf6ec);
text-align: center;
}
.sch-about-motto > * {
max-width: 900px;
margin-right: auto;
margin-left: auto;
}
.sch-about-motto-kicker {
margin: 0;
color: var(--muted, #6b6560);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
line-height: 1;
text-transform: uppercase;
}
.sch-about-motto h2 {
margin: 18px 0 0;
font-size: clamp(26px, 3.8vw, 46px);
line-height: 1.18;
}
/* Ostatnie slowo motta na piaskowym podkresleniu - gradient zamiast
`text-decoration`, zeby kreska szla pod litery, nie przez nie. */
.sch-about-motto h2 strong {
padding: 0 3px;
background: linear-gradient(120deg, #ead8ac, #ead8ac) no-repeat 0 88% / 100% 34%;
font-weight: inherit;
}
.sch-about-motto .wp-block-buttons {
justify-content: center;
margin-top: 30px;
}
/*
* Karta motta niesie tlo i zaokraglone naroza, a `.entry-content` na tej
* stronie nie ma bocznego paddingu - warstwa projektu kazan zeruje go, zeby
* pasy alignfull licowaly z ekranem. Ponizej szerokosci tresci karta
* dotykalaby wiec narozami krawedzi ekranu. Dostaje wlasny margines, rowny
* wcieciu tekstu w pozostalych sekcjach, wiec licuje z kaflami nad soba.
*/
@media (max-width: 1200px) {
.entry-content > .sch-section.sch-about-motto {
margin-right: 22px;
margin-left: 22px;
}
}
/* --- Wezsze ekrany --- */
@media (max-width: 900px) {
.sch-about-marks,
.sch-about-rule-cards,
.sch-about-foundations,
.sch-about-practice-list {
grid-template-columns: minmax(0, 1fr);
}
/* W jednej kolumnie ostatni wiersz to juz tylko ostatni element. */
.sch-about-practice:nth-last-child(-n + 2) {
border-bottom: 1px solid rgba(22, 19, 15, 0.12);
}
.sch-about-practice:last-child {
border-bottom: 0;
}
.entry-content > .sch-about-mission {
padding: 56px 24px;
}
}
@media (max-width: 781px) {
/* Kolumny sa juz jedna pod druga - przyklejony wstep tylko by skakal. */
.sch-about-history > .sch-about-history-intro {
position: static;
}
}
@media (max-width: 720px) {
.entry-content > .sch-section.sch-about-motto {
margin-bottom: 64px;
padding: 44px 24px;
}
.sch-about-photo img {
height: clamp(220px, 58vw, 320px);
}
}
/* ==========================================================================
Strona "Wesprzyj nas"
Sekcje wg wzorcow support-* z inc/patterns-support.php: hero, "dlaczego
dajemy" z wersetem, na co ida ofiary, trzy sposoby wsparcia (w karcie
przelewu dane z przyciskami kopiowania od js/support-copy.js), pas na
formularz online i podziekowanie. Tresc wchodzi wzorcami - tu tylko
wyglad.
========================================================================== */
/* Linki tych sekcji maja wlasne stany - bez podkreslenia Astry (jak przy
sekcjach strony glownej i pozostalych stron warstwy projektu). */
.entry-content :is(.sch-support-where, .sch-support-ways, .sch-support-closing) a {
text-decoration: none;
}
/* Odstep miedzy blokami z globalnych stylow rdzenia dawal gorny margines
kazdemu dziecku grupy poza pierwszym; odstepy niosa tu `gap` i wlasne
marginesy ponizej. To ta sama sprawa co przy siatkach na "O nas" - tam
tez uzasadnienie wagi 0-2-0. */
.entry-content :is(.sch-support-cards, .sch-support-items, .sch-support-way-list, .sch-support-way, .sch-support-account, .sch-support-account-row, .sch-support-form) > * {
margin-top: 0;
margin-bottom: 0;
}
/* Uklad "constrained" rdzenia centruje kazde wezsze dziecko grupy swoim
`!important` - obie sekcje zwezaja miare czytania, wiec tekst trzyma sie
lewej krawedzi (jak praktyki na "O nas"). */
.entry-content :is(.sch-support-why, .sch-support-where) > :is(.sch-kicker, h2, .sch-support-quote, .sch-support-lead) {
margin-left: 0 !important;
margin-right: auto !important;
}
/* --- Hero --- */
.sch-support-hero .sch-hero-title {
max-width: 16ch;
font-size: clamp(38px, 5vw, 64px);
font-weight: 700;
}
/* Astra koloruje kazdy akapit w coverze regula o wadze 0-3-2 - selektor
ja powtarza, pozniejsze ladowanie rozstrzyga (jak kicker hero). */
body .wp-block-cover.sch-support-hero p.sch-support-hero-standfirst {
max-width: 48ch;
margin: 16px 0 0;
color: rgba(250, 247, 242, 0.88);
font-size: 17px;
line-height: 1.55;
}
.sch-support-hero .sch-support-hero-actions {
margin-top: 26px;
}
/* --- Dlaczego dajemy --- */
.sch-support-why > :is(.sch-kicker, h2, .sch-support-quote, .sch-support-lead) {
max-width: 860px;
}
.sch-support-lead {
margin: 26px 0 0;
color: var(--text, #4a4640);
font-size: 16px;
line-height: 1.65;
}
.sch-support-cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 36px;
}
/* Trzy krotkie karty oddychaja szerzej niz miara czytania reszty strony -
do 1440px, czyli 200px poza kontener tresci. Wychodzi z niego przez
`left: 50%` i przesuniecie o polowe wlasnej szerokosci, bo tak nie trzeba
znac szerokosci kontenera (a marginesy `auto` rdzenia, narzucane z
`!important`, przy elemencie szerszym od kontenera i tak licza sie do
zera). Powyzej 1520px, zeby przy weszym oknie siatka nie wychodzila poza
ekran; nizej zostaje zwykla miara sekcji. */
@media (min-width: 1520px) {
.entry-content .sch-support-why > .sch-support-cards {
position: relative;
left: 50%;
width: 1440px;
max-width: none;
transform: translateX(-50%);
}
}
/* --- Na co ida ofiary --- */
/* Cztery pozycje w dwoch kolumnach, rozdzielone kreskami - rytm jak spis
praktyk na "O nas". Ostatni rzad nie zamyka sie kreska, zeby lista nie
wygladala na uciety fragment. */
.sch-support-items {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 56px;
margin-top: 40px;
border-top: 1px solid rgba(22, 19, 15, 0.14);
}
.sch-support-item {
padding: 22px 0;
border-bottom: 1px solid rgba(22, 19, 15, 0.12);
}
.sch-support-items > .sch-support-item:nth-last-child(-n + 2) {
border-bottom: 0;
}
.sch-support-item h3 {
margin: 0 0 6px;
font-size: clamp(18px, 1.8vw, 21px);
line-height: 1.2;
}
.sch-support-item p {
margin: 0;
color: var(--text, #4a4640);
font-size: 15px;
line-height: 1.6;
}
.sch-support-note {
margin: 26px 0 0;
color: var(--muted, #6b6560);
font-size: 14px;
}
.sch-support-note a {
padding-bottom: 2px;
border-bottom: 2px solid rgba(22, 19, 15, 0.25);
color: var(--ink, #16130f);
font-weight: 600;
}
.sch-support-note a:hover,
.sch-support-note a:focus-visible {
border-bottom-color: var(--ink, #16130f);
color: var(--ink, #16130f);
}
/* --- Trzy sposoby --- */
/* Miare trzyma limit na dzieciach, nie padding pasa. Wczesniej stalo tu
`padding: 0 max(24px, calc((100% - 1200px) / 2))`, ale procent w `calc()`
liczy sie od kontenera tresci (1240px), a nie od szerokosci pasa: (1240 -
1200) / 2 = 20px, wiec `max()` zawsze wybieral 24px i sekcja rozlewala sie
na cale okno - przy oknie 1800px karty mialy 1737px zamiast 1200px.
Padding zostaje jako luz na waskich ekranach. */
.entry-content > .sch-support-ways {
box-sizing: border-box;
margin-top: 72px;
padding: 0 24px;
}
.entry-content > .sch-support-ways > * {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
/* Karta przelewu niesie cztery wiersze danych, dwie pozostale po zdaniu -
w trzech rownych kolumnach siatka rozciagala je do jej wysokosci i
swiecily pustka. Przelew stoi wiec w prawej kolumnie na cala wysokosc, a
"Online" i "W niedziele" jedna pod druga po lewej.
Drugi wiersz jako `1fr` jest tu istotny: przy `auto auto` oba wiersze
dziela miedzy siebie wysokosc przelewu i druga karta odjezdza w dol o
155px (zmierzone). Wiersz elastyczny zabiera cala nadwyzke, wiec obie
karty stoja jedna pod druga w odstepie rownym `gap`. */
.sch-support-way-list {
display: grid;
grid-template-columns: 1fr 1.15fr;
grid-template-rows: auto 1fr;
gap: 16px;
margin-top: 36px;
}
/* Kolumna wskazana jawnie, choc przy kolejnosci blokow online / przelew /
w niedziele siatka trafilaby tu sama. Jawnie, bo dzieki temu uklad nie
zalezy od kolejnosci tresci: przestawienie blokow w edytorze nic tu nie
zepsuje. Pozostale dwie karty wchodza same w wolne komorki lewej kolumny.
Na telefonie zadna regula nie przestawia kart - kolejnosc online, przelew,
w niedziele niesie sama tresc strony, wiec czytnik ekranu czyta je w tej
samej kolejnosci, w ktorej sa widoczne. */
.sch-support-way-transfer {
grid-column: 2;
grid-row: 1 / span 2;
}
/* Bez tego karta w elastycznym wierszu rozciaga sie na cala jego wysokosc. */
.sch-support-way:not(.sch-support-way-transfer) {
align-self: start;
}
.sch-support-way {
box-sizing: border-box;
padding: 28px 26px;
border: 1px solid rgba(22, 19, 15, 0.1);
border-radius: var(--radius-card, 18px);
background: #fff;
}
.entry-content .sch-support-way h3 {
margin: 0 0 8px;
font-size: 19px;
line-height: 1.2;
}
.entry-content .sch-support-way > p {
color: var(--text, #4a4640);
font-size: 15px;
line-height: 1.6;
}
.entry-content .sch-support-way .sch-support-way-link {
margin-top: 18px;
}
.sch-support-way-link a {
display: inline-flex;
align-items: center;
padding-bottom: 5px;
border-bottom: 2px solid rgba(22, 19, 15, 0.25);
color: var(--ink, #16130f);
font-size: 14px;
font-weight: 600;
}
.sch-support-way-link a:hover,
.sch-support-way-link a:focus-visible {
border-bottom-color: var(--ink, #16130f);
color: var(--ink, #16130f);
}
.entry-content .sch-support-way .sch-support-way-note {
margin-top: 14px;
color: var(--muted, #6b6560);
font-size: 13.5px;
line-height: 1.55;
}
/* --- Dane do przelewu --- */
.entry-content .sch-support-way .sch-support-account {
display: grid;
gap: 14px;
margin-top: 20px;
}
/* Etykieta nad wartoscia; przycisk kopiowania siedzi w prawym dolnym rogu
pola, wiec wiersz jest jego ukladem odniesienia. */
.sch-support-account-row {
position: relative;
display: grid;
gap: 6px;
}
.sch-support-account-label {
color: var(--muted, #6b6560);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.sch-support-account-value {
color: var(--ink, #16130f);
font-size: 15px;
font-weight: 600;
line-height: 1.45;
}
/* Wartosci do skopiowania siedza w polu. Rezerwa z prawej zostaje takze bez
skryptu - inaczej tekst przeskakiwalby w chwili dolozenia przycisku.
Zwykly blok, nie flex: numer konta dluzszy niz szerokosc karty musi zawinac
sie jak jedno zdanie. Przy flexie iOS - ktory sam rozbijal numer na dwa
linki `tel:` - ustawial te czesci obok siebie i numer czytal sie jako dwie
kolumny (meta w inc/patterns-support.php gasi juz samo rozbijanie). */
.sch-support-copyable {
box-sizing: border-box;
padding: 12px 52px 12px 14px;
border: 1px solid var(--border, #e4dccb);
border-radius: var(--radius-field, 10px);
background: var(--subtle, #f6eedd);
font-variant-numeric: tabular-nums;
/* Numer wklejony bez spacji to jeden nierozdzielny token - bez tego
wychodzil za krawedz pola na telefonie. */
overflow-wrap: anywhere;
}
.sch-support-copy {
position: absolute;
right: 8px;
bottom: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--muted, #6b6560);
cursor: pointer;
transition: color 160ms ease, background-color 160ms ease;
}
.sch-support-copy:hover {
background: #fff;
color: var(--ink, #16130f);
}
.sch-support-copy:focus-visible {
outline: 2px solid var(--ink, #16130f);
outline-offset: 2px;
}
/* Po skopiowaniu ikona zmienia sie na znacznik; komunikat dla czytnika
ekranu idzie osobno, przez `role="status"` w karcie. */
.sch-support-copy-done,
.sch-support-copy.is-copied .sch-support-copy-icon {
display: none;
}
.sch-support-copy.is-copied {
color: var(--ink, #16130f);
}
.sch-support-copy.is-copied .sch-support-copy-done {
display: block;
}
/* Komunikat po skopiowaniu - tylko dla czytnikow ekranu. Motyw nie opiera
sie tu na `.screen-reader-text` Astry, bo klasa nalezy do motywu
nadrzednego, a nie do warstwy projektu. */
.sch-support-copy-status {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
/* --- Pas formularza online --- */
/* Miare trzyma limit na dzieciach, nie padding pasa - grupa jest `alignfull`,
wiec procent w `calc()` liczyl sie od kontenera tresci (1240px), a nie od
szerokosci pasa i `max()` zawsze wybieral 24px. Ta sama pulapka co
w `.sch-support-ways` i w pasie misji na "O nas". Padding zostaje jako luz
na waskich ekranach. */
.entry-content > .sch-support-form {
box-sizing: border-box;
margin-top: 72px;
padding: 72px 24px;
background: var(--subtle, #f6eedd);
}
/* Give renderuje formularz w ramce jako wysrodkowana kolumne ~824px, nie na
cala szerokosc pasa. Naglowek i zdanie nad nim licuja wiec z ta kolumna -
inaczej tekst startowal od lewej krawedzi miary 1200px, a formularz
zaczynal sie 170px dalej. Zamkniecie strony jest wysrodkowane tak samo,
wiec pas nie wypada z rytmu. Limit bierze tez samo opakowanie formularza:
dopoki stoi tu slot, kreska przerywana szla przez cale okno. */
.entry-content > .sch-support-form > * {
box-sizing: border-box;
max-width: 824px;
margin-left: auto;
margin-right: auto;
}
.entry-content .sch-support-form > h2 {
text-align: center;
}
.entry-content .sch-support-form > .sch-support-form-lead {
margin-left: auto;
margin-right: auto;
text-align: center;
}
/* Powietrze miedzy zdaniem a formularzem. Selektor bierze wszystko, co nie
jest naglowkiem ani zdaniem - czyli opakowanie formularza - zeby przezyc
zmiane nazwy klasy po stronie wtyczki. Waga 0-4-0 przebija reset
marginesow siatek wyzej. */
.entry-content .sch-support-form > *:not(h2):not(.sch-support-form-lead) {
margin-top: 36px;
}
.entry-content .sch-support-form > .sch-support-form-lead {
max-width: 62ch;
margin-top: 14px;
color: var(--text, #4a4640);
font-size: 16px;
line-height: 1.65;
}
/* Slot na formularz: dopoki wzorzec nie dostal bloku formularza, miejsce
widac od razu - takze w edytorze. Kreska przerywana mowi, ze to miejsce
do zajecia, a nie element strony. */
.entry-content .sch-support-form > .sch-support-form-slot {
margin-top: 28px;
padding: 28px 24px;
border: 1.5px dashed rgba(22, 19, 15, 0.25);
border-radius: var(--radius-card, 18px);
background: rgba(250, 247, 242, 0.6);
color: var(--muted, #6b6560);
font-size: 15px;
text-align: center;
}
/* Widok potwierdzenia po zaplacie (klasa z inc/patterns-support.php):
naglowek pasa i zdanie o bramce znikaja, bo nad podziekowaniem z Give
czytaly sie jak zaproszenie do kolejnej wplaty. Bez naglowka odstep nad
ramka tez jest zbedny - pas niesie wlasny padding. */
.sch-support-receipt .sch-support-form > h2,
.sch-support-receipt .sch-support-form > .sch-support-form-lead {
display: none;
}
.sch-support-receipt .entry-content .sch-support-form > *:not(h2):not(.sch-support-form-lead) {
margin-top: 0;
}
/* --- Podziekowanie --- */
.sch-support-closing.wp-block-cover {
margin-top: 72px;
padding: 0;
}
/* Po pasie formularza zamkniecie styka sie z nim bez szwu. 72px marginesu
ma sens po sekcji lezacej na papierze - tu poprzednik niesie wlasne tlo,
wiec margines pokazywal pasek papieru miedzy dwoma pasami. Selektor
rodzenstwa (0-4-0) przebija takze wariant mobilny nizej. */
.entry-content .sch-support-form + .sch-support-closing.wp-block-cover {
margin-top: 0;
}
.sch-support-closing .wp-block-cover__inner-container {
max-width: none;
padding: 0 max(24px, calc((100% - 720px) / 2));
}
.sch-support-closing .sch-support-closing-title {
margin: 0;
color: var(--paper, #faf7f2);
font-size: clamp(34px, 4.6vw, 60px);
line-height: 1.04;
}
body .wp-block-cover.sch-support-closing p.sch-support-closing-text {
margin: 18px 0 0;
color: rgba(250, 247, 242, 0.82);
font-size: 16.5px;
line-height: 1.6;
}
body .wp-block-cover.sch-support-closing p.sch-support-closing-mail {
margin: 20px 0 0;
}
.sch-support-closing-mail a {
padding-bottom: 2px;
border-bottom: 2px solid rgba(250, 247, 242, 0.5);
color: var(--paper, #faf7f2);
font-size: 15px;
font-weight: 600;
}
.sch-support-closing-mail a:hover,
.sch-support-closing-mail a:focus-visible {
border-bottom-color: var(--paper, #faf7f2);
color: var(--paper, #faf7f2);
}
@media (max-width: 900px) {
.sch-support-cards {
grid-template-columns: 1fr;
}
}
@media (max-width: 720px) {
/* Dwie kolumny trzymaja sie do 720px: przy wezszym pasie pole z numerem
konta zaczyna zawijac sie w karcie przelewu. Nizej wszystko idzie w
jedna kolumne, a karta przelewu przestaje spinac wiersze. */
.sch-support-way-list {
grid-template-columns: 1fr;
grid-template-rows: none;
}
.sch-support-way-transfer {
grid-column: auto;
grid-row: auto;
}
.entry-content > .sch-support-ways {
margin-top: 56px;
}
.entry-content > .sch-support-form {
margin-top: 56px;
padding: 56px 24px;
}
.sch-support-closing.wp-block-cover {
margin-top: 56px;
}
.sch-support-items {
grid-template-columns: 1fr;
}
/* W jednej kolumnie ostatni rzad to jedna pozycja - przedostatnia
odzyskuje kreske. */
.sch-support-items > .sch-support-item:nth-last-child(-n + 2) {
border-bottom: 1px solid rgba(22, 19, 15, 0.12);
}
.sch-support-items > .sch-support-item:last-child {
border-bottom: 0;
}
.sch-support-way {
padding: 24px 22px;
}
}
/* ==========================================================================
Wspolna strzalka
Maskowany wektor zamiast znaku U+2192, ktorego nie ma w lacinskim
subsecie IBM Plex Sans (font zastepczy dawal krotsza, grubsza strzalke).
`currentColor` trzyma kolor zgodny z tekstem linku.
========================================================================== */
.sch-footer-list .is-strong > a::after,
.sch-section-more a::after,
.sch-times .sch-times-route::after,
.sch-visit-rows .sch-visit-route::after,
.sch-contact-place-route::after,
.sch-about-link a::after,
.sch-support-way-link a::after,
.sch-ministries-card-link a::after,
.sch-ministries-more a::after,
.sch-help-caption a::after {
content: "";
display: inline-block;
flex: 0 0 auto;
width: 18px;
height: 10px;
margin-left: 8px;
vertical-align: 0;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10' fill='none' stroke='%23000' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.8 5H16.5M12.6 1.3 16.9 5 12.6 8.7'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10' fill='none' stroke='%23000' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.8 5H16.5M12.6 1.3 16.9 5 12.6 8.7'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* Podpisy kafli sa wieksze, strzalka rosnie z nimi - i odsuwa sie od
podpisu po najechaniu na kafel, jak w projekcie. */
.sch-help-caption a::after {
width: 22px;
height: 12px;
transition: margin-left 300ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
.sch-help-tile:hover .sch-help-caption a::after,
.sch-help-tile:focus-within .sch-help-caption a::after {
margin-left: 18px;
}
/* ==========================================================================
Strona 404
Szablon 404.php: sam papier bez zdjecia (ma sie ladowac natychmiast),
duza cyfra jako hero, obietnica z Ewangelii Mateusza 7:7 i wyjscia dalej.
Jeden szablon niesie trzy jezyki - teksty wybiera pll_current_language().
========================================================================== */
.sch-404 {
max-width: 680px;
margin: 0 auto;
padding: 40px 24px 96px;
text-align: center;
}
/* Cyfra gra role hero: ton miedzy --subtle a --border, wyraznie widoczna
na papierze, ale wciaz tlo dla tresci pod nia. */
.sch-404-code {
margin: 0;
color: #efe6d2;
font-family: "Libre Franklin", system-ui, sans-serif;
font-size: clamp(96px, 20vw, 150px);
font-weight: 700;
line-height: 0.9;
letter-spacing: -0.02em;
}
/* Kicker jak sch-kicker, ale centrowany i z kreskami po obu stronach -
zloto Tomaszowa zamiast currentColor, zeby nie szarzalo z tekstem. */
.sch-404-kicker {
display: flex;
gap: 11px;
align-items: center;
justify-content: center;
margin: 22px 0 0;
color: var(--muted, #6b6560);
font-size: 13px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.sch-404-kicker::before,
.sch-404-kicker::after {
content: "";
flex: 0 0 auto;
width: 24px;
height: 2px;
background: var(--campus-tomaszow, #cdaa68);
}
/* Globalna skala daje h1 clamp(36-56px) - tu tytul jest cytatem, nie
naglowkiem hero, wiec stopien schodzi o krok nizej. */
.sch-404 .sch-404-title {
max-width: 18ch;
margin: 14px auto 0;
font-size: clamp(32px, 5vw, 44px);
line-height: 1.05;
}
/* Sygnatura wersetu - cichy odnosnik pod cytatem. */
.sch-404-verse {
margin: 12px 0 0;
color: var(--muted, #6b6560);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.06em;
}
.sch-404-lead {
max-width: 48ch;
margin: 16px auto 0;
}
.sch-404-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
margin-top: 30px;
}
/* Miary przyciskow blokowych (14/26 przy 15px); outline z korekta na obrys,
zeby oba mialy rowna wysokosc - jak przycisk transmisji w hero. */
.sch-404-btn {
display: inline-block;
box-sizing: border-box;
padding: 14px 26px;
border-radius: var(--radius-pill, 999px);
font-size: 15px;
font-weight: 600;
line-height: 1;
text-decoration: none;
}
.sch-404-btn-solid {
background: var(--ink, #16130f);
color: var(--paper, #faf7f2);
}
/* Hover jak przycisk naglowka i globalny hover Astry: zloto + atrament. */
.sch-404-btn-solid:hover,
.sch-404-btn-solid:focus-visible {
background: var(--campus-tomaszow, #cdaa68);
color: var(--ink, #16130f);
}
.sch-404-btn-outline {
padding: 12.5px 24.5px;
border: 1.5px solid rgba(22, 19, 15, 0.25);
color: var(--ink, #16130f);
}
.sch-404-btn-outline:hover,
.sch-404-btn-outline:focus-visible {
border-color: var(--ink, #16130f);
color: var(--ink, #16130f);
}
/* Cicha linia najczestszych celow pod kreska. Szerokosc z zawartosci,
nie stala: ukrainska etykieta jest dluzsza niz polska i przy sztywnych
440px spychala linki do drugiego wiersza. */
.sch-404-links {
display: flex;
gap: 10px 14px;
flex-wrap: wrap;
align-items: center;
justify-content: center;
width: fit-content;
max-width: 100%;
margin: 36px auto 0;
padding-top: 22px;
border-top: 1px solid var(--border, #e4dccb);
}
.sch-404-links-label {
color: var(--muted, #6b6560);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.sch-404-links ul {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
list-style: none;
}
.sch-404-links li {
margin: 0;
line-height: 1;
}
/* Srodkowa kropka miedzy pozycjami - dekoracja, jak w pasku prawnym stopki. */
.sch-404-links li + li::before {
content: "·";
margin-right: 10px;
color: var(--muted, #6b6560);
}
.sch-404-links a {
color: var(--ink, #16130f);
font-size: 14px;
font-weight: 600;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-position: under;
text-underline-offset: 2px;
}
.sch-404-links a:hover,
.sch-404-links a:focus-visible {
color: var(--link-hover, #486ca0);
}
@media (max-width: 720px) {
.sch-404 {
padding: 24px 22px 72px;
}
.sch-404-actions {
gap: 10px;
}
}
/* ==========================================================================
Strona "Kontakt"
Sekcje wg wzorcow contact-* z inc/patterns-contact.php: hero, pas
formularza (sam formularz wchodzi shortcode'em Fluent Forms), pas adresow
z kartami kampusow od [sch_campus_contact_cards] i cichy pas danych
rejestrowych. Tresc wchodzi wzorcami - tu tylko wyglad.
========================================================================== */
/* Linki pasa formularza, adresow i danych maja wlasne stany - bez
podkreslenia Astry (jak sekcje strony glownej i pozostalych stron warstwy
projektu). Pas formularza musi byc w tej liscie: sama klasa
(`.sch-contact-form-note a`, waga 0-1-1) przegrywala z inline'owa regula
Astry `.ast-single-post .entry-content a` o wadze 0-2-1, wiec nota pod
formularzem dostawala dwie kreski naraz - podkreslenie Astry (~1px) na
wlasnym obramowaniu. */
.entry-content :is(.sch-contact-form, .sch-contact-places, .sch-contact-legal) a {
text-decoration: none;
}
/* Odstep miedzy blokami z globalnych stylow rdzenia dawal gorny margines
kazdemu dziecku grupy poza pierwszym; odstepy niosa tu wlasne marginesy
i `gap` siatek. To ta sama sprawa co przy pasach "Wesprzyj nas" -
uzasadnienie wagi 0-2-0 jest tam. */
.entry-content :is(.sch-contact-form, .sch-contact-places, .sch-contact-legal, .sch-contact-legal-rows, .sch-contact-legal-row) > * {
margin-top: 0;
margin-bottom: 0;
}
/* Nadlinia z kreska nad naglowkiem pasa adresow - ten sam element co na
stronie glownej, "O nas" i "Wesprzyj nas". Odstep pod nia niesie wlasny
margines naglowka, bo reset wyzej zdjal `gap` blokow rdzenia. Waga 0-3-0
przebija i reset, i skale naglowkow. Pas formularza i pas danych kickera
nie maja - ich naglowki mowia same za siebie. */
.entry-content .sch-contact-places > .sch-kicker + h2 {
margin-top: 18px;
}
/* Na atramencie kicker jasnieje razem z naglowkiem (jak pas misji na
"O nas"); kreska bierze `currentColor`, wiec wystarczy kolor tekstu. */
.entry-content .sch-contact-places > .sch-kicker {
color: var(--paper, #faf7f2);
}
/* --- Hero --- */
/*
* Zabezpieczenie na hero bez zdjecia: cover maluje wtedy sam gradient na
* papierze, gora pasa wychodzi niemal biala i kicker w kolorze papieru z niej
* znika. Atrament pod gradientem trzyma kontrast. Ze zdjeciem nic sie nie
* zmienia - obraz coveru lezy nad tlem elementu.
*/
.sch-contact-hero.wp-block-cover {
background-color: var(--ink, #16130f);
}
.sch-contact-hero .sch-hero-title {
max-width: 16ch;
font-size: clamp(38px, 5vw, 64px);
font-weight: 700;
}
/* Astra koloruje kazdy akapit w coverze regula o wadze 0-3-2 - selektor
ja powtarza, pozniejsze ladowanie rozstrzyga (jak hero "Wesprzyj nas"). */
body .wp-block-cover.sch-contact-hero p.sch-contact-hero-standfirst {
max-width: 48ch;
margin: 16px 0 0;
color: rgba(250, 247, 242, 0.88);
font-size: 17px;
line-height: 1.55;
}
/* --- Pas formularza --- */
/*
* Miare trzymaja tu `max-width` i automatyczne marginesy dzieci, a nie
* procentowy padding pasa jak na starszych stronach. Procent w paddingu
* liczy sie od szerokosci rodzica - a rodzicem jest kontener Astry (okolo
* 1248px), nie pas rozciagniety na cala szerokosc okna. Wychodzilo z tego
* `max(24px, ~24px)`, wiec tresc siadala przy samej krawedzi i nie licowala
* z hero, ktory te sama formule ma na wewnetrznym elemencie coveru - tam
* procent liczy sie od szerokosci okna i wszystko sie zgadza.
*
* Tla nie ma - formularz stoi na papierze strony, a nastepny pas jest
* atramentowy, wiec granica i tak jest widoczna.
*/
.entry-content > .sch-contact-form {
box-sizing: border-box;
margin-top: 72px;
padding: 72px 24px;
}
/* Hero konczy sie atramentem tuz nad pasem - odstep zrobilby jasny prozek
miedzy zdjeciem a trescia. */
.entry-content > .sch-contact-hero + .sch-contact-form {
margin-top: 0;
}
/* Miara czytania: kolumna na srodku pasa, jak pas formularza online
i podziekowanie na "Wesprzyj nas" - formularz to glowna sprawa tej strony,
a nie akapit do czytania z lewej. Selektor wymienia dzieci po nazwie,
a wrapper formularza bierze `> :not(...)` nizej, zeby przezyc zmiane
nazwy klasy po stronie wtyczki. */
.entry-content .sch-contact-form > h2,
.entry-content .sch-contact-form > .sch-contact-form-lead,
.entry-content .sch-contact-form > .sch-contact-form-slot,
.entry-content .sch-contact-form > .sch-contact-form-note,
.entry-content .sch-contact-form > *:not(h2):not(.sch-kicker):not(.sch-contact-form-lead):not(.sch-contact-form-slot):not(.sch-contact-form-note) {
box-sizing: border-box;
max-width: 720px;
margin-right: auto;
margin-left: auto;
}
.entry-content .sch-contact-form > :is(h2, .sch-contact-form-lead, .sch-contact-form-note) {
text-align: center;
}
.entry-content .sch-contact-form > .sch-contact-form-lead {
max-width: 62ch;
margin-top: 14px;
color: var(--text, #4a4640);
font-size: 16px;
line-height: 1.65;
}
/* Powietrze miedzy zdaniem a formularzem. */
.entry-content .sch-contact-form > *:not(h2):not(.sch-kicker):not(.sch-contact-form-lead):not(.sch-contact-form-slot):not(.sch-contact-form-note) {
margin-top: 36px;
}
/* Slot na formularz: dopoki wzorzec nie dostal shortcode'u, miejsce widac
od razu - takze w edytorze. Kreska przerywana mowi, ze to miejsce do
zajecia, a nie element strony (jak slot na "Wesprzyj nas"). */
.entry-content .sch-contact-form > .sch-contact-form-slot {
margin-top: 28px;
padding: 28px 24px;
border: 1.5px dashed rgba(22, 19, 15, 0.25);
border-radius: var(--radius-card, 18px);
background: var(--subtle, #f6eedd);
color: var(--muted, #6b6560);
font-size: 15px;
text-align: center;
}
.entry-content .sch-contact-form > .sch-contact-form-note {
margin-top: 26px;
color: var(--muted, #6b6560);
font-size: 14px;
}
/* Nota ma dwa zdania w dwoch akapitach - drugie stoi blizej, zeby czytaly sie
jako jeden drobny druk, a nie dwie osobne uwagi. */
.entry-content .sch-contact-form > .sch-contact-form-note + .sch-contact-form-note {
margin-top: 10px;
}
.sch-contact-form-note a {
padding-bottom: 2px;
border-bottom: 2px solid rgba(22, 19, 15, 0.25);
color: var(--ink, #16130f);
font-weight: 600;
}
.sch-contact-form-note a:hover,
.sch-contact-form-note a:focus-visible {
border-bottom-color: var(--ink, #16130f);
color: var(--ink, #16130f);
}
/* --- Formularz Fluent Forms --- */
/*
* Formularz wchodzi shortcode'em i niesie wlasny arkusz wtyczki, ktory laduje
* sie PO arkuszu motywu - tam, gdzie regula musi wejsc, selektor ma wiec
* o klase wiecej niz jej odpowiednik we wtyczce. Wszystko zamkniete
* w `.sch-contact-form`, wiec inne formularze na stronie zostaja, jakie sa.
*
* Najpierw jednak zmienne: Fluent Forms 6 czyta z `--fluentform-*` we wlasnych
* regulach, wiec ich podmiana zalatwia od razu obwodki pol, kolor bledu i
* tekst podpowiedzi - bez wojny selektorow i bez rozjazdu, gdy wtyczka zmieni
* swoj szablon.
*/
.sch-contact-form .fluentform {
--fluentform-primary: var(--link-hover, #486ca0);
--fluentform-secondary: var(--text, #4a4640);
--fluentform-danger: #a3231b;
--fluentform-border-color: var(--border, #e4dccb);
--fluentform-border-radius: var(--radius-field, 10px);
}
.sch-contact-form .fluentform .ff-el-group {
margin-bottom: 20px;
}
.sch-contact-form .fluentform .ff-el-input--label label {
margin-bottom: 6px;
color: var(--ink, #16130f);
font-size: 15px;
font-weight: 600;
}
/* Gwiazdka pola wymaganego w koralu Piotrkowa - czerwien wtyczki czytala sie
jak komunikat bledu, a pole jest tylko wymagane. */
.sch-contact-form .fluentform .ff-el-input--label.ff-el-is-required label::after {
color: var(--campus-piotrkow, #cc6b5b);
}
/* Podpowiedz pod polem: wtyczka daje kursywe 12px, tu ten sam glos co reszta
drobnego tekstu na stronie. */
.sch-contact-form .fluentform .ff-el-help-message {
margin-top: 6px;
color: var(--muted, #6b6560);
font-size: 13px;
font-style: normal;
line-height: 1.5;
}
/* 16px w polu, bo mniejszy stopien kaze Safari na iOS przyblizac strone przy
fokusie - i po wyslaniu nie wraca. Wysokosc 46px daje cel dotyku z WCAG 2.2
(2.5.8) razem z odstepem miedzy polami. */
.sch-contact-form .fluentform .ff-el-form-control {
box-sizing: border-box;
width: 100%;
min-height: 46px;
padding: 11px 14px;
border: 1px solid var(--border, #e4dccb);
border-radius: var(--radius-field, 10px);
background: #fff;
box-shadow: none;
color: var(--ink, #16130f);
font-family: inherit;
font-size: 16px;
line-height: 1.5;
transition: border-color 0.18s ease;
}
.sch-contact-form .fluentform textarea.ff-el-form-control {
min-height: 148px;
resize: vertical;
}
.sch-contact-form .fluentform .ff-el-form-control::placeholder {
color: var(--muted, #6b6560);
opacity: 1;
}
.sch-contact-form .fluentform .ff-el-form-control:hover {
border-color: rgba(22, 19, 15, 0.3);
}
/*
* Globalny pierscien fokusu motywu omija strony z klasa `sermons-design`
* (modul kazan niesie swoj wlasny, ale tylko w `.sermons-container`) - pola
* dostaja go tu wprost, w tym samym kolorze i miarze co reszta serwisu.
* `box-shadow: none` gasi poswiate wtyczki, zeby nie bylo dwoch obwodek,
* a `outline` przebija jej `outline: none` wieksza waga selektora.
*/
.sch-contact-form .fluentform :is(.ff-el-form-control, .ff-btn-submit, input, textarea, select, a):focus-visible {
outline: 3px solid var(--link-hover, #486ca0);
outline-offset: 3px;
border-color: var(--link-hover, #486ca0);
box-shadow: none;
}
/* Zgody i inne pola wyboru: kwadrat obok tekstu, nie pod nim. Formularz ich
teraz nie ma - obowiazek informacyjny niesie zdanie pod formularzem - ale
regula czeka, gdyby kiedys wrocily. */
.sch-contact-form .fluentform .ff-el-form-check-label {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--text, #4a4640);
font-size: 14px;
font-weight: 400;
line-height: 1.5;
}
.sch-contact-form .fluentform :is(input[type="checkbox"], input[type="radio"]) {
flex: 0 0 auto;
width: 20px;
height: 20px;
margin-top: 2px;
accent-color: var(--ink, #16130f);
}
.sch-contact-form .fluentform .ff-el-form-check-label a {
color: var(--ink, #16130f);
font-weight: 600;
}
/* Przycisk jak primary projektu: miara 14/26 przy 15px, pigulka, atrament. */
.sch-contact-form .fluentform .ff-btn-submit {
min-height: 48px;
padding: 14px 26px;
border: 1px solid var(--ink, #16130f);
border-radius: var(--radius-pill, 999px);
background: var(--ink, #16130f);
box-shadow: none;
color: var(--paper, #faf7f2);
font-family: inherit;
font-size: 15px;
font-weight: 600;
line-height: 1;
transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
/*
* Wtyczka umie wstrzyknac przy samych znacznikach wlasny `min-width: 100%`
* (ustawienie przycisku w panelu, waga 0-3-1) - pigulka na cala szerokosc
* kolumny czytala sie jak pas, nie jak przycisk. Selektor ma o klase wiecej,
* zeby to zdjac; wrapper wtyczki jest wysrodkowany, wiec przycisk staje na
* srodku sam.
*
* Klasa `.ff-btn` jest na przycisku zawsze. `.wpf_has_custom_css`, na ktorej
* ta regula stala wczesniej, pojawia sie tylko wtedy, gdy formularz ma wlasny
* CSS w panelu - na formularzu kontaktowym jej nie ma, wiec regula nigdy nie
* wchodzila.
*/
.sch-contact-form .fluentform form .ff-btn.ff-btn-submit {
min-width: 0;
}
/* Hover jak w calym serwisie: zloto i atrament - ta sama zamiana co przy
przyciskach blokowych i przycisku w naglowku. Samo przyciemnienie atramentu
bylo praktycznie niewidoczne. */
.sch-contact-form .fluentform .ff-btn-submit:hover,
.sch-contact-form .fluentform .ff-btn-submit:focus-visible {
border-color: var(--campus-tomaszow, #cdaa68);
background: var(--campus-tomaszow, #cdaa68);
color: var(--ink, #16130f);
}
/* Blad pola: obwodke i kolor zdania maluje wtyczka ze zmiennej wyzej, tu
tylko stopien pisma - 12px gubilo sie na papierze. */
.sch-contact-form .fluentform :is(.text-danger, .error) {
margin-top: 6px;
font-size: 14px;
line-height: 1.5;
}
/*
* Po wyslaniu pytanie z naglowka ("O co chcesz zapytac?") stalo nad
* podziekowaniem i czytalo sie jak zaproszenie do zadania pytania jeszcze raz
* - ta sama sprawa co potwierdzenie wplaty na "Wesprzyj nas", tylko tam klase
* dawal PHP, a tu wtyczka podmienia formularz bez przeladowania strony. `:has`
* radzi z tym sam; przegladarki bez niego po prostu zostawiaja naglowek.
*/
.entry-content .sch-contact-form:has(.ff-message-success) > :is(h2, .sch-contact-form-lead) {
display: none;
}
/* Potwierdzenie wyslania staje w miejscu formularza - biala karta na papierze,
zeby bylo widac, ze cos sie stalo. */
.sch-contact-form .fluentform .ff-message-success {
margin-top: 0;
padding: 22px 24px;
border: 1px solid rgba(22, 19, 15, 0.1);
border-radius: var(--radius-card, 18px);
background: #fff;
box-shadow: none;
color: var(--ink, #16130f);
font-size: 16px;
line-height: 1.6;
}
/*
* Tresc komunikatu wtyczka wkleja jako HTML z ustawien formularza, czyli
* zwykle jako akapit - a Astra daje kazdemu akapitowi w tresci 1.6em pod
* spodem (`.entry-content p`, waga 0-1-1). W karcie zostawala z tego pusta
* polka pod zdaniem. Zdjete jest tylko na skrajnych dzieciach, wiec gdyby
* komunikat mial kiedys dwa akapity, odstep miedzy nimi zostaje.
*/
.sch-contact-form .fluentform .ff-message-success > :first-child {
margin-top: 0;
}
.sch-contact-form .fluentform .ff-message-success > :last-child {
margin-bottom: 0;
}
/* --- Adresy i dojazd --- */
.entry-content > .sch-contact-places {
box-sizing: border-box;
margin-top: 72px;
padding: 72px 24px;
background: var(--ink, #16130f);
color: var(--paper, #faf7f2);
}
/* Pas formularza konczy sie wlasnym paddingiem, wiec dodatkowy margines nad
atramentem dawal 144px pustego papieru - granica pasm robila sie wiecej
warta od tresci. Ta sama poprawka co przy hero + formularzu i przy adresach
+ danych rejestrowych. Waga 0-3-0 przebija tez wersje z zapytania medialnego
nizej, wiec na telefonie odstep jest zdjety razem z nim. */
.entry-content > .sch-contact-form + .sch-contact-places {
margin-top: 0;
}
/* Miara 1200px jak w hero - kolumna wysrodkowana w oknie, wiec naglowek pasa
licuje z tytulem hero. O procentowym paddingu jest notka przy pasie
formularza: tam liczyl sie od kontenera Astry i karty szly niemal na cala
szerokosc okna. */
.entry-content .sch-contact-places > * {
box-sizing: border-box;
max-width: 1200px;
margin-right: auto;
margin-left: auto;
}
.entry-content .sch-contact-places > h2 {
color: var(--paper, #faf7f2);
}
/* Zdanie jest wezsze od miary, wiec automatyczne marginesy z reguly wyzej
zepchnelyby je na srodek pasa. Lewy margines dosuwa je do lewej krawedzi
miary - licuje z naglowkiem, a przy waskim oknie schodzi do zera. */
.entry-content .sch-contact-places > .sch-contact-places-lead {
max-width: 62ch;
margin-top: 14px;
margin-left: max(0px, calc(50% - 600px));
color: rgba(250, 247, 242, 0.78);
font-size: 16px;
line-height: 1.65;
}
/* Selektor powtarza pas: reset marginesow wyzej ma wage 0-2-0 i sama klasa
listy by go nie przebila - siatka stanelaby tuz pod zdaniem. */
.entry-content .sch-contact-places > .sch-contact-places-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin: 36px auto 0;
padding: 0;
list-style: none;
}
.sch-contact-place {
display: flex;
flex-direction: column;
overflow: hidden;
margin: 0;
border: 1px solid rgba(250, 247, 242, 0.14);
border-radius: var(--radius-card, 18px);
background: rgba(250, 247, 242, 0.05);
}
/* Mapka trzyma stale proporcje, wiec pas nie skacze przy doczytaniu
obrazka (i CLS zostaje na zerze). */
.sch-contact-place-map {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
border-bottom: 1px solid rgba(250, 247, 242, 0.14);
object-fit: cover;
}
.sch-contact-place-body {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 20px 22px 24px;
}
.entry-content .sch-contact-place-name {
display: flex;
gap: 10px;
align-items: baseline;
margin: 0;
color: var(--paper, #faf7f2);
font-size: 19px;
line-height: 1.25;
}
.sch-contact-place :is(.sch-contact-place-address, .sch-contact-place-time) {
margin: 6px 0 0;
color: rgba(250, 247, 242, 0.72);
font-size: 15px;
line-height: 1.5;
}
/*
* Selektor powtarza `.entry-content`: globalny kolor linku tresci
* (`.entry-content a:where(...)`, waga 0-1-1) przebijal sama klase, wiec
* odnosnik szarzal na atramencie, a po najechaniu robil sie niebieski
* globalnym hoverem. Ta sama poprawka co przy dojazdach na "Jestem tu nowy".
* Odstep nad odnosnikiem odsuwa go od adresu i godziny - to osobna akcja,
* nie kolejny wiersz danych.
*/
.entry-content .sch-contact-place-route {
display: inline-flex;
align-items: center;
margin-top: 22px;
padding-bottom: 5px;
border-bottom: 2px solid rgba(250, 247, 242, 0.5);
color: var(--paper, #faf7f2);
font-size: 14px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
}
.entry-content .sch-contact-place-route:hover,
.entry-content .sch-contact-place-route:focus-visible {
border-color: var(--paper, #faf7f2);
color: var(--paper, #faf7f2);
}
.entry-content .sch-contact-place-route:focus-visible {
outline: 3px solid var(--paper, #faf7f2);
outline-offset: 4px;
border-radius: 2px;
}
/* --- Dane rejestrowe --- */
.entry-content > .sch-contact-legal {
box-sizing: border-box;
margin-top: 72px;
padding: 64px 24px;
background: var(--subtle, #f6eedd);
}
/* Po pasie atramentowym dane siedza tuz pod nim - czytaja sie jak
przedluzenie stopki, a nie jak kolejna sekcja do przeczytania. */
.entry-content > .sch-contact-places + .sch-contact-legal {
margin-top: 0;
}
/*
* Cichy pas na koniec strony: kolumna stoi na srodku pasa, nie przy lewej
* krawedzi - przy miarze 1200px wygladala jak urwana. Wysrodkowanie to ten
* sam zabieg co pas formularza online i podziekowanie na "Wesprzyj nas".
*/
.entry-content .sch-contact-legal > h2,
.entry-content .sch-contact-legal > .sch-contact-legal-rows {
box-sizing: border-box;
max-width: 720px;
margin-right: auto;
margin-left: auto;
}
.entry-content .sch-contact-legal > h2 {
font-size: clamp(24px, 2.6vw, 30px);
text-align: center;
}
/* Odstep pod naglowkiem wlasnym marginesem - reset marginesow wyzej ma
wage 0-2-0 i sama klasa listy by go nie przebila. */
.entry-content .sch-contact-legal > .sch-contact-legal-rows {
margin-top: 32px;
border-top: 1px solid rgba(22, 19, 15, 0.14);
}
/*
* Etykieta nad wartoscia, nie obok niej. Przy ukladzie "etykieta z lewej,
* wartosc z prawej" dluga pelna nazwa organizacji nie miescila sie w wierszu
* i spadala pod etykiete, a krotkie numery zostawaly przy prawej krawedzi -
* kazdy wiersz wyrownywal sie inaczej. Tak wszystkie wygladaja tak samo,
* niezaleznie od dlugosci tresci i jezyka; ukrainskie etykiety sa znacznie
* dluzsze od polskich i tu tez sie mieszcza.
*/
.sch-contact-legal-row {
padding: 13px 0;
border-bottom: 1px solid rgba(22, 19, 15, 0.14);
}
.entry-content .sch-contact-legal-label,
.entry-content .sch-ministries-facts-label {
margin-bottom: 3px;
color: var(--muted, #6b6560);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
line-height: 1.4;
text-transform: uppercase;
}
.entry-content .sch-contact-legal-value,
.entry-content .sch-ministries-facts-value {
color: var(--ink, #16130f);
font-size: 16px;
font-weight: 600;
line-height: 1.45;
}
/* Selektor jak przy siatce wyzej - inaczej reguly ponizej nie przebijaja jej
wagi 0-3-0 i karty zostaja w trzech kolumnach takze na telefonie. */
@media (max-width: 900px) {
.entry-content .sch-contact-places > .sch-contact-places-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.entry-content > .sch-contact-form {
margin-top: 56px;
padding-top: 56px;
padding-bottom: 56px;
}
.entry-content > .sch-contact-places {
margin-top: 56px;
padding-top: 56px;
padding-bottom: 56px;
}
.entry-content > .sch-contact-legal {
padding-top: 48px;
padding-bottom: 48px;
}
}
@media (max-width: 620px) {
.entry-content .sch-contact-places > .sch-contact-places-list {
grid-template-columns: 1fr;
}
/* Na telefonie pigulka na cala szerokosc jest wygodniejsza do trafienia -
przy waskiej kolumnie przycisk zebrany do szerokosci napisu wyglada jak
drobny odnosnik, a nie jak konczaca akcja formularza. Selektor bez
`.wpf_has_custom_css`: patrz notka przy `min-width` wyzej. */
.sch-contact-form .fluentform form .ff-btn.ff-btn-submit {
width: 100%;
}
}
/* ==========================================================================
Strona "Sluzby" (`/sluzby/` i podstrony poszczegolnych sluzb)
Wzorce: inc/patterns-ministries.php. Wszystkie klasy tej rodziny zaczynaja
sie od `sch-ministries-`, takze na podstronach - sniff strony w PHP szuka
jednego prefiksu. Nic tutaj nie moze siegnac po `sch-visit-`, `sch-about-`,
`sch-support-` ani `sch-contact-`: dla tamtych rodzin te prefiksy sa
sygnalem "to moja strona", wiec pozyczona klasa zrobilaby ze Sluzb takze
tamta strone. Wspolne komponenty (karta na papierze, strzalka, wiersze
etykieta/wartosc) dziela sie odwrotnie - przez dopisany selektor w ich
wlasnych regulach wyzej.
========================================================================== */
/* Linki tych pasow maja wlasne stany - bez podkreslenia Astry (jak przy
sekcjach strony glownej i pozostalych stronach tresci). */
.entry-content :is(.sch-ministries-group, .sch-ministries-intro, .sch-ministries-serve, .sch-ministries-detail, .sch-ministries-facts, .sch-ministries-closing) a {
text-decoration: none;
}
/* Astra dokleja domyslny padding blokom najwyzszego poziomu w tresci. Lista
przy sekcjach strony glownej pokrywa juz `.sch-section`, `.sch-hero` i
`.sch-closing`, wiec zostaja tylko wlasne pasy tej rodziny. Nowsze rodziny
(wsparcie, kontakt) robia to samo: kazdy pas deklaruje swoj padding na
wadze 0-2-0, zamiast rosnac ta liste. */
.entry-content > :is(.sch-ministries-prayer, .sch-ministries-serve, .sch-ministries-facts, .sch-ministries-kids, .sch-ministries-left, .sch-ministries-right) {
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
/*
* Odstep miedzy blokami z globalnych stylow rdzenia
* (`:root :where(.is-layout-flow) > *`, 24px) dawal gorny margines kazdemu
* dziecku grupy poza pierwszym. Siatka kart i wiersze faktow trzymaja odstepy
* przez `gap`, wiec ten margines zsuwal karty 2 i 3 w dol i rzad przestawal
* licowac. Pelne uzasadnienie przy kartach "O nas" wyzej; `.entry-content`
* daje wage 0-2-0, czyli tyle samo co regula rdzenia, a pozniejsze ladowanie
* rozstrzyga.
*/
.entry-content :is(.sch-ministries-list, .sch-ministries-card, .sch-ministries-jump, .sch-ministries-facts-rows, .sch-ministries-facts-row) > * {
margin-top: 0;
margin-bottom: 0;
}
/* --- Hero (hub i podstrona) --- */
/* Zanim redakcja wybierze zdjecie, cover pokazuje sam gradient - atrament pod
nim trzyma kontrast tytulu. */
.sch-ministries-hero.wp-block-cover {
background-color: var(--ink, #16130f);
}
/* Tytul jest caly wytluszczony i w tej samej skali co pozostale strony
tresci - baza `.sch-hero .sch-hero-title` niesie polgruby 400 i wieksze
clamp, bo tak wyglada hero strony glownej (z akcentem w ). */
.sch-ministries-hero .sch-hero-title {
max-width: 16ch;
font-size: clamp(38px, 5vw, 64px);
font-weight: 700;
}
/* Waga 0-3-2: Astra farbuje akapity w coverze wlasna regula o tej sile. */
body .wp-block-cover.sch-ministries-hero p.sch-ministries-hero-standfirst {
max-width: 48ch;
margin: 16px 0 0;
color: rgba(250, 247, 242, 0.88);
font-size: 17px;
line-height: 1.55;
}
/* Kicker podstrony jest odnosnikiem do huba i czyta sie jak okruszek, wiec
kreska w spoczynku bylaby za mocna - zostaje sama interakcja. */
.sch-ministries-hero .sch-kicker a {
color: inherit;
}
.sch-ministries-hero .sch-kicker a:hover,
.sch-ministries-hero .sch-kicker a:focus-visible {
color: inherit;
text-decoration: underline;
text-underline-position: under;
text-underline-offset: 2px;
}
/* --- Gdzie zaczac: pigulki i legenda oznaczen --- */
.entry-content .sch-ministries-intro > .sch-ministries-intro-lead {
max-width: 62ch;
margin-top: 14px;
font-size: 16px;
line-height: 1.65;
}
/* Rdzen nadaje ukladowi flex `display: flex` dopiero przy renderowaniu
(`is-layout-flex`), a wzorzec ma wygladac tak samo takze w edytorze przed
zapisem - wiec pas pigulek deklaruje uklad sam. */
.sch-ministries-jump {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 24px;
}
.sch-ministries-jump-item a {
display: inline-flex;
align-items: center;
padding: 7px 14px;
border: 1px solid var(--border, #e4dccb);
border-radius: var(--radius-pill, 999px);
color: var(--ink, #16130f);
font-size: 14px;
font-weight: 600;
}
/* Pigulka odwraca sie w calosci: piasek pod spodem byl za blisko papieru
sekcji, zeby bylo widac, ze cos sie dzieje, a przy ikonie w krazku
zjadal jeszcze sam krazek. */
.sch-ministries-jump-item a:hover,
.sch-ministries-jump-item a:focus-visible {
border-color: var(--ink, #16130f);
background: var(--ink, #16130f);
color: var(--paper, #faf7f2);
}
/* Legenda musi stac przed pierwsza odznaka: inaczej karta nazywajaca jedno
miasto czyta sie tak, jakby przy pozostalych ktos zapomnial dopisac. */
.entry-content .sch-ministries-intro > .sch-ministries-legend {
max-width: 62ch;
margin-top: 20px;
color: var(--muted, #6b6560);
font-size: 14px;
line-height: 1.6;
}
/*
* Uklad "constrained" rdzenia centruje kazde wezsze dziecko grupy regula
* `.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull))`
* z `margin-left/right: auto !important`. Wszedzie, gdzie zwezamy miare
* czytania, wypycha to tekst na srodek sekcji - zdanie pod naglowkiem
* odjezdzalo od niego o kilkadziesiat pikseli i czytalo sie jak osobny blok.
* `!important` po naszej stronie jest jedynym wyjsciem: specyficznosc nie
* przebija `!important` rdzenia. Ta sama poprawka co przy praktykach "O nas".
*
* Samo `margin-left: 0` nie wystarczylo: sadza akapit na krawedzi paddingu
* sekcji, a rodzenstwo bez wlasnej miary rdzen kapuje do 1200px i centruje
* w sekcji. Na 1280px rozjazd wynosil 13px, na 1920px juz kilkaset - zdanie
* odjezdzalo w lewo od naglowka i od siatki kart pod nim. `max()` liczy
* krawedz tej samej miary co hero (patrz `calc((100% - 1200px) / 2)` przy
* wnetrzu coveru), wiec wszystko licuje niezaleznie od szerokosci okna.
*
* Akapit zamkniecia zostaje wysrodkowany, bo tak ma wygladac, wiec go tu
* nie ma.
*/
.entry-content .sch-ministries-intro > :is(.sch-ministries-intro-lead, .sch-ministries-legend),
.entry-content .sch-ministries-group > .sch-ministries-lead,
.entry-content .sch-ministries-detail > :is(p, .sch-ministries-card) {
margin-right: auto !important;
margin-left: max(0px, calc(50% - 600px)) !important;
}
/* --- Ikony sekcji, kafli i kart --- */
/*
* Ikona jest rysunkiem, nie trescia: siedzi w pseudoelemencie, wiec czytnik
* ekranu jej nie widzi i naglowek brzmi tak samo, jak zanim ja dostal.
*
* Glif wchodzi maska, nie tlem. Dzieki temu bierze kolor z miejsca, w ktorym
* stanal (`currentColor`), i jeden zestaw tokenow obsluguje pas jasny
* (atrament) i ciemny (papier) - bez drugiego kompletu rysunkow. Tam, gdzie
* ikona ma pod soba pigulke, tlo maluje `::before`, a sam glif `::after`:
* maska przycina wszystko, co element namaluje, wiec tlo i glif musza byc
* osobnymi pudelkami.
*
* Glif wybiera jedna klasa na bloku - `sch-ico--kids`, `sch-ico--chat` i tak
* dalej. Na gotowej stronie dopisuje sie ja w edytorze ("Dodatkowe klasy
* CSS"), w nowych wstawieniach przynosza ja wzorce z
* inc/patterns-ministries.php. Rozmiaru ani tla klasa nie niesie - to bierze
* sie z miejsca, w ktorym stanela: inaczej wyglada ikona naglowka sekcji,
* inaczej pigulki skrotu, inaczej karty.
*/
/* Rysunki: siatka 24px, kreska 1.6, zakonczenia i laczenia zaokraglone. */
:root {
--ico-kids: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6.8' cy='7.4' r='2.5'/%3E%3Cpath d='M2.8 20v-3a4 4 0 0 1 8 0v3'/%3E%3Ccircle cx='17.2' cy='7.4' r='2.5'/%3E%3Cpath d='M13.2 20v-3a4 4 0 0 1 8 0v3'/%3E%3Ccircle cx='12' cy='13.4' r='1.9'/%3E%3Cpath d='M8.9 20v-1.6a3.1 3.1 0 0 1 6.2 0V20'/%3E%3C/svg%3E");
--ico-groups: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.2' cy='8.2' r='3.1'/%3E%3Cpath d='M3 19.6a6.2 6.2 0 0 1 12.4 0'/%3E%3Ccircle cx='17.4' cy='9.6' r='2.4'/%3E%3Cpath d='M16.6 14.1a4.9 4.9 0 0 1 4.4 4.9'/%3E%3C/svg%3E");
--ico-flame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2c.4 2.6 2 3.6 3.2 5.2a6 6 0 0 1 1.3 3.8 4.5 4.5 0 0 1-9 0c0-1.3.5-2.2 1.2-3 0 1.1.6 1.9 1.6 1.9 1.2 0 1.7-.9 1.7-2.2 0-1.9-.6-3.6 0-5.7Z'/%3E%3Cpath d='M7.4 20.8h9.2'/%3E%3C/svg%3E");
--ico-city: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 20.6h18.8'/%3E%3Cpath d='M4.6 20.6V8.4l5.2-2.6v14.8'/%3E%3Cpath d='M9.8 20.6V11l5.4 2.2v7.4'/%3E%3Cpath d='M15.2 20.6v-4.4l4.2 1.7v3.1'/%3E%3C/svg%3E");
--ico-blocks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2 15.6 9.4H8.4z'/%3E%3Crect x='3.2' y='12.6' width='8.2' height='8.2' rx='1.6'/%3E%3Crect x='12.6' y='12.6' width='8.2' height='8.2' rx='1.6'/%3E%3C/svg%3E");
--ico-waves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 9.5c2.2-3.4 4.3-3.4 6.5 0s4.3 3.4 6.5 0 4.3-3.4 6 0'/%3E%3Cpath d='M2.5 15.5c2.2-3.4 4.3-3.4 6.5 0s4.3 3.4 6.5 0 4.3-3.4 6 0'/%3E%3C/svg%3E");
--ico-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.6 4H5.4A2.4 2.4 0 0 0 3 6.4v4.2A2.4 2.4 0 0 0 5.4 13H6v3.4L10.2 13h3.4A2.4 2.4 0 0 0 16 10.6V6.4A2.4 2.4 0 0 0 13.6 4Z'/%3E%3Cpath d='M18.6 8.6h.4A2 2 0 0 1 21 10.6v4a2 2 0 0 1-2 2h-.6V20l-3.6-3.4'/%3E%3C/svg%3E");
--ico-compass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M15.4 8.6 13.6 13.6 8.6 15.4l1.8-5z'/%3E%3C/svg%3E");
--ico-flower: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7.8' r='2.9'/%3E%3Ccircle cx='16.2' cy='12' r='2.9'/%3E%3Ccircle cx='12' cy='16.2' r='2.9'/%3E%3Ccircle cx='7.8' cy='12' r='2.9'/%3E%3Ccircle cx='12' cy='12' r='1.5'/%3E%3C/svg%3E");
--ico-rings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.4' cy='13.4' r='5.4'/%3E%3Ccircle cx='14.6' cy='13.4' r='5.4'/%3E%3Cpath d='m12 3.2 2.4 2.2-2.4 2.4-2.4-2.4z'/%3E%3C/svg%3E");
--ico-plane: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.3 3.2 2.9 10.3a.5.5 0 0 0 0 .9l4.9 2.1 9.6-6.4-6.9 8 7.4 3.3a.5.5 0 0 0 .7-.4l3.2-13.8a.5.5 0 0 0-.5-.8Z'/%3E%3Cpath d='M7.8 13.3v5.1l3-3.4'/%3E%3C/svg%3E");
--ico-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.2S4.6 15.6 4.6 10.5A3.9 3.9 0 0 1 12 8.6a3.9 3.9 0 0 1 7.4 1.9c0 5.1-7.4 9.7-7.4 9.7Z'/%3E%3C/svg%3E");
--ico-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.6S10.2 4.8 6.6 4.8H3.4v12.6h3.2c3.6 0 5.4 1.8 5.4 1.8z'/%3E%3Cpath d='M12 6.6s1.8-1.8 5.4-1.8h3.2v12.6h-3.2c-3.6 0-5.4 1.8-5.4 1.8z'/%3E%3Cpath d='M12 6.6v12.6'/%3E%3C/svg%3E");
--ico-speech: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18.6 4H5.4A2.4 2.4 0 0 0 3 6.4v7.2A2.4 2.4 0 0 0 5.4 16H7v4l4.6-4h7A2.4 2.4 0 0 0 21 13.6V6.4A2.4 2.4 0 0 0 18.6 4Z'/%3E%3Ccircle cx='8.4' cy='10' r='.9' fill='%23000' stroke='none'/%3E%3Ccircle cx='12' cy='10' r='.9' fill='%23000' stroke='none'/%3E%3Ccircle cx='15.6' cy='10' r='.9' fill='%23000' stroke='none'/%3E%3C/svg%3E");
--ico-ball: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M3.4 12h17.2'/%3E%3Cpath d='M12 3.4v17.2'/%3E%3Cpath d='M6.1 6.1C9 9 9 15 6.1 17.9'/%3E%3Cpath d='M17.9 6.1C15 9 15 15 17.9 17.9'/%3E%3C/svg%3E");
--ico-wrench: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.6 3.4a5 5 0 0 0-4.4 7.4l-7.3 7.3a2 2 0 0 0 2.8 2.8l7.3-7.3a5 5 0 0 0 6.5-6.2l-2.9 2.9-2.4-.7-.7-2.4z'/%3E%3C/svg%3E");
}
/* Klasa bloku wskazuje rysunek; reszte robi kontekst. */
.sch-ico--kids { --sch-ico: var(--ico-kids); }
.sch-ico--groups { --sch-ico: var(--ico-groups); }
.sch-ico--flame { --sch-ico: var(--ico-flame); }
.sch-ico--city { --sch-ico: var(--ico-city); }
.sch-ico--blocks { --sch-ico: var(--ico-blocks); }
.sch-ico--waves { --sch-ico: var(--ico-waves); }
.sch-ico--chat { --sch-ico: var(--ico-chat); }
.sch-ico--compass { --sch-ico: var(--ico-compass); }
.sch-ico--flower { --sch-ico: var(--ico-flower); }
.sch-ico--rings { --sch-ico: var(--ico-rings); }
.sch-ico--plane { --sch-ico: var(--ico-plane); }
.sch-ico--heart { --sch-ico: var(--ico-heart); }
.sch-ico--book { --sch-ico: var(--ico-book); }
.sch-ico--speech { --sch-ico: var(--ico-speech); }
.sch-ico--ball { --sch-ico: var(--ico-ball); }
.sch-ico--wrench { --sch-ico: var(--ico-wrench); }
/* Wspolne malowanie glifu. Kolor bierze sie z `currentColor`, wiec naglowek
ciemnego pasa dostaje papier bez ani jednej reguly wiecej. */
.entry-content .sch-ministries-group > h2[class*="sch-ico--"]::before,
.sch-ministries-jump-item[class*="sch-ico--"] > a::after,
.sch-ministries-card[class*="sch-ico--"]::after,
.sch-ministries-tile .sch-ministries-tile-title[class*="sch-ico--"]::after {
content: "";
flex: 0 0 auto;
background-color: currentColor;
-webkit-mask: var(--sch-ico) center / contain no-repeat;
mask: var(--sch-ico) center / contain no-repeat;
}
/* Naglowek sekcji: ikona stoi w wierszu z tekstem, bez tla pod soba. */
.entry-content .sch-ministries-group > h2[class*="sch-ico--"] {
display: flex;
align-items: center;
gap: 12px;
}
.entry-content .sch-ministries-group > h2[class*="sch-ico--"]::before {
width: 26px;
height: 26px;
}
/*
* Pigulka skrotu. Odkad hero nie ma juz przyciskow, ten pas jest jedyna
* nawigacja po sekcjach, wiec ikona dostaje krazek - ta sama forma co na
* kartach i w makiecie: krazek 32px, glif 18px, lewy padding pigulki
* zwezony do krazka. Krazek maluje `::before`, glif `::after` w warstwie
* nad nim; jego lewa krawedz to 9px paddingu plus 7px do srodka krazka.
*
* Ikona jest o stopien cichsza od etykiety i dochodzi do atramentu razem
* z ramka - hover i focus ida para, jak wszedzie.
*/
.sch-ministries-jump-item[class*="sch-ico--"] > a {
position: relative;
gap: 12px;
padding: 9px 20px 9px 9px;
}
.sch-ministries-jump-item[class*="sch-ico--"] > a::before {
content: "";
flex: 0 0 auto;
width: 32px;
height: 32px;
border-radius: var(--radius-pill, 999px);
background: var(--subtle, #f6eedd);
}
.sch-ministries-jump-item[class*="sch-ico--"] > a::after {
position: absolute;
top: 50%;
left: 16px;
width: 18px;
height: 18px;
margin-top: -9px;
color: var(--muted, #6b6560);
}
/* Odwrocona pigulka niesie krazek ze soba: papier na 14%, czyli ten sam
stopien co krazki kart na ciemnym pasie modlitwy. */
.sch-ministries-jump-item[class*="sch-ico--"] > a:hover::before,
.sch-ministries-jump-item[class*="sch-ico--"] > a:focus-visible::before {
background: rgba(250, 247, 242, 0.14);
}
.sch-ministries-jump-item[class*="sch-ico--"] > a:hover::after,
.sch-ministries-jump-item[class*="sch-ico--"] > a:focus-visible::after {
color: var(--paper, #faf7f2);
}
/*
* Karta: pigulka nad tytulem. Glif lezy w warstwie nad nia, wiec jego
* polozenie liczy sie od krawedzi karty - 24px i 26px paddingu karty
* (regula wspolna z kartami "O nas" i "Wesprzyj nas" wyzej) plus 11px do
* srodka pigulki 46px. Zmiana tamtego paddingu wymaga poprawki tych dwoch
* liczb.
*/
.sch-ministries-card[class*="sch-ico--"] {
position: relative;
}
.sch-ministries-card[class*="sch-ico--"]::before {
content: "";
box-sizing: border-box;
flex: 0 0 auto;
align-self: flex-start;
width: 46px;
height: 46px;
margin-bottom: 16px;
border-radius: var(--radius-pill, 999px);
background: var(--subtle, #f6eedd);
}
.sch-ministries-card[class*="sch-ico--"]::after {
position: absolute;
top: 35px;
left: 37px;
width: 24px;
height: 24px;
color: var(--ink, #16130f);
}
/* Pas modlitwy: pigulka nie moze byc plama piasku na atramencie. */
.sch-ministries-prayer .sch-ministries-card[class*="sch-ico--"]::before {
border: 1px solid rgba(250, 247, 242, 0.28);
background: rgba(250, 247, 242, 0.12);
}
.sch-ministries-prayer .sch-ministries-card[class*="sch-ico--"]::after {
color: var(--paper, #faf7f2);
}
/*
* Karta ze zdjeciem. Zdjecia nie niesie wzorzec - pusty blok obrazu dalby na
* stronie pusty ![]()
- tylko redakcja wstawia w edytorze blok Obraz jako
* pierwszy w karcie. Karta bez niego wyglada jak dotad, wiec zdjecia moga
* dochodzic po jednym.
*
* Zdjecie siega krawedzi karty (3:2), a pigulka ikony zachodzi na jego dolny
* brzeg. Pseudoelementy stoja w kolejnosci przed obrazem, wiec `order`
* ustawia obraz, pigulke i glif na poczatku. Glif schodzi z `absolute` do
* przeplywu: wysokosc zdjecia zalezy od szerokosci karty, a `top` w
* procentach liczy sie od wysokosci, nie od szerokosci.
*/
.sch-ministries-card:has(> .wp-block-image:first-child) {
overflow: hidden;
padding-top: 0;
}
.entry-content .sch-ministries-card > .wp-block-image:first-child {
order: -3;
margin: 0 -26px;
}
.entry-content .sch-ministries-card > .wp-block-image:first-child img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: 0;
}
/* Karta bez ikony: tytul odsuwa sie od zdjecia o padding karty. */
.entry-content .sch-ministries-card:not([class*="sch-ico--"]) > .wp-block-image:first-child {
margin-bottom: 24px;
}
/* Na zdjeciu pigulka jest atramentowa z glifem w papierze: piasek ginal na
jasnych zdjeciach, a atrament odcina sie od kazdego. */
.sch-ministries-card[class*="sch-ico--"]:has(> .wp-block-image:first-child)::before {
order: -2;
margin: -23px 0 0;
border: 3px solid #fff;
background: var(--ink, #16130f);
}
/* 46px pigulki, glif 24px w srodku: 35px w gore, 11px w bok, a dolny
margines oddaje 16px odstepu pigulki od tytulu. */
.sch-ministries-card[class*="sch-ico--"]:has(> .wp-block-image:first-child)::after {
position: static;
order: -1;
align-self: flex-start;
margin: -35px 0 27px 11px;
color: var(--paper, #faf7f2);
}
/* Pas modlitwy: pigulka jest tu przejrzysta, a na zdjeciu musi byc pelna. */
.sch-ministries-prayer .sch-ministries-card[class*="sch-ico--"]:has(> .wp-block-image:first-child)::before {
border-color: #211e1a;
background: #34312d;
}
/*
* Kafel: ikona wchodzi w tytul, nie w cover. Cover ma jedno dziecko flex i
* sadza tresc do dolu - dolozenie pudelka obok zepsuloby ten uklad, a
* naglowek jest zwyklym blokiem, ktory redakcja widzi w edytorze. Pigulka
* 40px, glif 24px, czyli 8px do srodka.
*/
.sch-ministries-tile .sch-ministries-tile-title[class*="sch-ico--"] {
position: relative;
}
.sch-ministries-tile .sch-ministries-tile-title[class*="sch-ico--"]::before {
content: "";
display: block;
box-sizing: border-box;
width: 40px;
height: 40px;
margin-bottom: 12px;
border: 1px solid rgba(250, 247, 242, 0.28);
border-radius: var(--radius-pill, 999px);
background: rgba(250, 247, 242, 0.12);
}
.sch-ministries-tile .sch-ministries-tile-title[class*="sch-ico--"]::after {
position: absolute;
top: 8px;
left: 8px;
width: 24px;
height: 24px;
}
/* --- Sekcje i siatka kart --- */
.entry-content .sch-ministries-group > .sch-ministries-lead {
max-width: 62ch;
margin-top: 14px;
font-size: 16px;
line-height: 1.65;
}
/* Selektor powtarza pas: reset marginesow wyzej ma wage 0-2-0 i sama klasa
siatki by go nie przebila - karty stanelyby tuz pod zdaniem. */
.entry-content .sch-ministries-group > .sch-ministries-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin: 36px auto 0;
}
/* Pas modlitwy i misji ma dwie karty - na trzeciej czesci konczylby sie pusta
kolumna. */
.entry-content .sch-ministries-group > .sch-ministries-list.is-two-up {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Link siedzi przy dolnej krawedzi karty, wiec karty z odnosnikiem i bez
licuja w rzedzie. To ta jedna wlasciwosc, dzieki ktorej etapowe dopisywanie
podstron wyglada na decyzje, a nie na brak. */
.sch-ministries-card {
display: flex;
flex-direction: column;
}
/*
* Odstep tytulu od tekstu (8px, jak w kartach "O nas" i "Wesprzyj nas").
* Wspolna regula karty stoi w arkuszu wyzej i ma te sama wage co reset
* marginesow tej rodziny, wiec reset ja zbijal do zera i tytul siedzial na
* tekscie. To samo dotyczy etykiet w pasie faktow nizej. Rodzina kontaktu
* nie ma tego problemu, bo tam reset stoi przed regulami odstepow.
*/
.entry-content .sch-ministries-card > .sch-ministries-card-title {
margin-bottom: 8px;
}
/* Odznaka i ikony profili odsuwaja sie od tekstu pod soba, nie od tytulu -
stad gorny margines, nie dolny. */
.entry-content .sch-ministries-card > :is(.sch-ministries-badge, .sch-ministries-social) {
margin-top: 14px;
margin-bottom: 0;
}
.entry-content .sch-ministries-card > .sch-ministries-card-link {
margin-top: auto;
padding-top: 16px;
}
/* Odstep kreski 5px - link stoi we wlasnym wierszu; uzasadnienie przy
`.sch-about-link` wyzej. */
.sch-ministries-card-link a {
display: inline-flex;
align-items: center;
padding-bottom: 5px;
border-bottom: 2px solid rgba(22, 19, 15, 0.25);
color: var(--ink, #16130f);
font-size: 14px;
font-weight: 600;
}
.sch-ministries-card-link a:hover,
.sch-ministries-card-link a:focus-visible {
border-bottom-color: var(--ink, #16130f);
color: var(--ink, #16130f);
}
/* Domena stoi pod etykieta, zeby wyjscie ze strony bylo jasne przed
klikniecien - `target` zostaje wylaczony, jak w calym motywie. */
.sch-ministries-card-domain {
display: block;
margin-top: 6px;
color: var(--muted, #6b6560);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.02em;
}
/* --- Profile spolecznosciowe sluzby (patrz [sch_ministry_social]) --- */
/*
* Tylko czesc sluzb prowadzi wlasne profile - The Flow, Meska sprawa, Jordan
* Basket Plus - wiec ikony wchodza shortcode'em, a nie na sztywno w karte.
* Ikony sa te same, co w stopce (inc/social-icons.php); tu zmienia sie
* tylko oprawa, bo tam kolka leza na atramencie, a tutaj na papierze.
*
* `align-self` jak przy odznace: karta jest kolumna flex, a element flex
* dostaje na osi poprzecznej domyslne `stretch` i rzad kolek rozciagnalby
* sie na cala szerokosc karty.
*/
.sch-ministries-social {
display: inline-flex;
flex-wrap: wrap;
align-self: flex-start;
gap: 10px;
margin-top: 14px;
}
.sch-ministries-social-link {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
/*
* 40px, nie 30px jak wczesniej. To sa samodzielne linki w tresci - jedyne
* wyjscie na profil sluzby - a nie chrom stopki, wiec maja byc celem do
* kliniecia, nie znaczkiem przy tekscie. Kolka stopki (26px, a duze 38px)
* zostaja bez zmian: tam ikony stoja w gestym spisie i wieksze
* rozpychalyby kolumny.
*/
width: 40px;
height: 40px;
border: 1px solid var(--border, #e4dccb);
border-radius: var(--radius-pill, 999px);
color: var(--muted, #6b6560);
}
.sch-ministries-social-link svg {
width: 18px;
height: 18px;
}
.sch-ministries-social-link:hover,
.sch-ministries-social-link:focus-visible {
border-color: var(--ink, #16130f);
color: var(--ink, #16130f);
}
/* Na zdjeciu i na ciemnym pasie kolka ida papierem, jak w stopce. */
.sch-ministries-tile .sch-ministries-social-link,
.sch-ministries-prayer .sch-ministries-social-link {
border-color: rgba(250, 247, 242, 0.32);
color: rgba(250, 247, 242, 0.9);
}
.sch-ministries-tile .sch-ministries-social-link:hover,
.sch-ministries-tile .sch-ministries-social-link:focus-visible,
.sch-ministries-prayer .sch-ministries-social-link:hover,
.sch-ministries-prayer .sch-ministries-social-link:focus-visible {
border-color: var(--paper, #faf7f2);
color: var(--paper, #faf7f2);
}
/* --- Odznaka kampusu (tylko wyjatki, patrz [sch_campus_badge]) --- */
.sch-ministries-badge {
display: inline-flex;
align-self: flex-start;
align-items: center;
gap: 8px;
margin-top: 14px;
padding: 4px 10px;
border: 1px solid rgba(22, 19, 15, 0.14);
border-radius: var(--radius-pill, 999px);
color: var(--muted, #6b6560);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
line-height: 1.5;
text-transform: uppercase;
}
/* Mniejsza od kropki w pasku godzin - tam stoi przy nazwie miasta w 18px. */
.sch-ministries-badge .sch-times-dot {
width: 8px;
height: 8px;
}
/* Sam kolor nie moze niesc informacji, wiec przy kropce zawsze stoi nazwa
miasta; slowo "Kampus" jest tylko etykieta i moze byc ciszejsze. */
.sch-ministries-badge-label {
color: rgba(22, 19, 15, 0.45);
}
/* --- Kafle "Dzieci i mlodziez" --- */
/*
* Pas idzie atramentem, jak "Modlitwa i misja" nizej na tej samej stronie.
* Powod jest czytelnosciowy, nie dekoracyjny: podpisy kafli sa papierowe, a
* na papierowym tle sekcji oko przechodzilo z czarnego naglowka wprost na
* bialy podpis lezacy na zdjeciu - z tych dwoch bialy zawsze przegrywal.
* Na atramencie caly pas jest jednym rejestrem, a kafel bez wgranego
* zdjecia (spada na `background-color` nizej) przestaje czytac sie jak
* dziura w tryptyku.
*
* Rytm jak przy pasie modlitwy: 72px do granicy pasa i 72px paddingu nad
* naglowkiem. Od dolu paddingu nie ma - kafle koncza pas wlasna krawedzia,
* tak samo jak siegaja krawedzi okna po bokach. Pas zdjec ma byc scianą, a
* atramentowa listwa pod nim wygladala jak niedomkniety margines.
*
* Pas jest jednym blokiem alignfull (patrz komentarz przy wzorcu), wiec
* naglowek trzyma miare 1200px jak wszedzie, a kafle znosza boczny padding
* ujemnym marginesem.
*/
.entry-content > .sch-ministries-kids {
box-sizing: border-box;
margin-top: 72px;
padding: 72px 24px 0;
background: var(--ink, #16130f);
color: var(--paper, #faf7f2);
}
.entry-content .sch-ministries-kids > * {
box-sizing: border-box;
max-width: 1200px;
margin-right: auto;
margin-left: auto;
}
/* Regula naglowkow motywu ma wage 0-1-1, wiec dziedziczenie koloru z pasa
jej nie rusza i h2 wyszloby atramentowe na atramencie. Jak w pasie
modlitwy. Kicker koloru nie ustawia nigdzie - dziedziczy papier z pasa. */
.entry-content .sch-ministries-kids > h2 {
color: var(--paper, #faf7f2);
}
/* Ten sam stopien wyciszenia co zdanie pasa modlitwy. */
.entry-content .sch-ministries-kids > .sch-ministries-lead {
color: rgba(250, 247, 242, 0.78);
}
.entry-content .sch-ministries-kids > .sch-ministries-tiles {
max-width: none;
margin-top: 28px;
margin-right: -24px;
margin-left: -24px;
}
/* Tryptyk bez szczelin - kafle sa pelnowymiarowym pasem zdjec, nie kartami,
dokladnie jak kafle "Jak mozemy pomoc" na stronie glownej. */
.sch-ministries-tiles.wp-block-columns {
gap: 0;
}
.sch-ministries-tiles .wp-block-column {
margin: 0;
}
/*
* Astra ponizej 544px rozsuwa kolumny regula
* `.wp-block-columns .wp-block-column:not(:last-child)` (0-3-0) - samo
* `margin: 0` wyzej (0-2-0) jej nie przebija i miedzy kaflami zostaje 20px
* pas. Kafle maja lezec jeden pod drugim bez szpar, jak przy kaflach
* pomocy na stronie glownej.
*/
.sch-ministries-tiles .wp-block-column:not(:last-child) {
margin-bottom: 0;
}
/* Stale proporcje zamiast `min-height`: pas nie skacze przy doczytaniu
zdjecia (CLS zostaje na zerze) i po zwinieciu na telefonie kafle nie
robia sie na pol ekranu wysokie. Ten sam wybor co przy kaflach pomocy. */
.sch-ministries-tile.wp-block-cover {
aspect-ratio: 4 / 3;
min-height: 0;
/* Zoomowane zdjecie nie moze wystawac poza kafel. */
overflow: hidden;
/*
* Tlo zapasowe kafla bez wgranego zdjecia. Odkad pas idzie atramentem,
* czysty `--ink` znikal w tle i po kaflu zostawal sam podpis wiszacy w
* powietrzu. Papier na 5% to ten sam stopien co karty na pasie modlitwy:
* widac, ze to kafel, i widac, ze czeka na zdjecie.
*/
background-color: #1f1b16;
/*
* Rdzen daje coverowi wlasny padding (17px) - przy gradiencie na spanie
* tla nie bylo tego widac, bo span lezy absolutnie na calym kaflu. Odkad
* gradient siedzi na `__inner-container`, ten padding wsuwa go od dolu i
* bokow i zostaje widoczna ramka niezakrytego zdjecia. Kafle pomocy i
* wizyty problemu nie maja, bo ich inner stoi `position: absolute` na
* calym kaflu; tutaj inner musi zostac w przeplywie (jego wysokosc niesie
* gradient podpisu), wiec padding zeruje sie tutaj.
*/
padding: 0;
}
/*
* Czytelnosc podpisu na zdjeciu stoi tu na dwoch warstwach, i to jest
* jedyne miejsce w motywie, gdzie potrzeba az dwoch. Powod jest w tresci:
* kafle pomocy niosa jedno slowo, kafle wizyty tytul i krotkie zdanie w
* pionie, a te trzy - tytul i dwa do siedmiu wierszy zdania, zaleznie od
* szerokosci okna. Podpis o zmiennej wysokosci nie da sie oslonic
* gradientem przypietym do kafla: przy waskim kaflu tekst wjezdza w gore,
* w jasna czesc kadru, ktorej taki gradient jeszcze nie przykrywa.
* Zmierzone na wgranych zdjeciach: sam gradient kafla daje 1,5:1 na
* telefonie i 2,8:1 przy 1024px, przy poprawnej geometrii i tak.
*
* Warstwa pierwsza, tutaj: lagodne przyciemnienie calego kafla, zeby dol
* zdjecia siadal w pas i zeby kadr nie krzyczal. Naprawia przy okazji blad
* wyjsciowy - cover niesie dimRatio 40, wiec rdzen wygaszal span tla do 0,4
* i mnozyl przez to caly gradient (dol kafla dostawal 0,31 zamiast 0,78, a
* pod tytulem wychodzilo 0,24, czyli 1,3:1 na ekranie projektora w
* "Rodzinnym Powerze"). Kazdy inny cover w motywie to `opacity` przywraca -
* ten jako jedyny nie przywracal.
*
* Warstwa druga stoi nizej, na `__inner-container`.
*
* `!important` celowo: cover niesie gradient w atrybucie style.
*/
.sch-ministries-tile .wp-block-cover__background.has-background-dim.has-background-dim-40 {
background: linear-gradient(180deg, rgba(22, 19, 15, 0) 18%, rgba(22, 19, 15, 0.22) 50%, rgba(22, 19, 15, 0.52) 100%) !important;
opacity: 1;
}
/*
* Warstwa druga: gradient przypiety do podpisu, nie do kafla.
*
* `__inner-container` jest dokladnie tak wysoki jak podpis (cover stawia go
* flexem na dole), wiec gradient na nim rosnie i maleje razem z tekstem -
* niezaleznie od tego, ile wierszy zrobi sie z jednego zdania i jak
* `object-fit: cover` przytnie kadr. Stopy sa w pikselach, nie w
* procentach: wygaszenie ma zajac dokladnie gorny padding i skonczyc sie
* tam, gdzie zaczyna sie tytul. W procentach dlugosc wygaszenia zalezalaby
* od wysokosci podpisu i przy dluzszym tekscie wchodzilaby w pierwszy
* wiersz (sprawdzone - schodzilo z 11:1 do 5:1).
*
* Posrednie przystanki sa po to, zeby to sie nie czytalo jak doklejony
* prostokat: rowny, liniowy skos daje widoczna krawedz na obu koncach.
*
* Razem z warstwa pierwsza: od 7,8:1 (telefon) do 12,9:1, na wszystkich
* szerokosciach od 360px do 1920px, mierzone na pikselach wgranych zdjec.
*/
.sch-ministries-tile .wp-block-cover__inner-container {
/*
* Inner jest jedynym elementem flex coveru i bez tego kurczy sie do
* szerokosci tekstu - w kaflu "The Flow", gdzie zdanie jest krotsze, mial
* 455px na 612px kafla i gradient urywal sie w polowie zdjecia.
*
* `!important`, bo rdzen ustawia tu `width: auto` selektorem z celowo
* zdublowana klasa:
* `.wp-block-cover.has-custom-content-position.has-custom-content-position.is-position-bottom-left .wp-block-cover__inner-container`
* (0-5-0). Przebicie go specyficznoscia znaczyloby powtorzenie calego
* tego lancucha po naszej stronie - `!important` jest tu czytelniejszy.
*/
width: 100% !important;
padding: 96px 36px 30px;
background: linear-gradient(180deg, rgba(22, 19, 15, 0) 0, rgba(22, 19, 15, 0.06) 24px, rgba(22, 19, 15, 0.22) 44px, rgba(22, 19, 15, 0.45) 64px, rgba(22, 19, 15, 0.65) 82px, rgba(22, 19, 15, 0.74) 96px);
}
/* O dwa punkty wiecej niz na kaflach wizyty: tamte sa pionowe i waskie, ten
pas jest poziomy i tytul ma w nim wiecej miejsca w wierszu. */
.sch-ministries-tile .sch-ministries-tile-title {
margin: 0;
color: var(--paper, #faf7f2);
font-size: 26px;
line-height: 1.15;
}
.sch-ministries-tile :is(.sch-ministries-tile-title, .sch-ministries-tile-text) a {
color: var(--paper, #faf7f2);
}
.sch-ministries-tile :is(.sch-ministries-tile-title, .sch-ministries-tile-text) a:hover,
.sch-ministries-tile :is(.sch-ministries-tile-title, .sch-ministries-tile-text) a:focus-visible {
color: var(--paper, #faf7f2);
text-decoration: underline;
text-underline-position: under;
text-underline-offset: 2px;
}
/*
* Zdanie idzie 16px i prawie pelnym papierem. 15px w 0,84 to miara dla
* tekstu na spokojnym tle - tutaj pod spodem jest tlum, wiec kazdy punkt
* wielkosci i kazdy procent krycia robi robote. Pelnego papieru nie biore:
* zdanie ma zostac cichsze od tytulu.
*/
body .wp-block-cover.sch-ministries-tile p.sch-ministries-tile-text {
margin: 10px 0 0;
color: rgba(250, 247, 242, 0.92);
font-size: 16px;
line-height: 1.55;
}
/*
* Najazd jak na kaflach pomocy: sam zoom zdjecia, bez rozjasnienia. Kafle
* pomocy gasza przy najezdzie drugie przyciemnienie, ale tam podpisem jest
* jedno slowo - tutaj pod tekstem lezy caly gradient i to on trzyma
* czytelnosc, wiec nie ma czego gasic.
*
* Spoczynkowe scale(1.01) to nie ozdoba, powod ten sam co przy kaflach
* pomocy: kolumny maja ulamkowe szerokosci i przy zaokragleniu w dol na
* krawedzi migal ~1px tla.
*
* `:focus-within` ma tu realna prace - w kaflu "The Flow" siedza dwa linki
* spolecznosciowe i wejscie w nie klawiatura ma wygladac tak samo jak najazd.
*/
.sch-ministries-tile .wp-block-cover__image-background {
transform: scale(1.01);
transition: transform 700ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
.sch-ministries-tile:hover .wp-block-cover__image-background,
.sch-ministries-tile:focus-within .wp-block-cover__image-background {
transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
.sch-ministries-tile .wp-block-cover__image-background {
transition: none;
}
}
/*
* Proporcje kafla schodza dwoma stopniami, bo podpis nie zwezi sie razem z
* kaflem - przy tej samej tresci wezszy kafel znaczy wiecej wierszy.
*
* Bez tego trojka kafli miedzy 782px (tam rdzen przestaje zwijac kolumny) a
* ~1040px robila sie na tyle niska, ze podpis nie miescil sie w 4:3 i
* `overflow: hidden` go obcinal. Przy 820px z kafla "Szkolka niedzielna"
* znikaly dwa wiersze - i to nie jest regresja tej poprawki, tak stoi na
* produkcji od poczatku; wieksza typografia tylko to odslonila.
*
* Do 1023px kafle ida jeden pod drugim (`flex-wrap` u rdzenia jest
* `nowrap !important` powyzej 782px, stad `!important` po naszej stronie) i
* biora 16/10, zeby pelnowymiarowy kafel nie zajal calego ekranu - ten sam
* wybor co przy kaflach wizyty. Miedzy 1024 a 1199px stoja w trojce, ale
* kwadratowe: to daje podpisowi okolo 120px zapasu zamiast 10px.
*/
@media (min-width: 1024px) and (max-width: 1199px) {
.sch-ministries-tile.wp-block-cover {
aspect-ratio: 1 / 1;
}
}
@media (max-width: 1023px) {
.sch-ministries-tiles.wp-block-columns {
flex-wrap: wrap !important;
}
.sch-ministries-tiles .wp-block-column {
flex-basis: 100% !important;
}
.sch-ministries-tile.wp-block-cover {
aspect-ratio: 16 / 10;
}
}
/*
* Telefon w poziomie. Ten sam pomysl co blok przy sekcjach strony glownej
* (patrz "Telefon w poziomie" wyzej): ekran jest szeroki, ale bardzo niski,
* wiec regula pisana dla telefonu w pionie robi z kafla kolos - na 852x393
* kafel mial 837x523, czyli 133% wysokosci ekranu.
*
* Sufit jest tu jednak 1023px, nie 860px jak tam. 860px nie lapie duzych
* telefonow: iPhone 15 Pro Max w poziomie ma 932x430 i dostawal kafel
* 917x573. 1023px konczy sie dokladnie tam, gdzie kafle przestaja isc w
* stosie, wiec caly zakres stosu jest pokryty. Blok strony glownej dostal
* ten sam sufit w 1.7.58 - oba trzymaja sie teraz tej samej liczby.
*
* Kafle zostaja jeden pod drugim, bo w trojce mialyby po ~280px szerokosci
* i zdanie rozsypaloby sie na siedem wierszy. Zamiast tego pas robi sie
* plaski (3:1): przy 852x393 kafel ma 837x279, czyli 71% ekranu, a przy
* 568x320 - 568x189, czyli 59%.
*
* Podpis idzie ciszej i ciasniej, bo inaczej na plaskim kaflu zjadlby cale
* zdjecie. Wygaszenie gradientu podpisu skraca sie ze 96 na 56px - musi byc
* krotsze niz zapas nad tytulem, a ten schodzi tu do 58px. Stopy zostaja w
* pikselach, z tego samego powodu co w wersji podstawowej.
*
* Sprawdzone na 568x320, 667x375, 740x360, 852x393, 932x430, 1023x500 i
* 560x520: kafel zajmuje 36-72% ekranu, podpis nigdzie nie jest przycinany,
* kontrast 15:1. Przy 1024x500 palke przejmuje trojka kwadratow (336x336,
* 67% ekranu), wiec na granicy nie ma skoku w zly uklad.
*/
@media (max-width: 1023px) and (max-height: 520px) and (min-width: 560px) {
.sch-ministries-tile.wp-block-cover {
aspect-ratio: 3 / 1;
}
.sch-ministries-tile .wp-block-cover__inner-container {
padding: 56px 28px 22px;
background: linear-gradient(180deg, rgba(22, 19, 15, 0) 0, rgba(22, 19, 15, 0.06) 14px, rgba(22, 19, 15, 0.22) 26px, rgba(22, 19, 15, 0.45) 38px, rgba(22, 19, 15, 0.65) 48px, rgba(22, 19, 15, 0.74) 56px);
}
.sch-ministries-tile .sch-ministries-tile-title {
font-size: 22px;
}
body .wp-block-cover.sch-ministries-tile p.sch-ministries-tile-text {
margin-top: 8px;
font-size: 15px;
}
.sch-ministries-tile .sch-ministries-social {
margin-top: 10px;
}
.sch-ministries-tile .sch-ministries-social-link {
width: 34px;
height: 34px;
}
.sch-ministries-tile .sch-ministries-social-link svg {
width: 16px;
height: 16px;
}
/* Kafel ma tu 3:1 i zapas nad tytulem schodzi do 56px - pigulka ikony
zjadlaby go w calosci i podpis wszedlby na zdjecie. Na plaskim kaflu
ikony po prostu nie ma; nic nie traci, bo nic nie niosla. */
.sch-ministries-tile .sch-ministries-tile-title[class*="sch-ico--"]::before,
.sch-ministries-tile .sch-ministries-tile-title[class*="sch-ico--"]::after {
display: none;
}
}
/* --- Modlitwa i misja: ciemny pas --- */
.entry-content > .sch-ministries-prayer {
box-sizing: border-box;
margin-top: 72px;
padding: 72px 24px;
background: var(--ink, #16130f);
color: var(--paper, #faf7f2);
}
/*
* Zwijanie gornego marginesu pasa ma sens tylko tam, gdzie stykaja sie dwa
* pasy z tlem - inaczej zostaje miedzy nimi pasek papieru, ktory czyta sie
* jak szew (stad ta poprawka przy pasach kontaktu). Przed ciemnym pasem tej
* strony stoi zwykla sekcja bez tla i bez dolnego paddingu, wiec zwiniecie
* zabieralo jedyny odstep: ostatnia karta dotykala krawedzi atramentu i
* wygladala na obcieta. Rytm zostaje wiec nietkniety - 72px do granicy pasa
* i 72px paddingu w srodku, czyli 144px miedzy trescia sekcji a trescia
* pasa, tak jak miedzy pasami kontaktu.
*
* Zostaje jedna para: jasny pas "Niedziela nie robi sie sama" i ciemne
* zamkniecie. Oba maja tlo, wiec maja licowac bez papieru miedzy nimi.
*/
.entry-content > .sch-ministries-serve + .sch-closing {
margin-top: 0;
}
/* Miara 1200px jak w hero - kolumna wysrodkowana w oknie, wiec naglowek pasa
licuje z tytulem hero. Pas jest w ukladzie przeplywowym (alignfull), wiec
nie dostaje miary od rdzenia tak jak sekcje w ukladzie ograniczonym. */
.entry-content .sch-ministries-prayer > * {
box-sizing: border-box;
max-width: 1200px;
margin-right: auto;
margin-left: auto;
}
.entry-content .sch-ministries-prayer > h2 {
color: var(--paper, #faf7f2);
}
/* Zdanie jest wezsze od miary, wiec automatyczne marginesy z reguly wyzej
zepchnelyby je na srodek pasa. Lewy margines dosuwa je do lewej krawedzi
miary, a przy waskim oknie schodzi do zera. */
.entry-content .sch-ministries-prayer > .sch-ministries-lead {
margin-left: max(0px, calc(50% - 600px));
color: rgba(250, 247, 242, 0.78);
font-size: 16px;
line-height: 1.65;
}
.sch-ministries-prayer .sch-ministries-card {
border-color: rgba(250, 247, 242, 0.14);
background: rgba(250, 247, 242, 0.05);
}
.sch-ministries-prayer .sch-ministries-card-title {
color: var(--paper, #faf7f2);
}
.entry-content .sch-ministries-prayer .sch-ministries-card-text {
color: rgba(250, 247, 242, 0.8);
}
/* --- "Niedziela nie robi sie sama": zespoly sluzbowe --- */
.entry-content > .sch-ministries-serve {
box-sizing: border-box;
margin-top: 72px;
padding: 72px 24px;
background: var(--subtle, #f6eedd);
}
.entry-content .sch-ministries-serve > * {
box-sizing: border-box;
max-width: 1200px;
margin-right: auto;
margin-left: auto;
}
.entry-content .sch-ministries-serve > .sch-ministries-serve-lead,
.entry-content .sch-ministries-serve > .sch-ministries-serve-note {
max-width: 68ch;
margin-top: 16px;
margin-left: max(0px, calc(50% - 600px));
color: var(--text, #4a4640);
font-size: 16px;
line-height: 1.65;
}
/* Adres siedzi w toku zdania, wiec kreska ma 2px odstepu - wiecej podchodzi
pod litery nastepnego wiersza. */
.sch-ministries-serve-note a {
padding-bottom: 2px;
border-bottom: 2px solid rgba(22, 19, 15, 0.25);
color: var(--ink, #16130f);
font-weight: 600;
}
.sch-ministries-serve-note a:hover,
.sch-ministries-serve-note a:focus-visible {
border-bottom-color: var(--ink, #16130f);
color: var(--ink, #16130f);
}
/* --- Podstrona: opis i cytat --- */
.entry-content .sch-ministries-detail > p {
max-width: 68ch;
}
.sch-ministries-quote {
margin: 28px 0 0;
padding: 2px 0 2px 20px;
border-left: 2px solid var(--campus-tomaszow, #cdaa68);
}
.entry-content .sch-ministries-quote p {
max-width: 60ch;
margin: 0;
color: var(--ink, #16130f);
font-size: 19px;
font-style: italic;
line-height: 1.5;
}
/* Karta pytan na podstronie stoi sama, wiec nie potrzebuje szerokosci rzedu. */
.entry-content .sch-ministries-detail > .sch-ministries-card {
max-width: 560px;
}
/* Samodzielny odnosnik ze strzalka (powrot do wszystkich sluzb). Odstep
kreski 5px, jak przy pozostalych linkach stojacych we wlasnym wierszu. */
.entry-content .sch-ministries-more {
margin-top: 24px;
}
.sch-ministries-more a {
display: inline-flex;
align-items: center;
padding-bottom: 5px;
border-bottom: 2px solid rgba(22, 19, 15, 0.25);
color: var(--ink, #16130f);
font-size: 14px;
font-weight: 600;
}
.sch-ministries-more a:hover,
.sch-ministries-more a:focus-visible {
border-bottom-color: var(--ink, #16130f);
color: var(--ink, #16130f);
}
/* Za zygzakiem (polowki nizej) lewa os strony jest rozbita, wiec karta
i powrot do sluzb staja na srodku jako jeden blok. Tekst karty zostaje
do lewej. Waga 0-4-0 przebija wyrownanie do siatki (0-3-0) wyzej. */
.entry-content :is(.sch-ministries-left, .sch-ministries-right) + .sch-ministries-detail > :is(.sch-ministries-card, .sch-ministries-more) {
margin-right: auto !important;
margin-left: auto !important;
}
.entry-content :is(.sch-ministries-left, .sch-ministries-right) + .sch-ministries-detail > .sch-ministries-more {
max-width: 560px;
text-align: center;
}
/* --- Podstrona: pas faktow (zdjecie + wiersze) --- */
/*
* Uklad media-text pisany od zera, na wadze 0-3-0 i 0-4-0 - tak jak polowki
* na "Jestem tu nowy": Astra laduje arkusze blokow rdzenia warunkowo, wiec
* pas potrafil stanac bez zadnego ukladu, a przy pelnej szerokosci tresc
* wystawala poza ekran. Deklaracje sa tu powtorzone swiadomie: te same
* regule dla `sch-visit-steps` i `sch-visit-kids` siedza w kilkunastu
* listach selektorow, a klasy z bazy opublikowanych stron nie mozna ruszyc.
* Scalenie obu pasow we wspolny alias to osobne zadanie.
*/
.entry-content .sch-ministries-facts {
box-sizing: border-box;
display: grid;
grid-template-rows: auto;
grid-template-columns: 50% 1fr;
margin-top: 72px;
}
.entry-content .sch-ministries-facts .wp-block-media-text__media {
position: relative;
grid-row: 1;
grid-column: 1;
height: 100%;
min-height: 480px;
margin: 0;
overflow: hidden;
background: var(--ink, #16130f);
}
/* Zdjecie wypelnia cala polowke (rdzeniowe is-image-fill-element). */
.entry-content .sch-ministries-facts .wp-block-media-text__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Waga 0-4-0: Astra ma wlasne paddingi tresci media-text o tej samej sile,
pozniejsze ladowanie rozstrzyga. */
.entry-content .sch-ministries-facts.alignfull .wp-block-media-text__content {
grid-row: 1;
grid-column: 2;
align-self: stretch;
min-width: 0;
padding: 64px max(24px, calc((100vw - 1200px) / 2)) 64px 56px;
background: var(--subtle, #f6eedd);
}
.entry-content .sch-ministries-facts .wp-block-media-text__content > h2 {
margin: 0;
}
.entry-content .sch-ministries-facts-rows {
margin-top: 24px;
border-top: 1px solid rgba(22, 19, 15, 0.14);
}
.sch-ministries-facts-row {
padding: 13px 0;
border-bottom: 1px solid rgba(22, 19, 15, 0.14);
}
/* Jak przy tytule karty wyzej: reset marginesow tej rodziny zbijal odstep
z wspolnej reguly wierszy etykieta/wartosc. */
.entry-content .sch-ministries-facts-row > .sch-ministries-facts-label {
margin-bottom: 3px;
}
/* Ostatni wiersz bez kreski - inaczej pas konczylby sie linia w powietrzu. */
.sch-ministries-facts-rows > .sch-ministries-facts-row:last-child {
border-bottom: 0;
}
/* --- Podstrona: polowki zdjecie + tekst (zygzak) --- */
/*
* Klasy dopisane w edytorze do bloku media-text: `sch-ministries-left`
* (tekst po lewej, na papierze) i `sch-ministries-right` (tekst po prawej, na
* piasku). Kilka pod rzad sklada zygzak bez odstepow miedzy pasami. Uklad
* od zera z tych samych powodow co pas faktow wyzej.
*/
.entry-content :is(.sch-ministries-left, .sch-ministries-right) {
box-sizing: border-box;
display: grid;
grid-template-rows: auto;
margin-top: 0;
margin-bottom: 0;
}
.entry-content .sch-ministries-left {
grid-template-columns: 1fr 50%;
background: var(--paper, #faf7f2);
}
.entry-content .sch-ministries-right {
grid-template-columns: 50% 1fr;
background: var(--subtle, #f6eedd);
}
/* Pierwszy pas zygzaka odsuwa sie od poprzedniej sekcji; zaraz pod hero
stoi na styk, bez paska papieru miedzy dwoma pelnymi pasami. */
.entry-content > :not(.sch-ministries-left, .sch-ministries-right) + :is(.sch-ministries-left, .sch-ministries-right) {
margin-top: 72px;
}
.entry-content > .sch-hero + :is(.sch-ministries-left, .sch-ministries-right).alignfull {
margin-top: 0;
}
.entry-content :is(.sch-ministries-left, .sch-ministries-right) .wp-block-media-text__media {
position: relative;
grid-row: 1;
height: 100%;
min-height: 480px;
margin: 0;
overflow: hidden;
background: var(--ink, #16130f);
}
.entry-content .sch-ministries-left .wp-block-media-text__media {
grid-column: 2;
}
.entry-content .sch-ministries-right .wp-block-media-text__media {
grid-column: 1;
}
.entry-content :is(.sch-ministries-left, .sch-ministries-right) .wp-block-media-text__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Waga 0-4-0 przez :is() z czteroklasowymi wariantami - Astra niesie wlasne
paddingi tresci media-text o tej samej sile. */
.entry-content :is(.sch-ministries-left.alignfull, .sch-ministries-right.alignfull) .wp-block-media-text__content {
grid-row: 1;
align-self: center;
min-width: 0;
}
.entry-content .sch-ministries-left.alignfull .wp-block-media-text__content {
grid-column: 1;
padding: 72px 56px 72px max(24px, calc((100vw - 1200px) / 2));
}
.entry-content .sch-ministries-right.alignfull .wp-block-media-text__content {
grid-column: 2;
padding: 72px max(24px, calc((100vw - 1200px) / 2)) 72px 56px;
}
.entry-content :is(.sch-ministries-left, .sch-ministries-right) .wp-block-media-text__content > h2 {
margin: 0 0 18px;
}
.entry-content :is(.sch-ministries-left, .sch-ministries-right) .wp-block-media-text__content > p {
margin: 14px 0 0;
color: var(--text, #4a4640);
font-size: 17px;
line-height: 1.6;
}
.entry-content :is(.sch-ministries-left, .sch-ministries-right) .wp-block-media-text__content > h2 + p {
margin-top: 0;
}
/* --- Podstrona i hub: zamkniecie --- */
.sch-ministries-closing.wp-block-cover {
background-color: var(--ink, #16130f);
}
/* Cover traci padding rdzenia (`.sch-closing.wp-block-cover`), wiec na
telefonie tekst dotykal krawedzi ekranu. Margines jak w reszcie motywu. */
.sch-ministries-closing .wp-block-cover__inner-container {
padding-right: 24px;
padding-left: 24px;
}
.sch-ministries-closing .sch-ministries-closing-title {
margin: 0;
color: var(--paper, #faf7f2);
font-size: clamp(34px, 4.6vw, 60px);
line-height: 1.04;
}
body .wp-block-cover.sch-ministries-closing p.sch-ministries-closing-lead {
max-width: 56ch;
margin: 18px auto 26px;
color: rgba(250, 247, 242, 0.82);
font-size: 16.5px;
line-height: 1.6;
}
/*
* Jasny pas zamykajacy: klasa `sch-closing--light` dopisana do coveru w
* edytorze. Dla grafik z pustym, jasnym miejscem u gory (rece na kremie):
* ciemna warstwa znika, tekst idzie w atramencie na krem, a grafika stoi
* przy dolnej krawedzi w pelnej szerokosci, bez przyciecia z bokow - 40vw to
* wysokosc obrazu 5:2 przy szerokosci okna. Grafika ma przezroczyste tlo,
* a pas daje piasek z palety, wiec szwu nie ma. Nie `is-light`: te klase rdzen sam dopisuje
* coverom z jasna nakladka.
*/
.sch-closing.sch-closing--light.wp-block-cover {
align-items: flex-start;
min-height: 0 !important;
background-color: var(--subtle, #f6eedd);
}
.sch-closing--light > .wp-block-cover__background {
display: none;
}
.sch-closing--light > .wp-block-cover__image-background {
top: auto;
bottom: 0;
height: 40vw;
object-position: center bottom !important;
}
.sch-closing.sch-closing--light .wp-block-cover__inner-container {
padding-top: 64px;
padding-bottom: calc(21vw + 24px);
color: var(--ink, #16130f);
}
.sch-closing--light :is(.sch-closing-title, .sch-ministries-closing-title) {
color: var(--ink, #16130f);
}
body .wp-block-cover.sch-closing.sch-closing--light p {
color: var(--text, #4a4640);
}
/* Przycisk odwrocony: atrament z papierem w napisie; hover jak przy papierowym. */
.sch-closing--light .sch-button-paper .wp-block-button__link {
background-color: var(--ink, #16130f);
color: var(--paper, #faf7f2);
}
.sch-closing--light .sch-button-paper .wp-block-button__link:hover {
background-color: var(--campus-tomaszow, #cdaa68);
color: var(--ink, #16130f);
}
/* Telefon: pelna szerokosc dalaby rece po 80px. Obraz trzyma stala
wysokosc i traci boki, rece zostaja duze pod tekstem. */
@media (max-width: 600px) {
.sch-closing--light > .wp-block-cover__image-background {
height: 260px;
}
.sch-closing.sch-closing--light .wp-block-cover__inner-container {
padding-top: 48px;
padding-bottom: 160px;
}
}
/* --- Zapytania medialne --- */
/* Selektor powtarza pas, jak przy siatce wyzej - inaczej regula nie przebija
jej wagi 0-3-0 i karty zostaja w trzech kolumnach takze na tablecie. */
@media (max-width: 900px) {
.entry-content .sch-ministries-group > .sch-ministries-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.entry-content .sch-ministries-facts {
grid-template-columns: 100%;
margin-top: 56px;
}
.entry-content .sch-ministries-facts .wp-block-media-text__media {
grid-row: 1;
grid-column: 1;
min-height: 280px;
}
.entry-content .sch-ministries-facts.alignfull .wp-block-media-text__content {
grid-row: 2;
grid-column: 1;
padding: 40px 22px 44px;
}
/* Zygzak na telefonie: zawsze zdjecie nad tekstem. */
.entry-content :is(.sch-ministries-left, .sch-ministries-right) {
grid-template-columns: 100%;
}
.entry-content > :not(.sch-ministries-left, .sch-ministries-right) + :is(.sch-ministries-left, .sch-ministries-right) {
margin-top: 56px;
}
.entry-content :is(.sch-ministries-left, .sch-ministries-right) .wp-block-media-text__media {
grid-row: 1;
grid-column: 1;
min-height: 280px;
}
.entry-content :is(.sch-ministries-left.alignfull, .sch-ministries-right.alignfull) .wp-block-media-text__content {
grid-row: 2;
grid-column: 1;
padding: 40px 22px 44px;
}
.entry-content > .sch-ministries-prayer {
margin-top: 56px;
padding: 56px 22px;
}
.entry-content > .sch-ministries-serve {
margin-top: 56px;
padding: 56px 22px;
}
/* Boczny luz jak w pozostalych pasach; kafle znosza go tym samym
ujemnym marginesem, wiec dalej siegaja krawedzi okna. Gorny padding
schodzi do 56px, jak w pozostalych pasach z tlem na tej szerokosci;
dolnego nadal nie ma. */
.entry-content > .sch-ministries-kids {
margin-top: 56px;
padding: 56px 22px 0;
}
.entry-content .sch-ministries-kids > .sch-ministries-tiles {
margin-right: -22px;
margin-left: -22px;
}
}
@media (max-width: 620px) {
.entry-content .sch-ministries-group > .sch-ministries-list,
.entry-content .sch-ministries-group > .sch-ministries-list.is-two-up {
grid-template-columns: 100%;
}
/* Naglowek sekcji schodzi tu o stopien, wiec ikona obok niego tez -
inaczej zaczyna prowadzic wiersz zamiast mu towarzyszyc. */
.entry-content .sch-ministries-group > h2[class*="sch-ico--"] {
gap: 11px;
}
.entry-content .sch-ministries-group > h2[class*="sch-ico--"]::before {
width: 20px;
height: 20px;
}
/* Krazek schodzi razem z pigulka; glif zostaje na 16px, bo nizej kreska
1.6 zaczyna sie zlewac. Lewa krawedz glifu to 6px paddingu plus 5px
do srodka krazka. */
.sch-ministries-jump-item[class*="sch-ico--"] > a {
gap: 8px;
padding: 6px 14px 6px 6px;
}
.sch-ministries-jump-item[class*="sch-ico--"] > a::before {
width: 26px;
height: 26px;
}
.sch-ministries-jump-item[class*="sch-ico--"] > a::after {
left: 11px;
width: 16px;
height: 16px;
margin-top: -8px;
}
}
/* ==========================================================================
Ruch
Subtelne animacje calej strony: karty-linki unosza sie o 3px, strzalki
linkow samodzielnych odsuwaja sie o 4px, przyciski lekko sie wciskaja,
a sekcje ponizej pierwszego ekranu pojawiaja sie raz (js/reveal.js).
Tylko transform, translate i opacity - bez przesuniec ukladu. Wszystko
za `no-preference`, wiec przy ograniczonym ruchu nic sie nie rusza.
========================================================================== */
@media (prefers-reduced-motion: no-preference) {
/*
* Pojawianie. Klase nadaje js/reveal.js tylko elementom ponizej
* pierwszego ekranu i zdejmuje ja po animacji. `translate` zamiast
* `transform`, zeby nie gryzc sie z uniesieniem kart; `:root` podnosi
* wage ponad wlasne `transition` kart (np. 0-2-1 kart kazan).
*/
:root .sch-reveal {
opacity: 0;
translate: 0 14px;
}
:root .sch-reveal.is-in {
opacity: 1;
translate: none;
transition: opacity var(--dur-reveal) var(--ease-out), translate var(--dur-reveal) var(--ease-out);
transition-delay: calc(var(--sch-reveal-i, 0) * 80ms);
}
/* Uniesienie kart, ktore w calosci sa linkiem. Kafle "Jestem tu nowy"
i Sluzb nie sa linkami - nie udaja klikalnosci. Kafle pomocy tylko
zoomuja zdjecie, bez uniesienia. */
.sch-campus-cards .sch-campus-card {
transition: box-shadow 0.15s ease, transform var(--dur-base) var(--ease-out);
}
.sch-campus-cards .sch-campus-card:hover,
.sch-campus-cards .sch-campus-card:focus-visible {
transform: translateY(-3px);
}
/* Strzalka linkow samodzielnych (wspolna strzalka wyzej). Podpisy
kafli pomocy maja wlasny, wiekszy odjazd przez margin-left. */
:is(.sch-section-more a, .sch-times .sch-times-route, .sch-visit-rows .sch-visit-route, .sch-contact-place-route, .sch-about-link a, .sch-support-way-link a, .sch-ministries-card-link a, .sch-ministries-more a)::after {
transition: transform var(--dur-base) var(--ease-out);
}
:is(.sch-section-more a, .sch-times .sch-times-route, .sch-visit-rows .sch-visit-route, .sch-contact-place-route, .sch-about-link a, .sch-support-way-link a, .sch-ministries-card-link a, .sch-ministries-more a):is(:hover, :focus-visible)::after {
transform: translateX(4px);
}
/* Wcisniecie przycisku. */
.wp-block-button__link:active {
transform: scale(0.97);
}
/*
* Menu mobilne. Rdzen wchodzi nakladka w 0.1s - to czyta sie jak
* przeskok. Ta sama animacja rdzenia, tylko dluzsza, a pozycje menu
* dochodza schodkowo po 35ms. Zamkniecie zostaje natychmiastowe.
*/
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
animation-duration: 250ms;
animation-timing-function: var(--ease-out);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
animation: sch-menu-item-in 300ms var(--ease-out) backwards;
animation-delay: calc(60ms + var(--sch-menu-i, 0) * 35ms);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(2) { --sch-menu-i: 1; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(3) { --sch-menu-i: 2; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) { --sch-menu-i: 3; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(5) { --sch-menu-i: 4; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(n+6) { --sch-menu-i: 5; }
@keyframes sch-menu-item-in {
from {
opacity: 0;
translate: 0 8px;
}
}
}