/* Shared toggle-switch component, reused by the accessibility panel and the cookie-consent settings panel (same visual language, one definition). */ .pref-toggle { position: relative; display: inline-flex; align-items: center; width: 44px; height: 24px; flex-shrink: 0; border-radius: var(--radius-pill); background: var(--color-neutral-200); border: 0; cursor: pointer; transition: background-color var(--motion-standard) var(--motion-ease); } .pref-toggle::before { content: ""; position: absolute; inset-inline-start: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: inset-inline-start var(--motion-standard) var(--motion-ease); } .pref-toggle[aria-checked="true"] { background: var(--color-teal-600); } .pref-toggle[aria-checked="true"]::before { inset-inline-start: 23px; } .pref-toggle[disabled] { cursor: not-allowed; opacity: .6; } .pref-toggle:focus-visible { outline: var(--focus-outline); outline-offset: 2px; } .pref-toggle-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-neutral-200); } .pref-toggle-row:last-of-type { border-bottom: 0; } .pref-toggle-row__text strong { display: block; font-size: .95rem; margin: 0 0 2px; } .pref-toggle-row__text p { margin: 0; font-size: .8rem; color: var(--color-text-secondary); line-height: 1.5; } /* Accessibility widget */ .a11y-widget { position: fixed; inset-inline-start: var(--space-4); bottom: var(--space-4); z-index: 9600; } .a11y-widget__trigger { width: 52px; height: 52px; border-radius: 50%; background: var(--color-teal-600); color: #fff; border: 0; display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-header); transition: transform var(--motion-standard) var(--motion-ease), background-color var(--motion-standard) var(--motion-ease); } .a11y-widget__trigger:hover, .a11y-widget__trigger:focus-visible { background: var(--color-teal-700); transform: scale(1.05); } .a11y-widget__icon { width: 26px; height: 26px; } .a11y-panel { position: fixed; inset-inline-start: var(--space-4); bottom: calc(52px + var(--space-4) * 2); z-index: 9601; width: min(360px, calc(100vw - var(--space-4) * 2)); max-height: min(640px, calc(100vh - 140px)); overflow-y: auto; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-header); border: 1px solid var(--color-neutral-200); padding: var(--space-4); } .a11y-panel[hidden] { display: none; } .a11y-panel__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); } .a11y-panel__title { font-size: 1.1rem; margin: 0; font-weight: var(--fw-bold); } .a11y-panel__close { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--color-neutral-100); color: var(--color-text-primary); cursor: pointer; font-size: 1.1rem; line-height: 1; display: grid; place-items: center; } .a11y-panel__close:hover, .a11y-panel__close:focus-visible { background: var(--color-neutral-200); } .a11y-panel__intro { font-size: .85rem; color: var(--color-text-secondary); margin: 0 0 var(--space-3); } .a11y-panel__group-title { font-size: .75rem; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-secondary); margin: var(--space-4) 0 var(--space-2); } .a11y-panel__group-title:first-of-type { margin-top: 0; } .a11y-panel__action { width: 100%; margin-top: var(--space-4); } /* Effects applied to when a preference is active */ html.a11y-large-text { font-size: 112.5%; } html.a11y-high-contrast { filter: contrast(1.25); } html.a11y-high-contrast body { background: #fff; color: #000; } html.a11y-high-contrast a { color: #00248f !important; } html.a11y-grayscale { filter: grayscale(1); } html.a11y-underline-links a { text-decoration: underline !important; text-underline-offset: 3px; } html.a11y-readable-font body { font-family: 'Lexend', var(--font-family-base) !important; } html.a11y-line-spacing body { line-height: 2 !important; } html.a11y-letter-spacing body { letter-spacing: .04em !important; } html.a11y-stop-animations *, html.a11y-stop-animations *::before, html.a11y-stop-animations *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } html.a11y-large-cursor, html.a11y-large-cursor * { cursor: url('data:image/svg+xml;utf8,') 4 4, auto !important; } html.a11y-strong-focus *:focus-visible { outline: 4px solid var(--color-teal-700) !important; outline-offset: 3px !important; } /* Reading guide: a bar that follows the pointer/keyboard focus, dimming the rest */ .a11y-reading-guide-bar { position: fixed; inset-inline: 0; height: 48px; background: rgba(0, 183, 167, .16); border-top: 2px solid var(--color-teal-600); border-bottom: 2px solid var(--color-teal-600); pointer-events: none; z-index: 9599; display: none; } html.a11y-reading-guide .a11y-reading-guide-bar { display: block; } @media (max-width: 639px) { .a11y-widget { inset-inline-start: var(--space-3); bottom: var(--space-3); } .a11y-panel { inset-inline-start: var(--space-3); bottom: calc(52px + var(--space-3) * 2); } }