/* =========================================================== 1857 Galleon Drive — palette pulled from the property frames =========================================================== */ :root{ --stucco:#F4F1EC; --limestone:#E4DDD2; --slate:#39434E; --oak:#C7A97E; --bronze:#463E36; --aqua:#7ECFD6; --amber:#E7B98D; --ink:#14171A; --paper:#FBF9F6; --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif; --sans:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; --gut:clamp(22px,5vw,88px); --safe-b:calc(env(safe-area-inset-bottom,0px) + 28px); } *,*::before,*::after{box-sizing:border-box} html,body{margin:0;padding:0} html{background:var(--ink);-webkit-text-size-adjust:100%} body{ background:var(--ink); color:var(--paper); font-family:var(--sans); font-weight:300; /* NB: no `overflow-x:hidden` here. On iOS Safari it turns into a scroll container and, with a full-viewport position:fixed child, the document stops scrolling altogether — the page simply will not move under a finger. Nothing on this page overflows horizontally anyway (verified at 375 and 390 wide), so the rule was pure downside. */ -webkit-font-smoothing:antialiased; } img,video{display:block;max-width:100%} a{color:inherit} /* ---------- loader ---------- */ .loader{ position:fixed;inset:0;z-index:900; background:var(--ink); display:grid;place-items:center; transition:opacity .9s ease .15s,visibility 0s linear 1.05s; } .loader.is-done{opacity:0;visibility:hidden} .loader__inner{text-align:center} .loader__mark{ font-family:var(--serif);font-size:clamp(34px,6vw,60px); font-weight:300;letter-spacing:.16em;color:var(--stucco);opacity:.86; } .loader__bar{ margin:26px auto 0;width:min(180px,38vw);height:1px; background:rgba(244,241,236,.16);overflow:hidden; } .loader__bar i{display:block;height:100%;width:0%;background:var(--stucco);transition:width .3s ease} /* ---------- film stage ---------- */ .film{ position:fixed;inset:0;z-index:1; background:var(--ink); overflow:hidden; will-change:transform; } .clip{ position:absolute;inset:0; opacity:0; will-change:opacity,transform,filter; transform:translate3d(0,0,0); } .clip video{ position:absolute;inset:0; width:100%;height:100%; object-fit:cover;object-position:center; } /* poster-only fallback layer for reduced motion / no clip */ .clip[data-fallback] video{background-size:cover;background-position:center} .film__scrim{ position:absolute;inset:0;pointer-events:none; background: linear-gradient(to bottom,rgba(10,12,14,.42) 0%,rgba(10,12,14,0) 26%,rgba(10,12,14,0) 52%,rgba(10,12,14,.34) 74%,rgba(10,12,14,.72) 100%); opacity:.9; } .film__grain{ position:absolute;inset:-120%;pointer-events:none;z-index:3; opacity:.05;mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,"); } /* ---------- overlay type ---------- */ .type{position:fixed;inset:0;z-index:5;pointer-events:none} .t{ position:absolute;inset:0; opacity:0; display:flex;flex-direction:column; padding:0 var(--gut); will-change:opacity,transform; } .t__eyebrow{ margin:0 0 18px; font-size:10px;font-weight:400;letter-spacing:.30em;text-transform:uppercase; color:rgba(251,249,246,.62); } .t__line{ margin:0 0 10px; font-family:var(--serif);font-size:clamp(21px,2.5vw,34px); font-weight:300;letter-spacing:.012em;line-height:1.3; color:rgba(251,249,246,.95); text-shadow:0 1px 40px rgba(0,0,0,.32); } /* hero */ .t--hero{justify-content:flex-end;padding-bottom:clamp(56px,11vh,140px)} .t__title{ margin:0; font-family:var(--serif);font-weight:300; font-size:clamp(44px,8.4vw,132px); line-height:.98;letter-spacing:.004em; text-shadow:0 2px 10px rgba(0,0,0,.35),0 3px 60px rgba(0,0,0,.45); } .t__title span{display:block} .t__sub{ margin:22px 0 0; font-size:11px;letter-spacing:.30em;text-transform:uppercase; color:rgba(251,249,246,.88); text-shadow:0 1px 3px rgba(0,0,0,.55),0 2px 26px rgba(0,0,0,.5); } .t__price{ margin:12px 0 0; font-family:var(--serif);font-size:clamp(19px,2vw,27px); letter-spacing:.05em;color:rgba(251,249,246,.97); text-shadow:0 1px 4px rgba(0,0,0,.6),0 2px 30px rgba(0,0,0,.5); } /* facts */ .t--facts{justify-content:center;align-items:center;text-align:center} .facts{list-style:none;margin:0;padding:0;display:flex;gap:clamp(30px,7vw,110px);flex-wrap:wrap;justify-content:center} .fact{opacity:0} .fact b{ display:block;font-family:var(--serif);font-weight:300; font-size:clamp(34px,5.4vw,74px);line-height:1;letter-spacing:.01em; text-shadow:0 2px 50px rgba(0,0,0,.4); } .fact span{ display:block;margin-top:14px; font-size:10px;letter-spacing:.26em;text-transform:uppercase; color:rgba(251,249,246,.62); } /* interior callouts */ .t--left{justify-content:flex-end;padding-bottom:clamp(56px,12vh,150px)} .t--center-low{justify-content:flex-end;align-items:center;text-align:center;padding-bottom:clamp(56px,12vh,150px)} /* turnaround */ .t--turn{justify-content:center;align-items:flex-start;will-change:transform,opacity} .t__big{ margin:0;font-family:var(--serif);font-weight:300; font-size:clamp(30px,5vw,74px);line-height:1.06;letter-spacing:.01em; } .t__big i{font-style:italic;opacity:.82} /* end */ .t--end{justify-content:center;align-items:center;text-align:center} .t__end-title{ margin:0;font-family:var(--serif);font-weight:300; font-size:clamp(34px,6.4vw,96px);line-height:1.03;letter-spacing:.012em; text-shadow:0 2px 60px rgba(0,0,0,.45); } /* ---------- scroll track ---------- */ .track{position:relative;z-index:4} .ch{height:calc(var(--len) * 1vh)} @supports (height:100dvh){ .ch{height:calc(var(--len) * 1dvh)} } /* ---------- CTA ---------- */ .cta{ position:relative;z-index:6; min-height:100vh; display:flex;flex-direction:column;justify-content:flex-end; padding:clamp(70px,14vh,170px) var(--gut) var(--safe-b); background:linear-gradient(to bottom,rgba(10,12,14,0) 0%,rgba(10,12,14,.5) 24%,rgba(10,12,14,.82) 62%,rgba(10,12,14,.94) 100%); } .cta__inner{ display:grid;grid-template-columns:1fr;gap:clamp(38px,6vw,90px); max-width:1320px;width:100%;margin:0 auto; } @media(min-width:900px){ .cta__inner{grid-template-columns:1fr 1fr;align-items:end} } .cta__name{margin:0;font-family:var(--serif);font-size:clamp(28px,3.4vw,46px);font-weight:300;letter-spacing:.015em} .cta__firm{margin:6px 0 22px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(251,249,246,.6)} .cta__lines{margin:0;font-size:15px;line-height:2;letter-spacing:.02em} .cta__lines a{text-decoration:none;border-bottom:1px solid rgba(251,249,246,.24);padding-bottom:2px;transition:border-color .3s} .cta__lines a:hover{border-color:rgba(251,249,246,.7)} .cta__meta{margin:26px 0 0;font-size:10px;letter-spacing:.14em;color:rgba(251,249,246,.4);line-height:1.9} /* form — glass over the video, never a solid panel */ .form{ background:rgba(20,23,26,.34); border:1px solid rgba(251,249,246,.14); -webkit-backdrop-filter:blur(16px) saturate(115%); backdrop-filter:blur(16px) saturate(115%); padding:clamp(26px,3.2vw,44px); } .form__title{ margin:0 0 26px;font-size:10px;letter-spacing:.28em;text-transform:uppercase; color:rgba(251,249,246,.62); } .field{margin-bottom:18px} .field label{ display:block;margin-bottom:7px; font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(251,249,246,.52); } .field input,.field textarea{ width:100%;padding:11px 0; background:transparent;border:0;border-bottom:1px solid rgba(251,249,246,.22); color:var(--paper);font-family:var(--sans);font-size:15px;font-weight:300; border-radius:0;transition:border-color .3s; } .field textarea{resize:vertical;min-height:64px} .field input:focus,.field textarea:focus{outline:none;border-bottom-color:rgba(251,249,246,.8)} .field input:focus-visible,.field textarea:focus-visible{outline:1px solid rgba(199,169,126,.7);outline-offset:4px} .field.is-bad input,.field.is-bad textarea{border-bottom-color:#D08A72} .err{display:block;min-height:14px;margin-top:5px;font-size:10.5px;font-style:normal;letter-spacing:.06em;color:#D9A18C} .btn{ margin-top:12px;width:100%;padding:17px 20px; background:transparent;color:var(--paper); border:1px solid rgba(251,249,246,.4); font-family:var(--sans);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase; cursor:pointer;transition:background .4s,color .4s,border-color .4s; } .btn:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)} .btn:focus-visible{outline:1px solid var(--oak);outline-offset:3px} .form__done{margin:20px 0 0;font-size:13px;line-height:1.7;color:var(--amber)} .foot{ max-width:1320px;width:100%;margin:clamp(56px,9vh,110px) auto 0; display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap; font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(251,249,246,.34); } /* ---------- scroll hint ---------- Sits over the opening drone frame. The previous version was a 1px line at 50% opacity, which read as decoration rather than instruction — a tester swiped sideways instead. This is an explicit symbol with a drop shadow so it survives bright imagery. */ .hint{ position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 22px); transform:translateX(-50%);z-index:7; display:flex;flex-direction:column;align-items:center;gap:9px; pointer-events:none;transition:opacity .7s ease; filter:drop-shadow(0 2px 12px rgba(0,0,0,.6)); } .hint__mouse{ display:block;width:23px;height:36px;position:relative; border:1.5px solid rgba(251,249,246,.85);border-radius:12px; } .hint__mouse i{ position:absolute;left:50%;top:7px;margin-left:-1.5px; width:3px;height:6px;border-radius:2px;background:rgba(251,249,246,.95); animation:wheel 2.2s cubic-bezier(.45,0,.25,1) infinite; } @keyframes wheel{ 0%{opacity:0;transform:translateY(0)} 18%{opacity:1} 68%{opacity:1;transform:translateY(13px)} 100%{opacity:0;transform:translateY(16px)} } .hint__chev{ display:block;width:9px;height:9px; border-right:1.5px solid rgba(251,249,246,.8); border-bottom:1.5px solid rgba(251,249,246,.8); animation:chev 2.2s ease-in-out infinite; } @keyframes chev{ 0%,100%{opacity:.2;transform:rotate(45deg) translate(-2px,-2px)} 50%{opacity:.95;transform:rotate(45deg) translate(1px,1px)} } .hint__label{ font-size:9px;letter-spacing:.3em;text-transform:uppercase; color:rgba(251,249,246,.82); } .hint.is-gone{opacity:0} /* a mouse means nothing on a phone — chevron and label carry it there */ @media(hover:none){ .hint__mouse{display:none} .hint__chev{width:11px;height:11px;border-width:2px} .hint{gap:11px} } /* ---------- mobile ---------- */ @media(max-width:768px){ /* Each of these is cheap on a desktop GPU and brutal on a phone: a 340%-of-viewport blend-mode layer, and eight permanently promoted full-screen video layers. Both recomposite on every scroll frame. */ .facts{gap:34px;flex-direction:column} .t--turn{align-items:flex-start;padding-bottom:0} .film__scrim{background:linear-gradient(to bottom,rgba(10,12,14,.5) 0%,rgba(10,12,14,0) 30%,rgba(10,12,14,0) 55%,rgba(10,12,14,.68) 100%)} } /* Touch devices, tablets included. Each of these is cheap on a desktop GPU and brutal on a phone: a 340%-of-viewport blend-mode layer, and eight permanently promoted full-screen video layers, all recompositing on every scroll frame. */ @media(hover:none){ .film__grain{display:none} .clip{will-change:auto} .t{will-change:auto} .form{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(20,23,26,.72)} } /* never let a pinned stage eat a vertical swipe */ .film,.type,.track,.ch{touch-action:pan-y} /* ---------- reduced motion ---------- */ @media(prefers-reduced-motion:reduce){ .hint,.film__grain{display:none} .loader{display:none} html{scroll-behavior:auto} } /* hero settles in once the loader clears, rather than waiting on scroll */ .t--hero .t__title span,.t--hero .t__sub,.t--hero .t__price{ opacity:0;transform:translate3d(0,26px,0); animation:heroIn 1.5s cubic-bezier(.16,.84,.3,1) forwards; } .t--hero .t__title span:nth-child(1){animation-delay:1.15s} .t--hero .t__title span:nth-child(2){animation-delay:1.30s} .t--hero .t__sub{animation-delay:1.55s} .t--hero .t__price{animation-delay:1.70s} @keyframes heroIn{to{opacity:1;transform:translate3d(0,0,0)}} @media(prefers-reduced-motion:reduce){ .t--hero .t__title span,.t--hero .t__sub,.t--hero .t__price{animation:none;opacity:1;transform:none} }