/* Chill Puff Fluid 1.6.0 */ canvas.cp-fluid { position: fixed; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; contain: layout paint; } /* Tło strony. Canvas leży na z-index -1, więc body musi być przezroczyste, inaczej zakryje symulację. Czerń trzyma . */ html.cp-fluid-bg { background-color: var(--cp-bg, #000); } html.cp-fluid-bg body { background-color: transparent; } /* ═══ Neonowe przyciski ═══════════════════════════════════════ Nadaj przyciskowi klasę „cp-btn" plus jedną z „cp-btn--1/2/3". Kolor tekstu, typografię i tło ustawiasz w Elementorze. ═════════════════════════════════════════════════════════ */ /* Kolejność ma znaczenie: --1/2/3 muszą stać po .cp-btn, żeby wygrać. Nie wolno tu napisać --cp-c: var(--cp-c, …) na tym samym elemencie — samoodwołanie unieważnia właściwość i wszystko przestaje działać. */ .cp-btn { --cp-c: var(--cp-btn1, #b4ff3a); } .cp-btn--1 { --cp-c: var(--cp-btn1, #b4ff3a); } .cp-btn--2 { --cp-c: var(--cp-btn2, #ff2d95); } .cp-btn--3 { --cp-c: var(--cp-btn3, #17c3d6); } .cp-btn .elementor-button, a.cp-btn, button.cp-btn { position: relative; overflow: hidden; border-radius: var(--cp-btn-radius, 4px); transition: box-shadow .4s ease, background-color .4s ease; } /* wewnętrzny span zostaje nieoprofilowany, żeby jego pseudoelementy liczyły się względem przycisku, a nie względem siebie */ .cp-btn .elementor-button > span:first-child { position: static; } .cp-btn .elementor-button::before, .cp-btn .elementor-button::after, .cp-btn .elementor-button > span:first-child::before, .cp-btn .elementor-button > span:first-child::after, a.cp-btn::before, a.cp-btn::after, button.cp-btn::before, button.cp-btn::after { content: ""; position: absolute; pointer-events: none; animation-duration: var(--cp-lap, 2s); animation-timing-function: linear; animation-iteration-count: infinite; } /* góra — biegnie w prawo */ .cp-btn .elementor-button::before, a.cp-btn::before, button.cp-btn::before { top: 0; left: 0; width: 100%; height: var(--cp-line, 2px); background: linear-gradient(90deg, transparent, var(--cp-c)); animation-name: cp-run-x; } /* prawa — biegnie w dół */ .cp-btn .elementor-button > span:first-child::before { top: 0; right: 0; width: var(--cp-line, 2px); height: 100%; background: linear-gradient(180deg, transparent, var(--cp-c)); animation-name: cp-run-y; animation-delay: calc(var(--cp-lap, 2s) * -0.75); } /* dół — biegnie w lewo */ .cp-btn .elementor-button::after, a.cp-btn::after, button.cp-btn::after { bottom: 0; right: 0; width: 100%; height: var(--cp-line, 2px); background: linear-gradient(270deg, transparent, var(--cp-c)); animation-name: cp-run-x-back; animation-delay: calc(var(--cp-lap, 2s) * -0.5); } /* lewa — biegnie w górę */ .cp-btn .elementor-button > span:first-child::after { bottom: 0; left: 0; width: var(--cp-line, 2px); height: 100%; background: linear-gradient(0deg, transparent, var(--cp-c)); animation-name: cp-run-y-back; animation-delay: calc(var(--cp-lap, 2s) * -0.25); } /* Opóźnienia są ujemne. Dodatnie trzymałyby pasek przez czas opóźnienia w stanie bazowym — rozciągnięty i nieruchomy na krawędzi. To była przyczyna zastygniętych kresek przy pierwszym wejściu na stronę. Przy ujemnych animacja startuje już w trakcie, a paski poza swoim odcinkiem stoją za kadrem i są obcięte przez overflow. */ @keyframes cp-run-x { 0% { transform: translateX(-100%); } 50%, 100% { transform: translateX(100%); } } @keyframes cp-run-x-back { 0% { transform: translateX(100%); } 50%, 100% { transform: translateX(-100%); } } @keyframes cp-run-y { 0% { transform: translateY(-100%); } 50%, 100% { transform: translateY(100%); } } @keyframes cp-run-y-back { 0% { transform: translateY(100%); } 50%, 100% { transform: translateY(-100%); } } /* hover — sama poświata, bez zalewania tła i bez odbicia */ .cp-btn .elementor-button:hover, .cp-btn .elementor-button:focus-visible, a.cp-btn:hover, a.cp-btn:focus-visible, button.cp-btn:hover, button.cp-btn:focus-visible { box-shadow: 0 0 5px var(--cp-c), 0 0 25px var(--cp-c), 0 0 50px var(--cp-c); } @media (prefers-reduced-motion: reduce) { .cp-btn .elementor-button::before, .cp-btn .elementor-button::after, .cp-btn .elementor-button > span:first-child::before, .cp-btn .elementor-button > span:first-child::after, a.cp-btn::before, a.cp-btn::after, button.cp-btn::before, button.cp-btn::after { animation: none; opacity: .55; } .cp-btn .elementor-button, a.cp-btn, button.cp-btn { transition: none; } }