/* ══════════════════════════════════════════════════════════════════════ LAYOUT - kontenery, rytm sekcji i siatka modulu. Siatka strony powtarza geometrie produktu: kaseta LED ma 192x96 cm, czyli proporcje 2:1, i laczy sie w wieksze powierzchnie. Uklad strony jest zbudowany z tego samego elementu co sciana, ktora sprzedajemy. ══════════════════════════════════════════════════════════════════════ */ /* ── KONTENERY ─────────────────────────────────────────────────────── Domyslna szerokosc (--w-page) plus jeden modyfikator dla tekstu ciaglego. `.wrap--wide` i `.wrap--narrow` skasowane 2026-08-14 (martwy kod - zero uzyc w HTML; sekcje pelnoszerokie i wasze konteksty siegaja po tokeny --w-wide/--w-narrow wprost, patrz np. .header__inner, .hero, .head__sub). */ .wrap { width: 100%; max-width: var(--w-page); margin-inline: auto; padding-inline: var(--pad-x); } .wrap--text { max-width: var(--w-text); } /* ── SEKCJE ────────────────────────────────────────────────────────── Rytm pionowy jest zroznicowany celowo. Wypowiedzi i media dostaja pelen oddech, tresc techniczna zageszcza sie. */ .section { padding-block: var(--s-section); } .section--tight { padding-block: clamp(var(--s-16), 8vw, var(--s-24)); } .section--loose { padding-block: clamp(var(--s-24), 16vw, calc(var(--s-40) * 1.25)); } /* sekcja pelnoekranowa - wypowiedz albo scena 3D */ .section--full { min-height: 100svh; display: grid; align-content: center; } /* linia rozdzielajaca w kolorze marki - cytat z kreski przecinajacej sygnet, ten sam cytat co przekatna w ikonie hamburgera. Jedyne miejsce, gdzie gradient wychodzi poza znak. PROBA: pierwsze uzycie tokenu --glow-brand poza hero (patrz rozmowa 2026-08-06, "kierunek wizualny"). Cien jest waski i nisko rozmyty - linia ma swiecic, nie generowac halo wokol calej sekcji. */ .section-rule { height: 1px; border: 0; background: var(--grad-brand); opacity: 0.55; box-shadow: var(--glow-brand); max-width: var(--w-page); margin-inline: auto; } /* ── NAGLOWEK SEKCJI ──────────────────────────────────────────────── Tytul i podtytul, nic wiecej. Bez etykiet nad naglowkiem - porzadek ma nadawac sama tresc i odstepy. */ .head { margin-bottom: clamp(var(--s-10), 5vw, var(--s-16)); } /* NAGLOWEK SEKCJI STOI W JEDNEJ LINII (decyzja klienta 2026-08-10). Wczesniej 18ch (i 22ch w wariancie wysrodkowanym) lamalo kazdy dluzszy tytul na dwa wersy juz na pelnym desktopie, mimo ze w kolumnie bylo miejsce - limit, nie brak miejsca, decydowal o lamaniu. 38ch bierze sie z najdluzszego naglowka w serwisie: "Jedna technologia, wiele mozliwosci" (35 znakow) plus zapas na przyszle copy. `ch` to szerokosc zera w Afacad, czyli ok. 0.5em, a srednia litera jest wezsza - 38ch to realnie ~19em, wiec limit lezy WYZEJ niz tekst i nie lamie go. Miara nadal jest ograniczona: przy pelnym stopniu h2 to ok. 800 px, czyli nie powstaje pas tekstu przez cala szerokosc strony. Na waskim ekranie limit przestaje cokolwiek znaczyc - wczesniej konczy sie kolumna i naglowek zwija sie sam, tak jak ma. */ .head__title { max-width: 38ch; } .head__sub { max-width: var(--w-narrow); margin-top: var(--s-4); color: var(--c-text-2); font-size: var(--t-body-lg); } /* Proza pod podtytulem - dla sekcji, ktore niosa dluzszy opis, a nie samo jedno zdanie. Ta sama miara co `.head__sub`, ale STOPIEN NIZEJ w skali typograficznej: podtytul zostaje jednym akapitem, ktory ma sie wyroznic, a nie pierwszym z trzech rownorzednych. Bez tego rozroznienia dluzszy opis zamienia naglowek sekcji w blok tekstu. Odstep `--s-6`, nie `--s-5` - piatka NIE ISTNIEJE w skali z tokens.css, a token spoza skali uniewaznia CALA deklaracje i wartosc spada do zera bez zadnego ostrzezenia (zdarzylo sie juz dwa razy w tym projekcie). */ .head__proza { max-width: var(--w-narrow); margin-top: var(--s-6); color: var(--c-text-2); font-size: var(--t-body); } .head__proza > * + * { margin-top: var(--s-4); } /* wariant wysrodkowany - dla zamkniec i wypowiedzi */ .head--center { text-align: center; display: grid; justify-items: center; } /* wariant wysrodkowany nie ma juz wlasnego, ciasniejszego limitu - obowiazuje te same 38ch co kazdy inny naglowek sekcji (patrz .head__title wyzej) */ .head--center .head__sub { margin-inline: auto; } /* ── BENTO ─────────────────────────────────────────────────────────── Kafle o roznej wadze w jednej siatce - dokladnie tak, jak moduly LED zestawia sie w niesymetryczna sciane. Uklad jest celowo nietypowy: jeden dlugi blok na calej szerokosci, pod nim dwa mniejsze obok siebie. Element z klasa .is-duzy to ten dlugi. Mobile: jedna kolumna, kolejnosc taka jak w HTML. */ .bento { display: grid; gap: var(--s-4); grid-template-columns: 1fr; } @media (min-width: 760px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bento > .is-duzy { grid-column: 1 / -1; } } /* ── SIATKA 4 KOLUMNY ─────────────────────────────────────────────────── 4 elementy w jednym wierszu na desktopie, 2x2 na tabletach, 1x4 na mobile. Flex zamiast grid (na wyrazne zyczenie) - kazde dziecko ma jawny flex-basis liczony przez calc() z gap odjetym z procentu, wiec 4/2/1 w wierszu jest gwarantowane (nie zalezy od tresci ani od przegladania w minmax). Progi te same co .bento/.faq__uklad. */ .siatka-4 { display: flex; flex-wrap: wrap; gap: var(--s-8) var(--s-6); } .siatka-4 > * { flex: 1 1 100%; } @media (min-width: 640px) { .siatka-4 > * { flex: 1 1 calc(50% - var(--s-6) / 2); } } @media (min-width: 1040px) { .siatka-4 > * { flex: 1 1 calc(25% - var(--s-6) * 3 / 4); } } /* ── SIATKA 2 KOLUMNY ────────────────────────────────────────────────── Ta sama mechanika co .siatka-4, tylko bez progu 1040 px: kafle zostaja w ukladzie 2x2 takze na pelnym desktopie i schodza do jednej kolumny ponizej 640 px (decyzja klienta 2026-08-10 dla wartosci na o-nas.html). Osobna klasa, a nie modyfikator .siatka-4: obie siatki zyja rownolegle w serwisie (kroki Procesu na oferta.html nadal ida 4 w rzedzie), wiec roznica ma byc widoczna w znaczniku, nie ukryta w nadpisaniu sekcyjnym. */ .siatka-2 { display: flex; flex-wrap: wrap; gap: var(--s-8) var(--s-6); } .siatka-2 > * { flex: 1 1 100%; } @media (min-width: 640px) { .siatka-2 > * { flex: 1 1 calc(50% - var(--s-6) / 2); } } /* ── SIATKA MODULU W TLE ───────────────────────────────────────────── Cala strona jest zbudowana z proporcji kasety 2:1 i nigdzie tego nie widac. Ta siatka pokazuje konstrukcje wprost: komorka ma dokladnie proporcje modulu, a linie sa wloskiem w kolorze krawedzi. Maska wygasza siatke ku brzegom, wiec nie tworzy ramki wokol sekcji i nie konkuruje z trescia. Warstwa jest w tle i nie lapie kursora. */ .siatka { position: relative; isolation: isolate; } .siatka::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; /* komorka 96 x 48 px = 2:1, czyli kaseta polozona poziomo */ background-image: repeating-linear-gradient(to right, var(--c-border) 0 1px, transparent 1px 96px), repeating-linear-gradient(to bottom, var(--c-border) 0 1px, transparent 1px 48px); opacity: 0.4; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 0%, transparent 100%); mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 0%, transparent 100%); } /* ── TOR NEONU W TLE ───────────────────────────────────────────────── Nastepca wstegi (archiwum decyzji w PROGRESS.md, "Kierunek wizualny"). Zamiast jednego swiecacego pasma w tle pojedynczej sekcji - jeden dlugi SVG biegnie za trescia miedzy hero a finalnym CTA. Lekki, bo to tylko wektor w tle, nie animowany element DOM ani canvas. ZASIEG: `.tor` obejmuje WYLACZNIE sekcje srodkowe. Hero i czerwone CTA stoja poza nim (wymog klienta 2026-08-08: wstega nie moze dotykac ani jednego, ani drugiego). Nie wystarczylo zaslonic linii nieprzezroczystym tlem CTA, jak bylo wczesniej - zaslonieta linia nadal dobijala do krawedzi bloku i urywala sie na niej. Obie koncowki wychodza teraz przez BOK kadru, a nie przez gora/dol, i maja pusty pas przy obu krawedziach (geometria i liczby: komentarze w assets/neon-tor*.svg). Ten sam jezyk co wczesniejsza wstega - ostry rdzen + poswiata WOKOL niego, nigdy jedna rozmyta plama - tylko przeniesiony do SVG (patrz assets/neon-tor.svg), bo jedno pasmo CSS nie da sie rozciagnac wiarygodnie na wysokosc kilkunastu sekcji o plynnej wysokosci. Host potrzebuje position:relative + isolation:isolate (ten sam wzorzec co .siatka), inaczej z-index:-1 dziecka moze wyjsc poza .tor i schowac sie za tlem calej strony zamiast zostac za trescia sekcji. */ .tor { position: relative; isolation: isolate; } .tor::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; /* --tor-plik ustawia modyfikator podstrony (patrz nizej). Domyslna wartosc to tor strony glownej, zeby `.tor` samo w sobie nadal dzialalo tak jak dotad. */ background-image: var(--tor-plik, url('../assets/neon-tor.svg')); background-repeat: no-repeat; background-position: 50% 0%; /* rozciagniecie nierowne w poziomie (SVG idzie na cala szerokosc, na waskim ekranie sie sciska - swiadomie, tak jak hero ma dwa uklady zamiast jednego skalowanego). W pionie SVG jest CELOWO wyzszy niz box (112% zamiast 100%) - to zapas, po ktorym przesuwa sie background-position w parallaxie nizej. Gdyby ruszac tu transformem zamiast background-position, caly box (i jego tresc) wyjezdzalby poza .tor przy skrajnych wartosciach animacji i pokazywal sie NAD hero/stopka - overflow:hidden na .tor by to naprawil, ale .tor ma w sobie sekcje FAQ z position:sticky, ktora overflow inny niz visible na dowolnym przodku bezpowrotnie psuje. background-position nigdy nie wychodzi poza wlasny box, wiec ograniczenie jest darmowe i nie dotyka overflow w ogole. */ background-size: 100% 112%; /* Jasnosc wstegi. Kazda podstrona ma wlasna wartosc - patrz blok "przyciemnienie wsteg" nizej, gdzie stoi uzasadnienie liczb. */ opacity: var(--tor-jasnosc, 0.47); } /* delikatny parallax - tor przesuwa sie odrobine wolniej niz tresc. Wylacznie CSS (scroll-driven animation): brak scroll-listenera w JS, ten sam kierunek co reszta serwisu (patrz nav.js, obserwator zamiast scroll). Bez wsparcia przegladarki albo przy prefers-reduced-motion tor po prostu stoi w miejscu - to progresywne wzbogacenie, nie wymagane dzialanie. */ @supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { .tor::before { animation: tor-przesuniecie linear; animation-timeline: scroll(root); } } } @keyframes tor-przesuniecie { from { background-position: 50% 0%; } to { background-position: 50% 100%; } } /* ── tor na podstronach ───────────────────────────────────────────────── Kazda podstrona dostaje wlasny plik ze sciezka, nie wlasna regule - rozniaca sie jest tylko geometria i kolor, cala mechanika (rozciagniecie, parallax, warstwy) zostaje wspolna. Powod rozdzielenia: klient chcial, zeby wstega nie wygladala tak samo na trzech stronach z rzedu, a jeden plik przeskalowany na rozne wysokosci daje inne tempo zalaman, nie inny ksztalt (patrz komentarz o viewBox w neon-tor-o-nas.svg). */ /* PRZYCIEMNIENIE WSTEG PODSTRON (2026-08-10, zgloszenie klienta: "zbyt jasne"). Przyczyna jest w samych kolorach, nie w grubosci linii: neon strony glownej to czerwien marki (#E5352B), a niebieski #4C8AC6 i zwlaszcza zielony #8CD380 maja znacznie wyzsza jasnosc, wiec ta sama sciezka na tym samym graficie krzyczy na podstronach mocniej niz na index.html. Sciszamy KRYCIEM warstwy, a nie odcieniem w plikach SVG. Powody: 1. wartosci w SVG sa ZMIERZONE z obwodek na renderach hero (patrz tokens.css) - przemalowanie ich rozjechaloby wstege ze zdjeciem nad nia; 2. kolor stoi w dwoch miejscach naraz (token + plik SVG), wiec kazda zmiana odcienia to dwie edycje na podstrone i ryzyko, ze jedna zostanie zapomniana; 3. krycie gasi rdzen i poswiate w tej samej proporcji, czyli dokladnie to, o co chodzi przy "za jasne" - a regulacja to jedna liczba tutaj. Zielen jest jasniejsza od niebieskiego, wiec schodzi nizej. ── DRUGIE ZEJSCIE (2026-08-11) ──────────────────────────────────────── Wartosci 1 / 0,60 / 0,50 zostaly obnizone do 0,47 / 0,30 / 0,26. To ZMIANA WCZESNIEJSZEJ DECYZJI - w tokens.css stalo, ze krycie wsteg swiadomie zostaje bez zmian. Powod zmiany jest mierzalny, nie estetyczny: wstega przechodzi nie obok tekstu, tylko PRZEZ WIERSZE tekstu, i tam gdzie to robi, kontrast spada ponizej progu czytelnosci. Zmierzone POD GLIFAMI, nie w prostokacie akapitu (dwa zrzuty strony - normalny i z tekstem na `transparent` - roznica daje maske liter, tlo czytane wylacznie z pikseli nalezacych do maski). Ta roznica jest istotna: pomiar po calym prostokacie melduje skrawek wstegi w rogu akapitu, przez ktory nie przechodzi ani jedna litera, i kaze sciszac wstege bez powodu. Stan przed korekta i po niej (prog 4,5 dla tekstu ciaglego): index.html 3,39 -> 4,58 kafel "o firmie", proza przez szklo 3,50 -> ponad progiem odpowiedzi FAQ (mobile) oferta.html 3,68 -> ponad progiem opis wariantu w panelu konfiguratora o-nas.html 2,81 -> ponad progiem akapity prozy - byl najgorszy przypadek Zielen schodzi najnizej mimo najmniejszej liczby: ma najwyzsza jasnosc wlasna i jednoczesnie najgestszy tekst pod soba. Liczby sa DOBRANE POMIAREM, nie okragle - kazde zaokraglenie w gore zdejmowalo z progu ktorys z akapitow. Przy zmianie ktorejkolwiek powtorzyc pomiar, nie szacowac. DLACZEGO KRYCIE, A NIE MASKA POD KOLUMNA TEKSTU: maska wymagalaby, zeby `.tor::before` znal pozycje i szerokosc `.wrap--text` na kazdej szerokosci okna. To zaleznosc, ktorej w CSS nie da sie utrzymac bez serii poprawek przy kazdej zmianie ukladu. Jedna liczba na podstrone jest odwracalna i nie ma skutkow ubocznych. */ .tor--oferta { --tor-plik: url('../assets/neon-tor-oferta.svg'); --tor-jasnosc: 0.30; } .tor--onas { --tor-plik: url('../assets/neon-tor-o-nas.svg'); --tor-jasnosc: 0.26; } /* ── WSTEGA NIE WCHODZI W HERO (cofnieta proba, 2026-08-08) ───────────── Podstrony mialy przez jeden dzien wariant `.tor--hero`: wstega zaczynala sie od samej gory strony i przechodzila PRZEZ kadr hero (linia nad zdjeciem, pod naglowkiem, przez przestawienie z-index kadru i zaslony na -3/-2 w izolowanym kontekscie `.tor`). Mialo to wypelnic pole po zdjetym podpisie i przyciskach. Klient odrzucil to po obejrzeniu: linia przecinala zdjecie i kadr sie przez nia brudzil. Kadr hero jest gotowym obrazem, nie tlem do zapisania. Na wszystkich trzech podstronach hero stoi teraz POZA `.tor`, dokladnie jak na index.html - wstega zaczyna sie pod nim. Razem z wariantem odpadla maska wygaszajaca wstege na wysokosci hero ponizej 940 px (tam naglowek schodzi na srodek kolumny, czyli wprost na linie). Nie jest juz potrzebna - hero nie jest w `.tor`, wiec nie ma czego wygaszac. NIE przywracac tego bloku bez zmiany decyzji klienta. */ /* ── POMOCNICZE ─────────────────────────────────────────────────────── `.full-bleed`, `.stack`, `.stack--lg`, `.row--center` skasowane 2026-08-14 (martwy kod - zero uzyc w HTML; wyjscia na pelna szerokosc sa dzis pisane wprost przy kazdej sekcji, patrz np. .hero__foto, .haslo__kadr, .wideo ponizej 940 px). */ .row { display: flex; flex-wrap: wrap; gap: var(--s-3); } /* jedyna klasa użytkowa od wyrównania w całym arkuszu - używana w send.php::strona() */ .tekst-srodek { text-align: center; }