/* ===================================================================== Fundacja PowiedzBoguTak, style motywu Kolory to zmienne CSS przełączane atrybutem data-theme na . Palety theme.json wskazują na te zmienne, więc każdy blok, któremu nadasz kolor „Akcent” czy „Karta”, sam przełączy się między motywami. ===================================================================== */ :root, :root[data-theme="dark"] { color-scheme: dark; --pbt-ink: #f0ece6; --pbt-bg: #16141c; --pbt-bg-2: #1c1924; --pbt-card: rgba(255, 255, 255, .05); --pbt-card-hover: rgba(255, 255, 255, .08); --pbt-hover: rgba(255, 255, 255, .07); --pbt-line: rgba(240, 236, 230, .14); --pbt-muted: rgba(240, 236, 230, .68); --pbt-soft: rgba(240, 236, 230, .5); --pbt-accent: #ff7a45; --pbt-accent-soft: #ff9f6e; --pbt-accent-tint: rgba(255, 122, 69, .16); --pbt-on-accent: #16141c; --pbt-panel-a: #2a2233; --pbt-panel-b: #1b1822; --pbt-footer: #121017; --pbt-field: rgba(0, 0, 0, .2); --pbt-shadow: rgba(0, 0, 0, .3); --pbt-r: 24px; --pbt-r-sm: 14px; --pbt-r-xl: 28px; } :root[data-theme="light"] { color-scheme: light; --pbt-ink: #1d1a24; --pbt-bg: #f7f4ef; --pbt-bg-2: #eee9e1; --pbt-card: rgba(29, 26, 36, .045); --pbt-card-hover: rgba(29, 26, 36, .085); --pbt-hover: rgba(29, 26, 36, .06); --pbt-line: rgba(29, 26, 36, .14); --pbt-muted: rgba(29, 26, 36, .7); --pbt-soft: rgba(29, 26, 36, .52); --pbt-accent-soft: #b9491a; --pbt-accent-tint: rgba(255, 122, 69, .14); --pbt-panel-a: #ffffff; --pbt-panel-b: #efe6dc; --pbt-footer: #eee9e1; --pbt-field: #ffffff; --pbt-shadow: rgba(29, 26, 36, .14); } /* ---------- podstawy ---------- */ html { scroll-behavior: smooth; } body { text-wrap: pretty; -webkit-font-smoothing: antialiased; transition: background-color .3s, color .3s; } :focus-visible { outline: 2px solid var(--pbt-accent); outline-offset: 3px; border-radius: 6px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } .pbt-main { min-height: 60vh; overflow-x: clip; } /* WordPress wstawia odstęp między nagłówkiem, treścią i stopką. W makiecie go nie ma. */ .wp-site-blocks > * + * { margin-block-start: 0 !important; } /* Układ „constrained” WordPressa centruje węższe bloki; projekt jest wyrównany do lewej. */ .pbt-main .is-layout-constrained > :where(:not(.alignfull):not(.alignwide):not(.aligncenter)), .pbt-footer .is-layout-constrained > :where(:not(.alignfull):not(.alignwide):not(.aligncenter)) { margin-left: 0 !important; margin-right: 0 !important; } .pbt-main .is-layout-constrained > .has-text-align-center { margin-left: auto !important; margin-right: auto !important; } /* to samo w edytorze bloków (tam nie ma opakowania .pbt-main) */ .editor-styles-wrapper .is-layout-constrained > :where(:not(.alignfull):not(.alignwide):not(.aligncenter):not(.has-text-align-center)) { margin-left: 0 !important; margin-right: 0 !important; } .pbt-section { padding-top: clamp(48px, 6vw, 88px); } .pbt-section--last { padding-bottom: clamp(48px, 6vw, 88px); } .wp-block-heading em { font-style: italic; color: var(--pbt-accent-soft); } h1.wp-block-heading, h1.wp-block-post-title { max-width: 17ch; } h2.wp-block-heading { max-width: 22ch; } /* ---------- style akapitów ---------- */ .is-style-eyebrow { font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--pbt-accent-soft); margin-bottom: 0; } .is-style-eyebrow.pbt-eyebrow-dot::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--pbt-accent); margin-right: 9px; vertical-align: 1px; animation: pbt-pulse 3.4s ease-in-out infinite; } .is-style-label { font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--pbt-soft); margin: 0 0 12px; } .is-style-lead { font-size: 1.03rem; line-height: 1.7; color: var(--pbt-muted); max-width: 56ch; } .pbt-muted { color: var(--pbt-muted); } .pbt-soft { color: var(--pbt-soft); font-size: .9rem; } .pbt-note { font-size: .875rem; line-height: 1.7; color: var(--pbt-soft); max-width: 52ch; } /* ---------- grupy: karta / panel ---------- */ .is-style-card { background: var(--pbt-card); border-radius: var(--pbt-r); padding: 26px; transition: background-color .3s, transform .3s, box-shadow .3s; } a.is-style-card:hover, .pbt-hoverable.is-style-card:hover { background: var(--pbt-card-hover); transform: translateY(-3px); } .is-style-panel { background: linear-gradient(120deg, var(--pbt-panel-a), var(--pbt-panel-b)); border-radius: var(--pbt-r-xl); padding: clamp(26px, 3.2vw, 44px); } .is-style-panel-flat { background: var(--pbt-bg-2); border-radius: var(--pbt-r-xl); padding: clamp(26px, 3.2vw, 44px); } .pbt-tint { background: rgba(255, 122, 69, .1); border-radius: var(--pbt-r); padding: 26px; } /* ---------- statut: tekst jednolity ---------- */ .pbt-main .pbt-page--statute > .is-style-lead { margin: 20px 0 0; font-size: 16.5px; line-height: 1.75; max-width: 60ch; } .pbt-main .pbt-page--statute .pbt-statute__actions { margin-top: 26px; } .pbt-main .pbt-statute-text { max-width: none; margin: 44px 0 0; padding: clamp(28px, 4vw, 56px); border-radius: var(--pbt-r-xl); background: var(--pbt-bg-2); font-size: 15.5px; line-height: 1.75; } .pbt-main .pbt-statute-text > * + * { margin-top: 14px; } .pbt-main .pbt-statute-text .pbt-statute__title { font-size: 22px; line-height: 1.3; text-align: center; letter-spacing: .02em; text-transform: uppercase; margin: 0 0 8px; } .pbt-main .pbt-statute-text .pbt-statute__chapter { font-size: 17px; line-height: 1.4; text-align: center; letter-spacing: .06em; text-transform: uppercase; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--pbt-line); } .pbt-main .pbt-statute-text .pbt-statute__chapter-name { display: block; font-size: 15px; letter-spacing: .1em; color: var(--pbt-muted); margin-top: 6px; } .pbt-main .pbt-statute-text .pbt-statute__par { font-size: 15.5px; text-align: center; margin-top: 30px; letter-spacing: .04em; } .pbt-main .pbt-statute-text .pbt-statute__sub { font-size: 16px; line-height: 1.35; margin-top: 28px; letter-spacing: 0; text-transform: none; } .pbt-main .pbt-statute-text .pbt-statute__attach { margin-top: 56px; } .pbt-main .pbt-page--doc .pbt-statute__box { margin-top: 28px; max-width: 760px; font-size: 15px; line-height: 1.65; } .pbt-main .pbt-statute-text .pbt-statute__lab > li { padding-left: 3.2em; } .pbt-main .pbt-statute-text .pbt-statute__lab > li > strong { min-width: 2.6em; } .pbt-main .pbt-statute-text h2, .pbt-main .pbt-statute-text h3 { max-width: none; } .pbt-main .pbt-statute-text > p, .pbt-main .pbt-statute-text > ol, .pbt-main .pbt-statute-text > ul { margin: 14px 0 0; } .pbt-main .pbt-statute-text .pbt-statute__par + * { margin-top: 10px; } .pbt-main .pbt-statute-text .pbt-statute__title + .pbt-statute__chapter { margin-top: 12px; border-top: 0; padding-top: 0; } .pbt-main .pbt-statute-text ol, .pbt-main .pbt-statute-text ul { margin: 0; padding-left: 0; list-style: none; } .pbt-main .pbt-statute-text li { position: relative; padding-left: 2.4em; margin: 0 0 8px; } .pbt-main .pbt-statute-text li::before { position: absolute; left: 0; top: 0; min-width: 2em; text-align: right; color: var(--pbt-muted); } .pbt-main .pbt-statute-text .pbt-statute__ol { counter-reset: ol var(--pbt-start, 0); } .pbt-main .pbt-statute-text .pbt-statute__ol > li { counter-increment: ol; } .pbt-main .pbt-statute-text .pbt-statute__ol > li::before { content: counter(ol) "."; } .pbt-main .pbt-statute-text .pbt-statute__pts { counter-reset: pts; } .pbt-main .pbt-statute-text .pbt-statute__pts > li { counter-increment: pts; padding-left: 3em; } .pbt-main .pbt-statute-text .pbt-statute__pts > li::before { content: counter(pts) ")"; min-width: 2.4em; } .pbt-main .pbt-statute-text .pbt-statute__dash > li { padding-left: 1.6em; } .pbt-main .pbt-statute-text .pbt-statute__dash > li::before { content: "\2013"; min-width: 1em; } .pbt-main .pbt-statute-text .pbt-statute__letters > li { padding-left: 3.2em; } .pbt-main .pbt-statute-text .pbt-statute__letters > li > strong { position: absolute; left: 0; top: 0; min-width: 2.6em; text-align: right; font-weight: 500; color: var(--pbt-muted); } .pbt-main .pbt-statute-text .pbt-statute__pkd > li > em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--pbt-accent); margin-right: .35em; } /* ---------- numer konta: bez łamania linii, kopiowanie kliknięciem ---------- */ .pbt-nowrap { white-space: nowrap; } .pbt-copy { all: unset; display: inline; cursor: pointer; white-space: nowrap; position: relative; font: inherit; font-size: .96em; font-variant-numeric: tabular-nums; letter-spacing: .01em; color: inherit; border-bottom: 1px dashed currentColor; padding-bottom: 1px; transition: color .2s, border-color .2s; } .pbt-copy:hover, .pbt-copy:focus-visible { color: var(--pbt-accent); } .pbt-copy:focus-visible { outline: 2px solid var(--pbt-accent); outline-offset: 3px; border-radius: 2px; } .pbt-copy::after { content: attr(data-done); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translate(-50%, 4px); background: var(--pbt-accent); color: #fff; font-size: 12px; letter-spacing: .04em; line-height: 1; padding: 6px 9px; border-radius: 6px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .2s, transform .2s; } .pbt-copy.is-copied::after { opacity: 1; transform: translate(-50%, 0); } /* ---------- przyciski ---------- */ .wp-block-button__link { transition: transform .25s, box-shadow .25s, background-color .25s, border-color .25s, color .25s; text-decoration: none; } .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(255, 122, 69, .3); } .is-style-ghost .wp-block-button__link { background: transparent; color: var(--pbt-ink); border: 1px solid var(--pbt-line); } .is-style-ghost .wp-block-button__link:hover { border-color: var(--pbt-accent); background: rgba(255, 122, 69, .08); box-shadow: none; color: var(--pbt-ink); } .is-style-pill .wp-block-button__link { border-radius: 999px; padding: .55rem 1.1rem; font-size: .85rem; background: transparent; color: var(--pbt-muted); border: 1px solid var(--pbt-line); } .is-style-pill .wp-block-button__link:hover { border-color: var(--pbt-accent); color: var(--pbt-ink); box-shadow: none; } .pbt-link-more { font-size: .9rem; color: var(--pbt-accent-soft); } .pbt-link-more a { text-decoration: none; } .pbt-link-more a:hover { color: var(--pbt-accent); } /* ---------- nagłówek ---------- */ /* Przyklejony nagłówek: sticky musi być na elemencie
z części szablonu, bo wewnętrzna grupa ma dokładnie jego wysokość i nie miałaby się w czym przyklejać. */ .wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 30; } .pbt-header { background: color-mix(in srgb, var(--pbt-bg) 86%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--pbt-line); padding-top: 14px; padding-bottom: 14px; } .pbt-header__inner { gap: clamp(12px, 2vw, 24px); align-items: center; } .pbt-brand { gap: 13px; align-items: center; } .pbt-brand .wp-block-site-logo img { width: 38px; height: 38px; border-radius: 50%; display: block; } .pbt-brand .wp-block-site-title a { text-decoration: none; } .pbt-header__nav { gap: 6px; align-items: center; margin-left: auto; } .pbt-nav .wp-block-navigation-item__content { padding: 9px 15px; border-radius: 12px; color: var(--pbt-muted); transition: background-color .25s, color .25s; text-decoration: none; } .pbt-nav .wp-block-navigation-item__content:hover, .pbt-nav .current-menu-item > .wp-block-navigation-item__content, .pbt-nav .wp-block-pages-list__item.current-menu-item > a { background: var(--pbt-hover); color: var(--pbt-ink); } .pbt-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--pbt-bg); color: var(--pbt-ink); } .pbt-nav .wp-block-navigation__responsive-container-open, .pbt-nav .wp-block-navigation__responsive-container-close { color: var(--pbt-ink); } .pbt-header__nav .wp-block-buttons .wp-block-button__link { padding: .65rem 1.25rem; font-size: .85rem; border-radius: 12px; } .pbt-header__nav .wp-block-buttons .wp-block-button__link:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(255, 122, 69, .28); } .pbt-theme-toggle { display: inline-grid; place-items: center; width: 38px; height: 38px; background: transparent; border: 1px solid var(--pbt-line); border-radius: 12px; color: var(--pbt-muted); cursor: pointer; transition: border-color .25s, color .25s; } .pbt-theme-toggle:hover { border-color: var(--pbt-accent); color: var(--pbt-ink); } .pbt-theme-toggle__moon { display: none; } :root[data-theme="light"] .pbt-theme-toggle__moon { display: block; } :root[data-theme="light"] .pbt-theme-toggle__sun { display: none; } /* przełącznik języka Polylang (jeśli zainstalowany) */ .pbt-header__nav .wp-block-polylang-language-switcher, .pbt-header__nav .pll-switcher { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; } .pbt-header__nav .pll-switcher a, .pbt-header__nav .wp-block-polylang-language-switcher a { display: inline-block; padding: 8px 12px; border-radius: 12px; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--pbt-muted); border: 1px solid var(--pbt-line); text-decoration: none; } .pbt-header__nav .pll-switcher a:hover { border-color: var(--pbt-accent); color: var(--pbt-ink); } /* ---------- hero ---------- */ .pbt-hero { padding-top: clamp(40px, 5.5vw, 76px); } .pbt-hero .wp-block-columns { align-items: center; gap: clamp(28px, 4vw, 56px); } .pbt-hero h1 { margin-top: 22px; max-width: 16ch; } .pbt-hero .is-style-lead { margin-top: 24px; max-width: 50ch; } .pbt-hero .wp-block-buttons { margin-top: 32px; } .pbt-hero__photo { position: relative; width: min(400px, 100%); margin-left: auto; } .pbt-hero__photo::before { content: ""; position: absolute; inset: -26px; border-radius: 50%; border: 1px dashed var(--pbt-accent-tint); pointer-events: none; animation: pbt-spin 30s linear infinite; } .pbt-hero__photo img, .pbt-hero__photo .wp-block-image { border-radius: 28px; overflow: hidden; display: block; } .pbt-hero__photo img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; background: var(--pbt-bg-2); } /* ---------- numerki, kroki ---------- */ .pbt-num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--pbt-r-sm); background: var(--pbt-accent-tint); color: var(--pbt-accent-soft); font-size: 15px; margin: 0 0 14px; } .pbt-steps .wp-block-column { display: flex; flex-direction: column; } .pbt-steps .is-style-card { height: 100%; display: flex; flex-direction: column; gap: 14px; } .pbt-steps .is-style-card > * { margin: 0; } .pbt-steps .pbt-link-more { margin-top: auto; } /* ---------- pasek CTA ---------- */ .pbt-banner { display: flex; gap: clamp(24px, 3vw, 48px); flex-wrap: wrap; align-items: center; justify-content: space-between; } .pbt-banner__quote { font-size: clamp(22px, 2.6vw, 32px); line-height: 1.3; letter-spacing: -.02em; max-width: 26ch; margin: 0; } .pbt-banner .pbt-soft { margin: 14px 0 0; } /* ---------- FAQ (details) ---------- */ .is-style-faq { background: var(--pbt-card); border-radius: var(--pbt-r); overflow: hidden; margin-bottom: 12px; } .is-style-faq summary { display: flex; gap: 20px; align-items: center; justify-content: space-between; list-style: none; padding: 22px 26px; cursor: pointer; letter-spacing: -.01em; transition: color .25s; } .is-style-faq summary::-webkit-details-marker { display: none; } .is-style-faq summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--pbt-accent-tint); color: var(--pbt-accent-soft); display: grid; place-items: center; font-size: 15px; } .is-style-faq[open] summary::after { content: "−"; } .is-style-faq summary:hover { color: var(--pbt-accent-soft); } .is-style-faq > :not(summary) { padding: 0 26px 24px; margin: 0; max-width: 72ch; color: var(--pbt-muted); font-size: .95rem; line-height: 1.75; } /* ---------- oś czasu ---------- */ .pbt-timeline > .wp-block-group { margin-bottom: 14px; } .pbt-timeline__item { display: grid; grid-template-columns: minmax(0, 92px) minmax(0, 1fr); gap: clamp(16px, 2.5vw, 36px); } .pbt-timeline__year { font-size: 24px; margin: 0; color: var(--pbt-accent-soft); } .pbt-timeline__item h3 { margin: 0; } .pbt-timeline__item p:not(.pbt-timeline__year) { margin: 10px 0 0; max-width: 60ch; color: var(--pbt-muted); } /* ---------- filary, role ---------- */ .pbt-pillars { list-style: none; padding: 0; margin: 0; } .pbt-pillars li { font-size: 1.05rem; line-height: 1.45; padding: 0 0 14px; margin: 0 0 14px; border-bottom: 1px solid var(--pbt-line); } .pbt-roles { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; counter-reset: pbt-role; } .pbt-roles li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 14px 18px; border-radius: var(--pbt-r-sm); background: var(--pbt-card); counter-increment: pbt-role; } .pbt-roles li::before { content: counter(pbt-role, decimal-leading-zero); font-size: 13px; color: var(--pbt-accent-soft); } /* ---------- ludzie (zarząd, wolontariusze) ---------- */ .pbt-people .wp-block-post-template { gap: 18px; } .pbt-people .wp-block-post { background: var(--pbt-card); border-radius: var(--pbt-r); padding: 26px; display: flex; flex-direction: column; gap: 12px; transition: background-color .3s; } .pbt-people .wp-block-post:hover { background: var(--pbt-card-hover); } .pbt-people .wp-block-post-featured-image { width: 88px; margin: 0 0 4px; } .pbt-people .wp-block-post-featured-image img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; display: block; } .pbt-people--compact .wp-block-post { flex-direction: row; align-items: center; gap: 16px; padding: 22px; } .pbt-people--compact .wp-block-post-featured-image, .pbt-people--compact .wp-block-post-featured-image img { width: 64px; height: 64px; margin: 0; flex: none; } .pbt-people .wp-block-post-title { font-size: 1.25rem; font-weight: 500; letter-spacing: -.015em; margin: 0; } .pbt-people .wp-block-post-title a { color: inherit; text-decoration: none; } .pbt-people .wp-block-post-excerpt { margin: 0; } .pbt-people .wp-block-post-excerpt__excerpt { font-size: .875rem; color: var(--pbt-accent-soft); margin: 0; } .pbt-people .pbt-since { font-size: .8rem; color: var(--pbt-soft); margin: 4px 0 0; } .pbt-people .wp-block-post-content { font-size: .93rem; line-height: 1.7; color: var(--pbt-muted); } .pbt-people .wp-block-post-content p { margin: 0; } .pbt-people .wp-block-query-no-results { font-size: .9rem; color: var(--pbt-soft); border: 1px dashed var(--pbt-line); border-radius: var(--pbt-r); padding: 22px; } /* ---------- pola wpłat ---------- */ .pbt-give-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--pbt-line); } .pbt-give-row:last-of-type { border-bottom: 0; } .pbt-give-row p { margin: 0; } .pbt-give-row .wp-block-buttons { margin: 0; } /* ---------- listy linków w kartach ---------- */ .pbt-links, .pbt-footer-links { list-style: none; padding: 0; margin: 0; } .pbt-links li, .pbt-footer-links li { margin: 0 0 8px; } .pbt-links a, .pbt-footer-links a { text-decoration: none; } .pbt-links a:hover, .pbt-footer-links a:hover { text-decoration: underline; } /* ---------- stopka ---------- */ .pbt-footer { background: var(--pbt-footer); border-top: 1px solid var(--pbt-line); } .pbt-footer__grid { padding-top: clamp(34px, 4vw, 56px); padding-bottom: clamp(34px, 4vw, 56px); } .pbt-footer .wp-block-columns { gap: clamp(24px, 3vw, 44px); } .pbt-footer .wp-block-site-logo img { width: 34px; height: 34px; border-radius: 50%; } .pbt-footer p, .pbt-footer li { font-size: .875rem; line-height: 1.8; } .pbt-footer .pbt-soft { color: var(--pbt-soft); } .pbt-footer ul { list-style: none; padding: 0; margin: 0; } .pbt-footer ul li { margin: 0 0 8px; } .pbt-footer ul a { color: var(--pbt-accent-soft); text-decoration: none; } .pbt-footer ul a:hover { color: var(--pbt-accent); text-decoration: underline; } .pbt-footer .wp-block-navigation a { color: var(--pbt-muted); text-decoration: none; } .pbt-footer .wp-block-navigation a:hover { color: var(--pbt-accent-soft); } .pbt-footer .wp-block-navigation { font-size: 14px; } .pbt-footer .wp-block-navigation .wp-block-navigation-item__content { padding: 0; } .pbt-footer .wp-block-navigation, .pbt-footer .wp-block-navigation .wp-block-navigation__container { gap: 8px !important; } .pbt-footer__bottom { border-top: 1px solid var(--pbt-line); padding: 16px clamp(18px, 4vw, 44px); font-size: 12.5px; color: var(--pbt-soft); } .pbt-footer .pbt-footer__bottom > p { max-width: 1152px; margin: 0 auto !important; font-size: 12.5px; } /* ---------- animacje ---------- */ @keyframes pbt-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes pbt-spin { to { transform: rotate(360deg); } } @keyframes pbt-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } } .pbt-will-reveal { opacity: 0; } .pbt-will-reveal.is-revealed { animation: pbt-in .7s cubic-bezier(.2, .7, .2, 1) both; } @media (prefers-reduced-motion: reduce) { .pbt-will-reveal { opacity: 1; } .pbt-will-reveal.is-revealed, .pbt-hero__photo::before, .is-style-eyebrow.pbt-eyebrow-dot::before { animation: none; } } /* ---------- responsywność ---------- */ @media (max-width: 900px) { .pbt-hero .wp-block-columns { flex-direction: column-reverse; } .pbt-hero__photo { margin: 0 auto; } .pbt-hero__photo::before { display: none; } .pbt-timeline__item { grid-template-columns: minmax(0, 64px) minmax(0, 1fr); } } @media (max-width: 600px) { .is-style-card { padding: 20px; } .is-style-faq summary { padding: 18px 20px; } .is-style-faq > :not(summary) { padding: 0 20px 20px; } .pbt-people--compact .wp-block-post { flex-direction: column; align-items: flex-start; } } /* ---------- edytor ---------- */ .editor-styles-wrapper { background: var(--pbt-bg); color: var(--pbt-ink); } /* ===================================================================== Wierność makiecie, wartości 1:1 z design/Main.dc.html. Selektory mają wyższą wagę niż odstępy globalne WordPressa (blockGap), więc marginesy poniżej wygrywają, ale każdy nowy blok dodany w edytorze nadal dostaje zwykłe odstępy. ===================================================================== */ /* --- wspólne dla podstron --- */ .pbt-main .pbt-page { padding-top: clamp(40px, 5vw, 80px); padding-bottom: clamp(48px, 6vw, 88px); } .pbt-main .pbt-page > .is-style-eyebrow, .pbt-main .pbt-page .pbt-cols .is-style-eyebrow:first-child { margin: 0; } .pbt-main .pbt-page > h1, .pbt-main .pbt-page .pbt-cols h1 { margin: 18px 0 0; } .pbt-main .pbt-page > .is-style-lead { margin: 20px 0 0; font-size: 16px; line-height: 1.7; max-width: 56ch; } .pbt-main .pbt-page > .pbt-note { margin: 20px 0 0; } .pbt-main .pbt-page > .pbt-cols { margin-top: clamp(30px, 4vw, 56px); align-items: flex-start; } .pbt-main .pbt-cols { gap: clamp(26px, 3.5vw, 64px); } .pbt-main .pbt-cols > .wp-block-column { min-width: 0; } .pbt-main .pbt-cols > .wp-block-column > * + * { margin-top: 16px; } .pbt-main .pbt-cols > .wp-block-column > :first-child { margin-top: 0; } .pbt-main .pbt-h2-sm { font-size: 24px; line-height: 1.2; letter-spacing: -.02em; margin: 0 0 22px; } .pbt-main .is-style-card > .is-style-label:first-child { margin: 0 0 12px; } .pbt-main .is-style-card > * + * { margin-top: 0; } .pbt-main .is-style-card > p + .pbt-soft { margin-top: 10px; } .pbt-main .is-style-card > p + .wp-block-buttons { margin-top: 16px; } .pbt-main .is-style-card p { font-size: 14.5px; line-height: 1.75; } .pbt-main .is-style-card p.pbt-soft { font-size: 12.5px; line-height: 1.6; } .pbt-main .pbt-form-panel { padding: clamp(24px, 3vw, 38px); } .pbt-main .pbt-form-panel > * + * { margin-top: 0; } /* --- misja --- */ .pbt-main .pbt-page--mission h1 { max-width: 17ch; } .pbt-main .pbt-page--mission .pbt-mission__p { font-size: 17px; line-height: 1.8; max-width: 62ch; margin: 0 0 18px; } .pbt-main .pbt-page--mission .pbt-mission__p:last-of-type { margin-bottom: 0; } .pbt-main .pbt-page--mission .pbt-quote { margin-top: clamp(30px, 4vw, 48px); padding: clamp(26px, 3vw, 40px); } .pbt-main .pbt-quote .pbt-banner__quote { font-size: clamp(22px, 2.6vw, 30px); max-width: 24ch; } .pbt-main .pbt-quote .pbt-soft { margin: 14px 0 0; font-size: 14px; } .pbt-main .pbt-aside { padding: 26px; } .pbt-main .pbt-aside > .is-style-label { margin: 0 0 18px; } .pbt-main .pbt-aside .pbt-pillars li { font-size: 17px; } .pbt-main .pbt-aside .pbt-pillars li:last-child { margin-bottom: 0; } .pbt-main .pbt-aside > .wp-block-buttons { margin-top: 20px; } .pbt-main .pbt-aside > .wp-block-buttons .wp-block-button__link { padding: 13px 22px; font-size: 14px; } .pbt-main .pbt-aside > .wp-block-buttons + p { margin-top: 10px; font-size: 14px; } /* --- historia --- */ .pbt-main .pbt-page--history h1 { max-width: 15ch; } .pbt-main .pbt-page--history .pbt-timeline { margin-top: clamp(30px, 4vw, 52px); } .pbt-main .pbt-timeline > .pbt-timeline__item { padding: clamp(22px, 2.6vw, 32px); margin: 0 0 14px; } .pbt-main .pbt-timeline > .pbt-timeline__item:last-child { margin-bottom: 0; } .pbt-main .pbt-timeline__item h3 { font-size: 20px; line-height: 1.3; } .pbt-main .pbt-timeline__item .wp-block-group > * + * { margin-top: 10px; } .pbt-main .pbt-timeline__item p:not(.pbt-timeline__year) { font-size: 15px; line-height: 1.7; } /* --- zarząd --- */ .pbt-main .pbt-page--board h1 { max-width: 15ch; } .pbt-main .pbt-page--board .pbt-people { margin-top: clamp(30px, 4vw, 52px); } .pbt-main .pbt-people .wp-block-post-template { gap: 18px; } .pbt-main .pbt-people .wp-block-post { padding: 26px; gap: 0; } .pbt-main .pbt-people .wp-block-post > * + * { margin-top: 0; } .pbt-main .pbt-people .wp-block-post-featured-image { margin-bottom: 14px; } .pbt-main .pbt-people .wp-block-post-title { font-size: 20px; line-height: 1.25; } .pbt-main .pbt-people .wp-block-post-excerpt { margin-top: 6px; } .pbt-main .pbt-people .wp-block-post-excerpt__excerpt { font-size: 13.5px; } .pbt-main .pbt-people .wp-block-post-content { margin-top: 14px; font-size: 14.5px; line-height: 1.7; } /* --- wolontariat --- */ .pbt-main .pbt-page--volunteer > .pbt-cols { margin-top: 0; gap: clamp(28px, 4vw, 64px); } .pbt-main .pbt-page--volunteer h1 { font-size: clamp(32px, 4.2vw, 52px); max-width: 13ch; } .pbt-main .pbt-page--volunteer .is-style-lead { margin-top: 22px; font-size: 16.5px; line-height: 1.75; max-width: 50ch; } .pbt-main .pbt-page--volunteer .pbt-roles-label { margin: clamp(24px, 3vw, 40px) 0 12px; } .pbt-main .pbt-page--volunteer .pbt-roles { margin-top: 0; } .pbt-main .pbt-form-panel .pbt-note { margin: 0; } .pbt-main .pbt-people-section { margin-top: clamp(48px, 6vw, 88px); } .pbt-main .pbt-people-section > .is-style-eyebrow { margin: 0; } .pbt-main .pbt-people-section > h2 { margin: 16px 0 0; font-size: clamp(26px, 3vw, 36px); line-height: 1.15; max-width: 22ch; } .pbt-main .pbt-people-section > .pbt-note { margin: 12px 0 0; } .pbt-main .pbt-people-section > .pbt-people { margin-top: clamp(24px, 3vw, 40px); } .pbt-main .pbt-people--compact .wp-block-post { padding: 22px; gap: 16px; } .pbt-main .pbt-people--compact .wp-block-post-featured-image { margin: 0; } .pbt-main .pbt-people--compact .wp-block-post-title { font-size: 17px; } .pbt-main .pbt-people--compact .wp-block-post-excerpt { margin-top: 5px; } .pbt-main .pbt-people--compact .wp-block-post-excerpt__excerpt { color: var(--pbt-muted); line-height: 1.5; } /* --- wesprzyj --- */ .pbt-main .pbt-page--donate h1 { max-width: 15ch; } .pbt-main .pbt-page--donate > .is-style-lead { margin-top: 22px; font-size: 16.5px; line-height: 1.75; max-width: 60ch; } .pbt-main .pbt-page--donate > .pbt-cols { margin-top: clamp(30px, 4vw, 52px); gap: clamp(24px, 3vw, 44px); } .pbt-main .pbt-page--donate .is-style-panel-flat { padding: clamp(26px, 3.2vw, 42px); } .pbt-main .pbt-page--donate .is-style-panel-flat > .pbt-h2-sm { margin-bottom: 24px; } .pbt-main .pbt-page--donate .is-style-panel-flat > .pbt-muted { margin: 0 0 8px; font-size: 15px; line-height: 1.7; } .pbt-main .pbt-page--donate .pbt-give-row { margin: 0; padding: 18px 0; } .pbt-main .pbt-give-row .is-style-label { margin: 0; } .pbt-main .pbt-page--donate .pbt-aside-col > * + * { margin-top: 16px; } .pbt-main .pbt-page--donate .pbt-aside-col .is-style-card { padding: 24px; } .pbt-main .pbt-page--donate .pbt-aside-col .is-style-card p:not(.is-style-label):not(.pbt-soft) { line-height: 1.8; } /* --- kontakt --- */ .pbt-main .pbt-page--contact h1 { max-width: 14ch; } .pbt-main .pbt-page--contact .pbt-aside-col > * + * { margin-top: 16px; } .pbt-main .pbt-page--contact .is-style-card, .pbt-main .pbt-page--contact .pbt-tint { padding: 26px; } .pbt-main .pbt-page--contact .pbt-org { font-size: 16px; line-height: 1.85; } .pbt-main .pbt-page--contact .pbt-links a { font-size: 15.5px; } .pbt-main .pbt-page--contact .pbt-links li { margin-bottom: 8px; } .pbt-main .pbt-page--contact .pbt-tint > * + * { margin-top: 0; } .pbt-main .pbt-tint > .is-style-label { margin: 0 0 12px; } .pbt-main .pbt-tint > .pbt-muted { font-size: 15px; line-height: 1.75; } /* --- strona główna --- */ .pbt-main .pbt-hero > .wp-block-columns { gap: clamp(28px, 4vw, 56px); } .pbt-main .pbt-hero .wp-block-column > * + * { margin-top: 0; } .pbt-main .pbt-hero .is-style-eyebrow { margin: 0; } .pbt-main .pbt-hero h1 { margin: 0; font-size: clamp(38px, 5.4vw, 66px); line-height: 1.07; max-width: 16ch; } .pbt-main .pbt-hero .is-style-lead { margin: 24px 0 0; font-size: 16.5px; line-height: 1.7; max-width: 50ch; } .pbt-main .pbt-hero .wp-block-buttons { margin: 32px 0 0; gap: 12px; } .pbt-main .pbt-section > .is-style-eyebrow { margin: 0; } .pbt-main .pbt-section > h2 { margin: 16px 0 0; } .pbt-main .pbt-works > h2 { max-width: 20ch; } .pbt-main .pbt-works > .is-style-lead { margin: 16px 0 0; font-size: 15.5px; line-height: 1.7; max-width: 56ch; } .pbt-main .pbt-works__grid { margin-top: clamp(24px, 3vw, 40px); gap: 18px; } .pbt-main .pbt-works__grid .is-style-panel { padding: clamp(26px, 3vw, 40px); display: flex; flex-direction: column; gap: 14px; height: 100%; } .pbt-main .pbt-works__grid .is-style-panel > * { margin: 0; } .pbt-main .pbt-works__grid .is-style-panel > .wp-block-buttons { margin-top: auto; } .pbt-main .pbt-works__grid .is-style-panel .wp-block-button__link { padding: 12px 20px; font-size: 13.5px; } .pbt-main .pbt-works__title { font-size: clamp(24px, 2.6vw, 32px); font-weight: 400; line-height: 1.2; letter-spacing: -.02em; } .pbt-main .pbt-works__grid .pbt-muted { font-size: 15px; line-height: 1.7; max-width: 46ch; } .pbt-main .pbt-help > h2 { max-width: 18ch; } .pbt-main .pbt-steps { margin-top: clamp(24px, 3vw, 40px); gap: 18px; } .pbt-main .pbt-steps .is-style-card { padding: 28px; } .pbt-main .pbt-steps .is-style-card > * + * { margin-top: 0; } .pbt-main .pbt-steps .pbt-num { margin: 0; } .pbt-main .pbt-steps .pbt-muted { font-size: 14.5px; line-height: 1.7; } .pbt-main .pbt-steps .pbt-link-more { margin-top: auto; padding-top: 6px; font-size: 14px; } .pbt-main .pbt-banner-section .is-style-panel-flat { padding: clamp(30px, 4vw, 56px); } .pbt-main .pbt-banner .wp-block-group > * + * { margin-top: 0; } .pbt-main .pbt-banner .pbt-soft { margin: 14px 0 0; font-size: 14px; } .pbt-main .pbt-banner .wp-block-button__link { padding: 16px 28px; } .pbt-main .pbt-faq > h2 { max-width: 22ch; margin: 16px 0 clamp(22px, 3vw, 36px); } .pbt-main .pbt-faq > .is-style-faq { margin: 0 0 12px; } .pbt-main .pbt-faq > .is-style-faq:last-child { margin-bottom: 0; } .pbt-main .is-style-faq summary { font-size: 17px; } .pbt-main .is-style-faq > :not(summary) { font-size: 15px; } /* --- nagłówek i stopka --- */ .pbt-header { padding-top: 16px; padding-bottom: 16px; } .pbt-header__nav { gap: 4px; } .pbt-header__nav .wp-block-navigation { margin-right: 4px; } .pbt-header__nav .wp-block-buttons { margin-left: 6px; } .pbt-header__nav .wp-block-buttons .wp-block-button__link { padding: 10px 20px; font-size: 13.5px; line-height: 1.35; } .pbt-nav .wp-block-navigation-item__content { line-height: 1.35; } .pbt-footer .pbt-brand + p { margin-top: 14px; font-size: 13.5px; line-height: 1.8; } .pbt-footer .is-style-label { margin: 0 0 14px; } .pbt-footer .wp-block-column > * + * { margin-top: 0; } .pbt-footer ul li, .pbt-footer .wp-block-navigation-item { font-size: 14px; } .pbt-footer .wp-block-columns { gap: clamp(24px, 3vw, 44px); } /* --- responsywność wierności --- */ @media (max-width: 781px) { .pbt-main .pbt-cols > .wp-block-column[style*="flex-basis"] { flex-basis: auto !important; } .pbt-main .pbt-cols > .wp-block-column + .wp-block-column { margin-top: clamp(26px, 3.5vw, 64px); } } /* stopka: menu bez podwójnych odstępów, wiersze jak w makiecie */ .pbt-footer .wp-block-navigation li { margin: 0; } .pbt-footer .wp-block-navigation-item__content, .pbt-footer ul li { line-height: 1.5; } .pbt-main .pbt-links li { line-height: 1.5; } /* kółko „Zdjęcie” dla osób bez obrazka wyróżniającego */ .pbt-people .pbt-photo-placeholder { width: 88px; height: 88px; border-radius: 50%; background: var(--pbt-bg-2); display: grid; place-content: center; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--pbt-soft); } .pbt-people--compact .pbt-photo-placeholder { width: 64px; height: 64px; font-size: 9.5px; flex: none; } /* Style formularzy (pola, zgoda, komunikaty) są we wtyczce fundacjapbt-core (forms.css). */ .pbt-form-panel .pbt-h2-sm { margin-bottom: 22px; } /* ---------- ludzie: karty portretowe (jak na poradnia.ufranciszka.org) ---------- Zdjęcie na całą szerokość karty, pod nim imię, funkcja, notka; „od kiedy” zawsze przy dolnej krawędzi, więc w każdej karcie jest w tym samym miejscu. Najechanie: karta unosi się, zdjęcie delikatnie się przybliża. Nadpisuje wcześniejsze style kółek (także inline z bloku). */ .pbt-main .pbt-people .wp-block-post-template { gap: 20px; align-items: stretch; } .pbt-main .pbt-people .wp-block-post, .pbt-main .pbt-people--compact .wp-block-post { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0 0 20px; overflow: hidden; border: 1px solid var(--pbt-line); border-radius: var(--pbt-r); background: var(--pbt-card); transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s, border-color .25s, background-color .3s; } .pbt-main .pbt-people .wp-block-post > * { flex: none; } .pbt-main .pbt-people .wp-block-post:hover { transform: translateY(-4px); background: var(--pbt-card-hover); box-shadow: 0 18px 44px rgba(0, 0, 0, .28); border-color: var(--pbt-line); } .pbt-main .pbt-people .wp-block-post-featured-image, .pbt-main .pbt-people--compact .wp-block-post-featured-image { width: 100% !important; height: auto !important; aspect-ratio: 4 / 5 !important; margin: 0 !important; flex: none; position: relative; overflow: hidden; background: var(--pbt-bg-2); } .pbt-main .pbt-people .wp-block-post-featured-image img, .pbt-main .pbt-people--compact .wp-block-post-featured-image img { width: 100% !important; height: 100% !important; aspect-ratio: auto !important; border-radius: 0 !important; object-fit: cover; object-position: center 20%; display: block; transition: transform .5s cubic-bezier(.2, .7, .2, 1); } .pbt-main .pbt-people .wp-block-post:hover .wp-block-post-featured-image img { transform: scale(1.03); } .pbt-main .pbt-people .wp-block-post-featured-image::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36%; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .28)); } .pbt-main .pbt-people .pbt-photo-placeholder, .pbt-main .pbt-people--compact .pbt-photo-placeholder { width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 0; font-size: 11px; flex: none; margin: 0; background: linear-gradient(160deg, var(--pbt-bg-2), var(--pbt-card)); } .pbt-main .pbt-people .pbt-photo-placeholder::after { display: none; } /* teksty: każdy element ma stałe miejsce */ .pbt-main .pbt-people .wp-block-group { display: contents; } .pbt-main .pbt-people .wp-block-post-excerpt { display: contents; } .pbt-main .pbt-people .wp-block-post-title, .pbt-main .pbt-people--compact .wp-block-post-title { margin: 20px 24px 0; font-size: 20px; line-height: 1.25; } .pbt-main .pbt-people .wp-block-post-excerpt__excerpt, .pbt-main .pbt-people--compact .wp-block-post-excerpt__excerpt { margin: 6px 24px 20px; font-size: 13.5px; line-height: 1.5; color: var(--pbt-accent-soft); } .pbt-main .pbt-people .wp-block-post-content { margin: -8px 24px 20px; font-size: 14.5px; line-height: 1.7; } .pbt-main .pbt-people .wp-block-post-content:empty { display: none; } .pbt-main .pbt-people .pbt-since { order: 10; margin: auto 24px 0; padding: 12px 0 0; border-top: 1px solid var(--pbt-line); font-size: 12.5px; letter-spacing: .02em; color: var(--pbt-soft); } /* po animacji wejścia karta wraca do zwykłych reguł, żeby uniesienie po najechaniu działało */ .pbt-will-reveal.is-settled { animation: none; opacity: 1; } @media (max-width: 600px) { .pbt-main .pbt-people .wp-block-post-featured-image, .pbt-main .pbt-people .pbt-photo-placeholder { aspect-ratio: 1 / 1 !important; } }