/* Solo2 - Accessibility: High Contrast + Large Text Mode * ======================================================================== * Activated by class "high-contrast" on element. * WCAG AAA compliance: contrast ratio ≥7:1 for normal text, ≥4.5:1 for large. * Touch targets ≥44px (WCAG 2.5.5). * ======================================================================== */ /* ── Base: larger font sizes ── */ .high-contrast { font-size: 18px !important; --font-size-base: 18px; --font-size-sm: 16px; --font-size-xs: 14px; --font-size-xxs: 13px; } .high-contrast body { font-size: 18px; line-height: 1.6; letter-spacing: 0.02em; } /* ── Text sizes: override Tailwind's tiny text ── */ .high-contrast .text-\[10px\], .high-contrast .text-\[11px\] { font-size: 13px !important; } .high-contrast .text-xs { font-size: 14px !important; } .high-contrast .text-sm { font-size: 16px !important; } .high-contrast .text-base { font-size: 18px !important; } .high-contrast .text-lg { font-size: 20px !important; } /* ── Buttons: larger touch targets ── */ .high-contrast button, .high-contrast .btn-primary, .high-contrast .btn-secondary, .high-contrast [role="button"] { min-height: 44px; min-width: 44px; font-size: 16px; padding: 10px 16px; border: 2px solid rgba(255, 255, 255, 0.3) !important; } .high-contrast button:focus, .high-contrast input:focus, .high-contrast textarea:focus, .high-contrast select:focus { outline: 3px solid #ffdd00 !important; outline-offset: 2px !important; } /* ── Inputs: larger, high contrast borders ── */ .high-contrast .input-field, .high-contrast input[type="text"], .high-contrast input[type="password"], .high-contrast input[type="email"], .high-contrast textarea { font-size: 18px !important; padding: 12px 14px !important; border: 2px solid rgba(255, 255, 255, 0.4) !important; min-height: 48px; } /* ── Chat messages: larger bubbles ── */ .high-contrast .msg-bubble { font-size: 18px !important; padding: 12px 16px !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; } .high-contrast .msg-meta { font-size: 13px !important; } /* ── Sidebar: larger tunnel rows ── */ .high-contrast .tunnel-item { padding: 12px 16px !important; min-height: 56px; } .high-contrast .tunnel-name { font-size: 17px !important; font-weight: 600; } .high-contrast .tunnel-status-text { font-size: 14px !important; } /* ── Status indicators: larger, more visible ── */ .high-contrast #server-status-indicator { width: 14px !important; height: 14px !important; } .high-contrast .connection-type-indicator { font-size: 14px !important; font-weight: bold; } /* ── Modals: higher contrast borders ── */ .high-contrast .card, .high-contrast [class*="rounded-xl"], .high-contrast [class*="rounded-2xl"] { border: 2px solid rgba(255, 255, 255, 0.25) !important; } /* ── Links and interactive elements ── */ .high-contrast a, .high-contrast [role="link"] { text-decoration: underline !important; color: #ffdd00 !important; } /* ── Scrollbars: more visible ── */ .high-contrast ::-webkit-scrollbar { width: 12px; } .high-contrast ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.4); border-radius: 6px; } .high-contrast ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); } /* ── Icons: ensure minimum size ── */ .high-contrast svg { min-width: 20px; min-height: 20px; } /* ── Skip to content link (screen reader support) ── */ .skip-to-content { position: absolute; top: -100px; left: 0; z-index: 10000; background: #ffdd00; color: #000; padding: 12px 24px; font-size: 18px; font-weight: bold; text-decoration: none; } .skip-to-content:focus { top: 0; }