/* ===================================================================== fotowoltaika.ostroda.pl — MAKIETA PREMIUM „ZAMROŻONA PODSTAWA O SIEDMIU POLACH, NA NIEJ TRZY RÓŻNE KONSTRUKCJE” --------------------------------------------------------------------- Teza serwisu stoi w trzech jego nagłówkach naraz: „Porównaj koncepcje fotowoltaiki NA WSPÓLNYCH ZAŁOŻENIACH”, „NAJPIERW ZAMROŹ PAKIET WEJŚCIOWY”, „SIEDEM PÓL WSPÓLNEGO MIANOWNIKA”. Domyka ją czwarty: „WYNIK BEZ POZORNEGO RANKINGU”. Rysunek (zmierzony): JEDNA pełna podstawa 920 px podzielona na SIEDEM pól, ZACIŚNIĘTA KLAMRAMI NA OBU KOŃCACH. Nad nią trzy konstrukcje, które różnią się BUDOWĄ, nie wysokością: trzy belki o malejącej szerokości, jeden wysoki pusty obrys z przegrodą, pięć małych kwadratów w dwóch rzędach. Wszystkie stoją na TEJ SAMEJ podstawie. ⚠⚠ KLAMRY SĄ SEDNEM. Bez nich rysunek mówi „wspólna podstawa”; z nimi mówi „ZAMROŻONA podstawa”, a to jest zdanie serwisu: pakiet wejściowy najpierw się zamraża, potem porównuje. ⚠⚠ TO ODWROTNOŚĆ fotowoltaika.czeladz.pl („CZTERY ODPOWIEDZI NA CZTERECH OSOBNYCH PODSTAWACH”) — świadoma, nie zbliżenie. Tam teza brzmi „pięć kart, których nie należy scalać”, tu dokładnie przeciwnie: jedna podstawa pod wszystkim. Widz, który zobaczy obie strony, odczyta różnicę od razu. ⚠⚠ ŻADNEGO RANKINGU, PODIUM, GWIAZDEK, PUNKTACJI ANI STRZAŁKI W GÓRĘ — „wynik bez pozornego rankingu”, „cztery statusy zamiast punktów”. ⚠ Bez cyfr i jednostek (kanon, punkt 13). Bez panelu, modułu, dachu, słońca, falownika i wtyku — zakaz całej rodziny PV. Bez lodu, płatka i szronu przy słowie „zamroź”: zamrożenie pokazują KLAMRY. Pełny zapis: PROJEKT-PREMIUM.md. ⚠ UCZCIWIE O BARWIE: wino #241A1F to jedyna czerwono-brunatna ciemna płyta w rodzinie PV; najbliższy węgiel brunatny czeladz.pl jest wyraźnie mniej czerwony. Szron liliowy #CDB8DE sąsiaduje z lawendą pomowienia.pl (rodzina RYZYKO) — jest bardziej szary i mniej niebieski; w rodzinie PV żaden akcent nie jest liliowy. ⚠ FRAGMENT MONO zamówiony w jednej wadze (400) — pismo maszynowe wszędzie 400, nigdy 500. ⚠ SZKIELET przeniesiony z otocertyfikat.pl; ozdobniki i tokeny 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. ⚠ KANON 9b i 9c: odsyłacz w wykazie ma cel dotykowy 44 px I barwę. ⚠ KANON 2c: h3 i .zajawka mają własną barwę na ciemnym paśmie. ===================================================================== */ /* --- 1. TOKENY ------------------------------------------------------- */ :root { --wino: #241A1F; --wino-noc: #181114; --wino-blask: #3C2E34; --papier: #F4F2F3; --karta: #FFFFFF; --tekst: #1D181A; /* 15,73 / 17,53 */ --tekst-cichy: #4F4750; /* 8,02 / 8,94 */ --na-winie: #EDE8EB; /* 13,96 / 15,36 / 10,62 na blasku */ --na-winie-cichy: #B4A9B0; /* 7,44 / 8,19 / 5,66 na blasku */ /* szron liliowy — TRZY wartości (kanon, punkt 12), policzone */ --szron-pismo: #5A3D6E; /* PISMO — 8,10 / 9,02 */ --szron-kreska: #8B6BA6; /* kreski — 3,97 / 4,42 (na blasku 2,91 — patrz sekcja 8) */ --szron-jasny: #CDB8DE; /* na płytach — 9,26 / 10,19 / 7,05 na blasku */ --obwodka: #7E767B; /* 3,95 / 4,41 */ --linia-cicha: #E3DEE2; --obwodka-ciemna:#8A8187; /* 4,48 na winie / 4,93 na nocy / 3,41 na blasku */ --kroj-naglowek: "Bodoni Moda", Georgia, "Times New Roman", serif; --kroj-tekst: "Geologica", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --kroj-maszyna: "Fragment 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: 4px; --cien-karta: 0 16px 34px -28px rgba(36, 26, 31, .5); } /* --- 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(--szron-jasny); color: var(--wino); } :focus-visible { outline: 3px solid var(--szron-pismo); outline-offset: 2px; } .naglowek :focus-visible, .hero :focus-visible, .stopka :focus-visible { outline-color: var(--szron-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(--szron-jasny); color: var(--wino); font-weight: 600; text-decoration: none; } .omin:focus { inset-inline-start: 0; } /* --- 2b. PŁYTY ------------------------------------------------------- */ .naglowek, .hero { position: relative; isolation: isolate; color: var(--na-winie); } .naglowek { background: var(--wino); } /* --- 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; } .pasmo > .kontener > .lista-wpisow { max-width: var(--kolumna-szeroka); } /* --- 4. NAGŁÓWEK ----------------------------------------------------- */ .naglowek__plyta { position: absolute; z-index: 0; inset: 0; background-color: var(--wino); background-image: linear-gradient(180deg, var(--wino-noc) 0%, var(--wino) 62%, var(--wino-blask) 100%); } /* wzdłuż dolnej krawędzi: ZAMROŻONA PODSTAWA — pola o okresie 24 px, a co 168 px KLAMRA (słupek z dwiema szczękami). 168 / 24 = DOKŁADNIE SIEDEM PÓL między klamrami; to jedyne miejsce w makiecie, gdzie liczbę pól da się policzyć wzrokiem. ⚠ Nie zmieniać żadnego z tych dwóch okresów osobno. */ .naglowek__podstawa { position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 0; height: 15px; background-image: repeating-linear-gradient(90deg, var(--szron-jasny) 0 20px, transparent 20px 24px), repeating-linear-gradient(90deg, var(--szron-jasny) 0 3px, transparent 3px 168px), repeating-linear-gradient(90deg, var(--szron-jasny) 0 11px, transparent 11px 168px), repeating-linear-gradient(90deg, var(--szron-jasny) 0 11px, transparent 11px 168px); background-size: 100% 5px, 100% 15px, 100% 3px, 100% 3px; background-position: 0 5px, 0 0, 0 0, 0 12px; background-repeat: repeat-x; opacity: .55; } .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.4rem, 1rem + 1vw, 2.1rem); } .znak { display: inline-flex; align-items: center; gap: .7rem; min-height: 46px; color: var(--na-winie); text-decoration: none; } /* znak rozpoznawczy: PODSTAWA W KLAMRACH, a nad nią DWA RÓŻNE elementy — belka i kwadrat. Dwa, nie trzy: w 34 px trzecia konstrukcja zlałaby się z sąsiadką. Różnica BUDOWY (pełna belka vs pusty kwadrat) zostaje. */ .znak__podstawa { flex: none; width: 34px; height: 17px; background-image: linear-gradient(90deg, var(--szron-jasny) 0 100%), linear-gradient(90deg, var(--szron-jasny) 0 100%), linear-gradient(90deg, var(--szron-jasny) 0 100%), linear-gradient(90deg, var(--szron-jasny) 0 100%), linear-gradient(90deg, var(--szron-jasny) 0 100%), linear-gradient(90deg, var(--szron-jasny) 0 100%), linear-gradient(90deg, var(--szron-jasny) 0 100%); background-size: 24px 4px, 2px 4px, 2px 4px, 3px 11px, 3px 11px, 10px 3px, 5px 5px; background-position: left 4px bottom 0px, left 11px bottom 0px, left 19px bottom 0px, left 3px bottom 0px, left 26px bottom 0px, left 7px bottom 6px, left 21px bottom 6px; background-repeat: no-repeat; } .znak__slowo { font-family: var(--kroj-naglowek); font-weight: 700; font-size: clamp(1.06rem, .94rem + .46vw, 1.38rem); letter-spacing: -.008em; } .znak:hover .znak__slowo { color: var(--szron-jasny); } .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(--na-winie-cichy); text-decoration: none; font-family: var(--kroj-maszyna); font-weight: 400; font-size: .74rem; letter-spacing: -.008em; } .menu__link:hover { color: var(--na-winie); } /* pozycja bieżąca: pod napisem PODSTAWA W KLAMRACH z dwoma podziałami pól. ⚠⚠ KANON 3b: znacznik OBOK pisma, nigdy tło pod nim. ⚠ Odstępy w PIKSELACH — pudełko ma sztywne min-height 46px (P-11). ⚠ Klamra prawa idzie składnią `right 0px`, nie `calc(100% - Xpx)`: procent w background-position NIE jest offsetem. */ .menu__link[aria-current="page"] { color: var(--na-winie); } .menu__link[aria-current="page"]::after { content: ""; position: absolute; inset-block-end: 6px; inset-inline: .5em; height: 9px; background-image: linear-gradient(90deg, var(--szron-jasny) 0 100%), linear-gradient(90deg, var(--szron-jasny) 0 100%), linear-gradient(90deg, var(--szron-jasny) 0 100%), linear-gradient(90deg, var(--szron-jasny) 0 100%), linear-gradient(90deg, var(--szron-jasny) 0 100%); background-size: 100% 4px, 3px 9px, 3px 9px, 2px 4px, 2px 4px; background-position: left 0px bottom 0px, left 0px bottom 0px, right 0px bottom 0px, left 34% bottom 0px, left 67% bottom 0px; background-repeat: no-repeat; } /* --- 5. HERO — zamrożona podstawa i trzy konstrukcje ---------------- */ .hero { overflow: hidden; padding-block: clamp(2.6rem, 1.6rem + 4vw, 6rem) clamp(3rem, 1.8rem + 4.4vw, 6.6rem); background: var(--wino); } .hero__plyta { position: absolute; z-index: 0; inset: 0; background-color: var(--wino); background-image: radial-gradient(64% 58% at 16% 4%, var(--wino-blask) 0%, rgba(60, 46, 52, 0) 62%), linear-gradient(180deg, var(--wino) 0%, var(--wino-noc) 100%); } .hero__podstawa { position: absolute; z-index: 1; /* ⚠ Rysunek W CAŁOŚCI w kadrze (OBIE KLAMRY i wszystkie trzy konstrukcje), obok kolumny, nie pod nią — szerokość liczona od 1320 do 1920 px. ⚠⚠ Obcięcie choćby jednej klamry zabiera rysunkowi znaczenie. */ inset-block-start: 50%; inset-inline-end: 2%; width: clamp(26rem, 28vw, 36rem); aspect-ratio: 980 / 232; transform: translateY(-50%); color: var(--szron-jasny); opacity: .4; } .hero__podstawa svg { width: 100%; height: 100%; } /* Scrim gaśnie na 40 procentach szerokości, a rysunek stoi w prawym torze — więc OBIE KLAMRY zostają czytelne. To warunek sensu: bez klamer rysunek mówi „wspólna podstawa”, z klamrami mówi „ZAMROŻONA podstawa”. */ .hero__scrim { position: absolute; z-index: 2; inset: 0; background: linear-gradient(96deg, rgba(24, 17, 20, .95) 0%, rgba(24, 17, 20, .86) 22%, rgba(24, 17, 20, .1) 40%, rgba(24, 17, 20, 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 scrim zaczyna się dopiero pod nim — na 390 px rysunek z boku wchodził pod akapit (zmierzone 6.09 na tej domenie, poprawka po zamknięciu). */ @media (max-width: 1319px) { .hero__kontener { padding-block-start: clamp(6rem, 26vw, 12rem); } .hero__podstawa { inset-block-start: 0; inset-inline-end: 4%; width: clamp(16rem, 74vw, 34rem); transform: none; opacity: .5; } .hero__scrim { background: linear-gradient(180deg, rgba(24, 17, 20, 0) 0%, rgba(24, 17, 20, 0) 22%, rgba(24, 17, 20, .9) 40%, rgba(24, 17, 20, .9) 100%); } } /* ⚠ Barwa jasna należy do TYTUŁU W HERO (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: -.01em; color: var(--tekst); text-wrap: balance; } .hero .tytul { color: var(--na-winie); } /* nad tytułem: PODSTAWA W KLAMRACH z trzema podziałami, a nad nią DWA RÓŻNE elementy — belka i kwadrat. Rysunek hero ma trzy konstrukcje, ten skrót ma dwie: w 7,4 rem trzecia byłaby nieczytelna, a różnica budowy zostaje. */ .hero .tytul::before { content: ""; display: block; width: 7.4rem; height: 1.5rem; margin-block-end: clamp(1rem, .7rem + .8vw, 1.7rem); background-image: linear-gradient(90deg, var(--szron-jasny) 0 100%), linear-gradient(90deg, var(--szron-jasny) 0 100%), linear-gradient(90deg, var(--szron-jasny) 0 100%), linear-gradient(90deg, var(--szron-jasny) 0 100%), linear-gradient(90deg, var(--szron-jasny) 0 100%), linear-gradient(90deg, var(--szron-jasny) 0 100%), linear-gradient(90deg, var(--szron-jasny) 0 100%), linear-gradient(90deg, var(--szron-jasny) 0 100%); background-size: 6.2rem 5px, 4px 16px, 4px 16px, 2px 5px, 2px 5px, 2px 5px, 1.5rem 5px, 7px 7px; background-position: left .6rem bottom 0px, left .35rem bottom 0px, left 6.6rem bottom 0px, left 2rem bottom 0px, left 3.4rem bottom 0px, left 4.8rem bottom 0px, left 1rem bottom 8px, left 5.2rem bottom 8px; background-repeat: no-repeat; } .hero .wprowadzenie { margin: 0 0 1.1rem; color: var(--na-winie); font-size: clamp(1.04rem, .98rem + .34vw, 1.26rem); line-height: 1.64; } .hero p { color: var(--na-winie-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(--szron-jasny); } /* --- 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(--wino-noc); background-image: linear-gradient(180deg, var(--wino) 0%, var(--wino-noc) 100%); color: var(--na-winie); } .pasmo:last-of-type:not(:nth-of-type(1))::before { background: var(--szron-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-winie-cichy); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2 { color: var(--na-winie); } /* ⚠⚠ 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-winie); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zajawka { color: var(--na-winie-cichy); border-inline-start-color: var(--szron-jasny); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk) { color: var(--szron-jasny); text-decoration-color: var(--szron-jasny); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk):hover { color: var(--na-winie); } /* --- 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.36rem, 1.06rem + 1.06vw, 2.1rem); line-height: 1.22; letter-spacing: -.008em; color: var(--tekst); text-wrap: balance; } /* numer sekcji STOI NA PODSTAWIE W KLAMRACH — belka na całą szerokość pudełka, klamry na obu końcach, dwa podziały pól. ⚠⚠ Pozycje pisane składnią `left/right … bottom …`, NIGDY `calc(100% - Xpx)`: procent w background-position nie jest offsetem, tylko (pudełko − obraz). ⚠ padding-block-end musi być większy od wysokości klamry (13 px), inaczej klamra wchodzi pod cyfrę. */ .pasmo > .kontener > h2::before { content: counter(pasmo, decimal-leading-zero); display: block; width: 3.8rem; margin-block-end: .7rem; padding-block-end: .95rem; background-image: linear-gradient(90deg, var(--szron-kreska) 0 100%), linear-gradient(90deg, var(--szron-kreska) 0 100%), linear-gradient(90deg, var(--szron-kreska) 0 100%), linear-gradient(90deg, var(--szron-kreska) 0 100%), linear-gradient(90deg, var(--szron-kreska) 0 100%); background-size: 100% 5px, 3px 13px, 3px 13px, 2px 5px, 2px 5px; background-position: left 0px bottom 0px, left 0px bottom 0px, right 0px bottom 0px, left 34% bottom 0px, left 67% bottom 0px; background-repeat: no-repeat; font-family: var(--kroj-maszyna); font-weight: 400; font-size: .72rem; letter-spacing: -.01em; line-height: 1.5; color: var(--szron-pismo); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2::before { color: var(--szron-jasny); border-color: var(--szron-jasny); } .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.06rem, .96rem + .4vw, 1.3rem); line-height: 1.36; 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(--szron-kreska); color: var(--tekst-cichy); font-size: clamp(1.01rem, .96rem + .28vw, 1.16rem); } .tresc p a:not(.przycisk) { color: var(--szron-pismo); text-decoration-line: underline; text-decoration-color: var(--szron-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 procedura po kolei — numer w PEŁNYM, ZAMKNIĘTYM PUDEŁKU: pole pakietu wejściowego jest już zamrożone i nic z niego nie wypada. WYLICZENIE to POLA WSPÓLNEGO MIANOWNIKA — krótki odcinek podstawy z JEDNĄ klamrą, bo pole jest wycinkiem tej samej zamrożonej belki. ⚠ To rozróżnienie jest treścią serwisu, nie dekoracją: procedura ma pudełko, pole ma odcinek podstawy. ⚠ Wypełnienie pudełka to --szron-jasny, a pismo --tekst (9,61:1). Pismo --szron-pismo dałoby 4,94:1, czyli zapas 0,44 — za mało. -------------------------------------------------------------------- */ .tresc .kroki { margin: .4em 0 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 ``, nie `
  • ` (zmierzone na pap2.pl: 259 × 20 px przy progu 44). ⚠ `inline-block`, NIE `inline-flex`: flex nie zawija tekstu → B5. */ .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: .64em; display: inline-flex; align-items: center; justify-content: center; min-width: 2.4rem; height: 1.5rem; padding-inline: .35rem; background: var(--szron-jasny); color: var(--tekst); border: 2px solid var(--szron-kreska); font-family: var(--kroj-maszyna); font-weight: 400; font-size: .7rem; } .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 { background: transparent; color: var(--szron-jasny); border-color: var(--szron-jasny); } .tresc .wyliczenie { margin: .4em 0 1.4em; padding: 0; list-style: none; display: grid; gap: .6rem; } .tresc .wyliczenie li { position: relative; padding-inline-start: 1.9rem; } /* znacznik: KRÓTKI ODCINEK PODSTAWY Z JEDNĄ KLAMRĄ i jednym podziałem — pole wspólnego mianownika jest wycinkiem tej samej zamrożonej belki. ⚠ Trzy warstwy, tyle samo co w wariancie ciemnym i w druku — komplet warstw musi się zgadzać we WSZYSTKICH trzech miejscach (wada 7.09). */ .tresc .wyliczenie li::before { content: ""; position: absolute; inset-block-start: .62em; inset-inline-start: 0; width: 22px; height: 9px; background-image: linear-gradient(90deg, var(--szron-kreska) 0 100%), linear-gradient(90deg, var(--szron-kreska) 0 100%), linear-gradient(90deg, var(--szron-kreska) 0 100%); background-size: 17px 4px, 3px 9px, 2px 4px; background-position: left 4px bottom 0px, left 0px bottom 0px, left 12px bottom 0px; background-repeat: no-repeat; } /* ⚠⚠ KANON 9c: ODSYŁACZ W WYKAZIE (`.wyliczenie`, `.kroki`) NIE JEST OBJĘTY REGUŁAMI PROZY — te celują w `` wewnątrz `

    `. Bez własnej reguły dostaje DOMYŚLNY BŁĘKIT PRZEGLĄDARKI rgb(0,0,238), co na ciemnej płycie hero daje **1,44:1**. Zmierzone 5.09 na tej domenie: „Checklista wymagań CMS”, „Backup i test odtwarzania”, „Migracja CMS” w `