/* ========================================================================== SBI Accessibility Preferences widget Self-hosted. The widget markup lives OUTSIDE #sbi-page so page-level modes never restyle its own controls. Two different mechanisms are used for page modes, on purpose: • Filter modes (invert / smart / colour adjustment) go on . A filter on #sbi-page would make it the containing block for its position:fixed descendants and break the cart drawer — verified. The widget re-applies the inverse filter to itself to stay legible. • Palette modes (light / dark / high contrast) use scoped !important colour overrides, no filter, so nothing becomes a containing block. All sizes in the panel are absolute px: the widget must stay stable no matter what the visitor has done to the page. ========================================================================== */ .sbi-a11y, .sbi-a11y * { box-sizing: border-box; } .sbi-a11y-filters { position: absolute; width: 0; height: 0; overflow: hidden; } /* -------------------------------------------------------------------------- Floating launcher button -------------------------------------------------------------------------- */ .sbi-a11y-toggle { position: fixed; right: 24px; bottom: 24px; z-index: 2147483000; width: 56px; height: 56px; padding: 0; border: 2px solid #ffffff; border-radius: 50%; background: #3f7818; color: #ffffff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 22px rgba(0, 0, 0, .28); transition: transform .18s ease, background-color .18s ease; } .sbi-a11y-toggle:hover, .sbi-a11y-toggle:focus-visible { background: #2f6b12; transform: scale(1.06); } .sbi-a11y-toggle:focus-visible { outline: 3px solid #131413; outline-offset: 3px; } .sbi-a11y-toggle svg { width: 32px; height: 32px; display: block; pointer-events: none; } /* -------------------------------------------------------------------------- Panel shell -------------------------------------------------------------------------- */ .sbi-a11y-panel { position: fixed; right: 24px; bottom: 92px; z-index: 2147483001; width: 384px; max-width: calc(100vw - 32px); max-height: min(82vh, 700px); display: none; flex-direction: column; overflow: hidden; background: #ffffff; border-radius: 16px; box-shadow: 0 18px 48px rgba(0, 0, 0, .32); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; color: #131413; text-align: left; } .sbi-a11y-panel.is-open { display: flex; } .sbi-a11y-panel__head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: #131413; color: #ffffff; } .sbi-a11y-panel__title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; color: #ffffff; } .sbi-a11y-panel__hint { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; color: #b5dd99; } .sbi-a11y-close { flex: 0 0 34px; width: 34px; height: 34px; margin-left: auto; padding: 0; display: flex; align-items: center; justify-content: center; border: 2px solid #ffffff; border-radius: 50%; background: transparent; color: #ffffff; cursor: pointer; transition: background-color .18s ease; } .sbi-a11y-close:hover, .sbi-a11y-close:focus-visible { background: #3f7818; } .sbi-a11y-close:focus-visible { outline: 3px solid #b5dd99; outline-offset: 2px; } .sbi-a11y-panel__body { padding: 14px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .sbi-a11y-unsupported { margin: 0 0 12px; padding: 9px 12px; border-radius: 8px; background: #fff4e5; border: 1px solid #ffcf92; color: #6b4300; font-size: 12px; line-height: 1.5; } /* -------------------------------------------------------------------------- Tile grid -------------------------------------------------------------------------- */ .sbi-a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .sbi-a11y-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 92px; padding: 14px 10px; border: 2px solid #e4ebe0; border-radius: 12px; background: #f4f7f2; color: #131413; font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.3; text-align: center; cursor: pointer; transition: background-color .16s ease, border-color .16s ease, color .16s ease; } .sbi-a11y-tile:hover { background: #e8f0e2; border-color: #b9d3a6; } .sbi-a11y-tile:focus-visible { outline: 3px solid #ff9811; outline-offset: 2px; } .sbi-a11y-tile__icon { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; color: #131413; } .sbi-a11y-tile__icon svg { width: 26px; height: 26px; } .sbi-a11y-tile__label { display: block; } /* Active state — must not rely on colour alone (WCAG 1.4.1), so the active tile also gets a thicker border and a check mark. */ .sbi-a11y-tile[aria-pressed="true"] { background: #3f7818; border-color: #2f6b12; color: #ffffff; } .sbi-a11y-tile[aria-pressed="true"] .sbi-a11y-tile__icon { color: #ffffff; } .sbi-a11y-tile[aria-pressed="true"] .sbi-a11y-tile__label::after { content: " ✓"; font-weight: 700; } .sbi-a11y-tile[disabled] { opacity: .45; cursor: not-allowed; } /* Tiles that hold a control rather than being a toggle */ .sbi-a11y-tile--field { cursor: default; gap: 10px; } .sbi-a11y-tile--field:hover { background: #f4f7f2; border-color: #e4ebe0; } .sbi-a11y-select { width: 100%; padding: 7px 8px; border: 1px solid #b9c4b3; border-radius: 7px; background: #ffffff; color: #131413; font-family: inherit; font-size: 12px; font-weight: 600; } .sbi-a11y-select:focus-visible { outline: 3px solid #ff9811; outline-offset: 1px; } /* Font-size stepper */ .sbi-a11y-stepper { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; padding: 4px; background: #ffffff; border: 1px solid #d8e6cc; border-radius: 999px; } .sbi-a11y-step { flex: 0 0 30px; width: 30px; height: 30px; padding: 0; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: #3f7818; color: #ffffff; font-size: 17px; font-weight: 700; line-height: 1; cursor: pointer; } .sbi-a11y-step:hover:not(:disabled) { background: #2f6b12; } .sbi-a11y-step:focus-visible { outline: 3px solid #131413; outline-offset: 2px; } .sbi-a11y-step:disabled { background: #cfd6cf; color: #5c636b; cursor: not-allowed; } .sbi-a11y-value { flex: 1 1 auto; text-align: center; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- Panel footer -------------------------------------------------------------------------- */ .sbi-a11y-panel__foot { padding: 12px 14px; border-top: 1px solid #e6ebe4; background: #ffffff; } .sbi-a11y-reset { width: 100%; padding: 10px 14px; border: 1px solid #131413; border-radius: 10px; background: #ffffff; color: #131413; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color .18s ease, color .18s ease; } .sbi-a11y-reset:hover, .sbi-a11y-reset:focus-visible { background: #131413; color: #ffffff; } .sbi-a11y-reset:focus-visible { outline: 3px solid #3f7818; outline-offset: 2px; } .sbi-a11y-report { display: block; margin-top: 9px; text-align: center; font-size: 12px; font-weight: 600; color: #2f6b12; text-decoration: underline; } .sbi-a11y-report:focus-visible { outline: 3px solid #ff9811; outline-offset: 2px; } .sbi-a11y-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ========================================================================== READING MASK ========================================================================== */ .sbi-a11y-mask { position: fixed; inset: 0; z-index: 2147482500; pointer-events: none; } .sbi-a11y-mask__band { position: absolute; left: 0; right: 0; background: rgba(0, 0, 0, .72); transition: height .04s linear, top .04s linear; } .sbi-a11y-mask__band--top { top: 0; } .sbi-a11y-mask__band--bottom { bottom: 0; } /* ========================================================================== DICTIONARY POPOVER ========================================================================== */ .sbi-a11y-dict { position: fixed; z-index: 2147483002; width: 320px; max-width: calc(100vw - 24px); max-height: 320px; display: flex; flex-direction: column; overflow: hidden; background: #ffffff; border: 2px solid #131413; border-radius: 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, .3); font-family: 'Inter', Arial, sans-serif; font-size: 14px; color: #131413; } .sbi-a11y-dict__head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #131413; color: #ffffff; font-size: 15px; } .sbi-a11y-dict__close { margin-left: auto; width: 26px; height: 26px; border: none; border-radius: 50%; background: transparent; color: #ffffff; font-size: 19px; line-height: 1; cursor: pointer; } .sbi-a11y-dict__close:hover, .sbi-a11y-dict__close:focus-visible { background: #3f7818; } .sbi-a11y-dict__body { padding: 12px; overflow-y: auto; line-height: 1.55; } .sbi-a11y-dict__pos { margin: 10px 0 3px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #2f6b12; } .sbi-a11y-dict__body ol { margin: 0; padding-left: 20px; } .sbi-a11y-dict__note { margin: 12px 0 0; padding-top: 9px; border-top: 1px solid #e6ebe4; font-size: 11px; color: #5c636b; } /* ========================================================================== VIRTUAL KEYBOARD ========================================================================== */ .sbi-a11y-vk { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 2147483002; width: min(760px, 100vw); padding: 10px 12px 14px; background: #131413; border-radius: 14px 14px 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, .38); font-family: 'Inter', Arial, sans-serif; } .sbi-a11y-vk__bar { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; color: #ffffff; font-size: 12px; } .sbi-a11y-vk__close { margin-left: auto; width: 26px; height: 26px; border: none; border-radius: 50%; background: transparent; color: #ffffff; font-size: 19px; line-height: 1; cursor: pointer; } .sbi-a11y-vk__close:hover, .sbi-a11y-vk__close:focus-visible { background: #3f7818; } .sbi-a11y-vk__row { display: flex; justify-content: center; gap: 5px; margin-bottom: 5px; } .sbi-a11y-vk__key { min-width: 38px; height: 40px; padding: 0 9px; border: 1px solid #3a3a3a; border-radius: 7px; background: #262626; color: #ffffff; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } .sbi-a11y-vk__key:hover { background: #3f7818; } .sbi-a11y-vk__key:focus-visible { outline: 3px solid #ff9811; outline-offset: 1px; } .sbi-a11y-vk__key--wide { min-width: 74px; } .sbi-a11y-vk__key--space { min-width: 210px; } .sbi-a11y-vk__key[aria-pressed="true"] { background: #3f7818; border-color: #7ec850; } /* ========================================================================== PAGE MODE: LIGHT CONTRAST Palette override rather than a filter, so nothing becomes a containing block. Scoped to #sbi-page so the widget itself is untouched. ========================================================================== */ html.sbi-mode-light #sbi-page, html.sbi-mode-light #sbi-page *:not(img):not(video):not(iframe):not(canvas):not(svg):not(path):not(circle):not(rect):not(line):not(polyline):not(polygon) { background-image: none !important; background-color: transparent !important; color: #131413 !important; border-color: #6b7280 !important; text-shadow: none !important; box-shadow: none !important; } html.sbi-mode-light #sbi-page { background-color: #ffffff !important; } html.sbi-mode-light #sbi-page a, html.sbi-mode-light #sbi-page a * { color: #0b4a8f !important; text-decoration: underline !important; } html.sbi-mode-light #sbi-page button, html.sbi-mode-light #sbi-page .sb-btn, html.sbi-mode-light #sbi-page [class*="btn"] { background-color: #ececec !important; border: 2px solid #131413 !important; color: #131413 !important; } /* ========================================================================== PAGE MODE: DARK CONTRAST ========================================================================== */ html.sbi-mode-dark #sbi-page, html.sbi-mode-dark #sbi-page *:not(img):not(video):not(iframe):not(canvas):not(svg):not(path):not(circle):not(rect):not(line):not(polyline):not(polygon) { background-image: none !important; background-color: transparent !important; color: #f2f2f2 !important; border-color: #8a8a8a !important; text-shadow: none !important; box-shadow: none !important; } html.sbi-mode-dark #sbi-page { background-color: #101010 !important; } html.sbi-mode-dark #sbi-page a, html.sbi-mode-dark #sbi-page a * { color: #8ecbff !important; text-decoration: underline !important; } html.sbi-mode-dark #sbi-page button, html.sbi-mode-dark #sbi-page .sb-btn, html.sbi-mode-dark #sbi-page [class*="btn"] { background-color: #242424 !important; border: 2px solid #f2f2f2 !important; color: #f2f2f2 !important; } /* ========================================================================== PAGE MODE: HIGH CONTRAST Black canvas, white body text, yellow links — the long-established high-contrast convention, at far above 7:1 (AAA). ========================================================================== */ html.sbi-mode-high #sbi-page, html.sbi-mode-high #sbi-page *:not(img):not(video):not(iframe):not(canvas):not(svg):not(path):not(circle):not(rect):not(line):not(polyline):not(polygon) { background-image: none !important; background-color: transparent !important; color: #ffffff !important; border-color: #ffffff !important; text-shadow: none !important; box-shadow: none !important; } html.sbi-mode-high #sbi-page { background-color: #000000 !important; } html.sbi-mode-high #sbi-page a, html.sbi-mode-high #sbi-page a * { color: #ffff00 !important; text-decoration: underline !important; } html.sbi-mode-high #sbi-page button, html.sbi-mode-high #sbi-page .sb-btn, html.sbi-mode-high #sbi-page [class*="btn"] { background-color: #000000 !important; border: 2px solid #ffff00 !important; color: #ffff00 !important; } html.sbi-mode-high #sbi-page :focus-visible { outline: 4px solid #ffff00 !important; outline-offset: 2px !important; } /* ========================================================================== PAGE MODE: READ MODE Strips the page to its main content in a single readable column. ========================================================================== */ html.sbi-mode-read #sbi-page .sb-top-bar, html.sbi-mode-read #sbi-page .sb-main-header, html.sbi-mode-read #sbi-page .sb-side-drawer, html.sbi-mode-read #sbi-page .sb-side-drawer-overlay, html.sbi-mode-read #sbi-page .sb-live-ribbon, html.sbi-mode-read #sbi-page .sb-footer, html.sbi-mode-read #sbi-page .cart-drawer, html.sbi-mode-read #sbi-page .cart-overlay, html.sbi-mode-read #sbi-page aside, html.sbi-mode-read #sbi-page iframe, html.sbi-mode-read #sbi-page video, html.sbi-mode-read #sbi-page .pb-ts-dots, html.sbi-mode-read #sbi-page .tm-dots { display: none !important; } html.sbi-mode-read #sbi-page { background: #fbfaf7 !important; } html.sbi-mode-read #sbi-page #main-content { max-width: 72ch; margin: 0 auto; padding: 34px 22px 60px; background: #fbfaf7 !important; } /* Flatten the layout without touching `display` on inline elements — forcing display:block on every descendant would turn each / into its own line and shred the prose. */ html.sbi-mode-read #sbi-page #main-content *:not(img):not(svg):not(path) { float: none !important; position: static !important; width: auto !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; background-image: none !important; background-color: transparent !important; color: #1b1b1b !important; border-radius: 0 !important; box-shadow: none !important; text-align: left !important; } /* Only structural containers get linearised, so flex/grid columns stack. */ html.sbi-mode-read #sbi-page #main-content div, html.sbi-mode-read #sbi-page #main-content section, html.sbi-mode-read #sbi-page #main-content article, html.sbi-mode-read #sbi-page #main-content header, html.sbi-mode-read #sbi-page #main-content footer, html.sbi-mode-read #sbi-page #main-content ul, html.sbi-mode-read #sbi-page #main-content ol { display: block !important; gap: 0 !important; } html.sbi-mode-read #sbi-page #main-content p, html.sbi-mode-read #sbi-page #main-content li { font-family: Georgia, 'Times New Roman', serif !important; line-height: 1.75 !important; margin: 0 0 1em !important; } html.sbi-mode-read #sbi-page #main-content h1, html.sbi-mode-read #sbi-page #main-content h2, html.sbi-mode-read #sbi-page #main-content h3 { margin: 1.4em 0 .5em !important; line-height: 1.25 !important; } /* Images must be capped, not just width-limited. Once positioning is stripped, an `object-fit: cover` image that used to fill a short card renders at its natural aspect ratio — several of them stack into a wall of full-bleed photos and bury the text. Cap the height and let it letterbox instead. */ html.sbi-mode-read #sbi-page #main-content img { display: block !important; width: auto !important; height: auto !important; max-width: 100% !important; max-height: 320px !important; object-fit: contain !important; margin: 1em auto !important; } /* Negative margins were pulling overlay text back over the media it sat on; with everything linearised they just cause overlap. Prose and images keep their own spacing (set above), or the article would run together. */ html.sbi-mode-read #sbi-page #main-content *:not(p):not(li):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(img) { margin-top: 0 !important; margin-bottom: 0 !important; inset: auto !important; transform: none !important; overflow: visible !important; } /* Decorative gradient/scrim layers have nothing to show once linearised. */ html.sbi-mode-read #sbi-page #main-content [class*="overlay"], html.sbi-mode-read #sbi-page #main-content [class*="scrim"], html.sbi-mode-read #sbi-page #main-content [class*="gradient"] { display: none !important; } html.sbi-mode-read #sbi-page #main-content a { color: #0b4a8f !important; text-decoration: underline !important; display: inline !important; } /* ========================================================================== Screen-reader highlight — shows what is being spoken. ========================================================================== */ .sbi-a11y-speaking { outline: 3px dashed #ff9811 !important; outline-offset: 2px !important; background: rgba(255, 152, 17, .16) !important; } /* ========================================================================== Small screens ========================================================================== */ @media (max-width: 560px) { .sbi-a11y-panel { right: 8px; left: 8px; bottom: 8px; width: auto; max-width: none; max-height: 86vh; } .sbi-a11y-toggle { right: 16px; bottom: 16px; width: 50px; height: 50px; } .sbi-a11y-toggle svg { width: 28px; height: 28px; } .sbi-a11y-vk__key { min-width: 28px; height: 36px; padding: 0 5px; font-size: 12px; } .sbi-a11y-vk__key--space { min-width: 110px; } .sbi-a11y-vk__key--wide { min-width: 52px; } } @media (prefers-reduced-motion: reduce) { .sbi-a11y-toggle, .sbi-a11y-step, .sbi-a11y-close, .sbi-a11y-reset, .sbi-a11y-tile, .sbi-a11y-mask__band { transition: none; } .sbi-a11y-toggle:hover { transform: none; } } @media print { .sbi-a11y-toggle, .sbi-a11y-panel, .sbi-a11y-mask, .sbi-a11y-vk, .sbi-a11y-dict { display: none !important; } }