/* ============================================================================ TIP-HER — ORBITING BORDER POINT A light travels around the rounded edge of the three landing CTAs (Google Play / App Store / Proceed to Website). Load AFTER tipher-animations.css: Pure CSS. No markup changes. Open orbit-preview.html to tune the numbers before you commit to them. ========================================================================== */ /* ---------------------------------------------------------------------------- 0 · REQUIRED FIX to section 4 of tipher-animations.css The shimmer sweep used `overflow: hidden`, which would clip the orbiting point and its glow. This rewrites the sweep to stay inside its own box (border-radius clips the background on its own), so the badge no longer needs overflow hidden. Either delete section 4 from tipher-animations.css, or just keep this file loaded after it — these rules override cleanly. -------------------------------------------------------------------------- */ .lc-btn-badge { overflow: visible; position: relative; isolation: isolate; } .lc-btn-badge::after { content: ''; position: absolute; inset: 0; left: 0; /* resets the -150% from the old rule */ width: auto; height: auto; border-radius: inherit; background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, 0.45) 50%, transparent 62%); background-size: 320% 100%; background-position: 160% 0; transform: none; opacity: 0; pointer-events: none; z-index: 3; } .lc-btn-badge:hover::after { animation: thSweep 0.9s ease-out; } @keyframes thSweep { 0% { background-position: 160% 0; opacity: 1; } 100% { background-position: -160% 0; opacity: 1; } } /* ---------------------------------------------------------------------------- 1 · THE ORBIT How it works: a conic gradient is rotated around the button, then masked so only a thin ring at the edge shows. The gradient is transparent for most of its sweep and ramps to a hard white point — so you see a bright dot with a short cyan tail chasing the border. Tune these three values: -------------------------------------------------------------------------- */ .lc-btn-badge { --th-radius: 14px; /* MUST match your badge SVG's corner radius */ --th-ring: 3px; /* thickness of the trail */ --th-speed: 3.2s; /* one full lap */ --th-inset: 8px; /* pixel offset to align ring with SVG visual border */ } @property --th-orbit { syntax: ''; initial-value: 0deg; inherits: false; } .lc-btn-badge { border-radius: var(--th-radius); } .lc-btn-badge::before { content: ''; position: absolute; /* Positive inset pushes the ring INSIDE the button element, aligning it with the SVG badge's visible border (which sits ~8px inset from the element edge at the default 86px height). */ inset: var(--th-inset); border-radius: 10px; /* matches the SVG visual border corner curve */ padding: var(--th-ring); pointer-events: none; z-index: 4; /* renders on top of the SVG badge image */ /* The travelling point: transparent for three-quarters of the sweep, then a tail that ramps up to a hard-edged white head at 360deg. */ background: conic-gradient(from var(--th-orbit), rgba(125, 249, 255, 0) 0deg, rgba(125, 249, 255, 0) 250deg, rgba(125, 249, 255, 0.18) 300deg, rgba(125, 249, 255, 0.75) 342deg, rgba(125, 249, 255, 1) 354deg, #ffffff 359deg, #ffffff 360deg); /* Punch out the middle so only the border ring remains */ -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: drop-shadow(0 0 6px rgba(125, 249, 255, 1)); animation: thOrbit var(--th-speed) linear infinite; } @keyframes thOrbit { to { --th-orbit: 360deg; } } /* All three buttons start at the same phase with no delay — they orbit in sync. */ /* Hover: the point speeds up and the ring picks up a faint constant glow — confirms the button is live without changing its size. Override the brightness filter from style.css so it doesn't wash out the glow. */ .lc-btn-badge:hover { --th-speed: 1.4s; filter: none; } .lc-btn-badge:hover::before { filter: drop-shadow(0 0 12px rgba(125, 249, 255, 1)); } .lc-btn-badge:focus-visible::before { filter: drop-shadow(0 0 9px rgba(242, 194, 247, 1)); } /* ---------------------------------------------------------------------------- 2 · OPTIONAL — "Proceed to Website" in brand pink The third button is your own destination, not a store. Giving it the pink from your footer quote separates it from the two app badges. Delete this block if you want all three identical. -------------------------------------------------------------------------- */ #proceedBtn::before { background: conic-gradient(from var(--th-orbit), rgba(242, 194, 247, 0) 0deg, rgba(242, 194, 247, 0) 250deg, rgba(242, 194, 247, 0.18) 300deg, rgba(242, 194, 247, 0.75) 342deg, rgba(242, 194, 247, 1) 354deg, #ffffff 359deg, #ffffff 360deg); filter: drop-shadow(0 0 6px rgba(242, 194, 247, 1)); } #proceedBtn:hover::before { filter: drop-shadow(0 0 12px rgba(242, 194, 247, 1)); } /* ---------------------------------------------------------------------------- 3 · OPTIONAL — two points chasing each other Add class="lc-btn-badge th-dual" to a button to run a cyan point and a pink point on opposite sides of the border. -------------------------------------------------------------------------- */ .th-dual::before { background: conic-gradient(from var(--th-orbit), rgba(125, 249, 255, 0) 0deg, rgba(125, 249, 255, 0) 100deg, rgba(242, 194, 247, 0.7) 165deg, #ffffff 180deg, rgba(125, 249, 255, 0) 182deg, rgba(125, 249, 255, 0) 280deg, rgba(125, 249, 255, 0.7) 345deg, #ffffff 360deg); } /* ---------------------------------------------------------------------------- 4 · BROWSER SUPPORT @property is needed to animate an angle smoothly. Chrome 85+, Safari 16.4+, Firefox 128+ — roughly 95% of traffic. Older browsers can't resolve var(--th-orbit), which invalidates the whole background declaration, so the ring simply doesn't render. The buttons stay perfectly usable; nothing breaks, there's just no point travelling the border. If you need the effect on older browsers, the SVG stroke-dashoffset approach is the fallback — say the word and I'll add it. -------------------------------------------------------------------------- */ /* Scale inset down as button shrinks on smaller screens */ @media (max-width: 520px) { .lc-btn-badge { --th-inset: 5px; } } @media (max-width: 380px) { .lc-btn-badge { --th-inset: 4px; } } @media (prefers-reduced-motion: reduce) { .lc-btn-badge::before { animation: none; background: none; border: 1px solid rgba(125, 249, 255, 0.55); padding: 0; filter: none; -webkit-mask: none; mask: none; } .lc-btn-badge:hover::after { animation: none; } }