diff --git a/src/assets/img/background.webp b/src/assets/img/background.webp new file mode 100644 index 0000000..7da5528 Binary files /dev/null and b/src/assets/img/background.webp differ diff --git a/src/pages/styles/Login.css b/src/pages/styles/Login.css index 2ed8960..071db3d 100644 --- a/src/pages/styles/Login.css +++ b/src/pages/styles/Login.css @@ -2,10 +2,13 @@ height: 100vh; display: flex; flex-direction: column; - align-items: center; + align-items: flex-start; justify-content: center; - padding: 20px; - background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%); + padding: 48px 20px 48px clamp(32px, 8vw, 120px); + background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.6) 36%, rgba(255, 255, 255, 0.12) 66%), url('@/assets/img/background.webp'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; overflow: hidden; } @@ -13,9 +16,9 @@ width: 100%; max-width: 480px; padding: 24px; - backdrop-filter: blur(10px); - background: rgba(255, 255, 255, 0.9); - box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); + backdrop-filter: blur(14px); + background: rgba(255, 255, 255, 0.92); + box-shadow: 0 24px 60px -20px rgba(15, 23, 42, 0.36); border-radius: 24px; animation: slideIn 0.5s ease-out; } @@ -63,6 +66,8 @@ .copyright { margin-top: 32px; + width: 100%; + max-width: 480px; text-align: center; color: #6B7280; font-size: 14px; @@ -86,4 +91,12 @@ height: 16px; vertical-align: middle; margin-right: 4px; -} \ No newline at end of file +} + +@media (max-width: 768px) { + .login-container { + align-items: center; + padding: 20px; + background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.9) 100%), url('@/assets/img/background.webp'); + } +}