/*
* main.css — DlaWierzących.pl
* Edytuj bezpośrednio i wgrywaj przez WinSCP. Bez npm/Vite/Tailwind.
*
* Spis treści:
* 1. Reset i box-model
* 2. Zmienne CSS (kolory, typografia, spacing)
* 3. Dark mode — zmienne w .dark
* 4. prefers-color-scheme (fallback bez JS)
* 5. Base — html, body, typografia, linki
* 6. Layout — .site-container, .skip-link
* 7. Header
* 8. Nawigacja desktop
* 9. Menu mobilne
* 10. Hero
* 11. Sekcje strony
* 12. Siatka produktów i karty
* 13. Badże
* 14. Przyciski
* 15. Prezentowniki (guide)
* 16. Poradniki i Okazje
* 17. Stopka
* 18. Affiliate bar
* 19. Breadcrumbs
* 20. Formularze (przyszłość)
* 21. Focus states — dostępność
* 22. prefers-reduced-motion
*/
/* =========================================================================
1. Reset i box-model
========================================================================= */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
font-size: 16px;
/* Kompensacja sticky headera przy nawigacji anchor/skip-link */
scroll-padding-top: var(--header-height, 4rem);
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
line-height: 1.625;
}
main {
flex: 1;
}
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
img {
height: auto;
}
input, button, textarea, select {
font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
ul, ol {
list-style: none;
}
a {
text-decoration: none;
}
table {
border-collapse: collapse;
width: 100%;
}
/* =========================================================================
2. Zmienne CSS — tryb jasny
========================================================================= */
:root {
/* Marka — amber/złoty */
--color-brand: #b45309;
--color-brand-hover: #92400e;
--color-brand-active: #78350f;
--color-brand-light: #fef3c7;
--color-brand-lighter: #fffbeb;
--color-brand-text: #78350f;
--color-brand-dark-bg: #451a03;
/* Tło */
--color-bg: #fafaf9;
--color-surface: #ffffff;
--color-surface-raised: #ffffff;
--color-muted: #f5f5f4;
--color-muted-border: #e7e5e4;
/* Tekst */
--color-text: #1c1917;
--color-text-secondary: #57534e;
--color-text-muted: #78716c;
--color-text-subtle: #a8a29e;
/* Obramowania */
--color-border: #e7e5e4;
--color-border-strong: #d6d3d1;
/* Statusy */
--color-success: #15803d;
--color-success-bg: #f0fdf4;
--color-warning: #b45309;
--color-warning-bg: #fffbeb;
--color-error: #b91c1c;
--color-error-bg: #fef2f2;
/* Nagłówek */
--color-header-bg: #ffffff;
--color-header-border: #e7e5e4;
--header-height: 4rem;
/* Stopka */
--color-footer-bg: #ffffff;
--color-footer-border: #e7e5e4;
/* Typografia */
--font-sans: system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 1.875rem;
--font-size-4xl: 2.25rem;
--font-size-5xl: 3rem;
/* Spacing */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
--space-16: 4rem;
--space-20: 5rem;
/* Layout */
--site-max-width: 1280px;
--site-padding: 1rem;
--site-padding-md: 1.5rem;
--site-padding-lg: 2rem;
/* Zaokrąglenia */
--radius-sm: 0.25rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-full: 9999px;
/* Cienie */
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--shadow-lg: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
/* Przejścia */
--transition-fast: 150ms ease;
--transition-base: 200ms ease;
--transition-slow: 300ms ease;
/* Z-index */
--z-header: 40;
--z-mobile: 50;
--z-modal: 100;
--z-tooltip: 60;
}
/* =========================================================================
3. Dark mode — klasa .dark na
========================================================================= */
.dark {
--color-brand: #fbbf24;
--color-brand-hover: #f59e0b;
--color-brand-active: #d97706;
--color-brand-light: #451a03;
--color-brand-lighter: #2d1200;
--color-brand-text: #fde68a;
--color-bg: #1c1917;
--color-surface: #292524;
--color-surface-raised: #3c3530;
--color-muted: #3c3530;
--color-muted-border: #44403c;
--color-text: #fafaf9;
--color-text-secondary: #d6d3d1;
--color-text-muted: #a8a29e;
--color-text-subtle: #78716c;
--color-border: #44403c;
--color-border-strong: #57534e;
--color-header-bg: #292524;
--color-header-border: #44403c;
--color-footer-bg: #292524;
--color-footer-border: #44403c;
}
/* =========================================================================
4. prefers-color-scheme — fallback gdy JS nie załadował .dark
========================================================================= */
@media (prefers-color-scheme: dark) {
:root:not(.dark):not([data-theme="light"]) {
--color-brand: #fbbf24;
--color-brand-hover: #f59e0b;
--color-brand-light: #451a03;
--color-brand-text: #fde68a;
--color-bg: #1c1917;
--color-surface: #292524;
--color-surface-raised: #3c3530;
--color-muted: #3c3530;
--color-muted-border: #44403c;
--color-text: #fafaf9;
--color-text-secondary: #d6d3d1;
--color-text-muted: #a8a29e;
--color-text-subtle: #78716c;
--color-border: #44403c;
--color-border-strong: #57534e;
--color-header-bg: #292524;
--color-header-border: #44403c;
--color-footer-bg: #292524;
--color-footer-border: #44403c;
}
}
/* =========================================================================
5. Base — html, body, typografia, linki
========================================================================= */
body {
font-family: var(--font-sans);
font-size: var(--font-size-base);
color: var(--color-text);
background-color: var(--color-bg);
transition: background-color var(--transition-base),
color var(--transition-base);
}
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
line-height: 1.2;
color: var(--color-text);
}
h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); font-weight: 600; }
h4 { font-size: var(--font-size-lg); font-weight: 600; }
h5 { font-size: var(--font-size-base); font-weight: 600; }
h6 { font-size: var(--font-size-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
p {
color: var(--color-text-secondary);
line-height: 1.7;
}
a {
color: var(--color-brand);
transition: color var(--transition-fast);
}
a:hover {
color: var(--color-brand-hover);
text-decoration: underline;
}
strong { font-weight: 600; }
em { font-style: italic; }
small {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}
hr {
border: none;
border-top: 1px solid var(--color-border);
margin: var(--space-8) 0;
}
/* =========================================================================
6. Layout
========================================================================= */
.site-container {
width: 100%;
max-width: var(--site-max-width);
margin-left: auto;
margin-right: auto;
padding-left: var(--site-padding);
padding-right: var(--site-padding);
}
/* Kompensacja sticky headera — zapobiega chowaniu celu skip-link / anchorów */
#main-content {
scroll-margin-top: var(--header-height, 4rem);
}
/* Skip to content — widoczny tylko przy fokusie klawiatury */
.skip-link {
position: absolute;
top: -100%;
left: var(--space-4);
padding: var(--space-2) var(--space-4);
background: var(--color-brand);
color: #fff;
font-size: var(--font-size-sm);
font-weight: 600;
border-radius: var(--radius-md);
text-decoration: none;
z-index: var(--z-modal);
transition: top var(--transition-fast);
}
.skip-link:focus {
top: var(--space-4);
outline: 2px solid #fff;
outline-offset: 2px;
}
/* =========================================================================
7. Header
========================================================================= */
.site-header {
position: sticky;
top: 0;
z-index: var(--z-header);
background-color: var(--color-header-bg);
border-bottom: 1px solid var(--color-header-border);
transition: background-color var(--transition-base),
border-color var(--transition-base);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--header-height);
gap: var(--space-4);
}
.site-header__brand {
display: flex;
flex-direction: column;
gap: 0;
flex-shrink: 0;
}
.site-header__logo {
font-size: var(--font-size-lg);
font-weight: 700;
color: var(--color-brand);
text-decoration: none;
line-height: 1.2;
transition: color var(--transition-fast);
}
.site-header__logo:hover {
color: var(--color-brand-hover);
text-decoration: none;
}
.site-header__tagline {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
line-height: 1.3;
}
.site-header__actions {
display: flex;
align-items: center;
gap: var(--space-2);
flex-shrink: 0;
}
/* =========================================================================
8. Nawigacja desktop
========================================================================= */
.site-nav {
display: none; /* pokazane przez media query w responsive.css */
align-items: center;
gap: var(--space-5);
flex: 1;
justify-content: flex-end;
}
.site-nav__link {
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--color-text-secondary);
text-decoration: none;
padding: var(--space-1) 0;
border-bottom: 2px solid transparent;
transition: color var(--transition-fast),
border-color var(--transition-fast);
}
.site-nav__link:hover {
color: var(--color-brand);
text-decoration: none;
border-bottom-color: var(--color-brand);
}
.site-nav__link.nav-link-active {
color: var(--color-brand);
border-bottom-color: var(--color-brand);
}
/* Przyciski ikon (hamburger, dark mode toggle) */
.btn-icon {
display: flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
background: transparent;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
color: var(--color-text-muted);
transition: background-color var(--transition-fast),
color var(--transition-fast);
}
.btn-icon:hover {
background-color: var(--color-muted);
color: var(--color-text);
}
/* Hamburger */
.btn-menu {
flex-direction: column;
gap: 5px;
}
.btn-menu__bar {
display: block;
width: 20px;
height: 2px;
background-color: currentColor;
border-radius: 2px;
transition: transform var(--transition-fast),
opacity var(--transition-fast);
}
/* Dark mode toggle ikony */
.icon-sun,
.icon-moon {
font-size: 1.1rem;
line-height: 1;
}
.icon-sun { display: block; }
.icon-moon { display: none; }
.dark .icon-sun { display: none; }
.dark .icon-moon { display: block; }
/* =========================================================================
9. Menu mobilne
========================================================================= */
.mobile-menu {
background-color: var(--color-surface);
border-top: 1px solid var(--color-border);
z-index: var(--z-mobile);
transition: background-color var(--transition-base);
/* Scrollowalność gdy accordion "Produkty" rozrasta się poza viewport */
max-height: calc(100vh - var(--header-height));
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.mobile-menu[hidden] {
display: none;
}
.mobile-menu__inner {
display: flex;
flex-direction: column;
padding-top: var(--space-3);
padding-bottom: var(--space-4);
gap: var(--space-1);
}
.mobile-menu__link {
display: block;
padding: var(--space-2) var(--space-1);
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--color-text-secondary);
text-decoration: none;
border-radius: var(--radius-sm);
transition: color var(--transition-fast),
background-color var(--transition-fast);
}
.mobile-menu__link:hover {
color: var(--color-brand);
background-color: var(--color-brand-lighter);
text-decoration: none;
}
.mobile-menu__link.nav-link-active {
color: var(--color-brand);
font-weight: 600;
}
/* =========================================================================
10. Hero
========================================================================= */
.hero {
background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-active) 100%);
color: #fff;
padding: var(--space-16) 0 var(--space-20);
text-align: center;
}
.dark .hero {
background: linear-gradient(135deg, #292524 0%, #1c1917 100%);
}
.hero__inner {
/* site-container already handles max-width */
}
.hero__title {
font-size: var(--font-size-4xl);
font-weight: 800;
color: #fff;
line-height: 1.1;
letter-spacing: -0.02em;
}
.hero__tagline {
margin-top: var(--space-3);
font-size: var(--font-size-xl);
color: rgba(255,255,255,0.9);
font-weight: 400;
}
.hero__desc {
margin-top: var(--space-3);
font-size: var(--font-size-base);
color: rgba(255,255,255,0.75);
max-width: 540px;
margin-left: auto;
margin-right: auto;
line-height: 1.65;
}
.hero__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-3);
margin-top: var(--space-8);
}
/* Przyciski w hero */
.btn--hero-primary {
display: inline-flex;
align-items: center;
padding: var(--space-3) var(--space-6);
background: #fff;
color: var(--color-brand-active);
font-weight: 600;
font-size: var(--font-size-sm);
border-radius: var(--radius-lg);
text-decoration: none;
border: 2px solid transparent;
transition: background-color var(--transition-fast),
transform var(--transition-fast);
}
.btn--hero-primary:hover {
background: rgba(255,255,255,0.9);
color: var(--color-brand-active);
text-decoration: none;
transform: translateY(-1px);
}
.btn--hero-secondary {
display: inline-flex;
align-items: center;
padding: var(--space-3) var(--space-6);
background: transparent;
color: #fff;
font-weight: 600;
font-size: var(--font-size-sm);
border-radius: var(--radius-lg);
text-decoration: none;
border: 2px solid rgba(255,255,255,0.5);
transition: background-color var(--transition-fast),
border-color var(--transition-fast);
}
.btn--hero-secondary:hover {
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.8);
color: #fff;
text-decoration: none;
}
/* =========================================================================
11. Sekcje strony
========================================================================= */
.page-section {
padding: var(--space-12) 0;
}
.page-section--muted {
background-color: var(--color-muted);
transition: background-color var(--transition-base);
}
.section-heading {
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--color-text);
margin-bottom: var(--space-6);
line-height: 1.25;
}
.section-more {
margin-top: var(--space-6);
text-align: center;
}
.section-more__link {
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--color-brand);
text-decoration: none;
transition: color var(--transition-fast);
}
.section-more__link:hover {
color: var(--color-brand-hover);
text-decoration: underline;
}
/* =========================================================================
12. Siatka produktów i karty
========================================================================= */
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: var(--space-5);
}
.product-card {
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: box-shadow var(--transition-base),
border-color var(--transition-base),
background-color var(--transition-base);
display: flex;
flex-direction: column;
}
.product-card:hover {
box-shadow: var(--shadow-lg);
border-color: var(--color-border-strong);
}
.product-card__image {
width: 100%;
aspect-ratio: 4 / 3;
background-color: var(--color-muted);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background-color var(--transition-base);
}
.product-card__image-placeholder {
font-size: var(--font-size-sm);
color: var(--color-text-subtle);
}
.product-card__body {
padding: var(--space-4);
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.product-card__title {
font-size: var(--font-size-base);
font-weight: 600;
color: var(--color-text);
line-height: 1.4;
margin-top: var(--space-1);
}
.product-card__desc {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
line-height: 1.55;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.product-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-top: var(--space-2);
padding-top: var(--space-2);
border-top: 1px solid var(--color-border);
}
.product-card__price {
font-size: var(--font-size-base);
font-weight: 700;
color: var(--color-brand);
}
/* =========================================================================
13. Badże
========================================================================= */
.badge {
display: inline-flex;
align-items: center;
padding: 2px var(--space-2);
border-radius: var(--radius-sm);
font-size: var(--font-size-xs);
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.01em;
white-space: nowrap;
align-self: flex-start;
}
.badge--primary {
background-color: var(--color-brand-light);
color: var(--color-brand-text);
}
.badge--secondary {
background-color: var(--color-muted);
color: var(--color-text-secondary);
}
.badge--green {
background-color: var(--color-success-bg);
color: var(--color-success);
}
.badge--warning {
background-color: var(--color-warning-bg);
color: var(--color-warning);
}
/* =========================================================================
14. Przyciski
========================================================================= */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-family: var(--font-sans);
font-weight: 600;
text-decoration: none;
border: 2px solid transparent;
border-radius: var(--radius-md);
cursor: pointer;
transition: background-color var(--transition-fast),
color var(--transition-fast),
border-color var(--transition-fast),
box-shadow var(--transition-fast);
white-space: nowrap;
line-height: 1;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
/* Rozmiary */
.btn--xs { font-size: var(--font-size-xs); padding: var(--space-1) var(--space-2); }
.btn--sm { font-size: var(--font-size-sm); padding: var(--space-2) var(--space-3); }
.btn--md { font-size: var(--font-size-sm); padding: var(--space-2) var(--space-4); }
.btn--lg { font-size: var(--font-size-base); padding: var(--space-3) var(--space-5); }
/* Warianty */
.btn--primary {
background-color: var(--color-brand);
color: #fff;
border-color: var(--color-brand);
}
.btn--primary:hover {
background-color: var(--color-brand-hover);
border-color: var(--color-brand-hover);
color: #fff;
}
.btn--secondary {
background-color: var(--color-muted);
color: var(--color-text-secondary);
border-color: var(--color-border);
}
.btn--secondary:hover {
background-color: var(--color-border);
color: var(--color-text);
}
.btn--outline {
background-color: transparent;
color: var(--color-brand);
border-color: var(--color-brand);
}
.btn--outline:hover {
background-color: var(--color-brand-lighter);
color: var(--color-brand-hover);
}
.btn--ghost {
background-color: transparent;
color: var(--color-brand);
border-color: transparent;
}
.btn--ghost:hover {
background-color: var(--color-brand-lighter);
}
/* Przycisk afiliacyjny — główny CTA do /go/ */
.btn--affiliate {
background-color: var(--color-brand);
color: #fff;
border-color: var(--color-brand);
font-size: var(--font-size-sm);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-md);
}
.btn--affiliate:hover {
background-color: var(--color-brand-hover);
border-color: var(--color-brand-hover);
color: #fff;
}
/* Disabled */
.btn--disabled,
.btn[disabled],
.btn[aria-disabled="true"] {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* =========================================================================
15. Prezentowniki (guide)
========================================================================= */
.guide-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: var(--space-5);
}
.guide-card {
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: box-shadow var(--transition-base),
background-color var(--transition-base);
}
.guide-card:hover {
box-shadow: var(--shadow-lg);
}
.guide-card__image {
height: 8rem;
background: linear-gradient(135deg, var(--color-brand-light) 0%, rgba(180,83,9,0.2) 100%);
display: flex;
align-items: center;
justify-content: center;
transition: background var(--transition-base);
}
.dark .guide-card__image {
background: linear-gradient(135deg, #292524 0%, #3c3530 100%);
}
.guide-card__label {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--color-brand);
padding: var(--space-4);
text-align: center;
}
.guide-card__body {
padding: var(--space-4);
}
.guide-card__desc {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
margin-bottom: var(--space-3);
line-height: 1.55;
}
.guide-card__link {
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--color-brand);
text-decoration: none;
transition: color var(--transition-fast);
}
.guide-card__link:hover {
color: var(--color-brand-hover);
text-decoration: underline;
}
/* =========================================================================
16. Poradniki i Okazje
========================================================================= */
.two-col {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-10);
}
.two-col__col {
/* kolumna — wypełniona przez grid */
}
/* Lista poradników */
.guide-list {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.guide-list__item {
display: flex;
align-items: flex-start;
gap: var(--space-3);
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-3) var(--space-4);
transition: box-shadow var(--transition-fast),
background-color var(--transition-base);
}
.guide-list__item:hover {
box-shadow: var(--shadow-sm);
}
.guide-list__icon {
flex-shrink: 0;
width: 2rem;
height: 2rem;
border-radius: var(--radius-full);
background-color: var(--color-brand-light);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-brand);
margin-top: 2px;
transition: background-color var(--transition-base);
}
.guide-list__icon svg {
width: 1rem;
height: 1rem;
}
.guide-list__link {
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--color-text);
text-decoration: none;
line-height: 1.45;
transition: color var(--transition-fast);
align-self: center;
}
.guide-list__link:hover {
color: var(--color-brand);
text-decoration: none;
}
/* Siatka okazji */
.occasion-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-3);
}
.occasion-link {
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-3) var(--space-2);
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--color-text-secondary);
text-decoration: none;
text-align: center;
transition: border-color var(--transition-fast),
color var(--transition-fast),
background-color var(--transition-base);
}
.occasion-link:hover {
border-color: var(--color-brand);
color: var(--color-brand);
background-color: var(--color-brand-lighter);
text-decoration: none;
}
/* =========================================================================
17. Stopka
========================================================================= */
.site-footer {
background-color: var(--color-footer-bg);
border-top: 1px solid var(--color-footer-border);
margin-top: auto;
transition: background-color var(--transition-base),
border-color var(--transition-base);
}
.site-footer__inner {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: var(--space-8);
padding: var(--space-10) 0 var(--space-8);
}
.site-footer__brand {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.site-footer__name {
font-size: var(--font-size-base);
font-weight: 700;
color: var(--color-text);
}
.site-footer__tagline {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}
.site-footer__about {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
line-height: 1.55;
margin-top: var(--space-2);
max-width: 320px;
}
.site-footer__col {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.site-footer__col-title {
font-size: var(--font-size-xs);
font-weight: 700;
color: var(--color-text);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: var(--space-1);
}
.site-footer__nav {
display: flex;
flex-wrap: wrap;
gap: var(--space-4) var(--space-5);
}
.site-footer__link {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
text-decoration: none;
transition: color var(--transition-fast);
}
.site-footer__link:hover {
color: var(--color-brand);
text-decoration: none;
}
.site-footer__bottom {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-2);
padding: var(--space-4) 0;
border-top: 1px solid var(--color-footer-border);
}
.site-footer__copy {
font-size: var(--font-size-xs);
color: var(--color-text-subtle);
}
.site-footer__disclosure {
font-size: var(--font-size-xs);
color: var(--color-text-subtle);
}
.site-footer__disclosure-link {
color: var(--color-brand);
text-decoration: none;
}
/* =========================================================================
18. Affiliate bar
========================================================================= */
.affiliate-bar {
background-color: var(--color-muted);
border-bottom: 1px solid var(--color-border);
padding: var(--space-2) 0;
transition: background-color var(--transition-base);
}
.affiliate-bar__text {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
text-align: center;
line-height: 1.5;
}
/* =========================================================================
19. Breadcrumbs
========================================================================= */
.breadcrumbs {
padding: var(--space-4) 0 var(--space-2);
}
.breadcrumbs__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-1);
list-style: none;
padding: 0;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.breadcrumbs__item {
display: flex;
align-items: center;
gap: var(--space-1);
}
.breadcrumbs__link {
color: var(--color-text-muted);
text-decoration: none;
transition: color var(--transition-fast);
}
.breadcrumbs__link:hover {
color: var(--color-brand);
}
.breadcrumbs__current {
color: var(--color-text-secondary);
font-weight: 500;
}
.breadcrumbs__sep {
color: var(--color-text-subtle);
font-size: var(--font-size-xs);
}
/* =========================================================================
20. Formularze (przyszłość)
========================================================================= */
.form-label {
display: block;
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--color-text);
margin-bottom: var(--space-1);
}
.form-input,
.form-select,
.form-textarea {
display: block;
width: 100%;
padding: var(--space-2) var(--space-3);
font-size: var(--font-size-sm);
font-family: var(--font-sans);
color: var(--color-text);
background-color: var(--color-surface);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
transition: border-color var(--transition-fast),
box-shadow var(--transition-fast);
appearance: none;
-webkit-appearance: none;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
outline: none;
border-color: var(--color-brand);
box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.15);
}
.form-textarea {
resize: vertical;
min-height: 6rem;
}
.form-error {
font-size: var(--font-size-xs);
color: var(--color-error);
margin-top: var(--space-1);
}
.form-group {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
/* =========================================================================
21. Focus states — dostępność klawiatury
========================================================================= */
*:focus-visible {
outline: 2px solid var(--color-brand);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* Przyciski — wyraźny ring o pełnym kolorze (WCAG 2.4.11: min. 3:1 kontrast) */
.btn:focus-visible {
outline: 2px solid var(--color-brand);
outline-offset: 3px;
box-shadow: none;
}
/* Pola formularza — double-ring: biały dystans + kolorowy ring */
.form-input:focus-visible,
.form-select:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-brand);
}
.site-nav__link:focus-visible,
.mobile-menu__link:focus-visible,
.site-footer__link:focus-visible {
outline: 2px solid var(--color-brand);
outline-offset: 2px;
border-radius: var(--radius-sm);
text-decoration: none;
}
/* =========================================================================
22. prefers-reduced-motion
========================================================================= */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
html {
scroll-behavior: auto;
}
}
/*
* Sekcja własnych styli — dodawaj tutaj bez npm build
* ---------------------------------------------------
*/
/* =========================================================================
23. Katalog — nagłówek, filtry, licznik, pusty stan
========================================================================= */
.catalog-header {
margin-bottom: var(--space-8);
}
.catalog-header__title {
font-size: var(--font-size-3xl);
font-weight: 700;
margin-bottom: var(--space-2);
color: var(--color-text);
}
.catalog-header__lead {
font-size: var(--font-size-lg);
color: var(--color-text-secondary);
line-height: 1.6;
}
.catalog-filters {
margin-bottom: var(--space-6);
padding: var(--space-4);
background-color: var(--color-muted);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
transition: background-color var(--transition-base);
}
.catalog-filters__row {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
align-items: center;
}
.catalog-filters__search {
flex: 1 1 200px;
min-width: 160px;
}
.catalog-filters__select {
flex: 0 1 180px;
min-width: 140px;
}
.catalog-count {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
margin-bottom: var(--space-4);
}
.catalog-empty {
padding: var(--space-12) 0;
text-align: center;
color: var(--color-text-muted);
}
.catalog-empty p {
margin-bottom: var(--space-4);
color: var(--color-text-muted);
}
.catalog-pagination {
margin-top: var(--space-10);
}
.catalog-specials {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-bottom: var(--space-6);
}
.catalog-specials__link {
display: inline-flex;
align-items: center;
padding: 0.4rem 0.9rem;
border: 1px solid var(--color-border);
border-radius: 999px;
text-decoration: none;
font-size: var(--font-size-sm);
color: var(--color-text);
background: var(--color-bg);
}
.catalog-specials__link.is-active,
.catalog-specials__link:hover {
background: var(--color-primary, #0f8e54);
border-color: var(--color-primary, #0f8e54);
color: #fff;
}
.catalog-layout {
display: grid;
grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
gap: var(--space-8);
align-items: start;
}
.catalog-filters--sidebar {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-bottom: 0;
}
.catalog-sidebar__label {
font-size: var(--font-size-sm);
font-weight: 600;
margin: var(--space-2) 0 0;
}
.catalog-tree {
list-style: none;
margin: 0;
padding: 0;
font-size: var(--font-size-sm);
}
.catalog-tree ul {
list-style: none;
margin: 0.25rem 0 0.5rem 1rem;
padding: 0;
}
.catalog-tree label {
display: flex;
gap: 0.4rem;
align-items: flex-start;
cursor: pointer;
}
.catalog-sidebar__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: var(--space-2);
}
/* Dostępność — ukryty tekst dla screen readerów */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* =========================================================================
24. Karta produktu — dodatkowe elementy
========================================================================= */
.product-card__image-link {
display: block;
text-decoration: none;
}
.product-card__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.product-card:hover .product-card__img {
transform: scale(1.03);
}
.product-card__badges {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
margin-bottom: var(--space-2);
}
.product-card__title a {
color: var(--color-text);
text-decoration: none;
transition: color var(--transition-fast);
}
.product-card__title a:hover {
color: var(--color-brand);
text-decoration: none;
}
.product-price {
font-size: var(--font-size-base);
font-weight: 700;
color: var(--color-brand);
}
.product-price--unavailable {
font-size: var(--font-size-sm);
font-weight: 400;
color: var(--color-text-muted);
}
/* =========================================================================
25. Paginacja
========================================================================= */
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
flex-wrap: wrap;
}
.pagination__btn {
display: inline-flex;
align-items: center;
padding: var(--space-2) var(--space-4);
font-size: var(--font-size-sm);
font-weight: 500;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
background-color: var(--color-surface);
color: var(--color-brand);
text-decoration: none;
transition: background-color var(--transition-fast),
border-color var(--transition-fast),
color var(--transition-fast);
}
.pagination__btn:hover {
background-color: var(--color-brand-lighter);
border-color: var(--color-brand);
color: var(--color-brand);
text-decoration: none;
}
.pagination__btn--disabled {
color: var(--color-text-subtle);
cursor: default;
pointer-events: none;
background-color: transparent;
border-color: var(--color-border);
}
.pagination__info {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
white-space: nowrap;
}
/* =========================================================================
26. Detal produktu
========================================================================= */
.product-detail {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-8);
margin-bottom: var(--space-10);
}
@media (min-width: 768px) {
.product-detail {
grid-template-columns: 420px 1fr;
gap: var(--space-10);
align-items: start;
}
}
.product-detail__cover {
width: 100%;
aspect-ratio: 4 / 3;
border-radius: var(--radius-xl);
overflow: hidden;
background-color: var(--color-muted);
transition: background-color var(--transition-base);
}
.product-detail__cover-link {
display: block;
width: 100%;
height: 100%;
}
.product-detail__cover-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.product-detail__cover--placeholder {
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
color: var(--color-text-subtle);
}
.product-detail__meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
margin-bottom: var(--space-3);
}
.product-detail__meta .badge {
text-decoration: none;
transition: background-color var(--transition-fast);
}
.product-detail__meta .badge:hover {
background-color: var(--color-brand-light);
color: var(--color-brand-text);
text-decoration: none;
}
.product-detail__badges {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
margin-bottom: var(--space-3);
}
.product-detail__title {
font-size: var(--font-size-2xl);
font-weight: 700;
line-height: 1.25;
margin-bottom: var(--space-2);
color: var(--color-text);
}
.product-detail__subtitle {
font-size: var(--font-size-lg);
color: var(--color-text-secondary);
margin-bottom: var(--space-3);
line-height: 1.5;
}
.product-detail__excerpt {
font-size: var(--font-size-base);
color: var(--color-text-secondary);
line-height: 1.7;
margin-bottom: var(--space-6);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--color-border);
}
/* =========================================================================
27. Galeria produktu
========================================================================= */
.product-gallery {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: var(--space-3);
}
.product-gallery__item {
display: block;
border-radius: var(--radius-md);
overflow: hidden;
border: 2px solid var(--color-border);
transition: border-color var(--transition-fast);
}
.product-gallery__item:hover {
border-color: var(--color-brand);
}
.product-gallery__thumb {
width: 80px;
height: 60px;
object-fit: cover;
display: block;
}
/* =========================================================================
28. Sekcja ofert / CTA
========================================================================= */
.offer-section {
margin-bottom: var(--space-6);
}
.offer-section__heading {
font-size: var(--font-size-xl);
font-weight: 600;
margin-bottom: var(--space-4);
color: var(--color-text);
}
.offer-list {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.offer-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-4);
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
transition: border-color var(--transition-fast),
box-shadow var(--transition-fast),
background-color var(--transition-base);
}
.offer-item:hover {
border-color: var(--color-brand);
box-shadow: var(--shadow-sm);
}
.offer-item__info {
display: flex;
flex-direction: column;
gap: var(--space-1);
flex: 1;
min-width: 0;
}
.offer-item__partner {
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--color-text);
}
.offer-item__label {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}
.offer-item__price {
font-size: var(--font-size-lg);
font-weight: 700;
color: var(--color-brand);
}
.offer-item__actions {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--space-1);
flex-shrink: 0;
}
/* =========================================================================
29. Etykieta afiliacyjna
========================================================================= */
.affiliate-label {
font-size: var(--font-size-xs);
color: var(--color-text-subtle);
cursor: help;
border-bottom: 1px dotted var(--color-text-subtle);
line-height: 1.4;
text-decoration: none;
transition: color var(--transition-fast);
}
.affiliate-label:hover {
color: var(--color-text-muted);
}
/* =========================================================================
30. Opis i sekcje redakcyjne produktu
========================================================================= */
.product-description {
padding: var(--space-8) 0;
border-top: 1px solid var(--color-border);
margin-top: var(--space-8);
}
.product-description__heading {
font-size: var(--font-size-xl);
font-weight: 700;
margin-bottom: var(--space-4);
color: var(--color-text);
}
.product-description__body {
font-size: var(--font-size-base);
color: var(--color-text-secondary);
line-height: 1.75;
max-width: 72ch;
}
.editorial-sections {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--space-5);
padding: var(--space-8) 0;
border-top: 1px solid var(--color-border);
margin-top: var(--space-4);
}
.editorial-section {
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-5);
transition: background-color var(--transition-base);
}
.editorial-section__heading {
font-size: var(--font-size-sm);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-brand);
margin-bottom: var(--space-2);
}
.editorial-section__body {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
line-height: 1.65;
}
.product-tags {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
padding: var(--space-6) 0;
border-top: 1px solid var(--color-border);
margin-top: var(--space-4);
}
.product-tags__label {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
font-weight: 500;
}
.product-tags .badge {
text-decoration: none;
transition: background-color var(--transition-fast);
}
.product-tags .badge:hover {
background-color: var(--color-brand-light);
color: var(--color-brand-text);
text-decoration: none;
}
/* =========================================================================
32. Treści — grid listy
========================================================================= */
.content-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--space-6);
margin-bottom: var(--space-8);
}
/* =========================================================================
33. Karta treści
========================================================================= */
.content-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
overflow: hidden;
display: flex;
flex-direction: column;
transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.content-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
.content-card__thumb {
display: block;
overflow: hidden;
aspect-ratio: 16 / 10;
background: var(--color-bg-subtle);
}
.content-card__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.content-card:hover .content-card__img {
transform: scale(1.04);
}
.content-card__placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--color-brand-light) 0%, var(--color-bg-subtle) 100%);
}
.content-card__body {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-5);
}
.content-card__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
}
.content-card__title {
font-size: var(--font-size-lg);
font-weight: 700;
line-height: 1.35;
margin: 0;
}
.content-card__title a {
color: var(--color-heading);
text-decoration: none;
}
.content-card__title a:hover {
color: var(--color-brand);
}
.content-card__lead {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
line-height: 1.6;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.content-card__footer {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding-top: var(--space-3);
border-top: 1px solid var(--color-border);
}
.content-card__date {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}
.content-card__cta {
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--color-brand);
text-decoration: none;
white-space: nowrap;
}
.content-card__cta:hover {
text-decoration: underline;
}
.content-card__taxonomy {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
}
.link-arrow {
color: var(--color-brand);
text-decoration: none;
font-weight: 600;
}
.link-arrow:hover { text-decoration: underline; }
.link-arrow--back {
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
}
.link-arrow--back:hover { color: var(--color-brand); }
/* =========================================================================
34. Typ treści — badge i linki taksonomii
========================================================================= */
.tag-link {
display: inline-block;
padding: 2px var(--space-3);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-full, 9999px);
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
text-decoration: none;
transition: border-color var(--transition-fast), color var(--transition-fast);
}
.tag-link:hover {
border-color: var(--color-brand);
color: var(--color-brand);
}
.tag-link--tag {
background: transparent;
border-style: dashed;
}
.content-type-badge {
font-size: var(--font-size-xs);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.badge--green {
background-color: #d1fae5;
color: #065f46;
}
.badge--warning {
background-color: #fef3c7;
color: #92400e;
}
/* =========================================================================
35. Filtr / wyszukiwarka treści
========================================================================= */
.content-filters {
margin-bottom: var(--space-6);
}
.search-bar {
display: flex;
align-items: center;
gap: var(--space-2);
max-width: 500px;
}
.search-bar__input {
flex: 1;
padding: var(--space-2) var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
background: var(--color-surface);
color: var(--color-text);
transition: border-color var(--transition-fast);
}
.search-bar__input:focus {
outline: none;
border-color: var(--color-brand);
box-shadow: 0 0 0 3px rgba(var(--color-brand-rgb, 79,70,229), 0.15);
}
.search-bar__btn {
padding: var(--space-2) var(--space-5);
background: var(--color-brand);
color: #fff;
border: none;
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
font-weight: 600;
cursor: pointer;
transition: background-color var(--transition-fast);
}
.search-bar__btn:hover { background: var(--color-brand-dark, var(--color-brand)); }
.search-bar__clear {
color: var(--color-text-muted);
font-size: var(--font-size-sm);
text-decoration: none;
padding: var(--space-1);
line-height: 1;
}
.search-bar__clear:hover { color: var(--color-danger, #dc2626); }
.search-result-info {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
margin-bottom: var(--space-5);
}
/* =========================================================================
36. Strona szczegółowa treści
========================================================================= */
.content-detail {
padding: var(--space-8) 0;
}
.content-detail__hero {
margin-bottom: var(--space-8);
border-radius: var(--radius-xl);
overflow: hidden;
aspect-ratio: 12 / 5;
background: var(--color-bg-subtle);
}
.content-detail__hero-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.content-detail__header {
margin-bottom: var(--space-8);
max-width: 820px;
}
.content-detail__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-4);
}
.content-detail__date {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}
.content-detail__title {
font-size: clamp(1.6rem, 3.5vw, 2.5rem);
font-weight: 800;
line-height: 1.2;
color: var(--color-heading);
margin: 0 0 var(--space-4);
}
.content-detail__subtitle {
font-size: var(--font-size-xl);
font-weight: 500;
color: var(--color-text-secondary);
margin: 0 0 var(--space-3);
line-height: 1.45;
}
.content-detail__lead {
font-size: var(--font-size-lg);
color: var(--color-text-secondary);
line-height: 1.65;
margin: 0;
border-left: 3px solid var(--color-brand);
padding-left: var(--space-4);
}
.content-detail__body {
font-size: var(--font-size-base);
line-height: 1.8;
color: var(--color-text);
max-width: 820px;
margin-bottom: var(--space-10);
}
/* =========================================================================
37. Checklista
========================================================================= */
.content-checklist .checklist-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.checklist-item {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
}
.checklist-item__icon {
flex-shrink: 0;
width: 1.4rem;
height: 1.4rem;
background: var(--color-brand);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
font-weight: 700;
line-height: 1;
}
/* =========================================================================
38. Ranking — lista pozycji
========================================================================= */
.ranking-section {
margin: var(--space-10) 0;
}
.section-title {
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--color-heading);
margin-bottom: var(--space-6);
padding-bottom: var(--space-3);
border-bottom: 2px solid var(--color-brand);
display: inline-block;
}
.ranking-list {
list-style: none;
padding: 0;
margin: 0;
counter-reset: ranking;
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.ranking-item {
display: grid;
grid-template-columns: 2.5rem 7rem 1fr;
gap: var(--space-5);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: var(--space-5);
align-items: start;
transition: box-shadow var(--transition-base);
}
.ranking-item:hover {
box-shadow: var(--shadow-md);
}
.ranking-item__position {
font-size: 1.75rem;
font-weight: 900;
color: var(--color-brand);
line-height: 1;
text-align: center;
padding-top: var(--space-1);
}
.ranking-item__image {
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 1;
background: var(--color-bg-subtle);
}
.ranking-item__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ranking-item__placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--color-brand-light) 0%, var(--color-bg-subtle) 100%);
}
.ranking-item__content {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.ranking-item__meta {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
}
.ranking-item__label {
display: inline-block;
padding: 2px var(--space-2);
background: var(--color-brand-light);
color: var(--color-brand);
border-radius: var(--radius-sm);
font-size: var(--font-size-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.ranking-item__score {
font-size: var(--font-size-sm);
font-weight: 700;
color: #d97706;
}
.ranking-item__title {
font-size: var(--font-size-lg);
font-weight: 700;
margin: 0;
line-height: 1.3;
}
.ranking-item__title a {
color: var(--color-heading);
text-decoration: none;
}
.ranking-item__title a:hover { color: var(--color-brand); }
.ranking-item__headline {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
font-style: italic;
margin: 0;
}
.ranking-item__desc {
font-size: var(--font-size-sm);
color: var(--color-text);
line-height: 1.65;
margin: 0;
}
.ranking-item__pros-cons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3);
margin-top: var(--space-2);
}
.ranking-item__pros,
.ranking-item__cons {
list-style: none;
padding: 0;
margin: 0;
font-size: var(--font-size-xs);
}
.ranking-item__pros li::before {
content: '✓ ';
color: #16a34a;
font-weight: 700;
}
.ranking-item__cons li::before {
content: '✗ ';
color: #dc2626;
font-weight: 700;
}
.ranking-item__actions {
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
margin-top: var(--space-3);
}
/* =========================================================================
39. Powiązane produkty (sekcja w treści)
========================================================================= */
.related-products-section {
margin: var(--space-10) 0;
padding-top: var(--space-8);
border-top: 1px solid var(--color-border);
}
/* =========================================================================
40. Taksonomia treści (kategorie + tagi na stronie szczegółu)
========================================================================= */
.content-taxonomy {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-6) 0;
border-top: 1px solid var(--color-border);
margin-top: var(--space-4);
}
.content-taxonomy__group {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
}
.content-taxonomy__label {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
font-weight: 500;
}
.content-detail__back {
margin-top: var(--space-10);
padding-top: var(--space-6);
border-top: 1px solid var(--color-border);
}
/* =========================================================================
41. Stan pusty
========================================================================= */
.empty-state {
text-align: center;
padding: var(--space-16, 4rem) var(--space-4);
color: var(--color-text-muted);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
/* =========================================================================
31. Podkategorie
========================================================================= */
.subcategory-list {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-bottom: var(--space-6);
}
.subcategory-list .badge {
text-decoration: none;
font-size: var(--font-size-sm);
padding: var(--space-1) var(--space-3);
transition: background-color var(--transition-fast);
}
.subcategory-list .badge:hover {
background-color: var(--color-brand-light);
color: var(--color-brand-text);
}
/* =========================================================================
42. Cookie banner
========================================================================= */
.cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 9000;
background: var(--color-surface, #fff);
border-top: 2px solid var(--color-brand, #0f8e54);
box-shadow: 0 -4px 20px rgba(0,0,0,.12);
padding: var(--space-4, 1rem) var(--space-4, 1rem);
}
.cookie-banner__inner {
max-width: 900px;
margin: 0 auto;
}
.cookie-banner__title {
font-weight: 700;
font-size: var(--font-size-base, 1rem);
margin-bottom: var(--space-1, .25rem);
}
.cookie-banner__text {
font-size: var(--font-size-sm, .875rem);
color: var(--color-text-muted);
margin-bottom: var(--space-3, .75rem);
line-height: 1.5;
}
.cookie-banner__link {
color: var(--color-brand);
text-decoration: underline;
}
.cookie-banner__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-2, .5rem);
margin-bottom: var(--space-2, .5rem);
}
/* ── Ustawienia szczegółowe ─────────────────────────────────────────────── */
.cookie-settings {
border-top: 1px solid var(--color-border, #e2e8f0);
margin-top: var(--space-3, .75rem);
padding-top: var(--space-3, .75rem);
}
.cookie-settings__item {
margin-bottom: var(--space-3, .75rem);
}
.cookie-settings__label {
display: flex;
align-items: flex-start;
gap: var(--space-3, .75rem);
cursor: pointer;
font-size: var(--font-size-sm, .875rem);
}
.cookie-settings__label input[type="checkbox"] {
margin-top: 3px;
flex-shrink: 0;
width: 18px;
height: 18px;
cursor: pointer;
accent-color: var(--color-brand);
}
.cookie-settings__label input[disabled] {
cursor: not-allowed;
opacity: .5;
}
.cookie-settings__desc {
display: block;
color: var(--color-text-muted);
font-size: var(--font-size-xs, .8rem);
margin-top: 2px;
}
.cookie-settings__save {
margin-top: var(--space-3, .75rem);
}
/* =========================================================================
43. Strony prawne (legal)
========================================================================= */
.site-container--narrow {
max-width: 720px;
}
.legal-page__header {
margin-bottom: var(--space-8, 2rem);
padding-bottom: var(--space-6, 1.5rem);
border-bottom: 2px solid var(--color-brand, #0f8e54);
}
.legal-page__title {
font-size: var(--font-size-3xl, 2rem);
font-weight: 700;
margin-bottom: var(--space-2, .5rem);
color: var(--color-text);
}
.legal-page__lead {
font-size: var(--font-size-lg, 1.125rem);
color: var(--color-text-muted);
line-height: 1.6;
}
.legal-page__meta {
font-size: var(--font-size-sm, .875rem);
color: var(--color-text-muted);
margin-top: var(--space-2, .5rem);
}
.legal-page__body h2 {
font-size: var(--font-size-xl, 1.25rem);
font-weight: 700;
margin-top: var(--space-8, 2rem);
margin-bottom: var(--space-3, .75rem);
color: var(--color-text);
}
.legal-page__body h3 {
font-size: var(--font-size-base, 1rem);
font-weight: 700;
margin-top: var(--space-5, 1.25rem);
margin-bottom: var(--space-2, .5rem);
color: var(--color-text);
}
.legal-page__body p,
.legal-page__body li {
font-size: var(--font-size-base, 1rem);
line-height: 1.75;
color: var(--color-text);
margin-bottom: var(--space-3, .75rem);
}
.legal-page__body ul,
.legal-page__body ol {
padding-left: var(--space-6, 1.5rem);
margin-bottom: var(--space-4, 1rem);
}
/* Przywróć znaczniki list po globalnym resecie list-style:none */
.legal-page__body ul { list-style: disc; }
.legal-page__body ol { list-style: decimal; }
.legal-page__body li { margin-bottom: var(--space-1); }
.legal-page__body code {
background: var(--color-surface-alt, #f1f5f9);
padding: 2px 6px;
border-radius: 4px;
font-size: .9em;
}
.legal-page__quote {
border-left: 4px solid var(--color-brand, #0f8e54);
padding-left: var(--space-4, 1rem);
color: var(--color-text-muted);
font-style: italic;
margin: var(--space-4, 1rem) 0;
}
.legal-page__note {
background: var(--color-surface-alt, #f8fafc);
border-radius: 8px;
padding: var(--space-4, 1rem);
margin-top: var(--space-8, 2rem);
font-size: var(--font-size-sm, .875rem);
color: var(--color-text-muted);
}
/* ── Kontakt cards ──────────────────────────────────────────────────────── */
.contact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--space-6, 1.5rem);
margin-bottom: var(--space-8, 2rem);
}
.contact-card {
background: var(--color-surface-alt, #f8fafc);
border-radius: 8px;
padding: var(--space-5, 1.25rem);
border: 1px solid var(--color-border, #e2e8f0);
}
.contact-card__title {
font-size: var(--font-size-base, 1rem);
font-weight: 700;
margin-bottom: var(--space-3, .75rem);
color: var(--color-text);
}
/* =========================================================================
44. Affiliate disclosure (nowy komponent)
========================================================================= */
.affiliate-disclosure {
background: var(--color-surface-alt, #f8fafc);
border: 1px solid var(--color-border, #e2e8f0);
border-left: 3px solid var(--color-brand, #0f8e54);
border-radius: 4px;
padding: var(--space-3, .75rem) var(--space-4, 1rem);
margin: var(--space-4, 1rem) 0;
}
.affiliate-disclosure__text {
font-size: var(--font-size-sm, .875rem);
color: var(--color-text-muted);
line-height: 1.5;
margin: 0;
}
.affiliate-disclosure__icon {
margin-right: var(--space-1, .25rem);
color: var(--color-brand);
}
.affiliate-disclosure__link {
color: var(--color-brand);
text-decoration: underline;
margin-left: var(--space-1, .25rem);
white-space: nowrap;
}
/* =========================================================================
45. Etap 8B — strona główna: hero, kategorie, trust, linki sekcji
========================================================================= */
/* Hero — dodatkowe elementy */
.hero__brand {
display: block;
font-size: var(--font-size-sm);
font-weight: 600;
color: rgba(255,255,255,0.75);
letter-spacing: 0.04em;
margin-bottom: var(--space-2);
text-transform: uppercase;
}
/* Section header (heading + link "Zobacz wszystkie") */
.section-header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-4);
margin-bottom: var(--space-6);
}
.section-header .section-heading {
margin-bottom: 0;
}
.section-heading--center {
text-align: center;
}
/* Section links — wiersz linków na dole sekcji treści */
.section-links {
display: flex;
flex-wrap: wrap;
gap: var(--space-3) var(--space-5);
margin-top: var(--space-8);
padding-top: var(--space-6);
border-top: 1px solid var(--color-border);
}
.section-link {
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--color-brand);
text-decoration: none;
transition: color var(--transition-fast);
}
.section-link:hover {
color: var(--color-brand-hover);
text-decoration: underline;
}
/* Kafle kategorii */
.category-tiles {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-3);
}
.category-tile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: var(--space-5) var(--space-4);
text-decoration: none;
min-height: 5rem;
transition: border-color var(--transition-fast),
background-color var(--transition-fast),
box-shadow var(--transition-fast);
}
.category-tile:hover {
border-color: var(--color-brand);
background: var(--color-brand-lighter);
box-shadow: var(--shadow-md);
}
.category-tile:focus-visible {
outline: 2px solid var(--color-brand);
outline-offset: 2px;
}
.category-tile__name {
display: block;
font-size: var(--font-size-base);
font-weight: 600;
color: var(--color-text);
line-height: 1.3;
}
.category-tile__desc {
display: block;
font-size: var(--font-size-xs);
color: var(--color-text-muted);
margin-top: var(--space-1);
line-height: 1.4;
}
/* Sekcja zaufania */
.trust-section {
background: var(--color-surface);
}
.trust-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-5);
margin-top: var(--space-8);
}
.trust-item {
text-align: center;
padding: var(--space-6) var(--space-5);
background: var(--color-muted);
border-radius: var(--radius-xl);
border: 1px solid var(--color-border);
transition: background-color var(--transition-base);
}
.trust-item__icon {
display: block;
font-size: 1.75rem;
margin-bottom: var(--space-3);
line-height: 1;
}
.trust-item__title {
font-size: var(--font-size-base);
font-weight: 700;
color: var(--color-text);
margin-bottom: var(--space-2);
}
.trust-item__desc {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
line-height: 1.55;
margin: 0;
}
/* Informacja afiliacyjna na dole homepage */
.home-affiliate-note {
padding: var(--space-5) 0;
background: var(--color-brand-lighter);
border-top: 1px solid var(--color-brand-light);
border-bottom: 1px solid var(--color-brand-light);
}
.home-affiliate-note__text {
font-size: var(--font-size-sm);
color: var(--color-brand-text);
line-height: 1.65;
text-align: center;
margin: 0;
}
.home-affiliate-note__link {
color: var(--color-brand);
font-weight: 500;
text-decoration: underline;
}
/* Opis sekcji (pod nagłówkiem, przed kaflami) */
.section-desc {
font-size: var(--font-size-base);
color: var(--color-text-muted);
line-height: 1.65;
margin-top: calc(-1 * var(--space-3));
margin-bottom: var(--space-6);
max-width: 640px;
}
/* Sekcja sezonowa */
.seasonal-section {
background: var(--color-brand-lighter);
border-top: 2px solid var(--color-brand-light);
border-bottom: 1px solid var(--color-brand-light);
}
.seasonal-badge {
display: inline-block;
background: var(--color-brand);
color: #fff;
font-size: var(--font-size-xs);
font-weight: 700;
padding: 3px var(--space-3);
border-radius: var(--radius-full, 999px);
margin-bottom: var(--space-3);
letter-spacing: 0.05em;
text-transform: uppercase;
}
/* Kafelek sezonowy — lekki akcent */
.category-tile--seasonal {
background: var(--color-surface);
border-color: var(--color-brand-light);
}
.category-tile--seasonal:hover {
background: #fff;
border-color: var(--color-brand);
}
.category-tile__cta {
display: block;
font-size: var(--font-size-xs);
color: var(--color-brand);
margin-top: var(--space-1);
font-weight: 500;
}
/* Active state w nawigacji */
.site-nav__link--active {
color: var(--color-brand);
font-weight: 600;
border-bottom-color: var(--color-brand);
}
.mobile-menu__link--active {
color: var(--color-brand);
font-weight: 600;
}
/* =========================================================================
46. Etap 8B-fix — Mega menu Produkty
========================================================================= */
/* ── Wrapper nav item z mega menu ────────────────────────────────────────── */
.site-nav__item--mega {
position: static; /* mega menu pozycjonuje się względem .site-header */
display: flex;
align-items: center;
}
/* ── Trigger (button wyglądający jak link) ───────────────────────────────── */
.site-nav__mega-btn {
display: inline-flex;
align-items: center;
gap: var(--space-1);
background: none;
border: none;
border-bottom: 2px solid transparent;
padding: var(--space-1) 0;
cursor: pointer;
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--color-text-secondary);
text-decoration: none;
transition: color var(--transition-fast),
border-color var(--transition-fast);
}
.site-nav__mega-btn:hover,
.site-nav__item--mega.is-open .site-nav__mega-btn {
color: var(--color-brand);
border-bottom-color: var(--color-brand);
}
.site-nav__mega-btn:focus-visible {
outline: 2px solid var(--color-brand);
outline-offset: 2px;
border-radius: 2px;
}
/* Strzałka ▾ — CSS triangle */
.site-nav__mega-arrow {
display: inline-block;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid currentColor;
transition: transform var(--transition-fast);
position: relative;
top: 1px;
}
.site-nav__item--mega.is-open .site-nav__mega-arrow {
transform: rotate(180deg);
}
/* ── Mega menu panel ─────────────────────────────────────────────────────── */
.mega-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: var(--color-surface);
border-top: 2px solid var(--color-brand-light);
border-bottom: 1px solid var(--color-border);
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
z-index: var(--z-dropdown, 200);
transition: background-color var(--transition-base);
}
/* Otwarte przez JS */
.site-nav__item--mega.is-open .mega-menu {
display: block;
}
/* Otwarte przez CSS focus-within (nawigacja klawiaturą) */
.site-nav__item--mega:focus-within .mega-menu {
display: block;
}
/* Hover jest obsługiwany przez JS (mouseenter/mouseleave + opóźnienie),
bo CSS :hover traci stan gdy kursor przesuwa się przez lukę między
triggerem a panelem (mega-menu jest absolute poza box wrappera). */
.mega-menu__inner {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-6);
padding: var(--space-6) 0;
}
/* Gdy tylko 2–3 kolumny (brak danych DB) — dostosowanie */
.mega-menu__inner > :only-child,
.mega-menu__inner > :nth-child(2):last-child {
grid-column: auto;
}
.mega-menu__col {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.mega-menu__col-title {
font-size: var(--font-size-xs);
font-weight: 700;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: var(--space-2);
padding-bottom: var(--space-1);
border-bottom: 1px solid var(--color-border);
}
.mega-menu__link {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
text-decoration: none;
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
transition: color var(--transition-fast),
background-color var(--transition-fast);
display: block;
}
.mega-menu__link:hover {
color: var(--color-brand);
background-color: var(--color-brand-lighter);
text-decoration: none;
}
.mega-menu__link:focus-visible {
outline: 2px solid var(--color-brand);
outline-offset: 1px;
}
.mega-menu__link--all {
font-weight: 600;
color: var(--color-brand);
margin-bottom: var(--space-1);
}
.mega-menu__link--all:hover {
background-color: var(--color-brand-lighter);
}
/* ── Mobile menu: accordion grupy ───────────────────────────────────────── */
.mobile-menu__group {
display: flex;
flex-direction: column;
}
.mobile-menu__group-btn {
display: flex;
align-items: center;
justify-content: space-between;
background: none;
border: none;
cursor: pointer;
font-family: var(--font-sans);
width: 100%;
text-align: left;
/* dziedziczy styl z .mobile-menu__link */
padding: var(--space-2) var(--space-1);
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--color-text-secondary);
border-radius: var(--radius-sm);
transition: color var(--transition-fast),
background-color var(--transition-fast);
}
.mobile-menu__group-btn:hover {
color: var(--color-brand);
background-color: var(--color-brand-lighter);
}
.mobile-menu__group-btn:focus-visible {
outline: 2px solid var(--color-brand);
outline-offset: 1px;
}
.mobile-menu__group-arrow {
display: inline-block;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid currentColor;
transition: transform var(--transition-fast);
flex-shrink: 0;
}
.mobile-menu__group-btn[aria-expanded="true"] .mobile-menu__group-arrow {
transform: rotate(180deg);
}
.mobile-submenu {
padding-left: var(--space-4);
padding-top: var(--space-1);
padding-bottom: var(--space-2);
display: flex;
flex-direction: column;
gap: 0;
}
.mobile-submenu[hidden] {
display: none;
}
.mobile-menu__sublink {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
text-decoration: none;
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
display: block;
transition: color var(--transition-fast),
background-color var(--transition-fast);
}
.mobile-menu__sublink:hover {
color: var(--color-brand);
background-color: var(--color-brand-lighter);
}
.mobile-submenu__label {
font-size: var(--font-size-xs);
font-weight: 700;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
padding: var(--space-2) var(--space-2) var(--space-1);
margin-top: var(--space-1);
}
/* =========================================================================
23. CMS Content — treść z edytora (Etap 10B / 10B-fix)
Klasy: .cms-content, .cms-toc, .cms-video, .cms-download-file,
.cms-pdf-preview, .cms-audio, .cms-image
Tagi: mark, small, sub, sup, code, details/summary
Legacy: .cytat, .column-count2/3, .table-cleared, .mybox,
.button*, .fleft, .fright, .fullwidth, .lightbox
========================================================================= */
/* ── Kontener treści ──────────────────────────────────────────────────────── */
.cms-content {
color: var(--color-text);
line-height: 1.75;
font-size: var(--font-size-base);
max-width: 72ch;
}
/* Kompaktowa wersja dla opisów kategorii/tagów (bez max-width) */
.cms-content--compact {
max-width: none;
line-height: 1.625;
}
.cms-content > * + * {
margin-top: var(--space-5);
}
/* ── Nagłówki w treści ────────────────────────────────────────────────────── */
.cms-content h2,
.cms-content h3,
.cms-content h4 {
color: var(--color-text);
font-weight: 700;
line-height: 1.3;
margin-top: var(--space-10);
margin-bottom: var(--space-3);
}
.cms-content h2 { font-size: var(--font-size-2xl); }
.cms-content h3 { font-size: var(--font-size-xl); }
.cms-content h4 { font-size: var(--font-size-lg); }
/* ── Akapit i inline ──────────────────────────────────────────────────────── */
.cms-content p {
margin-bottom: 0;
}
.cms-content strong, .cms-content b { font-weight: 700; }
.cms-content em, .cms-content i { font-style: italic; }
.cms-content u { text-decoration: underline; }
.cms-content s, .cms-content del { text-decoration: line-through; color: var(--color-text-muted); }
/* ── Linki ────────────────────────────────────────────────────────────────── */
.cms-content a {
color: var(--color-brand);
text-decoration: underline;
text-underline-offset: 2px;
}
.cms-content a:hover {
color: var(--color-brand-hover);
}
.cms-content a:focus-visible {
outline: 2px solid var(--color-brand);
outline-offset: 2px;
border-radius: 2px;
}
/* ── Listy ────────────────────────────────────────────────────────────────── */
.cms-content ul,
.cms-content ol {
padding-left: var(--space-6);
}
.cms-content ul {
list-style: disc;
}
.cms-content ol {
list-style: decimal;
}
.cms-content li + li {
margin-top: var(--space-1);
}
.cms-content li > ul,
.cms-content li > ol {
margin-top: var(--space-1);
}
/* ── Blockquote ───────────────────────────────────────────────────────────── */
.cms-content blockquote {
border-left: 4px solid var(--color-brand);
padding: var(--space-3) var(--space-6);
margin: var(--space-6) 0;
background: var(--color-brand-lighter);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
color: var(--color-text-secondary);
font-style: italic;
}
/* ── HR ───────────────────────────────────────────────────────────────────── */
.cms-content hr {
border: none;
border-top: 1px solid var(--color-border);
margin: var(--space-8) 0;
}
/* ── Tabele ───────────────────────────────────────────────────────────────── */
/* Wrapper generowany przez CmsContentRenderer::wrapTables() —
obsługuje poziomy scroll na mobile bez łamania layoutu tabeli (WCAG 1.4.10). */
.cms-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-bottom: var(--space-6);
border-radius: var(--radius-sm);
}
.cms-content table {
width: 100%;
border-collapse: collapse;
font-size: var(--font-size-sm);
}
.cms-content th,
.cms-content td {
border: 1px solid var(--color-border);
padding: var(--space-2) var(--space-3);
text-align: left;
vertical-align: top;
}
.cms-content th {
background: var(--color-muted);
font-weight: 700;
}
.cms-content tr:nth-child(even) td {
background: var(--color-muted);
}
/* ── Obrazy w treści ──────────────────────────────────────────────────────── */
.cms-content img {
max-width: 100%;
height: auto;
border-radius: var(--radius-sm);
}
.cms-content figure,
.cms-content .cms-image {
margin: var(--space-6) 0;
}
.cms-content figcaption {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
margin-top: var(--space-2);
text-align: center;
}
/* ── Spis treści ──────────────────────────────────────────────────────────── */
.cms-toc {
background: var(--color-muted);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-5) var(--space-6);
margin-bottom: var(--space-8);
display: inline-block;
min-width: 220px;
max-width: 100%;
}
.cms-toc__heading {
display: block;
font-size: var(--font-size-sm);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-muted);
margin-bottom: var(--space-3);
}
.cms-toc__list {
list-style: decimal;
padding-left: var(--space-5);
margin: 0;
}
.cms-toc__item {
margin: 0;
line-height: 1.5;
}
.cms-toc__item + .cms-toc__item {
margin-top: var(--space-1);
}
.cms-toc__item--h3,
.cms-toc__item--h4 {
padding-left: var(--space-4);
font-size: var(--font-size-sm);
}
.cms-toc__item--h4 {
padding-left: var(--space-8);
}
.cms-toc a {
color: var(--color-brand);
text-decoration: none;
}
.cms-toc a:hover {
text-decoration: underline;
}
/* ── Blok: YouTube ────────────────────────────────────────────────────────── */
.cms-video {
margin: var(--space-8) 0;
}
.cms-video--youtube {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
overflow: hidden;
border-radius: var(--radius-md);
background: #000;
}
.cms-video--youtube iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: none;
}
/* ── Blok: plik do pobrania ───────────────────────────────────────────────── */
.cms-download-file {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-5);
background: var(--color-muted);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
color: var(--color-brand);
text-decoration: none;
font-size: var(--font-size-sm);
font-weight: 600;
transition: background var(--transition-fast), border-color var(--transition-fast);
}
.cms-download-file:hover {
background: var(--color-brand-lighter);
border-color: var(--color-brand);
}
.cms-download-file:focus-visible {
outline: 2px solid var(--color-brand);
outline-offset: 2px;
}
.cms-download-file__icon {
font-size: 1.1em;
flex-shrink: 0;
}
/* ── Blok: PDF preview ────────────────────────────────────────────────────── */
.cms-pdf-preview {
margin: var(--space-8) 0;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
}
.cms-pdf-preview__caption {
display: block;
padding: var(--space-3) var(--space-4);
background: var(--color-muted);
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--color-text-secondary);
border-bottom: 1px solid var(--color-border);
}
.cms-pdf-preview__embed {
display: block;
width: 100%;
border: none;
}
.cms-pdf-preview__fallback-msg {
padding: var(--space-4);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.cms-pdf-preview__fallback-link,
.cms-pdf-preview__download {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
margin: var(--space-3) var(--space-4);
background: var(--color-muted);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
color: var(--color-brand);
text-decoration: none;
font-size: var(--font-size-sm);
font-weight: 600;
}
.cms-pdf-preview__download:hover,
.cms-pdf-preview__fallback-link:hover {
background: var(--color-brand-lighter);
border-color: var(--color-brand);
}
/* ── Blok: audio ──────────────────────────────────────────────────────────── */
.cms-audio {
margin: var(--space-8) 0;
padding: var(--space-5) var(--space-6);
background: var(--color-muted);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.cms-audio__caption {
font-weight: 700;
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.cms-audio__player {
width: 100%;
border-radius: var(--radius-sm);
}
.cms-audio__download,
.cms-audio__transcript {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--font-size-sm);
color: var(--color-brand);
text-decoration: none;
}
.cms-audio__download:hover,
.cms-audio__transcript:hover {
text-decoration: underline;
}
/* ── Dark mode dla CMS content ────────────────────────────────────────────── */
.dark .cms-content blockquote {
background: var(--color-brand-dark-bg);
border-left-color: var(--color-brand);
}
.dark .cms-toc {
background: var(--color-surface);
border-color: var(--color-border);
}
.dark .cms-download-file,
.dark .cms-pdf-preview__caption,
.dark .cms-audio {
background: var(--color-surface);
border-color: var(--color-border);
}
/* ── Filament 5 RichEditor — nowe tagi (mark, small, sub, sup, code inline) ── */
.cms-content mark {
background: #fef08a;
color: inherit;
padding: 0 0.15em;
border-radius: 2px;
}
.dark .cms-content mark {
background: #713f12;
color: #fef9c3;
}
.cms-content small {
font-size: 0.82em;
color: var(--color-text-muted);
}
.cms-content sub,
.cms-content sup {
font-size: 0.72em;
line-height: 0;
position: relative;
vertical-align: baseline;
}
.cms-content sup { top: -0.45em; }
.cms-content sub { bottom: -0.25em; }
.cms-content code {
font-family: 'Courier New', Courier, monospace;
font-size: 0.88em;
background: var(--color-muted);
border: 1px solid var(--color-border);
border-radius: 3px;
padding: 0.1em 0.35em;
}
.dark .cms-content code {
background: var(--color-surface);
border-color: var(--color-border);
}
/* Filament 5 „lead" class — lead paragraph */
.cms-content p.lead {
font-size: 1.15em;
line-height: 1.65;
color: var(--color-text);
font-weight: 400;
}
/* Filament 5 details/summary — collapsible */
.cms-content details {
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: var(--space-3) var(--space-4);
margin-top: var(--space-4);
}
.cms-content summary {
font-weight: 600;
cursor: pointer;
user-select: none;
list-style: none;
display: flex;
align-items: center;
gap: var(--space-2);
}
.cms-content summary::before {
content: '▶';
font-size: 0.7em;
transition: transform 0.2s;
flex-shrink: 0;
}
.cms-content details[open] > summary::before {
transform: rotate(90deg);
}
.cms-content details > *:not(summary) {
margin-top: var(--space-3);
}
/* ── Legacy klasy z TinyMCE — obsługiwane przez renderer / CSS ─────────────
Redaktor może je wpisać ręcznie w source view lub wkleić gotowy HTML.
NIE są dostępne z toolbar edytora (brak TipTap style picker).
────────────────────────────────────────────────────────────────────────── */
/* Cytat — alternatywny styl (mniej wyróżniony niż blockquote) */
.cms-content .cytat {
border-left: 3px solid var(--color-border);
padding-left: var(--space-4);
margin: var(--space-5) 0;
color: var(--color-text-muted);
font-style: italic;
}
/* Kolumny — dwie lub trzy */
.cms-content .column-count2 {
column-count: 2;
column-gap: var(--space-6);
orphans: 2;
widows: 2;
}
.cms-content .column-count3 {
column-count: 3;
column-gap: var(--space-5);
orphans: 2;
widows: 2;
}
/* Tabela bez obramowania */
.cms-content .table-cleared,
.cms-content .table-cleared td,
.cms-content .table-cleared th {
border: none;
background: transparent;
}
/* Wyróżniony box / „tip box" */
.cms-content .mybox {
border: 1px solid var(--color-brand);
border-left: 4px solid var(--color-brand);
background: var(--color-brand-light, #f0fdf4);
border-radius: var(--radius-sm);
padding: var(--space-4) var(--space-5);
margin: var(--space-5) 0;
}
.dark .cms-content .mybox {
background: var(--color-brand-dark-bg, #14532d);
border-color: var(--color-brand);
}
/* Float: lewo / prawo / pełna szerokość */
.cms-content .fleft {
float: left;
margin: 0 var(--space-5) var(--space-4) 0;
max-width: 50%;
}
.cms-content .fright {
float: right;
margin: 0 0 var(--space-4) var(--space-5);
max-width: 50%;
}
.cms-content .fullwidth {
display: block;
width: 100%;
max-width: 100%;
margin: var(--space-4) 0;
float: none;
}
/* Clearfix po float-owanych elementach */
.cms-content .fleft + *::after,
.cms-content .fright + *::after {
content: '';
display: table;
clear: both;
}
/* Przyciski — do użycia np. w CTA pod artykułem */
.cms-content .button,
.cms-content a.button {
display: inline-block;
padding: var(--space-2) var(--space-5);
border-radius: var(--radius-sm);
font-weight: 600;
font-size: var(--font-size-sm);
text-decoration: none;
cursor: pointer;
background: var(--color-brand);
color: #fff;
transition: opacity 0.15s;
}
.cms-content .button:hover,
.cms-content a.button:hover {
opacity: 0.85;
text-decoration: none;
}
.cms-content .button-light,
.cms-content a.button-light {
background: var(--color-muted);
color: var(--color-text);
border: 1px solid var(--color-border);
}
.cms-content .button-green,
.cms-content a.button-green {
background: #16a34a;
color: #fff;
}
.cms-content .button-grafit,
.cms-content a.button-grafit {
background: #374151;
color: #fff;
}
.cms-content .button-red,
.cms-content a.button-red {
background: #dc2626;
color: #fff;
}
/* Lightbox — style dla linku otwierającego obraz w cms-lightbox.
Plugin CmsLightbox (plugins/cms-lightbox/cms-lightbox.js) wykrywa:
• a[data-lightbox] — jawnie oznaczone przez HugeRTE lub CmsContentRenderer
• a.lightbox — stara klasa z link-dialogu; main.js dodaje data-lightbox
jeśli href wskazuje na plik graficzny (backward compat)
Auto-detect w .cms-content: linki do obrazów zawierające ![]()
są wykrywane
automatycznie przez CmsLightbox._autoDetect() bez żadnych klas. */
.cms-content a.lightbox {
display: inline-block;
cursor: zoom-in;
}
.cms-content a.lightbox img {
display: block;
}
/* ── cms-image — figure generowany przez expandImage() w CmsContentRenderer ── */
/* Kontener */
.cms-content .cms-image {
display: block;
margin: var(--space-6) 0;
}
/* ![]()
wewnątrz figure — zawsze responsywny */
.cms-content .cms-image img {
display: block;
max-width: 100%;
height: auto;
border-radius: var(--radius-sm);
}
/* Link lightboxa — bez podkreślenia, cursor zoom */
.cms-content .cms-image a[data-lightbox] {
display: inline-block;
text-decoration: none;
cursor: zoom-in;
}
.cms-content .cms-image a[data-lightbox]:focus-visible {
outline: 2px solid var(--color-brand);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
/* Wariant: normal — wyśrodkowany, ograniczona szerokość */
.cms-content .cms-image--normal {
margin-left: auto;
margin-right: auto;
text-align: center;
max-width: 100%;
}
/* Wariant: left — float lewo, tekst opływa */
.cms-content .cms-image--left {
float: left;
max-width: 45%;
margin: 0 var(--space-6) var(--space-4) 0;
text-align: left;
}
/* Wariant: right — float prawo, tekst opływa */
.cms-content .cms-image--right {
float: right;
max-width: 45%;
margin: 0 0 var(--space-4) var(--space-6);
text-align: right;
}
/* Wariant: fullwidth — pełna szerokość kontenera */
.cms-content .cms-image--fullwidth {
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
text-align: center;
}
.cms-content .cms-image--fullwidth img {
width: 100%;
border-radius: 0;
}
/* Clearfix po float-owanych figurach */
.cms-content .cms-image--left + *,
.cms-content .cms-image--right + * {
display: flow-root;
}
/* Figcaption wewnątrz .cms-image */
.cms-content .cms-image figcaption {
display: block;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
text-align: center;
margin-top: var(--space-2);
font-style: italic;
padding: 0 var(--space-2);
}
/* ── img.cms-image — Przypadek A: obraz bez podpisu i bez lightboxa ── */
.cms-content img.cms-image {
max-width: 100%;
height: auto;
border-radius: var(--radius-sm);
}
/* ── a.cms-image-link — Przypadek B: lightbox bez podpisu ── */
.cms-content a.cms-image-link {
display: inline-block;
text-decoration: none;
cursor: zoom-in;
}
.cms-content a.cms-image-link img {
display: block;
max-width: 100%;
height: auto;
border-radius: var(--radius-sm);
}
.cms-content a.cms-image-link:focus-visible {
outline: 2px solid var(--color-brand);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
/* Wariant normalny (wyśrodkowany blok) dla a.cms-image-link */
.cms-content a.cms-image-link.cms-image--normal {
display: block;
margin: var(--space-6) auto;
text-align: center;
}
/* ── cms-image-figure — figure z podpisem z HugeRTE (cms_image button) ──── */
/* Struktura: */
/* ![]()
*/
/* Podpis */
/* */
.cms-content figure.cms-image-figure {
display: inline-block;
background: #ffffff;
padding: 8px 8px 6px;
border: 1px solid #e2e8f0;
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0,0,0,.08);
margin: var(--space-3) var(--space-2);
vertical-align: top;
max-width: 100%;
}
.cms-content figure.cms-image-figure img {
display: block;
max-width: 100%;
height: auto;
border-radius: 2px;
}
.cms-content figure.cms-image-figure figcaption {
display: block;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
font-style: italic;
text-align: center;
padding: 5px 4px 2px;
line-height: 1.4;
}
/* Float z podpisem — klasa trafia na figure, nie na img */
.cms-content figure.cms-image-figure.fleft {
float: left;
margin: 0 var(--space-5) var(--space-4) 0;
max-width: 50%;
}
.cms-content figure.cms-image-figure.fright {
float: right;
margin: 0 0 var(--space-4) var(--space-5);
max-width: 50%;
}
.cms-content figure.cms-image-figure.fullwidth {
display: block;
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
/* Clearfix po float-owanych figurach z podpisem */
.cms-content figure.cms-image-figure.fleft + *,
.cms-content figure.cms-image-figure.fright + * {
display: flow-root;
}
/* ═══════════════════════════════════════════════════════════════════════════
Etap 10H — Bloki redakcyjne: box, accordion, tabs/pills, columns
═══════════════════════════════════════════════════════════════════════════ */
/* ── Box / wyróżnienie ────────────────────────────────────────────────────── */
.cms-box {
border: 1px solid var(--color-border);
border-left: 4px solid var(--color-brand);
border-radius: var(--radius-sm);
padding: var(--space-4) var(--space-5);
margin: var(--space-5) 0;
background: var(--color-muted);
}
.cms-box .cms-box__title {
display: block;
font-size: var(--font-size-sm);
font-weight: 700;
margin-bottom: var(--space-2);
margin-top: 0;
}
.cms-box > *:last-child { margin-bottom: 0; }
.cms-box--default {
border-left-color: var(--color-brand);
background: var(--color-muted);
}
.cms-box--info {
border-left-color: #3b82f6;
background: #eff6ff;
}
.cms-box--success {
border-left-color: #16a34a;
background: #f0fdf4;
}
.cms-box--warning {
border-left-color: #d97706;
background: #fffbeb;
}
.cms-box--important {
border-left-color: #dc2626;
background: #fef2f2;
}
.dark .cms-box--default { background: var(--color-surface); }
.dark .cms-box--info {
background: #1e3a5f;
border-left-color: #60a5fa;
}
.dark .cms-box--success {
background: #14532d;
border-left-color: #4ade80;
}
.dark .cms-box--warning {
background: #451a03;
border-left-color: #fbbf24;
}
.dark .cms-box--important {
background: #450a0a;
border-left-color: #f87171;
}
/* ── Accordion ────────────────────────────────────────────────────────────── */
.cms-accordion {
margin: var(--space-6) 0;
}
.cms-accordion__title {
font-size: 1.1rem;
font-weight: 700;
margin: 0 0 var(--space-3);
padding-bottom: var(--space-2);
border-bottom: 2px solid var(--color-brand);
}
.cms-accordion__item {
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
margin-bottom: var(--space-2);
overflow: hidden;
}
.cms-accordion__heading {
margin: 0;
font-size: 1rem;
font-weight: normal;
}
.cms-accordion__button {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: var(--space-3) var(--space-5);
background: var(--color-muted);
border: none;
text-align: left;
font-size: 1rem;
font-weight: 600;
color: var(--color-text);
cursor: pointer;
transition: background var(--transition-fast, 0.15s);
line-height: 1.4;
}
.cms-accordion__button::after {
content: '+';
font-size: 1.3em;
font-weight: 300;
flex-shrink: 0;
margin-left: var(--space-3);
line-height: 1;
}
.cms-accordion__button[aria-expanded="true"]::after {
content: '\2212'; /* − minus sign */
}
.cms-accordion__button:hover {
background: var(--color-brand-lighter, #dbeafe);
}
.cms-accordion__button:focus-visible {
outline: 2px solid var(--color-brand);
outline-offset: -2px;
}
.cms-accordion__panel {
padding: var(--space-4) var(--space-5);
border-top: 1px solid var(--color-border);
}
/* Panel hidden gdy zamknięty; bez JS — panele widoczne (progresywne ujawnienie) */
.cms-accordion__panel[hidden] {
display: none;
}
.dark .cms-accordion__button {
background: var(--color-surface);
color: var(--color-text);
}
.dark .cms-accordion__button:hover {
background: var(--color-brand-dark-bg, #1e3a5f);
}
.dark .cms-accordion__item,
.dark .cms-accordion__panel {
border-color: var(--color-border);
}
/* ── Tabs / Pills ─────────────────────────────────────────────────────────── */
.cms-tabs {
margin: var(--space-6) 0;
}
.cms-tabs__list {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
border-bottom: 2px solid var(--color-border);
margin-bottom: var(--space-4);
}
.cms-tabs__tab {
padding: var(--space-2) var(--space-4);
background: transparent;
border: 1px solid transparent;
border-bottom: none;
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--color-text-muted);
cursor: pointer;
transition: color var(--transition-fast, 0.15s), background var(--transition-fast, 0.15s);
line-height: 1.4;
position: relative;
margin-bottom: -2px;
}
.cms-tabs__tab[aria-selected="true"] {
background: var(--color-surface, #fff);
border-color: var(--color-border);
border-bottom-color: transparent;
color: var(--color-brand);
}
.cms-tabs__tab:hover:not([aria-selected="true"]) {
color: var(--color-text);
background: var(--color-muted);
}
.cms-tabs__tab:focus-visible {
outline: 2px solid var(--color-brand);
outline-offset: 2px;
}
/* Wariant: pills */
.cms-tabs--pills .cms-tabs__list {
border-bottom: none;
gap: var(--space-2);
margin-bottom: var(--space-4);
}
.cms-tabs--pills .cms-tabs__tab {
border-radius: 9999px;
border: 1px solid var(--color-border);
margin-bottom: 0;
padding: var(--space-2) var(--space-5);
}
.cms-tabs--pills .cms-tabs__tab[aria-selected="true"] {
background: var(--color-brand);
border-color: var(--color-brand);
color: #fff;
}
.cms-tabs__panel {
padding: var(--space-1) 0;
}
.cms-tabs__panel[hidden] {
display: none;
}
.dark .cms-tabs__list {
border-bottom-color: var(--color-border);
}
.dark .cms-tabs__tab[aria-selected="true"] {
background: var(--color-surface);
border-color: var(--color-border);
border-bottom-color: var(--color-surface);
}
.dark .cms-tabs--pills .cms-tabs__tab[aria-selected="true"] {
background: var(--color-brand);
border-color: var(--color-brand);
color: #fff;
}
/* ── Kolumny ──────────────────────────────────────────────────────────────── */
.cms-columns {
display: flex;
flex-wrap: wrap;
gap: var(--space-6);
margin: var(--space-6) 0;
align-items: flex-start;
}
.cms-column {
flex: 1;
min-width: min(100%, 200px);
}
.cms-columns--2 .cms-column {
flex-basis: calc(50% - var(--space-3));
}
.cms-columns--3 .cms-column {
flex-basis: calc(33.333% - var(--space-4));
}
@media (max-width: 640px) {
.cms-columns--2 .cms-column,
.cms-columns--3 .cms-column {
flex-basis: 100%;
}
}
/* ── Ikony FontAwesome (cms-icon) — Etap 10I ─────────────────────────────── */
.cms-icon {
display: inline-block;
line-height: 1;
vertical-align: -0.08em;
}
/* Rozmiary */
.cms-icon--sm { font-size: 0.75em; }
.cms-icon--lg { font-size: 1.25em; }
.cms-icon--xl { font-size: 2em; }
/* Warianty kolorystyczne — spełniają kontrast WCAG AA */
.cms-icon--muted { color: var(--color-text-muted); }
.cms-icon--brand { color: var(--color-brand); }
.cms-icon--success { color: #15803d; } /* zielony, kontrast >4.5:1 na białym */
.cms-icon--warning { color: #b45309; } /* bursztynowy, kontrast >4.5:1 na białym */
/* Dark mode */
.dark .cms-icon--success { color: #4ade80; }
.dark .cms-icon--warning { color: #fbbf24; }
/* FA7 font-family override — zapobiega nadpisaniu przez system font stack */
/* Dotyczy zarówno frontendu jak i treści edytora eksportowanych do HTML */
.cms-icon.fa-solid,
.cms-icon.fa-regular {
font-family: "Font Awesome 7 Free" !important;
}
.cms-icon.fa-solid { font-weight: 900 !important; }
.cms-icon.fa-regular { font-weight: 400 !important; }
.cms-icon.fa-brands {
font-family: "Font Awesome 7 Brands" !important;
font-weight: 400 !important;
}
/* Picker ikon (modal admina) — inline style w JS wystarczy, ale CSS jako backup */
.cmsicon-btn i.fa-solid,
.cmsicon-btn i.fa-regular {
font-family: "Font Awesome 7 Free" !important;
}
.cmsicon-btn i.fa-solid { font-weight: 900 !important; }
.cmsicon-btn i.fa-regular { font-weight: 400 !important; }
.cmsicon-btn i.fa-brands {
font-family: "Font Awesome 7 Brands" !important;
font-weight: 400 !important;
}