/* ==========================================================================
Stuff Curious — Moops v2
Patch v5: Accessibility corrections
Enqueue after edits-v4.css
========================================================================== */
/* --------------------------------------------------------------------------
1. Contrast-corrected tokens
All measured against --bg-card (#1a1a26). WCAG 2.2 AA requires 4.5:1 for
normal text, 3:1 for large text and graphical objects.
--text-faint #5a5478 2.44:1 -> #847ea4 4.51:1
--accent-purple #8b5df6 4.09:1 -> #9267f7 4.51:1
--accent-purple-dark #6b3fd4 2.69:1 -> #906fdf 4.53:1 (hover now lightens)
--accent-violet #7D3C9E 2.47:1 -> #8f45b5 3.02:1 (chart series only)
charts.js reads these at runtime, so updating them here also fixes every
axis label and legend entry in the charts.
-------------------------------------------------------------------------- */
:root {
--text-faint: #847ea4;
--accent-purple: #9267f7;
--accent-purple-dark: #906fdf;
--accent-violet: #8f45b5;
/* Kept for cases where the old darker purple is still wanted as a *background*
rather than as text — e.g. solid badges, where white sits on top of it. */
--accent-purple-solid: #7c4ef0; /* #fff on this = 4.99:1 */
}
/* --------------------------------------------------------------------------
2. Solid purple badges
White on the original #8b5df6 is 4.20:1 — short of AA for text this small.
Darkening the plate to #7c4ef0 gets white to 4.99:1.
-------------------------------------------------------------------------- */
.wp-block-table .cell-badge,
sup.fn a:hover,
sup.fn a:focus-visible,
.sc-fnref:hover {
background: var(--accent-purple-solid, #7c4ef0);
}
/* --------------------------------------------------------------------------
3. Visible focus for every interactive element
Keyboard users need to see where they are. This is the single highest-value
accessibility fix on most sites and costs nothing.
-------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
outline: 3px solid var(--accent-purple, #9267f7);
outline-offset: 2px;
border-radius: 2px;
}
/* Never remove the ring without replacing it */
a:focus:not(:focus-visible) {
outline: none;
}
/* --------------------------------------------------------------------------
4. Skip link
Add as the first element inside in header.php:
Skip to content
and give the element id="main".
-------------------------------------------------------------------------- */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 999999;
padding: 0.85rem 1.35rem;
background: var(--bg-raised, #252535);
color: var(--text-primary, #f0eeff);
font-family: "Inter", system-ui, sans-serif;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.04em;
text-decoration: none;
border: 1px solid var(--accent-purple, #9267f7);
border-radius: 0 0 var(--radius-sm, 0.5rem) 0;
}
.skip-link:focus {
left: 0;
}
/* --------------------------------------------------------------------------
5. Screen-reader-only utility
For labelling icon-only controls: Search
-------------------------------------------------------------------------- */
.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;
}
.sr-only-focusable:focus,
.sr-only-focusable:focus-visible {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal;
}
/* --------------------------------------------------------------------------
6. Don't rely on color alone
Links inside body copy need a non-color signal. If your theme already
underlines content links, delete this block.
-------------------------------------------------------------------------- */
.post-content a:not(.wp-block-button__link):not(.sc-fnref),
.entry-content a:not(.wp-block-button__link):not(.sc-fnref) {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
text-decoration-color: rgba(146, 103, 247, 0.5);
}
.post-content a:hover,
.entry-content a:hover {
text-decoration-color: currentColor;
}
/* --------------------------------------------------------------------------
7. Respect motion preferences globally
-------------------------------------------------------------------------- */
@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;
}
}
/* --------------------------------------------------------------------------
8. Minimum target size (WCAG 2.2 AA, 24x24 CSS px)
Mainly affects the inline footnote markers and any icon links.
-------------------------------------------------------------------------- */
sup.fn a,
.sc-fnref {
min-width: 24px;
min-height: 24px;
line-height: 24px;
padding: 0 0.35em;
vertical-align: middle;
}