/* ===================================================================== cheaproaming.info — MAKIETA PREMIUM „PODRÓŻ BEZ PRZERWY, WIERSZE Z PRZERWAMI — JEDNO Z CIĘĆ TAM, GDZIE NIE MA POSTOJU” --------------------------------------------------------------------- Teza serwisu, jego własnymi słowami: „**Port, pokład, lotnisko oraz granica nie są jednym ciągłym wierszem tylko dlatego, że podróż trwa bez przerwy**”; h1 „**Koszt roamingu zaczyna się od trasy, nie od hasła «Europa»**”; „**Przejazd pociągiem przy granicy może wymagać dwóch wierszy mimo braku postoju**”; h2 „Statek i samolot tworzą osobny odcinek”. Rysunek (zmierzony): górne pasmo — jedna podróż, pełna i CIĄGŁA. Nad nim dwa znaki postojów. Pod nim cztery WIERSZE (obrysy) rozdzielone przerwami: dwie przerwy pod znakami postojów, trzecia tam, gdzie nad nią nie ma znaku — granica bez postoju. ⚠⚠ PASMO MUSI BYĆ CIĄGŁE, WIERSZE ROZDZIELONE PRZERWĄ (kanon 13b). W ozdobnikach na szerokość pudełka wiersze i znaki są JEDNYM gradientem o przystankach w PROCENTACH OBRAZU — procent nigdy w pozycji. ⚠⚠ CZEGO TU NIE MA — I DLACZEGO: * ŻADNYCH TRZECH RZĘDÓW SEGMENTÓW — zagranicznynumer.com (warianty podziału); tu JEDNO pasmo ciągłe i JEDEN rząd wierszy. * ŻADNYCH BELEK-ODCZYTÓW POD CIAŁEM — fotowoltaika.lomza.pl; ŻADNYCH DWÓCH TORÓW MIĘDZY KOŃCAMI — centralewirtualne.pl (tam tor urwany, tu pasmo ciągłe); ŻADNEGO STOSU (betamax), GRANIC Z TABLICZKĄ (contactcenter), BELEK Z ZACZEPAMI (otosekretarka). * ŻADNEJ MAPY, SAMOLOTU, STATKU, POCIĄGU, FLAGI, GLOBUSA, ANTENY, TELEFONU, SYLWETKI, CZERWIENI — zakazy rodziny TELEFON; bez cyfr i liter (kanon, punkt 13). Pełny zapis: PROJEKT-PREMIUM.md. ⚠ UCZCIWIE O BARWIE: śliwka ciemna #2E2230 — sąsiedzi: wino ostródy #241A1F (ciemniejsze, brązowsze), fiolet-grafit ostrowa #201D26 (szarszy), indygo olsztyna #2B2A3A (niebieski). Mięta #1F6B57 — sąsiedzi: zieleń butelkowa centralewirtualne.pl #1F5A46 (na JASNEJ kredzie), grynszpan olecka #186B5E (PV). **Mięta na śliwce** to para, której w serii nie ma. ⚠ MARCELLUS ma tylko wagę 400 — WSZYSTKIE nagłówki idą 400, hierarchia na ROZMIARZE (kanon, punkt 11). ⚠ DM MONO w 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 3,07 ≥ 2,0 — przy 390 px rysunek mieści się nad tytułem. ===================================================================== */ /* --- 1. TOKENY ------------------------------------------------------- */ :root { --sliwka: #2E2230; --sliwka-noc: #1E1620; --sliwka-blask: #4A3A4E; --papier: #F5F3F5; --karta: #FFFFFF; --tekst: #1C171D; /* 15.99 / 17.65 */ --tekst-cichy: #4E4650; /* 8.21 / 9.07 */ --na-sliwce: #F0EAF1; /* 12.79 / 14.90 / 8.84 na blasku */ --na-sliwce-cichy: #C9BFCB; /* 8.50 / 9.91 / 5.88 na blasku */ /* mięta — TRZY wartości (kanon, punkt 12), policzone skryptem */ --mieta-pismo: #1F6B57; /* PISMO — 5.77 / 6.37 */ --mieta-kreska: #2F8C74; /* kreski — 3.71 / 4.10 (na blasku 2.55 — patrz sekcja 8) */ --mieta-jasna: #A9E4D0; /* na płytach — 10.59 / 12.34 / 7.32 na blasku */ --obwodka: #77717A; /* 4.30 / 4.74 */ --linia-cicha: #E4E0E5; --obwodka-ciemna:#A797AA; /* 5.51 / 6.42 / 3.81 na blasku */ /* przyciski: biel na piśmie 6.37, noc na jasnej 12.34 */ --kroj-naglowek: "Marcellus", Georgia, "Times New Roman", serif; --kroj-tekst: "Red Hat Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --kroj-maszyna: "DM 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(46, 34, 48, .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(--mieta-jasna); color: var(--sliwka); } :focus-visible { outline: 3px solid var(--mieta-pismo); outline-offset: 2px; } .naglowek :focus-visible, .hero :focus-visible, .stopka :focus-visible { outline-color: var(--mieta-jasna); } /* ⚠ 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(--mieta-jasna); color: var(--sliwka); font-weight: 600; text-decoration: none; } .omin:focus { inset-inline-start: 0; } /* --- 2b. PŁYTY ------------------------------------------------------- */ .naglowek, .hero { position: relative; isolation: isolate; color: var(--na-sliwce); } .naglowek { background: var(--sliwka); } /* --- 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(--sliwka); background-image: linear-gradient(180deg, var(--sliwka-noc) 0%, var(--sliwka) 62%, var(--sliwka-blask) 100%); } /* wzdłuż dolnej krawędzi: znaki postojów, pasmo ciągłe, cztery wiersze z przerwami; okres 84 px. */ .naglowek__wiersze { position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 0; height: 15px; background-image: repeating-linear-gradient(90deg, transparent 0 17px, var(--mieta-jasna) 17px 21px, transparent 21px 84px), repeating-linear-gradient(90deg, transparent 0 51px, var(--mieta-jasna) 51px 55px, transparent 55px 84px), repeating-linear-gradient(90deg, transparent 0 0px, var(--mieta-jasna) 0px 76px, transparent 76px 84px), repeating-linear-gradient(90deg, transparent 0 0px, var(--mieta-jasna) 0px 17px, transparent 17px 84px), repeating-linear-gradient(90deg, transparent 0 21px, var(--mieta-jasna) 21px 32px, transparent 32px 84px), repeating-linear-gradient(90deg, transparent 0 36px, var(--mieta-jasna) 36px 51px, transparent 51px 84px), repeating-linear-gradient(90deg, transparent 0 55px, var(--mieta-jasna) 55px 76px, transparent 76px 84px); background-size: 100% 3px, 100% 3px, 100% 5px, 100% 3px, 100% 3px, 100% 3px, 100% 3px; background-position: 0 1px, 0 1px, 0 5px, 0 12px, 0 12px, 0 12px, 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-sliwce); text-decoration: none; } /* znak rozpoznawczy: znaki postojów, pasmo ciągłe, cztery wiersze z przerwami */ .znak__wiersze { flex: none; width: 34px; height: 18px; background-image: linear-gradient(90deg, var(--mieta-jasna) 0 100%), linear-gradient(90deg, var(--mieta-jasna) 0 100%), linear-gradient(90deg, var(--mieta-jasna) 0 100%), linear-gradient(90deg, var(--mieta-jasna) 0 100%), linear-gradient(90deg, var(--mieta-jasna) 0 100%), linear-gradient(90deg, var(--mieta-jasna) 0 100%), linear-gradient(90deg, var(--mieta-jasna) 0 100%); background-size: 4px 3px, 4px 3px, 34px 6px, 6px 3px, 3px 3px, 4px 3px, 9px 3px; background-position: left 6px top 0px, left 21px top 0px, left 0px top 4px, left 0px top 15px, left 10px top 15px, left 17px top 15px, left 25px top 15px; background-repeat: no-repeat; } .znak__slowo { font-family: var(--kroj-naglowek); font-weight: 400; font-size: clamp(1.06rem, .94rem + .46vw, 1.38rem); letter-spacing: -.008em; } .znak:hover .znak__slowo { color: var(--mieta-jasna); } .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-sliwce-cichy); text-decoration: none; font-family: var(--kroj-maszyna); font-weight: 400; font-size: .74rem; letter-spacing: -.008em; } .menu__link:hover { color: var(--na-sliwce); } /* pozycja bieżąca: pod napisem znaki postojów, pasmo ciągłe i wiersze z przerwami — jeden gradient na wiersze (przystanki w procentach OBRAZU). ⚠⚠ KANON 3b: znacznik OBOK pisma, nigdy tło pod nim. ⚠ Odstępy w PIKSELACH — pudełko ma sztywne min-height 46px (P-11). ⚠ Procent tylko w gradiencie i w SIZE; pozycje `left … top …`. */ .menu__link[aria-current="page"] { color: var(--na-sliwce); } .menu__link[aria-current="page"]::after { content: ""; position: absolute; inset-block-end: 6px; inset-inline: .5em; height: 10px; background-image: linear-gradient(90deg, transparent 0 21%, var(--mieta-jasna) 21% 26%, transparent 26% 67%, var(--mieta-jasna) 67% 72%, transparent 72% 100%), linear-gradient(90deg, var(--mieta-jasna) 0 100%), linear-gradient(90deg, var(--mieta-jasna) 0% 22%, transparent 22% 25%, var(--mieta-jasna) 25% 42%, transparent 42% 45%, var(--mieta-jasna) 45% 68%, transparent 68% 71%, var(--mieta-jasna) 71% 100%); background-size: 100% 2px, 100% 3px, 100% 2px; background-position: left 0px top 0px, left 0px top 3px, left 0px bottom 0px; background-repeat: no-repeat; } /* --- 5. HERO — podróż bez przerwy, wiersze z przerwami -------------- */ .hero { overflow: hidden; padding-block: clamp(2.6rem, 1.6rem + 4vw, 6rem) clamp(3rem, 1.8rem + 4.4vw, 6.6rem); background: var(--sliwka); } .hero__plyta { position: absolute; z-index: 0; inset: 0; background-color: var(--sliwka); background-image: radial-gradient(64% 58% at 16% 4%, var(--sliwka-blask) 0%, rgba(74, 58, 78, 0) 62%), linear-gradient(180deg, var(--sliwka) 0%, var(--sliwka-noc) 100%); } .hero__wiersze { position: absolute; z-index: 1; /* ⚠ Rysunek W CAŁOŚCI w kadrze (całe pasmo, oba znaki, cztery wiersze), obok kolumny, nie pod nią — szerokość liczona od 1320 do 1920 px. ⚠⚠ Obcięcie z boku PRZERWAŁOBY pasmo — a jego ciągłość jest treścią. ⚠ Kadr ciasny (proporcja 3,07 ≥ 2,0). */ inset-block-start: 50%; inset-inline-end: 2%; width: clamp(26rem, 28vw, 36rem); aspect-ratio: 430 / 140; transform: translateY(-50%); color: var(--mieta-jasna); opacity: .4; } .hero__wiersze svg { width: 100%; height: 100%; } /* Scrim gaśnie na 40 procentach szerokości, a rysunek stoi w prawym torze — całe pasmo i wszystkie wiersze zostają czytelne. Scrim nie może przygasić lewego końca pasma: pasmo przygaszone z jednej strony wyglądałoby na urwane. */ .hero__scrim { position: absolute; z-index: 2; inset: 0; background: linear-gradient(96deg, rgba(30, 22, 32, .95) 0%, rgba(30, 22, 32, .86) 22%, rgba(30, 22, 32, .1) 40%, rgba(30, 22, 32, 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__wiersze { inset-block-start: 0; inset-inline-end: 4%; width: clamp(16rem, 74vw, 34rem); transform: none; opacity: .5; } .hero__scrim { background: linear-gradient(180deg, rgba(30, 22, 32, 0) 0%, rgba(30, 22, 32, 0) 22%, rgba(30, 22, 32, .9) 40%, rgba(30, 22, 32, .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: 400; 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-sliwce); } /* nad tytułem: znaki postojów, pasmo ciągłe, cztery wiersze z przerwami — największa skala w arkuszu, siedem warstw */ .hero .tytul::before { content: ""; display: block; width: 11rem; height: 30px; margin-block-end: clamp(1rem, .7rem + .8vw, 1.7rem); background-image: linear-gradient(90deg, var(--mieta-jasna) 0 100%), linear-gradient(90deg, var(--mieta-jasna) 0 100%), linear-gradient(90deg, var(--mieta-jasna) 0 100%), linear-gradient(90deg, var(--mieta-jasna) 0 100%), linear-gradient(90deg, var(--mieta-jasna) 0 100%), linear-gradient(90deg, var(--mieta-jasna) 0 100%), linear-gradient(90deg, var(--mieta-jasna) 0 100%); background-size: 4px 3px, 4px 3px, 176px 10px, 42px 7px, 31px 7px, 40px 7px, 51px 7px; background-position: left 42px top 0px, left 121px top 0px, left 0px top 4px, left 0px top 23px, left 46px top 23px, left 81px top 23px, left 125px top 23px; background-repeat: no-repeat; } .hero .wprowadzenie { margin: 0 0 1.1rem; color: var(--na-sliwce); font-size: clamp(1.04rem, .98rem + .34vw, 1.26rem); line-height: 1.64; } .hero p { color: var(--na-sliwce-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(--mieta-jasna); } /* --- 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) 0%, var(--sliwka-noc) 100%); color: var(--na-sliwce); } .pasmo:last-of-type:not(:nth-of-type(1))::before { background: var(--mieta-jasna); 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(--mieta-jasna); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk) { color: var(--mieta-jasna); text-decoration-color: var(--mieta-jasna); } .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: 400; 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 znakami postojów, pasmem ciągłym i wierszami z przerwami. 3 warstwy. ⚠⚠ Pozycje składnią `left … bottom …`; procent tylko w gradiencie i SIZE. */ .pasmo > .kontener > h2::before { content: counter(pasmo, decimal-leading-zero); display: block; width: 4.4rem; margin-block-end: .7rem; padding-block-end: 1rem; background-image: linear-gradient(90deg, transparent 0 21%, var(--mieta-kreska) 21% 26%, transparent 26% 67%, var(--mieta-kreska) 67% 72%, transparent 72% 100%), linear-gradient(90deg, var(--mieta-kreska) 0 100%), linear-gradient(90deg, var(--mieta-kreska) 0% 22%, transparent 22% 25%, var(--mieta-kreska) 25% 42%, transparent 42% 45%, var(--mieta-kreska) 45% 68%, transparent 68% 71%, var(--mieta-kreska) 71% 100%); background-size: 100% 2px, 100% 3px, 100% 2px; background-position: left 0px bottom 8px, left 0px bottom 3px, left 0px 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(--mieta-pismo); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2::before { color: var(--mieta-jasna); background-image: linear-gradient(90deg, transparent 0 21%, var(--mieta-jasna) 21% 26%, transparent 26% 67%, var(--mieta-jasna) 67% 72%, transparent 72% 100%), linear-gradient(90deg, var(--mieta-jasna) 0 100%), linear-gradient(90deg, var(--mieta-jasna) 0% 22%, transparent 22% 25%, var(--mieta-jasna) 25% 42%, transparent 42% 45%, var(--mieta-jasna) 45% 68%, transparent 68% 71%, var(--mieta-jasna) 71% 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(--mieta-kreska); color: var(--tekst-cichy); font-size: clamp(1.01rem, .96rem + .28vw, 1.16rem); } .tresc p a:not(.przycisk) { color: var(--mieta-pismo); text-decoration-line: underline; text-decoration-color: var(--mieta-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 wpisany jest wierszem wypełnionym, nie hasłem. WYLICZENIE to rzeczy do sprawdzenia — pasmo ciągłe i wiersze z przerwami: pozycja wykazu to jeden odcinek podróży, który może wymagać kilku wierszy. ⚠ To rozróżnienie jest treścią serwisu, nie dekoracją. ⚠ Pismo w pudełku to --karta na --mieta-pismo; na ciemnym paśmie pudełko odwraca się na --mieta-jasna z pismem --sliwka-noc. -------------------------------------------------------------------- */ .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(--mieta-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(--mieta-jasna); color: var(--sliwka-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: znaki postojów, pasmo ciągłe, wiersze z przerwami (3 warstwy; wariant ciemny i druk MUSZĄ mieć tyle samo — kanon 13c). */ .tresc .wyliczenie li::before { content: ""; position: absolute; inset-block-start: .55em; inset-inline-start: 0; width: 22px; height: 10px; background-image: linear-gradient(90deg, transparent 0 21%, var(--mieta-kreska) 21% 26%, transparent 26% 67%, var(--mieta-kreska) 67% 72%, transparent 72% 100%), linear-gradient(90deg, var(--mieta-kreska) 0 100%), linear-gradient(90deg, var(--mieta-kreska) 0% 22%, transparent 22% 25%, var(--mieta-kreska) 25% 42%, transparent 42% 45%, var(--mieta-kreska) 45% 68%, transparent 68% 71%, var(--mieta-kreska) 71% 100%); background-size: 100% 2px, 100% 3px, 100% 2px; background-position: left 0px top 0px, left 0px top 3px, left 0px bottom 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(--mieta-jasna); } /* ⚠⚠ 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 `