style: have the blobs overlapping the video to smooth the edges

safe-global · Jul 8, 2024 · 164cb1e · 164cb1e
1 parent 5b6c3f1
commit 164cb1e
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/src/components/GasStation/Hero/index.tsx b/src/components/GasStation/Hero/index.tsx
@@ -27,6 +27,7 @@ const Hero = ({ title, text, link }: BaseBlock) => {
           </Button>
         )}
       </div>
+      <div className={css.gradient} />
     </div>
   )
 }

diff --git a/src/components/GasStation/Hero/styles.module.css b/src/components/GasStation/Hero/styles.module.css
@@ -7,7 +7,7 @@
 }
 
 .sliderWrapper {
-  margin-top: -6px;
+  margin-top: -8px;
 }
 
 .textContainer {
@@ -16,6 +16,17 @@
 }
 
 @media (min-width: 900px) {
+  .gradient {
+    position: absolute;
+    width: 138px;
+    top: 0;
+    right: 0;
+    bottom: 39px;
+    background: linear-gradient(270deg, rgba(18, 19, 18, 0) 0%, var(--mui-palette-background-default) 100%);
+    transform: scaleX(-1.005); /* prevent 1px gap glitch */
+    z-index: 1;
+  }
+
   .videoWrapper {
     margin-top: calc(-1 * var(--header-height));
   }

diff --git a/src/components/GasStation/TextBlockImagePartners/styles.module.css b/src/components/GasStation/TextBlockImagePartners/styles.module.css
@@ -72,7 +72,6 @@
     position: absolute;
     left: -300px;
     top: -200px;
-    z-index: -1;
     width: 1000px;
     height: 1000px;
     background-image: radial-gradient(at top left, rgba(18, 255, 128, 0.3) 0%, rgba(246, 247, 248, 0) 50%);
@@ -83,7 +82,6 @@
     position: absolute;
     right: -50px;
     top: -250px;
-    z-index: -1;
     width: 1000px;
     height: 1000px;
     background-image: radial-gradient(at top right, rgba(41, 182, 246, 0.3) 0%, rgba(246, 247, 248, 0) 50%);
-Original file line number
+Diff line change
@@ Expand Up / @@ -27,6 +27,7 @@ const Hero = ({ title, text, link }: BaseBlock) => { @@
               </Button>
             )}
           </div>
+          <div className={css.gradient} />
         </div>
       )
     }
@@ Expand Down @@