/* =========================
EVERLIGHT TOP LINKS - TEMA BRANCO MEDIAWIKI ========================= */
/* Container principal - Fundo branco */ .everlight-top-links-white {
display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 5px; padding: 20px; background: #ffffff; border-radius: 12px; margin: 20px auto; max-width: 1200px; border: 1px solid #e0e0e0; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); position: relative; overflow: hidden;
}
/* Linha decorativa no topo */ .everlight-top-links-white::before {
content: ; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #8B5CF6 0%, #3B82F6 25%, #10B981 50%, #F59E0B 75%, #EC4899 100%); border-radius: 12px 12px 0 0;
}
/* Links individuais - Estilo limpo */ .wiki-top-link {
display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; color: #374151; text-decoration: none; font-weight: 600; font-size: 14px; letter-spacing: 0; position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; background: #f9fafb; border: 1px solid #e5e7eb; min-width: 110px; justify-content: center; overflow: hidden; z-index: 1;
}
/* Efeito do Botão 2 adaptado - bordas que crescem */ .wiki-top-link::before, .wiki-top-link::after {
content: ; position: absolute; left: 50%; transform: translateX(-50%); height: 2px; width: 0; background: linear-gradient(90deg, #8B5CF6, #3B82F6); transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 1px; z-index: 2;
}
.wiki-top-link::before {
top: -1px;
}
.wiki-top-link::after {
bottom: -1px;
}
/* Hover effect - Ativa o efeito do Botão 2 */ .wiki-top-link:hover {
letter-spacing: 1px; background: white; border-color: #8B5CF6; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(139, 92, 246, 0.15); color: #1f2937;
}
.wiki-top-link:hover::before, .wiki-top-link:hover::after {
width: 85%;
}
/* Efeito de brilho interno no hover */ .wiki-top-link:hover::before {
box-shadow: 0 0 10px rgba(139, 92, 246, 0.4);
}
.wiki-top-link:hover::after {
box-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
}
/* Cores específicas para cada link no hover */ .wiki-top-link:nth-child(1):hover { border-color: #3B82F6; } /* Site Oficial - Azul */ .wiki-top-link:nth-child(3):hover { border-color: #10B981; } /* Informações - Verde */ .wiki-top-link:nth-child(5):hover { border-color: #F59E0B; } /* Registro - Amarelo */ .wiki-top-link:nth-child(7):hover { border-color: #EF4444; } /* Download - Vermelho */ .wiki-top-link:nth-child(9):hover { border-color: #8B5CF6; } /* Mercado - Roxo */ .wiki-top-link:nth-child(11):hover { border-color: #06B6D4; } /* Discord - Ciano */ .wiki-top-link:nth-child(13):hover { border-color: #EC4899; } /* Atualizações - Rosa */
/* Ícones */ .wiki-link-icon {
font-size: 16px; transition: all 0.3s ease; display: inline-block;
}
.wiki-top-link:hover .wiki-link-icon {
transform: scale(1.15); animation: iconBounce 0.5s ease;
}
@keyframes iconBounce {
0%, 100% { transform: scale(1.15); }
50% { transform: scale(1.3); }
}
/* Texto */ .wiki-link-text {
position: relative; z-index: 1; transition: color 0.3s ease;
}
.wiki-top-link:hover .wiki-link-text {
background: linear-gradient(90deg, #8B5CF6, #3B82F6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
/* Separadores */ .wiki-link-separator {
color: #d1d5db; font-size: 16px; font-weight: 300; margin: 0 5px; transition: all 0.3s ease; padding: 0 2px;
}
.wiki-top-link:hover + .wiki-link-separator, .wiki-link-separator:hover {
color: #8B5CF6; transform: scale(1.2); font-weight: bold;
}
/* Estado ativo (página atual) */ .wiki-top-link.active {
background: linear-gradient(135deg, #8B5CF6, #3B82F6); color: white; letter-spacing: 1px; box-shadow: 0 5px 20px rgba(139, 92, 246, 0.25); border-color: #8B5CF6;
}
.wiki-top-link.active .wiki-link-text {
color: white; -webkit-text-fill-color: white; background: none;
}
.wiki-top-link.active::before, .wiki-top-link.active::after {
width: 85%; background: white;
}
/* Efeito de onda ao clicar */ .wiki-top-link:active {
transform: translateY(-1px); transition: transform 0.1s;
}
/* Responsividade */ @media (max-width: 1024px) {
.everlight-top-links-white {
padding: 15px;
gap: 3px;
}
.wiki-top-link {
padding: 8px 14px;
font-size: 13px;
min-width: 95px;
}
}
@media (max-width: 768px) {
.everlight-top-links-white {
flex-direction: column;
gap: 8px;
padding: 15px;
}
.wiki-top-link {
width: 100%;
max-width: 220px;
justify-content: center;
}
.wiki-link-separator {
display: none;
}
}
/* Animação de entrada */ @keyframes fadeInSlide {
from {
opacity: 0;
transform: translateY(15px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.wiki-top-link {
animation: fadeInSlide 0.5s ease-out forwards; animation-delay: calc(var(--link-index, 0) * 0.05s); opacity: 0;
}
/* Badge para links externos */ .wiki-top-link[href^="http"]::after {
content: '↗'; font-size: 10px; margin-left: 4px; opacity: 0.6; transition: opacity 0.3s;
}
.wiki-top-link[href^="http"]:hover::after {
opacity: 1;
}
/* Contador visual */ .everlight-top-links-white::after {
content: '7 links disponíveis'; position: absolute; bottom: 8px; right: 12px; font-size: 11px; color: #9ca3af; font-weight: 500;
}
/* Efeito de brilho sutil no container */ .everlight-top-links-white:hover {
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
}
GUIAS
<input type="text" class="search-input" placeholder="🔍 Buscar guia específico..."> <button class="search-clear" title="Limpar busca">✕</button>
30 guias disponíveis
<a href="/wiki/Guia_de_UP" class="guide-link">Guia de UP</a> 🔥
<a href="/wiki/Comércio" class="guide-link">Comércio</a>
<a href="/wiki/Loja_de_Presença" class="guide-link">Loja de Presença</a>
<a href="/wiki/Encantamentos" class="guide-link">Encantamentos</a>
<a href="/wiki/Pontos_de_Voto" class="guide-link">Pontos de Voto</a>
<a href="/wiki/Sistema_VIP" class="guide-link">Sistema VIP</a> 🔥
<a href="/wiki/Pontos_MVP" class="guide-link">Pontos MVP</a>
<a href="/wiki/Eventos_Automáticos" class="guide-link">Eventos Automáticos</a>
<a href="/wiki/Instâncias" class="guide-link">Instâncias</a>
<a href="/wiki/Grupo_do_Éden" class="guide-link">Grupo do Éden</a>
<a href="/wiki/Random_Options" class="guide-link">Random Options</a>
<a href="/wiki/Monstros_Infernais" class="guide-link">Monstros Infernais</a>
<a href="/wiki/Comandos" class="guide-link">Comandos</a> 🔄
<a href="/wiki/Sistema_de_PET" class="guide-link">Sistema de PET</a>
<a href="/wiki/Passe_de_Batalha" class="guide-link">Passe de Batalha</a>
<a href="/wiki/Instâncias" class="guide-link">Instâncias</a>
<a href="/wiki/Maré_Infernal" class="guide-link">Maré Infernal</a> 🔥
<a href="/wiki/MVPs" class="guide-link">MVPs</a>
<a href="/wiki/Progressão_de_Dano" class="guide-link">Progressão de Dano</a>
<a href="/wiki/Refinamento_e_Grade" class="guide-link">Refinamento e Grade</a>
<a href="/wiki/Roleta_da_Sorte" class="guide-link">Roleta da Sorte</a>
<a href="/wiki/Sistema_RMT" class="guide-link">Sistema RMT</a>
<a href="/wiki/Sistema_VIP" class="guide-link">Sistema VIP</a>
<a href="/wiki/Renascimento" class="guide-link">Renascimento</a>
<a href="/wiki/Trait_Status" class="guide-link">Trait Status</a>
<a href="/wiki/Bençao_de_Lilith" class="guide-link">Bençao de Lilith</a>
<a href="/wiki/Chefenia" class="guide-link">Chefenia</a>
<a href="/wiki/Colecionador" class="guide-link">Colecionador</a>
<a href="/wiki/Guia_de_UP" class="guide-link">Guia de UP</a>
<a href="/wiki/Horda" class="guide-link">Horda</a>
<button class="control-btn" id="shuffleGuides" title="Embaralhar ordem"> Embaralhar </button> <button class="control-btn" id="expandAll" title="Expandir todos"> Expandir Tudo </button> <button class="control-btn" id="collapseAll" title="Recolher todos"> Recolher Tudo </button> <button class="control-btn" id="showPopular" title="Mostrar populares"> Populares </button> <button class="control-btn" id="toggleIcons" title="Mostrar/ocultar ícones"> Ícones </button>
<button class="page-btn prev-btn" disabled> ← Anterior </button>
<button class="page-number active">1</button> <button class="page-number">2</button> <button class="page-number">3</button>
<button class="page-btn next-btn"> Próxima → </button>
