/* ============================================ ACCESSIBILITY WIDGET ============================================ */ /* Skip Link */ .skip-link { position: fixed; top: -100%; left: var(--space-4); z-index: 100000; background: var(--color-navy); color: #fff; padding: var(--space-3) var(--space-6); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600; text-decoration: none; transition: top 0.2s; } .skip-link:focus { top: var(--space-4); } /* Widget Toggle Button */ .a11y-btn { position: fixed; bottom: var(--space-6); left: var(--space-6); z-index: 9998; width: 48px; height: 48px; border-radius: 50%; background: var(--color-navy); color: #fff; border: 2px solid rgba(255,255,255,0.2); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,0.25); transition: transform 0.2s, background 0.2s; } .a11y-btn:hover { transform: scale(1.1); background: var(--color-red); } .a11y-btn svg { width: 26px; height: 26px; fill: currentColor; } /* Widget Panel */ .a11y-panel { position: fixed; bottom: calc(var(--space-6) + 60px); left: var(--space-6); z-index: 9999; width: 320px; max-height: 80vh; background: #fff; border-radius: var(--radius-lg); box-shadow: 0 8px 40px rgba(0,0,0,0.2); opacity: 0; pointer-events: none; transform: translateY(10px) scale(0.95); transition: opacity 0.25s, transform 0.25s; overflow: hidden; display: flex; flex-direction: column; } .a11y-panel--open { opacity: 1; pointer-events: all; transform: translateY(0) scale(1); } .a11y-panel__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); background: var(--color-navy); color: #fff; } .a11y-panel__title { font-family: var(--font-display); font-size: var(--text-base); font-weight: 700; } .a11y-panel__close { background: none; border: none; color: #fff; cursor: pointer; padding: 4px; display: flex; } .a11y-panel__close:hover { opacity: 0.7; } .a11y-panel__body { padding: var(--space-4); overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); } .a11y-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: var(--space-4) var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; cursor: pointer; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; text-align: center; } .a11y-toggle:hover { border-color: var(--color-navy); box-shadow: 0 2px 8px rgba(0,0,0,0.08); } .a11y-toggle--active { background: var(--color-navy); color: #fff; border-color: var(--color-navy); } .a11y-toggle--active svg { stroke: #fff; fill: none; } .a11y-toggle svg { width: 28px; height: 28px; stroke: var(--color-navy); fill: none; stroke-width: 1.5; } .a11y-toggle__label { font-size: 11px; font-weight: 600; letter-spacing: 0.3px; } .a11y-panel__footer { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); } .a11y-reset { width: 100%; padding: var(--space-2) var(--space-4); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; font-size: var(--text-xs); font-weight: 600; color: var(--color-text); transition: background 0.2s; } .a11y-reset:hover { background: var(--color-border); } @media (max-width: 480px) { .a11y-panel { left: var(--space-3); right: var(--space-3); width: auto; bottom: calc(var(--space-6) + 56px); } } /* ============================================ TOGGLE EFFECT CLASSES (applied to ) ============================================ */ /* High Contrast */ html.a11y-contrast { filter: contrast(1.4); } /* Highlight Links */ html.a11y-links a { outline: 2px solid var(--color-red) !important; outline-offset: 2px !important; text-decoration: underline !important; } /* Bigger Text */ html.a11y-big-text { font-size: 125% !important; } /* Text Spacing */ html.a11y-text-spacing { letter-spacing: 0.12em !important; word-spacing: 0.16em !important; } html.a11y-text-spacing * { letter-spacing: inherit !important; word-spacing: inherit !important; } /* Pause Animations */ html.a11y-pause-anim *, html.a11y-pause-anim *::before, html.a11y-pause-anim *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; transition-delay: 0s !important; } /* Hide Images */ html.a11y-hide-images img, html.a11y-hide-images svg:not(.a11y-btn svg):not(.a11y-panel svg):not(.a11y-toggle svg), html.a11y-hide-images [style*="background-image"] { visibility: hidden !important; } /* Dyslexia Friendly */ html.a11y-dyslexia, html.a11y-dyslexia * { font-family: 'OpenDyslexic', 'Comic Sans MS', sans-serif !important; } /* Big Cursor */ html.a11y-cursor, html.a11y-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M4 4l20 8-8 4-4 8z' fill='%231a2e4a' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") 4 4, auto !important; } /* Tooltips */ html.a11y-tooltips [title]::after { content: attr(title); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--color-navy); color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 12px; white-space: nowrap; pointer-events: none; z-index: 10000; } html.a11y-tooltips [title] { position: relative; } /* Line Height */ html.a11y-line-height, html.a11y-line-height * { line-height: 2 !important; } /* Text Align (Left) */ html.a11y-text-align, html.a11y-text-align * { text-align: left !important; } /* Saturation (Desaturate) */ html.a11y-saturation { filter: saturate(0); } html.a11y-contrast.a11y-saturation { filter: contrast(1.4) saturate(0); }