/* ============================================================================ install-button.css — SINGLE SOURCE for the INSTALL gem button styling. Linked in on every page (themed + standalone) so the styles exist BEFORE site-nav.js / site-footer.js inject the button markup — no inject-after-render color transition flash. Behaviour lives in assets/js/install-button.js; this file is presentation only. ========================================================================== */ .install-btn { position: relative; display: inline-flex; align-items: center; gap: 9px; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } .install-label { order: 1; pointer-events: none; position: relative; z-index: 1; font-family: "Share Tech Mono", "Geist Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: oklch(0.88 0.16 200); text-shadow: 0 0 12px rgba(71, 216, 255, 0.4); transition: color .25s ease, text-shadow .25s ease; } .install-gem { order: 2; position: relative; z-index: 0; flex: 0 0 auto; width: 26px; height: 26px; pointer-events: none; } .install-fx { position: absolute; left: 50%; top: 50%; width: 74px; height: 74px; transform: translate(-50%, -50%); display: block; pointer-events: none; } .install-btn:hover .install-label, .install-btn:focus-visible .install-label { color: #ff8a3a; text-shadow: 0 0 16px rgba(255, 138, 58, 0.6); } .install-btn:active { transform: translateY(1px); } .install-btn:focus-visible { outline: none; } .install-btn.no-fx .install-fx { display: none; } .install-btn.no-fx .install-label::after { content: "\2B21"; margin-left: 9px; font-size: 15px; vertical-align: -1px; color: oklch(0.88 0.16 200); text-shadow: 0 0 10px rgba(71, 216, 255, 0.6); } .footer-install { margin-left: 0; margin-top: 18px; } @media (max-width: 720px) { .install-label { font-size: 12px; letter-spacing: 0.12em; } .install-gem { width: 24px; height: 24px; } } @media (max-width: 1024px) and (min-width: 721px) { .install-btn { margin-left: 4px; } .install-label { font-size: 11px; letter-spacing: 0.10em; } .install-gem { width: 23px; height: 23px; } } @media (display-mode: standalone) { .install-btn { display: none !important; } }