/* prisma-base.css — shared accessibility & motion primitives.
Loaded by every HTML page. Keep this file small (<3 KB) and free of
page-specific styling. The point is a single shared a11y baseline so
the existing per-page design systems can drift visually without losing
keyboard, screen-reader, and reduced-motion guarantees. */
/* 1. Keyboard focus ring — restored across all interactive controls.
Uses --accent if defined by the page; falls back to a high-contrast
teal that reads acceptably on both dark and light surfaces. */
:where(a, button, [role="button"], [role="tab"], [role="menuitem"],
input, select, textarea, summary, [tabindex]):focus-visible {
outline: 2px solid var(--accent, #2dd4bf);
outline-offset: 2px;
border-radius: 3px;
}
/* 2. Skip-to-main-content link.
Visually hidden until focused, then jumps to top-left.
Add as the first child:
Skip to main content */
.skip-link {
position: fixed;
top: -40px;
left: 8px;
z-index: 9999;
padding: 10px 14px;
background: var(--accent, #2dd4bf);
color: var(--accent-ink, #07070a);
font: 600 14px/1 system-ui, -apple-system, sans-serif;
text-decoration: none;
border-radius: 4px;
transition: top .15s;
}
.skip-link:focus,
.skip-link:focus-visible {
top: 8px;
outline: 2px solid #fff;
outline-offset: 2px;
}
/* 3. Visually-hidden helper for labels that should reach screen readers
but stay off-screen visually. Standard "sr-only" pattern. */
.sr-only {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* 4. Reduced-motion — kill animations/transitions for users who ask.
Honours WCAG 2.3.3. Pages can still opt back in by overriding. */
@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;
}
}
/* 5. Toast notification primitive.
Render programmatically; default position bottom-right.
Usage:
// call window.prismaToast('Saved', { kind: 'ok' }) — see prisma-base.js */
.prisma-toast-host {
position: fixed;
bottom: 16px;
right: 16px;
z-index: 10000;
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
max-width: min(420px, calc(100vw - 32px));
}
.prisma-toast {
pointer-events: auto;
padding: 10px 14px;
border-radius: 6px;
font: 500 13px/1.4 system-ui, -apple-system, sans-serif;
background: var(--surface, #16161b);
color: var(--text, #eeeef3);
border: 1px solid var(--border, #2a2a35);
box-shadow: 0 4px 16px rgba(0,0,0,.35);
display: flex;
align-items: flex-start;
gap: 10px;
animation: prisma-toast-in .2s ease-out;
}
.prisma-toast[data-kind="ok"] { border-left: 3px solid var(--pass, #22c55e); }
.prisma-toast[data-kind="warn"] { border-left: 3px solid var(--warn, #f59e0b); }
.prisma-toast[data-kind="err"] { border-left: 3px solid var(--fail, #f04444); }
.prisma-toast[data-kind="info"] { border-left: 3px solid var(--info, #3b82f6); }
.prisma-toast button.dismiss {
appearance: none;
background: transparent;
border: 0;
color: var(--text-muted, #7c7c90);
cursor: pointer;
padding: 0 4px;
font-size: 16px;
line-height: 1;
}
@keyframes prisma-toast-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* 6. Disabled-button visual when using aria-disabled (which keeps focus). */
:where(button, [role="button"])[aria-disabled="true"] {
opacity: .55;
cursor: not-allowed;
}