diff --git a/keycloak/themes/drill-luxe/login/login.ftl b/keycloak/themes/drill-luxe/login/login.ftl index f2e93f5..95063fa 100644 --- a/keycloak/themes/drill-luxe/login/login.ftl +++ b/keycloak/themes/drill-luxe/login/login.ftl @@ -16,39 +16,60 @@
- + + + + +
<#if message?has_content> @@ -75,7 +96,7 @@
diff --git a/keycloak/themes/drill-luxe/login/resources/css/drill-luxe.css b/keycloak/themes/drill-luxe/login/resources/css/drill-luxe.css index fb72dd6..b16b327 100644 --- a/keycloak/themes/drill-luxe/login/resources/css/drill-luxe.css +++ b/keycloak/themes/drill-luxe/login/resources/css/drill-luxe.css @@ -21,6 +21,7 @@ body.drill-login { margin: 0; min-height: 100vh; font-family: + "Segoe UI Variable Display", "Inter Variable", "Inter", -apple-system, @@ -29,15 +30,16 @@ body.drill-login { sans-serif; color: var(--drill-text-primary); background: - radial-gradient(circle at top left, rgba(201, 122, 61, 0.22), transparent 28%), - radial-gradient(circle at bottom right, rgba(139, 90, 43, 0.26), transparent 30%), - linear-gradient(135deg, #090b0f 0%, #0f1115 45%, #181b22 100%); + radial-gradient(circle at 12% 14%, rgba(201, 122, 61, 0.24), transparent 24%), + radial-gradient(circle at 82% 18%, rgba(232, 201, 160, 0.08), transparent 20%), + radial-gradient(circle at 78% 84%, rgba(139, 90, 43, 0.28), transparent 28%), + linear-gradient(135deg, #08090d 0%, #0d1016 38%, #171b24 100%); } .drill-login__shell { min-height: 100vh; display: grid; - grid-template-columns: minmax(0, 1.15fr) minmax(380px, 520px); + grid-template-columns: minmax(0, 1.2fr) minmax(390px, 520px); gap: 28px; align-items: stretch; padding: 28px; @@ -61,6 +63,7 @@ body.drill-login { display: flex; flex-direction: column; justify-content: space-between; + gap: 28px; } .drill-login__brand::before, @@ -74,6 +77,26 @@ body.drill-login { pointer-events: none; } +.drill-login__brand::after { + content: ""; + position: absolute; + inset: auto -12% -20% auto; + width: 340px; + height: 340px; + border-radius: 50%; + background: + radial-gradient(circle, rgba(201, 122, 61, 0.16) 0%, rgba(201, 122, 61, 0.04) 42%, transparent 70%); + filter: blur(14px); + pointer-events: none; +} + +.drill-login__brand-top { + display: flex; + align-items: center; + justify-content: space-between; + gap: 18px; +} + .drill-login__brand-mark { width: 72px; height: 72px; @@ -89,8 +112,24 @@ body.drill-login { letter-spacing: 0.08em; } +.drill-login__status-pill { + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 42px; + padding: 10px 16px; + border-radius: 999px; + border: 1px solid rgba(212, 165, 116, 0.22); + background: rgba(255, 255, 255, 0.04); + color: var(--drill-accent-tertiary); + font-size: 0.78rem; + letter-spacing: 0.16em; + text-transform: uppercase; + white-space: nowrap; +} + .drill-login__brand-copy { - max-width: 640px; + max-width: 680px; } .drill-login__eyebrow { @@ -111,15 +150,43 @@ body.drill-login { } .drill-login__brand h1 { - max-width: 720px; - font-size: clamp(3rem, 6vw, 5.6rem); + max-width: 760px; + font-size: clamp(3rem, 6vw, 5.8rem); } .drill-login__brand p, .drill-login__panel p, .drill-login__feature-grid p { color: var(--drill-text-secondary); - line-height: 1.65; + line-height: 1.68; +} + +.drill-login__metrics { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 16px; +} + +.drill-login__metrics div { + padding: 18px 20px; + border-radius: 24px; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)); + border: 1px solid rgba(212, 165, 116, 0.12); +} + +.drill-login__metrics strong { + display: block; + margin-bottom: 10px; + color: var(--drill-accent-tertiary); + font-size: 1.15rem; + font-weight: 600; + letter-spacing: 0.04em; +} + +.drill-login__metrics span { + display: block; + color: var(--drill-text-secondary); + line-height: 1.55; } .drill-login__feature-grid { @@ -129,9 +196,9 @@ body.drill-login { } .drill-login__feature-grid article { - padding: 20px; + padding: 22px; border-radius: 24px; - background: rgba(255, 255, 255, 0.03); + background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(212, 165, 116, 0.12); } @@ -218,7 +285,7 @@ body.drill-login { width: 100%; border: 1px solid rgba(212, 165, 116, 0.16); border-radius: 18px; - background: rgba(255, 255, 255, 0.03); + background: rgba(255, 255, 255, 0.035); color: var(--drill-text-primary); padding: 16px 18px; font: inherit; @@ -277,6 +344,7 @@ body.drill-login { gap: 12px; color: var(--drill-text-muted); font-size: 0.82rem; + letter-spacing: 0.02em; } .drill-login__footer a { @@ -293,6 +361,7 @@ body.drill-login { min-height: 420px; } + .drill-login__metrics, .drill-login__feature-grid { grid-template-columns: 1fr; } @@ -310,8 +379,13 @@ body.drill-login { } .drill-login__field-row, + .drill-login__brand-top, .drill-login__footer { flex-direction: column; align-items: flex-start; } + + .drill-login__status-pill { + white-space: normal; + } }