Use wide transparent wedding gate

README.md

@@ -35,5 +35,6 @@ The server cron runs this once per minute.
 - Upload page template: `src/public/upload.html`
 - Upload page style: `src/public/upload.css`
 - Upload page images: `src/public/wedding-gate-bg.png`, `src/public/wedding-couple.png`
+- Optional thank-you illustration: `src/public/wedding-thanks-couple.png`
 
 Each request creates its own folder under the upload directory.

src/public/upload.css

@@ -44,9 +44,9 @@ body {
 
 .poster {
   position: relative;
-  width: min(100%, 620px);
+  width: min(100%, 900px);
   margin: 0 auto;
-  aspect-ratio: 4 / 5.22;
+  aspect-ratio: 3 / 2;
   overflow: hidden;
   padding: 0;
 }
@@ -63,51 +63,44 @@ body {
   pointer-events: none;
 }
 
-.poster__bg,
+.poster__gate,
 .poster__portrait,
 .poster__couple {
   position: relative;
   display: block;
 }
 
-.poster__bg {
+.poster__gate {
   position: absolute;
   inset: 0 50% 0 auto;
-  z-index: 1;
-  width: 118%;
+  z-index: 3;
+  width: 100%;
   height: 100%;
   max-width: none;
   object-fit: cover;
   object-position: center top;
   transform: translateX(50%);
-  opacity: 0.72;
-  filter: saturate(0.8) contrast(0.86) brightness(1.08) drop-shadow(0 18px 30px rgba(88, 88, 80, 0.05));
-  -webkit-mask-image:
-    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.48) 4%, #000 13%, #000 87%, rgba(0, 0, 0, 0.48) 96%, transparent 100%),
-    linear-gradient(180deg, #000 0%, #000 84%, transparent 99%);
-  -webkit-mask-composite: source-in;
-  mask-image:
-    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.48) 4%, #000 13%, #000 87%, rgba(0, 0, 0, 0.48) 96%, transparent 100%),
-    linear-gradient(180deg, #000 0%, #000 84%, transparent 99%);
-  mask-composite: intersect;
+  opacity: 1;
+  filter: saturate(0.88) contrast(0.92) brightness(1.04) drop-shadow(0 18px 30px rgba(88, 88, 80, 0.05));
 }
 
 .poster__portrait {
   position: absolute;
   z-index: 2;
-  left: 21.8%;
-  right: 21.8%;
-  top: 15.5%;
-  bottom: 26.7%;
+  left: 34%;
+  right: 34%;
+  top: 13%;
+  bottom: 16.5%;
   overflow: hidden;
+  background: #ffffff;
   border-radius: 50% 50% 4px 4px / 14% 14% 4px 4px;
 }
 
 .poster__couple {
   position: absolute;
-  left: 50%;
-  top: -7.5%;
-  width: 122%;
+  left: 51.5%;
+  top: 13%;
+  width: 148%;
   height: auto;
   max-width: none;
   transform: translateX(-50%);
@@ -116,7 +109,7 @@ body {
 
 .poster__plate {
   position: absolute;
-  z-index: 3;
+  z-index: 5;
   left: 8.5%;
   right: 8.5%;
   bottom: 10.5%;
@@ -403,7 +396,7 @@ h1 {
   }
 }
 
-@media (max-width: 430px) {
+@media (max-width: 760px) {
   .upload-page {
     background:
       radial-gradient(ellipse at 50% 18%, rgba(214, 214, 208, 0.26), transparent 58%),
@@ -430,27 +423,22 @@ h1 {
     filter: blur(18px);
   }
 
-  .poster__bg {
-    width: 132%;
-    opacity: 0.72;
-    -webkit-mask-image:
-      linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.5) 2%, #000 8%, #000 92%, rgba(0, 0, 0, 0.5) 98%, transparent 100%),
-      linear-gradient(180deg, #000 0%, #000 84%, transparent 99%);
-    mask-image:
-      linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.5) 2%, #000 8%, #000 92%, rgba(0, 0, 0, 0.5) 98%, transparent 100%),
-      linear-gradient(180deg, #000 0%, #000 84%, transparent 99%);
+  .poster__gate {
+    width: 212%;
+    opacity: 1;
   }
 
   .poster__portrait {
-    left: 21.5%;
-    right: 21.5%;
-    top: 15.8%;
-    bottom: 27%;
+    left: 18%;
+    right: 18%;
+    top: 13%;
+    bottom: 24.8%;
   }
 
   .poster__couple {
-    top: -7%;
-    width: 124%;
+    top: 14%;
+    left: 51.5%;
+    width: 145%;
   }
 
   .poster__plate {

src/public/upload.html

@@ -10,10 +10,10 @@
   <main class="upload-page">
     <section class="wedding-card" aria-labelledby="archive-title">
       <div class="poster">
-        <img class="poster__bg" src="/assets/wedding-gate-bg.png" alt="">
         <div class="poster__portrait" aria-hidden="true">
           <img class="poster__couple" src="/assets/wedding-couple.png" alt="">
         </div>
+        <img class="poster__gate" src="/assets/wedding-gate-bg.png" alt="">
 
         <div class="poster__plate">
           <h1 id="archive-title">{{title}}</h1>

src/server.js

@@ -168,10 +168,10 @@ function uploadResultPage(request, { heading, message, isError = false }) {
   <main class="upload-page">
     <section class="wedding-card" aria-labelledby="archive-title">
       <div class="poster">
-        <img class="poster__bg" src="/assets/wedding-gate-bg.png" alt="">
         <div class="poster__portrait" aria-hidden="true">
           <img class="poster__couple" src="/assets/wedding-couple.png" alt="">
         </div>
+        <img class="poster__gate" src="/assets/wedding-gate-bg.png" alt="">
         <div class="poster__plate">
           <h1 id="archive-title">${title}</h1>
           <p class="poster__date">2026.05.24 SUN</p>