/* ============================================================================ OSTOJA — ARKUSZ PANELU AUDYTU (lejek + panel administratora) ---------------------------------------------------------------------------- Jeden plik dla wszystkich pięciu ekranów: strona z formularzem, podziękowanie, ekran „popraw dane", brama panelu i sam panel. Tokeny są przepisane z ~/Downloads/ostoja/styl.css — to jest ten sam system, nie jego kopia „na oko". ZASADY, KTÓRYCH TU NIE ŁAMIEMY (te same, co na stronie Ostoi): 1. Zero zasobów z sieci. Żadnych fontów z Google, żadnego CDN. Krój jest systemowy — na Macu San Francisco, na Windowsie Segoe UI. To twarda reguła marki: sprzedajemy sprawdzanie cudzych stron pod kątem tego, co ładują z zewnątrz, więc sami nie ładujemy stąd niczego. 2. Atrament #1A1620 zamiast czerni. Każda linia i każdy cień powstaje z atramentu na niskiej alfie — w całym pliku nie ma ani jednej przypadkowej szarości i ani jednego czarnego cienia. 3. Baza jest jasna, ciemne bloki są przerywnikiem (hero → treść → ciemne CTA). 4. Kolor niesie znaczenie: bursztyn = Ryś, fiolet = Puchacz, zieleń = Żubr, czerwień = wyłącznie realny błąd. W triadzie wyniku audytu („napraw dziś / warto poprawić / już działa") kolor jest sygnałem, nie ozdobą. 5. Gradienty wygaszamy do koloru z alfą 0, NIGDY do `transparent` — inaczej WebKit wstawia po drodze szarość. ========================================================================== */ /* --------------------------------------------------------------------------- 01 · TOKENY — tryb jasny (baza) ------------------------------------------------------------------------- */ :root{ --atrament: 26, 22, 32; /* #1A1620 — nigdy #000 */ /* powierzchnie: skala jasna Ostoi, poziomy 3 / 0 / 2 / 4 */ --bg: #F5F3F8; --karta: #FFFFFF; --karta-2: #F8F6FB; --karta-3: #F0EDF5; --karta-4: #E5E1EC; /* tekst — kontrasty policzone na bieli */ --ink: #1A1620; /* 17,8:1 */ --muted: #4C4657; /* 9,1:1 */ --faint: #5F5869; /* 6,7:1 */ /* linie i ramki pól */ --linia: rgba(26,22,32,.10); --linia-2: rgba(26,22,32,.06); --linia-3: rgba(26,22,32,.16); --pole: rgba(26,22,32,.16); /* akcent interfejsu: fiolet. W tej marce cała skala szarości jest podfioletowana (atrament #1A1620), więc fiolet jest barwą NEUTRALNĄ. Sygnałem Puchacza zostaje nasycone #AC90F7 i tylko tam, gdzie mowa o AI. */ --akcent: #5836C4; /* 7,7:1 na bieli */ --akcent-mieki: rgba(88,54,196,.09); /* moduły */ --rys:#F2AE3E; --rys-tekst:#7A5000; --rys-rgb:242,174,62; --puchacz:#AC90F7; --puchacz-tekst:#5836C4; --puchacz-rgb:172,144,247; --zubr:#4FDB8C; --zubr-tekst:#0B6E3D; --zubr-rgb:79,219,140; --alarm:#FF6B78; --alarm-tekst:#B3261E; --alarm-rgb:179,38,30; /* promienie — tylko dwa, z drabiny Ostoi. Zakaz 999px. */ --promien: 14px; --promien-m: 9px; /* cienie — drabina warstw tego samego atramentu */ --cien-1: 0 1px 2px -1px rgba(26,22,32,.06), 0 2px 4px -2px rgba(26,22,32,.05); --cien-2: 0 4px 8px -4px rgba(26,22,32,.07), 0 8px 16px -8px rgba(26,22,32,.06), 0 16px 32px -16px rgba(26,22,32,.05); --cien-3: 0 10px 34px rgba(26,22,32,.09), 0 2px 6px rgba(26,22,32,.05); /* typografia — krój systemowy, zero pobierania */ --kroj: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --kroj-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --rama: 1080px; /* najszersza rama: panel, tabele */ --os: 860px; /* oś treści lejka */ } /* --------------------------------------------------------------------------- 02 · TOKENY — tryb ciemny Nie odwracamy kolorów filtrem. Każdy poziom jest wzięty ze skali ciemnej Ostoi (#0B0910 … #2E2838), więc ciemny wygląda jak decyzja, a nie jak awaria. ------------------------------------------------------------------------- */ @media (prefers-color-scheme:dark){ :root{ --bg: #0B0910; --karta: #14111B; --karta-2: #191520; --karta-3: #1E1926; --karta-4: #2E2838; --ink: #F2F0F6; --muted: #B9B3C6; --faint: #A79FB7; --linia: rgba(255,255,255,.12); --linia-2: rgba(255,255,255,.07); --linia-3: rgba(255,255,255,.20); --pole: rgba(255,255,255,.20); --akcent: #A78BFF; --akcent-mieki: rgba(167,139,255,.14); --rys-tekst: #F2AE3E; --puchacz-tekst: #C7B2FF; --zubr-tekst: #4FDB8C; --alarm-tekst: #FF9A93; --cien-1: 0 1px 2px rgba(0,0,0,.4); --cien-2: 0 12px 28px rgba(0,0,0,.45); --cien-3: 0 12px 40px rgba(0,0,0,.5); } } /* --------------------------------------------------------------------------- 03 · RESET I PODSTAWY ------------------------------------------------------------------------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--kroj); font-size:17px; line-height:1.6; letter-spacing:-.005em; -webkit-font-smoothing:antialiased; } img,svg{ max-width:100%; display:block; } a{ color:inherit; } button,input,select,textarea{ font:inherit; color:inherit; } hr{ border:0; height:1px; background:var(--linia); margin:1.6rem 0; } :focus-visible{ outline:2px solid var(--akcent); outline-offset:2px; } .rama{ max-width:var(--rama); margin:0 auto; padding:0 clamp(1.25rem,.6rem + 2.4vw,2.5rem); } .os { max-width:var(--os); margin:0 auto; padding:0 clamp(1.25rem,.6rem + 2.4vw,2.5rem); } /* pominięcie nawigacji dla czytających klawiaturą */ .przeskocz{ position:absolute; left:-9999px; top:0; z-index:20; background:var(--karta); color:var(--ink); padding:10px 16px; border-radius:var(--promien-m); box-shadow:var(--cien-2); } .przeskocz:focus{ left:12px; top:12px; } /* --------------------------------------------------------------------------- 04 · ZNAK MARKI (sygnet + nazwa) Sygnet to litera O z Montserrat 700 — ta sama, która stoi w nazwie. ------------------------------------------------------------------------- */ .marka{ display:flex; align-items:center; gap:.62rem; text-decoration:none; color:inherit; } .marka__znak{ width:32px; height:32px; border-radius:10px; flex:none; background:linear-gradient(219deg,#3A3048 7.7%,#17131E 94.35%); display:grid; place-items:center; color:#FCFBFD; box-shadow:inset 0 1px 0 rgba(255,255,255,.16); } .marka__znak svg{ width:22px; height:22px; display:block; } .marka__nazwa{ font-size:1.16rem; font-weight:640; letter-spacing:-.022em; } .marka__ogon{ font-size:.86rem; font-weight:500; color:var(--faint); letter-spacing:-.01em; } /* --------------------------------------------------------------------------- 05 · NAGŁÓWEK STRONY ------------------------------------------------------------------------- */ .gorny{ background:var(--karta); border-bottom:1px solid var(--linia); padding:14px 0; } .gorny .rama{ display:flex; justify-content:space-between; align-items:center; gap:16px; } .gorny__kontakt{ font-size:.86rem; color:var(--muted); text-decoration:none; white-space:nowrap; } .gorny__kontakt:hover{ color:var(--ink); } /* --------------------------------------------------------------------------- 06 · TYPOGRAFIA ------------------------------------------------------------------------- */ h1,h2,h3{ letter-spacing:-.028em; font-weight:660; margin:0; line-height:1.14; } h1{ font-size:clamp(2.05rem,1.2rem + 3.1vw,3.1rem); } h2{ font-size:clamp(1.5rem,1.1rem + 1.5vw,2rem); letter-spacing:-.024em; } h3{ font-size:1.02rem; letter-spacing:-.018em; font-weight:640; } .nad{ font-size:.75rem; font-weight:640; letter-spacing:.09em; text-transform:uppercase; color:var(--faint); margin:0 0 14px; } .lead{ font-size:1.14rem; color:var(--muted); max-width:38em; margin:16px auto 0; line-height:1.55; } .drobne{ font-size:.82rem; color:var(--faint); line-height:1.5; } .mut{ color:var(--muted); } /* --------------------------------------------------------------------------- 07 · SEKCJA HERO + FORMULARZ WEJŚCIA ------------------------------------------------------------------------- */ .hero{ padding:clamp(3rem,1.6rem + 4.4vw,4.75rem) 0 clamp(2rem,1.2rem + 2.6vw,3rem); text-align:center; } .formularz{ background:var(--karta); border:1px solid var(--linia); border-radius:var(--promien); box-shadow:var(--cien-3); padding:22px; max-width:600px; margin:30px auto 0; text-align:left; } .pola{ display:flex; gap:10px; } .pola input{ flex:1; min-width:0; } input[type=text],input[type=email],input[type=tel],input[type=password], select,textarea,input[type=file]{ width:100%; padding:12px 14px; font-size:15px; font-family:inherit; background:var(--karta-2); color:var(--ink); border:1px solid var(--pole); border-radius:var(--promien-m); } input::placeholder,textarea::placeholder{ color:var(--faint); opacity:1; } input:focus,select:focus,textarea:focus{ outline:2px solid var(--akcent); outline-offset:1px; border-color:transparent; } textarea{ min-height:86px; resize:vertical; line-height:1.5; } label.etykieta{ display:block; font-size:12px; font-weight:640; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); margin-bottom:7px; } /* Przyciski: atrament w gradiencie, jak w bramie panelu. UWAGA NA SELEKTOR. Stało tu kiedyś `.przycisk, button.przycisk` — i to psuło odmiany: `button.przycisk` jest specyficzniejszy od `.przycisk--cichy`, więc KAŻDY