/** * SubtelPro_Accessibility — adjustment-effect classes. * * These classes are applied/removed on (document.documentElement) by * view/frontend/web/js/accessibility-widget.js. They must apply to arbitrary * page content (not just this module's own widget markup), so they live here * as plain CSS rather than as Tailwind utility classes in widget.phtml. * * --a11y-primary is set on :root by the JS from the admin-configured * "Primary Color" (SubtelPro\Accessibility\ViewModel\Config::getPrimaryColor()), * so the highlight-focus outline and reading-guide bar follow the store config. */ :root { --a11y-primary: #2563eb; } /* * ----- Show On Mobile (admin config) ----- * `data-hide-on-mobile` is only present on the widget root when the admin has set * "Show On Mobile" to No (the default). 767px matches the theme's own "md" breakpoint * (768px, see web/tailwind/tailwind.config.cjs) - the same width the site's own mobile * menu switches at - so "mobile" here means the same thing it does everywhere else in * this theme. */ @media (max-width: 767px) { #subtelpro-a11y-widget[data-hide-on-mobile] { display: none !important; } } /* * ----- Seizure Safe / pause animations ----- * Excludes the widget's own controls - without this, it also killed the launcher button's * own hover/active transition (its transition-duration measurably dropped to 0s). */ html.a11y-seizure-safe *:not(#subtelpro-a11y-widget):not(#subtelpro-a11y-widget *), html.a11y-pause-animations *:not(#subtelpro-a11y-widget):not(#subtelpro-a11y-widget *) { animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* ----- Font size ----- */ html.a11y-font-lg { font-size: 112.5% !important; } html.a11y-font-xl { font-size: 125% !important; } /* ----- Content scaling (zoom whole page content, rem-based theme) ----- */ html.a11y-content-scale-110 { font-size: 110% !important; } html.a11y-content-scale-125 { font-size: 125% !important; } html.a11y-content-scale-150 { font-size: 150% !important; } html.a11y-content-scale-200 { font-size: 200% !important; } /* * Keep the widget's OWN control panel a constant size — it must not move or resize by even * 1px when the visitor raises Font Size / Content Scaling (or any other adjustment). Those * work by changing the ROOT font-size, which every `rem`-based value in the panel * would otherwise inherit. An earlier version of this fix tried to cancel that with an * inverse `zoom` on `.a11y-panel` — that is IMPRECISE: zoom lets the panel's text actually * lay out (and re-wrap onto a different number of lines) at the enlarged intermediate root * font-size before scaling the result back down, and a discrete line-wrap-count change can * never be perfectly undone by a single linear zoom factor. It measurably drifted the panel * by 13-42px depending on the level. The real, exact fix is to never let the panel's own * sizing depend on the root font-size in the first place: every font-size in this file that * belongs to the panel (.a11y-panel and its descendants, further below) is pinned in px, not * rem/em, and `.a11y-panel` itself pins `font-size`/`max-width` to override the markup's * `text-sm`/`max-w-sm` Tailwind classes (also rem-based). The launcher button was always * px-sized already, so it needs no such rule. */ /* * NOTE: the header used to be hard-excluded from content scaling here (inverse `zoom` * on header.page-header). That is now handled via admin config instead — Stores > * Configuration > Accessibility Widget > "Element Exclusions": add selector * `header.page-header` and disable "Content Scaling / Zoom" (and "Font Size" if desired). */ /* ----- Line height / letter spacing ----- */ html.a11y-line-height-lg body, html.a11y-line-height-lg body *:not(#subtelpro-a11y-widget):not(#subtelpro-a11y-widget *) { line-height: 1.8 !important; } html.a11y-letter-spacing-lg body, html.a11y-letter-spacing-lg body *:not(#subtelpro-a11y-widget):not(#subtelpro-a11y-widget *) { letter-spacing: 0.08em !important; word-spacing: 0.16em !important; } /* * ----- Text alignment ----- * This previously only excluded `.a11y-panel` itself, not the whole widget wrapper * (#subtelpro-a11y-widget, which also holds the launcher button and, more importantly, is * `.a11y-panel`'s own PARENT). Since `.a11y-panel` had no text-align of its own, the widget * wrapper being force-aligned by this rule (it is NOT `.a11y-panel` or a descendant of it, so * it matched) cascaded down via inheritance into any panel element without its own alignment * (e.g. .a11y-section-title). Fixed the same way as every other adjustment: exclude the full * widget wrapper, not just the panel. */ html.a11y-align-left body :not(#subtelpro-a11y-widget):not(#subtelpro-a11y-widget *) { text-align: left !important; } html.a11y-align-center body :not(#subtelpro-a11y-widget):not(#subtelpro-a11y-widget *) { text-align: center !important; } html.a11y-align-right body :not(#subtelpro-a11y-widget):not(#subtelpro-a11y-widget *) { text-align: right !important; } /* ----- Readable font (dyslexia-friendly stack, no external font download) ----- */ html.a11y-readable-font body, html.a11y-readable-font body *:not(#subtelpro-a11y-widget):not(#subtelpro-a11y-widget *) { font-family: Arial, Verdana, sans-serif !important; } /* * ----- Highlight titles / links ----- * The panel's own title/row labels are real

/

elements (for correct document * structure), so they must be explicitly excluded here too, same as every other adjustment. / html.a11y-highlight-titles h1:not(#subtelpro-a11y-widget ), html.a11y-highlight-titles h2:not(#subtelpro-a11y-widget ), html.a11y-highlight-titles h3:not(#subtelpro-a11y-widget ), html.a11y-highlight-titles h4:not(#subtelpro-a11y-widget ), html.a11y-highlight-titles h5:not(#subtelpro-a11y-widget ), html.a11y-highlight-titles h6:not(#subtelpro-a11y-widget ) { outline: 2px dashed var(--a11y-primary, #2563eb) !important; background-color: rgba(37, 99, 235, 0.08) !important; } html.a11y-highlight-links a:not(#subtelpro-a11y-widget ) { outline: 1px dashed var(--a11y-primary, #2563eb) !important; background-color: rgba(37, 99, 235, 0.08) !important; text-decoration: underline !important; } /* * ----- Contrast modes ----- * Excludes the FULL widget wrapper (#subtelpro-a11y-widget), not just `.a11y-panel`/ * `.a11y-toggle-btn` as elements. The narrower, older exclusion still let these rules match * the launcher's OWN inner ` itself would create a new CSS containing block for every * `position:fixed` descendant (per spec, `filter != none` on an ancestor does * this even if the descendant's own filter is `none`) — that would silently * break the widget's own fixed toggle button/panel positioning, not just tint * its colors, since the widget mounts as a child of `` too. Filtering * body's other direct children instead avoids both problems: the widget * (a sibling, never a descendant of anything filtered) keeps its normal fixed * position, and every real page element still gets the visual effect. / html.a11y-saturation-high body > :not(#subtelpro-a11y-widget) { filter: saturate(1.6) !important; } html.a11y-saturation-low body > :not(#subtelpro-a11y-widget) { filter: saturate(0.4) !important; } html.a11y-monochrome body > :not(#subtelpro-a11y-widget) { filter: grayscale(1) !important; } html.a11y-invert body > :not(#subtelpro-a11y-widget) { filter: invert(1) hue-rotate(180deg) !important; } / No img/video/picture currently exists inside the widget (icons are inline ` itself is always a valid * target for these rules (body is never "inside" the widget, so no exclusion applies to it), * and the launcher/restore-tab set neither their own `color` nor `font-family`, so they * silently inherited whatever body ended up with (confirmed live: Contrast changed the * launcher's computed `color`, Readable Font changed its `font-family` - both invisible * today since the icon uses an explicit fill= attribute rather than currentColor, but * fixed anyway since neither should be affected at all). `.a11y-panel` already pins these * for itself further below; pinning them here as well additionally covers its siblings. / #subtelpro-a11y-widget { color: #000000 !important; font-family: Ubuntu, Tahoma, Helvetica, Verdana, sans-serif !important; line-height: normal !important; letter-spacing: normal !important; text-align: start !important; } .a11y-toggle-btn, .a11y-restore-tab { bottom: 16px !important; } .a11y-panel { bottom: 80px !important; } .a11y-toggle-btn.left-4, .a11y-restore-tab.left-4, .a11y-panel.left-4 { left: 16px !important; } .a11y-toggle-btn.right-4, .a11y-restore-tab.right-4, .a11y-panel.right-4 { right: 16px !important; } / Round launcher, sized and behaving like the Intercom messenger bubble. / .a11y-toggle-btn { width: 48px; height: 48px; border-radius: 9999px; cursor: pointer; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06), 0 2px 32px rgba(0, 0, 0, 0.16); transition: transform 0.15s ease, box-shadow 0.15s ease; } .a11y-toggle-btn:hover { transform: scale(1.05); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.10), 0 2px 40px rgba(0, 0, 0, 0.24); } .a11y-toggle-btn:active { transform: scale(0.96); } .a11y-toggle-btn:focus-visible { outline: 3px solid var(--a11y-primary, #2563eb); outline-offset: 2px; } / * Pin every icon that is sized via a Tailwind w-N/h-N class in the markup (rem-based, so it * grows with the root font-size same as everything else fixed elsewhere in this file). * Confirmed live: the launcher's icon grew from 28px to 48-56px at Content Scaling 200%, * visibly overflowing its 48px round button. Row/tile icons already use a fixed-px override * (.a11y-row-icon svg etc. further below) and don't need repeating here. / .a11y-toggle-btn svg { width: 28px !important; height: 28px !important; } .a11y-restore-tab svg { width: 16px !important; height: 16px !important; } .a11y-close-btn svg { width: 20px !important; height: 20px !important; } / Invisible spacer that balances the header's flex layout so the title stays centered between it and the close button - must track the close button's icon size exactly. / .a11y-panel-header-top > span { width: 20px !important; height: 20px !important; } #subtelpro-a11y-widget input[type="color"] { width: 32px !important; height: 32px !important; } / "Gray out" hide behavior: launcher stays but dims until hovered/clicked. / .a11y-toggle-btn--dimmed { opacity: 0.35; } .a11y-toggle-btn--dimmed:hover, .a11y-toggle-btn--dimmed:focus-visible { opacity: 1; } / ===== Panel structure: colored header banner + action pills + scrollable body + footer ===== / .a11y-panel { display: flex; flex-direction: column; padding: 0; overflow: hidden; max-height:calc(100% - 125px); background: #ffffff; / Own text color explicitly, so nothing here ever inherits a contrast-mode color forced on body/html (the panel and its contents are excluded from those rules by design, but inheritance would otherwise still reach any element that doesn't set its own color). / color: #111827; / * Pin the base font-size and max-width to fixed px, overriding the markup's Tailwind * `text-sm`/`max-w-sm` classes (both rem-based, i.e. root--font-size-relative). * The panel must never resize when a visitor picks Font Size / Content Scaling - those * work by changing the ROOT font-size, and `rem` always resolves against the root * regardless of any ancestor override, so this has to be pinned in px, not rem/em. * !important guards against load-order relative to the theme's compiled Tailwind bundle. / font-size: 14px !important; max-width: 384px !important; / * Pin the base line-height/letter-spacing/font-family too, for the same reason: these * are inherited CSS properties, so even with the Readable Font / Line Height / Letter * Spacing adjustment rules excluding the widget from their OWN selectors (further up * this file), any panel element that doesn't set its own value (e.g. .a11y-panel-title) * would still silently inherit whatever ends up with. Pinning it here breaks that * inheritance chain at the panel's root. line-height/letter-spacing use the browser's * normal default (matches this panel's un-adjusted look); font-family matches the * theme's actual default body font so the panel's own appearance does not change. / line-height: normal !important; letter-spacing: normal !important; font-family: Ubuntu, Tahoma, Helvetica, Verdana, sans-serif !important; / Same inheritance-leak protection for text-align: elements like .a11y-section-title don't set their own alignment, so they'd otherwise inherit whatever the Text Alignment adjustment forces onto the widget's outer wrapper. / text-align: start !important; } .a11y-panel-header { background: var(--a11y-primary, #2563eb); color: #ffffff; padding: 14px 16px 16px; flex: 0 0 auto; } .a11y-panel-header-top { display: flex; align-items: center; justify-content: space-between; } .a11y-close-btn { color: #ffffff; opacity: 0.9; padding: 4px; border-radius: 3px; transition: background-color 0.15s ease; } .a11y-close-btn:hover { opacity: 1; background: rgba(255, 255, 255, 0.15); } .a11y-panel-title { / px, not rem: this panel must stay a fixed size regardless of the page's Font Size / Content Scaling adjustments (which change the root font-size). See the note above .a11y-panel-header. / font-size: 16px; font-weight: 700; letter-spacing: -0.01em; text-align: center; flex: 1 1 auto; } .a11y-action-pills { display: flex; gap: 6px; margin-top: 12px; } .a11y-action-pill { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 4px; / Kept low: white text at 0.16 opacity here composites to ~3.9:1 against white (measured, not assumed) — fails WCAG AA's 4.5:1 for normal text. 0.06 keeps the pill visible via its border while staying close enough to the deep blue header for white text to stay at ~4.6:1+. / background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.45); color: #ffffff; border-radius: 4px; padding: 7px 6px; font-size: 11.52px; / px, not rem: fixed size regardless of root font-size (see note above .a11y-panel-header) / font-weight: 600; line-height: 1.1; white-space: nowrap; } .a11y-action-pill:hover { background: rgba(255, 255, 255, 0.16); } .a11y-action-pill svg { width: 13px; height: 13px; flex: 0 0 auto; } .a11y-panel-body { padding: 8px 16px 4px; overflow-y: auto; flex: 1 1 auto; background: #ffffff; color: #111827; } .a11y-section-title { font-size: 11.84px; / px, not rem: fixed size regardless of root font-size (see note above .a11y-panel-header) / font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #374151; margin: 14px 0 4px; } .a11y-panel-body section:first-of-type .a11y-section-title { margin-top: 4px; } .a11y-panel-footer { flex: 0 0 auto; text-align: center; font-size: 12px; / px, not rem: fixed size regardless of root font-size (see note above .a11y-panel-header) / font-weight: 500; color: #4b5563; background: #ffffff; padding: 8px 16px; border-top: 1px solid #e5e7eb; } / ===== Toggle-switch row (profiles + individual on/off adjustments) ===== / .a11y-toggle-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 2px; border-bottom: 1px solid #e5e7eb; background: transparent; } .a11y-panel-body section .a11y-toggle-row:last-child { border-bottom: none; } / * Standard pill-track + round-knob toggle. The switch is aria-hidden (state is announced via * role="switch"/aria-checked on the row button instead - see the comment above $toggleRow in * widget.phtml), so once the OFF/ON text labels were dropped this had no text left to size * itself around; kept at the old 60x26px half-highlighted rectangle it read as a flat, * ambiguous bar rather than a recognizable switch. This is the universal toggle shape * instead: a fully-cdcdcdrounded track that changes color with state, and a smaller round knob * that slides - legible at a glance with no text needed, and narrower besides (40px vs * 60px), leaving a little more room for the row's title/description text. / .a11y-switch { position: relative; flex: 0 0 auto; width: 40px; height: 22px; border-radius: 3px; background: #d1d5db; transition: background-color 0.15s ease; } .a11y-switch-on { background: var(--a11y-primary, #2563eb); } / Emptied of text (see widget.phtml) now that the switch is a plain knob toggle; kept in the DOM only so removing them isn't a separate template change, hidden here as dead weight. / .a11y-switch-label { display: none; } .a11y-switch-highlight { position: absolute; top: 2.5px; left: 3px; width: 16px; height: 16px; border-radius: 2px; background: #ffffff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: left 0.15s ease; } .a11y-switch-on .a11y-switch-highlight { left: 21px; } .a11y-row-text { flex: 1 1 auto; min-width: 0; } .a11y-row-title { display: block; font-weight: 600; font-size: 13.28px; / px, not rem: fixed size regardless of root font-size (see note above .a11y-panel-header) / color: #111827; line-height: 1.2; } .a11y-row-desc { display: block; font-size: 12.16px; / px, not rem: fixed size regardless of root font-size (see note above .a11y-panel-header) / color: #4b5563; margin-top: 1px; line-height: 1.3; } .a11y-row-icon { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 4px; background: #eff6ff; background: color-mix(in srgb, var(--a11y-primary, #2563eb) 12%, white); display: flex; align-items: center; justify-content: center; color: var(--a11y-primary, #2563eb); } .a11y-row-icon svg { width: 15px; height: 15px; } / ===== Icon-tile grid (steppers, choice groups, color pickers) ===== / .a11y-tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 6px; } .a11y-tile { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 4px; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; } .a11y-tile-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 4px; background: #eff6ff; background: color-mix(in srgb, var(--a11y-primary, #2563eb) 12%, white); color: var(--a11y-primary, #2563eb); } .a11y-tile-icon svg { width: 16px; height: 16px; } .a11y-tile-label { font-size: 12.16px; / px, not rem: fixed size regardless of root font-size (see note above .a11y-panel-header) / font-weight: 600; color: #111827; } .a11y-tile-value-row { display: flex; align-items: center; gap: 8px; } .a11y-tile-step-btn { width: 22px; height: 22px; border-radius: 3px; background: #ffffff; border: 1px solid #d1d5db; font-weight: 700; font-size: 12.8px; / px, not rem: fixed size regardless of root font-size (see note above .a11y-panel-header) / display: flex; align-items: center; justify-content: center; line-height: 1; } .a11y-tile-value { font-size: 12.16px; / px, not rem: fixed size regardless of root font-size (see note above .a11y-panel-header) / font-weight: 600; min-width: 34px; text-align: center; color: #111827; } .a11y-tile-choice-row { display: flex; gap: 4px; width: 100%; } .a11y-tile-choice-btn { flex: 1 1 0; border: 1px solid #d1d5db; border-radius: 3px; font-size: 11.52px; / px, not rem: fixed size regardless of root font-size (see note above .a11y-panel-header) / font-weight: 600; padding: 4px 2px; background: #ffffff; color: #111827; } .a11y-tile-choice-btn.a11y-is-active { background: var(--a11y-primary, #2563eb); color: #ffffff; border-color: var(--a11y-primary, #2563eb); } .a11y-tile-color-row { display: flex; align-items: center; gap: 6px; } / ===== "Hide Interface" restore tab ===== */ .a11y-restore-tab { border-radius: 9999px; cursor: pointer; box-shadow: 0 2px 4px rgba(17, 24, 39, 0.28); }