/* ════════════════════════════════════════════════════════════════════ * Water & Energy — Accessibility Widget Styles * Self-contained, namespaced under #a11y-fab / #a11y-panel / .a11y-* * ════════════════════════════════════════════════════════════════════ */ /* ═══ FLOATING BUTTON (BOTTOM-RIGHT, opposite of WhatsApp) ═══ */ #a11y-fab{ position:fixed; bottom:calc(24px + env(safe-area-inset-bottom,0px)); right:24px; z-index:9998; width:56px; height:56px; border-radius:50%; background:#1A2744; color:#fff; border:3px solid #fff; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(26,39,68,.4); cursor:pointer; padding:0; transition:transform .2s, box-shadow .2s, background .2s; } #a11y-fab:hover, #a11y-fab:focus-visible{ transform:scale(1.08); box-shadow:0 6px 24px rgba(26,39,68,.55); background:#2563EB; outline:none; } #a11y-fab svg{ pointer-events:none } /* ═══ PANEL ═══ */ #a11y-panel{ position:fixed; bottom:96px; right:24px; z-index:9999; width:320px; max-width:calc(100vw - 32px); max-height:calc(100vh - 120px); overflow-y:auto; background:#fff; color:#1A2744; border:1px solid #d1d5db; border-radius:14px; box-shadow:0 20px 50px rgba(0,0,0,.25); font-family:'Heebo','Arial',sans-serif; direction:rtl; text-align:right; padding:0; } #a11y-panel[hidden]{ display:none } #a11y-panel .a11y-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; background:#1A2744; color:#fff; border-radius:14px 14px 0 0; } #a11y-panel .a11y-head h2{ margin:0; font-size:18px; font-weight:900; color:#fff; } #a11y-close{ background:transparent; color:#fff; border:none; font-size:28px; line-height:1; cursor:pointer; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; } #a11y-close:hover, #a11y-close:focus-visible{ background:rgba(255,255,255,.2); outline:none; } #a11y-panel .a11y-section{ padding:14px 18px; border-bottom:1px solid #f1f3f5; } #a11y-panel .a11y-section:last-of-type{ border-bottom:none } #a11y-panel .a11y-h{ margin:0 0 10px; font-size:13px; font-weight:800; color:#6b7280; letter-spacing:.5px; text-transform:uppercase; } #a11y-panel .a11y-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; } #a11y-panel .a11y-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; } #a11y-panel .a11y-btn{ display:inline-flex; align-items:center; justify-content:center; background:#f3f4f6; color:#1A2744; border:1.5px solid #e5e7eb; border-radius:8px; padding:10px 8px; min-height:44px; font-size:13px; font-weight:600; font-family:inherit; cursor:pointer; text-decoration:none; text-align:center; transition:background .15s, border-color .15s, color .15s; } #a11y-panel .a11y-btn:hover, #a11y-panel .a11y-btn:focus-visible{ background:#e0e7ff; border-color:#2563EB; outline:none; } #a11y-panel .a11y-btn.a11y-active{ background:#2563EB; color:#fff; border-color:#1d4ed8; } #a11y-panel .a11y-icon-btn{ min-width:48px; font-weight:900; font-size:16px } #a11y-panel .a11y-font-label{ font-weight:900; font-size:18px; color:#1A2744; min-width:36px; text-align:center; } #a11y-panel .a11y-foot{ padding:14px 18px 16px; background:#f9fafb; border-radius:0 0 14px 14px; } #a11y-panel .a11y-reset{ width:100%; background:#fff7ed; color:#92400e; border-color:#fbbf24; font-weight:700; } #a11y-panel .a11y-reset:hover{ background:#fef3c7; border-color:#f59e0b } #a11y-panel .a11y-link{ display:block; text-align:center; margin-top:10px; font-size:13px; font-weight:700; color:#2563EB; text-decoration:underline; } #a11y-panel .a11y-link:hover{ color:#1d4ed8 } #a11y-panel .a11y-rkz{ margin:10px 0 0; font-size:11px; color:#6b7280; text-align:center; line-height:1.5; } #a11y-panel .a11y-rkz a{ color:#2563EB; text-decoration:underline } /* ═══ STATE: FONT SCALING ═══ * Already handled inline on via JS; all rem/em scale automatically. * px-based UIs in the page will not scale — that's a known limitation. */ /* ═══ STATE: CONTRAST — HIGH ═══ */ html.a11y-contrast-high body, html.a11y-contrast-high body *{ background-color:#fff !important; color:#000 !important; border-color:#000 !important; } html.a11y-contrast-high a, html.a11y-contrast-high a *{ color:#0000EE !important; text-decoration:underline !important } html.a11y-contrast-high button, html.a11y-contrast-high input, html.a11y-contrast-high select, html.a11y-contrast-high textarea{ background:#fff !important; color:#000 !important; border:2px solid #000 !important; } html.a11y-contrast-high img, html.a11y-contrast-high svg, html.a11y-contrast-high video{ filter:contrast(1.2) } /* ═══ STATE: CONTRAST — INVERTED ═══ */ html.a11y-contrast-inverted{ filter:invert(1) hue-rotate(180deg); background:#fff; } html.a11y-contrast-inverted img, html.a11y-contrast-inverted video, html.a11y-contrast-inverted iframe, html.a11y-contrast-inverted picture, html.a11y-contrast-inverted [style*="background-image"]{ filter:invert(1) hue-rotate(180deg); } html.a11y-contrast-inverted #a11y-panel, html.a11y-contrast-inverted #a11y-fab{ filter:invert(1) hue-rotate(180deg); /* keep widget readable */ } /* ═══ STATE: CONTRAST — DARK ═══ */ html.a11y-contrast-dark body, html.a11y-contrast-dark body *{ background-color:#000 !important; color:#fff !important; border-color:#fff !important; } html.a11y-contrast-dark a, html.a11y-contrast-dark a *{ color:#FFFF00 !important; text-decoration:underline !important } html.a11y-contrast-dark button, html.a11y-contrast-dark input, html.a11y-contrast-dark select, html.a11y-contrast-dark textarea{ background:#000 !important; color:#fff !important; border:2px solid #fff !important; } html.a11y-contrast-dark #a11y-panel, html.a11y-contrast-dark #a11y-panel *{ background-color:#0b1020 !important; color:#fff !important; } html.a11y-contrast-dark #a11y-panel .a11y-head{ background:#1A2744 !important } /* ═══ STATE: GRAYSCALE ═══ */ html.a11y-grayscale body{ filter:grayscale(1) } html.a11y-grayscale #a11y-panel, html.a11y-grayscale #a11y-fab{ filter:grayscale(0) } /* ═══ STATE: HIGHLIGHT LINKS ═══ */ html.a11y-links a:not(#a11y-panel a):not(#a11y-fab){ background:#FFFF00 !important; color:#000 !important; text-decoration:underline !important; outline:2px solid #000 !important; outline-offset:2px; padding:2px 4px; } /* ═══ STATE: HIGHLIGHT HEADINGS ═══ */ html.a11y-headings :is(h1,h2,h3,h4,h5,h6){ outline:3px solid #2563EB !important; outline-offset:3px; background:rgba(37,99,235,.08) !important; padding:4px 8px !important; } /* ═══ STATE: READABLE FONT ═══ */ html.a11y-readable body, html.a11y-readable body *:not(#a11y-panel):not(#a11y-panel *):not(#a11y-fab){ font-family:'Arial','Helvetica','Segoe UI',sans-serif !important; letter-spacing:.02em !important; word-spacing:.05em !important; } /* ═══ STATE: TEXT SPACING ═══ */ html.a11y-spacing body, html.a11y-spacing body *:not(#a11y-panel):not(#a11y-panel *){ line-height:1.8 !important; letter-spacing:.06em !important; word-spacing:.16em !important; } html.a11y-spacing p, html.a11y-spacing li{ margin-bottom:1.2em !important } /* ═══ STATE: BIG CURSOR ═══ */ html.a11y-cursor, html.a11y-cursor *{ cursor:url("data:image/svg+xml;utf8,") 4 2, auto !important; } html.a11y-cursor a, html.a11y-cursor button, html.a11y-cursor [role="button"], html.a11y-cursor input, html.a11y-cursor select, html.a11y-cursor textarea{ cursor:url("data:image/svg+xml;utf8,") 22 22, pointer !important; } /* ═══ STATE: STOP ANIMATIONS ═══ */ html.a11y-no-anim *, html.a11y-no-anim *::before, html.a11y-no-anim *::after{ animation-duration:0.001s !important; animation-delay:0s !important; animation-iteration-count:1 !important; transition-duration:0.001s !important; transition-delay:0s !important; scroll-behavior:auto !important; } /* ═══ STATE: KEYBOARD NAVIGATION (visible focus rings) ═══ */ html.a11y-keyboard *:focus, html.a11y-using-kb *:focus{ outline:3px solid #FFA500 !important; outline-offset:3px !important; box-shadow:0 0 0 6px rgba(255,165,0,.35) !important; } /* ═══ HONOR prefers-reduced-motion ═══ */ @media (prefers-reduced-motion: reduce){ #a11y-fab, #a11y-panel .a11y-btn, #a11y-close{ transition:none !important } } /* ═══ MOBILE ADJUSTMENTS ═══ * Lift the FAB above the WhatsApp/chat-fab/back-top stack on the right column * so it never lands on top of the hero "תיאום שיחה" CTA when CTAs wrap. * Stack on right column (bottom→up): back-top(24) → chat-fab(88) → a11y(152). */ @media (max-width:768px){ #a11y-fab{ width:52px; height:52px; bottom:calc(152px + env(safe-area-inset-bottom,0px)); right:16px; } #a11y-panel{ right:8px; bottom:calc(216px + env(safe-area-inset-bottom,0px)); width:calc(100vw - 16px); max-height:calc(100vh - 240px); } } @media (max-width:480px){ #a11y-panel .a11y-grid{ grid-template-columns:1fr } } /* ═══ PRINT — hide widget ═══ */ @media print{ #a11y-fab, #a11y-panel{ display:none !important } }