first revision

assets/login/resources/css/styles.css

@@ -0,0 +1,39 @@
+body {
+  background: linear-gradient(rgba(15, 23, 42, 0.45), rgba(15, 23, 42, 0.45)),
+    url("../img/background.svg") center center / cover no-repeat fixed;
+  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
+}
+
+/* Keycloak's built-in theme markup/classes vary by version, so several
+   selectors are listed as best-effort hooks for the login card - inspect
+   the rendered page and adjust whichever one actually matches. */
+.login-pf-page .card-pf,
+#kc-form-wrapper,
+.pf-c-login__main-body,
+.pf-v5-c-login__main-body {
+  background: rgba(255, 255, 255, 0.92);
+  backdrop-filter: blur(12px);
+  border-radius: 16px;
+  border: none;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
+}
+
+#kc-header-wrapper,
+.pf-c-login__header,
+.pf-v5-c-login__header {
+  color: #fff;
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+}
+
+.btn-primary,
+.pf-c-button.pf-m-primary,
+.pf-v5-c-button.pf-m-primary {
+  border-radius: 8px;
+  transition: background-color 0.2s ease;
+}
+
+input.form-control,
+.pf-c-form-control,
+.pf-v5-c-form-control {
+  border-radius: 8px;
+}