/* =========================================================== Accessibility widget — Hebrew RTL Activated by classes on : .a11y-* =========================================================== */ /* Floating launcher button */ .a11y-launcher { position: fixed; inset-block-end: 18px; inset-inline-start: 18px; width: 52px; height: 52px; border-radius: 50%; background: #1d4dca; color: #fff; border: 2px solid #fff; box-shadow: 0 10px 24px -8px rgba(0,0,0,0.4); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 9999; transition: transform 0.2s, background 0.2s; font-family: inherit; } .a11y-launcher:hover { transform: translateY(-2px); background: #173fa6; } .a11y-launcher:focus-visible { outline: 3px solid #ffd84d; outline-offset: 3px; } .a11y-launcher svg { width: 26px; height: 26px; } html.a11y-pos-end .a11y-launcher { inset-inline-start: auto; inset-inline-end: 18px; } html.a11y-hidden .a11y-launcher { display: none; } /* Panel */ .a11y-panel { position: fixed; inset-block: 16px; inset-inline-start: 16px; width: 320px; max-width: calc(100vw - 32px); background: #f4f5fb; color: #11142b; border-radius: 14px; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.45); z-index: 10000; font-family: 'Heebo', system-ui, sans-serif; display: none; flex-direction: column; overflow: hidden; direction: rtl; } html.a11y-pos-end .a11y-panel { inset-inline-start: auto; inset-inline-end: 16px; } html.a11y-open .a11y-panel { display: flex; } .a11y-panel-head { background: #1d4dca; color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; font-size: 15px; font-weight: 600; } .a11y-panel-head button { background: transparent; border: 0; color: #fff; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s; } .a11y-panel-head button:hover { background: rgba(255,255,255,0.18); } .a11y-panel-head svg { width: 16px; height: 16px; } .a11y-panel-body { padding: 14px; overflow-y: auto; max-height: calc(100vh - 80px); } .a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; } .a11y-tile { background: #fff; border: 1px solid #e2e4ee; border-radius: 10px; padding: 14px 8px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500; color: #11142b; transition: border-color 0.15s, background 0.15s, transform 0.1s; text-align: center; line-height: 1.3; } .a11y-tile:hover { border-color: #1d4dca; } .a11y-tile.is-active { border-color: #1d4dca; background: #e8edff; } .a11y-tile:focus-visible { outline: 2px solid #1d4dca; outline-offset: 2px; } .a11y-tile svg { width: 22px; height: 22px; color: #11142b; } .a11y-tile.is-active svg { color: #1d4dca; } .a11y-tile-counter { font-size: 11px; background: #1d4dca; color: #fff; padding: 1px 6px; border-radius: 999px; margin-inline-start: 4px; } .a11y-row { display: flex; gap: 8px; align-items: center; background: #fff; border: 1px solid #e2e4ee; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; font-size: 13px; } .a11y-row-label { flex: 1; } .a11y-position-row { display: flex; gap: 4px; background: #fff; border: 1px solid #e2e4ee; border-radius: 10px; padding: 4px; margin-top: 8px; } .a11y-position-row button { flex: 1; background: transparent; border: 0; cursor: pointer; padding: 8px; border-radius: 6px; font-family: inherit; font-size: 12.5px; color: #11142b; } .a11y-position-row button.is-active { background: #1d4dca; color: #fff; } .a11y-reset { width: 100%; background: #1d4dca; color: #fff; border: 0; border-radius: 10px; padding: 12px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 8px; transition: background 0.15s; } .a11y-reset:hover { background: #173fa6; } .a11y-reset svg { width: 18px; height: 18px; flex-shrink: 0; } .a11y-foot { font-size: 11px; color: #5b6079; text-align: center; padding-top: 4px; } .a11y-foot a { color: #1d4dca; text-decoration: underline; } .a11y-foot a:hover { color: #173fa6; } .a11y-statement { display: block; text-align: center; margin-top: 10px; padding: 8px; font-size: 12px; color: #1d4dca; text-decoration: underline; } .a11y-statement:hover { color: #173fa6; } /* =========================================================== Active modifications =========================================================== */ /* Text size — multiplicative cascade so existing clamp() still works */ html.a11y-text-1 { font-size: 110%; } html.a11y-text-2 { font-size: 122%; } html.a11y-text-3 { font-size: 138%; } /* Line height boost */ html.a11y-line { line-height: 2; } html.a11y-line *, html.a11y-line p, html.a11y-line li, html.a11y-line h1, html.a11y-line h2, html.a11y-line h3 { line-height: 2 !important; } /* Letter & word spacing */ html.a11y-spacing * { letter-spacing: 0.06em !important; word-spacing: 0.16em !important; } /* Highlight links */ html.a11y-links a { text-decoration: underline !important; text-underline-offset: 3px; outline: 1px dashed currentColor; outline-offset: 2px; background: rgba(255, 255, 102, 0.35) !important; color: #0a0a0a !important; } html.a11y-links a:hover { background: rgba(255, 255, 102, 0.55) !important; } /* Pause animations */ html.a11y-pause *, html.a11y-pause *::before, html.a11y-pause *::after { animation: none !important; transition: none !important; } /* Hide images */ html.a11y-no-images img, html.a11y-no-images svg:not(.a11y-panel svg):not(.a11y-launcher svg):not(.a11y-tile svg):not(.a11y-panel-head svg) { visibility: hidden !important; } html.a11y-no-images [style*="background-image"] { background-image: none !important; } html.a11y-no-images .hero-visual, html.a11y-no-images .demo-image, html.a11y-no-images .tile-bg { background: #1a1d2e !important; } /* Big cursor */ html.a11y-big-cursor, html.a11y-big-cursor * { cursor: url('data:image/svg+xml;utf8,') 4 4, auto !important; } /* Dyslexia-friendly font */ html.a11y-dyslexia, html.a11y-dyslexia * { font-family: Verdana, Tahoma, Arial, sans-serif !important; font-weight: 500 !important; } /* Contrast modes */ html.a11y-contrast-high, html.a11y-contrast-high body { background: #000 !important; color: #fff !important; } html.a11y-contrast-high * { background-color: transparent !important; color: #fff !important; border-color: #fff !important; } html.a11y-contrast-high a { color: #ffd84d !important; } html.a11y-contrast-high img { filter: grayscale(1) contrast(1.2); } html.a11y-contrast-high .a11y-launcher, html.a11y-contrast-high .a11y-launcher *, html.a11y-contrast-high .a11y-panel, html.a11y-contrast-high .a11y-panel *, html.a11y-contrast-high .a11y-tile, html.a11y-contrast-high .a11y-tile * { /* keep widget readable */ color: revert !important; background-color: revert !important; border-color: revert !important; } html.a11y-contrast-invert { filter: invert(1) hue-rotate(180deg); background: #fff; } html.a11y-contrast-invert img, html.a11y-contrast-invert video, html.a11y-contrast-invert .hero-visual img, html.a11y-contrast-invert .demo-image img { filter: invert(1) hue-rotate(180deg); } html.a11y-contrast-invert .a11y-panel, html.a11y-contrast-invert .a11y-launcher { filter: invert(1) hue-rotate(180deg); } /* Reduced motion users get pause for free */ @media (prefers-reduced-motion: reduce) { .a11y-launcher, .a11y-panel { transition: none; } } /* Mobile: panel takes full width */ @media (max-width: 480px) { .a11y-panel { inset: 12px; width: auto; max-width: none; } html.a11y-pos-end .a11y-panel { inset: 12px; } }