/* Busca Inteligente — Pack Widgets Avançado Todas as cores/medidas vêm de variáveis definidas pelos controles do Elementor no seletor {{WRAPPER}} .pwa-search, com fallback aqui. Sobre a especificidade: campo, botões e formulário levam sempre o prefixo `.pwa-search` (0,2,0). O Kit do Elementor pinta `.elementor-kit-N button` e os temas pintam `input[type="search"]` — ambos 0,1,1 — e ganhariam de uma classe sozinha, deixando o widget com os botões e a borda do tema em vez das cores escolhidas nos controles. */ .pwa-search { --pwa-s-width: 400px; --pwa-s-h: 42px; --pwa-s-bg: #fff; --pwa-s-ink: #1f2937; --pwa-s-muted: #9ca3af; --pwa-s-accent: #1c95ba; --pwa-s-icon: 18px; --pwa-s-btn-bg: #1c95ba; --pwa-s-btn-ink: #fff; --pwa-s-submit-ink: var(--pwa-s-accent); --pwa-s-clear-ink: var(--pwa-s-muted); --pwa-s-panel-bg: #fff; --pwa-s-panel-radius: 10px; --pwa-s-panel-max: 420px; --pwa-s-panel-gap: 6px; --pwa-s-line: #e5e7eb; --pwa-s-z: 9999; --pwa-s-item-ink: #1c95ba; --pwa-s-item-hover: #f3f8fa; --pwa-s-meta: #6b7280; --pwa-s-thumb: 44px; --pwa-s-thumb-radius: 6px; --pwa-s-mark-bg: rgba(28, 149, 186, .16); --pwa-s-mark-ink: inherit; display: flex; align-items: center; gap: 8px; width: 100%; } /* Texto só para leitores de tela (não depende do CSS do tema). */ .pwa-search__sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .pwa-search *, .pwa-search *::before, .pwa-search *::after { box-sizing: border-box; } /* Os três contêineres que envolvem o campo não desenham nada: quem tem borda, fundo e raio é só o .pwa-search__field. Temas costumam dar borda e padding a `form`, a `[role="search"]` e a `.search-form`, e o resultado é um retângulo fantasma em volta do widget. */ .pwa-search[role="search"], .pwa-search .pwa-search__box, .pwa-search .pwa-search__box .pwa-search__form { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; outline: 0; } .pwa-search .pwa-search__box { position: relative; width: 100%; max-width: var(--pwa-s-width); } /* ── Campo ─────────────────────────────────────────────────────────────── */ .pwa-search .pwa-search__field { position: relative; display: flex; align-items: center; height: var(--pwa-s-h); background: var(--pwa-s-bg); border: 1px solid var(--pwa-s-accent); border-radius: 100px; transition: box-shadow .2s ease, border-color .2s ease; } .pwa-search .pwa-search__field:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pwa-s-accent) 25%, transparent); } /* Navegadores sem color-mix continuam com um foco visível. */ @supports not (color: color-mix(in srgb, red 50%, blue)) { .pwa-search .pwa-search__field:focus-within { box-shadow: 0 0 6px rgba(0, 0, 0, .25); } } /* * Cadeia longa de propósito. O Kit do Elementor gera * .elementor-kit-N input:not([type="button"]):not([type="submit"]) * — especificidade (0,3,1), porque cada `:not([type=…])` conta como classe — * e pinta borda 1px + raio 3px em todo input do site. Uma classe sozinha * (0,2,0) perde e o campo fica com um retângulo cinza por dentro da pílula. * Este seletor é (0,4,1). Não aparecia no editor porque o da * pré-visualização do template de cabeçalho não leva a classe do Kit. */ .pwa-search .pwa-search__box .pwa-search__field input.pwa-search__input { flex: 1 1 auto; width: auto; min-width: 0; min-height: 0; height: 100%; margin: 0; padding: 0 6px 0 18px; border: 0; border-radius: 0; background: transparent; background-image: none; color: var(--pwa-s-ink); outline: none; box-shadow: none; -webkit-appearance: none; appearance: none; } /* * Tipografia fica de propósito numa regra fraca (0,1,0): o controle * "Tipografia" do widget sai em (0,4,0) e precisa vencer daqui. Sem valor no * controle, o campo herda a tipografia de formulário do Kit — que é o * comportamento esperado num site com tipografia global definida. */ .pwa-search__input { font-size: .875rem; line-height: 1; } .pwa-search .pwa-search__box .pwa-search__field input.pwa-search__input:focus { border: 0; border-radius: 0; outline: none; box-shadow: none; background: transparent; } .pwa-search .pwa-search__field input.pwa-search__input::placeholder { color: var(--pwa-s-muted); opacity: 1; } /* O "x" nativo do type=search duplicaria o nosso botão de limpar. */ .pwa-search .pwa-search__input::-webkit-search-cancel-button, .pwa-search .pwa-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } /* ── Botões do campo ───────────────────────────────────────────────────── */ /* Reset completo: o Kit do Elementor e os temas dão fundo, borda, padding, min-height e text-transform a todo `button`. */ .pwa-search .pwa-search__clear, .pwa-search .pwa-search__submit, .pwa-search .pwa-search__trigger, .pwa-search .pwa-search__clear:hover, .pwa-search .pwa-search__submit:hover, .pwa-search .pwa-search__trigger:hover, .pwa-search .pwa-search__clear:focus, .pwa-search .pwa-search__submit:focus, .pwa-search .pwa-search__trigger:focus { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: auto; min-width: 0; min-height: 0; padding: 0; margin: 0; border: 0; background: transparent; background-image: none; box-shadow: none; text-shadow: none; text-transform: none; letter-spacing: normal; cursor: pointer; line-height: 0; border-radius: 100px; -webkit-appearance: none; appearance: none; } .pwa-search .pwa-search__clear, .pwa-search .pwa-search__clear:hover { width: calc(var(--pwa-s-h) - 14px); height: calc(var(--pwa-s-h) - 14px); color: var(--pwa-s-clear-ink); } .pwa-search .pwa-search__clear:hover { color: var(--pwa-s-ink); } .pwa-search .pwa-search__clear[hidden] { display: none; } .pwa-search .pwa-search__submit, .pwa-search .pwa-search__submit:hover, .pwa-search .pwa-search__submit:focus { position: relative; width: var(--pwa-s-h); height: var(--pwa-s-h); margin-inline-end: 1px; color: var(--pwa-s-submit-ink); } .pwa-search--btn-filled .pwa-search__submit, .pwa-search--btn-filled .pwa-search__submit:hover, .pwa-search--btn-filled .pwa-search__submit:focus { background: var(--pwa-s-btn-bg); color: var(--pwa-s-btn-ink); height: calc(var(--pwa-s-h) - 8px); width: calc(var(--pwa-s-h) - 8px); margin-inline-end: 4px; } .pwa-search--btn-hidden .pwa-search__submit { display: none; } .pwa-search .pwa-search__trigger, .pwa-search .pwa-search__trigger:hover, .pwa-search .pwa-search__trigger:focus { width: var(--pwa-s-h); height: var(--pwa-s-h); border: 1px solid currentColor; color: var(--pwa-s-submit-ink); } .pwa-search .pwa-search__submit:focus-visible, .pwa-search .pwa-search__clear:focus-visible, .pwa-search .pwa-search__trigger:focus-visible { outline: 2px solid var(--pwa-s-accent); outline-offset: 2px; } /* `fill` explícito: temas com `svg { fill: currentColor }` venciam o atributo fill="none" do SVG e o ícone virava um círculo maciço. */ .pwa-search .pwa-search__icon { display: block; width: var(--pwa-s-icon); height: var(--pwa-s-icon); max-width: none; fill: none; color: inherit; transition: transform .15s ease; } .pwa-search .pwa-search__icon circle, .pwa-search .pwa-search__icon path { fill: none; stroke: currentColor; } .pwa-search .pwa-search__submit:hover .pwa-search__icon, .pwa-search .pwa-search__trigger:hover .pwa-search__icon { transform: scale(1.12); } /* Estado de carregamento: a lupa dá lugar ao anel giratório. */ .pwa-search__spinner { position: absolute; inset: 0; margin: auto; width: var(--pwa-s-icon); height: var(--pwa-s-icon); border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; opacity: 0; animation: pwa-search-spin .7s linear infinite; } .pwa-search.is-loading .pwa-search__submit .pwa-search__icon { opacity: 0; } .pwa-search.is-loading .pwa-search__spinner { opacity: 1; } @keyframes pwa-search-spin { to { transform: rotate(360deg); } } /* ── Painel de resultados ──────────────────────────────────────────────── */ .pwa-search__panel { position: absolute; top: calc(100% + var(--pwa-s-panel-gap)); left: 0; right: 0; z-index: var(--pwa-s-z); max-height: var(--pwa-s-panel-max); overflow-y: auto; overscroll-behavior: contain; background: var(--pwa-s-panel-bg); border: 1px solid var(--pwa-s-line); border-radius: var(--pwa-s-panel-radius); box-shadow: 0 8px 24px -4px rgba(0, 0, 0, .14); -webkit-overflow-scrolling: touch; } .pwa-search__panel[hidden] { display: none; } /* Abre para cima quando não há espaço abaixo (classe posta pelo JS). */ .pwa-search.is-flipped .pwa-search__panel { top: auto; bottom: calc(100% + var(--pwa-s-panel-gap)); } .pwa-search__list { margin: 0; padding: 0; list-style: none; } .pwa-search__list li { margin: 0; } .pwa-search__option { cursor: pointer; } .pwa-search .pwa-search__option > a, .pwa-search .pwa-search__recent-item > button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; color: var(--pwa-s-item-ink); text-decoration: none; border: 0; background: transparent; text-align: start; font: inherit; cursor: pointer; border-bottom: 1px solid var(--pwa-s-line); transition: background .15s ease; } .pwa-search__list > li:last-child > a, .pwa-search__list > li:last-child > button { border-bottom: 0; } .pwa-search .pwa-search__option[aria-selected="true"] > a, .pwa-search .pwa-search__option > a:hover, .pwa-search .pwa-search__option > a:focus, .pwa-search .pwa-search__recent-item[aria-selected="true"] > button, .pwa-search .pwa-search__recent-item > button:hover { background: var(--pwa-s-item-hover); color: var(--pwa-s-item-ink); } .pwa-search__thumb { flex: 0 0 auto; width: var(--pwa-s-thumb); height: var(--pwa-s-thumb); object-fit: cover; border-radius: var(--pwa-s-thumb-radius); background: var(--pwa-s-item-hover); } .pwa-search__body { min-width: 0; flex: 1 1 auto; } .pwa-search__title { display: block; color: inherit; font-size: 14px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; } .pwa-search__excerpt, .pwa-search__meta { display: block; margin-top: 2px; color: var(--pwa-s-meta); font-size: 12px; font-weight: 400; line-height: 1.4; } .pwa-search__excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pwa-search__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pwa-search__badge { display: inline-block; padding: 1px 7px; border-radius: 100px; background: var(--pwa-s-item-hover); color: var(--pwa-s-meta); font-size: 11px; font-weight: 600; line-height: 1.6; white-space: nowrap; } .pwa-search mark { background: var(--pwa-s-mark-bg); color: var(--pwa-s-mark-ink); padding: 0 1px; border-radius: 2px; } /* Mensagens e rodapé */ .pwa-search__message { padding: 14px; color: var(--pwa-s-meta); font-size: 13px; } .pwa-search__message--error { color: #b91c1c; } .pwa-search__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--pwa-s-line); color: var(--pwa-s-meta); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .pwa-search .pwa-search__head button { border: 0; background: none; box-shadow: none; min-height: 0; padding: 0; color: var(--pwa-s-accent); font: inherit; text-transform: none; letter-spacing: 0; cursor: pointer; } .pwa-search .pwa-search__more { display: block; padding: 11px 14px; border-top: 1px solid var(--pwa-s-line); color: var(--pwa-s-accent); font-size: 13px; font-weight: 600; text-align: center; text-decoration: none; } .pwa-search .pwa-search__more:hover { background: var(--pwa-s-item-hover); } /* Esqueleto durante o carregamento */ .pwa-search__skeleton { padding: 12px 14px; } .pwa-search__skeleton span { display: block; height: 10px; margin-bottom: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--pwa-s-item-hover) 25%, var(--pwa-s-line) 37%, var(--pwa-s-item-hover) 63%); background-size: 400% 100%; animation: pwa-search-shimmer 1.2s ease-in-out infinite; } .pwa-search__skeleton span:nth-child(2) { width: 70%; } .pwa-search__skeleton span:nth-child(3) { width: 45%; margin-bottom: 0; } @keyframes pwa-search-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* ── Formato: lupa que expande ─────────────────────────────────────────── */ .pwa-search--icon .pwa-search__box { width: auto; max-width: none; } .pwa-search--icon .pwa-search__field { width: 0; padding: 0; border-width: 0; opacity: 0; overflow: hidden; pointer-events: none; transition: width .28s ease, opacity .2s ease; } .pwa-search--icon.is-open .pwa-search__field { width: min(var(--pwa-s-width), 78vw); border-width: 1px; opacity: 1; pointer-events: auto; } .pwa-search--icon .pwa-search__panel { left: auto; right: 0; width: min(var(--pwa-s-width), 90vw); } /* ── Formato: tela cheia ───────────────────────────────────────────────── */ .pwa-search--overlay .pwa-search__box { display: none; } .pwa-search--overlay.is-open .pwa-search__box { display: block; position: fixed; inset: 0; z-index: calc(var(--pwa-s-z) + 1); max-width: none; padding: 12vh 16px 16px; background: rgba(15, 23, 42, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); overflow-y: auto; animation: pwa-search-fade .18s ease; } .pwa-search--overlay.is-open .pwa-search__form, .pwa-search--overlay.is-open .pwa-search__panel { width: 100%; max-width: min(var(--pwa-s-width), 92vw); margin: 0 auto; } .pwa-search--overlay.is-open .pwa-search__panel { position: static; margin-top: var(--pwa-s-panel-gap); max-height: 60vh; } @keyframes pwa-search-fade { from { opacity: 0; } to { opacity: 1; } } /* ── Preferências do sistema ───────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .pwa-search *, .pwa-search *::before, .pwa-search *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .pwa-search.is-loading .pwa-search__spinner { animation: none; opacity: 1; } } @media (max-width: 480px) { .pwa-search__thumb { --pwa-s-thumb: 38px; } }