/** * RSI Toolkit — Hero Title widget. * * Baked defaults mirror the rsi_v2 design (.hero h1) so the widget is * pixel-perfect on drop. Elementor Style-tab controls emit inline rules with * higher specificity, so any of these is overridable per-instance. */ /* ===================== FULL-SCREEN HERO ON PHONES ======================== */ /* * The home page's video hero fills the screen on phones. Its height otherwise * comes entirely from padding — 380px of padding-top on mobile — which left it * 556px tall in an 844px viewport, so the next section showed beneath the video * instead of the hero filling the view. * * ── Why the hero is matched by SHAPE and not by a class ───────────────────── * * The obvious route was a CSS class on the section. It does not work here: * Elementor 4.2.1 on this install does not render `_css_classes` from the * container's saved data — the class was verified present in _elementor_data and * absent from the rendered markup, with element caching invalidated to rule that * out. So the hero is identified by the thing that actually defines it: a * top-level container carrying an Elementor background video. There is exactly one * such section on the front page. * * `.rsi-hero-fullscreen` is kept in the selector list as a manual opt-in — adding * it in Elementor's Advanced ▸ CSS Classes field works, because the editor writes * classes into the markup itself. * * ── Why svh (and NOT dvh) ────────────────────────────────────────────────── * * On a phone 100vh is the LARGE viewport, the one that assumes the browser's * toolbars are hidden, so a 100vh hero runs underneath the toolbar and loses the * bottom of the video along with anything sitting on it. * * This used to be 100dvh, and that was the "bad jump" the client recorded on an * iPhone (2026-09-24): dvh tracks the visible area LIVE, so as Safari's toolbar * collapses and re-expands during a scroll the hero grows and shrinks by the * toolbar's height and shoves every section below it up and down mid-scroll. * Measured: 664 → 750px on a simulated collapse, the whole page below moving * with it. * * svh is the SMALL viewport — the visible area with the toolbars showing. It * fills the screen on arrival exactly as dvh did, and it never changes while * scrolling, so nothing below can move. When the toolbar hides, a sliver of the * next section shows under the hero; that is the intended trade. * * Elementor's own Min Height control is not used because it offers vh only. */ @media (max-width: 767px) { body.home .e-con.e-parent:has(.elementor-background-video-container), .rsi-hero-fullscreen { min-height: 100vh; } /* * The copy sits low in the frame rather than floating in the middle of it. * * This has to go on .e-con-inner, not on the container: in a boxed container * Elementor puts the padding — all 380px of mobile padding-top — on the inner * wrapper and gives it flex-grow: 1. The outer's justify-content therefore has * nothing to push, and the copy stayed where the padding left it: 45% down an * 844px screen, where the design has it at 68% of a 556px one. Anchoring to the * foot restores that proportion and matches the desktop composition, which uses * 600px of top padding to set the copy low. */ body.home .e-con.e-parent:has(.elementor-background-video-container) > .e-con-inner, .rsi-hero-fullscreen > .e-con-inner { justify-content: flex-end; } /* A full-width (unboxed) container has no inner wrapper, so it is the container itself that does the pushing. */ body.home .e-con-full.e-parent:has(.elementor-background-video-container), .rsi-hero-fullscreen.e-con-full { justify-content: flex-end; } @supports (height: 100svh) { body.home .e-con.e-parent:has(.elementor-background-video-container), .rsi-hero-fullscreen { min-height: 100svh; } } /* Elementor's video sits in an absolutely-positioned wrapper. It stretches with the section, but the