/*
Theme Name: Pies bez spiny (dziecko GeneratePress)
Theme URI: https://piesbezspiny.pl/
Description: Motyw potomny GeneratePress dla piesbezspiny.pl - wlasny CSS i JS bez modyfikowania motywu nadrzednego.
Author: Slawomir Pieta
Template: generatepress
Version: 0.14.8
Text Domain: pies-bez-spiny-child
*/
/* =========================================================
0. Fonty lokalne (bez Google Fonts) - Baloo 2, Nunito Sans, IBM Plex Mono; zestawy latin + latin-ext (polskie znaki)
========================================================= */
@font-face {
font-family: "Baloo 2";
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url("assets/fonts/baloo-2-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Baloo 2";
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url("assets/fonts/baloo-2-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Nunito Sans";
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url("assets/fonts/nunito-sans-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Nunito Sans";
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url("assets/fonts/nunito-sans-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("assets/fonts/ibm-plex-mono-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("assets/fonts/ibm-plex-mono-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* =========================================================
1. Zmienne (paleta marki, typografia, odstepy)
========================================================= */
:root {
--cream: #faf5e5;
--cream-card: #f1e9d1;
--ink: #34382f;
--ink-soft: #5c6152;
--ink-faint: #82876f;
--olive: #6c7a45;
--olive-deep: #414c28;
--olive-pale: #e5e6c9;
--gold: #c8922c;
--gold-soft: #e3b866;
--on-gold: #2c1c05;
--lapka-orange: #d9662b;
--lapka-orange-soft: #f0a173;
--lapka-orange-deep: #a94d1e;
--on-lapka-orange: #2c1204;
--line: rgba(52, 56, 47, 0.16);
--line-soft: rgba(52, 56, 47, 0.09);
--font-head: "Baloo 2", "Nunito Sans", "Segoe UI", system-ui, sans-serif;
--font-body: "Nunito Sans", "Segoe UI", system-ui, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
--pbs-wrap: 1160px;
--pbs-gutter: clamp(20px, 5vw, 56px);
--pbs-section-y: clamp(60px, 8vw, 108px);
--pbs-radius: 24px;
--pbs-radius-sm: 16px;
--pbs-shadow: 0 18px 40px -24px rgba(65, 76, 40, 0.55);
}
/* =========================================================
2. Baza i GeneratePress (naglowek, nawigacja, stopka)
========================================================= */
body {
background: var(--cream);
color: var(--ink);
font-family: var(--font-body);
font-size: 18px;
line-height: 1.62;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
font-family: var(--font-head);
font-weight: 600;
line-height: 1.08;
letter-spacing: 0;
text-wrap: balance;
color: var(--ink);
}
a { color: var(--olive-deep); }
:focus-visible {
outline: 3px solid var(--gold);
outline-offset: 3px;
}
img { max-width: 100%; height: auto; }
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(250, 245, 229, 0.94);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line-soft);
}
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 0; } }
.inside-header {
max-width: calc(var(--pbs-wrap) + 2 * var(--pbs-gutter));
margin: 0 auto;
padding: 14px var(--pbs-gutter);
align-items: center;
}
.site-logo img,
.header-image {
max-height: 54px;
width: auto;
}
.main-title,
.main-title a {
font-family: var(--font-head);
font-weight: 600;
font-size: clamp(1rem, 1.8vw, 1.25rem);
color: var(--ink);
text-decoration: none;
}
.main-navigation,
.main-navigation ul ul,
.main-navigation .main-nav ul li a {
background-color: transparent;
}
.main-navigation .main-nav ul li a {
font-family: var(--font-body);
font-weight: 700;
font-size: 0.98rem;
color: var(--ink);
}
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li:focus-within > a,
.main-navigation .main-nav ul li.sfHover > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
color: var(--olive-deep);
background-color: transparent;
text-decoration: underline;
text-decoration-color: var(--gold);
text-decoration-thickness: 3px;
text-underline-offset: 8px;
}
.main-navigation .main-nav ul ul {
background-color: var(--cream);
border: 1px solid var(--line);
border-radius: var(--pbs-radius-sm);
box-shadow: var(--pbs-shadow);
padding: 8px;
margin-top: 6px;
}
.main-navigation .main-nav ul ul li a {
border-radius: 10px;
padding: 10px 16px;
white-space: nowrap;
}
.main-navigation .main-nav ul ul li:hover > a,
.main-navigation .main-nav ul ul li:focus-within > a {
background-color: var(--olive-pale);
text-decoration: none;
}
.main-navigation .menu-toggle {
font-family: var(--font-body);
font-weight: 800;
color: var(--ink);
}
@media (max-width: 768px) {
.main-navigation .main-nav ul li a { padding: 12px 20px; }
.main-navigation .main-nav ul ul {
border: 0;
box-shadow: none;
background-color: transparent;
margin: 0;
padding: 0 0 0 14px;
}
.main-navigation.toggled,
.main-navigation.toggled .main-nav > ul { background-color: var(--cream); }
}
/* Strona glowna: pelna szerokosc, bez tla i cieni GeneratePress */
.home .site-content,
.home .site-main,
.home .content-area { background: transparent; }
.home .inside-article {
padding: 0;
margin: 0;
background: transparent;
box-shadow: none;
}
.home .entry-content { margin: 0; }
.home .grid-container { max-width: none; }
.home .site-main > * { margin-bottom: 0; }
.site-footer,
.site-info {
background: var(--cream-card);
color: var(--ink-soft);
font-size: 0.92rem;
}
.site-info { border-top: 1px solid var(--line); }
.site-info a { color: var(--olive-deep); }
/* =========================================================
3. Uklad sekcji strony glownej
========================================================= */
.pbs-section {
padding: var(--pbs-section-y) var(--pbs-gutter);
margin: 0;
}
.pbs-wrap {
max-width: var(--pbs-wrap);
margin: 0 auto;
}
.pbs-eyebrow {
font-family: var(--font-mono);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--olive-deep);
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0 0 16px;
}
.pbs-eyebrow::before {
content: "";
width: 28px;
height: 3px;
border-radius: 3px;
background: var(--gold);
flex: none;
}
.pbs-section h2 {
font-size: clamp(2rem, 4.4vw, 3.2rem);
margin: 0 0 16px;
}
.pbs-lede {
font-size: clamp(1.05rem, 1.6vw, 1.22rem);
color: var(--ink-soft);
max-width: 56ch;
margin: 0 0 8px;
}
.pbs-head { max-width: 720px; margin-bottom: clamp(28px, 4vw, 48px); }
.pbs-head .pbs-lede { margin-bottom: 0; }
/* =========================================================
4. Przyciski
========================================================= */
.pbs-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin: 30px 0 0;
}
.pbs-actions .wp-block-button__link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 13px 28px;
border: 2px solid transparent;
border-radius: 999px;
font-family: var(--font-body);
font-weight: 800;
font-size: 1rem;
line-height: 1.2;
text-decoration: none;
transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.pbs-actions .wp-block-button__link:hover { transform: translateY(-2px); }
.pbs-actions .wp-block-button__link:active { transform: translateY(0); }
.pbs-btn-primary .wp-block-button__link { background: var(--gold); color: var(--on-gold); }
.pbs-btn-primary .wp-block-button__link:hover { background: var(--gold-soft); color: var(--on-gold); }
.pbs-btn-ghost .wp-block-button__link { background: transparent; color: var(--ink); border-color: var(--ink); }
.pbs-btn-ghost .wp-block-button__link:hover { background: transparent; color: var(--olive-deep); border-color: var(--olive); }
.pbs-btn-orange .wp-block-button__link { background: var(--lapka-orange); color: var(--on-lapka-orange); }
.pbs-btn-orange .wp-block-button__link:hover { background: var(--lapka-orange-soft); color: var(--on-lapka-orange); }
.pbs-btn-olive .wp-block-button__link { background: var(--olive-deep); color: #fbf7e8; }
.pbs-btn-olive .wp-block-button__link:hover { background: var(--olive); color: #fff; }
.pbs-btn-light .wp-block-button__link { background: transparent; color: #fbf7e8; border-color: rgba(251, 247, 232, 0.7); }
.pbs-btn-light .wp-block-button__link:hover { background: rgba(251, 247, 232, 0.12); color: #fff; border-color: #fff; }
.pbs-offer .wp-block-button__link:focus-visible,
.pbs-final .pbs-btn-olive .wp-block-button__link:focus-visible { outline-color: #fff8e0; }
.pbs-lapka .wp-block-button__link:focus-visible { outline-color: var(--lapka-orange-deep); }
/* =========================================================
5. Sekcja 1 - Hero
========================================================= */
.pbs-hero {
position: relative;
overflow: hidden;
padding-top: clamp(44px, 6vw, 88px);
background:
radial-gradient(900px 480px at 88% -8%, rgba(229, 230, 201, 0.95), transparent 62%),
radial-gradient(640px 380px at -6% 108%, rgba(227, 184, 102, 0.24), transparent 62%),
var(--cream);
}
.pbs-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
gap: clamp(32px, 6vw, 80px);
align-items: center;
}
.pbs-hero h1 {
font-size: clamp(2.8rem, 6.6vw, 5.2rem);
line-height: 1;
margin: 0 0 22px;
}
.pbs-hero h1 em {
font-style: normal;
color: var(--olive-deep);
background: linear-gradient(transparent 64%, rgba(227, 184, 102, 0.75) 64% 90%, transparent 90%);
padding: 0 0.06em;
}
.pbs-hero .pbs-lede { font-size: clamp(1.08rem, 1.7vw, 1.28rem); }
.pbs-pills {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 26px 0 0;
padding: 0;
}
.pbs-pills li {
margin: 0;
padding: 8px 16px;
border: 1.5px solid var(--line);
border-radius: 999px;
background: rgba(255, 255, 255, 0.45);
font-size: 0.92rem;
font-weight: 700;
color: var(--ink-soft);
}
.pbs-hero__photo {
position: relative;
margin: 0 auto;
max-width: 400px;
width: 100%;
}
.pbs-hero__photo::before {
content: "";
position: absolute;
inset: 18px -18px -18px 18px;
border-radius: 34px;
background: var(--olive-pale);
border: 2px solid rgba(108, 122, 69, 0.35);
transform: rotate(3deg);
z-index: 0;
}
.pbs-hero__photo img {
position: relative;
z-index: 1;
display: block;
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
object-position: 50% 30%;
border-radius: 30px;
box-shadow: var(--pbs-shadow);
}
/* =========================================================
6. Sekcja 2 - Jak moge pomoc (karty)
========================================================= */
.pbs-help { background: var(--cream); }
.pbs-cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}
.pbs-card {
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
padding: 30px 28px 28px;
background: var(--cream-card);
border: 2px solid var(--line);
border-radius: var(--pbs-radius);
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.pbs-card:hover {
transform: translateY(-4px);
border-color: var(--olive);
box-shadow: var(--pbs-shadow);
}
.pbs-card:focus-within {
outline: 3px solid var(--gold);
outline-offset: 3px;
}
.pbs-card__tag {
font-family: var(--font-mono);
font-size: 0.74rem;
font-weight: 500;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--olive-deep);
margin: 0;
}
.pbs-card h3 {
font-size: clamp(1.45rem, 2.4vw, 1.75rem);
margin: 0;
}
.pbs-card p { margin: 0; }
.pbs-card__text { color: var(--ink-soft); font-size: 1rem; }
.pbs-card__link { margin-top: auto !important; padding-top: 14px !important; }
.pbs-card__link a {
font-weight: 800;
color: var(--olive-deep);
text-decoration: none;
}
.pbs-card__link a::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
}
.pbs-card__link a:focus-visible { outline: none; }
.pbs-card--lapka {
background: color-mix(in srgb, var(--lapka-orange-soft) 24%, var(--cream-card));
border-color: color-mix(in srgb, var(--lapka-orange) 50%, var(--line));
}
.pbs-card--lapka:hover { border-color: var(--lapka-orange); }
.pbs-card--lapka .pbs-card__tag,
.pbs-card--lapka .pbs-card__link a { color: var(--lapka-orange-deep); }
/* =========================================================
7. Sekcja 3 - Aktualna oferta
========================================================= */
.pbs-offer {
background:
radial-gradient(760px 340px at 100% 0%, rgba(227, 184, 102, 0.22), transparent 62%),
var(--olive-deep);
color: #f4efdb;
}
.pbs-offer h2 { color: #fff8e0; }
.pbs-offer .pbs-eyebrow { color: var(--gold-soft); }
.pbs-offer .pbs-eyebrow::before { background: var(--gold-soft); }
.pbs-offer .pbs-lede { color: #e4dec2; }
.pbs-offer__grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
gap: clamp(28px, 5vw, 64px);
align-items: center;
}
.pbs-offer .pbs-pills li {
background: rgba(251, 247, 232, 0.08);
border-color: rgba(251, 247, 232, 0.28);
color: #f4efdb;
}
.pbs-offer .pbs-pills { margin-top: 0; flex-direction: column; align-items: flex-start; }
/* =========================================================
8. Sekcja 4 - O mnie
========================================================= */
.pbs-about { background: var(--cream); }
.pbs-about__grid {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: clamp(32px, 6vw, 80px);
align-items: center;
}
.pbs-about__photo { margin: 0; position: relative; }
.pbs-about__photo img {
display: block;
width: 100%;
aspect-ratio: 5 / 4.4;
object-fit: cover;
border-radius: 30px;
box-shadow: var(--pbs-shadow);
}
.pbs-about__photo::after {
content: "";
position: absolute;
left: -14px;
bottom: -14px;
width: 38%;
height: 38%;
border-left: 5px solid var(--gold);
border-bottom: 5px solid var(--gold);
border-radius: 0 0 0 30px;
z-index: -1;
}
.pbs-about p { color: var(--ink-soft); }
.pbs-about .pbs-about__sign {
font-family: var(--font-head);
font-weight: 500;
font-size: 1.3rem;
color: var(--olive-deep);
}
.pbs-facts {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 10px 22px;
margin: 20px 0 0;
padding: 0;
}
.pbs-facts li {
margin: 0;
display: flex;
align-items: center;
gap: 9px;
font-weight: 700;
font-size: 0.96rem;
color: var(--ink);
}
.pbs-facts li::before {
content: "";
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--gold);
flex: none;
}
/* =========================================================
9. Sekcja 5 - Nasza spolecznosc
========================================================= */
.pbs-community { background: var(--olive-pale); }
.pbs-social-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
}
.pbs-social-card {
display: flex;
flex-direction: column;
gap: 8px;
padding: 30px 28px;
background: var(--cream);
border: 2px solid var(--line);
border-radius: var(--pbs-radius);
}
.pbs-social-card .wp-block-social-links { margin: 0 0 4px; }
.pbs-social-card .wp-block-social-links .wp-social-link { transform: none; }
.pbs-social-card .wp-block-social-links .wp-block-social-link-anchor { padding: 0.6em; }
.pbs-social-card h3 { font-size: 1.4rem; margin: 0; }
.pbs-social-card p { margin: 0; }
.pbs-num {
font-family: var(--font-head);
font-weight: 600;
font-size: clamp(2.8rem, 6vw, 4rem);
line-height: 1;
color: var(--olive-deep);
margin-top: 6px !important;
}
.pbs-num--placeholder {
display: inline-block;
align-self: flex-start;
font-size: 1.15rem;
line-height: 1.3;
padding: 10px 16px;
border: 2px dashed var(--ink-faint);
border-radius: 14px;
color: var(--ink-soft);
}
.pbs-num-label { color: var(--ink-soft); font-weight: 700; }
.pbs-social-card .pbs-actions { margin-top: 18px; }
/* =========================================================
10. Sekcja 6 - Teaser Akademii Pana Lapki (pomaranczowy akcent)
========================================================= */
.pbs-lapka {
background:
radial-gradient(700px 360px at 0% 0%, rgba(240, 161, 115, 0.3), transparent 64%),
color-mix(in srgb, var(--lapka-orange-soft) 16%, var(--cream));
border-top: 6px solid var(--lapka-orange);
border-bottom: 1px solid color-mix(in srgb, var(--lapka-orange) 30%, var(--line));
scroll-margin-top: 90px;
}
.pbs-lapka .pbs-eyebrow { color: var(--lapka-orange-deep); }
.pbs-lapka .pbs-eyebrow::before { background: var(--lapka-orange); }
.pbs-lapka h2 { font-size: clamp(2.2rem, 4.8vw, 3.5rem); }
.pbs-lapka__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(28px, 5vw, 64px);
align-items: center;
}
.pbs-lapka__logo { margin: 0 0 18px; }
.pbs-lapka__logo img { display: block; width: clamp(150px, 20vw, 210px); height: auto; }
.pbs-lapka__hero { margin: 0; }
.pbs-lapka__hero img {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 28px;
border: 3px solid color-mix(in srgb, var(--lapka-orange) 55%, #fff);
box-shadow: 0 22px 44px -26px rgba(169, 77, 30, 0.7);
}
.pbs-lapka .pbs-pills li {
background: rgba(255, 255, 255, 0.55);
border-color: color-mix(in srgb, var(--lapka-orange) 40%, var(--line));
}
.pbs-lapka__social {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 16px;
margin-top: 26px;
}
.pbs-lapka__social p {
margin: 0;
font-weight: 700;
font-size: 0.95rem;
color: var(--ink-soft);
}
.pbs-lapka__social .wp-block-social-links { margin: 0; }
/* =========================================================
11. Sekcja 7 - Koncowe CTA
========================================================= */
.pbs-final {
background: var(--cream);
text-align: center;
}
.pbs-final .pbs-wrap {
max-width: 820px;
background: var(--cream-card);
border: 2px solid var(--line);
border-radius: 36px;
padding: clamp(36px, 6vw, 64px) clamp(22px, 5vw, 56px);
}
.pbs-final .pbs-eyebrow { justify-content: center; }
.pbs-final .pbs-lede { margin-left: auto; margin-right: auto; }
.pbs-final .pbs-actions { justify-content: center; }
.pbs-final .pbs-phone { margin: 22px 0 0; color: var(--ink-soft); font-size: 1rem; }
.pbs-final .pbs-phone a { font-weight: 800; }
/* =========================================================
12. Responsywnosc
========================================================= */
@media (max-width: 960px) {
.pbs-cards { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
.pbs-offer__grid,
.pbs-about__grid,
.pbs-lapka__grid { grid-template-columns: 1fr; }
.pbs-hero__grid { grid-template-columns: 1fr; }
.pbs-hero__photo { max-width: 340px; order: 2; }
.pbs-head { margin-bottom: 28px; }
.pbs-about__photo { max-width: 520px; }
.pbs-lapka__hero { order: 2; }
}
@media (max-width: 680px) {
body { font-size: 17px; }
.pbs-social-grid { grid-template-columns: 1fr; }
.pbs-actions { flex-direction: column; align-items: stretch; }
.pbs-actions .wp-block-button { width: 100%; }
.pbs-actions .wp-block-button__link { width: 100%; }
.pbs-hero__photo::before { inset: 12px -10px -12px 10px; }
.pbs-about__photo::after { left: -8px; bottom: -8px; }
.pbs-pills li { font-size: 0.88rem; padding: 7px 13px; }
}
@media (prefers-reduced-motion: reduce) {
.pbs-card,
.pbs-actions .wp-block-button__link { transition: none; }
.pbs-card:hover,
.pbs-actions .wp-block-button__link:hover { transform: none; }
}
/* =========================================================
13. Uzupelnienia: ikony spolecznosciowe, notatki robocze
========================================================= */
.pbs-social-card .wp-block-social-links .wp-social-link,
.pbs-lapka__social .wp-block-social-links .wp-social-link {
color: var(--olive-deep) !important;
background-color: transparent !important;
}
.pbs-lapka__social .wp-block-social-links .wp-social-link { color: var(--lapka-orange-deep) !important; }
.wp-block-social-links .wp-social-link a:hover { opacity: 0.75; }
.pbs-num-note {
font-family: var(--font-mono);
font-size: 0.74rem;
line-height: 1.5;
color: var(--ink-faint);
margin-top: 4px !important;
}
/* =========================================================
14. Korekta: wrapper wewnetrzny bloku Group w GeneratePress
========================================================= */
.pbs-section .wp-block-group__inner-container {
display: contents;
padding: 0;
}
/* =========================================================
15. Korekty: specyficznosc przyciskow, rozmiar H1
========================================================= */
.pbs-actions .pbs-btn-primary a.wp-block-button__link { background: var(--gold); color: var(--on-gold); }
.pbs-actions .pbs-btn-primary a.wp-block-button__link:hover { background: var(--gold-soft); color: var(--on-gold); }
.pbs-actions .pbs-btn-ghost a.wp-block-button__link { background: transparent; color: var(--ink); border-color: var(--ink); }
.pbs-actions .pbs-btn-ghost a.wp-block-button__link:hover { background: transparent; color: var(--olive-deep); border-color: var(--olive); }
.pbs-actions .pbs-btn-orange a.wp-block-button__link { background: var(--lapka-orange); color: var(--on-lapka-orange); }
.pbs-actions .pbs-btn-orange a.wp-block-button__link:hover { background: var(--lapka-orange-soft); color: var(--on-lapka-orange); }
.pbs-actions .pbs-btn-olive a.wp-block-button__link { background: var(--olive-deep); color: #fbf7e8; }
.pbs-actions .pbs-btn-olive a.wp-block-button__link:hover { background: var(--olive); color: #fff; }
.pbs-actions .pbs-btn-light a.wp-block-button__link { background: transparent; color: #fbf7e8; border-color: rgba(251, 247, 232, 0.7); }
.pbs-actions .pbs-btn-light a.wp-block-button__link:hover { background: rgba(251, 247, 232, 0.12); color: #fff; border-color: #fff; }
.pbs-hero h1 { font-size: clamp(2.6rem, 5vw, 4.3rem); }
/* =========================================================
16. Naglowek na telefonie: logo, tytul i przycisk menu w jednym rzedzie
========================================================= */
@media (max-width: 768px) {
.inside-header { padding-top: 10px; padding-bottom: 10px; gap: 8px; }
.site-branding-container { flex: 1 1 0; min-width: 0; gap: 10px; }
.site-logo img, .header-image { max-height: 44px; }
.main-title, .main-title a { font-size: 0.98rem; line-height: 1.2; }
.mobile-menu-control-wrapper { flex: none; }
.main-navigation .menu-toggle {
min-height: 44px;
min-width: 44px;
padding: 0 12px;
background: transparent;
border: 2px solid var(--line);
border-radius: 12px;
}
.main-navigation .menu-toggle:hover,
.main-navigation .menu-toggle:focus-visible { background: var(--olive-pale); color: var(--ink); }
.inside-header > nav.main-navigation:not(.mobile-menu-control-wrapper) { flex: 0 0 100%; }
}
/* =========================================================
17. Dostepnosc: kontrast tekstu i widocznosc fokusu
========================================================= */
:root { --lapka-orange-text: #8f3f14; }
:focus-visible,
.pbs-card:focus-within { outline-color: var(--olive-deep); }
.pbs-lapka .wp-block-button__link:focus-visible { outline-color: var(--olive-deep); }
.pbs-offer .wp-block-button__link:focus-visible { outline-color: #fff8e0; }
.pbs-num-note { color: var(--ink-soft); }
.pbs-card--lapka .pbs-card__tag,
.pbs-card--lapka .pbs-card__link a,
.pbs-lapka .pbs-eyebrow { color: var(--lapka-orange-text); }
.pbs-lapka__social .wp-block-social-links .wp-social-link { color: var(--lapka-orange-text) !important; }
/* =========================================================
18. Korekty wizualne
========================================================= */
.pbs-hero {
background:
radial-gradient(900px 480px at 88% -8%, rgba(229, 230, 201, 0.95), transparent 62%),
var(--cream);
}
.pbs-about__photo { isolation: isolate; }
.pbs-social-card .wp-block-social-links .wp-block-social-link-anchor { padding: 0; }
.pbs-social-card .wp-block-social-links { margin-bottom: 10px; }
.pbs-lapka { background: color-mix(in srgb, var(--lapka-orange-soft) 16%, var(--cream)); }
/* =========================================================
19. Kolor linkow nawigacji w stanie hover/fokus
========================================================= */
.main-navigation .main-nav ul li > a:hover,
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li:focus-within > a,
.main-navigation .main-nav ul li.sfHover > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a { color: var(--olive-deep) !important; }
/* =========================================================
20. Etap A2c: naglowek bez tekstu tytulu, sciezki Akademii
========================================================= */
.site-branding { display: none; }
.pbs-lapka h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); line-height: 1.12; }
.pbs-paths {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-top: 26px;
}
.pbs-path {
position: relative;
display: flex;
flex-direction: column;
gap: 6px;
padding: 20px 20px 18px;
background: rgba(255, 255, 255, 0.62);
border: 2px solid color-mix(in srgb, var(--lapka-orange) 45%, var(--line));
border-radius: var(--pbs-radius-sm);
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.pbs-path:hover {
transform: translateY(-3px);
border-color: var(--lapka-orange);
box-shadow: 0 14px 30px -20px rgba(169, 77, 30, 0.7);
}
.pbs-path:focus-within { outline: 3px solid var(--olive-deep); outline-offset: 3px; }
.pbs-path p { margin: 0; }
.pbs-path h3 { font-size: 1.2rem; line-height: 1.15; margin: 0; }
.pbs-path__tag {
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--lapka-orange-text);
}
.pbs-path__text { font-size: 0.95rem; color: var(--ink-soft); }
.pbs-path__cap { font-size: 0.95rem; font-weight: 700; color: var(--ink-soft); }
.pbs-path__link { margin-top: auto !important; padding-top: 10px !important; }
.pbs-path__link a { font-weight: 800; color: var(--lapka-orange-text); text-decoration: none; }
.pbs-path__link a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.pbs-path__link a:focus-visible { outline: none; }
@media (max-width: 680px) {
.pbs-paths { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.pbs-path { transition: none; }
.pbs-path:hover { transform: none; }
}
/* =========================================================
21. Fokus przycisku oliwkowego na jasnym tle (koncowe CTA)
========================================================= */
.pbs-final .pbs-btn-olive .wp-block-button__link:focus-visible { outline-color: var(--olive-deep); }
/* =========================================================
22. Logo (przezroczyste tlo): nieco wiekszy znak, bez zmiany wysokosci naglowka
========================================================= */
.site-logo img,
.header-image { max-height: 60px; }
@media (max-width: 768px) {
.site-logo img,
.header-image { max-height: 52px; }
}
/* =========================================================
23. Strona Akademii Pana Lapki (/akademia/, page-id-21)
========================================================= */
.page-id-21 .site-content,
.page-id-21 .site-main,
.page-id-21 .content-area { background: transparent; }
.page-id-21 .inside-article { padding: 0; margin: 0; background: transparent; box-shadow: none; }
.page-id-21 .entry-content { margin: 0; }
.page-id-21 .grid-container { max-width: none; }
.page-id-21 .site-main > * { margin-bottom: 0; }
.pbs-section[id] { scroll-margin-top: 96px; }
:root { --apl-orange-tint: color-mix(in srgb, var(--lapka-orange-soft) 22%, var(--cream)); }
.apl-hero {
overflow: hidden;
padding-top: clamp(40px, 5.5vw, 80px);
background:
radial-gradient(900px 520px at 100% -10%, rgba(240, 161, 115, 0.38), transparent 62%),
radial-gradient(560px 360px at -4% 105%, rgba(227, 184, 102, 0.2), transparent 60%),
var(--cream);
}
.apl-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: clamp(28px, 5vw, 64px);
align-items: center;
}
/* Logo: naturalne proporcje (700x466), plynny rozmiar 215-270 px. Plik ma przezroczysty margines
(lewo 9%, gora 21,7%, dol 20,4% szerokosci), wiec marginesy ujemne wyrownuja widoczny znak
do lewej krawedzi tekstu i daja ok. 36 px odstepu do H1 - bez kadrowania. Gorny margines utrzymuje
dotychczasowa wysokosc bloku logo (stary rozmiar clamp(150px,17vw,200px) + 18 px), wiec hero nie zmienia wysokosci. */
.apl-hero__logo {
--apl-logo-w: clamp(215px, 18vw, 270px);
margin: calc(clamp(150px, 17vw, 200px) * 0.6657 - 18px - var(--apl-logo-w) * 0.4614) 0 calc(36px - var(--apl-logo-w) * 0.2043) calc(var(--apl-logo-w) * -0.09);
}
.apl-hero__logo img {
display: block;
width: var(--apl-logo-w);
height: auto;
max-width: 100%;
object-fit: contain;
}
.apl-hero h1 { font-size: clamp(2.5rem, 5.4vw, 4.3rem); line-height: 1.02; margin: 0 0 14px; }
.apl-tagline {
font-family: var(--font-head);
font-weight: 500;
font-size: clamp(1.25rem, 2.2vw, 1.7rem);
line-height: 1.25;
color: var(--lapka-orange-text);
margin: 0 0 14px;
}
.apl-hero__photo { margin: 0; }
.apl-hero__photo img {
display: block;
width: 100%;
height: auto;
border-radius: 30px;
border: 3px solid color-mix(in srgb, var(--lapka-orange) 55%, #fff);
box-shadow: 0 24px 46px -28px rgba(169, 77, 30, 0.75);
}
.pbs-actions .apl-btn-ghost a.wp-block-button__link { background: transparent; color: var(--lapka-orange-text); border-color: var(--lapka-orange); }
.pbs-actions .apl-btn-ghost a.wp-block-button__link:hover { background: var(--apl-orange-tint); color: var(--lapka-orange-text); border-color: var(--lapka-orange-deep); }
.apl-how { background: var(--cream); }
.apl-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; counter-reset: aplstep; }
.apl-step {
position: relative;
padding: 26px 22px 24px;
background: rgba(255, 255, 255, 0.6);
border: 2px solid color-mix(in srgb, var(--lapka-orange) 30%, var(--line));
border-radius: 24px;
}
.apl-step::before {
counter-increment: aplstep;
content: counter(aplstep);
display: grid;
place-items: center;
width: 42px;
height: 42px;
margin-bottom: 14px;
border-radius: 999px;
background: var(--lapka-orange);
color: var(--on-lapka-orange);
font-family: var(--font-head);
font-weight: 600;
font-size: 1.2rem;
}
.apl-step h3 { font-size: 1.25rem; margin: 0 0 8px; }
.apl-step p { margin: 0; color: var(--ink-soft); font-size: 1rem; }
.apl-callout {
margin: 26px 0 0;
padding: 18px 22px;
border-left: 6px solid var(--lapka-orange);
border-radius: 0 18px 18px 0;
background: var(--apl-orange-tint);
font-weight: 700;
color: var(--ink);
}
.apl-schools { background: var(--olive-pale); }
.apl-ages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.apl-age {
padding: 24px 22px;
background: var(--cream);
border: 2px solid color-mix(in srgb, var(--olive) 35%, transparent);
border-radius: 22px;
}
.apl-tag {
font-family: var(--font-mono);
font-size: 0.74rem;
font-weight: 500;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--olive-deep);
margin: 0;
}
.apl-age h3 { font-size: 1.5rem; margin: 6px 0 6px; }
.apl-age p:not(.apl-tag) { margin: 0; color: var(--ink-soft); }
.apl-wide {
margin-top: 18px;
padding: 22px 24px;
background: var(--cream);
border: 2px dashed color-mix(in srgb, var(--olive) 55%, transparent);
border-radius: 22px;
}
.apl-wide h3 { font-size: 1.3rem; margin: 6px 0; }
.apl-wide p:not(.apl-tag) { margin: 0; color: var(--ink-soft); }
.apl-org { margin-top: 28px; }
.apl-org h3 { font-size: 1.25rem; margin: 0 0 12px; }
.apl-note { margin: 18px 0 0; color: var(--ink-soft); max-width: 60ch; }
.apl-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.apl-checks li { margin: 0; display: flex; gap: 12px; align-items: flex-start; font-weight: 700; }
.apl-checks li::before {
content: "";
flex: none;
width: 24px;
height: 24px;
margin-top: 1px;
border-radius: 999px;
background: var(--lapka-orange) url("data:image/svg+xml;utf8,") center / 15px no-repeat;
}
.apl-family {
border-top: 6px solid var(--lapka-orange);
border-bottom: 1px solid color-mix(in srgb, var(--lapka-orange) 30%, var(--line));
background:
radial-gradient(700px 360px at 100% 0%, rgba(240, 161, 115, 0.3), transparent 64%),
var(--apl-orange-tint);
}
.apl-family .pbs-eyebrow { color: var(--lapka-orange-text); }
.apl-family .pbs-eyebrow::before { background: var(--lapka-orange); }
.apl-family__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(28px, 5vw, 64px);
align-items: center;
}
.apl-caption {
font-family: var(--font-head);
font-weight: 500;
font-size: 1.25rem;
color: var(--lapka-orange-text);
margin: 0 0 12px;
}
.apl-points {
padding: 28px 26px;
background: rgba(255, 255, 255, 0.7);
border: 2px solid color-mix(in srgb, var(--lapka-orange) 40%, var(--line));
border-radius: 26px;
box-shadow: 0 22px 44px -30px rgba(169, 77, 30, 0.7);
}
.apl-points h3 { font-size: 1.3rem; margin: 0 0 16px; }
.apl-people-sec { background: var(--cream); }
.apl-people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.apl-person {
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--cream-card);
border: 2px solid var(--line);
border-radius: 26px;
}
.apl-person figure { margin: 0; }
.apl-person img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.apl-person--pan img { object-position: 83% 30%; }
.apl-person--alia img { object-position: 42% 60%; }
.apl-person--lapek img { object-fit: contain; background: var(--apl-orange-tint); }
.apl-person__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 6px; }
.apl-person__body h3 { font-size: 1.45rem; margin: 0; }
.apl-person__body p { margin: 0; color: var(--ink-soft); }
.apl-person__body .apl-role { color: var(--lapka-orange-text); font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.apl-safe {
color: #f4efdb;
background:
radial-gradient(760px 340px at 100% 0%, rgba(227, 184, 102, 0.22), transparent 62%),
var(--olive-deep);
}
.apl-safe h2 { color: #fff8e0; }
.apl-safe .pbs-eyebrow { color: var(--gold-soft); }
.apl-safe .pbs-eyebrow::before { background: var(--gold-soft); }
.apl-safe .pbs-lede { color: #e4dec2; }
.apl-safe .apl-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.apl-safe .apl-checks li {
padding: 20px 22px;
background: rgba(251, 247, 232, 0.08);
border: 1.5px solid rgba(251, 247, 232, 0.22);
border-radius: 20px;
font-size: 1.05rem;
color: #fbf7e8;
}
.apl-safe .apl-checks li::before { background-color: var(--gold-soft); }
.apl-final { background: var(--cream); }
.apl-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.apl-choice { display: flex; flex-direction: column; gap: 10px; padding: 30px 28px; border: 2px solid; border-radius: 26px; }
.apl-choice--school { background: var(--olive-pale); border-color: color-mix(in srgb, var(--olive) 45%, transparent); }
.apl-choice--family { background: var(--apl-orange-tint); border-color: color-mix(in srgb, var(--lapka-orange) 50%, var(--line)); }
.apl-choice h3 { font-size: 1.5rem; margin: 0; }
.apl-choice p:not(.apl-tag) { margin: 0; color: var(--ink-soft); }
.apl-choice--family .apl-tag { color: var(--lapka-orange-text); }
.apl-choice .pbs-actions { margin-top: 14px; }
@media (max-width: 1100px) {
.apl-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
.apl-hero__grid, .apl-family__grid { grid-template-columns: 1fr; }
.apl-people { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
}
@media (max-width: 760px) {
.apl-ages, .apl-choices, .apl-safe .apl-checks { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.apl-steps { grid-template-columns: 1fr; }
}
/* =========================================================
24. Akademia: gradient hero, kadrowanie portretow
========================================================= */
.apl-hero {
background:
radial-gradient(900px 520px at 100% -10%, rgba(240, 161, 115, 0.38), transparent 62%),
var(--cream);
}
.apl-person--pan img { object-position: 50% 28%; }
.apl-person--alia img { object-position: 50% 35%; }
/* =========================================================
25. Akademia: kanoniczny Lapek + jedna lekka animacja (A3b)
Kolor pola graficznego = tlo filmu, wiec brak widocznego prostokata.
========================================================= */
:root { --apl-lapek-bg: #fef9ec; }
.apl-person--lapek .apl-lapek-media {
position: relative;
margin: 0;
aspect-ratio: 1 / 1;
overflow: hidden;
background: var(--apl-lapek-bg);
}
.apl-person--lapek .apl-lapek-media img,
.apl-person--lapek .apl-lapek-media video {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
aspect-ratio: auto;
object-fit: contain;
background: transparent;
}
.apl-lapek-video { opacity: 0; pointer-events: none; }
.apl-lapek-media.is-playing .apl-lapek-video,
.apl-lapek-media.is-done .apl-lapek-video { opacity: 1; }
/* =========================================================
26. Strona "O mnie" (/o-mnie/, page-id-13)
========================================================= */
.page-id-13 .site-content,
.page-id-13 .site-main,
.page-id-13 .content-area { background: transparent; }
.page-id-13 .inside-article { padding: 0; margin: 0; background: transparent; box-shadow: none; }
.page-id-13 .entry-content { margin: 0; }
.page-id-13 .grid-container { max-width: none; }
.page-id-13 .site-main > * { margin-bottom: 0; }
/* Hero */
.opm-hero {
overflow: hidden;
padding-top: clamp(44px, 6vw, 88px);
background:
radial-gradient(900px 520px at 100% -10%, rgba(229, 230, 201, 0.95), transparent 62%),
radial-gradient(520px 340px at -6% 108%, rgba(227, 184, 102, 0.2), transparent 62%),
var(--cream);
}
.opm-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
gap: clamp(32px, 6vw, 80px);
align-items: center;
}
.opm-hero h1 {
font-size: clamp(2.1rem, 4.2vw, 3.5rem);
line-height: 1.06;
margin: 0 0 22px;
}
.opm-hero h1 em {
font-style: normal;
color: var(--olive-deep);
background: linear-gradient(transparent 64%, rgba(227, 184, 102, 0.75) 64% 90%, transparent 90%);
padding: 0 0.06em;
}
.opm-hero .pbs-lede { font-size: clamp(1.08rem, 1.7vw, 1.25rem); max-width: 54ch; }
.opm-role {
margin: 18px 0 0;
font-family: var(--font-mono);
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-soft);
}
.opm-hero__photo { position: relative; margin: 0 auto; max-width: 420px; width: 100%; isolation: isolate; }
.opm-hero__photo::before {
content: "";
position: absolute;
right: -18px;
bottom: -18px;
width: 64%;
height: 64%;
border-radius: 34px;
background: var(--olive-pale);
border: 2px solid rgba(108, 122, 69, 0.35);
z-index: -1;
}
.opm-hero__photo::after {
content: "";
position: absolute;
left: -14px;
top: -14px;
width: 34%;
height: 28%;
border-left: 5px solid var(--gold);
border-top: 5px solid var(--gold);
border-radius: 30px 0 0 0;
z-index: -1;
}
.opm-hero__photo img {
display: block;
width: 100%;
height: auto;
border-radius: 30px;
box-shadow: var(--pbs-shadow);
}
/* Podejscie: trzy filary */
.opm-approach { background: var(--cream); }
.opm-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; counter-reset: opm; }
.opm-pillar {
position: relative;
padding: 28px 26px 28px;
background: var(--cream-card);
border: 2px solid var(--line);
border-radius: var(--pbs-radius);
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.opm-pillar:hover { transform: translateY(-4px); border-color: var(--olive); box-shadow: var(--pbs-shadow); }
.opm-pillar::before {
counter-increment: opm;
content: counter(opm);
display: grid;
place-items: center;
width: 44px;
height: 44px;
margin-bottom: 16px;
border-radius: 999px;
background: var(--olive-deep);
color: #fbf7e8;
font-family: var(--font-head);
font-weight: 600;
font-size: 1.2rem;
}
.opm-pillar h3 { font-size: clamp(1.3rem, 2.2vw, 1.55rem); margin: 0 0 10px; }
.opm-pillar p { margin: 0; color: var(--ink-soft); }
@media (min-width: 961px) { .opm-pillar h3 { min-height: 2.6em; } }
.opm-quote {
margin: 28px 0 0;
padding: 20px 24px;
max-width: 70ch;
border-left: 6px solid var(--gold);
border-radius: 0 18px 18px 0;
background: rgba(227, 184, 102, 0.18);
font-family: var(--font-head);
font-weight: 500;
font-size: clamp(1.1rem, 1.9vw, 1.3rem);
line-height: 1.4;
color: var(--ink);
}
/* Doswiadczenie: lekkie karty */
.opm-experience { background: var(--olive-pale); }
.opm-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.opm-fact {
display: flex;
flex-direction: column;
gap: 8px;
padding: 26px 24px 24px;
background: var(--cream);
border: 2px solid color-mix(in srgb, var(--olive) 35%, transparent);
border-radius: 22px;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.opm-fact:hover { transform: translateY(-3px); border-color: var(--olive); box-shadow: var(--pbs-shadow); }
.opm-fact__label {
margin: 0;
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 0.76rem;
font-weight: 500;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--olive-deep);
}
.opm-fact__label::before { content: ""; width: 22px; height: 3px; border-radius: 3px; background: var(--gold); flex: none; }
.opm-fact h3 { font-size: clamp(1.25rem, 2vw, 1.45rem); margin: 0; }
.opm-fact p:not(.opm-fact__label) { margin: 0; color: var(--ink-soft); }
.opm-fact a { font-weight: 800; color: var(--olive-deep); }
/* Obszary pracy */
.opm-areas-sec { background: var(--cream); }
.opm-areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.opm-areas .pbs-card--lapka .pbs-card__tag { color: var(--lapka-orange-text); }
/* Prywatnie */
.opm-private {
color: #f4efdb;
background:
radial-gradient(760px 340px at 100% 0%, rgba(227, 184, 102, 0.2), transparent 62%),
var(--olive-deep);
}
.opm-private__grid {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: clamp(32px, 6vw, 80px);
align-items: center;
}
.opm-private__photo { margin: 0; position: relative; max-width: 520px; width: 100%; }
.opm-private__photo img {
display: block;
width: 100%;
height: auto;
border-radius: 30px;
border: 3px solid rgba(251, 247, 232, 0.25);
box-shadow: 0 24px 46px -26px rgba(0, 0, 0, 0.7);
}
.opm-private h2 { color: #fff8e0; font-size: clamp(1.8rem, 3.5vw, 2.7rem); }
.opm-private .pbs-eyebrow { color: var(--gold-soft); }
.opm-private .pbs-eyebrow::before { background: var(--gold-soft); }
.opm-private p { color: #e4dec2; }
.opm-private h3 { color: #fff8e0; font-size: clamp(1.25rem, 2vw, 1.45rem); margin: 26px 0 8px; }
.opm-private .opm-quote { background: rgba(251, 247, 232, 0.08); border-left-color: var(--gold-soft); color: #fbf7e8; }
.opm-private :focus-visible { outline-color: #fff8e0; }
@media (max-width: 960px) {
.opm-hero__grid, .opm-private__grid { grid-template-columns: 1fr; }
.opm-hero__photo { max-width: 340px; }
.opm-pillars, .opm-facts { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
.opm-areas { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
.opm-private__photo { max-width: 460px; }
}
@media (min-width: 961px) and (max-width: 1100px) {
.opm-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
.opm-hero__photo::before { right: -10px; bottom: -10px; }
.opm-hero__photo::after { left: -8px; top: -8px; }
}
@media (prefers-reduced-motion: reduce) {
.opm-pillar, .opm-fact { transition: none; }
.opm-pillar:hover, .opm-fact:hover { transform: none; }
}
/* =========================================================
27. Strona "Uslugi" (/uslugi/, page-id-15)
========================================================= */
.page-id-15 .site-content,
.page-id-15 .site-main,
.page-id-15 .content-area { background: transparent; }
.page-id-15 .inside-article { padding: 0; margin: 0; background: transparent; box-shadow: none; }
.page-id-15 .entry-content { margin: 0; }
.page-id-15 .grid-container { max-width: none; }
.page-id-15 .site-main > * { margin-bottom: 0; }
/* Hero */
.usl-hero {
overflow: hidden;
padding-top: clamp(44px, 6vw, 88px);
background:
radial-gradient(860px 480px at 0% -10%, rgba(229, 230, 201, 0.95), transparent 62%),
radial-gradient(560px 360px at 104% 108%, rgba(227, 184, 102, 0.22), transparent 62%),
var(--cream);
}
.usl-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
gap: clamp(32px, 6vw, 80px);
align-items: center;
}
.usl-hero h1 {
font-size: clamp(2rem, 4.1vw, 3.3rem);
line-height: 1.08;
margin: 0 0 20px;
}
.usl-hero .pbs-lede { font-size: clamp(1.08rem, 1.7vw, 1.25rem); max-width: 52ch; }
.usl-hero__where {
margin: 18px 0 0;
font-family: var(--font-mono);
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-soft);
}
.usl-hero__photo { position: relative; margin: 0 auto; max-width: 500px; width: 100%; isolation: isolate; }
.usl-hero__photo::before {
content: "";
position: absolute;
inset: 12% -7% -9% 14%;
border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%;
background: var(--olive-pale);
border: 2px solid rgba(108, 122, 69, 0.3);
z-index: -1;
}
.usl-hero__photo img {
display: block;
width: 100%;
height: auto;
border-radius: 30px;
box-shadow: var(--pbs-shadow);
}
/* Trzy sciezki */
.usl-paths-sec { background: var(--cream); }
.usl-paths .pbs-card { padding: 32px 28px 28px; gap: 12px; }
.usl-paths .pbs-card h3 { font-size: clamp(1.5rem, 2.4vw, 1.85rem); }
.usl-where-line {
margin: 4px 0 0 !important;
font-family: var(--font-mono);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-soft);
}
.usl-note {
margin: 4px 0 0 !important;
padding-left: 14px;
border-left: 3px solid var(--gold);
font-size: 0.95rem;
color: var(--ink-soft);
}
.usl-paths .pbs-card__link a::before { content: "→ "; }
/* Przewodnik */
.usl-guide-sec { background: var(--olive-pale); }
.usl-guide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.usl-pick {
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
padding: 24px 24px 22px;
background: var(--cream);
border: 2px solid color-mix(in srgb, var(--olive) 35%, transparent);
border-radius: 22px;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.usl-pick:hover { transform: translateY(-3px); border-color: var(--olive); box-shadow: var(--pbs-shadow); }
.usl-pick:focus-within { outline: 3px solid var(--olive-deep); outline-offset: 3px; }
.usl-pick__q { margin: 0; font-family: var(--font-head); font-weight: 500; font-size: clamp(1.15rem, 1.9vw, 1.35rem); line-height: 1.25; color: var(--ink); }
.usl-pick__a { margin: 0; margin-top: auto; padding-top: 6px; }
.usl-pick__a a { font-weight: 800; color: var(--olive-deep); text-decoration: none; }
.usl-pick__a a::before { content: "→ "; }
.usl-pick__a a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.usl-pick__a a:focus-visible { outline: none; }
.usl-pick--open { border-style: dashed; background: rgba(251, 247, 232, 0.6); }
.usl-guide-note { margin: 22px 0 0; max-width: 70ch; color: var(--ink-soft); font-size: 0.97rem; }
/* Wspolpraca */
.usl-flow-sec { background: var(--cream); }
.usl-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; counter-reset: usl; }
.usl-step {
position: relative;
padding: 26px 22px 24px;
background: var(--cream-card);
border: 2px solid var(--line);
border-radius: 24px;
}
.usl-step::before {
counter-increment: usl;
content: counter(usl);
display: grid;
place-items: center;
width: 42px;
height: 42px;
margin-bottom: 14px;
border-radius: 999px;
background: var(--olive-deep);
color: #fbf7e8;
font-family: var(--font-head);
font-weight: 600;
font-size: 1.2rem;
}
.usl-step h3 { font-size: 1.25rem; margin: 0 0 8px; }
.usl-step p { margin: 0; color: var(--ink-soft); font-size: 1rem; }
/* Gdzie pracuje */
.usl-where-sec { background: color-mix(in srgb, var(--gold-soft) 16%, var(--cream)); }
.usl-where { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.usl-place {
padding: 26px 24px 24px;
background: var(--cream);
border: 2px solid var(--line);
border-radius: 22px;
}
.usl-place__tag {
margin: 0 0 6px;
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 0.76rem;
font-weight: 500;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--olive-deep);
}
.usl-place__tag::before { content: ""; width: 22px; height: 3px; border-radius: 3px; background: var(--gold); flex: none; }
.usl-place h3 { font-size: clamp(1.25rem, 2vw, 1.45rem); margin: 0 0 8px; }
.usl-place p:not(.usl-place__tag) { margin: 0; color: var(--ink-soft); }
.usl-place a { font-weight: 800; color: var(--olive-deep); }
/* Inne formy edukacji */
.usl-more-sec { background: var(--cream); }
.usl-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.usl-more .pbs-card { padding: 22px 24px 20px; gap: 6px; background: transparent; border-style: dashed; }
.usl-more .pbs-card h3 { font-size: clamp(1.2rem, 1.9vw, 1.4rem); }
.usl-more .pbs-card--lapka { background: color-mix(in srgb, var(--lapka-orange-soft) 14%, transparent); }
.usl-more .pbs-card__link { padding-top: 8px !important; }
.usl-more .pbs-card__link a::before { content: "→ "; }
.usl-shop { margin: 26px 0 0; color: var(--ink-soft); font-size: 0.98rem; }
.usl-shop a { font-weight: 800; color: var(--olive-deep); }
@media (max-width: 1100px) {
.usl-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
.usl-hero__grid { grid-template-columns: 1fr; }
.usl-hero__photo { max-width: 440px; }
.usl-where { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
.usl-more { max-width: 560px; margin-inline: auto; grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
.usl-guide { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.usl-steps { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.usl-pick { transition: none; }
.usl-pick:hover { transform: none; }
}
/* =========================================================
28. Podmenu "Oferta" (desktop): szersze, bez wychodzenia tekstu poza panel
========================================================= */
@media (min-width: 769px) {
.main-navigation .main-nav ul ul {
width: 290px;
box-sizing: border-box;
}
.main-navigation .main-nav ul ul li,
.main-navigation .main-nav ul ul li a {
width: 100%;
box-sizing: border-box;
}
.main-navigation .main-nav ul ul li a {
white-space: normal;
overflow-wrap: break-word;
line-height: 1.35;
}
/* Niewidzialny mostek nad panelem: przy przesuwaniu myszy z "Oferta" w dol podmenu nie znika
w 6-pikselowej szczelinie miedzy pozycja nadrzedna a panelem. */
.main-navigation .main-nav > ul > li > ul::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -12px;
height: 12px;
}
}
/* =========================================================
29. Strona "Konsultacje" (/konsultacje/, page-id-17)
========================================================= */
.page-id-17 .site-content,
.page-id-17 .site-main,
.page-id-17 .content-area { background: transparent; }
.page-id-17 .inside-article { padding: 0; margin: 0; background: transparent; box-shadow: none; }
.page-id-17 .entry-content { margin: 0; }
.page-id-17 .grid-container { max-width: none; }
.page-id-17 .site-main > * { margin-bottom: 0; }
/* Hero */
.kon-hero {
overflow: hidden;
padding-top: clamp(44px, 6vw, 88px);
background:
radial-gradient(820px 480px at 100% -6%, rgba(240, 161, 115, 0.16), transparent 62%),
radial-gradient(640px 380px at -4% 108%, rgba(229, 230, 201, 0.9), transparent 62%),
var(--cream);
}
.kon-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
gap: clamp(32px, 6vw, 80px);
align-items: center;
}
.kon-hero h1 {
font-size: clamp(2rem, 4.2vw, 3.4rem);
line-height: 1.08;
margin: 0 0 20px;
}
.kon-hero .pbs-lede { font-size: clamp(1.08rem, 1.7vw, 1.25rem); max-width: 54ch; }
.kon-hero__note {
margin: 16px 0 0;
max-width: 54ch;
font-size: 0.95rem;
color: var(--ink-soft);
}
.kon-hero__photo { position: relative; margin: 0 auto; max-width: 400px; width: 100%; isolation: isolate; }
.kon-hero__photo::before {
content: "";
position: absolute;
inset: 8% -8% -8% 10%;
border-radius: 999px 999px 40px 40px;
background: var(--olive-pale);
border: 2px solid rgba(108, 122, 69, 0.3);
z-index: -1;
}
.kon-hero__photo img {
display: block;
width: 100%;
height: auto;
border-radius: 999px 999px 32px 32px;
box-shadow: var(--pbs-shadow);
}
/* Kiedy warto wybrac konsultacje */
.kon-cases-sec { background: var(--cream); }
.kon-cases { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.kon-case {
grid-column: span 2;
display: flex;
flex-direction: column;
gap: 8px;
padding: 26px 24px 24px;
background: var(--cream-card);
border: 2px solid var(--line);
border-radius: 24px;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.kon-case:hover { transform: translateY(-3px); border-color: var(--olive); box-shadow: var(--pbs-shadow); }
.kon-case:nth-child(n+4) { grid-column: span 3; }
.kon-case h3 { font-size: clamp(1.25rem, 2vw, 1.45rem); margin: 0; }
.kon-case p:not(.kon-case__tag) { margin: 0; color: var(--ink-soft); }
.kon-case__tag {
margin: 0;
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 0.76rem;
font-weight: 500;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--olive-deep);
}
.kon-case__tag::before { content: ""; width: 22px; height: 3px; border-radius: 3px; background: var(--gold); flex: none; }
.kon-case--other { background: rgba(251, 247, 232, 0.6); border-style: dashed; }
/* Jak pracuje */
.kon-method-sec { background: var(--olive-pale); }
.kon-method__grid {
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
gap: clamp(32px, 6vw, 80px);
align-items: start;
}
.kon-points { display: grid; gap: 14px; }
.kon-point {
position: relative;
padding: 20px 22px 20px 70px;
background: var(--cream);
border: 2px solid color-mix(in srgb, var(--olive) 35%, transparent);
border-radius: 20px;
}
.kon-point::before {
content: "";
position: absolute;
left: 20px;
top: 20px;
width: 32px;
height: 32px;
border-radius: 999px;
background: var(--olive-deep) url("data:image/svg+xml;utf8,") center / 18px no-repeat;
}
.kon-point h3 { font-size: 1.2rem; margin: 0 0 4px; }
.kon-point p { margin: 0; color: var(--ink-soft); }
/* Wspolpraca: os czasu */
.kon-flow-sec { background: var(--cream); }
.kon-timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; counter-reset: kon; position: relative; }
.kon-timeline::before {
content: "";
position: absolute;
left: 22px;
right: 22px;
top: 21px;
border-top: 3px dotted color-mix(in srgb, var(--olive) 55%, transparent);
z-index: 0;
}
.kon-stage { position: relative; padding-top: 0; }
.kon-stage::before {
counter-increment: kon;
content: counter(kon);
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 44px;
height: 44px;
margin-bottom: 16px;
border-radius: 999px;
background: var(--gold);
color: var(--on-gold);
font-family: var(--font-head);
font-weight: 600;
font-size: 1.2rem;
box-shadow: 0 0 0 6px var(--cream);
}
.kon-stage h3 { font-size: 1.25rem; margin: 0 0 8px; }
.kon-stage p { margin: 0; color: var(--ink-soft); }
/* Formy spotkania */
.kon-forms-sec { background: color-mix(in srgb, var(--gold-soft) 16%, var(--cream)); }
.kon-forms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.kon-form {
padding: 26px 24px 24px;
background: var(--cream);
border: 2px solid var(--line);
border-radius: 22px;
}
.kon-form__tag {
margin: 0 0 6px;
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 0.76rem;
font-weight: 500;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--olive-deep);
}
.kon-form__tag::before { content: ""; width: 22px; height: 3px; border-radius: 3px; background: var(--gold); flex: none; }
.kon-form h3 { font-size: clamp(1.25rem, 2vw, 1.45rem); margin: 0 0 8px; }
.kon-form p:not(.kon-form__tag) { margin: 0; color: var(--ink-soft); }
.kon-forms-note { margin: 22px 0 0; max-width: 64ch; color: var(--ink-soft); font-weight: 700; }
/* Zdrowie */
.kon-health-sec { background: var(--cream); }
.kon-health {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: clamp(24px, 5vw, 64px);
align-items: center;
padding: clamp(28px, 4vw, 44px);
background: var(--cream-card);
border: 2px solid var(--line);
border-left: 8px solid var(--olive-deep);
border-radius: 28px;
}
.kon-health h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0; }
.kon-health ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.kon-health li { margin: 0; padding-left: 26px; position: relative; color: var(--ink-soft); }
.kon-health li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 10px; height: 10px; border-radius: 999px; background: var(--gold); }
/* Porownanie */
.kon-compare-sec { background: var(--olive-pale); }
.kon-compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.kon-option {
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
padding: 26px 24px 22px;
background: var(--cream);
border: 2px solid color-mix(in srgb, var(--olive) 35%, transparent);
border-radius: 22px;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.kon-option--link:hover { transform: translateY(-3px); border-color: var(--olive); box-shadow: var(--pbs-shadow); }
.kon-option--link:focus-within { outline: 3px solid var(--olive-deep); outline-offset: 3px; }
.kon-option--here { background: var(--olive-deep); border-color: var(--olive-deep); color: #f4efdb; }
.kon-option--here h3, .kon-option--here .kon-option__tag { color: #fff8e0; }
.kon-option.kon-option--here p:not(.kon-option__tag):not(.kon-option__link) { color: #e4dec2; }
.kon-option__tag {
margin: 0;
font-family: var(--font-mono);
font-size: 0.74rem;
font-weight: 500;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--olive-deep);
}
.kon-option h3 { font-size: clamp(1.25rem, 2vw, 1.45rem); margin: 0; }
.kon-option p:not(.kon-option__tag):not(.kon-option__link) { margin: 0; color: var(--ink-soft); }
.kon-option__link { margin: auto 0 0 !important; padding-top: 10px; }
.kon-option__link a { font-weight: 800; color: var(--olive-deep); text-decoration: none; }
.kon-option__link a::before { content: "→ "; }
.kon-option__link a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.kon-option__link a:focus-visible { outline: none; }
.kon-compare-note { margin: 22px 0 0; color: var(--ink-soft); }
.kon-compare-note a { font-weight: 800; color: var(--olive-deep); }
@media (max-width: 1100px) {
.kon-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
.kon-timeline::before { display: none; }
}
@media (max-width: 960px) {
.kon-hero__grid, .kon-method__grid, .kon-health { grid-template-columns: 1fr; }
.kon-hero__photo { max-width: 320px; }
.kon-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kon-case, .kon-case:nth-child(n+4) { grid-column: span 1; }
.kon-case:last-child { grid-column: 1 / -1; }
.kon-forms, .kon-compare { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
}
@media (max-width: 640px) {
.kon-cases { grid-template-columns: 1fr; }
.kon-timeline { grid-template-columns: 1fr; }
.kon-point { padding-left: 64px; }
.kon-hero__photo::before { right: -6%; }
}
@media (prefers-reduced-motion: reduce) {
.kon-case, .kon-option { transition: none; }
.kon-case:hover, .kon-option--link:hover { transform: none; }
}
/* =========================================================
30. Strona "Konsultacje dla psich seniorow" (/konsultacje-pies-senior/, page-id-29)
Spokojniejsza, cieplejsza wersja: miekkie tla, wieksze zaokraglenia.
========================================================= */
.page-id-29 .site-content,
.page-id-29 .site-main,
.page-id-29 .content-area { background: transparent; }
.page-id-29 .inside-article { padding: 0; margin: 0; background: transparent; box-shadow: none; }
.page-id-29 .entry-content { margin: 0; }
.page-id-29 .grid-container { max-width: none; }
.page-id-29 .site-main > * { margin-bottom: 0; }
:root { --sen-warm: color-mix(in srgb, var(--lapka-orange-soft) 14%, var(--cream)); --sen-gold: color-mix(in srgb, var(--gold-soft) 18%, var(--cream)); }
/* Hero */
.sen-hero {
overflow: hidden;
padding-top: clamp(28px, 4vw, 56px);
background:
radial-gradient(900px 520px at 0% -10%, rgba(227, 184, 102, 0.28), transparent 62%),
radial-gradient(700px 420px at 104% 100%, rgba(240, 161, 115, 0.2), transparent 62%),
var(--cream);
}
.sen-crumbs { margin: 0 0 clamp(22px, 3vw, 36px); font-size: 0.92rem; color: var(--ink-soft); }
.sen-crumbs a { color: var(--olive-deep); font-weight: 700; }
.sen-crumbs span[aria-hidden] { margin: 0 6px; color: var(--ink-faint); }
.sen-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
gap: clamp(32px, 6vw, 80px);
align-items: center;
}
.sen-hero h1 {
font-size: clamp(1.9rem, 3.8vw, 3.05rem);
line-height: 1.12;
margin: 0 0 20px;
}
.sen-hero .pbs-lede { font-size: clamp(1.08rem, 1.7vw, 1.25rem); max-width: 54ch; }
.sen-hero__note { margin: 16px 0 0; max-width: 54ch; font-size: 0.95rem; color: var(--ink-soft); }
.sen-hero__photo { position: relative; margin: 0 auto; max-width: 520px; width: 100%; isolation: isolate; }
.sen-hero__photo::before {
content: "";
position: absolute;
inset: -6% -5% -8% -6%;
border-radius: 58% 42% 55% 45% / 48% 56% 44% 52%;
background: color-mix(in srgb, var(--lapka-orange-soft) 26%, var(--cream));
z-index: -1;
}
.sen-hero__photo img {
display: block;
width: 100%;
height: auto;
border-radius: 44px;
box-shadow: 0 24px 46px -28px rgba(169, 77, 30, 0.55);
}
/* Co sie zmienilo */
.sen-changes-sec { background: var(--cream); }
.sen-changes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.sen-change {
display: flex;
flex-direction: column;
gap: 8px;
padding: 26px 24px 24px;
background: var(--sen-warm);
border: 2px solid color-mix(in srgb, var(--lapka-orange-soft) 40%, var(--line));
border-radius: 30px;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.sen-change:hover { transform: translateY(-3px); border-color: var(--lapka-orange); box-shadow: 0 18px 38px -26px rgba(169, 77, 30, 0.6); }
.sen-change__tag {
margin: 0;
font-family: var(--font-mono);
font-size: 0.74rem;
font-weight: 500;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--lapka-orange-text);
}
.sen-change h3 { font-size: clamp(1.2rem, 1.9vw, 1.4rem); margin: 0; line-height: 1.25; }
.sen-note { margin: 22px 0 0; max-width: 66ch; color: var(--ink-soft); font-size: 0.97rem; }
/* Zachowanie i zdrowie */
.sen-health-sec { background: var(--sen-gold); }
.sen-health { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 6vw, 80px); align-items: start; }
.sen-quote {
margin: 0 0 22px;
padding: 6px 0 6px 22px;
border-left: 6px solid var(--gold);
font-family: var(--font-head);
font-weight: 500;
font-size: clamp(1.3rem, 2.4vw, 1.75rem);
line-height: 1.3;
color: var(--ink);
}
.sen-health__text p { margin: 0 0 14px; color: var(--ink-soft); }
.sen-health__text ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.sen-health__text li { margin: 0; padding-left: 26px; position: relative; color: var(--ink-soft); }
.sen-health__text li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 10px; height: 10px; border-radius: 999px; background: var(--lapka-orange); }
/* Jak wyglada konsultacja: pionowy przebieg */
.sen-flow-sec { background: var(--cream); }
.sen-flow { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 80px); align-items: start; }
.sen-steps { display: grid; gap: 0; counter-reset: sen; position: relative; }
.sen-steps::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; border-left: 3px dotted color-mix(in srgb, var(--lapka-orange) 55%, transparent); }
.sen-step { position: relative; padding: 0 0 26px 66px; }
.sen-step:last-child { padding-bottom: 0; }
.sen-step::before {
counter-increment: sen;
content: counter(sen);
position: absolute;
left: 0;
top: 0;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 999px;
background: var(--lapka-orange);
color: var(--on-lapka-orange);
font-family: var(--font-head);
font-weight: 600;
font-size: 1.2rem;
box-shadow: 0 0 0 6px var(--cream);
}
.sen-step h3 { font-size: 1.25rem; margin: 0 0 6px; padding-top: 8px; }
.sen-step p { margin: 0; color: var(--ink-soft); }
/* W czym pomaga */
.sen-help-sec { background: var(--sen-warm); }
.sen-help { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.sen-help__item {
grid-column: span 2;
padding: 26px 24px 24px;
background: var(--cream);
border: 2px solid var(--line);
border-radius: 28px;
}
.sen-help__item:nth-child(n+4) { grid-column: span 3; }
.sen-help__item h3 { font-size: clamp(1.2rem, 1.9vw, 1.4rem); margin: 0 0 8px; }
.sen-help__item p { margin: 0; color: var(--ink-soft); }
/* Psia starosc bez spiny */
.sen-story-sec { background: var(--sen-gold); }
.sen-story { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 80px); align-items: center; }
.sen-story__photo { margin: 0 auto; position: relative; max-width: 400px; width: 100%; }
.sen-story__photo img { display: block; width: 100%; height: auto; border-radius: 40px 40px 120px 40px; box-shadow: var(--pbs-shadow); }
.sen-story__text p { color: var(--ink-soft); }
.sen-story__text a { font-weight: 800; color: var(--olive-deep); }
/* Senioralna czy ogolna */
.sen-compare-sec { background: var(--cream); }
.sen-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 900px; }
.sen-option {
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
padding: 28px 26px 24px;
background: var(--cream-card);
border: 2px solid var(--line);
border-radius: 28px;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.sen-option__tag { margin: 0; font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--olive-deep); }
.sen-option h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); margin: 0; }
.sen-option p:not(.sen-option__tag):not(.sen-option__link) { margin: 0; color: var(--ink-soft); }
.sen-option--here { background: color-mix(in srgb, var(--lapka-orange-soft) 22%, var(--cream)); border-color: var(--lapka-orange); }
.sen-option--here .sen-option__tag { color: var(--lapka-orange-text); }
.sen-option--link:hover { transform: translateY(-3px); border-color: var(--olive); box-shadow: var(--pbs-shadow); }
.sen-option--link:focus-within { outline: 3px solid var(--olive-deep); outline-offset: 3px; }
.sen-option__link { margin: auto 0 0 !important; padding-top: 10px; }
.sen-option__link a { font-weight: 800; color: var(--olive-deep); text-decoration: none; }
.sen-option__link a::before { content: "→ "; }
.sen-option__link a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.sen-option__link a:focus-visible { outline: none; }
.sen-compare-note { margin: 22px 0 0; color: var(--ink-soft); }
.sen-compare-note a { font-weight: 800; color: var(--olive-deep); }
/* FAQ (details/summary - dziala bez JavaScriptu) */
.sen-faq-sec { background: var(--olive-pale); }
.sen-faq { display: grid; gap: 12px; max-width: 860px; }
.sen-faq .wp-block-details {
background: var(--cream);
border: 2px solid color-mix(in srgb, var(--olive) 35%, transparent);
border-radius: 22px;
padding: 0;
margin: 0;
}
.sen-faq .wp-block-details summary {
cursor: pointer;
list-style: none;
padding: 18px 56px 18px 22px;
position: relative;
font-family: var(--font-head);
font-weight: 500;
font-size: clamp(1.05rem, 1.7vw, 1.2rem);
line-height: 1.3;
color: var(--ink);
}
.sen-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.sen-faq .wp-block-details summary::after {
content: "+";
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 999px;
background: var(--olive-deep);
color: #fbf7e8;
font-family: var(--font-body);
font-weight: 800;
line-height: 1;
}
.sen-faq .wp-block-details[open] summary::after { content: "\2212"; }
.sen-faq .wp-block-details:hover { border-color: var(--olive); }
.sen-faq .wp-block-details summary:focus-visible { outline: 3px solid var(--olive-deep); outline-offset: 2px; border-radius: 20px; }
.sen-faq .wp-block-details > p { margin: 0; padding: 0 22px 20px; color: var(--ink-soft); }
.sen-final-note { margin: 22px auto 0; max-width: 60ch; font-size: 0.92rem; color: var(--ink-soft); }
@media (max-width: 1100px) {
.sen-changes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
.sen-hero__grid, .sen-health, .sen-flow, .sen-story { grid-template-columns: 1fr; }
.sen-hero__photo { max-width: 440px; }
.sen-story__photo { max-width: 340px; }
.sen-help { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sen-help__item, .sen-help__item:nth-child(n+4) { grid-column: span 1; }
.sen-help__item:last-child { grid-column: 1 / -1; }
.sen-compare { grid-template-columns: 1fr; max-width: 560px; }
}
@media (max-width: 640px) {
.sen-changes, .sen-help { grid-template-columns: 1fr; }
.sen-step { padding-left: 60px; }
}
@media (prefers-reduced-motion: reduce) {
.sen-change, .sen-option { transition: none; }
.sen-change:hover, .sen-option--link:hover { transform: none; }
}
/* =========================================================
31. Strona "Szkolenie psow Rzeszow / zajecia grupowe" (/szkolenie-psow-rzeszow/, page-id-27)
Modul .pbs-current-groups jest edytowalny w Gutenbergu - dane zmienne (terminy, ceny) to tresc strony.
========================================================= */
.page-id-27 .site-content,
.page-id-27 .site-main,
.page-id-27 .content-area { background: transparent; }
.page-id-27 .inside-article { padding: 0; margin: 0; background: transparent; box-shadow: none; }
.page-id-27 .entry-content { margin: 0; }
.page-id-27 .grid-container { max-width: none; }
.page-id-27 .site-main > * { margin-bottom: 0; }
/* Hero */
.grp-hero {
overflow: hidden;
padding-top: clamp(28px, 4vw, 56px);
background:
radial-gradient(820px 520px at 100% -10%, rgba(227, 184, 102, 0.34), transparent 62%),
radial-gradient(640px 400px at -6% 104%, rgba(229, 230, 201, 0.95), transparent 62%),
var(--cream);
}
.grp-crumbs { margin: 0 0 clamp(22px, 3vw, 36px); font-size: 0.92rem; color: var(--ink-soft); }
.grp-crumbs a { color: var(--olive-deep); font-weight: 700; }
.grp-crumbs span[aria-hidden] { margin: 0 6px; color: var(--ink-faint); }
.grp-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
gap: clamp(32px, 6vw, 80px);
align-items: center;
}
.grp-hero h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.07; margin: 0 0 20px; }
.grp-hero h1 em {
font-style: normal;
color: var(--olive-deep);
background: linear-gradient(transparent 64%, rgba(227, 184, 102, 0.75) 64% 90%, transparent 90%);
padding: 0 0.06em;
}
.grp-hero .pbs-lede { font-size: clamp(1.08rem, 1.7vw, 1.25rem); max-width: 54ch; }
.grp-hero__photo { position: relative; margin: 0 auto; max-width: 400px; width: 100%; isolation: isolate; }
.grp-hero__photo::before {
content: "";
position: absolute;
inset: 6% -7% -6% 7%;
border-radius: 34px;
background: var(--gold-soft);
opacity: 0.55;
transform: rotate(4deg);
z-index: -1;
}
.grp-hero__photo img {
display: block;
width: 100%;
height: auto;
border-radius: 30px;
box-shadow: var(--pbs-shadow);
transform: rotate(-1.5deg);
}
/* Zdjecie zajec (pozioma fotografia): stala rama = brak przesuniec ukladu, kadr przez object-fit/object-position. */
.grp-hero__photo { max-width: 460px; }
.grp-hero__photo img.wp-image-94 {
aspect-ratio: 4 / 3;
height: auto;
object-fit: cover;
object-position: 62% 78%;
}
/* Aktualne grupy - wydzielony modul */
.pbs-current-groups { color: #f4efdb; background: radial-gradient(760px 340px at 100% 0%, rgba(227, 184, 102, 0.2), transparent 62%), var(--olive-deep); }
.pbs-current-groups h2 { color: #fff8e0; }
.pbs-current-groups .pbs-eyebrow { color: var(--gold-soft); }
.pbs-current-groups .pbs-eyebrow::before { background: var(--gold-soft); }
.pbs-current-groups .pbs-lede { color: #e4dec2; }
.pbs-current-groups :focus-visible { outline-color: #fff8e0; }
.pbs-current-groups__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.pbs-group-card {
display: flex;
flex-direction: column;
gap: 8px;
padding: 28px 26px 26px;
background: var(--cream);
color: var(--ink);
border-radius: 28px;
box-shadow: 0 24px 46px -28px rgba(0, 0, 0, 0.6);
}
.pbs-group-card .pbs-card__tag { color: var(--olive-deep); }
.pbs-group-card h3 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); margin: 0; color: var(--ink); }
.pbs-group-facts { list-style: none; margin: 8px 0 6px; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.pbs-group-facts li { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.pbs-group-facts li strong { color: var(--ink); font-weight: 800; }
.pbs-group-card .pbs-actions { margin-top: auto; padding-top: 12px; }
.pbs-current-groups__more { margin: 22px 0 0; color: #e4dec2; }
.pbs-current-groups__more a { color: #fff8e0; font-weight: 800; }
/* Programy */
.grp-programs-sec { background: var(--cream); }
.grp-programs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.grp-program {
display: flex;
flex-direction: column;
gap: 10px;
padding: 30px 28px 28px;
background: var(--cream-card);
border: 2px solid var(--line);
border-radius: 28px;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.grp-program:hover { transform: translateY(-4px); border-color: var(--olive); box-shadow: var(--pbs-shadow); }
.grp-program h3 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); margin: 0; }
.grp-program__sub { margin: 0; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--olive-deep); }
.grp-program p:not(.grp-program__sub) { margin: 0; color: var(--ink-soft); }
.grp-program p strong { color: var(--ink); }
/* Jak wygladaja zajecia */
.grp-how-sec { background: var(--olive-pale); }
.grp-how { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.grp-trait {
padding: 26px 22px 24px;
background: var(--cream);
border: 2px solid color-mix(in srgb, var(--olive) 35%, transparent);
border-radius: 24px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.grp-trait:hover { transform: translateY(-3px); box-shadow: var(--pbs-shadow); }
.grp-trait::before { content: ""; display: block; width: 36px; height: 6px; margin-bottom: 14px; border-radius: 6px; background: var(--gold); }
.grp-trait h3 { font-size: 1.25rem; margin: 0 0 8px; }
.grp-trait p { margin: 0; color: var(--ink-soft); }
/* Czy grupa bedzie dobrym pierwszym krokiem */
.grp-fit-sec { background: var(--cream); }
.grp-fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.grp-fit__col { padding: 30px 28px 28px; border: 2px solid; border-radius: 28px; }
.grp-fit__col--yes { background: color-mix(in srgb, var(--olive) 12%, var(--cream)); border-color: color-mix(in srgb, var(--olive) 45%, transparent); }
.grp-fit__col--talk { background: color-mix(in srgb, var(--lapka-orange-soft) 18%, var(--cream)); border-color: color-mix(in srgb, var(--lapka-orange) 45%, var(--line)); }
.grp-fit__col h3 { font-size: clamp(1.25rem, 2.2vw, 1.55rem); margin: 0 0 14px; }
.grp-fit__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.grp-fit__col li { margin: 0; padding-left: 32px; position: relative; color: var(--ink); font-weight: 700; }
.grp-fit__col li::before {
content: "";
position: absolute;
left: 0;
top: 1px;
width: 22px;
height: 22px;
border-radius: 999px;
background: var(--olive-deep) url("data:image/svg+xml;utf8,") center / 14px no-repeat;
}
.grp-fit__col--talk li::before { background: var(--lapka-orange) url("data:image/svg+xml;utf8,") center / 14px no-repeat; }
.grp-fit-note { margin: 22px 0 0; max-width: 62ch; color: var(--ink-soft); }
/* Zapis: kroki */
.grp-flow-sec { background: var(--sen-gold, var(--cream)); }
.grp-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; counter-reset: grp; }
.grp-step { position: relative; padding: 26px 22px 24px; background: var(--cream); border: 2px solid var(--line); border-radius: 24px; }
.grp-step::before {
counter-increment: grp;
content: counter(grp);
display: grid;
place-items: center;
width: 42px;
height: 42px;
margin-bottom: 14px;
border-radius: 999px;
background: var(--gold);
color: var(--on-gold);
font-family: var(--font-head);
font-weight: 600;
font-size: 1.2rem;
}
.grp-step h3 { font-size: 1.25rem; margin: 0 0 8px; }
.grp-step p { margin: 0; color: var(--ink-soft); }
/* Miejsce */
.grp-place-sec { background: var(--cream); }
.grp-place { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 6vw, 80px); align-items: center; }
.grp-place__text p { color: var(--ink-soft); }
.grp-address {
padding: 30px 28px 28px;
background: var(--cream-card);
border: 2px solid var(--line);
border-left: 8px solid var(--gold);
border-radius: 28px;
}
.grp-address__label { margin: 0 0 6px; font-family: var(--font-mono); font-size: 0.76rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--olive-deep); }
.grp-address h3 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); margin: 0 0 6px; }
.grp-address p:not(.grp-address__label) { margin: 0; color: var(--ink-soft); }
/* FAQ */
.grp-faq-sec { background: var(--olive-pale); }
.grp-faq { display: grid; gap: 12px; max-width: 860px; }
.grp-faq .wp-block-details { background: var(--cream); border: 2px solid color-mix(in srgb, var(--olive) 35%, transparent); border-radius: 22px; padding: 0; margin: 0; }
.grp-faq .wp-block-details summary {
cursor: pointer;
list-style: none;
padding: 18px 56px 18px 22px;
position: relative;
font-family: var(--font-head);
font-weight: 500;
font-size: clamp(1.05rem, 1.7vw, 1.2rem);
line-height: 1.3;
color: var(--ink);
}
.grp-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.grp-faq .wp-block-details summary::after {
content: "+";
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 999px;
background: var(--olive-deep);
color: #fbf7e8;
font-family: var(--font-body);
font-weight: 800;
line-height: 1;
}
.grp-faq .wp-block-details[open] summary::after { content: "\2212"; }
.grp-faq .wp-block-details:hover { border-color: var(--olive); }
.grp-faq .wp-block-details summary:focus-visible { outline: 3px solid var(--olive-deep); outline-offset: 2px; border-radius: 20px; }
.grp-faq .wp-block-details > p { margin: 0; padding: 0 22px 20px; color: var(--ink-soft); }
@media (max-width: 1100px) {
.grp-how, .grp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
.grp-hero__grid, .grp-place { grid-template-columns: 1fr; }
.grp-hero__photo { max-width: 340px; }
.grp-hero__photo img.wp-image-94 { aspect-ratio: 1 / 1; object-position: 57% 100%; }
.pbs-current-groups__cards, .grp-programs, .grp-fit { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
}
@media (max-width: 560px) {
.grp-how, .grp-steps { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.grp-program, .grp-trait { transition: none; }
.grp-program:hover, .grp-trait:hover { transform: none; }
}
/* =========================================================
32. Strona "Kontakt" (/kontakt/, page-id-23)
========================================================= */
.page-id-23 .site-content,
.page-id-23 .site-main,
.page-id-23 .content-area { background: transparent; }
.page-id-23 .inside-article { padding: 0; margin: 0; background: transparent; box-shadow: none; }
.page-id-23 .entry-content { margin: 0; }
.page-id-23 .grid-container { max-width: none; }
.page-id-23 .site-main > * { margin-bottom: 0; }
/* Hero */
.ktk-hero {
overflow: hidden;
padding-top: clamp(44px, 6vw, 88px);
background:
radial-gradient(820px 480px at 100% -6%, rgba(229, 230, 201, 0.95), transparent 62%),
radial-gradient(560px 360px at -4% 108%, rgba(227, 184, 102, 0.22), transparent 62%),
var(--cream);
}
.ktk-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: clamp(32px, 6vw, 80px);
align-items: center;
}
.ktk-hero h1 {
font-size: clamp(2rem, 4.2vw, 3.4rem);
line-height: 1.08;
margin: 0 0 20px;
}
.ktk-hero .pbs-lede { font-size: clamp(1.08rem, 1.7vw, 1.25rem); max-width: 54ch; }
.ktk-hero__direct {
margin: 22px 0 0;
display: flex;
flex-wrap: wrap;
gap: 6px 26px;
color: var(--ink-soft);
}
.ktk-hero__direct a { font-weight: 800; color: var(--olive-deep); text-underline-offset: 3px; overflow-wrap: anywhere; }
.ktk-hero__photo { position: relative; margin: 0 auto; max-width: 380px; width: 100%; isolation: isolate; }
.ktk-hero__photo::before {
content: "";
position: absolute;
inset: 6% -7% -6% 7%;
border-radius: 34px;
background: var(--olive-pale);
border: 2px solid rgba(108, 122, 69, 0.3);
transform: rotate(4deg);
z-index: -1;
}
.ktk-hero__photo img {
display: block;
width: 100%;
aspect-ratio: 3 / 4;
height: auto;
object-fit: cover;
object-position: 50% 30%;
border-radius: 30px;
box-shadow: var(--pbs-shadow);
transform: rotate(-1.5deg);
}
/* Wspolne: etykieta, link pomocniczy, przyciski w kartach */
.ktk-tag {
margin: 0;
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 0.76rem;
font-weight: 500;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--olive-deep);
}
.ktk-tag::before { content: ""; width: 22px; height: 3px; border-radius: 3px; background: var(--gold); flex: none; }
.ktk-more { margin: 0; }
.ktk-more a { font-weight: 800; color: var(--olive-deep); text-underline-offset: 3px; }
.ktk-more a::after { content: " \2192"; }
.ktk-actions { margin-top: auto !important; padding-top: 12px; gap: 10px; }
.ktk-actions .wp-block-button { max-width: 100%; }
.ktk-actions .wp-block-button__link { min-height: 48px; padding: 11px 22px; font-size: 0.97rem; text-align: center; }
/* W jakiej sprawie piszesz */
.ktk-topics-sec { background: var(--cream); }
.ktk-topics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.ktk-topic {
grid-column: span 2;
display: flex;
flex-direction: column;
gap: 10px;
padding: 26px 24px 24px;
background: var(--cream-card);
border: 2px solid var(--line);
border-radius: 24px;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ktk-topic:nth-child(n+4) { grid-column: span 3; }
.ktk-topic:hover { transform: translateY(-3px); border-color: var(--olive); box-shadow: var(--pbs-shadow); }
.ktk-topic h3 { font-size: clamp(1.25rem, 2vw, 1.45rem); margin: 0; }
.ktk-topic p:not(.ktk-tag):not(.ktk-more) { margin: 0; color: var(--ink-soft); }
.ktk-topic--other { background: rgba(251, 247, 232, 0.6); border-style: dashed; }
/* Bezposredni kontakt */
.ktk-direct-sec { background: var(--olive-pale); }
.ktk-direct { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ktk-channel {
display: flex;
flex-direction: column;
gap: 8px;
padding: 26px 24px 24px;
background: var(--cream);
border: 2px solid color-mix(in srgb, var(--olive) 35%, transparent);
border-radius: 22px;
}
.ktk-channel h3 { font-size: 1.15rem; margin: 0; color: var(--olive-deep); }
.ktk-channel__value {
margin: 0;
font-family: var(--font-head);
font-weight: 500;
font-size: clamp(1.35rem, 2.4vw, 1.7rem);
line-height: 1.25;
overflow-wrap: anywhere;
}
.ktk-channel__value--mail { font-size: clamp(1.02rem, 1.45vw, 1.2rem); }
.ktk-channel__value a {
color: var(--ink);
text-decoration: underline;
text-decoration-color: var(--gold);
text-decoration-thickness: 3px;
text-underline-offset: 5px;
}
.ktk-channel__value a:hover { color: var(--olive-deep); text-decoration-color: var(--olive-deep); }
.ktk-channel .ktk-more { margin-top: auto; padding-top: 8px; }
.ktk-direct-note { margin: 24px 0 0; max-width: 68ch; color: var(--ink-soft); }
/* Rezerwacja online */
.ktk-book-sec { background: color-mix(in srgb, var(--gold-soft) 16%, var(--cream)); }
.ktk-book { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ktk-offer {
display: flex;
flex-direction: column;
gap: 10px;
padding: 30px 28px 26px;
background: var(--cream);
border: 2px solid var(--olive-deep);
border-radius: 26px;
box-shadow: var(--pbs-shadow);
}
.ktk-offer h3 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin: 0; }
.ktk-offer p:not(.ktk-tag):not(.ktk-more) { margin: 0; color: var(--ink-soft); }
.ktk-book-note { margin: 24px 0 0; max-width: 68ch; color: var(--ink-soft); font-weight: 700; }
/* Zanim napiszesz */
.ktk-prep-sec { background: var(--olive-pale); }
.ktk-prep__grid {
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
gap: clamp(32px, 6vw, 80px);
align-items: start;
}
.ktk-prep__body { display: grid; gap: 14px; }
.ktk-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ktk-checks li {
position: relative;
margin: 0;
padding: 20px 22px 20px 70px;
background: var(--cream);
border: 2px solid color-mix(in srgb, var(--olive) 35%, transparent);
border-radius: 20px;
font-weight: 700;
color: var(--ink);
}
.ktk-checks li::before {
content: "";
position: absolute;
left: 20px;
top: 18px;
width: 32px;
height: 32px;
border-radius: 999px;
background: var(--olive-deep) url("data:image/svg+xml;utf8,") center / 18px no-repeat;
}
.ktk-privacy {
margin: 0;
padding: 18px 22px;
border-left: 6px solid var(--gold);
border-radius: 0 18px 18px 0;
background: var(--cream);
color: var(--ink-soft);
}
@media (max-width: 1100px) {
.ktk-direct { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
}
@media (max-width: 960px) {
.ktk-hero__grid, .ktk-prep__grid { grid-template-columns: 1fr; }
.ktk-hero__photo { max-width: 300px; }
.ktk-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ktk-topic, .ktk-topic:nth-child(n+4) { grid-column: span 1; }
.ktk-topic:last-child { grid-column: 1 / -1; }
.ktk-book { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
}
@media (max-width: 640px) {
.ktk-topics { grid-template-columns: 1fr; }
.ktk-checks li { padding-left: 64px; }
}
@media (prefers-reduced-motion: reduce) {
.ktk-topic { transition: none; }
.ktk-topic:hover { transform: none; }
}
@media (min-width: 961px) {
/* Karta bez linku pomocniczego: przycisk na tej samej wysokosci co w sasiedniej karcie */
.ktk-topic--other .ktk-actions { padding-bottom: 39px; }
}
/* =========================================================
33. Strona "Webinary" (/webinary/, page-id-25)
========================================================= */
.page-id-25 .site-content,
.page-id-25 .site-main,
.page-id-25 .content-area { background: transparent; }
.page-id-25 .inside-article { padding: 0; margin: 0; background: transparent; box-shadow: none; }
.page-id-25 .entry-content { margin: 0; }
.page-id-25 .grid-container { max-width: none; }
.page-id-25 .site-main > * { margin-bottom: 0; }
/* Hero */
.web-hero {
overflow: hidden;
padding-top: clamp(44px, 6vw, 88px);
background:
radial-gradient(860px 480px at 100% -8%, rgba(229, 230, 201, 0.95), transparent 62%),
radial-gradient(560px 360px at -4% 108%, rgba(227, 184, 102, 0.2), transparent 62%),
var(--cream);
}
.web-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: clamp(32px, 6vw, 80px);
align-items: center;
}
.web-hero h1 {
font-size: clamp(2rem, 4.2vw, 3.4rem);
line-height: 1.08;
margin: 0 0 20px;
}
.web-hero .pbs-lede { font-size: clamp(1.08rem, 1.7vw, 1.25rem); max-width: 54ch; }
.web-hero__photo { position: relative; margin: 0 auto; max-width: 460px; width: 100%; isolation: isolate; }
.web-hero__photo::before {
content: "";
position: absolute;
inset: 7% -6% -7% 6%;
border-radius: 34px;
background: var(--gold-soft);
opacity: 0.5;
transform: rotate(3deg);
z-index: -1;
}
.web-hero__photo img {
display: block;
width: 100%;
aspect-ratio: 9 / 8;
height: auto;
object-fit: cover;
object-position: 50% 35%;
border-radius: 30px;
box-shadow: var(--pbs-shadow);
transform: rotate(-1.2deg);
}
/* Najblizsze spotkanie - modul edytowalny w Gutenbergu */
.pbs-current-webinars {
scroll-margin-top: 80px;
color: #f4efdb;
background: radial-gradient(760px 340px at 100% 0%, rgba(227, 184, 102, 0.2), transparent 62%), var(--olive-deep);
}
.pbs-current-webinars h2 { color: #fff8e0; }
.pbs-current-webinars .pbs-eyebrow { color: var(--gold-soft); }
.pbs-current-webinars .pbs-eyebrow::before { background: var(--gold-soft); }
.pbs-current-webinars .pbs-lede { color: #e4dec2; }
.pbs-current-webinars :focus-visible { outline-color: #fff8e0; }
.pbs-current-webinars .pbs-webinar-card :focus-visible { outline-color: var(--olive-deep); }
.pbs-webinar-card {
display: flex;
flex-direction: column;
gap: 10px;
max-width: 760px;
padding: 30px 30px 28px;
background: var(--cream);
color: var(--ink);
border-radius: 28px;
box-shadow: 0 24px 46px -28px rgba(0, 0, 0, 0.6);
}
.pbs-webinar-card .pbs-webinar-status {
margin: 0;
align-self: flex-start;
padding: 5px 14px;
border-radius: 999px;
background: var(--gold-soft);
color: var(--on-gold);
font-family: var(--font-mono);
font-size: 0.76rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.pbs-webinar-card h3 { font-size: clamp(1.5rem, 2.8vw, 2rem); margin: 0; color: var(--ink); }
.pbs-webinar-card p:not(.pbs-webinar-status) { margin: 0; color: var(--ink-soft); }
.pbs-webinar-facts { list-style: none; margin: 8px 0 6px; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.pbs-webinar-facts li { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.pbs-webinar-facts li strong { color: var(--ink); font-weight: 800; }
.pbs-webinar-card .pbs-actions { margin-top: 6px; padding-top: 6px; }
.pbs-current-webinars__more { margin: 22px 0 0; max-width: 60ch; color: #e4dec2; }
/* Czego mozesz sie spodziewac */
.web-expect-sec { background: var(--cream); }
.web-expect { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.web-expect-card {
display: flex;
flex-direction: column;
gap: 8px;
padding: 26px 24px 24px;
background: var(--cream-card);
border: 2px solid var(--line);
border-radius: 24px;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.web-expect-card:hover { transform: translateY(-3px); border-color: var(--olive); box-shadow: var(--pbs-shadow); }
.web-expect-card h3 { font-size: clamp(1.25rem, 2vw, 1.45rem); margin: 0; }
.web-expect-card p:not(.web-tag) { margin: 0; color: var(--ink-soft); }
.web-tag {
margin: 0;
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 0.76rem;
font-weight: 500;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--olive-deep);
}
.web-tag::before { content: ""; width: 22px; height: 3px; border-radius: 3px; background: var(--gold); flex: none; }
/* Dla kogo */
.web-for-sec { background: var(--olive-pale); }
.web-for { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.web-for li {
position: relative;
margin: 0;
padding: 20px 22px 20px 70px;
background: var(--cream);
border: 2px solid color-mix(in srgb, var(--olive) 35%, transparent);
border-radius: 20px;
font-weight: 700;
color: var(--ink);
}
.web-for li::before {
content: "";
position: absolute;
left: 20px;
top: 18px;
width: 32px;
height: 32px;
border-radius: 999px;
background: var(--olive-deep) url("data:image/svg+xml;utf8,") center / 18px no-repeat;
}
/* Jak wyglada udzial */
.web-how-sec { background: color-mix(in srgb, var(--gold-soft) 16%, var(--cream)); }
.web-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: webhow; }
.web-how-item {
position: relative;
padding: 26px 24px 24px;
background: var(--cream);
border: 2px solid var(--line);
border-radius: 22px;
}
.web-how-item::before {
counter-increment: webhow;
content: counter(webhow);
display: grid;
place-items: center;
width: 42px;
height: 42px;
margin-bottom: 14px;
border-radius: 999px;
background: var(--olive-deep);
color: #fbf7e8;
font-family: var(--font-head);
font-weight: 600;
font-size: 1.2rem;
}
.web-how-item h3 { font-size: 1.25rem; margin: 0 0 8px; }
.web-how-item p { margin: 0; color: var(--ink-soft); }
/* Wiedza zostaje na dluzej */
.web-more-sec { background: var(--olive-pale); }
.web-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.web-more-card {
display: flex;
flex-direction: column;
gap: 8px;
padding: 24px 24px 22px;
background: var(--cream);
border: 2px solid color-mix(in srgb, var(--olive) 35%, transparent);
border-radius: 22px;
}
.web-more-card h3 { font-size: clamp(1.2rem, 1.9vw, 1.4rem); margin: 0; }
.web-more-card p:not(.web-link) { margin: 0; color: var(--ink-soft); }
.web-link { margin: auto 0 0; padding-top: 8px; }
.web-link a { font-weight: 800; color: var(--olive-deep); text-underline-offset: 3px; }
.web-link a::after { content: " \2192"; }
.web-more-note { margin: 22px 0 0; max-width: 68ch; color: var(--ink-soft); font-size: 0.98rem; }
@media (max-width: 960px) {
.web-hero__grid { grid-template-columns: 1fr; }
.web-hero__photo { max-width: 360px; }
.web-expect { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
.web-how { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
.web-more { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
}
@media (max-width: 760px) {
.web-for { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.web-for li { padding-left: 64px; }
.pbs-webinar-card { padding: 26px 22px 24px; }
}
@media (prefers-reduced-motion: reduce) {
.web-expect-card { transition: none; }
.web-expect-card:hover { transform: none; }
}
/* =========================================================
34. Strona szczegolowa webinaru (/webinary/zmiana-zachowania-seniora-pod-lupa/, dziecko strony Webinary)
Wspoldzieli klasy web-hero, web-expect, web-for, web-how-sec z sekcji 33.
========================================================= */
.parent-pageid-25 .site-content,
.parent-pageid-25 .site-main,
.parent-pageid-25 .content-area { background: transparent; }
.parent-pageid-25 .inside-article { padding: 0; margin: 0; background: transparent; box-shadow: none; }
.parent-pageid-25 .entry-content { margin: 0; }
.parent-pageid-25 .grid-container { max-width: none; }
.parent-pageid-25 .site-main > * { margin-bottom: 0; }
/* Etykiety w hero */
.wsd-pills { margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.wsd-pills span {
padding: 5px 14px;
border-radius: 999px;
background: var(--gold-soft);
color: var(--on-gold);
font-family: var(--font-mono);
font-size: 0.74rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.wsd-pills span + span { background: var(--olive-pale); color: var(--olive-deep); border: 1px solid color-mix(in srgb, var(--olive) 45%, transparent); }
/* Pasek najwazniejszych informacji */
.pbs-section.wsd-bar-sec { padding-top: 22px; padding-bottom: 22px; color: #f4efdb; background: var(--olive-deep); }
.wsd-bar { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 40px; }
.wsd-bar li { margin: 0; display: flex; align-items: center; gap: 10px; font-weight: 800; color: #f4efdb; }
.wsd-bar li::before { content: ""; width: 10px; height: 10px; border-radius: 999px; background: var(--gold-soft); flex: none; }
/* Przyklady zmian - lista znacznikow */
.wsd-examples-title { margin: clamp(28px, 4vw, 44px) 0 14px; font-size: clamp(1.25rem, 2vw, 1.5rem); }
.wsd-examples { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.wsd-examples li {
margin: 0;
padding: 9px 16px;
background: var(--cream);
border: 2px solid color-mix(in srgb, var(--olive) 35%, transparent);
border-radius: 999px;
color: var(--ink-soft);
font-size: 0.97rem;
}
/* Co wyniesiesz */
.wsd-gain-sec { background: var(--cream); }
.wsd-gain-sec .web-for li { background: var(--cream-card); }
/* Prowadzacy */
.wsd-presenter-sec { background: var(--cream); }
.wsd-presenter {
max-width: 820px;
display: grid;
gap: 10px;
padding: 28px 30px 26px;
background: var(--cream-card);
border: 2px solid var(--line);
border-radius: 28px;
}
.wsd-presenter p { margin: 0; color: var(--ink-soft); }
.wsd-presenter .wsd-role { color: var(--ink); font-weight: 800; }
.wsd-presenter__links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.wsd-presenter__links a { font-weight: 800; color: var(--olive-deep); text-underline-offset: 3px; }
/* Informacja bezpieczenstwa */
.wsd-safety-sec { background: var(--olive-pale); }
.wsd-safety {
max-width: 820px;
padding: 26px 28px;
background: var(--cream);
border-left: 8px solid var(--gold);
border-radius: 0 24px 24px 0;
}
.wsd-safety p { margin: 0; color: var(--ink); font-size: 1.05rem; }
@media (max-width: 640px) {
.wsd-bar { flex-direction: column; align-items: flex-start; }
.wsd-presenter { padding: 24px 22px 22px; }
.wsd-safety { padding: 22px 20px; }
}
/* =========================================================
35. Strona "Sklep" (/sklep/, page-id-19)
Wspoldzieli klasy web-how-sec, web-how, web-expect-sec, web-for-sec, web-more-*, wsd-safety* z sekcji 33-34.
========================================================= */
.page-id-19 .site-content,
.page-id-19 .site-main,
.page-id-19 .content-area { background: transparent; }
.page-id-19 .inside-article { padding: 0; margin: 0; background: transparent; box-shadow: none; }
.page-id-19 .entry-content { margin: 0; }
.page-id-19 .grid-container { max-width: none; }
.page-id-19 .site-main > * { margin-bottom: 0; }
/* Hero */
.shp-hero {
overflow: hidden;
padding-top: clamp(44px, 6vw, 88px);
background:
radial-gradient(860px 480px at 100% -8%, rgba(229, 230, 201, 0.95), transparent 62%),
radial-gradient(560px 360px at -4% 108%, rgba(227, 184, 102, 0.2), transparent 62%),
var(--cream);
}
.shp-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
gap: clamp(32px, 6vw, 80px);
align-items: center;
}
.shp-hero h1 {
font-size: clamp(2rem, 4.2vw, 3.4rem);
line-height: 1.08;
margin: 0 0 20px;
}
.shp-hero .pbs-lede { font-size: clamp(1.08rem, 1.7vw, 1.25rem); max-width: 54ch; }
.shp-hero__covers {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(8px, 1.4vw, 14px);
align-items: start;
max-width: 460px;
margin: 0 auto;
width: 100%;
}
.shp-hero__covers .wp-block-image { margin: 0; }
.shp-hero__covers .wp-block-image:nth-child(even) { transform: translateY(clamp(12px, 2.4vw, 26px)); }
.shp-hero__covers img {
display: block;
width: 100%;
height: auto;
border-radius: 10px;
box-shadow: var(--pbs-shadow);
}
/* Katalog */
.shp-catalog-sec { scroll-margin-top: 80px; }
.shp-catalog { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.shp-card {
display: flex;
flex-direction: column;
gap: 8px;
padding: 18px 18px 20px;
background: var(--cream);
border: 2px solid var(--line);
border-radius: 24px;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.shp-card:hover { transform: translateY(-3px); border-color: var(--olive); box-shadow: var(--pbs-shadow); }
.shp-card .shp-cover {
margin: 0 0 6px;
aspect-ratio: 3 / 4;
background: var(--olive-pale);
border-radius: 16px;
padding: 12px;
display: grid;
place-items: center;
}
.shp-card .shp-cover img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.shp-card h3 { font-size: clamp(1.2rem, 1.8vw, 1.4rem); margin: 0; line-height: 1.15; }
.shp-card p:not(.shp-tag):not(.shp-price):not(.shp-buy) { margin: 0; color: var(--ink-soft); font-size: 0.97rem; }
.shp-tag {
margin: 0;
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 0.74rem;
font-weight: 500;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--olive-deep);
}
.shp-tag::before { content: ""; width: 22px; height: 3px; border-radius: 3px; background: var(--gold); flex: none; }
.shp-format { font-family: var(--font-mono); font-size: 0.78rem !important; letter-spacing: 0.02em; color: var(--olive-deep) !important; }
.shp-price { margin: 4px 0 0; font-family: var(--font-head); font-weight: 600; font-size: 1.5rem; color: var(--ink); }
.shp-card .shp-buy { margin: auto 0 0; padding-top: 10px; }
.shp-buy a {
display: flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 11px 18px;
border-radius: 999px;
background: var(--gold);
color: var(--on-gold);
font-weight: 800;
font-size: 0.97rem;
line-height: 1.2;
text-align: center;
text-decoration: none;
transition: background-color 0.18s ease, transform 0.18s ease;
}
.shp-buy a:hover { background: var(--gold-soft); color: var(--on-gold); transform: translateY(-2px); }
.shp-buy a:active { transform: none; }
.shp-buy a:focus-visible { outline: 3px solid var(--olive-deep); outline-offset: 3px; }
.shp-price-note { margin: 22px 0 0; max-width: 70ch; color: var(--ink-soft); font-size: 0.95rem; }
/* Jak wybrac */
.shp-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
/* Ostroznosc i dalsza pomoc */
.shp-note-sec { background: var(--cream); }
.shp-note-sec .wsd-safety { background: var(--cream-card); }
.shp-help { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1100px) {
.shp-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
.shp-hero__grid { grid-template-columns: 1fr; }
.shp-hero__covers { max-width: 380px; }
.shp-help { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
.shp-pick { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
}
@media (max-width: 560px) {
.shp-catalog { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
.shp-card, .shp-buy a { transition: none; }
.shp-card:hover, .shp-buy a:hover { transform: none; }
}
/* =========================================================
36. Strona "Blog" - zapowiedz (/blog/, page-id-121); uklad jak web-hero z sekcji 33
========================================================= */
.page-id-121 .site-content,
.page-id-121 .site-main,
.page-id-121 .content-area { background: transparent; }
.page-id-121 .inside-article { padding: 0; margin: 0; background: transparent; box-shadow: none; }
.page-id-121 .entry-content { margin: 0; }
.page-id-121 .grid-container { max-width: none; }
.page-id-121 .site-main > * { margin-bottom: 0; }
/* =========================================================
37. Etap przedstartowy 0.14.0: polityka prywatnosci (page-id-3), dokumenty na /akademia/, stopka, linki w module webinarow
========================================================= */
.page-id-3 .site-content,
.page-id-3 .site-main,
.page-id-3 .content-area { background: transparent; }
.page-id-3 .inside-article { padding: 0; margin: 0; background: transparent; box-shadow: none; }
.page-id-3 .entry-content { margin: 0; }
.page-id-3 .grid-container { max-width: none; }
.page-id-3 .site-main > * { margin-bottom: 0; }
.pbs-legal-sec { padding-top: clamp(44px, 6vw, 88px); }
.pbs-legal { max-width: 800px; margin-inline: auto; }
.pbs-legal h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; margin: 0 0 14px; }
.pbs-legal h2 { font-size: clamp(1.3rem, 2.2vw, 1.65rem); line-height: 1.2; margin: clamp(28px, 4vw, 40px) 0 10px; }
.pbs-legal p, .pbs-legal li { color: var(--ink-soft); }
.pbs-legal p { margin: 0 0 14px; }
.pbs-legal ul { margin: 0 0 16px; padding-left: 1.3em; }
.pbs-legal li { margin: 0 0 6px; }
.pbs-legal a { font-weight: 700; text-underline-offset: 3px; }
.pbs-legal .pbs-lede { max-width: none; }
/* Dokumenty ochrony malotetnich na /akademia/ */
.apl-docs { margin-top: clamp(22px, 3vw, 34px); max-width: 820px; }
.apl-docs h3 { font-size: clamp(1.15rem, 1.8vw, 1.35rem); margin: 0 0 10px; }
.apl-safe .apl-docs h3 { color: #fff8e0; }
.apl-docs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.apl-docs li { margin: 0; }
.apl-docs a {
display: inline-block;
padding: 9px 16px;
background: var(--cream);
border: 2px solid color-mix(in srgb, var(--olive) 35%, transparent);
border-radius: 999px;
font-weight: 700;
text-decoration: none;
color: var(--olive-deep);
}
.apl-docs a:hover { border-color: var(--olive); }
.apl-docs a:focus-visible { outline: 3px solid var(--olive-deep); outline-offset: 3px; }
/* Stopka: nazwa marki + dyskretne linki */
.site-info .inside-site-info { gap: 6px 22px; }
.pbs-footer-links { display: inline-flex; flex-wrap: wrap; gap: 4px 18px; justify-content: center; margin: 0; padding: 0; list-style: none; }
.pbs-footer-links li { margin: 0; }
.pbs-footer-links a { text-underline-offset: 3px; }
/* Link "Zobacz tez" w module aktualnych webinarow */
.pbs-current-webinars__more a { color: #fff8e0; font-weight: 800; text-underline-offset: 3px; }
.pbs-current-webinars__more a:hover { color: var(--gold-soft); }
/* =========================================================
Blog (0.14.4): kafelki serii, Query Loop wpisow, tresc wpisu, widoczny fokus
Tylko istniejace zmienne motywu; bez nowych fontow i zasobow zewnetrznych.
========================================================= */
.pbs-cards.blog-series__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.blog-series__tile { background: var(--cream-card); border: 1px solid var(--line); border-radius: var(--pbs-radius); padding: 24px; }
.blog-series__tile h3 { margin: 0.2em 0 0.4em; }
.blog-series__tile .pbs-card__link a { font-weight: 700; }
.blog-query .wp-block-post-template { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.blog-query .wp-block-post { background: var(--cream-card); border: 1px solid var(--line); border-radius: var(--pbs-radius); padding: 16px; margin: 0; }
.blog-query .wp-block-post-featured-image img { width: 100%; height: auto; border-radius: var(--pbs-radius-sm); }
.blog-query__series { font-family: var(--font-mono); font-size: 0.85rem; margin: 0.6em 0 0; color: var(--ink-soft); }
.blog-query__series a { text-decoration: none; }
.blog-query .wp-block-post-title { font-size: 1.2rem; margin: 0.3em 0; }
.blog-query .wp-block-post-date { color: var(--ink-faint); font-size: 0.9rem; }
/* Tresc wpisu (seria, podpis, blok koncowy, zrodla, przypisy) */
.blog-byline { color: var(--ink-soft); }
.blog-disclaimer { color: var(--ink-soft); }
.blog-more { margin: 2.5em 0; }
.blog-sources { padding-left: 1.4em; }
.blog-sources li { margin: 0.4em 0; overflow-wrap: anywhere; }
.entry-content sup a { text-decoration: none; padding: 0 1px; }
/* Widoczny fokus klawiatury w elementach bloga */
.blog-series__tile a:focus-visible,
.blog-query a:focus-visible,
.blog-more a:focus-visible,
.blog-sources a:focus-visible,
.entry-content sup a:focus-visible { outline: 3px solid var(--olive-deep); outline-offset: 3px; }
@media (max-width: 768px) {
.pbs-cards.blog-series__cards { grid-template-columns: 1fr; }
}
/* =========================================================
Wpisy blogowe (0.14.5): bez paska bocznego, czytelna kolumna, zdjecie wyrozniajace 4:3
Kadr: object-position 82% w pionie zostawia oko, ucho i caly pysk Diunki.
========================================================= */
.single-post .content-area { width: 100%; max-width: 820px; margin-inline: auto; }
.single-post .featured-image img {
display: block;
width: 100%;
max-width: 560px;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
object-position: 50% 82%;
margin-inline: auto;
border-radius: var(--pbs-radius-sm);
}
/* =========================================================
Akademia (0.14.7): "Najblizsze spotkania rodzinne" w sekcji #dla-rodzin (page-id-21)
Karty wydarzen: obraz, tytul (H3), termin, opis, fakty, CTA do Naffy.
========================================================= */
.apl-events { margin-top: clamp(44px, 6vw, 80px); }
.apl-events__head { max-width: 760px; margin-bottom: clamp(24px, 3.5vw, 40px); }
.apl-events__head h2 { margin: 0 0 14px; }
.apl-events__head .pbs-lede { margin: 0; max-width: 62ch; }
.apl-events__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.apl-events .apl-events__grid > * { margin: 0; }
.apl-event {
display: flex;
flex-direction: column;
overflow: hidden;
background: rgba(255, 255, 255, 0.78);
border: 2px solid color-mix(in srgb, var(--lapka-orange) 40%, var(--line));
border-radius: 26px;
box-shadow: 0 22px 44px -30px rgba(169, 77, 30, 0.7);
}
.apl-event > * { margin: 0; }
.apl-event .apl-event__img { margin: 0; }
.apl-event .apl-event__img img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.apl-event .apl-event__body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 24px; }
.apl-event .apl-event__body h3,
.apl-event .apl-event__body p,
.apl-event .apl-event__body ul,
.apl-event .apl-event__body .wp-block-buttons { margin: 0; }
.apl-event .apl-event__body h3 { font-size: clamp(1.3rem, 2vw, 1.55rem); line-height: 1.15; }
.apl-event__when { font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; color: var(--olive-deep); }
.apl-event__when strong { color: var(--lapka-orange-text); }
.apl-event__text { color: var(--ink-soft); }
.apl-event .apl-event__facts { list-style: none; padding: 0; display: grid; gap: 6px; font-weight: 700; }
.apl-event .apl-event__facts li { margin: 0; }
.apl-event__facts strong { font-size: 1.35rem; color: var(--lapka-orange-text); }
.apl-event__rule { font-size: 0.92rem; color: var(--ink-soft); }
.apl-event .apl-event__body .apl-event__cta { margin: auto 0 0; padding-top: 10px; }
.apl-event__cta .wp-block-button { width: 100%; }
.apl-event__cta .wp-block-button__link { width: 100%; text-align: center; }
.apl-events .apl-events__note { margin: 22px 0 0; color: var(--ink-soft); font-weight: 700; }
@media (max-width: 960px) {
.apl-events__grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
}
/* =========================================================
Akademia (0.14.8): kafel bezplatnej gry "Akta Pana Lapki" w sekcji #dla-rodzin (page-id-21)
========================================================= */
.apl-game-tile {
display: grid;
grid-template-columns: minmax(0, 170px) minmax(0, 1fr);
gap: clamp(20px, 4vw, 44px);
align-items: center;
margin-top: clamp(32px, 4vw, 56px);
padding: clamp(22px, 3vw, 34px);
background: rgba(255, 255, 255, 0.78);
border: 2px solid color-mix(in srgb, var(--lapka-orange) 40%, var(--line));
border-radius: 26px;
box-shadow: 0 22px 44px -30px rgba(169, 77, 30, 0.7);
}
.apl-game-tile > * { margin: 0; }
.apl-game-tile .apl-game-tile__img { margin: 0; }
.apl-game-tile .apl-game-tile__img img { display: block; width: 100%; max-width: 170px; height: auto; margin-inline: auto; }
.apl-game-tile .apl-game-tile__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.apl-game-tile .apl-game-tile__body h3,
.apl-game-tile .apl-game-tile__body p,
.apl-game-tile .apl-game-tile__body .wp-block-buttons { margin: 0; }
.apl-game-tile .apl-game-tile__body h3 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); line-height: 1.15; }
.apl-game-tile .apl-game-tile__text { color: var(--ink-soft); max-width: 58ch; }
.apl-game-tile .apl-game-tile__body .pbs-actions { margin-top: 8px; }
@media (max-width: 760px) {
.apl-game-tile { grid-template-columns: 1fr; }
.apl-game-tile .apl-game-tile__img img { max-width: 130px; }
}