/* ===================================================================== mojecieplo.olsztyn.pl — MAKIETA PREMIUM „JEDNA TECZKA, TRZY PRZEGRÓDKI” --------------------------------------------------------------------- Teza serwisu: h1 „TECZKA ZGODNOŚCI «Mojego Ciepła» przed wysłaniem wniosku”; h2 „TRZY PRZEGRÓDKI TECZKI” — A. budynek i osoba, B. budynek i wynik energetyczny, C. kupiona pompa i jej dowody; h2 „ZIELONE POLE OZNACZA DOWÓD, NIE DECYZJĘ”; blog „trzy miejsca, w których liczy się wersja”. Rysunek (zmierzony): JEDEN obrys teczki 880×240 (kreska 6) z TRZEMA zakładkami różnej szerokości (190/130/230, wys. 44) na górnej krawędzi; DWIE przegrody dzielą wnętrze na przegródki RÓŻNEJ szerokości (310/250/320); w każdej pełne kwadraty 34 px — dowody — w innej liczbie (2/1/3), ustawione od dołu. Zakładka stoi nad swoją przegródką. ⚠⚠ JEDEN OBRYS, TRZY PRZEGRÓDKI, DOWODY JAKO PEŁNE POLA — to jest cała treść: nic nie jest decyzją, wszystko jest dokumentem w przegródce. ⚠⚠ ŻADNYCH CZTERECH JEDNAKOWYCH OKŁADEK (audytorenergetyczny.com), ŻADNEGO POSZYTU Z KRAFTOWĄ OKŁADKĄ (przewodnik.mazury.pl), ŻADNEJ MATRYCY ANI PUSTEGO POLA (dobrykandydat.pl, darmowycertyfikat.pl), ŻADNYCH WARSTW (betamax.pl, dermio.pl — choć podstrona-2 mówi „warstwa budynku / warstwa urządzenia”), ŻADNYCH DWÓCH POKRYWAJĄCYCH SIĘ ZARYSÓW (doradcaenergetyczny.com — choć wpis-3 mówi o wersjach). ⚠ Żadnej pompy, domu, spinacza, klipsa, ikony folderu z zaokrągleniami. Bez liter i cyfr (A/B/C zostają w treści, nie w rysunku). Pełny zapis: PROJEKT-PREMIUM.md. ⚠ UCZCIWIE O BARWIE: łupek to przygaszony granat — sąsiedzi w rodzinie: kobalt przygaszony olsztyna czystepowietrze (#2F4270, bardziej niebieski i nasycony), lazur mojecieplo.gmina (#1D5B99, jasny i czysty). Lód jest NAJBARDZIEJ NIEBIESKĄ jasną płytą rodziny (stal jasna #DEE3E8 i mgła #E2EAEA są szare). Pasmo sadzy jest jedyną NEUTRALNĄ (bez zabarwienia) ciemną płytą rodziny — pozostałe dwanaście ma odcień. ⚠ GEIST MONO (400) powtórzone po podpiselektroniczny.warszawa.pl — pula nieużytych mono wyczerpana; plan dopuszcza powtórki krojów maszynowych. ⚠ 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 tej domenie brak), 9b i 9c (`wyliczenie` w hero index.html); ozdobniki na jasnej płycie biorą `--lupek-kreska`; kotwiczone do dołu; pozycje czterowartościowe; pas repeat-x: warstwy o szerokości okresu z twardymi przejściami. ⚠ 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 { --lod: #E1EBF3; /* jasna płyta nagłówka i hero — lód błękitny */ --lod-cien: #D0DDE8; --papier: #F1F5F9; --karta: #FFFFFF; --sadza-noc: #262626; /* pasmo domykające i stopka — sadza neutralna */ --sadza-blask:#404040; /* ⚠ najjaśniejszy punkt ciemnej płyty */ --tekst: #1C1E21; /* 13,83 / 12,08 na cieniu / 15,25 / 16,71 */ --tekst-cichy: #4F555C; /* 6,24 / 5,45 na cieniu / 6,88 */ --na-sadzy: #EDEFF2; /* 13,14 / 9,00 na blasku */ --na-sadzy-cichy: #B5BCC5; /* 7,90 / 5,41 na blasku */ /* łupek — TRZY wartości (kanon, punkt 12), policzone */ --lupek-pismo: #34465E; /* PISMO — 7,96 / 6,96 na cieniu / 8,78 / 9,62 */ --lupek-kreska: #52687F; /* kreski — 4,77 / 4,17 na cieniu / 5,26 / 5,76 */ --lupek-jasny: #BFD5EA; /* na ciemnych płytach — 10,03 / 6,87 na blasku */ --obwodka: #6E7782; /* 3,76 na lodzie / 3,28 na cieniu / 4,15 */ --linia-cicha: #D6E0E9; --obwodka-ciemna:#8E969F; /* 5,05 na sadzy / 3,46 na blasku */ --kroj-naglowek: "Libre Bodoni", Georgia, "Times New Roman", serif; --kroj-tekst: "Raleway", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --kroj-maszyna: "Geist 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(38, 38, 38, .40); } /* --- 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(--lupek-jasny); color: var(--sadza-noc); } :focus-visible { outline: 3px solid var(--lupek-pismo); outline-offset: 2px; } .stopka :focus-visible { outline-color: var(--lupek-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(--lupek-pismo); color: var(--karta); font-weight: 600; text-decoration: none; } .omin:focus { inset-inline-start: 0; } /* --- 2b. LÓD 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(--lod); } /* --- 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__lod { position: absolute; z-index: 0; inset: 0; background-color: var(--lod); background-image: linear-gradient(180deg, var(--lod) 0%, var(--lod-cien) 100%); } /* wzdłuż dolnej krawędzi: szereg teczek — obrys z trzema zakładkami różnej szerokości, dwie przegrody, pełne pola w przegródkach; 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__teczka { position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 0; height: 13px; background-image: linear-gradient(90deg, transparent 0 6px, var(--lupek-kreska) 6px 50px, transparent 50px), linear-gradient(90deg, transparent 0 6px, var(--lupek-kreska) 6px 50px, transparent 50px), linear-gradient(90deg, transparent 0 6px, var(--lupek-kreska) 6px 7px, transparent 7px), linear-gradient(90deg, transparent 0 49px, var(--lupek-kreska) 49px 50px, transparent 50px), linear-gradient(90deg, transparent 0 21px, var(--lupek-kreska) 21px 22px, transparent 22px), linear-gradient(90deg, transparent 0 32px, var(--lupek-kreska) 32px 33px, transparent 33px), linear-gradient(90deg, transparent 0 8px, var(--lupek-kreska) 8px 19px, transparent 19px), linear-gradient(90deg, transparent 0 8px, var(--lupek-kreska) 8px 9px, transparent 9px), linear-gradient(90deg, transparent 0 18px, var(--lupek-kreska) 18px 19px, transparent 19px), linear-gradient(90deg, transparent 0 24px, var(--lupek-kreska) 24px 31px, transparent 31px), linear-gradient(90deg, transparent 0 24px, var(--lupek-kreska) 24px 25px, transparent 25px), linear-gradient(90deg, transparent 0 30px, var(--lupek-kreska) 30px 31px, transparent 31px), linear-gradient(90deg, transparent 0 35px, var(--lupek-kreska) 35px 47px, transparent 47px), linear-gradient(90deg, transparent 0 35px, var(--lupek-kreska) 35px 36px, transparent 36px), linear-gradient(90deg, transparent 0 46px, var(--lupek-kreska) 46px 47px, transparent 47px), linear-gradient(90deg, transparent 0 8px, var(--lupek-kreska) 8px 10px, transparent 10px), linear-gradient(90deg, transparent 0 11px, var(--lupek-kreska) 11px 13px, transparent 13px), linear-gradient(90deg, transparent 0 24px, var(--lupek-kreska) 24px 26px, transparent 26px), linear-gradient(90deg, transparent 0 35px, var(--lupek-kreska) 35px 37px, transparent 37px), linear-gradient(90deg, transparent 0 38px, var(--lupek-kreska) 38px 40px, transparent 40px), linear-gradient(90deg, transparent 0 41px, var(--lupek-kreska) 41px 43px, transparent 43px); background-size: 56px 1px, 56px 1px, 56px 9px, 56px 9px, 56px 9px, 56px 9px, 56px 1px, 56px 3px, 56px 3px, 56px 1px, 56px 3px, 56px 3px, 56px 1px, 56px 3px, 56px 3px, 56px 2px, 56px 2px, 56px 2px, 56px 2px, 56px 2px, 56px 2px; background-position: left 0px top 3px, left 0px top 12px, left 0px top 4px, left 0px top 4px, left 0px top 4px, left 0px top 4px, left 0px top 0px, left 0px top 1px, left 0px top 1px, left 0px top 0px, left 0px top 1px, left 0px top 1px, left 0px top 0px, left 0px top 1px, left 0px top 1px, left 0px top 9px, left 0px top 9px, left 0px top 9px, left 0px top 9px, left 0px top 9px, left 0px top 9px; 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__teczka`. */ .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: teczka z trzema zakładkami, dwie przegrody, pola 2/1/3 */ .znak__teczka { flex: none; width: 34px; height: 14px; background-image: linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%); background-size: 34px 1px, 34px 1px, 1px 10px, 1px 10px, 1px 10px, 1px 10px, 7px 1px, 1px 4px, 1px 4px, 5px 1px, 1px 4px, 1px 4px, 9px 1px, 1px 4px, 1px 4px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px; background-position: left 0px bottom 9px, left 0px bottom 0px, left 0px bottom 0px, left 33px bottom 0px, left 11px bottom 0px, left 20px bottom 0px, left 2px bottom 13px, left 2px bottom 10px, left 8px bottom 10px, left 14px bottom 13px, left 14px bottom 10px, left 18px bottom 10px, left 23px bottom 13px, left 23px bottom 10px, left 31px bottom 10px, left 2px bottom 2px, left 6px bottom 2px, left 14px bottom 2px, left 23px bottom 2px, left 27px bottom 2px, left 31px bottom 2px; 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(--lupek-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(--lupek-pismo); } /* pozycja bieżąca: pod napisem obrys teczki z trzema zakładkami i dwiema przegrodami. ⚠⚠ 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(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%); background-size: 100% 1px, 100% 1px, 1px 7px, 1px 7px, 1px 7px, 1px 7px, 22% 1px, 1px 3px, 1px 3px, 14% 1px, 1px 3px, 1px 3px, 26% 1px, 1px 3px, 1px 3px; background-position: left 0px bottom 6px, left 0px bottom 0px, left 0px bottom 0px, right 0px bottom 0px, left 35% bottom 0px, left 62% bottom 0px, left 6% bottom 9px, left 6% bottom 6px, left 28% bottom 6px, left 43% bottom 9px, left 43% bottom 6px, left 57% bottom 6px, right 6% bottom 9px, right 6% bottom 6px, right 32% bottom 6px; background-repeat: no-repeat; } /* --- 5. HERO — jedna teczka, trzy przegródki ------------------------- */ .hero { overflow: hidden; padding-block: clamp(2.6rem, 1.6rem + 4vw, 6rem) clamp(3rem, 1.8rem + 4.4vw, 6.6rem); background: var(--lod); border-block-end: 1px solid var(--linia-cicha); } .hero__lod { position: absolute; z-index: 0; inset: 0; background-color: var(--lod); background-image: radial-gradient(62% 68% at 88% 12%, var(--lod-cien) 0%, rgba(208, 221, 232, 0) 66%), linear-gradient(170deg, var(--lod) 0%, var(--lod-cien) 100%); } /* Rysunek jest CIEMNY na jasnym, więc pracuje przy niskim kryciu — ma nie konkurować z tytułem. */ .hero__teczka { position: absolute; z-index: 1; /* ⚠ Rysunek W CAŁOŚCI w kadrze (cała teczka z zakładkami), 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(--lupek-pismo); opacity: .52; } .hero__teczka 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(--lod) 0%, rgba(225, 235, 243, .94) 30%, rgba(225, 235, 243, .2) 50%, rgba(225, 235, 243, 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__teczka { inset-block-start: 0; inset-inline-end: 4%; width: clamp(16rem, 74vw, 34rem); transform: none; opacity: .38; } .hero__zanik { background: linear-gradient(180deg, rgba(225, 235, 243, 0) 0%, rgba(225, 235, 243, 0) 22%, rgba(225, 235, 243, .9) 40%, rgba(225, 235, 243, .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: większa teczka — trzy zakładki, dwie przegrody, pola 2/1/3. ⚠ Pudełko ma stałą wysokość w px, więc przesunięcia w px. */ .hero .tytul::before { content: ""; display: block; width: 96px; height: 26px; margin-block-end: clamp(1rem, .7rem + .8vw, 1.7rem); background-image: linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%); background-size: 96px 2px, 96px 2px, 2px 19px, 2px 19px, 2px 19px, 2px 19px, 22px 2px, 2px 7px, 2px 7px, 14px 2px, 2px 7px, 2px 7px, 26px 2px, 2px 7px, 2px 7px, 5px 5px, 5px 5px, 5px 5px, 5px 5px, 5px 5px, 5px 5px; background-position: left 0px bottom 17px, left 0px bottom 0px, left 0px bottom 0px, left 94px bottom 0px, left 32px bottom 0px, left 58px bottom 0px, left 4px bottom 24px, left 4px bottom 19px, left 24px bottom 19px, left 38px bottom 24px, left 38px bottom 19px, left 50px bottom 19px, left 66px bottom 24px, left 66px bottom 19px, left 90px bottom 19px, left 5px bottom 5px, left 13px bottom 5px, left 39px bottom 5px, left 65px bottom 5px, left 73px bottom 5px, left 81px bottom 5px; 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(--lupek-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(--lupek-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(--lupek-jasny); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk) { color: var(--lupek-jasny); text-decoration-color: var(--lupek-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 TECZKĄ Z TRZEMA ZAKŁADKAMI. ⚠ 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(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%); background-size: 40px 1px, 40px 1px, 1px 9px, 1px 9px, 1px 9px, 1px 9px, 9px 1px, 1px 3px, 1px 3px, 6px 1px, 1px 3px, 1px 3px, 11px 1px, 1px 3px, 1px 3px, 2px 2px, 2px 2px, 2px 2px, 2px 2px, 2px 2px, 2px 2px; background-position: left 0px bottom 8px, left 0px bottom 0px, left 0px bottom 0px, left 39px bottom 0px, left 13px bottom 0px, left 24px bottom 0px, left 2px bottom 11px, left 2px bottom 9px, left 10px bottom 9px, left 16px bottom 11px, left 16px bottom 9px, left 21px bottom 9px, left 26px bottom 11px, left 26px bottom 9px, left 36px bottom 9px, left 2px bottom 2px, left 5px bottom 2px, left 16px bottom 2px, left 27px bottom 2px, left 30px bottom 2px, left 33px bottom 2px; background-repeat: no-repeat; font-family: var(--kroj-maszyna); font-weight: 400; font-size: .74rem; letter-spacing: -.01em; color: var(--lupek-pismo); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2::before { color: var(--lupek-jasny); background-image: linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%); background-size: 40px 1px, 40px 1px, 1px 9px, 1px 9px, 1px 9px, 1px 9px, 9px 1px, 1px 3px, 1px 3px, 6px 1px, 1px 3px, 1px 3px, 11px 1px, 1px 3px, 1px 3px, 2px 2px, 2px 2px, 2px 2px, 2px 2px, 2px 2px, 2px 2px; background-position: left 0px bottom 8px, left 0px bottom 0px, left 0px bottom 0px, left 39px bottom 0px, left 13px bottom 0px, left 24px bottom 0px, left 2px bottom 11px, left 2px bottom 9px, left 10px bottom 9px, left 16px bottom 11px, left 16px bottom 9px, left 21px bottom 9px, left 26px bottom 11px, left 26px bottom 9px, left 36px bottom 9px, left 2px bottom 2px, left 5px bottom 2px, left 16px bottom 2px, left 27px bottom 2px, left 30px bottom 2px, left 33px bottom 2px; 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(--lupek-kreska); color: var(--tekst-cichy); font-size: clamp(1.01rem, .96rem + .28vw, 1.16rem); } .tresc p a:not(.przycisk) { color: var(--lupek-pismo); text-decoration-line: underline; text-decoration-color: var(--lupek-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 teczką z trzema zakładkami. WYLICZENIE to rzeczy do sprawdzenia — inny rozkład pól w przegródkach co pozycję: inny dowód, ta sama teczka. ⚠ 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(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%); background-size: 32px 1px, 32px 1px, 1px 9px, 1px 9px, 1px 9px, 1px 9px, 7px 1px, 1px 3px, 1px 3px, 5px 1px, 1px 3px, 1px 3px, 9px 1px, 1px 3px, 1px 3px, 2px 2px, 2px 2px, 2px 2px, 2px 2px, 2px 2px, 2px 2px; background-position: left 0px bottom 8px, left 0px bottom 0px, left 0px bottom 0px, left 31px bottom 0px, left 10px bottom 0px, left 19px bottom 0px, left 2px bottom 11px, left 2px bottom 9px, left 8px bottom 9px, left 13px bottom 11px, left 13px bottom 9px, left 17px bottom 9px, left 21px bottom 11px, left 21px bottom 9px, left 29px bottom 9px, left 2px bottom 2px, left 5px bottom 2px, left 13px bottom 2px, left 22px bottom 2px, left 25px bottom 2px, left 28px bottom 2px; background-repeat: no-repeat; color: var(--lupek-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(--lupek-jasny); background-image: linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%); background-size: 32px 1px, 32px 1px, 1px 9px, 1px 9px, 1px 9px, 1px 9px, 7px 1px, 1px 3px, 1px 3px, 5px 1px, 1px 3px, 1px 3px, 9px 1px, 1px 3px, 1px 3px, 2px 2px, 2px 2px, 2px 2px, 2px 2px, 2px 2px, 2px 2px; background-position: left 0px bottom 8px, left 0px bottom 0px, left 0px bottom 0px, left 31px bottom 0px, left 10px bottom 0px, left 19px bottom 0px, left 2px bottom 11px, left 2px bottom 9px, left 8px bottom 9px, left 13px bottom 11px, left 13px bottom 9px, left 17px bottom 9px, left 21px bottom 11px, left 21px bottom 9px, left 29px bottom 9px, left 2px bottom 2px, left 5px bottom 2px, left 13px bottom 2px, left 22px bottom 2px, left 25px bottom 2px, left 28px bottom 2px; 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: teczka z trzema zakładkami — inny rozkład pól 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(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%); background-size: 36px 1px, 36px 1px, 1px 10px, 1px 10px, 1px 10px, 1px 10px, 8px 1px, 1px 4px, 1px 4px, 5px 1px, 1px 4px, 1px 4px, 10px 1px, 1px 4px, 1px 4px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px; background-position: left 0px bottom 9px, left 0px bottom 0px, left 0px bottom 0px, left 35px bottom 0px, left 12px bottom 0px, left 22px bottom 0px, left 2px bottom 13px, left 2px bottom 10px, left 9px bottom 10px, left 15px bottom 13px, left 15px bottom 10px, left 19px bottom 10px, left 24px bottom 13px, left 24px bottom 10px, left 33px bottom 10px, left 2px bottom 2px, left 6px bottom 2px, left 15px bottom 2px, left 25px bottom 2px, left 29px bottom 2px, left 33px bottom 2px; background-repeat: no-repeat; } .tresc .wyliczenie li:nth-child(3n+2)::before { background-image: linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%); background-size: 36px 1px, 36px 1px, 1px 10px, 1px 10px, 1px 10px, 1px 10px, 8px 1px, 1px 4px, 1px 4px, 5px 1px, 1px 4px, 1px 4px, 10px 1px, 1px 4px, 1px 4px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px; background-position: left 0px bottom 9px, left 0px bottom 0px, left 0px bottom 0px, left 35px bottom 0px, left 12px bottom 0px, left 22px bottom 0px, left 2px bottom 13px, left 2px bottom 10px, left 9px bottom 10px, left 15px bottom 13px, left 15px bottom 10px, left 19px bottom 10px, left 24px bottom 13px, left 24px bottom 10px, left 33px bottom 10px, left 2px bottom 2px, left 15px bottom 2px, left 19px bottom 2px, left 25px bottom 2px, left 29px bottom 2px, left 33px bottom 2px; background-repeat: no-repeat; } .tresc .wyliczenie li:nth-child(3n)::before { background-image: linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%); background-size: 36px 1px, 36px 1px, 1px 10px, 1px 10px, 1px 10px, 1px 10px, 8px 1px, 1px 4px, 1px 4px, 5px 1px, 1px 4px, 1px 4px, 10px 1px, 1px 4px, 1px 4px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px; background-position: left 0px bottom 9px, left 0px bottom 0px, left 0px bottom 0px, left 35px bottom 0px, left 12px bottom 0px, left 22px bottom 0px, left 2px bottom 13px, left 2px bottom 10px, left 9px bottom 10px, left 15px bottom 13px, left 15px bottom 10px, left 19px bottom 10px, left 24px bottom 13px, left 24px bottom 10px, left 33px bottom 10px, left 2px bottom 2px, left 6px bottom 2px, left 10px bottom 2px, left 15px bottom 2px, left 25px bottom 2px, left 29px bottom 2px; background-repeat: no-repeat; } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wyliczenie li::before { background-image: linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%); background-size: 36px 1px, 36px 1px, 1px 10px, 1px 10px, 1px 10px, 1px 10px, 8px 1px, 1px 4px, 1px 4px, 5px 1px, 1px 4px, 1px 4px, 10px 1px, 1px 4px, 1px 4px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px; background-position: left 0px bottom 9px, left 0px bottom 0px, left 0px bottom 0px, left 35px bottom 0px, left 12px bottom 0px, left 22px bottom 0px, left 2px bottom 13px, left 2px bottom 10px, left 9px bottom 10px, left 15px bottom 13px, left 15px bottom 10px, left 19px bottom 10px, left 24px bottom 13px, left 24px bottom 10px, left 33px bottom 10px, left 2px bottom 2px, left 6px bottom 2px, left 15px bottom 2px, left 25px bottom 2px, left 29px bottom 2px, left 33px bottom 2px; 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(--lupek-pismo); text-decoration-line: underline; text-decoration-color: var(--lupek-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(--lupek-jasny); text-decoration-color: var(--lupek-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(--lupek-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(237, 239, 242, .07); color: var(--na-sadzy-cichy); border-color: var(--obwodka-ciemna); border-inline-start-color: var(--lupek-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(--lupek-jasny); color: var(--na-sadzy); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .przejscie a:hover { background: var(--lupek-jasny); border-color: var(--lupek-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(--lupek-pismo); color: var(--karta); border: 2px solid var(--lupek-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(--lupek-jasny); color: var(--sadza-noc); border-color: var(--lupek-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 — TECZKA 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: teczka z trzema zakładkami, dwie przegrody, pola 2/1/3 */ .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(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%); background-size: 56px 1px, 56px 1px, 1px 9px, 1px 9px, 1px 9px, 1px 9px, 12px 1px, 1px 4px, 1px 4px, 8px 1px, 1px 4px, 1px 4px, 15px 1px, 1px 4px, 1px 4px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px; background-position: left 0px bottom 8px, left 0px bottom 0px, left 0px bottom 0px, left 55px bottom 0px, left 19px bottom 0px, left 35px bottom 0px, left 3px bottom 12px, left 3px bottom 9px, left 14px bottom 9px, left 23px bottom 12px, left 23px bottom 9px, left 30px bottom 9px, left 37px bottom 12px, left 37px bottom 9px, left 51px bottom 9px, left 2px bottom 2px, left 6px bottom 2px, left 22px bottom 2px, left 38px bottom 2px, left 42px bottom 2px, left 46px bottom 2px; 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(--lupek-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(--lupek-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(--lupek-pismo); font-weight: 600; font-size: .95rem; border-block-end: 2px solid var(--lupek-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(--lupek-kreska); border-radius: 0; padding: 0 .1rem; min-height: 44px; color: var(--lupek-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(64, 64, 64, 0) 64%), linear-gradient(180deg, var(--sadza-blask) 0%, var(--sadza-noc) 58%); } .stopka__teczka { position: absolute; z-index: 1; inset-inline: 0; inset-block-start: 0; height: 13px; background-image: linear-gradient(90deg, transparent 0 6px, var(--lupek-jasny) 6px 50px, transparent 50px), linear-gradient(90deg, transparent 0 6px, var(--lupek-jasny) 6px 50px, transparent 50px), linear-gradient(90deg, transparent 0 6px, var(--lupek-jasny) 6px 7px, transparent 7px), linear-gradient(90deg, transparent 0 49px, var(--lupek-jasny) 49px 50px, transparent 50px), linear-gradient(90deg, transparent 0 21px, var(--lupek-jasny) 21px 22px, transparent 22px), linear-gradient(90deg, transparent 0 32px, var(--lupek-jasny) 32px 33px, transparent 33px), linear-gradient(90deg, transparent 0 8px, var(--lupek-jasny) 8px 19px, transparent 19px), linear-gradient(90deg, transparent 0 8px, var(--lupek-jasny) 8px 9px, transparent 9px), linear-gradient(90deg, transparent 0 18px, var(--lupek-jasny) 18px 19px, transparent 19px), linear-gradient(90deg, transparent 0 24px, var(--lupek-jasny) 24px 31px, transparent 31px), linear-gradient(90deg, transparent 0 24px, var(--lupek-jasny) 24px 25px, transparent 25px), linear-gradient(90deg, transparent 0 30px, var(--lupek-jasny) 30px 31px, transparent 31px), linear-gradient(90deg, transparent 0 35px, var(--lupek-jasny) 35px 47px, transparent 47px), linear-gradient(90deg, transparent 0 35px, var(--lupek-jasny) 35px 36px, transparent 36px), linear-gradient(90deg, transparent 0 46px, var(--lupek-jasny) 46px 47px, transparent 47px), linear-gradient(90deg, transparent 0 8px, var(--lupek-jasny) 8px 10px, transparent 10px), linear-gradient(90deg, transparent 0 11px, var(--lupek-jasny) 11px 13px, transparent 13px), linear-gradient(90deg, transparent 0 24px, var(--lupek-jasny) 24px 26px, transparent 26px), linear-gradient(90deg, transparent 0 35px, var(--lupek-jasny) 35px 37px, transparent 37px), linear-gradient(90deg, transparent 0 38px, var(--lupek-jasny) 38px 40px, transparent 40px), linear-gradient(90deg, transparent 0 41px, var(--lupek-jasny) 41px 43px, transparent 43px); background-size: 56px 1px, 56px 1px, 56px 9px, 56px 9px, 56px 9px, 56px 9px, 56px 1px, 56px 3px, 56px 3px, 56px 1px, 56px 3px, 56px 3px, 56px 1px, 56px 3px, 56px 3px, 56px 2px, 56px 2px, 56px 2px, 56px 2px, 56px 2px, 56px 2px; background-position: left 0px top 3px, left 0px top 12px, left 0px top 4px, left 0px top 4px, left 0px top 4px, left 0px top 4px, left 0px top 0px, left 0px top 1px, left 0px top 1px, left 0px top 0px, left 0px top 1px, left 0px top 1px, left 0px top 0px, left 0px top 1px, left 0px top 1px, left 0px top 9px, left 0px top 9px, left 0px top 9px, left 0px top 9px, left 0px top 9px, left 0px top 9px; 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: teczka z trzema zakładkami, dwie przegrody, pola 2/1/3 */ .stopka__znak::after { content: ""; display: block; width: 56px; height: 13px; margin-block-start: .6rem; background-image: linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%); background-size: 56px 1px, 56px 1px, 1px 9px, 1px 9px, 1px 9px, 1px 9px, 12px 1px, 1px 4px, 1px 4px, 8px 1px, 1px 4px, 1px 4px, 15px 1px, 1px 4px, 1px 4px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px; background-position: left 0px bottom 8px, left 0px bottom 0px, left 0px bottom 0px, left 55px bottom 0px, left 19px bottom 0px, left 35px bottom 0px, left 3px bottom 12px, left 3px bottom 9px, left 14px bottom 9px, left 23px bottom 12px, left 23px bottom 9px, left 30px bottom 9px, left 37px bottom 12px, left 37px bottom 9px, left 51px bottom 9px, left 2px bottom 2px, left 6px bottom 2px, left 22px bottom 2px, left 38px bottom 2px, left 42px bottom 2px, left 46px bottom 2px; 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(--lupek-jasny); text-decoration: underline; text-underline-offset: .3em; } /* --- 13. SZEROKIE EKRANY — PIONOWA TECZKA Z ZAKŁADKAMI W LEWO --------- ⚠⚠ 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: obrócona teczka — zakładki różnej długości w lewo, dwie przegrody, pola przy dolnych ściankach */ .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(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%), linear-gradient(90deg, var(--lupek-kreska) 0 100%); background-size: 1px 70%, 1px 70%, 16px 1px, 16px 1px, 16px 1px, 16px 1px, 6px 1px, 1px 12%, 6px 1px, 6px 1px, 1px 8%, 6px 1px, 6px 1px, 1px 16%, 6px 1px, 2px 2px, 2px 2px, 2px 2px, 2px 2px, 2px 2px, 2px 2px; background-position: left 8px top 15%, left 23px top 15%, left 8px top 15%, left 8px top 85%, left 8px top 34%, left 8px top 62%, left 2px top 18%, left 2px top 18%, left 2px top 30%, left 2px top 40%, left 2px top 40%, left 2px top 48%, left 2px top 66%, left 2px top 66%, left 2px top 82%, left 10px top calc(34% - 3px), left 13px top calc(34% - 3px), left 10px top calc(62% - 3px), left 10px top calc(85% - 3px), left 13px top calc(85% - 3px), left 16px top calc(85% - 3px); background-repeat: no-repeat; } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener::after { background-image: linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%), linear-gradient(90deg, var(--lupek-jasny) 0 100%); background-size: 1px 70%, 1px 70%, 16px 1px, 16px 1px, 16px 1px, 16px 1px, 6px 1px, 1px 12%, 6px 1px, 6px 1px, 1px 8%, 6px 1px, 6px 1px, 1px 16%, 6px 1px, 2px 2px, 2px 2px, 2px 2px, 2px 2px, 2px 2px, 2px 2px; background-position: left 8px top 15%, left 23px top 15%, left 8px top 15%, left 8px top 85%, left 8px top 34%, left 8px top 62%, left 2px top 18%, left 2px top 18%, left 2px top 30%, left 2px top 40%, left 2px top 40%, left 2px top 48%, left 2px top 66%, left 2px top 66%, left 2px top 82%, left 10px top calc(34% - 3px), left 13px top calc(34% - 3px), left 10px top calc(62% - 3px), left 10px top calc(85% - 3px), left 13px top calc(85% - 3px), left 16px top calc(85% - 3px); 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__lod, .naglowek__teczka, .hero__lod, .hero__teczka, .hero__zanik, .stopka__plyta, .stopka__teczka { 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, .zapowiedz::before, .stopka__znak::after, .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%), 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; } }