/* * Accessibility widget * * - High contrast forces white backgrounds + black text + black * outlines (hero images are preserved). * - Colour saturation is a CSS filter on the root element * (the only place a filter does not break position:fixed). * - Text size is a page zoom on . */ /* Colour saturation filter */ html.a11y-filter-active { filter: saturate(var(--a11y-saturate, 1)); } /* High contrast: white background, black text, black outlines */ html.a11y-contrast-high body, html.a11y-contrast-high body * { background-color: #fff !important; color: #000 !important; border-color: #000 !important; text-shadow: none !important; box-shadow: none !important; } /* Keep real media visible */ html.a11y-contrast-high img, html.a11y-contrast-high video, html.a11y-contrast-high svg, html.a11y-contrast-high iframe { background-color: transparent !important; } /* Give content buttons/links a clear black outline */ html.a11y-contrast-high a.readon, html.a11y-contrast-high button:not(.a11y-opt):not(.a11y-reset-all):not(.a11y-panel__close), html.a11y-contrast-high .btn, html.a11y-contrast-high input[type="submit"] { border: 2px solid #000 !important; } /* Hero banner: keep the background image */ html.a11y-contrast-high .rs-banner, html.a11y-contrast-high .rs-banner * { background-color: transparent !important; color: #fff !important; border-color: #fff !important; } html.a11y-contrast-high .rs-banner a.readon { border: 2px solid #fff !important; } /* Floating buttons */ html.a11y-contrast-high .floating-btns .fb, html.a11y-contrast-high .floating-btns .fb * { color: #000 !important; } html.a11y-contrast-high .floating-btns .fb { border: 2px solid #000 !important; } html.a11y-contrast-high #a11yPanel .a11y-panel__inner { border: 2px solid #000 !important; } html.a11y-contrast-high #a11yPanel .a11y-panel__header, html.a11y-contrast-high #a11yPanel .a11y-panel__header * { background-color: #000 !important; color: #fff !important; } html.a11y-contrast-high #a11yPanel .a11y-opt[aria-pressed="true"], html.a11y-contrast-high #a11yPanel .a11y-opt[aria-pressed="true"] *, html.a11y-contrast-high #a11yPanel .a11y-opt.is-active { background-color: #000 !important; color: #fff !important; border-color: #000 !important; } .a11y-panel { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 1, 57, 0.55); animation: a11y-fade 0.2s ease-out; } .a11y-panel.is-open { display: flex; } @keyframes a11y-fade { from { opacity: 0; } to { opacity: 1; } } .a11y-panel__inner { width: 100%; max-width: 440px; background: #fff; color: #1b1b1b; border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); overflow: hidden; animation: a11y-pop 0.25s ease-out; } @keyframes a11y-pop { from { transform: translateY(12px) scale(0.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } .a11y-panel__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--tp-theme-primary, #000139); color: #fff; } .a11y-panel__title { font-size: 20px; margin: 0; color: #fff; display: flex; align-items: center; gap: 8px; } .a11y-panel__close { background: transparent; border: 0; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: background 0.2s ease; } .a11y-panel__close:hover, .a11y-panel__close:focus-visible { background: rgba(255, 255, 255, 0.2); } .a11y-panel__body { padding: 20px; display: flex; flex-direction: column; gap: 22px; } .a11y-group__label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 10px; color: #1b1b1b; } .a11y-group__options { display: flex; flex-wrap: wrap; gap: 8px; } .a11y-group__options--stepper { align-items: center; } .a11y-opt { flex: 1 1 auto; min-width: 70px; padding: 10px 14px; border: 2px solid #d7d7e2; background: #f6f6fb; color: #1b1b1b; border-radius: 8px; font-size: 15px; font-weight: 500; gap: 1rem; cursor: pointer; transition: all 0.18s ease; } .a11y-opt:hover, .a11y-opt:focus-visible { border-color: var(--tp-theme-secondary, #25b2ff); } .a11y-opt[aria-pressed="true"], .a11y-opt.is-active { background: var(--tp-theme-primary, #000139); border-color: var(--tp-theme-primary, #000139); color: #fff; } .a11y-opt--icon { flex: 0 0 auto; min-width: 52px; font-weight: 700; } .a11y-opt--reset { flex: 0 0 auto; min-width: auto; } .a11y-opt:disabled, .a11y-opt[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; } .a11y-stepper__value { flex: 1 1 auto; text-align: center; font-weight: 600; font-size: 15px; min-width: 60px; } .a11y-panel__footer { padding: 16px 20px; border-top: 1px solid #eee; display: flex; justify-content: flex-end; } .a11y-reset-all { background: transparent; border: 2px solid #d7d7e2; color: #1b1b1b; padding: 9px 16px; border-radius: 8px; font-size: 15px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all 0.18s ease; } .a11y-reset-all:hover, .a11y-reset-all:focus-visible { border-color: var(--tp-theme-secondary, #25b2ff); color: var(--tp-theme-primary, #000139); } /* Focus visibility for the trigger button */ .accessibility-btn { border: 0; cursor: pointer; font-family: inherit; text-align: left; }