@font-face { font-family: "Eurostile Bold"; src: url("../fonts/eurostile-bold.otf") format("opentype"); font-weight: 800; font-style: normal; } /* #keycloak-bg is the id keycloak.v2/login puts on ; an id selector outranks the theme's own ".login-pf body" rule regardless of load order, so this single rule works for both login and the plain "body" welcome page. */ body, #keycloak-bg { background-image: linear-gradient(to bottom left, #64748b, #dbeafe, #374151); min-height: 100vh; } .galvanick-animated-background, #keycloak-bg.galvanick-animated-background { background-size: 150%; animation: galvanick-background-pan 20s ease infinite; } @keyframes galvanick-background-pan { 0% { background-position: 100% 0%; } 50% { background-position: 0% 100%; } 100% { background-position: 100% 0%; } } .galvanick-brand { display: flex; align-items: center; justify-content: center; gap: 0.75rem; } .galvanick-brand-logo { width: 64px; height: 64px; display: block; } .galvanick-brand-text { font-family: "Eurostile Bold", "Helvetica Neue", Arial, sans-serif; font-weight: 800; font-size: 2.60rem; line-height: 1; letter-spacing: 0.02em; color: #192b3c; transform: translateY(0.12em); } .pf-v5-c-login__main { background-color: rgba(255, 255, 255, 0.9); border-radius: 12px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); } /* Extra specificity (two classes) needed to beat keycloak.v2's own ".pf-v5-c-login__main-header" rule regardless of stylesheet load order. */ .pf-v5-c-login__container .pf-v5-c-login__main-header { border-top: none; } .pf-v5-c-button.pf-m-primary { --pf-v5-c-button--m-primary--BackgroundColor: #192b3c; --pf-v5-c-button--m-primary--hover--BackgroundColor: #29415a; }