/* ========================================================================== OnePay Credit — Accessibility toolbar A self-contained widget: a floating launcher that opens a panel of viewing aids (text size, grayscale, contrast, readable font, etc.). All effects are applied as classes / inline filter on and persisted in localStorage. Nothing here depends on the site's own CSS variables, so it works on every page (marketing pages and dashboards alike). ========================================================================== */ /* ---- Launcher button ----------------------------------------------------- */ #onepay-a11y-launcher { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 2147483000; /* above chat widgets, cookie bars, modals */ width: 46px; height: 46px; border: 0; border-radius: 0 10px 10px 0; background: #2f55d4; color: #fff; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28); display: flex; align-items: center; justify-content: center; transition: background-color 0.15s ease, width 0.15s ease; } #onepay-a11y-launcher:hover { background: #2545b0; width: 52px; } #onepay-a11y-launcher:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; } #onepay-a11y-launcher svg { width: 26px; height: 26px; fill: currentColor; } /* ---- Panel --------------------------------------------------------------- */ #onepay-a11y-panel { position: fixed; left: 14px; top: 50%; transform: translateY(-50%) scale(0.98); z-index: 2147483001; width: 244px; max-width: calc(100vw - 28px); max-height: calc(100vh - 40px); overflow-y: auto; background: #ffffff; color: #1f2937; border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28); padding: 8px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 15px; line-height: 1.3; opacity: 0; visibility: hidden; transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s; } #onepay-a11y-panel.is-open { opacity: 1; visibility: visible; transform: translateY(-50%) scale(1); } #onepay-a11y-panel .a11y-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 8px; border-bottom: 1px solid #eef0f3; margin-bottom: 4px; } #onepay-a11y-panel .a11y-head h2 { margin: 0; font-size: 17px; font-weight: 800; color: #111827; letter-spacing: -0.01em; } #onepay-a11y-panel .a11y-close { border: 0; background: transparent; color: #6b7280; font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 6px; border-radius: 6px; } #onepay-a11y-panel .a11y-close:hover { background: #f3f4f6; color: #111827; } #onepay-a11y-panel .a11y-close:focus-visible { outline: 2px solid #2f55d4; outline-offset: 1px; } /* ---- Tool buttons -------------------------------------------------------- */ #onepay-a11y-panel .a11y-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; background: transparent; color: #1f2937; font: inherit; padding: 10px 10px; border-radius: 8px; cursor: pointer; } #onepay-a11y-panel .a11y-item:hover { background: #f4f6fb; } #onepay-a11y-panel .a11y-item:focus-visible { outline: 2px solid #2f55d4; outline-offset: -2px; } #onepay-a11y-panel .a11y-item svg { flex: 0 0 auto; width: 20px; height: 20px; fill: none; stroke: #4b5563; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #onepay-a11y-panel .a11y-item .a11y-label { flex: 1 1 auto; } #onepay-a11y-panel .a11y-item[aria-pressed="true"] { background: #eef2ff; color: #1e3a8a; font-weight: 600; } #onepay-a11y-panel .a11y-item[aria-pressed="true"] svg { stroke: #2f55d4; } /* Little dot marks an active toggle. */ #onepay-a11y-panel .a11y-item .a11y-state { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: transparent; } #onepay-a11y-panel .a11y-item[aria-pressed="true"] .a11y-state { background: #2f55d4; } #onepay-a11y-panel .a11y-sep { height: 1px; background: #eef0f3; margin: 6px 4px; } #onepay-a11y-panel .a11y-reset { color: #b42318; font-weight: 600; } #onepay-a11y-panel .a11y-reset svg { stroke: #b42318; } #onepay-a11y-panel .a11y-reset:hover { background: #fef2f2; } /* Keep the widget itself legible while Negative Contrast inverts the page: a matching invert on the widget cancels the ancestor filter. */ html.a11y-negative #onepay-a11y-launcher, html.a11y-negative #onepay-a11y-panel { filter: invert(1) hue-rotate(180deg); } /* ========================================================================== Global viewing-aid effect classes (applied to ) ========================================================================== */ /* Underline every link. */ html.a11y-underline a { text-decoration: underline !important; } /* Force a plain, highly legible font. Icon fonts are excluded so glyphs (Font Awesome, Material) do not turn into boxes. */ html.a11y-readable-font body, html.a11y-readable-font body *:not(i):not(svg):not([class*="fa-"]):not([class*="fa"]):not(.material-icons):not(.material-icons-outlined) { font-family: Verdana, Tahoma, Arial, "Segoe UI", sans-serif !important; letter-spacing: 0.01em !important; } /* Light background: force a white ground with dark text regardless of theme. :where() keeps specificity low so the widget's own #id rules still win. */ html.a11y-light-bg body { background: #ffffff !important; color: #1a1a1a !important; } html.a11y-light-bg body :where(section, header, footer, nav, main, article, aside, div, ul, li, form) { background-color: transparent !important; background-image: none !important; } html.a11y-light-bg body :where(p, span, li, td, th, h1, h2, h3, h4, h5, h6, label, small, strong, em, blockquote, figcaption) { color: #1a1a1a !important; } html.a11y-light-bg body :where(a) { color: #0b57d0 !important; } /* Do not repaint the accessibility widget itself. */ html.a11y-light-bg #onepay-a11y-panel, html.a11y-light-bg #onepay-a11y-panel * { background-color: initial; }