/* Accessibility toolbar (סרגל נגישות) — shared by the public pages and the admin. Preferences are classes on ; the panel is a real dialog reachable by keyboard. */ .a11y-fab { position: fixed; inset-inline-end: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 60; width: 48px; height: 48px; border-radius: 50%; border: 0; background: #6d28d9; color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 20px -8px rgba(109, 40, 217, 0.7); } .a11y-fab svg { width: 26px; height: 26px; } .a11y-fab:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px rgba(109, 40, 217, 0.6); } body.has-dock .a11y-fab { bottom: calc(var(--dock-h, 96px) + 10px); } .a11y-panel { position: fixed; inset-inline-end: 12px; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); z-index: 61; width: min(320px, calc(100vw - 24px)); padding: 14px; border-radius: 18px; background: var(--surface, #fff); color: var(--ink, #0f172a); border: 1px solid var(--hairline, rgba(0, 0, 0, 0.08)); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.35); font-family: inherit; font-size: 0.875rem; } .a11y-panel[hidden] { display: none; } body.has-dock .a11y-panel { bottom: calc(var(--dock-h, 96px) + 68px); } .a11y-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; } .a11y-head h2 { margin: 0; font-size: 1rem; font-weight: 700; } .a11y-close { width: 44px; height: 44px; border-radius: 12px; border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 1.375rem; line-height: 1; } .a11y-close:hover { background: var(--surface-3, #f1f5f9); } .a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .a11y-btn { min-height: 48px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--hairline, rgba(0, 0, 0, 0.08)); background: var(--surface-2, #f8fafc); color: inherit; font: inherit; font-weight: 600; cursor: pointer; text-align: center; } .a11y-btn[aria-pressed="true"] { background: var(--brand-cta, #6d28d9); color: #fff; border-color: transparent; } /* Theme tokens with fallbacks: the fixed violet was 2.5:1 on the dark panel. */ .a11y-btn:focus-visible, .a11y-close:focus-visible, .a11y-link:focus-visible { outline: 3px solid var(--brand, #6d28d9); outline-offset: 2px; } .a11y-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; font-size: 0.75rem; } .a11y-link { color: var(--brand-text, #6d28d9); font-weight: 700; text-decoration: underline; padding: 8px 0; } /* ---- preference classes on ---- */ html.a11y-font-1 { font-size: 112.5%; } html.a11y-font-2 { font-size: 125%; } html.a11y-font-3 { font-size: 150%; } /* High contrast re-points the shared design tokens, so every surface (cards, inputs, chips) follows — not just the body — in both the public page and the console. Black ground, white text, yellow controls, white borders. */ html.a11y-contrast { --paper: #000 !important; --paper-alt: #000 !important; --surface: #000 !important; --surface-2: #000 !important; --surface-3: #111 !important; --ink: #fff !important; --ink-soft: #fff !important; --muted: #e6e6e6 !important; --on-accent: #000 !important; --line: #fff !important; --hairline: #fff !important; --glass: #000 !important; --brand: #ffff66 !important; --brand-text: #ffff66 !important; --brand-light: #ffff66 !important; --brand-cta: #000 !important; --brand-soft: #111 !important; --brand-soft-2: #222 !important; --brand-ring: #ffff66 !important; --brand-glow: transparent !important; --brand-gradient: none !important; --ok: #7fff7f !important; --ok-text: #7fff7f !important; --ok-soft: #000 !important; --ok-border: #7fff7f !important; --danger: #ff8080 !important; --danger-soft: #000 !important; --warn-soft: #000 !important; --warn-text: #ffd27f !important; --star: #ffff66 !important; --cover-wash: rgba(0, 0, 0, 0.6) !important; --ambient-1: transparent !important; --ambient-2: transparent !important; --bar-bg: #000 !important; --avatar-frame: #000 !important; --glass: #000 !important; --aurora-opacity: 0 !important; } html.a11y-contrast, html.a11y-contrast body { background: #000 !important; color: #fff !important; } html.a11y-contrast * { background-image: none !important; box-shadow: none !important; text-shadow: none !important; } /* Gradient-clipped text has no gradient here: the wordmark falls back to a solid, readable fill. */ html.a11y-contrast .zbar-name, html.a11y-contrast .wordmark { background: none !important; color: #ffff66 !important; -webkit-text-fill-color: #ffff66 !important; } html.a11y-contrast .zbar, html.a11y-contrast .dock, html.a11y-contrast .notice { background: #000 !important; border-color: #fff !important; } html.a11y-contrast .zbar-sub, html.a11y-contrast .notice p { color: #fff !important; } html.a11y-contrast a, html.a11y-contrast button { color: #ffff66 !important; } html.a11y-contrast .btn, html.a11y-contrast .input, html.a11y-contrast .select, html.a11y-contrast .textarea, html.a11y-contrast .card, html.a11y-contrast .linkrow, html.a11y-contrast .promo, html.a11y-contrast .gbtn, html.a11y-contrast .dg, html.a11y-contrast .dw, html.a11y-contrast .link, html.a11y-contrast .chip, html.a11y-contrast .panel, html.a11y-contrast .a11y-fab, html.a11y-contrast .a11y-panel { background: #000 !important; color: #ffff66 !important; border: 2px solid #ffff66 !important; } html.a11y-contrast .card, html.a11y-contrast .panel, html.a11y-contrast .linkrow, html.a11y-contrast .link .text, html.a11y-contrast .input, html.a11y-contrast .select, html.a11y-contrast .textarea { color: #fff !important; } html.a11y-contrast .btn.primary, html.a11y-contrast .gbtn, html.a11y-contrast .dg, html.a11y-contrast .promo { background: #ffff66 !important; color: #000 !important; } html.a11y-contrast .btn.primary *, html.a11y-contrast .gbtn *, html.a11y-contrast .dg *, html.a11y-contrast .promo * { color: #000 !important; } html.a11y-contrast *:focus-visible, html.a11y-contrast .input:focus, html.a11y-contrast .select:focus, html.a11y-contrast .textarea:focus { outline: 3px solid #ffff66 !important; outline-offset: 2px !important; } html.a11y-contrast img { filter: contrast(1.2); } html.a11y-grayscale { filter: grayscale(1); } html.a11y-underline a { text-decoration: underline !important; } html.a11y-readable, html.a11y-readable body, html.a11y-readable * { font-family: Arial, "Segoe UI", sans-serif !important; letter-spacing: 0.02em; } html.a11y-nomotion *, html.a11y-nomotion *::before, html.a11y-nomotion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } html.a11y-nomotion .rv-in { opacity: 1 !important; transform: none !important; } html.a11y-focus *:focus { outline: 4px solid #ff8a00 !important; outline-offset: 3px !important; } html.a11y-cursor, html.a11y-cursor * { cursor: url("data:image/svg+xml;utf8,") 4 2, auto !important; }