/**
* InSiteOut Accessibility — סגנונות צד לקוח (1.3.1)
*
* שני חלקים:
* 1. ממשק הסרגל עצמו (.is-a11y-*).
* 2. מחלקות המצבים שמוחלות על (.is-a11y-mode-*).
*
* שים לב: המיקום מוגדר במאפיינים פיזיים (top/right/bottom/left) ולא
* ב-inset-inline, כי לסרגל יש direction משלו — ומאפיינים לוגיים היו
* מתהפכים בעברית ומעבירים את הסרגל לצד הלא נכון.
*/
:root {
--is-a11y-accent: #0c2418;
--is-a11y-accent-dark: #061410;
}
.is-a11y {
--is-a11y-surface: #ffffff;
--is-a11y-text: #16202e;
--is-a11y-muted: #5c6b7f;
--is-a11y-border: #d7dee8;
--is-a11y-active: #e8f0fb;
position: fixed;
z-index: 2147483000;
font-family: Arial, "Segoe UI", Tahoma, sans-serif;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
.is-a11y[dir="rtl"] { direction: rtl; }
.is-a11y[dir="ltr"] { direction: ltr; }
/* --- מיקומים (מאפיינים פיזיים בלבד) --- */
.is-a11y[data-position="bottom-right"] { bottom: 20px; right: 20px; }
.is-a11y[data-position="bottom-left"] { bottom: 20px; left: 20px; }
.is-a11y[data-position="top-right"] { top: 100px; right: 20px; }
.is-a11y[data-position="top-left"] { top: 100px; left: 20px; }
.is-a11y[data-position="middle-right"] { top: 50%; right: 20px; transform: translateY(-50%); }
.is-a11y[data-position="middle-left"] { top: 50%; left: 20px; transform: translateY(-50%); }
/* --- אפקט כניסה: החלקה מלמעלה אל המיקום --- */
@keyframes is-a11y-drop {
from { opacity: 0; transform: translateY(-90px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes is-a11y-drop-centered {
from { opacity: 0; transform: translateY(calc(-50% - 90px)); }
to { opacity: 1; transform: translateY(-50%); }
}
.is-a11y--enter { animation: is-a11y-drop .55s cubic-bezier(.22, .9, .3, 1) both; }
.is-a11y--enter[data-position^="middle"] {
animation-name: is-a11y-drop-centered;
}
/*
* ביטול האפקט למי שביקש צמצום תנועה. הסלקטור חייב להיות ספציפי לפחות כמו
* הכלל של מיקום האמצע שמעליו — אחרת animation-name שלו היה גובר, והאנימציה
* הייתה ממשיכה לרוץ דווקא אצל מי שביקש שלא.
*/
@media (prefers-reduced-motion: reduce) {
.is-a11y--enter,
.is-a11y--enter[data-position^="middle"] {
animation: none;
}
}
/* --- כפתור הפתיחה --- */
.is-a11y__toggle {
all: unset;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--is-a11y-accent);
color: #fff;
cursor: pointer;
/* טבעת לבנה מסביב לאייקון, שתפריד אותו מכל רקע שהדף יניח מתחתיו */
border: 3px solid #fff;
box-shadow: 0 3px 14px rgba(0, 0, 0, .28);
transition: transform .15s ease, background-color .15s ease;
}
.is-a11y__toggle:hover,
.is-a11y__toggle:focus-visible {
background: var(--is-a11y-accent-dark);
transform: scale(1.06);
}
.is-a11y__toggle:focus-visible {
outline: 3px solid var(--is-a11y-accent);
outline-offset: 1px;
box-shadow: 0 0 0 6px rgba(255, 255, 255, .9), 0 3px 14px rgba(0, 0, 0, .28);
}
.is-a11y__toggle svg {
width: 28px;
height: 28px;
fill: currentColor;
pointer-events: none;
}
/* --- הפאנל --- */
.is-a11y__panel {
position: absolute;
width: 306px;
max-width: calc(100vw - 32px);
overflow-y: auto;
overscroll-behavior: contain;
background: var(--is-a11y-surface);
color: var(--is-a11y-text);
border: 1px solid var(--is-a11y-border);
border-radius: 12px;
box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
text-align: start;
}
/* יישור הפאנל לצד ולכיוון של הכפתור */
.is-a11y[data-position$="-right"] .is-a11y__panel { right: 0; }
.is-a11y[data-position$="-left"] .is-a11y__panel { left: 0; }
.is-a11y[data-position^="bottom"] .is-a11y__panel { bottom: 64px; }
.is-a11y[data-position^="top"] .is-a11y__panel { top: 64px; }
/*
* במיקום אמצע העוגן יושב במרכז המסך, ולכן פאנל שנתלה ממנו כלפי מטה גלש
* מתחתית החלון ונחתך. כאן הוא ממורכז סביב אותה נקודה, וגובהו מוגבל ב-JS.
*/
.is-a11y[data-position="middle-right"] .is-a11y__panel { top: 50%; transform: translateY(-50%); right: 64px; }
.is-a11y[data-position="middle-left"] .is-a11y__panel { top: 50%; transform: translateY(-50%); left: 64px; }
.is-a11y__panel[hidden] { display: none; }
.is-a11y__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 14px 16px;
background: var(--is-a11y-accent);
color: #fff;
border-radius: 11px 11px 0 0;
position: sticky;
top: 0;
z-index: 1;
}
.is-a11y__title {
margin: 0;
font-size: 16px;
font-weight: 700;
color: #fff;
letter-spacing: 0;
}
.is-a11y__close {
all: unset;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 6px;
cursor: pointer;
font-size: 20px;
line-height: 1;
color: #fff;
flex: 0 0 auto;
}
.is-a11y__close:hover { background: rgba(255, 255, 255, .18); }
.is-a11y__close:focus-visible { outline: 3px solid #fff; outline-offset: -1px; }
.is-a11y__body { padding: 14px 16px 6px; }
/* מד גודל טקסט */
.is-a11y__meter {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
font-size: 13px;
color: var(--is-a11y-muted);
}
.is-a11y__meter-track {
flex: 1;
height: 6px;
border-radius: 3px;
background: var(--is-a11y-border);
overflow: hidden;
}
.is-a11y__meter-fill {
display: block;
height: 100%;
background: var(--is-a11y-accent);
transition: width .15s ease;
}
/* רשת הכפתורים */
.is-a11y__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.is-a11y__item { margin: 0; padding: 0; list-style: none; }
.is-a11y__btn {
all: unset;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
width: 100%;
min-height: 74px;
padding: 10px 6px;
border: 1px solid var(--is-a11y-border);
border-radius: 9px;
background: #fff;
color: var(--is-a11y-text);
font-size: 12.5px;
font-weight: 600;
text-align: center;
cursor: pointer;
transition: border-color .12s ease, background-color .12s ease;
}
.is-a11y__btn:hover { border-color: var(--is-a11y-accent); background: var(--is-a11y-active); }
.is-a11y__btn:focus-visible {
outline: 3px solid var(--is-a11y-accent);
outline-offset: 2px;
}
.is-a11y__btn[aria-pressed="true"] {
background: var(--is-a11y-active);
border-color: var(--is-a11y-accent);
box-shadow: inset 0 0 0 1px var(--is-a11y-accent);
}
/* סימון חזותי נוסף למצב פעיל — לא מסתמך על צבע בלבד */
.is-a11y__btn[aria-pressed="true"] .is-a11y__btn-label::after {
content: " ✓";
font-weight: 700;
}
.is-a11y__btn-icon {
font-size: 19px;
line-height: 1;
font-weight: 700;
}
.is-a11y__btn-label { display: block; }
/* כפתור איפוס */
.is-a11y__reset {
all: unset;
box-sizing: border-box;
display: block;
width: 100%;
margin: 12px 0 0;
padding: 11px;
border: 1px solid var(--is-a11y-border);
border-radius: 9px;
background: #f4f6fa;
color: var(--is-a11y-text);
font-size: 13.5px;
font-weight: 700;
text-align: center;
cursor: pointer;
}
.is-a11y__reset:hover { background: #e8ecf4; border-color: var(--is-a11y-muted); }
.is-a11y__reset:focus-visible { outline: 3px solid var(--is-a11y-accent); outline-offset: 2px; }
/* תחתית */
.is-a11y__footer {
padding: 12px 16px 14px;
margin-top: 10px;
border-top: 1px solid var(--is-a11y-border);
font-size: 12.5px;
color: var(--is-a11y-muted);
}
.is-a11y__footer p { margin: 0 0 5px; color: var(--is-a11y-muted); font-size: 12.5px; }
.is-a11y__footer p:last-child { margin-bottom: 0; }
.is-a11y__footer a {
color: var(--is-a11y-accent);
text-decoration: underline;
font-weight: 600;
}
.is-a11y__footer a:focus-visible {
outline: 2px solid var(--is-a11y-accent);
outline-offset: 2px;
}
/* בלוק יצירת קשר */
/* גם כאן הסלקטור מלא, מאותה סיבה — אחרת .is-a11y__footer p מחזיר מרווח תחתון */
.is-a11y__footer .is-a11y__statement { margin: 0; }
/* רווח בין הצהרת הנגישות לבין פרטי רכז הנגישות */
.is-a11y__footer .is-a11y__contact { margin: 10px 0 0; }
.is-a11y__contact-title {
display: block;
margin: 0 0 2px;
font-size: 12px;
font-weight: 700;
color: var(--is-a11y-text);
line-height: 1.4;
}
.is-a11y__contact-value {
display: block;
font-size: 13px;
font-weight: 400;
color: var(--is-a11y-text);
}
a.is-a11y__contact-value {
color: var(--is-a11y-accent);
text-decoration: underline;
font-weight: 400;
}
/* קרדיט ולוגו */
/*
* שורת הקרדיט: קישור לכל המשפט, אך ללא עיצוב של קישור — בלי צבע מודגש
* ובלי קו תחתון — כדי שלא תתחרה בקישורים הפונקציונליים שמעליה.
* הכלל דורס בכוונה את .is-a11y__footer a הכללי.
*/
/*
* הסלקטור כולל את .is-a11y__footer בכוונה: הכלל הכללי .is-a11y__footer p
* ספציפי יותר ממחלקה בודדת, והוא זה שדרס כאן את המרווח בגרסה 1.3.0
* (הקו נשאר, אבל ה-margin נמחק).
*/
.is-a11y__footer .is-a11y__brand {
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid var(--is-a11y-border);
font-size: 11.5px;
line-height: 1.5;
}
.is-a11y__footer .is-a11y__brand-link {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
color: var(--is-a11y-muted);
font-weight: 400;
text-decoration: none;
}
.is-a11y__footer .is-a11y__brand-link:hover { color: var(--is-a11y-text); }
.is-a11y__footer .is-a11y__brand-link:focus-visible {
outline: 2px solid var(--is-a11y-accent);
outline-offset: 2px;
border-radius: 3px;
}
.is-a11y__brand-logo {
height: 26px;
width: auto;
max-width: 130px;
display: inline-block;
vertical-align: middle;
}
.is-a11y__brand-fallback { font-weight: 700; color: var(--is-a11y-accent); }
/* הודעות לקורא מסך בלבד */
.is-a11y__sr {
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* מסכים צרים: הפאנל מתכווץ לרוחב החלון; המיקום עצמו נקבע בהגדרות לכל סוג מסך */
@media (max-width: 480px) {
.is-a11y__panel { width: calc(100vw - 24px); }
}
@media (prefers-reduced-motion: reduce) {
.is-a11y *, .is-a11y *::before, .is-a11y *::after {
transition-duration: .01ms !important;
animation-duration: .01ms !important;
}
}
/* ==========================================================================
2. מצבי הנגישות — מוחלים על
הסרגל עצמו תמיד מוחרג באמצעות :not(.is-a11y):not(.is-a11y *)
========================================================================== */
/* --- ניגודיות גבוהה --- */
html.is-a11y-mode-contrast body,
html.is-a11y-mode-contrast body *:not(.is-a11y):not(.is-a11y *) {
background-color: #000 !important;
background-image: none !important;
color: #ffff00 !important;
border-color: #ffff00 !important;
text-shadow: none !important;
box-shadow: none !important;
}
html.is-a11y-mode-contrast body a:not(.is-a11y *),
html.is-a11y-mode-contrast body a *:not(.is-a11y *) {
color: #00ffff !important;
text-decoration: underline !important;
}
html.is-a11y-mode-contrast body button:not(.is-a11y *),
html.is-a11y-mode-contrast body input:not(.is-a11y *),
html.is-a11y-mode-contrast body select:not(.is-a11y *),
html.is-a11y-mode-contrast body textarea:not(.is-a11y *) {
background-color: #000 !important;
color: #ffff00 !important;
border: 2px solid #ffff00 !important;
}
html.is-a11y-mode-contrast body img:not(.is-a11y *),
html.is-a11y-mode-contrast body video:not(.is-a11y *) {
filter: contrast(1.25);
}
/* --- גווני אפור --- */
html.is-a11y-mode-grayscale body { filter: grayscale(100%); }
html.is-a11y-mode-grayscale .is-a11y { filter: none; }
/* --- גופן קריא --- */
html.is-a11y-mode-readable body *:not(.is-a11y):not(.is-a11y *):not(i):not(span[class*="icon"]):not([class*="fa-"]):not([class*="dashicons"]) {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
letter-spacing: normal !important;
font-style: normal !important;
}
/* --- ריווח שורות --- */
html.is-a11y-mode-spacing body p:not(.is-a11y *),
html.is-a11y-mode-spacing body li:not(.is-a11y *),
html.is-a11y-mode-spacing body span:not(.is-a11y *),
html.is-a11y-mode-spacing body div:not(.is-a11y):not(.is-a11y *),
html.is-a11y-mode-spacing body td:not(.is-a11y *),
html.is-a11y-mode-spacing body dd:not(.is-a11y *),
html.is-a11y-mode-spacing body h1:not(.is-a11y *),
html.is-a11y-mode-spacing body h2:not(.is-a11y *),
html.is-a11y-mode-spacing body h3:not(.is-a11y *),
html.is-a11y-mode-spacing body h4:not(.is-a11y *) {
line-height: 1.9 !important;
letter-spacing: .04em !important;
word-spacing: .12em !important;
}
/* --- הדגשת קישורים --- */
html.is-a11y-mode-links body a:not(.is-a11y *) {
text-decoration: underline !important;
text-underline-offset: 3px !important;
outline: 2px dashed currentColor !important;
outline-offset: 2px !important;
font-weight: 700 !important;
}
/* --- סימון כותרות --- */
html.is-a11y-mode-headings body :is(h1, h2, h3, h4, h5, h6):not(.is-a11y *) {
outline: 2px solid #b00020 !important;
outline-offset: 3px !important;
background-color: rgba(176, 0, 32, .06) !important;
}
/* --- סמן מוגדל --- */
html.is-a11y-mode-cursor body,
html.is-a11y-mode-cursor body *:not(.is-a11y):not(.is-a11y *) {
cursor: url("data:image/svg+xml;utf8,") 6 3, auto !important;
}
html.is-a11y-mode-cursor body a:not(.is-a11y *),
html.is-a11y-mode-cursor body button:not(.is-a11y *),
html.is-a11y-mode-cursor body [role="button"]:not(.is-a11y *) {
cursor: url("data:image/svg+xml;utf8,") 12 3, pointer !important;
}
/* --- עצירת אנימציות --- */
html.is-a11y-mode-animations body *:not(.is-a11y):not(.is-a11y *),
html.is-a11y-mode-animations body *:not(.is-a11y):not(.is-a11y *)::before,
html.is-a11y-mode-animations body *:not(.is-a11y):not(.is-a11y *)::after {
animation: none !important;
transition: none !important;
scroll-behavior: auto !important;
}
/* --- ניווט מקלדת: מסמן פוקוס מודגש --- */
html.is-a11y-mode-keyboard body :is(a, button, input, select, textarea, summary, [tabindex]):not(.is-a11y *):focus {
outline: 4px solid #005fcc !important;
outline-offset: 3px !important;
background-color: #fff9c4 !important;
color: #000 !important;
}