MediaWiki:Citizen.css: Difference between revisions

Latest revision as of 07:33, 23 July 2026

/* ================================
   DMW Citizen Homepage Theme
   ================================ */

body.page-Main_Page {
	background:
		radial-gradient(circle at 50% 0%, rgba(0, 180, 255, 0.24), transparent 32rem),
		linear-gradient(180deg, #071b31 0%, #0a1424 38rem, #eef3f8 38rem);
}

/* Make main page wider */
body.page-Main_Page .citizen-page-container {
	max-width: 1280px;
}

/* Hide normal page title on Main Page */
body.page-Main_Page .mw-first-heading {
	display: none;
}

/* Main wrapper */
.dmw-home {
	max-width: 1180px;
	margin: 0 auto;
	padding: 1.5rem 1rem 3rem;
}

/* Hero */
.dmw-hero {
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(105, 220, 255, 0.35);
	border-radius: 16px;
	background:
		linear-gradient(90deg, rgba(3, 15, 32, 0.96), rgba(8, 44, 78, 0.86)),
		radial-gradient(circle at 80% 20%, rgba(48, 200, 255, 0.2), transparent 22rem);
	box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
	padding: 2rem;
	color: #eefaff;
	margin-bottom: 1rem;
}

.dmw-hero h1 {
	margin: 0 0 0.5rem;
	font-size: clamp(2rem, 4vw, 4rem);
	line-height: 1;
	color: #ffffff;
	text-shadow: 0 0 18px rgba(67, 205, 255, 0.35);
}

.dmw-hero p {
	max-width: 680px;
	margin: 0;
	font-size: 1.05rem;
	color: #bfefff;
}

/* Alert/notice panels */
.dmw-notice {
	border-radius: 10px;
	padding: 0.85rem 1rem;
	margin: 1rem 0;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(11, 35, 62, 0.9);
	color: #eaf8ff;
}

.dmw-notice-warning {
	background: rgba(255, 72, 72, 0.14);
	border-color: rgba(255, 96, 96, 0.55);
	color: #fff2f2;
}

.dmw-notice-info {
	background: rgba(0, 185, 255, 0.16);
	border-color: rgba(0, 200, 255, 0.65);
	color: #e5fbff;
}

/* Category buttons */
.dmw-category-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 1rem 0 1.25rem;
}

.dmw-category-card {
	display: block;
	min-height: 74px;
	border-radius: 12px;
	border: 1px solid rgba(115, 215, 255, 0.24);
	background:
		linear-gradient(135deg, rgba(3, 20, 38, 0.96), rgba(10, 48, 82, 0.78));
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
	padding: 1rem;
	color: #ffffff !important;
	font-weight: 800;
	text-decoration: none;
	text-shadow: 0 1px 2px rgba(0,0,0,0.7);
	transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}

.dmw-category-card:hover {
	transform: translateY(-2px);
	border-color: rgba(94, 225, 255, 0.7);
	background:
		linear-gradient(135deg, rgba(7, 40, 72, 1), rgba(15, 82, 130, 0.9));
	text-decoration: none;
}

/* Main content grid */
.dmw-home-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 1rem;
	align-items: start;
}

.dmw-card {
	border-radius: 14px;
	border: 1px solid rgba(70, 115, 150, 0.25);
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	margin-bottom: 1rem;
}

.dmw-card-dark {
	background: rgba(5, 19, 34, 0.94);
	color: #e8f8ff;
	border-color: rgba(95, 210, 255, 0.25);
}

.dmw-card-title {
	background:
		linear-gradient(90deg, #07111f, #153a58),
		repeating-linear-gradient(45deg, rgba(255,255,255,0.08) 0 12px, transparent 12px 24px);
	color: #ffffff;
	font-weight: 900;
	padding: 0.55rem 0.8rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dmw-card-body {
	padding: 1rem;
}

.dmw-card-body ul {
	margin-top: 0;
}

/* Two/three column link lists */
.dmw-link-columns {
	columns: 3 180px;
	column-gap: 2rem;
}

.dmw-link-columns li {
	break-inside: avoid;
	margin-bottom: 0.28rem;
}

/* Update list */
.dmw-update-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dmw-update-list li {
	padding: 0.55rem 0;
	border-bottom: 1px solid rgba(120, 160, 190, 0.22);
}

.dmw-update-list li:last-child {
	border-bottom: 0;
}

/* Discord/button links */
.dmw-button {
	display: block;
	text-align: center;
	border-radius: 10px;
	padding: 0.8rem 1rem;
	margin-bottom: 0.65rem;
	font-weight: 900;
	color: #ffffff !important;
	text-decoration: none;
	background: linear-gradient(90deg, #5865f2, #35a8ff);
}

.dmw-button:hover {
	text-decoration: none;
	filter: brightness(1.08);
}

/* Responsive */
@media (max-width: 960px) {
	.dmw-category-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dmw-home-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.dmw-category-grid {
		grid-template-columns: 1fr;
	}

	.dmw-hero {
		padding: 1.25rem;
	}
}