/* ============================================================
Hilel Solutions — Shared Design Tokens v1.0
Drop-in stylesheet for all projects under ~/Downloads/
Usage:
============================================================
Goal: enhance accessibility & RTL safety WITHOUT overriding
project-specific palettes/components.
All rules use :focus-visible, @media queries, or safe utility
classes — they ADD behavior rather than replace it.
============================================================ */
/* ----- 1. Universal :focus-visible ring (WCAG 2.1 AA) -----
Only triggers on keyboard navigation, not mouse clicks.
Won't affect existing :focus styles for click states. */
:where(a, button, input, textarea, select, [role="button"], [tabindex]):focus-visible {
outline: 2px solid currentColor;
outline-offset: 3px;
border-radius: 4px;
}
/* ----- 2. prefers-reduced-motion (accessibility + battery) -----
Disables animations for users who request it via OS setting. */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ----- 3. Cursor pointer on common interactive elements -----
Catches missing cursors on cards/clickable divs. */
[role="button"],
[onclick],
button:not(:disabled),
a[href],
label[for],
[data-clickable],
.clickable,
.card[onclick],
.product-card[onclick] {
cursor: pointer;
}
/* ----- 4. Screen-reader-only text -----
Use for icon-only buttons: */
.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;
}
/* ----- 5. Skip-to-content link (keyboard a11y) -----
Add דלג לתוכן as first child of */
.skip-link {
position: absolute;
top: -100px;
inset-inline-start: 0;
z-index: 9999;
padding: 12px 20px;
background: #1e56a0;
color: #fff;
text-decoration: none;
font-weight: 600;
border-radius: 0 0 8px 8px;
transition: top 0.2s;
}
.skip-link:focus {
top: 0;
}
/* ----- 6. Reduced-motion override class (manual toggle) -----
*/
body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after {
animation: none !important;
transition: none !important;
}