/* ============================================================ HERO – KONFIGURACJA TIMINGÓW ANIMACJI ------------------------------------------------------------ To jest JEDYNE miejsce gdzie żyją wartości czasów animacji sekcji hero. Edytuj tutaj, restart, zobacz zmianę. Wszystkie reguły CSS w Home.razor.css używają var(--hero-...). Splash hook delay (opóźnienie zanim splashHooks doda .animate na bullety) NIE jest tutaj — on jest w C# w Home.razor, w OnAfterRenderAsync, w wywołaniu addClassOnSplashFadeStart. ============================================================ */ :root { /* === Bullety (animacja slideInRight w hero__list) === */ --hero-bullet-difference: 0.6s; /* różnica delay między kolejnymi bulletami */ --hero-bullet-1-delay: 0.2s; --hero-bullet-2-delay: calc(var(--hero-bullet-1-delay) + var(--hero-bullet-difference)); --hero-bullet-3-delay: calc(var(--hero-bullet-2-delay) + var(--hero-bullet-difference)); --hero-bullet-duration: 0.8s; --hero-bullet-ease: cubic-bezier(0.15, 0.65, 0.35, 1); /* === Mini-kalkulator (fade-in po ostatnim bullecie) === */ /* delay liczony od momentu dodania .animate do hero__list. Bullet 3 kończy się o (--hero-bullet-3-delay + --hero-bullet-duration). Daj większą wartość żeby był odstęp między bulletem a inputami. */ --hero-input-delay: calc(var(--hero-bullet-3-delay) + 0.65s); --hero-input-duration: 1s; /* === Mockup monitora (fade-in razem z inputami) === */ --hero-mockup-delay: var(--hero-input-delay); --hero-mockup-duration: 2s; /* === CTA (Zobacz demo / Zobacz cennik / Zobacz opinie...) === */ /* domyślnie razem z inputami — zmień jeśli chcesz lekko po nich */ --hero-cta-delay: var(--hero-input-delay); --hero-cta-duration: 1s; /* === Wspólny easing dla fade-in (mini-calc, mockup, CTA) === */ --hero-fadein-ease: ease; /* ======================================================== TYPOGRAFIA – LOGO "DXFManager" w hero -------------------------------------------------------- Edytuj rozmiar całości tutaj. Stosunek "DXF" vs "Manager" jest niezależnie stały — DXF zawsze X razy większy niż Manager, kontrolowane przez --hero-brand-dxf-ratio. ======================================================== */ /* Wielkość całego logo (responsywna clamp: min, preferred (vw), max) */ --hero-brand-size-min: 32px; /* na bardzo wąskich ekranach */ --hero-brand-size-preferred: 3.8vw; /* skaluje się z viewportem */ --hero-brand-size-max: 50px; /* górny limit */ /* Stosunek wielkości "DXF" do "Manager" — stała, ratio zostaje proporcjonalne niezależnie od --hero-brand-size-*. 1.0 = równe, 1.1 = DXF 10% większe, 1.5 = znacznie większe. */ --hero-brand-dxf-ratio: 1.1; /* ======================================================== COLLAPSIBLE SECTIONS – animacja open/close -------------------------------------------------------- Sterowane przez JS (collapsibleAnimation.js), który czyta te zmienne z getComputedStyle. Możesz edytować live. ======================================================== */ --collapsible-duration: 300ms; --collapsible-easing: cubic-bezier(.2, .8, .25, 1); /* ======================================================== HERO COUNTER – licznik "360 h" w pierwszym bullecie -------------------------------------------------------- initial: count-up od 0 przy pierwszym renderze (długi, miękki) update: zmiana przy edycji inputu w mini-kalkulatorze (krótszy) Easing wbudowany w heroCounter.js (easeOutQuart — miękki finisz). ======================================================== */ --hero-counter-initial-duration: 3000ms; --hero-counter-update-duration: 550ms; /* Tempo wyhamowywania — wykładnik w funkcji `1 - (1-t)^power`. Wyższa wartość = bardziej dramatyczne zwolnienie pod koniec (front-loaded animation). 2 = miękko/quad, 3 = cubic, 4 = quart, 5 = quint (bardzo zauważalny "glide"), 6+ = niemal asymptotyczne. Sweet spot 3-5. */ --hero-counter-ease-power: 3; /* Uwaga: counter (mode=initial) sam synchronizuje START z momentem pojawienia się bullet 1 (animationstart event w heroCounter.js). Na refresh (.seen na hero__list) start jest natychmiastowy — delay=0. Nie ma osobnego CSS var na start-delay, bo to event-driven. */ /* ======================================================== MOCKUP – PRZYCIEMNIENIE LEWEJ STRONY (text-scrim) -------------------------------------------------------- Lewa część mockupa zachodzi za tekst hero. Tutaj kontrolujesz jak mocno ciemnieje tylko ta część, żeby tekst miał kontrast. Prawa strona mockupa zostaje w pełnej jasności. ======================================================== */ /* Maksymalna nieprzezroczystość ciemnego overlay (lewa krawędź mockupa). 0 = brak przyciemnienia, 1 = czarna ściana. Sweet spot ~.55–.75 */ --hero-mockup-scrim-strength: 0.7; /* Gdzie ciemny scrim ma zaniknąć (% od lewej krawędzi mockupa). Mniejsza wartość = scrim tylko bardzo wąsko po lewej. Większa wartość = dłużej fade, ciemne pole sięga bardziej w prawo. */ --hero-mockup-scrim-end: 55%; /* ======================================================== MOCKUP – "ODDECH" (float + pulsująca poświata) -------------------------------------------------------- Ciągłe, subtelne animacje mockupa monitora. Desktop-only, wyłączane przy prefers-reduced-motion. Edytuj tutaj. ======================================================== */ /* Float: o ile pikseli mockup unosi się góra-dół. */ --hero-mockup-float-distance: 5px; /* Czas pełnego cyklu unoszenia (góra->dół->góra). Wolniej = spokojniej. */ --hero-mockup-float-duration: 10.5s; /* Czas pełnego cyklu pulsowania neonowej poświaty. */ --hero-mockup-glow-duration: 5s; /* ======================================================== MOCKUP – PARALLAX 3D (reakcja na kursor) -------------------------------------------------------- Sterowane przez heroParallax.js — czyta te zmienne przez getComputedStyle przy starcie strony. Edytuj tutaj, restart, zobacz zmianę. Parallax działa tylko na desktopie (hover + fine pointer) i jest wyłączany przy reduced-motion. MODEL: kursor w ŚRODKU mockupa => wszystkie kąty 0 (idealnie frontalnie: dół poziomo, bok pionowo). Kursor poza środkiem (lecz w mockupie) => lekkie kołysanie. Kursor poza mockupem => powrót do POZYCJI BAZOWEJ (kąty --hero-mockup-base-*). ======================================================== */ /* POZYCJA BAZOWA mockupa — pose gdy kursor jest poza nim (oraz gdy JS nieaktywny: touch / reduced-motion). To jest "spoczynkowa" perspektywa 3D mockupa. */ --hero-mockup-base-rotate-y: -12deg; /* obrót lewo/prawo */ --hero-mockup-base-rotate-x: 1deg; /* obrót góra/dół */ --hero-mockup-base-rotate-z: 0.5deg; /* przekoszenie w płaszczyźnie */ /* ROZMIAR BAZOWY mockupa — stały mnożnik skali (niezależny od powiększenia po najechaniu). Kompensuje wzrost rozmiaru po zmianie osi obrotu na środek: perspektywa wokół środka rzutuje mockup ~22% większy niż wokół prawej krawędzi. 0.82 przywraca rozmiar sprzed zmiany. 1 = bez kompensacji, mniej = mniejszy. */ --hero-mockup-base-scale: 0.82; /* CZUŁOŚĆ — jak daleko trzeba ruszyć myszą aby uzyskać pełne kołysanie. Steruje przełożeniem ruchu myszy na obrót (odniesienie = obszar mockupa): 1 = pełny wychył dopiero przy kursorze na krawędzi mockupa 2 = pełny wychył już w połowie drogi od środka (2x czulej, mniej ruchu myszą potrzeba) 0.5 = nawet na krawędzi mockupa tylko połowa wychyłu (trzeba przejechać myszą b. daleko, pełnego i tak brak) Wyższa wartość = mniej ruchu myszą potrzeba aby mockup zareagował. */ --hero-parallax-sensitivity: 1.3; /* KOŁYSANIE lewo/prawo (rotateY) — maks. wychył przy kursorze na krawędzi mockupa. W ŚRODKU mockupa wychył = 0 (pozycja frontalna). */ --hero-parallax-tilt-y: 6deg; /* KOŁYSANIE góra/dół (rotateX) — maks. wychył przy kursorze na krawędzi mockupa. W ŚRODKU mockupa wychył = 0 (pozycja frontalna). */ --hero-parallax-tilt-x: 2deg; /* POWIĘKSZENIE mockupa po najechaniu myszą. 1 = brak, 1.045 = +4.5%, 1.08 = +8%. */ --hero-parallax-hover-scale: 1.30; /* WYGŁADZANIE ruchu 0..1 — jak szybko mockup dogania kursor. Mniejsze = bardziej leniwy, "ciężki" ruch (dłuższy ogon). Większe = mockup sztywniej klei się do kursora. */ --hero-parallax-smoothing: 0.045; /* STREFA AKTYWNA — parallax reaguje tylko gdy kursor jest nad mockupem (a nie nad całą szerokością hero). Ta wartość powiększa obszar reakcji o ułamek rozmiaru mockupa: 0 = dokładnie obszar mockupa 0.15 = strefa o 15% większa z każdej strony (łagodniej) 0.5 = strefa znacznie większa niż sam mockup Poza tą strefą mockup wraca do pozycji bazowej. */ --hero-parallax-zone-expand: 0.15; }