/* ========================================================================== nis2-strona-glowna.css - warstwa wizualna strony głównej (`index.html`) Do 03.08.2026 plik nazywał się `landing-v5.css` (a wyrósł z `landing-v4.css`); nazwa opisuje teraz rolę, wersje żyją w gicie i w `_archiwum/`. Treść: scalenie `landing-v2-do-wyslania.html` i `landing-czysty.html`. Warstwa wizualna: przeniesiona z `landing-czysty.html`, bo to ona jest bliższa kanonowi elev8 i temu, co opisała Teresa 27.07.2026. Zasady, z których ta strona wyrasta: 1. Trzy tła: biel, cichy wariant #FAF9F7 i granat. Zero cieni. Granat wchodzi trzy razy (28.07.2026), bo strona jasna od góry do dołu czytała się jak jeden ciąg bez kręgosłupa. Zaokrąglenia weszły 28.07.2026 na prośbę Teresy, wbrew kanonowi, i siedzą w jednym tokenie `--promien`. 2. Każda sekcja ma inny rytm. Podział lewo/prawo tylko tam, gdzie treść jest długa i potrzebuje kotwicy. Nigdzie indziej. 3. Jeden kolor akcentu plus przełamanie na terminy i liczby. Grafit robi całą resztę roboty. 4. Powietrze zamiast ramek. Granice to włos 1px. 5. Sekcje nie są numerowane. 6. Rozmiar tekstu bierze się wyłącznie ze skali niżej. Żadnych wartości wprost w regule, żadnych połówek piksela (decyzja 28.07.2026: strona miała 32 różne rozmiary, w tym sześć nieodróżnialnych rozmiarów nagłówka sekcji). Paleta jedzie z dwóch zmiennych podmienianych atrybutem `data-akcent` na , więc zmiana wariantu to jedno słowo w HTML. ========================================================================== */ /* --- wartosci: patrz assets/css/nis2-marka.css ----------------------------- Do 09.08.2026 stal tutaj wlasny `:root` z 26 tokenami o wartosciach co do znaku identycznych z tymi w nis2-marka.css, plus oba warianty `data-akcent`. Ten arkusz laduje sie po marce, wiec kazdy z tych tokenow ja nadpisywal. Marka byla wiec zrodlem prawdy tylko z nazwy: zmiana wartosci w niej nie robila na tej stronie nic, a przestawienie czegokolwiek wymagalo poprawki w dwoch plikach naraz. Wartosci przeniesione bez zmiany. Doszly tam takze `--t-liczba`, `--t-liczba-xl`, `--akcent-baza` i `--przelamanie-baza`, ktore stały wylacznie tutaj, wiec podstrony nie mialy do nich dostepu. Ten plik od tego dnia MALUJE strone glowna i nie deklaruje zadnej wartosci marki. Nowy token zaklada sie w nis2-marka.css, nie tutaj. -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--tlo); color: var(--atrament); font: 400 var(--t-tekst)/1.65 Outfit, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-feature-settings: "kern", "liga"; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.024em; line-height: 1.16; } p { margin: 0; } a { color: inherit; } img, svg { max-width: 100%; display: block; } ul, ol, dl, dd { margin: 0; padding: 0; } ul, ol { list-style: none; } :focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; } .miara { max-width: var(--miara); margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); } .omin { position: absolute; left: -9999px; } .omin:focus { position: fixed; left: 16px; top: 16px; z-index: 99; background: var(--atrament); color: #fff; padding: 12px 20px; } /* Etykieta wraca 12 razy przez cala strone, wiec to ona niesie przelamanie. Byla burgundowa i to przez nia czerwien czytala sie jako kolor wiodacy; burgund zostaje przy przyciskach. Odcien ciemniejszy z pary turkusowej, bo tekst jest maly i wersalikowy: #087F78 daje na bieli 4.86, a ten 5.47. */ .brew { font-size: var(--t-etyk); font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--wynik-ciemny); } /* --- pasek górny --------------------------------------------------------- */ .postep { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--akcent); z-index: 60; } .gora { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .93); backdrop-filter: blur(10px); border-bottom: 1px solid var(--wlos); } .gora .miara { position: relative; display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); min-height: 71px; } .gora .dzialanie--maly { flex: none; } /* Waga 500 i tracking .55em (09.08.2026, Dominik: "popraw to tak by to bylo podobne jak logo, by to szlo ciagiem"). Znak stoi w parze z sygnatura "BY elev8" i ma z nia trzymac jeden rytm. Przy wadze 600 i trackingu .1em para czytala sie jak dwa napisy z dwoch roznych systemow: jeden gesty i ciezki, drugi lekki i rozstrzelony. Tracking nie jest dobrany na oko. W `elev8-logo-navy.svg` odstepy miedzy literami wynosza 1198, 1160, 1198 i 1296 jednostek przy wersaliku 694, wiec kazda litera zajmuje 1.748 wysokosci wersalika. Przy 14 px wersalik ma okolo 10 px, czyli docelowy advance to 17.5 px. Zmierzone na zywym znaku: .5em daje 16.9 px, .55em trafia w 17.5. Stad ta wartosc, a nie okragle .5. Waga schodzi po stronie znaku, bo logo jest plikiem marki i jego kroju nie ruszamy. */ .znak { text-decoration: none; font-weight: 500; font-size: var(--t-nota); letter-spacing: .55em; text-transform: uppercase; /* Tracking dokleja odstep takze za ostatnia litera. Bez tego znak konczy sie 8 px pustki i odstep do sygnatury czyta sie jak dziura. */ margin-right: -.55em; white-space: nowrap; flex: none; /* Cel dotykowy min. 24 px: sam tekst ma 17 px wysokości. */ display: inline-flex; align-items: center; min-height: 26px; } /* Sygnatura marki-matki obok znaku sekcji (09.08.2026, prosba Dominika). Logo bierze `elev8-logo-navy.svg` z kanonu marki, a nie png ze stopki: plik ma fill #17233D, czyli dokladnie `--atrament` tej strony, wiec to ten sam kolor marki, nie odcien dobrany na oko. SVG zamiast png takze dlatego, ze w pasku o wysokosci 70 px logo stoi na 15 px i rastr sie tam sypie. Slowo "by" jest o stopien nizej i w kolorze szeptu: to spojka miedzy dwiema nazwami, nie trzecia nazwa. Gdyby wzielo wage i kolor `.znak`, w pasku staloby obok siebie troje rownorzednego tekstu. Kreska pionowa zdjeta 09.08.2026 ("by to szlo ciagiem"). Stala tu, gdy znak mial tracking .1em i byl gestym blokiem, od ktorego sygnature trzeba bylo czyms odciac. Odkad znak ma rytm logo, kreska tnie jeden ciag na dwie polowy i robi dokladnie to, czego ma nie byc. Rozdziela teraz sam odstep. */ /* Sygnatura stoi POD znakiem, nie obok (09.08.2026, Dominik: "to BY (logo) moglo by byc pod NIS2"). Pion rozwiazuje przy okazji konflikt o szerokosc paska: dwa napisy w jednej linii mialy razem 261 px i wypychaly przycisk. */ .znak-blok { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex: none; } .znak-by { display: inline-flex; align-items: center; gap: 6px; flex: none; text-decoration: none; /* Cel dotykowy min. 24 px (WCAG 2.5.8): sama para "by" plus logo ma 18 px. Zgubione przy przejsciu na uklad pionowy, zlapane przez kontrola.js. */ min-height: 24px; } .znak-by__slowo { font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--szept); } /* Logo na 12 px: tyle trzeba, zeby jego litery mialy dokladnie ta sama wysokosc co litery znaku nad nim (09.08.2026, "nie wyglada to tak samo"). Rachunek: w pliku wersalik ma 694 jednostek przy wysokosci obrazka 832, czyli zajmuje 83.4% kadru — reszta to swiatlo nad znakiem "R" i pod linia pisma. Znak na 14 px ma wersalik okolo 10.1 px, wiec obrazek musi miec 10.1 / 0.834 = 12.1 px. Przy wczesniejszych 11 px litery logo mialy 9.2 px przy 10.1 px znaku i para czytala sie jak dwa rozne stopnie pisma. Wczesniej logo bylo scisniete do 11 px, zeby sygnatura nie byla szersza od znaku stojacego OBOK. Odkad stoi pod spodem, ten powod znika: w pionie szerokosci nie konkuruja. */ .znak-by img { height: 12px; width: auto; display: block; } /* Sygnatura znika w pasmie, w ktorym pasek jest najciasniejszy: od 921 px nawigacja stoi pozioma i razem z "Umow rozmowe" zajmuje caly pasek. Zmierzone: na 1024 px sygnatura wypychala przycisk poza kadr i dawala 76 px przewijania w poziomie, ktorego bez niej nie ma wcale. Ponizej 921 px nawigacja chowa sie do menu i miejsce wraca, wiec sygnatura tez wraca. */ @media (min-width: 921px) and (max-width: 1160px) { .znak-by { display: none; } /* Razem z sygnatura schodzi tracking znaku. Tracking .55em istnieje po to, zeby znak trzymal rytm z logo elev8 — a w tym pasmie logo nie ma, wiec rytm nie ma z czym wspolgrac. Zmierzone: przy .55em znak ma 160 px i na 960 px wypycha "Umow rozmowe" poza pasek, dajac 19 px przewijania. Przy .2em ma 106 px, co starcza na 960, ale na samym progu 921 px wciaz zostawia 1 px przewijania. Znak wraca wiec do pierwotnego .1em i 91 px: w pasmie bez logo nie ma czego dopasowywac, a wartosc posrednia trzeba by bylo pilnowac przy kazdej zmianie w pasku. */ .znak { letter-spacing: .1em; margin-right: -.1em; } } .nawi { display: flex; gap: clamp(14px, 1.7vw, 24px); margin-left: auto; font-size: var(--t-nota); white-space: nowrap; } .nawi a { text-decoration: none; color: var(--atrament-2); padding-block: 6px; border-bottom: 1px solid transparent; transition: .15s; } .nawi a:hover { color: var(--atrament); border-bottom-color: var(--akcent); } /* Menu mobilne: ten sam