/* Canyon Creek - post-Duda static fixes. Duda hides every animated element up front and reveals it with a scroll runtime that does not exist in a static export. #dmRoot is the , so these selectors outrank Duda's class-only rules. Content appears instead of animating in, which is the right trade for a static site. */ #dmRoot [data-anim-extended], #dmRoot [data-anim-desktop]:not([data-anim-desktop='none']), #dmRoot [data-anim-tablet]:not([data-anim-tablet='none']), #dmRoot [data-anim-mobile]:not([data-anim-mobile='none']), #dmRoot .dmNewParagraph[data-anim-extended], #dmRoot .flex-element [data-anim-extended] { visibility: visible !important; opacity: 1 !important; } /* Galleries gate their thumbnails on a .ready class the same runtime adds. */ #dmRoot .dmPhotoGalleryHolder:not(.ready) li.photoGalleryThumbs { visibility: visible !important; display: inline-block !important; } /* ========================================================================== Southwest Flooring — mobile/tablet nav tray (client request, take 4) Take 3 set the drawer surface to ivory but the tray still rendered charcoal: Duda paints the two rows INSIDE the drawer, not the drawer itself -- `div.u_1293896107` (the nav row) is #333 and `div.u_1432268169` (the phone row) is var(--color_4) grey. Those fills sat on top of the light surface, so the dark links were nearly invisible. Rule 2 below clears them; everything else builds the tray back up on the site's own palette. Palette is taken from the live pages, not invented: near-black Playfair Display headings, #ea3323 accent (the Shop Now button), warm off-whites. Take 3 used a plum/gold pair that appears nowhere else on the site. Duda's drawer rules are `#dm .p_hfcontainer !important` (one id), so every override here leads with `#dmRoot #dm` (two) to outrank them. The drawer markup only renders at mobile/tablet widths, so the drawer selectors need no body-class guard; the hamburger button rules in section 1 are mobile-only and keep theirs. ========================================================================== */ :root { --vg-ink: #14100f; /* near-black, matches page headings */ --vg-ink-soft: #6b6560; /* sub-nav / secondary text */ --vg-accent: #ea3323; /* brand red, sampled from Shop Now */ --vg-surface: #fcfbf9; /* warm off-white tray */ --vg-hairline: #ece7e1; } /* --- 1. Hamburger inside the header, on the RIGHT, always visible --- This build is `hamburger-reverse`, so the button belongs on the right. Duda exports the slices at 0 height and paints them from a runtime that no longer exists, so the slices are drawn here as borders. The button is a near-black rounded square: it reads on the white header, echoes the logo, and stays legible once the tray is open. `vg-behavior.js` still drives open/close through this same element. */ #dmRoot.dmMobileBody #layout-drawer-hamburger { top: 29px !important; /* centres a 40px button in the 98px logo row */ left: auto !important; right: 12px !important; /* hamburger-reverse */ width: 42px !important; height: 42px !important; padding: 0 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; gap: 5px !important; background-color: var(--vg-ink) !important; border-radius: 10px !important; box-shadow: 0 3px 10px rgba(20, 16, 15, .20) !important; color: #fff !important; z-index: 20 !important; transition: background-color .18s ease, transform .18s ease !important; } #dmRoot.dmMobileBody #layout-drawer-hamburger:active { transform: scale(.94) !important; } #dmRoot.dmMobileBody #layout-drawer-hamburger .hamburger__slice { width: 20px !important; height: 0 !important; border: 1px solid currentColor !important; border-radius: 1px !important; } /* --- 2. Clear Duda's dark fills inside the tray --- */ #dmRoot #dm .p_hfcontainer div.u_1293896107, #dmRoot #dm .p_hfcontainer div.u_1432268169 { background-color: transparent !important; border-top: 0 !important; } /* --- 3. The tray surface --- */ #dmRoot #dm #mobile-hamburger-drawer { background-color: var(--vg-surface) !important; border-top: 1px solid var(--vg-hairline) !important; box-shadow: 0 22px 44px -16px rgba(20, 16, 15, .30) !important; } /* Duda tightens the nav row with 20px 0; the tray reads better with the first link breathing away from the header edge. */ #dmRoot #dm .p_hfcontainer div.u_1293896107 { padding: 10px 0 6px !important; } /* Empty grid columns in the phone row were reserving ~180px of dead grey. */ #dmRoot #dm #mobile-hamburger-drawer .dmRespCol.empty-column { display: none !important; } /* --- 4. Top-level links: Playfair, near-black, inset hairlines --- The hairline is drawn as a background gradient rather than a border so it can inset from the tray edges -- a full-bleed rule reads cheap. */ #dmRoot #dm #mobile-hamburger-drawer nav.u_1473138415 { color: var(--vg-ink) !important; } #dmRoot #dm #mobile-hamburger-drawer nav.u_1473138415 .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap { border-bottom: 0 !important; background-image: linear-gradient(var(--vg-hairline), var(--vg-hairline)) !important; background-size: calc(100% - 48px) 1px !important; background-position: 24px bottom !important; background-repeat: no-repeat !important; } #dmRoot #dm #mobile-hamburger-drawer nav.u_1473138415 .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap:last-child { background-image: none !important; } #dmRoot #dm #mobile-hamburger-drawer nav.u_1473138415 .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > .unifiednav__item { font-family: "Playfair Display", Georgia, serif !important; font-size: 21px !important; font-weight: 500 !important; color: var(--vg-ink) !important; padding: 17px 24px !important; letter-spacing: .005em !important; transition: color .16s ease !important; } #dmRoot #dm #mobile-hamburger-drawer nav.u_1473138415 .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > .unifiednav__item:active { color: var(--vg-accent) !important; } /* Duda tags the current page's item `dmNavItemSelected` but the export never styles it, so every page's tray looked identical. A left marker in the accent tells you where you are without shouting. */ #dmRoot #dm #mobile-hamburger-drawer nav.u_1473138415 .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > .unifiednav__item.dmNavItemSelected { color: var(--vg-accent) !important; box-shadow: inset 3px 0 0 var(--vg-accent) !important; text-decoration: none !important; /* the marker already says "you are here" */ } /* --- 5. Sub-nav: one continuous rule, not a gold bar per item --- Take 3 put a 2px gold border on each item, which broke into visibly uneven segments wherever the rows had margins. A single rule on the container reads as one clean edge. */ #dmRoot #dm #mobile-hamburger-drawer nav.u_1473138415 .unifiednav__container[data-depth] { border-left: 1px solid var(--vg-hairline) !important; margin: 2px 24px 10px 36px !important; padding: 2px 0 !important; } #dmRoot #dm #mobile-hamburger-drawer nav.u_1473138415 .unifiednav__container[data-depth] > .unifiednav__item-wrap { border: 0 !important; background-image: none !important; } #dmRoot #dm #mobile-hamburger-drawer nav.u_1473138415 .unifiednav__container[data-depth] > .unifiednav__item-wrap > .unifiednav__item { font-family: Inter, "Inter Fallback", -apple-system, sans-serif !important; font-size: 15px !important; font-weight: 400 !important; color: var(--vg-ink-soft) !important; padding: 11px 20px !important; letter-spacing: .01em !important; transition: color .16s ease !important; } #dmRoot #dm #mobile-hamburger-drawer nav.u_1473138415 .unifiednav__container[data-depth] > .unifiednav__item-wrap > .unifiednav__item:active { color: var(--vg-accent) !important; } /* Duda's raw chevrons are unstyled sprites in the export; type and indentation already carry the hierarchy. */ #dmRoot #dm #mobile-hamburger-drawer .unifiednav__item-wrap > .unifiednav__item > .nav-item-text .icon { display: none !important; } /* --- 6. Phone row -> a real call button --- The row was a grey slab holding a 56px headset glyph over unlinked text. `tools/fix_drawer_phone.py` wraps the number in a tel: link (the mobile build had none at all); this styles that link as the tray's one primary action. */ #dmRoot #dm .p_hfcontainer div.u_1432268169 { padding: 6px 24px 22px !important; background-image: linear-gradient(var(--vg-hairline), var(--vg-hairline)) !important; background-size: 100% 1px !important; background-position: 0 0 !important; background-repeat: no-repeat !important; } #dmRoot #dm #mobile-hamburger-drawer div.u_1963142675 { display: none !important; /* the button carries its own icon */ } #dmRoot #dm #mobile-hamburger-drawer div.u_1781799153 { width: 100% !important; margin: 18px 0 0 !important; padding: 0 !important; } #dmRoot #dm #mobile-hamburger-drawer div.u_1781799153 .vg-call { display: flex !important; align-items: center; justify-content: center; gap: 9px; background-color: var(--vg-accent); color: #fff !important; border-radius: 999px; padding: 15px 20px; text-decoration: none; box-shadow: 0 6px 16px -6px rgba(234, 51, 35, .70); transition: transform .18s ease, box-shadow .18s ease; } #dmRoot #dm #mobile-hamburger-drawer div.u_1781799153 .vg-call:active { transform: scale(.98); box-shadow: 0 3px 10px -6px rgba(234, 51, 35, .70); } #dmRoot #dm #mobile-hamburger-drawer div.u_1781799153 .vg-call svg { width: 19px; height: 19px; flex: 0 0 auto; fill: currentColor; } /* The exported markup wraps the number in , so the colour is already right; this just fixes the type. 19px/700 is deliberate: white on #ea3323 is 4.2:1, under the 4.5:1 AA floor for body text but clear of the 3:1 floor for large text, which starts at 14pt/18.66px bold. Sizing up keeps the brand red instead of darkening it away from the Shop Now button. */ #dmRoot #dm #mobile-hamburger-drawer div.u_1781799153 .vg-call, #dmRoot #dm #mobile-hamburger-drawer div.u_1781799153 .vg-call font, #dmRoot #dm #mobile-hamburger-drawer div.u_1781799153 .vg-call span, #dmRoot #dm #mobile-hamburger-drawer div.u_1781799153 .vg-call b { font-family: Inter, "Inter Fallback", -apple-system, sans-serif !important; font-size: 19px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: .02em !important; color: #fff !important; } /* --- 7. Overlay: warm scrim instead of flat black --- */ #dmRoot .layout-drawer-overlay { background-color: rgba(20, 16, 15, .42) !important; backdrop-filter: blur(2px) !important; -webkit-backdrop-filter: blur(2px) !important; } /* ========================================================================== Tablet tray (`#hamburger-drawer`) The tablet build ships a different drawer: its own id, a two-column layout with Follow Us + newsletter, and Duda paints the drawer element itself var(--color_4) grey rather than painting rows inside it. Same complaint applied, so it gets the same light treatment. Desktop is untouched -- its copy of this markup is hidden at desktop widths. ========================================================================== */ #dmRoot #dm .p_hfcontainer div#hamburger-drawer.layout-drawer { background-color: var(--vg-surface) !important; border-top: 1px solid var(--vg-hairline) !important; box-shadow: 0 22px 44px -16px rgba(20, 16, 15, .30) !important; } /* Nav: Playfair for the top level so it reads like the mobile tray and the page headings; Inter for children. */ #dmRoot #dm #hamburger-drawer nav.u_1071507452 { color: var(--vg-ink) !important; } #dmRoot #dm #hamburger-drawer nav.u_1071507452 .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > .unifiednav__item { font-family: "Playfair Display", Georgia, serif !important; font-weight: 500 !important; color: var(--vg-ink) !important; } #dmRoot #dm #hamburger-drawer nav.u_1071507452 .unifiednav__container[data-depth] > .unifiednav__item-wrap > .unifiednav__item { color: var(--vg-ink-soft) !important; } #dmRoot #dm #hamburger-drawer nav.u_1071507452 .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > .unifiednav__item.dmNavItemSelected { color: var(--vg-accent) !important; } /* "Follow Us" / "Subscribe to our Newsletter" were white via tags. */ #dmRoot #dm #hamburger-drawer .dmNewParagraph, #dmRoot #dm #hamburger-drawer .dmNewParagraph font, #dmRoot #dm #hamburger-drawer .dmNewParagraph span, #dmRoot #dm #hamburger-drawer .dmform-title { color: var(--vg-ink) !important; } /* The rule under Follow Us was a white hairline on grey. */ #dmRoot #dm #hamburger-drawer div.u_1962630101 { border-color: var(--vg-hairline) !important; } /* Social pills were white circles that vanish on a light surface. */ #dmRoot #dm #hamburger-drawer .socialHubIcon { background-color: #fff !important; border: 1px solid var(--vg-hairline) !important; box-shadow: 0 1px 3px rgba(20, 16, 15, .06) !important; } /* Newsletter field: white border/placeholder -> readable on light. */ #dmRoot #dm .p_hfcontainer div.u_1005260444 input:not([type=submit]), #dmRoot #dm .p_hfcontainer div.u_1005260444 select, #dmRoot #dm .p_hfcontainer div.u_1005260444 textarea { border-color: #d9d3cc !important; background-color: #fff !important; color: var(--vg-ink) !important; } #dmRoot #dm .p_hfcontainer div.u_1005260444 input::placeholder, #dmRoot #dm .p_hfcontainer div.u_1005260444 textarea::placeholder { color: var(--vg-ink-soft) !important; }