/* ============================================================ Cappella Embassy — style.css (v2 Visual Overhaul) ============================================================ */ /* -- GOOGLE FONTS (loaded in ) ------------------------ */ /* Cormorant Garamond (serif headlines) + Inter (UI/body) */ /* -- RESET -------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } /* -- DESIGN TOKENS ------------------------------------------ */ :root { /* Backgrounds — deliberately stepped so cards stand out */ --bg-base: #080806; /* page base */ --bg-dark: #0e0d0b; /* section A */ --bg-mid: #141210; /* section B */ --bg-card: #1d1a16; /* card surface */ --bg-card-hi: #242018; /* card hover */ --bg-input: #191714; /* form inputs */ /* Gold palette */ --gold: #c9a96e; --gold-lt: #e2cc9a; --gold-dk: #8a6d3f; --gold-glow: rgba(201, 169, 110, 0.12); --gold-line: rgba(201, 169, 110, 0.25); /* Text */ --text-1: #f0ebe0; --text-2: #b0a08c; --text-3: #6a5e50; /* Borders */ --border: rgba(255,255,255,0.06); --border-hi: rgba(201,169,110,0.3); /* Misc */ --radius: 4px; --max-w: 1200px; --header-h: 70px; --transition: 0.22s ease; --font-ui: 'Inter', 'Helvetica Neue', Arial, sans-serif; --font-display: 'Cormorant Garamond', 'Palatino Linotype', Georgia, serif; } /* -- BASE BODY ---------------------------------------------- */ body { background: var(--bg-base); color: var(--text-1); font-family: var(--font-ui); font-size: 15px; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* -- TYPOGRAPHY HELPERS ------------------------------------- */ .serif { font-family: var(--font-display); } .eyebrow { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; } .section-title { font-family: var(--font-display); font-size: clamp(30px, 4.5vw, 50px); font-weight: 400; color: var(--text-1); line-height: 1.1; letter-spacing: 0.01em; } .section-lead { font-size: 15px; color: var(--text-2); max-width: 560px; line-height: 1.9; margin-top: 12px; } .gold-rule { width: 44px; height: 1px; background: var(--gold); margin: 22px 0 28px; } .tc .gold-rule { margin-left: auto; margin-right: auto; } .tc .section-lead { margin: 0 auto; } .tc { text-align: center; } /* -- LAYOUT HELPERS ----------------------------------------- */ .wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 28px; } section { padding: 100px 0; } /* -- BUTTONS ------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; padding: 15px 30px; border: none; border-radius: var(--radius); cursor: pointer; transition: all var(--transition); white-space: nowrap; outline: none; } /* Primary — champagne gold fill */ .btn-primary { background: var(--gold); color: #080806; } .btn-primary:hover { background: var(--gold-lt); box-shadow: 0 4px 20px rgba(201,169,110,0.35); transform: translateY(-1px); } /* Secondary — gold outline */ .btn-secondary { background: transparent; color: var(--gold); border: 1px solid var(--gold-dk); } .btn-secondary:hover { border-color: var(--gold); background: var(--gold-glow); transform: translateY(-1px); } /* Ghost */ .btn-ghost { background: transparent; color: var(--text-2); border: 1px solid var(--border); } .btn-ghost:hover { border-color: var(--gold-dk); color: var(--gold); } /* Full-width util */ .btn-block { width: 100%; } /* +----------------------------------------------------------+ ¦ S1 — HEADER ¦ +----------------------------------------------------------+ */ #header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--header-h); background: rgba(8,8,6,0.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 28px; } .header-logo { text-decoration: none; } .header-logo-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 17px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-1); display: block; line-height: 1; } .header-logo-loc { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); display: block; margin-top: 5px; } .header-nav { display: flex; align-items: center; gap: 34px; list-style: none; } .header-nav a { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); text-decoration: none; transition: color var(--transition); } .header-nav a:hover { color: var(--gold); } .header-actions { display: flex; align-items: center; gap: 14px; } /* Hamburger */ .hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; } .hamburger span { display: block; width: 22px; height: 1.5px; background: #ffffff; transition: var(--transition); } .hamburger:hover span, .hamburger:focus-visible span { background: var(--gold-lt); } /* Mobile nav */ .mobile-menu { display: none; position: fixed; top: var(--header-h); left: 0; right: 0; background: var(--bg-card); border-bottom: 1px solid var(--border); padding: 28px; z-index: 999; } .mobile-menu.open { display: block; } .mobile-menu ul { list-style: none; display: flex; flex-direction: column; gap: 22px; margin-bottom: 28px; } .mobile-menu ul a { font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); text-decoration: none; } /* +----------------------------------------------------------+ ¦ S2 — HERO ¦ +----------------------------------------------------------+ */ #hero { position: relative; min-height: 100vh; min-height: 100dvh; /* modern browsers: accounts for mobile browser chrome */ display: flex; flex-direction: column; justify-content: flex-end; padding-top: var(--header-h); padding-bottom: 0; background: var(--bg-base); overflow: hidden; } .hero-media { position: absolute; inset: 0; z-index: 0; } .hero-media picture, .hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; } .hero-media picture { position: absolute; inset: 0; } .hero-video { position: absolute; inset: 0; } /* Soft left-side wash keeps dark text readable while preserving a bright hero */ .hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, rgba(248,244,235,0.43) 0%, rgba(248,244,235,0.23) 35%, rgba(248,244,235,0.0) 66%), linear-gradient(to top, rgba(248,244,235,0.2) 0%, rgba(248,244,235,0.07) 34%, rgba(248,244,235,0.0) 62%); } .hero-body { position: relative; z-index: 2; max-width: var(--max-w); margin: 0 auto; padding: 0 28px 166px; width: 100%; isolation: isolate; } .hero-body::before { content: ''; position: absolute; left: 0; bottom: 48px; width: min(640px, calc(100% - 56px)); height: 66%; z-index: -1; background: linear-gradient(90deg, rgba(248,244,235,0.26), rgba(248,244,235,0.09) 62%, rgba(248,244,235,0)); filter: blur(14px); pointer-events: none; } /* Eyebrow */ .hero-sub { font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; } .hero-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(38px, 5.2vw, 68px); font-weight: 500; line-height: 0.98; letter-spacing: 0.06em; text-transform: uppercase; color: #15130f; margin-bottom: 28px; max-width: 700px; } .hero-title span { display: block; } .hero-subtitle { font-family: 'Inter', 'Helvetica Neue', sans-serif; font-size: 17px; font-weight: 500; color: #242018; letter-spacing: 0.08em; line-height: 1.5; margin-bottom: 22px; } .hero-description { font-family: 'Inter', 'Helvetica Neue', sans-serif; font-size: 15px; font-weight: 400; color: #302a21; line-height: 1.85; letter-spacing: 0.01em; margin-bottom: 42px; } /* Tag strip — uniform height via flex + fixed line-height */ .hero-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 36px; } .hero-tag { display: inline-flex; align-items: center; height: 32px; padding: 0 16px; font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); border: 1px solid rgba(255,255,255,0.18); border-radius: 2px; background: rgba(8,8,6,0.52); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); white-space: nowrap; } /* CTA row */ .hero-ctas { display: flex; flex-wrap: wrap; gap: 22px; } /* Ensure both hero buttons are comfortably tappable */ .hero-ctas .btn { min-height: 50px; padding: 14px 32px; border-radius: 11px; letter-spacing: 0.08em; transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition); } .hero-ctas .btn-primary { background: #151515; color: #f8f4eb; border: 1px solid rgba(202,166,104,0.7); font-weight: 700; box-shadow: 0 12px 28px rgba(8,8,6,0.22); } .hero-ctas .btn-primary:hover { background: var(--gold); color: #15130f; border-color: var(--gold); box-shadow: 0 14px 30px rgba(201,169,110,0.26); transform: translateY(-2px); } .hero-ctas .btn-secondary { color: #15130f; border: 1px solid rgba(202,166,104,0.7); background: rgba(255,255,255,0.18); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 10px 24px rgba(8,8,6,0.12); } .hero-ctas .btn-secondary:hover { color: #15130f; border-color: rgba(202,166,104,0.82); background: rgba(255,255,255,0.28); transform: translateY(-2px); } .hero-feature-bar { position: absolute; left: 50%; bottom: 24px; z-index: 3; width: min(var(--max-w), calc(100% - 56px)); transform: translateX(-50%); display: grid; grid-template-columns: repeat(5, 1fr); background: rgba(18,18,17,0.8); border: 1px solid rgba(202,166,104,0.42); border-radius: 16px; box-shadow: 0 18px 38px rgba(8,8,6,0.22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .hero-feature-item { min-height: 90px; display: flex; align-items: center; gap: 12px; padding: 16px; border-right: 1px solid rgba(202,166,104,0.16); } .hero-feature-item:last-child { border-right: 0; padding-right: 74px; } .hero-feature-icon { width: 24px; height: 24px; flex-shrink: 0; color: var(--gold-lt); fill: none; stroke: currentColor; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; } .hero-feature-title { font-size: 9px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold-lt); line-height: 1.3; margin-bottom: 4px; } .hero-feature-main, .hero-feature-sub { font-size: 10px; color: #f5efe3; line-height: 1.42; } .hero-feature-sub { color: rgba(245,239,227,0.72); } /* +----------------------------------------------------------+ ¦ S3 — KEY HIGHLIGHTS ¦ +----------------------------------------------------------+ */ #highlights { background: var(--bg-mid); } .highlights-intro { margin-bottom: 56px; } .highlights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .hl-card { background: var(--bg-card); border: 1px solid rgba(255,255,255,0.07); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: border-color var(--transition), transform var(--transition); } .hl-card:hover { border-color: var(--gold-line); transform: translateY(-3px); } .hl-card-img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; object-position: center; display: block; filter: brightness(0.75) saturate(0.8); transition: filter var(--transition); } .hl-card-img--contain { object-fit: contain; background: #f5f0e4; filter: brightness(1) saturate(1); } .hl-card:hover .hl-card-img { filter: brightness(0.9) saturate(1); } .hl-card:hover .hl-card-img--contain { filter: brightness(1) saturate(1); } .hl-card-body { padding: 28px 28px 32px; flex: 1; } .hl-card-num { display: none; } .hl-card-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 21px; font-weight: 500; color: var(--text-1); margin-bottom: 12px; line-height: 1.25; } .hl-card-text { font-size: 13.5px; color: rgba(235, 228, 214, 0.72); line-height: 1.85; } /* +----------------------------------------------------------+ ¦ S4 — LOCATION MAP ¦ +----------------------------------------------------------+ */ #location { background: var(--bg-dark); } /* Tab row */ .loc-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 40px 0 24px; } .loc-map-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .loc-map-tabs::-webkit-scrollbar { display: none; } .loc-tab { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); background: var(--bg-card); border: 1px solid var(--border); padding: 10px 20px; border-radius: var(--radius); cursor: pointer; transition: all var(--transition); } .loc-tab:hover { border-color: var(--gold-dk); color: var(--gold); } .loc-tab.active { background: var(--gold); color: #080806; border-color: var(--gold); font-weight: 600; } /* Map frame */ .loc-map-frame { position: relative; width: 100%; background: #f5f0e4; border: 1px solid var(--gold-line); border-radius: var(--radius); overflow: hidden; margin-bottom: 24px; line-height: 0; } .loc-map-frame img { width: 100%; height: auto; object-fit: contain; display: block; transition: opacity 0.25s ease; } .loc-map-frame.is-fading img { opacity: 0; } .loc-map-badge { position: absolute; bottom: 18px; right: 18px; font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); background: rgba(8,8,6,0.85); border: 1px solid var(--border); padding: 8px 16px; border-radius: var(--radius); backdrop-filter: blur(8px); } /* Category cards */ .loc-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } .loc-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 18px; cursor: pointer; transition: all var(--transition); border-left: 3px solid transparent; } .loc-card:hover { border-left-color: var(--gold-dk); background: var(--bg-card-hi); } .loc-card.active { border-left-color: var(--gold); background: var(--bg-card-hi); } .loc-card-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 15px; font-weight: 500; color: var(--text-1); margin-bottom: 10px; } .loc-card.active .loc-card-title { color: var(--gold); } .loc-card ul { list-style: none; display: flex; flex-direction: column; gap: 4px; } .loc-card ul li { font-size: 11.5px; color: var(--text-3); line-height: 1.5; } .loc-card ul li::before { content: '— '; color: var(--gold-dk); } /* +----------------------------------------------------------+ ¦ S5 — LAYOUTS ¦ +----------------------------------------------------------+ */ #layouts { background: var(--bg-mid); } /* -- TYPE TABS ---------------------------------------------- */ .lyt-type-tabs { display: flex; gap: 4px; margin-top: 48px; border-bottom: 1px solid var(--border); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .lyt-type-tabs::-webkit-scrollbar { display: none; } .lyt-type-tab { flex-shrink: 0; background: none; border: none; border-bottom: 2px solid transparent; padding: 14px 28px; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); cursor: pointer; transition: color var(--transition), border-color var(--transition); margin-bottom: -1px; } .lyt-type-tab:hover { color: var(--text-2); } .lyt-type-tab.active { color: var(--gold); border-bottom-color: var(--gold); } .lyt-type-tab--premium { color: var(--gold-dk); } .lyt-type-tab--premium.active { color: var(--gold-lt); border-bottom-color: var(--gold-lt); } /* -- SUBTYPE ROW -------------------------------------------- */ .lyt-sub-row { display: flex; gap: 8px; margin: 28px 0 0; } .lyt-sub-row--penthouse { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .lyt-sub-row--penthouse::-webkit-scrollbar { display: none; } .lyt-sub-btn { background: transparent; border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 22px; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); cursor: pointer; transition: all var(--transition); } .lyt-sub-btn:hover { border-color: var(--gold-dk); color: var(--text-2); } .lyt-sub-btn.active { background: var(--gold-glow); border-color: var(--gold); color: var(--gold); } .lyt-panel--penthouse .lyt-sub-btn.active { border-color: var(--gold-lt); color: var(--gold-lt); box-shadow: 0 0 0 1px rgba(201,169,110,0.14); } /* -- PANEL -------------------------------------------------- */ .lyt-panel { display: none; } .lyt-panel.active { display: block; } /* -- TWO-COLUMN DISPLAY ------------------------------------- */ .lyt-display { display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: start; margin-top: 28px; padding: 40px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); } /* -- FLOOR PLAN IMAGE --------------------------------------- */ .lyt-img-frame { position: relative; background: #f5f0e8; border: 1px solid var(--gold-line); border-radius: var(--radius); cursor: zoom-in; overflow: hidden; line-height: 0; } .lyt-fp-img { width: 100%; height: auto; display: block; object-fit: contain; transition: transform 0.3s ease; } .lyt-img-frame:hover .lyt-fp-img { transform: scale(1.02); } .lyt-zoom-tag { position: absolute; bottom: 12px; right: 12px; font-size: 9px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); background: rgba(8,8,6,0.78); border: 1px solid var(--border); padding: 5px 10px; border-radius: 2px; opacity: 0; transition: opacity 0.2s ease; backdrop-filter: blur(6px); } .lyt-img-frame:hover .lyt-zoom-tag { opacity: 1; } /* -- INFO PANEL --------------------------------------------- */ .lyt-info-col { display: flex; flex-direction: column; padding-top: 8px; } .lyt-label { font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; } .lyt-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(38px, 5vw, 56px); font-weight: 300; color: var(--text-1); line-height: 1; margin-bottom: 16px; } .lyt-size { font-size: 14px; font-weight: 500; color: var(--text-1); letter-spacing: 0.04em; margin-bottom: 6px; } .lyt-beds { font-size: 12.5px; color: var(--text-2); margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border); } .lyt-hint { font-size: 11px; color: var(--text-3); letter-spacing: 0.04em; margin-bottom: 28px; } .lyt-ctas { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; } .lyt-note { font-size: 11px; color: var(--text-3); line-height: 1.8; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--border); } /* -- LIGHTBOX ----------------------------------------------- */ .lightbox { display: none; position: fixed; inset: 0; z-index: 9000; background: rgba(8,8,6,0.93); align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(6px); } .lightbox.open { display: flex; } .lightbox-inner { position: relative; max-width: min(700px, 90vw); max-height: 88vh; background: #f5f0e8; border: 1px solid var(--gold-line); border-radius: var(--radius); overflow: hidden; display: flex; align-items: center; justify-content: center; } .lightbox-inner img { display: block; max-width: 100%; max-height: 85vh; object-fit: contain; padding: 20px; } .lightbox-close { position: fixed; top: 20px; right: 24px; width: 44px; height: 44px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 50%; color: var(--text-2); font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color var(--transition), color var(--transition); z-index: 9001; } .lightbox-close:hover { border-color: var(--gold); color: var(--gold); } .penthouse-link { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--gold-dk); text-decoration: none; letter-spacing: 0.04em; transition: color var(--transition); } .penthouse-link:hover { color: var(--gold); } /* +----------------------------------------------------------+ ¦ S6 — FACILITIES ¦ +----------------------------------------------------------+ */ #facilities { background: var(--bg-dark); } /* Header row: title left, CTAs right */ .fac-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .fac-header-text { flex: 1; min-width: 0; } .fac-header-text .section-title { margin-bottom: 0; } .fac-header-btns { display: flex; gap: 12px; flex-shrink: 0; padding-bottom: 4px; } /* Blueprint tabs */ .fac-blueprint-module { margin-top: 48px; } .fac-tabs { display: flex; gap: 6px; border-bottom: 1px solid rgba(201,169,110,0.18); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .fac-tabs::-webkit-scrollbar { display: none; } .fac-tab { flex-shrink: 0; background: transparent; border: none; border-bottom: 2px solid transparent; padding: 14px 22px; margin-bottom: -1px; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); cursor: pointer; transition: color var(--transition), background var(--transition), border-color var(--transition); } .fac-tab:hover { color: var(--gold-lt); background: rgba(201,169,110,0.06); } .fac-tab.active { color: var(--gold); border-bottom-color: var(--gold); } .fac-blueprint-frame { position: relative; background: #11100e; border: 1px solid rgba(201,169,110,0.42); border-radius: 16px; overflow: hidden; margin-top: 28px; cursor: zoom-in; min-height: 420px; display: flex; align-items: center; justify-content: center; box-shadow: 0 18px 44px rgba(0,0,0,0.26); } .fac-blueprint-frame img { width: 100%; height: auto; max-height: 760px; object-fit: contain; display: block; transition: transform 0.28s ease; } .fac-blueprint-frame:hover img { transform: scale(1.02); } .fac-blueprint-zoom { position: absolute; bottom: 16px; right: 18px; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-lt); background: rgba(8,8,6,0.72); border: 1px solid rgba(201,169,110,0.28); padding: 6px 13px; border-radius: 999px; pointer-events: none; } .fac-blueprint-caption { max-width: 760px; margin: 18px auto 0; color: var(--text-2); font-size: 14px; line-height: 1.85; text-align: center; } .fac-blueprint-disclaimer { max-width: 760px; margin: 18px auto 0; color: rgba(176,160,140,0.72); font-size: 11px; line-height: 1.7; text-align: center; } .fac-amenity-accordion { max-width: 980px; margin: 28px auto 0; border-top: 1px solid rgba(201, 169, 110, 0.24); } .fac-amenity-item { border-bottom: 1px solid rgba(201, 169, 110, 0.18); } .fac-amenity-trigger { width: 100%; min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; border: 0; background: transparent; color: #fff8eb; font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.1; text-align: left; cursor: pointer; } .fac-amenity-icon { width: 34px; height: 34px; flex: 0 0 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(216, 189, 136, 0.42); color: var(--gold-lt); font-family: var(--font-ui); font-size: 18px; transition: transform var(--transition), background var(--transition), color var(--transition); } .fac-amenity-item.open .fac-amenity-icon { transform: rotate(45deg); background: var(--gold); color: #102018; } .fac-amenity-panel { display: none; padding: 0 0 26px; } .fac-amenity-item.open .fac-amenity-panel { display: block; } .fac-amenity-panel ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px 28px; list-style: none; } .fac-amenity-panel li { position: relative; padding-left: 18px; color: rgba(246, 239, 227, 0.78); font-size: 13px; line-height: 1.65; } .fac-amenity-panel li::before { content: ''; position: absolute; left: 0; top: 0.82em; width: 7px; height: 1px; background: var(--gold); } /* Actual project gallery */ .project-gallery { margin-top: 56px; } .project-gallery-header { margin-bottom: 24px; } .project-gallery-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(28px, 3vw, 38px); font-weight: 400; color: var(--text-1); line-height: 1.15; } .project-gallery-subtitle { margin-top: 8px; font-size: 14px; color: var(--text-2); line-height: 1.7; } .gallery-category-tabs { display: flex; gap: 6px; border-bottom: 1px solid rgba(201,169,110,0.18); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .gallery-category-tabs::-webkit-scrollbar { display: none; } .gallery-cat-tab { flex-shrink: 0; background: transparent; border: none; border-bottom: 2px solid transparent; padding: 14px 22px; margin-bottom: -1px; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); cursor: pointer; transition: color var(--transition), background var(--transition), border-color var(--transition); } .gallery-cat-tab:hover { color: var(--gold-lt); background: rgba(201,169,110,0.06); } .gallery-cat-tab.active { color: var(--gold); border-bottom-color: var(--gold); } .gallery-carousel { position: relative; margin-top: 28px; } .gallery-viewport { overflow: hidden; } .gallery-panel { display: none; } .gallery-panel.active { display: block; } .gallery-track { display: flex; gap: 16px; transition: transform 0.35s ease; will-change: transform; } .gallery-card { flex: 0 0 calc((100% - 32px) / 3); min-width: 0; background: rgba(18,18,17,0.82); border: 1px solid rgba(201,169,110,0.34); border-radius: 16px; overflow: hidden; box-shadow: 0 14px 32px rgba(0,0,0,0.22); } .gallery-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; cursor: zoom-in; filter: brightness(0.86) saturate(0.92); transition: transform 0.28s ease, filter var(--transition); } .gallery-card:hover img { transform: scale(1.02); filter: brightness(1) saturate(1); } .gallery-card figcaption { padding: 13px 15px 15px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-lt); line-height: 1.4; } .gallery-arrow { position: absolute; top: 43%; z-index: 2; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(201,169,110,0.42); background: rgba(8,8,6,0.72); color: var(--gold-lt); font-size: 28px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(0,0,0,0.28); transition: transform var(--transition), background var(--transition), border-color var(--transition); } .gallery-arrow:hover { transform: translateY(-1px); background: rgba(18,18,17,0.9); border-color: var(--gold); } .gallery-arrow--prev { left: -18px; } .gallery-arrow--next { right: -18px; } .gallery-arrow:disabled { opacity: 0.35; cursor: default; transform: none; } .gallery-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; } .gallery-dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(201,169,110,0.48); background: transparent; cursor: pointer; padding: 0; } .gallery-dot.active { background: var(--gold); border-color: var(--gold); } .fac-note { margin-top: 24px; margin-inline: auto; max-width: 760px; font-size: 11px; color: var(--text-3); line-height: 1.8; text-align: center; } @media (max-width: 900px) { .fac-header { flex-direction: column; align-items: flex-start; } .fac-header-btns { flex-wrap: wrap; } .fac-blueprint-frame { min-height: 300px; } .gallery-card { flex-basis: calc((100% - 16px) / 2); } } @media (max-width: 480px) { .fac-tab { padding: 12px 16px; font-size: 10px; } .fac-blueprint-frame { min-height: 220px; border-radius: 12px; } .fac-blueprint-caption { font-size: 13px; text-align: left; } .gallery-cat-tab { padding: 12px 16px; font-size: 10px; } .gallery-card { flex-basis: 100%; } .gallery-arrow { width: 38px; height: 38px; font-size: 24px; } .gallery-arrow--prev { left: 8px; } .gallery-arrow--next { right: 8px; } } /* +----------------------------------------------------------+ ¦ S7 — DEVELOPER PORTFOLIO ¦ +----------------------------------------------------------+ */ #portfolio { background: var(--bg-mid); } .portfolio-lead { font-size: 15px; color: var(--text-2); max-width: 600px; line-height: 1.9; margin-bottom: 48px; } .portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .pf-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: all var(--transition); border-left: 3px solid transparent; display: flex; flex-direction: column; } .pf-item:hover { border-left-color: var(--gold-dk); background: var(--bg-card-hi); } .pf-img-wrap { width: 100%; aspect-ratio: 1 / 1 !important; overflow: hidden; flex-shrink: 0; position: relative; } .pf-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.82) saturate(0.85); transition: filter var(--transition), transform 0.4s ease; } .pf-item:hover .pf-img { filter: brightness(1) saturate(1); transform: scale(1.03); } .pf-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; } .pf-status { display: inline-block; font-size: 7.5px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold-dk); border: 1px solid var(--gold-dk); border-radius: 2px; padding: 2px 7px; line-height: 1.6; align-self: flex-start; } .pf-meta { display: flex; flex-direction: column; gap: 4px; } .pf-name-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .pf-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 16px; font-weight: 500; color: var(--text-1); line-height: 1.3; min-width: 0; } .pf-loc { font-size: 11px; color: var(--text-3); line-height: 1.4; } .pf-enquiry-btn { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; padding: 3px 10px; font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-dk); border: 1px solid var(--gold-dk); border-radius: 20px; text-decoration: none; white-space: nowrap; transition: background var(--transition), color var(--transition); } .pf-enquiry-btn:hover { background: var(--gold-dk); color: var(--bg-base); } .portfolio-footnote { margin-top: 24px; font-size: 11px; color: var(--text-3); } @media (max-width: 900px) { .portfolio-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .portfolio-grid { grid-template-columns: 1fr; } .pf-loc { text-align: left; } } /* +----------------------------------------------------------+ ¦ S8 — CONTACT / LEAD FORM ¦ +----------------------------------------------------------+ */ #contact { background: var(--bg-dark); position: relative; overflow: hidden; } #contact::before { content: ''; position: absolute; top: -180px; right: -180px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(201,169,110,0.05) 0%, transparent 65%); pointer-events: none; } .contact-grid { display: flex; justify-content: center; position: relative; z-index: 1; } .contact-form-centered { width: 100%; max-width: 680px; } /* Form */ .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-group { margin-bottom: 16px; } .form-group label { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; } .form-group input, .form-group select, .form-group textarea { width: 100%; background: var(--bg-input); border: 1px solid rgba(255,255,255,0.09); color: var(--text-1); font-family: 'Inter', sans-serif; font-size: 14px; padding: 13px 16px; border-radius: var(--radius); outline: none; transition: border-color var(--transition), background var(--transition); appearance: none; -webkit-appearance: none; } .form-group input::placeholder { color: var(--text-3); } .form-group input:focus, .form-group select:focus { border-color: var(--gold-dk); background: var(--bg-card); } .form-group select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236a5e50' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; cursor: pointer; } .form-group select option { background: var(--bg-input); color: var(--text-1); } /* Sidebar cards */ .contact-sidebar { display: flex; flex-direction: column; } .cs-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 36px 32px; } .cs-card--featured { border-color: var(--gold-line); background: var(--bg-card-hi); } .cs-card-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 24px; font-weight: 400; color: var(--text-1); line-height: 1.25; margin-bottom: 14px; } .cs-card-text { font-size: 13.5px; color: var(--text-2); line-height: 1.85; margin-bottom: 28px; } /* +----------------------------------------------------------+ ¦ S9 — FAQ ¦ +----------------------------------------------------------+ */ #faq { background: var(--bg-mid); } .faq-list { max-width: 800px; margin: 56px auto 0; display: flex; flex-direction: column; gap: 8px; } .faq-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color var(--transition); } .faq-item.open { border-color: var(--gold-line); } .faq-q { width: 100%; background: none; border: none; text-align: left; padding: 22px 26px; display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; transition: background var(--transition); } .faq-q:hover { background: var(--bg-card-hi); } .faq-q-text { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 17px; font-weight: 500; color: var(--text-1); line-height: 1.4; } .faq-item.open .faq-q-text { color: var(--gold); } .faq-icon { width: 18px; height: 18px; color: var(--gold-dk); flex-shrink: 0; transition: transform 0.3s ease; } .faq-item.open .faq-icon { transform: rotate(45deg); color: var(--gold); } .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; } .faq-item.open .faq-a { max-height: 400px; } .faq-a p { font-size: 14px; color: var(--text-2); line-height: 1.9; padding: 16px 26px 24px; border-top: 1px solid var(--border); } /* +----------------------------------------------------------+ ¦ S10 — AGENT PROFILE ¦ +----------------------------------------------------------+ */ #agent { background: var(--bg-dark); } .agent-layout { display: grid; grid-template-columns: 360px 1fr; gap: 64px; align-items: center; max-width: 960px; margin: 0 auto; } /* Left: image */ .agent-img-col { display: flex; justify-content: center; align-items: flex-end; } .agent-img-wrap { width: 100%; max-width: 320px; } .agent-img { width: 100%; height: auto; object-fit: contain; display: block; filter: drop-shadow(0 8px 32px rgba(0,0,0,0.5)); } /* Right: content */ .agent-content { display: flex; flex-direction: column; } .agent-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(28px, 3vw, 40px); font-weight: 400; color: var(--text-1); margin-top: 10px; margin-bottom: 4px; line-height: 1.1; } .agent-title-line { font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 0; } .agent-rule { width: 36px; height: 1px; background: var(--gold-line); margin: 18px 0; } .agent-credentials { list-style: none; display: flex; flex-direction: column; gap: 7px; } .agent-credentials li { font-size: 13px; color: var(--text-2); display: flex; gap: 10px; align-items: baseline; } .agent-cred-label { font-size: 8.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); min-width: 48px; flex-shrink: 0; } .agent-desc { font-size: 14px; color: var(--text-2); line-height: 1.85; } .agent-desc + .agent-desc { margin-top: 10px; } .agent-wa-btn { align-self: flex-start; margin-top: 28px; } @media (max-width: 800px) { .agent-layout { grid-template-columns: 1fr; gap: 32px; } .agent-img-wrap { max-width: 200px; margin: 0 auto; } .agent-img-col { order: 1; } .agent-content { order: 2; } .agent-wa-btn { align-self: stretch; text-align: center; justify-content: center; } } /* +----------------------------------------------------------+ ¦ S11 — FOOTER ¦ +----------------------------------------------------------+ */ #footer { background: var(--bg-card); border-top: 1px solid var(--border); padding: 56px 0 0; } .footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; padding-bottom: 40px; } .footer-brand-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-1); margin-bottom: 6px; } .footer-brand-sub { display: block; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-dk); margin-bottom: 16px; } .footer-brand-desc { font-size: 13px; color: var(--text-3); line-height: 1.85; max-width: 340px; margin-bottom: 24px; } .footer-nav { display: flex; flex-wrap: wrap; gap: 16px; list-style: none; } .footer-nav a { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); text-decoration: none; transition: color var(--transition); } .footer-nav a:hover { color: var(--gold); } .footer-disclaimer { font-size: 11.5px; color: var(--text-3); line-height: 1.9; padding-left: 24px; border-left: 2px solid var(--border); } .footer-disclaimer strong { display: block; font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2); margin-bottom: 10px; } .footer-bottom { border-top: 1px solid var(--border); padding: 20px 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; } .footer-copy { font-size: 11px; color: var(--text-3); } /* +----------------------------------------------------------+ ¦ RESPONSIVE — TABLET = 1024px ¦ +----------------------------------------------------------+ */ @media (max-width: 1024px) { section { padding: 80px 0; } .header-nav, .header-actions .btn-primary { display: none; } .hamburger { display: flex; } .highlights-grid { grid-template-columns: repeat(2, 1fr); } .lyt-display { grid-template-columns: 1fr; gap: 32px; padding: 28px; } .loc-cards { grid-template-columns: repeat(3, 1fr); } .portfolio-grid { grid-template-columns: repeat(2, 1fr); } .facilities-grid { grid-template-columns: 1fr; } .contact-form-centered { max-width: 100%; } .footer-grid { grid-template-columns: 1fr; } } /* +----------------------------------------------------------+ ¦ RESPONSIVE — MOBILE = 640px ¦ +----------------------------------------------------------+ */ @media (max-width: 640px) { section { padding: 64px 0; } .wrap { padding: 0 18px; } .highlights-grid { grid-template-columns: 1fr; gap: 12px; } .lyt-display { padding: 20px; gap: 24px; } .lyt-type-tab { padding: 12px 18px; } .lyt-name { font-size: 40px; } .loc-tabs { gap: 6px; } .loc-tab { font-size: 10px; padding: 8px 14px; } .loc-cards { grid-template-columns: 1fr 1fr; gap: 8px; } .loc-map-frame { width: 100%; } .portfolio-grid { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } /* Hero mobile */ #hero { min-height: 92vh; min-height: 92dvh; } .hero-body { padding: 0 18px 64px; } .hero-body::before { left: 0; bottom: 34px; width: 100%; height: 72%; } .hero-title { font-size: 40px; line-height: 0.9; letter-spacing: 0.05em; margin-bottom: 24px; } .hero-subtitle { font-size: 13px; margin-bottom: 18px; letter-spacing: 0.05em; } .hero-description { font-size: 13px; line-height: 1.75; margin-bottom: 30px; } .hero-feature-bar { display: none; } .hero-tags { gap: 6px; margin-bottom: 28px; } .hero-tag { height: 30px; padding: 0 13px; font-size: 9.5px; } .hero-ctas { flex-direction: column; gap: 12px; } .hero-ctas .btn { width: 100%; min-height: 52px; justify-content: center; } .footer-bottom { flex-direction: column; align-items: flex-start; } } /* ============================================================ Editorial luxury restyle Inspired by a boutique Embassy Row property journal direction. ============================================================ */ :root { --bg-base: #f2ede4; --bg-dark: #0c2118; --bg-mid: #f2ede4; --bg-card: #fffaf1; --bg-card-hi: #f8f0e3; --bg-input: #fffaf1; --gold: #b98c49; --gold-lt: #d8bd88; --gold-dk: #8a6432; --gold-glow: rgba(185, 140, 73, 0.12); --gold-line: rgba(185, 140, 73, 0.28); --text-1: #1b1712; --text-2: #695d4f; --text-3: #9a8c7a; --border: rgba(35, 28, 18, 0.09); --border-hi: rgba(185, 140, 73, 0.34); --radius: 2px; --max-w: 1120px; } body { background: radial-gradient(circle at 8% 18%, rgba(185, 140, 73, 0.05), transparent 24rem), var(--bg-base); color: var(--text-1); } .wrap { padding: 0 34px; } section { padding: 112px 0; } .section-title { font-size: clamp(38px, 5.4vw, 62px); font-weight: 400; letter-spacing: -0.005em; color: var(--text-1); } .section-lead { color: var(--text-2); max-width: 620px; } .eyebrow { color: var(--gold); font-size: 9px; letter-spacing: 0.28em; } .gold-rule { width: 54px; background: linear-gradient(90deg, var(--gold), rgba(185, 140, 73, 0)); } .btn { border-radius: 0; letter-spacing: 0.15em; box-shadow: none; } .btn-primary { background: var(--gold); color: #101b15; } .btn-primary:hover { background: #cba462; box-shadow: 0 14px 30px rgba(78, 54, 24, 0.18); } .btn-secondary { color: var(--gold-dk); border-color: var(--gold-line); } #header { background: rgba(8, 20, 15, 0.84); border-bottom-color: rgba(235, 224, 205, 0.12); } .header-logo-name, .header-nav a { color: #f6efe3; } .header-logo-loc, .header-nav a:hover { color: var(--gold-lt); } .mobile-menu { background: #10251c; border-bottom-color: rgba(235, 224, 205, 0.12); } .mobile-menu ul a { color: rgba(246, 239, 227, 0.78); } #hero { min-height: 96vh; min-height: 96dvh; background: #0c2118; } .hero-media img, .hero-media video { filter: sepia(0.14) saturate(0.78) contrast(0.92) brightness(0.86); object-position: center 35%; } .hero-overlay { background: linear-gradient(90deg, rgba(7, 22, 15, 0.92) 0%, rgba(7, 22, 15, 0.72) 34%, rgba(7, 22, 15, 0.2) 64%, rgba(7, 22, 15, 0.04) 100%), linear-gradient(0deg, rgba(8, 20, 14, 0.38), rgba(8, 20, 14, 0.04) 48%); } .hero-body { padding-bottom: 170px; } .hero-body::before { left: 28px; bottom: 126px; width: 1px; height: 210px; background: rgba(216, 189, 136, 0.45); filter: none; } .hero-title { font-size: clamp(52px, 7.2vw, 94px); font-weight: 500; letter-spacing: -0.015em; line-height: 0.84; text-transform: none; color: #fff8eb; max-width: 660px; text-shadow: 0 18px 48px rgba(0, 0, 0, 0.24); } .hero-subtitle { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(20px, 2vw, 27px); font-style: italic; letter-spacing: 0.01em; color: var(--gold-lt); } .hero-description { color: rgba(250, 244, 232, 0.82); max-width: 500px; } .hero-ctas .btn { border-radius: 0; min-height: 48px; padding: 14px 30px; } .hero-ctas .btn-primary { background: var(--gold); border-color: var(--gold); color: #102018; } .hero-ctas .btn-secondary { background: rgba(246, 239, 227, 0.08); color: #fff8eb; border-color: rgba(216, 189, 136, 0.55); backdrop-filter: blur(10px); } .hero-feature-bar { bottom: -56px; width: min(840px, calc(100% - 56px)); grid-template-columns: repeat(5, 1fr); background: rgba(255, 250, 241, 0.96); border: 1px solid rgba(185, 140, 73, 0.18); border-radius: 0; box-shadow: 0 28px 58px rgba(48, 38, 25, 0.18); backdrop-filter: blur(12px); } .hero-feature-item { min-height: 116px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; border-right-color: rgba(185, 140, 73, 0.16); } .hero-feature-item:last-child { padding-right: 16px; } .hero-feature-icon { display: none; } .hero-feature-title { color: var(--gold-dk); font-size: 8px; } .hero-feature-main { font-family: 'Cormorant Garamond', Georgia, serif; color: var(--text-1); font-size: 18px; line-height: 1.1; } .hero-feature-sub { color: var(--text-3); font-size: 10px; } #highlights { padding-top: 158px; background: var(--bg-base); } .highlights-intro, #location .wrap > .eyebrow, #layouts .wrap > .eyebrow, #facilities .wrap > .eyebrow, #portfolio .wrap > .eyebrow { text-align: left; } .highlights-grid { gap: 22px; } .hl-card, .lyt-display, .loc-card, .faq-item, .pf-item, .cs-card { background: var(--bg-card); border-color: var(--border); border-radius: 0; box-shadow: 0 22px 48px rgba(64, 49, 30, 0.07); } .hl-card { border: 0; box-shadow: none; } .hl-card-img { filter: sepia(0.12) saturate(0.74) brightness(0.92); } .hl-card-body { padding: 24px 0 0; background: transparent; } .hl-card-title { font-size: 26px; color: var(--text-1); } .hl-card-text { color: var(--text-2); } #location, #facilities, #contact, #agent, #footer { --bg-card: #10291f; --bg-card-hi: #163329; --bg-input: #0e241b; --text-1: #fff8eb; --text-2: rgba(246, 239, 227, 0.72); --text-3: rgba(246, 239, 227, 0.48); --border: rgba(246, 239, 227, 0.1); background: #0c2118; color: var(--text-1); } #location, #facilities, #contact, #agent { background: radial-gradient(circle at 92% 14%, rgba(216, 189, 136, 0.08), transparent 22rem), #0c2118; } #location .section-title, #location .section-lead, #facilities .section-title, #facilities .section-lead, #contact .section-title, #contact .section-lead, #agent .agent-name, #footer .footer-brand-name { color: var(--text-1); } .loc-tab { background: transparent; color: var(--text-2); border-color: rgba(216, 189, 136, 0.2); border-radius: 0; } .loc-tab.active { background: var(--gold); color: #102018; } .loc-map-frame, .lyt-img-frame { border-radius: 0; box-shadow: 0 24px 52px rgba(31, 24, 16, 0.12); } .loc-card { box-shadow: none; } .loc-card-title, .faq-q-text, .pf-name { color: var(--text-1); } #layouts, #portfolio, #faq { background: radial-gradient(circle at 10% 0%, rgba(185, 140, 73, 0.055), transparent 24rem), var(--bg-base); } .lyt-type-tabs { border-bottom-color: rgba(185, 140, 73, 0.2); } .lyt-type-tab { color: var(--text-3); } .lyt-type-tab.active, .lyt-type-tab--premium.active { color: var(--gold-dk); border-bottom-color: var(--gold); } .lyt-sub-btn { color: var(--text-2); border-radius: 0; background: rgba(255, 250, 241, 0.5); } .lyt-sub-btn.active { background: #10291f; color: #fff8eb; border-color: #10291f; } .lyt-display { border: 0; box-shadow: 0 30px 70px rgba(64, 49, 30, 0.1); } .lyt-name { color: var(--text-1); } .fac-blueprint-frame, .gallery-card { border-radius: 0; background: rgba(255, 250, 241, 0.06); } .gallery-card img, .pf-img { filter: sepia(0.12) saturate(0.76) brightness(0.9); } .gallery-card:hover img, .pf-item:hover .pf-img { filter: sepia(0.08) saturate(0.9) brightness(1); } .gallery-cat-tab { border-radius: 0; } .portfolio-grid { gap: 22px; } .pf-item { border: 0; box-shadow: none; background: transparent; } .pf-body { padding: 16px 0 0; } .pf-status, .pf-enquiry-btn { border-radius: 0; } #contact { border-top: 1px solid rgba(216, 189, 136, 0.14); border-bottom: 1px solid rgba(216, 189, 136, 0.14); } #contact::before { background: radial-gradient(circle, rgba(216, 189, 136, 0.08) 0%, transparent 68%); } .contact-form-centered { max-width: 600px; padding: 46px; background: #fffaf1; color: #1b1712; box-shadow: 0 28px 70px rgba(0, 0, 0, 0.22); } .contact-form-centered .form-group label { color: #8a7d6d; } .contact-form-centered .form-group input, .contact-form-centered .form-group select, .contact-form-centered .form-group textarea { background: #fffdf8; color: #1b1712; border-color: rgba(35, 28, 18, 0.12); } .contact-form-centered .form-group input:focus, .contact-form-centered .form-group select:focus { background: #fffaf1; border-color: var(--gold); } #faq .faq-list { max-width: 700px; } #faq .faq-item { box-shadow: none; background: rgba(255, 250, 241, 0.72); } #faq .faq-q:hover { background: rgba(185, 140, 73, 0.06); } .agent-layout { max-width: 980px; border: 1px solid rgba(216, 189, 136, 0.16); padding: 54px; } .agent-img { filter: sepia(0.12) saturate(0.78) drop-shadow(0 18px 38px rgba(0, 0, 0, 0.38)); } #footer { background: #07130e; } .footer-disclaimer { border-left-color: rgba(216, 189, 136, 0.22); } @media (max-width: 1024px) { .hero-feature-bar { width: min(720px, calc(100% - 42px)); grid-template-columns: repeat(3, 1fr); } .hero-feature-item { min-height: 94px; } #highlights { padding-top: 132px; } } /* Explicit placement for location header and map */ #location .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 0.58fr); grid-template-areas: "locEyebrow locLead" "locTitle locLead" "locRule locLead" "locTabs locTabs" "locMap locMap" "locCards locCards"; column-gap: clamp(42px, 7vw, 96px); align-items: end; } #location .wrap > .eyebrow { grid-area: locEyebrow; } #location .wrap > .section-title { grid-area: locTitle; } #location .wrap > .gold-rule { grid-area: locRule; } #location .wrap > .section-lead { grid-area: locLead; align-self: center; margin: 0; } #location .loc-map-tabs { grid-area: locTabs; } #location .loc-map-frame { grid-area: locMap; } #location .loc-cards { grid-area: locCards; } @media (max-width: 1024px) { #location .wrap { grid-template-columns: 1fr; grid-template-areas: "locEyebrow" "locTitle" "locRule" "locLead" "locTabs" "locMap" "locCards"; } #location .wrap > .section-lead { margin-top: 12px; } } @media (max-width: 640px) { .wrap { padding: 0 22px; } section { padding: 82px 0; } #hero { min-height: 94vh; min-height: 94dvh; } .hero-overlay { background: linear-gradient(90deg, rgba(7, 22, 15, 0.9), rgba(7, 22, 15, 0.38)), linear-gradient(0deg, rgba(8, 20, 14, 0.52), rgba(8, 20, 14, 0.08)); } .hero-body { padding: 0 22px 70px; } .hero-body::before { display: none; } .hero-title { font-size: clamp(38px, 10.5vw, 44px); line-height: 0.94; letter-spacing: -0.01em; } .hero-subtitle { font-size: 17px; } .hero-feature-bar { display: none; } #highlights { padding-top: 82px; } .section-title { font-size: 38px; } .highlights-grid, .portfolio-grid { grid-template-columns: 1fr; } .contact-form-centered { padding: 28px 20px; } .agent-layout { padding: 34px 22px; } } /* Hero alignment fix */ #hero { justify-content: center; min-height: 100vh; min-height: 100dvh; } .hero-body { padding: calc(var(--header-h) + 24px) 28px 160px 86px; } .hero-body::before { display: none; } .hero-feature-bar { bottom: 32px; } #highlights { padding-top: 112px; } @media (max-width: 1024px) { .hero-body { padding-bottom: 190px; padding-left: 70px; } .hero-feature-bar { bottom: 24px; } #highlights { padding-top: 92px; } } @media (max-width: 640px) { #hero { justify-content: center; } .hero-body { padding: calc(var(--header-h) + 18px) 22px 44px; } #highlights { padding-top: 82px; } } @media (max-width: 380px) { .hero-title { font-size: 36px; } } /* Highlight card refinement */ .highlights-grid { gap: 28px; align-items: stretch; } .hl-card { position: relative; background: rgba(255, 250, 241, 0.78); border: 1px solid rgba(185, 140, 73, 0.12); box-shadow: 0 18px 44px rgba(63, 48, 29, 0.055); overflow: hidden; min-height: 100%; } .hl-card::after { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(185, 140, 73, 0); pointer-events: none; transition: border-color var(--transition); } .hl-card:hover { transform: translateY(-5px); border-color: rgba(185, 140, 73, 0.24); box-shadow: 0 26px 58px rgba(63, 48, 29, 0.1); } .hl-card:hover::after { border-color: rgba(185, 140, 73, 0.16); } .hl-card-img { aspect-ratio: 16 / 10; padding: 0; object-fit: cover; filter: sepia(0.1) saturate(0.82) brightness(0.96); } .hl-card-img--contain { object-fit: contain; padding: 18px; background: #eee5d6; } .hl-card:hover .hl-card-img { filter: sepia(0.06) saturate(0.98) brightness(1); transform: scale(1.025); } .hl-card:hover .hl-card-img--contain { filter: sepia(0.04) saturate(0.95) brightness(1.02); transform: none; } .hl-card-body { padding: 30px 30px 34px; } .hl-card-title { font-size: clamp(24px, 2vw, 30px); line-height: 1.12; margin-bottom: 16px; max-width: 95%; } .hl-card-text { font-size: 14px; line-height: 1.9; color: #5d5145; } @media (max-width: 1024px) { .highlights-grid { gap: 22px; } .hl-card-body { padding: 26px 24px 30px; } } @media (max-width: 640px) { .highlights-grid { gap: 18px; } .hl-card-body { padding: 24px 22px 28px; } .hl-card-title { font-size: 25px; } } /* Location redesign: editorial two-column atlas */ #location { padding: 120px 0; } #location .wrap { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.78fr); grid-template-areas: "map eyebrow" "map title" "map rule" "map lead" "map tabs" "map cards"; column-gap: clamp(38px, 5vw, 68px); align-items: start; } #location .eyebrow { grid-area: eyebrow; margin-top: 12px; } #location .section-title { grid-area: title; max-width: 420px; } #location .gold-rule { grid-area: rule; } #location .section-lead { grid-area: lead; max-width: 430px; color: rgba(246, 239, 227, 0.72); } #location .loc-map-tabs { grid-area: tabs; margin: 34px 0 26px; gap: 10px; padding: 0; } #location .loc-tab { min-height: 42px; padding: 0 18px; background: rgba(255, 250, 241, 0.06); border-color: rgba(216, 189, 136, 0.2); } #location .loc-tab.active { background: var(--gold); border-color: var(--gold); color: #0c2118; } #location .loc-map-frame { grid-area: map; position: sticky; top: calc(var(--header-h) + 28px); min-height: 0; height: auto; aspect-ratio: 16 / 10; margin: 0; background: #f5efe3 url("location-map-overview.webp") center / contain no-repeat; border: 1px solid rgba(216, 189, 136, 0.22); box-shadow: 0 34px 80px rgba(0, 0, 0, 0.22); } #location .loc-map-frame::before { content: 'LOCATION ATLAS'; position: absolute; top: 18px; left: 18px; z-index: 2; color: #8a6432; background: rgba(255, 250, 241, 0.88); border: 1px solid rgba(185, 140, 73, 0.2); padding: 7px 11px; font-size: 8px; font-weight: 700; letter-spacing: 0.18em; } #location .loc-map-frame img { width: 100%; height: 100%; object-fit: contain; padding: clamp(12px, 2vw, 22px); opacity: 0; } #location .loc-map-badge { left: 18px; right: auto; bottom: 18px; color: #fff8eb; background: rgba(12, 33, 24, 0.88); border-color: rgba(216, 189, 136, 0.24); } #location .loc-cards { grid-area: cards; display: flex; flex-direction: column; gap: 0; counter-reset: locItem; border-top: 1px solid rgba(216, 189, 136, 0.16); } #location .loc-card { counter-increment: locItem; display: grid; grid-template-columns: 42px 1fr; gap: 18px; align-items: start; padding: 16px 0; background: transparent; border: 0; border-bottom: 1px solid rgba(216, 189, 136, 0.16); box-shadow: none; border-left: 0; } #location .loc-card::before { content: counter(locItem, decimal-leading-zero); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; color: rgba(216, 189, 136, 0.62); padding-top: 4px; } #location .loc-card:hover, #location .loc-card.active { background: transparent; border-left: 0; } #location .loc-card.active::before, #location .loc-card:hover::before { color: var(--gold-lt); } #location .loc-card-title { grid-column: 2; font-size: 22px; line-height: 1.08; margin-bottom: 10px; color: #fff8eb; } #location .loc-card.active .loc-card-title, #location .loc-card:hover .loc-card-title { color: var(--gold-lt); } #location .loc-card ul { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px 10px; } #location .loc-card ul li { color: rgba(246, 239, 227, 0.58); font-size: 12px; line-height: 1.55; } #location .loc-card ul li + li::before { content: '/'; margin-right: 10px; color: rgba(216, 189, 136, 0.45); } #location .loc-card ul li::before { content: ''; } @media (max-width: 1024px) { #location .wrap { grid-template-columns: 1fr; grid-template-areas: "eyebrow" "title" "rule" "lead" "tabs" "map" "cards"; row-gap: 0; } #location .loc-map-frame { position: relative; top: auto; min-height: 0; height: auto; aspect-ratio: 16 / 10; margin-bottom: 28px; } #location .loc-map-frame img { height: 100%; } #location .loc-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 28px; } } @media (max-width: 640px) { #location { padding: 86px 0; } #location .loc-map-tabs { margin-top: 26px; } #location .loc-map-frame { aspect-ratio: 4 / 3; } #location .loc-map-frame::before, #location .loc-map-badge { display: none; } #location .loc-cards { grid-template-columns: 1fr; } #location .loc-card { grid-template-columns: 36px 1fr; padding: 18px 0; } } /* Location reset: wide map with card row */ #location .wrap { display: block; max-width: 1280px; } #location .eyebrow, #location .section-title, #location .gold-rule, #location .section-lead { max-width: 720px; } #location .loc-map-tabs { display: flex; margin: 42px 0 24px; gap: 10px; } #location .loc-tab { min-height: 44px; padding: 0 24px; } #location .loc-map-frame { position: relative; top: auto; width: 100%; aspect-ratio: 16 / 9; margin: 0 0 28px; background: #f5efe3 url("location-map-overview.webp") center / contain no-repeat; border: 1px solid rgba(216, 189, 136, 0.48); box-shadow: 0 24px 54px rgba(0, 0, 0, 0.2); } #location .loc-map-frame::before { display: none; } #location .loc-map-frame img { opacity: 0; } #location .loc-map-badge { display: none; } #location .loc-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; border-top: 0; } #location .loc-card { display: block; padding: 24px 22px 26px; min-height: 178px; background: rgba(255, 250, 241, 0.055); border: 1px solid rgba(216, 189, 136, 0.14); border-left: 3px solid transparent; box-shadow: none; } #location .loc-card::before { display: none; } #location .loc-card:hover, #location .loc-card.active { background: rgba(255, 250, 241, 0.08); border-left-color: var(--gold); } #location .loc-card-title { display: block; font-size: 20px; line-height: 1.18; margin-bottom: 16px; } #location .loc-card ul { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 6px; } #location .loc-card ul li { font-size: 12px; } #location .loc-card ul li::before { content: '-- '; color: rgba(216, 189, 136, 0.58); } #location .loc-card ul li + li::before { content: '-- '; margin-right: 0; } @media (max-width: 1024px) { #location .loc-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { #location .loc-map-frame { aspect-ratio: 4 / 3; } #location .loc-cards { grid-template-columns: 1fr; } #location .loc-card { min-height: 0; padding: 22px; } } /* Section header: place description beside title */ .highlights-intro, #location .wrap, #layouts .wrap, #contact .tc, #gallery .project-gallery-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 0.58fr); column-gap: clamp(42px, 7vw, 96px); align-items: start; } .highlights-intro > .eyebrow, #location .wrap > .eyebrow, #layouts .wrap > .eyebrow, #contact .tc > .eyebrow, #gallery .project-gallery-header > .eyebrow { grid-column: 1; } .highlights-intro > .section-title, #location .wrap > .section-title, #layouts .wrap > .section-title, #contact .tc > .section-title, #gallery .project-gallery-header > .project-gallery-title { grid-column: 1; } .highlights-intro > .gold-rule, #location .wrap > .gold-rule, #layouts .wrap > .gold-rule, #contact .tc > .gold-rule { grid-column: 1; } .highlights-intro > .section-lead, #location .wrap > .section-lead, #layouts .wrap > .section-lead, #contact .tc > .section-lead, #gallery .project-gallery-header > .project-gallery-subtitle { grid-column: 2; grid-row: 2 / span 2; align-self: start; max-width: 520px; margin: 8px 0 0; } #gallery .project-gallery-header > .project-gallery-subtitle { grid-row: 1; } .highlights-grid, #location .loc-map-tabs, #location .loc-map-frame, #location .loc-cards, #layouts .lyt-type-tabs, #layouts .lyt-panel, #layouts .lyt-panel.active, #contact .contact-grid { grid-column: 1 / -1; } #location .loc-map-tabs, #layouts .lyt-type-tabs { margin-top: 48px; } #contact .tc { text-align: left; margin-bottom: 56px !important; } #contact .tc .gold-rule { margin-left: 0; margin-right: 0; } #contact .tc .section-lead { margin: 0; } .fac-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(32px, 5vw, 72px); align-items: start; } .fac-header-text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 0.68fr); column-gap: clamp(36px, 6vw, 84px); align-items: start; } .fac-header-text .eyebrow, .fac-header-text .section-title, .fac-header-text .gold-rule { grid-column: 1; } .fac-header-text .section-lead { grid-column: 2; grid-row: 2 / span 2; align-self: start; max-width: 520px; margin: 8px 0 0; } .fac-header-btns { justify-self: end; } @media (max-width: 1024px) { .highlights-intro, #location .wrap, #layouts .wrap, #contact .tc, #gallery .project-gallery-header, .fac-header, .fac-header-text { grid-template-columns: 1fr; } .highlights-intro > .section-lead, #location .wrap > .section-lead, #layouts .wrap > .section-lead, #contact .tc > .section-lead, #gallery .project-gallery-header > .project-gallery-subtitle, .fac-header-text .section-lead { grid-column: 1; grid-row: auto; margin-top: 12px; } .fac-header-btns { justify-self: start; margin-top: 24px; } } /* Final location header order override */ #location .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 0.58fr); grid-template-areas: "locEyebrow locLead" "locTitle locLead" "locRule locLead" "locTabs locTabs" "locMap locMap" "locCards locCards"; column-gap: clamp(42px, 7vw, 96px); align-items: start; } #location .wrap > .eyebrow { grid-area: locEyebrow; } #location .wrap > .section-title { grid-area: locTitle; } #location .wrap > .gold-rule { grid-area: locRule; } #location .wrap > .section-lead { grid-area: locLead; grid-column: auto; grid-row: auto; align-self: start; margin: 8px 0 0; max-width: 520px; } #location .loc-map-tabs { grid-area: locTabs; grid-column: auto; margin-top: 48px; } #location .loc-map-frame { grid-area: locMap; grid-column: auto; } #location .loc-cards { grid-area: locCards; grid-column: auto; } @media (max-width: 1024px) { #location .wrap { grid-template-columns: 1fr; grid-template-areas: "locEyebrow" "locTitle" "locRule" "locLead" "locTabs" "locMap" "locCards"; } #location .wrap > .section-lead { margin-top: 12px; } } /* Standalone gallery replaces developer portfolio */ #gallery { background: radial-gradient(circle at 82% 12%, rgba(185, 140, 73, 0.06), transparent 24rem), var(--bg-base); } #gallery .wrap { max-width: 1280px; } #gallery .project-gallery { margin-top: 0; } #gallery .project-gallery-header { max-width: 620px; margin-bottom: 34px; } #gallery .project-gallery-title { color: var(--text-1); font-size: clamp(38px, 5vw, 58px); } #gallery .project-gallery-subtitle { color: var(--text-2); } #gallery .gallery-category-tabs { border-color: rgba(185, 140, 73, 0.2); } #gallery .gallery-cat-tab { color: var(--text-2); border-color: rgba(185, 140, 73, 0.18); } #gallery .gallery-cat-tab.active { color: #102018; background: var(--gold); border-color: var(--gold); } #gallery .gallery-card { background: rgba(255, 250, 241, 0.82); border: 1px solid rgba(185, 140, 73, 0.14); box-shadow: 0 18px 44px rgba(63, 48, 29, 0.08); } #gallery .gallery-card img { aspect-ratio: 4 / 3; } #gallery .gallery-card figcaption { display: none; } #gallery .gallery-arrow { background: rgba(12, 33, 24, 0.88); color: #fff8eb; border-color: rgba(216, 189, 136, 0.26); } #gallery .gallery-dot { border-color: var(--gold); } /* Final section structure cleanup */ .highlights-intro, #layouts .wrap, #contact .tc, #gallery .project-gallery-header { grid-template-columns: minmax(460px, 0.56fr) minmax(360px, 0.44fr); column-gap: clamp(48px, 8vw, 120px); } .highlights-intro > .section-lead, #layouts .wrap > .section-lead, #contact .tc > .section-lead, #gallery .project-gallery-header > .project-gallery-subtitle { max-width: 480px; } #location .wrap { grid-template-columns: minmax(460px, 0.56fr) minmax(360px, 0.44fr); column-gap: clamp(48px, 8vw, 120px); } #location .loc-map-tabs, #location .loc-map-frame, #location .loc-cards { width: 100%; max-width: none; justify-self: stretch; grid-column: 1 / -1 !important; } #location .loc-map-frame { aspect-ratio: 3 / 2; cursor: zoom-in; } #location .loc-map-frame:hover { border-color: rgba(216, 189, 136, 0.58); } #location .loc-map-frame:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; } #location .loc-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); } #locationLightbox .lightbox-inner { width: 98vw; max-width: none; height: 92vh; max-height: none; overflow: auto; align-items: center; justify-content: center; cursor: grab; scrollbar-color: var(--gold-dk) rgba(255, 255, 255, 0.08); } #locationLightbox .lightbox-inner.is-zoomed { align-items: flex-start; justify-content: flex-start; } #locationLightbox .lightbox-inner img { flex: 0 0 auto; width: auto; min-width: 0; max-width: none; max-height: none; object-fit: contain; padding: 12px; height: auto; transition: width 0.16s ease; user-select: none; pointer-events: none; } #locationLightbox .lightbox-inner:active { cursor: grabbing; } #locationLightbox .lightbox-inner.is-dragging { cursor: grabbing; user-select: none; } .location-zoom-controls { position: fixed; top: 20px; left: 24px; z-index: 9001; display: flex; align-items: center; gap: 8px; padding: 8px; background: rgba(29, 26, 22, 0.92); border: 1px solid var(--border); border-radius: 999px; backdrop-filter: blur(8px); } .location-zoom-controls button, .location-zoom-controls span { min-width: 42px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; background: rgba(255, 255, 255, 0.04); color: var(--text-1); font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; } .location-zoom-controls button { cursor: pointer; transition: background var(--transition), border-color var(--transition), color var(--transition); } .location-zoom-controls button:hover { background: var(--gold); border-color: var(--gold); color: #0f1f16; } .location-zoom-controls span { min-width: 66px; color: var(--gold-lt); } @media (max-width: 640px) { #locationLightbox .lightbox-inner { width: 98vw; height: 86vh; } .location-zoom-controls { left: 12px; right: 70px; gap: 6px; overflow-x: auto; border-radius: 18px; } } .fac-header { grid-template-columns: 1fr; row-gap: 28px; } .fac-header-text { grid-template-columns: minmax(420px, 0.56fr) minmax(360px, 0.44fr); column-gap: clamp(48px, 8vw, 120px); width: 100%; } .fac-header-text .section-title { max-width: 520px; } .fac-header-text .section-lead { max-width: 480px; } .fac-header-btns { justify-self: end; margin-top: -12px; } #gallery .project-gallery-header { max-width: none; width: 100%; } #gallery .project-gallery-title { max-width: 520px; } @media (max-width: 1024px) { .highlights-intro, #location .wrap, #layouts .wrap, #contact .tc, #gallery .project-gallery-header, .fac-header-text { grid-template-columns: 1fr; } .fac-header-btns { justify-self: start; margin-top: 0; } #location .loc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { #location .loc-cards { grid-template-columns: 1fr; } } /* Highlight cards: large image overlay navigation */ #highlights .highlights-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-top: 18px; } #highlights .hl-card { position: relative; display: block; min-height: 420px; aspect-ratio: 0.82; overflow: hidden; border: 0; background-color: #102018; background-size: cover; background-position: center; color: #fff8eb; text-decoration: none; box-shadow: none; } #highlights .hl-card:nth-child(1) { background-image: url("project-noted01.webp"); } #highlights .hl-card:nth-child(2) { background-image: url("project-noted02.webp"); } #highlights .hl-card:nth-child(3) { background-image: url("project-noted03.webp"); } #highlights .hl-card:nth-child(4) { background-image: url("project-noted04.webp"); } #highlights .hl-card:nth-child(5) { background-image: url("project-noted05.webp"); } #highlights .hl-card:nth-child(6) { background-image: url("project-noted06.webp"); } #highlights .hl-card::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(7, 16, 12, 0.12) 0%, rgba(7, 16, 12, 0.34) 42%, rgba(7, 16, 12, 0.94) 100%), linear-gradient(90deg, rgba(7, 16, 12, 0.24), rgba(7, 16, 12, 0.04)); pointer-events: none; } #highlights .hl-card::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(216, 189, 136, 0); z-index: 3; pointer-events: none; } #highlights .hl-card:hover { transform: translateY(-6px); box-shadow: 0 30px 70px rgba(35, 26, 16, 0.16); } #highlights .hl-card:hover::after { border-color: rgba(216, 189, 136, 0.46); } #highlights .hl-card-img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center; opacity: 1; filter: sepia(0.04) saturate(0.9) brightness(1.02); transition: transform 0.5s ease, filter var(--transition); } #highlights .hl-card:nth-child(1) .hl-card-img { object-position: 58% center; } #highlights .hl-card:nth-child(2) .hl-card-img { object-position: center; } #highlights .hl-card:nth-child(3) .hl-card-img { object-position: center; } #highlights .hl-card:hover .hl-card-img { transform: scale(1.045); filter: sepia(0.02) saturate(1.02) brightness(1.08); } #highlights .hl-card-body { position: absolute; left: 34px; right: 34px; bottom: 34px; z-index: 2; min-height: 160px; padding: 0; color: #fff8eb; } #highlights .hl-card-title { max-width: 320px; margin: 0 0 14px; color: #fff8eb; font-size: clamp(24px, 2.1vw, 32px); line-height: 1.05; text-shadow: 0 16px 34px rgba(0, 0, 0, 0.28); } #highlights .hl-card-text { max-width: 320px; color: rgba(255, 248, 235, 0.9); font-size: 15px; line-height: 1.65; margin-right: 0; } #highlights .hl-card-arrow { display: none; } #highlights .hl-card:hover .hl-card-arrow { background: var(--gold); color: #102018; transform: translateX(2px); } @media (max-width: 1024px) { #highlights .highlights-grid { grid-template-columns: 1fr; } #highlights .hl-card { min-height: 420px; } } @media (max-width: 640px) { #highlights .hl-card { min-height: 360px; } #highlights .hl-card-body { left: 24px; right: 24px; bottom: 24px; } #highlights .hl-card-title { font-size: 34px; } } @media (max-width: 760px) { .fac-amenity-accordion { margin-top: 24px; } .fac-amenity-trigger { min-height: 56px; font-size: 23px; } .fac-amenity-panel ul { grid-template-columns: 1fr; gap: 7px; } } /* Mobile hero: keep the cover image visible while preserving text contrast */ @media (max-width: 640px) { .hero-media img, .hero-media video { filter: sepia(0.08) saturate(0.9) contrast(0.96) brightness(0.98); } .hero-overlay { background: linear-gradient(90deg, rgba(7, 22, 15, 0.66) 0%, rgba(7, 22, 15, 0.34) 48%, rgba(7, 22, 15, 0.08) 100%), linear-gradient(0deg, rgba(8, 20, 14, 0.36) 0%, rgba(8, 20, 14, 0.08) 54%, rgba(8, 20, 14, 0) 100%); } } /* Floating WhatsApp button */ .whatsapp-float { position: fixed; right: 22px; bottom: 22px; z-index: 1200; display: inline-flex; align-items: center; gap: 12px; min-height: 58px; padding: 9px 18px 9px 9px; background: linear-gradient(135deg, rgba(16, 41, 31, 0.96), rgba(8, 24, 17, 0.96)), #10291f; color: #fff8eb; border: 1px solid rgba(216, 189, 136, 0.38); border-radius: 999px; box-shadow: 0 20px 54px rgba(0, 0, 0, 0.32); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-decoration: none; text-transform: uppercase; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition); } .whatsapp-float:hover { background: linear-gradient(135deg, rgba(18, 53, 39, 0.98), rgba(10, 34, 24, 0.98)), #10291f; border-color: rgba(37, 211, 102, 0.66); transform: translateY(-2px); box-shadow: 0 26px 64px rgba(0, 0, 0, 0.38); } .whatsapp-float-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #25d366; color: #ffffff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 10px 22px rgba(37, 211, 102, 0.22); line-height: 0; } .whatsapp-float-icon svg { width: 23px; height: 23px; display: block; fill: currentColor; } .whatsapp-float-copy { display: flex; flex-direction: column; gap: 1px; line-height: 1; } .whatsapp-float-kicker { color: rgba(246, 239, 227, 0.58); font-size: 9px; font-weight: 600; letter-spacing: 0.14em; } .whatsapp-float-text { color: #fff8eb; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; } @media (max-width: 640px) { .whatsapp-float { right: 16px; bottom: 16px; width: 54px; height: 54px; min-height: 54px; padding: 7px; } .whatsapp-float-copy { display: none; } } /* Final 360 virtual tour section */ #virtual-tour { --bg-card: #10291f; --bg-card-hi: #163329; --bg-input: #0e241b; --text-1: #fff8eb; --text-2: rgba(246, 239, 227, 0.72); --text-3: rgba(246, 239, 227, 0.48); --border: rgba(246, 239, 227, 0.1); background: radial-gradient(circle at 92% 14%, rgba(216, 189, 136, 0.08), transparent 22rem), #0c2118; color: var(--text-1); } #virtual-tour .section-title, #virtual-tour .section-lead { color: var(--text-1); } .vt-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .vt-header-text { flex: 1; min-width: 0; } .vt-header-text .section-title { margin-bottom: 0; } .vt-header-btns { display: flex; gap: 12px; flex-shrink: 0; padding-bottom: 4px; } .vt-tour-module { margin-top: 48px; } .vt-tabs { display: flex; gap: 6px; border-bottom: 1px solid rgba(201,169,110,0.18); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .vt-tabs::-webkit-scrollbar { display: none; } .vt-tab { flex-shrink: 0; background: transparent; border: none; border-bottom: 2px solid transparent; padding: 14px 22px; margin-bottom: -1px; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); cursor: default; transition: color var(--transition), background var(--transition), border-color var(--transition); } .vt-tab.active { color: var(--gold); border-bottom-color: var(--gold); } .vt-frame-wrap { position: relative; overflow: hidden; min-height: 620px; margin-top: 28px; background: rgba(255, 250, 241, 0.06); border: 1px solid rgba(201, 169, 110, 0.42); border-radius: 0; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.26); } .vt-frame-top { position: absolute; z-index: 2; top: 16px; left: 16px; right: 16px; display: flex; justify-content: space-between; gap: 12px; pointer-events: none; } .vt-frame-top span { display: inline-flex; align-items: center; min-height: 30px; padding: 7px 12px; background: rgba(8, 10, 8, 0.72); border: 1px solid rgba(201, 169, 110, 0.24); color: rgba(255, 248, 235, 0.88); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; line-height: 1.2; text-transform: uppercase; backdrop-filter: blur(10px); } .vt-frame { width: 100%; height: 100%; min-height: 620px; display: block; border: 0; } .vt-placeholder { min-height: 620px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 72px 28px; text-align: center; background: linear-gradient(180deg, rgba(12, 33, 24, 0.24), rgba(12, 33, 24, 0.88)), url("hero-cover.webp") center / cover no-repeat; } .vt-placeholder::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(12, 33, 24, 0.62), rgba(12, 33, 24, 0.24)); pointer-events: none; } .vt-placeholder > * { position: relative; z-index: 1; } .vt-placeholder-title { max-width: 560px; color: #fff8eb; font-family: var(--font-display); font-size: clamp(34px, 4.5vw, 58px); line-height: 0.98; } .vt-placeholder-text { max-width: 520px; color: rgba(246, 239, 227, 0.76); font-size: 14px; line-height: 1.8; } .vt-caption { margin-top: 14px; color: var(--text-3); font-size: 13px; line-height: 1.7; text-align: center; } @media (max-width: 1024px) { .vt-header { flex-direction: column; align-items: flex-start; } .vt-header-btns { flex-wrap: wrap; } .vt-frame-wrap, .vt-frame, .vt-placeholder { min-height: 480px; } } @media (max-width: 640px) { .vt-frame-wrap, .vt-frame, .vt-placeholder { min-height: 430px; } .vt-tab { padding: 12px 16px; font-size: 10px; } .vt-frame-top { top: 12px; left: 12px; right: 12px; } .vt-frame-top span { min-height: 28px; padding: 6px 9px; font-size: 9px; } .vt-caption { font-size: 13px; text-align: left; } }