/* ========================================================================== H-GROUP accessibility widget Replaces the wp-accessibility plugin. Standalone: no jQuery, no framework. Aims at IS 5568 / WCAG 2.1 AA. Every choice persists in localStorage. ========================================================================== */ :root { --hga11y-bg: #0d5b7a; --hga11y-bg-hover: #0a4a63; --hga11y-panel: #ffffff; --hga11y-text: #16232b; --hga11y-border: #d4dde2; --hga11y-accent: #0d5b7a; --hga11y-on-accent: #ffffff; } /* ---------- launcher ---------- */ .hga11y-btn { position: fixed; left: 16px; /* physical left: the page is RTL, so inset-inline-start would land on the WhatsApp button */ bottom: 16px; z-index: 2147483000; width: 52px; height: 52px; border: 2px solid #fff; border-radius: 50%; background: var(--hga11y-bg); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 12px rgba(0, 0, 0, .32); padding: 0; transition: background .15s ease, transform .15s ease; } .hga11y-btn:hover, .hga11y-btn:focus-visible { background: var(--hga11y-bg-hover); transform: scale(1.06); } .hga11y-btn svg { width: 30px; height: 30px; fill: currentColor; } /* ---------- panel ---------- */ .hga11y-panel { position: fixed; left: 16px; bottom: 78px; z-index: 2147483001; width: 310px; max-width: calc(100vw - 32px); max-height: min(76vh, 620px); overflow-y: auto; background: var(--hga11y-panel); color: var(--hga11y-text); border: 1px solid var(--hga11y-border); border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, .26); font-family: inherit; font-size: 15px; line-height: 1.45; direction: rtl; text-align: right; } .hga11y-panel[hidden] { display: none !important; } .hga11y-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; background: var(--hga11y-accent); color: var(--hga11y-on-accent); border-radius: 11px 11px 0 0; position: sticky; top: 0; } .hga11y-head h2 { margin: 0; font-size: 17px; font-weight: 700; color: inherit; } .hga11y-close { background: transparent; border: 2px solid transparent; color: inherit; font-size: 26px; line-height: 1; cursor: pointer; padding: 0 6px; border-radius: 6px; } .hga11y-close:focus-visible { border-color: #fff; } .hga11y-group { padding: 12px 14px 4px; } .hga11y-group > h3 { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: #5b6b76; } .hga11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .hga11y-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; background: #f6f8f9; border: 2px solid transparent; border-radius: 8px; color: var(--hga11y-text); font: inherit; font-size: 14px; text-align: start; cursor: pointer; } .hga11y-opt:hover { background: #e9eef1; } .hga11y-opt:focus-visible { outline: 3px solid #0d5b7a; outline-offset: 2px; } .hga11y-opt[aria-pressed="true"] { background: var(--hga11y-accent); color: var(--hga11y-on-accent); border-color: var(--hga11y-accent); } .hga11y-opt[aria-pressed="true"]::after { content: "\2713"; margin-inline-start: auto; font-weight: 700; } .hga11y-foot { padding: 10px 14px 16px; border-top: 1px solid var(--hga11y-border); margin-top: 10px; } .hga11y-reset { width: 100%; padding: 10px; background: #b3261e; color: #fff; border: 2px solid transparent; border-radius: 8px; font: inherit; font-weight: 700; cursor: pointer; } .hga11y-reset:hover { background: #8f1e18; } .hga11y-reset:focus-visible { outline: 3px solid #16232b; outline-offset: 2px; } .hga11y-links { margin-top: 10px; font-size: 13.5px; text-align: center; line-height: 1.8; } .hga11y-links a { color: #0d5b7a; text-decoration: underline; } /* ========================================================================== The adjustments themselves, toggled by classes on ========================================================================== */ /* Font scaling is done in JS, as an absolute px value per element. Doing it in CSS with `calc(1em * scale)` compounds down every nesting level: at scale 1.2 a 16px paragraph measured 39.8px. */ html.hga11y-contrast body { background: #000 !important; } html.hga11y-contrast body *:not(.hga11y-panel):not(.hga11y-panel *):not(.hga11y-btn):not(.hga11y-btn *) { background-color: #000 !important; color: #ffff00 !important; border-color: #ffff00 !important; text-shadow: none !important; box-shadow: none !important; } html.hga11y-contrast body a:not(.hga11y-panel *):not(.hga11y-btn) { color: #66ccff !important; } html.hga11y-contrast body img:not(.hga11y-panel *) { filter: grayscale(30%) contrast(1.2); } html.hga11y-light body { background: #fff !important; } html.hga11y-light body *:not(.hga11y-panel):not(.hga11y-panel *):not(.hga11y-btn):not(.hga11y-btn *) { background-color: #fff !important; color: #10202a !important; border-color: #10202a !important; text-shadow: none !important; } html.hga11y-light body a:not(.hga11y-panel *):not(.hga11y-btn) { color: #0b4a8f !important; } html.hga11y-mono body { filter: grayscale(100%); } html.hga11y-underline body a:not(.hga11y-panel a):not(.hga11y-btn) { text-decoration: underline !important; text-underline-offset: 2px; } html.hga11y-readable body *:not(.hga11y-panel *):not([class*="icon"]):not(i) { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important; letter-spacing: .02em !important; } html.hga11y-spacing body :is(p, li, td):not(.hga11y-panel *) { line-height: 1.9 !important; word-spacing: .16em !important; } html.hga11y-stopmotion *, html.hga11y-stopmotion *::before, html.hga11y-stopmotion *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; scroll-behavior: auto !important; } html.hga11y-bigcursor, html.hga11y-bigcursor * { cursor: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l14 9-6 1 3.5 7-2.6 1.2L10.4 13 5 17z' fill='%23000000' stroke='%23ffffff' stroke-width='1.2'/%3E%3C/svg%3E") 4 2, auto !important; } /* A visible focus ring everywhere; the theme does not always provide one. */ html.hga11y-focus body :is(a, button, input, select, textarea, [tabindex]):focus { outline: 3px solid #ff8c00 !important; outline-offset: 2px !important; } /* Reading guide */ .hga11y-guide { position: fixed; inset-inline: 0; height: 3.2rem; background: rgba(255, 216, 0, .22); border-top: 2px solid rgba(0, 0, 0, .55); border-bottom: 2px solid rgba(0, 0, 0, .55); pointer-events: none; z-index: 2147482000; } /* The skip link must actually appear when it receives focus. */ .skip-link:focus, .hga11y-skip:focus { position: fixed !important; left: 12px !important; top: 12px !important; width: auto !important; height: auto !important; clip: auto !important; clip-path: none !important; padding: 12px 20px !important; background: #0d5b7a !important; color: #fff !important; z-index: 2147483002 !important; border-radius: 8px; font-size: 16px; } @media (max-width: 480px) { .hga11y-panel { left: 8px; bottom: 74px; width: calc(100vw - 16px); } .hga11y-btn { width: 46px; height: 46px; } } @media print { .hga11y-btn, .hga11y-panel, .hga11y-guide { display: none !important; } }