/* ========================================================================== DAEXPORT — premium.css (warstwa „premium": rytm sekcji, ruch, hero, mapa) Ładowany OSTATNI w , na każdej publicznej stronie. Zasady: tylko transform/opacity w ruchu (zero przesunięć układu), każdy stan „ukryty na start" wyłącznie pod html.js-motion (bez JS i przy reduced-motion strona jest w 100 % widoczna i statyczna). Kolory: wyłącznie skala pomarańczu marki (#ff6b00 / #e66000 / rgba) i neutralne szarości. Haki wstawiane przez injector: .reveal, .magnetic, .hero-visual (+ .cp), .process[data-process] > .process-line, .coverage-map (+ .pin), data-count. ========================================================================== */ /* --- 0. WSPÓLNA KRZYWA RUCHU --- */ /* Jedna krzywa „ease-out expo" dla wszystkiego, co się wysuwa: ruch startuje szybko i miękko dohamowuje — dzięki temu 600–700 ms nie wygląda na wolne. */ :root { --ease-premium: cubic-bezier(.16, 1, .3, 1); } /* --- 1. TYPOGRAFIA --- */ /* Montserrat 800/900 ma szerokie litery — lekko ujemny tracking i wyważone łamanie wierszy (balance) zdejmują „sieroty" z dwuwierszowych nagłówków w 8 językach bez ręcznych
. */ h1, h2, h3 { text-wrap: balance; } h1, h2 { letter-spacing: -.02em; } /* Liczniki hero: cyfry o stałej szerokości, żeby tekst nie „drgał" w trakcie odliczania (0 → 120) i nie ruszał sąsiednich kolumn siatki. */ [data-count] { font-variant-numeric: tabular-nums; } /* --- 2. RYTM SEKCJI --- */ /* Sekcje mają naprzemienne tła #0a0a0a / #0d0d0d, różnica jest niemal niewidoczna — cienka pomarańczowa linia na styku daje oku punkt zaczepienia. `main > section + section` pomija hero (pierwsza sekcja) bez selektora po id. */ main > section + section { position: relative; } main > section + section::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent 0%, rgba(255, 107, 0, .35) 50%, transparent 100%); } /* Delikatna poświata za nagłówkiem sekcji. `isolation: isolate` tworzy własny kontekst warstw — bez niego pseudoelement z z-index:-1 chowałby się POD tłem sekcji i nie byłoby go widać wcale. */ main section h2 { position: relative; isolation: isolate; } main section h2::before { content: ''; position: absolute; /* Tylko pionowe „wylanie" poświaty: -12 % w poziomie wystawało poza kontener i dawało 23 px (360 px) / 74 px (1440 px) poziomego przewijania na każdej stronie. */ inset: -45% 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at center, rgba(255, 107, 0, .09) 0%, rgba(255, 107, 0, 0) 62%); } /* --- 3. KARTY: UNIESIENIE NA HOVER --- */ /* Tylko urządzenia z prawdziwym hoverem — na dotyku „przyklejony" hover zostawiałby uniesioną kartę po tapnięciu. Sam transform + cień + obrys, żadnych zmian rozmiaru. */ @media (hover: hover) { .glass-card:hover, html.js-motion .glass-card.reveal.is-in:hover { transform: translateY(-3px); border-color: rgba(255, 107, 0, .45); box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 107, 0, .12); } /* Karta z formularzem nie ma unosić się, gdy ktoś w niej pisze. */ .glass-card:has(form):hover { transform: none; } } /* --- 4. GŁÓWNE CTA: GŁĘBIA --- */ /* Kontrast (ciemny tekst na pomarańczu) rozstrzyga style.css — tu wyłącznie światło od góry i miękki pomarańczowy cień, bez dotykania koloru. */ a.bg-accent-orange, button.bg-accent-orange { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 18px -6px rgba(255, 107, 0, .45); transition: transform .3s var(--ease-premium), box-shadow .3s ease, background-color .3s ease; } a.bg-accent-orange:hover, button.bg-accent-orange:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 14px 30px -8px rgba(255, 107, 0, .55); } /* Magnetyczne CTA: JS pisze inline transform (pointer-follow, max 6 px) tylko przy myszy; tu jest sama płynność ruchu i powrót do zera po zjechaniu. */ .magnetic { transition: transform .3s var(--ease-premium), box-shadow .3s ease, background-color .3s ease; } /* --- 5. FOCUS-VISIBLE --- */ /* Pierścień fokusu w kolorze marki, z odstępem — widoczny na kartach, tle i na pomarańczowych przyciskach. Outline podąża za border-radius elementu. */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent-orange, #ff6b00); outline-offset: 3px; } /* Kliknięcie myszą nie ma zostawiać pierścienia (tylko klawiatura). */ :focus:not(:focus-visible) { outline: none; } /* --- 6. PASEK POSTĘPU PRZEWIJANIA --- */ /* Tworzony przez premium.js (bez JS nie ma czego pokazywać). scaleX zamiast width — zero relayoutu przy każdym zdarzeniu scroll. z-index nad nagłówkiem (header ma z-50), pod menu mobilnym (z-60). */ .dae-scroll-progress { position: fixed; left: 0; top: 0; width: 100%; height: 3px; z-index: 55; pointer-events: none; background: linear-gradient(90deg, #e66000, #ff6b00); transform-origin: 0 50%; transform: scaleX(var(--sp, 0)); box-shadow: 0 0 10px rgba(255, 107, 0, .45); } /* --- 7. REVEAL (wjazd elementów przy przewijaniu) --- */ /* Stan startowy WYŁĄCZNIE pod html.js-motion: bez JS (klasa nie powstaje) i przy reduced-motion wszystko jest od razu widoczne. Opóźnienie kaskady (transition-delay) ustawia JS per element i zdejmuje je po wjeździe — inaczej opóźniałoby także hover kart. */ html.js-motion .reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s var(--ease-premium), transform .65s var(--ease-premium); } html.js-motion .glass-card.reveal { transition: opacity .65s var(--ease-premium), transform .65s var(--ease-premium), border-color .4s ease, box-shadow .4s ease; } html.js-motion .reveal.is-in { opacity: 1; transform: none; } /* Druk: nic nie ma zostać ukryte na papierze. */ @media print { html.js-motion .reveal { opacity: 1; transform: none; } } /* --- 7b. HERO NA TELEFONIE: CTA WYŻEJ --- */ /* Na 360 px pierwszy przycisk był ~1090 px od góry (badge, podtytuł, H1, lead, ramka „wiodący specjalista", dopiero CTA — audyt wizualny 05.09). Kolumna tekstu staje się flexem, a ramka i statystyki lądują ZA przyciskami; treść i kolejność w DOM bez zmian. */ @media (max-width: 1023px) { #home .space-y-8.animate-fade-up { display: flex; flex-direction: column; align-items: flex-start; } #home .space-y-8.animate-fade-up > * { width: 100%; } #home .space-y-8.animate-fade-up > .inline-flex { width: auto; } /* badge zostaje pigułką, nie pasem */ #home .space-y-8.animate-fade-up > p.border-l-4 { order: 10; } #home .space-y-8.animate-fade-up > div.grid { order: 11; } } /* --- 8. HERO: ILUSTRACJA AUTA (prawa kolumna siatki na lg+) --- */ /* Poniżej 1024 px ukryta — CTA hero ma zostać nad linią zgięcia telefonu. Na lg+ figura w prawej kolumnie z miękką pomarańczową poświatą (radial), bez backdrop-filter (tanio dla GPU). */ .hero-visual { display: none; } @media (min-width: 1024px) { .hero-visual { display: flex; align-items: center; justify-content: center; position: relative; isolation: isolate; /* poświata (z-index:-1) ma zostać wewnątrz figury, nad zdjęciem hero */ max-height: 560px; } .hero-visual::before { content: ''; position: absolute; inset: 8% 4%; z-index: -1; pointer-events: none; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255, 107, 0, .22) 0%, rgba(255, 107, 0, .06) 45%, rgba(255, 107, 0, 0) 72%); } .hero-visual svg { display: block; width: 100%; height: auto; max-height: 560px; } /* Wjazd 200 ms po załadowaniu — tekst hero (LCP) nie czeka na nic. */ html.js-motion .hero-visual { opacity: 0; transform: translateX(24px); animation: heroVisualIn .9s var(--ease-premium) .2s forwards; } } @keyframes heroVisualIn { to { opacity: 1; transform: none; } } /* Punkty kontrolne na aucie pulsują — transform-box: fill-box, bo w SVG transform-origin liczy się domyślnie od lewego-górnego rogu CAŁEGO płótna, nie od środka kropki. Przesunięcia faz przez nth-of-type, bez JS. */ /* Pulsuje wyłącznie HALO (opacity), nie cała grupa (transform): transform na elementach SVG nie jest kompozytowany — 6 grup skalowanych co klatkę to ciągłe przemalowywanie całego rysunku (TBT +~400 ms w Lighthouse mobile). Opacity jest tania i wygląda tak samo. */ html.js-motion .hero-visual .cp circle:first-of-type { animation: cpPulse 2.4s ease-in-out infinite; } html.js-motion .hero-visual .cp:nth-of-type(2n) circle:first-of-type { animation-delay: .6s; } html.js-motion .hero-visual .cp:nth-of-type(3n) circle:first-of-type { animation-delay: 1.2s; } html.js-motion .hero-visual .cp:nth-of-type(5n) circle:first-of-type { animation-delay: 1.8s; } @keyframes cpPulse { 0%, 100% { opacity: .18; } 50% { opacity: .5; } } /* --- 9. LINIA PROCESU („Co sprawdzamy") --- */ /* Injector owija siatkę sześciu kart w .process[data-process] i wstawia pustą .process-line. Telefon: pionowa linia po lewej; lg+: pozioma nad kartami. Wypełnienie steruje --p (0–1) z premium.js. Bez JS / przy reduced-motion linia jest wypełniona w całości — dekoracja ma wyglądać na skończoną. */ .process { position: relative; padding-left: 1.75rem; } .process-line { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: rgba(255, 255, 255, .08); pointer-events: none; } .process-line::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, #ff6b00, #e66000); box-shadow: 0 0 8px rgba(255, 107, 0, .5); transform-origin: 50% 0; transform: scaleY(var(--p, 0)); transition: transform .15s linear; } html:not(.js-motion) .process-line::after { transform: none; transition: none; } @media (min-width: 1024px) { .process { padding-left: 0; padding-top: 1.75rem; } .process-line { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 2px; } .process-line::after { background: linear-gradient(90deg, #ff6b00, #e66000); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); } } /* --- 10. MAPA ZASIĘGU (sekcja #services-seo) --- */ /* Pinezki wyskakują dopiero, gdy mapa dostanie .is-in (ma też .reveal, więc sama mapa wjeżdża jak karty). Pod reduced-motion pinezki stoją od razu. */ .coverage-map { max-width: 720px; margin: 0 auto 2.5rem; } .coverage-map svg { display: block; width: 100%; height: auto; } html.js-motion .coverage-map .pin { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .5s var(--ease-premium); } html.js-motion .coverage-map.is-in .pin { transform: scale(1); } html.js-motion .coverage-map.is-in .pin:nth-of-type(2n) { transition-delay: .12s; } html.js-motion .coverage-map.is-in .pin:nth-of-type(3n) { transition-delay: .24s; } html.js-motion .coverage-map.is-in .pin:nth-of-type(4n) { transition-delay: .36s; } /* --- 12. SKIP-LINK: pasek wsuwany na SPÓD belki nagłówka --- */ /* „Przejdź do treści" musi być pierwszym przystankiem tabulacji, ale bez fokusu ma być niewidoczny. Do 06.09 wyskakiwał w lewym górnym rogu, na logo, i wyglądał jak pozostałość po czymś (zgłoszenie Jakuba) — teraz wjeżdża na dolną krawędź belki nagłówka i czyta się jak jej część. Wysokość belki mierzy premium.js (--dae-header-h); 81 px to wartość awaryjna, czyli h-20 (80 px) + 1 px dolnej ramki nagłówka. ⚠️ Reguły stoją TUTAJ, bo premium.css ładuje KAŻDA strona serwisu — także /terms i /privacy, które celowo nie ładują /style.css i miały wcześniej własną kopię tych reguł (kopia usunięta 06.09: dwa źródła = pewny rozjazd). */ /* 20 px to WOLNY pas na spodzie belki: zawartość (logo, menu, przyciski) kończy się na 60 px przy belce 81 px — zmierzone, nie dobrane na oko. Wyższy pasek przycinał dół logo i przycisku „Zamów inspekcję". */ :root { --dae-header-h: 81px; --dae-skip-h: 20px; } .skip-link { position: fixed; top: 0; left: 0; right: 0; z-index: 60; /* nagłówek stoi na z-50 */ display: flex; align-items: center; height: var(--dae-skip-h); padding: 0 clamp(1rem, 4vw, 3rem); background: #ff6b00; border-top: 1px solid rgba(10, 10, 10, .28); /* czyta się jak rząd belki, nie plama */ color: #0a0a0a; font-family: 'Montserrat', system-ui, -apple-system, sans-serif; font-size: .63rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; text-decoration: none; transform: translateY(-100%); /* schowany NAD ekranem, dalej w tabulacji */ transition: transform .18s var(--ease-premium); } /* Przesunięcie liczone od dołu belki: bez fokusu -100 % (poza ekranem), po fokusie tyle, żeby DÓŁ paska zrównał się z dolną krawędzią nagłówka. */ .skip-link:focus, .skip-link:focus-visible { transform: translateY(calc(var(--dae-header-h) - var(--dae-skip-h))); outline: none; /* wskaźnikiem fokusu jest sam pasek + ramka */ box-shadow: inset 0 0 0 2px rgba(10, 10, 10, .85); } @media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } } /* --- 11. REDUCED MOTION: zero ruchu także w hoverach i przejściach --- */ /* Stany startowe są już odcięte przez brak html.js-motion; tu gasną jeszcze przejścia hover, które nie zależą od tej klasy. */ @media (prefers-reduced-motion: reduce) { .glass-card, .magnetic, a.bg-accent-orange, button.bg-accent-orange, .process-line::after, .dae-scroll-progress { transition: none; } .glass-card:hover { transform: none; } }