Enhance 'drill-luxe' Keycloak theme with updated login interface and styles

- Redesigned login page layout to include a status pill and improved brand section.
- Updated text content for clarity and relevance, emphasizing features of Drill View.
- Enhanced CSS for better visual presentation, including new metrics section and responsive adjustments.
- Improved accessibility and user experience with refined spacing and element alignment.

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;
+  }
 }