/* LeadAgain — override layer on top of the Framer-generated site. Keep every hand-made style fix here so re-mirroring never clobbers it. */ /* Token koloru marki z szablonu (Hypersonic używał go jako indygo #6D7AFF). Framer wstawia go wszędzie jako var(--token-…, rgb(109,122,255)) Z FIOLETOWYM FALLBACKIEM — i warianty montowane dynamicznie (hover/current pigułki w nav) potrafiły złapać fallback zamiast wartości. Definicja na :root obejmuje każdy element, także portale — fiolet nie ma się skąd wziąć. */ :root { --token-35641045-2be1-4e3b-8711-76c08492eefe: #5EF2A6; } /* Pas bezpieczeństwa do powyższego: niektóre WARIANTY szablonu (hover/current pigułki w nav, shared-lib) mają fiolet zahardkodowany BEZ var() — token ich nie łapie. Źródło jest łatane w fix-site.mjs (krok 5); ta reguła łapie każdy nowy taki przypadek po ewentualnym ponownym mirrorze. */ [style*="--border-color: rgb(109, 122, 255)"] { --border-color: #5EF2A6 !important; } /* Navbar links inherited #1C1C1C text from the light template and sat invisible on the dark #1C1C1C pill. Scoped to that exact value so the white wordmark (#FFFFFF) and the dark-on-mint CTA (#111111) keep their own colours. */ nav [style*="--extracted-r6o4lv: rgb(28, 28, 28)"] { --extracted-r6o4lv: #c9c9c9 !important; } nav [style*="--extracted-r6o4lv: rgb(28, 28, 28)"]:hover { --extracted-r6o4lv: #ffffff !important; } /* Obwódka wokół klikniętego elementu navbaru NIE pochodzi z naszego arkusza — to domyślny pierścień fokusu przeglądarki, rysowany kolorem akcentu systemu (na Windows często fioletowym). Nadpisujemy go własnym w mięcie zamiast kasować: bez widocznego fokusu strona przestaje być obsługiwalna z klawiatury. :focus-visible, a nie :focus — ring pojawia się przy nawigacji klawiaturą, a nie po każdym kliknięciu myszą. */ :focus-visible { outline: 2px solid #5EF2A6 !important; outline-offset: 3px; /* Bez własnego border-radius: outline sam podąża za zaokrągleniem elementu, więc na pigułkach navbaru ring jest owalny, a na kartach kanciasty. */ } /* Link aktywnej sekcji: szablon dawał mu #111 — czarny tekst na czarnej pigułce, czyli znikał. Świeci teraz miętą, jak reszta stanów marki. */ nav [data-framer-page-link-current], nav .isCurrent a { --framer-link-current-text-color: #5EF2A6 !important; --extracted-r6o4lv: #5EF2A6 !important; color: #5EF2A6 !important; } /* Redukcja duplikatów CTA (audyt 2026-08-18: 7 wejść do #kalendarz, w tym trzy w obrębie dwóch ekranów przed samą sekcją kalendarza). Zasada: jedno wejście na strefę decyzji. Zostają: hero, karta bento, Final CTA (+ stały navbar). Wypadają: CTA w „Jak zaczynamy" (bento z przyciskiem jest zaraz pod nim) i CTA na końcu FAQ (456 px nad Final CTA z identycznym przyciskiem). Ukrywamy CAŁY blok CTA, nie sam link: w FAQ przycisk i microcopy siedzą we wspólnym „Container" (kolumna, align-items: center), a microcopy ma szerokość procentową. Po ukryciu samego kontener tracił jedyne dziecko o szerokości własnej, zjeżdżał do ~13 px i „Bez zobowiązań" łamało się po jednej literze w pionie. Bez przycisku to microcopy i tak nie ma sensu. */ section[data-framer-name="About section"] a[href$="#kalendarz"], section[data-framer-name="FAQ"] [data-framer-name="Container"]:has(a[href$="#kalendarz"]) { display: none !important; } /* Po ukryciu przycisku została sama karta z nagłówkiem „Sprawdźmy, ile wzrostu ucieka…" — a sekcja Final CTA zaraz pod nią ma DOSŁOWNIE ten sam nagłówek (prośba usera 2026-08-18): znika cała karta, nie tylko jej przycisk. */ section[data-framer-name="FAQ"] [data-framer-name="Desktop & Tablet"]:has(a[href$="#kalendarz"]) { display: none !important; } /* Scroll-spy (klasę nadaje leadagain-enhance.js): miętowy obrys pigułki na linku sekcji, w której użytkownik aktualnie jest. Padding daje pigułce oddech, a ujemny margines go kompensuje — linki obok nie przesuwają się ani o piksel przy zmianie aktywnej sekcji. */ /* Aktywna sekcja podświetla DOKŁADNIE tę pigułkę, której Framer używa na hover: element [data-border] (button) opakowujący link, 43 px wysokości, radius 50. Wcześniej rysowaliśmy własny obrys (inset box-shadow) na samym — węższy i niżej osadzony niż pigułka Framera — więc na hoverze aktywnej pozycji były widoczne DWA pierścienie, a „aktywny" miał inną geometrię niż „hover". Teraz oba stany to ta sama ramka, tak samo dla każdej sekcji. */ /* Jedno źródło prawdy dla ringów navbara: scroll-spy. Wariant „wybrany" Framera (zostaje po kliknięciu na stałe) jest wyciszony — bieżąca sekcja dostaje miętę, hover delikatną biel, nic nie zostaje po kliknięciu. */ nav [data-framer-name="Navigation items"] button { --border-color: transparent !important; } nav [data-framer-name="Navigation items"] button:hover { --border-color: rgba(255, 255, 255, .25) !important; } nav [data-framer-name="Navigation items"] button:has(a.la-nav-current) { --border-color: #5EF2A6 !important; } nav a.la-nav-current p { --extracted-r6o4lv: #ffffff !important; } /* Znak stał 10 px od krawędzi pigułki — dokładnie tyle, ile wynosi jej padding, więc nie miał żadnego oddechu. CTA po prawej może stać tak blisko, bo ma własne wypełnienie tworzące krawędź; goły znak nie ma nic. 16 px marginesu daje 26 px optycznego wcięcia, porównywalnego z tym, jak głęboko od krawędzi pigułki zaczyna się napis w CTA. */ nav [data-framer-name="[LOGO]"] { margin-left: 16px !important; } /* --------------------------------------------------------------------------- Pełna szerokość zamiast „trybu kinowego". Szablon capował sekcje na max-width: 1440px, więc na szerokim ekranie strona siedziała wyśrodkowana w szarym tle body (#1c1c1c) z pasami po bokach. Zdejmujemy limit — i osobno uwalniamy kontenery treści, bo szablon miał je przybite na sztywne width: 1360px (= 1440 minus 2×40 paddingu), więc samo poszerzenie sekcji zostawiłoby treść w starym słupku. */ #main section { max-width: none !important; } /* Sekcje kolumnowe: kontener treści wypełnia sekcję. Wyjątki: dekoracyjne poświaty (absolutne, mają własne rozmiary) oraz karta Final CTA — ma zostać wyśrodkowanym blokiem, a nie pasem przez cały ekran. */ #main section:not([data-framer-name="Formularz callback"]):not([data-framer-name="Kalendarz"]):not([data-framer-name="Final CTA"]) > div:not([data-framer-name*="glow"]) { width: 100% !important; max-width: none !important; } /* Sekcje dwukolumnowe (flex-direction: row): sztywne 614/686 px zamieniamy na podział dostępnej szerokości, żeby też korzystały z pełnego ekranu. */ section[data-framer-name="Formularz callback"] > div, section[data-framer-name="Kalendarz"] > div { flex: 1 1 0 !important; width: auto !important; } /* --------------------------------------------------------------------------- Cienie przycisków. Szablon jest neumorficzny i projektowany pod jasne tło: twardy BIAŁY cień w lewym górnym rogu (rgb(255,255,255) -5px -5px) plus szeroka miętowa aureola 24px. Na ciemnej stronie oba czytają się jak sztuczna obwódka dorysowana wokół guzika. Zastępujemy jednym cieniem rzucanym w dół. Selektory łapią po WARTOŚCI w atrybucie style (cienie są inline), a nie po wygenerowanych klasach — dzięki temu przeżywają ponowny mirror. */ [style*="box-shadow: rgba(94, 242, 166, 0.24) 0px 0px 24px"], [style*="box-shadow: rgb(255, 255, 255) -5px -5px 10px"], [style*="box-shadow: rgb(250, 251, 255) -5px -5px 10px"] { box-shadow: 0 10px 24px -12px rgba(94, 242, 166, .45), 0 6px 16px -8px rgba(0, 0, 0, .6) !important; } /* Pigułki nagłówków sekcji („Usługi", „Jak działamy", …) noszą wewnętrzny cień w indygo rgb(109,122,255) — to kolor marki szablonu, nie nasz. Ten sam kształt cienia, tylko w naszej mięcie. */ [style*="rgba(109, 122, 255, 0.25) 2px 2px 4px 0px inset"] { box-shadow: rgba(94, 242, 166, .1) 0 0 20px 0, rgba(94, 242, 166, .18) 2px 2px 4px 0 inset !important; } /* --------------------------------------------------------------------------- Logo: znak LA zamiast placeholdera z szablonu — navbar i stopka. SVG wchodzi jako MASKA, nie jako obrazek: kolor daje background-color, więc znak trzyma miętę marki w każdym wariancie (desktop, tablet, mobile, stopka) bez dotykania markupu Framera. Nazwa „Logo" występuje dokładnie w tych dwóch miejscach. Kolorowanie napisu Lead/Again robi leadagain-enhance.js — musi współgrać ze scramble, który przebudowuje innerHTML od zera. */ [data-framer-name="Logo"] { /* Rozmiar zaczepiony o metrykę napisu (Poppins 24px): wysokość znaku = wysokość wersalika, czyli 17 px. Szablon dawał pudełko 50×50 (znak rysował się na 36 px), potem stał na 26 px = pełny zasięg pisma — teraz schodzi do samych wielkich liter, o ~35% niżej. Szerokość = 17 × aspekt SVG (536.6/336.05 = 1.597), żeby contain wypełnił pudełko co do piksela i nie zostawił marginesu z boku. */ width: 27px !important; height: 17px !important; /* Wyrównanie w pionie do OSI WIELKICH LITER, nie do osi całego pisma. Oś pisma liczy się od ascendera do descendera, więc ogon „g" ściągał znak 2,5 px w dół względem tego, co oko czyta jako środek napisu. Flex centruje po pudełku wiersza (29 px); margines wchodzi do centrowanego pudełka, więc przesuwa znak o połowę swojej wartości. −2 px stawia znak dokładnie w polu wersalików: górna krawędź na wysokości „L", dolna na linii bazowej. Wartość nie zależy od wysokości znaku, więc przeżyje jej zmiany. */ margin-top: -2px !important; background-color: #5EF2A6 !important; border-radius: 0 !important; --border-color: rgba(0,0,0,0) !important; -webkit-mask: url("/logo-la.svg") no-repeat center / contain; mask: url("/logo-la.svg") no-repeat center / contain; } /* Dwie pigułki placeholdera — znak ma własny kształt. */ [data-framer-name="Logo"] > [data-framer-name="Top"], [data-framer-name="Logo"] > [data-framer-name="Bottom"] { display: none !important; } /* --------------------------------------------------------------------------- Hero: shader „Bands" (komponent z Achillesa) w kompozycji 1:1 z ich strony. Warstwy buduje leadagain-enhance.js; tu jest cała stylistyka. Zmierzone na quick-independence (Achilles): maska kontenera linear-gradient(17deg, transparent 44%, #000 100%) — granica prawie pozioma, lekko przechylona (po lewej smugi kończą się wyżej, po prawej niżej); grain .13 przy kafelku 153.5px na CAŁĄ stronę; tło #0808..-#0c0c0c. */ /* Stara dekoracja z template'u — mleczna plama dokładnie tam, gdzie teraz gra shader. Jej rolę przejmuje canvas. */ [data-framer-name="Hero mint glow"] { display: none !important; } /* Ciemniejsze podłoże hero pod shader, jak na Achillesie (reszta sekcji zostaje na swoich #1c1c1c/#161616). Do tego hero na pełny ekran: sekcja jest już flexem z justify-content:center, więc wystarczy dać jej wysokość okna, a treść sama siada na środku. `svh` przed `vh` — na telefonach `100vh` liczy się do pełnej wysokości ekranu z pominięciem paska adresu i sekcja wystaje poza kadr. min-height, nie height: na wąskich ekranach układ pionowy jest wyższy i musi móc urosnąć zamiast się przyciąć. Padding górny robi miejsce pod pigułkę navbaru (71 px + 15 px odsunięcia od góry). */ section[data-framer-name="Hero"] { background-color: #0c0c0c !important; min-height: 100vh; min-height: 100svh; padding-top: 132px !important; padding-bottom: 72px !important; } .la-hero-fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } /* Maska w trzech strefach, warstwy sumują się same z siebie (domyślne mask-composite: add), więc wystarczy je wyliczyć po przecinku: 1. górna smuga — tilt 17deg jak na Achillesie, 2. martwy środek — nagłówek i lead zostają na czystym tle, 3. dolna krawędź — trzy nierówne plamy o różnych rozmiarach, wysokościach i sile (.85 / .55 / 1), żeby pasma wracały „nieporządnie", a nie jako drugi symetryczny pas. Zmierzone pozycje treści hero (% wysokości sekcji): badge 33, H1 41-65, lead 69-78, CTA 84-89, microcopy 95-98 — plamy startują dopiero pod H1. */ .la-hero-fx__mask { position: absolute; inset: 0; /* Całość ciemniej/bardziej przezroczyście — pasma mają być tłem, nie tematem. */ opacity: .52; -webkit-mask: linear-gradient(17deg, rgba(0,0,0,0) 46%, #000 100%), radial-gradient(42% 22% at 15% 98%, rgba(0,0,0,.85) 0%, rgba(0,0,0,.45) 46%, rgba(0,0,0,0) 100%), radial-gradient(30% 24% at 68% 113%, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 100%), radial-gradient(23% 21% at 87% 88%, #000 0%, rgba(0,0,0,.3) 52%, rgba(0,0,0,0) 100%); mask: linear-gradient(17deg, rgba(0,0,0,0) 46%, #000 100%), radial-gradient(42% 22% at 15% 98%, rgba(0,0,0,.85) 0%, rgba(0,0,0,.45) 46%, rgba(0,0,0,0) 100%), radial-gradient(30% 24% at 68% 113%, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 100%), radial-gradient(23% 21% at 87% 88%, #000 0%, rgba(0,0,0,.3) 52%, rgba(0,0,0,0) 100%); } .la-hero-fx__mask canvas { display: block; width: 100%; height: 100%; /* Lekki blur: pasma mają być nastrojem, nie konkurencją dla tekstu. scale(1.05) chowa rozjaśnione krawędzie, które blur wyciąga poza kadr — bez niego przy brzegach sekcji robi się jasna obwódka. */ filter: blur(7px); transform: scale(1.05); } /* Cień pod treścią — tekst hero jest wyśrodkowany (inaczej niż na Achillesie), więc dostaje własne ciemne podłoże niezależnie od pasm shadera. */ .la-hero-fx__scrim { position: absolute; inset: 0; background: radial-gradient(70% 58% at 50% 48%, rgba(8,8,8,.7) 0%, rgba(8,8,8,.4) 55%, rgba(8,8,8,0) 100%), linear-gradient(180deg, rgba(8,8,8,.35) 0%, rgba(8,8,8,0) 28%); } /* --------------------------------------------------------------------------- Hero w układzie dwukolumnowym (kierunek: Tenity). Szablon stawiał wszystko w jednej kolumnie na środku; teraz wielki nagłówek trzyma lewą stronę, a lead, przyciski i microcopy schodzą do prawej, niżej. Sedno sztuczki: badge, H1 i lead siedzą w JEDNYM kontenerze („Text content + Announcement button"), a CTA i microcopy są jego rodzeństwem. display:contents na tym kontenerze rozpuszcza go — jego dzieci awansują na elementy gridu, więc da się rozdzielić je między kolumny bez ruszania markupu Framera (i bez utraty przy ponownym mirrorze). H1 rozciąga się przez wszystkie rzędy prawej kolumny, dzięki czemu jego dolna krawędź schodzi do poziomu microcopy — ta relacja robi całą asymetrię. Tylko od 1000px: niżej zostaje układ jednokolumnowy z szablonu. */ @media (min-width: 1000px) { section[data-framer-name="Hero"] [data-framer-name="Content"] { display: grid !important; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); /* Rząd 2 jako 1fr: H1 rozciąga się przez rzędy 2–4, a nadmiar jego wysokości grid rozdziela na ścieżki elastyczne. Bez tego nadwyżka rozłazi się po wszystkich rzędach i microcopy odjeżdża od przycisków o kilkadziesiąt px. */ grid-template-rows: auto 1fr auto auto; column-gap: clamp(40px, 5vw, 96px); row-gap: 0; align-items: start; text-align: left; /* Blok zostaje zwarty i wyśrodkowany, NIE rozciągany na całą wysokość. Sprawdzone: przy rozciągnięciu elastyczny rząd 2 zjada cały luz naraz — nagłówek zostaje u góry, prawa kolumna spada na dół i między nimi robi się 210 px dziury. Zwarty blok trzyma za to relację z referencji: dolna krawędź H1 kończy się równo z microcopy. Nadmiar wysokości zostaje jako margines wokół — przy pełnym ekranie to oddech, nie pustka. */ } section[data-framer-name="Hero"] [data-framer-name="Text content + Announcement button"] { display: contents !important; } /* badge — pierwszy rząd lewej kolumny (jego wrapper też jest display:contents, stąd zejście o poziom niżej) */ section[data-framer-name="Hero"] [data-framer-name="Text content + Announcement button"] > div:nth-child(1) > div { grid-area: 1 / 1; justify-self: start; margin-bottom: 30px; } /* nagłówek */ section[data-framer-name="Hero"] [data-framer-name="Text content + Announcement button"] > div:nth-child(2) { grid-area: 2 / 1 / 5 / 2; width: 100% !important; align-items: flex-start !important; } /* lead — dosunięty do dołu swojego rzędu, żeby zaczynał się poniżej połowy H1 */ section[data-framer-name="Hero"] [data-framer-name="Text content + Announcement button"] > div:nth-child(3) { grid-area: 2 / 2; align-self: end; width: 100% !important; align-items: flex-start !important; padding-bottom: 34px; } section[data-framer-name="Hero"] [data-framer-name="CTA"] { grid-area: 3 / 2; justify-self: start; } section[data-framer-name="Hero"] [data-framer-name="Social proof"] { grid-area: 4 / 2; justify-self: start; padding-top: 20px; } /* Microcopy jest zagnieżdżone w trzech kontenerach flex, z których każdy centrował je z szablonu — dosuwamy do lewej na każdym poziomie, inaczej linia odjeżdża od przycisków o ~146 px. */ section[data-framer-name="Hero"] [data-framer-name="Social proof"], section[data-framer-name="Hero"] [data-framer-name="Social proof"] > div, section[data-framer-name="Hero"] [data-framer-name="Social proof"] > div > div { justify-content: flex-start !important; align-items: flex-start !important; width: auto !important; } /* Nagłówek dostaje skalę z referencji: szablonowe 60/72px w węższej kolumnie wyglądałoby drobno. Ciasny interlinia i ujemny tracking to podpis tego typu hero — bez nich duży stopień pisma się rozjeżdża. */ section[data-framer-name="Hero"] h1 { /* Duży stopień pisma robi tę kompozycję — 66 px zostawiało sekcję pustą i płaską. vw w clamp skaluje płynnie z oknem; górny kres 84 px wypełnia pełnoekranowe hero, dolny kres pilnuje niskich laptopów. */ font-size: clamp(40px, 4.4vw, 84px) !important; line-height: 1.05 !important; letter-spacing: -.022em !important; text-align: left !important; /* Głębia zamiast płaskiej bieli: delikatny pionowy gradient na literach — góra czysta, dół lekko przygaszony. Klasyczny zabieg dark-heroes. */ background: linear-gradient(180deg, #FFFFFF 30%, rgba(255,255,255,.72) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; /* background-clip:text maluje glif TYLKO tam, gdzie sięga tło elementu — przy line-height 1.05 ogonki j/y/ą ostatniej linii wystawały poza boks i renderowały się przezroczyste (wyglądały jak ucięte). Padding wydłuża obszar tła pod ogonki; ujemny margines oddaje ten zapas layoutowi. */ padding-bottom: .12em !important; margin-bottom: -.12em !important; } section[data-framer-name="Hero"] [data-framer-name="Text content + Announcement button"] p { text-align: left !important; } section[data-framer-name="Hero"] [data-framer-name="Social proof"] p { text-align: left !important; } } /* Badge nad nagłówkiem hero: z szablonowej pigułki (ramka + tło) na cichy eyebrow — sam tekst z rozstrzelonym trackingiem i świecącą kropką. Pigułka konkurowała wizualnie z przyciskami CTA, a to czysta etykieta, nie akcja. */ section[data-framer-name="Hero"] a[data-framer-name="Default"] { background-color: rgba(0,0,0,0) !important; --border-color: rgba(0,0,0,0) !important; padding-left: 0 !important; width: auto !important; } section[data-framer-name="Hero"] a[data-framer-name="Default"]::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #5EF2A6; box-shadow: 0 0 10px rgba(94,242,166,.9); margin-right: 12px; flex-shrink: 0; } section[data-framer-name="Hero"] a[data-framer-name="Default"] p { letter-spacing: .17em !important; font-size: 12px !important; color: rgba(214, 255, 233, .62) !important; --extracted-r6o4lv: rgba(214, 255, 233, .62) !important; } /* Poświata primary CTA — bloom żywcem z appointwise (ich wartości: 0 0 22px 1px mięta + 0 3px 10px ciemna zieleń). Selektory po inline'owym tle, więc łapią każdy wypełniony miętowy przycisk: hero, nav, sekcje. Stoi ZA ogólną regułą cieni wyżej i ma wyższą specyficzność — wygrywa dla primary. */ a[style*="background-color: rgb(94, 242, 166)"], a[style*="background-color: var(--token-35641045"] { box-shadow: 0 0 22px 1px rgba(156, 254, 202, .45), 0 3px 10px 0 rgba(14, 171, 121, .5) !important; } /* Drugi przycisk obok miętowego CTA. Węzeł dokłada leadagain-enhance.js (klon podstawowego), tutaj jest cała jego skórka: obrys zamiast wypełnienia, żeby hierarchia została przy akcji, która zarabia. */ section[data-framer-name="Hero"] [data-framer-name="CTA"] { display: flex !important; align-items: center; gap: 14px; /* Dwa przyciski obok siebie to ~537 px — na telefonie muszą zejść jeden pod drugi. Samo flex-wrap nie wystarczy: kontener bez limitu przyjmuje szerokość treści i nigdy nie zawija, stąd max-width. */ flex-wrap: wrap; width: auto !important; max-width: 100%; } @media (max-width: 999px) { section[data-framer-name="Hero"] [data-framer-name="CTA"] { justify-content: center; } } /* Akcent w nagłówku à la Tenity: pigułka wtrącona w tekst H1 po „system." — węzeł wstawia leadagain-enhance.js. Wymiary w em, więc skalują się z clampem nagłówka. Własny kolor tła jest widoczny mimo gradientowego clipa na tekście (background-clip:text działa na glify, nie na tła inline-blocków). */ .la-h1-pill { display: inline-block; width: 1.55em; height: .58em; margin: 0 .14em; border-radius: 100px; background: #5EF2A6; box-shadow: 0 0 18px rgba(94, 242, 166, .5); vertical-align: baseline; transform: translateY(-.02em); } /* a.la-ghost, nie .la-ghost: ghost to klon primary, więc w atrybucie style ma odziedziczone „background-color: rgb(94, 242, 166)" i selektor poświaty [style*=…] łapie też jego. Równa specyficzność + późniejsza pozycja w pliku wygrywa kaskadę i gasi glow na duchu. */ a.la-ghost { background-color: rgba(0,0,0,0) !important; border: 1px solid rgba(255,255,255,.22) !important; box-shadow: none !important; } .la-ghost p { --extracted-r6o4lv: #E8E8E8 !important; color: #E8E8E8 !important; } .la-ghost:hover { border-color: rgba(94,242,166,.55) !important; background-color: rgba(94,242,166,.07) !important; } .la-ghost:hover p { --extracted-r6o4lv: #FFFFFF !important; color: #FFFFFF !important; } /* Prowadnice z appointwise — cienka rama „blueprint" na wierzchu hero. Trzy pionowe linie (lewa krawędź ramy, oś, prawa krawędź) ciągną się przez całą wysokość, dwie poziome odcinają 64 px od góry i dołu, w rogach ramy siedzą kwadraciki 8×8 wycentrowane na przecięciach (margin -4px). Leżą nad shaderem i nad scrimem, ale pod treścią — inaczej linie przecinałyby nagłówek na wierzchu. Przycina je overflow:hidden z .la-hero-fx. */ .la-guides { position: absolute; inset: 0; pointer-events: none; opacity: .55; } .la-guides__box { position: absolute; top: 64px; bottom: 64px; left: 50%; transform: translateX(-50%); width: min(1100px, calc(100% - 160px)); } .la-guides i, .la-guides b { position: absolute; display: block; background: #fff; opacity: .2; } .la-guides i.v { width: 1px; top: -100vh; bottom: -100vh; } .la-guides i.h { height: 1px; left: -100vw; right: -100vw; } .la-guides b { width: 8px; height: 8px; margin: -4px; } /* Światełka biegnące wzdłuż kratki — mechanika żywcem z appointwise: smuga 2px z gradientem gasnącym na jednym końcu, przelatuje krawędź i znika. Tempo przeliczone, nie przepisane: u nich trasa miała ~150 px przy cyklu 3,2 s, nasze linie mają ~720 px — ta sama prędkość to ~8 s na przelot. Trzy smugi o różnych czasach i opóźnieniach, żeby nigdy nie szły równo. */ .la-guides span.beam { position: absolute; opacity: 0; } .la-guides span.beam.v { width: 2px; height: 110px; margin-left: -.5px; background: linear-gradient(180deg, rgba(94,242,166,0) 0%, rgba(94,242,166,.85) 62%, #D6FFE9 100%); animation: laBeamDown 8s linear infinite; } .la-guides span.beam.up { background: linear-gradient(0deg, rgba(94,242,166,0) 0%, rgba(94,242,166,.85) 62%, #D6FFE9 100%); animation: laBeamUp 9.5s linear infinite 3.2s; } .la-guides span.beam.h { height: 2px; width: 160px; margin-top: -.5px; background: linear-gradient(90deg, rgba(94,242,166,0) 0%, rgba(94,242,166,.85) 62%, #D6FFE9 100%); animation: laBeamRight 11s linear infinite 1.6s; } @keyframes laBeamDown { 0% { top: -110px; opacity: 0 } 12%, 88% { opacity: 1 } 100% { top: 100%; opacity: 0 } } @keyframes laBeamUp { 0% { bottom: -110px; opacity: 0 } 12%, 88% { opacity: 1 } 100% { bottom: 100%; opacity: 0 } } @keyframes laBeamRight { 0% { left: -160px; opacity: 0 } 12%, 88% { opacity: 1 } 100% { left: 100%; opacity: 0 } } @media (prefers-reduced-motion: reduce) { .la-guides span.beam { animation: none !important; opacity: 0 !important; } } /* Grain na całą stronę — kafelek jak na Achillesie (153.5px), ale słabszy niż ich .13: przy jaśniejszym, bardziej przezroczystym shaderze .13 zaczynało dominować nad obrazem. Leży nad wszystkim łącznie z navbarem, jak u nich. */ body::after { content: ""; position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: .078; /* -13% od poprzedniego .09 (prośba usera) */ background: url("/noise.png") repeat; background-size: 153.5px; } /* Pływający krążek LinkedIn z szablonu (prawy dolny róg stopki) — do usunięcia na życzenie: jasny badge nie pasuje do ciemnej strony, a link i tak jest placeholderem [LINKEDIN_URL]. */ footer a[data-framer-name="LinkedIn"], [data-framer-name="Footer"] a[data-framer-name="LinkedIn"] { display: none !important; } /* Wordmark w stopce z efektem dither (kierunek: Landa). U nich to gotowy plik wideo — u nas własny render na canvasie (leadagain-enhance.js), więc bez przenoszenia cudzych assetów. Warstwa siedzi na górze stopki, nad linkami. */ .la-footer-fx { display: block; position: relative; width: 100%; max-width: 1265px; margin: 0 auto; overflow: hidden; pointer-events: none; } /* Zanik dołu to WARSTWA NA WIERZCHU napisu, nie zmiana renderu: render rysuje pełny wordmark, a maska wygasza go od dołu. Maska (a nie czarny gradient) dlatego, że wygasza do przezroczystości — trzyma się każdego tła stopki i nie rozjaśnia go szarą płachtą. Punkty: napis zajmuje ~2–80% wysokości płótna (linia bazowa liter ~59%, ogonek „g" kończy się ~80%), więc pełna siła do 38%, zero na 84%. */ .la-footer-fx canvas { display: block; width: 100%; height: auto; -webkit-mask-image: linear-gradient(180deg, #000 0 38%, rgba(0, 0, 0, 0) 84%); mask-image: linear-gradient(180deg, #000 0 38%, rgba(0, 0, 0, 0) 84%); } /* Wewnętrzny kontener stopki miał sztywne 1360 px z szablonu — na szerokim ekranie zostawały paski po bokach, choć sekcja szła od krawędzi do krawędzi. Sztywną szerokość niesie i footer, i jego rodzic (div-wrapper komponentu), więc uwalniamy oba; padding zostaje na footerze, żeby treść nie kleiła się do krawędzi ekranu. */ section[data-framer-name="Footer"] footer, section[data-framer-name="Footer"] footer > div, section[data-framer-name="Footer"] > div, section[data-framer-name="Footer"] > div > div { width: 100% !important; max-width: none !important; } section[data-framer-name="Footer"] footer { padding-left: 40px; padding-right: 40px; } /* Wiersz [LINKEDIN_URL] w pasku atrybucji — placeholder do usunięcia; chowa go leadagain-enhance.js (CSS nie umie selektować po tekście), tu tylko klasa. */ .la-hidden { display: none !important; } /* Pasek atrybucji szablonu — samotny napis „LeadAgain" pod linkami (w oryginale podpis autora template'u). Zbędny: marka jest już w logo obok linków. */ section[data-framer-name="Footer"] nav[data-framer-name="Attribution"] { display: none !important; } /* Logo w jednym wierszu z linkami stopki (na szerokich ekranach). Footer jest flex-kolumną osobnych wierszy: wordmark-canvas / logo / linki / copyright. Przełączenie na row+wrap skleja logo i linki w jeden wiersz, a warstwy pełnoszerokościowe (canvas na 100% i copyright) łamią się na własne. */ @media (min-width: 1200px) { section[data-framer-name="Footer"] footer { display: flex !important; flex-flow: row wrap !important; align-items: center !important; justify-content: center !important; column-gap: 48px; } section[data-framer-name="Footer"] footer > .la-footer-fx, section[data-framer-name="Footer"] footer > [data-framer-name="Copyright + Social icons"] { flex: 0 0 100% !important; } /* Wrapper logo — reguła odpaskowania stopki wyżej daje KAŻDEMU dziecku footera width:100%, a wiersz z linkami wymaga, żeby logo było wąskie. :has() podbija specyficzność ponad tamtą regułę i nie zależy od generowanej klasy wrappera (framer-1a0zhqm-container bywa przelosowana przy republish). */ section[data-framer-name="Footer"] footer > div:has(> a[data-framer-name="Full"]) { width: auto !important; flex: 0 0 auto !important; } } /* --------------------------------------------------------------------------- Kalendarz: embed Cal.com (montuje leadagain-enhance.js). Szablonowy placeholder z ikoną i napisem [EMBED KALENDARZA — CAL_URL] schodzi ze strony; jego miejsce w karcie zajmuje #la-cal. Notka „Żaden termin nie pasuje?…" pod embedem zostaje. */ [data-framer-name="[EMBED KALENDARZA — CAL_URL]"] { display: none !important; } #la-cal { width: 100%; min-height: 560px; } #la-cal iframe { border-radius: 14px; } /* --------------------------------------------------------------------------- Bento „Zakres współpracy" — adaptacja układu sekcji Benefits z Landina (zmierzona geometria: nagłówek 2 linie, 2 rzędy chipów h38/gap12, rząd kart 1.42:1/gap24/radius 30, dolny rząd równych kart/radius 20). Własny markup i treści (montuje leadagain-enhance.js), nasza paleta — żadnych ich assetów. Zastępuje placeholder [DO ARANŻACJI] wewnątrz sekcji Plans. */ section[data-framer-name="Plans section"] > *:not(.la-bento) { display: none !important; } section[data-framer-name="Plans section"] { padding: 100px 40px !important; } .la-bento { width: 100%; max-width: 1160px; margin: 0 auto; font-family: "Poppins", sans-serif; } .la-bento__title { color: #fff; font-size: clamp(30px, 3.6vw, 52px); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; } .la-bento__title span { display: block; color: rgba(255,255,255,.55); } .la-bento__chips { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 20px; } .la-bento__chip { height: 38px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); color: #c9c9c9; font-size: 14px; white-space: nowrap; font-family: inherit; cursor: pointer; /* chipy są przyciskami (taby usług) */ transition: border-color .15s, color .15s, background-color .15s; } button.la-bento__chip:hover { border-color: rgba(94,242,166,.45); color: #fff; } button.la-bento__chip.is-active { background: rgba(94,242,166,.12); border-color: rgba(94,242,166,.65); color: #fff; } /* Panel opisu usługi pod chipami — min-height, żeby przełączanie nie ruszało layoutu kart poniżej; krótki fade przy podmianie treści. */ .la-bento__desc { min-height: 108px; margin-bottom: 40px; padding: 24px 28px; border-radius: 14px; border: 1px solid rgba(94,242,166,.18); background: radial-gradient(70% 100% at 12% 0%, rgba(94,242,166,.07) 0%, rgba(0,0,0,0) 60%), rgba(255,255,255,.02); transition: opacity .14s; } .la-bento__desc.is-swapping { opacity: 0; } .la-bento__desc h3 { color: #5EF2A6; font-size: 15px; font-weight: 600; margin: 0 0 8px; letter-spacing: .02em; } .la-bento__desc p { color: #bdbdbd; font-size: 15px; line-height: 1.65; margin: 0; max-width: 88ch; } @media (max-width: 999px) { .la-bento__desc { min-height: 168px; } } .la-bento__chip--cta { background: #5EF2A6; border-color: #5EF2A6; color: #111; font-weight: 500; text-decoration: none; box-shadow: 0 0 18px rgba(94,242,166,.35); } .la-bento__chip--cta:hover { background: #79f5b6; } .la-bento__grid { display: grid; grid-template-columns: 1.42fr 1fr; gap: 24px; } .la-bento__row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px; } .la-bento__card { border-radius: 20px; padding: 32px; background: radial-gradient(90% 70% at 85% 0%, rgba(94,242,166,.06) 0%, rgba(0,0,0,0) 60%), rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); } .la-bento__card--big { border-radius: 30px; padding: 40px; display: flex; flex-direction: column; } .la-bento__card h3 { color: #fff; font-size: 20px; font-weight: 600; margin: 0 0 12px; } .la-bento__card p { color: #a9a9a9; font-size: 15px; line-height: 1.65; margin: 0; } .la-bento__card--big p { max-width: 46ch; } .la-bento__cta { display: flex; gap: 12px; margin-top: auto; padding-top: 28px; flex-wrap: wrap; } .la-bento__btn { display: inline-flex; align-items: center; height: 46px; padding: 0 20px; border-radius: 10px; font-size: 15px; text-decoration: none; } .la-bento__btn--primary { background: #5EF2A6; color: #111; box-shadow: 0 0 22px 1px rgba(156,254,202,.4), 0 3px 10px rgba(14,171,121,.4); } .la-bento__btn--ghost { border: 1px solid rgba(255,255,255,.22); color: #e8e8e8; } .la-bento__btn--ghost:hover { border-color: rgba(94,242,166,.55); color: #fff; } /* znacznik liczbowy karty — cichy, techniczny, spójny z prowadnicami hero */ .la-bento__card i { display: block; font-style: normal; font-size: 12px; letter-spacing: .14em; color: rgba(94,242,166,.75); margin-bottom: 14px; } @media (max-width: 999px) { .la-bento__grid, .la-bento__row3 { grid-template-columns: 1fr; } .la-bento__card--big { padding: 32px; } } /* Notion and OpenAI shipped as black logos on white tiles, while every other brand icon in that row is a coloured logo on a dark tile. The logos themselves are turned white in fix-site.mjs; these rules give them the same tile as the rest — dark fill, no white border, same mint glow. */ [data-framer-name="Notion"], [data-framer-name="OpenAI"] { background-color: rgb(35, 35, 35) !important; --border-color: rgba(255, 255, 255, 0) !important; box-shadow: rgba(94, 242, 166, 0.1) 0px 0px 18px 0px, rgba(0, 0, 0, 0.28) 0px 12px 30px 0px !important; } /* Scrim pod pływającym navbarem ------------------------------------------ Navbar jest `fixed` i nie dotyka krawędzi ekranu: zostaje 15 px paska nad pigułką i ~68 px z każdego boku. Dopóki sekcje miały „tryb kinowy", nic tam nie wjeżdżało; po rozciągnięciu na pełną szerokość kafelki z ikonami zaczęły przejeżdżać tuż obok navbara i były ucinane w pół (kolorowe ścinki nad pigułką). Gradient w kolorze tła wygasza wszystko, co wjeżdża w górne 130 px. Widoczny dopiero, gdy hero opuści ten pas (klasa z leadagain-enhance.js) — inaczej przykrywałby shader w hero płaską plamą. */ body::before { content: ""; position: fixed; inset: 0 0 auto 0; height: 130px; /* nad treścią, pod navbarem: jego kontener ma z-index: 1 i leży dalej w DOM */ z-index: 1; pointer-events: none; opacity: 0; transition: opacity .25s ease; background: linear-gradient(180deg, #1C1C1C 0%, #1C1C1C 66%, rgba(28, 28, 28, 0) 100%); } html.la-scrolled body::before { opacity: 1; } /* Pływający widget rezerwacji (wzorzec jak iClosed/Intercom, wykonanie nasze). Kalendarz siedzi 3 sekcje pod hero — widget skraca drogę do jednego kliknięcia z dowolnego miejsca strony. Montuje go leadagain-enhance.js; zasady widoczności: pojawia się po opuszczeniu hero, znika przy sekcjach, które same są CTA (callback, kalendarz, Final CTA) — żeby nie dublować wezwania na ekranie. Świadomie BEZ licznika czasu z referencji: zero sztucznej presji (zasada copy z CONVERSION_PLAN). z-index 4 = pod grainem (5), jak cała strona. */ .la-book { position: fixed; right: 24px; bottom: 24px; z-index: 4; width: 316px; padding: 18px; background: #232323; border: 1px solid rgba(255, 255, 255, .08); border-radius: 22px; box-shadow: rgba(0, 0, 0, .45) 0 20px 55px 0, rgba(94, 242, 166, .07) 0 0 0 1px inset; font-family: Poppins, sans-serif; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .3s ease, transform .3s ease; } .la-book.is-on { opacity: 1; transform: none; pointer-events: auto; } .la-book__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .la-book__mark { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px; background: #141414; display: flex; align-items: center; justify-content: center; } .la-book__mark span { width: 26px; height: 16px; background: #5EF2A6; -webkit-mask: url("/logo-la.svg") no-repeat center / contain; mask: url("/logo-la.svg") no-repeat center / contain; } .la-book__who b { display: block; color: #fff; font-size: 14px; font-weight: 600; line-height: 1.3; } .la-book__who small { color: #8A8A8A; font-size: 12px; } .la-book__x { margin-left: auto; align-self: flex-start; background: none; border: 0; padding: 4px; cursor: pointer; color: #8A8A8A; font-size: 16px; line-height: 1; } .la-book__x:hover { color: #fff; } .la-book__desc { color: #C9C9C9; font-size: 12.5px; line-height: 1.55; margin: 0 0 14px; } .la-book__days { display: flex; gap: 7px; margin-bottom: 14px; } .la-book__day { flex: 1 1 0; text-align: center; padding: 8px 0 7px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; text-decoration: none; transition: border-color .15s ease; } .la-book__day:hover { border-color: rgba(94, 242, 166, .6); } .la-book__day span { display: block; color: #8A8A8A; font-size: 10.5px; } .la-book__day b { color: #fff; font-size: 14px; font-weight: 600; } .la-book__cta { display: block; text-align: center; padding: 13px 0; background: #5EF2A6; color: #111 !important; font-size: 14px; font-weight: 600; border-radius: 50px; text-decoration: none; box-shadow: 0 10px 24px -12px rgba(94, 242, 166, .45), 0 6px 16px -8px rgba(0, 0, 0, .6); } .la-book__micro { margin: 10px 0 0; text-align: center; color: #8A8A8A; font-size: 11px; } /* Przyciemnienie działa wyłącznie pod arkuszem mobilnym; na desktopie karta jest małym oknem w rogu i nie ma czego przyciemniać. */ .la-scrim { display: none; } /* Mobile: arkusz wysuwany od dołu, jak panele czatów w aplikacjach (decyzja usera 2026-08-19). Wcześniej karta wisiała nad treścią jako pływające okno i zajmowała jedną trzecią ekranu — na telefonie to zasłanianie strony, nie pomoc. Teraz: domyślnie sama kropka, dotknięcie wysuwa arkusz przyklejony do dolnej krawędzi, z uchwytem i przyciemnieniem tła. Kafle z terminami zostają (to główna wartość), znika opis. */ @media (max-width: 639px) { .la-book { left: 0; right: 0; bottom: 0; width: auto; max-height: 78vh; overflow-y: auto; padding: 20px 16px calc(16px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; border-bottom: none; transform: translateY(101%); transition: transform .34s cubic-bezier(.32, .72, 0, 1), opacity .2s ease; box-shadow: 0 -18px 50px rgba(0, 0, 0, .55); /* Gest zamykania: przeciąganie w dół przy szczycie arkusza ma trafiać do nas, a nie odbijać całą stroną pod spodem. */ overscroll-behavior: contain; touch-action: pan-y; } .la-book.is-on { transform: translateY(0); } /* Uchwyt — sygnał „złap i pociągnij". Szerszy i jaśniejszy niż wcześniej, bo to on zaprasza do gestu; nad nim zostaje zapas na palec. */ .la-book::before { content: ""; position: absolute; top: 9px; left: 50%; width: 44px; height: 5px; margin-left: -22px; border-radius: 5px; background: rgba(255, 255, 255, .26); } .la-book__desc { display: none; } .la-book__head { margin-bottom: 12px; } .la-book__days { gap: 6px; margin-bottom: 14px; } .la-book__day { padding: 9px 0 8px; } .la-book__day span { font-size: 10px; } .la-book__day b { font-size: 14px; } .la-book__cta { padding: 15px 20px; } /* Przyciemnienie strony pod arkuszem — bez niego arkusz zlewa się z treścią. */ .la-scrim { display: block; position: fixed; inset: 0; z-index: 3; background: rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; transition: opacity .3s ease; } html.la-book-open .la-scrim { opacity: 1; pointer-events: auto; } /* Kropka chowa się, gdy arkusz jest otwarty — zamyka się uchwytem, krzyżykiem, dotknięciem tła albo pociągnięciem w dół. */ html.la-book-open .la-fab { opacity: 0; pointer-events: none; } } /* Mobilne menu (hamburger). Szablonowy hamburger jest atrapą: mirror nie ma logiki wariantów Framera, więc wariant „Mobile open" w ogóle nie istnieje w DOM — klik nie robił nic. Własna nakładka pełnoekranowa z własnym nagłówkiem (navbar ma z-index 1, leży POD nakładką — dlatego zamykanie krzyżykiem w nakładce, nie hamburgerem). z-index 5 = pod grainem, który jako ::after body maluje się ostatni przy równym z — tekstura zostaje. */ .la-menu { position: fixed; inset: 0; z-index: 5; display: flex; flex-direction: column; padding: 15px 24px 32px; background: rgba(18, 18, 18, .97); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font-family: Poppins, sans-serif; opacity: 0; pointer-events: none; transition: opacity .25s ease; } .la-menu.is-on { opacity: 1; pointer-events: auto; } html.la-menu-open { overflow: hidden; } .la-menu__top { display: flex; align-items: center; justify-content: space-between; height: 52px; } /* gap rozsuwał też „Lead" i „Again" — wordmark ma być jednym słowem, odstęp należy się wyłącznie znakowi. */ .la-menu__brand { display: flex; align-items: center; gap: 0; font-size: 17px; font-weight: 600; line-height: 1; } .la-menu__brand i { margin-right: 9px; } .la-menu__brand i { width: 26px; height: 16px; background: #5EF2A6; -webkit-mask: url("/logo-la.svg") no-repeat center / contain; mask: url("/logo-la.svg") no-repeat center / contain; } .la-menu__brand b { color: #fff; font-weight: 600; } .la-menu__brand b + b { color: #5EF2A6; } .la-menu__x { background: none; border: 0; padding: 8px; cursor: pointer; color: #fff; font-size: 22px; line-height: 1; } .la-menu__links { display: flex; flex-direction: column; margin-top: 7vh; } .la-menu__links a { color: #fff; font-size: 27px; font-weight: 600; line-height: 1.4; text-decoration: none; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); } .la-menu__links a:active { color: #5EF2A6; } .la-menu__cta { margin-top: auto; display: block; text-align: center; padding: 16px 0; background: #5EF2A6; color: #111 !important; font-size: 15px; font-weight: 600; border-radius: 50px; text-decoration: none; box-shadow: 0 10px 24px -12px rgba(94, 242, 166, .45); } .la-menu__micro { margin: 12px 0 0; text-align: center; color: #8A8A8A; font-size: 12px; } /* Kropka (FAB) rozwijająca widget rezerwacji + pasek odliczania. Znak LA na ciemnej płytce jak favicona; po rozwinięciu kropka pokazuje strzałkę do zwinięcia. Karta .la-book przenosi się NAD kropkę (nadpisanie bottom z bloku wyżej — warstwa append-only, późniejsza reguła wygrywa). */ .la-fab { position: fixed; right: 24px; bottom: 24px; z-index: 4; width: 58px; height: 58px; border-radius: 50%; background: #141414; border: 1px solid rgba(94, 242, 166, .35); box-shadow: 0 8px 24px rgba(0, 0, 0, .5), 0 0 18px rgba(94, 242, 166, .22); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; opacity: 0; transform: scale(.8); pointer-events: none; transition: opacity .25s ease, transform .25s ease; } .la-fab.is-on { opacity: 1; transform: none; pointer-events: auto; } .la-fab:hover { border-color: rgba(94, 242, 166, .7); } .la-fab__mark { width: 30px; height: 19px; background: #5EF2A6; -webkit-mask: url("/logo-la.svg") no-repeat center / contain; mask: url("/logo-la.svg") no-repeat center / contain; } /* Chevron rysowany SVG-iem (zamiast znaku tekstowego, który siedział krzywo w kółku): wyśrodkowany flexem, płynny obrót przy zwijaniu/rozwijaniu. */ .la-fab__chev { display: none; align-items: center; justify-content: center; width: 100%; height: 100%; color: #5EF2A6; } .la-fab__chev svg { width: 18px; height: 18px; transition: transform .35s cubic-bezier(.34, 1.4, .64, 1); } html.la-book-open .la-fab__mark { display: none; } html.la-book-open .la-fab__chev { display: flex; } html:not(.la-book-open) .la-fab__chev svg { transform: rotate(180deg); } /* Odsunięcie nad kropkę dotyczy TYLKO pływającego okna na desktopie — na telefonie arkusz jest przyklejony do dolnej krawędzi ekranu. Bez tego ograniczenia reguła stała później w pliku i odklejała arkusz od dołu. */ @media (min-width: 640px) { .la-book { bottom: 96px; } } /* Pasek odliczania: cienka miętowa linia u góry kurczy się z czasem. Po zejściu do zera cały pasek znika (usuwa go JS) — bez „wygasania". */ .la-book__timer { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; margin-bottom: 12px; background: #1B1B1B; border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; overflow: hidden; } .la-book__timer i { position: absolute; top: 0; left: 0; height: 2px; background: #5EF2A6; width: 100%; transition: width 1s linear; } .la-book__timer span { color: #C9C9C9; font-size: 11.5px; line-height: 1.45; } .la-book__timer b { color: #fff; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; } @media (max-width: 639px) { .la-fab { right: 14px; bottom: 14px; } /* Arkusz jest przyklejony do dolnej krawędzi (blok wyżej) — dawne odsunięcie o wysokość kropki dotyczyło pływającego okna i teraz odklejałoby arkusz od dołu ekranu. */ /* na mobile karta jest kompaktowa (bez opisu i dni) — timer zostaje */ } /* --------------------------------------------------------------------------- Restrukturyzacja lejka (decyzja usera 2026-08-18): 1. Sekcja Testimonials = placeholder bez treści tuż po hero → jej nagłówek znika, a w środku montuje się nasza sekcja „O nas" (leadagain-enhance.js). Wraca, gdy będą 2-3 PRAWDZIWE opinie (zasada: zero fake social proof). 2. Formularz telefoniczny przenosi się do sekcji Kalendarz (lewa kolumna, pod copy) — dwa kontenery decyzji obok siebie: telefon | kalendarz. Reszta sekcji Formularz callback (samo copy) jest ukryta. */ section[data-framer-name="Testimonials"] [data-framer-name="Header"] { display: none !important; } section[data-framer-name="Formularz callback"] { display: none !important; } /* Przeniesiona karta formularza: szablon dał jej sztywne 715 px — w kolumnie obok FAQ ma wypełniać dostępną szerokość. */ .la-faq-form > [data-framer-name="Callback form card"] { width: 100% !important; max-width: none !important; margin-top: 6px; } /* Etykieta nad przeniesionym formularzem — most między dwiema ścieżkami. */ .la-alt-label { margin: 26px 0 0; } .la-alt-label b { display: block; color: #fff; font-family: Poppins, sans-serif; font-size: 19px; font-weight: 600; line-height: 1.4; } .la-alt-label span { display: block; margin-top: 4px; color: #8A8A8A; font-family: Poppins, sans-serif; font-size: 13.5px; line-height: 1.55; } /* Sekcja „O nas" — montowana w hoście Testimonials, więc dziedziczy jego padding i tło; tu tylko układ treści. Bez liczb i bez obietnic wynikowych. */ .la-onas { max-width: 980px; margin: 0 auto; text-align: center; font-family: Poppins, sans-serif; } .la-onas__pill { display: inline-block; padding: 6px 16px; border-radius: 50px; border: 1px solid rgba(94, 242, 166, .35); color: #5EF2A6; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .la-onas h2 { margin: 18px 0 0; color: #fff; font-size: clamp(28px, 3vw, 40px); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; } .la-onas p { margin: 16px auto 0; max-width: 760px; color: #C9C9C9; font-size: 15.5px; line-height: 1.65; } .la-onas__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1040px; margin: 32px auto 0; text-align: left; } .la-onas__card { padding: 24px 26px; border-radius: 25px; border: 1px solid rgba(255, 255, 255, .08); background: #232323; transition: transform .3s ease, border-color .3s ease; } .la-onas__card:hover { transform: translateY(-3px); border-color: rgba(94, 242, 166, .3); } .la-onas__card i { font-style: normal; font-weight: 700; font-size: 26px; color: #5EF2A6; } .la-onas__card h3 { margin: 10px 0 8px; color: #fff; font-size: 17px; font-weight: 600; line-height: 1.3; } .la-onas__card p { margin: 0; max-width: none; color: #B9B9B9; font-size: 13.5px; line-height: 1.6; } @media (max-width: 809px) { .la-onas__cards { grid-template-columns: 1fr; } } /* Pole e-mail + komunikaty formularza telefonicznego. Wygląd 1:1 z polami szablonu (#1C1C1C, promień 12), żeby dopisane pole nie odstawało. */ .la-q-field { width: 100%; font-family: Poppins, sans-serif; } .la-q-field label { display: block; margin-bottom: 8px; color: #fff; font-size: 14px; font-weight: 500; } .la-q-field input { width: 100%; padding: 14px; background: #1C1C1C; border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; color: #fff; font-family: inherit; font-size: 13.5px; } .la-q-field input::placeholder { color: #7E7E7E; } .la-q-field input:focus { border-color: rgba(94, 242, 166, .5); outline: none; } .la-form-msg { margin: 4px 0 0; font-family: Poppins, sans-serif; font-size: 13px; line-height: 1.5; color: #FFB4A2; } .la-form-msg.is-ok { color: #5EF2A6; } /* po udanej wysyłce pola znikają, zostaje podziękowanie */ form.la-form-done > *:not(.la-form-msg) { display: none !important; } /* Mini-audyt AI (koniec sekcji Process — wypełnia najdłuższy odcinek strony bez żadnego CTA). Anonimowy: trzy selecty, zero danych osobowych, więc diagnoza może iść przed jakimkolwiek formularzem kontaktowym. */ .la-audit { max-width: 760px; margin: 56px auto 0; padding: 30px 32px 26px; background: #232323; border: 1px solid rgba(255, 255, 255, .08); border-radius: 25px; box-shadow: rgba(0, 0, 0, .34) 0 20px 55px 0; font-family: Poppins, sans-serif; } .la-audit__pill { display: inline-block; padding: 5px 14px; border-radius: 50px; border: 1px solid rgba(94, 242, 166, .35); color: #5EF2A6; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .la-audit h3 { margin: 14px 0 4px; color: #fff; font-size: 23px; font-weight: 600; line-height: 1.3; } .la-audit > p { margin: 0 0 18px; color: #8A8A8A; font-size: 13.5px; line-height: 1.55; } .la-audit__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } @media (max-width: 719px) { .la-audit__row { grid-template-columns: 1fr; } } .la-audit__btn { margin-top: 16px; width: 100%; padding: 14px 0; background: #5EF2A6; color: #111; font-family: inherit; font-size: 14px; font-weight: 600; border: 0; border-radius: 50px; cursor: pointer; box-shadow: 0 10px 24px -12px rgba(94, 242, 166, .45); } .la-audit__btn[disabled] { opacity: .6; cursor: wait; } .la-audit__out { margin-top: 18px; } .la-audit__out ul { margin: 0; padding: 0; list-style: none; } .la-audit__out li { position: relative; padding: 8px 0 8px 26px; color: #E7E7E7; font-size: 14px; line-height: 1.6; border-bottom: 1px solid rgba(255, 255, 255, .06); } .la-audit__out li::before { content: "→"; position: absolute; left: 2px; color: #5EF2A6; } .la-audit__out .la-audit__objection { margin: 14px 0 0; color: #C9C9C9; font-size: 13.5px; line-height: 1.6; font-style: italic; } .la-audit__out .la-audit__cta { display: block; margin-top: 16px; text-align: center; padding: 13px 0; background: transparent; border: 1px solid rgba(94, 242, 166, .5); border-radius: 50px; color: #5EF2A6 !important; font-size: 14px; font-weight: 600; text-decoration: none; } .la-audit__note { margin: 12px 0 0; color: #6E6E6E; font-size: 11.5px; line-height: 1.5; text-align: center; } /* Mini-audyt: wersja wizard (jak Typeform) — jedno pytanie na ekran. */ .la-audit__progress { height: 3px; margin: 20px 0 22px; background: rgba(255, 255, 255, .08); border-radius: 3px; overflow: hidden; } .la-audit__progress i { display: block; height: 100%; width: 0; background: #5EF2A6; transition: width .3s ease; } .la-audit__q { margin: 0 0 16px; color: #fff; font-size: 18px; font-weight: 500; line-height: 1.45; } .la-audit__opts { display: flex; flex-direction: column; gap: 10px; } .la-audit__opt { display: flex; align-items: center; gap: 13px; width: 100%; padding: 13px 16px; text-align: left; background: #1B1B1B; border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; color: #E7E7E7; font-family: Poppins, sans-serif; font-size: 14px; cursor: pointer; transition: border-color .15s ease, background .15s ease; } .la-audit__opt:hover { border-color: rgba(94, 242, 166, .5); } .la-audit__opt.is-sel { border-color: #5EF2A6; background: rgba(94, 242, 166, .08); } .la-audit__opt b { flex: 0 0 auto; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .2); border-radius: 7px; font-size: 12px; font-weight: 600; color: #8A8A8A; } .la-audit__opt.is-sel b { color: #111; background: #5EF2A6; border-color: #5EF2A6; } .la-audit__meta { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; color: #8A8A8A; font-family: Poppins, sans-serif; font-size: 12px; } .la-audit__back { background: none; border: 0; padding: 4px; color: #8A8A8A; font: inherit; cursor: pointer; } .la-audit__back:hover { color: #fff; } .la-audit__list { margin: 0; padding: 0; list-style: none; } .la-audit__list li { position: relative; padding: 8px 0 8px 26px; color: #E7E7E7; font-size: 14px; line-height: 1.6; border-bottom: 1px solid rgba(255, 255, 255, .06); } .la-audit__list li::before { content: "\2192"; position: absolute; left: 2px; color: #5EF2A6; } .la-audit__again { display: block; margin: 12px auto 0; background: none; border: 0; color: #8A8A8A; font-family: Poppins, sans-serif; font-size: 12px; cursor: pointer; text-decoration: underline; } .la-audit__again:hover { color: #fff; } /* Mini-audyt: pole „wpiszę sam" pod opcją z własną odpowiedzią. */ .la-audit__free { display: flex; gap: 10px; margin-top: 12px; } .la-audit__free input { flex: 1 1 auto; padding: 12px 14px; background: #1B1B1B; border: 1px solid rgba(94, 242, 166, .5); border-radius: 12px; color: #fff; font-family: Poppins, sans-serif; font-size: 14px; } .la-audit__free input:focus { outline: none; border-color: #5EF2A6; } .la-audit__free input::placeholder { color: #6E6E6E; } .la-audit__free button { flex: 0 0 auto; padding: 0 20px; background: #5EF2A6; color: #111; border: 0; border-radius: 12px; font-family: Poppins, sans-serif; font-size: 13.5px; font-weight: 600; cursor: pointer; } /* Mini-audyt: aranżacja à la Typeform — numer pytania w mięcie, wejścia z kaskadą, opcje w dwóch kolumnach na szerszych ekranach. */ .la-audit__q { display: flex; align-items: baseline; gap: 10px; font-size: 19px; } .la-audit__q em { flex: 0 0 auto; color: #5EF2A6; font-style: normal; font-weight: 600; font-size: 14px; letter-spacing: .02em; } @keyframes laStepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .la-audit__q { animation: laStepIn .28s ease both; } .la-audit__opt { animation: laStepIn .28s ease both; } .la-audit__free { animation: laStepIn .25s ease both; } .la-audit__list li { animation: laStepIn .3s ease both; } .la-audit__list li:nth-child(2) { animation-delay: 90ms; } .la-audit__list li:nth-child(3) { animation-delay: 180ms; } @media (prefers-reduced-motion: reduce) { .la-audit__q, .la-audit__opt, .la-audit__free, .la-audit__list li { animation: none; } } @media (min-width: 620px) { .la-audit__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } /* nieparzysta ostatnia opcja rozciąga się na całą szerokość — bez dziury */ .la-audit__opts .la-audit__opt:last-child:nth-child(odd) { grid-column: 1 / -1; } } /* Karta mini-audytu wpada pod regułę full-width dla dzieci sekcji (width:100%, max-width:none) — dwa id w selektorze przebijają ją i przywracają słupek. */ #main #mini-audyt.la-audit { width: 100% !important; max-width: 760px !important; } /* Własna pigułka „O nas" w navbarze (leadagain-enhance.js) — metryki 1:1 z pigułek szablonu; hover i stan aktywny (scroll-spy) z CSS, bo element jest nasz, nie Reactowy. */ .la-nav-item { align-self: center; } .la-nav-item a { display: block; /* 11px zamiast 12 z pigułek szablonu: ich border siedzi w box-shadow, nasz w realnym borderze — po 1px z góry i dołu, razem te same 43 px */ padding: 11px 24px; border: 1px solid rgba(34, 34, 34, 0); border-radius: 50px; color: #C9C9C9; font-family: Poppins, sans-serif; font-size: 16px; line-height: 1.2; font-weight: 400; white-space: nowrap; text-decoration: none; transition: color .15s ease, border-color .15s ease; } /* Hover 1:1 z pigułkami szablonu: to TEKST robi się miętowy (a nie obrys), obrys dostaje tę samą przygaszoną biel co reszta. Wcześniej moja pigułka robiła odwrotnie — biały tekst + miętowy obrys — i jako jedyna nie „zapalała się" na miętowo. */ .la-nav-item a:hover { color: #5EF2A6; border-color: rgba(255, 255, 255, .25); } .la-nav-item a.la-nav-current { color: #fff; border-color: #5EF2A6; } /* Pigułka otwierająca drugą linijkę H1 — po lewym skraju, bez wcięcia. */ .la-h1-pill--lead { margin-left: 0; } /* =========================================================================== Restrukturyzacja 2 (2026-08-18): mniej sekcji, framework pod hero, „Dlaczego my" z tabelą porównawczą, pasek platform reklamowych. Cięcia: Plans (bento — duplikował Usługi) znika w całości; Benefits (#liczby) oddaje skorupę mini-audytowi, About (#dlaczego-my po zmianie sluga) — tabeli „Dlaczego my". Liczby z Benefits żyją w .la-why__facts. =========================================================================== */ section[data-framer-name="Plans section"] { display: none !important; } section[data-framer-name="Benefits section"] > *:not(.la-audit) { display: none !important; } section[data-framer-name="Benefits section"] { padding: 110px 40px !important; } section[data-framer-name="About section"] > *:not(.la-why) { display: none !important; } section[data-framer-name="About section"] { padding: 110px 40px !important; } /* „Jak działamy" pod hero: miętowy akcent na numerach kroków. */ section[data-framer-name="Process section"] [data-framer-name="Process number"] { background: rgba(94, 242, 166, .12) !important; border: 1px solid rgba(94, 242, 166, .3); } section[data-framer-name="Process section"] [data-framer-name="Process number"] p { color: #5EF2A6 !important; } /* Navbar w kolejności sekcji na stronie (flex order — DOM Reacta bez zmian). */ /* Kolejność zakotwiczona w kontenerze szablonu, NIE w obecności pigułki: wcześniejsza brama :has(> .la-nav-item) umierała w chwili, gdy przebudowa wariantu wymiotła pigułkę — i cały navbar widocznie się przetasowywał, dopóki strażnik jej nie wstawił z powrotem. */ [data-framer-name="Navigation items"] > div:has(a[href$="#process"]) { order: 1; } [data-framer-name="Navigation items"] > .la-nav-item { order: 2; } [data-framer-name="Navigation items"] > div:has(a[href$="#services"]) { order: 3; } [data-framer-name="Navigation items"] > div:has(a[href$="#dlaczego-my"]) { order: 4; } [data-framer-name="Navigation items"] > div:has(a[href$="#faq"]) { order: 5; } /* ---- Dlaczego my: tabela porównawcza ------------------------------------ */ /* .la-why jest bezpośrednim dzieckiem sekcji, więc reguła pełnej szerokości go rozciąga — szerokość tniemy na elementach wewnętrznych. */ .la-why { text-align: center; font-family: Poppins, sans-serif; } .la-why__pill { display: inline-block; padding: 6px 16px; border-radius: 50px; border: 1px solid rgba(94, 242, 166, .35); color: #5EF2A6; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .la-why h2 { margin: 18px auto 0; /* 720px łamało białe zdanie z sierotą — przy 45px potrzebuje ~900px. */ max-width: 1000px; color: #fff; font-size: clamp(28px, 3vw, 40px); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; } .la-why h2 span { display: block; color: #5EF2A6; } .la-why__sub { margin: 14px auto 0; max-width: 620px; color: #C9C9C9; font-size: 16px; line-height: 1.6; } .la-why__table { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 1040px; margin: 36px auto 0; text-align: left; } .la-why__col { border-radius: 18px; padding: 26px 26px 16px; border: 1px solid rgba(255, 255, 255, .1); background: #1D1D1D; } .la-why__col--us { border-color: rgba(94, 242, 166, .35); background: linear-gradient(180deg, rgba(94, 242, 166, .07), rgba(94, 242, 166, .02)); box-shadow: 0 0 26px rgba(94, 242, 166, .07); } .la-why__col h3 { margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #9A9A9A; } .la-why__col--us h3 { color: #5EF2A6; } .la-why__col p { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .07); color: #B9B9B9; font-size: 14.5px; line-height: 1.5; } .la-why__col p:first-of-type { border-top: none; } .la-why__col--us p { color: #ECECEC; } .la-why__col p::before { flex: 0 0 auto; font-weight: 700; } .la-why__col--them p::before { content: "✕"; color: #6E6E6E; } .la-why__col--us p::before { content: "✓"; color: #5EF2A6; } .la-why__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 1040px; margin: 26px auto 0; } .la-why__facts span { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; max-width: 340px; padding: 14px 20px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .12); background: #232323; color: #B9B9B9; font-size: 12.5px; text-align: left; } .la-why__facts b { color: #fff; font-size: 18px; font-weight: 600; } @media (max-width: 700px) { .la-why__table { grid-template-columns: 1fr; } } /* =========================================================================== Adaptacje z szablonu „Machine" (2026-08-18) — dwie mechaniki, własny markup: 1. Karty procesu nakładające się przy przewijaniu (u nich sekcja Services: position:sticky + nieprzezroczyste tło; każda kolejna karta wsuwa się na poprzednią, zostawiając widoczny pasek krawędzi). 2. Przewijany pasek pod hero — u nich logotypy klientów, u nas kanały, które spinamy (zero fałszywego dowodu społecznego). =========================================================================== */ /* ---- 1. „Jak działamy": karty w stosie ---------------------------------- */ section[data-framer-name="Process section"] [data-framer-name="Process container"] { position: sticky; padding: 28px !important; border-radius: 26px; border: 1px solid rgba(255, 255, 255, .1); background: #1A1A1A; box-shadow: 0 -18px 40px rgba(0, 0, 0, .45); } /* Przesunięte punkty zatrzymania: spod każdej karty wystaje krawędź poprzedniej, więc widać, że to stos, a nie jedna karta. Navbar kończy się na 86 px — pierwsza karta staje 16 px pod nim. */ section[data-framer-name="Process section"] [data-framer-name="Process container"]:nth-child(1) { top: 102px; } section[data-framer-name="Process section"] [data-framer-name="Process container"]:nth-child(2) { top: 126px; } section[data-framer-name="Process section"] [data-framer-name="Process container"]:nth-child(3) { top: 150px; } /* Zapas pod listą: złożony stos zatrzymuje się na moment, zamiast odjeżdżać w tej samej klatce, w której trzecia karta dojechała na miejsce. */ @media (min-width: 810px) { section[data-framer-name="Process section"] [data-framer-name="Process list container"] { padding-bottom: 160px; } } /* Numer kroku: duży akcent zamiast plakietki (wzorzec 60 px z szablonu). */ section[data-framer-name="Process section"] [data-framer-name="Process number"] { background: none !important; border: none !important; padding: 0 !important; } section[data-framer-name="Process section"] [data-framer-name="Process number"] p { font-size: 44px !important; font-weight: 700 !important; line-height: 1 !important; color: #5EF2A6 !important; } /* Na wąskich ekranach stos nie ma sensu — karty wracają do zwykłej listy. */ @media (max-width: 809px) { section[data-framer-name="Process section"] [data-framer-name="Process container"] { position: static; box-shadow: none; } section[data-framer-name="Process section"] [data-framer-name="Process number"] p { font-size: 32px !important; } } /* ---- 2. Pasek kanałów pod hero ----------------------------------------- */ .la-strip { /* Element flexowy domyślnie rośnie do szerokości zawartości (min-width:auto), a tor jest szerszy niż ekran — bez tych trzech linijek pasek rozpychał całą stronę w poziomie na wąskich ekranach. */ align-self: stretch; width: 100%; min-width: 0; padding: 30px 40px 34px; border-bottom: 1px solid rgba(255, 255, 255, .07); font-family: Poppins, sans-serif; overflow: hidden; } .la-strip__label { margin: 0 0 16px; text-align: center; color: #7E7E7E; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } /* Maska wygasza oba końce, żeby elementy nie ucinały się na krawędzi ekranu. */ .la-strip__mask { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .la-strip__track { display: flex; width: max-content; gap: 12px; animation: laStrip 44s linear infinite; } .la-strip:hover .la-strip__track { animation-play-state: paused; } .la-strip__track span { flex: 0 0 auto; padding: 10px 20px; border-radius: 50px; border: 1px solid rgba(255, 255, 255, .1); background: #1A1A1A; color: #C4C4C4; font-size: 13.5px; white-space: nowrap; } /* Tor jest zdublowany, więc przesunięcie o połowę wraca do stanu wyjściowego. */ @keyframes laStrip { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 6px)); } } @media (prefers-reduced-motion: reduce) { .la-strip__track { animation: none; } } /* ---- 3. Fala po wierszach w karcie „Audyt i plan" ------------------------ Adaptacja animacji z karty „Marketing Automation" (szablon Machine). Tam jest to maszyna stanów Framera: pięć wariantów (Inactive → Active 1-4 → Inactive) przełączanych po 100-200 ms, każdy z inną wysokością słupków, spięte sprężyną (duration .4s, bounce .2). Efekt: fala biegnąca po słupkach. U nas ten sam pomysł bez maszyny stanów — wiersze są poziome, więc fala przesuwa się w dół listy: opóźnienie rosnące co 220 ms i sprężysta krzywa z lekkim przestrzeleniem. Czyta się jak przeglądanie procesu wiersz po wierszu, czyli dokładnie to, co robimy na etapie audytu. */ @keyframes laFala { 0%, 34%, 100% { background-color: rgba(255, 255, 255, .13); transform: scaleX(1); } 12% { background-color: rgba(94, 242, 166, .55); transform: scaleX(1.012); } } section[data-framer-name="Process section"] [data-framer-name="Business processes"] [data-framer-name="Data"] > * { transform-origin: left center; animation: laFala 3.6s cubic-bezier(.34, 1.4, .64, 1) infinite; will-change: background-color, transform; } section[data-framer-name="Process section"] [data-framer-name="Business processes"] [data-framer-name="Data"]:nth-child(1) > * { animation-delay: 0.00s; } section[data-framer-name="Process section"] [data-framer-name="Business processes"] [data-framer-name="Data"]:nth-child(2) > * { animation-delay: 0.22s; } section[data-framer-name="Process section"] [data-framer-name="Business processes"] [data-framer-name="Data"]:nth-child(3) > * { animation-delay: 0.44s; } section[data-framer-name="Process section"] [data-framer-name="Business processes"] [data-framer-name="Data"]:nth-child(4) > * { animation-delay: 0.66s; } section[data-framer-name="Process section"] [data-framer-name="Business processes"] [data-framer-name="Data"]:nth-child(5) > * { animation-delay: 0.88s; } section[data-framer-name="Process section"] [data-framer-name="Business processes"] [data-framer-name="Data"]:nth-child(6) > * { animation-delay: 1.10s; } section[data-framer-name="Process section"] [data-framer-name="Business processes"] [data-framer-name="Data"]:nth-child(7) > * { animation-delay: 1.32s; } section[data-framer-name="Process section"] [data-framer-name="Business processes"] [data-framer-name="Data"]:nth-child(8) > * { animation-delay: 1.54s; } section[data-framer-name="Process section"] [data-framer-name="Business processes"] [data-framer-name="Data"]:nth-child(9) > * { animation-delay: 1.76s; } section[data-framer-name="Process section"] [data-framer-name="Business processes"] [data-framer-name="Data"]:nth-child(10) > * { animation-delay: 1.98s; } @media (prefers-reduced-motion: reduce) { section[data-framer-name="Process section"] [data-framer-name="Business processes"] [data-framer-name="Data"] > * { animation: none; } } /* =========================================================================== FAQ + formularz kontaktowy obok siebie (prośba usera 2026-08-18). Nagłówek nad całością, akordeony w lewej kolumnie, formularz (przeniesiony z sekcji Kalendarz przez moveForm) w prawej. Poniżej 810 px wszystko wraca do jednej kolumny — sekcja zostaje flexem szablonu, formularz idzie na dół. =========================================================================== */ @media (min-width: 810px) { section[data-framer-name="FAQ"] { display: grid !important; grid-template-columns: 1fr 1fr; gap: 40px 48px; align-items: start !important; } section[data-framer-name="FAQ"] > .la-faq-form { align-self: start !important; } section[data-framer-name="FAQ"] > [data-framer-name="Header"] { grid-column: 1 / -1; } section[data-framer-name="FAQ"] > div:not([data-framer-name="Header"]):not(.la-faq-form) { grid-column: 1; } section[data-framer-name="FAQ"] > .la-faq-form { grid-column: 2; grid-row: 2 / span 8; } } .la-faq-form { display: flex; flex-direction: column; } .la-faq-form .la-alt-label { margin-top: 0; } /* =========================================================================== UNIFIKACJA DNA DESIGNU (2026-08-18, prośba usera: „wszystko jest we wszystkie światy"). Wzorcem jest szablonowa sekcja Usługi: - pigułka sekcji: tekst #9CFECA 16px/400, tło rgba(156,254,202,.08), promień 50px, padding 10px 20px, bez ramki i wersalików; - nagłówek H2: 45px/600, biały, interlinia 1.4; - karta: tło #232323, promień 25px, ramka rgba(255,255,255,.08); - akcenty/liczby: jaskrawa mięta #5EF2A6. Blok celowo stoi na końcu pliku — nadpisuje wcześniejsze wartości tych samych selektorów, żeby zmiana była w jednym miejscu. =========================================================================== */ /* Pigułki sekcji — wszystkie wstawki mówią stylem pigułki „Usługi", łącznie z jej poświatą (0 0 20px na zewnątrz + rozświetlenie inset). */ .la-onas__pill, .la-why__pill, .la-audit__pill, .la-sec-pill span { display: inline-block; background: rgba(156, 254, 202, .08); border: none; border-radius: 50px; padding: 10px 20px; color: #9CFECA; font-size: 16px; font-weight: 400; letter-spacing: normal; text-transform: none; box-shadow: 0 0 20px rgba(94, 242, 166, .1), inset 2px 2px 4px rgba(94, 242, 166, .18); font-family: Poppins, sans-serif; } /* Wiersz pigułki w sekcjach szablonu (Kalendarz, Final CTA): pełna szerokość wiersza flexowego, pigułka wyśrodkowana. */ .la-sec-pill, section[data-framer-name="Kalendarz"] > .la-sec-pill { /* Drugi selektor podbija specyficzność ponad regułę kolumn kalendarza (> div → flex:1 1 0 !important), która robiła z pigułki trzecią kolumnę. */ flex: 0 0 100% !important; width: 100% !important; display: flex; justify-content: center; margin-bottom: 8px; } section[data-framer-name="Kalendarz"], section[data-framer-name="Final CTA"] { flex-wrap: wrap !important; } /* Nagłówki sekcji-wstawek — rozmiar szablonowego H2. */ .la-onas h2, .la-why h2 { font-size: clamp(30px, 3vw, 45px); font-weight: 600; line-height: 1.35; letter-spacing: normal; } /* Karty — jedno tło, jeden promień, jedna ramka. */ .la-why__col, .la-why__facts span, section[data-framer-name="Process section"] [data-framer-name="Process container"] { background: #232323; border: 1px solid rgba(255, 255, 255, .08); border-radius: 25px; } .la-why__col--us { background: linear-gradient(180deg, rgba(94, 242, 166, .08), rgba(94, 242, 166, .015)), #232323; border-color: rgba(94, 242, 166, .35); } section[data-framer-name="Process section"] [data-framer-name="Process container"] { box-shadow: 0 -18px 40px rgba(0, 0, 0, .45); } /* Kafelki liczb pod tabelą — życie: miętowa liczba, oddech, delikatna poświata od góry zamiast suchego prostokąta. */ .la-why__facts span { gap: 5px; padding: 20px 24px; background: linear-gradient(180deg, rgba(94, 242, 166, .05), rgba(0, 0, 0, 0) 55%), #232323; color: #A9A9A9; font-size: 13px; } .la-why__facts b { color: #5EF2A6; font-size: 24px; } /* Chipy (O nas, pasek kanałów) — wspólne tło i ramka, kształt pigułki. */ .la-strip__track span { background: #232323; border: 1px solid rgba(255, 255, 255, .08); } /* Balans kolumn FAQ | formularz (2026-08-19): lista akordeonów rozpina się na te same wiersze siatki co formularz i rozkłada pytania równomiernie, więc obie kolumny kończą się na tej samej wysokości. Pytania pogrubione, karty wyższe — kolumna nie wygląda na pustą przy dłuższym formularzu. */ @media (min-width: 810px) { section[data-framer-name="FAQ"] > div:has([data-framer-name="Closed"]) { grid-row: 2 / span 8; align-self: stretch; } /* Karty pytań ROSNĄ równo i wypełniają kolumnę same z siebie — odstępy zostają zwykłe (18px), a nie rozstrzelone przez space-between. */ section[data-framer-name="FAQ"] > div:has([data-framer-name="Closed"]) > [data-framer-name="Default"] { height: 100% !important; justify-content: flex-start !important; gap: 18px !important; } section[data-framer-name="FAQ"] > div:has([data-framer-name="Closed"]) > [data-framer-name="Default"] > div { flex: 1 0 auto !important; display: flex !important; } section[data-framer-name="FAQ"] > div:has([data-framer-name="Closed"]) > [data-framer-name="Default"] > div > [data-framer-name] { width: 100%; height: auto !important; flex: 1; } /* Zamknięta karta centruje pytanie w pionie; otwarta (wariant „Open") zostaje przy naturalnym układzie od góry. */ section[data-framer-name="FAQ"] [data-framer-name="Closed"] { display: flex !important; flex-direction: column !important; justify-content: center !important; } } section[data-framer-name="FAQ"] [data-framer-name="Question"] p { font-weight: 600 !important; } section[data-framer-name="FAQ"] [data-framer-name="Closed"], section[data-framer-name="FAQ"] [data-framer-name="Open"] { padding-top: 28px !important; padding-bottom: 28px !important; } /* Obrysy w sekcji FAQ — jedna ramka DNA na akordeonach, karcie formularza i polach (pola szablonu nie miały żadnej, select miał za mocną). */ section[data-framer-name="FAQ"] [data-framer-name="Closed"], section[data-framer-name="FAQ"] [data-framer-name="Open"] { border: 1px solid rgba(255, 255, 255, .08) !important; } .la-faq-form [data-framer-name="Callback form card"] { border: 1px solid rgba(255, 255, 255, .08) !important; } .la-faq-form .framer-form-text-input { border: 1px solid rgba(255, 255, 255, .08) !important; } /* Fokus pól formularza: JEDNA równa miętowa ramka na pudełku pola — żadnych outline'ów ani cieni wystających poza obrys, identycznie w każdej rubryce (pola szablonu nie podświetlały się wcale, e-mail dublował obrys). */ .la-faq-form .framer-form-text-input:focus-within { border-color: rgba(94, 242, 166, .55) !important; box-shadow: none !important; } .la-faq-form input:focus, .la-faq-form input:focus-visible, .la-faq-form textarea:focus, .la-faq-form textarea:focus-visible { outline: none !important; box-shadow: none !important; } .la-q-field input:focus, .la-q-field input:focus-visible { outline: none !important; outline-offset: 0 !important; border-color: rgba(94, 242, 166, .55) !important; box-shadow: none !important; } /* Premium scroll: płynne dojazdy do kotwic i lądowanie pod navbarem. */ html { scroll-behavior: smooth; scroll-padding-top: 100px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Kafel dnia wybrany w widgecie — potwierdzenie kliknięcia. NIE oznacza „termin wolny": o dostępności godzin decyduje wyłącznie Cal.com. */ .la-book__day.is-picked { border-color: rgba(94, 242, 166, .55); background: rgba(94, 242, 166, .1); } .la-book__day.is-picked b { color: #5EF2A6; } /* Kafelki ikon wewnątrz kart procesu: po ujednoliceniu kart do #232323 miały tło w kolorze karty, więc znikały — zostawała sama miętowa ikona wisząca w powietrzu. Zagnieżdżona powierzchnia idzie o stopień jaśniej + delikatna ramka, tak jak wiersze „Data" w tej samej karcie. */ section[data-framer-name="Process section"] [data-framer-name="Pie chart"], section[data-framer-name="Process section"] [data-framer-name="Line up chart"], section[data-framer-name="Process section"] [data-framer-name="Note"], section[data-framer-name="Process section"] [data-framer-name="Bar chart"], section[data-framer-name="Process section"] [data-framer-name="Business processes"] { background: #2E2E2E !important; border: 1px solid rgba(255, 255, 255, .07); } /* Wejście menu mobilnego: nakładka pojawia się, a pozycje wsuwają się kaskadą od góry — bez tego menu po prostu „wyskakiwało" i sprawiało wrażenie surowego w porównaniu z resztą strony. */ @keyframes laMenuIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .la-menu.is-on .la-menu__links a, .la-menu.is-on .la-menu__cta, .la-menu.is-on .la-menu__micro { animation: laMenuIn .38s cubic-bezier(.32, .72, 0, 1) both; } .la-menu.is-on .la-menu__links a:nth-child(1) { animation-delay: .04s; } .la-menu.is-on .la-menu__links a:nth-child(2) { animation-delay: .08s; } .la-menu.is-on .la-menu__links a:nth-child(3) { animation-delay: .12s; } .la-menu.is-on .la-menu__links a:nth-child(4) { animation-delay: .16s; } .la-menu.is-on .la-menu__links a:nth-child(5) { animation-delay: .20s; } .la-menu.is-on .la-menu__cta { animation-delay: .24s; } .la-menu.is-on .la-menu__micro { animation-delay: .28s; } @media (prefers-reduced-motion: reduce) { .la-menu.is-on .la-menu__links a, .la-menu.is-on .la-menu__cta, .la-menu.is-on .la-menu__micro { animation: none; } } /* --------------------------------------------------------------------------- Stopka na telefonie: 727 px wysokości (90% ekranu) na dziewięć linków i jedną linijkę praw autorskich to nieproporcjonalnie dużo przewijania. Sama kolumna linków zajmowała 406 px — każdy link w osobnym wierszu z odstępem 24 px. Układamy je w dwie kolumny i zbliżamy sekcje. --------------------------------------------------------------------------- */ @media (max-width: 639px) { section[data-framer-name="Footer"] [data-framer-name="Mobile"] { gap: 18px !important; padding: 24px 20px 28px !important; } section[data-framer-name="Footer"] [data-framer-name="Links"] { display: grid !important; grid-template-columns: 1fr 1fr; gap: 13px 16px !important; align-items: start !important; padding: 0 !important; width: 100%; } /* Pozycje wyrównane do lewej — wyśrodkowane w dwóch kolumnach tworzyłyby poszarpaną krawędź. */ section[data-framer-name="Footer"] [data-framer-name="Links"] > div { justify-content: flex-start !important; text-align: left; } section[data-framer-name="Footer"] [data-framer-name="Copyright + Social icons"] { gap: 14px !important; } /* Wordmark: 80 px canvasu wystarczy, ale bez dodatkowego odstępu pod nim. */ section[data-framer-name="Footer"] .la-footer-fx { margin-bottom: -4px; } }