/* ===================================================================== darmowe-rozmowy.pl — MAKIETA PREMIUM „ZASIĘG FUNKCJI SPRAWDZA SIĘ PARAMI — PARA Z JEDNYM PEŁNYM POLEM NIE JEST KOMPLETEM” --------------------------------------------------------------------- Teza serwisu, jego własnymi słowami: h2 „**Zasięg funkcji sprawdza się parami**”; „**Możliwość dzwonienia na numery nie oznacza, że użytkownik otrzyma numer do odbierania**”; „**Połączenie przychodzące jest osobnym produktem funkcjonalnym**”; h1 „**bezpłatna dla kogo i w jakim trybie?**”. Rysunek (zmierzony): trzy pary RÓWNYCH pól. Pierwsza: oba pełne — komplet. Druga: pełne + pusty obrys — dzwonić można, odbierać nie. Trzecia: pusty obrys + pełne — odwrotnie. Przerwa w parze mała, między parami duża: to PRZERWA rozstrzyga, co jest parą (kanon 13b). ⚠⚠ POLA W PARZE SĄ RÓWNE — nierówne mówiłyby o wielkości, nie o kompletności. Brak jest PUSTYM OBRYSEM, nie przerywaną kreską. ⚠⚠ CZEGO TU NIE MA — I DLACZEGO: * ŻADNYCH BELEK Z DWOMA ZACZEPAMI — otosekretarka.pl: tam belka niesie dwa atrybuty, tu para to DWIE POŁOWY tej samej funkcji. * ŻADNYCH NIERÓWNYCH PÓL W JEDNYM OBRYSIE — fotowoltaika.pisz.pl; ŻADNYCH CZTERECH PÓL Z PRZERWĄ — pomowienia.pl; ŻADNYCH TORÓW MIĘDZY KOŃCAMI — centralewirtualne.pl; ŻADNEGO PASMA Z WIERSZAMI — cheaproaming.info. * ŻADNEJ SŁUCHAWKI, DYMKA, STRZAŁEK, PTASZKA, KRZYŻYKA, SYLWETKI, CZERWIENI — zakazy rodziny TELEFON; bez cyfr i liter (kanon 13). Pełny zapis: PROJEKT-PREMIUM.md. ⚠ UCZCIWIE O BARWIE: brzoskwinia #F1E6DB — sąsiedzi: piasek ciepły #EFEAE1 (bledszy), tynk różowy #EBE4E1 (szarszy), kreda #EEEDE4 (neutralna). Śliwa #5A2D5C — sąsiedzi: fuksja olecka #8E2E6B (PV, czerwieńsza), róż stargardu #8A3C50 (PV); w TELEFON fioletu nie ma. **Śliwa na brzoskwini** to para, której w serii nie ma. ⚠ CARDO ma wagi 400 i 700 — waga 500 szkieletu idzie na 400. ⚠ SPLINE SANS 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 5,8 ≥ 2,0 — przy 390 px rysunek mieści się nad tytułem. ===================================================================== */ /* --- 1. TOKENY ------------------------------------------------------- */ :root { --brzoskwinia: #F1E6DB; /* jasna płyta nagłówka i hero — brzoskwinia, ciepła */ --brzoskwinia-cien: #E0D3C5; /* ⚠ najciemniejszy punkt jasnej płyty — pismo liczone TAKŻE tu */ --papier: #F8F4F0; --karta: #FFFFFF; --noc: #241B24; /* pasmo domykające i stopka — noc śliwkowa */ --noc-blask: #463746; /* ⚠ najjaśniejszy punkt ciemnej płyty */ --tekst: #1D1719; /* 16.14 / 17.66 / 14.37 na płycie / 12.02 na cieniu */ --tekst-cichy: #4F4549; /* 8.42 / 9.21 / 7.49 na płycie / 6.27 na cieniu */ --na-nocy: #F2EAF0; /* 14.16 / 9.39 na blasku */ --na-nocy-cichy: #C7B8C4; /* 8.81 / 5.85 na blasku */ /* śliwa — TRZY wartości (kanon, punkt 12), policzone skryptem */ --sliwa-pismo: #5A2D5C; /* PISMO — 9.77 / 10.69 / 8.69 na płycie / 7.28 na cieniu */ --sliwa-kreska: #7A4A7C; /* kreski — 6.19 / 6.78 / 5.51 na płycie / 4.61 na cieniu */ --sliwa-jasna: #E2B8E0; /* na ciemnych płytach — 9.68 / 6.42 na blasku */ --obwodka: #766C72; /* 4.61 / 5.05 / 4.11 na płycie / 3.44 na cieniu */ --linia-cicha: #E6DFE1; --obwodka-ciemna:#9A8A98; /* 5.14 / 3.41 na blasku */ /* przyciski: biel na piśmie 10.69, noc na jasnej 9.68 */ --kroj-naglowek: "Cardo", Georgia, "Times New Roman", serif; --kroj-tekst: "Figtree", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --kroj-maszyna: "Spline Sans 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(36, 27, 36, .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(--sliwa-jasna); color: var(--noc); } :focus-visible { outline: 3px solid var(--sliwa-pismo); outline-offset: 2px; } .stopka :focus-visible { outline-color: var(--sliwa-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(--sliwa-pismo); color: var(--karta); font-weight: 600; text-decoration: none; } .omin:focus { inset-inline-start: 0; } /* --- 2b. BRZOSKWINIA 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(--brzoskwinia); } /* --- 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__brzoskwinia { position: absolute; z-index: 0; inset: 0; background-color: var(--brzoskwinia); background-image: linear-gradient(180deg, var(--brzoskwinia) 0%, var(--brzoskwinia-cien) 100%); } /* wzdłuż dolnej krawędzi: trzy pary pól — komplet, pełne+obrys, obrys+pełne; 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__pary { position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 0; height: 15px; background-image: repeating-linear-gradient(90deg, transparent 0 0px, var(--sliwa-kreska) 0px 8px, transparent 8px 84px), repeating-linear-gradient(90deg, transparent 0 10px, var(--sliwa-kreska) 10px 18px, transparent 18px 84px), repeating-linear-gradient(90deg, transparent 0 24px, var(--sliwa-kreska) 24px 32px, transparent 32px 84px), repeating-linear-gradient(90deg, transparent 0 34px, var(--sliwa-kreska) 34px 42px, transparent 42px 84px), repeating-linear-gradient(90deg, transparent 0 34px, var(--sliwa-kreska) 34px 42px, transparent 42px 84px), repeating-linear-gradient(90deg, transparent 0 34px, var(--sliwa-kreska) 34px 36px, transparent 36px 84px), repeating-linear-gradient(90deg, transparent 0 40px, var(--sliwa-kreska) 40px 42px, transparent 42px 84px), repeating-linear-gradient(90deg, transparent 0 48px, var(--sliwa-kreska) 48px 56px, transparent 56px 84px), repeating-linear-gradient(90deg, transparent 0 48px, var(--sliwa-kreska) 48px 56px, transparent 56px 84px), repeating-linear-gradient(90deg, transparent 0 48px, var(--sliwa-kreska) 48px 50px, transparent 50px 84px), repeating-linear-gradient(90deg, transparent 0 54px, var(--sliwa-kreska) 54px 56px, transparent 56px 84px), repeating-linear-gradient(90deg, transparent 0 58px, var(--sliwa-kreska) 58px 66px, transparent 66px 84px); background-size: 100% 8px, 100% 8px, 100% 8px, 100% 2px, 100% 2px, 100% 8px, 100% 8px, 100% 2px, 100% 2px, 100% 8px, 100% 8px, 100% 8px; background-position: 0 3px, 0 3px, 0 3px, 0 3px, 0 9px, 0 3px, 0 3px, 0 3px, 0 9px, 0 3px, 0 3px, 0 3px; 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__pary`. */ .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 pary pól 6 px — komplet, pełne+obrys, obrys+pełne */ .znak__pary { flex: none; width: 50px; height: 18px; background-image: linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%); background-size: 6px 6px, 6px 6px, 6px 6px, 6px 2px, 6px 2px, 2px 6px, 2px 6px, 6px 2px, 6px 2px, 2px 6px, 2px 6px, 6px 6px; background-position: left 0px top 6px, left 8px top 6px, left 18px top 6px, left 26px top 6px, left 26px top 10px, left 26px top 6px, left 30px top 6px, left 36px top 6px, left 36px top 10px, left 36px top 6px, left 40px top 6px, left 44px top 6px; 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(--sliwa-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(--sliwa-pismo); } /* pozycja bieżąca: pod napisem dwie pary pól — komplet i para z pustym obrysem; pola w px od lewej krawędzi napisu. ⚠⚠ KANON 3b: znacznik OBOK pisma, nigdy tło pod nim. ⚠ Odstępy w PIKSELACH — pudełko ma sztywne min-height 46px (P-11). */ .menu__link[aria-current="page"] { color: var(--tekst); font-weight: 600; } .menu__link[aria-current="page"]::after { content: ""; position: absolute; inset-block-end: 6px; inset-inline-start: calc(.5em + 2px); inset-inline-end: calc(.5em + 2px); height: 9px; background-image: linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%); background-size: 5px 5px, 5px 5px, 5px 5px, 5px 2px, 5px 2px, 2px 5px, 2px 5px; background-position: left 0px top 2px, left 7px top 2px, left 17px top 2px, left 24px top 2px, left 24px top 5px, left 24px top 2px, left 27px top 2px; background-repeat: no-repeat; } /* --- 5. HERO — zasięg funkcji sprawdza się parami ------------------- */ .hero { overflow: hidden; padding-block: clamp(2.6rem, 1.6rem + 4vw, 6rem) clamp(3rem, 1.8rem + 4.4vw, 6.6rem); background: var(--brzoskwinia); border-block-end: 1px solid var(--linia-cicha); } .hero__brzoskwinia { position: absolute; z-index: 0; inset: 0; background-color: var(--brzoskwinia); background-image: radial-gradient(62% 68% at 88% 12%, var(--brzoskwinia-cien) 0%, rgba(224, 211, 197, 0) 66%), linear-gradient(170deg, var(--brzoskwinia) 0%, var(--brzoskwinia-cien) 100%); } /* Rysunek jest CIEMNY na jasnym, więc pracuje przy niskim kryciu — ma nie konkurować z tytułem. */ .hero__pary { position: absolute; z-index: 1; /* ⚠ Rysunek W CAŁOŚCI w kadrze (WSZYSTKIE trzy pary), obok kolumny (1320–1920 px), nie pod nią. ⚠⚠ Obcięcie z boku zabrałoby jedną parę — a bez komplety obok niekompletnych nie ma porównania. Kadr bardzo niski (5,8 ≥ 2,0). */ inset-block-start: 54%; inset-inline-end: 2%; width: clamp(26rem, 30vw, 38rem); aspect-ratio: 580 / 100; transform: translateY(-50%); color: var(--sliwa-pismo); opacity: .38; } .hero__pary 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(--brzoskwinia) 0%, rgba(241, 230, 219, .94) 30%, rgba(241, 230, 219, .2) 50%, rgba(241, 230, 219, 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__pary { inset-block-start: 0; inset-inline-end: 4%; width: clamp(16rem, 74vw, 34rem); transform: none; opacity: .38; } .hero__zanik { background: linear-gradient(180deg, rgba(241, 230, 219, 0) 0%, rgba(241, 230, 219, 0) 22%, rgba(241, 230, 219, .9) 40%, rgba(241, 230, 219, .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 pary pól 26 px — największa skala w arkuszu, dwanaście warstw */ .hero .tytul::before { content: ""; display: block; width: 11rem; height: 26px; margin-block-end: clamp(1rem, .7rem + .8vw, 1.7rem); background-image: linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%); background-size: 26px 26px, 26px 26px, 26px 26px, 26px 3px, 26px 3px, 3px 26px, 3px 26px, 26px 3px, 26px 3px, 3px 26px, 3px 26px, 26px 26px; background-position: left 0px top 0px, left 28px top 0px, left 61px top 0px, left 89px top 0px, left 89px top 23px, left 89px top 0px, left 112px top 0px, left 122px top 0px, left 122px top 23px, left 122px top 0px, left 145px top 0px, left 150px top 0px; 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(--sliwa-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(--sliwa-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(--sliwa-jasna); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk) { color: var(--sliwa-jasna); text-decoration-color: var(--sliwa-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 dwiema parami pól — komplet i para z pustym obrysem. ⚠ 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: 2rem; margin-block-end: .6rem; padding-block-end: 12px; background-image: linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%); background-size: 7px 7px, 7px 7px, 7px 7px, 7px 2px, 7px 2px, 2px 7px, 2px 7px; background-position: left 0px bottom 1px, left 9px bottom 1px, left 22px bottom 1px, left 31px bottom 1px, left 31px bottom 6px, left 31px bottom 1px, left 36px bottom 1px; background-repeat: no-repeat; font-family: var(--kroj-maszyna); font-weight: 400; font-size: .76rem; letter-spacing: -.01em; color: var(--sliwa-pismo); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2::before { color: var(--sliwa-jasna); background-image: linear-gradient(90deg, var(--sliwa-jasna) 0 100%), linear-gradient(90deg, var(--sliwa-jasna) 0 100%), linear-gradient(90deg, var(--sliwa-jasna) 0 100%), linear-gradient(90deg, var(--sliwa-jasna) 0 100%), linear-gradient(90deg, var(--sliwa-jasna) 0 100%), linear-gradient(90deg, var(--sliwa-jasna) 0 100%), linear-gradient(90deg, var(--sliwa-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(--sliwa-kreska); color: var(--tekst-cichy); font-size: clamp(1.01rem, .96rem + .28vw, 1.16rem); } .tresc p a:not(.przycisk) { color: var(--sliwa-pismo); text-decoration-line: underline; text-decoration-color: var(--sliwa-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 wykonany jest pełnym polem, nie obrysem. WYLICZENIE to rzeczy do sprawdzenia — dwie pary pól: komplet i para z pustym obrysem; pozycja wykazu to funkcja do sprawdzenia W PARZE. ⚠ To rozróżnienie jest treścią serwisu, nie dekoracją. ⚠ Pismo w pudełku to --karta na --sliwa-pismo; na ciemnym paśmie pudełko odwraca się na --sliwa-jasna z pismem --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 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(--sliwa-pismo); color: var(--karta); 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: var(--sliwa-jasna); color: var(--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: dwie pary pól 5 px — komplet i para z pustym obrysem. ⚠ Siedem 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: .55em; inset-inline-start: 0; width: 28px; height: 9px; background-image: linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%); background-size: 5px 5px, 5px 5px, 5px 5px, 5px 2px, 5px 2px, 2px 5px, 2px 5px; background-position: left 0px top 2px, left 7px top 2px, left 16px top 2px, left 23px top 2px, left 23px top 5px, left 23px top 2px, left 26px top 2px; background-repeat: no-repeat; } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wyliczenie li::before { background-image: linear-gradient(90deg, var(--sliwa-jasna) 0 100%), linear-gradient(90deg, var(--sliwa-jasna) 0 100%), linear-gradient(90deg, var(--sliwa-jasna) 0 100%), linear-gradient(90deg, var(--sliwa-jasna) 0 100%), linear-gradient(90deg, var(--sliwa-jasna) 0 100%), linear-gradient(90deg, var(--sliwa-jasna) 0 100%), linear-gradient(90deg, var(--sliwa-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(--sliwa-pismo); text-decoration-line: underline; text-decoration-color: var(--sliwa-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(--sliwa-jasna); text-decoration-color: var(--sliwa-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(--sliwa-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(242, 234, 240, .07); color: var(--na-nocy-cichy); border-color: var(--obwodka-ciemna); border-inline-start-color: var(--sliwa-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(--sliwa-jasna); color: var(--na-nocy); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .przejscie a:hover { background: var(--sliwa-jasna); border-color: var(--sliwa-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(--sliwa-pismo); color: var(--karta); border: 2px solid var(--sliwa-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(--sliwa-jasna); color: var(--noc); border-color: var(--sliwa-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 — DWIE PARY PÓL 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: dwie pary pól — komplet i para z pustym obrysem */ .zapowiedz::before { content: ""; position: absolute; inset-block-start: -1px; inset-inline-start: clamp(1.2rem, .9rem + 1vw, 1.8rem); width: 3.4rem; height: 9px; background-image: linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%); background-size: 7px 7px, 7px 7px, 7px 7px, 7px 2px, 7px 2px, 2px 7px, 2px 7px; background-position: left 0px top 1px, left 9px top 1px, left 22px top 1px, left 31px top 1px, left 31px top 6px, left 31px top 1px, left 36px top 1px; 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(--sliwa-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(--sliwa-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(--sliwa-pismo); font-weight: 600; font-size: .95rem; border-block-end: 2px solid var(--sliwa-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(--sliwa-kreska); border-radius: 0; padding: 0 .1rem; min-height: 44px; color: var(--sliwa-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(70, 55, 70, 0) 64%), linear-gradient(180deg, var(--noc-blask) 0%, var(--noc) 58%); } /* ten sam pas co w nagłówku */ .stopka__pary { position: absolute; z-index: 1; inset-inline: 0; inset-block-start: 0; height: 15px; background-image: repeating-linear-gradient(90deg, transparent 0 0px, var(--sliwa-jasna) 0px 8px, transparent 8px 84px), repeating-linear-gradient(90deg, transparent 0 10px, var(--sliwa-jasna) 10px 18px, transparent 18px 84px), repeating-linear-gradient(90deg, transparent 0 24px, var(--sliwa-jasna) 24px 32px, transparent 32px 84px), repeating-linear-gradient(90deg, transparent 0 34px, var(--sliwa-jasna) 34px 42px, transparent 42px 84px), repeating-linear-gradient(90deg, transparent 0 34px, var(--sliwa-jasna) 34px 42px, transparent 42px 84px), repeating-linear-gradient(90deg, transparent 0 34px, var(--sliwa-jasna) 34px 36px, transparent 36px 84px), repeating-linear-gradient(90deg, transparent 0 40px, var(--sliwa-jasna) 40px 42px, transparent 42px 84px), repeating-linear-gradient(90deg, transparent 0 48px, var(--sliwa-jasna) 48px 56px, transparent 56px 84px), repeating-linear-gradient(90deg, transparent 0 48px, var(--sliwa-jasna) 48px 56px, transparent 56px 84px), repeating-linear-gradient(90deg, transparent 0 48px, var(--sliwa-jasna) 48px 50px, transparent 50px 84px), repeating-linear-gradient(90deg, transparent 0 54px, var(--sliwa-jasna) 54px 56px, transparent 56px 84px), repeating-linear-gradient(90deg, transparent 0 58px, var(--sliwa-jasna) 58px 66px, transparent 66px 84px); background-size: 100% 8px, 100% 8px, 100% 8px, 100% 2px, 100% 2px, 100% 8px, 100% 8px, 100% 2px, 100% 2px, 100% 8px, 100% 8px, 100% 8px; background-position: 0 3px, 0 3px, 0 3px, 0 3px, 0 9px, 0 3px, 0 3px, 0 3px, 0 9px, 0 3px, 0 3px, 0 3px; 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 pary pól 11 px */ .stopka__znak::after { content: ""; display: block; width: 5rem; height: 12px; margin-block-start: .6rem; background-image: linear-gradient(90deg, var(--sliwa-jasna) 0 100%), linear-gradient(90deg, var(--sliwa-jasna) 0 100%), linear-gradient(90deg, var(--sliwa-jasna) 0 100%), linear-gradient(90deg, var(--sliwa-jasna) 0 100%), linear-gradient(90deg, var(--sliwa-jasna) 0 100%), linear-gradient(90deg, var(--sliwa-jasna) 0 100%), linear-gradient(90deg, var(--sliwa-jasna) 0 100%), linear-gradient(90deg, var(--sliwa-jasna) 0 100%), linear-gradient(90deg, var(--sliwa-jasna) 0 100%), linear-gradient(90deg, var(--sliwa-jasna) 0 100%), linear-gradient(90deg, var(--sliwa-jasna) 0 100%), linear-gradient(90deg, var(--sliwa-jasna) 0 100%); background-size: 11px 11px, 11px 11px, 11px 11px, 11px 2px, 11px 2px, 2px 11px, 2px 11px, 11px 2px, 11px 2px, 2px 11px, 2px 11px, 11px 11px; background-position: left 0px top 0px, left 13px top 0px, left 28px top 0px, left 41px top 0px, left 41px top 9px, left 41px top 0px, left 50px top 0px, left 56px top 0px, left 56px top 9px, left 56px top 0px, left 65px top 0px, left 69px top 0px; 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(--sliwa-jasna); text-decoration: underline; text-underline-offset: .3em; } /* --- 13. SZEROKIE EKRANY — DWIE PARY PÓL 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; } /* dwie pary pól pionowo: od góry komplet, niżej para z pustym obrysem */ .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(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%), linear-gradient(90deg, var(--sliwa-kreska) 0 100%); background-size: 12px 12px, 12px 12px, 12px 12px, 12px 2px, 12px 2px, 2px 12px, 2px 12px; background-position: left 2px top 0px, left 2px top 15px, left 2px top 37px, left 2px top 52px, left 2px top 62px, left 2px top 52px, left 12px top 52px; 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(--sliwa-jasna) 0 100%), linear-gradient(90deg, var(--sliwa-jasna) 0 100%), linear-gradient(90deg, var(--sliwa-jasna) 0 100%), linear-gradient(90deg, var(--sliwa-jasna) 0 100%), linear-gradient(90deg, var(--sliwa-jasna) 0 100%), linear-gradient(90deg, var(--sliwa-jasna) 0 100%), linear-gradient(90deg, var(--sliwa-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__brzoskwinia, .naglowek__pary, .hero__brzoskwinia, .hero__pary, .hero__zanik, .stopka__plyta, .stopka__pary { 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%) !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%) !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%), 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%) !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; } }