/* ═══════════════════════════════════════════════════════ Annie Liu Williams — Vismar Real Estate Full Agent Website & Property Marketing Hub Design System & Styles ═══════════════════════════════════════════════════════ */ /* ── Google Fonts loaded via in HTML for non-blocking parallel fetch ── */ /* ── Design Tokens ── */ :root { /* Primary Palette */ --primary-900: #134E4A; --primary-800: #115E59; --primary-700: #0F766E; --primary-600: #0D9488; --primary-500: #14B8A6; --primary-400: #2DD4BF; --primary-300: #5EEAD4; --primary-200: #99F6E4; --primary-100: #CCFBF1; --primary-50: #F0FDFA; /* Accent / Gold */ --gold-700: #92400E; --gold-600: #B45309; --gold-500: #D97706; --gold-400: #F59E0B; --gold-300: #FCD34D; --gold-200: #FDE68A; --gold-100: #FEF3C7; /* Neutrals */ --slate-950: #020617; --slate-900: #0F172A; --slate-800: #1E293B; --slate-700: #334155; --slate-600: #475569; --slate-500: #64748B; --slate-400: #94A3B8; --slate-300: #CBD5E1; --slate-200: #E2E8F0; --slate-100: #F1F5F9; --slate-50: #F8FAFC; /* Semantic */ --bg-primary: #FFFFFF; --bg-secondary: var(--primary-50); --bg-dark: var(--slate-900); --text-primary: var(--slate-900); --text-secondary: var(--slate-600); --text-muted: var(--slate-500); --text-on-dark: #FFFFFF; --border-color: var(--slate-200); /* Typography */ --font-display: 'Cinzel', serif; --font-body: 'Josefin Sans', sans-serif; /* Spacing */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --space-4xl: 6rem; /* Radius */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04); --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04); --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.15); --shadow-glow: 0 0 30px rgba(20, 184, 166, 0.15); /* Transitions */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --transition-fast: 150ms var(--ease-out); --transition-base: 250ms var(--ease-out); --transition-slow: 400ms var(--ease-out); } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-body); font-weight: 400; color: var(--text-primary); background: var(--bg-primary); line-height: 1.7; overflow-x: hidden; } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; transition: color var(--transition-fast); } button { cursor: pointer; border: none; background: none; font-family: inherit; } /* ── Layout ── */ .container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--space-xl); } .section { padding: var(--space-4xl) 0; } .section-dark { background: var(--bg-dark); color: var(--text-on-dark); } .section-alt { background: var(--bg-secondary); } /* ── Typography ── */ .heading-xl { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 600; line-height: 1.15; letter-spacing: 0.02em; color: var(--text-primary); } .heading-lg { font-family: var(--font-display); font-size: clamp(1.6rem, 3.5vw, 2.6rem); font-weight: 600; line-height: 1.2; letter-spacing: 0.02em; } .heading-md { font-family: var(--font-display); font-size: clamp(1.2rem, 2.5vw, 1.6rem); font-weight: 500; line-height: 1.3; letter-spacing: 0.01em; } .section-label { font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--primary-600); display: flex; align-items: center; gap: 8px; margin-bottom: var(--space-md); } .section-header { text-align: center; max-width: 680px; margin: 0 auto var(--space-3xl); } .section-header p { color: var(--text-secondary); font-size: 1.05rem; margin-top: var(--space-md); line-height: 1.7; } .highlight { color: var(--primary-600); } .text-gold { color: var(--gold-500); } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; padding: 12px 28px; border-radius: var(--radius-full); transition: all var(--transition-base); cursor: pointer; white-space: nowrap; letter-spacing: 0.02em; } .btn-primary { background: var(--primary-700); color: white; box-shadow: 0 4px 14px rgba(15, 118, 110, 0.3); } .btn-primary:hover { background: var(--primary-800); box-shadow: 0 6px 20px rgba(15, 118, 110, 0.4); transform: translateY(-1px); } .btn-gold { background: linear-gradient(135deg, var(--gold-500), var(--gold-600)); color: white; box-shadow: 0 4px 14px rgba(217, 119, 6, 0.3); } .btn-gold:hover { box-shadow: 0 6px 20px rgba(217, 119, 6, 0.45); transform: translateY(-1px); } .btn-outline { background: transparent; color: var(--primary-700); border: 2px solid var(--primary-300); } .btn-outline:hover { background: var(--primary-50); border-color: var(--primary-500); } .btn-outline-white { background: transparent; color: white; border: 2px solid rgba(255,255,255,0.3); } .btn-outline-white:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.6); } .btn-lg { padding: 16px 36px; font-size: 1.05rem; } .btn-block { width: 100%; } /* ── Navbar ── */ .navbar { position: fixed; top: 48px; left: 0; right: 0; z-index: 100; padding: 16px 0; transition: all var(--transition-base); } .navbar.scrolled { top: 0; background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: var(--shadow-md); padding: 10px 0; } .navbar.scrolled .navbar-links a { color: var(--slate-700); } .navbar.scrolled .navbar-links a:hover { color: var(--primary-700); } .navbar.scrolled .navbar-brand-text { color: var(--slate-900); } .navbar.scrolled .navbar-brand-sub { color: var(--slate-500); } .navbar-inner { display: flex; align-items: center; justify-content: space-between; max-width: 1280px; margin: 0 auto; padding: 0 var(--space-xl); } .navbar-brand { display: flex; align-items: center; gap: 12px; } .navbar-brand-icon { width: 40px; height: 40px; background: var(--primary-700); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: white; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; } .navbar-brand-text { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: white; transition: color var(--transition-fast); } .navbar-brand-sub { font-family: var(--font-body); font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(255,255,255,0.7); transition: color var(--transition-fast); } .navbar-links { display: flex; align-items: center; gap: 32px; } .navbar-links a { font-size: 0.85rem; font-weight: 500; color: rgba(255,255,255,0.85); letter-spacing: 0.03em; transition: color var(--transition-fast); } .navbar-links a:hover { color: white; } .navbar-cta { background: var(--primary-700) !important; color: white !important; padding: 10px 24px; border-radius: var(--radius-full); font-weight: 600 !important; } .navbar-cta:hover { background: var(--primary-800) !important; } .mobile-menu-btn { display: none; color: white; padding: 10px; border-radius: var(--radius-md); border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.05); transition: all var(--transition-fast); position: relative; } .mobile-menu-btn:hover { background: rgba(255, 255, 255, 0.12); } .mobile-menu-btn::after { content: ""; position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-400); box-shadow: 0 0 0 0 rgba(252, 211, 77, 0.6); animation: ringPulse 2.4s ease-out infinite; } .navbar.scrolled .mobile-menu-btn { color: var(--slate-800); border-color: var(--slate-300); background: var(--slate-50); } .navbar-links.open a[href*="recent-sales"] { color: var(--gold-700) !important; font-weight: 600; background: var(--gold-100); border-radius: var(--radius-md); padding: 10px 14px; } /* ── Hero ── */ .hero { position: relative; min-height: 100vh; display: flex; align-items: flex-end; padding-bottom: var(--space-4xl); overflow: hidden; } .hero-bg { position: absolute; inset: 0; z-index: 0; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; } .hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(15, 23, 42, 0.25) 0%, rgba(15, 23, 42, 0.4) 40%, rgba(15, 23, 42, 0.85) 80%, rgba(15, 23, 42, 0.95) 100% ); } .hero-content { position: relative; z-index: 1; color: white; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(20, 184, 166, 0.15); border: 1px solid rgba(20, 184, 166, 0.3); padding: 6px 16px; border-radius: var(--radius-full); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em; color: var(--primary-300); margin-bottom: var(--space-lg); backdrop-filter: blur(10px); } .hero-badge-dot { width: 8px; height: 8px; background: var(--primary-400); border-radius: 50%; animation: pulse-dot 2s infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.3); } } .hero .heading-xl { color: white; margin-bottom: var(--space-lg); } .hero-price { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: var(--gold-300); margin-bottom: var(--space-sm); } .hero-address { font-size: 1.15rem; color: rgba(255,255,255,0.8); margin-bottom: var(--space-xl); font-weight: 300; letter-spacing: 0.03em; } .hero-stats { display: flex; gap: var(--space-2xl); margin-top: var(--space-xl); padding-top: var(--space-xl); border-top: 1px solid rgba(255,255,255,0.15); } .hero-stat { text-align: center; } .hero-stat-value { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: white; } .hero-stat-label { font-size: 0.75rem; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.12em; margin-top: 4px; } .hero-actions { display: flex; gap: var(--space-md); margin-top: var(--space-xl); flex-wrap: wrap; } /* ── Photo Gallery ── */ .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 280px); gap: 8px; border-radius: var(--radius-lg); overflow: hidden; } .gallery-item { position: relative; overflow: hidden; cursor: pointer; } .gallery-item:first-child { grid-column: 1 / 3; grid-row: 1 / 3; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .gallery-item:hover img { transform: scale(1.04); } .gallery-item-overlay { position: absolute; inset: 0; background: rgba(15, 23, 42, 0); display: flex; align-items: center; justify-content: center; transition: background var(--transition-base); } .gallery-item:hover .gallery-item-overlay { background: rgba(15, 23, 42, 0.3); } .gallery-count { position: absolute; bottom: 16px; right: 16px; background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(10px); color: white; padding: 8px 16px; border-radius: var(--radius-full); font-size: 0.85rem; font-weight: 500; display: flex; align-items: center; gap: 6px; } /* ── Property Details ── */ .details-grid { display: grid; grid-template-columns: 1fr 400px; gap: var(--space-3xl); align-items: start; } .detail-badges { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-xl); } .detail-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--primary-50); color: var(--primary-800); padding: 8px 16px; border-radius: var(--radius-full); font-size: 0.85rem; font-weight: 500; } .detail-description { font-size: 1.05rem; color: var(--text-secondary); line-height: 1.8; margin-bottom: var(--space-2xl); } .detail-features-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; margin-bottom: var(--space-lg); } .features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm) var(--space-xl); } .feature-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; font-size: 0.95rem; color: var(--text-secondary); } .feature-check { width: 20px; height: 20px; background: var(--primary-50); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--primary-700); } /* ── Contact Card (Sidebar) ── */ .contact-card { background: white; border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: var(--space-2xl); box-shadow: var(--shadow-lg); position: sticky; top: 100px; } .contact-agent { display: flex; align-items: center; gap: 16px; margin-bottom: var(--space-xl); padding-bottom: var(--space-xl); border-bottom: 1px solid var(--border-color); } .agent-avatar { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-500), var(--primary-700)); display: flex; align-items: center; justify-content: center; color: white; font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; flex-shrink: 0; } .agent-name { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; } .agent-brokerage { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; } .agent-license { font-size: 0.72rem; color: var(--slate-400); margin-top: 2px; } .contact-form .form-group { margin-bottom: var(--space-md); } .contact-form label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.06em; } .contact-form input, .contact-form textarea, .contact-form select { width: 100%; padding: 12px 16px; border: 1.5px solid var(--border-color); border-radius: var(--radius-md); font-family: var(--font-body); font-size: 0.95rem; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); background: var(--slate-50); color: var(--text-primary); } .contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12); background: white; } .contact-form textarea { resize: vertical; min-height: 80px; } .contact-card-price { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; color: var(--primary-800); margin-bottom: var(--space-lg); text-align: center; } .contact-card-address { text-align: center; color: var(--text-secondary); font-size: 0.9rem; margin-bottom: var(--space-lg); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--border-color); } /* ── Neighborhood Section ── */ .neighborhood-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); } .neighborhood-card { background: white; border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: var(--space-xl); text-align: center; transition: all var(--transition-base); } .neighborhood-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--primary-200); } .neighborhood-icon { width: 56px; height: 56px; background: var(--primary-50); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-md); color: var(--primary-700); } .neighborhood-card h4 { font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; margin-bottom: 6px; } .neighborhood-card p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; } /* ── Agent Section ── */ .agent-section { display: grid; grid-template-columns: 350px 1fr; gap: var(--space-3xl); align-items: center; } .agent-photo-wrapper { position: relative; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 3/4; background: linear-gradient(135deg, var(--primary-100), var(--primary-200)); display: flex; align-items: center; justify-content: center; } .agent-photo { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .agent-avatar-img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: center top; flex-shrink: 0; border: 2px solid var(--primary-200); } .agent-info h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 600; margin-bottom: var(--space-sm); } .agent-info .brokerage { color: var(--primary-600); font-weight: 500; font-size: 1rem; margin-bottom: var(--space-xl); } .agent-info .bio { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.8; margin-bottom: var(--space-xl); } .agent-stats-row { display: flex; gap: var(--space-2xl); margin-bottom: var(--space-xl); padding-bottom: var(--space-xl); border-bottom: 1px solid var(--border-color); } .agent-stat h4 { font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; color: var(--primary-700); } .agent-stat p { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; } .agent-contact-methods { display: flex; gap: var(--space-md); flex-wrap: wrap; } .agent-contact-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border: 1.5px solid var(--border-color); border-radius: var(--radius-full); font-size: 0.9rem; font-weight: 500; color: var(--text-secondary); transition: all var(--transition-fast); cursor: pointer; } .agent-contact-link:hover { border-color: var(--primary-500); color: var(--primary-700); background: var(--primary-50); } /* ── CTA Section ── */ .cta-section { background: linear-gradient(135deg, var(--primary-800), var(--primary-900)); padding: var(--space-4xl) 0; text-align: center; position: relative; overflow: hidden; } .cta-section::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at 30% 50%, rgba(20, 184, 166, 0.12), transparent 60%); pointer-events: none; } .cta-content { position: relative; z-index: 1; max-width: 700px; margin: 0 auto; } .cta-content h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 3.5vw, 2.6rem); font-weight: 600; color: white; margin-bottom: var(--space-md); } .cta-content p { color: var(--primary-200); font-size: 1.1rem; margin-bottom: var(--space-2xl); line-height: 1.7; } .cta-actions { display: flex; justify-content: center; gap: var(--space-md); flex-wrap: wrap; } /* ── Open House Banner ── */ .open-house-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 101; background: linear-gradient(135deg, var(--gold-500), var(--gold-600)); color: white; text-align: center; padding: 12px var(--space-xl); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.03em; display: flex; align-items: center; justify-content: center; gap: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); } .open-house-banner .btn { padding: 5px 16px; font-size: 0.78rem; background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.4); color: white; border-radius: var(--radius-full); } .open-house-banner .btn:hover { background: rgba(255,255,255,0.35); } /* ── Footer ── */ .footer { background: var(--slate-950); color: rgba(255,255,255,0.6); padding: var(--space-3xl) 0; } .footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-lg); } .footer-brand { display: flex; align-items: center; gap: 12px; } .footer-brand-name { font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; color: white; } .footer-brand-sub { font-size: 0.72rem; color: rgba(255,255,255,0.4); } .footer-legal { font-size: 0.75rem; text-align: right; line-height: 1.8; } .footer-legal a { color: var(--primary-400); } .footer-legal a:hover { color: var(--primary-300); } .footer-social { display: flex; gap: var(--space-md); } .footer-social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.5); transition: all var(--transition-fast); } .footer-social a:hover { border-color: var(--primary-500); color: var(--primary-400); background: rgba(20, 184, 166, 0.1); } /* ── Lightbox / Modal ── */ .lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.95); z-index: 1000; display: none; align-items: center; justify-content: center; padding: var(--space-xl); } .lightbox.active { display: flex; } .lightbox-img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: var(--radius-md); } .lightbox-close { position: absolute; top: 24px; right: 24px; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.1); color: white; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; cursor: pointer; transition: background var(--transition-fast); } .lightbox-close:hover { background: rgba(255,255,255,0.2); } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.1); color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--transition-fast); } .lightbox-nav:hover { background: rgba(255,255,255,0.2); } .lightbox-prev { left: 24px; } .lightbox-next { right: 24px; } .lightbox-counter { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.6); font-size: 0.9rem; } /* ── Animations ── */ .animate-on-scroll { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); } .animate-on-scroll.visible { opacity: 1; transform: translateY(0); } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* ── Mortgage Calculator Widget ── */ .calc-widget { background: var(--slate-50); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: var(--space-xl); margin-top: var(--space-xl); } .calc-widget h4 { font-family: var(--font-display); font-size: 1rem; font-weight: 600; margin-bottom: var(--space-lg); display: flex; align-items: center; gap: 8px; } .calc-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 0.9rem; } .calc-row span:first-child { color: var(--text-muted); } .calc-row span:last-child { font-weight: 600; color: var(--text-primary); } .calc-row.calc-total { border-top: 2px solid var(--primary-500); margin-top: var(--space-sm); padding-top: var(--space-md); } .calc-row.calc-total span:last-child { font-family: var(--font-display); font-size: 1.3rem; color: var(--primary-700); } .calc-note { font-size: 0.72rem; color: var(--slate-400); margin-top: var(--space-md); line-height: 1.5; } /* ── Share Bar ── */ .share-bar { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-lg) 0; border-top: 1px solid var(--border-color); margin-top: var(--space-xl); } .share-bar-label { font-size: 0.82rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; } .share-btn { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--border-color); display: flex; align-items: center; justify-content: center; color: var(--text-muted); transition: all var(--transition-fast); cursor: pointer; } .share-btn:hover { border-color: var(--primary-500); color: var(--primary-700); background: var(--primary-50); } /* ── Responsive ── */ @media (max-width: 1024px) { .details-grid { grid-template-columns: 1fr; } .contact-card { position: static; } .gallery-grid { grid-template-rows: repeat(2, 220px); } .agent-section { grid-template-columns: 1fr; text-align: center; } .agent-photo-wrapper { max-width: 300px; margin: 0 auto; } .agent-stats-row { justify-content: center; } .agent-contact-methods { justify-content: center; } } @media (max-width: 768px) { .navbar-links { display: none; } .navbar-links.open { display: flex; flex-direction: column; position: absolute; top: 64px; left: 0; right: 0; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(20px); padding: var(--space-xl); gap: var(--space-md); border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow-xl); } .navbar-links.open a { color: var(--slate-700) !important; } .mobile-menu-btn { display: block; } .hero-stats { flex-wrap: wrap; gap: var(--space-lg); } .hero-stat { flex: 1; min-width: 80px; } .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 200px 160px 160px; } .gallery-item:first-child { grid-column: 1 / 3; grid-row: 1 / 2; } .features-grid { grid-template-columns: 1fr; } .neighborhood-grid { grid-template-columns: repeat(2, 1fr); } .hero-actions { flex-direction: column; } .hero-actions .btn { width: 100%; } .cta-actions { flex-direction: column; align-items: center; } .footer-inner { flex-direction: column; text-align: center; } .footer-legal { text-align: center; } } @media (max-width: 480px) { .container { padding: 0 var(--space-md); } .gallery-grid { grid-template-columns: 1fr; grid-template-rows: 240px 160px; } .gallery-item:first-child { grid-column: 1; grid-row: 1; } .gallery-item:nth-child(n+3) { display: none; } .neighborhood-grid { grid-template-columns: 1fr; } .open-house-banner { flex-direction: column; gap: 8px; } } /* ── Print Styles ── */ @media print { .navbar, .lightbox, .cta-section, .footer, .open-house-banner { display: none !important; } .contact-card { position: static; box-shadow: none; border: 2px solid #000; } body { color: #000; background: #fff; } } /* ── Homepage Hero Variant ── */ .hero-home { min-height: 100vh; align-items: center; padding-bottom: 0; } .hero-home .hero-content { max-width: 700px; } .hero-tagline { font-size: 1.15rem; color: rgba(255,255,255,0.8); line-height: 1.8; margin-bottom: var(--space-xl); font-weight: 300; max-width: 600px; } /* ── Services ── */ .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); } .service-card { background: white; border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: var(--space-2xl); transition: all var(--transition-base); cursor: default; } .service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); border-color: var(--primary-200); } .service-icon { width: 56px; height: 56px; background: var(--primary-50); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--primary-700); margin-bottom: var(--space-lg); } .service-icon-gold { background: var(--gold-100); color: var(--gold-600); } .service-card h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; margin-bottom: var(--space-md); } .service-card p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.7; margin-bottom: var(--space-lg); } .service-features { list-style: none; display: flex; flex-direction: column; gap: 8px; } .service-features li { font-size: 0.88rem; color: var(--text-muted); padding-left: 20px; position: relative; } .service-features li::before { content: ''; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary-300); } /* ── Listing Cards ── */ .listings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); } .listing-card { background: white; border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; transition: all var(--transition-base); cursor: pointer; display: block; } .listing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); } .listing-card-image { position: relative; height: 280px; overflow: hidden; } .listing-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .listing-card:hover .listing-card-image img { transform: scale(1.04); } .listing-card-badge { position: absolute; top: 16px; left: 16px; background: var(--primary-700); color: white; padding: 6px 14px; border-radius: var(--radius-full); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; } .listing-card-price-tag { position: absolute; bottom: 16px; left: 16px; background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(10px); color: white; padding: 8px 18px; border-radius: var(--radius-md); font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; } .listing-card-body { padding: var(--space-xl); } .listing-card-address { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; margin-bottom: 4px; } .listing-card-city { color: var(--text-muted); font-size: 0.88rem; margin-bottom: var(--space-md); } .listing-card-stats { display: flex; gap: var(--space-lg); margin-bottom: var(--space-md); padding-bottom: var(--space-md); border-bottom: 1px solid var(--border-color); } .listing-card-stats span { display: flex; align-items: center; gap: 6px; font-size: 0.88rem; color: var(--text-secondary); } .listing-card-features { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-lg); } .listing-feature-tag { background: var(--primary-50); color: var(--primary-800); padding: 4px 12px; border-radius: var(--radius-full); font-size: 0.78rem; font-weight: 500; } .listing-card-cta { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.9rem; color: var(--primary-700); transition: gap var(--transition-fast); } .listing-card:hover .listing-card-cta { gap: 10px; color: var(--primary-800); } /* Coming Soon Card */ .listing-card-coming { border: 2px dashed var(--border-color); background: var(--slate-50); cursor: default; } .listing-card-coming:hover { transform: none; box-shadow: none; } .listing-card-coming-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-3xl); height: 100%; min-height: 400px; } .listing-coming-icon { color: var(--slate-300); margin-bottom: var(--space-xl); } .listing-card-coming h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; margin-bottom: var(--space-sm); color: var(--text-primary); } .listing-card-coming p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; max-width: 300px; } /* ── Blog / Insights Grid ── */ .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); } .blog-card { background: white; border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; transition: all var(--transition-base); } .blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); } .blog-card-image { position: relative; height: 200px; overflow: hidden; } .blog-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .blog-card:hover .blog-card-image img { transform: scale(1.04); } .blog-card-category { position: absolute; top: 12px; left: 12px; background: rgba(15, 23, 42, 0.75); backdrop-filter: blur(8px); color: white; padding: 4px 12px; border-radius: var(--radius-full); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .blog-card-body { padding: var(--space-xl); } .blog-card-meta { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-md); font-size: 0.78rem; color: var(--text-muted); } .blog-card-meta span { display: flex; align-items: center; gap: 4px; } .blog-card-body h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; line-height: 1.4; margin-bottom: var(--space-sm); color: var(--text-primary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .blog-card-body p { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: var(--space-md); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .blog-card-link { display: inline-flex; align-items: center; gap: 4px; font-size: 0.88rem; font-weight: 600; color: var(--primary-700); transition: gap var(--transition-fast); } .blog-card:hover .blog-card-link { gap: 8px; color: var(--primary-800); } @media (max-width: 1024px) { .blog-grid { grid-template-columns: 1fr; } } /* ── Blog Article Page ── */ .blog-back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; font-weight: 500; color: var(--primary-700); margin-bottom: 2rem; transition: gap var(--transition-fast); } .blog-back-link:hover { gap: 10px; } .blog-content { font-size: 1.05rem; line-height: 1.8; color: var(--text-secondary); } .blog-content h2 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--text-primary); margin-top: 2.5rem; margin-bottom: 1rem; } .blog-content p { margin-bottom: 1.25rem; } .blog-content ul { margin-bottom: 1.25rem; padding-left: 1.5rem; } .blog-content ul li { margin-bottom: 0.5rem; line-height: 1.7; } .blog-content a { color: var(--primary-700); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } .blog-content a:hover { color: var(--primary-800); } .blog-content strong { color: var(--text-primary); font-weight: 600; } /* ── Instagram / Track Record Grid ── */ .ig-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); margin-top: var(--space-2xl); } .ig-post { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-md); overflow: hidden; display: block; } .ig-post img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-base); } .ig-overlay { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.7); display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; transition: opacity var(--transition-base); color: white; padding: var(--space-lg); text-align: center; } .ig-post:hover .ig-overlay { opacity: 1; } .ig-post:hover img { transform: scale(1.05); } .ig-stats { display: flex; gap: var(--space-lg); font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; margin-bottom: var(--space-sm); } .ig-stats span { display: flex; align-items: center; gap: 6px; } .ig-caption { font-size: 0.85rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 1024px) { .ig-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .ig-grid { grid-template-columns: 1fr; gap: var(--space-lg); } } /* ── Contact Split Layout ── */ .contact-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4xl); align-items: start; } .contact-info-items { display: flex; flex-direction: column; gap: var(--space-lg); margin-bottom: var(--space-xl); } .contact-info-item { display: flex; align-items: center; gap: var(--space-md); } .contact-info-icon { width: 44px; height: 44px; background: rgba(20, 184, 166, 0.1); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--primary-400); flex-shrink: 0; } .contact-info-label { font-size: 0.75rem; color: var(--primary-300); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } .contact-info-value { color: white; font-size: 0.95rem; } .contact-info-value:hover { color: var(--primary-300); } .contact-social-row { display: flex; gap: var(--space-md); } .contact-social-row a { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.5); transition: all var(--transition-fast); } .contact-social-row a:hover { border-color: var(--primary-500); color: var(--primary-400); background: rgba(20, 184, 166, 0.1); } .contact-form-card { background: white; border-radius: var(--radius-lg); padding: var(--space-2xl); box-shadow: var(--shadow-2xl); } .contact-form-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-xl); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); } .contact-form-card .form-group { margin-bottom: var(--space-md); } .contact-form-card label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.06em; } .contact-form-card input, .contact-form-card textarea, .contact-form-card select { width: 100%; padding: 12px 16px; border: 1.5px solid var(--border-color); border-radius: var(--radius-md); font-family: var(--font-body); font-size: 0.95rem; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); background: var(--slate-50); color: var(--text-primary); } .contact-form-card input:focus, .contact-form-card textarea:focus, .contact-form-card select:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12); background: white; } .contact-form-card textarea { resize: vertical; min-height: 80px; } .form-disclaimer { font-size: 0.72rem; color: var(--slate-400); margin-top: var(--space-md); text-align: center; } /* ── Homepage Responsive ── */ @media (max-width: 1024px) { .services-grid { grid-template-columns: 1fr; } .listings-grid { grid-template-columns: 1fr; } .contact-split { grid-template-columns: 1fr; } } @media (max-width: 768px) { .form-row { grid-template-columns: 1fr; } .listing-card-image { height: 220px; } } /* ── Reduced Motion ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .animate-on-scroll { opacity: 1; transform: none; } } /* ── Navbar: Recent Sales link emphasis + active state ── */ .navbar-links a[href*="recent-sales"] { position: relative; display: inline-flex; align-items: center; gap: 6px; } .navbar-links a[href*="recent-sales"]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-400); box-shadow: 0 0 0 0 rgba(252, 211, 77, 0.6); animation: ringPulse 2.4s ease-out infinite; } @keyframes ringPulse { 0% { box-shadow: 0 0 0 0 rgba(252, 211, 77, 0.55); } 70% { box-shadow: 0 0 0 8px rgba(252, 211, 77, 0); } 100% { box-shadow: 0 0 0 0 rgba(252, 211, 77, 0); } } @media (prefers-reduced-motion: reduce) { .navbar-links a[href*="recent-sales"]::before { animation: none; } } /* Active page underline */ body[data-page="recent-sales"] .navbar-links a[href*="recent-sales"], body[data-page="home"] .navbar-links a[href$="#hero"], .navbar-links a.active { color: var(--gold-500); } body[data-page="recent-sales"] .navbar-links a[href*="recent-sales"]::after { content: ""; position: absolute; bottom: -8px; left: 14px; right: 0; height: 2px; background: var(--gold-500); border-radius: 1px; } /* ── Accessibility: Focus & Skip-Link ── */ :focus { outline: none; } :focus-visible { outline: 3px solid var(--gold-400); outline-offset: 3px; border-radius: var(--radius-sm); } .btn:focus-visible, .navbar-cta:focus-visible { outline-offset: 4px; box-shadow: 0 0 0 4px rgba(217,119,6,0.35); } .skip-link { position: absolute; top: -100px; left: 0; background: var(--slate-900); color: var(--gold-300); padding: 12px 20px; font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.04em; z-index: 9999; text-decoration: none; border-radius: 0 0 var(--radius-md) 0; transition: top 200ms var(--ease-out); } .skip-link:focus, .skip-link:focus-visible { top: 0; outline: 3px solid var(--gold-400); outline-offset: -2px; } /* ── Print stylesheet ── */ @media print { .navbar, .footer, .mobile-menu-btn, .skip-link, .city-filters, .valuation-cta, .ig-grid, .navbar-cta { display: none !important; } body { color: #000; background: #fff; font-size: 11pt; } a { color: #000; text-decoration: underline; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; } .section, .sales-hero { padding: 1rem 0 !important; background: #fff !important; color: #000 !important; } .sales-hero h1, .sales-hero-tagline, .sales-stat-num, .sales-stat-label { color: #000 !important; } .sold-card, .faq-item, .listing-card, .blog-card, .service-card { page-break-inside: avoid; box-shadow: none; border: 1px solid #ccc; } .sold-card-image { aspect-ratio: 16/8; } h1, h2, h3 { color: #000 !important; page-break-after: avoid; } img, picture { max-width: 100% !important; } .sold-ribbon, .scenario-chip { background: #333 !important; color: #fff !important; } } /* ════════════════════════════════════════════════════════════ MOBILE OPTIMIZATIONS — touch targets, viewport units, safe areas, image sizing, iOS quirks ════════════════════════════════════════════════════════════ */ /* Honor iPhone notch / home-bar safe areas */ body { padding-top: env(safe-area-inset-top, 0); padding-left: env(safe-area-inset-left, 0); padding-right: env(safe-area-inset-right, 0); } /* Use small viewport units on mobile so iOS Safari URL bar doesn't cause the hero to clip or shift on scroll */ @supports (height: 100svh) { .hero, .case-hero, .sales-hero { min-height: 100svh; } } /* Disable iOS auto-zoom on form focus by ensuring inputs are ≥16px */ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="url"], select, textarea { font-size: 16px; font-size: max(16px, 1rem); } /* Remove tap-delay + improve touch responsiveness on all interactive elements */ a, button, summary, [role="button"], .btn, .listing-card, .gallery-item, .holly-gallery-item, .hr-card, .sold-card, .navbar-links a, .mobile-menu-btn, .city-pill, .e404-link-card, .faq-question, .ig-post { touch-action: manipulation; -webkit-tap-highlight-color: rgba(217, 119, 6, 0.18); } /* Larger tap targets — Apple HIG and WCAG 2.5.5 want 44×44 min */ @media (max-width: 768px) { /* Tighten container padding so content has more room */ .container { padding: 0 var(--space-md); } /* Hero: ensure tagline + buttons don't overflow */ .hero-actions { flex-direction: column; align-items: stretch; gap: var(--space-sm); } .hero-actions .btn { width: 100%; justify-content: center; } /* Buttons that stack should not be nowrap */ .btn { white-space: normal; min-height: 44px; line-height: 1.3; } .btn-lg { padding: 14px 24px; font-size: 1rem; } /* Mobile-menu links: full-width tap zones with comfortable spacing */ .navbar-links.open { padding: var(--space-md); gap: 4px; } .navbar-links.open a { padding: 14px 16px; font-size: 1rem; border-radius: var(--radius-md); min-height: 44px; display: flex; align-items: center; } .navbar-links.open a:hover, .navbar-links.open a:focus-visible { background: var(--primary-50); } /* Section padding: less breathing room on phones to reduce scroll */ .section { padding: var(--space-3xl) 0; } /* Heading scale: tighter on phones */ .heading-xl { font-size: clamp(1.9rem, 8vw, 2.6rem); } .heading-lg { font-size: clamp(1.45rem, 5.5vw, 2rem); } /* Cards: lift hover effect off mobile (no hover, only tap) */ .listing-card:hover, .sold-card:hover, .hr-card:hover, .blog-card:hover, .service-card:hover, .neighborhood-card:hover { transform: none; } .listing-card:active, .sold-card:active, .hr-card:active, .blog-card:active { transform: scale(0.99); } /* Form: make inputs feel nicer on mobile */ .form-group input, .form-group select, .form-group textarea { padding: 14px 16px; border-radius: var(--radius-md); min-height: 48px; } .form-group textarea { min-height: 120px; } /* Footer: tighter spacing */ .footer-inner { padding: var(--space-lg) 0; gap: var(--space-md); } /* Hero text: reduce excessive top spacing */ .hero { padding-bottom: var(--space-3xl); } } /* iPhone SE / very small phones */ @media (max-width: 380px) { .container { padding: 0 var(--space-sm); } .navbar-brand-text { font-size: 0.95rem; } .navbar-brand-sub { font-size: 0.65rem; } .heading-xl { font-size: 1.7rem; line-height: 1.2; } .hero-badge { font-size: 0.72rem; padding: 6px 12px; } .btn-lg { padding: 12px 18px; font-size: 0.95rem; } } /* Lightbox: larger thumb-friendly controls on mobile */ @media (max-width: 768px) { .lb-close, .lb-prev, .lb-next, .lightbox-close, .lightbox-nav { width: 48px !important; height: 48px !important; } .lb-close, .lightbox-close { top: max(16px, env(safe-area-inset-top)); right: 16px; } .lb-prev, .lightbox-prev { left: 8px; } .lb-next, .lightbox-next { right: 8px; } } /* Ensure responsive images never overflow on mobile */ img, picture { max-width: 100%; height: auto; } /* Smooth scroll for anchor links — but only for users who don't prefer reduced motion */ @media (prefers-reduced-motion: no-preference) { html { scroll-padding-top: 80px; } /* offset for sticky navbar */ }