/* Tablet and phone layout for the mirrored desktop pages. * * Duda served a separate mobile document and chose it on the server by * User-Agent. Static hosting cannot, so this makes the one document work at * every width -- and, where the desktop markup carries no usable mobile * intent, makes a deliberate design decision rather than leaving it rough. * * Two principles, in this order: * 1. Get out of the way. The sites' own stylesheets already hold 64 * max-width:767px rules and 36 tablet rules, and they are correct. They * were outranked by one !important floor in the desktop runtime CSS. * 2. Where Duda's mobile intent exists but its stylesheet does not, honour * the intent. The markup is tagged m-font-size-38 and the like, but those * classes are defined only in the mobile bundle we do not serve, so they * are declared here. */ /* ---------- below the desktop breakpoint ---------- */ @media (max-width: 1024px) { /* Every fixed-width ancestor has to release before anything inside it can reflow, so these are matched broadly and defensively. */ #dm .dmInner, .dmInner { min-width: 0 !important; width: 100% !important; } #dm .dmLayoutWrapper, #dm .dmHeaderContainer, #dm .dmHeaderResp, #dm .u_hcontainer, #dm .dmFooterContainer, #dm .dmContent, #dm .dmRespRow, #dm .dmRespRowsWrapper, #dm .dmRespColsWrapper { min-width: 0 !important; max-width: 100% !important; } /* A sticky header keeps its own 768px floor in the desktop stylesheet. */ #dm .hasStickyHeader .dmInner div#desktopHeaderBox, #dm .hasStickyHeader .dmInner div.dmHeaderContainer { min-width: 0 !important; width: 100% !important; } /* Nothing may be wider than the screen. Duda positions some widgets with explicit pixel widths that were only ever right at desktop size. */ /* Leaflet sizes its own tiles and marker icons, and a blanket "height: auto" collapses them to nothing -- which is exactly what turned the footer map into a blank white circle on phones while desktop, above this breakpoint, was fine. Map imagery is left to Leaflet. */ #dm img:not(.leaflet-tile):not(.leaflet-marker-icon):not(.leaflet-marker-shadow):not(.leaflet-image-layer), #dm video, #dm iframe, #dm table, #dm .dmCustomWidget, #dm [class*="widget-"] { max-width: 100% !important; } #dm img:not(.leaflet-tile):not(.leaflet-marker-icon):not(.leaflet-marker-shadow):not(.leaflet-image-layer) { height: auto !important; } html, body { overflow-x: hidden !important; } } /* ---------- tablet ---------- */ @media (min-width: 768px) and (max-width: 1024px) { /* Three and four across is cramped at this width; two keeps the cards legible and the rows balanced. */ #dm .dmRespColsWrapper > .dmRespCol.large-3, #dm .dmRespColsWrapper > .dmRespCol.large-4 { width: 50% !important; } } /* ---------- phone ---------- */ @media (max-width: 767px) { /* --- Duda's own mobile type scale -------------------------------------- The markup states the intended phone size (m-font-size-38, m-size-24 and so on) but those classes live in the mobile stylesheet, which belongs to the document we do not serve, so nothing defines them and every heading collapses to body size. Declared here so the pages keep the hierarchy Duda designed. With one deliberate departure: the smallest steps, 11px and 12px, are floored at 14px. 11px is below what anyone can comfortably read on a phone, it is applied to 845 elements across these sites, and honouring it literally would be faithful to a decision worth improving on. */ /* Duda's sizes are capped against the viewport as well. Dietrich's h1 is a whole sentence rather than a short hero line, and at a literal 38px it ran to 624px -- most of a phone screen for one heading. min() keeps the intended size for short headings and reins in the long ones. */ #dm .m-font-size-38, #dm .m-size-38 { font-size: min(38px, 8vw) !important; } #dm .m-font-size-24, #dm .m-size-24 { font-size: 24px !important; } #dm .m-font-size-22, #dm .m-size-22 { font-size: 22px !important; } #dm .m-font-size-18, #dm .m-size-18 { font-size: 18px !important; } #dm .m-font-size-17, #dm .m-size-17 { font-size: 17px !important; } #dm .m-font-size-16, #dm .m-size-16 { font-size: 16px !important; } #dm .m-font-size-12, #dm .m-size-12, #dm .m-font-size-11, #dm .m-size-11 { font-size: 14px !important; } /* Headings still need their line-height brought in: desktop leading at phone width leaves a heading looking like separate lines of text. */ #dm h1, #dm h2, #dm h3, #dm h4 { line-height: 1.18 !important; } #dm h1, #dm h2, #dm h3, #dm h4 { margin-top: 0 !important; margin-bottom: .45em !important; } /* Body copy matches what Duda serves phones: 16px on a 24px rhythm. */ #dm p, #dm li { font-size: 16px !important; line-height: 1.5 !important; } /* --- layout ------------------------------------------------------------ Duda's grid already states what it wants on a phone: small-6 for a pair across, small-3 for four. Those classes are defined only in the mobile stylesheet, so nothing sized them and a blanket width:100% here stacked everything one per row -- the calculators index ran to nine full-width rows of icon-and-label where two across was the intent. The declared widths are honoured; anything without a small-N class stacks. */ #dm .dmRespColsWrapper { display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; } #dm .dmRespColsWrapper > .dmRespCol { float: none !important; width: 100% !important; } #dm#dm .dmRespColsWrapper > .dmRespCol.small-1 { width: 8.333% !important; } #dm#dm .dmRespColsWrapper > .dmRespCol.small-2 { width: 16.666% !important; } #dm#dm .dmRespColsWrapper > .dmRespCol.small-3 { width: 25% !important; } #dm#dm .dmRespColsWrapper > .dmRespCol.small-4 { width: 33.333% !important; } #dm#dm .dmRespColsWrapper > .dmRespCol.small-5 { width: 41.666% !important; } #dm#dm .dmRespColsWrapper > .dmRespCol.small-6 { width: 50% !important; } #dm#dm .dmRespColsWrapper > .dmRespCol.small-7 { width: 58.333% !important; } #dm#dm .dmRespColsWrapper > .dmRespCol.small-8 { width: 66.666% !important; } #dm#dm .dmRespColsWrapper > .dmRespCol.small-9 { width: 75% !important; } #dm#dm .dmRespColsWrapper > .dmRespCol.small-10 { width: 83.333% !important; } #dm#dm .dmRespColsWrapper > .dmRespCol.small-11 { width: 91.666% !important; } #dm#dm .dmRespColsWrapper > .dmRespCol.small-12 { width: 100% !important; } /* Form fields are the exception to honouring that grid. Duda pairs Name with Company and Phone with Email, which is right on a wide canvas and cramped on a phone: each field ends up around 150px, too narrow to read what you have typed. Any column holding an input goes full width. */ #dm#dm .dmRespCol:has(input:not([type="hidden"])), #dm#dm .dmRespCol:has(select), #dm#dm .dmRespCol:has(textarea), #dm#dm .dmforminput { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; } /* And the fields themselves fill their column rather than keeping a width measured for the desktop layout. */ #dm#dm .dmforminput input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), #dm#dm .dmforminput select, #dm#dm .dmforminput textarea { width: 100% !important; box-sizing: border-box !important; min-height: 44px !important; font-size: 16px !important; } /* 16px is deliberate: iOS Safari zooms the page in when a focused field is smaller than that, and the zoom is not undone when the field blurs. */ /* Duda floats the label beside its field, which works at desktop width and traps the label in a ~90px column on a phone -- "Residential address" breaks to "Residenti / al / address". Labels go above their field. */ #dm#dm .dmforminput { display: block !important; } #dm#dm .dmforminput > label, #dm#dm .dmforminput > .dmformlabel { display: block !important; float: none !important; width: 100% !important; max-width: 100% !important; text-align: left !important; margin: 0 0 6px 0 !important; padding: 0 !important; line-height: 1.35 !important; } /* Checkbox and radio labels stay inline beside their control. */ #dm#dm .dmforminput label.checkable-label, #dm#dm .dmforminput .checkable-input + label { display: inline !important; width: auto !important; } /* Native checkboxes and radios render at 13-16px, which is a small target and easy to miss beside a full-width field. */ #dm#dm input[type="checkbox"], #dm#dm input[type="radio"] { width: 20px !important; height: 20px !important; min-height: 0 !important; margin-right: 10px !important; vertical-align: middle !important; } #dm#dm .checkable-input + label, #dm#dm label:has(> input[type="checkbox"]), #dm#dm label:has(> input[type="radio"]) { min-height: 32px !important; display: inline-flex !important; align-items: center !important; } /* Absolute positioning at desktop coordinates puts content off-screen. */ #dm .dmRespRow [style*="position: absolute"], #dm .dmRespRow [style*="position:absolute"] { position: relative !important; left: auto !important; top: auto !important; } /* A consistent gutter and vertical rhythm. Duda's desktop spacing is proportionate to a 1440px canvas; at 390px it is a fifth of the screen sideways and leaves the first real content below the fold. */ #dm#dm .dmRespRow, #dm#dm .dmRespCol { padding-left: 18px !important; padding-right: 18px !important; } #dm#dm .dmRespRow { padding-top: 32px !important; padding-bottom: 32px !important; } /* Long copy set centred reads badly on a narrow column -- every line starts in a different place and the eye loses the left edge. Short centred text (headings, captions, buttons) keeps its alignment. */ #dm p { text-align: left !important; } /* Duda separates paragraphs with empty

spacers rather than margins. Hiding them ran three paragraphs of body copy together into one wall of text, so they stay and the paragraphs get their own spacing as well. */ #dm#dm p { margin-bottom: 0.9em !important; } #dm#dm p:empty { margin-bottom: 0 !important; min-height: 0.6em !important; } /* Long words -- email addresses, URLs in body copy -- otherwise push the page wider than the screen on their own. */ #dm p, #dm li, #dm td, #dm a { overflow-wrap: break-word !important; } /* --- header ------------------------------------------------------------ */ /* Left as three stacked blocks the header ran to 358px, well over a third of the screen, before a visitor saw anything. */ #dm .dmHeader img, #dm .u_hcontainer img, #dm [class*="logo"] img, #dm img[class*="logo"] { max-height: 48px !important; width: auto !important; max-width: 62vw !important; } #dm#dm .dmHeaderContainer, #dm#dm .u_hcontainer { padding-top: 10px !important; padding-bottom: 10px !important; } /* The header call to action is the phone number -- the most useful thing on the page on a phone -- so it stays, but sized to sit in the bar instead of claiming a row of its own and pushing the content below the fold. */ #dm#dm .dmHeaderContainer .eaBtnCont a, #dm#dm .u_hcontainer .eaBtnCont a, #dm#dm .dmHeader .eaBtnCont a, #dm#dm .dmHeaderContainer .dmButtonLink, #dm#dm .u_hcontainer .dmButtonLink { font-size: 14px !important; padding: 9px 16px !important; min-height: 38px !important; margin: 0 !important; } #dm#dm .dmHeaderContainer .eaBtnCont, #dm#dm .u_hcontainer .eaBtnCont { margin: 0 !important; } /* --- navigation -------------------------------------------------------- A desktop bar wraps into a tall stack at this width. A scrollable strip keeps every link reachable and the current-page highlight intact, and does not invent a hamburger the site's own scripts know nothing about and could not open. Full-bleed so the first item starts at the screen edge rather than being clipped by the desktop container's inset. */ #dm#dm .unifiednav, #dm#dm .unifiednav__container { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; justify-content: flex-start !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 12px !important; padding-right: 12px !important; scrollbar-width: none; } #dm .unifiednav::-webkit-scrollbar, #dm .unifiednav__container::-webkit-scrollbar { display: none; } #dm#dm .unifiednav__item { flex: 0 0 auto !important; white-space: nowrap !important; font-size: 16px !important; } #dm#dm .unifiednav__item > a { padding: 12px 14px !important; } /* Sticky headers eat a phone screen; the page is more usable scrolled. */ #dm .hasStickyHeader div.dmHeaderContainer, #dm .hasStickyHeader div#desktopHeaderBox { position: static !important; } /* --- components -------------------------------------------------------- */ /* Calls to action are worth making comfortable to hit. Duda wraps them in an .eaBtnCont with the anchor itself unclassed, so the container is the reliable handle -- styling the anchor alone left the label overflowing a pill sized for desktop text. */ #dm#dm .eaBtnCont a, #dm#dm .dmButtonLink, #dm#dm a[class*="btn"] { min-height: 46px !important; padding: 12px 22px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1.2 !important; box-sizing: border-box !important; white-space: normal !important; } #dm#dm .eaBtnCont { margin: 8px 0 !important; } /* Buttons keep a desktop width that a two-word label no longer fits, so the text wraps inside a box sized for one line and looks cramped. */ #dm#dm .eaBtnCont a, #dm#dm .dmButtonLink, #dm#dm a[class*="btn"], #dm#dm .dmWidget { width: auto !important; min-width: 190px !important; max-width: 100% !important; text-align: center !important; } /* --- tap targets ------------------------------------------------------ Apple and Google both put the minimum comfortable touch target around 44px. These sit at 19-24px because they were sized for a mouse. Only links that already stand alone are grown -- padding on inline links inside a sentence would break the line rhythm for no gain. */ #dm#dm .featIndexLinkCont a, #dm#dm .featBtnGap a { display: inline-flex !important; align-items: center !important; min-height: 44px !important; padding: 10px 18px !important; } /* Footer legal and utility links sit in a run separated by pipes; each needs its own height without the row turning into a stack. */ #dm#dm .dmFooterContainer p a, #dm#dm p.text-align-center > a, #dm#dm .dmRespCol p > a:only-of-type { display: inline-block !important; padding: 9px 4px !important; line-height: 1.4 !important; } /* Blog list and post navigation -- "Read More", "Newer Post", "Show More". Duda renders these from its blog widget with no class of their own, so they are reached through the widget's containers. */ #dm#dm .dmBlogList a, #dm#dm [class*="dmBlog"] a[class=""], #dm#dm .blogPostNavigation a, #dm#dm [class*="postNav"] a, #dm#dm [class*="readMore"] a, #dm#dm a[class=""]:not(:has(img)), /* Duda's post navigation renders the anchor with no class attribute at all, which a[class=""] does not match -- it needs the attribute to be present and empty. */ #dm#dm .dmRespCol > a:not([class]):not(:has(img)) { display: inline-flex !important; align-items: center !important; min-height: 44px !important; padding-top: 6px !important; padding-bottom: 6px !important; } /* Duda's own navigation anchors, where they are still mouse-sized. */ #dm#dm nav a, #dm#dm .unifiednav__item { min-height: 44px !important; display: inline-flex !important; align-items: center !important; } /* The footer office map is drawn as a circle; at phone width its column is narrower than it is tall, so it renders as an oval. */ #dm#dm .mapContainer.leaflet-container { aspect-ratio: 1 / 1 !important; height: auto !important; max-width: 260px !important; margin-left: auto !important; margin-right: auto !important; } /* Stacked cards run straight into one another -- image, title, copy, button, then the next image with nothing between. */ #dm#dm .dmRespColsWrapper > .dmRespCol { margin-bottom: 26px !important; } #dm#dm .dmRespColsWrapper > .dmRespCol:last-child { margin-bottom: 0 !important; } /* Columns sharing a row need a gutter, not a full stacked-card gap. */ #dm#dm .dmRespColsWrapper > .dmRespCol:not(.small-12) { padding-left: 8px !important; padding-right: 8px !important; margin-bottom: 18px !important; } /* Negative margins pull rows over one another by design at desktop width -- a heading sitting over a banner. Once everything stacks they overlap instead: Dietrich's h1 was printing across its own navigation. */ #dm#dm .dmRespRow, #dm#dm .dmRespCol, #dm#dm .dmRespRowsWrapper, #dm#dm .dmRespColsWrapper { margin-top: 0 !important; margin-bottom: 0 !important; } /* Sections are given explicit desktop heights, which leave a tall empty band below content that has already reflowed and finished. */ #dm .dmRespRow, #dm .dmRespCol, #dm .dmRespRowsWrapper, #dm [class*="dmSection"] { height: auto !important; min-height: 0 !important; } /* Tables cannot reflow -- the tax facts and key dates pages are full of them -- so they scroll in their own box rather than widening the page. */ #dm table { display: block !important; overflow-x: auto !important; } /* Hero and banner rows read better edge to edge than as an inset card. */ #dm#dm .dmRespRow[class*="Hero"], #dm#dm .dmRespRow[class*="hero"], #dm#dm .dmRespRow[class*="banner"] { margin-left: 0 !important; margin-right: 0 !important; } } /* ---------- image columns (generated from this site's stylesheets) ---------- */ @media (max-width: 767px) { #dm .dmRespCol.u_1430980481, #dm .dmRespRow.u_1430980481 { min-height: 210px !important; background-size: cover !important; background-position: center !important; } }