/* ========================================================================== תפריט הנגישות -------------------------------------------------------------------------- קובץ נפרד ולא בתוך wp-adapt: הוא נטען בכל עמוד, הוא לא תלוי בעיצוב, והוא הדבר האחרון שמותר לשבור. הפרדה אומרת שעריכת עיצוב לא נוגעת בו. ========================================================================== */ .a11y { position: fixed; inset-inline-start: 22px; bottom: 22px; width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--line); cursor: pointer; z-index: 98; box-shadow: 0 6px 20px rgba(var(--scrim), .12); transition: var(--t); } .a11y svg { width: 25px; height: 25px; fill: var(--gold-tx); } .a11y:hover { background: var(--gold-tx); border-color: var(--gold-tx); } .a11y:hover svg { fill: #fff; } .a11y-panel { position: fixed; inset-inline-start: 22px; bottom: 86px; z-index: 99; width: min(330px, calc(100vw - 44px)); max-height: min(72vh, 620px); overflow-y: auto; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--gold); box-shadow: 0 20px 50px rgba(var(--scrim), .18); padding: 18px; } .a11y-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .a11y-head h2 { font-family: var(--display); font-size: 19px; font-weight: 500; margin: 0; } .a11y-x { background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: var(--ink-soft); padding: 0 4px; } .a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .a11y-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; background: var(--cream); border: 1px solid var(--line); font: inherit; font-size: 12.5px; line-height: 1.35; text-align: center; color: var(--ink); cursor: pointer; transition: var(--t); } .a11y-opt__ic { font-size: 17px; line-height: 1; } .a11y-opt:hover { border-color: var(--gold); } .a11y-opt[aria-pressed="true"] { background: var(--mocha); border-color: var(--mocha); color: #fff; } .a11y-reset { width: 100%; margin-top: 12px; } .a11y-note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--ink-soft); } /* -------------------------------------------------------------------------- ההתאמות עצמן. כולן על כדי שיחולו גם על מה שנטען אחר כך. -------------------------------------------------------------------------- */ :root { --a11y-font: 1; } /* rem ולא px: כל הטיפוגרפיה באתר נגזרת מגודל השורש, ולכן שינוי אחד כאן מגדיל את הכל ביחד ולא רק את פסקאות הגוף. */ html { font-size: calc(100% * var(--a11y-font)); } .a11y-contrast body { background: #fff; } .a11y-contrast body, .a11y-contrast p, .a11y-contrast li, .a11y-contrast span, .a11y-contrast h1, .a11y-contrast h2, .a11y-contrast h3, .a11y-contrast h4 { color: #000 !important; } .a11y-contrast a { color: #00449e !important; } .a11y-contrast .btn { background: #000 !important; color: #fff !important; border-color: #000 !important; } /* היפוך מלא, כולל תמונות. מי שמבקש היפוך רוצה גם אותן. */ .a11y-invert { filter: invert(1) hue-rotate(180deg); background: #000; } .a11y-invert img, .a11y-invert video, .a11y-invert svg { filter: invert(1) hue-rotate(180deg); } .a11y-links a { text-decoration: underline !important; text-underline-offset: 3px; font-weight: 600 !important; } /* גופן שעוצב לקריאוּת. Arial ולא גופן דקורטיבי, וזו כל הנקודה. */ .a11y-readable, .a11y-readable * { font-family: Arial, "Segoe UI", sans-serif !important; letter-spacing: normal !important; } .a11y-spacing p, .a11y-spacing li { line-height: 2.1 !important; letter-spacing: .04em !important; word-spacing: .12em !important; } .a11y-cursor, .a11y-cursor * { cursor: url("data:image/svg+xml;utf8,") 4 2, auto !important; } .a11y-stop *, .a11y-stop *::before, .a11y-stop *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .a11y-guide { position: fixed; inset-inline: 0; height: 3px; background: var(--gold-tx); opacity: .85; pointer-events: none; z-index: 100; } /* המערכת מבקשת פחות תנועה: מכבדים בלי שיצטרכו ללחוץ על כלום. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* פוקוס נראה. ברירת המחדל של הדפדפן נעלמת בעיצובים מותאמים, וזה מה שהופך ניווט מקלדת לבלתי אפשרי. */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--gold-tx); outline-offset: 2px; border-radius: 2px; } @media (max-width: 900px) { .a11y { inset-inline-start: 16px; bottom: 16px; } .a11y-panel { inset-inline-start: 16px; bottom: 80px; } } @media print { .a11y, .a11y-panel, .a11y-guide { display: none !important; } }