/* * The last stylesheet on every page,loaded after `/css/p/<slug>.css`. * * Everything Duda exports is `!important`,so a correction to a page's own * rules cannot be made from `overrides.css` (which is folded into `site.css`,* ahead of them) - it has to come after. Rules that belong to a widget rather * than to a page still go in `overrides.css`;this file is for the * page-by-page revisions asked for on top of the original. * * Anything aimed at one section must be scoped to its page as well as its * `u_<id>`:Duda reuses those ids across pages,so an unscoped rule reaches * unrelated sections elsewhere on the site. `#dmFirstContainer` carries a * `u_dmStyle_template_<slug>` class that names the page. */ /* ------------------------------------------------------------------ */ /* header on pages with nothing behind it */ /* ------------------------------------------------------------------ */ /* * The bar is transparent and its menu is white,which works while it floats * over a hero photo (`header-over-content`). A page that opens on plain * content left the menu white on white and effectively invisible. * * It takes the colour the header gives itself once the page scrolls,so the * pinned and unpinned states match instead of the bar changing colour under * the reader. This reaches the thank-you,404,blog-post and payment * calculator pages - every page whose header does not overlay a hero. */ /* `!important` because the export forces the bar transparent with one. */ #dm #dm-outer-wrapper:not(.header-over-content) .dmHeaderContainer .dmHeader,#dm #dm-outer-wrapper:not(.header-over-content) .hamburger-header-container{background-color:rgba(65,99,124,1) !important}/* ------------------------------------------------------------------ */ /* blog posts */ /* ------------------------------------------------------------------ */ /* * The post hero prints a white title straight onto the photo,over a scrim so * faint (0.22) that the title disappears against a bright sky. Deepened until * the title carries on any of the photos used. */ #dm .u_dmStyle_template_d1-internal-blog-post .dmRespRow.u_1325247579::before{background-color:rgba(0,0,0,1) !important;opacity:0.5 !important}/* ------------------------------------------------------------------ */ /* embedded forms */ /* ------------------------------------------------------------------ */ /* * The LeadConnector embed script hides the frame with inline styles until it * has measured it,and re-shows it only once the form inside has posted its * height back. That leaves a blank gap for as long as the third-party script * takes - and forever if it fails. The frame is given its own height up front * instead (from the form's `data-height`,which matches what the script * settles on to within a couple of pixels),and kept visible;the script is * then only fine-tuning a box that is already the right size. * * `!important` is what beats the script's inline styles. */ #dm .dmLeadForm{width:100%;border:none;border-radius:3px;display:block;background:transparent;opacity:1 !important;visibility:visible !important;position:static !important;left:auto !important;pointer-events:auto !important}#dm .dmLeadForm[data-height='519']{min-height:519px}#dm .dmLeadForm[data-height='661']{min-height:661px}/* ------------------------------------------------------------------ */ /* "Request an Estimate" sections */ /* ------------------------------------------------------------------ */ /* * Centre the heading and the standfirst above the form,on every page that * carries the section. The original left-aligns them;this is a deliberate * departure from it. * * The heading also sits in a fixed-width block pinned to the left of the * section,so centring its text alone would only centre it within that block - * the block is centred too. */ #dm .u_dmStyle_template_home .dmRespRow.u_1628153620 .dmNewParagraph,#dm .u_dmStyle_template_contact .dmRespRow.u_1444727056 .dmNewParagraph,#dm .u_dmStyle_template_request-estimate .dmRespRow.u_1243667655 .dmNewParagraph,#dm .u_dmStyle_template_residential-siding .dmRespRow.u_1345274950 .dmNewParagraph,#dm .u_dmStyle_template_seamless-steel-siding .dmRespRow.u_1502012003 .dmNewParagraph,#dm .u_dmStyle_template_james-hardie-products .dmRespRow.u_1866090634 .dmNewParagraph,#dm .u_dmStyle_template_commercial-siding .dmRespRow.u_1594575153 .dmNewParagraph,#dm .u_dmStyle_template_commercial-roofing .dmRespRow.u_1247448090 .dmNewParagraph,#dm .u_dmStyle_template_residential-roofing .dmRespRow.u_1359507219 .dmNewParagraph,#dm .u_dmStyle_template_window-installation-repair .dmRespRow.u_1372312551 .dmNewParagraph,#dm .u_dmStyle_template_storm-repair .dmRespRow.u_1442384400 .dmNewParagraph{text-align:center !important;margin-left:auto !important;margin-right:auto !important}#dm .u_dmStyle_template_home .dmRespRow.u_1628153620 .dmNewParagraph:is(h1,h2,h3,h4,p),#dm .u_dmStyle_template_contact .dmRespRow.u_1444727056 .dmNewParagraph:is(h1,h2,h3,h4,p),#dm .u_dmStyle_template_request-estimate .dmRespRow.u_1243667655 .dmNewParagraph:is(h1,h2,h3,h4,p),#dm .u_dmStyle_template_residential-siding .dmRespRow.u_1345274950 .dmNewParagraph:is(h1,h2,h3,h4,p),#dm .u_dmStyle_template_seamless-steel-siding .dmRespRow.u_1502012003 .dmNewParagraph:is(h1,h2,h3,h4,p),#dm .u_dmStyle_template_james-hardie-products .dmRespRow.u_1866090634 .dmNewParagraph:is(h1,h2,h3,h4,p),#dm .u_dmStyle_template_commercial-siding .dmRespRow.u_1594575153 .dmNewParagraph:is(h1,h2,h3,h4,p),#dm .u_dmStyle_template_commercial-roofing .dmRespRow.u_1247448090 .dmNewParagraph:is(h1,h2,h3,h4,p),#dm .u_dmStyle_template_residential-roofing .dmRespRow.u_1359507219 .dmNewParagraph:is(h1,h2,h3,h4,p),#dm .u_dmStyle_template_window-installation-repair .dmRespRow.u_1372312551 .dmNewParagraph:is(h1,h2,h3,h4,p),#dm .u_dmStyle_template_storm-repair .dmRespRow.u_1442384400 .dmNewParagraph:is(h1,h2,h3,h4,p){text-align:center !important}/* ------------------------------------------------------------------ */ /* employment opportunities */ /* ------------------------------------------------------------------ */ /* The form's own heading,above the Employment Inquiry embed. */ #dm .u_dmStyle_template_employment-opportunities .dmform.u_1351523216>.dmform-title{text-align:center !important}/* ------------------------------------------------------------------ */ /* request an estimate */ /* ------------------------------------------------------------------ */ /* * The band behind the form. The exported stylesheet still carries the photo * and the black scrim the section used to sit on;the live site has since * dropped both and the section is plain. */ #dm .u_dmStyle_template_request-estimate .dmRespRow.u_1243667655{background-image:none !important;background-color:transparent !important}#dm .u_dmStyle_template_request-estimate .dmRespRow.u_1243667655::before,#dm .u_dmStyle_template_request-estimate .dmRespRow.u_1243667655>.bgExtraLayerOverlay{display:none !important}/* ------------------------------------------------------------------ */ /* contact */ /* ------------------------------------------------------------------ */ /* * The map band. Its height belongs to the widget box,which the page's own * stylesheet sets (403px on wide screens,150px on phones);the frame just has * to fill it rather than fall back to an iframe's default 150px. */ #dm .dmBody .dmCustomHtmlWidget iframe[src*='google.com/maps']{display:block;width:100%;height:100% !important;min-height:150px;border:0}/* ------------------------------------------------------------------ */ /* payment calculator */ /* ------------------------------------------------------------------ */ /* * The page is a single short row,which left its hero a flat grey slab. It * gets the hero photo the other inner pages use. */ #dm .u_dmStyle_template_payment-calculator .dmRespRow.u_1517089701{background-image:url(/images/parts-of-a-roof-1024x684-1920w.webp) !important;background-repeat:no-repeat !important;background-position:50% 50% !important;background-size:cover !important}/* * And because that page's content is shorter than the window,the grey of * `.dmInner` used to show under the footer. The layout is made a full window * tall and the last row takes up whatever is left,so the page's own last * section runs down to the footer instead. On any page taller than the window * none of this has an effect. */ #dm #site_content{display:flex;flex-direction:column;min-height:100vh}#dm #site_content>.dmFooterContainer{flex:0 0 auto}#dm #site_content>#dmFirstContainer,#dm #dmFirstContainer>#allWrapper,#dm #allWrapper>#dm_content,#dm #dm_content>.dmRespRowsWrapper,#dm #dm_content>*>.dmRespRowsWrapper{flex:1 0 auto;display:flex;flex-direction:column;/* auto side margins would otherwise stop these stretching,and they would shrink-wrap to their content instead of running the full width */ width:100%}/* * Rows carry `margin:0 auto` too,so the last one needs its width restating * for the same reason - otherwise it would shrink-wrap and sit centred. */ #dm #dm_content .dmRespRowsWrapper>.dmRespRow:last-child{flex:1 0 auto;width:100% !important;max-width:none !important}/* * Whatever slack that leaves goes above and below the section's content rather * than all of it underneath,which is what left the payment calculator's * heading pinned to the top of a tall hero with a drift of empty photo below * it. A page taller than the window has no slack and is unaffected. */ #dm #dm_content .dmRespRowsWrapper>.dmRespRow:last-child{display:flex;flex-direction:column;justify-content:center}/* ------------------------------------------------------------------ */ /* hamburger bar (tablet+phone) */ /* ------------------------------------------------------------------ */ /* * The toggle ran the full height of the bar,hard against the right edge,and * its bars stretched the whole 56px of it - the export sets them to `width:* 100%`. Sized to a normal icon and inset from the edge,while the button * itself stays big enough to hit comfortably. */ #dm .layout-drawer-hamburger{width:48px;right:12px;gap:4px}#dm .layout-drawer-hamburger .hamburger__slice{width:22px !important;height:2px !important;border-radius:2px}@media (min-width:768px) and (max-width:1024px){#dm .layout-drawer-hamburger{right:20px}#dm .layout-drawer-hamburger .hamburger__slice{width:24px !important}}/* * A drawer sub-menu opens in place. The export keeps them shut with a * `max-height:0` on a selector carrying both of the navigation's attributes,* which outranks anything the `is-open` class could say - so the sub-menus * could not be opened at all,however the item was tapped. */ #dm .hamburger-drawer .main-navigation .unifiednav__item-wrap.is-open>.unifiednav__container_sub-nav{max-height:60em !important;opacity:1 !important;visibility:visible;overflow:hidden;transition:max-height 0.3s ease,opacity 0.3s ease}/* The open drawer's sub-menus,and where they sit under their parent. */ #dm .hamburger-drawer .main-navigation .unifiednav__container_sub-nav .unifiednav__item{text-align:left}@media (max-width:767px){#dm .hamburger-drawer .main-navigation .unifiednav__container_sub-nav .unifiednav__item{text-align:center}}/* * The chevron is its own control - it opens the sub-menu while the name beside * it goes to the page - so it needs to be big enough to hit on its own. */ #dm .hamburger-drawer .unifiednav__item_has-sub-nav .icon{display:inline-block;padding:6px 10px;margin:-6px -10px -6px 2px;cursor:pointer}/* ------------------------------------------------------------------ */ /* manufacturer+accreditation logos */ /* ------------------------------------------------------------------ */ /* * Full-width on a phone,these wordmarks were the tallest thing on the page. * Held to a size that reads without taking the section over. (`--fit` is the * class `widgetSlider` puts on a wide image;it is those logos.) */ @media (min-width:768px) and (max-width:1024px){#dm .dmBody .dmRespCol>.dmCoverImgContainer--fit{max-width:190px !important;margin-left:auto !important;margin-right:auto !important}}/* * On a phone they run two to a line instead of one under the other,which * keeps the row of them to a section rather than a scroll. `renderCol` in * tools/lib/transform.mjs marks a column holding nothing but a wordmark. */ @media (max-width:767px){#dm .dmBody .dmRespColsWrapper>.dmRespCol.dmWideImageCol{width:50% !important}#dm .dmBody .dmRespCol.dmWideImageCol>.dmCoverImgContainer--fit{max-width:140px !important;margin-left:auto !important;margin-right:auto !important}}/* ------------------------------------------------------------------ */ /* phone layout */ /* ------------------------------------------------------------------ */ @media (max-width:767px){/* * Buttons are centred in their column. Duda positions each one with a hard * margin measured against the desktop layout,which on a phone pushes it off * to one side. */ #dm .dmInner #site_content .dmBody .dmWidget,#dm .dmInner #site_content .dmBody a.dmButtonLink,#dm .dmInner #site_content .dmBody .caption-button{margin-left:auto !important;margin-right:auto !important;float:none !important}/* Crumbs sit under a centred page title,so they are centred too. */ #dm .bc-root{justify-content:center}/* Widgets that carry their own desktop offsets:stars,logos,images. */ #dm .dmBody .dmRespCol>.graphicWidget,#dm .dmBody .dmRespCol>.imageWidget,#dm .dmBody .dmRespCol .dmRespCol>.imageWidget,#dm .dmBody .dmRespCol>.dmCoverImgContainer{margin-left:auto !important;margin-right:auto !important}/* * A service card's heading and copy. The card is a gallery tile whose * caption Duda aligns left;on a phone the whole card reads centred. */ #dm .dmBody .caption-container,#dm .dmBody .caption-inner,#dm .dmBody .caption-title,#dm .dmBody .caption-title *,#dm .dmBody .caption-text,#dm .dmBody .caption-text *{text-align:center !important}/* * The heading carries a width measured for the desktop card,narrower than * the card is here,so centring its text still left it off-centre against * the copy underneath. It takes the width of the card. */ #dm .dmBody .caption-inner>.caption-title,#dm .dmBody .caption-inner>.caption-text{width:100% !important;max-width:100% !important;margin-left:auto !important;margin-right:auto !important}/* * The video is given a fixed box by the page's stylesheet,and at phone * width its 16:9 frame is taller than that box and gets clipped. The box * takes the frame's height instead. */ #dm .dmBody .youtubeExt,#dm .dmBody .youtubeExt .innerYoutubeExt{height:auto !important}/* The footer's logo needs room before the social icons under it. */ #dm .dmFooter .dmRespCol>.imageWidget{margin-bottom:24px !important}#dm .dmFooter .dmFooterResp,#dm .dmFooter .generalFooter,#dm .dmFooter .generalFooter *{text-align:center !important}/* --- reviews ------------------------------------------------------ */ /* * A review is a star rating,the quote,then the name with the Google mark * beside it. Each of those carries a width and an offset from the * three-across desktop layout,which on one column leaves the quote in a * narrow strip and the mark stranded out to the right. */ #dm .u_dmStyle_template_reviews .dmRespCol>.dmNewParagraph{width:100% !important;max-width:100% !important;margin-left:auto !important;margin-right:auto !important}#dm .u_dmStyle_template_reviews .dmRespCol>.graphicWidget,#dm .u_dmStyle_template_reviews .dmRespCol .imageWidget{margin-left:auto !important;margin-right:auto !important;float:none !important}#dm .u_dmStyle_template_reviews .dmRespCol .dmRespRow .dmRespCol{text-align:center !important}/* --- payment calculator -------------------------------------------- */ /* * The phone bar hangs its logo 50px below itself,into whatever is beneath. * On this page that is the hero heading,which sat close enough to touch it. * The extra headroom clears the logo;the section still centres what is left * between it and the footer. */ #dm .u_dmStyle_template_payment-calculator .dmRespRow.u_1517089701{padding-top:50px !important}/* --- request an estimate ------------------------------------------ */ /* The standfirst above the form ran edge to edge with the screen. */ #dm .u_dmStyle_template_request-estimate .dmRespRow.u_1243667655{padding:30px 20px 0 !important}/* --- about --------------------------------------------------------- */ /* * The financing banner is a wide strip of small type. It was squeezed to * 56px and cropped on top of that;it now runs the full width of the screen * at its own proportions,which is as legible as this artwork gets on a * phone. */ /* * The row's own gutter goes too,so the strip runs the full width of the * screen. That is as large as this artwork gets with all of it still on * screen - it is drawn 930x180,and anything bigger would have to crop. */ #dm .u_dmStyle_template_about .dmRespRow.u_1469822487,#dm .u_dmStyle_template_about .dmRespRow.u_1469822487 .dmRespCol{padding-left:0 !important;padding-right:0 !important}/* * Running to the edges leaves the strip's entrance animation - a flip,which * paints a little wider than the element - with nowhere to go,and it widens * the page. The row keeps it in. */ #dm .u_dmStyle_template_about .dmRespRow.u_1469822487{overflow:hidden}#dm .u_dmStyle_template_about .dmRespRow.u_1469822487 .dmRespColsWrapper{max-width:100% !important}#dm .u_dmStyle_template_about .dmRespRow.u_1469822487 .dmCoverImgContainer{width:100% !important;max-width:100% !important;height:auto !important}#dm .u_dmStyle_template_about .dmRespRow.u_1469822487 .dmCoverImgContainer>img.dmCoverImg{height:auto !important;object-fit:contain}}