/* OpenDyslexic font — must be first */ @import url('https://fonts.cdnfonts.com/css/open-dyslexic'); /* ══════════════════════════════════════ ACCESSIBILITY WIDGET — STYLES ══════════════════════════════════════ */ /* ── Floating Button ── */ .a11y-widget-btn { position: fixed; bottom: 24px; right: 24px; z-index: 9999; width: 56px; height: 56px; border-radius: 50%; background: #2563eb; box-shadow: 0 4px 20px rgba(37, 99, 235, 0.5), 0 0 0 4px rgba(37, 99, 235, 0.15); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.2s, box-shadow 0.2s; } .a11y-widget-btn:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(37, 99, 235, 0.6), 0 0 0 6px rgba(37, 99, 235, 0.2); } .a11y-widget-btn:focus-visible { outline: 3px solid #93c5fd; outline-offset: 3px; } .a11y-widget-btn svg { width: 28px; height: 28px; color: #fff; fill: none; stroke: currentColor; stroke-width: 1.5; } /* ── Panel ── */ .a11y-panel { position: fixed; bottom: 92px; right: 24px; width: 340px; max-height: 80vh; overflow-y: auto; background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.1); z-index: 9998; display: none; flex-direction: column; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .a11y-panel.is-open { display: flex; } /* ── Panel Header ── */ .a11y-panel-header { display: flex; align-items: center; justify-content: space-between; background: #2563eb; color: #fff; padding: 14px 16px; border-radius: 16px 16px 0 0; flex-shrink: 0; } .a11y-panel-title { font-size: 14px; font-weight: 600; margin: 0; letter-spacing: 0.01em; } .a11y-panel-close { background: rgba(255, 255, 255, 0.2); border: none; color: #fff; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; transition: background 0.15s; } .a11y-panel-close:hover { background: rgba(255, 255, 255, 0.35); } .a11y-panel-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* ── Tile Grid ── */ .a11y-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; } .a11y-tile { background: #f3f4f6; border: 2px solid transparent; border-radius: 12px; padding: 14px 6px 12px; display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 11px; font-weight: 500; color: #1f2937; cursor: pointer; text-align: center; line-height: 1.3; transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s; user-select: none; } .a11y-tile:hover { background: #e5e7eb; transform: translateY(-1px); } .a11y-tile:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; } .a11y-tile.is-active { background: #2563eb; border-color: #1d4ed8; color: #fff; } .a11y-tile svg { width: 26px; height: 26px; flex-shrink: 0; } /* ── Reset Button ── */ .a11y-reset { position: sticky; bottom: 0; margin: 4px 12px 12px; padding: 11px 0; background: #2563eb; color: #fff; border: none; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; width: calc(100% - 24px); display: flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.15s; flex-shrink: 0; } .a11y-reset:hover { background: #1d4ed8; } .a11y-reset:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; } /* ══════════════════════════════════════ ACCESSIBILITY EFFECT CLASSES (applied to ) ══════════════════════════════════════ */ html.a11y-high-contrast { filter: contrast(1.6) brightness(1.05); } html.a11y-bigger-text { font-size: 125% !important; } html.a11y-text-spacing *:not(.a11y-widget-btn):not(.a11y-panel):not(.a11y-panel *) { letter-spacing: 0.12em !important; word-spacing: 0.16em !important; } html.a11y-highlight-links a { text-decoration: underline !important; text-underline-offset: 3px !important; text-decoration-thickness: 2px !important; outline: 2px solid #f59e0b !important; outline-offset: 2px !important; border-radius: 2px; } html.a11y-pause-animations *, html.a11y-pause-animations *::before, html.a11y-pause-animations *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } html.a11y-dyslexia body, html.a11y-dyslexia body * { font-family: 'OpenDyslexic', 'Comic Sans MS', cursive !important; } html.a11y-large-cursor, html.a11y-large-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M5 3L5 30L12 23L17 35L21 33L16 21L26 21Z' fill='black' stroke='white' stroke-width='2'/%3E%3C/svg%3E") 5 3, auto !important; } html.a11y-grayscale { filter: grayscale(1); } html.a11y-line-height *:not(.a11y-widget-btn):not(.a11y-panel):not(.a11y-panel *) { line-height: 1.8 !important; } html.a11y-text-align *:not(.a11y-widget-btn):not(.a11y-panel):not(.a11y-panel *) { text-align: left !important; } html.a11y-hide-images img, html.a11y-hide-images picture, html.a11y-hide-images video { visibility: hidden !important; } html.a11y-page-structure header, html.a11y-page-structure nav, html.a11y-page-structure main, html.a11y-page-structure footer, html.a11y-page-structure section, html.a11y-page-structure article, html.a11y-page-structure aside { outline: 2px dashed #f59e0b !important; outline-offset: 3px !important; } html.a11y-high-contrast.a11y-grayscale { filter: contrast(1.6) brightness(1.05) grayscale(1); }