/** * Dyslexia-friendly reading mode. * * All overrides gated by html.dyslexia. Configurable values come from * CSS custom properties set on by theme.js (or dyslexia-reader.js * in discoveries). When the class is absent, this file does nothing. * * Font files only download when a matching font-family rule is active. */ /* Self-hosted fonts in /assets/fonts/. font-display:swap avoids FOIT. */ @font-face { font-family: 'OpenDyslexic'; src: url('/assets/fonts/opendyslexic-400.woff2') format('woff2'); font-weight: 400 500; font-style: normal; font-display: swap; } @font-face { font-family: 'OpenDyslexic'; src: url('/assets/fonts/opendyslexic-700.woff2') format('woff2'); font-weight: 600 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Lexend'; src: url('/assets/fonts/lexend-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Lexend'; src: url('/assets/fonts/lexend-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Lexend'; src: url('/assets/fonts/lexend-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Lexend'; src: url('/assets/fonts/lexend-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Comic Mono'; src: url('/assets/fonts/comic-mono-regular.ttf') format('truetype'); font-weight: 400 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Comic Mono'; src: url('/assets/fonts/comic-mono-bold.ttf') format('truetype'); font-weight: 600 900; font-style: normal; font-display: swap; } /* Defaults. Overridden inline by JS via `--dx-*` custom properties on . */ html.dyslexia { --dx-font-family: 'OpenDyslexic', 'Comic Sans MS', sans-serif; --dx-letter-spacing: 0.12em; --dx-word-spacing: 0.35em; --dx-line-height: 2.0; --dx-font-weight: 600; } /* Warm off-white surfaces in light theme. Research (Rello and Bigham 2017, BDA Style Guide 2023) shows pure white backgrounds cause visual stress for many dyslexic readers. We override main.css theme variables so cards, body, and panels all pick up the warmer tint automatically. */ html.light.dyslexia { --bg-primary: #F4EFE0; --bg-secondary: #FBF7EA; --bg-tertiary: #E8E2CE; --bg-hover: #DBD3B8; } /* Apply to body and inheritable text. */ html.dyslexia body, html.dyslexia p, html.dyslexia span, html.dyslexia div, html.dyslexia li, html.dyslexia a, html.dyslexia label, html.dyslexia button, html.dyslexia input, html.dyslexia textarea, html.dyslexia select, html.dyslexia th, html.dyslexia td, html.dyslexia blockquote, html.dyslexia figcaption { font-family: var(--dx-font-family) !important; letter-spacing: var(--dx-letter-spacing); word-spacing: var(--dx-word-spacing); line-height: var(--dx-line-height); font-variant-ligatures: none; } /* Headings: keep the dyslexia font but use a slightly tighter line-height so big titles don't collapse the page layout. */ html.dyslexia h1, html.dyslexia h2, html.dyslexia h3, html.dyslexia h4, html.dyslexia h5, html.dyslexia h6 { font-family: var(--dx-font-family) !important; letter-spacing: var(--dx-letter-spacing); word-spacing: var(--dx-word-spacing); /* Never drop below WCAG 1.4.12 minimum (1.5x). */ line-height: max(1.5, calc(var(--dx-line-height) * 0.75)); font-weight: var(--dx-font-weight); font-variant-ligatures: none; } /* Body text uses the configured weight; lighter elements stay readable. */ html.dyslexia body, html.dyslexia p, html.dyslexia li, html.dyslexia label, html.dyslexia button, html.dyslexia a, html.dyslexia th, html.dyslexia td { font-weight: var(--dx-font-weight); } /* Code blocks get dyslexia treatment in a monospace-safe way: swap to Comic Mono (monospace AND dyslexia-friendly, same rationale as the terminal), apply the user's font-weight preference, and loosen line-height for readability. Letter/word spacing stay at normal so indentation columns and character alignment are preserved. OpenDyslexic and Lexend are proportional and would shred code alignment, so we substitute Comic Mono regardless of which font the user picked in settings. */ html.dyslexia code, html.dyslexia pre, html.dyslexia kbd, html.dyslexia samp, html.dyslexia tt, html.dyslexia .monospace, html.dyslexia .font-mono { font-family: 'Comic Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; letter-spacing: normal; word-spacing: normal; line-height: 1.7; font-weight: var(--dx-font-weight, 600); } /* Don't break icon fonts (Material Icons, Font Awesome, etc.). */ html.dyslexia .material-icons, html.dyslexia .material-symbols-outlined, html.dyslexia .fa, html.dyslexia .fas, html.dyslexia .far, html.dyslexia .fab, html.dyslexia [class^="icon-"], html.dyslexia [class*=" icon-"] { font-family: revert !important; letter-spacing: normal; word-spacing: normal; line-height: 1; font-weight: normal; } /* === Overflow defense === Dyslexia mode widens text noticeably: letter-spacing, word-spacing, and a font swap to OpenDyslexic/Lexend (both wider than system sans-serif). UI elements sized for tighter typography can overflow their containers. These rules let text wrap cleanly instead of bursting out. */ /* Let long words (app names, URLs, tech terms) break across lines rather than forcing the container wider. */ html.dyslexia body, html.dyslexia p, html.dyslexia h1, html.dyslexia h2, html.dyslexia h3, html.dyslexia h4, html.dyslexia h5, html.dyslexia h6, html.dyslexia li, html.dyslexia a, html.dyslexia span, html.dyslexia label, html.dyslexia td, html.dyslexia th, html.dyslexia div { overflow-wrap: break-word; word-wrap: break-word; } /* Horizontal tab rows (settings tabs, VPS dashboard tabs) should scroll rather than overflow or wrap awkwardly when tab labels widen. */ html.dyslexia .tab-nav, html.dyslexia .vps-tabs { overflow-x: auto; flex-wrap: nowrap; } /* Buttons and tabs keep their single-line layout but allow their container to shrink them. min-width: 0 is the standard escape hatch for flex children that default to min-content width. */ html.dyslexia .tab-btn, html.dyslexia .vps-tab, html.dyslexia .btn { min-width: 0; } /* Grid layouts with fixed minmax() columns (app grids, card grids) can break when item content widens. Force grid items to accept smaller minimums so content can wrap inside. */ html.dyslexia .apps-grid, html.dyslexia .all-apps-grid, html.dyslexia .card-grid > *, html.dyslexia .apps-grid > *, html.dyslexia .all-apps-grid > * { min-width: 0; } /* Small chip/pill/tag elements are labels, not reading content. They have tight layouts that letter-spacing breaks (text wraps to multiple lines, pills burst out of cards, continuous stripes form across grids). Reset spacing for these compact UI elements so the layout holds. */ html.dyslexia .all-apps-card-tag, html.dyslexia .all-apps-stat-pill, html.dyslexia .apps-browser-pill, html.dyslexia .labs-badge-inline, html.dyslexia .badge, html.dyslexia .tag, html.dyslexia .chip, html.dyslexia .pill { letter-spacing: normal; word-spacing: normal; } /* Stats rows inside cards should wrap to multiple lines when pills widen, rather than overflowing the card boundary. */ html.dyslexia .all-apps-card-stats { flex-wrap: wrap; } /* Card action buttons ("+ New Project") are narrow and can't fit wider text on a single line. Allow them to span the full card width and accept two-line wrapping cleanly. */ html.dyslexia .all-apps-card-action { max-width: 100%; white-space: normal; text-align: center; line-height: 1.3; } /* Editor toolbar (create.php): fixed 48px height, non-wrapping flex row with 13+ buttons. Dyslexia mode breaks it three ways at once: 1. OpenDyslexic is ~15% wider than system sans 2. Root font-size bumps to 20px ('large') so all rem-based padding and font-size in the toolbar scales up ~25% 3. Letter-spacing adds more width per character Net effect is ~35% wider buttons that burst out of the toolbar. Since the toolbar is pure UI chrome (not reading content), opt it out of dyslexia typography entirely, matching how we treat icons and tabs. Font-family stays matched to the site's base UI font, spacing stays tight, and the row scrolls horizontally if it still overflows. */ html.dyslexia .toolbar, html.dyslexia .toolbar *, html.dyslexia .toolbar-expand-bar, html.dyslexia .toolbar-expand-bar * { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; letter-spacing: normal !important; word-spacing: normal !important; line-height: 1.4 !important; } /* Lock the toolbar buttons to their non-dyslexia size. The rem-based font-size and padding on .toolbar-nav-btn / .toolbar-kebab-item would otherwise scale ~25% because the 'large' font_size preset bumps root from 16px to 20px. Use absolute pixel values to match the default look. */ html.dyslexia .toolbar-nav-btn, html.dyslexia .toolbar-kebab-btn, html.dyslexia .toolbar-kebab-item { font-size: 13px !important; padding: 6px 12px !important; } html.dyslexia .toolbar-kebab-btn { width: 32px !important; padding: 6px 0 !important; font-size: 18px !important; } html.dyslexia .toolbar-kebab-menu { min-width: 220px !important; padding: 4px !important; } html.dyslexia .toolbar-kebab-item { padding: 8px 12px !important; } html.dyslexia .toolbar, html.dyslexia .toolbar-expand-bar { overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; } /* While the kebab dropdown is open, switch the toolbar to overflow:visible so the absolutely-positioned menu can escape vertically. Otherwise the menu opens in the DOM (.hidden removed) but is invisibly clipped by the toolbar's overflow:hidden box. Horizontal scrolling is suspended while the menu is open, which is fine since the user is interacting with the menu, not scrolling. */ html.dyslexia .toolbar:has(.toolbar-kebab-menu:not(.hidden)) { overflow: visible !important; } /* Hide the horizontal scrollbar on WebKit so it doesn't eat into the toolbar's tight vertical space. Scroll still works via wheel/swipe. */ html.dyslexia .toolbar::-webkit-scrollbar, html.dyslexia .toolbar-expand-bar::-webkit-scrollbar { height: 0; display: none; } /* Prevent toolbar items from shrinking below their natural width. Without this, flex default shrink can squish buttons so their text collides with their own padding or adjacent items. */ html.dyslexia .toolbar > *, html.dyslexia .toolbar-nav > *, html.dyslexia .toolbar-expand-bar > * { flex-shrink: 0; } /* Title is the one exception. It has flex: 1 and should still shrink with ellipsis truncation (its default behavior), not push siblings off the toolbar. */ html.dyslexia .toolbar-title { flex-shrink: 1; min-width: 0; } /* Reduced motion rules moved to main.css (they aren't dyslexia-specific). */