/* Ray-Nor-Shine — accessibility widget and display modes. Modes are applied as classes on so they can affect everything. */ /* ---------- display modes ---------- */ html.a11y-text-1 { font-size: 112.5%; } /* 18px base */ html.a11y-text-2 { font-size: 125%; } /* 20px base */ html.a11y-underline a { text-decoration: underline !important; } html.a11y-contrast { --navy: #00193f; --blue: #004a99; --ink: #000000; --muted: #2a2a2a; --sky: #ffffff; --sky-deep: #767676; } html.a11y-contrast body { background: #fff; color: #000; } html.a11y-contrast .lede, html.a11y-contrast p { color: #1a1a1a; } html.a11y-contrast .site-footer, html.a11y-contrast .section--navy { background: #00193f; } html.a11y-contrast a { color: #004a99; } html.a11y-contrast .site-footer a, html.a11y-contrast .section--navy a { color: #d6e6ff; } html.a11y-contrast .btn--primary { background: #004a99; color: #fff; border-color: #004a99; } html.a11y-contrast img, html.a11y-contrast video { filter: contrast(1.08); } html.a11y-no-motion *, html.a11y-no-motion *::before, html.a11y-no-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } /* visible focus everywhere, not just where the theme remembered it */ html.a11y-focus :focus-visible { outline: 3px solid #0B6BC4; outline-offset: 2px; } /* ---------- launcher ---------- */ .a11y-launcher { position: fixed; left: 16px; bottom: 16px; z-index: 2147482500; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: #0A2050; color: #fff; font-size: 1.25rem; line-height: 1; cursor: pointer; box-shadow: 0 8px 20px rgba(10, 32, 80, .32); display: flex; align-items: center; justify-content: center; } .a11y-launcher:hover { background: #132E68; } /* ---------- panel ---------- */ .a11y-panel { position: fixed; left: 16px; bottom: 74px; z-index: 2147482600; width: min(92vw, 320px); background: #fff; color: var(--ink, #14181F); border-radius: 16px; box-shadow: 0 20px 48px rgba(0, 0, 0, .28); border: 1px solid #D5E6F4; padding: 18px; display: none; } .a11y-panel.is-open { display: block; } .a11y-panel h2 { font-family: var(--disp, sans-serif); font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; color: #0A2050; margin: 0 0 12px; } .a11y-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid #E8F2FA; font-size: .9rem; } .a11y-row:first-of-type { border-top: 0; } .a11y-row input { width: 20px; height: 20px; accent-color: #0B6BC4; } .a11y-steps { display: flex; gap: 6px; } .a11y-step { min-width: 40px; min-height: 36px; border-radius: 8px; border: 1.5px solid #D5E6F4; background: #fff; cursor: pointer; font-family: var(--disp, sans-serif); font-size: .8rem; } .a11y-step[aria-pressed="true"] { background: #0B6BC4; color: #fff; border-color: #0B6BC4; } .a11y-reset { margin-top: 14px; width: 100%; min-height: 42px; border-radius: 999px; border: 1.5px solid #0A2050; background: #fff; color: #0A2050; font-family: var(--disp, sans-serif); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; } .a11y-panel a { font-size: .82rem; } /* keep clear of the sticky call bar and the privacy control on phones */ @media (max-width: 720px) { .a11y-launcher { bottom: 68px; } .a11y-panel { bottom: 126px; } } /* While the consent banner is up it would otherwise sit on top of this launcher — the one control someone needing larger text has to reach. */ html.rns-consent-visible .a11y-launcher { bottom: calc(var(--rns-consent-h, 0px) + 40px); } @media (max-width: 720px) { html.rns-consent-visible .a11y-launcher { bottom: calc(var(--rns-consent-h, 0px) + 84px); } } /* the panel the launcher opens has to clear the banner too */ html.rns-consent-visible .a11y-panel { bottom: calc(var(--rns-consent-h, 0px) + 98px); } @media (max-width: 720px) { html.rns-consent-visible .a11y-panel { bottom: calc(var(--rns-consent-h, 0px) + 142px); } }