:root{ --navy:#1B3A5B; --terra:#C75C2E; --sand:#F5EFE6; --gold:#E0A75E; --teal:#2E8B8B; --ink:#22303f; --paper:#FBF8F3; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;color:var(--ink);background:var(--paper);line-height:1.55} h1,h2,h3{font-weight:800;line-height:1.1;margin:0 0 .4em;color:var(--navy)} h2{font-size:clamp(26px,4vw,40px)} p{margin:0 0 1em} a{color:var(--terra)} .wrap{max-width:1080px;margin:0 auto;padding:0 22px} .section{padding:70px 0} .kicker{display:inline-block;background:var(--terra);color:#fff;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:12px;padding:7px 14px;border-radius:30px;margin-bottom:16px} .btn{display:inline-block;background:var(--terra);color:#fff;text-decoration:none;font-weight:700;padding:14px 26px;border-radius:40px;border:none;cursor:pointer;font-size:16px;transition:.15s} .btn:hover{filter:brightness(1.07)} .btn-ghost{background:transparent;border:2px solid #fff;color:#fff} .btn-navy{background:var(--navy)} .btn:disabled{opacity:.6;cursor:default} /* NAV */ nav{position:sticky;top:0;z-index:50;background:rgba(27,58,91,.96);backdrop-filter:blur(6px);transition:box-shadow .35s ease} nav.scrolled{box-shadow:0 6px 24px rgba(11,25,42,.28)} nav .wrap{display:flex;align-items:center;justify-content:space-between;height:62px} nav .brand{color:#fff;font-weight:800;letter-spacing:.03em;text-decoration:none;font-size:17px} nav .links a{color:#e9eef3;text-decoration:none;margin-left:22px;font-size:14px;font-weight:600} nav .links a:hover{color:var(--gold)} @media(max-width:820px){nav .links{display:none}} /* HERO */ .hero{min-height:88vh;display:flex;align-items:center;color:#fff;text-align:center; position:relative;overflow:hidden;background:var(--navy)} /* base layer = poster still (this is what phones and no-JS visitors see) */ .hero::before{content:"";position:absolute;inset:0;z-index:0; background:url("video/hero-poster.jpg?v=4") center/cover no-repeat; animation:heroSettle 16s cubic-bezier(.22,.61,.36,1) both} /* When the video will take over, never start the poster zoom (class is set pre-paint in , so there's no mid-zoom snap when JS catches up). */ .video-on .hero::before,.hero.has-video::before{animation:none;transform:none} /* Video swaps in at frame 0, which IS the poster — instant swap between two pixel-identical images is invisible; any fade just leaves time for ghosting. */ .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:0} .hero-video.ready{opacity:1} /* scrim: keeps the white headline legible over bright, busy footage */ .hero-scrim{position:absolute;inset:0;z-index:0;pointer-events:none; background: radial-gradient(ellipse 70% 55% at 50% 48%, rgba(11,25,42,.55), rgba(11,25,42,0) 75%), linear-gradient(180deg, rgba(11,25,42,.62) 0%, rgba(11,25,42,.38) 35%, rgba(11,25,42,.55) 70%, rgba(11,25,42,.85) 100%)} .hero .wrap{position:relative;z-index:1} .hero h1{color:#fff;font-size:clamp(40px,8vw,84px);text-shadow:0 2px 18px rgba(0,0,0,.35);animation:rise .9s .3s cubic-bezier(.22,.61,.36,1) both} .hero .stars{color:var(--gold);font-weight:700;letter-spacing:.05em;margin-bottom:12px;animation:rise .9s .15s cubic-bezier(.22,.61,.36,1) both} /* Guest Favorite badge: gold laurels flanking the rating */ .hero-badge{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:16px; animation:rise .9s .15s cubic-bezier(.22,.61,.36,1) both} .hero-badge .laurel{width:30px;height:50px;filter:drop-shadow(0 1px 6px rgba(0,0,0,.35))} .hero-badge .laurel-r{transform:scaleX(-1)} .hb{text-align:center;text-shadow:0 1px 10px rgba(0,0,0,.4)} .hb-title{font-size:20px;font-weight:800;color:#fff;letter-spacing:.05em} .hb-sub{font-size:14px;color:var(--gold);font-weight:700;letter-spacing:.16em;margin-top:3px} .hero p.sub{font-size:clamp(16px,2.4vw,22px);max-width:640px;margin:0 auto 26px;color:#f3ede3;animation:rise .9s .5s cubic-bezier(.22,.61,.36,1) both} .hero .cta{animation:rise .9s .68s cubic-bezier(.22,.61,.36,1) both} .hero .cta a{margin:8px} @keyframes heroSettle{from{transform:scale(1.07)}to{transform:scale(1)}} @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} /* gentle scroll cue at the bottom of the hero */ .scroll-cue{position:absolute;left:50%;bottom:132px;z-index:1;width:26px;height:26px;margin-left:-13px; border-right:3px solid rgba(255,255,255,.75);border-bottom:3px solid rgba(255,255,255,.75); transform:rotate(45deg);animation:cueFloat 2.2s ease-in-out 1.6s infinite;opacity:.85;transition:opacity .5s ease;pointer-events:none} body.scrolled .scroll-cue{opacity:0} @keyframes cueFloat{0%,100%{transform:rotate(45deg) translate(0,0)}50%{transform:rotate(45deg) translate(6px,6px)}} /* HIGHLIGHTS */ .highlights{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:10px} .hcard{background:#fff;border-radius:16px;padding:22px 18px;text-align:center;box-shadow:0 6px 22px rgba(27,58,91,.07)} .hcard .n{font-size:30px;font-weight:800;color:var(--terra)} .hcard .l{font-size:14px;color:var(--navy);font-weight:600;margin-top:4px} @media(max-width:720px){.highlights{grid-template-columns:repeat(2,1fr)}} /* GALLERY CAROUSEL */ .carousel{position:relative;max-width:920px;margin:22px auto 0} .carousel-viewport{overflow:hidden;border-radius:18px;box-shadow:0 12px 34px rgba(27,58,91,.14)} .carousel-track{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1)} .slide{min-width:100%} .slide img{width:100%;height:min(64vh,560px);object-fit:cover;display:block} .car-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(27,58,91,.7);color:#fff;border:none; width:48px;height:48px;border-radius:50%;font-size:28px;cursor:pointer;display:flex;align-items:center;justify-content:center; line-height:1;padding-bottom:3px;transition:.15s;z-index:2} .car-btn:hover{background:var(--navy);transform:translateY(-50%) scale(1.06)} .car-prev{left:14px}.car-next{right:14px} .car-dots{display:flex;gap:8px;justify-content:center;margin-top:16px;flex-wrap:wrap} .car-dots button{width:9px;height:9px;border-radius:50%;border:none;background:#cbc3b4;cursor:pointer;padding:0;transition:.15s} .car-dots button.active{background:var(--terra);transform:scale(1.25)} @media(max-width:600px){.slide img{height:46vh}.car-btn{width:40px;height:40px;font-size:23px}} /* REVIEWS */ .reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .rev{background:#fff;border-radius:16px;padding:24px;box-shadow:0 6px 22px rgba(27,58,91,.07)} .rev .st{color:var(--gold);font-size:18px;letter-spacing:2px} .rev .q{color:var(--ink);font-size:16px;margin:10px 0} .rev .who{color:var(--terra);font-weight:700;font-size:14px} @media(max-width:720px){.reviews{grid-template-columns:1fr}} .center{text-align:center} .lead{font-size:18px;color:#42505e;max-width:720px;margin:0 auto 8px} .bg-sand{background:var(--sand)} .bg-navy{background:var(--navy);color:#eaf1f7} .bg-navy h2,.bg-navy h3{color:#fff} /* GUIDE */ .guide{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:14px} .gcard{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 6px 22px rgba(27,58,91,.07)} .gcard img{width:100%;height:170px;object-fit:cover;display:block} .gcard .b{padding:18px} .gcard h3{margin-bottom:6px} @media(max-width:720px){.guide{grid-template-columns:1fr}} /* BOOK DIRECT: selectable availability calendar + form in one card */ .bookdirect{max-width:1000px;margin:26px auto 0;text-align:left} .bd-grid{display:grid;grid-template-columns:1.08fr 1fr;gap:30px;align-items:start} @media(max-width:860px){.bd-grid{grid-template-columns:1fr}} .bd-form h3{margin-bottom:10px} .sel-summary{background:var(--sand);border-radius:11px;padding:11px 14px;font-size:14px;font-weight:600;color:var(--navy);margin-bottom:14px} .sel-summary b{color:var(--terra)} .book-alt{margin:22px 0 0;font-size:15px;color:#42505e} .book-alt a{font-weight:700} /* why-book-direct perk chips */ .perks{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:4px 0 22px} .perks span{background:#fff;border:1px solid #e2dccf;border-radius:30px;padding:9px 16px;font-size:14px;font-weight:700;color:var(--navy)} .perks b{color:var(--teal)} /* landing email capture (10% off) */ .mlist{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;max-width:640px;margin:18px auto 0} .mlist .field{flex:1 1 180px;text-align:left} .mlist input{width:100%;padding:13px 14px;font-size:15px;font-family:inherit;border:2px solid #e2dccf;border-radius:11px;background:#fff;color:var(--ink)} .mlist input:focus{outline:none;border-color:var(--terra)} .mlist .btn{flex:0 0 auto} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .avail-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px} .cal-nav{display:flex;gap:8px} .cal-nav button{width:34px;height:34px;border-radius:50%;border:1px solid #e2dccf;background:#fff;color:var(--navy); font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding-bottom:2px;transition:.15s} .cal-nav button:hover:not(:disabled){border-color:var(--terra);color:var(--terra)} .cal-nav button:disabled{opacity:.35;cursor:default} .avail-legend{display:flex;gap:14px;font-size:12.5px;color:#6b7682;font-weight:600;flex-wrap:wrap} .avail-legend span{display:flex;align-items:center;gap:6px} .avail-legend i{width:13px;height:13px;border-radius:4px;display:inline-block} .sw-open{background:#fff;border:2px solid #d9d2c6} .sw-booked{background:#e6e0d4;border:2px solid #e6e0d4} .sw-sel{background:var(--terra);border:2px solid var(--terra)} .avail-months{display:grid;grid-template-columns:repeat(2,1fr);gap:18px} @media(max-width:860px){.avail-months{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.avail-months{grid-template-columns:1fr;max-width:330px;margin:0 auto}} .avail-msg{color:#6b7682;font-size:15px;text-align:center;grid-column:1/-1;margin:14px 0} .month h4{margin:0 0 10px;font-size:14.5px;font-weight:800;color:var(--navy);text-align:center;letter-spacing:.02em} .dow,.days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px} .dow span{text-align:center;font-size:11px;font-weight:700;color:#a49b8c;padding-bottom:5px} .day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600; border-radius:7px;color:var(--navy);background:#fff;border:1px solid #ece7dd;user-select:none} .day.blank{background:none;border:none} .day.past{color:#cfc8bb;border-color:#f2eee6} .day.booked{background:#e6e0d4;border-color:#e6e0d4;color:#a9a296;text-decoration:line-through} .day.open{cursor:pointer} .day.open:hover{border-color:var(--terra);color:var(--terra)} .day.range{background:#f7e3d5;border-color:#f7e3d5} .day.sel{background:var(--terra);border-color:var(--terra);color:#fff} .avail-note{font-size:12.5px;color:#8a93a0;margin:14px 0 0} /* BOOK / INQUIRY FORM */ .book-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:22px;text-align:left;align-items:start} @media(max-width:720px){.book-grid{grid-template-columns:1fr}} .bookcard{background:#fff;border-radius:18px;padding:26px;box-shadow:0 6px 22px rgba(27,58,91,.07)} .form-row{display:grid;gap:12px} .form-row.two{grid-template-columns:1fr 1fr} @media(max-width:520px){.form-row.two{grid-template-columns:1fr}} .field label{display:block;font-size:13px;font-weight:700;color:var(--navy);margin-bottom:5px} .field input,.field textarea{width:100%;padding:12px 13px;font-size:15px;font-family:inherit;border:2px solid #e2dccf;border-radius:11px;background:var(--paper);color:var(--ink)} .field input:focus,.field textarea:focus{outline:none;border-color:var(--terra)} .field textarea{min-height:96px;resize:vertical} .form-note{font-size:13px;color:#6b7682;margin:12px 0 0} .form-status{font-size:14px;font-weight:600;margin-top:12px} .form-status.ok{color:var(--teal)} .form-status.err{color:#c0392b} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* GUEST */ .gate{max-width:440px;margin:0 auto;background:#fff;border-radius:18px;padding:28px;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.12)} .gate input{width:100%;padding:14px;font-size:16px;border:2px solid #d9d2c6;border-radius:12px;margin:12px 0;text-align:center;letter-spacing:.15em;text-transform:uppercase} .guestpanel{display:none} .ginfo{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:16px} .ibox{background:#fff;color:var(--ink);border-radius:14px;padding:20px;box-shadow:0 6px 22px rgba(0,0,0,.08)} .ibox .lab{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--terra);font-weight:700} .ibox .val{font-size:20px;font-weight:800;color:var(--navy);margin-top:4px;word-break:break-word} .ibox p{font-size:14px;margin:.4em 0 0} @media(max-width:720px){.ginfo{grid-template-columns:1fr}} footer{background:#132a41;color:#cdd8e4;text-align:center;padding:40px 0;font-size:14px} footer a{color:var(--gold);text-decoration:none;font-weight:600} .tag{color:#7f8c99;font-size:12px} /* ============ GUEST GUIDE (guest.html) ============ */ .muted{color:#6b7682} .small{font-size:15px !important} .btn-sm{padding:10px 18px;font-size:14px} .gate-err{color:#c0392b;font-size:14px;display:none;margin:10px 0 0} .guestbody{background:var(--paper)} /* Welcome banner */ .g-hero{background:var(--navy);color:#eaf1f7;text-align:center;padding:54px 0 46px} .g-hero h1{color:#fff;font-size:clamp(30px,5.5vw,50px);margin-bottom:.25em} .g-hero .stars{color:var(--gold);font-weight:700;letter-spacing:.05em;margin-bottom:10px} .g-hero .sub{color:#cdd8e4;max-width:560px;margin:0 auto;font-size:clamp(15px,2vw,18px)} /* Sticky quick-nav */ .g-subnav{position:sticky;top:61px;z-index:40;background:rgba(251,248,243,.94);backdrop-filter:blur(6px);border-bottom:1px solid #eadfce} .chips{display:flex;gap:9px;overflow-x:auto;padding:12px 22px;-ms-overflow-style:none;scrollbar-width:none} .chips::-webkit-scrollbar{display:none} .g-subnav .chips{padding-top:12px;padding-bottom:12px} .g-subnav .chips a{flex:0 0 auto;background:#fff;border:1px solid #e2dccf;color:var(--navy);text-decoration:none;font-weight:700;font-size:13px;padding:8px 15px;border-radius:30px} .g-subnav .chips a:hover{border-color:var(--terra);color:var(--terra)} .chips-lg{padding:0;flex-wrap:wrap;margin-top:12px} .chips-lg a{flex:0 0 auto;background:#fff;border:1px solid #e2dccf;color:var(--navy);text-decoration:none;font-weight:700;font-size:14px;padding:11px 17px;border-radius:30px;box-shadow:0 3px 12px rgba(27,58,91,.05)} .chips-lg a:hover{border-color:var(--terra);color:var(--terra)} /* Sections */ .g-body{padding-bottom:60px} .g-sec{padding:34px 0 6px;scroll-margin-top:120px} .g-sec h2{font-size:clamp(24px,4vw,34px)} .ginfo .span2{grid-column:1 / -1} .guide-2{grid-template-columns:repeat(2,1fr)} @media(max-width:720px){.guide-2{grid-template-columns:1fr}} .tlink{display:inline-block;margin-top:8px;color:var(--terra);font-weight:700;font-size:14px;text-decoration:none} .tlink:hover{text-decoration:underline} /* Tap-to-copy field */ .copyfield{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin-top:4px;background:var(--paper);border:2px dashed #d9d2c6;border-radius:12px;padding:12px 14px;cursor:pointer;text-align:left;font-family:inherit;transition:.15s} .copyfield:hover{border-color:var(--terra)} .copyfield .val{margin:0} .copyfield.copied{border-color:var(--teal);border-style:solid;background:#eaf6f5} .copybtn{flex:0 0 auto;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--terra);background:#fff;border:1px solid #e2dccf;border-radius:20px;padding:6px 12px} .copyfield.copied .copybtn{color:var(--teal);border-color:var(--teal)} /* Host callout */ .callout{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:16px;background:var(--sand);border-radius:16px;padding:20px 22px} .callout-actions{display:flex;gap:10px;flex-wrap:wrap} /* Accordion (details/summary) */ .acc{background:#fff;border-radius:14px;box-shadow:0 6px 22px rgba(27,58,91,.06);margin-bottom:12px;overflow:hidden} .acc summary{list-style:none;cursor:pointer;padding:17px 20px;font-weight:800;color:var(--navy);font-size:17px;display:flex;align-items:center;justify-content:space-between} .acc summary::-webkit-details-marker{display:none} .acc summary::after{content:"+";font-size:22px;color:var(--terra);font-weight:700;margin-left:12px} .acc[open] summary::after{content:"–"} .acc-body{padding:0 20px 18px} .acc-body p{margin:.2em 0 .6em} .rules{margin:0;padding-left:20px} .rules li{margin:.35em 0} /* Emergency card */ .emergency{border-left:5px solid #c0392b} .help-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:16px} @media(max-width:600px){.help-grid{grid-template-columns:1fr}} .help-item{display:flex;flex-direction:column;gap:2px;background:var(--paper);border:1px solid #eadfce;border-radius:12px;padding:14px 15px;text-decoration:none;color:var(--navy)} a.help-item:hover{border-color:var(--terra)} .help-item b{font-size:15px} .help-item .muted{font-size:13px} /* Checkout */ .checklist{list-style:none;margin:0;padding:0} .checklist li{border-bottom:1px solid #f0e9dc} .checklist li:last-child{border-bottom:none} .checklist label{display:flex;align-items:flex-start;gap:12px;padding:13px 2px;cursor:pointer;font-size:16px;color:var(--ink)} .checklist input{width:22px;height:22px;accent-color:var(--teal);flex:0 0 auto;margin-top:1px} .checklist input:checked + *{opacity:.55} .checklist label:has(input:checked){opacity:.55;text-decoration:line-through} .share{margin-top:16px;text-align:center;background:var(--sand)} .share-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:8px} .signoff{margin-top:34px;font-size:15px} /* ============ DESERT MURAL ART ============ */ .mural{display:block;line-height:0;pointer-events:none;position:relative;z-index:0;overflow:hidden} .mural svg{width:100%;height:110px;display:block;position:relative} .mural-dusk svg{height:140px} /* the sun: a true CSS circle behind the ridges (never distorts on wide screens) */ .m-sundot{position:absolute;z-index:-1;display:block;border-radius:50%;background:#E0A75E} .mural-dusk .m-sundot{width:106px;height:106px;left:calc(27% - 53px);bottom:30px} @media(max-width:640px){ .mural svg{height:70px}.mural-dusk svg{height:92px} .mural-dusk .m-sundot{width:64px;height:64px;left:calc(27% - 32px);bottom:20px} } /* the sun rises (and the front ridge settles) when the mural scrolls into view */ .mural .m-sundot{opacity:0;transform:translateY(34px);transition:opacity 1.3s ease .15s,transform 1.3s cubic-bezier(.22,.61,.36,1) .15s} .mural.in .m-sundot{opacity:1;transform:none} .mural .m-front{transform:translateY(12px);transition:transform 1s cubic-bezier(.22,.61,.36,1)} .mural.in .m-front{transform:none} .mural .m-cacti{opacity:0;transition:opacity .9s ease .5s} .mural.in .m-cacti{opacity:1} /* desert horizon at the bottom of the hero — the page rises out of the photo */ .hero-ridge{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:110px;z-index:0;pointer-events:none} @media(max-width:640px){.hero-ridge{height:64px}.scroll-cue{bottom:84px}} /* desert night in the navy band + guest welcome banner */ .night{position:relative;overflow:hidden} .night-sky{position:absolute;top:26px;right:5%;pointer-events:none} .night-cacti{position:absolute;bottom:0;right:24px;pointer-events:none} .g-hero{position:relative;overflow:hidden} .g-hero .night-sky{top:18px;right:4%} .g-hero .wrap{position:relative;z-index:1} .night .wrap{position:relative;z-index:1} @media(max-width:760px){ .night-sky{width:200px;height:94px;right:2%;opacity:.8} .night-cacti{width:120px;height:76px;right:8px;opacity:.8} } /* ============ MOTION & POLISH (fx.js) ============ */ /* Hover lifts on the small cards — snappy and shallow, never bouncy */ .hcard,.rev,.gcard{transition:transform .22s ease,box-shadow .22s ease} .hcard:hover,.rev:hover,.gcard:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(27,58,91,.13)} /* Scroll reveal: elements get .rv (+ a variant) from fx.js, then .in in view. Different section types arrive differently — rise, pop, slide, or settle. */ .rv{opacity:0;transform:translateY(20px);transition:opacity .65s cubic-bezier(.22,.61,.36,1),transform .65s cubic-bezier(.22,.61,.36,1)} .rv.rv-pop{transform:scale(.92) translateY(8px)} .rv.rv-left{transform:translateX(-32px)} .rv.rv-right{transform:translateX(32px)} .rv.rv-zoom{transform:scale(.972) translateY(14px);transition-duration:.8s} .rv.mural,.mural.rv{transform:none} /* murals only fade; their art animates inside */ .rv.in{opacity:1;transform:none} /* after revealing, return to the fast hover transition */ .rv.done{transition:transform .22s ease,box-shadow .22s ease} /* Accessibility: kill all motion for users who ask for it */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0ms !important;transition-duration:.01ms !important} .rv{opacity:1 !important;transform:none !important} .scroll-cue{display:none} }