/** * A11y Panel * * Everything here is scoped to .a11yp or to one of the three data attributes * the plugin sets on , so dropping the plugin onto an unknown theme * cannot restyle anything the visitor did not ask for. * * The panel's own colours come from custom properties with hard fallbacks; a * theme that wants the panel in its own palette overrides the properties * instead of fighting these rules. */ /*-------------------------------------------------------------- # OpenDyslexic --------------------------------------------------------------*/ @font-face { font-family: "OpenDyslexic"; src: url("../fonts/OpenDyslexic/OpenDyslexic-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "OpenDyslexic"; src: url("../fonts/OpenDyslexic/OpenDyslexic-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "OpenDyslexic"; src: url("../fonts/OpenDyslexic/OpenDyslexic-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "OpenDyslexic"; src: url("../fonts/OpenDyslexic/OpenDyslexic-Bold-Italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } /*-------------------------------------------------------------- # The panel --------------------------------------------------------------*/ .a11yp { --a11yp-accent: #005fcc; --a11yp-accent-hover: #00458f; --a11yp-on-accent: #ffffff; --a11yp-surface: #ffffff; --a11yp-text: #1b1b1b; --a11yp-border: #767676; --a11yp-hover: #eef3fb; position: fixed; bottom: 1rem; z-index: 99999; font-size: 16px; line-height: 1.4; } .a11yp--bottom-right { right: 1rem; } .a11yp--bottom-left { left: 1rem; } .a11yp-toggle { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; margin: 0; padding: 0; background: var(--a11yp-accent); color: var(--a11yp-on-accent); border: 2px solid transparent; border-radius: 50%; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28); transition: background-color 0.2s ease; } .a11yp-toggle:hover, .a11yp-toggle:focus-visible { background: var(--a11yp-accent-hover); } .a11yp-toggle .a11yp-icon { width: 26px; height: 26px; } .a11yp-panel { position: absolute; bottom: 3.75rem; width: 17rem; max-width: calc(100vw - 2rem); margin: 0; padding: 0.75rem; background: var(--a11yp-surface); color: var(--a11yp-text); border: 1px solid var(--a11yp-border); border-radius: 0.5rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22); box-sizing: border-box; } .a11yp--bottom-right .a11yp-panel { right: 0; } .a11yp--bottom-left .a11yp-panel { left: 0; } /* The hidden attribute is the single source of truth for the panel's visibility, so a theme's display rules cannot leave it half-open. */ .a11yp-panel[hidden] { display: none; } .a11yp-list { list-style: none; margin: 0; padding: 0; } .a11yp-list li + li { margin-top: 0.35rem; } .a11yp-button { display: flex; align-items: center; gap: 0.6rem; width: 100%; margin: 0; padding: 0.55rem 0.6rem; font: inherit; font-size: 0.9375rem; text-align: left; color: var(--a11yp-text); background: transparent; border: 1px solid transparent; border-radius: 0.25rem; cursor: pointer; } .a11yp-button:hover, .a11yp-button:focus-visible { background: var(--a11yp-hover); border-color: var(--a11yp-accent); } .a11yp-button .a11yp-icon { flex: 0 0 auto; } /* An engaged toggle is marked by more than colour: the filled bar on the left reads without colour perception, and aria-pressed carries it to assistive technology. */ .a11yp-button[aria-pressed="true"] { background: var(--a11yp-hover); border-color: var(--a11yp-accent); box-shadow: inset 3px 0 0 var(--a11yp-accent); font-weight: 700; } .a11yp-toggle:focus-visible, .a11yp-button:focus-visible { outline: 3px solid var(--a11yp-accent); outline-offset: 2px; } .a11yp-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; } /*-------------------------------------------------------------- # Readable font --------------------------------------------------------------*/ /* * Icon fonts are excluded: they map letters onto glyphs, so swapping the * family turns every icon on the page into a stray character. */ html[data-a11y-font="readable"] body, html[data-a11y-font="readable"] body *:not([class*="fa-"]):not([class*="icon"]):not([class*="dashicons"]):not(svg):not(svg *) { font-family: "OpenDyslexic", Verdana, Arial, sans-serif !important; } /*-------------------------------------------------------------- # Reduced motion --------------------------------------------------------------*/ /* * Near-zero rather than "none": a script waiting for animationend or * transitionend still gets its event, so carousels and accordions that * advance on those events keep working instead of freezing. */ html[data-a11y-motion="reduced"], html[data-a11y-motion="reduced"] *, html[data-a11y-motion="reduced"] *::before, html[data-a11y-motion="reduced"] *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0ms !important; } html[data-a11y-motion="reduced"] { scroll-behavior: auto !important; }