/* Floating Back-to-Top (FAB) — reusable */ :root{ --bt-accent: var(--accent, #1B91F8); --bt-ink: var(--ink, #0B2F4E); --bt-tint: var(--tint, #E7F1FF); } .bt-fab{ position: fixed; right: 24px; bottom: 24px; z-index: 1000; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: transparent; color: var(--bt-ink); text-decoration: none; font-size: 1.1rem; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, background .2s ease; } .bt-fab.is-visible{ opacity: 1; transform: translateY(0); pointer-events: auto; } .bt-fab:hover{ color:#334155 } /* Tooltip */ .bt-fab::after{ content: attr(aria-label); position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%); color: #0B2F4E; font-size: 0.8rem; padding: 4px 8px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s ease-in-out; } .bt-fab:hover::after{ opacity: 1; } /* Keyboard focus */ .bt-fab:focus-visible{ outline: 3px solid var(--bt-tint); outline-offset: 3px; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce){ .bt-fab{ transition: none; } } /* Hide in print */ @media print{ .bt-fab{ display: none !important; } } /* nudge position & respect iPhone safe-area */ .bt-fab{ right: clamp(12px, 2.5vw, 24px); bottom: calc(env(safe-area-inset-bottom, 0) + 20px); } /* hide on very short viewports (e.g., landscape phones) */ @media (max-height: 500px){ .bt-fab{ display: none; } } /* if a page has a sticky CTA/footer, add class on and lift the FAB */ body.has-sticky-cta .bt-fab{ bottom: calc(env(safe-area-inset-bottom, 0) + 76px); }