/* ============================================ תפריט נגישות - תקן ישראלי 5568, רמת AA ============================================ */ /* ---- Trigger button (always visible, fixed) ---- */ .a11y-trigger { position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; background: #1f5db8; color: #ffffff; border-radius: 50%; display: grid; place-items: center; border: 2px solid #ffffff; box-shadow: 0 4px 16px rgba(31, 93, 184, 0.35); z-index: 9998; cursor: pointer; transition: transform 0.2s ease, background 0.2s ease; padding: 0; } .a11y-trigger:hover { transform: scale(1.08); background: #154280; } .a11y-trigger:focus-visible { outline: 3px solid #f39200; outline-offset: 3px; } .a11y-trigger svg { width: 30px; height: 30px; fill: currentColor; } /* ---- Backdrop overlay ---- */ .a11y-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 9998; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; } .a11y-backdrop.is-open { opacity: 1; visibility: visible; } /* ---- Panel ---- */ .a11y-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 340px; max-width: 90vw; background: #ffffff; z-index: 9999; overflow-y: auto; transform: translateX(110%); transition: transform 0.3s ease; box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15); font-family: "Manrope", "Heebo", sans-serif; color: #1a1d24; display: flex; flex-direction: column; } .a11y-panel.is-open { transform: translateX(0); } .a11y-panel__head { background: #1f5db8; color: #ffffff; padding: 1.25rem 1.5rem; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 1; } .a11y-panel__title { font-size: 1.2rem; font-weight: 700; margin: 0; } .a11y-panel__close { background: rgba(255, 255, 255, 0.15); color: #ffffff; width: 36px; height: 36px; border-radius: 50%; border: none; display: grid; place-items: center; cursor: pointer; font-size: 1.4rem; font-weight: 700; transition: background 0.2s ease; } .a11y-panel__close:hover { background: rgba(255, 255, 255, 0.3); } .a11y-panel__close:focus-visible { outline: 3px solid #f39200; outline-offset: 2px; } .a11y-panel__body { padding: 1.25rem 1.5rem; flex: 1; } .a11y-section { border-bottom: 1px solid #e3e7ed; padding-bottom: 1rem; margin-bottom: 1rem; } .a11y-section:last-child { border-bottom: none; } .a11y-section__title { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; color: #6b7280; text-transform: uppercase; margin-bottom: 0.6rem; } .a11y-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } .a11y-btn { background: #f7f8fa; border: 2px solid #e3e7ed; color: #1a1d24; padding: 0.65rem 0.5rem; font-family: inherit; font-size: 0.85rem; font-weight: 600; border-radius: 8px; cursor: pointer; transition: all 0.15s ease; display: flex; align-items: center; justify-content: center; gap: 0.4rem; text-align: center; } .a11y-btn:hover { background: #eef2f6; border-color: #1f5db8; } .a11y-btn:focus-visible { outline: 3px solid #f39200; outline-offset: 2px; } .a11y-btn[aria-pressed="true"] { background: #1f5db8; color: #ffffff; border-color: #1f5db8; } .a11y-btn--full { grid-column: 1 / -1; } .a11y-btn svg { width: 18px; height: 18px; flex-shrink: 0; } .a11y-btn--reset { background: #fee9e9; border-color: #fcc4c4; color: #b21e1e; } .a11y-btn--reset:hover { background: #fcd4d4; border-color: #b21e1e; } .a11y-panel__foot { padding: 1rem 1.5rem; background: #f7f8fa; font-size: 0.78rem; color: #6b7280; border-top: 1px solid #e3e7ed; line-height: 1.5; } .a11y-panel__foot a { color: #1f5db8; font-weight: 600; text-decoration: underline; } /* ============================================ Body classes applied by JS to control rendering ============================================ */ /* Font scaling — applied to for cascading rem effect */ html.a11y-font-110 { font-size: 17.6px; } html.a11y-font-120 { font-size: 19.2px; } html.a11y-font-130 { font-size: 20.8px; } html.a11y-font-140 { font-size: 22.4px; } html.a11y-font-150 { font-size: 24px; } html.a11y-font-90 { font-size: 14.4px; } html.a11y-font-80 { font-size: 12.8px; } /* Line spacing */ body.a11y-line-loose * { line-height: 1.85 !important; letter-spacing: 0.02em !important; } /* Highlight links */ body.a11y-links a:not(.a11y-trigger):not(.a11y-panel__close):not(.btn):not(.brand) { background: #fff7e0 !important; border-bottom: 2px solid #f39200 !important; text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px !important; padding: 0 2px !important; } /* Highlight headings */ body.a11y-headings h1, body.a11y-headings h2, body.a11y-headings h3, body.a11y-headings h4, body.a11y-headings h5, body.a11y-headings h6 { background: #dde7f5 !important; outline: 3px solid #1f5db8 !important; padding: 0.4rem 0.6rem !important; border-radius: 4px !important; display: inline-block !important; margin-bottom: 0.85rem !important; } /* Pause animations */ body.a11y-no-motion *, body.a11y-no-motion *::before, body.a11y-no-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* Larger cursor */ body.a11y-cursor, body.a11y-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-width='1.5' d='M3 2l16 8-7 2-2 7z'/%3E%3C/svg%3E") 0 0, auto !important; } /* High contrast - dark mode for accessibility */ html.a11y-contrast, html.a11y-contrast body { background: #000000 !important; color: #ffff00 !important; } html.a11y-contrast * { background-color: transparent !important; color: #ffff00 !important; border-color: #ffff00 !important; box-shadow: none !important; text-shadow: none !important; } html.a11y-contrast a, html.a11y-contrast a * { color: #00ffff !important; text-decoration: underline !important; } html.a11y-contrast button, html.a11y-contrast .btn, html.a11y-contrast input, html.a11y-contrast select, html.a11y-contrast textarea { background: #000000 !important; color: #ffff00 !important; border: 2px solid #ffff00 !important; } html.a11y-contrast .a11y-trigger { background: #000000 !important; color: #ffff00 !important; } html.a11y-contrast .a11y-panel { background: #000000 !important; } html.a11y-contrast .a11y-panel__head { background: #ffff00 !important; color: #000000 !important; } html.a11y-contrast .a11y-panel__head * { color: #000000 !important; } html.a11y-contrast img, html.a11y-contrast svg { filter: grayscale(1) contrast(1.2); } /* Light high-contrast (alternate) */ html.a11y-contrast-light, html.a11y-contrast-light body { background: #ffffff !important; color: #000000 !important; } html.a11y-contrast-light * { background-color: transparent !important; color: #000000 !important; border-color: #000000 !important; box-shadow: none !important; } html.a11y-contrast-light a { color: #0000ee !important; text-decoration: underline !important; } /* Readable font (Arial-like, easier for dyslexia) */ body.a11y-readable, body.a11y-readable * { font-family: Arial, "Trebuchet MS", "Heebo", sans-serif !important; letter-spacing: 0.03em !important; } /* Saturation off (grayscale) */ html.a11y-grayscale { filter: grayscale(100%); } /* Mobile responsive panel */ @media (max-width: 540px) { .a11y-panel { width: 100%; max-width: 100%; } .a11y-trigger { width: 50px; height: 50px; bottom: 16px; right: 16px; } .a11y-trigger svg { width: 26px; height: 26px; } } /* Print: hide a11y elements */ @media print { .a11y-trigger, .a11y-panel, .a11y-backdrop { display: none !important; } } /* Screen reader only */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }