/* ========================================================== * GlosTV Search — Desktop v1.1.0 * * CHANGELOG v1.1.0 * ───────────────── * • Todos os seletores estão ESCOPADOS sob .glostv-search-container * (elementos internos) ou sob .glostv-overlay / .glostv-suggestions * (elementos movidos para via JS). Nenhum seletor global. * • Removida a seção "Override" com seletores soltos + !important * que causava vazamento de outline/box-shadow laranja no tema. * • Removido wildcard `.glostv-search-container *`. * • Adicionados :focus-visible neutros para todos os interativos. * • Cores accent isoladas em custom properties (--glostv-*). * • z-index reduzidos a valores razoáveis (sem int32 máximo). * • Removidos contain, will-change e backface-visibility supérfluos. * ========================================================== */ /* ── 1 Custom properties (escopadas) ──────────────────────── */ .glostv-search-container, .glostv-suggestions { --glostv-accent: #ff6b00; --glostv-accent-dark: #e55d00; --glostv-accent-light: #ff8c00; --glostv-focus-ring: 0 0 0 3px rgba(0, 0, 0, 0.06); --glostv-radius: 28px; --glostv-height: 56px; } /* ── 2 Container ──────────────────────────────────────────── */ .glostv-search-container { box-sizing: border-box; width: 100%; max-width: 720px; margin: 30px auto; position: relative; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; z-index: 1000; } /* ── 3 Search box ─────────────────────────────────────────── */ .glostv-search-container .glostv-search-box { position: relative; display: flex; align-items: center; box-sizing: border-box; } /* ── 4 Input ──────────────────────────────────────────────── */ .glostv-search-container .glostv-search-input { box-sizing: border-box; display: block; width: 100%; height: var(--glostv-height); margin: 0; padding: 12px 100px 12px 22px; border: 1px solid #e6e6e6; border-radius: var(--glostv-radius); font-size: 20px; line-height: 1.2; color: #222; background: #fff; outline: none; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; transition: border-color 0.3s ease, box-shadow 0.3s ease; } /* Focus — cinza neutro; NÃO propaga laranja */ .glostv-search-container .glostv-search-input:focus { border-color: #bbb; box-shadow: var(--glostv-focus-ring); outline: none; } .glostv-search-container .glostv-search-input:focus-visible { border-color: #999; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.10); } /* ── 5 Clear button ───────────────────────────────────────── */ .glostv-search-container .glostv-clear-button { position: absolute; right: 64px; top: 50%; transform: translateY(-50%) scale(0.7); width: 34px; height: 34px; margin: 0; padding: 0; background: #d0d0d0; border: none; border-radius: 50%; cursor: pointer; /* visibility em vez de display para permitir transição suave */ visibility: hidden; opacity: 0; pointer-events: none; z-index: 3; outline: none; box-shadow: none; transition: background 0.25s ease, transform 0.25s ease, opacity 0.25s ease, visibility 0.25s ease; } .glostv-search-container .glostv-clear-button.show { visibility: visible; opacity: 1; transform: translateY(-50%) scale(1); pointer-events: auto; display: flex; align-items: center; justify-content: center; } .glostv-search-container .glostv-clear-button:hover { background: var(--glostv-accent); transform: translateY(-50%) scale(1.08); } .glostv-search-container .glostv-clear-button:active { transform: translateY(-50%) scale(0.92); } .glostv-search-container .glostv-clear-button:focus-visible { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3); } .glostv-search-container .glostv-clear-button svg { stroke: #666; transition: stroke 0.2s ease; pointer-events: none; } .glostv-search-container .glostv-clear-button:hover svg { stroke: #fff; } /* ── 6 Search button ──────────────────────────────────────── */ .glostv-search-container .glostv-search-button { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 48px; height: 40px; margin: 0; padding: 0; background: var(--glostv-accent); border: none; border-radius: 9px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); outline: none; transition: transform 0.3s ease, box-shadow 0.3s ease; } .glostv-search-container .glostv-search-button:hover { transform: translateY(-50%) scale(1.05); } .glostv-search-container .glostv-search-button:active { transform: translateY(-50%) scale(0.95); } /* Focus-visible neutro: anel branco + contorno escuro */ .glostv-search-container .glostv-search-button:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0, 0, 0, 0.3); } /* ── 7 Overlay (top-level — JS move para ) ──────────── */ .glostv-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: transparent; z-index: 99998; display: none; } .glostv-overlay.active { display: block; } /* ── 8 Suggestions dropdown (top-level — JS move para ) */ .glostv-suggestions { box-sizing: border-box; position: fixed; left: 0; top: 0; width: auto; background: #fff; border-radius: 12px; box-shadow: 0 10px 50px rgba(0, 0, 0, 0.25); max-height: 600px; overflow-y: auto; overflow-x: hidden; display: none; border: 1px solid #e0e0e0; z-index: 99999; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .glostv-suggestions.active { display: block; animation: glostvSlideDown 0.3s ease; } /* ── 9 Suggestion item ────────────────────────────────────── */ .glostv-suggestions .glostv-suggestion-item { box-sizing: border-box; padding: 15px 20px; cursor: pointer; display: flex; gap: 15px; align-items: center; border-bottom: 1px solid #f0f0f0; background: #fff; position: relative; overflow: hidden; isolation: isolate; transition: background 0.15s ease, transform 0.12s ease; } .glostv-suggestions .glostv-suggestion-item:last-child { border-bottom: none; } /* Barra lateral laranja (pseudo-element) */ .glostv-suggestions .glostv-suggestion-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(180deg, var(--glostv-accent), var(--glostv-accent-light)); filter: blur(9px); opacity: 0; z-index: 0; pointer-events: none; transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1), opacity 220ms cubic-bezier(0.4, 0, 0.2, 1); } /* Sheen sweep (pseudo-element) */ .glostv-suggestions .glostv-suggestion-item::after { content: ""; position: absolute; inset: 0; transform: translateX(-120%) skewX(-12deg); background: linear-gradient( 90deg, rgba(255, 107, 0, 0) 0%, rgba(255, 107, 0, 0.12) 40%, rgba(255, 140, 0, 0.12) 60%, rgba(255, 140, 0, 0) 100% ); pointer-events: none; opacity: 0; z-index: 0; } /* Hover */ .glostv-suggestions .glostv-suggestion-item:hover { background: linear-gradient(90deg, rgba(255, 107, 0, 0.06), rgba(255, 140, 0, 0.03)); } .glostv-suggestions .glostv-suggestion-item:hover::before { width: 6px; opacity: 1; } .glostv-suggestions .glostv-suggestion-item:hover::after { opacity: 1; animation: glostvSheen 700ms cubic-bezier(0.4, 0, 0.2, 1); } /* Active (click) */ .glostv-suggestions .glostv-suggestion-item:active { transform: translateY(1px); } .glostv-suggestions .glostv-suggestion-item:active::before { width: 10px; } /* Keyboard navigation (.is-active aplicada via JS) */ .glostv-suggestions .glostv-suggestion-item.is-active { background: linear-gradient(90deg, rgba(255, 107, 0, 0.06), rgba(255, 140, 0, 0.03)); } .glostv-suggestions .glostv-suggestion-item.is-active::before { width: 6px; opacity: 1; } .glostv-suggestions .glostv-suggestion-item.is-active .glostv-suggestion-title { color: var(--glostv-accent); } .glostv-suggestions .glostv-suggestion-item.is-active .glostv-suggestion-img { transform: translateX(2px) scale(1.02); } /* Focus-visible para navegação por teclado */ .glostv-suggestions .glostv-suggestion-item:focus-visible { outline: 2px solid rgba(0, 0, 0, 0.2); outline-offset: -2px; } /* ── 10 Imagem da sugestão ────────────────────────────────── */ .glostv-suggestions .glostv-suggestion-img { width: 80px; height: 60px; border-radius: 8px; object-fit: contain; flex-shrink: 0; background: #f3f3f3; display: block; position: relative; z-index: 1; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .glostv-suggestions .glostv-suggestion-item:hover .glostv-suggestion-img { transform: translateX(2px) scale(1.02); } /* ── 11 Conteúdo da sugestão ──────────────────────────────── */ .glostv-suggestions .glostv-suggestion-content { flex: 1; min-width: 0; position: relative; z-index: 1; } .glostv-suggestions .glostv-suggestion-category { font-size: 11px; color: var(--glostv-accent); font-weight: 600; text-transform: uppercase; margin-bottom: 6px; } .glostv-suggestions .glostv-suggestion-title { font-size: 15px; font-weight: 600; color: #333; line-height: 1.4; transition: color 0.25s ease; } .glostv-suggestions .glostv-suggestion-item:hover .glostv-suggestion-title { color: var(--glostv-accent); } /* ── 12 Highlight ─────────────────────────────────────────── */ .glostv-suggestions .glostv-highlight { background: #fff3cd; padding: 2px 5px; border-radius: 3px; font-weight: 600; color: #856404; } /* ── 13 "Ver todos" ───────────────────────────────────────── */ .glostv-suggestions .glostv-view-all { padding: 15px 20px; text-align: center; border-top: 1px solid #f0f0f0; background: #fff; } .glostv-suggestions .glostv-view-all a { color: var(--glostv-accent); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; transition: color 0.2s ease; } .glostv-suggestions .glostv-view-all a:hover { color: var(--glostv-accent-dark); } /* ── 14 Loading / Erro ────────────────────────────────────── */ .glostv-suggestions .glostv-loading { padding: 30px; text-align: center; color: #666; background: #fff; } .glostv-suggestions .glostv-spinner { width: 30px; height: 30px; border: 3px solid #f0f0f0; border-top-color: var(--glostv-accent); border-radius: 50%; animation: glostvSpin 0.8s linear infinite; margin: 0 auto 10px; } .glostv-suggestions .glostv-no-results { padding: 40px 20px; text-align: center; color: #999; background: #fff; } /* ── 15 Scrollbar ─────────────────────────────────────────── */ .glostv-suggestions::-webkit-scrollbar { width: 8px; } .glostv-suggestions::-webkit-scrollbar-track { background: #f1f1f1; } .glostv-suggestions::-webkit-scrollbar-thumb { background: var(--glostv-accent); border-radius: 10px; } .glostv-suggestions::-webkit-scrollbar-thumb:hover { background: var(--glostv-accent-dark); } /* ── 16 Keyframes ─────────────────────────────────────────── */ @keyframes glostvSlideDown { from { opacity: 0; transform: translateY(-15px); } to { opacity: 1; transform: translateY(0); } } @keyframes glostvSheen { from { transform: translateX(-120%) skewX(-12deg); } to { transform: translateX(120%) skewX(-12deg); } } @keyframes glostvSpin { to { transform: rotate(360deg); } } /* ── 17 Reduced motion ────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .glostv-search-container .glostv-search-input, .glostv-search-container .glostv-search-button, .glostv-search-container .glostv-clear-button, .glostv-suggestions, .glostv-suggestions .glostv-suggestion-item, .glostv-suggestions .glostv-suggestion-item::before, .glostv-suggestions .glostv-suggestion-item::after, .glostv-suggestions .glostv-suggestion-img, .glostv-suggestions .glostv-suggestion-title { transition-duration: 0.01ms; animation-duration: 0.01ms; } }