/* ========================================================================
Meniu de accesibilitate — Școala Hlipiceni
Conformitate orientativă: WCAG 2.1 AA, EN 301 549, Legea 62/2024 (RO).
======================================================================== */
/* ---------- Buton declanșare (fixed, vizibil pe toate paginile) ---------- */
#accessibility-toggle {
position: fixed;
left: 18px;
bottom: 18px;
width: 56px;
height: 56px;
border-radius: 50%;
background: #0d6efd;
color: #fff;
border: 0;
box-shadow: 0 6px 18px rgba(13, 110, 253, .35);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.6rem;
line-height: 1;
z-index: 1090;
cursor: pointer;
transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
#accessibility-toggle:hover,
#accessibility-toggle:focus-visible {
background: #0b5ed7;
transform: scale(1.06);
box-shadow: 0 10px 22px rgba(13, 110, 253, .45);
outline: 0;
}
#accessibility-toggle:focus-visible {
box-shadow: 0 0 0 4px rgba(13, 110, 253, .25), 0 10px 22px rgba(13, 110, 253, .45);
}
/* ---------- Panou lateral (dreapta) ---------- */
.accessibility-panel {
position: fixed;
top: 0;
right: 0;
width: 380px;
max-width: 92vw;
height: 100vh;
background: #ffffff;
box-shadow: -8px 0 24px rgba(0, 0, 0, .15);
transform: translateX(105%);
transition: transform .25s ease;
z-index: 1100;
overflow: hidden;
display: flex;
flex-direction: column;
}
.accessibility-panel.active {
transform: translateX(0);
}
.accessibility-panel-inner {
padding: 1.25rem 1.25rem 2rem;
overflow-y: auto;
flex: 1;
}
.accessibility-panel-header h2 {
color: #0f172a;
}
.accessibility-group h3 {
color: #1e293b;
font-weight: 700;
}
.a11y-toggle.is-on {
background-color: #0d6efd !important;
color: #fff !important;
border-color: #0d6efd !important;
}
/* Backdrop semi-transparent când panoul e deschis */
.accessibility-panel.active::before {
content: "";
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .35);
z-index: -1;
pointer-events: none;
}
/* ===============================================================
Body modifiers (aplicate prin JS pe )
=============================================================== */
/* Mărimi de font */
body.a11y-font-small { font-size: 92%; }
body.a11y-font-large { font-size: 115%; }
body.a11y-font-xlarge { font-size: 130%; }
/* Spațiere extinsă pentru lectură */
body.a11y-spacing,
body.a11y-spacing p,
body.a11y-spacing li,
body.a11y-spacing span,
body.a11y-spacing a,
body.a11y-spacing td,
body.a11y-spacing th {
line-height: 1.9 !important;
letter-spacing: .04em !important;
word-spacing: .12em !important;
}
body.a11y-spacing p { margin-bottom: 1.4em !important; }
/* Font pentru dislexie (fallback la fonturi de sistem cu legibilitate ridicată) */
body.a11y-dyslexia-font,
body.a11y-dyslexia-font * {
font-family: "Comic Sans MS", "Trebuchet MS", "Verdana", Arial, sans-serif !important;
letter-spacing: .03em !important;
}
/* Mod contrast ridicat (negru / galben — standardul WCAG AAA) */
body.a11y-high-contrast,
body.a11y-high-contrast * {
background: #000 !important;
color: #ffeb3b !important;
border-color: #ffeb3b !important;
}
body.a11y-high-contrast a,
body.a11y-high-contrast a * {
color: #ffffff !important;
text-decoration: underline !important;
}
body.a11y-high-contrast button,
body.a11y-high-contrast .btn,
body.a11y-high-contrast input,
body.a11y-high-contrast select,
body.a11y-high-contrast textarea {
background: #000 !important;
color: #ffeb3b !important;
border: 2px solid #ffeb3b !important;
}
body.a11y-high-contrast img,
body.a11y-high-contrast video,
body.a11y-high-contrast iframe {
filter: grayscale(1) contrast(1.15);
}
/* Mod grayscale */
body.a11y-grayscale {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
/* Inversare culori (păstrează imaginile aproximativ normale prin hue-rotate) */
body.a11y-invert {
filter: invert(1) hue-rotate(180deg);
-webkit-filter: invert(1) hue-rotate(180deg);
background: #fff;
}
body.a11y-invert img,
body.a11y-invert video,
body.a11y-invert iframe,
body.a11y-invert picture {
filter: invert(1) hue-rotate(180deg);
-webkit-filter: invert(1) hue-rotate(180deg);
}
/* Reducere animații */
body.a11y-reduce-motion *,
body.a11y-reduce-motion *::before,
body.a11y-reduce-motion *::after {
animation-duration: .001ms !important;
animation-delay: 0ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
transition-delay: 0ms !important;
scroll-behavior: auto !important;
}
/* Pauză completă animații */
body.a11y-pause-animations *,
body.a11y-pause-animations *::before,
body.a11y-pause-animations *::after {
animation-play-state: paused !important;
}
/* Focus vizibil mai pronunțat (standard WCAG 2.4.7) */
body.a11y-high-contrast :focus,
body.a11y-high-contrast :focus-visible {
outline: 3px solid #ffeb3b !important;
outline-offset: 3px !important;
}
:focus-visible {
outline: 3px solid rgba(13, 110, 253, .55);
outline-offset: 2px;
}
/* Skip link mai vizibil (accesat cu Tab) */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #0d6efd;
color: #fff;
padding: 8px 14px;
z-index: 9999;
text-decoration: none;
font-weight: 600;
border-radius: 0 0 6px 0;
}
.skip-link:focus {
top: 0;
}
/* ===============================================================
FUNCȚII EXTINSE (linkuri / cursor / ghid / saturare / sunet)
=============================================================== */
/* Subliniază linkurile */
body.a11y-underline-links a,
body.a11y-underline-links a * {
text-decoration: underline !important;
}
/* Evidențiază linkurile cu fundal galben */
body.a11y-highlight-links a {
background: #fff7b3 !important;
color: #1a1a1a !important;
padding: 0 .15em !important;
border-radius: 3px !important;
box-shadow: 0 0 0 2px #fff7b3 !important;
}
/* Evidențiază titlurile */
body.a11y-highlight-headings h1,
body.a11y-highlight-headings h2,
body.a11y-highlight-headings h3,
body.a11y-highlight-headings h4,
body.a11y-highlight-headings h5,
body.a11y-highlight-headings h6 {
background: linear-gradient(90deg, rgba(13,110,253,.15), transparent 90%) !important;
border-left: 4px solid #0d6efd !important;
padding: .25em .6em !important;
border-radius: 3px !important;
}
/* Evidențiază butoanele */
body.a11y-highlight-buttons button,
body.a11y-highlight-buttons .btn,
body.a11y-highlight-buttons [role="button"] {
box-shadow: 0 0 0 3px #ffeb3b !important;
outline: 2px solid #1f2937 !important;
outline-offset: 2px !important;
}
/* Cursor mărit (SVG inline ca data-URI — evită un fișier extra) */
body.a11y-big-cursor,
body.a11y-big-cursor * {
cursor: url('data:image/svg+xml;utf8,') 4 4, auto !important;
}
body.a11y-big-cursor a,
body.a11y-big-cursor button,
body.a11y-big-cursor [role="button"],
body.a11y-big-cursor input[type="submit"] {
cursor: url('data:image/svg+xml;utf8,') 24 24, pointer !important;
}
/* Ghid de lectură — bandă orizontală subțire care urmărește cursorul */
.a11y-reading-guide-line {
position: fixed;
left: 0;
width: 100vw;
height: 4px;
background: rgba(255, 235, 59, .85);
box-shadow: 0 0 10px rgba(255, 193, 7, .8);
pointer-events: none;
z-index: 1080;
display: none;
transition: top .04s linear;
}
body.a11y-reading-guide .a11y-reading-guide-line {
display: block;
}
/* Mască de lectură — întunecă ecranul, lasă o bandă luminată în jurul cursorului */
.a11y-reading-mask-top,
.a11y-reading-mask-bottom {
position: fixed;
left: 0;
width: 100vw;
background: rgba(0, 0, 0, .55);
pointer-events: none;
z-index: 1080;
display: none;
transition: height .04s linear, top .04s linear;
}
.a11y-reading-mask-top { top: 0; }
.a11y-reading-mask-bottom { bottom: 0; }
body.a11y-reading-mask .a11y-reading-mask-top,
body.a11y-reading-mask .a11y-reading-mask-bottom {
display: block;
}
/* Saturare culori (filtre) — se combină cu grayscale/invert dacă există */
body.a11y-saturate-low { filter: saturate(.4); }
body.a11y-saturate-high { filter: saturate(1.7); }
body.a11y-saturate-low.a11y-grayscale,
body.a11y-saturate-high.a11y-grayscale { filter: grayscale(1); } /* grayscale câștigă */
body.a11y-saturate-low.a11y-invert,
body.a11y-saturate-high.a11y-invert {
/* invert câștigă; saturare nu se aplică simultan în mod uzual */
}
/* Indicator când TTS citește activ */
body.a11y-tts-active::after {
content: "🔊 Citire în curs… apasă „Oprește” să oprești";
position: fixed;
bottom: 80px;
left: 18px;
background: #0d6efd;
color: #fff;
padding: .5rem 1rem;
border-radius: 999px;
box-shadow: 0 6px 18px rgba(13, 110, 253, .35);
z-index: 1095;
font-size: .85rem;
font-weight: 600;
}
/* Pe ecrane mici, butonul mai mic și mai aproape de margine */
@media (max-width: 480px) {
#accessibility-toggle {
width: 48px;
height: 48px;
font-size: 1.4rem;
left: 12px;
bottom: 12px;
}
.accessibility-panel-inner {
padding: 1rem;
}
}