/* ========================================================================== rebuild.css — the ONLY CSS written for this migration. -------------------------------------------------------------------------- Everything else in this folder is Duda's own stylesheet, ported verbatim (only url(...) targets were repointed at our local images). The rules below exist because Duda ships three separate HTML documents and this build ships one, plus one widget it drives from a library we do not include. Scoped on html[data-device], which the head script sets from the user-agent using the same test Duda's server does — so it agrees with the device stylesheet and the device body class rather than guessing from width. ========================================================================== */ /* 1. Which header exists. The phone document has a hamburger bar and no .dmHeaderContainer at all; the desktop/tablet documents have no hamburger chrome. Duda's own CSS already makes the drawer `visibility:hidden` off-phone, but the header bar still takes 96px of layout, so it needs removing outright. */ html[data-device="mobile"] .dmHeaderContainer { display: none !important; } html:not([data-device="mobile"]) .mobile-chrome { display: none !important; } /* 2. Photo galleries. Duda's gallery script builds real row/column elements and picks a different column count per device (4 across on desktop, 2 on a phone), so the DOM differs and no media query can reconcile it. The gallery page ships both grids; this picks one. */ html[data-device="mobile"] .rao-gallery-wide { display: none !important; } html:not([data-device="mobile"]) .rao-gallery-narrow { display: none !important; } /* 3. Lightbox. The live gallery opens PhotoSwipe. We ship a small equivalent instead of the library, so it needs its own styling. */ .rao-lightbox { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.9); z-index: 20000; } .rao-lightbox.is-open { display: flex; } .rao-lightbox img { max-width: 90vw; max-height: 88vh; object-fit: contain; } .rao-lightbox button { position: absolute; border: 0; background: none; color: #fff; font-size: 44px; line-height: 1; padding: 10px 18px; cursor: pointer; } .rao-lightbox__close { top: 6px; right: 10px; font-size: 34px; } .rao-lightbox__prev { left: 4px; } .rao-lightbox__next { right: 4px; } /* 4. The newer styled-components accordion. Duda swaps the description wrapper's generated class to lift its max-height; the generated open-state class is not in any stylesheet it serves, so the open state is reproduced here. The element that actually clips is the description's PARENT — Duda's ported CSS gives it `max-height: 0; overflow: hidden` — so the selector has to reach `li > div:last-child > div:first-child`, not the item and not the description. Targeted structurally rather than by Duda's generated class hash, which changes between builds. */ The 4000px ceiling below is a NO-SCRIPT FALLBACK only. site.js drives max-height from the panel's real scrollHeight so the 0.3s transition eases over the actual distance — hence no `!important` here, which would beat the inline style and put the snap back. */ [data-grab="accordion-item-title-wrapper"] { cursor: pointer; } .rao-acc-open > div:last-child > div:first-child { max-height: 4000px; } .rao-acc-open [data-grab="accordion-item-arrow"] { transform: rotate(180deg); } /* 5. Drawer scroll lock. site.js already puts `.drawer-open` on when the phone drawer opens, but nothing styled it, so the page behind the open drawer still scrolled. Duda's own runtime locks by adding `layout-drawer_push-content` (which its CSS turns into `position: fixed` on the runtime container) — that class is never added here, so the lock is done directly instead. BOTH elements need it: runtime-mobile.css sets `body { height: 100%; overflow: auto }`, so hiding overflow on alone leaves as the scroller and the page keeps moving. overflow (not `touch-action: none`, and not `position: fixed`): the drawer itself is a descendant of , so touch-action would kill scrolling INSIDE the menu, whose list is taller than a phone screen. Hiding overflow also keeps the page's scroll offset, so closing the drawer returns the visitor to where they were rather than to the top. */ html.drawer-open, html.drawer-open body { overflow: hidden !important; } /* The drawer's own list must still scroll while the page behind it cannot. */ html.drawer-open .layout-drawer { overflow-y: auto; -webkit-overflow-scrolling: touch; } /* 6. Growyo additions (.gy-added). Nothing below came from the migration. The class marks every element this rebuild inserts that the live Duda site does not have, so an addition can always be told from a port at a glance and reverted in one pass. The legal note under each of the 32 lead forms. Sized down and dimmed so it reads as fine print beneath the submit button rather than as another field; colour is inherited so it works on both the light and dark form panels the site uses. */ .gy-formLegal { clear: both; float: none; display: block; padding: 10px 0 2px; line-height: 1.5; opacity: 0.85; } .gy-formLegal small { font-size: 13px; } .gy-formLegal a { text-decoration: underline; } /* 7. Entrance animations (data-gy-anim). Duda's own `fadeInCombo`, replayed. Its config travels on the element as data-gy-anim / data-gy-anim-dir (from live's data-anim-extended payload: trigger entrance, duration 1s, delay 0, intensity 1). site.js adds .gy-anim-armed on load and swaps it for .gy-anim-in when the element scrolls into view. Armed state is only ever applied BY SCRIPT, never in the stylesheet — if the JS fails or never runs, the row keeps its normal appearance instead of being stuck invisible. Same reason it is skipped for prefers-reduced-motion and off-desktop: live only animates desktop. */ .gy-anim-armed { opacity: 0; will-change: opacity, transform; } .gy-anim-armed[data-gy-anim-dir="up"] { transform: translate3d(0, 40px, 0); } .gy-anim-armed[data-gy-anim-dir="left"] { transform: translate3d(40px, 0, 0); } .gy-anim-armed[data-gy-anim-dir="right"] { transform: translate3d(-40px, 0, 0); } .gy-anim-in { opacity: 1; transform: none; transition: opacity 1s ease-out, transform 1s ease-out; } @media (prefers-reduced-motion: reduce) { .gy-anim-armed { opacity: 1; transform: none; } .gy-anim-in { transition: none; } } /* 8. Breadcrumbs on /blog and the 53 blog posts (body.gy-blog). Two things were wrong. The trail wrapped onto two and three lines on a long post title, and its parts disagreed on colour: the parent link and the current page came through white (`--color_2`) while the chevron icons between them came through dark blue (`--color_3`), which is what made the trail hard to read against the header. Settled the way the client asked for: every part white — parent link, chevrons, current page — and one line, with the current page's title ellipsised when it will not fit. The chevrons are inline SVG drawn with `fill="currentColor"`, so setting `color` here recolours the icons too. THE `#dm` IN EACH SELECTOR IS LOAD-BEARING. Duda's own rules are `#dm .kayVGh.kayVGh` (1,2,0); a plain `.gy-blog .bc-root .bc-item` is (0,3,0) and loses to them wherever this file is linked. Putting #dm after .gy-blog makes these (1,3,0), which wins on specificity rather than on source order. Scoped to .gy-blog so no other page's breadcrumb moves. */ .gy-blog #dm .bc-root.bc-root { flex-wrap: nowrap; align-items: center; max-width: 100%; overflow: hidden; padding: 2px 0; font-size: 14px; line-height: 1.4; } .gy-blog #dm .bc-root .bc-item, .gy-blog #dm .bc-root .bc-unlinkable-item, .gy-blog #dm .bc-root .bc-separator, .gy-blog #dm .bc-root .bc-current-item { color: var(--color_2); } .gy-blog #dm .bc-root .bc-item, .gy-blog #dm .bc-root .bc-unlinkable-item, .gy-blog #dm .bc-root .bc-separator { flex: 0 0 auto; } .gy-blog #dm .bc-root .bc-item:hover { color: var(--color_2); opacity: 0.8; } .gy-blog #dm .bc-root .bc-current-item { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 9. Phone-only corrections. Two bits of alignment the phone layout gets wrong on its own: the home page H1 sits left while everything around it is centred, and the footer's two link rows stack left-aligned instead of centred. GATED TWO WAYS ON PURPOSE. data-device is set from the user-agent, the same call Duda's server makes, so it is right on a real handset — but it stays "desktop" in a desktop browser's responsive/device-toolbar preview, where only the width changes. Anyone checking the phone layout that way would see these fixes not apply. The width query covers that case and matches the breakpoint Duda's own phone stylesheet is linked at (max-width: 767px); the attribute covers a real phone whatever its width. A tablet is neither: it renders on a fixed 960px canvas and keeps the desktop-style layout, which is what live does. */ /* The home page H1 was never a text-align problem — its text was already centred. page-home-mobile.css gives the paragraph that holds it #dm .dmBody div.u_1277583544 { width: calc(100% - 20px); max-width: 303.125px } and site-mobile.css gives .dmNewParagraph { margin-left: 0 }, so on a 375px phone the BOX is 303px hard against the left edge with ~72px of dead space to its right. The heading is centred inside a box that is itself off to one side, which is exactly what it looks like. Centring the box is the fix; text-align is kept alongside it only to be explicit. The u_ hash is Duda's own name for that widget and is the same identifier the ported page-home-mobile.css uses, so the two move together on a re-export. */ html[data-device="mobile"] body[data-page-alias="home"] #dm_content h1 { text-align: center !important; } html[data-device="mobile"] body[data-page-alias="home"] #dm .dmBody div.u_1277583544 { margin-left: auto !important; margin-right: auto !important; } html[data-device="mobile"] #dm .dmFooter .unifiednav__container { display: flex !important; flex-wrap: wrap; justify-content: center !important; text-align: center !important; } html[data-device="mobile"] #dm .dmFooter .unifiednav__item-wrap { float: none !important; } html[data-device="mobile"] #dm .dmFooter .unifiednav__item, html[data-device="mobile"] #dm .dmFooter .nav-item-text { text-align: center !important; } @media (max-width: 767px) { body[data-page-alias="home"] #dm_content h1 { text-align: center !important; } body[data-page-alias="home"] #dm .dmBody div.u_1277583544 { margin-left: auto !important; margin-right: auto !important; } #dm .dmFooter .unifiednav__container { display: flex !important; flex-wrap: wrap; justify-content: center !important; text-align: center !important; } #dm .dmFooter .unifiednav__item-wrap { float: none !important; } #dm .dmFooter .unifiednav__item, #dm .dmFooter .nav-item-text { text-align: center !important; } } /* 10. Lightbox scroll lock — same rule the drawer needs, same reason. */ html.lightbox-open, html.lightbox-open body { overflow: hidden !important; }