/* ===================================================================== mojprad.warszawa.pl — MAKIETA PREMIUM „JEDEN ADRES, KILKA PPE, KILKA WIERSZY DOWODOWYCH” --------------------------------------------------------------------- Teza serwisu: h1 „Od WARSZAWSKIEGO ADRESU do właściwego PPE i instytucji”; wpis-1 h1 „JEDEN ADRES NIE OZNACZA JEDNEGO PPE”; h2 „KILKA PPE OZNACZA KILKA WIERSZY DOWODOWYCH” — „Nie twórz jednego zbiorczego wiersza dla całego adresu”; h2 „Pięć pól, których nie należy łączyć w jedno”. Rysunek (zmierzony): u góry JEDNA pełna belka 1000×22 (adres); pod nią TRZY PPE — pełne kwadraty 40 px w x 140 / 560 / 320 i y 150 / 236 / 322 (nierówne odstępy, każde na innej wysokości); od każdego w prawo OSOBNY WIERSZ dowodowy: płyty 22 px wys. o różnych szerokościach, w liczbie 4 / 2 / 5 (odstęp 22). Lewe krawędzie wszystkich płyt różnią się parami o ≥ 12 px — ŻADNYCH KOLUMN, to nie matryca (assert w hero.py). ⚠⚠ JEDNA BELKA, TRZY OSOBNE WIERSZE O RÓŻNEJ DŁUGOŚCI — to jest cała treść: adres jest jeden, PPE jest kilka, każdy ma własny komplet. ⚠⚠ ŻADNEJ MATRYCY (dobrykandydat.pl — wiersze nie tworzą kolumn), ŻADNYCH CZTERECH RAM (pomowienia.pl — choć h2 mówi „pięć pól”), ŻADNEGO PASKA Z SUMĄ POD NIM (kontowmbanku.com.pl — tu belka jest NAD wierszami i nic się nie sumuje), ŻADNYCH WARSTW (betamax.pl — choć podstrona-2 mówi „trzy warstwy budynku”), ŻADNYCH TRZECH ADRESÓW PEŁNY/PUSTY (lokatorski.pl), ŻADNYCH DWÓCH GRANIC JEDNA W DRUGIEJ (czystepowietrze.ketrzyn.pl — choć treść mówi o lokalu i części wspólnej), ŻADNYCH KOPERT (wpis-1 „osobne koperty” — słowo, nie kształt). ⚠ Żadnego panelu PV, licznika, budynku, herbu Warszawy, syrenki. Bez liter i cyfr. Pełny zapis: PROJEKT-PREMIUM.md. ⚠ UCZCIWIE O BARWIE: śliwka to średni fiolet z czerwienią — sąsiedzi w rodzinie: purpura katastralna czystepowietrze.ketrzyn.pl (#7A2352, czerwieńsza), fiolet atramentowy czystepowietrze.warszawa.pl (#4B3B86, niebieski — bliźniak miejski, tu świadomie inna gałąź fioletu na CIEPŁEJ płycie zamiast granitu). Piasek ciemny (#DDD3C4) jest najciemniejszą CIEPŁĄ jasną płytą rodziny — piaskowiec szary warmii (#E4DED2) jest jaśniejszy i szary. Sadza ciepła leży między sadzą neutralną mojecieplo.olsztyn.pl (#262626) a ochrą czarną wolomina (#2B2416). ⚠ CHIVO MONO (400) — trzecie użycie w seriach (dwa poza DOTACJE); pula nieużytych mono z latin-ext wyczerpana; plan dopuszcza powtórki. ⚠ SZKIELET przeniesiony z cieplemieszkanie.gmina.pl (jasna płyta, karty `lista-wpisow`, blok do 1319 px); ozdobniki, tokeny i kroje przepisane. Kopiowanie SZKIELETU dozwolone, PROJEKTU nie. ⚠⚠ ARKUSZ RĘCZNY — nie uruchamiać motyw.py / szkielet.py --nadpisz / dokladka.py. Domena na liście premium-recznie.txt. Seria ST-CBF. ⚠ KANON 2b (`.zrodlo` w wpis-3 — sześć wystąpień), 9b i 9c (`wyliczenie` — w tej domenie tylko w specimen; `kroki` — brak); ozdobniki na jasnej płycie biorą `--sliwka-kreska`; kotwiczone do dołu; pozycje czterowartościowe; pas repeat-x: warstwy o szerokości okresu. ⚠ Rodzina DOTACJE (RODZINA-DOTACJE.md). ===================================================================== */ /* ⚠ NAPRAWA 2026-09-06 (Opus 5): `margin-inline: auto` dla .kroki, .wyliczenie i .zrodlo. Skrót `margin: … 0 …` w tych trzech regułach (swoistość 0-2-0, PÓŹNIEJ w arkuszu) bił `.pasmo > .kontener > * { margin-inline: auto }` i przy 1100–1439 px — czyli na typowym ekranie laptopa — listy i ramka źródeł stały 204 px w lewo od kolumny prozy. Powyżej progu siatki (1440 px) blok @media i tak ustawia `margin-inline: 0`, więc szerokie ekrany bez zmian. Zmierzone sondą narzedzia-fable/sonda-listy-1366.mjs na 78 arkuszach premium. */ /* --- 1. TOKENY ------------------------------------------------------- */ :root { --piasek: #DDD3C4; /* jasna płyta nagłówka i hero — piasek ciemny */ --piasek-cien: #CFC3B2; --papier: #F1ECE4; --karta: #FFFFFF; --sadza-noc: #2F2B27; /* pasmo domykające i stopka — sadza ciepła */ --sadza-blask: #4C4742; /* ⚠ najjaśniejszy punkt ciemnej płyty */ --tekst: #221E1B; /* 11,18 / 9,53 na cieniu / 14,07 / 16,54 */ --tekst-cichy: #4F4843; /* 6,06 / 5,17 na cieniu / 7,63 */ --na-sadzy: #F0ECE7; /* 11,94 / 7,81 na blasku */ --na-sadzy-cichy: #C3BBB3; /* 7,41 / 4,84 na blasku */ /* śliwka — TRZY wartości (kanon, punkt 12), policzone */ --sliwka-pismo: #5C2A5E; /* PISMO — 7,28 / 6,21 na cieniu / 9,17 / 10,78 */ --sliwka-kreska: #7A4079; /* kreski — 5,00 / 4,27 na cieniu / 6,29 / 7,40 */ --sliwka-jasny: #E0B8E2; /* na ciemnych płytach — 8,11 / 5,30 na blasku */ --obwodka: #6E665E; /* 3,81 na piasku / 3,25 na cieniu / 4,79 */ --linia-cicha: #D2C8B9; --obwodka-ciemna:#A49C96; /* 5,20 na sadzy / 3,40 na blasku */ --kroj-naglowek: "Bona Nova", Georgia, "Times New Roman", serif; --kroj-tekst: "Parkinsans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --kroj-maszyna: "Chivo Mono", ui-monospace, "DejaVu Sans Mono", Consolas, monospace; --kolumna: 34rem; --kolumna-hero: 36rem; --kolumna-szeroka: 56rem; --margines: clamp(20px, 5vw, 104px); --szyna: 15rem; --rowek: 2.6rem; --promien: 2px; --promien-karta: 3px; --cien-karta: 0 16px 34px -28px rgba(47, 43, 39, .42); } /* --- 2. RESET I PODSTAWA --------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { /* B13 warunek 1 i 2 */ font-size: clamp(1rem, .9rem + .3vw, 1.34rem); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--papier); color: var(--tekst); font-family: var(--kroj-tekst); font-size: 1rem; line-height: 1.7; font-weight: 400; -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; height: auto; display: block; } ::selection { background: var(--sliwka-jasny); color: var(--sadza-noc); } :focus-visible { outline: 3px solid var(--sliwka-pismo); outline-offset: 2px; } .stopka :focus-visible { outline-color: var(--sliwka-jasny); } /* ⚠ NIE „1px + clip” — cel dotykowy 1x1 px, B7 zapala czerwień. */ .omin { position: absolute; inset-inline-start: -9999px; inset-block-start: 0; z-index: 40; display: inline-flex; align-items: center; min-height: 48px; padding: .6rem 1.2rem; background: var(--sliwka-pismo); color: var(--karta); font-weight: 600; text-decoration: none; } .omin:focus { inset-inline-start: 0; } /* --- 2b. PIASEK I PAPIER ------------------------------------------- */ /* ⚠ Nagłówek i hero są JASNE, więc pismo w nich jest CIEMNE. */ .naglowek, .hero { position: relative; isolation: isolate; color: var(--tekst); } .naglowek { background: var(--piasek); } /* --- 3. KONTENER ----------------------------------------------------- */ .kontener { width: 100%; max-width: calc(var(--kolumna-szeroka) + 2 * var(--margines)); margin-inline: auto; padding-inline: var(--margines); } .pasmo > .kontener > * { max-width: var(--kolumna); margin-inline: auto; } .hero__kontener > * { max-width: var(--kolumna-hero); margin-inline: auto; } /* ⚠ KANON 10b: karty biorą szerszą miarę SAME — nie ma opakowania listy. */ .pasmo > .kontener > .zapowiedz { max-width: var(--kolumna-szeroka); } .pasmo > .kontener > .lista-wpisow { max-width: var(--kolumna-szeroka); } /* --- 4. NAGŁÓWEK ----------------------------------------------------- */ .naglowek__piasek { position: absolute; z-index: 0; inset: 0; background-color: var(--piasek); background-image: linear-gradient(180deg, var(--piasek) 0%, var(--piasek-cien) 100%); } /* wzdłuż dolnej krawędzi: szereg — belka adresu, pod nią trzy PPE z osobnymi wierszami płyt różnej długości; okres 56 px. ⚠⚠ NAZWA WARSTWY NIE MOŻE BRZMIEĆ `naglowek__pas` — tak nazywa się KONTENER nagłówka w HTML generatora (`.kontener.naglowek__pas`); 6.09 kolizja nazw rozsypała nagłówek (kontener stał się 13-pikselowym paskiem). */ .naglowek__wiersze { position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 0; height: 13px; background-image: linear-gradient(90deg, transparent 0 2px, var(--sliwka-kreska) 2px 54px, transparent 54px), linear-gradient(90deg, transparent 0 4px, var(--sliwka-kreska) 4px 6px, transparent 6px), linear-gradient(90deg, transparent 0 7px, var(--sliwka-kreska) 7px 15px, transparent 15px), linear-gradient(90deg, transparent 0 16px, var(--sliwka-kreska) 16px 20px, transparent 20px), linear-gradient(90deg, transparent 0 21px, var(--sliwka-kreska) 21px 27px, transparent 27px), linear-gradient(90deg, transparent 0 22px, var(--sliwka-kreska) 22px 24px, transparent 24px), linear-gradient(90deg, transparent 0 25px, var(--sliwka-kreska) 25px 35px, transparent 35px), linear-gradient(90deg, transparent 0 36px, var(--sliwka-kreska) 36px 41px, transparent 41px), linear-gradient(90deg, transparent 0 10px, var(--sliwka-kreska) 10px 12px, transparent 12px), linear-gradient(90deg, transparent 0 13px, var(--sliwka-kreska) 13px 18px, transparent 18px), linear-gradient(90deg, transparent 0 19px, var(--sliwka-kreska) 19px 22px, transparent 22px), linear-gradient(90deg, transparent 0 23px, var(--sliwka-kreska) 23px 30px, transparent 30px), linear-gradient(90deg, transparent 0 31px, var(--sliwka-kreska) 31px 35px, transparent 35px); background-size: 56px 2px, 56px 2px, 56px 2px, 56px 2px, 56px 2px, 56px 2px, 56px 2px, 56px 2px, 56px 2px, 56px 2px, 56px 2px, 56px 2px, 56px 2px; background-position: left 0px top 0px, left 0px top 4px, left 0px top 4px, left 0px top 4px, left 0px top 4px, left 0px top 7px, left 0px top 7px, left 0px top 7px, left 0px top 10px, left 0px top 10px, left 0px top 10px, left 0px top 10px, left 0px top 10px; background-repeat: repeat-x; opacity: .9; } /* ⚠ To jest KONTENER nagłówka z HTML generatora — nazwa `naglowek__pas` jest zajęta przez HTML, warstwa ozdobna nazywa się `naglowek__wiersze`. */ .naglowek__pas { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem clamp(1rem, 3vw, 2.6rem); justify-content: space-between; padding-block: clamp(.9rem, .6rem + .8vw, 1.5rem) clamp(1.2rem, .9rem + .9vw, 1.9rem); } .znak { display: inline-flex; align-items: center; gap: .7rem; min-height: 46px; color: var(--tekst); text-decoration: none; } /* znak rozpoznawczy: belka adresu, pod nią trzy PPE z osobnymi wierszami */ .znak__wiersze { flex: none; width: 34px; height: 14px; background-image: linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%); background-size: 34px 2px, 2px 2px, 6px 2px, 3px 2px, 5px 2px, 2px 2px, 7px 2px, 4px 2px, 2px 2px, 4px 2px, 2px 2px, 6px 2px, 3px 2px; background-position: left 0px bottom 12px, left 0px bottom 8px, left 3px bottom 8px, left 10px bottom 8px, left 14px bottom 8px, left 14px bottom 4px, left 17px bottom 4px, left 25px bottom 4px, left 5px bottom 0px, left 8px bottom 0px, left 13px bottom 0px, left 16px bottom 0px, left 23px bottom 0px; background-repeat: no-repeat; } .znak__slowo { font-family: var(--kroj-naglowek); font-weight: 700; font-size: clamp(1.08rem, .96rem + .46vw, 1.4rem); letter-spacing: -.01em; } .znak:hover .znak__slowo { color: var(--sliwka-pismo); } .menu { min-width: 0; } .menu__lista { display: flex; flex-wrap: wrap; align-items: center; gap: 0 clamp(.2rem, 1vw, 1.1rem); margin: 0; padding: 0; list-style: none; } .menu__link { position: relative; display: inline-flex; align-items: center; min-height: 46px; /* B7 */ padding-inline: .5em; color: var(--tekst-cichy); text-decoration: none; font-family: var(--kroj-maszyna); font-weight: 400; font-size: .78rem; letter-spacing: -.01em; } .menu__link:hover { color: var(--sliwka-pismo); } /* pozycja bieżąca: pod napisem belka adresu i trzy wiersze pod nią. ⚠⚠ KANON 3b: znacznik OBOK pisma, nigdy tło pod nim. ⚠ Odstępy w PIKSELACH — pudełko ma sztywne min-height 46px (P-11). */ .menu__link[aria-current="page"] { color: var(--tekst); font-weight: 600; } .menu__link[aria-current="page"]::after { content: ""; position: absolute; inset-block-end: 6px; inset-inline: .5em; height: 10px; background-image: linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%); background-size: 100% 2px, 2px 2px, 22% 2px, 14% 2px, 2px 2px, 30% 2px, 2px 2px, 12% 2px, 20% 2px, 10% 2px; background-position: left 0px bottom 8px, left 0px bottom 5px, left 5px bottom 5px, left 30% bottom 5px, left 50% bottom 2px, left calc(50% + 5px) bottom 2px, left 18% bottom -1px, left calc(18% + 5px) bottom -1px, left calc(34% + 5px) bottom -1px, left calc(58% + 5px) bottom -1px; background-repeat: no-repeat; } /* --- 5. HERO — jeden adres, kilka PPE, kilka wierszy dowodowych ------ */ .hero { overflow: hidden; padding-block: clamp(2.6rem, 1.6rem + 4vw, 6rem) clamp(3rem, 1.8rem + 4.4vw, 6.6rem); background: var(--piasek); border-block-end: 1px solid var(--linia-cicha); } .hero__piasek { position: absolute; z-index: 0; inset: 0; background-color: var(--piasek); background-image: radial-gradient(62% 68% at 88% 12%, var(--piasek-cien) 0%, rgba(207, 195, 178, 0) 66%), linear-gradient(170deg, var(--piasek) 0%, var(--piasek-cien) 100%); } /* Rysunek jest CIEMNY na jasnym, więc pracuje przy niskim kryciu — ma nie konkurować z tytułem. */ .hero__wiersze { position: absolute; z-index: 1; /* ⚠ Rysunek W CAŁOŚCI w kadrze (belka i trzy wiersze), obok kolumny (1320–1920 px). */ inset-block-start: 54%; inset-inline-end: 2%; width: clamp(26rem, 30vw, 38rem); aspect-ratio: 1200 / 420; transform: translateY(-50%); color: var(--sliwka-pismo); opacity: .52; } .hero__wiersze svg { width: 100%; height: 100%; } /* zanik od lewej — w jasnym rejestrze warstwa jest JASNA. Rysunek stoi po prawej w całości, więc zanik chroni tylko kolumnę tekstu. */ .hero__zanik { position: absolute; z-index: 2; inset: 0; background: linear-gradient(96deg, var(--piasek) 0%, rgba(221, 211, 196, .94) 30%, rgba(221, 211, 196, .2) 50%, rgba(221, 211, 196, 0) 100%); } .hero__kontener { position: relative; z-index: 3; } /* ⚠ EKRANY DO 1319 px: rysunek dostaje WŁASNE MIEJSCE nad tytułem (kontener dostaje górne dopełnienie równe wysokości rysunku), a zanik zaczyna się dopiero pod nim — z boku wchodziłby pod akapit. */ @media (max-width: 1319px) { .hero__kontener { padding-block-start: clamp(6rem, 26vw, 12rem); } .hero__wiersze { inset-block-start: 0; inset-inline-end: 4%; width: clamp(16rem, 74vw, 34rem); transform: none; opacity: .38; } .hero__zanik { background: linear-gradient(180deg, rgba(221, 211, 196, 0) 0%, rgba(221, 211, 196, 0) 22%, rgba(221, 211, 196, .9) 40%, rgba(221, 211, 196, .9) 100%); } } /* ⚠ Tu barwa tytułu jest ta sama w hero i poza nim, bo hero JEST jasne — ale reguła zostaje jawna, żeby specimen.html też był poprawny (kanon, punkt 4). */ .tytul { margin: 0 0 clamp(.9rem, .6rem + .8vw, 1.5rem); font-family: var(--kroj-naglowek); font-weight: 700; font-size: clamp(2rem, 1.26rem + 2.9vw, 3.8rem); line-height: 1.12; letter-spacing: -.018em; color: var(--tekst); text-wrap: balance; } .hero .tytul { color: var(--tekst); } /* nad tytułem: belka adresu, pod nią trzy PPE z osobnymi wierszami płyt. ⚠ Pudełko ma stałą wysokość w px, więc przesunięcia w px. */ .hero .tytul::before { content: ""; display: block; width: 120px; height: 30px; margin-block-end: clamp(1rem, .7rem + .8vw, 1.7rem); background-image: linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%); background-size: 120px 4px, 5px 5px, 16px 4px, 9px 4px, 13px 4px, 7px 4px, 5px 5px, 20px 4px, 8px 4px, 5px 5px, 10px 4px, 6px 4px, 14px 4px, 8px 4px, 17px 4px; background-position: left 0px bottom 26px, left 0px bottom 17px, left 8px bottom 17px, left 27px bottom 17px, left 39px bottom 17px, left 55px bottom 17px, left 40px bottom 9px, left 48px bottom 9px, left 71px bottom 9px, left 18px bottom 1px, left 26px bottom 1px, left 39px bottom 1px, left 48px bottom 1px, left 65px bottom 1px, left 76px bottom 1px; background-repeat: no-repeat; } .hero .wprowadzenie { margin: 0 0 1.1rem; color: var(--tekst); font-size: clamp(1.04rem, .98rem + .34vw, 1.26rem); line-height: 1.64; } .hero p { color: var(--tekst-cichy); } /* ⚠⚠ KANON 3c i 3d: swoistość (0-3-1), ale TYLKO proza — nie pigułka odsyłacza. */ .tresc .hero p:not(.przejscie) a:not(.przycisk) { color: var(--sliwka-pismo); } /* --- 6. PASMA TREŚCI ------------------------------------------------- */ .tresc { display: block; counter-reset: pasmo; } .pasmo { position: relative; counter-increment: pasmo; padding-block: clamp(2.2rem, 1.5rem + 2.4vw, 4.2rem); background: var(--papier); } .pasmo:nth-of-type(even) { background: var(--karta); } .pasmo + .pasmo::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 1px; background: var(--linia-cicha); } /* ⚠⚠ KANON 1 i 3 */ .pasmo:last-of-type:not(:nth-of-type(1)) { background-color: var(--sadza-noc); background-image: linear-gradient(180deg, var(--sadza-blask) 0%, var(--sadza-noc) 62%); color: var(--na-sadzy); } .pasmo:last-of-type:not(:nth-of-type(1))::before { background: var(--sliwka-jasny); height: 2px; opacity: .8; } /* ⚠⚠ KANON 2: TYLKO BEZPOŚREDNIE DZIECI KONTENERA */ .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p { color: var(--na-sadzy-cichy); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2 { color: var(--na-sadzy); } /* ⚠⚠ KANON 2c: h3 i .zajawka mają własną CIEMNĄ barwę z jasnego tła — bez tego 1,07:1 (zmierzone 4.09 na otoenergia.pl). */ .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h3 { color: var(--na-sadzy); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zajawka { color: var(--na-sadzy-cichy); border-inline-start-color: var(--sliwka-jasny); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk) { color: var(--sliwka-jasny); text-decoration-color: var(--sliwka-jasny); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk):hover { color: var(--na-sadzy); } /* --- 7. TYPOGRAFIA TREŚCI ------------------------------------------- */ .tresc h2 { margin: 0 0 clamp(.7rem, .5rem + .5vw, 1.1rem); font-family: var(--kroj-naglowek); font-weight: 700; font-size: clamp(1.4rem, 1.1rem + 1.08vw, 2.16rem); line-height: 1.2; letter-spacing: -.016em; color: var(--tekst); text-wrap: balance; } /* numer sekcji NAD BELKĄ ADRESU I TRZEMA WIERSZAMI. ⚠ Pudełko ma stałą wysokość w px u dołu (padding 14 px), więc przesunięcia ozdobnika w px; WSZYSTKO kotwiczone do dołu (ozdobnik w dolnych 12 px). */ .pasmo > .kontener > h2::before { content: counter(pasmo, decimal-leading-zero); /* ⚠ `flex` (blokowy), nie `inline-flex`. Ozdobnik w dolnych 12 px pudełka. */ display: flex; width: max-content; align-items: flex-start; justify-content: flex-start; min-width: 3.6rem; height: 2rem; margin-block-end: .6rem; padding-block-end: 14px; background-image: linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%); background-size: 40px 2px, 2px 2px, 7px 2px, 3px 2px, 5px 2px, 2px 2px, 9px 2px, 4px 2px, 2px 2px, 4px 2px, 2px 2px, 7px 2px, 3px 2px; background-position: left 0px bottom 10px, left 0px bottom 7px, left 3px bottom 7px, left 11px bottom 7px, left 15px bottom 7px, left 16px bottom 4px, left 19px bottom 4px, left 29px bottom 4px, left 6px bottom 1px, left 9px bottom 1px, left 14px bottom 1px, left 17px bottom 1px, left 25px bottom 1px; background-repeat: no-repeat; font-family: var(--kroj-maszyna); font-weight: 400; font-size: .74rem; letter-spacing: -.01em; color: var(--sliwka-pismo); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2::before { color: var(--sliwka-jasny); background-image: linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%); background-size: 40px 2px, 2px 2px, 7px 2px, 3px 2px, 5px 2px, 2px 2px, 9px 2px, 4px 2px, 2px 2px, 4px 2px, 2px 2px, 7px 2px, 3px 2px; background-position: left 0px bottom 10px, left 0px bottom 7px, left 3px bottom 7px, left 11px bottom 7px, left 15px bottom 7px, left 16px bottom 4px, left 19px bottom 4px, left 29px bottom 4px, left 6px bottom 1px, left 9px bottom 1px, left 14px bottom 1px, left 17px bottom 1px, left 25px bottom 1px; background-repeat: no-repeat; } .tresc h3 { margin: clamp(1.7rem, 1.2rem + 1.2vw, 2.5rem) 0 .5rem; font-family: var(--kroj-naglowek); font-weight: 500; font-size: clamp(1.08rem, .98rem + .4vw, 1.32rem); line-height: 1.34; color: var(--tekst); } .tresc p { margin: 0 0 1.1em; } .tresc p:last-child { margin-block-end: 0; } .wprowadzenie { font-size: clamp(1.02rem, .97rem + .3vw, 1.2rem); line-height: 1.66; } .zajawka { margin: 0 0 1.3em; padding-inline-start: 1.1rem; border-inline-start: 4px solid var(--sliwka-kreska); color: var(--tekst-cichy); font-size: clamp(1.01rem, .96rem + .28vw, 1.16rem); } .tresc p a:not(.przycisk) { color: var(--sliwka-pismo); text-decoration-line: underline; text-decoration-color: var(--sliwka-kreska); text-decoration-thickness: 1px; text-underline-offset: .2em; } .tresc p a:not(.przycisk):hover { color: var(--tekst); text-decoration-thickness: 2px; } /* --- 8. KROKI I WYLICZENIA ------------------------------------------- KROKI to czynności po kolei — numer nad belką adresu i wierszami PPE. WYLICZENIE to rzeczy do sprawdzenia — inny wiersz najdłuższy co pozycję: inny PPE ma najwięcej dowodów, adres ten sam. ⚠ To rozróżnienie jest treścią serwisu, nie dekoracją. -------------------------------------------------------------------- */ .tresc .kroki { margin: .4em auto 1.4em; padding: 0; list-style: none; counter-reset: krok; } .tresc .kroki li { counter-increment: krok; position: relative; padding: .7em 0 .7em 3.2rem; border-block-end: 1px solid var(--linia-cicha); } /* ⚠ Kreskę zdejmujemy ostatniej pozycji W UKŁADZIE; wykaz jednoszpaltowy (P-2). */ .tresc .kroki li:last-child { border-block-end: 0; } /* ⚠⚠ KANON 9b: ODSYŁACZ WEWNĄTRZ `.kroki` JEST CELEM UI. B7 mierzy sam element ``, nie `
  • `, więc padding listy go NIE ratuje. Zmierzone 4.09→5.09 na tej domenie: `` „Czy ten dokument trzeba drukować?” 259 × 20 px przy progu 44. ⚠ `display: inline-block`, NIE `inline-flex`: flex nie zawija tekstu, więc długi tytuł wyszedłby za krawędź i zapalił B5 (brak przewijania w poziomie 360–1920). */ .tresc .kroki li > a { display: inline-block; min-height: 44px; padding-block: .7rem; } .tresc .kroki li::before { content: counter(krok, decimal-leading-zero); position: absolute; inset-inline-start: 0; inset-block-start: .4em; display: inline-flex; align-items: flex-start; justify-content: center; min-width: 2.4rem; height: 2.1rem; padding-inline: .35rem; padding-block-end: 14px; background-image: linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%); background-size: 32px 2px, 2px 2px, 5px 2px, 2px 2px, 4px 2px, 2px 2px, 7px 2px, 3px 2px, 2px 2px, 3px 2px, 2px 2px, 5px 2px, 2px 2px; background-position: left 0px bottom 10px, left 0px bottom 7px, left 3px bottom 7px, left 9px bottom 7px, left 12px bottom 7px, left 13px bottom 4px, left 16px bottom 4px, left 24px bottom 4px, left 5px bottom 1px, left 8px bottom 1px, left 12px bottom 1px, left 15px bottom 1px, left 21px bottom 1px; background-repeat: no-repeat; color: var(--sliwka-pismo); font-family: var(--kroj-maszyna); font-weight: 400; font-size: .74rem; } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .kroki li { border-block-end-color: var(--obwodka-ciemna); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .kroki li::before { color: var(--sliwka-jasny); background-image: linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%); background-size: 32px 2px, 2px 2px, 5px 2px, 2px 2px, 4px 2px, 2px 2px, 7px 2px, 3px 2px, 2px 2px, 3px 2px, 2px 2px, 5px 2px, 2px 2px; background-position: left 0px bottom 10px, left 0px bottom 7px, left 3px bottom 7px, left 9px bottom 7px, left 12px bottom 7px, left 13px bottom 4px, left 16px bottom 4px, left 24px bottom 4px, left 5px bottom 1px, left 8px bottom 1px, left 12px bottom 1px, left 15px bottom 1px, left 21px bottom 1px; background-repeat: no-repeat; } .tresc .wyliczenie { margin: .4em auto 1.4em; padding: 0; list-style: none; display: grid; gap: .6rem; } .tresc .wyliczenie li { position: relative; padding-inline-start: 2.5rem; } /* znacznik: belka adresu i trzy wiersze PPE — inny najdłuższy co pozycję */ .tresc .wyliczenie li::before { content: ""; position: absolute; inset-block-start: .5em; inset-inline-start: 0; width: 36px; height: 14px; background-image: linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%); background-size: 36px 2px, 2px 2px, 6px 2px, 3px 2px, 5px 2px, 4px 2px, 2px 2px, 7px 2px, 4px 2px, 2px 2px, 4px 2px, 2px 2px, 6px 2px, 3px 2px, 5px 2px; background-position: left 0px bottom 12px, left 0px bottom 8px, left 3px bottom 8px, left 10px bottom 8px, left 14px bottom 8px, left 20px bottom 8px, left 15px bottom 4px, left 18px bottom 4px, left 26px bottom 4px, left 5px bottom 0px, left 8px bottom 0px, left 13px bottom 0px, left 16px bottom 0px, left 23px bottom 0px, left 27px bottom 0px; background-repeat: no-repeat; } .tresc .wyliczenie li:nth-child(3n+2)::before { background-image: linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%); background-size: 36px 2px, 2px 2px, 7px 2px, 4px 2px, 2px 2px, 5px 2px, 3px 2px, 4px 2px, 2px 2px, 2px 2px, 6px 2px, 3px 2px, 5px 2px; background-position: left 0px bottom 12px, left 0px bottom 8px, left 3px bottom 8px, left 11px bottom 8px, left 15px bottom 4px, left 18px bottom 4px, left 24px bottom 4px, left 28px bottom 4px, left 33px bottom 4px, left 5px bottom 0px, left 8px bottom 0px, left 15px bottom 0px, left 19px bottom 0px; background-repeat: no-repeat; } .tresc .wyliczenie li:nth-child(3n)::before { background-image: linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%); background-size: 36px 2px, 2px 2px, 5px 2px, 3px 2px, 4px 2px, 2px 2px, 4px 2px, 2px 2px, 5px 2px, 2px 2px, 8px 2px, 4px 2px, 6px 2px, 3px 2px; background-position: left 0px bottom 12px, left 0px bottom 8px, left 3px bottom 8px, left 9px bottom 8px, left 13px bottom 8px, left 15px bottom 4px, left 18px bottom 4px, left 23px bottom 4px, left 26px bottom 4px, left 5px bottom 0px, left 8px bottom 0px, left 17px bottom 0px, left 22px bottom 0px, left 29px bottom 0px; background-repeat: no-repeat; } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wyliczenie li::before { background-image: linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%); background-size: 36px 2px, 2px 2px, 6px 2px, 3px 2px, 5px 2px, 4px 2px, 2px 2px, 7px 2px, 4px 2px, 2px 2px, 4px 2px, 2px 2px, 6px 2px, 3px 2px, 5px 2px; background-position: left 0px bottom 12px, left 0px bottom 8px, left 3px bottom 8px, left 10px bottom 8px, left 14px bottom 8px, left 20px bottom 8px, left 15px bottom 4px, left 18px bottom 4px, left 26px bottom 4px, left 5px bottom 0px, left 8px bottom 0px, left 13px bottom 0px, left 16px bottom 0px, left 23px bottom 0px, left 27px bottom 0px; background-repeat: no-repeat; } /* ⚠⚠ KANON 9c: odsyłacz w wykazie nie jest objęty regułami prozy (te celują w `` wewnątrz `

    `), więc bez własnej reguły dostaje DOMYŚLNY BŁĘKIT przeglądarki. Tutaj hero jest JASNE, więc bramka B6 by przeszła — ale to i tak barwa spoza projektu, a ten serwis MA w hero spis treści („Wybierz pytanie, które blokuje decyzję”), więc reguła jest konieczna. */ .tresc .wyliczenie li a:not(.przycisk), .tresc .kroki li a:not(.przycisk) { color: var(--sliwka-pismo); text-decoration-line: underline; text-decoration-color: var(--sliwka-kreska); text-decoration-thickness: 1px; text-underline-offset: .2em; } .tresc .wyliczenie li a:not(.przycisk):hover, .tresc .kroki li a:not(.przycisk):hover { color: var(--tekst); text-decoration-thickness: 2px; } /* w ciemnym paśmie domykającym — barwa jasna */ .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wyliczenie li a:not(.przycisk), .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .kroki li a:not(.przycisk) { color: var(--sliwka-jasny); text-decoration-color: var(--sliwka-jasny); } .tresc .zrodlo { margin: 1.6em auto 0; padding: clamp(.9rem, .7rem + .6vw, 1.3rem); background: var(--karta); border: 1px solid var(--linia-cicha); border-inline-start: 4px solid var(--sliwka-kreska); border-radius: var(--promien); font-size: .93rem; line-height: 1.6; color: var(--tekst-cichy); } .pasmo:nth-of-type(even) .zrodlo { background: var(--papier); } /* ⚠⚠ KANON 2b — blok z własnym jasnym tłem w ciemnym paśmie. */ .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zrodlo, .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wzor { background: rgba(240, 236, 231, .07); color: var(--na-sadzy-cichy); border-color: var(--obwodka-ciemna); border-inline-start-color: var(--sliwka-jasny); } /* --- 9. ODSYŁACZ KIERUNKOWY ----------------------------------------- */ /* ⚠ B7: samodzielny odsyłacz jest celem UI — min. 44 px. */ .tresc .przejscie { margin-block: 1.7em 0; } .tresc .przejscie + .przejscie { margin-block-start: .7em; } .tresc .przejscie a { display: inline-flex; align-items: center; gap: .7em; min-height: 50px; padding: .5em 1.3em; background: var(--karta); border: 1px solid var(--obwodka); border-radius: var(--promien-karta); color: var(--tekst); text-decoration: none; font-weight: 600; font-size: .99rem; transition: background-color .22s ease, color .22s ease, border-color .22s ease; } .tresc .przejscie a::after { content: "→"; font-size: 1.04em; line-height: 1; transition: transform .22s ease; } .tresc .przejscie a:hover { background: var(--sadza-noc); border-color: var(--sadza-noc); color: var(--na-sadzy); } .tresc .przejscie a:hover::after { transform: translateX(4px); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .przejscie a { background: transparent; border-color: var(--sliwka-jasny); color: var(--na-sadzy); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .przejscie a:hover { background: var(--sliwka-jasny); border-color: var(--sliwka-jasny); color: var(--sadza-noc); } /* --- 10. POLE WEZWANIA I PRZYCISK ----------------------------------- */ .tresc .cta { margin-block: clamp(1.7rem, 1.2rem + 1.3vw, 2.7rem) 1.7em; } /* KANON 7 (P-1) */ /* ⚠⚠ KANON 5: swoistość musi dorównać `.tresc .przejscie a` (0-2-1). */ .przycisk, .tresc a.przycisk, .tresc .przejscie a.przycisk { display: inline-flex; align-items: center; justify-content: center; gap: .7em; min-height: 56px; padding: .85rem 1.9rem; background: var(--sliwka-pismo); color: var(--karta); border: 2px solid var(--sliwka-pismo); border-radius: var(--promien-karta); font-family: var(--kroj-tekst); font-weight: 600; font-size: 1.02rem; letter-spacing: .004em; text-decoration: none; transition: background-color .22s ease, border-color .22s ease; } .tresc .przejscie a.przycisk::after { content: "→"; } .przycisk:hover, .tresc a.przycisk:hover, .tresc .przejscie a.przycisk:hover { background: var(--sadza-noc); border-color: var(--sadza-noc); } /* ⚠ pułapka „.tresc p a bije .przycisk” */ .tresc p a.przycisk { color: var(--karta); text-decoration: none; } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .cta a.przycisk { background: var(--sliwka-jasny); color: var(--sadza-noc); border-color: var(--sliwka-jasny); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .cta a.przycisk:hover { background: var(--na-sadzy); border-color: var(--na-sadzy); } /* --- 11. KARTY KATALOGU — BELKA I WIERSZE NA GÓRNEJ KRAWĘDZI --------- */ .lista-wpisow { margin: clamp(1.6rem, 1.1rem + 1.4vw, 2.8rem) 0 0; padding: 0; list-style: none; display: grid; gap: clamp(1rem, .6rem + 1.2vw, 1.7rem); counter-reset: wpis; } @media (min-width: 900px) { .lista-wpisow { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1440px) { .lista-wpisow { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .zapowiedz { counter-increment: wpis; position: relative; display: flex; flex-direction: column; padding: clamp(1.4rem, 1.1rem + 1vw, 2rem) clamp(1.2rem, .9rem + 1vw, 1.8rem) clamp(1.2rem, .9rem + 1vw, 1.8rem); background: var(--karta); border: 1px solid var(--obwodka); border-radius: var(--promien-karta); box-shadow: var(--cien-karta); } .pasmo:nth-of-type(even) .zapowiedz { background: var(--papier); } /* na górnej krawędzi karty: belka adresu, trzy PPE z osobnymi wierszami */ .zapowiedz::before { content: ""; position: absolute; inset-block-start: -1px; inset-inline-start: clamp(1.2rem, .9rem + 1vw, 1.8rem); width: 56px; height: 13px; background-image: linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%); background-size: 56px 2px, 2px 2px, 9px 2px, 4px 2px, 7px 2px, 2px 2px, 12px 2px, 6px 2px, 2px 2px, 6px 2px, 3px 2px, 9px 2px, 4px 2px, 7px 2px; background-position: left 0px bottom 11px, left 0px bottom 8px, left 3px bottom 8px, left 13px bottom 8px, left 18px bottom 8px, left 24px bottom 4px, left 27px bottom 4px, left 40px bottom 4px, left 8px bottom 0px, left 11px bottom 0px, left 18px bottom 0px, left 22px bottom 0px, left 32px bottom 0px, left 37px bottom 0px; background-repeat: no-repeat; } .zapowiedz::after { content: counter(wpis, decimal-leading-zero); position: absolute; inset-block-start: 1.15rem; inset-inline-end: 1rem; font-family: var(--kroj-maszyna); font-weight: 400; font-size: .74rem; color: var(--sliwka-pismo); } /* ⚠⚠ KANON 6: tytuł karty JEST h2 — cofamy reguły „.tresc h2” tym samym prefiksem, RAZEM Z OZDOBNIKIEM NUMERU (background, min-width, height, padding, display: inline-flex). */ .tresc .zapowiedz__tytul { margin: .3rem 2.4rem .5rem 0; padding: 0; border: 0; width: auto; min-width: 0; height: auto; background: none; max-width: none; display: block; font-family: var(--kroj-naglowek); font-weight: 500; font-size: clamp(1.06rem, .98rem + .4vw, 1.3rem); line-height: 1.3; letter-spacing: -.012em; color: var(--tekst); } .tresc .zapowiedz__tytul::before, .tresc .zapowiedz__tytul::after { content: none; } /* ⚠ „.tresc li a” (0-1-2) bije „.zapowiedz__tytul a” (0-1-1). */ .tresc .zapowiedz__tytul a { display: block; min-height: 44px; color: var(--tekst); text-decoration: none; } .tresc .zapowiedz__tytul a:hover { color: var(--sliwka-pismo); text-decoration: underline; text-decoration-thickness: 2px; } .tresc .zapowiedz__tekst { margin: 0 0 1rem; color: var(--tekst-cichy); font-size: .96rem; } .tresc .zapowiedz__wiecej { margin: auto 0 0; } .tresc .zapowiedz__wiecej a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: .1rem; text-decoration: none; color: var(--sliwka-pismo); font-weight: 600; font-size: .95rem; border-block-end: 2px solid var(--sliwka-kreska); } .tresc .zapowiedz__wiecej a:hover { color: var(--tekst); border-block-end-color: var(--tekst); } /* ⚠ `.zapowiedz__wiecej` ma OBIE klasy naraz (`zapowiedz__wiecej przejscie`). */ .tresc .zapowiedz .przejscie a { background: none; border: 0; border-block-end: 2px solid var(--sliwka-kreska); border-radius: 0; padding: 0 .1rem; min-height: 44px; color: var(--sliwka-pismo); } .tresc .zapowiedz .przejscie a::after { content: none; } .tresc .zapowiedz .przejscie a:hover { background: none; color: var(--tekst); border-block-end-color: var(--tekst); } /* --- 12. STOPKA ----------------------------------------------------- */ .stopka { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(2.2rem, 1.5rem + 2vw, 3.6rem); background: var(--sadza-noc); color: var(--na-sadzy); } .stopka__plyta { position: absolute; z-index: 0; inset: 0; background-color: var(--sadza-noc); background-image: radial-gradient(66% 128% at 88% 100%, var(--sadza-blask) 0%, rgba(76, 71, 66, 0) 64%), linear-gradient(180deg, var(--sadza-blask) 0%, var(--sadza-noc) 58%); } .stopka__wiersze { position: absolute; z-index: 1; inset-inline: 0; inset-block-start: 0; height: 13px; background-image: linear-gradient(90deg, transparent 0 2px, var(--sliwka-jasny) 2px 54px, transparent 54px), linear-gradient(90deg, transparent 0 4px, var(--sliwka-jasny) 4px 6px, transparent 6px), linear-gradient(90deg, transparent 0 7px, var(--sliwka-jasny) 7px 15px, transparent 15px), linear-gradient(90deg, transparent 0 16px, var(--sliwka-jasny) 16px 20px, transparent 20px), linear-gradient(90deg, transparent 0 21px, var(--sliwka-jasny) 21px 27px, transparent 27px), linear-gradient(90deg, transparent 0 22px, var(--sliwka-jasny) 22px 24px, transparent 24px), linear-gradient(90deg, transparent 0 25px, var(--sliwka-jasny) 25px 35px, transparent 35px), linear-gradient(90deg, transparent 0 36px, var(--sliwka-jasny) 36px 41px, transparent 41px), linear-gradient(90deg, transparent 0 10px, var(--sliwka-jasny) 10px 12px, transparent 12px), linear-gradient(90deg, transparent 0 13px, var(--sliwka-jasny) 13px 18px, transparent 18px), linear-gradient(90deg, transparent 0 19px, var(--sliwka-jasny) 19px 22px, transparent 22px), linear-gradient(90deg, transparent 0 23px, var(--sliwka-jasny) 23px 30px, transparent 30px), linear-gradient(90deg, transparent 0 31px, var(--sliwka-jasny) 31px 35px, transparent 35px); background-size: 56px 2px, 56px 2px, 56px 2px, 56px 2px, 56px 2px, 56px 2px, 56px 2px, 56px 2px, 56px 2px, 56px 2px, 56px 2px, 56px 2px, 56px 2px; background-position: left 0px top 0px, left 0px top 4px, left 0px top 4px, left 0px top 4px, left 0px top 4px, left 0px top 7px, left 0px top 7px, left 0px top 7px, left 0px top 10px, left 0px top 10px, left 0px top 10px, left 0px top 10px, left 0px top 10px; background-repeat: repeat-x; opacity: .56; } .stopka .kontener { position: relative; z-index: 2; } .stopka__znak { margin: 0 0 .9rem; font-family: var(--kroj-naglowek); font-weight: 700; font-size: clamp(1.04rem, .96rem + .4vw, 1.3rem); color: var(--na-sadzy); } /* pod znakiem stopki: belka adresu, trzy PPE z osobnymi wierszami */ .stopka__znak::after { content: ""; display: block; width: 56px; height: 13px; margin-block-start: .6rem; background-image: linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%); background-size: 56px 2px, 2px 2px, 9px 2px, 4px 2px, 7px 2px, 2px 2px, 12px 2px, 6px 2px, 2px 2px, 6px 2px, 3px 2px, 9px 2px, 4px 2px, 7px 2px; background-position: left 0px bottom 11px, left 0px bottom 8px, left 3px bottom 8px, left 13px bottom 8px, left 18px bottom 8px, left 24px bottom 4px, left 27px bottom 4px, left 40px bottom 4px, left 8px bottom 0px, left 11px bottom 0px, left 18px bottom 0px, left 22px bottom 0px, left 32px bottom 0px, left 37px bottom 0px; background-repeat: no-repeat; } .stopka__menu ul { display: flex; flex-wrap: wrap; gap: 0 clamp(.6rem, 2vw, 1.8rem); margin: 0; padding: 0; list-style: none; } .stopka__menu a { display: inline-flex; align-items: center; min-height: 44px; /* B7 */ color: var(--na-sadzy-cichy); text-decoration: none; font-family: var(--kroj-maszyna); font-size: .78rem; letter-spacing: -.01em; } .stopka__menu a:hover { color: var(--sliwka-jasny); text-decoration: underline; text-underline-offset: .3em; } /* --- 13. SZEROKIE EKRANY — PIONOWA BELKA ADRESU I WIERSZE PPE --------- ⚠⚠ KANON 10: tory boczne SYMETRYCZNE, środkowy w REM, row-gap ZEROWY, ozdobnik w TORZE SIATKI (nie pseudoelementem `main.tresc`). -------------------------------------------------------------------- */ @media screen and (min-width: 1560px) { .pasmo > .kontener, .hero__kontener { display: grid; grid-template-columns: [pelna-start] minmax(0, 1fr) [proza-start] minmax(0, var(--kolumna)) [proza-end] minmax(0, 1fr) [pelna-end]; column-gap: var(--rowek); row-gap: 0; align-items: start; max-width: none; } .hero__kontener { grid-template-columns: [pelna-start] minmax(0, 1fr) [proza-start] minmax(0, var(--kolumna-hero)) [proza-end] minmax(0, 1fr) [pelna-end]; } .pasmo > .kontener > *, .hero__kontener > * { grid-column: proza; max-width: none; margin-inline: 0; } .pasmo > .kontener > h2 { grid-column: pelna-start / proza-start; justify-self: end; text-align: end; max-width: var(--szyna); margin-block: 0; } .pasmo > .kontener > h2::before { margin-inline-start: auto; } .pasmo > .kontener > h2 + * { margin-block-start: 0; } /* ⚠⚠ KANON 8 (P-17) */ .pasmo > .kontener > h3 { margin-block: clamp(1.9rem, 1.2rem + 1.4vw, 2.7rem) 0; } .pasmo > .kontener > h3 + * { margin-block-start: .5rem; } /* ⚠ KANON 10b: karty biorą szerszy tor SAME, bo nie ma opakowania listy. */ .pasmo > .kontener > .zapowiedz { grid-column: proza-start / pelna-end; max-width: none; } .pasmo > .kontener > .lista-wpisow { grid-column: proza-start / pelna-end; max-width: none; } .hero__kontener > .tytul { grid-column: proza; } /* PIONOWO: belka adresu wzdłuż lewej krawędzi, trzy PPE z osobnymi wierszami w prawo */ .pasmo > .kontener::after { content: ""; grid-column: proza-end / pelna-end; grid-row: 2; justify-self: start; align-self: stretch; width: 1.5rem; min-height: 2.4rem; background-image: linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%), linear-gradient(90deg, var(--sliwka-kreska) 0 100%); background-size: 2px 84%, 3px 3px, 5px 2px, 3px 2px, 3px 3px, 4px 2px, 2px 2px, 5px 2px, 3px 3px, 7px 2px; background-position: left 1px top 8%, left 6px top 14%, left 11px top calc(14% + 0.5px), left 17px top calc(14% + 0.5px), left 6px top 46%, left 11px top calc(46% + 0.5px), left 16px top calc(46% + 0.5px), left 19px top calc(46% + 0.5px), left 6px top 72%, left 11px top calc(72% + 0.5px); background-repeat: no-repeat; } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener::after { background-image: linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%), linear-gradient(90deg, var(--sliwka-jasny) 0 100%); background-size: 2px 84%, 3px 3px, 5px 2px, 3px 2px, 3px 3px, 4px 2px, 2px 2px, 5px 2px, 3px 3px, 7px 2px; background-position: left 1px top 8%, left 6px top 14%, left 11px top calc(14% + 0.5px), left 17px top calc(14% + 0.5px), left 6px top 46%, left 11px top calc(46% + 0.5px), left 16px top calc(46% + 0.5px), left 19px top calc(46% + 0.5px), left 6px top 72%, left 11px top calc(72% + 0.5px); background-repeat: no-repeat; } } /* --- 14. ARKUSZ SYSTEMU (specimen.html — dokument warsztatowy) ------ */ .próbki { margin: 1.6rem 0 0; padding: 0; list-style: none; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .próbka__pole { display: block; height: 3.2rem; border: 1px solid var(--obwodka); } .próbka__opis { display: block; font-family: var(--kroj-maszyna); font-size: .78rem; color: var(--tekst-cichy); padding-block-start: .35em; } /* --- 15. RUCH I DRUK ------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition-duration: .001ms !important; animation-duration: .001ms !important; } } @media print { .naglowek__piasek, .naglowek__wiersze, .hero__piasek, .hero__wiersze, .hero__zanik, .stopka__plyta, .stopka__wiersze { display: none !important; } html { font-size: 11pt; } body, .naglowek, .hero, .stopka, .pasmo, .pasmo:nth-of-type(even), .pasmo:last-of-type:not(:nth-of-type(1)) { background: #fff !important; color: #000 !important; } .tytul, .hero .tytul, .tresc h2, .tresc h3, .znak__slowo, .stopka__znak, .hero p, .stopka__menu a, .menu__link { color: #000 !important; } .tresc .hero p:not(.przejscie) a:not(.przycisk) { color: #000 !important; } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p, .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2, .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h3, .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zajawka, .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zrodlo { color: #000 !important; border-inline-start-color: #000 !important; } .pasmo > .kontener > h2::before { color: #000 !important; border-color: #000 !important; } .tresc .kroki li::before { background: none !important; color: #000 !important; border-color: #000 !important; } .tresc .wyliczenie li::before { background-image: linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%) !important; } .zapowiedz::before, .stopka__znak::after { background-image: linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%) !important; } .pasmo > .kontener > h2::before { background-image: linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%) !important; } .zapowiedz::after { color: #000 !important; } a.przycisk { background: none !important; color: #000 !important; border-color: #000 !important; } .pasmo > .kontener > *, .hero__kontener > * { max-width: none; } .pasmo > .kontener::after { display: none; } }