Files
xamxam/app/public/assets/css/utilities.css

52 lines
1.2 KiB
CSS

/* ============================================================
UTILITIES — Small, stable, reusable helper classes that are
genuinely cross-component. Only promote after 3+ real uses.
============================================================ */
/* Visually-hidden but screen-reader-accessible */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Skip-to-content link (visible only on keyboard focus) */
.skip-link {
position: absolute;
top: -999px;
left: 1rem;
z-index: 9999;
padding: var(--space-2xs) var(--space-s);
background: var(--accent-primary);
color: var(--accent-foreground);
font-size: var(--step--1);
font-weight: 600;
text-decoration: none;
border-radius: 0 0 4px 4px;
}
.skip-link:focus {
top: 0;
}
.skip-link:hover {
color: var(--accent-primary);
background: var(--accent-foreground);
}
/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
}