:root { --retech-primary: #16a34a; /* overwritten dynamically by JS */ /* Light (default) */ --retech-bg-1: #f8fafc; --retech-bg-2: #eef2ff; --retech-surface: rgba(255, 255, 255, 0.92); --retech-surface-border: rgba(2, 6, 23, 0.1); --retech-text: rgba(2, 6, 23, 0.92); --retech-muted: rgba(2, 6, 23, 0.6); --retech-shadow: 0 24px 80px rgba(2, 6, 23, 0.12); } /* Dark override (PatternFly commonly sets this class on or ) */ html.pf-v5-theme-dark, body.pf-v5-theme-dark, .pf-v5-theme-dark { --retech-bg-1: #0b1220; --retech-bg-2: #111827; --retech-surface: rgba(17, 24, 39, 0.86); --retech-surface-border: rgba(255, 255, 255, 0.1); --retech-text: rgba(255, 255, 255, 0.94); --retech-muted: rgba(255, 255, 255, 0.68); --retech-shadow: 0 24px 80px rgba(0, 0, 0, 0.55); } /* Page background + typography */ body { background: radial-gradient( 900px 500px at 20% 15%, color-mix(in srgb, var(--retech-primary) 18%, transparent) 0%, transparent 60% ), radial-gradient( 900px 500px at 80% 10%, rgba(56, 189, 248, 0.1) 0%, transparent 60% ), radial-gradient( 900px 500px at 60% 90%, rgba(167, 139, 250, 0.1) 0%, transparent 60% ), linear-gradient(180deg, var(--retech-bg-1), var(--retech-bg-2)); color: var(--retech-text); } /* Constrain + elevate the login "card" area (PatternFly login layout) */ .pf-v5-c-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 16px; } .pf-v5-c-login__container { width: 100%; max-width: 460px; } .pf-v5-c-login__main-header { display: flex; align-items: center; justify-content: center; gap: 6px; /* keep title close to logo */ text-align: left; /* Lift header slightly and add more space before the username field */ margin-top: -6px; margin-bottom: 18px; } /* Logo rendered without DOM injection: use a pseudo-element */ .pf-v5-c-login__main-header::before { content: ""; display: block; width: 44px; height: 44px; background-image: var(--retech-logo-url); background-repeat: no-repeat; background-size: contain; background-position: center; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.18)); } /* Hide the large realm name header outside the card (keeps the UI clean) */ #kc-header { display: none !important; } .pf-v5-c-login__container, .pf-v5-c-login__main { border-radius: 16px; } .pf-v5-c-login__main { background: var(--retech-surface) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--retech-surface-border); box-shadow: var(--retech-shadow); } /* Header wrapper inside Keycloak login pages */ #kc-header-wrapper { display: flex; align-items: center; justify-content: center; min-height: 56px; gap: 12px; padding-top: 6px; } /* Page title */ #kc-page-title { font-size: 28px; font-weight: 650; letter-spacing: -0.02em; margin: 0; } /* Subtitle / instruction text */ .pf-v5-c-login__main-header-desc, .instruction, #kc-info-wrapper, #kc-form-options { color: var(--retech-muted) !important; } /* Inputs */ .pf-v5-c-form-control { border-radius: 12px !important; border-color: color-mix( in srgb, var(--retech-surface-border) 85%, transparent ) !important; background: color-mix( in srgb, var(--retech-surface) 65%, transparent ) !important; color: var(--retech-text) !important; } .pf-v5-c-form-control:focus { border-color: color-mix(in srgb, var(--retech-primary) 60%, white) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--retech-primary) 28%, transparent) !important; } .pf-v5-c-form__label-text, label { color: var(--retech-text) !important; } /* Make the brand primary color show up across PatternFly components Keycloak uses */ .pf-v5-c-button.pf-m-primary { background-color: var(--retech-primary) !important; border-color: var(--retech-primary) !important; border-radius: 12px !important; min-height: 44px; font-weight: 650; letter-spacing: 0.01em; } .pf-v5-c-button.pf-m-primary:hover, .pf-v5-c-button.pf-m-primary:focus { filter: brightness(0.95); } .pf-v5-c-button.pf-m-link { color: var(--retech-primary) !important; } a, a:visited { color: var(--retech-primary); } a:hover, a:focus { filter: brightness(0.9); } /* Focus ring */ :focus-visible { outline: 2px solid color-mix(in srgb, var(--retech-primary) 60%, white); outline-offset: 2px; } /* (Legacy) If an older JS version injected these, hide them */ #retech-org-logo, #retech-org-logo-wrap { display: none !important; } /* Reduce harsh separators / borders */ .pf-v5-c-divider, hr { opacity: 0.2; }