/* ========================================================================== SHOHRAH — Pinned horizontal scroll module Page scroll drives a track sideways while the section stays pinned. Generic mechanics (.hs-*) + the process-timeline skin (.tl-*). Below 992px, and under prefers-reduced-motion, everything unwinds into a plain vertical stack. ========================================================================== */ /* The theme sets `html, body { overflow-x: hidden }`. On that makes it a scroll container, which silently disables `position: sticky` for every descendant — pinned sections then drift off diagonally instead of holding. `clip` clips identically but creates no scroll container. Any page using this module must carry `has-hscroll` on . */ body.has-hscroll { overflow-x: clip; } /* The site header is `float-left w-100`; a block formatting context placed next to it shrinks to fit beside the float and collapses to zero width. */ .hs-wrap { position: relative; clear: both; } .hs-sticky { position: sticky; top: 0; width: 100%; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: stretch; } /* The track fills the pinned frame so panels can too — otherwise the track is only as tall as its content and every panel floats in a band of white. */ .hs-track { display: flex; align-items: stretch; height: 100%; gap: clamp(24px, 4vw, 72px); padding-inline: clamp(24px, 8vw, 140px); /* Clear of the overlaid header at the top and the progress bar below. */ padding-block: clamp(76px, 11vh, 118px) clamp(46px, 7vh, 76px); will-change: transform; } /* Each panel is the full height of the frame and centres its own content, so media reads edge-to-edge and nothing sits marooned in dead space. */ .hs-panel { flex: 0 0 auto; position: relative; display: flex; flex-direction: column; justify-content: center; } .hs-progress { position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: var(--border--color); } .hs-progress span { display: block; height: 100%; width: 0; background: var(--accent--color); } /* ========================================================================== PROCESS TIMELINE skin ========================================================================== */ .tl-intro { width: min(80vw, 560px); } .tl-eyebrow { display: inline-block; font-size: .8rem; letter-spacing: .14em; color: var(--accent--color); margin-bottom: 14px; } .tl-intro h2 { font-family: 'Thmanyah Serif Display', serif; font-weight: 400; font-size: clamp(1.9rem, 4.4vw, 3.4rem) !important; line-height: 1.25 !important; color: var(--black--color); margin: 0 0 18px; } .tl-intro p { color: var(--text--color); font-size: clamp(1rem, 1.6vw, 1.12rem); line-height: 2; margin: 0; } .tl-hint { display: none; align-items: center; gap: 10px; margin-top: 26px; color: var(--text--color2); font-size: .82rem; } .tl-hint i { color: var(--accent--color); } @media (min-width: 992px) { .tl-hint { display: flex; } } .tl-panel { width: min(74vw, 420px); } .tl-num { display: block; font-family: 'Thmanyah Serif Display', serif; font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1; color: var(--accent--color); opacity: .35; margin-bottom: 14px; } .tl-card { border: 1px solid var(--border--color); border-radius: 18px; background: #fff; padding: clamp(24px, 3vw, 38px); box-shadow: 0 18px 44px rgba(21, 77, 90, .07); } .tl-card h3 { font-family: 'Thmanyah Serif Display', serif; font-weight: 400; font-size: clamp(1.3rem, 2.2vw, 1.85rem) !important; color: var(--black--color); margin: 0 0 14px; } .tl-card p { color: var(--text--color); font-size: clamp(.95rem, 1.4vw, 1.05rem); line-height: 2; margin: 0; } /* ========================================================================== Mobile & reduced motion — unwind to a plain vertical stack ========================================================================== */ @media (max-width: 991px), (prefers-reduced-motion: reduce) { .hs-wrap { height: auto !important; } .hs-sticky { position: static; height: auto; overflow: visible; display: block; } .hs-track { display: block; height: auto; transform: none !important; padding-inline: clamp(18px, 5vw, 40px); padding-block: 10px 20px; max-width: 820px; margin: 0 auto; } .hs-panel { display: block; min-height: 0; } .hs-panel + .hs-panel { margin-top: 26px; } .hs-progress { display: none; } .tl-intro, .tl-panel { width: auto; } .tl-intro { margin-bottom: 34px; } .tl-num { font-size: 2.2rem; margin-bottom: 8px; } }