inside a checklist answer must not fall back to .container p's dark ink on a dark band */
.container-full .row>.col-lg-12 .checks li p,.container-full .row>div:only-child .checks li p{color:inherit}
/* Opt-in LIGHT full-width band. A single-column row goes dark by default; add band-light
to the column to keep it on the cream ground instead - useful when several image-less
sections land next to each other and the page would otherwise run to a wall of black. */
.container-full .row>.col-lg-12.band-light,.container-full .row>div:only-child.band-light{background:var(--cream);color:var(--ink-soft)}
.container-full .row>.col-lg-12.band-light h2,.container-full .row>div:only-child.band-light h2,.container-full .row>.col-lg-12.band-light h3,.container-full .row>div:only-child.band-light h3{color:var(--ink)}
.container-full .row>.col-lg-12.band-light b,.container-full .row>.col-lg-12.band-light strong,.container-full .row>div:only-child.band-light b,.container-full .row>div:only-child.band-light strong{color:var(--ink)}
.container-full .row>.col-lg-12.band-light a,.container-full .row>div:only-child.band-light a{color:var(--gold-deep)}
.container-full .row>.col-lg-12.band-light .checks li,.container-full .row>div:only-child.band-light .checks li{color:var(--ink-soft)}
.container-full .row>.col-lg-12.band-light .checks li i,.container-full .row>div:only-child.band-light .checks li i{background:var(--gold-soft);color:var(--gold-deep)}
/* a .btn2 must keep its own colour: the dark-band link rule above is (0,3,1) and would
otherwise paint gold text onto a gold button. */
.container-full .row>div a.btn2.btn-gold{color:var(--ink)}
.container-full .row>div a.btn2.btn-gold:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}
@media(max-width:900px){
.container-full .row>div{min-height:0}
.container-full .row>div{width:100%;flex:0 0 100%;max-width:100%;padding:34px 26px}
/* stacked: the image can no longer be absolute or its half would collapse to zero height */
.container-full .row>div img{position:static;height:260px!important}
.container-full .row h2{font-size:24px}
}
/* ===== SERVICE AREAS PAGE (service_areas.aspx) =====
The home page equivalent (.city-list above) sits on a DARK section; this is the light
inner-page variant of the same list. Same data and same links - see PopulateServiceAreas
in default.aspx.vb and rptAreas in service_areas.aspx.vb. */
.container .area-list{columns:4;column-gap:26px;border-top:1px solid var(--line);margin-top:26px;padding-top:26px}
.container .area-list a{display:block;font-family:var(--sans);font-size:14.5px;color:var(--ink-soft);padding:6px 0;break-inside:avoid;transition:.2s}
.container .area-list a:hover{color:var(--gold-deep);padding-left:6px}
@media(max-width:900px){.container .area-list{columns:2}}
@media(max-width:560px){.container .area-list{columns:1}}
/* ============================================================
TESTIMONIALS LISTING PAGE (/pages/Testimonials-6.aspx)
The mcListing control emits `
` - that is "mcl" + the TypeX/category
id - so EVERYTHING here is scoped to .mcl6 and cannot affect any other Message Center
listing rendered by the same MessageCenterListing.aspx. No code-behind change needed.
If the Testimonials category id ever changes, change .mcl6 here and in that page's script.
============================================================ */
.mcl6 .mclListings{max-width:900px;margin:0 auto}
/* each testimonial becomes its own card - that is what separates the listings */
.mcl6 .mclListing{float:none;width:100%;background:var(--white);border:1px solid var(--line);border-radius:22px;padding:30px 34px;margin-bottom:22px;box-shadow:0 10px 24px rgba(28,26,21,.06);transition:.25s}
.mcl6 .mclListing:hover{box-shadow:0 18px 34px rgba(28,26,21,.12)}
/* The CMS Headline repeats verbatim at the start of Body, so hide it. The click-through is
re-added as .tst-more by the script in MessageCenterListing.aspx - the control only renders
its own " ..." ellipsis link on TRUNCATED entries, so short ones would have no link at all. */
.mcl6 .mclListing [id*="pnlHeadline"]{display:none}
/* review text, matching the home page .quote treatment */
.mcl6 .mclListing [id*="pnlBody"]{font-family:var(--serif);font-size:19px;font-style:italic;line-height:1.55;color:var(--ink)}
.mcl6 .mclListing [id*="pnlBody"] a{color:var(--gold-deep);font-style:normal;font-family:var(--sans)}
/* 5 gold stars, same as the home page cards */
.mcl6 .tst-stars{color:var(--gold);font-size:15px;letter-spacing:2px;font-style:normal;margin-bottom:14px}
/* injected "read the full testimonial" link */
.mcl6 .tst-more{display:inline-block;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);width:100%;font-family:var(--sans);font-size:14px;font-weight:600;font-style:normal;color:var(--gold-deep)}
.mcl6 .tst-more:hover,.mcl6 .tst-more:focus{color:var(--ink)}
@media(max-width:640px){
.mcl6 .mclListing{padding:24px 22px}
.mcl6 .mclListing [id*="pnlBody"]{font-size:17px}
}
/* ---- Message Center detail header (and .page-head / .page-crumb, the same band for a
non-CMS page - agent_detail.aspx uses it) -------------------------------------------
The crumbtrail sits INSIDE .mcdHeader, above the
. Once the h1 became a full-bleed
band with a -56px pull-up it covered the crumbtrail entirely. So .mcdHeader carries the
band here instead - the crumbtrail reads as an eyebrow above the title, inside the black -
and the h1 opts out. Same pseudo-element backdrop as .page-intro, which keeps the content
at its container's width (.mcdtype6 narrows .mcd to 820px, and that stays centred so the
breakout still lands correctly). */
.container .mcdHeader,.container .page-head{position:relative;isolation:isolate;margin-top:-56px;margin-bottom:44px;padding:62px 24px 52px;text-align:center}
.container .mcdHeader::before,.container .page-head::before{content:"";display:block;position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - (100vw - var(--sbw,0px)) / 2);width:calc(100vw - var(--sbw,0px));background:var(--ink)}
/* (1,3,1) so it outranks #wrapper .container>:first-child h1 at every width - that rule has
a <=640px variant later in the file, so an equal-specificity override would lose there. */
#wrapper .container .mcd .mcdHeader h1,#wrapper .container .row>.page-head h1{position:static;left:auto;width:auto;max-width:none;margin:0;padding:0;background:none;color:#fff;text-align:center;font-size:clamp(26px,3.6vw,36px)}
.container .mcdHeader h3,.container .page-head .page-sub{color:#efe9d9;font-weight:500;text-align:center;margin:10px 0 0;font-family:var(--sans);font-size:17px;letter-spacing:0}
.container .page-head .page-sub:empty{display:none}
/* the crumbtrail as eyebrow text. messagecenter.css clamps it to height:65px;overflow:hidden,
which has to be undone or it reserves a fixed block inside the band. */
.container .mcdHeader .mcCrumbTrail,.container .page-head .page-crumb{height:auto;overflow:visible;text-align:center;margin:0 0 16px;font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.container .mcdHeader .mcCrumbTrail a,.container .page-head .page-crumb a{font-size:11px;line-height:1.5;padding:0;margin:0;letter-spacing:inherit;color:var(--gold)}
.container .mcdHeader .mcCrumbTrail a span,.container .page-head .page-crumb a span{color:inherit}
.container .mcdHeader .mcCrumbTrail a:hover,.container .page-head .page-crumb a:hover{color:#fff;text-decoration:underline}
.container .mcdHeader>.mcCrumbTrail>span,.container .page-head>.page-crumb>span{color:rgba(255,255,255,.4)}
@media(max-width:900px){.container .mcdHeader,.container .page-head{padding:40px 20px 34px;margin-bottom:30px}}
@media(max-width:640px){.container .mcdHeader,.container .page-head{margin-top:-36px}}
/* Body copy size on the Message Center body ITSELF, not just on
. CMS authors often
write copy as bare text separated by
(Se-Habla-Espanol-21 does), which never
matches .container p and fell through to the 14px base - visibly smaller than the pages
whose copy sits in
or inside .container-full rows. Setting it here covers bare text,
and
alike. Scoped to .mcdBody on purpose: .container li would also hit the
Telerik tab strip on search.aspx. Must sit BEFORE .mcdtype6 .mcdBody (same specificity),
which restyles the testimonial page as italic serif. */
.container .mcdBody{font-family:var(--sans);font-size:16px;line-height:1.7;color:var(--ink-soft)}
.container .mcdBody ul,.container .mcdBody ol{margin:0 0 16px;padding-left:22px}
.container .mcdBody li{margin-bottom:6px}
/* ===== TESTIMONIAL DETAIL PAGE (/page/-.aspx for Testimonials) =====
The mcDetail control emits `mcd` (mcd1, mcd2...), which says nothing about the
category - so MessageCenterDetail.aspx.vb stamps `mcdtype` on the .container
wrapper instead. Everything below is scoped to .mcdtype6 and cannot affect any other
Message Center category. Update the number here, in that code-behind, and in the page's
script if the Testimonials category id ever changes.
Plain page treatment (no card / no background) - the h1 stays and the page script
retitles it to the category name, since the record headline repeats in the body. */
/* CKEditor stamps a fixed pixel size on CMS images (style="width:2121px;height:1414px").
Bootstrap's img{max-width:100%} caps the WIDTH, but the inline HEIGHT survives, so a photo
renders squashed (820x1414 instead of 820x547). Cap the width and let height follow the
ratio. Generic to every Message Center body; the .container-full image rules are more
specific and keep their object-fit treatment. */
.mcdBody img{max-width:100%!important;height:auto!important}
/* the testimonial's photo, beneath the review */
.mcdtype6 .mcdBody img{display:block;margin:26px auto 0;border-radius:14px}
.mcdtype6 .mcd{max-width:820px;margin:0 auto}
.mcdtype6 .mcdBody{font-family:var(--serif);font-size:21px;font-style:italic;line-height:1.55;color:var(--ink);padding:0}
/* 5 gold stars above the review */
.mcdtype6 .tst-stars{color:var(--gold);font-size:16px;letter-spacing:2px;margin-bottom:16px}
/* SubHead (client name) is moved BELOW the review text by the page script; the rule above
it is the separating line the client asked to keep. */
.mcdtype6 .tst-attrib{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);font-family:var(--sans);font-size:16px;font-weight:600;font-style:normal;color:var(--ink)}
.mcdtype6 .tst-attrib span{display:block;font-weight:400;font-size:13.5px;color:var(--ink-soft);margin-top:2px}
@media(max-width:640px){
.mcdtype6 .mcdBody{font-size:18px}
}
/* --- Testimonial rotator breakpoints (kept separate from the 1300px nav breakpoint) ---
The cards area is capped at 980px inside .wrap (max 1240px, 32px padding), so the arrows
at left/right:-58px only have room while the viewport is wide enough:
Arrows overlay the cards at every width, so no clearance breakpoint is needed.
<900px one card at a time - MUST match the slick responsive breakpoint in
default.aspx, otherwise the slicked and un-slicked states disagree. */
@media(max-width:900px){
.tst-rotator:not(.slick-initialized){grid-template-columns:1fr}
}
/* ===== RESPONSIVE ===== */
/* Switch to the hamburger below 1300px — the full 7-item menu + logo + button needs
more room than that, so it would otherwise overflow (logo pushed out, button hanging). */
@media(max-width:1300px){
/* header stays side-by-side (logo left, hamburger right) like nolanproperties; the
logo keeps its full size (it no longer shrinks/disappears when you scale down) */
.headbar{min-height:0;padding:14px 28px}
#superfish_menu{display:none}
.nav-cta .btn2{display:none}
#slicknav_holder{display:block}
/* menu.css hides .slicknav_menu until its own ~992px breakpoint; force it visible across
the whole hamburger range so the hamburger doesn't vanish between ~992px and 1300px */
.slicknav_menu{display:block}
/* opened menu is a compact card anchored under the hamburger (not full-width) */
.slicknav_nav{position:absolute;top:calc(100% - 2px);right:28px;left:auto;width:300px;max-width:calc(100vw - 48px);margin:0;z-index:60}
.hero-rotator,.hero-rotator .slick-list,.hero-rotator .slick-track,.hero-slide{height:auto;min-height:64vh}
.fgrid{grid-template-columns:1fr 1fr;gap:36px}
.grid3,.svc-grid,.tst-grid{grid-template-columns:1fr}
.about-grid{grid-template-columns:1fr;gap:44px}
/* single-column widths: the team photo is a 1184x770 group shot - a fixed-height cover box
cropped ~40% of it on a phone, cutting people off. Natural ratio, full width instead. */
.about-grid .imgwrap img{height:auto}
.city-list{columns:3}
}
@media(max-width:640px){
.wrap{padding:0 20px}
#wrapper .container{padding-top:36px;padding-bottom:48px}
/* the band pull-ups must match the reduced padding above, or the band tucks 20px
under the sticky header and clips the title */
#wrapper .container>:first-child h1{margin-top:-36px}
.container .its_HeaderArea{margin-top:-36px}
/* stack the top bar so the tagline and phone number aren't crammed on one line */
.topbar .wrap{flex-direction:column;height:auto;gap:4px;padding:8px 20px;text-align:center}
.topbar .r{justify-content:center;flex-wrap:wrap;gap:16px}
.search{flex-direction:column}
.search .field{border-right:none;border-bottom:1px solid var(--line)}
.fgrid{grid-template-columns:1fr}
.city-list{columns:2}
}