/* ═══════════════════════════════════════════════════════════════════════ RoomPortal - Accessibility & RTL Stylesheet (css/a11y.css) All classes are applied to element by js/i18n.js ═══════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap'); /* ─── Font Size (controlled via CSS custom property) ────────────────── */ :root { --rp-font-size: 1rem; } html { font-size: var(--rp-font-size); } /* ─── OpenDyslexic Font (self-hosted, free under SIL Open Font License) */ @font-face { font-family: 'OpenDyslexic'; src: url('/static/fonts/OpenDyslexic-Regular.otf'); font-weight: normal; font-style: normal; font-display: swap; } /* ─── High Contrast Mode ─────────────────────────────────────────────── */ /* Force ALL text white — covers every Tailwind color class at once */ html.rp-high-contrast * { color: #ffffff !important; } html.rp-high-contrast body { background-color: #000000 !important; } /* Gradient backgrounds (sky, gray) → solid black */ html.rp-high-contrast main, html.rp-high-contrast .bg-gradient-to-b, html.rp-high-contrast [class*="from-sky"], html.rp-high-contrast [class*="from-slate"], html.rp-high-contrast [class*="from-indigo"] { background: #000000 !important; } /* White / light backgrounds → dark surface */ html.rp-high-contrast .bg-white, html.rp-high-contrast .bg-gray-50, html.rp-high-contrast .bg-gray-100, html.rp-high-contrast .bg-indigo-50, html.rp-high-contrast [style*="background"] { background-color: #1a1a1a !important; } /* Dark sidebar / panel backgrounds → pure black */ html.rp-high-contrast .bg-slate-900, html.rp-high-contrast .bg-slate-800, html.rp-high-contrast .bg-slate-950 { background-color: #000000 !important; } /* Links → bright yellow so they stand out */ html.rp-high-contrast a { color: #ffff00 !important; } html.rp-high-contrast a:hover, html.rp-high-contrast button:hover { background-color: #0000cc !important; color: #ffffff !important; } /* Form fields */ html.rp-high-contrast input, html.rp-high-contrast textarea, html.rp-high-contrast select { background-color: #000000 !important; color: #ffffff !important; border: 2px solid #ffffff !important; } /* Borders */ html.rp-high-contrast .border-gray-200, html.rp-high-contrast .border-gray-300 { border-color: #ffffff !important; } /* Shadows become visible white outlines */ html.rp-high-contrast .shadow, html.rp-high-contrast .shadow-md, html.rp-high-contrast .shadow-xl { box-shadow: 0 0 0 2px #ffffff !important; } /* Keyboard focus ring */ html.rp-high-contrast *:focus { outline: 3px solid #ffff00 !important; outline-offset: 2px !important; } /* ─── Dyslexia-Friendly Font ─────────────────────────────────────────── */ html.rp-dyslexia, html.rp-dyslexia body, html.rp-dyslexia *:not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.fab):not(.fas):not(.far):not(.fa) { font-family: 'OpenDyslexic', 'Comic Sans MS', 'Trebuchet MS', 'Lexend', sans-serif !important; letter-spacing: 0.05em; word-spacing: 0.15em; line-height: 1.75 !important; } /* ─── Reduce Motion ──────────────────────────────────────────────────── */ html.rp-reduce-motion *, html.rp-reduce-motion *::before, html.rp-reduce-motion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* ─── Panel Toggle Button (iOS-style pill switch) ────────────────────── */ .rp-toggle-btn { position: relative; width: 3rem; height: 1.5rem; border-radius: 9999px; background-color: #475569; /* slate-600 */ transition: background-color 0.2s ease; flex-shrink: 0; border: none; cursor: pointer; } .rp-toggle-btn .rp-toggle-knob { position: absolute; top: 0.125rem; left: 0.125rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background-color: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.2s ease; } .rp-toggle-btn.rp-toggle-on { background-color: #4f46e5; /* indigo-600 */ } .rp-toggle-btn.rp-toggle-on .rp-toggle-knob { transform: translateX(1.5rem); } /* ─── Language Button Active State ──────────────────────────────────── */ .rp-lang-btn { transition: all 0.15s ease; border: 1px solid transparent; } .rp-lang-btn.rp-lang-active { background-color: #4f46e5 !important; /* indigo-600 */ color: #ffffff !important; border-color: #6366f1; } #google_translate_element { display: block; width: 100%; box-sizing: border-box; } .goog-te-gadget { width: 100% !important; box-sizing: border-box; /* font-size: 0 !important; */ color: transparent !important; } .goog-te-combo { width: 100% !important; box-sizing: border-box; padding: 6px 4px; margin: 0 !important; border-top: 5px solid #f5f5f5; border-radius: 4px; font-size: 16px; cursor: pointer; outline: none; color: #fff; background-color: #4f46e5; appearance: none; scrollbar-width: thin; } /* width */ ::-webkit-scrollbar { width: 8px; } /* Track */ ::-webkit-scrollbar-track { background: #f1f1f1; } /* Handle */ ::-webkit-scrollbar-thumb { background: #888; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #555; } .goog-te-gadget .goog-logo-link { display: none !important; } a[href="https://translate.google.com"] { display: none; } /* ─── RTL Layout Overrides ───────────────────────────────────────────── */ /* Flip sidebar from left to right */ html[dir="rtl"] #sidebar { left: auto !important; right: 0 !important; transform: translateX(100%); } /* Visible state in RTL (lg breakpoint) */ html[dir="rtl"] #sidebar.lg\:translate-x-0 { transform: translateX(0) !important; } /* Mobile visible state in RTL */ html[dir="rtl"] #sidebar:not(.translate-x-full) { transform: translateX(0) !important; } html[dir="rtl"] #sidebar.translate-x-full { transform: translateX(100%) !important; } /* Main content: right margin instead of left */ html[dir="rtl"] main.lg\:ml-\[20\%\], html[dir="rtl"] main[class*="lg:ml-"] { margin-left: 0 !important; margin-right: 20%; } /* Admin main content */ html[dir="rtl"] .w-17\/20.fixed.left-3\/20 { left: auto !important; right: 15% !important; } /* Admin sidebar (fixed left panel) */ html[dir="rtl"] .w-3\/20.fixed.left-0 { left: auto !important; right: 0 !important; } /* Mobile topbar: reverse flex order */ html[dir="rtl"] .lg\:hidden.flex.justify-between { flex-direction: row-reverse; } /* Nav chevron: flip to the left in RTL */ html[dir="rtl"] .fa-chevron-right::before { content: "\f053"; /* fa-chevron-left */ } html[dir="rtl"] .fa-arrow-right::before { content: "\f060"; /* fa-arrow-left */ } html[dir="rtl"] .fa-arrow-left::before { content: "\f061"; /* fa-arrow-right */ } html[dir="rtl"] .fa-circle-arrow-right::before { content: "\f0a8"; /* fa-circle-arrow-left */ } /* Form inputs in RTL */ html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select { text-align: right; direction: rtl; } html[dir="rtl"] .text-left { text-align: right !important; } /* Panel in RTL: keep it on right side of screen */ html[dir="rtl"] #rp-a11y-panel { left: auto; right: 0; } /* Panel anchor on standalone pages: keep bottom-right in RTL too */ html[dir="rtl"] #rp-a11y-panel.rp-panel-floating { left: auto; right: 1rem; } /* ─── Floating Accessibility Button (circle widget) ─────────────────── */ /* Used on pages without Tailwind (e.g. index.html) */ .rp-a11y-btn { position: fixed; z-index: 50; background: #4f46e5; border: none; width: 3.25rem; height: 3.25rem; border-radius: 9999px; box-shadow: 0 4px 20px rgba(79, 70, 229, 0.45), 0 2px 6px rgba(0, 0, 0, 0.25); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, transform 0.2s; } .rp-a11y-btn:hover { background: #4338ca; transform: scale(1.08); } .rp-a11y-btn i { color: #ffffff; font-size: 1.3rem; }