/* ========================================================================== Custom Elite Detail — project overrides Holds the few styles that were inline in the Duda export (moved out to keep markup free of inline CSS) plus the runtime bits Duda's JS used to apply. ========================================================================== */ /* Body reset (was inline style="padding:0;margin:0" on ) */ body#dmRoot { padding: 0; margin: 0; } /* Clip the off-screen hamburger drawer so it never creates horizontal scroll (was causing the tablet/mobile "layout break" and overflow). */ html, body#dmRoot { overflow-x: hidden; max-width: 100%; } /* Duda hides elements flagged for scroll animations (visibility:hidden) and its runtime JS reveals them. Every animation in this export is configured as trigger:"none" (no entrance animation), so the correct final state is simply visible. We ship no Duda runtime, so reveal them here. */ #dmRoot .flex-element [data-anim-extended], #dmRoot .flex-element[data-anim-extended] { visibility: visible !important; } /* -------------------------------------------------------------------------- Hamburger drawer (mobile nav) Duda's runtime toggled `layout-drawer_open` on the outer container and set the drawer transform via JS. We reproduce the open/close transform here. -------------------------------------------------------------------------- */ .layout-drawer { transition: transform 0.3s ease; } .runtime-module-container.layout-drawer_open .layout-drawer, .runtime-module-container.layout-drawer_open .layout-drawer[data-origin="side-reverse"] { transform: translate(0, 0); } /* Overlay behind the open drawer */ .layout-drawer-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 12; } .runtime-module-container.layout-drawer_open .layout-drawer-overlay { opacity: 1; pointer-events: all; } body.ce-no-scroll { overflow: hidden; } /* Mobile drawer submenu accordion */ #hamburger-drawer .unifiednav__container_sub-nav { display: none; } #hamburger-drawer .unifiednav__item-wrap.ce-sub-open > .unifiednav__container_sub-nav { display: block; } /* -------------------------------------------------------------------------- Embedded LeadConnector contact form (replaces the Duda form widget) (iframe styling lives here so no inline CSS is used in markup) -------------------------------------------------------------------------- */ .ce-embed-form { width: 100%; } .ce-embed-iframe { width: 100%; min-height: 556px; border: none; border-radius: 3px; display: block; } /* LeadConnector reputation reviews widget (was inline styled) */ .lc_reviews_widget { width: 100%; min-width: 100%; min-height: 350px; border: 0; display: block; } /* -------------------------------------------------------------------------- Simple standalone pages (Thank You, 404) -------------------------------------------------------------------------- */ .ce-simple-section { padding: 90px 20px 110px; text-align: center; background-color: #1a1a1a; } .ce-simple-group { max-width: 720px; margin: 0 auto; } .ce-simple-section .ce-accent { color: #e60000; font-size: 64px; margin: 0 0 12px; } .ce-simple-section .ce-muted { color: #ffffff; margin: 0 0 18px; } .ce-simple-btn { display: inline-flex; align-items: center; justify-content: center; margin-top: 12px; padding: 14px 34px; background: #e60000; border-radius: 4px; text-decoration: none; } .ce-simple-btn .text { color: #ffffff; font-weight: 600; } .ce-simple-btn:hover { background: #c40000; } /* -------------------------------------------------------------------------- Blog (index cards + post article) -------------------------------------------------------------------------- */ .ce-blog-section { padding: 60px 20px 90px; background-color: #ffffff; } .ce-blog-wrap { max-width: 1100px; margin: 0 auto; width: 100%; } .ce-blog-title { color: #e60000; text-align: center; margin: 0 0 40px; font-size: 44px; } .ce-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .ce-blog-card { display: flex; flex-direction: column; background: #1a1a1a; border-radius: 8px; overflow: hidden; text-decoration: none; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12); transition: transform 0.2s ease, box-shadow 0.2s ease; } .ce-blog-card:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2); } .ce-blog-card-img { aspect-ratio: 16 / 10; overflow: hidden; } .ce-blog-card-img img { width: 100%; height: 100%; object-fit: cover; } .ce-blog-card-body { padding: 20px 22px 24px; } .ce-blog-date { color: #e60000; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 8px; } .ce-blog-card-body h3 { color: #ffffff; font-size: 20px; margin: 0 0 10px; line-height: 1.3; } .ce-blog-card-body p { color: #cfcfcf; font-size: 15px; line-height: 1.55; margin: 0 0 14px; } .ce-blog-readmore { color: #e60000; font-weight: 600; font-size: 15px; } /* Blog post article */ .ce-blog-post { max-width: 820px; margin: 0 auto; } .ce-blog-hero { width: 100%; height: auto; border-radius: 10px; margin-bottom: 26px; display: block; } .ce-blog-post h1 { color: #111111; font-size: 40px; line-height: 1.15; margin: 0 0 10px; } .ce-blog-post h2 { color: #111111; font-size: 28px; margin: 34px 0 12px; } .ce-blog-post h3 { color: #111111; font-size: 22px; margin: 26px 0 10px; } .ce-blog-post p { color: #333333; font-size: 17px; line-height: 1.7; margin: 0 0 18px; } .ce-blog-post ul, .ce-blog-post ol { color: #333333; font-size: 17px; line-height: 1.7; margin: 0 0 18px; padding-left: 24px; } .ce-blog-post li { margin-bottom: 8px; } .ce-blog-post a { color: #e60000; text-decoration: underline; } .ce-blog-post .ce-blog-date { margin-bottom: 20px; } .ce-blog-back { margin-top: 34px; } @media (max-width: 1024px) { .ce-blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .ce-blog-grid { grid-template-columns: 1fr; } .ce-blog-post h1 { font-size: 30px; } } /* -------------------------------------------------------------------------- Lightbox (gallery + linked images) -------------------------------------------------------------------------- */ .ce-lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.9); display: flex; align-items: center; justify-content: center; z-index: 100000; opacity: 0; visibility: hidden; transition: opacity 0.25s ease; } .ce-lightbox.is-open { opacity: 1; visibility: visible; } .ce-lightbox__img { max-width: 92vw; max-height: 86vh; object-fit: contain; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.6); } .ce-lightbox__caption { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: #fff; font-size: 15px; padding: 0 20px; } .ce-lightbox__btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.4); color: #fff; border: none; font-size: 34px; line-height: 1; width: 54px; height: 64px; cursor: pointer; transition: background 0.2s ease; } .ce-lightbox__btn:hover { background: rgba(0, 0, 0, 0.7); } .ce-lightbox__btn--prev { left: 10px; } .ce-lightbox__btn--next { right: 10px; } .ce-lightbox__close { position: absolute; top: 14px; right: 18px; background: none; border: none; color: #fff; font-size: 40px; line-height: 1; cursor: pointer; } .ce-lightbox__counter { position: absolute; top: 20px; left: 20px; color: #fff; font-size: 15px; opacity: 0.85; } /* ========================================================================== Revisions ========================================================================== */ /* --- Global: vertically center button text (fixes top/bottom padding mismatch on buttons whose fixed height was smaller than the padded text) --- */ #dmRoot .dmButtonLink { display: inline-flex !important; align-items: center; justify-content: center; } /* --- Homepage hero background slider --- */ .ce-has-hero-slider { position: relative; /* hide the container's own (static) background so only the active slide shows */ background-image: none !important; } .ce-hero-slides { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .ce-hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; } .ce-hero-slide.is-active { opacity: 1; } .ce-has-hero-slider > *:not(.ce-hero-slides) { position: relative; z-index: 1; } /* --- Contact: right-align opening hours; embedded map --- */ .page-contact-us .open-hours-item { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .page-contact-us .open-hours-item dd { margin-left: auto; text-align: right; } .ce-map { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; } /* Equal-height cards in the "Detailing Company – Granbury : Contact" section */ #dmRoot.page-contact-us .flex-element.grid > .flex-element.group:has(.ce-map) { align-items: stretch; } /* Center the divider under the "Detailing Company – Granbury : Contact" heading */ #dmRoot.page-contact-us [data-external-id="1155113419"] { align-self: center; margin-left: auto; margin-right: auto; } /* --- Mr. Bubbles: center the "What We Do" divider (parent column pins items to flex-start, so align-self:center centers this one) --- */ #dmRoot.page-car-mr-bubbles-car-wash [data-external-id="1108501797"] { align-self: center; margin-left: auto; margin-right: auto; } /* ========================================================================== Header on tablet + mobile (<= 1024px) Per-page CSS sizes the logo/hamburger inconsistently. Force a consistent layout on all pages: logo left at a fixed size, hamburger hard-right. ========================================================================== */ @media (max-width: 1024px) { #flex-header .flex-element.grid > .flex-element.group { align-items: center; } /* logo: consistent size and left, group free to fit it */ #flex-header .flex-element.group:has(> .flex-element.widget-wrapper .imageWidget) { width: auto !important; flex: 0 0 auto !important; } #flex-header .imageWidget, #flex-header .imageWidget img { width: 170px !important; max-width: 45vw !important; height: auto !important; } /* hamburger group: hard right */ #flex-header .flex-element.group:has(> .flex-element.widget-wrapper .hamburgerButton) { margin-left: auto !important; flex: 0 0 auto !important; } } /* ========================================================================== Tablet responsiveness (768px - 1024px) ========================================================================== */ @media (min-width: 768px) and (max-width: 1024px) { /* Footer: three equal columns fitting the screen (matches live) */ .dmFooterContainer .flex-element.grid { grid-template-columns: 1fr !important; } .dmFooterContainer .flex-element.grid > .flex-element.group { display: flex; flex-wrap: nowrap; width: 100% !important; max-width: 100% !important; } .dmFooterContainer .flex-element.grid > .flex-element.group > .flex-element.group { flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-width: 0; } /* Service cards (Our Services / Guarantees / We Serve): 2-column grid (Our Services | Our Guarantees, then We Serve below) — matches live */ #dmRoot.ce-service-page #dm_content .flex-element.grid > .flex-element.group:has(> .flex-element.group .graphicWidget) { flex-wrap: wrap !important; align-items: stretch !important; } #dmRoot.ce-service-page #dm_content .flex-element.grid > .flex-element.group:has(> .flex-element.group .graphicWidget) > .flex-element.group { flex: 0 0 48% !important; width: 48% !important; max-width: 48% !important; } /* Contact: form card full width (stack the two columns) */ #dmRoot.page-contact-us .flex-element.group:has(> .flex-element.group > .flex-element.widget-wrapper .ce-embed-form) { flex-wrap: wrap; } #dmRoot.page-contact-us .flex-element.group:has(> .flex-element.widget-wrapper .ce-embed-form) { flex: 0 0 100%; width: 100%; max-width: 100%; } .page-contact-us .ce-embed-form, .page-contact-us .ce-embed-iframe { width: 100%; } } /* ========================================================================== Gallery / Reviews hero + tab titles on tablet & mobile (<= 1024px) ========================================================================== */ @media (max-width: 1024px) { /* Compact, centered hero (the row group carries a 450px min-height + big top padding in the export) */ .page-gallery #dmFirstContainer > div [data-layout-section]:first-of-type .flex-element.grid > .flex-element.group, .page-reviews #dmFirstContainer > div [data-layout-section]:first-of-type .flex-element.grid > .flex-element.group { min-height: 0 !important; padding-top: 110px !important; padding-bottom: 45px !important; } /* center the heading + divider (their column pins items to flex-start) */ .page-gallery #dmFirstContainer > div [data-layout-section]:first-of-type .flex-element.group, .page-reviews #dmFirstContainer > div [data-layout-section]:first-of-type .flex-element.group { align-items: center !important; } .page-gallery #dmFirstContainer > div [data-layout-section]:first-of-type .dmNewParagraph, .page-gallery #dmFirstContainer > div [data-layout-section]:first-of-type .dmNewParagraph *, .page-reviews #dmFirstContainer > div [data-layout-section]:first-of-type .dmNewParagraph, .page-reviews #dmFirstContainer > div [data-layout-section]:first-of-type .dmNewParagraph * { text-align: center !important; } .page-gallery #dmFirstContainer > div [data-layout-section]:first-of-type .dmDividerWrapper, .page-reviews #dmFirstContainer > div [data-layout-section]:first-of-type .dmDividerWrapper { margin-left: auto !important; margin-right: auto !important; } /* Mr. Bubbles gallery has a single tab with a long title: wrap it to fit */ .page-car-mr-bubbles-car-wash [data-layout-type="tabs"] .tabsControlContainer .tab-title { white-space: normal; overflow-wrap: break-word; font-size: 15px; line-height: 1.35; } .page-car-mr-bubbles-car-wash [data-layout-type="tabs"] .tabsControlContainer [role="tab"] { width: 100%; white-space: normal; } /* Gallery page has multiple short tabs: keep each on one line, scroll the bar */ .page-gallery [data-layout-type="tabs"] .tab-title { white-space: nowrap; } .page-gallery [data-layout-type="tabs"] .tabsControlContainer { overflow-x: auto; } } /* ========================================================================== Mobile responsiveness (<= 767px) ========================================================================== */ @media (max-width: 767px) { /* Header: phone (left) and hamburger (right) pulled out of flow so the logo is the only in-flow item and centers exactly at the viewport middle. */ #flex-header .flex-element.grid > .flex-element.group { position: relative; justify-content: center; align-items: center; min-height: 74px; } #flex-header .imageWidget, #flex-header .imageWidget img { width: 155px !important; max-width: 42vw !important; } /* the logo group is wider than the logo image — center the image within it */ #flex-header .flex-element.group:has(> .flex-element.widget-wrapper .imageWidget) { justify-content: center !important; text-align: center !important; } #flex-header .flex-element.group:has(> .flex-element.widget-wrapper .imageWidget) .imageWidget { margin-left: auto !important; margin-right: auto !important; } #flex-header .flex-element.group:has(> .flex-element.widget-wrapper .graphicWidget) { position: absolute !important; left: 14px; top: 50%; transform: translateY(-50%); margin: 0 !important; } /* Hamburger: normalize the group (per-page CSS gives it different widths / right padding, so its distance from the edge varied). Fix it to a 34px box 24px from the right edge on every page — matching the home page. */ #flex-header .flex-element.group:has(> .flex-element.widget-wrapper .hamburgerButton) { position: absolute !important; right: 24px !important; top: 50%; transform: translateY(-50%); width: 34px !important; min-width: 34px !important; padding: 0 !important; margin: 0 !important; justify-content: center !important; } #flex-header .flex-element.group:has(> .flex-element.widget-wrapper .hamburgerButton) > .flex-element.widget-wrapper { width: 34px !important; padding: 0 !important; margin: 0 !important; } #flex-header .hamburgerButton { width: 34px !important; height: 34px !important; padding: 0 !important; } #flex-header .hamburgerButton svg { width: 100% !important; height: 100% !important; } /* Stack every multi-column content row vertically */ #dm_content .flex-element.grid > .flex-element.group { flex-direction: column; } #dm_content .flex-element.grid > .flex-element.group > .flex-element.group { width: 100% !important; max-width: 100% !important; flex: 1 1 auto; } /* Service pages: image (background column) on top, text below */ .ce-service-page #dm_content .flex-element.grid > .flex-element.group > .flex-element.group:has(.dmNewParagraph) { order: 2; } /* give the background-image column a visible height when stacked */ #dmRoot.ce-service-page #dm_content .flex-element.grid > .flex-element.group > .flex-element.group:not(:has(.dmNewParagraph)) { min-height: 240px !important; background-size: cover !important; background-position: center !important; } /* Mr. Bubbles "Our Car Wash Services": image on top, fully visible */ #dmRoot.page-car-mr-bubbles-car-wash [data-anchor] .flex-element.grid > .flex-element.group > .flex-element.group:has(.dmNewParagraph) { order: 2; } #dmRoot.page-car-mr-bubbles-car-wash [data-anchor] .flex-element.grid > .flex-element.group > .flex-element.group:not(:has(.dmNewParagraph)) { min-height: 220px !important; background-size: cover !important; background-position: center !important; } /* Center content by default; keep lists left-aligned */ #dm_content .dmNewParagraph, #dm_content .dmNewParagraph p, #dm_content .dmNewParagraph h1, #dm_content .dmNewParagraph h2, #dm_content .dmNewParagraph h3, #dm_content .dmNewParagraph h4 { text-align: center; } #dm_content .dmNewParagraph ul, #dm_content .dmNewParagraph ol { text-align: left; display: inline-block; text-align: left; } /* Center icons and dividers (hr) within cards/sections on mobile */ #dm_content [data-widget-type="graphic"], #dm_content [data-widget-type="divider"] { align-self: center; } #dm_content .graphicWidget, #dm_content .dmDividerWrapper { margin-left: auto !important; margin-right: auto !important; text-align: center; } /* Service-page cards with an icon (Our Services / Guarantees / We Serve): center the icon, title, hr and list block */ #dmRoot #dm_content .flex-element.group:has(> .flex-element.widget-wrapper .graphicWidget) { align-items: center !important; text-align: center; } #dmRoot #dm_content .flex-element.group:has(> .flex-element.widget-wrapper .graphicWidget) .dmNewParagraph { text-align: center; } /* Homepage hero heading centered */ .page-home #dmFirstContainer .flex-element.section:first-of-type .dmNewParagraph, .page-home #dmFirstContainer .flex-element.section:first-of-type .dmNewParagraph * { text-align: center !important; } /* Hero on service pages + Mr. Bubbles: match the centered homepage. Keep the widgets FULL WIDTH (don't shrink via align-items:center — that narrowed the heading and forced excess wrapping) and center via text-align. */ #dmRoot.ce-service-page #dm_content [data-layout-section]:first-of-type .flex-element.group, #dmRoot.page-car-mr-bubbles-car-wash #dm_content [data-layout-section]:first-of-type .flex-element.group { align-items: stretch !important; } #dmRoot.ce-service-page #dm_content [data-layout-section]:first-of-type .flex-element.widget-wrapper, #dmRoot.page-car-mr-bubbles-car-wash #dm_content [data-layout-section]:first-of-type .flex-element.widget-wrapper { width: 100% !important; max-width: 100% !important; } #dmRoot.ce-service-page #dm_content [data-layout-section]:first-of-type .dmNewParagraph, #dmRoot.ce-service-page #dm_content [data-layout-section]:first-of-type .dmNewParagraph *, #dmRoot.page-car-mr-bubbles-car-wash #dm_content [data-layout-section]:first-of-type .dmNewParagraph, #dmRoot.page-car-mr-bubbles-car-wash #dm_content [data-layout-section]:first-of-type .dmNewParagraph * { text-align: center !important; } /* Center-align all buttons site-wide */ #dm_content .flex-element.widget-wrapper:has(> .dmButtonLink), #dm_content .flex-element.widget-wrapper[data-widget-type="link"] { align-self: center !important; text-align: center !important; } #dm_content .dmButtonLink { margin-left: auto !important; margin-right: auto !important; } /* Footer: stack columns full width and center ALL content (sitemap, contact, social, description) for a consistent mobile layout */ .dmFooterContainer .flex-element.grid > .flex-element.group { flex-direction: column; align-items: center; } /* Per-page CSS sets align-self:flex-start on footer items on some pages, which left-pins the logo/social. Force center on every page. */ #dmRoot .dmFooterContainer .flex-element.widget-wrapper, #dmRoot .dmFooterContainer .flex-element.group { align-self: center !important; } /* Footer logo: reduced + centered */ .dmFooterContainer .imageWidget { text-align: center; } .dmFooterContainer .imageWidget img { width: 160px !important; height: auto !important; margin-left: auto !important; margin-right: auto !important; } .dmFooterContainer .flex-element.grid > .flex-element.group > .flex-element.group { width: 100% !important; max-width: 100% !important; align-items: center; text-align: center; } .dmFooterContainer .dmNewParagraph, .dmFooterContainer .dmNewParagraph * { text-align: center !important; } .dmFooterContainer .dmLinksMenu .unifiednav__container { align-items: center !important; justify-content: center !important; } .dmFooterContainer .dmLinksMenu .unifiednav__item-wrap, .dmFooterContainer .dmLinksMenu .unav-item, .dmFooterContainer .dmLinksMenu .nav-item-text { justify-content: center !important; text-align: center !important; } .dmFooterContainer .dmSocialHub, .dmFooterContainer .dmSocialHub .socialHubWrapper, .dmFooterContainer .dmSocialHub .socialHubInnerDiv { justify-content: center !important; text-align: center !important; } }