@charset "UTF-8"; /* * ========================================================================== * 3DMENU - WITRYNA OFERTOWA (start / oferta / wdrozenie / kontakt) * ========================================================================== * SPIS TRESCI: * 1. Zmienne i system projektowy * 2. Reset i podstawy * 3. Uklad: tlo strony, pasma, kontener, dostepnosc * 4. Preloader * 5. Animacje * 6. Przyciski i pigulki * 7. Naglowek i nawigacja * 8. Naglowek podstrony * 9. Robot dekoracyjny * 10. Hero - kolumna tekstowa * 11. Hero - scena dania (karuzela, panel demo, podglad 3D) * 12. FAQ * 13. Tabele * 14. Cennik * 15. Wdrozenie - kroki * 16. Kontakt - dane i formularz * 17. Dokument prawny * 18. Stopka * 19. Sekcje tresci * 20. Okno modalne * 20a. Skala 1:1 - nagranie z telefonu (sekcja .proof) * 21. Kalkulator wyceny * 22. Zapytania medialne * 23. Strona bledu 404 * * ZASADA - stan faktyczny na 2026-09-09, po audycie: * kolory - zero wartosci na sztywno ponizej sekcji 1. Wszystkie krycia * ida przez triplety --rgb-*. Trzymac tak dalej. * cienie - zero na sztywno, komplet w --shadow-* i --glow-*. * odstepy - w wiekszosci przez --sp-*, ale nie w komplecie. * typografia - NIE JEST doprowadzona: 17 surowych `font-size` i 37 surowych * `line-height` w 13 roznych wartosciach, bez ani jednego * tokena --lh-*. To jest znany dlug, nie stan docelowy. * Nie dokladac kolejnych - przy nowej sekcji siegac po --fs-*. * Progi w @media sa wyjatkiem trwalym: CSS nie pozwala uzyc tam custom * properties, wiec ich wartosci sa udokumentowane przy --bp-* i musza byc * trzymane w parze. * * KOLORY: projekt z Claude Design opisywal je w oklch(). Tutaj stoja jako sRGB, * bo oklch() odpada na starszych WebView na Androidzie, a strona ma dzialac * takze tam. Przy kazdej zmiennej jest zrodlowa wartosc oklch z projektu, * zeby dalo sie wrocic do oryginalu bez zgadywania. * ========================================================================== */ /* ========================================================================== 1. ZMIENNE I SYSTEM PROJEKTOWY ========================================================================== */ :root { /* --- Skladowe RGB ---------------------------------------------------- Trzy kolory wystepuja w projekcie kilkanascie razy z roznym kryciem. Trzymane jako triplet, zeby polprzezroczyste warianty nizej powstawaly z JEDNEJ definicji zamiast kilkunastu recznie wpisanych rgba(). */ --rgb-accent: 46, 230, 168; /* #2EE6A8 - zielen marki, wariant jasny */ --rgb-accent-deep: 22, 193, 137; /* oklch(72% .152 163) - zielen bazowa */ --rgb-text: 234, 245, 238; /* #EAF5EE - biel tekstu */ --rgb-line: 244, 250, 245; /* oklch(98% .01 150) - biel krawedzi */ /* Tla wystepuja i jako pelny kolor, i jako polprzezroczysta warstwa nad zdjeciem - dlatego one takze zaczynaja sie od tripletu. */ --rgb-bg: 6, 31, 18; /* oklch(21.5% .04 158) - tlo strony */ --rgb-bg-deep: 2, 18, 9; /* oklch(16.5% .032 158) - stopka, pas FAQ */ --rgb-bg-footer: 2, 19, 9; /* stopka - o wlos jasniej niz pasmo */ --rgb-bg-card: 3, 17, 8; /* oklch(16% .03 158) - dno kart */ --rgb-bg-input: 1, 12, 5; /* oklch(14% .028 158) - pola formularza */ --rgb-error: 248, 113, 113; /* oklch(70% .18 25) - komunikat bledu */ --rgb-gold: 255, 196, 46; /* #FFC42E - punktory, ptaszki, bledy pol */ --rgb-bg-pill: 10, 40, 26; /* oklch(25% .045 160) - pigulka pakietu */ --rgb-bg-plan: 8, 29, 18; /* dno karty cennika */ --rgb-btn-hero: 21, 87, 57; /* wypelnienie dwoch przyciskow hero */ /* --- Tla -------------------------------------------------------------- */ --c-bg: rgb(var(--rgb-bg)); --c-bg-deep: rgb(var(--rgb-bg-deep)); --c-bg-footer: rgb(var(--rgb-bg-footer)); /* --- Marka ------------------------------------------------------------ */ --c-accent: #16C189; /* oklch(72% .152 163) - zielen bazowa */ --c-accent-vivid: #2EE6A8; /* akcenty, aktywna pozycja menu */ --c-accent-soft: #3EE6A8; /* linki, obwodki */ --c-accent-lit: #9FF2D2; /* hover na przyciskach obrysowanych */ --c-accent-mint: #4FD694; /* poczatek gradientu w naglowku hero */ --c-accent-lime: #B9E784; /* koniec gradientu, wiersz drugi */ --c-accent-olive: #D3E378; /* poczatek gradientu, wiersz trzeci */ --c-gold: rgb(var(--rgb-gold)); /* punktory, "ptaszki", bledy pol */ --c-on-accent: #07231A; /* tekst na pelnym zielonym tle */ /* --- Tekst ------------------------------------------------------------ */ --c-text: #F4F6F0; /* oklch(97% .008 120) */ --c-text-strong: #EAF5EE; --c-text-nav: #A2B8A6; /* oklch(76% .035 150) */ --c-text-88: rgba(var(--rgb-text), 0.88); --c-text-85: rgba(var(--rgb-text), 0.85); --c-text-80: rgba(var(--rgb-text), 0.80); --c-text-78: rgba(var(--rgb-text), 0.78); --c-text-72: rgba(var(--rgb-text), 0.72); --c-text-70: rgba(var(--rgb-text), 0.70); --c-text-60: rgba(var(--rgb-text), 0.60); --c-text-50: rgba(var(--rgb-text), 0.50); --c-text-55: rgba(var(--rgb-text), 0.55); /* UWAGA: liczba w nazwie jest HISTORYCZNA. Krycie podniesione 2026-09-09 z 0,45 na 0,52, bo 0,45 dawalo kontrast 4,09:1 na tle strony, czyli ponizej progu 4,5:1 wymaganego przez WCAG AA dla malego tekstu - a tym tokenem pisana jest miedzy innymi klauzula o przetwarzaniu danych przy przycisku wysylki formularza. Po zmianie: 5,02:1 na --c-bg i 5,19:1 na --c-bg-deep. Roznica optyczna wobec 0,45 jest minimalna. */ --c-text-45: rgba(var(--rgb-text), 0.52); /* Galka przelacznika w stanie wylaczonym. Wydzielona z --c-text-45 przy tamtej zmianie: to element graficzny, nie tekst, wiec proga kontrastu dla tekstu nie dotyczy, a jego jasnosc byla dobrana okiem. */ --c-switch-knob: rgba(var(--rgb-text), 0.45); --c-text-arrow: #CFEEDE; /* strzalki panelu demo */ --c-text-error: rgb(252, 165, 165); --c-text-35: rgba(var(--rgb-text), 0.35); /* --- Krawedzie -------------------------------------------------------- */ --c-border: rgba(var(--rgb-line), 0.12); --c-border-faint: rgba(var(--rgb-line), 0.08); /* kreska nad paskiem stopki */ --c-overlay: rgba(var(--rgb-bg-deep), 0.82); /* zaslona okna modalnego */ --c-border-soft: rgba(var(--rgb-line), 0.10); /* Kreski po bokach nadkreslen ("AR W PRAKTYCE", "FAQ", "OFERTA"...). WLASNY token, nie --c-border-soft: tamten niesie takze obrysy kart, pol formularza i kresek FAQ, wiec rozjasnienie samych nadkreslen przez niego pociagnelo by kilkanascie niepowiazanych rzeczy. 0,14 zamiast 0,10 - wlasciciel rozjasnil je u siebie i zatwierdzil, ta sama wartosc, co kreski miedzy pytaniami FAQ na telefonie. */ --c-eyebrow-line: rgba(var(--rgb-line), 0.14); --c-border-thin: rgba(var(--rgb-line), 0.14); --c-border-mid: rgba(var(--rgb-line), 0.18); --c-border-strong: rgba(var(--rgb-line), 0.20); /* 0.30 bylo za slabe tam, gdzie za karta swieci poswiata strony: zmierzone na ofercie przy 549 px, kontrast gornej krawedzi do tla spadal z +42 po lewej do +24 po prawej, czyli w najjasniejszym miejscu krawedz praktycznie znikala. */ --c-border-accent: rgba(var(--rgb-accent), 0.42); --c-border-accent-soft: rgba(var(--rgb-accent-deep), 0.32); --c-border-accent-dim: rgba(var(--rgb-accent-deep), 0.20); --c-border-error: rgba(var(--rgb-error), 0.45); --c-border-accent-lit: rgba(var(--rgb-accent-deep), 0.60); --c-border-ghost: rgba(62, 230, 168, 0.40); /* Obrys DWOCH przyciskow hero, mocniejszy od reszty przyciskow obrysowanych (0,55 zamiast 0,40). Tylko one stoja na zdjeciu, a nie na spokojnym tle sekcji - tam wspolne 0,40 gubi sie w kadrze. Reszta zostaje bez zmian, zeby nie zmieniac wygladu przyciskow na podstronach. */ --c-border-btn-hero: rgba(62, 230, 168, 0.55); --c-border-popular: rgba(62, 230, 168, 0.65); --c-border-tabs: rgba(var(--rgb-accent-deep), 0.19); --c-border-focus: rgba(var(--rgb-accent-deep), 0.55); --c-ring-dash: rgba(62, 230, 168, 0.22); --c-gold-line: rgba(var(--rgb-gold), 0.75); --c-border-gold: rgba(var(--rgb-gold), 0.55); /* obrys pola z bledem */ /* --- Szuflada nawigacji: paleta z aplikacji ---------------------------- Wlasciciel chce, zeby wysuwane menu witryny wygladalo jak menu produktu (3dmenu.pl/app/demo). Wartosci przeniesione 1:1 ze static/v1/css/main.css aplikacji - w nawiasie nazwa zmiennej po tamtej stronie, zeby dalo sie je zsynchronizowac, gdyby tamta paleta kiedys drgnela. */ --rgb-drawer-bg: 12, 36, 23; /* #0C2417 = --bg-alt */ --c-drawer-bg: rgb(var(--rgb-drawer-bg)); /* tlo panelu */ /* Panel wysuniety jest lekko przezroczysty (polecenie wlasciciela) - stad druga postac tego samego koloru. Krycie 0,86: widac, ze pod spodem cos jest, a tekst pozycji menu nie traci kontrastu. */ --c-drawer-glass: rgba(var(--rgb-drawer-bg), 0.86); /* Lista jezykow. W aplikacji jej pudelko NIE MA koloru tla - cala jego barwa bierze sie z rozmycia tego, co pod nim, podbitego jasnoscia. Stad tutaj tylko obrys i cien; reszta parametrow (promien, dopelnienie, szerokosc) stoi przy regule w sekcji 16. */ --c-lang-border: #094A2B; /* --lang-dropdown-border-mobile */ /* Zaslona pod lista jezykow. W aplikacji jest CZARNA i rzadsza od naszej (--black-alpha-60 zamiast --c-overlay, czyli 0,82 na kolorze tla) - a to wlasnie ona decyduje, jak wyglada panel: jego barwa jest rozmyciem tego, co pod nim. Przy naszej gestszej zaslonie panel wychodzil ciemny i plaski zamiast przezroczystego. */ --c-scrim-app: rgba(0, 0, 0, 0.60); /* --black-alpha-60 */ --shadow-lang: 0 10px 40px rgba(0, 0, 0, 0.50); /* --black-alpha-50 */ --c-drawer-rule: rgba(214, 233, 223, 0.15); /* --border-color */ --c-drawer-text: #D6E9DF; /* --text-primary - pozycje menu */ /* --- Wypelnienia stanow ----------------------------------------------- */ --c-fill-accent: rgba(var(--rgb-accent-deep), 0.12); --c-fill-hover: rgba(var(--rgb-line), 0.05); --c-fill-thumb: rgba(var(--rgb-line), 0.04); --c-fill-ghost: rgba(62, 230, 168, 0.12); /* Welon pod dwoma przyciskami hero. Prawie przezroczysty i w kolorze, w ktory kadr strony glownej i tak jest wtopiony (--c-bg-deep) - chodzi wylacznie o to, zeby napis nie lezal bezposrednio na kieliszku i talerzu ze zdjecia. Mocniejsze wypelnienie zabiloby forme przycisku, ktora jest "sam obrys". */ --c-fill-btn-hero: rgba(var(--rgb-btn-hero), 0.34); /* --- Poswiaty i cienie ------------------------------------------------ Pierwsza rzecz strojona przy zmianie zdjecia w tle - dlatego osobno. */ /* Sila i zasieg dobrane pomiarem do ORYGINALNEGO projektu z Claude Design (claude-design-eksport-export/oferta.html). Wlasciciel zglosil, ze gora podstron jest u nas za ciemna. Zmierzone w tych samych punktach kadru przy 1440x900 - oryginal / bylo / jest: srodek gory #004127 / #002B1C / #00422B prawy gorny #004A2F / #003620 / #00472C przy maskotce #004329 / #002A19 / #003A24 Nizsze partie kadru pozostaja bez zmian - poswiata ich nie dosiega. */ --glow-page: radial-gradient(110% 85% at 68% 4%, rgba(0, 140, 92, 0.52) 0%, transparent 70%); /* Slabsza odmiana pod dlugi tekst dokumentow prawnych. */ --glow-doc: radial-gradient(90% 45% at 60% 0%, rgba(0, 127, 83, 0.16) 0%, transparent 60%); /* Przyciemnienie u samej gory hero. Wlasciciel dobral rgb(9 41 24) - o wlos jasniej i bardziej zielono niz tlo strony (--rgb-bg), zeby pas pod naglowkiem nie robil sie szary. Wartosc stoi wprost, jak w pozostalych skladnikach tej poswiaty. */ /* Poswiata strony startowej, wartosci dobrane przez wlasciciela. Trzecia warstwa nie jest juz swiatlem w lewym dolnym rogu (bylo 80% 70% at 10% 90%), tylko wysoka kolumna postawiona na srodku, pod scena. UWAGA: komentarz musi stac NAD deklaracja, nie w srodku listy warstw - w wartosci zmiennej zostaje w tokenach i trafia do wyliczonego tla. */ --glow-hero: linear-gradient(180deg, rgba(9, 41, 24, 0.55) 0%, transparent 26%), radial-gradient(116% 90% at 42% 18%, rgba(0, 107, 69, 0.68) 0%, transparent 60%), radial-gradient(80% 170% at 50% 29%, rgba(15, 80, 37, 0.45) 0%, transparent 65%); /* Poswiata pol formularza. Trzy skladniki, kazdy robi co innego: - waska aura na zewnatrz: pole "swieci" na tlo, ale nie rozlewa sie, - kreska swiatla u gory wewnatrz: krawedz lapie odblask, jak w karcie, - delikatne przyciemnienie pod spodem: pole ma glebokosc, nie jest plaskie. Wartosci celowo niskie - wlasciciel prosil o efekt hologramu, a nie o pole, ktore rzuca sie w oczy bardziej niz tresc. */ /* Poswiata pod belka naglowka. ZIELONA, nie czarna - i to jest sedno zabiegu, nie ozdoba: belka ma nieprzezroczyste tlo --c-bg i gubi sie wszedzie tam, gdzie przewinie sie nad ciemniejsza powierzchnia (kadr zdjecia, pasmo stopki, ciemny dol karty). Czarny cien nic by tam nie dal, bo ciemne na ciemnym nie odcina. Zielona poswiata na zielonym tle strony wtapia sie i jest niewidoczna, a na ciemnym robi wyrazna krawedz - czyli pojawia sie dokladnie wtedy, kiedy jest potrzebna. Przesuniecie w dol i ujemny spread trzymaja ja pod belka, zamiast rozlewac na boki. */ --glow-header: 0 0.5rem 1.5rem -0.5rem rgba(var(--rgb-accent-deep), 0.38); --glow-field: 0 0 0.875rem -0.375rem rgba(var(--rgb-accent-deep), 0.30), inset 0 1px 0 rgba(var(--rgb-accent), 0.10), inset 0 -1px 0 rgba(0, 0, 0, 0.22); --glow-field-hover: 0 0 1rem -0.3125rem rgba(var(--rgb-accent-deep), 0.42), inset 0 1px 0 rgba(var(--rgb-accent), 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.22); --glow-field-focus: 0 0 1.5rem -0.25rem rgba(var(--rgb-accent-deep), 0.55), inset 0 1px 0 rgba(var(--rgb-accent), 0.26), inset 0 -1px 0 rgba(0, 0, 0, 0.22); --glow-stage: radial-gradient(closest-side, rgba(22, 144, 101, 0.17), rgba(5, 102, 65, 0.07) 55%, transparent 76%); --glow-floor: radial-gradient(closest-side, rgba(19, 158, 111, 0.16), rgba(11, 118, 77, 0.06) 52%, transparent 80%); --glow-faq: radial-gradient(90% 100% at 50% 0%, rgba(0, 88, 56, 0.26) 0%, transparent 70%), radial-gradient(45% 100% at 82% 0%, rgba(0, 107, 69, 0.18) 0%, transparent 68%); --glow-step: radial-gradient(closest-side, rgba(0, 152, 105, 0.12), transparent 74%); /* Wnetrze okna kalkulatora. Bylo plaskie --c-bg-deep (2 18 9), czyli najciemniejszy kolor w palecie - okno wygladalo przez to ponuro, a jest to ekran, na ktorym gosc spedza chwile i liczy pieniadze (zgloszenie wlasciciela: "pesymistyczne, ciemne tlo"). Dwie warstwy w rodzinie, ktora witryna juz zna: poswiata od gory jak w pasmie FAQ (--glow-faq) i zielony gradient wzdluz przekatnej jak w kartach pakietow. Podklad zostaje nieprzezroczysty, bo przez okno nie moze przebijac strona pod nim. */ --grad-modal-calc: radial-gradient(120% 70% at 50% 0%, rgba(0, 152, 105, 0.30) 0%, transparent 64%), linear-gradient(165deg, rgba(0, 107, 69, 0.22) 0%, rgba(var(--rgb-bg), 0.90) 58%); /* Preloader - wartosci z szablonu 3DMenu. */ --c-glow-logo: rgba(34, 197, 94, 0.15); --c-particle-shadow: rgba(74, 222, 128, 0.8); --shadow-cta: 0 8px 24px rgba(var(--rgb-accent), 0.28); --shadow-ring: 0 0 18px rgba(var(--rgb-accent), 0.35); /* Zabezpieczenie czytelnosci akapitu hero, ktory stoi wprost na zdjeciu. Dwie warstwy, bo jedna nie wystarcza: krotka i gesta odkleja litere od tla, dluga i rozmyta przygasza sam kadr wokol bloku tekstu. Naglowek hero cienia NIE dostaje - decyzja wlasciciela: przy tym stopniu pisma i grubosci 700 broni sie sam. */ --shadow-text-hero: 0 1px 2px rgba(var(--rgb-bg-deep), 0.55), 0 0 14px rgba(var(--rgb-bg-deep), 0.75); --shadow-nav: 0 0 14px rgba(var(--rgb-accent), 0.55); --shadow-num: 0 0 22px rgba(var(--rgb-accent-deep), 0.50); --shadow-tab: 0 0 18px rgba(var(--rgb-accent-deep), 0.25); --glow-plan: 0 0 48px rgba(var(--rgb-accent-deep), 0.30); /* Okno modalne: zielona aureola karty cennika plus miekki cien pod spodem, zeby ramka odklejala sie od zaslony. Bez cienia wewnetrznego - to on robil z okna ciezka, przytloczona skrzynke. */ --shadow-modal: 0 0 48px rgba(var(--rgb-accent-deep), 0.22), 0 1.875rem 3.75rem -1.25rem rgba(0, 0, 0, 0.65); --shadow-badge: 0 0 24px rgba(var(--rgb-accent), 0.45); /* Cien szuflady pada w PRAWO, na zaslonieta strone - stad zerowe przesuniecie w pionie. Wartosci jak w aplikacji. */ --shadow-drawer: 10px 0 30px rgba(0, 0, 0, 0.50); /* Przycisk trybu AR w scenie hero - patrz sekcja 11. */ --shadow-ar: 0 6px 18px rgba(0, 0, 0, 0.40); --shadow-panel: inset 0 22px 44px -22px rgba(0, 0, 0, 0.85); --drop-robot: drop-shadow(0 34px 54px rgba(0, 0, 0, 0.45)); --drop-robot-near: drop-shadow(0 26px 44px rgba(0, 0, 0, 0.50)); /* Maskotka kontaktu na szerokim ekranie. Zmienna, bo ten sam wymiar jest SUFITEM w pasmie 561-1080 px (sekcja 22) - wlasciciel nie chce, zeby gdziekolwiek byla wieksza niz na desktopie. Wysokosc z proporcji pliku robot-kontakt.webp (1016 x 683). */ --robot-inline-w: 31.75rem; --robot-inline-h: calc(var(--robot-inline-w) * 683 / 1016); /* --- Karty ------------------------------------------------------------ */ --grad-card: linear-gradient(160deg, rgba(0, 107, 69, 0.10) 0%, rgba(var(--rgb-bg-card), 0.50) 62%); /* Karty cennika stoja na zdjeciu tla podstrony, wiec musza miec wlasne, gestsze tlo - przy niemal przezroczystym kadr przebijal przez tabele cen. */ --grad-plan: linear-gradient(180deg, rgba(var(--rgb-accent), 0.14) 0%, rgba(var(--rgb-bg-plan), 0.78) 60%); --grad-plan-pop: linear-gradient(180deg, rgba(var(--rgb-accent), 0.20) 0%, rgba(var(--rgb-bg-plan), 0.82) 60%); /* --- Uklad ------------------------------------------------------------ Wartosci wziete wprost z projektu, dlatego stoja osobno od skali odstepow nizej - zaokraglenie ich do skali przesunieoby kadr. */ --container-max: 90rem; /* 1440 px */ --container-pad: 3rem; /* 48 px */ --header-pad-y: 1.125rem; /* 18 px */ --header-h: 5.0625rem; /* 18 + 45 + 18 - wysokosc paska naglowka */ --logo-h: 2.8125rem; /* 45 px */ /* Minimalny cel dotkniecia wg wytycznych dostepnosci. Ta sama wartosc jest szerokoscia hamburgera ORAZ bocznych kolumn paska na telefonie - gdyby sie rozjechaly, logo przestaloby stac na osi ekranu. */ --tap-min: 2.75rem; /* 44 px */ /* Szuflada nawigacji na waskim ekranie. Obie liczby przeniesione wprost z aplikacji 3DMenu (static/v1/css/main.css, .mobile-drawer). Wlasciciel zdecydowal jednak, ze panel ma zakrywac ekran w calosci, wiec tokeny --drawer-w (20.1875rem) i --drawer-max (85vw) zostaly usuniete: obie wartosci byly nadpisywane w tym samym bloku @media i nigdy nie doszly do skutku. Wartosci do ewentualnego powrotu stoja w komentarzu ROLLBACK przy samej regule .site-nav w sekcji 22. */ /* Lista jezykow zjezdzajaca spod paska. Szerokosc i droga wjazdu wprost z aplikacji 3DMenu (.mobile-lang-overlay .lang-dropdown): 230 px panelu i 25 px, ktore pokonuje w pionie. */ --lang-menu-w: 14.375rem; /* 230 px */ --lang-menu-shift: 1.5625rem; /* 25 px */ --lang-menu-drop: 0.875rem; /* 14 px - odstep listy od paska */ /* Pigulka jezykow na szerokim ekranie. Wymiary wprost z paska aplikacji 3DMenu (.lang-switcher-btn w header-top): wysokosc 44 px, 8 px miedzy globem, skrotem i strzalka, 4 px dopelnienia po bokach. Odstep od przycisku demo to 17 px - tyle, ile tam dzieli glob od koszyka. */ --lang-pill-h: 2.75rem; /* 44 px - rowna --tap-min */ --lang-pill-gap: 0.5rem; /* 8 px */ --lang-pill-cta: 1.0625rem; /* 17 px - odstep od przycisku demo */ --lang-caret: 1rem; /* 16 px */ --t-caret: 0.3s; --ease-caret: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Zdjecie w tle - patrz body::before. Dwie liczby: ile szerokosci okna zajmuje kadr i ponizej jakiej szerokosci przestaje sie kurczyc. Strojenie ich zmienia wysokosc kadru na wszystkich podstronach naraz. */ /* PODGLAD: pochylenie telefonu w sekcji "Skala 1:1" w strone kafelkow. Wyzerowanie tej jednej liczby cofa efekt bez ruszania regul. */ /* Stan SPOCZYNKOWY obudowy telefonu: PROSTO. Kat narasta dopiero pod wplywem przewijania - wpisuje go komponent Tilt przy kazdej klatce (patrz CONFIG.tilt.maxDeg). Gdy skrypt nie wstanie, telefon po prostu stoi prosto. */ --proof-tilt: 0deg; --proof-perspective: 1400px; /* Korekta wysrodkowania - te sama wartosc wpisuje Tilt, przeskalowana katem. Obrot w perspektywie nie jest symetryczny: krawedz wychodzaca do przodu rosnie bardziej, niz kurczy sie cofnieta, wiec rzut obudowy przesuwa sie w bok. Zmierzone przy 12 stopniach: srodek telefonu lezal 4,1 px na lewo od srodka podpisu przy szerokosci 336 px, czyli 1,22 % jego wlasnej szerokosci. Przy zerowym kacie nie ma czego korygowac. */ --proof-tilt-shift: 0%; --page-bg-scale: 100%; --page-bg-min: 2000px; --page-bg-pos: right top; --head-pad-top: 3.375rem; /* 54 px */ --head-pad-bottom: 3.125rem; /* 50 px */ --col-narrow: 0.82fr; /* lewa kolumna ukladu dwukolumnowego */ --col-wide: 1.18fr; /* prawa kolumna */ /* --- Skala odstepow --------------------------------------------------- */ --sp-1: 0.25rem; /* 4 px */ --sp-2: 0.5rem; /* 8 px */ --sp-3: 0.75rem; /* 12 px */ --sp-4: 1rem; /* 16 px */ --sp-5: 1.375rem; /* 22 px */ --sp-6: 1.5rem; /* 24 px */ --sp-7: 2rem; /* 32 px */ --sp-8: 2.375rem; /* 38 px */ --sp-9: 2.875rem; /* 46 px */ --sp-10: 4rem; /* 64 px */ --sp-11: 5.5rem; /* 88 px */ --sp-12: 6.5rem; /* 104 px */ /* --- Promienie -------------------------------------------------------- */ --r-sm: 1rem; /* 16 px - pola formularza */ --r-md: 1.25rem; /* 20 px - miniatury dan */ --r-lg: 1.625rem; /* 26 px - karty */ --r-xl: 2.375rem; /* 38 px - panel demo */ --r-pill: 62.4375rem; /* 999 px */ /* Srednica przycisku AR - 37 px, wartosc dobrana przez wlasciciela w inspektorze. Wczesniej rownala sie kolku jezykow i hamburgera (--tap-min, 44 px), a jeszcze wczesniej miala 46. ZNAK W SRODKU zostaje 22 px i to jest osobna wartosc wlasnie po to: zmniejsza sie samo kolko, nie jego zawartosc. Przy 37 px zostaje na obwodzie 7,5 px swiatla z kazdej strony. UWAGA na przyszlosc: 37 px jest ponizej --tap-min, czyli ponizej zalecanego minimum celu dotykowego (44 px). Przycisk stoi w wolnym polu nad panelem miniatur, wiec nie ma obok czego trafic przez pomylke, ale przy dokladaniu czegokolwiek w tym rogu warto o tym pamietac. */ --ar-btn-d: 2.3125rem; /* 37 px */ --ar-btn-icon: 1.375rem; /* 22 px - znak w jego srodku */ /* --- Typografia ------------------------------------------------------- clamp() przeniesiony 1:1 z projektu - dolna granica to rozmiar na telefonie, gorna na monitorze 1440 px i szerszym. */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --fs-eyebrow: 0.8125rem; /* 13 px */ --fs-micro: 0.78125rem; /* 12.5 px */ --fs-label: 0.84375rem; /* 13.5 px */ --fs-nav: clamp(0.9375rem, 1.2vw, 1.09375rem); --fs-h1: clamp(2.25rem, 4vw, 3.5rem); --fs-h1-hero: clamp(2.1875rem, 4.78vw, 4.875rem); --fs-h1-sup: 0.494em; /* "AR" przy "3D" - 34 px przy stopniu 68.8 px */ --fs-h2: clamp(1.625rem, 2.5vw, 2.5rem); /* Sufit dla tytulu sekcji "Skala 1:1" - patrz .proof__title (sekcja 20a). Ten jeden naglowek ma zostac w JEDNYM wierszu (polecenie wlasciciela), a przy pelnym --fs-h2 mijal sie z szerokoscia kolumny o 11 px. */ --fs-h2-proof: min(var(--fs-h2), 2.4375rem); --fs-h3: 2rem; /* 32 px */ --fs-price: clamp(2.75rem, 4.5vw, 3.875rem); --fs-lead-hero: 1.1875rem; /* 19 px */ --fs-lead: 1.0625rem; /* 17 px */ --fs-body: 1rem; /* 16 px */ --fs-sm: 0.96875rem; /* 15.5 px */ --fs-xs: 0.90625rem; /* 14.5 px */ --ls-tight: -0.02em; --ls-eyebrow: 0.22em; --ls-label: 0.20em; --ls-cta: 0.10em; /* --- Ruch -------------------------------------------------------------- */ --t-fast: 0.25s; --t-preloader: 0.5s; /* zejscie zaslony - tyle samo, co w szablonie */ --t-intro: 0.45s; /* wejscie tla i maskotki na podstronie bez zaslony */ --t-base: 0.35s; --ease: cubic-bezier(0.4, 0, 0.2, 1); /* Wjazd szuflady. Czas i krzywa skopiowane z aplikacji 3DMenu, bo wlasciciel chce DOKLADNIE tamten ruch: koncowka krzywej przekracza 1, wiec panel wychodzi odrobine za daleko i wraca - to ten "odbity" dojazd, ktory odroznia go od zwyklego wysuniecia. */ /* Pierscien pulsujacy przy przycisku AR. Dlugi cykl jest celowy: znak ma zwracac uwage, a nie migac - wartosc z projektu wlasciciela. */ --t-ar-pulse: 2.4s; --t-drawer: 0.4s; --ease-drawer: cubic-bezier(0.175, 0.885, 0.32, 1.1); /* Zjazd listy jezykow, takze skopiowany z aplikacji. Wejscie jest DLUZSZE od wyjscia i idzie po krzywej z mocnym przestrzeleniem (1,56), wiec panel wpada z odbiciem; znika juz bez ozdob, samym `ease-in`. */ --t-lang-in: 0.5s; --t-lang-out: 0.2s; --ease-lang: cubic-bezier(0.34, 1.56, 0.64, 1); --spin-ring: 120s; /* obrot przerywanego okregu przy kroku wdrozenia */ --float-robot: 4.5s; /* Amplitudy ruchu maskotki. Osobno, bo to jedyne wartosci w tym arkuszu, ktore dobiera sie okiem, a nie wyliczeniem - i dobiera sie je do ROZMIARU konkretnej maskotki (patrz .robot--steps nizej). */ --lift-robot: 1.125rem; /* wysokosc unoszenia */ --jitter-robot: 1px; /* wychylenie pojedynczego skoku drgan */ --t-faq: 0.11s; /* rozwijanie odpowiedzi w FAQ i obrot strzalki */ --t-modal: 0.26s; /* wejscie i zejscie okna modalnego; MUSI byc rowny CONFIG.modal.hideMs w core.js */ /* Krzywa "wystrzel i wyhamuj": prawie cala droga w pierwszej polowie czasu, potem lagodne dojscie. Zmierzone od klikniecia: ruch rusza po 26 ms i konczy po 109 ms - czyta sie jako natychmiastowe, a mimo to widac ruch, a nie przeskok. Przy 180 ms bylo 49 i 166 ms i wlasciciel uznal to za powolne. */ --ease-faq: cubic-bezier(0.05, 0.9, 0.2, 1); --t-thumb-slide: 0.62s; /* przejazd rzedu miniatur; lustro CONFIG.showcase.slideMs */ --t-glow: 5s; /* cykl pulsowania poswiaty CTA i karty cennika */ /* --- Wjazd trzech kafelkow "proof" ------------------------------------- Kola nadlatuja z jednego punktu za prawa krawedzia listy, wiec pierwsze ma najdluzsza trase, a ostatnie najkrotsza; ruszaja po kolei. Klatki kluczowe, a NIE krzywa typu "back": przy krzywej przestrzal jest procentem drogi, a drogi sa tu skrajnie rozne (1360 px wobec 450 px), wiec kazde kolo odbijaloby sie inaczej. W klatkach przestrzal jest staly. */ /* Wjazd trzech kol w sekcji "proof". Animacja odpala sie RAZ, gdy sekcja wejdzie w kadr, i leci wlasnym tempem - nie jest przewijana scrollem. Wersja sterowana pozycja szarpala, bo kolko myszy przewija skokami po kilkadziesiat pikseli i kazdy gosc widzial inna animacje. 0,7 s na lot i 0,14 s odstepu, czyli caly rzad wchodzi w 0,98 s. */ --t-reveal: 0.7s; --t-reveal-step: 0.14s; --ease-reveal-in: cubic-bezier(0.25, 1, 0.5, 1); /* Powrot z przestrzalu. Krzywa lagodna Z OBU STRON i rozlozona na dlugim odcinku osi (30 % czasu), zeby kolo DRYFOWALO na miejsce, a nie odbijalo sie. Wczesniejsze proby: 1,35rem przy 32 % czasu (za dlugie), 0,6rem przy 14 % (za gwaltowne) - w obu cofniecie czytalo sie jako osobny ruch. */ --ease-reveal-back: cubic-bezier(0.33, 0, 0.67, 1); /* Glebokosc przestrzalu. 4 px to tyle, zeby dalo sie go zauwazyc katem oka, a nie tyle, zeby byl osobnym zdarzeniem. Musi tez zostac mniejszy niz odstep miedzy kolami (--sp-4, 16 px) - inaczej kolo przelatujace w lewo weszloby na sasiada, ktory juz stoi. */ --reveal-overshoot: -0.25rem; /* --- Scena 3D ---------------------------------------------------------- Rozmiary zalezne od widoku, przeniesione z projektu. Trzymane jako zmienne, bo kadr sceny stroi sie tu najczesciej. */ --stage-h: min(50vw, 53.875rem, 66vh); /* Kadr sceny konczy sie TUZ PRZED przerywanym okregiem - tak, zeby obiekt mial jak najwiecej miejsca, ale zeby jego krawedz nie wchodzila na okrag. Zmierzone przy 1440x900: okrag 657 px, kadr 630 px, czyli 13 px zapasu z kazdej strony. */ --stage-dish: min(50vw, 53.5rem, 70vh); /* Odstep miedzy okregiem a gorna krawedzia pasma to (wysokosc pasma minus wysokosc okregu) / 2 - okrag jest w pasmie wysrodkowany, wiec to jedyne, co go ustala. Skracanie pasma nie wchodzi w gre: przy 1440x900 o jego wysokosci decyduje kolumna tekstu, a nie `min-height` (zmierzone - po skroceniu min-height o 3rem pasmo zmalalo tylko z 710 na 690 px). Dlatego rosnie okrag: 68vh -> 73vh zmniejsza odstep z 49 na 26 px. */ /* Srednica kola kroku. Cztery kolumny na szerokim ekranie. */ --step-d: clamp(17.5rem, 19.5vw, 20rem); /* Wnetrze kola w sekcji "Skala 1:1" - ikona i dopelnienie. Oba PLYNNE z tego samego powodu, co --step-d wyzej: kolo ma stala proporcje (aspect-ratio: 1), a jego srednica zalezy od szerokosci kolumny - zmierzone 246 px przy oknie 1440, ale juz 176 px przy 1081. Tresc miala staly wymiar (201 px przy dwuwierszowym napisie), wiec ponizej okolo 1245 px przestawala sie miescic i kolo rozciagalo sie w owal (zgloszenie wlasciciela z 1100 px: +18 px wysokosci). Gorne granice to dokladnie te wartosci, ktore obowiazywaly dotad, wiec na szerokim ekranie nie zmienia sie nic; schodza dopiero tam, gdzie zaczyna brakowac miejsca. */ --tile-icon: clamp(3.5rem, 5vw, 4.5rem); --tile-pad: clamp(1rem, 1.5vw, 1.375rem); --stage-ring: min(52vw, 55.625rem, 73vh); /* Drugi okrag - TUZ POD przerywanym, nie w polowie promienia. Wzor to obwodka ikony w kafelkach "proof": zmierzone tam 1px kreski zewnetrznej, 6,3 px przerwy i 2,9 px kreski wewnetrznej, jasniejszej od zewnetrznej. Przerwa zostaje w wartosci bezwzglednej, a nie w procencie srednicy: przeniesiona proporcjonalnie z kola 72 px na kolo 657 px daloby 58 px odstepu, czyli dwa osobne okregi zamiast pary linii. */ --stage-ring-inner-gap: 0.375rem; --stage-ring-inner-w: 4px; --stage-glow: min(62vw, 70.5rem, 86vh); --stage-lift: 3.75rem; /* przesuniecie dania w gore wzgledem srodka */ /* Kostka ladowania w scenie. Jedna zmienna, bo rozmiar wchodzi w trzech miejscach naraz: pudelko, sciany i ich odsuniecie w glab (polowa boku) - rozjechanie ich rozklada szescian. Podniesione o 20% z 2,75rem na prosbe wlasciciela. */ --cube-size: 3.3rem; /* Zdjecie z Oferty jako faktura w tle okna kalkulatora. Osobno adres i krycie, bo krycie stroi sie okiem, a adres zmienia sie razem z kadrem podstrony. */ --modal-photo: url('../img/bg-oferta.jpg'); /* Krycie dobrane POMIAREM, nie na oko. Kadr jest bardzo ciemny (najjasniejszy pas to rgb(3,45,27)), wiec przy 0,22 zmienial tlo ramki o szesc jednostek na kanale zielonym - czyli praktycznie wcale, i dokladnie tak to wygladalo. Przy 0,60 probka tla idzie z rgb(44,62,52) na rgb(43,79,64): faktura jest czytelna, a liczby po prawej maja dalej spokojne tlo. */ /* Ile ZDJECIA widac w tle szerokiego okna. Odkad kadr jest podkladem, a nie nakladka, ta liczba mowi wprost, jak mocno przebija sie przez welon - i to ona decyduje, czy okno jest zielone, czy ciemne. */ --modal-photo-alpha: 0.55; --panel-w: 29.875rem; /* 478 px - szerokosc panelu demo */ --panel-drop: 0rem; /* miejsce pod scena na panel demo. Zero na */ /* szerokim ekranie, gdzie panel lezy NA */ /* scenie; rosnie ponizej 1080 px. */ --thumb-size: 3.625rem; /* 58 px */ /* Szerokosc obudowy telefonu w sekcji "Skala 1:1". JEDNA zmienna, bo ta sama wartosc jest szerokoscia podpisu pod nim - kreski po jego bokach maja konczyc sie rowno z krawedziami obudowy. */ --phone-w: min(21rem, 100%); --thumb-gap: 0.5625rem; /* 9 px - odstep miedzy miniaturami */ /* --- Warstwy ----------------------------------------------------------- */ --z-bg: 0; --z-content: 4; --z-ar: 3; /* przycisk AR: nad plotnem sceny i nad kostka ladowania */ --z-robot: 6; --z-header: 7; /* nad maskotka: belka jest sticky i musi ja zaslaniac */ --z-drawer-scrim: 19; /* zaslona: pod szuflada, nad cala reszta strony */ --z-drawer: 20; --z-modal: 60; --z-preloader: 9999; /* --- Progi @media (informacyjnie) -------------------------------------- CSS nie pozwala uzyc custom property w warunku @media, wiec te wartosci sa powtorzone recznie w sekcji 16. Zmiana progu = zmiana w dwoch miejscach; ta lista jest zrodlem prawdy. --bp-lg: 1080px uklady dwukolumnowe schodza do jednej kolumny --bp-md: 860px nawigacja zmienia sie w szuflade --bp-sm: 560px zageszczenie ukladu na telefonie */ } /* ========================================================================== 2. RESET I PODSTAWY ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* Skok kotwica ma sie zatrzymac POD belka, nie za nia. Wartosc jest o 20 px glebsza niz sama wysokosc belki: przy rownych 84 px tuz nad krawedzia sekcji widac bylo jasna kreske grubosci piksela. Skok robiony z kodu (Anchors.jump) liczy to osobno, bo `scrollTo` tej wlasciwosci nie widzi. */ scroll-padding-top: 4rem; /* CELOWO bez `scroll-behavior: smooth`: scena hero rysuje 3D w petli, a przy animowanym przewijaniu przegladarka interpoluje pozycje na tym samym watku i scroll robi sie ciezki. BEZ `scroll-padding-top`: naglowek nie jest przyklejony, wiec odjezdza razem z trescia, a zapas zostawialby nad kotwica kawalek poprzedniej sekcji. */ } /* Suwak strony zawsze widoczny. Domyslne paski nakladkowe pokazuja sie tylko w trakcie przewijania, wiec nie widac, ze strona ma czym jechac dalej; podanie wlasnych regul przelacza Chromium na pasek klasyczny. Safari na macOS je ignoruje i trzyma sie ustawienia systemu - ograniczenie platformy. Zmierzone: sam pasek nie wplywa na plynnosc (to jednorazowe malowanie). */ ::-webkit-scrollbar { width: 0.875rem; } ::-webkit-scrollbar-track { background: var(--c-bg-deep); } ::-webkit-scrollbar-thumb { background-color: var(--c-border-mid); border: 4px solid var(--c-bg-deep); border-radius: var(--r-pill); } ::-webkit-scrollbar-thumb:hover { background-color: var(--c-border-strong); } /* Poswiaty sceny hero i pasek miniatur celowo wychodza poza obrys swoich kontenerow - tak wygladaja w projekcie. Zeby nie wystawialy przy tym poziomego suwaka, przycinamy je na poziomie dokumentu. `overflow-x: hidden` na samym `body` NIE wystarcza: przewijaniem steruje `html`, wiec to ono musi przycinac. `clip` jest wersja wlasciwa - nie robi z elementu kontenera przewijania, wiec nie psuje `position: sticky` ani przewijania do kotwic; `hidden` zostaje jako wariant zapasowy dla starszych przegladarek. */ html, body { overflow-x: hidden; } @supports (overflow: clip) { html, body { overflow-x: clip; } } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background-color: var(--c-bg); color: var(--c-text); font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3, p, figure, blockquote { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: var(--c-accent-soft); text-decoration: none; transition: color var(--t-fast) var(--ease); } img, svg { display: block; max-width: 100%; } img { height: auto; } button, input, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } ::selection { background: rgba(var(--rgb-accent), 0.3); } :focus-visible { outline: 2px solid var(--c-accent-vivid); outline-offset: 3px; border-radius: var(--sp-1); } /* Element pojawia sie dopiero, gdy JS potwierdzi, ze ma sens (np. przelacznik podgladu 3D). Atrybut `hidden` sam w sobie przegrywa z `display:flex`. */ [hidden] { display: none !important; } /* ========================================================================== 3. UKLAD: TLO STRONY, PASMA, KONTENER, DOSTEPNOSC ========================================================================== */ /* Dwie warstwy tla jako pseudoelementy `body`, a nie osobne
-y z projektu: to samo malowanie, a w markupie nie zostaja dwa puste wezly, ktore czytnik ekranu i tak musi pominac. */ body::before, body::after { content: ''; position: fixed; inset: 0; z-index: var(--z-bg); pointer-events: none; } /* Zdjecie tla podstrony idzie pod calosc strony, razem z pasmem naglowka - decyzja wlasciciela. Wysokosc z proporcji (`100% auto`), kotwica u gory, nizej samo tlo: rozciagniecie na oba wymiary wyciagalo kadr w pionie przy wysokich oknach. Wtopienie w kolor tla jest wypalone w pliku, bo gradient w CSS musialby zgadywac, gdzie konczy sie zdjecie. */ body::before { /* Kolor pod zdjeciem MUSI byc tym samym, w ktory zdjecie jest wtopione - inaczej na dole kadru widac prog. Kazda podstrona podaje go razem ze swoim plikiem (--page-fill obok --page-bg), bo to wlasciwosc konkretnego obrazu, a nie calej witryny. Zmierzone na dostarczonych plikach: nowe kadry koncza sie na #021208, czyli --c-bg-deep. */ background-color: var(--page-fill, var(--c-bg)); /* Dwie warstwy: welon NAD zdjeciem (pierwszy w kolejnosci maluje sie wyzej) i samo zdjecie. Welon ma kolor wtopienia kadru, wiec plaskiej czesci pod zdjeciem nie rusza - tam kolor kladzie sie sam na siebie - a samo zdjecie przygasza. Domyslnie zadnego nie ma. */ background-image: var(--page-veil, none), var(--page-bg, none); /* Szerokosc zdjecia NIE schodzi ponizej `--page-bg-min`. Przy samym `100% auto` kadr chudnie razem z oknem - przy 1440 px zdjecie oferty ma 735 px wysokosci zamiast 1021 px, ktore ma przy 2000 px - i pasmo robi sie plaskie. Od progu w gore nic sie nie zmienia (100% jest juz wieksze), ponizej progu zdjecie zostaje w rozmiarze z progu i jest przycinane z LEWEJ, bo kotwica stoi po prawej (PODGLAD - wariant do porownania z zakotwiczeniem po lewej; zmiana to jedno slowo nizej). */ background-size: var(--page-bg-scale) auto; background-position: var(--page-bg-pos); background-repeat: no-repeat; } /* Ponizej progu (`--page-bg-min`) kadr przestaje sie kurczyc razem z oknem: bierzemy wieksza z dwoch wartosci - skale strony i sam prog. Od progu w gore zostaje sama skala: na podstronach 100 %, na stronie glownej 150 % - tam powiekszenie ma obowiazywac na kazdej szerokosci. Prog jest wpisany w warunek liczba, bo CSS nie przyjmuje zmiennej w @media - przy zmianie `--page-bg-min` trzeba poprawic OBA miejsca. */ @media (max-width: 1999.98px) { body::before { background-size: max(var(--page-bg-scale), var(--page-bg-min)) auto; } } /* Welon nad zdjeciem, w kolorze wtopienia kadru. Gestnieje tam, gdzie stoi tresc, bo najjasniejsze punkty kadru (kieliszek, swiece, talerz) wypadaja wlasnie pod tekstem. Stopnie licza sie od SZEROKOSCI ZDJECIA, nie okna: do 2000 px zdjecie ma stale 2000 px i stoi przy lewej krawedzi, wiec 64 % to zawsze 1280 px. Kolejnosc stopni MUSI rosnac - CSS nie sortuje ich, tylko przycina kazdy cofniety do poprzedniego, co daje twarda krawedz zamiast przejscia. Tylko powyzej 960 px: nizej kadr wraca do 100 % i tekst schodzi pod niego. */ @media (min-width: 960.02px) { body.page-start { --page-veil: linear-gradient(to right, rgba(var(--rgb-bg-deep), 0.15) 0%, rgba(var(--rgb-bg-deep), 0.50) 64%, rgba(var(--rgb-bg-deep), 0.40) 76%, rgba(var(--rgb-bg-deep), 0.28) 88%, rgba(var(--rgb-bg-deep), 0.25) 100%); } } body::after { background: var(--page-glow, var(--glow-page)); } /* --- Tlo poszczegolnych podstron ----------------------------------------- Kazda podstrona wnosi wlasne zdjecie przez zmienna, a nie przez regule z wpisana sciezka w kilku miejscach. Wariant 1920 px obsluguje monitory, wariant 960 px wchodzi ponizej progu telefonu (sekcja 16) - to samo zdjecie w rozdzielczosci 4000 px kosztowaloby na telefonie ok. 32 MB pamieci po dekompresji, a widac z niego rozmyty gradient. */ /* Zdjecie stoi na dole naglowka strony glownej, a pasmo FAQ zostaje samym kolorem. Warstwa kadru przewija sie TU razem ze strona, a nie jest przypieta do okna jak na podstronach: pasmo FAQ ma wlasne, nieprzezroczyste tlo, wiec przy przewijaniu wjezdzalo na przypiete zdjecie i przecinalo je ruchoma krawedzia. `position: relative` na jest po to, zeby warstwa liczyla wysokosc od calego dokumentu, a nie od pierwszego ekranu. */ body.page-start { position: relative; } body.page-start::before { position: absolute; } /* Tlo strony glownej. Dolna krawedz kadru jest wtopiona w --c-bg-deep juz w pliku, tak samo jak w kadrach podstron. Skala 100 %, bo kadr jest szerszy niz poprzedni (1,97:1) i przy tej samej szerokosci okna wychodzi wyzszy; przy 150 % scena z daniem schodzila pod krawedz ekranu. `?v=` przy nazwie: kadr podmienia sie POD TA SAMA nazwa, a .htaccess daje obrazkom miesieczny cache - bez tego przegladarka oddaje kopie z dysku. */ .page-start { --page-glow: var(--glow-hero); /* ROLLBACK: --page-bg: url('../img/bg-faq.jpg'); */ /* `?v=` jest tu po to, zeby dalo sie podmienic kadr POD TA SAMA nazwa i zobaczyc go od razu. Bez tego nie widac nowego pliku: .htaccess daje obrazkom `max-age` na miesiac (zalozenie bylo takie, ze podmiana idzie przez nowa nazwe), wiec przegladarka oddaje kopie z dysku i nie pyta serwera. Przy kazdym kolejnym eksporcie tego samego kadru podnosimy numer. */ --page-bg: url('../img/bg-faq-2.jpg?v=11'); --page-fill: var(--c-bg-deep); /* Kotwica po LEWEJ - tresc kadru siedzi po tej stronie. W pionie kadr startuje POD belka naglowka: belka jest nieprzezroczysta i zakrywala pierwsze 162 wiersze pliku, a tam siedzi glowa goscia. Pas nad zdjeciem dostaje --page-fill, czyli kolor, ktory i tak jest pod belka. ROLLBACK: `left top`. */ /* ROLLBACK: --page-bg-scale: 150%; */ --page-bg-scale: 100%; --page-bg-pos: left var(--header-h); } /* Kadry pelnowymiarowe to ORYGINALNE pliki JPEG od wlasciciela, bez naszego ponownego kodowania - zadnej dolozonej straty. Zmierzone: zrodla maja 0,13-0,14 bita na piksel, czyli sa juz mocno skompresowane u zrodla, a krok przez WebP q95 dokladal 0,3% bledu (RMSE). Skoro roznica w wadze wychodzila niewielka, prosciej nie kodowac ponownie wcale. */ /* Przy kazdej podstronie stoi kolor, w ktory jej kadr jest wtopiony. Zmierzone na dolnej krawedzi plikow: wszystkie schodza do --c-bg-deep. */ /* EKSPERYMENT, jak wyzej: pasmo FAQ oddaje zdjecie naglowkowi strony i traci cien styku. Powrot to przywrocenie `--band-photo` i skasowanie `box-shadow` ponizej. */ .faq { --band-photo: none; --band-photo-ratio: 4118 / 1584; } /* Pasmo FAQ przestaje malowac wlasne tlo. To ono tworzylo widoczna krawedz: nieprzezroczysty kolor przykrywal poswiate strony (body::after), ktora NAD pasmem byla widoczna, a pod nim juz nie. Bez wlasnego tla powierzchnia jest jedna i ciagla - to samo tlo podstrony i ta sama poswiata biegna przez cala strone, wiec nie ma czego wtapiac gradientem. Selektor z `.page-start`, bo `.band--photo` stoi w arkuszu nizej i przy rownej wadze wygralby z samym `.faq`. */ .page-start .faq { background-color: transparent; } /* Razem z tlem znika poswiata gornej krawedzi pasma (.faq::before). Jej rola bylo "polaczenie sekcji z hero powyzej" - przy jednej, ciaglej powierzchni nie ma juz czego laczyc, a sama poswiata rysowala wlasnie te jasniejsza smuge, ktora bylo widac jako przejscie. */ .page-start .faq::before { display: none; } /* I cien styku z warstwy zdjecia (.band--photo::after). Zdjecia w tym pasmie juz nie ma, wiec cien nie ma czego stykac - a to wlasnie on rysowal ostatnia pozostala kreske na granicy sekcji. Selektor znowu z `.page-start`, bo `.band--photo::after` stoi w arkuszu nizej. */ .page-start .faq::after { box-shadow: none; } .page-oferta { --page-bg: url('../img/bg-oferta.jpg'); --page-fill: var(--c-bg-deep); } .page-wdrozenie { --page-bg: url('../img/bg-wdrozenie.jpg'); --page-fill: var(--c-bg-deep); } .page-kontakt { --page-bg: url('../img/bg-kontakt.jpg'); --page-fill: var(--c-bg-deep); } /* Dokumenty prawne to dlugi tekst ciagly. Pelna poswiata za akapitami meczy przy czytaniu, wiec podstrona dostaje slabszy wariant - samo tlo i delikatne swiatlo przy gornej krawedzi. */ .page-doc { --page-glow: var(--glow-doc); } .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } /* Pasmo: pelna szerokosc okna, tresc wysrodkowana kontenerem w srodku. Zastepuje trik `width:100vw; margin-left:calc(50% - 50vw)` z projektu, ktory przy widocznym pasku przewijania wystawia poziomy suwak. */ .band { position: relative; z-index: var(--z-content); width: 100%; } /* Stopka jest o jedna jednostke na kanale ciemniejsza niz --c-bg-deep i niz dolna krawedz zdjec podstron: roznica jest niedostrzegalna, wiec wtopienie kadru zostaje bezszwowe, a stopka siada o wlos nizej tonalnie. Tlo jest nieprzezroczyste celowo - warstwy `body::before/::after` leza pod stopka i maja byc zakryte. */ .band--deep { background-color: var(--c-bg-footer); } .band--line { border-bottom: 1px solid var(--c-border-soft); } /* Pozioma kreska oddzielajaca pasma - ten sam kolor i grubosc, co kreska pod naglowkiem podstrony, zeby na witrynie byl jeden rodzaj podzialu. Odstep gorny daje dopelnienie pasma powyzej; dolny trzeba dolozyc tutaj, bo nastepne pasmo ma zerowe dopelnienie od gory. */ .rule { width: 100%; height: 0; margin: 0 0 var(--sp-11); border: 0; border-top: 1px solid var(--c-border-soft); } /* Pasmo ze zdjeciem u gory; kadr wnosi sekcja przez `--band-photo`. `100% auto` z kotwica u gory: nic nie jest przyciete w poziomie, a wysokosc nie zalezy od wysokosci pasma, wiec rozwiniecie FAQ nie skaluje tla. NIE uzywamy `background-attachment: fixed` - zmierzone, mediana klatki 31,7 ms zamiast 16,7 ms. Wtopienie w kolor pasma jest wypalone w pliku: gradient w CSS musialby zgadywac, gdzie konczy sie zdjecie, a to zalezy od szerokosci okna. */ .band--photo { background-color: var(--c-bg-deep); } /* Zdjecie i cien styku siedza na OSOBNEJ warstwie, nie na tle pasma. Otwarcie pytania FAQ zmienia wysokosc pasma, a to uniewaznialoby malowanie tla i cienia na calej wysokosci - zmierzone: p90 klatki 22,7 ms, po zdjeciu 17,1 ms. Ta warstwa liczy wysokosc z proporcji obrazu, wiec zalezy tylko od szerokosci okna. `::after`, bo `::before` jest w FAQ zajete przez poswiate krawedzi. */ .band--photo::after { content: ''; position: absolute; inset: 0 0 auto; z-index: -1; aspect-ratio: var(--band-photo-ratio, 2.6); background-image: var(--band-photo); background-size: 100% 100%; background-repeat: no-repeat; box-shadow: var(--shadow-panel); pointer-events: none; } .page-main { position: relative; z-index: var(--z-content); flex: 1 1 auto; width: 100%; } .skip-link { position: absolute; left: -100vw; top: 0; z-index: var(--z-drawer); padding: var(--sp-3) var(--sp-4); background: var(--c-accent-vivid); color: var(--c-on-accent); font-weight: 700; } .skip-link:focus { left: var(--sp-3); top: var(--sp-3); } /* Tekst wylacznie dla czytnika ekranu - nazwa dania w karuzeli, opis stanu przelacznika 3D. Widoczny uklad nie moze sie przez niego przesunac. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Ramka Google Tag Manager dla przegladarek bez JavaScriptu. Klasa zamiast atrybutu `style` z fragmentu Google, bo wyglad stoi w tym projekcie wylacznie w arkuszu. `display: none` nie wstrzymuje ladowania ramki - licznik dziala. */ .gtm-noscript { display: none; visibility: hidden; } /* ========================================================================== 4. PRELOADER ========================================================================== Przeniesiony 1:1 z szablonu 3DMenu; zmieniamy tylko kolory na tokeny tego projektu. Zaslona znika dopiero, gdy zejda fonty i grafika (patrz Preloader w components.js). ========================================================================== */ #preloader { position: fixed; inset: 0; z-index: var(--z-preloader); display: flex; align-items: center; justify-content: center; background-color: var(--c-bg); transition: opacity var(--t-preloader) ease, visibility var(--t-preloader) ease; } #preloader.is-hidden { opacity: 0; visibility: hidden; } /* Podstrona otwarta z linku, czyli bez zaslony. Klase dokłada skrypt w - JESZCZE PRZED pierwszym malowaniem, wiec zaslona nie zdazy mignac. `display: none`, a nie `opacity`, bo tu nie ma czego animowac: zaslony w ogole nie ma byc. */ .bez-zaslony #preloader { display: none; } /* --- Miekkie wejscie strony bez zaslony ---------------------------------- Bez zaslony zdjecie tla wskakuje w gotowy uklad pol sekundy po tekscie. Zamiast skoku dajemy przenikanie: tlo i maskotka startuja przezroczyste i wchodza, gdy ich pliki sa gotowe (klasy dokłada Preloader.softIntro). Tekst nie czeka na nic. Bez JS klasa nie powstaje i nic nie jest ukrywane. */ body::before { transition: opacity var(--t-intro) ease; } .bez-zaslony body::before { opacity: 0; } .bez-zaslony.tlo-gotowe body::before { opacity: 1; } .bez-zaslony .robot__img, .bez-zaslony .faq__robot img { opacity: 0; transition: opacity var(--t-intro) ease; } .bez-zaslony .robot__img.is-ready, .bez-zaslony .faq__robot img.is-ready { opacity: 1; } .preloader__wrapper { position: relative; z-index: 10; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding-inline: var(--sp-7); } .preloader__logo-box { position: relative; width: 70%; max-width: 15.625rem; margin-inline: auto; } .preloader__logo { display: block; width: 100%; height: auto; object-fit: contain; } .preloader__glow { position: absolute; top: 50%; left: 50%; z-index: -1; width: 300%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at center, var(--c-glow-logo) 0%, rgba(var(--rgb-bg), 0) 65%); pointer-events: none; } /* Srodek orbity. Czastki wstawia JS - kazda dostaje wlasny promien, kat i czas przez custom properties (jedyne dopuszczalne uzycie atrybutu `style`, bo to wartosci losowane przy starcie, nie stale projektu). */ .orbit-center { position: absolute; top: 50%; left: 12%; width: 0; height: 0; z-index: 5; } /* Zmienne --spin-*, --pulse-delay, --scatter, --wobble-* i --base-radius ustawia JS przy tworzeniu czastki (wartosci losowane, wiec nie da sie ich zapisac w arkuszu). Kazde uzycie ma wartosc zapasowa: gdyby skrypt nie zdazyl, czastki maja wygladac poprawnie, a nie zniknac z powodu nierozwiazanej zmiennej. */ .particle-spin { position: absolute; top: 0; left: 0; width: 0; height: 0; animation: spin linear infinite; animation-duration: var(--spin-duration, 6s); } .particle-pulse { position: absolute; top: 0; left: 0; width: 0; height: 0; /* Rozrzut jako UŁAMEK promienia, nie jako piksele. Powod jest zmierzony: --base-radius przelicza sie przy kazdej zmianie szerokosci okna (Preloader.trackLogoSize), a rozrzut i drganie byly wpisywane raz, przy tworzeniu kropki. W podgladzie responsywnym przegladarki zostawaly wiec wartosci z pierwszego wczytania i chmurka nie schodzila razem z orbita (zgloszenie wlasciciela). Ulamek skaluje sie sam, bo liczy sie od promienia, ktory juz jest aktualny. */ --radius: calc(var(--base-radius, 2.1875rem) * (1 + var(--scatter-f, 0))); --inner-radius: calc(var(--radius) * 0.3); transform: translateX(var(--radius)); animation: pulse 2.5s infinite; animation-delay: var(--pulse-delay, 0s); } /* Amplituda drgania tez jest ULAMKIEM promienia - patrz komentarz przy --radius wyzej. Dzieki temu kropka drga proporcjonalnie do swojej orbity i nie trzeba jej przeliczac przy zmianie szerokosci okna. */ .particle { --wobble: calc(var(--base-radius, 2.1875rem) * var(--wobble-f, 0.2)); position: absolute; top: 50%; left: 50%; border-radius: 50%; box-shadow: 0 0 6px var(--c-particle-shadow); opacity: 0; filter: saturate(1.9) brightness(1.2); animation: wobble ease-in-out infinite alternate, appear 0.8s ease-out forwards; animation-duration: var(--wobble-duration, 1.2s), 0.8s; animation-delay: 0s, var(--pulse-delay, 0s); will-change: transform, opacity; } /* ========================================================================== 5. ANIMACJE ========================================================================== */ /* --- Preloader (przeniesione z szablonu 3DMenu bez zmian) ----------------- */ @keyframes appear { from { opacity: 0; transform: translate(-50%, -50%) scale(0); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } @keyframes spin { from { transform: rotate(var(--start-angle, 0deg)); } to { transform: rotate(calc(var(--start-angle, 0deg) + var(--spin-angle, 360deg))); } } @keyframes pulse { 0%, 65% { transform: translateX(var(--radius)); animation-timing-function: cubic-bezier(0.5, 0, 1, 1); } 75% { transform: translateX(var(--inner-radius)); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } 90%, 100% { transform: translateX(var(--radius)); } } @keyframes wobble { from { transform: translate(calc(-50% - var(--wobble)), calc(-50% - var(--wobble))); } to { transform: translate(calc(-50% + var(--wobble)), calc(-50% + var(--wobble))); } } /* TRZY osie na raz (X+Y+Z), nie dwie - z samym X+Y kostka co 1/4 obrotu (co 750 ms w 3-sekundowej petli) przechodzi przez ustawienie plaskie wzgledem kamery i przez ulamek sekundy wyglada jak kwadrat, nie bryla. Trzecia os rozbija ta symetrie - dokladna kopia @keyframes spinCube z 3dmenu/static/v1/css/main.css. */ @keyframes spinCube { 0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } 100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); } } @keyframes robotFloat { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-0.6deg); } 50% { transform: translate3d(0, calc(var(--lift-robot) * -1), 0) rotate(0.6deg); } } /* Mikrodrgania nalozone na unoszenie - robot ma wygladac na zawieszony na silnikach, nie na plynacy. Kroki co 9%, zeby ruch byl skokowy, nie plynny. */ @keyframes robotJitter { 0% { transform: translate3d(0, 0, 0); } 9% { transform: translate3d(calc(var(--jitter-robot) * -1), calc(var(--jitter-robot) * 0.5), 0); } 18% { transform: translate3d(calc(var(--jitter-robot) * 0.5), calc(var(--jitter-robot) * -1), 0); } 27% { transform: translate3d(calc(var(--jitter-robot) * 1), calc(var(--jitter-robot) * 0.5), 0); } 36% { transform: translate3d(calc(var(--jitter-robot) * -0.5), calc(var(--jitter-robot) * -0.5), 0); } 45% { transform: translate3d(calc(var(--jitter-robot) * 0.5), calc(var(--jitter-robot) * 1), 0); } 54% { transform: translate3d(calc(var(--jitter-robot) * -1), calc(var(--jitter-robot) * -0.5), 0); } 63% { transform: translate3d(calc(var(--jitter-robot) * 1), calc(var(--jitter-robot) * -1), 0); } 72% { transform: translate3d(calc(var(--jitter-robot) * -0.5), calc(var(--jitter-robot) * 1), 0); } 81% { transform: translate3d(calc(var(--jitter-robot) * 0.5), calc(var(--jitter-robot) * -0.5), 0); } 90% { transform: translate3d(calc(var(--jitter-robot) * -1), calc(var(--jitter-robot) * 0.5), 0); } 100% { transform: translate3d(0, 0, 0); } } /* Pulsowanie poswiaty. Cien jest STALY i siedzi na pseudoelemencie, a pulsuje wylacznie jego `opacity` i `transform` - jedyna para, ktora kompozytor obsluguje bez przemalowania. Animowany wprost `box-shadow` kosztowal zmierzone 32,6 ms na klatke zamiast 23,6 ms. */ @keyframes glowPulse { 0%, 100% { opacity: 0.55; transform: scale(0.99); } 50% { opacity: 1; transform: scale(1); } } /* Wjazd kola z sekcji "proof". Krycie wchodzi w pierwszej cwiartce lotu, zeby bylo widac LECACY obiekt, a nie przenikajaca plame - o to wlasnie chodzi w tym efekcie. Dalej lot, delikatny przestrzal i spokojny dryf na miejsce. */ /* Wejscie kafelkow na TELEFONIE: krotki dojazd z prawej plus przenikanie, bez przestrzelenia. Na szerokim ekranie kola nadlatuja z daleka i odbicie jest tam istota efektu; w kolumnie kafelki stoja jeden pod drugim, ta sama animacja czytala sie jako szarpniecie (zgloszenie wlasciciela: "moga sie pojawiac lagodniej"). */ @keyframes revealSoft { from { opacity: 0; transform: translateX(var(--reveal-slot)); } to { opacity: 1; transform: none; } } @keyframes revealSlide { 0% { opacity: 0; transform: translateX(calc(var(--reveal-slot) * var(--reveal-steps))); } /* Krycie MUSI byc podane takze w OSTATNIEJ klatce. Gdy go tam nie ma, animacja interpoluje je z powrotem do wartosci spod spodu - a ta wynosi zero - i kolo gasnie w locie zamiast wyladowac. Zmierzone na tym bledzie: krycie 0,99 na 180 ms, 0,47 na 300 ms, 0,11 na 900 ms. */ 25% { opacity: 1; } /* Koniec lotu: kolo jest juz 20 px ZA swoim miejscem. Stad dalej wraca druga krzywa, bo inaczej dojscie mialoby ten sam gwaltowny charakter, co lot, i przestrzal czytalby sie jak drganie. */ /* Szczyt przestrzalu. Reszta osi (30 %) idzie juz na spokojny powrot - patrz --ease-reveal-back. */ 70% { transform: translateX(var(--reveal-overshoot)); animation-timing-function: var(--ease-reveal-back); } 100% { opacity: 1; transform: translateX(0); } } @keyframes ringCW { to { transform: rotate(360deg); } } @keyframes ringCCW { to { transform: rotate(-360deg); } } /* ========================================================================== 6. PRZYCISKI I PIGULKI ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3); border: 1px solid transparent; border-radius: var(--r-pill); font-weight: 600; text-align: center; white-space: nowrap; transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } /* Pelne zielone tlo - jedyny przycisk tego rodzaju w naglowku. */ .btn--solid { padding: 0.65625rem 1.25rem; background: var(--c-accent-vivid); border-color: var(--c-accent-vivid); color: var(--c-on-accent); font-size: var(--fs-label); font-weight: 800; letter-spacing: var(--ls-cta); text-transform: uppercase; box-shadow: var(--shadow-cta); } .btn--solid:hover, .btn--solid:focus-visible { filter: brightness(1.1); color: var(--c-on-accent); } /* Obrys - podstawowy przycisk tresci. */ .btn--ghost { padding: 0.9375rem var(--sp-7); background: transparent; border-color: var(--c-border-ghost); color: var(--c-text-strong); font-size: var(--fs-lead); } /* Jeden stan najechania dla wszystkich przyciskow obrysowanych - wczesniej byly dwa i roznica w reakcji na kursor byla juz tylko niekonsekwencja (zgloszenie wlasciciela). */ .btn--ghost:hover, .btn--ghost:focus-visible { border-color: var(--c-accent-soft); background: var(--c-fill-ghost); color: var(--c-text-strong); box-shadow: var(--shadow-ring); } /* Dwa przyciski hero maja rowna szerokosc niezaleznie od dlugosci etykiety - inaczej "Zobacz oferte" i "Porozmawiajmy" tworza schodek. Klasa siedzi wylacznie na tej parze, wiec sluzy tez za zaczep dla welonu pod etykieta - pozostale przyciski obrysowane stoja na spokojnym tle i go nie potrzebuja. */ .btn--fixed { width: 13.25rem; padding-inline: 0; background-color: var(--c-fill-btn-hero); border-color: var(--c-border-btn-hero); } /* Welon zostaje takze po najechaniu. Wspolna regula `.btn--ghost:hover` ustawia `background` skrotem, wiec skasowalaby kolor tla - dlatego wypelnienie stanu wchodzi tu jako WARSTWA OBRAZU nad welonem, a nie zamiast niego. Ciemnej poswiaty w spoczynku NIE MA - probowalismy jej w kilku szerokosciach rozmycia (24, 30, 60 i 100 px) i wlasciciel zdecydowal, ze przyciski maja stac na samym welonie. Przywrocenie to jedna linia `box-shadow` wyzej. */ .btn--ghost.btn--fixed:hover, .btn--ghost.btn--fixed:focus-visible { background-color: var(--c-fill-btn-hero); background-image: linear-gradient(var(--c-fill-ghost), var(--c-fill-ghost)); } .btn--block { width: 100%; } .btn--wide { padding: 0.9375rem 1.875rem; font-weight: 500; } /* Ikona w przycisku. Zielona NIEZALEZNIE od koloru etykiety: przyciski obrysowane maja tekst bialawy (--c-text-strong), a ikona ma byc akcentem, a nie druga plama tego samego koloru. `flex: 0 0 auto`, zeby nie zwezala sie przy dlugiej etykiecie, i lekko opuszczona optycznie - kwadratowy znak przy tekscie z dlugimi ogonkami czyta sie inaczej niz przy wersalikach. */ .btn__icon { flex: 0 0 auto; color: var(--c-accent-vivid); transition: color var(--t-fast) var(--ease); } /* Na najechaniu ikona idzie razem z obrysem - inaczej zostawalaby ciemniejsza od reszty przycisku. */ .btn:hover .btn__icon, .btn:focus-visible .btn__icon { color: var(--c-accent-lit); } /* Wariant .btn--cta (pelne zielone tlo, wersaliki, pulsujaca poswiata) oraz otaczajacy go pierscien .cta-ring zostaly usuniete. Wlasciciel ujednolicil przyciski: wdrozenie i formularz kontaktu uzywaja teraz tego samego stylu, co "Wybierz plan" w cenniku, czyli .btn--ghost. Poswiata `glowPulse` zyje dalej przy karcie polecanego pakietu. */ /* Nadkreslenie sekcji: "OFERTA", "FAQ", "KONTAKT BEZPOSREDNI". */ .eyebrow { margin: 0 0 var(--sp-4); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--ls-eyebrow); color: var(--c-accent); } .eyebrow--strong { font-weight: 700; letter-spacing: var(--ls-label); color: var(--c-accent-vivid); } /* ========================================================================== 7. NAGLOWEK I NAWIGACJA ========================================================================== */ /* Bez kreski u dolu - decyzja wlasciciela. Naglowek oddziela od tresci sam kolor tla, a tam, gdzie pod nim zaczyna sie zdjecie, jego gorna krawedz. */ /* PODGLAD: naglowek jedzie razem z trescia. Wymaga wlasnej warstwy NAD maskotka (--z-header > --z-robot) - pasmo naglowka podstrony jest celowo podniesione, zeby maskotka mogla z niego wystawac, wiec przy przewijaniu wjezdzalaby na belke. */ .site-header { position: sticky; top: 0; z-index: var(--z-header); background: var(--c-bg); box-shadow: var(--glow-header); } .site-header__inner { /* Kotwica dla listy jezykow: na szerokim ekranie zwisa ona spod paska, rownana PRAWA krawedzia do marginesu tresci - tak samo, jak w aplikacji 3DMenu, gdzie lista po prawej stronie idzie do linii koszyka, a nie pod sam glob. */ position: relative; display: flex; align-items: center; gap: var(--sp-5); padding-block: var(--header-pad-y); } .brand { flex: 0 0 auto; display: flex; align-items: center; } .brand__logo { height: var(--logo-h); width: auto; } .site-nav { flex: 1 1 auto; min-width: 0; } .site-nav__list { display: flex; justify-content: center; gap: 2px; } .site-nav__link { display: block; padding: 0.5625rem clamp(0.5rem, 1vw, 1rem); border-radius: var(--r-pill); font-size: var(--fs-nav); font-weight: 600; white-space: nowrap; color: var(--c-text-nav); } .site-nav__link:hover, .site-nav__link:focus-visible { color: var(--c-text); } .site-nav__link.is-active, .site-nav__link[aria-current] { font-weight: 700; color: var(--c-accent-vivid); text-shadow: var(--shadow-nav); } .site-header__side { flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-3); } /* Dwa okragle przyciski paska: hamburger po lewej i jezyki po prawej. Oba widoczne dopiero ponizej progu szuflady (sekcja 16) i oba w JEDNEJ regule - maja byc identyczne z definicji, a nie przez powtorzone wartosci. Rozmiar to --tap-min, czyli dokladnie szerokosc bocznych kolumn paska na telefonie: kolka stoja wtedy symetrycznie wzgledem logo na srodku. */ .nav-toggle, .lang-btn { display: none; width: var(--tap-min); height: var(--tap-min); padding: 0; background: transparent; border: 1px solid var(--c-border-mid); border-radius: var(--r-pill); color: var(--c-text); } /* Na SZEROKIM ekranie glob nie jest kolkiem, tylko pigulka: glob, skrot jezyka i strzalka w jednym rzedzie, bez obramowania - dokladnie jak w pasku aplikacji 3DMenu (wskazanie wlasciciela). Kolko z reguly wyzej zostaje telefonowi; tam pasek ma miec dwa jednakowe kolka po bokach znaku. `order` zamiast przenoszenia w markupie: pigulka ma stanac PRZED przyciskiem demo, ale w gridzie telefonu jest bezposrednim dzieckiem paska i to on sadza ja w trzeciej kolumnie. Dziecko `.site-header__side` nie moglo by tego zrobic, bo grid-area dziala tylko na bezposrednich dzieciach. */ .lang-btn { display: flex; align-items: center; gap: var(--lang-pill-gap); width: auto; height: var(--lang-pill-h); padding-inline: var(--sp-1); border: 0; color: var(--c-text-80); font-size: var(--fs-sm); font-weight: 600; order: 1; /* Pasek daje wlasny odstep (--sp-5), a od przycisku demo ma byc 17 px. */ margin-right: calc(var(--lang-pill-cta) - var(--sp-5)); } .site-header__side { order: 2; } /* Pod wskaznikiem cala pigulka - glob, skrot i strzalka - bierze zielen marki. Bez poswiaty: w aplikacji wlasciciel kazal zdjac text-shadow i drop-shadow. */ @media (hover: hover) and (pointer: fine) { .lang-btn:hover { color: var(--c-accent-vivid); } } .lang-btn__code { line-height: 1; } .lang-btn__caret { display: block; width: var(--lang-caret); height: var(--lang-caret); transition: transform var(--t-caret) var(--ease-caret); } /* Strzalka obraca sie z otwarciem listy. Stan bierzemy z `aria-expanded`, ktory skrypt i tak ustawia - nie ma po co dokladac drugiej klasy ani ruszac stylu z JS (arkusz jest jedynym miejscem na wyglad). */ .lang-btn[aria-expanded="true"] .lang-btn__caret { transform: rotate(180deg); } /* Glob rysowany jest sama kreska grubosci 1,4 px, wiec przy rownym rozmiarze z hamburgerem (18 px, kreski 2 px) wygladal na mniejszy - to roznica masy znaku, nie wymiaru. Stad 26 px: pole rysunku jest wieksze, ale ilosc tuszu w kolku zgadza sie z lewa strona. Droga do tej liczby: 20 px wygladalo na mniejsze od hamburgera, 24 px juz prawie dobrze, a wlasciciel poprosil o jeszcze piksel na promieniu - czyli dwa na srednicy. */ .lang-btn__icon { display: block; /* W pigulce glob ma 1,3 rem - tyle, co .ico-lang-svg w pasku aplikacji. Na telefonie urasta do 26 px (media query nizej): tam stoi sam w kolku i musi wazyc tyle, co hamburger po drugiej stronie logo. */ width: 1.3rem; height: 1.3rem; flex-shrink: 0; margin-inline: auto; } .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; width: 1.125rem; height: 2px; margin-inline: auto; background: currentColor; border-radius: 2px; transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); } .nav-toggle__bars { position: relative; } .nav-toggle__bars::before, .nav-toggle__bars::after { content: ''; position: absolute; left: 0; } .nav-toggle__bars::before { top: -0.375rem; } .nav-toggle__bars::after { top: 0.375rem; } .nav-toggle[aria-expanded='true'] .nav-toggle__bars { background: transparent; } .nav-toggle[aria-expanded='true'] .nav-toggle__bars::before { transform: translateY(0.375rem) rotate(45deg); } .nav-toggle[aria-expanded='true'] .nav-toggle__bars::after { transform: translateY(-0.375rem) rotate(-45deg); } .site-nav__cta { display: none; } /* --- Szuflada nawigacji --------------------------------------------------- Nawigacja ponizej progu z sekcji 16 przestaje byc rzedem w belce i staje sie panelem wjezdzajacym z lewej - ten sam ruch, co szuflada w aplikacji 3DMenu. Pasek szuflady i zaslona pod nia sa w markupie na kazdej szerokosci (buduje je Navigation w components.js), ale sens maja tylko w ukladzie szuflady, wiec na szerokim ekranie schodza z drogi. Uklad i ruch panelu opisuje sekcja 16 - tutaj zostaje wylacznie wyglad krzyzyka, ktory z progiem nie ma nic wspolnego. */ .site-nav__head, .site-nav__overlay { display: none; } /* Lista jezykow na SZEROKIM ekranie: zwisa spod paska, rownana prawa krawedzia do marginesu tresci (kotwica siedzi na .site-header__inner). Tak samo idzie lista po prawej stronie w pasku aplikacji 3DMenu - do linii koszyka, a nie pod sam glob. Uklad telefonu opisuje sekcja 16; tam panel jest `fixed` i wjezdza na srodku ekranu, wiec ta regula go nie dotyczy. Rozmycie tla WLACZA SIE DOPIERO w stanie otwartym - ta sama zasada, co przy szufladzie: `backdrop-filter` trzyma wlasna warstwe kompozytora takze na elemencie niewidocznym, a lista wisi w drzewie przez cala wizyte. */ .lang-menu { position: absolute; top: 100%; /* Do LINII TRESCI, nie do krawedzi okna: przyleganie liczy sie od padding-boxa paska, a ten ma po bokach dopelnienie kontenera, wiec "0" wypuszczalo liste 48 px za prawa krawedz przycisku demo. Zmienna, a nie liczba - dopelnienie kontenera zwe sie na wezszych ekranach. */ right: var(--container-pad); z-index: var(--z-drawer); display: flex; flex-direction: column; gap: var(--sp-1); min-width: var(--lang-menu-w); margin-top: var(--lang-menu-drop); padding: var(--sp-2); border: 1px solid var(--c-lang-border); border-radius: 1.25rem; box-shadow: var(--shadow-lang); visibility: hidden; opacity: 0; transform: translateY(calc(-1 * var(--lang-menu-shift))); transition: transform var(--t-lang-out) ease-in, opacity var(--t-lang-out) ease-in, visibility 0s linear var(--t-lang-out); } .lang-menu.is-open { visibility: visible; opacity: 1; transform: translateY(0); backdrop-filter: blur(16px) brightness(1.25); -webkit-backdrop-filter: blur(16px) brightness(1.25); transition: transform var(--t-lang-in) var(--ease-lang), opacity var(--t-fast) ease-out, visibility 0s linear 0s; } /* Zaslona pod lista ma sens tylko w ukladzie telefonu (przykrywa cala strone i lapie klikniecie obok). Na szerokim ekranie klikniecie obok obsluguje ten sam element, ale bez zaciemnienia - lista jest maly panel przy pasku, a nie okno nad strona. */ .lang-menu__overlay { position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1); background: transparent; visibility: hidden; } .lang-menu__overlay.is-open { visibility: visible; } /* --- Lista jezykow -------------------------------------------------------- Zjezdza spod paska po kliknieciu globu, na tej samej zasadzie, co w wersji mobilnej aplikacji: panel nad strona, zaslona pod nim, wybor jezyka albo klikniecie obok zamyka. Uklad i ruch opisuje sekcja 16 - tutaj zostaje wyglad samych pozycji, bo z progiem nie ma nic wspolnego. Ramka, tlo i cien sa DOKLADNIE takie, jak w oknie modalnym (sekcja 20): to jedyne dwa panele tej witryny, ktore staja nad przyciemniona strona, wiec maja wygladac jak jedna rodzina. */ /* Pozycje listy - wymiary i stopien pisma wprost z `.lang-option` w aplikacji: 12/20 px dopelnienia, promien 12 px, 1,05rem pisma o grubosci 500. Krojem zostaje nasz Inter, a jezyk biezacy i stan pod palcem swieca zloto - tak samo jak tam, tyle ze naszym zlotem (--c-gold zamiast #facc15). */ .lang-menu__item { /* Bez zaznaczania tekstu i bez niebieskiego blysku pod palcem. Dotkniecie pozycji na telefonie podswietlalo ja jak zaznaczony tekst - a to jest pozycja do wybrania, nie akapit (zgloszenie wlasciciela). Od 2026-09-10 pozycja jest odnosnikiem , a nie