/* Shared toggle-switch component, reused by the accessibility panel and the cookie-consent settings panel (same visual language, one definition). */ .basarela-toggle { position: relative; display: inline-flex; align-items: center; width: 44px; height: 24px; flex-shrink: 0; border-radius: var(--radius-pill); background: var(--color-border); border: 0; cursor: pointer; transition: background-color .15s ease; } .basarela-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 .15s ease; } .basarela-toggle[aria-checked="true"] { background: var(--color-coral); } .basarela-toggle[aria-checked="true"]::before { inset-inline-start: 23px; } .basarela-toggle[disabled] { cursor: not-allowed; opacity: .6; } .basarela-toggle:focus-visible { outline: 3px solid var(--color-orange); outline-offset: 2px; } .basarela-toggle-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-border); } .basarela-toggle-row:last-of-type { border-bottom: 0; } .basarela-toggle-row__text h3, .basarela-toggle-row__text strong { display: block; font-size: .95rem; margin: 0 0 2px; } .basarela-toggle-row__text p { margin: 0; font-size: .8rem; color: var(--color-muted); line-height: 1.5; } /* Accessibility widget */ .a11y-widget { position: fixed; inset-inline-start: var(--space-md); bottom: var(--space-md); z-index: 9600; } .a11y-widget__trigger { width: 52px; height: 52px; border-radius: 50%; background: var(--color-coral); color: #fff; border: 0; display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-floating); transition: transform .15s ease, background-color .15s ease; } .a11y-widget__trigger:hover, .a11y-widget__trigger:focus-visible { background: var(--color-coral-dark); transform: scale(1.05); } .a11y-widget__icon { width: 26px; height: 26px; } .a11y-panel { position: fixed; inset-inline-start: var(--space-md); bottom: calc(52px + var(--space-md) * 2); z-index: 9601; width: min(360px, calc(100vw - var(--space-md) * 2)); max-height: min(640px, calc(100vh - 140px)); overflow-y: auto; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-floating); border: 1px solid var(--color-border); padding: var(--space-md); } .a11y-panel[hidden] { display: none; } .a11y-panel__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-xs); } .a11y-panel__title { font-size: 1.1rem; margin: 0; font-weight: 700; } .a11y-panel__close { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--color-surface); color: var(--color-ink); 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-border); } .a11y-panel__intro { font-size: .85rem; color: var(--color-muted); margin: 0 0 var(--space-sm); } .a11y-panel__group-title { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-muted); margin: var(--space-md) 0 var(--space-xs); } .a11y-panel__group-title:first-of-type { margin-top: 0; } .a11y-panel__action { width: 100%; margin-top: var(--space-md); } /* Effects applied to when a preference is active */ html.a11y-large-text { font-size: 112.5%; } html.a11y-larger-text { font-size: 125%; } 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-primary) !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-orange) !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(255, 122, 0, .16); border-top: 2px solid var(--color-orange); border-bottom: 2px solid var(--color-orange); 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-sm); bottom: var(--space-sm); } .a11y-panel { inset-inline-start: var(--space-sm); bottom: calc(52px + var(--space-sm) * 2); } }