/* ========================================================================= 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 ========================================================================= */ @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; } /* ========================================================================= 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; /* --- 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 */ }