/* =================================== HOMEPAGE STYLES - Modern MLS Property Website Prefix: hp- (homepage) =================================== */ /* Container & Main Layout */ .hp-homepage-main { min-height: 100vh; } .hp-homepage-container { max-width: 1400px; margin: 0 auto; } /* Force Light Mode */ .hp-homepage-main, .hp-homepage-container { color: #333 !important; } /* =================================== HERO SECTION WITH SEARCH =================================== */ .hp-hero-section { position: relative; min-height: 540px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #2c5aa0 0%, #1e3d72 100%); color: white; overflow: hidden; } .hp-hero-background { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } .hp-hero-bg-image { width: 100%; height: 100%; object-fit: cover; opacity: 0.3; } .hp-hero-content { position: relative; z-index: 2; text-align: center; max-width: 800px; padding: 0; } .hp-hero-title { font-size: 3.5rem; font-weight: 800; line-height: 1.2; margin: 0 0 20px; text-shadow: 2px 2px 4px rgb(0 0 0 / 30%); } .hp-hero-subtitle { font-size: 1.3rem; font-weight: 400; line-height: 1.6; margin: 0 0 40px; opacity: 0.95; text-shadow: 1px 1px 2px rgb(0 0 0 / 20%); } .hp-search-container { max-width: 600px; margin: 0 auto; } /* =================================== HERO BIO SECTION =================================== */ .hp-hero-bio { margin-top: 10px; } .hp-hero-bio p, .hp-hero-specialities { font-size: 1.125rem; line-height: 1.9; } /* =================================== HERO CTA BUTTONS - RESPONSIVE (Data Attribute Controlled) =================================== */ /* REUSABLE PATTERN: Uses centralized device detection (device-detection.js) * Data attributes set on element control visibility * This ensures reliable device detection across all browsers and devices */ /* Desktop: Show "Contact me" (email), hide "Call me" */ html[data-device="desktop"] .hp-hero-contact-desktop, html[data-device="desktop"] .hp-sticky-contact-desktop { display: inline-block !important; } html[data-device="desktop"] .hp-hero-contact-mobile, html[data-device="desktop"] .hp-sticky-contact-mobile { display: none !important; } /* Mobile: Show "Call me" (tel), hide "Contact me" */ html[data-device="mobile"] .hp-hero-contact-desktop, html[data-device="mobile"] .hp-sticky-contact-desktop { display: none !important; } html[data-device="mobile"] .hp-hero-contact-mobile, html[data-device="mobile"] .hp-sticky-contact-mobile { display: inline-block !important; } /* Fallback: If data attributes not set yet (before JS loads), use media query */ @media (width <= 480px) { html:not([data-device]) .hp-hero-contact-desktop, html:not([data-device]) .hp-sticky-contact-desktop { display: none !important; } html:not([data-device]) .hp-hero-contact-mobile, html:not([data-device]) .hp-sticky-contact-mobile { display: inline-block !important; } } /* Default for desktop when data attributes not set */ html:not([data-device]) .hp-hero-contact-desktop, html:not([data-device]) .hp-sticky-contact-desktop { display: inline-block !important; } html:not([data-device]) .hp-hero-contact-mobile, html:not([data-device]) .hp-sticky-contact-mobile { display: none !important; } /* =================================== SECTION HEADERS - REUSABLE =================================== */ .hp-section-header { text-align: center; margin-bottom: 50px; padding: 0 20px; } .hp-section-title { font-size: 2.5rem; font-weight: 700; color: rgb(52 152 219); margin: 0 0 15px; line-height: 1.3; text-align: center; } .hp-section-subtitle { font-size: 1.1rem; color: #6c757d; line-height: 1.6; max-width: 600px; margin: 0 auto; text-align: center; } /* All section h2 headings */ .property-section h2, .hp-market-stats-section h2, .hp-testimonials-section h2, .hp-locations-section h2 { font-size: 2.5rem; font-weight: 700; color: rgb(52 152 219); margin: 0 0 15px; line-height: 1.3; text-align: center; } /* =================================== FEATURED CONDOS SECTION =================================== */ .hp-featured-condos-section { padding: 80px 0; background: #fff; } .hp-condos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; max-width: 1200px; margin: 0 auto; padding: 0 20px; } .hp-condo-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 20px rgb(0 0 0 / 8%); transition: all 0.3s ease; border: 1px solid #f1f3f4; } .hp-condo-card:hover { transform: translateY(-5px); box-shadow: 0 8px 30px rgb(0 0 0 / 12%); } .hp-condo-image { position: relative; height: 200px; overflow: hidden; } .hp-condo-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .hp-condo-card:hover .hp-condo-img { transform: scale(1.05); } .hp-condo-placeholder { height: 100%; background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--color-gray-text); } .hp-placeholder-icon { font-size: 3rem; margin-bottom: 10px; opacity: 0.7; } .hp-placeholder-text { font-size: 0.9rem; font-weight: 500; } .hp-condo-content { padding: 25px; } .hp-condo-title { margin: 0 0 15px; font-size: 1.2rem; font-weight: 600; line-height: 1.4; } .hp-condo-title a { color: #1a1a1a; text-decoration: none; transition: color 0.2s ease; } .hp-condo-title a:hover { color: #2c5aa0; } .hp-condo-location { display: flex; align-items: center; gap: 8px; margin-bottom: 15px; font-size: 0.9rem; color: #6c757d; } .hp-location-icon { font-size: 1rem; } .hp-condo-features { font-size: 0.85rem; color: #2c5aa0; font-weight: 500; } /* =================================== ACTIVE PROPERTIES SECTION =================================== */ .hp-active-properties-section { padding: 80px 0; background: #f8f9fa; } .hp-properties-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 30px; max-width: 1200px; margin: 0 auto 50px; padding: 0 20px; } .hp-no-properties { text-align: center; padding: 40px 20px; color: #6c757d; font-size: 1.1rem; grid-column: 1 / -1; } .hp-section-cta { text-align: center; margin-top: 40px; } .hp-view-all-btn { display: inline-block; padding: 15px 30px; background: #2c5aa0; color: white; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 1rem; transition: all 0.3s ease; } .hp-view-all-btn:hover { background: #1e3d72; text-decoration: none; color: white; transform: translateY(-2px); box-shadow: 0 4px 15px rgb(44 90 160 / 30%); } /* =================================== MARKET STATISTICS SECTION =================================== */ .hp-market-stats-section { padding: 80px 0; background: #fff; } .hp-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; max-width: 1000px; margin: 0 auto; padding: 0 20px; } .hp-stat-card { text-align: center; padding: 30px 20px; background: #f8f9fa; border-radius: 12px; border: 2px solid #e9ecef; transition: all 0.3s ease; } .hp-stat-card:hover { border-color: #2c5aa0; transform: translateY(-3px); box-shadow: 0 6px 20px rgb(44 90 160 / 10%); } .hp-stat-number { font-size: 3rem; font-weight: 800; color: #2c5aa0; margin-bottom: 10px; line-height: 1; } .hp-stat-label { font-size: 1rem; color: #6c757d; font-weight: 500; } /* =================================== TESTIMONIALS SECTION =================================== */ .hp-testimonials-section { padding: 80px 0; } .hp-testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; max-width: 1200px; margin: 0 auto; padding: 0 20px; } .hp-testimonial-card { background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 4px 20px rgb(0 0 0 / 6%); border: 1px solid #f1f3f4; position: relative; } .hp-testimonial-content { margin-bottom: 20px; } .hp-testimonial-quote { font-size: 1.1rem; line-height: 1.7; color: #333; font-style: italic; margin-bottom: 20px; } .hp-testimonial-quote::before { content: '"'; font-size: 4rem; color: #2c5aa0; position: absolute; top: -10px; left: 20px; opacity: 0.3; font-family: serif; } .hp-author-info { margin-top: 15px; } .hp-author-name { font-size: 1rem; font-weight: 600; color: #1a1a1a; margin: 0 0 5px; } .hp-author-property { font-size: 0.85rem; color: #6c757d; font-style: normal; } .hp-testimonial-rating { display: flex; justify-content: flex-end; } .hp-stars { color: #ffc107; font-size: 1.1rem; } /* =================================== LOCATIONS SECTION =================================== */ .hp-locations-section { padding: 80px 0; background: #fff; } .hp-locations-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 25px; max-width: 1200px; margin: 0 auto; padding: 0 20px; } .hp-location-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 3px 15px rgb(0 0 0 / 6%); transition: all 0.3s ease; border: 1px solid #f1f3f4; } .hp-location-card:hover { transform: translateY(-3px); box-shadow: 0 6px 25px rgb(0 0 0 / 10%); } .hp-location-image { height: 150px; overflow: hidden; } .hp-location-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .hp-location-card:hover .hp-location-image img { transform: scale(1.05); } .hp-location-placeholder { height: 100%; background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%); display: flex; align-items: center; justify-content: center; font-size: 3rem; opacity: 0.7; } .hp-location-content { padding: 20px; } .hp-location-name { margin: 0 0 8px; font-size: 1.1rem; font-weight: 600; } .hp-location-name a { color: #1a1a1a; text-decoration: none; transition: color 0.2s ease; } .hp-location-name a:hover { color: #2c5aa0; } .hp-location-count { margin: 0; font-size: 0.85rem; color: #6c757d; } /* =================================== STICKY AGENT CTA =================================== */ .hp-sticky-agent-cta { position: fixed; bottom: 20px; right: 20px; background: #fff; border-radius: 12px; box-shadow: 0 8px 30px rgb(0 0 0 / 15%); border: 2px solid #2c5aa0; z-index: 1000; max-width: 350px; transform: translateY(100px); opacity: 0; transition: all 0.3s ease; } .hp-sticky-agent-cta.show { transform: translateY(0); opacity: 1; } .hp-sticky-agent-content { padding: 20px; position: relative; } .hp-agent-info { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; } .hp-agent-avatar { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; flex-shrink: 0; } .hp-agent-img { width: 100%; height: 100%; object-fit: cover; } .hp-agent-placeholder { width: 100%; height: 100%; background: #e9ecef; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #6c757d; } .hp-agent-details { flex: 1; } .hp-agent-name { margin: 0 0 5px; font-size: 1rem; font-weight: 600; color: #1a1a1a; } .hp-agent-title { font-size: 0.85rem; color: #6c757d; } .hp-agent-actions { display: flex; gap: 10px; } .hp-agent-phone-btn, .hp-agent-email-btn { flex: 1; padding: 10px 15px; border-radius: 6px; text-decoration: none; font-size: 0.85rem; font-weight: 500; text-align: center; transition: all 0.2s ease; } .hp-agent-phone-btn { background: #2c5aa0; color: white; } .hp-agent-phone-btn:hover { background: #1e3d72; color: white; text-decoration: none; } .hp-agent-email-btn { background: #28a745; color: white; } .hp-agent-email-btn:hover { background: #1e7e34; color: white; text-decoration: none; } .hp-sticky-close { position: absolute; top: 10px; right: 15px; width: 20px; height: 20px; background: #6c757d; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; transition: background 0.2s ease; } .hp-sticky-close:hover { background: #495057; } /* =================================== RESPONSIVE DESIGN =================================== */ @media (width <= 1024px) { .hp-hero-title { font-size: 2.8rem; } .hp-section-title { font-size: 2.2rem; } .hp-condos-grid, .hp-properties-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 25px; } .hp-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 25px; } } @media (width <= 768px) { .hp-hero-section { min-height: 500px; } .hp-hero-title { font-size: 2.2rem; } .hp-hero-subtitle { font-size: 1.1rem; } .hp-section-title { font-size: 1.9rem; } .hp-section-subtitle { font-size: 1rem; } .hp-featured-condos-section, .hp-active-properties-section, .hp-market-stats-section, .hp-testimonials-section, .hp-locations-section { padding: 60px 0; } .hp-condos-grid, .hp-properties-grid, .hp-testimonials-grid, .hp-locations-grid { grid-template-columns: 1fr; gap: 20px; padding: 0 15px; } .hp-stats-grid { grid-template-columns: 1fr; gap: 20px; } .hp-stat-number { font-size: 2.5rem; } .hp-sticky-agent-cta { bottom: 15px; right: 15px; left: 15px; max-width: none; } .hp-agent-actions { flex-direction: column; } } @media (width <= 480px) { .hp-hero-title { font-size: 1.8rem; } .hp-hero-subtitle { font-size: 1rem; } .hp-section-title { font-size: 1.6rem; } .hp-section-header { margin-bottom: 40px; } .hp-condo-content, .hp-testimonial-card { padding: 20px; } .hp-sticky-agent-content { padding: 15px; } } /* =================================== ACCESSIBILITY IMPROVEMENTS =================================== */ .hp-condo-title a:focus, .hp-location-name a:focus, .hp-view-all-btn:focus, .hp-agent-phone-btn:focus, .hp-agent-email-btn:focus { outline: 2px solid #2c5aa0; outline-offset: 2px; } /* =================================== PRINT STYLES =================================== */ @media print { .hp-sticky-agent-cta { display: none; } .hp-hero-section { background: #fff; color: #333; min-height: auto; padding: 40px 0; } .hp-hero-background { display: none; } } /* =================================== REDUCED MOTION =================================== */ @media (prefers-reduced-motion: reduce) { .hp-condo-card, .hp-stat-card, .hp-location-card, .hp-view-all-btn, .hp-sticky-agent-cta { transition: none; } .hp-condo-card:hover, .hp-stat-card:hover, .hp-location-card:hover { transform: none; } .hp-condo-img, .hp-location-image img { transition: none; } .hp-condo-card:hover .hp-condo-img, .hp-location-card:hover .hp-location-image img { transform: none; } }