/* ============================================================ Accessibility Widget — תפריט נגישות עומד בתקנה 35 לשוויון זכויות לאנשים עם מוגבלות ============================================================ */ /* ===== Widget toggle button (always visible) ===== */ .a11y-toggle{ position: fixed; bottom: 164px; /* stack: WA (28-84) > AI chat (92-152) > a11y (164-220) */ left: 28px; width: 56px; height: 56px; border-radius: 50%; background: var(--teal-900); color: var(--paper); border: 3px solid var(--paper); box-shadow: 0 6px 24px rgba(15, 76, 92, 0.25); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 9998; transition: all 0.25s; } .a11y-toggle:hover, .a11y-toggle:focus{ transform: scale(1.08); background: var(--teal-800); outline: 3px solid var(--honey-500); outline-offset: 2px; } .a11y-toggle svg{ width: 28px; height: 28px; } /* ===== Widget panel ===== */ .a11y-panel{ position: fixed; bottom: 232px; /* above the a11y toggle (164-220) */ left: 28px; width: 320px; max-height: calc(100vh - 130px); background: var(--paper); border-radius: 16px; box-shadow: 0 16px 48px rgba(15, 76, 92, 0.2); border: 1px solid var(--line); z-index: 9999; display: none; flex-direction: column; overflow: hidden; font-family: var(--sans); } .a11y-panel.open{ display: flex; } .a11y-panel-header{ background: var(--teal-900); color: var(--paper); padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; } .a11y-panel-header h3{ font-family: var(--serif); font-size: 18px; font-weight: 700; margin: 0; } .a11y-panel-close{ background: transparent; border: 0; color: var(--paper); cursor: pointer; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; } .a11y-panel-close:hover, .a11y-panel-close:focus{ background: rgba(255,255,255,0.15); outline: 2px solid var(--honey-500); } .a11y-panel-body{ padding: 14px 16px; overflow-y: auto; flex: 1; } .a11y-section-title{ font-size: 12px; font-weight: 700; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.08em; margin: 12px 0 8px; } .a11y-section-title:first-child{ margin-top: 0; } .a11y-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .a11y-btn{ display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; background: var(--paper); border: 1.5px solid var(--line); border-radius: 10px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--ink); transition: all 0.18s; text-align: center; min-height: 76px; font-family: inherit; } .a11y-btn svg{ width: 22px; height: 22px; stroke: currentColor; } .a11y-btn:hover, .a11y-btn:focus{ border-color: var(--teal-900); background: var(--cream); outline: 2px solid var(--honey-500); outline-offset: 1px; } .a11y-btn.active{ background: var(--teal-900); border-color: var(--teal-900); color: var(--paper); } .a11y-panel-footer{ padding: 12px 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; background: var(--cream); } .a11y-reset{ width: 100%; padding: 10px; background: var(--paper); border: 1.5px solid var(--err); color: var(--err); border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.18s; font-family: inherit; } .a11y-reset:hover, .a11y-reset:focus{ background: var(--err); color: var(--paper); outline: 2px solid var(--honey-500); } .a11y-statement-link{ font-size: 12px; text-align: center; color: var(--ink-soft); text-decoration: underline; } .a11y-statement-link:hover{ color: var(--teal-900); } /* ===== Body modes (applied via class on ) ===== */ /* Text scale */ html.a11y-text-1 body{ font-size: 110% !important; } html.a11y-text-2 body{ font-size: 120% !important; } html.a11y-text-3 body{ font-size: 135% !important; } /* High contrast (black on white) */ html.a11y-contrast-bw, html.a11y-contrast-bw body, html.a11y-contrast-bw section, html.a11y-contrast-bw header, html.a11y-contrast-bw footer, html.a11y-contrast-bw main, html.a11y-contrast-bw article, html.a11y-contrast-bw div, html.a11y-contrast-bw .card, html.a11y-contrast-bw .service-card, html.a11y-contrast-bw .auth-card{ background: #FFFFFF !important; color: #000000 !important; } html.a11y-contrast-bw a{ color: #0000EE !important; text-decoration: underline !important; } html.a11y-contrast-bw .btn, html.a11y-contrast-bw button{ background: #000000 !important; color: #FFFFFF !important; border: 2px solid #000000 !important; } html.a11y-contrast-bw img{ filter: grayscale(100%); } /* Inverse contrast (white on black) */ html.a11y-contrast-inv, html.a11y-contrast-inv body{ background: #000000 !important; color: #FFFFFF !important; } html.a11y-contrast-inv section, html.a11y-contrast-inv header, html.a11y-contrast-inv footer, html.a11y-contrast-inv main, html.a11y-contrast-inv .card, html.a11y-contrast-inv .service-card, html.a11y-contrast-inv .auth-card, html.a11y-contrast-inv input, html.a11y-contrast-inv textarea{ background: #000000 !important; color: #FFFFFF !important; border-color: #FFFFFF !important; } html.a11y-contrast-inv a{ color: #FFFF00 !important; text-decoration: underline !important; } html.a11y-contrast-inv .btn, html.a11y-contrast-inv button:not(.a11y-toggle):not(.a11y-panel-close):not(.a11y-btn):not(.a11y-reset){ background: #FFFFFF !important; color: #000000 !important; } /* Highlight links */ html.a11y-highlight-links a{ background: var(--honey-100) !important; color: var(--teal-900) !important; text-decoration: underline !important; padding: 2px 4px; border-radius: 4px; border: 2px solid var(--honey-500) !important; } /* Readable font (Atkinson Hyperlegible) */ html.a11y-readable-font *{ font-family: 'Atkinson Hyperlegible', Arial, sans-serif !important; letter-spacing: 0.03em !important; } /* Stop animations */ html.a11y-no-motion *, html.a11y-no-motion *::before, html.a11y-no-motion *::after{ animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; scroll-behavior: auto !important; } /* Large cursor */ html.a11y-big-cursor, html.a11y-big-cursor *{ cursor: url('data:image/svg+xml;utf8,') 3 2, auto !important; } /* Reading guide bar */ html.a11y-reading-guide::after{ content: ''; position: fixed; left: 0; right: 0; height: 32px; background: rgba(189, 150, 86, 0.18); border-top: 2px solid var(--honey-500); border-bottom: 2px solid var(--honey-500); pointer-events: none; z-index: 9997; top: var(--a11y-guide-y, 50%); transform: translateY(-50%); } /* Focus visible (keyboard navigation) */ html.a11y-keyboard-mode *:focus{ outline: 3px solid var(--honey-500) !important; outline-offset: 2px !important; } /* ===== Skip-to-content link (screen readers + keyboard users) ===== */ .skip-to-content{ position: absolute; top: -100px; right: 8px; background: var(--teal-900); color: var(--paper); padding: 12px 24px; text-decoration: none; font-weight: 700; border-radius: 0 0 8px 8px; z-index: 10000; transition: top 0.2s; } .skip-to-content:focus{ top: 0; outline: 3px solid var(--honey-500); } /* ===== Responsive ===== */ @media (max-width: 480px){ .a11y-panel{ width: calc(100vw - 32px); bottom: 210px; /* above the a11y toggle (148-198) */ left: 16px; right: 16px; } .a11y-toggle{ /* Mobile stacking: WA(18-72) > AI chat(80-140) > a11y(148-198) */ bottom: 148px; left: 18px; width: 50px; height: 50px; } } /* ===== Atkinson font for readable mode ===== */ @font-face{ font-family: 'Atkinson Hyperlegible'; src: url('https://fonts.gstatic.com/s/atkinsonhyperlegible/v11/9Bt23C1KxNDXMspQ1lPyU89-1h6ONRlW45GE5ZgpewSSbQ.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face{ font-family: 'Atkinson Hyperlegible'; src: url('https://fonts.gstatic.com/s/atkinsonhyperlegible/v11/9Bt43C1KxNDXMspQ1lPyU89-1h6ONRlW45GO5ZgpcRyAYLA.woff2') format('woff2'); font-weight: 700; font-display: swap; }