/* ============================================================
"Need a Place to Rent" (DynamicPages?id=5) - isolated redesign.
Every rule is scoped under .dp-rent so nothing here can affect any
other DynamicPage / TemplateID layout that shares the same view.
Colors are the exact values specified for this page (warm off-white
band, green CTAs) rather than the sitewide navy/teal tokens.
Content boundary: the left column is raw CMS HTML (PageLDescription)
and the right column is an ActiveCampaign embed - this file only
wraps and styles them. No field, label, button text, or copy is
added or changed here.
============================================================ */
.dp-rent {
--rent-bg: #f7f5f157;
--rent-heading: #252525;
--rent-text: #252525;
--rent-muted: #707070;
--rent-border: #e6ebf1;
--rent-teal: #2fd4a5;
--rent-green: #21b389;
--rent-green-dark: #1a9873;
background: var(--rent-bg);
color: var(--rent-text);
font-family: 'Source Sans Pro', sans-serif;
}
/* ---------- Page heading ----------
Plain centered heading on the page ground with the site's green accent
bar beneath it - the same treatment as Our Services, Be Our Partner,
Become an Investor and "Need To Sell Your House?". */
.dp-rent-head {
text-align: center;
padding: 56px 24px 0;
}
.dp-rent-head h1 {
color: var(--rent-heading);
font-family: 'Source Sans Pro', sans-serif;
font-size: clamp(1.7rem, 3.4vw, 2.15rem);
font-weight: 800;
line-height: 1.2;
margin: 0;
text-transform: capitalize;
text-wrap: balance;
}
.dp-rent-rule {
width: 64px;
height: 4px;
border-radius: 2px;
background: var(--rent-green);
margin: 14px auto 0;
}
/* ---------- Two-column layout ---------- */
.dp-rent-wrap {
max-width: 1120px;
margin: 0 auto;
/* Was pulled up by -48px to overlap the old navy banner; with the
banner gone the cards sit normally below the heading. */
padding: 32px 24px 80px;
}
.dp-rent-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
align-items: start;
}
@media (max-width: 860px) {
.dp-rent-layout {
grid-template-columns: 1fr;
}
.dp-rent-head {
padding: 40px 20px 0;
}
}
/* ---------- Cards ---------- */
.dp-form-card {
background: #fff;
border: 1px solid var(--rent-border);
border-radius: 16px;
}
/* The left column reads flat on the page ground - no card chrome, so the
copy sits directly on the background. Padding is kept so it stays
aligned with the form card beside it. */
.dp-info-card {
background: transparent;
border: 0;
box-shadow: none;
padding: 34px;
}
.dp-form-card {
/* Exposed as a variable so the AC title/description band can break
out flush to the card edges with matching negative margins at any
width (see the header-band rules below). */
--dp-form-pad: 30px;
/* overflow:hidden stays - it's what clips the navy title band to the
card's rounded top corners. */
overflow: hidden;
padding: var(--dp-form-pad);
}
@media (max-width: 860px) {
/* Stacked: the column has no card chrome, so its own inset would just
add to the wrapper's gutter and squeeze the copy. Run it flush and
let .dp-rent-wrap provide the side spacing. */
.dp-info-card {
padding: 0 0 8px;
}
.dp-form-card {
--dp-form-pad: 24px;
}
.dp-rent-wrap {
padding: 22px 20px 56px;
}
}
/* ---------- Left card: styling the CMS HTML generically ----------
The left column is a single CMS-authored HTML blob, so these rules
only set readable typography and safe defaults on whatever tags it
contains. Per-element treatments the mockup shows (Section 8 as a
badge, phone/email as icon rows, "APPLY HERE" as a pill button)
depend on the exact CMS markup and are added once that markup is
known - see the notes returned with this change. */
.dp-info-card {
font-size: .95rem;
line-height: 1.7;
color: var(--rent-text);
}
/* The CMS wraps every visible line in its own