/* Accessibility. Markup: layouts/_partials/hooks/body-start.html, hooks/main-before.html Behaviour: assets/js/a11y.js Three things live here: 1. Site-wide fixes — the skip link and visible focus rings. 2. The accessibility widget (floating icon + settings panel). 3. The display modes the panel switches on, keyed off classes on . The site is RTL, so placement uses logical properties: `inset-inline-end` resolves to the left edge, `inset-inline-start` to the right. */ /* ---------------------------------------------------------------- helpers */ /* Visible to screen readers, never painted. */ .a11y-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* The `hidden` attribute has to win over the widget's own display rules. */ .a11y-widget [hidden] { display: none !important; } /* ------------------------------------------------------------- skip link */ .a11y-skip { position: fixed; top: 0; inset-inline-start: 16px; z-index: 10000; padding: 10px 20px; border-radius: 0 0 4px 4px; background: #0b4f9e; color: #fff; font-weight: 700; text-decoration: none; /* Moved out of view rather than hidden, so it keeps its place in the focus order and is the first thing a keyboard user reaches. */ transform: translateY(-100%); } .a11y-skip:focus { transform: translateY(0); } /* The skip link's landing point is an empty span; a focus ring on it would be a stray 0px artefact. */ #main-content:focus, #main-content:focus-visible { outline: none; } /* ----------------------------------------------------------- focus rings */ /* Ananke leaves focus styling to the browser default, which is a thin ring that all but disappears against the black header and footer. */ a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 3px solid #0b4f9e; outline-offset: 2px; } header a:focus-visible, footer a:focus-visible, .a11y-fab:focus-visible { outline: 3px solid #ffdd00; outline-offset: 3px; } /* ------------------------------------------------------------- contrast */ /* Ananke renders in-content links in Tachyons blue (#357edd). Against the near-white page background that is 3.7:1 — under the 4.5:1 WCAG AA asks of body text. Same hue, darkened until it passes (7.2:1). */ .nested-links a { color: #0b4f9e; } /* ---------------------------------------------------- the floating button */ /* Everything from here to the display modes is sized in px, not rem, and that is deliberate. The text-size control works by setting a root font-size, so a rem-sized panel would grow along with the page — the controls shifting under the pointer as you press them, and the panel eventually taller than the viewport. px keeps the widget a fixed anchor while the page behind it scales. px still responds to browser zoom, which is what actually matters here. */ .a11y-fab { position: fixed; bottom: 16px; inset-inline-end: 16px; z-index: 9999; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: #0b4f9e; color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); cursor: pointer; } .a11y-fab:hover { background: #093d7a; } .a11y-icon { display: block; width: 28px; height: 28px; fill: currentColor; } /* ------------------------------------------------------------ the panel */ .a11y-panel { position: fixed; bottom: 72px; inset-inline-end: 16px; z-index: 9999; width: 248px; max-width: calc(100vw - 32px); max-height: calc(100vh - 104px); overflow-y: auto; padding: 12px; border: 2px solid #0b4f9e; border-radius: 8px; background: #fff; color: #1a1a1a; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); font-size: 15px; text-align: start; } .a11y-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .a11y-panel-title { margin: 0; font-size: 16px; font-weight: 700; } .a11y-close { padding: 2px 8px; border: 0; background: none; color: inherit; font-size: 24px; line-height: 1; cursor: pointer; } .a11y-btn { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; margin-top: 6px; padding: 8px 10px; border: 1px solid #5b6470; border-radius: 4px; background: #fff; color: #1a1a1a; font: inherit; font-size: 15px; text-align: start; cursor: pointer; } .a11y-btn:hover { background: #eaeff5; } /* A checkmark that appears only when the setting is on, so the off state shows no marker at all. The space it needs is reserved either way, so the label does not jump as it is toggled — and the on state is not signalled by colour alone. */ .a11y-btn[data-a11y-toggle]::before { content: "\2713"; flex: none; width: 14px; font-weight: 700; visibility: hidden; } .a11y-btn[aria-pressed="true"] { border-color: #0b4f9e; background: #0b4f9e; color: #fff; font-weight: 700; } .a11y-btn[aria-pressed="true"]::before { visibility: visible; } .a11y-btn[aria-disabled="true"] { opacity: 0.45; cursor: default; } .a11y-size { display: flex; align-items: center; gap: 6px; margin-top: 10px; } .a11y-btn-size { flex: none; width: auto; min-width: 44px; margin-top: 0; justify-content: center; font-size: 16px; font-weight: 700; } .a11y-size-value { flex: 1; font-size: 13px; text-align: center; } .a11y-btn-reset { margin-top: 10px; justify-content: center; } .a11y-statement { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid #ccd2d9; color: #0b4f9e; font-size: 14px; } /* ------------------------------------------------------- display modes */ /* Every mode is scoped to `body > :not(.a11y-widget):not(.a11y-skip)`, i.e. to the page but not to the widget itself — a high-contrast or greyscale pass over its own controls would make them harder to use, not easier. The widget and the skip link are direct children of , which is what makes that one-level exclusion enough. Text scaling is not here: it is a root font-size set inline by a11y.js, which every Tachyons size follows because they are all rem-based. */ html.a11y-contrast, html.a11y-contrast body { background: #000 !important; color: #fff !important; } html.a11y-contrast body > :not(.a11y-widget):not(.a11y-skip), html.a11y-contrast body > :not(.a11y-widget):not(.a11y-skip) * { background-color: #000 !important; background-image: none !important; color: #fff !important; border-color: #fff !important; box-shadow: none !important; text-shadow: none !important; } html.a11y-contrast body > :not(.a11y-widget):not(.a11y-skip) a, html.a11y-contrast body > :not(.a11y-widget):not(.a11y-skip) a * { color: #ffdd00 !important; text-decoration: underline !important; } html.a11y-grayscale body > :not(.a11y-widget):not(.a11y-skip) { filter: grayscale(100%); } html.a11y-links body > :not(.a11y-widget):not(.a11y-skip) a { outline: 2px solid currentColor; outline-offset: 2px; font-weight: 700 !important; text-decoration: underline !important; text-decoration-thickness: 2px; text-underline-offset: 0.15em; } html.a11y-readable body > :not(.a11y-widget):not(.a11y-skip), html.a11y-readable body > :not(.a11y-widget):not(.a11y-skip) * { font-family: Arial, "Segoe UI", Tahoma, sans-serif !important; font-style: normal !important; letter-spacing: normal !important; } html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* Respect the operating-system setting without anyone having to find the widget first. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }