html, body {
overflow-x: hidden; /* Blokuje przewijanie w poziomie */
width: 100%;
position: relative;
}
:root {
/* Paleta kolorów */
--brand-light: #8b8d39;
--brand-default: #5d5b20;
--brand-dark: #494b1f;
--brand-soft-bg: #f3f4e8;
--theme-bg: #fafaf7;
--theme-surface: #ffffff;
--theme-text: #4b5576;
--theme-muted: #45473f;
/* Typografia */
--font-sans: 'Plus Jakarta Sans', sans-serif;
--font-display: 'Sora', sans-serif;
}
.page-nav-wrap {
margin-top: 60px;
}
.pagÿ na 펞翴 ap ul {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
gap: 8px;
}
.page-nav-wrap ul li.active .page-numbers {
background-color: #1b4332; /* Twój kolor */
color: #ffffff;
border-color: #1b4332;
}
.page-nav-wrap ul li .page-numbers {
display: block;
width: 44px;
height: 44px;
text-align: center;
line-height: 44px;
border-radius: 50%;
border: 1px solid #1b4332;
background: transparent;
color: #1b4332;
font-weight: 600;
transition: all 0.3s ease-in-out;
text-decoration: none;
}
.page-nav-wrap ul li .page-numbers:hover {
background-color: #1b4332;
color: #ffffff;
}
@media (max-width: 767px) {
.page-nav-wrap ul li .page-numbers {
width: 40px;
height: 40px;
line-height: 40px;
font-size: 14px;
}
}
/* BASE & RESET */
* { transition: all .25s cubic-bezier(.4, 0, .2, 1); box-sizing: border-box; }
body {
background-color: var(--theme-bg);
color: var(--theme-text);
font-family: var(--font-sans);
overflow-x: hidden;
}
p{font-size:1em;line-height:1.3em;}
h1 {
font-size: 1.3em;
font-weight: 600;
margin: 10px 0 10px 0;
}
h2 {
font-size: 1.2em;
font-weight: 600;
margin: 10px 0 10px 0;
color:#2B2B24;
}
h3 {
font-size: 1.1em! important;
font-weight: 600;
margin: 10px 0 10px 0;
}
.container-fluid {
padding: 0 180px;
}
@media (max-width: 1600px) {
.container-fluid {
padding: 0 40px;
}
}
@media (max-width: 1199px) {
.container-fluid {
padding: 0 30px;
}
}
@media (max-width: 767px) {
.container-fluid {
padding: 0 0;
}
}
.news-image {
margin-bottom: 1.5rem;
border-radius: 1rem; /* Twoje zaokrąglenie */
overflow: hidden;
}
.news-image img {
width: 100%;
height: auto;
object-fit: cover;
}
h1, h2, h3, h4, h5, h6, .font-display { font-family: var(--font-display); }
/* SKIP LINK & FOCUS */
.skip-link {
position: absolute; top: -100px; left: 50%; transform: translateX(-50%);
background: var(--brand-dark); color: #fff; padding: 12px 24px;
border-radius: 0 0 12px 12px; font-weight: 600; z-index: 9999; text-decoration: none;
}
.skip-link:focus { top: 0; }
*:focus-visible { outline: 3px solid #000 !important; outline-offset: 4px; }
/* NAVBAR & MENU */
/* ============================================================
GLASS NAV — "Zasiej Dobro"
Styl oparty na motywie wzrostu/natury marki: szkło + zielenie,
akcent hover jako "kiełkująca" linia zamiast zwykłego podkreślenia.
Zmienne --brand-dark / --brand-default mają fallbacki na wypadek,
gdyby nie były jeszcze zdefiniowane globalnie.
============================================================ */
:root {
--brand-dark: #1b4332; /* fallback: głęboka zieleń */
--brand-default: #52b788; /* fallback: zieleń liścia */
--glass-bg: rgba(255, 255, 255, 0.62);
--glass-border: rgba(255, 255, 255, 0.55);
--glass-shadow: 0 8px 32px rgba(27, 67, 50, 0.12);
}
/* ============================================================
SZKLANY PASEK
============================================================ */
.glass-nav {
background: var(--glass-bg);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
border: 1px solid var(--glass-border);
border-radius: 999px;
box-shadow: var(--glass-shadow);
transition: box-shadow .3s ease, background .3s ease;
}
.glass-nav:hover {
box-shadow: 0 12px 40px rgba(27, 67, 50, 0.16);
}
/* Logo: delikatna reakcja na hover, bez przesady */
.navbar-brand {
transition: transform .25s ease;
}
.navbar-brand:hover {
transform: translateY(-1px);
}
.navbar-brand span[style*="background-color"] {
transition: border-radius .3s ease, transform .3s ease;
}
.navbar-brand:hover span[style*="background-color"] {
border-radius: 40% 60% 55% 45% / 45% 40% 60% 55%; /* subtelny "listek" na hover */
transform: rotate(-8deg);
}
/* ============================================================
POZYCJE MENU — akcent "kiełkującej" linii zamiast podkreślenia
============================================================ */
/* ===========================
GŁÓWNE MENU
=========================== */
#mobile-menu ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
/* #mobile-menu to teraz bezpośrednio