/* ========================================================================== נגישות (IS 5568 / תקנה 35) – שכבת CSS של העדפות המשתמש + סרגל הנגישות. כל שינוי מונע ממחלקה על (a11y-*). אין נגיעה בתוכן העמוד. סדר: (1) שכבת ההעדפות, (2) חסינות הסרגל, (3) עיצוב הסרגל, (4) הדפסה. ========================================================================== */ /* ========================================================================== 1. שכבת ההעדפות – מחלקות על ========================================================================== */ /* ----- הדגשת קישורים ----- */ html.a11y-links a:not(.btn):not(.liraz-a11y__fab):not(.liraz-a11y__item):not(.liraz-a11y__reset) { text-decoration: underline !important; text-underline-offset: 2px !important; font-weight: 600 !important; } /* ----- הדגשת כותרות ----- */ html.a11y-headings :is(h1, h2, h3, h4, h5, h6):not(.liraz-a11y__title) { outline: 2px dashed var(--plum) !important; outline-offset: 4px !important; background: var(--green-soft) !important; color: var(--ink) !important; padding-inline: .3em !important; border-radius: 4px; } /* ----- גודל טקסט (שינוי גודל הבסיס של html => מקנה קנה-מידה ל-rem) ----- */ html.a11y-text-115 { font-size: 115% !important; } html.a11y-text-130 { font-size: 130% !important; } html.a11y-text-150 { font-size: 150% !important; } /* ----- מרווח שורות ----- */ html.a11y-lines-16 :is(p, li, a, span, blockquote, dd, dt, label, td, th, figcaption, h1, h2, h3, h4, h5, h6) { line-height: 1.6 !important; } html.a11y-lines-20 :is(p, li, a, span, blockquote, dd, dt, label, td, th, figcaption, h1, h2, h3, h4, h5, h6) { line-height: 2 !important; } /* ----- גופן קריא (מחסנית מערכת בלבד – ללא webfont שמשנה רוחב שורה) ----- */ html.a11y-readable :is(body, p, li, a, span, h1, h2, h3, h4, h5, h6, button, input, textarea, label, td, th, div) { font-family: 'Arial Hebrew', Arial, 'Segoe UI', Tahoma, sans-serif !important; letter-spacing: normal !important; } /* ----- סמן גדול ----- */ html.a11y-cursor-big, html.a11y-cursor-big * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M6 2 L6 30 L13 23 L18 34 L23 32 L18 21 L28 21 Z' fill='black' stroke='white' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 6 2, auto !important; } /* ----- עצירת אנימציות ----- */ html.a11y-reduce-motion *, html.a11y-reduce-motion *::before, html.a11y-reduce-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } /* ----- ניגודיות גבוהה (דריסת אסימוני העיצוב לשחור-על-לבן חד) ----- */ html.a11y-contrast-high { --bg: #fff; --bg-tint: #fff; --bg-green: #fff; --surface: #fff; --glass: #fff; --glass-brd: #000; --ink: #000; --ink-soft: #000; --plum: #000; --plum-2: #000; --plum-deep: #000; --green-ink: #1c2708; --green-soft: #eef6d6; --line: #000; background: #fff !important; } html.a11y-contrast-high :is(p, li, span, h1, h2, h3, h4, h5, h6, dd, dt, blockquote, figcaption, label, td, th) { color: #000 !important; } html.a11y-contrast-high a:not(.btn) { color: #000 !important; text-decoration: underline !important; } html.a11y-contrast-high :is(.btn, button, input, textarea, select) { border: 2px solid #000 !important; } /* כפתורי הסגל שומרים על טקסט לבן על רקע כהה => ניגודיות גבוהה גם כך. */ html.a11y-contrast-high .btn--plum { background: #000 !important; color: #fff !important; } /* ----- היפוך צבעים ----- */ html.a11y-contrast-invert { filter: invert(1) hue-rotate(180deg); } /* החזרת מדיה למצבה (כדי שתמונות ווידאו לא ייראו כנגטיב). */ html.a11y-contrast-invert :is(img, picture, video, iframe, [style*="background-image"], [style*="url("]) { filter: invert(1) hue-rotate(180deg); } /* ----- גווני אפור ----- */ html.a11y-contrast-mono { filter: grayscale(1); } /* ========================================================================== 2. חסינות הסרגל – התאמות המשתמש לא ישברו את הסרגל עצמו ========================================================================== */ #liraz-a11y .liraz-a11y__panel, #liraz-a11y .liraz-a11y__panel * { line-height: 1.45 !important; letter-spacing: normal !important; font-family: var(--font) !important; } /* בהיפוך – מחזירים את הסרגל בחזרה כדי שיישאר קריא וניתן לכיבוי. קריטי: הפילטר מוחל על האלמנטים ה-fixed עצמם (הכפתור והחלונית), ולא על #liraz-a11y העוטף. פילטר על אלמנט שאינו ה-root יוצר "containing block" לצאצאים ה-fixed => הכפתור מאבד עיגון לחלון-התצוגה, נדחף לתחתית המסמך ו"נעלם". ה-root (html) פטור מכך, ולכן ההיפוך על html עצמו תקין. */ html.a11y-contrast-invert .liraz-a11y__fab, html.a11y-contrast-invert .liraz-a11y__panel { filter: invert(1) hue-rotate(180deg); } html.a11y-contrast-high #liraz-a11y { --surface: #fff; } /* ========================================================================== 3. עיצוב הסרגל (כפתור צף + חלונית) ========================================================================== */ .liraz-a11y { font-family: var(--font); } /* ----- כפתור צף ----- */ .liraz-a11y__fab { position: fixed; inset-block-end: 1.25rem; inset-inline-end: 1.25rem; z-index: 9998; width: 56px; height: 56px; border: 0; border-radius: 50%; background: var(--plum); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 12px 30px -8px rgba(46, 27, 52, .6); transition: transform .2s ease, box-shadow .2s ease; } .liraz-a11y__fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 18px 40px -10px rgba(46, 27, 52, .7); } .liraz-a11y__fab svg { width: 30px; height: 30px; } .liraz-a11y__fab:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; } /* ----- חלונית ----- */ .liraz-a11y__panel { position: fixed; inset-block-end: 5.75rem; inset-inline-end: 1.25rem; z-index: 9999; width: 328px; max-width: calc(100vw - 2.5rem); max-height: calc(100vh - 8rem); overflow-y: auto; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: 0 30px 70px -30px rgba(46, 27, 52, .6); padding: 16px; } .liraz-a11y__panel[hidden] { display: none !important; } .liraz-a11y__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .liraz-a11y__title { font-size: 17px !important; font-weight: 700; margin: 0; color: var(--ink); } .liraz-a11y__close { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center; } .liraz-a11y__close:hover { background: var(--bg-tint); } .liraz-a11y__close:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; } /* ----- רשת הבקרות ----- */ .liraz-a11y__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .liraz-a11y__item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); cursor: pointer; text-align: center; transition: border-color .15s ease, background .15s ease, transform .1s ease; min-height: 90px; justify-content: center; } .liraz-a11y__item:hover { border-color: var(--plum-2); background: var(--bg-tint); } .liraz-a11y__item:active { transform: scale(.97); } .liraz-a11y__item:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; } .liraz-a11y__ic { color: var(--plum); } .liraz-a11y__ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .liraz-a11y__label { font-size: 13px !important; font-weight: 600; } .liraz-a11y__state { font-size: 11.5px !important; font-weight: 700; color: var(--ink-soft); background: var(--bg-tint); padding: 1px 8px; border-radius: 999px; } /* מצב פעיל */ .liraz-a11y__item.is-on { border-color: var(--green); background: var(--green-soft); } .liraz-a11y__item.is-on .liraz-a11y__ic { color: var(--green-ink); } .liraz-a11y__item.is-on .liraz-a11y__state { background: var(--green); color: #243206; } /* ----- איפוס + קישור להצהרה ----- */ .liraz-a11y__reset { display: block; width: 100%; margin-top: 12px; padding: 10px; border: 1.5px solid var(--plum); border-radius: 999px; background: transparent; color: var(--plum); font-family: inherit; font-size: 14px !important; font-weight: 700; cursor: pointer; transition: background .15s ease, color .15s ease; } .liraz-a11y__reset:hover { background: var(--plum); color: #fff; } .liraz-a11y__reset:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; } .liraz-a11y__statement { display: block; margin-top: 10px; text-align: center; font-size: 12.5px !important; color: var(--plum-2); text-decoration: underline; } .liraz-a11y__statement:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; } /* ========================================================================== 4. הדפסה – ביטול כל התאמות המשתמש כדי שלא יעברו לנייר ========================================================================== */ @media print { #liraz-a11y { display: none !important; } html[class*="a11y-contrast-"] { filter: none !important; } html[class*="a11y-text-"] { font-size: 100% !important; } html[class*="a11y-lines-"] :is(p, li, a, span, h1, h2, h3, h4, h5, h6) { line-height: normal !important; } }