/* ============================================================ credite4you Accessibility — remediere WCAG + widget utilizator ============================================================ */ /* ---------- 1. REMEDIERE WCAG (mereu active) ---------- */ /* Contrast: textele gri prea deschise -> mai inchise (WCAG 1.4.3 AA) */ .comparator .cmp-field-rng, .comparator .cmp-field-rng span{ color:#5a6675 !important; } .comparator .cmp-disclaimer{ color:#5a6675 !important; } .comparator .cmp-sub{ color:#dbe6f3 !important; } .comparator .cmp-rating small{ color:#5a6675 !important; } /* verde best-offer prea deschis (3.49:1) -> mai inchis (~5.4:1) pt badge + rata top */ .comparator .cmp-badge{ background:#0d7a3d !important; } .comparator .cmp-card.top .cmp-m:first-child b{ color:#0d7a3d !important; } /* focus vizibil clar peste tot (WCAG 2.4.7) */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, .cmp-chip:focus-visible, .cmp-btn:focus-visible{ outline:3px solid #F5B942 !important; outline-offset:2px !important; border-radius:4px; } /* ---------- 2. WIDGET: buton flotant + panou ---------- */ #c4y-a11y-btn{ position:fixed; right:14px; bottom:14px; z-index:2147481000; width:52px; height:52px; border-radius:50%; border:2px solid #fff; background:#0A2540; color:#fff; cursor:pointer; box-shadow:0 8px 24px -8px rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:0; } #c4y-a11y-btn:hover{ background:#123a5f; } #c4y-a11y-btn svg{ width:28px; height:28px; fill:#F5B942; } #c4y-a11y-panel{ position:fixed; right:14px; bottom:76px; z-index:2147481001; width:320px; max-width:calc(100vw - 28px); max-height:calc(100vh - 100px); overflow-y:auto; background:#fff; color:#0A2540; border-radius:14px; box-shadow:0 30px 70px -18px rgba(0,0,0,.55); border-top:4px solid #F5B942; font-family:"Inter",system-ui,sans-serif; padding:14px 14px 16px; } #c4y-a11y-panel[hidden]{ display:none; } .c4y-a11y-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; } .c4y-a11y-head h2{ font-size:16px; font-weight:800; margin:0; color:#0A2540; } .c4y-a11y-close{ background:none; border:none; font-size:22px; line-height:1; cursor:pointer; color:#42505f; padding:2px 6px; } .c4y-a11y-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; border-top:1px solid #eef2f7; } .c4y-a11y-row:first-of-type{ border-top:none; } .c4y-a11y-row .lbl{ font-size:13.5px; font-weight:600; color:#22303f; } .c4y-a11y-size{ display:flex; align-items:center; gap:8px; } .c4y-a11y-size button{ width:30px; height:30px; border-radius:8px; border:1.5px solid #cdd8e4; background:#fff; font-size:16px; font-weight:800; cursor:pointer; color:#0A2540; } .c4y-a11y-size button:hover{ border-color:#0A2540; } .c4y-a11y-size .val{ font-size:13px; font-weight:700; min-width:44px; text-align:center; } .c4y-a11y-toggle{ position:relative; flex:0 0 auto; width:44px; height:26px; border-radius:99px; background:#cdd8e4; border:none; cursor:pointer; transition:background .15s; } .c4y-a11y-toggle::after{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .15s; } .c4y-a11y-toggle[aria-pressed="true"]{ background:#1a9d5a; } .c4y-a11y-toggle[aria-pressed="true"]::after{ transform:translateX(18px); } .c4y-a11y-reset{ width:100%; margin-top:12px; border:1.5px solid #cdd8e4; background:#fff; color:#0A2540; font-weight:700; border-radius:9px; padding:9px; cursor:pointer; font-size:13px; font-family:inherit; } .c4y-a11y-reset:hover{ border-color:#0A2540; } .c4y-a11y-foot{ margin-top:10px; font-size:11px; text-align:center; } .c4y-a11y-foot a{ color:#123a5f; text-decoration:underline; } /* ---------- 3. MODURI APLICATE (clase pe ) ---------- */ /* Marire continut */ html[data-a11y-zoom="110"] body{ zoom:1.10; } html[data-a11y-zoom="125"] body{ zoom:1.25; } html[data-a11y-zoom="140"] body{ zoom:1.40; } /* Contrast ridicat */ html.a11y-contrast body{ background:#fff !important; } html.a11y-contrast p, html.a11y-contrast li, html.a11y-contrast span, html.a11y-contrast td, html.a11y-contrast label, html.a11y-contrast div, html.a11y-contrast h1, html.a11y-contrast h2, html.a11y-contrast h3, html.a11y-contrast h4{ color:#000 !important; } html.a11y-contrast a{ color:#00339c !important; text-decoration:underline !important; } html.a11y-contrast .cmp-btn, html.a11y-contrast button{ outline:2px solid #000 !important; } /* Mod intunecat / invert (re-inverseaza media) */ html.a11y-invert{ filter:invert(1) hue-rotate(180deg); background:#fff; } html.a11y-invert img, html.a11y-invert video, html.a11y-invert iframe, html.a11y-invert svg, html.a11y-invert .cmp-logo, html.a11y-invert [style*="background-image"]{ filter:invert(1) hue-rotate(180deg); } /* Font lizibil (dislexie) — spatiere WCAG 1.4.12 + font legibil */ html.a11y-dyslexia body, html.a11y-dyslexia p, html.a11y-dyslexia li, html.a11y-dyslexia a, html.a11y-dyslexia span, html.a11y-dyslexia button, html.a11y-dyslexia td, html.a11y-dyslexia label, html.a11y-dyslexia h1, html.a11y-dyslexia h2, html.a11y-dyslexia h3{ font-family:"Verdana","Tahoma","Trebuchet MS",sans-serif !important; letter-spacing:.06em !important; word-spacing:.16em !important; line-height:1.7 !important; } /* Evidentiaza linkuri */ html.a11y-links a{ text-decoration:underline !important; text-underline-offset:2px; box-shadow:inset 0 -2px 0 #F5B942; } /* Pauza animatii */ 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; } /* Cursor mare */ html.a11y-cursor, html.a11y-cursor *{ cursor:url('data:image/svg+xml;utf8,') 4 2, auto !important; } /* mobil: fara buton flotant (incurca navigarea) — se deschide din linkul "Accesibilitate" din footer; panoul se centreaza pe ecran. */ @media(max-width:768px){ #c4y-a11y-btn{ display:none !important; } #c4y-a11y-panel{ left:10px; right:auto; bottom:auto; top:50%; transform:translateY(-50%); width:calc(100vw - 20px); } }