/* accessibility.css — Carmel Software Solutions Floating accessibility menu (RTL/LTR friendly) Features implemented via HTML classes toggled on . */ :root{ --a11y-accent: var(--css-violet, #7D84B2); --a11y-accent-2: var(--css-sky, #8FA6CB); --a11y-mint: var(--css-mint, #D5F9DE); --a11y-sage: var(--css-sage, #8AA399); --a11y-bg: rgba(255,255,255,.92); --a11y-border: rgba(15,23,42,.12); --a11y-shadow: 0 18px 55px rgba(15,23,42,.18); --a11y-radius: 18px; } /* Dark mode styling (uses html.theme-dark from main theme toggle) */ html.theme-dark{ --a11y-bg: rgba(2,6,23,.88); --a11y-border: rgba(148,163,184,.18); --a11y-shadow: 0 18px 55px rgba(0,0,0,.45); } html.theme-dark .fab-a11y{ background: rgba(2,6,23,.80); color: rgba(226,232,240,.92); border-color: var(--a11y-border); } html.theme-dark .a11y-menu__header{ background: linear-gradient(90deg, rgba(15,23,42,.75), rgba(2,6,23,.65)); } html.theme-dark .a11y-font-btn, html.theme-dark .a11y-toggle{ background: rgba(15,23,42,.60); border-color: rgba(148,163,184,.14); color: rgba(226,232,240,.92); } html.theme-dark .a11y-toggle::after{ color: rgba(226,232,240,.65); border-color: rgba(148,163,184,.18); background: rgba(148,163,184,.08); } /* Floating button */ .fab-a11y{ position: fixed; inset-block-end: 18px; inset-inline-end: 18px; /* end => right in LTR, left in RTL */ z-index: 2147483000; border: 1px solid var(--a11y-border); border-radius: 999px; padding: 10px 14px; background: var(--a11y-bg); color: #0f172a; font-weight: 800; letter-spacing: .2px; box-shadow: 0 10px 28px rgba(15,23,42,.14); backdrop-filter: blur(10px); display: inline-flex; align-items: center; gap: 8px; } .fab-a11y:hover{ transform: translateY(-1px); transition: transform .18s ease, box-shadow .18s ease; box-shadow: 0 14px 34px rgba(15,23,42,.18); } .fab-a11y:focus-visible{ outline: none; box-shadow: 0 0 0 .25rem rgba(125,132,178,.22), 0 14px 34px rgba(15,23,42,.18); } /* Menu panel */ .a11y-menu{ position: fixed; inset-block-end: 70px; inset-inline-end: 18px; z-index: 2147483001; width: 360px; max-width: calc(100vw - 36px); max-height: min(70vh, 580px); background: var(--a11y-bg); border: 1px solid var(--a11y-border); border-radius: var(--a11y-radius); box-shadow: var(--a11y-shadow); backdrop-filter: blur(12px); display: flex; flex-direction: column; overflow: hidden; transform-origin: bottom right; animation: a11yPop .16s ease-out; } html[dir="rtl"] .a11y-menu{ transform-origin: bottom left; } @keyframes a11yPop{ from{ transform: translateY(6px) scale(.985); opacity: 0; } to{ transform: translateY(0) scale(1); opacity: 1; } } .a11y-menu__header{ padding: 12px 14px; background: linear-gradient(90deg, rgba(213,249,222,.55), rgba(143,166,203,.20)); border-bottom: 1px solid var(--a11y-border); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .a11y-menu__body{ padding: 12px 14px; overflow: auto; } .a11y-menu__body hr{ border-color: rgba(15,23,42,.10); } /* Ensure visible focus inside the dialog */ .a11y-menu :focus-visible{ outline: none; box-shadow: 0 0 0 .25rem rgba(125,132,178,.20); border-radius: 12px; } /* Font controls grid */ .a11y-font-controls{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } .a11y-font-btn{ border: 1px solid rgba(125,132,178,.28); background: rgba(255,255,255,.75); border-radius: 12px; padding: 8px 6px; font-weight: 800; color: #0f172a; cursor: pointer; user-select: none; transition: transform .12s ease, background .12s ease, border-color .12s ease; } .a11y-font-btn:hover{ transform: translateY(-1px); } .a11y-font-btn.is-active, .a11y-font-btn[aria-pressed="true"]{ background: rgba(125,132,178,.14); border-color: rgba(125,132,178,.55); box-shadow: 0 0 0 .2rem rgba(125,132,178,.16); } /* Toggle buttons */ .a11y-toggle{ width: 100%; text-align: start; margin: 6px 0; border: 1px solid rgba(15,23,42,.10); background: rgba(255,255,255,.70); border-radius: 14px; padding: 10px 12px; display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 800; color: #0f172a; cursor: pointer; } /* ON/OFF pill label - localized via html[lang] */ .a11y-toggle::after{ content: "OFF"; font-weight: 900; font-size: .78rem; color: rgba(15,23,42,.55); padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(15,23,42,.12); background: rgba(15,23,42,.03); } html[lang="he"] .a11y-toggle::after{ content: "כבוי"; } .a11y-toggle.is-active, .a11y-toggle[aria-pressed="true"]{ border-color: rgba(138,163,153,.35); background: rgba(213,249,222,.35); } .a11y-toggle.is-active::after, .a11y-toggle[aria-pressed="true"]::after{ content: "ON"; color: #0f172a; border-color: rgba(138,163,153,.40); background: rgba(138,163,153,.16); } html[lang="he"] .a11y-toggle.is-active::after, html[lang="he"] .a11y-toggle[aria-pressed="true"]::after{ content: "פעיל"; } /* Reset button aligns with Bootstrap look */ #a11yReset{ border-radius: 14px; } /* A11y effect classes */ html.a11y-underline a{ text-decoration: underline !important; text-decoration-thickness: 2px; text-underline-offset: 3px; } html.a11y-spacing body{ line-height: 1.85; letter-spacing: .02em; word-spacing: .08em; } html.a11y-grayscale{ filter: grayscale(100%); } html.a11y-reduce-motion *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* Readable font: improves legibility (especially for Hebrew/Latin mixed UI) */ html.a11y-readable-font body{ font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Heebo", "Assistant", Arial, sans-serif !important; } /* Focus highlight: amplify :focus-visible for keyboard users */ html.a11y-focus :where(a, button, input, select, textarea, [tabindex]):focus-visible{ outline: none !important; box-shadow: 0 0 0 .28rem rgba(125,132,178,.32) !important; border-radius: 12px; } /* High contrast mode (keeps layout; increases contrast globally) */ html.a11y-contrast{ --bs-body-bg: #0b1020; --bs-body-color: #ffffff; --bs-border-color: rgba(255,255,255,.22); --bs-link-color: var(--a11y-mint); --bs-link-hover-color: #ffffff; } html.a11y-contrast body{ background: #0b1020 !important; color: #ffffff !important; } html.a11y-contrast .card, html.a11y-contrast .accordion-item, html.a11y-contrast .navbar, html.a11y-contrast .topbar, html.a11y-contrast .modal-content{ background: rgba(15,23,42,.92) !important; color: #fff !important; border-color: rgba(255,255,255,.18) !important; } html.a11y-contrast .text-muted{ color: rgba(255,255,255,.78) !important; } html.a11y-contrast .btn-outline-primary{ border-color: rgba(213,249,222,.65) !important; color: rgba(213,249,222,.95) !important; } html.a11y-contrast .btn-primary{ background: rgba(213,249,222,.92) !important; color: #0b1020 !important; border-color: transparent !important; } /* Mobile */ @media (max-width: 420px){ .a11y-menu{ width: calc(100vw - 36px); } .a11y-font-controls{ grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* --- Dark mode styling for the a11y UI --- */ html.theme-dark{ --a11y-bg: rgba(15,23,42,.92); --a11y-border: rgba(255,255,255,.14); --a11y-shadow: 0 18px 55px rgba(0,0,0,.55); } html.theme-dark .fab-a11y{ background: rgba(15,23,42,.78); color: rgba(229,231,235,.96); border-color: var(--a11y-border); } html.theme-dark .a11y-menu__header{ background: linear-gradient(90deg, rgba(125,132,178,.18), rgba(11,18,32,.00)); border-bottom-color: var(--a11y-border); } html.theme-dark .a11y-font-btn{ background: rgba(255,255,255,.06); color: rgba(229,231,235,.96); border-color: rgba(255,255,255,.14); } html.theme-dark .a11y-toggle{ background: rgba(255,255,255,.06); color: rgba(229,231,235,.96); border-color: rgba(255,255,255,.12); } html.theme-dark .a11y-toggle::after{ color: rgba(229,231,235,.65); border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.04); } html.theme-dark .a11y-menu__body hr{ border-color: rgba(255,255,255,.10); }