Jump to content
Toggle search
Toggle menu
  • 63 articles
  • 2 files
  • 2 users
  • 222 edits
Virginia.wiki
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Common.css: Difference between revisions

MediaWiki interface page
More actions
← Older editNewer edit →

Agthorne (talk | contribs)

3 user groups
128 edits
No edit summary
No edit summary
Line 27: Line 27:


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


Line 43: Line 43:
}
}


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


Line 68: Line 70:
body.page-Main_Page #firstHeading {
body.page-Main_Page #firstHeading {
display: none !important;
display: none !important;
}
.vw-home {
width: 100%;
max-width: 1320px;
margin: 0 auto;
}
}




/* =========================================================
/* =========================================================
   HOMEPAGE HERO
   MAIN PAGE HERO
   ========================================================= */
   ========================================================= */


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


Line 102: Line 99:


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


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


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


Line 137: Line 138:
}
}


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


Line 157: Line 159:
}
}


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


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


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


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




/* =========================================================
/* =========================================================
   HOMEPAGE SEARCH
   MAIN PAGE SEARCH
   ========================================================= */
   ========================================================= */


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


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


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


Line 220: Line 239:


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


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


Line 232: Line 253:
border-radius: 15px !important;
border-radius: 15px !important;


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


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


/* =========================================================
/* =========================================================
   HOMEPAGE SECTIONS
   MAIN PAGE SECTIONS
   ========================================================= */
   ========================================================= */


Line 248: Line 271:
}
}


.vw-home-section-title {
.vw-home-section > h2 {
margin: 0 0 10px;
margin: 0 0 24px;
 
padding: 0;
 
border: 0;


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


Line 258: Line 287:
}
}


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


font-size: 1.08rem;
font-size: 1.08rem;
Line 270: Line 300:


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


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


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


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


.vw-photo-card img {
.vw-photo-card .vw-card-image {
position: absolute;
position: absolute;
inset: 0;
inset: 0;
}
.vw-photo-card .vw-card-image a {
display: block;


width: 100%;
width: 100%;
height: 100%;
height: 100%;
}
.vw-photo-card .vw-card-image img,
.vw-photo-card .vw-card-image .mw-file-element {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;


object-fit: cover;
object-fit: cover;
Line 301: Line 354:
.vw-photo-card::after {
.vw-photo-card::after {
content: "";
content: "";
position: absolute;
position: absolute;
inset: 0;
inset: 0;


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


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


left: 24px;
left: 24px;
Line 319: Line 378:
bottom: 22px;
bottom: 22px;


color: #fff;
color: #ffffff;
}
}


.vw-photo-card .vw-card-content h3,
.vw-photo-card h3 {
.vw-photo-card h3 {
margin: 0 0 5px;
margin: 0 0 5px;
Line 328: Line 388:
font-size: 1.7rem;
font-size: 1.7rem;


color: #fff;
color: #ffffff;
}
}


.vw-photo-card .vw-card-content p,
.vw-photo-card p {
.vw-photo-card p {
margin: 0;
margin: 0;
line-height: 1.45;
line-height: 1.45;
color: rgba(255, 255, 255, 0.9);
 
color: rgba(255, 255, 255, 0.92);
}
 
.vw-photo-card a {
color: #ffffff !important;
text-decoration: none !important;
}
}


Line 344: Line 412:
.vw-destination-grid {
.vw-destination-grid {
display: grid;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
gap: 24px;
}
}
Line 350: Line 420:
.vw-destination-card {
.vw-destination-card {
position: relative;
position: relative;
min-height: 420px;
min-height: 420px;
overflow: hidden;
overflow: hidden;


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


.vw-destination-card img {
.vw-destination-image {
position: absolute;
position: absolute;
inset: 0;
inset: 0;
}
.vw-destination-image a {
display: block;


width: 100%;
width: 100%;
height: 100%;
height: 100%;
}
.vw-destination-image img,
.vw-destination-image .mw-file-element {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;


object-fit: cover;
object-fit: cover;
Line 370: Line 459:
.vw-destination-card::after {
.vw-destination-card::after {
content: "";
content: "";
position: absolute;
position: absolute;
inset: 0;
inset: 0;


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


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


Line 387: Line 482:
right: 34px;
right: 34px;
bottom: 32px;
bottom: 32px;
color: #ffffff;
}
}


.vw-destination-card h3 {
.vw-destination-name,
.vw-destination-title-text {
margin: 0 0 12px;
margin: 0 0 12px;


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


color: #fff;
color: #ffffff;
}
}


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


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


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


Line 415: Line 517:
border-radius: 999px;
border-radius: 999px;


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


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


Line 424: Line 528:
}
}


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


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


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


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


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


Line 452: Line 558:


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


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




/* =========================================================
/* =========================================================
   HOMEPAGE FEATURE CARDS
   EXPLORE VIRGINIA FEATURE CARDS
   ========================================================= */
   ========================================================= */


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


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


Line 482: Line 592:
}
}


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


Line 491: Line 601:
}
}


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


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


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


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


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


Line 522: Line 635:
);
);


color: #fff;
color: #ffffff;


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


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


Line 533: Line 646:
font-size: clamp(2.2rem, 4vw, 3.5rem);
font-size: clamp(2.2rem, 4vw, 3.5rem);


color: #fff;
font-weight: 700;
 
color: #ffffff;
}
}


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


Line 543: Line 659:
line-height: 1.65;
line-height: 1.65;


color: rgba(255, 255, 255, 0.9);
color: rgba(255, 255, 255, 0.90);
}
 
.vw-home-bottom a {
color: #ffffff !important;
}
}


Line 586: Line 706:
.vw-place-hero-image {
.vw-place-hero-image {
position: absolute;
position: absolute;
inset: 0;
inset: 0;
}
.vw-place-hero-image a {
display: block;
width: 100%;
height: 100%;
}
}


Line 595: Line 723:


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


Line 607: Line 729:


position: absolute;
position: absolute;
inset: 0;
inset: 0;


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


Line 626: Line 750:
bottom: 8%;
bottom: 8%;


color: #fff;
color: #ffffff;
}
}


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


Line 644: Line 770:


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


color: #fff;
color: #ffffff;
}
}


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


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


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


Line 680: Line 813:


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


Line 703: Line 837:


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


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


Line 711: Line 847:


font-size: 1.12rem;
font-size: 1.12rem;
line-height: 1.75;
line-height: 1.75;
}
}
Line 721: Line 858:
.vw-place h2 {
.vw-place h2 {
margin-top: 58px;
margin-top: 58px;
padding-bottom: 10px;
padding-bottom: 10px;


Line 726: Line 864:


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


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


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


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


Line 754: Line 895:


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


Line 763: Line 905:
.vw-place-card h3 {
.vw-place-card h3 {
margin: 0 0 10px;
margin: 0 0 10px;
font-size: 1.45rem;
font-size: 1.45rem;
}
}
Line 768: Line 911:
.vw-place-card h3 a {
.vw-place-card h3 a {
color: var(--vw-navy) !important;
color: var(--vw-navy) !important;
text-decoration: none !important;
text-decoration: none !important;
}
}
Line 781: Line 925:


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


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


Line 797: Line 942:


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


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


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


Line 841: Line 989:


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


Line 856: Line 1,005:
.vw-attraction-hero-image {
.vw-attraction-hero-image {
position: absolute;
position: absolute;
inset: 0;
inset: 0;
}
.vw-attraction-hero-image a {
display: block;
width: 100%;
height: 100%;
}
}


Line 865: Line 1,022:


object-fit: cover;
object-fit: cover;
}
.vw-attraction-hero-image a {
display: block;
width: 100%;
height: 100%;
}
}


Line 878: Line 1,028:


position: absolute;
position: absolute;
inset: 0;
inset: 0;


Line 891: Line 1,042:
.vw-attraction-hero-overlay {
.vw-attraction-hero-overlay {
position: absolute;
position: absolute;
z-index: 3;
z-index: 3;


Line 897: Line 1,049:
bottom: 8%;
bottom: 8%;


color: #fff;
color: #ffffff;
}
}


Line 904: Line 1,056:


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


Line 915: Line 1,070:


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


color: #fff;
color: #ffffff;
}
}


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


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


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


Line 951: Line 1,113:


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


Line 974: Line 1,137:


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


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


Line 982: Line 1,147:


font-size: 1.12rem;
font-size: 1.12rem;
line-height: 1.75;
line-height: 1.75;
}
}
Line 992: Line 1,158:
.vw-attraction h2 {
.vw-attraction h2 {
margin-top: 58px;
margin-top: 58px;
padding-bottom: 10px;
padding-bottom: 10px;


Line 997: Line 1,164:


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


Line 1,004: Line 1,172:
.vw-attraction h3 {
.vw-attraction h3 {
font-family: Georgia, "Times New Roman", serif;
font-family: Georgia, "Times New Roman", serif;
color: var(--vw-navy);
color: var(--vw-navy);
}
}
Line 1,014: Line 1,183:
.vw-attraction-card-grid {
.vw-attraction-card-grid {
display: grid;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-columns: repeat(2, minmax(0, 1fr));


Line 1,025: Line 1,195:


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


Line 1,034: Line 1,205:
.vw-attraction-card h3 {
.vw-attraction-card h3 {
margin: 0 0 10px;
margin: 0 0 10px;
font-size: 1.45rem;
font-size: 1.45rem;
}
}
Line 1,039: Line 1,211:
.vw-attraction-card h3 a {
.vw-attraction-card h3 a {
color: var(--vw-navy) !important;
color: var(--vw-navy) !important;
text-decoration: none !important;
text-decoration: none !important;
}
}
Line 1,057: Line 1,230:
.vw-visit-grid {
.vw-visit-grid {
display: grid;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-columns: repeat(2, minmax(0, 1fr));


Line 1,068: Line 1,242:


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


Line 1,080: Line 1,255:
.vw-visit-grid b {
.vw-visit-grid b {
color: var(--vw-navy);
color: var(--vw-navy);
font-size: 1.04rem;
font-size: 1.04rem;
}
}
Line 1,090: Line 1,266:
.vw-attraction-nearby-grid {
.vw-attraction-nearby-grid {
display: grid;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-columns: repeat(3, minmax(0, 1fr));


Line 1,101: Line 1,278:


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


Line 1,112: Line 1,290:
.vw-attraction-nearby-grid a {
.vw-attraction-nearby-grid a {
color: var(--vw-navy) !important;
color: var(--vw-navy) !important;
font-size: 1.07rem;
font-size: 1.07rem;
text-decoration: none !important;
text-decoration: none !important;
}
}
Line 1,128: Line 1,308:


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


Line 1,145: Line 1,327:


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


background: var(--vw-navy);
background: var(--vw-navy);


color: #fff;
color: #ffffff;
 
text-align: left;
text-align: left;
}
}
Line 1,158: Line 1,342:


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


Line 1,176: Line 1,361:
.vw-attraction .references {
.vw-attraction .references {
font-size: 0.92rem;
font-size: 0.92rem;
line-height: 1.5;
line-height: 1.5;


Line 1,208: Line 1,394:
@media (max-width: 1000px) {
@media (max-width: 1000px) {


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


.vw-photo-grid {
.vw-card-grid,
.vw-photo-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
Line 1,243: Line 1,431:
@media (max-width: 700px) {
@media (max-width: 700px) {


.vw-home-hero {
.vw-hero {
min-height: 520px;
min-height: 520px;


Line 1,251: Line 1,439:
}
}


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


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


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


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


.vw-photo-grid,
.vw-card-grid,
.vw-photo-card-grid,
.vw-destination-grid,
.vw-destination-grid,
.vw-feature-grid,
.vw-feature-grid,
Line 1,288: Line 1,478:
}
}


.vw-start-panel {
.vw-home-bottom {
padding: 34px 26px;
padding: 34px 26px;
border-radius: 20px;
border-radius: 20px;
}
}
Line 1,296: Line 1,487:
.vw-attraction-hero {
.vw-attraction-hero {
min-height: 500px;
min-height: 500px;
border-radius: 20px;
border-radius: 20px;
}
}
Line 1,309: Line 1,501:
.vw-attraction-title {
.vw-attraction-title {
font-size: clamp(3rem, 15vw, 4.6rem);
font-size: clamp(3rem, 15vw, 4.6rem);
line-height: 0.92;
line-height: 0.92;
}
}
Line 1,317: Line 1,510:


font-size: 1.06rem;
font-size: 1.06rem;
line-height: 1.45;
line-height: 1.45;
}
}
Line 1,335: Line 1,529:
.vw-attraction h2 {
.vw-attraction h2 {
margin-top: 46px;
margin-top: 46px;
font-size: 2rem;
font-size: 2rem;
}
}
Line 1,346: Line 1,541:
.vw-attraction .wikitable {
.vw-attraction .wikitable {
display: block;
display: block;
overflow-x: auto;
overflow-x: auto;
white-space: normal;
white-space: normal;
}
}
Line 1,358: Line 1,555:
@media (max-width: 430px) {
@media (max-width: 430px) {


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


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

Revision as of 00:27, 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
   ========================================================= */

.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-home,
.vw-place,
.vw-attraction {
	width: 100%;
	max-width: 1320px;
	margin-left: auto;
	margin-right: 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;
}


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

.vw-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: #ffffff;
}

.vw-hero::before,
.vw-hero::after {
	content: "";
	position: absolute;

	left: -5%;
	right: -5%;
	bottom: -1px;

	pointer-events: none;
}

.vw-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-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-hero-inner {
	position: relative;
	z-index: 3;

	max-width: 900px;
}

.vw-eyebrow {
	margin-bottom: 20px;

	font-size: 0.9rem;
	font-weight: 800;
	letter-spacing: 0.17em;
	text-transform: uppercase;

	color: #ffffff;
}

.vw-hero-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: #ffffff;
}

.vw-hero-subtitle {
	max-width: 870px;

	margin-top: 32px;

	font-size: clamp(1.25rem, 2vw, 1.65rem);
	line-height: 1.5;

	color: #ffffff;
}


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

.vw-search {
	position: relative;
	z-index: 5;

	max-width: 760px;

	margin-top: 38px;
}

.vw-search form {
	display: flex;
	align-items: stretch;

	gap: 14px;

	margin: 0;
}

.vw-search input[type="text"],
.vw-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-search input[type="submit"],
.vw-search .mw-ui-button {
	min-width: 120px;
	height: 52px;

	padding: 0 24px;

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

	background: #ffffff !important;

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

	font-weight: 800 !important;

	box-shadow: none !important;
}


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

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

.vw-home-section > h2 {
	margin: 0 0 24px;

	padding: 0;

	border: 0;

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

	line-height: 1.05;

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

.vw-home-section > p {
	max-width: 850px;

	margin-bottom: 30px;

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

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


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

.vw-card-grid,
.vw-photo-card-grid {
	display: grid;

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

	gap: 22px;
}

.vw-card.vw-photo-card,
.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 .vw-card-image {
	position: absolute;

	inset: 0;
}

.vw-photo-card .vw-card-image a {
	display: block;

	width: 100%;
	height: 100%;
}

.vw-photo-card .vw-card-image img,
.vw-photo-card .vw-card-image .mw-file-element {
	position: absolute;

	inset: 0;

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

	object-fit: cover;
}

.vw-photo-card::after {
	content: "";

	position: absolute;

	inset: 0;

	z-index: 1;

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

.vw-photo-card .vw-card-content {
	position: absolute;

	z-index: 3;

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

	color: #ffffff;
}

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

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

	color: #ffffff;
}

.vw-photo-card .vw-card-content p,
.vw-photo-card p {
	margin: 0;

	line-height: 1.45;

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

.vw-photo-card a {
	color: #ffffff !important;
	text-decoration: none !important;
}


/* =========================================================
   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-image {
	position: absolute;

	inset: 0;
}

.vw-destination-image a {
	display: block;

	width: 100%;
	height: 100%;
}

.vw-destination-image img,
.vw-destination-image .mw-file-element {
	position: absolute;

	inset: 0;

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

	object-fit: cover;
}

.vw-destination-card::after {
	content: "";

	position: absolute;

	inset: 0;

	z-index: 1;

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

.vw-destination-overlay {
	position: absolute;

	z-index: 3;

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

	color: #ffffff;
}

.vw-destination-name,
.vw-destination-title-text {
	margin: 0 0 12px;

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

	line-height: 1;

	color: #ffffff;
}

.vw-destination-description {
	max-width: 520px;

	margin: 0 0 18px;

	line-height: 1.55;

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

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

	padding: 10px 17px;

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

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

	color: #ffffff !important;

	font-weight: 700;

	text-decoration: none !important;

	backdrop-filter: blur(5px);
}

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


/* =========================================================
   SECONDARY DESTINATIONS
   ========================================================= */

.vw-secondary-destinations {
	display: flex;

	flex-wrap: wrap;

	gap: 12px;

	margin-top: 22px;
}

.vw-secondary-destinations 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-secondary-destinations a:hover {
	background: #ffffff;
}


/* =========================================================
   EXPLORE VIRGINIA FEATURE CARDS
   ========================================================= */

.vw-feature-grid {
	display: grid;

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

	gap: 22px;
}

.vw-feature {
	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 h3 {
	margin: 0 0 10px;

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

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

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

	line-height: 1.6;

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

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

	font-weight: 700;
}


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

.vw-home-bottom {
	margin-top: 78px;

	padding: 54px;

	border-radius: 28px;

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

	color: #ffffff;

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

.vw-bottom-title {
	margin: 0 0 14px;

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

	font-weight: 700;

	color: #ffffff;
}

.vw-bottom-text {
	max-width: 850px;

	margin: 0;

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

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

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


/* =========================================================
   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 a {
	display: block;

	width: 100%;
	height: 100%;
}

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

	object-fit: cover;
}

.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: #ffffff;
}

.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: #ffffff;
}

.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 CARDS
   ========================================================= */

.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 / NEARBY 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 PAGE 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 a {
	display: block;

	width: 100%;
	height: 100%;
}

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

	object-fit: cover;
}

.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: #ffffff;
}

.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: #ffffff;
}

.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: #ffffff;

	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;
}


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

@media (max-width: 1000px) {

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

		padding: 85px 60px 110px;
	}

	.vw-card-grid,
	.vw-photo-card-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;
	}
}


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

@media (max-width: 700px) {

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

		padding: 65px 28px 100px;

		border-radius: 20px;
	}

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

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

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

		gap: 10px;
	}

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

	.vw-card-grid,
	.vw-photo-card-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-home-bottom {
		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-hero {
		padding-left: 22px;
		padding-right: 22px;
	}

	.vw-hero-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;
	}
}
Retrieved from "https://virginia.wiki/index.php?title=MediaWiki:Common.css&oldid=53"
Last modified
This page was last edited on 30 September 2026, at 00:27.