/* Eduspherics accessibility — driven by from accessibility.js */
:root {
--a11y-font-scale: 1;
}
html[data-a11y="1"] {
font-size: calc(100% * var(--a11y-font-scale, 1));
}
html[data-high-contrast="1"] {
--a11y-bg: #000;
--a11y-fg: #fff;
--a11y-link: #9cf;
--a11y-accent: #ff0;
--a11y-border: #fff;
}
html[data-high-contrast="1"] body {
background: #000 !important;
color: #fff !important;
}
html[data-high-contrast="1"] a {
color: #9cf !important;
text-decoration: underline;
}
html[data-high-contrast="1"] .card,
html[data-high-contrast="1"] .wrap,
html[data-high-contrast="1"] main,
html[data-high-contrast="1"] .question-card,
html[data-high-contrast="1"] .ph-card,
html[data-high-contrast="1"] nav,
html[data-high-contrast="1"] header {
background: #111 !important;
color: #fff !important;
border-color: #fff !important;
}
html[data-high-contrast="1"] button,
html[data-high-contrast="1"] .btn,
html[data-high-contrast="1"] input,
html[data-high-contrast="1"] select,
html[data-high-contrast="1"] textarea {
background: #000 !important;
color: #fff !important;
border: 2px solid #fff !important;
}
html[data-high-contrast="1"] .btn-solid,
html[data-high-contrast="1"] .btn-teal,
html[data-high-contrast="1"] button[type="submit"] {
background: #ff0 !important;
color: #000 !important;
border-color: #ff0 !important;
}
html[data-dyslexia-font="1"] body,
html[data-dyslexia-font="1"] input,
html[data-dyslexia-font="1"] textarea,
html[data-dyslexia-font="1"] button,
html[data-dyslexia-font="1"] select {
font-family: "Lucida Sans Unicode", "Comic Sans MS", "Trebuchet MS", Verdana, sans-serif !important;
letter-spacing: 0.04em;
word-spacing: 0.08em;
line-height: 1.6;
}
html[data-reduced-motion="1"] *,
html[data-reduced-motion="1"] *::before,
html[data-reduced-motion="1"] *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
/* Focus visibility */
html[data-a11y="1"] :focus-visible {
outline: 3px solid #0e7490 !important;
outline-offset: 3px !important;
}
html[data-high-contrast="1"] :focus-visible {
outline: 3px solid #ff0 !important;
}
.a11y-skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 10000;
padding: 0.75rem 1rem;
background: #0f3b5c;
color: #fff;
font-weight: 800;
text-decoration: none;
border-radius: 0 0 8px 0;
}
.a11y-skip-link:focus {
left: 0;
}
.a11y-tts-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.7rem;
border-radius: 0.5rem;
border: 1px solid #d5e0dc;
background: #fff;
color: #0f3b5c;
font-weight: 700;
font-size: 0.8rem;
cursor: pointer;
}
html[data-high-contrast="1"] .a11y-tts-btn {
background: #000 !important;
color: #ff0 !important;
border-color: #ff0 !important;
}
.a11y-tts-btn[aria-pressed="true"] {
background: #ecfeff;
border-color: #0e7490;
}
.a11y-live {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
/* Captions: ensure tracks are visible when preference on */
html[data-captions="1"] video::cue {
background: rgba(0, 0, 0, 0.75);
color: #fff;
font-size: 1.05em;
}