/* Graviton Accessibility Widget - OneTap-like full-screen overlay UI (black theme) - No dependencies - Applies accessibility changes via classes on and CSS variables */ :root { --a11y-font-scale: 1; --a11y-filter: none; --a11y-line-height: 1.6; --a11y-letter-spacing: 0px; --a11y-font-weight: 400; } /* IMPORTANT: Do not change site typography by default. These rules only activate when JS adds the corresponding html.* classes. */ /* Font size scaling is applied via JS to `.main-content` elements (inline styles), because the site uses many px font sizes and zoom/transform can distort layout. */ /* Apply visual filters only when enabled. Use `body > *` so it also affects site headers/footers that aren’t wrapped in `.main-content`, while excluding the accessibility widget UI injected into . */ html.a11y-filter body > *:not(.a11y-widget-root):not(.a11y-modal):not(.a11y-text-magnifier) { filter: var(--a11y-filter) !important; } /* Keep explicit selectors too (helps on pages with nested scrolling containers) */ html.a11y-filter .main-content, html.a11y-filter #embedded_job_board_wrapper, html.a11y-filter header, html.a11y-filter nav, html.a11y-filter main, html.a11y-filter footer, html.a11y-filter .modal { filter: var(--a11y-filter) !important; } /* Apply typography tweaks only when enabled (site content including header/footer + Bootstrap modals). Note: do NOT apply to body/html to avoid affecting the widget UI. */ html.a11y-typography .main-content, html.a11y-typography .main-content *, html.a11y-typography #embedded_job_board_wrapper, html.a11y-typography #embedded_job_board_wrapper *, html.a11y-typography header, html.a11y-typography header *, html.a11y-typography nav, html.a11y-typography nav *, html.a11y-typography main, html.a11y-typography main *, html.a11y-typography footer, html.a11y-typography footer *, html.a11y-typography .modal, html.a11y-typography .modal * { line-height: var(--a11y-line-height) !important; } /* Some pages are not wrapped in `.main-content` (e.g. standalone pages). Apply line-height globally when enabled, but explicitly protect the widget UI. */ html.a11y-typography body, html.a11y-typography body * { line-height: var(--a11y-line-height) !important; } /* Never apply typography overrides to the widget UI */ html.a11y-typography .a11y-widget-root, html.a11y-typography .a11y-widget-root *, html.a11y-typography .a11y-modal, html.a11y-typography .a11y-modal *, html.a11y-typography .a11y-drawer, html.a11y-typography .a11y-drawer * { line-height: 1.25 !important; } /* Font weight should be independent from line-height. Otherwise, changing line-height would overwrite existing font weights (e.g. Greenhouse job titles). */ html.a11y-font-weight .main-content, html.a11y-font-weight .main-content *, html.a11y-font-weight #embedded_job_board_wrapper, html.a11y-font-weight #embedded_job_board_wrapper *, html.a11y-font-weight header, html.a11y-font-weight header *, html.a11y-font-weight nav, html.a11y-font-weight nav *, html.a11y-font-weight main, html.a11y-font-weight main *, html.a11y-font-weight footer, html.a11y-font-weight footer *, html.a11y-font-weight .modal, html.a11y-font-weight .modal * { font-weight: var(--a11y-font-weight); } /* Letter spacing: apply across the website containers (not `body`) so it never affects the widget UI. */ html.a11y-letter-spacing .main-content, html.a11y-letter-spacing .main-content *, html.a11y-letter-spacing #embedded_job_board_wrapper, html.a11y-letter-spacing #embedded_job_board_wrapper *, html.a11y-letter-spacing header, html.a11y-letter-spacing header *, html.a11y-letter-spacing nav, html.a11y-letter-spacing nav *, html.a11y-letter-spacing main, html.a11y-letter-spacing main *, html.a11y-letter-spacing footer, html.a11y-letter-spacing footer *, html.a11y-letter-spacing .modal, html.a11y-letter-spacing .modal * { letter-spacing: var(--a11y-letter-spacing) !important; } /* Ensure widget UI is never affected by letter-spacing (extra safety, including pseudo-elements) */ /* Note: the widget UI is injected as siblings of `.main-content`, so it won't be affected by the site letter-spacing rules above. Avoid overriding widget UI letter-spacing here; doing so would change the widget typography when toggling Letter Spacing. */ /* Text Magnifier overlay (hover-to-zoom text). */ .a11y-text-magnifier { position: fixed; left: 0; top: 0; z-index: 1000003; max-width: min(520px, calc(100vw - 28px)); padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(17, 17, 17, 0.12); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22); pointer-events: none; user-select: none; } .a11y-text-magnifier[data-theme="dark"] { background: rgba(17, 17, 17, 0.96); color: #fff; border-color: rgba(255, 255, 255, 0.16); } .a11y-text-magnifier:not([data-theme="dark"]) { background: rgba(255, 255, 255, 0.98); color: #111; } .a11y-text-magnifier, .a11y-text-magnifier * { line-height: 1.2 !important; letter-spacing: normal !important; filter: none !important; } .a11y-text-magnifier-inner { font-size: 28px; font-weight: 700; margin: 0; padding: 0; word-break: break-word; white-space: pre-wrap; } html.a11y-align-left .main-content { text-align: left !important; } html.a11y-align-left #embedded_job_board_wrapper { text-align: left !important; } html.a11y-align-center .main-content { text-align: center !important; } html.a11y-align-center #embedded_job_board_wrapper { text-align: center !important; } html.a11y-align-right .main-content { text-align: right !important; } html.a11y-align-right #embedded_job_board_wrapper { text-align: right !important; } html.a11y-align-justify .main-content { text-align: justify !important; } html.a11y-align-justify #embedded_job_board_wrapper { text-align: justify !important; } /* Center-align text: apply to website containers (not `body`) so it never leaks into the widget UI. */ html.a11y-center-text .main-content, html.a11y-center-text #embedded_job_board_wrapper, html.a11y-center-text main, html.a11y-center-text header, html.a11y-center-text nav, html.a11y-center-text footer, html.a11y-center-text .modal { text-align: center !important; } html.a11y-underline-links .main-content a { text-decoration: underline !important; text-underline-offset: 0.15em; text-decoration-thickness: 0.12em; } html.a11y-underline-links #embedded_job_board_wrapper a { text-decoration: underline !important; text-underline-offset: 0.15em; text-decoration-thickness: 0.12em; } html.a11y-underline-links .modal a { text-decoration: underline !important; text-underline-offset: 0.15em; text-decoration-thickness: 0.12em; } html.a11y-highlight-links .main-content a { box-shadow: inset 0 -1.15em 0 rgba(255, 235, 59, 0.55); color: inherit; } html.a11y-highlight-links #embedded_job_board_wrapper a { box-shadow: inset 0 -1.15em 0 rgba(255, 235, 59, 0.55); color: inherit; } html.a11y-highlight-links .modal a { box-shadow: inset 0 -1.15em 0 rgba(255, 235, 59, 0.55); color: inherit; } /* Header Listen button (reads page content via Speech Synthesis) */ .navbar .navbar-nav { align-items: center; } .navbar .navbar-nav > .nav-item { display: flex; align-items: center; } .navbar .a11y-listen-navitem { display: flex; align-items: center; margin-left: 18px; /* space after OFFICES */ } .navbar .a11y-listen-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: #111; color: #fff; border: 1px solid rgba(0, 0, 0, 0.12); font-size: 14px; font-family: inherit; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; line-height: 1; cursor: pointer; } .navbar .a11y-listen-btn:hover { background: #1a1a1a; } .navbar .a11y-listen-btn[aria-pressed="true"] { animation: a11y-listen-glow 1.1s ease-in-out infinite; } .navbar .a11y-listen-btn:focus-visible { outline: 3px solid rgba(255, 235, 59, 0.95); outline-offset: 2px; } .navbar .a11y-listen-icon { flex: 0 0 auto; } .navbar .a11y-listen-btn[aria-pressed="true"] .a11y-listen-icon { animation: a11y-listen-pulse 0.9s ease-in-out infinite; } .navbar .a11y-listen-label { color: inherit; } @keyframes a11y-listen-pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: 0.92; } 100% { transform: scale(1); opacity: 1; } } @keyframes a11y-listen-glow { 0% { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); } 50% { box-shadow: 0 12px 34px rgba(0, 0, 0, 0.30); } 100% { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); } } html.a11y-readable-font .main-content, html.a11y-readable-font .main-content * { font-family: Arial, Helvetica, sans-serif !important; letter-spacing: 0.02em; } html.a11y-readable-font #embedded_job_board_wrapper, html.a11y-readable-font #embedded_job_board_wrapper * { font-family: Arial, Helvetica, sans-serif !important; letter-spacing: 0.02em; } html.a11y-readable-font header, html.a11y-readable-font header *, html.a11y-readable-font nav, html.a11y-readable-font nav *, html.a11y-readable-font main, html.a11y-readable-font main *, html.a11y-readable-font footer, html.a11y-readable-font footer * { font-family: Arial, Helvetica, sans-serif !important; letter-spacing: 0.02em; } html.a11y-readable-font .modal, html.a11y-readable-font .modal * { font-family: Arial, Helvetica, sans-serif !important; letter-spacing: 0.02em; } /* Never let Readable Font change the widget UI typography */ html.a11y-readable-font .a11y-widget-root, html.a11y-readable-font .a11y-widget-root *, html.a11y-readable-font .a11y-modal, html.a11y-readable-font .a11y-modal *, html.a11y-readable-font .a11y-drawer, html.a11y-readable-font .a11y-drawer * { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial !important; letter-spacing: normal !important; } html.a11y-hide-images .main-content img, html.a11y-hide-images .main-content picture, html.a11y-hide-images .main-content video, html.a11y-hide-images .main-content svg { visibility: hidden !important; } html.a11y-hide-images #embedded_job_board_wrapper img, html.a11y-hide-images #embedded_job_board_wrapper picture, html.a11y-hide-images #embedded_job_board_wrapper video, html.a11y-hide-images #embedded_job_board_wrapper svg { visibility: hidden !important; } html.a11y-hide-images .modal img, html.a11y-hide-images .modal picture, html.a11y-hide-images .modal video, html.a11y-hide-images .modal svg { visibility: hidden !important; } /* Hide images used as CSS backgrounds too (common on this site) */ html.a11y-hide-images .main-content, html.a11y-hide-images .main-content *, html.a11y-hide-images #embedded_job_board_wrapper, html.a11y-hide-images #embedded_job_board_wrapper *, html.a11y-hide-images header, html.a11y-hide-images header *, html.a11y-hide-images nav, html.a11y-hide-images nav *, html.a11y-hide-images main, html.a11y-hide-images main *, html.a11y-hide-images footer, html.a11y-hide-images footer *, html.a11y-hide-images .modal, html.a11y-hide-images .modal * { background-image: none !important; } html.a11y-hide-images .main-content *::before, html.a11y-hide-images .main-content *::after, html.a11y-hide-images #embedded_job_board_wrapper *::before, html.a11y-hide-images #embedded_job_board_wrapper *::after, html.a11y-hide-images header *::before, html.a11y-hide-images header *::after, html.a11y-hide-images nav *::before, html.a11y-hide-images nav *::after, html.a11y-hide-images main *::before, html.a11y-hide-images main *::after, html.a11y-hide-images footer *::before, html.a11y-hide-images footer *::after, html.a11y-hide-images .modal *::before, html.a11y-hide-images .modal *::after { background-image: none !important; } /* Light Contrast: highlight *text content* (not whole blocks) for readability */ html.a11y-light-contrast-text .main-content :is( p, li, dt, dd, blockquote, figcaption, h1, h2, h3, h4, h5, h6, span, small, strong, em, b, i, u, mark, label, a, button, td, th, code, pre ), html.a11y-light-contrast-text #embedded_job_board_wrapper :is( p, li, dt, dd, blockquote, figcaption, h1, h2, h3, h4, h5, h6, span, small, strong, em, b, i, u, mark, label, a, button, td, th, code, pre ), html.a11y-light-contrast-text header :is( p, li, dt, dd, blockquote, figcaption, h1, h2, h3, h4, h5, h6, span, small, strong, em, b, i, u, mark, label, a, button, td, th, code, pre ), html.a11y-light-contrast-text nav :is( p, li, dt, dd, blockquote, figcaption, h1, h2, h3, h4, h5, h6, span, small, strong, em, b, i, u, mark, label, a, button, td, th, code, pre ), html.a11y-light-contrast-text main :is( p, li, dt, dd, blockquote, figcaption, h1, h2, h3, h4, h5, h6, span, small, strong, em, b, i, u, mark, label, a, button, td, th, code, pre ), html.a11y-light-contrast-text footer :is( p, li, dt, dd, blockquote, figcaption, h1, h2, h3, h4, h5, h6, span, small, strong, em, b, i, u, mark, label, a, button, td, th, code, pre ), html.a11y-light-contrast-text .modal :is( p, li, dt, dd, blockquote, figcaption, h1, h2, h3, h4, h5, h6, span, small, strong, em, b, i, u, mark, label, a, button, td, th, code, pre ) { background: rgba(255, 255, 255, 0.92) !important; color: #000 !important; border-radius: 10px; padding: 2px 6px; } /* Never apply the contrast text highlight to the widget UI */ html.a11y-light-contrast-text .a11y-widget-root :is( p, li, dt, dd, blockquote, figcaption, h1, h2, h3, h4, h5, h6, span, small, strong, em, b, i, u, mark, label, a, button, td, th, code, pre ), html.a11y-light-contrast-text .a11y-modal :is( p, li, dt, dd, blockquote, figcaption, h1, h2, h3, h4, h5, h6, span, small, strong, em, b, i, u, mark, label, a, button, td, th, code, pre ), html.a11y-light-contrast-text .a11y-drawer :is( p, li, dt, dd, blockquote, figcaption, h1, h2, h3, h4, h5, h6, span, small, strong, em, b, i, u, mark, label, a, button, td, th, code, pre ) { background: transparent !important; color: inherit !important; padding: 0 !important; border-radius: 0 !important; } /* Highlight Content: show borders around elements on hover (no text highlighting) */ html.a11y-highlight-content .main-content *:hover, html.a11y-highlight-content #embedded_job_board_wrapper *:hover, html.a11y-highlight-content header *:hover, html.a11y-highlight-content nav *:hover, html.a11y-highlight-content main *:hover, html.a11y-highlight-content footer *:hover, html.a11y-highlight-content .modal *:hover { outline: 2px solid rgba(255, 235, 59, 0.95) !important; outline-offset: 2px; } /* Never apply hover outlines to the widget UI */ html.a11y-highlight-content .a11y-modal *:hover, html.a11y-highlight-content .a11y-widget-root *:hover { outline: none !important; outline-offset: 0 !important; } /* Extra safety: explicitly exclude the drawer + launcher too */ html.a11y-highlight-content .a11y-drawer *:hover, html.a11y-highlight-content .a11y-fab:hover { outline: none !important; outline-offset: 0 !important; } /* Extra-extra safety: cover the containers themselves (not only descendants) */ html.a11y-highlight-content .a11y-modal:hover, html.a11y-highlight-content .a11y-drawer:hover, html.a11y-highlight-content .a11y-widget-root:hover { outline: none !important; outline-offset: 0 !important; } /* If any highlight rule leaks, ensure tiles inside the widget never get hover outlines */ html.a11y-highlight-content .a11y-drawer .a11y-tile:hover { outline: none !important; outline-offset: 0 !important; } html.a11y-reduce-motion .main-content *, html.a11y-reduce-motion #embedded_job_board_wrapper *, html.a11y-reduce-motion .modal * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* Ensure widget UI is not affected by any global/root changes */ .a11y-widget-root, .a11y-modal, .a11y-drawer { font-size: 16px; line-height: 1.25; letter-spacing: normal; font-weight: 400; filter: none !important; } /* Big cursor: use a true 2× cursor image on the website only (not on the widget UI). */ html.a11y-big-cursor .main-content { cursor: url("../assets/images/cursor-big-48-white-outline-thick.png?v=19") 9 0, auto !important; } html.a11y-big-cursor #embedded_job_board_wrapper { cursor: url("../assets/images/cursor-big-48-white-outline-thick.png?v=19") 9 0, auto !important; } html.a11y-big-cursor .main-content a, html.a11y-big-cursor .main-content button, html.a11y-big-cursor .main-content [role="button"], html.a11y-big-cursor .main-content input[type="button"], html.a11y-big-cursor .main-content input[type="submit"] { cursor: url("../assets/images/cursor-big-48-white-outline-thick.png?v=19") 9 0, pointer !important; } html.a11y-big-cursor #embedded_job_board_wrapper a, html.a11y-big-cursor #embedded_job_board_wrapper button, html.a11y-big-cursor #embedded_job_board_wrapper [role="button"], html.a11y-big-cursor #embedded_job_board_wrapper input[type="button"], html.a11y-big-cursor #embedded_job_board_wrapper input[type="submit"] { cursor: url("../assets/images/cursor-big-48-white-outline-thick.png?v=19") 9 0, pointer !important; } /* Skip link */ .a11y-skip-link { position: absolute; left: 12px; top: 12px; transform: translateY(-200%); padding: 10px 12px; background: #111; color: #fff; z-index: 1000000; border-radius: 8px; text-decoration: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22); } .a11y-skip-link:focus, .a11y-skip-link:focus-visible { transform: translateY(0); outline: 3px solid rgba(255, 235, 59, 0.95); outline-offset: 2px; } /* Floating icon (bottom-right) */ .a11y-widget-root { position: fixed; right: 18px; bottom: 18px; z-index: 1000001; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial !important; } .a11y-fab { width: 56px; height: 56px; border: 0; border-radius: 999px; background: #111; color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.32); cursor: pointer; } .a11y-fab:hover { background: #1a1a1a; } .a11y-fab:focus-visible { outline: 3px solid rgba(255, 235, 59, 0.95); outline-offset: 2px; } /* Right-side drawer modal (OneTap-like) */ .a11y-modal[hidden] { display: none !important; } .a11y-modal { position: fixed; inset: 0; z-index: 1000002; display: block; opacity: 0; transition: opacity 260ms ease; /* Allow the underlying page to scroll while the drawer is open. Only the drawer itself should capture pointer/wheel events. */ pointer-events: none; } .a11y-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0); /* OneTap-like: no visible scrim */ pointer-events: none; /* allow scrolling/clicking the page while drawer is open */ } .a11y-drawer { position: absolute; top: 0; right: 0; height: 100%; width: min(680px, 56vw); min-width: 520px; background: #f3f5f7; display: flex; flex-direction: column; box-shadow: -18px 0 42px rgba(0, 0, 0, 0.22); pointer-events: auto; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial !important; transform: translate3d(100%, 0, 0); /* closed: offscreen to the right */ transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1); will-change: transform; } /* Open state: slide left into view */ .a11y-modal.a11y-open { opacity: 1; } .a11y-modal.a11y-open .a11y-drawer { transform: translate3d(0, 0, 0); } /* Reduced motion: no sliding/fading */ html.a11y-reduce-motion .a11y-modal, html.a11y-reduce-motion .a11y-drawer { transition: none !important; } @media (prefers-reduced-motion: reduce) { .a11y-modal, .a11y-drawer { transition: none !important; } } @media (max-width: 900px) { .a11y-drawer { width: min(640px, 78vw); min-width: 360px; } } @media (max-width: 680px) { /* On mobile it becomes full-width (matches typical OneTap mobile behavior) */ .a11y-drawer { width: 100%; min-width: 0; } } .a11y-modal-top { background: #111; color: #fff; padding: 18px 16px 22px; } .a11y-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 980px; margin: 0 auto; position: relative; } .a11y-lang { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.08); color: #fff; font-weight: 600; font-size: 14px; cursor: pointer; user-select: none; } .a11y-lang-flag { width: 22px; height: 22px; border-radius: 999px; background: rgba(255, 255, 255, 0.25); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; } .a11y-lang svg { opacity: 0.9; } .a11y-lang-name { white-space: nowrap; } .a11y-lang-menu { position: absolute; top: 54px; left: 0; min-width: 220px; max-height: 62vh; overflow: auto; -webkit-overflow-scrolling: touch; padding: 8px; border-radius: 16px; background: #f3f5f7; border: 1px solid rgba(17, 17, 17, 0.1); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22); z-index: 3; } .a11y-lang-option { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-radius: 12px; background: transparent; color: #111; font: inherit; text-align: left; cursor: pointer; } .a11y-lang-option:hover { background: rgba(17, 17, 17, 0.06); } .a11y-lang-option[aria-selected="true"] { background: rgba(17, 17, 17, 0.08); outline: 2px solid rgba(17, 17, 17, 0.22); } .a11y-lang-option:focus-visible { outline: 3px solid rgba(255, 235, 59, 0.95); outline-offset: 2px; } .a11y-lang-option-flag { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(255, 255, 255, 0.18); } .a11y-x { width: 44px; height: 44px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; } .a11y-x:hover { background: rgba(255, 255, 255, 0.18); } .a11y-x:focus-visible { outline: 3px solid rgba(255, 235, 59, 0.95); outline-offset: 2px; } .a11y-hero { max-width: 980px; margin: 18px auto 0; text-align: center; } .a11y-hero-icon { width: 62px; height: 62px; border-radius: 999px; background: #fff; color: #111; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; } .a11y-hero h1 { margin: 0; font-size: 38px; font-weight: 800; letter-spacing: -0.02em; } .a11y-powered { margin-top: 10px; font-size: 16px; color: rgba(255, 255, 255, 0.82); } .a11y-powered a { color: #fff; text-decoration: underline; } .a11y-modal-body { background: #f3f5f7; flex: 1 1 auto; overflow: auto; padding: 18px 16px 28px; } .a11y-shell { width: 100%; } .a11y-card { background: #fff; border-radius: 26px; padding: 22px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08); border: 1px solid rgba(17, 17, 17, 0.06); margin-bottom: 18px; } .a11y-card h2 { margin: 0 0 14px; font-size: 22px; font-weight: 800; color: #111; } .a11y-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } /* A dedicated 2-up row (used for Font Size + Line Height). */ .a11y-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* A dedicated always-3-up row (used for Letter Spacing / Align Text / Font Weight). */ .a11y-grid--triple { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; margin-top: 14px; } @media (max-width: 520px) { .a11y-grid--triple { gap: 10px; } .a11y-grid--triple .a11y-tile { min-height: 104px; padding: 12px; } .a11y-grid--triple .a11y-tile-label { font-size: 13px; } } @media (max-width: 620px) { .a11y-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .a11y-grid { grid-template-columns: 1fr; } .a11y-hero h1 { font-size: 30px; } } .a11y-tile { background: #f6f7f9; border-radius: 20px; padding: 16px; min-height: 120px; border: 1px solid rgba(17, 17, 17, 0.06); display: flex; flex-direction: column; justify-content: space-between; gap: 10px; cursor: pointer; } /* Prevent a lingering focus outline after mouse clicks; keep visible focus for keyboard users only */ .a11y-tile:focus { outline: none; } .a11y-tile:focus-visible { outline: 3px solid rgba(17, 17, 17, 0.35); outline-offset: 2px; } .a11y-tile[aria-pressed="true"], .a11y-tile.selected { outline: 3px solid rgba(17, 17, 17, 0.88); outline-offset: 0; background: #fff; } .a11y-tile-top { display: flex; align-items: center; justify-content: center; height: 44px; } .a11y-icon-badge { width: 44px; height: 44px; border-radius: 999px; background: rgba(17, 17, 17, 0.06); display: inline-flex; align-items: center; justify-content: center; color: #111; } .a11y-tile-label { text-align: center; font-size: 15px; font-weight: 700; color: #111; } .a11y-stepper { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 10px; padding-top: 4px; } .a11y-stepper .a11y-step-btn { width: 44px; height: 44px; border-radius: 999px; border: 0; background: #111; color: #fff; cursor: pointer; } .a11y-stepper .a11y-step-btn:hover { background: #1a1a1a; } .a11y-stepper .a11y-step-btn:focus-visible { outline: 3px solid rgba(255, 235, 59, 0.95); outline-offset: 2px; } .a11y-stepper .a11y-step-value { text-align: center; font-weight: 700; color: rgba(17, 17, 17, 0.9); } .a11y-reset { margin-top: 12px; } .a11y-reset button { width: 100%; height: 58px; border-radius: 16px; border: 0; background: #111; color: #fff; font-weight: 800; font-size: 18px; cursor: pointer; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.12); } .a11y-reset button:hover { background: #1a1a1a; } .a11y-reset button:focus-visible { outline: 3px solid rgba(255, 235, 59, 0.95); outline-offset: 2px; } /* Reading aids overlays */ .a11y-reading-line { position: fixed; left: 0; right: 0; height: 3px; background: rgba(17, 17, 17, 0.95); z-index: 1000000; pointer-events: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75); will-change: transform, top; } .a11y-mask-top, .a11y-mask-bottom { position: fixed; left: 0; right: 0; background: rgba(0, 0, 0, 0.55); z-index: 999999; pointer-events: none; will-change: transform, top, height; } /* Inside same-origin iframes, some browsers pause fixed-position repaints during scroll. Use absolute positioning there, and compute top/height in JS (see syncGreenhouseIframeReadingAids). */ html.a11y-iframe-context .a11y-reading-line, html.a11y-iframe-context .a11y-mask-top, html.a11y-iframe-context .a11y-mask-bottom { position: absolute; } /* Hide any legacy overlay cursor element from older widget versions. IMPORTANT: Big Cursor also uses `html.a11y-big-cursor` as an enable flag, so never hide by class alone. */ div.a11y-big-cursor { display: none !important; } .a11y-widget { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 99999; font-family: Arial, Helvetica, sans-serif; } .a11y-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.28); z-index: 99998; } .a11y-trigger { width: 56px; height: 56px; border-radius: 999px; border: 0; background: #e30613; color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .a11y-trigger:focus { outline: 3px solid rgba(255, 255, 255, 0.9); outline-offset: 2px; } .a11y-trigger__icon { font-size: 18px; font-weight: 700; letter-spacing: -0.5px; } .a11y-panel { position: absolute; right: 0; bottom: calc(56px + 12px); width: min(320px, calc(100vw - 32px)); background: #ffffff; color: #111; border-radius: 12px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); border: 1px solid rgba(0, 0, 0, 0.12); overflow: hidden; } .a11y-panel[hidden] { display: none !important; } .a11y-panel__header { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px; background: #f7f7f7; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .a11y-panel__title { font-size: 14px; font-weight: 700; letter-spacing: 0.2px; } .a11y-close { width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(0, 0, 0, 0.12); background: #ffffff; color: #111; cursor: pointer; font-size: 18px; line-height: 1; } .a11y-close:focus { outline: 3px solid rgba(227, 6, 19, 0.35); outline-offset: 2px; } .a11y-panel__body { padding: 12px; } .a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .a11y-btn { border: 1px solid rgba(0, 0, 0, 0.16); background: #fff; color: #111; border-radius: 10px; padding: 10px 10px; cursor: pointer; font-size: 13px; text-align: left; line-height: 1.2; } .a11y-btn:hover { background: #f7f7f7; } .a11y-btn:focus { outline: 3px solid rgba(227, 6, 19, 0.35); outline-offset: 2px; } .a11y-btn[aria-pressed="true"] { border-color: rgba(227, 6, 19, 0.5); box-shadow: inset 0 0 0 2px rgba(227, 6, 19, 0.25); } .a11y-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 10px; } .a11y-row .a11y-btn { text-align: center; } .a11y-footer { display: flex; gap: 10px; margin-top: 10px; } .a11y-footer .a11y-btn { flex: 1; text-align: center; } /* ===== Page-level effects toggled by JS ===== */ /* Do NOT apply Readable Font to the entire body, otherwise it can affect the widget UI. Instead, we scope readable font to site content containers above. */ /* Also guard the widget UI at the root level (it is appended directly under ). */ html.a11y-readable-font body > .a11y-widget-root, html.a11y-readable-font body > .a11y-modal, html.a11y-readable-font body > .a11y-text-magnifier { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial !important; } html.a11y-underline-links a { text-decoration: underline !important; text-underline-offset: 2px; } html.a11y-highlight-links a { outline: 2px solid rgba(227, 6, 19, 0.55) !important; outline-offset: 2px; } html.a11y-reduce-motion *, html.a11y-reduce-motion *::before, html.a11y-reduce-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* Some site elements rely on entrance animations to become visible. Example: `.navbar` is `opacity: 0` by default and gets `.animate-fadeIn` on load. When animations are disabled, it would remain invisible unless we force a visible state. */ html.a11y-reduce-motion .navbar { opacity: 1 !important; } html.a11y-reduce-motion .animate-fadeIn, html.a11y-reduce-motion .animate-fadeInUp { opacity: 1 !important; transform: none !important; } html.a11y-has-filter { filter: var(--a11y-filter, none) !important; }