/* ===================================================================== LeadsNimble — Floating "Scroll to Top" Button A round brand-gradient button that fades up into the bottom corner once the visitor scrolls past a threshold, and glides the page back to the top on click. It publishes its own height to the WhatsApp widget, which lifts out of the way while this button is on screen. Palette, type and shadow all read the same design tokens as the rest of the LeadsNimble family (see lnew-hero.css / lnew-footer.css): the --lnew-st-grad accent gradient, DM Sans, and the accent-tinted shadow that intensifies under [data-mode="dark"] — the same switch the nav's mode toggle writes on . ===================================================================== */ .lnew-scrolltop, .lnew-scrolltop * { box-sizing: border-box; } .lnew-scrolltop { /* Brand (overridable via Elementor controls) — matches the Hero / Footer primary buttons. */ --lnew-st-grad: linear-gradient(100deg, #6366f1 0%, #a855f7 52%, #22d3ee 100%); --lnew-st-accent-ink: #ffffff; --lnew-st-shadow: 0 16px 40px rgba(99, 102, 241, .28); --lnew-st-shadow-hover: 0 20px 50px rgba(99, 102, 241, .36); --lnew-st-ink: #12122a; --lnew-st-tooltip-border: rgba(99, 102, 241, .28); --lnew-st-font: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --lnew-st-offset-bottom: 28px; --lnew-st-offset-side: 28px; position: fixed; bottom: var(--lnew-st-offset-bottom); /* Sits just below the WhatsApp button (z-index 9998) so the primary chat action always wins if anything ever overlaps. */ z-index: 9997; font-family: var(--lnew-st-font); line-height: 1.4; -webkit-font-smoothing: antialiased; /* Hidden until the visitor scrolls past the threshold. */ opacity: 0; visibility: hidden; transform: translateY(16px) scale(0.85); pointer-events: none; transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.3s ease; } /* ---- [data-mode="dark"] on — same switch the nav's mode toggle writes. The gradient itself is mode-independent (matches lnh-accent-grad / lnf-accent-grad); only the shadow deepens, same as every other primary CTA in the family. ---- */ [data-mode="dark"] .lnew-scrolltop { --lnew-st-shadow: 0 16px 44px rgba(99, 102, 241, .4); --lnew-st-shadow-hover: 0 22px 54px rgba(99, 102, 241, .5); } .lnew-scrolltop.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; } .lnew-scrolltop > * { pointer-events: auto; } .lnew-scrolltop--bottom-right { right: var(--lnew-st-offset-side); } .lnew-scrolltop--bottom-left { left: var(--lnew-st-offset-side); } /* --------------------------------------------------------------------- Button — the family's primary gradient, rounded into a circle ------------------------------------------------------------------ */ .lnew-scrolltop__btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; margin: 0; border: 0; border-radius: 50%; overflow: hidden; background-image: var(--lnew-st-grad); color: var(--lnew-st-accent-ink); cursor: pointer; -webkit-tap-highlight-color: transparent; appearance: none; -webkit-appearance: none; /* Soft brand-tinted lift + the inner top highlight of the family's pills. */ box-shadow: var(--lnew-st-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.25); transition: transform 0.25s ease, box-shadow 0.25s ease, color 0.25s ease; } /* Sheen sweep on hover — the same signature as the primary pill buttons. */ .lnew-scrolltop__btn::before { content: ""; position: absolute; top: 0; left: -80%; width: 55%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent); transform: skewX(-20deg); transition: left 0.65s ease; z-index: 0; pointer-events: none; } .lnew-scrolltop__btn:hover::before { left: 130%; } .lnew-scrolltop__btn:hover { transform: translateY(-3px); box-shadow: var(--lnew-st-shadow-hover), inset 0 1px 0 rgba(255, 255, 255, 0.3); } .lnew-scrolltop__btn:active { transform: translateY(-1px) scale(0.97); } .lnew-scrolltop__btn:focus { outline: none; } .lnew-scrolltop__btn:focus-visible { outline: 3px solid rgba(99, 102, 241, 0.6); outline-offset: 4px; } /* --------------------------------------------------------------------- Icon ------------------------------------------------------------------ */ .lnew-scrolltop__icon { position: relative; z-index: 1; display: inline-flex; width: 22px; height: 22px; color: var(--lnew-st-accent-ink); transition: transform 0.25s ease; } .lnew-scrolltop__icon svg { width: 100%; height: 100%; display: block; } .lnew-scrolltop__btn:hover .lnew-scrolltop__icon { transform: translateY(-2px); } /* --------------------------------------------------------------------- Tooltip — a fixed dark chip, mode-independent (same treatment as the family's other floating overlays). ------------------------------------------------------------------ */ .lnew-scrolltop__tooltip { position: absolute; bottom: 50%; transform: translateY(50%); padding: 10px 14px; border: 1px solid var(--lnew-st-tooltip-border); border-radius: 12px; background-color: var(--lnew-st-ink); color: #ffffff; font-size: 13px; font-weight: 600; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; box-shadow: 0 12px 30px -12px rgba(18, 18, 42, 0.6); } .lnew-scrolltop--bottom-right .lnew-scrolltop__tooltip { right: calc(100% + 14px); transform: translate(8px, 50%); } .lnew-scrolltop--bottom-left .lnew-scrolltop__tooltip { left: calc(100% + 14px); transform: translate(-8px, 50%); } .lnew-scrolltop__tooltip::after { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; background-color: inherit; border: inherit; border-width: 0 1px 1px 0; transform: translateY(-50%) rotate(-45deg); } .lnew-scrolltop--bottom-right .lnew-scrolltop__tooltip::after { right: -5px; } .lnew-scrolltop--bottom-left .lnew-scrolltop__tooltip::after { left: -5px; transform: translateY(-50%) rotate(135deg); } .lnew-scrolltop:hover .lnew-scrolltop__tooltip { opacity: 1; } .lnew-scrolltop--bottom-right:hover .lnew-scrolltop__tooltip, .lnew-scrolltop--bottom-left:hover .lnew-scrolltop__tooltip { transform: translate(0, 50%); } /* --------------------------------------------------------------------- Responsive visibility ------------------------------------------------------------------ */ @media ( max-width: 480px ) { .lnew-scrolltop__tooltip { display: none; } } @media ( max-width: 1024px ) { .lnew-scrolltop--hide-tablet { display: none; } } @media ( max-width: 767px ) { .lnew-scrolltop--hide-mobile { display: none; } } @media ( min-width: 1025px ) { .lnew-scrolltop--hide-desktop { display: none; } } /* --------------------------------------------------------------------- Reduced motion ------------------------------------------------------------------ */ @media ( prefers-reduced-motion: reduce ) { .lnew-scrolltop, .lnew-scrolltop__btn, .lnew-scrolltop__btn::before, .lnew-scrolltop__icon, .lnew-scrolltop__tooltip, #textcrm-web-chat-root { transition: none; } } /* --------------------------------------------------------------------- Third-party live chat launcher (TextCRM web-chat widget, injected sitewide by the Tag Manager plugin's