/* Google Fonts are loaded asynchronously from each HTML page (see ). */ /* CSS Variables — edit colours here (site-wide) */ :root { /* Palette: brand blue #00B4C5 · light blue #B3E8EE · sand #FFFADD · orange #FFCC70 */ --color-ocean: #00B4C5; --color-turquoise: #B3E8EE; --color-sand: #FFFADD; --color-orange: #FFCC70; --ocean-rgb: 0, 180, 197; --turquoise-rgb: 179, 232, 238; --primary-bg: #FFFFFF; --accent-bg: var(--color-sand); --primary-text: #1a1a1a; --secondary-text: #4a4a4a; --cta-navy: var(--color-ocean); --cta-gold: var(--color-orange); --border-color: rgba(0, 0, 0, 0.1); --header-height: 90px; --hero-overlay: rgba(var(--turquoise-rgb), 0.48); /* Glassmorphism */ --glass-bg: rgba(255, 255, 255, 0.75); --glass-border: rgba(255, 255, 255, 0.3); --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1); /* Header: frosted bar when scrolled (white + blur) */ --header-glass-bg: rgba(255, 255, 255, 0.82); --header-glass-border: rgba(var(--ocean-rgb), 0.12); --header-glass-shadow: 0 8px 32px rgba(var(--ocean-rgb), 0.1); /* Spacing */ --section-padding: 120px; --container-width: 1300px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Global Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Montserrat', sans-serif; line-height: 1.7; color: var(--primary-text); background-color: var(--primary-bg); overflow-x: hidden; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: 'Playfair Display', serif; font-weight: 400; letter-spacing: -0.01em; } p { letter-spacing: 0.01em; } .subtitle { font-family: 'Montserrat', sans-serif; text-transform: uppercase; letter-spacing: 4px; font-size: 0.75rem; font-weight: 600; color: var(--cta-gold); display: block; margin-bottom: 15px; } a { text-decoration: none; color: inherit; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); } ul { list-style: none; } img { max-width: 100%; display: block; } .container { max-width: var(--container-width); margin: 0 auto; padding: 0 40px; } .section { padding: var(--section-padding) 0; } .bg-light { background-color: var(--accent-bg); } .text-center { text-align: center; } .section-title { font-size: 3.5rem; margin-bottom: 60px; line-height: 1.1; } /* Premium Reveal Animation Class */ .reveal { opacity: 0; transform: translateY(40px); transition: all 1s cubic-bezier(0.215, 0.61, 0.355, 1); } .reveal.active { opacity: 1; transform: translateY(0); } /* Text-heavy blocks: always visible (reveal is decorative only) */ .legal-content.reveal, .legal-content.reveal.active { opacity: 1; transform: none; } /* Buttons */ .btn { display: inline-block; padding: 18px 40px; background-color: var(--cta-navy); color: white; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; font-size: 0.75rem; border: none; cursor: pointer; position: relative; overflow: hidden; z-index: 1; } .btn::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 0; background-color: var(--cta-gold); transition: all 0.3s ease; z-index: -1; } .btn:hover::after { height: 100%; } .btn-outline { background-color: transparent; border: 1px solid var(--cta-navy); color: var(--cta-navy); } .btn-outline:hover { color: white; } .btn-white-outline { background-color: transparent; border: 1px solid white; color: white; } .btn-white-outline:hover { background-color: white; color: var(--cta-navy); } .btn-gold { background-color: var(--cta-gold); color: var(--color-ocean); } /* Proximity Ribbon */ .proximity-ribbon { background: var(--cta-navy); color: white; padding: 30px 0; border-bottom: 4px solid var(--color-sand); } .proximity-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; } .proximity-item { display: flex; flex-direction: column; align-items: center; gap: 10px; } .proximity-item i { font-size: 1.8rem; color: var(--color-sand); } .proximity-item span { font-size: 0.85rem; letter-spacing: 0.06em; font-weight: 500; line-height: 1.35; text-align: center; } /* Enquire Section (Unit Pages) */ .enquire-section { background: var(--accent-bg); padding: 100px 0; text-align: center; border-top: 1px solid var(--border-color); } .enquire-content { max-width: 700px; margin: 0 auto; } .enquire-content h2 { font-size: 3rem; margin-bottom: 20px; color: var(--cta-navy); } .enquire-content p { font-size: 1.1rem; color: var(--secondary-text); margin-bottom: 40px; } /* Header & Nav */ #header-root { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); height: var(--header-height); display: flex; align-items: center; background: var(--primary-bg); border-bottom: 1px solid var(--border-color); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04); } #header-root.scrolled { height: 75px; background: var(--header-glass-bg); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--header-glass-border); box-shadow: var(--header-glass-shadow); } nav { display: flex; justify-content: space-between; align-items: center; width: 100%; } .logo .logo-wordmark { display: inline-flex; flex-direction: column; align-items: flex-start; text-decoration: none; color: var(--cta-navy); line-height: 1.1; } .logo .logo-word { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.45rem, 3.5vw, 1.85rem); font-weight: 700; letter-spacing: 0.02em; } .logo .logo-trail { font-family: 'Montserrat', sans-serif; font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.32em; color: var(--cta-gold); margin-top: 6px; } #header-root.scrolled .logo .logo-word { color: var(--cta-navy); } .logo a { display: inline-flex; align-items: center; line-height: 0; text-decoration: none; } .logo a img { height: 52px; width: auto; max-width: min(260px, 55vw); display: block; object-fit: contain; } #header-root.scrolled .logo a img { height: 46px; } .logo-wordmark--footer .logo-word { color: #fff; } .logo-wordmark--footer .logo-trail { color: var(--cta-gold); } .footer-brand .logo-wordmark { margin-bottom: 16px; } .footer-logo-link { display: inline-block; margin-bottom: 20px; line-height: 0; text-decoration: none; } .footer-logo { height: 56px; width: auto; max-width: min(280px, 100%); display: block; object-fit: contain; } #footer-root .footer-logo { filter: none; opacity: 1; } .nav-links { display: flex; align-items: center; } .nav-links li { margin-left: 40px; position: relative; } .nav-links a { text-transform: uppercase; font-size: 0.75rem; font-weight: 600; letter-spacing: 2px; color: var(--primary-text); padding: 10px 0; } .nav-links a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background-color: var(--cta-gold); transition: width 0.3s ease; } .nav-links a:hover::after { width: 100%; } /* Override .nav-links a padding (higher specificity than .btn alone) */ .nav-links a.btn { padding: 16px 44px; color: #fff; } .nav-links a.btn::after { display: none; } #header-root.scrolled .nav-links a.btn { color: white; } /* Hero Section */ .hero { height: 100vh; /* Fallback when no background-image is set on the section (e.g. index uses optimized WebP in HTML). */ background-image: linear-gradient(165deg, var(--color-ocean) 0%, #009bab 48%, var(--color-turquoise) 100%); background-size: cover; background-position: center; display: flex; align-items: center; position: relative; color: white; overflow: hidden; } .hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 60%); pointer-events: none; z-index: 1; } /* Home hero: stack video + overlay + text in one grid cell (flex was splitting 50/50) */ .hero--home { display: grid; align-items: center; } .hero--home .hero__media, .hero--home > .container { grid-area: 1 / 1; } .hero--home .hero__media { z-index: 0; overflow: hidden; min-height: 100%; } .hero--home .hero__media video { display: block; width: 100%; height: 100%; min-height: 100vh; object-fit: cover; max-width: none; } .hero--home > .container { position: relative; z-index: 2; width: 100%; } @media (min-width: 1025px) { .hero--home > .container { margin-left: 0; margin-right: auto; padding-left: clamp(40px, 5vw, 80px); } } .hero--home .hero-content :is(.subtitle, h1, p, .minimum-stay, .btn) { text-shadow: none; } .hero-overlay { position: absolute; inset: 0; z-index: 1; background: var(--hero-overlay); pointer-events: none; } .hero > .container { position: relative; z-index: 2; width: 100%; } .hero-content { position: relative; z-index: 1; max-width: 900px; color: #fff; } .hero-content h1, .hero-content p { color: #fff; } .hero h1 { font-size: 5.5rem; margin-bottom: 25px; line-height: 1; } .hero p { font-size: 1.1rem; margin-bottom: 45px; font-weight: 300; max-width: 650px; letter-spacing: 0.05em; } .hero .subtitle, .hero-content .subtitle, .unit-hero .subtitle { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 2px 12px rgba(0, 0, 0, 0.35); } .hero-content h1 { text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } .hero-content p { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); } /* Editorial Layouts - Grid */ .experience-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 80px; align-items: center; } .experience-content h2 { font-size: 3.5rem; margin-bottom: 30px; } .experience-content > h2:first-child { margin-top: 0; } /* Contact page */ .contact-page__grid { align-items: flex-start; } .contact-page__intro { padding-top: 0; margin-top: 0; } .contact-page__intro h2 { margin-top: 0; padding-top: 0; } .contact-details { margin-top: 40px; border-left: 3px solid var(--color-ocean); padding-left: 16px; } .contact-details__item { margin-bottom: 20px; } .contact-details__item:last-child { margin-bottom: 0; } .contact-details h4 { font-family: 'Montserrat', sans-serif; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.1em; color: var(--color-ocean); margin: 0 0 6px; font-weight: 600; } .contact-details p { margin: 0; line-height: 1.6; } .contact-details a { color: inherit; text-decoration: none; } .contact-details a:hover { color: var(--color-ocean); } .contact-page__directions { display: inline-block; margin-top: 12px; padding: 12px 24px; background: var(--color-ocean); color: #fff; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none; transition: background 0.2s ease; } .contact-page__directions:hover { background: #009aaa; color: #fff; } .contact-page .contact-form { display: grid; grid-template-columns: 1fr; gap: 24px; } .contact-page .form-group { display: flex; flex-direction: column; gap: 8px; } .contact-page .form-group label { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; color: var(--color-ocean); font-weight: 600; } .contact-page .form-group input, .contact-page .form-group textarea { width: 100%; border: none; border-bottom: 1px solid #D0C8BC; border-radius: 0; background: transparent; padding: 12px 0; font-size: 0.95rem; color: #2C2C2C; font-family: inherit; outline: none; box-shadow: none; -webkit-appearance: none; appearance: none; } .contact-page .form-group input:focus, .contact-page .form-group textarea:focus { border-bottom-color: var(--color-ocean); } .contact-page .form-group input::placeholder, .contact-page .form-group textarea::placeholder { color: #A09890; opacity: 1; } .contact-page .form-group textarea { min-height: 150px; resize: vertical; } .contact-page__submit { width: 100%; margin-top: 8px; background: var(--color-ocean); color: #fff; border: none; border-radius: 0; padding: 16px; font-family: inherit; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; cursor: pointer; transition: background 0.2s ease; } .contact-page__submit:hover { background: #009aaa; } .text-center > h2.section-title:first-child { margin-top: 0; } .experience-images { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .exp-img-large { grid-column: span 2; height: 400px; overflow: hidden; } .exp-img-small { height: 250px; overflow: hidden; } .exp-img-large picture, .exp-img-small picture { display: block; width: 100%; height: 100%; } .exp-img-large img, .exp-img-small img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1); } .exp-img-large:hover img, .exp-img-small:hover img { transform: scale(1.05); } /* Featured apartments */ .apartments-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; } .apartment-card { position: relative; height: 600px; overflow: hidden; color: white; display: flex; align-items: flex-end; padding: 60px; } .apartment-card > picture { position: absolute; inset: 0; z-index: -1; } .apartment-card img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform 1.5s ease; } .apartment-card:hover img { transform: scale(1.1); } .apartment-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.7)); z-index: -1; } .apartment-info h3 { font-size: 2.5rem; margin-bottom: 15px; } /* Luxury Amenities Grid */ .premium-amenities { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; } .amenity-card { background: white; padding: 50px; text-align: center; border: 1px solid var(--border-color); transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .amenity-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.05); border-color: var(--cta-gold); } .amenity-card i { font-size: 2.5rem; color: var(--cta-navy); margin-bottom: 30px; } /* Glassmorphism Cards */ .glass-card { background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); padding: 40px; } .map-embed-card { padding: 0; overflow: hidden; } .map-embed-card iframe { display: block; width: 100%; height: min(480px, 55vh); min-height: 320px; border: 0; } .map-embed-footer { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.75rem 1.5rem; margin-top: 1.25rem; color: var(--secondary-text); font-size: 0.95rem; } .map-embed-footer .btn { text-decoration: none; } .hero--compact { height: 50vh; min-height: 300px; max-height: 420px; } .hero--terms { padding-top: 15vh; box-sizing: border-box; } .hero--terms .hero-content { padding-top: 0; } .legal-content { max-width: 900px; margin: 0 auto; padding: 40px 48px; } .legal-content p { margin-bottom: 1rem; line-height: 1.8; color: var(--secondary-text); font-size: 0.95rem; } .legal-content h3 { font-family: 'Montserrat', sans-serif; font-size: 1rem; text-transform: uppercase; letter-spacing: 2px; color: var(--cta-navy); margin: 2.5rem 0 1rem; } .legal-content h3:first-of-type { margin-top: 1rem; } .legal-content strong { color: var(--cta-navy); font-weight: 600; } .legal-content a { color: var(--cta-navy); font-weight: 600; } .legal-content a:hover { color: var(--cta-gold); } .legal-content ul { margin: 0 0 1rem 1.25rem; padding: 0; color: var(--secondary-text); line-height: 1.75; font-size: 0.95rem; } .legal-content ul li { margin-bottom: 0.5rem; } @media (max-width: 768px) { .legal-content { padding: 28px 24px; } } /* Testimonials Editorial */ .testimonials-editorial { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; } .testimonial-item { display: flex; flex-direction: column; } .testimonial-item i { color: var(--cta-gold); font-size: 1.5rem; margin-bottom: 25px; } .testimonial-text { font-family: 'Playfair Display', serif; font-size: 1.2rem; line-height: 1.6; margin-bottom: 30px; flex-grow: 1; } .testimonial-author { font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; } /* Mega Menu logic (Basic Desktop) */ .has-dropdown:hover .mega-menu { opacity: 1; visibility: visible; transform: translateY(0); } .mega-menu { position: absolute; top: 100%; left: -50px; width: 250px; background: white; padding: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.3s ease; } .mega-menu a { color: var(--primary-text) !important; display: block; padding: 10px 0; font-size: 0.7rem; border-bottom: 1px solid #eee; } .mega-menu a:last-child { border-bottom: none; } /* Unit Template Styles */ .unit-hero { height: 85vh; position: relative; display: flex; align-items: center; color: white; background-size: cover; background-position: center; } .unit-hero::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(var(--ocean-rgb), 0.72), transparent); z-index: 1; } .unit-hero .container { position: relative; z-index: 2; } .unit-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin: 60px 0; padding: 40px 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); } .stat-item { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; } .stat-item i { color: var(--cta-gold); font-size: 1.5rem; margin-bottom: 5px; } .stat-item span { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; } .floor-plan-placeholder { width: 100%; height: 600px; background: #fdfdfd; border: 1px solid var(--border-color); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--secondary-text); margin-top: 50px; box-shadow: var(--glass-shadow); transition: all 0.5s ease; } .floor-plan-placeholder:hover { box-shadow: 0 15px 45px rgba(0,0,0,0.1); } @media (max-width: 768px) { .unit-stats { grid-template-columns: repeat(2, 1fr); } } /* Footer Implementation */ #footer-root { background-color: #ffffff; color: var(--primary-text); padding: 100px 0 40px; font-size: 0.9rem; border-top: 1px solid var(--border-color); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1.3fr 0.9fr 1.2fr; gap: 48px; margin-bottom: 80px; } #footer-root .min-stay-footer { max-width: 300px; line-height: 1.8; color: var(--primary-text); } #footer-root .footer-contact h4, #footer-root .footer-social h4, #footer-root .footer-newsletter h4 { font-family: 'Montserrat', sans-serif; text-transform: uppercase; letter-spacing: 3px; font-size: 0.8rem; font-weight: 700; color: var(--cta-navy); margin-bottom: 30px; } #footer-root .footer-contact p { margin-bottom: 15px; display: flex; align-items: flex-start; gap: 15px; color: var(--primary-text); } #footer-root .footer-contact a { color: var(--primary-text); text-decoration: none; } #footer-root .footer-contact a:hover { color: var(--cta-navy); } #footer-root .footer-contact i { color: var(--cta-navy); margin-top: 5px; } #footer-root .social-icons { display: flex; gap: 20px; } #footer-root .social-icons a { width: 45px; height: 45px; border: 1px solid rgba(var(--ocean-rgb), 0.35); display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--cta-navy); transition: all 0.4s ease; } #footer-root .social-icons a:hover { background-color: var(--cta-navy); border-color: var(--cta-navy); color: #fff; transform: translateY(-5px); } #footer-root .footer-newsletter-intro, #footer-root .footer-newsletter-note, #footer-root .newsletter-thanks, .home-newsletter .newsletter-thanks { color: var(--primary-text); line-height: 1.65; font-size: 0.88rem; margin-bottom: 16px; } .home-newsletter .newsletter-thanks { margin-top: 24px; font-size: 0.95rem; } #footer-root .footer-newsletter-form { display: flex; flex-direction: column; gap: 12px; } #footer-root .footer-newsletter-form input[type="email"] { padding: 12px 14px; border: 1px solid var(--border-color); background: #fff; color: var(--primary-text); font-family: inherit; font-size: 0.9rem; } #footer-root .footer-newsletter-form input::placeholder { color: var(--secondary-text); } #footer-root .footer-bottom { border-top: 1px solid var(--border-color); padding-top: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; font-size: 0.75rem; letter-spacing: 1px; color: var(--primary-text); text-transform: uppercase; } #footer-root .footer-bottom-links a { color: var(--cta-navy); text-decoration: none; border-bottom: 1px solid rgba(var(--ocean-rgb), 0.35); } #footer-root .footer-bottom-links a:hover { color: var(--cta-navy); border-bottom-color: var(--cta-navy); opacity: 0.85; } /* Responsive Footer */ @media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } } @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; gap: 50px; text-align: center; } .min-stay-footer { margin: 0 auto; } .footer-contact p { justify-content: center; } .social-icons { justify-content: center; } } /* Burger menu */ .burger { display: none; cursor: pointer; z-index: 1001; position: relative; } .burger div { width: 25px; height: 2px; background-color: var(--cta-navy); margin: 6px; transition: all 0.3s ease; } .nav-active { transform: translateX(0%) !important; } @keyframes navLinkFade { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0px); } } .toggle .line1 { transform: rotate(-45deg) translate(-5px, 6px); } .toggle .line2 { opacity: 0; } .toggle .line3 { transform: rotate(45deg) translate(-5px, -6px); } .toggle .line1, .toggle .line3 { background-color: var(--cta-navy); } /* Apartment page — description, gallery, floor plan */ .unit-description-block { margin-top: 48px; } .unit-custom-description { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border-color); } .unit-description-placeholder { color: var(--secondary-text); font-style: italic; line-height: 1.75; margin: 0; } .unit-floor-plan-section .floor-plan-placeholder { margin-top: 0; } .unit-floor-plan { max-width: 920px; margin: 0 auto; } .unit-floor-plan img { display: block; width: 100%; height: auto; } /* Apartment page — photo gallery (All photos) */ .unit-gallery-section { margin-top: 0; } .unit-gallery { position: relative; } .unit-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; } .unit-gallery-thumb { position: relative; display: block; width: 100%; padding: 0; margin: 0; border: 1px solid var(--border-color); cursor: pointer; overflow: hidden; aspect-ratio: 4 / 3; background: #f0f0f0; transition: border-color 0.25s ease, transform 0.25s ease; } .unit-gallery-thumb:hover, .unit-gallery-thumb:focus-visible { border-color: var(--cta-gold); transform: translateY(-2px); outline: none; } .unit-gallery-thumb picture { display: block; width: 100%; height: 100%; } .unit-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .unit-gallery-lightbox { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 72px 88px 40px; box-sizing: border-box; } .unit-gallery-lightbox[hidden] { display: none !important; } .unit-gallery-lightbox-backdrop { position: absolute; inset: 0; background: rgba(10, 20, 35, 0.94); cursor: pointer; } .unit-gallery-lightbox-inner { position: relative; z-index: 2; width: 100%; max-width: min(92vw, 1200px); max-height: calc(100vh - 112px); display: flex; align-items: center; justify-content: center; pointer-events: none; } .unit-gallery-lightbox-img { max-width: 100%; max-height: calc(100vh - 112px); width: auto; height: auto; object-fit: contain; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); pointer-events: none; } .unit-gallery-lightbox-close, .unit-gallery-lightbox-prev, .unit-gallery-lightbox-next { position: fixed; z-index: 2001; border: none; cursor: pointer; background: #fff; color: #1a1a1a; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35); transition: background 0.2s ease, transform 0.2s ease; pointer-events: auto; } .unit-gallery-lightbox-close:hover, .unit-gallery-lightbox-prev:hover, .unit-gallery-lightbox-next:hover { background: var(--color-sand); transform: scale(1.05); } .unit-gallery-lightbox-close { top: max(20px, env(safe-area-inset-top, 0px)); right: max(20px, env(safe-area-inset-right, 0px)); } .unit-gallery-lightbox-close:hover { transform: scale(1.05); } .unit-gallery-lightbox-prev { left: max(20px, env(safe-area-inset-left, 0px)); top: 50%; transform: translateY(-50%); } .unit-gallery-lightbox-prev:hover { transform: translateY(-50%) scale(1.05); } .unit-gallery-lightbox-next { right: max(20px, env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); } .unit-gallery-lightbox-next:hover { transform: translateY(-50%) scale(1.05); } @media (max-width: 768px) { .unit-gallery-lightbox { padding: 64px 12px 24px; } .unit-gallery-lightbox-inner, .unit-gallery-lightbox-img { max-height: calc(100vh - 88px); } .unit-gallery-lightbox-close, .unit-gallery-lightbox-prev, .unit-gallery-lightbox-next { width: 48px; height: 48px; } .unit-gallery-lightbox-prev { left: max(8px, env(safe-area-inset-left, 0px)); } .unit-gallery-lightbox-next { right: max(8px, env(safe-area-inset-right, 0px)); } .unit-gallery-grid { grid-template-columns: repeat(2, 1fr); } } /* Apartments page: three-column showcase + inventory */ .apartments-intro-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center; margin-bottom: 48px; } .apartments-intro-grid__text { text-align: left; min-width: 0; } .apartments-intro-grid__media { min-width: 0; width: 100%; } .apartments-intro-grid__media picture { display: block; width: 100%; } .apartments-intro-grid__text .section-title { margin-top: 0; text-align: left; } .apartments-intro-grid__text p { max-width: 520px; margin: 16px 0 0; color: var(--secondary-text); line-height: 1.8; } .apartments-intro-grid__text p:last-child { margin-top: 28px; } .apartments-intro-grid__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; } .apartments-intro-grid--image-left .apartments-intro-grid__text { text-align: right; margin-left: auto; } .apartments-intro-grid--image-left .apartments-intro-grid__text .section-title { text-align: right; } .apartments-intro-grid--image-left .apartments-intro-grid__text p { margin-left: auto; margin-right: 0; } .apartments-showcase-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 32px; } .apartments-showcase-two { grid-template-columns: repeat(2, 1fr); max-width: 880px; margin-left: auto; margin-right: auto; } .apartments-showcase-col { background: #fff; border: 1px solid var(--border-color); padding: 28px 24px 32px; } .apartments-showcase-col h3 { font-family: 'Montserrat', sans-serif; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--cta-gold); margin-bottom: 14px; } .apartments-showcase-col .tier-title { font-family: 'Playfair Display', Georgia, serif; font-size: 1.45rem; margin-bottom: 12px; color: var(--cta-navy); } .apartments-showcase-col p { color: var(--secondary-text); line-height: 1.7; font-size: 0.95rem; } .apartments-inventory-filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0 0 28px; } .filter-pill { font-family: 'Montserrat', sans-serif; border: 1px solid var(--border-color); background: #fff; padding: 10px 18px; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; cursor: pointer; border-radius: 999px; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; } .filter-pill:hover, .filter-pill.is-active { border-color: var(--cta-gold); color: var(--cta-navy); } .inventory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; } .inventory-card { position: relative; display: block; text-decoration: none; color: inherit; border: 1px solid var(--border-color); background: #fff; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .inventory-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08); } .inventory-card-media { aspect-ratio: 4 / 3; overflow: hidden; } .inventory-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .inventory-card-tags { position: absolute; top: 10px; left: 10px; display: flex; flex-wrap: wrap; gap: 6px; z-index: 1; max-width: calc(100% - 20px); } .inventory-card-tags span { font-family: 'Montserrat', sans-serif; font-size: 0.58rem; letter-spacing: 0.12em; font-weight: 700; text-transform: uppercase; color: #fff; background: rgba(0, 0, 0, 0.55); padding: 5px 8px; } .inventory-card-body { padding: 12px 14px 16px; } .inventory-card-body h3 { font-size: 1rem; font-weight: 600; color: var(--cta-navy); } .explore-card figure { margin: -40px -40px 20px; height: 200px; overflow: hidden; } .explore-card figure img { width: 100%; height: 100%; object-fit: cover; display: block; } .facilities-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 48px; } .facilities-gallery figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; } .facilities-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; } .faq-list details { border-bottom: 1px solid var(--border-color); padding: 14px 0; } .faq-list summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-right: 4px; } .faq-list summary::-webkit-details-marker, .faq-list summary::marker { display: none; } .faq-list summary::after { content: ''; flex-shrink: 0; width: 10px; height: 10px; margin-top: 2px; border-right: 2px solid var(--cta-gold); border-bottom: 2px solid var(--cta-gold); transform: rotate(45deg); transition: transform 0.25s ease; } .faq-list details[open] summary::after { transform: rotate(-135deg); margin-top: 6px; } .faq-list details p { margin-top: 12px; color: var(--secondary-text); line-height: 1.75; font-size: 0.95rem; } .home-newsletter { background: var(--accent-bg); border-top: 1px solid var(--border-color); } .home-newsletter-inner { max-width: 520px; margin: 0 auto; text-align: center; } .home-newsletter-intro { color: var(--secondary-text); line-height: 1.75; margin-bottom: 0; } .home-newsletter .footer-newsletter-form { max-width: 440px; margin: 24px auto 0; width: 100%; } .home-newsletter .footer-newsletter-form input[type="email"] { width: 100%; padding: 18px 16px; font-size: 0.95rem; line-height: 1.4; min-height: 54px; background: #fff; color: var(--primary-text); border: 1px solid var(--border-color); } .home-newsletter .footer-newsletter-form input::placeholder { color: rgba(0, 0, 0, 0.35); } .home-newsletter .footer-newsletter-form .btn { width: 100%; min-height: 54px; padding: 18px 40px; } @media (max-width: 768px) { .apartments-intro-grid { grid-template-columns: 1fr; gap: 40px; } .apartments-intro-grid__text .section-title, .apartments-intro-grid__text { text-align: left; } .apartments-intro-grid--image-left .apartments-intro-grid__text, .apartments-intro-grid--image-left .apartments-intro-grid__text .section-title { text-align: left; } .apartments-intro-grid--image-left .apartments-intro-grid__text p { margin-left: 0; } .apartments-showcase-three, .apartments-showcase-two { grid-template-columns: 1fr; max-width: none; } .facilities-gallery { grid-template-columns: repeat(2, 1fr); } } /* Responsive Styles */ @media (max-width: 1024px) { .hero h1 { font-size: 4rem; } .experience-grid { grid-template-columns: 1fr; gap: 40px; } .testimonials-editorial { grid-template-columns: 1fr; } } @media (max-width: 768px) { .container { padding: 0 25px; } .hero h1 { font-size: 3rem; } .apartments-grid { grid-template-columns: 1fr; } .section-title { font-size: 2.5rem; } .nav-links { position: fixed; right: 0px; height: 100vh; top: 0; background-color: var(--cta-navy); display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; transform: translateX(100%); transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); z-index: 1000; } .nav-links li { margin: 20px 0; } .nav-links li a { font-size: 1.2rem; color: white !important; } .burger { display: block; } .home-stats-strip p { letter-spacing: 0.08em; font-size: 1rem; } } /* ——— Home page sections ——— */ .home-stats-strip { background: #fff; text-align: center; padding: 52px 40px; } .home-stats-strip p { margin: 0; font-family: 'Montserrat', sans-serif; font-size: clamp(1.05rem, 2.2vw, 1.45rem); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ocean); } .home-lifestyle-banner { position: relative; width: 100%; min-height: min(72vh, 720px); overflow: hidden; display: flex; align-items: flex-end; justify-content: center; } .home-lifestyle-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to top, rgba(var(--ocean-rgb), 0.55) 0%, rgba(var(--ocean-rgb), 0.2) 28%, rgba(var(--ocean-rgb), 0) 48% ); pointer-events: none; z-index: 1; } .home-lifestyle-banner picture, .home-lifestyle-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .home-lifestyle-banner__text { position: relative; z-index: 2; margin: 0; padding: 0 40px 48px; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(2.25rem, calc(5vw + 4px), 3.5rem); font-weight: 400; font-style: italic; color: #fff; text-align: center; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55), 0 4px 18px rgba(0, 0, 0, 0.42), 0 8px 28px rgba(0, 0, 0, 0.28); } .home-apartments { width: 100%; background: #fff; padding: 100px 40px; } .home-apartments__inner { max-width: var(--container-width); margin: 0 auto; } .home-apartments__intro { max-width: 720px; margin: 0 auto 56px; } .home-apartments__label { font-family: 'Montserrat', sans-serif; font-size: 1.2rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-ocean); margin: 0 0 20px; } .home-apartments__title { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.2; font-weight: 400; color: var(--primary-text); margin: 0 0 20px; } .home-apartments__lead { font-size: 1.05rem; line-height: 1.75; color: var(--secondary-text); margin: 0; } .home-apartments__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; align-items: start; } .home-apartments__card { border: none; box-shadow: none; background: transparent; } .home-apartments__card-image { display: block; overflow: hidden; } .home-apartments__card-image img { display: block; width: 100%; height: 520px; object-fit: cover; object-position: center; } .home-apartments__card-body { padding-top: 28px; } .home-apartments__card-body h3 { font-family: 'Playfair Display', Georgia, serif; font-size: 1.75rem; font-weight: 400; margin: 0 0 20px; color: var(--primary-text); } .home-apartments__features { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 10px; } .home-apartments__features li { position: relative; padding-left: 18px; font-size: 0.95rem; line-height: 1.5; color: var(--secondary-text); } .home-apartments__features li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-ocean); transform: translateY(-50%); } .home-story-break { background: #fff; padding: 80px 40px; } .home-story-break__inner { max-width: 800px; margin: 0 auto; text-align: center; } .home-story-break__title { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.85rem, 3.5vw, 2.5rem); line-height: 1.25; font-weight: 400; color: var(--primary-text); margin: 0 0 28px; } .home-story-break__inner p { font-size: 1.05rem; line-height: 1.8; color: var(--secondary-text); margin: 0 0 1.25rem; } .home-story-break__inner p:last-child { margin-bottom: 0; } .btn-explore { background-color: var(--color-ocean); color: #fff; padding: 16px 36px; } .btn-explore:hover { background-color: #009bab; color: #fff; } .btn-explore::after { display: none; } .home-photo-gallery { background: #fff; padding: 0; } .home-photo-gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 400px); gap: 0; width: 100%; } .home-photo-gallery__cell { margin: 0; height: 400px; overflow: hidden; } .home-photo-gallery__trigger { display: block; width: 100%; height: 100%; padding: 0; border: none; background: none; cursor: zoom-in; overflow: hidden; } .home-photo-gallery__trigger picture, .home-photo-gallery__trigger img { display: block; width: 100%; height: 400px; object-fit: cover; transition: transform 0.55s cubic-bezier(0.165, 0.84, 0.44, 1); } .home-photo-gallery__trigger:hover img, .home-photo-gallery__trigger:focus-visible img { transform: scale(1.06); } .home-photo-gallery__trigger:focus-visible { outline: 2px solid var(--color-ocean); outline-offset: -2px; } /* Home — Explore slideshow (index.html only) */ .home-explore-slideshow { width: 100%; max-width: none; margin: 0; padding: 0; background: #000; } .home-explore-slideshow__viewport { position: relative; width: 100%; height: 600px; overflow: hidden; pointer-events: none; } .home-explore-slideshow__track { position: relative; width: 100%; height: 100%; min-height: 100%; } .home-explore-slideshow__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.85s ease, visibility 0.85s ease; z-index: 0; } .home-explore-slideshow__slide.is-active { opacity: 1; visibility: visible; z-index: 1; } .home-explore-slideshow__slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 50%); pointer-events: none; z-index: 1; } .home-explore-slideshow__slide img { display: block; width: 100%; height: 600px; object-fit: cover; object-position: center; } .home-explore-slideshow__caption { position: absolute; left: 0; bottom: 0; z-index: 2; padding: 48px; color: #fff; max-width: min(640px, 90vw); } .home-explore-slideshow__location { font-family: 'Playfair Display', Georgia, serif; font-size: 2.2rem; line-height: 1.15; margin: 0 0 8px; font-weight: 400; } .home-explore-slideshow__desc { font-family: 'Montserrat', sans-serif; font-size: 1rem; font-weight: 300; line-height: 1.55; margin: 0; opacity: 0.85; } @media (prefers-reduced-motion: reduce) { .home-explore-slideshow__slide { transition: none; } } .home-location-strip { background: #fff; } .home-location-strip__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .home-location-strip__text h2 { font-family: 'Playfair Display', Georgia, serif; font-size: 3rem; line-height: 1.2; margin-bottom: 20px; color: var(--primary-text); } .home-location-strip__text p { color: var(--secondary-text); line-height: 1.8; max-width: 420px; } .home-location-strip__text p + p { margin-top: 16px; } .home-location-strip__media { overflow: hidden; } .home-location-strip__media img { width: 100%; height: auto; display: block; object-fit: cover; aspect-ratio: 4 / 3; } .home-explore-slideshow__dots { position: absolute; left: 0; right: 0; bottom: 20px; z-index: 3; display: flex; justify-content: center; align-items: center; gap: 8px; padding: 0 24px; pointer-events: auto; } .home-explore-slideshow__dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.45); cursor: pointer; } .home-explore-slideshow__dot.is-active { background: #fff; } /* Home page — mobile (max 768px) */ @media (max-width: 768px) { .proximity-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .home-lifestyle-banner { min-height: 0; height: 36vh; max-height: 400px; } .home-lifestyle-banner picture, .home-lifestyle-banner img { object-position: center bottom; } .home-lifestyle-banner__text { font-size: clamp(2rem, calc(6vw + 4px), 3rem); padding: 0 24px 32px; } .home-apartments { padding: 60px 24px; } .home-apartments__intro { text-align: center; margin-bottom: 40px; } .home-apartments__title { font-size: 1.8rem; } .home-apartments__cards { grid-template-columns: 1fr; gap: 40px; } .home-apartments__card { width: 100%; } .home-apartments__card-image img { height: 300px; } .home-photo-gallery__grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 200px); } .home-photo-gallery__cell:nth-child(n + 5) { display: none; } .home-photo-gallery__cell { height: 200px; } .home-photo-gallery__trigger img { height: 200px; } .home-story-break { padding: 60px 24px; } .home-story-break__title { font-size: 1.6rem; } .home-story-break__inner p { font-size: 1rem; } .home-explore-slideshow__viewport { height: 400px; } .home-explore-slideshow__slide img { height: 400px; } .home-explore-slideshow__caption { padding: 24px; } .home-explore-slideshow__location { font-size: 1.6rem; } .home-explore-slideshow__desc { font-size: 0.9rem; } .home-location-strip__grid { grid-template-columns: 1fr; gap: 0; } .home-location-strip__text { padding: 40px 24px; order: 2; } .home-location-strip__text h2 { font-size: 1.8rem; max-width: none; } .home-location-strip__text p { max-width: none; } .home-location-strip__media { order: 1; width: 100%; } .home-location-strip__media img { height: 300px; aspect-ratio: auto; } } /* Google Reviews — home */ .home-google-reviews { background: #fff; padding-top: 80px; padding-bottom: 80px; overflow: hidden; } .google-reviews-header { max-width: var(--container-width); margin: 0 auto 40px; padding: 0 40px; } .google-reviews-summary { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 10px 14px; text-align: center; } @media (max-width: 640px) { .google-reviews-summary { flex-wrap: wrap; } .google-reviews-count, .google-reviews-score, .google-reviews-label { font-size: 1.35rem; } } .google-reviews-count, .google-reviews-score, .google-reviews-label { font-family: 'Montserrat', sans-serif; font-size: 1.75rem; font-weight: 700; line-height: 1.2; color: var(--primary-text); } .google-reviews-stars, .google-review-card__stars { display: flex; gap: 3px; color: #fbbc04; font-size: 1.35rem; line-height: 1; } .google-reviews-label { font-weight: 600; letter-spacing: 0.02em; text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; } .google-reviews-label:hover { color: var(--color-ocean); border-bottom-color: var(--color-ocean); } .google-reviews-marquee { width: 100%; overflow: hidden; mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); pointer-events: none; } .google-reviews-track { display: flex; gap: 20px; width: max-content; padding: 8px 0 16px; animation: google-reviews-scroll var(--marquee-duration, 80s) linear infinite; } @keyframes google-reviews-scroll { from { transform: translateX(0); } to { transform: translateX(var(--marquee-distance, -50%)); } } .google-review-card { display: flex; flex-direction: column; flex: 0 0 auto; width: min(340px, 82vw); padding: 24px 26px; background: #fff; border: 1px solid var(--border-color); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06); } .google-review-card__text { font-family: 'Playfair Display', Georgia, serif; font-size: 1.05rem; line-height: 1.6; color: var(--primary-text); margin: 14px 0 16px; } .google-review-card__footer { margin-top: auto; padding-top: 4px; } .google-review-card__author-name { font-family: 'Montserrat', sans-serif; font-size: 0.9rem; font-weight: 600; color: var(--primary-text); letter-spacing: 0.02em; } .google-reviews-fallback { text-align: center; padding: 0 40px; color: var(--secondary-text); } .google-reviews-fallback a { color: var(--color-ocean); font-weight: 600; } @media (prefers-reduced-motion: reduce) { .google-reviews-track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 40px; } .google-reviews-marquee { mask-image: none; -webkit-mask-image: none; } } .home-book-cta { background: var(--color-ocean); color: #fff; text-align: center; padding: 88px 40px; } .home-book-cta h2 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(2rem, 4vw, 2.75rem); margin-bottom: 12px; color: #fff; } .home-book-cta p { margin-bottom: 32px; font-size: 0.95rem; letter-spacing: 0.04em; opacity: 0.95; } .btn-book-cta { background: #fff; color: var(--color-ocean); padding: 18px 48px; } .btn-book-cta:hover { background: var(--color-sand); color: var(--color-ocean); } .btn-book-cta::after { display: none; }