/* * The ONLY hand-written stylesheet in this project. * * Everything else under /styles is Duda's own CSS, ported byte-for-byte. Duda * does not need these rules because it serves a different HTML document per * device — the phone document simply has no desktop header in it, and vice * versa. A static build ships both, so the swap has to be stated. Values are * measured from the live site, not invented; see DESIGN-SPEC.md. */ /* ── which chrome is visible ───────────────────────────────────────────── */ @media (max-width: 767px) { .dmHeaderContainer { display: none !important; } } @media (min-width: 768px) { #hamburger-header-container, #mobile-hamburger-drawer, #layout-drawer-hamburger, .layout-drawer-overlay { display: none !important; } } /* ── phone: fixed header, and the offset Duda's runtime writes inline ────── Measured on the live site: the header is exactly 121px at every width from 320 to 767, and div.site_content carries margin-top:121.078px. Duda's phone document also omits .header-over-content, whose margin-top:0 would otherwise win here. */ @media (max-width: 767px) { /* The offset itself is NOT a constant and is not set here: Duda's runtime writes the header's measured height, which depends on which logo rendition the page serves — 121.078px on the home page, 121.391px on the other 41. Each page's own sheet carries its measured value; see build.mjs. */ /* Hamburger button. Duda keys these to [dmtemplateid=mobileHamburgerLayout]; top is the runtime-centred position inside the 121px header. */ #layout-drawer-hamburger.layout-drawer-hamburger { top: 40.6934px !important; } /* Drawer slide-in. Duda's runtime toggles .layout-drawer_open on the wrapper. */ #mobile-hamburger-drawer.layout-drawer { position: fixed; top: 0; right: 0; bottom: 0; left: auto; z-index: 13; overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateX(100%); transition: transform 0.3s ease-out; visibility: visible; } #dm-outer-wrapper.layout-drawer_open #mobile-hamburger-drawer.layout-drawer { transform: translateX(0); } .layout-drawer-overlay { position: fixed; inset: 0; z-index: 12; background: rgba(0, 0, 0, 0.4); opacity: 0; pointer-events: none; transition: opacity 0.3s ease-out; } #dm-outer-wrapper.layout-drawer_open ~ .p_hfcontainer .layout-drawer-overlay, #dm-outer-wrapper.layout-drawer_open .layout-drawer-overlay { opacity: 1; pointer-events: auto; } html.layout-drawer_open-body, body.layout-drawer_open-body { overflow: hidden; } /* Drawer sub-menus are collapsed until their parent is tapped. */ #mobile-hamburger-drawer .unifiednav__container_sub-nav { display: none; position: static; box-shadow: none; } #mobile-hamburger-drawer .unifiednav__item-wrap_open > .unifiednav__container_sub-nav { display: block; } } /* ── honeypot ────────────────────────────────────────────────────────────── The forms carry no reCAPTCHA — see CONTENT.md. This hidden field is the only spam protection, so it has to be invisible to people and visible to bots: position:absolute takes it out of flow entirely (no layout cost, which matters because the pixel gate would see it), and off-screen rather than display:none, which bots know to skip. */ .dmform-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ── photo gallery, one copy per device ──────────────────────────────────── Duda's gallery script lays the grid out itself — 3 columns on desktop and tablet, 2 on a phone, with cell geometry written inline and each photo swapped for a height-cropped rendition. All three rendered copies ship in the markup; this picks the one Duda would have served. Desktop is the default so the page is correct before the device script runs. block is the gallery's own computed display on the live site. */ .dmPhotoGallery.dm-gallery-mobile, .dmPhotoGallery.dm-gallery-tablet { display: none; } [data-dm-device="mobile"] .dmPhotoGallery.dm-gallery-mobile, [data-dm-device="tablet"] .dmPhotoGallery.dm-gallery-tablet { display: block; } [data-dm-device="mobile"] .dmPhotoGallery.dm-gallery-desktop, [data-dm-device="tablet"] .dmPhotoGallery.dm-gallery-desktop { display: none; } /* ── Facebook Comments footprint ─────────────────────────────────────────── Every blog post ends with Duda's Facebook Comments widget. On the live site its SDK loads when the row scrolls into view and renders NOTHING visible — the plugin iframe sits inside a span with height:0;overflow:hidden — but the container still settles at 30px, so the row is 60px rather than 30px and everything below it sits 30px lower. Our markup keeps the widget but not Facebook's script, so the height is reserved here instead. Measured at 375, 768 and 1440 on the live site: 30px at all three. */ .dmFacebookComments { height: 30px; } /* ── blog list "Show More" ───────────────────────────────────────────────── The live list ships 10 of the 12 posts and fetches the rest over ajax. There is no endpoint here, so all twelve render and the tail stays hidden until the button is pressed — the same before and after states. */ .postArticle[data-more] { display: none; } .mainBlog.more-shown .postArticle[data-more] { display: block; } /* !important because Duda's own sheet sets the button's display with one. */ .mainBlog.more-shown .more-posts-text-container { display: none !important; } /* ── blog post title: promoted h3 → h1 ───────────────────────────────────── Every blog post's title is Duda's bind-title element. Duda published it as an

, which left all 12 post pages with no H1 at all. The tag is now

, but Duda's per-page sheets carry SEPARATE rule sets for h1.u_1852899778 and h3.u_1852899778, and the h1 set omits the white colour and the 38px/24px font-size while forcing a wider 860px box. Left alone, the promotion would repaint the title dark and resize it. These rules restore the h3 declarations onto the h1 so the rendering is pixel-identical to the live site. Only the properties that actually DIFFER between Duda's two sets are restated — line-height is omitted because the h1 set's `normal` is what the h3 already computed to (`initial` === `normal`). device-chrome.css is the last sheet in the cascade and these selectors add the [data-dm-device] attribute, so they outrank Duda's own !important rules. Keyed to data-dm-device rather than a width query because Duda picks its layout by DEVICE — a tablet renders on a fixed 960px canvas. */ [data-dm-device="desktop"] #dm .dmBody h1.u_1852899778, [data-dm-device="tablet"] #dm .dmBody h1.u_1852899778 { color: rgba(255, 255, 255, 1) !important; font-size: 38px !important; width: calc(100% - 58px) !important; max-width: 744px !important; min-width: 25px !important; margin-top: 8px !important; margin-bottom: 8px !important; } [data-dm-device="mobile"] #dm .dmBody h1.u_1852899778 { color: rgba(255, 255, 255, 1) !important; font-size: 24px !important; } /* No-JS / pre-script fallback: desktop is the default document. */ #dm .dmBody h1.u_1852899778 { color: rgba(255, 255, 255, 1) !important; } /* ── contact-form legal fine print ──────────────────────────────────────── Sits after the submit button on both lead forms (home and contact page). Alignment and colour are taken from the form it belongs to, not chosen: both forms inset their fields by 14.0625px and start their text at the left edge, so the same padding lines this up with the field boxes above it rather than floating centred over them. Colour matters more than it looks. Both forms sit on the brand red (rgb(181,1,1)) and style their own labels and SUBMIT text white; inheriting instead gave near-black #2b2b2b on red, which was close to unreadable. White matches what the rest of the form already uses. Hierarchy comes from the 12px size, not from dimming the text, so contrast stays intact. */ #dm .dmform-legal { clear: both; padding: 14px 14.0625px 0; } #dm .dmform-legal p { margin: 0; font-family: Poppins, "Poppins Fallback", sans-serif; font-size: 12px; line-height: 1.5; text-align: left; color: #fff; } #dm .dmform-legal a { color: #fff; font-weight: 700; text-decoration: underline; } /* ── footer GBP map ─────────────────────────────────────────────────────── Full-bleed row: it spans the footer edge to edge rather than sitting in a padded column, so it reads as a deliberate section instead of a stray widget. display:block on the iframe kills the inline-element baseline gap that would otherwise leave a few pixels of footer colour under it. */ #dm .footer-gbp-map { width: 100%; margin: 0; padding: 0; line-height: 0; } #dm .footer-gbp-map .dmRespColsWrapper, #dm .footer-gbp-map .dmRespCol { width: 100%; max-width: 100%; margin: 0; padding: 0; } #dm .footer-gbp-map iframe { display: block; width: 100%; height: 300px; max-height: 300px; border: 0; margin: 0; } /* Footer legal-links row: matches the copyright line it sits above. */ #dm .legal-links p { margin: 0 0 6px; } /* ── image slider (reviews page) ────────────────────────────────────────── Duda ships the slider's layout CSS but not the two things its own script does at run time: mark the current slide, and give the fade its duration. Without the first rule every .slides>li keeps the ported display:none and the widget renders as an empty 393px box — which is what the 11 reviews were doing. Note it is NOT enough to show the active slide: Duda's own `.flexslider.ed-version:not([layout]) .slides>li[layout=center]{display:flex}` outranks its `.slides>li{display:none}`, so every slide was painted on top of every other. Both halves are restated here, and the #dm id gives them the specificity to win. The site has exactly one slider — the reviews one, which is .ed-version with layout="center" slides — so display:flex is what the active slide has to resolve to. !important is required, not habit: Duda's display:flex rule is itself !important, so specificity alone loses to it. */ #dm .flexslider.ed-version .slides > li { display: none !important; } #dm .flexslider.ed-version .slides > li.flex-active-slide { display: flex !important; } /* .animated carries only a transition in the ported sheet — no duration — so the fadeInUp keyframes would run for 0s. runtime.js sets the duration inline from the widget's animationDuration; this backs it up and holds the end state so the review does not snap back after animating. */ #dm .flexslider .slides > li .slide-inner.animated { animation-duration: 600ms; animation-fill-mode: both; } /* Arrows. Duda draws these with a webfont served from its own CDN (static-cdn.dwhitelabel.com/fonts/flexslider-icon.woff) — the one asset the port never localised, and not something this site should depend on. Same chevrons, drawn with borders instead, so nothing is fetched. font-size:0 hides the literal "Previous"/"Next" labels the markup carries. */ #dm .flexslider .flex-direction-nav a { font-size: 0; text-shadow: none; } #dm .flexslider .flex-direction-nav a::before { content: ""; position: absolute; top: 50%; left: 50%; width: 13px; height: 13px; border: solid currentColor; border-width: 3px 3px 0 0; font-size: 0; } #dm .flexslider .flex-direction-nav a.flex-prev::before { transform: translate(-30%, -50%) rotate(-135deg); } #dm .flexslider .flex-direction-nav a.flex-next::before { transform: translate(-70%, -50%) rotate(45deg); } /* Ported rule leaves these at opacity .7; lift the resting state so they read against the photo, and make the hit area comfortable on touch. */ #dm .flexslider.arrows-visible .flex-prev, #dm .flexslider.arrows-visible .flex-next { opacity: 0.85; width: 40px; height: 40px; margin-top: -20px; } #dm .flexslider.arrows-visible .flex-prev:hover, #dm .flexslider.arrows-visible .flex-next:hover { opacity: 1; } /* Breathing room under the reviews CTA before the footer. The CTA row reuses service-area's u_1140727454 row markup, and the reviews page's own sheet happens to carry `#dm .dmBody div.u_1140727454{margin:0 !important}` for that same class — so a plain `#dm .reviews-cta-row` rule was outranked and the button sat 10px off the footer. Matching the .dmBody depth and adding .dmRespRow puts this one class ahead of Duda's, and !important is needed because Duda's is. */ #dm .dmBody div.dmRespRow.reviews-cta-row { margin-bottom: 100px !important; } /* ── footer "AREAS WE SERVE" list, phone and tablet ─────────────────────── The 18 area links are a flex list that wraps over several rows. Duda leaves it justify-content:flex-start on the phone sheet, so every wrapped row — and especially the short last one — sits hard left while the logo, phone number, social icons and copyright above and below it are all centred. Centring the nav and its