/* ========================================================= TechForge Command — Accessibility Widget v3.1.0 ========================================================= */ /* ── Launcher button ─────────────────────────────────────── */ #tfc-a11y-wrap { position: fixed; bottom: 24px; left: 24px; z-index: 99999; font-family: 'Segoe UI', Arial, sans-serif; } #tfc-a11y-launcher { display: flex; align-items: center; gap: 8px; background: #1e293b; color: #f1f5f9; border: 2px solid #f97316; border-radius: 50px; padding: 10px 18px 10px 14px; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 20px rgba(0,0,0,0.4); transition: background 0.2s, transform 0.2s; line-height: 1; } #tfc-a11y-launcher:hover { background: #334155; transform: translateY(-2px); } #tfc-a11y-launcher:focus-visible { outline: 3px solid #f97316; outline-offset: 3px; } /* ── Panel ───────────────────────────────────────────────── */ #tfc-a11y-panel { position: absolute; bottom: calc(100% + 12px); left: 0; width: 300px; background: #1e293b; border: 1px solid #334155; border-radius: 14px; box-shadow: 0 16px 48px rgba(0,0,0,0.5); overflow: hidden; } #tfc-a11y-panel[hidden] { display: none; } .a11y-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: #0f172a; border-bottom: 1px solid #334155; } .a11y-panel-title { margin: 0; font-size: 15px; font-weight: 700; color: #f1f5f9; } .a11y-close { background: none; border: none; color: #94a3b8; font-size: 22px; cursor: pointer; padding: 0 4px; line-height: 1; border-radius: 4px; } .a11y-close:hover { color: #f1f5f9; } .a11y-close:focus-visible { outline: 2px solid #f97316; outline-offset: 2px; } .a11y-panel-body { padding: 16px 20px; } /* ── Groups ──────────────────────────────────────────────── */ .a11y-group { margin-bottom: 20px; } .a11y-group-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #64748b; margin-bottom: 10px; } /* ── Font size row ───────────────────────────────────────── */ .a11y-font-row { display: flex; align-items: center; gap: 12px; } .a11y-font-btn { background: #0f172a; border: 1px solid #334155; color: #f1f5f9; border-radius: 8px; padding: 8px 16px; font-size: 14px; font-weight: 700; cursor: pointer; transition: border-color 0.2s; } .a11y-font-btn:hover { border-color: #f97316; color: #f97316; } .a11y-font-btn:focus-visible { outline: 2px solid #f97316; outline-offset: 2px; } .a11y-font-size-val { flex: 1; text-align: center; font-size: 14px; font-weight: 600; color: #f97316; } /* ── Toggle buttons ──────────────────────────────────────── */ .a11y-btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .a11y-toggle-btn { background: #0f172a; border: 1px solid #334155; color: #94a3b8; border-radius: 8px; padding: 9px 10px; font-size: 12px; font-weight: 600; cursor: pointer; text-align: center; transition: border-color 0.2s, color 0.2s, background 0.2s; } .a11y-toggle-btn:hover { border-color: #f97316; color: #f1f5f9; } .a11y-toggle-btn:focus-visible { outline: 2px solid #f97316; outline-offset: 2px; } .a11y-toggle-btn.a11y-btn-on { background: rgba(249,115,22,0.15); border-color: #f97316; color: #f97316; } /* ── Reset ───────────────────────────────────────────────── */ .a11y-reset-btn { width: 100%; background: none; border: 1px solid #334155; color: #64748b; border-radius: 8px; padding: 9px; font-size: 12px; cursor: pointer; transition: border-color 0.2s, color 0.2s; } .a11y-reset-btn:hover { border-color: #ef4444; color: #ef4444; } .a11y-reset-btn:focus-visible { outline: 2px solid #f97316; outline-offset: 2px; } /* ========================================================= ACCESSIBILITY STATE CLASSES — applied to ========================================================= */ /* Font size scaling via CSS custom property */ html[data-a11y-font="1"] { font-size: 110%; } html[data-a11y-font="2"] { font-size: 120%; } html[data-a11y-font="3"] { font-size: 130%; } html[data-a11y-font="4"] { font-size: 140%; } html[data-a11y-font="-1"] { font-size: 90%; } html[data-a11y-font="-2"] { font-size: 80%; } /* High contrast */ html.a11y-contrast { filter: contrast(1.5) brightness(1.1); } /* Grayscale */ html.a11y-grayscale { filter: grayscale(1); } /* Highlight links */ html.a11y-highlight a { background: #fbbf24 !important; color: #000 !important; padding: 0 2px; border-radius: 2px; text-decoration: underline !important; } /* Dyslexia-friendly font — Google Fonts loaded on demand */ html.a11y-dyslexia, html.a11y-dyslexia * { font-family: 'Lexend', 'Comic Sans MS', Arial, sans-serif !important; letter-spacing: 0.05em !important; word-spacing: 0.1em !important; line-height: 1.8 !important; } /* Large cursor */ html.a11y-bigcursor, html.a11y-bigcursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath fill='%23f97316' stroke='white' stroke-width='1' d='M5 3l14 9-7 1-4 7z'/%3E%3C/svg%3E") 0 0, auto !important; } /* Pause animations */ html.a11y-pauseanim *, html.a11y-pauseanim *::before, html.a11y-pauseanim *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Enhanced focus ring */ html.a11y-focusring *:focus { outline: 3px solid #f97316 !important; outline-offset: 4px !important; box-shadow: 0 0 0 6px rgba(249,115,22,0.25) !important; } /* ========================================================= GLOBAL A11Y FIXES — always active regardless of widget ========================================================= */ /* Ensure all interactive elements have a visible focus style */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid #f97316 !important; outline-offset: 3px !important; } /* Skip link — always visible when focused */ .skip-link:focus { position: fixed !important; top: 16px !important; left: 16px !important; z-index: 999999 !important; background: #f97316 !important; color: #fff !important; padding: 12px 20px !important; border-radius: 6px !important; font-weight: 700 !important; outline: none !important; } /* Remove outline:none overrides — replace with subtle ring */ input:focus, textarea:focus, select:focus { outline: 2px solid rgba(249,115,22,0.6) !important; outline-offset: 1px !important; } /* Urgency pills — show selected state beyond colour alone */ .urgency-pill.selected::after { content: ' ✓'; } .urgency-pill:focus-visible { outline: 2px solid #f97316 !important; outline-offset: 3px !important; } /* Service picker buttons */ .service-pick-btn:focus-visible { outline: 2px solid #f97316 !important; outline-offset: 3px !important; } /* Wizard nav buttons */ .btn-back:focus-visible, .btn-next:focus-visible, .btn-submit:focus-visible { outline: 2px solid #f97316 !important; outline-offset: 3px !important; }