/* ========================================================================= Recess scroll narrative — clean, self-contained port of the colors home's seven-beat scroll-driven hero onto the static SIMPLE template. No fullPage.js, no Nuxt, no deps: a sticky media stage + scroll-snap beats, driven by an IntersectionObserver crossfade (recess-scroll.js). Generated narrative pages opt in before first paint via data-scroll-narrative="retro" or "standard" plus rs-pending. Everything is scoped under .rs-* so it never touches the existing PDP styles or the appended theme CSS. The narrative sits ABOVE the normal PDP: seven full-screen beats play, then the stage releases and the real hero + price + Buy Now scroll up as the payoff. ========================================================================= */ :root { --rs-bg: #f3f1ec; /* warm neutral that blends with the light studio renders */ --rs-ink: #14130f; --rs-muted: #6f6a60; } /* Narrative product pages carry rs-pending in their generated tag, so the plain PDP is excluded from the very first paint while the existing full-screen preloader remains visible. The script removes this class only after the complete narrative has been inserted and rs-ready is set. */ html.rs-pending { overflow: hidden; } html.rs-pending #__layout > div > :not(#MSCHFPreloader) { display: none !important; } html.rs-pending #MSCHFPreloader { opacity: 1 !important; visibility: visible !important; } /* Gentle snap for the narrative only; proximity (not mandatory) so the rest of the PDP below scrolls freely once the story is done. Disabled in JS-off / reduced-motion cases. */ html[data-scroll-narrative].rs-ready:not([data-dino-beat-nav="true"]) { scroll-snap-type: y proximity; } html[data-dino-beat-nav="true"].rs-ready.rs-snap-active { scroll-snap-type: y mandatory; overscroll-behavior-y: contain; } html[data-dino-beat-nav="true"] .rs-beat { scroll-snap-stop: always; } html[data-dino-beat-nav="true"] section.hero { scroll-snap-align: start; scroll-snap-stop: always; } .rs-narrative { position: relative; background: var(--rs-bg); color: var(--rs-ink); /* hide until the component has wired itself up to avoid an unstyled flash */ font-family: inherit; } /* ---- sticky media stage (the pinned image column) ---------------------- */ .rs-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; z-index: 0; background: var(--rs-bg); } .rs-layer { position: absolute; inset: 0; background-repeat: no-repeat; background-position: center 46%; background-size: contain; opacity: 0; transition: opacity 0.6s ease; will-change: opacity; } .rs-layer.is-front { opacity: 1; } .rs-picture, .rs-media { display: block; width: 100%; height: 100%; } .rs-media { object-fit: contain; object-position: center 46%; } /* missing-imagery placeholder — shown for a beat whose standard still is not on disk (recess-scroll.js "standard" variant). A clearly-marked gap, never a borrowed retro still; sits above the (blank) layers, below the scrim + copy. */ .rs-missing { position: absolute; inset: 0; z-index: 1; display: none; align-items: center; justify-content: center; padding: 24px; background-color: #ece8df; background-image: repeating-linear-gradient( 45deg, rgba(20, 19, 15, 0.05) 0, rgba(20, 19, 15, 0.05) 12px, transparent 12px, transparent 24px ); } .rs-stage--missing .rs-missing { display: flex; } .rs-missing-card { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: clamp(20px, 4vw, 36px) clamp(22px, 5vw, 44px); border: 2px dashed rgba(20, 19, 15, 0.3); border-radius: 16px; background: rgba(243, 241, 236, 0.86); max-width: 440px; } .rs-missing-kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rs-muted); } .rs-missing-beat { font-size: clamp(20px, 3.4vw, 28px); font-weight: 800; color: var(--rs-ink); } .rs-missing-note { font-size: 14px; line-height: 1.45; color: var(--rs-muted); } /* soft scrim under the copy zone so dark text stays legible on any render */ .rs-scrim { position: absolute; inset: 0 0 auto 0; height: 46%; background: linear-gradient(180deg, rgba(243, 241, 236, 0.96) 0%, rgba(243, 241, 236, 0.72) 42%, rgba(243, 241, 236, 0) 100%); pointer-events: none; z-index: 2; } /* ---- beats (overlay the sticky stage) ---------------------------------- */ .rs-beats { position: relative; z-index: 3; margin-top: -100vh; margin-top: -100svh; } .rs-beat { position: relative; min-height: 100vh; min-height: 100svh; scroll-snap-align: start; display: flex; justify-content: center; padding: clamp(28px, 7vh, 80px) 24px 0; box-sizing: border-box; } .rs-copy { width: 100%; max-width: 760px; text-align: center; /* start hidden; the active beat fades + lifts in */ opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease; } .rs-beat.is-active .rs-copy { opacity: 1; transform: none; } .rs-head { margin: 0; font-weight: 800; line-height: 1.04; letter-spacing: -0.02em; font-size: clamp(30px, 5.4vw, 62px); text-wrap: balance; } .rs-sub { margin: 0.9em auto 0; max-width: 30ch; font-size: clamp(15px, 1.9vw, 19px); line-height: 1.5; color: var(--rs-muted); } /* progress rail */ .rs-rail { position: fixed; top: 50%; right: clamp(12px, 2.4vw, 30px); transform: translateY(-50%); display: flex; flex-direction: column; gap: 11px; z-index: 6; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .rs-rail.is-on { opacity: 1; } .rs-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(20, 19, 15, 0.22); transition: background 0.3s ease, transform 0.3s ease; } .rs-dot.is-active { background: var(--rs-ink); transform: scale(1.35); } /* scroll cue — the colors next-section-button: a small bouncing icon (black circle + yellow chevron) + an uppercase text label, sitting BELOW the headline. Small and subtle (~34px tall), not a big circle. */ .rs-cue { display: inline-flex; align-items: center; justify-content: center; margin: 1.5em auto 0; padding: 6px 4px; color: var(--rs-ink); font-size: clamp(14px, 1.5vw, 17px); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; } html[data-dino-beat-nav="true"] .rs-cue { appearance: none; -webkit-tap-highlight-color: transparent; min-width: 44px; min-height: 44px; border: 0; background: transparent; font: inherit; cursor: pointer; border-radius: 6px; } html[data-dino-beat-nav="true"] .rs-cue:active { transform: translateY(1px); } html[data-dino-beat-nav="true"] .rs-cue:focus:not(:focus-visible) { outline: none; box-shadow: none; } html[data-dino-beat-nav="true"] .rs-cue:focus-visible { outline: 3px solid var(--rs-ink); outline-offset: 4px; } html[data-dino-beat-nav="true"] section.hero:focus-visible { outline: 3px solid var(--rs-ink); outline-offset: 4px; } .rs-cue-icon { width: 22px; height: 22px; margin-right: 8px; margin-top: -4px; animation: rs-bounce 1.5s ease-in-out infinite; } @keyframes rs-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } /* keep the always-on sticky buy bar out of the story; it returns with the price reveal once the narrative hands off to the PDP */ html[data-scroll-narrative] .bid-wrapper { transition: opacity 0.45s ease; } html.rs-hide-sticky .bid-wrapper { opacity: 0; visibility: hidden; pointer-events: none; } /* the price/buy payoff reveal once the story ends */ .buy-box.rs-armed { opacity: 0; transform: translateY(26px); } .buy-box.rs-armed.rs-revealed { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.7s ease; } @media (prefers-reduced-motion: reduce) { html[data-scroll-narrative].rs-ready { scroll-snap-type: none; } html[data-dino-beat-nav="true"].rs-ready.rs-snap-active { scroll-snap-type: none; } .rs-layer { transition: none; } .rs-copy { opacity: 1; transform: none; transition: none; } .rs-cue-icon { animation: none; } .buy-box.rs-armed { opacity: 1; transform: none; } } @media (max-width: 600px) { .rs-rail { display: none; } .rs-layer { background-position: center 54%; } .rs-media { object-position: center 54%; } .rs-scrim { height: 44%; } .rs-beat { padding-left: 26px; padding-right: 26px; } .rs-head { font-size: clamp(24px, 6.6vw, 34px); } }