/* ============================================ Meniu de accesibilitate - preferințe NATIVE ------------------------------------------------------------------ Ajustează DOAR afișarea acestui site. Nu este un „overlay" terț: nu rescrie semantica paginii și nu interferează cu cititoarele de ecran sau cu alte tehnologii de asistare folosite de vizitator. Preferințele se aplică prin clase/atribute pe și se rețin în localStorage. Stil de brand „autocolant": contur ink, fundal crem. ============================================ */ /* ---------- preferințe aplicate pe ---------- */ /* mărimea textului (scalează rădăcina => scalează rem-urile) */ html[data-a11y-text="1"] { font-size: 112.5%; } html[data-a11y-text="2"] { font-size: 125%; } /* contrast ridicat - rescrie variabilele de brand, deci recolorează tot site-ul */ html.a11y-contrast { --paper: #ffffff; --ink: #15102e; --ink-soft: #2b2150; --line: #b6aa90; --card: #ffffff; --coral-deep:#b21f3a; --indigo: #3d33c4; } html.a11y-contrast body { background: #fff; } html.a11y-contrast :focus-visible { outline-width: 4px; } /* evidențiază linkurile (fără butoanele și cardurile-link) */ html.a11y-links a:not([class*="btn"]):not(.lp-cta-mini):not(.lp-brand):not(.footer-logo):not(.mod-card):not(.home-blog-card):not(.pc-card):not(.a11y-fab) { text-decoration: underline !important; text-decoration-thickness: 2px; text-underline-offset: 3px; } /* font prietenos cu dislexia (stivă lizibilă din fonturi de sistem, fără dependențe) */ html.a11y-dys, html.a11y-dys body, html.a11y-dys button, html.a11y-dys input, html.a11y-dys textarea, html.a11y-dys select, html.a11y-dys label, html.a11y-dys h1, html.a11y-dys h2, html.a11y-dys h3, html.a11y-dys h4, html.a11y-dys h5, html.a11y-dys p, html.a11y-dys a, html.a11y-dys span, html.a11y-dys b, html.a11y-dys strong, html.a11y-dys em, html.a11y-dys li, html.a11y-dys td, html.a11y-dys th, html.a11y-dys summary { font-family: 'Atkinson Hyperlegible', 'Verdana', 'Tahoma', 'Segoe UI', sans-serif !important; letter-spacing: .015em; } /* spațiere mărită a textului (WCAG 1.4.12) */ html.a11y-spacing p, html.a11y-spacing li, html.a11y-spacing a, html.a11y-spacing span, html.a11y-spacing label, html.a11y-spacing td, html.a11y-spacing dd, html.a11y-spacing dt, html.a11y-spacing figcaption, html.a11y-spacing summary, html.a11y-spacing blockquote { line-height: 1.9 !important; letter-spacing: .12em !important; word-spacing: .16em !important; } html.a11y-spacing p { margin-bottom: 1.6em !important; } /* reducerea mișcării (suplimentar; prefers-reduced-motion este onorat oricum) */ html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } /* ghid de citire (banda care urmărește cursorul, doar vizual) */ .a11y-ruler-bar { position: fixed; left: 0; right: 0; top: 0; height: 2.4em; z-index: 96; pointer-events: none; display: none; background: rgba(91, 79, 233, .10); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); } html.a11y-ruler .a11y-ruler-bar { display: block; } /* ---------- butonul plutitor (FAB) ---------- */ .a11y-fab { position: fixed; left: 18px; bottom: 18px; z-index: 95; width: 50px; height: 50px; display: grid; place-items: center; padding: 0; color: #fff; background: var(--indigo); border: 3px solid var(--ink); border-radius: 50%; box-shadow: 4px 4px 0 var(--ink); cursor: pointer; transition: transform .12s, box-shadow .08s; } .a11y-fab:hover { transform: translateY(-2px); box-shadow: 6px 6px 0 var(--ink); } .a11y-fab:active { transform: translateY(1px); box-shadow: 2px 2px 0 var(--ink); } .a11y-fab svg { width: 28px; height: 28px; } .a11y-fab[hidden] { display: none; } @media print { .a11y-fab, .a11y-panel, .a11y-ruler-bar { display: none !important; } } /* ---------- panoul de preferințe ---------- */ .a11y-backdrop { position: fixed; inset: 0; z-index: 96; background: rgba(43, 33, 80, .28); display: none; } .a11y-backdrop[data-open="1"] { display: block; } .a11y-panel { position: fixed; left: 18px; bottom: 78px; z-index: 97; width: min(338px, calc(100vw - 36px)); max-height: min(78vh, 640px); overflow-y: auto; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 20px; box-shadow: 8px 8px 0 var(--ink); padding: 16px 16px 18px; font-family: var(--font-body); display: none; } .a11y-panel[data-open="1"] { display: block; } @media (max-width: 480px) { .a11y-panel { left: 12px; right: 12px; bottom: 12px; width: auto; max-height: 82vh; } .a11y-fab { left: 12px; bottom: 12px; } } .a11y-panel h2 { font-family: var(--font-display); font-size: 1.18rem; line-height: 1.2; margin: 0 0 2px; display: flex; align-items: center; gap: 8px; padding-right: 34px; } .a11y-panel h2 svg { width: 22px; height: 22px; color: var(--indigo); } .a11y-sub { font-size: .82rem; color: var(--ink-soft); margin: 0 0 12px; } .a11y-close { position: absolute; top: 13px; right: 13px; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; cursor: pointer; line-height: 1; background: #fff; color: var(--ink); border: 2.5px solid var(--ink); border-radius: 50%; font-size: 1.2rem; font-weight: 800; } .a11y-close:hover { background: var(--coral-soft); } .a11y-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 2px dashed var(--line); } .a11y-row:first-of-type { border-top: none; padding-top: 4px; } .a11y-label { font-weight: 800; font-size: .92rem; } .a11y-hint { display: block; font-weight: 400; font-size: .76rem; color: var(--ink-soft); margin-top: 1px; } /* comutator (switch) accesibil - starea e dată ȘI de poziție, nu doar de culoare */ .a11y-switch { flex: 0 0 auto; width: 52px; height: 30px; border-radius: 999px; cursor: pointer; background: #fff; border: 2.5px solid var(--ink); position: relative; padding: 0; transition: background .15s; } .a11y-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%; background: var(--ink); transition: transform .15s; } .a11y-switch[aria-pressed="true"] { background: var(--teal); } .a11y-switch[aria-pressed="true"]::after { transform: translateX(22px); } /* control segmentat (mărimea textului) */ .a11y-seg { display: inline-flex; border: 2.5px solid var(--ink); border-radius: 999px; overflow: hidden; } .a11y-seg button { border: none; border-left: 2px solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; font-family: var(--font-display); font-weight: 800; width: 38px; padding: 5px 0; } .a11y-seg button:first-child { border-left: none; } .a11y-seg button[aria-pressed="true"] { background: var(--amber); } .a11y-seg .s0 { font-size: .8rem; } .a11y-seg .s1 { font-size: .98rem; } .a11y-seg .s2 { font-size: 1.16rem; } .a11y-reset { margin-top: 14px; width: 100%; cursor: pointer; font-family: var(--font-display); font-weight: 800; font-size: .92rem; background: var(--coral-deep, #CC2945); color: #fff; border: 2.5px solid var(--ink); border-radius: 12px; padding: 10px; box-shadow: 3px 3px 0 var(--ink); transition: transform .1s, box-shadow .1s; } .a11y-reset:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); } .a11y-note { margin: 12px 2px 0; font-size: .72rem; color: var(--ink-soft); line-height: 1.5; } /* focus clar peste tot în widget */ .a11y-panel :focus-visible, .a11y-fab:focus-visible { outline: 3px solid var(--indigo); outline-offset: 2px; border-radius: 6px; }