MediaWiki:Citizen.css: Difference between revisions

Revision as of 13:54, 21 February 2026

/* =========================
   MECHA COMET WIKI THEME
   Citizen Theme Extension
   ========================= */


/* MAIN PAGE WIDTH */

.mecha-home {

max-width: 1100px;
margin: auto;
padding: 20px;

}


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

.mecha-hero {

text-align: center;

margin-top: 50px;
margin-bottom: 35px;

}

.mecha-logo {

width: 140px;

margin-bottom: 16px;

transition: transform 0.15s ease;

}

.mecha-logo:hover {

transform: scale(1.05);

}

.mecha-hero h1 {

font-size: 34px;

font-weight: 700;

letter-spacing: -0.02em;

margin-bottom: 6px;

}

.mecha-hero p {

font-size: 17px;

color: var(--color-base-subtle);

margin-top: 0;

}



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

.mecha-layout {

width: 100%;

border-spacing: 20px;

margin-top: 30px;

}



/* =========================
   COLUMNS
   ========================= */

.mecha-col {

width: 25%;

vertical-align: top;

}

.mecha-col-wide {

width: 50%;

vertical-align: top;

}



/* =========================
   CARDS
   ========================= */

.mecha-card {

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

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

border-radius: 16px;

padding: 20px;

transition: all 0.15s ease;

}

/* hover animation */

.mecha-card:hover {

transform: translateY(-3px);

box-shadow: 0 10px 28px rgba(0,0,0,0.10);

}



/* headings */

.mecha-card h2 {

margin-top: 0;

margin-bottom: 12px;

font-size: 20px;

}



/* lists */

.mecha-card ul {

margin: 0;

padding-left: 18px;

line-height: 1.8;

}



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

.mecha-grid {

width: 100%;

border-spacing: 14px;

margin-top: 10px;

}

.mecha-grid td {

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

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

border-radius: 12px;

padding: 16px;

font-weight: 600;

transition: all 0.12s ease;

}



/* clickable hover */

.mecha-grid td:hover {

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

border-color: var(--color-progressive);

transform: translateY(-2px);

cursor: pointer;

}



/* links inside */

.mecha-grid a {

text-decoration: none;

display: block;

}



/* =========================
   DEVELOPER LINKS
   ========================= */

.mecha-card a {

text-decoration: none;

font-weight: 500;

}

.mecha-card a:hover {

text-decoration: underline;

}



/* =========================
   STATS
   ========================= */

.mecha-stats li {

list-style: none;

padding: 4px 0;

}



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

@media (max-width: 1000px) {

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

display: block;

width: 100% !important;

}

.mecha-col,
.mecha-col-wide {

margin-bottom: 20px;

}

}



/* MOBILE HERO */

@media (max-width: 700px) {

.mecha-logo {

width: 110px;

}

.mecha-hero h1 {

font-size: 24px;

}

.mecha-hero p {

font-size: 15px;

}

.mecha-card {

padding: 16px;

}

}



/* =========================
   CLEANER LOOK
   ========================= */

/* remove ugly category spacing */

#catlinks {

margin-top: 40px;

}


/* nicer hr */

hr {

border: none;

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

margin: 30px 0;

}