/* ========================================================================= ZMIENNE GLEBI - REJESTRACJA TYPU Bez @property przegladarka nie wie, ze te wartosci sa LICZBAMI. Chrome podstawia je i liczy calc() po podstawieniu, wiec dziala; Safari waliduje wyrazenie wczesniej i mnozenie dwoch nieznanych wartosci odrzuca w calosci - przez co transform nie byl stosowany, mimo ze wartosci byly poprawne. Rejestracja typu naprawia to u zrodla i przy okazji daje wartosci poczatkowe, wiec calc() ma sens takze zanim skrypt cokolwiek zapisze. --gx / --gy polozenie wskaznika wzgledem srodka okna (ozdobniki, hero) --mx / --my polozenie wskaznika wzgledem srodka stopki (pole w stopce) --z / --zh wspolczynnik glebi warstwy --wzmocnienie mnoznik amplitudy, domyslnie 1 - patrz nizej AMPLITUDY SA PODANE W JEDNOSTKACH RYSUNKU, a rysunek skaluje sie razem z oknem. Na biurku viewBox 1920 lezy w oknie okolo 1920 px, wiec jednostka to piksel i zasieg 22,7 znaczy 22,7 px. Na telefonie ten sam rysunek ma 310 px szerokosci, wiec ta sama liczba znaczy 2,4 px - ruch przestaje byc widoczny, chociaz w CSS nic sie nie zmienilo. Do tego przewijanie daje tylko os pionowa, a to na niej lezy mniejsza z dwoch amplitud. --wzmocnienie odwraca oba te efekty. Nie ma go w CSS jako liczby, bo zalezy od szerokosci okna i od tego, ktory kadr rysunku jest zalozony; wylicza je sterownik dotykowy w general.js, ktory jako jedyny zna zmierzona skale kazdego rysunku. Na wskazniku zmienna nie jest w ogole zapisywana, wiec podstawia sie 1 i biurko zachowuje sie identycznie co do piksela. ========================================================================= */ @property --gx { syntax: ""; inherits: true; initial-value: 0; } @property --gy { syntax: ""; inherits: true; initial-value: 0; } @property --mx { syntax: ""; inherits: true; initial-value: 0; } @property --my { syntax: ""; inherits: true; initial-value: 0; } @property --z { syntax: ""; inherits: false; initial-value: 1; } @property --zh { syntax: ""; inherits: false; initial-value: 1; } @property --wzmocnienie { syntax: ""; inherits: true; initial-value: 1; } /* ========================================================================= FANB 2026 - TOKENY SYSTEMU Jedno miejsce, w ktorym widac caly system wartosci. Arkusz jest wczytywany przed general.css i elements.css, wiec kazda wartosc ponizej jest dostepna w calym motywie. Zrodlem prawdy dla znaczenia tych wartosci jest DESIGN.md w katalogu glownym instalacji. Ten plik jest jego odpowiednikiem w kodzie - zmiana tutaj musi isc w parze ze zmiana tam. Nazwy sa semantyczne, nie opisowe: --kolor-akcent, a nie --cyjan. Dzieki temu zmiana odcienia nie wymaga zmiany nazwy w pieciu plikach. ========================================================================= */ :root { /* --- TOZSAMOSC ------------------------------------------------------ Gradient markowy byl wypisywany w calosci w dziesieciu miejscach i wlasnie dlatego zdazyl juz zdryfowac na warianty 45deg i 0deg z inna para kolorow. Teraz istnieje jako jeden token. */ --marka-zielen: rgba(0, 235, 150, 1); /* Spring Green - poczatek gradientu */ --marka-blekit: rgba(0, 190, 245, 1); /* Sky Blue - koniec gradientu */ --marka-gradient: linear-gradient(135deg, var(--marka-zielen) 0%, var(--marka-blekit) 100%); /* Wariant dla elementow jednowymiarowych: na linii o wysokosci 1px kat 135deg degeneruje sie do niewidocznego. Ta sama para kolorow. */ --marka-gradient-os: linear-gradient(90deg, var(--marka-zielen) 0%, var(--marka-blekit) 100%); --kolor-akcent: #00EAFF; /* Electric Cyan - wylacznie reakcja na hover. Ma na bieli 1,48:1, wiec NIGDY nie moze byc wskaznikiem fokusu, bledu ani zaznaczenia. */ /* --- PALETA POLA PIKSELI --------------------------------------------- Kwadraty rozsypane w tle to motyw powtarzajacy sie w pieciu miejscach na stronie. W stopce nie sa juz bitmapa, tylko ksztaltami SVG, wiec po raz pierwszy moga brac barwy stad, a nie z zapieczonego pliku. Wartosci sa odczytane z pola pikseli w hero - jedynego miejsca, gdzie ten motyw byl od poczatku swietlisty. Pomiar: kwadraty hero maja jasnosc 0,93 przy nasyceniu 0,45, kwadraty stopki mialy 0,43 przy 0,74, czyli byly ciemniejsze i przesycone. Paleta biegnie po tej samej osi, co gradient markowy: zolta zielen -> zielen -> turkus -> blekit. */ --piksel-1: #7BE04F; /* zolta zielen - odcien 108st */ --piksel-2: #00EB96; /* = --marka-zielen, odcien 158st */ --piksel-3: #2BDCA8; /* turkus - odcien 163st */ --piksel-4: #00D2D2; /* morski - odcien 180st */ --piksel-5: #00BEF5; /* = --marka-blekit, odcien 194st */ --piksel-6: #0090C8; /* glebszy blekit - odcien 197st */ --piksel-7: #0070A8; /* najglebszy blekit - odcien 200st */ --piksel-8: #E6F4F4; /* blada biel - w hero pelni role iskry */ /* --- PODLOZA I TEKST ------------------------------------------------ */ --kolor-granat: #041326; /* Deep Navy - naglowki i ciemne sekcje. Podstawa systemu. */ --kolor-tekst: #383838; /* Graphite - tekst ciagly, swiadomie lzejszy od naglowkow */ --kolor-wlos: #D9DADA; /* Silver - wlosowe linie i nieaktywny pierscien licznika */ --kolor-mgla: #EBECEC; /* Mist - tlo sekcji przelamujacych biel */ --kolor-papier: #FFFFFF; /* --- STANY ---------------------------------------------------------- */ --kolor-blad: #D13B00; /* 4,84:1 na bieli. Wartosc zmieniona z #ff5600, ktory mial 3,19:1 przy wymaganych 4,5:1. Kolorowi zawsze towarzyszy zmiana grubosci krawedzi - sam odcien nigdy nie niesie bledu. */ --kolor-fokus: var(--kolor-granat); /* 18,65:1 na bieli */ /* --- NAKLADKI ------------------------------------------------------- Nie sa kolorami marki, tylko narzedziem czytelnosci tekstu na zdjeciu. */ --nakladka-tusz: rgba(0, 0, 0, 0.8); --nakladka-las: rgba(2, 75, 33, 0.75); --nakladka-welon: rgba(0, 0, 0, 0.75); --nakladka-podpis: linear-gradient(0deg, var(--nakladka-tusz) 0%, var(--nakladka-las) 50%, rgba(0, 234, 255, 0) 100%); /* --- RUCH ------------------------------------------------------------ Czasy niosa znaczenie, nie sa dowolne: odpowiedz jest krotsza niz zmiana stanu, a ta krotsza niz sekwencja. */ --ruch-odpowiedz: 0.12s; /* potwierdzenie dotkniecia - :active */ --ruch-stan: 0.25s; /* zmiana koloru, krycia, pozycji */ --ruch-dok: 0.3s; /* wjazd paska nawigacji */ --ruch-wypelnienie: 0.5s; /* wypelnienie przycisku, odsloniecie biogramu */ --ruch-krzywa: cubic-bezier(0.16, 1, 0.3, 1); /* pewne przybycie - stany */ --ruch-krzywa-przejazd: cubic-bezier(0.35, 0.15, 0.55, 0.9); /* rownomierny przejazd - sekwencje. Krzywa "pewnego przybycia" przerzuca ruch na koniec w pierwszej cwiartce czasu, wiec dla przejazdow sie nie nadaje. */ /* --- SZEROKOSCI TRESCI ----------------------------------------------- Pomiar z 2026-08-12 wykazal, ze schodzac strona glowna w dol przy oknie 2560px czytelnik przechodzi przez szesc roznych szerokosci tresci: 2460 / 590 / 2060 / 1100 / 1700 / 2560. Czesc byla zamierzona, czesc powstala przypadkiem - z dwoch osobnych sufitow nalozonych tego samego dnia, kazdy wlasna logika. Sa TRZY STOPNIE i kazda sekcja nalezy do jednego z nich: 1. RAMA - kolumna .wrap, czyli szerokosc okna minus margines wewnetrzny (250px na desktopie, progowo do 20px). Nie ma tu tokenu, bo to nie jest liczba stala, tylko odjecie ramy. Wartosc domyslna dla naglowkow sekcji i dla tresci, ktora nie rosnie w nieskonczonosc. 2. SIATKA - sufit dla tresci, ktora inaczej rosnie razem z oknem: siatki kart i mozaiki. Bez niego przy 2560px baner aktualnosci mial 1367x663, a karta prelegenta 861x861. Wartosc dobrana tak, zeby modul obu siatek wypadl w tym samym rzedzie wielkosci - kwadrat aktualnosci ma przy niej 543px, karta prelegenta 534px. 3. CZYTANIE - miara dla tekstu ciaglego i towarzyszacego mu zdjecia. To dawne .iwrap. Poza skala stoja dwa swiadome wyjatki: hero i mapa lokalizacji wykrwawiaja sie na pelna szerokosc okna. Licznik ma wlasne 590px, ale to szerokosc KOMPONENTU, nie stopien ukladu - tak samo jak przycisk. Zrodlem prawdy dla znaczenia tych wartosci jest DESIGN.md, sekcja "The Three Measures Rule". */ --tresc-siatka: 1700px; --tresc-czytanie: 1100px; /* --- KSZTALT --------------------------------------------------------- Promien 0 jest wartoscia domyslna calego systemu. Token istnieje po to, zeby bylo widac, ze to decyzja, a nie przeoczenie. */ --promien: 0; /* --- ZABARWIENIE FOTOGRAFII W NAGLOWKACH ----------------------------- Naglowki podstron maja jeden, wspolny odcien. Do 2026-08-12 byl on WYPALONY W PLIKACH: kazde zdjecie przychodzilo juz zalane niebieskim, wiec podmiana kadru wymagala powtorzenia obrobki graficznej, a samego odcienia nie dalo sie skorygowac bez ruszania plikow. Teraz zabarwienie jest warstwa CSS nad czysta fotografia. Zdjecie w bibliotece zostaje naturalne, a caly serwis stroi sie trzema wartosciami ponizej. Podmiana naglowka to samo wgranie zdjecia. Wartosci odtwarzaja pomiar poprzednich naglowkow: odcien 210 stopni, nasycenie 70%, jasnosc 28%. Kolor zabarwienia ma odcien 208 stopni i nasycenie 71% - praktycznie tyle, co --kolor-granat (213 stopni). Tryb mieszania "color" bierze z niego barwe, a jasnosc zostawia fotografii, dzieki czemu kadr nie robi sie plaski. --foto-moc 0 = zdjecie bez zmian, 1 = pelna monochromia. Steruje wylacznie barwa, nie sila wrazenia. --foto-splaszczenie rowna zaslona w kolorze zabarwienia. To ONA decyduje, jak "mocny" jest filtr: sciaga tony do siebie, czyli robi dokladnie to, co dawny wypalony zalew, ktory splaszczal kadr. 0 = pelna glebia fotografii, 0,35 = plaska niebieska plyta jak w poprzedniej wersji. --foto-przyciemnienie rowne przyciemnienie calego kadru, czyli regulator jasnosci. Obowiazuje juz od 112 px w dol, wiec dziala w calym WIDOCZNYM pasie naglowka (okolo 181 px - nizej zaslania go biala karta tresci). Poprzednik tego tokena, --foto-cien, zaczynal dopiero od 261 px, czyli pod karta. Jego zmiana nie dawala zadnego efektu na ekranie i dlatego zostal usuniety - martwe pokretlo jest gorsze niz brak pokretla. --foto-grunt przyciemnienie przy samej gornej krawedzi, pod biala nawigacja. Nie schodzic ponizej 0,65 - patrz pomiar kontrastu przy #page-header > div::after w elements.css. Wartosci skalibrowane 2026-08-12 przemiataniem po osmiu podstronach. Mierzyc trzeba SAM PAS FOTOGRAFII nad biala karta: #page-header ma margin-bottom: -50vh, wiec karta nachodzi na zdjecie, a zrzut calego elementu zawyza jasnosc o kilkanascie punktow i zanizal nasycenie. */ /* Kolor trzymamy w kanalach, bo warstwy tla nie maja wlasnego krycia - alfa musi siedziec w samym kolorze. Z jednego zrodla wyprowadzamy oba zastosowania, wiec zmiana barwy przestawia je naraz. 42 95 143 = #2A5F8F, odcien 208 stopni, nasycenie 71%. color-mix() sie tu nie nadaje: calc() w pozycji procentowej nie przechodzi, a bledna wartosc uniewaznia CALE background-image, przez co znika takze grunt pod nawigacja. Sprawdzone. */ --foto-kanaly: 42 95 143; --foto-zabarwienie: rgb(var(--foto-kanaly)); --foto-zaslona: rgb(var(--foto-kanaly) / var(--foto-splaszczenie)); /* Kolor warstwy przyciemniajacej. Wbrew intuicji to WLASNIE ON decyduje o zmierzonym nasyceniu calego kadru, a nie --foto-kanaly: przy kryciu 0,71 przykrywa fotografie na tyle, ze to jego barwa dominuje w wyniku. Sprawdzone - zmiana --foto-kanaly ani --foto-moc nie ruszala nasycenia ani o punkt, zmiana tego tokena przesuwa je o kilkanascie. 4 19 38 to --kolor-granat, nasycenie 89%. Obnizanie nasycenia tej wartosci obniza nasycenie kadru i jednoczesnie lekko go rozjasnia. */ --foto-przyciemnienie-kanaly: 4 19 38; --foto-moc: 1; --foto-splaszczenie: 0.35; --foto-przyciemnienie: 0.71; --foto-grunt: 0.80; /* --- GRUBOSC KRESKI -------------------------------------------------- Pomiar z 2026-08-11 wykazal na stronie 13 roznych grubosci obwodek (1,5 / 1,7 / 2 / 2,3 / 2,8 / 3 / 3,2 / 3,4 / 3,8 / 4,2 / 4,4 / 6,4 / 8 px), a na telefonie jedna wypadala na 0 px, czyli znikala. Przyczyna byla podwojna: grubosc liczona proporcjonalnie do wielkosci ksztaltu, dwoma roznymi wzorami w dwoch miejscach, oraz skalowanie obwodki razem z SVG. Teraz sa cztery stopnie i kazda obwodka na stronie nalezy do jednego z nich. Wartosci sa w pikselach CSS, nie w jednostkach rysunku: ksztalty SVG uzywaja vector-effect: non-scaling-stroke, wiec kreska ma te sama grubosc niezaleznie od tego, jak przeskalowany jest rysunek. To jedyny sposob, zeby kreska w stopce i kreska w przycisku znaczyly to samo. */ --kreska-wlos: 1.5px; /* drobne kwadraty dekoracyjne */ --kreska: 2px; /* wartosc domyslna systemu */ --kreska-gruba: 3px; /* podkreslenie: ramka gradientowa przyciskow, wskaznik fokusu */ --kreska-rama: 6px; /* GRUBA KRESKA GRADIENTOWA jako element graficzny, a nie obrys kontrolki: aktywny luk licznika i ramki ozdobne. Te dwa elementy sa tym samym rodzajem obiektu i musza miec te sama wage. Uwaga: luk licznika nie jest krawedzia ani obrysem - rysuje sie dopelnieniem z maska, przez co audyt grubosci go NIE wykrywal i przez chwile stronŠ° miala niezauwazona czwarta grubosc. Ponizej 568px oba schodza do 4px. */ --cel-dotyku: 44px; /* WCAG 2.5.8 - realizowane nakladka ::after */ }