:root { --blue: #1376de; --blue-deep: #0b4f9b; --ink: #1b2a3a; --slate: #526273; --pale: #f3f7fb; --line: #e3eaf2; --orange: #fa7b28; }
* { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--ink); background: #fff; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } a { color: inherit; text-decoration: none; } button, input { font: inherit; }
.site-header { position: sticky; z-index: 30; top: 0; display: flex; min-height: 72px; padding: 0 clamp(20px, 5vw, 88px); align-items: center; gap: clamp(22px, 3.1vw, 52px); border-bottom: 1px solid #edf1f5; background: rgba(255,255,255,.98); box-shadow: 0 2px 14px rgba(14, 49, 79, .035); backdrop-filter: blur(10px); }.brand { display: block; flex: none; }.brand img { display: block; width: 142px; height: auto; }.main-nav { display: flex; align-self: stretch; align-items: center; gap: clamp(17px, 2.25vw, 38px); }.main-nav a { display: inline-flex; align-items: center; gap: 5px; color: #405163; font-size: 14px; font-weight: 650; white-space: nowrap; }.main-nav a:hover { color: var(--blue); }.main-nav span { color: #93a2b2; font-size: 16px; }.header-actions { display: flex; margin-left: auto; align-items: center; gap: 20px; }.publish-button { padding: 10px 13px; color: var(--blue); border: 1px solid #bdd8f4; border-radius: 7px; font-size: 13px; font-weight: 730; white-space: nowrap; }.publish-button:hover { border-color: var(--blue); background: #f3f8ff; }.login-link { display: inline-flex; align-items: center; gap: 6px; color: #405163; font-size: 13px; font-weight: 680; white-space: nowrap; }.login-link i { color: var(--blue); font-style: normal; font-size: 17px; }.menu-button { display: none; padding: 6px 0; border: 0; background: transparent; }.menu-button i { display: block; width: 23px; height: 2px; margin: 4px; background: #2e4356; }.mobile-menu { position: fixed; z-index: 29; top: 72px; right: 14px; left: 14px; padding: 9px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 14px 35px rgba(11,50,83,.16); }.mobile-menu a { display: block; padding: 12px; border-radius: 7px; color: #304355; font-size: 14px; font-weight: 670; }.mobile-menu a:hover { color: var(--blue); background: #f1f7ff; }
.hero { position: relative; min-height: clamp(510px, 49vw, 650px); overflow: hidden; color: #fff; background: linear-gradient(120deg, #104d8f, #1077d7 62%, #39a0ed); isolation: isolate; }.hero-texture { position: absolute; z-index: -2; inset: 0; background: radial-gradient(circle at 13% 8%, rgba(144,216,255,.45), transparent 26%), radial-gradient(circle at 89% 93%, rgba(7, 50, 125, .55), transparent 34%); }.hero-texture::after { content: ""; position: absolute; inset: 0; opacity: .42; background-image: linear-gradient(45deg, rgba(255,255,255,.06) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,.06) 25%, transparent 25%); background-size: 42px 42px; }.hero-content { position: relative; z-index: 2; width: min(92%, 1000px); margin: 0 auto; padding: clamp(64px, 7vw, 110px) 0 70px; text-align: center; }.hero-kicker { margin: 0 0 13px; color: #bae6ff; font-size: 11px; font-weight: 800; letter-spacing: .12em; }.hero h1 { margin: 0; font-size: clamp(36px, 4.8vw, 67px); line-height: .99; letter-spacing: -.06em; }.hero-copy { margin: 15px auto 29px; color: rgba(255,255,255,.83); font-size: clamp(15px, 1.35vw, 18px); }.property-search { max-width: 900px; margin: 0 auto; overflow: hidden; color: var(--ink); border-radius: 12px; background: #fff; box-shadow: 0 18px 45px rgba(3, 34, 84, .27); text-align: left; }.search-tabs { display: flex; padding: 0 21px; gap: 24px; border-bottom: 1px solid var(--line); }.search-tabs button { position: relative; min-height: 53px; padding: 0; color: #647384; border: 0; background: transparent; font-size: 14px; font-weight: 740; cursor: pointer; }.search-tabs button.active { color: var(--blue); }.search-tabs button.active::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--blue); }.search-fields { display: grid; padding: 16px; grid-template-columns: minmax(210px, .82fr) minmax(250px, 1.4fr) auto; gap: 10px; }.property-type, .location-field { display: flex; min-height: 49px; padding: 0 14px; align-items: center; color: #657385; border: 1px solid #dce5ed; border-radius: 7px; background: #fff; font-size: 13px; text-align: left; }.property-type { justify-content: space-between; cursor: pointer; }.property-type span { color: #90a0af; font-size: 17px; }.location-field { gap: 8px; }.location-field span { color: var(--blue); font-size: 20px; }.location-field input { width: 100%; min-width: 0; color: var(--ink); border: 0; outline: 0; font-size: 13px; }.location-field input::placeholder { color: #9ba6b2; }.search-button { min-width: 108px; color: #fff; border: 0; border-radius: 7px; background: var(--blue); font-size: 14px; font-weight: 740; cursor: pointer; }.search-button:hover { background: #0867c8; }.code-link { display: inline-block; margin: 0 18px 17px; color: var(--blue); font-size: 12px; font-weight: 700; }.code-link span { margin-left: 4px; }.hero-homes { position: absolute; z-index: 1; right: -50px; bottom: -110px; width: min(41vw, 565px); height: 395px; opacity: .72; transform: rotate(-5deg); }.home-card { position: absolute; overflow: hidden; margin: 0; border: 7px solid rgba(255,255,255,.42); border-radius: 13px; box-shadow: 0 18px 30px rgba(0, 25, 68, .28); }.home-card img { display: block; width: 100%; height: 100%; object-fit: cover; }.home-one { width: 220px; height: 245px; top: 5px; left: 25px; transform: rotate(5deg); }.home-two { width: 240px; height: 190px; top: 78px; right: 0; transform: rotate(8deg); }.home-three { width: 205px; height: 165px; bottom: 0; left: 98px; transform: rotate(-4deg); }
.listings-section, .projects-section, .cities-section { max-width: 1260px; margin: 0 auto; padding: clamp(54px, 7vw, 96px) clamp(20px, 5vw, 70px); }.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; margin-bottom: 25px; }.section-heading p, .cities-section > p, .app-copy > p { margin: 0 0 8px; color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .13em; }.section-heading h2, .cities-section h2, .app-copy h2 { margin: 0; color: var(--ink); font-size: clamp(27px, 3vw, 39px); letter-spacing: -.05em; }.all-link { padding-bottom: 3px; color: var(--blue); font-size: 13px; font-weight: 750; white-space: nowrap; }.all-link span { margin-left: 4px; font-size: 18px; }.listing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }.listing-card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 7px 20px rgba(20, 52, 79, .05); transition: box-shadow .2s ease, transform .2s ease; }.listing-card:hover { box-shadow: 0 14px 28px rgba(10, 78, 148, .13); transform: translateY(-3px); }.listing-photo { position: relative; display: block; overflow: hidden; aspect-ratio: 1.33 / 1; background: #e7edf4; }.listing-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }.listing-photo:hover img { transform: scale(1.04); }.listing-label { position: absolute; top: 11px; left: 11px; padding: 5px 8px; color: #fff; border-radius: 5px; background: rgba(16, 57, 91, .85); font-size: 10px; font-weight: 750; }.photo-count { position: absolute; right: 11px; bottom: 10px; padding: 4px 7px; color: #fff; border-radius: 4px; background: rgba(11, 37, 63, .68); font-size: 10px; font-weight: 700; }.listing-info { min-height: 158px; padding: 15px 44px 16px 16px; }.listing-info strong { color: #172c41; font-size: 17px; }.listing-info h3 { display: -webkit-box; min-height: 38px; margin: 9px 0 6px; overflow: hidden; color: #304559; font-size: 13px; line-height: 1.38; font-weight: 720; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }.listing-info p { margin: 0; overflow: hidden; color: #7d8c9a; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.facts { display: flex; margin-top: 13px; gap: 9px; color: #677888; font-size: 11px; font-weight: 650; }.facts span + span { padding-left: 9px; border-left: 1px solid #d5dee7; }.heart { position: absolute; right: 15px; bottom: 20px; color: #6d8194; font-size: 27px; line-height: 1; }.heart:hover { color: var(--blue); }
.projects-section { padding-top: 0; }.project-intro { max-width: 600px; margin: -11px 0 25px; color: var(--slate); font-size: 14px; line-height: 1.5; }.project-banner { display: flex; min-height: 260px; padding: 42px clamp(26px, 5vw, 70px); align-items: center; justify-content: space-between; gap: 32px; overflow: hidden; color: #fff; border-radius: 16px; background: radial-gradient(circle at 77% 18%, rgba(126,202,255,.45), transparent 21%), linear-gradient(122deg, #10385f, #0b66bd 63%, #197cde); }.project-tag { display: inline-block; padding: 6px 9px; color: #144d82; border-radius: 5px; background: #fff; font-size: 10px; font-weight: 850; letter-spacing: .08em; }.project-banner h3 { margin: 14px 0 8px; font-size: clamp(26px, 2.9vw, 39px); line-height: 1; letter-spacing: -.05em; }.project-banner p { margin: 0 0 20px; color: rgba(255,255,255,.78); font-size: 14px; }.light-button, .store-button { display: inline-flex; min-height: 42px; padding: 0 16px; align-items: center; gap: 9px; color: var(--blue); border-radius: 6px; background: #fff; font-size: 13px; font-weight: 760; }.light-button b { font-size: 17px; }.project-stats { display: flex; flex: none; gap: 36px; }.project-stats p { display: flex; margin: 0; flex-direction: column; gap: 3px; }.project-stats b { font-size: 30px; }.project-stats span { color: rgba(255,255,255,.74); font-size: 11px; }
.app-section { display: flex; min-height: 380px; padding: 0 max(5vw, calc((100vw - 1120px) / 2)); align-items: center; justify-content: space-between; gap: 45px; overflow: hidden; background: #eef7ff; }.app-copy { max-width: 535px; padding: 60px 0; }.app-copy h2 { max-width: 500px; margin-bottom: 20px; }.app-copy ul { display: grid; margin: 0 0 25px; padding: 0; gap: 10px; color: #546779; font-size: 13px; list-style: none; }.app-copy li { position: relative; padding-left: 21px; }.app-copy li::before { content: "✓"; position: absolute; left: 0; color: var(--blue); font-weight: 800; }.store-button { color: #fff; background: var(--blue); }.store-button:hover { background: #0867c8; }.store-button span { font-size: 18px; }.app-section > img { align-self: flex-end; width: min(260px, 27vw); margin-right: 12%; object-fit: contain; }
.cities-section { text-align: center; }.cities-section > span { display: block; max-width: 590px; margin: 14px auto 32px; color: var(--slate); font-size: 14px; line-height: 1.55; }.city-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: left; }.city-grid article { padding: 22px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }.city-grid h3 { margin: 0 0 14px; color: var(--blue); font-size: 17px; }.city-grid a { display: block; padding: 7px 0; color: #617284; border-top: 1px solid #edf0f3; font-size: 12px; }.city-grid a:hover { color: var(--blue); }
.site-footer { display: grid; padding: 46px max(5vw, calc((100vw - 1120px) / 2)) 25px; grid-template-columns: 2fr 1fr 1fr; gap: 42px; color: #5d6d7d; background: #162c42; }.footer-head img { display: block; width: 142px; height: auto; filter: brightness(0) invert(1); }.footer-head p { max-width: 260px; margin: 17px 0 0; color: #a8b6c3; font-size: 12px; line-height: 1.5; }.site-footer h3 { margin: 0 0 13px; color: #fff; font-size: 13px; }.site-footer > div:not(.footer-head) { display: flex; flex-direction: column; gap: 8px; }.site-footer > div:not(.footer-head) a { color: #adbac6; font-size: 12px; }.site-footer a:hover { color: #79bcff; }.copyright { grid-column: 1 / -1; margin: 0; padding-top: 20px; color: #8c9ba9; border-top: 1px solid rgba(255,255,255,.13); font-size: 11px; }
@media (max-width: 1000px) { .main-nav { gap: 17px; }.main-nav a { font-size: 12px; }.header-actions { gap: 11px; }.listing-grid { grid-template-columns: repeat(2, 1fr); }.hero-homes { right: -110px; opacity: .45; }.project-stats { gap: 18px; }.app-section > img { margin-right: 4%; } }
@media (max-width: 730px) { .site-header { min-height: 62px; padding-inline: 19px; }.brand img { width: 118px; }.main-nav, .header-actions { display: none; }.menu-button { display: block; margin-left: auto; }.mobile-menu { top: 62px; }.hero { min-height: 570px; }.hero-content { width: calc(100% - 32px); padding-top: 62px; text-align: left; }.hero h1 { font-size: clamp(39px, 11vw, 56px); }.hero-copy { margin-inline: 0; max-width: 355px; }.property-search { border-radius: 10px; }.search-tabs { padding-inline: 15px; gap: 18px; }.search-tabs button { min-height: 47px; font-size: 12px; }.search-fields { padding: 12px; grid-template-columns: 1fr; }.property-type, .location-field { min-height: 45px; }.search-button { min-height: 45px; }.code-link { margin: 0 13px 13px; }.hero-homes { right: -145px; bottom: -135px; opacity: .25; }.home-one { width: 185px; height: 205px; }.home-two { width: 190px; height: 150px; }.listing-grid { grid-template-columns: 1fr; }.listing-info { min-height: 145px; }.projects-section { padding-top: 0; }.project-banner { padding: 31px 25px; align-items: flex-start; flex-direction: column; }.project-stats { width: 100%; justify-content: space-between; }.app-section { min-height: 0; padding: 0 22px; align-items: flex-end; }.app-copy { padding: 50px 0; }.app-section > img { width: 145px; margin: 0 -24px 0 0; }.city-grid { grid-template-columns: repeat(2, 1fr); }.site-footer { padding: 39px 22px 24px; grid-template-columns: 1fr 1fr; gap: 30px; }.footer-head { grid-column: 1 / -1; }.copyright { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }