/* * AlphesHost — WCAG 2.1 AA Compliance * in */ /* ── 1. CONTRAST FIX ─────────────────────────────────────── */ :root { --text-dim: rgba(255,255,255,0.50) !important; } .stat-unit,.footer-copy,.chart-label,.order-price-label, .wallet-label,.dd-wlabel,.dd-email,.review-text, .history-sub,.empty-state,.td-id { color: rgba(255,255,255,0.50) !important; } /* Theme Scrollbars */ html { scrollbar-color: rgba(45,127,255,0.78) rgba(255,255,255,0.04); scrollbar-width: thin; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); border-radius: 999px; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(45,127,255,0.78), rgba(11,35,78,0.96)); border: 2px solid rgba(5,15,38,0.95); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(78,151,255,0.92), rgba(19,58,127,0.98)); } /* ── 2. TOUCH TARGETS — only non-nav elements ────────────── */ button[type="submit"], .btn-primary { min-height: 44px !important; } .hamburger { min-height: 44px !important; min-width: 44px !important; padding: 10px !important; display: flex; align-items: center; justify-content: center; } .dd-item, .dd-out, .back-btn { min-height: 44px !important; display: flex !important; align-items: center !important; } .form-input, input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea { min-height: 44px !important; } .btn-sm { min-height: 44px !important; min-width: 44px !important; padding: 10px 14px !important; } .toggle-pw { min-height: 44px !important; min-width: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; } .c-prev,.c-next,.lb-prev,.lb-next,.lb-close { min-height: 44px !important; min-width: 44px !important; } .nav-item { min-height: 44px !important; display: flex !important; align-items: center !important; } /* ── 3. FOCUS VISIBLE ────────────────────────────────────── */ *:focus-visible { outline: 2px solid #2d7fff !important; outline-offset: 3px !important; border-radius: 4px; } *:focus:not(:focus-visible) { outline: none; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #2d7fff !important; outline-offset: 3px !important; box-shadow: 0 0 0 4px rgba(45,127,255,0.25) !important; } /* ── 4. SKIP NAVIGATION ─────────────────────────────────── */ .skip-nav { position: absolute; top: -100%; left: 16px; background: #2d7fff; color: #fff; padding: 12px 20px; border-radius: 0 0 8px 8px; font-size: 0.85rem; font-weight: 600; text-decoration: none; z-index: 9999; transition: top 0.2s; } .skip-nav:focus { top: 0 !important; outline: 2px solid #fff !important; } /* ── 5. REDUCED MOTION ───────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }