/* ========================================================================== BrightHaven Housing — site styles Rebuilt from the original HighLevel site. Each page carries its own palette + body typeface, applied via the page-* class. ========================================================================== */ /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; } img, picture, svg { display: block; max-width: 100%; } h1, h2, h3, h4, h5, p, ul, figure { margin: 0; } ul { list-style: none; padding: 0; } a { color: inherit; text-decoration: none; } button, input, textarea, select { font: inherit; color: inherit; } /* ---------- tokens ---------- */ :root { --serif: "Instrument Serif", Georgia, "Times New Roman", serif; --green: #4a5d4e; --nav-font: Urbanist, "Figtree", system-ui, sans-serif; --form-font: Inter, system-ui, sans-serif; --shell: 1170px; } /* Per-page palettes ------------------------------------------------------ */ .page-home { --font: Figtree, system-ui, sans-serif; --bg: #faf9f6; --accent: #c5a059; --ink: #1a1817; --muted: #6b655e; } .page-about { --font: "Inter Tight", system-ui, sans-serif; --bg: #f5f1e9; --accent: #9b7e6b; --ink: #2d2d2d; --muted: #6b6b6b; } .page-contact { --font: Figtree, system-ui, sans-serif; --bg: #fdfcf8; --accent: #a68a64; --ink: #2d2926; --muted: #706b63; --deep: #5e695e; } .page-request { --font: "Plus Jakarta Sans", system-ui, sans-serif; --bg: #fdfcfb; --accent: #b39276; --ink: #1f1f1f; --muted: #706b66; } .page-property { --font: Figtree, system-ui, sans-serif; --bg: #faf9f6; --accent: #af8c53; --ink: #2c2c2c; --muted: #6b6b6b; } body { font-family: var(--font); background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; } /* ---------- shared layout ---------- */ .section { padding: 60px 16px; position: relative; } .shell { max-width: var(--shell); margin: 0 auto; width: 100%; } .eyebrow { font-family: var(--font); font-size: 13px; line-height: 1.3; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .display { font-family: var(--serif); font-weight: 400; color: var(--ink); } .display em, .display .accent { font-style: italic; color: var(--accent); } .lede { font-family: var(--font); color: var(--muted); } /* buttons ---------------------------------------------------------------- */ .btn { display: inline-block; font-family: var(--font); font-size: 16px; font-weight: 500; line-height: 19px; color: #fff; text-align: center; padding: 16px 36px; border-radius: 8px; border: 0; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; } .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(45,41,38,.45); filter: brightness(1.04); } .btn--green { background: var(--green); } .btn--arrow { display: inline-flex; align-items: center; gap: 5px; } .btn--arrow svg { width: 14px; height: 14px; } .btn--accent { background: var(--accent); } /* ========================================================================== Header ========================================================================== */ .site-nav { background: #fff; border-bottom: 1px solid #e2c48f; padding: 0 72px; } .site-nav__inner { display: flex; align-items: center; padding: 20px 0; } .site-nav ul { display: flex; align-items: center; } .site-nav li { margin: 0 6px; } .site-nav a { display: block; font-family: var(--nav-font); font-size: 14px; line-height: 18.2px; font-weight: 400; text-transform: uppercase; color: #333233; padding: 8px 6px; border-radius: 2px; transition: background-color .2s ease, color .2s ease; } .site-nav a:hover, .site-nav a:focus-visible { background: var(--green); color: #fff; } .nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; } .nav-toggle span { display: block; width: 22px; height: 2px; background: #333233; margin: 4px 0; transition: transform .25s ease, opacity .2s ease; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } @media (max-width: 900px) { .site-nav { padding: 0 20px; } .site-nav__inner { justify-content: space-between; } .nav-toggle { display: block; } .site-nav ul { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; background: #fff; border-bottom: 1px solid #e2c48f; padding: 8px 20px 16px; z-index: 40; } .site-nav ul.is-open { display: flex; } .site-nav li { margin: 2px 0; } .site-nav a { padding: 12px 8px; } } /* ========================================================================== Hero (image-backed) ========================================================================== */ .hero { position: relative; overflow: hidden; padding: 100px 72px; } .hero__bg { position: absolute; inset: 0; background-size: cover; background-position: 50% 50%; pointer-events: none; } .hero__inner { position: relative; z-index: 1; } /* ========================================================================== Footer (identical across pages) ========================================================================== */ .site-footer { background: var(--green); padding: 40px 72px 0; } .site-footer__inner { max-width: var(--shell); margin: 0 auto; } .site-footer__cols { display: flex; gap: 40px; } .site-footer__col { display: flex; flex-direction: column; justify-content: space-between; min-height: 191px; } .site-footer__col--contact { justify-content: space-around; } .site-footer__col--brand { width: 350px; flex: 0 0 350px; } .site-footer__col--nav { width: 350px; flex: 0 0 350px; } .site-footer__col--contact { width: 390px; flex: 0 0 390px; } .site-footer img.footer-logo { width: 60px; height: 60px; } .site-footer h3 { font-family: var(--serif); font-size: 24px; line-height: 1.3; font-weight: 700; color: #fdfbf7; } .site-footer h4 { font-family: var(--serif); font-size: 18px; line-height: 1.3; font-weight: 700; color: #fdfbf7; } .site-footer p { font-family: var(--font); font-size: 15px; line-height: 24px; color: rgba(253,251,247,.8); } .site-footer__links { display: flex; flex-direction: column; gap: 20px; } .site-footer__links a { font-family: var(--font); font-size: 15px; line-height: 21px; color: rgba(253,251,247,.8); transition: color .2s ease; } .site-footer__links a:hover { color: #fff; } .site-footer__contact p { line-height: 21px; } .site-footer__contact a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .site-footer__contact a:hover { color: #fff; } .site-footer__bar { border-top: 1px solid rgba(253,251,247,.15); margin-top: 59px; padding: 11px 0 10px; } .site-footer__bar p { font-size: 14px; line-height: 18.2px; color: rgba(253,251,247,.5); text-align: center; } @media (max-width: 900px) { .site-footer { padding: 40px 20px 0; } .site-footer__cols { flex-direction: column; gap: 32px; } .site-footer__col { min-height: 0; gap: 12px; } .site-footer__col--brand, .site-footer__col--nav, .site-footer__col--contact { width: 100%; flex: 1 1 auto; } .site-footer__bar { margin-top: 32px; } } /* ========================================================================== HOME ========================================================================== */ .home-hero { background: #faf9f6; } .home-hero .hero__bg { background-image: url("../img/hero-home.webp"); opacity: .5; } .home-hero__inner { max-width: 864px; margin: 0 auto; text-align: center; } .home-hero .eyebrow { font-size: 12px; line-height: 1.3; letter-spacing: .16em; color: var(--accent); margin-bottom: 46px; } .home-hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(56px, 8vw, 110px); line-height: 1.05; letter-spacing: -.02em; color: #1a1817; } .home-hero h1 .accent { position: relative; display: inline-block; font-style: italic; color: var(--accent); } .home-hero h1 .accent::after { content: ""; position: absolute; left: 0; bottom: 4px; width: 100%; height: 3px; background: linear-gradient(90deg, #c5a059, #2d2926); border-radius: 2px; } .home-hero p.lede { max-width: 784px; margin: 0 auto; font-size: 20px; line-height: 32px; font-weight: 300; color: var(--muted); } /* the original headline sets line-height 1.05, which lets the last line sit fractionally under its own box; match that only where the type is large */ @media (min-width: 769px) { .home-hero p.lede { margin-top: -7px; } } @media (max-width: 768px) { .home-hero p.lede { margin-top: 20px; font-size: 18px; line-height: 29px; } } .home-hero__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 224px; margin-top: 48px; } @media (max-width: 900px) { .home-hero__actions { gap: 20px; } } /* Who we serve ----------------------------------------------------------- */ .serve { padding: 60px 0; } .serve__head { text-align: center; } .serve__head .eyebrow { font-size: 13px; line-height: 1.3; font-weight: 400; letter-spacing: .23em; margin-bottom: 16px; } .serve__head h2 { font-family: var(--serif); font-size: 72px; line-height: 1.1; letter-spacing: -.02em; margin-bottom: 61px; } .serve__head h2 em { font-style: italic; color: var(--accent); } .serve__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; max-width: var(--shell); margin: 0 auto; padding: 0 10px; } .serve__card { background: #fff; border: 1px solid #eae6de; border-radius: 8px; padding: 40px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; box-shadow: 0 4px 12px rgba(45,41,38,0); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .serve__card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px -12px rgba(45,41,38,.08); border-color: var(--accent); } .serve__icon { width: 48px; height: 48px; margin-bottom: 24px; padding: 12px; color: var(--accent); background: rgba(197,160,89,.05); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .serve__icon svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; } .serve__card h3 { font-family: var(--serif); font-size: 26px; line-height: 1.2; font-weight: 400; color: #1a1817; margin-bottom: 12px; } .serve__card p { font-size: 15px; line-height: 1.6; color: var(--muted); } @media (max-width: 1024px) { .serve__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .serve__grid { grid-template-columns: 1fr; padding: 0 20px; } .serve__card { padding: 32px 20px; } .serve__head h2 { font-size: clamp(40px, 11vw, 72px); margin-bottom: 40px; } } /* Philosophy ------------------------------------------------------------- */ .philosophy { text-align: center; } .philosophy .eyebrow { font-size: 13px; line-height: 1.3; font-weight: 700; letter-spacing: normal; margin-bottom: 24px; } .philosophy h2 { font-family: var(--serif); font-size: 76px; line-height: 1.1; margin-bottom: 58px; } .philosophy h2 em { font-style: italic; color: var(--accent); } .philosophy hr { border: 0; border-top: 1px solid #cbd5e0; margin: 0 0 58px; } .philosophy p { font-size: 20px; line-height: 36px; font-weight: 300; color: var(--ink); } .philosophy p + p { margin-top: 24px; } @media (max-width: 768px) { .philosophy h2 { font-size: clamp(38px, 10vw, 76px); margin-bottom: 36px; } .philosophy hr { margin-bottom: 36px; } .philosophy p { font-size: 18px; line-height: 30px; } } /* The BrightHaven Standard ----------------------------------------------- */ .standard__title { font-family: var(--serif); font-size: 72px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; text-align: center; color: #2d2926; text-transform: capitalize; } .standard__title em { font-style: italic; color: var(--accent); } .standard__row { display: flex; align-items: center; margin-top: 100px; } .standard__row:first-of-type { margin-top: 80px; } .standard__row--flip { flex-direction: row-reverse; } .standard__text { flex: 0 0 487px; max-width: 487px; padding: 70px 80px 24px 0; } .standard__row--flip .standard__text { padding: 70px 0 24px 80px; } .standard__media { flex: 1 1 auto; min-width: 0; } .standard__media img { width: 100%; height: auto; box-shadow: 0 12px 40px -12px rgba(45,41,38,.08); } .standard__text h3 { font-family: var(--serif); font-size: 32px; line-height: 1.2; font-weight: 700; color: #2d2926; margin-bottom: 20px; } .standard__text p { font-size: 18px; line-height: 28.8px; color: var(--muted); } @media (max-width: 900px) { .standard__title { font-size: clamp(40px, 11vw, 72px); } .standard__row, .standard__row--flip { flex-direction: column; margin-top: 56px; } .standard__row:first-of-type { margin-top: 48px; } .standard__text, .standard__row--flip .standard__text { flex: 1 1 auto; max-width: 100%; padding: 24px 0 0; } } /* Green CTA card --------------------------------------------------------- */ .cta-card { background: var(--green); border-radius: 8px; padding: 100px 60px; box-shadow: 0 20px 60px rgba(45,41,38,.15); text-align: center; } .cta-card .eyebrow { color: var(--accent); letter-spacing: .23em; margin-bottom: 16px; } .cta-card h2 { font-family: var(--serif); font-size: 72px; line-height: 1.1; letter-spacing: -.02em; color: #fff; margin-bottom: 24px; } .cta-card h2 em { font-style: italic; color: #fff; } .cta-card p.lede { max-width: 735px; margin: 0 auto 41px; font-size: 18px; line-height: 28.8px; color: rgba(255,255,255,.85); } .cta-card .fineprint { margin-top: 16px; font-size: 14px; line-height: 18.2px; color: rgba(255,255,255,.5); } @media (max-width: 768px) { .cta-card { padding: 56px 24px; } .cta-card h2 { font-size: clamp(38px, 10vw, 72px); } } /* ========================================================================== ABOUT ========================================================================== */ .page-about .about-hero { background: #fdfbf7; } .about-hero .hero__bg { background-image: url("../img/hero-about.webp"); opacity: .3; } .about-hero__inner { max-width: var(--shell); margin: 0 auto; text-align: center; } .about-hero .eyebrow { font-weight: 700; letter-spacing: .16em; color: var(--accent); margin-bottom: 54px; } .about-hero h1 { font-family: var(--serif); font-weight: 700; font-size: clamp(46px, 8vw, 110px); line-height: 1.04; color: #2d2d2d; } .about-hero h1 .accent { color: var(--accent); position: relative; display: inline-block; font-style: italic; } .about-hero h1 .accent::after { content: ""; position: absolute; left: 0; bottom: 2px; width: 100%; height: 3px; background: linear-gradient(90deg, #9b7e6b, #4a5d4e); border-radius: 2px; } .about-hero p { margin-top: 2px; font-size: 20px; line-height: 32px; color: var(--muted); } .about-hero .btn { margin-top: 40px; border-radius: 12px; padding: 16px 32px; font-weight: 600; } /* Founding story --------------------------------------------------------- */ .story { padding: 40px 16px; } .story__title { font-family: var(--serif); font-size: 80px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; text-align: center; color: var(--green); margin-bottom: 60px; } .story__title em { font-style: italic; color: var(--accent); } .story__row { display: flex; align-items: center; } .story__row + .story__row { margin-top: 100px; } .story__media { flex: 0 0 555px; max-width: 555px; } .story__media img { width: 615px; max-width: 111%; height: auto; } .story__card { flex: 0 0 615px; max-width: 615px; position: relative; z-index: 1; background: #fdfbf7; border-radius: 12px; padding: 60px; box-shadow: 0 12px 40px rgba(74,93,78,.08); display: flex; flex-direction: column; justify-content: space-between; min-height: 550px; } .story__row--flip { flex-direction: row-reverse; } .story__row--flip .story__media { display: flex; justify-content: flex-end; } .story__card h2 { font-family: var(--font); font-size: 13px; line-height: 1.3; font-weight: 700; letter-spacing: .155em; text-transform: uppercase; color: var(--accent); } .story__card p { font-size: 18px; line-height: 28.8px; color: #2d2d2d; } @media (max-width: 1024px) { .story__row, .story__row--flip { flex-direction: column; } .story__media, .story__card { flex: 1 1 auto; max-width: 100%; width: 100%; } .story__media img { width: 100%; max-width: 100%; border-radius: 12px; } .story__card { min-height: 0; margin-top: -40px; padding: 40px 28px; gap: 20px; } .story__row--flip .story__media { justify-content: flex-start; } .story__title { font-size: clamp(40px, 11vw, 80px); margin-bottom: 40px; } } /* Who we serve (list) ---------------------------------------------------- */ .serve-list { padding: 40px 0; } .serve-list__inner { display: flex; max-width: var(--shell); margin: 0 auto; gap: 80px; } .serve-list__intro { flex: 0 0 407px; max-width: 407px; display: flex; flex-direction: column; justify-content: space-evenly; } .serve-list__intro h2 { font-family: var(--serif); font-size: 72px; line-height: 1.1; letter-spacing: -.02em; color: #2d2d2d; } .serve-list__intro h2 em { font-style: italic; color: var(--accent); } .serve-list__intro p { font-size: 18px; line-height: 28.8px; color: var(--muted); } .serve-list__items { flex: 1 1 auto; min-width: 0; } .serve-list__items li { display: flex; align-items: center; border-top: 1px solid var(--accent); padding: 32px 0; font-size: 22px; line-height: 28.6px; color: #2d2d2d; } .serve-list__items li:last-child { border-bottom: 1px solid var(--accent); } .serve-list__items li > span { flex: 1 1 0; } .serve-list__items li > .serve-list__arrow { display: flex; justify-content: center; color: var(--accent); } .serve-list__items svg { width: 24px; height: 24px; } @media (max-width: 1024px) { .serve-list { padding: 40px 20px; } .serve-list__inner { flex-direction: column; gap: 32px; } .serve-list__intro { flex: 1 1 auto; max-width: 100%; gap: 20px; } .serve-list__intro h2 { font-size: clamp(40px, 11vw, 72px); } .serve-list__items li { padding: 22px 0; font-size: 19px; } .serve-list__items li > .serve-list__arrow { flex: 0 0 auto; justify-content: flex-end; } } /* Pull quote ------------------------------------------------------------- */ .quote { padding: 60px 216px; text-align: center; } .quote__mark { font-family: var(--serif); font-size: 140px; line-height: .6; color: rgba(155,126,107,.7); } .quote h2 { font-family: var(--serif); font-size: 64px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; color: var(--green); margin: 8px 0; } .quote h2 em { font-style: italic; color: var(--accent); } @media (max-width: 1024px) { .quote { padding: 60px 24px; } .quote__mark { font-size: 80px; } .quote h2 { font-size: clamp(30px, 7vw, 64px); } } /* Partner cards ---------------------------------------------------------- */ .partner { background: var(--green); padding: 40px 16px; } .partner h2 { font-family: var(--serif); font-size: 72px; line-height: 1.3; color: #fff; text-align: center; margin-bottom: 40px; } .partner h2 em { font-style: italic; color: #fff; } .partner__grid { display: flex; gap: 48px; max-width: var(--shell); margin: 0 auto; } .partner__card { flex: 1 1 0; background: #f5f1e9; border-radius: 12px; padding: 56px 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; } .partner__card h3 { font-family: var(--serif); font-size: 32px; line-height: 1.3; color: var(--green); } .partner__card p { font-size: 18px; line-height: 28.8px; color: #2d2d2d; } .partner__card .btn { align-self: flex-start; border-radius: 12px; padding: 16px 32px; font-weight: 600; } @media (max-width: 900px) { .partner h2 { font-size: clamp(40px, 11vw, 72px); } .partner__grid { flex-direction: column; gap: 24px; } .partner__card { padding: 40px 28px; } } /* ========================================================================== CONTACT ========================================================================== */ .contact-hero { padding: 60px 16px; } .contact-hero__inner { display: flex; align-items: center; gap: 80px; max-width: var(--shell); margin: 0 auto; } .contact-hero__copy { flex: 0 0 505px; max-width: 505px; } .contact-hero .eyebrow { font-size: 13px; letter-spacing: .16em; color: var(--accent); margin-bottom: 22px; } .contact-hero h1 { font-family: var(--serif); font-weight: 700; font-size: clamp(60px, 14vw, 150px); line-height: 1.05; color: #2d2926; } .contact-hero h1 span { text-decoration: underline; text-decoration-color: var(--deep); text-decoration-thickness: 4px; text-underline-offset: 6px; } .contact-hero p { margin-top: 24px; font-size: 20px; line-height: 32px; color: var(--muted); } .contact-hero__media { flex: 1 1 auto; min-width: 0; } .contact-hero__media img { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 10px 40px -12px rgba(45,41,38,.08); } .contact-main { padding: 60px 72px; } .contact-main__inner { display: flex; max-width: var(--shell); margin: 0 auto; align-items: stretch; } .contact-main__info { flex: 0 0 488px; max-width: 488px; padding-right: 80px; border-right: 1px solid #eae3d9; } .contact-main__form { padding-left: 80px; } .contact-main__info h2.big { font-family: var(--serif); font-size: 80px; line-height: 1.3; font-weight: 700; color: #2d2926; } .contact-main__info h2.big em { font-style: italic; color: var(--deep); } .contact-main__info h3 { font-family: var(--serif); font-size: 36px; line-height: 1.3; font-weight: 700; color: #2d2926; margin: 24px 0 24px; } .contact-main__info .label { font-size: 12px; line-height: 1.3; font-weight: 600; letter-spacing: .167em; text-transform: uppercase; color: var(--muted); } .contact-main__info .value { font-size: 18px; line-height: 23.4px; color: #2d2926; margin-top: 8px; } .contact-main__info .value a { text-decoration: underline; text-underline-offset: 3px; } .contact-main__info .note { font-size: 14px; line-height: 18.2px; color: var(--muted); margin-top: 4px; } .contact-main__info .block + .block { margin-top: 28px; } .contact-main__info .block p.body { font-size: 18px; line-height: 27px; color: #2d2926; margin-top: 8px; } .contact-main__form { flex: 1 1 auto; min-width: 0; } @media (max-width: 1024px) { .contact-hero__inner, .contact-main__inner { flex-direction: column; gap: 40px; } .contact-hero__copy, .contact-main__info { flex: 1 1 auto; max-width: 100%; } .contact-main__info { padding-right: 0; border-right: 0; } .contact-main__form { padding-left: 0; } .contact-main { padding: 60px 20px; } .contact-main__info h2.big { font-size: clamp(44px, 12vw, 80px); } } .boutique { padding: 40px 16px; } .boutique__card { max-width: 780px; margin: 0 auto; background: #f7f3ee; border-radius: 12px; padding: 80px 64px; box-shadow: 0 10px 40px -12px rgba(45,41,38,.08); text-align: center; } .boutique__icon { width: 64px; height: 64px; margin: 0 auto 20px; } .boutique__card h2 { font-family: var(--serif); font-size: 56px; line-height: 1.1; font-weight: 700; color: #2d2926; margin-bottom: 24px; } .boutique__card h2 em { font-style: italic; color: var(--deep); } .boutique__card blockquote { font-family: var(--serif); font-size: 28px; line-height: 42px; color: var(--muted); } @media (max-width: 768px) { .boutique__card { padding: 44px 24px; } .boutique__card h2 { font-size: clamp(34px, 9vw, 56px); } .boutique__card blockquote { font-size: 22px; line-height: 34px; } } /* ========================================================================== REQUEST HOUSING ========================================================================== */ .request-hero { padding: 80px 16px; background: #fdfcfb; } .request-hero .hero__bg { background-image: url("../img/hero-request.webp"); opacity: .5; } .request-hero__inner { max-width: 732px; margin: 0 auto; text-align: center; } .request-hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(46px, 8vw, 110px); line-height: 1.05; letter-spacing: -.01em; color: #1f1f1f; margin-bottom: 24px; } .request-hero h1 .accent { font-style: italic; color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 4px; text-underline-offset: 4px; } .request-hero p { font-size: 18px; line-height: 31.5px; color: var(--muted); } .request-hero .btn { margin-top: 40px; padding: 14px 28px; font-size: 15px; } .steps { padding: 40px 20px; } .steps h2 { font-family: var(--serif); font-size: 64px; line-height: 1.3; font-weight: 700; color: #2d2926; text-align: center; margin-bottom: 40px; } .steps h2 em { font-style: italic; color: var(--accent); } .steps__grid { display: flex; max-width: var(--shell); margin: 0 auto; } .steps__item { flex: 1 1 0; min-width: 0; padding: 0 48px; border-right: 1px solid #ebe5df; } .steps__item:first-child { padding-left: 0; } .steps__item:last-child { padding-right: 0; border-right: 0; } .steps__num { font-family: var(--serif); font-size: 80px; line-height: 1; font-weight: 700; color: var(--accent); } .steps__label { font-size: 12px; line-height: 1.3; letter-spacing: .167em; text-transform: uppercase; color: var(--muted); margin-top: 12px; } .steps__item h3 { font-family: var(--serif); font-size: 28px; line-height: 1.3; font-weight: 700; color: #1f1f1f; margin: 10px 0 8px; } .steps__item p { font-size: 16px; line-height: 25.6px; color: var(--muted); } @media (max-width: 900px) { .steps h2 { font-size: clamp(38px, 10vw, 64px); } .steps__grid { flex-direction: column; gap: 32px; } .steps__item { padding: 0; border-right: 0; } } .form-section { padding: 60px 20px; background: #f7f3f0; } .form-section__head { text-align: center; margin-bottom: 40px; } .form-section__head h2 { font-family: var(--serif); font-size: 72px; line-height: 1.3; color: #1f1f1f; } .form-section__head h2 em { font-style: italic; color: var(--accent); } .form-section__head p { font-size: 18px; line-height: 23.4px; color: var(--muted); margin-top: 4px; } @media (max-width: 768px) { .form-section__head h2 { font-size: clamp(40px, 11vw, 72px); } } /* ========================================================================== LIST YOUR PROPERTY ========================================================================== */ .property-hero { padding: 100px 16px; background: #faf9f6; } .property-hero .hero__bg { background-image: url("../img/hero-property.webp"); opacity: .3; } .property-hero__inner { max-width: 1160px; margin: 0 auto; text-align: center; } .property-hero .eyebrow { font-size: 13px; letter-spacing: .16em; color: var(--accent); margin-bottom: 24px; } .property-hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(46px, 8vw, 110px); line-height: 1.05; color: #2c2c2c; } .property-hero h1 em { font-style: italic; color: var(--accent); } .property-hero p { max-width: 1000px; margin: 24px auto 0; font-size: 18px; line-height: 28.8px; color: #2c2c2c; } .property-hero .btn { margin-top: 40px; border-radius: 12px; padding: 12px 24px; font-size: 15px; font-weight: 600; } .benefits { padding: 60px 20px; } .benefits h2 { font-family: var(--serif); font-size: 80px; line-height: 1.1; text-align: center; color: #2c2c2c; margin-bottom: 48px; } .benefits h2 em { font-style: italic; color: var(--accent); } .benefits__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; max-width: var(--shell); margin: 0 auto; } .benefits__card { background: #f2f0ea; border-radius: 12px; padding: 40px 32px; position: relative; overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s cubic-bezier(.16,1,.3,1); } .benefits__card:hover { transform: translateY(-8px); box-shadow: 0 12px 40px rgba(74,93,78,.08); } .benefits__num { position: absolute; top: 16px; right: 24px; font-family: var(--serif); font-size: 80px; line-height: 1; color: rgba(44,44,44,.04); pointer-events: none; } .benefits__card h3 { font-family: var(--serif); font-size: 32px; line-height: 1.1; font-weight: 400; color: #2c2c2c; margin-bottom: 24px; position: relative; z-index: 1; } .benefits__divider { height: 1px; background: #e8e5db; width: 100%; margin-bottom: 24px; } .benefits__card p { font-size: 16px; line-height: 1.6; color: var(--muted); position: relative; z-index: 1; } @media (max-width: 1024px) { .benefits h2 { font-size: clamp(40px, 11vw, 80px); } .benefits__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } .benefits__card { padding: 32px 24px; } .benefits__card h3 { font-size: 26px; } } @media (max-width: 640px) { .benefits__grid { grid-template-columns: 1fr; } } .criteria { padding: 60px 20px; background: #f2f0ea; } .criteria__head { text-align: center; margin-bottom: 56px; } .criteria__head .eyebrow { font-size: 13px; letter-spacing: .155em; color: var(--green); margin-bottom: 16px; } .criteria__head h2 { font-family: var(--serif); font-size: 72px; line-height: 1.1; color: #2c2c2c; } .criteria__head h2 em { font-style: italic; color: var(--accent); } .criteria__bento { display: flex; flex-direction: column; width: 100%; max-width: 780px; margin: 0 auto; overflow: hidden; border: 1px solid rgba(74,93,78,.15); border-radius: 12px; background: #faf9f6; } .criteria__row { display: flex; flex-direction: column; } .criteria__item { display: flex; align-items: center; gap: 16px; padding: 24px; border-bottom: 1px solid rgba(74,93,78,.15); } .criteria__item:last-child { border-bottom: none; } .criteria__item svg { color: var(--accent); flex-shrink: 0; } .criteria__item span { font-size: 16px; line-height: 1.4; color: #2c2c2c; } @media (min-width: 768px) { .criteria__row { flex-direction: row; border-bottom: 1px solid rgba(74,93,78,.15); } .criteria__row:last-child { border-bottom: none; } .criteria__item { flex: 1; border-bottom: none; border-right: 1px solid rgba(74,93,78,.15); padding: 32px 24px; } .criteria__item:last-child { border-right: none; } .criteria__item span { font-size: 18px; } } @media (max-width: 768px) { .criteria__head h2 { font-size: clamp(40px, 11vw, 72px); } } .partnership { padding: 60px 16px; background: linear-gradient(#faf9f6 0%, #f2f0ea 100%); } .partnership__inner { display: flex; gap: 100px; max-width: var(--shell); margin: 0 auto; align-items: flex-start; } .partnership__copy { flex: 0 0 407px; max-width: 407px; } .partnership__copy .eyebrow { font-size: 13px; letter-spacing: .155em; color: var(--accent); margin-bottom: 24px; } .partnership__copy h2 { font-family: var(--serif); font-size: 72px; line-height: 1.1; color: #2c2c2c; margin-bottom: 24px; } .partnership__copy h2 em { font-style: italic; color: var(--accent); } .partnership__copy p.lede { font-size: 18px; line-height: 28.8px; color: var(--muted); } .partnership__copy hr { border: 0; border-top: 1px solid #cbd5e0; margin: 32px 0; } .partnership__meta p { display: flex; align-items: center; gap: 5px; font-size: 15px; line-height: 19.5px; font-weight: 600; color: #2c2c2c; } .partnership__meta svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--accent); } .partnership__meta p + p { margin-top: 12px; } .partnership__meta a { text-decoration: underline; text-underline-offset: 3px; } .partnership__form { flex: 1 1 auto; min-width: 0; } @media (max-width: 1024px) { .partnership__inner { flex-direction: column; gap: 40px; } .partnership__copy { flex: 1 1 auto; max-width: 100%; } .partnership__copy h2 { font-size: clamp(40px, 11vw, 72px); } } /* ========================================================================== FORMS (styled to match the original HighLevel form builder) ========================================================================== */ .bh-form { background: #fff; border: 1px solid #fff; border-radius: 8px; padding: 16px; max-width: 800px; width: 100%; margin: 0 auto; box-shadow: 0 4px 4px rgba(87,100,126,.21); font-family: var(--form-font); } /* The original form builder stacks every field full width; only the City / State pair on the property form sits two-up. */ .bh-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; } .bh-field { margin-bottom: 16px; grid-column: 1 / -1; } .bh-field--half { grid-column: span 1; } .bh-form label, .bh-form .bh-label { display: block; font-size: 16px; line-height: 28.8px; font-weight: 500; color: #344054; } .bh-form .req { color: #344054; } .bh-form input[type="text"], .bh-form input[type="email"], .bh-form input[type="tel"], .bh-form input[type="number"], .bh-form input[type="date"], .bh-form select, .bh-form textarea { width: 100%; background: #fff; color: #101828; border: 1px solid #d0d5dd; border-radius: 6px; padding: 8px; font-size: 16px; line-height: 24px; box-shadow: 0 1px 2px rgba(16,24,40,.05); transition: border-color .15s ease, box-shadow .15s ease; } .bh-form input { height: 42px; } .bh-form select { height: 46px; appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 18px; padding-right: 34px; } .bh-form select:invalid, .bh-form select .placeholder { color: #667085; } .bh-form textarea { height: 108px; resize: vertical; } .bh-form input::placeholder, .bh-form textarea::placeholder { color: #667085; } .bh-form input:focus, .bh-form select:focus, .bh-form textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(74,93,78,.12); } .bh-form input:user-invalid, .bh-form select:user-invalid, .bh-form textarea:user-invalid { border-color: #e93d3d; } /* input with a leading icon (email) */ .bh-input-icon { position: relative; display: flex; align-items: center; } .bh-input-icon svg { position: absolute; left: 10px; width: 20px; height: 20px; color: #667085; pointer-events: none; } .bh-form .bh-input-icon input { padding-left: 36px; } /* currency prefix */ .bh-input-currency { position: relative; display: flex; align-items: center; } .bh-input-currency span { position: absolute; left: 12px; font-size: 16px; color: #667085; pointer-events: none; } .bh-form .bh-input-currency input { padding-left: 26px; } .bh-form__legend { grid-column: 1 / -1; font-family: var(--form-font); font-size: 20px; line-height: 24px; font-weight: 500; color: #101828; margin: 8px 0 16px; } .bh-form__grid > .bh-form__legend:first-child { margin-top: 0; } /* checkbox group */ .bh-check-group { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; } .bh-check { display: flex; align-items: center; gap: 10px; } .bh-check input { width: 16px; height: 16px; flex: 0 0 16px; accent-color: var(--green); border: 1px solid #d0d5dd; border-radius: 4px; box-shadow: none; padding: 0; } .bh-check label { margin: 0; cursor: pointer; } .bh-form__submit { grid-column: 1 / -1; width: 100%; border: 0; border-radius: 8px; padding: 8px 14px; min-height: 43px; font-family: var(--form-font); font-size: 15px; line-height: 27px; font-weight: 500; color: #fff; cursor: pointer; box-shadow: 0 1px 2px rgba(16,24,40,.05); transition: filter .2s ease, transform .2s ease; } .bh-form__submit:hover { filter: brightness(1.08); transform: translateY(-1px); } .bh-form__submit--gold { background: #ad8122; } .bh-form__submit--green { background: var(--green); } /* honeypot */ .bh-hp { position: absolute !important; left: -9999px; opacity: 0; height: 0; overflow: hidden; } @media (max-width: 640px) { .bh-field--half { grid-column: 1 / -1; } } /* ========================================================================== Thank-you page ========================================================================== */ .thanks { min-height: 60vh; display: flex; align-items: center; justify-content: center; padding: 100px 20px; text-align: center; } .thanks h1 { font-family: var(--serif); font-size: clamp(44px, 8vw, 88px); line-height: 1.1; color: var(--ink); } .thanks h1 em { font-style: italic; color: var(--accent); } .thanks p { margin: 24px auto 40px; max-width: 560px; font-size: 18px; line-height: 28.8px; color: var(--muted); } /* ========================================================================== Entrance animation (matches the original fade-up) ========================================================================== */ @keyframes hlFadeUp { to { opacity: 1; transform: translateY(0); } } .fade-up { opacity: 0; transform: translateY(30px); animation: hlFadeUp .9s ease-out forwards; } .fade-up--d1 { animation-delay: .1s; } .fade-up--d3 { animation-delay: .3s; } /* Reveal targets are visible by default and only hidden once JS confirms it can un-hide them again, so the page still reads with scripting disabled. */ .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease-out, transform .7s ease-out; } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .fade-up, .reveal { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; } }