/* ========================================================= Glassy Aurora CTA (Avada) Apply classes ON THE BUTTON: call-btn golden-cta ========================================================= */ /* Targets Avada buttons + normal links/buttons */ .fusion-button.call-btn.golden-cta, a.call-btn.golden-cta, button.call-btn.golden-cta { position: relative; overflow: hidden; isolation: isolate; z-index: 0; color: #ffffff !important; text-decoration: none; /* 1px aurora border (via background-clip trick) */ border: 1px solid transparent; background-clip: padding-box; border-radius: 999px; /* Glass feel */ backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); /* Smoothness */ transform: translateZ(0); will-change: transform, box-shadow, background-position; /* Tune knobs */ --halo-opacity: 0.75; --halo-blur: 18px; --halo-size: -16px; /* more negative = larger halo */ --shift-speed: 14s; /* aurora movement speed (bigger = slower) */ --sweep-speed: 3.6s; /* white sweep speed (bigger = slower) */ --sweep-opacity: 0.55; --border-opacity: 0.9; /* Depth */ box-shadow: 0 14px 34px rgba(2, 18, 48, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.10) inset, 0 -10px 22px rgba(255, 255, 255, 0.07) inset; /* Background layers (sweep + glass highlight + base aurora gradient) */ background-image: /* white sweep beam */ linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,var(--sweep-opacity)) 18%, rgba(255,255,255,0) 36%), /* glass highlight */ radial-gradient(circle at 22% 18%, rgba(255,255,255,0.28), rgba(255,255,255,0.08) 28%, rgba(255,255,255,0) 62%), /* base vivid gradient */ linear-gradient(135deg, #03244f 0%, #064aa6 45%, #0b7dff 100%); background-size: 240% 100%, /* sweep beam width */ 140% 140%, /* highlight */ 220% 220%; /* base gradient */ /* Start positions */ background-position: -160% 50%, /* sweep starts off-screen left */ 0% 0%, 0% 50%; /* Animations: continuous (linear = no stop-feel) */ animation: aurora-shift var(--shift-speed) linear infinite, sweep-left-right var(--sweep-speed) linear infinite; } /* Keep button text above effects */ .fusion-button.call-btn.golden-cta *, a.call-btn.golden-cta *, button.call-btn.golden-cta * { position: relative; z-index: 5; } /* 1px gradient border layer */ .fusion-button.call-btn.golden-cta::before, a.call-btn.golden-cta::before, button.call-btn.golden-cta::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; padding: 1px; /* border thickness */ background: conic-gradient( from 180deg, rgba(0, 255, 210, var(--border-opacity)), rgba(170, 120, 255, var(--border-opacity)), rgba(255, 120, 210, var(--border-opacity)), rgba(0, 255, 210, var(--border-opacity)) ); /* Punch out the center so only 1px border shows */ -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.85; } /* Aurora halo outside the button */ .fusion-button.call-btn.golden-cta::after, a.call-btn.golden-cta::after, button.call-btn.golden-cta::after { content: ""; position: absolute; inset: var(--halo-size); border-radius: inherit; pointer-events: none; z-index: -1; opacity: var(--halo-opacity); filter: blur(var(--halo-blur)); background: conic-gradient( from 180deg, rgba(0, 255, 200, 0.00), rgba(0, 255, 200, 0.50), rgba(135, 120, 255, 0.55), rgba(255, 120, 200, 0.40), rgba(0, 255, 200, 0.50), rgba(0, 255, 200, 0.00) ); animation: halo-rotate 6.5s linear infinite; } /* Hover polish */ .fusion-button.call-btn.golden-cta:hover, a.call-btn.golden-cta:hover, button.call-btn.golden-cta:hover { transform: translateY(-1px) scale(1.01); box-shadow: 0 18px 44px rgba(2, 18, 48, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.14) inset, 0 -10px 22px rgba(255, 255, 255, 0.09) inset; } .fusion-button.call-btn.golden-cta:hover::after, a.call-btn.golden-cta:hover::after, button.call-btn.golden-cta:hover::after { opacity: 0.92; filter: blur(calc(var(--halo-blur) + 2px)); } /* Active press */ .fusion-button.call-btn.golden-cta:active, a.call-btn.golden-cta:active, button.call-btn.golden-cta:active { transform: translateY(0px) scale(0.99); } /* ========================================================= Keyframes (continuous, no stop-feel) ========================================================= */ /* Aurora base gradient moves continuously left->right (layer 3) */ @keyframes aurora-shift { 0% { background-position: -160% 50%, 0% 0%, 0% 50%; } 100% { background-position: -160% 50%, 0% 0%, 220% 50%; } } /* White sweep goes continuously left->right (layer 1) */ @keyframes sweep-left-right { 0% { background-position: -160% 50%, 0% 0%, 0% 50%; } 100% { background-position: 160% 50%, 0% 0%, 0% 50%; } } @keyframes halo-rotate { to { transform: rotate(360deg); } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .fusion-button.call-btn.golden-cta, a.call-btn.golden-cta, button.call-btn.golden-cta, .fusion-button.call-btn.golden-cta::after, a.call-btn.golden-cta::after, button.call-btn.golden-cta::after { animation: none !important; transform: none !important; } } /* ========================================================= Column Border Beam (Avada) Add class on the Column: aurora-border Border: 2px Radius: 8px ========================================================= */ .fusion-layout-column.aurora-border, .aurora-border { position: relative; border-radius: 8px; z-index: 0; /* helps Avada stacking */ } /* Animated 2px border */ .fusion-layout-column.aurora-border::before, .aurora-border::before { content: ""; position: absolute; inset: 0; border-radius: 8px; /* force exact radius */ pointer-events: none; z-index: 2; padding: 1px; /* 1px border thickness */ background: linear-gradient( 90deg, rgba(0,255,210,0.15), rgba(140,120,255,0.70), rgba(255,255,255,0.95), rgba(255,120,200,0.65), rgba(0,255,210,0.15) ); background-size: 260% 100%; background-position: 0% 50%; animation: border-beam 5s linear infinite; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.95; } /* Optional soft outer glow */ .fusion-layout-column.aurora-border::after, .aurora-border::after { content: ""; position: absolute; inset: -10px; border-radius: 8px; /* match */ pointer-events: none; z-index: 1; background: radial-gradient(circle at 30% 30%, rgba(120,170,255,0.18), rgba(255,120,200,0.12), rgba(0,0,0,0) 60% ); filter: blur(14px); opacity: 0.6; } @keyframes border-beam { to { background-position: 260% 50%; } }