/* ========================================================================== SIM Acessibilidade — Barra (paleta navy/teal SIM) Prefixo de classe: .sim-ac ========================================================================== */ .sim-ac { --sim-ac-navy: #22587a; --sim-ac-teal: #39a3a6; width: 100%; background: var(--sim-ac-navy); color: #ffffff; font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; box-sizing: border-box; position: relative; z-index: 9990; } .sim-ac--teal { background: var(--sim-ac-teal); } .sim-ac *, .sim-ac *::before, .sim-ac *::after { box-sizing: border-box; } /* Conjunto agrupado à direita (sem vão no meio) e barra fina */ .sim-ac__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 14px; max-width: 1280px; margin: 0 auto; padding: 7px 24px; } .sim-ac__label { font-size: .88rem; font-weight: 600; color: #ffffff; letter-spacing: .01em; } .sim-ac__group { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; } /* Botões compactos */ .sim-ac__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin: 0; padding: 6px 12px; min-height: 32px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 8px; background: transparent; color: #ffffff; font-family: inherit; font-size: .85rem; font-weight: 600; line-height: 1; cursor: pointer; transition: background-color .16s ease, color .16s ease, border-color .16s ease; -webkit-appearance: none; appearance: none; } .sim-ac__btn--letra { min-width: 36px; padding: 6px 10px; font-size: .92rem; font-weight: 700; } .sim-ac__btn:hover, .sim-ac__btn:focus-visible { background: #ffffff; border-color: #ffffff; color: var(--sim-ac-navy); outline: none; } .sim-ac--teal .sim-ac__btn:hover, .sim-ac--teal .sim-ac__btn:focus-visible { color: var(--sim-ac-teal); } .sim-ac__btn:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, .5); } .sim-ac__btn[aria-pressed="true"] { background: #ffffff; border-color: #ffffff; color: var(--sim-ac-navy); } .sim-ac--teal .sim-ac__btn[aria-pressed="true"] { color: var(--sim-ac-teal); } .sim-ac__ico { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex-shrink: 0; } .sim-ac__ico svg { display: block; width: 16px; height: 16px; } /* -------------------------------------------------------------------------- Link "pular para o conteúdo" -------------------------------------------------------------------------- */ .sim-ac-skip { position: absolute; left: -9999px; top: 0; z-index: 100000; padding: 10px 18px; background: var(--sim-ac-navy, #22587a); color: #ffffff; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; text-decoration: none; border-radius: 0 0 10px 0; } .sim-ac-skip:focus { left: 0; outline: 3px solid #ffed4a; } /* ========================================================================== Níveis de fonte (classes em ) ========================================================================== */ html.sim-ac-fs-1 { font-size: 112.5% !important; } html.sim-ac-fs-2 { font-size: 125% !important; } html.sim-ac-fs-3 { font-size: 137.5% !important; } html.sim-ac-fs-4 { font-size: 150% !important; } /* A própria barra não incha junto com o resto */ html.sim-ac-fs-1 .sim-ac, html.sim-ac-fs-2 .sim-ac, html.sim-ac-fs-3 .sim-ac, html.sim-ac-fs-4 .sim-ac { font-size: 16px; } /* ========================================================================== Alto contraste (padrão eMAG) ========================================================================== */ html.sim-ac-contraste, html.sim-ac-contraste body { background: #000000 !important; color: #ffffff !important; } html.sim-ac-contraste *:not(img):not(picture):not(video):not(svg):not(svg *) { background-color: transparent !important; background-image: none !important; color: #ffffff !important; border-color: #ffffff !important; box-shadow: none !important; text-shadow: none !important; } html.sim-ac-contraste a, html.sim-ac-contraste a * { color: #ffed4a !important; text-decoration: underline !important; } html.sim-ac-contraste button, html.sim-ac-contraste input, html.sim-ac-contraste select, html.sim-ac-contraste textarea { background: #000000 !important; color: #ffed4a !important; border: 1px solid #ffed4a !important; } html.sim-ac-contraste img, html.sim-ac-contraste video { filter: none !important; opacity: 1 !important; } html.sim-ac-contraste .sim-ac__btn { border-color: #ffed4a !important; } html.sim-ac-contraste .sim-ac__btn:hover, html.sim-ac-contraste .sim-ac__btn:focus-visible, html.sim-ac-contraste .sim-ac__btn[aria-pressed="true"] { background: #ffed4a !important; color: #000000 !important; } /* ========================================================================== Responsivo ========================================================================== */ @media (max-width: 782px) { .sim-ac__inner { justify-content: center; gap: 10px; padding: 8px 14px; } .sim-ac__label { width: 100%; text-align: center; margin-bottom: 2px; } } @media (prefers-reduced-motion: reduce) { .sim-ac__btn { transition: none; } } /* ========================================================================== VLibras — reposicionamento O widget posiciona o CONJUNTO no wrapper div[vw] via estilo inline (right:0; top:50%; transform: translateY(-50%)), o que o joga no meio da lateral direita, em cima da aba "Links Rápidos" do tema. Sobrescrevemos o wrapper para levar tudo ao canto inferior direito. O !important vence o estilo inline do próprio VLibras. Para ajustar a altura: aumente "bottom" para subir, diminua para descer. ========================================================================== */ div[vw].enabled, div[vw] { position: fixed !important; top: auto !important; bottom: 24px !important; right: 16px !important; left: auto !important; transform: none !important; z-index: 99991 !important; }