/* ===== תוסף נגישות קא-צ'ינג — עצמאי, ללא תלות חיצונית ===== נטען בכל עמוד. בונה כפתור צף + פאנל, ומיישם העדפות שנשמרות ב-localStorage. הערות בטיחות: - אפור/ניגודיות מיושמים דרך שכבת-על fixed עם backdrop-filter (לא filter על html/body, שהיה שובר position:fixed/sticky — כולל מנוע הגלילה התלת-ממדי של עמוד הבית). - הגדלת גופן דרך zoom על (כמו זום-דפדפן), נבדק שאינו שובר את הסצנה. */ :root { --a11y-zoom: 1; } html.a11y-zoomed { zoom: var(--a11y-zoom); } /* הדגשת קישורים */ html.a11y-links a { text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 2px; } /* שכבת-על לאפור/ניגודיות — מסננת את מה שמתחתיה בלי לגעת במיקום האלמנטים */ .a11y-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 2147483000; /* מתחת לווידג'ט, מעל התוכן */ display: none; } html.a11y-grayscale .a11y-overlay, html.a11y-contrast .a11y-overlay { display: block; } html.a11y-grayscale .a11y-overlay { backdrop-filter: grayscale(1); -webkit-backdrop-filter: grayscale(1); } html.a11y-contrast .a11y-overlay { backdrop-filter: contrast(1.35) saturate(1.4); -webkit-backdrop-filter: contrast(1.35) saturate(1.4); } html.a11y-grayscale.a11y-contrast .a11y-overlay { backdrop-filter: grayscale(1) contrast(1.35); -webkit-backdrop-filter: grayscale(1) contrast(1.35); } /* פס עזר לקריאה */ .a11y-reading-guide { position: fixed; inset-inline: 0; height: 2.4em; pointer-events: none; z-index: 2147483001; display: none; background: rgba(91, 46, 255, .10); border-top: 2px solid rgba(91, 46, 255, .55); border-bottom: 2px solid rgba(91, 46, 255, .55); transform: translateY(-50%); } html.a11y-guide .a11y-reading-guide { display: block; } /* ===== כפתור צף ===== */ .a11y-fab { position: fixed; left: 16px; bottom: 16px; /* פינה שמאלית-תחתונה (פיזי) — לא על מסקוט הבית שיושב ימין-תחתון */ z-index: 2147483003; width: 54px; height: 54px; border-radius: 50%; background: #5B2EFF; color: #fff; border: 3px solid #fff; box-shadow: 0 6px 20px rgba(26,16,64,.35); font-size: 27px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .18s ease, background .18s ease; } .a11y-fab:hover { transform: scale(1.08); background: #4a1fe0; } .a11y-fab:focus-visible { outline: 3px solid #C9F31D; outline-offset: 3px; } .a11y-fab .a11y-dot { position: absolute; top: 2px; inset-inline-end: 2px; width: 13px; height: 13px; border-radius: 50%; background: #C9F31D; border: 2px solid #fff; display: none; } .a11y-fab.is-active .a11y-dot { display: block; } /* ===== פאנל ===== */ .a11y-panel { position: fixed; left: 16px; bottom: 82px; z-index: 2147483004; width: min(320px, calc(100vw - 32px)); max-height: min(78vh, 640px); overflow-y: auto; background: #fff; color: #1A1040; border-radius: 20px; box-shadow: 0 18px 50px rgba(26,16,64,.32); border: 2px solid #ece8ff; padding: 18px; direction: rtl; text-align: right; display: none; font-family: inherit; } .a11y-panel.is-open { display: block; } .a11y-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 8px; } .a11y-panel__head h2 { font-size: 19px; font-weight: 900; margin: 0; } .a11y-close { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #ece8ff; background: #F4F1FF; color: #1A1040; font-size: 18px; cursor: pointer; line-height: 1; display: flex; align-items: center; justify-content: center; flex: none; } .a11y-close:hover { background: #e7e1ff; } .a11y-close:focus-visible { outline: 3px solid #5B2EFF; outline-offset: 2px; } .a11y-font { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .a11y-font button { width: 40px; height: 40px; border-radius: 12px; border: 2px solid #d9d2ff; background: #F4F1FF; color: #5B2EFF; font-size: 20px; font-weight: 900; cursor: pointer; line-height: 1; } .a11y-font button:hover { background: #e7e1ff; } .a11y-font button:focus-visible { outline: 3px solid #5B2EFF; outline-offset: 2px; } .a11y-font__val { flex: 1; text-align: center; font-weight: 800; font-size: 15px; } .a11y-toggles { display: grid; gap: 8px; } .a11y-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 11px 14px; border-radius: 13px; border: 2px solid #ece8ff; background: #faf9ff; color: #1A1040; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; text-align: right; } .a11y-toggle:hover { background: #f2efff; } .a11y-toggle:focus-visible { outline: 3px solid #5B2EFF; outline-offset: 2px; } .a11y-toggle[aria-pressed="true"] { background: #5B2EFF; color: #fff; border-color: #5B2EFF; } .a11y-toggle__state { font-size: 13px; font-weight: 800; opacity: .85; } .a11y-toggle .a11y-ic { font-size: 18px; } .a11y-reset { width: 100%; margin-top: 12px; padding: 11px; border-radius: 13px; border: 2px solid #FF2E88; background: #fff; color: #FF2E88; font-family: inherit; font-weight: 800; font-size: 15px; cursor: pointer; } .a11y-reset:hover { background: #FF2E88; color: #fff; } .a11y-reset:focus-visible { outline: 3px solid #FF2E88; outline-offset: 2px; } .a11y-panel__foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid #ece8ff; font-size: 13px; line-height: 1.6; color: #4a4370; } .a11y-panel__foot a { color: #5B2EFF; font-weight: 800; } .a11y-panel__foot a:hover { text-decoration: underline; } @media (prefers-reduced-motion: reduce) { .a11y-fab { transition: none; } }