/* ========================================================================== IGEPREV Petrolina — Acessibilidade Barra A11y, modos de contraste, modo leitura, escala de fonte, destaque de links, sobreposições de VLibras. Princípio: WCAG 2.2 AA + eMAG. ========================================================================== */ /* ========================================================================== BARRA DE ACESSIBILIDADE Fica no topo, sempre visível, contraste alto. ========================================================================== */ .ige-a11y { position: relative; z-index: 1000; background: var(--ige-primary-dark); color: #fff; font-size: var(--ige-fs-sm); } .ige-a11y__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ige-sp-2); max-width: var(--ige-container-max); margin: 0 auto; padding: 6px var(--ige-container-pad); min-height: 44px; } .ige-a11y__group { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } .ige-a11y__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.35); border-radius: var(--ige-radius-sm); font-family: var(--ige-font-base); font-size: 0.875rem; font-weight: var(--ige-fw-semi); cursor: pointer; transition: background var(--ige-transition), border-color var(--ige-transition), color var(--ige-transition); } .ige-a11y__btn:hover, .ige-a11y__btn:focus-visible { background: #fff; color: var(--ige-primary-dark); border-color: #fff; } .ige-a11y__btn[aria-pressed="true"] { background: var(--ige-support); color: var(--ige-text-main); border-color: var(--ige-support); } .ige-a11y__btn .ige-a11y__key { font-size: 0.75rem; opacity: 0.8; margin-left: 6px; padding: 1px 6px; background: rgba(255,255,255,0.12); border-radius: 3px; } .ige-a11y__btn:hover .ige-a11y__key { background: rgba(0,0,0,0.08); } @media (max-width: 720px) { .ige-a11y { overflow: hidden; } .ige-a11y__inner { display: block; min-height: auto; padding: 6px var(--ige-container-pad) 8px; } .ige-a11y__group { width: 100%; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 6px; padding-bottom: 2px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .ige-a11y__btn span:not(.ige-a11y__key) { display: inline-flex; } .ige-a11y__btn .ige-a11y__key { display: none; } .ige-a11y__btn { flex: 0 0 auto; min-height: 42px; padding: 8px 12px; white-space: nowrap; } } /* ========================================================================== ESCALA DE FONTE (via data-attribute no ) ========================================================================== */ html[data-ige-font="lg"] { font-size: 112.5%; } /* 18px → ~20.25px base */ html[data-ige-font="xl"] { font-size: 125%; } /* 18px → ~22.5px */ html[data-ige-font="xxl"] { font-size: 137.5%; } /* 18px → ~24.75px */ /* ========================================================================== ALTO CONTRASTE — preto/amarelo (modelo eMAG) ========================================================================== */ html[data-ige-contrast="high"] { background: #000 !important; } html[data-ige-contrast="high"] body, html[data-ige-contrast="high"] .ige-container, html[data-ige-contrast="high"] .site-content, html[data-ige-contrast="high"] section, html[data-ige-contrast="high"] article, html[data-ige-contrast="high"] aside, html[data-ige-contrast="high"] main, html[data-ige-contrast="high"] header, html[data-ige-contrast="high"] footer, html[data-ige-contrast="high"] nav, html[data-ige-contrast="high"] .ige-card, html[data-ige-contrast="high"] .ige-service-card, html[data-ige-contrast="high"] .ige-accordion__item, html[data-ige-contrast="high"] .ige-card__body, html[data-ige-contrast="high"] [class*="elementor"] { background: #000 !important; color: #ffff00 !important; border-color: #ffff00 !important; box-shadow: none !important; } html[data-ige-contrast="high"] a, html[data-ige-contrast="high"] a:visited { color: #ffff00 !important; text-decoration: underline !important; } html[data-ige-contrast="high"] h1, html[data-ige-contrast="high"] h2, html[data-ige-contrast="high"] h3, html[data-ige-contrast="high"] h4, html[data-ige-contrast="high"] h5, html[data-ige-contrast="high"] h6, html[data-ige-contrast="high"] p, html[data-ige-contrast="high"] li, html[data-ige-contrast="high"] span, html[data-ige-contrast="high"] strong { color: #ffff00 !important; } html[data-ige-contrast="high"] .ige-btn, html[data-ige-contrast="high"] button { background: #ffff00 !important; color: #000 !important; border-color: #ffff00 !important; } html[data-ige-contrast="high"] .ige-btn:hover, html[data-ige-contrast="high"] button:hover { background: #fff !important; color: #000 !important; } html[data-ige-contrast="high"] img:not([alt=""]) { filter: grayscale(50%) contrast(1.1); } /* ========================================================================== MODO LEITURA — esconde distrações, foco em texto ========================================================================== */ html[data-ige-reading="on"] { background: #fdf8ef; } html[data-ige-reading="on"] body { background: #fdf8ef; color: #1a1a1a; } html[data-ige-reading="on"] .ige-card__media, html[data-ige-reading="on"] .ige-service-card__icon, html[data-ige-reading="on"] aside, html[data-ige-reading="on"] .ige-novelties, html[data-ige-reading="on"] [class*="related"], html[data-ige-reading="on"] [class*="advert"] { display: none !important; } html[data-ige-reading="on"] main, html[data-ige-reading="on"] article, html[data-ige-reading="on"] .entry-content, html[data-ige-reading="on"] .ige-container { max-width: 720px !important; margin-inline: auto !important; background: #fdf8ef !important; } html[data-ige-reading="on"] p, html[data-ige-reading="on"] li { font-size: 1.25rem !important; line-height: 1.85 !important; } /* ========================================================================== DESTACAR LINKS — sublinhado forte + fundo amarelo ========================================================================== */ html[data-ige-links="highlight"] a:not(.ige-btn):not(.skip-link) { background: var(--ige-support) !important; color: var(--ige-text-main) !important; text-decoration: underline !important; text-decoration-thickness: 3px !important; padding: 0 4px; border-radius: 3px; } /* ========================================================================== VLIBRAS — posicionamento (não conflita com WhatsApp flutuante) ========================================================================== */ [vw] { z-index: 9998 !important; } [vw-access-button] { bottom: 110px !important; /* acima do WhatsApp (geralmente a 24-32px) */ right: 20px !important; } @media (max-width: 600px) { [vw-access-button] { bottom: 96px !important; right: 16px !important; } } /* ========================================================================== MENU MOBILE acessível — grande, fácil de fechar (estilo institucional) ========================================================================== */ .ige-mobile-toggle { display: none; min-width: 48px; min-height: 48px; gap: 8px; padding: 0 14px; background: var(--ige-primary); color: #fff; border: none; border-radius: var(--ige-radius-md); font-size: 1rem; font-weight: var(--ige-fw-bold); cursor: pointer; align-items: center; justify-content: center; } .ige-mobile-toggle.is-open { background: var(--ige-secondary-dark); } .ige-mobile-toggle__text { display: inline-flex; } @media (max-width: 960px) { .ige-mobile-toggle { display: inline-flex; } } @media (max-width: 380px) { .ige-mobile-toggle__text { display: none; } .ige-mobile-toggle { padding: 0; width: 48px; } }