/* ============================================ RetreatADK — Lake Placid Village Suites Adirondack / Lake Placid color system ============================================ */ /* Font loading moved to a + preconnect in each page's for faster first paint (avoids the render-blocking delay of an @import in CSS). */ :root{ /* core Adirondack palette, drawn from the property's own logo mark */ --forest-950:#0f2318; --forest-900:#15311f; --forest-800:#1c3f28; --forest-700:#25532f; --forest-600:#356f42; --forest-500:#4a8a56; --lake-700:#2f6b7a; --lake-600:#3d8497; --lake-500:#5aa3b5; --lake-400:#8fc4d1; --lake-100:#e7f3f5; --navy-900:#1f2c38; --navy-700:#2c3e50; --wood-700:#6b4a2f; --wood-600:#8b5e3c; --wood-400:#b98a5c; --gold-600:#b3852f; --gold-500:#c99a3d; --cream-100:#faf7f0; --cream-200:#f4efe3; --cream-300:#ece3d0; --stone-700:#5a5648; --stone-500:#847d6b; --stone-300:#c9c2ac; --white:#ffffff; --font-head: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --shadow-sm: 0 1px 3px rgba(15,35,24,.10), 0 1px 2px rgba(15,35,24,.08); --shadow-md: 0 6px 20px rgba(15,35,24,.12); --shadow-lg: 0 14px 40px rgba(15,35,24,.18); --radius: 14px; --radius-sm: 8px; --container: 1180px; } /* ---------- reset ---------- */ *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin:0; font-family: var(--font-body); color: var(--navy-700); background: var(--cream-100); line-height: 1.6; -webkit-font-smoothing: antialiased; } img{ max-width:100%; display:block; } a{ color: inherit; text-decoration: none; } ul{ margin:0; padding:0; list-style:none; } h1,h2,h3,h4{ font-family: var(--font-head); color: var(--forest-900); line-height: 1.15; margin: 0 0 .5em; font-weight: 600; } p{ margin: 0 0 1em; } button{ font-family: inherit; cursor: pointer; } .container{ max-width: var(--container); margin: 0 auto; padding: 0 24px; } .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family: var(--font-body); text-transform: uppercase; letter-spacing: .14em; font-size: .76rem; font-weight: 600; color: var(--lake-700); margin-bottom: .9em; } .eyebrow::before{ content:""; width: 26px; height:2px; background: var(--gold-500); display:inline-block; } section{ padding: 92px 0; } @media (max-width: 780px){ section{ padding: 60px 0; } } .section-head{ max-width: 640px; margin: 0 0 48px; } .section-head.center{ margin-left:auto; margin-right:auto; text-align:center; } .section-head h2{ font-size: clamp(1.8rem, 3vw, 2.5rem); } .section-head p{ color: var(--stone-700); font-size: 1.05rem; } /* ---------- buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding: 14px 28px; border-radius: 999px; font-weight: 600; font-size: .95rem; border: 2px solid transparent; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; white-space: nowrap; } .btn-primary{ background: var(--forest-800); color: var(--white); box-shadow: var(--shadow-sm); } .btn-primary:hover{ background: var(--forest-700); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-gold{ background: var(--gold-500); color: var(--forest-950); } .btn-gold:hover{ background: var(--gold-600); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-outline{ background: transparent; border-color: rgba(255,255,255,.75); color: var(--white); } .btn-outline:hover{ background: rgba(255,255,255,.14); transform: translateY(-2px); } .btn-outline-dark{ background: transparent; border-color: var(--forest-800); color: var(--forest-800); } .btn-outline-dark:hover{ background: var(--forest-800); color:var(--white); } .btn-block{ width:100%; } .btn-sm{ padding: 10px 20px; font-size: .85rem; } .link-arrow{ display:inline-flex; align-items:center; gap:6px; font-weight:600; color: var(--forest-800); border-bottom: 2px solid var(--gold-500); padding-bottom: 2px; } .link-arrow:hover{ color: var(--lake-700); } /* ---------- header ---------- */ .site-header{ position: sticky; top:0; z-index: 500; background: rgba(250,247,240,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--cream-300); transition: box-shadow .2s ease; } .site-header.scrolled{ box-shadow: var(--shadow-sm); } .header-inner{ display:flex; align-items:center; justify-content:space-between; padding: 12px 24px; max-width: var(--container); margin: 0 auto; } .brand{ display:flex; align-items:center; gap:10px; } .brand img{ height: 52px; width:auto; } .brand-word{ font-family: var(--font-head); font-weight:700; font-size:1.25rem; color: var(--forest-900); } .brand-word span{ color: var(--lake-600); } .main-nav{ display:flex; align-items:center; gap: 30px; } .main-nav a{ font-weight: 500; font-size: .95rem; color: var(--navy-700); position: relative; padding: 6px 0; } .main-nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background: var(--gold-500); transition: right .22s ease; } .main-nav a:hover::after, .main-nav a.active::after{ right:0; } .main-nav a.active{ color: var(--forest-800); } .header-cta{ display:flex; align-items:center; gap:16px; } .nav-toggle{ display:none; background:none; border:none; padding:8px; flex-direction:column; gap:5px; } .nav-toggle span{ width:26px; height:2px; background: var(--forest-900); border-radius:2px; } @media (max-width: 900px){ .header-inner{ padding: 10px 16px; } .brand img{ height: 42px; } .brand-word{ font-size: 1.08rem; white-space:nowrap; } .main-nav{ position:fixed; inset: 66px 0 0 0; height: calc(100vh - 66px); background: var(--cream-100); flex-direction:column; justify-content:flex-start; align-items:stretch; padding: 26px 24px; gap: 6px; transform: translateX(100%); transition: transform .28s ease; overflow-y:auto; } .main-nav.open{ transform: translateX(0); } .main-nav a{ font-size: 1.15rem; padding: 12px 2px; } /* Header stays to just brand + hamburger on mobile — the CTA button moves inside the slide-out panel instead of competing for space in a narrow top bar (that crowding was overlapping before). */ .header-cta .btn-primary{ display:none; } .nav-toggle{ display:flex; flex:none; } .mobile-nav-cta{ display:block; text-align:center; margin-bottom: 14px; padding: 14px 20px; } } @media (min-width: 901px){ .mobile-nav-cta{ display:none; } } /* ---------- hero ---------- */ .hero{ position: relative; min-height: 92vh; display:flex; align-items:center; color: var(--white); overflow:hidden; } .hero-bg{ position:absolute; inset:0; background-size: cover; background-position: center; transform: scale(1.03); } .hero-scrim{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(15,35,24,.55) 0%, rgba(15,35,24,.38) 38%, rgba(15,35,24,.72) 100%); } .hero-content{ position:relative; z-index:2; padding: 120px 24px 80px; max-width: 780px; margin:0 auto; text-align:center; } .hero-content .eyebrow{ color: var(--lake-400); justify-content:center; } .hero-content .eyebrow::before{ background: var(--gold-500); } .hero h1{ color: var(--white); font-size: clamp(2.4rem, 6vw, 4.2rem); margin-bottom: .3em; } .hero h1 em{ font-style: italic; color: var(--gold-500); } .hero-sub{ font-size: clamp(1rem, 2vw, 1.2rem); color: rgba(255,255,255,.92); max-width: 560px; margin: 0 auto 2em; } .hero-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; } .hero-badges{ display:flex; gap:28px; justify-content:center; flex-wrap:wrap; margin-top: 56px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.25); } .hero-badge{ text-align:center; } .hero-badge b{ display:block; font-family: var(--font-head); font-size:1.5rem; color:var(--white); } .hero-badge span{ font-size:.8rem; color: rgba(255,255,255,.78); text-transform:uppercase; letter-spacing:.08em; } .page-hero{ position:relative; color:var(--white); min-height: 46vh; display:flex; align-items:flex-end; background-size:cover; background-position:center; } .page-hero::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(15,35,24,.35) 0%, rgba(15,35,24,.78) 100%); } .page-hero-inner{ position:relative; z-index:2; padding: 60px 24px 44px; max-width:var(--container); margin:0 auto; width:100%; } .breadcrumb{ font-size:.85rem; color: rgba(255,255,255,.85); margin-bottom:14px; } .breadcrumb a{ text-decoration:underline; text-underline-offset:3px; } .page-hero h1{ color:var(--white); font-size: clamp(2rem, 4.5vw, 3.2rem); margin-bottom:.2em; } .page-hero-sub{ color: rgba(255,255,255,.9); font-size:1.05rem; max-width:640px; } /* ---------- welcome / intro ---------- */ .intro{ display:grid; grid-template-columns: 1.05fr .95fr; gap:64px; align-items:center; } .intro-media{ position:relative; } .intro-media img{ border-radius: var(--radius); box-shadow: var(--shadow-lg); } .intro-media .float-card{ position:absolute; bottom:-28px; left:-28px; background:var(--white); padding:18px 22px; border-radius: var(--radius-sm); box-shadow: var(--shadow-md); display:flex; gap:14px; align-items:center; max-width: 260px; } .intro-media .float-card .num{ font-family: var(--font-head); font-size:2rem; color:var(--forest-800); font-weight:700; } .intro-media .float-card .txt{ font-size:.82rem; color:var(--stone-700); } .intro-body p{ color: var(--stone-700); font-size:1.05rem; } .intro-list{ display:grid; gap:14px; margin: 26px 0 30px; } .intro-list li{ display:flex; gap:12px; align-items:flex-start; font-size:.98rem; color:var(--navy-700); } .intro-list .ico{ flex:none; width:34px; height:34px; border-radius:50%; background: var(--lake-100); color: var(--lake-700); display:flex; align-items:center; justify-content:center; font-size:1rem; } @media (max-width: 880px){ .intro{ grid-template-columns: 1fr; gap: 60px; } .intro-media .float-card{ position:static; margin-top:-40px; margin-left:20px; } } /* ---------- suite cards ---------- */ .suites-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } @media (max-width: 980px){ .suites-grid{ grid-template-columns: repeat(2,1fr); } } @media (max-width: 640px){ .suites-grid{ grid-template-columns: 1fr; } } .suite-card{ background: var(--white); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-sm); transition: transform .22s ease, box-shadow .22s ease; display:flex; flex-direction:column; border: 1px solid var(--cream-300); } .suite-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); } .suite-media{ position:relative; aspect-ratio: 4/3; overflow:hidden; } .suite-media img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; } .suite-card:hover .suite-media img{ transform: scale(1.07); } .suite-tag{ position:absolute; top:14px; left:14px; background: rgba(250,247,240,.94); color:var(--forest-800); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:6px 12px; border-radius:999px; } .suite-tag.gold{ background: var(--gold-500); color: var(--forest-950); } .suite-rating{ position:absolute; top:14px; right:14px; background: rgba(15,35,24,.82); color:var(--white); font-size:.78rem; font-weight:600; padding:6px 10px; border-radius:999px; display:flex; gap:5px; align-items:center; } .suite-body{ padding: 22px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1; } .suite-body h3{ font-size:1.28rem; margin-bottom:0; } .suite-specs{ font-size:.85rem; color:var(--stone-500); } .suite-desc{ font-size:.92rem; color:var(--stone-700); flex:1; } .suite-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; } .suite-card.coming{ opacity:.92; } .suite-card.coming .suite-media{ background: var(--forest-900); display:flex; align-items:center; justify-content:center; } .suite-card.coming .suite-media .mark{ color: rgba(255,255,255,.5); font-family:var(--font-head); font-size:1.1rem; text-align:center; padding: 0 30px;} /* ---------- gallery ---------- */ .gallery{ display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 160px; gap: 10px; margin-bottom: 8px; } .gallery a{ position:relative; overflow:hidden; border-radius: 10px; display:block; } .gallery img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; } .gallery a:hover img{ transform: scale(1.06); } .gallery a.big{ grid-column: span 2; grid-row: span 2; } .gallery-more{ position:absolute; inset:0; background:rgba(15,35,24,.55); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:1.05rem; opacity:1; } @media (max-width: 780px){ .gallery{ grid-template-columns: repeat(2,1fr); grid-auto-rows:130px; } .gallery a.big{ grid-column: span 2; grid-row: span 1; aspect-ratio: 16/10; height:auto; } } /* lightbox */ .lightbox{ position:fixed; inset:0; z-index:1000; background: rgba(15,20,17,.94); display:none; align-items:center; justify-content:center; padding: 40px 20px; } .lightbox.open{ display:flex; } .lightbox img{ max-width: 92vw; max-height: 82vh; border-radius:8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); } .lightbox .lb-close, .lightbox .lb-prev, .lightbox .lb-next{ position:absolute; background: rgba(255,255,255,.12); color:#fff; border:none; width:46px; height:46px; border-radius:50%; font-size:1.3rem; display:flex; align-items:center; justify-content:center; transition: background .2s ease; } .lightbox .lb-close:hover, .lightbox .lb-prev:hover, .lightbox .lb-next:hover{ background: rgba(255,255,255,.24); } .lightbox .lb-close{ top:22px; right:22px; } .lightbox .lb-prev{ left:22px; top:50%; transform:translateY(-50%); } .lightbox .lb-next{ right:22px; top:50%; transform:translateY(-50%); } .lightbox .lb-caption{ position:absolute; bottom:26px; left:0; right:0; text-align:center; color:rgba(255,255,255,.8); font-size:.9rem; } @media (max-width: 640px){ .lightbox .lb-prev, .lightbox .lb-next{ width:40px;height:40px; } } /* ---------- unit detail layout ---------- */ .unit-layout{ display:grid; grid-template-columns: 1fr 360px; gap: 56px; align-items:start; } @media (max-width: 960px){ .unit-layout{ grid-template-columns: 1fr; } } .unit-header{ display:flex; justify-content:space-between; align-items:flex-start; gap: 20px; flex-wrap:wrap; margin: 30px 0 26px; } .unit-header h1{ font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom:.15em; } .unit-meta{ color: var(--stone-700); font-size:1rem; } .rating-pill{ display:flex; align-items:center; gap:8px; background: var(--cream-200); padding: 10px 16px; border-radius:999px; font-size:.9rem; font-weight:600; color:var(--forest-800); white-space:nowrap; } .rating-pill .stars{ color: var(--gold-600); } .spec-strip{ display:flex; gap:28px; flex-wrap:wrap; padding: 20px 0; margin: 10px 0 30px; border-top:1px solid var(--cream-300); border-bottom:1px solid var(--cream-300); } .spec-strip .spec{ display:flex; gap:10px; align-items:center; font-size:.94rem; color:var(--navy-700); } .spec-strip .spec .ico{ color:var(--lake-700); font-size:1.2rem; } .prose h3{ font-size:1.3rem; margin-top:1.6em; } .prose p{ color: var(--stone-700); } .amenities-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 14px 24px; margin: 10px 0 10px; } .amenities-grid .am{ display:flex; gap:12px; align-items:center; font-size:.95rem; } .amenities-grid .am .ico{ flex:none; width:36px; height:36px; border-radius:9px; background:var(--lake-100); display:flex; align-items:center; justify-content:center; color:var(--lake-700); font-size:1.05rem; } /* booking card */ .book-card{ background: var(--white); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-md); position: sticky; top: 100px; border: 1px solid var(--cream-300); } .book-card .price-row{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px; } .book-card .price{ font-family: var(--font-head); font-size:1.5rem; color:var(--forest-900); } .book-card .price small{ font-family: var(--font-body); font-size:.8rem; color:var(--stone-500); font-weight:500; } .book-card .sub{ font-size:.85rem; color:var(--stone-500); margin-bottom:20px; } .book-card .divider{ height:1px; background:var(--cream-300); margin:20px 0; } .book-card ul li{ display:flex; gap:10px; font-size:.88rem; color:var(--stone-700); margin-bottom:10px; align-items:flex-start; } .book-card ul li .ico{ color: var(--forest-600); } .book-card .fine{ text-align:center; font-size:.78rem; color:var(--stone-500); margin-top:14px; } .book-card .alt-link{ display:block; text-align:center; margin-top:12px; font-size:.85rem; text-decoration:underline; color:var(--stone-700); } /* ---------- reviews ---------- */ .reviews-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } @media (max-width: 960px){ .reviews-grid{ grid-template-columns: repeat(2,1fr); } } @media (max-width: 640px){ .reviews-grid{ grid-template-columns: 1fr; } } .review-card{ background: var(--white); border-radius: var(--radius); padding: 26px; border: 1px solid var(--cream-300); box-shadow: var(--shadow-sm); display:flex; flex-direction:column; gap:12px; } .review-stars{ color: var(--gold-600); font-size:.95rem; letter-spacing:2px; } .review-text{ color: var(--navy-700); font-size:.95rem; flex:1; } .review-who{ display:flex; align-items:center; gap:12px; margin-top:auto; } .review-avatar{ width:40px; height:40px; border-radius:50%; background: var(--forest-800); color:var(--white); display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:700; flex:none; } .review-who .name{ font-weight:600; font-size:.9rem; } .review-who .meta{ font-size:.78rem; color:var(--stone-500); } .review-source{ font-size:.72rem; color:var(--stone-500); text-transform:uppercase; letter-spacing:.06em; } /* ---------- band / cta ---------- */ .band{ background: var(--forest-900); color: var(--white); position:relative; overflow:hidden; } .band::before{ content:""; position:absolute; inset:0; opacity:.14; background-size: cover; background-position:center; } .band .container{ position:relative; z-index:1; } .band h2{ color:var(--white); } .band p{ color: rgba(255,255,255,.82); } .stat-row{ display:grid; grid-template-columns: repeat(4,1fr); gap:24px; text-align:center; } .stat-row .stat b{ display:block; font-family:var(--font-head); font-size: clamp(1.8rem,3vw,2.6rem); color:var(--gold-500); } .stat-row .stat span{ font-size:.85rem; color: rgba(255,255,255,.78); text-transform:uppercase; letter-spacing:.06em; } @media (max-width:780px){ .stat-row{ grid-template-columns: repeat(2,1fr); gap:34px; } } /* ---------- explore / guide cards ---------- */ .guide-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 26px; } @media (max-width: 780px){ .guide-grid{ grid-template-columns: 1fr; } } .guide-card{ background:var(--white); border-radius: var(--radius); overflow:hidden; border:1px solid var(--cream-300); box-shadow: var(--shadow-sm); display:grid; grid-template-columns: 200px 1fr; } .guide-card .g-media{ position:relative; } .guide-card .g-media img{ width:100%; height:100%; object-fit:cover; } .guide-card .g-body{ padding: 22px 24px; } .guide-card h3{ font-size:1.15rem; } .guide-card p{ font-size:.9rem; color:var(--stone-700); margin-bottom:.6em; } @media (max-width:600px){ .guide-card{ grid-template-columns: 1fr; } .guide-card .g-media{ aspect-ratio:16/9; } } .event-list{ display:grid; gap:0; border-top:1px solid var(--cream-300); } .event-row{ display:grid; grid-template-columns: 160px 1fr; gap: 20px; padding: 22px 0; border-bottom:1px solid var(--cream-300); } .event-row .when{ font-weight:600; color:var(--forest-800); font-size:.92rem; } .event-row h4{ font-family:var(--font-body); font-weight:700; margin:0 0 .3em; font-size:1.02rem; } .event-row p{ color:var(--stone-700); font-size:.9rem; margin:0; } @media (max-width:600px){ .event-row{ grid-template-columns:1fr; gap:6px; } } /* ---------- about ---------- */ .about-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:center; } @media (max-width:880px){ .about-grid{ grid-template-columns:1fr; gap:40px; } } .host-card{ display:flex; gap:18px; align-items:center; background: var(--cream-200); padding:22px; border-radius: var(--radius); margin-top:26px; } .host-avatar{ width:64px; height:64px; border-radius:50%; flex:none; background: var(--forest-800); color:var(--white); display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-size:1.6rem; font-weight:700; } .host-card .h-name{ font-weight:700; font-size:1.05rem; color:var(--forest-900); } .host-card .h-meta{ font-size:.82rem; color:var(--stone-500); } .photo-strip{ display:grid; grid-template-columns: repeat(4,1fr); gap:14px; } .photo-strip img{ border-radius: 10px; aspect-ratio: 3/4; object-fit:cover; } .photo-strip .tall{ grid-row: span 2; aspect-ratio: 3/4.6; } @media (max-width:700px){ .photo-strip{ grid-template-columns: repeat(2,1fr);} } /* ---------- map / location ---------- */ .map-wrap{ border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-md); border:1px solid var(--cream-300); } .map-wrap iframe{ width:100%; height: 420px; border:0; display:block; } .loc-info{ display:flex; gap:40px; flex-wrap:wrap; margin-top:26px; } .loc-info .li-block b{ display:block; color:var(--forest-900); margin-bottom:4px; } .loc-info .li-block{ color:var(--stone-700); font-size:.94rem; } /* ---------- footer ---------- */ footer{ background: var(--forest-950); color: rgba(255,255,255,.82); padding: 70px 0 26px; } .footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:50px; } @media (max-width: 780px){ .footer-grid{ grid-template-columns: repeat(2,1fr); } } .footer-brand .brand-word{ color:var(--white); } .footer-brand img{ height:46px; margin-bottom:14px; } .footer-brand p{ font-size:.88rem; color: rgba(255,255,255,.6); max-width:280px; } footer h4{ color:var(--white); font-family:var(--font-body); font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:18px; } footer ul li{ margin-bottom:11px; font-size:.9rem; } footer a:hover{ color: var(--gold-500); } .footer-bottom{ border-top: 1px solid rgba(255,255,255,.12); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.78rem; color: rgba(255,255,255,.5); } /* ---------- misc ---------- */ .badge-row{ display:flex; gap:10px; flex-wrap:wrap; margin: 4px 0 0; } .pill{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding: 5px 12px; border-radius:999px; background: var(--lake-100); color: var(--lake-700); } .pill.gold{ background: rgba(201,154,61,.16); color: var(--gold-600); } .pill.forest{ background: rgba(37,83,47,.12); color: var(--forest-700); } .divider-lg{ height:1px; background:var(--cream-300); margin: 90px 0 0; } .cross-card{ display:flex; align-items:center; gap:20px; background:var(--cream-200); border-radius: var(--radius); padding: 20px 24px; margin-top: 30px; } .cross-card img{ width:84px; height:84px; border-radius:10px; object-fit:cover; flex:none; } .cross-card .txt{ flex:1; font-size:.92rem; color:var(--stone-700); } .cross-card .txt b{ display:block; color:var(--forest-900); font-size:1rem; margin-bottom:2px; } .notice{ background: var(--lake-100); border: 1px solid rgba(58,141,161,.25); color: var(--lake-700); padding: 16px 20px; border-radius: var(--radius-sm); font-size:.9rem; display:flex; gap:12px; align-items:flex-start; } .two-col{ display:grid; grid-template-columns: 1fr 1fr; gap:60px; } @media (max-width:880px){ .two-col{ grid-template-columns:1fr; gap:40px; } } .drive-row{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding: 14px 0; border-bottom: 1px solid var(--cream-300); font-size:.96rem; color:var(--navy-700); } .drive-row b{ color:var(--forest-800); font-weight:700; white-space:nowrap; } /* ============================================ Animation system: scroll reveals, counters, progress bars, scroll indicator, parallax ============================================ */ .scroll-progress{ position:fixed; top:0; left:0; height:3px; width:0%; background: linear-gradient(90deg, var(--gold-500), var(--lake-500)); z-index:2000; transition: width .12s linear; } @media (prefers-reduced-motion: no-preference){ .reveal{ opacity:0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); } .reveal.is-visible{ opacity:1; transform:none; } .reveal-d1.is-visible{ transition-delay: .08s; } .reveal-d2.is-visible{ transition-delay: .16s; } .reveal-d3.is-visible{ transition-delay: .24s; } .reveal-d4.is-visible{ transition-delay: .32s; } .reveal-d5.is-visible{ transition-delay: .40s; } .reveal-d6.is-visible{ transition-delay: .48s; } .reveal-scale{ opacity:0; transform: scale(.94); transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); } .reveal-scale.is-visible{ opacity:1; transform:none; } .hero-content > *{ opacity:0; transform: translateY(22px); animation: heroIn .85s cubic-bezier(.22,1,.36,1) forwards; } .hero-content > *:nth-child(1){ animation-delay: .05s; } .hero-content > *:nth-child(2){ animation-delay: .16s; } .hero-content > *:nth-child(3){ animation-delay: .27s; } .hero-content > *:nth-child(4){ animation-delay: .38s; } .hero-content > *:nth-child(5){ animation-delay: .49s; } .hero-content > *:nth-child(6){ animation-delay: .60s; } .hero-bg{ transition: transform .1s linear; } .float-card{ animation: floatSlow 5s ease-in-out infinite; } .suite-card, .review-card, .guide-card{ transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease; } .pill.gold{ animation: pulseGold 2.6s ease-in-out infinite; } } @media (prefers-reduced-motion: reduce){ .reveal, .reveal-scale{ opacity:1; transform:none; } } @keyframes heroIn{ to{ opacity:1; transform:none; } } @keyframes floatSlow{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-7px); } } @keyframes pulseGold{ 0%,100%{ box-shadow: 0 0 0 0 rgba(201,154,61,.35); } 50%{ box-shadow: 0 0 0 6px rgba(201,154,61,0); } } /* animated counters */ [data-count]{ font-variant-numeric: tabular-nums; } /* rating progress bars */ .rating-bars{ display:grid; gap:16px; margin: 18px 0 8px; } .rbar{ display:grid; grid-template-columns: 118px 1fr 42px; align-items:center; gap:16px; } .rbar-label{ font-size:.85rem; font-weight:600; color:var(--navy-700); } .rbar-track{ height:8px; background:var(--cream-300); border-radius:999px; overflow:hidden; } .rbar-fill{ height:100%; width:0%; border-radius:999px; background: linear-gradient(90deg, var(--lake-600), var(--forest-600)); transition: width 1.2s cubic-bezier(.16,1,.3,1); } .rbar-val{ font-size:.85rem; font-weight:700; color:var(--forest-800); text-align:right; } /* animated stat number wrapper already uses .stat / .hero-badge, just add tabular nums */ .stat b, .hero-badge b{ font-variant-numeric: tabular-nums; } /* subtle scale-in for gallery grid on load */ .gallery a{ transition: transform .3s ease; } /* button micro-interaction */ .btn{ position:relative; overflow:hidden; } .btn::after{ content:""; position:absolute; inset:0; border-radius:inherit; background: radial-gradient(circle, rgba(255,255,255,.35) 0%, transparent 60%); opacity:0; transform: scale(.6); transition: opacity .4s ease, transform .4s ease; } .btn:active::after{ opacity:1; transform:scale(1.2); transition:none; } /* ============================================ Mobile comfort layer (phones only — desktop untouched) Card grids (suites, reviews, guide cards) become a swipeable horizontal row instead of one long vertical stack, so a page with a dozen review cards doesn't turn into an endless scroll. ============================================ */ @media (max-width: 780px){ section{ padding: 48px 0; } .page-hero{ min-height: 38vh; } .page-hero-inner{ padding: 44px 20px 32px; } .hero{ min-height: 82vh; } .hero-content{ padding: 100px 20px 56px; } .suites-grid, .reviews-grid, .guide-grid{ display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 14px; margin: 0 -20px; padding: 6px 20px 16px; } .suites-grid::-webkit-scrollbar, .reviews-grid::-webkit-scrollbar, .guide-grid::-webkit-scrollbar{ display: none; height: 0; } .suite-card, .review-card{ flex: 0 0 80%; scroll-snap-align: start; } .guide-card{ flex: 0 0 86%; scroll-snap-align: start; } .suites-grid::after, .reviews-grid::after, .guide-grid::after{ content: ""; flex: 0 0 6px; } /* small "swipe" affordance so the peeking next-card doesn't go unnoticed */ .swipe-hint{ display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--stone-500); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; margin: -10px 0 18px; } } @media (min-width: 781px){ .swipe-hint{ display: none; } } @media (max-width: 480px){ section{ padding: 40px 0; } .stat-row{ gap: 24px; } .footer-grid{ grid-template-columns: 1fr; gap: 32px; } .amenities-grid{ grid-template-columns: 1fr; } }