/* Crystal Clear Skin & Body Spa — post-export repairs. * * Deploy gotcha: Cloudflare fronts this host and caches per full URL, * INCLUDING the ?v= query — and it caches 404s for 4 hours. Requesting a * freshly stamped asset URL before Hostinger finishes syncing poisons that * URL for every visitor. After a push, verify with a throwaway query param * (?check=) first; only hit the real ?v= URL once that serves * the new content. (This header exists because v=104861ed was 404-poisoned * exactly that way; the resulting restamp is what shipped this comment.) * * Duda's runtime is deliberately dead in this static export. These rules * replace layout that the runtime used to compute, rather than reviving it. * * Specificity note: Duda's own rules are "#dm .dmPhotoGallery .dmPhotoGalleryHolder * .photoGalleryThumbs" (1 id + 3 classes) and many carry !important, so the * layout-critical properties below need !important to win. Scoped as tightly as * possible so nothing leaks past the gallery. */ /* ---- Photo gallery ------------------------------------------------------ * The gallery is a "pinterest" masonry whose column widths were set inline by * the runtime. Without it, Duda's fallback * #dm .dmPhotoGallery .dmPhotoGalleryHolder .photoGalleryThumbs * { float:left; width:100% } * makes every tile full-width, and since each carried only data-src it * had no intrinsic height either -- so all nine photos collapsed into single * lines of alt text. (fix_ccspa.py promotes data-src to a real src; these rules * lay the tiles out.) * * TARGET THE REAL STRUCTURE. .dmPhotoGalleryHolder is an EMPTY sibling div -- * it has zero children and measures 1200x0, so rules hung off it match nothing * and silently do nothing. Verified in the browser, the actual chain is: * * .layout-container.pinterest * └ .photogallery-row x2 (note: class has a TRAILING SPACE) * └ .photogallery-column x3 (2 thumbs in row 1, 1 in row 2) * └ .photoGalleryThumbs * * So each row becomes a flex row and each column an equal flex item, which is * precisely the 3-up masonry the markup was built for. */ #dmRoot .dmPhotoGallery .layout-container.pinterest { width: auto !important; height: auto !important; } #dmRoot .dmPhotoGallery .photogallery-row { display: flex !important; align-items: flex-start; gap: 10px; width: auto !important; height: auto !important; } #dmRoot .dmPhotoGallery .photogallery-column { flex: 1 1 0; min-width: 0; /* without this a tall image refuses to shrink */ width: auto !important; height: auto !important; float: none !important; } #dmRoot .dmPhotoGallery .photoGalleryThumbs { width: auto !important; float: none !important; display: block !important; visibility: visible !important; margin: 0 0 10px !important; padding: 0 !important; /* Duda paints a loading spinner behind every tile; it never stops spinning without the runtime, so it would show through any transparent edge. */ background-image: none !important; background-color: transparent !important; } #dmRoot .dmPhotoGallery .photoGalleryThumbs .thumbnailInnerWrapper, #dmRoot .dmPhotoGallery .photoGalleryThumbs .image-container { height: auto !important; width: auto !important; opacity: 1 !important; } #dmRoot .dmPhotoGallery .photoGalleryThumbs .image-container a { display: block !important; width: auto !important; height: auto !important; background-size: cover !important; background-position: center !important; line-height: 0; } #dmRoot .dmPhotoGallery .photoGalleryThumbs .image-container a img { display: block !important; width: 100% !important; height: auto !important; max-width: 100% !important; } /* The widget reserves 45-80vh while it waits for a class the runtime adds. It is laid out now, so the reservation is just a gap. */ #dmRoot .dmPhotoGallery.newPhotoGallery:not(.photo-gallery-done) { min-height: 0 !important; } /* One column on a phone: three 400px-wide tiles side by side is unreadable. */ @media (max-width: 767px) { #dmRoot .dmPhotoGallery .photogallery-row { display: block !important; } } /* ---- Hamburger drawer --------------------------------------------------- * Scroll lock only. The open/closed animation is Duda's own exported CSS * (.layout-drawer[data-origin][open] { transform: translate(0) }), which * vg-fixes.js drives by toggling attributes -- no transforms are restated * here, so the animation keeps following the stylesheet. */ html.vg-drawer-open, html.vg-drawer-open body { overflow: hidden !important; touch-action: none; } /* ---- Screen-reader-only heading ---------------------------------------- * /about, /contact and /gallery have no

and no text that serves as one. * This gives them a real heading for search engines and screen readers without * altering a single pixel of the client's design. */ #dmRoot .vg-sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ---- "More Info" accordions -------------------------------------------- * vg-fixes.js supplies the open/close behaviour the dead runtime used to * provide. Only the arrow needs styling: Duda's exported CSS animates the panel * itself (max-height transition) but rotated the chevron from JavaScript. * Targeted by data-grab, not by the styled-components hash class. */ #dmRoot [data-grab="accordion-item-arrow"] { transition: transform 0.3s ease-out; } #dmRoot .vg-acc-open [data-grab="accordion-item-arrow"] { transform: rotate(180deg); } /* The heading is a real control now, so it needs a visible focus ring -- Duda sets outline:none sitewide. */ #dmRoot [data-grab="accordion-item-title-wrapper"]:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* Title and chevron sit together, centered (Chase, 2026-09-12). Duda * exported the title right-aligned with the chevron pinned to the far edge. * The exported rule (#dm#dm#dm .dVcFLZ.dVcFLZ { flex:1; text-align:right }) * is inline in every card's styled-components block, so !important is needed. * The h5 shrinks to its text and the wrapper centers the title+chevron pair * as a unit; the wrapper's own 8px gap spaces the chevron after the text. */ #dmRoot [data-grab="accordion-item-title-wrapper"] { justify-content: center !important; } #dmRoot [data-grab="accordion-item-title"] { flex: 0 0 auto !important; text-align: center !important; } /* The chevron must not shrink. The title wrapper carries 20px side padding, * so on the tablet build below about 830px a grid card's box is narrower * than "More Info" plus chevron and flex squashed the 20px chevron to zero * (pre-existing in Duda's export). Kept at 20px the pair overflows the * padding box symmetrically but stays inside the wrapper's border. */ #dmRoot [data-grab="accordion-item-arrow-wrapper"] { flex-shrink: 0 !important; } /* ---- Service-card icons (mobile) ---------------------------------------- * On the one-per-row mobile layout each service icon sits in a circular frame * above the service name. Duda exported most of those frames with a responsive * "margin: -40px auto 10px" rule, which centres them at any card width. Seven * widgets were exported with hard-coded pixel margins instead * (e.g. "margin: -40px 130px 10px 129.688px"), which only centre at the exact * card width Duda measured at export time -- so on a real phone those icons * sit visibly off-centre. Normalise them to the same auto rule the rest use. * Scoped to mobile widths only; desktop/tablet layouts are untouched. */ @media (max-width: 767px) { #dmRoot #dm .dmBody div.u_1184292999, #dmRoot #dm .dmBody div.u_1502643225, #dmRoot #dm .dmBody div.u_1358997005, #dmRoot #dm .dmBody div.u_1894462195, #dmRoot #dm .dmBody div.u_1469895597, #dmRoot #dm .dmBody div.u_1138496380, #dmRoot #dm .dmBody div.u_1053671223 { margin: -40px auto 10px !important; } } /* ---- Manicures & Pedicures service cards --------------------------------- * These two cards were added after the export (tools/add_manicure_pedicure.py) * as the 3rd and 4th columns of the last service-menu row. The script cloned * the Massage Therapy card's markup, but every Duda element is styled by * per-element u_ rules in the exported desktop/tablet/mobile.css -- and * the new ids (u_18653001xx) appear in none of them, so the cards rendered * bare: no white panel, no circular icon frame, full-width black SVGs. * * The rules below are the Massage Therapy card's own rules * (col u_1580099220 / icon u_1138496380 / svg / para u_1708074849), re-keyed * to the new ids. Base = desktop+tablet (identical in both exports); the * max-width:767px block carries mobile.css's differing values. The icon * frames use "margin: -50px auto" rather than Duda's measured pixel margins, * same as the mobile normalisation above. Specificity/!important match the * exported rules they mirror. */ #dm .dmBody div.u_1865300111, #dm .dmBody div.u_1865300117 { background-color: #fff !important; border: 2px solid var(--color_2) !important; border-radius: 10px !important; padding: 0 10px 20px !important; margin: 0 10px !important; } #dm .dmBody div.u_1865300112, #dm .dmBody div.u_1865300118 { background-color: #fff !important; border: 2px double var(--color_2) !important; border-radius: 50% !important; padding: 10px !important; width: 100px !important; height: 100px !important; display: block !important; float: none !important; top: 0 !important; left: 0 !important; position: relative !important; max-width: 100% !important; min-width: 0 !important; min-height: auto !important; text-align: center !important; margin: -50px auto 10px !important; } #dm .dmBody div.u_1865300112 .svg, #dm .dmBody div.u_1865300118 .svg { width: 75% !important; color: var(--color_2) !important; fill: var(--color_2) !important; } #dm .dmBody div.u_1865300115, #dm .dmBody div.u_1865300121 { float: none !important; top: 0 !important; left: 0 !important; width: calc(100% - 0px) !important; position: relative !important; height: auto !important; max-width: 100% !important; margin: 8px 0 !important; padding: 2px 0 !important; min-width: 25px !important; } @media (max-width: 767px) { #dm .dmBody div.u_1865300111, #dm .dmBody div.u_1865300117 { padding: 0 20px 20px !important; margin: 0 0 50px !important; } #dm .dmBody div.u_1865300112, #dm .dmBody div.u_1865300118 { width: 80px !important; height: 80px !important; padding: 0 !important; margin: -40px auto 10px !important; } #dm .dmBody div.u_1865300115, #dm .dmBody div.u_1865300121 { margin: 16px auto 8px !important; } } /* ---- "Find Us" Google Map embed ------------------------------------------ * The Duda mapbox widget (.inlineMap > .mapContainer) rendered nothing in this * static export, so it was replaced with a plain Google Maps