/* * ARHTRD Child Theme — assets/css/sticky-buttons.css * * Universal sticky bottom CTA bar: "Shop Now" + "Contact Us" * Fixed at bottom-centre of viewport. Present on every page. * * Design language: * Dark glass pill container (rgba dark + blur) with amber border. * Shop Now → amber fill (#D4A017) with dark text — primary action. * Contact Us → white/transparent with white text — secondary action. * Divider → 1px amber line between the two buttons. * * Entrance: * CSS slide-up animation with a generous delay so the preloader clears. * When .arhtrd-sticky-fast is set on (repeat visitor, session key * already present), the delay collapses to 0.4 s. * CSS animation plays even without JS — graceful CSS-only entrance. * * No JavaScript is required for core behaviour. * home.js may add subtle GSAP polish on the homepage only. * * @package ARHTRD */ /* ========================================================================== ENTRANCE ANIMATION ========================================================================== */ @keyframes sticky-cta-enter { from { opacity: 0; transform: translateX(-50%) translateY(20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } /* ========================================================================== STICKY CONTAINER ========================================================================== */ .sticky-cta { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); z-index: 9900; /* below WP admin bar (9999) and preloader (99999) */ /* Entrance animation — 3 s delay clears preloader on first visit */ opacity: 0; animation: sticky-cta-enter 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) 3s forwards; } /* Repeat visitor: faster entrance (session flag already set) */ .arhtrd-sticky-fast .sticky-cta { animation-delay: 0.4s; } /* Inner pill: the visible dark-glass container */ .sticky-cta__inner { display: flex; align-items: stretch; gap: 0; background: rgba(10, 12, 18, 0.92); border: 1px solid rgba(212, 160, 23, 0.22); border-radius: 999px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(212, 160, 23, 0.06) inset; overflow: hidden; /* clips the amber fill to the pill radius */ } /* ========================================================================== DIVIDER — 1 px amber between the two buttons ========================================================================== */ .sticky-cta__divider { display: block; width: 1px; background-color: rgba(212, 160, 23, 0.20); flex-shrink: 0; align-self: stretch; } /* ========================================================================== BUTTONS — shared base ========================================================================== */ .sticky-cta__btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 22px; font-size: 0.8125rem; /* 13px */ font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; text-decoration: none; line-height: 1; white-space: nowrap; cursor: pointer; border: none; background: transparent; transition: background-color 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .sticky-cta__btn:focus-visible { outline: 3px solid #D4A017; outline-offset: -3px; border-radius: 999px; } /* Button icon SVG */ .sticky-cta__btn svg { flex-shrink: 0; width: 14px; height: 14px; } /* ========================================================================== SHOP NOW — amber fill (primary) ========================================================================== */ .sticky-cta__btn--shop { color: #0D0F16; background-color: #D4A017; } .sticky-cta__btn--shop:hover, .sticky-cta__btn--shop:focus-visible { background-color: #e6b825; color: #0D0F16; box-shadow: 0 0 16px rgba(212, 160, 23, 0.35) inset; text-decoration: none; } /* ========================================================================== CONTACT US — white/ghost (secondary) ========================================================================== */ .sticky-cta__btn--contact { color: rgba(255, 255, 255, 0.82); } .sticky-cta__btn--contact:hover, .sticky-cta__btn--contact:focus-visible { color: #ffffff; background-color: rgba(255, 255, 255, 0.06); text-decoration: none; } /* ========================================================================== RESPONSIVE ========================================================================== */ /* Tablet and smaller: reduce padding, shrink font slightly */ @media (max-width: 600px) { .sticky-cta { bottom: 16px; /* ensure it doesn't exceed viewport on very small screens */ max-width: calc(100vw - 32px); } .sticky-cta__btn { padding: 10px 16px; font-size: 0.75rem; /* 12px */ gap: 5px; } .sticky-cta__btn svg { width: 12px; height: 12px; } } /* Very small screens: hide text labels, show icons only */ @media (max-width: 360px) { .sticky-cta__btn { padding: 11px 14px; } .sticky-cta__btn-label { display: none; } .sticky-cta__btn svg { width: 16px; height: 16px; } } /* ========================================================================== REDUCED MOTION ========================================================================== */ @media (prefers-reduced-motion: reduce) { .sticky-cta { animation-duration: 0.01ms !important; animation-delay: 0s !important; transform: translateX(-50%) translateY(0); } .sticky-cta__btn { transition: none; } }