/** * Barra "Busque Redentoristas". * * Nenhuma cor é escolhida aqui. Tudo vem do design system do portal — o plugin * A12 Paletas põe uma classe de paleta no (nesta página, * `a12-paleta-verde-menta`) e com ela as variáveis do núcleo: * * --a12-principal / --a12-on-principal * --a12-secundaria / --a12-on-secundaria * --a12-intermediaria / --a12-on-intermediaria * --a12-fundo-suave / --a12-fundo-minimo * * O kit do Elementor mapeia as mesmas cores em --e-global-color-a12*, que é o * fallback usado abaixo. Trocar a paleta do núcleo troca a barra junto, sem * tocar neste arquivo. * * O contêiner (fundo --a12-fundo-minimo, cantos arredondados) já vem do * Elementor: aqui só entram os campos. */ .a12-red-busca { /* Ação e destaques: o tom escuro da paleta, com seu par de contraste. */ --a12-red-acao: var( --a12-secundaria, var( --e-global-color-a12marcaescura, #1b5547 ) ); --a12-red-acao-texto: var( --a12-on-secundaria, #fff ); /* Realce sutil (letra ativa, foco): o tom principal. */ --a12-red-realce: var( --a12-principal, var( --e-global-color-a12marca, #2f957c ) ); /* Texto e superfícies herdam o kit. */ --a12-red-texto: var( --e-global-color-text, #454545 ); --a12-red-campo-fundo: var( --e-global-color-2473858, #fff ); --a12-red-borda: color-mix( in srgb, var( --a12-red-texto ) 22%, transparent ); --a12-red-raio: 999px; display: flex; flex-direction: column; gap: 20px; width: 100%; color: var( --a12-red-texto ); font-family: inherit; } .a12-red-busca__titulo { margin: 0; color: var( --a12-red-acao ); font-weight: 700; } .a12-red-busca__linha { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; } /* As divisórias do mockup, na cor do texto com pouca opacidade. */ .a12-red-busca__linha--selects, .a12-red-busca__linha--alfabeto { border-top: 1px solid var( --a12-red-borda ); padding-top: 20px; } .a12-red-busca__campo { display: flex; flex: 1 1 240px; flex-direction: column; gap: 6px; min-width: 0; } .a12-red-busca__campo--texto { flex: 1 1 420px; } .a12-red-busca .a12-red-busca__rotulo { color: var( --a12-red-acao ); font-size: 0.875rem; font-weight: 600; } .a12-red-busca input[ type='search' ], .a12-red-busca select { width: 100%; padding: 14px 18px; border: 1px solid var( --a12-red-borda ); border-radius: 8px; background-color: var( --a12-red-campo-fundo ); color: var( --a12-red-texto ); font: inherit; line-height: 1.3; appearance: none; } .a12-red-busca input[ type='search' ] { border-radius: var( --a12-red-raio ); } .a12-red-busca input[ type='search' ]::placeholder { color: color-mix( in srgb, var( --a12-red-texto ) 55%, transparent ); } /* A seta do select desenhada com a cor corrente, para acompanhar a paleta. */ .a12-red-busca__campo--select { position: relative; } .a12-red-busca__campo--select::after { position: absolute; right: 16px; bottom: 22px; width: 0; height: 0; border-top: 6px solid currentColor; border-right: 5px solid transparent; border-left: 5px solid transparent; content: ''; opacity: 0.7; pointer-events: none; } .a12-red-busca select { padding-right: 42px; } .a12-red-busca input[ type='search' ]:focus-visible, .a12-red-busca select:focus-visible, .a12-red-busca__letra:focus-visible, .a12-red-busca__enviar:focus-visible { outline: 2px solid var( --a12-red-realce ); outline-offset: 2px; } .a12-red-busca .a12-red-busca__enviar { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border: 0; border-radius: var( --a12-red-raio ); background-color: var( --a12-red-acao ); color: var( --a12-red-acao-texto ); font: inherit; font-weight: 600; cursor: pointer; transition: opacity 0.15s ease; } .a12-red-busca .a12-red-busca__enviar:hover { opacity: 0.9; } .a12-red-busca__linha--alfabeto { justify-content: center; align-items: center; gap: 2px; row-gap: 6px; } .a12-red-busca .a12-red-busca__letra { display: inline-flex; justify-content: center; align-items: center; min-width: 28px; height: 32px; padding: 0 4px; border: 0; border-radius: 6px; background: none; color: var( --a12-red-texto ); font: inherit; font-weight: 600; line-height: 1; text-decoration: none; } .a12-red-busca a.a12-red-busca__letra:hover { background-color: var( --a12-fundo-suave, var( --e-global-color-a12superficie, rgba( 0, 0, 0, 0.05 ) ) ); color: var( --a12-red-texto ); } .a12-red-busca .a12-red-busca__letra.is-ativa, .a12-red-busca a.a12-red-busca__letra.is-ativa:hover { background-color: var( --a12-red-realce ); color: var( --a12-on-principal, #fff ); } /* Letra sem ninguém: presente, mas apagada — como no portal antigo. */ .a12-red-busca .a12-red-busca__letra.is-vazia { opacity: 0.35; cursor: default; } .a12-red-busca .a12-red-busca__letra--todas { color: var( --a12-red-realce ); font-size: 1.1em; } /* Só para leitor de tela: ocupa lugar nenhum na página. */ .a12-red-busca__anuncio { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset( 50% ); overflow: hidden; white-space: nowrap; } .a12-red-busca__limpar { margin: 0; font-size: 0.875rem; } .a12-red-busca__limpar.is-oculto { display: none; } .a12-red-busca__limpar a { color: var( --a12-red-acao ); } /* Enquanto a lista é buscada, a barra fica inerte — sem sumir da tela. */ .a12-red-busca.is-carregando { opacity: 0.6; pointer-events: none; } /* Enquanto a lista nova não chega, a grade mostra esqueletos — ver assets/skeleton.css. Nada de esmaecer: o esqueleto já diz que está vindo. */ @media ( max-width: 767px ) { .a12-red-busca__campo { flex-basis: 100%; } .a12-red-busca .a12-red-busca__linha--texto .a12-red-busca__enviar { justify-content: center; width: 100%; } } /* ── Nenhum resultado ────────────────────────────────────────────────────── */ .a12-red-vazio { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 56px 24px; text-align: center; } .a12-red-vazio .a12-red-vazio__titulo { margin: 0; color: var( --a12-secundaria, var( --e-global-color-a12marcaescura, #1b5547 ) ); font-size: 1.25rem; font-weight: 700; } .a12-red-vazio .a12-red-vazio__detalhe { margin: 0; max-width: 46ch; color: var( --e-global-color-text, #454545 ); font-weight: 400; } .a12-red-vazio .a12-red-vazio__limpar { margin-top: 8px; padding: 12px 26px; border: 0; border-radius: 999px; background-color: var( --a12-secundaria, var( --e-global-color-a12marcaescura, #1b5547 ) ); color: var( --a12-on-secundaria, #fff ); font: inherit; font-weight: 600; cursor: pointer; } .a12-red-vazio .a12-red-vazio__limpar:hover { opacity: 0.9; }