/* ========================================================= VILLAGERS SKI CLUB — SITEWIDE MASTER STYLESHEET ========================================================= This file replaces the page-specific CSS files. PAGE BODY CLASSES REQUIRED: home index.html page-about about.html page-events events.html page-membership membership.html page-contact contact.html page-trips trips.html page-beaver-creek trips/beaver-creek.html page-whistler trips/whistler.html page-application application.php / review.php / success.php Example: Hero image system:
========================================================= */ :root { --navy: #061a36; --navy-deep: #041329; --blue: #0878ee; --blue-dark: #0568d5; --sky: #69b4ff; --ice: #eef5ff; --text: #10213d; --muted: #5d6d83; --white: #ffffff; --shadow: 0 12px 30px rgba(6, 26, 54, 0.12); --radius: 16px; --site-width: 1220px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--text); background: var(--white); font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.6; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } .container { width: 92%; max-width: var(--site-width); margin-left: auto; margin-right: auto; } /* ========================================================= SITE HEADER / NAVIGATION ========================================================= */ .header, .site-header { position: relative; z-index: 100; background: rgba(4, 19, 45, 0.94); } .header .nav, .site-header .nav, .header-inner { min-height: 78px; display: flex; align-items: center; gap: 20px; } .header-inner { width: 92%; max-width: var(--site-width); margin: 0 auto; } .brand-text, .site-brand { color: var(--white); white-space: nowrap; } .brand-villagers { color: var(--white); font-size: 30px; font-weight: 900; letter-spacing: -1.8px; line-height: .9; text-transform: uppercase; text-shadow: 2px 2px 0 var(--blue), 3px 3px 0 var(--blue-dark), 0 5px 10px rgba(0,0,0,.5); } .nav-links { margin-left: auto; display: flex; align-items: center; gap: 20px; white-space: nowrap; } .nav-links a { color: var(--white); font-size: 14px; font-weight: 800; letter-spacing: .2px; } .nav-links a:hover, .nav-links a.active { color: var(--sky); } .join-btn, .join-button { background: var(--blue) !important; color: var(--white) !important; padding: 11px 20px; border-radius: 25px; } .join-btn:hover, .join-button:hover { background: var(--blue-dark) !important; } .menu, .menu-btn, .menu-button { display: none; margin-left: auto; border: 0; background: transparent; color: var(--white); font-size: 28px; line-height: 1; cursor: pointer; } /* ========================================================= REUSABLE PAGE HEADER / HERO IMAGE ========================================================= */ .page-header, /* .page-hero { --hero-image: none; --hero-position: center center; position: relative; color: var(--white); background: linear-gradient(rgba(4,19,45,.70), rgba(4,19,45,.82)), var(--hero-image); background-size: cover; background-position: var(--hero-position); background-repeat: no-repeat; } ****/ .page-hero { padding: 140px 0 70px; color: #ffffff; background-color: #061a3b; background-size: cover; background-position: center; background-repeat: no-repeat; } .page-header { padding: 130px 0 55px; } .page-hero { padding: 80px 0 65px; } .eyebrow { margin-bottom: 9px; color: var(--blue); font-size: 12px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; } .page-header .eyebrow, .page-hero .eyebrow { color: var(--sky); } .page-header h1, .page-hero h1 { margin: 0 0 12px; color: var(--white); font-size: 54px; line-height: 1; font-weight: 900; letter-spacing: -1px; } .page-header p, .page-hero p { max-width: 800px; margin: 0; color: rgba(255,255,255,.92); font-size: 18px; line-height: 1.5; } /* ========================================================= SHARED BUTTONS ========================================================= */ .primary-button, .secondary-button { display: inline-block; padding: 13px 23px; border-radius: 26px; font-size: 12px; font-weight: 900; letter-spacing: .3px; transition: background .2s ease, transform .2s ease; } .primary-button { color: var(--white); background: var(--blue); border: 0; cursor: pointer; } .primary-button:hover { background: var(--blue-dark); transform: translateY(-2px); } .secondary-button { color: var(--navy); background: transparent; border: 1px solid rgba(6,26,54,.22); } /* ========================================================= SHARED FOOTER ========================================================= */ .site-footer { padding: 45px 0 20px; color: #d5e1f1; background: var(--navy-deep); } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 35px; } .site-footer h4 { margin: 0 0 13px; color: var(--white); font-size: 14px; } .site-footer a { display: block; margin: 7px 0; color: #c8d6e9; font-size: 13px; } .site-footer a:hover { color: var(--white); } .copyright { margin-top: 30px; padding-top: 18px; color: #8ea3bf; border-top: 1px solid rgba(255,255,255,.12); text-align: center; font-size: 12px; } /* ========================================================= PAGE-SPECIFIC STYLES These are isolated with body classes to prevent pages from overwriting each other. ========================================================= */ @scope (body.home) { /* ========================================================= VILLAGERS SKI CLUB COMPLETE HOMEPAGE CSS ========================================================= */ /* ========================================================= RESET / BASE ========================================================= */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: #10213d; background: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.5; } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } button, input { font-family: inherit; } .container { width: 94%; max-width: 1320px; margin-left: auto; margin-right: auto; } /* ========================================================= HEADER ========================================================= */ .header { position: absolute; top: 0; left: 0; right: 0; z-index: 20; background: rgba(4, 19, 45, 0.90); } .nav { height: 96px; display: flex; align-items: center; gap: 20px; } .logo { width: 300px; height: 85px; object-fit: contain; object-position: left center; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.40)); flex-shrink: 0; } .nav-links { margin-left: auto; display: flex; align-items: center; gap: 20px; white-space: nowrap; } .nav-links a { color: #ffffff; font-size: 14px; font-weight: 800; letter-spacing: 0.2px; } .nav-links a:hover, .nav-links a.active { color: #69b4ff; } .join-btn { background: #0878ee !important; color: #ffffff !important; padding: 12px 22px; border-radius: 25px; } .join-btn:hover { background: #0568d5 !important; } .menu-btn { display: none; border: 0; background: transparent; color: #ffffff; font-size: 29px; cursor: pointer; } .brand-villagers { color: #ffffff; font-size: 30px; font-weight: 900; letter-spacing: -1.8px; line-height: 0.9; text-transform: uppercase; text-shadow: 2px 2px 0 #0878ee, 3px 3px 0 #0568d5, 0 5px 10px rgba(0,0,0,0.5); } .brand-ski { margin-top: 5px; color: #69b4ff; font-size: 20px; font-weight: 900; letter-spacing: 3px; line-height: 1; text-transform: uppercase; text-shadow: 0 2px 5px rgba(0,0,0,0.5); } /* ========================================================= HERO ========================================================= */ .hero { position: relative; min-height: 620px; width: 100%; overflow: hidden; /* background-image: url("../images/bigsky_2.jpg"); background-image: url("../images/bigsky_group.jpg"); background-image: url("../images/winterpark_header.jpg"); */ background-image: url("../images/sunvalley_group.jpg"); background-repeat: no-repeat; background-position: center top; background-size: 100% auto; background-color: #0a2145; } .hero-overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient( 90deg, rgba(2,18,43,0.90) 0%, rgba(2,18,43,0.68) 28%, rgba(2,18,43,0.30) 50%, rgba(2,18,43,0.04) 72% ), linear-gradient( 0deg, rgba(2,18,43,0.22) 0%, rgba(2,18,43,0.04) 45%, rgba(2,18,43,0.05) 100% ); } .hero-content { position: relative; z-index: 3; max-width: 650px; padding-top: 145px; padding-bottom: 80px; color: #ffffff; } .hero-content h1 { margin: 0 0 18px; color: #ffffff; font-size: 76px; line-height: 0.92; font-weight: 900; letter-spacing: -1.5px; text-shadow: 0 3px 8px rgba(0,0,0,0.45); } .hero-content p { max-width: 500px; margin: 0 0 28px; color: #ffffff; font-size: 19px; line-height: 1.5; font-weight: 500; text-shadow: 0 2px 5px rgba(0,0,0,0.45); } /* ========================================================= HERO BUTTONS ========================================================= */ .hero-buttons { display: flex; flex-wrap: wrap; gap: 12px; } .hero .btn-primary, .hero .btn-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 24px; border-radius: 24px; font-size: 13px; font-weight: 800; letter-spacing: 0.2px; text-decoration: none; } .hero .btn-primary { color: #ffffff; background: #0878ee; box-shadow: 0 7px 18px rgba(0,90,200,0.30); } .hero .btn-primary:hover { background: #0568d5; transform: translateY(-2px); } .hero .btn-secondary { color: #ffffff; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.75); } .hero .btn-secondary:hover { background: rgba(255,255,255,0.28); transform: translateY(-2px); } /* ========================================================= STATISTICS BAR ========================================================= */ .stats { position: relative; z-index: 4; margin-top: -44px; } .stats-box { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; padding: 23px; color: #ffffff; background: #0e4389; border-radius: 18px; box-shadow: 0 14px 30px rgba(4,26,60,0.25); } .stat { display: flex; align-items: center; justify-content: center; gap: 14px; border-right: 1px solid rgba(255,255,255,0.18); } .stat:last-child { border-right: 0; } .stat-icon { font-size: 31px; } .stat strong { display: block; font-size: 24px; } .stat span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; opacity: 0.85; } /* ========================================================= GENERAL SECTIONS ========================================================= */ .section { padding: 76px 0; } .section.alt { background: #eaf4ff; } .section-head { margin-bottom: 36px; text-align: center; } .section-head h2 { margin: 8px 0 10px; color: #09295d; font-size: 38px; line-height: 1.1; } .section-head p { max-width: 680px; margin-left: auto; margin-right: auto; color: #5d6d83; } .eyebrow { color: #65b2ff; font-size: 13px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; } /* ========================================================= GENERAL BUTTONS ========================================================= */ .btn { display: inline-block; padding: 14px 23px; color: #ffffff; background: #0878ee; border: 0; border-radius: 26px; font-size: 13px; font-weight: 900; letter-spacing: 0.3px; } .btn:hover { background: #0568d5; } .btn-outline { margin-left: 8px; color: #ffffff; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.8); } /* ========================================================= FEATURED TRIP CARDS ========================================================= */ .cards { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 17px; align-items: stretch; } .card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: #ffffff; border: 1px solid #e3eaf3; border-radius: 14px; box-shadow: 0 10px 28px rgba(5,29,65,0.13); } .card:hover { transform: translateY(-4px); } .card-image { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: center center; } .card-body { display: flex; flex-direction: column; flex: 1; padding: 17px; } .tag { display: inline-block; align-self: flex-start; padding: 5px 9px; color: #075dcc; background: #eaf3ff; border-radius: 13px; font-size: 10px; font-weight: 900; text-transform: uppercase; } .tag.green { color: #0c7950; background: #e5f7ee; } .tag.purple { color: #7134a4; background: #f2e9ff; } .card h3 { min-height: 44px; margin: 12px 0 7px; color: #09295d; font-size: 19px; line-height: 1.15; } .date { min-height: 18px; color: #334a69; font-size: 12px; font-weight: 700; } .card p { min-height: 58px; margin: 10px 0 16px; color: #59697d; font-size: 13px; } .small-btn { align-self: flex-start; margin-top: auto; padding: 10px 15px; font-size: 11px; white-space: nowrap; } /* ========================================================= WHY JOIN ========================================================= */ .features { display: grid; grid-template-columns: repeat(6,1fr); } .feature { padding: 10px 18px; text-align: center; border-right: 1px solid #c8d8ea; } .feature:last-child { border-right: 0; } .feature-icon { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 11px; color: #0765d4; border: 2px solid #7db5ff; border-radius: 50%; font-size: 25px; } .feature h3 { margin: 4px 0; color: #09295d; font-size: 15px; } .feature p { color: #617086; font-size: 12px; } /* ========================================================= EVENTS ========================================================= */ .events-section { padding-top: 72px; padding-bottom: 72px; } .events-layout { display: grid; grid-template-columns: minmax(360px,0.9fr) minmax(0,1.75fr); gap: 22px; align-items: start; } .event-list { padding: 25px; background: #eff7ff; border-radius: 15px; } .event-list h3 { margin: 0 0 15px; color: #09295d; font-size: 24px; } .event { display: grid; grid-template-columns: 55px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid #d5e3f2; } .event-date { padding: 6px; color: #0765d4; background: #ffffff; border-radius: 9px; text-align: center; box-shadow: 0 3px 10px rgba(0,0,0,0.07); font-size: 11px; font-weight: 900; } .event-date b { display: block; font-size: 20px; } .event strong { font-size: 14px; } .event small { color: #6a7889; } .events-button { margin-top: 16px; } /* ========================================================= JOIN US ========================================================= */ .join-us { min-width: 0; } .join-us-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin: 0 0 18px; padding: 0 2px; } .join-us-head h2 { margin: 5px 0 0; color: #09295d; font-size: 30px; line-height: 1; } .outline-blue-btn { display: inline-block; padding: 9px 17px; color: #0765d4; background: #ffffff; border: 1px solid #8bbaff; border-radius: 22px; font-size: 11px; font-weight: 900; white-space: nowrap; } .outline-blue-btn:hover { background: #edf6ff; } .event-photos { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; align-items: start; } .event-photo { min-width: 0; overflow: hidden; background: #ffffff; border: 1px solid #e5ebf2; border-radius: 12px; box-shadow: 0 7px 18px rgba(5,29,65,0.08); } .event-photo img { display: block; width: 100%; height: 126px; object-fit: cover; object-position: center center; } .event-photo div { min-height: 55px; padding: 9px 10px 11px; } .event-photo strong { display: block; color: #10213d; font-size: 12px; line-height: 1.25; } .event-photo small { display: block; margin-top: 3px; color: #66758a; font-size: 11px; } /* ========================================================= GALLERY ========================================================= */ .gallery-wrap { text-align: center; } .gallery { display: grid; grid-template-columns: repeat(6,1fr); gap: 9px; } .gallery img { width: 100%; height: 145px; object-fit: cover; border-radius: 10px; } .gallery-button { margin-top: 18px; } /* ========================================================= QUOTE ========================================================= */ .quote { position: relative; overflow: hidden; margin-top: 28px; padding: 36px 50px; color: #ffffff; background: linear-gradient(110deg,#082a62,#061a3b); border-radius: 18px; text-align: center; font-size: 21px; font-style: italic; } .quote small { display: block; margin-top: 12px; font-size: 12px; opacity: 0.8; } /* ========================================================= CALL TO ACTION ========================================================= */ .cta { padding: 55px 0; color: #ffffff; background: linear-gradient(110deg,#062252,#0d59a7); } .cta-row { display: flex; align-items: center; justify-content: space-between; gap: 25px; } .cta h2 { margin: 0 0 4px; font-size: 34px; } .cta p { margin: 0; opacity: 0.9; } /* ========================================================= FOOTER ========================================================= */ .footer { padding: 45px 0 20px; color: #d5e1f1; background: #041329; } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 35px; } .footer .logo { width: 178px; height: 65px; } .footer h4 { margin: 0 0 13px; color: #ffffff; } .footer a { display: block; margin: 7px 0; color: #c8d6e9; font-size: 13px; } .footer a:hover { color: #ffffff; } .footer p { font-size: 13px; } .newsletter { display: flex; } .newsletter input { min-width: 0; flex: 1; padding: 12px; border: 0; outline: none; } .newsletter button { padding: 0 14px; color: #ffffff; background: #0870e8; border: 0; font-weight: 800; cursor: pointer; } .copyright { margin-top: 30px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.12); color: #8ea3bf; text-align: center; font-size: 12px; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1100px) { .cards { grid-template-columns: repeat(3,1fr); } .features { grid-template-columns: repeat(3,1fr); } .feature:nth-child(3) { border-right: 0; } .event-photos { grid-template-columns: repeat(3,1fr); } .event-photo img { height: 145px; } .gallery { grid-template-columns: repeat(3,1fr); } .menu { display: block; margin-left: auto; } .menu-button { display: block; } .nav.open .nav-links { display: flex; position: absolute; left: 0; right: 0; top: 78px; background: var(--navy); padding: 22px; flex-direction: column; align-items: flex-start; } } /* ========================================================= SMALL TABLET ========================================================= */ @media (max-width: 850px) { .events-layout { grid-template-columns: 1fr; } .event-photos { grid-template-columns: repeat(5,minmax(0,1fr)); } .event-photo img { height: 115px; } } /* ========================================================= MOBILE NAVIGATION ========================================================= */ /* ========================================================= MOBILE NAVIGATION ========================================================= */ @media (max-width: 760px) { .brand-text { width: 165px; height: 55px; } .brand-villagers { font-size: 25px; } .brand-ski { font-size: 17px; letter-spacing: 2px; } .nav { height: 76px; display: flex; align-items: center; } .logo { width: 220px; height: 62px; object-fit: contain; object-position: left center; } .menu-btn { display: block; margin-left: auto; } /* .nav-links { display: none; position: absolute; top: 70px; left: 0; right: 0; padding: 20px; background: #061a3b; flex-direction: column; align-items: flex-start; gap: 18px; } .nav.open .nav-links { display: flex; } */ .nav-links { display: none; } .nav.open .nav-links { display: flex; position: absolute; left: 0; right: 0; top: 78px; background: var(--navy); padding: 22px; flex-direction: column; align-items: flex-start; } /* ----------------------------------------------------- MOBILE HERO ----------------------------------------------------- */ .hero { min-height: 700px; /* Use the full photograph without cropping faces */ background-size: auto 700px; background-position: center top; background-repeat: no-repeat; } .hero-overlay { background: linear-gradient( 180deg, rgba(2,18,43,0.10) 0%, rgba(2,18,43,0.25) 30%, rgba(2,18,43,0.82) 68%, rgba(2,18,43,0.96) 100% ); } .hero-content { width: 100%; max-width: 100%; padding: 390px 22px 45px; } .hero-content h1 { font-size: 46px; line-height: 0.94; } .hero-content p { width: 100%; max-width: 500px; font-size: 17px; } .hero-buttons { display: flex; flex-direction: column; align-items: stretch; gap: 10px; } .hero .btn-primary, .hero .btn-secondary { width: 100%; margin: 0; } /* ----------------------------------------------------- MOBILE STATISTICS ----------------------------------------------------- */ .stats-box { grid-template-columns: 1fr 1fr; gap: 15px; } .stat { border-right: 0; } /* ----------------------------------------------------- MOBILE TRIP CARDS ----------------------------------------------------- */ .cards { grid-template-columns: 1fr; } /* ----------------------------------------------------- MOBILE WHY JOIN ----------------------------------------------------- */ .features { grid-template-columns: 1fr 1fr; } .feature { border-right: 0; border-bottom: 1px solid #c8d8ea; } /* ----------------------------------------------------- MOBILE EVENTS ----------------------------------------------------- */ .event-photos { grid-template-columns: 1fr 1fr; } .event-photo img { height: 160px; } /* ----------------------------------------------------- MOBILE GALLERY ----------------------------------------------------- */ .gallery { grid-template-columns: 1fr 1fr; } /* ----------------------------------------------------- MOBILE CTA ----------------------------------------------------- */ .cta-row { display: grid; grid-template-columns: 1fr; } } /* ========================================================= PHONE ========================================================= */ /* ========================================================= PHONE ========================================================= */ @media (max-width: 480px) { .container { width: 94%; } /* ----------------------------------------------------- PHONE HERO ----------------------------------------------------- */ .hero { min-height: 680px; /* Keep the entire group photo visible. The image scales to the height rather than being enlarged and cropped. */ background-size: auto 680px; background-position: center top; background-repeat: no-repeat; } .hero-content { padding-top: 360px; padding-left: 22px; padding-right: 22px; } .hero-content h1 { font-size: 40px; line-height: 0.94; } .hero-content p { font-size: 16px; } /* ----------------------------------------------------- PHONE BUTTONS ----------------------------------------------------- */ .btn { width: 100%; margin: 5px 0; text-align: center; } .btn-outline { margin-left: 0; } /* ----------------------------------------------------- PHONE STATISTICS ----------------------------------------------------- */ .stats { margin-top: -25px; } .stats-box { grid-template-columns: 1fr 1fr; padding: 16px; } .stat strong { font-size: 20px; } /* ----------------------------------------------------- PHONE TRIP CARDS ----------------------------------------------------- */ .cards { grid-template-columns: 1fr; } .card h3 { min-height: 0; } .card p { min-height: 0; } /* ----------------------------------------------------- PHONE WHY JOIN ----------------------------------------------------- */ .features { grid-template-columns: 1fr; } /* ----------------------------------------------------- PHONE EVENTS ----------------------------------------------------- */ .event-photos { grid-template-columns: 1fr 1fr; } .event-photo img { height: 145px; } /* ----------------------------------------------------- PHONE JOIN US ----------------------------------------------------- */ .join-us-head { display: block; } .outline-blue-btn { margin-top: 12px; } /* ----------------------------------------------------- PHONE GALLERY ----------------------------------------------------- */ .gallery { grid-template-columns: 1fr; } .gallery img { height: 200px; } /* ----------------------------------------------------- PHONE QUOTE ----------------------------------------------------- */ .quote { padding: 30px 22px; font-size: 18px; } /* ----------------------------------------------------- PHONE FOOTER ----------------------------------------------------- */ .footer-grid { grid-template-columns: 1fr; gap: 22px; } } /* ========================================================= EXTRA SMALL PHONES ========================================================= */ @media (max-width: 420px) { .hero { min-height: 680px; } .hero-content { padding-top: 350px; } .hero-content h1 { font-size: 40px; } .hero-content p { font-size: 16px; } } } @scope (body.page-events, body.page-membership, body.page-contact) { :root { --navy: #061a36; --blue: #1268e8; --ice: #eef5ff; --text: #10213a; --muted: #5e6c7d; --white: #fff; --shadow: 0 12px 30px rgba(6, 26, 54, 0.12); --radius: 16px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: #10213d; background: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.6; } a { text-decoration: none; color: inherit; } .container { width: min(1180px, 92%); margin: auto; } .header { position: absolute; top: 0; left: 0; right: 0; z-index: 20; background: rgba(4, 19, 45, 0.90); } .site-header { position: sticky; top: 0; z-index: 100; background: rgba(6, 26, 54, 0.98); box-shadow: 0 2px 12px #0002; } .nav { min-height: 78px; display: flex; align-items: center; gap: 28px; } .nav-links { margin-left: auto; display: flex; align-items: center; gap: 20px; white-space: nowrap; } .nav-links a { color: #ffffff; font-size: 14px; font-weight: 800; letter-spacing: 0.2px; } .nav-links a:hover, .nav-links a.active { color: #69b4ff; } .brand { font-weight: 900; font-size: 24px; line-height: 0.9; color: #fff; font-style: italic; } .brand span { display: block; font-size: 16px; } .brand-villagers { color: #ffffff; font-size: 30px; font-weight: 900; letter-spacing: -1.8px; line-height: 0.9; text-transform: uppercase; text-shadow: 2px 2px 0 #0878ee, 3px 3px 0 #0568d5, 0 5px 10px rgba(0,0,0,0.5); } .brand-ski { margin-top: 5px; color: #69b4ff; font-size: 20px; font-weight: 900; letter-spacing: 3px; line-height: 1; text-transform: uppercase; text-shadow: 0 2px 5px rgba(0,0,0,0.5); } .join { background: var(--blue); padding: 11px 19px; border-radius: 24px; } .join-btn { background: #0878ee !important; color: #ffffff !important; padding: 12px 22px; border-radius: 25px; } .join-btn:hover { background: #0568d5 !important; } .menu { display: none; color: #fff; font-size: 26px; background: none; border: 0; } .menu-btn { display: none; border: 0; background: transparent; color: #ffffff; font-size: 26px; cursor: pointer; } .hero { min-height: 560px; background: linear-gradient( 90deg, rgba(2, 17, 39, 0.86), rgba(2, 17, 39, 0.18) 62% ), url("../images/group-hero.png") center/cover no-repeat; display: flex; align-items: center; } .hero-copy { color: #fff; max-width: 560px; padding: 70px 0; } .eyebrow { color: #72b2ff; text-transform: uppercase; font-weight: 800; font-size: 13px; letter-spacing: 1.5px; } .hero h1 { font-size: clamp(48px, 7vw, 82px); line-height: 0.95; margin: 12px 0 20px; } .hero p { font-size: 20px; } .btn { display: inline-block; background: var(--blue); color: #fff; padding: 13px 22px; border-radius: 28px; font-weight: 800; margin: 8px 8px 0 0; border: 0; cursor: pointer; } .btn.alt { background: #ffffff20; border: 1px solid #fff; } .section { padding: 70px 0; } .section.ice { background: var(--ice); } .section-head { text-align: center; margin-bottom: 35px; } .section-head h2 { font-size: 38px; line-height: 1.1; margin: 8px 0; } .section-head p { color: var(--muted); max-width: 680px; margin: auto; } .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid #e5edf7; } .card-body { padding: 22px; } .card h3 { margin: 12px 0 7px; font-size: 24px; } .muted { color: var(--muted); } .tag { display: inline-block; background: #eaf2ff; color: #0757c9; font-weight: 800; font-size: 11px; padding: 5px 9px; border-radius: 12px; text-transform: uppercase; } .feature { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 28px; align-items: center; background: linear-gradient(135deg, #f8f4e7, #fff); border-radius: 22px; padding: 30px; box-shadow: var(--shadow); } .feature-art { min-height: 330px; border-radius: 18px; background: linear-gradient(135deg, #dcecff, #f9e6bc); display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 900; color: #17325d; font-size: 32px; padding: 30px; } .icons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .icon-box { text-align: center; padding: 24px; background: #fff; border-radius: 16px; } .icon { font-size: 34px; } .quote { background: var(--navy); color: #fff; border-radius: 20px; padding: 35px; font-size: 23px; text-align: center; } .gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .gallery .photo { height: 190px; border-radius: 12px; background: #d8e5f5 center/cover no-repeat; } .cta { background: linear-gradient(120deg, #061a36, #1259b8); color: #fff; text-align: center; padding: 60px 20px; } .site-footer { background: #041329; color: #dce8f8; padding: 45px 0 20px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; } .footer-grid h4 { color: #fff; margin-top: 0; } .footer-grid a { display: block; margin: 8px 0; color: #c9d8eb; } .copyright { text-align: center; border-top: 1px solid #ffffff18; margin-top: 30px; padding-top: 18px; color: #91a6c0; font-size: 13px; } .page-hero { background: linear-gradient(90deg, #061a36, #164f9b); color: #fff; padding: 75px 0; } .page-hero h1 { font-size: 52px; margin: 8px 0; } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 35px; } .form { display: grid; gap: 14px; } .form input, .form textarea { width: 100%; padding: 14px; border: 1px solid #cbd7e6; border-radius: 10px; font: inherit; } .form textarea { min-height: 150px; } .trip-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } /* ========================================================= 2027 TRIP SHOWCASE ========================================================= */ .trips-page { padding-top: 125px; padding-bottom: 90px; background: #f5f8fc; } .trips-page .section-head { max-width: 760px; margin-left: auto; margin-right: auto; margin-bottom: 45px; } .trips-page .section-head h1 { margin: 8px 0 12px; color: #09295d; font-size: 46px; line-height: 1.05; font-weight: 900; } .trip-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } /* --------------------------------------------------------- INDIVIDUAL TRIP --------------------------------------------------------- */ .trip-feature { position: relative; display: flex; min-height: 420px; overflow: hidden; color: #ffffff; border-radius: 18px; background-position: center center; background-size: cover; background-repeat: no-repeat; box-shadow: 0 12px 30px rgba(5,29,65,0.18); transition: transform 0.25s ease, box-shadow 0.25s ease; } .trip-feature:hover { transform: translateY(-6px); box-shadow: 0 18px 38px rgba(5,29,65,0.28); } /* --------------------------------------------------------- TRIP BACKGROUND IMAGES --------------------------------------------------------- */ .trip-breckenridge { background-image: url("../images/breckenridge.jpg"); } .trip-beaver { background-image: url("../images/beaver-creek.jpg"); } .trip-whistler { background-image: url("../images/whistler.jpg"); } .trip-amsterdam { background-image: url("../images/amsterdam.jpg"); } .trip-portugal { background-image: url("../images/portugal-spain.jpg"); } /* --------------------------------------------------------- IMAGE OVERLAY --------------------------------------------------------- */ .trip-feature-overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(3,20,45,0.05) 15%, rgba(3,20,45,0.20) 35%, rgba(3,20,45,0.90) 100% ); } /* --------------------------------------------------------- TRIP CONTENT --------------------------------------------------------- */ .trip-feature-content { position: relative; z-index: 2; align-self: flex-end; width: 100%; padding: 32px; } .trip-label { display: inline-block; margin-bottom: 10px; padding: 6px 11px; color: #ffffff; background: #0878ee; border-radius: 14px; font-size: 10px; font-weight: 900; letter-spacing: 1.2px; } .trip-feature h2 { margin: 0 0 5px; color: #ffffff; font-size: 36px; line-height: 1.05; font-weight: 900; text-shadow: 0 3px 8px rgba(0,0,0,0.45); } .trip-date { margin-bottom: 12px; color: #cce5ff; font-size: 13px; font-weight: 800; } .trip-feature p { max-width: 510px; margin: 0 0 20px; color: #ffffff; font-size: 14px; line-height: 1.5; } .trip-button { display: inline-block; padding: 11px 18px; color: #ffffff; border: 1px solid rgba(255,255,255,0.75); border-radius: 24px; background: rgba(255,255,255,0.12); font-size: 11px; font-weight: 900; letter-spacing: 0.3px; backdrop-filter: blur(4px); } .trip-feature:hover .trip-button { background: #0878ee; border-color: #0878ee; } /* ========================================================= TRIP DETAIL PAGE ========================================================= */ .trip-details-section { padding: 70px 0; } .trip-details-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(260px, 3fr); gap: 60px; align-items: start; } .trip-content-section { padding-bottom: 55px; margin-bottom: 55px; border-bottom: 1px solid #dbe3ee; } .trip-content-section:last-child { border-bottom: 0; } .trip-content h2 { margin: 0 0 20px; color: #09295d; font-size: 38px; line-height: 1.15; } .trip-content h3 { margin: 30px 0 15px; color: #09295d; font-size: 22px; } .trip-content p { margin: 0 0 18px; color: #5d6d83; } .trip-list { margin: 20px 0 0; padding-left: 22px; color: #5d6d83; } .trip-list li { margin-bottom: 10px; } .trip-images { display: flex; flex-direction: column; gap: 25px; } .trip-image { margin: 0; } .trip-image img { width: 100%; height: auto; display: block; } .trip-image figcaption { padding: 8px 0 0; color: #718197; font-size: 13px; } .trip-apply { padding-bottom: 0; margin-bottom: 0; } @media (max-width: 900px) { .trip-details-grid { grid-template-columns: 1fr; gap: 40px; } .trip-images { display: grid; grid-template-columns: repeat(2, 1fr); } } /* ========================================================= MEMBERSHIP / APPLICATION FORMS ========================================================= */ .form-wrap { max-width: 1000px; margin: 0 auto; padding: 70px 0 90px; } /* ========================================================= ERROR SUMMARY ========================================================= */ .error-summary { margin-bottom: 30px; padding: 20px 24px; color: #8b1e1e; background: #fff1f1; border: 1px solid #e5a7a7; border-left: 5px solid #c62828; border-radius: 10px; } .error-summary strong { display: block; margin-bottom: 8px; } .error-summary ul { margin: 0; padding-left: 20px; } /* ========================================================= FORM SECTIONS ========================================================= */ .form-section { margin-bottom: 30px; padding: 35px; background: #ffffff; border: 1px solid #dce5ef; border-radius: 16px; box-shadow: 0 8px 25px rgba(4, 29, 65, 0.06); } /* ========================================================= SECTION TITLE ========================================================= */ .section-title { display: flex; align-items: center; gap: 16px; margin-bottom: 30px; } .section-title > span { display: flex; width: 44px; height: 44px; flex-shrink: 0; align-items: center; justify-content: center; color: #ffffff; background: #0878ee; border-radius: 50%; font-size: 18px; font-weight: 800; } .section-title .eyebrow { margin-bottom: 3px; color: #0878ee; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; } .section-title h2 { margin: 0; color: #09295d; font-size: 28px; line-height: 1.2; font-weight: 800; } /* ========================================================= FORM GRID ========================================================= */ .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } /* ========================================================= FORM FIELD ========================================================= */ .field { display: flex; flex-direction: column; min-width: 0; } .field.full { grid-column: 1 / -1; } .field label { margin-bottom: 7px; color: #10213d; font-size: 14px; font-weight: 700; } .field label b, .terms-check b { color: #d32f2f; } .field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 12px 14px; color: #10213d; background: #ffffff; border: 1px solid #cbd7e6; border-radius: 8px; font-family: inherit; font-size: 16px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: #0878ee; box-shadow: 0 0 0 3px rgba(8, 120, 238, 0.12); } .field input::placeholder { color: #8a9aae; } .field-error { display: block; min-height: 18px; margin-top: 5px; color: #c62828; font-size: 12px; } /* ========================================================= TERMS BOX ========================================================= */ .terms-box { padding: 25px; color: #52647a; background: #f5f8fc; border: 1px solid #dce5ef; border-radius: 10px; } .terms-box h3 { margin: 0 0 12px; color: #09295d; font-size: 20px; } .terms-box h3:not(:first-child) { margin-top: 28px; } .terms-box p { margin: 0 0 16px; line-height: 1.7; } .terms-box p:last-child { margin-bottom: 0; } .terms-box strong { color: #10213d; } /* ========================================================= TERMS ACCEPTANCE ========================================================= */ .terms-check { display: flex; align-items: flex-start; gap: 12px; margin-top: 25px; } .terms-check input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: #0878ee; } .terms-check label { color: #10213d; line-height: 1.5; cursor: pointer; } .terms-check .field-error { width: 100%; } /* ========================================================= FORM ACTIONS ========================================================= */ .form-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 10px; } .form-actions p { margin: 0; color: #5d6d83; font-size: 14px; } .form-actions .primary-button { margin-top: 0; border: 0; cursor: pointer; } /* ========================================================= MEMBERSHIP PAGE SPECIFIC ========================================================= */ .page-membership main { background: #f5f8fc; } .page-membership .page-hero { padding-top: 150px; padding-bottom: 70px; } /* ========================================================= TRIP PAGE RESPONSIVE ========================================================= */ @media (max-width: 850px) { .trip-showcase { grid-template-columns: 1fr; } .trip-feature { min-height: 400px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 760px) { .form-wrap { padding-top: 45px; padding-bottom: 60px; } .form-section { padding: 25px; } .form-grid { grid-template-columns: 1fr; } .field.full { grid-column: auto; } .section-title h2 { font-size: 24px; } } @media (max-width: 600px) { .trip-details-section { padding: 50px 0; } .trip-content-section { padding-bottom: 40px; margin-bottom: 40px; } .trip-content h2 { font-size: 30px; } .trip-images { grid-template-columns: 1fr; } .trips-page { padding-top: 105px; padding-bottom: 60px; } .trips-page .section-head h1 { font-size: 36px; } .trip-feature { min-height: 430px; } .trip-feature-content { padding: 25px; } .trip-feature h2 { font-size: 30px; } .trip-feature p { font-size: 13px; } } @media (max-width: 420px) { .trip-feature { min-height: 450px; } .trip-feature-content { padding: 22px; } .trip-feature h2 { font-size: 27px; } } @media (max-width: 800px) { .nav-links { display: none; } .menu { display: block; margin-left: auto; } .menu-button { display: block; } .nav.open .nav-links { display: flex; position: absolute; left: 0; right: 0; top: 78px; background: var(--navy); padding: 22px; flex-direction: column; align-items: flex-start; } .cards, .trip-list, .two-col, .feature { grid-template-columns: 1fr; } .icons { grid-template-columns: 1fr 1fr; } .gallery { grid-template-columns: 1fr 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } .hero h1 { font-size: 52px; } .brand-villagers { font-size: 25px; } } @media (max-width: 480px) { .icons, .gallery, .footer-grid { grid-template-columns: 1fr; } .section { padding: 50px 0; } .form-wrap { width: 92%; } .form-section { padding: 20px; border-radius: 12px; } .section-title { align-items: flex-start; } .section-title > span { width: 38px; height: 38px; font-size: 16px; } .section-title h2 { font-size: 22px; } .form-actions { flex-direction: column; align-items: stretch; } .form-actions .primary-button { width: 100%; } .terms-box { padding: 20px; } } @scope (body.page-about) { /* ========================================================= VILLAGERS SKI CLUB ABOUT PAGE ========================================================= */ /* ========================================================= RESET ========================================================= */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: #10213d; background: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.6; } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } .container { width: 92%; max-width: 1220px; margin-left: auto; margin-right: auto; } /* ========================================================= HEADER / NAVIGATION ========================================================= */ .header { position: absolute; top: 0; left: 0; right: 0; z-index: 20; background: rgba(4, 19, 45, 0.90); } .nav { height: 96px; display: flex; align-items: center; gap: 20px; } .logo { width: 300px; height: 85px; object-fit: contain; object-position: left center; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.40)); flex-shrink: 0; } .nav-links { margin-left: auto; display: flex; align-items: center; gap: 20px; white-space: nowrap; } .nav-links a { color: #ffffff; font-size: 14px; font-weight: 800; letter-spacing: 0.2px; } .nav-links a:hover, .nav-links a.active { color: #69b4ff; } .join-btn { background: #0878ee !important; color: #ffffff !important; padding: 12px 22px; border-radius: 25px; } .join-btn:hover { background: #0568d5 !important; } .menu { display: none; color: #fff; font-size: 26px; background: none; border: 0; } .menu-btn { display: none; border: 0; background: transparent; color: #ffffff; font-size: 26px; cursor: pointer; } .brand-villagers { color: #ffffff; font-size: 30px; font-weight: 900; letter-spacing: -1.8px; line-height: 0.9; text-transform: uppercase; text-shadow: 2px 2px 0 #0878ee, 3px 3px 0 #0568d5, 0 5px 10px rgba(0,0,0,0.5); } .site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 50; background: rgba(4, 19, 45, 0.94); } .header-inner { width: 92%; max-width: 1220px; height: 78px; margin: 0 auto; display: flex; align-items: center; gap: 25px; } /* LOGO */ .site-brand { display: flex; flex-direction: column; justify-content: center; color: #ffffff; line-height: 0.9; white-space: nowrap; } .site-brand span { font-size: 25px; font-weight: 900; letter-spacing: 1.5px; } .site-brand strong { margin-top: 4px; color: #69b4ff; font-size: 13px; font-weight: 900; letter-spacing: 3px; } /* JOIN BUTTON */ .join-button { padding: 11px 20px; color: #ffffff !important; background: #0878ee; border-radius: 24px; font-size: 12px !important; font-weight: 900 !important; } .join-button:hover { background: #0568d5; } /* MOBILE MENU BUTTON */ .menu-button { display: none; margin-left: auto; color: #ffffff; background: transparent; border: 0; font-size: 29px; cursor: pointer; } /* ========================================================= COMPACT PAGE HEADER ========================================================= */ .page-header { position: relative; padding-top: 130px; padding-bottom: 55px; color: #ffffff; background: linear-gradient( 110deg, #061a3b 0%, #09295d 55%, #0d4389 100% ); } .page-header .container { position: relative; z-index: 2; } /* EYEBROW */ .eyebrow { margin-bottom: 9px; color: #0878ee; font-size: 12px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; } .page-header .eyebrow { color: #69b4ff; } /* PAGE TITLE */ .page-header h1 { margin: 0 0 12px; color: #ffffff; font-size: 54px; line-height: 1; font-weight: 900; letter-spacing: -1px; } /* PAGE DESCRIPTION */ .page-header p { max-width: 800px; margin: 0; color: rgba(255,255,255,0.92); font-size: 18px; line-height: 1.5; } /* ========================================================= ABOUT SECTION ========================================================= */ .about-section { padding: 80px 0; background: #ffffff; } .about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 65px; align-items: center; } /* ========================================================= ABOUT TEXT ========================================================= */ .about-content h2, .history-content h2 { margin: 0 0 20px; color: #09295d; font-size: 38px; line-height: 1.12; font-weight: 900; } .about-content p, .history-content p { margin: 0 0 18px; color: #5d6d83; font-size: 16px; line-height: 1.7; } /* ========================================================= PRIMARY BUTTON ========================================================= */ .primary-button { display: inline-block; margin-top: 10px; padding: 14px 23px; color: #ffffff; background: #0878ee; border-radius: 26px; font-size: 12px; font-weight: 900; letter-spacing: 0.3px; transition: background 0.2s ease, transform 0.2s ease; } .primary-button:hover { background: #0568d5; transform: translateY(-2px); } /* ========================================================= IMAGE PLACEHOLDER ========================================================= */ .image-placeholder { width: 100%; min-height: 390px; overflow: hidden; } .image-placeholder img { display: block; width: 100%; height: 390px; object-fit: cover; object-position: center center; } .placeholder-content { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #5d6d83; } .placeholder-icon { margin-bottom: 12px; font-size: 42px; opacity: 0.65; } .placeholder-content strong { color: #09295d; font-size: 15px; letter-spacing: 1px; } .placeholder-content span { margin-top: 4px; font-size: 12px; color: #718197; } /* ========================================================= HISTORY SECTION ========================================================= */ .history-section { padding: 80px 0; background: #eaf4ff; } .history-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 65px; align-items: center; } /* HISTORY IMAGE */ .history-image { min-height: 390px; } /* ========================================================= FOOTER ========================================================= */ .site-footer { padding: 45px 0 20px; color: #d5e1f1; background: #041329; } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 35px; } /* FOOTER BRAND */ .footer-logo { display: flex; flex-direction: column; margin-bottom: 15px; color: #ffffff; font-size: 25px; font-weight: 900; line-height: 0.9; letter-spacing: 1.5px; } .footer-logo strong { margin-top: 5px; color: #69b4ff; font-size: 13px; letter-spacing: 3px; } .footer-brand p { margin: 0; color: #9fb1c9; font-size: 13px; } /* FOOTER LINKS */ .site-footer h4 { margin: 0 0 13px; color: #ffffff; font-size: 14px; } .site-footer a { display: block; margin: 7px 0; color: #c8d6e9; font-size: 13px; } .site-footer a:hover { color: #ffffff; } /* COPYRIGHT */ .copyright { margin-top: 30px; padding-top: 18px; color: #8ea3bf; border-top: 1px solid rgba(255,255,255,0.12); text-align: center; font-size: 12px; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1050px) { .brand-villagers { font-size: 25px; } .about-grid, .history-grid { gap: 40px; } .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; } } /* ========================================================= MOBILE NAVIGATION ========================================================= */ @media (max-width: 760px) { .header { position: absolute; } .nav { height: 70px; position: relative; display: flex; align-items: center; } .brand-villagers { font-size: 22px; white-space: nowrap; } /* Show hamburger */ .menu { display: block; margin-left: auto; color: #ffffff; background: transparent; border: 0; font-size: 30px; line-height: 1; cursor: pointer; } /* Hide navigation by default */ .nav-links { display: none; position: absolute; top: 70px; left: 0; right: 0; margin: 0; padding: 20px; background: #061a3b; flex-direction: column; align-items: flex-start; gap: 17px; z-index: 100; } /* JavaScript adds .open to .nav */ .nav.open .nav-links { display: flex; } .nav-links a { width: 100%; color: #ffffff; font-size: 14px; } .join-btn { width: auto; margin-top: 5px; } /* PAGE HEADER */ .page-header { padding-top: 105px; padding-bottom: 40px; } .page-header h1 { font-size: 44px; } .page-header p { font-size: 16px; } /* BODY */ .about-grid, .history-grid { grid-template-columns: 1fr; gap: 40px; } .about-section, .history-section { padding: 60px 0; } .about-content h2, .history-content h2 { font-size: 32px; } /* IMAGES */ .image-placeholder { min-height: 300px; } .image-placeholder img { height: 300px; } /* FOOTER */ .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; } } /* ========================================================= PHONE ========================================================= */ @media (max-width: 480px) { .container { width: 94%; } .nav { height: 68px; } .brand-villagers { font-size: 19px; letter-spacing: -1px; } .menu { font-size: 28px; } .nav-links { top: 68px; } /* PAGE HEADER */ .page-header { padding-top: 95px; padding-bottom: 35px; } .page-header h1 { font-size: 38px; } .page-header p { font-size: 15px; } /* BODY */ .about-section, .history-section { padding: 50px 0; } .about-content h2, .history-content h2 { font-size: 29px; } .about-content p, .history-content p { font-size: 15px; } /* BUTTON */ .primary-button { width: 100%; text-align: center; } /* IMAGES */ .image-placeholder { min-height: 250px; } .image-placeholder img { height: 250px; } /* FOOTER */ .footer-grid { grid-template-columns: 1fr; gap: 22px; } } } @scope (body.page-trips) { /* ========================================================= VILLAGERS SKI CLUB 2027 TRIPS PAGE FULL-WIDTH FEATURE DESIGN ========================================================= */ /* ========================================================= RESET ========================================================= */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; padding: 0; color: #10213d; background: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.5; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } .container { width: 92%; max-width: 1220px; margin-left: auto; margin-right: auto; } /* ========================================================= HEADER ========================================================= */ .header { position: absolute; top: 0; left: 0; right: 0; z-index: 20; background: rgba(4, 19, 45, 0.90); } .nav-links { margin-left: auto; display: flex; align-items: center; gap: 20px; white-space: nowrap; } .nav-links a { color: #ffffff; font-size: 14px; font-weight: 800; letter-spacing: 0.2px; } .nav-links a:hover, .nav-links a.active { color: #69b4ff; } .join-btn { background: #0878ee !important; color: #ffffff !important; padding: 12px 22px; border-radius: 25px; } .join-btn:hover { background: #0568d5 !important; } .menu { display: none; color: #fff; font-size: 26px; background: none; border: 0; } .menu-btn { display: none; border: 0; background: transparent; color: #ffffff; font-size: 26px; cursor: pointer; } .brand-villagers { color: #ffffff; font-size: 30px; font-weight: 900; letter-spacing: -1.8px; line-height: 0.9; text-transform: uppercase; text-shadow: 2px 2px 0 #0878ee, 3px 3px 0 #0568d5, 0 5px 10px rgba(0,0,0,0.5); } .site-header { position: relative; z-index: 20; width: 100%; background: #071d3d; border-bottom: 1px solid rgba(255,255,255,0.08); } .header-inner { width: 92%; max-width: 1220px; min-height: 78px; margin-left: auto; margin-right: auto; display: flex; align-items: center; gap: 25px; } /* BRAND */ .site-brand { width: 190px; display: flex; flex-direction: column; color: #ffffff; font-style: italic; line-height: 0.88; letter-spacing: -0.5px; } .site-brand span { display: block; font-size: 25px; font-weight: 900; } .site-brand strong { display: block; margin-top: 3px; font-size: 17px; font-weight: 900; } /* JOIN */ .join-button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 21px; color: #ffffff !important; background: #0878ee; border-radius: 24px; font-size: 12px !important; font-weight: 900 !important; box-shadow: 0 6px 15px rgba(0,80,190,0.25); } .join-button:hover { color: #ffffff !important; background: #0568d5; } /* MOBILE MENU */ .menu-button { display: none; margin-left: auto; padding: 5px 9px; color: #ffffff; background: transparent; border: 0; font-size: 29px; cursor: pointer; } /* ========================================================= HERO ========================================================= */ .trips-hero { position: relative; min-height: 360px; display: flex; align-items: center; overflow: hidden; background: linear-gradient( 110deg, #061a3b 0%, #0a2c5e 50%, #1757a0 100% ); } /* Decorative light */ .trips-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at 80% 25%, rgba(105,180,255,0.24), transparent 35% ); pointer-events: none; } /* Overlay */ .hero-overlay { position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(2,18,43,0.55), rgba(2,18,43,0.05) ); } /* Hero content */ .hero-content { position: relative; z-index: 2; padding-top: 70px; padding-bottom: 70px; color: #ffffff; } /* Eyebrow */ .eyebrow { margin-bottom: 10px; color: #69b4ff; font-size: 12px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; } /* Hero title */ .trips-hero h1 { margin: 0 0 8px; color: #ffffff; font-size: 62px; line-height: 0.95; font-weight: 900; letter-spacing: -1.5px; } /* Hero subtitle */ .trips-hero h2 { margin: 0 0 17px; color: #ffffff; font-size: 37px; line-height: 1.1; font-weight: 800; } /* Hero paragraph */ .trips-hero p { max-width: 780px; margin: 0; color: rgba(255,255,255,0.9); font-size: 16px; line-height: 1.65; } /* ========================================================= TRIPS SECTION ========================================================= */ .trips-section { padding: 80px 0 90px; background: #ffffff; } /* Section heading */ .section-heading { max-width: 760px; margin: 0 auto 55px; text-align: center; } .section-heading .eyebrow { color: #0878ee; } .section-heading h2 { margin: 0 0 13px; color: #09295d; font-size: 38px; line-height: 1.1; font-weight: 900; } .section-heading p { max-width: 720px; margin: 0 auto; color: #62738a; font-size: 15px; line-height: 1.65; } /* ========================================================= TRIP FEATURE ========================================================= */ .trip-feature { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); min-height: 440px; margin-bottom: 32px; overflow: hidden; background: #ffffff; border: 1px solid #dfe7f0; border-radius: 20px; box-shadow: 0 14px 35px rgba(5,29,65,0.11); transition: transform 0.25s ease, box-shadow 0.25s ease; } .trip-feature:hover { transform: translateY(-3px); box-shadow: 0 20px 42px rgba(5,29,65,0.15); } /* ========================================================= REVERSE LAYOUT ========================================================= */ .trip-feature.reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); } .trip-feature.reverse .trip-feature-image { order: 2; } .trip-feature.reverse .trip-feature-content { order: 1; } /* ========================================================= LARGE TRIP IMAGE ========================================================= */ .trip-feature-image { position: relative; min-width: 0; min-height: 440px; overflow: hidden; background: #dfe8f2; } /* LARGE IMAGES These images are intentionally NOT constrained to a small card size. You can now use high-quality wide photographs. */ .trip-feature-image img { width: 100%; height: 100%; min-height: 440px; object-fit: cover; object-position: center center; transition: transform 0.5s ease; } .trip-feature:hover .trip-feature-image img { transform: scale(1.025); } /* Image darkening */ .trip-feature-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(0,0,0,0.02) 40%, rgba(2,18,43,0.45) 100% ); pointer-events: none; } /* ========================================================= IMAGE LABEL ========================================================= */ .image-label { position: absolute; left: 24px; bottom: 22px; z-index: 3; padding: 7px 13px; color: #0765d4; background: #ffffff; border-radius: 20px; font-size: 10px; font-weight: 900; letter-spacing: 1px; box-shadow: 0 6px 15px rgba(0,0,0,0.15); } /* GREEN */ .image-label.green { color: #087a52; background: #e7f8ef; } /* PURPLE */ .image-label.purple { color: #7134a4; background: #f2e9ff; } /* ========================================================= TRIP CONTENT ========================================================= */ .trip-feature-content { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 55px 55px 55px 50px; } /* ========================================================= TRIP NUMBER ========================================================= */ .trip-number { margin-bottom: 12px; color: #0878ee; font-size: 13px; font-weight: 900; letter-spacing: 2px; } .trip-green .trip-number { color: #087a52; } .trip-purple .trip-number { color: #7134a4; } /* ========================================================= TRIP TITLE ========================================================= */ .trip-feature-content h2 { margin: 0 0 8px; color: #09295d; font-size: 36px; line-height: 1.05; font-weight: 900; letter-spacing: -0.5px; } /* ========================================================= DATE ========================================================= */ .trip-date { margin-bottom: 22px; color: #0878ee; font-size: 13px; font-weight: 900; } .trip-green .trip-date { color: #087a52; } .trip-purple .trip-date { color: #7134a4; } /* ========================================================= LEAD PARAGRAPH ========================================================= */ .trip-lead { margin: 0 0 12px; color: #263d5d; font-size: 18px; line-height: 1.5; font-weight: 700; } /* Regular paragraph */ .trip-feature-content p:not(.trip-lead) { margin: 0 0 22px; color: #61728a; font-size: 14px; line-height: 1.65; } /* ========================================================= HIGHLIGHTS ========================================================= */ .trip-highlights { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 25px; } .trip-highlights span { display: inline-flex; align-items: center; padding: 7px 10px; color: #294563; background: #eef5fc; border-radius: 15px; font-size: 10px; font-weight: 800; } /* ========================================================= TRIP BUTTON ========================================================= */ .trip-button { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 43px; padding: 0 20px; color: #ffffff; background: #0878ee; border-radius: 23px; font-size: 11px; font-weight: 900; letter-spacing: 0.2px; box-shadow: 0 7px 17px rgba(0,100,220,0.22); transition: transform 0.2s ease, background 0.2s ease; } .trip-button span { font-size: 16px; } .trip-button:hover { background: #0568d5; transform: translateY(-2px); } /* GREEN BUTTON */ .green-button { background: #087a52; box-shadow: 0 7px 17px rgba(0,110,70,0.20); } .green-button:hover { background: #066b46; } /* PURPLE BUTTON */ .purple-button { background: #7134a4; box-shadow: 0 7px 17px rgba(95,35,145,0.20); } .purple-button:hover { background: #5f2b8c; } /* ========================================================= WHY SECTION ========================================================= */ .why-section { padding: 80px 0; background: #eaf4ff; } .why-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; margin-top: 38px; } .why-card { padding: 30px 20px; background: #ffffff; border: 1px solid #dce7f3; border-radius: 15px; text-align: center; box-shadow: 0 8px 22px rgba(8,36,73,0.07); } .why-icon { width: 58px; height: 58px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; color: #0878ee; background: #eaf4ff; border: 2px solid #8dc4ff; border-radius: 50%; font-size: 25px; } .why-card h3 { margin: 0 0 7px; color: #09295d; font-size: 16px; font-weight: 900; } .why-card p { margin: 0; color: #64758a; font-size: 12px; line-height: 1.55; } /* ========================================================= CTA ========================================================= */ .trip-cta { padding: 60px 0; color: #ffffff; background: linear-gradient( 110deg, #062252, #0d59a7 ); } .cta-content { display: flex; align-items: center; justify-content: space-between; gap: 30px; } .cta-content .eyebrow { margin-bottom: 8px; color: #69b4ff; } .cta-content h2 { margin: 0 0 7px; color: #ffffff; font-size: 34px; line-height: 1.1; font-weight: 900; } .cta-content p { margin: 0; color: rgba(255,255,255,0.88); font-size: 15px; } .cta-button { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 23px; color: #0765d4; background: #ffffff; border-radius: 25px; font-size: 11px; font-weight: 900; box-shadow: 0 8px 20px rgba(0,0,0,0.18); } .cta-button:hover { background: #edf6ff; transform: translateY(-2px); } /* ========================================================= FOOTER ========================================================= */ .site-footer { padding: 48px 0 20px; color: #d4e0ef; background: #041329; } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 35px; } .footer-logo { margin-bottom: 13px; color: #ffffff; font-size: 24px; font-weight: 900; font-style: italic; line-height: 0.9; } .footer-logo strong { display: block; font-size: 16px; } .footer-brand p { margin: 0; color: #9db0c8; font-size: 13px; line-height: 1.6; } .site-footer h4 { margin: 0 0 13px; color: #ffffff; font-size: 12px; font-weight: 900; letter-spacing: 0.5px; } .site-footer a { display: block; margin: 7px 0; color: #bdcce0; font-size: 13px; } .site-footer a:hover { color: #69b4ff; } .copyright { margin-top: 35px; padding-top: 18px; color: #8195af; border-top: 1px solid rgba(255,255,255,0.10); text-align: center; font-size: 11px; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1000px) { .nav-links { gap: 15px; } .nav-links a { font-size: 10px; } .trip-feature { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } .trip-feature.reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } .trip-feature-content { padding: 40px 35px; } .trip-feature-content h2 { font-size: 30px; } .trip-lead { font-size: 16px; } .why-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } /* ========================================================= MOBILE NAVIGATION ========================================================= */ @media (max-width: 760px) { .header-inner { min-height: 70px; } .site-brand { width: auto; } .site-brand span { font-size: 22px; } .site-brand strong { font-size: 15px; } .nav { height: 70px; position: relative; display: flex; align-items: center; } .brand-villagers { font-size: 22px; white-space: nowrap; } /* Show hamburger */ .menu { display: block; margin-left: auto; color: #ffffff; background: transparent; border: 0; font-size: 30px; line-height: 1; cursor: pointer; } /* Hide navigation by default */ .nav-links { display: none; position: absolute; top: 70px; left: 0; right: 0; margin: 0; padding: 20px; background: #061a3b; flex-direction: column; align-items: flex-start; gap: 17px; z-index: 100; } /* JavaScript adds .open to .nav */ .nav.open .nav-links { display: flex; } .nav-links a { width: 100%; color: #ffffff; font-size: 14px; } .join-btn { width: auto; margin-top: 5px; } /* HERO */ .trips-hero { min-height: 390px; } .hero-content { padding-top: 55px; padding-bottom: 55px; } .trips-hero h1 { font-size: 46px; } .trips-hero h2 { font-size: 29px; } .trips-hero p { font-size: 14px; } /* TRIPS */ .trips-section { padding: 60px 0 70px; } .section-heading { margin-bottom: 38px; } .section-heading h2 { font-size: 30px; } /* ONE COLUMN Each trip becomes its own full-width feature on mobile. */ .trip-feature, .trip-feature.reverse { display: flex; flex-direction: column; min-height: 0; margin-bottom: 25px; } /* Always put the image first on mobile. */ .trip-feature-image, .trip-feature.reverse .trip-feature-image { order: 1; width: 100%; min-height: 280px; height: 280px; } .trip-feature-image img { width: 100%; height: 280px; min-height: 280px; object-fit: cover; } /* Content below image. */ .trip-feature-content, .trip-feature.reverse .trip-feature-content { order: 2; padding: 32px 28px 35px; } .trip-feature-content h2 { font-size: 30px; } .trip-lead { font-size: 17px; } /* WHY */ .why-section { padding: 60px 0; } .why-grid { grid-template-columns: 1fr 1fr; gap: 14px; } /* CTA */ .cta-content { display: grid; grid-template-columns: 1fr; gap: 22px; } .cta-content h2 { font-size: 29px; } .cta-button { justify-self: start; } /* FOOTER */ .footer-grid { grid-template-columns: 1fr; gap: 25px; } } /* ========================================================= PHONE ========================================================= */ @media (max-width: 480px) { .container { width: 94%; } /* HERO */ .trips-hero { min-height: 400px; } .trips-hero h1 { font-size: 42px; } .trips-hero h2 { font-size: 26px; } .trips-hero p { font-size: 14px; } /* SECTION */ .section-heading h2 { font-size: 27px; } /* LARGE MOBILE PHOTOS Still substantially larger than the original card design. */ .trip-feature-image, .trip-feature.reverse .trip-feature-image { height: 240px; min-height: 240px; } .trip-feature-image img { height: 240px; min-height: 240px; } /* CONTENT */ .trip-feature-content, .trip-feature.reverse .trip-feature-content { padding: 29px 22px 32px; } .trip-feature-content h2 { font-size: 27px; } .trip-lead { font-size: 16px; } .trip-feature-content p:not(.trip-lead) { font-size: 13px; } /* HIGHLIGHTS */ .trip-highlights { display: block; } .trip-highlights span { display: inline-flex; margin: 0 4px 6px 0; } /* BUTTON */ .trip-button { width: 100%; } /* WHY */ .why-grid { grid-template-columns: 1fr; } /* CTA */ .cta-content h2 { font-size: 26px; } .cta-button { width: 100%; } } /* ========================================================= EXTRA SMALL PHONES ========================================================= */ @media (max-width: 380px) { .trips-hero h1 { font-size: 38px; } .trips-hero h2 { font-size: 24px; } .trip-feature-image, .trip-feature.reverse .trip-feature-image { height: 215px; min-height: 215px; } .trip-feature-image img { height: 215px; min-height: 215px; } .trip-feature-content h2 { font-size: 25px; } } } @scope (body.page-trip-detail) { /* ========================================================= ROOT ========================================================= */ :root { --navy: #082a4b; --blue: #0d5f9e; --light-blue: #eaf4fb; --gold: #d99b2b; --dark: #15212b; --text: #46515a; --light: #f6f8fa; --white: #ffffff; --container: 1200px; } /* ========================================================= RESET ========================================================= */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: Arial, Helvetica, sans-serif; color: var(--text); line-height: 1.65; background: var(--white); } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } .container { width: min(1180px, 92%); margin: auto; } .header { position: absolute; top: 0; left: 0; right: 0; z-index: 20; background: rgba(4, 19, 45, 0.90); } .site-header { position: sticky; top: 0; z-index: 100; background: rgba(6, 26, 54, 0.98); box-shadow: 0 2px 12px #0002; } .nav { min-height: 78px; display: flex; align-items: center; gap: 28px; } .nav-links { margin-left: auto; display: flex; align-items: center; gap: 20px; white-space: nowrap; } .nav-links a { color: #ffffff; font-size: 14px; font-weight: 800; letter-spacing: 0.2px; } .nav-links a:hover, .nav-links a.active { color: #69b4ff; } .brand { font-weight: 900; font-size: 24px; line-height: 0.9; color: #fff; font-style: italic; } .brand span { display: block; font-size: 16px; } .brand-villagers { color: #ffffff; font-size: 30px; font-weight: 900; letter-spacing: -1.8px; line-height: 0.9; text-transform: uppercase; text-shadow: 2px 2px 0 #0878ee, 3px 3px 0 #0568d5, 0 5px 10px rgba(0,0,0,0.5); } .brand-ski { margin-top: 5px; color: #69b4ff; font-size: 20px; font-weight: 900; letter-spacing: 3px; line-height: 1; text-transform: uppercase; text-shadow: 0 2px 5px rgba(0,0,0,0.5); } .join { background: var(--blue); padding: 11px 19px; border-radius: 24px; } .join-btn { background: #0878ee !important; color: #ffffff !important; padding: 12px 22px; border-radius: 25px; } .join-btn:hover { background: #0568d5 !important; } .menu { display: none; color: #fff; font-size: 26px; background: none; border: 0; } .menu-btn { display: none; border: 0; background: transparent; color: #ffffff; font-size: 26px; cursor: pointer; } .trip-details-section { padding: 70px 0 90px; background: #ffffff; } .trip-details-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr); gap: 55px; align-items: start; } .trip-content { min-width: 0; } .trip-content-section { padding-bottom: 45px; margin-bottom: 45px; border-bottom: 1px solid #dbe3ed; } .trip-content-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .trip-content-section h2 { margin: 0 0 20px; color: #09295d; font-size: 38px; line-height: 1.15; font-weight: 900; } .trip-content-section h3 { margin: 28px 0 15px; color: #09295d; font-size: 22px; line-height: 1.3; font-weight: 800; } .trip-content-section p { margin: 0 0 18px; color: #5d6d83; font-size: 16px; line-height: 1.7; } .trip-list { margin: 20px 0 0; padding-left: 22px; } .trip-list li { margin-bottom: 10px; color: #5d6d83; line-height: 1.6; } /* RIGHT COLUMN */ .trip-images { min-width: 0; display: flex; flex-direction: column; gap: 25px; } .trip-image { margin: 0; overflow: hidden; background: #f4f7fb; border-radius: 12px; box-shadow: 0 8px 25px rgba(9, 41, 93, 0.12); } .trip-image img { display: block; width: 100%; height: 230px; object-fit: cover; } .trip-image figcaption { padding: 12px 15px; color: #5d6d83; font-size: 13px; background: #ffffff; } /* ========================================================= TRIP HERO IMAGE ========================================================= */ .trip-image-hero { width: 100%; height: 500px; overflow: hidden; } .trip-image-hero img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; } /* ========================================================= TRIP INTRO ========================================================= */ .trip-intro { padding: 60px 0 70px; text-align: center; background: #ffffff; } .trip-intro-content { max-width: 850px; margin: 0 auto; } .trip-intro .eyebrow { margin-bottom: 12px; } .trip-intro h1 { margin: 0; } .trip-tagline { margin: 15px 0 20px; font-size: 1.25rem; } .trip-date { font-size: 1.3rem; font-weight: 700; margin-bottom: 8px; } .trip-location { font-size: 1.05rem; margin-bottom: 30px; } .trip-intro-actions { display: flex; flex-direction: column; align-items: center; gap: 18px; } .back-link { text-decoration: none; } /* ========================================================= HERO ========================================================= */ .trip-hero { min-height: 620px; position: relative; display: flex; align-items: center; overflow: hidden; background: var(--navy); } .hero-placeholder { height: 100%; min-height: 620px; } .trip-hero-overlay { position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(4, 24, 43, .88), rgba(4, 24, 43, .50), rgba(4, 24, 43, .18) ); } .trip-hero-content { position: relative; z-index: 2; top: 15px; color: white; } .trip-badge { display: inline-block; background: var(--gold); padding: 6px 14px; font-size: 12px; font-weight: 800; letter-spacing: 1px; margin-bottom: 20px; } .trip-hero-image { width: 100%; height: 100%; overflow: hidden; } .trip-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; } .trip-hero h1 { font-size: clamp( 42px, 7vw, 82px ); line-height: 1; margin: 0 0 15px; letter-spacing: -2px; } .trip-hero h2 { font-size: clamp( 24px, 3vw, 38px ); font-weight: 400; margin: 0 0 30px; } .hero-date { font-size: 22px; font-weight: 700; margin: 0; } .hero-location { font-size: 18px; opacity: .9; } .hero-buttons { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 35px; } /* ========================================================= BUTTONS ========================================================= */ .primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; font-weight: 800; letter-spacing: .4px; transition: transform .2s ease, opacity .2s ease; } .primary-button { background: var(--gold); color: white; } .secondary-button { border: 2px solid white; color: white; } .primary-button:hover, .secondary-button:hover { transform: translateY(-2px); } .primary-button.large { padding: 0 32px; min-height: 58px; } /* ========================================================= GENERAL SECTIONS ========================================================= */ .content-section, .rooms-section, .pass-section { padding: 100px 0; } .mountains-section, .activities-section, .register-section { padding: 100px 0; background: var(--light); } .section-heading { margin-bottom: 55px; } .section-heading.center { text-align: center; } .eyebrow { color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: 1.8px; margin-bottom: 12px; } .section-heading h2, .content-copy h2 { color: var(--navy); font-size: clamp( 32px, 4vw, 52px ); line-height: 1.1; margin: 0; } .section-heading.light h2 { color: white; } .split-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; } .split-layout.reverse { direction: rtl; } .split-layout.reverse > * { direction: ltr; } .content-copy p { font-size: 17px; margin-top: 0; } /* ========================================================= IMAGE THUMBNAILS ========================================================= */ .image-thumbnail { position: relative; overflow: hidden; border-radius: 8px; background: #dce5eb; cursor: pointer; } .image-thumbnail img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .35s ease; } .image-thumbnail:hover img { transform: scale(1.05); } .image-thumbnail::after { content: "CLICK TO ENLARGE"; position: absolute; left: 0; right: 0; bottom: 0; padding: 9px; background: rgba(0, 0, 0, .65); color: white; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 1px; opacity: 0; transition: opacity .2s ease; } .image-thumbnail:hover::after { opacity: 1; } /* ========================================================= PLACEHOLDER ========================================================= */ .image-placeholder { width: 100%; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; text-align: center; background: linear-gradient( 135deg, #7892a6, #324d63 ); color: white; font-weight: 800; letter-spacing: 2px; } /* ========================================================= OVERVIEW ========================================================= */ .trip-overview { padding: 80px 0; background: var(--light-blue); } .overview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .overview-card { background: white; padding: 25px; border-radius: 6px; border: 1px solid #dde7ee; } .overview-label { display: block; color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: 1.4px; margin-bottom: 7px; } /* ========================================================= MOUNTAINS ========================================================= */ .mountain-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; } .mountain-card { background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, .06); } .mountain-content { padding: 35px; } .mountain-content h3 { color: var(--navy); font-size: 28px; margin-top: 0; } .mountain-content ul { padding-left: 20px; } /* ========================================================= NUMBERS ========================================================= */ .numbers-section { padding: 100px 0; background: var(--navy); } .numbers-section .eyebrow { color: #7ec3f2; } .numbers-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 25px; text-align: center; color: white; } .numbers-grid strong { display: block; color: var(--gold); font-size: 45px; line-height: 1; margin-bottom: 12px; } .numbers-grid span { font-size: 14px; } /* ========================================================= HOTEL ========================================================= */ .feature-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 25px; margin-top: 25px; font-weight: 600; } /* ========================================================= AMENITIES ========================================================= */ .amenities-list { padding-left: 20px; } .amenities-list li { margin-bottom: 8px; } /* ========================================================= ACTIVITIES ========================================================= */ .activities-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; } .activity-card { background: white; border-radius: 8px; overflow: hidden; padding-bottom: 25px; } .activity-card h3 { color: var(--navy); margin: 22px 22px 8px; } .activity-card p { margin: 0 22px; font-size: 15px; } /* ========================================================= COST ========================================================= */ .cost-section { padding: 100px 0; background: var(--white); } .price-display { text-align: center; margin-bottom: 55px; } .price-display span { display: block; color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: 1.5px; } .price-display strong { display: block; color: var(--navy); font-size: clamp( 60px, 10vw, 100px ); line-height: 1; } .included-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; } .included-box { padding: 40px; border-radius: 8px; background: var(--light-blue); } .included-box.not-included { background: #f5f5f5; } .included-box h3 { color: var(--navy); font-size: 25px; margin-top: 0; } .included-box ul { padding-left: 20px; } .included-box li { margin-bottom: 8px; } .cost-note { text-align: center; margin-top: 30px; font-style: italic; } /* ========================================================= EPIC PASS ========================================================= */ .pass-section { background: var(--light); } .text-link { color: var(--blue); font-weight: 800; } /* ========================================================= REGISTRATION ========================================================= */ .steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .step { background: white; padding: 30px; border-radius: 8px; } .step span { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--gold); color: white; font-weight: 800; margin-bottom: 20px; } .step h3 { color: var(--navy); } .deposit-box { max-width: 600px; margin: 60px auto 0; padding: 45px; text-align: center; background: var(--navy); color: white; border-radius: 8px; } .deposit-box h3 { color: var(--gold); font-size: 30px; margin-top: 0; } /* ========================================================= FINAL CTA ========================================================= */ .final-cta { padding: 120px 0; text-align: center; background: linear-gradient( 135deg, var(--navy), var(--blue) ); color: white; } .final-cta .eyebrow { color: #a8d8f5; } .final-cta h2 { font-size: clamp( 42px, 6vw, 72px ); margin: 0; } .final-cta p { font-size: 20px; margin: 20px 0 35px; } /* ========================================================= FOOTER ========================================================= */ .site-footer { background: #061a2b; color: white; padding: 30px 0; text-align: center; font-size: 14px; } /* ========================================================= LIGHTBOX ========================================================= */ .lightbox { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, .94); z-index: 9999; padding: 60px 80px; } .lightbox.active { display: flex; } .lightbox-content { position: relative; max-width: 1200px; width: 100%; text-align: center; } .lightbox-content img { max-width: 100%; max-height: 80vh; margin: 0 auto; object-fit: contain; } .lightbox-close { position: absolute; top: 20px; right: 30px; background: none; border: 0; color: white; font-size: 45px; cursor: pointer; } .lightbox-prev, .lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, .12); border: 0; color: white; width: 55px; height: 80px; font-size: 55px; cursor: pointer; } .lightbox-prev { left: 20px; } .lightbox-next { right: 20px; } .lightbox-caption { color: white; margin-top: 15px; font-size: 16px; } .lightbox-counter { color: #cccccc; margin-top: 5px; font-size: 13px; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 950px) { .nav-links { display: none; } .menu-btn { display: block; } .overview-grid { grid-template-columns: repeat(2, 1fr); } .split-layout { grid-template-columns: 1fr; gap: 45px; } .split-layout.reverse { direction: ltr; } .numbers-grid { grid-template-columns: repeat(3, 1fr); } .activities-grid { grid-template-columns: repeat(2, 1fr); } .steps-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .trip-image-hero { height: 300px; } .trip-intro { padding: 45px 20px 55px; } .trip-intro h1 { font-size: 2.2rem; } .trip-tagline { font-size: 1.1rem; } } @media (max-width: 650px) { .container { width: min( calc(100% - 30px), var(--container) ); } .trip-hero { min-height: 560px; } .overview-grid, .mountain-grid, .activities-grid, .included-grid, .steps-grid { grid-template-columns: 1fr; } .numbers-grid { grid-template-columns: repeat(2, 1fr); } .feature-list { grid-template-columns: 1fr; } .content-section, .rooms-section, .pass-section, .mountains-section, .activities-section, .register-section, .numbers-section, .cost-section { padding: 70px 0; } .lightbox { padding: 60px 15px; } .lightbox-prev, .lightbox-next { width: 40px; height: 60px; font-size: 40px; } .lightbox-prev { left: 5px; } .lightbox-next { right: 5px; } .lightbox-close { right: 15px; } } } @scope (body.page-application) { * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: #10213d; background: #f7faff; font-family: Arial, Helvetica, sans-serif; line-height: 1.5; } a { text-decoration: none; color: inherit; } .container { width: 92%; max-width: 1180px; margin: 0 auto; } .site-header { background: #041329; color: #fff; } .header-inner { min-height: 78px; width: 92%; max-width: 1220px; margin: auto; display: flex; align-items: center; gap: 28px; } .header { position: absolute; top: 0; left: 0; right: 0; z-index: 20; background: rgba(4, 19, 45, 0.90); } .site-brand { color: #fff; line-height: 0.86; letter-spacing: 1px; } .site-brand span { display: block; font-size: 28px; font-weight: 900; } .site-brand strong { display: block; font-size: 14px; letter-spacing: 4px; } .nav { min-height: 78px; display: flex; align-items: center; gap: 28px; } .nav-links { margin-left: auto; display: flex; align-items: center; gap: 20px; white-space: nowrap; } .nav-links a { color: #ffffff; font-size: 14px; font-weight: 800; letter-spacing: 0.2px; } .nav-links a:hover, .nav-links a.active { color: #69b4ff; } .menu { display: none; color: #fff; font-size: 26px; background: none; border: 0; } .menu-btn { display: none; border: 0; background: transparent; color: #ffffff; font-size: 26px; cursor: pointer; } .brand { font-weight: 900; font-size: 24px; line-height: 0.9; color: #fff; font-style: italic; } .brand span { display: block; font-size: 16px; } .brand-villagers { color: #ffffff; font-size: 30px; font-weight: 900; letter-spacing: -1.8px; line-height: 0.9; text-transform: uppercase; text-shadow: 2px 2px 0 #0878ee, 3px 3px 0 #0568d5, 0 5px 10px rgba(0,0,0,0.5); } .join { background: var(--blue); padding: 11px 19px; border-radius: 24px; } .join-btn { background: #0878ee !important; color: #ffffff !important; padding: 12px 22px; border-radius: 25px; } .join-btn:hover { background: #0568d5 !important; } .page-hero { padding: 70px 0 58px; color: #fff; background: linear-gradient(110deg, #061a3b, #0d59a7); } .page-hero h1 { font-size: 52px; line-height: 1; margin: 8px 0 14px; } .page-hero p { max-width: 720px; margin: 0; font-size: 17px; opacity: 0.92; } .eyebrow { font-size: 12px; font-weight: 900; letter-spacing: 2px; color: #68b5ff; text-transform: uppercase; } .form-wrap, .review-wrap { padding: 42px 0 70px; } .form-section, .review-section { background: #fff; border: 1px solid #e0e8f2; border-radius: 18px; padding: 30px; margin-bottom: 24px; box-shadow: 0 8px 24px rgba(5, 29, 65, 0.07); } .section-title { display: flex; align-items: center; gap: 16px; margin-bottom: 25px; } .section-title > span { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #0878ee; color: #fff; font-weight: 900; flex: 0 0 42px; } .section-title h2 { margin: 3px 0 0; color: #09295d; font-size: 28px; line-height: 1.1; } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; } .field { min-width: 0; } .field.full { grid-column: 1/-1; } .field label { display: block; margin-bottom: 7px; color: #17345d; font-weight: 800; font-size: 13px; } .field label span { font-weight: 400; color: #708096; } .field label b, .terms-check label b { color: #d9363e; } .field input, .field select { width: 100%; height: 46px; padding: 0 13px; border: 1px solid #cbd7e5; border-radius: 8px; background: #fff; color: #10213d; font-size: 15px; outline: none; } .field input:focus, .field select:focus { border-color: #0878ee; box-shadow: 0 0 0 3px rgba(8, 120, 238, 0.12); } .field input.invalid, .field select.invalid { border-color: #d9363e; } .field-error { display: block; min-height: 18px; margin-top: 4px; color: #c62828; font-size: 12px; font-weight: 700; } .notice { padding: 14px 16px; margin: 0 0 22px; background: #eef6ff; border-left: 4px solid #0878ee; border-radius: 8px; color: #38516f; font-size: 13px; } .notice.important { background: #fff8e8; border-left-color: #e7a600; } .check-row, .terms-check { display: flex; align-items: flex-start; gap: 12px; } .check-row { padding: 15px; background: #f5f9fe; border-radius: 10px; } .check-row input, .terms-check input { width: 20px; height: 20px; accent-color: #0878ee; flex: 0 0 auto; } .check-row label, .terms-check label { font-size: 14px; cursor: pointer; } .check-row label span { color: #66758a; font-size: 13px; } .terms-box { max-height: 390px; overflow: auto; padding: 22px; background: #f7f9fc; border: 1px solid #dbe4ef; border-radius: 10px; color: #40536d; font-size: 14px; } .terms-box h3 { margin: 0 0 8px; color: #09295d; font-size: 17px; } .terms-box h3:not(:first-child) { margin-top: 22px; } .terms-box a { color: #0765d4; text-decoration: underline; font-weight: 700; } .terms-check { margin-top: 20px; } .form-actions, .review-actions { display: flex; justify-content: space-between; align-items: center; gap: 20px; } .primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 25px; padding: 13px 22px; font-size: 12px; font-weight: 900; letter-spacing: 0.4px; cursor: pointer; } .primary-button { background: #0878ee; color: #fff; } .primary-button:hover { background: #0568d5; } .secondary-button { background: #eef4fb; color: #17446f; } .review-notice { padding: 16px 18px; background: #eaf5ff; border-left: 4px solid #0878ee; border-radius: 8px; margin-bottom: 24px; color: #34516f; } .review-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; } .review-heading h2 { margin: 0; color: #09295d; font-size: 22px; } .review-heading a { font-size: 11px; font-weight: 900; color: #0765d4; border: 1px solid #8bbaff; border-radius: 20px; padding: 8px 14px; } .review-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: #e2e9f1; } .review-item { background: #fff; padding: 13px 15px; } .review-item span { display: block; color: #718097; font-size: 11px; text-transform: uppercase; } .review-item strong { font-size: 14px; } .site-footer { background: #041329; color: #c8d6e9; } .copyright { padding: 22px 0; text-align: center; font-size: 12px; } .success-page { min-height: 70vh; display: grid; place-items: center; padding: 60px 20px; } .success-card { max-width: 650px; background: #fff; border-radius: 20px; padding: 45px; text-align: center; box-shadow: 0 12px 35px rgba(5, 29, 65, 0.12); } .success-icon { width: 70px; height: 70px; margin: auto; border-radius: 50%; display: grid; place-items: center; background: #0c7950; color: #fff; font-size: 38px; } .success-card h1 { font-size: 42px; color: #09295d; } .error-summary { padding: 18px 22px; background: #fff1f1; border: 1px solid #efb1b1; border-radius: 10px; margin-bottom: 24px; color: #a42020; } .error-summary ul { margin-bottom: 0; } @media (max-width: 900px) { .nav-links { gap: 12px; } .nav-links a { font-size: 10px; } .form-grid, .review-grid { grid-template-columns: 1fr; } .menu { display: block; margin-left: auto; } .menu-button { display: block; } } @media (max-width: 700px) { .nav-links { display: none; } .page-hero { padding: 52px 0 45px; } .page-hero h1 { font-size: 40px; } .form-section, .review-section { padding: 21px; } .form-actions, .review-actions { flex-direction: column; align-items: stretch; } .primary-button, .secondary-button { width: 100%; } .success-card { padding: 30px 22px; } } .dob-field { grid-column: 1/-1; } .dob-row { display: grid; grid-template-columns: 2fr 1fr 1.25fr; gap: 12px; max-width: 620px; } .dob-row select { height: 50px; padding: 0 14px; border: 1px solid #cbd7e5; border-radius: 9px; background: #fff; color: #10213d; font-size: 15px; cursor: pointer; } .dob-row select:focus { border-color: #0878ee; box-shadow: 0 0 0 3px rgba(8, 120, 238, 0.12); outline: none; } .dob-help { display: block; max-width: 620px; margin-top: 5px; padding-left: 14px; color: #8190a3; font-size: 10px; letter-spacing: 0.3px; } .dob-row select.invalid { border-color: #d9363e; } @media (max-width: 600px) { .dob-row { grid-template-columns: 1.5fr 1fr 1.1fr; gap: 7px; } .dob-row select { padding: 0 8px; font-size: 14px; } .dob-help { padding-left: 8px; } } } /* ========================================================= GLOBAL MOBILE NAVIGATION ========================================================= */ @media (max-width: 760px) { .header .nav, .site-header .nav, .header-inner { min-height: 70px; } .brand-villagers { font-size: 24px; } .menu, .menu-btn, .menu-button { display: block; } .nav-links { display: none; position: absolute; z-index: 200; top: 100%; left: 0; right: 0; margin-left: 0; padding: 20px; background: #061a3b; flex-direction: column; align-items: flex-start; gap: 17px; box-shadow: 0 12px 25px rgba(0,0,0,.22); } .nav.open .nav-links, .nav-links.open { display: flex; } .page-header { padding-top: 105px; padding-bottom: 40px; } .page-header h1, .page-hero h1 { font-size: 44px; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; } } @media (max-width: 480px) { .container, .header-inner { width: 94%; } .brand-villagers { font-size: 21px; } .page-header { padding-top: 95px; padding-bottom: 35px; } .page-header h1, .page-hero h1 { font-size: 38px; } .page-header p, .page-hero p { font-size: 15px; } .footer-grid { grid-template-columns: 1fr; gap: 22px; } .primary-button { max-width: 100%; } }