:root { --green: #123c2a; --green-dark: #0c2b1e; --cream: #f3f0e8; --paper: #faf9f5; --black: #151713; --gray: #777a72; --line: #d8d8ce; --white: #ffffff; --serif: "Instrument Serif", Georgia, serif; --sans: "DM Sans", sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--paper); color: var(--black); font-family: var(--sans); overflow-x: hidden; } body.no-scroll { overflow: hidden; } img { display: block; width: 100%; } a { text-decoration: none; color: inherit; } button, input, select { font: inherit; } button { cursor: pointer; } /* ========================================== LOADER ========================================== */ .loader { position: fixed; inset: 0; background: var(--green-dark); color: white; z-index: 9999; display: grid; place-items: center; transition: opacity .7s ease, visibility .7s ease; } .loader.hide { opacity: 0; visibility: hidden; } .loader-inner { text-align: center; animation: loaderPulse 1.3s ease infinite alternate; } .loader-inner span { display: block; font-family: var(--serif); font-size: 75px; } .loader-inner p { font-size: 9px; letter-spacing: 4px; text-transform: uppercase; } @keyframes loaderPulse { from { opacity: .35; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } /* ========================================== HEADER ========================================== */ .header { position: fixed; width: 100%; top: 0; left: 0; z-index: 1000; color: white; transition: background .4s ease, color .4s ease; } .header.scrolled { background: rgba(250,249,245,.96); color: var(--black); border-bottom: 1px solid var(--line); } .nav-wrapper { height: 82px; max-width: 1500px; margin: auto; padding: 0 5%; display: flex; justify-content: space-between; align-items: center; } .brand { display: flex; align-items: center; gap: 10px; } .brand-symbol { width: 36px; height: 36px; border: 1px solid currentColor; display: grid; place-items: center; font-family: var(--serif); font-size: 20px; } .brand-name { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; line-height: 1; } .brand-name small { display: block; font-size: 7px; letter-spacing: 3px; margin-top: 5px; opacity: .7; } .navigation { display: flex; align-items: center; gap: 34px; } .navigation > a { font-size: 11px; font-weight: 500; position: relative; } .navigation > a:not(.nav-action)::after { content: ""; position: absolute; left: 0; bottom: -7px; width: 0; height: 1px; background: currentColor; transition: width .3s ease; } .navigation > a:not(.nav-action):hover::after { width: 100%; } .nav-action { padding: 12px 17px; border: 1px solid currentColor; transition: .3s ease; } .nav-action:hover { background: var(--green); color: white; border-color: var(--green); } .nav-action span { margin-left: 18px; } .menu-toggle { display: none; width: 40px; height: 40px; background: transparent; border: 1px solid currentColor; } .menu-toggle span { width: 18px; height: 1px; background: currentColor; display: block; margin: 4px auto; } /* ========================================== HERO ========================================== */ .hero { height: 100vh; min-height: 720px; position: relative; color: white; overflow: hidden; } .hero-background { position: absolute; inset: 0; } .hero-background img { height: 100%; object-fit: cover; transform: scale(1.06); animation: heroZoom 2.5s ease forwards; } @keyframes heroZoom { to { transform: scale(1); } } .hero-overlay { position: absolute; inset: 0; background: rgba(8,27,18,.42); } .hero-content { position: absolute; z-index: 2; left: 8%; bottom: 17%; max-width: 800px; } .hero-topline { display: flex; align-items: center; gap: 13px; font-size: 9px; letter-spacing: 2px; font-weight: 600; margin-bottom: 25px; } .hero-topline span { width: 35px; height: 1px; background: white; } .hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(75px, 10vw, 150px); line-height: .78; letter-spacing: -5px; } .hero h1 i { font-weight: 400; } .hero-content > p { max-width: 430px; font-size: 13px; line-height: 1.8; margin: 35px 0; color: rgba(255,255,255,.82); } .hero-cta { display: inline-flex; align-items: center; gap: 35px; border-bottom: 1px solid white; padding-bottom: 10px; font-size: 11px; font-weight: 600; transition: gap .3s ease; } .hero-cta:hover { gap: 50px; } .hero-bottom { position: absolute; z-index: 2; left: 5%; right: 5%; bottom: 35px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; } .hero-location { display: flex; align-items: center; gap: 12px; } .location-dot { width: 8px; height: 8px; background: white; border-radius: 50%; } .hero-location small, .hero-location strong { display: block; } .hero-location small { font-size: 8px; text-transform: uppercase; letter-spacing: 1px; opacity: .65; margin-bottom: 4px; } .hero-location strong { font-size: 11px; } .hero-scroll { justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 9px; } .hero-scroll span, .hero-year { font-size: 8px; letter-spacing: 2px; } .hero-scroll i { width: 1px; height: 35px; background: white; animation: scrollLine 1.5s ease infinite; } @keyframes scrollLine { 0%, 100% { transform: scaleY(.5); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } } .hero-year { justify-self: end; } /* ========================================== SEARCH ========================================== */ .search-wrap { position: relative; z-index: 10; margin-top: -55px; padding: 0 7%; } .property-search { max-width: 1250px; margin: auto; min-height: 110px; background: var(--paper); display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 110px; align-items: stretch; box-shadow: 0 20px 60px rgba(0,0,0,.15); } .search-heading { padding: 25px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--line); } .search-heading span { color: var(--green); font-size: 9px; margin-bottom: 8px; } .search-heading strong { font-family: var(--serif); font-size: 22px; font-weight: 400; } .search-field { padding: 25px; border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; } .search-field label { font-size: 8px; letter-spacing: 1.5px; color: var(--gray); margin-bottom: 8px; } .search-field select, .search-field input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--black); font-size: 12px; } .search-submit { border: 0; background: var(--green); color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; transition: background .3s ease; } .search-submit:hover { background: var(--green-dark); } .search-submit span { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; } .search-submit b { font-size: 20px; font-weight: 400; } /* ========================================== COMMON ========================================== */ .section { max-width: 1500px; margin: auto; padding: 150px 7%; } .section-label { font-size: 9px; letter-spacing: 2px; color: var(--green); font-weight: 700; } h2 { font-family: var(--serif); font-size: clamp(55px, 6vw, 90px); line-height: .9; font-weight: 400; letter-spacing: -2px; } h2 em { color: var(--green); font-weight: 400; } /* ========================================== INTRO ========================================== */ .intro { display: grid; grid-template-columns: 100px 1.4fr 1fr; gap: 50px; align-items: start; } .intro-number { font-size: 9px; color: var(--gray); letter-spacing: 1px; } .intro-main h2 { margin-top: 22px; max-width: 800px; } .intro-text { padding-top: 50px; } .intro-text p { font-size: 14px; line-height: 1.9; color: var(--gray); max-width: 400px; } .intro-text a { display: inline-flex; gap: 30px; margin-top: 30px; border-bottom: 1px solid var(--black); padding-bottom: 7px; font-size: 10px; font-weight: 700; } /* ========================================== PROPERTIES ========================================== */ .properties { padding-top: 50px; } .section-header { display: flex; justify-content: space-between; align-items: end; margin-bottom: 55px; } .section-header h2 { margin-top: 20px; } .property-filter { display: flex; gap: 7px; } .filter { border: 1px solid var(--line); background: transparent; padding: 10px 16px; font-size: 9px; text-transform: uppercase; transition: .3s ease; } .filter:hover, .filter.active { background: var(--green); color: white; border-color: var(--green); } .properties-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 70px 22px; } .property-card { transition: opacity .4s ease, transform .5s ease; } .property-card.large { grid-row: span 1; } .card-image { height: 520px; position: relative; overflow: hidden; } .property-card:not(.large) .card-image { height: 420px; } .card-image img { height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.7,.2,1); } .property-card:hover .card-image img { transform: scale(1.045); } .card-number { position: absolute; left: 20px; top: 20px; width: 38px; height: 38px; display: grid; place-items: center; background: white; font-size: 9px; } .heart { position: absolute; top: 20px; right: 20px; width: 38px; height: 38px; border: 0; background: white; font-size: 19px; transition: .3s; } .heart:hover, .heart.saved { background: var(--green); color: white; } .card-content { padding-top: 20px; } .card-meta { display: flex; justify-content: space-between; color: var(--gray); font-size: 8px; letter-spacing: 1.5px; } .card-meta span:first-child { color: var(--green); font-weight: 700; } .card-content h3 { font-family: var(--serif); font-weight: 400; font-size: 38px; line-height: .95; margin: 17px 0 25px; } .card-content h3 em { color: var(--green); font-weight: 400; } .card-bottom { display: flex; align-items: end; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 15px; } .card-bottom small { display: block; font-size: 8px; letter-spacing: 1px; color: var(--gray); margin-bottom: 5px; } .card-bottom strong { font-size: 15px; } .view-btn { border: 0; background: none; font-size: 9px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; } .view-btn span { margin-left: 15px; font-size: 15px; } .view-all { display: flex; justify-content: center; margin-top: 90px; } .view-all a { border-bottom: 1px solid var(--black); padding-bottom: 8px; font-size: 10px; font-weight: 700; } .view-all span { margin-left: 30px; } /* ========================================== IMAGE BREAK ========================================== */ .image-break { height: 750px; position: relative; overflow: hidden; color: white; } .image-break::after { content: ""; position: absolute; inset: 0; background: rgba(10,30,19,.32); } .image-break img { height: 100%; object-fit: cover; transition: transform 1.2s ease; } .image-break:hover img { transform: scale(1.03); } .image-break-text { position: absolute; z-index: 2; left: 8%; bottom: 9%; } .image-break-text > span { font-size: 9px; letter-spacing: 2px; } .image-break-text h2 { color: white; font-size: clamp(65px, 8vw, 120px); margin-top: 20px; } .round-arrow { position: absolute; left: 550px; bottom: 5px; width: 85px; height: 85px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; display: grid; place-items: center; font-size: 22px; } /* ========================================== COLLECTIONS ========================================== */ .collections { display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; } .collections-heading h2 { margin-top: 20px; } .collection-list { border-top: 1px solid var(--line); } .collection-item { display: grid; grid-template-columns: 70px 1fr 40px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--line); transition: padding .35s ease; } .collection-item:hover { padding-left: 15px; padding-right: 15px; background: var(--cream); } .collection-number { font-size: 9px; color: var(--gray); } .collection-title { font-family: var(--serif); font-size: 32px; } .collection-arrow { font-size: 20px; text-align: right; } /* ========================================== STORY ========================================== */ .story { background: var(--cream); display: grid; grid-template-columns: 1fr 1fr; min-height: 750px; } .story-image { overflow: hidden; } .story-image img { height: 100%; object-fit: cover; transition: transform 1s ease; } .story:hover .story-image img { transform: scale(1.03); } .story-content { padding: 120px 10%; display: flex; flex-direction: column; justify-content: center; } .story-content h2 { margin: 22px 0 35px; } .story-content p { max-width: 480px; color: var(--gray); font-size: 13px; line-height: 1.9; margin-bottom: 18px; } .story-content a { margin-top: 25px; font-size: 10px; font-weight: 700; width: fit-content; border-bottom: 1px solid var(--black); padding-bottom: 8px; } .story-content a span { margin-left: 25px; } /* ========================================== SELL ========================================== */ .sell { background: var(--green); color: white; padding: 150px 8%; } .sell-inner { max-width: 1000px; } .sell .section-label { color: #b6c9bb; } .sell h2 { margin: 25px 0; } .sell h2 em { color: white; } .sell p { color: #c4d0c7; max-width: 430px; font-size: 13px; line-height: 1.8; } .sell button { margin-top: 35px; border: 0; padding: 17px 23px; background: white; color: var(--green); font-size: 10px; font-weight: 700; transition: .3s ease; } .sell button:hover { transform: translateY(-4px); } .sell button span { margin-left: 35px; font-size: 17px; } /* ========================================== FOOTER ========================================== */ footer { background: var(--green-dark); color: white; padding: 90px 7% 25px; } .footer-main { max-width: 1500px; margin: auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 50px; } .footer-brand p { color: #8c9d91; font-size: 12px; margin-top: 25px; } .footer-column { display: flex; flex-direction: column; gap: 12px; } .footer-column > span { font-size: 8px; letter-spacing: 2px; color: #7f9185; margin-bottom: 8px; } .footer-column a { font-size: 11px; color: #c9d1cc; transition: color .2s; } .footer-column a:hover { color: white; } .footer-bottom { max-width: 1500px; margin: 90px auto 0; padding-top: 18px; border-top: 1px solid #2b4537; display: flex; justify-content: space-between; font-size: 8px; letter-spacing: 1px; color: #728379; } /* ========================================== MODAL ========================================== */ .modal { position: fixed; inset: 0; z-index: 5000; display: none; place-items: center; padding: 20px; } .modal.active { display: grid; } .modal-bg { position: absolute; inset: 0; background: rgba(8,20,13,.78); } .property-modal { position: relative; z-index: 2; background: var(--paper); width: min(650px,100%); padding: 60px; animation: modalOpen .4s ease; } @keyframes modalOpen { from { opacity: 0; transform: translateY(25px); } to { opacity: 1; transform: translateY(0); } } .modal-close { position: absolute; right: 25px; top: 20px; border: 0; background: none; font-size: 30px; } .property-modal h2 { font-size: 55px; margin: 20px 0 45px; } .modal-info { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); } .modal-info div { padding: 20px 0; border-bottom: 1px solid var(--line); } .modal-info small, .modal-info strong { display: block; } .modal-info small { font-size: 8px; color: var(--gray); letter-spacing: 1.5px; margin-bottom: 7px; } .modal-info strong { font-size: 13px; } .modal-contact { margin-top: 30px; background: var(--green); color: white; border: 0; padding: 16px 22px; font-size: 10px; font-weight: 700; } .modal-contact span { margin-left: 25px; } /* ========================================== RESPONSIVE ========================================== */ @media (max-width: 1000px) { .navigation { gap: 18px; } .hero h1 { font-size: 100px; } .property-search { grid-template-columns: 1fr 1fr; } .search-heading { display: none; } .search-field { border-bottom: 1px solid var(--line); } .search-submit { min-height: 70px; } .intro { grid-template-columns: 70px 1fr; } .intro-text { grid-column: 2; padding-top: 0; } .collections { grid-template-columns: 1fr; gap: 60px; } } @media (max-width: 750px) { .nav-wrapper { height: 70px; } .navigation { position: fixed; top: 70px; left: 0; width: 100%; background: var(--paper); color: var(--black); padding: 30px 6%; display: none; flex-direction: column; align-items: flex-start; border-bottom: 1px solid var(--line); } .navigation.active { display: flex; } .menu-toggle { display: block; } .hero { min-height: 650px; } .hero-content { left: 6%; right: 6%; bottom: 18%; } .hero h1 { font-size: 68px; letter-spacing: -3px; } .hero-bottom { left: 6%; right: 6%; grid-template-columns: 1fr 1fr; } .hero-scroll { display: none; } .hero-year { justify-self: end; } .search-wrap { padding: 0 5%; margin-top: -35px; } .property-search { grid-template-columns: 1fr; } .search-field { border-right: 0; } .section { padding: 100px 6%; } .intro { display: block; } .intro-number { margin-bottom: 30px; } .intro-text { margin-top: 40px; } .section-header { display: block; } .property-filter { margin-top: 30px; } .properties-grid { grid-template-columns: 1fr; gap: 55px; } .card-image, .property-card:not(.large) .card-image { height: 420px; } .image-break { height: 600px; } .image-break-text { left: 6%; } .round-arrow { display: none; } .story { grid-template-columns: 1fr; } .story-image { height: 500px; } .story-content { padding: 80px 7%; } .footer-main { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } .footer-bottom { display: block; line-height: 2.5; } } @media (max-width: 480px) { .hero h1 { font-size: 56px; } .hero-content > p { font-size: 12px; } h2 { font-size: 52px; } .card-content h3 { font-size: 32px; } .card-bottom { align-items: center; } .view-btn { font-size: 8px; } .collection-title { font-size: 25px; } .property-modal { padding: 40px 25px; } .property-modal h2 { font-size: 42px; } .footer-main { grid-template-columns: 1fr; } }