/* ===================================================================== nonoh.com.pl — MAKIETA PREMIUM „TRZY OPERACJE, TRZY SKUTKI — APLIKACJA W ŚRODKU, KONTO WOKÓŁ, DANE NA ZEWNĄTRZ” --------------------------------------------------------------------- Teza serwisu, jego własnymi słowami: „**Usunięcie programu zmienia stan urządzenia, zamknięcie konta zmienia relację z usługą, a wykonanie praw dotyczących danych określa, co robi administrator**” (h2 „**trzy operacje, trzy skutki**”); h1 „**Najpierw ustal, co naprawdę zostało**”; h2 „**Zamykaj w kolejności, którą da się udowodnić**”. Rysunek (zmierzony): trzy obrysy jeden w drugim, rozdzielone przerwą — dane (zewnętrzny), konto (środkowy), aplikacja (najmniejszy, pełny). Usunięcie aplikacji zmienia tylko środek; reszta wymaga osobnych operacji. ⚠⚠ OBRYSY NIE STYKAJĄ SIĘ (13b); tylko najmniejszy pełny. Zagnieżdżenie to nowy środek w serii o jednym znaczeniu: zakresy, jeden w drugim. ⚠⚠ CZEGO TU NIE MA — I DLACZEGO: * ŻADNYCH PIĘCIU RÓL — dellmont.pl (mimo „pięć elementów konta” w treści); ŻADNYCH SCHODÓW — hokiwa; ŻADNEJ RÓWNOLEGŁOŚCI — justvoip. * ŻADNEGO BLOKU W JEDNYM OBRYSIE — doadowania (dwa poziomy); tu trzy. * ŻADNYCH PUNKTÓW/PÓL W OBRYSIE — beskidy, pisz. * ŻADNEGO TELEFONU, IKONY APLIKACJI, KOSZA, KŁÓDKI, PTASZKA, CZERWIENI — zakazy rodziny TELEFON; bez cyfr i liter (kanon 13). Pełny zapis: PROJEKT-PREMIUM.md. ⚠ UCZCIWIE O BARWIE: lawenda blada #EEEBF4 — sąsiad: popiół fiołkowy #E9E5EE (PV); w TELEFON jasnej fioletowej płyty nie ma. Ochra #6A5A14 — żółcie w rodzinie są na CIEMNYCH płytach (dellmont, internetmobilny, zagranicznynumer); ochra Łomży (PV) na srebrze. **Ochra na lawendzie** to para, której w serii nie ma. ⚠ MERRIWEATHER ma wagi 400 i 700 — waga 500 szkieletu idzie na 400. ⚠ PT MONO w wadze 400. ⚠ SZKIELET przeniesiony z aquadvantage.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,3 ≥ 2,0 — przy 390 px rysunek mieści się nad tytułem. ===================================================================== */ /* --- 1. TOKENY ------------------------------------------------------- */ :root { --lawenda: #EEEBF4; /* jasna płyta nagłówka i hero — lawenda blada */ --lawenda-cien: #DDD8E8; /* ⚠ najciemniejszy punkt jasnej płyty — pismo liczone TAKŻE tu */ --papier: #F8F7FA; --karta: #FFFFFF; --noc: #1F1C28; /* pasmo domykające i stopka — noc fiołkowa */ --noc-blask: #3A3550; /* ⚠ najjaśniejszy punkt ciemnej płyty */ --tekst: #1B1A20; /* 16.19 / 17.28 / 14.67 na płycie / 12.39 na cieniu */ --tekst-cichy: #4B4854; /* 8.36 / 8.92 / 7.57 na płycie / 6.40 na cieniu */ --na-nocy: #EFEDF5; /* 14.42 / 10.03 na blasku */ --na-nocy-cichy: #BFB9CF; /* 8.81 / 6.13 na blasku */ /* ochra — TRZY wartości (kanon, punkt 12), policzone skryptem */ --ochra-pismo: #6A5A14; /* PISMO — 6.38 / 6.81 / 5.78 na płycie / 4.88 na cieniu */ --ochra-kreska: #7E6E1E; /* kreski — 4.76 / 5.08 / 4.31 na płycie / 3.64 na cieniu */ --ochra-jasna: #E6D47C; /* na ciemnych płytach — 11.21 / 7.80 na blasku */ --obwodka: #6E6B78; /* 4.87 / 5.20 / 4.42 na płycie / 3.73 na cieniu */ --linia-cicha: #E4E1EA; --obwodka-ciemna:#9A93B0; /* 5.72 / 3.97 na blasku */ /* przyciski: biel na piśmie 6.81, noc na jasnej 11.21 */ --kroj-naglowek: "Merriweather", Georgia, "Times New Roman", serif; --kroj-tekst: "Nunito Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --kroj-maszyna: "PT Mono", ui-monospace, "DejaVu Sans Mono", Consolas, monospace; --kolumna: 34rem; --kolumna-hero: 36rem; --kolumna-szeroka: 56rem; --margines: clamp(20px, 5vw, 104px); --szyna: 15rem; --rowek: 2.6rem; --promien: 2px; --promien-karta: 3px; --cien-karta: 0 16px 34px -28px rgba(31, 28, 40, .42); } /* --- 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(--ochra-jasna); color: var(--noc); } :focus-visible { outline: 3px solid var(--ochra-pismo); outline-offset: 2px; } .stopka :focus-visible { outline-color: var(--ochra-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(--ochra-pismo); color: var(--karta); font-weight: 600; text-decoration: none; } .omin:focus { inset-inline-start: 0; } /* --- 2b. LAWENDA 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(--lawenda); } /* --- 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__lawenda { position: absolute; z-index: 0; inset: 0; background-color: var(--lawenda); background-image: linear-gradient(180deg, var(--lawenda) 0%, var(--lawenda-cien) 100%); } /* wzdłuż dolnej krawędzi: trzy zakresy jeden w drugim; okres 84 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__zakresy { position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 0; height: 15px; background-image: repeating-linear-gradient(90deg, transparent 0 0px, var(--ochra-kreska) 0px 40px, transparent 40px 84px), repeating-linear-gradient(90deg, transparent 0 0px, var(--ochra-kreska) 0px 40px, transparent 40px 84px), repeating-linear-gradient(90deg, transparent 0 0px, var(--ochra-kreska) 0px 2px, transparent 2px 84px), repeating-linear-gradient(90deg, transparent 0 38px, var(--ochra-kreska) 38px 40px, transparent 40px 84px), repeating-linear-gradient(90deg, transparent 0 6px, var(--ochra-kreska) 6px 34px, transparent 34px 84px), repeating-linear-gradient(90deg, transparent 0 6px, var(--ochra-kreska) 6px 34px, transparent 34px 84px), repeating-linear-gradient(90deg, transparent 0 6px, var(--ochra-kreska) 6px 7px, transparent 7px 84px), repeating-linear-gradient(90deg, transparent 0 33px, var(--ochra-kreska) 33px 34px, transparent 34px 84px), repeating-linear-gradient(90deg, transparent 0 11px, var(--ochra-kreska) 11px 29px, transparent 29px 84px); background-size: 100% 2px, 100% 2px, 100% 13px, 100% 13px, 100% 1px, 100% 1px, 100% 5px, 100% 5px, 100% 1px; background-position: 0 1px, 0 12px, 0 1px, 0 1px, 0 5px, 0 9px, 0 5px, 0 5px, 0 7px; background-repeat: repeat-x; opacity: .6; } /* ⚠ To jest KONTENER nagłówka z HTML generatora — nazwa `naglowek__pas` jest zajęta przez HTML, warstwa ozdobna nazywa się `naglowek__zakresy`. */ .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: trzy zakresy jeden w drugim */ .znak__zakresy { flex: none; width: 36px; height: 20px; background-image: linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%); background-size: 36px 2px, 36px 2px, 2px 20px, 2px 20px, 28px 2px, 28px 2px, 2px 12px, 2px 12px, 20px 4px; background-position: left 0px top 0px, left 0px top 18px, left 0px top 0px, left 34px top 0px, left 4px top 4px, left 4px top 14px, left 4px top 4px, left 30px top 4px, left 8px top 8px; 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(--ochra-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(--ochra-pismo); } /* pozycja bieżąca: pod napisem trzy zakresy jeden w drugim (px od lewej). ⚠⚠ 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: 4px; inset-inline-start: calc(.5em + 2px); inset-inline-end: calc(.5em + 2px); height: 13px; background-image: linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%); background-size: 30px 1px, 30px 1px, 1px 13px, 1px 13px, 24px 1px, 24px 1px, 1px 7px, 1px 7px, 18px 2px; background-position: left 0px top 0px, left 0px top 12px, left 0px top 0px, left 29px top 0px, left 3px top 3px, left 3px top 9px, left 3px top 3px, left 26px top 3px, left 6px top 6px; background-repeat: no-repeat; } /* --- 5. HERO — trzy operacje, trzy skutki --------------------------- */ .hero { overflow: hidden; padding-block: clamp(2.6rem, 1.6rem + 4vw, 6rem) clamp(3rem, 1.8rem + 4.4vw, 6.6rem); background: var(--lawenda); border-block-end: 1px solid var(--linia-cicha); } .hero__lawenda { position: absolute; z-index: 0; inset: 0; background-color: var(--lawenda); background-image: radial-gradient(62% 68% at 88% 12%, var(--lawenda-cien) 0%, rgba(221, 216, 232, 0) 66%), linear-gradient(170deg, var(--lawenda) 0%, var(--lawenda-cien) 100%); } /* Rysunek jest CIEMNY na jasnym, więc pracuje przy niskim kryciu — ma nie konkurować z tytułem. */ .hero__zakresy { position: absolute; z-index: 1; /* ⚠ Rysunek W CAŁOŚCI w kadrze (wszystkie trzy zakresy), obok kolumny (1320–1920 px), nie pod nią. ⚠⚠ Obcięcie zewnętrznego obrysu zabrałoby najszerszy zakres — a wtedy zostałyby dwa poziomy, czyli doadowania.pl. Kadr ciasny (3,3 ≥ 2,0). */ inset-block-start: 54%; inset-inline-end: 2%; width: clamp(26rem, 30vw, 38rem); aspect-ratio: 430 / 130; transform: translateY(-50%); color: var(--ochra-pismo); opacity: .38; } .hero__zakresy 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(--lawenda) 0%, rgba(238, 235, 244, .94) 30%, rgba(238, 235, 244, .2) 50%, rgba(238, 235, 244, 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__zakresy { inset-block-start: 0; inset-inline-end: 4%; width: clamp(16rem, 74vw, 34rem); transform: none; opacity: .38; } .hero__zanik { background: linear-gradient(180deg, rgba(238, 235, 244, 0) 0%, rgba(238, 235, 244, 0) 22%, rgba(238, 235, 244, .9) 40%, rgba(238, 235, 244, .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: trzy zakresy jeden w drugim — największa skala w arkuszu, dziewięć warstw */ .hero .tytul::before { content: ""; display: block; width: 11rem; height: 40px; margin-block-end: clamp(1rem, .7rem + .8vw, 1.7rem); background-image: linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%); background-size: 176px 3px, 176px 3px, 3px 40px, 3px 40px, 166px 3px, 166px 3px, 3px 30px, 3px 30px, 156px 20px; background-position: left 0px top 0px, left 0px top 37px, left 0px top 0px, left 173px top 0px, left 5px top 5px, left 5px top 32px, left 5px top 5px, left 168px top 5px, left 10px top 10px; 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(--ochra-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(--noc); background-image: linear-gradient(180deg, var(--noc-blask) 0%, var(--noc) 62%); color: var(--na-nocy); } .pasmo:last-of-type:not(:nth-of-type(1))::before { background: var(--ochra-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-nocy-cichy); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2 { color: var(--na-nocy); } /* ⚠⚠ 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-nocy); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zajawka { color: var(--na-nocy-cichy); border-inline-start-color: var(--ochra-jasna); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk) { color: var(--ochra-jasna); text-decoration-color: var(--ochra-jasna); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk):hover { color: var(--na-nocy); } /* --- 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 STOI NAD trzema zakresami jeden w drugim. ⚠ Pudełko ma stałą wysokość w px u dołu (padding 12 px), więc przesunięcia ozdobnika w px, składnią `left … bottom …`. */ .pasmo > .kontener > h2::before { content: counter(pasmo, decimal-leading-zero); /* ⚠ `flex` (blokowy), nie `inline-flex`: inline stawał w jednym wierszu z pierwszym słowem tytułu (zmierzone 6.09). */ display: flex; width: max-content; align-items: flex-start; justify-content: flex-start; min-width: 4.2rem; height: 2.2rem; margin-block-end: .6rem; padding-block-end: 13px; background-image: linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%); background-size: 30px 1px, 30px 1px, 1px 13px, 1px 13px, 24px 1px, 24px 1px, 1px 7px, 1px 7px, 18px 2px; background-position: left 0px bottom 0px, left 0px bottom 12px, left 0px bottom 0px, left 29px bottom 0px, left 3px bottom 3px, left 3px bottom 9px, left 3px bottom 3px, left 26px bottom 3px, left 6px bottom 6px; background-repeat: no-repeat; font-family: var(--kroj-maszyna); font-weight: 400; font-size: .76rem; letter-spacing: -.01em; color: var(--ochra-pismo); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2::before { color: var(--ochra-jasna); background-image: linear-gradient(90deg, var(--ochra-jasna) 0 100%), linear-gradient(90deg, var(--ochra-jasna) 0 100%), linear-gradient(90deg, var(--ochra-jasna) 0 100%), linear-gradient(90deg, var(--ochra-jasna) 0 100%), linear-gradient(90deg, var(--ochra-jasna) 0 100%), linear-gradient(90deg, var(--ochra-jasna) 0 100%), linear-gradient(90deg, var(--ochra-jasna) 0 100%), linear-gradient(90deg, var(--ochra-jasna) 0 100%), linear-gradient(90deg, var(--ochra-jasna) 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.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(--ochra-kreska); color: var(--tekst-cichy); font-size: clamp(1.01rem, .96rem + .28vw, 1.16rem); } .tresc p a:not(.przycisk) { color: var(--ochra-pismo); text-decoration-line: underline; text-decoration-color: var(--ochra-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 OBRYSIE: każdy krok jest zakresem, który trzeba zamknąć osobno. WYLICZENIE to rzeczy do sprawdzenia — trzy zakresy jeden w drugim: pozycja wykazu to jedna operacja na jednym poziomie. ⚠ To rozróżnienie jest treścią serwisu, nie dekoracją. -------------------------------------------------------------------- */ .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 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: .5em; display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 1.7rem; padding-inline: .4rem; background: var(--karta); color: var(--ochra-pismo); border: 2px solid var(--ochra-kreska); 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 { background: transparent; color: var(--ochra-jasna); border-color: var(--ochra-jasna); } .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: trzy zakresy jeden w drugim. ⚠ Dziewięć warstw; wariant ciemny i druk MUSZĄ mieć tyle samo (kanon 13c). ⚠ Wariantów `nth-child` tu NIE MA — pozycje wykazu są równorzędne. */ .tresc .wyliczenie li::before { content: ""; position: absolute; inset-block-start: .45em; inset-inline-start: 0; width: 24px; height: 13px; background-image: linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%); background-size: 24px 1px, 24px 1px, 1px 13px, 1px 13px, 18px 1px, 18px 1px, 1px 7px, 1px 7px, 12px 2px; background-position: left 0px top 0px, left 0px top 12px, left 0px top 0px, left 23px top 0px, left 3px top 3px, left 3px top 9px, left 3px top 3px, left 20px top 3px, left 6px top 6px; background-repeat: no-repeat; } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wyliczenie li::before { background-image: linear-gradient(90deg, var(--ochra-jasna) 0 100%), linear-gradient(90deg, var(--ochra-jasna) 0 100%), linear-gradient(90deg, var(--ochra-jasna) 0 100%), linear-gradient(90deg, var(--ochra-jasna) 0 100%), linear-gradient(90deg, var(--ochra-jasna) 0 100%), linear-gradient(90deg, var(--ochra-jasna) 0 100%), linear-gradient(90deg, var(--ochra-jasna) 0 100%), linear-gradient(90deg, var(--ochra-jasna) 0 100%), linear-gradient(90deg, var(--ochra-jasna) 0 100%); } /* ⚠⚠ 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(--ochra-pismo); text-decoration-line: underline; text-decoration-color: var(--ochra-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(--ochra-jasna); text-decoration-color: var(--ochra-jasna); } .tresc .zrodlo { margin: 1.6em 0 0; padding: clamp(.9rem, .7rem + .6vw, 1.3rem); background: var(--karta); border: 1px solid var(--linia-cicha); border-inline-start: 4px solid var(--ochra-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(239, 237, 245, .07); color: var(--na-nocy-cichy); border-color: var(--obwodka-ciemna); border-inline-start-color: var(--ochra-jasna); } /* --- 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(--noc); border-color: var(--noc); color: var(--na-nocy); } .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(--ochra-jasna); color: var(--na-nocy); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .przejscie a:hover { background: var(--ochra-jasna); border-color: var(--ochra-jasna); color: var(--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(--ochra-pismo); color: var(--karta); border: 2px solid var(--ochra-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(--noc); border-color: var(--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(--ochra-jasna); color: var(--noc); border-color: var(--ochra-jasna); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .cta a.przycisk:hover { background: var(--na-nocy); border-color: var(--na-nocy); } /* --- 11. KARTY KATALOGU — TRZY ZAKRESY 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: trzy zakresy jeden w drugim */ .zapowiedz::before { content: ""; position: absolute; inset-block-start: -1px; inset-inline-start: clamp(1.2rem, .9rem + 1vw, 1.8rem); width: 3.4rem; height: 14px; background-image: linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%); background-size: 50px 2px, 50px 2px, 2px 14px, 2px 14px, 42px 2px, 42px 2px, 2px 6px, 2px 6px, 34px 2px; background-position: left 0px top 0px, left 0px top 12px, left 0px top 0px, left 48px top 0px, left 4px top 4px, left 4px top 8px, left 4px top 4px, left 44px top 4px, left 8px top 8px; 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(--ochra-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: 400; 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(--ochra-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(--ochra-pismo); font-weight: 600; font-size: .95rem; border-block-end: 2px solid var(--ochra-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(--ochra-kreska); border-radius: 0; padding: 0 .1rem; min-height: 44px; color: var(--ochra-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(--noc); color: var(--na-nocy); } .stopka__plyta { position: absolute; z-index: 0; inset: 0; background-color: var(--noc); background-image: radial-gradient(66% 128% at 88% 100%, var(--noc-blask) 0%, rgba(58, 53, 80, 0) 64%), linear-gradient(180deg, var(--noc-blask) 0%, var(--noc) 58%); } /* ten sam pas co w nagłówku */ .stopka__zakresy { position: absolute; z-index: 1; inset-inline: 0; inset-block-start: 0; height: 15px; background-image: repeating-linear-gradient(90deg, transparent 0 0px, var(--ochra-jasna) 0px 40px, transparent 40px 84px), repeating-linear-gradient(90deg, transparent 0 0px, var(--ochra-jasna) 0px 40px, transparent 40px 84px), repeating-linear-gradient(90deg, transparent 0 0px, var(--ochra-jasna) 0px 2px, transparent 2px 84px), repeating-linear-gradient(90deg, transparent 0 38px, var(--ochra-jasna) 38px 40px, transparent 40px 84px), repeating-linear-gradient(90deg, transparent 0 6px, var(--ochra-jasna) 6px 34px, transparent 34px 84px), repeating-linear-gradient(90deg, transparent 0 6px, var(--ochra-jasna) 6px 34px, transparent 34px 84px), repeating-linear-gradient(90deg, transparent 0 6px, var(--ochra-jasna) 6px 7px, transparent 7px 84px), repeating-linear-gradient(90deg, transparent 0 33px, var(--ochra-jasna) 33px 34px, transparent 34px 84px), repeating-linear-gradient(90deg, transparent 0 11px, var(--ochra-jasna) 11px 29px, transparent 29px 84px); background-size: 100% 2px, 100% 2px, 100% 13px, 100% 13px, 100% 1px, 100% 1px, 100% 5px, 100% 5px, 100% 1px; background-position: 0 1px, 0 12px, 0 1px, 0 1px, 0 5px, 0 9px, 0 5px, 0 5px, 0 7px; background-repeat: repeat-x; opacity: .55; } .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-nocy); } /* pod znakiem stopki: trzy zakresy jeden w drugim */ .stopka__znak::after { content: ""; display: block; width: 5rem; height: 24px; margin-block-start: .6rem; background-image: linear-gradient(90deg, var(--ochra-jasna) 0 100%), linear-gradient(90deg, var(--ochra-jasna) 0 100%), linear-gradient(90deg, var(--ochra-jasna) 0 100%), linear-gradient(90deg, var(--ochra-jasna) 0 100%), linear-gradient(90deg, var(--ochra-jasna) 0 100%), linear-gradient(90deg, var(--ochra-jasna) 0 100%), linear-gradient(90deg, var(--ochra-jasna) 0 100%), linear-gradient(90deg, var(--ochra-jasna) 0 100%), linear-gradient(90deg, var(--ochra-jasna) 0 100%); background-size: 80px 2px, 80px 2px, 2px 24px, 2px 24px, 72px 2px, 72px 2px, 2px 16px, 2px 16px, 64px 8px; background-position: left 0px top 0px, left 0px top 22px, left 0px top 0px, left 78px top 0px, left 4px top 4px, left 4px top 18px, left 4px top 4px, left 74px top 4px, left 8px top 8px; 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-nocy-cichy); text-decoration: none; font-family: var(--kroj-maszyna); font-size: .78rem; letter-spacing: -.01em; } .stopka__menu a:hover { color: var(--ochra-jasna); text-decoration: underline; text-underline-offset: .3em; } /* --- 13. SZEROKIE EKRANY — TRZY ZAKRESY PIONOWO W PRAWYM TORZE ----- ⚠⚠ 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; } /* trzy zakresy jeden w drugim, pionowo (wysokość 60 px u góry toru) */ .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(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%), linear-gradient(90deg, var(--ochra-kreska) 0 100%); background-size: 22px 2px, 22px 2px, 2px 60px, 2px 60px, 14px 2px, 14px 2px, 2px 52px, 2px 52px, 6px 44px; background-position: left 0px top 0px, left 0px top 58px, left 0px top 0px, left 20px top 0px, left 4px top 4px, left 4px top 54px, left 4px top 4px, left 16px top 4px, left 8px top 8px; background-repeat: no-repeat; opacity: .45; -webkit-mask-image: linear-gradient(180deg, #000 0 58%, transparent 100%); mask-image: linear-gradient(180deg, #000 0 58%, transparent 100%); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener::after { background-image: linear-gradient(90deg, var(--ochra-jasna) 0 100%), linear-gradient(90deg, var(--ochra-jasna) 0 100%), linear-gradient(90deg, var(--ochra-jasna) 0 100%), linear-gradient(90deg, var(--ochra-jasna) 0 100%), linear-gradient(90deg, var(--ochra-jasna) 0 100%), linear-gradient(90deg, var(--ochra-jasna) 0 100%), linear-gradient(90deg, var(--ochra-jasna) 0 100%), linear-gradient(90deg, var(--ochra-jasna) 0 100%), linear-gradient(90deg, var(--ochra-jasna) 0 100%); opacity: .55; } } /* --- 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__lawenda, .naglowek__zakresy, .hero__lawenda, .hero__zakresy, .hero__zanik, .stopka__plyta, .stopka__zakresy { display: none !important; } html { font-size: 11pt; } body, .naglowek, .hero, .stopka, .pasmo, .pasmo:nth-of-type(even), .pasmo:last-of-type:not(:nth-of-type(1)) { background: #fff !important; color: #000 !important; } .tytul, .hero .tytul, .tresc h2, .tresc h3, .znak__slowo, .stopka__znak, .hero p, .stopka__menu a, .menu__link { color: #000 !important; } .tresc .hero p:not(.przejscie) a:not(.przycisk) { color: #000 !important; } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p, .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2, .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h3, .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zajawka, .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zrodlo { color: #000 !important; border-inline-start-color: #000 !important; } .pasmo > .kontener > h2::before { color: #000 !important; border-color: #000 !important; } .tresc .kroki li::before { background: none !important; color: #000 !important; border-color: #000 !important; } .tresc .wyliczenie li::before { background-image: linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%) !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(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%) !important; } .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(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%) !important; } .pasmo > .kontener > h2::before { background-image: linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%) !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; } }