/* ========================================================================== CaptionsHE – Accessibility Widget (ת"י 5568 / WCAG 2.0 AA) וידג'ט נגישות עצמאי. נטען בכל דפי האתר. ========================================================================== */ /* --- כפתור צף --- */ .acc-fab { position: fixed; bottom: 20px; inset-inline-start: 20px; /* צד התחלה (ימין ב-RTL הופך לשמאל ויזואלית לפי dir) */ left: 20px; z-index: 2147483000; width: 56px; height: 56px; border-radius: 50%; border: none; background: #1a4f8b; color: #fff; font-size: 28px; line-height: 56px; text-align: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); transition: transform 0.2s ease, background 0.2s ease; } .acc-fab:hover { background: #0f3a6b; transform: scale(1.06); } .acc-fab:focus-visible { outline: 3px solid #ffd400; outline-offset: 3px; } /* --- פאנל --- */ .acc-panel { position: fixed; bottom: 88px; inset-inline-start: 20px; left: 20px; z-index: 2147483000; width: 300px; max-width: calc(100vw - 40px); max-height: 80vh; overflow-y: auto; background: #ffffff; color: #1a1a1a; border: 2px solid #1a4f8b; border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); padding: 16px; direction: rtl; font-family: Arial, Helvetica, sans-serif; display: none; } .acc-panel[data-open="true"] { display: block; } .acc-panel h2 { font-size: 18px; margin: 0 0 12px; color: #1a4f8b; text-align: center; font-weight: 700; } .acc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .acc-opt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px 6px; background: #f2f5f9; border: 1px solid #cdd6e2; border-radius: 8px; color: #1a2a3a; font-size: 13px; font-weight: 600; cursor: pointer; text-align: center; min-height: 62px; } .acc-opt:hover { background: #e3ebf5; } .acc-opt:focus-visible { outline: 3px solid #1a4f8b; outline-offset: 2px; } .acc-opt[aria-pressed="true"] { background: #1a4f8b; color: #fff; border-color: #1a4f8b; } .acc-opt .acc-ico { font-size: 20px; line-height: 1; } .acc-reset { grid-column: 1 / -1; background: #b3261e; color: #fff; border: none; border-radius: 8px; padding: 10px; font-size: 14px; font-weight: 700; cursor: pointer; } .acc-reset:hover { background: #8f1c16; } .acc-reset:focus-visible { outline: 3px solid #ffd400; outline-offset: 2px; } .acc-statement-link { grid-column: 1 / -1; text-align: center; margin-top: 4px; font-size: 13px; } .acc-statement-link a { color: #1a4f8b; font-weight: 700; } .acc-close { position: absolute; top: 8px; inset-inline-end: 10px; right: 10px; background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: #555; } .acc-close:focus-visible { outline: 3px solid #1a4f8b; } /* ========================================================================== מצבי נגישות המוחלים על / ========================================================================== */ /* --- הגדלת גופן (מבוסס rem/ברירת מחדל) --- */ html.acc-fs-1 { font-size: 106.25%; } html.acc-fs-2 { font-size: 112.5%; } html.acc-fs-3 { font-size: 125%; } html.acc-fs-4 { font-size: 137.5%; } /* --- ניגודיות גבוהה --- */ html.acc-high-contrast body, html.acc-high-contrast body * { background-color: #000 !important; background-image: none !important; color: #ffff00 !important; border-color: #ffff00 !important; text-shadow: none !important; box-shadow: none !important; } html.acc-high-contrast a, html.acc-high-contrast a * { color: #33ccff !important; } html.acc-high-contrast button, html.acc-high-contrast input, html.acc-high-contrast .acc-opt { border: 1px solid #ffff00 !important; } /* לא להחיל על הווידג'ט עצמו כדי שיישאר שמיש */ html.acc-high-contrast .acc-panel, html.acc-high-contrast .acc-panel * { background-color: #fff !important; color: #1a1a1a !important; } html.acc-high-contrast .acc-opt[aria-pressed="true"] { background-color: #1a4f8b !important; color: #fff !important; } /* --- היפוך צבעים / גווני אפור (מיושמים דרך filter ב-JS על ) --- */ html.acc-filter-invert { filter: invert(1) hue-rotate(180deg); background: #fff; } html.acc-filter-grayscale { filter: grayscale(1); } /* מנטרל היפוך על הווידג'ט כדי שיישאר קריא */ html.acc-filter-invert .acc-fab, html.acc-filter-invert .acc-panel { filter: invert(1) hue-rotate(180deg); } /* --- הדגשת קישורים --- */ html.acc-highlight-links a { text-decoration: underline !important; outline: 2px solid #ffbf00 !important; background-color: #fff8dc !important; color: #0033cc !important; } /* --- פונט קריא --- */ html.acc-readable body, html.acc-readable body * { font-family: "Arial", "Helvetica", sans-serif !important; letter-spacing: 0.06em !important; word-spacing: 0.12em !important; line-height: 1.7 !important; } html.acc-readable .acc-fab { font-family: inherit !important; } /* --- סמן גדול --- */ html.acc-big-cursor, html.acc-big-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M8 4l30 16-14 3 8 15-5 3-8-15-11 8z' fill='%23000' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 4 4, auto !important; } /* --- עצירת אנימציות --- */ html.acc-no-motion *, html.acc-no-motion *::before, html.acc-no-motion *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; scroll-behavior: auto !important; } /* --- קישור "דלג לתוכן" --- */ .acc-skip-link { position: absolute; inset-inline-start: 0; top: -60px; z-index: 2147483001; background: #1a4f8b; color: #fff; padding: 10px 18px; border-radius: 0 0 8px 0; font-weight: 700; text-decoration: none; transition: top 0.2s ease; } .acc-skip-link:focus { top: 0; outline: 3px solid #ffd400; } @media (max-width: 480px) { .acc-panel { width: calc(100vw - 30px); inset-inline-start: 15px; left: 15px; } .acc-fab { inset-inline-start: 15px; left: 15px; } } /* ========================================================================== נגישות גלובלית – פוקוס מקלדת + כיבוד העדפת תנועה מופחתת (נטען בכל דף דרך וידג'ט הנגישות, ולכן חל על כל האתר) ========================================================================== */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible { outline: 3px solid #ffd400; outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }