/* ========================================================= רכיב נגישות — Accessibility widget Compliant with Israeli Standard IS 5568 (WCAG 2.0 AA) ========================================================= */ .a11y-fab { position: fixed; right: 0; top: 50%; transform: translateY(-50%); border-radius: 14px 0 0 14px; z-index: 1000; width: 54px; height: 58px; border: 2px solid #ffffff; border-right: none; background: #2557d6; color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: -6px 10px 30px -8px rgba(0, 0, 0, 0.6); transition: transform .18s ease, background .18s ease; } .a11y-fab:hover { transform: translateY(-50%) scale(1.06); background: #1c47b8; } .a11y-fab svg { width: 32px; height: 32px; } .a11y-panel { position: fixed; right: 64px; top: 50%; transform: translateY(-50%); z-index: 1001; width: 320px; max-width: calc(100vw - 44px); max-height: 78vh; overflow-y: auto; background: #ffffff; color: #16181d; border-radius: 16px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6); padding: 18px; display: none; font-family: var(--ff-body); } .a11y-panel.open { display: block; } .a11y-panel h2 { font-family: var(--ff-body); font-size: 1.15rem; color: #16181d; margin: 0 0 4px; display: flex; align-items: center; justify-content: space-between; } .a11y-panel .a11y-close { background: #eef0f4; border: none; border-radius: 8px; width: 34px; height: 34px; cursor: pointer; color: #16181d; display: grid; place-items: center; } .a11y-panel .a11y-sub { color: #5c6270; font-size: .82rem; margin: 0 0 14px; } .a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .a11y-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; background: #f4f6fa; border: 2px solid #e3e7ee; border-radius: 12px; padding: 12px 8px; cursor: pointer; color: #22252c; font-size: .82rem; font-weight: 600; font-family: var(--ff-body); text-align: center; min-height: 44px; transition: border-color .15s, background .15s; } .a11y-btn svg { width: 24px; height: 24px; color: #2557d6; } .a11y-btn:hover { background: #e9eefb; border-color: #2557d6; } .a11y-btn[aria-pressed="true"] { background: #2557d6; color: #fff; border-color: #2557d6; } .a11y-btn[aria-pressed="true"] svg { color: #fff; } .a11y-reset { width: 100%; margin-top: 12px; background: #16181d; color: #fff; border: none; border-radius: 12px; padding: 12px; font-weight: 700; font-family: var(--ff-body); cursor: pointer; min-height: 44px; } .a11y-reset:hover { background: #33373f; } .a11y-statement-link { display: block; text-align: center; margin-top: 12px; color: #2557d6; font-weight: 600; font-size: .9rem; } /* ===== Applied accessibility states (on ) ===== */ /* Font scaling */ html.a11y-font-1 body { font-size: 19px; } html.a11y-font-2 body { font-size: 21px; } html.a11y-font-3 body { font-size: 24px; } /* Readable font — replace decorative fonts */ html.a11y-readable body, html.a11y-readable h1, html.a11y-readable h2, html.a11y-readable h3, html.a11y-readable .brand, html.a11y-readable .hero h1 { font-family: Arial, "Segoe UI", sans-serif !important; letter-spacing: .02em; } /* Highlight links */ html.a11y-links a { text-decoration: underline !important; text-underline-offset: 3px; color: #ffe08a !important; outline: 1px dashed rgba(255, 224, 138, .6); outline-offset: 2px; } /* Big cursor */ html.a11y-cursor, html.a11y-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' stroke='%23000' stroke-width='1' d='M4 2l14 8-6 1.5L15 18l-3 1-3-6.5L4 15z'/%3E%3C/svg%3E") 4 2, auto; } /* Pause animations */ html.a11y-noanim *, html.a11y-noanim *::before, html.a11y-noanim *::after { animation: none !important; transition: none !important; } /* High / dark contrast */ html.a11y-contrast body { background: #000 !important; } html.a11y-contrast body::before { display: none !important; } html.a11y-contrast .card, html.a11y-contrast .shop, html.a11y-contrast .topic, html.a11y-contrast .cta-band, html.a11y-contrast .site-header, html.a11y-contrast .site-footer, html.a11y-contrast .hero-badge, html.a11y-contrast .eyebrow { background: #000 !important; border-color: #ffff00 !important; } html.a11y-contrast body, html.a11y-contrast p, html.a11y-contrast h1, html.a11y-contrast h2, html.a11y-contrast h3, html.a11y-contrast span, html.a11y-contrast .nav-links a, html.a11y-contrast li, html.a11y-contrast .hero-sub, html.a11y-contrast .section-head p { color: #ffff00 !important; -webkit-text-fill-color: #ffff00 !important; background-image: none !important; } html.a11y-contrast a { color: #00e5ff !important; -webkit-text-fill-color: #00e5ff !important; } html.a11y-contrast .btn-primary, html.a11y-contrast .email-fab { background: #ffff00 !important; color: #000 !important; } /* Light / bright background mode */ html.a11y-light body { background: #ffffff !important; color: #16181d !important; } html.a11y-light body::before { display: none !important; } html.a11y-light .site-header { background: #ffffff !important; } html.a11y-light .card, html.a11y-light .shop, html.a11y-light .topic, html.a11y-light .cta-band, html.a11y-light .site-footer { background: #f4f6fa !important; border-color: #d5dae4 !important; } html.a11y-light body, html.a11y-light p, html.a11y-light h1, html.a11y-light h2, html.a11y-light h3, html.a11y-light span, html.a11y-light li, html.a11y-light .nav-links a, html.a11y-light .hero-sub, html.a11y-light .section-head p, html.a11y-light .brand { color: #16181d !important; -webkit-text-fill-color: #16181d !important; background-image: none !important; } html.a11y-light a { color: #1846b8 !important; -webkit-text-fill-color: #1846b8 !important; } /* Grayscale / monochrome */ html.a11y-grayscale { filter: grayscale(100%); } @media (max-width: 560px) { .a11y-panel { right: 10px; left: 10px; width: auto; max-width: none; } }