MediaWiki:Common.css

Nota: Após publicar, você pode ter que limpar o "cache" do seu navegador para ver as alterações.

• Firefox / Safari: Pressione Shift enquanto clica Recarregar, ou pressione Ctrl-F5 ou Ctrl-R (⌘-R no Mac)
• Google Chrome: Pressione Ctrl-Shift-R (⌘-Shift-R no Mac)
• Internet Explorer/Edge: PressioneCtrl enquanto clica Recarregar, ou Pressione Ctrl-F5
• Opera: Pressione Ctrl-F5.

/* ====== X Angel – Estilos da home ====== */
.xa-home { max-width: 1100px; margin: 0 auto 40px; padding: 0 10px; }

/* Faixa vermelha com gradiente */
.xa-ribbon {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(90deg, #a00 0%, #d22 40%, #a00 100%);
  color: #fff; font-weight: 700;
  border-radius: 12px; padding: 12px 18px; margin: 18px 0 26px;
}
.xa-ribbon .xa-ribbon-icon { width: 28px; height: 28px; image-rendering: pixelated; }

/* Grade dos cards */
.xa-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 40px;
  justify-items: start;
}

/* Card (sem <a>) */
.xa-card {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 6px; min-width: 120px;
  transition: transform .12s ease-in-out, filter .12s ease-in-out;
}
.xa-card .xa-img { width: 110px; height: auto; image-rendering: pixelated; }
.xa-card .xa-title { color: #1a1a1a; font-weight: 700; text-align: center; display: block; }

/* “efeito hover” só visual, sem JS */
.xa-card:hover { transform: translateY(-3px); filter: brightness(1.05); }

/* Responsivo */
@media (max-width: 1050px) { .xa-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  { .xa-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .xa-grid { grid-template-columns: 1fr; justify-items:center; } }