/* ============================================================ accessibility.css — Dyslexia-friendly reading mode Applied when is set. Additive only: does not override DM-only views, admin panels, or any non-body-scoped styles. ============================================================ */ /* ── Core reading typography ─────────────────────────────── */ body.dyslexia-mode { /* System font stack — no decorative serifs */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Slightly larger base size */ font-size: 1.1rem; /* Open line spacing */ line-height: 1.75; /* Letter and word spacing */ letter-spacing: 0.03em; word-spacing: 0.08em; /* Softer background — warm off-white, easier on the eyes */ background-color: #f5f0e8 !important; color: #1a1a1a !important; } /* ── Readable content containers ────────────────────────── */ body.dyslexia-mode #wrapper, body.dyslexia-mode #inner-wrapper, body.dyslexia-mode .content-body, body.dyslexia-mode .page-content, body.dyslexia-mode .vault-content, body.dyslexia-mode .compendium-content, body.dyslexia-mode article, body.dyslexia-mode section { max-width: 78ch; } /* ── Paragraph and list spacing ─────────────────────────── */ body.dyslexia-mode p, body.dyslexia-mode li, body.dyslexia-mode dd { margin-bottom: 0.75em; line-height: 1.75; } body.dyslexia-mode ul, body.dyslexia-mode ol { padding-left: 1.6em; } /* ── Left-align text (override any justified/centered prose) */ body.dyslexia-mode p, body.dyslexia-mode li, body.dyslexia-mode td, body.dyslexia-mode th, body.dyslexia-mode .prose, body.dyslexia-mode .markdown-body { text-align: left !important; } /* ── Headings: keep hierarchy, soften decoration ─────────── */ body.dyslexia-mode h1, body.dyslexia-mode h2, body.dyslexia-mode h3, body.dyslexia-mode h4, body.dyslexia-mode h5, body.dyslexia-mode h6 { line-height: 1.35; letter-spacing: 0.01em; word-spacing: 0.04em; margin-top: 1.4em; margin-bottom: 0.5em; } /* ── Tables: breathing room ──────────────────────────────── */ body.dyslexia-mode table { border-spacing: 0; border-collapse: collapse; } body.dyslexia-mode th, body.dyslexia-mode td { padding: 0.5em 0.8em; line-height: 1.6; } /* ── Inline code / pre: keep monospace readable ─────────── */ body.dyslexia-mode code, body.dyslexia-mode pre, body.dyslexia-mode kbd { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; letter-spacing: 0; word-spacing: 0; } /* ── Focus rings: high-contrast for keyboard nav ────────── */ body.dyslexia-mode :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; } /* ── Links: underline always visible ────────────────────── */ body.dyslexia-mode a { text-decoration: underline; text-underline-offset: 3px; } /* ── Input fields: slightly larger touch targets ─────────── */ body.dyslexia-mode input, body.dyslexia-mode select, body.dyslexia-mode textarea { font-size: 1rem; line-height: 1.5; }