From 6be4ba58066f5c5d0feec947e2c9ebc4e264bbdf Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Tue, 29 Nov 2022 20:46:12 +0800
Subject: [PATCH] change planet gradient

---
 apps/www/pages/launch-week/index.tsx |  5 ++
 apps/www/styles/index.css            | 82 ++++++++++++++++++++++++----
 2 files changed, 77 insertions(+), 10 deletions(-)

diff --git a/apps/www/pages/launch-week/index.tsx b/apps/www/pages/launch-week/index.tsx
index 55f3e50d739..91aac3181a0 100644
--- a/apps/www/pages/launch-week/index.tsx
+++ b/apps/www/pages/launch-week/index.tsx
@@ -101,8 +101,13 @@ export default function launchweek() {
           />
         </SectionContainer>
         <div className="gradient-container">
+          <div className="gradient-mask"></div>
+          <div className="gradient-mask--masked"></div>
+
           <div className="flair-mask-a"></div>
           <div className="flair-mask-b"></div>
+        </div>
+        <div>
           <div className="flex justify-between pt-80 mx-6 md:mx-16 lg:mx-40 overflow-hidden">
             <div className="flex-1 relative overflow-hidden radial-mask">
               <div className="orbit absolute top-[75%]">
diff --git a/apps/www/styles/index.css b/apps/www/styles/index.css
index e1443115906..4f524a04b70 100644
--- a/apps/www/styles/index.css
+++ b/apps/www/styles/index.css
@@ -433,17 +433,54 @@ launch week
 .gradient-container {
   min-height: 500px;
   position: relative;
-  background: radial-gradient(circle at 50% -100%, #2d626a 0%, #121212 70%, #121212 100%);
+  max-width: 1600px;
+  margin: 0 auto;
+  left: 0;
+  right: 0;
+  /* background: radial-gradient(
+    circle at 50% -150%,
+    #39617d 0%,
+    #00ded1 30%,
+    #121212 80%,
+    #121212 100%
+  ); */
+}
+
+.gradient-mask {
+  z-index: -10;
+  position: absolute;
+  min-height: 100%;
+  width: 75%;
+  margin: 0 auto;
+  left: 0;
+  right: 0;
+  background: radial-gradient(
+    circle at 50% -35%,
+    rgba(57, 97, 125, 0.32) 0%,
+    rgba(57, 97, 125, 0.32) 5%,
+    rgba(0, 222, 209, 0.75) 8%,
+    #121212 65%,
+    #121212 100%
+  );
+}
+
+.gradient-mask--masked {
+  z-index: -10;
+  position: absolute;
+  min-height: 100%;
+  width: 100%;
+  margin: 0 auto;
+  left: 0;
+  right: 0;
+  background: radial-gradient(circle at 50% -60%, rgba(255, 255, 255, 0) 0%, #121212 65%);
 }
 
 .flair-mask-a {
   position: absolute;
   background-color: #375965;
-  left: 0;
-  top: 1px;
-  width: 80%;
-  right: 0;
-  margin: 0 auto;
+  top: 1.5px;
+  width: 110%;
+  left: -5%;
   height: 500px;
   -webkit-clip-path: ellipse(52% 135px at 50% 3px);
   clip-path: ellipse(52% 213px at 50% -75px);
@@ -452,16 +489,41 @@ launch week
 .flair-mask-b {
   position: absolute;
   background-color: #121212;
-  left: 0;
   top: 0px;
-  width: 80%;
-  right: 0;
-  margin: 0 auto;
+  left: -10%;
+  width: 110%;
+
   height: 500px;
   -webkit-clip-path: ellipse(52% 135px at 50% 3px);
   clip-path: ellipse(52% 213px at 50% -75px);
 }
 
+@media only screen and (min-width: 600px) {
+  .flair-mask-a {
+    top: 1.5px;
+    margin: 0 auto;
+    width: 89.5%;
+    left: 0;
+    right: 0;
+  }
+  .flair-mask-b {
+    top: 0px;
+    margin: 0 auto;
+    width: 90%;
+    left: 0;
+    right: 0;
+  }
+}
+
+@media only screen and (min-width: 1024px) {
+  .flair-mask-a {
+    width: 69.5%;
+  }
+  .flair-mask-b {
+    width: 70%;
+  }
+}
+
 .orbit {
   width: 192px;
   height: 192px;