/* ========================================================== סרגל נגישות — כפתור, לוח הגדרות, ומצבי התאמה ========================================================== */ /* ------- כפתור הפתיחה ------- */ .a11y-toggle { position: fixed; left: 18px; bottom: 18px; z-index: 9000; width: 52px; height: 52px; display: grid; place-items: center; background: var(--red, #C62828); color: #fff; border: 3px solid #2B1A14; border-radius: 50%; box-shadow: 3px 3px 0 #2B1A14; cursor: pointer; transition: transform .15s ease; } .a11y-toggle:hover { transform: translateY(-2px); } .a11y-toggle:focus-visible { outline: 3px solid #2B1A14; outline-offset: 3px; } .a11y-toggle svg { width: 28px; height: 28px; fill: currentColor; } /* ------- הלוח ------- */ .a11y-panel { position: fixed; left: 18px; bottom: 82px; z-index: 9001; width: min(310px, calc(100vw - 36px)); max-height: min(78vh, 560px); overflow-y: auto; background: #FFF8F1; color: #2B1A14; border: 3px solid #2B1A14; border-radius: 14px; box-shadow: 5px 5px 0 #2B1A14; padding: 16px; } .a11y-panel[hidden] { display: none; } .a11y-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 2px solid #E4D0BC; } .a11y-panel__title { font-size: 1.05rem; font-weight: 900; margin: 0; } .a11y-close { background: none; border: 2px solid #2B1A14; border-radius: 8px; width: 30px; height: 30px; cursor: pointer; font-size: 1rem; font-weight: 900; line-height: 1; color: #2B1A14; } .a11y-close:hover { background: #C62828; color: #fff; } .a11y-close:focus-visible { outline: 3px solid #C62828; outline-offset: 2px; } /* ------- כפתורי אפשרות ------- */ .a11y-group { margin-bottom: 14px; } .a11y-group__label { display: block; font-size: .78rem; font-weight: 900; letter-spacing: .04em; color: #6B5348; margin-bottom: 6px; } .a11y-opt { display: flex; align-items: center; gap: 9px; width: 100%; padding: .5rem .7rem; margin-bottom: 6px; background: #fff; border: 2px solid #2B1A14; border-radius: 9px; font: inherit; font-size: .9rem; font-weight: 700; color: #2B1A14; text-align: start; cursor: pointer; } .a11y-opt:hover { background: #F6E7D6; } .a11y-opt:focus-visible { outline: 3px solid #C62828; outline-offset: 2px; } .a11y-opt[aria-pressed="true"] { background: #C62828; color: #fff; box-shadow: 2px 2px 0 #2B1A14; } .a11y-opt__mark { flex: none; width: 18px; height: 18px; display: grid; place-items: center; border: 2px solid currentColor; border-radius: 4px; font-size: .7rem; font-weight: 900; } .a11y-steps { display: flex; gap: 6px; } .a11y-steps .a11y-opt { justify-content: center; margin-bottom: 0; } .a11y-reset { width: 100%; padding: .55rem; background: #2B1A14; color: #fff; border: 2px solid #2B1A14; border-radius: 9px; font: inherit; font-weight: 900; cursor: pointer; } .a11y-reset:hover { background: #8E1B1B; border-color: #8E1B1B; } .a11y-reset:focus-visible { outline: 3px solid #C62828; outline-offset: 2px; } .a11y-panel__note { margin: 10px 0 0; font-size: .75rem; line-height: 1.6; color: #6B5348; } .a11y-panel__note a { color: #8E1B1B; } /* ========================================================== מצבי ההתאמה — מוחלים על ========================================================== */ /* הגדלת טקסט */ html[data-a11y-font="1"] { font-size: 112.5%; } html[data-a11y-font="2"] { font-size: 125%; } html[data-a11y-font="3"] { font-size: 140%; } /* גופן קריא */ html[data-a11y-readable="on"] body, html[data-a11y-readable="on"] body * { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important; letter-spacing: .04em !important; line-height: 1.9 !important; word-spacing: .12em !important; } /* הדגשת קישורים */ html[data-a11y-links="on"] a { text-decoration: underline !important; text-underline-offset: 3px !important; background: #FFF07A !important; color: #1a1a1a !important; box-shadow: 0 0 0 2px #FFF07A; } /* עצירת אנימציות */ html[data-a11y-motion="off"] *, html[data-a11y-motion="off"] *::before, html[data-a11y-motion="off"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } /* ניגודיות גבוהה — שחור/לבן/צהוב */ html[data-a11y-contrast="on"] body, html[data-a11y-contrast="on"] body * { background-color: #000 !important; color: #fff !important; border-color: #fff !important; box-shadow: none !important; text-shadow: none !important; } html[data-a11y-contrast="on"] a, html[data-a11y-contrast="on"] a * { color: #FFEB3B !important; } html[data-a11y-contrast="on"] button, html[data-a11y-contrast="on"] input, html[data-a11y-contrast="on"] textarea, html[data-a11y-contrast="on"] select { background-color: #000 !important; color: #fff !important; border: 2px solid #fff !important; } html[data-a11y-contrast="on"] img, html[data-a11y-contrast="on"] iframe { filter: grayscale(30%) contrast(115%); } /* הלוח עצמו נשאר קריא גם במצב ניגודיות */ html[data-a11y-contrast="on"] .a11y-opt[aria-pressed="true"] { background: #FFEB3B !important; color: #000 !important; } /* כיבוד העדפת המערכת לצמצום תנועה */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } @media print { .a11y-toggle, .a11y-panel { display: none !important; } }