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.

/* TRUE Mecha-style cards for Citizen */
/* Dark mode safe */
/* No site background changes */

.mecha-card {

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

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

    border-radius: 20px;

    padding: 28px;

    margin: 18px 0;

    transition: all 0.18s cubic-bezier(.4,0,.2,1);

}


/* Hover like mecha.so */

.mecha-card:hover {

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

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

    transform: translateY(-3px);

}


/* Icon */

.mecha-card-icon img {

    width: 26px;

    margin-bottom: 14px;

}


/* Title */

.mecha-card-title {

    font-size: 20px;

    font-weight: 600;

    margin-bottom: 6px;

}


/* Description */

.mecha-card-desc {

    font-size: 15px;

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

}


/* GRID LAYOUT LIKE MECHA */

.mecha-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

    gap: 18px;

}