/* ───────────────────────────────────────────────────────────────────────── PVV v5 — Accessibility Beyond Compliance styles. Companion stylesheet for pvv-a11y.js. Loaded same-origin by the plugin so the theme doesn't need to know about these rules. Class ownership: -> inverted/high-contrast palette -> +25% base font -> +50% base font -> kill animations/transitions -> hide nav/footer chrome -> toggled elsewhere (info only) Hard rules: vanilla CSS only; no @import; no external fonts. ───────────────────────────────────────────────────────────────────────── */ /* ─── Skip link (first focusable element on the page) ────────────────── */ .pvv-a11y-skiplink { position: absolute; top: -100px; left: 0; z-index: 2147483647; background: #0b4f3f; color: #ffffff; padding: 12px 16px; font: 600 14px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; text-decoration: none; border-radius: 0 0 6px 0; transition: top 0.15s ease; } .pvv-a11y-skiplink:focus { top: 0; outline: 3px solid #fbbf24; outline-offset: 2px; } /* ─── Floating gear trigger ──────────────────────────────────────────── */ .pvv-a11y-gear { position: fixed; bottom: 16px; right: 16px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 50%; background: #0b4f3f; color: #ffffff; border: 2px solid #ffffff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); cursor: pointer; z-index: 2147483646; font-size: 20px; line-height: 1; padding: 0; display: flex; align-items: center; justify-content: center; transition: transform 0.15s ease, background 0.15s ease; } .pvv-a11y-gear:hover, .pvv-a11y-gear:focus-visible { background: #065f46; transform: scale(1.05); outline: 3px solid #fbbf24; outline-offset: 2px; } /* ─── Preferences dialog (native + .showModal()) ────────────── */ .pvv-a11y-panel { max-width: 480px; width: calc(100% - 32px); padding: 0; border: 1px solid #cbd5e1; border-radius: 12px; box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25); background: #ffffff; color: #0f172a; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .pvv-a11y-panel::backdrop { background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(4px); } .pvv-a11y-form { margin: 0; padding: 0; } .pvv-a11y-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #e2e8f0; } .pvv-a11y-panel-head h2 { margin: 0; font-size: 18px; font-weight: 700; } .pvv-a11y-close { min-width: 44px; min-height: 44px; width: 44px; height: 44px; border: none; background: transparent; font-size: 24px; line-height: 1; cursor: pointer; border-radius: 6px; color: #475569; } .pvv-a11y-close:hover, .pvv-a11y-close:focus-visible { background: #f1f5f9; outline: 3px solid #fbbf24; outline-offset: 2px; } .pvv-a11y-group { border: none; margin: 0; padding: 16px 20px; border-bottom: 1px solid #f1f5f9; } .pvv-a11y-group legend { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #64748b; padding: 0; margin-bottom: 10px; } .pvv-a11y-group label { display: flex; align-items: center; gap: 10px; padding: 10px 0; font-size: 15px; cursor: pointer; min-height: 44px; } .pvv-a11y-group label:hover { color: #0b4f3f; } .pvv-a11y-group input[type="checkbox"] { width: 20px; height: 20px; cursor: pointer; accent-color: #0b4f3f; } .pvv-a11y-group select { margin-left: 8px; padding: 8px 10px; min-height: 44px; font-size: 15px; border: 1px solid #cbd5e1; border-radius: 6px; background: #ffffff; color: #0f172a; cursor: pointer; } .pvv-a11y-group select:focus-visible { outline: 3px solid #fbbf24; outline-offset: 2px; border-color: #0b4f3f; } .pvv-a11y-hint { margin: 8px 0 0; font-size: 13px; color: #64748b; } .pvv-a11y-hint kbd { display: inline-block; padding: 2px 6px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 4px; } .pvv-a11y-panel-foot { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; gap: 12px; background: #f8fafc; border-radius: 0 0 12px 12px; } .pvv-a11y-reset, .pvv-a11y-done { min-height: 44px; padding: 10px 20px; font-size: 15px; font-weight: 600; border-radius: 6px; cursor: pointer; border: 1px solid transparent; } .pvv-a11y-reset { background: transparent; border-color: #cbd5e1; color: #475569; } .pvv-a11y-reset:hover, .pvv-a11y-reset:focus-visible { background: #f1f5f9; outline: 3px solid #fbbf24; outline-offset: 2px; } .pvv-a11y-done { background: #0b4f3f; border-color: #0b4f3f; color: #ffffff; } .pvv-a11y-done:hover, .pvv-a11y-done:focus-visible { background: #065f46; outline: 3px solid #fbbf24; outline-offset: 2px; } /* ─── SR-only live region ────────────────────────────────────────────── */ .pvv-a11y-sr-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ─── High-contrast theme ────────────────────────────────────────────── */ html.pvv-high-contrast { background: #000000; color: #ffffff; } html.pvv-high-contrast body { background: #000000; color: #ffffff; } html.pvv-high-contrast a, html.pvv-high-contrast a:visited { color: #ffff00; text-decoration: underline; } html.pvv-high-contrast a:hover, html.pvv-high-contrast a:focus-visible { background: #ffff00; color: #000000; outline: 3px solid #ffff00; } html.pvv-high-contrast button, html.pvv-high-contrast input, html.pvv-high-contrast select, html.pvv-high-contrast textarea { background: #000000; color: #ffffff; border: 2px solid #ffffff; } html.pvv-high-contrast button:focus-visible, html.pvv-high-contrast input:focus-visible, html.pvv-high-contrast select:focus-visible, html.pvv-high-contrast textarea:focus-visible { outline: 3px solid #ffff00; outline-offset: 2px; } html.pvv-high-contrast .pvv-a11y-panel { background: #000000; color: #ffffff; border-color: #ffffff; } html.pvv-high-contrast .pvv-a11y-panel-foot { background: #111111; } html.pvv-high-contrast img:not([alt=""]) { filter: contrast(1.1); } /* ─── Large-text scaling ─────────────────────────────────────────────── */ html.pvv-large-text { font-size: 125%; /* +25% — applied at root so rem units scale */ } html.pvv-large-text-xl { font-size: 150%; /* +50% */ } html.pvv-large-text body, html.pvv-large-text-xl body { line-height: 1.7; } html.pvv-large-text p, html.pvv-large-text li, html.pvv-large-text-xl p, html.pvv-large-text-xl li { max-width: 70ch; /* preserve line length for readability */ } /* ─── Reduced motion ─────────────────────────────────────────────────── */ html.pvv-reduced-motion *, html.pvv-reduced-motion *::before, html.pvv-reduced-motion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* Respect OS-level preference by default, even before the user toggles. */ @media (prefers-reduced-motion: reduce) { .pvv-a11y-skiplink, .pvv-a11y-gear, .pvv-a11y-panel { transition: none !important; animation: none !important; } } /* ─── Simplified layout (hides non-essential chrome) ─────────────────── */ html.pvv-simplified-layout .site-header nav, html.pvv-simplified-layout .main-navigation, html.pvv-simplified-layout #masthead nav, html.pvv-simplified-layout .site-footer, html.pvv-simplified-layout footer[role="contentinfo"], html.pvv-simplified-layout aside.widget-area, html.pvv-simplified-layout .sidebar, html.pvv-simplified-layout [role="complementary"], html.pvv-simplified-layout .ad-slot, html.pvv-simplified-layout [class*="ad-container"] { display: none !important; } html.pvv-simplified-layout .entry-content, html.pvv-simplified-layout main, html.pvv-simplified-layout article { max-width: 72ch; margin-left: auto; margin-right: auto; padding: 0 16px; } /* ─── Plain-language content toggles ─────────────────────────────────── */ /* The JS sets el.hidden directly, but keep a CSS fallback for no-JS pages. */ html:not(.pvv-simplified-content) [data-pvv-simplified] .pvv-simplified { display: none; } html.pvv-simplified-content [data-pvv-simplified] .pvv-standard { display: none; } /* ─── Focus indicator (universal, always-on) ─────────────────────────── */ .pvv-a11y-panel :focus-visible, .pvv-a11y-gear:focus-visible, .pvv-a11y-skiplink:focus-visible { outline: 3px solid #fbbf24; outline-offset: 2px; } /* ─── 44×44 minimum touch target (WCAG 2.5.5 / 2.5.8 AA) ─────────────── */ /* Apply to our own controls; site-wide enforcement is too invasive. */ .pvv-a11y-panel button, .pvv-a11y-panel input[type="checkbox"], .pvv-a11y-panel select, .pvv-a11y-gear, .pvv-a11y-close { min-width: 44px; min-height: 44px; } /* Checkbox itself is 20×20 but its label wraps a 44-tall hit area. */ .pvv-a11y-group label { min-height: 44px; } /* ─── Dark scheme preference (default tweak, respected by prefs) ─────── */ @media (prefers-color-scheme: dark) { .pvv-a11y-panel { background: #0f172a; color: #f1f5f9; border-color: #334155; } .pvv-a11y-panel-head { border-bottom-color: #1e293b; } .pvv-a11y-panel-foot { background: #111827; } .pvv-a11y-group select { background: #1e293b; color: #f1f5f9; border-color: #334155; } }