/* ========================================================= FGIP LEGACY ESTATE — design system Palette + type carried over from the source reference: Oswald (display) + Inter (body); maroon-on-cream luxury. ========================================================= */ :root{ --white:#f3f0ed; /* warm cream base */ --cream-2:#eae4dd; /* slightly deeper cream */ --light-maroon:#553341; /* primary maroon */ --maroon-deep:#3d2630; /* darker maroon for sections */ --maroon-text:#7a606a; /* muted maroon text */ --green:#83bf4a; /* accent / nature */ --orange:#df6f45; /* secondary accent */ --blue:#3d78f6; /* tertiary accent */ --black:#1c1416; --ink:#30302f; --maxw:1320px; --gutter:clamp(20px,5vw,90px); --radius:18px; --f-display:"Oswald",Arial,sans-serif; --f-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --ease:cubic-bezier(.22,1,.36,1); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{ font-family:var(--f-body); background:var(--white); color:var(--light-maroon); font-size:18px;line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative; } /* When JS confirms it can drive the atmosphere morph, it adds .theme-active to : sections go transparent so the fixed #themeBg wash shows through. Without it (no-JS / reduced-motion) sections keep their solid colours. */ html.theme-active body{background:transparent} html.theme-active [data-theme]{background-color:transparent} /* Lenis */ html.lenis,html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto!important} .lenis.lenis-stopped{overflow:hidden} img{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} ul{list-style:none} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} /* ---------- type ---------- */ h1,h2,h3,h4,.display{font-family:var(--f-display);font-weight:500;line-height:.98;letter-spacing:-.01em;text-transform:uppercase} h1{font-size:clamp(3rem,9vw,8.5rem);font-weight:600} h2{font-size:clamp(2.2rem,5.5vw,5rem)} h3{font-size:clamp(1.5rem,2.6vw,2.4rem)} .eyebrow{font-family:var(--f-display);font-weight:500;text-transform:uppercase;letter-spacing:.32em;font-size:.78rem;color:var(--maroon-text)} .lede{font-size:clamp(1.05rem,1.5vw,1.35rem);color:var(--maroon-text);max-width:46ch} .serif-accent{font-style:italic} /* ---------- layout helpers ---------- */ .container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)} .section{padding-block:clamp(70px,11vw,160px);position:relative} .section--cream2{background:var(--cream-2)} .section--dark{background:var(--maroon-deep);color:var(--white)} .section--dark .eyebrow,.section--dark .lede{color:#cdb9c0} .grid{display:grid;gap:clamp(24px,4vw,64px)} .center-text{text-align:center} .split-head{display:flex;flex-direction:column;gap:.1em} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:.6em; font-family:var(--f-display);text-transform:uppercase;letter-spacing:.12em; font-weight:500;font-size:.86rem; padding:.95em 1.8em;border-radius:999px; background:var(--light-maroon);color:var(--white); transition:transform .5s var(--ease),background .4s var(--ease),color .4s var(--ease); } .btn:hover{transform:translateY(-2px);background:var(--black)} .btn--ghost{background:transparent;color:var(--light-maroon);box-shadow:inset 0 0 0 1.5px currentColor} .btn--ghost:hover{background:var(--light-maroon);color:var(--white);box-shadow:inset 0 0 0 1.5px var(--light-maroon)} .btn--green{background:var(--green);color:var(--maroon-deep)} .btn--green:hover{background:var(--maroon-deep);color:var(--white)} .btn .arrow{transition:transform .5s var(--ease)} .btn:hover .arrow{transform:translateX(4px)} /* ========================================================= PRELOADER ========================================================= */ .preloader{position:fixed;inset:0;z-index:9999;background:var(--maroon-deep); display:flex;align-items:flex-end;justify-content:space-between; padding:var(--gutter);color:var(--white);overflow:hidden} .preloader__mask{position:absolute;inset:0;background:var(--white);transform-origin:bottom; /* JS animates height from 100% -> 0 (mask wipes up) */ height:0;z-index:-1} .loader_number{font-family:var(--f-display);font-weight:300;font-size:clamp(5rem,22vw,18rem);line-height:.8} .preloader__label{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.3em;font-size:.8rem;opacity:.7;text-align:right} .preloader__bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.15)} .loader_progress{height:100%;width:0;background:var(--green)} body.is-loading{overflow:hidden;height:100vh} .preloader.is-done{pointer-events:none} /* ========================================================= NAV ========================================================= */ .nav{position:fixed;top:0;left:0;right:0;z-index:900; display:flex;align-items:center;justify-content:space-between; padding:18px var(--gutter); transition:background .5s var(--ease),padding .5s var(--ease),box-shadow .5s var(--ease); color:var(--light-maroon);mix-blend-mode:normal} .nav.scrolled{background:rgba(243,240,237,.86);backdrop-filter:blur(14px);color:var(--light-maroon); box-shadow:0 1px 0 rgba(85,51,65,.1);padding-block:12px} .nav__logo{height:42px;width:auto;transition:height .5s var(--ease)} .nav.scrolled .nav__logo{height:36px} .nav__menu{display:flex;align-items:center;gap:clamp(18px,2.4vw,38px)} .nav-link{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.14em;font-size:.82rem;font-weight:500; position:relative;padding:4px 0} .nav-link::after{content:"";position:absolute;left:0;bottom:-2px;height:1.5px;width:0;background:currentColor;transition:width .4s var(--ease)} .nav-link:hover::after{width:100%} .nav__socials{display:flex;gap:14px;align-items:center} .nav__socials a{opacity:.8;transition:opacity .3s,transform .3s} .nav__socials a:hover{opacity:1;transform:translateY(-2px)} .nav__socials svg{width:18px;height:18px;fill:currentColor} .hamburger{display:none;position:relative;z-index:901;padding:4px} .hamburger span{display:block;height:2px;width:100%;background:currentColor;border-radius:2px; transition:transform .4s var(--ease),opacity .25s var(--ease),background .3s var(--ease)} body.menu-open{overflow:hidden} /* ========================================================= HERO ========================================================= */ .hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end; padding:140px var(--gutter) clamp(40px,6vw,80px);overflow:hidden;background:var(--maroon-deep)} .hero__bg{position:absolute;inset:0;z-index:0} .hero__bg .center,.hero__bg .r,.hero__bg .g,.hero__bg .b{position:absolute;inset:0;will-change:transform} .hero__slides{position:absolute;inset:0;z-index:0} .hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s var(--ease);transform:scale(1.06)} .hero__slide.active{opacity:1;transform:scale(1)} .hero__slide img{width:100%;height:100%;object-fit:cover} .hero__scrim{position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(28,20,22,.55) 0%,rgba(28,20,22,.15) 35%,rgba(28,20,22,.65) 100%)} .hero__inner{position:relative;z-index:2;color:var(--white);max-width:var(--maxw);margin-inline:auto;width:100%} .hero__eyebrow{color:#e7d6cf} .hero h1{color:var(--white);margin:.18em 0 .35em} .hero h1 .accent{color:var(--green)} .hero__sub{display:flex;flex-wrap:wrap;gap:30px;align-items:flex-end;justify-content:space-between} .hero__sub .lede{color:#e3d2cd} .hero__tagline{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.06em; font-size:clamp(1rem,1.4vw,1.25rem);color:#fff;border-top:1px solid rgba(255,255,255,.25); margin-top:46px;padding-top:18px;display:flex;flex-wrap:wrap;gap:.5em 1.4em} .hero__tagline span{opacity:.55}.hero__tagline span:nth-child(odd){opacity:1} .hero__dots{position:absolute;right:var(--gutter);bottom:clamp(40px,6vw,80px);z-index:3;display:flex;gap:10px} .hero__dots button{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.4);transition:.3s} .hero__dots button.active{background:var(--green);width:26px;border-radius:6px} /* word-split helpers (SplitType injects .word/.char) */ [words-slide-up] .word,[short-slide-up] .word,[atf-h] .word,[atf-par] .word{overflow:hidden;display:inline-block} .word{padding-bottom:.04em} /* ========================================================= MARQUEE / SCRUB STATEMENT ========================================================= */ .statement{padding-block:clamp(80px,12vw,180px)} .statement p{font-family:var(--f-display);font-weight:400;text-transform:uppercase;line-height:1.04; font-size:clamp(1.8rem,4.6vw,4.2rem);letter-spacing:-.01em;max-width:18ch} .statement .em{color:var(--green)} [scrub-each-word] .char{color:rgba(85,51,65,.22)} /* ========================================================= HOW IT WORKS ========================================================= */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px);margin-top:60px} .step{border-top:1.5px solid rgba(85,51,65,.2);padding-top:26px} .step__num{font-family:var(--f-display);font-weight:300;font-size:3.2rem;color:var(--green);line-height:1} .step h3{margin:.4em 0 .3em} .step p{color:var(--maroon-text);font-size:1rem} /* ========================================================= ABOUT FEATURES ========================================================= */ .feature-row{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,5vw,90px);align-items:center} .feature-row:nth-child(even){grid-template-columns:1fr 1.1fr} .feature-row:nth-child(even) .feature-row__media{order:-1} .feature-row+.feature-row{margin-top:clamp(60px,9vw,140px)} .feature-row__media{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;position:relative} .feature-row__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)} .feature-row:hover .feature-row__media img{transform:scale(1.05)} .feature-row__media .tag{position:absolute;left:18px;bottom:18px;background:rgba(243,240,237,.92); color:var(--light-maroon);font-family:var(--f-display);text-transform:uppercase;letter-spacing:.12em; font-size:.74rem;padding:.5em 1em;border-radius:999px} .feature-row h2{margin-bottom:.3em} /* ========================================================= FLOATING POSTER (scale 1 -> .56 + de-grayscale) ========================================================= */ .poster{position:relative;background:var(--white)} .image-trig{height:200vh;position:relative} .poster__sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden} .image-full{position:relative;width:100%;height:100%;border-radius:0;overflow:hidden;transform-origin:center;will-change:transform} .image-full img{width:100%;height:100%;object-fit:cover} .image-full.rounded{border-radius:var(--radius)} .grayscaler{position:absolute;inset:0;background:var(--white);mix-blend-mode:saturation;will-change:opacity} .poster__caption{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;color:#fff;pointer-events:none;width:min(90%,720px)} .poster__caption h2{color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.4)} /* ========================================================= RESIDENCES (hover-active showcase) ========================================================= */ .residences{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(30px,5vw,80px);align-items:start} .residences__info{position:sticky;top:120px} .product-title,.thc-text,.product-par{display:none} .product-title.active-prod,.thc-text.active-prod,.product-par.active-prod{display:block;animation:fadeUp .5s var(--ease)} .product-title{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(2rem,3.6vw,3.4rem);line-height:1;margin-bottom:.2em} .thc-text{font-family:var(--f-display);color:var(--green);font-size:1.4rem;letter-spacing:.04em;margin-bottom:.6em} .product-par{color:var(--maroon-text);max-width:42ch;margin-bottom:1.4em} .products-rec-wrap{display:none;gap:26px;flex-wrap:wrap} .products-rec-wrap.active-prod,.products-rec-wrap:has(.products-rec.active-prod){display:flex} .products-rec{display:none;align-items:center;gap:10px} .products-rec.active-prod{display:flex} .products-rec .label{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;color:var(--maroon-text)} .stars{display:flex;gap:3px} .stars i{width:13px;height:13px;display:block;background:var(--green);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);opacity:.25} .stars i.on{opacity:1} .residences__photos{display:grid;grid-template-columns:1fr 1fr;gap:18px} .product-photo-wrap{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/4;cursor:pointer} .product-photo-wrap:nth-child(1),.product-photo-wrap:nth-child(4){margin-top:0} .product-photo-wrap:nth-child(2),.product-photo-wrap:nth-child(3){margin-top:42px} .product-photo{width:100%;height:100%;object-fit:cover;filter:grayscale(.4) brightness(.92);transition:filter .6s var(--ease),transform 1s var(--ease)} .product-photo-wrap:hover .product-photo,.product-photo.active-prod{filter:grayscale(0) brightness(1);transform:scale(1.04)} .product-photo-wrap .pin{position:absolute;left:14px;top:14px;background:rgba(243,240,237,.9);color:var(--light-maroon); font-family:var(--f-display);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:.4em .8em;border-radius:999px} /* ========================================================= AMENITIES / BENEFITS ========================================================= */ .benefits{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5px;background:rgba(243,240,237,.18);border-radius:var(--radius);overflow:hidden} .benefit{background:var(--maroon-deep);padding:clamp(28px,4vw,52px);min-height:300px;display:flex;flex-direction:column;justify-content:space-between;transition:background .5s var(--ease)} .benefit:hover{background:var(--light-maroon)} .benefit__icon{width:46px;height:46px;color:var(--green)} .benefit h3{color:#fff;margin-top:auto} .benefit p{color:#cdb9c0;font-size:1rem;margin-top:.5em} /* ========================================================= PINNED HORIZONTAL CAROUSEL (tr-scroll-toggle) ========================================================= */ .gallery-pin{position:relative} [tr-scroll-toggle="list"]{display:flex;width:100%;height:100vh;overflow:hidden} .gallery-track{position:sticky;top:0;height:100vh;overflow:hidden} .gallery-viewport{display:flex;height:100%;transition:transform 0s} [tr-scroll-toggle="transform-x"]{display:flex;height:100%;will-change:transform} .gallery-slide{flex:0 0 100vw;height:100vh;position:relative;display:flex;align-items:center;justify-content:center} .gallery-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .gallery-slide .scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(28,20,22,.7),rgba(28,20,22,.1))} .gallery-slide__content{position:relative;z-index:2;color:#fff;text-align:center;max-width:700px;padding:0 24px} .gallery-slide__content .eyebrow{color:var(--green)} .gallery-count{position:absolute;left:var(--gutter);bottom:42px;z-index:5;color:#fff;font-family:var(--f-display);font-size:1.2rem;letter-spacing:.1em} .gallery-count .total{opacity:.5} .gallery-progress{position:absolute;left:var(--gutter);right:var(--gutter);bottom:34px;z-index:5;height:2px;background:rgba(255,255,255,.2)} .gallery-progress__fill{height:100%;width:10%;background:var(--green);transition:width .4s var(--ease)} /* ========================================================= JOURNAL ========================================================= */ .journal__head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px;margin-bottom:48px} .blog-count-wrap{font-family:var(--f-display);font-size:1rem;letter-spacing:.1em;color:var(--maroon-text)} .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)} .blog-card-item{display:flex;flex-direction:column;gap:16px;group:card} .blog-card-item__media{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3} .blog-card-item__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)} .blog-card-item:hover img{transform:scale(1.06)} .blog-card-item .date{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;color:var(--maroon-text)} .blog-card-item h3{font-size:1.35rem} .blog-card-item .more{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;color:var(--green);display:inline-flex;gap:.4em;margin-top:auto} /* ========================================================= PARTNERS / PHASES ========================================================= */ .partners-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5px;background:rgba(85,51,65,.12);border-radius:var(--radius);overflow:hidden} .partner{background:var(--white);padding:clamp(22px,3vw,40px);display:flex;flex-direction:column;gap:20px;justify-content:space-between;min-height:200px;transition:background .4s var(--ease)} .partner:hover{background:var(--cream-2)} .partner__mark{display:flex;align-items:center;gap:12px;font-family:var(--f-display);text-transform:uppercase;letter-spacing:.06em;font-size:1.05rem;color:var(--light-maroon)} .partner__mark .dot{width:30px;height:30px;border-radius:8px;background:var(--light-maroon);color:#fff;display:grid;place-items:center;font-size:.9rem;font-weight:600} .partner .join{align-self:flex-start;font-family:var(--f-display);text-transform:uppercase;letter-spacing:.12em;font-size:.74rem; padding:.55em 1.2em;border-radius:999px;box-shadow:inset 0 0 0 1.4px rgba(85,51,65,.3);transition:.4s var(--ease)} .partner .join:hover{background:var(--light-maroon);color:#fff;box-shadow:inset 0 0 0 1.4px var(--light-maroon)} /* ========================================================= CTA BAND ========================================================= */ .cta-band{background:var(--green);color:var(--maroon-deep);text-align:center} .cta-band h2{color:var(--maroon-deep);max-width:16ch;margin:0 auto .6em} .cta-band .btn{background:var(--maroon-deep);color:#fff} .cta-band .btn:hover{background:#000} .cta-band__lede{color:var(--maroon-deep);opacity:.85;max-width:42ch;margin:0 auto 8px} /* inline Google Calendar booking embed (JS injects the iframe when BOOKING_URL is set) */ .cta-embed{max-width:840px;margin:28px auto 0;background:#fff;border-radius:var(--radius); overflow:hidden;box-shadow:0 18px 50px rgba(30,20,28,.25)} .cta-embed:empty{display:none} /* hide the white card until an iframe exists */ .cta-embed iframe{display:block;width:100%;height:640px} .cta-embed__alt{margin-top:18px} /* once the scheduler is live, demote the email link to a quiet secondary */ .cta-band.has-booking .cta-embed__alt{background:transparent;color:var(--maroon-deep); box-shadow:inset 0 0 0 1.5px var(--maroon-deep);font-size:.78rem;padding:.7em 1.4em;opacity:.9} .cta-band.has-booking .cta-embed__alt:hover{background:var(--maroon-deep);color:#fff} @media (max-width:640px){ .cta-embed iframe{height:560px} } /* ========================================================= FOOTER ========================================================= */ .footer{background:var(--maroon-deep);color:var(--white);padding-block:clamp(60px,8vw,100px) 40px} .footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:40px} .footer__logo{height:48px;margin-bottom:20px} .footer__col h4{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;color:var(--green);margin-bottom:18px;font-weight:500} .footer__col a{display:block;color:#d8c7cd;padding:6px 0;transition:color .3s} .footer__col a:hover{color:#fff} .footer__news p{color:#cdb9c0;margin-bottom:14px;font-size:.95rem} .news-form{display:flex;border:1px solid rgba(255,255,255,.25);border-radius:999px;overflow:hidden;background:rgba(255,255,255,.05)} .news-form input{flex:1;background:transparent;border:none;color:#fff;padding:.9em 1.2em;font-family:var(--f-body);font-size:.95rem;outline:none} .news-form input::placeholder{color:#b59aa3} .news-form button{background:var(--green);color:var(--maroon-deep);padding:0 1.4em;font-family:var(--f-display);text-transform:uppercase;letter-spacing:.08em;font-size:.8rem} .footer__legal{margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14); color:#9d8089;font-size:.74rem;line-height:1.6;max-width:none} .footer__bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:24px;padding-top:24px; border-top:1px solid rgba(255,255,255,.14);color:#b59aa3;font-size:.85rem} .footer__bottom a{color:#b59aa3}.footer__bottom a:hover{color:#fff} /* ========================================================= ANIMATIONS ========================================================= */ @keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .reveal{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1s var(--ease)} .reveal.in{opacity:1;transform:none} /* clip-path image reveal (mask wipes up) — CSS transition so it survives rAF throttling */ .reveal-clip{clip-path:inset(100% 0 0 0);transform:scale(1.04);will-change:clip-path,transform; transition:clip-path 1.15s var(--ease),transform 1.4s var(--ease)} .reveal-clip.in{clip-path:inset(0 0 0 0);transform:none} /* ========================================================= IMMERSION PASS — atmosphere, hero video, legacy line, 3D ========================================================= */ /* fixed background wash that morphs between section themes */ .theme-bg{position:fixed;inset:0;z-index:-2;background:var(--white);pointer-events:none} /* ---- Cinematic video hero ---- */ .hero__media{position:absolute;inset:0;overflow:hidden} .hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform} .hero__slides{display:none} /* video + poster cover the carousel; shown only on failure */ .hero.video-failed .hero__video{display:none} .hero.video-failed .hero__slides{display:block} .hero__cue{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:3; display:flex;flex-direction:column;align-items:center;gap:8px;color:#fff; font-family:var(--f-display);text-transform:uppercase;letter-spacing:.28em;font-size:.7rem;opacity:.85; transition:opacity .5s var(--ease)} .hero__cue svg{width:20px;height:20px;animation:cueBob 1.8s var(--ease) infinite} .hero__cue.hide{opacity:0;pointer-events:none} @keyframes cueBob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}} /* ---- Scattered floating-image hero (Floema-inspired) ---- */ .hero--scatter{justify-content:center;align-items:center;text-align:center;background:transparent; padding:120px var(--gutter)} .hero--scatter .hero__inner{position:relative;z-index:2;max-width:1040px;margin:auto;color:var(--light-maroon)} .hero__inner--center{display:flex;flex-direction:column;align-items:center} .hero__inner--center::before{content:"";position:absolute;z-index:-1;left:50%;top:50%; transform:translate(-50%,-50%);width:min(94vw,920px);height:min(78vh,580px);pointer-events:none; background:radial-gradient(ellipse at center,var(--white) 0%,var(--white) 36%,rgba(243,240,237,0) 72%)} .hero--scatter h1{color:var(--light-maroon);margin:.12em 0 0} .hero--scatter h1 .accent{color:var(--green)} .hero--scatter .hero__eyebrow{color:var(--maroon-text)} .hero--scatter .lede{color:var(--maroon-text);margin:1.2em auto 1.6em;max-width:54ch} .hero--scatter .hero__tagline{justify-content:center;border-top:none;margin-top:30px;padding-top:0;color:var(--light-maroon)} .hero--scatter .hero__tagline span{opacity:.5} .hero--scatter .hero__tagline span:nth-child(odd){opacity:1} .hero--scatter .hero__cue{color:var(--light-maroon)} .hero__scatter{position:absolute;inset:0;z-index:0;pointer-events:none} .scatter-item{position:absolute;left:var(--x);top:var(--y);width:var(--w); transform:translate(-50%,-50%) translate(var(--px,0px),var(--py,0px));will-change:transform} .scatter-img{width:100%;aspect-ratio:var(--ar,4/5);object-fit:cover;border-radius:9px;display:block; box-shadow:0 26px 54px -26px rgba(40,20,28,.5);opacity:0;transform:scale(.72); will-change:transform,opacity} /* ---- Scroll-scrubbed video frame sequence (pinned canvas) ---- */ .sequence{position:relative;height:600vh} /* tall scroll track = pin duration */ .sequence__sticky{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--maroon-deep)} .sequence__canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .sequence__scrim{position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(28,20,22,.45),rgba(28,20,22,.15) 40%,rgba(28,20,22,.75))} .sequence__cap{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:var(--gutter);color:#fff; display:flex;flex-direction:column;gap:8px} .sequence__cap .eyebrow{color:var(--green)} .sequence__cap h2{color:#fff;max-width:18ch} .sequence__steps{position:absolute;z-index:2;top:0;left:0;right:0;padding:calc(var(--gutter)) var(--gutter) 0; display:flex;gap:10px} .seq-step{flex:1;height:3px;background:rgba(255,255,255,.2);border-radius:2px;overflow:hidden} .seq-step i{display:block;height:100%;width:0;background:var(--green)} .sequence__loading{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center; color:#cdb9c0;font-family:var(--f-display);text-transform:uppercase;letter-spacing:.2em;font-size:.8rem; background:var(--maroon-deep);transition:opacity .5s var(--ease)} .sequence__loading.hide{opacity:0;pointer-events:none} /* ---- Backgroundless multi-layer parallax (floating photos over the wash) ---- */ .floatscape{position:relative;min-height:150vh;overflow:hidden;display:flex;align-items:center} .floatscape__head{position:relative;z-index:1;width:100%;text-align:center;padding:0 var(--gutter);pointer-events:none} .floatscape__head .big{font-family:var(--f-display);font-weight:600;text-transform:uppercase;line-height:.9; font-size:clamp(3rem,13vw,12rem);letter-spacing:-.02em;color:var(--light-maroon);opacity:.12} .floatscape__head .sub{margin-top:-.3em} .floatscape__sub-inner{max-width:34ch;margin:0 auto} .float-card{position:absolute;border-radius:14px;overflow:hidden;box-shadow:0 30px 60px -25px rgba(40,20,28,.5); will-change:transform} .float-card img{width:100%;height:100%;object-fit:cover;display:block} .float-card .cap{position:absolute;left:12px;bottom:10px;color:#fff;font-family:var(--f-display); text-transform:uppercase;letter-spacing:.12em;font-size:.66rem;text-shadow:0 1px 8px rgba(0,0,0,.5)} /* depth placement (desktop) */ .fc1{width:24vw;max-width:340px;aspect-ratio:3/4;left:6vw;top:14%} .fc2{width:18vw;max-width:250px;aspect-ratio:1/1;right:8vw;top:10%} .fc3{width:21vw;max-width:300px;aspect-ratio:4/5;left:18vw;bottom:10%} .fc4{width:16vw;max-width:230px;aspect-ratio:3/4;right:14vw;bottom:14%} .fc5{width:14vw;max-width:200px;aspect-ratio:4/3;left:42vw;top:8%} /* ---- Editorial chapter index (Floema-inspired) ---- */ .chapter{display:flex;align-items:center;gap:16px;margin-bottom:26px} .chapter__no{font-family:var(--f-display);font-weight:300;font-size:clamp(1.3rem,2.2vw,2rem);color:var(--green);line-height:1} .chapter__rule{flex:0 0 auto;width:56px;height:1px;background:currentColor;opacity:.32; transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease) .1s} .chapter.in .chapter__rule{transform:scaleX(1)} .chapter__label{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.3em;font-size:.72rem;opacity:.65} /* ---- Founder pull-quote + three-pillar approach ---- */ .approach .pullquote{margin:14px 0 clamp(40px,6vw,80px);max-width:20ch} .approach .pullquote p{font-family:var(--f-display);font-weight:300;text-transform:none; font-size:clamp(1.8rem,4.4vw,4rem);line-height:1.04;letter-spacing:-.01em;max-width:24ch} .approach .pullquote p::before{content:"\201C";color:var(--green);margin-right:.05em} .approach .pullquote p::after{content:"\201D";color:var(--green)} .pullquote__by{display:flex;align-items:center;gap:16px;margin-top:30px} .pullquote__avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center; background:var(--light-maroon);color:var(--white);font-family:var(--f-display);font-weight:500;letter-spacing:.06em;font-size:.9rem} .pullquote__meta{font-size:.92rem;color:var(--maroon-text);line-height:1.4} .pullquote__meta strong{display:block;color:var(--light-maroon);font-weight:600;font-family:var(--f-body)} .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px)} .pillar{border-top:1.5px solid rgba(85,51,65,.2);padding-top:24px} .pillar__no{font-family:var(--f-display);font-weight:300;font-size:1.1rem;color:var(--green);letter-spacing:.1em} .pillar h3{margin:.5em 0 .35em} .pillar p{color:var(--maroon-text);font-size:1rem} /* ---- Hover-reveal overlay on cards (Floema product-hover) ---- */ .card-reveal{position:absolute;left:0;right:0;bottom:0;z-index:3; display:flex;align-items:center;gap:.5em; padding:14px 16px;color:#fff; font-family:var(--f-display);text-transform:uppercase;letter-spacing:.16em;font-size:.72rem; background:linear-gradient(0deg,rgba(28,20,22,.82),rgba(28,20,22,0)); transform:translateY(100%);opacity:0;transition:transform .55s var(--ease),opacity .55s var(--ease)} .card-reveal svg{width:16px;height:16px;transition:transform .55s var(--ease)} .blog-card-item__media,.product-photo-wrap{position:relative} .blog-card-item:hover .card-reveal,.product-photo-wrap:hover .card-reveal{transform:translateY(0);opacity:1} .blog-card-item:hover .card-reveal svg,.product-photo-wrap:hover .card-reveal svg{transform:translateX(4px)} /* ---- Secondary page: Residences ---- */ .res-hero{padding-top:clamp(120px,16vh,180px)} .res-hero h1{margin:.1em 0 .35em} .res-meta{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,64px);margin-top:38px; border-top:1.5px solid rgba(85,51,65,.18);padding-top:26px} .res-meta__item{display:flex;flex-direction:column;gap:2px} .res-meta__item strong{font-family:var(--f-display);font-weight:500;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1;color:var(--light-maroon)} .res-meta__item span{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.16em;font-size:.68rem;color:var(--maroon-text)} .res-pad0{padding-top:0} .res-banner{border-radius:var(--radius);overflow:hidden;aspect-ratio:21/9;position:relative} .res-banner img{width:100%;height:100%;object-fit:cover} /* reversed feature row (image on the right) */ .feature-row.rev{grid-template-columns:1fr 1.1fr} .feature-row.rev .feature-row__media{order:2} /* feature bullet list */ .res-features{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:9px 26px;margin:1.4em 0 1.8em} .res-features li{position:relative;padding-left:20px;color:var(--maroon-text);font-size:.97rem;line-height:1.5} .res-features li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;background:var(--green)} .pillars--4{grid-template-columns:repeat(4,1fr)} /* amenity category cards */ .amenity-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px;background:rgba(85,51,65,.12); border-radius:var(--radius);overflow:hidden} .amenity-card{background:var(--white);padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:13px; transition:background .4s var(--ease)} .amenity-card:hover{background:var(--cream-2)} .amenity-card__icon{width:34px;height:34px;color:var(--green)} .amenity-card h3{font-size:1.2rem} .amenity-list{list-style:none;display:flex;flex-direction:column;gap:7px;margin-top:2px} .amenity-list li{position:relative;padding-left:18px;color:var(--maroon-text);font-size:.94rem;line-height:1.45} .amenity-list li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--green)} /* community facility render cards */ .fac-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,34px)} .fac-card{display:flex;flex-direction:column;gap:14px} .fac-card__media{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3} .fac-card__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)} .fac-card:hover .fac-card__media img{transform:scale(1.05)} .fac-card h3{font-size:1.25rem;margin-bottom:.15em} .fac-card p{color:var(--maroon-text);font-size:.96rem} .res-banner--tall{aspect-ratio:16/9} .section--dark .pillar{border-top-color:rgba(255,255,255,.22)} .section--dark .pillar h3{color:#fff} .section--dark .pillar p{color:#cdb9c0} /* ---- site map centerpiece (Mapbox 3D satellite/terrain) ---- */ .scene3d{position:relative;height:100vh;min-height:620px;overflow:hidden;display:flex;align-items:flex-end; background:var(--maroon-deep)} #estateMap{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block} .scene3d.no3d #estateMap{display:none} .scene3d__fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0; filter:saturate(.85) brightness(.7)} /* readability scrim so the white headline holds over bright satellite imagery */ .scene3d::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(105deg,rgba(30,20,28,.78) 0%,rgba(30,20,28,.45) 34%,rgba(30,20,28,0) 62%), linear-gradient(0deg,rgba(30,20,28,.55) 0%,rgba(30,20,28,0) 30%)} .scene3d__overlay{position:relative;z-index:3;color:#fff;max-width:640px;padding:var(--gutter);margin-bottom:24px} .scene3d__overlay h2{color:#fff;margin:.2em 0 .4em} .scene3d__overlay .lede{color:#e3d2cd} .scene3d__hint{position:absolute;right:var(--gutter);bottom:34px;z-index:3;color:#cdb9c0; font-family:var(--f-display);text-transform:uppercase;letter-spacing:.18em;font-size:.7rem} /* centre label marker */ .estate-marker{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.14em;font-size:.62rem; font-weight:600;color:#1c1416;background:rgba(243,240,237,.94);padding:5px 10px;border-radius:4px; white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.35);transform:translateY(-8px)} .estate-marker::after{content:"";position:absolute;left:50%;bottom:-5px;width:9px;height:9px; background:inherit;transform:translateX(-50%) rotate(45deg)} /* MapLibre chrome: keep required attribution but make it quiet, sit above the scrim */ .scene3d .maplibregl-control-container{z-index:4} .scene3d .maplibregl-ctrl-bottom-right{bottom:88px} .scene3d .maplibregl-ctrl-attrib{background:rgba(30,20,28,.55);border-radius:4px 0 0 0} .scene3d .maplibregl-ctrl-attrib a{color:#e3d2cd} /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width:991px){ .feature-row,.feature-row:nth-child(even),.feature-row.rev{grid-template-columns:1fr} .feature-row:nth-child(even) .feature-row__media,.feature-row.rev .feature-row__media{order:0} .pillars--4{grid-template-columns:1fr 1fr} .amenity-grid{grid-template-columns:1fr 1fr} .fac-grid{grid-template-columns:1fr 1fr} .res-banner{aspect-ratio:16/9} .residences{grid-template-columns:1fr} .residences__info{position:static} .benefits{grid-template-columns:1fr} .partners-grid{grid-template-columns:repeat(2,1fr)} .blog-grid{grid-template-columns:1fr 1fr} .footer__top{grid-template-columns:1fr 1fr} } @media (max-width:767px){ .hero__scatter{display:none} /* clean text hero on narrow screens */ .scene3d{height:80vh;min-height:520px} .scene3d__hint{display:none} .sequence{height:420vh} /* ---- pinned gallery -> swipeable scroll-snap carousel ---- The JS pin only engages >=768px (tr-min-width). Below that, make the track a native horizontal swipe so all four slides are reachable. */ .gallery-track{position:static;height:auto;overflow:visible} [tr-scroll-toggle="list"]{overflow-x:auto;overflow-y:hidden;height:auto; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; padding:0 var(--gutter) 18px;scrollbar-width:none} [tr-scroll-toggle="list"]::-webkit-scrollbar{display:none} [tr-scroll-toggle="transform-x"]{height:auto;transform:none!important;gap:14px} .gallery-slide{flex:0 0 86vw;height:64vh;scroll-snap-align:center;border-radius:var(--radius);overflow:hidden} .gallery-pin{padding-block:60px} .gallery-count,.gallery-progress{display:none} /* swipe is self-evident */ .gallery-pin [tr-scroll-toggle="trigger"]{display:none} /* drop the 100vh pin spacer */ /* stack floating cards into a simpler vertical rhythm on mobile */ .floatscape{min-height:auto;padding-block:80px;flex-direction:column} .floatscape__head .big{font-size:22vw} .float-card{position:relative;width:80vw!important;max-width:none;left:auto!important;right:auto!important; top:auto!important;bottom:auto!important;margin:14px auto;aspect-ratio:4/3} .float-card:nth-child(even){margin-left:auto;margin-right:6vw} .float-card:nth-child(odd){margin-left:6vw;margin-right:auto} } @media (max-width:640px){ body{font-size:16px} /* full-screen mobile menu overlay (toggled by .nav-open). When open, strip the scrolled nav's backdrop-filter/background: a backdrop-filter on .nav makes it the containing block for the position:fixed overlay, collapsing inset:0 to the thin nav bar. */ .nav.nav-open{background:transparent!important;box-shadow:none!important; backdrop-filter:none!important;-webkit-backdrop-filter:none!important} .nav__menu{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px; position:fixed;inset:0;z-index:899; background:rgba(61,38,48,.97);backdrop-filter:blur(10px); transform:translateY(-100%);opacity:0;pointer-events:none; transition:transform .55s var(--ease),opacity .4s var(--ease)} .nav.nav-open .nav__menu{transform:translateY(0);opacity:1;pointer-events:auto} .nav__menu .nav-link{color:#f3f0ed;font-size:1.5rem;letter-spacing:.1em} .nav__menu .nav-link::after{background:var(--green)} /* socials drop to the bottom of the open overlay */ .nav__socials{display:none} .nav.nav-open .nav__socials{display:flex;position:fixed;left:50%;bottom:46px; transform:translateX(-50%);z-index:900;color:#f3f0ed;gap:22px} .nav__logo{position:relative;z-index:901;transition:opacity .3s var(--ease)} .nav.nav-open .nav__logo{opacity:0;pointer-events:none} /* black logo would clash with dark overlay */ .hamburger{display:flex;flex-direction:column;gap:5px;width:30px} .nav.nav-open .hamburger span{background:#f3f0ed} .nav.nav-open .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav.nav-open .hamburger span:nth-child(2){opacity:0} .nav.nav-open .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .steps{grid-template-columns:1fr} .pillars,.pillars--4{grid-template-columns:1fr} .res-features{grid-template-columns:1fr} .amenity-grid{grid-template-columns:1fr} .fac-grid{grid-template-columns:1fr} .res-meta{gap:24px} .residences__photos{grid-template-columns:1fr 1fr} .blog-grid{grid-template-columns:1fr} .partners-grid{grid-template-columns:1fr 1fr} .footer__top{grid-template-columns:1fr} .hero__tagline{font-size:.95rem} } @media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;transition-duration:.01ms!important} }