/* ===================================================================== fotowoltaika.mragowo.pl — MAKIETA PREMIUM „KOPERTA WIDOKOWA: OBRYS ZŁOŻONY Z KIERUNKÓW” --------------------------------------------------------------------- Teza serwisu (teczka-widoku-i-krajobrazu): „Po połączeniu punktów obserwacji przygotuj «kopertę widokową»: LISTĘ KIERUNKÓW, z których rozważane miejsce jest widoczne W CAŁOŚCI, CZĘŚCIOWO albo NIE ZOSTAŁO ROZPOZNANE. […] Sformułowanie «niewidoczne» stosuj TYLKO DO DANEGO PUNKTU I WARUNKÓW, NIE DO CAŁEGO OTOCZENIA”; index „Trzy statusy zamiast pochopnego werdyktu”, „Nie używaj statusu «brak ograniczeń»”. Rysunek (zmierzony): jeden obrys 900×300 wokół miejsca, ale jego WŁASNA KRAWĘDŹ ma trzy jakości — sześć odcinków grubych (7 px, widoczne w całości), cztery cienkie (2,5 px, częściowo) i sześć PRZERW (nierozpoznane, najkrótsza 55 px). Każdy odcinek ma inną długość. W środku jeden pełny znak 30×30 — miejsce; nic go z krawędzią nie łączy, bo kierunki nie są promieniami. Przerwa nie znaczy „niewidoczne”, znaczy „tu jeszcze nie patrzono”. ⚠⚠ CZEGO TU NIE MA (i kto to ma): promieni ani sektorów wokół środka (adreswlondynie.pl), obszaru wokół obszaru z punktem rozstrzygającym (czystepowietrze.ketrzyn.pl), pełnego pola z pustymi wyspami (otofachowcy.pl), trzech obszarów o ciężkich krawędziach (contactcenterwchmurze.pl), pasów dzielonych na pełny i pusty (fotowoltaika.karpacz.pl), DWÓCH IDENTYCZNYCH OBRYSÓW (fotowoltaika.malopolska.pl — tam różni je metryka, tu jest jeden obrys o niejednorodnej krawędzi), zbiorów zachodzących (fotowoltaika.kutno.pl), warstw w stosie (betamax.pl — mimo „Pięć warstw jednej mapy” w treści). ⚠ Bez liter, cyfr, map, linii brzegowej, słońca i panelu. ⚠ UCZCIWIE O BARWIE: przestrzeń barwna serii wyczerpana (PLAN-PREMIUM, 5.09), różnicujemy KSZTAŁTEM → JAKOŚCIĄ KRESKI → JASNOŚCIĄ PŁYTY → KROJAMI. Mgła liliowa #E8E5EC jest w rodzinie PV czwartą JASNĄ płytą i jedyną o zimnym fiolecie (popiel górski beskidy #E6E4DF i siwy len iława #E7E8E4 są szare, lód kętrzyn #E3EAEE błękitny, piaskowy łuków #EDE7DC ciepły). Indygo #3C4194 sąsiaduje z fioletem dymnym fotowoltaika.czeladz.pl (#5B3E7E — różowszy, na CIEMNEJ płycie) i z błękitem stalowym fotowoltaika.karpacz.pl (#1E4C6B — zielonkawy). Zestaw: chłodna mgła + nasycone indygo. ⚠ SZKIELET przeniesiony z cieplemieszkanie.gmina.pl (jasna płyta, blog `lista-wpisow`) — inne tokeny, inne kroje, wszystkie ozdobniki własne. Kopiowanie SZKIELETU dozwolone, PROJEKTU nie. ⚠⚠ ARKUSZ RĘCZNY — nie uruchamiać motyw.py / szkielet.py --nadpisz / dokladka.py. Domena wchodzi na premium-recznie.txt. Seria ST-CBF. ⚠ KANON 2b, 9b i 9c. Naprawa 6.09: `.kroki`, `.wyliczenie`, `.zrodlo` mają `margin-inline: auto`. ⚠⚠ NAUKA 7.09 (obcięte warstwy): każda reguła podmieniająca barwę glifu musi mieć PEŁNY komplet warstw — CSS obcina listę do liczby OBRAZÓW, a `background-position` do liczby warstw. Dotyczy też wariantów `nth-child` i bloku `@media print`. Skaner: narzedzia-fable/skan-obciete-warstwy.py. ⚠ Rodzina PV (RODZINA-PV.md). ===================================================================== */ /* --- 1. TOKENY ------------------------------------------------------- */ :root { --mgla: #E8E5EC; /* płyta jasna — mgła liliowa, zimna */ --mgla-cien: #DAD5E0; --papier: #F7F5F9; --karta: #FFFFFF; --sliwka-noc: #1B1620; --sliwka-blask: #3A3244; --sliwka: #241E2A; --tekst: #1A181D; /* 14,13 / 12,22 na cieniu / 16,26 / 17,61 */ --tekst-cichy: #4C4852; /* 7,15 / 6,19 na cieniu / 8,23 */ --na-sliwce: #EDE9F0; /* 13,53 / 14,82 na nocy / 10,19 na blasku */ --na-sliwce-cichy: #B5AEBD; /* 7,54 / 8,25 / 5,67 na blasku */ /* indygo — TRZY wartości (kanon, punkt 12), policzone */ --indygo-pismo: #3C4194; /* PISMO — 7,09 / 6,13 na cieniu / 8,16 / 8,84 */ --indygo-kreska: #565CB4; /* kreski — 4,70 / 4,06 na cieniu / 5,41 / 5,86 */ --indygo-jasne: #C2C6EE; /* na ciemnych płytach — 9,74 / 10,66 / 7,33 na blasku */ --obwodka: #77727E; /* 3,75 na mgle / 4,31 / 4,67 */ --linia-cicha: #E5E1EA; --obwodka-ciemna:#8A838F; /* 4,42 na śliwce / 4,84 na nocy / 3,33 na blasku */ --kroj-naglowek: "Radley", Georgia, "Times New Roman", serif; --kroj-tekst: "Ruda", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --kroj-maszyna: "Sometype 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;} /* --- 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(--indygo-jasne); color: var(--sliwka-noc); } :focus-visible { outline: 3px solid var(--indygo-pismo); outline-offset: 2px; } .stopka :focus-visible { outline-color: var(--indygo-jasne); } /* ⚠ 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(--indygo-pismo); color: var(--karta); font-weight: 600; text-decoration: none; } .omin:focus { inset-inline-start: 0; } /* --- 2b. MGŁA 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(--mgla); } /* --- 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__mgla { position: absolute; z-index: 0; inset: 0; background-color: var(--mgla); background-image: linear-gradient(180deg, var(--mgla) 0%, var(--mgla-cien) 100%); } /* wzdłuż dolnej krawędzi: miniatura koperty — krawędź z przerwami i pełny znak miejsca w środku; 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__koperta { position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 0; height: 13px; background-image: linear-gradient(90deg, transparent 0 2px, var(--indygo-kreska) 2px 20px, transparent 20px), linear-gradient(90deg, transparent 0 26px, var(--indygo-kreska) 26px 50px, transparent 50px), linear-gradient(90deg, transparent 0 2px, var(--indygo-kreska) 2px 16px, transparent 16px), linear-gradient(90deg, transparent 0 24px, var(--indygo-kreska) 24px 52px, transparent 52px), linear-gradient(90deg, transparent 0 2px, var(--indygo-kreska) 2px 4px, transparent 4px), linear-gradient(90deg, transparent 0 50px, var(--indygo-kreska) 50px 52px, transparent 52px), linear-gradient(90deg, transparent 0 25px, var(--indygo-kreska) 25px 31px, transparent 31px); background-size: 56px 2px, 56px 1px, 56px 2px, 56px 1px, 56px 6px, 56px 5px, 56px 3px; background-position: left 0px top 0px, left 0px top 0px, left 0px bottom 0px, left 0px bottom 0px, left 0px top 2px, left 0px bottom 2px, left 0px top 5px; background-repeat: repeat-x; opacity: .85; } /* ⚠ To jest KONTENER nagłówka z HTML generatora — nazwa `naglowek__pas` jest zajęta przez HTML, warstwa ozdobna nazywa się `naglowek__koperta`. */ .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: koperta w miniaturze — krawędź z przerwą, znak w środku */ .znak__koperta { flex: none; width: 34px; height: 14px; background-image: linear-gradient(90deg, var(--indygo-kreska) 0 100%), linear-gradient(90deg, var(--indygo-kreska) 0 100%), linear-gradient(180deg, var(--indygo-kreska) 0 100%), linear-gradient(90deg, var(--indygo-kreska) 0 100%), linear-gradient(90deg, var(--indygo-kreska) 0 100%), linear-gradient(180deg, var(--indygo-kreska) 0 100%), linear-gradient(90deg, var(--indygo-kreska) 0 100%); background-size: 17px 2px, 11px 1px, 2px 9px, 17px 2px, 11px 1px, 2px 9px, 5px 3px; background-position: left 0px bottom 12px, left 23px bottom 13px, left 32px bottom 0px, left 0px bottom 0px, left 23px bottom 0px, left 0px bottom 0px, left 14px bottom 5px; 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(--indygo-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(--indygo-pismo); } /* pozycja bieżąca: pod napisem koperta — krawędź z przerwami i znak w środku. ⚠⚠ 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(--indygo-kreska) 0 100%), linear-gradient(90deg, var(--indygo-kreska) 0 100%), linear-gradient(90deg, var(--indygo-kreska) 0 100%), linear-gradient(90deg, var(--indygo-kreska) 0 100%), linear-gradient(180deg, var(--indygo-kreska) 0 100%), linear-gradient(180deg, var(--indygo-kreska) 0 100%), linear-gradient(90deg, var(--indygo-kreska) 0 100%); background-size: 40% 2px, 34% 1px, 30% 2px, 44% 1px, 2px 6px, 2px 5px, 6px 3px; background-position: left 0px top 0px, right 0px top 0px, left 0px bottom 0px, right 0px bottom 0px, left 0px top 0px, right 0px bottom 0px, left 47% top 4px; background-repeat: no-repeat; } /* --- 5. HERO — koperta widokowa ------------------------------------ */ .hero { overflow: hidden; padding-block: clamp(2.6rem, 1.6rem + 4vw, 6rem) clamp(3rem, 1.8rem + 4.4vw, 6.6rem); background: var(--mgla); border-block-end: 1px solid var(--linia-cicha); } .hero__mgla { position: absolute; z-index: 0; inset: 0; background-color: var(--mgla); background-image: radial-gradient(62% 68% at 88% 12%, var(--mgla-cien) 0%, rgba(218, 213, 224, 0) 66%), linear-gradient(170deg, var(--mgla) 0%, var(--mgla-cien) 100%); } /* Rysunek jest CIEMNY na jasnym, więc pracuje przy niskim kryciu — ma nie konkurować z tytułem. Kreska cienka (2,5 px) musi zostać widoczna. */ .hero__koperta { position: absolute; z-index: 1; /* ⚠ Rysunek W CAŁOŚCI w kadrze (cały obrys razem z przerwami i znakiem w środku), obok kolumny, nie pod nią (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(--indygo-pismo); opacity: .6; } .hero__koperta 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(--mgla) 0%, rgba(232, 229, 236, .94) 30%, rgba(232, 229, 236, .2) 50%, rgba(232, 229, 236, 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__koperta { inset-block-start: 0; inset-inline-end: 4%; width: clamp(16rem, 74vw, 34rem); transform: none; opacity: .38; } .hero__zanik { background: linear-gradient(180deg, rgba(232, 229, 236, 0) 0%, rgba(232, 229, 236, 0) 22%, rgba(231, 232, 233, .9) 40%, rgba(231, 232, 233, .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: koperta w dużej skali — krawędź z przerwami i znak w środku. ⚠ Pudełko ma stałą wysokość w px, więc przesunięcia w px. */ .hero .tytul::before { content: ""; display: block; width: 132px; height: 30px; margin-block-end: clamp(1rem, .7rem + .8vw, 1.7rem); background-image: linear-gradient(90deg, var(--indygo-kreska) 0 100%), linear-gradient(90deg, var(--indygo-kreska) 0 100%), linear-gradient(90deg, var(--indygo-kreska) 0 100%), linear-gradient(180deg, var(--indygo-kreska) 0 100%), linear-gradient(180deg, var(--indygo-kreska) 0 100%), linear-gradient(90deg, var(--indygo-kreska) 0 100%), linear-gradient(90deg, var(--indygo-kreska) 0 100%), linear-gradient(90deg, var(--indygo-kreska) 0 100%), linear-gradient(180deg, var(--indygo-kreska) 0 100%), linear-gradient(180deg, var(--indygo-kreska) 0 100%), linear-gradient(90deg, var(--indygo-kreska) 0 100%); background-size: 21px 3px, 31px 1px, 62px 3px, 1px 10px, 3px 14px, 44px 3px, 37px 1px, 26px 3px, 3px 12px, 1px 12px, 8px 6px; background-position: left 0px bottom 27px, left 31px bottom 29px, left 70px bottom 27px, left 131px bottom 14px, left 129px bottom 0px, left 0px bottom 0px, left 57px bottom 0px, left 106px bottom 0px, left 0px bottom 18px, left 0px bottom 6px, left 62px bottom 12px; 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(--indygo-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(--sliwka-noc); background-image: linear-gradient(180deg, var(--sliwka-blask) 0%, var(--sliwka-noc) 62%); color: var(--na-sliwce); } .pasmo:last-of-type:not(:nth-of-type(1))::before { background: var(--indygo-jasne); 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-sliwce-cichy); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2 { color: var(--na-sliwce); } /* ⚠⚠ 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-sliwce); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zajawka { color: var(--na-sliwce-cichy); border-inline-start-color: var(--indygo-jasne); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk) { color: var(--indygo-jasne); text-decoration-color: var(--indygo-jasne); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk):hover { color: var(--na-sliwce); } /* --- 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 KOPERTĄ — krawędź z przerwami, znak w środku. ⚠ Pudełko ma stałą wysokość w px u dołu (padding 12 px), więc przesunięcia ozdobnika w 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(--indygo-kreska) 0 100%), linear-gradient(90deg, var(--indygo-kreska) 0 100%), linear-gradient(180deg, var(--indygo-kreska) 0 100%), linear-gradient(90deg, var(--indygo-kreska) 0 100%), linear-gradient(90deg, var(--indygo-kreska) 0 100%), linear-gradient(180deg, var(--indygo-kreska) 0 100%), linear-gradient(90deg, var(--indygo-kreska) 0 100%); background-size: 22px 2px, 15px 1px, 2px 8px, 22px 2px, 15px 1px, 2px 8px, 5px 3px; background-position: left 0px bottom 10px, left 29px bottom 11px, left 42px bottom 0px, left 0px bottom 0px, left 29px bottom 0px, left 0px bottom 0px, left 19px bottom 4px; background-repeat: no-repeat; font-family: var(--kroj-maszyna); font-weight: 400; font-size: .74rem; letter-spacing: -.01em; color: var(--indygo-pismo); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2::before { color: var(--indygo-jasne); background-image: linear-gradient(90deg, var(--indygo-jasne) 0 100%), linear-gradient(90deg, var(--indygo-jasne) 0 100%), linear-gradient(180deg, var(--indygo-jasne) 0 100%), linear-gradient(90deg, var(--indygo-jasne) 0 100%), linear-gradient(90deg, var(--indygo-jasne) 0 100%), linear-gradient(180deg, var(--indygo-jasne) 0 100%), linear-gradient(90deg, var(--indygo-jasne) 0 100%); background-size: 22px 2px, 15px 1px, 2px 8px, 22px 2px, 15px 1px, 2px 8px, 5px 3px; background-position: left 0px bottom 10px, left 29px bottom 11px, left 42px bottom 0px, left 0px bottom 0px, left 29px bottom 0px, left 0px bottom 0px, left 19px bottom 4px; 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(--indygo-kreska); color: var(--tekst-cichy); font-size: clamp(1.01rem, .96rem + .28vw, 1.16rem); } .tresc p a:not(.przycisk) { color: var(--indygo-pismo); text-decoration-line: underline; text-decoration-color: var(--indygo-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 droga sprawy po kolei — numer nad pasem z oknem. WYLICZENIE to rzeczy do sprawdzenia — PRZERWA w innym miejscu co pozycję: każdy nabór jest gdzie indziej. ⚠ 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: 2rem; padding-inline: .35rem; padding-block-end: 13px; background-image: linear-gradient(90deg, var(--indygo-kreska) 0 100%), linear-gradient(90deg, var(--indygo-kreska) 0 100%), linear-gradient(180deg, var(--indygo-kreska) 0 100%), linear-gradient(90deg, var(--indygo-kreska) 0 100%), linear-gradient(90deg, var(--indygo-kreska) 0 100%), linear-gradient(180deg, var(--indygo-kreska) 0 100%), linear-gradient(90deg, var(--indygo-kreska) 0 100%); background-size: 18px 2px, 12px 1px, 2px 8px, 18px 2px, 12px 1px, 2px 8px, 5px 3px; background-position: left 0px bottom 10px, left 24px bottom 11px, left 34px bottom 0px, left 0px bottom 0px, left 24px bottom 0px, left 0px bottom 0px, left 15px bottom 4px; background-repeat: no-repeat; color: var(--indygo-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(--indygo-jasne); background-image: linear-gradient(90deg, var(--indygo-jasne) 0 100%), linear-gradient(90deg, var(--indygo-jasne) 0 100%), linear-gradient(180deg, var(--indygo-jasne) 0 100%), linear-gradient(90deg, var(--indygo-jasne) 0 100%), linear-gradient(90deg, var(--indygo-jasne) 0 100%), linear-gradient(180deg, var(--indygo-jasne) 0 100%), linear-gradient(90deg, var(--indygo-jasne) 0 100%); background-size: 18px 2px, 12px 1px, 2px 8px, 18px 2px, 12px 1px, 2px 8px, 5px 3px; background-position: left 0px bottom 10px, left 24px bottom 11px, left 34px bottom 0px, left 0px bottom 0px, left 24px bottom 0px, left 0px bottom 0px, left 15px bottom 4px; 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: 1.9rem; } /* znacznik: koperta 30×12. ⚠ Co pozycję PRZERWA jest w innym miejscu obrysu — nierozpoznany kierunek nie zawsze leży po tej samej stronie. */ .tresc .wyliczenie li::before { content: ""; position: absolute; inset-block-start: .5em; inset-inline-start: 0; width: 30px; height: 12px; background-image: linear-gradient(90deg, var(--indygo-kreska) 0 100%), linear-gradient(90deg, var(--indygo-kreska) 0 100%), linear-gradient(180deg, var(--indygo-kreska) 0 100%), linear-gradient(90deg, var(--indygo-kreska) 0 100%), linear-gradient(90deg, var(--indygo-kreska) 0 100%), linear-gradient(180deg, var(--indygo-kreska) 0 100%), linear-gradient(90deg, var(--indygo-kreska) 0 100%); background-size: 15px 2px, 10px 1px, 2px 8px, 15px 2px, 10px 1px, 2px 8px, 4px 3px; background-position: left 0px bottom 10px, left 20px bottom 11px, left 28px bottom 0px, left 0px bottom 0px, left 20px bottom 0px, left 0px bottom 0px, left 13px bottom 4px; background-repeat: no-repeat; } .tresc .wyliczenie li:nth-child(3n+2)::before { background-image: linear-gradient(90deg, var(--indygo-kreska) 0 100%), linear-gradient(90deg, var(--indygo-kreska) 0 100%), linear-gradient(180deg, var(--indygo-kreska) 0 100%), linear-gradient(90deg, var(--indygo-kreska) 0 100%), linear-gradient(90deg, var(--indygo-kreska) 0 100%), linear-gradient(180deg, var(--indygo-kreska) 0 100%), linear-gradient(90deg, var(--indygo-kreska) 0 100%); background-size: 10px 1px, 15px 2px, 2px 8px, 10px 1px, 15px 2px, 2px 8px, 4px 3px; background-position: left 0px bottom 11px, left 15px bottom 10px, left 28px bottom 4px, left 0px bottom 0px, left 15px bottom 0px, left 0px bottom 4px, left 13px bottom 4px; background-repeat: no-repeat;} .tresc .wyliczenie li:nth-child(3n)::before { background-image: linear-gradient(90deg, var(--indygo-kreska) 0 100%), linear-gradient(90deg, var(--indygo-kreska) 0 100%), linear-gradient(180deg, var(--indygo-kreska) 0 100%), linear-gradient(90deg, var(--indygo-kreska) 0 100%), linear-gradient(90deg, var(--indygo-kreska) 0 100%), linear-gradient(180deg, var(--indygo-kreska) 0 100%), linear-gradient(90deg, var(--indygo-kreska) 0 100%); background-size: 12px 2px, 12px 1px, 2px 8px, 12px 2px, 12px 1px, 2px 8px, 4px 3px; background-position: left 6px bottom 10px, left 18px bottom 11px, left 28px bottom 4px, left 6px bottom 0px, left 18px bottom 0px, left 0px bottom 4px, left 13px bottom 4px; background-repeat: no-repeat;} .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wyliczenie li::before { background-image: linear-gradient(90deg, var(--indygo-jasne) 0 100%), linear-gradient(90deg, var(--indygo-jasne) 0 100%), linear-gradient(180deg, var(--indygo-jasne) 0 100%), linear-gradient(90deg, var(--indygo-jasne) 0 100%), linear-gradient(90deg, var(--indygo-jasne) 0 100%), linear-gradient(180deg, var(--indygo-jasne) 0 100%), linear-gradient(90deg, var(--indygo-jasne) 0 100%); background-size: 15px 2px, 10px 1px, 2px 8px, 15px 2px, 10px 1px, 2px 8px, 4px 3px; background-position: left 0px bottom 10px, left 20px bottom 11px, left 28px bottom 0px, left 0px bottom 0px, left 20px bottom 0px, left 0px bottom 0px, left 13px bottom 4px; 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(--indygo-pismo); text-decoration-line: underline; text-decoration-color: var(--indygo-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(--indygo-jasne); text-decoration-color: var(--indygo-jasne); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wyliczenie li:nth-child(3n+2)::before { background-image: linear-gradient(90deg, var(--indygo-jasne) 0 100%), linear-gradient(90deg, var(--indygo-jasne) 0 100%), linear-gradient(180deg, var(--indygo-jasne) 0 100%), linear-gradient(90deg, var(--indygo-jasne) 0 100%), linear-gradient(90deg, var(--indygo-jasne) 0 100%), linear-gradient(180deg, var(--indygo-jasne) 0 100%), linear-gradient(90deg, var(--indygo-jasne) 0 100%); background-size: 10px 1px, 15px 2px, 2px 8px, 10px 1px, 15px 2px, 2px 8px, 4px 3px; background-position: left 0px bottom 11px, left 15px bottom 10px, left 28px bottom 4px, left 0px bottom 0px, left 15px bottom 0px, left 0px bottom 4px, left 13px bottom 4px; background-repeat: no-repeat;} .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wyliczenie li:nth-child(3n)::before { background-image: linear-gradient(90deg, var(--indygo-jasne) 0 100%), linear-gradient(90deg, var(--indygo-jasne) 0 100%), linear-gradient(180deg, var(--indygo-jasne) 0 100%), linear-gradient(90deg, var(--indygo-jasne) 0 100%), linear-gradient(90deg, var(--indygo-jasne) 0 100%), linear-gradient(180deg, var(--indygo-jasne) 0 100%), linear-gradient(90deg, var(--indygo-jasne) 0 100%); background-size: 12px 2px, 12px 1px, 2px 8px, 12px 2px, 12px 1px, 2px 8px, 4px 3px; background-position: left 6px bottom 10px, left 18px bottom 11px, left 28px bottom 4px, left 6px bottom 0px, left 18px bottom 0px, left 0px bottom 4px, left 13px bottom 4px; background-repeat: no-repeat;} .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(--indygo-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(230, 239, 233, .07); color: var(--na-sliwce-cichy); border-color: var(--obwodka-ciemna); border-inline-start-color: var(--indygo-jasne); } /* --- 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(--sliwka-noc); border-color: var(--sliwka-noc); color: var(--na-sliwce); } .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(--indygo-jasne); color: var(--na-sliwce); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .przejscie a:hover { background: var(--indygo-jasne); border-color: var(--indygo-jasne); color: var(--sliwka-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(--indygo-pismo); color: var(--karta); border: 2px solid var(--indygo-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(--sliwka-noc); border-color: var(--sliwka-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(--indygo-jasne); color: var(--sliwka-noc); border-color: var(--indygo-jasne); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .cta a.przycisk:hover { background: var(--na-sliwce); border-color: var(--na-sliwce); } /* --- 11. KARTY KATALOGU — PAS Z OKNEM 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: koperta — krawędź z przerwami, znak w środku */ .zapowiedz::before { content: ""; position: absolute; inset-block-start: -1px; inset-inline-start: clamp(1.2rem, .9rem + 1vw, 1.8rem); width: 84px; height: 12px; background-image: linear-gradient(90deg, var(--indygo-kreska) 0 100%), linear-gradient(90deg, var(--indygo-kreska) 0 100%), linear-gradient(90deg, var(--indygo-kreska) 0 100%), linear-gradient(180deg, var(--indygo-kreska) 0 100%), linear-gradient(180deg, var(--indygo-kreska) 0 100%), linear-gradient(90deg, var(--indygo-kreska) 0 100%), linear-gradient(90deg, var(--indygo-kreska) 0 100%), linear-gradient(90deg, var(--indygo-kreska) 0 100%), linear-gradient(180deg, var(--indygo-kreska) 0 100%), linear-gradient(180deg, var(--indygo-kreska) 0 100%), linear-gradient(90deg, var(--indygo-kreska) 0 100%); background-size: 13px 2px, 20px 1px, 39px 2px, 1px 4px, 2px 6px, 28px 2px, 23px 1px, 17px 2px, 2px 5px, 1px 5px, 6px 4px; background-position: left 0px bottom 10px, left 20px bottom 11px, left 45px bottom 10px, left 83px bottom 6px, left 82px bottom 0px, left 0px bottom 0px, left 36px bottom 0px, left 67px bottom 0px, left 0px bottom 7px, left 0px bottom 2px, left 39px bottom 4px; 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(--indygo-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(--indygo-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(--indygo-pismo); font-weight: 600; font-size: .95rem; border-block-end: 2px solid var(--indygo-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(--indygo-kreska); border-radius: 0; padding: 0 .1rem; min-height: 44px; color: var(--indygo-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(--sliwka-noc); color: var(--na-sliwce); } .stopka__plyta { position: absolute; z-index: 0; inset: 0; background-color: var(--sliwka-noc); background-image: radial-gradient(66% 128% at 88% 100%, var(--sliwka-blask) 0%, rgba(44, 68, 54, 0) 64%), linear-gradient(180deg, var(--sliwka-blask) 0%, var(--sliwka-noc) 58%); } .stopka__koperta { position: absolute; z-index: 1; inset-inline: 0; inset-block-start: 0; height: 13px; background-image: linear-gradient(90deg, transparent 0 2px, var(--indygo-jasne) 2px 20px, transparent 20px), linear-gradient(90deg, transparent 0 26px, var(--indygo-jasne) 26px 50px, transparent 50px), linear-gradient(90deg, transparent 0 2px, var(--indygo-jasne) 2px 16px, transparent 16px), linear-gradient(90deg, transparent 0 24px, var(--indygo-jasne) 24px 52px, transparent 52px), linear-gradient(90deg, transparent 0 2px, var(--indygo-jasne) 2px 4px, transparent 4px), linear-gradient(90deg, transparent 0 50px, var(--indygo-jasne) 50px 52px, transparent 52px), linear-gradient(90deg, transparent 0 25px, var(--indygo-jasne) 25px 31px, transparent 31px); background-size: 56px 2px, 56px 1px, 56px 2px, 56px 1px, 56px 6px, 56px 5px, 56px 3px; background-position: left 0px top 0px, left 0px top 0px, left 0px bottom 0px, left 0px bottom 0px, left 0px top 2px, left 0px bottom 2px, left 0px top 5px; background-repeat: repeat-x; opacity: .5; } .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-sliwce); } /* pod znakiem stopki: ta sama koperta w barwie jasnej */ .stopka__znak::after { content: ""; display: block; width: 84px; height: 13px; margin-block-start: .6rem; background-image: linear-gradient(90deg, var(--indygo-jasne) 0 100%), linear-gradient(90deg, var(--indygo-jasne) 0 100%), linear-gradient(90deg, var(--indygo-jasne) 0 100%), linear-gradient(180deg, var(--indygo-jasne) 0 100%), linear-gradient(180deg, var(--indygo-jasne) 0 100%), linear-gradient(90deg, var(--indygo-jasne) 0 100%), linear-gradient(90deg, var(--indygo-jasne) 0 100%), linear-gradient(90deg, var(--indygo-jasne) 0 100%), linear-gradient(180deg, var(--indygo-jasne) 0 100%), linear-gradient(180deg, var(--indygo-jasne) 0 100%), linear-gradient(90deg, var(--indygo-jasne) 0 100%); background-size: 13px 2px, 20px 1px, 39px 2px, 1px 4px, 2px 6px, 28px 2px, 23px 1px, 17px 2px, 2px 5px, 1px 5px, 6px 4px; background-position: left 0px bottom 11px, left 20px bottom 12px, left 45px bottom 11px, left 83px bottom 6px, left 82px bottom 0px, left 0px bottom 0px, left 36px bottom 0px, left 67px bottom 0px, left 0px bottom 8px, left 0px bottom 3px, left 39px bottom 4px; 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-sliwce-cichy); text-decoration: none; font-family: var(--kroj-maszyna); font-size: .78rem; letter-spacing: -.01em; } .stopka__menu a:hover { color: var(--indygo-jasne); text-decoration: underline; text-underline-offset: .3em; } /* --- 13. SZEROKIE EKRANY — PIONOWY PAS Z OKNEM ------------------------ ⚠⚠ 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; } /* KOPERTA OBRÓCONA: krawędzie pionowe z przerwami, znak miejsca pośrodku */ .pasmo > .kontener::after { content: ""; grid-column: proza-end / pelna-end; grid-row: 2; justify-self: start; align-self: stretch; width: 1.5rem; min-height: 5rem; background-image: linear-gradient(180deg, var(--indygo-kreska) 0 100%), linear-gradient(180deg, var(--indygo-kreska) 0 100%), linear-gradient(180deg, var(--indygo-kreska) 0 100%), linear-gradient(180deg, var(--indygo-kreska) 0 100%), linear-gradient(180deg, var(--indygo-kreska) 0 100%), linear-gradient(90deg, var(--indygo-kreska) 0 100%), linear-gradient(90deg, var(--indygo-kreska) 0 100%), linear-gradient(90deg, var(--indygo-kreska) 0 100%); background-size: 2px 26%, 1px 22%, 2px 30%, 2px 34%, 1px 24%, 16px 2px, 10px 2px, 6px 4px; background-position: left 2px top 6%, left 2px top 40%, left 2px top 68%, right 2px top 10%, right 2px top 58%, left 2px top 6%, right 2px bottom 2%, left 9px top 48%; background-repeat: no-repeat; } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener::after { background-image: linear-gradient(180deg, var(--indygo-jasne) 0 100%), linear-gradient(180deg, var(--indygo-jasne) 0 100%), linear-gradient(180deg, var(--indygo-jasne) 0 100%), linear-gradient(180deg, var(--indygo-jasne) 0 100%), linear-gradient(180deg, var(--indygo-jasne) 0 100%), linear-gradient(90deg, var(--indygo-jasne) 0 100%), linear-gradient(90deg, var(--indygo-jasne) 0 100%), linear-gradient(90deg, var(--indygo-jasne) 0 100%); background-size: 2px 26%, 1px 22%, 2px 30%, 2px 34%, 1px 24%, 16px 2px, 10px 2px, 6px 4px; background-position: left 2px top 6%, left 2px top 40%, left 2px top 68%, right 2px top 10%, right 2px top 58%, left 2px top 6%, right 2px bottom 2%, left 9px top 48%; 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__mgla, .naglowek__koperta, .hero__mgla, .hero__koperta, .hero__zanik, .stopka__plyta, .stopka__koperta { 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; background-image: linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(180deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(180deg, #000 0 100%), linear-gradient(90deg, #000 0 100%) !important; background-size: 22px 2px, 15px 1px, 2px 8px, 22px 2px, 15px 1px, 2px 8px, 5px 3px !important; background-position: left 0px bottom 10px, left 29px bottom 11px, left 42px bottom 0px, left 0px bottom 0px, left 29px bottom 0px, left 0px bottom 0px, left 19px bottom 4px !important; background-repeat: no-repeat !important; } .tresc .kroki li::before { color: #000 !important; background-image: linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(180deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(180deg, #000 0 100%), linear-gradient(90deg, #000 0 100%) !important; background-size: 18px 2px, 12px 1px, 2px 8px, 18px 2px, 12px 1px, 2px 8px, 5px 3px !important; background-position: left 0px bottom 10px, left 24px bottom 11px, left 34px bottom 0px, left 0px bottom 0px, left 24px bottom 0px, left 0px bottom 0px, left 15px bottom 4px !important; background-repeat: no-repeat !important; } .tresc .wyliczenie li::before { background-image: linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(180deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(180deg, #000 0 100%), linear-gradient(90deg, #000 0 100%) !important; background-size: 15px 2px, 10px 1px, 2px 8px, 15px 2px, 10px 1px, 2px 8px, 4px 3px !important; background-position: left 0px bottom 10px, left 20px bottom 11px, left 28px bottom 0px, left 0px bottom 0px, left 20px bottom 0px, left 0px bottom 0px, left 13px bottom 4px !important; background-repeat: no-repeat !important; } .tresc .wyliczenie li:nth-child(3n+2)::before { background-image: linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(180deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(180deg, #000 0 100%), linear-gradient(90deg, #000 0 100%) !important; background-size: 10px 1px, 15px 2px, 2px 8px, 10px 1px, 15px 2px, 2px 8px, 4px 3px !important; background-position: left 0px bottom 11px, left 15px bottom 10px, left 28px bottom 4px, left 0px bottom 0px, left 15px bottom 0px, left 0px bottom 4px, left 13px bottom 4px !important; background-repeat: no-repeat !important; } .tresc .wyliczenie li:nth-child(3n)::before { background-image: linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(180deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(180deg, #000 0 100%), linear-gradient(90deg, #000 0 100%) !important; background-size: 12px 2px, 12px 1px, 2px 8px, 12px 2px, 12px 1px, 2px 8px, 4px 3px !important; background-position: left 6px bottom 10px, left 18px bottom 11px, left 28px bottom 4px, left 6px bottom 0px, left 18px bottom 0px, left 0px bottom 4px, left 13px bottom 4px !important; background-repeat: no-repeat !important; } .zapowiedz::before { background-image: linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(180deg, #000 0 100%), linear-gradient(180deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(180deg, #000 0 100%), linear-gradient(180deg, #000 0 100%), linear-gradient(90deg, #000 0 100%) !important; background-size: 13px 2px, 20px 1px, 39px 2px, 1px 4px, 2px 6px, 28px 2px, 23px 1px, 17px 2px, 2px 5px, 1px 5px, 6px 4px !important; background-position: left 0px bottom 10px, left 20px bottom 11px, left 45px bottom 10px, left 83px bottom 6px, left 82px bottom 0px, left 0px bottom 0px, left 36px bottom 0px, left 67px bottom 0px, left 0px bottom 7px, left 0px bottom 2px, left 39px bottom 4px !important; background-repeat: no-repeat !important; } .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(180deg, #000 0 100%), linear-gradient(180deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(180deg, #000 0 100%), linear-gradient(180deg, #000 0 100%), linear-gradient(90deg, #000 0 100%) !important; background-size: 13px 2px, 20px 1px, 39px 2px, 1px 4px, 2px 6px, 28px 2px, 23px 1px, 17px 2px, 2px 5px, 1px 5px, 6px 4px !important; background-position: left 0px bottom 11px, left 20px bottom 12px, left 45px bottom 11px, left 83px bottom 6px, left 82px bottom 0px, left 0px bottom 0px, left 36px bottom 0px, left 67px bottom 0px, left 0px bottom 8px, left 0px bottom 3px, left 39px bottom 4px !important; background-repeat: no-repeat !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; } }