diff --git a/src/public/upload.css b/src/public/upload.css index 406cdaa..d81e58b 100644 --- a/src/public/upload.css +++ b/src/public/upload.css @@ -14,43 +14,71 @@ body { margin: 0; min-height: 100vh; - background: #1f1f1f; + background: #ffffff; color: var(--ink); font-family: "Times New Roman", "Batang", "Apple SD Gothic Neo", serif; } .upload-page { - width: min(100%, 640px); + width: 100%; min-height: 100vh; margin: 0 auto; - padding: 0 10px 16px; - background: #1f1f1f; + padding: 0; + background: + radial-gradient(circle at 50% 18%, rgba(220, 220, 214, 0.28), transparent 42%), + linear-gradient(180deg, #ffffff 0%, #fbfbfa 74%, #ffffff 100%); } .wedding-card { - min-height: calc(100vh - 16px); - padding: clamp(10px, 2vw, 18px) clamp(18px, 5vw, 36px) 34px; + width: min(100%, 720px); + min-height: 100vh; + margin: 0 auto; + padding: 0 clamp(12px, 3.6vw, 34px) 38px; background: - radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0) 34%), - linear-gradient(180deg, #ffffff 0%, #fbfbfa 100%); + radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.7), transparent 44%), + linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fbfbfa 82%, #ffffff 100%); text-align: center; } .poster { position: relative; - width: min(100%, 560px); + width: min(100%, 620px); margin: 0 auto; + padding: 0 clamp(4px, 1.4vw, 10px); +} + +.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; } .poster__image { + position: relative; + z-index: 1; display: block; width: 100%; height: auto; - filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.08)); + filter: drop-shadow(0 18px 30px rgba(88, 88, 80, 0.08)); + -webkit-mask-image: + linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%), + linear-gradient(180deg, #000 0%, #000 88%, transparent 100%); + -webkit-mask-composite: source-in; + mask-image: + linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%), + linear-gradient(180deg, #000 0%, #000 88%, transparent 100%); + mask-composite: intersect; } .poster__plate { position: absolute; + z-index: 2; left: 10.5%; right: 10.5%; bottom: 11.8%; @@ -92,8 +120,8 @@ h1 { } .upload-panel { - width: min(100%, 420px); - margin: clamp(18px, 4vw, 28px) auto 0; + width: min(100%, 430px); + margin: clamp(10px, 2.8vw, 20px) auto 0; } .upload-panel__today { @@ -273,7 +301,7 @@ h1 { } .thank-you { - width: min(100%, 420px); + width: min(100%, 430px); margin: clamp(18px, 4vw, 28px) auto 0; padding: 26px 24px 28px; border: 1px solid rgba(137, 166, 158, 0.32); @@ -332,14 +360,35 @@ h1 { @media (max-width: 430px) { .upload-page { - padding-left: 7px; - padding-right: 7px; + background: + radial-gradient(circle at 50% 14%, rgba(218, 218, 212, 0.24), transparent 44%), + linear-gradient(180deg, #ffffff 0%, #fbfbfa 78%, #ffffff 100%); } .wedding-card { - padding-left: 14px; - padding-right: 14px; - padding-bottom: 28px; + padding: 0 0 30px; + background: + radial-gradient(circle at 50% 33%, rgba(255, 255, 255, 0.66), transparent 45%), + linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fbfbfa 82%, #ffffff 100%); + } + + .poster { + width: 100%; + padding: 0; + } + + .poster::before { + inset: 0 8px; + filter: blur(18px); + } + + .poster__image { + -webkit-mask-image: + linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%), + linear-gradient(180deg, #000 0%, #000 89%, transparent 100%); + mask-image: + linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%), + linear-gradient(180deg, #000 0%, #000 89%, transparent 100%); } .poster__plate { @@ -349,11 +398,11 @@ h1 { } .upload-panel { - width: min(100%, 300px); + width: min(calc(100% - 48px), 340px); } .thank-you { - width: min(100%, 300px); + width: min(calc(100% - 48px), 340px); } .upload-panel__today {