/* * Styles for the behaviours in assets/js/behaviours.js. * * The progressive-enhancement contract from the classic theme is preserved * exactly: nothing is hidden unless JavaScript is running. `.willa-reveal` * only becomes invisible once the script has added `willa-js` to * , so with JS off, blocked, or still loading, every element is in its * final visible state. Getting this backwards is the classic way to ship a * blank page to anyone whose JS fails. */ /* Scroll reveal ---------------------------------------------------------- */ .willa-js .willa-reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--willa-reveal-duration, 500ms) cubic-bezier(0, 0, 0.2, 1), transform var(--willa-reveal-duration, 500ms) cubic-bezier(0, 0, 0.2, 1); will-change: opacity, transform; } .willa-js .willa-reveal.is-revealed { opacity: 1; transform: none; } /* Sequential highlight (safety pipeline, escalation ladder) --------------- */ /* Gated like the reveal: without JS these must not sit permanently dimmed. */ .willa-js .willa-sequence__item { opacity: 0.45; transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1); } .willa-js .willa-sequence__item.is-active { opacity: 1; } /* Pointer effects -------------------------------------------------------- */ .willa-magnetic { transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1); } .willa-tilt { transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1); transform-style: preserve-3d; } /* The transform is cleared on mouseleave, so no reset rule is needed here. */ /* * Reduced motion. The global floor from the classic theme, kept because it is * the safety net for anything the JS does not know about. The source comment * called it "necessary but not sufficient" and that is still true: the scripts * each check prefers-reduced-motion themselves and skip the animation rather * than running it at 0.01ms. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Never leave a revealed element stuck invisible. */ .willa-js .willa-reveal { opacity: 1; transform: none; } .willa-js .willa-sequence__item { opacity: 1; } } /* * Screen-reader-only text. Hello Elementor ships no equivalent, and the chat * demo's "Conversation ready." status depends on it. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* * The 782px WordPress admin-bar threshold. This is not a design breakpoint — * it is where core switches the admin bar to its tall mobile layout — so it * has no Elementor slot and lives here. */ @media screen and (max-width: 782px) { .admin-bar .willa-sticky { top: 46px; } }