MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* CSS placed here will be applied to all skins */
/* Layout helpers */
.hp-section { margin: 24px 0; }
.hp-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.hp-col { min-width: 0; }

/* Hero */
.hp-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; align-items: center; }
.hp-hero__deck { opacity: 0.9; }
.hp-hero__img img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }

/* Universes grid */
.ug-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.ug-card { display:block; border:1px solid var(--border-color,#e5e5e5); border-radius:8px; overflow:hidden; background:#fff; }
.ug-card__img img{ width:100%; height:160px; object-fit:cover; display:block; }
.ug-card__body { padding:10px 12px; }
.ug-card__title { font-weight:600; }
.ug-card__tag { font-size:12px; opacity:.8; }

/* List sections */
.hp-list ul { margin: 0; }

/* Badges */
.badges-row { display:flex; flex-wrap:wrap; gap:12px; }
.badge-link { display:inline-block; padding:10px 14px; border:1px solid var(--border-color,#ddd); border-radius:22px; font-weight:600; background:#f8f8f8; }

/* Cards Row */
.cards-row { display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.card-sm { border:1px solid var(--border-color,#e5e5e5); border-radius:8px; overflow:hidden; background:#fff; }
.card-sm__img img { width:100%; height:160px; object-fit:cover; display:block; }
.card-sm__title { padding:10px 12px; font-weight:600; }

/* Footer */
.hp-footer { margin-top: 36px; padding: 24px 0; border-top: 1px solid var(--border-color,#e5e5e5); display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hp-footer__col ul { margin: 6px 0 0 16px; }
.hp-footer__bottom { grid-column: 1 / -1; margin-top: 12px; font-size: 12px; opacity: .7; }

/* Responsive */
@media (max-width: 1200px){
  .ug-grid { grid-template-columns: repeat(4, 1fr); }
  .hp-hero { grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .ug-grid { grid-template-columns: repeat(2, 1fr); }
  .cards-row { grid-template-columns: 1fr; }
  .hp-two-col { grid-template-columns: 1fr; }
  .hp-footer { grid-template-columns: 1fr 1fr; }
}