/* ===================================================================== panele.ketrzyn.pl — MAKIETA PREMIUM „TEN SAM RZĄD BRAMEK NAD DWOMA RÓŻNYMI MIEJSCAMI” --------------------------------------------------------------------- Teza serwisu, jego własnymi słowami: „**Rzetelne porównanie nie polega na zapisaniu, gdzie «wejdzie więcej paneli», lecz na zestawieniu tych samych bramek: technicznej, przestrzennej, własnościowej, konserwatorskiej, przyrodniczej, elektrycznej i proceduralnej**”, h2 „**Macierz bez rankingu**”, h2 „**Wynik: nie werdykt, lecz czytelna teczka**”, „Karta ograniczeń miejsca […] **oddziela fakty potwierdzone dowodem od pytań**”, „**Nie zaczynaj od mocy, modelu modułu ani obietnicy uzysku**”. Rysunek (zmierzony): dwie bryły o różnym kształcie (dach: wyższa i krótsza; grunt: niższa i dłuższa). Nad KAŻDĄ dokładnie TEN SAM rząd siedmiu bramek (obrysy). Odpowiedzi — pełne znaki w bramkach — są RÓŻNE, bramki są TE SAME. ⚠⚠ ŻADNEJ SUMY, WYNIKU ANI WYRÓŻNIENIA któregoś miejsca. Liczba pełnych znaków jest różna, ale nic ich nie liczy — „wynik: nie werdykt”. To ODWROTNOŚĆ fotowoltaika.pomorze.pl: tam JEDNA etykieta nie obejmuje różnych elementów; tu JEDEN rząd bramek obejmuje dwa różne miejsca w całości — i właśnie dlatego porównanie jest rzetelne. ⚠⚠ CZEGO TU NIE MA — I DLACZEGO: * ŻADNEGO PANELU, DACHU JAKO DACHU, DZIAŁKI Z GRANICĄ ANI PINEZKI — „najpierw działka, nie pinezka na mapie”; zakaz rodziny PV. * SIEDEM BRAMEK to siedem MAŁYCH znaków w rzędzie POWTÓRZONYM nad dwoma ciałami — nie siedem PÓL jednej podstawy (fotowoltaika.ostroda.pl). * ŻADNEJ MATRYCY Z SIATKĄ, mimo h2 „Macierz bez rankingu” — matryca z pustymi polami to dobrykandydat.pl; tu są dwa rzędy nad dwoma bryłami, bez kolumn i bez siatki. * ŻADNYCH JEDNAKOWYCH OKŁADEK O RÓŻNYCH WNĘTRZACH — audytorenergetyczny.com; tu jednakowe są BRAMKI, a różne są CIAŁA pod nimi. * ŻADNEJ PACZKI Z MIEJSCEM NA DOWÓD — ostrołęka; tu znak w bramce to odpowiedź, nie dowód, a puste bramki nie są brakiem. * ŻADNEJ PODZIAŁKI ANI OSI; bez cyfr i liter (kanon, punkt 13). Pełny zapis: PROJEKT-PREMIUM.md. ⚠ UCZCIWIE O BARWIE: kość #EDEBE4 to DWUNASTA jasna płyta rodziny — między piaskowym łukowa #EDE7DC (bardziej pomarańczowy) a perłą świdnicy #E9E9E7 (neutralna); jest ciepła, lekko żółtawa. Czerwień winna #6E2434 stoi między karminem łukowa #8E2F3A (jaśniejszy), śliwką puław #5B2A46 (fiołkowa) i cegłą wołomina #7A3B2A (pomarańczowa) — jest głębsza i czystsza; **wino na kości** to para, której w rodzinie nie ma. ⚠ FENIX ma tylko wagę 400 — WSZYSTKIE nagłówki idą 400, hierarchia na ROZMIARZE (kanon, punkt 11). ⚠ Amethysta ODRZUCONA: brak latin-ext. ⚠ ANONYMOUS PRO w jednej 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 4,5 ≥ 2,0 — przy 390 px rysunek mieści się nad tytułem. ===================================================================== */ /* --- 1. TOKENY ------------------------------------------------------- */ :root { --kosc: #EDEBE4; /* jasna płyta nagłówka i hero — kość */ --kosc-cien: #DCD9CF; /* ⚠ najciemniejszy punkt jasnej płyty — pismo liczone TAKŻE tu */ --papier: #F8F7F3; --karta: #FFFFFF; --wino-noc: #1C1216; /* pasmo domykające i stopka */ --wino-blask: #3B2A31; /* ⚠ najjaśniejszy punkt ciemnej płyty */ --tekst: #1B1A18; /* 14,58 / 12,31 na cieniu / 16,22 / 17,39 */ --tekst-cichy: #4C4A45; /* 7,42 / 6,27 na cieniu / 8,26 / 8,85 */ --na-winie: #EFE8EA; /* 15,16 / 11,14 na blasku */ --na-winie-cichy: #B9ADB1; /* 8,43 / 6,20 na blasku */ /* czerwień winna — TRZY wartości (kanon, punkt 12), policzone */ --wino-pismo: #6E2434; /* PISMO — 8,96 / 7,57 na cieniu / 9,97 / 10,69 */ --wino-kreska: #9A4256; /* kreski — 5,35 / 4,52 na cieniu / 5,96 / 6,39 */ --wino-jasne: #EDB4C0; /* na ciemnych płytach — 10,36 / 7,61 na blasku */ --obwodka: #78756D; /* 3,86 na kości / 3,26 na cieniu / 4,29 / 4,60 */ --linia-cicha: #E4E1D8; --obwodka-ciemna:#8C7F84; /* 4,78 na nocy / 3,51 na blasku */ --kroj-naglowek: "Fenix", Georgia, "Times New Roman", serif; --kroj-tekst: "Rubik", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --kroj-maszyna: "Anonymous Pro", 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(28, 18, 22, .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(--wino-jasne); color: var(--wino-noc); } :focus-visible { outline: 3px solid var(--wino-pismo); outline-offset: 2px; } .stopka :focus-visible { outline-color: var(--wino-jasne); } /* ⚠ 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(--wino-pismo); color: var(--karta); font-weight: 600; text-decoration: none; } .omin:focus { inset-inline-start: 0; } /* --- 2b. KOŚĆ 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(--kosc); } /* --- 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__kosc { position: absolute; z-index: 0; inset: 0; background-color: var(--kosc); background-image: linear-gradient(180deg, var(--kosc) 0%, var(--kosc-cien) 100%); } /* wzdłuż dolnej krawędzi: TRZY BRAMKI (dwie szyny każda) z dwiema odpowiedziami, pod nimi ciało; obok drugie, dłuższe ciało bez własnych bramek w tym samym okresie — 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__bramki { position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 0; height: 15px; background-image: repeating-linear-gradient(90deg, var(--wino-kreska) 0 8px, transparent 8px 12px, var(--wino-kreska) 12px 20px, transparent 20px 24px, var(--wino-kreska) 24px 32px, transparent 32px 84px), repeating-linear-gradient(90deg, var(--wino-kreska) 0 8px, transparent 8px 12px, var(--wino-kreska) 12px 20px, transparent 20px 24px, var(--wino-kreska) 24px 32px, transparent 32px 84px), repeating-linear-gradient(90deg, transparent 0 2px, var(--wino-kreska) 2px 6px, transparent 6px 84px), repeating-linear-gradient(90deg, transparent 0 26px, var(--wino-kreska) 26px 30px, transparent 30px 84px), repeating-linear-gradient(90deg, transparent 0 0px, var(--wino-kreska) 0px 32px, transparent 32px 84px), repeating-linear-gradient(90deg, transparent 0 44px, var(--wino-kreska) 44px 74px, transparent 74px 84px); background-size: 100% 2px, 100% 2px, 100% 3px, 100% 3px, 100% 4px, 100% 3px; background-position: 0 1px, 0 7px, 0 3px, 0 3px, 0 11px, 0 12px; 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__bramki`. */ .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: DWIE bramki (jedna z odpowiedzią) nad ciałem */ .znak__bramki { flex: none; width: 34px; height: 17px; background-image: linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%); background-size: 8px 2px, 8px 2px, 2px 8px, 2px 8px, 8px 2px, 8px 2px, 2px 8px, 2px 8px, 2px 2px, 34px 5px; background-position: left calc(0px + 0px) top 0px, left calc(0px + 0px) top calc(0px + 6px), left calc(0px + 0px) top 0px, left calc(calc(0px + 0px) + 6px) top 0px, left calc(0px + 12px) top 0px, left calc(0px + 12px) top calc(0px + 6px), left calc(0px + 12px) top 0px, left calc(calc(0px + 12px) + 6px) top 0px, left calc(0px + 3px) top calc(0px + 3px), left 0px bottom 0px; background-repeat: no-repeat; } .znak__slowo { font-family: var(--kroj-naglowek); font-weight: 400; font-size: clamp(1.08rem, .96rem + .46vw, 1.4rem); letter-spacing: -.01em; } .znak:hover .znak__slowo { color: var(--wino-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(--wino-pismo); } /* pozycja bieżąca: pod napisem ciało na całą szerokość, a nad nim DWIE bramki przy lewej krawędzi (jedna z odpowiedzią). ⚠⚠ 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: 12px; background-image: linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%); background-size: 7px 2px, 7px 2px, 2px 7px, 2px 7px, 7px 2px, 7px 2px, 2px 7px, 2px 7px, 1px 1px, 100% 3px; background-position: left calc(0px + 0px) top 0px, left calc(0px + 0px) top calc(0px + 5px), left calc(0px + 0px) top 0px, left calc(calc(0px + 0px) + 5px) top 0px, left calc(0px + 10px) top 0px, left calc(0px + 10px) top calc(0px + 5px), left calc(0px + 10px) top 0px, left calc(calc(0px + 10px) + 5px) top 0px, left calc(0px + 13px) top calc(0px + 3px), left 0px bottom 0px; background-repeat: no-repeat; } /* --- 5. HERO — ten sam rząd bramek nad dwoma miejscami ------------- */ .hero { overflow: hidden; padding-block: clamp(2.6rem, 1.6rem + 4vw, 6rem) clamp(3rem, 1.8rem + 4.4vw, 6.6rem); background: var(--kosc); border-block-end: 1px solid var(--linia-cicha); } .hero__kosc { position: absolute; z-index: 0; inset: 0; background-color: var(--kosc); background-image: radial-gradient(62% 68% at 88% 12%, var(--kosc-cien) 0%, rgba(220, 217, 207, 0) 66%), linear-gradient(170deg, var(--kosc) 0%, var(--kosc-cien) 100%); } /* Rysunek jest CIEMNY na jasnym, więc pracuje przy niskim kryciu — ma nie konkurować z tytułem. */ .hero__bramki { position: absolute; z-index: 1; /* ⚠ Rysunek W CAŁOŚCI w kadrze (OBA rzędy bramek nad OBOMA ciałami), obok kolumny (1320–1920 px), nie pod nią. ⚠⚠ Obcięcie prawej strony zostawia jedno miejsce z bramkami — a wtedy nie ma czego porównywać i rysunek mówi „karta", nie „ta sama metoda". ⚠ Kadr ciasny i bardzo szeroki (proporcja 4,5 ≥ 2,0). */ inset-block-start: 54%; inset-inline-end: 2%; width: clamp(26rem, 30vw, 38rem); aspect-ratio: 440 / 98; transform: translateY(-50%); color: var(--wino-pismo); opacity: .38; } .hero__bramki 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(--kosc) 0%, rgba(237, 235, 228, .94) 30%, rgba(237, 235, 228, .2) 50%, rgba(237, 235, 228, 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__bramki { inset-block-start: 0; inset-inline-end: 4%; width: clamp(16rem, 74vw, 34rem); transform: none; opacity: .38; } .hero__zanik { background: linear-gradient(180deg, rgba(237, 235, 228, 0) 0%, rgba(237, 235, 228, 0) 22%, rgba(237, 235, 228, .9) 40%, rgba(237, 235, 228, .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: 400; 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: TEN SAM rząd trzech bramek nad DWOMA różnymi ciałami, z różnymi odpowiedziami — cała teza w dwudziestu ośmiu warstwach. ⚠ To najgęstszy ozdobnik w serii; liczba warstw jest tu skutkiem metafory (dwa rzędy po trzy obrysy), nie celem (aneks 1.6). */ .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(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%); background-size: 9px 2px, 9px 2px, 2px 9px, 2px 9px, 9px 2px, 9px 2px, 2px 9px, 2px 9px, 9px 2px, 9px 2px, 2px 9px, 2px 9px, 3px 3px, 3px 3px, 2.6rem 8px, 9px 2px, 9px 2px, 2px 9px, 2px 9px, 9px 2px, 9px 2px, 2px 9px, 2px 9px, 9px 2px, 9px 2px, 2px 9px, 2px 9px, 3px 3px, 5rem 5px; background-position: left calc(0px + 0px) top 0px, left calc(0px + 0px) top calc(0px + 7px), left calc(0px + 0px) top 0px, left calc(calc(0px + 0px) + 7px) top 0px, left calc(0px + 13px) top 0px, left calc(0px + 13px) top calc(0px + 7px), left calc(0px + 13px) top 0px, left calc(calc(0px + 13px) + 7px) top 0px, left calc(0px + 26px) top 0px, left calc(0px + 26px) top calc(0px + 7px), left calc(0px + 26px) top 0px, left calc(calc(0px + 26px) + 7px) top 0px, left calc(0px + 3px) top calc(0px + 3px), left calc(0px + 29px) top calc(0px + 3px), left 0px bottom 0px, left calc(6rem + 0px) top 0px, left calc(6rem + 0px) top calc(0px + 7px), left calc(6rem + 0px) top 0px, left calc(calc(6rem + 0px) + 7px) top 0px, left calc(6rem + 13px) top 0px, left calc(6rem + 13px) top calc(0px + 7px), left calc(6rem + 13px) top 0px, left calc(calc(6rem + 13px) + 7px) top 0px, left calc(6rem + 26px) top 0px, left calc(6rem + 26px) top calc(0px + 7px), left calc(6rem + 26px) top 0px, left calc(calc(6rem + 26px) + 7px) top 0px, left calc(6rem + 16px) top calc(0px + 3px), left 6rem bottom 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(--wino-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(--wino-noc); background-image: linear-gradient(180deg, var(--wino-blask) 0%, var(--wino-noc) 62%); color: var(--na-winie); } .pasmo:last-of-type:not(:nth-of-type(1))::before { background: var(--wino-jasne); height: 2px; opacity: .8; } /* ⚠⚠ KANON 2: TYLKO BEZPOŚREDNIE DZIECI KONTENERA */ .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p { color: var(--na-winie-cichy); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2 { color: var(--na-winie); } /* ⚠⚠ KANON 2c: h3 i .zajawka mają własną CIEMNĄ barwę z jasnego tła — bez tego 1,07:1 (zmierzone 4.09 na otoenergia.pl). */ .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h3 { color: var(--na-winie); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zajawka { color: var(--na-winie-cichy); border-inline-start-color: var(--wino-jasne); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk) { color: var(--wino-jasne); text-decoration-color: var(--wino-jasne); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk):hover { color: var(--na-winie); } /* --- 7. TYPOGRAFIA TREŚCI ------------------------------------------- */ .tresc h2 { margin: 0 0 clamp(.7rem, .5rem + .5vw, 1.1rem); font-family: var(--kroj-naglowek); font-weight: 400; 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 BRAMKAMI (jedna z odpowiedzią) i ciałem. ⚠ Pudełko ma stałą wysokość w px u dołu (padding 16 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.4rem; height: 2.2rem; margin-block-end: .6rem; padding-block-end: 16px; background-image: linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%); background-size: 8px 2px, 8px 2px, 2px 8px, 2px 8px, 8px 2px, 8px 2px, 2px 8px, 2px 8px, 2px 2px, 100% 4px; background-position: left calc(0px + 0px) bottom 5px, left calc(0px + 0px) bottom calc(5px + 6px), left calc(0px + 0px) bottom 5px, left calc(calc(0px + 0px) + 6px) bottom 5px, left calc(0px + 12px) bottom 5px, left calc(0px + 12px) bottom calc(5px + 6px), left calc(0px + 12px) bottom 5px, left calc(calc(0px + 12px) + 6px) bottom 5px, left calc(0px + 3px) bottom calc(5px + 3px), left 0px bottom 0px; background-repeat: no-repeat; font-family: var(--kroj-maszyna); font-weight: 400; font-size: .76rem; letter-spacing: -.01em; color: var(--wino-pismo); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2::before { color: var(--wino-jasne); background-image: linear-gradient(90deg, var(--wino-jasne) 0 100%), linear-gradient(90deg, var(--wino-jasne) 0 100%), linear-gradient(90deg, var(--wino-jasne) 0 100%), linear-gradient(90deg, var(--wino-jasne) 0 100%), linear-gradient(90deg, var(--wino-jasne) 0 100%), linear-gradient(90deg, var(--wino-jasne) 0 100%), linear-gradient(90deg, var(--wino-jasne) 0 100%), linear-gradient(90deg, var(--wino-jasne) 0 100%), linear-gradient(90deg, var(--wino-jasne) 0 100%), linear-gradient(90deg, var(--wino-jasne) 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(--wino-kreska); color: var(--tekst-cichy); font-size: clamp(1.01rem, .96rem + .28vw, 1.16rem); } .tresc p a:not(.przycisk) { color: var(--wino-pismo); text-decoration-line: underline; text-decoration-color: var(--wino-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 faktem potwierdzonym. WYLICZENIE to pytania do rozstrzygnięcia — SAMA BRAMKA (obrys, bez odpowiedzi): pozycja wykazu jest pytaniem, nie faktem. ⚠ To rozróżnienie jest treścią serwisu („oddziela fakty potwierdzone dowodem od pytań”), nie dekoracją. ⚠ Pismo w pudełku to --karta na --wino-pismo (10,69:1); na ciemnym paśmie pudełko odwraca się na --wino-jasne z pismem --wino-noc (10,36:1). -------------------------------------------------------------------- */ .tresc .kroki { margin: .4em 0 1.4em; padding: 0; list-style: none; counter-reset: krok; } .tresc .kroki li { counter-increment: krok; position: relative; padding: .7em 0 .7em 3.2rem; border-block-end: 1px solid var(--linia-cicha); } /* ⚠ Kreskę zdejmujemy ostatniej pozycji W UKŁADZIE; wykaz jednoszpaltowy (P-2). */ .tresc .kroki li:last-child { border-block-end: 0; } /* ⚠⚠ KANON 9b: ODSYŁACZ WEWNĄTRZ `.kroki` JEST CELEM UI. B7 mierzy sam 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(--wino-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(--wino-jasne); color: var(--wino-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: SAMA BRAMKA — obrys bez odpowiedzi; pozycja wykazu jest pytaniem. ⚠ Cztery warstwy; wariant ciemny i druk MUSZĄ mieć tyle samo (kanon 13c). ⚠ Wariantów `nth-child` tu NIE MA — pytania są równorzędne. */ .tresc .wyliczenie li::before { content: ""; position: absolute; inset-block-start: .5em; inset-inline-start: 0; width: 12px; height: 12px; background-image: linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%); background-size: 12px 2px, 12px 2px, 2px 12px, 2px 12px; background-position: left 0px top 0px, left 0px top calc(0px + 10px), left 0px top 0px, left calc(0px + 10px) top 0px; background-repeat: no-repeat; } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wyliczenie li::before { background-image: linear-gradient(90deg, var(--wino-jasne) 0 100%), linear-gradient(90deg, var(--wino-jasne) 0 100%), linear-gradient(90deg, var(--wino-jasne) 0 100%), linear-gradient(90deg, var(--wino-jasne) 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(--wino-pismo); text-decoration-line: underline; text-decoration-color: var(--wino-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(--wino-jasne); text-decoration-color: var(--wino-jasne); } .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(--wino-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, 232, 234, .07); color: var(--na-winie-cichy); border-color: var(--obwodka-ciemna); border-inline-start-color: var(--wino-jasne); } /* --- 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(--wino-noc); border-color: var(--wino-noc); color: var(--na-winie); } .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(--wino-jasne); color: var(--na-winie); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .przejscie a:hover { background: var(--wino-jasne); border-color: var(--wino-jasne); color: var(--wino-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(--wino-pismo); color: var(--karta); border: 2px solid var(--wino-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(--wino-noc); border-color: var(--wino-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(--wino-jasne); color: var(--wino-noc); border-color: var(--wino-jasne); } .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .cta a.przycisk:hover { background: var(--na-winie); border-color: var(--na-winie); } /* --- 11. KARTY KATALOGU — BRAMKI NAD CIAŁEM 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 bramki (jedna z odpowiedzią) nad ciałem */ .zapowiedz::before { content: ""; position: absolute; inset-block-start: -1px; inset-inline-start: clamp(1.2rem, .9rem + 1vw, 1.8rem); width: 4.6rem; height: 13px; background-image: linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%); background-size: 8px 2px, 8px 2px, 2px 8px, 2px 8px, 8px 2px, 8px 2px, 2px 8px, 2px 8px, 2px 2px, 100% 3px; background-position: left calc(0px + 0px) top 0px, left calc(0px + 0px) top calc(0px + 6px), left calc(0px + 0px) top 0px, left calc(calc(0px + 0px) + 6px) top 0px, left calc(0px + 12px) top 0px, left calc(0px + 12px) top calc(0px + 6px), left calc(0px + 12px) top 0px, left calc(calc(0px + 12px) + 6px) top 0px, left calc(0px + 15px) top calc(0px + 3px), left 0px bottom 0px; 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(--wino-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(--wino-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(--wino-pismo); font-weight: 600; font-size: .95rem; border-block-end: 2px solid var(--wino-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(--wino-kreska); border-radius: 0; padding: 0 .1rem; min-height: 44px; color: var(--wino-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(--wino-noc); color: var(--na-winie); } .stopka__plyta { position: absolute; z-index: 0; inset: 0; background-color: var(--wino-noc); background-image: radial-gradient(66% 128% at 88% 100%, var(--wino-blask) 0%, rgba(59, 42, 49, 0) 64%), linear-gradient(180deg, var(--wino-blask) 0%, var(--wino-noc) 58%); } /* ten sam pas co w nagłówku */ .stopka__bramki { position: absolute; z-index: 1; inset-inline: 0; inset-block-start: 0; height: 15px; background-image: repeating-linear-gradient(90deg, var(--wino-jasne) 0 8px, transparent 8px 12px, var(--wino-jasne) 12px 20px, transparent 20px 24px, var(--wino-jasne) 24px 32px, transparent 32px 84px), repeating-linear-gradient(90deg, var(--wino-jasne) 0 8px, transparent 8px 12px, var(--wino-jasne) 12px 20px, transparent 20px 24px, var(--wino-jasne) 24px 32px, transparent 32px 84px), repeating-linear-gradient(90deg, transparent 0 2px, var(--wino-jasne) 2px 6px, transparent 6px 84px), repeating-linear-gradient(90deg, transparent 0 26px, var(--wino-jasne) 26px 30px, transparent 30px 84px), repeating-linear-gradient(90deg, transparent 0 0px, var(--wino-jasne) 0px 32px, transparent 32px 84px), repeating-linear-gradient(90deg, transparent 0 44px, var(--wino-jasne) 44px 74px, transparent 74px 84px); background-size: 100% 2px, 100% 2px, 100% 3px, 100% 3px, 100% 4px, 100% 3px; background-position: 0 1px, 0 7px, 0 3px, 0 3px, 0 11px, 0 12px; 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: 400; font-size: clamp(1.04rem, .96rem + .4vw, 1.3rem); color: var(--na-winie); } /* pod znakiem stopki: trzy bramki (dwie z odpowiedzią) nad ciałem */ .stopka__znak::after { content: ""; display: block; width: 5rem; height: 16px; margin-block-start: .6rem; background-image: linear-gradient(90deg, var(--wino-jasne) 0 100%), linear-gradient(90deg, var(--wino-jasne) 0 100%), linear-gradient(90deg, var(--wino-jasne) 0 100%), linear-gradient(90deg, var(--wino-jasne) 0 100%), linear-gradient(90deg, var(--wino-jasne) 0 100%), linear-gradient(90deg, var(--wino-jasne) 0 100%), linear-gradient(90deg, var(--wino-jasne) 0 100%), linear-gradient(90deg, var(--wino-jasne) 0 100%), linear-gradient(90deg, var(--wino-jasne) 0 100%), linear-gradient(90deg, var(--wino-jasne) 0 100%), linear-gradient(90deg, var(--wino-jasne) 0 100%), linear-gradient(90deg, var(--wino-jasne) 0 100%), linear-gradient(90deg, var(--wino-jasne) 0 100%), linear-gradient(90deg, var(--wino-jasne) 0 100%), linear-gradient(90deg, var(--wino-jasne) 0 100%); background-size: 9px 2px, 9px 2px, 2px 9px, 2px 9px, 9px 2px, 9px 2px, 2px 9px, 2px 9px, 9px 2px, 9px 2px, 2px 9px, 2px 9px, 3px 3px, 3px 3px, 100% 4px; background-position: left calc(0px + 0px) top 0px, left calc(0px + 0px) top calc(0px + 7px), left calc(0px + 0px) top 0px, left calc(calc(0px + 0px) + 7px) top 0px, left calc(0px + 13px) top 0px, left calc(0px + 13px) top calc(0px + 7px), left calc(0px + 13px) top 0px, left calc(calc(0px + 13px) + 7px) top 0px, left calc(0px + 26px) top 0px, left calc(0px + 26px) top calc(0px + 7px), left calc(0px + 26px) top 0px, left calc(calc(0px + 26px) + 7px) top 0px, left calc(0px + 3px) top calc(0px + 3px), left calc(0px + 29px) top calc(0px + 3px), left 0px bottom 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-winie-cichy); text-decoration: none; font-family: var(--kroj-maszyna); font-size: .78rem; letter-spacing: -.01em; } .stopka__menu a:hover { color: var(--wino-jasne); text-decoration: underline; text-underline-offset: .3em; } /* --- 13. SZEROKIE EKRANY — BRAMKI W KOLUMNIE NAD CIAŁEM ------------ ⚠⚠ 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 bramki w kolumnie (jedna z odpowiedzią), pod nimi ciało pionowe */ .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(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(90deg, var(--wino-kreska) 0 100%), linear-gradient(180deg, var(--wino-kreska) 0 100%); background-size: 12px 2px, 12px 2px, 2px 12px, 2px 12px, 12px 2px, 12px 2px, 2px 12px, 2px 12px, 6px 6px, 6px 52%; background-position: left 0px top 0px, left 0px top calc(0px + 10px), left 0px top 0px, left calc(0px + 10px) top 0px, left 0px top 16px, left 0px top calc(16px + 10px), left 0px top 16px, left calc(0px + 10px) top 16px, left 3px top 3px, left 3px bottom 0px; 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(--wino-jasne) 0 100%), linear-gradient(90deg, var(--wino-jasne) 0 100%), linear-gradient(90deg, var(--wino-jasne) 0 100%), linear-gradient(90deg, var(--wino-jasne) 0 100%), linear-gradient(90deg, var(--wino-jasne) 0 100%), linear-gradient(90deg, var(--wino-jasne) 0 100%), linear-gradient(90deg, var(--wino-jasne) 0 100%), linear-gradient(90deg, var(--wino-jasne) 0 100%), linear-gradient(90deg, var(--wino-jasne) 0 100%), linear-gradient(180deg, var(--wino-jasne) 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__kosc, .naglowek__bramki, .hero__kosc, .hero__bramki, .hero__zanik, .stopka__plyta, .stopka__bramki { 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%) !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%), 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%), 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%), 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; } }