/* ============================================================================= public/assets/a11y/a11y.css — ♿ תפריט נגישות + התאמות בסיס (14/09/2026) ----------------------------------------------------------------------------- נטען בכל העמודים הציבוריים: דף הנחיתה, פרטיות, הצהרת נגישות, הרשמה, כניסה/איפוס. בלי ספק חיצוני — הכל כאן ובקובץ a11y.js. ההגדרות נשמרות בדפדפן (localStorage). ⚠ התפריט לבדו לא הופך אתר לנגיש. מה שהחוק דורש הוא האתר עצמו (ת"י 5568 / WCAG AA) + הצהרת נגישות (public/accessibility.php). הקובץ הזה נותן גם את הבסיס שחל תמיד: מיקוד נראה, קישור "דלג לתוכן" והפחתת תנועה לפי הגדרת המערכת. כל מצב = מחלקה על (a11y-fs-1..3, a11y-contrast, a11y-gray, a11y-links, a11y-font, a11y-spacing, a11y-noanim, a11y-cursor). התפריט עצמו (.a11y-ui) מוחרג מהמצבים — אחרת ניגודיות/גופן היו שוברים את הכלי שמאפשר לבטל אותם. ============================================================================= */ /* ---------- תמיד: מיקוד נראה במקלדת ---------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid #f59e0b !important; outline-offset: 2px !important; } main[tabindex="-1"]:focus { outline: none !important; } /* ---------- תמיד: מי שביקש במערכת ההפעלה פחות תנועה ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ---------- דלג לתוכן הראשי ---------- */ .a11y-skip { position: fixed; top: -120px; right: 16px; z-index: 2147483001; background: #1d4ed8; color: #fff !important; padding: 12px 18px; border-radius: 8px; font: 700 16px/1.2 Arial, 'Segoe UI', sans-serif; text-decoration: underline; } .a11y-skip:focus { top: 12px; } /* ============================================================================= הכפתור והחלונית ============================================================================= */ .a11y-widget { position: fixed; left: 16px; bottom: 16px; z-index: 2147483000; direction: rtl; font: 400 15px/1.4 Arial, 'Segoe UI', sans-serif; color: #0f172a; } .a11y-toggle { width: 54px; height: 54px; border-radius: 50%; border: 3px solid #fff; background: #1d4ed8; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.35); padding: 0; } .a11y-toggle:hover { background: #1e40af; } .a11y-toggle svg { width: 30px; height: 30px; display: block; } .a11y-panel { position: absolute; left: 0; bottom: 66px; width: 320px; max-width: calc(100vw - 32px); max-height: calc(100vh - 100px); overflow-y: auto; background: #fff; border: 1px solid #94a3b8; border-radius: 14px; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.3); padding: 14px; text-align: right; } .a11y-panel[hidden] { display: none !important; } .a11y-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .a11y-title { margin: 0; font: 700 18px/1.3 Arial, 'Segoe UI', sans-serif; color: #0f172a; } .a11y-close { width: 36px; height: 36px; border-radius: 8px; border: 1px solid #cbd5e1; background: #f8fafc; color: #0f172a; font: 700 20px/1 Arial, sans-serif; cursor: pointer; padding: 0; } .a11y-close:hover { background: #e2e8f0; } .a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .a11y-opt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 70px; padding: 8px 6px; border: 2px solid #cbd5e1; border-radius: 10px; background: #f8fafc; color: #0f172a; font: 600 14px/1.25 Arial, 'Segoe UI', sans-serif; text-align: center; cursor: pointer; } .a11y-opt:hover { border-color: #64748b; } .a11y-opt[aria-pressed="true"] { border-color: #1d4ed8; background: #dbeafe; color: #1e3a8a; } .a11y-opt .a11y-ico { font: 700 20px/1 Arial, sans-serif; } .a11y-opt:disabled { opacity: 0.45; cursor: default; } .a11y-status { margin: 10px 0 0; font-size: 13px; color: #334155; min-height: 1.2em; } .a11y-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #e2e8f0; } .a11y-reset { border: 1px solid #94a3b8; background: #fff; color: #0f172a; border-radius: 8px; padding: 8px 12px; font: 600 14px/1.2 Arial, 'Segoe UI', sans-serif; cursor: pointer; } .a11y-reset:hover { background: #f1f5f9; } .a11y-statement { color: #1d4ed8 !important; font: 600 14px/1.2 Arial, 'Segoe UI', sans-serif; text-decoration: underline !important; } @media (max-width: 600px) { .a11y-widget { left: 10px; bottom: 10px; } .a11y-toggle { width: 48px; height: 48px; } } /* ============================================================================= המצבים ============================================================================= */ /* 1. גודל טקסט — העמודים בנויים ב-rem, ולכן מספיק לשנות את השורש */ html.a11y-fs-1 { font-size: 112.5% !important; } html.a11y-fs-2 { font-size: 125% !important; } html.a11y-fs-3 { font-size: 150% !important; } html.a11y-fs-1 body, html.a11y-fs-2 body, html.a11y-fs-3 body { font-size: 1rem !important; } /* 2. ניגודיות גבוהה — טקסט לבן על שחור, קישורים בצהוב */ html.a11y-contrast body, html.a11y-contrast body *:not(.a11y-ui):not(.a11y-ui *) { background-color: #000 !important; background-image: none !important; color: #fff !important; border-color: #fff !important; box-shadow: none !important; text-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html.a11y-contrast body a:not(.a11y-ui):not(.a11y-ui *) { color: #ffe600 !important; } html.a11y-contrast body :is(button, .btn, input, select, textarea):not(.a11y-ui *) { border: 2px solid #fff !important; } html.a11y-contrast body ::placeholder { color: #d4d4d4 !important; opacity: 1 !important; } /* 3. גווני אפור */ html.a11y-gray body > *:not(.a11y-ui) { filter: grayscale(100%) !important; } /* 4. הדגשת קישורים */ html.a11y-links body a:not(.a11y-ui):not(.a11y-ui *) { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px !important; font-weight: 700 !important; } /* 5. גופן קריא */ html.a11y-font body, html.a11y-font body *:not(.a11y-ui):not(.a11y-ui *) { font-family: Arial, 'Segoe UI', Tahoma, sans-serif !important; font-weight: 400; } html.a11y-font body :is(h1, h2, h3, h4, b, strong, th, .btn, summary) { font-weight: 700 !important; } /* 6. ריווח טקסט (WCAG 1.4.12) */ html.a11y-spacing body *:not(.a11y-ui):not(.a11y-ui *) { line-height: 1.9 !important; letter-spacing: 0.05em !important; word-spacing: 0.16em !important; } /* 7. עצירת אנימציות */ html.a11y-noanim { scroll-behavior: auto !important; } html.a11y-noanim *, html.a11y-noanim *::before, html.a11y-noanim *::after { animation: none !important; transition: none !important; } /* 8. סמן עכבר גדול */ html.a11y-cursor, html.a11y-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 11.5-6.6.9 3.9 7.6-2.7 1.4-3.9-7.7L4 20z' fill='%23000' stroke='%23fff' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important; }