.scroll-to-top {
--size: 60px;
position: fixed;
right: 18px;
bottom: 24px;
width: var(--size);
height: var(--size);
border: none; background-color: #fff;
color: #fff;
display: inline-grid;
place-items: center;
cursor: pointer;
opacity: 0;
transform: translateY(12px) scale(0.95);
pointer-events: none;
transition: opacity 260ms ease, transform 260ms ease;
z-index: 9999;
padding: 0;
border-radius: 16px;
box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.16);
}
.scroll-to-top svg path {
fill: var(--text-color);
} .scroll-to-top.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
} .scroll-to-top:focus {
outline: 3px solid rgba(0, 150, 255, 0.25);
outline-offset: 4px;
} @media (max-width: 480px) {
.scroll-to-top {
right: 6px;
bottom: 70px;
--size: 40px;
border-radius: 8px;
}
} @media (prefers-reduced-motion: reduce) {
.scroll-to-top {
transition: none;
}
}