/* ==========================================================================
Accessibility Widget – UI + page effects
All page effects are driven by classes on : html.awdg-{feature}-{level}
The widget itself (#awdg-root) is always excluded from those effects.
========================================================================== */
:root {
--awdg-accent: #1f5fbf;
--awdg-offset-x: 20px;
--awdg-offset-y: 20px;
--awdg-scale: 1;
--awdg-z: 2147483000;
--awdg-bg: #ffffff;
--awdg-fg: #111111;
--awdg-muted: #555555;
--awdg-tile: #f4f6f9;
--awdg-tile-border: #d9dee6;
--awdg-radius: 14px;
--awdg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* --------------------------------------------------------------------------
Skip link
-------------------------------------------------------------------------- */
.awdg-skip-link {
position: absolute;
left: 8px;
top: -100px;
z-index: var(--awdg-z);
padding: 12px 18px;
background: var(--awdg-accent);
color: #fff !important;
font: 600 16px/1.2 var(--awdg-font);
border-radius: 8px;
text-decoration: none;
transition: top .15s ease;
}
.awdg-skip-link:focus {
top: 8px;
outline: 3px solid #000;
outline-offset: 2px;
}
/* --------------------------------------------------------------------------
Root / trigger button
-------------------------------------------------------------------------- */
#awdg-root,
#awdg-root * {
box-sizing: border-box;
}
#awdg-root {
font: 16px/1.4 var(--awdg-font);
color: var(--awdg-fg);
text-align: left;
letter-spacing: normal;
word-spacing: normal;
}
#awdg-root.awdg-size-small { --awdg-scale: .85; }
#awdg-root.awdg-size-medium { --awdg-scale: 1; }
#awdg-root.awdg-size-large { --awdg-scale: 1.2; }
#awdg-root.awdg-big { --awdg-scale: 1.35; }
#awdg-root.awdg-hidden { display: none !important; }
@media (max-width: 600px) {
#awdg-root.awdg-no-mobile { display: none !important; }
}
#awdg-btn {
position: fixed;
z-index: var(--awdg-z);
width: calc(56px * var(--awdg-scale));
height: calc(56px * var(--awdg-scale));
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--awdg-accent);
color: #fff;
cursor: pointer;
box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
display: flex;
align-items: center;
justify-content: center;
transition: transform .15s ease, box-shadow .15s ease;
}
#awdg-btn svg {
width: 62%;
height: 62%;
fill: currentColor;
display: block;
}
#awdg-btn:hover { transform: scale(1.06); }
#awdg-btn:focus-visible {
outline: 3px solid #000;
outline-offset: 3px;
box-shadow: 0 0 0 5px #fff;
}
#awdg-root.awdg-open #awdg-btn { display: none; }
/* Corners */
.awdg-pos-bottom-right #awdg-btn { right: var(--awdg-offset-x); bottom: var(--awdg-offset-y); }
.awdg-pos-bottom-left #awdg-btn { left: var(--awdg-offset-x); bottom: var(--awdg-offset-y); }
.awdg-pos-top-right #awdg-btn { right: var(--awdg-offset-x); top: var(--awdg-offset-y); }
.awdg-pos-top-left #awdg-btn { left: var(--awdg-offset-x); top: var(--awdg-offset-y); }
/* --------------------------------------------------------------------------
Panel
-------------------------------------------------------------------------- */
#awdg-overlay {
position: fixed;
inset: 0;
z-index: calc(var(--awdg-z) - 1);
background: rgba(0, 0, 0, .25);
display: none;
}
#awdg-root.awdg-open #awdg-overlay { display: block; }
#awdg-panel {
position: fixed;
z-index: var(--awdg-z);
top: 0;
bottom: 0;
width: calc(400px * var(--awdg-scale));
max-width: 100vw;
background: var(--awdg-bg);
color: var(--awdg-fg);
box-shadow: 0 0 40px rgba(0, 0, 0, .35);
display: none;
flex-direction: column;
font-size: calc(16px * var(--awdg-scale));
}
#awdg-root.awdg-open #awdg-panel { display: flex; }
.awdg-pos-bottom-right #awdg-panel,
.awdg-pos-top-right #awdg-panel { right: 0; animation: awdg-in-right .2s ease; }
.awdg-pos-bottom-left #awdg-panel,
.awdg-pos-top-left #awdg-panel { left: 0; animation: awdg-in-left .2s ease; }
@keyframes awdg-in-right { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes awdg-in-left { from { transform: translateX(-30px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
#awdg-panel { animation: none !important; }
#awdg-btn { transition: none; }
}
#awdg-panel header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: calc(14px * var(--awdg-scale)) calc(18px * var(--awdg-scale));
background: var(--awdg-accent);
color: #fff;
}
#awdg-panel h2 {
margin: 0;
font: 700 1.05em/1.2 var(--awdg-font);
color: #fff;
}
#awdg-panel h2 small {
display: block;
font-weight: 400;
font-size: .75em;
opacity: .9;
}
#awdg-close {
flex: 0 0 auto;
width: calc(40px * var(--awdg-scale));
height: calc(40px * var(--awdg-scale));
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .22);
color: #fff;
font-size: 1.4em;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
#awdg-close:hover { background: rgba(255, 255, 255, .35); }
#awdg-close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
#awdg-body {
flex: 1 1 auto;
overflow-y: auto;
padding: calc(14px * var(--awdg-scale)) calc(18px * var(--awdg-scale));
-webkit-overflow-scrolling: touch;
}
/* Oversized switch */
.awdg-switch {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 0 0 calc(14px * var(--awdg-scale));
font-weight: 600;
cursor: pointer;
}
.awdg-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.awdg-switch .awdg-track {
flex: 0 0 auto;
width: calc(46px * var(--awdg-scale));
height: calc(26px * var(--awdg-scale));
border-radius: 999px;
background: #b8bfc9;
position: relative;
transition: background .15s;
}
.awdg-switch .awdg-track::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: calc(20px * var(--awdg-scale));
height: calc(20px * var(--awdg-scale));
border-radius: 50%;
background: #fff;
transition: transform .15s;
}
.awdg-switch input:checked + .awdg-track { background: var(--awdg-accent); }
.awdg-switch input:checked + .awdg-track::after { transform: translateX(calc(20px * var(--awdg-scale))); }
.awdg-switch input:focus-visible + .awdg-track { outline: 3px solid #000; outline-offset: 2px; }
/* Tiles grid */
#awdg-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: calc(10px * var(--awdg-scale));
margin: 0;
padding: 0;
list-style: none;
}
#awdg-grid li { display: flex; }
.awdg-tile {
position: relative;
height: 100%;
min-height: calc(104px * var(--awdg-scale));
width: 100%;
padding: calc(14px * var(--awdg-scale)) 8px calc(20px * var(--awdg-scale));
border: 2px solid var(--awdg-tile-border);
border-radius: var(--awdg-radius);
background: var(--awdg-tile);
color: var(--awdg-fg);
font: 600 .9em/1.25 var(--awdg-font);
text-align: center;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
transition: border-color .12s, background .12s;
}
.awdg-tile svg {
width: calc(30px * var(--awdg-scale));
height: calc(30px * var(--awdg-scale));
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.awdg-tile:hover { border-color: var(--awdg-accent); background: #fff; }
.awdg-tile:focus-visible { outline: 3px solid #000; outline-offset: 2px; }
.awdg-tile[aria-pressed="true"],
.awdg-tile.awdg-on {
background: var(--awdg-accent);
border-color: var(--awdg-accent);
color: #fff;
}
.awdg-tile .awdg-sub {
display: block;
font-weight: 400;
font-size: .82em;
opacity: .85;
min-height: 1em;
}
.awdg-dots {
position: absolute;
left: 0;
right: 0;
bottom: 8px;
display: flex;
justify-content: center;
gap: 5px;
}
.awdg-dots i {
width: 7px;
height: 7px;
border-radius: 50%;
background: #c3c9d3;
}
.awdg-tile.awdg-on .awdg-dots i { background: rgba(255, 255, 255, .45); }
.awdg-tile.awdg-on .awdg-dots i.awdg-fill { background: #fff; }
/* Actions */
.awdg-actions { margin-top: calc(14px * var(--awdg-scale)); display: flex; flex-direction: column; gap: 8px; }
.awdg-action {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: calc(12px * var(--awdg-scale)) 14px;
border: 2px solid var(--awdg-tile-border);
border-radius: 10px;
background: var(--awdg-tile);
color: var(--awdg-fg);
font: 600 .95em/1.2 var(--awdg-font);
text-align: left;
cursor: pointer;
}
.awdg-action svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.awdg-action:hover { border-color: var(--awdg-accent); }
.awdg-action:focus-visible { outline: 3px solid #000; outline-offset: 2px; }
.awdg-action.awdg-primary { background: var(--awdg-accent); border-color: var(--awdg-accent); color: #fff; }
.awdg-action select {
margin-left: auto;
font: inherit;
font-size: .9em;
padding: 4px 6px;
border-radius: 6px;
border: 1px solid var(--awdg-tile-border);
background: #fff;
color: var(--awdg-fg);
}
#awdg-panel footer {
padding: 10px calc(18px * var(--awdg-scale));
border-top: 1px solid var(--awdg-tile-border);
font-size: .8em;
color: var(--awdg-muted);
display: flex;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
#awdg-panel footer a { color: var(--awdg-accent); }
/* Live region */
#awdg-live {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
/* Trigger from shortcode */
.awdg-open-trigger { cursor: pointer; }
/* --------------------------------------------------------------------------
Tooltip / reading guide / reading mask (elements created by JS)
-------------------------------------------------------------------------- */
#awdg-tooltip {
position: fixed;
z-index: var(--awdg-z);
max-width: 320px;
padding: 8px 12px;
background: #111;
color: #fff;
font: 500 15px/1.35 var(--awdg-font);
border-radius: 8px;
box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
pointer-events: none;
display: none;
}
#awdg-guide {
position: fixed;
left: 0;
right: 0;
height: 12px;
margin-top: -6px;
z-index: calc(var(--awdg-z) - 2);
background: rgba(255, 210, 0, .35);
border-top: 2px solid #ffb400;
border-bottom: 2px solid #ffb400;
pointer-events: none;
display: none;
}
#awdg-mask-top,
#awdg-mask-bottom {
position: fixed;
left: 0;
right: 0;
z-index: calc(var(--awdg-z) - 2);
background: rgba(0, 0, 0, .7);
pointer-events: none;
display: none;
}
#awdg-mask-top { top: 0; }
#awdg-mask-bottom { bottom: 0; }
/* ==========================================================================
PAGE EFFECTS
========================================================================== */
/* ---- Contrast 1: invert colors (media re-inverted) ---------------------- */
html.awdg-contrast-1 { filter: invert(1) hue-rotate(180deg); background: #fff; }
html.awdg-contrast-1 :is(img, picture, video, iframe, canvas, embed, object, [style*="background-image"]):not(#awdg-root *),
html.awdg-contrast-1 #awdg-btn,
html.awdg-contrast-1 #awdg-panel,
html.awdg-contrast-1 #awdg-tooltip {
filter: invert(1) hue-rotate(180deg);
}
/* ---- Contrast 2: dark high contrast ------------------------------------ */
html.awdg-contrast-2 body,
html.awdg-contrast-2 body *:not(#awdg-root):not(#awdg-root *):not(img):not(picture):not(video):not(iframe):not(svg):not(svg *):not(canvas) {
background-color: #000 !important;
background-image: none !important;
color: #fff !important;
border-color: #777 !important;
text-shadow: none !important;
box-shadow: none !important;
}
html.awdg-contrast-2 :is(a, a *):not(#awdg-root *) { color: #ffd200 !important; text-decoration: underline !important; }
html.awdg-contrast-2 :is(button, input, select, textarea, [role="button"]):not(#awdg-root *) { border: 2px solid #fff !important; }
html.awdg-contrast-2 :is(h1, h2, h3, h4, h5, h6):not(#awdg-root *) { color: #fff !important; }
html.awdg-contrast-2 svg:not(#awdg-root svg) { fill: #fff; }
/* ---- Contrast 3: light high contrast ----------------------------------- */
html.awdg-contrast-3 body,
html.awdg-contrast-3 body *:not(#awdg-root):not(#awdg-root *):not(img):not(picture):not(video):not(iframe):not(svg):not(svg *):not(canvas) {
background-color: #fff !important;
background-image: none !important;
color: #000 !important;
border-color: #000 !important;
text-shadow: none !important;
box-shadow: none !important;
}
html.awdg-contrast-3 :is(a, a *):not(#awdg-root *) { color: #0000cc !important; text-decoration: underline !important; }
html.awdg-contrast-3 :is(button, input, select, textarea, [role="button"]):not(#awdg-root *) { border: 2px solid #000 !important; }
html.awdg-contrast-3 svg:not(#awdg-root svg) { fill: #000; }
/* ---- Highlight links --------------------------------------------------- */
html.awdg-links-1 a:not(#awdg-root *),
html.awdg-links-1 a:not(#awdg-root *) * {
color: #000 !important;
background-color: #fff200 !important;
text-decoration: underline !important;
}
html.awdg-links-1 a:not(#awdg-root *) {
outline: 2px solid #000 !important;
outline-offset: 1px;
}
/* ---- Text spacing ------------------------------------------------------ */
html.awdg-spacing-1 body *:not(#awdg-root):not(#awdg-root *):not([data-awdg-x]):not([data-awdg-x] *) { letter-spacing: .08em !important; word-spacing: .16em !important; }
html.awdg-spacing-2 body *:not(#awdg-root):not(#awdg-root *):not([data-awdg-x]):not([data-awdg-x] *) { letter-spacing: .16em !important; word-spacing: .32em !important; }
html.awdg-spacing-3 body *:not(#awdg-root):not(#awdg-root *):not([data-awdg-x]):not([data-awdg-x] *) { letter-spacing: .26em !important; word-spacing: .5em !important; }
/* ---- Pause animations -------------------------------------------------- */
html.awdg-pause-1 *:not(#awdg-root):not(#awdg-root *),
html.awdg-pause-1 *:not(#awdg-root):not(#awdg-root *)::before,
html.awdg-pause-1 *:not(#awdg-root):not(#awdg-root *)::after {
animation-play-state: paused !important;
animation-iteration-count: 1 !important;
transition: none !important;
scroll-behavior: auto !important;
}
/* ---- Hide images ------------------------------------------------------- */
html.awdg-images-1 :is(img, picture, video, canvas, [role="img"], svg):not(#awdg-root *):not(#awdg-root) {
visibility: hidden !important;
}
html.awdg-images-1 body *:not(#awdg-root):not(#awdg-root *) {
background-image: none !important;
}
/* ---- Fonts ------------------------------------------------------------- */
html.awdg-font-1 body *:not(#awdg-root):not(#awdg-root *):not([data-awdg-x]):not([data-awdg-x] *):not(i):not([class*="fa-"]):not([class*="icon"]):not(.dashicons):not(code):not(pre) {
font-family: "AWDG Dyslexic", "OpenDyslexic", "Comic Sans MS", Verdana, Arial, sans-serif !important;
letter-spacing: .04em;
word-spacing: .12em;
}
html.awdg-font-2 body *:not(#awdg-root):not(#awdg-root *):not([data-awdg-x]):not([data-awdg-x] *):not(i):not([class*="fa-"]):not([class*="icon"]):not(.dashicons):not(code):not(pre) {
font-family: Verdana, Arial, Helvetica, sans-serif !important;
}
/* ---- Big cursor -------------------------------------------------------- */
html.awdg-cursor-1,
html.awdg-cursor-1 * {
cursor: url("data:image/svg+xml;utf8,") 6 3, auto !important;
}
html.awdg-cursor-2,
html.awdg-cursor-2 * {
cursor: url("data:image/svg+xml;utf8,") 6 3, auto !important;
}
html.awdg-cursor-1 :is(a, button, [role="button"], input[type="submit"], input[type="button"], label, select, summary),
html.awdg-cursor-1 :is(a, button, [role="button"], label, summary) * {
cursor: url("data:image/svg+xml;utf8,") 20 4, pointer !important;
}
html.awdg-cursor-2 :is(a, button, [role="button"], input[type="submit"], input[type="button"], label, select, summary),
html.awdg-cursor-2 :is(a, button, [role="button"], label, summary) * {
cursor: url("data:image/svg+xml;utf8,") 20 4, pointer !important;
}
/* ---- Line height ------------------------------------------------------- */
html.awdg-lineheight-1 body *:not(#awdg-root):not(#awdg-root *):not([data-awdg-x]):not([data-awdg-x] *) { line-height: 1.5 !important; }
html.awdg-lineheight-2 body *:not(#awdg-root):not(#awdg-root *):not([data-awdg-x]):not([data-awdg-x] *) { line-height: 1.8 !important; }
html.awdg-lineheight-3 body *:not(#awdg-root):not(#awdg-root *):not([data-awdg-x]):not([data-awdg-x] *) { line-height: 2.2 !important; }
/* ---- Text align -------------------------------------------------------- */
html.awdg-align-1 body *:not(#awdg-root):not(#awdg-root *):not([data-awdg-x]):not([data-awdg-x] *) { text-align: left !important; }
html.awdg-align-2 body *:not(#awdg-root):not(#awdg-root *):not([data-awdg-x]):not([data-awdg-x] *) { text-align: center !important; }
html.awdg-align-3 body *:not(#awdg-root):not(#awdg-root *):not([data-awdg-x]):not([data-awdg-x] *) { text-align: right !important; }
/* ---- Saturation (combined with invert when both are active) ------------ */
html.awdg-saturation-1 { filter: saturate(.4); }
html.awdg-saturation-2 { filter: saturate(2.2); }
html.awdg-saturation-3 { filter: grayscale(1); }
html.awdg-contrast-1.awdg-saturation-1 { filter: invert(1) hue-rotate(180deg) saturate(.4); }
html.awdg-contrast-1.awdg-saturation-2 { filter: invert(1) hue-rotate(180deg) saturate(2.2); }
html.awdg-contrast-1.awdg-saturation-3 { filter: invert(1) hue-rotate(180deg) grayscale(1); }
/* ---- Screen reader: highlight what is being read ----------------------- */
html.awdg-reader-1 .awdg-reading {
outline: 4px solid #ffb400 !important;
outline-offset: 2px;
background-color: rgba(255, 210, 0, .18) !important;
}
/* ---- Strong focus outline whenever any option is active ---------------- */
html.awdg-active :focus-visible:not(#awdg-root *) {
outline: 3px solid #ffb400 !important;
outline-offset: 2px !important;
}