/* ===================================================================== ANIMACJE PRZY PRZEWIJANIU — cała witryna Arkusz sam z siebie NIE UKRYWA NICZEGO. Wszystkie reguły przygaszające siedzą pod klasą `html.bpsx-anim`, którą nadaje skrypt. Brak skryptu (blokada, błąd sklejki, stary cache) = strona bez animacji, nie strona z niewidoczną treścią. PUŁAPKA, KTÓREJ TU UNIKAMY: `calc()` ze zmienną i mnożeniem bywa po cichu wyrzucany ze sklejki przez Autoptimize razem z całą regułą. Wartości ujemne i wyliczenia zapisujemy więc wprost. ===================================================================== */ /* --- 1. Wejście treści i nagłówków --------------------------------- */ /* * NAGŁÓWKI WCHODZĄ Z NIEWIDOCZNEGO, NIE Z PRZYGASZENIA (poprawka * 2026-08-19, druga runda). * * Pierwsza wersja startowała z `opacity: .16`, czyli napis był czytelny, * tylko szary, i dopiero po chwili robił się czarny. Zgłoszone jako * „tekst się robi taki szary, ale już go widzę, a jak zescroluję dalej, * to robi się dopiero czarny”. Z zera tego problemu nie ma: napisu * albo nie widać, albo jest gotowy. * * Nagłówek unosi się odrobinę mniej niż treść (1.2 kontra 2.4 rem) — * różnica jest ledwie wyczuwalna, a nadaje sekcji rytm. */ html.bpsx-anim .bpsx-rozjasnia { opacity: 0; transform: translateY(1.2rem); transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: var(--bpsx-zwloka, 0s); will-change: opacity, transform; } html.bpsx-anim .bpsx-zjawia { opacity: 0; transform: translateY(2.4rem); transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: var(--bpsx-zwloka, 0s); will-change: opacity, transform; } html.bpsx-anim .bpsx-rozjasnia.jest-widoczna, html.bpsx-anim .bpsx-zjawia.jest-widoczna { opacity: 1; transform: translateY(0); } /* Po zakończeniu wejścia zdejmujemy `will-change` — trzymanie warstwy kompozytora dla kilkudziesięciu elementów kosztuje pamięć na telefonie. */ html.bpsx-anim .bpsx-zjawia.jest-widoczna, html.bpsx-anim .bpsx-rozjasnia.jest-widoczna { will-change: auto; } /* --- 2. Osoba z wyłączonym ruchem w systemie ----------------------- */ /* Skrypt i tak przerywa na wejściu, ale reguła zostaje jako druga linia obrony — gdyby ustawienie zmieniło się już po wczytaniu strony. */ @media (prefers-reduced-motion: reduce) { html.bpsx-anim .bpsx-zjawia, html.bpsx-anim .bpsx-rozjasnia { opacity: 1; transform: none; transition: none; } } /* ===================================================================== PRĄD PŁYNĄCY PO KONTURZE Cztery miejsca, celowo wyliczone z nazwy — nie „każdy kafel na stronie”: 1. kafle sekcji cech na kartach produktu (`.bpsx-cechy`) 2. kafle „Dlaczego Sluxer” na stronie głównej (`.bpsx-k-dlaczego`) 3. kafle produktów w mega menu (`.bpmh__produkt`) 4. karta z formularzem kontaktowym (`.bpsx-kontakt__karta`) Pierwsze trzy zapalają się po najechaniu kursorem. **Karta formularza świeci od razu, bez najeżdżania** — to jedyne miejsce na stronie, gdzie efekt ma przyciągać wzrok sam z siebie. JAK TO DZIAŁA. Warstwa nad kaflem dostaje stożkowy gradient obracający się dookoła i MASKĘ, która zostawia z niego wyłącznie ramkę o grubości 2 px. Maska to dwa prostokąty złożone przez `exclude`: pełny minus wnętrze. Dzięki temu nie trzeba rysować czterech osobnych krawędzi ani dokładać elementów do treści. Kąt obrotu jedzie własnością `--bpsx-kat`, zarejestrowaną przez `@property` jako kąt — bez rejestracji przeglądarka traktuje ją jak napis i nie umie go animować. Tam, gdzie `@property` nie działa, ramka po prostu stoi w miejscu zamiast krążyć. Efekt jest wtedy słabszy, ale nic się nie psuje. ===================================================================== */ @property --bpsx-kat { syntax: ''; initial-value: 0deg; inherits: false; } @keyframes bpsx-obieg { to { --bpsx-kat: 360deg; } } /* Ambientowa poświata w tle sekcji cech — dwa miękkie okręgi w kolorze marki, oddychające w bardzo wolnym rytmie. */ .bpsx-cechy { position: relative; isolation: isolate; overflow: hidden; } .bpsx-cechy::before { content: ""; position: absolute; inset: -20% -10%; z-index: -1; pointer-events: none; background: radial-gradient(38rem 26rem at 18% 12%, color-mix(in srgb, var(--bpsx-k-3ac2be) 16%, transparent), transparent 70%), radial-gradient(44rem 30rem at 86% 88%, color-mix(in srgb, var(--bpsx-k-3ac2be) 11%, transparent), transparent 72%); animation: bpsx-oddech 14s ease-in-out infinite alternate; } @keyframes bpsx-oddech { from { opacity: 0.55; transform: translate3d(0, 0, 0) scale(1); } to { opacity: 1; transform: translate3d(0, -1.2rem, 0) scale(1.04); } } /* --- sam kafel ----------------------------------------------------- */ .bpsx-cechy .bpsx-karta, .bpsx-k-dlaczego .bpsx-k-karta > .kt-inside-inner-col, .bpmh__produkt, .bpsx-kontakt__karta { position: relative; transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.35s ease, box-shadow 0.35s ease; } /* * Ramka. * * Cztery selektory, bo w każdym z tych elementów wolne jest INNE miejsce. * Na kaflu Kadence `::before` jest już zajęte przez ikonę, więc ramka * musi tam iść na `::after`; na pozostałych jest odwrotnie. To nie jest * powielenie tej samej reguły, tylko cztery różne wolne miejsca. * * Przy dokładaniu piątego: sprawdź w arkuszu, czy wybrane pseudo nie * rysuje już czegoś innego. Nadpisanie ikony ramką jest ciche. */ .bpsx-cechy .bpsx-karta::before, .bpsx-k-dlaczego .bpsx-k-karta > .kt-inside-inner-col::after, .bpmh__produkt::after, .bpsx-kontakt__karta::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; padding: 2px; background: conic-gradient( from var(--bpsx-kat), color-mix(in srgb, var(--bpsx-k-3ac2be) 0%, transparent) 0deg, color-mix(in srgb, var(--bpsx-k-3ac2be) 0%, transparent) 200deg, color-mix(in srgb, var(--bpsx-k-3ac2be) 95%, transparent) 268deg, var(--bpsx-k-78f0eb) 290deg, color-mix(in srgb, var(--bpsx-k-3ac2be) 95%, transparent) 312deg, color-mix(in srgb, var(--bpsx-k-3ac2be) 0%, transparent) 360deg ); -webkit-mask: linear-gradient(var(--bpsx-k-000000) 0 0) content-box, linear-gradient(var(--bpsx-k-000000) 0 0); mask: linear-gradient(var(--bpsx-k-000000) 0 0) content-box, linear-gradient(var(--bpsx-k-000000) 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.3s ease; } /* --- stan po najechaniu -------------------------------------------- */ /* `:focus-within` obok `:hover` — ten sam efekt dostaje osoba chodząca klawiszem Tab. Kontur skupienia zostaje nietknięty, to inna sprawa. */ /* Uniesienie dotyczy WYŁĄCZNIE kafli sekcji. Karta formularza jest duża i podskakiwałaby całym blokiem, a kafel w mega menu ma własną, lżejszą reakcję w arkuszu nagłówka — dokładanie drugiej dałoby dwa ruchy naraz. */ .bpsx-cechy .bpsx-karta:hover, .bpsx-cechy .bpsx-karta:focus-within, .bpsx-k-dlaczego .bpsx-k-karta > .kt-inside-inner-col:hover, .bpsx-k-dlaczego .bpsx-k-karta > .kt-inside-inner-col:focus-within { transform: translateY(-6px); box-shadow: 0 18px 40px color-mix(in srgb, var(--bpsx-k-06090f) 10%, transparent); } .bpsx-cechy .bpsx-karta:hover::before, .bpsx-cechy .bpsx-karta:focus-within::before, .bpsx-k-dlaczego .bpsx-k-karta > .kt-inside-inner-col:hover::after, .bpsx-k-dlaczego .bpsx-k-karta > .kt-inside-inner-col:focus-within::after, .bpmh__produkt:hover::after, .bpmh__produkt:focus-visible::after { opacity: 1; animation: bpsx-obieg 2.4s linear infinite; } /* KARTA FORMULARZA — świeci bez najeżdżania. Wolniej niż kafle (3,6 kontra 2,4 s) i słabiej: efekt, który jest zapalony przez cały czas, musi być spokojniejszy od takiego, który trwa dwie sekundy po najechaniu. */ .bpsx-kontakt__karta::before { opacity: 0.85; animation: bpsx-obieg 3.6s linear infinite; } /* --- ikona --------------------------------------------------------- */ /* Kafel sekcji cech: ikona jest osobnym elementem. */ .bpsx-cechy .bpsx-karta__ikona { transition: background-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); } .bpsx-cechy .bpsx-karta:hover .bpsx-karta__ikona, .bpsx-cechy .bpsx-karta:focus-within .bpsx-karta__ikona { background-color: color-mix(in srgb, var(--bpsx-k-3ac2be) 16%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--bpsx-k-3ac2be) 35%, transparent), 0 0 24px color-mix(in srgb, var(--bpsx-k-3ac2be) 35%, transparent); transform: translateY(-2px); } /* Kafel Kadence: ikona jest TŁEM warstwy `::before`, więc rozświetlamy samą warstwę. Rysunku (`background-image`) nie ruszamy — nadpisanie skrótem `background` skasowałoby go razem z pozycją i rozmiarem. */ .bpsx-k-dlaczego .bpsx-k-karta > .kt-inside-inner-col::before { transition: background-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); } .bpsx-k-dlaczego .bpsx-k-karta > .kt-inside-inner-col:hover::before, .bpsx-k-dlaczego .bpsx-k-karta > .kt-inside-inner-col:focus-within::before { background-color: color-mix(in srgb, var(--bpsx-k-3ac2be) 16%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--bpsx-k-3ac2be) 35%, transparent), 0 0 24px color-mix(in srgb, var(--bpsx-k-3ac2be) 35%, transparent); transform: translateY(-2px); } /* --- ruch wyłączony ------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .bpsx-cechy::before, .bpsx-cechy .bpsx-karta::before, .bpsx-k-dlaczego .bpsx-k-karta > .kt-inside-inner-col::after, .bpmh__produkt::after, .bpsx-kontakt__karta::before { animation: none; } .bpsx-cechy .bpsx-karta:hover, .bpsx-cechy .bpsx-karta:focus-within, .bpsx-k-dlaczego .bpsx-k-karta > .kt-inside-inner-col:hover, .bpsx-k-dlaczego .bpsx-k-karta > .kt-inside-inner-col:focus-within { transform: none; } } /* --- telefon -------------------------------------------------------- */ /* Na dotyku `:hover` zostaje zapalony po tapnięciu i kafel świeci do końca wizyty. Wyłączamy unoszenie i krążącą ramkę tam, gdzie nie ma kursora. */ @media (hover: none) { .bpsx-cechy .bpsx-karta:hover, .bpsx-k-dlaczego .bpsx-k-karta > .kt-inside-inner-col:hover { transform: none; box-shadow: none; } .bpsx-cechy .bpsx-karta:hover::before, .bpsx-k-dlaczego .bpsx-k-karta > .kt-inside-inner-col:hover::after, .bpmh__produkt:hover::after { opacity: 0; animation: none; } } /* ===================================================================== PRZYCISKI — DELIKATNE ŻYCIE BEZ NAJEŻDŻANIA KURSOREM Bardzo powolne, płytkie pulsowanie poświaty w kolorze marki. Ma być ledwo zauważalne: przycisk ma sprawiać wrażenie „włączonego”, a nie migać. Stąd 4,5 s na cykl i cień, który w najsłabszym momencie praktycznie znika. Poświata idzie `box-shadow`, a nie `filter` czy `transform` — nie rusza układu strony i nie tworzy nowej warstwy kompozytora dla każdego przycisku. Stan po najechaniu ma własny, mocniejszy cień w arkuszu nagłówka i tam wygrywa — dlatego pulsowanie zatrzymujemy na `:hover`. ===================================================================== */ @keyframes bpsx-tetno { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bpsx-k-2cb8b4) 0%, transparent); } 50% { box-shadow: 0 0 1.6rem 0.1rem color-mix(in srgb, var(--bpsx-k-2cb8b4) 38%, transparent); } } .bpmh__przycisk--glowny, .bpmh-modal__wyslij, .kb-button.kb-btn-global-fill, .wp-block-button__link { animation: bpsx-tetno 4.5s ease-in-out infinite; } .bpmh__przycisk--glowny:hover, .bpmh-modal__wyslij:hover, .kb-button.kb-btn-global-fill:hover, .wp-block-button__link:hover { animation: none; } @media (prefers-reduced-motion: reduce) { .bpmh__przycisk--glowny, .bpmh-modal__wyslij, .kb-button.kb-btn-global-fill, .wp-block-button__link { animation: none; } } /* ===================================================================== WSPÓLNA GEOMETRIA PRZYCISKÓW Ten arkusz jedzie na KAŻDEJ podstronie i tylko dlatego mieszka tu coś, co animacją nie jest. Reguła musi działać wszędzie, a arkusz sekcji wczytuje się wyłącznie tam, gdzie renderuje się nasza sekcja. PROBLEM. Przycisk z obwódką („Znajdź instalatora”) ma tę samą wyściółkę co przyciski bez obwódki, więc jest o 2 px wyższy — 60 zamiast 58. Zmierzone na żywo. Przy dwóch przyciskach obok siebie widać to od razu i o to było zgłoszenie „nie może być tak, że któryś jest wyższy”. ROZWIĄZANIE. Wariant z obwódką dostaje wyściółkę mniejszą dokładnie o grubość tej obwódki. 16 + 24 + 16 + 2 = 58, czyli tyle samo co 17 + 24 + 17 + 0. Ta sama zasada, co przy przycisku w nagłówku. ZMIENIASZ JEDNO — POPRAW DRUGIE. Wzorzec to 1,7 / 3,2 rem, pismo 1,7 rem grubości 600, promień 1 rem. UWAGA NA WAGĘ SELEKTORA — to zajęło najwięcej czasu przy tej poprawce. Wyściółkę przycisków Kadence ustawia styl generowany po `uniqueID` bloku, z `!important` i wagą (0,3,0). Reguła `.kb-button.bp-btn-poboczny` (0,2,0) przegrywa z nim MIMO WŁASNEGO `!important` — sprawdzone wstrzyknięciem na żywej stronie: nic się nie zmieniało. Dopiero czteroklasowy selektor (0,4,0) wygrywa. Nie skracaj go „bo tak czyściej”. Krótszy nie działa. ===================================================================== */ .kb-buttons-wrap .kb-button.kb-btn-global-fill.bp-btn-poboczny, .bpsx-btn--poboczny { padding-top: 1.6rem !important; padding-bottom: 1.6rem !important; padding-left: 3.1rem !important; padding-right: 3.1rem !important; }