/** * JustAllowGod.com - Accessibility Styles * * Provides visual modes for users who need enhanced readability: * - High Contrast Mode (.high-contrast on ) * - Dyslexia-Friendly Mode (.dyslexia-friendly on ) * - Keyboard Navigation Mode (.keyboard-nav on ) * - Font size scaling (--a11y-font-scale CSS variable) * - Line spacing adjustments (--a11y-line-height CSS variable) * - Print styles * * Design palette reference: * Royal Blue #1e3a5f | Gold #d4a017 | Teal #2a9d8f */ /* ========================================================================= OpenDyslexic font (loaded from CDN for dyslexia-friendly mode) ========================================================================= */ @font-face { font-family: 'OpenDyslexic'; src: url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/woff/OpenDyslexic-Regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'OpenDyslexic'; src: url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/woff/OpenDyslexic-Bold.woff') format('woff'); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: 'OpenDyslexic'; src: url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/woff/OpenDyslexic-Italic.woff') format('woff'); font-weight: normal; font-style: italic; font-display: swap; } /* ========================================================================= CSS Custom Properties for dynamic scaling ========================================================================= */ :root { --a11y-font-scale: 1; --a11y-line-height: normal; } /* Apply font scaling globally when set */ body { font-size: calc(1rem * var(--a11y-font-scale)); line-height: var(--a11y-line-height); } /* ========================================================================= Skip-to-Content Link Visible only when focused (keyboard users) ========================================================================= */ .skip-to-content { position: absolute; top: -100%; left: 50%; transform: translateX(-50%); z-index: 10000; padding: 0.75rem 1.5rem; background: #1e3a5f; color: #fff; font-weight: 700; font-size: 1rem; text-decoration: none; border-radius: 0 0 0.5rem 0.5rem; transition: top 0.2s ease; } .skip-to-content:focus { top: 0; outline: 3px solid #d4a017; outline-offset: 2px; } /* ========================================================================= HIGH CONTRAST MODE .high-contrast on ========================================================================= */ body.high-contrast { background-color: #000 !important; color: #fff !important; } /* Remove all gradients, shadows, transparency */ body.high-contrast *, body.high-contrast *::before, body.high-contrast *::after { text-shadow: none !important; box-shadow: none !important; } /* Background overrides — force black on all containers */ body.high-contrast div, body.high-contrast section, body.high-contrast article, body.high-contrast aside, body.high-contrast header, body.high-contrast footer, body.high-contrast nav, body.high-contrast main, body.high-contrast form, body.high-contrast fieldset, body.high-contrast table, body.high-contrast thead, body.high-contrast tbody, body.high-contrast tr, body.high-contrast td, body.high-contrast th, body.high-contrast blockquote, body.high-contrast pre, body.high-contrast code { background-color: #000 !important; background-image: none !important; color: #fff !important; border-color: #fff !important; } /* Headings in cyan for clear hierarchy */ body.high-contrast h1, body.high-contrast h2, body.high-contrast h3, body.high-contrast h4, body.high-contrast h5, body.high-contrast h6 { color: #00FFFF !important; } /* Links and interactive elements in yellow */ body.high-contrast a, body.high-contrast a:visited { color: #FFD700 !important; text-decoration: underline !important; } body.high-contrast a:hover, body.high-contrast a:focus { color: #FFFF00 !important; } body.high-contrast button, body.high-contrast [role="button"], body.high-contrast input[type="submit"], body.high-contrast input[type="button"], body.high-contrast .btn { background-color: #FFD700 !important; color: #000 !important; border: 2px solid #FFD700 !important; } body.high-contrast button:hover, body.high-contrast [role="button"]:hover, body.high-contrast input[type="submit"]:hover, body.high-contrast input[type="button"]:hover, body.high-contrast .btn:hover { background-color: #FFFF00 !important; color: #000 !important; } /* Borders — increased width, solid white */ body.high-contrast *:not(body):not(html) { border-width: 0; } body.high-contrast [class*="border"], body.high-contrast [class*="rounded"], body.high-contrast table, body.high-contrast td, body.high-contrast th, body.high-contrast input, body.high-contrast select, body.high-contrast textarea { border: 2px solid #fff !important; } /* Form inputs */ body.high-contrast input, body.high-contrast select, body.high-contrast textarea { background-color: #000 !important; color: #fff !important; } body.high-contrast input::placeholder, body.high-contrast textarea::placeholder { color: #aaa !important; } /* Focus indicators — 3px solid yellow outline */ body.high-contrast a:focus, body.high-contrast button:focus, body.high-contrast [role="button"]:focus, body.high-contrast input:focus, body.high-contrast select:focus, body.high-contrast textarea:focus, body.high-contrast [tabindex]:focus { outline: 3px solid #FFD700 !important; outline-offset: 2px !important; } /* Images — add white border for visibility */ body.high-contrast img { border: 2px solid #fff !important; } /* Override Tailwind gradient text */ body.high-contrast .text-gradient, body.high-contrast [class*="text-gradient"] { -webkit-text-fill-color: #00FFFF !important; background: none !important; } /* Override glass/transparent effects */ body.high-contrast .glass, body.high-contrast [class*="backdrop"] { background: #000 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ========================================================================= DYSLEXIA-FRIENDLY MODE .dyslexia-friendly on ========================================================================= */ body.dyslexia-friendly { font-family: 'OpenDyslexic', sans-serif !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important; line-height: 1.8 !important; font-size: calc(1.1em * var(--a11y-font-scale)) !important; background-color: #FAF8F0 !important; } /* Apply dyslexia font to all text elements */ body.dyslexia-friendly *:not(.a11y-icon) { font-family: 'OpenDyslexic', sans-serif !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important; } /* Override scripture font in dyslexia mode */ body.dyslexia-friendly .font-scripture { font-family: 'OpenDyslexic', sans-serif !important; } /* Warm background for containers */ body.dyslexia-friendly section, body.dyslexia-friendly article, body.dyslexia-friendly main { background-color: #FAF8F0 !important; } /* Slightly darker bg on darker sections for contrast */ body.dyslexia-friendly .bg-hero, body.dyslexia-friendly [class*="bg-royal-8"], body.dyslexia-friendly [class*="bg-royal-9"] { background-color: #1e3a5f !important; background-image: none !important; } /* Max line width for readability */ body.dyslexia-friendly p, body.dyslexia-friendly li, body.dyslexia-friendly blockquote, body.dyslexia-friendly .prose { max-width: 70ch; } /* Center constrained text blocks */ body.dyslexia-friendly .text-center p, body.dyslexia-friendly .text-center li, body.dyslexia-friendly .text-center blockquote { margin-left: auto; margin-right: auto; } /* Increase line height on verse text */ body.dyslexia-friendly .verse-text, body.dyslexia-friendly [data-verse] { line-height: 2 !important; } /* ========================================================================= KEYBOARD NAVIGATION MODE .keyboard-nav on Auto-added when Tab is pressed, removed on mouse click ========================================================================= */ /* Clear focus rings on all interactive elements */ body.keyboard-nav a:focus, body.keyboard-nav button:focus, body.keyboard-nav [role="button"]:focus, body.keyboard-nav input:focus, body.keyboard-nav select:focus, body.keyboard-nav textarea:focus, body.keyboard-nav [tabindex]:focus, body.keyboard-nav summary:focus { outline: 3px solid #d4a017 !important; outline-offset: 3px !important; border-radius: 2px; } /* Focus-within styling for groups / fieldsets */ body.keyboard-nav fieldset:focus-within, body.keyboard-nav .form-group:focus-within, body.keyboard-nav [role="group"]:focus-within, body.keyboard-nav details:focus-within { outline: 2px dashed #2a9d8f !important; outline-offset: 4px !important; } /* Skip-to-content visible on focus */ body.keyboard-nav .skip-to-content:focus { top: 0; } /* ========================================================================= ACCESSIBILITY PANEL STYLES The floating button and settings popup ========================================================================= */ /* Floating trigger button */ .a11y-trigger { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 9998; width: 3rem; height: 3rem; border-radius: 50%; background-color: #1e3a5f; color: #fff; border: 2px solid #d4a017; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease, background-color 0.2s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .a11y-trigger:hover { transform: scale(1.1); background-color: #2a9d8f; } .a11y-trigger:focus { outline: 3px solid #d4a017; outline-offset: 2px; } .a11y-trigger svg { width: 1.5rem; height: 1.5rem; } /* Settings panel */ .a11y-panel { position: fixed; bottom: 5rem; right: 1.25rem; z-index: 9999; width: 20rem; max-height: 80vh; overflow-y: auto; background-color: #fff; border: 2px solid #1e3a5f; border-radius: 1rem; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25); padding: 1.25rem; display: none; font-family: 'Inter', system-ui, sans-serif; } .a11y-panel.is-open { display: block; } .a11y-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 2px solid #e5e7eb; } .a11y-panel-title { font-size: 1rem; font-weight: 700; color: #1e3a5f; margin: 0; } .a11y-panel-close { background: none; border: none; cursor: pointer; color: #627d98; padding: 0.25rem; line-height: 1; font-size: 1.25rem; } .a11y-panel-close:hover { color: #1e3a5f; } .a11y-panel-close:focus { outline: 2px solid #d4a017; outline-offset: 2px; } /* Section within the panel */ .a11y-section { margin-bottom: 1.25rem; } .a11y-section-label { font-size: 0.75rem; font-weight: 600; color: #627d98; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; } /* Toggle switch */ .a11y-toggle { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0; } .a11y-toggle-label { font-size: 0.875rem; color: #1e3a5f; font-weight: 500; } .a11y-switch { position: relative; width: 2.75rem; height: 1.5rem; background-color: #d1d5db; border-radius: 0.75rem; cursor: pointer; transition: background-color 0.2s ease; border: none; padding: 0; flex-shrink: 0; } .a11y-switch::after { content: ''; position: absolute; top: 0.125rem; left: 0.125rem; width: 1.25rem; height: 1.25rem; background-color: #fff; border-radius: 50%; transition: transform 0.2s ease; } .a11y-switch[aria-checked="true"] { background-color: #2a9d8f; } .a11y-switch[aria-checked="true"]::after { transform: translateX(1.25rem); } .a11y-switch:focus { outline: 2px solid #d4a017; outline-offset: 2px; } /* Size / spacing controls */ .a11y-controls { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0; } .a11y-controls-label { font-size: 0.875rem; color: #1e3a5f; font-weight: 500; } .a11y-controls-buttons { display: flex; align-items: center; gap: 0.5rem; } .a11y-btn { width: 2rem; height: 2rem; border-radius: 0.375rem; border: 1.5px solid #1e3a5f; background: #f0f4f8; color: #1e3a5f; font-weight: 700; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.15s ease; line-height: 1; } .a11y-btn:hover { background-color: #d9e2ec; } .a11y-btn:focus { outline: 2px solid #d4a017; outline-offset: 2px; } .a11y-btn:disabled { opacity: 0.4; cursor: not-allowed; } .a11y-level { font-size: 0.75rem; font-weight: 600; color: #627d98; min-width: 1.5rem; text-align: center; } /* Line spacing radio group */ .a11y-radio-group { display: flex; gap: 0.375rem; padding: 0.5rem 0; } .a11y-radio-btn { flex: 1; padding: 0.375rem 0.5rem; border: 1.5px solid #d1d5db; border-radius: 0.375rem; background: #fff; color: #334e68; font-size: 0.75rem; font-weight: 500; cursor: pointer; text-align: center; transition: all 0.15s ease; } .a11y-radio-btn:hover { border-color: #1e3a5f; } .a11y-radio-btn:focus { outline: 2px solid #d4a017; outline-offset: 2px; } .a11y-radio-btn[aria-checked="true"] { background-color: #1e3a5f; color: #fff; border-color: #1e3a5f; } /* Reset button */ .a11y-reset { width: 100%; padding: 0.5rem; border: 1.5px solid #dc2626; border-radius: 0.5rem; background: #fff; color: #dc2626; font-size: 0.8125rem; font-weight: 600; cursor: pointer; transition: all 0.15s ease; margin-top: 0.5rem; } .a11y-reset:hover { background-color: #dc2626; color: #fff; } .a11y-reset:focus { outline: 2px solid #d4a017; outline-offset: 2px; } /* Keyboard shortcut hint */ .a11y-hint { font-size: 0.6875rem; color: #9ca3af; text-align: center; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid #e5e7eb; } .a11y-hint kbd { background: #f3f4f6; border: 1px solid #d1d5db; border-radius: 0.25rem; padding: 0.125rem 0.375rem; font-family: monospace; font-size: 0.6875rem; } /* Screen reader live region — visually hidden but announced */ .a11y-sr-announcer { 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 overrides for the panel itself */ body.high-contrast .a11y-panel { background-color: #000 !important; border-color: #FFD700 !important; color: #fff !important; } body.high-contrast .a11y-panel-title { color: #00FFFF !important; } body.high-contrast .a11y-toggle-label, body.high-contrast .a11y-controls-label { color: #fff !important; } body.high-contrast .a11y-section-label { color: #aaa !important; } body.high-contrast .a11y-switch { background-color: #555 !important; } body.high-contrast .a11y-switch[aria-checked="true"] { background-color: #FFD700 !important; } body.high-contrast .a11y-btn { background-color: #222 !important; border-color: #FFD700 !important; color: #FFD700 !important; } body.high-contrast .a11y-radio-btn { background-color: #222 !important; border-color: #555 !important; color: #fff !important; } body.high-contrast .a11y-radio-btn[aria-checked="true"] { background-color: #FFD700 !important; color: #000 !important; border-color: #FFD700 !important; } body.high-contrast .a11y-trigger { background-color: #000 !important; border-color: #FFD700 !important; } /* ========================================================================= PRINT STYLES ========================================================================= */ @media print { /* Hide non-content elements */ nav, footer, .a11y-trigger, .a11y-panel, .a11y-sr-announcer, button, [role="button"], .skip-to-content, #mobile-menu, .no-print { display: none !important; } /* Clean print layout */ body { background: #fff !important; color: #000 !important; font-size: 12pt !important; line-height: 1.5 !important; } * { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; } /* Show URLs after links */ a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; font-weight: normal; } /* Don't show URL for anchors or javascript links */ a[href^="#"]::after, a[href^="javascript:"]::after { content: ""; } /* Page breaks */ h1, h2, h3 { page-break-after: avoid; } p, blockquote { orphans: 3; widows: 3; } img { max-width: 100% !important; page-break-inside: avoid; } } /* ========================================================================= SCREEN READER ONLY (.sr-only) Visually hidden but accessible to screen readers ========================================================================= */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* ========================================================================= FOCUS-VISIBLE STYLES Enhanced focus indicators for keyboard users ========================================================================= */ :focus-visible { outline: 3px solid #d4a017; outline-offset: 2px; border-radius: 2px; } a:focus-visible, button:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid #d4a017; outline-offset: 2px; } /* Suppress default outlines when mouse is used (non-keyboard navigation) */ :focus:not(:focus-visible) { outline: none; } /* ========================================================================= REDUCED MOTION PREFERENCES Disables animations for users who prefer reduced motion ========================================================================= */ @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; } .float { animation: none !important; } .fade-in-up { animation: none !important; opacity: 1 !important; } .animate-bounce { animation: none !important; } .animate-spin { animation: none !important; } }