.to-top {
position: fixed;
right: 24px;
bottom: 24px; z-index: 90;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
padding: 0;
border: 0;
border-radius: 50%;
background: var( --color-primary );
color: var( --color-dark );
cursor: pointer;
box-shadow: 0 2px 12px rgba( 0, 0, 0, 0.18 ); opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY( 12px ) scale( 0.92 );
transition:
opacity 0.3s ease,
transform 0.3s ease,
visibility 0.3s ease,
background-color 0.2s ease,
box-shadow 0.2s ease;
} .to-top.is-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: none;
} .to-top.is-visible:hover {
background: var( --color-primary-hover );
box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.24 );
transform: translateY( -3px );
} .to-top:focus-visible {
outline: 2px solid var( --color-dark );
outline-offset: 3px;
}
.to-top__icon {
display: block;
width: 20px;
height: 20px;
} @media (prefers-reduced-motion: reduce) {
.to-top {
transition: none;
transform: none !important;
}
} @media (max-width: 767px) {
.to-top {
right: 16px;
bottom: 16px;
width: 44px;
height: 44px;
}
.to-top__icon {
width: 18px;
height: 18px;
}
}