/* BiLi Accessibility Widget — ת"י 5568 / WCAG 2.1 AA assistive toolbar */ .bili-a11y-trigger { position: fixed; bottom: 1.25rem; left: 1.25rem; /* RTL: left side common for a11y widgets in IL */ z-index: 99999; width: 3rem; height: 3rem; border: none; border-radius: 50%; background: #0066cc; color: #fff; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); display: flex; align-items: center; justify-content: center; transition: transform 0.2s, box-shadow 0.2s; } .bili-a11y-trigger:hover, .bili-a11y-trigger:focus-visible { transform: scale(1.05); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); outline: 3px solid #f9c193; outline-offset: 2px; } .bili-a11y-trigger svg { width: 1.5rem; height: 1.5rem; fill: currentColor; } .bili-a11y-panel { position: fixed; bottom: 5rem; left: 1.25rem; z-index: 99998; width: min(20rem, calc(100vw - 2.5rem)); background: #fff; border-radius: 0.75rem; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18); border: 1px solid #e0e0e0; padding: 1rem; direction: rtl; font-family: "Open Sans Hebrew", Arial, sans-serif; font-size: 0.9375rem; color: #313131; opacity: 0; visibility: hidden; transform: translateY(0.5rem); transition: opacity 0.2s, transform 0.2s, visibility 0.2s; } .bili-a11y-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .bili-a11y-panel h2 { margin: 0 0 0.75rem; font-size: 1.125rem; font-weight: 700; color: #313131; } .bili-a11y-actions { display: grid; gap: 0.5rem; } .bili-a11y-actions button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.625rem 0.875rem; border: 1px solid #ddd; border-radius: 0.5rem; background: #fafafa; color: #313131; font: inherit; cursor: pointer; text-align: right; transition: background 0.15s, border-color 0.15s; } .bili-a11y-actions button:hover, .bili-a11y-actions button:focus-visible { background: #f0f4ff; border-color: #0066cc; outline: none; } .bili-a11y-actions button[aria-pressed="true"] { background: #e8f0fe; border-color: #0066cc; font-weight: 600; } .bili-a11y-footer { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid #eee; font-size: 0.8125rem; } .bili-a11y-footer a { color: #0066cc; text-decoration: underline; } /* --- Applied states on --- */ html.bili-a11y-text-lg { font-size: 112.5% !important; } html.bili-a11y-text-xl { font-size: 125% !important; } html.bili-a11y-high-contrast { filter: contrast(1.4); } html.bili-a11y-high-contrast body { background: #000 !important; color: #fff !important; } html.bili-a11y-high-contrast a { color: #ff0 !important; text-decoration: underline !important; } html.bili-a11y-grayscale { filter: grayscale(100%); } html.bili-a11y-highlight-links a { outline: 2px solid #f87f18 !important; outline-offset: 2px !important; background: rgba(249, 193, 147, 0.2) !important; } html.bili-a11y-readable-font, html.bili-a11y-readable-font * { font-family: Arial, Helvetica, sans-serif !important; } html.bili-a11y-stop-animations *, html.bili-a11y-stop-animations *::before, html.bili-a11y-stop-animations *::after { animation: none !important; transition: none !important; } /* Skip link */ .bili-skip-link { position: absolute; top: -100%; left: 50%; transform: translateX(-50%); z-index: 100000; padding: 0.75rem 1.25rem; background: #0066cc; color: #fff; font-weight: 600; text-decoration: none; border-radius: 0 0 0.5rem 0.5rem; } .bili-skip-link:focus { top: 0; } @media (max-width: 480px) { .bili-a11y-trigger { bottom: 1rem; left: 1rem; width: 2.75rem; height: 2.75rem; } .bili-a11y-panel { bottom: 4.5rem; left: 1rem; } }