/** * Sticky Section Master - Frontend Stylesheet * * CSS for sticky state, animations, shrink, hide-on-scroll, * and Astra header scroll effects. * * @author PAC Solution Web * @version 2.0.0 */ /* ── Base: Prepare sticky elements for smooth transitions ──────────────────── */ [data-ssm-sticky="true"] { will-change: transform, background-color, box-shadow; /* Transitions are applied inline via JS with configured speed */ } /* ── Active Sticky State ───────────────────────────────────────────────────── */ [data-ssm-sticky="true"].ssm-is-sticky { /* position, top, z-index, width are set via JS */ /* This class is used as a CSS hook for custom overrides */ } /* ── Hide on Scroll Down ───────────────────────────────────────────────────── */ /* Used on both Elementor sections and Astra header */ .ssm-hidden-header { transform: translateY(-110%) !important; pointer-events: none; } /* ── Placeholder: Holds space when element is position:fixed ───────────────── */ /* Created fresh on sticky, removed entirely on unstick — fixes scroll-up gap. */ .ssm-sticky-placeholder { display: block !important; visibility: hidden !important; pointer-events: none !important; background: transparent !important; border: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; /* Height set dynamically by JS to match sticky element's height */ } /* ── Enter Animations ──────────────────────────────────────────────────────── */ /* Slide Down animation — element slides in from above */ @keyframes ssm-slide-down { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Fade In animation — element fades in from transparent */ @keyframes ssm-fade-in { from { opacity: 0; } to { opacity: 1; } } /* Zoom In animation — element scales up from slightly smaller */ @keyframes ssm-zoom-in { from { transform: scaleY(0.85); opacity: 0; transform-origin: top; } to { transform: scaleY(1); opacity: 1; transform-origin: top; } } /* Apply animation classes (added/removed by JS) */ .ssm-anim-slide-down { animation: ssm-slide-down 0.35s ease forwards; } .ssm-anim-fade-in { animation: ssm-fade-in 0.3s ease forwards; } .ssm-anim-zoom-in { animation: ssm-zoom-in 0.3s ease forwards; } /* ── Astra Header Scroll States ────────────────────────────────────────────── */ /* Class added to when Astra header is in scrolled/sticky state */ .ssm-astra-sticky .site-header, .ssm-astra-sticky #masthead, .ssm-astra-sticky .ast-site-header-wrap { /* Visual overrides applied via inline JS (background, shadow, blur) */ /* This class is provided as a CSS hook for custom user styles */ } /* Compact/shrunk header state — reduces padding on scroll */ .ssm-header-shrink .site-header, .ssm-header-shrink #masthead, .ssm-header-shrink .ast-site-header-wrap, .ssm-header-shrink .ast-primary-header-bar { padding-top: 6px !important; padding-bottom: 6px !important; } /* Transition applied to Astra header elements for smooth effects */ .site-header, #masthead, .ast-site-header-wrap, .ast-primary-header-bar { transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease, transform 0.3s ease !important; } /* ── Mobile Adjustments ────────────────────────────────────────────────────── */ @media (max-width: 767px) { /* Ensure sticky elements clear any mobile-specific bars */ [data-ssm-sticky="true"].ssm-is-sticky { /* z-index and top are controlled by JS data attributes */ } }