/* kalWork — accessibility toolbar + the adjustments it applies. Loaded on public pages alongside a11y.js. The adjustments are driven by classes on , so they layer over the site's own stylesheets without either knowing about the other. */ /* ─── Skip link (WCAG 2.4.1) ─────────────────────────────── Present in the DOM for keyboard users, off-screen until focused. */ .a11y-skip { position: fixed; top: -100px; right: 16px; z-index: 2147483647; padding: 12px 20px; background: #6366f1; color: #fff; border-radius: 0 0 12px 12px; font-weight: 700; text-decoration: none; transition: top 0.18s ease; } .a11y-skip:focus { top: 0; outline: 3px solid #fff; outline-offset: 2px; } /* ─── A visible focus ring everywhere ────────────────────── :focus-visible only fires for keyboard/AT navigation, so this costs mouse users nothing. Without it, tabbing through the site is invisible. */ :focus-visible { outline: 3px solid #a78bfa !important; outline-offset: 2px !important; border-radius: 4px; } .a11y-contrast :focus-visible { outline-color: #ffff00 !important; } /* ─── The floating button ────────────────────────────────── Bottom-left: bottom-right is where kalWork's own bottom nav and toasts live, and covering a primary control to offer accessibility would be its own accessibility problem. */ .a11y-btn { position: fixed; bottom: 18px; left: 18px; z-index: 2147483000; width: 52px; height: 52px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.35); background: #4f46e5; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,0.4); display: grid; place-items: center; transition: transform 0.15s ease, background 0.15s ease; } .a11y-btn:hover { background: #6366f1; transform: scale(1.06); } /* ─── The panel ──────────────────────────────────────────── Fixed, not absolute: it must stay reachable no matter where the page is scrolled, and must not be trapped by an ancestor's overflow. */ .a11y-panel { position: fixed; bottom: 82px; left: 18px; z-index: 2147483000; width: min(310px, calc(100vw - 36px)); max-height: min(78vh, 620px); overflow-y: auto; padding: 16px; background: #14142f; color: #fff; border: 1px solid rgba(255,255,255,0.22); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,0.6); font-family: inherit; font-size: 14px; text-align: right; direction: rtl; } .a11y-panel[hidden] { display: none; } .a11y-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .a11y-head h2 { font-size: 17px; font-weight: 800; margin: 0; color: #fff; } .a11y-x { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.06); color: #fff; font-size: 14px; cursor: pointer; } .a11y-x:hover { background: rgba(255,255,255,0.16); } .a11y-group { margin-bottom: 14px; } .a11y-label { display: block; font-size: 12.5px; color: rgba(255,255,255,0.6); margin-bottom: 7px; font-weight: 600; } .a11y-row { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; } .a11y-val { font-weight: 800; min-width: 52px; text-align: center; } .a11y-opt { flex: 1 1 auto; min-height: 40px; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.06); color: #fff; font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; } .a11y-opt:hover { background: rgba(255,255,255,0.15); } .a11y-opt[aria-pressed="true"] { background: #4f46e5; border-color: #818cf8; } .a11y-toggle { width: 100%; min-height: 44px; /* WCAG 2.5.5 target size */ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; padding: 10px 13px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.06); color: #fff; font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; text-align: right; } .a11y-toggle:hover { background: rgba(255,255,255,0.15); } .a11y-toggle[aria-pressed="true"] { background: #4f46e5; border-color: #818cf8; } .a11y-state { font-size: 11.5px; opacity: 0.85; } .a11y-reset { width: 100%; min-height: 42px; border-radius: 10px; border: 1px solid rgba(248,113,113,0.5); background: rgba(248,113,113,0.14); color: #fecaca; font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; } .a11y-reset:hover { background: rgba(248,113,113,0.3); color: #fff; } .a11y-statement { display: block; margin-top: 11px; text-align: center; color: #c7d2fe; font-size: 13px; text-decoration: underline; } /* ═══ The adjustments themselves ═══════════════════════════ */ /* Text size. The obvious approach — scaling the root font-size — does nothing here: all 179 font-size declarations in this site's CSS are in px, so nothing inherits from the root. The button appeared dead because it was. zoom on scales the rendered result whatever the units, which is also what someone pressing "א+" expects: everything gets bigger. */ html.a11y-scaled body { zoom: var(--a11y-font-scale, 1); } /* The toolbar sits inside body and would grow with it. Cancelling the zoom keeps the panel a predictable size and stops it overflowing the screen at 150%, which would put the controls out of reach of the person who most needs them. */ html.a11y-scaled .a11y-btn, html.a11y-scaled .a11y-panel, html.a11y-scaled .a11y-skip { zoom: calc(1 / var(--a11y-font-scale, 1)); } /* High contrast — near-black on white, and any decorative background removed so text always sits on a solid field. */ html.a11y-contrast, html.a11y-contrast body { background: #000 !important; color: #fff !important; } html.a11y-contrast * { background-image: none !important; text-shadow: none !important; box-shadow: none !important; color: #fff !important; border-color: #fff !important; } html.a11y-contrast a, html.a11y-contrast a * { color: #ffff00 !important; text-decoration: underline !important; } html.a11y-contrast button, html.a11y-contrast .btn, html.a11y-contrast input, html.a11y-contrast select, html.a11y-contrast textarea { background: #000 !important; border: 2px solid #fff !important; } /* The decorative blobs and grid have no meaning and only reduce contrast. */ html.a11y-contrast .bg-blobs, html.a11y-contrast .blob, html.a11y-contrast .grid-overlay { display: none !important; } /* Colour inversion, for people who need light-on-dark reversed. Images and video are inverted back so photos and logos still look like themselves. */ html.a11y-invert { filter: invert(1) hue-rotate(180deg); background: #fff; } html.a11y-invert img, html.a11y-invert video, html.a11y-invert canvas, html.a11y-invert svg, html.a11y-invert .a11y-panel, html.a11y-invert .a11y-btn { filter: invert(1) hue-rotate(180deg); } html.a11y-links a { text-decoration: underline !important; text-underline-offset: 3px; } html.a11y-readable body, html.a11y-readable body * { font-family: Arial, "Segoe UI", sans-serif !important; letter-spacing: 0.02em !important; line-height: 1.8 !important; word-spacing: 0.08em !important; } /* Motion. Also honoured automatically for anyone with the OS setting on. */ html.a11y-stopmotion *, html.a11y-stopmotion *::before, html.a11y-stopmotion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } html.a11y-bigcursor, html.a11y-bigcursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M6 2l30 20-13 3 7 14-6 3-7-14-11 8z' fill='%23000' stroke='%23fff' stroke-width='2.5'/%3E%3C/svg%3E") 4 2, auto !important; } /* The toolbar must stay usable while its own adjustments are active. */ html.a11y-contrast .a11y-panel { background: #000 !important; border-color: #fff !important; } html.a11y-contrast .a11y-btn { background: #000 !important; border: 2px solid #ffff00 !important; } @media (max-width: 720px) { .a11y-btn { width: 46px; height: 46px; font-size: 23px; bottom: 76px; } .a11y-panel { bottom: 130px; } } @media print { .a11y-btn, .a11y-panel, .a11y-skip { display: none !important; } }