Widget:Gurren

<style> .wiki-social-wrapper .social-cards { display: grid; grid-template-columns: 1fr; gap: 0.25em; }

@media screen and (max-width: 1024px) { .wiki-social-wrapper .social-cards { grid-template-columns: repeat(2, 1fr); gap: 0.5em; } }

.wiki-social-wrapper .social-card { position: relative; height: 4em; border-radius: 0.75em; overflow: hidden; cursor: pointer; background-size: cover; background-position: center; transition: filter 0.3s ease, box-shadow 0.3s ease; margin: 0; }

.wiki-social-wrapper .social-card::before { content: ""; position: absolute; inset: 0; background-color: var(--overlay-color); opacity: 0.3; /* overlay suave */ pointer-events: none; transition: opacity 0.3s ease; }

.wiki-social-wrapper .social-card:hover { filter: brightness(1.05); /* leve brilho */ }

.wiki-social-wrapper .social-card:hover::before { opacity: 0.5; /* overlay um pouco mais forte */ }

.wiki-social-wrapper .social-card-content { position: relative; display: flex; align-items: center; padding: 0 1em; height: 100%; color: #fff; }

.wiki-social-wrapper .social-icon { width: 2em; height: 2em; margin-right: 0.75em; flex-shrink: 0; }

.wiki-social-wrapper .social-name { font-size: 1.25em; line-height: 1; font-weight: bold; }

/* cada rede define sua cor de overlay forte aqui */ .wiki-social-wrapper .social-card.discord { background-image: url('https://i.imgur.com/3ON2kVj.gif'); --overlay-color: rgba(114, 137, 218, 1); }

.wiki-social-wrapper .social-card.tiktok { background-image: url('https://i.imgur.com/oY0Z4PMC.jpg'); --overlay-color: rgba(0, 0, 0, 1); }

.wiki-social-wrapper .social-card.instagram { background-image: url('https://i.imgur.com/ZXQ7wq3.jpg'); --overlay-color: rgba(193, 53, 132, 1); }

.wiki-social-wrapper .social-card.facebook { background-image: url('https://i.imgur.com/9bGkq7Y.jpg'); --overlay-color: rgba(24, 119, 242, 1); } </style>

<a href="https://discord.gg/SEULINK" class="social-card discord" target="_blank" rel="noopener">

<img src="https://cdn.simpleicons.org/Discord/ffffff" alt="Discord" class="social-icon" /> Discord

</a> <a href="https://tiktok.com/@SEUTIKTOK" class="social-card tiktok" target="_blank" rel="noopener">

<img src="https://cdn.simpleicons.org/TikTok/ffffff" alt="TikTok" class="social-icon" /> TikTok

</a> <a href="https://instagram.com/SEUINS" class="social-card instagram" target="_blank" rel="noopener">

<img src="https://cdn.simpleicons.org/Instagram/ffffff" alt="Instagram" class="social-icon" /> Instagram

</a> <a href="https://facebook.com/SEUPAGE" class="social-card facebook" target="_blank" rel="noopener">

<img src="https://cdn.simpleicons.org/Facebook/ffffff" alt="Facebook" class="social-icon" /> Facebook

</a>