/* Panel (desktop/popover default) */ .et-a11y-panel { position: fixed; inset: 0 auto auto 0; z-index: 12000; width: 320px; max-width: calc(100vw - 20px); background: #fff; border: 1px solid #E3E8F1; border-radius: 12px; box-shadow: 0 10px 40px rgba(16, 22, 33, 0.18); padding: 12px; left: var(--a11y-left, 16px); top: var(--a11y-top, 70px); } .et-a11y-panel[hidden] { display: none !important; } .et-a11y-panel__inner { display: flex; flex-direction: column; gap: 8px; } .et-a11y-panel__header { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 2px; } .et-a11y-title { margin: 0; font-weight: 800; font-size: 16px; color: #0F172A; } .et-a11y-close { border: none; background: transparent; color: #334155; font-size: 20px; width: 32px; height: 32px; border-radius: 8px; line-height: 1; } .et-a11y-close:hover, .et-a11y-close:focus-visible { background: #F1F5F9; outline: none; } .et-a11y-list { list-style: none; padding: 6px; margin: 0; display: grid; gap: 4px; } .et-a11y-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 10px; border-radius: 10px; border: 1px solid #E7ECF5; background: #fff; color: #0F172A; text-align: left; } .et-a11y-item i { width: 20px; text-align: center; color: #0F172A; opacity: .9; } .et-a11y-item[aria-pressed="true"] { border-color: #154ADC; box-shadow: 0 0 0 3px rgba(21,74,220,.12); } .et-a11y-item:hover, .et-a11y-item:focus-visible { background: #F8FAFC; outline: none; } .et-a11y-actions { display: flex; justify-content: flex-start; padding: 6px; } .et-a11y-reset { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #E7ECF5; background: #fff; color:#0F172A; border-radius: 10px; padding: 8px 10px; } .et-a11y-reset:hover, .et-a11y-reset:focus-visible { background:#F8FAFC; outline: none; } /* Backdrop (used in mobile sheet mode) */ .et-a11y-backdrop { position: fixed; inset: 0; background: rgba(2, 6, 23, 0.5); z-index: 11990; opacity: 0; pointer-events: none; transition: opacity .2s ease; } .et-a11y-backdrop.is-visible { opacity: 1; pointer-events: auto; } /* Mobile bottom sheet mode */ @media (max-width: 991.98px) { .et-a11y-panel.et-a11y-panel--sheet { inset: auto 8px calc(env(safe-area-inset-bottom, 8px)) 8px; left: 8px; right: 8px; top: auto; bottom: calc(env(safe-area-inset-bottom, 8px)); width: auto; max-width: none; border-radius: 14px; padding: 12px 12px 10px; transform: translateY(8px); animation: etA11ySlideUp .22s ease-out both; } .et-a11y-panel.et-a11y-panel--sheet .et-a11y-panel__header { padding: 4px 4px 0; } .et-a11y-panel.et-a11y-panel--sheet .et-a11y-title { font-size: 17px; } .et-a11y-panel.et-a11y-panel--sheet .et-a11y-list { padding: 6px 4px; gap: 6px; /* Make list scrollable if tall */ max-height: min(64vh, 520px); overflow: auto; -webkit-overflow-scrolling: touch; } .et-a11y-panel.et-a11y-panel--sheet .et-a11y-item { padding: 12px 12px; border-radius: 12px; } .et-a11y-panel.et-a11y-panel--sheet .et-a11y-item i { width: 22px; font-size: 20px; } .et-a11y-panel.et-a11y-panel--sheet .et-a11y-actions { padding: 6px 4px 2px; } /* Little grabber handle */ .et-a11y-panel.et-a11y-panel--sheet::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 40px; height: 4px; border-radius: 999px; background: #E5E7EB; } @keyframes etA11ySlideUp { from { transform: translateY(18px); opacity: .96; } to { transform: translateY(0); opacity: 1; } } } /* Visual modes (classes applied on ) */ /* Links underline */ html.a11y-links-underline a, html.a11y-links-underline .et-card-title-link, html.a11y-links-underline [role="link"] { text-decoration: underline !important; text-underline-offset: 2px; } /* Readable font */ html.a11y-readable *:not(i):not(svg):not(code):not(kbd):not(pre) { font-family: Arial, Helvetica, sans-serif !important; } /* Themes: mutually exclusive */ html.a11y-theme-high, html.a11y-theme-negative, html.a11y-theme-light { color-scheme: light; } /* High contrast (avoid forcing media elements) */ html.a11y-theme-high body, html.a11y-theme-high #page, html.a11y-theme-high .site, html.a11y-theme-high *:not(svg):not(img):not(video):not(canvas):not(picture):not(source) { background-color: #fff !important; color: #000 !important; border-color: #000 !important; box-shadow: none !important; } html.a11y-theme-high a { color: #0a58ca !important; } /* Negative contrast */ html.a11y-theme-negative body, html.a11y-theme-negative #page, html.a11y-theme-negative .site, html.a11y-theme-negative *:not(svg):not(img):not(video):not(canvas):not(picture):not(source) { background-color: #111 !important; color: #fff !important; border-color: #fff !important; box-shadow: none !important; } html.a11y-theme-negative a { color: #FFDD57 !important; } /* Light background */ html.a11y-theme-light body, html.a11y-theme-light #page, html.a11y-theme-light .site, html.a11y-theme-light *:not(svg):not(img):not(video):not(canvas):not(picture):not(source) { background-color: #ffffff !important; color: #111 !important; border-color: #C8D0DB !important; } /* Prevent panel itself from being over-tinted by themes */ html.a11y-theme-high .et-a11y-panel, html.a11y-theme-negative .et-a11y-panel, html.a11y-theme-light .et-a11y-panel { background: #fff !important; color: #0F172A !important; border-color: #E3E8F1 !important; filter: none !important; } /* === A11y: Grayscale complet, sigur pentru slider (folosește variabilă CSS) === */ /* Activează filtrul global prin variabilă (ușor de override pe subarbori) */ html.a11y-grayscale { --et-a11y-gray-filter: grayscale(100%); } /* Aplică la TOT conținutul (inclusiv background-uri, SVG-uri, text etc.) */ html.a11y-grayscale body, html.a11y-grayscale body * { filter: var(--et-a11y-gray-filter) !important; } /* Excepție: Hero slider – evită filtrul pe containere (previn glitch-uri la transform/anim) */ html.a11y-grayscale .et-hero-glide, html.a11y-grayscale .et-hero-glide * { filter: none !important; } /* Dar păstrează media din slider în grayscale, ca restul site-ului */ html.a11y-grayscale .et-hero-glide img, html.a11y-grayscale .et-hero-glide picture img, html.a11y-grayscale .et-hero-glide video, html.a11y-grayscale .et-hero-glide canvas { filter: grayscale(100%) !important; } /* --- A11y + Hero Slider: excepții pentru modurile de contrast (NU afectează layoutul) --- */ /* Nu colora/întuneca straturile sliderului în modurile de contrast */ html.a11y-theme-high .et-hero-glide, html.a11y-theme-high .et-hero-glide *, html.a11y-theme-high .et-hero-glide *::before, html.a11y-theme-high .et-hero-glide *::after, html.a11y-theme-negative .et-hero-glide, html.a11y-theme-negative .et-hero-glide *, html.a11y-theme-negative .et-hero-glide *::before, html.a11y-theme-negative .et-hero-glide *::after, html.a11y-theme-light .et-hero-glide, html.a11y-theme-light .et-hero-glide *, html.a11y-theme-light .et-hero-glide *::before, html.a11y-theme-light .et-hero-glide *::after { background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; filter: none !important; mix-blend-mode: normal !important; } /* Asigură vizibilitatea imaginilor din slider în toate modurile */ html.a11y-theme-high .et-hero-glide img, html.a11y-theme-negative .et-hero-glide img, html.a11y-theme-light .et-hero-glide img, html.a11y-theme-high .et-hero-glide picture img, html.a11y-theme-negative .et-hero-glide picture img, html.a11y-theme-light .et-hero-glide picture img, html.a11y-theme-high .et-hero-glide video, html.a11y-theme-negative .et-hero-glide video, html.a11y-theme-light .et-hero-glide video, html.a11y-theme-high .et-hero-glide canvas, html.a11y-theme-negative .et-hero-glide canvas, html.a11y-theme-light .et-hero-glide canvas { opacity: 1 !important; mix-blend-mode: normal !important; filter: none !important; background: transparent !important; } /* Stabilizare randare imagini în slider când e activ un mod a11y (fără a schimba flow-ul) */ html[class*="a11y-"] .et-hero-glide img, html[class*="a11y-"] .et-hero-glide picture img { backface-visibility: hidden; transform: translateZ(0); will-change: auto; } /* Izolează stacking-context pentru slider (evită “împrumutarea” blend-urilor) */ .et-hero-glide { isolation: isolate; }