MediaWiki:Citizen.css: Difference between revisions

Revision as of 14:13, 21 February 2026

/* =========================================
   MECHA HOMEPAGE — SAFE VERSION
   DOES NOT BREAK CITIZEN
   ========================================= */


/* HERO */

.mecha-home {

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

}

.mecha-hero {

text-align:center;
margin-bottom:30px;

}

.mecha-logo img {

width:140px;

}


/* BUTTON ROW */

.mecha-actions {

display:flex;
justify-content:center;
gap:14px;
flex-wrap:wrap;
margin-top:20px;

}

.mecha-action {

display:flex;
align-items:center;
gap:10px;

padding:10px 18px;

border-radius:12px;

background:var(--color-progressive);

color:white !important;

font-weight:600;

text-decoration:none;

}


/* ICONS — FIXED */

.mecha-action::before {

content:"";

width:18px;
height:18px;

background-size:contain;
background-repeat:no-repeat;

filter:brightness(0) invert(1);

}


/* individual */

.mecha-action--discord::before {

background-image:url("https://cdn.simpleicons.org/discord");

}

.mecha-action--matrix::before {

background-image:url("https://cdn.simpleicons.org/matrix");

}

.mecha-action--website::before {

background-image:url("https://cdn.simpleicons.org/firefoxbrowser");

}

.mecha-action--forums::before {

background-image:url("https://cdn.simpleicons.org/discourse");

}



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


.mecha-grid {

display:grid;

grid-template-columns:

1fr
1.4fr
1fr;

gap:20px;

margin-top:30px;

}


/* CARDS */

.mecha-card {

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

padding:20px;

border-radius:14px;

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

}


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


.mecha-ecosystem {

display:grid;

grid-template-columns:1fr 1fr;

gap:14px;

margin-top:10px;

}


.mecha-tile {

display:block;

padding:12px;

border-radius:10px;

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

text-decoration:none;

font-weight:600;

}


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


.mecha-stats {

display:grid;

grid-template-columns:1fr 1fr;

gap:10px;

margin-top:10px;

}


.mecha-stat {

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

padding:10px;

border-radius:10px;

}


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


@media(max-width:900px){

.mecha-grid{

grid-template-columns:1fr;

}

.mecha-ecosystem{

grid-template-columns:1fr;

}

}