/* ============================================================
GRN.CLOUD — Keycloak login theme
Visual identity + centered single-column layout override.
The stock keycloak.v2 desktop layout is a 2-column grid
(main left, header right) — overridden here to a centered
single column matching the classic Keycloak login look.
Tokens sourced from design-system/grn.cloud/MASTER.md
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&family=Karla:wght@400;500;700&display=swap');
:root {
--color-primary: #02753C;
--color-cta: #9EFF12;
--color-accent: #61CE70;
--color-heading: #1e1e1e;
--color-body: #4B5563;
--color-muted: #54595F;
--color-bg: #F8FAFE;
--color-card: #FFFFFF;
--color-border: #E2E8F0;
--color-destructive: #DC2626;
--hero-bg-start: #04150d;
--hero-bg-mid: #042a18;
--hero-bg-end: #02753C;
--font-display: 'Rubik', system-ui, sans-serif;
--font-body: 'Karla', system-ui, sans-serif;
/* Override PF5's GLOBAL palette vars so any component that falls
back to "primary" colour (links, borders, hover states) inherits
brand green instead of the PF5 stock blue. This kills the blue
border on social IDP buttons and the blue underline on focused
inputs that the per-component overrides missed. */
--pf-v5-global--primary-color--100: #02753C;
--pf-v5-global--primary-color--200: #02753C;
--pf-v5-global--primary-color--light-100: #61CE70;
--pf-v5-global--active-color--100: #02753C;
--pf-v5-global--link--Color: #02753C;
--pf-v5-global--link--Color--hover: #61CE70;
--pf-v5-global--BorderColor--100: #E2E8F0;
--pf-v5-global--BorderColor--200: #E2E8F0;
--pf-v5-global--BorderColor--300: #E2E8F0;
--radius-card: 10px;
--radius-input: 8px;
--radius-pill: 50px;
}
/* ── Page background only (no layout changes) ── */
html, body, .login-pf, .login-pf body {
background: linear-gradient(115deg, var(--hero-bg-start) 0%, var(--hero-bg-mid) 42%, var(--hero-bg-end) 130%) !important;
font-family: var(--font-body) !important;
color: var(--color-body);
-webkit-font-smoothing: antialiased;
}
/* Force light color-scheme so the native form controls (checkbox,
select arrows, password reveal eye) render in light theme even
when the user agent has prefers-color-scheme: dark. */
:root, html, body, .pf-v5-c-login, .pf-v5-c-login__main {
color-scheme: light !important;
}
/* Decorative stripe texture (non-interactive, behind everything) */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background-image: repeating-linear-gradient(
135deg,
rgba(255,255,255,0.04) 0px,
rgba(255,255,255,0.04) 2px,
transparent 2px,
transparent 13px
);
}
/* Lime glow in upper right */
body::after {
content: "";
position: fixed;
width: 720px;
height: 720px;
right: -180px;
top: -220px;
pointer-events: none;
z-index: 0;
background: radial-gradient(circle, rgba(158,255,18,0.22), transparent 65%);
filter: blur(12px);
}
/* ── Outer login: single-column centered layout ── */
.pf-v5-c-login {
background: transparent !important;
position: relative;
z-index: 1;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
min-height: 100vh !important;
padding: 32px 16px !important;
}
.pf-v5-c-login__container {
display: flex !important;
flex-direction: column !important;
grid-template-columns: 1fr !important;
grid-template-areas: "header" "main" "footer" !important;
width: 100% !important;
max-width: 540px !important;
padding: 0 !important;
margin: 0 auto !important;
}
/* ── Header: center, show only our injected GRN.CLOUD logo ── */
.pf-v5-c-login__header {
position: relative;
width: 100% !important;
text-align: center !important;
margin-bottom: 24px !important;
grid-area: header !important;
}
/* Hide the stock realm displayName ("public") rendered inside the header.
NOTE: in keycloak.v2 `#kc-header` IS `.pf-v5-c-login__header` (same
element via kcHeaderClass), so we must NOT hide it — only its
inner wrapper (`#kc-header-wrapper` / `.pf-v5-c-brand`). */
#kc-header-wrapper,
.pf-v5-c-brand,
.pf-v5-c-login__header-desc {
display: none !important;
}
/* Inject the canonical GRN.CLOUD logo (white-on-transparent variant
from www.grn.cloud, source: wp-content/uploads/2025/09/logo-white-1.png).
Responsive: width scales between 160px (mobile) and 320px (large
desktop); height auto-derives from the 600:249 aspect ratio. */
.pf-v5-c-login__header::before {
content: "";
display: block;
width: clamp(160px, 30vw, 320px);
aspect-ratio: 600 / 249;
height: auto;
margin: 0 auto;
background-image: url("data:image/png;base64,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");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
/* ── Main card placement in the grid ── */
.pf-v5-c-login__main {
grid-area: main !important;
width: 100% !important;
}
/* ── Footer (language selector) centered below the card ── */
.pf-v5-c-login__footer {
grid-area: footer !important;
width: 100% !important;
text-align: center !important;
margin-top: 16px !important;
}
/* ── Card visual + sane internal layout ── */
.pf-v5-c-login__main {
background-color: var(--color-card) !important;
color: var(--color-heading) !important;
border: 1px solid var(--color-border) !important;
border-radius: var(--radius-card) !important;
box-shadow: 0 24px 60px rgba(0,0,0,0.28), 0 4px 12px rgba(0,0,0,0.12);
}
/* The main-header in keycloak.v2 is a flex row with title + locale
switcher — at 500px the locale dropdown squeezes the title down to
a few px causing one-character-per-line wrapping. Stack vertically. */
.pf-v5-c-login__main-header {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 16px !important;
}
.pf-v5-c-login__main-header-title,
.pf-v5-c-title {
width: auto !important;
flex: 0 0 auto !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: normal !important;
}
/* ── Headings ── */
h1, h2, h3, h4,
.pf-v5-c-title,
.pf-v5-c-login__main-header-title {
font-family: var(--font-display) !important;
font-weight: 600 !important;
color: var(--color-heading) !important;
}
/* ── Labels ── */
label,
.pf-v5-c-form__label,
.pf-v5-c-form__label-text {
font-family: var(--font-body) !important;
color: var(--color-heading) !important;
}
/* ── Inputs: PF5 underline-style — override the CSS vars that drive
the ::after pseudo border so hover/focus is brand green not blue. */
.pf-v5-c-form-control {
--pf-v5-c-form-control--BorderBottomColor: var(--color-border);
--pf-v5-c-form-control--hover--BorderBottomColor: var(--color-primary);
--pf-v5-c-form-control--focus--BorderBottomColor: var(--color-primary);
--pf-v5-c-form-control--after--BorderBottomColor: var(--color-border);
--pf-v5-c-form-control--hover--after--BorderBottomColor: var(--color-primary);
--pf-v5-c-form-control--focus--after--BorderBottomColor: var(--color-primary);
background-color: var(--color-card) !important;
border-color: var(--color-border) !important;
border-radius: var(--radius-input) !important;
color: var(--color-heading) !important;
font-family: var(--font-body) !important;
}
.pf-v5-c-form-control:hover::after,
.pf-v5-c-form-control:focus-within::after,
.pf-v5-c-form-control:hover,
.pf-v5-c-form-control:focus-within {
border-bottom-color: var(--color-primary) !important;
}
input[type="text"],
input[type="password"],
input[type="email"] {
color: var(--color-heading) !important;
font-family: var(--font-body) !important;
}
input::placeholder { color: rgba(75,85,99,0.5); }
.pf-v5-c-form-control:focus-within,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus {
border-color: var(--color-primary) !important;
box-shadow: 0 0 0 3px rgba(2,117,60,0.15) !important;
outline: none !important;
}
/* ── Checkbox: native, light color-scheme, green tick ── */
input[type="checkbox"],
.pf-v5-c-check__input {
accent-color: var(--color-primary) !important;
color-scheme: light !important;
appearance: auto !important;
-webkit-appearance: auto !important;
width: 16px !important;
height: 16px !important;
background-color: #ffffff !important;
}
.pf-v5-c-check {
--pf-v5-c-check__input--BackgroundColor: #ffffff;
--pf-v5-c-check__input--BorderColor: var(--color-border);
--pf-v5-c-check__input--checked--BackgroundColor: var(--color-primary);
--pf-v5-c-check__input--checked--BorderColor: var(--color-primary);
}
/* "Remember me" label — match the "Forgot Password?" link visually
(brand green, same font-size 14px, same weight 600). */
.pf-v5-c-check__label,
#kc-form-options,
#kc-form-options label,
#kc-form-options span,
label[for="rememberMe"],
#rememberMe + label,
#rememberMe ~ label,
.checkbox label {
color: var(--color-primary) !important;
font-family: var(--font-body) !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
opacity: 1 !important;
}
/* ── Language selector — keycloak.v2 renders it as a
.pf-v5-c-form-control wrapper around #kc-current-locale-link,
which inherits the dark form-control fill in PF5's default
(dark) form-control variant. Force it white + brand border,
and kill the underline pseudo (we use a full border instead). */
#kc-locale,
#kc-locale .pf-v5-c-dropdown,
#kc-locale .pf-v5-c-form-control,
.pf-v5-c-form-control.pf-v5-c-dropdown,
.kc-dropdown,
#kc-locale-dropdown {
background: #ffffff !important;
background-color: #ffffff !important;
color: var(--color-heading) !important;
border: 1px solid var(--color-border) !important;
border-radius: var(--radius-input) !important;
font-family: var(--font-body) !important;
}
#kc-locale:hover,
#kc-locale:focus-within,
#kc-locale .pf-v5-c-dropdown:hover,
#kc-locale-dropdown:hover {
border-color: var(--color-primary) !important;
box-shadow: none !important;
}
/* Hide the ::after pseudo underline — we use a full border instead.
This kills the blue PF5 hover line on the language dropdown. */
#kc-locale::after,
#kc-locale .pf-v5-c-form-control::after,
#kc-locale .pf-v5-c-dropdown::after,
.pf-v5-c-form-control.pf-v5-c-dropdown::after {
display: none !important;
border: none !important;
}
#kc-current-locale-link,
#kc-locale button,
#kc-locale select {
background: transparent !important;
background-color: transparent !important;
color: var(--color-heading) !important;
border: none !important;
font-family: var(--font-body) !important;
}
/* Also style standalone PF5 menu/dropdown toggles defensively */
.pf-v5-c-menu-toggle,
.pf-v5-c-dropdown__toggle,
.pf-v5-c-select__toggle {
--pf-v5-c-menu-toggle--BackgroundColor: #ffffff;
--pf-v5-c-menu-toggle--Color: var(--color-heading);
--pf-v5-c-menu-toggle--BorderColor: var(--color-border);
background-color: #ffffff !important;
color: var(--color-heading) !important;
border: 1px solid var(--color-border) !important;
border-radius: var(--radius-input) !important;
}
/* ── Password reveal "eye" toggle (pf-m-control button) ──
PF5 paints a thick ::after pseudo underline that's much heavier
than the input's own underline. Hide the pseudo entirely; on
hover just turn the icon brand green. */
button.pf-v5-c-button.pf-m-control,
button#kc-password-toggle,
.pf-v5-c-input-group button,
.pf-v5-c-input-group__item button,
button[aria-label*="password" i] {
background-color: #ffffff !important;
color: var(--color-heading) !important;
border: none !important;
box-shadow: none !important;
}
button.pf-v5-c-button.pf-m-control:hover,
button#kc-password-toggle:hover,
.pf-v5-c-input-group button:hover {
color: var(--color-primary) !important;
background-color: #ffffff !important;
}
button.pf-v5-c-button.pf-m-control::after,
button.pf-v5-c-button.pf-m-control::before,
button.pf-v5-c-button.pf-m-control:hover::after,
button.pf-v5-c-button.pf-m-control:focus::after,
button#kc-password-toggle::after,
button#kc-password-toggle:hover::after,
.pf-v5-c-input-group button::after,
.pf-v5-c-input-group button:hover::after {
display: none !important;
content: none !important;
border: none !important;
}
/* ── Kill the dark line underneath the SIGN IN button.
keycloak.v2 puts an
inside #kc-social-providers, before
the social provider buttons; PF5 also adds a ::after pseudo
border below pf-m-primary buttons that mimics a depth shadow.
Both must be neutralised. */
.pf-v5-c-button.pf-m-primary::after,
#kc-login::after,
input[type="submit"]::after,
button[type="submit"]::after {
display: none !important;
border: none !important;
background: none !important;
}
#kc-form-buttons,
#kc-form-buttons::after,
.pf-v5-c-form__group--action-group,
.pf-v5-c-form__group--action-group::after {
border: none !important;
box-shadow: none !important;
background: none !important;
}
/* Hide all
separators inside the login card — they render as a
hard dark bar between SIGN IN and the social provider buttons,
and the spacing without them is fine. */
.pf-v5-c-login hr,
.pf-v5-c-login__main hr,
#kc-social-providers hr,
#kc-social-providers > hr,
.pf-v5-c-login__main-body hr,
hr {
display: none !important;
border: none !important;
background: transparent !important;
height: 0 !important;
margin: 0 !important;
}
/* Give the social providers section breathing room above (since
the
that previously created the gap is now hidden). */
#kc-social-providers {
margin-top: 24px !important;
}
/* ── Primary submit button: lime pill ── */
.pf-v5-c-button.pf-m-primary,
#kc-login,
button[type="submit"] {
background-color: var(--color-cta) !important;
color: #000 !important;
font-family: var(--font-display) !important;
font-weight: 700 !important;
letter-spacing: 0.04em;
text-transform: uppercase;
border: 3px solid transparent !important;
border-radius: var(--radius-pill) !important;
transition: all 240ms ease;
}
.pf-v5-c-button.pf-m-primary:hover,
#kc-login:hover,
button[type="submit"]:hover {
background-color: var(--color-primary) !important;
color: #fff !important;
border-color: var(--color-cta) !important;
}
/* ── Social IDP buttons ──
keycloak.v2 renders these as
containing an /![]()
/