/** * Prymus UF - estilos do modal e dos botoes de troca de estado. * * As regras que precisam existir ANTES do primeiro paint (esconder .uf-rj / * .uf-al e mostrar/esconder o modal) NAO estao aqui: elas sao impressas inline * no pelo PHP. Este arquivo cuida apenas da aparencia. * * Para adaptar as cores a marca, sobrescreva as variaveis abaixo em * Elementor > Configuracoes do site > CSS personalizado. */ :root { --prymus-uf-primaria: #0b3d91; --prymus-uf-primaria-clara: #1657c8; --prymus-uf-texto: #16202e; --prymus-uf-texto-suave: #5a6473; --prymus-uf-fundo: #ffffff; --prymus-uf-borda: #dfe3ea; --prymus-uf-raio: 14px; } /* ------------------------------------------------------------------------- * Acessibilidade * ---------------------------------------------------------------------- */ .prymus-uf-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ------------------------------------------------------------------------- * Modal * ---------------------------------------------------------------------- */ .prymus-uf-modal__fundo { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(9, 15, 26, 0.62); } .prymus-uf-modal__caixa { position: relative; z-index: 1; width: 100%; max-width: 460px; max-height: 92vh; overflow-y: auto; box-sizing: border-box; padding: 28px 24px 22px; background: var(--prymus-uf-fundo); color: var(--prymus-uf-texto); border-radius: var(--prymus-uf-raio); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28); text-align: center; font-family: inherit; animation: prymus-uf-entrar 0.18s ease-out; } @keyframes prymus-uf-entrar { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .prymus-uf-modal__titulo { margin: 0 0 8px; font-size: 22px; line-height: 1.25; font-weight: 700; color: var(--prymus-uf-texto); } .prymus-uf-modal__sub { margin: 0 0 20px; font-size: 14px; line-height: 1.5; color: var(--prymus-uf-texto-suave); } .prymus-uf-modal__opcoes { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .prymus-uf-opcao { flex: 1 1 150px; min-height: 88px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 14px 12px; cursor: pointer; background: #f6f8fb; border: 2px solid var(--prymus-uf-borda); border-radius: 12px; color: var(--prymus-uf-texto); font-family: inherit; font-size: 15px; line-height: 1.2; transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease; } .prymus-uf-opcao:hover, .prymus-uf-opcao:focus-visible { background: #eef3fd; border-color: var(--prymus-uf-primaria-clara); transform: translateY(-1px); } .prymus-uf-opcao:focus { outline: 3px solid var(--prymus-uf-primaria-clara); outline-offset: 2px; } .prymus-uf-opcao--ativa { background: #eaf1ff; border-color: var(--prymus-uf-primaria); } .prymus-uf-opcao__sigla { font-size: 24px; font-weight: 800; letter-spacing: 1px; color: var(--prymus-uf-primaria); } .prymus-uf-opcao__nome { font-weight: 600; } .prymus-uf-modal__rodape { margin: 18px 0 0; font-size: 12px; line-height: 1.45; color: var(--prymus-uf-texto-suave); } .prymus-uf-modal__x { position: absolute; top: 6px; right: 8px; width: 34px; height: 34px; padding: 0; background: transparent; border: 0; border-radius: 50%; cursor: pointer; font-size: 24px; line-height: 1; color: var(--prymus-uf-texto-suave); } .prymus-uf-modal__x:hover { background: #f0f2f6; color: var(--prymus-uf-texto); } /* ------------------------------------------------------------------------- * Botao de troca (menu, rodape, shortcode) * ---------------------------------------------------------------------- */ .prymus-uf-switch { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: transparent; border: 1px solid currentColor; border-radius: 999px; color: inherit; cursor: pointer; font: inherit; font-size: 13px; line-height: 1.2; text-decoration: none; } .prymus-uf-switch:hover, .prymus-uf-switch:focus-visible { opacity: 0.85; } .prymus-uf-icone { flex: 0 0 auto; vertical-align: middle; } /* Item injetado no menu: herda o estilo do link do Elementor, so alinha o icone. */ .prymus-uf-menu-item > a { display: inline-flex !important; align-items: center; gap: 6px; cursor: pointer; } .prymus-uf-rodape-item > a { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; text-decoration: none; color: inherit; } /* ------------------------------------------------------------------------- * Pilula do menu * Cores da marca: #20385a (azul escuro) e #118fd9 (azul de destaque). * ---------------------------------------------------------------------- */ .prymus-uf-pilula { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 9px 18px; background: #ffffff; border: 1px solid #e3e8f0; border-radius: 999px; box-shadow: 0 2px 10px rgba(32, 56, 90, 0.10); color: #20385a; cursor: pointer; font: inherit; font-size: 15px; line-height: 1.2; white-space: nowrap; transition: box-shadow 0.2s ease, transform 0.2s ease; } .prymus-uf-pilula:hover { box-shadow: 0 4px 16px rgba(32, 56, 90, 0.16); } .prymus-uf-pilula:focus-visible { outline: 2px solid #118fd9; outline-offset: 2px; } .prymus-uf-pilula__pin { display: inline-flex; color: #20385a; } .prymus-uf-pilula__pin .prymus-uf-icone { width: 17px; height: 17px; } .prymus-uf-pilula__estado { font-weight: 600; color: #20385a; } /* #0d76b3 rende 4,7:1 sobre branco. O #118fd9 da marca ficava em 3,5:1 e reprovava no WCAG AA para 15px. */ .prymus-uf-pilula__acao { display: inline-flex; align-items: center; gap: 6px; color: #0d76b3; font-weight: 600; } /* ------------------------------------------------------------------------- * Card do rodape * ---------------------------------------------------------------------- */ .prymus-uf-rodape { display: block; padding: 0; background: transparent; color: inherit; } /* Herda a cor do contexto: em fundo claro o branco sumia. O branco so se aplica quando o bloco esta comprovadamente dentro do rodape escuro. */ .prymus-uf-rodape__titulo { margin: 0 0 14px; color: inherit; font-size: 20px; font-weight: 700; line-height: 1.3; } .prymus-uf-rodape--movido { padding: 0; background: transparent; } .prymus-uf-rodape--movido .prymus-uf-rodape__titulo { color: #ffffff; } /* Sem min-width: em tablet a coluna do rodape fica com ~197px e um minimo fixo de 260px fazia o card invadir a coluna vizinha. Agora ele acompanha a coluna e so para de crescer no max-width. */ .prymus-uf-card { display: block; width: 100%; max-width: 280px; box-sizing: border-box; padding: 18px 20px; background: #f2f6fb; border-radius: 14px; text-align: left; } .prymus-uf-card__topo { display: flex; align-items: center; gap: 12px; } .prymus-uf-card__pin { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 38px; height: 38px; background: #ffffff; border-radius: 50%; color: #20385a; } .prymus-uf-card__pin .prymus-uf-icone { width: 19px; height: 19px; } .prymus-uf-card__txt { display: flex; flex-direction: column; gap: 1px; } .prymus-uf-card__label { color: #5d6b80; font-size: 13px; line-height: 1.3; } .prymus-uf-card__estado { color: #20385a; font-size: 18px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.2; text-transform: uppercase; } .prymus-uf-card__acao { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin: 14px 0 0; padding: 12px 0 0; background: none; border: 0; border-top: 1px solid #dbe3ee; color: #0d76b3; cursor: pointer; font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; } .prymus-uf-card__acao:hover { color: #0a5d8c; } .prymus-uf-card__acao:focus-visible { outline: 2px solid #118fd9; outline-offset: 2px; } /* Fallback do shortcode dentro do rodape escuro. */ .prymus-uf-switch--rodape { border-color: rgba(255, 255, 255, 0.45); color: #ffffff; } .prymus-uf-rodape--movido .prymus-uf-switch--rodape { border-color: currentColor; color: inherit; } /* ------------------------------------------------------------------------- * Responsivo * ---------------------------------------------------------------------- */ @media (max-width: 480px) { .prymus-uf-modal__caixa { padding: 24px 16px 18px; max-width: 100%; } .prymus-uf-modal__titulo { font-size: 19px; } .prymus-uf-modal__opcoes { flex-direction: column; } .prymus-uf-opcao { /* No modo coluna o flex-basis passa a valer como ALTURA: sem este reset, cada botao ficaria com 150px de altura. */ flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 60px; text-align: left; } .prymus-uf-opcao__sigla { font-size: 20px; min-width: 34px; } } /* ------------------------------------------------------------------------- * Preferencias do usuario * ---------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .prymus-uf-modal__caixa { animation: none; } .prymus-uf-opcao { transition: none; } } @media print { .prymus-uf-modal, .prymus-uf-rodape { display: none !important; } } /* Card inserido dentro do rodape do Elementor via [uf_switch tipo="card"]. */ .prymus-uf-rodape--inline { padding: 0; background: transparent; } /* --------------------------------------------------------------------------- * Cards de contato dos modelos "atendimento" (9539) e "atendimento - Empresa" * (9647). * * Por que este estilo mora AQUI e nao no Elementor: * esses modelos entram nas paginas por [elementor-template id="..."]. Por esse * caminho o Elementor NAO enfileira o CSS por elemento do modelo — o arquivo * post-9539.css e gerado mas nunca carregado. O bloco original disfarcava isso * com um