93 lines
1.8 KiB
CSS
93 lines
1.8 KiB
CSS
/*
|
|
* Utility Styles - Back to top, scroll progress, focus states, etc.
|
|
*/
|
|
|
|
/* Back to top button */
|
|
.back-to-top {
|
|
position: fixed;
|
|
bottom: 2rem;
|
|
right: 2rem;
|
|
width: 44px;
|
|
height: 44px;
|
|
min-width: 44px;
|
|
min-height: 44px;
|
|
background: var(--accent);
|
|
border: none;
|
|
border-radius: 10px;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
transform: translateY(12px);
|
|
transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s;
|
|
pointer-events: none;
|
|
box-shadow: 0 4px 20px var(--accent-glow);
|
|
z-index: 900;
|
|
}
|
|
|
|
.back-to-top.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.back-to-top:hover {
|
|
background: var(--accent-light);
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 8px 28px var(--accent-glow);
|
|
}
|
|
|
|
.back-to-top:focus-visible {
|
|
outline: 2px solid var(--accent-light);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
/* Scroll progress bar */
|
|
.scroll-progress {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
height: 3px;
|
|
width: 0%;
|
|
background: linear-gradient(90deg, var(--accent-dark), var(--accent), var(--accent-light));
|
|
z-index: 1100;
|
|
box-shadow: 0 0 10px var(--accent-glow);
|
|
transition: width 0.08s linear;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Touch targets */
|
|
.theme-toggle,
|
|
.hamburger {
|
|
min-width: 44px;
|
|
min-height: 44px;
|
|
width: 44px;
|
|
height: 44px;
|
|
}
|
|
|
|
.theme-toggle {
|
|
border-radius: 10px;
|
|
}
|
|
|
|
/* Reduced motion */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
|
|
.stat {
|
|
animation: none;
|
|
opacity: 1;
|
|
}
|
|
|
|
.back-to-top {
|
|
transition: opacity 0.01ms;
|
|
}
|
|
}
|