/* ============================================================ סרגל נגישות - עיצוב ============================================================ */ :root { --a11y-primary: #1a5fb4; --a11y-primary-dark: #0d3b73; --a11y-bg: #ffffff; --a11y-text: #1a1a1a; --a11y-border: #d7dade; --a11y-radius: 10px; } /* -------- כפתור מפעיל -------- */ #a11y-toggle-btn { position: fixed; bottom: 20px; left: 20px; z-index: 999999; width: 56px; height: 56px; border-radius: 50%; background: var(--a11y-primary); color: #fff; border: 2px solid #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: Arial, Helvetica, sans-serif; transition: transform 0.15s ease, background 0.15s ease; } #a11y-toggle-btn:hover, #a11y-toggle-btn:focus-visible { background: var(--a11y-primary-dark); transform: scale(1.06); } #a11y-toggle-btn svg { width: 30px; height: 30px; fill: #fff; } /* -------- פאנל -------- */ #a11y-panel { position: fixed; bottom: 86px; left: 20px; z-index: 999999; width: 320px; max-width: calc(100vw - 40px); max-height: 80vh; overflow-y: auto; background: var(--a11y-bg); color: var(--a11y-text); border-radius: var(--a11y-radius); box-shadow: 0 6px 30px rgba(0, 0, 0, 0.3); border: 1px solid var(--a11y-border); direction: rtl; font-family: Arial, Helvetica, sans-serif; animation: a11y-fade-in 0.15s ease; } @keyframes a11y-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } #a11y-panel[hidden] { display: none; } .a11y-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: var(--a11y-primary); color: #fff; border-radius: var(--a11y-radius) var(--a11y-radius) 0 0; } .a11y-panel-header h2 { margin: 0; font-size: 16px; } #a11y-close-btn { background: transparent; border: none; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 4px; } #a11y-close-btn:hover, #a11y-close-btn:focus-visible { background: rgba(255, 255, 255, 0.2); } .a11y-panel-body { padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .a11y-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 6px; background: #f3f5f7; border: 1px solid var(--a11y-border); border-radius: 8px; cursor: pointer; font-size: 12.5px; color: var(--a11y-text); text-align: center; min-height: 64px; transition: background 0.15s ease, border-color 0.15s ease; } .a11y-btn svg { width: 22px; height: 22px; fill: var(--a11y-primary); } .a11y-btn:hover, .a11y-btn:focus-visible { background: #e7edf5; border-color: var(--a11y-primary); outline: none; } .a11y-btn[aria-pressed="true"] { background: var(--a11y-primary); color: #fff; border-color: var(--a11y-primary); } .a11y-btn[aria-pressed="true"] svg { fill: #fff; } .a11y-btn-full { grid-column: 1 / -1; } .a11y-panel-footer { padding: 10px 14px 14px; border-top: 1px solid var(--a11y-border); font-size: 12px; text-align: center; } .a11y-panel-footer a { color: var(--a11y-primary); } #a11y-reset-btn { width: 100%; padding: 10px; margin: 0 12px 4px; width: calc(100% - 24px); background: #fdecea; color: #a12a2a; border: 1px solid #f3c1bb; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: bold; } #a11y-reset-btn:hover, #a11y-reset-btn:focus-visible { background: #f9d3cf; } /* ============================================================ מצבי נגישות המוחלים על ============================================================ */ /* הגדלת טקסט */ /* zoom (ולא font-size) כדי שההגדלה תשפיע גם על אתרים שמגדירים גדלי טקסט קבועים ב-px ולא ביחידות יחסיות (em/rem/%) */ html.a11y-fs-1 { zoom: 1.125 !important; } html.a11y-fs-2 { zoom: 1.25 !important; } html.a11y-fs-3 { zoom: 1.375 !important; } html.a11y-fs-4 { zoom: 1.5 !important; } /* ניגודיות גבוהה */ html.a11y-high-contrast body, html.a11y-high-contrast body * { background-color: #000 !important; color: #fff !important; border-color: #fff !important; } html.a11y-high-contrast a, html.a11y-high-contrast a * { color: #ffe500 !important; } /* ניגודיות הפוכה */ html.a11y-invert body { filter: invert(100%) hue-rotate(180deg); } html.a11y-invert img, html.a11y-invert video, html.a11y-invert picture, html.a11y-invert canvas, html.a11y-invert svg { filter: invert(100%) hue-rotate(180deg); } /* גווני אפור */ html.a11y-grayscale body { filter: grayscale(100%); } /* הדגשת קישורים */ html.a11y-highlight-links a { outline: 2px solid #ff5900 !important; background-color: #fff3cd !important; color: #000 !important; text-decoration: underline !important; font-weight: bold !important; } /* פונט קריא (ידידותי לדיסלקציה) */ html.a11y-readable-font body, html.a11y-readable-font body * { font-family: Arial, Helvetica, sans-serif !important; letter-spacing: 0.02em !important; } /* ריווח שורות מוגדל */ html.a11y-line-height body, html.a11y-line-height body * { line-height: 2 !important; } /* ריווח אותיות/מילים מוגדל */ html.a11y-letter-spacing body, html.a11y-letter-spacing body * { letter-spacing: 0.12em !important; word-spacing: 0.16em !important; } /* יישור טקסט לשמאל/ימין בלבד (ללא מיושר לשני הצדדים) */ html.a11y-text-align body, html.a11y-text-align body * { text-align: start !important; } /* סמן עכבר מוגדל */ html.a11y-big-cursor, html.a11y-big-cursor * { cursor: url('data:image/svg+xml;utf8,') 4 4, auto !important; } /* עצירת אנימציות */ html.a11y-stop-animations *, html.a11y-stop-animations *::before, html.a11y-stop-animations *::after { animation-play-state: paused !important; transition: none !important; scroll-behavior: auto !important; } /* הדגשת כותרות */ html.a11y-highlight-headings h1, html.a11y-highlight-headings h2, html.a11y-highlight-headings h3, html.a11y-highlight-headings h4, html.a11y-highlight-headings h5, html.a11y-highlight-headings h6 { outline: 2px dashed var(--a11y-primary) !important; background-color: #eef4fc !important; color: #000 !important; } /* קו קריאה (Reading Guide) שעוקב אחרי העכבר */ #a11y-reading-guide { position: fixed; inset-inline-start: 0; width: 100%; height: 40px; background: rgba(255, 235, 59, 0.35); border-top: 2px solid #f9a825; border-bottom: 2px solid #f9a825; pointer-events: none; z-index: 999998; display: none; } html.a11y-reading-guide-on #a11y-reading-guide { display: block; } /* מסך מיקוד - מעמעם את הכל חוץ מהאזור סביב העכבר */ html.a11y-focus-mode #a11y-focus-overlay-top, html.a11y-focus-mode #a11y-focus-overlay-bottom { display: block; } #a11y-focus-overlay-top, #a11y-focus-overlay-bottom { display: none; position: fixed; inset-inline-start: 0; width: 100%; background: rgba(0, 0, 0, 0.75); pointer-events: none; z-index: 999997; } #a11y-focus-overlay-top { top: 0; } #a11y-focus-overlay-bottom { bottom: 0; } /* Skip-link שנחשף רק בניווט מקלדת */ #a11y-skip-link { position: fixed; top: -60px; inset-inline-start: 10px; z-index: 1000000; background: #000; color: #fff; padding: 10px 16px; border-radius: 6px; transition: top 0.15s ease; } #a11y-skip-link:focus { top: 10px; }