/* ========================================================================== accessibility.css - כלי נגישות (תקן ישראלי 5568 / WCAG 2.0 AA). כולל את עיצוב הרכיב + כל כללי האפקטים המופעלים על . כלל הפרויקט: כל העיצוב חי בקבצי CSS. ========================================================================== */ :root { --a11y-accent: #1e6bff; --a11y-accent-2: #4c8dff; --a11y-panel: #12203f; --a11y-panel-2: #1b2c52; --a11y-line: rgba(255, 255, 255, 0.12); --a11y-text: #eef2fb; --a11y-dim: #a9b7dd; /* צבע הכפתור בכותרת - נבדל מ---a11y-text כי הכפתור יושב על רקע הדף (בהיר או כהה) ולא על רקע הפאנל הכהה. */ --a11y-fab-ink: #eef2fb; --a11y-fab-line: rgba(255, 255, 255, 0.12); --a11y-fab-bg: rgba(255, 255, 255, 0.06); } /* מצב בהיר: הכפתור היה טקסט לבן על רקע לבן (ניגודיות 1.1:1) - בלתי קריא לחלוטין. */ :root[data-theme="light"] { --a11y-fab-ink: #1a2544; --a11y-fab-line: rgba(24, 40, 80, 0.22); --a11y-fab-bg: #ffffff; } /* ------------------------------ כפתור סטטי ב-header ------------------------------ */ /* עוטף התוכן: כל הדף פרט לווידג'ט הנגישות. הפילטרים מוחלים עליו בלבד. */ #a11yFx { min-height: 100vh; } /* דסקטופ: הווידג'ט נשאר בכותרת (inline). במובייל הופך ל-fab צף (ראו @media). */ .a11y-widget { position: relative; display: inline-flex; z-index: 30; font-family: "Heebo", sans-serif; } .a11y-fab { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 4px; padding-inline-end: 15px; border-radius: 999px; border: 1px solid var(--a11y-fab-line); background: var(--a11y-fab-bg); color: var(--a11y-fab-ink); font-family: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s; } .a11y-fab:hover { border-color: var(--a11y-accent-2); background: rgba(76, 141, 255, 0.14); } .a11y-fab:focus-visible { outline: 3px solid #ffd400; outline-offset: 2px; } .a11y-fab[aria-expanded="true"] { border-color: var(--a11y-accent-2); background: rgba(76, 141, 255, 0.16); } .a11y-fab-icon { width: 30px; height: 30px; padding: 5px; box-sizing: border-box; border-radius: 50%; background: linear-gradient(180deg, var(--a11y-accent-2), var(--a11y-accent)); fill: #fff; flex: none; box-shadow: 0 2px 8px rgba(30, 107, 255, 0.4); } /* ------------------------------ פאנל נפתח (dropdown) ------------------------------ */ .a11y-panel { position: absolute; top: calc(100% + 10px); inset-inline-end: 0; width: 320px; max-width: calc(100vw - 32px); max-height: min(76vh, 620px); overflow-y: auto; background: var(--a11y-panel); border: 1px solid var(--a11y-line); border-radius: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55); color: var(--a11y-text); animation: a11y-pop .18s ease; } .a11y-panel[hidden] { display: none; } @keyframes a11y-pop { from { opacity: 0; transform: translateY(10px); } } .a11y-head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: linear-gradient(180deg, var(--a11y-panel-2), var(--a11y-panel)); border-bottom: 1px solid var(--a11y-line); } .a11y-title { margin: 0; font-family: "Rubik", "Heebo", sans-serif; font-size: 1.05rem; font-weight: 700; display: flex; align-items: center; gap: 8px; } .a11y-title-icon { font-size: 1.15rem; } .a11y-close { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--a11y-line); background: transparent; color: var(--a11y-text); cursor: pointer; font-size: 0.85rem; transition: background .14s, border-color .14s; } .a11y-close:hover { background: rgba(255, 255, 255, 0.1); } .a11y-close:focus-visible { outline: 2px solid var(--a11y-accent-2); outline-offset: 2px; } .a11y-body { padding: 14px 16px 18px; } /* גודל טקסט */ .a11y-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .a11y-row-label { font-size: 0.9rem; color: var(--a11y-dim); font-weight: 600; } .a11y-fs { display: flex; gap: 6px; } .a11y-fs button { min-width: 40px; height: 38px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--a11y-line); background: rgba(255, 255, 255, 0.05); color: var(--a11y-text); font-family: inherit; font-size: 0.95rem; font-weight: 700; cursor: pointer; transition: background .14s, border-color .14s; } .a11y-fs button:hover { background: rgba(76, 141, 255, 0.18); border-color: var(--a11y-accent-2); } .a11y-fs button:focus-visible { outline: 2px solid var(--a11y-accent-2); outline-offset: 2px; } .a11y-fs-mid { font-size: 0.8rem !important; } /* רשת כלים */ .a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; } .a11y-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border-radius: 11px; border: 1px solid var(--a11y-line); background: rgba(255, 255, 255, 0.04); color: var(--a11y-text); font-family: inherit; font-size: 0.82rem; font-weight: 600; text-align: center; cursor: pointer; transition: background .14s, border-color .14s, transform .05s; } .a11y-opt:hover { background: rgba(76, 141, 255, 0.14); border-color: var(--a11y-accent-2); } .a11y-opt:active { transform: translateY(1px); } .a11y-opt:focus-visible { outline: 2px solid var(--a11y-accent-2); outline-offset: 2px; } .a11y-opt-ico { font-size: 1.25rem; line-height: 1; } .a11y-opt[aria-pressed="true"] { background: linear-gradient(180deg, var(--a11y-accent-2), var(--a11y-accent)); border-color: transparent; color: #fff; box-shadow: 0 4px 12px rgba(30, 107, 255, 0.4); } /* איפוס + הצהרה */ .a11y-reset { width: 100%; padding: 11px; border-radius: 10px; border: 1px solid var(--a11y-line); background: rgba(255, 92, 108, 0.12); color: #ffb3bb; font-family: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: background .14s; } .a11y-reset:hover { background: rgba(255, 92, 108, 0.22); } .a11y-reset:focus-visible { outline: 2px solid #ff5c6c; outline-offset: 2px; } .a11y-statement { display: block; text-align: center; margin-top: 12px; color: var(--a11y-accent-2); text-decoration: none; font-size: 0.85rem; font-weight: 600; } .a11y-statement:hover { text-decoration: underline; } /* ------------------------------ מובייל: fab צף (מיקום וגודל מהגדרות הניהול) ------------------------------ */ /* max-height תופס גם מובייל לרוחב (landscape), שבו הרוחב > 768 אך הגובה נמוך. */ @media (max-width: 768px), (max-height: 500px) { .a11y-fab-label { display: none; } /* אייקון בלבד */ /* גודל האייקון הצף נשלט ע"י --a11y-fab-size (מהניהול); דסקטופ נשאר 40px. */ .a11y-fab { padding: 4px; height: var(--a11y-fab-size, 40px); width: var(--a11y-fab-size, 40px); justify-content: center; } .a11y-fab-icon { width: calc(var(--a11y-fab-size, 40px) - 10px); height: calc(var(--a11y-fab-size, 40px) - 10px); } /* הווידג'ט צף (מחוץ ל-#a11yFx דרך ה-JS). מיקום ברירת מחדל: שמאל-למטה. */ .a11y-widget { position: fixed; inset-inline: auto; bottom: calc(16px + env(safe-area-inset-bottom)); left: calc(16px + env(safe-area-inset-left)); z-index: 190; } /* כיוון אופקי */ .a11y-widget[data-a11y-side="right"] { left: auto; right: calc(16px + env(safe-area-inset-right)); } /* כיוון אנכי */ .a11y-widget[data-a11y-v="top"] { bottom: auto; top: calc(16px + env(safe-area-inset-top)); } /* כיבוי האייקון במובייל */ .a11y-widget[data-a11y-mobile="0"] { display: none; } /* הפאנל צף וקבוע, נפתח לצד ולכיוון של האייקון */ .a11y-panel { position: fixed; inset-inline: auto; top: auto; right: auto; left: calc(16px + env(safe-area-inset-left)); bottom: calc(16px + var(--a11y-fab-size, 40px) + 12px + env(safe-area-inset-bottom)); width: min(360px, calc(100vw - 24px)); max-width: none; max-height: 78vh; } .a11y-widget[data-a11y-side="right"] .a11y-panel { left: auto; right: calc(16px + env(safe-area-inset-right)); } .a11y-widget[data-a11y-v="top"] .a11y-panel { bottom: auto; top: calc(16px + var(--a11y-fab-size, 40px) + 12px + env(safe-area-inset-top)); } } /* ========================================================================== אפקטי הנגישות - מופעלים על באמצעות מחלקות (a11y-*). ========================================================================== */ /* ניגודיות גבוהה: רקע שחור, טקסט לבן, הדגשים צהובים, גבולות ברורים. */ html.a11y-contrast body, html.a11y-contrast .site-header, html.a11y-contrast .site-footer, html.a11y-contrast .card, html.a11y-contrast .cat, html.a11y-contrast .cat-head, html.a11y-contrast .filter-input, html.a11y-contrast .admin-header, html.a11y-contrast .login-card, html.a11y-contrast .panel, html.a11y-contrast .toggle-all { background: #000 !important; } html.a11y-contrast, html.a11y-contrast body, html.a11y-contrast span, html.a11y-contrast li, html.a11y-contrast p, html.a11y-contrast div { color: #fff !important; } html.a11y-contrast a, html.a11y-contrast .link-item a { color: #ffe600 !important; } html.a11y-contrast .card-title, html.a11y-contrast .brand-title, html.a11y-contrast .card-title-text { color: #ffe600 !important; -webkit-text-fill-color: #ffe600 !important; } html.a11y-contrast .card, html.a11y-contrast .site-header, html.a11y-contrast .site-footer { border-color: #fff !important; } /* היפוך צבעים - הפילטר על עוטף התוכן (#a11yFx) בלבד, לא על html, כדי שלא ישבור את position:fixed של פאנל הנגישות (הוא מחוץ ל-fx). */ html.a11y-invert #a11yFx { filter: invert(1) hue-rotate(180deg); background: #fff; } html.a11y-invert #a11yFx img { filter: invert(1) hue-rotate(180deg); } /* בדסקטופ הווידג'ט בתוך fx - מחזירים אותו לתצוגה תקינה (במובייל הוא מחוץ ל-fx) */ html.a11y-invert #a11yFx .a11y-widget { filter: invert(1) hue-rotate(180deg); } /* גווני אפור */ html.a11y-grayscale #a11yFx { filter: grayscale(1); } html.a11y-invert.a11y-grayscale #a11yFx { filter: invert(1) hue-rotate(180deg) grayscale(1); } /* הדגשת קישורים */ html.a11y-links a, html.a11y-links .link-item a { text-decoration: underline !important; text-underline-offset: 3px !important; outline: 2px solid #ffd400 !important; outline-offset: 1px !important; border-radius: 3px; } /* פונט קריא: משפחת גוגל קריאה + מרווח אותיות + משקל מודגש. */ html.a11y-readable body, html.a11y-readable body * { font-family: "Heebo", "Assistant", Arial, sans-serif !important; letter-spacing: 0.02em !important; font-weight: 500 !important; } /* ריווח מוגדל */ html.a11y-spacing body, html.a11y-spacing body * { line-height: 1.9 !important; letter-spacing: 0.04em !important; word-spacing: 0.14em !important; } /* עצירת הנפשות */ html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition: none !important; scroll-behavior: auto !important; } /* סמן גדול */ html.a11y-cursor, html.a11y-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M6 3 L6 31 L13 24 L18 35 L23 33 L18 22 L28 22 Z' fill='black' stroke='white' stroke-width='2'/%3E%3C/svg%3E") 6 3, auto !important; } /* זכוכית מגדלת: מעבר עכבר על קישור מגדיל את הטקסט (שכפול של המתג בכותרת) */ html.a11y-zoom .link-item a { transform-origin: right center; transition: background .12s, color .18s, padding-inline-start .12s, transform .22s cubic-bezier(.34, 1.56, .64, 1), text-shadow .18s; /* הקופסה נצמדת לטקסט תמיד (ולא רק ב-:hover) - אחרת פס הרקע נמתח על כל רוחב העמודה ומוגדל איתו, ובסיום הריחוף הוא מהבהב רחב בזמן שההגדלה מתכווצת. */ width: max-content; max-width: 100%; } html.a11y-zoom .link-item[data-align="center"] a { transform-origin: center; margin-inline: auto; } html.a11y-zoom .link-item[data-align="left"] a { transform-origin: left center; margin-inline-start: auto; } html.a11y-zoom.view-fancy .card .link-item a { transform-origin: center; margin-inline: auto; } html.a11y-zoom .link-item a:hover, html.a11y-zoom .link-item a:focus-visible { transform: scale(1.7); position: relative; z-index: 3; color: var(--accent, #ff9933); text-shadow: 0 2px 14px rgba(255, 153, 51, 0.55), 0 0 2px rgba(255, 153, 51, 0.4); letter-spacing: 0.2px; } /* בלי הזזת-הריפוד של הריחוף הרגיל - היא מרחיבה את הפס עצמו ומרעידה את ההגדלה */ @media (min-width: 641px) { html.a11y-zoom:not(.view-fancy) .link-item a:hover, html.a11y-zoom:not(.view-fancy) .link-item a:focus-visible { padding-inline-start: 7px; } } /* סרגל קריאה: פס אופקי מודגש שעוקב אחרי העכבר לסימון השורה הנקראת */ .a11y-ruler-bar { position: fixed; inset-inline: 0; top: 0; height: 42px; transform: translateY(-50%); pointer-events: none; z-index: 150; background: rgba(76, 141, 255, 0.14); border-top: 2px solid var(--a11y-accent, #1e6bff); border-bottom: 2px solid var(--a11y-accent, #1e6bff); box-shadow: 0 0 14px rgba(30, 107, 255, 0.35); }