MediaWiki:Citizen.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.

/* ======================
   FULL WIDTH FIX
   ====================== */

.mw-body {

max-width: 1400px !important;

margin: 0 auto;

}


/* remove extra top spacing */

.mecha-hero {

margin-top: 10px;
margin-bottom: 30px;

text-align: center;

}


/* ======================
   HERO LOGO
   ====================== */

.mecha-logo {

width: 140px;

margin-bottom: 10px;

}


/* ======================
   HERO BUTTONS
   ====================== */

.mecha-buttons {

margin-top: 20px;

}

.mecha-buttons a {

display: inline-flex;

align-items: center;

gap: 8px;

background: var(--color-progressive);

color: white !important;

padding: 10px 16px;

margin: 6px;

border-radius: 10px;

text-decoration: none;

font-weight: 500;

transition: 0.15s;

}

.mecha-buttons a:hover {

transform: translateY(-2px);

box-shadow: 0 4px 14px rgba(0,0,0,0.15);

}


/* ======================
   MAIN GRID
   ====================== */

.mecha-layout {

width: 100%;

border-spacing: 20px;

}


/* cards */

.mecha-card {

background: var(--color-surface-2);

border-radius: 16px;

padding: 20px;

border: 1px solid var(--color-border);

}


/* ======================
   ECOSYSTEM GRID
   ====================== */

.mecha-grid {

width: 100%;

border-spacing: 14px;

}

.mecha-grid td {

background: var(--color-surface-1);

border-radius: 12px;

padding: 16px;

transition: 0.15s;

}

.mecha-grid td:hover {

background: var(--color-progressive-subtle);

transform: translateY(-2px);

}


/* ecosystem icon */

.mecha-ecosystem-icon {

width: 22px;

margin-right: 8px;

vertical-align: middle;

}


/* ======================
   MOBILE
   ====================== */

@media (max-width: 900px) {

.mecha-layout,
.mecha-layout tbody,
.mecha-layout tr,
.mecha-layout td {

display: block;
width: 100%;

}

}

/* Buttons row */
.mecha-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap; /* wraps nicely on mobile */
  margin-top: 18px;
}

/* Make the spans look like buttons */
.mecha-btn a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-progressive);
  color: #fff !important;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none !important;
  font-weight: 600;
  line-height: 1;
}

.mecha-btn a:hover {
  transform: translateY(-1px);
}

/* Icon sizing (external image) */
.mecha-btn img {
  width: 18px;
  height: 18px;
  display: inline-block;
}