:root {
--czerw: #BD1B24;
--czerw-jasna: #E33B44;
--czerw-napis: #1A0405;
--grafit: #37474F;
--grafit-gleboki: #243036;
--stal: #5C6E78;
--stal-jasna: #8A9BA5;
--mgla: #EDF0F1;
--biel: #FFFFFF;
--mleko: #EDF1F2;
--panel: #EEF1F2;
--linia: rgba(55, 71, 79, 0.12);
--linia-mocna: rgba(55, 71, 79, 0.22);
--r-panel: 32px;
--r-karta: 20px;
--r-kadr: 24px;
--r-pigula: 999px;
--szklo-tlo: rgba(255, 255, 255, 0.54);
--szklo-obrys: rgba(255, 255, 255, 0.45);
--r-szklo: 28px;
--szklo-filtr: blur(50px) saturate(1.9) contrast(0.6) brightness(1.58);
--szklo-blik: inset 0 1px 0 rgba(255, 255, 255, 0.9),
inset 0 -1px 0 rgba(255, 255, 255, 0.24);
--szklo-cien: 0 1px 2px rgba(36, 48, 54, 0.08),
0 18px 44px -28px rgba(36, 48, 54, 0.6);
--cien-karta: 0 1px 2px rgba(36, 48, 54, 0.05), 0 12px 28px -18px rgba(36, 48, 54, 0.35);
--cien-uniesiona: 0 2px 4px rgba(36, 48, 54, 0.06), 0 26px 48px -24px rgba(36, 48, 54, 0.45);
--cien-belka: 0 1px 0 rgba(55, 71, 79, 0.08), 0 12px 30px -22px rgba(36, 48, 54, 0.5);
--powloka: 1200px;
--powloka-hero: 1040px;
--krzywa: cubic-bezier(0.22, 0.61, 0.36, 1);
--belka-h: 68px;
}
@media (min-width: 1600px) { :root { --powloka: 1320px; --powloka-hero: 1160px; } }
@media (min-width: 1900px) { :root { --powloka: 1440px; --powloka-hero: 1280px; } }
@media (min-width: 2300px) { :root { --powloka: 1560px; --powloka-hero: 1400px; } }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--belka-h) + 1.5rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
margin: 0;
background: var(--biel);
color: var(--grafit);
font-family: 'InterVariable', system-ui, -apple-system, 'Segoe UI', sans-serif;
font-size: 1rem;
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
img, iframe { max-width: 100%; display: block; }
a { color: inherit; }
.pomin {
position: absolute; left: 0.75rem; top: -4rem; z-index: 100;
padding: 0.7rem 1.1rem; border-radius: 14px;
background: var(--grafit-gleboki); color: var(--mleko);
text-decoration: none; font-weight: 600;
transition: top 0.2s var(--krzywa);
}
.pomin:focus-visible { top: 0.75rem; }
:where(a, button, summary, [tabindex]):focus-visible {
outline: 3px solid var(--czerw);
outline-offset: 3px;
border-radius: 8px;
}
.powloka { width: min(100% - 3rem, var(--powloka)); margin-inline: auto; }
.dane {
font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-weight: 500;
font-variant-numeric: tabular-nums;
}
.display {
font-family: 'InterVariable', system-ui, sans-serif;
font-weight: 800; letter-spacing: -0.035em; line-height: 1.03; margin: 0;
font-size: clamp(2.6rem, 5.9vw, 4.5rem);
text-wrap: balance;
}
.display--sr { font-size: clamp(2.1rem, 4.6vw, 3.5rem); letter-spacing: -0.03em; line-height: 1.06; }
.display em { font-style: normal; color: var(--czerw); }
.etykieta {
font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-weight: 500; font-size: 0.75rem; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--stal); margin: 0 0 1.1rem;
}
.etykieta--jasna { color: var(--stal-jasna); }
.lead { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.65; color: var(--stal); }
.podtytul {
max-width: 52ch; margin: 1.25rem auto 0;
color: var(--stal); font-size: 1.0625rem; line-height: 1.65; text-wrap: pretty;
}
.drobne { font-size: 0.875rem; color: var(--stal); line-height: 1.6; }
.pigula {
display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
min-height: 46px; padding: 0.62rem 1.35rem;
border-radius: var(--r-pigula); border: 1px solid transparent;
font-size: 0.9375rem; font-weight: 600; line-height: 1.2;
text-decoration: none; white-space: nowrap;
transition: background-color 0.25s var(--krzywa), color 0.25s var(--krzywa),
border-color 0.25s var(--krzywa), transform 0.25s var(--krzywa);
}
.pigula--duza { min-height: 54px; padding: 0.85rem 1.75rem; font-size: 1rem; }
.pigula--mala { min-height: 44px; padding: 0.6rem 1.15rem; font-size: 0.9375rem; }
.pigula svg { width: 18px; height: 18px; flex: none; }
.pigula--ciemna { background: var(--grafit-gleboki); color: var(--mleko); }
.pigula--ciemna:hover { background: #16232a; }
.pigula--obrys { background: var(--biel); color: var(--grafit); border-color: var(--linia-mocna); }
.pigula--obrys:hover { border-color: var(--grafit); }
.pigula--cicha { background: transparent; color: var(--grafit); border-color: var(--linia); }
.pigula--cicha:hover { background: rgba(55, 71, 79, 0.06); }
.pigula--czerwona { background: var(--czerw-jasna); color: var(--czerw-napis); }
.pigula--czerwona:hover { background: #ef5158; }
.pigula--akcent { --g4-akcent: #fff; background: var(--czerw); color: #fff; }
.pigula--akcent:hover { background: #A3161E; }
.pigula--akcent .g4-ik, .pigula--akcent svg { color: #fff; }
.pigula--jasna { background: var(--mleko); color: var(--grafit-gleboki); }
.pigula--jasna:hover { background: #fff; }
.pigula--jasny-obrys { background: transparent; color: var(--mleko); border-color: rgba(237, 241, 242, 0.4); }
.pigula--jasny-obrys:hover { border-color: var(--mleko); background: rgba(237, 241, 242, 0.08); }
.pigula:active { transform: translateY(1px); }
.pigulki { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.sekcja { padding-block: clamp(4.5rem, 9vw, 8rem); }
.sekcja + .sekcja { padding-top: 0; }
.panel {
margin-inline: clamp(0.75rem, 2vw, 1.5rem);
border-radius: var(--r-panel); background: var(--panel);
padding-block: clamp(3.75rem, 7vw, 6rem);
margin-block: clamp(1rem, 2.5vw, 2rem);
}
.naglowek-sekcji { text-align: center; }
.dowody__wartosc {
font-family: 'InterVariable', sans-serif;
font-weight: 800; letter-spacing: -0.02em;
}
.dowody__podpis { margin: 0; color: var(--stal); }
.karta {
display: flex; flex-direction: column; background: var(--biel);
border-radius: var(--r-karta); padding: 2rem 1.85rem 1.75rem;
text-decoration: none; box-shadow: var(--cien-karta);
transition: transform 0.3s var(--krzywa), box-shadow 0.3s var(--krzywa);
}
@media (hover: hover) { a.karta:hover { transform: translateY(-3px); box-shadow: var(--cien-uniesiona); } }
.karta h3 {
font-family: 'InterVariable', sans-serif; font-weight: 800;
letter-spacing: -0.02em; font-size: 1.3125rem; line-height: 1.2; margin: 0 0 0.6rem;
}
.karta p { margin: 0 0 1.5rem; color: var(--stal); font-size: 0.9688rem; }
.pod-siatka {
display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center;
margin: clamp(2rem, 4vw, 3rem) 0 0;
}
.szybkie { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.szybkie li { display: flex; }
.szybkie > .szybkie__tytul {
display: block; grid-column: 1 / -1;
margin: 0.75rem 0 0.15rem; padding-bottom: 0.6rem;
border-bottom: 1px solid var(--linia);
font-family: 'InterVariable', sans-serif; font-weight: 800;
font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--stal);
}
.szybkie > .szybkie__tytul:first-child { margin-top: 0; }
.kafel-szybki {
position: relative;
display: flex; flex-direction: column; align-items: center; text-align: center;
width: 100%;
background: var(--biel); border: 1px solid transparent; border-radius: var(--r-karta);
padding: 1.85rem 1.5rem 1.7rem; box-shadow: var(--cien-karta);
text-decoration: none; color: var(--grafit);
transition: transform 0.25s var(--krzywa), box-shadow 0.25s var(--krzywa), border-color 0.25s var(--krzywa);
}
.kafel-szybki__ikona {
position: relative; flex: none;
width: 100%; height: 132px; margin-bottom: 1.15rem;
display: flex; align-items: center; justify-content: center;
}
.kafel-szybki__ikona::before {
content: ""; position: absolute; top: 50%; left: 50%; z-index: 0;
width: 176px; height: 176px; border-radius: 50%;
background: radial-gradient(closest-side, rgba(189, 27, 36, 0.11), rgba(189, 27, 36, 0) 72%);
transform: translate(-50%, -50%) scale(0.82); opacity: 0;
transition: opacity 0.3s var(--krzywa), transform 0.3s var(--krzywa);
}
.kafel-szybki__ikona img {
position: relative; z-index: 1;
width: 120px; height: 120px; display: block;
transition: transform 0.3s var(--krzywa);
}
.kafel-szybki__strzalka {
position: absolute; top: 1.1rem; right: 1.1rem;
width: 20px; height: 20px; color: var(--czerw);
transition: transform 0.25s var(--krzywa);
}
@media (hover: hover) {
.kafel-szybki:hover { transform: translateY(-4px); border-color: var(--linia-mocna); box-shadow: var(--cien-uniesiona); }
.kafel-szybki:hover .kafel-szybki__ikona img { transform: scale(1.06); }
.kafel-szybki:hover .kafel-szybki__ikona::before { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.kafel-szybki:hover .kafel-szybki__strzalka { transform: translate(2px, -2px); }
}
.kafel-szybki:focus-visible { outline: 3px solid var(--czerw); outline-offset: 3px; }
.kafel-szybki__nazwa {
font-family: 'InterVariable', sans-serif; font-weight: 800; letter-spacing: -0.015em;
font-size: 1.0625rem; line-height: 1.25; margin: 0 0 0.4rem;
text-wrap: balance;
}
.kafel-szybki__opis {
color: var(--stal); font-size: 0.875rem; line-height: 1.5;
max-width: 22ch; text-wrap: balance;
}
.zetony { list-style: none; margin: 0.35rem 0 1.75rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.zeton {
display: inline-flex; align-items: center;
padding: 0.4rem 0.75rem; border-radius: 10px;
background: var(--biel); border: 1px solid var(--linia);
font-family: 'IBM Plex Mono', monospace; font-weight: 500;
font-size: 0.8125rem; line-height: 1.2; color: var(--grafit);
font-variant-numeric: tabular-nums;
}
a.zeton { text-decoration: none; color: var(--czerw); transition: border-color 0.2s var(--krzywa); }
@media (hover: hover) { a.zeton:hover { border-color: var(--czerw); } }
a.zeton:focus-visible { outline: 3px solid var(--czerw); outline-offset: 2px; }
.sekcja .zeton { background: var(--mgla); border-color: transparent; }
.akord { background: var(--grafit-gleboki); color: var(--mleko); border-radius: var(--r-panel); padding: clamp(3.5rem, 8vw, 6.5rem) clamp(1.5rem, 5vw, 4rem); text-align: center; }
.akord .display { max-width: 18ch; margin-inline: auto; }
.akord .display em { color: var(--czerw-jasna); }
.akord__lead { max-width: 48ch; margin: 1.5rem auto 2.25rem; color: rgba(237, 241, 242, 0.82); font-size: 1.0625rem; }
.akord .pigulki { justify-content: center; }
.faq { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; text-align: left; align-content: start; }
.faq__poz {
background: var(--biel); border-radius: var(--r-karta);
box-shadow: var(--cien-karta); overflow: hidden;
align-self: start;
}
.faq__poz summary {
display: flex; align-items: center; justify-content: space-between;
padding: 1.25rem 1.5rem; cursor: pointer; list-style: none;
font-family: 'InterVariable', sans-serif; font-weight: 800; letter-spacing: -0.02em;
font-size: 1.0625rem; line-height: 1.3; min-height: 44px;
}
.faq__poz summary::-webkit-details-marker { display: none; }
.faq__poz summary:hover { color: var(--czerw); }
.faq__poz p { margin: 0; padding: 0 1.5rem 1.4rem; max-width: 68ch; color: var(--stal); font-size: 0.9375rem; line-height: 1.6; }
.faq__poz a { color: var(--czerw); }
.mapa { display: flex; flex-direction: column; gap: 0.85rem; width: min(100%, 1020px); margin-inline: auto; }
.mapa__rys { display: block; width: 100%; height: auto; }
.mapa__tlo path { fill: #DFE4E7; stroke: var(--panel); stroke-width: 2; }
.mapa__nasze path { fill: var(--czerw); stroke: var(--panel); stroke-width: 2; transition: fill 0.2s var(--krzywa); }
.mapa__dz:hover path, .mapa__dz:focus-visible path { fill: var(--grafit-gleboki); }
.mapa__dz:focus-visible { outline: 3px solid var(--czerw); outline-offset: 2px; }
.mapa__punkt circle { fill: var(--grafit-gleboki); stroke: var(--biel); stroke-width: 3; }
.mapa__punkt .mapa__punkt-srodek { fill: var(--biel); stroke: none; }
.mapa__podpis { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--stal); display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.mapa__osm { margin-left: auto; font-size: 0.6875rem; }
.mapa__pin { width: 11px; height: 11px; border-radius: 50%; background: var(--grafit-gleboki); box-shadow: inset 0 0 0 3px var(--biel); flex: none; }
.js .wejscie { opacity: 0; transform: translateY(22px); transition: opacity 0.75s var(--krzywa), transform 0.75s var(--krzywa); }
.js .wejscie.widoczne { opacity: 1; transform: none; }
.js .kaskada > * { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--krzywa), transform 0.7s var(--krzywa); }
.js .kaskada.widoczne > * { opacity: 1; transform: none; }
.kaskada.widoczne > *:nth-child(2) { transition-delay: 0.07s; }
.kaskada.widoczne > *:nth-child(3) { transition-delay: 0.14s; }
.kaskada.widoczne > *:nth-child(4) { transition-delay: 0.21s; }
.kaskada.widoczne > *:nth-child(5) { transition-delay: 0.28s; }
.kaskada.widoczne > *:nth-child(6) { transition-delay: 0.35s; }
@media (prefers-reduced-motion: reduce) {
.js .wejscie, .js .kaskada > * { opacity: 1 !important; transform: none !important; transition: none !important; }
.karta, .pigula { transition: none !important; }
.kafel-szybki, .kafel-szybki__ikona img, .kafel-szybki__ikona::before,
.kafel-szybki__strzalka { transition: none !important; }
}
@media (max-width: 1024px) {
.dowody__lista { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
.powloka { width: min(100% - 2rem, var(--powloka)); }
.faq { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
:root { --r-panel: 24px; }
.dowody__lista { grid-template-columns: 1fr; gap: 1.25rem; }
.display { font-size: clamp(2.15rem, 10vw, 3rem); }
.display--sr { font-size: clamp(1.85rem, 8vw, 2.4rem); }
.pod-siatka .pigula { flex: 1 1 100%; }
}
.karuzela-blok + .karuzela-blok { margin-top: clamp(2rem, 4vw, 3.25rem); }
.karuzela__spod {
display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1.25rem;
justify-content: center;
margin-top: 0.35rem;
}
.karuzela__ster { display: flex; gap: 0.5rem; }
.karuzela__ster[hidden] { display: none; }
.karuzela__ster-poz {
width: 44px; height: 44px; padding: 0; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
background: var(--biel); color: var(--grafit); font-family: inherit;
border: 1px solid var(--linia-mocna); border-radius: var(--r-pigula);
transition: border-color 0.2s var(--krzywa), background 0.2s var(--krzywa);
}
.karuzela__ster-poz svg { width: 20px; height: 20px; }
.karuzela__ster-poz:hover:not(:disabled) { border-color: var(--grafit); }
.karuzela__ster-poz:disabled { opacity: 0.35; cursor: default; }
.karuzela {
--tasma-wciecie: max(1.5rem, calc((100% - var(--powloka)) / 2));
--tasma-koniec: clamp(1rem, 2vw, 1.5rem);
--zapas-cien: 3.5rem;
list-style: none; margin: 0 0 calc(var(--zapas-cien) * -0.55) var(--tasma-wciecie);
padding-block: 0.75rem var(--zapas-cien);
padding-inline: 0 var(--tasma-koniec);
scroll-padding-inline: 0 var(--tasma-koniec);
display: flex; gap: clamp(1rem, 1.1vw, 1.35rem);
overflow-x: auto; overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
overscroll-behavior-x: contain;
scrollbar-width: none;
-ms-overflow-style: none;
}
.karuzela::-webkit-scrollbar { display: none; width: 0; height: 0; }
.karuzela__poz {
flex: 0 0 clamp(272px, 10vw + 175px, 360px); min-width: 0;
display: flex; scroll-snap-align: start;
}
.karta-grupa {
display: flex; flex-direction: column; width: 100%;
background: var(--biel); border: 1px solid var(--linia);
border-radius: var(--r-karta); box-shadow: var(--cien-karta);
overflow: hidden;
text-decoration: none; color: var(--grafit); overflow-wrap: break-word;
transition: transform 0.25s var(--krzywa), box-shadow 0.25s var(--krzywa),
border-color 0.25s var(--krzywa);
}
@media (hover: hover) {
.karta-grupa:hover { transform: translateY(-3px); box-shadow: var(--cien-uniesiona); border-color: transparent; }
.karta-grupa:hover .karta-grupa__kadr img { transform: scale(1.04); }
.karta-grupa:hover .karta-tasma__strzalka { transform: translate(2px, -2px); }
}
.karta-grupa__kadr { display: block; overflow: hidden; background: var(--mgla); }
.karta-grupa__kadr img {
display: block; width: 100%; height: auto; aspect-ratio: 16 / 10;
object-fit: cover; transition: transform 0.45s var(--krzywa);
}
.karta-grupa__tresc {
display: flex; flex-direction: column; flex: 1 1 auto;
padding: 1.15rem 1.25rem 1.05rem;
}
.karta-grupa__nazwa {
margin: 0 0 0.4rem; font-family: 'InterVariable', sans-serif;
font-weight: 800; letter-spacing: -0.02em;
font-size: 1.125rem; line-height: 1.22;
}
.karta-grupa__opis { color: var(--stal); font-size: 0.9375rem; line-height: 1.5; }
.karta-grupa__stopka {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; margin-top: auto; padding-top: 1rem;
border-top: 1px solid var(--linia);
}
.karta-grupa__licznik { font-size: 0.8125rem; color: var(--stal); }
.karta-grupa .karta-tasma__strzalka {
width: 18px; height: 18px; flex: none; color: var(--czerw);
transition: transform 0.25s var(--krzywa);
}
@media (prefers-reduced-motion: reduce) {
.karta-grupa, .karta-grupa__kadr img, .karta-grupa .karta-tasma__strzalka { transition: none !important; }
}
.przesun-palcem {
display: none;
align-items: center; gap: 0.45rem;
margin: 0;
color: var(--stal);
font-size: 0.8125rem; line-height: 1.45;
}
.przesun-palcem svg { width: 20px; height: 20px; flex: none; }
.odeslanie { max-width: 62ch; margin: 1.75rem auto 0; text-align: center; color: var(--stal); line-height: 1.65; }
.odeslanie a { color: var(--czerw); text-underline-offset: 3px; }
@media (max-width: 820px) {
.karuzela__ster { display: none; }
.karuzela { --tasma-wciecie: max(1rem, calc((100% - var(--powloka)) / 2)); --zapas-cien: 2rem; }
.przesun-palcem { display: flex; }
.karuzela__spod { justify-content: flex-start; }
}
@media (max-width: 640px) {
}
@media (prefers-reduced-motion: reduce) {
.karuzela { scroll-behavior: auto; }
.karuzela__ster-poz { transition: none !important; }
}
@media (min-width: 821px) and (max-width: 1024px) {
.kafel-szybki {
display: grid; grid-template-columns: 120px 1fr; align-items: center;
column-gap: 1.35rem; text-align: left; padding: 1.35rem 1.5rem;
}
.kafel-szybki__ikona { width: 120px; height: 120px; margin: 0; grid-row: span 2; }
.kafel-szybki__ikona img { width: 114px; height: 114px; }
.kafel-szybki__ikona::before { width: 156px; height: 156px; }
.kafel-szybki__nazwa { align-self: end; text-wrap: pretty; padding-right: 1.6rem; }
.kafel-szybki__opis { align-self: start; max-width: none; text-wrap: pretty; }
}
@media (max-width: 820px) {
}
.sekcja--promocje { padding-block: clamp(1.5rem, 3vw, 3rem); }
.harmonijka__glowa { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.harmonijka__glowa .etykieta { margin: 0; }
.harmonijka__tytul {
margin: 0; font-size: clamp(1.35rem, 2.6vw, 1.85rem);
font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; color: var(--grafit);
}
.harmonijka__tytul em { font-style: normal; color: var(--czerw); }
.harmonijka__nota { margin: 1rem 0 0; font-size: 0.9375rem; color: var(--stal); }
.sekcja--promocje .przesun-palcem { margin-top: 0.35rem; }
.harmonijka__nota a { color: var(--czerw); }
.harmonijka { margin-bottom: 0; }
.promo {
position: relative; overflow: hidden;
border-radius: var(--r-karta); background: var(--grafit-gleboki);
box-shadow: var(--cien-karta);
}
.promo__radio {
position: absolute; width: 1px; height: 1px; margin: -1px;
padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.promo__foto {
position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
object-fit: cover; display: block;
}
.promo::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(180deg,
rgba(20, 28, 33, 0.18) 0%,
rgba(20, 28, 33, 0.06) 45%,
rgba(20, 28, 33, 0.26) 100%);
transition: background 0.5s var(--krzywa);
}
.promo:not(:has(.promo__radio:checked))::after {
background: linear-gradient(180deg,
rgba(20, 28, 33, 0.66) 0%,
rgba(20, 28, 33, 0.62) 45%,
rgba(20, 28, 33, 0.72) 100%);
}
.promo__glowa, .promo__slowa { z-index: 1; }
.promo__glowa { display: flex; cursor: pointer; }
.promo__rabat {
display: inline-flex; align-items: center; justify-content: center;
background: var(--czerw); color: var(--biel);
box-shadow: 0 4px 14px -8px rgba(36, 48, 54, 0.6);
font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-weight: 600; font-size: 0.875rem; letter-spacing: 0.01em; line-height: 1;
padding: 0.36rem 0.66rem 0.38rem; border-radius: var(--r-pigula);
font-variant-numeric: tabular-nums;
}
.promo__nazwa { color: var(--biel); font-weight: 700; letter-spacing: -0.01em; }
.promo__radio:focus-visible + .promo__glowa {
outline: 3px solid var(--czerw-jasna); outline-offset: -3px; border-radius: var(--r-karta);
}
.promo__slowa {
color: var(--grafit);
background: var(--szklo-tlo);
-webkit-backdrop-filter: var(--szklo-filtr);
backdrop-filter: var(--szklo-filtr);
border: 1px solid var(--szklo-obrys);
border-radius: var(--r-szklo);
box-shadow: var(--szklo-blik), var(--szklo-cien);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.promo__slowa { background: rgba(255, 255, 255, 0.94); }
}
.promo__tytul {
margin: 0 0 0.4rem; color: var(--grafit); max-width: 24ch;
font-size: clamp(1.15rem, 1.9vw, 1.5rem); font-weight: 800; letter-spacing: -0.02em;
}
.promo__zdanie { margin: 0 0 1rem; color: var(--grafit); max-width: 46ch; font-size: 0.9375rem; line-height: 1.55; }
.promo__akcje { display: flex; align-items: center; gap: 0.75rem 1.1rem; flex-wrap: wrap; margin: 0; }
.promo__lacze {
color: var(--grafit); text-decoration: underline; text-underline-offset: 3px;
font-size: 0.875rem;
display: inline-flex; align-items: center; min-height: 44px;
}
.promo__lacze:hover { color: var(--czerw); }
@media (max-width: 820px) {
.harmonijka > .promo {
display: block;
flex: 0 0 min(78vw, 21rem);
height: clamp(22rem, 114vw, 27rem);
}
.promo__radio { display: none; }
.promo__glowa { position: absolute; inset: 1rem auto auto 1rem; }
.promo__nazwa { display: none; }
.promo__slowa {
position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.75rem;
padding: 0.9rem 1rem 1rem; opacity: 1;
}
.promo__tytul { font-size: 1.0625rem; margin-bottom: 0.3rem; }
.promo__zdanie { font-size: 0.875rem; margin-bottom: 0.85rem; }
}
@media (min-width: 821px) {
.harmonijka {
display: flex; height: clamp(21rem, 34vw, 30rem);
width: min(100% - 3rem, var(--powloka)); margin: 0 auto;
padding: 0; overflow: visible;
scroll-snap-type: none; overscroll-behavior-x: auto;
gap: clamp(0.5rem, 1vw, 0.75rem);
}
.harmonijka > .promo { flex: 0 1 5.75rem; }
.promo {
min-width: 5.75rem;
transition: flex-grow 0.55s var(--krzywa);
}
.promo:has(.promo__radio:checked) { flex-grow: 1; }
.promo__glowa {
position: absolute; inset: 0; flex-direction: column;
align-items: center; justify-content: space-between; padding: 1.1rem 0.9rem;
}
.promo__nazwa {
writing-mode: vertical-rl; transform: rotate(180deg);
font-size: 1.0625rem; line-height: 1.2;
max-height: 100%; overflow: hidden;
transition: opacity 0.3s var(--krzywa);
}
.promo:has(.promo__radio:checked) .promo__nazwa { opacity: 0; }
.promo:has(.promo__radio:checked) .promo__glowa {
inset: 0 auto auto 0; width: auto; height: auto; padding: 1.25rem;
}
.promo__slowa {
position: absolute; left: 1.25rem; bottom: 1.25rem; right: 1.25rem;
max-width: 32rem; padding: 1.35rem 1.5rem 1.45rem;
opacity: 0; transform: translateY(0.75rem);
transition: opacity 0.4s var(--krzywa), transform 0.4s var(--krzywa);
}
.promo:has(.promo__radio:checked) .promo__slowa {
opacity: 1; transform: none; transition-delay: 0.2s;
}
.promo:not(:has(.promo__radio:checked)) .promo__slowa { visibility: hidden; }
}
@supports not selector(:has(*)) {
.harmonijka { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); height: auto; overflow: visible; }
.promo, .harmonijka > .promo { height: 22rem; flex: none; }
.promo__glowa { position: absolute; inset: 0 auto auto 0; padding: 1.1rem; }
.promo__nazwa { display: none; }
.promo__slowa { position: absolute; left: 0; right: 0; bottom: 0; padding: 4rem 1.35rem 1.35rem; opacity: 1; visibility: visible; }
}
@media (prefers-reduced-motion: reduce) {
.promo, .promo__slowa, .promo__nazwa, .promo::after { transition: none !important; }
}
.pas-zdjec { display: grid; gap: clamp(0.75rem, 1.4vw, 1.15rem); }
@media (min-width: 900px) {
.pas-zdjec { grid-template-columns: 1.9fr 1fr; }
}
.zdjecie { margin: 0; border-radius: var(--r-karta); overflow: hidden; background: var(--mgla); }
.zdjecie img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.zdjecie--szerokie img { aspect-ratio: 16 / 10; }
.zdjecie figcaption { padding: 0.6rem 0.2rem 0; color: var(--stal); }
a.dane { white-space: nowrap; }
.tresc { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(3rem, 6vw, 5rem); }
.tresc__uklad {
display: grid;
grid-template-columns: minmax(0, 62ch) 300px;
gap: clamp(2.5rem, 5vw, 4.5rem);
justify-content: space-between;
align-items: start;
}
.proza { font-size: 1.0625rem; line-height: 1.75; color: var(--grafit); max-width: 62ch; margin-inline: auto; }
.tresc__uklad > .proza { margin-inline: 0; }
.powloka > .proza:not([style*="text-align"]) { margin-inline: 0; }
.proza > :first-child { margin-top: 0; }
.proza p { margin: 0 0 1.25rem; text-wrap: pretty; }
.proza h2 {
font-family: 'InterVariable', system-ui, sans-serif;
font-weight: 800; letter-spacing: -0.03em; line-height: 1.15;
font-size: clamp(1.5rem, 2.6vw, 2rem);
margin: clamp(2.5rem, 5vw, 3.5rem) 0 1rem;
text-wrap: balance;
}
.proza h3 {
font-family: 'InterVariable', system-ui, sans-serif;
font-weight: 800; letter-spacing: -0.02em; font-size: 1.1875rem;
margin: 2rem 0 0.65rem;
}
.proza a { color: var(--czerw); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.proza ul, .proza ol { margin: 0 0 1.5rem; padding-left: 1.35rem; }
.proza li { margin-bottom: 0.55rem; }
.proza ol { counter-reset: krok; list-style: none; padding-left: 0; }
.proza ol > li {
counter-increment: krok; position: relative; padding-left: 2.6rem; margin-bottom: 0.9rem;
}
.proza ol > li::before {
content: counter(krok, decimal-leading-zero);
position: absolute; left: 0; top: 0.15rem;
font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500;
font-size: 0.8125rem; letter-spacing: 0.06em; color: var(--czerw);
}
.karty { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
article.karta {
position: relative; display: flex; flex-direction: column;
background: var(--biel); border-radius: var(--r-karta);
padding: 1.85rem 1.75rem 1.65rem;
box-shadow: var(--cien-karta);
transition: transform 0.3s var(--krzywa), box-shadow 0.3s var(--krzywa);
}
@media (hover: hover) {
article.karta:hover { transform: translateY(-3px); box-shadow: var(--cien-uniesiona); }
}
article.karta h3 {
font-family: 'InterVariable', system-ui, sans-serif; font-weight: 800;
letter-spacing: -0.02em; font-size: 1.1875rem; line-height: 1.25;
margin: 0 0 0.6rem;
}
article.karta h3 a { text-decoration: none; color: var(--grafit); }
article.karta h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-karta); }
article.karta h3 a:hover { color: var(--czerw); }
article.karta > p { margin: 0 0 1.4rem; color: var(--stal); font-size: 0.9375rem; line-height: 1.6; }
.cta-linia {
margin: clamp(1.5rem, 3vw, 2.5rem) auto clamp(2rem, 4vw, 3rem);
background: var(--panel); border-radius: var(--r-karta);
padding: 1.5rem 1.6rem;
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem;
}
.cta-linia p { margin: 0; max-width: 52ch; font-size: 0.9688rem; line-height: 1.6; color: var(--stal); }
.cta-linia strong { color: var(--grafit); }
.cta-linia a:not(.pigula) { color: var(--czerw); }
.cta-linia .pigula:not(.pigula--akcent):not(.pigula--czerwona) { color: var(--grafit); }
@media (max-width: 1024px) {
.tresc__uklad { grid-template-columns: minmax(0, 62ch); justify-content: start; }
.karty { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.karty { grid-template-columns: 1fr; }
.cta-linia .pigula { width: 100%; }
}
.fi-kontakt { padding-block: clamp(2rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem); }
.fi-kontakt__siatka {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
gap: clamp(2rem, 4vw, 3.5rem);
align-items: start;
margin-bottom: clamp(2rem, 4vw, 3rem);
}
.fi-kontakt__opis { max-width: 46ch; margin: 1.25rem 0 0; }
.fi-kontakt__adres {
margin: 1.5rem 0 0;
font-size: 0.9375rem; line-height: 1.7; color: var(--stal);
}
.fi-kontakt__adres a { color: var(--czerw); text-underline-offset: 3px; }
.fi-kafle { display: grid; gap: 1rem; }
.fi-kafel {
display: flex; flex-direction: column; gap: 0.35rem;
min-height: 46px;
padding: 1.35rem 1.5rem;
border: 1px solid var(--linia);
border-radius: var(--r-karta);
background: var(--biel);
box-shadow: var(--cien-karta);
text-decoration: none;
transition: box-shadow 0.25s var(--krzywa), transform 0.25s var(--krzywa);
}
.fi-kafel:hover { box-shadow: var(--cien-uniesiona); transform: translateY(-2px); }
.fi-kafel__rola { margin: 0; }
.fi-kafel__numer { font-size: clamp(1.35rem, 2.6vw, 1.75rem); color: var(--grafit); letter-spacing: -0.01em; }
.fi-kafel__podpis { font-size: 0.8125rem; color: var(--stal); }
.fi-kafel--noc { background: var(--grafit-gleboki); border-color: transparent; }
.fi-kafel--noc .fi-kafel__rola { color: rgba(237, 241, 242, 0.82); }
.fi-kafel--noc .fi-kafel__numer { color: var(--mleko); }
.fi-kafel--noc .fi-kafel__podpis { color: rgba(237, 241, 242, 0.72); }
.fi-mapka {
position: relative;
aspect-ratio: 16 / 7;
border-radius: var(--r-panel);
overflow: hidden;
background: var(--panel);
border: 1px solid var(--linia);
box-shadow: var(--cien-karta);
}
.fi-mapka iframe { width: 100%; height: 100%; border: 0; }
.fi-mapka__stopka {
margin: 1rem 0 0;
font-size: 0.875rem; line-height: 1.6; color: var(--stal);
}
.fi-mapka__stopka a { color: var(--czerw); text-underline-offset: 3px; }
@media (max-width: 900px) {
.fi-kontakt__siatka { grid-template-columns: minmax(0, 1fr); }
.fi-mapka { aspect-ratio: 4 / 3; }
}
.kadr-podstrony {
margin: 0;
aspect-ratio: 21 / 9;
border-radius: var(--r-panel);
overflow: hidden;
background: var(--mgla);
}
.kadr-podstrony img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) {
.kadr-podstrony { aspect-ratio: 16 / 10; border-radius: var(--r-kadr); }
}
.bc-spis__licznik {
display: block; margin: 0 0 1.25rem;
font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500;
font-variant-numeric: tabular-nums;
font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stal);
}
.bc-grupa__tytul {
font-family: 'InterVariable', system-ui, sans-serif; font-weight: 800;
letter-spacing: -0.02em; font-size: 1.25rem; margin: 0 0 0.35rem;
}
.bc-grupa__tytul a { color: var(--grafit); text-decoration: none; }
.bc-grupa__tytul a:hover { color: var(--czerw); }
.bc-grupa__nota { margin: 0 0 1.1rem; font-size: 0.9375rem; color: var(--stal); }
.bc-dane__brak { color: var(--stal); font-family: inherit; font-weight: 400; }
.bc-lamie, .bc-lamie a { overflow-wrap: break-word; word-break: break-word; }
.pr-cena {
margin: 0 0 0.75rem;
font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-weight: 500; font-variant-numeric: tabular-nums;
font-size: clamp(1.25rem, 2.4vw, 1.5rem);
letter-spacing: -0.01em; color: var(--grafit);
}
.pr-uwaga {
font-size: 0.875rem; line-height: 1.6; color: var(--stal);
}
.pr-uwaga--blok {
max-width: 68ch; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
padding: 1rem 1.25rem; text-align: left;
background: var(--panel); border-radius: var(--r-karta);
font-size: 0.9375rem; color: var(--grafit);
}
.pr-uwaga--blok > p { margin: 0; }
.bc-kafle-ikon .kafel-szybki__ikona { height: 112px; }
.bc-kafle-ikon .kafel-szybki__ikona img { width: 100px; height: 100px; }
.faq--jedna { grid-template-columns: 1fr; }
.tresc__uklad .faq { margin-top: 2rem; }
.bc-sekcja-kafli .naglowek-sekcji { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.bc-karty-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
@media (max-width: 1024px) { .bc-karty-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .bc-karty-3 { grid-template-columns: 1fr; } }
.bc-druga-linia { max-width: 560px; margin-inline: auto; }
.bc-druga-linia .karta-grupa { height: 100%; }
.pod-hero__nr time { margin-left: 0.15em; }
.bc-karta-promo .karta-grupa__kadr { position: relative; }
.bc-rabat {
position: absolute; top: 0.75rem; left: 0.75rem;
display: inline-block; padding: 0.3rem 0.6rem;
border-radius: 999px;
background: var(--czerw); color: #FFFFFF;
font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em;
font-variant-numeric: tabular-nums;
box-shadow: 0 2px 10px rgba(36, 48, 54, 0.28);
}
.bc-doprecyzowac {
border-left: 3px solid var(--czerw);
padding: 0.15rem 0 0.15rem 0.9rem;
color: var(--grafit);
}
.panel .bc-doprecyzowac, .bc-doprecyzowac { background: none; }
.bc-doprecyzowac.podtytul { border-left: 0; padding-left: 0; }
.bc-promo-lista { --kolumny: 3; list-style: none; }
.bc-promo-lista > .karuzela__poz > .karta-grupa { height: 100%; }
@media (min-width: 821px) and (max-width: 1024px) {
.bc-promo-lista.karuzela { --kolumny: 2; }
}
.bc-karta__ikona {
display: block;
width: 56px;
height: 56px;
margin: 0 0 1rem;
}
.karty--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .karty--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .karty--4 { grid-template-columns: 1fr; } }
#roboty .bc-robota { display: none; scroll-margin-top: 6rem; max-width: 68ch; margin: 2rem auto 0;
padding: 2rem 2rem 1.75rem; background: var(--biel); border-radius: var(--r-karta); box-shadow: var(--cien-karta); }
#roboty .bc-robota:target { display: block; animation: kafel-wchodzi 0.42s var(--krzywa) both; }
#roboty .bc-robota h3 { margin: 0 0 0.6rem; font-family: 'InterVariable', sans-serif; font-weight: 800;
letter-spacing: -0.02em; font-size: 1.375rem; line-height: 1.2; color: var(--grafit); }
#roboty .bc-robota p, #roboty .bc-robota li { margin: 0 0 0.75rem; color: var(--stal); font-size: 0.9375rem; line-height: 1.6; }
#roboty .bc-robota__lead { color: var(--grafit); font-weight: 600; }
#roboty .bc-robota h4 { margin: 1.1rem 0 0.45rem; font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-weight: 500; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grafit); }
#roboty .bc-robota ul { margin: 0; padding-left: 1.2rem; }
#roboty .bc-robota__stopka { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.5rem 0 0; }
@media (max-width: 640px) { #roboty .bc-robota { padding: 1.5rem 1.25rem; } }
.n-symbole { position: absolute; width: 0; height: 0; overflow: hidden; }
.n-glowa {
display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: 1.25rem clamp(2rem, 5vw, 5rem); align-items: end;
margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}
.n-glowa .etykieta { margin-bottom: 0.9rem; }
.n-glowa .display { max-width: 15ch; }
.n-glowa__lead {
margin: 0; max-width: 44ch; justify-self: end;
color: var(--stal); font-size: 1.0625rem; line-height: 1.65; text-wrap: pretty;
}
@media (max-width: 900px) {
.n-glowa { grid-template-columns: 1fr; }
.n-glowa__lead { justify-self: start; }
}
.n-hero { padding-top: clamp(1.5rem, 3.4vw, 3rem); }
.n-hero__uklad {
display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
gap: 2rem clamp(2.5rem, 5vw, 4.75rem); align-items: center;
}
.n-hero__kadr {
position: relative; margin: 0; overflow: hidden;
border-radius: var(--r-panel); background: var(--grafit-gleboki);
aspect-ratio: 4 / 3;
box-shadow: 0 2px 4px rgba(36, 48, 54, 0.06), 0 30px 60px -36px rgba(36, 48, 54, 0.55);
}
.n-hero__kadr img { width: 100%; height: 100%; object-fit: cover; }
.n-hero__h1 {
font-size: clamp(2.75rem, 5.3vw, 5.4rem);
letter-spacing: -0.05em; line-height: 0.95;
margin-bottom: 1.5rem;
}
.n-hero__lead {
margin: 0 0 1.9rem; max-width: 40ch;
color: var(--stal); font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); line-height: 1.6;
}
.n-laweta {
position: absolute; z-index: 2;
left: clamp(0.85rem, 1.4vw, 1.25rem); bottom: clamp(0.85rem, 1.4vw, 1.25rem);
display: flex; align-items: center; gap: 0.9rem;
padding: 0.9rem 1.35rem 0.9rem 1.15rem; border-radius: 22px;
background: rgba(27, 36, 41, 0.72);
-webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), var(--szklo-cien);
color: var(--mleko); text-decoration: none;
transition: background-color 0.25s var(--krzywa);
}
.n-laweta:hover { background: rgba(27, 36, 41, 0.88); }
.n-laweta__ikona { display: flex; }
.n-laweta__ikona svg { width: 28px; height: 28px; }
.n-laweta__slowa { display: flex; flex-direction: column; gap: 0.1rem; }
.n-laweta__tytul { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mleko); }
.n-laweta__tel { font-size: 1.1875rem; color: var(--mleko); white-space: nowrap; }
.n-dowody {
list-style: none; margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; padding: 0.35rem;
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
border-radius: 24px; background: var(--panel);
}
.n-dowody__poz { padding: 0.95rem 1.25rem 1rem; }
.n-dowody__poz + .n-dowody__poz { border-left: 1px solid var(--linia); }
.n-dowody__nazwa {
margin: 0 0 0.2rem; font-weight: 800; letter-spacing: -0.02em;
font-size: 1.0625rem; line-height: 1.25; color: var(--grafit-gleboki);
}
.n-dowody__nazwa::before {
content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.5rem;
border-radius: 50%; background: var(--czerw); vertical-align: 0.12em;
}
.n-dowody__podpis { margin: 0; font-size: 0.8125rem; line-height: 1.45; color: var(--stal); }
@media (prefers-reduced-motion: no-preference) {
.n-hero__kadr img { animation: n-osiada 1.8s var(--krzywa) both; }
.n-laweta { animation: n-wjazd 0.9s 0.5s var(--krzywa) backwards; }
}
@keyframes n-osiada { from { transform: scale(1.07); } to { transform: none; } }
@keyframes n-wjazd { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 1023px) {
.n-hero__uklad { grid-template-columns: 1fr; }
.n-hero__slowa { order: -1; }
.n-dowody { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.n-dowody__poz + .n-dowody__poz { border-left: 0; }
.n-dowody__poz:nth-child(even) { border-left: 1px solid var(--linia); }
.n-dowody__poz:nth-child(n + 3) { border-top: 1px solid var(--linia); }
}
@media (max-width: 480px) {
.n-dowody__poz { padding: 0.85rem 0.9rem; }
}
@media (min-width: 821px) {
.n-promocje .harmonijka {
width: auto;
margin-left: max(1.5rem, calc((100% - var(--powloka)) / 2));
margin-right: clamp(0.75rem, 2vw, 1.5rem);
}
.n-promocje .harmonijka > .promo { flex-basis: max(5.75rem, calc(5.75rem + (100% - var(--powloka)) / 4)); }
}
.karuzela--marki-n > .karuzela__poz { flex-basis: clamp(248px, 9vw + 160px, 320px); }
.n-marka {
--znak-p: rgba(227, 59, 68, 0.55);
--znak-b: rgba(237, 241, 242, 0.12);
position: relative; isolation: isolate; overflow: hidden;
display: flex; flex-direction: column; width: 100%;
min-height: clamp(12.5rem, 13.5vw, 14.25rem);
padding: 1.2rem 1.2rem 1.15rem;
border-radius: var(--r-karta);
background: var(--grafit-gleboki); color: var(--mleko); text-decoration: none;
transition: transform 0.3s var(--krzywa), box-shadow 0.3s var(--krzywa);
}
.n-marka__znak {
position: absolute; z-index: -1; top: 3.2rem; right: 1.05rem;
height: 4.5rem; width: calc(4.5rem * 0.873); overflow: visible;
transform: rotate(0deg); transform-origin: 57.28% 50%;
transition: transform 0.9s var(--krzywa);
}
.n-marka__znak .znak-p { fill: var(--znak-p); }
.n-marka__znak .znak-b { fill: var(--znak-b); }
.n-marka__plakietka {
align-self: flex-start; display: inline-flex; align-items: center; gap: 0.4rem;
padding: 0.34rem 0.75rem 0.34rem 0.6rem; border-radius: var(--r-pigula);
background: rgba(227, 59, 68, 0.2); color: var(--mleko);
font-size: 0.75rem; font-weight: 700; letter-spacing: 0.01em;
}
.n-marka__plakietka svg { width: 14px; height: 14px; flex: none; color: var(--czerw-jasna); }
.n-marka__plakietka--cicha {
padding-inline: 0.75rem; background: rgba(237, 241, 242, 0.08);
color: rgba(237, 241, 242, 0.8); font-weight: 600;
}
.n-marka__dol {
margin-top: auto; padding-top: 1rem;
display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem;
}
.n-marka__nazwa {
margin: 0; min-width: 0;
font-family: 'InterVariable', system-ui, sans-serif; font-weight: 800;
letter-spacing: -0.035em; line-height: 1.02;
font-size: clamp(1.625rem, 1.85vw, 2.125rem);
}
.n-marka__strzalka {
flex: none; border-radius: 50%;
display: grid; place-items: center;
background: rgba(237, 241, 242, 0.1); color: var(--mleko);
transition: background-color 0.3s var(--krzywa), color 0.3s var(--krzywa);
}
.n-marka--stellantis .n-marka__strzalka { color: var(--czerw-jasna); }
.n-marka__strzalka svg { width: 16px; height: 16px; }
@media (hover: hover) {
.n-marka:hover { transform: translateY(-4px); box-shadow: var(--cien-uniesiona); }
.n-marka:hover .n-marka__znak { transform: rotate(-360deg); }
.n-marka:hover .n-marka__strzalka { background: var(--czerw-jasna); color: var(--czerw-napis); }
}
.n-grupa__karta {
position: relative; isolation: isolate; overflow: hidden;
display: flex; flex-direction: column; justify-content: flex-end;
width: 100%; min-height: 22rem;
padding: clamp(1.25rem, 1.8vw, 1.75rem);
border-radius: var(--r-karta);
background: var(--grafit-gleboki); color: var(--biel); text-decoration: none;
}
.n-grupa__karta img {
position: absolute; inset: 0; z-index: -2;
width: 100%; height: 100%; object-fit: cover;
transition: transform 0.9s var(--krzywa);
}
.n-grupa__karta::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(to top,
rgba(16, 22, 26, 0.92) 0%, rgba(16, 22, 26, 0.74) 38%,
rgba(16, 22, 26, 0.22) 66%, rgba(16, 22, 26, 0) 82%);
}
.n-grupa__licznik { font-size: 0.8125rem; font-weight: 600; color: rgba(255, 255, 255, 0.8); }
.n-grupa__nazwa {
margin: 0.2rem 0 0.4rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.06;
font-size: clamp(1.375rem, 1.7vw, 1.75rem);
}
.n-grupa__opis { max-width: 36ch; font-size: 0.9375rem; line-height: 1.5; color: rgba(255, 255, 255, 0.88); }
.n-grupa__strzalka {
position: absolute; top: 1rem; right: 1rem;
width: 2.75rem; height: 2.75rem; border-radius: 50%;
display: grid; place-items: center; color: var(--biel);
background: rgba(255, 255, 255, 0.2);
-webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6);
border: 1px solid rgba(255, 255, 255, 0.34);
transition: background-color 0.3s var(--krzywa), border-color 0.3s var(--krzywa);
}
.n-grupa__strzalka svg { width: 18px; height: 18px; }
@media (hover: hover) {
.n-grupa__karta:hover img { transform: scale(1.045); }
.n-grupa__karta:hover .n-grupa__strzalka { background: var(--czerw); border-color: var(--czerw); }
}
@media (min-width: 821px) {
.n-mozaika.karuzela { grid-template-rows: clamp(19rem, 25vw, 25rem) clamp(16rem, 19vw, 19rem); }
.n-mozaika > .n-grupa--mechanika, .n-mozaika > .n-grupa--blacharnia { grid-column: span 2; }
.n-mozaika .n-grupa__karta { min-height: 0; height: 100%; }
.n-mozaika .n-grupa--mechanika .n-grupa__nazwa,
.n-mozaika .n-grupa--blacharnia .n-grupa__nazwa { font-size: clamp(1.75rem, 2.4vw, 2.375rem); }
}
@media (min-width: 821px) and (max-width: 1100px) {
.n-mozaika.karuzela { --kolumny: 2; grid-template-rows: none; grid-auto-rows: 17rem; }
.n-mozaika > .n-grupa--mechanika, .n-mozaika > .n-grupa--blacharnia { grid-column: auto; }
}
.n-szybkie .n-glowa { margin-bottom: clamp(2rem, 3.5vw, 3rem); }
.n-proces__uklad {
display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
gap: clamp(2.5rem, 6vw, 6rem); align-items: start;
}
.n-proces__kadr {
position: sticky; top: calc(var(--belka-h) + 1.5rem);
margin: 0; overflow: hidden; border-radius: var(--r-panel);
aspect-ratio: 4 / 5; background: var(--mgla);
}
.n-proces__kadr img { width: 100%; height: 100%; object-fit: cover; }
.n-proces__podpis {
position: absolute; left: 1rem; right: 1rem; bottom: 1rem;
padding: 0.95rem 1.15rem; border-radius: 20px;
background: var(--szklo-tlo);
-webkit-backdrop-filter: var(--szklo-filtr); backdrop-filter: var(--szklo-filtr);
border: 1px solid var(--szklo-obrys); box-shadow: var(--szklo-blik), var(--szklo-cien);
font-size: 0.9375rem; line-height: 1.45; color: var(--grafit-gleboki);
}
.n-proces__podpis a { color: var(--grafit-gleboki); font-weight: 600; white-space: nowrap; text-underline-offset: 3px; }
.n-proces__slowa { padding-top: clamp(0rem, 2vw, 1.5rem); }
.n-proces__lead { margin: 1.25rem 0 0; max-width: 48ch; color: var(--stal); font-size: 1.0625rem; line-height: 1.65; }
.n-kroki { list-style: none; margin: clamp(2rem, 4vw, 2.75rem) 0 2.25rem; padding: 0; }
.n-kroki li { position: relative; padding: 0 0 1.9rem 3.9rem; }
.n-kroki li::before {
content: ""; position: absolute; left: calc(1.3rem - 1px); top: 3rem; bottom: 0.4rem;
width: 2px; border-radius: 2px; background: var(--linia-mocna);
}
.n-kroki li:last-child { padding-bottom: 0; }
.n-kroki li:last-child::before { display: none; }
.n-kroki__nr {
position: absolute; left: 0; top: 0;
width: 2.6rem; height: 2.6rem; border-radius: 50%;
display: grid; place-items: center;
background: var(--grafit-gleboki); color: var(--mleko);
font-weight: 700; font-size: 0.9375rem; font-variant-numeric: tabular-nums;
}
.n-kroki li:first-child .n-kroki__nr { background: var(--czerw); color: var(--biel); }
.n-kroki h3 {
margin: 0.4rem 0 0.4rem; font-weight: 800; letter-spacing: -0.02em;
font-size: 1.25rem; line-height: 1.25;
}
.n-kroki p { margin: 0; max-width: 52ch; color: var(--stal); }
.n-kroki p a { color: var(--czerw); text-underline-offset: 3px; }
@media (max-width: 1023px) {
.n-proces__uklad { grid-template-columns: 1fr; }
.n-proces__slowa { order: -1; padding-top: 0; }
.n-proces__kadr { position: relative; top: auto; aspect-ratio: 4 / 3; }
.n-proces__kadr img { object-position: 60% 32%; }
}
@media (max-width: 640px) {
.n-proces__podpis { display: none; }
}
.n-dzielnice__uklad {
display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr);
gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.n-dzielnice__lead { margin: 1.25rem 0 0; max-width: 48ch; color: var(--stal); line-height: 1.65; }
.n-dz { list-style: none; padding: 0; margin: clamp(2.25rem, 4vw, 3.25rem) 0 0; }
.n-dz > li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.n-dz__nazwa { font-weight: 700; letter-spacing: -0.01em; }
.n-dz__lacza { display: inline-flex; gap: 0.3rem; flex: none; }
.n-dz__lacza a {
display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.85rem;
border-radius: var(--r-pigula); border: 1px solid var(--linia);
background: var(--biel); color: var(--grafit);
font-size: 0.8125rem; font-weight: 600; text-decoration: none;
transition: border-color 0.2s var(--krzywa), color 0.2s var(--krzywa);
}
.n-dz__lacza a:hover { border-color: var(--czerw); color: var(--czerw); }
.n-dzielnice__akcja { margin: clamp(2rem, 3.5vw, 2.75rem) 0 0; }
@media (min-width: 821px) {
.n-dz.karuzela {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 3vw, 2.75rem);
margin: clamp(2.25rem, 4vw, 3.25rem) 0 0; padding: 0; overflow: visible;
scroll-snap-type: none; overscroll-behavior-x: auto;
}
.n-dz > li { padding: 0.7rem 0; border-top: 1px solid var(--linia-mocna); }
}
@media (min-width: 821px) and (max-width: 1100px) {
.n-dz.karuzela { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
.n-dz.karuzela { margin: 1.75rem -1.5rem 0.5rem 0; }
.n-dz > li {
flex: 0 0 190px; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0.7rem;
padding: 1rem 1.1rem; border-radius: var(--r-karta); background: var(--biel);
}
}
.n-dzielnice .mapa { width: 100%; margin: 0; }
.n-dzielnice .mapa__tlo path { fill: #DCE2E5; stroke: var(--panel); stroke-width: 2; }
.n-dzielnice .mapa__nasze path {
fill: rgba(189, 27, 36, 0.13); stroke: rgba(189, 27, 36, 0.62); stroke-width: 1.6;
transition: fill 0.25s var(--krzywa);
}
.n-dzielnice .mapa__dz:hover path,
.n-dzielnice .mapa__dz:focus-visible path { fill: var(--czerw); stroke: var(--czerw); }
.n-dzielnice .mapa__punkt circle { fill: var(--grafit-gleboki); stroke: var(--biel); stroke-width: 4; }
.n-dzielnice .mapa__punkt .mapa__punkt-srodek { fill: var(--czerw-jasna); stroke: none; }
.n-dzielnice .mapa__pin { background: var(--grafit-gleboki); box-shadow: inset 0 0 0 3px var(--czerw-jasna); }
@media (max-width: 1023px) {
.n-dzielnice__uklad { grid-template-columns: 1fr; }
}
.n-opinie__uklad {
display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
gap: clamp(1rem, 1.5vw, 1.5rem);
}
.n-opinie__boczne { display: grid; gap: clamp(1rem, 1.5vw, 1.5rem); }
.n-cytat {
margin: 0; display: flex; flex-direction: column; gap: 1.25rem;
padding: clamp(1.5rem, 2.2vw, 2rem);
border-radius: var(--r-karta); border: 1px solid var(--linia); background: var(--biel);
}
.n-cytat blockquote { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--grafit); }
.n-cytat:not(.n-cytat--duzy) blockquote::before { content: "„"; }
.n-cytat:not(.n-cytat--duzy) blockquote::after { content: "”"; }
.n-cytat figcaption {
margin-top: auto; display: flex; align-items: center; gap: 0.6rem;
font-weight: 700; font-size: 0.9375rem; color: var(--grafit-gleboki);
}
.n-cytat figcaption span {
padding: 0.2rem 0.6rem; border-radius: var(--r-pigula); background: var(--mgla);
font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; color: var(--stal);
}
.n-cytat--duzy {
justify-content: flex-end; border: 0; border-radius: var(--r-panel);
background: var(--panel); padding: clamp(2rem, 4vw, 3.5rem);
}
.n-cytat--duzy figcaption span { background: var(--biel); }
.n-cytat__znak { display: block; width: 3.25rem; height: auto; margin-bottom: auto; fill: var(--czerw); }
.n-cytat--duzy blockquote {
max-width: 30ch; font-weight: 600; letter-spacing: -0.02em;
font-size: clamp(1.375rem, 2.3vw, 2rem); line-height: 1.3; color: var(--grafit-gleboki);
text-wrap: pretty;
}
@media (max-width: 900px) {
.n-opinie__uklad { grid-template-columns: 1fr; }
}
.n-faq__uklad {
display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr);
gap: clamp(2rem, 5vw, 5rem); align-items: start;
}
.n-faq__bok { position: sticky; top: calc(var(--belka-h) + 2rem); }
.n-faq__lead { margin: 1.25rem 0 1.75rem; max-width: 40ch; color: var(--stal); line-height: 1.65; }
.faq.n-faq__lista { grid-template-columns: 1fr; gap: 0.75rem; }
@media (max-width: 900px) {
.n-faq__uklad { grid-template-columns: 1fr; }
.n-faq__bok { position: static; }
}
.n-kontakt__uklad {
display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
gap: clamp(1rem, 1.5vw, 1.5rem);
}
.n-kontakt__foto {
position: relative; margin: 0; overflow: hidden;
border-radius: var(--r-panel); background: var(--mgla); min-height: 22rem;
}
.n-kontakt__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.n-kontakt__podpis {
position: absolute; left: 1rem; bottom: 1rem; max-width: calc(100% - 2rem);
padding: 0.6rem 1.05rem; border-radius: var(--r-pigula);
background: var(--szklo-tlo);
-webkit-backdrop-filter: var(--szklo-filtr); backdrop-filter: var(--szklo-filtr);
border: 1px solid var(--szklo-obrys); box-shadow: var(--szklo-blik), var(--szklo-cien);
font-size: 0.875rem; font-weight: 600; color: var(--grafit-gleboki);
}
.n-kontakt__dane {
display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
padding: clamp(1.75rem, 3vw, 2.5rem);
border-radius: var(--r-panel); background: var(--grafit-gleboki); color: var(--mleko);
}
.n-kontakt__dane dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.5rem; }
.n-kontakt__szeroki { grid-column: 1 / -1; }
.n-kontakt__dane dt {
margin-bottom: 0.35rem; font-size: 0.75rem; font-weight: 600;
letter-spacing: 0.06em; text-transform: uppercase; color: var(--stal-jasna);
}
.n-kontakt__dane dd { margin: 0; font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere; }
.n-kontakt__dane dd > a:not(.pigula) { display: inline-flex; align-items: center; min-height: 44px; }
.n-kontakt__dane a:not(.pigula) {
color: var(--mleko); text-decoration: underline;
text-decoration-color: rgba(237, 241, 242, 0.35); text-underline-offset: 4px;
}
.n-kontakt__dane a:not(.pigula):hover { text-decoration-color: var(--mleko); }
.n-kontakt__mapa {
grid-column: 1 / -1; overflow: hidden;
border-radius: var(--r-panel); background: var(--mgla); height: clamp(18rem, 26vw, 23rem);
}
.n-kontakt__mapa iframe { width: 100%; height: 100%; border: 0; }
@media (max-width: 1023px) {
.n-kontakt__uklad { grid-template-columns: 1fr; }
.n-kontakt__foto { min-height: 0; aspect-ratio: 16 / 10; }
}
@media (max-width: 480px) {
.n-kontakt__dane dl { grid-template-columns: 1fr; }
}
.n-akord { position: relative; overflow: hidden; isolation: isolate; }
.n-akord__znak {
position: absolute; z-index: -1; right: -4rem; bottom: -5.5rem;
height: 24rem; width: calc(24rem * 0.873);
}
.n-akord__znak .znak-p { fill: rgba(227, 59, 68, 0.16); }
.n-akord__znak .znak-b { fill: rgba(237, 241, 242, 0.05); }
@media (max-width: 700px) {
.n-akord__znak { height: 15rem; width: calc(15rem * 0.873); right: -3rem; bottom: -4rem; }
}
@media (prefers-reduced-motion: reduce) {
.n-marka, .n-marka__znak, .n-marka__strzalka,
.n-grupa__karta img, .n-grupa__strzalka, .n-laweta { transition: none !important; }
.n-marka:hover .n-marka__znak { transform: none; }
.n-grupa__karta:hover img { transform: none; }
}
.n-hero--podstrona { padding-top: clamp(1rem, 2vw, 1.5rem); }
.n-hero--podstrona .okruszki { margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.n-hero--podstrona .okruszki ol { justify-content: flex-start; }
.n-hero--podstrona .n-hero__h1 { font-size: clamp(2.5rem, 4.8vw, 4.75rem); }
.n-spis {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 clamp(1.5rem, 3vw, 3rem);
}
.n-spis li {
display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
padding: 0.95rem 0; border-top: 1px solid var(--linia-mocna);
}
.n-spis__nazwa { font-weight: 700; letter-spacing: -0.01em; font-size: 1.0625rem; color: var(--grafit-gleboki); }
.n-spis__nota { color: var(--stal); font-size: 0.875rem; text-align: right; }
@media (max-width: 700px) {
.n-spis { grid-template-columns: 1fr; }
}
.n-foto-3.karuzela { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }
@media (min-width: 821px) {
.n-foto-3 .n-grupa__karta { min-height: clamp(16rem, 21vw, 20rem); }
}
.n-split {
display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: 2rem clamp(2.5rem, 5vw, 4.75rem); align-items: center;
}
.n-split__kadr {
margin: 0; overflow: hidden; border-radius: var(--r-panel);
aspect-ratio: 4 / 3; background: var(--mgla);
}
.n-split__kadr img { width: 100%; height: 100%; object-fit: cover; }
.n-split__slowa p:not(.etykieta) { margin: 1rem 0 0; max-width: 48ch; color: var(--stal); line-height: 1.65; }
.n-split__slowa .pigulki { margin-top: 1.75rem; }
@media (max-width: 1023px) {
.n-split { grid-template-columns: 1fr; }
}
:root {
--studio: radial-gradient(62% 70% at 50% 40%, rgba(255, 255, 255, 0.95),
rgba(255, 255, 255, 0.45) 55%, rgba(255, 255, 255, 0) 100%),
linear-gradient(#F4F6F7, #EDF0F1 72%, #E2E8EB);
--studio-znacznik: #A3B1B9;
--cien-hero: 0 2px 4px rgba(36, 48, 54, 0.06), 0 30px 60px -36px rgba(36, 48, 54, 0.55);
--znak-akord: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 107.83 123.52'><path fill='%23E33B44' fill-opacity='.16' d='M95.52,32.94l12.31-12.31C96.52,7.97,80.07,0,61.76,0c-5.05,0-9.97.61-14.67,1.76v18.1c4.59-1.61,9.53-2.49,14.67-2.49,13.51,0,25.62,6.04,33.76,15.57ZM61.76,106.15c-24.52,0-44.39-19.87-44.39-44.39V18.82C6.62,29.94,0,45.08,0,61.76c0,34.11,27.65,61.76,61.76,61.76,18.31,0,34.76-7.97,46.07-20.63l-12.31-12.31c-8.14,9.53-20.25,15.57-33.76,15.57Z'/><path fill='%23EDF1F2' fill-opacity='.05' d='M100.36,61.76c0,21.32-17.28,38.6-38.6,38.6s-38.6-17.28-38.6-38.6V13.55c5.17-4.15,11.03-7.48,17.37-9.8v58.01c0,11.72,9.51,21.23,21.23,21.23s21.23-9.51,21.23-21.23-9.5-21.23-21.23-21.23c-5.69,0-10.85,2.24-14.67,5.88v-20.37c4.52-1.86,9.48-2.89,14.67-2.89,21.32,0,38.6,17.28,38.6,38.6Z'/></svg>");
}
.g4-ik {
display: inline-block; flex: none; vertical-align: middle;
width: 20px; height: 20px; overflow: visible;
}
.pigula .g4-ik { width: 20px; height: 20px; }
.belka {
position: sticky; top: 0; z-index: 50;
background: rgba(255, 255, 255, 0.8);
-webkit-backdrop-filter: blur(20px) saturate(180%);
backdrop-filter: blur(20px) saturate(180%);
box-shadow: 0 1px 0 rgba(55, 71, 79, 0);
}
.belka.przyklejona { box-shadow: var(--cien-belka); }
@supports (animation-timeline: scroll()) {
.belka, .belka.przyklejona {
box-shadow: 0 1px 0 rgba(55, 71, 79, 0);
animation: belka-cien linear both;
animation-timeline: scroll(root block);
animation-range: 0 72px;
}
}
@keyframes belka-cien { to { box-shadow: var(--cien-belka); } }
.belka__rzad {
width: min(100% - 3rem, var(--powloka)); margin-inline: auto;
min-height: var(--belka-h); display: flex; align-items: center; gap: 1rem;
}
.belka__marka { display: flex; align-items: center; flex: none; min-height: 44px; }
.belka__marka img { width: auto; height: 26px; }
.belka__akcje { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.belka__tel { font-size: 0.875rem; gap: 0.45rem; }
.belka__tel .g4-ik { color: inherit; }
.belka__menu { cursor: pointer; font-family: inherit; }
.belka__kreski { display: grid; gap: 4px; width: 16px; }
.belka__kreski i { display: block; height: 1.5px; background: currentColor; border-radius: 2px; }
.belka__kreski i:last-child { width: 11px; margin-left: auto; }
.belka__nav { display: none; }
.belka__poz {
display: inline-flex; align-items: center; gap: 0.4rem;
min-height: 40px; padding: 0.45rem 0.7rem; border-radius: var(--r-pigula);
text-decoration: none; color: var(--grafit);
font-size: 0.9375rem; font-weight: 600; line-height: 1.2; white-space: nowrap;
transition: background-color 0.2s var(--krzywa), color 0.2s var(--krzywa);
}
.belka__poz:hover { background: rgba(55, 71, 79, 0.07); color: var(--grafit-gleboki); }
.belka__poz[aria-current] { background: var(--mgla); color: var(--grafit-gleboki); }
.belka__poz[aria-current]::before {
content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--czerw); flex: none;
}
@media (min-width: 1200px) {
.belka__nav { display: flex; align-items: center; gap: 0.1rem; margin-left: clamp(0.75rem, 2vw, 2rem); }
.belka__menu { display: none; }
}
@media (min-width: 1200px) and (max-width: 1279px) {
.belka__tel span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.belka__tel { width: 46px; padding-inline: 0; }
}
@media (max-width: 820px) {
:root { --belka-h: 56px; }
.belka__rzad { width: min(100% - 2rem, var(--powloka)); }
body:has(.pasek-tel) .belka__tel, .belka__cta, .belka__wycena { display: none; }
.belka__tel span { display: none; }
.belka__tel { width: 46px; padding-inline: 0; }
}
.menu-nakladka {
position: fixed; inset: 0; z-index: 60;
background: rgba(255, 255, 255, 0.94);
-webkit-backdrop-filter: blur(26px) saturate(180%);
backdrop-filter: blur(26px) saturate(180%);
overflow-y: auto; overscroll-behavior: contain;
padding-bottom: clamp(2rem, 6vw, 4rem);
}
.menu-nakladka[hidden] { display: none; }
.menu-nakladka__pasek {
position: sticky; top: 0; z-index: 2; background: inherit;
border-bottom: 1px solid var(--linia);
}
.menu-nakladka__pasek-rzad {
min-height: var(--belka-h); display: flex; align-items: center;
justify-content: space-between; gap: 1rem;
}
.menu-nakladka__pasek .etykieta { margin: 0; }
.menu-nakladka__zamknij { cursor: pointer; font-family: inherit; background: var(--biel); }
.menu-nakladka__siatka {
display: grid; gap: clamp(1.75rem, 4vw, 3rem);
padding-top: clamp(1rem, 3vw, 2.5rem);
}
@media (min-width: 900px) {
.menu-nakladka__siatka { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; gap: clamp(2.5rem, 6vw, 6rem); }
}
.menu-nakladka__uklad { display: flex; flex-direction: column; }
.menu-poz {
display: flex; align-items: center; gap: 0.75rem;
min-height: 56px; padding-block: 0.65rem; border-bottom: 1px solid var(--linia);
font-weight: 800; letter-spacing: -0.035em; line-height: 1.1;
font-size: clamp(1.5rem, 3vw, 2.25rem);
text-decoration: none; color: var(--grafit-gleboki);
}
.menu-poz::after {
content: ""; margin-left: auto; margin-right: 0.35rem; flex: none;
width: 0.7rem; height: 0.7rem;
border-top: 2px solid var(--stal); border-right: 2px solid var(--stal);
transform: rotate(45deg); transition: transform 0.25s var(--krzywa), border-color 0.25s var(--krzywa);
}
.menu-poz:hover::after { transform: translateX(4px) rotate(45deg); border-color: var(--czerw); }
.menu-poz[aria-current]::before {
content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--czerw); flex: none;
}
.menu-poz[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.menu-nakladka__stopka {
--g4-akcent: var(--czerw-jasna);
position: relative; overflow: hidden; isolation: isolate;
display: flex; flex-direction: column; gap: 1.35rem;
padding: clamp(1.6rem, 3vw, 2.25rem);
border-radius: var(--r-panel); background: var(--grafit-gleboki); color: var(--mleko);
}
.menu-nakladka__stopka::after {
content: ""; position: absolute; z-index: -1; right: -2.5rem; bottom: -3.5rem;
width: 13rem; height: 14.9rem; background: var(--znak-akord) no-repeat center / contain;
}
.menu-nakladka__stopka .etykieta { margin: 0; }
.menu-nakladka__stopka .pigulki .pigula { flex: 1 1 12rem; }
.menu-nakladka__stopka .drobne { margin: 0; color: rgba(237, 241, 242, 0.78); }
.menu-nakladka__stopka .dane { color: var(--mleko); }
html.menu-otwarte, html.menu-otwarte body { overflow: hidden; }
.okruszki { margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.okruszki ol {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
gap: 0 0.55rem;
font-family: 'InterVariable', system-ui, sans-serif;
font-weight: 600; font-size: 0.8125rem; line-height: 1.35; letter-spacing: 0;
color: var(--stal);
}
.okruszki li { display: flex; align-items: center; gap: 0.55rem; min-height: 32px; }
.okruszki li + li::before {
content: ""; flex: none; width: 0.38rem; height: 0.38rem;
border-top: 1.5px solid var(--stal-jasna); border-right: 1.5px solid var(--stal-jasna);
transform: rotate(45deg);
}
.okruszki a { color: var(--stal); text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; }
.okruszki a:hover { color: var(--grafit-gleboki); text-decoration: underline; text-underline-offset: 3px; }
.okruszki [aria-current] { color: var(--grafit-gleboki); }
.stopka {
margin: clamp(1rem, 2.5vw, 2rem) clamp(0.75rem, 2vw, 1.5rem) 0;
padding-block: clamp(3rem, 6vw, 4.75rem) 2.25rem;
border-radius: var(--r-panel) var(--r-panel) 0 0;
background: var(--panel);
}
.stopka__uklad { display: grid; grid-template-columns: minmax(200px, 0.9fr) 3fr; gap: clamp(2rem, 4vw, 3.5rem); }
.stopka__marka img { height: 30px; width: auto; margin-bottom: 1rem; }
.stopka__marka .drobne { max-width: 34ch; margin: 0; }
.stopka__grupa { display: grid; gap: 0; margin-top: 1.25rem; }
.stopka__grupa a {
display: flex; align-items: center; min-height: 36px;
text-decoration: none; font-size: 0.875rem; font-weight: 600; color: var(--grafit);
}
.stopka__grupa a:hover { color: var(--grafit-gleboki); text-decoration: underline; text-underline-offset: 3px; }
.stopka__mapa { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem 2rem; }
.stopka__kolumna { display: flex; flex-direction: column; align-items: flex-start; }
.stopka__kolumna h2 {
font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 0.6875rem;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--stal); margin: 0 0 0.6rem;
}
.stopka__kolumna a {
display: inline-flex; align-items: center; gap: 0.55rem; min-height: 36px;
text-decoration: none; font-size: 0.9375rem; line-height: 1.3; color: var(--grafit);
}
.stopka__kolumna a:hover { color: var(--grafit-gleboki); text-decoration: underline; text-underline-offset: 3px; }
.stopka__kolumna a[aria-current] { color: var(--grafit-gleboki); font-weight: 700; }
.stopka__kolumna--start .g4-ik { color: var(--stal); }
.stopka__kolumna .drobne { margin: 0.75rem 0 0; }
.stopka__dzielnice { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.75rem; border-top: 1px solid var(--linia-mocna); }
.stopka__dzielnice .stopka__zw-tresc > h2 {
font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 0.6875rem;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--stal); margin: 0 0 1rem;
}
.stopka__dzielnice-uklad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2.5rem; }
.stopka__dzielnice-kol { display: flex; flex-wrap: wrap; gap: 0 1.1rem; align-content: flex-start; }
.stopka__dzielnice-kol h3 { flex: 1 0 100%; margin: 0 0 0.35rem; font-size: 0.9375rem; font-weight: 800; letter-spacing: -0.02em; color: var(--grafit-gleboki); }
.stopka__dzielnice-kol a {
display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
text-decoration: none; font-size: 0.875rem; color: var(--stal);
}
.stopka__dzielnice-kol a:hover { color: var(--grafit-gleboki); text-decoration: underline; text-underline-offset: 3px; }
.stopka__nota {
margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.5rem; border-top: 1px solid var(--linia-mocna);
display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; justify-content: space-between; align-items: center;
}
.stopka__nota p { margin: 0; }
.stopka__nota .dane { white-space: nowrap; }
.stopka__prawne { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.stopka__prawne a { display: inline-flex; align-items: center; min-height: 36px; font-size: 0.875rem; color: var(--grafit); text-underline-offset: 3px; }
@media (max-width: 1024px) {
.stopka__uklad { grid-template-columns: 1fr; gap: 2.25rem; }
.stopka__mapa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.stopka__zw { display: block; min-width: 0; }
.stopka__zw > summary {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
min-height: 48px; padding: 0.25rem 0; cursor: pointer; list-style: none;
font-weight: 700; font-size: 0.9375rem; letter-spacing: -0.01em; color: var(--grafit-gleboki);
}
.stopka__zw > summary::-webkit-details-marker { display: none; }
.stopka__zw > summary::after {
content: ""; flex: none; width: 0.5rem; height: 0.5rem; margin-right: 0.35rem;
border-right: 2px solid var(--stal); border-bottom: 2px solid var(--stal);
transform: translateY(-2px) rotate(45deg); transition: transform 0.25s var(--krzywa);
}
.stopka__zw[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.stopka__zw-tresc > h2 { display: none; }
.stopka__zw-tresc { display: flex; flex-direction: column; align-items: flex-start; padding-bottom: 0.75rem; }
.stopka__mapa > .stopka__zw, .stopka__dzielnice.stopka__zw { border-bottom: 1px solid var(--linia-mocna); }
.stopka__mapa > .stopka__zw:first-child { border-top: 1px solid var(--linia-mocna); }
@supports selector(::details-content) {
@media (min-width: 821px) {
.stopka__zw > summary { display: none; }
.stopka__zw::details-content { content-visibility: visible; }
.stopka__zw-tresc > h2 { display: block; }
.stopka__zw-tresc { padding-bottom: 0; }
.stopka__mapa > .stopka__zw, .stopka__dzielnice.stopka__zw,
.stopka__mapa > .stopka__zw:first-child { border: 0; }
.stopka__dzielnice.stopka__zw { border-top: 1px solid var(--linia-mocna); }
.stopka__dzielnice .stopka__zw-tresc { display: block; }
}
}
@media (max-width: 820px) {
.stopka { padding-top: clamp(2rem, 7vw, 2.75rem); }
.stopka__uklad { gap: 1.5rem; }
.stopka__marka img { margin-bottom: 0.6rem; }
.stopka__grupa { margin-top: 0.6rem; }
.stopka__mapa { grid-template-columns: 1fr; gap: 0; }
.stopka__dzielnice { margin-top: 0; padding-top: 0; border-top: 0; }
.stopka__dzielnice-uklad { padding-top: 0.25rem; }
.stopka__nota { margin-top: 1.5rem; padding-top: 1rem; border-top: 0; gap: 0.35rem 1rem; }
.stopka__nota .drobne { font-size: 0.8125rem; line-height: 1.5; }
}
@media (max-width: 820px) {
.stopka__kolumna a, .stopka__grupa a, .stopka__prawne a { min-height: 44px; min-width: 44px; }
.okruszki a, .okruszki li { min-height: 36px; }
.okruszki { margin-bottom: 0.75rem; }
.okruszki li:not(:nth-last-child(2)) { display: none; }
.okruszki li:nth-last-child(2) { max-width: 100%; min-width: 0; }
.okruszki li:nth-last-child(2)::before {
content: ""; flex: none; width: 0.42rem; height: 0.42rem;
border-top: 1.5px solid var(--stal); border-right: 0; border-left: 1.5px solid var(--stal);
transform: rotate(-45deg); margin-left: 0.15rem;
}
.okruszki li:nth-last-child(2) a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; line-height: 36px; }
}
@media (max-width: 640px) {
.stopka__kolumna--start { grid-column: 1 / -1; }
.stopka__dzielnice-uklad { grid-template-columns: 1fr; }
}
.pasek-tel { display: none; }
@media (max-width: 820px) {
.pasek-tel {
display: flex; position: fixed; z-index: 40;
left: 0.75rem; right: 0.75rem; bottom: calc(0.6rem + env(safe-area-inset-bottom));
max-width: 30rem; margin-inline: auto;
padding: 0.3rem 0.4rem; border-radius: 24px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.64));
-webkit-backdrop-filter: blur(26px) saturate(180%);
backdrop-filter: blur(26px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.55);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.65),
inset 0 -1px 0 rgba(36, 48, 54, 0.08),
0 22px 48px -20px rgba(36, 48, 54, 0.55);
}
.pasek-tel a {
flex: 1; min-height: 56px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 0.3rem; border-radius: 16px; text-decoration: none; color: var(--grafit);
font-size: 0.75rem; font-weight: 700; line-height: 1;
}
.pasek-tel a:active { background: rgba(55, 71, 79, 0.07); }
.pasek-tel .g4-ik { width: 22px; height: 22px; }
.pasek-tel .pasek-tel__glowny { --g4-akcent: #fff; background: var(--czerw); color: #fff; }
.pasek-tel .pasek-tel__glowny .g4-ik { color: #fff; }
.pasek-tel .pasek-tel__glowny:active { background: #A3161E; }
.stopka { padding-bottom: 7.5rem; }
}
.belka__akcje .pigula { min-height: 44px; padding: 0.55rem 1.05rem; font-size: 0.875rem; }
.belka__tel { gap: 0.45rem; }
.belka__tel .g4-ik { width: 18px; height: 18px; --g4-akcent: #fff; }
.kontakt-status { display: flex; align-items: center; gap: 0.55rem; margin: 0; font-size: 0.875rem; font-weight: 600; line-height: 1.35; }
.kontakt-status__kropka { width: 9px; height: 9px; border-radius: 50%; background: #9AA7AE; flex: none; }
.kontakt-status[data-otwarte="tak"] .kontakt-status__kropka { background: #2E9E5B; box-shadow: 0 0 0 4px rgba(46, 158, 91, 0.18); }
.menu-nakladka__stopka .kontakt-status { color: var(--mleko); }
.menu-nakladka__stopka .kontakt-status[data-otwarte="tak"] .kontakt-status__kropka { background: #5FD08E; box-shadow: 0 0 0 4px rgba(95, 208, 142, 0.2); }
.menu-nakladka__tel { justify-content: center; gap: 0.55rem; font-size: 1.1875rem; }
.menu-nakladka__tel .g4-ik { color: #fff; width: 20px; height: 20px; }
.menu-nakladka__stopka .menu-nakladka__akcje { flex-wrap: nowrap; gap: 0.5rem; }
.menu-nakladka__stopka .menu-nakladka__akcje .pigula { flex: 1 1 0; justify-content: center; padding-inline: 0.75rem; white-space: nowrap; }
@media (max-width: 899px) {
.menu-nakladka__siatka { gap: 1.1rem; padding-top: 0.5rem; }
.menu-poz { min-height: 48px; padding-block: 0.45rem; font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.015em; }
.menu-poz::after { width: 0.5rem; height: 0.5rem; border-width: 1.75px; }
.menu-nakladka__stopka { gap: 0.85rem; padding: 1.2rem; border-radius: 24px; }
.menu-nakladka__stopka::after { width: 8.5rem; height: 9.7rem; right: -2rem; bottom: -2.6rem; opacity: 0.8; }
.menu-nakladka__stopka .drobne { font-size: 0.8125rem; line-height: 1.55; }
.menu-nakladka__stopka .pigula--duza { min-height: 48px; font-size: 0.9375rem; }
.menu-nakladka__tel.pigula--duza { font-size: 1.0625rem; }
}
@media (max-width: 820px) {
.pasek-tel--4 { padding-inline: 0.3rem; gap: 0.15rem; }
.pasek-tel--4 a { font-size: 0.6875rem; white-space: nowrap; letter-spacing: -0.005em; }
}
.bc-marki-siatka { --odstep: 0.9rem; }
.n-marki-siatka, .n-mozaika, .n-foto-3, .siatka-tasma--marki { --odstep: clamp(0.9rem, 1.2vw, 1.25rem); }
.n-foto-3 { --kolumny: 3; }
@media (min-width: 821px) {
:is(.siatka-tasma, .szybkie, .dzielnice, .bc-marki-siatka,
.n-marki-siatka, .n-mozaika, .n-foto-3).karuzela {
display: grid;
grid-template-columns: repeat(var(--kolumny, 4), minmax(0, 1fr));
gap: var(--odstep, 1.25rem);
width: min(100% - 3rem, var(--powloka)); margin: 0 auto;
padding: 0; overflow: visible;
scroll-snap-type: none; overscroll-behavior-x: auto;
}
.n-marki-siatka.karuzela, .siatka-tasma--marki.karuzela { padding-top: 0.75rem; }
.n-foto-3.karuzela { margin-top: clamp(2rem, 4vw, 3rem); }
:is(.bc-marki-siatka, .siatka-tasma) > .karuzela__poz > :is(.karta-tasma, .n-marka) { height: 100%; }
}
@media (min-width: 821px) and (max-width: 1024px) {
:is(.siatka-tasma, .szybkie, .dzielnice, .bc-marki-siatka).karuzela { --kolumny: 2; }
:is(.n-marki-siatka, .siatka-tasma--marki).karuzela { --kolumny: 3; }
}
.szybkie:not(.karuzela) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.bc-kafle-ikon:not(.karuzela) { width: min(100% - 3rem, var(--powloka)); margin-inline: auto; }
@media (max-width: 820px) {
.bc-kafle-ikon:not(.karuzela) { width: min(100% - 2rem, var(--powloka)); }
}
.siatka-tasma--marki > .karuzela__poz { flex-basis: clamp(248px, 9vw + 160px, 320px); }
.wiecej__pole {
position: fixed; top: 50%; left: 0;
width: 1px; height: 1px; margin: -1px;
clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
html:has(.wiecej__pole:checked) { overflow-anchor: none; }
.wiecej {
width: max-content; max-width: 100%; margin: 2.25rem auto 0;
display: flex; align-items: center; gap: 0.6rem; cursor: pointer;
min-height: 48px; padding: 0.7rem 1.4rem; border-radius: var(--r-pigula);
border: 1px solid var(--linia-mocna); background: var(--biel);
font-weight: 700; font-size: 0.9375rem; color: var(--grafit);
transition: border-color 0.25s var(--krzywa), box-shadow 0.25s var(--krzywa);
}
.wiecej:hover { border-color: var(--grafit); box-shadow: var(--cien-karta); }
.wiecej__pole:focus-visible + .wiecej { outline: 3px solid var(--czerw); outline-offset: 3px; }
.wiecej__napis--otwarty { display: none; }
.wiecej__licznik {
font-size: 0.8125rem; line-height: 1; padding: 0.3rem 0.5rem;
border-radius: var(--r-pigula); background: var(--mgla); color: var(--stal);
}
.wiecej__strzalka { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; }
.wiecej__strzalka:empty::before {
content: ""; width: 7px; height: 7px;
border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: translateY(-2px) rotate(45deg); transition: transform 0.25s var(--krzywa);
}
.wiecej__strzalka svg { width: 18px; height: 18px; transition: transform 0.25s var(--krzywa); }
.wiecej__pole:checked + .wiecej .wiecej__napis--zamkniety { display: none; }
.wiecej__pole:checked + .wiecej .wiecej__napis--otwarty { display: inline; }
.wiecej__pole:checked + .wiecej .wiecej__licznik { display: none; }
.wiecej__pole:checked + .wiecej .wiecej__strzalka:empty::before { transform: translateY(2px) rotate(-135deg); }
.wiecej__pole:checked + .wiecej .wiecej__strzalka svg { transform: rotate(180deg); }
@keyframes kafel-wchodzi {
from { opacity: 0; transform: translateY(12px) scale(0.98); }
to   { opacity: 1; transform: none; }
}
@media (min-width: 821px) {
.karuzela:not(:has(~ .powloka > .wiecej__pole:checked, > .szybkie__tytul:target,
~ .powloka > .bc-robota:target)) > :is(.dalszy, .szybkie__dalszy) {
display: none;
}
.karuzela:is(:has(~ .powloka > .wiecej__pole:checked), :has(> .szybkie__tytul:target)) > li { order: var(--kolejnosc); }
.karuzela:is(:has(~ .powloka > .wiecej__pole:checked), :has(> .szybkie__tytul:target)) > .szybkie__tytul--skroty { display: none; }
.karuzela:has(~ .powloka > .wiecej__pole:checked) > :is(.dalszy, .szybkie__dalszy) {
animation: kafel-wchodzi 0.42s var(--krzywa) both;
animation-delay: calc(var(--kolejnosc, 0) * 9ms);
}
.szybkie > .szybkie__tytul:target { color: var(--czerw); border-bottom-color: var(--czerw); }
.szybkie > .szybkie__tytul { scroll-margin-top: 6rem; }
}
@media (max-width: 820px) {
:is(.karuzela, .szybkie) ~ .powloka > .wiecej:not(:is(ul, ol) + .wiecej__pole + .wiecej) { display: none; }
:is(.karuzela, .szybkie) ~ .powloka > .wiecej__pole:not(:is(ul, ol) + .wiecej__pole) { display: none; }
.szybkie > .szybkie__tytul { display: none; }
}
.bc-spis:not(:has(~ .wiecej__pole:checked)) > .dalszy { display: none; }
.karta-tasma {
display: flex; flex-direction: column; width: 100%;
padding: 0; overflow: hidden;
background: var(--biel); border: 1px solid var(--linia);
border-radius: var(--r-karta); box-shadow: var(--cien-karta);
text-decoration: none; color: var(--grafit); overflow-wrap: break-word;
transition: transform 0.25s var(--krzywa), box-shadow 0.25s var(--krzywa), border-color 0.25s var(--krzywa);
}
@media (hover: hover) {
.karta-tasma:hover { transform: translateY(-3px); border-color: transparent; box-shadow: var(--cien-uniesiona); }
.karta-tasma:hover .karta-tasma__strzalka { transform: translate(2px, -2px); }
.karta-tasma:hover .karta-tasma__kadr img { transform: scale(1.03); }
}
.karta-tasma__kadr {
order: -1; display: block; margin: 0; overflow: hidden;
border-radius: 0; background: var(--grafit-gleboki);
}
.karta-tasma__kadr img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; transition: transform 0.45s var(--krzywa); }
.karta-tasma__glowa { display: flex; flex-direction: column; gap: 0.2rem; min-height: 0; padding: 1rem 1.15rem 0.9rem; }
.karta-tasma__nazwa {
margin: 0; font-family: 'InterVariable', sans-serif; font-weight: 800;
letter-spacing: -0.02em; font-size: clamp(1.0625rem, 0.95vw, 1.1875rem); line-height: 1.2;
}
.karta-tasma__typ { color: var(--stal); font-size: 0.8125rem; line-height: 1.4; }
.karta-tasma__stopka {
margin: auto 1.15rem 0; padding: 0.8rem 0 0.95rem;
display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
border-top: 1px solid var(--linia);
}
.karta-tasma__licznik { font-weight: 600; font-size: 0.8125rem; color: var(--stal); }
.karta-tasma__strzalka { width: 20px; height: 20px; flex: none; color: var(--czerw); transition: transform 0.25s var(--krzywa); }
.n-marka__slowa { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.n-marka__nota { font-size: 0.8125rem; font-weight: 600; line-height: 1.3; color: rgba(237, 241, 242, 0.78); }
.n-marka__strzalka { width: 2.5rem; height: 2.5rem; }
.n-marka__strzalka .g4-ik { width: 20px; height: 20px; }
.n-marka__nazwa { overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
.karta-tasma, .karta-tasma__kadr img, .karta-tasma__strzalka { transition: none !important; }
.wiecej, .wiecej__strzalka svg, .wiecej__strzalka::before { transition: none !important; }
.karuzela > :is(.dalszy, .szybkie__dalszy) { animation: none !important; }
}
.pod-hero {
padding-top: clamp(0.75rem, 1.6vw, 1.25rem);
padding-bottom: clamp(2.5rem, 5vw, 4.25rem);
text-align: left;
}
.pod-hero .powloka { width: min(100% - 3rem, var(--powloka)); }
.pod-hero__slowa { max-width: 44rem; min-width: 0; }
.pod-hero__nr { display: block; margin-bottom: 1rem; }
.pod-hero__tytul {
margin: 0; max-width: 17ch;
font-size: clamp(2.35rem, 4.3vw, 4.25rem);
letter-spacing: -0.045em; line-height: 0.98;
text-wrap: pretty;
overflow-wrap: break-word; hyphens: manual;
}
.pod-hero__lead {
max-width: 44ch; margin: 1.35rem 0 0;
font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); line-height: 1.6; color: var(--stal);
text-wrap: pretty;
}
.pod-hero__pigulki { margin-top: 1.75rem; justify-content: flex-start; }
.pod-hero .bc-plakietka { margin-top: 1.35rem; }
.pod-hero time { color: var(--stal); }
.pod-hero__fakty {
list-style: none; margin: 1.9rem 0 0; padding: 1.15rem 0 0;
border-top: 1px solid var(--linia);
display: flex; flex-wrap: wrap; gap: 0.65rem 1.6rem;
}
.pod-hero__fakty li {
display: flex; align-items: center; gap: 0.5rem;
font-size: 0.875rem; font-weight: 600; line-height: 1.35; color: var(--grafit);
}
.pod-hero__fakty .g4-ik { color: var(--stal); }
.pod-hero__fakty .dane { font-weight: 500; }
.pod-hero--wizual .pod-hero__uklad {
display: grid; gap: 2rem clamp(2.5rem, 5vw, 4.75rem); align-items: center;
}
.pod-hero--wizual .okruszki { margin-bottom: 0; }
@media (min-width: 1024px) {
.pod-hero--wizual .pod-hero__uklad { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
.pod-hero--wizual .okruszki { grid-column: 1 / -1; }
}
@media (max-width: 1023px) {
.pod-hero__wizual { width: 100%; max-width: 36rem; }
}
@media (min-width: 821px) and (max-width: 1023px) {
.pod-hero--wizual .pod-hero__uklad { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.75rem 2rem; align-items: start; }
.pod-hero--wizual .okruszki { grid-column: 1 / -1; }
.pod-hero--wizual .pod-hero__wizual { max-width: none; }
.pod-hero--wizual .pod-hero__tytul { font-size: clamp(2rem, 4vw, 2.6rem); }
.pod-hero__wizual--chipy .u4-fakty__glowa { grid-template-columns: 112px minmax(0, 1fr); gap: 0.75rem; }
.pod-hero__wizual--chipy .u4-fakty__syl { width: 112px; }
.pod-hero__wizual--chipy .u4-fakty__glowa .u4-dl { grid-template-columns: 1fr; gap: 0; }
.pod-hero__wizual--chipy .u4-fakty__glowa .u4-dl dd + dt { margin-top: 0.3rem; }
.pod-hero__wizual--chipy .u4-dl--chipy { grid-template-columns: 1fr; gap: 0.35rem; }
.pod-hero__wizual--chipy .u4-dl--chipy dt { min-height: 0; }
.pod-hero__wizual--chipy .u4-dl--chipy dd + dt { margin-top: 0.45rem; }
}
.pod-hero__wizual { position: relative; min-width: 0; }
.pod-hero__kadr {
position: relative; margin: 0; overflow: hidden;
aspect-ratio: 16 / 10; border-radius: var(--r-panel);
background: var(--mgla); box-shadow: var(--cien-hero);
}
.pod-hero__kadr img { display: block; width: 100%; height: 100%; }
.pod-hero__kadr--foto img { object-fit: cover; }
.pod-hero__kadr--studio { background: var(--studio); box-shadow: 0 1px 2px rgba(36, 48, 54, 0.06); }
.pod-hero__kadr--studio img { object-fit: contain; }
.pod-hero__kadr--karta {
display: grid; place-items: center;
background: var(--studio);
box-shadow: 0 1px 2px rgba(36, 48, 54, 0.06);
}
.pod-hero__kadr--karta::before {
content: ""; position: absolute; inset: 4.2%;
--z: var(--studio-znacznik); --d: 5.5%; --g: 1.5px;
background:
linear-gradient(var(--z), var(--z)) left top / var(--d) var(--g) no-repeat,
linear-gradient(var(--z), var(--z)) left top / var(--g) calc(var(--d) * 1.6) no-repeat,
linear-gradient(var(--z), var(--z)) right top / var(--d) var(--g) no-repeat,
linear-gradient(var(--z), var(--z)) right top / var(--g) calc(var(--d) * 1.6) no-repeat,
linear-gradient(var(--z), var(--z)) left bottom / var(--d) var(--g) no-repeat,
linear-gradient(var(--z), var(--z)) left bottom / var(--g) calc(var(--d) * 1.6) no-repeat,
linear-gradient(var(--z), var(--z)) right bottom / var(--d) var(--g) no-repeat,
linear-gradient(var(--z), var(--z)) right bottom / var(--g) calc(var(--d) * 1.6) no-repeat;
pointer-events: none;
}
.pod-hero__kadr--karta::after {
content: ""; position: absolute; left: 22%; right: 22%; bottom: 12%; height: 9%;
background: radial-gradient(closest-side, rgba(36, 48, 54, 0.26), rgba(36, 48, 54, 0.08) 60%, rgba(36, 48, 54, 0));
pointer-events: none;
}
.pod-hero__kadr--karta img {
position: relative; z-index: 1;
width: 58%; height: auto; aspect-ratio: 16 / 10;
border-radius: 20px;
box-shadow: 0 2px 3px rgba(36, 48, 54, 0.12), 0 34px 40px -30px rgba(36, 48, 54, 0.7);
transform: translateY(-5%);
}
.pod-hero__wizual--chipy .pod-hero__kadr { border-radius: var(--r-panel) var(--r-panel) 0 0; box-shadow: none; }
.pod-hero__chipy {
padding: clamp(1rem, 1.6vw, 1.35rem) clamp(1.1rem, 1.8vw, 1.5rem);
background: var(--biel); border: 1px solid var(--linia); border-top: 0;
border-radius: 0 0 var(--r-panel) var(--r-panel);
}
@media (prefers-reduced-motion: no-preference) {
.pod-hero__kadr--foto img { animation: n-osiada 1.8s var(--krzywa) both; }
}
@media (max-width: 820px) {
.pod-hero .powloka { width: min(100% - 2rem, var(--powloka)); }
}
@media (max-width: 640px) {
.pod-hero__tytul { font-size: clamp(2rem, 9vw, 2.6rem); max-width: none; }
.pod-hero__pigulki { flex-wrap: nowrap; gap: 0.6rem; margin-top: 1.25rem; }
.pod-hero__pigulki .pigula { flex: 1 1 0; min-width: 0; padding-inline: 0.75rem; }
.pod-hero__pigulki .pigula--duza { min-height: 50px; }
.pod-hero__fakty { gap: 0.3rem 1rem; margin-top: 1rem; padding-top: 0; border-top: 0; }
.pod-hero__fakty li { font-size: 0.8125rem; gap: 0.4rem; }
.pod-hero__nr { margin-bottom: 0.6rem; }
.pod-hero__lead { margin-top: 0.9rem; }
}
@media (max-width: 359px) {
.pod-hero__pigulki { flex-wrap: wrap; }
.pod-hero__pigulki .pigula { flex-basis: 100%; }
}
.pod-hero__cena {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.75rem;
margin: 1.35rem 0 0;
}
.pod-hero__cena-kwota {
font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500;
font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
font-size: clamp(1.625rem, 2.4vw, 2.125rem); line-height: 1.1; color: var(--grafit-gleboki);
}
.pod-hero__cena-nota { font-size: 0.875rem; font-weight: 600; color: var(--stal); }
@media (max-width: 640px) {
.pod-hero__cena { margin-top: 0.9rem; }
}
.sekcja.panel { padding-block: clamp(3.75rem, 7vw, 6rem); }
.panel + .sekcja:not(.panel) { padding-top: clamp(3.5rem, 7vw, 6rem); }
.naglowek-sekcji { margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.naglowek-sekcji .etykieta { margin-bottom: 0.9rem; }
.naglowek-sekcji--lewa, .naglowek-sekcji--split { text-align: left; }
.naglowek-sekcji--lewa .display, .naglowek-sekcji--split .display { max-width: 18ch; text-wrap: pretty; }
.naglowek-sekcji--lewa .podtytul { margin: 1.1rem 0 0; }
.naglowek-sekcji--split {
display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
column-gap: clamp(2rem, 5vw, 5rem); align-items: end;
}
.naglowek-sekcji--split > .etykieta, .naglowek-sekcji--split > .display { grid-column: 1; }
.naglowek-sekcji--split > .podtytul {
grid-column: 2; grid-row: 1 / span 2; align-self: end; justify-self: end;
margin: 0; max-width: 44ch;
}
@media (max-width: 900px) {
.naglowek-sekcji--split { display: block; }
.naglowek-sekcji--split > .podtytul { margin: 1.1rem 0 0; justify-self: start; }
}
.n-uslugi .naglowek-sekcji,
.powloka:has(> .proza[style*="text-align: center"]) > .naglowek-sekcji {
display: block; text-align: center;
}
:is(.n-uslugi, .powloka:has(> .proza[style*="text-align: center"])) .naglowek-sekcji .display { max-width: none; text-wrap: balance; }
:is(.n-uslugi, .powloka:has(> .proza[style*="text-align: center"])) .naglowek-sekcji .podtytul { margin: 1.25rem auto 0; }
.naglowek-sekcji h2 a { text-decoration: none; color: inherit; }
.naglowek-sekcji h2 a:hover { color: var(--czerw); }
.bc-spis__licznik { text-align: left; }
.bc-spis__licznik a { display: inline-flex; align-items: center; min-height: 44px; }
.faq__poz summary { gap: 1rem; }
.faq__poz summary::after {
content: ""; flex: none; width: 9px; height: 9px; margin: 0 0.35rem 0 auto;
border-right: 2px solid var(--czerw); border-bottom: 2px solid var(--czerw);
transform: translateY(-3px) rotate(45deg); transition: transform 0.25s var(--krzywa);
}
.faq__poz[open] summary::after { transform: translateY(2px) rotate(-135deg); }
@media (min-width: 901px) {
.powloka:has(> .naglowek-sekcji:first-child + .faq:last-child) {
display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr);
gap: clamp(2rem, 5vw, 5rem); align-items: start;
}
.powloka:has(> .naglowek-sekcji:first-child + .faq:last-child) > .naglowek-sekcji {
display: block; text-align: left; margin: 0;
position: sticky; top: calc(var(--belka-h) + 2rem);
}
.powloka:has(> .naglowek-sekcji:first-child + .faq:last-child) > .naglowek-sekcji > .podtytul { margin: 1.1rem 0 0; }
.powloka:has(> .naglowek-sekcji:first-child + .faq:last-child) > .faq { grid-template-columns: 1fr; gap: 0.75rem; }
}
.cta-pasek { padding-block: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem); }
.cta-pasek__wnetrze {
position: relative; overflow: hidden; isolation: isolate;
display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: end;
background: var(--grafit-gleboki); color: var(--mleko);
border-radius: var(--r-panel);
padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
}
.cta-pasek__wnetrze::after {
content: ""; position: absolute; z-index: -1; right: -3.5rem; bottom: -5rem;
width: clamp(14rem, 24vw, 21rem); aspect-ratio: 107.83 / 123.52;
background: var(--znak-akord) no-repeat center / contain; pointer-events: none;
}
@media (min-width: 900px) {
.cta-pasek__wnetrze { grid-template-columns: minmax(0, 1fr) auto; }
}
.cta-pasek__tresc { max-width: 40rem; }
.cta-pasek__tresc .etykieta { display: block; color: var(--stal-jasna); margin-bottom: 0.9rem; }
.cta-pasek__tresc h2 {
font-family: 'InterVariable', system-ui, sans-serif; font-weight: 800;
letter-spacing: -0.04em; line-height: 1.02; margin: 0 0 1rem;
font-size: clamp(1.9rem, 3.8vw, 3.1rem); text-wrap: balance;
}
.cta-pasek__tresc p { margin: 0; max-width: 48ch; color: rgba(237, 241, 242, 0.78); font-size: 1.0625rem; line-height: 1.6; }
.cta-pasek__akcje { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (max-width: 640px) {
.cta-pasek__akcje { width: 100%; }
.cta-pasek__akcje .pigula { flex: 1 1 100%; }
}
.bc-ramka {
--g4-akcent: var(--czerw-jasna);
position: sticky; top: calc(var(--belka-h) + 1rem);
overflow: hidden; isolation: isolate;
background: var(--grafit-gleboki); color: var(--mleko);
border-radius: 28px; box-shadow: var(--cien-uniesiona);
padding: 1.75rem 1.6rem 1.6rem;
}
.bc-ramka__tytul {
font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500;
font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--stal-jasna); margin: 0 0 0.5rem;
}
.bc-ramka__tel {
display: flex; align-items: center; min-height: 44px;
color: var(--mleko); text-decoration: none;
font-size: clamp(1.6rem, 1.2rem + 1vw, 1.95rem); line-height: 1.15; letter-spacing: -0.01em;
}
.bc-ramka__tel:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.bc-ramka__fakty { list-style: none; margin: 1rem 0 0; padding: 1rem 0 0; border-top: 1px solid rgba(237, 241, 242, 0.14); display: grid; gap: 0.75rem; }
.bc-ramka__fakty li { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.9rem; line-height: 1.45; color: var(--mleko); }
.bc-ramka__fakty .g4-ik { color: var(--stal-jasna); margin-top: 0.05rem; }
.bc-ramka__fakty .dane { color: var(--mleko); }
.bc-ramka__uwaga { margin: 1rem 0 0; padding-top: 0.9rem; border-top: 1px solid rgba(237, 241, 242, 0.14); font-size: 0.875rem; line-height: 1.5; color: var(--stal-jasna); }
.bc-ramka__akcje { display: grid; gap: 0.6rem; margin-top: 1.25rem; }
.bc-ramka .pigula { width: 100%; }
.bc-ramka .pigula--czerwona { background: var(--czerw-jasna); color: var(--czerw-napis); }
.bc-ramka .pigula--jasny-obrys { color: var(--mleko); border-color: rgba(237, 241, 242, 0.35); background: transparent; }
.bc-ramka .pigula--jasny-obrys:hover { border-color: var(--mleko); }
@media (max-width: 1024px) { .bc-ramka { position: static; } }
.bc-tabela {
margin: 0; background: var(--biel); border-radius: var(--r-karta);
border: 1px solid var(--linia); box-shadow: var(--cien-karta);
padding: 0.35rem clamp(1.1rem, 2vw, 1.75rem); overflow: hidden;
}
.bc-tabela__w { display: grid; grid-template-columns: minmax(8rem, 0.35fr) minmax(0, 1fr); gap: 1rem; align-items: baseline; padding: 0.95rem 0; border-top: 1px solid var(--linia); }
.bc-tabela__w:first-child { border-top: 0; }
.bc-tabela dt { margin: 0; font-size: 0.875rem; color: var(--stal); font-weight: 600; }
.bc-tabela dd { margin: 0; font-size: 0.9688rem; line-height: 1.5; color: var(--grafit-gleboki); min-width: 0; }
.bc-tabela dd a { color: var(--czerw); }
.bc-tabela .zetony { margin: 0.1rem 0 0; justify-content: flex-start; }
@media (max-width: 560px) { .bc-tabela__w { grid-template-columns: 1fr; gap: 0.2rem; } }
.bc-spis {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: clamp(1.5rem, 3vw, 3rem);
}
.bc-spis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bc-spis li { margin: 0; min-width: 0; }
.bc-spis a {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
min-height: 56px; padding: 0.85rem 0.15rem;
border-top: 1px solid var(--linia-mocna);
text-decoration: none; color: var(--grafit-gleboki);
font-size: 1rem; line-height: 1.35; font-weight: 700; letter-spacing: -0.01em;
transition: color 0.2s var(--krzywa);
}
.bc-spis a::after {
content: ""; flex: none; width: 8px; height: 8px; margin-right: 0.4rem;
border-right: 2px solid var(--czerw); border-top: 2px solid var(--czerw);
transform: rotate(45deg); transition: transform 0.25s var(--krzywa);
}
.bc-spis a:hover { color: var(--grafit); }
.bc-spis a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.bc-spis a:hover::after { transform: translateX(3px) rotate(45deg); }
.bc-spis .dane { margin-left: 0.4rem; font-weight: 500; font-size: 0.875rem; color: var(--stal); white-space: nowrap; }
.bc-spis + .wiecej__pole + .wiecej { margin-top: 1.75rem; }
@media (min-width: 641px) and (max-width: 1024px) { .bc-spis--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .bc-spis, .bc-spis--3 { grid-template-columns: 1fr; } }
.bc-plakietka {
display: inline-flex; align-items: center; gap: 0.45rem;
width: max-content; max-width: 100%;
padding: 0.42rem 0.95rem 0.42rem 0.75rem; border-radius: var(--r-pigula);
background: var(--grafit-gleboki); color: var(--mleko);
font-family: 'InterVariable', system-ui, sans-serif;
font-weight: 700; font-size: 0.8125rem; line-height: 1.2; letter-spacing: 0.01em; text-transform: none;
}
.bc-plakietka svg { width: 16px; height: 16px; flex: none; color: var(--czerw-jasna); }
.kadr-sekcja { padding-block: 0 clamp(0.5rem, 1.5vw, 1.25rem); }
.kadr-podstrony { box-shadow: var(--cien-hero); }
.bc-fakty {
list-style: none; margin: 0; padding: 0.35rem;
display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 0;
border-radius: 24px; background: var(--panel);
}
.bc-fakty li { padding: 0.95rem 1.2rem 1rem; background: none; border-radius: 0; box-shadow: none; }
.bc-fakty li + li { border-left: 1px solid var(--linia); }
.bc-fakty__wartosc {
display: block; font-family: 'InterVariable', system-ui, sans-serif; font-weight: 800;
font-size: 1.0625rem; letter-spacing: -0.02em; line-height: 1.25; color: var(--grafit-gleboki);
font-variant-numeric: tabular-nums;
}
.bc-fakty__podpis { display: block; font-size: 0.8125rem; line-height: 1.45; color: var(--stal); margin-top: 0.2rem; }
@media (max-width: 640px) {
.bc-fakty { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bc-fakty li + li { border-left: 0; }
.bc-fakty li:nth-child(even) { border-left: 1px solid var(--linia); }
.bc-fakty li:nth-child(n + 3) { border-top: 1px solid var(--linia); }
}
.sekcja--dowody { padding-block: 0 clamp(1rem, 2vw, 1.5rem); }
.sekcja--dowody + .sekcja { padding-top: clamp(3.5rem, 7vw, 6rem); }
.dowody { margin-top: 0; }
.dowody__lista {
list-style: none; margin: 0; padding: 0.35rem;
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
border-radius: 24px; background: var(--panel);
}
.dowody__poz { padding: 0.95rem 1.25rem 1rem; border-top: 0; }
.dowody__poz + .dowody__poz { border-left: 1px solid var(--linia); }
.dowody__wartosc { margin: 0 0 0.2rem; font-size: 1.0625rem; line-height: 1.25; color: var(--grafit-gleboki); }
.dowody__wartosc::before {
content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.5rem;
border-radius: 50%; background: var(--czerw); vertical-align: 0.12em;
}
.dowody__podpis { font-size: 0.8125rem; line-height: 1.45; }
@media (max-width: 1023px) {
.dowody__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.dowody__poz + .dowody__poz { border-left: 0; }
.dowody__poz:nth-child(even) { border-left: 1px solid var(--linia); }
.dowody__poz:nth-child(n + 3) { border-top: 1px solid var(--linia); }
}
@media (max-width: 480px) { .dowody__poz { padding: 0.85rem 0.9rem; } }
.kadr-sekcja + .sekcja { padding-top: clamp(2.5rem, 5vw, 4rem); }
.powloka:has(> .naglowek-sekcji--lewa, > .naglowek-sekcji--split) > .zetony { justify-content: flex-start; }
.pod-hero:not(:has(.okruszki)) { padding-top: clamp(2.5rem, 5vw, 4.5rem); }
.pod-hero__wizual > .bc-ramka { position: static; max-width: 26rem; margin-left: auto; }
@media (max-width: 1023px) { .pod-hero__wizual > .bc-ramka { margin-left: 0; } }
.bc-spis__nota { display: block; margin-top: 0.15rem; font-weight: 500; font-size: 0.875rem; letter-spacing: 0; color: var(--stal); }
.pod-siatka--lewa { justify-content: flex-start; }
.bc-karta__ikona--linia {
display: grid; place-items: center; width: 52px; height: 52px; margin: 0 0 1.1rem;
border-radius: 16px; background: var(--mgla); color: var(--grafit);
}
.bc-karta__ikona--linia .g4-ik { width: 26px; height: 26px; }
.stopka--krotka { margin-top: 0; padding-block: 1.5rem 2rem; border-radius: 0; background: none; }
.stopka--krotka .stopka__nota { margin-top: 0; padding-top: 1.25rem; }
.stopka--krotka a { color: var(--grafit); }
.pod-hero .pod-hero__lead a.dane { color: var(--grafit); }
.zgody { position: fixed; z-index: 55; left: 1rem; bottom: 1rem; width: min(34rem, calc(100vw - 2rem)); }
.zgody[hidden] { display: none; }
.zgody__karta {
padding: 1.25rem 1.35rem 1.2rem; border-radius: var(--r-karta);
background: var(--biel); color: var(--grafit);
box-shadow: 0 0 0 1px var(--linia), var(--cien-uniesiona);
animation: zgody-wjazd 0.35s var(--krzywa) both;
}
.zgody__tytul { margin: 0 0 0.4rem; font-size: 1.0625rem; font-weight: 750; letter-spacing: -0.01em; outline: none; }
.zgody__opis { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--grafit); }
.zgody__opis a { color: var(--grafit); text-underline-offset: 3px; }
.zgody__wybor { display: grid; gap: 0.6rem; margin-top: 0.9rem; }
.zgody__wybor[hidden] { display: none; }
.zgody__opcja { display: flex; align-items: flex-start; gap: 0.7rem; min-height: 44px; padding: 0.55rem 0.7rem;
border-radius: 12px; background: var(--panel); font-size: 0.875rem; line-height: 1.45; cursor: pointer; }
.zgody__opcja input { flex: none; width: 20px; height: 20px; margin: 0.1rem 0 0; accent-color: var(--grafit-gleboki); cursor: pointer; }
.zgody__opcja input:disabled { cursor: default; }
.zgody__przyciski { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.zgody__przyciski .pigula { min-height: 44px; font-family: inherit; cursor: pointer; }
.zgody__przyciski [hidden] { display: none; }
@keyframes zgody-wjazd { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 820px) {
.zgody { left: 0.75rem; right: 0.75rem; width: auto; bottom: calc(4.9rem + env(safe-area-inset-bottom)); max-width: 30rem; margin-inline: auto; }
.zgody__karta { padding: 1rem 1.05rem 1rem; max-height: calc(100vh - 7.5rem); overflow-y: auto; }
.zgody__przyciski { gap: 0.5rem; margin-top: 0.85rem; }
.zgody__przyciski .pigula { flex: 1 1 40%; justify-content: center; padding-inline: 0.75rem; }
.zgody__przyciski .zgody__ustawienia { flex-basis: 100%; }
}
.stopka__zgody {
display: inline-flex; align-items: center; min-height: 36px; padding: 0; border: 0; background: none;
font: inherit; font-size: 0.875rem; color: var(--grafit); text-decoration: underline;
text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer;
}
.stopka__zgody:focus-visible { outline: 2px solid var(--czerw); outline-offset: 3px; border-radius: 4px; }
@media (max-width: 820px) { .stopka__zgody { min-height: 44px; } }
.proza .tabela-przewijana { overflow-x: auto; margin: 0 0 1.5rem; }
.proza .tabela-cookies { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; }
.proza .tabela-cookies th, .proza .tabela-cookies td { padding: 0.6rem 0.75rem 0.6rem 0; border-bottom: 1px solid var(--linia); text-align: left; vertical-align: top; }
.proza .tabela-cookies th { font-size: 0.8125rem; font-weight: 700; color: var(--stal); }
.proza .tabela-cookies code { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 0.875rem; }
.proza .przycisk-zgody { margin: 0 0 1.5rem; }
.u4-kadr-model::before, .u4-polka::before, .u4-trio::before {
content: ""; position: absolute; inset: 4.2%; z-index: 0;
--z: var(--studio-znacznik); --d: 5.5%; --g: 1.5px;
background:
linear-gradient(var(--z), var(--z)) left top / var(--d) var(--g) no-repeat,
linear-gradient(var(--z), var(--z)) left top / var(--g) calc(var(--d) * 1.6) no-repeat,
linear-gradient(var(--z), var(--z)) right top / var(--d) var(--g) no-repeat,
linear-gradient(var(--z), var(--z)) right top / var(--g) calc(var(--d) * 1.6) no-repeat,
linear-gradient(var(--z), var(--z)) left bottom / var(--d) var(--g) no-repeat,
linear-gradient(var(--z), var(--z)) left bottom / var(--g) calc(var(--d) * 1.6) no-repeat,
linear-gradient(var(--z), var(--z)) right bottom / var(--d) var(--g) no-repeat,
linear-gradient(var(--z), var(--z)) right bottom / var(--g) calc(var(--d) * 1.6) no-repeat;
pointer-events: none;
}
.pod-hero__kadr--studio.u4-kadr-model img {
position: relative; z-index: 1;
padding: 6.5% 7% 5%; box-sizing: border-box;
}
.u4-polka {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
align-content: center; justify-items: center;
gap: 1% 6%; padding: 5% 10% 4%;
background: var(--studio); box-shadow: 0 1px 2px rgba(36, 48, 54, 0.06);
}
.u4-polka img {
position: relative; z-index: 1;
width: 100%; max-width: 156px; height: auto; aspect-ratio: 1;
filter: drop-shadow(0 12px 10px rgba(36, 48, 54, 0.14));
}
.u4-trio { background: var(--studio); box-shadow: 0 1px 2px rgba(36, 48, 54, 0.06); }
.u4-trio .u4-trio__rys { position: absolute; height: auto; z-index: 1; }
.u4-trio .u4-trio__rys--1 { left: 20%; bottom: 9%; width: 60%; z-index: 3; }
.u4-trio .u4-trio__rys--2 { right: 7%; bottom: 41%; width: 38%; opacity: 0.45; }
.u4-trio .u4-trio__rys--3 { left: 7%; bottom: 43%; width: 34%; opacity: 0.35; }
.u4-fakty { color: var(--grafit); }
.u4-fakty__glowa {
display: grid; grid-template-columns: 150px minmax(0, 1fr);
gap: 1rem; align-items: center;
}
.u4-fakty__syl { display: block; width: 150px; height: auto; }
.u4-fakty__auto {
margin: 0 0 0.35rem; font-weight: 800; font-size: 1.125rem;
letter-spacing: -0.015em; line-height: 1.2; color: var(--grafit-gleboki);
}
.u4-dl { margin: 0; font-size: 0.875rem; line-height: 1.45; }
.u4-dl dt { color: var(--stal); font-weight: 600; }
.u4-dl dd { margin: 0; color: var(--grafit); min-width: 0; }
.u4-fakty__glowa .u4-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.1rem 0.55rem; }
.u4-fakty__glowa .u4-dl dt::after { content: ":"; }
.u4-dl--chipy {
display: grid; grid-template-columns: max-content minmax(0, 1fr);
gap: 0.6rem 0.85rem; align-items: start;
margin-top: 0.95rem; padding-top: 0.9rem; border-top: 1px solid var(--linia);
}
.u4-dl--chipy dt { display: flex; align-items: center; min-height: 34px; font-size: 0.8125rem; }
.u4-dl--chipy dd { display: flex; flex-wrap: wrap; gap: 0.5rem 0.4rem; }
.u4-chip {
position: relative; display: inline-flex; align-items: center; gap: 0.4rem;
min-height: 34px; padding: 0.3rem 0.8rem; border-radius: var(--r-pigula);
background: var(--mgla); color: var(--grafit);
font-size: 0.8125rem; font-weight: 600; line-height: 1.25; text-decoration: none;
}
a.u4-chip { background: var(--biel); box-shadow: inset 0 0 0 1px var(--linia-mocna); }
a.u4-chip::after { content: ""; position: absolute; inset: -5px -2px; }
@media (hover: hover) {
a.u4-chip:hover { box-shadow: inset 0 0 0 1px var(--grafit); }
}
a.u4-chip:focus-visible { outline: 3px solid var(--czerw); outline-offset: 2px; }
.u4-chip .bc-dane__brak { font-weight: 500; color: var(--stal); }
.u4-kod { font-variant-numeric: tabular-nums; letter-spacing: 0.03em; }
.u4-chip--wiecej { color: var(--grafit-gleboki); }
.u4-p::before {
content: ""; flex: none; width: 20px; height: 20px; margin-left: -0.15rem;
background: center / 20px 20px no-repeat;
}
.u4-p-b::before { background-image: url("grafiki/v4/linia/benzyna.svg"); }
.u4-p-d::before { background-image: url("grafiki/v4/linia/diesel.svg"); }
.u4-p-h::before { background-image: url("grafiki/v4/linia/hybryda.svg"); }
.u4-p-e::before { background-image: url("grafiki/v4/linia/elektryk.svg"); }
.u4-fakty__nota {
margin: 0.95rem 0 0; padding-top: 0.8rem; border-top: 1px solid var(--linia);
font-size: 0.8125rem; line-height: 1.5; color: var(--stal);
}
.u4-fakty__nota a { color: var(--grafit); text-underline-offset: 3px; }
.u4-fakty__nota a:hover { color: var(--czerw); }
.u4-fakty--marka .u4-fakty__auto {
display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem;
font-size: 1.25rem; margin: 0;
}
.u4-plak {
display: inline-flex; align-items: center; gap: 0.35rem;
padding: 0.25rem 0.7rem 0.25rem 0.45rem; border-radius: var(--r-pigula);
background: var(--grafit-gleboki); color: var(--biel);
font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.005em;
--g4-akcent: #E33B44;
}
.u4-plak .g4-ik { color: var(--stal-jasna); }
.u4-sylwetki { align-items: flex-end; }
.u4-syl {
display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
width: 96px; min-height: 44px; padding: 0.25rem 0.2rem 0.35rem; border-radius: 12px;
color: var(--grafit); text-decoration: none; font-size: 0.8125rem; font-weight: 700; line-height: 1.2;
text-align: center;
}
.u4-syl img { display: block; width: 100%; height: auto; }
@media (hover: hover) { .u4-syl:hover { background: var(--mgla); } }
.u4-syl:focus-visible { outline: 3px solid var(--czerw); outline-offset: 2px; }
.u4-sylwetki .u4-chip--wiecej { align-self: center; }
@media (max-width: 640px) {
.u4-fakty__glowa { grid-template-columns: 112px minmax(0, 1fr); gap: 0.75rem; }
.u4-fakty__syl { width: 112px; }
.u4-fakty__glowa .u4-dl { grid-template-columns: 1fr; gap: 0; }
.u4-fakty__glowa .u4-dl dd + dt { margin-top: 0.3rem; }
.u4-dl--chipy { grid-template-columns: 1fr; gap: 0.35rem; }
.u4-dl--chipy dt { min-height: 0; }
.u4-dl--chipy dd + dt { margin-top: 0.45rem; }
.u4-syl { width: 84px; }
.u4-polka { padding: 7% 8% 6%; }
}
.u4-karta {
display: flex; flex-direction: column; width: 100%; height: 100%;
padding: 0.75rem 0.75rem 1rem; border-radius: var(--r-karta);
background: var(--mgla); color: var(--grafit); text-decoration: none;
transition: transform 0.25s var(--krzywa), box-shadow 0.25s var(--krzywa), background-color 0.25s var(--krzywa);
}
.panel .u4-karta { background: var(--biel); }
@media (hover: hover) {
.u4-karta:hover { transform: translateY(-3px); box-shadow: var(--cien-uniesiona); }
.u4-karta:hover .u4-karta__dol::after { transform: translate(2px, -2px); }
}
.u4-karta:focus-visible { outline: 3px solid var(--czerw); outline-offset: 3px; }
.u4-karta__rys { display: block; width: 100%; height: auto; }
.u4-karta__dol {
position: relative; display: flex; flex-direction: column; gap: 0.2rem;
margin: 0.5rem 0.4rem 0; padding-right: 1.75rem;
}
.u4-karta__dol::after {
content: ""; position: absolute; right: 0; bottom: 0.1rem; width: 20px; height: 20px;
background: var(--czerw);
-webkit-mask: url("grafiki/v4/linia/strzalka-ukos.svg") center / 20px 20px no-repeat;
mask: url("grafiki/v4/linia/strzalka-ukos.svg") center / 20px 20px no-repeat;
transition: transform 0.25s var(--krzywa);
}
.u4-karta__nazwa {
margin: 0; font-family: 'InterVariable', sans-serif; font-weight: 800;
font-size: clamp(1.0625rem, 0.95vw, 1.1875rem); letter-spacing: -0.02em; line-height: 1.2;
color: var(--grafit-gleboki); overflow-wrap: break-word;
}
.u4-karta__meta { font-size: 0.8125rem; line-height: 1.4; color: var(--stal); }
.u4-karta--plyta { padding: 0; background: none; }
.panel .u4-karta--plyta { background: none; }
@media (hover: hover) { .u4-karta--plyta:hover { box-shadow: none; } }
.u4-karta--plyta .u4-karta__dol { margin: 0.65rem 0.25rem 0; }
.u4-sr {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap;
}
.u4-karty > .karuzela__poz { flex-basis: clamp(240px, 8vw + 170px, 300px); }
@media (min-width: 821px) {
.u4-karty.karuzela { --odstep: clamp(0.9rem, 1.2vw, 1.25rem); padding-top: 0.25rem; }
}
.u4-grupa + .u4-grupa { margin-top: clamp(2.25rem, 4vw, 3.25rem); }
.u4-grupa .bc-grupa__tytul { margin-top: 0; }
.u4-grupy .n-mozaika { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
@media (min-width: 821px) and (max-width: 1024px) {
.u4-karty.karuzela { --kolumny: 4; --odstep: 0.75rem; }
.u4-karty .u4-karta { padding: 0.5rem 0.5rem 0.8rem; }
.u4-karty .u4-karta__dol { margin-inline: 0.25rem; }
}
.u4-spis8:not(:has(~ .wiecej__pole:checked)) > li:nth-child(n + 9) { display: none; }
.bc-sekcja-kafli > .powloka > .bc-spis:first-child { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.zeton.u4-p { gap: 0.4rem; padding-left: 0.55rem; }
.bc-fakty__tresc { display: block; min-width: 0; }
.bc-fakty__poz--ik { display: flex; align-items: flex-start; gap: 0.65rem; }
.bc-fakty__ik { width: 24px; height: 24px; flex: none; margin-top: 0.05rem; color: var(--stal); }
@media (max-width: 420px) {
.bc-fakty__poz--ik { display: block; }
.bc-fakty__ik { display: block; margin: 0 0 0.35rem; }
}
.kafel-szybki--tekst {
align-items: flex-start; justify-content: flex-start; text-align: left;
padding: 1.35rem 1.35rem 1.3rem; min-height: 8.75rem;
}
.kafel-szybki--tekst .kafel-szybki__nazwa { padding-right: 1.75rem; text-wrap: pretty; }
.kafel-szybki--tekst .kafel-szybki__opis { max-width: none; text-wrap: pretty; }
@media (min-width: 821px) and (max-width: 1024px) {
.kafel-szybki--tekst { display: flex; padding: 1.35rem 1.5rem; }
}
img[src*="zdjecia/modele/"] { object-fit: cover; }
.pod-hero__kadr--plac {
background: var(--studio);
box-shadow: 0 1px 2px rgba(36, 48, 54, 0.06);
isolation: isolate;
}
.pod-hero__kadr--plac::before {
content: ""; position: absolute; inset: 4.2%; z-index: 0;
--z: var(--studio-znacznik); --d: 5.5%; --g: 1.5px;
background:
linear-gradient(var(--z), var(--z)) left top / var(--d) var(--g) no-repeat,
linear-gradient(var(--z), var(--z)) left top / var(--g) calc(var(--d) * 1.6) no-repeat,
linear-gradient(var(--z), var(--z)) right top / var(--d) var(--g) no-repeat,
linear-gradient(var(--z), var(--z)) right top / var(--g) calc(var(--d) * 1.6) no-repeat,
linear-gradient(var(--z), var(--z)) left bottom / var(--d) var(--g) no-repeat,
linear-gradient(var(--z), var(--z)) left bottom / var(--g) calc(var(--d) * 1.6) no-repeat,
linear-gradient(var(--z), var(--z)) right bottom / var(--d) var(--g) no-repeat,
linear-gradient(var(--z), var(--z)) right bottom / var(--g) calc(var(--d) * 1.6) no-repeat;
pointer-events: none;
}
.m4-plac { position: absolute; inset: 0; z-index: 1; }
.m4-plac .m4-plac__auto {
position: absolute; width: 64%; height: auto; aspect-ratio: 400 / 186;
object-fit: contain;
}
.m4-plac .m4-plac__auto--przod { width: 66%; left: 17%; bottom: 6%; }
.m4-plac .m4-plac__auto--tyl-lewy,
.m4-plac .m4-plac__auto--tyl-prawy { width: 47%; bottom: 29%; opacity: 0.5; }
.m4-plac .m4-plac__auto--tyl-lewy { left: 5%; }
.m4-plac .m4-plac__auto--tyl-prawy { right: 5%; }
.m4-plac--2 .m4-plac .m4-plac__auto--przod { left: 11%; }
.m4-plac--2 .m4-plac .m4-plac__auto--tyl-lewy { left: auto; right: 5%; }
.m4-plac--1 .m4-plac .m4-plac__auto--przod { width: 72%; left: 14%; bottom: 10%; }
.m4-plac__tabliczka {
position: absolute; z-index: 2; top: 8%; left: 7%;
display: flex; flex-direction: column; gap: 0.1rem;
max-width: 60%; padding: 0.55rem 0.8rem 0.6rem;
border: 1px solid var(--studio-znacznik); border-radius: 12px;
background: rgba(255, 255, 255, 0.72);
line-height: 1.25;
}
.m4-plac__rodzaj {
font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--stal);
}
.m4-plac__marka {
font-weight: 800; letter-spacing: -0.025em; font-size: clamp(1.125rem, 1.5vw, 1.375rem);
color: var(--grafit-gleboki);
}
.m4-plac__modele { font-size: 0.8125rem; font-weight: 600; color: var(--stal); font-variant-numeric: tabular-nums; }
@media (max-width: 520px) {
.m4-plac__tabliczka { top: 7%; left: 6%; padding: 0.4rem 0.6rem 0.45rem; border-radius: 10px; }
.m4-plac__rodzaj { font-size: 0.625rem; }
.m4-plac__marka { font-size: 1rem; }
.m4-plac__modele { font-size: 0.75rem; }
}
.pod-hero__kadr--plac-karta { background: var(--grafit-gleboki); box-shadow: var(--cien-hero); }
.m4-plac__karta.n-marka {
position: absolute; inset: 0; z-index: 1;
width: auto; height: auto; min-height: 0; aspect-ratio: auto;
border-radius: inherit; transform: none; box-shadow: none;
padding: clamp(1.4rem, 3vw, 2.25rem);
}
.m4-plac__karta .n-marka__znak { width: clamp(88px, 22%, 140px); height: auto; }
.m4-plac__karta .n-marka__nazwa { font-size: clamp(2rem, 3.4vw, 3.25rem); }
@media (hover: hover) {
.m4-plac__karta.n-marka:hover { transform: none; box-shadow: none; }
}
.m4-fakty {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
.m4-fakty li + li { border-left: 1px solid var(--linia); }
.m4-fakty a {
display: flex; align-items: center; justify-content: center; gap: 0.55rem;
min-height: 44px; padding: 0.15rem 0.75rem;
text-decoration: none; color: var(--grafit-gleboki);
border-radius: 12px;
}
.m4-fakty .g4-ik { color: var(--stal); }
.m4-fakty__podpis { font-weight: 700; font-size: 0.9375rem; letter-spacing: -0.01em; }
@media (hover: hover) {
.m4-fakty a:hover { color: var(--czerw); }
.m4-fakty a:hover .g4-ik { color: var(--czerw); }
}
.m4-fakty a:focus-visible { outline: 3px solid var(--czerw); outline-offset: 2px; }
.m4-lista .karta-tasma__kadr { background: var(--studio); }
.m4-modele .karta-tasma__kadr { padding: 0.5rem 0.5rem 0.15rem; }
.m4-modele .karta-tasma__kadr img { aspect-ratio: 400 / 240; object-fit: contain; }
.m4-silniki .karta-tasma__kadr { padding: 0.85rem 0.85rem 0.35rem; }
.m4-silniki .karta-tasma__kadr img { aspect-ratio: 400 / 250; object-fit: contain; }
.m4-lista .karta-tasma__typ { font-variant-numeric: tabular-nums; }
.m4-korpus__uklad {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1rem, 2vw, 1.5rem);
}
.m4-korpus__pole {
padding: clamp(1.35rem, 2.4vw, 2rem);
border-radius: var(--r-karta); background: var(--biel);
box-shadow: var(--cien-karta);
}
.m4-korpus__tytul {
display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.75rem;
font-weight: 800; letter-spacing: -0.015em; font-size: 1.125rem; color: var(--grafit-gleboki);
}
.m4-korpus__tytul .g4-ik { width: 24px; height: 24px; color: var(--stal); }
.m4-korpus__zdanie { margin: 0 0 1.1rem; max-width: 52ch; color: var(--stal); line-height: 1.6; }
.m4-korpus .zetony { justify-content: flex-start; margin: 0; }
.m4-korpus .zeton { background: var(--mgla); border-color: transparent; }
.m4-korpus a.zeton { background: var(--biel); border-color: var(--linia); }
@media (max-width: 900px) {
.m4-korpus__uklad { grid-template-columns: 1fr; }
}
@media (max-width: 820px), (pointer: coarse) {
.m4-korpus a.zeton { min-height: 44px; padding-inline: 0.9rem; }
}
.n-grupa__strzalka .g4-ik { width: 20px; height: 20px; }
.karuzela__ster-poz .g4-ik { width: 20px; height: 20px; }
.n-laweta__ikona { color: var(--mleko); --g4-akcent: #E33B44; }
.n-laweta__ikona .g4-ik { width: 28px; height: 28px; }
.n-dzielnice:has(.n-dz a[href$="-aniolki/"]:is(:hover, :focus-visible)) .mapa__dz[href$="-aniolki/"] path,
.n-dzielnice:has(.n-dz a[href$="-bretowo/"]:is(:hover, :focus-visible)) .mapa__dz[href$="-bretowo/"] path,
.n-dzielnice:has(.n-dz a[href$="-jasien/"]:is(:hover, :focus-visible)) .mapa__dz[href$="-jasien/"] path,
.n-dzielnice:has(.n-dz a[href$="-kokoszki/"]:is(:hover, :focus-visible)) .mapa__dz[href$="-kokoszki/"] path,
.n-dzielnice:has(.n-dz a[href$="-matarnia/"]:is(:hover, :focus-visible)) .mapa__dz[href$="-matarnia/"] path,
.n-dzielnice:has(.n-dz a[href$="-oliwa/"]:is(:hover, :focus-visible)) .mapa__dz[href$="-oliwa/"] path,
.n-dzielnice:has(.n-dz a[href$="-osowa/"]:is(:hover, :focus-visible)) .mapa__dz[href$="-osowa/"] path,
.n-dzielnice:has(.n-dz a[href$="-piecki-migowo/"]:is(:hover, :focus-visible)) .mapa__dz[href$="-piecki-migowo/"] path,
.n-dzielnice:has(.n-dz a[href$="-przymorze/"]:is(:hover, :focus-visible)) .mapa__dz[href$="-przymorze/"] path,
.n-dzielnice:has(.n-dz a[href$="-strzyza/"]:is(:hover, :focus-visible)) .mapa__dz[href$="-strzyza/"] path,
.n-dzielnice:has(.n-dz a[href$="-suchanino/"]:is(:hover, :focus-visible)) .mapa__dz[href$="-suchanino/"] path,
.n-dzielnice:has(.n-dz a[href$="-ujescisko-lostowice/"]:is(:hover, :focus-visible)) .mapa__dz[href$="-ujescisko-lostowice/"] path,
.n-dzielnice:has(.n-dz a[href$="-vii-dwor/"]:is(:hover, :focus-visible)) .mapa__dz[href$="-vii-dwor/"] path,
.n-dzielnice:has(.n-dz a[href$="-wrzeszcz/"]:is(:hover, :focus-visible)) .mapa__dz[href$="-wrzeszcz/"] path,
.n-dzielnice:has(.n-dz a[href$="-zaspa/"]:is(:hover, :focus-visible)) .mapa__dz[href$="-zaspa/"] path {
fill: var(--czerw); stroke: var(--czerw);
}
@media (min-width: 821px) {
.n-dz > li { transition: border-color 0.2s var(--krzywa), box-shadow 0.2s var(--krzywa); }
.n-dzielnice:has(.mapa__dz[href$="-aniolki/"]:is(:hover, :focus-visible)) .n-dz > li:has(a[href$="-aniolki/"]),
.n-dzielnice:has(.mapa__dz[href$="-bretowo/"]:is(:hover, :focus-visible)) .n-dz > li:has(a[href$="-bretowo/"]),
.n-dzielnice:has(.mapa__dz[href$="-jasien/"]:is(:hover, :focus-visible)) .n-dz > li:has(a[href$="-jasien/"]),
.n-dzielnice:has(.mapa__dz[href$="-kokoszki/"]:is(:hover, :focus-visible)) .n-dz > li:has(a[href$="-kokoszki/"]),
.n-dzielnice:has(.mapa__dz[href$="-matarnia/"]:is(:hover, :focus-visible)) .n-dz > li:has(a[href$="-matarnia/"]),
.n-dzielnice:has(.mapa__dz[href$="-oliwa/"]:is(:hover, :focus-visible)) .n-dz > li:has(a[href$="-oliwa/"]),
.n-dzielnice:has(.mapa__dz[href$="-osowa/"]:is(:hover, :focus-visible)) .n-dz > li:has(a[href$="-osowa/"]),
.n-dzielnice:has(.mapa__dz[href$="-piecki-migowo/"]:is(:hover, :focus-visible)) .n-dz > li:has(a[href$="-piecki-migowo/"]),
.n-dzielnice:has(.mapa__dz[href$="-przymorze/"]:is(:hover, :focus-visible)) .n-dz > li:has(a[href$="-przymorze/"]),
.n-dzielnice:has(.mapa__dz[href$="-strzyza/"]:is(:hover, :focus-visible)) .n-dz > li:has(a[href$="-strzyza/"]),
.n-dzielnice:has(.mapa__dz[href$="-suchanino/"]:is(:hover, :focus-visible)) .n-dz > li:has(a[href$="-suchanino/"]),
.n-dzielnice:has(.mapa__dz[href$="-ujescisko-lostowice/"]:is(:hover, :focus-visible)) .n-dz > li:has(a[href$="-ujescisko-lostowice/"]),
.n-dzielnice:has(.mapa__dz[href$="-vii-dwor/"]:is(:hover, :focus-visible)) .n-dz > li:has(a[href$="-vii-dwor/"]),
.n-dzielnice:has(.mapa__dz[href$="-wrzeszcz/"]:is(:hover, :focus-visible)) .n-dz > li:has(a[href$="-wrzeszcz/"]),
.n-dzielnice:has(.mapa__dz[href$="-zaspa/"]:is(:hover, :focus-visible)) .n-dz > li:has(a[href$="-zaspa/"]) {
border-top-color: var(--czerw); box-shadow: inset 0 1px 0 var(--czerw);
}
}
@media (max-width: 640px) {
.n-hero__slowa .pigulki { flex-wrap: nowrap; gap: 0.6rem; }
.n-hero__slowa .pigulki .pigula { flex: 1 1 0; min-width: 0; padding-inline: 0.75rem; }
.n-hero__slowa .pigulki .pigula--duza { min-height: 50px; }
}
@media (max-width: 359px) {
.n-hero__slowa .pigulki { flex-wrap: wrap; }
.n-hero__slowa .pigulki .pigula { flex-basis: 100%; }
}
@media (max-width: 480px) {
.n-dowody__nazwa { display: flex; align-items: baseline; gap: 0.45rem; font-size: 0.9375rem; letter-spacing: -0.025em; overflow-wrap: break-word; }
.n-dowody__nazwa::before { flex: none; margin-right: 0; }
}
@media (max-width: 600px) {
.n-hero__kadr:has(.n-laweta) {
aspect-ratio: auto; overflow: visible;
background: none; box-shadow: none; border-radius: 0;
}
.n-hero__kadr:has(.n-laweta) img {
display: block; height: auto; aspect-ratio: 4 / 3;
border-radius: var(--r-panel);
box-shadow: 0 2px 4px rgba(36, 48, 54, 0.06), 0 30px 60px -36px rgba(36, 48, 54, 0.55);
animation: none;
}
.n-hero__kadr .n-laweta {
position: relative; left: auto; bottom: auto;
width: calc(100% - 1.5rem); margin: -1.75rem auto 0;
background: var(--grafit-gleboki);
}
}
.n-laweta__status {
display: flex; align-items: center; gap: 0.45rem;
max-width: 13.5rem;
font-size: 0.8125rem; font-weight: 500; line-height: 1.35;
color: rgba(237, 241, 242, 0.82);
}
.n-laweta__status:empty { display: none; }
.n-laweta--otwarte .n-laweta__status::before {
content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
background: #34C759; box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.55);
}
@media (prefers-reduced-motion: no-preference) {
.n-laweta--otwarte .n-laweta__status::before { animation: n-puls 2.4s ease-out infinite; }
}
@keyframes n-puls {
0% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.55); }
70%, 100% { box-shadow: 0 0 0 7px rgba(52, 199, 89, 0); }
}
.n-laweta--otwarte @media (max-width: 600px) {
.n-laweta__status { max-width: none; }
}
.n-laweta { padding: 0.8rem 1.05rem 0.85rem; border-radius: 20px; }
.n-laweta__slowa { max-width: 9.25rem; gap: 0.15rem; }
.n-laweta__tytul { display: flex; align-items: center; gap: 0.4rem; }
.n-laweta__tytul .g4-ik { width: 20px; height: 20px; flex: none; --g4-akcent: #E33B44; }
.n-laweta__status { max-width: none; margin-top: 0.2rem; }
@media (max-width: 600px) {
.n-laweta__slowa { max-width: none; }
}
.sk-sr {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap;
}
.sk-nr { display: inline-flex; align-items: center; gap: 0.5rem; }
.sk-nr .g4-ik { color: var(--grafit); }
.pod-hero__kadr--karta.sk-plyta img {
width: 76%; border-radius: 0; box-shadow: none;
filter: drop-shadow(0 2px 2px rgba(36, 48, 54, 0.1)) drop-shadow(0 22px 20px rgba(36, 48, 54, 0.2));
transform: translateY(-4%);
}
.sk-plyta > picture { display: contents; }
.pod-hero__kadr--karta.sk-plyta::after { left: 18%; right: 18%; bottom: 9%; }
.sk-fakty { display: flex; flex-wrap: wrap; gap: 0.85rem 1.75rem; margin: 0; }
.sk-fakty__poz { min-width: 0; }
.sk-fakty dt {
margin: 0 0 0.2rem; font-size: 0.6875rem; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--stal);
}
.sk-fakty dd {
margin: 0; font-weight: 700; font-size: 0.9375rem; line-height: 1.3;
color: var(--grafit); font-variant-numeric: tabular-nums;
}
.sk-silnik, .sk-kod {
position: relative;
display: flex; flex-direction: column; width: 100%; height: 100%;
color: var(--grafit); text-decoration: none; overflow-wrap: break-word;
}
.sk-silnik:focus-visible, .sk-kod:focus-visible { outline: 3px solid var(--czerw); outline-offset: 4px; border-radius: var(--r-karta); }
.sk-karta__dol {
display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem;
}
.sk-karta__slowa { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.sk-karta__nazwa {
margin: 0; font-family: 'InterVariable', sans-serif; font-weight: 800;
letter-spacing: -0.02em; line-height: 1.2; font-size: clamp(1.0625rem, 0.95vw, 1.1875rem);
text-wrap: pretty;
}
.sk-karta__meta { font-size: 0.8125rem; font-weight: 600; line-height: 1.4; color: var(--stal); }
.sk-karta__strzalka {
width: 20px; height: 20px; flex: none; margin-top: 0.1rem;
color: var(--czerw); transition: transform 0.25s var(--krzywa);
}
.sk-silnik__plyta {
width: 100%; height: auto; aspect-ratio: 400 / 250;
filter: drop-shadow(0 1px 1px rgba(36, 48, 54, 0.08)) drop-shadow(0 12px 14px rgba(36, 48, 54, 0.1));
transition: transform 0.3s var(--krzywa), filter 0.3s var(--krzywa);
}
.sk-silnik .sk-karta__dol { padding: 0.85rem 0.35rem 0.25rem; }
@media (hover: hover) {
.sk-silnik:hover .sk-silnik__plyta {
transform: translateY(-4px);
filter: drop-shadow(0 2px 3px rgba(36, 48, 54, 0.1)) drop-shadow(0 24px 22px rgba(36, 48, 54, 0.2));
}
.sk-silnik:hover .sk-karta__strzalka, .sk-kod:hover .sk-karta__strzalka { transform: translate(2px, -2px); }
}
.sk-kod {
overflow: hidden; background: var(--biel);
border: 1px solid var(--linia); border-radius: var(--r-karta); box-shadow: var(--cien-karta);
transition: transform 0.25s var(--krzywa), box-shadow 0.25s var(--krzywa), border-color 0.25s var(--krzywa);
}
.sk-kod__ekran {
position: relative; display: block; overflow: hidden;
aspect-ratio: 504 / 192; background: var(--mgla);
}
.sk-kod__ekran img {
position: absolute; left: -5.5556%; top: -11.4583%;
width: 111.1111%; max-width: none; height: auto;
transition: transform 0.45s var(--krzywa);
}
.sk-kod .sk-karta__dol { flex: 1 1 auto; padding: 0.95rem 1.1rem 1.05rem; }
.sk-kod .sk-karta__slowa { flex: 1 1 auto; }
.sk-kod .sk-karta__meta { margin-top: auto; padding-top: 0.2rem; }
@media (hover: hover) {
.sk-kod:hover { transform: translateY(-3px); border-color: transparent; box-shadow: var(--cien-uniesiona); }
.sk-kod:hover .sk-kod__ekran img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
.sk-silnik__plyta, .sk-kod, .sk-kod__ekran img, .sk-karta__strzalka { transition: none !important; }
}
@media (min-width: 821px) {
.sk-lista--silniki.karuzela { padding-top: 0.5rem; row-gap: clamp(1.5rem, 2.4vw, 2.25rem); }
}
.sf__filtr { min-width: 0; margin: clamp(0.25rem, 1vw, 0.75rem) 0 0; padding: 0; border: 0; }
.sf__legenda {
padding: 0; margin: 0 0 0.85rem;
font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500;
font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stal);
}
.sf__pola { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sf__pole {
position: fixed; top: 50%; left: 0;
width: 1px; height: 1px; margin: -1px;
clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.sf__et {
display: inline-flex; align-items: center; min-height: 44px;
padding: 0.5rem 1rem; border-radius: var(--r-pigula);
background: var(--biel); border: 1px solid var(--linia);
font-weight: 600; font-size: 0.9375rem; line-height: 1.2; color: var(--grafit);
white-space: nowrap; cursor: pointer; user-select: none;
transition: border-color 0.2s var(--krzywa), background-color 0.2s var(--krzywa), color 0.2s var(--krzywa);
}
.sf__et:hover { border-color: var(--grafit); }
.sf__pole:checked + .sf__et { background: var(--grafit-gleboki); border-color: var(--grafit-gleboki); color: var(--mleko); }
.sf__pole:focus-visible + .sf__et { outline: 3px solid var(--czerw); outline-offset: 2px; }
.sf__et--granica { position: relative; margin-right: 0.85rem; }
.sf__et--granica::after {
content: ""; position: absolute; right: calc(-0.5rem - 1px); top: 22%; bottom: 22%;
width: 1px; background: var(--linia-mocna); pointer-events: none;
}
.sf__filtr { display: none; }
.sf__marki { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.sf-marka__znak, .sf-marka__nota, .sf-marka .n-marka__plakietka { display: none; }
.sf-marka__nazwa { display: none; }
@supports selector(:has(*)) {
.sf__filtr { display: block; }
.sf__marki { display: block; margin-top: 0; }
.sf-marka { display: none; }
.sf:has(.sf__pole--marka:checked) .sf-marka {
position: relative; isolation: isolate; overflow: hidden;
display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
gap: 1rem 1.5rem; margin-top: 1.25rem;
padding: clamp(1.1rem, 2vw, 1.4rem) clamp(1.2rem, 2.4vw, 1.75rem);
border-radius: var(--r-karta); background: var(--grafit-gleboki); color: var(--mleko);
--g4-akcent: #E33B44;
animation: sf-wchodzi 0.35s var(--krzywa) both;
}
.sf-marka__znak {
display: block; position: absolute; z-index: -1;
right: clamp(12rem, 22vw, 16rem); top: 50%; height: 4.75rem; width: calc(4.75rem * 0.873);
transform: translateY(-50%);
}
.sf-marka__znak .znak-p { fill: rgba(227, 59, 68, 0.55); }
.sf-marka__znak .znak-b { fill: rgba(237, 241, 242, 0.12); }
.sf-marka__slowa { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.9rem; min-width: 0; }
.sf-marka .n-marka__plakietka { display: inline-flex; order: 2; }
.sf-marka__nazwa {
display: block; margin: 0; order: 1;
font-family: 'InterVariable', sans-serif; font-weight: 800;
font-size: clamp(1.625rem, 2.6vw, 2.25rem); letter-spacing: -0.035em; line-height: 1.02;
}
.sf-marka__nota {
display: block; order: 3; flex-basis: 100%; margin: 0;
font-size: 0.875rem; font-weight: 600; color: rgba(237, 241, 242, 0.78);
}
.sf-marka__nota .dane { color: var(--mleko); }
.sf-marka__lacze .g4-ik { width: 20px; height: 20px; }
}
@keyframes sf-wchodzi { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sk-grupa { margin-top: clamp(2.25rem, 4vw, 3.25rem); }
.sk-grupa__tytul {
display: flex; align-items: center; gap: 0.6rem;
margin: 0 0 clamp(1rem, 1.8vw, 1.4rem);
font-family: 'InterVariable', sans-serif; font-weight: 800; letter-spacing: -0.025em;
font-size: clamp(1.25rem, 1.6vw, 1.5rem); line-height: 1.2; color: var(--grafit);
}
.sk-grupa__tytul .g4-ik { width: 24px; height: 24px; }
@media (min-width: 821px) {
.sf:not(:has(.sf__pole--marka:checked)) .sk-lista:not(:has(~ .powloka > .wiecej__pole:checked)) > .sk-dalej { display: none; }
.sk-lista:has(~ .powloka > .wiecej__pole:checked) > .sk-dalej { animation: kafel-wchodzi 0.42s var(--krzywa) both; }
}
.sf:has(.sf__pole--marka:checked) .sk-grupa .wiecej { display: none; }
.sf:has(.sf__pole--marka:checked) .wiecej__licznik { display: none; }
@media (max-width: 820px) {
.sf__pola {
flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
margin-inline: -1rem; padding: 0.15rem 1rem 0.35rem; scroll-padding-inline: 1rem;
overscroll-behavior-x: contain;
}
.sf__pola::-webkit-scrollbar { display: none; }
.sf__et { flex: none; }
@supports selector(:has(*)) {
.sf:has(.sf__pole--marka:checked) .sf-marka { grid-template-columns: minmax(0, 1fr); }
.sf-marka__znak { right: 1.1rem; top: auto; bottom: 1.1rem; transform: none; height: 3.5rem; width: calc(3.5rem * 0.873); }
.sf-marka__lacze { justify-self: start; }
}
}
@media (prefers-reduced-motion: reduce) {
.sf__et { transition: none; }
.sf-marka, .sk-lista > .sk-dalej { animation: none !important; }
}
.sk-kody-grupa { padding-top: clamp(1.4rem, 2.4vw, 1.9rem); margin-top: clamp(1.4rem, 2.4vw, 1.9rem); border-top: 1px solid var(--linia); }
.sk-kody-grupa__glowa { margin-bottom: 0.9rem; }
.sk-kody-grupa .sk-grupa__tytul { margin: 0; font-size: 1.125rem; }
.sk-kody-grupa__licznik { margin: 0.3rem 0 0 calc(24px + 0.6rem); font-size: 0.8125rem; font-weight: 600; color: var(--stal); }
.zetony.sk-zetony { justify-content: flex-start; margin: 0; gap: 0.6rem; }
.zeton.sk-zeton {
flex-direction: column; align-items: flex-start; gap: 0.15rem;
min-height: 44px; max-width: 24rem; padding: 0.65rem 0.95rem; border-radius: 14px;
background: var(--biel); border-color: var(--linia);
transition: border-color 0.2s var(--krzywa), transform 0.2s var(--krzywa);
}
.sk-zeton__kod { font-size: 0.9375rem; letter-spacing: 0.01em; color: var(--czerw); }
.sk-zeton__temat {
font-family: 'InterVariable', sans-serif; font-weight: 500; font-size: 0.9375rem;
line-height: 1.35; color: var(--grafit); overflow-wrap: break-word;
}
@media (hover: hover) { .zeton.sk-zeton:hover { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .zeton.sk-zeton { transition: none; } .zeton.sk-zeton:hover { transform: none; } }
@media (min-width: 1024px) {
.sk-kody-grupa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); column-gap: 0.9rem; align-items: start; }
.sk-kody-grupa__glowa { margin: 0; padding: 0.55rem 1.5rem 0 0; }
}
@media (min-width: 821px) and (max-width: 1024px) {
.sk-lista.karuzela { --kolumny: 3; }
}
.pod-hero__kadr--studio.dz-mapa { display: grid; place-items: center; }
.dz-mapa img { background: #FFFFFF; }
@media (max-width: 640px) {
.pod-hero__kadr--studio.dz-mapa { box-shadow: 0 0 0 1px var(--linia-mocna), 0 18px 30px -24px rgba(36, 48, 54, 0.45); }
}
@media (min-width: 641px) {
.dz-mapa::before {
content: ""; position: absolute; inset: 3.4%;
--z: var(--studio-znacznik); --d: 4.5%; --g: 1.5px;
background:
linear-gradient(var(--z), var(--z)) left top / var(--d) var(--g) no-repeat,
linear-gradient(var(--z), var(--z)) left top / var(--g) calc(var(--d) * 1.6) no-repeat,
linear-gradient(var(--z), var(--z)) right top / var(--d) var(--g) no-repeat,
linear-gradient(var(--z), var(--z)) right top / var(--g) calc(var(--d) * 1.6) no-repeat,
linear-gradient(var(--z), var(--z)) left bottom / var(--d) var(--g) no-repeat,
linear-gradient(var(--z), var(--z)) left bottom / var(--g) calc(var(--d) * 1.6) no-repeat,
linear-gradient(var(--z), var(--z)) right bottom / var(--d) var(--g) no-repeat,
linear-gradient(var(--z), var(--z)) right bottom / var(--g) calc(var(--d) * 1.6) no-repeat;
pointer-events: none;
}
.dz-mapa::after {
content: ""; position: absolute; left: 14%; right: 14%; bottom: 4.5%; height: 7%;
background: radial-gradient(closest-side, rgba(36, 48, 54, 0.22), rgba(36, 48, 54, 0.06) 60%, rgba(36, 48, 54, 0));
pointer-events: none;
}
.dz-mapa img {
position: relative; z-index: 1;
width: 86%; height: auto; aspect-ratio: 16 / 10;
border-radius: 18px;
box-shadow: 0 0 0 1px rgba(36, 48, 54, 0.07), 0 2px 3px rgba(36, 48, 54, 0.08),
0 30px 40px -30px rgba(36, 48, 54, 0.55);
transform: translateY(-2%);
}
}
@media (min-width: 1024px) {
.dz-druga__uklad {
display: grid; align-items: center;
grid-template-columns: minmax(0, 1fr) minmax(0, 34rem);
gap: clamp(2.5rem, 6vw, 6rem);
}
.dz-druga__uklad > .naglowek-sekcji { margin-bottom: 0; }
.dz-druga .bc-druga-linia { max-width: none; }
}
.dz-druga .bc-druga-linia { margin: 0; }
.bl-spis {
padding: clamp(1rem, 2vw, 1.5rem);
border-radius: var(--r-panel);
background: var(--studio);
box-shadow: 0 1px 2px rgba(36, 48, 54, 0.06);
}
.bl-spis__glowa {
display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
gap: 0.25rem 1rem; margin: 0 0.35rem 0.9rem;
}
.bl-spis__tytul {
font-family: 'InterVariable', sans-serif; font-weight: 800;
font-size: 1.125rem; letter-spacing: -0.02em; color: var(--grafit-gleboki);
}
.bl-spis__suma { font-size: 0.8125rem; color: var(--stal); }
.bl-spis__lista {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem;
}
.bl-spis__poz {
display: flex; align-items: center; gap: 0.65rem;
min-height: 48px; padding: 0.5rem 0.85rem;
border: 1px solid var(--linia); border-radius: 14px;
background: rgba(255, 255, 255, 0.78);
color: var(--grafit); text-decoration: none;
font-weight: 600; font-size: 0.9375rem; line-height: 1.25;
transition: background-color 0.2s var(--krzywa), border-color 0.2s var(--krzywa), box-shadow 0.2s var(--krzywa);
}
.bl-spis__poz { --bl-drugi: var(--stal); }
.bl-spis__poz .g4-ik, .bl-spis__licznik { color: var(--bl-drugi); }
.bl-spis__nazwa { flex: 1; min-width: 0; }
.bl-spis__licznik { font-size: 0.8125rem; }
.bl-spis__poz:hover { background: var(--biel); border-color: var(--linia-mocna); box-shadow: var(--cien-karta); }
.bl-spis__poz:focus-visible { outline: 3px solid var(--czerw); outline-offset: 2px; }
main:has(#temat-auta-francuskie:target) .bl-spis [href="#temat-auta-francuskie"],
main:has(#temat-przeglad-stacja:target) .bl-spis [href="#temat-przeglad-stacja"],
main:has(#temat-oleje-plyny:target) .bl-spis [href="#temat-oleje-plyny"],
main:has(#temat-opony:target) .bl-spis [href="#temat-opony"],
main:has(#temat-klimatyzacja:target) .bl-spis [href="#temat-klimatyzacja"],
main:has(#temat-hamulce-zawieszenie:target) .bl-spis [href="#temat-hamulce-zawieszenie"],
main:has(#temat-bezpieczenstwo:target) .bl-spis [href="#temat-bezpieczenstwo"],
main:has(#temat-przepisy-droga:target) .bl-spis [href="#temat-przepisy-droga"],
main:has(#temat-elektromobilnosc:target) .bl-spis [href="#temat-elektromobilnosc"],
main:has(#temat-rynek-salon:target) .bl-spis [href="#temat-rynek-salon"],
main:not(:has(.bl-temat:target)) .bl-spis__lista > li:first-child > .bl-spis__poz {
background: var(--grafit-gleboki); border-color: var(--grafit-gleboki); color: var(--mleko);
--g4-akcent: #E33B44; --bl-drugi: rgba(237, 241, 242, 0.78);
}
@media (max-width: 640px) {
.bl-spis__lista { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
.bl-spis__poz { min-height: 46px; }
}
.bl-tematy { padding-top: clamp(1rem, 2.5vw, 2rem); }
.bl-temat { display: none; scroll-margin-top: 5.5rem; gap: 2rem clamp(2.5rem, 5vw, 4.75rem); align-items: start; }
.bl-temat:target,
.bl-tematy:not(:has(.bl-temat:target)) .bl-temat:first-child { display: grid; }
@supports not selector(:has(a)) {
.bl-temat { display: grid; }
.bl-temat + .bl-temat { margin-top: clamp(3rem, 6vw, 5rem); }
}
.bl-temat__okladka {
margin: 0 0 clamp(1.5rem, 2.5vw, 2rem); overflow: hidden;
aspect-ratio: 16 / 10; border-radius: var(--r-panel);
background: var(--studio); box-shadow: 0 1px 2px rgba(36, 48, 54, 0.06);
}
.bl-temat__okladka img { display: block; width: 100%; height: 100%; }
.bl-temat__bok .naglowek-sekcji { margin-bottom: 0; }
.bl-temat__bok .podtytul { margin-top: 0.75rem; }
@media (min-width: 1024px) {
.bl-temat { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
.bl-temat__bok { position: sticky; top: 6.5rem; }
}
@media (max-width: 1023px) {
.bl-temat__bok { max-width: 36rem; }
}
.bl-temat__wpisy .wiecej { margin: 1.75rem 0 0; }
.bl-lista:not(:has(~ .wiecej__pole:checked)) > .dalszy { display: none; }
.bl-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linia-mocna); }
.bl-lista > li { border-bottom: 1px solid var(--linia); }
.bl-wpis {
position: relative;
display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); column-gap: 1.25rem;
padding: 1.1rem 0.85rem 1.2rem; margin-inline: -0.85rem;
border-radius: 16px;
transition: background-color 0.2s var(--krzywa);
}
.bl-wpis__meta {
grid-column: 1; grid-row: 1 / span 2;
margin: 0.2rem 0 0; font-size: 0.8125rem; line-height: 1.45; color: var(--stal);
}
.bl-wpis__meta time { color: inherit; }
.bl-wpis__temat { display: block; margin-top: 0.3rem; font-weight: 600; font-size: 0.75rem; }
.bl-wpis__tytul {
grid-column: 2; margin: 0;
font-family: 'InterVariable', sans-serif; font-weight: 800;
font-size: clamp(1.0625rem, 1.2vw, 1.1875rem); letter-spacing: -0.02em; line-height: 1.3;
text-wrap: pretty; overflow-wrap: break-word;
}
.bl-wpis__tytul a { color: var(--grafit-gleboki); text-decoration: none; }
.bl-wpis__tytul a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.bl-wpis__tytul a:focus-visible { outline: none; }
.bl-wpis:has(a:focus-visible) { outline: 3px solid var(--czerw); outline-offset: 2px; }
.bl-wpis__zajawka {
grid-column: 2; margin: 0.4rem 0 0;
font-size: 0.9375rem; line-height: 1.55; color: var(--stal);
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
@media (hover: hover) {
.bl-wpis:hover { background: var(--mgla); }
.panel .bl-wpis:hover { background: var(--biel); }
.bl-wpis:hover .bl-wpis__tytul a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
}
@media (max-width: 640px) {
.bl-wpis { grid-template-columns: minmax(0, 1fr); padding: 1rem 0.5rem 1.05rem; margin-inline: -0.5rem; }
.bl-wpis__meta { grid-column: 1; grid-row: auto; margin: 0 0 0.35rem; }
.bl-wpis__temat { display: inline; margin: 0; }
.bl-wpis__temat::before { content: " · "; font-weight: 400; }
.bl-wpis__tytul, .bl-wpis__zajawka { grid-column: 1; }
.bl-wpis__zajawka { -webkit-line-clamp: 3; }
}
.proza > .proza__wstep {
font-size: clamp(1.125rem, 1.35vw, 1.25rem); line-height: 1.6;
color: var(--grafit-gleboki); margin-bottom: 1.5rem;
}
@media (min-width: 1024px) {
.bl-pokrewne__uklad {
display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
gap: 2rem clamp(2.5rem, 5vw, 4.75rem); align-items: start;
}
.bl-pokrewne__uklad > .naglowek-sekcji { margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.belka { animation-duration: auto !important; }
}