@primer/react-brand 0.34.4-rc.d299effb → 0.35.0-rc.02f8890c

package/lib/css/main.css

@@ -89,7 +89,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root,
@@ -367,7 +367,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root {
@@ -392,7 +392,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root {
@@ -408,7 +408,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root {
@@ -540,7 +540,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root {
@@ -554,7 +554,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root {
@@ -573,7 +573,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root,
@@ -707,6 +707,11 @@ select {
   max-width: 18ch;
 }
 
+.Primer_Brand__Hero-module__Hero-heading--fullWidth___Q3N1y {
+  max-width: none;
+  max-width: initial;
+}
+
 .Primer_Brand__Hero-module__Hero-description___vG4iA {
   margin: var(--base-size-24) 0 0;
   max-width: 50ch;
@@ -963,7 +968,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root,
@@ -1549,7 +1554,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root {
@@ -1776,7 +1781,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root,
@@ -2060,7 +2065,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root {
@@ -2087,7 +2092,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root,
@@ -2845,7 +2850,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root {
@@ -3688,7 +3693,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root {
@@ -3709,7 +3714,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root {
@@ -3720,7 +3725,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root {
@@ -3932,6 +3937,549 @@ select {
   }
 }
 
+.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___GKo1Z {
+  --ease: cubic-bezier(0.22, 0.56, 0.23, 0.89);
+  -webkit-font-smoothing: antialiased;
+  --stackDistance: calc(var(--base-size-24) * -1);
+
+  /* River visual (videos)
+  * UL = unit-less, needed for division in certain scenarios
+  */
+  --visualMaxWidth: 1032px;
+  --visualMaxWidthUL: 1032;
+  --visualMaxHeight: min(690px, 60vh);
+  --visualMaxHeightUL: 690;
+  position: relative;
+}
+
+@media (max-height: 600px) {
+
+.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___GKo1Z {
+    --visualMaxHeight: 50vh;
+}
+  }
+
+@media (max-height: 500px) {
+
+.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___GKo1Z {
+    --visualMaxHeight: 40vh;
+}
+  }
+
+.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__inner___V0daX {
+  position: relative;
+}
+
+.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-cover___rCa_Y {
+  position: absolute;
+  left: 0;
+  width: 100%;
+}
+
+.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__image___WmawN {
+  margin-left: auto;
+  margin-right: auto;
+  width: auto;
+  z-index: 10;
+  position: relative;
+  border-radius: var(--brand-borderRadius-large);
+}
+
+.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll--enabled___EpqB5 .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__internal-river___eUmDR {
+  grid-template-columns: 1fr;
+  gap: 0;
+}
+
+.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll--enabled___EpqB5 .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__internal-river___eUmDR img,
+.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll--enabled___EpqB5 .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__internal-river___eUmDR video {
+  display: none;
+}
+
+@media screen and (max-width: 768px) {
+    @media (max-height: 720px) {
+  .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___GKo1Z {
+      --visualMaxHeight: 55vh;
+  }
+    }
+  .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___GKo1Z {
+
+    --topOffset: calc((100vh - min(664px, 60vh)) / 3);
+  }
+
+    @media (max-width: 542px) {
+  .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___GKo1Z {
+      /* --topOffset: calc((100vh - min(664px, 60vh)) / 2);*/
+
+      --topOffset: calc((100vh - min(664px, 60vh)) / 5);
+  }
+    }
+  .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___GKo1Z {
+    /* Spacing above the visual */
+    --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;
+  }
+
+    @media (max-width: 768px) and (min-height: 670px) {
+  .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___GKo1Z {
+      --extraBottomSpacing: calc(-1 * (100vh - 100vw) / 5);
+  }
+    }
+
+    @media (min-width: 542px) and (max-width: 1028px) and (min-height: 670px) {
+  .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___GKo1Z {
+      --extraBottomSpacing: calc(-1 * (100vh - 100vw) / 3);
+  }
+    }
+
+    @media (min-width: 542px) {
+  .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___GKo1Z {
+      --scrollTextHeight: 42vh;
+  }
+    }
+    @media (max-height: 520px) {
+  .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___GKo1Z {
+      --scrollTextHeight: 70vh;
+  }
+    }
+
+    @media (min-width: 768px) {
+  .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___GKo1Z {
+  }
+    }
+  .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___GKo1Z {
+
+    --storyScrollPadding: min(32px, 5vw);
+  }
+
+    @media (min-width: 1028px) {
+  .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___GKo1Z {
+      --stackDistance: -30px;
+  }
+    }
+
+    @media (max-height: 800px) {
+  .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___GKo1Z {
+      --stackDistance: -20px;
+  }
+    }
+
+    @media (max-height: 500px) {
+  .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___GKo1Z {
+      --stackDistance: -15px;
+  }
+    }
+  .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___GKo1Z {
+
+    .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-container___ZJlnt {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+    }
+
+    .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__tracker___SR7oo {
+      min-height: var(--scrollTextHeight);
+      position: relative;
+      transition: opacity 0.3s var(--ease);
+    }
+
+    .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__tracker___SR7oo[\:has\(\%2B\%20.in-viewport\)] {
+      opacity: 0;
+    }
+
+    .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__tracker___SR7oo:has(+ .Primer_Brand__RiverStoryScroll-module__in-viewport___AxNUA) {
+      opacity: 0;
+    }
+
+    .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__tracker___SR7oo.Primer_Brand__RiverStoryScroll-module__in-viewport___AxNUA + .Primer_Brand__RiverStoryScroll-module__outside-viewport___ivCAg {
+      opacity: 0;
+    }
+
+    .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___GKo1Z {
+      max-width: calc(1032px + var(--storyScrollPadding) * 2);
+      margin-top: min(30vw, 22vh);
+      margin-left: auto;
+      margin-right: auto;
+      padding-right: var(--storyScrollPadding);
+      padding-left: var(--storyScrollPadding);
+    }
+
+    .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__content-container--below____OTaq {
+      padding-top: var(--topScrollOffset);
+      padding-bottom: var(--bottomScrollOffset);
+    }
+
+    .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__image___WmawN {
+      height: auto;
+      width: 100%;
+      max-width: var(--visualWidth);
+      border-radius: var(--brand-borderRadius-large);
+    }
+
+    .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-container-inner___oFalR {
+      position: sticky;
+      pointer-events: none;
+      top: 0;
+      padding-top: var(--topOffset);
+      margin-top: calc(-1 * var(--topOffset));
+      display: flex;
+      z-index: 1;
+      flex-direction: column;
+      height: 100vh;
+    }
+
+    /* Enhanced styling if dvh is supported */
+  }
+    @supports (height: 100dvh) {
+  .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___GKo1Z {
+      .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-container-inner___oFalR {
+        height: 100dvh;
+      }
+  }
+    }
+  .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___GKo1Z {
+
+    .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual--below___gJyav {
+      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___gJyav .Primer_Brand__RiverStoryScroll-module__story-scroll-text___isxdl {
+      margin-top: var(--base-size-40);
+    }
+
+    .Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___K2b2B {
+      opacity: 0;
+      display: none;
+    }
+
+    /* Show first visual, even when nothing is visible */
+    .Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___K2b2B:nth-child(2) {
+      opacity: 1;
+      display: block;
+    }
+
+    .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-scroll-responder___DKr1C {
+      transition: 0.5s var(--ease) transform, 0.5s var(--ease) filter, 0.5s var(--ease) opacity;
+      pointer-events: auto;
+    }
+
+    .Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___K2b2B[\:has\(\%20.tracker-in-viewport\)] {
+      position: absolute;
+      display: block;
+      margin-left: auto;
+      margin-right: auto;
+      left: 0;
+      right: 0;
+    }
+
+    .Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___K2b2B:has(~ .Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___MYQAv) {
+      position: absolute;
+      display: block;
+      margin-left: auto;
+      margin-right: auto;
+      left: 0;
+      right: 0;
+    }
+
+    .Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___MYQAv + .Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___K2b2B {
+      transform: translateY(calc(var(--stackDistance) * -1)) scale(1.015);
+      position: absolute;
+      display: block;
+      margin-left: auto;
+      margin-right: auto;
+      left: 0;
+      right: 0;
+    }
+
+    .Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___K2b2B[\:has\(\%2B\%20.tracker-in-viewport\)] {
+      transform: translateY(var(--stackDistance)) scale(0.95);
+      filter: brightness(70%);
+      opacity: 1;
+    }
+
+    .Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___K2b2B:has(+ .Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___MYQAv) {
+      transform: translateY(var(--stackDistance)) scale(0.95);
+      filter: brightness(70%);
+      opacity: 1;
+    }
+
+    .Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___K2b2B[\:has\(\%2B\%20.tracker-outside-viewport\%20\%2B\%20.tracker-in-viewport\)] {
+      transform: translateY(calc(var(--stackDistance) * 2)) scale(0.9);
+      filter: brightness(50%);
+      opacity: 1;
+    }
+
+    .Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___K2b2B:has(+ .Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___K2b2B + .Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___MYQAv) {
+      transform: translateY(calc(var(--stackDistance) * 2)) scale(0.9);
+      filter: brightness(50%);
+      opacity: 1;
+    }
+
+    .Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___K2b2B[\:has\(\%2B\%20.tracker-outside-viewport\%20\%2B\%20.tracker-outside-viewport\%20\%2B\%20.tracker-in-viewport\)] {
+      transform: translateY(calc(var(--stackDistance) * 3)) scale(0.85);
+      filter: brightness(30%);
+      opacity: 1;
+    }
+
+    .Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___K2b2B:has(+ .Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___K2b2B + .Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___K2b2B + .Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___MYQAv) {
+      transform: translateY(calc(var(--stackDistance) * 3)) scale(0.85);
+      filter: brightness(30%);
+      opacity: 1;
+    }
+
+    .Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___K2b2B[\:has\(\%0A\%20\%20\%20\%20\%20\%20\%20\%20\%2B\%20.tracker-outside-viewport\%20\%2B\%20.tracker-outside-viewport\%20\%2B\%20.tracker-outside-viewport\%20\%2B\%20.tracker-in-viewport\%0A\%20\%20\%20\%20\%20\%20\)] {
+      transform: translateY(calc(var(--stackDistance) * 4)) scale(0.8);
+      filter: brightness(10%);
+      opacity: 1;
+    }
+
+    .Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___K2b2B:has(
+        + .Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___K2b2B + .Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___K2b2B + .Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___K2b2B + .Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___MYQAv
+      ) {
+      transform: translateY(calc(var(--stackDistance) * 4)) scale(0.8);
+      filter: brightness(10%);
+      opacity: 1;
+    }
+
+    .Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___MYQAv {
+      display: block;
+      position: relative;
+    }
+
+    /* 
+    TODO: Re-enable these at a later date
+    
+    .video-controls {
+      --distanceFromEdge: 12px;
+      position: absolute;
+      right: calc((100% - var(--visualWidth)) / 2 + var(--distanceFromEdge));
+      bottom: var(--distanceFromEdge);
+      z-index: 10;
+      pointer-events: auto;
+      transition: opacity 0.3s var(--ease);
+      opacity: 0;
+    }
+
+    @media (min-width: 542px) {
+      .video-controls {
+        --distanceFromEdge: 20px;
+      }
+    }
+
+    .RiverStoryScroll__visual-scroll-responder:hover .video-controls,
+    .video-controls-ended {
+      opacity: 1;
+    }
+
+    .video-control {
+      background-color: rgba(0, 0, 0, 0.18);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 200px;
+      width: 44px;
+      height: 44px;
+      transition: background-color 0.2s ease;
+    }
+
+    .video-control:hover,
+    .video-control:focus {
+      background-color: rgba(0, 0, 0, 0.35);
+    } */
+
+    .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__content-stack___jBEVs {
+      position: sticky;
+      padding-top: var(--textToVisualPadding);
+      top: calc(var(--topOffset) + var(--visualHeight));
+    }
+
+    /* This is a hack to make the sticky behavior exclude the height of itself as it reaches the bottom */
+    /* This makes it possible to calculate the end of the sticky scroll without having to account for text content */
+    .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__tracker___SR7oo:last-child .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__content-stack___jBEVs {
+      height: 0;
+    }
+
+    .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination___KPrEv {
+      display: flex;
+      flex-direction: column;
+      gap: var(--base-size-4);
+      position: absolute;
+      left: calc((100vw - 100%) / 2 * -1 + min(10px, 2.8vw));
+      right: 0;
+      margin: auto;
+      height: var(--visualHeight);
+      justify-content: center;
+    }
+
+    .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination-dot___G_E1k {
+      width: 6px;
+      height: 6px;
+      border-radius: var(--brand-borderRadius-large);
+      opacity: 0.55;
+      background: var(--brand-RiverStoryScroll-pagination-fgColor);
+      transition: opacity var(--brand-animation-duration-default) var(--ease),
+        height var(--brand-animation-duration-default) var(--ease);
+    }
+
+    .Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___MYQAv:nth-child(2) ~ .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination___KPrEv .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination-dot___G_E1k:nth-child(1) {
+      opacity: 1;
+      height: var(--base-size-24);
+    }
+
+    .Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___MYQAv:nth-child(3) ~ .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination___KPrEv .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination-dot___G_E1k:nth-child(2) {
+      opacity: 1;
+      height: var(--base-size-24);
+    }
+
+    .Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___MYQAv:nth-child(4) ~ .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination___KPrEv .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination-dot___G_E1k:nth-child(3) {
+      opacity: 1;
+      height: var(--base-size-24);
+    }
+
+    .Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___MYQAv:nth-child(5) ~ .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination___KPrEv .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination-dot___G_E1k:nth-child(4) {
+      opacity: 1;
+      height: var(--base-size-24);
+    }
+
+    .Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___MYQAv:nth-child(6) ~ .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination___KPrEv .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination-dot___G_E1k:nth-child(5) {
+      opacity: 1;
+      height: var(--base-size-24);
+    }
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__inner___V0daX {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: var(--base-size-24);
+    gap: var(--base-size-24);
+  }
+
+  .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-container___ZJlnt {
+    position: sticky;
+    width: 100%;
+    top: 0;
+    height: 80vh;
+    display: flex;
+    align-items: center;
+    order: 2;
+  }
+
+  .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-container-inner___oFalR,
+  .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__image___WmawN {
+    width: 100%;
+  }
+
+  .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___GKo1Z .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-scroll-responder___DKr1C {
+    position: sticky;
+    top: 0;
+    width: 100%;
+    right: 0;
+    transition: opacity 0.3s var(--ease);
+    padding-top: 10vh;
+  }
+
+  .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-container-inner___oFalR.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual--below___gJyav {
+    position: sticky;
+    top: 0;
+  }
+
+  .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-scroll-responder___DKr1C.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___K2b2B {
+    position: absolute;
+    top: 0;
+    z-index: -1;
+    opacity: 0;
+  }
+
+  .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-scroll-responder___DKr1C.Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___MYQAv {
+    z-index: 1;
+    opacity: 1;
+  }
+
+  .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__content-container____Rsbs.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__content-container--below____OTaq {
+    padding-top: 10vh;
+  }
+
+  .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__content-container____Rsbs.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__content-container--below____OTaq .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__tracker___SR7oo {
+    padding: 20vh 0;
+  }
+
+  .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__tracker___SR7oo.Primer_Brand__RiverStoryScroll-module__outside-viewport___ivCAg {
+    position: relative;
+  }
+
+  .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__tracker___SR7oo {
+    filter: 0;
+  }
+
+  .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__tracker___SR7oo.Primer_Brand__RiverStoryScroll-module__outside-viewport___ivCAg {
+    filter: blur(1px);
+    transition: filter var(--brand-animation-duration-extended) var(--brand-animation-easing-default);
+  }
+
+  .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__tracker___SR7oo::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;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--brand-RiverStoryScroll-content-inactive-bgColor);
+  }
+
+  .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__tracker___SR7oo.Primer_Brand__RiverStoryScroll-module__outside-viewport___ivCAg::after {
+    opacity: 0.7;
+    visibility: visible;
+  }
+}
+
+@media screen and (min-width: 768px) and (min-height: 900px) {
+  .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___GKo1Z {
+    margin-top: -20vh;
+  }
+
+  .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__content-container____Rsbs.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__content-container--below____OTaq {
+    padding-top: 16vh;
+  }
+}
+
+/**
+ * Do not edit directly
+ * Generated on Thu, 18 Jul 2024 12:33:25 GMT
+ */
+
+:root,
+[data-color-mode="light"] {
+  --brand-RiverStoryScroll-pagination-fgColor: var(--base-color-scale-gray-6);
+  --brand-RiverStoryScroll-content-inactive-bgColor: var(--brand-color-canvas-default);
+}
+
+[data-color-mode="dark"] {
+  --brand-RiverStoryScroll-pagination-fgColor: var(--base-color-scale-white-0);
+  --brand-RiverStoryScroll-content-inactive-bgColor: var(--brand-color-canvas-default);
+}
+
 /*
  * Main styles for the subdomain navigation bar.
  */
@@ -4671,7 +5219,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root,
@@ -4699,7 +5247,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root,
@@ -4715,7 +5263,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root {
@@ -4839,7 +5387,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root,
@@ -4855,7 +5403,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root,
@@ -5101,7 +5649,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root {
@@ -5110,7 +5658,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root,
@@ -5128,7 +5676,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root {
@@ -5259,7 +5807,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root,
@@ -6360,7 +6908,7 @@ Fixes safari bug where outline doesn't respect border-radius
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root {
@@ -6374,7 +6922,7 @@ Fixes safari bug where outline doesn't respect border-radius
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root,
@@ -6612,7 +7160,7 @@ Fixes safari bug where outline doesn't respect border-radius
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root,
@@ -6628,7 +7176,7 @@ Fixes safari bug where outline doesn't respect border-radius
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root {
@@ -6946,7 +7494,7 @@ Fixes safari bug where outline doesn't respect border-radius
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root,
@@ -7398,18 +7946,20 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root,
 [data-color-mode="light"] {
   --brand-CTABanner-shadow-color-start: var(--base-color-scale-green-5);
   --brand-CTABanner-shadow-color-end: var(--base-color-scale-blue-5);
+  --brand-CTABanner-bgColor: var(--brand-color-canvas-default);
 }
 
 [data-color-mode="dark"] {
   --brand-CTABanner-shadow-color-start: var(--base-color-scale-green-2);
   --brand-CTABanner-shadow-color-end: var(--base-color-scale-blue-3);
+  --brand-CTABanner-bgColor: var(--brand-color-canvas-default);
 }
 
 .Primer_Brand__CTABanner-module__CTABanner___m0t8s {
@@ -7454,7 +8004,7 @@ html {
 }
 
 .Primer_Brand__CTABanner-module__CTABanner-container--background___v1yTH {
-  background: var(--brand-color-canvas-default);
+  background: var(--brand-CTABanner-bgColor);
 }
 
 .Primer_Brand__CTABanner-module__CTABanner-container--border___FbAer {
@@ -7587,7 +8137,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root,
@@ -7726,7 +8276,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root,
@@ -7856,7 +8406,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root {
@@ -7867,7 +8417,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root,
@@ -8308,7 +8858,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root,
@@ -8867,7 +9417,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root {
@@ -8878,7 +9428,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root,
@@ -12692,6 +13242,25 @@ html {
   border-style: none;
 }
 
+.Primer_Brand__Captions-module__Captions___xrhu1 {
+  max-width: 80ch;
+  padding-left: var(--base-size-16);
+  padding-right: var(--base-size-16);
+  margin: var(--brand-VideoPlayer-closedCaption-margin);
+  display: grid;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.Primer_Brand__Captions-module__Captions__text___e1cBR {
+  color: var(--brand-VideoPlayer-closedCaption-text-fgColor);
+  text-align: center;
+  background: var(--brand-VideoPlayer-closedCaption-text-bgColor);
+  padding: var(--brand-VideoPlayer-closedCaption-text-padding);
+  border-radius: var(--brand-borderRadius-medium);
+  display: inline-block;
+}
+
 /* ---------------------------------------------------------- */
 /* VideoPlayer Contents                                       */
 /* ---------------------------------------------------------- */
@@ -12714,6 +13283,7 @@ html {
   width: 100%;
   position: relative;
   overflow: hidden;
+  border-radius: var(--brand-borderRadius-medium);
 }
 
 /* ---------------------------------------------------------- */
@@ -12722,7 +13292,7 @@ html {
 
 .Primer_Brand__VideoPlayer-module__VideoPlayer___iNxEw {
   width: 100%;
-  border-radius: var(--brand-borderRadius-medium);
+  max-height: 100%;
   display: block;
 }
 
@@ -12736,32 +13306,25 @@ html {
   left: 0;
   width: 100%;
   height: 100%;
-  background: transparent;
+  background: rgba(0,0,0,0.2); /* TODO Use a token for this once v8 migration has been completed */
   border: none;
   z-index: 1;
 }
 
-.Primer_Brand__VideoPlayer-module__VideoPlayer__playButtonInner___FpXVO {
-  height: var(--brand-VideoPlayer-playButton-height);
-  width: var(--brand-VideoPlayer-playButton-width);
-  display: inline-block;
-  padding: var(--brand-VideoPlayer-playButton-padding);
-  box-sizing: content-box;
-  background: var(--brand-videoPlayer-playButton-bgColor-rest);
-  border-radius: 50%;
-}
-
-.Primer_Brand__VideoPlayer-module__VideoPlayer__playButtonInner___FpXVO > svg {
-  margin-left: 0.3125rem;
+.Primer_Brand__VideoPlayer-module__VideoPlayer__playButtonOverlay___J7kgz {
+  width: 25%;
+  height: 25%;
+  max-width: var(--brand-VideoPlayer-playButton-width);
+  max-height: var(--brand-VideoPlayer-playButton-height);
+  opacity: 0.8;
 }
 
 .Primer_Brand__VideoPlayer-module__VideoPlayer__playButton___qff0F:focus {
   border: var(--brand-borderWidth-thick) solid var(--brand-color-focus);
-  box-shadow: 0 0 0 2px var(--brand-color-focus);
+  box-shadow: 0 0 0 0.125rem var(--brand-color-focus);
 }
 
 .Primer_Brand__VideoPlayer-module__VideoPlayer__playButton___qff0F svg {
-  cursor: pointer;
   color: var(--brand-videoPlayer-playButton-fgColor-rest);
 }
 
@@ -12771,52 +13334,45 @@ html {
 
 .Primer_Brand__VideoPlayer-module__VideoPlayer__title___F1E2j {
   transition: var(--brand-VideoPlayer-transition);
-  top: -10px;
-  opacity: 0;
+  top: 0;
   position: absolute;
   border-radius: var(--brand-borderRadius-medium);
   left: 0;
   width: 100%;
   z-index: 2;
-  padding: var(--base-size-16) var(--base-size-24);
+  padding: var(--base-size-16);
   color: var(--brand-videoPlayer-title-fgColor);
   display: grid;
   align-items: center;
   justify-content: flex-start;
-  grid-gap: 10px;
+  grid-gap: var(--base-size-12);
   grid-template-columns: auto auto;
   background: var(--brand-videoPlayer-title-bgColor);
 }
 
-.Primer_Brand__VideoPlayer-module__VideoPlayer__showOverlays___aMQQ6 .Primer_Brand__VideoPlayer-module__VideoPlayer__title___F1E2j {
-  top: 0;
-  opacity: 1;
-}
-
-.Primer_Brand__VideoPlayer-module__VideoPlayer__overlays___xv3Xi:hover .Primer_Brand__VideoPlayer-module__VideoPlayer__title___F1E2j {
-  top: 0;
-  opacity: 1;
-}
-
 /* ---------------------------------------------------------- */
 /* 5. Controls                                                */
 /* ---------------------------------------------------------- */
 
 .Primer_Brand__VideoPlayer-module__VideoPlayer__controls___hNpxI {
   transition: var(--brand-VideoPlayer-transition);
-  bottom: -58px;
+  bottom: 0;
   position: absolute;
   z-index: 2;
   width: 100%;
   pointer-events: none;
+  opacity: 1;
+  transition: opacity 2s ease-in-out;
 }
 
-.Primer_Brand__VideoPlayer-module__VideoPlayer__controlsWrapper___Kpqo7 {
-  display: grid;
-  grid-gap: var(--base-size-16);
-  align-items: center;
-  grid-template-columns: auto 2fr auto auto auto auto auto;
+.Primer_Brand__VideoPlayer-module__VideoPlayer__controls--hidden___I_HD0 {
   opacity: 0;
+}
+
+.Primer_Brand__VideoPlayer-module__VideoPlayer__controlsBar___L4653 {
+  display: flex;
+  gap: var(--base-size-16);
+  align-items: center;
   border-bottom-right-radius: var(--brand-borderRadius-medium);
   border-bottom-left-radius: var(--brand-borderRadius-medium);
   left: 0;
@@ -12826,10 +13382,6 @@ html {
   pointer-events: all;
 }
 
-.Primer_Brand__VideoPlayer-module__VideoPlayer__container--small___TxAd8 .Primer_Brand__VideoPlayer-module__VideoPlayer__controlsWrapper___Kpqo7 {
-  grid-template-columns: auto 2fr auto auto auto auto;
-}
-
 .Primer_Brand__VideoPlayer-module__VideoPlayer__controls___hNpxI:focus,
 .Primer_Brand__VideoPlayer-module__VideoPlayer__controls___hNpxI[focus-within] {
   bottom: 0;
@@ -12840,30 +13392,13 @@ html {
   bottom: 0;
 }
 
-.Primer_Brand__VideoPlayer-module__VideoPlayer__controls___hNpxI:focus .Primer_Brand__VideoPlayer-module__VideoPlayer__controlsWrapper___Kpqo7,
-.Primer_Brand__VideoPlayer-module__VideoPlayer__controls___hNpxI[focus-within] .Primer_Brand__VideoPlayer-module__VideoPlayer__controlsWrapper___Kpqo7 {
+.Primer_Brand__VideoPlayer-module__VideoPlayer__controls___hNpxI:focus .Primer_Brand__VideoPlayer-module__VideoPlayer__controlsBar___L4653,
+.Primer_Brand__VideoPlayer-module__VideoPlayer__controls___hNpxI[focus-within] .Primer_Brand__VideoPlayer-module__VideoPlayer__controlsBar___L4653 {
   opacity: 1;
 }
 
-.Primer_Brand__VideoPlayer-module__VideoPlayer__controls___hNpxI:focus .Primer_Brand__VideoPlayer-module__VideoPlayer__controlsWrapper___Kpqo7,
-.Primer_Brand__VideoPlayer-module__VideoPlayer__controls___hNpxI:focus-within .Primer_Brand__VideoPlayer-module__VideoPlayer__controlsWrapper___Kpqo7 {
-  opacity: 1;
-}
-
-.Primer_Brand__VideoPlayer-module__VideoPlayer__showOverlays___aMQQ6 .Primer_Brand__VideoPlayer-module__VideoPlayer__controls___hNpxI {
-  bottom: 0;
-}
-
-.Primer_Brand__VideoPlayer-module__VideoPlayer__showOverlays___aMQQ6 .Primer_Brand__VideoPlayer-module__VideoPlayer__controlsWrapper___Kpqo7 {
-  opacity: 1;
-}
-
-.Primer_Brand__VideoPlayer-module__VideoPlayer__overlays___xv3Xi:hover .Primer_Brand__VideoPlayer-module__VideoPlayer__controlsWrapper___Kpqo7 {
-  opacity: 1;
-}
-
-.Primer_Brand__VideoPlayer-module__VideoPlayer__overlays___xv3Xi:hover .Primer_Brand__VideoPlayer-module__VideoPlayer__controls___hNpxI {
-  bottom: 0;
+.Primer_Brand__VideoPlayer-module__VideoPlayer__controls___hNpxI:focus .Primer_Brand__VideoPlayer-module__VideoPlayer__controlsBar___L4653,
+.Primer_Brand__VideoPlayer-module__VideoPlayer__controls___hNpxI:focus-within .Primer_Brand__VideoPlayer-module__VideoPlayer__controlsBar___L4653 {
   opacity: 1;
 }
 
@@ -12872,7 +13407,7 @@ html {
   background: none;
   border: none;
   cursor: pointer;
-  height: 24px;
+  height: var(--base-size-24);
   box-sizing: content-box;
   position: relative;
   padding: 0;
@@ -12881,14 +13416,14 @@ html {
 .Primer_Brand__VideoPlayer-module__VideoPlayer__iconControl___Tw7A4.Primer_Brand__VideoPlayer-module__focus-visible___AKGlH {
   border-color: var(--brand-color-focus);
   outline: none;
-  box-shadow: 0 0 0 2px var(--brand-color-focus);
+  box-shadow: 0 0 0 0.125rem var(--brand-color-focus);
   opacity: 1;
 }
 
 .Primer_Brand__VideoPlayer-module__VideoPlayer__iconControl___Tw7A4:focus-visible {
   border-color: var(--brand-color-focus);
   outline: none;
-  box-shadow: 0 0 0 2px var(--brand-color-focus);
+  box-shadow: 0 0 0 0.125rem var(--brand-color-focus);
   opacity: 1;
 }
 
@@ -12900,13 +13435,15 @@ html {
   opacity: 1;
 }
 
-.Primer_Brand__VideoPlayer-module__VideoPlayer__progressTime___GvTKs {
-  width: 100%;
-  color: var(--brand-videoPlayer-controls-fgColor);
+.Primer_Brand__VideoPlayer-module__VideoPlayer__seek___Z4IA2 {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--base-size-16);
 }
 
-.Primer_Brand__VideoPlayer-module__VideoPlayer__totalTime___nWILS {
-  display: inline-block;
+.Primer_Brand__VideoPlayer-module__VideoPlayer__progressTime___GvTKs {
+  color: var(--brand-videoPlayer-controls-fgColor);
 }
 
 .Primer_Brand__VideoPlayer-module__VideoPlayer__container--small___TxAd8 .Primer_Brand__VideoPlayer-module__VideoPlayer__totalTime___nWILS {
@@ -12914,14 +13451,14 @@ html {
 }
 
 .Primer_Brand__VideoPlayer-module__VideoPlayer__progressBar___wYSPx {
-  width: 100%;
-  height: 6px;
+  flex: 1;
+  height: var(--base-size-6);
 }
 
 .Primer_Brand__VideoPlayer-module__VideoPlayer__closedCaption___PAvgt {
   border-radius: var(--brand-borderRadius-medium);
-  padding: 1px 5px;
-  border: 2px solid var(--brand-videoPlayer-closedCaption-borderColor-enabled);
+  padding: 0.125rem var(--base-size-4);
+  border: 0.125rem solid var(--brand-videoPlayer-closedCaption-borderColor-enabled);
   background: var(--brand-videoPlayer-closedCaption-bgColor-enabled);
   position: relative;
 }
@@ -12950,10 +13487,6 @@ html {
   border-radius: var(--brand-VideoPlayer-range-borderRadius);
 }
 
-.Primer_Brand__VideoPlayer-module__VideoPlayer__container--small___TxAd8 .Primer_Brand__VideoPlayer-module__VideoPlayer__volumeBar___HOmXb {
-  display: none;
-}
-
 .Primer_Brand__VideoPlayer-module__VideoPlayer__range___Tmjbg:hover .Primer_Brand__VideoPlayer-module__VideoPlayer__tooltip___mtg_l {
   opacity: 1;
 }
@@ -12977,14 +13510,14 @@ html {
 .Primer_Brand__VideoPlayer-module__VideoPlayer__rangeInput____wivl.Primer_Brand__VideoPlayer-module__focus-visible___AKGlH {
   border-color: var(--brand-color-focus);
   outline: none;
-  box-shadow: 0 0 0 2px var(--brand-color-focus);
+  box-shadow: 0 0 0 0.125rem var(--brand-color-focus);
   opacity: 1;
 }
 
 .Primer_Brand__VideoPlayer-module__VideoPlayer__rangeInput____wivl:focus-visible {
   border-color: var(--brand-color-focus);
   outline: none;
-  box-shadow: 0 0 0 2px var(--brand-color-focus);
+  box-shadow: 0 0 0 0.125rem var(--brand-color-focus);
   opacity: 1;
 }
 
@@ -13039,24 +13572,24 @@ html {
 
 .Primer_Brand__VideoPlayer-module__VideoPlayer__tooltip___mtg_l {
   position: absolute;
+  left: 50%;
   bottom: 100%;
   z-index: 2;
-  width: 10px;
-  height: 10px;
+  width: var(--base-size-8);
+  height: var(--base-size-8);
   margin-bottom: var(--base-size-16);
   pointer-events: none;
   opacity: 0;
-  transform: translate3d(0%, 50%, 0);
-  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),
-    transform var(--brand-animation-duration-default) var(--brand-animation-easing-default);
+  transform: translate(-50%, 50%);
+  transition: transform var(--brand-animation-duration-default) var(--brand-animation-easing-default);
 }
 
 .Primer_Brand__VideoPlayer-module__VideoPlayer__tooltip___mtg_l::before {
   position: absolute;
-  bottom: -4px;
+  bottom: calc(var(--base-size-4) * -1);
   left: 0;
-  width: 10px;
-  height: 10px;
+  width: var(--base-size-12);
+  height: var(--base-size-12);
   content: '';
   background: var(--base-color-scale-white-0);
   border-radius: var(--brand-borderRadius-small);
@@ -13069,7 +13602,7 @@ html {
   left: 50%;
   z-index: -1;
   background: white;
-  box-shadow: 0 4px 4px rgba(27,31,36,0.2);
+  box-shadow: 0 var(--base-size-4) var(--base-size-4) rgba(27,31,36,0.2);
   transform: translate3d(-50%, 0, 0);
   padding: var(--brand-VideoPlayer-tooltip-padding);
   border-radius: var(--brand-borderRadius-medium);
@@ -13083,38 +13616,17 @@ html {
   color: var(--base-color-scale-white-0);
 }
 
-.Primer_Brand__VideoPlayer-module__VideoPlayer__shiftTooltipRight___iLKlO .Primer_Brand__VideoPlayer-module__VideoPlayer__tooltip___mtg_l {
-  transform: translateX(10px);
-}
-
-/* ---------------------------------------------------------- */
-/* 8. Captions                                                */
-/* ---------------------------------------------------------- */
-
-.Primer_Brand__VideoPlayer-module__VideoPlayer__captions___dI9Jv {
-  width: 90%;
-  margin: var(--brand-VideoPlayer-closedCaption-margin);
-  display: grid;
-  justify-content: center;
-  pointer-events: none;
-}
-
-.Primer_Brand__VideoPlayer-module__VideoPlayer__captions__empty___q_s3l {
-  display: none;
+.Primer_Brand__VideoPlayer-module__VideoPlayer__seekTime___HLf0h {
+  white-space: nowrap;
 }
 
-.Primer_Brand__VideoPlayer-module__VideoPlayer__captionText___e2su6 {
-  color: var(--base-color-scale-white-0);
-  text-align: center;
-  background: rgba(27,31,36,0.2);
-  padding: var(--brand-VideoPlayer-closedCaption-text-padding);
-  border-radius: var(--brand-borderRadius-medium);
-  display: inline-block;
+.Primer_Brand__VolumeControl-module__VolumeControl___rq9Ra {
+  max-width: 100px;
 }
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root {
@@ -13123,16 +13635,17 @@ html {
   --brand-VideoPlayer-range-minWidth: 4.6875rem;
   --brand-VideoPlayer-range-borderRadius: 0.1875rem;
   --brand-VideoPlayer-range-height: 0.375rem;
-  --brand-VideoPlayer-playButton-padding: 1.5625rem;
-  --brand-VideoPlayer-playButton-width: 1.5rem;
-  --brand-VideoPlayer-playButton-height: 1.5rem;
+  --brand-VideoPlayer-playButton-width: var(--base-size-96);
+  --brand-VideoPlayer-playButton-height: var(--base-size-96);
   --brand-VideoPlayer-closedCaption-text-padding: 0.625rem;
+  --brand-VideoPlayer-closedCaption-text-bgColor: rgba(0, 0, 0, 0.75);
+  --brand-VideoPlayer-closedCaption-text-fgColor: var(--base-color-scale-white-0);
   --brand-VideoPlayer-closedCaption-margin: 0 auto 15px auto;
 }
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root,
@@ -13168,7 +13681,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root,
@@ -13188,7 +13701,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root {
@@ -13447,7 +13960,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root,
@@ -13461,7 +13974,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root {
@@ -13475,7 +13988,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root {
@@ -15654,7 +16167,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root {
@@ -15678,7 +16191,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root,
@@ -16132,7 +16645,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root {
@@ -16533,7 +17046,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root {
@@ -16542,7 +17055,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:25 GMT
  */
 
 :root,
@@ -16964,7 +17477,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root {
@@ -16973,7 +17486,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:39 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:25 GMT
  */
 
 :root,
@@ -17428,7 +17941,7 @@ pre.Primer_Brand__IDE-module__IDE__Chat-copilot-indicator___FhoZe {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:39 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:25 GMT
  */
 
 :root,
@@ -17529,7 +18042,7 @@ pre.Primer_Brand__IDE-module__IDE__Chat-copilot-indicator___FhoZe {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:39 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:25 GMT
  */
 
 :root,
@@ -17865,7 +18378,7 @@ pre.Primer_Brand__IDE-module__IDE__Chat-copilot-indicator___FhoZe {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:39 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:25 GMT
  */
 
 :root,
@@ -17879,7 +18392,7 @@ pre.Primer_Brand__IDE-module__IDE__Chat-copilot-indicator___FhoZe {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 14:23:38 GMT
+ * Generated on Thu, 18 Jul 2024 12:33:24 GMT
  */
 
 :root {