/** * ATLC Back to Top * * Override any of these custom properties in your theme, e.g. * .atlcbtt { --atlcbtt-bg: var(--bs-primary); --atlcbtt-bottom: 90px; } */ .atlcbtt { --atlcbtt-bg: #000; --atlcbtt-color: #fff; --atlcbtt-focus: blue; /* Outer band of the focus ring. */ --atlcbtt-focus-inner: #fff; /* Inner band; keeps 3:1 contrast on dark backgrounds. */ --atlcbtt-size: 52px; --atlcbtt-bottom: 20px; --atlcbtt-right: 20px; --atlcbtt-z: 1030; /* Above Bootstrap/Understrap sticky navbars, below modals. */ position: fixed; right: calc(var(--atlcbtt-right) + env(safe-area-inset-right, 0px)); bottom: calc(var(--atlcbtt-bottom) + env(safe-area-inset-bottom, 0px)); z-index: var(--atlcbtt-z); display: inline-flex; align-items: center; justify-content: center; width: var(--atlcbtt-size); height: var(--atlcbtt-size); /* Meets WCAG 2.5.8 target size (24px min). */ margin: 0; padding: 0; border: 2px solid transparent; /* Visible outline in Windows High Contrast. */ border-radius: 50%; background-color: var(--atlcbtt-bg); color: var(--atlcbtt-color); font-size: 1.25rem; line-height: 1; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); transition: filter 0.15s ease-in-out; } .atlcbtt[hidden] { display: none !important; } /* Hover only on devices that really hover; on touch screens :hover sticks after a tap. */ @media (hover: hover) { .atlcbtt:hover { filter: brightness(1.15); } } /* * Drop the default ring only when :focus-visible will not draw one (mouse and * touch focus). An engine that doesn't understand :focus-visible drops this whole * rule, so it keeps its default ring. */ .atlcbtt:focus:not(:focus-visible) { outline: none; } /* * Two-tone focus ring (WCAG 1.4.11, 2.4.7). The outline sits outside the button, * so its contrast is measured against the page behind it; one of the two bands * always contrasts, on light or dark sections. The inner band fills the 2px * outline offset and keeps the drop shadow. In forced-colors mode box-shadow is * dropped and the outline alone is used. */ .atlcbtt:focus-visible { outline: 3px solid var(--atlcbtt-focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--atlcbtt-focus-inner), 0 2px 6px rgba(0, 0, 0, 0.25); } /* Icon: the built-in SVG up arrow, sized by font-size and coloured by the button's text colour. */ .atlcbtt__icon { display: block; width: 1em; height: 1em; margin: 0; fill: currentColor; pointer-events: none; } /* Visually hidden, still the button's accessible name. */ .atlcbtt__label { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); /* Legacy fallback for clip-path. */ clip-path: inset(50%); white-space: nowrap; border: 0; } /* * On click, a non-interactive focus target ( by default) briefly takes * focus so the next Tab starts at the top of the page. It gets no focus ring, * whether its tabindex="-1" is temporary or its own (e.g. #content). Natively * focusable targets (links, form controls) never get this class. */ .atlcbtt-focus-top:focus { outline: none; } @media (forced-colors: active) { .atlcbtt { border-color: ButtonText; } } @media (prefers-reduced-motion: reduce) { .atlcbtt { transition: none; } } @media print { .atlcbtt { display: none !important; } }