/* * Fail-safe for the ported pages' scroll-reveal wrappers. * * Those wrappers ship from the Next.js export already at opacity 0, relying on * JavaScript to reveal them. yb-pages.js does that, and adds kwd-yb-js to the * element as it starts. This rule covers every case where that never * happens: JS disabled, the script 404s after a theme deploy, or it throws * before it runs. Without it, a missing script silently hides about a third of * the homepage and of /services/. * * Scoped to .will-change-transform so it only ever touches the reveal wrappers. * FAQ panels and card hover glows also ship at opacity-0 and must stay that way * until they are interacted with. */ html:not(.kwd-yb-js) .will-change-transform.opacity-0 { opacity: 1; transform: none; } /* * Process stepper tabs on mobile. * * The five step pills ship as a nowrap flex row with overflow-x-auto and * no-scrollbar, wrapping only from md up. On a phone that leaves "Launch & * support" off the right edge with no visible scrollbar to hint at it, so the * later steps read as missing rather than scrolled away. * * Letting the row wrap is enough: the pills keep their own widths and centre on * each line. The dot separators between them are already hidden below md by the * markup's own "hidden md:inline", so nothing needs hiding here. * * Matched on the utility combination the row actually has rather than on a new * class, because the markup is a static export and cannot carry hooks. Above md * the row's own md:flex-wrap takes over and this rule stops applying. */ @media (max-width: 767px) { .flex.overflow-x-auto.no-scrollbar:has(> div > button) { flex-wrap: wrap; overflow-x: visible; row-gap: 0.5rem; } }