@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 700;font-display:swap;src:url(fonts/cormorant-garamond-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 700;font-display:swap;src:url(fonts/cormorant-garamond-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/cormorant-garamond-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/cormorant-garamond-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/hanken-grotesk-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/hanken-grotesk-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Pinyon Script';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/pinyon-script-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Pinyon Script';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/pinyon-script-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{--faktura-papier:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .27 0 0 0 0 .17 .085 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");--faktura-skora:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .86 0 0 0 0 .74 0 0 0 0 .52 .075 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* Koncepcja A "Oprawa" - prototyp strony glownej adwokatklodzko.pl
Jasny papier, braz-espresso tuszu i ciemnych pasm, mosiadz klamry ksiegi jako akcent.
Kroje: Cormorant Garamond (naglowki), Hanken Grotesk (tekst), Pinyon Script (jedno slowo "Zapraszamy").
Uwaga: kolory tekstu sprawdzone skryptem (KONCEPCJA.md, sekcja Paleta). */
:root {
--papier: #f7f1e6;
--papier-2: #efe5d4;
--krem: #f2dbbc;
--tusz: #24170e;
--sepia: #6b5545;
--mosiadz-ciemny: #6e5a36;
--mosiadz: #a98f5c;
--mosiadz-jasny: #c9ad76;
--rdza: #82430f;
--espresso: #2a1a11;
--espresso-2: #1c110a;
--kosc: #f3ead9;
--kosc-2: #d9ccb6;
--linia: #d9c8a6;
--linia-ciemna: rgba(201, 173, 118, .3);
--szeryf: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
--bezszeryf: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
--pismo: 'Pinyon Script', 'Cormorant Garamond', cursive;
--margines: clamp(1rem, 4.2vw, 4rem);
--kontener: min(100% - 2 * var(--margines), 88rem);
--odstep-kol: clamp(1rem, 2.4vw, 2.5rem);
--naglowek-h: 4.5rem;
--ease-out: cubic-bezier(.16, .84, .24, 1);
--ease-io: cubic-bezier(.65, .05, .36, 1);
}
/* od 1440 px cala skala (rem) rosnie z oknem: pomniejszony widok 2400-3840 px wyglada jak 1440, a nie jak waska kolumna */
@media (min-width: 1440px) {
html { font-size: calc(100% + (100vw - 1440px) * .005); }
}
/* naglowek przechodzi na szuflade ponizej 1040 px (A-K3: miedzy 960 a 1019 px pozycje menu lamaly sie na dwa wiersze);
uklad tresci zmienia sie dopiero ponizej 960 px */
@media (max-width: 1039px) {
:root { --naglowek-h: 4rem; }
}
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-top: calc(var(--naglowek-h) + 1rem);
}
body {
margin: 0;
background: var(--papier);
color: var(--tusz);
font-family: var(--bezszeryf);
font-size: clamp(1.0625rem, .98rem + .22vw, 1.1875rem);
line-height: 1.68;
font-kerning: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1.1em; }
h1, h2, h3 { margin: 0; font-weight: 400; }
ul, ol { margin: 0; padding: 0; }
address { font-style: normal; }
button { font: inherit; color: inherit; }
.kontener { width: var(--kontener); margin-inline: auto; }
/* faktury (szum SVG) zawsze w pseudo-elementach pod trescia: tlo elementow z tekstem to czysty kolor */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--faktura-papier); pointer-events: none; }
:focus-visible { outline: 2px solid var(--mosiadz-ciemny); outline-offset: 3px; }
.rozdzial--ciemny :focus-visible, .stopka :focus-visible, .szuflada :focus-visible { outline-color: var(--mosiadz-jasny); }
/* cele fokusu programowego (main po skrocie, naglowek sekcji po wyborze z szuflady) bez obwodki (A-D8) */
[tabindex="-1"]:focus { outline: none; }
::selection { background: var(--krem); color: var(--tusz); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* ------------------------------------------------------------------ skrot "Przejdz do tresci" */
.skrot {
position: absolute; left: 1rem; top: .75rem; z-index: 100;
padding: .8rem 1.2rem; background: var(--espresso); color: var(--kosc);
font-weight: 500; text-decoration: none;
transform: translateY(-160%);
transition: transform .25s var(--ease-out);
}
.skrot:focus { transform: none; }
/* ------------------------------------------------------------------ naglowek */
.naglowek {
position: sticky; top: 0; z-index: 40;
background: var(--papier);
transition: box-shadow .4s ease;
}
.naglowek::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
background: var(--linia); opacity: 0; transition: opacity .4s ease;
}
.naglowek.przewiniety { box-shadow: 0 14px 30px -24px rgba(36, 23, 14, .5); }
.naglowek.przewiniety::after { opacity: 1; }
.naglowek-wnetrze {
display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.25rem);
min-height: var(--naglowek-h);
}
.marka {
display: flex; align-items: center; gap: .85rem; margin: 0 auto 0 0; min-height: 2.75rem;
color: var(--tusz); text-decoration: none; min-width: 0;
}
.marka-znak { width: 2.35rem; height: 2.45rem; flex: none; color: var(--mosiadz-ciemny); }
.marka-tekst { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.marka-1 { font-size: .8125rem; letter-spacing: .06em; color: var(--sepia); }
.marka-2 { font-family: var(--szeryf); font-weight: 500; font-size: 1.6rem; letter-spacing: -.005em; white-space: nowrap; }
.menu ul { display: flex; gap: clamp(1.1rem, 2.1vw, 2.25rem); list-style: none; }
.menu a {
position: relative; display: block; padding: .7rem 0; font-size: .9375rem; font-weight: 500; letter-spacing: .01em;
white-space: nowrap; text-decoration: none; color: var(--tusz); transition: color .3s ease;
}
.menu a::after {
content: ""; position: absolute; left: 0; right: 0; bottom: .35rem; height: 1px; background: currentColor;
transform: scaleX(0); transform-origin: right center; transition: transform .5s var(--ease-out);
}
/* biezaca strona: aria-current="page" (od 09.10.2026 menu prowadzi do podstron; wczesniej klasa .aktywny dla sekcji w kadrze) */
.menu a:hover, .menu a[aria-current="page"] { color: var(--mosiadz-ciemny); }
.menu a:hover::after, .menu a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left center; }
.naglowek-tel {
display: inline-flex; align-items: center; gap: .6rem;
padding: .7rem 1.1rem; border: 1px solid var(--mosiadz-ciemny);
font-size: .9375rem; font-weight: 500; text-decoration: none; color: var(--tusz);
white-space: nowrap; transition: background-color .35s ease, color .35s ease;
}
.naglowek-tel svg { width: 1.1rem; height: 1.1rem; flex: none; }
.naglowek-tel:hover { background: var(--espresso); color: var(--kosc); }
/* "Menu": przycisk szuflady tylko z klasa .menu-js (dokleja ja app.js); bez skryptu ten sam napis jako odnosnik
do menu w stopce (A-D10), wiec martwego przycisku nie ma */
.menu-przycisk {
position: relative; display: none; align-items: center; gap: .55rem; min-height: 2.75rem; padding: .5rem .9rem;
background: none; border: 1px solid var(--mosiadz-ciemny); cursor: pointer;
font-size: .9375rem; font-weight: 500; line-height: 1.3; color: var(--tusz); text-decoration: none;
}
.menu-przycisk svg { width: 1.3rem; height: 1.3rem; flex: none; }
.naglowek-postep {
position: absolute; left: 0; bottom: 0; z-index: 1; width: 100%; height: 2px;
background: var(--mosiadz); transform-origin: left center; transform: scaleX(0);
}
@media (max-width: 1039px) {
.menu { display: none; }
.menu-js button.menu-przycisk, html:not(.menu-js) a.menu-przycisk { display: inline-flex; }
.naglowek-tel { min-height: 2.75rem; padding: .5rem .9rem; }
.marka-znak { width: 1.8rem; height: 1.9rem; }
.marka-2 { font-size: 1.22rem; }
.marka-1 { font-size: .7rem; }
}
/* numer telefonu w naglowku widoczny od 640 px (tablet, male laptopy); nizej sama ikona 44x44 */
@media (max-width: 639px) {
.naglowek-tel { padding: 0; width: 2.75rem; height: 2.75rem; justify-content: center; }
.naglowek-tel-numer { display: none; }
}
@media (max-width: 430px) {
.naglowek-wnetrze { gap: .6rem; }
.marka-znak { display: none; }
.marka-2 { font-size: 1.12rem; }
.marka-1 { font-size: .6875rem; letter-spacing: .04em; }
.menu-przycisk { padding: .5rem .75rem; }
}
/* waski telefon (320-374 px): telefon zostaje w naglowku, "Menu" jako sama ikona 44x44 z napisem dla czytnikow (A-W1) */
@media (max-width: 374px) {
.menu-przycisk { width: 2.75rem; height: 2.75rem; padding: 0; justify-content: center; }
.menu-przycisk span {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
clip-path: inset(50%); white-space: nowrap; border: 0;
}
}
/* ------------------------------------------------------------------ szuflada (telefon) */
.szuflada {
position: fixed; inset: 0; z-index: 60; overflow-y: auto; overscroll-behavior: contain;
background: var(--espresso); color: var(--kosc);
visibility: hidden; clip-path: inset(0 0 100% 0);
transition: clip-path .55s var(--ease-io), visibility 0s linear .55s;
}
.szuflada.otwarta { visibility: visible; clip-path: inset(0); transition: clip-path .55s var(--ease-io), visibility 0s linear 0s; }
.szuflada::before { content: ""; position: absolute; inset: 0; background: var(--faktura-skora); pointer-events: none; }
.szuflada-wnetrze { position: relative; display: flex; flex-direction: column; min-height: 100%; padding: .75rem var(--margines) 2rem; }
.szuflada-zamknij {
align-self: flex-end; display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
background: none; border: 1px solid var(--linia-ciemna); cursor: pointer; color: var(--kosc);
}
.szuflada-zamknij svg { width: 1.4rem; height: 1.4rem; }
.szuflada-menu { margin-top: 1.5rem; }
.szuflada-menu ul { list-style: none; }
.szuflada-menu a {
display: block; padding: .7rem 0; border-bottom: 1px solid var(--linia-ciemna);
font-family: var(--szeryf); font-weight: 300; font-size: clamp(2rem, 1.4rem + 3vw, 2.6rem); line-height: 1.15;
color: var(--kosc); text-decoration: none;
}
.szuflada-menu a[aria-current="page"] { color: var(--mosiadz-jasny); }
.szuflada-tel {
display: inline-flex; align-items: center; gap: .7rem; align-self: flex-start; margin-top: 2rem;
padding: .9rem 1.3rem; border: 1px solid var(--mosiadz); color: var(--kosc); text-decoration: none; font-weight: 500;
}
.szuflada-tel svg { width: 1.2rem; height: 1.2rem; color: var(--mosiadz-jasny); }
.szuflada-waga { width: 6rem; height: 6.3rem; margin: auto auto 0; padding-top: 2rem; color: var(--mosiadz); opacity: .7; }
html.szuflada-otwarta { overflow: hidden; }
@media (min-width: 1040px) { .szuflada { display: none; } }
/* ------------------------------------------------------------------ elementy wspolne */
/* wypelnienie po najechaniu = cien wewnetrzny (bez pseudo-elementu z tlem: axe liczy kontrast na kolorze tla) */
.przycisk {
display: inline-flex; align-items: center; gap: .85rem; min-height: 3.5rem; padding: .95rem 1.6rem;
background: var(--espresso); border: 1px solid var(--espresso); color: var(--kosc);
font-size: 1rem; font-weight: 500; line-height: 1.3; text-decoration: none;
box-shadow: inset 0 0 0 0 var(--mosiadz-ciemny);
transition: box-shadow .6s var(--ease-out), color .35s ease, border-color .35s ease;
}
.przycisk:hover { box-shadow: inset 32rem 0 0 0 var(--mosiadz-ciemny); border-color: var(--mosiadz-ciemny); }
.przycisk svg { width: 1.25rem; height: 1.25rem; flex: none; }
/* przycisk glowny na ciemnej skorze: mosiadz klamry (tusz na mosiadzu 7.75:1), po najechaniu kosc (14.02:1) */
.przycisk--mosiadz { background: var(--mosiadz-jasny); border-color: var(--mosiadz-jasny); color: var(--espresso); box-shadow: inset 0 0 0 0 var(--kosc); }
.przycisk--mosiadz:hover { color: var(--espresso); box-shadow: inset 32rem 0 0 0 var(--kosc); border-color: var(--kosc); }
.przycisk--obrys { background: transparent; border-color: var(--mosiadz); color: var(--kosc); box-shadow: inset 0 0 0 0 var(--mosiadz); }
.przycisk--obrys:hover { color: var(--espresso); box-shadow: inset 32rem 0 0 0 var(--mosiadz); border-color: var(--mosiadz); }
.przycisk--obrys svg { transition: transform .45s var(--ease-out); }
.przycisk--obrys:hover svg { transform: translateX(.3rem); }
.plansza { position: relative; overflow: hidden; background: var(--espresso); box-shadow: 0 34px 60px -38px rgba(36, 23, 14, .7); }
.plansza img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.numer {
display: flex; align-items: center; gap: 1rem; margin: 0 0 1.4rem;
font-family: var(--szeryf); font-style: italic; font-weight: 400; font-size: clamp(1.5rem, 1.15rem + .9vw, 2.1rem); line-height: 1;
color: var(--mosiadz-ciemny);
}
.numer::after { content: ""; width: 4.5rem; height: 1px; background: currentColor; transform-origin: left center; }
[data-ruch="maska"] { overflow: clip; padding-block: .06em .14em; }
[data-ruch="maska"] > span { display: block; }
.rozdzial { position: relative; padding-block: clamp(4.5rem, 9vw, 9.5rem); }
.rozdzial-siatka {
display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--odstep-kol); row-gap: 2.75rem;
}
.rozdzial-glowka { grid-column: 1 / span 4; }
.rozdzial-tresc { grid-column: 6 / span 7; }
.rozdzial-tytul {
margin: 0 0 1.6rem; font-family: var(--szeryf); font-weight: 300;
font-size: clamp(2.6rem, 1.5rem + 3.4vw, 4.75rem); line-height: 1.02; letter-spacing: -.012em;
text-wrap: balance;
}
.lead {
margin: 0 0 2.4rem; max-width: 34em;
font-family: var(--szeryf); font-style: italic; font-size: clamp(1.3rem, 1.05rem + .75vw, 1.7rem); line-height: 1.42;
color: var(--sepia); text-wrap: pretty;
}
/* ------------------------------------------------------------------ okladka (pierwszy ekran) */
.okladka { position: relative; overflow: clip; padding: clamp(2rem, 4.5vw, 4.5rem) 0 clamp(4rem, 8vw, 8rem); }
.okladka-siatka {
display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--odstep-kol);
align-items: center;
}
.okladka-tekst { grid-column: 1 / span 7; position: relative; z-index: 2; container-type: inline-size; }
.okladka-plansza { grid-column: 8 / span 5; position: relative; z-index: 1; }
/* H1 = jeden blok tekstu (dwa wiersze przez
): wielkosc wierszy z jednostek kontenera (cqi), "Adwokat Klodzko" zawsze w jednym wierszu */
.okladka-tytul {
font-family: var(--szeryf); font-weight: 300; letter-spacing: -.018em; color: var(--tusz);
font-size: clamp(1.7rem, .8rem + 3vw, 3.9rem); font-size: 7.3cqi; line-height: 1.42;
}
.okladka-tytul .t1 { font-size: clamp(2.6rem, 1rem + 5.2vw, 6.2rem); font-size: 12.1cqi; line-height: .95; white-space: nowrap; }
.okladka-tytul .t2 { font-style: italic; font-weight: 400; color: var(--mosiadz-ciemny); }
/* dywiz oryginalu na koncu 1. wiersza (A-D6): w polskim skladzie myslnik nie zaczyna wiersza */
.okladka-tytul .dywiz { font-weight: 300; color: var(--mosiadz-ciemny); }
/* podpis odreczny = tylko nazwisko (2. wiersz napisu z naglowka oryginalu, A-W3); "Kancelaria Adwokacka" stoi juz w H1 */
.podpis { width: min(92%, 29rem); margin: clamp(1.3rem, 2.4vw, 2.2rem) 0 clamp(1.5rem, 2.8vw, 2.4rem); color: var(--tusz); }
.podpis-wiersz { width: 100%; height: auto; fill: currentColor; overflow: visible; }
.okladka-lead {
max-width: 24em; margin: 0 0 2rem;
font-family: var(--szeryf); font-style: italic; font-size: clamp(1.3rem, 1rem + .95vw, 1.85rem); line-height: 1.35;
color: var(--sepia);
}
.okladka-akcje { margin: 0; }
.bez-lamania { white-space: nowrap; }
.plansza--okladka { aspect-ratio: 928 / 1152; z-index: 1; }
/* rozeta (A-D2): 170% planszy, zeby pierscien nie wchodzil pod H1; bez lukowego brzegu; maska wygasza gore i dol tak,
ze przy gornej krawedzi okladki (dol naglowka) nic nie jest rysowane (zmierzone w narzedzia/poprawki.py) */
.okladka-plansza .rozeta {
position: absolute; left: 50%; top: 50%; z-index: 0; width: 170%; max-width: none; height: auto;
transform: translate(-50%, -50%); color: var(--mosiadz); opacity: .6; pointer-events: none;
-webkit-mask-image: linear-gradient(180deg, transparent 6%, #000 30%, #000 70%, transparent 94%);
mask-image: linear-gradient(180deg, transparent 6%, #000 30%, #000 70%, transparent 94%);
}
.plansza-ramka { position: absolute; inset: clamp(.6rem, 1.3vw, 1.1rem); pointer-events: none; }
.plansza-ramka i { position: absolute; background: rgba(243, 234, 217, .5); }
.plansza-ramka i:nth-child(1) { left: 0; top: 0; width: 100%; height: 1px; transform-origin: left center; }
.plansza-ramka i:nth-child(2) { right: 0; top: 0; width: 1px; height: 100%; transform-origin: center top; }
.plansza-ramka i:nth-child(3) { left: 0; bottom: 0; width: 100%; height: 1px; transform-origin: right center; }
.plansza-ramka i:nth-child(4) { left: 0; top: 0; width: 1px; height: 100%; transform-origin: center bottom; }
@media (max-width: 959px) {
.okladka-tekst, .okladka-plansza { grid-column: 1 / -1; }
.okladka-plansza { width: min(100%, 30rem); margin: 3rem auto 0; }
.okladka-plansza .rozeta { width: 190%; }
}
/* ------------------------------------------------------------------ I: o kancelarii */
.rozdzial--o .rozdzial-glowka { grid-column: 1 / span 4; align-self: start; }
.rozdzial--o .rozdzial-tresc { grid-column: 5 / span 8; }
.numer--duzy { font-weight: 300; font-size: clamp(5rem, 2.5rem + 8vw, 11rem); line-height: .8; margin: 0; gap: 1.4rem; }
.numer--duzy::after { width: clamp(3rem, 8vw, 8rem); align-self: center; }
/* H2 rozdzialu I zlozony jak pagina ksiazki (A-W3): maly grotesk, wersaliki z rozstrzalem (CSS, tekst w DOM bez zmian),
sepia; nie powtarza H1 tym samym rozmiarem, blizej pogrubionej linii z oryginalu */
.rozdzial-tytul--pagina {
max-width: 44em; margin-bottom: 2.4rem;
font-family: var(--bezszeryf); font-weight: 600; font-size: clamp(1.02rem, .97rem + .18vw, 1.16rem);
line-height: 1.6; letter-spacing: .15em; text-transform: uppercase; color: var(--sepia); text-wrap: wrap;
}
.rozdzial--o .rozdzial-tresc > p { max-width: 40em; }
.inicjal { font-size: 1.06em; text-wrap: pretty; }
.inicjal::first-letter {
float: left; margin: .07em .12em 0 -.03em;
font-family: var(--szeryf); font-weight: 400; font-size: 5.3em; line-height: .76;
color: var(--mosiadz-ciemny);
}
.motto {
margin: 2.6rem 0 2.4rem; padding-top: 2.2rem; border-top: 1px solid var(--linia);
font-family: var(--szeryf); font-style: italic; font-weight: 400; font-size: clamp(1.85rem, 1.2rem + 2.1vw, 3.1rem); line-height: 1.14;
color: var(--tusz);
}
.zaproszenie { color: var(--sepia); }
.zaproszenie a, .kroki a {
color: var(--tusz); text-decoration: underline; text-decoration-color: var(--mosiadz);
text-decoration-thickness: 1px; text-underline-offset: .24em; transition: color .3s ease, text-decoration-color .3s ease;
}
.zaproszenie a:hover, .kroki a:hover { color: var(--mosiadz-ciemny); text-decoration-color: currentColor; }
.przerywnik { width: min(17rem, 60%); margin: clamp(3.5rem, 7vw, 6.5rem) auto 0; color: var(--mosiadz); }
.przerywnik svg { width: 100%; height: auto; overflow: visible; }
/* ------------------------------------------------------------------ wyroznienia */
.pasmo--wyroznienia {
padding-block: clamp(3rem, 6vw, 5.5rem);
position: relative; background: var(--papier-2);
border-block: 1px solid var(--linia);
}
.wyroznienia {
display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.25rem var(--odstep-kol); align-items: center;
}
.wyroznienia-tekst {
grid-column: 1 / span 7; margin: 0;
font-family: var(--szeryf); font-style: italic; font-size: clamp(1.35rem, 1rem + 1.15vw, 2.05rem); line-height: 1.4;
text-wrap: pretty;
}
/* tytuly "Najlepsi 2018 / 2019 / 2020": mosiezne podkreslenie (pseudo-element, samo transform), tekst nigdy sie nie zmienia
(A-K1); domyslnie narysowane, app.js chowa je tylko, gdy zdanie lezy ponizej ekranu przy wczytaniu */
.tytul-roku { position: relative; white-space: nowrap; }
.tytul-roku::after {
content: ""; position: absolute; left: 0; right: 0; bottom: .04em; height: max(1px, .06em);
background: var(--mosiadz); transform-origin: left center; pointer-events: none;
}
.odznaki { grid-column: 9 / span 4; display: flex; justify-content: flex-end; gap: clamp(1rem, 2vw, 2rem); list-style: none; }
/* medaliony wieksze (A-D3), odznaka 86% medalionu; limit 178 px = skala odznaki 2018 (150 px natywnie) <= 1,19;
42vw: dwa medaliony mieszcza sie obok siebie od 320 px */
.odznaka {
position: relative; display: grid; place-items: center; border-radius: 50%;
width: min(clamp(9rem, 7rem + 4vw, 12rem), 240px, 42vw); aspect-ratio: 1;
background: var(--papier); border: 1px solid var(--mosiadz);
transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.odznaka::before { content: ""; position: absolute; inset: .4rem; border-radius: 50%; border: 1px solid var(--linia); }
.odznaka img { position: relative; width: 86%; height: auto; max-width: 178px; }
.odznaka:hover { transform: translateY(-.3rem) rotate(-3deg); box-shadow: 0 18px 30px -20px rgba(36, 23, 14, .5); }
@media (max-width: 959px) {
.wyroznienia-tekst, .odznaki { grid-column: 1 / -1; }
.odznaki { justify-content: flex-start; }
}
/* ------------------------------------------------------------------ II: zakres uslug */
.rozdzial-siatka--plansza-lewa .rozdzial-plansza { grid-column: 1 / span 5; align-self: start; }
.rozdzial-siatka--plansza-lewa .rozdzial-tresc { grid-column: 7 / span 6; }
.plansza--waga { aspect-ratio: 928 / 1152; }
.lista-tytul {
margin: 0; padding-bottom: 1rem; border-bottom: 1px solid var(--linia);
font-family: var(--szeryf); font-weight: 500; font-size: clamp(1.3rem, 1.05rem + .7vw, 1.65rem); line-height: 1.3;
color: var(--mosiadz-ciemny);
}
.lista-ozdobna { list-style: none; }
.lista-ozdobna li {
display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .9rem;
padding: 1.35rem 0; border-bottom: 1px solid var(--linia);
}
.lista-ozdobna li svg { width: .95rem; height: .95rem; margin-top: .42em; color: var(--mosiadz-ciemny); }
/* ------------------------------------------------------------------ pasma ciemne (skora) */
.rozdzial--ciemny { --ramka: clamp(.5rem, 1.3vw, 1.25rem); background: var(--espresso); color: var(--kosc); }
.rozdzial--ciemny::before, .rozdzial--ciemny::after { content: ""; position: absolute; pointer-events: none; }
/* skora (szum) + tloczony podwojny filet jak na okladce: linie w obrysie (outline) z ujemnym odsunieciem, bez wplywu na uklad */
.rozdzial--ciemny::before {
inset: 0; background: var(--faktura-skora);
outline: 1px solid rgba(201, 173, 118, .34); outline-offset: calc(-1 * var(--ramka));
}
.rozdzial--ciemny::after { inset: calc(var(--ramka) + 5px); border: 1px solid rgba(201, 173, 118, .16); }
/* tresc co najmniej 1rem od wewnetrznej linii filetu (A-W2: na telefonie lezala 2 px od niej); dziala tylko na waskich
ekranach, od ok. 760 px wygrywa zwykly margines strony */
.rozdzial--ciemny > .kontener {
position: relative; z-index: 1;
width: min(100% - 2 * max(var(--margines), var(--ramka) + 6px + 1rem), 88rem);
}
.rozdzial--ciemny .numer { color: var(--mosiadz-jasny); }
.rozdzial--ciemny .rozdzial-tytul { color: var(--kosc); }
.rozdzial--ciemny .lead { color: var(--kosc-2); }
.rozdzial--ciemny .plansza { box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .9); }
/* ------------------------------------------------------------------ III: dziedziny prawa */
.rozdzial--dziedziny .rozdzial-glowka { grid-column: 1 / span 5; }
.plansza--tloczenie { aspect-ratio: 1376 / 768; margin-top: .6rem; }
.dziedziny { grid-column: 7 / span 6; align-self: center; list-style: none; counter-reset: dz; border-top: 1px solid var(--linia-ciemna); }
.dziedziny li {
counter-increment: dz; display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); align-items: baseline;
padding: 1.05rem 0; border-bottom: 1px solid var(--linia-ciemna);
}
.dziedziny li::before {
content: counter(dz, decimal-leading-zero);
font-family: var(--szeryf); font-style: italic; font-size: 1.05rem; color: var(--mosiadz-jasny);
font-variant-numeric: lining-nums tabular-nums;
}
.dziedzina { font-family: var(--szeryf); font-weight: 400; font-size: clamp(1.55rem, 1.15rem + 1.1vw, 2.25rem); line-height: 1.12; }
/* dopowiedzenie w nawiasie z koncowa interpunkcja (A-K2): drugi wiersz tej samej pozycji, mniejszy grotesk */
.dziedzina-zakres {
display: block; margin-top: .45rem; max-width: 34em;
font-size: clamp(.9375rem, .9rem + .15vw, 1.0625rem); line-height: 1.55; color: var(--kosc-2); text-wrap: pretty;
}
.dziedziny li > * { grid-column: 2; }
.dziedziny li::before { grid-column: 1; grid-row: 1; }
/* ------------------------------------------------------------------ IV: porady przez internet */
.rozdzial-siatka--plansza-prawa .rozdzial-tresc { grid-column: 1 / span 5; }
.rozdzial-siatka--plansza-prawa .rozdzial-plansza { grid-column: 7 / span 6; align-self: center; }
.porady-tytul { font-size: clamp(2rem, 1.25rem + 2.2vw, 3.2rem); line-height: 1.08; letter-spacing: .015em; }
.porady-tytul .nowosc {
font-family: var(--bezszeryf); font-weight: 600; font-size: .4em; letter-spacing: .2em; color: var(--rdza);
vertical-align: .55em; line-height: 0;
}
.kroki { list-style: none; counter-reset: krok; margin-top: 1rem; }
.kroki li {
counter-increment: krok; display: grid; grid-template-columns: 4.4rem minmax(0, 1fr); gap: 1.1rem; align-items: start;
padding: 1.5rem 0; border-top: 1px solid var(--linia);
}
.kroki li:last-child { border-bottom: 1px solid var(--linia); }
.kroki li::before {
content: counter(krok);
font-family: var(--szeryf); font-weight: 300; font-size: 3.7rem; line-height: .78; color: var(--mosiadz-ciemny);
font-variant-numeric: lining-nums;
}
.plansza--list { aspect-ratio: 1264 / 848; }
/* ------------------------------------------------------------------ V: kontakt */
.kontakt {
display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--odstep-kol); row-gap: 2.5rem;
}
.kontakt-zaproszenie { grid-column: 1 / span 6; grid-row: 1 / span 2; }
.kontakt-waga { grid-column: 8 / span 5; grid-row: 1; justify-self: center; align-self: end; width: clamp(9rem, 6rem + 9vw, 15rem); color: var(--mosiadz); }
.kontakt-waga svg { width: 100%; height: auto; overflow: visible; }
.kontakt-dane { grid-column: 8 / span 5; grid-row: 2; align-self: end; }
.zapraszamy {
margin: .2rem 0 1.4rem; font-family: var(--pismo); font-weight: 400;
font-size: clamp(3.6rem, 1.8rem + 6.4vw, 8rem); line-height: 1.12; color: var(--mosiadz-jasny);
}
.siedziba { max-width: 27em; font-size: 1.1em; color: var(--kosc-2); text-wrap: pretty; }
.adres {
margin: 0 0 1.2rem; padding-top: 1.6rem; border-top: 1px solid var(--linia-ciemna);
font-family: var(--szeryf); font-size: clamp(1.55rem, 1.2rem + 1vw, 2.15rem); line-height: 1.32; color: var(--kosc);
font-variant-numeric: lining-nums;
}
.adres strong { font-weight: 600; }
.adres span { white-space: nowrap; }
.adres .adres-osoba { white-space: normal; }
.adres a, .email a {
color: var(--mosiadz-jasny); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em;
text-decoration-color: rgba(201, 173, 118, .55); transition: text-decoration-color .3s ease, color .3s ease;
}
.adres a:hover, .email a:hover { color: var(--kosc); text-decoration-color: currentColor; }
/* cel dotyku >= 44 px bez zmiany wysokosci wiersza (A-W4): pionowe dopelnienie elementu inline powieksza pole klikniecia,
a nie rusza ukladu wierszy (adres i e-mail zostaja jednym blokiem tekstu) */
.adres-tel a { padding-block: .34em; }
.email a { padding-block: .62em; }
.email { margin: 0 0 2.2rem; color: var(--kosc-2); font-size: 1.05em; }
/* pas CTA: telefon jako glowny przycisk (jak w okladce), opinie Google jako przycisk z obrysem */
.kontakt-akcje { display: flex; flex-direction: column; gap: .9rem; max-width: 32rem; }
.kontakt-akcje p { margin: 0; }
.kontakt-akcje .przycisk { display: flex; width: 100%; }
.kontakt-akcje .przycisk--obrys { justify-content: space-between; }
@media (max-width: 959px) {
.kontakt-zaproszenie, .kontakt-dane, .kontakt-waga { grid-column: 1 / -1; grid-row: auto; }
.kontakt-waga { order: 3; justify-self: start; width: 8.5rem; }
}
/* ------------------------------------------------------------------ stopka */
.stopka { position: relative; padding: 3.6rem 0 2.4rem; background: var(--espresso-2); color: var(--kosc-2); font-size: .9375rem; }
.stopka::before { content: ""; position: absolute; inset: 0; background: var(--faktura-skora); pointer-events: none; }
.stopka > .kontener { position: relative; }
.stopka-siatka { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem var(--odstep-kol); align-items: center; }
.marka--stopka { grid-column: 1 / span 4; color: var(--kosc); }
.marka--stopka .marka-1 { color: var(--kosc-2); }
.marka--stopka .marka-znak { color: var(--mosiadz); }
.stopka-menu { grid-column: 5 / span 6; }
.stopka-menu ul { display: flex; flex-wrap: wrap; gap: .4rem 1.8rem; list-style: none; }
.stopka-menu a, .stopka-fb a, .stopka-autor a { color: var(--kosc); text-decoration: none; transition: color .3s ease; }
.stopka-menu a { display: inline-block; padding: .65rem 0; }
.stopka-menu strong { font-weight: 600; }
.stopka-menu a[aria-current="page"] { color: var(--mosiadz-jasny); }
.stopka-menu a:hover, .stopka-fb a:hover, .stopka-autor a:hover { color: var(--mosiadz-jasny); }
.stopka-fb { grid-column: 11 / span 2; justify-self: end; margin: 0; }
.stopka-fb a { display: inline-flex; align-items: center; gap: .55rem; padding: .65rem 0; }
.stopka-fb svg { width: 1.15rem; height: 1.15rem; color: var(--mosiadz-jasny); }
.stopka-autor {
grid-column: 1 / -1; margin: 0; padding-top: .8rem; border-top: 1px solid var(--linia-ciemna);
font-size: .8125rem; text-align: right; color: var(--kosc-2);
}
.stopka-autor a { display: inline-block; padding-block: .8rem; color: var(--kosc-2); }
@media (max-width: 959px) {
.marka--stopka, .stopka-menu, .stopka-fb { grid-column: 1 / -1; justify-self: start; }
.stopka-autor { text-align: left; }
}
/* ------------------------------------------------------------------ uklad wasko (telefon / tablet pionowo) */
@media (max-width: 959px) {
.rozdzial-glowka, .rozdzial-tresc, .rozdzial-plansza,
.rozdzial-siatka--plansza-lewa .rozdzial-plansza, .rozdzial-siatka--plansza-lewa .rozdzial-tresc,
.rozdzial-siatka--plansza-prawa .rozdzial-plansza, .rozdzial-siatka--plansza-prawa .rozdzial-tresc,
.rozdzial--dziedziny .rozdzial-glowka, .dziedziny, .rozdzial--o .rozdzial-glowka, .rozdzial--o .rozdzial-tresc { grid-column: 1 / -1; }
.numer--duzy { font-size: clamp(4rem, 3rem + 6vw, 6rem); }
.rozdzial-siatka { row-gap: 2.25rem; }
.rozdzial-siatka--plansza-lewa .rozdzial-plansza { width: min(100%, 30rem); }
.rozdzial-siatka--plansza-prawa .rozdzial-plansza, .rozdzial-siatka--plansza-lewa .rozdzial-plansza { order: 2; }
.kroki li { grid-template-columns: 3.4rem minmax(0, 1fr); }
.kroki li::before { font-size: 3rem; }
.dziedziny li { grid-template-columns: 2.8rem minmax(0, 1fr); }
}
@media (min-width: 960px) and (max-width: 1199px) {
.rozdzial-glowka { grid-column: 1 / span 5; }
.rozdzial-tresc { grid-column: 6 / span 7; }
}
/* ================================================================== PODSTRONY (09.10.2026)
Zakres uslug, Dziedziny prawa, Kontakt: ten sam naglowek, szuflada i stopka co strona glowna; ten sam jezyk wersji
(numer rozdzialu z linia jak na stronie glownej: II, III, V; linie wloskowe; pasma skory z podwojnym filetem).
Nic ponad to, co jest na stronie glownej: na podstronach nie ma rozety, przerywnika z rombem ani ramy wewnetrznej zdjec. */
/* naglowek strony: pasmo z H1, nizsze niz okladka strony glownej (bez zdjecia), linia wloskowa pod spodem */
.glowka-strony { position: relative; padding-top: clamp(2.6rem, 6vw, 6rem); }
.glowka-strony-siatka {
display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--odstep-kol); row-gap: 1.8rem;
align-items: end; padding-bottom: clamp(2.4rem, 4.8vw, 4.6rem); border-bottom: 1px solid var(--linia);
}
.glowka-strony-tytul { grid-column: 1 / span 7; }
.glowka-strony-dodatek { grid-column: 8 / span 5; }
.glowka-strony .numer { margin-bottom: clamp(1rem, 1.8vw, 1.6rem); }
.tytul-strony {
font-family: var(--szeryf); font-weight: 300; font-size: clamp(3.1rem, 1.5rem + 5.4vw, 7.25rem); line-height: .98;
letter-spacing: -.018em; color: var(--tusz); text-wrap: balance;
}
.glowka-strony .lead { margin: 0; max-width: 30em; }
/* Kontakt: tuz pod pasmem z H1 zaczyna sie pasmo skory, linia wloskowa bylaby zbedna */
.glowka-strony--kontakt .glowka-strony-siatka { border-bottom: 0; }
/* podkreslenie oryginalu ("osób fizycznych i podmiotów gospodarczych", Zakres uslug): mosiezna linia jak pod tytulami
wyroznien na stronie glownej; zwykle text-decoration, bo fraza lamie sie miedzy wierszami; bez ruchu */
.akcent {
text-decoration: underline; text-decoration-color: var(--mosiadz); text-decoration-thickness: max(1px, .06em);
text-underline-offset: .2em; text-decoration-skip-ink: auto;
}
/* Kontakt: w pasmie z H1 telefon (przycisk jak w okladce) i e-mail */
.glowka-strony-tel { margin: 0 0 1.3rem; }
.email-jasny { margin: 0; font-size: 1.05em; color: var(--sepia); }
.email-jasny a {
padding-block: .62em; color: var(--tusz); text-decoration: underline; text-decoration-color: var(--mosiadz);
text-decoration-thickness: 1px; text-underline-offset: .24em; transition: color .3s ease, text-decoration-color .3s ease;
}
.email-jasny a:hover { color: var(--mosiadz-ciemny); text-decoration-color: currentColor; }
/* tresc podstron: zdjecie + lista (jak rozdzial II strony glownej) */
.rozdzial--podstrona { padding-block: clamp(3.5rem, 7.5vw, 8rem); }
.rozdzial--podstrona .rozdzial-siatka--plansza-lewa .rozdzial-tresc { align-self: center; }
.plansza--pisma { aspect-ratio: 928 / 1152; }
.plansza--tomy { aspect-ratio: 1; }
/* H2 podstron = akapit wprowadzajacy liste w oryginale (zdanie z dwukropkiem): sredni szeryf, linia wloskowa pod spodem */
.tytul-sekcji {
margin: 0; padding-bottom: 1.1rem; border-bottom: 1px solid var(--linia);
font-family: var(--szeryf); font-weight: 400; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); line-height: 1.16;
letter-spacing: -.005em; color: var(--tusz); text-wrap: balance;
}
/* Zakres uslug: uslugi dla podmiotow gospodarczych (pasmo jak wyroznienia na stronie glownej) */
.pasmo--podmioty {
position: relative; padding-block: clamp(3.5rem, 7.5vw, 8rem);
background: var(--papier-2); border-block: 1px solid var(--linia);
}
.podmioty { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--odstep-kol); row-gap: 2.25rem; align-items: start; }
.podmioty .tytul-sekcji { grid-column: 1 / span 5; padding-bottom: 0; border-bottom: 0; }
/* od 960 px naglowek pasma towarzyszy dlugiej liscie (przyklejony pod naglowkiem strony), bez pustego pola obok */
@media (min-width: 960px) {
.podmioty .tytul-sekcji { position: sticky; top: calc(var(--naglowek-h) + 2.5rem); }
}
.uslugi { grid-column: 7 / span 6; list-style: none; border-top: 1px solid var(--linia); }
.uslugi li { padding: 1.6rem 0 1.75rem; border-bottom: 1px solid var(--linia); }
/* PODZIAL pozycji (jak dziedziny prawa): nazwa uslugi szeryfem z dywizem oryginalu na koncu wiersza, dalej grotesk */
.usluga-nazwa {
display: block; margin-bottom: .75rem;
font-family: var(--szeryf); font-weight: 400; font-size: clamp(1.55rem, 1.15rem + 1.1vw, 2.25rem); line-height: 1.12;
}
.usluga-nazwa .dywiz { color: var(--mosiadz-ciemny); }
.usluga-opis { display: block; max-width: 36em; text-wrap: pretty; }
/* Dziedziny prawa: ta sama lista co w rozdziale III strony glownej, na papierze */
.dziedziny--jasne { border-top-color: var(--linia); }
.dziedziny--jasne li { border-bottom-color: var(--linia); }
.dziedziny--jasne li::before { color: var(--mosiadz-ciemny); }
.dziedziny--jasne .dziedzina-zakres { color: var(--sepia); }
/* pas kontaktu na koncu podstron Zakres uslug i Dziedziny prawa: napisy klientki (adres, e-mail, telefon) na skorze */
.pas-kontaktu { padding-block: clamp(3.75rem, 7.5vw, 7.5rem); }
.pas-kontaktu-siatka {
display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--odstep-kol); row-gap: 2.25rem;
align-items: end;
}
.pas-kontaktu-tekst { grid-column: 1 / span 6; }
.pas-kontaktu-dane { grid-column: 8 / span 5; }
.pas-kontaktu .rozdzial-tytul { margin-bottom: 1.3rem; }
.pas-kontaktu .siedziba { margin: 0; }
.pas-kontaktu .kontakt-tel { margin: 0; }
.pas-kontaktu .kontakt-tel .przycisk { display: flex; width: 100%; max-width: 32rem; }
/* Kontakt: dane kancelarii i mapa na skorze */
.rozdzial--siedziba { padding-block: clamp(3.75rem, 7.5vw, 7.5rem); }
.siedziba-siatka {
display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--odstep-kol); row-gap: 2.5rem;
align-items: center;
}
.siedziba-dane { grid-column: 1 / span 5; }
.siedziba-mapa { grid-column: 7 / span 6; }
/* nazwa kancelarii zawsze w dwoch wierszach ("Kancelaria Adwokacka" / "Adwokat Lucyna Boczar"): stopien z szerokosci
kolumny (cqi, jak H1 okladki), wiec miesci sie od 320 do 3840 px, takze w waskiej kolumnie przy 960-1199 px */
.siedziba-dane { container-type: inline-size; }
.tytul-kancelarii { font-size: clamp(1.6rem, 9.6cqi, 3.5rem); line-height: 1.08; }
.tytul-kancelarii .wiersz { display: block; }
.rozdzial--siedziba .siedziba { margin-bottom: 1.2rem; }
.link-mapy { margin: 0; }
.link-mapy a {
padding-block: .62em; color: var(--mosiadz-jasny); overflow-wrap: anywhere;
text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em;
text-decoration-color: rgba(201, 173, 118, .55); transition: text-decoration-color .3s ease, color .3s ease;
}
.link-mapy a:hover { color: var(--kosc); text-decoration-color: currentColor; }
/* mapa: obraz z kafli OSM (narzedzia/mapa.py), caly obraz to odnosnik do trasy Google; pinezka w SVG nad obrazem */
.plansza--mapa { display: block; aspect-ratio: 1400 / 1000; }
.mapa-pinezka {
position: absolute; z-index: 1; width: clamp(1.75rem, 1.3rem + 1vw, 2.6rem); height: auto;
transform: translate(-50%, -100%); filter: drop-shadow(0 .3rem .35rem rgba(36, 23, 14, .45)); pointer-events: none;
}
.mapa-osm { margin: .5rem 0 0; font-size: .8125rem; line-height: 1.4; text-align: right; color: var(--kosc-2); }
.mapa-osm a {
display: inline-block; padding-block: .4rem; color: var(--kosc); text-decoration: underline; text-decoration-thickness: 1px;
text-underline-offset: .2em; text-decoration-color: rgba(243, 234, 217, .45); transition: color .3s ease;
}
.mapa-osm a:hover { color: var(--mosiadz-jasny); }
@media (max-width: 959px) {
.glowka-strony-tytul, .glowka-strony-dodatek, .podmioty .tytul-sekcji, .uslugi,
.pas-kontaktu-tekst, .pas-kontaktu-dane, .siedziba-dane, .siedziba-mapa { grid-column: 1 / -1; }
.glowka-strony-siatka { row-gap: 1.4rem; }
.podmioty { row-gap: 1.6rem; }
}
/* ================================================================== RUCH
Zasady: tresc domyslnie widoczna; klase .czeka dokleja JS tylko elementom ponizej ekranu przy wczytaniu;
tekst przesuwany samym transform (bez opacity); zdjecia bez animacji wejscia (tylko paralaksa i hover);
prefers-reduced-motion = brak ruchu; bez JS = brak animacji tresci. */
@property --p { syntax: ''; inherits: false; initial-value: 112%; }
/* pioro: przed piorem podpis stoi sladem olowka (13% krycia), wiec miejsce pod H1 nigdy nie jest puste (A-D1) */
.podpis-wiersz {
-webkit-mask-image: linear-gradient(90deg, #000 calc(var(--p) - 9%), rgb(0 0 0 / .13) var(--p));
mask-image: linear-gradient(90deg, #000 calc(var(--p) - 9%), rgb(0 0 0 / .13) var(--p));
}
.rys { stroke-dasharray: 1; stroke-dashoffset: 0; }
@keyframes pisz { from { --p: -12%; } to { --p: 112%; } }
@keyframes rysuj { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes rama-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rama-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes wjazd { from { transform: translateY(2.4rem); } to { transform: none; } }
@keyframes maska { from { transform: translateY(104%); } to { transform: none; } }
@keyframes linia { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes paralaksa { from { transform: translateY(-4.5%); } to { transform: translateY(4.5%); } }
@keyframes postep { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* waga: tlumione kolysanie (4 wahniecia o malejacej amplitudzie, ok. 4 s, raz), potem belka stoi w poziomie (A-D7) */
@keyframes kolys {
0% { transform: rotate(0); } 11% { transform: rotate(-3.2deg); } 30% { transform: rotate(2.4deg); }
49% { transform: rotate(-1.6deg); } 67% { transform: rotate(.9deg); } 83% { transform: rotate(-.35deg); } 100% { transform: rotate(0); }
}
@keyframes kolys-odwr {
0% { transform: rotate(0); } 11% { transform: rotate(3.2deg); } 30% { transform: rotate(-2.4deg); }
49% { transform: rotate(1.6deg); } 67% { transform: rotate(-.9deg); } 83% { transform: rotate(.35deg); } 100% { transform: rotate(0); }
}
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
/* pierwszy ekran: podpis pisze sie piorem (od razu, 0,1-1,4 s), rozeta i rama planszy rysuja sie (dekoracja, nie tresc) */
.podpis-wiersz--2 { animation: pisz 1.3s .1s cubic-bezier(.45, .1, .4, 1) both; }
.rozeta .rys { animation: rysuj 2s var(--ease-out) both; }
.rozeta .rys--1 { animation-duration: 1.1s; animation-delay: .1s; }
.rozeta .rys--2 { animation-duration: 2.8s; animation-delay: .35s; animation-timing-function: var(--ease-io); }
.rozeta .rys--3 { animation-duration: 1.6s; animation-delay: .8s; }
.plansza-ramka i:nth-child(odd) { animation: rama-x .9s var(--ease-out) both; }
.plansza-ramka i:nth-child(even) { animation: rama-y .9s var(--ease-out) both; }
.plansza-ramka i:nth-child(1) { animation-delay: .5s; }
.plansza-ramka i:nth-child(2) { animation-delay: .8s; }
.plansza-ramka i:nth-child(3) { animation-delay: 1.1s; }
.plansza-ramka i:nth-child(4) { animation-delay: 1.4s; }
/* waga kolysze sie RAZ (klase .kolysz dokleja app.js, gdy waga wchodzi w kadr; szale kontr-obrot, wisza pionowo) */
.waga-belka { transform-origin: 100px 44px; }
.waga-szala--l { transform-origin: 26px 44px; }
.waga-szala--p { transform-origin: 174px 44px; }
.kolysz .waga-belka { animation: kolys 4.2s ease-in-out both; }
.kolysz .waga-szala { animation: kolys-odwr 4.2s ease-in-out both; }
/* tytuly wyroznien: podkreslenie rysowane po kolei (0,3 s odstepu), raz, gdy zdanie wchodzi w kadr */
.js .podkresl-czeka .tytul-roku::after { transform: scaleX(0); }
.js .podkresl .tytul-roku::after { transition: transform .55s var(--ease-out); }
.js .podkresl .tytul-roku:nth-of-type(2)::after { transition-delay: .3s; }
.js .podkresl .tytul-roku:nth-of-type(3)::after { transition-delay: .6s; }
.plansza:hover img { transform: scale(1.035); }
/* przewijanie: animacje sterowane polozeniem (Chrome, Edge, Safari 26) - stan zalezy od miejsca, nie od czasu,
wiec po szybkim przewinieciu wszystko, co w calosci w oknie, jest juz odsloniete (zakres konczy sie na entry 100%) */
@supports (animation-timeline: view()) {
.js .czeka[data-ruch]:not([data-ruch="maska"]) {
animation: wjazd linear both; animation-timeline: view(); animation-range: entry 0% entry 100%;
}
.js .czeka[data-ruch="maska"] { view-timeline: --maska block; }
.js .czeka[data-ruch="maska"] > span {
animation: maska linear both; animation-timeline: --maska; animation-range: entry 0% entry 100%;
}
.numer::after { animation: linia linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
.przerywnik .rys { animation: rysuj linear both; animation-timeline: view(); animation-range: entry 0% cover 55%; }
/* mapa (Kontakt) bez paralaksy: to plan, nie zdjecie (pinezka musi stac w punkcie) */
.plansza:not(.plansza--okladka):not(.plansza--mapa) img { scale: 1.1; animation: paralaksa linear both; animation-timeline: view(); animation-range: cover; }
.naglowek-postep { animation: postep linear both; animation-timeline: scroll(root block); }
}
/* inne przegladarki: odslanianie po wejsciu w kadr (IntersectionObserver w app.js), samo przesuniecie */
@supports not (animation-timeline: view()) {
.js .czeka[data-ruch] { transform: translateY(1.6rem); transition: transform 1s var(--ease-out); }
.js .czeka.widac[data-ruch] { transform: none; }
.naglowek-postep { display: none; }
}
}
@media (prefers-reduced-motion: reduce) {
.naglowek-postep { display: none; }
.szuflada, .szuflada.otwarta { transition: none; }
/* stan naglowka po przewinieciu (cien, linia) bez przejscia: przy reduced-motion nic sie nie animuje (09.10.2026) */
.naglowek, .naglowek::after { transition: none; }
}
@media print {
.naglowek, .szuflada, .naglowek-postep, .rozeta { display: none !important; }
.czeka, .czeka > span, .podkresl-czeka .tytul-roku::after { animation: none !important; transform: none !important; }
}
/* podglady zdjec leniwych (generowane w zbuduj.py) */
.plansza--waga,.plansza--tloczenie,.plansza--list,.plansza--pisma,.plansza--tomy,.plansza--mapa{background-size:cover;background-position:center;background-repeat:no-repeat}
.plansza--waga{background-image:url(data:image/webp;base64,UklGRpQAAABXRUJQVlA4IIgAAACwBACdASoUABkAPtVWok0oJKMit/qoAQAaiWMAnTLMAqfHItt+uTKDdqssUZeAAP7tsRkX0++Qo03oggvqJ3DBxYb3r+dIzYuyv2uDyBGwUQ51aJTmP1Ja97EjzcyEoFdkJah8zjwTlvs2jcgx5Wo07PDZCD5Ap6/4zPK7TquMeM34U4jkAAAA)}.plansza--tloczenie{background-image:url(data:image/webp;base64,UklGRlgAAABXRUJQVlA4IEwAAADQAwCdASoUAAsAPulgqE0pJaQiMAgBIB0JYwCdACBz6hrj74ux8MAA/vLc305bNxTQ2eAlT8TPhVnmHixvG3nyiSkkTovz+IN0PAAA)}.plansza--list{background-image:url(data:image/webp;base64,UklGRn4AAABXRUJQVlA4IHIAAAAwBACdASoUAA0APulgqE0pJaQiMAgBIB0JYwCdACFw2I1xXO2CnatmfFAA/uyaDMiAU2hukv1KKZNWV+5uTKOuTI6pVK9vl0Y6ACtWH7fmfyBvllDoqCZx2WwczTOjohlOw/ov+PdXtVLCOu6ZluYrQAA=)}.plansza--pisma{background-image:url(data:image/webp;base64,UklGRqYAAABXRUJQVlA4IJoAAAAQBQCdASoUABkAPulmq1CpJSOiqAqpIB0JQBYj2+A1F8QjQF4DHWFl0EIFz7uXwywAAP7bbux2qocJefWGeK5OHW5QYXLQlk70oSIZmE6ut/Kih9Ua5sBrvUhC//0eQw27y4UyC8VvmrmcytHQsAs/NIj3GHOzPMO5hdrwC+ZkKkcynLJn/j+x/bRBLv/KJuoi6kSSTJCXrwAA)}.plansza--tomy{background-image:url(data:image/webp;base64,UklGRmwAAABXRUJQVlA4IGAAAABwBQCdASoUABQAPuleqk+pJKOiMBgIASAdCWMAsR+OwbLGG1lwqRVHdJqOt6mdLFHMzGQAAP7drqkH6qoh/P+X92rK0ON1zV5MnMhFuP6EgiKRYeUwSyQAMDoaaZ1CAAA=)}.plansza--mapa{background-image:url(data:image/webp;base64,UklGRkAAAABXRUJQVlA4IDQAAAAwAwCdASoUAA4APulgqE0pJaOiMAgBIB0JZQCdAC0Hg0IAAP7uKPonJ+jn76/qxuZEb0AA)}