/** * Toolbar accesibilitate — efecte CSS aplicate prin data-* pe . * UI-ul (buton + panel) este injectat de accessibility-toolbar.js. * * Poziție: stânga jos, deasupra butonului #cookie-reset. */ :root { --crb-a11y-above-cookie: calc(0.625rem + 3rem + 0.75rem); --crb-a11y-fab-size: 3rem; --crb-a11y-fab-gap: 0.35rem; } /* ── UI BUTON + PANEL ─────────────────────────────────────────────────── */ #crb-a11y-btn { position: fixed; left: max(10px, env(safe-area-inset-left, 0px)); right: auto; bottom: calc(var(--crb-a11y-above-cookie) + env(safe-area-inset-bottom, 0px)); z-index: 10050; width: var(--crb-a11y-fab-size); height: var(--crb-a11y-fab-size); border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.95); background: var(--primary-color, #0d6efd); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); transition: transform 0.15s ease, box-shadow 0.15s ease; font-family: Arial, sans-serif; padding: 0; } #crb-a11y-btn:hover { transform: scale(1.05); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); } #crb-a11y-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } #crb-a11y-btn .ca-icon { font-size: 1.35rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; } #crb-a11y-btn .ca-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } #crb-a11y-panel { position: fixed; left: max(10px, env(safe-area-inset-left, 0px)); right: auto; bottom: calc( var(--crb-a11y-above-cookie) + var(--crb-a11y-fab-size) + var(--crb-a11y-fab-gap) + env(safe-area-inset-bottom, 0px) ); z-index: 10050; width: min(100vw - 20px, 320px); max-height: min(70vh, 420px); overflow: auto; background: #fff; color: #111; border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18); padding: 1rem 1.1rem; border: 1px solid rgba(0, 0, 0, 0.08); display: none; font-family: Arial, sans-serif; box-sizing: border-box; } #crb-a11y-panel.crb-open { display: block; } #crb-a11y-panel .ca-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; } #crb-a11y-panel .ca-title { font-size: 1.05rem; font-weight: 700; margin: 0; padding-right: 2rem; color: #111; } #crb-a11y-panel .ca-close { position: absolute; top: 0.65rem; right: 0.65rem; width: 2rem; height: 2rem; border: none; background: transparent; color: #444; cursor: pointer; border-radius: 6px; font-size: 1.25rem; line-height: 1; } #crb-a11y-panel .ca-close:hover { background: rgba(0, 0, 0, 0.06); } #crb-a11y-panel .ca-section { margin-bottom: 1rem; } #crb-a11y-panel .ca-label { display: block; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #555; margin-bottom: 0.45rem; } #crb-a11y-panel .ca-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem; } #crb-a11y-panel .ca-grid.two { grid-template-columns: repeat(2, 1fr); } #crb-a11y-panel .ca-grid.one { grid-template-columns: 1fr; } #crb-a11y-panel .ca-full { grid-column: 1 / -1; } #crb-a11y-panel .ca-opt { min-width: 0; padding: 0.4rem 0.55rem; font-size: 0.875rem; border: 1px solid #ccc; background: #f8f9fa; border-radius: 8px; cursor: pointer; color: #111; text-align: center; font-family: inherit; } #crb-a11y-panel .ca-opt:hover { background: #e9ecef; } #crb-a11y-panel .ca-opt.on { background: var(--primary-color, #0d6efd); color: #fff; border-color: var(--primary-color, #0d6efd); } #crb-a11y-panel .ca-opt:focus-visible { outline: 2px solid var(--primary-color, #0d6efd); outline-offset: 2px; } #crb-a11y-panel .ca-reset { display: block; width: 100%; margin-top: 0.25rem; padding: 0.5rem; font-size: 0.875rem; border: 1px solid #ccc; background: #fff; border-radius: 8px; cursor: pointer; color: #555; font-family: inherit; } #crb-a11y-panel .ca-reset:hover { background: #f1f5f9; } /* ── DIMENSIUNE TEXT (font-size % — ca în snippet-ul funcțional, fără zoom) ── * Pași mai fini decât 110/125/140: 107% / 114% / 121% * Toolbar-ul este exclus ca să nu fie afectat. * ──────────────────────────────────────────────────────────────────────── */ html[data-a11y-font="large"] body :not(#crb-a11y-btn):not(#crb-a11y-btn *):not(#crb-a11y-panel):not(#crb-a11y-panel *) { font-size: 107% !important; } html[data-a11y-font="xlarge"] body :not(#crb-a11y-btn):not(#crb-a11y-btn *):not(#crb-a11y-panel):not(#crb-a11y-panel *) { font-size: 114% !important; } html[data-a11y-font="extra"] body :not(#crb-a11y-btn):not(#crb-a11y-btn *):not(#crb-a11y-panel):not(#crb-a11y-panel *) { font-size: 121% !important; } /* ── SPAȚIERE RÂNDURI ─────────────────────────────────────────────────── */ html[data-a11y-lh="relaxed"] body { line-height: 1.75 !important; } html[data-a11y-lh="relaxed"] body p, html[data-a11y-lh="relaxed"] body li, html[data-a11y-lh="relaxed"] body td, html[data-a11y-lh="relaxed"] body th, html[data-a11y-lh="relaxed"] body dd, html[data-a11y-lh="relaxed"] body dt, html[data-a11y-lh="relaxed"] body blockquote, html[data-a11y-lh="relaxed"] body figcaption, html[data-a11y-lh="relaxed"] body label, html[data-a11y-lh="relaxed"] body main, html[data-a11y-lh="relaxed"] body main *, html[data-a11y-lh="relaxed"] body .page-content, html[data-a11y-lh="relaxed"] body .page-content *, html[data-a11y-lh="relaxed"] body .blog-content, html[data-a11y-lh="relaxed"] body .blog-content *, html[data-a11y-lh="relaxed"] body .blog-section, html[data-a11y-lh="relaxed"] body .blog-section *, html[data-a11y-lh="relaxed"] body .smashing-article, html[data-a11y-lh="relaxed"] body .smashing-article *, html[data-a11y-lh="relaxed"] body .account-page, html[data-a11y-lh="relaxed"] body .account-page *, html[data-a11y-lh="relaxed"] body [class*="module-text"], html[data-a11y-lh="relaxed"] body [class*="module-text"] * { line-height: 1.75 !important; } /* ── FONT LIZIBIL (Lexend) ────────────────────────────────────────────── */ html[data-a11y-readable="1"] body { font-family: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; } html[data-a11y-readable="1"] body *:not(.fa):not(.fas):not(.far):not(.fab) :not(.fal):not(.fad):not([class^="fa-"]):not([class*=" fa-"]) :not(.material-icons):not(.material-icons-outlined):not(svg):not(svg *) { font-family: inherit !important; } html[data-a11y-readable="1"] body main #blogMaterialRoot, html[data-a11y-readable="1"] body main #blogMaterialRoot *:not(.fa):not(.fas) :not(.far):not(.fab):not(.fal):not(.fad):not([class^="fa-"]) :not([class*=" fa-"]):not(.material-icons):not(svg):not(svg *), html[data-a11y-readable="1"] body main #materialArticleRoot, html[data-a11y-readable="1"] body main #materialArticleRoot *:not(.fa):not(.fas) :not(.far):not(.fab):not(.fal):not(.fad):not([class^="fa-"]) :not([class*=" fa-"]):not(.material-icons):not(svg):not(svg *) { font-family: inherit !important; } html[data-a11y-readable="1"] body .fab, html[data-a11y-readable="1"] body .fa-brands { font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", "FontAwesome" !important; font-weight: 400 !important; } html[data-a11y-readable="1"] body .fa, html[data-a11y-readable="1"] body .fas, html[data-a11y-readable="1"] body .far, html[data-a11y-readable="1"] body .fal, html[data-a11y-readable="1"] body .fad, html[data-a11y-readable="1"] body [class^="fa-"]:not(.fab) { font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important; } /* ── CONTRAST / ALB-NEGRU / LINKURI / ANIMAȚII ─────────────────────────── */ html[data-a11y-contrast="1"] body *:not(#crb-a11y-btn):not(#crb-a11y-panel):not(#crb-a11y-panel *) { background-color: #000 !important; color: #fff !important; border-color: #555 !important; } html[data-a11y-contrast="1"] body img { filter: brightness(.85) contrast(1.15) !important; } html[data-a11y-gray="1"] body > *:not(#crb-a11y-btn):not(#crb-a11y-panel) { filter: grayscale(1) !important; } html[data-a11y-links="1"] body a { text-decoration: underline !important; font-weight: 700 !important; } html[data-a11y-noanim="1"] body *:not(#crb-a11y-panel):not(#crb-a11y-panel *), html[data-a11y-noanim="1"] body *:not(#crb-a11y-panel):not(#crb-a11y-panel *)::before, html[data-a11y-noanim="1"] body *:not(#crb-a11y-panel):not(#crb-a11y-panel *)::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } @media (prefers-reduced-motion: reduce) { #crb-a11y-btn { transition: none; } }