MediaWiki:Common.css: Difference between revisions

/* ==========================================================================
   Spacepedia — site styles (MediaWiki:Common.css)
   Lightweight home-page design for Vector 2022. No custom skin.
   ========================================================================== */

/* ---- Hero banner ---- */
.sp-hero {
	margin: 0 0 1.5em;
	padding: 2.4em 1.6em 2em;
	border-radius: 14px;
	background: radial-gradient( ellipse at 20% 15%, #22306b 0%, rgba(34,48,107,0) 60% ),
	            radial-gradient( ellipse at 85% 80%, #4b2a6b 0%, rgba(75,42,107,0) 55% ),
	            linear-gradient( 160deg, #0b1026 0%, #131a3a 55%, #1b1140 100% );
	color: #f4f6ff;
	text-align: center;
	box-shadow: 0 6px 24px rgba(8, 12, 34, 0.35);
	overflow: hidden;
}
.sp-hero h1,
.sp-hero .sp-hero-title {
	margin: 0 0 .25em;
	border: 0;
	font-size: 2.5em;
	font-weight: 700;
	color: #ffffff;
	letter-spacing: .5px;
}
.sp-hero .sp-tagline {
	margin: 0 auto 1.2em;
	max-width: 42em;
	font-size: 1.15em;
	line-height: 1.5;
	color: #c7d0f5;
}
.sp-hero a { color: #9ec5ff; }

/* ---- Search box in the hero ---- */
.sp-search { margin: 0 auto; max-width: 34em; }
.sp-search input[type="search"],
.sp-search input[type="text"] {
	width: 100%;
	padding: .6em .8em;
	border: 0;
	border-radius: 8px;
	font-size: 1.05em;
	box-sizing: border-box;
}
.sp-search input[type="submit"] {
	margin-top: .6em;
	padding: .55em 1.4em;
	border: 0;
	border-radius: 8px;
	background: #3860e4;
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}
.sp-search input[type="submit"]:hover { background: #2c4fc4; }

/* ---- Three action cards ---- */
.sp-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	margin: 1.5em 0;
}
.sp-card {
	flex: 1 1 260px;
	display: flex;
	flex-direction: column;
	padding: 1.2em 1.3em 1.4em;
	border: 1px solid #c8ccd1;
	border-radius: 12px;
	background: #fbfcff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
	transition: box-shadow .15s ease, transform .15s ease;
}
.sp-card:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .10); transform: translateY(-2px); }
.sp-card h2 {
	margin: 0 0 .4em;
	padding: 0;
	border: 0;
	font-size: 1.3em;
}
.sp-card .sp-card-icon { font-size: 1.9em; line-height: 1; margin-bottom: .2em; }
.sp-card p { margin: .2em 0 .8em; color: #4a4a52; }
.sp-card ul { margin: .2em 0 1em 1.2em; }
.sp-card .sp-btn { margin-top: auto; align-self: flex-start; }

/* ---- Buttons ---- */
.sp-btn {
	display: inline-block;
	padding: .5em 1.1em;
	border-radius: 8px;
	background: #3860e4;
	font-weight: 600;
}
/* Force the MediaWiki link inside the button to white (else blue-on-blue). */
.sp-btn,
.sp-btn a,
.sp-btn a:link,
.sp-btn a:visited { color: #fff !important; text-decoration: none; }
.sp-btn:hover { background: #2c4fc4; }
.sp-btn.sp-btn-alt { background: #206b4b; }
.sp-btn.sp-btn-alt:hover { background: #185639; }
/* hide the external-link arrow icon on buttons */
.sp-btn a.external { background-image: none; padding-right: 0; }

/* ---- Public-domain / policy callout ---- */
.sp-note {
	margin: 1.5em 0;
	padding: 1em 1.2em;
	border-left: 4px solid #3860e4;
	border-radius: 6px;
	background: #eef2ff;
	color: #2a2a33;
}
.sp-note strong { color: #1b2a6b; }

/* ---- Sister-site row ---- */
.sp-sisters { display: flex; flex-wrap: wrap; gap: .6em; margin: 1em 0; }
.sp-sisters a {
	flex: 1 1 140px;
	text-align: center;
	padding: .6em;
	border: 1px solid #c8ccd1;
	border-radius: 8px;
	background: #fff;
	text-decoration: none;
	font-weight: 600;
}
.sp-sisters a:hover { background: #f2f5ff; }

/* ---- Full-size logo at the foot of the home page (bottom-right) ---- */
.sp-footer-logo {
	width: 155px;
	height: 155px;
	margin: 1.5em 0 .5em auto;   /* auto-left pushes it to the right */
	background: url( /images/Spacepedia_Logo.png ) no-repeat center center;
	background-size: contain;
}

/* ---- Small screens ---- */
@media ( max-width: 720px ) {
	.sp-card { flex-basis: 100%; }
	.sp-hero h1, .sp-hero .sp-hero-title { font-size: 2em; }
}