MediaWiki:Citizen.css: Difference between revisions

Revision as of 03:11, 30 September 2026

/* =========================================================
   VIRGINIA.WIKI — MASTER STYLESHEET
   ========================================================= */


/* =========================================================
   SHARED VARIABLES
   ========================================================= */

.vw-home,
.vw-place,
.vw-attraction {
	--vw-navy: #0b2f4f;
	--vw-blue: #3e718f;
	--vw-green: #56725d;
	--vw-sky: #dceaf2;
	--vw-cream: #f6f2e7;
	--vw-text: #172535;
	--vw-muted: #5b6873;
	--vw-white: #ffffff;
	--vw-border: rgba(11, 47, 79, 0.13);
	--vw-shadow: 0 14px 34px rgba(19, 43, 60, 0.12);

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


/* =========================================================
   GENERAL CONTENT
   ========================================================= */

.vw-home *,
.vw-place *,
.vw-attraction * {
	box-sizing: border-box;
}

.vw-home img,
.vw-place img,
.vw-attraction img {
	max-width: 100%;
	height: auto;
}

.vw-place,
.vw-attraction {
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
}

.vw-place p,
.vw-attraction p {
	line-height: 1.72;
}

.vw-place li,
.vw-attraction li {
	line-height: 1.65;
}


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

body.page-Main_Page .mw-first-heading,
body.page-Main_Page #firstHeading {
	display: none !important;
}

.vw-home {
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
}


/* =========================================================
   ORIGINAL HOMEPAGE HERO
   ========================================================= */

.vw-home-hero {
	position: relative;
	overflow: hidden;
	min-height: 610px;
	padding: 105px 95px 120px;
	border-radius: 30px;

	background:
		radial-gradient(
			circle at 83% 20%,
			rgba(224, 214, 154, 0.42),
			transparent 24%
		),
		linear-gradient(
			120deg,
			#0b3552 0%,
			#245f7d 55%,
			#608478 100%
		);

	box-shadow: 0 24px 60px rgba(15, 44, 62, 0.19);
	color: #fff;
}

.vw-home-hero::before,
.vw-home-hero::after {
	content: "";
	position: absolute;
	left: -5%;
	right: -5%;
	bottom: -1px;
	pointer-events: none;
}

.vw-home-hero::before {
	height: 185px;
	background: #174965;

	clip-path: polygon(
		0 70%,
		10% 34%,
		20% 62%,
		31% 0,
		42% 72%,
		53% 33%,
		64% 74%,
		76% 10%,
		87% 67%,
		100% 24%,
		100% 100%,
		0 100%
	);

	opacity: 0.77;
}

.vw-home-hero::after {
	height: 115px;
	background: #174f59;

	clip-path: polygon(
		0 65%,
		12% 10%,
		24% 78%,
		39% 0,
		54% 70%,
		68% 15%,
		83% 72%,
		100% 25%,
		100% 100%,
		0 100%
	);

	opacity: 0.96;
}

.vw-home-hero-content {
	position: relative;
	z-index: 3;
	max-width: 880px;
}

.vw-home-kicker {
	margin-bottom: 20px;
	font-size: 0.9rem;
	font-weight: 800;
	letter-spacing: 0.17em;
	text-transform: uppercase;
}

.vw-home-title {
	margin: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(4.5rem, 9vw, 7.6rem);
	font-weight: 700;
	line-height: 0.86;
	letter-spacing: -0.045em;
	color: #fff;
}

.vw-home-subtitle {
	max-width: 870px;
	margin-top: 32px;
	font-size: clamp(1.25rem, 2vw, 1.65rem);
	line-height: 1.5;
	color: #fff;
}


/* =========================================================
   ORIGINAL HOMEPAGE SEARCH
   ========================================================= */

.vw-home-search {
	position: relative;
	z-index: 5;
	max-width: 760px;
	margin-top: 38px;
}

.vw-home-search form {
	display: flex;
	align-items: stretch;
	gap: 14px;
}

.vw-home-search input[type="text"],
.vw-home-search .mw-inputbox-input {
	flex: 1;
	min-width: 0;
	height: 52px;
	padding: 0 16px;

	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 5px;

	background: rgba(255, 255, 255, 0.94);

	font-size: 1.05rem;
	color: var(--vw-text);
}

.vw-home-search input[type="submit"],
.vw-home-search .mw-ui-button {
	min-width: 120px;
	height: 52px;
	padding: 0 24px;

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

	background: #fff !important;
	color: var(--vw-navy) !important;

	font-weight: 800 !important;
	box-shadow: none !important;
}


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

.vw-home-section {
	margin-top: 74px;
}

.vw-home-section-title {
	margin: 0 0 10px;

	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(2.2rem, 4vw, 3.3rem);
	line-height: 1.05;

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

.vw-home-section-intro {
	max-width: 850px;
	margin: 0 0 30px;

	font-size: 1.08rem;
	line-height: 1.65;

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


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

.vw-photo-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
}

.vw-photo-card {
	position: relative;
	min-height: 300px;
	overflow: hidden;

	border-radius: 22px;
	background: var(--vw-navy);
	box-shadow: var(--vw-shadow);
}

.vw-photo-card img {
	position: absolute;
	inset: 0;

	width: 100%;
	height: 100%;

	object-fit: cover;
}

.vw-photo-card::after {
	content: "";
	position: absolute;
	inset: 0;

	background: linear-gradient(
		180deg,
		rgba(5, 26, 43, 0.03) 15%,
		rgba(5, 26, 43, 0.78) 100%
	);
}

.vw-photo-card-content {
	position: absolute;
	z-index: 2;

	left: 24px;
	right: 24px;
	bottom: 22px;

	color: #fff;
}

.vw-photo-card h3 {
	margin: 0 0 5px;

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

	color: #fff;
}

.vw-photo-card p {
	margin: 0;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.9);
}


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

.vw-destination-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.vw-destination-card {
	position: relative;
	min-height: 420px;
	overflow: hidden;

	border-radius: 25px;
	background: var(--vw-navy);
	box-shadow: var(--vw-shadow);
}

.vw-destination-card img {
	position: absolute;
	inset: 0;

	width: 100%;
	height: 100%;

	object-fit: cover;
}

.vw-destination-card::after {
	content: "";
	position: absolute;
	inset: 0;

	background: linear-gradient(
		180deg,
		rgba(8, 34, 51, 0.03) 15%,
		rgba(8, 34, 51, 0.88) 100%
	);
}

.vw-destination-card-content {
	position: absolute;
	z-index: 3;

	left: 34px;
	right: 34px;
	bottom: 32px;
}

.vw-destination-card h3 {
	margin: 0 0 12px;

	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(2rem, 3vw, 3rem);
	line-height: 1;

	color: #fff;
}

.vw-destination-card p {
	max-width: 520px;
	margin: 0 0 18px;

	line-height: 1.55;
	color: rgba(255, 255, 255, 0.92);
}

.vw-destination-card a {
	display: inline-block;

	padding: 10px 17px;

	border: 1px solid rgba(255, 255, 255, 0.65);
	border-radius: 999px;

	color: #fff !important;
	background: rgba(255, 255, 255, 0.10);

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

	backdrop-filter: blur(5px);
}

.vw-destination-card a:hover {
	background: rgba(255, 255, 255, 0.20);
}


/* =========================================================
   SECONDARY DESTINATION LINKS
   ========================================================= */

.vw-destination-links {
	display: flex;
	flex-wrap: wrap;

	gap: 12px;
	margin-top: 22px;
}

.vw-destination-links a {
	display: inline-block;

	padding: 10px 16px;

	border: 1px solid var(--vw-border);
	border-radius: 999px;

	background: rgba(255, 255, 255, 0.72);

	color: var(--vw-navy) !important;
	font-weight: 700;
	text-decoration: none !important;
}

.vw-destination-links a:hover {
	background: #fff;
}


/* =========================================================
   ORIGINAL HOMEPAGE FEATURE CARDS
   ========================================================= */

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

.vw-feature-card {
	padding: 30px;

	border: 1px solid var(--vw-border);
	border-radius: 22px;

	background: rgba(255, 255, 255, 0.83);

	box-shadow: 0 10px 26px rgba(19, 43, 60, 0.07);
}

.vw-feature-card h3 {
	margin: 0 0 10px;

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

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

.vw-feature-card p {
	margin: 0 0 15px;

	line-height: 1.6;
	color: var(--vw-muted);
}

.vw-feature-card a {
	color: var(--vw-blue) !important;
	font-weight: 700;
}


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

.vw-start-panel {
	margin-top: 78px;
	padding: 54px;

	border-radius: 28px;

	background:
		linear-gradient(
			135deg,
			#0b2f4f 0%,
			#194b67 55%,
			#466b60 100%
		);

	color: #fff;

	box-shadow: var(--vw-shadow);
}

.vw-start-panel h2 {
	margin: 0 0 14px;

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

	color: #fff;
}

.vw-start-panel p {
	max-width: 850px;
	margin: 0;

	font-size: 1.08rem;
	line-height: 1.65;

	color: rgba(255, 255, 255, 0.9);
}


/* =========================================================
   PLACE PAGES — HIDE DEFAULT PAGE TITLES
   ========================================================= */

body.page-Williamsburg_Virginia .mw-first-heading,
body.page-Williamsburg_Virginia #firstHeading,

body.page-Jamestown_Virginia .mw-first-heading,
body.page-Jamestown_Virginia #firstHeading,

body.page-Yorktown_Virginia .mw-first-heading,
body.page-Yorktown_Virginia #firstHeading {
	display: none !important;
}


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

.vw-place-hero {
	position: relative;

	width: 100%;
	min-height: 560px;

	overflow: hidden;

	margin-bottom: 28px;

	border-radius: 28px;

	background: var(--vw-navy);

	box-shadow: var(--vw-shadow);
}

.vw-place-hero-image {
	position: absolute;
	inset: 0;
}

.vw-place-hero-image .mw-file-element,
.vw-place-hero-image img {
	width: 100% !important;
	height: 100% !important;

	object-fit: cover;
}

.vw-place-hero-image a {
	display: block;
	width: 100%;
	height: 100%;
}

.vw-place-hero::after {
	content: "";

	position: absolute;
	inset: 0;

	background:
		linear-gradient(
			180deg,
			rgba(6, 27, 44, 0.08) 0%,
			rgba(6, 27, 44, 0.25) 35%,
			rgba(6, 27, 44, 0.88) 100%
		);
}

.vw-place-hero-overlay {
	position: absolute;
	z-index: 3;

	left: 6%;
	right: 6%;
	bottom: 8%;

	color: #fff;
}

.vw-place-kicker {
	margin-bottom: 12px;

	font-size: 0.83rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;

	color: rgba(255, 255, 255, 0.92);
}

.vw-place-title {
	max-width: 1050px;

	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(4rem, 8vw, 7rem);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: -0.035em;

	color: #fff;
}

.vw-place-summary {
	max-width: 920px;
	margin-top: 20px;

	font-size: clamp(1.15rem, 2vw, 1.45rem);
	line-height: 1.55;

	color: rgba(255, 255, 255, 0.96);
}


/* =========================================================
   PLACE QUICK FACTS
   ========================================================= */

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

	gap: 14px;

	margin: 0 0 38px;
}

.vw-place-quickfacts > div {
	padding: 20px 22px;

	border: 1px solid var(--vw-border);
	border-radius: 16px;

	background: rgba(255, 255, 255, 0.84);

	box-shadow: 0 8px 20px rgba(17, 44, 64, 0.06);

	line-height: 1.45;
}

.vw-place-quickfacts strong,
.vw-place-quickfacts b {
	color: var(--vw-navy);
}


/* =========================================================
   PLACE INTRO
   ========================================================= */

.vw-place-intro {
	max-width: 1040px;

	margin: 0 auto 50px;
	padding: 30px 34px;

	border-left: 5px solid var(--vw-green);
	border-radius: 0 18px 18px 0;

	background: rgba(255, 255, 255, 0.68);

	font-size: 1.12rem;
	line-height: 1.75;
}


/* =========================================================
   PLACE HEADINGS
   ========================================================= */

.vw-place h2 {
	margin-top: 58px;
	padding-bottom: 10px;

	border-bottom: 1px solid var(--vw-border);

	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(2rem, 3vw, 2.65rem);

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

.vw-place h3 {
	font-family: Georgia, "Times New Roman", serif;
	color: var(--vw-navy);
}


/* =========================================================
   PLACE CARD GRID
   ========================================================= */

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

	gap: 20px;

	margin: 28px 0 42px;
}

.vw-place-card {
	padding: 27px;

	border: 1px solid var(--vw-border);
	border-radius: 18px;

	background: rgba(255, 255, 255, 0.83);

	box-shadow: 0 10px 24px rgba(17, 44, 64, 0.065);
}

.vw-place-card h3 {
	margin: 0 0 10px;
	font-size: 1.45rem;
}

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

.vw-place-card h3 a:hover {
	color: var(--vw-blue) !important;
}

.vw-place-card p {
	margin-bottom: 0;
}


/* =========================================================
   PLACE EXPLORE GRID
   ========================================================= */

.vw-place-explore-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));

	gap: 18px;

	margin: 25px 0 42px;
}

.vw-place-explore-grid > div {
	padding: 23px 25px;

	border: 1px solid var(--vw-border);
	border-radius: 17px;

	background: rgba(255, 255, 255, 0.82);

	box-shadow: 0 8px 20px rgba(17, 44, 64, 0.055);
}

.vw-place-explore-grid a {
	color: var(--vw-navy) !important;
	font-size: 1.08rem;
	text-decoration: none !important;
}


/* =========================================================
   ATTRACTION PAGES — HIDE DEFAULT TITLES
   ========================================================= */

body.page-Colonial_Williamsburg .mw-first-heading,
body.page-Colonial_Williamsburg #firstHeading,

body.page-Busch_Gardens_Williamsburg .mw-first-heading,
body.page-Busch_Gardens_Williamsburg #firstHeading,

body.page-Historic_Jamestowne .mw-first-heading,
body.page-Historic_Jamestowne #firstHeading,

body.page-Jamestown_Settlement .mw-first-heading,
body.page-Jamestown_Settlement #firstHeading,

body.page-American_Revolution_Museum_at_Yorktown .mw-first-heading,
body.page-American_Revolution_Museum_at_Yorktown #firstHeading {
	display: none !important;
}


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

.vw-attraction-hero {
	position: relative;

	width: 100%;
	min-height: 560px;

	overflow: hidden;

	margin-bottom: 28px;

	border-radius: 28px;

	background: var(--vw-navy);

	box-shadow: var(--vw-shadow);
}

.vw-attraction-hero-image {
	position: absolute;
	inset: 0;
}

.vw-attraction-hero-image .mw-file-element,
.vw-attraction-hero-image img {
	width: 100% !important;
	height: 100% !important;

	object-fit: cover;
}

.vw-attraction-hero-image a {
	display: block;

	width: 100%;
	height: 100%;
}

.vw-attraction-hero::after {
	content: "";

	position: absolute;
	inset: 0;

	background:
		linear-gradient(
			180deg,
			rgba(5, 21, 35, 0.08) 0%,
			rgba(5, 21, 35, 0.27) 34%,
			rgba(5, 21, 35, 0.93) 100%
		);
}

.vw-attraction-hero-overlay {
	position: absolute;
	z-index: 3;

	left: 6%;
	right: 6%;
	bottom: 8%;

	color: #fff;
}

.vw-attraction-kicker {
	margin-bottom: 12px;

	font-size: 0.83rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;

	color: rgba(255, 255, 255, 0.92);
}

.vw-attraction-title {
	max-width: 1120px;

	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(4rem, 8vw, 7rem);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: -0.035em;

	color: #fff;
}

.vw-attraction-summary {
	max-width: 980px;
	margin-top: 20px;

	font-size: clamp(1.12rem, 2vw, 1.45rem);
	line-height: 1.52;

	color: rgba(255, 255, 255, 0.96);
}


/* =========================================================
   ATTRACTION QUICK FACTS
   ========================================================= */

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

	gap: 14px;

	margin: 0 0 38px;
}

.vw-attraction-quickfacts > div {
	padding: 20px 22px;

	border: 1px solid var(--vw-border);
	border-radius: 16px;

	background: rgba(255, 255, 255, 0.84);

	box-shadow: 0 8px 20px rgba(17, 44, 64, 0.06);

	line-height: 1.45;
}

.vw-attraction-quickfacts strong,
.vw-attraction-quickfacts b {
	color: var(--vw-navy);
}


/* =========================================================
   ATTRACTION INTRO
   ========================================================= */

.vw-attraction-intro {
	max-width: 1040px;

	margin: 0 auto 50px;
	padding: 30px 34px;

	border-left: 5px solid var(--vw-blue);
	border-radius: 0 18px 18px 0;

	background: rgba(255, 255, 255, 0.68);

	font-size: 1.12rem;
	line-height: 1.75;
}


/* =========================================================
   ATTRACTION HEADINGS
   ========================================================= */

.vw-attraction h2 {
	margin-top: 58px;
	padding-bottom: 10px;

	border-bottom: 1px solid var(--vw-border);

	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(2rem, 3vw, 2.65rem);

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

.vw-attraction h3 {
	font-family: Georgia, "Times New Roman", serif;
	color: var(--vw-navy);
}


/* =========================================================
   ATTRACTION CARDS
   ========================================================= */

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

	gap: 20px;

	margin: 28px 0 42px;
}

.vw-attraction-card {
	padding: 27px;

	border: 1px solid var(--vw-border);
	border-radius: 18px;

	background: rgba(255, 255, 255, 0.83);

	box-shadow: 0 10px 24px rgba(17, 44, 64, 0.065);
}

.vw-attraction-card h3 {
	margin: 0 0 10px;
	font-size: 1.45rem;
}

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

.vw-attraction-card h3 a:hover {
	color: var(--vw-blue) !important;
}

.vw-attraction-card p {
	margin-bottom: 0;
}


/* =========================================================
   VISIT / PLANNING GRID
   ========================================================= */

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

	gap: 18px;

	margin: 27px 0 42px;
}

.vw-visit-grid > div {
	padding: 23px 25px;

	border: 1px solid var(--vw-border);
	border-radius: 17px;

	background: rgba(246, 242, 231, 0.75);

	box-shadow: 0 7px 20px rgba(17, 44, 64, 0.05);

	line-height: 1.58;
}

.vw-visit-grid strong,
.vw-visit-grid b {
	color: var(--vw-navy);
	font-size: 1.04rem;
}


/* =========================================================
   ATTRACTION NEARBY GRID
   ========================================================= */

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

	gap: 18px;

	margin: 25px 0 42px;
}

.vw-attraction-nearby-grid > div {
	padding: 23px 24px;

	border: 1px solid var(--vw-border);
	border-radius: 17px;

	background: rgba(255, 255, 255, 0.82);

	box-shadow: 0 8px 20px rgba(17, 44, 64, 0.055);

	line-height: 1.55;
}

.vw-attraction-nearby-grid a {
	color: var(--vw-navy) !important;
	font-size: 1.07rem;
	text-decoration: none !important;
}


/* =========================================================
   TABLES
   ========================================================= */

.vw-place .wikitable,
.vw-attraction .wikitable {
	width: 100%;

	margin: 24px 0 36px;

	border: 1px solid var(--vw-border);
	border-collapse: separate;
	border-spacing: 0;

	overflow: hidden;

	border-radius: 14px;

	background: rgba(255, 255, 255, 0.80);

	box-shadow: 0 6px 18px rgba(17, 44, 64, 0.045);
}

.vw-place .wikitable th,
.vw-attraction .wikitable th {
	padding: 14px 16px;

	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.20);

	background: var(--vw-navy);

	color: #fff;
	text-align: left;
}

.vw-place .wikitable td,
.vw-attraction .wikitable td {
	padding: 13px 16px;

	border: 0;
	border-bottom: 1px solid var(--vw-border);

	vertical-align: top;
}

.vw-place .wikitable tr:last-child td,
.vw-attraction .wikitable tr:last-child td {
	border-bottom: 0;
}


/* =========================================================
   REFERENCES
   ========================================================= */

.vw-place .references,
.vw-attraction .references {
	font-size: 0.92rem;
	line-height: 1.5;

	color: #4d5963;
}

.vw-place .references li,
.vw-attraction .references li {
	margin-bottom: 8px;
}


/* =========================================================
   LINKS
   ========================================================= */

.vw-place a,
.vw-attraction a {
	text-underline-offset: 2px;
}

.vw-place a.new,
.vw-attraction a.new {
	color: #a34242;
}


/* =========================================================
   ORIGINAL RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 1000px) {

	.vw-home-hero {
		min-height: 560px;
		padding: 85px 60px 110px;
	}

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

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

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

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

	.vw-place-hero,
	.vw-attraction-hero {
		min-height: 510px;
	}
}


/* =========================================================
   ORIGINAL RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 700px) {

	.vw-home-hero {
		min-height: 520px;
		padding: 65px 28px 100px;
		border-radius: 20px;
	}

	.vw-home-title {
		font-size: clamp(3.4rem, 17vw, 5.1rem);
	}

	.vw-home-subtitle {
		font-size: 1.1rem;
	}

	.vw-home-search form {
		flex-direction: column;
		gap: 10px;
	}

	.vw-home-search input[type="submit"],
	.vw-home-search .mw-ui-button {
		width: 100%;
	}

	.vw-photo-grid,
	.vw-destination-grid,
	.vw-feature-grid,
	.vw-place-card-grid,
	.vw-place-explore-grid,
	.vw-attraction-card-grid,
	.vw-visit-grid,
	.vw-attraction-nearby-grid {
		grid-template-columns: 1fr;
	}

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

	.vw-destination-card {
		min-height: 360px;
	}

	.vw-start-panel {
		padding: 34px 26px;
		border-radius: 20px;
	}

	.vw-place-hero,
	.vw-attraction-hero {
		min-height: 500px;
		border-radius: 20px;
	}

	.vw-place-hero-overlay,
	.vw-attraction-hero-overlay {
		left: 7%;
		right: 7%;
		bottom: 7%;
	}

	.vw-place-title,
	.vw-attraction-title {
		font-size: clamp(3rem, 15vw, 4.6rem);
		line-height: 0.92;
	}

	.vw-place-summary,
	.vw-attraction-summary {
		margin-top: 16px;

		font-size: 1.06rem;
		line-height: 1.45;
	}

	.vw-place-quickfacts,
	.vw-attraction-quickfacts {
		grid-template-columns: 1fr;
	}

	.vw-place-intro,
	.vw-attraction-intro {
		padding: 24px;

		font-size: 1.04rem;
	}

	.vw-place h2,
	.vw-attraction h2 {
		margin-top: 46px;
		font-size: 2rem;
	}

	.vw-place-card,
	.vw-attraction-card {
		padding: 23px;
	}

	.vw-place .wikitable,
	.vw-attraction .wikitable {
		display: block;
		overflow-x: auto;
		white-space: normal;
	}
}


/* =========================================================
   VERY SMALL SCREENS
   ========================================================= */

@media (max-width: 430px) {

	.vw-home-hero {
		padding-left: 22px;
		padding-right: 22px;
	}

	.vw-home-title {
		font-size: 3.3rem;
	}

	.vw-place-title,
	.vw-attraction-title {
		font-size: 2.85rem;
	}

	.vw-place-hero,
	.vw-attraction-hero {
		min-height: 470px;
	}

	.vw-place-summary,
	.vw-attraction-summary {
		font-size: 1rem;
	}
}


/* =========================================================
   VIRGINIA.WIKI — HOMEPAGE V2
   ========================================================= */

.vw-v2-home {
	--v2-navy: #0b2f4f;
	--v2-navy-deep: #071f35;
	--v2-blue: #3d7595;
	--v2-ocean: #317c9c;
	--v2-green: #52705b;
	--v2-gold: #c79a49;
	--v2-wine: #76505b;
	--v2-ink: #132738;
	--v2-muted: #5b6872;
	--v2-white: #ffffff;

	width: 100%;
	max-width: 1400px;
	margin: 0 auto;

	color: var(--v2-ink);
}

.vw-v2-home * {
	box-sizing: border-box;
}

.vw-v2-home img {
	max-width: 100%;
}


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

.vw-v2-hero {
	position: relative;

	min-height: 680px;

	overflow: hidden;

	border-radius: 30px;

	background: var(--v2-navy);

	box-shadow: 0 30px 70px rgba(10, 35, 52, 0.22);
}

.vw-v2-hero-image {
	position: absolute;
	inset: 0;
}

.vw-v2-hero-image a,
.vw-v2-hero-image span {
	display: block;

	width: 100%;
	height: 100%;
}

.vw-v2-hero-image img,
.vw-v2-hero-image .mw-file-element {
	width: 100% !important;
	height: 100% !important;

	max-width: none !important;

	object-fit: cover;
}

.vw-v2-hero-shade {
	position: absolute;
	inset: 0;

	background:
		linear-gradient(
			90deg,
			rgba(4, 25, 43, 0.92) 0%,
			rgba(4, 25, 43, 0.70) 45%,
			rgba(4, 25, 43, 0.18) 78%,
			rgba(4, 25, 43, 0.08) 100%
		),
		linear-gradient(
			0deg,
			rgba(4, 25, 43, 0.65) 0%,
			transparent 48%
		);
}

.vw-v2-hero-content {
	position: relative;
	z-index: 3;

	max-width: 850px;

	padding: 90px 72px 70px;

	color: #fff;
}

.vw-v2-kicker {
	margin-bottom: 18px;

	font-size: 0.86rem;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;

	color: #efd39a;
}

.vw-v2-title {
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(4.8rem, 9vw, 8rem);
	font-weight: 700;
	line-height: 0.84;
	letter-spacing: -0.055em;

	color: #fff;
}

.vw-v2-subtitle {
	max-width: 760px;

	margin-top: 31px;

	font-size: clamp(1.2rem, 2vw, 1.55rem);
	line-height: 1.55;

	color: rgba(255, 255, 255, 0.95);
}


/* =========================================================
   V2 HERO SEARCH
   ========================================================= */

.vw-v2-search {
	max-width: 680px;
	margin-top: 34px;
}

.vw-v2-search .mw-inputbox-centered {
	width: 100%;
	text-align: left;
}

.vw-v2-search form {
	display: flex;

	gap: 10px;

	margin: 0;
}

.vw-v2-search input[type="text"],
.vw-v2-search .mw-inputbox-input {
	flex: 1;

	min-width: 0;
	height: 54px;

	padding: 0 18px;

	border: 0;
	border-radius: 9px;

	background: rgba(255, 255, 255, 0.96);

	font-size: 1rem;
	color: var(--v2-ink);
}

.vw-v2-search input[type="submit"],
.vw-v2-search .mw-ui-button {
	height: 54px !important;

	padding: 0 25px !important;

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

	background: var(--v2-gold) !important;

	color: #17202a !important;

	font-weight: 800 !important;
}


/* =========================================================
   V2 HERO LINKS
   ========================================================= */

.vw-v2-hero-links {
	display: flex;
	flex-wrap: wrap;

	gap: 9px;

	margin-top: 24px;
}

.vw-v2-hero-links a {
	display: inline-block;

	padding: 9px 15px;

	border: 1px solid rgba(255, 255, 255, 0.32);
	border-radius: 999px;

	background: rgba(9, 35, 54, 0.32);

	color: #fff !important;

	font-size: 0.92rem;
	font-weight: 650;

	text-decoration: none !important;

	backdrop-filter: blur(4px);
}

.vw-v2-hero-links a:hover {
	background: rgba(255, 255, 255, 0.18);
}


/* =========================================================
   V2 INTRO
   ========================================================= */

.vw-v2-intro {
	max-width: 1000px;

	margin: 80px auto 95px;

	text-align: center;
}

.vw-v2-intro-small {
	margin-bottom: 13px;

	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.16em;

	color: var(--v2-green);
}

.vw-v2-intro-title {
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(2.8rem, 5vw, 4.4rem);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.03em;

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

.vw-v2-intro-copy {
	max-width: 850px;

	margin: 22px auto 0;

	font-size: 1.18rem;
	line-height: 1.7;

	color: var(--v2-muted);
}


/* =========================================================
   V2 GENERAL SECTION
   ========================================================= */

.vw-v2-section {
	margin-top: 90px;
}

.vw-v2-section-head {
	display: flex;

	align-items: flex-end;
	justify-content: space-between;

	gap: 30px;

	margin-bottom: 28px;
}

.vw-v2-section-kicker {
	margin-bottom: 8px;

	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.16em;

	color: var(--v2-gold);
}

.vw-v2-section-title {
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(2.5rem, 4vw, 3.8rem);
	font-weight: 700;
	line-height: 1.03;

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

.vw-v2-section-note {
	max-width: 360px;

	color: var(--v2-muted);

	line-height: 1.55;
}


/* =========================================================
   V2 TRIP CARDS
   ========================================================= */

.vw-v2-trip-grid {
	display: grid;

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

	gap: 18px;
}

.vw-v2-trip-grid > p {
	display: none !important;
}

.vw-v2-trip-card {
	position: relative;

	min-height: 275px;

	padding: 28px;

	overflow: hidden;

	border-radius: 22px;

	color: #fff;

	box-shadow: 0 15px 36px rgba(10, 35, 52, 0.10);
}

.vw-v2-trip-blue {
	background: #3e718f;
}

.vw-v2-trip-green {
	background: #52705b;
}

.vw-v2-trip-gold {
	background: #b9893f;
}

.vw-v2-trip-navy {
	background: #153e5b;
}

.vw-v2-trip-ocean {
	background: #397f98;
}

.vw-v2-trip-wine {
	background: #745461;
}

.vw-v2-trip-number {
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.12em;

	opacity: 0.72;
}

.vw-v2-trip-title {
	margin-top: 45px;

	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.05;
}

.vw-v2-trip-text {
	margin-top: 11px;

	line-height: 1.55;

	color: rgba(255, 255, 255, 0.90);
}

.vw-v2-trip-link {
	margin-top: 22px;
}

.vw-v2-trip-link a {
	color: #fff !important;

	font-weight: 750;

	text-decoration: none !important;
}


/* =========================================================
   V2 DESTINATIONS
   ========================================================= */

.vw-v2-destination-grid {
	display: grid;

	grid-template-columns: repeat(2, minmax(0, 1fr));

	gap: 22px;
}

.vw-v2-destination-grid > p {
	display: none !important;
}

.vw-v2-destination {
	position: relative;

	min-height: 440px;

	overflow: hidden;

	border-radius: 25px;

	background: var(--v2-navy);

	box-shadow: 0 18px 45px rgba(10, 35, 52, 0.14);
}

.vw-v2-destination-image {
	position: absolute;
	inset: 0;
}

.vw-v2-destination-image a,
.vw-v2-destination-image span {
	display: block;

	width: 100%;
	height: 100%;
}

.vw-v2-destination-image img,
.vw-v2-destination-image .mw-file-element {
	width: 100% !important;
	height: 100% !important;

	max-width: none !important;

	object-fit: cover;

	transition: transform 0.45s ease;
}

.vw-v2-destination:hover .vw-v2-destination-image img {
	transform: scale(1.035);
}

.vw-v2-destination-shade {
	position: absolute;
	inset: 0;

	background:
		linear-gradient(
			0deg,
			rgba(4, 24, 39, 0.94) 0%,
			rgba(4, 24, 39, 0.58) 44%,
			rgba(4, 24, 39, 0.06) 78%
		);
}

.vw-v2-destination-content {
	position: absolute;
	z-index: 3;

	left: 32px;
	right: 32px;
	bottom: 30px;

	color: #fff;
}

.vw-v2-destination-tag {
	margin-bottom: 9px;

	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.12em;

	color: #f0ce8d;
}

.vw-v2-destination-name {
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(2.5rem, 4vw, 3.7rem);
	font-weight: 700;
	line-height: 0.98;

	color: #fff;
}

.vw-v2-destination-copy {
	max-width: 560px;

	margin-top: 13px;

	line-height: 1.5;

	color: rgba(255, 255, 255, 0.91);
}

.vw-v2-destination-button {
	margin-top: 19px;
}

.vw-v2-destination-button a {
	display: inline-block;

	padding: 10px 16px;

	border: 1px solid rgba(255, 255, 255, 0.50);
	border-radius: 999px;

	background: rgba(255, 255, 255, 0.10);

	color: #fff !important;

	font-weight: 750;

	text-decoration: none !important;
}


/* =========================================================
   V2 FEATURE BAND
   ========================================================= */

.vw-v2-feature {
	position: relative;

	min-height: 560px;

	overflow: hidden;

	margin-top: 105px;

	border-radius: 28px;

	background: var(--v2-navy);

	box-shadow: 0 25px 60px rgba(10, 35, 52, 0.17);
}

.vw-v2-feature-image {
	position: absolute;
	inset: 0;
}

.vw-v2-feature-image a,
.vw-v2-feature-image span {
	display: block;

	width: 100%;
	height: 100%;
}

.vw-v2-feature-image img,
.vw-v2-feature-image .mw-file-element {
	width: 100% !important;
	height: 100% !important;

	max-width: none !important;

	object-fit: cover;
}

.vw-v2-feature-shade {
	position: absolute;
	inset: 0;

	background:
		linear-gradient(
			90deg,
			rgba(5, 28, 45, 0.96) 0%,
			rgba(5, 28, 45, 0.83) 45%,
			rgba(5, 28, 45, 0.23) 100%
		);
}

.vw-v2-feature-content {
	position: relative;
	z-index: 3;

	max-width: 760px;

	padding: 78px 68px;

	color: #fff;
}

.vw-v2-feature-kicker {
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.15em;

	color: #f0cd88;
}

.vw-v2-feature-title {
	margin-top: 14px;

	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(3.1rem, 5vw, 5rem);
	font-weight: 700;
	line-height: 0.98;

	color: #fff;
}

.vw-v2-feature-copy {
	max-width: 700px;

	margin-top: 21px;

	font-size: 1.14rem;
	line-height: 1.65;

	color: rgba(255, 255, 255, 0.91);
}

.vw-v2-feature-actions {
	display: flex;
	flex-wrap: wrap;

	gap: 12px;

	margin-top: 28px;
}

.vw-v2-feature-actions a {
	display: inline-block;

	padding: 11px 17px;

	border-radius: 999px;

	background: #fff;

	color: var(--v2-navy) !important;

	font-weight: 750;

	text-decoration: none !important;
}

.vw-v2-feature-actions a + a {
	border: 1px solid rgba(255, 255, 255, 0.42);

	background: rgba(255, 255, 255, 0.08);

	color: #fff !important;
}


/* =========================================================
   V2 REGIONS
   ========================================================= */

.vw-v2-region-grid {
	display: grid;

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

	gap: 16px;
}

.vw-v2-region-grid > p {
	display: none !important;
}

.vw-v2-region {
	padding: 25px 26px;

	border: 1px solid rgba(11, 47, 79, 0.10);
	border-radius: 18px;

	background: rgba(255, 255, 255, 0.82);

	box-shadow: 0 9px 24px rgba(10, 35, 52, 0.055);
}

.vw-v2-region-title {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.45rem;
	font-weight: 700;

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

.vw-v2-region-copy {
	margin: 7px 0 15px;

	color: var(--v2-muted);

	line-height: 1.45;
}

.vw-v2-region a {
	color: var(--v2-blue) !important;

	font-weight: 750;

	text-decoration: none !important;
}


/* =========================================================
   V2 SITE PATHS
   ========================================================= */

.vw-v2-path-grid {
	display: grid;

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

	gap: 20px;

	margin-top: 100px;
}

.vw-v2-path-grid > p {
	display: none !important;
}

.vw-v2-path {
	padding: 34px;

	border-radius: 22px;

	background: #fff;

	box-shadow: 0 13px 34px rgba(10, 35, 52, 0.08);
}

.vw-v2-path-kicker {
	font-size: 0.76rem;
	font-weight: 900;
	letter-spacing: 0.18em;

	color: var(--v2-gold);
}

.vw-v2-path-title {
	margin-top: 11px;

	font-family: Georgia, "Times New Roman", serif;
	font-size: 2rem;
	font-weight: 700;

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

.vw-v2-path-copy {
	margin-top: 12px;

	line-height: 1.6;

	color: var(--v2-muted);
}

.vw-v2-path-link {
	margin-top: 18px;
}

.vw-v2-path-link a {
	color: var(--v2-blue) !important;

	font-weight: 750;

	text-decoration: none !important;
}


/* =========================================================
   V2 FINAL CTA
   ========================================================= */

.vw-v2-final {
	margin-top: 100px;

	padding: 65px;

	border-radius: 28px;

	background:
		linear-gradient(
			130deg,
			#082c49 0%,
			#174f68 55%,
			#526e5c 100%
		);

	color: #fff;

	box-shadow: 0 22px 55px rgba(10, 35, 52, 0.16);
}

.vw-v2-final-kicker {
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.16em;

	color: #efd29a;
}

.vw-v2-final-title {
	margin-top: 12px;

	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(3rem, 5vw, 4.8rem);
	font-weight: 700;
	line-height: 1;

	color: #fff;
}

.vw-v2-final-copy {
	max-width: 720px;

	margin-top: 15px;

	font-size: 1.1rem;
	line-height: 1.6;

	color: rgba(255, 255, 255, 0.88);
}

.vw-v2-final-search {
	max-width: 650px;

	margin-top: 28px;
}

.vw-v2-final-search .mw-inputbox-centered {
	width: 100%;

	text-align: left;
}

.vw-v2-final-search form {
	display: flex;

	gap: 10px;

	margin: 0;
}

.vw-v2-final-search input[type="text"],
.vw-v2-final-search .mw-inputbox-input {
	flex: 1;

	min-width: 0;
	height: 52px;

	padding: 0 17px;

	border: 0;
	border-radius: 8px;

	background: #fff;
}

.vw-v2-final-search input[type="submit"],
.vw-v2-final-search .mw-ui-button {
	height: 52px !important;

	padding: 0 23px !important;

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

	background: var(--v2-gold) !important;

	color: #17202a !important;

	font-weight: 800 !important;
}


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

@media (max-width: 1000px) {

	.vw-v2-hero {
		min-height: 630px;
	}

	.vw-v2-hero-content {
		padding: 75px 48px 60px;
	}

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

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

	.vw-v2-feature-content {
		padding: 65px 50px;
	}
}


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

@media (max-width: 700px) {

	.vw-v2-hero {
		min-height: 670px;

		border-radius: 20px;
	}

	.vw-v2-hero-shade {
		background:
			linear-gradient(
				0deg,
				rgba(4, 25, 43, 0.96) 0%,
				rgba(4, 25, 43, 0.75) 60%,
				rgba(4, 25, 43, 0.28) 100%
			);
	}

	.vw-v2-hero-content {
		position: absolute;

		left: 0;
		right: 0;
		bottom: 0;

		padding: 35px 25px 35px;
	}

	.vw-v2-title {
		font-size: clamp(3.8rem, 18vw, 5.4rem);
	}

	.vw-v2-subtitle {
		font-size: 1.06rem;
	}

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

	.vw-v2-search input[type="submit"],
	.vw-v2-search .mw-ui-button,
	.vw-v2-final-search input[type="submit"],
	.vw-v2-final-search .mw-ui-button {
		width: 100%;
	}

	.vw-v2-intro {
		margin: 60px auto 70px;
	}

	.vw-v2-trip-grid,
	.vw-v2-destination-grid,
	.vw-v2-region-grid,
	.vw-v2-path-grid {
		grid-template-columns: 1fr;
	}

	.vw-v2-section-head {
		align-items: flex-start;
		flex-direction: column;
	}

	.vw-v2-destination {
		min-height: 400px;
	}

	.vw-v2-feature {
		min-height: 600px;

		border-radius: 20px;
	}

	.vw-v2-feature-shade {
		background:
			linear-gradient(
				0deg,
				rgba(5, 28, 45, 0.97) 0%,
				rgba(5, 28, 45, 0.74) 62%,
				rgba(5, 28, 45, 0.20) 100%
			);
	}

	.vw-v2-feature-content {
		position: absolute;

		left: 0;
		right: 0;
		bottom: 0;

		padding: 35px 26px;
	}

	.vw-v2-final {
		padding: 40px 26px;

		border-radius: 20px;
	}
}


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

@media (max-width: 430px) {

	.vw-v2-title {
		font-size: 3.65rem;
	}

	.vw-v2-destination-content {
		left: 23px;
		right: 23px;
		bottom: 24px;
	}

	.vw-v2-trip-card {
		min-height: 250px;
	}
}


/* =========================================================
   VIRGINIA.WIKI — HOMEPAGE VERTICAL POSITION
   Moves V2 homepage upward without altering Citizen layout
   ========================================================= */

/* Desktop */

@media (min-width: 1000px) {

	body.page-Main_Page .vw-v2-home {
		transform: translateY(-135px) !important;
		margin-bottom: -135px !important;
	}

}


/* Tablet */

@media (min-width: 701px) and (max-width: 999px) {

	body.page-Main_Page .vw-v2-home {
		transform: translateY(-55px) !important;
		margin-bottom: -55px !important;
	}

}


/* Mobile */

@media (max-width: 700px) {

	body.page-Main_Page .vw-v2-home {
		transform: none !important;
		margin-bottom: 0 !important;
	}

}
Agthorne (talk | contribs)

Revision as of 03:11, 30 September 2026
