@primer/react-brand/esm/river/RiverStoryScroll/RiverStoryScroll.module-kez68wMZ.css

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{--ease:cubic-bezier(.22, .56, .23, .89);-webkit-font-smoothing:antialiased;--stackDistance:calc(var(--base-size-24) * -1);--visualMaxWidth:1032px;--visualMaxWidthUL:1032;--visualMaxHeight:min(690px, 60vh);--visualMaxHeightUL:690;--storyScrollPadding:min(32px, 5vw);position:relative}@media (height<=720px){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{--visualMaxHeight:55vh}}@media (height<=600px){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{--visualMaxHeight:50vh}}@media (height<=500px){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{--visualMaxHeight:40vh}}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__inner___WF5b_{position:relative}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-cover___3Fzq_{width:100%;position:absolute;left:0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__image___SlwET{z-index:10;border-radius:var(--brand-borderRadius-large);width:auto;margin-left:auto;margin-right:auto;display:block;position:relative}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll--enabled___rZJ_t .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__internal-river___Z0U1_{grid-template-columns:1fr;gap:0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll--enabled___rZJ_t .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__internal-river___Z0U1_ img,.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll--enabled___rZJ_t .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__internal-river___Z0U1_ video{display:none}@media (width<=542px){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{--topOffset:calc((100vh - min(664px, 60vh)) / 5)}}@media (width<=768px) and (height>=670px){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{--extraBottomSpacing:calc(-1 * (100vh - 100vw) / 5)}}@media (width>=542px) and (width<=1028px) and (height>=670px){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{--extraBottomSpacing:calc(-1 * (100vh - 100vw) / 3)}}@media (width>=542px){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{--scrollTextHeight:42vh}}@media (height<=520px){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{--scrollTextHeight:70vh}}@media (width>=1028px){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{--stackDistance:-30px}}@media (height<=800px){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{--stackDistance:-20px}}@media (height<=500px){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{--stackDistance:-15px}}@media screen and (width<=768px){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{--topOffset:calc((100vh - min(664px, 60vh)) / 3);--availableWidth:calc(100vw - var(--storyScrollPadding) * 2);--relativeVisualHeight:calc(var(--visualMaxHeightUL) / var(--visualMaxWidthUL) * var(--availableWidth));--visualHeight:min(var(--visualMaxHeight), var(--relativeVisualHeight));--visualWidth:calc(var(--visualHeight) * var(--visualMaxWidthUL) / var(--visualMaxHeightUL));--scrollTextHeight:58vh;--textToVisualPadding:max(5vh, 40px);--topScrollOffset:calc(var(--visualHeight));--bottomScrollOffset:calc(100vh - var(--topOffset) - var(--visualHeight) - var(--textToVisualPadding));--extraBottomSpacing:70px}@supports (height:100dvh){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-container-inner___6xmBy{height:100dvh}}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-container___F1VHb{width:100%;height:100%;position:absolute;top:0;left:0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__tracker___Xrp6i{min-height:var(--scrollTextHeight);transition:opacity .3s var(--ease);position:relative}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__tracker___Xrp6i:has(+.Primer_Brand__RiverStoryScroll-module__in-viewport___QNWnS){opacity:0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__tracker___Xrp6i.Primer_Brand__RiverStoryScroll-module__in-viewport___QNWnS+.Primer_Brand__RiverStoryScroll-module__outside-viewport___d_yN_{opacity:0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{max-width:calc(1032px + var(--storyScrollPadding) * 2);padding-right:var(--storyScrollPadding);padding-left:var(--storyScrollPadding);margin-top:min(30vw,22vh);margin-left:auto;margin-right:auto}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__content-container--below___wHtLU{padding-top:var(--topScrollOffset);padding-bottom:var(--bottomScrollOffset)}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__image___SlwET{width:100%;height:auto;max-width:var(--visualWidth);border-radius:var(--brand-borderRadius-large)}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-container-inner___6xmBy{pointer-events:none;padding-top:var(--topOffset);margin-top:calc(-1 * var(--topOffset));z-index:1;flex-direction:column;height:100vh;display:flex;position:sticky;top:0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual--below___E8917{background-image:linear-gradient(180deg, var(--brand-RiverStoryScroll-content-inactive-bgColor) calc(var(--topOffset) + var(--visualHeight) + 3px), transparent calc(var(--topOffset) + var(--visualHeight) + var(--textToVisualPadding)), transparent 93%, var(--brand-RiverStoryScroll-content-inactive-bgColor) 99%)}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual--below___E8917 .Primer_Brand__RiverStoryScroll-module__story-scroll-text___fiWO6{margin-top:var(--base-size-40)}.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4{opacity:0;display:none}.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4:nth-child(2){opacity:1;display:block}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-scroll-responder___AqOJd{transition:.5s var(--ease) transform, .5s var(--ease) filter, .5s var(--ease) opacity;pointer-events:auto}.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4:has(~.Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___oZzIh){margin-left:auto;margin-right:auto;display:block;position:absolute;left:0;right:0}.Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___oZzIh+.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4{transform:translateY(calc(var(--stackDistance) * -1)) scale(1.015);margin-left:auto;margin-right:auto;display:block;position:absolute;left:0;right:0}.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4:has(+.Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___oZzIh){transform:translateY(var(--stackDistance)) scale(.95);filter:brightness(70%);opacity:1}.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4:has(+.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4+.Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___oZzIh){transform:translateY(calc(var(--stackDistance) * 2)) scale(.9);filter:brightness(50%);opacity:1}.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4:has(+.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4+.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4+.Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___oZzIh){transform:translateY(calc(var(--stackDistance) * 3)) scale(.85);filter:brightness(30%);opacity:1}.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4:has(+.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4+.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4+.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4+.Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___oZzIh){transform:translateY(calc(var(--stackDistance) * 4)) scale(.8);filter:brightness(10%);opacity:1}.Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___oZzIh{display:block;position:relative}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__content-stack___LUJFy{padding-top:var(--textToVisualPadding);top:calc(var(--topOffset) + var(--visualHeight));position:sticky}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__tracker___Xrp6i:last-child .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__content-stack___LUJFy{height:0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination___N3Qqs{gap:var(--base-size-4);left:calc(var(--base-size-20) * -1 - 2px);height:var(--visualHeight);margin:auto;flex-direction:column;justify-content:center;margin-block-start:calc(var(--base-size-20) * -1);display:flex;position:absolute;right:0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination-dot___K1RGe{border-radius:var(--brand-borderRadius-large);opacity:.55;background:var(--brand-RiverStoryScroll-pagination-fgColor);width:6px;height:6px;transition:opacity var(--brand-animation-duration-default) var(--ease), height var(--brand-animation-duration-default) var(--ease)}.Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___oZzIh:nth-child(2)~.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination___N3Qqs .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination-dot___K1RGe:first-child,.Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___oZzIh:nth-child(3)~.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination___N3Qqs .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination-dot___K1RGe:nth-child(2),.Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___oZzIh:nth-child(4)~.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination___N3Qqs .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination-dot___K1RGe:nth-child(3),.Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___oZzIh:nth-child(5)~.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination___N3Qqs .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination-dot___K1RGe:nth-child(4),.Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___oZzIh:nth-child(6)~.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination___N3Qqs .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination-dot___K1RGe:nth-child(5){opacity:1;height:var(--base-size-24)}}@media screen and (width>=768px){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__inner___WF5b_{grid-gap:var(--base-size-24);gap:var(--base-size-24);grid-template-columns:1fr 1fr;display:grid}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-container___F1VHb{order:2;align-items:center;width:100%;height:80vh;display:flex;position:sticky;top:0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-container-inner___6xmBy,.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__image___SlwET{width:100%}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-scroll-responder___AqOJd{width:100%;transition:opacity .3s var(--ease);padding-top:10vh;position:sticky;top:0;right:0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-container-inner___6xmBy.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual--below___E8917{position:sticky;top:0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-scroll-responder___AqOJd.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4{z-index:-1;opacity:0;position:absolute;top:0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-scroll-responder___AqOJd.Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___oZzIh{z-index:1;opacity:1}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__content-container___8f_JH.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__content-container--below___wHtLU{padding-top:10vh}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__content-container___8f_JH.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__content-container--below___wHtLU .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__tracker___Xrp6i{padding:20vh 0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__tracker___Xrp6i.Primer_Brand__RiverStoryScroll-module__outside-viewport___d_yN_{position:relative}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__tracker___Xrp6i{filter:0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__tracker___Xrp6i.Primer_Brand__RiverStoryScroll-module__outside-viewport___d_yN_{filter:blur(1px);transition:filter var(--brand-animation-duration-extended) var(--brand-animation-easing-default)}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__tracker___Xrp6i:after{content:"";transition:opacity var(--brand-animation-duration-extended) var(--brand-animation-easing-default), visibility var(--brand-animation-duration-extended) var(--brand-animation-easing-default);opacity:0;visibility:hidden;background-color:var(--brand-RiverStoryScroll-content-inactive-bgColor);position:absolute;inset:0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__tracker___Xrp6i.Primer_Brand__RiverStoryScroll-module__outside-viewport___d_yN_:after{opacity:.7;visibility:visible}}@media screen and (width>=768px) and (height>=900px) and (prefers-reduced-motion:no-preference){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{margin-top:-20vh}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__content-container___8f_JH.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__content-container--below___wHtLU{padding-top:16vh}}@media (prefers-reduced-motion:reduce){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC,.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC:before,.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC:after,.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}