/* ============================================================================ OSTOJA — ARKUSZ WSPÓLNY DLA CAŁEGO SERWISU ---------------------------------------------------------------------------- Ten plik jest SYSTEMEM, nie stylem jednej strony. Podstrony (/rys, /puchacz, /zubr, /cennik, /akademia, /zasoby, /kontakt) mają korzystać wyłącznie stąd. ZASADY, KTÓRYCH NIE ŁAMIEMY: 1. Baza jest JASNA. Ciemne sekcje są akcentem i przerywnikiem — układają się naprzemiennie (jasna → ciemna → jasna → ciemna). 2. Kolor niesie znaczenie. Bursztyn = Ryś, fiolet = Puchacz, zieleń = Żubr. Nie używamy tych barw dekoracyjnie w sekcjach, które nie dotyczą modułu. 3. Wszystkie linie i cienie robimy z JEDNEGO koloru marki (--atrament) na niskiej alfie. Zakaz #e5e5e5 i zakaz czarnego cienia. 4. Gradienty wygaszamy do koloru z alfą 00, NIGDY do `transparent`. 5. Zero zewnętrznych zasobów: bez fontów z sieci, bez CDN, bez bibliotek. SPIS BLOKÓW: 00 · Zmienne (barwy, typografia, cienie, wiązki światła) 01 · Reset i podstawy dokumentu 02 · Siatka i sekcje (jasne / ciemne, poświaty, mgły, przejścia) 03 · Typografia (nagłówki, akapity, nadtytuły, drobny druk) 04 · Elementy artykułu (cytat, lista, obrazek z podpisem, kod) 05 · Przyciski i odnośniki 06 · Karty (zwykłe, szklane, modułowe) 07 · Liczby i kafle statystyk 08 · Tabele (z przewijaniem poziomym) 09 · Terminal (rekonstrukcja odpowiedzi serwera) 10 · Panel — makieta produktu 11 · Wykres słupkowy w czasie 12 · Cennik 13 · Formularz 14 · FAQ (details/summary) 15 · Nagłówek strony (do skopiowania 1:1 na podstrony) 16 · Stopka (do skopiowania 1:1 na podstrony) 17 · Pasek mobilny (przyklejone CTA) 18 · Drobiazgi: nota robocza, dostępność, ruch ograniczony, druk ========================================================================== */ /* ============================================================================ 00 · ZMIENNE ========================================================================== */ :root{ /* --- ATRAMENT: jeden ciemny kolor marki, z którego bierze się WSZYSTKO --- */ --atrament: 26, 22, 32; /* #1A1620 — nigdy #000 */ /* linie i wypełnienia na jasnym tle — atrament na alfie, zakaz szarości losowej */ --linia-1: rgba(var(--atrament), .06); --linia-2: rgba(var(--atrament), .10); --linia-3: rgba(var(--atrament), .16); --linia-4: rgba(var(--atrament), .26); /* linie na ciemnym tle — biel na alfie */ --linia-c1: rgba(255,255,255,.07); --linia-c2: rgba(255,255,255,.12); --linia-c3: rgba(255,255,255,.20); /* --- SKALA JASNA: 7 poziomów, sąsiednie różnią się o 2–5 punktów --- */ --jasny-0:#FFFFFF; --jasny-1:#FCFBFD; --jasny-2:#F8F6FB; --jasny-3:#F5F3F8; --jasny-4:#F0EDF5; --jasny-5:#ECE9F1; --jasny-6:#E5E1EC; /* --- SKALA CIEMNA: 8 poziomów, ten sam atrament, coraz jaśniej --- */ --ciemny-0:#0B0910; --ciemny-1:#100D16; --ciemny-2:#14111B; --ciemny-3:#191520; --ciemny-4:#1E1926; --ciemny-5:#231E2C; --ciemny-6:#282232; --ciemny-7:#2E2838; /* --- TEKST --- */ --tekst-1:#1A1620; /* 17,8:1 na bieli */ --tekst-2:#4C4657; /* 9,1:1 na bieli */ --tekst-3:#5F5869; /* 6,7:1 na bieli, 5,6:1 na --jasny-5 */ --tekst-1c:#F2F0F6; /* 17,5:1 na --ciemny-0 */ --tekst-2c:#B9B3C6; /* 8,8:1 na --ciemny-3 */ --tekst-3c:#A79FB7; /* 7,3:1 na --ciemny-3, 5,7:1 na --ciemny-7 */ /* --- MODUŁY: kolory z briefu, bez zmian --- */ --rys:#F2AE3E; --rys-tlo:#3B2A10; --rys-rgb:242,174,62; /* Trzy narzedzia, ktore JUZ dzialaja (audyt, kreator reklam, studio grafik). Barwy dobrane tak, zeby zaden nie kolidowal z trojka SEO ani z alarmem, a wariant „-tekst" przechodzil kontrast na bieli tak jak reszta rodziny. */ --sokol:#6FA8FF; --sokol-tlo:#10203B; --sokol-tekst:#1B4FA8; --sokol-rgb:111,168,255; --bobr:#E8674A; --bobr-tlo:#3B1A12; --bobr-tekst:#A33418; --bobr-rgb:232,103,74; --zimorodek:#2FC4E8; --zimorodek-tlo:#0D2A33; --zimorodek-tekst:#0B5E75; --zimorodek-rgb:47,196,232; --puchacz:#AC90F7; --puchacz-tlo:#241A42; --puchacz-rgb:172,144,247; /* ── PIĘĆ NOWYCH ZWIERZAKÓW (18.08.2026) ───────────────────────────────── Barwy dobrane tak, żeby odróżniały się od sześciu istniejących i trzymały ten sam poziom nasycenia. Każdy zwierzak ma komplet CZTERECH zmiennych — brak którejkolwiek daje sekcję bez tła albo tekst nie do odczytania. */ --sroka:#C9D4E5; /* sroka: srebrzysta biel z chłodnym odcieniem */ --sroka-tlo:#1C2230; --sroka-tekst:#3A4C68; --sroka-rgb:201,212,229; --borsuk:#9AA6B2; /* borsuk: siwa stal — zwierzę nocne, ziemiste */ --borsuk-tlo:#1E2429; --borsuk-tekst:#41505C; --borsuk-rgb:154,166,178; --kozica:#7FD4B8; /* kozica: zieleń hal górskich */ --kozica-tlo:#102C25; --kozica-tekst:#137056; --kozica-rgb:127,212,184; --slowik:#E9C46A; /* słowik: ciepły, miodowy — głos o zmierzchu */ --slowik-tlo:#2E2612; --slowik-tekst:#8A6B14; --slowik-rgb:233,196,106; --lis:#F2724B; /* lis: rudy, najcieplejszy z całej jedenastki */ --lis-tlo:#33160D; --lis-tekst:#A83A18; --lis-rgb:242,114,75; --zubr:#4FDB8C; --zubr-tlo:#0F2A1D; --zubr-rgb:79,219,140; /* warianty przyciemnione — WYŁĄCZNIE do tekstu na jasnym tle (kontrast) */ --rys-tekst:#7A5000; /* 7,1:1 na bieli */ --puchacz-tekst:#5836C4; /* 7,7:1 na bieli */ --zubr-tekst:#0B6E3D; /* 6,3:1 na bieli */ /* alarm — wyłącznie kody 403 i błędy, nigdy dekoracyjnie */ --alarm:#FF6B78; /* na ciemnym */ --alarm-tekst:#B3261E; /* 6,5:1 na bieli */ /* --- TYPOGRAFIA --- */ /* KROJ TYTULOWY: bezszeryfowy, systemowy (decyzja 2026-08-09). Bylo: Iowan Old Style / Palatino / Georgia — czytalo sie „redakcyjnie", a sprzedajemy narzedzie, nie pismo. */ --kroj-tytul: var(--kroj-tekst); --kroj-tekst: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --kroj-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --t-h1: clamp(2.375rem, 1.05rem + 5.3vw, 4.125rem); --t-h2: clamp(1.75rem, 1.05rem + 2.8vw, 2.625rem); --t-h3: clamp(1.3125rem, 1.1rem + .85vw, 1.625rem); --t-h4: 1.0625rem; --t-lead: clamp(1.0625rem, .99rem + .38vw, 1.3125rem); --t-tekst: 1.0625rem; --t-maly: .9375rem; --t-drobny: .8125rem; --t-etykieta:.75rem; --t-liczba: clamp(2.25rem, 1.3rem + 3.9vw, 3.75rem); /* --- ODSTĘPY --- */ --sekcja-y: clamp(5.5rem, 3.2rem + 7vw, 10rem); /* wiecej oddechu miedzy sekcjami */ --zawartosc: 1240px; /* najszersza rama — siatki modulow, makieta panelu, szerokie tabele */ --kregoslup: 56rem; /* JEDNA os tresci: proza, listy, cytaty i tabele. Wysrodkowana. */ --brzeg: clamp(1.25rem, .6rem + 2.4vw, 2.5rem); --promien: 14px; --promien-m: 8px; --promien-kafel: 19px; /* kafle ikon modułów, jak w Adobe */ --gorny-h: 66px; /* --- CIENIE: drabina pięciu warstw tego samego atramentu --- */ --drabina: 0 32px 32px rgba(var(--atrament), .045), 0 16px 16px rgba(var(--atrament), .045), 0 8px 8px rgba(var(--atrament), .045), 0 4px 4px -2px rgba(var(--atrament), .045), 0 2px 2px -1px rgba(var(--atrament), .045); --drabina-m: 0 12px 12px -6px rgba(var(--atrament), .05), 0 6px 6px -3px rgba(var(--atrament), .05), 0 3px 3px -1.5px rgba(var(--atrament), .05), 0 1px 1px -.5px rgba(var(--atrament), .05); --pierscien: 0 0 0 1px rgba(var(--atrament), .10), 0 2px 2px -2px rgba(var(--atrament), .04), 0 4px 4px 0 rgba(var(--atrament), .04), 0 8px 8px 0 rgba(var(--atrament), .04); --drabina-c: 0 24px 48px rgba(0,0,0,.42), 0 12px 24px rgba(0,0,0,.30), 0 6px 12px rgba(0,0,0,.22), 0 2px 4px rgba(0,0,0,.18); /* --- WIĄZKI ŚWIATŁA: system nazwanych gradientów pionowych --- Zawsze 0deg albo 180deg, 3 stopy, jeden koniec gaśnie do alfy 0. Używać jako systemu (obramowania, paski, podkreślenia), nie doraźnie. */ --wiazka-rys: linear-gradient(180deg, rgba(var(--rys-rgb),.95), rgba(var(--rys-rgb),.55) 52.88%, rgba(var(--rys-rgb),0) 88.46%); --wiazka-puchacz: linear-gradient(180deg, rgba(var(--puchacz-rgb),.95), rgba(var(--puchacz-rgb),.55) 52.88%, rgba(var(--puchacz-rgb),0) 88.46%); --wiazka-zubr: linear-gradient(180deg, rgba(var(--zubr-rgb),.95), rgba(var(--zubr-rgb),.55) 52.88%, rgba(var(--zubr-rgb),0) 88.46%); --wiazka-w-gore: linear-gradient(0deg, rgba(var(--puchacz-rgb),0), rgba(var(--puchacz-rgb),.7) 55.77%, rgba(var(--rys-rgb),.9) 88.46%); --wiazka-trojka: linear-gradient(180deg, rgba(var(--rys-rgb),.9) 9.66%, rgba(var(--puchacz-rgb),.85) 52.88%, rgba(var(--zubr-rgb),.8) 88.46%, rgba(var(--zubr-rgb),0) 132.97%); --wiazka-atrament: linear-gradient(180deg, rgba(var(--atrament),.28), rgba(var(--atrament),.10) 52.88%, rgba(var(--atrament),0) 88.46%); } /* ============================================================================ 01 · RESET I PODSTAWY ========================================================================== */ *,*::before,*::after{ box-sizing:border-box; } html{ /* ODDALENIE SKALI O 10%. Caly uklad stoi na rem, wiec zejscie z 16px na 14.4px zmniejsza naraz typografie, odstepy i promienie — uklad odjezdza rownomiernie, zamiast kurczyc sie punktowo. */ font-size:90%; -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; /* zabezpieczenie, nie zamiatanie problemu */ } body{ margin:0; font-family:var(--kroj-tekst); font-size:var(--t-tekst); line-height:1.62; color:var(--tekst-1); background:var(--jasny-0); -webkit-font-smoothing:antialiased; overflow-x:hidden; /* miejsce na przyklejony pasek CTA na telefonie — inaczej zasłania stopkę */ padding-bottom:0; } img,svg,video{ max-width:100%; height:auto; display:block; } a{ color:inherit; } button,input,select,textarea{ font:inherit; color:inherit; } hr{ border:0; height:1px; background:var(--linia-2); margin:2.5rem 0; } /* każdy element z kotwicą musi zjechać spod przyklejonego nagłówka */ [id]{ scroll-margin-top:calc(var(--gorny-h) + 20px); } ::selection{ background:rgba(var(--puchacz-rgb),.28); } /* ============================================================================ 02 · SIATKA I SEKCJE ========================================================================== */ /* --- kontener: JEDNA szerokość na całej stronie --- Węższe kolumny tekstu robimy przez .tekst wewnątrz, wyrównane do LEWEJ krawędzi kontenera, żeby lewy margines nie skakał przy przewijaniu. */ .zawartosc{ width:100%; max-width:var(--zawartosc); margin-inline:auto; padding-inline:var(--brzeg); } /* ZASADA SZEROKOŚCI — JEDEN KRĘGOSŁUP, WYŚRODKOWANY (decyzja 2026-08-09, druga tura). ---------------------------------------------------------------------------------- Poprzednio proza stała przy LEWEJ krawędzi kontenera. Przy kontenerze 1240 px i kolumnie 750 px zostawało po prawej 490 px pustki — strona wyglądała, jakby ją zwiało w lewo, a przyciski pod tekstem sprawiały wrażenie zgubionych. Teraz jest odwrotnie i prościej: proza, listy, cytaty i tabele mają TĘ SAMĄ szerokość (--kregoslup) i są WYŚRODKOWANE. Jedna oś, jedna linia środka, światło po obu stronach równe. Bloki, które naprawdę potrzebują szerokości — siatki modułów, makieta panelu, tabele sześcio- i siedmiokolumnowe — rozpychają się do --zawartosc, też środkiem. Wychodzą więc symetrycznie poza kręgosłup, co czyta się jak zagnieżdżenie, a nie jak rozjazd. */ .tekst{ max-width:var(--kregoslup); margin-inline:auto; } .tekst--szeroka{ max-width:var(--kregoslup); margin-inline:auto; } /* .tekst--lewa USUNIĘTA (2026-08-09). Robiła `margin-inline:0`, czyli dosuwała blok do lewej krawędzi ramy. Przy układzie do lewej to był sensowny wyjątek; przy wyśrodkowanym kręgosłupie to był dokładnie ten element, który wyglądał na zwiany — bo stał 180 px od osi, na której siedziała reszta strony. Osiemnaście wystąpień w HTML-u zdjęte. Jeśli kiedyś naprawdę zajdzie potrzeba dosunięcia czegoś do lewej, lepiej dać temu własną, nazwaną klasę z powodem w komentarzu. */ .srodek{ margin-inline:auto; text-align:center; } /* cytat i listy stojące bezpośrednio w kontenerze trzymają tę samą oś co proza */ .zawartosc > .cytat{ max-width:var(--kregoslup); margin-inline:auto; } .zawartosc > .lista, .zawartosc > .lista-num{ max-width:var(--kregoslup); margin-inline:auto; } .srodek .tekst{ margin-inline:auto; } /* nagłówki i podpisy stojące luzem w kontenerze też siadają na kręgosłupie */ .zawartosc > h2, .zawartosc > h3, .zawartosc > .lead, .zawartosc > .podpis, .zawartosc > .przewin, .zawartosc > .nadtytul{ max-width:var(--kregoslup); margin-inline:auto; } /* Elementy stojące LUZEM w kontenerze (przycisk, notka pod przyciskiem, kafel ikony) są inline-block albo mają własną wąską szerokość, więc `max-width` ich nie ruszy — siedziałyby przy lewej krawędzi ramy, 180 px od osi reszty strony. Dosuwamy je o połowę różnicy między ramą a kręgosłupem. `max(0px, …)` chroni wąskie ekrany, gdzie rama jest węższa od kręgosłupa i wynik byłby ujemny. */ .zawartosc > .btn, .zawartosc > .pod-przyciskiem, .zawartosc > .kafel-modul, .zawartosc > .nadtytul{ margin-left: max(0px, calc((100% - var(--kregoslup)) / 2)); } /* --- sekcja: baza --- */ .sekcja{ position:relative; padding-block:var(--sekcja-y); overflow:hidden; /* mgły i poświaty nie rozpychają strony */ isolation:isolate; } .sekcja > .zawartosc{ position:relative; z-index:2; } /* --- HERO: poświata radialna od góry + mocniejszy kolor --- */ .sekcja--hero{ background-image:radial-gradient(130% 120% at 50% 0%, #FFFFFF 0%, var(--jasny-2) 58%, var(--jasny-5) 100%); } .sekcja--hero .mgla--trojka{ background-image: radial-gradient(circle at 14% 12%, rgba(var(--rys-rgb),.30), rgba(var(--rys-rgb),0) 42%), radial-gradient(circle at 88% 16%, rgba(var(--puchacz-rgb),.28), rgba(var(--puchacz-rgb),0) 40%), radial-gradient(circle at 50% 78%, rgba(var(--zubr-rgb),.16), rgba(var(--zubr-rgb),0) 44%); } /* smuga światła dokładnie pod nagłówkiem */ .sekcja--hero::after{ content:""; position:absolute; left:50%; top:0; z-index:0; pointer-events:none; width:min(1200px,120%); height:620px; transform:translateX(-50%); background:radial-gradient(50% 60% at 50% 22%, rgba(255,255,255,.92), rgba(255,255,255,0) 72%); } /* --- SEKCJA JASNA (domyślna baza serwisu) --- */ .sekcja--jasna { background:var(--jasny-0); } .sekcja--jasna2{ background:var(--jasny-3); } .sekcja--jasna3{ background:var(--jasny-5); } /* kolor do jasnego tła bez zmiany jasności: plama + płaski kolor pod spodem */ .sekcja--jasna2::before, .sekcja--jasna3::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image: radial-gradient(38% 42% at 6% 8%, rgba(var(--puchacz-rgb),.16), rgba(var(--puchacz-rgb),0) 70%), radial-gradient(34% 40% at 96% 82%, rgba(var(--rys-rgb),.14), rgba(var(--rys-rgb),0) 70%); } /* --- SEKCJA CIEMNA (akcent, przerywnik) --- */ .sekcja--ciemna{ background-color:var(--ciemny-2); color:var(--tekst-1c); /* poświata dokładnie nad nagłówkiem — źródło światła u góry, jak w naturze */ background-image:radial-gradient(130% 130% at 50% 0%, var(--ciemny-5), var(--ciemny-1)); } .sekcja--ciemna .tekst-2, .sekcja--ciemna .lead{ color:var(--tekst-2c); } .sekcja--ciemna .tekst-3, .sekcja--ciemna .drobne, .sekcja--ciemna .podpis{ color:var(--tekst-3c); } .sekcja--ciemna .nadtytul, .sekcja--ciemna .etykieta, .sekcja--ciemna .liczba__data{ color:var(--tekst-3c); } .sekcja--ciemna .nadtytul::before{ background:var(--linia-c3); } .sekcja--ciemna hr{ background:var(--linia-c2); } /* barwne mgły — zawsze co najmniej dwie naraz, krycie 10–18% */ .mgla{ position:absolute; inset:0; z-index:0; pointer-events:none; } .mgla--trojka{ background-image: radial-gradient(circle at 18% 22%, rgba(var(--rys-rgb),.16), rgba(var(--rys-rgb),0) 34%), radial-gradient(circle at 82% 30%, rgba(var(--puchacz-rgb),.15), rgba(var(--puchacz-rgb),0) 32%), radial-gradient(circle at 50% 92%, rgba(var(--zubr-rgb),.11), rgba(var(--zubr-rgb),0) 36%); } .mgla--rys{ background-image: radial-gradient(circle at 24% 18%, rgba(var(--rys-rgb),.17), rgba(var(--rys-rgb),0) 36%), radial-gradient(circle at 88% 76%, rgba(var(--rys-rgb),.10), rgba(var(--rys-rgb),0) 30%); } .mgla--puchacz{ background-image: radial-gradient(circle at 70% 16%, rgba(var(--puchacz-rgb),.18), rgba(var(--puchacz-rgb),0) 36%), radial-gradient(circle at 14% 84%, rgba(var(--puchacz-rgb),.10), rgba(var(--puchacz-rgb),0) 30%); } .mgla--zubr{ background-image: radial-gradient(circle at 26% 78%, rgba(var(--zubr-rgb),.16), rgba(var(--zubr-rgb),0) 36%), radial-gradient(circle at 84% 20%, rgba(var(--zubr-rgb),.10), rgba(var(--zubr-rgb),0) 30%); } .mgla--alarm{ background-image: radial-gradient(circle at 50% 6%, rgba(255,107,120,.14), rgba(255,107,120,0) 40%), radial-gradient(circle at 12% 88%, rgba(var(--puchacz-rgb),.12), rgba(var(--puchacz-rgb),0) 34%); } /* siatka 64 px wycinana winietą — tylko na ciemnych sekcjach, ledwo widoczna */ .sekcja--ciemna .siatka{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.55; background-image: linear-gradient(to right, var(--linia-c1) 1px, rgba(255,255,255,0) 1px), linear-gradient(to bottom, var(--linia-c1) 1px, rgba(255,255,255,0) 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(120% 80% at 50% 0%, #000 22%, rgba(0,0,0,0) 100%); mask-image:radial-gradient(120% 80% at 50% 0%, #000 22%, rgba(0,0,0,0) 100%); } /* przejście jasna → ciemna: cienki pas światła na styku */ .sekcja--ciemna::after{ content:""; position:absolute; left:0; right:0; top:0; height:1px; z-index:3; background:linear-gradient(90deg, rgba(var(--rys-rgb),0) 0%, rgba(var(--rys-rgb),.55) 22%, rgba(var(--puchacz-rgb),.6) 50%, rgba(var(--zubr-rgb),.55) 78%, rgba(var(--zubr-rgb),0) 100%); } /* przejście ciemna → jasna: delikatny cień spod poprzedniej sekcji */ .sekcja--ciemna + .sekcja--jasna::before, .sekcja--ciemna + .sekcja--jasna2::after, .sekcja--ciemna + .sekcja--jasna3::after{ content:""; position:absolute; left:0; right:0; top:0; height:140px; z-index:0; pointer-events:none; background:linear-gradient(180deg, rgba(var(--atrament),.055), rgba(var(--atrament),0) 100%); } /* --- układy dwu- i trzykolumnowe --- */ .rzad{ display:grid; gap:clamp(1.5rem, 1rem + 2vw, 2.75rem); } .rzad--2{ grid-template-columns:repeat(2, minmax(0,1fr)); } .rzad--3{ grid-template-columns:repeat(3, minmax(0,1fr)); } .rzad--4{ grid-template-columns:repeat(4, minmax(0,1fr)); } .rzad--tekst-obok{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); align-items:start; } @media (max-width:960px){ .rzad--3,.rzad--tekst-obok{ grid-template-columns:1fr; } .rzad--4{ grid-template-columns:repeat(2, minmax(0,1fr)); } } @media (max-width:720px){ .rzad--2{ grid-template-columns:1fr; } } @media (max-width:520px){ .rzad--4{ grid-template-columns:1fr; } } .odstep-s{ height:1rem; } .odstep-m{ height:2rem; } .odstep-l{ height:3.5rem; } /* ============================================================================ 03 · TYPOGRAFIA ========================================================================== */ h1,h2,h3,h4{ font-family:var(--kroj-tytul); /* Waga 500 byla dobrana pod szeryfy — bezszeryfowy przy niej wyglada mdlo. 640 daje naglowkom mase bez wchodzenia w krzykliwy bold (700+). */ font-weight:640; margin:0 0 .6em; text-wrap:balance; } h1{ font-size:var(--t-h1); line-height:1.04; letter-spacing:-.034em; /* tekst gradientowy, który NIE jest tęczowy: jeden kolor gasnący o 14% */ background:linear-gradient(96deg, var(--tekst-1) 58%, rgba(var(--atrament),.84) 96%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; filter:drop-shadow(0 8px 40px rgba(var(--atrament),.13)); } .sekcja--ciemna h1{ background:linear-gradient(96deg, #F7F5FA 58%, rgba(247,245,250,.82) 96%); -webkit-background-clip:text; background-clip:text; filter:drop-shadow(0 8px 40px rgba(0,0,0,.85)); } h2{ font-size:var(--t-h2); line-height:1.12; letter-spacing:-.026em; } h3{ font-size:var(--t-h3); line-height:1.2; letter-spacing:-.014em; } h4{ font-family:var(--kroj-tekst); font-size:var(--t-h4); font-weight:650; line-height:1.35; letter-spacing:-.006em; } .sekcja--ciemna h2,.sekcja--ciemna h3{ color:var(--tekst-1c); } p{ margin:0 0 1.15em; } p:last-child{ margin-bottom:0; } .lead{ font-size:var(--t-lead); line-height:1.55; color:var(--tekst-2); } .tekst-2{ color:var(--tekst-2); } .tekst-3{ color:var(--tekst-3); } .drobne{ font-size:var(--t-drobny); line-height:1.55; color:var(--tekst-3); } .podpis{ font-size:var(--t-drobny); line-height:1.5; color:var(--tekst-3); margin-top:.7rem; } .mocne{ font-weight:650; color:var(--tekst-1); } .sekcja--ciemna .mocne{ color:var(--tekst-1c); } /* nadtytuł: włosowa kreska + wersaliki, BEZ owalnej pigułki */ .nadtytul{ display:flex; align-items:center; gap:.7rem; font-family:var(--kroj-tekst); font-size:var(--t-etykieta); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--tekst-3); margin:0 0 1.1rem; } .nadtytul::before{ content:""; width:34px; height:1px; background:var(--linia-4); flex:none; } .srodek .nadtytul{ justify-content:center; } /* nadtytuł w barwie modułu */ .nadtytul--rys{ color:var(--rys-tekst); } .nadtytul--rys::before{ background:var(--rys); } .nadtytul--puchacz{ color:var(--puchacz-tekst); } .nadtytul--puchacz::before{ background:var(--puchacz); } .nadtytul--zubr{ color:var(--zubr-tekst); } .nadtytul--zubr::before{ background:var(--zubr); } .sekcja--ciemna .nadtytul--rys{ color:var(--rys); } .sekcja--ciemna .nadtytul--puchacz{ color:var(--puchacz); } .sekcja--ciemna .nadtytul--zubr{ color:var(--zubr); } /* etykieta techniczna (monospace, małe wersaliki) */ .etykieta{ font-family:var(--kroj-mono); font-size:var(--t-drobny); letter-spacing:.06em; color:var(--tekst-3); } /* jeden przelot świetlny na całą stronę — używać RAZ */ .przelot{ background:linear-gradient(90deg, var(--tekst-1) 0%, var(--tekst-1) 46%, var(--puchacz-tekst) 50%, var(--rys-tekst) 53%, var(--tekst-1) 56%, var(--tekst-1) 100%); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; animation:przelot 6s linear infinite; } .sekcja--ciemna .przelot{ background:linear-gradient(90deg, #EFECF5 0%, #EFECF5 46%, #FFFFFF 49%, var(--rys) 51%, #FFFFFF 53%, #EFECF5 56%, #EFECF5 100%); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; } @keyframes przelot{ from{ background-position:220% 0 } to{ background-position:-220% 0 } } /* ============================================================================ 04 · ELEMENTY ARTYKUŁU Klasa .artykul jest kontenerem treści na podstronach — nadaje styl akapitom, listom, cytatom, obrazkom i tabelom bez dokładania klas. ========================================================================== */ .artykul{ max-width:var(--kregoslup); margin-inline:auto; } .artykul > * + *{ margin-top:1.15em; } .artykul h2{ margin-top:2.2em; } .artykul h3{ margin-top:1.8em; } .artykul a{ color:var(--puchacz-tekst); text-underline-offset:.18em; text-decoration-thickness:1px; } .artykul a:hover{ text-decoration-thickness:2px; } .sekcja--ciemna .artykul a{ color:var(--puchacz); } /* lista z własnym znacznikiem */ .lista{ list-style:none; padding:0; margin:0; } .lista li{ position:relative; padding-left:1.6rem; margin-bottom:.7rem; } .lista li::before{ content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; border-radius:2px; background:var(--linia-4); } .lista--rys li::before{ background:var(--rys); } .lista--puchacz li::before{ background:var(--puchacz); } .lista--zubr li::before{ background:var(--zubr); } .sekcja--ciemna .lista li::before{ background:var(--linia-c3); } .sekcja--ciemna .lista--rys li::before{ background:var(--rys); } .sekcja--ciemna .lista--puchacz li::before{ background:var(--puchacz); } .sekcja--ciemna .lista--zubr li::before{ background:var(--zubr); } /* lista numerowana */ .lista-num{ counter-reset:l; list-style:none; padding:0; margin:0; } .lista-num li{ position:relative; padding-left:2.4rem; margin-bottom:1.1rem; counter-increment:l; } .lista-num li::before{ content:counter(l); position:absolute; left:0; top:.1em; width:1.65rem; height:1.65rem; border-radius:7px; display:grid; place-items:center; font-family:var(--kroj-mono); font-size:.75rem; background:var(--jasny-5); color:var(--tekst-2); border:1px solid var(--linia-2); } .sekcja--ciemna .lista-num li::before{ background:var(--ciemny-6); color:var(--tekst-2c); border-color:var(--linia-c2); } /* cytat / wyróżnione zdanie — wiązka światła zamiast szarej kreski */ .cytat{ position:relative; margin:2rem 0; padding:.25rem 0 .25rem 1.5rem; font-family:var(--kroj-tytul); font-size:clamp(1.2rem,1.05rem + .8vw,1.55rem); line-height:1.42; letter-spacing:-.012em; color:var(--tekst-1); } .cytat::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:2px; background-image:var(--wiazka-trojka); } .sekcja--ciemna .cytat{ color:var(--tekst-1c); } .cytat cite{ display:block; margin-top:.7rem; font-family:var(--kroj-tekst); font-size:var(--t-drobny); font-style:normal; color:var(--tekst-3); } /* zdania klienta — kartki różnej długości, nie równy blok */ .wypowiedz{ font-family:var(--kroj-tytul); font-size:clamp(1.15rem,1rem + .75vw,1.5rem); line-height:1.4; letter-spacing:-.012em; color:var(--tekst-1); padding:1.1rem 1.35rem; margin:0 0 .9rem; background:var(--jasny-0); border:1px solid var(--linia-2); border-radius:var(--promien-m); box-shadow:var(--drabina-m); max-width:32ch; } .wypowiedz:nth-child(2){ margin-left:clamp(0px,4vw,3.5rem); max-width:38ch; } .wypowiedz:nth-child(3){ margin-left:clamp(0px,2vw,1.75rem); max-width:28ch; } .wypowiedz:nth-child(4){ margin-left:clamp(0px,6vw,5rem); max-width:24ch; } /* obrazek z podpisem */ .figura{ margin:2rem 0; } .figura img{ width:100%; border-radius:var(--promien); border:1px solid var(--linia-2); } .figura figcaption{ font-size:var(--t-drobny); color:var(--tekst-3); margin-top:.7rem; } /* kod w tekście */ code{ font-family:var(--kroj-mono); font-size:.875em; background:var(--jasny-5); border:1px solid var(--linia-2); border-radius:5px; padding:.08em .38em; overflow-wrap:anywhere; } .sekcja--ciemna code{ background:var(--ciemny-6); border-color:var(--linia-c2); } /* ============================================================================ 05 · PRZYCISKI I ODNOŚNIKI ========================================================================== */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem; font-family:var(--kroj-tekst); font-size:1rem; font-weight:620; letter-spacing:-.006em; text-decoration:none; padding:.95rem 1.6rem; border-radius:10px; /* NIE 999px */ border:1px solid transparent; cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease; } .btn:active{ transform:translateY(1px); } /* główny — gradient 219°, stopy 7.7%/94.35% (płaski kolor u góry i u dołu) */ .btn--glowny{ color:#FFF9EC; background-image:linear-gradient(219deg, #3A3048 7.7%, #17131E 94.35%); box-shadow:0 18px 40px rgba(var(--atrament),.22), 0 2px 2px rgba(var(--atrament),.10), inset 0 1px 0 rgba(255,255,255,.12); } .btn--glowny:hover{ box-shadow:0 22px 48px rgba(var(--atrament),.28), 0 2px 2px rgba(var(--atrament),.12), inset 0 1px 0 rgba(255,255,255,.18); } .sekcja--ciemna .btn--glowny{ color:#17131E; background-image:linear-gradient(219deg, #FFFFFF 7.7%, #E7E2F0 94.35%); box-shadow:0 18px 40px rgba(var(--puchacz-rgb),.16), 0 2px 2px rgba(0,0,0,.35); } /* obrysowy */ .btn--obrys{ color:var(--tekst-1); background:linear-gradient(var(--jasny-0),var(--jasny-0)) padding-box, linear-gradient(180deg, rgba(var(--atrament),.24) 0%, rgba(var(--atrament),0) 100%) border-box; border:1px solid transparent; box-shadow:var(--drabina-m); } .sekcja--ciemna .btn--obrys{ color:var(--tekst-1c); background:linear-gradient(var(--ciemny-5),var(--ciemny-5)) padding-box, linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,0) 100%) border-box; box-shadow:none; } /* mały */ .btn--maly{ padding:.6rem 1rem; font-size:var(--t-maly); border-radius:8px; } /* odnośnik tekstowy ze strzałką */ .link{ display:inline-flex; align-items:center; gap:.4rem; font-weight:600; font-size:var(--t-maly); color:var(--tekst-1); text-decoration:none; border-bottom:1px solid var(--linia-4); padding-bottom:2px; } .link:hover{ border-bottom-color:currentColor; } .link--rys{ color:var(--rys-tekst); border-bottom-color:rgba(var(--rys-rgb),.6); } .link--puchacz{ color:var(--puchacz-tekst); border-bottom-color:rgba(var(--puchacz-rgb),.6); } .link--zubr{ color:var(--zubr-tekst); border-bottom-color:rgba(var(--zubr-rgb),.6); } .sekcja--ciemna .link{ color:var(--tekst-1c); border-bottom-color:var(--linia-c3); } .sekcja--ciemna .link--rys{ color:var(--rys); } .sekcja--ciemna .link--puchacz{ color:var(--puchacz); } .sekcja--ciemna .link--zubr{ color:var(--zubr); } /* mikrotekst pod przyciskiem */ .pod-przyciskiem{ font-size:var(--t-maly); color:var(--tekst-3); margin-top:.95rem; max-width:34rem; } .srodek .pod-przyciskiem{ margin-inline:auto; } .sekcja--ciemna .pod-przyciskiem{ color:var(--tekst-3c); } /* jeden spójny pierścień fokusa dla WSZYSTKIEGO, co da się kliknąć */ a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{ outline:3px solid var(--puchacz-tekst); outline-offset:3px; border-radius:6px; } .sekcja--ciemna a:focus-visible, .sekcja--ciemna button:focus-visible, .sekcja--ciemna summary:focus-visible, .sekcja--ciemna input:focus-visible, .sekcja--ciemna textarea:focus-visible{ outline-color:var(--puchacz); } /* ============================================================================ 06 · KARTY ========================================================================== */ .karta{ position:relative; border-radius:var(--promien); padding:clamp(1.35rem,1rem + 1.2vw,2rem); /* ramka gradientowa: padding-box + border-box, koniec z alfą 00 */ background:linear-gradient(var(--jasny-0),var(--jasny-0)) padding-box, linear-gradient(180deg, rgba(var(--atrament),.20) 0%, rgba(var(--atrament),0) 100%) border-box; border:1px solid transparent; box-shadow:var(--drabina); } .sekcja--ciemna .karta{ background:linear-gradient(var(--ciemny-4),var(--ciemny-4)) padding-box, linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 100%) border-box; box-shadow:var(--drabina-c); } /* odblask szkła 161° z lewego górnego rogu */ .karta--szklo::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(161deg, rgba(255,255,255,.55) 2.8%, rgba(255,255,255,0) 48%); } .sekcja--ciemna .karta--szklo::before{ background:linear-gradient(161deg, rgba(255,255,255,.10) 2.8%, rgba(255,255,255,0) 48%); } .karta > *{ position:relative; z-index:1; } /* karta modułu — barwiona kolorem swojego zwierzęcia */ .modul{ position:relative; display:flex; flex-direction:column; border-radius:var(--promien); padding:clamp(1.35rem,1rem + 1.2vw,1.9rem); background:linear-gradient(var(--ciemny-4),var(--ciemny-4)) padding-box, linear-gradient(180deg, rgba(var(--znak-rgb),.55) 0%, rgba(var(--znak-rgb),0) 92%) border-box; border:1px solid transparent; box-shadow:var(--drabina-c), 0 0 60px -20px rgba(var(--znak-rgb),.35); overflow:hidden; } .modul::before{ /* poświata w barwie modułu */ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(90% 55% at 18% 0%, rgba(var(--znak-rgb),.14), rgba(var(--znak-rgb),0) 72%); } .modul > *{ position:relative; z-index:1; } .modul--rys{ --znak-rgb:var(--rys-rgb); --znak:var(--rys); --znak-tlo:var(--rys-tlo); } .modul--puchacz{ --znak-rgb:var(--puchacz-rgb); --znak:var(--puchacz); --znak-tlo:var(--puchacz-tlo); } .modul--zubr{ --znak-rgb:var(--zubr-rgb); --znak:var(--zubr); --znak-tlo:var(--zubr-tlo); } .modul__kafel{ width:60px; height:60px; border-radius:var(--promien-kafel); /* 19 px, jak w Adobe */ background:var(--znak-tlo); display:grid; place-items:center; flex:none; box-shadow:0 10px 26px -10px rgba(var(--znak-rgb),.55), inset 0 1px 0 rgba(255,255,255,.10); } .modul__kafel svg{ width:38px; height:38px; display:block; } .modul__glowa{ display:flex; align-items:center; gap:1rem; margin-bottom:1.2rem; } .modul__nazwa{ font-family:var(--kroj-tytul); font-size:1.5rem; line-height:1.1; letter-spacing:-.018em; color:var(--znak); margin:0; } .modul__rola{ font-family:var(--kroj-mono); font-size:var(--t-drobny); letter-spacing:.06em; color:var(--tekst-3c); margin-top:.2rem; } .modul__zdanie{ font-size:var(--t-tekst); color:var(--tekst-1c); margin-bottom:1.1rem; } .modul h3{ min-height:0; } .modul__liczba{ margin-top:auto; padding-top:1.1rem; border-top:1px solid var(--linia-c2); } .modul__liczba b{ color:var(--znak); font-weight:650; } .modul__zle{ margin-top:1.1rem; padding:.85rem 1rem; border-radius:var(--promien-m); background:rgba(0,0,0,.28); border:1px solid var(--linia-c1); font-size:var(--t-maly); color:var(--tekst-2c); } .modul__zle b{ color:var(--tekst-1c); } /* blok ostrzeżenia / uczciwej informacji */ .uwaga{ border-radius:var(--promien-m); padding:1.1rem 1.35rem; background:var(--jasny-3); border:1px solid var(--linia-2); border-left:3px solid var(--linia-4); font-size:var(--t-maly); color:var(--tekst-2); } .sekcja--ciemna .uwaga{ background:rgba(0,0,0,.28); border-color:var(--linia-c1); border-left-color:var(--linia-c3); color:var(--tekst-2c); } /* czerwona krawędź TYLKO tam, gdzie naprawdę ostrzegamy — nie przy uprzejmościach */ .uwaga--alarm{ border-left-color:var(--alarm-tekst); } .sekcja--ciemna .uwaga--alarm{ border-left-color:var(--alarm); } .uwaga b{ color:var(--tekst-1); } .sekcja--ciemna .uwaga b{ color:var(--tekst-1c); } /* ============================================================================ 07 · LICZBY I KAFLE STATYSTYK ========================================================================== */ .kafel-liczby{ position:relative; padding:1.4rem 1.35rem 1.25rem; border-radius:var(--promien); background:linear-gradient(var(--ciemny-5),var(--ciemny-5)) padding-box, linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 100%) border-box; border:1px solid transparent; overflow:hidden; } .kafel-liczby::before{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(161deg, rgba(255,255,255,.09) 2.8%, rgba(255,255,255,0) 48%); } .kafel-liczby::after{ /* wiązka światła u góry kafla */ content:""; position:absolute; left:0; top:0; width:100%; height:2px; background:var(--wiazka, var(--wiazka-atrament)); transform:rotate(180deg); } .kafel-liczby > *{ position:relative; z-index:1; } .liczba{ font-family:var(--kroj-tekst); font-size:var(--t-liczba); font-weight:600; line-height:1; letter-spacing:-.035em; color:var(--tekst-1c); font-variant-numeric:tabular-nums lining-nums; } .liczba small{ font-size:.44em; font-weight:500; color:var(--tekst-3c); letter-spacing:-.01em; } .liczba--rys{ color:var(--rys); } .liczba--puchacz{ color:var(--puchacz); } .liczba--zubr{ color:var(--zubr); } .liczba__podpis{ margin-top:.6rem; font-size:var(--t-maly); color:var(--tekst-2c); } .liczba__data{ margin-top:.35rem; font-family:var(--kroj-mono); font-size:.6875rem; color:var(--tekst-3c); } /* ============================================================================ 08 · TABELE Każda tabela MUSI siedzieć w .tabela-otoczka, inaczej rozepchnie telefon. ========================================================================== */ /* Tabela stoi na tej samej osi co proza i kończy się blisko niej. Wcześniej ciągnęła się przez całe 1240px obok akapitu szerokiego na 750px — oko czytało to jako dwa różne układy na jednej stronie. Teraz 60rem, czyli ten sam limit co .tekst--szeroka: różnica jest, ale spokojna. */ .tabela-otoczka{ width:100%; max-width:var(--kregoslup); margin-inline:auto; overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--promien); border:1px solid var(--linia-2); background:var(--jasny-0); } /* Wyjątek dla tabel, które naprawdę mają 6–7 kolumn (porównanie pakietów). Ściśnięcie ich do 60rem zrobiłoby z nich poziomy suwak na laptopie. */ .tabela-otoczka--pelna{ max-width:none; margin-inline:auto; } .sekcja--ciemna .tabela-otoczka{ border-color:var(--linia-c2); background:var(--ciemny-4); } .tabela{ width:100%; min-width:520px; border-collapse:collapse; font-size:var(--t-maly); } .tabela th,.tabela td{ padding:.8rem 1rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--linia-2); } .sekcja--ciemna .tabela th,.sekcja--ciemna .tabela td{ border-bottom-color:var(--linia-c1); } .tabela thead th{ font-family:var(--kroj-mono); font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase; color:var(--tekst-2); font-weight:600; background:var(--jasny-3); white-space:nowrap; } .sekcja--ciemna .tabela thead th{ color:var(--tekst-2c); background:var(--ciemny-6); } .tabela tbody tr:last-child td{ border-bottom:0; } .tabela td b{ font-weight:650; } .tabela .num{ font-variant-numeric:tabular-nums; white-space:nowrap; } /* podpowiedź o przewijaniu — pokazywana JS-em tylko gdy tabela naprawdę wystaje */ .przewin{ display:none; font-family:var(--kroj-mono); font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase; color:var(--tekst-3); margin-top:.55rem; } .przewin.widoczna{ display:block; } .sekcja--ciemna .przewin{ color:var(--tekst-3c); } /* kody odpowiedzi serwera */ .kod{ font-family:var(--kroj-mono); font-weight:650; font-size:.9375rem; padding:.1rem .45rem; border-radius:5px; } .kod--403{ color:var(--alarm-tekst); background:rgba(179,38,30,.10); } .kod--200{ color:var(--zubr-tekst); background:rgba(11,110,61,.10); } .sekcja--ciemna .kod--403{ color:var(--alarm); background:rgba(255,107,120,.14); } .sekcja--ciemna .kod--200{ color:var(--zubr); background:rgba(var(--zubr-rgb),.13); } /* ============================================================================ 09 · TERMINAL — rekonstrukcja odpowiedzi serwera ========================================================================== */ .terminal{ border-radius:var(--promien); background:linear-gradient(var(--ciemny-0),var(--ciemny-0)) padding-box, linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 100%) border-box; border:1px solid transparent; box-shadow:var(--drabina-c); overflow:hidden; } .terminal__belka{ display:flex; align-items:center; gap:.45rem; padding:.7rem 1rem; border-bottom:1px solid var(--linia-c1); background:var(--ciemny-2); } .terminal__kropka{ width:9px; height:9px; border-radius:50%; background:var(--linia-c3); } .terminal__tytul{ margin-left:.6rem; font-family:var(--kroj-mono); font-size:.6875rem; letter-spacing:.06em; color:var(--tekst-3c); } .terminal__ciało{ padding:1rem; overflow-x:auto; -webkit-overflow-scrolling:touch; } .terminal__ciało.przewija{ -webkit-mask-image:linear-gradient(to right, #000 0, #000 88%, rgba(0,0,0,0) 100%); mask-image:linear-gradient(to right, #000 0, #000 88%, rgba(0,0,0,0) 100%); } .terminal pre{ margin:0; font-family:var(--kroj-mono); font-size:.8125rem; line-height:1.85; color:var(--tekst-2c); white-space:pre; } .terminal .kom{ color:var(--tekst-3c); } .terminal .bot{ color:var(--puchacz); } .terminal .zly{ color:var(--alarm); font-weight:700; } .terminal .dobry{ color:var(--zubr); font-weight:700; } @media (max-width:520px){ .terminal pre{ font-size:.6875rem; } } /* ============================================================================ 10 · PANEL — makieta produktu (rekonstrukcja w HTML, nie zrzut ekranu) ========================================================================== */ .panel{ border-radius:var(--promien); background:linear-gradient(var(--jasny-0),var(--jasny-0)) padding-box, linear-gradient(180deg, rgba(var(--atrament),.22) 0%, rgba(var(--atrament),0) 100%) border-box; border:1px solid transparent; box-shadow:var(--drabina); overflow:hidden; } .sekcja--ciemna .panel{ background:linear-gradient(var(--ciemny-3),var(--ciemny-3)) padding-box, linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 100%) border-box; box-shadow:var(--drabina-c); } .panel__belka{ display:flex; align-items:center; gap:.45rem; padding:.65rem .9rem; background:var(--jasny-3); border-bottom:1px solid var(--linia-2); } .sekcja--ciemna .panel__belka{ background:var(--ciemny-5); border-bottom-color:var(--linia-c1); } .panel__adres{ margin-left:.5rem; flex:1; min-width:0; font-family:var(--kroj-mono); font-size:.6875rem; color:var(--tekst-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sekcja--ciemna .panel__adres{ color:var(--tekst-3c); } .panel__ciało{ padding:clamp(.9rem,.6rem + 1vw,1.4rem); } .panel__naglowek{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem; margin-bottom:1.1rem; } .panel__wynik{ font-size:2.1rem; font-weight:600; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; } .panel__zrodlo{ font-family:var(--kroj-mono); font-size:.6875rem; color:var(--tekst-3); width:100%; } .sekcja--ciemna .panel__zrodlo{ color:var(--tekst-3c); } /* wiersz listy adresów w panelu */ .panel__wiersz{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.5rem 1rem; align-items:center; padding:.6rem 0; border-top:1px solid var(--linia-2); font-size:var(--t-maly); } .sekcja--ciemna .panel__wiersz{ border-top-color:var(--linia-c1); } .panel__url{ font-family:var(--kroj-mono); font-size:.75rem; color:var(--tekst-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sekcja--ciemna .panel__url{ color:var(--tekst-2c); } .panel__powod{ font-size:.75rem; color:var(--tekst-3); white-space:normal; display:block; } .sekcja--ciemna .panel__powod{ color:var(--tekst-3c); } /* plakietka stanu */ .plakietka{ display:inline-flex; align-items:center; gap:.35rem; flex:none; font-family:var(--kroj-mono); font-size:.6875rem; letter-spacing:.04em; padding:.22rem .55rem; border-radius:6px; white-space:nowrap; } .plakietka--ok{ color:var(--zubr-tekst); background:rgba(11,110,61,.10); } .plakietka--zle{ color:var(--alarm-tekst); background:rgba(179,38,30,.10); } .plakietka--info{ color:var(--puchacz-tekst); background:rgba(var(--puchacz-rgb),.14); } .sekcja--ciemna .plakietka--ok{ color:var(--zubr); background:rgba(var(--zubr-rgb),.13); } .sekcja--ciemna .plakietka--zle{ color:var(--alarm); background:rgba(255,107,120,.14); } .sekcja--ciemna .plakietka--info{ color:var(--puchacz); background:rgba(var(--puchacz-rgb),.16); } /* pigułka szklana — do etykiet leżących na kolorowym tle */ .pigulka-szkło{ display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .7rem; border-radius:8px; background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(50px); backdrop-filter:blur(50px); border:1px solid var(--linia-2); font-family:var(--kroj-mono); font-size:.6875rem; color:var(--tekst-2); } /* ============================================================================ 11 · WYKRES W CZASIE (słupki, oś proporcjonalna do dat) ========================================================================== */ .wykres{ display:flex; align-items:flex-end; justify-content:center; gap:clamp(.75rem,.4rem + 1.6vw,2rem); height:210px; padding-top:1rem; } .wykres__slup{ flex:1 1 0; max-width:132px; display:flex; flex-direction:column; justify-content:flex-end; height:100%; min-width:0; } .wykres__kreska{ border-radius:5px 5px 2px 2px; background-image:var(--wiazka-w-gore); transform:rotate(180deg); box-shadow:0 -6px 24px -8px rgba(var(--puchacz-rgb),.5); } .wykres__opis{ margin-top:.5rem; font-family:var(--kroj-mono); font-size:.625rem; color:var(--tekst-3c); text-align:center; white-space:nowrap; } .wykres__wartosc{ font-family:var(--kroj-mono); font-size:.6875rem; color:var(--tekst-2c); text-align:center; margin-bottom:.4rem; } /* ============================================================================ 12 · CENNIK Na telefonie NIE używamy tabeli — poziomy układają się w kolumnę, żeby żadna treść sprzedażowa nie schowała się poza ekranem. ========================================================================== */ .cennik{ display:grid; gap:1.25rem; grid-template-columns:repeat(3,minmax(0,1fr)); } @media (max-width:960px){ .cennik{ grid-template-columns:1fr; } } .poziom{ position:relative; display:flex; flex-direction:column; padding:clamp(1.35rem,1rem + 1.2vw,1.9rem); border-radius:var(--promien); background:linear-gradient(var(--jasny-0),var(--jasny-0)) padding-box, linear-gradient(180deg, rgba(var(--znak-rgb, var(--atrament)),.35) 0%, rgba(var(--znak-rgb, var(--atrament)),0) 100%) border-box; border:1px solid transparent; box-shadow:var(--drabina); } .poziom--rys{ --znak-rgb:var(--rys-rgb); } .poziom--puchacz{ --znak-rgb:var(--puchacz-rgb); } .poziom--zubr{ --znak-rgb:var(--zubr-rgb); } .poziom--polecany{ box-shadow:var(--drabina), 0 0 0 2px rgba(var(--puchacz-rgb),.35); } .poziom__wstazka{ position:absolute; top:-.75rem; left:clamp(1.35rem,1rem + 1.2vw,1.9rem); font-family:var(--kroj-mono); font-size:.625rem; letter-spacing:.09em; text-transform:uppercase; padding:.28rem .6rem; border-radius:6px; background:var(--puchacz-tekst); color:#fff; } .poziom__nazwa{ font-family:var(--kroj-tytul); font-size:1.375rem; letter-spacing:-.018em; margin:0 0 .3rem; } .poziom__obietnica{ font-size:var(--t-maly); color:var(--tekst-2); margin-bottom:1.1rem; } .poziom__widelki{ font-family:var(--kroj-mono); font-size:.8125rem; letter-spacing:.02em; padding:.75rem .9rem; border-radius:var(--promien-m); background:var(--jasny-3); border:1px solid var(--linia-2); color:var(--tekst-2); margin-bottom:1.1rem; } .poziom__widelki b{ display:block; font-family:var(--kroj-tekst); font-size:1rem; font-weight:650; color:var(--tekst-1); margin-bottom:.2rem; letter-spacing:-.01em; } .poziom .lista{ font-size:var(--t-maly); } .poziom__stopka{ margin-top:auto; padding-top:1.1rem; } /* ============================================================================ 13 · FORMULARZ ========================================================================== */ .formularz{ display:grid; gap:1.1rem; max-width:640px; } .pola-2{ display:grid; gap:1.1rem; grid-template-columns:repeat(2,minmax(0,1fr)); } @media (max-width:560px){ .pola-2{ grid-template-columns:1fr; } } .pole{ display:grid; gap:.4rem; } .pole__etykieta{ font-size:var(--t-maly); font-weight:600; color:var(--tekst-1c); } .pole__etykieta span{ font-weight:400; color:var(--tekst-3c); } .pole input,.pole textarea{ width:100%; padding:.8rem .95rem; border-radius:var(--promien-m); background:var(--ciemny-1); color:var(--tekst-1c); border:1px solid var(--linia-c2); transition:border-color .15s ease, box-shadow .15s ease; } .pole input::placeholder,.pole textarea::placeholder{ color:var(--tekst-3c); opacity:.8; } .pole input:focus,.pole textarea:focus{ border-color:rgba(var(--puchacz-rgb),.7); box-shadow:0 0 0 3px rgba(var(--puchacz-rgb),.18); outline:none; } .pole textarea{ min-height:110px; resize:vertical; } .pole--blad input,.pole--blad textarea{ border-color:var(--alarm); } .pole__blad{ font-size:var(--t-drobny); color:var(--alarm); } .pole__blad:empty{ display:none; } /* zgoda — pole dotykowe minimum 24 px */ .zgoda{ display:grid; grid-template-columns:auto 1fr; gap:.7rem; align-items:start; font-size:var(--t-drobny); color:var(--tekst-2c); line-height:1.5; } .zgoda input{ width:24px; height:24px; margin:0; accent-color:var(--puchacz-tekst); } .zgoda a{ color:var(--puchacz); } /* honeypot — wyprowadzony poza ekran, bez wpływu na szerokość dokumentu */ .pulapka{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; } /* formularz na jasnej sekcji */ .sekcja--jasna .pole__etykieta,.sekcja--jasna2 .pole__etykieta, .sekcja--jasna3 .pole__etykieta{ color:var(--tekst-1); } .sekcja--jasna .pole input,.sekcja--jasna .pole textarea, .sekcja--jasna2 .pole input,.sekcja--jasna2 .pole textarea, .sekcja--jasna3 .pole input,.sekcja--jasna3 .pole textarea{ background:var(--jasny-0); color:var(--tekst-1); border-color:var(--linia-3); } /* ============================================================================ 14 · FAQ ========================================================================== */ .faq{ border-top:1px solid var(--linia-2); } .sekcja--ciemna .faq{ border-top-color:var(--linia-c1); } .faq details{ border-bottom:1px solid var(--linia-2); } .sekcja--ciemna .faq details{ border-bottom-color:var(--linia-c1); } .faq summary{ display:flex; align-items:flex-start; gap:1rem; cursor:pointer; padding:1.15rem 0; list-style:none; font-family:var(--kroj-tytul); font-size:1.125rem; line-height:1.35; letter-spacing:-.012em; } .faq summary::-webkit-details-marker{ display:none; } .faq summary::after{ content:"+"; margin-left:auto; flex:none; font-family:var(--kroj-mono); font-size:1.25rem; line-height:1; color:var(--tekst-3); transition:transform .18s ease; } .faq details[open] summary::after{ content:"–"; } .faq__odp{ padding:0 0 1.35rem; max-width:44rem; color:var(--tekst-2); font-size:var(--t-maly); } .sekcja--ciemna .faq__odp{ color:var(--tekst-2c); } /* ============================================================================ 15 · NAGŁÓWEK STRONY Blok do skopiowania 1:1 na każdą podstronę. Nawigacja jest wpisana w HTML, NIE wstrzykiwana JavaScriptem — robot bez JS musi ją zobaczyć. ========================================================================== */ .gorny{ position:sticky; top:0; z-index:60; background:rgba(255,255,255,.82); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--linia-2); } .gorny__rzad{ display:flex; align-items:center; gap:1rem; height:var(--gorny-h); max-width:var(--zawartosc); margin-inline:auto; padding-inline:var(--brzeg); } .marka{ display:flex; align-items:center; gap:.6rem; text-decoration:none; flex:none; } /* ZNAK: kafel jak w siatce ikon Adobe, w środku litera O — ta sama, która stoi w nazwie obok. `currentColor` w ścieżce sprawia, że litera bierze kolor stąd, więc jedna reguła obsługuje kafel jasny i ciemny. */ .marka__znak{ width:30px; height:30px; border-radius:9px; flex:none; background:linear-gradient(219deg, #3A3048 7.7%, #17131E 94.35%); display:grid; place-items:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.16); color:var(--jasny-1); /* barwa litery wewnątrz kafla */ } .marka__znak svg{ width:21px; height:21px; display:block; } .marka__nazwa{ font-family:var(--kroj-tytul); font-size:1.25rem; letter-spacing:-.02em; color:var(--tekst-1); } .nawigacja{ display:flex; align-items:center; gap:.15rem; margin-left:auto; } .nawigacja a{ font-size:.875rem; font-weight:520; color:var(--tekst-2); text-decoration:none; padding:.45rem .6rem; border-radius:7px; white-space:nowrap; } .nawigacja a:hover{ color:var(--tekst-1); background:var(--jasny-4); } .nawigacja a[aria-current="page"]{ color:var(--tekst-1); font-weight:640; } /* „Panel" to wejście dla kogoś, kto już jest klientem — nie kolejna pozycja oferty. Oddzielony kreską i odrobinę lżejszy, żeby nie konkurował z Rysiem, Puchaczem i Żubrem, ale żeby dało się go znaleźć bez szukania. */ .nawigacja__panel{ margin-left:.35rem; padding-left:.85rem; border-left:1px solid var(--linia-2); color:var(--tekst-3) !important; /* przebija .nawigacja a — ta sama specyficzność */ } .nawigacja__panel:hover{ color:var(--tekst-1) !important; } .gorny .btn{ margin-left:.6rem; } .menu-przycisk{ display:none; margin-left:auto; padding:.5rem .8rem; border-radius:8px; background:var(--jasny-3); border:1px solid var(--linia-2); font-size:var(--t-maly); font-weight:600; cursor:pointer; } .menu-mobilne{ display:none; border-top:1px solid var(--linia-2); background:var(--jasny-0); } .menu-mobilne.otwarte{ display:block; } .menu-mobilne a{ display:block; padding:.85rem var(--brzeg); text-decoration:none; color:var(--tekst-1); border-bottom:1px solid var(--linia-1); font-weight:550; } .menu-mobilne .btn{ margin:1rem var(--brzeg); width:calc(100% - 2*var(--brzeg)); } @media (max-width:1020px){ .nawigacja,.gorny__rzad > .btn{ display:none; } .menu-przycisk{ display:block; } } /* ============================================================================ 16 · STOPKA — blok do skopiowania 1:1 na każdą podstronę ========================================================================== */ .stopka{ background:var(--ciemny-1); color:var(--tekst-2c); padding-block:clamp(2.75rem,2rem + 3vw,4.25rem) 2rem; border-top:1px solid var(--linia-c2); } .stopka__rzad{ display:grid; gap:2rem; grid-template-columns:1.2fr 1fr 1fr 1.3fr; } @media (max-width:900px){ .stopka__rzad{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .stopka__rzad{ grid-template-columns:1fr; } } .stopka h2{ font-family:var(--kroj-mono); font-size:.6875rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--tekst-3c); margin:0 0 .9rem; } .stopka a{ color:var(--tekst-2c); text-decoration:none; border-bottom:1px solid var(--linia-c2); } .stopka .marka{ border-bottom:0; } .stopka a:hover{ color:var(--tekst-1c); border-bottom-color:currentColor; } .stopka .marka__nazwa{ color:var(--tekst-1c); } .stopka__lista{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; font-size:var(--t-maly); } .stopka__dol{ margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--linia-c1); display:flex; flex-wrap:wrap; gap:.75rem 2rem; justify-content:space-between; font-size:var(--t-drobny); color:var(--tekst-3c); } /* ============================================================================ 17 · PASEK MOBILNY (przyklejone CTA) ========================================================================== */ .pasek-mobilny{ position:fixed; left:0; right:0; bottom:0; z-index:70; padding:.7rem var(--brzeg) calc(.7rem + env(safe-area-inset-bottom)); background:rgba(20,17,27,.86); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-top:1px solid var(--linia-c2); transform:translateY(110%); transition:transform .24s ease; } .pasek-mobilny.widoczny{ transform:translateY(0); } .pasek-mobilny .btn{ width:100%; color:#17131E; background-image:linear-gradient(219deg, #FFFFFF 7.7%, #E7E2F0 94.35%); } @media (min-width:861px){ .pasek-mobilny{ display:none; } } body.z-paskiem{ padding-bottom:104px; } /* żeby pasek nie zasłaniał noty na dole */ @media (min-width:861px){ body.z-paskiem{ padding-bottom:0; } } /* ============================================================================ 18 · DROBIAZGI ========================================================================== */ /* nota robocza — kasować przy wyjściu na produkcję */ .robocza{ padding:1rem var(--brzeg); text-align:center; font-size:var(--t-drobny); color:var(--tekst-3c); background:var(--ciemny-0); border-top:1px solid var(--linia-c1); } /* tylko dla czytników ekranu */ .tylko-czytnik{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* przeskocz do treści */ .przeskocz{ position:absolute; left:-9999px; z-index:100; padding:.7rem 1.1rem; background:var(--tekst-1); color:#fff; border-radius:8px; } .przeskocz:focus{ left:var(--brzeg); top:.5rem; } /* szanujemy ustawienie „ogranicz ruch" */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } .przelot{ background:none; color:var(--tekst-1); -webkit-text-fill-color:var(--tekst-1); } .sekcja--ciemna .przelot{ color:var(--tekst-1c); -webkit-text-fill-color:var(--tekst-1c); } } /* druk */ @media print{ .gorny,.pasek-mobilny,.menu-mobilne,.mgla,.siatka{ display:none !important; } .sekcja{ padding-block:1.5rem; background:#fff !important; color:#000 !important; } h1{ -webkit-text-fill-color:#000; color:#000; filter:none; } } /* ============================================================================ 19 · PODSTRONY — dopisane przy budowie /rys, /puchacz, /zubr, /cennik, /kontakt, /akademia, /artykuly, /zasoby, /404. Blok dopisany na KOŃCU arkusza świadomie: kilka reguł niżej nadpisuje ustawienia z bloku 02 (tło sekcji bohaterskiej) i musi być po nich. Żadna podstrona nie ma własnego