:root { --accent: #db4626; } @keyframes spin3 { 0%, 100% { box-shadow: 10px 10px rgba(219, 70, 38, 1), -10px 10px rgba(219, 70, 38, 0.2), -10px -10px rgba(219, 70, 38, 1), 10px -10px rgba(219, 70, 38, 0.2); } 25% { box-shadow: -10px 10px rgba(219, 70, 38, 0.2), -10px -10px rgba(219, 70, 38, 1), 10px -10px rgba(219, 70, 38, 0.2), 10px 10px rgba(219, 70, 38, 1); } 50% { box-shadow: -10px -10px rgba(219, 70, 38, 1), 10px -10px rgba(219, 70, 38, 0.2), 10px 10px rgba(219, 70, 38, 1), -10px 10px rgba(219, 70, 38, 0.2); } 75% { box-shadow: 10px -10px rgba(219, 70, 38, 0.2), 10px 10px rgba(219, 70, 38, 1), -10px 10px rgba(219, 70, 38, 0.2), -10px -10px rgba(219, 70, 38, 1); } } #wpadminbar { top: 0 !important; } #c27-site-wrapper { background-color: #f4f4f4 }/* Estilo base */ .quick-search-instance { max-width: 700px; width: 100%; margin: 0 auto; padding: 0 8px; } .header-search { position: relative; background: rgba(255, 255, 255, 0.9); border-radius: 8px; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); transition: box-shadow 0.3s ease, background-color 0.3s ease; } /* Foco do campo de busca */ .header-search input[type="search"]:focus { background-color: rgba(230, 230, 230, 0.5); box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); } /* Campo de input da busca */ .header-search input[type="search"] { width: 100%; font-size: 14px; border: none; outline: none; padding: 8px 12px; border-radius: 6px; background: transparent; transition: width 0.3s ease; } /* Placeholder do campo de busca */ .header-search input[type="search"]::placeholder { color: #aaa; font-size: 14px; } /* Ícone de busca */ .header-search i.mi.search { position: absolute; right: 12px; font-size: 16px; color: #888; cursor: pointer; transition: color 0.3s ease, font-size 0.3s ease; } /* Ícone de busca em foco */ .header-search i.mi.search:hover { color: #333; } /* Responsividade para dispositivos menores */ @media (max-width: 1024px) { .quick-search-instance { max-width: 100%; padding: 0 10px; } .header-search { padding: 8px 12px; } .header-search input[type="search"] { font-size: 15px; padding: 10px 14px; } .header-search i.mi.search { font-size: 18px; } } /* Responsividade para telas pequenas (até 750px) */ @media (max-width: 750px) { .quick-search-instance { max-width: 100%; padding: 0 16px; } .header-search { padding: 6px 10px; width: 100%; height: auto; } .header-search input[type="search"] { font-size: 14px; padding: 6px 10px; } .header-search i.mi.search { font-size: 18px; right: 10px; } } /* Responsividade para telas ainda menores (até 480px) */ @media (max-width: 480px) { .quick-search-instance { padding: 0 12px; } .header-search { padding: 4px 8px; width: 100%; justify-content: center; } .header-search input[type="search"] { font-size: 13px; padding: 4px 8px; width: 70%; /* Diminui o tamanho do campo de busca */ } .header-search i.mi.search { font-size: 20px; position: absolute; right: 8px; } }