/* ============================================================ Search Widget — search-widget.css Inclua este arquivo no do seu site. ============================================================ */ :root { --sw-primary: #2563eb; --sw-bg: #ffffff; --sw-overlay-bg: rgba(15, 23, 42, 0.55); --sw-border: #e2e8f0; --sw-text: #0f172a; --sw-text-muted: #64748b; --sw-hover-bg: #f1f5f9; --sw-active-bg: #eff6ff; --sw-active-border: #bfdbfe; --sw-shadow: 0 20px 60px -10px rgba(0,0,0,0.3), 0 4px 20px rgba(0,0,0,0.1); --sw-radius: 14px; --sw-input-h: 56px; --sw-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --sw-z: 99999; } /* ---------------------------------------------------------- Botão trigger (lupa) ---------------------------------------------------------- */ .sw-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: none; border-radius: 8px; background: transparent; color: inherit; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease; -webkit-tap-highlight-color: transparent; } .sw-btn:hover { background: rgba(0,0,0,0.06); } .sw-btn:active { transform: scale(0.92); } .sw-btn svg { width: 22px; height: 22px; display: block; } /* ---------------------------------------------------------- Overlay / backdrop ---------------------------------------------------------- */ .sw-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: var(--sw-z); display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; background: var(--sw-overlay-bg); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity 0.18s ease, visibility 0.18s ease; } .sw-overlay.sw-open { opacity: 1; visibility: visible; } /* ---------------------------------------------------------- Modal card ---------------------------------------------------------- */ .sw-modal { width: 80vw; max-width: 80vw; margin: auto; background: var(--sw-bg); border-radius: var(--sw-radius); box-shadow: var(--sw-shadow); overflow: hidden; font-family: var(--sw-font); transform: translateY(-12px) scale(0.97); transition: transform 0.18s ease; } .sw-overlay.sw-open .sw-modal { transform: translateY(0) scale(1); } /* ---------------------------------------------------------- Barra de busca ---------------------------------------------------------- */ .sw-search-wrap { display: flex; align-items: center; height: var(--sw-input-h); padding: 0 16px; gap: 12px; border-bottom: 1px solid var(--sw-border); } .sw-search-icon { flex-shrink: 0; width: 20px; height: 20px; color: var(--sw-text-muted); } .sw-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: var(--sw-font); font-size: 16px; color: var(--sw-text); line-height: 1; } .sw-input::placeholder { color: var(--sw-text-muted); } .sw-input::-webkit-search-decoration, .sw-input::-webkit-search-cancel-button, .sw-input::-webkit-search-results-button { display: none; } .sw-esc-btn { flex-shrink: 0; padding: 3px 8px; border: 1px solid var(--sw-border); border-radius: 6px; background: transparent; font-family: var(--sw-font); font-size: 11px; color: var(--sw-text-muted); cursor: pointer; letter-spacing: 0.02em; transition: background 0.1s, color 0.1s; } .sw-esc-btn:hover { background: var(--sw-hover-bg); color: var(--sw-text); } /* ---------------------------------------------------------- Lista de resultados ---------------------------------------------------------- */ .sw-results { max-height: 460px; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; } .sw-results::-webkit-scrollbar { width: 4px; } .sw-results::-webkit-scrollbar-track { background: transparent; } .sw-results::-webkit-scrollbar-thumb { background: var(--sw-border); border-radius: 4px; } .sw-result-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; text-decoration: none; color: var(--sw-text); border-bottom: 1px solid var(--sw-border); transition: background 0.1s ease; outline: none; } .sw-result-item:last-child { border-bottom: none; } .sw-result-item:hover, .sw-result-item.sw-active { background: var(--sw-hover-bg); } .sw-result-item.sw-active { background: var(--sw-active-bg); box-shadow: inset 3px 0 0 var(--sw-primary); } .sw-result-body { flex: 1; min-width: 0; } .sw-result-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; } .sw-result-cat { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sw-primary); background: var(--sw-active-bg); padding: 1px 6px; border-radius: 4px; } .sw-result-date { font-size: 11px; color: var(--sw-text-muted); } .sw-result-title { font-size: 14px; font-weight: 600; line-height: 1.35; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sw-result-chunk { font-size: 12px; color: var(--sw-text-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sw-result-arrow { flex-shrink: 0; align-self: center; width: 16px; height: 16px; color: var(--sw-border); transition: color 0.1s; } .sw-result-item:hover .sw-result-arrow, .sw-result-item.sw-active .sw-result-arrow { color: var(--sw-text-muted); } /* ---------------------------------------------------------- Estados: loading / vazio / erro ---------------------------------------------------------- */ .sw-state { padding: 36px 16px; text-align: center; color: var(--sw-text-muted); font-size: 14px; font-family: var(--sw-font); } .sw-state-label { margin-top: 10px; } .sw-dots { display: inline-flex; gap: 5px; } .sw-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--sw-text-muted); animation: sw-pulse 1.2s ease-in-out infinite; } .sw-dots span:nth-child(2) { animation-delay: 0.18s; } .sw-dots span:nth-child(3) { animation-delay: 0.36s; } @keyframes sw-pulse { 0%, 80%, 100% { transform: scale(0.5); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } } /* ---------------------------------------------------------- Rodapé com atalhos ---------------------------------------------------------- */ .sw-footer { display: flex; align-items: center; gap: 14px; padding: 8px 16px; border-top: 1px solid var(--sw-border); background: #f8fafc; } .sw-hint { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--sw-text-muted); font-family: var(--sw-font); } .sw-key { display: inline-block; padding: 1px 5px; border: 1px solid #cbd5e1; border-bottom-width: 2px; border-radius: 4px; font-family: monospace; font-size: 10px; background: #fff; color: var(--sw-text); line-height: 1.6; } /* ---------------------------------------------------------- Responsivo ---------------------------------------------------------- */ @media (max-width: 520px) { .sw-modal { width: 80vw; max-width: 80vw; border-radius: var(--sw-radius); } .sw-results { max-height: 55vh; } .sw-footer { display: none; } }