/* ============================================================ 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 { --access-bg-page-wash: rgba(32, 22, 12, 0.16); --access-surface: rgba(237, 224, 202, 0.94); --access-surface-strong: #efe0c4; --access-surface-soft: #f4e8d2; --access-surface-card: rgba(248, 237, 216, 0.96); --access-surface-control: #f7ecd8; --access-border: #80643b; --access-border-soft: #b69762; --access-text: #21180f; --access-text-muted: #493a28; --access-heading: #17100a; --access-link: #064f91; --access-link-hover: #032f5d; --access-focus: #0b63ce; --access-button-bg: #e7d7b9; --access-button-hover: #dcc798; --access-shadow: 0 14px 34px rgba(30, 19, 9, 0.2); /* 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; /* Warm low-glare wash over the tavern, without turning the page white. */ background: radial-gradient(circle at 18% 0%, rgba(198, 158, 92, 0.2), transparent 30rem), linear-gradient(135deg, rgba(64, 42, 22, 0.24) 0%, var(--access-bg-page-wash) 52%, rgba(18, 13, 8, 0.28) 100%), image-set( url("../images/bg_new.webp") type("image/webp"), url("../images/bg_new.jpg") type("image/jpeg") ) center top / cover fixed !important; color: var(--access-text) !important; } body.dyslexia-mode::before, body.dyslexia-mode::after { background: none !important; } /* Accessibility mode sits after campaign themes in the cascade. These high contrast surfaces keep campaign atmosphere from lowering readability. */ body.dyslexia-mode #inner-wrapper, body.dyslexia-mode .content-shell, body.dyslexia-mode #top, body.dyslexia-mode nav#primary, body.dyslexia-mode .main-menu .dropdown-menu, body.dyslexia-mode .site-search, body.dyslexia-mode .auth-panel, body.dyslexia-mode .markdown-panel, body.dyslexia-mode .metadata-list, body.dyslexia-mode .reader-toc, body.dyslexia-mode .campaign-card, body.dyslexia-mode .campaign-section-card, body.dyslexia-mode .campaign-hero, body.dyslexia-mode .campaign-hero-fallback, body.dyslexia-mode .focus-card, body.dyslexia-mode .battle-control-card, body.dyslexia-mode .battle-card, body.dyslexia-mode .prep-panel, body.dyslexia-mode .adventure-preview-block, body.dyslexia-mode .character-sheet-panel, body.dyslexia-mode .link-preview-popover, body.dyslexia-mode .flash-message { background: var(--access-surface-card) !important; color: var(--access-text) !important; border-color: var(--access-border) !important; box-shadow: var(--access-shadow) !important; text-shadow: none !important; } body.dyslexia-mode nav#primary, body.dyslexia-mode #top { background: linear-gradient(180deg, #e4d1ad 0%, #d8c19a 100%) !important; } body.dyslexia-mode .content-shell { background: linear-gradient(180deg, rgba(241, 229, 208, 0.95) 0%, rgba(226, 209, 180, 0.92) 100%) !important; } body.dyslexia-mode #wrapper { padding: 1.5rem 0 2.25rem; } body.dyslexia-mode #inner-wrapper { width: min(1120px, calc(100% - 32px)); max-width: 1120px; background: var(--access-surface) !important; border: 1px solid var(--access-border) !important; border-radius: 8px; overflow: hidden; } body.dyslexia-mode #top { border-bottom: 1px solid var(--access-border) !important; } body.dyslexia-mode .brand-mark { width: min(440px, 78%); padding-top: 14px; } body.dyslexia-mode .tagline { color: var(--access-text-muted) !important; font-size: 1rem; margin: 2px 18px 14px; line-height: 1.5; } body.dyslexia-mode nav#primary { border-top: 1px solid var(--access-border) !important; border-bottom: 1px solid var(--access-border) !important; } body.dyslexia-mode nav#primary ul.main-menu { flex-wrap: wrap; gap: 0.25rem 0.75rem; padding: 0.7rem 1rem; min-height: 0; } body.dyslexia-mode nav#primary ul.main-menu a, body.dyslexia-mode nav#primary ul.main-menu .nav-tool-button { min-height: 2.35rem; padding: 0 0.1rem; letter-spacing: 0.02em; line-height: 1.3; text-transform: none; white-space: nowrap; } body.dyslexia-mode .main-menu .dropdown-menu { background: var(--access-surface-card) !important; border-color: var(--access-border) !important; } body.dyslexia-mode .main-menu .dropdown-menu li a { white-space: normal; } body.dyslexia-mode .auth-panel { max-width: 640px; padding: clamp(1.25rem, 3vw, 2rem); border-radius: 8px; background: var(--access-surface-card) !important; } body.dyslexia-mode .auth-panel h2, body.dyslexia-mode .auth-panel .eyebrow { text-align: left; } body.dyslexia-mode .auth-panel h2 { padding-bottom: 0.7rem; border-bottom: 2px solid var(--access-border-soft); } body.dyslexia-mode .auth-panel fieldset { padding: 1rem !important; border: 1px solid var(--access-border-soft) !important; border-radius: 8px; background: var(--access-surface-soft); } body.dyslexia-mode .auth-panel label { align-items: flex-start !important; color: var(--access-text) !important; text-transform: none; } body.dyslexia-mode .auth-panel small, body.dyslexia-mode small { color: var(--access-text-muted) !important; text-transform: none; } body.dyslexia-mode footer { background: #d3bc94 !important; border-top: 1px solid var(--access-border) !important; border-bottom: 0 !important; } body.dyslexia-mode #footer-inside, body.dyslexia-mode #lastline { width: 100%; float: none; } body.dyslexia-mode #lastline small { color: var(--access-text-muted) !important; float: none; display: block; margin: 0; padding: 1rem 1.75rem; } body.dyslexia-mode #logo .brand-mark img, body.dyslexia-mode .campaign-hero img { filter: none !important; } body.dyslexia-mode h1, body.dyslexia-mode h2, body.dyslexia-mode h3, body.dyslexia-mode h4, body.dyslexia-mode h5, body.dyslexia-mode h6, body.dyslexia-mode .tavern-logo a, body.dyslexia-mode .markdown-body h1, body.dyslexia-mode .markdown-body h2, body.dyslexia-mode .markdown-body h3, body.dyslexia-mode .markdown-body h4, body.dyslexia-mode .markdown-body h5, body.dyslexia-mode .markdown-body h6, body.dyslexia-mode .eyebrow, body.dyslexia-mode .campaign-kicker, body.dyslexia-mode .link-preview-title { color: var(--access-heading) !important; font-family: inherit !important; text-shadow: none !important; } body.dyslexia-mode p, body.dyslexia-mode li, body.dyslexia-mode dd, body.dyslexia-mode td, body.dyslexia-mode th, body.dyslexia-mode .markdown-body, body.dyslexia-mode .link-preview-body, body.dyslexia-mode .tagline, body.dyslexia-mode .campaign-role, body.dyslexia-mode .sheet-muted { color: var(--access-text) !important; text-shadow: none !important; } body.dyslexia-mode a, body.dyslexia-mode .markdown-body a, body.dyslexia-mode nav#primary ul.main-menu a, body.dyslexia-mode nav#primary ul.main-menu .nav-tool-button { color: var(--access-link) !important; text-decoration: underline !important; text-decoration-thickness: 2px; text-underline-offset: 4px; } body.dyslexia-mode a:hover, body.dyslexia-mode .markdown-body a:hover, body.dyslexia-mode nav#primary ul.main-menu a:hover, body.dyslexia-mode nav#primary ul.main-menu .nav-tool-button:hover { color: var(--access-link-hover) !important; } body.dyslexia-mode nav#primary ul.main-menu a::after, body.dyslexia-mode nav#primary ul.main-menu .nav-tool-button::after, body.dyslexia-mode .markdown-body h3::before { display: none !important; } body.dyslexia-mode .buttonsubmit, body.dyslexia-mode button, body.dyslexia-mode .reader-actions a, body.dyslexia-mode .reader-actions button { background: var(--access-button-bg) !important; border: 2px solid var(--access-link) !important; color: #06345f !important; box-shadow: none !important; text-shadow: none !important; border-radius: 6px; font-weight: 700; letter-spacing: 0.01em; } body.dyslexia-mode .buttonsubmit:hover, body.dyslexia-mode button:hover, body.dyslexia-mode .reader-actions a:hover, body.dyslexia-mode .reader-actions button:hover { background: var(--access-button-hover) !important; color: var(--access-link-hover) !important; transform: none !important; } body.dyslexia-mode button:disabled, body.dyslexia-mode [disabled], body.dyslexia-mode [aria-disabled="true"], body.dyslexia-mode .is-disabled { background: #d7cbb8 !important; border-color: #786b59 !important; color: #5a5043 !important; opacity: 1 !important; cursor: not-allowed; } body.dyslexia-mode input, body.dyslexia-mode select, body.dyslexia-mode textarea { background: var(--access-surface-control) !important; border: 2px solid #66543a !important; color: var(--access-heading) !important; box-shadow: none !important; border-radius: 6px; } body.dyslexia-mode input:focus, body.dyslexia-mode select:focus, body.dyslexia-mode textarea:focus { border-color: var(--access-focus) !important; box-shadow: 0 0 0 3px rgba(11, 99, 206, 0.26) !important; } body.dyslexia-mode table, body.dyslexia-mode th, body.dyslexia-mode td, body.dyslexia-mode .markdown-body table, body.dyslexia-mode .markdown-body th, body.dyslexia-mode .markdown-body td { border-color: #6b5a35 !important; } body.dyslexia-mode th, body.dyslexia-mode .markdown-body th { background: var(--access-surface-strong) !important; color: var(--access-heading) !important; } body.dyslexia-mode .markdown-body blockquote { background: var(--access-surface-soft) !important; border-left-color: var(--access-link) !important; color: var(--access-text) !important; } body.dyslexia-mode .markdown-body code, body.dyslexia-mode .markdown-body pre { background: #eadcc4 !important; border-color: #7b6b54 !important; color: var(--access-heading) !important; } /* ── Readable prose containers ──────────────────────────── */ body.dyslexia-mode .markdown-body, body.dyslexia-mode .book-reader-content, body.dyslexia-mode .reader-page, body.dyslexia-mode .vault-content, body.dyslexia-mode .compendium-content, body.dyslexia-mode article .prose, body.dyslexia-mode section .prose { 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; text-transform: none; } /* ── 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 var(--access-focus); 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; }