/* =========================================================
ZAPISKI NATURY – main.css
przyroda · sztuka · uważność
nowa paleta: mech · wrzos · bursztyn
========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Element picture to tylko opakowanie na źródła – nie może wchodzić do layoutu
między rodzica a samo zdjęcie, bo reguły typu height:100% liczyłyby się
wtedy od niego, a nie od kontenera. */
picture { display: contents; }
/* Rysowane ikony (helpers.php → zn_icon). Dziedziczą kolor po rodzicu,
skalują się z jego font-size, więc wchodzą dokładnie tam, gdzie wcześniej
stały znaki tekstowe. */
.zn-icon {
width: 1em; height: 1em;
display: block;
flex-shrink: 0;
/* Kreska liczona w pikselach ekranu, nie w jednostkach viewBoxa. Ikony
pojawiają się w rozmiarach od 18 do 56px, a stała grubość 2.4 w siatce
100x100 dawała przy 20px włos, przy 56px normalną linię. Tak wszystkie
mają tę samą wagę co ikony w nagłówku. */
stroke-width: 2.2;
vector-effect: non-scaling-stroke;
}
/* ─── LOCAL FONTS ─── */
@font-face {
font-family: 'Szczepcio Serif';
src: url('../fonts/SzczepcioSerif-Regular.woff2') format('woff2'),
url('../fonts/SzczepcioSerif-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
size-adjust: 115%;
}
@font-face {
font-family: 'Szczepcio Serif';
src: url('../fonts/SzczepcioSerif-Regular.woff2') format('woff2'),
url('../fonts/SzczepcioSerif-Regular.ttf') format('truetype');
font-weight: 600;
font-style: normal;
font-display: swap;
size-adjust: 115%;
}
/* ─── PALETA – JASNY MOTYW (default) ─── */
:root {
/* Tła i tekst */
--bg: #F4EFE3; /* len / papier */
--bg-warm: #ECE3CE; /* ciepły len */
--bg-deep: #E1D5BA; /* głęboki len */
--ink: #2C2620; /* atrament */
--ink-soft: #5A5040; /* miękki atrament */
--paper: #FBF7EC;
--paper-aged: #EDE3CE;
/* Zielenie – szałwia */
--moss-deep: #3E4A36; /* głęboka szałwia */
--moss: #6B7A58; /* szałwia */
--sage: #9FA888; /* jasna szałwia */
--sage-mist: #D0D4BF; /* mgła szałwiowa */
/* Wrzos / glina – akcent emocjonalny (różano-wrzosowy) */
--heather: #97606B; /* wrzos */
--heather-deep: #5E3A43; /* ciemny wrzos */
--heather-soft: #D3B2B9; /* miękki wrzos */
--heather-mist: #EDD9DD; /* mgła wrzosowa */
/* Terakota / glina – cieplejszy akcent */
--amber: #B0703F; /* terakota */
--amber-deep: #7E4A24; /* ciemna terakota */
--amber-soft: #D89C6C; /* miękka terakota */
--amber-warm: #EDD0B8; /* ciepła glina */
/* Pomocnicze */
--line: rgba(74, 60, 50, 0.14);
--line-strong: rgba(74, 60, 50, 0.28);
/* Typografia */
--font-display: 'Cormorant Garamond', 'Times New Roman', serif;
--font-script: 'Szczepcio Serif', 'Caveat', cursive;
--font-body: 'Albert Sans', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', 'Courier New', monospace;
/* Wymiary */
--max-w: 1200px;
--gutter: clamp(1.25rem, 4vw, 3rem);
--nav-h: 76px;
/* Cienie */
--shadow-soft: 0 4px 24px rgba(50, 40, 30, 0.07);
--shadow-med: 0 10px 40px rgba(50, 40, 30, 0.11);
--shadow-deep: 0 20px 60px rgba(50, 40, 30, 0.18);
/* Krzywe */
--ease: cubic-bezier(0.22, 0.68, 0, 1.05);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
/* Organiczne kształty (blob border-radius) */
--blob-1: 62% 38% 56% 44% / 48% 52% 48% 52%;
--blob-2: 46% 54% 38% 62% / 62% 44% 56% 38%;
--blob-3: 58% 42% 64% 36% / 36% 64% 38% 62%;
--blob-4: 38% 62% 48% 52% / 56% 38% 62% 44%;
--blob-5: 70% 30% 50% 50% / 40% 60% 50% 50%;
}
/* ─── PALETA – TRYB CIEMNY ─── */
[data-theme="dark"] {
--bg: #1A1C18;
--bg-warm: #232722;
--bg-deep: #2B302A;
--ink: #EAE2D2;
--ink-soft: #B5AC97;
--paper: #1F2320;
--paper-aged: #292E27;
--moss-deep: #BAC6A4;
--moss: #9DAE82;
--sage: #76815F;
--sage-mist: #3F4632;
--heather: #D6A9B2;
--heather-deep: #C08E99;
--heather-soft: #5A3D44;
--heather-mist: #2E2226;
--amber: #D89C6C;
--amber-deep: #B0703F;
--amber-soft: #EDD0B8;
--amber-warm: #3D2A1C;
--line: rgba(234, 226, 210, 0.12);
--line-strong: rgba(234, 226, 210, 0.28);
--shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.35);
--shadow-med: 0 10px 40px rgba(0, 0, 0, 0.45);
--shadow-deep: 0 20px 60px rgba(0, 0, 0, 0.6);
}
/* ─── TRYB CIEMNY – poprawki kontrastu ─── */
[data-theme="dark"] .btn-primary {
background: #4A5E40;
color: #EAE2D2;
}
[data-theme="dark"] .btn-primary:hover {
background: #5A7250;
color: #EAE2D2;
}
[data-theme="dark"] .cta-band .btn-primary {
background: var(--amber);
color: #1A1C18;
}
[data-theme="dark"] .cta-band .btn-primary:hover {
background: var(--amber-soft);
color: #1A1C18;
}
[data-theme="dark"] .quotes {
background: var(--bg-deep);
}
[data-theme="dark"] .quotes .section-title { color: var(--ink); }
[data-theme="dark"] .quotes .eyebrow { color: var(--heather); }
[data-theme="dark"] .quote-card {
background: var(--bg-warm);
border-color: var(--line-strong);
}
[data-theme="dark"] .quote-card p { color: var(--ink-soft); }
[data-theme="dark"] .quote-card::before { color: var(--amber); }
[data-theme="dark"] .pillar-num { color: var(--heather); }
/* ─── PANEL CIEMNOZIELONY – stały kontrast w obu trybach ─── */
.panel-dark,
.callout.panel-dark {
background: #2F3D2C;
color: rgba(244, 239, 227, 0.88);
}
.panel-dark .section-title,
.panel-dark h2,
.panel-dark h3,
.panel-dark h4 { color: #F4EFE3; }
.panel-dark .section-title em,
.panel-dark em { color: var(--amber-soft); }
.panel-dark .eyebrow,
.panel-dark .eyebrow-tag { color: var(--amber-soft); }
.panel-dark strong,
.callout.panel-dark strong { color: var(--amber-soft); }
.panel-dark a:not(.btn) {
color: var(--amber-soft);
text-decoration-color: var(--amber-soft);
}
.panel-dark .btn-primary { background: var(--amber); color: #2F3D2C; }
.panel-dark .btn-primary:hover { background: var(--amber-soft); color: #2F3D2C; }
html { -webkit-text-size-adjust: 100%; color-scheme: light dark; }
body {
font-family: var(--font-body);
font-weight: 400;
font-size: 17px;
line-height: 1.7;
background: var(--bg);
color: var(--ink);
overflow-x: clip;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: background 0.4s ease, color 0.4s ease;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: var(--heather); color: var(--bg); }
/* Skip link */
.skip-link {
position: absolute; left: -9999px; top: 0;
background: var(--moss-deep); color: var(--bg);
padding: 10px 18px; border-radius: 0 0 12px 0;
font-size: 14px; z-index: 9999;
}
.skip-link:focus { left: 0; }
/* Focus */
:focus-visible {
outline: 2px solid var(--heather);
outline-offset: 3px;
}
/* =========================================================
ORGANICZNE DEKORACJE – używane w tle sekcji
Sylwetka liścia (helpers.php → zn_leaf_drift), ta sama figura co znak
marki i pierwsza ikona filarów. Dryf jest animacją transformu, więc
kompozytor radzi sobie z nim bez przemalowywania.
========================================================= */
/* Liść ma wystawać poza sekcję – na tym polega. Nie może za to poszerzać
strony: na „oferta dla dzieci" wychodził 110px w prawo i dawał poziomy
przesuw na każdej szerokości, także na 320px. .hero radziło sobie własnym
overflow: hidden, pozostałe sekcje nie miały nic. */
section:has(> .organic-drift) { overflow: hidden; }
/* Zgodność wstecz ze Stronami zapisanymi w bazie WordPressa. Treść stron
„klub", „o mnie", „inicjatywy" i „oferta" jest wklejona w panelu i wciąż
zawiera stary preset z generatora blobów pod klasą .organic-blob. Reguł dla
niej już nie ma, więc po wgraniu motywu SVG straciłby position:absolute i
wpadł w tok treści jako pusty blok wysokości 360px. Chowamy go: to ten sam
kształt, który usuwamy z szablonów, a przy okazji znika poziomy przesuw,
który dawał na „klub" i „o mnie" 104px. Blok do ponownego wklejenia, już z
liściem, leży w wp-tresci-do-wklejenia/. */
.organic-blob { display: none; }
.organic-drift {
position: absolute;
pointer-events: none;
z-index: 0;
opacity: 0.55;
animation: leaf-drift 18s ease-in-out infinite alternate;
}
.organic-drift path {
fill: currentColor;
}
.organic-drift.b-moss { color: color-mix(in srgb, var(--moss) 20%, transparent); }
.organic-drift.b-heather { color: color-mix(in srgb, var(--heather) 22%, transparent); }
.organic-drift.b-amber { color: color-mix(in srgb, var(--amber) 18%, transparent); }
.organic-drift.b-sage { color: color-mix(in srgb, var(--sage) 30%, transparent); }
@keyframes leaf-drift {
0% { transform: translate(0, 0) rotate(0deg) scale(1); }
50% { transform: translate(2%, -1.6%) rotate(8deg) scale(1.04); }
100% { transform: translate(-1%, 2%) rotate(-6deg) scale(0.98); }
}
/* Małe SVG liście / paprocie jako dekoracje w tle */
.organic-leaf {
position: absolute;
pointer-events: none;
z-index: 0;
opacity: 0.5;
transform-origin: center;
animation: leaf-sway 12s ease-in-out infinite alternate;
}
.organic-leaf path { fill: currentColor; }
.organic-leaf.l-moss { color: color-mix(in srgb, var(--moss) 30%, transparent); }
.organic-leaf.l-amber { color: color-mix(in srgb, var(--amber-deep) 22%, transparent); }
@keyframes leaf-sway {
from { transform: rotate(-6deg); }
to { transform: rotate(8deg); }
}
/* Sekcje używają position: relative i izolują z-index */
section > * { position: relative; z-index: 1; }
section { position: relative; isolation: isolate; }
/* =========================================================
PAPIER – organiczne tło
========================================================= */
.paper-bg { position: relative; }
.paper-bg::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -2;
background:
radial-gradient(ellipse at 18% 12%, color-mix(in srgb, var(--amber) 14%, transparent), transparent 50%),
radial-gradient(ellipse at 84% 88%, color-mix(in srgb, var(--moss) 14%, transparent), transparent 60%),
radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--heather) 6%, transparent), transparent 70%),
var(--bg);
background-attachment: fixed;
transition: background 0.4s ease;
}
.paper-bg::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
opacity: 0.45;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,");
}
[data-theme="dark"] .paper-bg::after {
mix-blend-mode: screen;
opacity: 0.18;
}
/* =========================================================
NAWIGACJA – z menu dropdown
========================================================= */
.site-nav {
position: fixed; top: 0; left: 0; right: 0;
z-index: 100;
display: flex; align-items: center; justify-content: space-between;
padding: 0 var(--gutter);
height: var(--nav-h);
background: color-mix(in srgb, var(--bg) 84%, transparent);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--line);
transition: background 0.3s, border-color 0.3s;
}
.site-nav.scrolled {
background: color-mix(in srgb, var(--bg) 96%, transparent);
}
.brand {
display: flex; align-items: center; gap: 14px;
text-decoration: none;
color: var(--ink);
}
.brand-mark {
width: 46px; height: 46px;
background: var(--moss);
display: grid; place-items: center;
flex-shrink: 0;
transition: transform 0.5s var(--ease), background 0.3s;
border-radius: var(--blob-1);
}
.brand:hover .brand-mark { transform: rotate(-12deg) scale(1.04); }
.brand-mark svg { width: 26px; height: 26px; fill: var(--bg); overflow: visible; }
.brand-mark svg .leaf-blade { fill: var(--bg); }
.brand-mark svg .leaf-vein { fill: none; stroke: var(--moss); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.brand-text {
font-family: var(--font-display);
font-weight: 500;
font-size: 1.38rem;
line-height: 1;
color: var(--moss-deep);
letter-spacing: 0.01em;
}
.brand-tagline {
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--moss-deep);
margin-top: 4px;
display: block;
}
/* Prawa strona – menu button + dark toggle + CTA */
.nav-actions {
display: flex; align-items: center; gap: 12px;
}
.nav-cta {
display: inline-flex; align-items: center; gap: 8px;
background: var(--moss-deep);
color: var(--bg) !important;
padding: 10px 22px;
min-height: 44px;
text-decoration: none;
font-weight: 500;
font-size: 0.86rem;
letter-spacing: 0.02em;
border-radius: 999px;
transition: background 0.3s, transform 0.25s, box-shadow 0.3s;
}
.nav-cta:hover {
background: var(--moss);
transform: translateY(-1px);
box-shadow: var(--shadow-soft);
}
/* Theme toggle – okrągły */
.theme-toggle {
width: 44px; height: 44px;
background: transparent;
border: 1.5px solid var(--line-strong);
border-radius: 50%;
cursor: pointer;
display: grid; place-items: center;
color: var(--ink);
transition: background 0.25s, border-color 0.25s, transform 0.3s, color 0.25s;
position: relative;
}
.theme-toggle:hover {
background: var(--amber-warm);
border-color: var(--amber);
transform: rotate(20deg);
color: var(--amber-deep);
}
[data-theme="dark"] .theme-toggle:hover {
color: var(--amber);
}
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .sun-icon { display: none; }
.theme-toggle .moon-icon { display: block; }
[data-theme="dark"] .theme-toggle .sun-icon { display: block; }
[data-theme="dark"] .theme-toggle .moon-icon { display: none; }
/* ─── MENU DROPDOWN (hover) ─── */
.menu-wrap {
position: relative;
}
.menu-btn {
display: inline-flex; align-items: center; gap: 10px;
background: transparent;
border: 1.5px solid var(--line-strong);
border-radius: 999px;
padding: 9px 18px 9px 16px;
min-height: 44px;
color: var(--ink);
font-family: var(--font-body);
font-size: 0.88rem;
font-weight: 500;
letter-spacing: 0.04em;
cursor: pointer;
transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.menu-btn:hover,
.menu-wrap:hover .menu-btn,
.menu-wrap.focus-open .menu-btn {
background: var(--heather-mist);
border-color: var(--heather);
color: var(--heather-deep);
}
[data-theme="dark"] .menu-btn:hover,
[data-theme="dark"] .menu-wrap:hover .menu-btn { color: var(--heather); }
.menu-btn-lines {
display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
width: 18px;
}
.menu-btn-lines span {
display: block; height: 2px; width: 100%;
background: currentColor;
border-radius: 2px;
transform-origin: center;
transition: transform 0.3s;
}
.menu-btn-lines span:nth-child(2) { transform: scaleX(0.7); }
/* Hover: wszystkie trzy kreski zmieniają szerokość (odwrócony wzór) */
.menu-wrap:hover .menu-btn-lines span:nth-child(1),
.menu-wrap.focus-open .menu-btn-lines span:nth-child(1) { transform: scaleX(0.7); }
.menu-wrap:hover .menu-btn-lines span:nth-child(2),
.menu-wrap.focus-open .menu-btn-lines span:nth-child(2) { transform: scaleX(1); }
.menu-wrap:hover .menu-btn-lines span:nth-child(3),
.menu-wrap.focus-open .menu-btn-lines span:nth-child(3) { transform: scaleX(0.7); }
/* Dropdown panel */
.menu-dropdown {
position: absolute;
top: calc(100% + 16px);
right: 0;
min-width: 320px;
max-width: 360px;
background: var(--paper);
border-radius: 6px 28px 6px 28px;
box-shadow: var(--shadow-deep);
border: 1px solid var(--line);
padding: 1.2rem 0.6rem;
list-style: none;
opacity: 0;
visibility: hidden;
transform: translateY(-8px) scale(0.98);
transform-origin: top right;
transition: opacity 0.28s var(--ease-out), transform 0.28s var(--ease-out), visibility 0.28s;
z-index: 110;
}
/* Bezpieczny "most" do hover (żeby kursor nie tracił hovera w przerwie) */
.menu-wrap::after {
content: '';
position: absolute;
top: 100%;
left: 0; right: 0;
height: 22px;
pointer-events: none;
}
.menu-wrap:hover::after,
.menu-wrap.focus-open::after { pointer-events: auto; }
.menu-wrap:hover .menu-dropdown,
.menu-wrap:focus-within .menu-dropdown,
.menu-wrap.focus-open .menu-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.menu-dropdown li { display: block; }
.menu-dropdown a {
display: flex; align-items: baseline; gap: 14px;
padding: 0.7rem 1rem;
text-decoration: none;
color: var(--ink);
font-family: var(--font-display);
font-size: 1.1rem;
font-weight: 500;
border-radius: 8px;
/* Wcięcie na hover robi transform, nie padding-left – animowanie paddingu
przelicza layout w każdej klatce. Przesuwa się cały wiersz razem z tłem. */
transition: background 0.2s, color 0.2s, transform 0.2s;
position: relative;
}
.menu-dropdown a::before {
content: attr(data-num);
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.1em;
color: var(--amber-deep);
width: 22px;
flex-shrink: 0;
opacity: 0.7;
}
[data-theme="dark"] .menu-dropdown a::before { color: var(--amber); }
.menu-dropdown a:hover,
.menu-dropdown a:focus {
background: var(--bg-warm);
color: var(--moss-deep);
transform: translateX(6px);
}
.menu-dropdown a em { font-style: italic; color: var(--amber-deep); }
[data-theme="dark"] .menu-dropdown a em { color: var(--amber); }
.menu-dropdown a.active {
color: var(--moss-deep);
background: var(--bg-warm);
}
.menu-dropdown li.divider {
height: 1px;
background: var(--line);
margin: 0.5rem 1rem;
}
@media (max-width: 720px) {
.menu-dropdown {
position: fixed;
top: calc(var(--nav-h) + 8px);
right: 8px;
left: 8px;
min-width: auto;
max-width: none;
}
}
/* =========================================================
REVEAL ANIMATIONS
========================================================= */
/* Stan początkowy (niewidoczny) tylko przy włączonym JS – klasę .js ustawia
skrypt w (functions.php → zn_js_class). Bez JS obserwator nigdy nie
doda .visible, więc nieobjęta warunkiem treść zostałaby ukryta na zawsze. */
.js .reveal {
opacity: 0; transform: translateY(28px);
transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.js .reveal-left { opacity: 0; transform: translateX(-36px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.js .reveal-right { opacity: 0; transform: translateX(36px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.reveal-left.visible, .reveal-right.visible { opacity: 1; transform: translateX(0); }
.js .reveal-scale { opacity: 0; transform: scale(0.94); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.reveal-scale.visible { opacity: 1; transform: scale(1); }
.js .stagger > * {
opacity: 0; transform: translateY(20px);
transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.stagger.visible > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.05s; }
.stagger.visible > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.15s; }
.stagger.visible > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.25s; }
.stagger.visible > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.35s; }
.stagger.visible > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.45s; }
.stagger.visible > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 0.55s; }
.stagger.visible > *:nth-child(7) { opacity: 1; transform: none; transition-delay: 0.65s; }
.stagger.visible > *:nth-child(8) { opacity: 1; transform: none; transition-delay: 0.75s; }
/* =========================================================
HERO
========================================================= */
.hero {
position: relative;
min-height: 100vh;
padding-top: var(--nav-h);
display: grid;
grid-template-columns: 1fr 1.25fr;
gap: 0;
overflow: hidden;
}
.hero-text {
padding: clamp(2rem, 6vw, 6rem) clamp(1.25rem, 5vw, 4rem);
display: flex; flex-direction: column; justify-content: center;
position: relative;
z-index: 2;
will-change: transform;
}
.hero-eyebrow {
display: inline-block;
font-family: var(--font-script);
font-size: 1.55rem;
line-height: 1.1;
color: var(--heather);
margin-bottom: 0.4rem;
opacity: 0;
animation: fadeUp 0.8s 0.3s var(--ease-out) forwards;
}
.hero-title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(2.8rem, 7.5vw, 6rem);
line-height: 0.98;
color: var(--moss-deep);
letter-spacing: -0.01em;
margin-bottom: 1.4rem;
opacity: 0;
animation: fadeUp 1s 0.5s var(--ease-out) forwards;
}
.hero-title em {
font-style: italic;
color: var(--amber-deep);
font-weight: 500;
}
[data-theme="dark"] .hero-title em { color: var(--amber); }
.hero-tagline {
font-size: 1.25rem;
line-height: 1.55;
color: var(--ink-soft);
max-width: 480px;
margin-bottom: 2.4rem;
opacity: 0;
animation: fadeUp 1s 0.75s var(--ease-out) forwards;
}
.hero-tagline strong {
color: var(--moss-deep);
font-weight: 500;
}
.hero-meta {
display: flex; align-items: center; gap: 18px;
font-size: 0.7rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--amber-deep);
margin-bottom: 2.4rem;
opacity: 0;
animation: fadeUp 1s 0.65s var(--ease-out) forwards;
}
[data-theme="dark"] .hero-meta { color: var(--amber); }
.hero-meta::before, .hero-meta::after {
content: ''; flex: 0 0 36px; height: 1px;
background: linear-gradient(to right, transparent, var(--amber));
}
.hero-meta::after {
background: linear-gradient(to left, transparent, var(--amber));
}
.hero-cta {
display: flex; gap: 14px; flex-wrap: wrap;
opacity: 0;
animation: fadeUp 1s 0.95s var(--ease-out) forwards;
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
/* Hero image side – organiczna maska */
.hero-visual {
position: relative;
min-height: 70vh;
overflow: hidden;
}
.hero-img {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover; object-position: center;
display: block;
animation: heroPan 22s ease-in-out infinite alternate;
}
@keyframes heroPan {
from { transform: scale(1.05) translate(0, 0); }
to { transform: scale(1.12) translate(-2%, -2%); }
}
.hero-visual::after {
content: '';
position: absolute; inset: 0;
background: none;
pointer-events: none;
}
/* biedronka spacerująca po krawędzi zdjęcia (pozycję/obrót ustawia JS) */
.ladybird {
position: absolute; top: 0; left: 0;
width: 22px; height: 25px;
background: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2028%2032%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%20%3Cg%20stroke%3D%27%2315110d%27%20stroke-width%3D%271.1%27%20stroke-linecap%3D%27round%27%3E%20%3Cpath%20d%3D%27M10%2016%20L4%2012%27%2F%3E%3Cpath%20d%3D%27M10%2020%20L3%2021%27%2F%3E%3Cpath%20d%3D%27M10%2024%20L5%2028%27%2F%3E%20%3Cpath%20d%3D%27M18%2016%20L24%2012%27%2F%3E%3Cpath%20d%3D%27M18%2020%20L25%2021%27%2F%3E%3Cpath%20d%3D%27M18%2024%20L23%2028%27%2F%3E%3C%2Fg%3E%20%3Cpath%20d%3D%27M12%207%20C%2010%204%2C%209%203%2C%208%202.6%27%20stroke%3D%27%2315110d%27%20stroke-width%3D%271%27%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%2F%3E%20%3Cpath%20d%3D%27M16%207%20C%2018%204%2C%2019%203%2C%2020%202.6%27%20stroke%3D%27%2315110d%27%20stroke-width%3D%271%27%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%2F%3E%20%3Cpath%20d%3D%27M14%206%20C%2011%206%2C%209.7%208%2C%2010%2010%20C%2012%2011%2C%2016%2011%2C%2018%2010%20C%2018.3%208%2C%2017%206%2C%2014%206%20Z%27%20fill%3D%27%2315110d%27%2F%3E%20%3Ccircle%20cx%3D%2712.2%27%20cy%3D%278.4%27%20r%3D%271%27%20fill%3D%27%23efe9da%27%2F%3E%20%3Ccircle%20cx%3D%2715.8%27%20cy%3D%278.4%27%20r%3D%271%27%20fill%3D%27%23efe9da%27%2F%3E%20%3Cellipse%20cx%3D%2714%27%20cy%3D%2720%27%20rx%3D%278.4%27%20ry%3D%2710.4%27%20fill%3D%27%23cd2c22%27%2F%3E%20%3Cellipse%20cx%3D%2714%27%20cy%3D%2720%27%20rx%3D%278.4%27%20ry%3D%2710.4%27%20fill%3D%27none%27%20stroke%3D%27%237d1c16%27%20stroke-width%3D%270.7%27%2F%3E%20%3Cpath%20d%3D%27M14%2010%20L%2014%2030%27%20stroke%3D%27%2315110d%27%20stroke-width%3D%271.3%27%2F%3E%20%3Cpath%20d%3D%27M11.6%2010.6%20L%2016.4%2010.6%20L%2014%2013.8%20Z%27%20fill%3D%27%2315110d%27%2F%3E%20%3Ccircle%20cx%3D%279.9%27%20cy%3D%2717%27%20r%3D%271.8%27%20fill%3D%27%2315110d%27%2F%3E%20%3Ccircle%20cx%3D%2718.1%27%20cy%3D%2717%27%20r%3D%271.8%27%20fill%3D%27%2315110d%27%2F%3E%20%3Ccircle%20cx%3D%279.7%27%20cy%3D%2723.5%27%20r%3D%271.8%27%20fill%3D%27%2315110d%27%2F%3E%20%3Ccircle%20cx%3D%2718.3%27%20cy%3D%2723.5%27%20r%3D%271.8%27%20fill%3D%27%2315110d%27%2F%3E%20%3Ccircle%20cx%3D%2711.7%27%20cy%3D%2727.6%27%20r%3D%271.5%27%20fill%3D%27%2315110d%27%2F%3E%20%3Ccircle%20cx%3D%2716.3%27%20cy%3D%2727.6%27%20r%3D%271.5%27%20fill%3D%27%2315110d%27%2F%3E%20%3C%2Fsvg%3E") center/contain no-repeat;
z-index: 3;
pointer-events: none;
will-change: transform;
filter: drop-shadow(0 1px 1.5px rgba(0,0,0,0.30));
}
@media (prefers-reduced-motion: reduce) { .ladybird { display: none; } }
/* Scroll hint */
.scroll-hint {
position: absolute;
bottom: 28px;
left: 50%;
transform: translateX(-50%);
font-size: 0.72rem;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--amber-deep);
display: flex; flex-direction: column; align-items: center; gap: 10px;
opacity: 0;
animation: fadeUp 1s 1.4s var(--ease-out) forwards;
z-index: 3;
}
[data-theme="dark"] .scroll-hint { color: var(--amber); }
.scroll-hint::after {
content: '';
width: 1px; height: 38px;
background: linear-gradient(to bottom, var(--amber-deep), transparent);
animation: scrollLine 2.4s ease-in-out infinite;
}
@keyframes scrollLine {
0%, 100% { transform: scaleY(0.6); opacity: 0.4; transform-origin: top; }
50% { transform: scaleY(1); opacity: 1; }
}
/* =========================================================
PRZYCISKI – organiczne
========================================================= */
.btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 28px;
min-height: 44px;
border-radius: 999px;
font-family: var(--font-body);
font-size: 0.88rem;
font-weight: 500;
letter-spacing: 0.04em;
text-decoration: none;
cursor: pointer;
border: none;
transition: transform 0.25s, background 0.25s, color 0.25s, box-shadow 0.25s;
}
.btn-primary {
background: var(--moss-deep);
color: var(--bg);
box-shadow: var(--shadow-soft);
}
.btn-primary:hover {
background: var(--moss);
transform: translateY(-2px);
box-shadow: var(--shadow-med);
}
.btn-outline {
background: transparent;
color: var(--moss-deep);
border: 1.5px solid var(--moss-deep);
}
[data-theme="dark"] .btn-outline { color: var(--moss-deep); border-color: var(--moss-deep); }
.btn-outline:hover {
background: var(--moss-deep);
color: var(--bg);
transform: translateY(-2px);
}
.btn-ghost {
background: transparent;
color: var(--moss-deep);
padding: 12px 4px;
}
.btn-ghost:hover { color: var(--amber-deep); gap: 14px; }
[data-theme="dark"] .btn-ghost:hover { color: var(--amber); }
.btn-arrow::after { content: '→'; transition: transform 0.3s; }
.btn:hover .btn-arrow::after,
.btn-arrow:hover::after { transform: translateX(4px); }
.btn-accent {
background: var(--amber);
color: var(--moss-deep);
}
.btn-accent:hover {
background: var(--amber-soft);
transform: translateY(-2px);
}
/* =========================================================
SEKCJE
========================================================= */
section { padding: clamp(4rem, 9vw, 8rem) var(--gutter); }
.section-inner { max-width: var(--max-w); margin: 0 auto; }
.section-narrow { max-width: 820px; margin: 0 auto; }
.eyebrow {
font-family: var(--font-script);
font-size: 2rem;
line-height: 1.1;
color: var(--heather-deep); /* ciemniejszy wrzos – kontrast AA na jasnych tłach (np. sage-mist) */
margin-bottom: 0.4rem;
}
.eyebrow-tag {
display: inline-block;
font-size: 0.72rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--amber-deep);
font-weight: 600;
margin-bottom: 1rem;
position: relative;
padding-left: 28px;
}
[data-theme="dark"] .eyebrow-tag { color: var(--amber); }
.eyebrow-tag::before {
content: ''; position: absolute; left: 0; top: 50%;
width: 20px; height: 1px; background: currentColor;
transform: translateY(-50%);
}
h1.section-title, h2.section-title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(2rem, 5vw, 3.6rem);
line-height: 1.05;
color: var(--moss-deep);
letter-spacing: -0.01em;
margin-bottom: 1.4rem;
}
.section-title em {
font-style: italic;
color: var(--amber-deep);
}
[data-theme="dark"] .section-title em { color: var(--amber); }
.section-lead {
font-size: 1.18rem;
line-height: 1.7;
color: var(--ink-soft);
max-width: 660px;
margin-bottom: 2.5rem;
}
.section-body { font-size: 1.02rem; line-height: 1.78; color: var(--ink); margin-bottom: 1.2rem; }
.section-body strong { color: var(--moss-deep); font-weight: 600; }
/* =========================================================
MANIFEST (sekcja 3 kolumn)
========================================================= */
.three-pillars {
background: var(--bg-warm);
position: relative;
}
.three-pillars::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(to right, transparent, var(--sage), transparent);
}
.pillars-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(1.5rem, 4vw, 3rem);
margin-top: 3rem;
}
.pillar {
text-align: center;
padding: 2rem 1rem;
position: relative;
}
.pillar-num {
color: var(--heather-soft);
line-height: 0;
margin-bottom: 1.1rem;
transition: color 0.3s, transform 0.3s;
}
.pillar-num svg {
width: clamp(58px, 8vw, 78px);
height: clamp(58px, 8vw, 78px);
display: inline-block;
vertical-align: middle;
}
.pillar:hover .pillar-num {
color: var(--heather);
transform: rotate(-5deg);
}
.pillar h3 {
font-family: var(--font-display);
font-size: 1.7rem;
font-weight: 500;
color: var(--moss-deep);
margin-bottom: 0.8rem;
}
.pillar p {
font-size: 0.98rem;
line-height: 1.65;
color: var(--ink-soft);
max-width: 280px;
margin: 0 auto;
}
/* Strona główna – trzy filary: równe kolumny, treść wyśrodkowana w pionie
i spójna szerokość akapitu. Karty rozciągają się do jednej wysokości, więc
mimo różnej długości tekstów rząd jest zbalansowany (treść bez zmian). */
.pillars-grid--lead .pillar {
display: flex;
flex-direction: column;
justify-content: center;
}
.pillars-grid--lead .pillar p { max-width: 300px; }
/* =========================================================
CONTENT – ogólne układy treści
========================================================= */
.split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 6vw, 5rem);
align-items: center;
}
.split-img {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
background-size: cover; background-position: center;
box-shadow: var(--shadow-med);
border-radius: 4px;
}
.split-img::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(135deg, color-mix(in srgb, var(--moss) 18%, transparent), transparent 60%);
}
/* „O praktyce": gdy kolumna tekstu jest długa, zdjęcie rozciąga się na jej
wysokość (zamiast stałego 4/5 i pustej przestrzeni pod spodem). Tylko desktop
(układ 2-kolumnowy ≥961px); na mobile zostaje domyślny kadr. Tło wypełnia
cover – kadr centrowany; w razie potrzeby dostrój background-position. */
@media (min-width: 961px) {
.split--fill-img { align-items: stretch; }
.split--fill-img .split-img { aspect-ratio: auto; }
}
.feature-list { list-style: none; display: flex; flex-direction: column; gap: 1.4rem; margin-top: 1.6rem; }
.feature {
display: grid; grid-template-columns: 54px 1fr;
gap: 16px; align-items: flex-start;
}
.feature-icon {
width: 54px; height: 54px;
background: var(--moss);
border-radius: var(--blob-1);
display: grid; place-items: center;
color: var(--bg);
/* .zn-icon skaluje się od font-size rodzica (1.3rem poniżej) – ptaszek
wypada wtedy drobniejszy niż litery z ACF, więc dostaje własny rozmiar. */
font-size: 1.3rem;
flex-shrink: 0;
transition: transform 0.35s var(--ease), background 0.3s, border-radius 0.6s;
}
.feature-icon .zn-icon { width: 26px; height: 26px; }
.feature:hover .feature-icon {
transform: rotate(-10deg) scale(1.08);
background: var(--moss-deep);
}
.feature h4 {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 500;
color: var(--moss-deep);
margin-bottom: 0.3rem;
}
.feature p {
font-size: 0.96rem; line-height: 1.65;
color: var(--ink-soft);
}
/* Strona główna – lista „słowa / rysunki / liczby": dłuższe akapity,
więc lżejszy, mniej przytłaczający tekst (treść bez zmian). */
.feature-list--prose .feature { align-items: center; }
.feature-list--prose .feature h4 { margin-bottom: 0.2rem; }
.feature-list--prose .feature p { font-size: 0.9rem; line-height: 1.58; }
/* Ikonka jako litera/ułamek w szeryfowym foncie wyświetlanym */
.feature-icon--serif {
font-family: var(--font-display);
font-size: 1.85rem;
font-weight: 500;
line-height: 1;
}
/* =========================================================
GALERIA – Instagram-style + lightbox
========================================================= */
.gallery-wall {
background: var(--paper-aged);
position: relative;
overflow: hidden;
}
.gallery-grid-ig {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3px;
margin-top: 2.5rem;
}
.ig-item {
aspect-ratio: 1;
overflow: hidden;
position: relative;
cursor: zoom-in;
background: var(--sage-mist);
display: block;
border: none;
padding: 0;
}
.ig-item img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 0.55s var(--ease-out), filter 0.3s;
}
.ig-item:hover img { transform: scale(1.06); filter: brightness(0.88); }
.ig-item video {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform 0.55s var(--ease-out), filter 0.3s;
}
.ig-item:hover video { transform: scale(1.06); filter: brightness(0.88); }
.ig-play {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 50px; height: 50px; border-radius: 50%;
background: rgba(20, 17, 12, 0.5);
display: grid; place-items: center;
z-index: 3; pointer-events: none;
transition: background 0.25s;
}
.ig-item:hover .ig-play { background: rgba(20, 17, 12, 0.72); }
.ig-play::after {
content: ''; margin-left: 4px;
border-style: solid; border-width: 9px 0 9px 15px;
border-color: transparent transparent transparent rgba(250, 247, 238, 0.95);
}
.ig-item::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(to top, color-mix(in srgb, var(--moss-deep) 65%, transparent), transparent 50%);
opacity: 0;
transition: opacity 0.35s;
}
.ig-item:hover::after { opacity: 1; }
.ig-item .ig-cap {
position: absolute; bottom: 14px; left: 16px; right: 16px;
color: var(--bg);
font-family: var(--font-script);
font-size: 1.55rem;
line-height: 1.2;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.35s, transform 0.35s;
z-index: 2;
pointer-events: none;
}
.ig-item:hover .ig-cap { opacity: 1; transform: translateY(0); }
/* ─── LIGHTBOX ─── */
.lightbox {
position: fixed; inset: 0;
z-index: 1000;
background: rgba(20, 18, 14, 0.96);
backdrop-filter: blur(10px);
opacity: 0; visibility: hidden;
transition: opacity 0.35s, visibility 0.35s;
display: flex; flex-direction: column;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox-header {
display: flex; align-items: center; justify-content: space-between;
padding: 1rem 1.4rem;
color: rgba(250, 247, 238, 0.7);
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.1em;
flex-shrink: 0;
}
.lightbox-counter { letter-spacing: 0.18em; }
.lightbox-close {
background: transparent;
border: 1.5px solid rgba(250, 247, 238, 0.3);
width: 44px; height: 44px;
border-radius: 50%;
color: rgba(250, 247, 238, 0.9);
cursor: pointer;
display: grid; place-items: center;
font-size: 1.2rem;
transition: background 0.2s, border-color 0.2s, transform 0.25s;
}
.lightbox-close:hover {
background: rgba(250, 247, 238, 0.1);
border-color: rgba(250, 247, 238, 0.7);
transform: rotate(90deg);
}
.lightbox-scroller {
flex: 1;
overflow-y: auto;
scroll-snap-type: y mandatory;
scrollbar-width: thin;
scrollbar-color: rgba(250, 247, 238, 0.3) transparent;
-webkit-overflow-scrolling: touch;
}
.lightbox-scroller::-webkit-scrollbar { width: 6px; }
.lightbox-scroller::-webkit-scrollbar-track { background: transparent; }
.lightbox-scroller::-webkit-scrollbar-thumb {
background: rgba(250, 247, 238, 0.3);
border-radius: 999px;
}
.lightbox-frame {
min-height: 88vh;
scroll-snap-align: center;
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 1rem 1.4rem 3rem;
gap: 1rem;
}
.lightbox-frame img,
.lightbox-frame video {
max-width: min(95vw, 1100px);
max-height: 78vh;
width: auto; height: auto;
border-radius: 4px;
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.lightbox-frame video { background: #000; }
.lightbox-caption {
font-family: var(--font-script);
color: rgba(250, 247, 238, 0.9);
font-size: 1.5rem;
text-align: center;
max-width: 600px;
line-height: 1.3;
}
.lightbox-nav {
position: absolute;
top: 50%; transform: translateY(-50%);
width: 52px; height: 52px;
background: rgba(250, 247, 238, 0.08);
border: 1.5px solid rgba(250, 247, 238, 0.2);
border-radius: 50%;
color: rgba(250, 247, 238, 0.95);
cursor: pointer;
display: grid; place-items: center;
font-size: 1.6rem;
transition: background 0.2s, border-color 0.2s, transform 0.25s;
z-index: 2;
}
.lightbox-nav:hover {
background: rgba(250, 247, 238, 0.18);
border-color: rgba(250, 247, 238, 0.5);
transform: translateY(-50%) scale(1.08);
}
.lightbox-nav.prev { left: 24px; }
.lightbox-nav.next { right: 24px; }
@media (max-width: 720px) {
.lightbox-nav.prev { left: 12px; width: 44px; height: 44px; }
.lightbox-nav.next { right: 12px; width: 44px; height: 44px; }
}
/* Slider galerii – w sliderze */
.slider {
position: relative;
border-radius: 6px;
overflow: hidden;
box-shadow: var(--shadow-med);
}
.slider-track {
display: flex;
transition: transform 0.7s var(--ease-out);
}
.slide {
flex: 0 0 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--sage-mist);
position: relative;
}
.slide img {
width: 100%; height: 100%; object-fit: cover;
}
.slide-caption {
position: absolute; bottom: 0; left: 0; right: 0;
padding: 1.4rem 2rem 1.6rem;
background: linear-gradient(to top, color-mix(in srgb, var(--moss-deep) 85%, transparent), transparent);
color: var(--bg);
font-family: var(--font-display);
font-size: 1.2rem;
font-style: italic;
}
.slider-nav {
position: absolute; top: 50%; transform: translateY(-50%);
width: 44px; height: 44px;
background: color-mix(in srgb, var(--bg) 92%, transparent);
border: none;
border-radius: 50%;
cursor: pointer;
display: grid; place-items: center;
color: var(--moss-deep);
font-size: 1.4rem;
transition: background 0.2s, transform 0.2s;
z-index: 2;
}
.slider-nav:hover { background: var(--bg); transform: translateY(-50%) scale(1.05); }
.slider-nav.prev { left: 18px; }
.slider-nav.next { right: 18px; }
.slider-dots {
/* 16px odstępu przy 8px kropce = środki co 24px, czyli tyle, ile wynosi
rozszerzone pole dotyku poniżej. Przy 8px pola sąsiadów nachodziły. */
display: flex; justify-content: center; gap: 16px;
margin-top: 1.4rem;
}
.slider-dot {
position: relative;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--sage);
border: none; cursor: pointer;
transition: background 0.25s, transform 0.25s;
}
/* Kropka zostaje ośmiopikselowa, ale palec trafia w 24px. Pole rozszerzamy
pseudo-elementem wychodzącym poza przycisk, więc odstępy w rzędzie i sam
wygląd nie ruszają się ani o piksel. */
.slider-dot::after {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 24px; height: 24px;
transform: translate(-50%, -50%);
}
.slider-dot.active {
background: var(--moss-deep);
transform: scale(1.4);
}
/* =========================================================
PRZYRODNICZEK – strony journala
========================================================= */
.journal-spread {
background: var(--paper-aged);
position: relative;
}
.journal-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
margin-top: 3rem;
}
@media (min-width: 900px) {
.journal-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.journal-card {
background: var(--paper);
border-radius: 6px;
overflow: hidden;
box-shadow: var(--shadow-soft);
transform: rotate(0deg);
transition: transform 0.4s var(--ease), box-shadow 0.4s;
cursor: pointer;
}
.journal-card:nth-child(odd) { transform: rotate(-0.8deg); }
.journal-card:nth-child(even) { transform: rotate(0.6deg); }
.journal-card:hover {
transform: rotate(0deg) translateY(-6px);
box-shadow: var(--shadow-deep);
}
.journal-card img {
width: 100%; aspect-ratio: 4/3;
object-fit: cover;
}
.journal-meta {
padding: 1.2rem 1.4rem 1.4rem;
}
.journal-meta time {
display: block;
font-family: var(--font-script);
color: var(--amber-deep);
font-size: 1.4rem;
margin-bottom: 0.3rem;
}
[data-theme="dark"] .journal-meta time { color: var(--amber); }
.journal-meta h4 {
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 500;
color: var(--moss-deep);
margin-bottom: 0.4rem;
}
.journal-meta p { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.6; }
/* =========================================================
MRÓWKI RETRO-GAME
========================================================= */
#ants-stage {
position: absolute;
top: 0;
left: 0;
width: 100%;
pointer-events: none;
z-index: 5;
overflow: hidden;
}
/* Robaczki: tryb jasny → mrówki, tryb ciemny → świetliki (ten sam tor ruchu) */
.ant {
position: absolute;
width: calc(13px * var(--cscale, 1));
height: calc(20px * var(--cscale, 1));
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2736%27%20viewBox%3D%270%200%2024%2036%27%3E%3Cg%20stroke%3D%27%23362a1c%27%20stroke-width%3D%271.1%27%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M11%2014%20L3%209%27%2F%3E%3Cpath%20d%3D%27M11%2017%20L2%2017%27%2F%3E%3Cpath%20d%3D%27M11%2020%20L3%2025%27%2F%3E%3Cpath%20d%3D%27M13%2014%20L21%209%27%2F%3E%3Cpath%20d%3D%27M13%2017%20L22%2017%27%2F%3E%3Cpath%20d%3D%27M13%2020%20L21%2025%27%2F%3E%3Cpath%20d%3D%27M10%207%20L7%202%27%2F%3E%3Cpath%20d%3D%27M14%207%20L17%202%27%2F%3E%3C%2Fg%3E%3Cellipse%20cx%3D%2712%27%20cy%3D%277%27%20rx%3D%273%27%20ry%3D%272.8%27%20fill%3D%27%23362a1c%27%2F%3E%3Cellipse%20cx%3D%2712%27%20cy%3D%2715%27%20rx%3D%272.3%27%20ry%3D%273%27%20fill%3D%27%23362a1c%27%2F%3E%3Cellipse%20cx%3D%2712%27%20cy%3D%2725%27%20rx%3D%274%27%20ry%3D%276%27%20fill%3D%27%23362a1c%27%2F%3E%3C%2Fsvg%3E");
background-size: contain;
background-repeat: no-repeat;
opacity: 0.8;
filter: drop-shadow(0 1px 1px rgba(0,0,0,0.18));
animation: ant-wiggle 0.5s ease-in-out infinite;
}
@keyframes ant-wiggle {
0%, 100% { transform: rotate(var(--rot, 0deg)) scaleX(1); }
50% { transform: rotate(var(--rot, 0deg)) scaleX(0.93); }
}
/* tryb nocny – świetliki (Lampyridae): chrząszcz z latarką na końcu odwłoka */
[data-theme="dark"] .ant {
width: calc(15px * var(--cscale, 1));
height: calc(21px * var(--cscale, 1));
background-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2028%2040'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M11%207%20C%208%204,%206%203,%204%202'%20stroke='%231f1b14'%20stroke-width='1.1'%20fill='none'%20stroke-linecap='round'/%3E%3Cpath%20d='M17%207%20C%2020%204,%2022%203,%2024%202'%20stroke='%231f1b14'%20stroke-width='1.1'%20fill='none'%20stroke-linecap='round'/%3E%3Cg%20stroke='%231f1b14'%20stroke-width='1.1'%20stroke-linecap='round'%3E%3Cpath%20d='M9%2016%20L3%2013'/%3E%3Cpath%20d='M9%2021%20L2%2021'/%3E%3Cpath%20d='M9%2026%20L3%2030'/%3E%3Cpath%20d='M19%2016%20L25%2013'/%3E%3Cpath%20d='M19%2021%20L26%2021'/%3E%3Cpath%20d='M19%2026%20L25%2030'/%3E%3C/g%3E%3Cellipse%20cx='14'%20cy='8'%20rx='3.5'%20ry='3'%20fill='%231f1b14'/%3E%3Cpath%20d='M14%206%20C%208%206,%206%2010,%207%2014%20C%209%2016,%2019%2016,%2021%2014%20C%2022%2010,%2020%206,%2014%206%20Z'%20fill='%23c87a48'/%3E%3Cellipse%20cx='11.5'%20cy='11'%20rx='1.7'%20ry='2.3'%20fill='%236a3f28'/%3E%3Cellipse%20cx='16.5'%20cy='11'%20rx='1.7'%20ry='2.3'%20fill='%236a3f28'/%3E%3Cpath%20d='M8%2014%20C%206%2014,%206%2018,%207%2024%20C%208%2030,%2011%2033,%2014%2033%20C%2017%2033,%2020%2030,%2021%2024%20C%2022%2018,%2022%2014,%2020%2014%20C%2018%2013,%2010%2013,%208%2014%20Z'%20fill='%2336312a'/%3E%3Cpath%20d='M8.5%2015%20C%207%2018,%207.5%2026,%2010%2031'%20stroke='%23b59a62'%20stroke-width='1'%20fill='none'%20stroke-linecap='round'/%3E%3Cpath%20d='M19.5%2015%20C%2021%2018,%2020.5%2026,%2018%2031'%20stroke='%23b59a62'%20stroke-width='1'%20fill='none'%20stroke-linecap='round'/%3E%3Cpath%20d='M14%2015%20L%2014%2031'%20stroke='%231f1b14'%20stroke-width='0.9'/%3E%3Cellipse%20cx='14'%20cy='34.5'%20rx='4'%20ry='3.2'%20fill='%23cfe98a'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
border-radius: 0;
filter: none;
opacity: 0.96;
box-shadow: none;
transform: rotate(var(--rot, 0deg));
animation: none;
}
[data-theme="dark"] .ant::after {
content: '';
position: absolute;
left: 50%; bottom: -8%;
width: 58%; height: 42%;
transform: translateX(-50%);
border-radius: 50%;
background: radial-gradient(circle, rgba(220,255,150,0.95) 0%, rgba(190,240,120,0) 70%);
box-shadow:
0 0 calc(7px * var(--fglow, 1)) calc(2px * var(--fglow, 1)) rgba(208,248,152,0.5),
0 0 calc(15px * var(--fglow, 1)) calc(5px * var(--fglow, 1)) rgba(182,232,122,0.28);
animation: firefly-pulse 2.6s ease-in-out infinite;
animation-delay: var(--pulse-delay, 0s);
pointer-events: none;
}
@keyframes firefly-pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
/* warianty robaczków: chrząszcz + kowal bezskrzydły – ten sam wygląd w obu trybach */
.ant.beetle, [data-theme="dark"] .ant.beetle {
width: calc(15px * var(--cscale, 1)); height: calc(20px * var(--cscale, 1));
background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2028%2036%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%20%3Cpath%20d%3D%27M11%208%20C%209%204%2C%207%203%2C%205%202%27%20stroke%3D%27%23241c12%27%20stroke-width%3D%271.1%27%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%2F%3E%20%3Cpath%20d%3D%27M17%208%20C%2019%204%2C%2021%203%2C%2023%202%27%20stroke%3D%27%23241c12%27%20stroke-width%3D%271.1%27%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%2F%3E%20%3Cg%20stroke%3D%27%23241c12%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%3E%20%3Cpath%20d%3D%27M9%2015%20L3%2011%27%2F%3E%3Cpath%20d%3D%27M9%2020%20L2%2021%27%2F%3E%3Cpath%20d%3D%27M9%2025%20L3%2030%27%2F%3E%20%3Cpath%20d%3D%27M19%2015%20L25%2011%27%2F%3E%3Cpath%20d%3D%27M19%2020%20L26%2021%27%2F%3E%3Cpath%20d%3D%27M19%2025%20L25%2030%27%2F%3E%3C%2Fg%3E%20%3Cellipse%20cx%3D%2714%27%20cy%3D%278%27%20rx%3D%273%27%20ry%3D%272.6%27%20fill%3D%27%23241c12%27%2F%3E%20%3Cpath%20d%3D%27M14%209%20C%2010%209%2C%208.5%2011.5%2C%209%2014%20C%2011%2015.2%2C%2017%2015.2%2C%2019%2014%20C%2019.5%2011.5%2C%2018%209%2C%2014%209%20Z%27%20fill%3D%27%233c3326%27%2F%3E%20%3Cellipse%20cx%3D%2714%27%20cy%3D%2723%27%20rx%3D%277.2%27%20ry%3D%2710.2%27%20fill%3D%27%232d2a1f%27%2F%3E%20%3Cellipse%20cx%3D%2714%27%20cy%3D%2723%27%20rx%3D%277.2%27%20ry%3D%2710.2%27%20fill%3D%27none%27%20stroke%3D%27%2315120b%27%20stroke-width%3D%270.7%27%2F%3E%20%3Cpath%20d%3D%27M14%2014%20L%2014%2032%27%20stroke%3D%27%2315120b%27%20stroke-width%3D%271.1%27%2F%3E%20%3Cpath%20d%3D%27M9.6%2017%20C%208.6%2021%2C%209.2%2027%2C%2011.2%2031%27%20stroke%3D%27%235e5538%27%20stroke-width%3D%271%27%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%2F%3E%20%3Cpath%20d%3D%27M18.4%2017%20C%2019.4%2021%2C%2018.8%2027%2C%2016.8%2031%27%20stroke%3D%27%235e5538%27%20stroke-width%3D%271%27%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%2F%3E%20%3C%2Fsvg%3E");
}
.ant.firebug, [data-theme="dark"] .ant.firebug {
width: calc(14px * var(--cscale, 1)); height: calc(20px * var(--cscale, 1));
background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2028%2036%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%20%3Cpath%20d%3D%27M11%208%20C%209%204%2C%207%203%2C%205%202%27%20stroke%3D%27%2317110d%27%20stroke-width%3D%271.1%27%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%2F%3E%20%3Cpath%20d%3D%27M17%208%20C%2019%204%2C%2021%203%2C%2023%202%27%20stroke%3D%27%2317110d%27%20stroke-width%3D%271.1%27%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%2F%3E%20%3Cg%20stroke%3D%27%2317110d%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%3E%20%3Cpath%20d%3D%27M9%2015%20L3%2011%27%2F%3E%3Cpath%20d%3D%27M9%2020%20L2%2021%27%2F%3E%3Cpath%20d%3D%27M9%2025%20L3%2030%27%2F%3E%20%3Cpath%20d%3D%27M19%2015%20L25%2011%27%2F%3E%3Cpath%20d%3D%27M19%2020%20L26%2021%27%2F%3E%3Cpath%20d%3D%27M19%2025%20L25%2030%27%2F%3E%3C%2Fg%3E%20%3Cellipse%20cx%3D%2714%27%20cy%3D%277.5%27%20rx%3D%273%27%20ry%3D%272.6%27%20fill%3D%27%2317110d%27%2F%3E%20%3Cpath%20d%3D%27M14%209%20C%2010%209%2C%208.6%2011.5%2C%209%2014.5%20C%2011%2015.6%2C%2017%2015.6%2C%2019%2014.5%20C%2019.4%2011.5%2C%2018%209%2C%2014%209%20Z%27%20fill%3D%27%23c23a2c%27%2F%3E%20%3Cpath%20d%3D%27M10%2010.2%20C%2012%209.4%2C%2016%209.4%2C%2018%2010.2%27%20stroke%3D%27%2317110d%27%20stroke-width%3D%271.5%27%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%2F%3E%20%3Cellipse%20cx%3D%2714%27%20cy%3D%2723%27%20rx%3D%277.2%27%20ry%3D%2710.2%27%20fill%3D%27%23cb3d2d%27%2F%3E%20%3Cellipse%20cx%3D%2714%27%20cy%3D%2723%27%20rx%3D%277.2%27%20ry%3D%2710.2%27%20fill%3D%27none%27%20stroke%3D%27%237c241b%27%20stroke-width%3D%270.7%27%2F%3E%20%3Cpath%20d%3D%27M11%2015%20L%2017%2015%20L%2014%2019.5%20Z%27%20fill%3D%27%2317110d%27%2F%3E%20%3Cpath%20d%3D%27M14%2015%20L%2014%2032%27%20stroke%3D%27%2317110d%27%20stroke-width%3D%271.5%27%2F%3E%20%3Ccircle%20cx%3D%2710.4%27%20cy%3D%2724%27%20r%3D%272.1%27%20fill%3D%27%2317110d%27%2F%3E%20%3Ccircle%20cx%3D%2717.6%27%20cy%3D%2724%27%20r%3D%272.1%27%20fill%3D%27%2317110d%27%2F%3E%20%3Cpath%20d%3D%27M9.2%2029%20C%2011%2032.6%2C%2017%2032.6%2C%2018.8%2029%20C%2017%2031.8%2C%2011%2031.8%2C%209.2%2029%20Z%27%20fill%3D%27%2317110d%27%2F%3E%20%3C%2Fsvg%3E");
}
/* warianty nie mają latarki świetlika */
[data-theme="dark"] .ant.beetle::after, [data-theme="dark"] .ant.firebug::after { content: none; }
/* ─── KACZKI – rodzina krzyżówek: pływają (nogi wiosłują pod wodą), kaczątka brykają, mama kwacze ─── */
.duck-pond {
position: relative;
height: 208px; /* zapas u góry na wyskakujące „KWA" */
overflow: hidden;
pointer-events: none;
}
.pond-water {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 92px; /* dwa razy głębsza woda */
z-index: 4;
background: linear-gradient(to bottom, rgba(132,162,150,0.42), rgba(94,124,114,0.30));
border-top: 2px solid rgba(245,242,232,0.42);
}
.pond-rocks { position: absolute; bottom: 0; z-index: 1; line-height: 0; } /* kamyki na dnie (pod wodą) */
.pond-rocks svg { display: block; }
.pond-foliage { position: absolute; bottom: 0; z-index: 2; line-height: 0; transform-origin: 50% 100%; }
.pond-foliage.pond-front { z-index: 5; }
.pond-foliage svg { display: block; }
.foliage { transform-origin: 50% 100%; animation: reed-sway 6s ease-in-out infinite; }
.duck-fam { position: absolute; left: 0; right: 0; bottom: 58px; height: 100px; z-index: 3; }
.duck { position: absolute; left: 0; bottom: 0; will-change: transform; }
.duck.duckling { bottom: 16px; } /* kaczątka pływają nieco wyżej (lżejsze) */
.duck-bob { display: block; transform-origin: 50% 80%; }
.duckling svg { width: 48px; height: auto; display: block; }
.duck-mama svg { width: 112px; height: auto; display: block; }
.mduck-head { transform-box: view-box; transform-origin: 104px 63px; }
.mbeak-lower { transform-box: view-box; transform-origin: 133px 36px; }
.leg { transform-box: fill-box; transform-origin: 50% 8%; }
.leg-a { animation: duck-paddle 0.9s ease-in-out infinite; }
.leg-b { animation: duck-paddle 0.9s ease-in-out infinite; animation-delay: -0.45s; }
@keyframes duck-paddle {
0%, 100% { transform: rotate(-20deg); }
50% { transform: rotate(16deg); }
}
/* ważka na lewym liściu */
.dragonfly { position: absolute; z-index: 6; line-height: 0; }
.dragonfly svg { display: block; }
.dfw { transform-box: fill-box; transform-origin: 50% 50%; }
/* komiksowe „KWA" – wyskakują ze strony kaczki, różne rozmiary + rotacja, górna warstwa */
.duck-bubble { position: absolute; z-index: 20; pointer-events: none; width: 0; height: 0; }
.kwa-pop {
position: absolute;
font-family: var(--font-body), sans-serif; font-weight: 900; font-style: italic; text-transform: uppercase;
letter-spacing: .01em; line-height: 1; white-space: nowrap;
-webkit-text-stroke: 1.6px #2c2620; paint-order: stroke fill;
filter: drop-shadow(2px 3px 0 rgba(44,38,32,.55));
opacity: 0; transform-origin: 50% 100%;
}
.kwa1 { left: -120px; top: -28px; font-size: 1.5rem; color: #2b6cb0; }
.kwa2 { left: -26px; top: -56px; font-size: 2.25rem; color: #1c4f8a; }
.kwa3 { left: 80px; top: -30px; font-size: 1.8rem; color: #3d8ed9; }
@keyframes reed-sway {
0%, 100% { transform: rotate(-2.5deg); }
50% { transform: rotate(2.5deg); }
}
@media (prefers-reduced-motion: reduce) {
.duck-pond { display: none; }
}
/* ─── Zdjęcie 5:4 (sekcja „o mnie") ─── */
.photo-cloud {
display: block; width: 100%; height: 100%; object-fit: cover;
}
.photo-cloud-wrap {
aspect-ratio: 4 / 5;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 16px 32px rgba(12, 9, 5, 0.3);
}
/* Sekcja „o mnie": zdjęcie zasłania wędrujące mrówki – chowają się pod nie.
#ants-stage ma z-index:5 i leży NAD treścią każdej (izolowanej) sekcji, więc
samo z-index na zdjęciu nie wystarcza. Znosimy izolację tej jednej sekcji i
kontekst stackingu na .section-inner, dzięki czemu zdjęcie trafia do głównego
kontekstu ponad warstwę mrówek. Tło i tekst sekcji zostają pod mrówkami –
nadal po nich łażą, znikają dopiero pod zdjęciem. */
.ants-behind-photo {
isolation: auto;
position: relative;
background: none !important;
}
.ants-behind-photo > .section-inner { z-index: auto; }
.ants-behind-photo .photo-cloud-wrap { position: relative; z-index: 6; }
/* Tło sekcji – zdjęcie z blur + przyciemnienie */
.ants-behind-photo > .section-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
z-index: -1;
}
.ants-behind-photo > .section-bg::after {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.55);
}
/* jasny tekst na przyciemnionym tle – oba motywy */
.ants-behind-photo .section-title,
.ants-behind-photo h2,
.ants-behind-photo h3,
.ants-behind-photo h4 { color: #F4EFE3; }
.ants-behind-photo .section-title em,
.ants-behind-photo em { color: var(--amber-soft); }
.ants-behind-photo .eyebrow { color: var(--amber-soft); }
.ants-behind-photo .section-body,
.ants-behind-photo p { color: rgba(244, 239, 227, 0.9); }
.ants-behind-photo .section-body strong { color: var(--amber-soft); }
.ants-behind-photo .btn-ghost { color: #F4EFE3; border-color: rgba(244, 239, 227, 0.4); }
.ants-behind-photo .btn-ghost:hover { border-color: #F4EFE3; background: rgba(244, 239, 227, 0.1); }
/* ─── PRZYRODNICZEK – przewracana książka (flip-book) ─── */
.journal-section { padding: clamp(1rem, 3vw, 2rem) var(--gutter) clamp(3rem, 7vw, 5.5rem); display: flex; justify-content: center; }
/* Otwarta księga – dwie strony obok siebie (rozkładówka). Szerokość = dwie strony. */
.journal-book {
position: relative; width: min(900px, 94vw); aspect-ratio: var(--jb-ratio, 1.414);
margin: 0 auto; perspective: 2800px; cursor: pointer;
--jb-bg: var(--paper-aged); /* kolor "brakujących" stron (okładki) – z trybu */
-webkit-tap-highlight-color: transparent;
}
.journal-book > img { display: none; }
/* tło widoczne tam, gdzie strony brak: lewa połówka przy zamkniętej okładce,
prawa połówka po dojściu do okładki tylnej */
.journal-book::before, .journal-book::after {
content: ''; position: absolute; top: 0; bottom: 0; width: 50%; z-index: 0;
background: var(--jb-bg); box-shadow: inset 0 0 70px rgba(0,0,0,.07); border-radius: 2px;
}
.journal-book::before { left: 0; }
.journal-book::after { right: 0; }
.jb-leaves { position: absolute; inset: 0; transform-style: preserve-3d; z-index: 1; }
.jb-leaf {
position: absolute; top: 0; bottom: 0; left: 50%; width: 50%;
transform-origin: left center; transform-style: preserve-3d;
transition: transform .9s cubic-bezier(.42, .04, .24, 1);
}
.jb-leaf.flip { transform: rotateY(-180deg); }
.jb-face {
position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
background-repeat: no-repeat; background-color: var(--jb-bg); overflow: hidden;
box-shadow: var(--shadow-soft);
}
.jb-back { transform: rotateY(180deg); }
/* połówki rozkładówki: ten sam skan, pokazany w połowie szerokości */
.jb-face.half-left { background-size: 200% 100%; background-position: left center; }
.jb-face.half-right { background-size: 200% 100%; background-position: right center; }
.jb-face.full { background-size: contain; background-position: center center; }
.jb-face.jb-blank { background: var(--jb-bg); }
/* delikatny cień przy grzbiecie + cień przewracanej kartki */
.jb-front::after, .jb-back::after {
content: ''; position: absolute; inset: 0; pointer-events: none; transition: opacity .45s; opacity: 0;
}
.jb-front::after { background: linear-gradient(90deg, rgba(30,22,10,0) 70%, rgba(30,22,10,.28)); }
.jb-back::after { background: linear-gradient(270deg, rgba(30,22,10,0) 70%, rgba(30,22,10,.28)); }
.jb-leaf.turning .jb-front::after, .jb-leaf.turning .jb-back::after { opacity: 1; }
.jb-nav {
position: absolute; top: 0; bottom: 0; width: 48px; z-index: 60; border: none; background: transparent;
cursor: pointer; display: grid; place-items: center; opacity: 0; transition: opacity .25s;
}
.journal-book:hover .jb-nav, .journal-book:focus-within .jb-nav { opacity: 1; }
/* Na dotyku nie ma hovera, więc strzałki nie miały jak się pokazać - książkę
dawało się przewracać tylko stuknięciem w niewidoczną połowę kadru. */
@media (hover: none) {
.jb-nav { opacity: 1; }
}
.jb-prev { left: 0; } .jb-next { right: 0; }
.jb-nav span { width: 38px; height: 38px; border-radius: 50%; background: rgba(20,17,12,.42); color: #faf7ee; display: grid; place-items: center; font-size: 1.5rem; line-height: 1; }
.jb-nav .zn-icon { width: 20px; height: 20px; }
.jb-nav[disabled] { opacity: 0 !important; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .jb-leaf { transition: none; } }
/* =========================================================
OPINIE
========================================================= */
.quotes { background: var(--moss-deep); color: var(--bg); }
.quotes .section-title { color: var(--bg); }
.quotes .section-title em { color: var(--amber-soft); }
.quotes .eyebrow { color: var(--heather-soft); }
.quotes-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.4rem;
margin-top: 3rem;
}
.quote-card {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 4px 28px 6px 22px;
padding: 2rem 1.8rem;
position: relative;
transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.quote-card:hover {
background: rgba(255,255,255,0.08);
border-color: rgba(228, 176, 116, 0.3);
transform: translateY(-4px);
}
.quote-card::before {
content: '“';
position: absolute;
top: -10px; left: 24px;
font-family: var(--font-display);
font-style: italic;
font-size: 5.5rem;
color: var(--amber);
line-height: 1;
}
.quote-card p {
font-family: var(--font-display);
font-size: 1.15rem;
line-height: 1.55;
font-style: italic;
color: rgba(255,255,255,0.92);
margin-bottom: 1.4rem;
padding-top: 0.8rem;
}
.quote-author {
display: flex; align-items: center; gap: 12px;
padding-top: 1rem;
border-top: 1px solid rgba(255,255,255,0.1);
}
.quote-avatar {
width: 40px; height: 40px;
border-radius: var(--blob-1);
background: var(--amber);
display: grid; place-items: center;
color: var(--moss-deep);
font-weight: 600;
font-size: 0.85rem;
}
.quote-name { font-size: 0.95rem; color: var(--amber-soft); font-weight: 500; }
.quote-meta { font-size: 0.78rem; color: rgba(255,255,255,0.5); margin-top: 2px; }
/* =========================================================
CTA – wezwanie do działania
========================================================= */
.cta-band {
background:
linear-gradient(135deg, color-mix(in srgb, var(--moss-deep) 92%, transparent), color-mix(in srgb, var(--moss) 85%, transparent)),
var(--moss-deep);
color: var(--bg);
text-align: center;
padding: clamp(4rem, 8vw, 6rem) var(--gutter);
position: relative;
overflow: hidden;
}
.cta-band::before, .cta-band::after {
content: '';
position: absolute;
border-radius: var(--blob-2);
background: color-mix(in srgb, var(--amber) 8%, transparent);
pointer-events: none;
}
.cta-band::before {
width: 380px; height: 380px;
top: -120px; left: -100px;
}
.cta-band::after {
width: 440px; height: 440px;
bottom: -150px; right: -130px;
border-radius: var(--blob-4);
}
.cta-band h2 {
font-family: var(--font-display);
font-size: clamp(2rem, 5vw, 3.4rem);
font-weight: 400;
margin-bottom: 1rem;
line-height: 1.1;
position: relative;
z-index: 1;
}
.cta-band h2 em { color: var(--amber-soft); font-style: italic; }
.cta-band p { font-size: 1.1rem; max-width: 580px; margin: 0 auto 2rem; color: rgba(255,255,255,0.82); position: relative; z-index: 1; }
.cta-band .btn-primary {
background: var(--amber);
color: var(--moss-deep);
position: relative;
z-index: 1;
}
.cta-band .btn-primary:hover { background: var(--amber-soft); }
.urgency-tick {
display: inline-flex; align-items: center; gap: 8px;
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--amber-soft);
margin-bottom: 1.4rem;
position: relative;
z-index: 1;
}
.urgency-tick::before {
content: ''; width: 8px; height: 8px;
border-radius: 50%; background: var(--amber);
animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(228,176,116,0.5); }
50% { opacity: 0.75; transform: scale(1.15); box-shadow: 0 0 0 8px rgba(228,176,116,0); }
}
/* =========================================================
FORMULARZ NEWSLETTER
========================================================= */
.newsletter-form { display: flex; flex-direction: column; gap: 12px; }
.newsletter-form .input-row { display: flex; gap: 10px; }
.newsletter-form input {
flex: 1;
padding: 14px 18px;
border: 1.5px solid var(--line-strong);
background: var(--paper);
border-radius: 999px;
font-family: var(--font-body);
font-size: 1rem;
color: var(--ink);
transition: border-color 0.2s;
}
.newsletter-form input:focus { border-color: var(--moss); }
.newsletter-form button {
background: var(--moss-deep);
color: var(--bg);
border: none;
padding: 14px 24px;
border-radius: 999px;
font-family: var(--font-body);
font-size: 0.92rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
}
.newsletter-form button:hover { background: var(--moss); }
.newsletter-note { font-size: 0.78rem; color: var(--ink-soft); }
/* ── Newsletter – zapis w karcie, wyśrodkowany (newsletter.html + index.html) ── */
.nl-signup {
max-width: 560px;
margin: clamp(3rem, 7vw, 5rem) auto;
padding: clamp(2.4rem, 6vw, 3.6rem);
text-align: center;
background: var(--bg-warm);
border: 1px solid var(--line);
border-radius: 16px;
box-shadow: var(--shadow-soft);
}
.nl-signup .eyebrow-tag { margin-bottom: 0.9rem; }
.nl-signup-title {
font-family: var(--font-display);
font-size: clamp(1.9rem, 4vw, 2.6rem);
font-weight: 500;
color: var(--moss-deep);
line-height: 1.15;
margin: 0 0 0.8rem;
}
.nl-signup-sub {
color: var(--ink-soft);
line-height: 1.6;
max-width: 42ch;
margin: 0 auto 1.8rem;
}
.nl-signup-form {
max-width: 400px;
margin: 0 auto;
align-items: center;
}
.nl-signup-form .input-row { width: 100%; }
.nl-signup-form .newsletter-note { text-align: center; margin-top: 2px; }
@media (max-width: 460px) {
.nl-signup-form .input-row { flex-direction: column; }
.nl-signup-form .input-row button { width: 100%; }
}
/* =========================================================
STOPKA
========================================================= */
footer {
background: var(--moss-deep);
color: color-mix(in srgb, var(--bg) 70%, transparent);
padding: 4rem var(--gutter) 1.6rem;
position: relative;
}
[data-theme="dark"] footer {
background: var(--bg-warm);
color: var(--ink-soft);
}
.footer-inner { max-width: var(--max-w); margin: 0 auto; }
.footer-quote {
text-align: center;
font-family: var(--font-display);
font-style: italic;
font-size: clamp(1.2rem, 2.6vw, 1.7rem);
color: var(--amber-soft);
line-height: 1.5;
max-width: 720px;
margin: 0 auto 2.8rem;
padding: 0 1rem;
}
[data-theme="dark"] .footer-quote { color: var(--amber); }
.footer-quote-author {
display: block;
font-family: var(--font-body);
font-style: normal;
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: color-mix(in srgb, var(--amber-soft) 60%, transparent);
margin-top: 1rem;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 2.5rem;
margin-bottom: 2.6rem;
}
.footer-brand-text {
font-family: var(--font-display);
font-size: 1.4rem;
color: var(--bg);
margin-bottom: 0.4rem;
}
[data-theme="dark"] .footer-brand-text { color: var(--ink); }
.footer-brand-tag {
font-family: var(--font-script);
color: var(--amber-soft);
font-size: 1.5rem;
line-height: 1;
margin-bottom: 1rem;
}
[data-theme="dark"] .footer-brand-tag { color: var(--amber); }
.footer-col h2 {
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--amber-soft);
font-weight: 600;
margin-bottom: 1rem;
}
[data-theme="dark"] .footer-col h2 { color: var(--amber); }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col a {
color: color-mix(in srgb, var(--bg) 65%, transparent);
text-decoration: none;
font-size: 0.92rem;
transition: color 0.2s;
}
.footer-col a:hover { color: var(--amber-soft); }
[data-theme="dark"] .footer-col a { color: var(--ink-soft); }
[data-theme="dark"] .footer-col a:hover { color: var(--amber); }
.footer-symbols {
display: flex; flex-wrap: wrap; justify-content: center;
gap: 1.6rem; align-items: center;
padding: 1.6rem 0;
border-top: 1px solid color-mix(in srgb, var(--bg) 8%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--bg) 8%, transparent);
margin-bottom: 1.4rem;
}
[data-theme="dark"] .footer-symbols {
border-color: var(--line);
}
.symbol-item {
display: flex; align-items: center; gap: 10px;
font-size: 0.78rem;
color: color-mix(in srgb, var(--bg) 62%, transparent);
letter-spacing: 0.04em;
}
[data-theme="dark"] .symbol-item { color: var(--ink-soft); }
.symbol-svg {
width: 44px; height: 30px;
flex-shrink: 0;
border-radius: 3px;
overflow: hidden;
}
.footer-bottom {
display: flex; justify-content: space-between; align-items: center;
font-size: 0.78rem;
color: color-mix(in srgb, var(--bg) 45%, transparent);
flex-wrap: wrap;
gap: 1rem;
}
[data-theme="dark"] .footer-bottom { color: var(--ink-soft); }
/* =========================================================
PAGE HEADER
========================================================= */
.page-header {
padding-top: calc(var(--nav-h) + clamp(3rem, 6vw, 5rem));
padding-bottom: clamp(3rem, 6vw, 5rem);
padding-left: var(--gutter);
padding-right: var(--gutter);
background: linear-gradient(180deg, var(--bg-warm), var(--bg));
text-align: center;
position: relative;
overflow: hidden;
}
.page-header::after {
content: '';
position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(to right, transparent, var(--sage), transparent);
}
.page-header h1 {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(2.4rem, 6vw, 4.4rem);
line-height: 1.05;
color: var(--moss-deep);
margin-bottom: 1rem;
}
.page-header h1 em { color: var(--amber-deep); font-style: italic; }
[data-theme="dark"] .page-header h1 em { color: var(--amber); }
.page-header p {
max-width: 640px;
margin: 0 auto;
font-size: 1.15rem;
color: var(--ink-soft);
line-height: 1.6;
}
/* Prose block */
.prose {
max-width: 760px;
margin: 0 auto;
}
.prose h2 {
font-family: var(--font-display);
font-size: clamp(1.7rem, 3vw, 2.4rem);
font-weight: 500;
color: var(--moss-deep);
margin: 2.6rem 0 1rem;
line-height: 1.15;
}
.prose h3 {
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 500;
color: var(--moss);
margin: 1.8rem 0 0.6rem;
}
.prose p {
margin-bottom: 1.2rem;
line-height: 1.78;
font-size: 1.05rem;
}
.prose p.lead {
font-size: 1.25rem;
line-height: 1.6;
color: var(--moss-deep);
font-weight: 500;
}
.prose ul, .prose ol { padding-left: 1.4rem; margin-bottom: 1.4rem; }
.prose ul li, .prose ol li { margin-bottom: 0.5rem; line-height: 1.7; }
.prose ul li::marker { color: var(--amber); }
.prose blockquote {
border-left: 3px solid var(--amber);
padding: 0.4rem 0 0.4rem 1.4rem;
margin: 2rem 0;
font-family: var(--font-display);
font-style: italic;
font-size: 1.3rem;
line-height: 1.5;
color: var(--moss-deep);
}
.prose a:not(.btn) {
color: var(--moss-deep);
text-decoration: underline;
text-decoration-color: var(--amber);
text-underline-offset: 4px;
transition: color 0.2s;
}
.prose a:not(.btn):hover { color: var(--amber-deep); }
[data-theme="dark"] .prose a:not(.btn):hover { color: var(--amber); }
.callout {
background: color-mix(in srgb, var(--moss) 10%, var(--bg-warm));
border-radius: 4px 28px 28px 4px;
padding: 1.6rem 2rem;
margin: 2rem 0;
}
.callout strong { color: var(--moss-deep); }
/* =========================================================
OFERTA – tabele i pakiety
========================================================= */
.offer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.4rem;
margin: 2.5rem 0;
}
.offer-card {
background: var(--paper);
border-radius: 6px 36px 8px 28px;
padding: 2rem 1.8rem;
box-shadow: var(--shadow-soft);
border: 1px solid var(--line);
transition: transform 0.3s var(--ease), box-shadow 0.3s, border-radius 0.4s;
position: relative;
}
.offer-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-med);
border-radius: 24px 6px 30px 8px;
}
.offer-tag {
display: inline-block;
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--amber-deep);
font-weight: 600;
margin-bottom: 0.6rem;
}
[data-theme="dark"] .offer-tag { color: var(--amber); }
.offer-card h3 {
font-family: var(--font-display);
font-size: 1.7rem;
font-weight: 500;
color: var(--moss-deep);
margin-bottom: 0.4rem;
}
.offer-duration {
font-family: var(--font-script);
color: var(--heather);
font-size: 1.4rem;
line-height: 1;
margin-bottom: 1rem;
}
.offer-price {
font-size: 1.8rem;
color: var(--moss-deep);
font-weight: 600;
margin: 1.2rem 0 0.4rem;
font-family: var(--font-display);
}
.offer-price-unit {
font-size: 0.85rem; color: var(--ink-soft);
font-weight: 400;
}
.offer-card ul {
list-style: none;
margin: 1rem 0 1.4rem;
font-size: 0.94rem;
line-height: 1.6;
}
.offer-card ul li {
padding: 0.4rem 0;
padding-left: 22px;
position: relative;
color: var(--ink);
}
.offer-card ul li::before {
content: '✿';
position: absolute; left: 0; top: 0.45rem;
color: var(--amber);
font-size: 0.85rem;
}
.offer-card.highlight {
background: var(--moss-deep);
color: var(--bg);
}
.offer-card.highlight h3,
.offer-card.highlight .offer-price { color: var(--bg); }
.offer-card.highlight ul li { color: color-mix(in srgb, var(--bg) 88%, transparent); }
.offer-card.highlight ul li::before { color: var(--amber-soft); }
.offer-card.highlight .offer-tag { color: var(--amber-soft); }
.offer-card.highlight .offer-duration { color: var(--heather-soft); }
.offer-card.highlight .offer-price-unit { color: color-mix(in srgb, var(--bg) 70%, transparent); }
/* Kalendarz */
.cal-card {
background: var(--paper);
border-radius: 24px;
padding: 2rem;
box-shadow: var(--shadow-soft);
width: 100%;
border: 1px solid var(--line);
}
.cal-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 1.4rem;
}
.cal-month-title {
font-family: var(--font-display);
font-size: 1.5rem;
color: var(--moss-deep);
text-transform: capitalize;
}
.cal-prev, .cal-next {
background: none;
border: 1.5px solid var(--sage);
color: var(--moss-deep);
width: 44px; height: 44px;
border-radius: 50%;
cursor: pointer;
font-size: 1.2rem;
display: grid; place-items: center;
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.cal-prev:hover, .cal-next:hover {
background: var(--moss-deep);
color: var(--bg);
border-color: var(--moss-deep);
}
.cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 5px;
}
.cal-day-label {
text-align: center;
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--moss);
font-weight: 600;
padding: 8px 0;
}
.cal-day {
aspect-ratio: 1;
display: grid; place-items: center;
border-radius: 12px;
font-size: 0.92rem;
color: var(--ink);
cursor: default;
position: relative;
transition: background 0.18s, color 0.18s, border-radius 0.4s;
}
.cal-day.cal-empty { cursor: default; }
.cal-day.cal-past { color: color-mix(in srgb, var(--ink) 30%, transparent); }
.cal-day.has-class {
background: var(--moss);
color: var(--bg);
font-weight: 600;
cursor: pointer;
}
.cal-day.has-class:hover {
background: var(--moss-deep);
border-radius: 50%;
}
.cal-day.has-class::after {
content: '';
position: absolute;
bottom: 5px;
width: 5px; height: 5px;
border-radius: 50%;
background: var(--amber-soft);
}
.cal-day.today {
border: 2px solid var(--amber);
color: var(--amber-deep);
font-weight: 600;
}
[data-theme="dark"] .cal-day.today { color: var(--amber); }
.cal-info {
margin-top: 1.2rem;
padding: 0.8rem 1rem;
background: var(--bg-warm);
border-radius: 12px;
color: var(--moss-deep);
font-size: 0.94rem;
min-height: 30px;
font-weight: 500;
}
/* =========================================================
KOMENTARZE
========================================================= */
.comments-box {
margin-top: 3rem;
padding: 2rem;
background: var(--bg-warm);
border-radius: 6px 36px 6px 36px;
}
.comments-box h3 {
font-family: var(--font-display);
font-size: 1.5rem;
color: var(--moss-deep);
margin-bottom: 1rem;
}
.comment {
padding: 1.2rem 0;
border-bottom: 1px solid var(--line);
}
.comment:last-of-type { border-bottom: none; }
.comment-author {
font-weight: 600;
color: var(--moss-deep);
margin-bottom: 0.2rem;
font-size: 0.95rem;
}
.comment-time {
font-size: 0.78rem;
color: var(--ink-soft);
margin-bottom: 0.5rem;
}
.comment-body { font-size: 0.95rem; line-height: 1.6; color: var(--ink); }
.comment-form {
margin-top: 1.5rem;
display: flex; flex-direction: column; gap: 10px;
}
.comment-form input,
.comment-form textarea {
padding: 12px 16px;
border: 1.5px solid var(--line-strong);
background: var(--paper);
border-radius: 12px;
font-family: var(--font-body);
font-size: 0.95rem;
transition: border-color 0.2s;
color: var(--ink);
}
.comment-form input:focus,
.comment-form textarea:focus { border-color: var(--moss); }
.comment-form textarea { min-height: 100px; resize: vertical; }
/* ── Anonimowy feedback (kontakt.html) – wymuszenie czytelności w dark mode ── */
#anon-msg {
background: var(--paper) !important;
color: var(--ink) !important;
}
#anon-msg::placeholder {
color: var(--ink-soft) !important;
opacity: 1;
}
/* =========================================================
BADGE
========================================================= */
.badge {
display: inline-flex; align-items: center; gap: 8px;
background: var(--sage-mist);
color: var(--moss-deep);
padding: 6px 14px;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.04em;
}
.badge.warm { background: var(--amber-warm); color: var(--amber-deep); }
[data-theme="dark"] .badge.warm { color: var(--amber); }
/* =========================================================
RESPONSYWNOŚĆ
========================================================= */
@media (max-width: 960px) {
.hero { grid-template-columns: 1fr; }
.hero-visual { min-height: 56vh; order: -1; }
.hero-text { padding-top: 2rem; }
.split { grid-template-columns: 1fr; }
.split-img { aspect-ratio: 16/12; }
.pillars-grid { grid-template-columns: 1fr; }
.quotes-grid { grid-template-columns: 1fr; }
.gallery-grid-ig { grid-template-columns: repeat(2, 1fr); }
.menu-overlay-inner { grid-template-columns: 1fr; }
.menu-aside { padding: 1rem 0 2rem; }
}
@media (max-width: 720px) {
.brand-tagline { display: none; }
.nav-cta { display: none; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
.footer-bottom { flex-direction: column; align-items: flex-start; }
.hero-title { font-size: clamp(2.4rem, 12vw, 4rem); }
.gallery-grid-ig { grid-template-columns: 1fr 1fr; }
.menu-btn { padding: 9px 14px; }
}
/* ─── DOC CARD ─── */
.doc-card {
display: flex;
align-items: center;
gap: 1.2rem;
padding: 1.25rem 1.5rem;
background: var(--heather-mist);
border: 1px solid var(--heather-soft);
border-radius: 10px;
margin-bottom: 2.5rem;
}
[data-theme="dark"] .doc-card {
background: color-mix(in srgb, var(--heather-deep) 25%, var(--bg));
border-color: color-mix(in srgb, var(--heather) 40%, transparent);
}
.doc-card-icon {
flex-shrink: 0;
width: 2.8rem;
height: 2.8rem;
color: var(--heather);
}
.doc-card-icon svg { width: 100%; height: 100%; }
.doc-card-body { flex: 1; min-width: 0; }
.doc-card-title {
font-weight: 600;
font-size: 1.05rem;
color: var(--ink);
margin-bottom: 0.25rem;
}
.doc-card-meta {
font-size: 0.88rem;
color: var(--ink-soft);
line-height: 1.5;
}
.doc-card-btn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1.1rem;
background: var(--heather);
color: #fff;
border: none;
border-radius: 6px;
font-family: var(--font-body);
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
transition: background 0.18s;
white-space: nowrap;
}
.doc-card-btn svg { width: 1em; height: 1em; }
.doc-card-btn:hover { background: var(--heather-deep); }
@media (max-width: 600px) {
.doc-card { flex-wrap: wrap; }
.doc-card-btn { width: 100%; justify-content: center; }
}
/* Lista plików do pobrania (regulamin) – każdy plik to jeden .doc-card */
.downloads-list { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-direction: column; gap: 1rem; }
.downloads-list .doc-card { margin-bottom: 0; }
.downloads-list .doc-card-btn { text-decoration: none; }
/* ─── PDF MODAL ─── */
.pdf-modal {
position: fixed;
inset: 0;
z-index: 9000;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.pdf-modal[hidden] { display: none; }
.pdf-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(3px);
}
.pdf-modal-box {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
width: min(860px, 100%);
height: min(90vh, 960px);
background: var(--paper);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 48px rgba(0,0,0,0.35);
}
[data-theme="dark"] .pdf-modal-box { background: #222; }
.pdf-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.85rem 1.2rem;
background: var(--moss-deep);
color: #fff;
flex-shrink: 0;
}
.pdf-modal-title {
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pdf-modal-actions { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.pdf-modal-download {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.45rem 0.9rem;
background: rgba(255,255,255,0.15);
color: #fff;
border-radius: 5px;
font-size: 0.85rem;
font-family: var(--font-body);
text-decoration: none;
transition: background 0.15s;
}
.pdf-modal-download svg { width: 1em; height: 1em; }
.pdf-modal-download:hover { background: rgba(255,255,255,0.28); }
.pdf-modal-close {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
background: transparent;
border: none;
color: #fff;
cursor: pointer;
border-radius: 4px;
transition: background 0.15s;
}
.pdf-modal-close svg { width: 1.2em; height: 1.2em; }
.pdf-modal-close:hover { background: rgba(255,255,255,0.2); }
.pdf-modal-body { flex: 1; overflow: hidden; }
.pdf-modal-frame {
width: 100%;
height: 100%;
border: none;
display: block;
}
/* =========================================================
OFERTA – strona wyjściowa: tło nagłówka, ścieżki, plakietki
========================================================= */
/* Opcjonalne zdjęcie w tle DOWOLNEJ sekcji (np. nagłówek „oferta dla dzieci") –
bardzo subtelne, zawsze pod istniejącą treścią. PRAWDZIWY element (zn_bg_layer()
w helpers.php), nie ::before – niektóre sekcje (np. .cta-band) same używają
::before/::after na własne dekoracje, więc pseudo-element by z nimi kolidował.
Specyficzność klasy (0,1,0) bije `section > * { position:relative }` (0,0,1),
więc position:absolute działa mimo tamtej globalnej reguły. */
.zn-bg-layer {
position: absolute;
inset: 0;
z-index: 0;
background-size: cover;
background-position: center;
opacity: 0.12;
mix-blend-mode: multiply;
pointer-events: none;
}
[data-theme="dark"] .zn-bg-layer { opacity: 0.16; mix-blend-mode: screen; }
/* Wysokość nagłówka dopasowana między stronami oferty (dzieci/dorośli/wyjściowa) */
.page-header--match {
min-height: clamp(35.75rem, 50rem - 20vw, 45rem);
display: flex;
flex-direction: column;
justify-content: center;
}
/* FAQ – natywny /, bez JS */
.faq-list { display: flex; flex-direction: column; gap: 0.9rem; max-width: 760px; margin: 2rem auto 0; }
.faq-item {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 6px 22px 6px 22px;
overflow: hidden;
}
.faq-item summary {
cursor: pointer;
list-style: none;
padding: 1.1rem 1.4rem;
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 500;
color: var(--moss-deep);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: '+';
font-family: var(--font-body);
font-size: 1.3rem;
color: var(--amber);
transition: transform 0.25s;
flex-shrink: 0;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-answer { padding: 0 1.4rem 1.2rem; color: var(--ink-soft); line-height: 1.65; }
@media (prefers-reduced-motion: reduce) { .faq-item summary::after { transition: none; } }
.floating-badges {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.8rem;
margin-top: 1.8rem;
position: relative;
z-index: 1;
}
.floating-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 999px;
padding: 0.5rem 1.1rem;
font-size: 0.85rem;
font-weight: 500;
color: var(--moss-deep);
box-shadow: var(--shadow-soft);
animation: zn-float 4.6s ease-in-out infinite;
}
.floating-badge:nth-child(2) { animation-delay: -1.6s; }
.floating-badge:nth-child(3) { animation-delay: -3.2s; }
@keyframes zn-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-7px); }
}
/* Dwie duże karty-ścieżki „dla dzieci" / „dla dorosłych" */
.path-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.6rem;
}
.path-card {
display: block;
text-decoration: none;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 8px 40px 10px 32px;
padding: 2.6rem 2rem;
text-align: center;
box-shadow: var(--shadow-soft);
transition: transform 0.3s var(--ease), box-shadow 0.3s, border-radius 0.4s;
}
.path-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-med);
border-radius: 32px 8px 40px 10px;
}
.path-icon { font-size: 2.6rem; display: block; margin-bottom: 0.8rem; color: var(--moss); }
.path-icon .zn-icon { width: 1.35em; height: 1.35em; margin: 0 auto; }
.path-card h3 {
font-family: var(--font-display);
font-size: 1.7rem;
font-weight: 500;
color: var(--moss-deep);
margin-bottom: 0.6rem;
}
.path-card p { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.6; margin-bottom: 1.4rem; }
.path-card .btn { pointer-events: none; }
/* =========================================================
WYSKAKUJĄCE OKIENKA (.zn-modal) – FAQ, wyjaśnienia, informacje
========================================================= */
.zn-popup-trigger {
font-family: var(--font-body);
font-size: 0.88rem;
font-weight: 500;
color: var(--moss-deep);
background: transparent;
border: 1.5px solid var(--moss);
border-radius: 999px;
padding: 10px 20px;
cursor: pointer;
transition: background 0.25s, color 0.25s, transform 0.25s;
}
.zn-popup-trigger:hover { background: var(--moss-deep); color: var(--bg); transform: translateY(-2px); }
.zn-popup-trigger + .zn-popup-trigger { margin-left: 0.6rem; }
.zn-modal-overlay {
position: fixed;
inset: 0;
z-index: 9000;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(3px);
opacity: 0;
visibility: hidden;
transition: opacity 0.25s;
}
.zn-modal-overlay.is-open { opacity: 1; visibility: visible; }
.zn-modal {
position: relative;
width: min(560px, 100%);
max-height: 82vh;
overflow-y: auto;
background: var(--paper);
border-radius: 6px 28px 8px 24px;
padding: 2.2rem 2rem 1.8rem;
box-shadow: 0 8px 48px rgba(0,0,0,0.35);
transform: translateY(14px) scale(0.98);
transition: transform 0.25s;
}
[data-theme="dark"] .zn-modal { background: #222; }
.zn-modal-overlay.is-open .zn-modal { transform: translateY(0) scale(1); }
.zn-modal-close {
position: absolute;
top: 0.9rem; right: 1rem;
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
background: transparent;
border: none;
color: var(--ink-soft);
font-size: 1.1rem;
cursor: pointer;
border-radius: 4px;
transition: background 0.15s;
}
.zn-modal-close:hover { background: var(--line); }
.zn-modal h3 {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 500;
color: var(--moss-deep);
margin: 0 1.6rem 1rem 0;
}
.zn-modal-body p { color: var(--ink); line-height: 1.7; margin-bottom: 0.9rem; }
.zn-modal-body p:last-child { margin-bottom: 0; }
/* Ograniczony ruch.
„Mniej ruchu" nie znaczy „zero ruchu". Wcześniej ten blok zerował także
transition-duration, więc razem z dekoracjami znikały przejścia niosące
informację: że menu się otworzyło, że pytanie się rozwinęło, że okienko
przyszło. Zostaje więc podział: pętle dekoracyjne gasną, przejścia stanu
skracają się do wartości ledwie zauważalnej, ale wciąż czytelnej. */
@media (prefers-reduced-motion: reduce) {
/* Ruch w tle – dryfujący liść, panoramowanie hero, kreska pod „przewiń”. */
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
/* Przejścia stanu zostają, tylko krótkie. */
*, *::before, *::after {
transition-duration: 0.12s !important;
}
/* Wejścia przy scrollu niczego nie komunikują – treść ma być na miejscu
od razu, bez czekania na obserwator. */
.reveal, .reveal-left, .reveal-right, .reveal-scale, .stagger > * {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.hero-img { animation: none; }
.ant { display: none; }
}