MediaWiki:Common.css: Difference between revisions

Revision as of 20:46, 29 September 2026

/* =========================================================
   Virginia.wiki — Homepage
   ========================================================= */

.vw-home {
	--vw-navy: #0b2f4f;
	--vw-blue: #3e718f;
	--vw-green: #56725d;
	--vw-sky: #dceaf2;
	--vw-cream: #f6f2e7;
	--vw-text: #172535;

	max-width: 1380px;
	margin: 0 auto;
	color: var(--vw-text);
}


/* =========================================================
   MAIN PAGE CLEANUP
   ========================================================= */

/* Hide ordinary article title on Main Page */
body.page-Main_Page .mw-first-heading,
body.page-Main_Page #firstHeading {
	display: none;
}


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

.vw-hero {
	position: relative;
	overflow: hidden;
	min-height: 430px;
	display: flex;
	align-items: center;
	padding: clamp(3rem, 7vw, 6.5rem);
	margin: 0 0 4.5rem;
	border-radius: 30px;
	color: #fff;

	background:
		radial-gradient(
			circle at 82% 18%,
			rgba(255,214,132,.55),
			transparent 18%
		),
		linear-gradient(
			135deg,
			#092943 0%,
			#356d8b 58%,
			#657d64 100%
		);

	box-shadow: 0 22px 60px rgba(11,47,79,.20);
}


/* Decorative Blue Ridge mountain layer */

.vw-hero::before {
	content: "";
	position: absolute;
	left: -5%;
	right: -5%;
	bottom: -2%;
	height: 42%;

	background: rgba(17,57,78,.48);

	clip-path: polygon(
		0 70%,
		10% 48%,
		20% 60%,
		32% 28%,
		43% 62%,
		55% 38%,
		66% 61%,
		77% 35%,
		89% 58%,
		100% 37%,
		100% 100%,
		0 100%
	);
}


/* Decorative foreground mountain layer */

.vw-hero::after {
	content: "";
	position: absolute;
	left: -5%;
	right: -5%;
	bottom: -8%;
	height: 33%;

	background: rgba(24,75,78,.48);

	clip-path: polygon(
		0 60%,
		14% 37%,
		28% 67%,
		44% 29%,
		58% 57%,
		73% 31%,
		87% 59%,
		100% 42%,
		100% 100%,
		0 100%
	);
}


.vw-hero-inner {
	position: relative;
	z-index: 2;
	max-width: 850px;
}


.vw-eyebrow {
	margin-bottom: .9rem;

	font-size: .83rem;
	font-weight: 800;
	letter-spacing: .19em;

	text-transform: uppercase;
	opacity: .92;
}


.vw-hero-title {
	margin: 0;

	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(3.7rem, 8vw, 7rem);
	font-weight: 700;

	line-height: .94;
	letter-spacing: -.045em;

	color: #fff;
}


.vw-hero-subtitle {
	max-width: 780px;
	margin-top: 1.55rem;

	font-size: clamp(1.05rem, 2vw, 1.35rem);
	line-height: 1.6;

	color: rgba(255,255,255,.95);
}


/* =========================================================
   HOMEPAGE SECTIONS
   ========================================================= */

.vw-home-section {
	margin: 4.75rem 0;
}


.vw-home-section > h2 {
	margin: 0 0 1.9rem;
	padding: 0;

	border: 0;

	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(2.1rem, 4vw, 3.15rem);

	line-height: 1.08;

	color: var(--vw-navy);
}


/* =========================================================
   DISCOVER VIRGINIA CARDS
   ========================================================= */

.vw-card-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.2rem;
}


.vw-card {
	min-height: 180px;
	padding: 1.7rem;

	border: 1px solid rgba(11,47,79,.10);
	border-radius: 22px;

	background: rgba(255,255,255,.82);

	box-shadow:
		0 8px 28px rgba(11,47,79,.07);

	transition:
		transform .18s ease,
		box-shadow .18s ease,
		border-color .18s ease;
}


.vw-card:hover {
	transform: translateY(-5px);

	border-color: rgba(11,47,79,.20);

	box-shadow:
		0 16px 35px rgba(11,47,79,.13);
}


.vw-card h3 {
	margin: 0 0 .9rem;

	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.6rem;

	color: var(--vw-navy);
}


/* =========================================================
   POPULAR DESTINATIONS
   ========================================================= */

.vw-link-grid ul {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));

	gap: .9rem;

	margin: 0;
	padding: 0;

	list-style: none;
}


.vw-link-grid li {
	margin: 0;
}


.vw-link-grid a {
	display: block;

	padding: 1.1rem 1.2rem;

	border: 1px solid rgba(11,47,79,.11);
	border-radius: 15px;

	background: rgba(255,255,255,.82);

	color: var(--vw-navy);

	font-weight: 700;
	text-decoration: none;

	box-shadow:
		0 4px 14px rgba(11,47,79,.04);

	transition:
		transform .18s ease,
		background .18s ease,
		box-shadow .18s ease;
}


/* Don't show uncreated homepage links in bright red */

.vw-link-grid a.new {
	color: var(--vw-navy);
}


.vw-link-grid a:hover {
	transform: translateY(-3px);

	background: #fff;

	box-shadow:
		0 9px 20px rgba(11,47,79,.09);

	text-decoration: none;
}


/* =========================================================
   LOWER FEATURE CARDS
   ========================================================= */

.vw-feature-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));

	gap: 1.25rem;
}


.vw-feature {
	min-height: 185px;
	padding: 1.9rem;

	border: 1px solid rgba(11,47,79,.08);
	border-radius: 23px;

	background:
		linear-gradient(
			145deg,
			rgba(220,234,242,.92),
			rgba(246,242,231,.92)
		);
}


.vw-feature h3 {
	margin: 0 0 .85rem;

	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.6rem;

	color: var(--vw-navy);
}


/* =========================================================
   START EXPLORING / BOTTOM PANEL
   ========================================================= */

.vw-home-bottom {
	padding: 2.5rem 2.7rem;

	border-radius: 26px;

	background:
		linear-gradient(
			135deg,
			#092943,
			#174a69
		);

	color: #fff !important;

	box-shadow:
		0 16px 38px rgba(11,47,79,.16);
}


/* Citizen may otherwise override heading colors */

.vw-home-bottom h2,
.vw-home-bottom h3,
.vw-home-bottom p,
.vw-home-bottom div,
.vw-home-bottom span {
	color: #fff !important;
}


.vw-home-bottom a {
	color: #fff !important;
}


.vw-home-bottom a:hover {
	color: #fff !important;
}


/* =========================================================
   GENERAL HOMEPAGE TYPOGRAPHY
   ========================================================= */

.vw-home p {
	line-height: 1.65;
}


.vw-card,
.vw-feature {
	line-height: 1.6;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

	.vw-card-grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

	.vw-link-grid ul {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

}


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

@media (max-width: 700px) {

	.vw-hero {
		min-height: 330px;

		padding: 3rem 1.6rem;
		margin-bottom: 3.2rem;

		border-radius: 22px;
	}


	.vw-hero-title {
		font-size:
			clamp(3.2rem, 15vw, 5rem);
	}


	.vw-card-grid,
	.vw-feature-grid {
		grid-template-columns: 1fr;
	}


	.vw-home-section {
		margin: 3.5rem 0;
	}


	.vw-home-bottom {
		padding: 1.8rem;
	}

}


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

@media (max-width: 460px) {

	.vw-link-grid ul {
		grid-template-columns: 1fr;
	}

}
/* Force Start Exploring heading to white */
body.page-Main_Page .vw-home-bottom .mw-heading,
body.page-Main_Page .vw-home-bottom .mw-heading h2,
body.page-Main_Page .vw-home-bottom h2 {
	color: #ffffff !important;
}
/* Virginia.wiki bottom callout */

.vw-bottom-title {
	color: #ffffff !important;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 1.25rem;
}

.vw-bottom-text {
	color: #ffffff !important;
	font-size: 1.05rem;
	line-height: 1.65;
}
/* =========================================================
   Virginia.wiki — Hero Search
   ========================================================= */

.vw-search {
	margin-top: 2.2rem;
	max-width: 700px;
}

.vw-search .mw-inputbox-centered {
	text-align: left !important;
}

.vw-search form {
	display: flex;
	align-items: stretch;
	gap: .7rem;
	width: 100%;
}

.vw-search input[type="text"] {
	flex: 1;
	min-width: 0;
	height: 58px;
	padding: 0 1.25rem;

	border: 1px solid rgba(255,255,255,.45);
	border-radius: 14px;

	background: rgba(255,255,255,.96);
	color: #172535;

	font-size: 1.05rem;

	box-shadow:
		0 9px 25px rgba(0,0,0,.13);
}

.vw-search input[type="text"]:focus {
	outline: 3px solid rgba(255,255,255,.25);
	border-color: #ffffff;
}

.vw-search input[type="submit"],
.vw-search button {
	min-height: 58px;
	padding: 0 1.7rem;

	border: 0 !important;
	border-radius: 14px !important;

	background: #ffffff !important;
	color: #0b2f4f !important;

	font-size: 1rem;
	font-weight: 800;

	cursor: pointer;

	box-shadow:
		0 9px 25px rgba(0,0,0,.13);
}

.vw-search input[type="submit"]:hover,
.vw-search button:hover {
	background: #f6f2e7 !important;
}

@media (max-width: 700px) {

	.vw-search form {
		flex-direction: column;
	}

	.vw-search input[type="text"],
	.vw-search input[type="submit"],
	.vw-search button {
		width: 100% !important;
		box-sizing: border-box;
	}
}
/* =========================================================
   Virginia.wiki — Photographic Discovery Cards
   ========================================================= */

.vw-photo-card-grid {
	align-items: stretch;
}

.vw-photo-card {
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: 390px;
	background: #fff;
}

.vw-photo-card:hover {
	transform: translateY(-6px);
}

.vw-card-image {
	height: 195px;
	overflow: hidden;
	background: #dceaf2;
}

/* Remove MediaWiki image spacing/wrappers */
.vw-card-image .mw-file-element,
.vw-card-image img {
	display: block;
	width: 100% !important;
	height: 195px !important;
	max-width: none !important;
	object-fit: cover;
	object-position: center;
	margin: 0 !important;
}

.vw-card-image a {
	display: block;
	height: 100%;
}

.vw-card-content {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.45rem 1.55rem 1.55rem;
}

.vw-card-content h3 {
	margin: 0 0 .7rem;
}

.vw-card-content h3 a,
.vw-card-content h3 a.new {
	color: var(--vw-navy) !important;
	text-decoration: none;
}

.vw-card-content h3 a:hover {
	text-decoration: underline;
}

.vw-card-link {
	margin-top: auto;
	padding-top: 1.15rem;
	font-size: .92rem;
	font-weight: 800;
}

.vw-card-link a,
.vw-card-link a.new {
	color: var(--vw-blue) !important;
	text-decoration: none;
}

.vw-card-link a:hover {
	text-decoration: underline;
}


/* Tablet */

@media (max-width: 1000px) {

	.vw-photo-card {
		min-height: 380px;
	}

}


/* Mobile */

@media (max-width: 700px) {

	.vw-card-image,
	.vw-card-image .mw-file-element,
	.vw-card-image img {
		height: 230px !important;
	}

	.vw-photo-card {
		min-height: 0;
	}

}
/* =========================================================
   VIRGINIA.WIKI — HOMEPAGE GRID / IMAGE FIXES
   ========================================================= */


/* ---------------------------------------------------------
   MEDIAWIKI PARSER FIX

   MediaWiki can insert empty paragraph elements between
   raw HTML blocks. Those paragraphs become CSS grid items.
   Hide them inside our homepage grids.
   --------------------------------------------------------- */

.vw-card-grid > p,
.vw-photo-card-grid > p,
.vw-feature-grid > p {
	display: none !important;
}


/* Make sure actual cards occupy the grid normally */

.vw-card-grid > .vw-card,
.vw-photo-card-grid > .vw-card,
.vw-feature-grid > .vw-feature {
	min-width: 0;
	width: auto;
}


/* ---------------------------------------------------------
   DISCOVER VIRGINIA PHOTO CARDS
   --------------------------------------------------------- */

.vw-photo-card-grid {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 1.2rem !important;
	align-items: stretch;
}


.vw-photo-card {
	display: flex;
	flex-direction: column;

	min-width: 0;
	min-height: 400px;

	padding: 0 !important;
	overflow: hidden;

	border-radius: 22px;
	background: #ffffff;
}


/* Photograph container */

.vw-card-image {
	display: block;
	width: 100%;
	height: 200px;

	margin: 0;
	padding: 0;

	overflow: hidden;

	background: #dceaf2;
	line-height: 0;
}


/*
   MediaWiki 1.46 places images inside wrapper spans and links.
   Force every wrapper to stay inside the card.
*/

.vw-card-image > span,
.vw-card-image .mw-default-size,
.vw-card-image a {
	display: block !important;

	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;

	margin: 0 !important;
	padding: 0 !important;
}


/* Actual photograph */

.vw-card-image img,
.vw-card-image .mw-file-element {
	display: block !important;

	width: 100% !important;
	max-width: 100% !important;

	height: 200px !important;

	margin: 0 !important;
	padding: 0 !important;

	object-fit: cover !important;
	object-position: center !important;
}


/* Text portion */

.vw-card-content {
	display: flex;
	flex-direction: column;
	flex: 1;

	min-width: 0;

	padding: 1.45rem 1.55rem 1.55rem;
}


.vw-card-content h3 {
	margin: 0 0 .75rem;

	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.6rem;

	color: var(--vw-navy);
}


.vw-card-link {
	margin-top: auto;
	padding-top: 1.2rem;

	font-size: .93rem;
	font-weight: 800;
}


/* ---------------------------------------------------------
   REMOVE RED "PAGE DOESN'T EXIST YET" LINKS FROM HOMEPAGE
   --------------------------------------------------------- */

body.page-Main_Page .vw-home a.new {
	color: var(--vw-navy) !important;
	text-decoration: none !important;
}


body.page-Main_Page .vw-card-link a.new {
	color: var(--vw-blue) !important;
}


body.page-Main_Page .vw-home a.new:hover {
	text-decoration: underline !important;
}


/* ---------------------------------------------------------
   EXPLORE VIRGINIA GRID
   --------------------------------------------------------- */

.vw-feature-grid {
	display: grid !important;

	grid-template-columns:
		repeat(3, minmax(0, 1fr)) !important;

	gap: 1.25rem !important;

	align-items: stretch;
}


.vw-feature {
	width: auto !important;
	min-width: 0;

	margin: 0 !important;

	padding: 1.9rem;

	border: 1px solid rgba(11,47,79,.08);
	border-radius: 23px;

	background:
		linear-gradient(
			145deg,
			rgba(220,234,242,.92),
			rgba(246,242,231,.92)
		);
}


.vw-feature h3 {
	margin: 0 0 .85rem;

	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.6rem;

	color: var(--vw-navy);
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1000px) {

	.vw-photo-card-grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr)) !important;
	}

	.vw-feature-grid {
		grid-template-columns:
			repeat(3, minmax(0, 1fr)) !important;
	}

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 700px) {

	.vw-photo-card-grid,
	.vw-feature-grid {
		grid-template-columns: 1fr !important;
	}

	.vw-card-image,
	.vw-card-image img,
	.vw-card-image .mw-file-element {
		height: 230px !important;
	}

	.vw-photo-card {
		min-height: 0;
	}

}