/* ============================================================================ Fade-in-up on scroll. Nothing here hides anything on its own. reveal.js marks its targets with data-bw-reveal, so if the script fails to load — or the browser has no IntersectionObserver — the page renders exactly as it does today. Content is never left invisible by a stylesheet the JS forgot to undo. ============================================================================ */ [data-bw-reveal] { opacity: 0; transform: translate3d(0, 24px, 0); /* Long and heavily eased-out: the movement is almost over by the time the eye catches it, which is what reads as "soft" rather than "sliding". 24px is deliberately small — anything larger starts to look like a page transition. */ transition: opacity 900ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: var(--bw-reveal-delay, 0ms); will-change: opacity, transform; } [data-bw-reveal="in"] { opacity: 1; transform: none; /* The element is done moving; stop asking the compositor for a layer. */ will-change: auto; } /* ============================================================================ The mobile menu: items arrive one by one as the panel opens. No JS. The theme already tells us when the menu is open — #mobile_nav_icon puts `js_nav` on the and the close button takes it off again (hoteller/js/core/custom.js:313). Hanging the animation off that class means it can never drift out of step with the panel, and there is no second script racing the theme's own. The items are only ever hidden while the panel itself is closed and off screen, so a visitor never sees a gap where the menu should be — and if the theme's JS were broken, `js_nav` would never be added and the menu could not be opened at all, so there is nothing here to strand. ============================================================================ */ #mobile_main_menu>li { opacity: 0; transform: translate3d(0, 12px, 0); } body.js_nav #mobile_main_menu>li { opacity: 1; transform: none; /* Still quicker than the scroll reveal — this is a menu the visitor is waiting on, not something they discover — but unhurried enough to be watched. */ transition: opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1); } /* The cascade. 110ms apart, starting 180ms in — the panel itself is still sliding over at that point, so the items ride in behind it rather than waiting for it to settle and then starting a visibly separate second animation. The gap is deliberately far shorter than each item's 620ms fade: the items OVERLAP, so the eye reads one continuous cascade down the list. Widen the gap past the duration and it stops being a cascade and becomes six separate fades queued up one behind the other. Written out to ten rather than generated, because there is no CSS way to get an element's index. Ten covers the menu twice over (it has six items); any further items simply arrive with the tenth, which is the right failure mode. */ body.js_nav #mobile_main_menu>li:nth-child(1) { transition-delay: 180ms; } body.js_nav #mobile_main_menu>li:nth-child(2) { transition-delay: 290ms; } body.js_nav #mobile_main_menu>li:nth-child(3) { transition-delay: 400ms; } body.js_nav #mobile_main_menu>li:nth-child(4) { transition-delay: 510ms; } body.js_nav #mobile_main_menu>li:nth-child(5) { transition-delay: 620ms; } body.js_nav #mobile_main_menu>li:nth-child(6) { transition-delay: 730ms; } body.js_nav #mobile_main_menu>li:nth-child(7) { transition-delay: 840ms; } body.js_nav #mobile_main_menu>li:nth-child(8) { transition-delay: 950ms; } body.js_nav #mobile_main_menu>li:nth-child(9) { transition-delay: 1060ms; } body.js_nav #mobile_main_menu>li:nth-child(n+10) { transition-delay: 1170ms; } /* CLOSING must not replay the cascade backwards. Without this, removing js_nav reverses every rule above — the items fade out one by one, on a stagger, while the panel is already sliding away, and the last one is still visible after it has gone. Snap them straight back to the hidden state instead. */ body:not(.js_nav) #mobile_main_menu>li { transition: none; transition-delay: 0ms; } /* Once the visitor has started moving around the open menu, the opening cascade is history — drop its delays. They are set on the items themselves, so they would otherwise also apply to the fade back UP when the cursor leaves the menu, relighting the list one item at a time over three quarters of a second. Same specificity as the nth-child delays above, so it must stay below them. */ body.js_nav #mobile_main_menu.bw-menu-settled>li { transition-delay: 0ms; } /* ---- hover: the rest of the menu recedes ---- reveal.js adds .bw-menu-hover to the

and publishes each item's distance from the hovered one as --bw-menu-dist (0 for the item under the cursor). The NEIGHBOURS of the hovered item fade out SLOWEST, and the further away an item is the quicker it goes — so the dimming ripples outward from the cursor rather than the whole list dropping at once. The delay must be reset to 0. These selectors are more specific than the opening cascade's, but transition-delay is a separate property: left alone, the 180–730ms delays from the cascade above still apply, and the sixth item would sit there for three quarters of a second before it started to dim. */ body.js_nav #mobile_main_menu.bw-menu-hover>li { opacity: 0.35; transition-delay: 0ms; /* 620ms adjacent (dist 1), shedding 140ms per step away, floored at 280ms so the far end of a long menu never snaps. The hovered item itself is dist 0 and is excluded below, so the 760ms this would give it is never used. */ transition-duration: max(280ms, calc(760ms - (var(--bw-menu-dist, 1) * 140ms))); } /* The item under the cursor stays lit, and comes back up briskly — a slow fade IN here would make the menu feel laggy to move around in. Driven by the class reveal.js sets, NOT by :hover: this is the mobile menu, so on the touch screens it exists for there is no hover state at all, and a :hover rule would leave every item dimmed — including the one being touched. */ body.js_nav #mobile_main_menu.bw-menu-hover>li.bw-menu-item-hovered { opacity: 1; transition-duration: 200ms; transition-delay: 0ms; } /* Respect the OS setting: show everything, immediately, with no movement. The JS still runs and still sets the "in" state — this just makes both states identical, so there is no transition to see. */ @media (prefers-reduced-motion: reduce) { #mobile_main_menu>li, body.js_nav #mobile_main_menu>li { opacity: 1; transform: none; transition: none; transition-delay: 0ms; } [data-bw-reveal], [data-bw-reveal="in"] { opacity: 1; transform: none; transition: none; } }