/* =============================== Accessibility Toolbar Widget (כלי נגישות) ================================= */ :root { --a11y-color: #14356b; --a11y-color-hover: #0e2850; } #a11yToggle { position: fixed; top: 130px; left: 0; z-index: 10001; width: 56px; height: 56px; background: var(--a11y-color); color: #fff; border: none; border-radius: 0 10px 10px 0; display: flex; align-items: center; justify-content: center; font-size: 28px; line-height: 1; cursor: pointer; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); transition: background 0.25s ease, transform 0.25s ease; -webkit-tap-highlight-color: transparent; } #a11yToggle:hover, #a11yToggle:focus-visible { background: var(--a11y-color-hover); transform: scale(1.05); } #a11yToggle:focus-visible { outline: 3px solid #00b4d8; outline-offset: 2px; } #a11yToggle i { pointer-events: none; } .a11y-panel { position: fixed; top: 186px; left: 0; z-index: 10000; width: 280px; max-width: calc(100vw - 12px); max-height: calc(100vh - 200px); background: #ffffff; border-radius: 0 12px 12px 0; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.25); direction: rtl; text-align: right; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; overflow-y: auto; overflow-x: hidden; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease; } .a11y-panel.open { opacity: 1; visibility: visible; transform: translateY(0); } .a11y-panel-header { background: var(--a11y-color); color: #fff; padding: 14px 18px; font-weight: 700; font-size: 1.05rem; } .a11y-panel-list { list-style: none; margin: 0; padding: 6px 0; } .a11y-panel-list li { border-bottom: 1px solid #eef0f2; } .a11y-panel-list li:last-child { border-bottom: none; } .a11y-option { width: 100%; display: flex; align-items: center; gap: 12px; background: none; border: none; padding: 12px 18px; font-size: 0.95rem; color: var(--foreground, #1a1a1a); cursor: pointer; text-align: right; transition: background 0.2s ease, color 0.2s ease; } .a11y-option i { font-size: 1.1rem; color: var(--a11y-color); width: 20px; text-align: center; flex-shrink: 0; } .a11y-option:hover { background: #f2f6fb; } .a11y-option[aria-pressed="true"] { background: rgba(20, 53, 107, 0.08); font-weight: 600; } .a11y-option[aria-pressed="true"] i { color: var(--a11y-color-hover); } .a11y-reset-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; background: #fbeceb; border: none; border-top: 1px solid #eef0f2; padding: 14px 18px; font-size: 0.95rem; font-weight: 700; color: #b3261e; cursor: pointer; transition: background 0.2s ease; } .a11y-reset-btn i { color: #b3261e; font-size: 1.1rem; } .a11y-reset-btn:hover { background: #f6d9d7; } @media (max-width: 480px) { #a11yToggle { top: 110px; width: 48px; height: 48px; font-size: 22px; } .a11y-panel { top: 158px; width: 250px; } } /* =============================== Applied accessibility states (added to ) ================================= */ html.a11y-grayscale { filter: grayscale(100%); } html.a11y-invert { filter: invert(100%) hue-rotate(180deg); } html.a11y-invert img:not(.footer-logo), html.a11y-invert video, html.a11y-invert svg { filter: invert(100%) hue-rotate(180deg); } html.a11y-contrast body { background: #000 !important; color: #fff !important; } html.a11y-contrast a, html.a11y-contrast h1, html.a11y-contrast h2, html.a11y-contrast h3, html.a11y-contrast h4, html.a11y-contrast p, html.a11y-contrast span, html.a11y-contrast li { color: #fff !important; } html.a11y-contrast .card, html.a11y-contrast .practice-card, html.a11y-contrast .container-content, html.a11y-contrast section { background: #000 !important; border-color: #444 !important; } html.a11y-contrast header, html.a11y-contrast .header-container, html.a11y-contrast .mobile-nav { background: #000 !important; } html.a11y-contrast .nav-links a, html.a11y-contrast .mobile-nav-content a, html.a11y-contrast .mobile-menu-btn { color: #fff !important; } .logo-img-alt { display: none; } /* White_Logo.png has more transparent padding baked into the file than logo.png, so at the same box height it LOOKS smaller. Scaling it up compensates. The extra-specific selector (.logo img.logo-img-alt) is needed to reliably beat any ".logo img" rule defined elsewhere on the site — a plain ".logo-img-alt" selector is LESS specific than ".logo img" and can lose even with !important. */ .logo img.logo-img-alt { height: 76px !important; width: auto !important; } @media (min-width: 992px) { .logo img.logo-img-alt { height: 109px !important; /* 80px desktop default × 1.36 padding-compensation ratio */ } } @media (max-width: 480px) { .logo img.logo-img-alt { height: 64px !important; } } html.a11y-contrast .logo-img-default, html.a11y-invert .logo-img-default { display: none; } html.a11y-contrast .logo-img-alt, html.a11y-invert .logo-img-alt { display: inline-block; } html.a11y-light-bg body, html.a11y-light-bg section, html.a11y-light-bg .card, html.a11y-light-bg .practice-card { background: #ffffff !important; color: #000000 !important; } html.a11y-light-bg a, html.a11y-light-bg h1, html.a11y-light-bg h2, html.a11y-light-bg h3, html.a11y-light-bg p, html.a11y-light-bg span, html.a11y-light-bg li { color: #000000 !important; } html.a11y-underline-links a { text-decoration: underline !important; text-underline-offset: 3px; } html.a11y-readable-font body, html.a11y-readable-font p, html.a11y-readable-font span:not([class*="bi-"]):not([class*="fa-"]), html.a11y-readable-font li, html.a11y-readable-font a, html.a11y-readable-font h1, html.a11y-readable-font h2, html.a11y-readable-font h3, html.a11y-readable-font h4, html.a11y-readable-font h5, html.a11y-readable-font h6, html.a11y-readable-font label, html.a11y-readable-font button, html.a11y-readable-font input, html.a11y-readable-font textarea { font-family: Arial, Helvetica, sans-serif !important; letter-spacing: 0.02em; line-height: 1.8 !important; } /* Icon fonts (Bootstrap Icons, Font Awesome) are intentionally left untouched above — their own stylesheets already set the correct font-family on the right element, and overriding it here (even to "inherit") breaks the glyphs. */