*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --navy: #0D1B2A; --slate: #1E3048; --steel: #2C4A6E; --gold: #C89B3C; --gold-lt: #E8BF6A; --cream: #F8F5EF; --white: #FFFFFF; --gray-1: #F2F2F0; --gray-2: #E0DDD8; --gray-3: #9A9590; --gray-4: #4A4740; --text: #2A2724; --green: #2D7A4F; --green-lt:#E8F4EE; } html { scroll-behavior: smooth; } body { font-family: 'Georgia', serif; background: var(--gray-1); color: var(--text); line-height: 1.7; min-height: 100vh; } /* NAV */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 0 48px; height: 72px; background: rgba(13,27,42,0.97); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(200,155,60,0.25); } .nav-logo { font-family: Arial, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--white); text-decoration: none; display: flex; align-items: center; gap: 12px; } .nav-logo-mark { width: 32px; height: 32px; background: var(--gold); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 900; color: var(--navy); border-radius: 2px; } .nav-links { display: flex; gap: 32px; list-style: none; } .nav-links a { font-family: Arial, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.7); text-decoration: none; transition: color 0.2s; } .nav-links a:hover, .nav-links a.active { color: var(--gold-lt); } .nav-cta { font-family: Arial, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--navy); background: var(--gold); padding: 10px 24px; text-decoration: none; border-radius: 2px; transition: background 0.2s; } .nav-cta:hover { background: var(--gold-lt); } /* PAGE HEADER */ .page-header { background: var(--navy); padding: 140px 80px 80px; position: relative; overflow: hidden; } .page-header::before { content: 'Contact'; position: absolute; right: -20px; top: 50%; transform: translateY(-50%); font-family: Georgia, serif; font-size: 260px; font-weight: 400; color: rgba(255,255,255,0.025); line-height: 1; pointer-events: none; white-space: nowrap; } .page-header-inner { max-width: 1200px; margin: 0 auto; position: relative; } .page-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: Arial, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: var(--gold-lt); margin-bottom: 16px; } .page-eyebrow::before { content: ''; display: block; width: 28px; height: 1px; background: var(--gold); } .page-header h1 { font-family: Georgia, serif; font-size: clamp(36px, 4vw, 56px); font-weight: 400; color: var(--white); line-height: 1.1; } .page-header h1 em { font-style: italic; color: var(--gold-lt); } .page-header-sub { font-family: Arial, sans-serif; font-size: 15px; color: rgba(255,255,255,0.6); margin-top: 16px; max-width: 520px; } /* MAIN LAYOUT */ .contact-layout { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 380px; gap: 48px; padding: 72px 80px 100px; align-items: start; } /* FORM CARD */ .form-card { background: var(--white); border-radius: 3px; padding: 48px; box-shadow: 0 4px 24px rgba(0,0,0,0.08); } .form-card-title { font-family: Georgia, serif; font-size: 26px; font-weight: 400; color: var(--navy); margin-bottom: 8px; } .form-card-sub { font-size: 14px; color: var(--gray-3); margin-bottom: 36px; font-family: Arial, sans-serif; } .f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } .f-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .f-group.half { margin-bottom: 0; } .f-group label { font-family: Arial, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gray-3); } .req { color: var(--gold); } .f-group input, .f-group select, .f-group textarea { border: 1px solid var(--gray-2); border-radius: 2px; padding: 11px 14px; font-family: Arial, sans-serif; font-size: 14px; color: var(--text); background: var(--white); transition: border-color 0.2s; outline: none; } .f-group input:focus, .f-group select:focus, .f-group textarea:focus { border-color: var(--gold); } .f-group input::placeholder, .f-group textarea::placeholder { color: var(--gray-2); } .f-group textarea { resize: vertical; min-height: 110px; } .conditional-fields { display: none; margin-bottom: 16px; border: 1px solid var(--gray-2); border-radius: 2px; padding: 20px 20px 4px; background: var(--gray-1); } .conditional-fields.visible { display: block; } .conditional-label { font-family: Arial, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; display: block; } /* Honeypot */ .hp { position:absolute; left:-9999px; top:-9999px; height:0; overflow:hidden; opacity:0; pointer-events:none; } .submit-btn { display: inline-flex; align-items: center; gap: 10px; font-family: Arial, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; padding: 15px 36px; background: var(--navy); color: var(--white); border: none; border-radius: 2px; cursor: pointer; transition: background 0.2s; margin-top: 8px; width: 100%; justify-content: center; } .submit-btn:hover:not(:disabled) { background: var(--slate); } .submit-btn:disabled { opacity: 0.6; cursor: not-allowed; } .form-status { margin-top: 14px; padding: 12px 16px; border-radius: 2px; font-family: Arial, sans-serif; font-size: 13px; font-weight: 600; display: none; } .form-status.success { background: var(--green-lt); color: var(--green); display: block; } .form-status.error { background: #fdecea; color: #c0392b; display: block; } /* SIDEBAR */ .sidebar { display: flex; flex-direction: column; gap: 20px; } .info-card { background: var(--white); border-radius: 3px; padding: 28px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); } .info-card-label { font-family: Arial, sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; display: block; } .info-card h3 { font-family: Georgia, serif; font-size: 18px; font-weight: 400; color: var(--navy); margin-bottom: 10px; } .info-card p { font-family: Arial, sans-serif; font-size: 14px; color: var(--gray-4); line-height: 1.6; margin-bottom: 8px; } .info-card p:last-child { margin-bottom: 0; } .info-row { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--gray-2); } .info-row:last-child { border-bottom: none; padding-bottom: 0; } .info-row:first-child { padding-top: 0; } .info-row-icon { width: 36px; height: 36px; background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 2px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; } .info-row-lbl { font-family: Arial, sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 3px; } .info-row-val { font-family: Arial, sans-serif; font-size: 14px; color: var(--gray-4); line-height: 1.4; } .suite-chip { display: inline-flex; align-items: center; gap: 8px; font-family: Arial, sans-serif; font-size: 12px; font-weight: 600; padding: 8px 14px; border-radius: 2px; margin: 4px 4px 4px 0; text-decoration: none; } .suite-chip.available { background: var(--green-lt); color: var(--green); border: 1px solid rgba(45,122,79,0.2); } .suite-chip.occupied { background: var(--gray-1); color: var(--gray-3); border: 1px solid var(--gray-2); } /* FOOTER */ footer { background: #080F17; padding: 28px 80px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .footer-logo { font-family: Arial, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,0.35); } .footer-logo span { color: var(--gold); } .footer-note { font-family: Arial, sans-serif; font-size: 11px; color: rgba(255,255,255,0.25); } /* RESPONSIVE */ @media (max-width: 900px) { nav { padding: 0 24px; } .nav-links { display: none; } .page-header { padding: 120px 24px 60px; } .contact-layout { grid-template-columns: 1fr; padding: 48px 24px 80px; } .form-card { padding: 28px; } .f-row { grid-template-columns: 1fr; } footer { padding: 24px; flex-direction: column; text-align: center; } } /* Conditional fields */ .conditional-fields { display: none; border: 1px solid var(--gray-2); border-radius: 2px; padding: 24px 24px 8px; background: var(--gray-1); margin-bottom: 16px; } .conditional-fields.visible { display: block; } .conditional-heading { font-family: Georgia, serif; font-size: 15px; font-weight: 400; color: var(--navy); margin-bottom: 20px; border-bottom: 1px solid var(--gray-2); padding-bottom: 12px; } .optional-label { font-family: Arial, sans-serif; font-size: 12px; color: var(--gray-3); font-weight: 400; } .f-row-3 { grid-template-columns: 1fr 1fr 1fr; } @media (max-width: 700px) { .f-row-3 { grid-template-columns: 1fr; } }
Downtown Abbotsford Offices

Get in Touch

Viewing requests, leasing inquiries, general questions — we're happy to help. Fill out the form and we'll respond promptly.

Send Us a Message

All fields marked * are required. We typically respond within one business day.

Help us prepare for your inquiry (all optional)