/* What's Next — login theme.
*
* Loaded after keycloak.v2's own styles.css, so this file only overrides. It deliberately
* targets the stock theme's PatternFly v5 classes rather than restructuring the markup:
* one template is overridden (template.ftl, for the client name and the footer) and nothing
* else, which keeps every page we have not designed — OTP, WebAuthn, update-password,
* error — coherent and upgrade-safe.
*
* ── PALETTE ──────────────────────────────────────────────────────────────────────────────
* Design System 2.0 "Pine & Paper". Values come from
* skills/animated-visual-creator/references/design-system.md, which mirrors the
* whatsnext-brand-design skill — not from eyeballing a screenshot, which is how the previous
* cut of this file got close-but-wrong hexes.
*
* Three rules from that system that are easy to break here and are load-bearing:
*
* 1. The old lime #C8FF00 is RETIRED. It is not parked in a commented block, because a
* switch-back option for a banned accent is an invitation to use it.
* 2. There are TWO greens and they mean different things. Moss (--wn-accent) is the quiet
* accent: markers, rules, eyebrows. Signal moss (--wn-cta-bg) is the PRIMARY ACTION ONLY.
* Fill anything else with it and it stops meaning "act".
* 3. Sharp corners everywhere, hairlines instead of shadows, and markers are SQUARES. The one
* circle the system allows is a pulsing status dot on a live node; a login form has none.
* ─────────────────────────────────────────────────────────────────────────────────────────
*/
:root {
/* Design System 2.0 "Pine & Paper" — values taken from the design system, not eyeballed from
a screenshot. The old lime #C8FF00 is BANNED there, so it is deleted rather than parked in a
comment: a switch-back option for a retired accent is an invitation to use it. */
--wn-paper: #f3f1ea; /* Paper — warm, never pure white */
--wn-card: #ffffff; /* White — surfaces on paper */
--wn-sage: #e7eadf; /* Sage — tinted alternating surface */
--wn-ink: #121711; /* Ink — text, pine cast */
--wn-pine: #16352b; /* Pine — dark statement blocks */
/* Muted text: ink at 55-65% for secondary, 35-50% for labels. */
--wn-ink-muted: rgba(18, 23, 17, 0.6);
--wn-ink-faint: rgba(18, 23, 17, 0.42);
/* TWO greens, and the distinction is the point. Moss is the quiet accent — markers, rules,
eyebrows. Signal moss is the PRIMARY ACTION ONLY: the moment it decorates anything else it
stops meaning "act". So --wn-accent must never be used as a button fill. */
--wn-accent: #3d6a55; /* Moss */
--wn-cta-bg: #2e7d54; /* Signal moss */
--wn-cta-bg-hover: #256845;
--wn-cta-ink: #ffffff;
/* Hairlines: .12 for structure, .07 inside. Blocks are divided by these, not by shadows. */
--wn-line: rgba(18, 23, 17, 0.12);
--wn-grid: rgba(18, 23, 17, 0.07);
--wn-accent-soft: rgba(46, 125, 84, 0.24);
/* Alert hues. Deliberately NOT derived from the accent: a message that says something is wrong
must not be the colour of the button that says continue, and here the accent is green, which
would make a danger alert read as success. */
--wn-alert-info: #47566b;
--wn-alert-success: #3d6a55;
--wn-alert-warning: #8a5a13;
--wn-alert-danger: #9b2c2c;
/* Body base. The system specifies 17px; without this we inherited the parent theme's size. */
--wn-text: 17px;
--wn-radius: 0; /* Design System 2.0: sharp corners everywhere, 2px max on tiny floating cards */
--wn-font-mono: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace;
--wn-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
/* ── Page ─────────────────────────────────────────────────────────────────────────────── */
/* The stock theme paints a dark low-poly SVG here. Replaced by paper plus the mockup's
* grid, drawn in CSS rather than shipped as an image so it stays crisp at any size and
* costs no request. */
body#keycloak-bg,
.pf-v5-c-login {
background: var(--wn-paper) !important;
background-image:
linear-gradient(to right, var(--wn-grid) 1px, transparent 1px),
linear-gradient(to bottom, var(--wn-grid) 1px, transparent 1px) !important;
background-size: 96px 96px !important;
font-family: var(--wn-font);
/* Body base, per the system. Without it the parent theme's size wins and everything on the page
is a step smaller than the design. */
font-size: var(--wn-text);
color: var(--wn-ink);
}
/* ── Header: the wordmark ─────────────────────────────────────────────────────────────── */
/* The wordmark is the realm's display name, which the stock template already renders here —
* so no template override is needed for it. The ↗ mark is added below, in CSS. */
#kc-header {
padding-block: 40px 0;
}
/* The parent theme's header sits on a dark background, so its text is white. On paper that
* is an invisible wordmark — force the colour rather than relying on inheritance, which a
* more specific stock rule wins. */
#kc-header-wrapper,
#kc-header-wrapper .wn-wordmark,
#kc-header-wrapper .kc-logo-text span {
color: var(--wn-ink) !important;
}
#kc-header-wrapper {
display: flex;
justify-content: center;
/* Utility slot: mono, 600, 11px, +0.12em, uppercase. */
font-family: var(--wn-font-mono);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--wn-ink);
}
/* The ↗ mark, from the mockup. Shipped as a theme asset and referenced relatively, so it
* does not depend on Keycloak's build-hashed resource path — which is what would break if
* this were an in the realm's displayNameHtml instead. currentColor means it inherits
* the wordmark's colour and needs no second file for a dark variant. */
#kc-header-wrapper::before {
content: "";
width: 11px;
height: 11px;
margin-inline-end: 7px;
background: currentColor;
-webkit-mask: url("../img/mark.svg") no-repeat center / contain;
mask: url("../img/mark.svg") no-repeat center / contain;
}
/* With no `displayNameHtml` on the realm, the stock `loginTitleHtml` message renders
* `
Keycloak
` and the parent CSS paints the
* vendor logo onto that div. The realm sets displayNameHtml (see the keycloak-realm unit),
* so normally this never appears — but neutralise it anyway, so a realm that forgets does
* not advertise the vendor on our sign-in page.
*
* Found by reading the rendered DOM: targeting `img` did nothing, because it is not one. */
#kc-header-wrapper .kc-logo-text {
background: none !important;
width: auto !important;
height: auto !important;
text-indent: 0 !important;
}
#kc-header-wrapper .kc-logo-text span {
font: inherit;
letter-spacing: inherit;
color: inherit;
}
#kc-header-wrapper img {
display: none;
}
/* ── Card ─────────────────────────────────────────────────────────────────────────────── */
.pf-v5-c-login__main {
background: var(--wn-card);
/* PatternFly draws a blue accent bar across the top of the card via a border. */
border-top: 1px solid var(--wn-line) !important;
border: 1px solid var(--wn-line);
border-radius: var(--wn-radius);
box-shadow: none; /* the stock card floats; brand is flat with a hairline */
overflow: hidden;
}
.pf-v5-c-login__main-header,
.pf-v5-c-login__main-body,
.pf-v5-c-login__main-footer {
padding-inline: 40px;
}
.pf-v5-c-login__main-header {
/* PatternFly puts a 4px #0066cc rule across the top of the card here. Found by asking the
page which element was blue rather than guessing at the card's own border. */
border-top: none !important;
padding-block: 36px 8px;
gap: 4px;
}
.pf-v5-c-login__main-body {
padding-block: 8px 36px;
}
/* PatternFly's form grid is tighter than the mockup; give the fields room to breathe. */
.pf-v5-c-login__main-body .pf-v5-c-form {
gap: 20px;
}
/* Which service you are signing in to. Injected by our template.ftl from `client.name`,
* because one realm fronts many services and the stock theme never says which. */
.wn-client {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 14px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
font-family: var(--wn-font-mono);
color: var(--wn-ink-muted);
}
.wn-client::before {
content: "";
width: 8px;
height: 8px;
background: var(--wn-accent);
flex: none;
}
#kc-page-title {
/* Display slot: Geist 500. Geist is not bundled — shipping a webfont with the login page is a
dependency an identity provider does not need — so this falls back to the body stack, and the
weight and tracking are what carry the look. Weight 500, NOT 600: the system is explicit that
size carries impact, not weight. */
font-family: var(--wn-font);
font-weight: 500;
font-size: 30px;
letter-spacing: -0.03em;
line-height: 1.1;
text-wrap: balance;
color: var(--wn-ink);
margin: 0;
}
/* ── Fields ───────────────────────────────────────────────────────────────────────────── */
.pf-v5-c-form__label-text,
.pf-v5-c-form__label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
font-family: var(--wn-font-mono);
color: var(--wn-ink-muted);
}
.pf-v5-c-form-control {
border: 1px solid var(--wn-line);
border-radius: 0;
background: var(--wn-card);
font-family: var(--wn-font);
font-size: 15px;
font-weight: 500; /* brand: never 400 for visible text */
color: var(--wn-ink);
padding: 12px 14px;
--pf-v5-c-form-control--after--BorderBottomColor: transparent; /* kill PF's underline */
}
.pf-v5-c-form-control:focus-within,
.pf-v5-c-form-control:focus {
border-color: var(--wn-ink);
outline: none;
box-shadow: 0 0 0 3px var(--wn-accent-soft);
}
/* PatternFly draws the field underline as an ::after and swaps to its own blue on focus, so
* setting the resting token is not enough — the accent line has to go in both states. */
.pf-v5-c-form-control::after,
.pf-v5-c-form-control:focus-within::after,
.pf-v5-c-form-control:hover::after {
border-bottom: none !important;
}
.pf-v5-c-form-control::placeholder,
.pf-v5-c-form-control input::placeholder {
color: var(--wn-ink-faint);
font-weight: 500;
}
/* ── Primary action ───────────────────────────────────────────────────────────────────── */
/* Brand: a pill with a lime dot indicator. The mockup drew a square marker in the same
* spirit; the dot is what the brand system specifies. */
.pf-v5-c-button.pf-m-primary {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background: var(--wn-cta-bg);
color: var(--wn-cta-ink);
font-family: var(--wn-font);
font-size: 14px;
font-weight: 500;
letter-spacing: 0;
border: none;
border-radius: 0;
padding: 14px 20px;
}
.pf-v5-c-button.pf-m-primary::before {
content: "";
width: 8px;
height: 8px;
/* A square, like every other marker in the system. The one place a circle is allowed is a
pulsing status dot on a live node, and a login form has none. */
border-radius: 0;
/* The CTA's own ink, not Moss: Moss on Signal moss is green-on-green and all but invisible. */
background: var(--wn-cta-ink);
flex: none;
}
.pf-v5-c-button.pf-m-primary:hover {
background: #000000;
}
/* ── Secondary bits: remember-me, forgot-password, social ─────────────────────────────── */
/* Both of these are rendered by the stock templates only when the realm enables them
* (`rememberMe`, `resetPasswordAllowed`). Styled here so that turning either on later is a
* one-line realm change and not a design task. Forgot-password additionally needs SMTP,
* which the realm has none of — so today it is simply absent. */
#kc-form-options .pf-v5-c-check__label,
#kc-form-options label {
font-size: 13px;
font-weight: 500;
color: var(--wn-ink-muted);
}
#kc-form-options a,
#kc-info a,
.pf-v5-c-login__main-footer a {
color: var(--wn-ink);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
/* Identity-provider buttons — for us, "sign in with What's Next" (Google Workspace). The
* two-step flow shows these after the email step, and they are the primary path for our own
* team, so they are styled as a real option rather than an afterthought. */
#kc-social-providers .pf-v5-c-button,
.pf-v5-c-login__main-footer-band a {
border: 1px solid var(--wn-line);
border-radius: 0;
background: var(--wn-card);
color: var(--wn-ink);
font-weight: 600;
font-size: 14px;
}
/* ── Language switcher ────────────────────────────────────────────────────────────────── */
/* The stock template renders a