Clean up wedding upload background

src/public/upload.css

@@ -24,10 +24,7 @@ body {
   min-height: 100vh;
   margin: 0 auto;
   padding: 0;
-  background:
+  background: #ffffff;
-    radial-gradient(ellipse at 50% 22%, rgba(214, 214, 208, 0.28), transparent 56%),
-    radial-gradient(ellipse at 50% 54%, rgba(235, 235, 230, 0.34), transparent 62%),
-    linear-gradient(180deg, #ffffff 0%, #fbfbfa 74%, #ffffff 100%);
 }
 
 .wedding-card {
@@ -35,10 +32,7 @@ body {
   min-height: 100vh;
   margin: 0 auto;
   padding: 0 0 38px;
-  background:
+  background: #ffffff;
-    radial-gradient(ellipse at 50% 30%, rgba(218, 218, 212, 0.28), transparent 58%),
-    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.7), transparent 48%),
-    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fbfbfa 82%, #ffffff 100%);
   text-align: center;
 }
 
@@ -52,15 +46,7 @@ body {
 }
 
 .poster::before {
-  content: "";
+  content: none;
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-  border-radius: 0 0 22px 22px;
-  background: rgba(232, 232, 226, 0.38);
-  filter: blur(24px);
-  transform: translateY(12px) scale(0.96);
-  pointer-events: none;
 }
 
 .poster__gate,
@@ -74,37 +60,37 @@ body {
   position: absolute;
   inset: 0 50% 0 auto;
   z-index: 3;
-  width: 212%;
+  width: 103%;
   height: 100%;
   max-width: none;
-  object-fit: cover;
+  object-fit: contain;
   object-position: center top;
   transform: translateX(50%);
   opacity: 1;
-  filter: saturate(0.88) contrast(0.92) brightness(1.04) drop-shadow(0 18px 30px rgba(88, 88, 80, 0.05));
+  filter: none;
 }
 
 .poster__portrait {
   position: absolute;
   z-index: 2;
-  left: 18%;
+  left: 24.5%;
-  right: 18%;
+  right: 24.5%;
-  top: 13%;
+  top: 18.4%;
-  bottom: 24.8%;
+  bottom: 27%;
   overflow: hidden;
-  background: #ffffff;
+  background: transparent;
-  border-radius: 50% 50% 4px 4px / 14% 14% 4px 4px;
+  border-radius: 0;
 }
 
 .poster__couple {
   position: absolute;
-  left: 51.5%;
+  left: 52%;
-  top: 14%;
+  top: 9%;
-  width: 145%;
+  width: 132%;
   height: auto;
   max-width: none;
   transform: translateX(-50%);
-  filter: drop-shadow(0 12px 18px rgba(65, 65, 58, 0.08));
+  filter: none;
 }
 
 .poster__plate {
@@ -114,10 +100,9 @@ body {
   right: 8.5%;
   bottom: 10.5%;
   padding: clamp(16px, 3.5vw, 25px) 12px clamp(13px, 2.6vw, 20px);
-  background: rgba(255, 255, 255, 0.78);
+  background: rgba(255, 255, 255, 0.9);
-  border-top: 1px solid rgba(55, 55, 55, 0.12);
+  border: 0;
-  border-bottom: 1px solid rgba(55, 55, 55, 0.12);
+  backdrop-filter: none;
-  backdrop-filter: blur(2px);
 }
 
 h1 {
@@ -157,6 +142,18 @@ h1 {
   margin: clamp(-58px, -6vw, -34px) auto 0;
 }
 
+.upload-panel::before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  left: 0;
+  right: 0;
+  top: -18px;
+  bottom: -28px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, #ffffff 34%, #ffffff 100%);
+  pointer-events: none;
+}
+
 .upload-panel__today {
   display: flex;
   align-items: center;
@@ -207,10 +204,7 @@ h1 {
     radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.13), transparent 58%),
     linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 30% 70%, rgba(255, 255, 255, 0.05)),
     linear-gradient(180deg, #1c5d57 0%, #155149 100%);
-  box-shadow:
+  box-shadow: none;
-    0 14px 24px rgba(22, 72, 67, 0.17),
-    inset 0 1px 0 rgba(255, 255, 255, 0.2),
-    inset 0 -8px 16px rgba(0, 0, 0, 0.09);
   color: #ffffff;
   font: inherit;
   font-size: clamp(27px, 5.2vw, 37px);
@@ -223,12 +217,8 @@ h1 {
 
 .select-button {
   margin-bottom: 14px;
-  background:
+  background: #ffffff;
-    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.2), transparent 58%),
+  box-shadow: none;
-    linear-gradient(180deg, #f8f8f6 0%, #eeeee9 100%);
-  box-shadow:
-    0 9px 18px rgba(85, 85, 85, 0.11),
-    inset 0 0 0 1px rgba(83, 83, 83, 0.14);
   color: #565656;
   font-size: clamp(24px, 4.6vw, 32px);
 }
@@ -247,8 +237,8 @@ h1 {
   padding: 16px 18px;
   border: 1px solid rgba(137, 166, 158, 0.35);
   border-radius: 8px;
-  background: rgba(255, 255, 255, 0.86);
+  background: #ffffff;
-  box-shadow: 0 8px 18px rgba(55, 55, 55, 0.06);
+  box-shadow: none;
   text-align: left;
 }
 
@@ -401,18 +391,12 @@ h1 {
 
 @media (max-width: 760px) {
   .upload-page {
-    background:
+    background: #ffffff;
-      radial-gradient(ellipse at 50% 18%, rgba(214, 214, 208, 0.26), transparent 58%),
-      radial-gradient(ellipse at 50% 52%, rgba(235, 235, 230, 0.32), transparent 64%),
-      linear-gradient(180deg, #ffffff 0%, #fbfbfa 78%, #ffffff 100%);
   }
 
   .wedding-card {
     padding: 0 0 30px;
-    background:
+    background: #ffffff;
-      radial-gradient(ellipse at 50% 30%, rgba(218, 218, 212, 0.24), transparent 58%),
-      radial-gradient(circle at 50% 33%, rgba(255, 255, 255, 0.66), transparent 48%),
-      linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fbfbfa 82%, #ffffff 100%);
   }
 
   .poster {
@@ -422,26 +406,25 @@ h1 {
   }
 
   .poster::before {
-    inset: 0 8px;
+    content: none;
-    filter: blur(18px);
   }
 
   .poster__gate {
-    width: 212%;
+    width: 103%;
     opacity: 1;
   }
 
   .poster__portrait {
-    left: 18%;
+    left: 24.5%;
-    right: 18%;
+    right: 24.5%;
-    top: 13%;
+    top: 18.4%;
-    bottom: 24.8%;
+    bottom: 27%;
   }
 
   .poster__couple {
-    top: 14%;
+    top: 9%;
-    left: 51.5%;
+    left: 52%;
-    width: 145%;
+    width: 132%;
   }
 
   .poster__plate {