/* gy-added (review 2026-09-29) — Growyo pre-launch 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; nothing restyles ported markup at rest. */ /* ---- Mobile drawer ------------------------------------------------------- */ /* Scroll lock while the drawer is open. Duda sets overflow:hidden on only, but the document scrolls , so both are locked. */ html.gy-drawer-lock, body.gy-drawer-lock { overflow: hidden !important; overscroll-behavior: none; } /* Submenu groups. max-height clips the CONTENT box, so the

's own padding would leave a sliver of every closed group showing — collapse it with the group, with !important because Duda's sub-pages padding is !important. */ .layout-drawer li.gy-sub-group > ul.unifiednav__container_sub-nav { overflow: hidden !important; transition: max-height .3s ease-in-out, opacity .3s ease-in-out, padding .3s ease-in-out !important; } .layout-drawer li.gy-sub-group:not(.unifiednav__item-wrap_open) > ul.unifiednav__container_sub-nav { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; border-width: 0 !important; } /* The caret points down when closed and up when open. It is rotated on its ::before glyph, not on .icon, which carries its own transform per band. */ #dm .layout-drawer li.gy-sub-group .gy-caret::before { display: inline-block; transition: transform .3s ease; } #dm .layout-drawer li.gy-sub-group:not(.unifiednav__item-wrap_open) .gy-caret::before { transform: none !important; } #dm .layout-drawer li.gy-sub-group.unifiednav__item-wrap_open .gy-caret::before { transform: rotate(180deg) !important; } /* A real touch target on the caret without resizing it: an invisible overlay, so the caret keeps its inline place beside the label. */ .layout-drawer .gy-caret { position: relative; cursor: pointer; } .layout-drawer .gy-caret::after { content: ""; position: absolute; left: -14px; right: -14px; top: -14px; bottom: -14px; } /* ---- 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. 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; } /* PhotoSwipe's own type stack; without its base sheet the counter fell back to a serif. */ .pswp.gy-pswp { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", 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__caption--fake { display: none !important; } /* ---- Blog search --------------------------------------------------------- */ /* /blog-search: the heading the runtime inserts above the results. The page is the blog index's shell, dark at every band, so white ink. */ #dm .gy-search-head { margin: 0 0 24px !important; text-align: center; font-size: 28px !important; line-height: 1.3 !important; font-weight: 700 !important; color: rgb(255, 255, 255) !important; } /* ---- Contact-form legal line --------------------------------------------- */ /* One line under the submit button. The button is Duda's FLOATED .dmformsubmit, so clear it; padding rather than margin, which would collapse against the float and buy nothing. All three forms (/, /contact, /reviews) sit on the dark rgb(36,36,36) panel with a LEFT-aligned submit box inset 15px (its wrapper's margin-left) at every band, so the line starts on the button's left edge, in white. */ #dm .gy-form-legal { clear: both; display: block; box-sizing: border-box; width: 100%; padding-top: 15px; padding-left: 15px; text-align: left; font-size: 14px; line-height: 1.6; color: rgb(255, 255, 255); } #dm .gy-form-legal a, #dm .gy-form-legal .gy-legal-sep { color: rgb(255, 255, 255) !important; } #dm .gy-form-legal a { text-decoration: underline !important; } /* ---- CTA buttons (/faqs, /gallery, /blog) --------------------------------- */ /* The site's own CONTACT US button (u_1711194280), restated from its measured computed style: dark fill, 2px yellow border, bold yellow Lato 14px, 180x55 (150 wide on phones), white fill + dark text on hover, 0.2s transition. Centred in the column the page's main widget sits in. */ #dm .gy-cta-wrap { clear: both; 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: 55px; background-color: rgb(10, 11, 15); border: 2px solid rgb(254, 223, 0); border-radius: 0; text-decoration: none !important; transition: background-color .2s, border-color .2s; } #dm a.gy-cta .text { color: rgb(254, 223, 0); font-family: Lato, 'Lato Fallback', sans-serif; font-size: 14px; font-weight: 700; line-height: 22px; transition: color .2s; } #dm a.gy-cta:hover { background-color: rgb(255, 255, 255); } #dm a.gy-cta:hover .text { color: rgb(36, 36, 36); } @media (max-width: 767px) { #dm a.gy-cta { width: 150px; } } /* ---- Footer map ------------------------------------------------------------ */ /* The client's GBP embed, an inner row of the top footer section under "Area Served": the full width of the footer's content column, capped at 300px. */ #dm .gy-footer-map { width: 100%; max-width: 1200px; margin: 20px auto 10px; } #dm .gy-footer-map iframe { display: block; width: 100%; height: 300px; max-height: 300px; border: 0; } /* ---- Home: hero wave meets the yellow testimonials section (phone) --------- */ /* The animated wave SVG is sized by the SCREEN HEIGHT (its own rule: height 15vh, min 100px, max 150px) while the yellow section below starts at a fixed place (hero bottom + 2px). So its bottom edge landed anywhere from 26px above to 24px below that section depending on the phone (live identical), leaving a strip of photo, or of translucent wave, with a hard edge. Untransformed, the SVG's bottom sits at (hero bottom - 110px + its height), so shifting it by (112px - its height) puts its bottom exactly on the yellow section's top at every screen size, and the join is the wave's solid front layer. The same clamp() as the height rule, so the two can never disagree. */ .dmMobileBody #dm .u_1629522657 svg.waves { transform: translateY(calc(112px - clamp(100px, 15vh, 150px))); } /* ---- Home: "leave us a review" badge centred (desktop + tablet) ------------ */ /* The widget is inline-block at its column's start on the two wide bands (phone already centres it). Centred through the column rather than by changing the widget's own display, which would override the band rules that hide its other device copies. The column's paragraphs are already centred. */ #dm .dmBody .dmRespCol:has(> div.u_1886958910) { text-align: center !important; } /* ---- /tc-pp: double line spacing (client request) -------------------------- */ body[data-page-alias="tc-pp"] #dm #dmFirstContainer :is(p, li, span, a, strong, b, em, font, div.dmNewParagraph) { line-height: 2 !important; } /* ---- Blog pager legibility ------------------------------------------------- */ /* Duda styles only the active page (dark pill on li.button_1); the other numbers and the arrows are dark ink with no fill. On /blog at desktop the section's background is FIXED dark artwork, so "2" and the next arrow were invisible (on live too). Inactive items get a white pill, so they read on any background; the current page keeps the dark pill, keyed on .active because the runtime moves that class (not button_1) when the page changes. */ #dm nav.pagination-nav li.pagination-item { border-radius: 50% !important; transition: background-color .2s; } #dm nav.pagination-nav li.pagination-item:not(.active) { background-color: rgb(255, 255, 255) !important; } #dm nav.pagination-nav li.pagination-item:not(.active) a.pagination-link:not(.disabled) { color: rgb(10, 11, 15) !important; } #dm nav.pagination-nav li.pagination-item.active { background-color: rgb(10, 11, 15) !important; } #dm nav.pagination-nav li.pagination-item.active a.pagination-link { color: rgb(255, 255, 255) !important; }