diff --git a/src/public/upload.css b/src/public/upload.css index 81c6213..5d11262 100644 --- a/src/public/upload.css +++ b/src/public/upload.css @@ -24,10 +24,7 @@ body { min-height: 100vh; margin: 0 auto; padding: 0; - background: - 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%); + background: #ffffff; } .wedding-card { @@ -35,10 +32,7 @@ body { min-height: 100vh; margin: 0 auto; padding: 0 0 38px; - background: - 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%); + background: #ffffff; text-align: center; } @@ -52,15 +46,7 @@ body { } .poster::before { - content: ""; - 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; + content: 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%; - right: 18%; - top: 13%; - bottom: 24.8%; + left: 24.5%; + right: 24.5%; + top: 18.4%; + bottom: 27%; overflow: hidden; - background: #ffffff; - border-radius: 50% 50% 4px 4px / 14% 14% 4px 4px; + background: transparent; + border-radius: 0; } .poster__couple { position: absolute; - left: 51.5%; - top: 14%; - width: 145%; + left: 52%; + top: 9%; + 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); - border-top: 1px solid rgba(55, 55, 55, 0.12); - border-bottom: 1px solid rgba(55, 55, 55, 0.12); - backdrop-filter: blur(2px); + background: rgba(255, 255, 255, 0.9); + border: 0; + backdrop-filter: none; } 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: - 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); + box-shadow: none; color: #ffffff; font: inherit; font-size: clamp(27px, 5.2vw, 37px); @@ -223,12 +217,8 @@ h1 { .select-button { margin-bottom: 14px; - background: - radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.2), transparent 58%), - 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); + background: #ffffff; + box-shadow: none; 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); - box-shadow: 0 8px 18px rgba(55, 55, 55, 0.06); + background: #ffffff; + box-shadow: none; text-align: left; } @@ -401,18 +391,12 @@ h1 { @media (max-width: 760px) { .upload-page { - background: - 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%); + background: #ffffff; } .wedding-card { padding: 0 0 30px; - background: - 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%); + background: #ffffff; } .poster { @@ -422,26 +406,25 @@ h1 { } .poster::before { - inset: 0 8px; - filter: blur(18px); + content: none; } .poster__gate { - width: 212%; + width: 103%; opacity: 1; } .poster__portrait { - left: 18%; - right: 18%; - top: 13%; - bottom: 24.8%; + left: 24.5%; + right: 24.5%; + top: 18.4%; + bottom: 27%; } .poster__couple { - top: 14%; - left: 51.5%; - width: 145%; + top: 9%; + left: 52%; + width: 132%; } .poster__plate { diff --git a/src/public/wedding-gate-bg.png b/src/public/wedding-gate-bg.png index 3af66e6..db657da 100644 Binary files a/src/public/wedding-gate-bg.png and b/src/public/wedding-gate-bg.png differ