/* VIBE base CSS */
/* ─── Zmienne typograficzne ─────────────────────────────────────────────────── */
:root {
--vibe-bg: #07080C;
--vibe-bg-footer: #07080C;
/* Fonty */
--vibe-font-body: "Source Sans 3", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
--vibe-font-display: "Fraunces", Georgia, serif;
/* Nadpisanie Kadence global font variable */
--global-body-font-family: var(--vibe-font-body);
--global-heading-font-family: var(--vibe-font-display);
}
html,
body,
.site,
#page,
.kadence-inner-column-inner,
.wp-site-blocks {
background-color: var(--vibe-bg) !important;
}
.site-main,
.content-area,
.entry-content,
.wp-block-group:not([class*="vibe-"]):not(.has-background) {
background-color: transparent !important;
}
/* ============================================
STRATEGIA TŁA wg TYPU STRONY (research-based)
Źródła: NN/g, M+R Benchmarks 2025, iDonate
============================================ */
/* Cała strona kremowa (dla stron konwersyjnych i long-text) */
body.vibe-light-page {
background: #F5F1E8 !important;
color: #0E0F14 !important;
}
body.vibe-light-page html,
body.vibe-light-page .site,
body.vibe-light-page #page,
body.vibe-light-page .wp-site-blocks,
body.vibe-light-page .site-main,
body.vibe-light-page .content-area,
body.vibe-light-page .entry-content-wrap,
body.vibe-light-page .entry.single-entry,
body.vibe-light-page main {
background: #F5F1E8 !important;
color: #0E0F14 !important;
}
body.vibe-light-page .section,
body.vibe-light-page .page-hero,
body.vibe-light-page .wp-block-group {
background: #F5F1E8 !important;
color: #0E0F14 !important;
}
body.vibe-light-page h1,
body.vibe-light-page h2,
body.vibe-light-page h3,
body.vibe-light-page h4 {
color: #0E0F14 !important;
}
body.vibe-light-page p,
body.vibe-light-page li,
body.vibe-light-page a:not(.wp-block-button__link) {
color: #0E0F14 !important;
}
body.vibe-light-page em {
color: #7B3FE4 !important;
font-style: italic;
}
body.vibe-light-page .wp-block-button__link.is-style-fill,
body.vibe-light-page .wp-block-button.is-style-fill .wp-block-button__link {
background: #C8F542 !important;
color: #0E0F14 !important;
border: 2px solid #0E0F14 !important;
}
body.vibe-light-page .wp-block-button__link.is-style-outline,
body.vibe-light-page .wp-block-button.is-style-outline .wp-block-button__link {
background: transparent !important;
color: #0E0F14 !important;
border: 2px solid #0E0F14 !important;
}
body.vibe-light-page .vibe-eyebrow,
body.vibe-light-page .eyebrow {
color: #7B3FE4 !important;
}
/* ─── Trust signals ────────────────────────────────────────────────────────── */
.trust-signals {
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: center;
align-items: center;
margin-top: 24px;
font-size: 13px;
opacity: .85;
}
.trust-signal {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border: 1px solid rgba(14, 15, 20, .15);
border-radius: 9999px;
}
.trust-signal svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
/* ─── Long-text reading optimization ──────────────────────────────────────── */
.section--reading {
background: #F5F1E8;
color: #0E0F14;
padding: 80px 24px;
}
.section--reading p {
font-size: 18px;
line-height: 1.7;
max-width: 65ch;
margin: 0 auto 20px;
}
/* ─── Footer legal info ────────────────────────────────────────────────────── */
.vibe-legal-info {
font-size: 12px;
opacity: .7;
text-align: center;
padding: 20px;
border-top: 1px solid rgba(255, 255, 255, .08);
line-height: 1.6;
color: inherit;
}
.vibe-legal-info span {
margin: 0 8px;
}
/* ─── Board section (Zarząd / Rada Nadzorcza) ──────────────────────────────── */
.vibe-board-section {
max-width: 900px;
margin: 0 auto;
padding: 80px 24px;
}
.vibe-board-section .vibe-eyebrow {
font-size: 13px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: #7B3FE4 !important;
margin: 0 0 12px;
}
.vibe-board-section h2 {
margin-top: 0;
margin-bottom: 48px;
}
.vibe-board-section h3 {
margin-top: 48px;
margin-bottom: 20px;
}
.vibe-board-grid {
gap: 20px !important;
}
.vibe-person-card {
padding: 28px !important;
border: 1px solid rgba(14, 15, 20, .12) !important;
border-radius: 12px !important;
background: transparent !important;
}
.vibe-person-card h4 {
margin: 0 0 6px !important;
font-size: 1.05rem;
}
.vibe-person-role {
opacity: .65;
margin: 0 !important;
font-size: 15px !important;
}
/* ============================================
SOURCE SANS 3 — OPTYMALIZACJE TYPOGRAFICZNE
Research-based: czytelność 40+ + processing fluency
============================================ */
/* Body base */
body,
input, textarea, select, button {
font-family: var(--vibe-font-body) !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body {
font-size: 17px;
line-height: 1.65;
}
/* Paragrafy */
p {
font-family: var(--vibe-font-body);
font-size: 17px;
line-height: 1.65;
letter-spacing: 0;
}
/* Long-form reading */
.section--reading p,
.entry-content p,
.single-post .entry-content,
article p,
.wp-block-post-content p,
.wp-block-paragraph,
.wp-block-post-excerpt {
font-family: var(--vibe-font-body) !important;
font-size: 18px;
line-height: 1.7;
max-width: 65ch;
}
/* Gutenberg blocks — body font */
.wp-block-paragraph,
.wp-block-list,
.wp-block-quote,
.wp-block-pullquote,
.wp-block-table,
.wp-block-cover__inner-container,
.wp-block-group {
font-family: var(--vibe-font-body);
}
/* Nagłówki — Fraunces */
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
article h1,
article h2,
article h3,
article h4 {
font-family: var(--vibe-font-display) !important;
}
/* Blog listing */
.wp-block-post-title,
.wp-block-query .wp-block-post-title a {
font-family: var(--vibe-font-display) !important;
}
.wp-block-post-date,
.wp-block-post-author,
.wp-block-post-terms {
font-family: var(--vibe-font-body);
font-size: 14px;
}
/* Nawigacja */
.site-header nav,
#masthead .menu > li > a {
font-family: var(--vibe-font-body) !important;
}
/* Przyciski */
.btn,
.wp-block-button__link,
button, .button {
font-family: var(--vibe-font-body) !important;
font-weight: 600;
letter-spacing: 0.01em;
}
/* Eyebrow / labels */
.eyebrow,
.vibe-eyebrow,
.vibe-page-hero__eyebrow {
font-family: var(--vibe-font-body);
font-weight: 600;
font-size: clamp(9px, 0.9vw, 11px) !important;
letter-spacing: 0.15em;
text-transform: uppercase;
}
/* Trust signals */
.trust-signal {
font-family: var(--vibe-font-body);
font-weight: 500;
}
/* Small text */
small, .small {
font-size: 14px;
line-height: 1.5;
font-family: var(--vibe-font-body);
}
/* Lede / podtytuły */
.lede, .subtitle {
font-size: clamp(17px, 1.4vw, 21px);
line-height: 1.55;
font-weight: 400;
font-family: var(--vibe-font-body);
}
/* ============================================
GLASS BRAND SYSTEM - STRATEGIC USE ONLY
Research-based: NN/g + WCAG + UX studies
Limit: 2 komponenty (eyebrow + program cards)
============================================ */
/* ====== EYEBROW - pigułka nad H1 (40% mniejsza) ====== */
.glass-eyebrow,
.eyebrow,
.vibe-eyebrow,
.vibe-page-hero__eyebrow {
display: inline-flex !important;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.05);
-webkit-backdrop-filter: blur(20px) saturate(180%);
backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.12) !important;
border-radius: 9999px !important;
padding: 7px 14px !important;
font-family: var(--vibe-font-body);
font-size: clamp(9px, 0.9vw, 11px) !important;
font-weight: 600;
color: #C8F542 !important;
letter-spacing: 0.15em;
text-transform: uppercase;
box-shadow:
0 5px 16px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
position: relative;
text-decoration: none;
margin-bottom: 16px !important;
max-width: fit-content;
}
/* Lime kropka po lewej — mniejsza */
.glass-eyebrow::before,
.eyebrow::before,
.vibe-eyebrow::before,
.vibe-page-hero__eyebrow::before {
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
background: #C8F542;
box-shadow: 0 0 8px rgba(200, 245, 66, 0.6);
flex-shrink: 0;
}
/* Wersja dla jasnego tła (vibe-light-page + hero-page--cream) */
body.vibe-light-page .glass-eyebrow,
body.vibe-light-page .eyebrow,
body.vibe-light-page .vibe-eyebrow,
body.hero-page--cream .glass-eyebrow,
body.hero-page--cream .eyebrow,
body.hero-page--cream .vibe-eyebrow,
.is-cream .eyebrow,
.section--cream .eyebrow {
background: rgba(255, 255, 255, 0.5) !important;
-webkit-backdrop-filter: blur(20px) saturate(180%);
backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(14, 15, 20, 0.08) !important;
color: #7B3FE4 !important;
padding: 7px 14px !important;
font-size: clamp(9px, 0.9vw, 11px) !important;
gap: 6px !important;
margin-bottom: 16px !important;
box-shadow:
0 5px 16px rgba(14, 15, 20, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
body.vibe-light-page .glass-eyebrow::before,
body.vibe-light-page .eyebrow::before,
body.vibe-light-page .vibe-eyebrow::before,
body.hero-page--cream .glass-eyebrow::before,
body.hero-page--cream .eyebrow::before,
body.hero-page--cream .vibe-eyebrow::before,
.is-cream .eyebrow::before,
.section--cream .eyebrow::before {
width: 5px !important;
height: 5px !important;
background: #7B3FE4 !important;
box-shadow: 0 0 8px rgba(123, 63, 228, 0.4) !important;
}
/* Wyjątek: eyebrow w sekcji zarządu (na jasnej stronie, nie zmienia się) */
.vibe-board-section .vibe-eyebrow {
color: #7B3FE4 !important;
}
/* ====== PROGRAM CARDS - .vibe-program-card ====== */
.glass-card,
.program-card,
.vibe-program-card {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.08) 0%,
rgba(255, 255, 255, 0.03) 100%) !important;
-webkit-backdrop-filter: blur(20px) saturate(180%);
backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.12) !important;
border-radius: 24px !important;
padding: 36px 28px;
text-align: left;
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
position: relative;
transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Hover: lime glow */
.glass-card:hover,
.program-card:hover,
.vibe-program-card:hover {
transform: translateY(-4px);
border-color: rgba(200, 245, 66, 0.3) !important;
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.3),
0 0 40px rgba(200, 245, 66, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}
/* Ikona w karcie */
.glass-card-icon,
.program-card .icon,
.vibe-program-card .icon,
.program-card svg:first-of-type,
.vibe-program-card svg:first-of-type {
width: 48px;
height: 48px;
border-radius: 12px;
background: rgba(200, 245, 66, 0.15);
border: 1px solid rgba(200, 245, 66, 0.3);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
padding: 12px;
}
/* Wersja na jasnym tle */
body.vibe-light-page .glass-card,
body.vibe-light-page .program-card,
body.vibe-light-page .vibe-program-card,
.section--cream .program-card {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.75) 0%,
rgba(255, 255, 255, 0.45) 100%) !important;
border: 1px solid rgba(255, 255, 255, 0.85) !important;
box-shadow:
0 12px 40px rgba(14, 15, 20, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
body.vibe-light-page .program-card:hover,
body.vibe-light-page .vibe-program-card:hover,
.section--cream .program-card:hover {
border-color: rgba(123, 63, 228, 0.3) !important;
box-shadow:
0 20px 60px rgba(14, 15, 20, 0.1),
0 0 40px rgba(123, 63, 228, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}
/* ====== FALLBACK - przeglądarki bez backdrop-filter ====== */
@supports not (backdrop-filter: blur(20px)) {
.glass-eyebrow,
.eyebrow,
.vibe-eyebrow {
background: rgba(30, 32, 40, 0.9) !important;
}
.glass-card,
.program-card,
.vibe-program-card {
background: rgba(255, 255, 255, 0.08) !important;
}
body.vibe-light-page .glass-eyebrow,
body.vibe-light-page .eyebrow,
body.vibe-light-page .vibe-eyebrow {
background: rgba(255, 255, 255, 0.9) !important;
}
body.vibe-light-page .glass-card,
body.vibe-light-page .program-card,
body.vibe-light-page .vibe-program-card {
background: rgba(255, 255, 255, 0.92) !important;
}
}
/* ====== PERFORMANCE - reduce motion ====== */
@media (prefers-reduced-motion: reduce) {
.glass-card,
.program-card,
.vibe-program-card {
transition: none;
}
.glass-card:hover,
.program-card:hover,
.vibe-program-card:hover {
transform: none;
}
}
/* ============================================
SYSTEM 6 WARIANTÓW HERO
Research-based: konwersja fundraisingowa + UX 40+
Selektor główny: .vibe-page-hero (Kadence block)
Aliasy: .hero, .page-hero (dla przyszłości)
============================================ */
/* ── Base hero – wspólne właściwości ─────────────────── */
.hero,
.page-hero,
.vibe-page-hero {
min-height: 90vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
padding: 80px 32px;
}
.hero > *,
.page-hero > *,
.vibe-page-hero > * {
position: relative;
z-index: 2;
max-width: 880px;
width: 100%;
text-align: center;
}
/* ── Wspólne typografia hero ─────────────────────────── */
.hero h1,
.page-hero h1,
.vibe-page-hero h1 {
font-family: var(--vibe-font-display);
font-variation-settings: "opsz" 144;
font-weight: 400;
font-size: clamp(48px, 7vw, 96px);
line-height: 1.02;
letter-spacing: -.03em;
margin-top: 0 !important;
margin-bottom: 24px !important;
}
.hero h1 em,
.page-hero h1 em,
.vibe-page-hero h1 em {
font-style: italic;
color: #C8F542;
}
/* Nagłówek — napis "Fundacja VIBE" tą samą czcionką co Hero (Fraunces serif) */
.site-branding .site-title,
.site-branding .site-title-wrap .site-title {
font-family: var(--vibe-font-display) !important;
font-weight: 400 !important;
font-variation-settings: "opsz" 40;
letter-spacing: -.02em;
}
/* ── Logo na ciemnych stronach (przezroczysty nagłówek) ──
Czarne logo niewidoczne na ciemnym hero → odwracamy na białe.
Tylko strony NIE-jasne (vibe-light-page = jasne, pomijamy). */
body.transparent-header:not(.vibe-light-page) #masthead .site-branding .custom-logo,
body.mobile-transparent-header:not(.vibe-light-page) #masthead .site-branding .custom-logo {
filter: brightness(0) invert(1) !important;
transition: filter .3s ease;
}
body.transparent-header:not(.vibe-light-page) #masthead .site-branding .site-title,
body.mobile-transparent-header:not(.vibe-light-page) #masthead .site-branding .site-title {
color: #fff !important;
}
/* Po przewinięciu nagłówek robi się biały → logo i tytuł wracają do czerni */
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) .site-branding .custom-logo {
filter: none !important;
}
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) .site-branding .site-title {
color: var(--global-palette3) !important;
}
.hero .lede,
.page-hero .lede,
.vibe-page-hero .lede {
font-size: clamp(18px, 1.5vw, 22px);
line-height: 1.55;
margin-top: 0 !important;
margin-bottom: 32px !important;
max-width: 640px;
margin-left: auto;
margin-right: auto;
opacity: .88;
}
/* ── VARIANT 1: VOID — strona główna, /programy ──────── */
.hero--void,
body.hero-page--void .hero,
body.hero-page--void .page-hero,
body.hero-page--void .entry-hero,
body.hero-page--void .vibe-page-hero {
background:
radial-gradient(ellipse 60% 40% at 50% -10%,
rgba(200, 245, 66, 0.08) 0%,
transparent 60%),
radial-gradient(ellipse at center,
#0B0D14 0%,
#05060A 50%,
#000000 100%) !important;
box-shadow: inset 0 -100px 150px -50px #000000;
color: #F5F1E8 !important;
}
/* ── VARIANT 2: SPOTLIGHT — formularze zapisu ─────────── */
.hero--spotlight,
body.hero-page--spotlight .hero,
body.hero-page--spotlight .page-hero,
body.hero-page--spotlight .entry-hero,
body.hero-page--spotlight .vibe-page-hero {
background:
radial-gradient(circle at 50% 0%,
rgba(200, 245, 66, 0.18) 0%,
rgba(200, 245, 66, 0.05) 20%,
transparent 45%),
radial-gradient(ellipse at center,
#0E1018 0%,
#08090F 50%,
#02030A 100%) !important;
color: #F5F1E8 !important;
}
body.hero-page--spotlight .vibe-page-hero::before,
body.hero-page--spotlight .entry-hero::before {
content: "";
position: absolute;
top: -50%;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 150%;
background: linear-gradient(180deg,
rgba(200, 245, 66, 0.06) 0%,
transparent 50%);
clip-path: polygon(45% 0%, 55% 0%, 70% 100%, 30% 100%);
pointer-events: none;
z-index: 1;
}
/* ── VARIANT 3: ABYSS — zdrowie psychiczne ────────────── */
.hero--abyss,
body.hero-page--abyss .hero,
body.hero-page--abyss .page-hero,
body.hero-page--abyss .entry-hero,
body.hero-page--abyss .vibe-page-hero {
background: radial-gradient(ellipse at center,
#000000 0%,
#03040A 30%,
#08090F 60%,
#15171E 100%) !important;
color: #F5F1E8 !important;
}
/* ── VARIANT 4: CREAM — konwersja, long-text ──────────── */
.hero--cream,
body.hero-page--cream .hero,
body.hero-page--cream .page-hero,
body.hero-page--cream .entry-hero,
body.hero-page--cream .vibe-page-hero {
background: #F5F1E8 !important;
color: #0E0F14 !important;
}
body.hero-page--cream .vibe-page-hero::before,
body.hero-page--cream .entry-hero::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(123, 63, 228, .1) 0%, transparent 70%);
border-radius: 50%;
transform: translate(30%, -30%);
pointer-events: none;
z-index: 0;
}
body.hero-page--cream .vibe-page-hero::after,
body.hero-page--cream .entry-hero::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(200, 245, 66, .18) 0%, transparent 70%);
border-radius: 50%;
transform: translate(-30%, 30%);
pointer-events: none;
z-index: 0;
}
.hero--cream h1,
body.hero-page--cream .hero h1,
body.hero-page--cream .page-hero h1,
body.hero-page--cream .vibe-page-hero h1 {
color: #0E0F14 !important;
}
.hero--cream h1 em,
body.hero-page--cream .hero h1 em,
body.hero-page--cream .page-hero h1 em,
body.hero-page--cream .vibe-page-hero h1 em {
color: #7B3FE4 !important;
}
.hero--cream .lede,
body.hero-page--cream .hero .lede,
body.hero-page--cream .page-hero .lede,
body.hero-page--cream .vibe-page-hero .lede {
color: rgba(14, 15, 20, .75) !important;
}
/* ── VARIANT 6: MINIMAL — strony techniczne ────────────── */
.hero--minimal,
body.hero-page--minimal .hero,
body.hero-page--minimal .page-hero,
body.hero-page--minimal .entry-hero,
body.hero-page--minimal .vibe-page-hero {
min-height: 60vh !important;
background: #0E0F14 !important;
border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
color: #F5F1E8 !important;
}
body.hero-page--minimal .hero h1,
body.hero-page--minimal .page-hero h1,
body.hero-page--minimal .entry-hero h1,
body.hero-page--minimal .vibe-page-hero h1 {
font-size: clamp(36px, 4.5vw, 64px);
}
body.hero-page--minimal .hero .lede,
body.hero-page--minimal .page-hero .lede,
body.hero-page--minimal .entry-hero .lede,
body.hero-page--minimal .vibe-page-hero .lede {
font-size: 17px;
margin-bottom: 32px;
}
/* ── Reduced motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
body.hero-page--void .vibe-page-hero,
body.hero-page--void .entry-hero,
body.hero-page--abyss .vibe-page-hero,
body.hero-page--abyss .entry-hero,
body.hero-page--spotlight .vibe-page-hero,
body.hero-page--spotlight .entry-hero {
background: #0E0F14 !important;
}
}
/* ============================================
FIX #3: CENTROWANIE TREŚCI PO HERO
============================================ */
.vibe-page-hero > *,
.hero > *,
.page-hero > * {
text-align: center;
}
/* Eyebrow centrowanie w hero */
.vibe-page-hero .vibe-eyebrow,
.vibe-page-hero .eyebrow,
.vibe-page-hero .glass-eyebrow,
.hero .vibe-eyebrow,
.hero .eyebrow,
.page-hero .eyebrow {
margin-left: auto !important;
margin-right: auto !important;
display: inline-flex !important;
}
/* ============================================
FIX #4: H1 JASNY NA CIEMNYCH HERO
(Kadence nadpisuje domyślny kolor headingów)
============================================ */
/* VOID */
body.hero-page--void .vibe-page-hero h1,
body.hero-page--void .hero h1,
body.hero-page--void .page-hero h1,
.hero--void h1 {
color: #F5F1E8 !important;
}
body.hero-page--void .vibe-page-hero h1 em,
body.hero-page--void .hero h1 em,
.hero--void h1 em {
color: #C8F542 !important;
}
body.hero-page--void .vibe-page-hero .lede,
body.hero-page--void .hero .lede,
.hero--void .lede {
color: rgba(245, 241, 232, 0.88) !important;
}
/* SPOTLIGHT */
body.hero-page--spotlight .vibe-page-hero h1,
body.hero-page--spotlight .hero h1,
body.hero-page--spotlight .page-hero h1,
.hero--spotlight h1 {
color: #F5F1E8 !important;
}
body.hero-page--spotlight .vibe-page-hero h1 em,
body.hero-page--spotlight .hero h1 em,
.hero--spotlight h1 em {
color: #C8F542 !important;
}
body.hero-page--spotlight .vibe-page-hero .lede,
body.hero-page--spotlight .hero .lede,
.hero--spotlight .lede {
color: rgba(245, 241, 232, 0.88) !important;
}
/* ============================================================
SPOTLIGHT — Formularz zapisu (Zapisz dziecko na zajęcia)
Strona: /zapisz-dziecko-na-zajecia/
Body class: hero-page--spotlight
Form ID: 6 | wrapper: .vibe-form-box
============================================================ */
/* Sekcja z formularzem — jasne tło kontrastujące z ciemnym hero */
body.hero-page--spotlight .vibe-form-section {
background: var(--vibe-cream, #F5F1E8) !important;
padding: 80px 24px !important;
}
body.hero-page--spotlight .vibe-form-section .vibe-eyebrow {
color: var(--vibe-violet, #7B3FE4) !important;
font-family: 'JetBrains Mono', monospace !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
margin: 0 0 16px 0 !important;
}
body.hero-page--spotlight .vibe-form-section h2 {
font-family: 'Fraunces', serif !important;
font-size: clamp(28px, 4vw, 44px) !important;
font-weight: 400 !important;
color: var(--vibe-ink, #0E0F14) !important;
margin: 0 0 8px 0 !important;
line-height: 1.1 !important;
}
body.hero-page--spotlight .vibe-form-section > p {
color: rgba(14, 15, 20, 0.6) !important;
font-size: 15px !important;
margin: 0 0 40px 0 !important;
}
/* Biała karta formularza */
body.hero-page--spotlight .vibe-form-box {
max-width: 680px !important;
margin: 0 auto !important;
background: #FFFFFF !important;
border-radius: 20px !important;
padding: 48px clamp(24px, 5vw, 56px) !important;
box-shadow: 0 8px 40px rgba(14, 15, 20, 0.10) !important;
border: 1px solid rgba(14, 15, 20, 0.06) !important;
}
/* FF wrapper — bez własnych marginesów/paddingów */
body.hero-page--spotlight .vibe-form-box .fluentform,
body.hero-page--spotlight .vibe-form-box .ff-default,
body.hero-page--spotlight .vibe-form-box .frm-fluent-form {
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
max-width: 100% !important;
box-shadow: none !important;
border: none !important;
border-radius: 0 !important;
}
/* Labele */
body.hero-page--spotlight .vibe-form-box .fluentform .ff-el-input--label label,
body.hero-page--spotlight .vibe-form-box .frm-fluent-form label {
display: block !important;
font-family: 'Source Sans 3', sans-serif !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
color: rgba(14, 15, 20, 0.65) !important;
margin: 0 0 6px 0 !important;
}
/* Pola tekstowe, email, tel, number, textarea, select */
body.hero-page--spotlight .vibe-form-box .fluentform input[type="text"],
body.hero-page--spotlight .vibe-form-box .fluentform input[type="email"],
body.hero-page--spotlight .vibe-form-box .fluentform input[type="tel"],
body.hero-page--spotlight .vibe-form-box .fluentform input[type="number"],
body.hero-page--spotlight .vibe-form-box .fluentform textarea,
body.hero-page--spotlight .vibe-form-box .fluentform select,
body.hero-page--spotlight .vibe-form-box .ff-el-form-control {
width: 100% !important;
padding: 14px 18px !important;
background: #F8F4EC !important;
border: 1.5px solid rgba(14, 15, 20, 0.12) !important;
border-radius: 12px !important;
font-family: 'Source Sans 3', sans-serif !important;
font-size: 15px !important;
color: var(--vibe-ink, #0E0F14) !important;
transition: border-color 0.2s ease, background 0.2s ease;
box-sizing: border-box !important;
box-shadow: none !important;
}
body.hero-page--spotlight .vibe-form-box .fluentform input:focus,
body.hero-page--spotlight .vibe-form-box .fluentform textarea:focus,
body.hero-page--spotlight .vibe-form-box .fluentform select:focus,
body.hero-page--spotlight .vibe-form-box .ff-el-form-control:focus {
outline: none !important;
border-color: var(--vibe-violet, #7B3FE4) !important;
background: #FFFFFF !important;
box-shadow: 0 0 0 3px rgba(123, 63, 228, 0.12) !important;
}
/* Select — dropdown arrow */
body.hero-page--spotlight .vibe-form-box .fluentform select,
body.hero-page--spotlight .vibe-form-box select.ff-el-form-control {
appearance: none !important;
-webkit-appearance: none !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237B3FE4' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 18px center !important;
background-size: 10px !important;
padding-right: 44px !important;
cursor: pointer;
}
/* Grupy pól */
body.hero-page--spotlight .vibe-form-box .ff-el-group {
margin: 0 0 20px 0 !important;
}
/* Checkbox — zgoda RODO */
body.hero-page--spotlight .vibe-form-box .fluentform input[type="checkbox"],
body.hero-page--spotlight .vibe-form-box .fluentform input[type="radio"] {
appearance: none !important;
-webkit-appearance: none !important;
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
border: 1.5px solid rgba(14, 15, 20, 0.3) !important;
border-radius: 4px !important;
background: transparent !important;
cursor: pointer;
flex-shrink: 0;
margin: 2px 0 0 0 !important;
transition: all 0.15s ease;
position: relative;
}
body.hero-page--spotlight .vibe-form-box .fluentform input[type="checkbox"]:checked,
body.hero-page--spotlight .vibe-form-box .fluentform input[type="radio"]:checked {
background: var(--vibe-violet, #7B3FE4) !important;
border-color: var(--vibe-violet, #7B3FE4) !important;
}
body.hero-page--spotlight .vibe-form-box .fluentform input[type="checkbox"]:checked::after {
content: '';
position: absolute;
left: 5px;
top: 1px;
width: 5px;
height: 10px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
body.hero-page--spotlight .vibe-form-box .fluentform .ff-el-form-check {
display: flex !important;
align-items: flex-start !important;
gap: 10px !important;
margin: 8px 0 !important;
}
body.hero-page--spotlight .vibe-form-box .fluentform .ff-el-form-check label,
body.hero-page--spotlight .vibe-form-box .fluentform .ff-el-form-check-label {
font-size: 13px !important;
font-weight: 400 !important;
color: rgba(14, 15, 20, 0.70) !important;
text-transform: none !important;
letter-spacing: 0 !important;
margin: 0 !important;
line-height: 1.5 !important;
cursor: pointer;
}
/* Help message */
body.hero-page--spotlight .vibe-form-box .fluentform .ff-el-help-message {
font-size: 12px !important;
color: rgba(14, 15, 20, 0.45) !important;
margin-top: 4px !important;
font-style: italic;
}
/* Error */
body.hero-page--spotlight .vibe-form-box .fluentform .ff-el-is-error .ff-el-form-control,
body.hero-page--spotlight .vibe-form-box .fluentform .ff-el-is-error input,
body.hero-page--spotlight .vibe-form-box .fluentform .ff-el-is-error select {
border-color: #DC2626 !important;
background: #FEF2F2 !important;
}
body.hero-page--spotlight .vibe-form-box .fluentform .ff-el-is-error .ff-el-help-message {
color: #DC2626 !important;
font-style: normal !important;
}
/* Submit button */
body.hero-page--spotlight .vibe-form-box .fluentform button[type="submit"],
body.hero-page--spotlight .vibe-form-box .fluentform .ff-btn-submit {
display: block !important;
width: 100% !important;
padding: 18px 32px !important;
background: var(--vibe-lime, #C8F542) !important;
color: var(--vibe-ink, #0E0F14) !important;
border: none !important;
border-radius: 999px !important;
font-family: 'Source Sans 3', sans-serif !important;
font-size: 16px !important;
font-weight: 700 !important;
letter-spacing: 0.01em !important;
cursor: pointer !important;
transition: transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 8px 24px rgba(200, 245, 66, 0.35) !important;
margin-top: 28px !important;
}
body.hero-page--spotlight .vibe-form-box .fluentform button[type="submit"]:hover,
body.hero-page--spotlight .vibe-form-box .fluentform .ff-btn-submit:hover {
transform: translateY(-2px) !important;
box-shadow: 0 12px 32px rgba(200, 245, 66, 0.45) !important;
}
/* Success message */
body.hero-page--spotlight .vibe-form-box .fluentform .ff-message-success,
body.hero-page--spotlight .vibe-form-box .fluentform .ff_submit_success {
background: rgba(123, 63, 228, 0.08) !important;
border: 1px solid rgba(123, 63, 228, 0.2) !important;
color: var(--vibe-violet, #7B3FE4) !important;
padding: 24px !important;
border-radius: 12px !important;
font-size: 15px !important;
line-height: 1.5 !important;
margin-top: 20px !important;
}
/* Final CTA */
body.hero-page--spotlight .vibe-final-cta {
background: var(--vibe-ink, #0E0F14) !important;
padding: 80px 24px !important;
text-align: center !important;
}
body.hero-page--spotlight .vibe-final-cta h2 {
font-family: 'Fraunces', serif !important;
font-size: clamp(28px, 4vw, 44px) !important;
font-weight: 400 !important;
color: var(--vibe-cream, #F5F1E8) !important;
margin: 0 0 32px 0 !important;
}
body.hero-page--spotlight .vibe-final-cta .wp-block-button__link {
background: var(--vibe-lime, #C8F542) !important;
color: var(--vibe-ink, #0E0F14) !important;
border-radius: 999px !important;
font-weight: 700 !important;
font-size: 16px !important;
padding: 16px 40px !important;
text-decoration: none !important;
transition: transform 0.2s ease;
display: inline-block;
}
body.hero-page--spotlight .vibe-final-cta .wp-block-button__link:hover {
transform: translateY(-2px) !important;
}
/* Responsive */
@media (max-width: 768px) {
body.hero-page--spotlight .vibe-form-section { padding: 56px 16px !important; }
body.hero-page--spotlight .vibe-form-box { padding: 32px 20px !important; }
body.hero-page--spotlight .vibe-final-cta { padding: 56px 16px !important; }
}
/* ─── END SPOTLIGHT FORM ─────────────────────────────── */
/* ABYSS */
body.hero-page--abyss .vibe-page-hero h1,
body.hero-page--abyss .hero h1,
body.hero-page--abyss .page-hero h1,
.hero--abyss h1 {
color: #F5F1E8 !important;
}
body.hero-page--abyss .vibe-page-hero h1 em,
body.hero-page--abyss .hero h1 em,
.hero--abyss h1 em {
color: #C8F542 !important;
}
body.hero-page--abyss .vibe-page-hero .lede,
body.hero-page--abyss .hero .lede,
.hero--abyss .lede {
color: rgba(245, 241, 232, 0.88) !important;
}
/* MINIMAL */
body.hero-page--minimal .vibe-page-hero h1,
body.hero-page--minimal .hero h1,
body.hero-page--minimal .page-hero h1,
.hero--minimal h1 {
color: #F5F1E8 !important;
}
body.hero-page--minimal .vibe-page-hero h1 em,
body.hero-page--minimal .hero h1 em,
.hero--minimal h1 em {
color: #C8F542 !important;
}
body.hero-page--minimal .vibe-page-hero .lede,
body.hero-page--minimal .hero .lede,
.hero--minimal .lede {
color: rgba(245, 241, 232, 0.88) !important;
}
/* CREAM zostaje BEZ ZMIAN — H1 ciemny #0E0F14 już ustawiony wyżej */
/* ============================================
FIX #6 + #7: STOPKA — CIEMNA + LIME HOVER
============================================ */
footer#colophon,
.site-footer {
background: linear-gradient(180deg,
rgba(5, 6, 10, 0.98) 0%,
rgba(2, 3, 8, 1) 100%) !important;
color: #F5F1E8 !important;
border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
position: relative;
}
/* Lime glow line u góry stopki */
footer#colophon::before,
.site-footer::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(200, 245, 66, 0.35) 50%,
transparent 100%);
pointer-events: none;
z-index: 1;
}
footer#colophon h1,
footer#colophon h2,
footer#colophon h3,
footer#colophon h4,
footer#colophon h5,
footer#colophon h6,
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4 {
color: #F5F1E8 !important;
}
footer#colophon p,
.site-footer p {
color: rgba(245, 241, 232, 0.72) !important;
}
/* FIX #7: Linki stopki — cream domyślnie, lime on hover */
footer#colophon a,
.site-footer a {
color: rgba(245, 241, 232, 0.72) !important;
text-decoration: none !important;
transition:
color 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
text-shadow 0.25s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}
footer#colophon a:hover,
footer#colophon a:focus,
.site-footer a:hover,
.site-footer a:focus {
color: #C8F542 !important;
text-shadow: 0 0 14px rgba(200, 245, 66, 0.45);
}
footer#colophon a[aria-current="page"],
footer#colophon a.current-menu-item,
.site-footer a.current-menu-item {
color: #C8F542 !important;
}
/* Dane rejestrowe w stopce */
.vibe-legal-info,
footer#colophon .legal-info,
footer#colophon .copyright {
font-size: 12px !important;
color: rgba(245, 241, 232, 0.45) !important;
border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
margin-top: 40px;
padding-top: 24px !important;
}
.vibe-legal-info a,
footer#colophon .legal-info a {
color: rgba(200, 245, 66, 0.8) !important;
}
.vibe-legal-info a:hover,
footer#colophon .legal-info a:hover {
color: #C8F542 !important;
text-shadow: 0 0 10px rgba(200, 245, 66, 0.5);
}
/* Social media ikony w stopce */
footer#colophon .social-icons a,
footer#colophon .wp-social-link,
.site-footer .wp-social-link {
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 50%;
transition: all 0.25s ease !important;
}
footer#colophon .social-icons a:hover,
footer#colophon .wp-social-link:hover,
.site-footer .wp-social-link:hover {
background: rgba(200, 245, 66, 0.1) !important;
border-color: rgba(200, 245, 66, 0.4) !important;
color: #C8F542 !important;
transform: translateY(-2px);
}
/* ============================================
HERO Z REV4 - DZIAŁAJĄCY SYSTEM
Wideo/obrazek z Gutenberga jako tło hero
figure.wp-block-video / figure.wp-block-image
staje się pozycjonowanym tłem
============================================ */
/* === HERO BASE === */
.vibe-page-hero,
.vibe-page-hero .wp-block-group__inner-container {
position: relative !important;
overflow: visible !important;
}
.vibe-page-hero {
min-height: 100vh !important;
overflow: hidden !important;
padding: 0 !important;
margin-top: -180px !important;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
width: 100vw !important;
max-width: 100vw !important;
}
.vibe-page-hero .wp-block-group__inner-container {
min-height: 100vh !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
padding: clamp(160px, 22vh, 240px) 24px 14vh !important;
position: relative !important;
z-index: 3 !important;
max-width: 900px !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
}
/* === HERO TYPOGRAFIA (rev4) === */
.vibe-page-hero h1 {
color: #F5F1E8 !important;
font-family: 'Fraunces', serif !important;
font-size: clamp(2.2rem, 5vw, 4.5rem) !important;
text-align: center !important;
max-width: 900px !important;
margin: 0 auto 1.5rem !important;
position: relative !important;
z-index: 5 !important;
}
.vibe-page-hero h1 em {
color: #C8F542 !important;
font-style: italic !important;
}
.vibe-page-hero p:not(.vibe-eyebrow):not(.eyebrow):not(.glass-eyebrow) {
color: rgba(245, 241, 232, 0.85) !important;
text-align: center !important;
position: relative !important;
z-index: 5 !important;
font-family: 'Source Sans 3', sans-serif !important;
}
.vibe-page-hero .vibe-eyebrow,
.vibe-page-hero .eyebrow,
.vibe-page-hero .glass-eyebrow {
position: relative !important;
z-index: 5 !important;
margin-bottom: 1.5rem !important;
}
.vibe-page-hero .wp-block-buttons {
position: relative !important;
z-index: 5 !important;
margin-top: 2rem !important;
}
/* === HERO VIDEO (homepage) === */
.vibe-page-hero figure.wp-block-video {
position: absolute !important;
top: 0 !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 100vw !important;
max-width: 100vw !important;
right: auto !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
z-index: 0 !important;
pointer-events: none !important;
overflow: hidden !important;
}
.vibe-page-hero figure.wp-block-video video {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
min-width: 100% !important;
min-height: 100% !important;
width: auto !important;
height: auto !important;
object-fit: cover !important;
}
.vibe-page-hero figure.wp-block-video figcaption {
display: none !important;
}
.vibe-page-hero figure.wp-block-video::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
background: rgba(8, 9, 13, 0.80) !important;
z-index: 1 !important;
pointer-events: none !important;
}
/* === HERO OBRAZEK (podstrony programów + inne) === */
.vibe-page-hero figure.vibe-placeholder-img,
.vibe-page-hero figure.wp-block-image:not(.wp-block-video) {
position: absolute !important;
top: 0 !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 100vw !important;
max-width: 100vw !important;
right: auto !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
z-index: 0 !important;
pointer-events: none !important;
overflow: hidden !important;
}
.vibe-page-hero figure.vibe-placeholder-img img,
.vibe-page-hero figure.wp-block-image img {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
min-width: 100% !important;
min-height: 100% !important;
width: auto !important;
height: auto !important;
max-width: none !important;
object-fit: cover !important;
}
.vibe-page-hero figure.vibe-placeholder-img::after,
.vibe-page-hero figure.wp-block-image:not(.wp-block-video)::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
background: rgba(8, 9, 13, 0.85) !important;
z-index: 1 !important;
pointer-events: none !important;
}
/* === HERO AURORA (efekt animowany) === */
.vibe-page-hero::before {
content: "" !important;
position: absolute !important;
inset: -20% !important;
z-index: 2 !important;
pointer-events: none !important;
background:
radial-gradient(ellipse 55% 45% at 65% 30%, rgba(200, 245, 66, 0.10) 0%, transparent 60%),
radial-gradient(ellipse 40% 35% at 20% 25%, rgba(123, 63, 228, 0.10) 0%, transparent 55%),
radial-gradient(ellipse 35% 30% at 80% 75%, rgba(185, 28, 140, 0.08) 0%, transparent 50%) !important;
mix-blend-mode: screen !important;
filter: blur(30px) !important;
animation: vibe-aurora-css 60s ease-in-out infinite !important;
}
@keyframes vibe-aurora-css {
0% { transform: translate(0%, 10%) scale(1); opacity: 0.80; }
25% { transform: translate(10%, -2%) scale(1.04); opacity: 0.95; }
50% { transform: translate(-2%, -7%) scale(1.00); opacity: 0.65; }
75% { transform: translate(-7%, 3%) scale(1.00); opacity: 0.90; }
100% { transform: translate(0%, 10%) scale(1); opacity: 0.80; }
}
/* === HEADER STICKY (rev4) === */
#masthead.site-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 9999 !important;
background: rgba(7, 7, 9, 0.82) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
transition: background 0.3s ease, box-shadow 0.3s ease !important;
}
#masthead .site-header-wrap,
#masthead .site-header-main,
#masthead .site-header-row-container,
#masthead .site-header-row-container-inner,
#masthead .kadence-header-row,
#masthead > div,
#masthead > div > div {
background: transparent !important;
background-color: transparent !important;
}
html body #masthead.site-header {
padding: 0 52px !important;
min-height: 88px !important;
}
html body #masthead .custom-logo {
max-height: 52px !important;
width: auto !important;
filter: none !important;
}
html body #masthead .menu > li > a {
font-size: 15px !important;
padding: 8px 14px !important;
}
/* ============================================
SEKCJE FULLSCREEN (100vh)
Każda grupa/sekcja = pełny ekran
Reguła design systemu VIBE: "Sekcje NIE zachodzą na siebie"
============================================ */
/* === BASE: każda grupa NA POZIOMIE entry-content = fullscreen === */
.entry-content > .wp-block-group:not(.vibe-page-hero):not(.vibe-gallery-grid):not(.vibe-gallery-cta):not(.vibe-gallery-filters):not(.vibe-hero):not(.vibe-wesprzyj-hero):not(.vibe-wesprzyj-section):not(.vibe-wesprzyj-quote-section):not(.vibe-wesprzyj-form-section):not(.vibe-wesprzyj-contact-cta):not(.vibe-op-section),
.entry-content > .wp-block-cover:not(.vibe-page-hero),
article > .entry-content > .wp-block-group:not(.vibe-page-hero):not(.vibe-gallery-grid):not(.vibe-gallery-cta):not(.vibe-gallery-filters):not(.vibe-hero):not(.vibe-wesprzyj-hero):not(.vibe-wesprzyj-section):not(.vibe-wesprzyj-quote-section):not(.vibe-wesprzyj-form-section):not(.vibe-wesprzyj-contact-cta):not(.vibe-op-section),
article > .entry-content > .wp-block-cover:not(.vibe-page-hero) {
min-height: 100vh !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
padding: 80px 32px !important;
position: relative !important;
width: 100% !important;
scroll-snap-align: start;
}
/* === SEPARATOR między sekcjami === */
.entry-content > .wp-block-group:not(.vibe-page-hero) + .wp-block-group,
.entry-content > .wp-block-group:not(.vibe-page-hero) + .wp-block-cover,
.entry-content > .wp-block-cover + .wp-block-group,
.entry-content > .wp-block-cover + .wp-block-cover {
border-top: 1px solid rgba(255,255,255,.08);
}
/* === Inner container - max-width (BEZ text-align - dziedziczyłoby na kolumny) === */
.entry-content > .wp-block-group > .wp-block-group__inner-container,
.entry-content > .wp-block-cover > .wp-block-cover__inner-container {
width: 100% !important;
max-width: 1100px !important;
margin: 0 auto !important;
}
/* === Reset text-align wewnątrz kolumn — nie dziedziczymy centering === */
.entry-content > .wp-block-group .wp-block-column,
.entry-content > .wp-block-cover .wp-block-column,
.entry-content > .wp-block-group .wp-block-column p,
.entry-content > .wp-block-group .wp-block-column h2,
.entry-content > .wp-block-group .wp-block-column h3,
.entry-content > .wp-block-group .wp-block-column h4 {
text-align: left !important;
max-width: 100% !important;
}
/* === Cream pages - jasny separator === */
body.hero-page--cream .entry-content > .wp-block-group + .wp-block-group,
body.vibe-light-page .entry-content > .wp-block-group + .wp-block-group {
border-top: 1px solid rgba(14,15,20,.08) !important;
}
/* === Pierwsza sekcja po hero NIE ma border-top === */
.entry-content > .vibe-page-hero + .wp-block-group,
.entry-content > .vibe-page-hero + .wp-block-cover {
border-top: none !important;
}
/* ── KROK 3: Elementy w środku ──────────────────────── */
/* === EYEBROW w sekcjach - centrowanie === */
.entry-content > .wp-block-group .vibe-eyebrow,
.entry-content > .wp-block-group .eyebrow,
.entry-content > .wp-block-group .glass-eyebrow,
.entry-content > .wp-block-cover .vibe-eyebrow,
.entry-content > .wp-block-cover .eyebrow,
.entry-content > .wp-block-cover .glass-eyebrow {
margin-left: auto !important;
margin-right: auto !important;
margin-bottom: 24px !important;
}
/* === H2/H3 w sekcjach - centrowanie + odstępy
TYLKO bezpośrednio w inner-container, NIE wewnątrz kolumn === */
.entry-content > .wp-block-group > .wp-block-group__inner-container > h2,
.entry-content > .wp-block-group > .wp-block-group__inner-container > h3,
.entry-content > .wp-block-cover > .wp-block-cover__inner-container > h2,
.entry-content > .wp-block-cover > .wp-block-cover__inner-container > h3 {
text-align: center !important;
margin-top: 0 !important;
margin-bottom: 24px !important;
width: 100% !important;
max-width: 800px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* === Paragrafy TYLKO bezpośrednio w inner-container (nie w kolumnach!) === */
.entry-content > .wp-block-group > .wp-block-group__inner-container > p:not(.vibe-eyebrow),
.entry-content > .wp-block-cover > .wp-block-cover__inner-container > p:not(.vibe-eyebrow) {
text-align: center !important;
max-width: 65ch !important;
margin-left: auto !important;
margin-right: auto !important;
margin-bottom: 24px !important;
}
/* === Karty/kolumny w sekcjach === */
.entry-content > .wp-block-group .wp-block-columns,
.entry-content > .wp-block-cover .wp-block-columns {
margin-top: 48px !important;
margin-bottom: 0 !important;
width: 100% !important;
}
/* === CTA buttons w sekcjach - centrowanie === */
.entry-content > .wp-block-group .wp-block-buttons,
.entry-content > .wp-block-cover .wp-block-buttons {
display: flex !important;
justify-content: center !important;
margin-top: 32px !important;
}
/* ── KROK 4: Responsywność ──────────────────────────── */
/* === Mobile: auto height === */
@media (max-width: 768px) {
.entry-content > .wp-block-group:not(.vibe-page-hero),
.entry-content > .wp-block-cover:not(.vibe-page-hero) {
min-height: auto !important;
padding: 64px 16px !important;
}
.entry-content > .wp-block-group > .wp-block-group__inner-container,
.entry-content > .wp-block-cover > .wp-block-cover__inner-container {
max-width: 100% !important;
}
}
/* === Tablet === */
@media (max-width: 1024px) and (min-width: 769px) {
.entry-content > .wp-block-group:not(.vibe-page-hero),
.entry-content > .wp-block-cover:not(.vibe-page-hero) {
min-height: 90vh !important;
padding: 72px 24px !important;
}
}
/* ── KROK 5: Wyjątki ────────────────────────────────── */
/* === Sekcje z kartami - więcej powietrza === */
.entry-content > .wp-block-group:has(> .wp-block-group__inner-container > .wp-block-columns),
.entry-content > .wp-block-cover:has(> .wp-block-cover__inner-container > .wp-block-columns) {
min-height: 100vh !important;
padding-top: 120px !important;
padding-bottom: 120px !important;
}
/* === Sekcje z formularzem - automatyczna wysokość === */
.entry-content > .wp-block-group:has(.fluentform),
.entry-content > .wp-block-cover:has(.fluentform) {
min-height: auto !important;
padding: 100px 32px !important;
}
/* === Małe sekcje (np. disclaimer, privacy box) - auto height === */
.entry-content > .wp-block-group.vibe-privacy-box {
min-height: auto !important;
padding: 40px 32px !important;
}
/* === Sekcje z formularzem/donate box - auto height === */
.entry-content > .wp-block-group.vibe-form-section,
.entry-content > .wp-block-group:has(.vibe-donate-box),
.entry-content > .wp-block-group:has(.fluentform) {
min-height: auto !important;
padding: 100px 32px !important;
}
/* ── KROK 6: Scroll snap ────────────────────────────── */
html {
scroll-snap-type: y proximity;
scroll-behavior: smooth;
}
@media (max-width: 768px) {
html {
scroll-snap-type: none;
}
}
.vibe-page-hero {
scroll-snap-align: start;
}
/* ═══════════════════════════════════════════════════════
KROK 7: hero-page--void — ciemne tło dla CAŁEJ strony
Kadence nakłada białe tło na article.content-bg —
nadpisujemy to dla stron z klasą hero-page--void
═══════════════════════════════════════════════════════ */
/* 1. Usuń białe tło Kadence z article */
body.hero-page--void article.content-bg,
body.hero-page--void .content-bg,
body.hero-page--void .entry-content,
body.hero-page--void .site-content,
body.hero-page--void #primary,
/* oferta-dla-szkol — dark page, also needs transparent content-bg */
body.hero-page--oferta-dla-szkol article.content-bg,
body.hero-page--oferta-dla-szkol .content-bg,
body.hero-page--oferta-dla-szkol .site-content,
body.hero-page--oferta-dla-szkol #primary {
background: transparent !important;
}
/* 2. Tło na body i głównym wrapperze */
body.hero-page--void {
background: #07080C !important;
color: #F5F2E9 !important;
}
/* 3. Sekcje — transparentne (dziedziczą ciemność z body) */
/* NOTE: :not(.vibe-hero) — nowy hero blok ma własne kolory, nie dziedziczy z void */
body.hero-page--void .entry-content > .wp-block-group:not(.vibe-page-hero):not(.vibe-hero),
body.hero-page--void .entry-content > .wp-block-cover:not(.vibe-page-hero) {
background: transparent !important;
color: #F5F2E9 !important;
}
/* 4. Nagłówki */
body.hero-page--void .entry-content > .wp-block-group:not(.vibe-hero) h1,
body.hero-page--void .entry-content > .wp-block-group:not(.vibe-hero) h2,
body.hero-page--void .entry-content > .wp-block-group:not(.vibe-hero) h3,
body.hero-page--void .entry-content > .wp-block-group:not(.vibe-hero) h4 {
color: #F5F2E9 !important;
}
/* 5. em w nagłówkach = lime */
body.hero-page--void .entry-content > .wp-block-group:not(.vibe-hero) h1 em,
body.hero-page--void .entry-content > .wp-block-group:not(.vibe-hero) h2 em,
body.hero-page--void .entry-content > .wp-block-group:not(.vibe-hero) h3 em {
color: #D0FD20 !important;
}
/* 6. Akapity */
body.hero-page--void .entry-content > .wp-block-group:not(.vibe-hero) p {
color: rgba(245, 242, 233, 0.85) !important;
}
/* 7. Eyebrow — wersja ciemna */
body.hero-page--void .eyebrow,
body.hero-page--void .glass-eyebrow,
body.hero-page--void .vibe-eyebrow {
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
color: #D0FD20 !important;
}
body.hero-page--void .eyebrow::before,
body.hero-page--void .glass-eyebrow::before,
body.hero-page--void .vibe-eyebrow::before {
background: #D0FD20 !important;
box-shadow: 0 0 8px rgba(208, 253, 32, 0.6) !important;
}
/* 8. Separator między sekcjami — ciemna wersja */
body.hero-page--void .entry-content > .wp-block-group + .wp-block-group {
border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}
/* ═══════════════════════════════════════════════════════
KROK 8: PRZYCISKI CTA wg REV4
Główny: lime fill + glow shadow + smooth hover transform
Dotyczy TYLKO ciemnych stron (hero-page--void/abyss/spotlight/minimal)
═══════════════════════════════════════════════════════ */
/* Zbiorczy selektor dla wszystkich ciemnych wariantów */
:is(
body.hero-page--void,
body.hero-page--abyss,
body.hero-page--spotlight,
body.hero-page--minimal
) .wp-block-button:not(.is-style-outline) .wp-block-button__link,
:is(
body.hero-page--void,
body.hero-page--abyss,
body.hero-page--spotlight,
body.hero-page--minimal
) .glass-cta {
background: #C8F542 !important;
color: #0E0F14 !important;
border: none !important;
border-radius: 9999px !important;
padding: 18px 40px !important;
font-family: 'Source Sans 3', sans-serif !important;
font-weight: 600 !important;
font-size: 15px !important;
letter-spacing: 0.04em !important;
text-decoration: none !important;
transition: background 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
box-shadow:
0 0 21px rgba(200, 245, 66, 0.14),
0 10px 21px rgba(200, 245, 66, 0.07) !important;
}
/* HOVER — główny CTA */
:is(
body.hero-page--void,
body.hero-page--abyss,
body.hero-page--spotlight,
body.hero-page--minimal
) .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
:is(
body.hero-page--void,
body.hero-page--abyss,
body.hero-page--spotlight,
body.hero-page--minimal
) .glass-cta:hover {
background: #d4ff5a !important;
transform: translateY(-2px) !important;
box-shadow:
0 0 35px rgba(200, 245, 66, 0.21),
0 15px 28px rgba(200, 245, 66, 0.10) !important;
}
/* OUTLINE button — drugorzędny */
:is(
body.hero-page--void,
body.hero-page--abyss,
body.hero-page--spotlight,
body.hero-page--minimal
) .wp-block-button.is-style-outline .wp-block-button__link {
background: transparent !important;
color: #F5F1E8 !important;
border: 1px solid rgba(245, 241, 232, 0.3) !important;
border-radius: 9999px !important;
padding: 18px 40px !important;
font-family: 'Source Sans 3', sans-serif !important;
font-weight: 600 !important;
font-size: 15px !important;
letter-spacing: 0.04em !important;
text-decoration: none !important;
transition: background 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
border-color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
box-shadow: none !important;
}
/* HOVER — outline */
:is(
body.hero-page--void,
body.hero-page--abyss,
body.hero-page--spotlight,
body.hero-page--minimal
) .wp-block-button.is-style-outline .wp-block-button__link:hover {
background: rgba(245, 241, 232, 0.05) !important;
border-color: #C8F542 !important;
color: #C8F542 !important;
transform: translateY(-2px) !important;
}
/* DUŻY CTA — spotlight (strony konwersji) */
:is(
body.hero-page--void,
body.hero-page--spotlight
) .wp-block-button.is-style-fill .wp-block-button__link,
:is(
body.hero-page--void,
body.hero-page--spotlight
) .wp-block-button.is-style-large .wp-block-button__link {
padding: 22px 48px !important;
font-size: 17px !important;
box-shadow:
0 0 35px rgba(200, 245, 66, 0.18),
0 0 70px rgba(200, 245, 66, 0.07),
0 15px 28px rgba(200, 245, 66, 0.10) !important;
}
/* IKONY w przyciskach */
:is(
body.hero-page--void,
body.hero-page--abyss,
body.hero-page--spotlight,
body.hero-page--minimal
) .wp-block-button__link svg,
:is(
body.hero-page--void,
body.hero-page--abyss,
body.hero-page--spotlight,
body.hero-page--minimal
) .wp-block-button__link .heart {
width: 18px !important;
height: 18px !important;
}
/* ═══════════════════════════════════════════════════════
KROK 9: TEAM CARDS — profesjonalne wizytówki
Strony: / (homepage) + /o-nas/
Wyrównanie przez flexbox (stretch), NIE tabele
═══════════════════════════════════════════════════════ */
/* 1. Kolumny w sekcjach zespołu stretch do tej samej wys. */
.vibe-team-section .wp-block-columns,
.vibe-board-section .wp-block-columns {
align-items: stretch !important;
}
.vibe-team-section .wp-block-column,
.vibe-board-section .wp-block-column {
display: flex !important;
flex-direction: column !important;
align-self: stretch !important; /* override Gutenberg's is-vertically-aligned-top: flex-start */
}
/* 2. Karta — struktura bazowa */
.team-card {
display: flex !important;
flex-direction: column !important;
/* height: 100% removed — align-self: stretch on parent handles equal heights */
border-radius: 20px !important;
overflow: hidden !important;
transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
border-color 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
box-shadow 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
position: relative !important;
}
/* 3. Wariant ciemny (homepage — void) */
body.hero-page--void .team-card {
background: linear-gradient(135deg,
rgba(245, 241, 232, 0.04) 0%,
rgba(245, 241, 232, 0.02) 100%) !important;
border: 1px solid rgba(245, 241, 232, 0.08) !important;
}
body.hero-page--void .team-card:hover {
transform: translateY(-6px) !important;
border-color: rgba(200, 245, 66, 0.3) !important;
box-shadow:
0 20px 48px rgba(0, 0, 0, 0.35),
0 0 40px rgba(200, 245, 66, 0.08) !important;
}
/* 4. Wariant jasny (/o-nas/ — cream) */
body.hero-page--cream .team-card,
body.vibe-light-page .team-card {
background: rgba(255, 255, 255, 0.65) !important;
border: 1px solid rgba(14, 15, 20, 0.08) !important;
box-shadow: 0 2px 12px rgba(14, 15, 20, 0.04) !important;
}
body.hero-page--cream .team-card:hover,
body.vibe-light-page .team-card:hover {
transform: translateY(-6px) !important;
border-color: rgba(123, 63, 228, 0.25) !important;
box-shadow:
0 20px 48px rgba(14, 15, 20, 0.10),
0 0 40px rgba(123, 63, 228, 0.07) !important;
}
/* 5. Zdjęcie — aspect-ratio 4/5 (portret), identyczne we wszystkich kartach */
.team-card figure.wp-block-image,
.team-card .wp-block-image {
position: relative !important;
width: 100% !important;
aspect-ratio: 4 / 5 !important;
margin: 0 !important;
overflow: hidden !important;
border-radius: 0 !important;
flex-shrink: 0 !important;
background: linear-gradient(135deg,
rgba(123, 63, 228, 0.12) 0%,
rgba(200, 245, 66, 0.05) 100%) !important;
}
.team-card figure.wp-block-image img,
.team-card .wp-block-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center top !important;
transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
border-radius: 0 !important;
display: block !important;
}
.team-card:hover figure.wp-block-image img,
.team-card:hover .wp-block-image img {
transform: scale(1.04) !important;
}
/* 6. Content area — rośnie żeby wyrównać karty */
.team-card > .wp-block-group,
.team-card-content {
display: flex !important;
flex-direction: column !important;
flex: 1 !important;
padding: 24px 22px !important;
}
/* 7. Imię — Fraunces, priorytet #1 */
.team-card h3,
.team-card h4 {
font-family: 'Fraunces', serif !important;
font-size: clamp(18px, 1.6vw, 24px) !important;
font-weight: 600 !important;
line-height: 1.2 !important;
margin: 0 0 0 0 !important;
letter-spacing: -0.01em !important;
text-align: left !important;
}
body.hero-page--void .team-card h3,
body.hero-page--void .team-card h4 {
color: #F5F2E9 !important;
}
body.hero-page--cream .team-card h3,
body.vibe-light-page .team-card h3,
body.hero-page--cream .team-card h4,
body.vibe-light-page .team-card h4 {
color: #0E0F14 !important;
}
/* 8. Lime/violet linia pod imieniem */
.team-card h3::after,
.team-card h4::after {
content: "" !important;
display: block !important;
width: 28px !important;
height: 2px !important;
border-radius: 2px !important;
margin-top: 10px !important;
margin-bottom: 0 !important;
}
body.hero-page--void .team-card h3::after,
body.hero-page--void .team-card h4::after {
background: #C8F542 !important;
box-shadow: 0 0 8px rgba(200, 245, 66, 0.35) !important;
}
body.hero-page--cream .team-card h3::after,
body.vibe-light-page .team-card h3::after,
body.hero-page--cream .team-card h4::after,
body.vibe-light-page .team-card h4::after {
background: #7B3FE4 !important;
box-shadow: 0 0 8px rgba(123, 63, 228, 0.3) !important;
}
/* 9. Akapity — rola i bio */
.team-card p {
font-family: 'Source Sans 3', sans-serif !important;
font-size: 14px !important;
line-height: 1.6 !important;
text-align: left !important;
margin: 0 0 10px 0 !important;
}
/* Pierwszy = rola/funkcja (kolor akcentu + uppercase) */
.team-card > .wp-block-group > p:first-of-type,
.team-card > p:first-of-type {
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
margin-top: 14px !important;
margin-bottom: 12px !important;
}
body.hero-page--void .team-card > .wp-block-group > p:first-of-type,
body.hero-page--void .team-card > p:first-of-type {
color: #C8F542 !important;
}
body.hero-page--cream .team-card > .wp-block-group > p:first-of-type,
body.vibe-light-page .team-card > .wp-block-group > p:first-of-type,
body.hero-page--cream .team-card > p:first-of-type,
body.vibe-light-page .team-card > p:first-of-type {
color: #7B3FE4 !important;
}
/* Kolejne
= bio — flex: 1 wyrównuje wysokość */
.team-card > .wp-block-group > p:not(:first-of-type),
.team-card > p:not(:first-of-type) {
flex: 1 !important;
}
body.hero-page--void .team-card > .wp-block-group > p:not(:first-of-type),
body.hero-page--void .team-card > p:not(:first-of-type) {
color: rgba(245, 242, 233, 0.75) !important;
}
body.hero-page--cream .team-card > .wp-block-group > p:not(:first-of-type),
body.vibe-light-page .team-card > .wp-block-group > p:not(:first-of-type),
body.hero-page--cream .team-card > p:not(:first-of-type),
body.vibe-light-page .team-card > p:not(:first-of-type) {
color: rgba(14, 15, 20, 0.70) !important;
}
/* 10. em w bio = akcent programów */
body.hero-page--void .team-card em { color: #C8F542 !important; }
body.hero-page--cream .team-card em,
body.vibe-light-page .team-card em { color: #7B3FE4 !important; }
/* 11. Mobile */
@media (max-width: 768px) {
.team-card { margin-bottom: 16px !important; }
.team-card h3, .team-card h4 { font-size: 18px !important; }
.team-card > .wp-block-group,
.team-card-content { padding: 18px 16px !important; }
.team-card figure.wp-block-image,
.team-card .wp-block-image { aspect-ratio: 1 / 1 !important; }
}
/* ═══════════════════════════════════════════════════════════════════════
KROK 11 — Karty filarów / strona /programy/ (page-id-417)
Split layout 50/50: tekst LEWO, obraz PRAWO — tylko CSS, bez DB
═══════════════════════════════════════════════════════════════════════ */
/* ── Counter reset na poziomie strony ── */
body.page-id-417 {
counter-reset: filar-counter;
}
/* ── Wrapper karty: flex row, 50/50, licznik ── */
body.page-id-417 .wp-block-columns:has(figure.wp-block-image):has(figure.wp-block-table) {
display: flex !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
gap: 64px !important;
padding: 60px 0 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
counter-increment: filar-counter;
}
body.page-id-417 .wp-block-columns:has(figure.wp-block-image):has(figure.wp-block-table):last-child {
border-bottom: none !important;
}
/* ── Kolumna TEKSTU ── */
body.page-id-417 .wp-block-columns:has(figure.wp-block-image):has(figure.wp-block-table)
.wp-block-column:has(figure.wp-block-table) {
flex: 0 0 50% !important;
max-width: 50% !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
min-width: 0 !important;
}
/* ── Kolumna OBRAZU ── */
body.page-id-417 .wp-block-columns:has(figure.wp-block-image):has(figure.wp-block-table)
.wp-block-column:has(figure.wp-block-image) {
flex: 0 0 50% !important;
max-width: 50% !important;
position: relative !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
}
/* ── EYEBROW: pierwsza p w kolumnie tekstu ── */
body.page-id-417 .wp-block-columns:has(figure.wp-block-image):has(figure.wp-block-table)
.wp-block-column:has(figure.wp-block-table) > p:first-child {
font-family: var(--vibe-font-body) !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.28em !important;
text-transform: uppercase !important;
color: #C8F542 !important;
margin-bottom: 10px !important;
margin-top: 0 !important;
}
/* ── H2: tytuł filaru ── */
body.page-id-417 .wp-block-columns:has(figure.wp-block-image):has(figure.wp-block-table)
.wp-block-column:has(figure.wp-block-table) h2 {
font-family: var(--vibe-font-display) !important;
font-size: clamp(26px, 2.2vw + 14px, 44px) !important;
font-weight: 500 !important;
line-height: 1.05 !important;
letter-spacing: -0.02em !important;
color: #F5F2E9 !important;
margin-top: 0 !important;
margin-bottom: 14px !important;
}
/* ── LEAD: p po h2 (akapit z opisem) ── */
body.page-id-417 .wp-block-columns:has(figure.wp-block-image):has(figure.wp-block-table)
.wp-block-column:has(figure.wp-block-table) > p:not(:first-child) {
font-size: clamp(15px, 0.4vw + 13px, 17px) !important;
line-height: 1.65 !important;
color: rgba(245, 242, 233, 0.68) !important;
margin-bottom: 22px !important;
}
/* ── SEPARATOR + TABELA-METADANE ── */
body.page-id-417 .wp-block-columns:has(figure.wp-block-image):has(figure.wp-block-table)
.wp-block-column:has(figure.wp-block-table) figure.wp-block-table {
border: none !important;
background: none !important;
padding: 18px 0 0 0 !important;
margin: 0 0 24px 0 !important;
border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
}
body.page-id-417 .wp-block-columns:has(figure.wp-block-image):has(figure.wp-block-table)
.wp-block-column:has(figure.wp-block-table) table {
border: none !important;
border-collapse: collapse !important;
width: 100% !important;
background: none !important;
}
body.page-id-417 .wp-block-columns:has(figure.wp-block-image):has(figure.wp-block-table)
.wp-block-column:has(figure.wp-block-table) table td,
body.page-id-417 .wp-block-columns:has(figure.wp-block-image):has(figure.wp-block-table)
.wp-block-column:has(figure.wp-block-table) table th {
border: none !important;
padding: 7px 0 !important;
background: none !important;
vertical-align: top !important;
font-size: 14px !important;
line-height: 1.5 !important;
}
/* Etykieta (PROJEKTY / DLA KOGO / …) */
body.page-id-417 .wp-block-columns:has(figure.wp-block-image):has(figure.wp-block-table)
.wp-block-column:has(figure.wp-block-table) table td:first-child {
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
color: rgba(245, 242, 233, 0.38) !important;
min-width: 88px !important;
padding-right: 14px !important;
white-space: nowrap !important;
padding-top: 9px !important;
}
/* Wartość */
body.page-id-417 .wp-block-columns:has(figure.wp-block-image):has(figure.wp-block-table)
.wp-block-column:has(figure.wp-block-table) table td:last-child {
color: rgba(245, 242, 233, 0.82) !important;
}
/* Linia między wierszami */
body.page-id-417 .wp-block-columns:has(figure.wp-block-image):has(figure.wp-block-table)
.wp-block-column:has(figure.wp-block-table) table tr:not(:last-child) td {
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
/* ── OBRAZ: zaokrąglone rogi, proporcje 5:4 ── */
body.page-id-417 .wp-block-columns:has(figure.wp-block-image):has(figure.wp-block-table)
.wp-block-column:has(figure.wp-block-image) figure.wp-block-image {
border-radius: 24px !important;
overflow: hidden !important;
aspect-ratio: unset !important;
flex: 1 1 0 !important;
min-height: 0 !important;
position: relative !important;
margin: 0 !important;
width: 100% !important;
display: block !important;
}
body.page-id-417 .wp-block-columns:has(figure.wp-block-image):has(figure.wp-block-table)
.wp-block-column:has(figure.wp-block-image) figure.wp-block-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
border-radius: 0 !important;
}
/* ── BADGE numeryczny: 01–04 w limonkowej pigułce ── */
body.page-id-417 .wp-block-columns:has(figure.wp-block-image):has(figure.wp-block-table)
.wp-block-column:has(figure.wp-block-image) figure.wp-block-image::after {
content: "0" counter(filar-counter) !important;
position: absolute !important;
top: 20px !important;
right: 20px !important;
background: #C8F542 !important;
color: #070709 !important;
font-family: var(--vibe-font-body) !important;
font-size: 13px !important;
font-weight: 800 !important;
letter-spacing: 0.04em !important;
line-height: 1 !important;
padding: 8px 15px !important;
border-radius: 9999px !important;
z-index: 2 !important;
pointer-events: none !important;
}
/* ── MOBILE: stos pionowy (obraz nad, tekst pod) ── */
@media (max-width: 768px) {
body.page-id-417 .wp-block-columns:has(figure.wp-block-image):has(figure.wp-block-table) {
flex-direction: column !important;
gap: 20px !important;
padding: 40px 0 !important;
}
body.page-id-417 .wp-block-columns:has(figure.wp-block-image):has(figure.wp-block-table)
.wp-block-column:has(figure.wp-block-image),
body.page-id-417 .wp-block-columns:has(figure.wp-block-image):has(figure.wp-block-table)
.wp-block-column:has(figure.wp-block-table) {
flex: 0 0 100% !important;
max-width: 100% !important;
}
/* Obraz na górze na mobile */
body.page-id-417 .wp-block-columns:has(figure.wp-block-image):has(figure.wp-block-table)
.wp-block-column:has(figure.wp-block-image) {
order: 1 !important;
}
body.page-id-417 .wp-block-columns:has(figure.wp-block-image):has(figure.wp-block-table)
.wp-block-column:has(figure.wp-block-table) {
order: 2 !important;
}
/* Na mobile: przywróć proporcje obrazu */
body.page-id-417 .wp-block-columns:has(figure.wp-block-image):has(figure.wp-block-table)
.wp-block-column:has(figure.wp-block-image) figure.wp-block-image {
aspect-ratio: 4 / 3 !important;
flex: none !important;
}
}
/* ── Naprzemienność: filar 2 i 4 — obraz LEWO, tekst PRAWO ── */
/* nth-child(4) = filar 2, nth-child(7) = filar 4 w .entry-content */
body.page-id-417 .entry-content > .wp-block-group:nth-child(4)
.wp-block-column:has(figure.wp-block-image),
body.page-id-417 .entry-content > .wp-block-group:nth-child(7)
.wp-block-column:has(figure.wp-block-image) {
order: 1 !important;
}
body.page-id-417 .entry-content > .wp-block-group:nth-child(4)
.wp-block-column:has(figure.wp-block-table),
body.page-id-417 .entry-content > .wp-block-group:nth-child(7)
.wp-block-column:has(figure.wp-block-table) {
order: 2 !important;
}
/* ═══════════════════════════════════════════════════════════════════════
KROK 12 — Sekcje kremowe na /programy/: między filarami + pod filarem 4
nth-child(5) = cytat między filarami, .vibe-programs-cta = CTA końcowe
═══════════════════════════════════════════════════════════════════════ */
/* ── Kremowe tło i kolor tekstu
Specificity (0,5,1) / (0,4,1) — oba > (0,4,1) conflicting rule (lub later = wygrywa)
── */
body.page-id-417.hero-page--void .entry-content > .wp-block-group:nth-child(5),
body.page-id-417.hero-page--void .entry-content > .vibe-programs-cta {
background: #F5F1E8 !important;
color: #0E0F14 !important;
position: relative !important;
/* Full-bleed: rozciągnij element na pełną szerokość viewport */
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
box-sizing: border-box !important;
}
body.page-id-417.hero-page--void .entry-content > .wp-block-group:nth-child(5) .wp-block-group,
body.page-id-417.hero-page--void .entry-content > .wp-block-group:nth-child(5) .wp-block-column,
body.page-id-417.hero-page--void .entry-content > .vibe-programs-cta .wp-block-group,
body.page-id-417.hero-page--void .entry-content > .vibe-programs-cta .wp-block-column {
background: #F5F1E8 !important;
color: #0E0F14 !important;
}
/* Nagłówki */
body.page-id-417.hero-page--void .entry-content > .wp-block-group:nth-child(5) h1,
body.page-id-417.hero-page--void .entry-content > .wp-block-group:nth-child(5) h2,
body.page-id-417.hero-page--void .entry-content > .wp-block-group:nth-child(5) h3,
body.page-id-417.hero-page--void .entry-content > .wp-block-group:nth-child(5) h4,
body.page-id-417.hero-page--void .entry-content > .vibe-programs-cta h1,
body.page-id-417.hero-page--void .entry-content > .vibe-programs-cta h2,
body.page-id-417.hero-page--void .entry-content > .vibe-programs-cta h3,
body.page-id-417.hero-page--void .entry-content > .vibe-programs-cta h4 {
color: #0E0F14 !important;
}
/* Tekst i linki */
body.page-id-417.hero-page--void .entry-content > .wp-block-group:nth-child(5) p,
body.page-id-417.hero-page--void .entry-content > .wp-block-group:nth-child(5) li,
body.page-id-417.hero-page--void .entry-content > .wp-block-group:nth-child(5) a:not(.wp-block-button__link),
body.page-id-417.hero-page--void .entry-content > .vibe-programs-cta p,
body.page-id-417.hero-page--void .entry-content > .vibe-programs-cta li,
body.page-id-417.hero-page--void .entry-content > .vibe-programs-cta a:not(.wp-block-button__link) {
color: #0E0F14 !important;
}
/* em — akcent fioletowy */
body.page-id-417.hero-page--void .entry-content > .wp-block-group:nth-child(5) em,
body.page-id-417.hero-page--void .entry-content > .vibe-programs-cta em {
color: #7B3FE4 !important;
font-style: italic;
}
/* ── Wyrównanie do lewej ── */
body.page-id-417.hero-page--void .entry-content > .wp-block-group:nth-child(5) h1,
body.page-id-417.hero-page--void .entry-content > .wp-block-group:nth-child(5) h2,
body.page-id-417.hero-page--void .entry-content > .wp-block-group:nth-child(5) h3,
body.page-id-417.hero-page--void .entry-content > .wp-block-group:nth-child(5) h4,
body.page-id-417.hero-page--void .entry-content > .wp-block-group:nth-child(5) p,
body.page-id-417.hero-page--void .entry-content > .wp-block-group:nth-child(5) li,
body.page-id-417.hero-page--void .entry-content > .vibe-programs-cta h1,
body.page-id-417.hero-page--void .entry-content > .vibe-programs-cta h2,
body.page-id-417.hero-page--void .entry-content > .vibe-programs-cta h3,
body.page-id-417.hero-page--void .entry-content > .vibe-programs-cta h4,
body.page-id-417.hero-page--void .entry-content > .vibe-programs-cta p,
body.page-id-417.hero-page--void .entry-content > .vibe-programs-cta li {
text-align: left !important;
}
/* Bloki z .has-text-align-center → lewo */
body.page-id-417.hero-page--void .entry-content > .wp-block-group:nth-child(5) .has-text-align-center,
body.page-id-417.hero-page--void .entry-content > .vibe-programs-cta .has-text-align-center {
text-align: left !important;
}
/* ── H2/H3 powiększone (skalowane responsywnie) ── */
body.page-id-417.hero-page--void .entry-content > .wp-block-group:nth-child(5) h2,
body.page-id-417.hero-page--void .entry-content > .vibe-programs-cta h2,
body.page-id-417.hero-page--void .entry-content > .vibe-programs-cta h3 {
font-size: clamp(44px, 4vw + 20px, 80px) !important;
line-height: 1.05 !important;
letter-spacing: -0.02em !important;
font-family: var(--vibe-font-display) !important;
font-weight: 500 !important;
}
/* ============================================
PROJECT SECTIONS — Native Gutenberg (cream + violet)
Pierwsze użycie: /programy/pierwsza-pomoc-w-szkole/
Data: 21.05.2026
============================================ */
/* === BODY === */
body.vibe-project-page {
background: var(--vibe-cream, #F5F1E8);
color: var(--vibe-ink, #0E0F14);
}
body.vibe-project-page .vibe-page-hero {
display: none !important;
}
/* === SECTION CONTAINER === */
.vibe-project-section {
display: grid !important;
grid-template-columns: 1.1fr 1fr;
gap: clamp(32px, 4vw, 56px);
min-height: 85vh;
padding: clamp(60px, 8vh, 100px) clamp(24px, 5vw, 80px) !important;
border-top: 1px solid rgba(14, 15, 20, 0.12);
align-items: stretch;
max-width: 1600px;
margin: 0 auto !important;
}
.vibe-project-section:first-of-type { border-top: none; }
.vibe-project-section__left {
display: flex !important;
flex-direction: column !important;
justify-content: space-between;
gap: 24px;
}
/* === EYEBROW === */
.vibe-project-eyebrow {
display: inline-flex !important;
align-items: center;
gap: 12px;
font-family: 'Source Sans 3', sans-serif !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: var(--vibe-ink, #0E0F14) !important;
margin: 0 0 16px 0 !important;
}
.vibe-project-eyebrow::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--vibe-accent, #7B3FE4);
box-shadow: 0 0 12px var(--vibe-accent-glow, rgba(123,63,228,0.5));
flex-shrink: 0;
}
/* === TITLE === */
.vibe-project-title {
font-family: 'Fraunces', serif !important;
font-size: clamp(48px, 7vw, 96px) !important;
font-weight: 400 !important;
line-height: 0.92 !important;
letter-spacing: -0.035em !important;
color: var(--vibe-ink, #0E0F14) !important;
margin: 0 0 24px 0 !important;
}
.vibe-project-title em {
font-style: italic;
font-size: 0.7em;
margin-left: 0.12em;
display: inline-block;
vertical-align: baseline;
transform: translateY(-0.06em);
background: linear-gradient(180deg, var(--vibe-accent-dark, #5C2BB8), var(--vibe-accent, #7B3FE4));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--vibe-accent, #7B3FE4);
}
/* === LEAD === */
.vibe-project-lead {
font-family: 'Source Sans 3', sans-serif !important;
font-size: clamp(15px, 1.2vw, 17px) !important;
line-height: 1.55 !important;
color: rgba(14, 15, 20, 0.78) !important;
max-width: 540px !important;
margin: 0 0 32px 0 !important;
}
.vibe-project-lead a {
color: var(--vibe-ink, #0E0F14);
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 3px;
text-decoration-color: var(--vibe-accent, #7B3FE4);
font-weight: 600;
}
.vibe-project-lead a:hover { color: var(--vibe-accent, #7B3FE4); }
/* === STATS === */
.wp-block-columns.vibe-project-stats {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 32px !important;
padding: 20px 0 0 0 !important;
border-top: 1px solid rgba(14, 15, 20, 0.12);
margin: 0 0 32px 0 !important;
}
.wp-block-column.vibe-project-stat { padding: 0 !important; }
.vibe-project-stat__num {
font-family: 'Fraunces', serif !important;
font-size: clamp(40px, 5vw, 64px) !important;
font-weight: 400 !important;
line-height: 1 !important;
letter-spacing: -0.02em !important;
color: var(--vibe-ink, #0E0F14) !important;
margin: 0 !important;
}
.vibe-project-stat__suffix {
font-size: 0.55em;
color: var(--vibe-accent, #7B3FE4);
margin-left: 0.05em;
vertical-align: super;
}
.vibe-project-stat__label {
font-family: 'Source Sans 3', sans-serif !important;
font-size: 12.5px !important;
color: rgba(14, 15, 20, 0.6) !important;
margin: 8px 0 0 0 !important;
line-height: 1.3 !important;
}
/* === CTA BUTTONS === */
.wp-block-buttons.vibe-project-cta-row {
display: flex !important;
align-items: center;
gap: 24px !important;
flex-wrap: wrap;
margin: 0 0 24px 0 !important;
}
.wp-block-button.vibe-project-cta--primary .wp-block-button__link {
display: inline-flex !important;
align-items: center;
gap: 10px;
padding: 16px 28px !important;
background: var(--vibe-accent, #7B3FE4) !important;
color: var(--vibe-cream, #F5F1E8) !important;
font-family: 'Source Sans 3', sans-serif !important;
font-size: 15px !important;
font-weight: 600 !important;
text-decoration: none !important;
border-radius: 999px !important;
border: none !important;
box-shadow: 0 10px 24px var(--vibe-accent-shadow, rgba(123,63,228,0.33));
transition: all 0.2s ease;
}
.wp-block-button.vibe-project-cta--primary .wp-block-button__link:hover {
background: var(--vibe-accent-dark, #5C2BB8) !important;
transform: translateY(-2px);
box-shadow: 0 14px 32px var(--vibe-accent-soft, rgba(123,63,228,0.12));
}
.wp-block-button.vibe-project-cta--ghost .wp-block-button__link {
background: transparent !important;
color: var(--vibe-ink, #0E0F14) !important;
font-family: 'Source Sans 3', sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
text-decoration: none !important;
border: none !important;
border-bottom: 1.5px solid var(--vibe-ink, #0E0F14) !important;
border-radius: 0 !important;
padding: 2px 0 4px 0 !important;
}
.wp-block-button.vibe-project-cta--ghost .wp-block-button__link:hover {
color: var(--vibe-accent, #7B3FE4) !important;
border-bottom-color: var(--vibe-accent, #7B3FE4) !important;
}
/* === SOCIAL PROOF === */
.vibe-project-social-proof {
display: inline-flex !important;
align-items: center;
gap: 6px;
font-family: 'Source Sans 3', sans-serif !important;
font-size: 13px !important;
color: rgba(14, 15, 20, 0.6) !important;
margin: 0 0 16px 0 !important;
}
.vibe-project-social-proof::before {
content: "★";
color: var(--vibe-accent, #7B3FE4);
font-size: 14px;
}
/* === FUNDING === */
.vibe-project-funding {
padding: 16px 0 0 0 !important;
border-top: 1px solid rgba(14, 15, 20, 0.12);
font-family: 'Source Sans 3', sans-serif !important;
font-size: 13px !important;
color: rgba(14, 15, 20, 0.6) !important;
line-height: 1.4 !important;
margin: 0 !important;
}
.vibe-project-funding strong {
display: block;
text-transform: uppercase;
letter-spacing: 0.16em;
font-size: 11px;
font-weight: 600;
color: var(--vibe-ink, #0E0F14);
margin-bottom: 4px;
}
.vibe-project-funding em {
font-family: 'Fraunces', serif;
font-style: italic;
color: var(--vibe-accent, #7B3FE4);
font-weight: 500;
font-size: 14px;
}
/* === RIGHT COLUMN — Native wp:image mosaic === */
.vibe-project-section__right {
display: grid !important;
grid-template-columns: 1.7fr 1fr;
grid-template-rows: repeat(12, 1fr) auto;
gap: 12px;
min-height: 600px;
}
/* Usuń inner-container Gutenberg z układu */
.vibe-project-section__right > .wp-block-group__inner-container {
display: contents !important;
}
/* HERO image */
.vibe-project-section__right .wp-block-image.vibe-project-mosaic__hero {
grid-column: 1;
grid-row: 1 / 13;
margin: 0 !important;
position: relative;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 16px 40px rgba(14, 15, 20, 0.18);
}
/* THUMB images */
.vibe-project-section__right .wp-block-image.vibe-project-mosaic__thumb {
grid-column: 2;
margin: 0 !important;
position: relative;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 8px 20px rgba(14, 15, 20, 0.08);
}
.vibe-project-section__right .wp-block-image.vibe-project-mosaic__thumb:nth-of-type(2) { grid-row: 1 / 5; }
.vibe-project-section__right .wp-block-image.vibe-project-mosaic__thumb:nth-of-type(3) { grid-row: 5 / 9; }
.vibe-project-section__right .wp-block-image.vibe-project-mosaic__thumb:nth-of-type(4) { grid-row: 9 / 13; }
/* IMG wypełnij figure */
.vibe-project-section__right .wp-block-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
position: absolute !important;
inset: 0 !important;
display: block !important;
margin: 0 !important;
border-radius: 0 !important;
}
/* WATERMARK + */
.vibe-project-section__right .wp-block-image::after {
content: "+";
position: absolute;
top: 12px;
right: 14px;
font-family: 'Fraunces', serif;
font-size: 24px;
font-weight: 300;
color: rgba(245, 241, 232, 0.5);
z-index: 3;
pointer-events: none;
}
/* FIGCAPTION overlay */
.vibe-project-section__right .wp-block-image figcaption {
position: absolute !important;
bottom: 0;
left: 0;
right: 0;
margin: 0 !important;
z-index: 2;
background: linear-gradient(180deg, transparent, rgba(14, 15, 20, 0.75) 60%);
padding: 32px 16px 14px 16px;
color: var(--vibe-cream, #F5F1E8) !important;
border-radius: 0 0 6px 6px;
text-align: left !important;
}
.vibe-project-section__right .wp-block-image.vibe-project-mosaic__hero figcaption {
font-family: 'Fraunces', serif !important;
font-size: 18px !important;
font-weight: 500 !important;
line-height: 1.25 !important;
}
.vibe-project-section__right .wp-block-image.vibe-project-mosaic__thumb figcaption {
font-family: 'Source Sans 3', sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
padding: 24px 12px 10px 12px;
}
/* === GALLERY LINK (native wp:paragraph) === */
.vibe-project-gallery-link-wrapper {
grid-column: 1 / -1;
margin: 12px 0 0 0 !important;
}
.vibe-project-gallery-link-wrapper a.vibe-project-gallery-link {
display: flex !important;
align-items: center;
gap: 20px;
padding: 16px 20px;
background: rgba(14, 15, 20, 0.04);
border: 1px solid rgba(14, 15, 20, 0.08);
border-radius: 8px;
text-decoration: none !important;
color: var(--vibe-ink, #0E0F14) !important;
font-family: 'Fraunces', serif !important;
font-size: 16px !important;
font-weight: 500 !important;
transition: all 0.2s ease;
}
.vibe-project-gallery-link-wrapper a.vibe-project-gallery-link::before {
content: "";
width: 36px;
height: 36px;
background: linear-gradient(135deg, var(--vibe-accent, #7B3FE4), var(--vibe-accent-dark, #5C2BB8));
border-radius: 4px;
flex-shrink: 0;
box-shadow: -6px 4px 0 -3px #EEE8DA, -12px 8px 0 -6px #1F1B2E;
}
.vibe-project-gallery-link-wrapper a.vibe-project-gallery-link::after {
content: "→";
margin-left: auto;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--vibe-ink, #0E0F14);
color: var(--vibe-cream, #F5F1E8);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex-shrink: 0;
transition: all 0.2s ease;
}
.vibe-project-gallery-link-wrapper a.vibe-project-gallery-link:hover {
background: var(--vibe-accent-soft, rgba(123,63,228,0.12));
transform: translateX(4px);
}
.vibe-project-gallery-link-wrapper a.vibe-project-gallery-link:hover::after {
background: var(--vibe-accent, #7B3FE4);
}
/* === MOBILE === */
@media (max-width: 900px) {
.vibe-project-section {
grid-template-columns: 1fr !important;
min-height: auto;
padding: 60px 20px !important;
}
.vibe-project-section__right {
order: -1;
min-height: 400px;
grid-template-rows: repeat(12, 30px) auto;
}
.wp-block-columns.vibe-project-stats {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.wp-block-buttons.vibe-project-cta-row {
flex-direction: column;
align-items: flex-start;
}
}
/* === END PROJECT SECTIONS === */
/* ============================================================
VIBE GALLERY PAGE — galeria projektów
Cream + Violet brand | native Gutenberg +