/* dmnz-static.css * * The de-Reacted layer. The source site is a React app whose visual behaviour * lived in framer-motion, Lenis and component state. This sheet owns what is * left once React is removed: the reveal animation, the FAQ accordion, the two * injected menus, the sticky CTA bar and the hero cross-fade. * * Everything here is scoped under .js on , which the theme sets with a * synchronous inline script. That is deliberate and load-bearing: without it, a * visitor with JavaScript disabled would get a page whose content is permanently * invisible, because the hidden state would apply with nothing left to remove it. * With it, no-JS visitors get the whole page, unanimated. Progressive * enhancement, not a graceful-degradation promise that never gets tested. */ /* --------------------------------------------------------------------------- * Reveal on scroll — replaces framer-motion's whileInView. * ------------------------------------------------------------------------ */ .js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .js [data-reveal].is-revealed { opacity: 1; transform: none; } /* Anything still unrevealed once the observer has run its course must not stay * invisible. dmnz-site.js sets this class on if IntersectionObserver is * unavailable or errors, so a broken script can never hide the page. */ .dmnz-reveal-off [data-reveal] { opacity: 1 !important; transform: none !important; } @media (prefers-reduced-motion: reduce) { .js [data-reveal] { transition: none; opacity: 1; transform: none; } } /* --------------------------------------------------------------------------- * FAQ accordion. Answers stay in the DOM at all times — they are indexable * content, and Yoast counts them — they are only visually collapsed. * ------------------------------------------------------------------------ */ .dmnz-acc-panel { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.36s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease; } .dmnz-acc-panel.is-open { max-height: 60rem; opacity: 1; } html:not(.js) .dmnz-acc-panel { max-height: none; opacity: 1; } [data-dmnz-accordion] svg.lucide-plus { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } [data-dmnz-accordion][aria-expanded='true'] svg.lucide-plus { transform: rotate(45deg); } /* --------------------------------------------------------------------------- * Services dropdown (desktop). * ------------------------------------------------------------------------ */ .dmnz-dropdown { position: absolute; top: calc(100% + 0.75rem); left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 15rem; margin: 0; padding: 0.5rem; list-style: none; border-radius: 1rem; background: #fff; box-shadow: 0 24px 60px -24px rgba(27, 14, 46, 0.45); border: 1px solid rgba(27, 14, 46, 0.08); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; z-index: 60; } .dmnz-dropdown.is-open { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .dmnz-dropdown .dmnz-menu-link { display: block; padding: 0.625rem 0.875rem; border-radius: 0.75rem; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; color: #1b0e2e; text-decoration: none; transition: background-color 0.18s ease; } .dmnz-dropdown .dmnz-menu-link:hover, .dmnz-dropdown .dmnz-menu-link:focus-visible { background: rgba(27, 14, 46, 0.06); } [data-dmnz-dropdown] svg.lucide-chevron-down { transition: transform 0.2s ease; } [data-dmnz-dropdown][aria-expanded='true'] svg.lucide-chevron-down { transform: rotate(180deg); } /* --------------------------------------------------------------------------- * Mobile menu. * ------------------------------------------------------------------------ */ .dmnz-mobile-menu { position: fixed; inset: 88px 0 auto 0; max-height: calc(100dvh - 88px); overflow-y: auto; padding: 1.25rem 1.25rem 2rem; background: #fff; border-top: 1px solid rgba(27, 14, 46, 0.08); box-shadow: 0 24px 60px -24px rgba(27, 14, 46, 0.45); z-index: 55; } .dmnz-mobile-menu[hidden] { display: none; } .dmnz-mobile-menu ul { margin: 0; padding: 0; list-style: none; } .dmnz-mobile-heading { padding: 0.5rem 0.5rem 0.25rem; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(27, 14, 46, 0.5); } .dmnz-mobile-menu .dmnz-menu-link { display: block; padding: 0.75rem 0.5rem; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: #1b0e2e; text-decoration: none; border-bottom: 1px solid rgba(27, 14, 46, 0.06); } .dmnz-mobile-cta { display: inline-flex; align-items: center; justify-content: center; width: 100%; margin-top: 1.25rem; padding: 0.875rem 1.5rem; border-radius: 999px; background: #0071e3; color: #fff; font-size: 16px; font-weight: 600; text-decoration: none; } @media (min-width: 768px) { .dmnz-mobile-menu { display: none; } } /* --------------------------------------------------------------------------- * Sticky CTA bar. Server-rendered with pointer-events:none and opacity:0 * because React only showed it once the visitor had scrolled. Same behaviour, * without React. * ------------------------------------------------------------------------ */ .js [data-dmnz-sticky-cta] { opacity: 0; pointer-events: none; transform: translateY(24px); transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .js [data-dmnz-sticky-cta].is-visible { opacity: 1; pointer-events: auto; transform: none; } /* --------------------------------------------------------------------------- * Header. The source header is bg-transparent over a dark hero; React swapped * the classes once the visitor scrolled past it. * ------------------------------------------------------------------------ */ .dmnz-header-solid { background: rgba(27, 14, 46, 0.88) !important; backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); } /* --------------------------------------------------------------------------- * Lead form states. * ------------------------------------------------------------------------ */ .dmnz-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .dmnz-form-note { margin-top: 0.875rem; font-size: 14px; line-height: 1.5; border-radius: 0.875rem; padding: 0.75rem 1rem; } .dmnz-form-note[data-state='ok'] { background: rgba(16, 129, 71, 0.08); color: #106b3f; } .dmnz-form-note[data-state='error'] { background: rgba(200, 32, 32, 0.08); color: #a51f1f; } [data-dmnz-lead-form].is-sending { opacity: 0.6; pointer-events: none; } /* --------------------------------------------------------------------------- * Footer Google Maps link. * ------------------------------------------------------------------------ */ /* The link sits in the footer's CONTACT column directly under the email * address, and carries the same utility classes that link does, so size, * colour and hover all come from the stylesheet the rest of the footer uses. * Only the icon needs a rule of its own. */ .dmnz-maps-link svg { flex: none; } /* Hover colour comes from the row's own hover:text-ink utility, the same one * every sibling link uses, so the whole row behaves identically. */ .dmnz-maps-link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } /* --------------------------------------------------------------------------- * WordPress admin bar offset. The header is position:fixed at top:0, which the * admin bar would otherwise sit on top of for logged-in editors. * ------------------------------------------------------------------------ */ body.admin-bar .dmnz-mobile-menu { inset-block-start: 120px; } @media screen and (max-width: 782px) { body.admin-bar header.fixed { top: 46px; } body.admin-bar .dmnz-mobile-menu { inset-block-start: 134px; } } @media screen and (min-width: 783px) { body.admin-bar header.fixed { top: 32px; } }