/** * SG Accessibility Widget * * Widget UI is scoped under #sga11y (ID specificity keeps theme / Elementor kit * styles out). Site-wide effects are driven by classes on and exclude * the widget itself. Text size is handled in JS (per-element px scaling), so * it works on px-based themes where changing the root font-size does nothing. */ /* ---------- Widget: reset + layout ---------- */ #sga11y { --sga11y-accent: #1f5fbf; --sga11y-offset: 16px; /* base distance from the bottom edge (sg_a11y_bottom_offset) */ --sga11y-lift: 0px; /* extra lift set by JS while a cookie bar / fixed bottom bar is showing */ position: fixed; bottom: calc(var(--sga11y-offset) + var(--sga11y-lift)); left: 16px; transition: bottom 0.25s ease; z-index: 2147483000; margin: 0; padding: 0; color: #1f2937; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 1.3; letter-spacing: normal; word-spacing: normal; text-align: left; text-transform: none; } #sga11y.sga11y--right { left: auto; right: 16px; } /* Drop theme styles inside the widget (SVGs excluded: `all` would wipe their presentation attributes). */ #sga11y *:not(svg, svg *) { all: revert; box-sizing: border-box; } #sga11y :focus { outline: none; } #sga11y :focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; } #sga11y .sga11y__toggle { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--sga11y-btn-bg, var(--sga11y-accent)); color: var(--sga11y-btn-fg, #fff); cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); } #sga11y .sga11y__toggle:hover { filter: brightness(1.12); } #sga11y .sga11y__panel { position: absolute; bottom: 72px; left: 0; display: flex; flex-direction: column; width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - var(--sga11y-offset) - var(--sga11y-lift) - 94px); max-height: calc(100dvh - var(--sga11y-offset) - var(--sga11y-lift) - 94px); overflow: hidden; background: #fff; border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28); } #sga11y.sga11y--right .sga11y__panel { left: auto; right: 0; } #sga11y .sga11y__panel[hidden] { display: none; } #sga11y .sga11y__head { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 16px; background: var(--sga11y-accent); color: #fff; } #sga11y .sga11y__title { margin: 0; color: #fff; font-size: 18px; font-weight: 700; } #sga11y .sga11y__close { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.2); color: #fff; cursor: pointer; } #sga11y .sga11y__close:hover { background: rgba(255, 255, 255, 0.32); } #sga11y .sga11y__body { padding: 12px; overflow-y: auto; } #sga11y .sga11y__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } @media (max-width: 420px) { #sga11y .sga11y__btn { padding: 8px 3px; font-size: 11.5px; } } @media (max-width: 349px) { #sga11y .sga11y__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } #sga11y .sga11y__btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 74px; margin: 0; padding: 8px 6px; border: 1px solid #6b7280; border-radius: 8px; background: #fff; color: #374151; font: inherit; font-size: 13px; line-height: 1.2; text-align: center; overflow-wrap: anywhere; cursor: pointer; } #sga11y .sga11y__btn:hover { border-color: #1f2937; } #sga11y .sga11y__btn[aria-pressed="true"] { border-color: var(--sga11y-accent); background: #fff; background: color-mix(in srgb, var(--sga11y-accent) 10%, #fff); color: var(--sga11y-accent); } #sga11y .sga11y__icon { display: block; width: 20px; height: 20px; } #sga11y .sga11y__check { position: absolute; top: 6px; right: 6px; opacity: 0; } #sga11y .sga11y__btn[aria-pressed="true"] .sga11y__check { opacity: 1; } #sga11y .sga11y__reset { display: block; width: 100%; margin: 12px 0 0; padding: 10px 16px; border: 2px solid var(--sga11y-accent); border-radius: 999px; background: var(--sga11y-accent); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; } #sga11y .sga11y__reset:hover { background: #fff; color: var(--sga11y-accent); } #sga11y .sga11y__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { #sga11y { transition: none; } } @media print { #sga11y { display: none; } } /* ---------- Site effects ---------- */ /* * Desaturate. Applied to on purpose: a filter on the root element does * not become the containing block for position:fixed descendants, so sticky * headers, cookie bars and this widget stay where they are. */ html.sga11y-desaturate { filter: grayscale(100%); } /* High contrast */ html.sga11y-contrast body, html.sga11y-contrast body *:not(#sga11y, #sga11y *) { background-color: #000 !important; color: #fff !important; border-color: #fff !important; text-shadow: none !important; box-shadow: none !important; } html.sga11y-contrast body a:not(#sga11y *), html.sga11y-contrast body a *:not(#sga11y *) { color: #ff0 !important; } html.sga11y-contrast body :is(input, select, textarea, button):not(#sga11y *) { border: 1px solid #fff !important; } /* Highlight links */ html.sga11y-links body a:not(#sga11y *) { background-color: #ffeb3b !important; color: #000 !important; text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px !important; outline: 2px solid #000 !important; outline-offset: 1px !important; } html.sga11y-links body a *:not(#sga11y *) { color: #000 !important; } /* Letter / word spacing (step 1 = the WCAG 1.4.12 text-spacing values) */ html.sga11y-spacing-1 body *:not(#sga11y, #sga11y *) { letter-spacing: 0.12em !important; word-spacing: 0.16em !important; } html.sga11y-spacing-2 body *:not(#sga11y, #sga11y *) { letter-spacing: 0.24em !important; word-spacing: 0.32em !important; } /* Line height */ html.sga11y-lineheight-1 body *:not(#sga11y, #sga11y *) { line-height: 1.5 !important; } html.sga11y-lineheight-2 body *:not(#sga11y, #sga11y *) { line-height: 2 !important; } /* Hide images */ html.sga11y-images body :is(img, picture, video):not(#sga11y *) { visibility: hidden !important; } html.sga11y-images body *:not(#sga11y, #sga11y *) { background-image: none !important; } /* * Dyslexia-friendly font. Uses wide, clear system fonts that include Cyrillic * (OpenDyslexic has no Cyrillic glyphs). Icon fonts are left alone so icons * don't turn into empty squares. */ html.sga11y-dyslexia body *:not(#sga11y, #sga11y *, svg, svg *, i:empty, span:empty, .fa, .fas, .far, .fab, .fal, .fad, .fa-solid, .fa-regular, .fa-brands, [class^="fa-"], [class*=" fa-"], [class^="eicon"], [class*=" eicon"], [class^="icon-"], [class*=" icon-"], [class^="dashicons"], [class*=" dashicons"], .material-icons, [aria-hidden="true"]) { font-family: Verdana, Tahoma, "DejaVu Sans", "Segoe UI", sans-serif !important; font-style: normal !important; } /* Big cursor: arrow everywhere, hand on interactive elements */ html.sga11y-cursor, html.sga11y-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 11.5-6.5 1 3.8 7.2-3.1 1.6-3.8-7.2L4 21z' fill='%23000' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 8 4, auto !important; } html.sga11y-cursor :is(a, a *, button, button *, label, select, summary, [role="button"], [role="button"] *, input:is([type="submit"], [type="button"], [type="checkbox"], [type="radio"])) { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M8 13V3.5a1.5 1.5 0 0 1 3 0v6a1.5 1.5 0 0 1 3 0v1a1.5 1.5 0 0 1 3 0v1a1.5 1.5 0 0 1 3 0V17c0 3-2 5-5 5h-3c-2 0-3-1-4-2.5L4.2 15a1.4 1.4 0 0 1 2.2-1.7z' fill='%23000' stroke='%23fff' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 19 3, pointer !important; }