/* ============================================================ RAJHANS KRONIS — design system Regal: espresso · antique gold · ivory · cinematic ============================================================ */ :root{ --espresso-900:#211712; /* deepest */ --espresso-800:#2E211A; /* page bg */ --espresso-700:#3B2C24; /* panels / cards */ --espresso-600:#4A382E; --gold:#C9A24B; --gold-bright:#E3C271; --gold-deep:#9C7C3A; --gold-grad:linear-gradient(120deg,#E9CE86 0%,#C9A24B 42%,#9C7C3A 100%); --ivory:#F3ECE0; --cream:#C9BBA8; /* secondary text */ --faint:#A2927E; /* tertiary text — AA-compliant on espresso (5.1:1) */ --green-soft:#6E7A53; --line:rgba(201,162,75,.22); --line-soft:rgba(201,162,75,.12); --serif:"Cormorant Garamond", Georgia, serif; --display:"Cinzel", Georgia, serif; --script:"Pinyon Script", cursive; --sans:"Jost", system-ui, -apple-system, sans-serif; --maxw:1320px; --gut:clamp(22px,5vw,96px); --ease:cubic-bezier(.22,.61,.36,1); } *{box-sizing:border-box;margin:0;padding:0} /* overflow-x on alone does not stop iOS panning — it needs to be on the root too, or the page scrolls sideways into blank space. */ html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden} body{ font-family:var(--sans); background:var(--espresso-800); color:var(--ivory); font-weight:300; line-height:1.6; letter-spacing:.01em; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} em{font-style:italic} ::selection{background:var(--gold);color:var(--espresso-900)} /* keyboard focus — visible on every interactive element */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible, [tabindex]:focus-visible,.twr:focus-visible{ outline:2px solid var(--gold-bright);outline-offset:3px;border-radius:2px} .twr:focus-visible .tfill{stroke:var(--ivory);stroke-width:2} /* ---------- shared type ---------- */ .display{ font-family:var(--display); font-weight:500; line-height:1.08; letter-spacing:.005em; font-size:clamp(2.1rem,4.6vw,4.2rem); color:var(--ivory); } .sec-index{ font-family:var(--sans);font-weight:400;font-size:.72rem; letter-spacing:.34em;text-transform:uppercase;color:var(--gold); margin-bottom:22px; } .section{padding:clamp(72px,12vh,150px) 0;position:relative} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)} /* gold-gradient text helper */ .goldtext{ background:var(--gold-grad);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } /* ---------- buttons ---------- */ .btn{ display:inline-block;font-family:var(--sans);font-size:.72rem;font-weight:500; letter-spacing:.2em;text-transform:uppercase;color:var(--espresso-900); background:var(--gold);padding:15px 30px;border:1px solid var(--gold); cursor:pointer;transition:.45s var(--ease);border-radius:2px; } .btn:hover{background:var(--gold-bright);border-color:var(--gold-bright)} .btn--ghost{background:transparent;color:var(--gold);border-color:var(--gold)} .btn--ghost:hover{background:var(--gold);color:var(--espresso-900)} /* ---------- reveal ---------- */ /* base fade-up for plain blocks (not images, not display headings) */ .js .reveal:not(.reveal--img):not(.display){opacity:0;transform:translateY(16px);filter:blur(3px); transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)} .js .reveal:not(.reveal--img):not(.display).in{opacity:1;transform:none;filter:blur(0)} /* image clip-wipe + scale settle */ .reveal--img{overflow:hidden} .js .reveal--img img{clip-path:inset(0 0 100% 0);transform:scale(1.09);will-change:clip-path,transform; transition:clip-path 1s var(--ease),transform 1.15s var(--ease)} .js .reveal--img.in img{clip-path:inset(0 0 0 0);transform:scale(1)} /* display headings rise from behind a mask */ .display.reveal{overflow:hidden;padding-bottom:.08em} .js .display.reveal .disp-in{display:block;transform:translateY(116%);opacity:0; transition:transform 1s var(--ease),opacity 1s var(--ease)} .js .display.reveal.in .disp-in{transform:none;opacity:1} @media (prefers-reduced-motion:reduce){ .js .reveal,.js .reveal:not(.reveal--img):not(.display){opacity:1;transform:none;filter:none;transition:none} .js .reveal--img img{clip-path:none;transform:none} .js .display.reveal .disp-in{transform:none;opacity:1;transition:none} } /* ============================================================ NAV ============================================================ */ .nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center; justify-content:space-between;gap:24px;padding:20px var(--gut); transition:background .5s var(--ease),padding .5s var(--ease),box-shadow .5s var(--ease)} .nav.scrolled{background:rgba(33,23,18,.92);backdrop-filter:blur(10px); padding-top:14px;padding-bottom:14px;box-shadow:0 1px 0 var(--line-soft)} .nav__brand{display:flex;align-items:center;gap:12px;color:var(--gold)} .nav__crown{width:34px;height:24px;color:var(--gold)} .nav__crown svg{width:100%;height:100%} .nav__wm{font-family:var(--display);line-height:1;display:flex;flex-direction:column} .nav__wm em{font-style:normal;font-family:var(--serif);font-size:.78rem;letter-spacing:.16em; text-transform:uppercase;color:var(--cream)} .nav__wm strong{font-weight:600;font-size:1.04rem;letter-spacing:.16em;color:var(--ivory)} .nav__links{display:flex;gap:clamp(18px,2.4vw,38px)} .nav__links a{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cream); position:relative;padding:4px 0;transition:color .3s} .nav__links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px; background:var(--gold);transition:width .35s var(--ease)} .nav__links a:hover{color:var(--ivory)} .nav__links a:hover::after{width:100%} .nav__right{display:flex;align-items:center;gap:18px} .nav__cta{font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase; color:var(--gold);border:1px solid var(--gold);padding:11px 24px;border-radius:2px; transition:.4s var(--ease)} .nav__cta:hover{background:var(--gold);color:var(--espresso-900)} .nav__toggle{display:none;flex-direction:column;gap:6px;background:none;border:0;cursor:pointer;padding:6px} .nav__toggle span{width:26px;height:1.5px;background:var(--gold);display:block;transition:.4s} /* mobile menu */ .menu{position:fixed;inset:0;z-index:49;background:var(--espresso-900);color:var(--ivory); display:flex;flex-direction:column;justify-content:center;gap:8px;padding:0 var(--gut); transform:translateY(-100%);transition:transform .55s var(--ease);visibility:hidden} .menu.open{transform:none;visibility:visible} .menu nav{display:flex;flex-direction:column;gap:6px} .menu nav a{font-family:var(--display);font-size:clamp(1.8rem,7vw,2.6rem);color:var(--ivory);padding:8px 0} .menu nav a:hover{color:var(--gold)} .menu__meta{margin-top:30px;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)} /* ============================================================ HERO ============================================================ */ .hero{position:relative;height:100svh;min-height:640px;display:flex;flex-direction:column; justify-content:flex-end;overflow:hidden} .hero__media{position:absolute;inset:0;z-index:-1} .hero__media img{width:100%;height:100%;object-fit:cover; animation:heroZoom 24s var(--ease) forwards;will-change:transform; backface-visibility:hidden;transform:translateZ(0)} @keyframes heroZoom{from{transform:scale(1.05) translateZ(0)}to{transform:scale(1) translateZ(0)}} .hero__veil{position:absolute;inset:0;background: radial-gradient(120% 90% at 70% 30%,rgba(33,23,18,.10) 0%,rgba(33,23,18,.55) 70%,rgba(33,23,18,.9) 100%), linear-gradient(180deg,rgba(33,23,18,.55) 0%,rgba(33,23,18,0) 30%,rgba(33,23,18,.7) 100%)} .hero__inner{position:relative;padding:0 var(--gut);max-width:1180px;margin-bottom:clamp(36px,7vh,72px)} .hero__eyebrow{font-size:.74rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold); opacity:0;transform:translateY(14px);animation:up .9s var(--ease) .15s forwards} .hero__kicker{font-family:var(--script);font-size:clamp(2rem,4.4vw,3.4rem);color:var(--cream); line-height:1;margin:18px 0 -.18em;opacity:0;transform:translateY(14px); animation:up 1s var(--ease) .35s forwards} .hero__title{font-family:var(--display);font-weight:600; font-size:clamp(4.2rem,16vw,12rem);line-height:.9;letter-spacing:.04em; background:var(--gold-grad);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; position:relative;width:max-content; opacity:0;animation:crownIn 1.3s var(--ease) .55s forwards} .hero__title::after{content:"";position:absolute;inset:0; background:linear-gradient(105deg,transparent 35%,rgba(255,247,224,.75) 50%,transparent 65%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; background-size:280% 100%;background-position:180% 0; animation:sheen 4.5s var(--ease) 1.6s infinite} @keyframes crownIn{from{opacity:0;letter-spacing:.34em;transform:translateY(10px)} to{opacity:1;letter-spacing:.04em;transform:none}} @keyframes sheen{0%{background-position:180% 0}40%,100%{background-position:-120% 0}} .hero__rule{display:block;width:0;height:1px;background:var(--gold);margin:22px 0 0; animation:rule 1.1s var(--ease) 1.1s forwards} @keyframes rule{to{width:min(360px,60%)}} .hero__sub{margin-top:24px;max-width:40ch;font-family:var(--serif); font-size:clamp(1.05rem,1.7vw,1.4rem);line-height:1.5;color:var(--ivory); opacity:0;transform:translateY(14px);animation:up 1s var(--ease) 1.25s forwards} .hero__sub strong{color:var(--gold-bright);font-weight:500} @keyframes up{to{opacity:1;transform:none}} .hero__foot{position:relative;display:flex;justify-content:space-between;align-items:center; padding:22px var(--gut);border-top:1px solid var(--line); font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cream); opacity:0;animation:up 1s var(--ease) 1.5s forwards} .hero__scroll{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--gold)} .hero__scroll i{width:1px;height:34px;background:var(--gold); animation:scrolldn 2.2s var(--ease) infinite} @keyframes scrolldn{0%{transform:scaleY(0);transform-origin:top}40%{transform:scaleY(1);transform-origin:top} 60%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}} /* ============================================================ VISION + STATS ============================================================ */ .vision .display{max-width:18ch;margin-bottom:28px} .vision__lede{font-family:var(--serif);font-size:clamp(1.3rem,2vw,1.75rem);line-height:1.45; font-weight:300;color:var(--cream);max-width:46ch} .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,44px); margin-top:clamp(48px,7vw,96px);border-top:1px solid var(--line-soft);padding-top:clamp(40px,5vw,64px)} .stat__n{font-family:var(--display);font-weight:500;font-size:clamp(2.8rem,5.5vw,4.6rem); line-height:1;display:block;margin-bottom:14px; background:var(--gold-grad);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent} .stat__n--sm{letter-spacing:.01em} .stat p{color:var(--cream);max-width:24ch;font-size:.96rem} /* ============================================================ INTERACTIVE MASTER PLAN ============================================================ */ .mp{background:var(--espresso-900)} .mp__head .display{max-width:16ch} .mp__hint{margin-top:18px;color:var(--cream);max-width:48ch} .mp__app{max-width:var(--maxw);margin:clamp(40px,5vw,64px) auto 0;padding:0 var(--gut); display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,4vw,60px);align-items:start} .mp__plan{background:var(--espresso-700);border:1px solid var(--line);border-radius:8px;padding:18px} .mp__planhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px; font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cream)} .mp__legend{display:flex;align-items:center;gap:14px} .dot{display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:6px;vertical-align:-1px} .dot--4{background:var(--gold-deep)} .dot--5{background:var(--gold-bright)} #siteSvg{width:100%;height:auto;display:block;border-radius:4px} .mp__core{font-family:var(--serif);font-size:18px;letter-spacing:.18em;fill:rgba(243,236,224,.5)} .mp__road{font-family:var(--sans);font-size:11px;letter-spacing:.3em;fill:var(--gold);opacity:.75} /* touch-friendly tower chips — primary selector on mobile, hidden on desktop */ .mp__chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:2px} /* The instruction has to be unmissable — a visitor will not guess that ten small rectangles on a site plan are buttons. Gold, with a pointing mark. */ .mp__chiphint{display:flex;align-items:center;gap:9px; font-size:.78rem;letter-spacing:.14em;text-transform:uppercase; color:var(--gold);margin-top:18px;margin-bottom:10px;font-weight:400} .mp__chiphint::before{content:"";width:26px;height:1px;background:var(--gold);flex:0 0 auto} .mp__chip{min-width:46px;min-height:46px;font-family:var(--display);font-size:1.05rem; background:var(--espresso-600);border:1px solid var(--line);border-radius:6px;color:var(--ivory); cursor:pointer;transition:.25s var(--ease);position:relative} .mp__chip::after{content:"";position:absolute;right:6px;top:6px;width:6px;height:6px;border-radius:50%;background:var(--gold-deep)} .mp__chip.is5::after{background:var(--gold-bright)} .mp__chip.sel{background:var(--gold);color:var(--espresso-900);border-color:var(--gold)} /* towers */ .twr{cursor:pointer} .twr .tfill{fill:var(--gold-deep);stroke:rgba(243,236,224,.25);stroke-width:1; transition:fill .3s var(--ease),stroke .3s var(--ease)} .twr.is5 .tfill{fill:var(--gold-bright)} .twr text{font-family:var(--sans);font-size:15px;font-weight:500;fill:var(--espresso-900); text-anchor:middle;pointer-events:none} .twr:hover .tfill{fill:var(--gold)} .twr.sel .tfill{fill:var(--gold);stroke:var(--ivory);stroke-width:2} .twr:focus{outline:none} .twr:focus-visible .tfill{stroke:var(--ivory);stroke-width:2} /* detail panel */ .mp__detail{background:var(--espresso-700);border:1px solid var(--line);border-radius:8px; padding:clamp(22px,2.6vw,34px);position:sticky;top:96px} .mp__step{padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--line-soft)} .mp__steplabel{font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:10px} .mp__detail h3{font-family:var(--display);font-weight:500;font-size:1.5rem;color:var(--ivory)} .mp__meta{font-size:.9rem;color:var(--cream);margin-top:6px} .mp__floors{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:8px;max-height:200px;overflow:auto} .mp__floors button,.mp__units button{font-family:var(--sans);background:var(--espresso-600); border:1px solid var(--line-soft);color:var(--ivory);padding:10px 6px;border-radius:4px; cursor:pointer;font-size:.9rem;transition:.25s var(--ease)} .mp__floors button:hover,.mp__units button:hover{border-color:var(--gold);color:var(--gold-bright)} .mp__floors button.sel,.mp__units button.sel{background:var(--gold);color:var(--espresso-900);border-color:var(--gold)} .mp__units{display:grid;grid-template-columns:1fr 1fr;gap:10px} .mp__units button{display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;padding:12px 14px} .mp__units button small{font-size:.72rem;color:var(--cream)} .mp__units button.sel small{color:var(--espresso-900)} .mp__resrow{display:flex;justify-content:space-between;align-items:baseline;gap:16px; padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:.9rem} .mp__resrow span{color:var(--cream);letter-spacing:.04em} .mp__resrow strong{font-family:var(--serif);font-weight:500;font-size:1.1rem;color:var(--ivory)} .mp__indic{font-size:.72rem;color:var(--faint);margin:12px 0 0;font-style:italic} .mp__actions{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap} /* ============================================================ THE GROUP ============================================================ */ .group__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:center} .group__txt .display{margin:18px 0 26px;max-width:14ch} .group__p{color:var(--cream);max-width:50ch;font-family:var(--serif);font-size:1.18rem;line-height:1.55;margin-bottom:16px} .group__fig{overflow:hidden;border:1px solid var(--line);border-radius:6px} .group__fig img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3} /* ============================================================ LIFE AT KRONIS — editorial ============================================================ */ .life__head{max-width:18ch} .life__line{display:block} .life__head.is-anim{will-change:opacity} .life__head.is-anim .life__line{will-change:transform} .life__lede{margin-top:22px;font-family:var(--serif);font-size:clamp(1.2rem,1.8vw,1.6rem); line-height:1.5;color:var(--cream);max-width:46ch} .editorial{display:grid;grid-template-columns:1.15fr .85fr;align-items:center; gap:clamp(30px,5vw,80px);max-width:var(--maxw);margin:0 auto; padding:clamp(40px,6vw,90px) var(--gut)} .editorial--rev{grid-template-columns:.85fr 1.15fr} .editorial--rev .editorial__img{order:2} .editorial__img{overflow:hidden;border:1px solid var(--line);border-radius:6px} .editorial__img img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2} .editorial__txt h3{font-family:var(--display);font-weight:500;font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.1;margin-bottom:18px;color:var(--ivory)} .editorial__txt p{color:var(--cream);font-family:var(--serif);font-size:1.12rem;line-height:1.55;max-width:42ch} .life__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px);margin-top:clamp(30px,4vw,56px)} .life__cell{overflow:hidden;border:1px solid var(--line);border-radius:6px;position:relative} .life__cell img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4;transition:transform .9s var(--ease),clip-path 1s var(--ease)} .life__cell:hover img{transform:scale(1.05)} .life__cell figcaption{position:absolute;left:0;right:0;bottom:0;padding:24px 18px 16px; font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ivory); background:linear-gradient(transparent,rgba(20,14,10,.85))} /* ============================================================ THE CLUB ============================================================ */ .club{background:var(--espresso-900)} .club__head .display{max-width:14ch} .club__lede{margin-top:20px;color:var(--cream);max-width:52ch;font-family:var(--serif);font-size:1.16rem;line-height:1.55} .club__gallery{max-width:var(--maxw);margin:clamp(36px,5vw,60px) auto;padding:0 var(--gut); display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.6vw,20px)} .club__tile{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:6px} .club__tile--wide{grid-column:1 / -1} .club__tile img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10;transition:transform .9s var(--ease),clip-path 1s var(--ease)} .club__tile--wide img{aspect-ratio:24/7} .club__tile:hover img{transform:scale(1.04)} .club__tile figcaption{position:absolute;left:0;bottom:0;right:0;padding:30px 22px 18px; display:flex;align-items:baseline;gap:14px;font-family:var(--display);font-size:1.15rem;color:var(--ivory); background:linear-gradient(transparent,rgba(20,14,10,.9))} .club__tile figcaption span{font-family:var(--sans);font-size:.7rem;letter-spacing:.2em;color:var(--gold)} /* amenities directory */ .amen__dirhead{margin-bottom:clamp(26px,3.4vw,44px)} .amen__dirtitle{font-size:clamp(1.7rem,3.4vw,2.9rem);max-width:18ch;margin-top:8px} .amenex{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)} .amenex__tabs{display:flex;flex-wrap:wrap;gap:10px;border-bottom:1px solid var(--line);margin-bottom:28px} .amenex__tab{font-family:var(--sans);background:none;border:0;color:var(--cream);cursor:pointer; padding:14px 22px;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;position:relative; display:flex;align-items:center;gap:8px;transition:color .3s} .amenex__tab span{font-size:.66rem;color:var(--gold);opacity:.7} .amenex__tab::after{content:"";position:absolute;left:0;bottom:-1px;width:0;height:2px;background:var(--gold);transition:width .35s var(--ease)} .amenex__tab.is-active{color:var(--gold-bright)} .amenex__tab.is-active::after{width:100%} .amenex__list{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:2px 36px} .amenex__list li{font-family:var(--serif);font-size:1.12rem;color:var(--ivory);padding:11px 0 11px 20px; border-bottom:1px solid var(--line-soft);position:relative; transition:color .4s var(--ease),opacity .4s var(--ease)} .amenex__list li::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%) scale(.4); width:7px;height:7px;border-radius:50%;background:var(--gold);opacity:0; transition:opacity .4s var(--ease),transform .4s var(--ease)} .amenex__list li.hl{color:var(--gold-bright)} .amenex__list li.hl::before{opacity:1;transform:translateY(-50%) scale(1)} .amenex__list li.dim{opacity:.26} /* ============================================================ THE RESIDENCES ============================================================ */ .res__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,30px);margin-top:clamp(30px,4vw,48px)} .res__card{text-align:left;background:var(--espresso-700);border:1px solid var(--line);border-radius:8px; padding:clamp(28px,3vw,44px);cursor:pointer;transition:.4s var(--ease);color:var(--ivory)} .res__card:hover{border-color:var(--gold);transform:translateY(-4px)} .res__type{font-family:var(--sans);font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)} .res__area{font-family:var(--display);font-size:clamp(2rem,3.6vw,3rem);margin:14px 0 18px; background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .res__area span{display:block;-webkit-text-fill-color:var(--cream);color:var(--cream);font-family:var(--sans); font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;margin-top:6px} .res__desc{color:var(--cream);font-family:var(--serif);font-size:1.12rem;line-height:1.55;max-width:42ch} .res__view{display:inline-block;margin-top:22px;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)} .res__intgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.8vw,22px);margin-top:clamp(28px,3.6vw,48px)} .res__int{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:6px} .res__int img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10;transition:transform .9s var(--ease),clip-path 1s var(--ease)} .res__int:hover img{transform:scale(1.04)} .res__int figcaption{position:absolute;left:0;bottom:0;padding:26px 20px 14px;right:0; font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ivory); background:linear-gradient(transparent,rgba(20,14,10,.85))} .mp__dl{display:inline-block;margin-top:18px;font-size:.76rem;letter-spacing:.14em;color:var(--gold); border-bottom:1px solid var(--line)} .mp__dl:hover{color:var(--gold-bright)} /* ============================================================ SPECIFICATIONS ============================================================ */ .spec__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,60px);margin-top:clamp(36px,4vw,56px)} .spec__col h4{font-family:var(--display);font-weight:500;font-size:1.4rem;color:var(--gold-bright);margin-bottom:18px} .spec__col dl{display:grid;grid-template-columns:auto 1fr;gap:10px 18px} .spec__col dt{color:var(--gold);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;padding-top:3px} .spec__col dd{color:var(--ivory);font-family:var(--serif);font-size:1.08rem;line-height:1.4} .spec__broch p{color:var(--cream);font-family:var(--serif);font-size:1.1rem;margin-bottom:22px;max-width:32ch} /* ============================================================ LOCATION ============================================================ */ .loc{background:var(--espresso-900)} .loc__addr{margin-top:18px;color:var(--gold);font-size:.86rem;letter-spacing:.1em} .loc__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,4vw,64px);align-items:center;margin-top:clamp(36px,4vw,56px)} .loc__times{list-style:none;display:flex;flex-direction:column} .loc__times li{display:flex;align-items:baseline;gap:20px;padding:16px 0;border-bottom:1px solid var(--line-soft)} .loc__times strong{font-family:var(--display);font-size:clamp(1.6rem,2.6vw,2.2rem);min-width:120px; background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .loc__times strong em{font-family:var(--sans);font-size:.7rem;font-style:normal;letter-spacing:.16em; text-transform:uppercase;-webkit-text-fill-color:var(--cream);margin-left:4px} .loc__times span{color:var(--ivory);font-family:var(--serif);font-size:1.12rem} .loc__map{overflow:hidden;border:1px solid var(--line);border-radius:6px} .loc__map img{width:100%;display:block} /* ============================================================ ENQUIRY ============================================================ */ .enq__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,90px);align-items:start} .enq__lead .display{margin:16px 0 22px} .enq__copy{color:var(--cream);font-family:var(--serif);font-size:1.18rem;max-width:38ch} .enq__direct{display:flex;flex-direction:column;gap:10px;margin-top:30px} .enq__direct a{color:var(--gold);font-size:1.05rem;letter-spacing:.02em;width:max-content} .enq__direct a:hover{color:var(--gold-bright)} .enq__form{display:grid;gap:16px} .enq__form label{display:flex;flex-direction:column;gap:7px;font-size:.72rem;letter-spacing:.18em; text-transform:uppercase;color:var(--cream)} .enq__form input,.enq__form select{font-family:var(--serif);font-size:1.1rem;color:var(--ivory); background:var(--espresso-700);border:1px solid var(--line);border-radius:4px;padding:13px 15px; transition:border-color .3s} .enq__form input:focus,.enq__form select:focus{outline:none;border-color:var(--gold)} .btn--full{width:100%;margin-top:6px;text-align:center} .enq__note{font-size:.88rem;color:var(--gold-bright);min-height:1.2em;letter-spacing:.02em} /* ============================================================ FOOTER ============================================================ */ .foot{background:var(--espresso-900);padding:clamp(50px,7vw,80px) 0 40px;border-top:1px solid var(--line)} .foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(28px,4vw,56px); padding-bottom:40px;margin-bottom:30px;border-bottom:1px solid var(--line-soft)} .foot__brand .nav__wm{margin-bottom:14px} .foot__brand p{font-family:var(--script);font-size:1.5rem;color:var(--gold)} .foot__h{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:14px} .foot__col p{color:var(--cream);font-size:.94rem;line-height:1.7} .foot__col a{color:var(--cream)}.foot__col a:hover{color:var(--gold)} .foot__legal{display:flex;flex-direction:column;gap:8px;font-size:.74rem;color:var(--faint);letter-spacing:.04em} /* ============================================================ LIGHTBOX ============================================================ */ .lb{position:fixed;inset:0;z-index:200;background:rgba(20,14,10,.94);display:flex; align-items:center;justify-content:center;padding:5vw;opacity:0;visibility:hidden; transition:opacity .4s var(--ease)} .lb.open{opacity:1;visibility:visible} .lb img{max-width:100%;max-height:90vh;border:1px solid var(--line);border-radius:4px} .lb__close{position:absolute;top:24px;right:30px;background:none;border:0;color:var(--gold); font-size:1.6rem;cursor:pointer;opacity:.85} .lb__close:hover{opacity:1} /* ============================================================ RESPONSIVE ============================================================ */ /* ---------- tablet ---------- */ @media (max-width:920px){ .nav__links{display:none} .nav__toggle{display:flex} .mp__app{grid-template-columns:1fr} .mp__detail{position:static} .stats{grid-template-columns:1fr 1fr;gap:32px} .group__grid,.enq__grid,.loc__grid{grid-template-columns:1fr;gap:36px} .editorial,.editorial--rev{grid-template-columns:1fr;gap:26px} .editorial--rev .editorial__img{order:0} .club__gallery{grid-template-columns:1fr} .club__tile img,.club__tile--wide img{aspect-ratio:16/10} .amenex__list{grid-template-columns:1fr 1fr;gap:0 28px} .res__grid,.res__intgrid,.spec__grid,.life__grid{grid-template-columns:1fr 1fr} .foot__grid{grid-template-columns:1fr 1fr;gap:32px} } /* ---------- phone: layouts re-thought, not just stacked ---------- */ @media (max-width:620px){ :root{--gut:22px} .section{padding:clamp(56px,9vh,90px) 0} /* hero: tighter, type re-tuned for portrait */ .hero{min-height:560px} .hero__title{font-size:23vw;line-height:.92} .hero__kicker{font-size:8vw} .hero__sub{font-size:1.02rem;max-width:32ch} .hero__foot{padding:18px var(--gut);font-size:.62rem} .hero__foot span:first-child,.hero__foot span:last-child{display:none} .hero__foot{justify-content:center} /* one-column content with comfortable rhythm */ .stats{grid-template-columns:1fr;gap:0} .stat{display:flex;align-items:baseline;gap:18px;padding:18px 0;border-bottom:1px solid var(--line-soft)} .stat__n{margin-bottom:0;font-size:3rem;min-width:120px} .stat p{font-size:.92rem} .editorial__img img{aspect-ratio:4/3} .life__grid,.res__grid,.res__intgrid,.spec__grid{grid-template-columns:1fr;gap:14px} .life__cell img{aspect-ratio:16/11} .amenex__list{grid-template-columns:1fr} .amenex__tabs{gap:2px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch} .amenex__tab{padding:13px 14px;white-space:nowrap;font-size:.74rem} /* master plan: keep the interactive map (chips stay hidden) */ .mp__plan{padding:12px} .mp__floors{grid-template-columns:repeat(auto-fill,minmax(52px,1fr))} .mp__floors button,.mp__units button{min-height:48px} /* location: list above the map, larger numerals */ .loc__times li{padding:14px 0;gap:14px} .loc__times strong{min-width:84px;font-size:1.7rem} /* footer single column, generous */ .foot__grid{grid-template-columns:1fr;gap:26px} .res__card{padding:26px} } /* ============================================================ MOBILE REFINEMENTS (chips-only master plan · filtered amenities) ============================================================ */ @keyframes mpReveal{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @media (max-width:620px){ /* master plan: interactive map kept; detail opens only after a tower is chosen */ .mp__detail{display:none} .mp--active .mp__detail{display:block;animation:mpReveal .45s var(--ease)} /* amenities: filter to ONE category; hide the rest and the 'All' tab */ .amenex__tab[data-cat="all"]{display:none} .amenex__list[data-filter="wellness"] li:not([data-cat="wellness"]), .amenex__list[data-filter="sport"] li:not([data-cat="sport"]), .amenex__list[data-filter="social"] li:not([data-cat="social"]){display:none} .amenex__list li.dim{opacity:1} .amenex__list li.hl{color:var(--ivory)} .amenex__list li.hl::before{opacity:0} .amenex__list li{padding-left:0} } /* ── WhatsApp direct line (added 29/07/2026) ────────────────────────────── Sits under the phone/email block in the enquiry section. Deliberately NOT a floating bubble — those cover content on phones and read as a plugin rather than part of the design. */ .enq__wa{ display:inline-flex;align-items:center;gap:.6em;margin-top:1.6em; padding:13px 22px 13px 18px;border-radius:999px; border:1px solid var(--gold-deep);color:var(--gold-bright); font-size:14px;letter-spacing:.02em;text-decoration:none; background:transparent;transition:background .5s cubic-bezier(.32,.72,0,1), border-color .5s cubic-bezier(.32,.72,0,1),color .5s cubic-bezier(.32,.72,0,1); } .enq__wa svg{width:19px;height:19px;flex:none} .enq__wa:hover,.enq__wa:focus-visible{ background:var(--gold);border-color:var(--gold);color:var(--espresso-900); } .enq__wa:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px} @media (max-width:700px){ .enq__wa{width:100%;justify-content:center;padding-left:22px} } /* ============================================================ DENSITY — "Two homes. One floor." (added with the masterplan promotion). Drawn rather than photographed on purpose: every render on this page can be doubted, a floor plate cannot. ============================================================ */ .density__lede{color:var(--cream);max-width:56ch;margin-top:1.1em;line-height:1.62} .density__lede b{color:var(--gold);font-weight:400} .homes{margin:clamp(30px,4.5vw,52px) auto 0} .homes svg{width:100%;height:auto;display:block;overflow:visible} .dunit{cursor:pointer} .dunit:focus{outline:none} .dcore{fill:none;stroke:var(--faint);stroke-width:1;stroke-dasharray:3 3} .dcorelabel{fill:var(--faint);font-size:10px;letter-spacing:.12em} .dlobby{stroke:var(--gold);stroke-width:2} @media (prefers-reduced-motion:reduce){ .js .homes svg .dhome{stroke-dasharray:none;stroke-dashoffset:0} .js .homes svg .droom,.js .homes svg .dliving,.js .homes svg .ddeck, .js .homes svg .droomn,.js .homes svg .droomlab{opacity:1} } /* ============================================================ GALLERY FAN — ported from the Digiflexx work deck, restyled to espresso/gold. No-JS default is a plain horizontal rail; the fan is layered on only when JS runs. ============================================================ */ .fan-head{display:flex;justify-content:space-between;align-items:flex-end;gap:26px;flex-wrap:wrap; margin-top:clamp(56px,8vw,96px)} .fan-head p{max-width:42ch;color:var(--cream);font-size:15px;line-height:1.65;padding-bottom:8px} .fan-stage{display:flex;gap:16px;overflow-x:auto;padding:clamp(26px,4vh,44px) var(--gut) 16px; -webkit-overflow-scrolling:touch} .fan-stage:focus-visible{outline:2px solid var(--gold-bright);outline-offset:4px} .fan-stage.is-fan{display:block;position:relative;overflow:visible; height:clamp(430px,56vh,560px);margin-top:clamp(24px,4vh,42px);padding:0; touch-action:pan-y;cursor:grab} .fan-stage.is-fan.dragging{cursor:grabbing} .fan-card{position:relative;flex:0 0 auto;width:clamp(196px,21vw,272px);margin:0; border-radius:3px;background:var(--espresso-700);border:1px solid var(--line); overflow:hidden;box-shadow:0 30px 64px -34px rgba(0,0,0,.72); user-select:none;-webkit-user-drag:none;display:block} .is-fan .fan-card{position:absolute;left:50%;top:2%; margin-left:calc(clamp(196px,21vw,272px)/-2); transform-origin:50% 240%;will-change:transform,opacity} .fan-card img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;pointer-events:none} .fan-card.is-active{border-color:var(--gold)} .fan-chip{position:absolute;top:10px;left:10px;z-index:2;font-size:9px;letter-spacing:.16em; text-transform:uppercase;padding:5px 11px;border-radius:30px; background:rgba(33,23,18,.66);color:var(--ivory);backdrop-filter:blur(6px)} .fan-meta{padding:12px 14px 14px;background:var(--espresso-700)} .fan-meta b{font-family:var(--display);font-weight:500;font-size:14px;color:var(--ivory); letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block} .fan-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap; margin-top:clamp(18px,3vh,32px);position:relative;z-index:120} .fan-count{font-size:.72rem;letter-spacing:.22em;color:var(--faint);font-variant-numeric:tabular-nums} .fan-ctrls{display:flex;gap:12px} .fan-btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:transparent; color:var(--cream);font-size:16px;display:grid;place-items:center;cursor:pointer; transition:border-color .3s,color .3s,transform .16s var(--ease)} .fan-btn:hover{border-color:var(--gold);color:var(--gold)} .fan-btn:active{transform:scale(.94)} @media (max-width:700px){ .fan-stage.is-fan{height:clamp(390px,64vh,480px)} .fan-head p{padding-bottom:0} } /* ---------- YouTube facade ---------- A real embed pulls ~1 MB of player script on page load whether or not anyone watches. This is a poster plus a play button; the iframe is only created on click. ---------------------------------------------------- */ .ytlite{position:relative;cursor:pointer;background:var(--espresso-900); border:1px solid var(--line);border-radius:3px;overflow:hidden;aspect-ratio:16/9} .ytlite img{width:100%;height:100%;object-fit:cover;display:block; transition:transform 1.2s var(--ease),opacity .5s var(--ease)} .ytlite:hover img{transform:scale(1.04)} .ytlite__play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none} .ytlite__play svg{width:74px;height:52px;fill:var(--gold); filter:drop-shadow(0 6px 22px rgba(0,0,0,.6));transition:fill .35s var(--ease),transform .35s var(--ease)} .ytlite:hover .ytlite__play svg{fill:var(--gold-bright);transform:scale(1.06)} .ytlite iframe{width:100%;height:100%;border:0;display:block} .group__cap{margin-top:12px;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)} /* ---------- site plan: drawing conventions ---------- */ .mp__bound{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:7 5} .mp__drive{fill:none;stroke:var(--faint);stroke-width:9;opacity:.20} .mp__water{fill:#4B6B78;opacity:.55} .mp__path{fill:none;stroke:var(--faint);stroke-width:1.4;opacity:.5;stroke-dasharray:4 4} .mp__leaf{fill:var(--faint);font-size:9px;letter-spacing:.22em} .mp__club{fill:var(--espresso-600);stroke:var(--gold-deep);stroke-width:1} .mp__clublab{fill:var(--cream);font-size:9px;letter-spacing:.16em} .mp__gate{fill:var(--gold);opacity:.8} .mp__gatelab{fill:var(--gold);font-size:8.5px;letter-spacing:.2em} .mp__roadline{stroke:var(--faint);stroke-width:1;stroke-dasharray:14 12;opacity:.5} .mp__north line{stroke:var(--faint);stroke-width:1} .mp__north path{fill:var(--gold)} .mp__north text{fill:var(--faint);font-size:9px;letter-spacing:.14em} .tcore{fill:none;stroke:var(--espresso-900);stroke-width:1;opacity:.55} .twr.is-sel .tcore,.twr:hover .tcore{opacity:.8} /* At phone width the whole diagram scales to ~0.8, so the deck strip's label falls below readable size however it is set. Drop it rather than ship 4-pixel type — the strip still reads as the deck by position. */ @media (max-width:640px){ .droomlab--xs{display:none} .homes{margin-left:calc(var(--gut) * -0.5);margin-right:calc(var(--gut) * -0.5)} } /* The film's whole value is that Sachin Tendulkar is in it — a play button centred over his face throws that away. Sit it in the lower-left instead. */ .ytlite__play--corner{inset:auto auto 14px 14px;display:block} .ytlite__play--corner svg{width:54px;height:38px} @media (max-width:640px){ .ytlite__play--corner svg{width:44px;height:31px} } /* Map link. The map is a key plan with type and a logo at its edges, so it keeps its own aspect ratio and is never scaled or clipped. */ .loc__map{overflow:visible} .loc__map img{width:100%;height:auto;object-fit:contain} .loc__maplink{display:inline-flex;align-items:center;gap:9px;margin-top:16px; font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold); border:1px solid var(--line);border-radius:2px;padding:11px 18px; transition:border-color .35s var(--ease),background .35s var(--ease),color .35s var(--ease)} .loc__maplink svg{width:15px;height:15px} .loc__maplink:hover{border-color:var(--gold);background:var(--gold);color:var(--espresso-900)} /* The swing/zen editorials became text: their photographs are already in the gallery fan, and 1,900px of image-plus-caption to say it twice is the kind of length that reads as padding rather than confidence. */ .life__more{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px); margin-top:clamp(28px,4vw,48px)} .life__more p{color:var(--cream);font-size:15px;line-height:1.66;max-width:46ch} .life__more b{color:var(--ivory);font-weight:400;font-family:var(--serif); font-size:1.12em;display:block;margin-bottom:.28em} @media (max-width:760px){ .life__more{grid-template-columns:1fr;gap:20px} } /* The link sits with the drawing it opens, not adrift under the heading. */ .loc__mapfoot{display:flex;align-items:center;justify-content:space-between;gap:16px; flex-wrap:wrap;margin-top:14px} .loc__mapfoot>span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)} .loc__mapfoot .loc__maplink{margin-top:0} /* ---------- touch targets ---------- Audited 29/07: the hamburger was 38x21 and the lightbox close 20x30, both well under the 44px minimum. On a mobile-first launch these are the two controls people miss — open the menu, and escape a full-screen floor plan. */ .nav__toggle{width:46px;height:46px;align-items:center;justify-content:center;margin-right:-8px} .lb__close{min-width:46px;min-height:46px;display:grid;place-items:center;font-size:22px} .spec__sub{font-family:var(--display);font-size:.92rem;letter-spacing:.1em; color:var(--gold);margin-bottom:.5em} /* footer contact links were 27px tall — thumb-sized, and they are the conversion path once someone has decided. */ .enq__direct a,.foot a[href^="tel:"],.foot a[href^="mailto:"]{ display:inline-flex;align-items:center;min-height:44px;padding:6px 0} /* the brand lock-up is a link home; give it a thumb-sized box */ .nav__brand{min-height:44px} /* The lightbox must outrank everything. The fan writes inline z-index up to 100 on its cards and its controls sit at 120, so at the old value of 90 an open plan was overlaid by the very card that opened it (caught on an iPhone, 29/07/2026). Anything added later stays below 200. */ .lb__close{z-index:201} /* Tower footprints are controls; give them a visible affordance so the plan does not read as a flat picture. */ .twr{cursor:pointer} .twr .tfill{transition:fill .3s var(--ease),stroke .3s var(--ease)} .twr:hover .tfill,.twr:focus-visible .tfill{stroke:var(--gold-bright);stroke-width:2} @media (max-width:760px){ /* on a phone the chips are the primary way in — the SVG towers are small */ .mp__chip{min-width:52px;min-height:52px;font-size:1.15rem} .mp__chiphint{font-size:.82rem} } /* The fan's cards are absolutely positioned and rotated up to ~31deg about an origin 240% below themselves, so the outer ones swing well past the viewport. With overflow:visible on the stage that extended the document by 248px at 500px wide (measured 29/07) and every section below scrolled sideways into blank. `clip` contains it without creating a scroll container, so sticky and the fan's own overlap still work. */ .res.section{overflow-x:clip} @supports not (overflow-x:clip){ .res.section{overflow-x:hidden} } /* ---------- lightbox gallery navigation ---------- Only shown when a group was passed (the fan); floor plans open alone. Must sit above .lb (200) but with the close button, which is 201. */ .lb__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:201; width:46px;height:46px;border-radius:50%;display:none;place-items:center; background:rgba(33,23,18,.6);border:1px solid var(--line);color:var(--cream); font-size:17px;cursor:pointer;backdrop-filter:blur(6px); transition:border-color .3s var(--ease),color .3s var(--ease),opacity .3s} .lb.has-group .lb__nav{display:grid} .lb__nav--prev{left:clamp(10px,3vw,28px)} .lb__nav--next{right:clamp(10px,3vw,28px)} .lb__nav:hover{border-color:var(--gold);color:var(--gold)} .lb__nav:disabled{opacity:.28;cursor:default} .lb__count{position:absolute;left:0;right:0;bottom:clamp(14px,3vh,26px);z-index:201; text-align:center;font-size:.72rem;letter-spacing:.22em;color:var(--faint); font-variant-numeric:tabular-nums;display:none} .lb.has-group .lb__count{display:block} /* ---------- blueprint sheets ---------- The earlier attempts failed because gold-on-espresso is warm-on-warm: no hue contrast, so a highlight had nothing to be brighter than. A cyanotype sheet gives both hue AND value separation, and it is not an arbitrary palette change — a plan is blue because plans are blue. The sheets read as artefacts laid on the page; the page keeps its espresso and gold. */ .bp-sheet{fill:#0E2C49} .bp-fine,.bp-major{pointer-events:none} .bp-frame{fill:none;stroke:#DCEBF7;stroke-opacity:.34;stroke-width:.7} .bp-edge{fill:none;stroke:#9FC6E2;stroke-opacity:.75;stroke-width:1.1} .bp-type{fill:#EAF3FA;font-family:var(--display);font-size:15px;letter-spacing:.1em} .bp-area{fill:#BEDCF2;font-family:var(--serif);font-size:20px} .bp-rule{stroke:#9FC6E2;stroke-opacity:.5;stroke-width:1} .bp-cta{fill:var(--gold-bright);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase} .dunit{cursor:pointer} .dunit .bp-sheet,.dunit .bp-edge{transition:fill .4s var(--ease),stroke-opacity .4s var(--ease)} .dunit:hover .bp-sheet,.dunit:focus-visible .bp-sheet{fill:#12395E} .dunit:hover .bp-edge,.dunit:focus-visible .bp-edge{stroke-opacity:1} .dunit:hover .bp-cta,.dunit:focus-visible .bp-cta{fill:#FFF} .dunit:focus{outline:none} .dfloor{stroke:var(--line);stroke-width:1;stroke-dasharray:5 6;opacity:.5}