/* ===================================================================== Go Mini's FD — Sticky "Download Brochure" Button (static, no JS) --------------------------------------------------------------------- Matches the site's button styling by pulling brand colors straight from the site's own CSS variables (--primary, --dark, --white, --primary-font), so it stays in sync with the brand. Hardcoded fallbacks are included in case the variables aren't present. CMS standards: no ID selectors, native CSS nesting. NOTE: the must be a DIRECT CHILD of (see the .html file) or fixed positioning will anchor to an animated parent and sit too high. ===================================================================== */ a.sticky-brochure { /* Pinned to the right edge, vertically centered in the viewport */ position: fixed; top: 50%; right: 0; transform: translateY(-50%); z-index: 9999; /* Layout */ display: inline-flex; align-items: center; gap: 0.5rem; padding: 1rem 1.25rem; /* Brand red + white text — same tokens as the site's .btn */ background: #d81e25; /* fallback */ background: rgb(var(--primary)); color: #ffffff; /* fallback */ color: rgb(var(--white)); border: 0; border-top-left-radius: 5px; border-bottom-left-radius: 5px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); /* Type — mirrors .btn */ font-family: var(--primary-font); font-size: 1rem; font-weight: 400; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background 0.4s ease, transform 0.2s ease, box-shadow 0.2s ease; &:hover, &:focus-visible { color: #ffffff; color: rgb(var(--white)); background: #1a1a1a; /* fallback */ background: rgb(var(--dark)); text-decoration: none; transform: translateY(-50%) translateX(-4px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3); } &:focus-visible { outline: 3px solid #ffffff; outline: 3px solid rgb(var(--white)); outline-offset: 2px; } &:active { transform: translateY(-50%) translateX(-2px); } .sticky-brochure-icon { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; color: currentColor; /* inherits the white text color */ } } /* Mobile: bottom-right pill so it never covers content */ @media screen and (max-width: 650px) { a.sticky-brochure { top: auto; bottom: 1rem; right: 1rem; transform: none; border-radius: 999px; &:hover, &:focus-visible { transform: translateY(-2px); } &:active { transform: none; } } } /* Respect reduced-motion preferences */ @media (prefers-reduced-motion: reduce) { a.sticky-brochure { transition: background 0.4s ease; &:hover, &:focus-visible, &:active { transform: translateY(-50%); } } @media screen and (max-width: 650px) { a.sticky-brochure { &:hover, &:focus-visible, &:active { transform: none; } } } }