Improve style

packages/webapp/src/index.css

@@ -88,7 +88,9 @@ button:hover {
   width: min(100%, 1240px);
   margin: 0 auto;
   border: var(--line);
-  background: var(--paper);
+  background:
+    linear-gradient(145deg, rgb(255 255 255 / 55%), transparent 46%),
+    var(--paper);
   box-shadow: 10px 10px 0 rgb(0 0 0 / 35%);
 }
 
@@ -99,7 +101,10 @@ button:hover {
   height: 100vh;
   flex-direction: column;
   border-right: var(--line);
-  background: var(--paper);
+  background:
+    radial-gradient(circle at 0 0, rgb(69 151 155 / 28%), transparent 38%),
+    radial-gradient(circle at 100% 100%, rgb(213 156 141 / 22%), transparent 34%),
+    linear-gradient(180deg, #f3f4f0, #dbddd7);
 }
 
 .site-mark {
@@ -219,7 +224,9 @@ button:hover {
   justify-content: space-between;
   padding: 0 22px;
   border-bottom: var(--line);
-  background: rgb(233 233 228 / 94%);
+  background:
+    linear-gradient(100deg, rgb(255 255 255 / 64%), rgb(186 219 216 / 42%)),
+    rgb(233 233 228 / 94%);
   backdrop-filter: blur(8px);
   font-size: 11px;
   font-weight: 700;
@@ -254,6 +261,10 @@ button:hover {
   justify-content: center;
   padding: clamp(38px, 6vw, 70px);
   border-right: var(--line);
+  background:
+    radial-gradient(circle at 92% 8%, rgb(213 156 141 / 32%), transparent 35%),
+    radial-gradient(circle at 8% 100%, rgb(8 119 123 / 16%), transparent 38%),
+    linear-gradient(145deg, #f6f6f1, #dedfd9);
 }
 
 .hero__kicker,
@@ -479,6 +490,13 @@ button:hover {
   border-bottom: var(--line);
 }
 
+.work-section {
+  background:
+    radial-gradient(circle at 100% 0, rgb(8 119 123 / 24%), transparent 35%),
+    radial-gradient(circle at 0 100%, rgb(240 161 59 / 16%), transparent 32%),
+    linear-gradient(155deg, #f3f4ef, #dfe5df);
+}
+
 .section-heading {
   display: grid;
   grid-template-columns: 145px minmax(0, 1fr);
@@ -706,7 +724,10 @@ button:hover {
 }
 
 .upcoming-section {
-  background: var(--gray);
+  background:
+    radial-gradient(circle at 0 100%, rgb(110 86 207 / 28%), transparent 38%),
+    radial-gradient(circle at 100% 0, rgb(36 214 231 / 18%), transparent 34%),
+    linear-gradient(145deg, #d8d7d4, #bfc5c2);
 }
 
 .upcoming-section .project-card {
@@ -739,6 +760,10 @@ button:hover {
 
 .about-section__copy {
   padding: clamp(44px, 6vw, 72px);
+  background:
+    radial-gradient(circle at 100% 0, rgb(213 156 141 / 30%), transparent 38%),
+    radial-gradient(circle at 5% 100%, rgb(110 86 207 / 15%), transparent 34%),
+    linear-gradient(145deg, #f5f3ee, #dfe6e3);
 }
 
 .about-section__lead {
@@ -766,7 +791,10 @@ button:hover {
 }
 
 .repo-section {
-  background: var(--white);
+  background:
+    radial-gradient(circle at 0 100%, rgb(36 214 231 / 24%), transparent 38%),
+    radial-gradient(circle at 100% 0, rgb(110 86 207 / 17%), transparent 34%),
+    linear-gradient(145deg, #fff, #e2ece9);
 }
 
 .repo-links {
@@ -819,7 +847,10 @@ button:hover {
   justify-content: space-between;
   gap: 32px;
   padding: 38px;
-  background: var(--ink);
+  background:
+    radial-gradient(circle at 85% 20%, rgb(110 86 207 / 46%), transparent 34%),
+    radial-gradient(circle at 5% 100%, rgb(8 119 123 / 32%), transparent 30%),
+    linear-gradient(145deg, #1d1b2a, var(--ink) 62%);
   color: var(--white);
 }