. Scales on the X axis from 0 to 1 (transform-origin: left) as the page scrolls. Fixed at the very top of the viewport, above the sticky navbar (navbar z-index is 50 in the Sinch theme; we use 200 to clear it). ========================================================================== */ .motion-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background-color: rgb(var(--sinch-glow-color)); transform-origin: left center; transform: scaleX(0); z-index: 200; pointer-events: none; /* Subtle transition so rapid small scrolls don't flicker */ transition: transform 80ms linear; } /* ========================================================================== Tier 2.3 -- Counter suffix reveal. The counter suffix (.counter-suffix) starts invisible; motion.js fades it in after the count-up animation lands. The suffix span is injected into the DOM by motion.js when it initializes the counter. ========================================================================== */ .counter-suffix { display: inline; opacity: 0; transition: opacity var(--motion-dur-fast) var(--motion-ease); } .counter-suffix.counter-suffix--visible { opacity: 1; } /* ========================================================================== Tier 3.1 -- CTA animated-arrow slide-in + subtle lift. Background: the Sinch theme defines the arrow shape on .btn.btn-animated via CSS variables (--sinch-btn-arrow-img) and sets up both ::before (a spacer that shrinks on hover) and ::after (the masked arrow that slides in). The extracted inline CSS preserved mask-size but dropped the critical `mask` / `-webkit-mask` declarations, so ::after rendered as a solid square instead of the arrow shape. It also omitted the :hover rule that triggers the slide. This block restores both on top of the inline theme CSS (no edit to the theme file). Hover sequence (mirrors reference/css/design-system.css lines 1313-1320): ::before width 0.75rem -> 0 (spacer collapses) ::after margin-left -0.75rem -> 0.5rem, opacity 0 -> 1 (arrow slides in) The ::after also needs mask: so the SVG shape is actually visible. The subtle 1px lift stays alongside the arrow; it complements rather than competes. Guarded by @media (min-width: 768px) because the theme hides both pseudos below 768px (they only exist in that breakpoint). ========================================================================== */ /* Restore the arrow shape mask that the inline extraction omitted. Must be outside the hover rule so the shape is ready before hover. */ @media (min-width: 768px) { .btn.btn-animated::after { -webkit-mask: var(--sinch-btn-arrow-img) no-repeat 50% 50%; mask: var(--sinch-btn-arrow-img) no-repeat 50% 50%; } } /* Lift transition (no conflict with theme color/bg/border/shadow transitions). */ .btn-animated { transition: transform var(--motion-dur-fast) var(--motion-ease), color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } /* Arrow reveal + lift on hover/focus. Guarded by pointer:fine so touch users who cannot hover never see a stuck halfway-state. */ @media (min-width: 768px) and (hover: hover) and (pointer: fine) { /* Spacer collapses to make room for the arrow */ .btn.btn-animated:hover::before, .btn.btn-animated:focus-visible::before { width: 0; } /* Arrow slides in from the left */ .btn.btn-animated:hover::after, .btn.btn-animated:focus-visible::after { margin-left: 0.5rem; margin-right: 0; opacity: 1; } } /* Lift on hover/focus (all screen sizes; safe because it is transform-only). */ .btn-animated:hover, .btn-animated:focus-visible { transform: translateY(-1px); } /* ========================================================================== Tier 3.2 -- Consistent section reveals. .altblo-content (the text column in altblocks) gets the same fade+rise as the existing [data-reveal] system (widgets.css, 0.6s ease, translateY 24px), aligned to the motion tokens. Applied only when motion.js has confirmed JS is active and has run the observer (body.motion-sections-enhanced). ========================================================================== */ body.motion-sections-enhanced .motion-section-reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--motion-dur-slow) var(--motion-ease), transform var(--motion-dur-slow) var(--motion-ease); } body.motion-sections-enhanced .motion-section-reveal.motion-section-visible { opacity: 1; transform: translateY(0); } /* ========================================================================== Tier 3.3 -- FAQ / Compliance accordion hover (.comp-card-head). The expandable cards used for compliance items (RAY BAUM, Kari's Law, STIR/SHAKEN, E911 in chapter 02) and for "Questions to ask" in chapter 04 have a