/* TD88 Accessibility — Feature CSS rules */
/* Each attribute toggles a feature. */
/* ============= CONTENT ============= */
/* Font size — multiplier on root */
html[data-td88ac-font="1"] { font-size: 110% !important; }
html[data-td88ac-font="2"] { font-size: 120% !important; }
html[data-td88ac-font="3"] { font-size: 135% !important; }
html[data-td88ac-font="4"] { font-size: 150% !important; }
/* Line height */
html[data-td88ac-lineh="1"] :is(p, li, dd, dt, blockquote, td) { line-height: 1.7 !important; }
html[data-td88ac-lineh="2"] :is(p, li, dd, dt, blockquote, td) { line-height: 2.0 !important; }
html[data-td88ac-lineh="3"] :is(p, li, dd, dt, blockquote, td) { line-height: 2.4 !important; }
/* Letter spacing */
html[data-td88ac-letsp="1"] :is(p, li, dd, dt, blockquote, td, h1, h2, h3, h4, h5, h6, a) { letter-spacing: 0.05em !important; }
html[data-td88ac-letsp="2"] :is(p, li, dd, dt, blockquote, td, h1, h2, h3, h4, h5, h6, a) { letter-spacing: 0.1em !important; }
html[data-td88ac-letsp="3"] :is(p, li, dd, dt, blockquote, td, h1, h2, h3, h4, h5, h6, a) { letter-spacing: 0.18em !important; }
/* Dyslexia-friendly font — using system fonts (Comic Sans MS, Trebuchet MS).
To use OpenDyslexic, add the woff2 files to public/fonts/ and uncomment the @font-face below.
@font-face {
font-family: 'OpenDyslexic-TD88';
src: url('../fonts/OpenDyslexic-Regular.woff2') format('woff2');
font-weight: 400; font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'OpenDyslexic-TD88';
src: url('../fonts/OpenDyslexic-Bold.woff2') format('woff2');
font-weight: 700; font-style: normal;
font-display: swap;
}
*/
html[data-td88ac-dyslexia="1"] body,
html[data-td88ac-dyslexia="1"] body :not(#td88ac-root):not(#td88ac-root *) {
font-family: 'Comic Sans MS', 'Trebuchet MS', 'Verdana', sans-serif !important;
}
/* Highlight titles */
html[data-td88ac-htitles="1"] :is(h1, h2, h3, h4, h5, h6) {
background: #fff3a3 !important;
color: #1f2937 !important;
padding: 4px 8px !important;
border-left: 4px solid #f59e0b !important;
}
/* Highlight links */
html[data-td88ac-hlinks="1"] a:not(#td88ac-root *) {
text-decoration: underline !important;
text-decoration-thickness: 2px !important;
text-underline-offset: 3px !important;
background: #fef3c7 !important;
color: #1e40af !important;
padding: 2px 4px !important;
border-radius: 2px !important;
}
/* Reading mask — overlay that darkens everything except a horizontal band */
html[data-td88ac-rmask="1"] body::before,
html[data-td88ac-rmask="1"] body::after {
content: '';
position: fixed;
left: 0; right: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 999990;
pointer-events: none;
transition: top 0.05s ease, height 0.05s ease;
}
html[data-td88ac-rmask="1"] body::before {
top: 0;
height: var(--td88ac-mask-top, 30vh);
}
html[data-td88ac-rmask="1"] body::after {
bottom: 0;
height: var(--td88ac-mask-bottom, 50vh);
}
/* ============= COLOR & VISUAL ============= */
/* Dark mode — invert lightness, preserve hue */
html[data-td88ac-dark="1"] {
background: #111 !important;
}
html[data-td88ac-dark="1"] body {
background: #1a1a1a !important;
color: #e5e5e5 !important;
}
html[data-td88ac-dark="1"] body :is(p, li, dd, dt, td, span, div):not(#td88ac-root):not(#td88ac-root *) {
color: inherit !important;
}
html[data-td88ac-dark="1"] body :is(h1, h2, h3, h4, h5, h6):not(#td88ac-root *) {
color: #fff !important;
}
html[data-td88ac-dark="1"] body a:not(#td88ac-root *) {
color: #93c5fd !important;
}
html[data-td88ac-dark="1"] body img:not(#td88ac-root *) {
filter: brightness(0.85);
}
/* High contrast — pure black/white */
html[data-td88ac-contrast="1"] body,
html[data-td88ac-contrast="1"] body :not(#td88ac-root):not(#td88ac-root *) {
background: #000 !important;
color: #fff !important;
border-color: #fff !important;
}
html[data-td88ac-contrast="1"] body a:not(#td88ac-root *) { color: #ff0 !important; }
html[data-td88ac-contrast="1"] body :is(h1, h2, h3, h4, h5, h6):not(#td88ac-root *) { color: #fff !important; }
/* Grayscale */
html[data-td88ac-gray="1"] body { filter: grayscale(100%); }
/* Hide images */
html[data-td88ac-hideimg="1"] body img:not(#td88ac-root *),
html[data-td88ac-hideimg="1"] body picture:not(#td88ac-root *),
html[data-td88ac-hideimg="1"] body video:not(#td88ac-root *),
html[data-td88ac-hideimg="1"] body iframe:not(#td88ac-root *),
html[data-td88ac-hideimg="1"] body svg:not(#td88ac-root *):not(#td88ac-toggle svg) {
visibility: hidden !important;
}
/* ============= NAVIGATION ============= */
/* Stop animations */
html[data-td88ac-noanim="1"] *:not(#td88ac-root):not(#td88ac-root *) {
animation: none !important;
transition: none !important;
scroll-behavior: auto !important;
}
html[data-td88ac-noanim="1"] video[autoplay] { display: none !important; }
/* Big cursor */
html[data-td88ac-cursor="1"] body,
html[data-td88ac-cursor="1"] body * {
cursor: url('data:image/svg+xml;utf8,') 0 0, auto !important;
}
html[data-td88ac-cursor="1"] body :is(a, button, input, select, textarea, [role="button"]) {
cursor: url('data:image/svg+xml;utf8,') 24 24, pointer !important;
}
/* Reading guide — horizontal line follows mouse */
html[data-td88ac-rguide="1"] body::after {
content: '';
position: fixed;
left: 0; right: 0;
top: var(--td88ac-rguide-y, 50vh);
height: 30px;
background: rgba(124, 58, 237, 0.15);
border-top: 2px solid var(--td88ac-accent, #7C3AED);
border-bottom: 2px solid var(--td88ac-accent, #7C3AED);
pointer-events: none;
z-index: 999990;
transition: top 0.04s ease;
}
/* Strong focus outline */
html[data-td88ac-focus="1"] body :is(a, button, input, select, textarea, [tabindex]):focus,
html[data-td88ac-focus="1"] body :is(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: 4px solid #f59e0b !important;
outline-offset: 3px !important;
box-shadow: 0 0 0 8px rgba(245, 158, 11, 0.25) !important;
}