/* ============================================================ V1 REALTORS — DESIGN SYSTEM Palette: ivory / champagne gold / bronze / charcoal / beige Type: Cormorant Garamond (display) + Jost (body / UI) Signature: thin gold architectural line motif (from logo mark) Fonts are loaded via in each page's — not @import — so the browser can fetch them in parallel with this stylesheet instead of after it. ============================================================ */ :root{ --ivory: #FAF6EF; --ivory-deep: #F1EBDF; --beige: #E7DFD0; --charcoal: #1B1815; --charcoal-70: rgba(27,24,21,.7); --charcoal-45: rgba(27,24,21,.45); --champagne: #B79665; --champagne-lt: #D6BE95; --bronze: #8A6A42; --line: rgba(27,24,21,.12); --line-lt: rgba(250,246,239,.22); --white: #FFFFFF; --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'Jost', 'Helvetica Neue', Arial, sans-serif; --container: 1240px; --gutter: clamp(24px, 5vw, 72px); --radius: 2px; --header-h: 94px; --ease: cubic-bezier(.22,.61,.36,1); } *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 8px); } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } body{ margin:0; background: var(--ivory); color: var(--charcoal); font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } button{ font-family: inherit; cursor:pointer; } input, select, textarea{ font-family: inherit; } ul{ list-style:none; margin:0; padding:0; } h1,h2,h3,h4,p{ margin:0; } .container{ max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } /* focus visibility */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{ outline: 1.5px solid var(--champagne); outline-offset: 3px; } /* ---------- Typography helpers ---------- */ .eyebrow{ font-family: var(--font-body); font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--bronze); font-weight: 500; } .eyebrow.on-dark{ color: var(--champagne-lt); } .display-xl{ font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 6.4vw, 84px); line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; } .display-lg{ font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 4.2vw, 54px); line-height: 1.1; letter-spacing: -.01em; text-wrap: balance; } .display-md{ font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 3vw, 38px); line-height: 1.18; letter-spacing: -.005em; text-wrap: balance; } .lede{ font-size: clamp(16px, 1.4vw, 19px); font-weight: 400; color: var(--charcoal-70); line-height: 1.7; } .rule{ width: 56px; height: 1px; background: linear-gradient(90deg, var(--champagne), transparent); } .rule.center{ margin-inline:auto; } @media (max-width: 480px){ .eyebrow{ letter-spacing: .18em; } } /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding: 16px 34px; min-height: 50px; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; border: 1px solid transparent; border-radius: var(--radius); transition: all .45s var(--ease); white-space: nowrap; } .btn-primary{ background: var(--charcoal); color: var(--ivory); border-color: var(--charcoal); } .btn-primary:hover{ background: var(--bronze); border-color: var(--bronze); color:#fff; } .btn-line{ background: transparent; color: var(--charcoal); border-color: var(--charcoal-45); } .btn-line:hover{ border-color: var(--charcoal); background: var(--charcoal); color: var(--ivory); } .btn-line.on-dark{ color: var(--ivory); border-color: var(--line-lt); } .btn-line.on-dark:hover{ background: var(--ivory); color: var(--charcoal); border-color: var(--ivory); } .btn-gold{ background: transparent; color: var(--champagne-lt); border-color: var(--champagne); } .btn-gold:hover{ background: var(--champagne); color: var(--charcoal); } .btn-arrow{ transition: transform .4s var(--ease); } .btn:hover .btn-arrow{ transform: translateX(4px); } /* Tertiary text-link — used for per-item actions so boxed buttons stay reserved for true primary calls to action (nav, hero, footer CTA, forms) */ .link-arrow{ display:inline-flex; align-items:center; gap: 8px; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--charcoal); position: relative; padding-bottom: 3px; } .link-arrow::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background: var(--champagne); transition: right .35s var(--ease); } .link-arrow:hover::after{ right:0; } .link-arrow:hover{ color: var(--bronze); } .link-arrow .btn-arrow{ transition: transform .4s var(--ease); } .link-arrow:hover .btn-arrow{ transform: translateX(4px); } .link-arrow.on-dark{ color: var(--ivory); } .link-arrow.on-dark:hover{ color: var(--champagne-lt); } /* ---------- Nav ---------- */ .site-header{ position: fixed; inset: 0 0 auto 0; z-index: 500; min-height: var(--header-h); display:flex; align-items:center; transition: background .5s var(--ease), border-color .5s var(--ease), box-shadow .4s var(--ease); border-bottom: 1px solid transparent; } .site-header.is-scrolled{ background: rgba(250,246,239,.94); backdrop-filter: blur(10px); border-bottom-color: var(--line); box-shadow: 0 12px 30px -20px rgba(27,24,21,.3); } .site-header .container{ width:100%; } .nav-row{ display:flex; align-items:center; justify-content:space-between; gap: 24px; } .brand{ display:flex; align-items:center; gap:10px; font-family: var(--font-display); font-size: 22px; letter-spacing:.04em; color: var(--charcoal); flex-shrink:0; } .site-header.on-dark-hero:not(.is-scrolled) .brand, .site-header.on-dark-hero:not(.is-scrolled) .nav-links a, .site-header.on-dark-hero:not(.is-scrolled) .hamburger span{ color: var(--ivory); } .site-header.on-dark-hero:not(.is-scrolled) .hamburger span{ background: var(--ivory); } .brand-mark{ width: 30px; height: 30px; flex-shrink:0; } .brand-word{ font-weight:500; } .brand-word b{ font-weight:600; color: var(--bronze); } .brand-v{ font-family: var(--font-display); } .brand-one{ font-family: var(--font-body); font-weight: 600; color: var(--bronze); margin-left: 1px; } .nav-links{ display:flex; align-items:center; gap: 30px; } .nav-links a{ font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; position:relative; padding-bottom:4px; white-space: nowrap; } .nav-links a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background: var(--champagne); transition: right .35s var(--ease); } .nav-links a:hover::after, .nav-links a.is-active::after{ right:0; } .nav-links a.is-active{ color: var(--bronze); } /* "Dwarka Expressway" is the longest nav label — allow it a controlled, centered two-line wrap rather than an awkward natural break if the viewport ever sits right at the nav breakpoint edge. */ .nav-links a.nav-dwarka{ white-space: normal; text-align: center; line-height: 1.3; max-width: 104px; } .nav-cta{ display:flex; align-items:center; gap:16px; } .nav-enquire{ padding: 12px 24px; min-height: 42px; font-size: 11.5px; } .hamburger{ display:none; flex-direction:column; gap:5px; width: 30px; height: 44px; padding: 6px 0; background:none; border:none; justify-content:center; } .hamburger span{ display:block; height:1px; width:100%; background: var(--charcoal); transition: transform .35s var(--ease), opacity .3s var(--ease), background .3s; } .hamburger.is-open span:nth-child(1){ transform: translateY(6px) rotate(45deg); } .hamburger.is-open span:nth-child(2){ opacity:0; } .hamburger.is-open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); } .mobile-menu{ position: fixed; inset:0; background: var(--charcoal); z-index: 480; display:flex; flex-direction:column; justify-content:center; padding: 40px var(--gutter); transform: translateY(-100%); transition: transform .55s var(--ease); } .mobile-menu.is-open{ transform: translateY(0); } .mobile-menu a{ display:block; color: var(--ivory); font-family: var(--font-display); font-size: clamp(30px,8vw,44px); padding: 12px 0; border-bottom: 1px solid var(--line-lt); } .mobile-menu .btn{ margin-top: 28px; } .mobile-menu-foot{ margin-top: 40px; color: var(--champagne-lt); font-size: 13px; letter-spacing: .1em; } @media (max-width: 1180px){ .nav-links{ display:none; } .hamburger{ display:flex; } } @media (max-width: 620px){ .nav-cta .nav-enquire{ display:none; } } /* ---------- Hero ---------- */ .hero{ position: relative; min-height: 100svh; display:grid; grid-template-columns: 46% 54%; background: var(--charcoal); overflow:hidden; } .hero-top-fade{ position:absolute; inset:0 0 auto 0; height:170px; z-index:6; background: linear-gradient(180deg, rgba(16,14,12,.6), transparent); pointer-events:none; } .hero-panel{ position:relative; } .hero-panel--text{ display:flex; align-items:flex-end; padding: calc(var(--header-h) + clamp(40px, 8vw, 74px)) clamp(28px, 4vw, 64px) clamp(56px, 7vw, 88px) var(--gutter); background: radial-gradient(140% 100% at 0% 100%, rgba(183,150,101,.10), transparent 60%), linear-gradient(165deg, #241f19 0%, #1b1815 55%, #100e0c 100%); } .hero-panel--media{ position:relative; overflow:hidden; background: var(--charcoal); } .hero-panel--media .hero-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit: cover; object-position: center 58%; } .hero-panel--media .hero-media-edge{ position:absolute; inset:0 auto 0 0; width: 14%; background: linear-gradient(90deg, rgba(27,24,21,.9), transparent); z-index:1; } .hero-panel--media .arch-lines{ position:absolute; inset:0; opacity:.28; z-index:2; mix-blend-mode: overlay; } .hero-content{ max-width: 480px; } .hero-content .eyebrow{ margin-bottom: 22px; display:block; } .hero-content h1{ font-family: var(--font-display); color: var(--ivory); font-size: clamp(36px, 4.6vw, 60px); line-height: 1.06; letter-spacing: -.015em; font-weight: 400; text-wrap: balance; } .hero-content .lede{ color: rgba(250,246,239,.78); margin-top: 22px; max-width: 440px; } .hero-actions{ margin-top: 36px; display:flex; flex-wrap:wrap; gap: 16px; } .hero-foot{ margin-top: 48px; display:flex; flex-wrap:wrap; align-items:center; gap: 14px; row-gap: 8px; color: rgba(250,246,239,.6); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; } .hero-foot .dot{ width:4px; height:4px; border-radius:50%; background: var(--champagne); } .hero-mark{ position:absolute; right: 22px; bottom: 40px; z-index:5; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10.5px; letter-spacing: .32em; text-transform: uppercase; color: rgba(250,246,239,.85); text-shadow: 0 1px 10px rgba(0,0,0,.6), 0 0 2px rgba(0,0,0,.4); } .hero-scroll{ position:absolute; left: 24px; bottom: 40px; z-index:5; display:flex; flex-direction:column; align-items:center; gap:10px; color: rgba(250,246,239,.55); } .hero-scroll .line{ width:1px; height:46px; background: linear-gradient(180deg, var(--champagne), transparent); } @media (max-width: 900px){ .hero{ grid-template-columns: 1fr; grid-template-rows: 46vh auto; min-height:0; } .hero-panel--media{ order:1; } .hero-panel--text{ order:2; padding: 56px var(--gutter) 64px; align-items:flex-start; } .hero-panel--media .hero-media-edge{ inset:auto 0 0 0; width:100%; height:30%; background: linear-gradient(0deg, rgba(27,24,21,.95), transparent); } .hero-content{ max-width: 100%; } .hero-mark, .hero-scroll{ display:none; } .hero-top-fade{ display:none; } } /* page hero (interior pages) */ .page-hero{ position:relative; padding: calc(var(--header-h) + clamp(40px, 8vw, 96px)) 0 clamp(60px, 8vw, 90px); background: var(--charcoal); overflow:hidden; } .page-hero::before{ content:""; position:absolute; inset:0; background: linear-gradient(160deg, #241f19 0%, #1b1815 60%, #100e0c 100%); } .page-hero .container{ position:relative; z-index:2; } .page-hero .eyebrow{ margin-bottom:18px; } .page-hero h1{ font-family: var(--font-display); color: var(--ivory); font-size: clamp(34px, 5vw, 58px); max-width: 720px; } .page-hero .lede{ color: rgba(250,246,239,.72); max-width: 560px; margin-top: 18px; } /* ---------- Section scaffolding ---------- */ section{ position:relative; } .section{ padding: clamp(72px,10vw,132px) 0; } .section.tight{ padding: clamp(52px,7vw,90px) 0; } .section-head{ max-width: 640px; margin-bottom: clamp(44px, 6vw, 68px); } .section-head.center{ margin-inline:auto; text-align:center; } .section-head .eyebrow{ margin-bottom: 16px; } .section-head h2{ margin-top: 14px; } .section-head .lede{ margin-top: 18px; } .section-foot{ margin-top: 52px; display:flex; justify-content:center; } .bg-ivory-deep{ background: var(--ivory-deep); } .bg-charcoal{ background: var(--charcoal); color: var(--ivory); } .bg-charcoal .lede{ color: rgba(250,246,239,.72); } .bg-charcoal .eyebrow{ color: var(--champagne-lt); } /* ---------- Intro (2) ---------- */ .intro-grid{ display:grid; grid-template-columns: .85fr 1fr; gap: clamp(40px, 6vw, 90px); align-items:start; } .intro-grid .display-lg{ letter-spacing:.005em; } .intro-copy p + p{ margin-top: 18px; } .intro-stats{ display:flex; gap: clamp(28px,5vw,56px); margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); } .intro-stats .stat b{ display:block; font-family: var(--font-display); font-size: 34px; color: var(--bronze); font-weight: 500; } .intro-stats .stat span{ font-size: 11.5px; letter-spacing:.12em; text-transform:uppercase; color: var(--charcoal-70); } @media (max-width: 860px){ .intro-grid{ grid-template-columns: 1fr; } } /* ---------- V1 Difference (3) — editorial index row, not a feature-box grid ---------- */ .difference-grid{ display:flex; flex-wrap:wrap; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .diff-item{ position:relative; flex: 1 1 0; min-width: 220px; padding: 46px 34px; border-right: 1px solid var(--line); overflow:hidden; } .diff-item::before{ content:""; position:absolute; top:-1px; left:0; right:100%; height:2px; background: var(--champagne); transition: right .5s var(--ease); } .diff-item:hover::before{ right:0; } .diff-item:last-child{ border-right:0; } .diff-index{ font-family: var(--font-display); font-style: italic; color: var(--champagne); font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 22px; display:block; } .diff-item h3{ font-family: var(--font-body); font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--charcoal); margin-bottom: 14px; transition: color .35s var(--ease); } .diff-item:hover h3{ color: var(--bronze); } .diff-item p{ font-size: 14.5px; color: var(--charcoal-70); line-height:1.72; } @media (max-width: 900px){ .diff-item{ flex: 1 1 50%; border-bottom: 1px solid var(--line); } .diff-item:nth-child(2){ border-right:0; } .diff-item:nth-child(4){ border-right:0; } } @media (max-width: 560px){ .diff-item{ flex: 1 1 100%; border-right:0 !important; padding: 34px 4px; } } /* ---------- Placeholder image block (signature treatment) ---------- */ .ph-image{ position:relative; width:100%; height:100%; min-height: 220px; background: radial-gradient(120% 140% at 15% 0%, rgba(183,150,101,.16), transparent 55%), linear-gradient(150deg, #E7DFD0 0%, #DCD2BE 55%, #CBBE9F 100%); display:flex; align-items:center; justify-content:center; overflow:hidden; } .ph-image.dark{ background: radial-gradient(120% 140% at 85% 0%, rgba(183,150,101,.22), transparent 55%), linear-gradient(150deg, #24201B 0%, #1B1815 60%, #100E0C 100%); } .ph-image svg{ width: 34%; max-width: 96px; opacity: .55; } .ph-image.dark svg{ opacity: .65; } .ph-caption{ position:absolute; left:14px; bottom:12px; font-size: 10px; letter-spacing:.14em; text-transform:uppercase; color: var(--bronze); background: rgba(250,246,239,.85); padding: 5px 10px; } .ph-image.dark .ph-caption{ color: var(--champagne-lt); background: rgba(27,24,21,.7); } /* ---------- Central Park section (4) ---------- */ .cp-layout{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,64px); align-items:center; } .cp-media{ aspect-ratio: 4/5; overflow:hidden; } .cp-media img{ width:100%; height:100%; object-fit:cover; object-position:center 38%; } .cp-list{ margin-top: 30px; display:flex; flex-direction:column; } .cp-list-item{ display:flex; align-items:center; justify-content:space-between; padding: 18px 0; border-bottom: 1px solid var(--line); transition: padding-left .35s var(--ease), color .35s var(--ease); } .cp-list-item:hover{ padding-left: 10px; color: var(--bronze); } .cp-list-item .name{ font-family: var(--font-display); font-size: 21px; } .cp-list-item .arrow{ opacity:0; transform: translateX(-6px); transition: all .35s var(--ease); color: var(--champagne); } .cp-list-item:hover .arrow{ opacity:1; transform: translateX(0); } @media (max-width: 860px){ .cp-layout{ grid-template-columns: 1fr; } } /* Compact tower index — for secondary Central Park addresses that don't need a full feature spread; keeps the page from repeating one big image-and-text block five times over */ .tower-list{ border-top: 1px solid var(--line); } .tower-list-item{ display:flex; align-items:center; gap: 22px; padding: 22px 4px; border-bottom: 1px solid var(--line); transition: padding-left .35s var(--ease); } .tower-list-item:hover{ padding-left: 10px; } .tower-thumb{ width: 84px; height: 84px; flex-shrink:0; overflow:hidden; background: var(--ivory-deep); } .tower-thumb img{ width:100%; height:100%; object-fit:cover; } .tower-thumb .ph-image{ min-height:0; } .tower-thumb .ph-image svg{ width:40%; } .tower-list-body{ flex:1; min-width:0; } .tower-list-body h3{ font-family: var(--font-display); font-size: 21px; font-weight:500; transition: color .35s var(--ease); } .tower-list-item:hover .tower-list-body h3{ color: var(--bronze); } .tower-list-body p{ font-size: 13.5px; color: var(--charcoal-70); margin-top:4px; line-height:1.55; } .tower-list-item .arrow{ color: var(--champagne); flex-shrink:0; opacity:0; transform: translateX(-6px); transition: all .35s var(--ease); } .tower-list-item:hover .arrow{ opacity:1; transform: translateX(0); } @media (max-width: 560px){ .tower-list-item{ gap:16px; } .tower-thumb{ width:64px; height:64px; } .tower-list-body p{ display:none; } } /* ---------- Property cards (5) — editorial tearsheet, not a boxed card ---------- */ .prop-grid{ display:grid; grid-template-columns: repeat(3, 1fr); column-gap: clamp(28px, 3vw, 40px); row-gap: clamp(40px, 5vw, 60px); } .prop-card{ position:relative; } .prop-media{ aspect-ratio: 4/3; position:relative; overflow:hidden; background: var(--ivory-deep); } .prop-media img{ width:100%; height:100%; object-fit:cover; object-position: center 42%; } .prop-media img, .prop-media .ph-image{ transition: transform .9s var(--ease); } .prop-card:hover .prop-media img, .prop-card:hover .prop-media .ph-image{ transform: scale(1.05); } .prop-index{ position:absolute; left:16px; bottom:16px; z-index:2; font-family: var(--font-display); font-style: italic; font-size: 13px; letter-spacing: .04em; color: var(--ivory); text-shadow: 0 1px 8px rgba(0,0,0,.55); } .prop-body{ padding-top: 24px; } .prop-top{ display:flex; align-items:baseline; justify-content:space-between; gap: 12px; margin-bottom: 10px; } .prop-cat{ font-size: 10.5px; letter-spacing:.15em; text-transform:uppercase; color: var(--bronze); display:block; } .prop-status{ font-size: 10px; letter-spacing:.13em; text-transform:uppercase; color: var(--charcoal-70); white-space: nowrap; } .prop-body h3{ font-family: var(--font-display); font-size: 24px; font-weight:500; line-height:1.2; transition: color .35s var(--ease); } .prop-card:hover .prop-body h3{ color: var(--bronze); } .prop-loc{ font-size: 13px; color: var(--charcoal-70); margin-top:8px; } .prop-foot{ margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); display:flex; align-items:center; justify-content:flex-end; } .prop-link{ font-size: 11.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:500; display:flex; align-items:center; gap:8px; color: var(--charcoal); position:relative; } .prop-card:hover .prop-link{ color: var(--bronze); } @media (max-width: 980px){ .prop-grid{ grid-template-columns: repeat(2,1fr); } } @media (max-width: 620px){ .prop-grid{ grid-template-columns: 1fr; } } /* Editorial filter — quiet italic text links, not a facet-filter chip bar */ .filter-bar{ display:flex; flex-wrap:wrap; align-items:baseline; gap: 20px; margin-bottom: 48px; padding-bottom: 24px; border-bottom: 1px solid var(--line); font-family: var(--font-display); } .filter-btn{ padding: 5px 2px; margin:0; border: none; background: none; font-family: inherit; font-style: italic; font-size: 17px; line-height: 1.4; color: var(--charcoal-70); transition: color .3s var(--ease); } .filter-btn:hover{ color: var(--bronze); } .filter-btn.is-active{ color: var(--charcoal); text-decoration: underline; text-decoration-color: var(--champagne); text-underline-offset: 6px; } /* ---------- Services (6) ---------- */ .services-list{ border-top: 1px solid var(--line); } .service-row{ display:grid; grid-template-columns: 90px 1fr 1.3fr; gap: 32px; padding: 44px 0; border-bottom: 1px solid var(--line); align-items: start; transition: background .4s var(--ease); } .service-row:hover{ background: var(--ivory-deep); } .service-num{ font-family: var(--font-display); font-style:italic; color: var(--champagne); font-size: 22px; } .service-row h3{ font-family: var(--font-display); font-size: 28px; font-weight: 500; line-height:1.2; } .service-row p{ color: var(--charcoal-70); font-size: 15px; line-height:1.7; align-self:center; } @media (max-width: 760px){ .service-row{ grid-template-columns: 44px 1fr; padding: 36px 0; gap: 20px 24px; } .service-row p{ grid-column: 1 / -1; margin-top: 4px; } } /* ---------- Founder (7) ---------- */ .founder-grid{ display:grid; grid-template-columns: .8fr 1fr; gap: clamp(36px,6vw,90px); align-items:center; } .founder-media{ aspect-ratio: 3/4; position:relative; } .founder-media::after{ content:""; position:absolute; inset: 18px -18px -18px 18px; border: 1px solid var(--champagne); z-index:-1; } .founder-quote{ font-family: var(--font-display); font-size: clamp(22px,2.6vw,30px); line-height:1.4; font-style:italic; color: var(--charcoal); } .founder-copy{ margin-top: 26px; } .founder-copy p + p{ margin-top: 16px; } .founder-sign{ margin-top: 30px; } .founder-sign .name{ font-family: var(--font-display); font-size: 22px; } .founder-sign .role{ font-size: 12px; letter-spacing:.14em; text-transform:uppercase; color: var(--bronze); margin-top:4px; } @media (max-width: 860px){ .founder-grid{ grid-template-columns:1fr; } .founder-media::after{ display:none; } } /* ---------- Heritage (8) ---------- */ .heritage-wrap{ border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 56px 0; display:grid; grid-template-columns: 1fr auto; gap: 40px; align-items:center; } .heritage-copy p{ max-width: 620px; color: var(--charcoal-70); } .heritage-names{ display:flex; gap: 48px; } .heritage-names .h-item .label{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color: var(--bronze); margin-bottom:6px; } .heritage-names .h-item .n{ font-family: var(--font-display); font-size: 20px; } .heritage-names .h-item .f{ font-size: 12.5px; color: var(--charcoal-70); margin-top:2px; } @media (max-width: 820px){ .heritage-wrap{ grid-template-columns:1fr; } .heritage-names{ flex-wrap:wrap; gap:28px; } } /* ---------- CTA (9) ---------- */ .cta-band{ position:relative; overflow:hidden; text-align:center; padding: clamp(80px,11vw,140px) 0; } .cta-band::before{ content:""; position:absolute; right:-60px; bottom:-60px; width: 380px; height: 380px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23B79665' stroke-width='0.5'%3E%3Cpath d='M12 90h76'/%3E%3Cpath d='M22 90V42h32v48'/%3E%3Cpath d='M22 52l27-20v58'/%3E%3Crect x='35' y='68' width='11' height='22'/%3E%3C/g%3E%3C/svg%3E"); background-repeat:no-repeat; background-size:contain; opacity:.5; pointer-events:none; } .cta-band .container{ position:relative; z-index:1; } .cta-band h2{ font-family: var(--font-display); color: var(--ivory); max-width: 820px; margin-inline:auto; } .cta-band .lede{ margin-top: 20px; max-width: 480px; margin-inline:auto; } .cta-band .btn{ margin-top: 38px; } .cta-contact-strip{ margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line-lt); display:inline-flex; flex-direction:column; align-items:center; gap: 8px; } .cta-contact-phone{ font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 28px); color: var(--champagne-lt); transition: color .3s var(--ease); } .cta-contact-phone:hover{ color: var(--ivory); } .cta-contact-markets{ font-size: 12px; letter-spacing:.14em; text-transform:uppercase; color: rgba(250,246,239,.6); } /* ---------- Contact (10) ---------- */ .contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,6vw,90px); } .form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 22px; } .field{ margin-bottom: 22px; } .field label{ display:block; font-size: 11px; letter-spacing:.14em; text-transform:uppercase; color: var(--charcoal-70); margin-bottom: 9px; } .field input, .field select, .field textarea{ width:100%; border: none; border-bottom: 1px solid var(--line); background: transparent; padding: 12px 2px; font-size: 15px; color: var(--charcoal); transition: border-color .3s var(--ease); } .field input:focus, .field select:focus, .field textarea:focus{ border-bottom-color: var(--champagne); } .field textarea{ resize: vertical; min-height: 110px; } .form-note{ font-size: 12.5px; color: var(--charcoal-70); margin-top: 8px; } .form-status{ margin-top: 18px; font-size: 13.5px; color: var(--bronze); min-height: 18px; } .contact-card{ background: var(--charcoal); color: var(--ivory); padding: clamp(32px,4vw,48px); } .contact-card .eyebrow{ color: var(--champagne-lt); } .contact-card h3{ font-family: var(--font-display); font-size: 26px; margin-top: 14px; } .contact-addr{ margin-top: 18px; color: rgba(250,246,239,.72); font-size: 14.5px; line-height:1.8; font-style:normal; } .contact-methods{ margin-top: 30px; display:flex; flex-direction:column; gap:14px; } .contact-method{ display:flex; align-items:center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line-lt); font-size: 13px; letter-spacing:.08em; text-transform:uppercase; transition: all .35s var(--ease); } .contact-method:hover{ border-color: var(--champagne); background: rgba(183,150,101,.08); } .contact-method .ic{ color: var(--champagne); flex-shrink:0; } .contact-cta-row{ margin-top: 24px; display:flex; flex-wrap:wrap; gap: 14px; } .contact-map{ margin-top: 30px; aspect-ratio: auto; height: 420px; } @media (max-width: 640px){ .contact-map{ height: 320px; } } @media (max-width: 900px){ .contact-grid{ grid-template-columns:1fr; } .form-row{ grid-template-columns:1fr; } } /* ---------- Footer ---------- */ .site-footer{ background: var(--charcoal); color: rgba(250,246,239,.8); padding-top: clamp(44px,5vw,60px); } .footer-top{ display:grid; grid-template-columns: 1.3fr 1fr 1.1fr; gap: 40px; padding-bottom: 32px; border-bottom: 1px solid var(--line-lt); } .footer-brand{ display:flex; align-items:center; gap:10px; font-family: var(--font-display); font-size: 22px; color: var(--ivory); } .footer-tag{ margin-top: 12px; font-size: 13px; line-height:1.6; color: rgba(250,246,239,.65); letter-spacing:.02em; max-width: 280px; } .footer-col h3{ font-size: 11px; letter-spacing:.16em; text-transform:uppercase; color: var(--champagne-lt); margin-bottom: 14px; font-weight: 500; } .footer-col ul{ display:grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; } .footer-col ul li{ margin-bottom: 0; } .footer-col ul a{ font-size: 14px; color: rgba(250,246,239,.75); transition: color .3s; } .footer-col ul a:hover{ color: var(--champagne-lt); } .footer-phone{ display:block; font-family: var(--font-display); font-size: 17px; color: var(--champagne-lt); margin-bottom: 10px; transition: color .3s; } .footer-phone:hover{ color: var(--ivory); } .footer-addr{ font-style: normal; font-size: 13.5px; line-height:1.7; color: rgba(250,246,239,.7); } .footer-social{ display:flex; gap: 12px; margin-top: 18px; } .footer-social a, .footer-social span{ width: 32px; height:32px; border: 1px solid var(--line-lt); display:flex; align-items:center; justify-content:center; transition: all .3s; } .footer-social span{ opacity:.5; cursor:default; } .footer-social a:hover{ border-color: var(--champagne); background: rgba(183,150,101,.1); } .footer-bottom{ display:flex; flex-wrap:wrap; gap: 16px; align-items:center; justify-content:space-between; padding: 18px 0; font-size: 12.5px; color: rgba(250,246,239,.55); } .footer-bottom .legal{ display:flex; gap: 24px; } @media (max-width: 860px){ .footer-top{ grid-template-columns: 1fr 1fr; } } @media (max-width: 540px){ .footer-top{ grid-template-columns: 1fr; gap: 28px; } .footer-col ul{ grid-template-columns: 1fr 1fr; } } /* ---------- Floating WhatsApp ---------- */ .wa-float{ position: fixed; right: 24px; bottom: 24px; z-index: 400; width: 56px; height: 56px; border-radius: 50%; background: var(--charcoal); color: var(--ivory); display:flex; align-items:center; justify-content:center; box-shadow: 0 14px 30px -10px rgba(27,24,21,.5); border: 1px solid var(--champagne); transition: transform .35s var(--ease), background .35s; } .wa-float:hover{ transform: translateY(-3px); background: var(--bronze); } /* Mobile-only click-to-call, paired with WhatsApp for quick lead capture */ .call-float{ display:none; position: fixed; left: 24px; bottom: 24px; z-index: 400; width: 52px; height: 52px; border-radius: 50%; background: var(--ivory); color: var(--charcoal); align-items:center; justify-content:center; box-shadow: 0 14px 30px -10px rgba(27,24,21,.35); border: 1px solid var(--champagne); transition: transform .35s var(--ease), background .35s, color .35s; } .call-float:hover{ transform: translateY(-3px); background: var(--charcoal); color: var(--ivory); } @media (max-width: 720px){ .call-float{ display:flex; } } /* ---------- Reveal on scroll ---------- */ .reveal{ opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); } .reveal.is-visible{ opacity: 1; transform: translateY(0); } .reveal-stagger > *{ opacity:0; transform: translateY(20px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .reveal-stagger.is-visible > *{ opacity:1; transform: translateY(0); } .reveal-stagger.is-visible > *:nth-child(1){ transition-delay: .05s; } .reveal-stagger.is-visible > *:nth-child(2){ transition-delay: .14s; } .reveal-stagger.is-visible > *:nth-child(3){ transition-delay: .23s; } .reveal-stagger.is-visible > *:nth-child(4){ transition-delay: .32s; } .reveal-stagger.is-visible > *:nth-child(5){ transition-delay: .41s; } /* ---------- Misc ---------- */ .breadcrumb{ font-size: 12px; letter-spacing:.1em; text-transform:uppercase; color: rgba(250,246,239,.55); margin-bottom: 22px; } .breadcrumb a{ color: rgba(250,246,239,.8); } .breadcrumb a:hover{ color: var(--champagne-lt); } .tower-photo{ width:100%; height:100%; object-fit:cover; object-position:center 42%; display:block; } .two-col{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,64px); } @media (max-width: 860px){ .two-col{ grid-template-columns:1fr; } } .timeline{ border-left: 1px solid var(--line); padding-left: 30px; display:flex; flex-direction:column; gap: 34px; } .timeline .t-item .t-label{ font-size: 11px; letter-spacing:.14em; text-transform:uppercase; color: var(--bronze); } .timeline .t-item h4{ font-family: var(--font-display); font-size: 21px; margin-top:6px; } .timeline .t-item p{ font-size: 14px; color: var(--charcoal-70); margin-top:6px; max-width: 480px; } .map-embed{ border:1px solid var(--line); } .map-embed iframe{ width:100%; height:100%; border:0; display:block; filter: grayscale(.25) contrast(1.05); } /* ---------- Visit V1 Realtors (contact page map section) ---------- */ .visit-grid{ display:grid; grid-template-columns: 1fr 1.5fr; gap: clamp(32px, 4vw, 56px); align-items:stretch; } .visit-info{ display:flex; flex-direction:column; justify-content:center; } .visit-addr{ font-style:normal; font-size:16px; line-height:1.85; color:var(--charcoal-70); } .visit-phone{ display:inline-block; margin-top:16px; font-family: var(--font-display); font-size: 24px; color: var(--bronze); transition: color .3s var(--ease); } .visit-phone:hover{ color: var(--charcoal); } .visit-map{ height: 420px; } @media (max-width: 860px){ .visit-grid{ grid-template-columns: 1fr; } .visit-map{ height: 320px; order: -1; } } /* Screen-reader-only text — preserves heading hierarchy for assistive tech without adding a visible, redundant heading to the design */ .visually-hidden{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================================ MARKET ARCHITECTURE ADDITIONS (Gurgaon / Dwarka Expressway / Goa) — extends the existing design system; no new colours, fonts, or component families. ============================================================ */ /* ---------- Search Properties (homepage) ---------- */ .search-form{ border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 40px 0; margin-bottom: 48px; } .search-grid{ display:grid; grid-template-columns: repeat(5, 1fr); gap: 24px; align-items:end; } .search-grid .field{ margin-bottom:0; } .search-actions{ margin-top: 32px; display:flex; flex-wrap:wrap; gap: 16px; } .search-meta{ font-size: 13.5px; color: var(--charcoal-70); margin-bottom: 28px; min-height: 20px; } .search-meta.is-empty{ color: var(--bronze); } @media (max-width: 1080px){ .search-grid{ grid-template-columns: repeat(3, 1fr); gap: 22px; } } @media (max-width: 640px){ .search-grid{ grid-template-columns: 1fr 1fr; gap: 20px; } .search-form{ padding: 28px 0; } } @media (max-width: 420px){ .search-grid{ grid-template-columns: 1fr; } } /* ---------- Explore Our Markets (homepage) ---------- */ .market-card .prop-body{ padding-top: 22px; } .market-card .prop-cat{ color: var(--champagne); } /* ---------- Placeholder-image atmosphere variants ---------- Same signature device (thin gold line-art on a soft gradient) used sitewide — only the tint and icon change per market, so every page still reads as one V1 Realtors design system. */ .ph-image.metro{ background: radial-gradient(120% 140% at 15% 0%, rgba(139,155,171,.20), transparent 55%), linear-gradient(150deg, #E4E7E9 0%, #D6DADD 45%, #C7BDA8 100%); } .ph-image.metro svg{ opacity:.6; } .ph-image.metro .ph-caption{ color: var(--bronze); } .ph-image.tropical{ background: radial-gradient(120% 140% at 85% 100%, rgba(196,146,79,.22), transparent 55%), linear-gradient(150deg, #F1E4CB 0%, #E8D3AC 50%, #D9B88A 100%); } .ph-image.tropical svg{ opacity:.6; } .ph-image.tropical .ph-caption{ color: var(--bronze); } /* Subtle section-level atmosphere washes — colour stays within the existing ivory/champagne/bronze/charcoal palette throughout */ .section.tint-metro{ background: linear-gradient(180deg, #F3F1EC 0%, var(--ivory-deep) 100%); } .section.tint-tropical{ background: linear-gradient(180deg, #FBF3E3 0%, var(--ivory-deep) 100%); } /* Market page hero — cooler (metro) or warmer (tropical) tint over the same dark charcoal gradient used on every page-hero */ .page-hero.metro::before{ background: linear-gradient(160deg, #23262A 0%, #1b1815 60%, #100e0c 100%); } .page-hero.tropical::before{ background: linear-gradient(160deg, #2b2116 0%, #1b1815 60%, #100e0c 100%); } /* ---------- Market summary cards (homepage "Explore Our Markets") ---------- */ .market-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 34px); } @media (max-width: 860px){ .market-grid{ grid-template-columns: 1fr; } }