/* ══════════════════════════════════════════════════════════════════════ TOKENS - jedyne zrodlo prawdy dla kolorow, typografii, siatki i rytmu. Zaden inny plik nie definiuje wartosci surowych. Zmiana tutaj = zmiana w calym serwisie. ══════════════════════════════════════════════════════════════════════ */ :root { /* ── KOLOR: powierzchnie ───────────────────────────────────────────── Warstwy nad tlem niosa slad chromy w kierunku czerwieni marki, zeby nie byly martwo szare. Kontrast buduja powierzchnie, nie same ramki. KANWA TO #121212, NIE GRAFIT #1A1A1A Z KSIEGI (decyzja klienta 2026-08-10). Ksiega mowi "grafit stanowi podstawowe tlo marki" (str. 16), a wersja kolorowa znaku jest przeznaczona na ciemne jednolite tla, "w szczegolnosci na tle marki #1A1A1A" (str. 8) - to jest wiec swiadome odstepstwo, przyjete z uwaga, ze ksiega jest ustaleniem poczatkowym i moze zostac zaktualizowana. Powod jest w materiale, nie w guscie: czern w rogach kazdego renderu i kazdej okladki filmu w tym projekcie ma jasnosc 5-24 (skala 0-255), a stare tlo mialo 26. Strona byla JASNIEJSZA niz wszystko, co na niej lezy, wiec kadr filmu w sekcji "haslo" - jedyny z twarda krawedzia - czytal sie jako ciemniejsza lata z widocznym uskokiem na styku. #121212 (jasnosc 18) wchodzi w zakres materialu i uskok znika. DLACZEGO NIE PELNA CZERN, mimo ze na OLED wygladalaby najlepiej: kafel szkla (`--c-szklo`) to biel 10% NALOZONA na tlo, wiec ciemnieje razem z nim, a zwykla `.card` ma wartosc bezwzgledna i stoi w miejscu. Ponizej ~#121212 oba zbiegaja sie do jednej powierzchni i material zamowiony przez klienta przestaje byc osobnym poziomem hierarchii. Do tego wstega neonu na czerni robi sie glosniejsza, a dlugie wygaszenia kadrow w pelna czern to klasyczny przypadek pasowania (banding) przy 8 bitach. GRAFIT #1A1A1A NIE ZNIKA Z MARKI - zostaje tam, gdzie opisuje go ksiega: plansza ochronna pod znakiem na zdjeciach (str. 21-22), kafel 500x500 do social mediow (str. 14) i `assets/iv-og-image.png`. W kodzie serwisu nie wystepuje juz ani raz poza `theme-color` w naglowkach podstron, ktory jest po prostu tym samym tlem widzianym przez pasek przegladarki na telefonie i idzie razem z ta zmiana. CO ZOSTAJE BEZ ZMIAN: cala skala powierzchni. KRYCIE WSTEG (`--tor-jasnosc`) JUZ NIE - to zdanie bylo aktualne do 2026-08-11. Wtedy stalo tu, ze neon ma byc jasniejszy wzgledem tla i nie nalezy go sciszac "przy okazji". Zostal sciszony, ale nie przy okazji i nie z gustu: pomiar pokazal, ze wstega przechodzi PRZEZ WIERSZE tekstu (2,81 na prozie "O nas" przy progu 4,5), a nie obok nich. Nowe wartosci i pelne uzasadnienie: css/layout.css, blok "przyciemnienie wsteg". */ --c-bg: #121212; /* kanwa serwisu */ --c-surface: oklch(0.246 0.006 25); /* karta na tle */ --c-surface-up: oklch(0.285 0.008 25); /* karta wyzej / wyrozniona */ /* --c-surface-hover skasowany 2026-08-14 (martwy kod - zaden komponent nie ma stanu hover na tym stopniu powierzchni; .btn--secondary:hover idzie na --c-surface, karty w ogole nie maja hoveru, patrz components.css) */ /* "SZKLO" - biel 10% zamiast wlasnego, nieprzezroczystego odcienia (decyzja klienta 2026-08-10). Kafel na tym tle jest jasniejszy od --c-surface i - co wazniejsze - lezy NA tym, co pod nim: nad zwyklym tlem strony daje szary panel, a nad wstega neonu przepuszcza jej kolor. Dlatego trafia tam, gdzie kafle mialy byc lepiej widoczne, a nie wszedzie: podmiana --c-surface skasowalaby cala reszte hierarchii powierzchni (karta / karta wyzej / strefa bezpieczna). `in srgb`, nie `in oklab` - miks bieli z przezroczystoscia ma tu byc doslownie "biel przy 10% krycia", czyli rgba(255,255,255,0.1). */ --c-szklo: color-mix(in srgb, #fff 10%, transparent); --c-szklo-krawedz: color-mix(in srgb, #fff 16%, transparent); /* FAKTURA SZKLA (decyzja klienta 2026-08-10, druga tura: "bardziej glass texture niz czysta biel - da to wiecej glebi"). Sama plaska biel 10% czytala sie jak folia: jednolita jasnosc na calej powierzchni, czyli dokladnie to, czego szklo nie robi. Tafla ma kierunek swiatla, gruby brzeg i rozmywa to, co za nia. Stad trzy skladniki zamiast jednego: --grad-szklo swiatlo pada z gornego lewego rogu (ten sam kierunek, co poswiata w kadrach hero), dol tafli lekko gasnie --cien-szklo refleks na gornej krawedzi (inset) + miekki cien pod plyta. Zwykla .card cieni nie ma i miec nie bedzie - tu sa uzasadnione: szklo LEZY NAD trescia, nie jest wycietym w tle prostokatem --blur-szklo rozmycie tla za tafla. To ten skladnik daje glebie nad wstega neonu (.tor): kolor przechodzi, ale ksztalt sie rozmywa, wiec widac, ze to dwie warstwy, a nie jedna. Nasycenie w gore, bo samo rozmycie spiera kolor. */ --grad-szklo: linear-gradient(155deg, color-mix(in srgb, #fff 7%, transparent) 0%, transparent 45%, color-mix(in srgb, #000 10%, transparent) 100%); --cien-szklo: inset 0 1px 0 0 color-mix(in srgb, #fff 15%, transparent), 0 16px 36px -26px color-mix(in srgb, #000 85%, transparent); --blur-szklo: blur(12px) saturate(1.15); /* szara "strefa bezpieczna" - wyraznie jasniejsza i mniej nasycona niz karty produktowe, zeby formularz kontaktowy czytal sie jako spokojny, neutralny panel, a nie kolejna ciemna plyta tego samego odcienia co reszta strony (decyzja klienta 2026-08-07). */ --c-surface-safe: oklch(0.340 0.004 30); /* ── KOLOR: marka ──────────────────────────────────────────────────── Czerwien dominuje, niebieski wystepuje wylacznie jako drugi koniec gradientu znaku. Gradient nie trafia na przyciski ani na tekst. DWIE CZERWIENIE W SERWISIE - I TAK MA BYC (ustalone pomiarem 2026-08-11). Ten token rozwija sie do #DD2C29, a NIE do #E5352B, jak twierdzil tu poprzedni komentarz. Pliki graficzne (logo, favicon, wstegi neonu) niosa literalne #E5352B. Roznica zostaje, bo obie wartosci sa uzasadnione czym innym: #DD2C29 (ten token) - czerwien UI, czyli powierzchnia, NA KTOREJ LEZY TEKST. Wybrana kontrastem: biel na niej daje 4,70 (prog WCAG AA to 4,5), a to jedyna czerwien, na ktorej blok CTA moze ten prog osiagnac. Dla porownania #E5352B daje 4,31 z biela i 4,35 z ciemnym tekstem, czyli nie przechodzi w zadna strone. #E5352B (pliki SVG) - czerwien GRAFIKI. Zmierzona z obwodki neonu na renderze hero (patrz --neon-start nizej), wiec przemalowanie jej rozjechaloby wstege ze zdjeciem nad nia. Nie lezy na niej zaden tekst, wiec prog kontrastu jej nie dotyczy. Zasada: czerwien UI niesie tekst, czerwien grafiki jest swiatlem na zdjeciu. Nie zrownywac ich bez ponownego przeliczenia bloku CTA. */ --c-brand: oklch(0.583 0.212 27.5); /* #DD2C29 - patrz wyzej */ --c-brand-hover: oklch(0.630 0.200 27.5); --c-brand-active: oklch(0.530 0.200 27.5); --c-brand-blue: oklch(0.363 0.132 265); /* #143F8A */ /* gradient marki - staly kierunek czerwien -> niebieski, bez wyjatkow */ --grad-brand: linear-gradient(90deg, var(--c-brand) 0%, var(--c-brand-blue) 100%); /* ── KOLOR: neon podstron ──────────────────────────────────────────── Kazda podstrona ma wlasny kadr hero i wlasny kolor neonu na nim. Te trzy wartosci sa ZMIERZONE z obwodek na renderach (hero_start / hero_oferta / hero_o_nas .webp), nie dobrane z palety UI - wstega `.tor` ma byc tym samym swiatlem, co ksztalt w kadrze nad nia. UWAGA: kazda z nich wystepuje DRUGI RAZ, wprost w swoim pliku SVG (assets/neon-tor*.svg). SVG wczytany jako background-image nie widzi CSS strony, wiec `currentColor` tam nie zadziala i innego wyjscia nie ma. Zmiana koloru = zmiana w dwoch miejscach. Czego tu swiadomie NIE ma: --c-brand-blue (#143F8A) to granat ze znaku, na graficie tla wstega z niego praktycznie znika; --c-safe to zielen "idz dalej" z formularza i nie moze zaczac znaczyc jednoczesnie "podstrona o nas". */ --neon-start: #E5352B; /* = --c-brand, trojkat w kadrze index.html */ --neon-oferta: #4C8AC6; /* romb w kadrze oferta.html */ --neon-onas: #8CD380; /* pierscien w kadrze o-nas.html */ /* poswiata neonowa - cytat ze zdjecia hero (swiecaca ramka wokol produktu). Jedno miejsce kalibracji: kazde uzycie neonu w serwisie idzie przez ten token, zeby jasnosc/rozrzut byly wszedzie takie same. Celowo poza przyciskami - brief wprost zabrania "glowing buttons". */ --glow-brand: 0 0 20px 0 color-mix(in oklab, var(--c-brand) 65%, transparent); /* ── KOLOR: ZNACZENIE ──────────────────────────────────────────────── Dwa kolory, ktore nie naleza do marki tylko do STANU. Sa osobnymi tokenami wlasnie po to, zeby nie dalo sie ich pomylic z kolorami podstron (decyzja klienta 2026-08-11). REGULA, ktorej nie lamiemy: czerwien marki (--c-brand) NIGDY nie znaczy bledu, zielen podstrony "o nas" (--neon-onas) NIGDY nie znaczy potwierdzenia. Od tego sa dwa tokeny ponizej i tylko one. --c-safe: "idz dalej / bezpiecznie". Przycisk postepu formularza, krawedz poprawnego pola, obrys fokusu w polu. Jeden przycisk, dwa stany tekstu ("Dalej" i "Wyslij"), jeden kolor - to ten sam element przez caly formularz, wiec kolor nie zmienia sie w trakcie kroku. Wartosc zostaje bez zmian: 5,94 jako tlo przycisku z ciemnym napisem, 3,74 jako obrys na panelu, i jasnosc wyraznie odrebna od --neon-onas (#8CD380). */ --c-safe: oklch(0.640 0.140 152); --c-safe-hover: oklch(0.690 0.130 152); --c-safe-active: oklch(0.580 0.140 152); /* --c-err: "cos poszlo nie tak". WPROWADZONY 2026-08-11 - wczesniej blad w formularzu byl malowany --c-brand, co dawalo 2,51 na panelu "strefy bezpiecznej" przy progu 4,5. To byl najgorszy kontrast w calym serwisie i akurat w stanie, w ktorym czytelnosc decyduje o tym, czy zgloszenie w ogole dotrze. Jasnosc 0.74 nie jest dobrana "na oko": to najnizsza wartosc, przy ktorej ten odcien przechodzi prog na NAJJASNIEJSZEJ powierzchni serwisu. Kontrola: 4,78 na --c-surface-safe, 6,57 na --c-surface, 7,60 na kanwie. Schodzenie nizej lamie panel formularza - jedyne miejsce, gdzie ten token dzis stoi. */ --c-err: oklch(0.740 0.150 25); /* #FB817A */ /* ── KOLOR: tekst ──────────────────────────────────────────────────── Nie czysta biel na tekscie ciaglym - na graficie razi. Czysta biel zostaje zarezerwowana dla znaku. */ --c-text: oklch(0.970 0.003 60); --c-text-2: oklch(0.780 0.006 30); /* podtytuly, opisy */ /* 0.640, nie 0.600 (2026-08-10). Przy 0.600 ten kolor mial kontrast 4,07 na karcie (--c-surface), czyli PONIZEJ progu WCAG 4,5 dla tekstu ciaglego - a nosi wlasnie tekst najmniejszy w serwisie (--t-xs). 0.640 daje 4,78 na karcie i 5,53 na kanwie, i nadal lezy wyraznie ponizej --c-text-2 (0.780), wiec trzy stopnie tekstu zostaja trzema stopniami. Wyzej nie: na panelu "strefy bezpiecznej" prog wymaga az 0.710, czyli praktycznie --c-text-2 - tam zamiast podnosic ten token schodzimy o stopien wyzej w hierarchii (patrz KONTAKT w sections.css). */ --c-text-muted: oklch(0.640 0.008 30); /* etykiety, meta */ /* ── KOLOR: sprzet - skasowane 2026-08-14 (martwy kod) ───────────────── --c-obudowa / --c-cokol / --c-krawedz-alu nie byly nigdzie konsumowane: materialy modelu 3D sa zapieczone w samym pliku .glb, nie czytane z CSS. Wartosci na wypadek, gdyby kiedys byl potrzebny UI kolorowany pod sprzet (zrodlo: assets/3d/README.md, nie wymyslone): aluminium obudowy oklch(0.205 0.004 25) / stal proszkowa cokolu oklch(0.175 0.003 25) / odblask fazki krawedzi oklch(0.420 0.006 25). */ /* ── KOLOR: krawedzie ────────────────────────────────────────────── */ --c-border: oklch(0.340 0.008 25); --c-border-hover: oklch(0.440 0.012 25); /* KRAWEDZ, KTORA NIESIE INFORMACJE (2026-08-11). Dwa tokeny wyzej sa krawedziami DEKORACYJNYMI - rozdzielaja pola, obrysowuja kafle, i przy 1,58 (--c-border) oraz 2,40 (--c-border-hover) na kanwie robia to dokladnie tak dyskretnie, jak mialy. Ten token jest do czegos innego: do obrysu, ktory JEST JEDYNYM znakiem, ze cos jest kontrolka. Przycisk drugorzedny nie ma wypelnienia, wiec bez widocznej krawedzi czyta sie jak zwykly tekst (widac to bylo na "Sprawdz" w hero oferty). WCAG 1.4.11 wymaga tam 3:1 - 0.50 daje 3,13 na kanwie. NIE podnosic zamiast tego --c-border-hover: ten sam token niosa pigulki zastosowan, kreska .lnk i znaczniki konfiguratora, wiec globalna zmiana rozjechalaby cztery niezwiazane komponenty. */ --c-border-kontrolka: oklch(0.500 0.008 25); /* #686261, kontrast 3,13 */ --c-border-kontrolka-hover: oklch(0.600 0.008 25); /* jasniej pod kursorem */ /* ── TYPOGRAFIA: rodziny ───────────────────────────────────────────── Afacad to krój marki (na nim zbudowano logotyp) - naglowki i liczby. Inter niesie tekst ciagly, nawigacje i dane techniczne. */ --f-display: 'Afacad', 'Trebuchet MS', system-ui, sans-serif; --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* ── TYPOGRAFIA: skala ─────────────────────────────────────────────── clamp() zamiast progow media - plynne skalowanie od 360 do 1600 px. */ --t-display-xl: clamp(3rem, 6vw, 5.5rem); --t-display-lg: clamp(2.5rem, 5vw, 4.5rem); --t-h1: clamp(2.25rem, 4vw, 4rem); --t-h2: clamp(1.875rem, 3vw, 3rem); --t-h3: clamp(1.5rem, 2vw, 2rem); --t-body-lg: clamp(1.125rem, 1.5vw, 1.25rem); --t-body: 1rem; --t-sm: 0.875rem; --t-xs: 0.8125rem; /* ── TYPOGRAFIA: grubosci i interlinia ───────────────────────────── */ --w-regular: 400; --w-medium: 500; --w-semi: 600; --w-bold: 700; --lh-tight: 1.02; /* naglowki display */ --lh-head: 1.12; /* naglowki sekcji */ --lh-body: 1.65; /* tekst ciagly */ /* trackING - Afacad w duzych stopniach potrzebuje zaciesnienia, male etykiety wersalikowe potrzebuja rozluznienia */ --ls-display: -0.02em; --ls-label: 0.12em; /* ── ODSTEPY ───────────────────────────────────────────────────────── Skala z briefu. Duze wartosci naleza do sekcji i wypowiedzi, male do kart, list i danych technicznych. */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-30: 120px; --s-40: 160px; /* pion sekcji - skaluje sie z ekranem, zeby na mobile nie bylo pustki */ --s-section: clamp(var(--s-20), 12vw, var(--s-40)); /* ── SIATKA I SZEROKOSCI ───────────────────────────────────────────── Modul produktu ma 192x96 cm, czyli proporcje 2:1. Ta sama proporcja rzadzi siatka strony - uklad jest zbudowany z tego samego elementu co sciana LED. */ --ratio-modul: 2 / 1; --w-page: 1440px; /* kontener podstawowy */ --w-wide: 1600px; /* sekcje pelnoszerokie */ --w-hero: 1000px; /* blok tresci hero */ --w-text: 680px; /* tekst ciagly, ~68ch przy body-lg */ --w-narrow: 560px; /* podtytuly pod naglowkiem sekcji */ --pad-x: clamp(var(--s-6), 5vw, var(--s-16)); /* margines boczny strony */ /* ── PROMIENIE ─────────────────────────────────────────────────────── Marka jest ostra - ekran LED tnie obraz na twarde piksele, nie na zaokraglone plamy. 2-4 px zamiast poprzedniej zmiekczonej skali (decyzja klienta 2026-08-07): tyle, zeby krawedz nie byla brzytwa pod palcem, za malo, zeby czytac sie jako "zaokraglone". */ --r-sm: 2px; /* przyciski, pola */ --r-md: 3px; /* karty male */ --r-lg: 3px; /* karty duze */ --r-xl: 4px; /* media pelnoszerokie */ /* wnetrze kafla - token, nie wartosc wpisana w .card, bo elementy dosuniete do krawedzi kafla (np. czerwona kreska kroku Procesu) musza znac te sama liczbe, zeby stanac w jednej linii z trescia */ --pad-card: clamp(var(--s-6), 3vw, var(--s-10)); /* ── RUCH ──────────────────────────────────────────────────────────── Czasy z briefu. Krzywa wykladnicza wyhamowujaca - bez odbic. */ --d-fast: 150ms; --d-normal: 300ms; --d-slow: 600ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint */ /* wejscie elementu w kadr (reveal) - dluzsze niz reakcja na kursor, bo to ruch tresci, nie odpowiedz interfejsu. Jedno zrodlo dla calego serwisu, patrz motion.css i js/ruch.js. */ --d-reveal: 700ms; --reveal-y: 18px; /* dystans wjazdu od dolu */ --reveal-krok: 90ms; /* odstep miedzy kolejnymi kaflami w grupie */ /* uniesienie elementu pod kursorem - wspolne dla przyciskow i kafli. Marka jest ostra, wiec ruch jest minimalny: ma byc zauwazony, nie ogladany. */ --lift: -2px; /* ── WARSTWY ─────────────────────────────────────────────────────── --z-scene skasowany 2026-08-14 (martwy kod - canvas 3D nie ma dzis wlasnego z-index, stoi w naturalnym porzadku malowania .konfig3d__scena). */ --z-body: 1; --z-header: 50; --z-menu: 60; /* menu mobilne nad naglowkiem */ /* wysokosc paska naglowka - potrzebna do scroll-margin i offsetu hero. 72 -> 62 px na waskim ekranie (2026-08-11, zgloszenie klienta: znak w menu jest za duzy). Pasek jest odmierzany od znaku: przy 32 px logo zostaje po 15 px powietrza z gory i z dolu, czyli tyle, ile mial przy 34 px w 72 px paska. Ta wartosc idzie tez w scroll-margin sekcji, w offset hero i w gorna krawedz menu mobilnego - stad jeden token. */ --h-header: 62px; } @media (min-width: 900px) { :root { --h-header: 84px; } }