/* accessibility.css Professional RTL-friendly accessibility styles - Floating button + panel - Modes: high-contrast, darkmode, underline-links, readable-font, reduce-motion - Responsive, focus outlines, accessible sizing */ /* variables */ :root{ --acc-primary: #0b63d6; --acc-bg: #ffffff; --acc-fg: #111111; --acc-panel-width: 320px; --acc-font-step: 8%; /* step for scaling when using percent font-size */ } /* Skip link - visible on keyboard focus */ .skip-to-content { position: absolute; left: -9999px; top: 8px; z-index: 999999; background: var(--acc-primary); color: #fff; padding: 8px 12px; border-radius: 6px; text-decoration: none; direction: rtl; } .skip-to-content:focus { left: 8px; } /* Floating wrapper (LTR-left on RTL page remains left for UI conventions) */ .accessibility-container { position: fixed; bottom: 22px; left: 22px; z-index: 999999; direction: rtl; font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial; } /* Floating round button */ .accessibility-btn { width:56px; height:56px; border-radius:50%; background: var(--acc-primary); color:#fff; border: none; font-size:22px; display:flex; align-items:center; justify-content:center; box-shadow: 0 8px 20px rgba(0,0,0,0.18); cursor:pointer; } .accessibility-btn:focus { outline: 3px solid #fff; box-shadow:0 0 0 4px rgba(11,99,214,0.18); } /* Panel */ .accessibility-panel { display: none; width: var(--acc-panel-width); max-width: calc(100vw - 48px); background: var(--acc-bg); color: var(--acc-fg); border-radius: 12px; padding: 14px; margin-bottom: 12px; box-shadow: 0 12px 36px rgba(0,0,0,0.26); transform-origin: bottom left; direction: rtl; } /* When panel is open we set [data-open="true"] on container (managed by JS) */ .accessibility-container[data-open="true"] .accessibility-panel { display:block; } /* Panel header */ .accessibility-panel h3 { margin: 0 0 8px 0; font-size: 18px; } /* Controls grid */ .acc-controls { display:grid; grid-template-columns: 1fr 1fr; gap: 8px; } .acc-action { display:inline-flex; align-items:center; justify-content:center; padding:10px 8px; border-radius:8px; background:#f4f4f4; border:1px solid #ddd; cursor:pointer; text-align:center; user-select:none; font-size:14px; } .acc-action[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--acc-primary); background: rgba(11,99,214,0.08); } /* Full-width reset button */ .acc-reset { grid-column: 1 / -1; background:#e74c3c; color:#fff; border:none; } /* Footer small */ .acc-foot { margin-top:8px; font-size:12px; color:#666; } /* Visual hidden for screen reader only text */ .vh { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* Focus styles everywhere */ :focus { outline: 3px solid var(--acc-primary); outline-offset: 2px; } /* Accessibility classes applied to or by JS */ /* High contrast (strong) */ .acc-high-contrast { background: #000 !important; color: #fff !important; } .acc-high-contrast img { filter: none !important; } /* Dark mode (mainly backgrounds) */ .acc-darkmode { background: #0b0b0b !important; color: #e6e6e6 !important; } /* Underline links */ .acc-underline-links a, .acc-underline-links button { text-decoration: underline !important; } /* Readable font */ .acc-readable-font, .acc-readable-font * { font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important; } /* Reduce motion */ @media (prefers-reduced-motion: reduce) { .acc-reduce-motion *, .acc-reduce-motion *::before, .acc-reduce-motion *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } .acc-reduce-motion *, .acc-reduce-motion *::before, .acc-reduce-motion *::after { /* JS toggles this class as user asks */ } /* Stop animations (strong override) */ .acc-stop-animations * { animation: none !important; transition: none !important; } /* Accessibility font scaling: font-size is controlled on :root via JS using percent. To ensure consistent scaling, set base sizes in rems in your main stylesheet. */ /* Responsive adjustments */ @media (max-width: 420px) { .accessibility-container { left: 12px; bottom: 12px; } .accessibility-panel { width: calc(100vw - 24px); bottom: 78px; left: 12px; } .acc-controls { grid-template-columns: 1fr; } } /* Ensure visible focus inside modals / iframe triggers */ iframe:focus { outline: 3px solid var(--acc-primary); outline-offset: 2px; } /* Ensure contact float buttons are accessible (if present) */ .contact-float, .contact-main-btn, .contact-option { z-index: 99990; } /* Minor utility */ .acc-row { display:flex; gap:8px; }