/* ========================================================================== KLI Properties - Master Architectural Stylesheet Strict Brand Design System: Editorial Sobriety & Concrete Architectural Specs Palette: Deep Charcoal (#121417), Warm Stone (#F8F7F4), Muted Brass (#B89758) Typography: Editorial Serif (Playfair Display) + Modern Data Sans (Plus Jakarta Sans) ========================================================================== */ /* Fonts are loaded via preconnected in HTML with &display=swap for high Lighthouse performance */ :root { /* 1. Core Palette */ --charcoal-950: #0a0b0d; --charcoal-900: #121417; /* Primary Deep Charcoal */ --charcoal-850: #171a1e; --charcoal-800: #1f2328; --charcoal-700: #2c3138; --charcoal-600: #3f4650; --charcoal-divider: rgba(255, 255, 255, 0.12); --charcoal-divider-subtle: rgba(255, 255, 255, 0.07); /* 2. Warm Stone & Surfaces */ --canvas: #F8F7F4; /* Primary Warm Stone Background */ --canvas-card: #FFFFFF; /* Sharp Interior Panels */ --canvas-subtle: #F0EEEA;/* Architectural Inset Background */ --stone-border: #E5E2DC; /* 1px Hairline Divider */ --stone-border-light: #ECE9E2; --stone-border-dark: #D4D0C7; /* 3. Muted Brass & Bronze Accents (Strictly No Generic Neon/Purple) */ --brass: #B89758; /* Muted Architectural Brass */ --brass-light: #D1B67E; --brass-dark: #8F7239; --brass-bg: rgba(184, 151, 88, 0.08); --brass-bg-hover: rgba(184, 151, 88, 0.16); --brass-border: rgba(184, 151, 88, 0.35); /* 4. Text & Neutral Scales */ --text-primary: #121417; --text-secondary: #4A515B; --text-muted: #6E7783; --text-light: #949DA8; --text-on-dark: #F8F7F4; --text-muted-dark: #A6AFBA; /* 5. Status Indicators (Subtle & Architecturally Grounded) */ --status-avail-bg: #EAF4EE; --status-avail-text: #1E5C3E; --status-avail-border: #BCE2CB; --status-avail-dot: #2D6A4F; --status-leased-bg: #ECE9E3; --status-leased-text: #5E6773; --status-leased-border: #D8D4CA; --status-leased-dot: #838C98; /* 6. Typography */ --font-heading: 'Playfair Display', 'Cormorant Garamond', Georgia, serif; --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* 7. Precision Geometry (Strictly No Pill Cards or Bubbly 20px Radii) */ --radius-sharp: 0px; --radius-xs: 2px; --radius-sm: 4px; /* 8. Structural Shadows (Tactile, Crisp, Institutional) */ --shadow-subtle: 0 1px 3px rgba(18, 20, 23, 0.04); --shadow-card: 0 4px 16px -2px rgba(18, 20, 23, 0.06); --shadow-deep: 0 20px 40px -8px rgba(18, 20, 23, 0.14); --shadow-hero: 0 24px 48px -12px rgba(0, 0, 0, 0.45); --container-max: 1260px; } /* Base Resets */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; background-color: var(--canvas); overflow-x: hidden; } body { font-family: var(--font-sans); background-color: var(--canvas); color: var(--text-primary); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; width: 100%; position: relative; } body.menu-locked, body.modal-open, body.lightbox-open { overflow: hidden; } a { color: var(--text-primary); text-decoration: none; transition: color 0.2s ease, border-color 0.2s ease; } a:hover { color: var(--brass-dark); } img { max-width: 100%; height: auto; display: block; } /* Containers & Structural Whitespace */ .container { max-width: var(--container-max); margin: 0 auto; padding: 0 32px; } @media (max-width: 640px) { .container { padding: 0 16px; } } .section { padding: 104px 0; position: relative; } .section-alt { background-color: var(--canvas-card); border-top: 1px solid var(--stone-border); border-bottom: 1px solid var(--stone-border); } .section-dark { background-color: var(--charcoal-900); color: var(--text-on-dark); border-top: 1px solid var(--charcoal-divider); border-bottom: 1px solid var(--charcoal-divider); } .section-header { text-align: left; max-width: 840px; margin-bottom: 56px; } .section-header.text-center { text-align: center; margin-left: auto; margin-right: auto; } .section-tag { display: inline-flex; align-items: center; gap: 8px; color: var(--brass); background: transparent; border: none; font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2.2px; padding: 0 0 6px 0; position: relative; margin-bottom: 14px; } .section-tag::after { content: ''; display: inline-block; width: 24px; height: 1px; background: var(--brass); margin-left: 6px; } .section-title { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 600; color: var(--charcoal-900); line-height: 1.18; letter-spacing: -0.02em; margin-bottom: 14px; } .section-dark .section-title { color: var(--text-on-dark); } .section-subtitle { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.65; font-weight: 400; max-width: 680px; } .section-dark .section-subtitle { color: var(--text-muted-dark); } /* ========================================================================== NAVIGATION BAR (STRICT SINGLE ROW - ZERO WRAPPING - DEEP CHARCOAL) ========================================================================== */ .site-header { background: var(--charcoal-900); border-bottom: 1px solid var(--charcoal-divider); position: sticky; top: 0; z-index: 1000; transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .site-header.header-scrolled { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); background: #0d0f12; } .nav-container { display: flex; align-items: center; justify-content: space-between; height: 84px; gap: 24px; flex-wrap: nowrap; white-space: nowrap; } .brand-link { display: flex; align-items: center; flex-shrink: 0; } .brand-logo { height: 38px; width: auto; display: block; transition: opacity 0.2s ease; } .brand-link:hover .brand-logo { opacity: 0.88; } .brand-text { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 700; color: var(--text-on-dark); letter-spacing: 0.5px; display: flex; flex-direction: column; line-height: 1.1; } .brand-text span { font-family: var(--font-sans); font-size: 0.65rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--brass); } .nav-menu { display: flex; align-items: center; gap: 32px; flex-shrink: 0; flex-wrap: nowrap; } .nav-links { list-style: none; display: flex; align-items: center; gap: 28px; flex-wrap: nowrap; } .nav-links li { flex-shrink: 0; } .nav-links a { color: var(--text-muted-dark); font-weight: 500; font-size: 0.88rem; letter-spacing: 0.8px; text-transform: uppercase; text-decoration: none; position: relative; padding: 8px 0; transition: color 0.2s ease; display: inline-block; } .nav-links a::after { content: ''; position: absolute; bottom: 0px; left: 0; width: 0%; height: 1.5px; background: var(--brass); transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .nav-links a:hover { color: var(--text-on-dark); } .nav-links a:hover::after, .nav-links a.active::after { width: 100%; } .nav-links a.active { color: var(--text-on-dark); font-weight: 600; } .nav-cta { display: flex; align-items: center; gap: 16px; flex-shrink: 0; flex-wrap: nowrap; } .phone-link { display: inline-flex; align-items: center; gap: 8px; color: var(--text-on-dark); font-weight: 600; font-size: 0.88rem; letter-spacing: 0.3px; text-decoration: none; padding: 8px 12px; border: 1px solid var(--charcoal-divider); background: rgba(255, 255, 255, 0.03); border-radius: var(--radius-xs); transition: all 0.2s ease; } .phone-link svg { color: var(--brass); flex-shrink: 0; } .phone-link:hover { color: var(--brass-light); border-color: var(--brass); background: rgba(184, 151, 88, 0.08); } .mobile-toggle { display: none; background: transparent; border: 1px solid var(--charcoal-divider); border-radius: var(--radius-xs); cursor: pointer; padding: 8px; color: var(--text-on-dark); } @media (max-width: 1080px) { .mobile-toggle { display: block; } .nav-menu { position: fixed; top: 84px; left: 0; right: 0; bottom: 0; background: var(--charcoal-900); flex-direction: column; align-items: flex-start; padding: 36px 32px; gap: 28px; transform: translateY(-100%); opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); overflow-y: auto; border-top: 1px solid var(--charcoal-divider); } .nav-menu.nav-open { transform: translateY(0); opacity: 1; visibility: visible; } .nav-links { flex-direction: column; align-items: flex-start; width: 100%; gap: 16px; } .nav-links a { font-size: 1.05rem; display: block; width: 100%; padding: 12px 0; border-bottom: 1px solid var(--charcoal-divider-subtle); } .nav-cta { flex-direction: column; align-items: flex-start; width: 100%; gap: 16px; margin-top: 12px; } .nav-cta .btn, .nav-cta .phone-link { width: 100%; justify-content: center; } } /* ========================================================================== BUTTONS & BADGES (ARCHITECTURAL FINISH) ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font-sans); font-weight: 600; font-size: 0.88rem; letter-spacing: 0.5px; text-transform: uppercase; padding: 12px 24px; border-radius: var(--radius-xs); cursor: pointer; text-decoration: none; transition: all 0.2s ease; border: 1px solid transparent; white-space: nowrap; } /* Primary Button: Deep Charcoal on Light / Crisp Muted Brass on Dark */ .btn-primary { background: var(--charcoal-900); color: var(--canvas); border-color: var(--charcoal-900); } .btn-primary:hover { background: var(--brass-dark); color: #ffffff; border-color: var(--brass-dark); } /* Luxury / Brass Accent Button */ .btn-luxury { background: var(--brass); color: var(--charcoal-950); border-color: var(--brass); font-weight: 700; } .btn-luxury:hover { background: var(--brass-light); color: var(--charcoal-950); border-color: var(--brass-light); } /* Dark Outline / Editorial Button */ .btn-outline { background: transparent; color: var(--charcoal-900); border: 1px solid var(--charcoal-900); } .btn-outline:hover { background: var(--charcoal-900); color: var(--canvas); } /* Outline on Dark Surfaces */ .btn-outline-dark { background: transparent; color: var(--text-on-dark); border: 1px solid var(--charcoal-divider); } .btn-outline-dark:hover { border-color: var(--brass); color: var(--brass-light); background: rgba(184, 151, 88, 0.08); } .btn-secondary { background: var(--canvas-subtle); color: var(--charcoal-900); border: 1px solid var(--stone-border); } .btn-secondary:hover { background: var(--stone-border); color: var(--charcoal-950); } .btn-white { background: var(--canvas); color: var(--charcoal-900); border: 1px solid var(--canvas); } .btn-white:hover { background: transparent; color: var(--canvas); border-color: var(--charcoal-divider); } .btn-sm { padding: 8px 16px; font-size: 0.78rem; letter-spacing: 0.6px; } .btn-lg { padding: 15px 32px; font-size: 0.94rem; } .btn-block { width: 100%; } /* Status Badges */ .badge-status { display: inline-flex; align-items: center; gap: 7px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; padding: 4px 10px; border-radius: var(--radius-xs); border: 1px solid transparent; white-space: nowrap; } .badge-status.available { background: var(--status-avail-bg); color: var(--status-avail-text); border-color: var(--status-avail-border); } .badge-status.available .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--status-avail-dot); } .badge-status.leased { background: var(--status-leased-bg); color: var(--status-leased-text); border-color: var(--status-leased-border); } .badge-status.leased .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--status-leased-dot); } .badge-status.not-available { background: #fdf2f2; color: #991b1b; border-color: #fecaca; } .badge-status.not-available .dot { width: 6px; height: 6px; border-radius: 50%; background: #ef4444; } /* ========================================================================== FULL-BLEED HERO SECTION (DEEP CHARCOAL & ARCHITECTURAL SPECS) ========================================================================== */ .hero-section { position: relative; background-color: var(--charcoal-900); color: var(--text-on-dark); padding: 88px 0 96px; overflow: hidden; border-bottom: 1px solid var(--charcoal-divider); } .hero-bg-overlay { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(18, 20, 23, 0.96) 35%, rgba(18, 20, 23, 0.88) 100%), url('../images/properties/2035-swanson/front-exterior.webp'); background-size: cover; background-position: center 30%; pointer-events: none; opacity: 0.45; } .hero-grid { display: grid; grid-template-columns: 1.25fr 0.85fr; gap: 56px; align-items: start; position: relative; z-index: 2; } @media (max-width: 992px) { .hero-grid { grid-template-columns: 1fr; gap: 48px; } } .hero-badge { display: inline-flex; align-items: center; gap: 9px; background: rgba(184, 151, 88, 0.12); border: 1px solid var(--brass-border); padding: 6px 14px; border-radius: var(--radius-xs); font-size: 0.74rem; font-weight: 700; color: var(--brass-light); letter-spacing: 1.8px; text-transform: uppercase; margin-bottom: 22px; } .hero-badge svg { color: var(--brass); } .hero-title { font-family: var(--font-heading); font-size: 3.25rem; font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; margin-bottom: 20px; color: var(--text-on-dark); } .hero-title span.accent-serif { color: var(--brass-light); font-style: italic; font-weight: 400; } .hero-desc { font-size: 1.1rem; line-height: 1.68; color: var(--text-muted-dark); margin-bottom: 36px; max-width: 620px; } .hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 48px; } /* Hero Concrete Specs Bar */ .hero-specs-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-top: 32px; border-top: 1px solid var(--charcoal-divider); } @media (max-width: 640px) { .hero-specs-bar { grid-template-columns: 1fr; gap: 18px; } } .hero-spec-item { border-left: 1px solid var(--brass); padding-left: 14px; } .hero-spec-item .spec-data { display: block; font-family: var(--font-heading); font-size: 1.65rem; font-weight: 600; color: var(--text-on-dark); letter-spacing: -0.01em; line-height: 1.2; } .hero-spec-item .spec-label { display: block; font-size: 0.74rem; color: var(--text-muted-dark); font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; margin-top: 4px; } /* Hero Quick Inquiry Card (Editorial Architectural Surface) */ .hero-card { background: var(--canvas-card); border: 1px solid var(--stone-border); border-radius: var(--radius-xs); box-shadow: var(--shadow-hero); padding: 36px 32px; color: var(--text-primary); position: relative; } .hero-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--brass); } .hero-card h3 { font-family: var(--font-heading); font-size: 1.65rem; font-weight: 600; color: var(--charcoal-900); margin-bottom: 6px; line-height: 1.2; } .hero-card p { color: var(--text-secondary); font-size: 0.88rem; margin-bottom: 20px; line-height: 1.5; } .hero-desk-inventory { display: flex; flex-direction: column; gap: 12px; margin: 0 0 20px; padding: 14px 16px; background: var(--stone-bg-alt); border: 1px solid var(--stone-border-light); border-radius: var(--radius-xs); } .hero-desk-inventory .desk-item { display: flex; flex-direction: column; gap: 3px; padding-bottom: 10px; border-bottom: 1px solid var(--stone-border); } .hero-desk-inventory .desk-item:last-child { border-bottom: none; padding-bottom: 0; } .hero-desk-inventory .desk-prop { font-size: 0.9rem; font-weight: 700; color: var(--charcoal-900); } .hero-desk-inventory .desk-spec { font-size: 0.76rem; color: var(--brass-dark); font-weight: 600; } .hero-desk-contacts { margin-bottom: 16px; } .hero-card .desk-phone-btn { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--charcoal-900); color: var(--stone-bg); border-radius: var(--radius-xs); text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease; border: 1px solid var(--charcoal-700); } .hero-card .desk-phone-btn:hover { background: var(--charcoal-800); color: var(--brass-light); border-color: var(--brass); } .hero-card .desk-phone-btn svg { color: var(--brass); flex-shrink: 0; } .hero-card .desk-phone-btn strong { display: block; font-size: 1.05rem; letter-spacing: 0.5px; font-family: var(--font-body); font-weight: 700; color: var(--text-on-dark); } .hero-card .desk-phone-btn span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted-dark); } /* Forms */ .lead-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; } @media (max-width: 580px) { .lead-form .form-row { grid-template-columns: 1fr; } } .lead-form .form-group { margin-bottom: 14px; } .lead-form label { display: block; font-size: 0.74rem; font-weight: 700; color: var(--charcoal-800); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 6px; } .lead-form input, .lead-form select, .lead-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--stone-border); border-radius: var(--radius-xs); font-size: 0.9rem; font-family: var(--font-sans); color: var(--charcoal-900); background: var(--canvas); transition: border-color 0.2s ease, background 0.2s ease; } .lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus { outline: none; border-color: var(--brass); background: #ffffff; } .lead-form textarea { resize: vertical; min-height: 72px; } .form-status { padding: 12px 14px; border-radius: var(--radius-xs); font-size: 0.84rem; margin-top: 14px; display: none; } .form-status.status-success { background: var(--status-avail-bg); color: var(--status-avail-text); border: 1px solid var(--status-avail-border); } .form-status.status-error { background: #fdf2f2; color: #991b1b; border: 1px solid #f87171; } /* ========================================================================== ASYMMETRICAL EDITORIAL LAYOUT (FLAGSHIP PROPERTY MONOGRAPHS) Avoids repetitive rounded-box card grids. Clean 1px dividers, tabular spec breakdown, high visual contrast. ========================================================================== */ .editorial-feature { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: stretch; background: var(--canvas-card); border: 1px solid var(--stone-border); border-radius: var(--radius-xs); margin-bottom: 64px; overflow: hidden; } .editorial-feature.inverted { grid-template-columns: 0.85fr 1.15fr; } @media (max-width: 960px) { .editorial-feature, .editorial-feature.inverted { grid-template-columns: 1fr; gap: 0; } .editorial-feature.inverted .feature-media { order: -1; } } .feature-media { position: relative; min-height: 380px; background: var(--charcoal-900); overflow: hidden; } .feature-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .editorial-feature:hover .feature-media img { transform: scale(1.02); } .feature-badge-overlay { position: absolute; top: 20px; left: 20px; z-index: 2; } .feature-content { padding: 44px 40px; display: flex; flex-direction: column; justify-content: space-between; } @media (max-width: 600px) { .feature-content { padding: 28px 24px; } } .feature-header { margin-bottom: 24px; } .feature-region { font-size: 0.74rem; font-weight: 700; color: var(--brass-dark); text-transform: uppercase; letter-spacing: 1.8px; margin-bottom: 8px; } .feature-title { font-family: var(--font-heading); font-size: 2.1rem; font-weight: 600; color: var(--charcoal-900); line-height: 1.2; margin-bottom: 8px; } .feature-address { color: var(--text-secondary); font-size: 0.95rem; display: flex; align-items: center; gap: 6px; } /* Concrete Specs Table within Editorial Feature */ .specs-table { width: 100%; border-collapse: collapse; margin: 24px 0 28px; border-top: 1px solid var(--stone-border); border-bottom: 1px solid var(--stone-border); } .specs-table th { padding: 12px 0; font-size: 0.72rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid var(--stone-border-light); text-align: left; } .specs-table th:last-child { text-align: right; } .specs-table td { padding: 14px 0; border-bottom: 1px solid var(--stone-border-light); font-size: 0.88rem; color: var(--charcoal-900); } .specs-table td:last-child { text-align: right; white-space: nowrap; } .specs-table tr:last-child td { border-bottom: none; } .specs-table .suite-name { font-weight: 700; display: block; color: var(--charcoal-900); } .specs-table .suite-desc { font-size: 0.78rem; color: var(--text-secondary); display: block; margin-top: 2px; } .specs-table .spec-value { font-family: var(--font-sans); font-weight: 600; } .feature-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--stone-border-light); } /* ========================================================================== PORTFOLIO DIRECTORY (CLEAN 1PX ARCHITECTURAL BORDER DIVIDERS) Replaces repetitive bubble cards with architectural index layout. ========================================================================== */ .filter-bar { display: flex; align-items: center; justify-content: flex-start; gap: 0; border-bottom: 1px solid var(--stone-border); margin-bottom: 40px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE / Edge */ } .filter-bar::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ width: 0; height: 0; } @media (min-width: 860px) { .filter-bar { flex-wrap: wrap; overflow-x: visible; } } .filter-btn { background: transparent; color: var(--text-muted); border: none; border-bottom: 2px solid transparent; font-family: var(--font-sans); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 1px; padding: 14px 20px; cursor: pointer; transition: all 0.2s ease; margin-bottom: -1px; } .filter-btn:hover { color: var(--charcoal-900); } .filter-btn.active { background: transparent; color: var(--charcoal-900); border-bottom-color: var(--brass); font-weight: 700; } /* Editorial Index Rows / Property Cards */ .property-directory-list { display: flex; flex-direction: column; gap: 20px; } .directory-row-item { background: var(--canvas-card); border: 1px solid var(--stone-border); border-radius: var(--radius-xs); display: grid; grid-template-columns: 240px 1.2fr 1fr 180px; gap: 24px; align-items: center; padding: 16px 20px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .directory-row-item:hover { border-color: var(--stone-border-dark); box-shadow: var(--shadow-subtle); } @media (max-width: 1040px) { .directory-row-item { grid-template-columns: 180px 1fr 1fr; } .directory-row-item .row-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; padding-top: 12px; border-top: 1px solid var(--stone-border-light); } } @media (max-width: 720px) { .directory-row-item { grid-template-columns: 1fr; gap: 16px; padding: 20px; } .directory-row-item .row-actions { justify-content: stretch; } .directory-row-item .row-actions .btn { width: 100%; } } .row-thumb { height: 140px; background: var(--charcoal-900); border-radius: var(--radius-xs); overflow: hidden; } .row-thumb img { width: 100%; height: 100%; object-fit: cover; } .row-primary h3 { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 600; color: var(--charcoal-900); margin-bottom: 4px; } .row-primary p.row-address { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 10px; } .row-primary .row-region-badge { font-size: 0.72rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--brass-dark); } .row-specs { font-size: 0.85rem; color: var(--text-secondary); } .row-specs ul { list-style: none; display: flex; flex-direction: column; gap: 6px; } .row-specs li { display: flex; align-items: center; gap: 8px; } .row-specs li svg { color: var(--brass); flex-shrink: 0; } .row-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; } /* ========================================================================== EXECUTIVE ARCHITECTURAL STANDARDS (BLUEPRINT 3-COLUMNS WITH 1PX DIVIDERS) ========================================================================== */ .standards-blueprint { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--canvas-card); border: 1px solid var(--stone-border); border-radius: var(--radius-xs); } @media (max-width: 860px) { .standards-blueprint { grid-template-columns: 1fr; } } .standard-column { padding: 48px 36px; border-right: 1px solid var(--stone-border); display: flex; flex-direction: column; justify-content: flex-start; } .standard-column:last-child { border-right: none; } @media (max-width: 860px) { .standard-column { border-right: none; border-bottom: 1px solid var(--stone-border); padding: 36px 28px; } .standard-column:last-child { border-bottom: none; } } .standard-num { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; color: var(--brass); letter-spacing: 1.5px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } .standard-num::after { content: ''; display: inline-block; width: 24px; height: 1px; background: var(--brass); } .standard-column h3 { font-family: var(--font-heading); font-size: 1.45rem; font-weight: 600; color: var(--charcoal-900); margin-bottom: 14px; line-height: 1.25; } .standard-column p { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.65; } /* ========================================================================== DIRECT INQUIRY & ACTION BANNER ========================================================================== */ .cta-banner { background: var(--charcoal-900); color: var(--text-on-dark); padding: 88px 0; border-top: 1px solid var(--charcoal-divider); border-bottom: 1px solid var(--charcoal-divider); } .cta-inner { max-width: 860px; margin: 0 auto; text-align: center; } .cta-inner .section-title { color: var(--text-on-dark); margin-bottom: 16px; } .cta-inner .section-subtitle { color: var(--text-muted-dark); margin: 0 auto 36px; } .cta-controls { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; } /* ========================================================================== MODALS (CLEAN 1PX BORDER ARCHITECTURAL SURFACE) ========================================================================== */ .modal-container { position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; } .modal-container.modal-active { opacity: 1; visibility: visible; } .modal-overlay { position: absolute; inset: 0; background: rgba(10, 11, 13, 0.85); backdrop-filter: blur(4px); } .modal-box { position: relative; background: var(--canvas-card); width: 100%; max-width: 540px; border: 1px solid var(--stone-border); border-radius: var(--radius-xs); box-shadow: var(--shadow-deep); padding: 40px; z-index: 2; transform: translateY(12px); transition: transform 0.25s ease; } .modal-container.modal-active .modal-box { transform: translateY(0); } .modal-close { position: absolute; top: 20px; right: 20px; background: var(--canvas-subtle); border: 1px solid var(--stone-border); color: var(--charcoal-800); font-size: 1.4rem; width: 34px; height: 34px; border-radius: var(--radius-xs); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; } .modal-close:hover { background: var(--charcoal-900); color: var(--canvas); border-color: var(--charcoal-900); } .modal-header { margin-bottom: 24px; border-bottom: 1px solid var(--stone-border-light); padding-bottom: 16px; } .modal-header h3 { font-family: var(--font-heading); font-size: 1.65rem; font-weight: 600; color: var(--charcoal-900); } .modal-header p { color: var(--brass-dark); font-size: 0.88rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; margin-top: 4px; } /* ========================================================================== FOOTER (ARCHITECTURAL DEEP CHARCOAL) ========================================================================== */ .site-footer { background: var(--charcoal-950); color: var(--text-muted-dark); padding: 80px 0 36px; border-top: 1px solid var(--charcoal-divider); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 64px; } @media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } } .footer-brand .footer-logo { max-height: 40px; width: auto; margin-bottom: 20px; display: block; } .footer-brand p { font-size: 0.88rem; line-height: 1.65; max-width: 320px; color: var(--text-muted-dark); } .footer-col h4 { color: var(--text-on-dark); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.8px; margin-bottom: 20px; position: relative; padding-bottom: 8px; } .footer-col h4::after { content: ''; position: absolute; bottom: 0; left: 0; width: 20px; height: 1.5px; background: var(--brass); } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; } .footer-col a { color: var(--text-muted-dark); font-size: 0.88rem; text-decoration: none; transition: color 0.2s ease; } .footer-col a:hover { color: var(--brass-light); } .footer-bottom { padding-top: 28px; border-top: 1px solid var(--charcoal-divider-subtle); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-size: 0.82rem; } .footer-legal { color: var(--text-muted-dark); letter-spacing: 0.4px; } /* ========================================================================== ARCHITECTURAL PROPERTY DETAIL PAGES (TOP-TIER INSTITUTIONAL CRE STANDARD) Interactive Focal Gallery, Specs Ribbon, Suite Matrix & Engineering Profile ========================================================================== */ .detail-header-block { background: var(--charcoal-900); color: var(--text-on-dark); padding: 48px 0 36px; border-bottom: 1px solid var(--charcoal-divider); } .detail-breadcrumbs { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted-dark); margin-bottom: 20px; } .detail-breadcrumbs a { color: var(--text-muted-dark); } .detail-breadcrumbs a:hover { color: var(--brass-light); } .detail-breadcrumbs span { color: var(--brass); } .detail-header-row { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 24px; } .detail-header-title h1 { font-family: var(--font-heading); font-size: clamp(2.2rem, 3.8vw, 3.2rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; color: var(--text-on-dark); margin: 8px 0 6px; } .detail-header-address { font-size: 1rem; color: var(--text-muted-dark); display: flex; align-items: center; gap: 8px; } .detail-header-address svg { color: var(--brass); flex-shrink: 0; } .detail-header-actions { display: flex; align-items: center; gap: 12px; } @media (max-width: 640px) { .detail-header-actions { width: 100%; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 12px; } .detail-header-actions .btn { width: 100%; text-align: center; justify-content: center; } } /* 1. Interactive Architectural Focal Gallery */ .gallery-section { padding: 36px 0 0; } .property-gallery-showcase { background: var(--canvas-card); border: 1px solid var(--stone-border); border-radius: var(--radius-xs); overflow: hidden; box-shadow: var(--shadow-card); } .gallery-focal-stage { position: relative; width: 100%; height: 520px; background: var(--charcoal-950); overflow: hidden; cursor: pointer; } @media (max-width: 960px) { .gallery-focal-stage { height: 380px; } } @media (max-width: 600px) { .gallery-focal-stage { height: 270px; } } .gallery-focal-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease, opacity 0.3s ease; } .gallery-focal-stage:hover .gallery-focal-img { transform: scale(1.015); } .gallery-stage-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 11, 13, 0.75) 0%, rgba(10, 11, 13, 0.05) 50%, rgba(10, 11, 13, 0.4) 100%); pointer-events: none; z-index: 2; } .gallery-stage-top-meta { position: absolute; top: 20px; left: 20px; right: 20px; display: flex; align-items: center; justify-content: space-between; z-index: 3; } .gallery-stage-bottom-meta { position: absolute; bottom: 20px; left: 24px; right: 24px; display: flex; align-items: flex-end; justify-content: space-between; z-index: 3; gap: 16px; } .gallery-caption-title { font-family: var(--font-heading); font-size: 1.45rem; font-weight: 600; color: #ffffff; line-height: 1.2; text-shadow: 0 2px 8px rgba(0,0,0,0.6); } .gallery-caption-sub { font-size: 0.8rem; color: var(--brass-light); letter-spacing: 1px; text-transform: uppercase; margin-top: 4px; text-shadow: 0 1px 4px rgba(0,0,0,0.6); } .gallery-expand-btn { display: inline-flex; align-items: center; gap: 8px; background: rgba(18, 20, 23, 0.85); border: 1px solid rgba(255, 255, 255, 0.25); color: #ffffff; padding: 8px 16px; border-radius: var(--radius-xs); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; backdrop-filter: blur(8px); cursor: pointer; transition: all 0.2s ease; } .gallery-expand-btn:hover { background: var(--charcoal-900); border-color: var(--brass); color: var(--brass-light); } .gallery-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; background: rgba(18, 20, 23, 0.75); border: 1px solid rgba(255, 255, 255, 0.2); color: #ffffff; font-size: 1.1rem; border-radius: var(--radius-xs); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 4; transition: all 0.2s ease; backdrop-filter: blur(4px); } .gallery-nav-btn:hover { background: var(--charcoal-900); border-color: var(--brass); color: var(--brass-light); } .gallery-nav-prev { left: 16px; } .gallery-nav-next { right: 16px; } /* Curated Thumbnail Track */ .gallery-thumbnail-track { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--canvas-subtle); border-top: 1px solid var(--stone-border); overflow-x: auto; white-space: nowrap; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .gallery-thumb-item { flex: 0 0 110px; height: 72px; position: relative; border-radius: var(--radius-xs); overflow: hidden; border: 2px solid transparent; cursor: pointer; background: var(--charcoal-900); transition: border-color 0.2s ease, opacity 0.2s ease; opacity: 0.65; } .gallery-thumb-item img { width: 100%; height: 100%; object-fit: cover; } .gallery-thumb-item:hover { opacity: 0.95; border-color: var(--stone-border-dark); } .gallery-thumb-item.is-active { opacity: 1; border-color: var(--brass); box-shadow: 0 0 0 1px var(--brass); } /* 2. Key Specs Architectural Ribbon */ .property-specs-ribbon { display: grid; grid-template-columns: repeat(6, 1fr); background: var(--canvas-card); border: 1px solid var(--stone-border); border-top: none; border-radius: 0 0 var(--radius-xs) var(--radius-xs); margin-bottom: 48px; } @media (max-width: 1100px) { .property-specs-ribbon { grid-template-columns: repeat(3, 1fr); } .property-specs-ribbon .ribbon-metric:nth-child(3n) { border-right: none; } } @media (max-width: 600px) { .gallery-stage-top-meta { top: 12px; left: 12px; right: 12px; gap: 8px; } .gallery-stage-bottom-meta { bottom: 12px; left: 14px; right: 14px; gap: 10px; } .gallery-caption-title { font-size: 1.15rem; } .gallery-caption-sub { font-size: 0.72rem; } .gallery-expand-btn { padding: 6px 10px; font-size: 0.7rem; } .property-specs-ribbon { grid-template-columns: repeat(2, 1fr); margin-bottom: 32px; } .property-specs-ribbon .ribbon-metric { padding: 14px 12px; border-bottom: 1px solid var(--stone-border); } .property-specs-ribbon .ribbon-metric:nth-child(5), .property-specs-ribbon .ribbon-metric:nth-child(6) { border-bottom: none; } .property-specs-ribbon .ribbon-metric:nth-child(2n) { border-right: none; } .ribbon-metric-val { font-size: 1.12rem; } .ribbon-metric-lbl { font-size: 0.68rem; } } .ribbon-metric { padding: 20px 18px; border-right: 1px solid var(--stone-border); display: flex; flex-direction: column; justify-content: center; } .ribbon-metric:last-child { border-right: none; } .ribbon-metric-val { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 600; color: var(--charcoal-900); line-height: 1.15; } .ribbon-metric-lbl { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); margin-top: 4px; } /* 3. Structured Editorial Layout Grid (68% Main / 32% Sidebar) */ .property-editorial-grid { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: 48px; align-items: start; margin-bottom: 80px; } @media (max-width: 992px) { .property-editorial-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } } .property-main-col { display: flex; flex-direction: column; gap: 48px; min-width: 0; max-width: 100%; } .property-side-col { min-width: 0; max-width: 100%; } /* Structured Article Box */ .editorial-article-box { background: var(--canvas-card); border: 1px solid var(--stone-border); border-radius: var(--radius-xs); padding: 40px 36px; min-width: 0; max-width: 100%; box-sizing: border-box; overflow: hidden; } @media (max-width: 600px) { .editorial-article-box { padding: 24px 16px; } } .box-heading-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--stone-border-light); } .box-title { font-family: var(--font-heading); font-size: 1.7rem; font-weight: 600; color: var(--charcoal-900); line-height: 1.2; } .box-tag { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--brass-dark); } .editorial-text { font-size: 1rem; line-height: 1.72; color: var(--text-secondary); margin-bottom: 18px; } .editorial-text:last-child { margin-bottom: 0; } /* Suite Availability Matrix Table */ .table-responsive { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 8px; border-radius: var(--radius-xs); display: block; } .suite-matrix-table { width: 100%; min-width: 540px; border-collapse: collapse; } .suite-matrix-table th { background: var(--canvas-subtle); color: var(--charcoal-800); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.9px; padding: 14px 18px; border-bottom: 1px solid var(--stone-border); text-align: left; } .suite-matrix-table td { padding: 16px 18px; border-bottom: 1px solid var(--stone-border-light); font-size: 0.9rem; color: var(--charcoal-900); vertical-align: middle; } .suite-matrix-table tr.row-available { background: rgba(45, 106, 79, 0.02); } .suite-matrix-table tr:hover td { background: rgba(184, 151, 88, 0.04); } .suite-matrix-table .suite-title-bold { font-weight: 700; font-size: 0.98rem; color: var(--charcoal-900); } .suite-matrix-table .suite-inclusions { font-size: 0.78rem; color: var(--text-secondary); display: block; margin-top: 3px; } .suite-matrix-table .suite-sf-metric { font-family: var(--font-heading); font-weight: 600; font-size: 1.05rem; color: var(--charcoal-900); } @media (max-width: 680px) { .suite-matrix-table th:nth-child(2), .suite-matrix-table td:nth-child(2) { display: none; } } /* Engineering & MEP Specifications 2-Column Grid */ .mep-spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; } @media (max-width: 680px) { .mep-spec-grid { grid-template-columns: 1fr; } } .mep-spec-card { background: var(--canvas-subtle); border: 1px solid var(--stone-border); border-radius: var(--radius-xs); padding: 20px; display: flex; flex-direction: column; } .mep-spec-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .mep-icon { width: 32px; height: 32px; background: var(--charcoal-900); color: var(--brass-light); border-radius: var(--radius-xs); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .mep-title { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--charcoal-900); } .mep-desc { font-size: 0.86rem; line-height: 1.55; color: var(--text-secondary); } /* Location Context Module */ .location-map-wrap { height: 340px; border-radius: var(--radius-xs); overflow: hidden; border: 1px solid var(--stone-border); margin: 16px 0 24px; } .location-map-wrap iframe { width: 100%; height: 100%; border: 0; } .landmarks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 640px) { .landmarks-grid { grid-template-columns: 1fr; } } .landmark-item { border-left: 2px solid var(--brass); padding-left: 12px; } .landmark-dist { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 600; color: var(--charcoal-900); } .landmark-name { font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-top: 2px; } /* 4. Sticky Sidebar & Leasing Officer Profile */ .property-side-col { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 24px; } .leasing-officer-card { background: var(--canvas-card); border: 1px solid var(--stone-border); border-radius: var(--radius-xs); padding: 32px 28px; box-shadow: var(--shadow-card); position: relative; } .leasing-officer-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--brass); } .officer-badge { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--brass-dark); margin-bottom: 6px; } .officer-title { font-family: var(--font-heading); font-size: 1.45rem; font-weight: 600; color: var(--charcoal-900); margin-bottom: 4px; } .officer-subtitle { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--stone-border-light); } .officer-contact-list { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; } .officer-contact-item { display: flex; align-items: center; gap: 12px; font-size: 0.92rem; color: var(--charcoal-900); } .officer-contact-item svg { color: var(--brass); flex-shrink: 0; } .officer-contact-item a { font-weight: 600; color: var(--charcoal-900); } .officer-contact-item a:hover { color: var(--brass-dark); } /* Quick Tour Schedule in Sidebar */ .sidebar-tour-box { background: var(--canvas-subtle); border: 1px solid var(--stone-border); border-radius: var(--radius-xs); padding: 20px; margin-top: 20px; } .sidebar-tour-box h4 { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--charcoal-900); margin-bottom: 8px; } .sidebar-tour-box p { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5; margin-bottom: 14px; } /* ========================================================================== FULLSCREEN GALLERY LIGHTBOX ========================================================================== */ .lightbox-modal { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; padding: 24px; } .lightbox-modal.is-visible { display: flex !important; } .lightbox-modal .lightbox-overlay { position: absolute; inset: 0; background: rgba(10, 11, 13, 0.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .lightbox-modal .lightbox-content { position: relative; z-index: 2; max-width: 1100px; width: 100%; max-height: 90vh; display: flex; flex-direction: column; align-items: center; justify-content: center; } .lightbox-modal .lightbox-img { max-width: 100%; max-height: 75vh; object-fit: contain; border-radius: var(--radius-xs); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8); border: 1px solid var(--charcoal-700); } .lightbox-modal .lightbox-caption { margin-top: 16px; color: var(--text-on-dark); font-size: 0.95rem; font-weight: 500; text-align: center; letter-spacing: 0.5px; } .lightbox-modal .lightbox-close { position: absolute; top: -46px; right: 0; background: transparent; border: none; color: var(--text-on-dark); font-size: 2.2rem; cursor: pointer; line-height: 1; padding: 4px 8px; transition: color 0.2s ease; } .lightbox-modal .lightbox-close:hover { color: var(--brass-light); } .lightbox-modal .lightbox-prev, .lightbox-modal .lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(18, 20, 23, 0.85); border: 1px solid var(--charcoal-700); color: var(--text-on-dark); width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.2rem; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; z-index: 3; } .lightbox-modal .lightbox-prev { left: -24px; } .lightbox-modal .lightbox-next { right: -24px; } .lightbox-modal .lightbox-prev:hover, .lightbox-modal .lightbox-next:hover { background: var(--charcoal-900); border-color: var(--brass); color: var(--brass-light); } body.lightbox-open { overflow: hidden; } @media (max-width: 768px) { .lightbox-modal .lightbox-prev { left: 8px; } .lightbox-modal .lightbox-next { right: 8px; } .lightbox-modal .lightbox-close { top: -40px; } }