/* Fonts (Manrope + Montserrat) are loaded via in index.html */ :root { --navy: #0a122a; --indigo-deep: #0d1738; --indigo-card: #14214d; --gold: #cca34c; --gold-light: #f3da8e; --gold-gradient: linear-gradient( 135deg, #f3da8e 0%, #cca34c 50%, #9e7422 100% ); --coral: #e85a36; --coral-deep: #d1431f; --bg: #f8f7f2; --bg-card: #ffffff; --bg-subtle: #eff2f7; --header-blue: #ffffff; --line: rgba(10, 18, 42, 0.08); --line-light: rgba(243, 218, 142, 0.22); --text: #111625; --text-mute: #555e75; --text-onindigo: #f4f6fb; --text-onindigo-mute: #99a4c8; --head: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --head2: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --mono: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--sans); background: var(--bg); color: var(--text); font-size: 15.5px; line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; width: 100%; height: 100%; object-fit: cover; } .container { max-width: 1220px; margin: 0 auto; padding: 0 40px; } a { color: inherit; text-decoration: none; } strong { font-weight: 600; } .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--coral); font-weight: 600; } .eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--coral); display: inline-block; } .sec-indigo .eyebrow::before, .offer-head .eyebrow::before, .dev-band .eyebrow::before { background: var(--gold-light); } .icon, svg.icon { width: 14px; height: 14px; flex-shrink: 0; display: inline-block; vertical-align: -2px; } /* ============ REVEAL ============ */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); } .reveal.in { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ============ HEADER & PROPORTIONAL LOGO ============ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--header-blue); border-bottom: 1px solid rgba(10, 18, 42, 0.12); padding: 12px 0; } .header-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; } /* EXACT HORIZONTAL & STACKED LOGO LOCKUP */ .brand-logo-wrap { display: inline-flex; align-items: center; gap: 14px; width: 15%; text-decoration: none; cursor: pointer; } .footerlogo { width: 140px; max-width: 40%; height: auto; display: block; } .logo{ width: 68%; } .brand-logo-icon { width: 38px; height: 40px; flex-shrink: 0; } .brand-logo-text { display: flex; flex-direction: column; line-height: 1; } .brand-logo-title { font-family: var(--head); font-weight: 800; font-size: 18px; letter-spacing: 0.14em; color: var(--navy); text-transform: uppercase; } .brand-logo-sub { display: flex; align-items: center; gap: 8px; margin-top: 4px; } .brand-logo-sub .line-left, .brand-logo-sub .line-right { flex: 1; height: 1px; background: var(--navy); opacity: 0.3; } .brand-logo-sub span { font-family: var(--mono); font-size: 8.5px; font-weight: 600; letter-spacing: 0.2em; color: var(--navy); text-transform: uppercase; } /* Nav links inside a rounded pill — Kundan / WYNG style */ .nav-links { display: flex; align-items: center; gap: 2px; padding: 6px; border-radius: 12px; border: 1px solid rgba(10, 18, 42, 0.12); background: rgba(255, 255, 255, 0.55); } .nav-links a { font-size: 12.5px; font-weight: 600; color: rgba(10, 18, 42, 0.78); letter-spacing: 0.03em; text-transform: capitalize; padding: 7px 13px; border-radius: 8px; transition: background 0.2s, color 0.2s; } .nav-links a:hover, .nav-links a.active { color: var(--navy); background: rgba(10, 18, 42, 0.09); } .hdr-cta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .hdr-phone { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--navy); background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(10, 18, 42, 0.22); border-radius: 999px; padding: 9px 18px; transition: background 0.2s, color 0.2s; } .hdr-phone:hover { background: var(--gold); color: var(--navy); } .hdr-phone svg { width: 15px; height: 15px; color: currentColor; flex-shrink: 0; } .menu-toggle { display: none; flex-direction: column; gap: 4px; cursor: pointer; background: none; border: none; padding: 6px; } .menu-toggle span { width: 22px; height: 2px; background: var(--navy); border-radius: 2px; } .nav-close { display: none; background: none; border: none; color: #fff; font-size: 30px; line-height: 1; cursor: pointer; padding: 0; } /* ============ BUTTONS ============ */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--head); font-size: 12.5px; font-weight: 700; text-transform: uppercase; padding: 9px 15px; border-radius: 2px; cursor: pointer; transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); white-space: nowrap; border: 1.5px solid transparent; letter-spacing: 0.07em; } .btn::after { content: ""; width: 14px; height: 10px; flex-shrink: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); } .btn:hover::after { transform: translateX(4px); } .btn-coral { background: var(--coral); color: #fff; } .btn-coral:hover { background: var(--coral-deep); box-shadow: 0 12px 28px rgba(232, 90, 54, 0.34); transform: translateY(-1px); } .btn-gold { background: var(--gold-gradient); color: var(--navy); font-weight: 800; } .btn-gold:hover { filter: brightness(1.06); box-shadow: 0 12px 28px rgba(204, 163, 76, 0.3); transform: translateY(-1px); } .btn-line { border-color: rgba(243, 218, 142, 0.4); color: var(--text-onindigo); background: transparent; } .btn-line:hover { border-color: var(--gold-light); color: var(--gold-light); } .btn-line-dark { border-color: var(--navy); color: var(--navy); background: transparent; } .btn-line-dark:hover { background: var(--navy); color: #fff; } /* ============ HERO SECTION ============ */ .hero { position: relative; background: var(--navy); overflow: hidden; padding-top: 80px; display: flex; align-items: center; } .hero > .container-fluid { width: 100%; } video { height: 122vh; } .hero-video-wrap { position: relative; width: 100%; } .hero-video-wrap iframe { width: 100%; height: 122vh; border: 0; display: block; } .hero-video-loader { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; background: var(--navy); transition: opacity 0.4s ease; opacity: 1; pointer-events: none; } .hero-video-loader.is-hidden { opacity: 0; visibility: hidden; } .hero-video-spinner { width: 48px; height: 48px; border: 4px solid rgba(255, 255, 255, 0.2); border-top-color: #fff; border-radius: 50%; animation: hero-video-spin 0.8s linear infinite; } @keyframes hero-video-spin { to { transform: rotate(360deg); } } .hero-bg { position: absolute; inset: 0; z-index: 0; background-image: linear-gradient( to right, rgba(10, 18, 42, 0.92) 0%, rgba(10, 18, 42, 0.7) 45%, rgba(10, 18, 42, 0.4) 100% ), radial-gradient( ellipse at 75% 25%, rgba(20, 33, 77, 0.25) 0%, rgba(10, 18, 42, 0.6) 80% ), url("https://magicpage-dev.propstory.com/ImageUploads/aradhya/1nnx5eapkmtimz109.webp"); background-size: cover, cover, cover; background-position: center, center, center; background-repeat: no-repeat, no-repeat, no-repeat; } @media (min-width: 861px) { .hero-bg { /* background-attachment: fixed; */ } } @media (max-width: 860px) { .hero-bg { background-image: linear-gradient( 180deg, rgba(10, 18, 42, 0.75) 0%, rgba(10, 18, 42, 0.88) 45%, rgba(10, 18, 42, 0.98) 78% ), url("https://magicpage-dev.propstory.com/ImageUploads/aradhya/1nnx5eapkmtimz109.webp"); background-position: top center; } } .hero-inner { position: relative; z-index: 2; padding-bottom: 60px; width: 100%; display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 28px 48px; align-items: center; } .hero-inner > .reveal > :last-child { margin-bottom: 0; } .hero-visual { justify-self: end; align-self: start; margin-top: 26%; } .hero-visual img { width: 100%; height: auto; max-width: 360px; } .badge-row { display: flex; gap: 32px; margin-bottom: 36px; flex-wrap: wrap; } .badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding-left: 14px; border-left: 2px solid var(--gold); line-height: 1.3; } .badge svg { width: 13px; height: 13px; flex-shrink: 0; } .badge-oc { color: var(--gold-light); } .badge-rera { border-color: var(--coral); color: #ffb199; } .hero h1 { font-family: var(--head); font-weight: 800; color: #fff; font-size: clamp(42px, 6vw, 58px); line-height: 1.08; letter-spacing: -0.02em; margin-bottom: 22px; max-width: 920px; } .hero h1 .hl { background: var(--gold-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 25px; font-weight: 800; } .hero-lede { font-size: 16px; color: var(--text-onindigo-mute); max-width: 560px; margin-bottom: 16px; line-height: 1.75; font-weight: 400; } .hero-loc { display: flex; align-items: center; gap: 9px; font-size: 15.5px; color: var(--text-onindigo); margin-bottom: 38px; font-weight: 500; letter-spacing: 0.01em; } .hero-loc .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex-shrink: 0; } .hero-btns { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 54px; } .hero-stats-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line-light); padding-top: 0; /* max-width: 900px; */ } .hstat { padding: 26px 30px 0 0; border-left: 1px solid var(--line-light); padding-left: 26px; text-align: center; } .hstat:first-child { border-left: none; padding-left: 0; } .hstat .n { font-family: var(--head); font-size: 26px; font-weight: 800; color: #fff; line-height: 1.1; letter-spacing: -0.01em; } .hstat .n .u { font-family: var(--mono); font-size: 11px; color: var(--gold-light); font-weight: 600; margin-left: 3px; letter-spacing: 0.04em; } .hstat .l { font-family: var(--mono); font-size: 15px; color: #ddd; letter-spacing: 0.07em; text-transform: uppercase; margin-top: 8px; } /* ============ DEVELOPER STATS STRIP ============ */ .dev-band { /* background: linear-gradient(135deg, var(--indigo-deep) 0%, var(--navy) 100%); */ padding: 64px 0; background: #fff; border-bottom: 1px solid rgba(204, 163, 76, 0.15); } .dev-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid #0d1738; padding-top: 32px; } .dev-stat { text-align: left; border-left: 1px solid #0d1738; padding-left: 24px; } .dev-stat:first-child { border-left: none; padding-left: 0; } .dev-stat .n { font-family: var(--head); font-size: 34px; font-weight: 800; background: var(--gold-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.01em; } .dev-stat .l { font-family: var(--mono); font-size: 10px; color: #14214d; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 8px; font-weight: 500; } .dev-note { max-width: 640px; margin: 0 0 36px; text-align: left; font-size: 14px; color: var(--text-onindigo-mute); line-height: 1.8; } .dev-band-row { display: flex; align-items: center; gap: 56px; margin-bottom: 36px; } .dev-band-row .dev-note { flex: 1; margin: 0; } .dev-visual { flex: 1; max-width: 460px; align-self: stretch; overflow: hidden; border: 1px solid var(--line); } .dev-visual img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; display: block; } @media (max-width: 860px) { .dev-band-row { flex-direction: column; align-items: stretch; gap: 28px; } .dev-visual { max-width: none; } } /* ============ SECTION SCAFFOLD ============ */ .sec { padding: 50px 0; position: relative; } .sec-indigo { background: var(--navy); color: var(--text-onindigo); } .sec-tint { background: var(--bg-subtle); } .sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 54px; flex-wrap: wrap; } .sec-title { font-family: var(--head); font-weight: 800; font-size: clamp(30px, 3.1vw, 42px); letter-spacing: -0.02em; color: var(--navy); margin-top: 12px; line-height: 1.15; } .sec-indigo .sec-title { color: #fff; } .sec-desc { max-width: 400px; font-size: 14px; color: var(--text-mute); line-height: 1.75; padding-bottom: 4px; } .sec-indigo .sec-desc { color: var(--text-onindigo-mute); } /* ============ ABOUT SECTION ============ */ .about-grid { display: grid; grid-template-columns: 0.95fr 1.15fr; gap: 76px; align-items: center; } .about-visual-col { display: flex; flex-direction: column; } .about-img { aspect-ratio: 4/5; overflow: hidden; border: 1px solid var(--line); } .about-img img { transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); } .about-img:hover img { transform: scale(1.045); } .about-text { padding-top: 6px; } .about-text p { font-size: 15px; color: var(--text-mute); line-height: 1.9; margin-bottom: 18px; } .about-text p strong { color: var(--text); font-weight: 600; } .check-list { display: flex; flex-direction: column; margin: 8px 0 32px; border-top: 1px solid var(--line); } .check-item { display: flex; align-items: center; gap: 14px; font-size: 13.5px; color: var(--text); font-weight: 500; padding: 14px 0; border-bottom: 1px solid var(--line); } .check-item .tick { width: 18px; height: 18px; flex-shrink: 0; color: var(--gold); display: flex; align-items: center; justify-content: center; } .check-item .tick svg { width: 15px; height: 15px; } .feature-badge-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin-top: 22px; border-top: 1px solid var(--line); } .f-badge-card { display: flex; flex-direction: column; gap: 10px; padding: 22px 18px 22px 0; border-bottom: 1px solid var(--line); } .f-badge-card:nth-child(2n) { padding-left: 22px; border-left: 1px solid var(--line); } .f-badge-card .fb-title { display: flex; align-items: flex-start; gap: 10px; font-family: var(--mono); font-size: 14.5px; text-transform: uppercase; color: var(--navy); font-weight: 700; letter-spacing: 0.05em; line-height: 1.4; } .f-badge-card .fb-icon { width: 26px; height: 26px; flex-shrink: 0; color: var(--gold); margin-top: 1px; } .f-badge-card .fb-desc { font-size: 13.5px; color: var(--text-mute); line-height: 1.55; } /* ============ PROBLEM VS SOLUTION ============ */ .ps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; } .ps-card { padding: 0; } .ps-card-pain { background: transparent; padding: 8px 64px 8px 0; } .ps-card-sol { background: linear-gradient(150deg, var(--indigo-card), var(--navy)); color: #fff; padding: 52px 60px; margin-right: calc(50% - 50vw); padding-right: calc((50vw - 50%) + 60px); } .ps-card-title { font-family: var(--head2); font-size: 23px; font-weight: 600; margin-bottom: 28px; padding-top: 24px; border-top: 1px solid var(--line); } .ps-card-sol .ps-card-title { border-top: 1px solid rgba(204, 163, 76, 0.3); padding-top: 0; margin-top: 0; border-top: none; } .ps-list { display: flex; flex-direction: column; gap: 22px; } .ps-item { display: flex; gap: 14px; font-size: 14px; line-height: 1.7; } .ps-icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; } .ps-icon svg { width: 100%; height: 100%; display: block; } .ps-card-pain .ps-icon { color: var(--coral); } .ps-card-sol .ps-icon { color: var(--gold-light); } .ps-card-sol .ps-item span { color: var(--text-onindigo-mute); } .ps-card-sol .ps-item span strong { color: #fff; } /* ============ 3-STEP JOURNEY ============ */ .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); } .step-card { background: transparent; border: none; border-left: 1px solid var(--line); border-radius: 0; padding: 36px 44px 0 40px; box-shadow: none; } .step-card:first-child { border-left: none; padding-left: 0; } .step-num { font-family: var(--head); font-size: 44px; font-weight: 800; color: var(--gold); margin-bottom: 18px; line-height: 1; letter-spacing: -0.01em; } .step-card h3 { font-family: var(--head2); font-size: 21px; font-weight: 600; color: var(--navy); margin-bottom: 10px; letter-spacing: -0.005em; } .step-card p { font-size: 13.5px; color: var(--text-mute); line-height: 1.75; } /* ============ FLOOR PLANS & INVENTORY ============ */ .plan-tabs { display: flex; gap: 0; margin-bottom: 44px; flex-wrap: wrap; border-bottom: 1px solid var(--line); } .plan-tab { font-family: var(--head); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; padding: 16px 0; margin-right: 40px; border-radius: 0; cursor: pointer; border: none; border-bottom: 2px solid transparent; color: var(--text-mute); transition: all 0.25s; background: transparent; } .plan-tab:hover { color: var(--navy); } .plan-tab.active { border-bottom-color: var(--gold); color: var(--navy); } .plan-cards { display: none; grid-template-columns: 1.1fr 0.9fr; gap: 0; background: #fff; border-radius: 2px; overflow: hidden; box-shadow: none; border: 1px solid var(--line); } .plan-cards.active { display: grid; } .plan-visual { background-color: var(--bg); padding: 40px; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--line); position: relative; overflow: hidden; } .plan-visual::before { content: ""; position: absolute; inset: -50px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'%3E%3Crect x='40' y='40' width='720' height='520' fill='none' stroke='%230A122A' stroke-width='4'/%3E%3Cpath d='M300 40V380H40M560 40V560M300 230H560M560 420H760M660 420V560' fill='none' stroke='%230A122A' stroke-width='3'/%3E%3Cpath d='M300 380a40 40 0 0 0 40-40' fill='none' stroke='%230A122A' stroke-width='2' stroke-dasharray='3 4'/%3E%3Cpath d='M560 230a40 40 0 0 1-40 40' fill='none' stroke='%230A122A' stroke-width='2' stroke-dasharray='3 4'/%3E%3Cpath d='M660 420a40 40 0 0 0-40 40' fill='none' stroke='%230A122A' stroke-width='2' stroke-dasharray='3 4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 160% auto; filter: blur(6px); opacity: 0.4; pointer-events: none; } .plan-svg { position: relative; z-index: 1; width: 100%; height: auto; background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 50px rgba(10, 18, 42, 0.1); } .plan-svg line { stroke: rgba(10, 18, 42, 0.22); stroke-width: 1; } .plan-svg rect { fill: none; stroke: var(--navy); stroke-width: 1.6; } .plan-svg text { font-family: var(--mono); font-size: 9.5px; fill: var(--text-mute); font-weight: 600; } .plan-info { padding: 44px; position: relative; z-index: 1; background: #fff; } .plan-info .name { font-family: var(--head2); font-weight: 600; font-size: 25px; color: var(--navy); margin-bottom: 6px; letter-spacing: -0.005em; } .plan-info .tag { font-family: var(--mono); font-size: 11px; color: var(--coral); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 24px; font-weight: 600; } .plan-spec { display: flex; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; } .plan-spec .k { color: var(--text-mute); } .plan-spec .v { font-weight: 600; color: var(--text); } .plan-price { font-family: var(--head); font-size: 28px; font-weight: 800; color: var(--navy); margin: 24px 0 20px; letter-spacing: -0.01em; } .plan-price span { font-family: var(--mono); font-size: 12px; color: var(--text-mute); font-weight: 400; } /* CTA sits full-width in the info column and wraps instead of overflowing */ .plan-info .btn { display: flex; width: 100%; font-size: 12px; margin-top: 24px; justify-content: center; text-align: center; white-space: normal; line-height: 1.3; } /* ============ LOCATION & MAP ============ */ .loc-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; } .loc-chips { display: flex; flex-direction: column; gap: 0; counter-reset: locidx; border-top: 1px solid var(--line); } .loc-chip { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; background: transparent; border: none; border-bottom: 1px solid var(--line); border-radius: 0; padding: 18px 2px; transition: padding-left 0.25s ease; counter-increment: locidx; } .loc-chip:hover { padding-left: 10px; } .loc-chip .place { color: var(--text); font-weight: 600; display: flex; align-items: baseline; gap: 14px; line-height: 1.4; } .loc-chip .place::before { content: counter(locidx, decimal-leading-zero); font-family: var(--mono); font-size: 11px; color: var(--gold); font-weight: 600; flex-shrink: 0; } .loc-chip .dist { font-family: var(--mono); font-size: 15px; color: var(--coral); font-weight: 700; flex-shrink: 0; text-align: right; line-height: 1.4; } .loc-map { border-radius: 2px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 20px 48px rgba(10, 18, 42, 0.08); position: relative; aspect-ratio: 4/3; } .loc-map iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(0.9); } .loc-map .loc-map-tag { display: inline-flex; align-items: center; gap: 7px; position: absolute; top: 16px; left: 16px; background: #fff; border-radius: 2px; padding: 8px 16px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--navy); box-shadow: 0 6px 18px rgba(10, 18, 42, 0.12); z-index: 2; pointer-events: none; } .loc-map .loc-map-tag svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--coral); } /* ============ FAQ ACCORDION ============ */ .faq-grid { display: flex; flex-direction: column; gap: 0; /* max-width: 840px; */ margin: 0 auto; border-top: 1px solid var(--line); } .faq-item { background: transparent; border-radius: 0; border: none; border-bottom: 1px solid var(--line); overflow: hidden; transition: border-color 0.25s; } .faq-item summary { list-style: none; padding: 28px 4px; cursor: pointer; font-family: var(--head2); font-size: 17px; font-weight: 600; color: var(--navy); display: flex; justify-content: space-between; align-items: center; user-select: none; gap: 24px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; font-family: var(--mono); font-size: 20px; color: var(--gold); font-weight: 700; flex-shrink: 0; } .faq-item[open] summary::after { content: "\2212"; } .faq-ans { padding: 0 4px 28px; font-size: 14px; color: var(--text-mute); line-height: 1.85; /* max-width: 680px; */ } /* ============ ENQUIRE FORM CARD ============ */ .enq-card { background: #fff; border-radius: 2px; box-shadow: none; border: 1px solid var(--line); overflow: hidden; display: grid; grid-template-columns: 0.9fr 1.1fr; } .enq-side { position: relative; padding: 52px; color: #fff; display: flex; flex-direction: column; justify-content: center; background-image: linear-gradient( 150deg, rgba(10, 18, 42, 0.94) 0%, rgba(13, 23, 56, 0.88) 100% ), url("https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=1600&q=75"); background-size: cover; background-position: center; } .enq-side h3 { font-family: var(--head2); font-size: 30px; font-weight: 600; margin-bottom: 16px; letter-spacing: -0.005em; line-height: 1.2; } .enq-side p { font-size: 13.5px; color: var(--text-onindigo-mute); line-height: 1.8; margin-bottom: 28px; } .enq-side .contact-line { display: flex; align-items: center; gap: 11px; font-family: var(--mono); font-size: 12.5px; color: var(--gold-light); margin-bottom: 14px; } .enq-side .contact-line svg { width: 16px; height: 16px; flex-shrink: 0; } .enq-form { padding: 52px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; } .field label { display: block; font-size: 10.5px; font-weight: 700; color: var(--text-mute); margin-bottom: 9px; text-transform: uppercase; letter-spacing: 0.07em; font-family: var(--mono); } .field input, .field select, .field textarea { width: 100%; border: none; border-bottom: 1.5px solid var(--line); border-radius: 0; padding: 9px 2px; font-size: 14.5px; font-family: var(--sans); color: var(--text); background: transparent; transition: border-color 0.2s; } .field textarea { resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); } .consent { display: flex; align-items: flex-start; gap: 8px; font-size: 11px; color: var(--text-mute); margin: 18px 0 26px; line-height: 1.6; } .mb-4 { margin-bottom: 10px; } /* ============ DISCLAIMER & FOOTER — gemini-code style ============ */ .disclaimer-strip { background: var(--bg-subtle); padding: 24px 0; border-top: 1px solid var(--line); } .disclaimer-strip p { max-width: 980px; margin: 0 auto; font-size: 11px; line-height: 1.8; color: var(--text-mute); text-align: center; } .disclaimer-strip p b { color: var(--text); } .site-footer { background: var(--navy); color: var(--text-onindigo-mute); padding: 36px 0; font-size: 11.5px; line-height: 1.9; border-top: 1px solid rgba(204, 163, 76, 0.15); } .site-footer b { color: #fff; } .footer-row { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; font-family: var(--mono); font-size: 10.5px; } .footer-row a { color: var(--gold-light); } .footer-row a:hover { opacity: 0.75; } /* ============ STICKY MOBILE CTA ============ */ /* Mobile bottom bar — Kundan / WYNG style */ .sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: var(--navy); border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 0; display: none; box-shadow: 0 -6px 22px rgba(10, 18, 42, 0.18); } .sticky-cta .btn { flex: 1; justify-content: center; border-radius: 0; border: none; border-right: 1px solid rgba(255, 255, 255, 0.16); background: transparent; color: #fff; padding: 15px 6px; font-size: 12px; } .sticky-cta .btn:last-child { border-right: none; } .sticky-cta .btn::after { display: none; } .sticky-cta .btn:hover { background: rgba(255, 255, 255, 0.07); box-shadow: none; transform: none; } /* ============ OFFER / LEAD POPUP MODAL ============ */ .offer-overlay { position: fixed; inset: 0; z-index: 150; background: rgba(10, 18, 42, 0.65); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity 0.35s ease; } .offer-overlay.show { display: flex; } .offer-overlay.show.in { opacity: 1; } .offer-modal { background: #fff; width: 100%; max-width: 440px; border-radius: 4px; overflow: hidden; position: relative; box-shadow: 0 30px 80px rgba(10, 18, 42, 0.4); transform: translateY(24px) scale(0.97); transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); } .offer-overlay.show.in .offer-modal { transform: translateY(0) scale(1); } .offer-close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); border: none; cursor: pointer; color: #fff; z-index: 2; display: flex; align-items: center; justify-content: center; } .offer-close svg { width: 13px; height: 13px; } .offer-close:hover { background: rgba(255, 255, 255, 0.3); } .offer-head { background: linear-gradient(155deg, var(--navy) 0%, var(--indigo-deep) 100%); padding: 34px 32px 26px; color: #fff; } .offer-head .eyebrow { color: var(--gold-light); } .offer-head h3 { font-family: var(--head2); font-size: 26px; font-weight: 600; margin: 10px 0 8px; letter-spacing: -0.005em; } .offer-head p { font-size: 13px; color: var(--text-onindigo-mute); line-height: 1.65; } .offer-body { padding: 28px 32px 32px; } .offer-field { margin-bottom: 14px; } .offer-field input { width: 100%; border: none; border-bottom: 1.5px solid var(--line); border-radius: 0; padding: 10px 2px; font-size: 14px; font-family: var(--sans); color: var(--text); background: transparent; } .offer-field input:focus { outline: none; border-color: var(--gold); } .offer-consent { display: flex; align-items: flex-start; gap: 8px; font-size: 11px; color: var(--text-mute); margin: 10px 0 20px; line-height: 1.6; } .offer-submit { width: 100%; justify-content: center; } .offer-success { display: none; text-align: center; padding: 12px 0; } .offer-success.show { display: block; } .offer-success .tick { width: 46px; height: 46px; border-radius: 50%; background: var(--gold-gradient); color: var(--navy); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; } .offer-success .tick svg { width: 20px; height: 20px; } .offer-success p { font-size: 13.5px; color: var(--text-mute); } /* ============ RESPONSIVE RULES ============ */ @media (max-width: 960px) { .brand-logo-wrap{ width: auto; } .dev-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 0; } .dev-stat { border-left: none; padding-top: 0; padding-left: 0; } .dev-stat:nth-child(odd) { border-left: none; padding-left: 0; } .steps-grid { grid-template-columns: 1fr; border-top: none; } .step-card { border-left: none; border-top: 1px solid var(--line); padding: 32px 0 0; } .step-card:first-child { border-top: none; } .ps-grid { grid-template-columns: 1fr; } .ps-card-pain { padding: 8px 0; } .ps-card-sol { margin-right: 0; padding: 44px 32px; } } @media (max-width: 860px) { .container { padding: 0 22px; } .nav-links { position: fixed; top: 0; right: 0; height: 100vh; width: 82vw; max-width: 320px; background: var(--navy); border: none; border-radius: 0; flex-direction: column; align-items: flex-start; padding: 96px 26px; gap: 4px; transform: translateX(100%); transition: transform 0.4s ease; box-shadow: -10px 0 30px rgba(0, 0, 0, 0.4); } .nav-links a { width: 100%; font-size: 15px; padding: 13px 14px; color: rgba(255, 255, 255, 0.88); } .nav-links a:hover, .nav-links a.active { color: #fff; background: rgba(255, 255, 255, 0.09); } .nav-links.open { transform: translateX(0); } .nav-close { display: block; position: absolute; top: 22px; right: 22px; } .menu-toggle { display: flex; } .hero { min-height: auto; padding-top: 7px; } video { height: 100vh; } .hero-inner { grid-template-columns: 1fr; gap: 30px; } .hero-visual { justify-self: end; margin-top: 0; order: 1; } .hero-visual img { max-width: 130px; } .hero-stats-row { grid-template-columns: repeat(2, 1fr); gap: 22px 0; max-width: none; } .hstat:nth-child(2n) { padding-left: 22px; } .hstat:nth-child(odd) { border-left: none; padding-left: 0; } .hstat:nth-child(n + 3) { border-top: 1px solid var(--line-light); padding-top: 22px; margin-top: 4px; } .about-grid, .enq-card, .loc-grid { grid-template-columns: 1fr; } .about-grid { gap: 44px; } .about-img { aspect-ratio: 16/10; } .plan-cards.active { grid-template-columns: 1fr; } .plan-visual { border-right: none; border-bottom: 1px solid var(--line); } .sec { padding: 64px 0; } .sticky-cta { display: flex; } .hdr-phone { display: none !important; } .enq-side, .enq-form { padding: 32px; } .field-row { grid-template-columns: 1fr; gap: 20px; } .offer-head { padding: 26px 22px 20px; } .offer-body { padding: 22px 22px 26px; } .loc-map { aspect-ratio: 16/10; } .footer-row { flex-direction: column; align-items: flex-start; gap: 10px; } } @media (max-width: 520px) { .feature-badge-grid { grid-template-columns: 1fr; } .f-badge-card, .f-badge-card:nth-child(2n) { padding: 18px 0; border-left: none; } } .feature-badge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; width: 100%; border-top: 1px solid rgba(0, 0, 0, 0.12); border-left: 1px solid rgba(0, 0, 0, 0.12); } .f-badge-card { position: relative; min-height: 190px; padding: 34px 30px; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid rgba(0, 0, 0, 0.12); border-bottom: 1px solid rgba(0, 0, 0, 0.12); background: #fff; transition: all 0.4s ease; } /* Remove old odd/even layout rules */ .f-badge-card:nth-child(odd), .f-badge-card:nth-child(even) { padding-left: 30px; padding-right: 30px; border-right: 1px solid rgba(0, 0, 0, 0.12); } /* Title */ .fb-title { display: flex; align-items: center; gap: 12px; font-family: "Manrope", sans-serif; font-size: 18px; line-height: 1.3; font-weight: 600; color: #181818; } /* Icon */ .fb-icon { width: 25px; height: 25px; flex: 0 0 25px; color: #8d7655; transition: transform 0.35s ease; } /* Description */ .fb-desc { display: block; max-width: 320px; margin-top: 22px; font-family: "Manrope", sans-serif; font-size: 14px; line-height: 1.65; color: #737373; } /* Hover */ .f-badge-card:hover { background: #f7f5f0; } .f-badge-card:hover .fb-icon { transform: translateY(-2px); } /* ========================= TABLET ========================= */ @media (max-width: 991px) { .feature-badge-grid { grid-template-columns: repeat(2, 1fr); } .f-badge-card, .f-badge-card:nth-child(odd), .f-badge-card:nth-child(even) { padding: 30px 25px; } } /* ========================= MOBILE ========================= */ @media (max-width: 767px) { .feature-badge-grid { grid-template-columns: 1fr; border-left: 0; } .f-badge-card, .f-badge-card:nth-child(odd), .f-badge-card:nth-child(even) { min-height: auto; padding: 25px 20px; border-left: 0; border-right: 0; } .fb-title { font-size: 17px; } .fb-desc { max-width: 100%; margin-top: 10px; font-size: 13px; } .fb-icon { width: 23px; height: 23px; flex-basis: 23px; } } .ps-icon { width: 30px; height: 30px; min-width: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; } .ps-icon svg { width: 15px; height: 15px; } /* Pain / Problem icons */ .ps-card-pain .ps-icon { background: rgba(190, 90, 75, 0.08); color: var(--coral-deep); border: 1px solid rgba(190, 90, 75, 0.18); } /* Solution / Advantage icons */ .ps-card-sol .ps-icon { background: rgba(192, 154, 91, 0.10); color: var(--gold-light); border: 1px solid rgba(192, 154, 91, 0.25); } /* Make icons slightly refined */ .ps-icon svg { stroke-width: 1.8; } .plan-visual img{ filter: blur(5px); } /* ============ MOBILE FIXES: UNIT PLANS & FOOTER ============ */ @media (max-width: 768px) { .dev-band .dev-stat{ text-align: center; } /* --- Unit Plans --- */ .sec-head { margin-bottom: 32px; } .plan-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-bottom: 26px; } .plan-tabs::-webkit-scrollbar { display: none; } .plan-tab { flex: 0 0 auto; white-space: nowrap; font-size: 12px; padding: 13px 0; margin-right: 22px; } .plan-tab:last-child { margin-right: 0; } .plan-visual { padding: 20px; } .plan-info { padding: 28px 22px 30px; } .plan-info .name { font-size: 21px; } .plan-info .tag { margin-bottom: 18px; } .plan-spec { flex-direction: column; align-items: flex-start; gap: 3px; padding: 11px 0; } .plan-spec .v { font-size: 14px; } .plan-price { font-size: 23px; margin: 20px 0 18px; } .plan-info .btn { width: 100%; justify-content: center; } /* --- Footer --- */ .disclaimer-strip { padding: 20px 0; } .site-footer { padding: 26px 0 84px; } } #nl-badge-frame{ display: none !important; } /* ============ HEADER: DUAL LOGO LOCKUP ============ */ .brand-logo-wrap { width: auto; gap: 12px; } .success_msg, .error_msg { display: none; text-align: center; } .brand-logo-wrap .logo { width: auto; height: 50px; max-width: 150px; object-fit: contain; } .brand-logo-wrap .logo-atul { height: 59px; max-width: 120px; } .brand-divider { width: 1px; height: 24px; background: rgba(10, 18, 42, 0.22); display: inline-block; } /* keep the nav pill from crowding the CTA on mid-width screens */ @media (max-width: 1120px) { .nav-links { gap: 0; } .nav-links a { padding: 7px 9px; font-size: 11.5px; text-align: center; letter-spacing: 0.02em; } .hdr-phone { padding: 9px 13px; font-size: 12px; } .header-row { gap: 12px; } } /* ============ ROUND / PILL CTA (BANNER) ============ */ .btn-round { border-radius: 999px; padding: 13px 26px; } .hero .hero-btns .btn { border-radius: 999px; padding: 13px 26px; } /* ============ PROJECT WALKTHROUGH ============ */ .walk-frame { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; background: var(--navy); box-shadow: 0 20px 48px rgba(10, 18, 42, 0.1); } .walk-video { width: 100%; height: 100%; object-fit: cover; display: block; } .pb-0{ padding-bottom: 0; } .walk-note { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--mono); font-size: 16.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #0d1738; font-weight: 700; pointer-events: none; text-align: center; } /* ============ COMPACT SECTION (ENQUIRE) ============ */ .sec-compact { padding: 72px 0; } .sec-compact .sec-head { margin-bottom: 32px; } @media (max-width: 860px) { .brand-logo-wrap .logo { height: 50px; } .hero .hero-btns .btn { padding: 12px 22px; } } /* ============ WHATSAPP POPUP & FAB ============ */ .wa-popup { position: fixed; bottom: 26px; left: 26px; z-index: 120; width: 290px; background: #fff; border-radius: 12px; box-shadow: 0 22px 55px rgba(10, 18, 42, 0.25); overflow: hidden; transform: translateY(160%); transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); border: 1px solid var(--line); } .wa-popup.show { transform: translateY(0); } .wa-head { background: var(--navy); padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; color: #fff; } .wa-head .title { font-size: 13px; font-weight: 700; } .wa-close { cursor: pointer; font-size: 16px; opacity: 0.8; background: none; border: none; color: #fff; } .wa-body { padding: 18px; } .wa-body p { font-size: 13px; color: var(--text-mute); margin-bottom: 14px; line-height: 1.6; } .wa-btn { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--coral); color: #fff; padding: 12px; border-radius: 6px; font-size: 13px; font-weight: 700; } .wa-fab { position: fixed; bottom: 26px; left: 26px; z-index: 110; width: 54px; height: 54px; border-radius: 50%; background: var(--coral); display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 30px rgba(232, 90, 54, 0.4); border: none; cursor: pointer; font-size: 24px; transition: transform 0.25s ease; } .wa-fab:hover { transform: scale(1.08); } .wa-fab.hide { transform: scale(0); opacity: 0; pointer-events: none; } /* ============ QUICK ENQUIRY DOCK ============ */ .qe-dock { position: fixed; bottom: 26px; right: 26px; z-index: 110; width: 300px; } .qe-dock-card { background: #fff; border-radius: 12px; box-shadow: 0 22px 55px rgba(10, 18, 42, 0.2); border: 1px solid var(--line); overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease, margin 0.4s ease; margin-bottom: 0; } .qe-dock.open .qe-dock-card { max-height: 540px; opacity: 1; margin-bottom: 12px; } .qe-dock-inner { padding: 24px; } .qe-dock-title { font-family: var(--head2); font-weight: 700; font-size: 20px; color: var(--navy); margin-bottom: 4px; } .qe-dock-sub { font-size: 12px; color: var(--text-mute); margin-bottom: 16px; } .qe-field { margin-bottom: 10px; } .qe-field input, .qe-field select { width: 100%; border: 1.5px solid var(--line); border-radius: 6px; padding: 11px 13px; font-size: 13px; font-family: var(--sans); color: var(--text); background: var(--bg); transition: border-color 0.2s; } .qe-field input:focus, .qe-field select:focus { outline: none; border-color: var(--gold); } .qe-field.has-error input { border-color: var(--coral); } .qe-field .qe-err { display: none; font-size: 10px; color: var(--coral-deep); font-family: var(--mono); margin-top: 4px; } .qe-field.has-error .qe-err { display: block; } .qe-dock-submit { width: 100%; justify-content: center; margin-top: 4px; position: relative; } .qe-dock-submit::after { display: none; } .qe-dock-submit.is-loading { opacity: 0.7; pointer-events: none; } .qe-dock-success { display: none; text-align: center; padding: 8px 0 4px; } .qe-dock-success.show { display: block; } .qe-dock-success .tick { width: 36px; height: 36px; border-radius: 50%; background: var(--gold-gradient); color: var(--navy); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; margin: 0 auto 8px; } .qe-dock-success p { font-size: 12.5px; color: var(--text-mute); } .qe-dock-tab { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--navy); color: #fff; border: none; border-radius: 8px; padding: 14px 18px; cursor: pointer; box-shadow: 0 14px 34px rgba(10, 18, 42, 0.3); font-family: var(--sans); } .qe-dock-tab .qe-tab-title { font-family: var(--head2); font-weight: 700; font-size: 15px; color: var(--gold-light); } .qe-dock-tab .qe-tab-sub { display: block; font-size: 10px; color: var(--text-onindigo-mute); font-weight: 400; margin-top: 2px; font-family: var(--mono); } .qe-dock-tab .qe-chevron { transition: transform 0.3s ease; font-size: 12px; color: var(--gold-light); flex-shrink: 0; } .qe-dock.open .qe-chevron { transform: rotate(180deg); } @media (max-width: 1160px) { .qe-dock { display: none; } } @media (max-width: 860px) { .wa-popup { left: 14px; right: 14px; width: auto; bottom: 82px; } .wa-fab { bottom: 84px; left: 16px; width: 48px; height: 48px; font-size: 20px; } } /* ============ QUICK BOOKING STICKY BAR — Kundan .top-bar-strip style ============ */ .quick-book { position: fixed; bottom: 0; left: 0; right: 0; z-index: 96; background: var(--navy); border-top: 1px solid rgba(204, 163, 76, 0.28); padding: 10px 0; box-shadow: 0 -8px 26px rgba(10, 18, 42, 0.3); } .qb-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .qb-title { font-family: var(--head2); font-weight: 700; font-size: 19px; line-height: 1.05; color: #fff; margin-right: 16px; flex-shrink: 0; } .qb-title span { display: block; color: var(--gold-light); } .qb-input { flex: 1 1 130px; min-width: 120px; background: var(--indigo-card); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 5px; padding: 9px 14px; font-family: var(--sans); font-size: 13px; color: #fff; } .qb-input::placeholder { color: rgba(255, 255, 255, 0.7); } .qb-input:focus { outline: none; border-color: var(--gold); } .qb-submit { flex-shrink: 0; background: var(--coral); color: #fff; border: none; border-radius: 5px; padding: 10px 24px; font-family: var(--head); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: background 0.2s; } .qb-submit:hover { background: var(--coral-deep); } .qb-done-msg { font-family: var(--mono); font-size: 12px; color: var(--gold-light); flex-basis: 100%; text-align: center; } .qb-form.qb-done .qb-input, .qb-form.qb-done .qb-submit { opacity: 0.45; pointer-events: none; } /* ============ PROPSTORY FORM WRAPPER (layout-neutral) ============ */ /* .sidenav_form is a structural wrapper only — it must not affect the original form layout, so it passes its children straight through. The Propstory script can still hide it via an inline style on submit. */ form.enq_form .sidenav_form { display: contents; } /* Status messages stay hidden until the Propstory script reveals them. */ form.enq_form .success_msg, form.enq_form .error_msg { display: none; } /* ============ ATUL-STYLE REFINEMENTS ============ */ /* Hero re-balance after removing address line + site-visit CTA */ .hero { min-height: 100vh; } .hero-visual { margin-top: 6%; } @media (max-width: 860px) { .hero { min-height: auto; } .hero-visual { margin-top: 0; } } /* Header WhatsApp icon */ .hdr-wa { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #25d366; color: #fff; flex-shrink: 0; transition: transform 0.2s ease, box-shadow 0.2s ease; } .hdr-wa svg { width: 21px; height: 21px; } .hdr-wa:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4); } @media (max-width: 860px) { .header-row { gap: 8px; } .brand-logo-wrap { gap: 7px; flex: 1 1 auto; min-width: 0; overflow: hidden; } .brand-logo-wrap .logo { height: 44px; max-width: 100px; } .brand-logo-wrap .logo-atul { height: 38px; max-width: 82px; } .hdr-cta { gap: 8px; flex-shrink: 0; margin-left: auto; } .hdr-wa { width: 34px; height: 34px; } .hdr-wa svg { width: 18px; height: 18px; } } @media (max-width: 380px) { .brand-logo-wrap .logo { max-width: 82px; } .brand-logo-wrap .logo-atul { max-width: 68px; } } /* Softer, rounded image treatment — look & feel of atul-projects.netlify.app */ .about-img, .dev-visual, .loc-map, .plan-visual { border-radius: 16px; overflow: hidden; } .about-img, .dev-visual, .loc-map { border-color: rgba(10, 18, 42, 0.06); box-shadow: 0 20px 45px rgba(10, 18, 42, 0.1); } .about-img img, .dev-visual img, .loc-map iframe { border-radius: inherit; } /* "Image for representation" disclaimer tag on project imagery */ .about-img, .dev-visual, .plan-visual, .offer-visual { position: relative; } .rep-note { position: absolute; right: 5px; bottom: 5px; z-index: 2; font-family: var(--mono); font-size: 8px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255, 255, 255, 0.92); /* background: rgba(10, 18, 42, 0.482); */ /* border: 1px solid rgba(255, 255, 255, 0.057); */ padding: 4px 9px; border-radius: 4px; pointer-events: none; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .plan-visual .rep-note { display: none; } .rep-note-hero { z-index: 3; right: 2px; bottom: 2px; color: rgba(255, 255, 255, 0.72); /* background: rgba(10, 18, 42, 0.4); */ } @media (max-width: 860px) { .rep-note, .plan-visual .rep-note { right: 8px; bottom: 8px; font-size: 8px; letter-spacing: 0.06em; padding: 3px 7px; } .rep-note-hero { right: 14px; bottom: 14px; } } /* Image fade-up on scroll — atul-projects style (rise + fade) */ .reveal-img { opacity: 0; transform: translateY(52px); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } .reveal-img.in { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal-img { opacity: 1; transform: none; transition: none; } } /* Floor-plan visual rises in each time its tab becomes active */ .plan-cards.active { animation: planRiseIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes planRiseIn { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .plan-cards.active { animation: none; } } /* Offer modal — left form / right image split (atul-style) */ .offer-modal { max-width: 860px; display: flex; flex-direction: row; align-items: stretch; } .offer-main { flex: 1 1 54%; min-width: 0; display: flex; flex-direction: column; } .offer-main .offer-body { flex: 1; } .offer-visual { flex: 1 1 46%; position: relative; overflow: hidden; background: var(--navy); } .offer-visual img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 760px) { .offer-modal { flex-direction: column; max-width: 420px; } .offer-visual { display: none; } } /* Mobile overflow fixes — long CTA labels + grid/flex items were forcing .enq-card / .plan-cards wider than the viewport (then clipped). */ html { overflow-x: hidden; } @media (max-width: 860px) { .btn { white-space: normal; text-align: center; height: auto; line-height: 1.35; } .enq-card > .enq-side, .enq-card > .enq-form, .plan-cards > .plan-visual, .plan-cards > .plan-info { min-width: 0; } .enq-side .contact-line, .offer-head p, .consent, .offer-consent { overflow-wrap: anywhere; } .plan-tabs { flex-direction: column; gap: 0; } .plan-tab { width: 100%; margin-right: 0; padding: 13px 0; font-size: 12.5px; border-bottom: 1px solid var(--line); } .plan-tab.active { border-bottom-color: var(--gold); } } /* ============================================================ TYPOGRAPHY REFINEMENT Loaded last so it overrides earlier declarations. Goal: a tuned, editorial feel — sane weights (600–700, not 800), restrained letter-spacing, solid ink instead of gradient text, and no auto-arrow on every button. ============================================================ */ /* --- Body: Manrope wants a touch more leading, zero tracking --- */ body { font-size: 15.5px; line-height: 1.72; letter-spacing: 0; } .about-text p, .dev-note, .sec-desc, .hero-lede, .faq-ans, .enq-side p, .offer-head p, .disclaimer-strip p { line-height: 1.75; letter-spacing: 0; } .about-text p { font-size: 15.5px; } /* --- Display headings: Montserrat 700, gentle optical tracking --- */ .hero h1 { font-weight: 700; letter-spacing: -0.018em; line-height: 1.1; } .sec-title { font-weight: 700; letter-spacing: -0.015em; line-height: 1.18; } .enq-side h3, .offer-head h3, .step-card h3, .plan-info .name, .faq-item summary, .wa-head .title { font-weight: 600; letter-spacing: -0.005em; } /* --- Eyebrow / kicker: caps that breathe without shouting --- */ .eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; } .eyebrow::before { width: 24px; } /* --- Small uppercase labels: one consistent, quieter tracking --- */ .hstat .l, .loc-map-tag, .field label, .plan-spec .k, .plan-tab, .footer-row, .qe-dock-tab .qe-tab-sub { letter-spacing: 0.05em; } .hstat .l { font-size: 11.5px; } .dev-stat .l { font-size: 10px; letter-spacing: 0.07em; } /* --- Stat figures: solid ink, not gradient-filled text --- */ .hero h1 .hl { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--gold-light); font-weight: 600; letter-spacing: 0.004em; } .dev-stat .n { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--gold); font-weight: 700; letter-spacing: -0.012em; } .hstat .n { font-weight: 700; } /* --- Buttons: tighter tracking, drop the templated auto-arrow --- */ .btn { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; padding: 11px 22px; gap: 8px; } .btn::after { content: none; } /* --- Nav & brand lockup --- */ .nav-links a { letter-spacing: 0; font-weight: 500; } .hdr-phone { letter-spacing: 0.02em; font-weight: 600; } .brand-logo-title { letter-spacing: 0.06em; font-weight: 700; } .brand-logo-sub span { letter-spacing: 0.12em; } /* ============ MEDIA & PRESS ============ */ .press-viewall { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--coral); padding-bottom: 4px; white-space: nowrap; } .press-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .press-card { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; } .press-masthead { position: relative; aspect-ratio: 16 / 10; background: var(--navy); overflow: hidden; } .press-masthead img { width: 100%; height: 100%; object-fit: cover; display: block; } .press-badge { position: absolute; top: 12px; left: 12px; z-index: 1; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: #fff; background: var(--coral); padding: 4px 10px; border-radius: 3px; } .press-body { display: flex; flex-direction: column; gap: 12px; padding: 26px 24px 24px; flex: 1; } .press-cat { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.05em; color: var(--coral); } .press-title { font-family: var(--head); font-weight: 700; font-size: 15px; line-height: 1.32; letter-spacing: -0.01em; color: var(--navy); } .press-link { margin-top: auto; font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--coral); } @media (max-width: 900px) { .press-grid { grid-template-columns: 1fr; } .press-viewall { padding-bottom: 0; } }