design refacto

website/src/styles/_overlays.scss

@@ -55,24 +55,40 @@
   position: fixed;
   inset: 0;
   z-index: 40;
-  background: rgba(2, 3, 9, 0.42);
-  backdrop-filter: blur(2px);
+  background: rgba(2, 3, 9, 0.24);
+  backdrop-filter: none;
 }
 
 .drawer-panel {
   position: fixed;
   inset: 0 0 0 auto;
   z-index: 50;
+  contain: paint;
   width: min(720px, 94vw);
   min-width: 360px;
   max-width: 94vw;
   overflow: auto;
-  border-left: 1px solid var(--color-border);
-  background: rgba(7, 9, 19, 0.96);
-  box-shadow: var(--shadow-lg);
+  border-left: 0;
+  background:
+    linear-gradient(
+      180deg,
+      rgba(246, 196, 83, 0.92),
+      rgba(139, 92, 246, 0.64) 48%,
+      rgba(196, 181, 253, 0.72)
+    ) left top / 1px 100% no-repeat,
+    rgba(7, 9, 19, 0.82);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  box-shadow:
+    inset 8px 0 18px rgba(139, 92, 246, 0.08),
+    var(--shadow-lg);
   padding: var(--space-5);
 }
 
+.drawer-panel::before {
+  content: none;
+}
+
 .drawer-content {
   position: relative;
   display: flex;
@@ -82,9 +98,10 @@
 }
 
 .drawer-resize-handle {
-  position: absolute;
+  position: fixed;
   top: 50%;
-  left: -18px;
+  right: calc(var(--drawer-panel-width, min(720px, 94vw)) - 18px);
+  z-index: 62;
   width: 14px;
   height: 72px;
   border-radius: var(--radius-pill);