diff --git a/public/hero.png b/public/hero.png new file mode 100644 index 0000000..bbf34ee Binary files /dev/null and b/public/hero.png differ diff --git a/public/index.html b/public/index.html index 2e85aec..1d43fed 100644 --- a/public/index.html +++ b/public/index.html @@ -146,9 +146,28 @@ /* Login */ .login-overlay { position: fixed; inset: 0; background: #F5F0EB; - display: flex; align-items: center; justify-content: center; z-index: 100; + display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 100; + overflow-y: auto; padding: 20px 16px; } - .login-box { text-align: center; width: 280px; } + .login-hero { + width: 100%; max-width: 420px; margin-bottom: 24px; text-align: center; + } + .login-hero img { + width: 100%; max-width: 380px; border-radius: 14px; + box-shadow: 0 4px 20px rgba(0,0,0,0.12); + } + .login-tagline { + font-family: 'Playfair Display', serif; + font-size: calc(var(--title-size) * 0.7); + font-weight: 600; color: #3A332D; + line-height: 1.35; margin: 20px 0 6px; + font-style: italic; + } + .login-tagline-sub { + font-size: var(--font-size); color: #8B7E74; + line-height: 1.5; margin-bottom: 4px; + } + .login-box { text-align: center; width: 300px; } .login-box input, .login-box select { padding: 10px 16px; border-radius: 8px; border: 1px solid #E8E0D8; font-size: var(--button-size); font-family: 'DM Sans', sans-serif; width: 100%; @@ -173,10 +192,13 @@