|
|
| Line 1: |
Line 1: |
| /* ========================================================= | | /* ========================================================= |
| VIRGINIA.WIKI — MASTER STYLESHEET | | VIRGINIA.WIKI — CITIZEN SKIN |
| | Warm Editorial Ivory Theme |
| ========================================================= */ | | ========================================================= */ |
|
| |
|
|
| |
|
| /* ========================================================= | | /* ========================================================= |
| SHARED VARIABLES | | LIGHT THEME — SITE SURFACES |
| ========================================================= */ | | ========================================================= */ |
|
| |
|
| .vw-home,
| | :root.skin-theme-clientpref-day { |
| .vw-place,
| | --color-surface-0: #f3f1eb; |
| .vw-attraction {
| | --color-surface-1: #faf9f5; |
| --vw-navy: #0b2f4f;
| | --color-surface-2: #ffffff; |
| --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 | | AUTOMATIC THEME — WHEN DEVICE IS IN LIGHT MODE |
| ========================================================= */ | | ========================================================= */ |
|
| |
|
| .vw-place-explore-grid {
| | @media (prefers-color-scheme: light) { |
| display: grid;
| |
| grid-template-columns: repeat(2, minmax(0, 1fr));
| |
| | |
| gap: 18px;
| |
| | |
| margin: 25px 0 42px;
| |
| }
| |
|
| |
|
| .vw-place-explore-grid > div {
| | :root.skin-theme-clientpref-os { |
| padding: 23px 25px;
| | --color-surface-0: #f3f1eb; |
| | | --color-surface-1: #faf9f5; |
| border: 1px solid var(--vw-border);
| | --color-surface-2: #ffffff; |
| 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 | | FALLBACK PAGE BACKGROUND |
| ========================================================= */ | | ========================================================= */ |
|
| |
|
| @media (max-width: 700px) {
| | body { |
| | | background-color: var(--color-surface-0) !important; |
| .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 | | VIRGINIA.WIKI FOOTER |
| ========================================================= */ | | ========================================================= */ |
|
| |
|
| .vw-v2-home { | | .citizen-footer { |
| --v2-navy: #0b2f4f; | | --color-base: rgba(255, 255, 255, 0.88); |
| --v2-navy-deep: #071f35; | | --color-emphasized: #ffffff; |
| --v2-blue: #3d7595; | | --color-subtle: rgba(255, 255, 255, 0.74); |
| --v2-ocean: #317c9c; | | --color-link: #ffffff; |
| --v2-green: #52705b;
| | --border-color-base: rgba(255, 255, 255, 0.18); |
| --v2-gold: #c79a49; | |
| --v2-wine: #76505b;
| |
| --v2-ink: #132738;
| |
| --v2-muted: #5b6872;
| |
| --v2-white: #ffffff;
| |
|
| |
|
| width: 100%; | | background-color: #0b2f4f !important; |
| max-width: 1400px;
| | color: rgba(255, 255, 255, 0.88) !important; |
| margin: 0 auto;
| |
| | |
| color: var(--v2-ink); | |
| } | | } |
|
| |
|
| .vw-v2-home * { | | .citizen-footer__sitetitle, |
| box-sizing: border-box; | | .citizen-footer__sitetitle *, |
| | .citizen-footer .mw-wiki-title, |
| | .citizen-footer .mw-logo-wordmark { |
| | color: #ffffff !important; |
| } | | } |
|
| |
|
| .vw-v2-home img { | | .citizen-footer__desc, |
| max-width: 100%; | | #footer-desc { |
| | color: rgba(255, 255, 255, 0.82) !important; |
| } | | } |
|
| |
|
| | | #footer-tagline { |
| /* =========================================================
| | color: rgba(255, 255, 255, 0.78) !important; |
| 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 { | | .citizen-footer a { |
| position: absolute; | | color: #ffffff !important; |
| inset: 0;
| |
| } | | } |
|
| |
|
| .vw-v2-hero-image a, | | .citizen-footer a:hover { |
| .vw-v2-hero-image span {
| | color: #dceaf2 !important; |
| display: block; | |
| | |
| width: 100%;
| |
| height: 100%;
| |
| } | | } |
|
| |
|
| .vw-v2-hero-image img, | | .citizen-footer__bottom { |
| .vw-v2-hero-image .mw-file-element {
| | border-top-color: rgba(255, 255, 255, 0.18) !important; |
| 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) { | | @media (max-width: 700px) { |
|
| |
|
| body.page-Main_Page .vw-v2-home { | | .citizen-footer { |
| transform: none !important;
| | margin-top: 4rem; |
| margin-bottom: 0 !important;
| |
| }
| |
| | |
| }
| |
| /* =========================================================
| |
| VIRGINIA.WIKI — HOMEPAGE POSITION
| |
| ========================================================= */
| |
| | |
| @media (min-width: 1000px) {
| |
| | |
| #content .vw-v2-home {
| |
| transform: translateY(-120px) !important;
| |
| margin-bottom: -120px !important; | |
| } | | } |
|
| |
|
| } | | } |