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,40 +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;
+  z-index: 3;
-  width: 118%;
+  width: 100%;
   height: 100%;
   max-width: none;
   object-fit: cover;
   object-position: center top;
   transform: translateX(50%);
-  opacity: 0.66;
+  opacity: 1;
-  filter: saturate(0.78) contrast(0.82) brightness(1.1) drop-shadow(0 18px 30px rgba(88, 88, 80, 0.05));
+  filter: saturate(0.88) contrast(0.92) brightness(1.04) 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%);
+.poster__portrait {
-  -webkit-mask-composite: source-in;
+  position: absolute;
-  mask-image:
+  z-index: 2;
-    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%),
+  left: 34%;
-    linear-gradient(180deg, #000 0%, #000 84%, transparent 99%);
+  right: 34%;
-  mask-composite: intersect;
+  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%;
+  left: 51.5%;
-  bottom: 22.5%;
+  top: 13%;
-  z-index: 2;
+  width: 148%;
-  width: 62%;
   height: auto;
   max-width: none;
   transform: translateX(-50%);
@@ -105,10 +109,10 @@ body {
 
 .poster__plate {
   position: absolute;
-  z-index: 3;
+  z-index: 5;
   left: 8.5%;
   right: 8.5%;
-  bottom: 13%;
+  bottom: 10.5%;
   padding: clamp(16px, 3.5vw, 25px) 12px clamp(13px, 2.6vw, 20px);
   background: rgba(255, 255, 255, 0.78);
   border-top: 1px solid rgba(55, 55, 55, 0.12);
@@ -392,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%),
@@ -419,26 +423,28 @@ h1 {
     filter: blur(18px);
   }
 
-  .poster__bg {
+  .poster__gate {
-    width: 132%;
+    width: 212%;
-    opacity: 0.66;
+    opacity: 1;
-    -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%);
+  .poster__portrait {
-    mask-image:
+    left: 18%;
-      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%),
+    right: 18%;
-      linear-gradient(180deg, #000 0%, #000 84%, transparent 99%);
+    top: 13%;
+    bottom: 24.8%;
   }
 
   .poster__couple {
-    bottom: 22.8%;
+    top: 14%;
-    width: 62%;
+    left: 51.5%;
+    width: 145%;
   }
 
   .poster__plate {
     left: 8%;
     right: 8%;
-    bottom: 13.5%;
+    bottom: 10.5%;
   }
 
   .upload-panel {

src/public/upload.html

@@ -10,8 +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,8 +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>