/* dostawywody.pl — jeden arkusz na wszystkie strony (23 strony, 840–3 158 słów). Paleta i typografia z elementor-kit-6 oryginału. Bez JS, bez zależności poza Poppins (ładuje go ). Mobile first, od 320 px. Faza 2: długie teksty, 8–11 nagłówków H2, 32 tabele (do 8 kolumn), cytaty blokowe z aktów prawnych, kotwice `

` jako cel przekierowań. */ :root{ --granat:#1C244B; /* kit: primary — nagłówki, menu, pogrubienia */ --tekst:#54609B; /* kit: text — treść; 5,71:1 na tle strony */ --akcent:#467FF7; /* kit: accent — TYLKO dekoracja (kreski, focus). Na bieli daje 3,72:1, a AA dla tekstu żąda 4,5. */ --akcent-tekst:#2B5ECF; /* ten sam błękit przyciemniony — linki i przycisk */ --tlo:#F9FAFD; /* kit: tło strony */ --mgla:#F3F5F8; /* kit: secondary — nagłówki tabel, stopka */ --cytat:#E7EEFC; /* akcent 10 % na tle strony — cytat MUSI być widoczny, a mgła różni się od tła o ułamek procenta jasności */ --ramka:#C8D5DC; /* kit: ramki */ --karta:#FFFFFF; /* nagłówek serwisu, komórki tabeli */ --przycisk:var(--akcent-tekst); --przycisk-tekst:#FFFFFF; --przycisk-hover:var(--granat); --logo-filtr:none; --szerokosc:1140px; /* nagłówek i stopka — szerokość kontenera Elementora */ --kolumna:46rem; /* treść: ok. 72 znaki w wierszu przy 17 px Poppins */ --bok:clamp(1rem,4vw,2rem); /* o ile tabela może wyjść poza kolumnę tekstu na dużym ekranie. 49rem = kolumna 46rem + 3rem zapasu na pasek przewijania wliczony w 100vw */ --wyciek:clamp(0rem,(100vw - 49rem)/2,8.5rem); } /* Ciemny motyw: te same role, odwrócone wartości. Kontrasty ≥ 7:1 dla tekstu. Logo jest granatem na przezroczystym tle — filtr robi z niego biały kształt. */ @media (prefers-color-scheme:dark){ :root{ --granat:#EEF1FA;--tekst:#B9C2E3;--akcent:#7FA6FF;--akcent-tekst:#8FB0FF; --tlo:#0F1526;--mgla:#182040;--cytat:#1C2640;--ramka:#2C365C;--karta:#141B33; --przycisk:#8FB0FF;--przycisk-tekst:#0F1526;--przycisk-hover:#C9D9FF; --logo-filtr:brightness(0) invert(1); } html{color-scheme:dark} } /* ---- pasek sprzedazy domeny ---------------------------------------------- DOKOWANY NA DOLE, wzorzec z niskieig.pl (build 26.09.2026): ciemne tlo, bialy tekst, wysrodkowany, ponad cala trescia. Ma mowic o DOMENIE, nie o wodzie — serwis niczego nie sprzedaje, wiec pasek musi sie odcinac od serwisu i nie udawac jego oferty handlowej. Stad wlasna, ciemna paleta zamiast kolorow z kita. USTERKA NAPRAWIONA 27.09: link „Zobacz oferte" ZNIKAL pod kursorem, bo globalna regula `a:hover{color:var(--granat)}` nadpisywala kolor, a tlo paska bylo wtedy tym samym granatem — tekst zlewal sie z tlem. Dlatego kolory linku w pasku sa ustawione dla WSZYSTKICH stanow, nie tylko dla stanu spoczynku. */ .pasek-sprzedaz{ position:fixed;left:0;right:0;bottom:0;z-index:99; background:#111;color:#fff;text-align:center; padding:.625rem 1rem; font-size:.875rem;line-height:1.4; box-shadow:0 -2px 12px rgba(0,0,0,.25); } .pasek-sprzedaz strong{color:#fff;font-weight:600} .pasek-sprzedaz a, .pasek-sprzedaz a:link, .pasek-sprzedaz a:visited, .pasek-sprzedaz a:hover, .pasek-sprzedaz a:focus, .pasek-sprzedaz a:active{ color:#fff;text-decoration:underline;text-decoration-color:#fff; text-underline-offset:.2em; } .pasek-sprzedaz a:hover,.pasek-sprzedaz a:focus-visible{text-decoration-thickness:2px} .pasek-sprzedaz a:focus-visible{outline:3px solid #fff;outline-offset:3px} /* Pasek przykrywa dol strony — stopka musi miec pod soba tyle miejsca, zeby jej ostatni wiersz nie chowal sie pod paskiem. Dwa wiersze zapasu, bo przy waskim ekranie tekst paska sie lamie. */ .stopka{padding-bottom:5rem} @media (min-width:40em){.stopka{padding-bottom:4rem}} /* ---- stopka (uklad jak w niskieig: logo, nota, copyright z drySEO) ---- */ .stopka-logo{display:inline-block;line-height:0} .stopka-logo img{width:110px;height:auto} .stopka-nota{max-width:46rem} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-padding-top:1.75rem} /* stopka na dole także na krótkich stronach (404, strony działowe) */ body{ margin:0;min-height:100svh;display:flex;flex-direction:column; background:var(--tlo);color:var(--tekst); font:300 1rem/1.7 Poppins,system-ui,-apple-system,"Segoe UI",sans-serif; } /* 17 px od tabletu w górę: Poppins 300 jest cienki, a wiersze w kolumnie dłuższe */ @media (min-width:40em){body{font-size:1.0625rem}} ::selection{background:var(--akcent-tekst);color:var(--przycisk-tekst)} .srodek{max-width:var(--szerokosc);margin-inline:auto;padding-inline:var(--bok)} /* odnośnik pomijania — widoczny wyłącznie z klawiatury */ .pomin{position:absolute;left:-999px;top:0;z-index:10;padding:.6em 1em; background:var(--granat);color:var(--tlo);text-decoration:none;border-radius:0 0 8px 0} .pomin:focus{left:0} /* jeden pierścień focus dla wszystkiego, co klikalne — także dla przewijanej tabeli, którą przeglądarki same czynią osiągalną z klawiatury */ :focus-visible{outline:3px solid var(--akcent);outline-offset:3px} a:focus-visible{border-radius:4px} /* ---- nagłówek serwisu ---- */ .naglowek{background:var(--karta);border-bottom:1px solid var(--ramka)} /* pasek marki: granat przechodzący w błękit — jedyny „efekt" na stronie */ .naglowek::before{content:"";display:block;height:3px; background:linear-gradient(90deg,#1C244B,#467FF7 60%,#9DBDFF)} .naglowek-tresc{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:.25rem 2rem;padding-block:.85rem} .logo{flex:0 0 auto;display:block} /* width+height:auto — wysokość liczy się z atrybutów 300×52 zanim plik dojdzie */ .logo img{display:block;width:clamp(150px,40vw,220px);height:auto;filter:var(--logo-filtr)} .menu{display:flex;flex-wrap:wrap;gap:0 1.4rem;font-weight:400;font-size:.9375rem} .menu a{position:relative;display:inline-block;padding:.55rem 0;color:var(--granat); text-decoration:none} /* podkreślenie wjeżdżające od lewej; aria-current="page" jest na 4 stronach działowych */ .menu a::after{content:"";position:absolute;left:0;right:0;bottom:.3rem;height:2px; background:var(--akcent);transform:scaleX(0);transform-origin:left;transition:transform .2s} .menu a:hover::after,.menu a[aria-current]::after{transform:scaleX(1)} .menu a[aria-current]{font-weight:600} /* 4 pozycje nie mieszczą się obok logo poniżej ~600 px — menu bierze własny wiersz, bez hamburgera i bez JS */ @media (max-width:37.5em){ .naglowek-tresc{padding-block:.7rem .1rem} .menu{width:100%;gap:0 1.1rem;font-size:.875rem; border-top:1px solid var(--ramka);margin-top:.35rem} .menu a{padding:.6rem 0} } /* ---- treść ---- */ main.srodek{flex:1 0 auto;max-width:var(--kolumna);padding-block:1.5rem 3rem} @media (min-width:40em){main.srodek{padding-block:2.5rem 4rem}} h1,h2,h3,h4{color:var(--granat);font-weight:600;line-height:1.2;margin:0 0 .6em; text-wrap:balance;overflow-wrap:break-word} /* 65 px z kita nie mieści się w kolumnie do czytania — sufit 52 px, dół 32 px */ h1{font-size:clamp(2rem,1.4rem + 2.6vw,3.25rem);line-height:1.12;letter-spacing:-.015em; margin:.25rem 0 .5em} h2{font-size:clamp(1.5rem,1.15rem + 1.5vw,2.125rem);letter-spacing:-.01em;margin-top:3.25rem} /* krótka kreska nad każdym H2 — sygnał „nowa sekcja" w tekście na 11 nagłówków. Jest częścią pudełka nagłówka, więc kotwica ląduje razem z nią. */ h2::before{content:"";display:block;width:2.5rem;height:3px;margin-bottom:.9rem; border-radius:2px;background:var(--akcent)} h3{font-size:clamp(1.25rem,1.14rem + .45vw,1.4375rem);margin-top:2.5rem} h4{font-size:1.125rem;margin-top:1.75rem} h1 + h2{margin-top:1.5rem} h2 + h3,h3 + h4{margin-top:1.1rem} @media (min-width:64em){h2{margin-top:4rem}h2::before{width:3rem}} /* lead: pierwszy akapit pod H1 — większy, w granacie, waga 400 */ h1 + p{font-size:1.125em;line-height:1.6;color:var(--granat);font-weight:400} p{margin:0 0 1.3em} p,li{text-wrap:pretty} /* mniej sierot na końcu akapitu; degraduje się bezpiecznie */ ul,ol{margin:0 0 1.5em;padding-left:1.5em} li{margin-bottom:.5em;padding-left:.15em} li::marker{color:var(--akcent);font-weight:400} ol>li::marker{color:var(--akcent-tekst);font-weight:600} li>ul,li>ol{margin-top:.5em;margin-bottom:.25em} strong,b{font-weight:600;color:var(--granat)} /* kursywa Poppins nie jest ładowana (to byłyby 3 pliki więcej na 7 wystąpień w całym serwisie) — waga 400 ratuje czytelność pochyłej syntetycznej */ em,i{font-weight:400} a{color:var(--akcent-tekst);text-decoration-thickness:1px;text-underline-offset:.16em; text-decoration-color:var(--akcent)} a:hover{color:var(--granat);text-decoration-thickness:2px} main > :last-child{margin-bottom:0} /* na wąskich ekranach Poppins daje ~30 znaków w wierszu — bez dzielenia wyrazów prawa krawędź jest poszarpana. W komórkach tabeli NIE dzielimy: dzielenie obniżyłoby min-content i tabela zamiast się przewijać, zwęziłaby kolumny. */ @media (max-width:30em){p,li{hyphens:auto}} /* ---- kotwice ---- `

` bywa celem przekierowania: użytkownik ląduje w środku strony i nagłówek nie może dotykać górnej krawędzi. Podświetlenie celu mówi mu, dokąd trafił; box-shadow rozlewa tło poza pudełko i NIE zmienia układu. */ :where(h1,h2,h3,h4,h5,h6){scroll-margin-top:1.75rem} main :target{background:var(--cytat);box-shadow:0 0 0 .5rem var(--cytat);border-radius:3px} @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}} /* ---- obrazy ---- Szerokość bierze się z atrybutu width buildera (podpowiedź prezentacyjna), ograniczona do 100 %; wysokość liczy proporcja z atrybutów — pudło jest znane przed pobraniem pliku, więc CLS = 0. NIE deklaruję `width`, bo `width:auto` skasowałoby podpowiedź z atrybutu i przed załadowaniem nie byłoby czego rezerwować. 7 z 23 zdjęć wiodących jest pionowych (najostrzejsze 458×1290); max-height je przycina, a object-fit trzyma proporcję wewnątrz pudła. Dlatego obraz wiodący nie dostaje cienia — cień obrysowywałby puste pudło zamiast zdjęcia. */ main img{display:block;max-width:100%;height:auto; max-height:clamp(17rem,66vh,32rem);object-fit:contain; margin:1.75rem auto;border-radius:12px} /* obraz wiodący stoi pod akapitem wprowadzającym (tak emituje builder) i jest LCP */ h1 + p + img{margin-block:2rem 2.5rem} main img + img{margin-top:1rem} /* ---- tabele ---- Ramki na komórkach (border-collapse:separate), bo zlewane ramki znikają pod przyklejoną kolumną na telefonie. */ table{width:100%;margin:1.75rem 0;background:var(--karta); border-collapse:separate;border-spacing:0; font-size:.875rem;line-height:1.45;font-variant-numeric:tabular-nums} @media (min-width:40em){table{font-size:.9375rem}} th,td{padding:.55em .7em;text-align:left;vertical-align:top;overflow-wrap:break-word; border-right:1px solid var(--ramka);border-bottom:1px solid var(--ramka)} th:first-child,td:first-child{border-left:1px solid var(--ramka)} thead th{background:var(--mgla);color:var(--granat);font-weight:600; border-top:1px solid var(--ramka)} table>tbody:first-child>tr:first-child>td{border-top:1px solid var(--ramka)} tbody tr:nth-child(even) td{background:var(--tlo)} caption{caption-side:bottom;padding-top:.6rem;font-size:.875em;text-align:left} /* TELEFON I TABLET: tabela staje się własnym polem przewijania w poziomie. Zmierzone na treści: 9 z 32 tabel ma min-content szerszy niż ekran 320 px (najszersza — skład 8 wód — 933 px). Bez przewijania kolumny spadłyby do ~40 px i liczby łamałyby się po cyfrze. `overflow-wrap:break-word` nie obniża min-content, więc słowa nie pękają, a pasek pojawia się tylko tam, gdzie trzeba. Koszt: display:block zdejmuje z rolę tabeli w czytnikach ekranu — dlatego rekomendacja nr 1 w DECYZJE.md to owijka
, po której ten blok znika. Pierwsza kolumna zostaje przyklejona, żeby przy przewijaniu wiadomo było, czyj to wiersz. */ @media (max-width:63.99em){ table{display:block;overflow-x:auto;overscroll-behavior-x:contain; width:calc(100% + 2*var(--bok));margin-inline:calc(-1*var(--bok))} thead th:first-child{position:sticky;left:0;z-index:2;background:var(--mgla)} tbody td:first-child{position:sticky;left:0;z-index:1;background:var(--karta)} tbody tr:nth-child(even) td:first-child{background:var(--tlo)} th:first-child,td:first-child{box-shadow:1px 0 0 var(--ramka)} } /* DUŻY EKRAN: tabela wychodzi poza kolumnę tekstu (do 8,5 rem na stronę): 672 px treści + 272 px wycieku = 944 px, czyli mieści nawet tę na 8 kolumn (933 px min-content) bez przewijania i bez utraty semantyki
. */ @media (min-width:64em){ table{width:calc(100% + 2*var(--wyciek));margin-inline:calc(-1*var(--wyciek))} } /* ---- cytat blokowy ---- W tym serwisie to funkcja merytoryczna: cudze słowa (rozporządzenie, publikacja) muszą być widoczne na pierwszy rzut oka. Mgła sekundarna z kita różni się od tła strony o ułamek procenta jasności — dlatego cytat dostał własne tło (akcent 10 %) i gruby pasek w kolorze linków. Waga 400 przy tekście 300 = inny głos. */ blockquote{margin:2rem 0;padding:1.05rem 1.25rem; color:var(--granat);font-weight:400; background:var(--cytat);border-left:5px solid var(--akcent-tekst); border-radius:0 12px 12px 0} blockquote :last-child{margin-bottom:0} /* gotowe na przypis źródła, gdy builder zacznie go emitować */ blockquote cite,blockquote footer{display:block;margin-top:.7rem; font-size:.875em;font-style:normal;color:var(--tekst)} blockquote cite::before,blockquote footer::before{content:"— "} /* ---- przycisk CTA ---- Pigułka jak w kicie (promień 20 px przy 16 px tekstu). Obecny build nie emituje `class="cta"` — reguła stoi dla podglądu i na wypadek powrotu przycisków. */ .cta{margin:1.75rem 0 2rem} .cta a{display:inline-flex;align-items:center;justify-content:center;gap:.5em; min-height:3rem;padding:.75em 1.6em;border-radius:999px; background:var(--przycisk);color:var(--przycisk-tekst); font-weight:600;font-size:1rem;line-height:1.2;text-decoration:none; box-shadow:0 2px 8px rgba(28,36,75,.18);transition:background .2s,transform .15s} .cta a::after{content:"\2192" / ""} /* strzałka dekoracyjna, czytnik jej nie czyta */ .cta a:hover{background:var(--przycisk-hover);color:var(--przycisk-tekst)} .cta a:active{transform:translateY(1px)} @media (max-width:30em){.cta a{display:flex;width:100%}} /* ---- stopka ---- */ .stopka{margin-top:3rem;padding-block:1.5rem;background:var(--mgla); border-top:1px solid var(--ramka);font-size:.875rem} .stopka p{margin:0} @media (prefers-reduced-motion:reduce){*{transition:none!important}} @media print{ .naglowek::before,.menu,.pomin{display:none} body{background:#fff;color:#000;display:block} main.srodek{max-width:none} a{color:#000} table{display:table;width:100%;margin-inline:0;font-size:9pt} th:first-child,td:first-child{position:static;box-shadow:none} tr,blockquote,table{break-inside:avoid} h1,h2,h3,h4{break-after:avoid} blockquote{background:none;border-left:3px solid #000} .cta a{background:none;color:#000;border:1px solid #000;box-shadow:none} }