link that's capped at
340px. Make the link full-width so the banner matches the $99/M width. ── */
@media (max-width: 991px) {
a:has(> .ge-instant-quote-sidebar),
a:has(> img[src*="Instant-Quote"]) {
width: 100% !important;
max-width: 100% !important;
display: block !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* ── Ensure the 4 roof buttons and the Instant Quote banner always sit IN FRONT
(never behind a background/decorative element) and stay clickable ── */
.ge-sidebar-roof-link,
.ge-sidebar-roof-link .u-list-item,
.ge-sidebar-roof-link .u-container-style,
a:has(> .ge-instant-quote-sidebar),
.ge-instant-quote-sidebar {
position: relative !important;
z-index: 2 !important;
pointer-events: auto !important;
}
/* ── Roof tool timeline step: show the choice cards 2-per-row (2x2 grid) on
MOBILE and TABLET only (desktop keeps the horizontal row) ── */
@media (max-width: 991px) {
.ge-timeline-row.ge-timeline-cards,
#projectTimelineRow {
display: flex !important;
flex-wrap: wrap !important;
gap: 12px !important;
}
.ge-timeline-row.ge-timeline-cards .ge-ticker-btn,
#projectTimelineRow .ge-ticker-btn,
.ge-timeline-row .ge-timeline-card {
flex: 0 0 calc(50% - 6px) !important;
max-width: calc(50% - 6px) !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
}
/* ── Get In Touch: force the DESCRIPTION (the , whatever u-text-N it uses) to
be small on every page. On HOME/CITY it shares u-text-4 with the heading, so
without this it wrongly renders large. Heading is an
, description a
. ── */
@media (max-width: 1199px) {
p.ge-contact-blue,
p.u-text-4.ge-contact-blue,
p.u-text-5.ge-contact-blue,
.u-section-2 p.ge-contact-blue,
.u-section-3 p.ge-contact-blue,
.u-section-3 p.u-text-4.ge-contact-blue,
.u-section-2 p.u-text-4.ge-contact-blue {
font-size: 15px !important;
line-height: 1.4 !important;
font-weight: 400 !important;
}
/* keep the heading (h4) large */
h4.ge-contact-blue,
h4.u-text-4.ge-contact-blue {
font-size: 40px !important;
line-height: 1.15 !important;
font-weight: 800 !important;
}
}
/* ── FIX: the striped form box must never bleed onto the roof buttons. The roof
buttons (u-list) sit BELOW the form; give the whole roof-buttons list a solid
opaque backdrop and raise it above the stripe so the form.png bottom edge
(white + rounded corner + border) can't show over the SHINGLE button. ── */
@media (max-width: 1199px) {
.u-section-3 .u-list,
.u-section-2 .u-list,
section .u-list:has(.ge-sidebar-roof-link) {
position: relative !important;
z-index: 3 !important;
background: transparent !important;
margin-top: 14px !important;
}
/* each roof button navy box is fully opaque and above the stripe */
.ge-sidebar-roof-link,
.ge-sidebar-roof-link .u-list-item,
.ge-sidebar-roof-link .u-container-style {
position: relative !important;
z-index: 3 !important;
}
.ge-sidebar-roof-link .u-list-item,
.ge-sidebar-roof-link .u-container-style {
background-color: #0d1b30 !important;
}
}
/* ── Roof buttons list sits above the stripe (no backdrop color — the navy
buttons themselves cover the area; a white backdrop was hiding text) ── */
@media (max-width: 1199px) {
.u-section-3 .u-list:has(.ge-sidebar-roof-link),
.u-section-2 .u-list:has(.ge-sidebar-roof-link),
section .u-list:has(.ge-sidebar-roof-link) {
background-color: transparent !important;
position: relative !important;
z-index: 3 !important;
}
}
/* ── SERVICES dropdown: force it to open LEFT-aligned (left edge under the
Services item), never to the right or centered ── */
@media (min-width: 992px) {
#header .u-nav-container .u-nav-item > .u-nav-popup,
#header .u-menu-1 .u-nav-item > .u-nav-popup,
#header .u-nav-popup-1 {
left: 0 !important;
right: auto !important;
transform: none !important;
margin-left: 0 !important;
}
/* the inner popup content also left-anchored */
#header .u-nav-popup .u-nav-popup-content {
left: 0 !important;
right: auto !important;
}
}
/* ── All sidebar BANNER images (Financing/$99, Instant Quote, Insurance Claim,
Family Circle, Banner) sized LARGE to match the form/text box width, aligned
to the same left/right edges — no small left/right-floated banners ── */
@media (max-width: 991px) {
.u-image-5,
img[src*="Financing"],
img[src*="Instant-Quote"],
.ge-instant-quote-sidebar,
img[src*="InsuranceClaim"],
.ge-clipboard-sidebar,
img[src*="Family-Circle"],
.ge-family-circle-sidebar,
img[src*="Banner.png"] {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
display: block !important;
float: none !important;
}
/* the link wrappers around these banners also go full width so the image fills */
a:has(> .ge-instant-quote-sidebar),
a:has(> img[src*="Instant-Quote"]),
a:has(> img[src*="Financing"]),
a:has(> img[src*="InsuranceClaim"]),
a:has(> img[src*="Family-Circle"]),
a:has(> img[src*="Banner.png"]) {
width: 100% !important;
max-width: 100% !important;
display: block !important;
float: none !important;
}
}
/* ── The navy "ROOF REPAIR" infographic banner (Roofing.png / ge-free-roof-drop)
that sits above the form: make it CENTERED and match the text-box width below
it, on mobile AND desktop. This banner image differs per page but always uses
the same class. Never crop or cut it off — full image always visible. ── */
img[src*="Roofing.png"]:not(.u-image-circle),
.ge-free-roof-drop {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
object-fit: contain !important;
margin-left: auto !important;
margin-right: auto !important;
display: block !important;
float: none !important;
}
/* the banner's parent containers must not clip the image on any side */
.ge-free-roof-drop,
*:has(> .ge-free-roof-drop),
*:has(> img[src*="Roofing.png"]:not(.u-image-circle)) {
overflow: visible !important;
max-width: 100% !important;
}
/* ── Circle images (team/company photos in About/section-7) must FILL the
circular frame — object-fit: cover, never contain (which leaves a gap). This
overrides any banner rule that matched them by src substring. ── */
.u-image-circle,
img.u-image-circle[src*="Roofing"],
img.u-image-circle[src*="LocalRoofing"] {
object-fit: cover !important;
}
/* ── Section-7 "Safety and Service" circle (RoofingComany) is covered by the
yellow box in the NEXT section (section-8). Reserve enough bottom space in
section-7 so the full circle clears before section-8's yellow box starts. ── */
@media (max-width: 991px) {
.u-section-7 .u-image-circle,
.u-section-7 img[src*="RoofingComany"] {
position: relative !important;
z-index: 2 !important;
}
/* the circle's cell reserves its full height + clearance so nothing overlaps */
.u-section-7 {
padding-bottom: 260px !important;
}
/* section-8 yellow box starts cleanly below, small gap */
.u-section-8 {
margin-top: 20px !important;
}
}
/* ── Roof Tune-Up (BOOKNOW) banner: same HALF size on EVERY page (index, About,
ADU, Kitchen, Bathroom, Mold, Remodeling, Contact, Privacy...). Keeps aspect
ratio (not stretched/cropped). Width 50% halves both dimensions. Centered. ── */
img[src*="BOOKNOW"],
img.u-expanded-width[src*="BOOKNOW"],
.u-section-5 .u-image-1 {
width: 100% !important;
max-width: 570px !important;
height: auto !important;
object-fit: contain !important;
margin-left: auto !important;
margin-right: auto !important;
display: block !important;
float: none !important;
}
.u-section-5 .u-container-layout,
a:has(> img[src*="BOOKNOW"]) {
width: 100% !important;
max-width: 100% !important;
overflow: visible !important;
text-align: center !important;
}
/* ── Circle images (RoofingComany, LocalRoofing, any u-image-circle): the photo
must FILL the entire circle (clipped round, no white corner gaps), on every
page and breakpoint. ── */
img.u-image-circle,
.u-image-circle,
img[src*="RoofingComany"],
img[src*="LocalRoofing"] {
border-radius: 50% !important;
object-fit: cover !important;
object-position: center !important;
overflow: hidden !important;
}
/* ══════════════════════════════════════════════════════════════════════════
CLEAN REBUILT ROOF BUTTONS (ge-rbtn) — replaces the old repeater buttons.
Navy card, yellow icon, white text, rounded-right corners, yellow roll-over.
══════════════════════════════════════════════════════════════════════════ */
.ge-roofbtns-v2 {
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
width: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
}
.ge-rbtn {
display: flex !important;
align-items: center !important;
gap: 22px !important;
min-height: 350px !important;
padding: 0 34px !important;
background: #0d1b30 !important;
border-radius: 0 26px 26px 0 !important; /* rounded right edges */
text-decoration: none !important;
transition: background-color .18s ease !important;
cursor: pointer !important;
}
.ge-rbtn .ge-rbtn-icon img {
width: 74px !important;
height: 74px !important;
object-fit: contain !important;
display: block !important;
}
.ge-rbtn .ge-rbtn-text,
.ge-roofbtns-v2 .ge-rbtn .ge-rbtn-text,
a.ge-rbtn span.ge-rbtn-text {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
-webkit-text-stroke: 0 !important;
font-weight: 700 !important;
font-size: 26px !important;
line-height: 1.15 !important;
letter-spacing: .3px !important;
}
/* yellow roll-over: card turns yellow, text navy, icon darkened */
.ge-rbtn:hover {
background: #f2b705 !important;
}
.ge-rbtn:hover .ge-rbtn-text {
color: #0d1b30 !important;
-webkit-text-fill-color: #0d1b30 !important;
}
.ge-rbtn:hover .ge-rbtn-icon img {
filter: brightness(0) !important; /* dark icon on yellow, no green tint */
}
@media (min-width: 992px) {
.ge-rbtn { min-height: 150px !important; }
}
/* mobile only: half the button height (was 350px → 175px) */
@media (max-width: 991px) {
.ge-rbtn { min-height: 175px !important; }
}
/* ── Space out the roof buttons (ends with ROOF COATING) from the $99/M
Financing banner below them so they don't touch/overlap ── */
.ge-roofbtns-v2 {
margin-bottom: 40px !important;
}
.u-image-5,
.u-image.u-image-5 {
margin-top: 30px !important;
}
/* ── Roof tool timeline card icons (Immediately, 1-3 Months, 3-6 Months) were
turning white (invisible on white cards) because a global svg{fill:#fff} rule
overrode their yellow attribute fill. Force the yellow back. ── */
.ge-timeline-cards .ge-timeline-card .ge-timeline-icon svg,
.ge-timeline-cards .ge-timeline-card .ge-timeline-icon svg path,
span.ge-timeline-icon svg,
span.ge-timeline-icon svg path {
fill: #f2b705 !important;
}
/* no navy box behind the icons — show just the yellow icon on the white card */
.ge-timeline-icon,
.ge-timeline-icon svg,
.ge-timeline-cards .ge-timeline-card .ge-timeline-icon svg,
span.ge-timeline-icon svg {
background: none !important;
background-color: transparent !important;
box-shadow: none !important;
border: 0 !important;
}
/* Just Researching uses a stroked magnifier — keep its stroke yellow, no fill */
.ge-timeline-card[data-val="Just Researching"] .ge-timeline-icon svg,
.ge-timeline-card[data-val="Just Researching"] .ge-timeline-icon svg path,
.ge-timeline-card[data-val="Just Researching"] .ge-timeline-icon svg circle,
.ge-timeline-card[data-val="Just Researching"] .ge-timeline-icon svg line {
fill: none !important;
stroke: #f2b705 !important;
}
/* ── Roof tool: give the "Please choose a timeline" hint and the Continue button
breathing room so they don't touch the card's yellow border ── */
.ge-timeline-step-hint {
margin: 16px 20px 8px !important;
padding: 0 4px !important;
}
/* the nav row holding Back + Continue: keep both off the card's yellow border */
.ge-step-nav {
padding: 8px 24px !important;
margin-bottom: 24px !important;
gap: 14px !important;
}
.ge-step-continue,
#continueToAddress,
.ge-step-back {
margin: 0 !important;
}
/* ensure the step body/card reserves bottom room so the nav clears the border */
.ge-timeline-step-body,
.ge-step-body,
[class*="ge-step"][class*="body"] {
padding-bottom: 28px !important;
}
/* make sure the timeline step body itself has inner padding from the border */
.ge-timeline-step-body {
padding-left: 20px !important;
padding-right: 20px !important;
padding-bottom: 20px !important;
}
/* ── Safety yellow box (ge-safety-banner / section-8): half the height on MOBILE
only. Reduce the tall min-heights and padding so the box is more compact. ── */
@media (max-width: 991px) {
#block-19.ge-safety-banner,
#block-19 .u-container-style,
#block-19 .u-layout-cell,
#block-19 [class*="u-size-"],
#block-19 .u-container-layout,
.ge-safety-banner .u-container-style,
.ge-safety-banner .u-layout-cell,
.u-section-8 .u-container-style,
.u-section-8 .u-layout-cell,
.u-section-8 .u-size-34,
.u-section-8 [class*="u-size-"] {
min-height: 0 !important;
height: auto !important;
}
.ge-safety-banner .u-container-layout,
.u-section-8 .u-container-layout {
padding-top: 14px !important;
padding-bottom: 14px !important;
min-height: 0 !important;
height: auto !important;
}
.ge-safety-banner,
.u-section-8 {
padding-top: 14px !important;
padding-bottom: 0 !important;
min-height: 0 !important;
}
/* shrink the heading text + tighten its spacing so the box is ~half height */
.ge-safety-banner .u-text-1,
.u-section-8 .u-text-1,
.ge-safety-banner h2,
.ge-safety-banner h3 {
font-size: 24px !important;
line-height: 1.15 !important;
margin: 0 0 12px !important;
}
/* remove extra vertical whitespace inside the yellow cell */
.ge-safety-banner .u-container-layout,
.u-section-8 .u-container-layout {
padding-top: 16px !important;
padding-bottom: 16px !important;
}
}
/* ── Footer: align all content to the RIGHT (was left) ── */
#footer,
footer.u-footer,
#footer .u-text,
#footer p,
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6,
#footer a,
#footer .u-container-layout,
#footer .u-layout-cell,
#footer li,
#footer ul {
text-align: right !important;
}
/* keep list bullets/menus from shoving content back left */
#footer ul,
#footer li {
list-style-position: inside !important;
padding-left: 0 !important;
}
/* ── Desktop SERVICES / REMODELING SERVICES dropdown: force items LEFT-aligned
(they were rendering centered inside the popup panel) ── */
.u-nav-popup,
.u-nav-popup ul,
.u-nav-popup li,
.u-nav-popup .u-nav-item,
.u-nav-popup .u-nav-link,
.u-nav-popup a {
text-align: left !important;
justify-content: flex-start !important;
}
.u-nav-popup a,
.u-nav-popup .u-nav-link {
display: block !important;
width: 100% !important;
}
.u-nav-popup ul {
margin-left: 0 !important;
padding-left: 0 !important;
list-style-position: outside !important;
}
/* kill the 21px left indent + 9px top gap on the SERVICES popup so it matches
REMODELING SERVICES exactly (no space between button and first link) */
.u-nav-popup,
.u-nav-popup-1,
div.u-nav-popup {
padding: 0 !important;
}
.u-nav-popup .u-h-spacing-21,
.u-nav-popup ul.u-h-spacing-21,
.u-nav-popup li,
.u-nav-popup .u-nav-item {
margin-left: 0 !important;
padding-left: 0 !important;
}
/* ── Header underline consistency: on Contact/About/Testimonials/service/city
pages the page-title section adds a thick 14px yellow border-top directly
under the header, making the line look much thicker than on index (which
shows only the header's own 3px line). Remove that extra top border so every
page has the same thin line. ── */
.u-header + section.u-border-14,
header + section.u-border-14,
.u-header + section[class*="u-border-"],
header + section[class*="u-border-"] {
border-top: 0 !important;
}
/* ── All navigation links in CAPS (top nav + dropdown items + mobile menu) ── */
.u-nav .u-nav-link,
.u-nav a,
.u-nav-item a,
.u-nav-popup a,
.u-nav-popup .u-nav-link,
nav .u-nav-link,
.u-header .u-nav-link,
.u-menu .u-nav-link {
text-transform: uppercase !important;
}
/* ── FINANCING BANNER: $99/M CUT OFF AT THE BOTTOM (all pages) ────────
Root cause: Nicepage sets a FIXED height on the image per page, e.g.
`.u-section-3 .u-image-5 { height:320px; width:404px }`. Financing.png
is 568x496 (ratio 0.8732), so at 404px wide the correct height is
~353px — the 320px box chopped ~33px off the bottom, cutting the "$99".
The section number differs per page (u-section-2 / -3 / -9 ...), so we
target the image itself and lock its true aspect ratio. Loaded last =
beats the Nicepage rules. Width-based scaling only, never cropped. */
img[src*="Financing"],
img[src*="Financing"].u-image,
img.u-image-5[src*="Financing"],
img.u-image.u-image-5[src*="Financing"],
img.u-expanded-width-xs[src*="Financing"] {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
aspect-ratio: 568 / 496 !important;
object-fit: contain !important;
max-width: 100% !important;
display: block !important;
}
/* ── ROOF ESTIMATE TOOL — FINAL FORM ("A Few Quick Details" / "Finish Your
Estimate"): white-on-white text. The