/* gy-added (pre-launch review 2026-10-07) — Growyo review fixes.
*
* Kept apart from bands.css so the ported/hand-written split stays legible, and
* linked with a content-hash ?v= from Page.astro so a change is a new URL.
* Every selector here targets either a gy-added element or a state the runtime
* sets. Pattern from client-synergyrestorationusa 5a4f272 (same template family).
*/
/* ---- Gallery lightbox ---------------------------------------------------- */
/* PhotoSwipe's base CSS is position:absolute and only its JS promotes it to
fixed; without that, a lightbox opened after scrolling paints above the
viewport. Ground solid, controls at live's measured opacity (.75). */
.pswp.gy-pswp {
position: fixed !important;
top: 0 !important; left: 0 !important;
width: 100% !important; height: 100% !important;
z-index: 2147483000 !important;
font-family: Roboto, "Roboto Fallback", -apple-system, "Segoe UI", Arial, sans-serif;
}
.pswp.gy-pswp .pswp__bg { opacity: 1 !important; }
.pswp.gy-pswp .pswp__top-bar { opacity: 1 !important; }
.pswp.gy-pswp .pswp__button,
.pswp.gy-pswp .pswp__counter { opacity: .75; }
.pswp.gy-pswp .pswp__button:hover { opacity: 1; }
.pswp.gy-pswp .pswp__button--arrow--left,
.pswp.gy-pswp .pswp__button--arrow--right { visibility: visible !important; }
/* The photo: centred under the 44px top bar; where the slide has a caption
(the four service photos on the home page) room is left for it beneath. */
.pswp.gy-pswp .mg-pswp-img {
position: absolute;
top: 44px; right: 0; bottom: 16px; left: 0;
margin: auto;
display: block;
max-width: 94vw;
max-height: calc(100% - 60px);
object-fit: contain;
}
.pswp.gy-pswp.gy-pswp-hascap .mg-pswp-img { bottom: 76px; max-height: calc(100% - 120px); }
/* Captions: live prints the thumbnail's own caption text, white and centred. */
.pswp.gy-pswp .pswp__caption { opacity: 1 !important; visibility: visible !important; background: rgba(0, 0, 0, .5); }
.pswp.gy-pswp .pswp__caption.gy-pswp-nocap { display: none !important; }
.pswp.gy-pswp .pswp__caption__center { color: rgb(255, 255, 255); font-size: 15px; line-height: 20px; font-weight: 500; }
@media (max-width: 767px) {
.pswp.gy-pswp.gy-pswp-hascap .mg-pswp-img { bottom: 120px; max-height: calc(100% - 164px); }
.pswp.gy-pswp .pswp__caption__center { font-size: 13px; line-height: 18px; }
}
/* ---- Legal links: footer ------------------------------------------------- */
/* One line directly under the copyright line, inside the copyright widget. The
copyright block is centred on desktop, tablet and phone, so the line is
centred too. The footer ground is rgb(12,102,50), so white ink, in the
copyright's own type (Roboto 13px / 26px). */
#dm .gy-footer-legal {
display: block;
clear: both;
width: 100%;
text-align: center;
font-family: Roboto, "Roboto Fallback", sans-serif;
font-size: 13px;
line-height: 26px;
white-space: nowrap;
color: rgb(255, 255, 255);
}
#dm .gy-footer-legal a,
#dm .gy-footer-legal a:visited { color: rgb(255, 255, 255) !important; text-decoration: none !important; display: inline !important; font-weight: 400 !important; }
#dm .gy-footer-legal a:hover { color: rgb(139, 194, 64) !important; text-decoration: underline !important; }
/* ---- Legal links: contact form ------------------------------------------- */
/* One line under the SUBMIT button, /contact-us. The button is a centred block
(180px, margin auto) at 1440, 768 and 390, so the line is centred on every
band. 15px of PADDING above it (a margin would collapse). The form sits on
rgb(245,245,245), so the site's black body ink. */
#dm .gy-form-legal {
clear: both;
display: block;
box-sizing: border-box;
width: 100%;
padding-top: 15px;
text-align: center;
font-family: Roboto, "Roboto Fallback", sans-serif;
font-size: 14px;
line-height: 1.6;
white-space: nowrap;
color: rgb(0, 0, 0);
}
#dm .gy-form-legal a { color: rgb(0, 0, 0) !important; text-decoration: underline !important; display: inline !important; font-weight: 400 !important; }
#dm .gy-form-legal a:hover { color: rgb(12, 102, 50) !important; }
/* ---- Legal pages --------------------------------------------------------- */
/* Duda's reset zeroes margin on p/ul/h2, so the rhythm is set explicitly. */
#dm .gy-legal-row { padding: 60px 40px 80px !important; background-color: rgb(255, 255, 255) !important; }
#dm .dmBody[data-mg-band="m"] .gy-legal-row { padding: 40px 15px 50px !important; }
#dm .gy-legal { max-width: 900px; margin: 0 auto !important; text-align: left; color: rgb(0, 0, 0); }
#dm .gy-legal p { margin: 0 0 14px !important; font-size: 16px; line-height: 1.8; text-align: left; }
#dm .gy-legal .gy-legal-date { font-weight: 700; margin-bottom: 20px !important; }
#dm .gy-legal h2 { margin: 34px 0 12px !important; font-size: 26px !important; line-height: 1.3 !important; text-align: left; }
#dm .gy-legal h3 { margin: 22px 0 10px !important; font-size: 20px !important; line-height: 1.3 !important; text-align: left; }
#dm .gy-legal ul { margin: 0 0 14px !important; padding-left: 24px !important; list-style: disc outside !important; }
#dm .gy-legal li { margin: 0 0 6px !important; font-size: 16px; line-height: 1.8; list-style: disc outside !important; }
#dm .gy-legal a { color: rgb(12, 102, 50) !important; text-decoration: underline !important; font-weight: 700; }
#dm .dmBody[data-mg-band="m"] .gy-legal h2 { font-size: 22px !important; }
/* ---- One per page: type pins --------------------------------------- */
/* tools/review-content-fixes.py retags one element on /gallery, /blog and
/blog-search so each has exactly one (they had none, on live too). A
retag changes which of Duda's tag rules applies, so the type each element
had BEFORE the retag is restated here (measured 2026-10-07 at 1440 / 768 /
390, identical before and after: font, size, line-height, box and document
height).
.gy-h1 — the hero title, a
that is now the
. Its size comes from
its own size-50 / m-size-40 classes; the paragraph's Roboto 400
box (the inside carries Poppins 700 itself) and zero
margins are restated.
.gy-was-h2 — /blog-search "Search results", an that is now the :
the h2's Poppins 700, 35px (28px on phone), brand green. */
#dm .dmBody h1.gy-h1 {
font-family: Roboto, "Roboto Fallback" !important;
font-weight: 400 !important;
font-size: 50px !important;
margin: 0 !important;
letter-spacing: normal !important;
text-transform: none !important;
}
#dm .dmBody[data-mg-band="m"] h1.gy-h1 { font-size: 40px !important; }
#dm .dmBody h1.gy-was-h2,
#dm .dmBody h1.gy-was-h2 span {
font-family: Poppins, "Poppins Fallback" !important;
font-weight: 700 !important;
font-size: 35px !important;
line-height: normal !important;
color: rgb(12, 102, 50) !important;
}
#dm .dmBody h1.gy-was-h2 { margin: 0 !important; }
#dm .dmBody[data-mg-band="m"] h1.gy-was-h2,
#dm .dmBody[data-mg-band="m"] h1.gy-was-h2 span { font-size: 28px !important; }
/* ---- /blog call to action ------------------------------------------------ */
/* The site's own CTA button, restated (its u_ rule lives only in the
per-page sheets of the pages that carry it). Measured on /deck-installation
"CONTACT US" at 1440 / 768 / 390: 180x50, fill rgb(139,194,64), no border or
radius, Roboto 16px 700 black; hover fill rgb(12,102,50) with white text,
.2s. Centred under the post list, on the row's white ground. */
#dm .gy-cta-wrap { clear: both; display: block; width: 100%; padding: 30px 0 10px; text-align: center; }
#dm a.gy-cta {
display: inline-flex !important;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 180px;
height: 50px;
background-color: rgb(139, 194, 64);
border: 0;
border-radius: 0;
text-decoration: none !important;
transition: background-color .2s, color .2s;
}
#dm a.gy-cta .text {
font-family: Roboto, "Roboto Fallback", sans-serif;
font-size: 16px;
font-weight: 700;
line-height: normal;
white-space: nowrap;
color: rgb(0, 0, 0);
transition: color .2s;
}
#dm a.gy-cta:hover,
#dm a.gy-cta:focus-visible { background-color: rgb(12, 102, 50); }
#dm a.gy-cta:hover .text,
#dm a.gy-cta:focus-visible .text { color: rgb(255, 255, 255); }
/* ---- Menu: mark "Our Services" on its own sub-pages ---------------------- */
/* On /deck-installation, /deck-repair-and-restoration and /exterior-services
nothing in the top bar was marked (live too): Duda marks only the dropdown
item, which is hidden until hovered. runtime.js adds .gy-parent-current to the
parent; this gives it the same treatment the bar gives a current page —
rgb(12,102,50) ink and the 2px underline (effect-bottom: the ::after/::before
pair at opacity 1, scaleX(1)). */
#dm .main-navigation.unifiednav .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > .unifiednav__item.gy-parent-current .nav-item-text { color: rgb(12, 102, 50) !important; }
#dm .main-navigation.unifiednav:not([data-nav-structure="VERTICAL"]) .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > .unifiednav__item.gy-parent-current .nav-item-text::after,
#dm .main-navigation.unifiednav:not([data-nav-structure="VERTICAL"]) .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > .unifiednav__item.gy-parent-current .nav-item-text::before { opacity: 1 !important; transform: scaleX(1) !important; }
/* ---- Desktop header at 1025–1199px (small laptops, iPad landscape) ------- */
/* Not gy-added elements: the header's text logo and menu. Below 1200px the logo
column is 210–226px wide, but "IMPACT" at 60px needs ~235px and "DECKS AND
MORE" at 27px ~234px, so the logo broke into "IMPAC / T" and "DECKS AND /
MORE" and the header grew from 164px to 269px; at 1025–1099 the six menu
items (539px) also wrapped "CONTACT US" onto a second row of a 509px menu.
On live too. The logo is stepped down to 50px / 22px and the menu items'
side padding from 10px to 6px on this range only; 1200px and up, and the
tablet/phone headers, are untouched. */
@media (min-width: 1025px) and (max-width: 1199px) {
#dm .dmHeaderContainer [id="1523069191"] a.font-size-60,
#dm .dmHeaderContainer [id="1523069191"] a.font-size-60 strong { font-size: 50px !important; }
#dm .dmHeaderContainer [id="1523069191"] a.font-size-27 { font-size: 22px !important; }
#dm .dmHeaderContainer [id="1523069191"] p { white-space: nowrap; }
}
@media (min-width: 1025px) and (max-width: 1099px) {
/* Same selector as the ported rule it overrides (padding: 0 10px !important),
doubled on #dm so it outranks it whatever the sheet order. */
#dm#dm .p_hfcontainer .u_1362970677.main-navigation.unifiednav .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > .unifiednav__item {
padding: 0 6px !important;
}
}
/* ---- Footer map ---------------------------------------------------------- */
/* The Google Business Profile map, first thing in the footer of every page:
full width, 300px tall (Page.astro, FOOTER_MAP). */
.gy-footer-map { display: block; width: 100%; height: 300px; max-height: 300px; overflow: hidden; line-height: 0; background: rgb(229, 227, 223); }
.gy-footer-map iframe { display: block; width: 100%; height: 300px; border: 0; }
/* ---- Text contrast (review 2026-10-07, on Growyo's instruction) ---------- */
/* Not gy-added elements. Each of these painted the brand green rgb(12,102,50)
or black on a dark ground, on live too (contrast measured from the pixels
behind the text at 1440 / 768 / 390):
home hero green on the dark video 2.04:1
second section (row 1124305028) green on the same green 1.00:1
on /, /deck-repair-and-restoration, /exterior-services
its "Impact Decks and More" link on / green on the same green 1.00:1
service hero (row 1439076354) green on dark wood 2.4:1
on /deck-repair-and-restoration, /exterior-services
"Your Dream Outdoor Space Starts Here" black on the dark photo 1.7–2.1:1
(row 1334198178) body copy on /
All white now, as the same rows already are on the pages that set a colour.
Buttons in those rows keep their own black-on-light-green label. */
#dm .dmBody [id="1618893072"] h1,
#dm .dmBody [id="1618893072"] h1 *,
#dm .dmBody [id="1439076354"] h1,
#dm .dmBody [id="1439076354"] h1 *,
#dm .dmBody [id="1124305028"] h2,
#dm .dmBody [id="1124305028"] h2 *,
#dm .dmBody [id="1124305028"] .dmNewParagraph p,
#dm .dmBody [id="1124305028"] .dmNewParagraph p *,
#dm .dmBody [id="1334198178"] h2,
#dm .dmBody [id="1334198178"] h2 *,
#dm .dmBody [id="1334198178"] .dmNewParagraph p,
#dm .dmBody [id="1334198178"] .dmNewParagraph p * { color: rgb(255, 255, 255) !important; }
/* ---- Phone: headings follow their section's alignment -------------------- */
/* On phones these sections centre their copy and button but left-aligned the
heading (or, in two rows, one paragraph among centred ones). Centred to match
the rest of the section; desktop and tablet (all left-aligned) are untouched. */
#dm .dmBody[data-mg-band="m"] [id="1618893072"] h1,
#dm .dmBody[data-mg-band="m"] [id="1124305028"] h2,
#dm .dmBody[data-mg-band="m"] [id="1245476041"] .dmNewParagraph p,
#dm .dmBody[data-mg-band="m"] [id="1334198178"] .dmNewParagraph p { text-align: center !important; }
/* The accordion sections ("Our Deck Installation Process", "What Sets Us
Apart?", "Why Choose Impact Decks?"): every accordion title and answer is
left-aligned, so the section heading is too. */
#dm .dmBody[data-mg-band="m"] [id="1426627117"] h2 { text-align: left !important; padding-left: 25px !important; }
/* 25px: the heading's text starts at x=15 and the accordion titles' at x=40
(measured at 390 on all four pages), so both share one left edge. */