/* Accessibility panel styles — applied only when .a11y-enabled is present on */ /* Toggle button */ .a11y-toggle-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; color: #fff; background-color: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 0.375rem; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; } .a11y-toggle-btn:hover, .a11y-toggle-btn:focus-visible { background-color: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.5); outline: 3px solid rgba(255, 255, 255, 0.5); outline-offset: 2px; } /* Panel overlay */ .a11y-panel-overlay { position: fixed; inset: 0; z-index: 100; display: none; background-color: rgba(0, 0, 0, 0.5); } .a11y-panel-overlay.is-open { display: block; } /* Panel dialog */ .a11y-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 101; display: none; flex-direction: column; width: 100%; max-width: 24rem; padding: 1.25rem; overflow-y: auto; background-color: #fff; color: #1f2937; box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15); } .a11y-panel.is-open { display: flex; } .a11y-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 2px solid #e5e7eb; } .a11y-panel-title { margin: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.4; color: #111827; } .a11y-panel-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.25rem; height: 2.25rem; padding: 0; color: #374151; background: transparent; border: 1px solid #d1d5db; border-radius: 0.375rem; cursor: pointer; } .a11y-panel-close:hover, .a11y-panel-close:focus-visible { color: #111827; background-color: #f3f4f6; outline: 3px solid #2563eb; outline-offset: 2px; } .a11y-panel-section { margin-bottom: 1.5rem; } .a11y-panel-section-title { margin: 0 0 0.75rem; font-size: 1rem; font-weight: 600; color: #111827; } .a11y-panel-options { display: flex; flex-wrap: wrap; gap: 0.5rem; } .a11y-panel-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: 0.5rem 0.875rem; font-size: 0.9375rem; font-weight: 500; color: #374151; background-color: #f9fafb; border: 1px solid #d1d5db; border-radius: 0.375rem; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .a11y-panel-btn:hover, .a11y-panel-btn:focus-visible { background-color: #f3f4f6; border-color: #9ca3af; outline: 3px solid #2563eb; outline-offset: 2px; } .a11y-panel-btn[aria-pressed="true"] { color: #fff; background-color: #2563eb; border-color: #2563eb; } .a11y-panel-btn[aria-pressed="true"]:hover, .a11y-panel-btn[aria-pressed="true"]:focus-visible { background-color: #1d4ed8; border-color: #1d4ed8; } .a11y-panel-reset { width: 100%; margin-top: auto; padding: 0.75rem 1rem; font-size: 1rem; font-weight: 600; color: #fff; background-color: #dc2626; border: none; border-radius: 0.375rem; cursor: pointer; transition: background-color 0.15s ease; } .a11y-panel-reset:hover, .a11y-panel-reset:focus-visible { background-color: #b91c1c; outline: 3px solid #7f1d1d; outline-offset: 2px; } /* ============================================================ Accessibility mode applied styles ============================================================ */ body.a11y-enabled { /* Ensure readable base text settings */ text-align: left; } /* Font sizes */ body.a11y-enabled.a11y-font-size-large { font-size: 125%; } body.a11y-enabled.a11y-font-size-xlarge { font-size: 160%; } /* Serif font */ body.a11y-enabled.a11y-font-serif, body.a11y-enabled.a11y-font-serif * { font-family: Georgia, "Times New Roman", Times, serif !important; } /* Letter spacing */ body.a11y-enabled.a11y-letter-spacing-wide, body.a11y-enabled.a11y-letter-spacing-wide * { letter-spacing: 0.12em !important; } /* Line spacing */ body.a11y-enabled.a11y-line-spacing-wide p, body.a11y-enabled.a11y-line-spacing-wide li { line-height: 1.75 !important; } /* Hide images */ body.a11y-enabled.a11y-hide-images img, body.a11y-enabled.a11y-hide-images [role="img"], body.a11y-enabled.a11y-hide-images picture, body.a11y-enabled.a11y-hide-images svg:not(.a11y-panel-icon):not(.a11y-toggle-icon), body.a11y-enabled.a11y-hide-images video, body.a11y-enabled.a11y-hide-images canvas, body.a11y-enabled.a11y-hide-images figure { display: none !important; } body.a11y-enabled.a11y-hide-images .header-logo, body.a11y-enabled.a11y-hide-images * { background-image: none !important; } body.a11y-enabled.a11y-hide-images figcaption, body.a11y-enabled.a11y-hide-images .a11y-image-alt { display: block !important; padding: 0.75rem; font-style: italic; color: inherit; background-color: transparent; border: 1px dashed currentColor; } /* Reduce motion */ body.a11y-enabled.a11y-reduce-motion, body.a11y-enabled.a11y-reduce-motion * { animation: none !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition: none !important; scroll-behavior: auto !important; } /* ============================================================ Themes ============================================================ */ /* Contrast theme: black text on white background */ body.a11y-enabled.a11y-theme-contrast, body.a11y-enabled.a11y-theme-contrast * { color: #000000 !important; background-color: #ffffff !important; border-color: #000000 !important; box-shadow: none !important; text-shadow: none !important; } body.a11y-enabled.a11y-theme-contrast a, body.a11y-enabled.a11y-theme-contrast a * { color: #000000 !important; text-decoration: underline !important; } body.a11y-enabled.a11y-theme-contrast a:hover, body.a11y-enabled.a11y-theme-contrast a:focus-visible { background-color: #000000 !important; color: #ffffff !important; outline: 4px solid #000000 !important; outline-offset: 2px !important; } body.a11y-enabled.a11y-theme-contrast input, body.a11y-enabled.a11y-theme-contrast textarea, body.a11y-enabled.a11y-theme-contrast select, body.a11y-enabled.a11y-theme-contrast button:not(.a11y-toggle-btn):not(.a11y-panel-btn):not(.a11y-panel-close):not(.a11y-panel-reset) { color: #000000 !important; background-color: #ffffff !important; border: 2px solid #000000 !important; } body.a11y-enabled.a11y-theme-contrast :focus-visible { outline: 4px solid #000000 !important; outline-offset: 2px !important; } /* Dark theme: white text on black background */ body.a11y-enabled.a11y-theme-dark, body.a11y-enabled.a11y-theme-dark * { color: #ffffff !important; background-color: #000000 !important; border-color: #ffffff !important; box-shadow: none !important; text-shadow: none !important; } body.a11y-enabled.a11y-theme-dark a, body.a11y-enabled.a11y-theme-dark a * { color: #ffffff !important; text-decoration: underline !important; } body.a11y-enabled.a11y-theme-dark a:hover, body.a11y-enabled.a11y-theme-dark a:focus-visible { background-color: #ffffff !important; color: #000000 !important; outline: 4px solid #ffffff !important; outline-offset: 2px !important; } body.a11y-enabled.a11y-theme-dark input, body.a11y-enabled.a11y-theme-dark textarea, body.a11y-enabled.a11y-theme-dark select, body.a11y-enabled.a11y-theme-dark button:not(.a11y-toggle-btn):not(.a11y-panel-btn):not(.a11y-panel-close):not(.a11y-panel-reset) { color: #ffffff !important; background-color: #000000 !important; border: 2px solid #ffffff !important; } body.a11y-enabled.a11y-theme-dark :focus-visible { outline: 4px solid #ffffff !important; outline-offset: 2px !important; } /* Blue theme: dark blue text on light blue background */ body.a11y-enabled.a11y-theme-blue, body.a11y-enabled.a11y-theme-blue * { color: #000080 !important; background-color: #9ecfff !important; border-color: #000080 !important; box-shadow: none !important; text-shadow: none !important; } body.a11y-enabled.a11y-theme-blue a, body.a11y-enabled.a11y-theme-blue a * { color: #000080 !important; text-decoration: underline !important; } body.a11y-enabled.a11y-theme-blue a:hover, body.a11y-enabled.a11y-theme-blue a:focus-visible { background-color: #000080 !important; color: #9ecfff !important; outline: 4px solid #000080 !important; outline-offset: 2px !important; } body.a11y-enabled.a11y-theme-blue input, body.a11y-enabled.a11y-theme-blue textarea, body.a11y-enabled.a11y-theme-blue select, body.a11y-enabled.a11y-theme-blue button:not(.a11y-toggle-btn):not(.a11y-panel-btn):not(.a11y-panel-close):not(.a11y-panel-reset) { color: #000080 !important; background-color: #9ecfff !important; border: 2px solid #000080 !important; } body.a11y-enabled.a11y-theme-blue :focus-visible { outline: 4px solid #000080 !important; outline-offset: 2px !important; } /* Beige theme: brown text on beige background */ body.a11y-enabled.a11y-theme-beige, body.a11y-enabled.a11y-theme-beige * { color: #4b2e00 !important; background-color: #f5f0dc !important; border-color: #4b2e00 !important; box-shadow: none !important; text-shadow: none !important; } body.a11y-enabled.a11y-theme-beige a, body.a11y-enabled.a11y-theme-beige a * { color: #4b2e00 !important; text-decoration: underline !important; } body.a11y-enabled.a11y-theme-beige a:hover, body.a11y-enabled.a11y-theme-beige a:focus-visible { background-color: #4b2e00 !important; color: #f5f0dc !important; outline: 4px solid #4b2e00 !important; outline-offset: 2px !important; } body.a11y-enabled.a11y-theme-beige input, body.a11y-enabled.a11y-theme-beige textarea, body.a11y-enabled.a11y-theme-beige select, body.a11y-enabled.a11y-theme-beige button:not(.a11y-toggle-btn):not(.a11y-panel-btn):not(.a11y-panel-close):not(.a11y-panel-reset) { color: #4b2e00 !important; background-color: #f5f0dc !important; border: 2px solid #4b2e00 !important; } body.a11y-enabled.a11y-theme-beige :focus-visible { outline: 4px solid #4b2e00 !important; outline-offset: 2px !important; } /* Ensure generic focus is always visible in a11y mode */ body.a11y-enabled :focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; } /* Make the first row of content tables stand out in accessibility mode. This is a visual enhancement and does not replace semantic headers. */ body.a11y-enabled .prose table tr:first-child td, body.a11y-enabled .prose table tr:first-child th, body.a11y-enabled .vsosh-schedule table tr:first-child td, body.a11y-enabled .vsosh-schedule table tr:first-child th { font-weight: 700; } /* Preserve panel visibility above themed overlays. These rules use !important to win over the broad theme selectors above. */ .a11y-toggle-btn { color: #ffffff !important; background-color: rgba(255, 255, 255, 0.15) !important; border-color: rgba(255, 255, 255, 0.3) !important; } .a11y-toggle-btn:hover, .a11y-toggle-btn:focus-visible { color: #ffffff !important; background-color: rgba(255, 255, 255, 0.25) !important; border-color: rgba(255, 255, 255, 0.5) !important; } .a11y-panel-overlay { background-color: rgba(0, 0, 0, 0.5) !important; } .a11y-panel { color: #1f2937 !important; background-color: #ffffff !important; border-color: #e5e7eb !important; box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15) !important; } .a11y-panel-title, .a11y-panel-section-title { color: #111827 !important; background-color: transparent !important; } .a11y-panel-close { color: #374151 !important; background: transparent !important; border-color: #d1d5db !important; } .a11y-panel-close:hover, .a11y-panel-close:focus-visible { color: #111827 !important; background-color: #f3f4f6 !important; } .a11y-panel-btn { color: #374151 !important; background-color: #f9fafb !important; border-color: #d1d5db !important; } .a11y-panel-btn:hover, .a11y-panel-btn:focus-visible { color: #374151 !important; background-color: #f3f4f6 !important; border-color: #9ca3af !important; } .a11y-panel-btn[aria-pressed="true"] { color: #ffffff !important; background-color: #2563eb !important; border-color: #2563eb !important; } .a11y-panel-btn[aria-pressed="true"]:hover, .a11y-panel-btn[aria-pressed="true"]:focus-visible { color: #ffffff !important; background-color: #1d4ed8 !important; border-color: #1d4ed8 !important; } .a11y-panel-reset { color: #ffffff !important; background-color: #dc2626 !important; }