/* ===================================================================== fotowoltaika.wielun.pl — MAKIETA PREMIUM „OSOBNO KAŻDA WARSTWA JEST CZYSTA — NA WSPÓLNYM RYSUNKU WIDAĆ KOLIZJĘ” --------------------------------------------------------------------- Teza serwisu, jego własnymi słowami: h2 „**Wspólny rysunek ujawnia kolizje**”, „**Żadna warstwa nie daje pełnego obrazu sama**”, „**Zamknięciem jest spójny pakiet, nie pojedynczy protokół**”, „Jedna liczba rezystancji, fotografia ogranicznika albo podpis «odgrom» na rzucie **nie zamykają tematu**”, „Zamknięcie komentarza bez aktualizacji rysunku **pozostawia kolizję w dokumentacji**”, „Ustanów jedną podkładkę koordynacyjną”. Rysunek (zmierzony): po lewej TRZY MAŁE RAMKI, każda z JEDNYM elementem — pozioma belka, pionowy słup, kwadrat. Każda osobno jest czysta. Po prawej JEDNA WSPÓLNA RAMKA z tymi samymi trzema elementami na TYCH SAMYCH pozycjach względnych — i tu belka pozioma i pionowy słup KRZYŻUJĄ SIĘ. Kolizja istnieje wyłącznie na wspólnym rysunku. ⚠⚠ SKRZYŻOWANIE NIE JEST OZNACZONE — żadnego X, kółka, wykrzyknika. Kolizja jest samym krzyżowaniem, nie jego etykietą. Znacznik zamieniłby rysunek w ostrzeżenie, a serwis mówi o dokumentacji, nie o alarmie. ⚠⚠ CZEGO TU NIE MA — I DLACZEGO: * ŻADNEGO PIORUNA, ZWODU, GROMU, UZIOMU, IGLICY ANI PANELU — serwis jest o spójności dokumentów, nie o burzy jako obrazku. * ŻADNYCH PIĘCIU WARSTW W STOSIE, mimo h2 „Pięć warstw, których nie należy sklejać”: stos warstw to betamax.pl, trzy jakości kreski jako trzy dowody to fotowoltaika.pila.pl, trzy warstwy ze środkową usuwalną to podpiskwalifikowany.warszawa.pl. Tu warstwy nie leżą na sobie — stoją OSOBNO, a potem RAZEM. * ŻADNYCH ZBIORÓW ZACHODZĄCYCH — fotowoltaika.kutno.pl: tam zachodzenie jest WSPÓLNĄ DANĄ i nosi znak; tu krzyżowanie jest KOLIZJĄ i niczego nie nosi. Do tego elementy są różnego rodzaju (belka, słup, kwadrat), nie trzy podobne obrysy. * ŻADNYCH DWÓCH IDENTYCZNYCH OBRYSÓW — fotowoltaika.malopolska.pl; tu ramki są trzy małe i jedna duża. * ŻADNEJ PODZIAŁKI ANI OSI; bez cyfr i liter (kanon, punkt 13). Pełny zapis: PROJEKT-PREMIUM.md. ⚠ UCZCIWIE O BARWIE: szarość ziemna #30302A to JEDENASTA ciemna płyta rodziny i **najjaśniejsza z ciemnych** — o stopień jaśniejsza od cynku grafitowego dachsolarny.com #24282C i wyraźnie cieplejsza (żółtawa, nie niebieskawa). Przez to blask płyty jest jasny (#4A4A42) i wartości „na płycie” musiały być jaśniejsze niż zwykle — patrz tokeny. Cyjan #155A78 stoi między błękitem stalowym karpacza #1E4C6B (ciemniejszy, szarszy) a turkusem atramentowym beskidów #10535F (zieleńszy) — jest od obu jaśniejszy i czyściej niebieski; **chłodny cyjan na ciepłej szarości** to para, której w rodzinie nie ma. ⚠ INKNUT ANTIQUA w wagach 400 i 700 — nagłówki drugiego rzędu idą 400. ⚠ UBUNTU MONO w jednej wadze (400). ⚠ 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. ⚠ KANON 13c: nadpisania list `background-position` mają tyle wartości, ile warstw ma baza — albo nie istnieją. ⚠ Proporcja kadru rysunku ≥ 2,0 — przy 390 px rysunek dostaje ~140 px nad tytułem; wyższy kadr wszedłby pod tytuł (sprawdzone 7.09 na świdnicy, proporcja 2,06 była jeszcze bezpieczna). ===================================================================== */ /* --- 1. TOKENY ------------------------------------------------------- */ :root { --szarosc: #30302A; /* NAJJAŚNIEJSZA ciemna płyta rodziny PV — ciepła */ --szarosc-noc: #22221D; --szarosc-blask: #4A4A42; /* ⚠ jasny blask — wartości „na płycie” liczone głównie tu */ --papier: #F4F3EF; --karta: #FFFFFF; --tekst: #1B1B17; /* 15,56 / 17,27 */ --tekst-cichy: #4B4B45; /* 7,91 / 8,78 */ --na-szarosci: #ECEBE6; /* 11,12 / 13,38 / 7,49 na blasku */ --na-szarosci-cichy: #C6C5BD; /* 7,66 / 9,22 / 5,16 na blasku (pierwsza wersja #B3B2AA = 4,20 na blasku — odrzucona) */ /* cyjan — TRZY wartości (kanon, punkt 12), policzone */ --cyjan-pismo: #155A78; /* PISMO — 6,84 / 7,59 */ --cyjan-kreska: #2A83A8; /* kreski — 3,85 / 4,28 (na blasku 2,09 — patrz sekcja 8) */ --cyjan-jasny: #9FD6EE; /* na płytach — 8,42 / 10,14 / 5,67 na blasku */ --obwodka: #77776F; /* 4,07 / 4,51 */ --linia-cicha: #E3E2DC; --obwodka-ciemna:#A0A098; /* 6,07 na nocy / 3,40 na blasku (pierwsza wersja #8E8E86 = 2,71 na blasku — odrzucona) */ --kroj-naglowek: "Inknut Antiqua", Georgia, "Times New Roman", serif; --kroj-tekst: "Nunito Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --kroj-maszyna: "Ubuntu 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(48, 48, 42, .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(--cyjan-jasny); color: var(--szarosc); } :focus-visible { outline: 3px solid var(--cyjan-pismo); outline-offset: 2px; } .naglowek :focus-visible, .hero :focus-visible, .stopka :focus-visible { outline-color: var(--cyjan-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(--cyjan-jasny); color: var(--szarosc); font-weight: 600; text-decoration: none; } .omin:focus { inset-inline-start: 0; } /* --- 2b. PŁYTY ------------------------------------------------------- */ .naglowek, .hero { position: relative; isolation: isolate; color: var(--na-szarosci); } .naglowek { background: var(--szarosc); } /* --- 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(--szarosc); background-image: linear-gradient(180deg, var(--szarosc-noc) 0%, var(--szarosc) 62%, var(--szarosc-blask) 100%); } /* wzdłuż dolnej krawędzi: belka i słup OSOBNO (czyste), potem belka i słup RAZEM (krzyżują się). Okres 84 px. */ .naglowek__rysunek { position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 0; height: 15px; background-image: repeating-linear-gradient(90deg, transparent 0 0px, var(--cyjan-jasny) 0px 20px, transparent 20px 84px), repeating-linear-gradient(90deg, transparent 0 26px, var(--cyjan-jasny) 26px 29px, transparent 29px 84px), repeating-linear-gradient(90deg, transparent 0 44px, var(--cyjan-jasny) 44px 66px, transparent 66px 84px), repeating-linear-gradient(90deg, transparent 0 54px, var(--cyjan-jasny) 54px 57px, transparent 57px 84px); background-size: 100% 3px, 100% 9px, 100% 3px, 100% 11px; background-position: 0 6px, 0 3px, 0 6px, 0 2px; 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-szarosci); text-decoration: none; } /* znak rozpoznawczy: belka i słup OSOBNO, a obok RAZEM — skrzyżowane */ .znak__rysunek { flex: none; width: 34px; height: 17px; background-image: linear-gradient(90deg, var(--cyjan-jasny) 0 100%), linear-gradient(90deg, var(--cyjan-jasny) 0 100%), linear-gradient(90deg, var(--cyjan-jasny) 0 100%), linear-gradient(90deg, var(--cyjan-jasny) 0 100%); background-size: 12px 3px, 3px 9px, 13px 3px, 3px 12px; background-position: left 0px top 5px, left 14px top 2px, left 21px top 8px, left 26px top 3px; 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(--cyjan-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-szarosci-cichy); text-decoration: none; font-family: var(--kroj-maszyna); font-weight: 400; font-size: .74rem; letter-spacing: -.008em; } .menu__link:hover { color: var(--na-szarosci); } /* pozycja bieżąca: pod napisem belka i słup OSOBNO, a przy prawej krawędzi RAZEM — skrzyżowane. ⚠⚠ KANON 3b: znacznik OBOK pisma, nigdy tło pod nim. ⚠ Odstępy w PIKSELACH — pudełko ma sztywne min-height 46px (P-11). ⚠ Prawa para wyrównana składnią `right Xpx`, nie `calc(100% - Xpx)`. */ .menu__link[aria-current="page"] { color: var(--na-szarosci); } .menu__link[aria-current="page"]::after { content: ""; position: absolute; inset-block-end: 6px; inset-inline: .5em; height: 11px; background-image: linear-gradient(90deg, var(--cyjan-jasny) 0 100%), linear-gradient(90deg, var(--cyjan-jasny) 0 100%), linear-gradient(90deg, var(--cyjan-jasny) 0 100%), linear-gradient(90deg, var(--cyjan-jasny) 0 100%); background-size: calc(100% - 30px) 3px, 3px 9px, 14px 3px, 3px 11px; background-position: left 0px bottom 4px, right 22px bottom 0px, right 0px bottom 4px, right 5px bottom 0px; background-repeat: no-repeat; } /* --- 5. HERO — osobno czyste, razem kolizja ------------------------- */ .hero { overflow: hidden; padding-block: clamp(2.6rem, 1.6rem + 4vw, 6rem) clamp(3rem, 1.8rem + 4.4vw, 6.6rem); background: var(--szarosc); } .hero__plyta { position: absolute; z-index: 0; inset: 0; background-color: var(--szarosc); background-image: radial-gradient(64% 58% at 16% 4%, var(--szarosc-blask) 0%, rgba(74, 74, 66, 0) 62%), linear-gradient(180deg, var(--szarosc) 0%, var(--szarosc-noc) 100%); } .hero__rysunek { position: absolute; z-index: 1; /* ⚠ Rysunek W CAŁOŚCI w kadrze (trzy małe ramki I wspólna ramka), obok kolumny, nie pod nią — szerokość liczona od 1320 do 1920 px. ⚠⚠ Obcięcie prawej strony zabiera wspólną ramkę, czyli samą kolizję; zostałyby trzy czyste warstwy i rysunek mówiłby coś przeciwnego. ⚠ Kadr ciasny i SZEROKI (proporcja 2,4 ≥ 2,0 — przy 390 px rysunek ma ~140 px nad tytułem, wyższy kadr wszedłby pod tytuł). */ inset-block-start: 50%; inset-inline-end: 2%; width: clamp(26rem, 28vw, 36rem); aspect-ratio: 410 / 170; transform: translateY(-50%); color: var(--cyjan-jasny); opacity: .4; } .hero__rysunek svg { width: 100%; height: 100%; } /* Scrim gaśnie na 40 procentach szerokości, a rysunek stoi w prawym torze — więc wspólna ramka z kolizją (prawa część rysunku) zostaje w pełni czytelna. To ona niesie tezę; trzy czyste ramki po lewej mogą być bliżej scrimu, bo mówią tylko „osobno wszystko w porządku”. */ .hero__scrim { position: absolute; z-index: 2; inset: 0; background: linear-gradient(96deg, rgba(34, 34, 29, .95) 0%, rgba(34, 34, 29, .86) 22%, rgba(34, 34, 29, .1) 40%, rgba(34, 34, 29, 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__rysunek { inset-block-start: 0; inset-inline-end: 4%; width: clamp(16rem, 74vw, 34rem); transform: none; opacity: .5; } .hero__scrim { background: linear-gradient(180deg, rgba(34, 34, 29, 0) 0%, rgba(34, 34, 29, 0) 22%, rgba(34, 34, 29, .9) 40%, rgba(34, 34, 29, .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-szarosci); } /* nad tytułem: belka i słup OSOBNO, a obok RAZEM — skrzyżowane. Cała teza w czterech warstwach. */ .hero .tytul::before { content: ""; display: block; width: 11rem; height: 22px; margin-block-end: clamp(1rem, .7rem + .8vw, 1.7rem); background-image: linear-gradient(90deg, var(--cyjan-jasny) 0 100%), linear-gradient(90deg, var(--cyjan-jasny) 0 100%), linear-gradient(90deg, var(--cyjan-jasny) 0 100%), linear-gradient(90deg, var(--cyjan-jasny) 0 100%); background-size: 3rem 5px, 5px 18px, 3.2rem 5px, 5px 20px; background-position: left 0px top 9px, left 3.6rem top 2px, left 5.4rem top 9px, left 6.8rem top 1px; background-repeat: no-repeat; } .hero .wprowadzenie { margin: 0 0 1.1rem; color: var(--na-szarosci); font-size: clamp(1.04rem, .98rem + .34vw, 1.26rem); line-height: 1.64; } .hero p { color: var(--na-szarosci-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(--cyjan-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(--szarosc-noc); background-image: linear-gradient(180deg, var(--szarosc) 0%, var(--szarosc-noc) 100%); color: var(--na-szarosci); } .pasmo:last-of-type:not(:nth-of-type(1))::before { background: var(--cyjan-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-szarosci-cichy); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2 { color: var(--na-szarosci); } /* ⚠⚠ 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-szarosci); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zajawka { color: var(--na-szarosci-cichy); border-inline-start-color: var(--cyjan-jasny); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk) { color: var(--cyjan-jasny); text-decoration-color: var(--cyjan-jasny); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk):hover { color: var(--na-szarosci); } /* --- 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 NAD PARĄ OSOBNĄ, a przy prawej krawędzi jest para SKRZYŻOWANA. ⚠⚠ Pozycje pisane składnią `left/right … bottom …`, NIGDY `calc(100% - Xpx)`: procent w background-position nie jest offsetem, tylko (pudełko − obraz). */ .pasmo > .kontener > h2::before { content: counter(pasmo, decimal-leading-zero); display: block; width: 4.6rem; margin-block-end: .7rem; padding-block-end: .95rem; background-image: linear-gradient(90deg, var(--cyjan-kreska) 0 100%), linear-gradient(90deg, var(--cyjan-kreska) 0 100%), linear-gradient(90deg, var(--cyjan-kreska) 0 100%), linear-gradient(90deg, var(--cyjan-kreska) 0 100%); background-size: 1.4rem 4px, 4px 11px, 18px 4px, 4px 13px; background-position: left 0px bottom 3px, left 1.7rem bottom 0px, right 0px bottom 3px, right 7px 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(--cyjan-pismo); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2::before { color: var(--cyjan-jasny); background-image: linear-gradient(90deg, var(--cyjan-jasny) 0 100%), linear-gradient(90deg, var(--cyjan-jasny) 0 100%), linear-gradient(90deg, var(--cyjan-jasny) 0 100%), linear-gradient(90deg, var(--cyjan-jasny) 0 100%); } .tresc h3 { margin: clamp(1.7rem, 1.2rem + 1.2vw, 2.5rem) 0 .5rem; font-family: var(--kroj-naglowek); font-weight: 400; 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(--cyjan-kreska); color: var(--tekst-cichy); font-size: clamp(1.01rem, .96rem + .28vw, 1.16rem); } .tresc p a:not(.przycisk) { color: var(--cyjan-pismo); text-decoration-line: underline; text-decoration-color: var(--cyjan-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 PUDEŁKU: krok jest jedną warstwą, spójną samą w sobie. WYLICZENIE to rzeczy do sprawdzenia — SKRZYŻOWANE belka i słup: każda pozycja wykazu to styk dwóch opracowań, który trzeba sprawdzić na wspólnym rysunku. ⚠ To rozróżnienie jest treścią serwisu, nie dekoracją. ⚠ Pismo w pudełku to --karta na --cyjan-pismo (7,59:1); na ciemnym paśmie pudełko odwraca się na --cyjan-jasny z pismem --szarosc-noc (10,14:1). -------------------------------------------------------------------- */ .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: .6em; display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 1.6rem; padding-inline: .4rem; background: var(--cyjan-pismo); color: var(--karta); 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: var(--cyjan-jasny); color: var(--szarosc-noc); } .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: SKRZYŻOWANE belka i słup — styk dwóch opracowań. ⚠ Dwie warstwy; wariant ciemny i druk MUSZĄ mieć tyle samo (kanon 13c). */ .tresc .wyliczenie li::before { content: ""; position: absolute; inset-block-start: .56em; inset-inline-start: 0; width: 16px; height: 12px; background-image: linear-gradient(90deg, var(--cyjan-kreska) 0 100%), linear-gradient(90deg, var(--cyjan-kreska) 0 100%); background-size: 16px 3px, 3px 12px; background-position: left 0px top 5px, left 6px top 0px; background-repeat: no-repeat; } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wyliczenie li::before, .tresc .hero .wyliczenie li::before { border-color: var(--cyjan-jasny); } /* ⚠⚠ 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 `