/* ============================================================ Site-wide supplements to the Duda export CSS. Provides: theme color vars (for chrome-only pages), the navigation submenu behaviour Duda left to its JS runtime, mobile drawer accordion, gallery lightbox, scroll reveal. ============================================================ */ :root { --color_1: rgba(64, 46, 50, 1); --color_2: rgba(30, 30, 30, 1); --color_3: rgba(255, 255, 255, 1); --color_4: rgba(255, 179, 4, 1); } /* ---------- Layout fixes ---------- The Duda export set `margin:0` inline on ; without it the 8px UA margin pushes the fixed header down (gap above header) and forces an 8px horizontal scrollbar at every width. Restore the reset. */ html, body { margin: 0; padding: 0; } body { max-width: 100%; overflow-x: hidden; } /* `.dmInner{min-width:768px}` is meant for desktop/tablet; on phones it forces the whole layout wider than the viewport (horizontal scroll). Release it. */ @media (max-width: 767px) { #dm .dmInner, .dmInner { min-width: 0 !important; } #dm .dmHeaderContainer { min-width: 0 !important; } /* The desktop export omits Duda's mobile column-stacking (that lives in its separate mobile build). Without it, multi-column rows stay side-by-side and shrink to unreadable widths. Force columns to wrap to full width on phones. */ #dm .dmRespColsWrapper { flex-wrap: wrap !important; } #dm .dmRespCol { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; } /* Duda emits per-element `#dm .dmBody div.u_XXX{width:..;float:left}` rules that outrank a plain `.dmRespCol` selector. Match their specificity (and win on source order) so every column truly goes full width and un-floats on phones. */ #dm .dmBody div.dmRespCol, #dm .dmInner div.dmRespCol { width: 100% !important; max-width: 100% !important; float: none !important; } /* Desktop-sized horizontal margins (e.g. 80px, 132px) and inset widths (e.g. `calc(100% - 276px)`) squeeze paragraphs to a few px wide once the column is only ~310px. Reset to full width; let column padding be the gutter. */ #dm .dmBody div.dmNewParagraph, #dm .dmInner div.dmNewParagraph { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; max-width: 100% !important; } /* Photo galleries lay out in N columns on desktop; drop to 2-up on phones so images and card captions stay legible (Duda's mobile build does the same). */ #dm .photogallery-row { flex-wrap: wrap !important; } #dm .photogallery-column, #dm .photogallery-column.column-3, #dm .photogallery-column.column-4, #dm .photogallery-column.column-5, #dm .photogallery-column.column-6 { width: 50% !important; } #dm .gallery4inArow li { width: 50% !important; height: auto !important; } } @media (max-width: 480px) { /* single column on the smallest phones */ #dm .photogallery-column, #dm .photogallery-column.column-3, #dm .photogallery-column.column-4, #dm .photogallery-column.column-5, #dm .photogallery-column.column-6 { width: 100% !important; } #dm .gallery4inArow li { width: 100% !important; } } /* ---------- Desktop dropdown submenu (Duda ships no CSS for the container visibility; its runtime JS normally handles it) ---------- */ .dmHeaderContainer .unifiednav .unifiednav__item-wrap { position: relative; } .dmHeaderContainer .unifiednav__container_sub-nav { position: absolute; top: 100%; left: 0; z-index: 300; min-width: 240px; margin: 0; padding: 6px 0; list-style: none; background: #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16); border-radius: 4px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease; } .dmHeaderContainer .unifiednav__item-wrap:hover > .unifiednav__container_sub-nav, .dmHeaderContainer .unifiednav__item-wrap.dm-open > .unifiednav__container_sub-nav { opacity: 1; visibility: visible; transform: translateY(0); } .dmHeaderContainer .unifiednav__container_sub-nav .unifiednav__item-wrap { display: block; width: 100%; } .dmHeaderContainer .unifiednav__container_sub-nav .unifiednav__item { display: block; white-space: nowrap; } /* ---------- Mobile drawer accordion submenu ---------- */ #hamburger-drawer .unifiednav__container_sub-nav { display: none; list-style: none; margin: 0; padding: 0 0 0 14px; } #hamburger-drawer .unifiednav__item-wrap.dm-open > .unifiednav__container_sub-nav { display: block; } #hamburger-drawer .unifiednav__item_has-sub-nav { cursor: pointer; } /* ---------- Scroll reveal (progressive: only applied by JS) ---------- */ .dm-pre-anim { opacity: 0; transform: translateY(22px); } .dm-anim-in { opacity: 1 !important; transform: none !important; transition: opacity 0.7s ease, transform 0.7s ease; } /* ---------- Gallery lightbox ---------- */ .dm-lightbox { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.9); padding: 4vw; } .dm-lightbox.dm-open { display: flex; } .dm-lightbox img { max-width: 92vw; max-height: 84vh; object-fit: contain; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); } .dm-lightbox__caption { position: absolute; bottom: 4vw; left: 0; right: 0; text-align: center; color: #fff; font-size: 15px; padding: 0 6vw; } .dm-lightbox__btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.12); color: #fff; border: none; font-size: 34px; line-height: 1; width: 54px; height: 54px; border-radius: 50%; cursor: pointer; transition: background 0.2s ease; } .dm-lightbox__btn:hover { background: rgba(255, 255, 255, 0.28); } .dm-lightbox__prev { left: 3vw; } .dm-lightbox__next { right: 3vw; } .dm-lightbox__close { top: 3vw; right: 3vw; transform: none; } .dmPhotoGallery img[data-lightbox] { cursor: pointer; } /* ---------- Contact form embed sizing ---------- */ .lc-form-embed { width: 100%; min-height: 620px; } .lc-form-embed iframe { width: 100%; min-height: 620px; } /* ---------- Chrome-only pages (404 / thank-you) ---------- */ .dm-chrome { text-align: center; } .dm-chrome h1 { text-align: center; } .dm-chrome-cta { margin-top: 28px; display: flex; justify-content: center; } body[data-page-alias="404"] #dm_content, body[data-page-alias="thank-you"] #dm_content { min-height: 46vh; display: flex; align-items: center; padding: 60px 20px; } /* ============================================================ Revision round 3 ============================================================ */ /* 1. Header — nav menu top padding */ #dm .dmHeaderContainer .main-navigation.unifiednav { padding-top: 5px !important; } /* 2. Footer — spacing above social icons + reduced bottom padding (matches Duda's own `#dm .p_hfcontainer div.u_1953646477` specificity so the margin-top actually wins). */ #dm .p_hfcontainer div.u_1953646477 { margin-top: 22px !important; } #dm #fcontainer.dmFooter { padding-bottom: 30px !important; } /* 3. Hero overlays on all subpages (shared row u_1407848186) — darken for readability while keeping the background image visible. */ #dm .dmBody div.u_1407848186:before, #dm .dmBody .u_1407848186:before, #dm .dmBody div.u_1407848186 > .bgExtraLayerOverlay { background-color: var(--color_2) !important; opacity: 0.85 !important; } /* 5. Homepage "Same-Day ATV Service in Hibbing" — match top spacing to bottom */ #dm .dmBody div.u_1586112910 { padding-top: 80px !important; } /* 6. Coupon popup (snowmobile "Click to use coupon") */ .dm-coupon-modal { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.85); padding: 5vw; } .dm-coupon-modal.dm-open { display: flex; } .dm-coupon-modal__box { position: relative; background: #fff; border-radius: 6px; padding: 20px; max-width: 92vw; max-height: 90vh; display: flex; flex-direction: column; align-items: center; gap: 16px; overflow: auto; } .dm-coupon-modal__box img { max-width: 100%; max-height: 68vh; object-fit: contain; } .dm-coupon-modal__print { background: var(--color_1); color: #fff; border: none; border-radius: 50px; padding: 12px 34px; font-size: 16px; cursor: pointer; } .dm-coupon-modal__print:hover { opacity: 0.9; } .dm-coupon-modal__close { position: absolute; top: 6px; right: 12px; background: none; border: none; font-size: 30px; line-height: 1; cursor: pointer; color: #333; } .dmUseCoupon { cursor: pointer; } @media print { body.dm-printing-coupon > #dm { display: none !important; } body.dm-printing-coupon .dm-coupon-modal { position: static; background: none; display: flex !important; padding: 0; } body.dm-printing-coupon .dm-coupon-modal__box { box-shadow: none; } body.dm-printing-coupon .dm-coupon-modal__print, body.dm-printing-coupon .dm-coupon-modal__close { display: none !important; } } /* ============================================================ Revision round 4 — tablet & mobile responsiveness ============================================================ */ /* ---- Drawer nav submenu fix + sizing (applies wherever the drawer shows, ≤1024) ---- */ #dm #hamburger-drawer .unifiednav__item-wrap.dm-open > .unifiednav__container_sub-nav { max-height: 200em !important; opacity: 1 !important; overflow: visible !important; display: block !important; } #dm #hamburger-drawer .unifiednav__item .nav-item-text { font-size: 20px !important; } #dm #hamburger-drawer .unifiednav__container_sub-nav .unifiednav__item .nav-item-text { font-size: 16px !important; } #dm #hamburger-drawer .middleDrawerRow .unav-top > .unifiednav__item-wrap { margin: 2px 0 !important; } #dm #hamburger-drawer .unifiednav__container_sub-nav .unifiednav__item-wrap { margin: 0 !important; } /* ============================ TABLET (768–1024) ============================ */ @media (min-width: 768px) and (max-width: 1024px) { /* "Want more information?" band — single column: title on top, button below */ #dm .dmFooterContainer .u_1496439960 > .dmRespColsWrapper { flex-direction: column !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; } #dm .dmFooterContainer .u_1496439960 .dmRespColsWrapper > .dmRespCol { width: 100% !important; flex: 0 0 100% !important; text-align: center !important; } #dm .dmFooterContainer .u_1276324518, #dm .dmFooterContainer .u_1276324518 h3 { text-align: center !important; } /* Business Hours column — a little breathing room on the right */ #dm .dmFooterContainer .u_1699438134 { padding-right: 26px !important; } /* "Send Us a Message" gallery → clean 2-column grid (flatten the row groups) */ #dm [id="1328122636"] .layout-container { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 4px !important; } #dm [id="1328122636"] .photogallery-row { display: contents !important; } #dm [id="1328122636"] .photogallery-column { width: auto !important; max-width: none !important; flex: initial !important; } #dm [id="1328122636"] > .dmPhotoGalleryHolder { display: none !important; } /* Homepage: single-column, image-on-top for text/image split sections */ #dm .u_1778948876 > .dmRespColsWrapper, /* Complete Off-Road Vehicle Repairs */ #dm .u_1854834250 > .dmRespColsWrapper, /* Powersports Parts and Equipment */ #dm .u_1350868433 > .dmRespColsWrapper { /* Why Hibbing Riders Trust */ flex-direction: column-reverse !important; flex-wrap: wrap !important; } #dm .u_1778948876 div.dmRespCol, #dm .u_1854834250 div.dmRespCol, #dm .u_1350868433 div.dmRespCol { width: 100% !important; max-width: 100% !important; float: none !important; } /* empty background-image columns need height to show */ #dm .u_1736679283, /* Complete Off-Road image */ #dm .u_1325992411 { /* Why Hibbing image */ min-height: 320px !important; background-position: center center !important; background-size: cover !important; } /* Performance Upgrades .photogallery-row → 2 columns (row is already flex) */ #dm [id="1782665089"] .photogallery-row { display: flex !important; flex-wrap: wrap !important; } #dm [id="1782665089"] .photogallery-column { flex: 0 0 50% !important; width: 50% !important; max-width: 50% !important; box-sizing: border-box !important; } /* Want-more band button centered too */ #dm .dmFooterContainer .u_1496439960 a.dmButtonLink { margin-left: auto !important; margin-right: auto !important; } } /* ============================ MOBILE (≤767) ============================ */ @media (max-width: 767px) { /* --- Typography --- */ #dm .dmBody h1, #dm .dmBody h1 span, #dm .dmBody h1 font, #dm .dmFooterContainer h1 { font-size: 35px !important; line-height: 1.2 !important; } #dm .dmBody h2, #dm .dmBody h2 span, #dm .dmBody h2 font, #dm .dmFooterContainer h2, #dm .dmFooterContainer h2 span { font-size: 28px !important; line-height: 1.25 !important; } /* --- Center all content, keep lists & accordions left-aligned --- */ #dm .dmBody .dmRespCol, #dm .dmBody .dmNewParagraph, #dm .dmBody .dmNewParagraph p, #dm .dmFooterContainer .dmRespCol { text-align: center !important; } #dm .dmBody ul, #dm .dmBody ol, #dm .dmBody .custom-list-6, #dm .dmBody .custom-list-6 li, #dm .dmBody .defaultList, #dm .dmBody .defaultList li, #dm .dmBody .dmAccordion, #dm .dmBody .dmAccordion * { text-align: left !important; } /* --- Center all buttons (match Duda's per-element `a.u_XXX` specificity) --- */ #dm .dmBody a.dmButtonLink, #dm .dmInner a.dmButtonLink, #dm .dmFooterContainer a.dmButtonLink { margin-left: auto !important; margin-right: auto !important; float: none !important; display: block !important; } /* --- Consistent section spacing (non-hero rows) --- */ #dm .dmBody .dmRespRowsWrapper > .dmRespRow:not(.u_1243667655):not(.u_1407848186), #dm .dmBody .innerPageTmplBox > .dmRespRow:not(.u_1243667655):not(.u_1407848186) { padding: 46px 20px !important; } /* heroes: keep presence but trim side gutter */ #dm .dmBody .u_1243667655, #dm .dmBody .u_1407848186 { padding-left: 20px !important; padding-right: 20px !important; } /* Columns carry asymmetric desktop side-padding (e.g. 40px/20px) that throws off centering and consistency; let the section row own the gutter. */ #dm .dmBody div.dmRespCol { padding-left: 0 !important; padding-right: 0 !important; } /* --- Homepage: "Built for the Trails" button spacing --- */ #dm .dmBody .u_1149994169 { margin-top: 22px !important; margin-bottom: 34px !important; } /* --- Homepage: Performance Upgrades .photogallery-row → single column --- */ #dm [id="1782665089"] .layout-container { display: block !important; } #dm [id="1782665089"] .photogallery-row { display: block !important; } #dm [id="1782665089"] .photogallery-column { width: 100% !important; } /* --- Homepage: Powersports & Why-Hibbing → single column, image on top --- */ #dm .u_1854834250 > .dmRespColsWrapper, #dm .u_1350868433 > .dmRespColsWrapper { flex-direction: column-reverse !important; } /* Why-Hibbing image column is an empty background column — give it height */ #dm .u_1325992411 { min-height: 300px !important; background-position: center center !important; background-size: cover !important; } /* --- Homepage: "Learn More About" — tighten gap under the H2 --- */ #dm .dmBody div.u_1134404477 { margin-bottom: 4px !important; padding-bottom: 0 !important; } #dm .dmBody div.u_1990036082 { margin-top: 8px !important; } /* --- Send Us a Message gallery → clean 2-col grid + hide empty box (mobile) --- */ #dm [id="1328122636"] .layout-container { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 4px !important; } #dm [id="1328122636"] .photogallery-row { display: contents !important; } #dm [id="1328122636"] .photogallery-column { width: auto !important; max-width: none !important; flex: initial !important; } #dm [id="1328122636"] > .dmPhotoGalleryHolder { display: none !important; } /* --- About: Payment Types logos → 3 columns, even spacing --- */ #dm [id="1559362020"] .photogallery-row { flex-wrap: wrap !important; } #dm [id="1559362020"] .photogallery-column { width: 33.3333% !important; padding: 8px !important; } /* --- Brands We Carry button — was collapsing to a sliver; give it real width --- */ #dm .dmBody a.u_1368967168 { width: auto !important; min-width: 200px !important; max-width: 100% !important; white-space: nowrap !important; padding-left: 30px !important; padding-right: 30px !important; } /* --- Dirt-to-Snow: video container full width, no margin (match Duda's `#dm .dmBody div.u_1021851130` specificity to win) --- */ #dm .dmBody div.u_1021851130 { margin: 0 !important; width: 100% !important; max-width: 100% !important; } #dm .dmBody div.u_1021851130 .innerYoutubeExt { width: 100% !important; } /* ---------------- Footer (mobile) ---------------- */ #dm .dmFooterContainer .dmRespCol, #dm .dmFooterContainer .dmNewParagraph, #dm .dmFooterContainer .dmNewParagraph p { text-align: center !important; } #dm .dmFooterContainer .dmSocialHub { margin-left: auto !important; margin-right: auto !important; text-align: center !important; } /* reduce footer spacing */ #dm #fcontainer.dmFooter { padding-top: 30px !important; padding-bottom: 24px !important; } #dm .dmFooterContainer .dmRespRow { padding-top: 0 !important; } /* move copyright to the very bottom: dissolve the logo column so logo & copyright become order-able flex items alongside the other columns */ #dm .dmFooterContainer .u_1632155419 > .dmRespColsWrapper { flex-direction: column !important; } #dm .dmFooterContainer .u_1063824722 { display: contents !important; } /* footer logo — centered, no stray right margin */ #dm .dmFooterContainer .u_1390883653 { order: 0 !important; margin: 0 auto 18px !important; text-align: center !important; width: 100% !important; } #dm .dmFooterContainer .u_1390883653 img { margin-left: auto !important; margin-right: auto !important; } /* Business Hours container full width */ #dm .dmFooterContainer .u_1699438134 { order: 1 !important; width: 100% !important; } #dm .dmFooterContainer .u_1513262892 { order: 2 !important; width: 100% !important; } /* social icons — centered, no side margins */ #dm .p_hfcontainer div.u_1953646477 { margin: 14px auto 0 !important; width: 100% !important; text-align: center !important; float: none !important; } /* copyright at bottom with a 30px top margin (match Duda's `.p_hfcontainer div.u_1532900622{margin:207px..}` specificity so ours wins) */ #dm .dmFooterContainer .u_1532900622 { order: 3 !important; text-align: center !important; } #dm .p_hfcontainer div.u_1532900622 { margin: 30px 0 0 !important; } #dm .dmFooterContainer .u_1532900622 .copyright { justify-content: center !important; } } /* ============================================================ Revision round 5 ============================================================ */ /* --- Drawer nav: remove item top/bottom padding + fix collapsed buttons (≤1024) --- */ #dm #hamburger-drawer .unifiednav__item { padding-top: 6px !important; padding-bottom: 6px !important; } #dm #hamburger-drawer a.dmButtonLink { width: auto !important; min-width: 200px !important; max-width: 90% !important; white-space: nowrap !important; margin-left: auto !important; margin-right: auto !important; padding-left: 30px !important; padding-right: 30px !important; } @media (max-width: 767px) { /* Subpage hero H1 — center-aligned */ #dm .dmBody .u_1407848186 h1, #dm .dmBody .u_1407848186 h1 span { text-align: center !important; } /* Complete Off-Road Vehicle Repairs — single column, image on top */ #dm .u_1778948876 > .dmRespColsWrapper { flex-direction: column-reverse !important; } #dm .u_1736679283 { min-height: 300px !important; background-position: center center !important; background-size: cover !important; } /* Powersports & Why-Hibbing — extra top spacing above the H2 (below the image) */ #dm .dmBody .u_1110768059 { padding-top: 26px !important; } /* Powersports content col */ #dm .dmBody .u_1456964352 { padding-top: 26px !important; } /* Why-Hibbing content col */ /* Learn More About — further tighten the gap under the H2 */ #dm .dmBody div.u_1990036082 { margin-top: 2px !important; } /* ATV/UTV Snow Plows — "We Sell and Service Plows" brand logos → 2 columns */ #dm .u_1194103587 .dmRespColsWrapper > .dmRespCol { width: 50% !important; max-width: 50% !important; flex: 0 0 50% !important; } } /* ============================================================ Revision round 6 — tablet & mobile refinements ============================================================ */ /* ============================ TABLET (768–1024) ============================ */ @media (min-width: 768px) and (max-width: 1024px) { /* --- General: buttons hug their text. Duda pins each button to a fixed pixel width (e.g. `a.u_1064131676{width:280px}`) that leaves short labels floating in extra width. `fit-content` + symmetric padding shrinks them to the label; `margin:auto` re-centers the now-narrower block. Matches Duda's per-element `#dm .dmBody a.u_XXXX` specificity (1,2,1) and wins on source order. --- */ #dm .dmBody a.dmButtonLink, #dm .dmInner a.dmButtonLink, #dm .dmFooterContainer a.dmButtonLink { width: fit-content !important; min-width: 0 !important; max-width: 100% !important; white-space: nowrap !important; padding-left: 30px !important; padding-right: 30px !important; margin-left: auto !important; margin-right: auto !important; float: none !important; } /* The button label span defaults to `white-space:normal`; without this it wraps and `fit-content` collapses to the narrow wrapped width. Keep it on one line. */ #dm .dmBody a.dmButtonLink .text, #dm .dmInner a.dmButtonLink .text, #dm .dmFooterContainer a.dmButtonLink .text { white-space: nowrap !important; } /* --- Homepage split sections: extra top spacing above the H2. Once round-4 column-reverses these rows the image sits directly on top of the H2. The content columns carry Duda's `padding:0 40px 0 0` (padding-top:0), so match that specificity to add the gap above the heading. --- */ #dm .dmBody div.u_1038449616, /* Complete Off-Road Vehicle Repairs */ #dm .dmBody div.u_1110768059, /* Powersports Parts and Equipment */ #dm .dmBody div.u_1456964352 { /* Why Hibbing Riders Trust */ padding-top: 40px !important; } } /* ============================ MOBILE (≤767) ============================ */ @media (max-width: 767px) { /* --- Footer logo: truly centered. Duda pins it with `margin:0 172px 0 0` at (1,2,1) specificity, which outranks round-4's `.dmFooterContainer` centering; match the specificity so `margin:0 auto` wins and the logo centers. --- */ #dm .p_hfcontainer div.u_1390883653 { margin: 0 auto 18px !important; } /* --- Footer: drop the 15px right padding still on the Business Hours and Contact Us columns (Duda zeroed only their padding-left). --- */ #dm .p_hfcontainer div.u_1699438134, #dm .p_hfcontainer div.u_1513262892 { padding-right: 0 !important; } /* --- Homepage hero "Built for the Trails": tighten the gap under the H2 and add room below the button. Duda's `a.u_1149994169{margin:50px 0 0}` (1,2,1) outranks round-4's `.dmButtonLink` centering, so re-declare at that specificity: 14px above, 42px below, auto sides to keep it centered. --- */ #dm .dmBody a.u_1149994169 { margin: 14px auto 42px !important; } /* --- Homepage "Powersports" & "Why Hibbing": more top spacing above the H2. Round-5's `.u_XXXX{padding-top}` lost to Duda's `div.u_XXXX{padding:0 40px 0 0}` — re-declare at (1,2,1) so the gap below the stacked image applies. --- */ #dm .dmBody div.u_1110768059, #dm .dmBody div.u_1456964352 { padding-top: 40px !important; } /* --- Homepage "Learn More About": the video lived in a fixed 316px-tall box that left dead space under the H2. Let the box take a 16:9 shape so it hugs the video, drop the inner 30px offset, and tighten the top margin. --- */ #dm .dmBody div.u_1990036082 { height: auto !important; aspect-ratio: 16 / 9 !important; margin-top: 6px !important; } #dm .dmBody div.u_1990036082 .innerYoutubeExt { height: 100% !important; padding-top: 0 !important; } /* --- About hero: center the "Business Hours" title. generated.css pins it left via `[id="1614907714"]` (loads after this file), so out-specify it with a class chain (1,2,0 > the 1,0,0 id selector). --- */ #dm .dmBody .u_1614907714, #dm .dmBody .u_1614907714 h3 { text-align: center !important; } /* --- "Send Us a Message…" (all subpages): reduce the bottom spacing below the H2 so the form/gallery sits closer. Round-4's section-padding rule is (1,5,0); re-use its `:not()` chain plus the row class to exceed it. --- */ #dm .dmBody .dmRespRowsWrapper > .dmRespRow.u_1477086242:not(.u_1243667655):not(.u_1407848186), #dm .dmBody .innerPageTmplBox > .dmRespRow.u_1477086242:not(.u_1243667655):not(.u_1407848186) { padding-bottom: 8px !important; } } /* ============================================================ Revision round 7 ============================================================ */ /* ---- TABLET: homepage hero "Built for the Trails" button ---- The round-6 rule centres every tablet button (margin:auto), but this button lives in a LEFT-aligned column beneath a left-aligned H2. Centring pushed it out of line with the heading (most visible near 1024px). Left-align it so it sits directly under the heading, matching the desktop/live layout. Same (1,2,1) specificity as the round-6 rule, declared later so it wins. */ @media (min-width: 768px) and (max-width: 1024px) { #dm .dmBody a.u_1149994169 { margin-left: 0 !important; margin-right: auto !important; } } /* ---- MOBILE: footer "Business Hours" block centered ---- The hours widget is a fixed-width block sitting flush to the column's left edge. Centre it (margin:auto) so the heading, day rows, and times read as one horizontally-centered group, consistent with the rest of the footer. */ @media (max-width: 767px) { #dm .dmFooterContainer .u_1699438134 .dmHoursOfOperation { margin-left: auto !important; margin-right: auto !important; float: none !important; } } /* ============================================================ Revision round 8 ============================================================ */ /* ---- TABLET: homepage hero "Built for the Trails" button fits on one line ---- The button lives in a `large-4` (33%) column. At tablet widths that column's inner width (~179px at 768) is narrower than the "Contact Us For Details" label (175px) plus its padding, so the fit-content button was capped by the column and the text spilled past the pill. Widen the hero's text column on tablet (48/52) so the button fits on one line at a consistent 16px with its normal 30px padding. `#dm .dmBody div.u_XXXX` (1,2,1) outranks the `.dmDesktopBody .dmRespRow .large-4` width rule (0,3,0). */ @media (min-width: 768px) and (max-width: 1024px) { #dm .dmBody div.u_1208888266 { width: 48% !important; max-width: 48% !important; } #dm .dmBody div.u_1144538957 { width: 52% !important; max-width: 52% !important; } } /* ============================================================ Revision round 9 — Contact page "Contact Han's Motorsports" section ============================================================ */ /* ---- DESKTOP + TABLET: trim the section's bottom spacing ---- The row carries 70px top/bottom padding (page style.css, `*#dm *.dmBody div.u_1406293227`, spec 1,2,1). Match that specificity so the reduced bottom padding wins on source order. Mobile is handled separately below (round-4's mobile section-padding rule outranks this one). */ #dm .dmBody div.u_1406293227 { padding-bottom: 30px !important; } /* ---- TABLET: single-column layout — details on top, form below ---- The two halves are `large-6` (50%, spec 0,3,0). Force them full width so the left column (contact details + hours) stacks above the right column (heading + form); DOM order already puts the details first. */ @media (min-width: 768px) and (max-width: 1024px) { /* The wrapper is a nowrap flexbox, so widening the children alone won't stack them — let it wrap, then give each half a full-width flex basis. The left column has no `u_` class (only `dmRespCol … large-6`), so target by id. */ #dm .dmBody div[id="1200460822"] { flex-wrap: wrap !important; } #dm .dmBody div[id="1115521344"], #dm .dmBody div[id="1889974532"] { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; float: none !important; } } /* ---- MOBILE: center the Business Hours block, center the form heading, and tighten the bottom spacing ---- */ @media (max-width: 767px) { /* Business Hours widget sits flush-left in its column; center the block so the days/times read as one centered group (matches the reference). */ #dm .dmBody .u_1000203262 { margin-left: auto !important; margin-right: auto !important; float: none !important; } /* "Tell us your details…" heading carries an explicit `text-align-left` class (0,1,0); out-specify it so the heading centers. */ #dm .dmBody .u_1750168809 h4 { text-align: center !important; } /* Reduce the section's bottom spacing. Round-4's mobile section-padding rule is (1,5,0); reuse its `:not()` chain plus the row class to exceed it. */ #dm .dmBody .dmRespRowsWrapper > .dmRespRow.u_1406293227:not(.u_1243667655):not(.u_1407848186), #dm .dmBody .innerPageTmplBox > .dmRespRow.u_1406293227:not(.u_1243667655):not(.u_1407848186) { padding-bottom: 24px !important; } } /* ============================================================ Revision round 10 — Contact page map ============================================================ */ /* The Duda map widget's mapbox runtime isn't bundled in this static export, so its `.mapContainer` was empty. The build pipeline now injects a keyless Google Maps embed; make that iframe fill the widget's existing band. The `.inlineMap` widget is `height:200px; width:100%` (full-bleed) and its `.mapContainer` (gc_contact_2) is already `height:100%; width:100%`, so the sizing/alignment/responsiveness match the site — the iframe just needs to fill the container at every breakpoint. */ #dm .inlineMap .mapContainer iframe { display: block; width: 100% !important; height: 100% !important; border: 0 !important; } /* The map row is full-bleed (edge-to-edge) on desktop/tablet, but round-4's mobile section-padding rule (1,5,0) adds 20px side gutters on phones. Zero the sides so the map stays full-bleed on mobile too, matching the other breakpoints; keep the vertical spacing. */ @media (max-width: 767px) { #dm .dmBody .dmRespRowsWrapper > .dmRespRow.u_1730781599:not(.u_1243667655):not(.u_1407848186), #dm .dmBody .innerPageTmplBox > .dmRespRow.u_1730781599:not(.u_1243667655):not(.u_1407848186) { padding-left: 0 !important; padding-right: 0 !important; } }