@charset "UTF-8"; /* ===================================================================== Unelte de accesibilitate Obligatorii pentru instituțiile publice: Directiva UE 2016/2102, transpusă în România prin OUG nr. 112/2018. Dincolo de obligație, sunt folosite zilnic de persoane cu deficiențe de vedere, dislexie sau sensibilitate la mișcare. Toate opțiunile se comandă prin atribute pe , deci se pot aplica înainte de randare (fără licărire) și se rețin între vizite. ===================================================================== */ /* ---------- 1. Mărimea textului ----------------------------------- */ /* Baza e procentuală, deci tot ce e scris în rem se scalează odată cu ea. */ html { font-size: calc(100% * var(--a11y-scale, 1)); } /* ---------- 2. Butonul plutitor ------------------------------------ */ .a11y-toggle { position: fixed; left: 22px; bottom: 22px; z-index: 400; width: 52px; height: 52px; display: grid; place-items: center; background: var(--navy, #1B3C74); color: #fff; border: 2px solid #fff; border-radius: 50%; cursor: pointer; box-shadow: 0 6px 20px rgba(20, 46, 90, .35); transition: transform .2s ease, background .2s ease; } .a11y-toggle:hover { background: var(--navy-light, #2A5199); transform: scale(1.06); } .a11y-toggle:focus-visible { outline: 3px solid var(--coral, #F26247); outline-offset: 3px; } @media (max-width: 640px) { .a11y-toggle { left: 14px; bottom: 14px; width: 46px; height: 46px; } } /* ---------- 3. Panoul ---------------------------------------------- */ .a11y-panel { position: fixed; left: 22px; bottom: 86px; z-index: 401; width: min(320px, calc(100vw - 44px)); max-height: min(72vh, 620px); overflow-y: auto; background: #fff; color: #1D2433; border: 1px solid #E3E7EE; border-radius: 16px; box-shadow: 0 24px 60px rgba(20, 46, 90, .28); padding: 1.1rem; } @media (max-width: 640px) { .a11y-panel { left: 14px; bottom: 70px; } } .a11y-panel h2 { font-size: 1rem; margin: 0 0 .2rem; color: #1D2433; display: flex; align-items: center; gap: .5rem; } .a11y-panel__hint { font-size: .78rem; color: #6F7380; margin: 0 0 1rem; } .a11y-group { margin-bottom: 1rem; } .a11y-group__title { font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #6F7380; margin: 0 0 .5rem; } /* Mărimea textului: trei butoane */ .a11y-size { display: flex; gap: .4rem; align-items: center; } .a11y-size button { flex: 1; padding: .55rem .4rem; background: #F6F8FC; border: 1px solid #E3E7EE; border-radius: 8px; font: inherit; color: #1D2433; cursor: pointer; transition: background .16s ease, border-color .16s ease; } .a11y-size button:hover { background: #EEF3FB; border-color: #2A5199; } .a11y-size__value { flex: 1.2; text-align: center; font-size: .85rem; font-weight: 600; color: #1B3C74; font-variant-numeric: tabular-nums; } /* Comutatoare */ .a11y-opt { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .6rem .7rem; margin-bottom: .3rem; background: #fff; border: 1px solid #E3E7EE; border-radius: 8px; font: inherit; font-size: .87rem; color: #1D2433; text-align: left; cursor: pointer; transition: background .16s ease, border-color .16s ease; } .a11y-opt:hover { background: #F6F8FC; border-color: #2A5199; } .a11y-opt[aria-pressed="true"] { background: #EEF3FB; border-color: #1B3C74; font-weight: 600; } .a11y-opt__mark { margin-left: auto; flex: none; width: 34px; height: 19px; border-radius: 999px; background: #D7DEE9; position: relative; transition: background .18s ease; } .a11y-opt__mark::after { content: ''; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s ease; } .a11y-opt[aria-pressed="true"] .a11y-opt__mark { background: #1F8A5B; } .a11y-opt[aria-pressed="true"] .a11y-opt__mark::after { transform: translateX(15px); } .a11y-reset { width: 100%; padding: .6rem; margin-top: .3rem; background: #fff; border: 1px solid #F0C4BE; border-radius: 8px; font: inherit; font-size: .85rem; color: #C0392B; cursor: pointer; } .a11y-reset:hover { background: #C0392B; color: #fff; border-color: #C0392B; } /* ===================================================================== Efectele propriu-zise ===================================================================== */ /* ---------- Contrast ridicat --------------------------------------- */ html[data-a11y-contrast="1"] body { background: #fff; color: #000; } html[data-a11y-contrast="1"] :where(p, li, td, th, dd, dt, figcaption, .card__excerpt, .doc-item__meta, .contact-item__sub, .testimonial__quote, .field__hint, .hint) { color: #000 !important; } html[data-a11y-contrast="1"] :where(h1, h2, h3, h4, h5, .card__title a, .post-list a) { color: #000 !important; } html[data-a11y-contrast="1"] :where(.card, .widget, .doc-item, .stat, .testimonial, .featured-link, .accordion, .tabs, .panel) { border-color: #000 !important; box-shadow: none !important; } html[data-a11y-contrast="1"] :where(a:not(.btn):not(.quick-link):not(.featured-link)) { color: #00309C !important; text-decoration: underline !important; } html[data-a11y-contrast="1"] :where(.navbar, .footer, .page-head) { background: #000 !important; background-image: none !important; } html[data-a11y-contrast="1"] :where(.navbar a, .footer a, .page-head, .page-head h1) { color: #fff !important; } html[data-a11y-contrast="1"] :where(.btn--primary, .btn--accent, .quick-link, .btn-catalog) { background: #000 !important; background-image: none !important; color: #fff !important; border: 2px solid #fff !important; } html[data-a11y-contrast="1"] .slide__caption { background: rgba(0, 0, 0, .9) !important; } /* ---------- Mod întunecat ------------------------------------------ */ html[data-a11y-dark="1"] body { background: #14161C; color: #E6E9EF; } html[data-a11y-dark="1"] :where(h1, h2, h3, h4, h5) { color: #F4F6FA; } html[data-a11y-dark="1"] :where(.masthead, .card, .widget, .panel, .doc-item, .stat, .testimonial, .featured-link, .accordion, .tabs, .partners, .section--soft, .tabs__panel, .accordion__body) { background: #1C1F27 !important; border-color: #333947 !important; color: #E6E9EF; } html[data-a11y-dark="1"] :where(.brand__name, .contact-item__label, .card__title a, .post-list a, .doc-item__title, .widget__title, .testimonial__name) { color: #F4F6FA !important; } html[data-a11y-dark="1"] :where(.contact-item__sub, .card__excerpt, .doc-item__meta, .field__hint, .testimonial__role, .partners__title) { color: #A7AEBD !important; } html[data-a11y-dark="1"] :where(.bg-soft, .section--soft) { background: #1A1D24 !important; } html[data-a11y-dark="1"] .prose :where(table th) { background: #242833 !important; } html[data-a11y-dark="1"] .prose :where(table td, table th) { border-color: #333947 !important; } html[data-a11y-dark="1"] :where(input, textarea, select) { background: #1C1F27 !important; color: #E6E9EF !important; border-color: #3A4152 !important; } html[data-a11y-dark="1"] .a11y-panel { background: #1C1F27; color: #E6E9EF; border-color: #333947; } html[data-a11y-dark="1"] .a11y-opt { background: #232733; color: #E6E9EF; border-color: #333947; } html[data-a11y-dark="1"] img:not([src$=".svg"]) { filter: brightness(.92); } /* ---------- Evidențierea link-urilor ------------------------------- */ html[data-a11y-links="1"] a:not(.btn):not(.quick-link):not(.featured-link):not(.partner) { text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 2px !important; background: #FFF3B0; color: #24303F !important; padding: 0 .15em; border-radius: 3px; } html[data-a11y-links="1"][data-a11y-dark="1"] a:not(.btn):not(.quick-link):not(.featured-link) { background: #4A3F00; color: #FFE98A !important; } /* ---------- Font prietenos cu dislexia ----------------------------- */ /* Fonturile dedicate (OpenDyslexic) cer un fișier extern. Verdana și Tahoma sunt instalate practic peste tot și dau un rezultat apropiat: litere late, deschise, cu diferențe clare între b/d și p/q. */ html[data-a11y-readable="1"] body, html[data-a11y-readable="1"] :where(h1, h2, h3, h4, h5, p, li, td, th, a, button, input, textarea, select) { font-family: Verdana, Tahoma, 'Segoe UI', sans-serif !important; letter-spacing: .02em; } html[data-a11y-readable="1"] :where(p, li) { line-height: 1.85; } /* ---------- Spațiere mărită ---------------------------------------- */ /* Valorile recomandate de WCAG 2.1, criteriul 1.4.12 „Text Spacing”. */ html[data-a11y-spacing="1"] :where(p, li, dd, td, th, .card__excerpt, .prose) { line-height: 1.9 !important; letter-spacing: .12em !important; word-spacing: .16em !important; } html[data-a11y-spacing="1"] :where(p, ul, ol) { margin-bottom: 2em !important; } /* ---------- Oprirea animațiilor ------------------------------------ */ html[data-a11y-nomotion="1"] *, html[data-a11y-nomotion="1"] *::before, html[data-a11y-nomotion="1"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } html[data-a11y-nomotion="1"] .partners__track { transform: none !important; flex-wrap: wrap; width: 100%; justify-content: center; } html[data-a11y-nomotion="1"] [data-reveal] { opacity: 1 !important; transform: none !important; } /* ---------- Riglă de citire ---------------------------------------- */ .a11y-ruler { position: fixed; left: 0; right: 0; z-index: 399; height: 42px; pointer-events: none; border-top: 2px solid rgba(242, 98, 71, .85); border-bottom: 2px solid rgba(242, 98, 71, .85); background: rgba(242, 98, 71, .10); display: none; } html[data-a11y-ruler="1"] .a11y-ruler { display: block; } /* ---------- Cursor mărit ------------------------------------------- */ html[data-a11y-cursor="1"], html[data-a11y-cursor="1"] * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M6 2 L6 30 L13 24 L18 35 L24 32 L19 21 L29 21 Z' fill='%23000' stroke='%23fff' stroke-width='2.5'/%3E%3C/svg%3E") 4 2, auto !important; } /* La tipărire, uneltele nu au ce căuta */ @media print { .a11y-toggle, .a11y-panel, .a11y-ruler { display: none !important; } } /* ---------- 7. Citire cu voce -------------------------------------- */ .a11y-asculta { width: 100%; display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem; background: var(--navy, #1B3C74); color: #fff; border: 0; border-radius: 9px; font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; text-align: left; transition: background .18s ease; } .a11y-asculta:hover { background: var(--navy-light, #2A5199); } .a11y-asculta:focus-visible { outline: 3px solid var(--coral, #F26247); outline-offset: 2px; } .a11y-asculta.is-on { background: var(--coral, #F26247); } .a11y-asculta__semn { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .2); font-size: .72rem; } /* Bara de comenzi, cât timp se citește. Stă deasupra butonului rotund, ca să rămână la îndemână fără să acopere textul. */ .a11y-citire { position: fixed; left: 50%; transform: translateX(-50%); bottom: 22px; z-index: 402; display: flex; align-items: center; gap: .35rem; max-width: calc(100vw - 24px); padding: .4rem .5rem; background: #fff; color: #1D2433; border: 1px solid #D9DEE8; border-radius: 999px; box-shadow: 0 8px 28px rgba(20, 46, 90, .28); } .a11y-citire[hidden] { display: none; } .a11y-citire button { display: grid; place-items: center; flex: none; min-width: 38px; height: 38px; padding: 0 .5rem; background: var(--navy-050, #EEF3FB); color: var(--navy, #1B3C74); border: 0; border-radius: 999px; font: inherit; font-size: .8rem; line-height: 1; cursor: pointer; } .a11y-citire button:hover { background: #DCE6F7; } .a11y-citire button:focus-visible { outline: 3px solid var(--coral, #F26247); outline-offset: 2px; } .a11y-citire__mare { background: var(--navy, #1B3C74) !important; color: #fff !important; min-width: 44px !important; height: 44px !important; } .a11y-citire__stare { padding: 0 .6rem; font-size: .78rem; color: #5A6275; white-space: nowrap; } @media (max-width: 640px) { .a11y-citire { bottom: 72px; gap: .2rem; padding: .35rem .4rem; } .a11y-citire__stare { display: none; } } /* Paragraful care se aude acum. Marginea din stânga se vede și la contrast ridicat, unde fundalurile colorate dispar. */ .a11y-citit { background: #FFF3CF; box-shadow: -4px 0 0 0 var(--coral, #F26247); border-radius: 3px; } html[data-a11y-dark="1"] .a11y-citit { background: #40381C; } html[data-a11y-contrast="1"] .a11y-citit { background: #FFFF00 !important; color: #000 !important; } html[data-a11y-dark="1"] .a11y-citire { background: #1C1F27; color: #E6E9EF; border-color: #333947; } html[data-a11y-dark="1"] .a11y-citire__stare { color: #A9B1C2; } @media print { .a11y-citire { display: none !important; } .a11y-citit { background: none; box-shadow: none; } }