/* The ONLY hand-written CSS in this build. * * Duda serves two HTML documents here (desktop/tablet share one, mobile has its * own) and each contains just its own header, so neither needs to hide the * other. This build serves ONE document carrying both — the standard bar and * the hamburger bar/drawer/overlay — so exactly one has to be switched off at * each width. That is all these rules do; no layout, spacing, colour or type * value is set here. * * THE BREAKPOINT IS 1025, NOT 768. Eyring's desktop header is .showOnLarge * (>=1025) and the hamburger is .showOnMedium (<=1024) — a tablet at 900px gets * the HAMBURGER, not the standard bar. Duda's own rules already switch * .showOnLarge/.showOnMedium correctly inside the ported bundles, but the * mobile fragments were captured from the MOBILE document, where the hamburger * chrome carries no .showOnMedium class (it does not need one — nothing else is * in that document). So the hamburger side must be switched off explicitly here. * * Loaded last so it wins over the ported bundles. */ /* Desktop only: the hamburger chrome is not part of that document. */ @media (min-width: 1025px) { #hamburger-header-container, #mobile-hamburger-drawer, #layout-drawer-overlay, #layout-drawer-hamburger, #dmBackToTop { display: none !important; } } /* Tablet and mobile (<=1024): the standard header is not part of that document. */ @media (max-width: 1024px) { .dmHeaderContainer { display: none !important; } } /* Duda ships TWO hamburger bars — genuinely different markup, not one bar * restyled. The mobile document's is three columns (small-2 / small-8 / * small-2); the desktop document's, shown at 768-1024 via .showOnMedium, is two * (medium-6 / large-6). Shipping only the mobile one made it wrap at 768 and * render 220px tall against live's 115. Both are emitted; pick one per width. * Above 1024 the block at the top of this file hides both. */ @media (max-width: 767px) { .dm-bar-wide { display: none !important; } } @media (min-width: 768px) { .dm-bar-narrow { display: none !important; } } /* Duda's hamburger bar is position:fixed and it clears it with a top margin on * .site_content. That element carries the union of both documents' * dmtemplateid values here, so the rule would otherwise also fire at desktop, * where the hamburger is hidden and there is nothing to clear. */ @media (min-width: 1025px) { #site_content > .site_content { margin-top: 0; } } /* Duda animates the drawer open by adding a class to . Its runtime is not * shipped, so reproduce the two states it toggles. The drawer slides in from * the RIGHT and pushes the page left 144px on this site * (layout-drawer_push-content + hamburger-reverse). */ body.dmDrawerOpen #mobile-hamburger-drawer, body.dmDrawerOpen #hamburger-drawer { transform: translateX(0) !important; } body.dmDrawerOpen #layout-drawer-overlay { opacity: 1; pointer-events: auto; } #layout-drawer-overlay { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } /* Blog listing: the posts behind SHOW MORE ARTICLES. * * Duda renders 9 (visible-items="9") and fetches the remaining 53 from its own * API on click — there is no page-2 URL. This build ships all 62 and hides the * rest, so the button needs no network call, and the initial paint the gate * measures is byte-for-byte the 9 Duda renders. display:none, not visibility: * they must cost no layout at all; see tools/blog-more.mjs. */ [data-dm-hidden-post] { display: none !important; } /* Duda ships TWO hamburger drawers as well as two bars, and the difference is * not cosmetic: the width rule is keyed on the ID, so the mobile drawer * (#mobile-hamburger-drawer, 80vw) matches nothing in the desktop bundle at * 768-1024 and falls through to the runtime default of 75vw — 576px against * live's 345.594px (45vw). Being off-canvas that is invisible, but a drawer * 576px past the right edge lets the gate's scrollIntoView pass scroll the * document sideways, which moves the whole capture. See tools/convert.mjs. */ @media (max-width: 767px) { .dm-drawer-wide { display: none !important; } } @media (min-width: 768px) { .dm-drawer-narrow { display: none !important; } } /* Drawer overlay colour. Live paints it green — rgba(99,193,54,.9), the site's * own scrim — but both Duda rules ship in the ported bundles and the runtime's * black rgba(0,0,0,.4) wins the cascade here, so the open menu dimmed grey * instead of green. Pin the live value. */ #layout-drawer-overlay { background-color: rgba(99, 193, 54, 0.9) !important; } /* Drawer chrome. Duda paints the burger in the site green via * `[dmtemplateid=Hamburger] .layout-drawer-hamburger.hamburger-on-header`, an * exact-match attribute selector. This build's wrapper carries BOTH device ids * in one attribute ("Hamburger mobileHamburgerLayout") so it never matches and * the burger fell back to Duda's default grey #787878 at every width. Restate * it for the unioned attribute. * * NOTE: live also slides the whole page aside when the drawer opens (the * [dmtemplateid=...] push rules, 80vw off the mobile document and 45vw off the * desktop one) and those are dropped by the same attribute mismatch. Not * restated here: the drawer is positioned relative to the pushed container, so * the push needs a matching compensating transform on the drawer itself, and * getting that wrong sends the panel off-canvas at tablet. The drawer overlays * the page here instead of pushing it — see the review notes. */ @media (max-width: 1024px) { .runtime-module-container .layout-drawer-hamburger { color: var(--color_1) !important; background-color: rgba(0, 0, 0, 0) !important; } } /* Drawer submenus, opened by the toggle in PortLayout with Duda's own * `unifiednav__item-wrap_open`. Duda defines that state, but this build loads * BOTH device bundles and the desktop one's closed rule * (`…>.unifiednav__item-wrap .unifiednav__container[data-depth]{opacity:0;max-height:0}`) * lands after the mobile bundle's open rule and wins the cascade — the branch * kept its space but its links stayed invisible. Live never hits this because * it serves one document. Restate the open state here, where nothing follows. * Drawer-scoped, so the desktop dropdowns keep their own hover behaviour. */ @media (max-width: 1024px) { #mobile-hamburger-drawer li.unifiednav__item-wrap_open > .unifiednav__container[data-depth], #hamburger-drawer li.unifiednav__item-wrap_open > .unifiednav__container[data-depth] { opacity: 1; max-height: 50em; pointer-events: all; } } /* --------------------------------------------------------------------------- * /privacy-policy and /terms-and-conditions. * * These two are NOT ports — there is no counterpart on live — so they have no * per-page Duda bundle and borrow the home page's, which is the bundle that * styles the header, footer and drawer fragments (all three were captured from * the home document). That bundle also styles a page whose first row is a * parallax hero, so its h1 is white and its content rows carry hero-sized * vertical padding: on a plain text page the heading vanished against the white * background and every section sat a screen apart. * * EVERY RULE BELOW IS SCOPED TO #dm_content, the main content region. An * earlier pass scoped them to #dm and flattened the header and footer rows too * — the header lost its 15px row padding and shrank from 108px to 80px, and the * footer was squeezed to the content's 860px column. * ------------------------------------------------------------------------- */ body[data-page-alias="privacy-policy"] #dm_content, body[data-page-alias="terms-and-conditions"] #dm_content { padding: 40px 0 64px; } body[data-page-alias="privacy-policy"] #dm_content .dmRespRow, body[data-page-alias="terms-and-conditions"] #dm_content .dmRespRow { padding: 0 !important; min-height: 0 !important; } body[data-page-alias="privacy-policy"] #dm_content .dmRespColsWrapper, body[data-page-alias="terms-and-conditions"] #dm_content .dmRespColsWrapper { max-width: 860px; margin: 0 auto; padding: 0 24px; } body[data-page-alias="privacy-policy"] #dm_content .dmNewParagraph, body[data-page-alias="terms-and-conditions"] #dm_content .dmNewParagraph { margin: 0 0 26px; } body[data-page-alias="privacy-policy"] #dm_content h1, body[data-page-alias="terms-and-conditions"] #dm_content h1 { color: #2b2b2b !important; margin-bottom: 8px; } body[data-page-alias="privacy-policy"] #dm_content h2, body[data-page-alias="terms-and-conditions"] #dm_content h2 { color: #2b2b2b !important; margin: 0 0 12px; } body[data-page-alias="privacy-policy"] #dm_content p, body[data-page-alias="terms-and-conditions"] #dm_content p, body[data-page-alias="privacy-policy"] #dm_content li, body[data-page-alias="terms-and-conditions"] #dm_content li { color: #2b2b2b; line-height: 1.6; } body[data-page-alias="privacy-policy"] #dm_content ul, body[data-page-alias="terms-and-conditions"] #dm_content ul { margin: 0 0 12px; padding-left: 22px; list-style: disc; } /* Interlink styling is body-text only, per the review checklist — never on * headings, buttons or the header/footer. These pages have no buttons. */ body[data-page-alias="privacy-policy"] #dm_content .dmNewParagraph p a, body[data-page-alias="terms-and-conditions"] #dm_content .dmNewParagraph p a, body[data-page-alias="privacy-policy"] #dm_content .dmNewParagraph li a, body[data-page-alias="terms-and-conditions"] #dm_content .dmNewParagraph li a { color: #4a8c26; text-decoration: underline; font-weight: 700; } /* Business-name interlinks added during the pre-launch review: every page whose * body copy names Eyring Pest now links it to the home page once. Matched to * the site's existing body interlinks, which Duda renders green and bold * (the ported ones carry an inline font-weight). Body text only — never a * heading, button, or anything in the header, footer or drawer. */ #dm_content .dmNewParagraph p a.dm-home-interlink, #dm_content .dmNewParagraph li a.dm-home-interlink, #dm_content p a.dm-home-interlink, #dm_content li a.dm-home-interlink { color: #63c136; font-weight: 700; } /* Privacy / Terms beside the copyright line, not in the footer's Quick links. * Duda's copyright widget lays its children out in a row; these sit as a third * child and wrap under the notice on narrow screens rather than squeezing it. */ #dm .copyright .dm-legal-links { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; } #dm .copyright .dm-legal-links a { color: inherit; text-decoration: underline; } #dm .copyright .dm-legal-links a:hover { color: #63c136; } #dm .copyright .dm-legal-links span { opacity: 0.5; } /* Footer GBP map: fill the row at every width. * * The embed is capped at 300px (review checklist) but Duda sizes the widget's * wrapper, column and row per device — 300px at >=768, 350px below it — so on * phones the map sat in a 350px row with 50px of empty white under it. Pin the * whole chain to the map's own height and let the iframe fill it, so the row * height always equals the map height whatever the breakpoint. */ #dm .dmCustomHtml:has(> iframe[src*="google.com/maps"]), #dm .dmRespCol:has(> .dmCustomHtml > iframe[src*="google.com/maps"]), #dm .dmRespColsWrapper:has(.dmCustomHtml > iframe[src*="google.com/maps"]) { height: 300px !important; max-height: 300px !important; min-height: 0 !important; } #dm .dmRespRow:has(.dmCustomHtml > iframe[src*="google.com/maps"]) { height: auto !important; min-height: 0 !important; } #dm .dmCustomHtml > iframe[src*="google.com/maps"] { display: block; width: 100% !important; height: 100% !important; min-height: 0; border: 0; } /* Privacy / Terms notice under the contact and FAQ forms, placed after every * field and the submit button, per the review checklist. Duda's form widget * left-aligns everything inside .dmforminput, so centring has to beat that * rule rather than merely follow it. */ #dm .dm-legal-note { clear: both; margin-top: 14px; } #dm .dmform .dm-legal-note, #dm .dm-legal-note, #dm .dm-legal-note p { text-align: center !important; } #dm .dm-legal-note p { font-size: 13px; line-height: 1.5; color: #2b2b2b; margin: 0; } #dm .dm-legal-note a { color: #4a8c26; text-decoration: underline; }