/* ============================================================================= Back to top (Phase 2) — the site-wide floating control, scoped under `.fr-btt`. Built from the same parts as the redesigned navbar (navbar-redesign.css), the footer (footer-redesign.css) and the episode jump bar (massive-dynamic.css `.md-secnav`), so it reads as part of the same system rather than as the legacy verse-coloured disc it replaces: · the navbar's dark translucent ground + `saturate(1.4) blur(10px)` · the footer's circular icon-button geometry (`.frfoot__social a`) · the per-verse accent, set inline as `--fr-btt-accent` on the element from the page theme (partials/components.blade.php), using the same verse -> triplet map as the navbar and footer. THE STACKING ORDER IS LOAD-BEARING — see the z-index note below. The legacy button sat at 2001, i.e. above the image lightbox, its backdrop, the offcanvas and the fixed navbar; it floated on top of the darkened overlay. ============================================================================= */ .fr-btt { --fr-btt-accent: 115, 159, 199; /* blueverse default */ position: fixed; right: clamp(0.85rem, 2vw, 1.5rem); bottom: clamp(0.85rem, 2vw, 1.5rem); /* Over page content and the sticky jump bar (1020); UNDER Bootstrap's .fixed-top navbar (1030), the offcanvas backdrop (1040) and panel (1045), and the modal backdrop (1050) + modal (1055) — so the image lightbox always covers it. Do not raise this. */ z-index: 1025; display: inline-flex; align-items: center; justify-content: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 1px solid rgba(var(--fr-btt-accent), 0.55); background: rgba(18, 20, 24, 0.92); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); color: rgba(236, 232, 223, 0.9); box-shadow: 0 6px 18px -6px rgba(5, 7, 11, 0.65); text-decoration: none; /* Hidden until the reader has scrolled. `visibility` (not `display`) so the state can transition AND so the control is out of the tab order while it is invisible — an offscreen-but-focusable link is a keyboard trap you can't see. */ opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .fr-btt.is-visible { opacity: 1; visibility: visible; transform: none; } .fr-btt:hover, .fr-btt:focus-visible { color: #ffffff; background: rgba(var(--fr-btt-accent), 0.32); border-color: rgb(var(--fr-btt-accent)); } .fr-btt.is-visible:hover, .fr-btt.is-visible:focus-visible { transform: translateY(-2px); } .fr-btt:focus-visible { outline: 2px solid rgb(var(--fr-btt-accent)); outline-offset: 3px; } /* The hook is `.fr-btt__icon`, NOT `.fa-arrow-up` — Font Awesome is the SVG/JS build here, which REPLACES the with an for the duration of any modal — the image lightbox included. The z-index already puts the control under the backdrop, but that backdrop is 0.8 alpha, so it would still show through as a ghost. Hide it outright. (Nothing extra is needed for the offcanvas: its backdrop is 1040 and opaque enough to cover this.) */ body.modal-open .fr-btt { opacity: 0; visibility: hidden; pointer-events: none; } @media (max-width: 575.98px) { .fr-btt { width: 2.6rem; height: 2.6rem; } } @media (prefers-reduced-motion: reduce) { .fr-btt { transform: none; transition: opacity 0.18s ease, visibility 0.18s, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .fr-btt.is-visible:hover, .fr-btt.is-visible:focus-visible { transform: none; } }