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.

/* Layout wrapper */
.mechaGrid {
  width: 100%;
  border-spacing: 18px;
}

/* Columns */
.mechaCol {
  vertical-align: top;
  width: 25%;
}

/* Center column wider */
.mechaColCenter {
  width: 50%;
}

/* Headings spacing */
.mechaCol h2 {
  margin-top: 0;
}

/* Card-like surfaces using Citizen variables (dark mode safe) */
.mechaCol,
.mechaTile,
.mechaStackItem,
.mechaStats {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 16px;
}

/* Column padding */
.mechaCol {
  padding: 18px;
}

/* Tiles grid */
.mechaTiles {
  width: 100%;
  border-spacing: 14px;
}

.mechaTile {
  padding: 18px;
  line-height: 1.35;
}

.mechaTile b,
.mechaTile strong {
  font-size: 1.05em;
}

/* Right column stacked buttons/cards */
.mechaStack {
  width: 100%;
  border-spacing: 10px;
  margin-bottom: 14px;
}

.mechaStackItem {
  padding: 12px 14px;
  font-weight: 600;
}

/* Stats table */
.mechaStats {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

.mechaStats td {
  padding: 10px 12px;
  border-top: 1px solid var(--color-border-subtle);
}

.mechaStats tr:first-child td {
  border-top: 0;
}

/* Responsive: stack columns on mobile */
@media (max-width: 900px) {
  .mechaGrid, .mechaGrid > tbody, .mechaGrid > tbody > tr, .mechaGrid > tbody > tr > td {
    display: block;
    width: 100% !important;
  }
  .mechaGrid {
    border-spacing: 0;
  }
  .mechaCol {
    margin-bottom: 16px;
  }
}