/*
* TravelCode brand-refresh over keycloak.v2 (EPIC 7.2).
* Minimal editorial sign-in: white surface, full-width top bar (logo + "Back to home"),
* narrow centered column, serif heading ("Welcome back."), brand-blue primary button,
* passwordless email-first flow + method-select cards.
* Design tokens mirror the react-layout design system (brand-500 #306DDE, neutral ink #0F172A).
*
* The PatternFly v5 base is loaded by the parent chain (common/keycloak) as separate s;
* the @import below pulls keycloak.v2's own thin styles.css so nothing the parent expects is
* missing — then our brand rules override it. The dark card/background layer is fully replaced.
*/
@import url("styles.css");
/* Montserrat + Newsreader are loaded via preconnected in template.ftl — a CSS
* @import here is render-blocking and only fetched after this file parses, which flashed the
* fallback fonts (FOUT) on first paint. */
:root {
--tc-blue: #306dde; /* brand-500 */
--tc-blue-hover: #2557c7; /* brand-600 */
--tc-ink: #0f172a; /* neutral-900 */
--tc-muted: #64748b; /* neutral-500/600 */
--tc-bg: #ffffff;
--tc-border: #e2e8f0; /* neutral-200 */
--tc-border-strong: #cbd5e1;
}
/* ---- Page surface ---------------------------------------------------- */
html,
body,
body#keycloak-bg,
body.login-pf,
.login-pf body,
.login-pf-page {
background: var(--tc-bg) !important;
font-family: Montserrat, Arial, sans-serif !important;
color: var(--tc-ink);
}
/* keycloak.v2 sets a dark color-scheme; force light so native controls render correctly. */
body,
.pf-v5-c-login__main,
.pf-v5-c-login__main input,
.pf-v5-c-check__input {
color-scheme: light;
}
/* Outer layout: flat white, centered narrow column (no card). */
.pf-v5-c-login {
display: block !important;
min-height: 100vh;
padding: 0 !important;
background: var(--tc-bg) !important;
}
.pf-v5-c-login__container {
display: block !important;
grid-template-columns: none !important;
max-width: 800px;
width: 100%;
margin: 0 auto !important;
padding: 56px 32px 64px !important;
}
/* ---- Top bar: logo (left) + "Back to home" (right) -------------------
In-flow at the top of the centered column (NOT full-bleed) so it lines up with the
form below instead of stretching edge-to-edge. */
#kc-header,
.pf-v5-c-login__header {
position: static;
display: flex !important;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 480px;
padding: 0 !important;
margin: 0 auto 40px auto !important;
background: transparent;
}
/* Brand image instead of the "Travel Code" text node. */
#kc-header-wrapper {
margin: 0;
padding: 0;
width: 132px;
height: 30px;
font-size: 0;
line-height: 0;
color: transparent !important;
text-shadow: none !important;
background: url("https://cdn.travel-code.com/prod/uploads/travelcode.png") left center no-repeat;
background-size: contain;
}
#kc-back-home {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.9rem;
font-weight: 500;
color: var(--tc-ink) !important;
text-decoration: none;
}
#kc-back-home::before {
content: "\2190"; /* ← */
font-size: 1rem;
line-height: 1;
}
#kc-back-home:hover {
color: var(--tc-blue) !important;
}
/* ---- Main: strip the card chrome, left-align -------------------------
The top bar spans the full 800px container; the content (eyebrow|title + form) is a
tidier centered column so inputs/buttons aren't stretched the full width. */
.pf-v5-c-login__main {
max-width: 480px;
margin: 0 auto !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
color: var(--tc-ink) !important;
text-align: left;
}
/* Header: single stacked column on every page — small eyebrow on top, full-width serif
title below. (keycloak.v2's styles.css forces a 70/30 grid + blue border-top accent; we
override both.) Stacking keeps EVERY title clean — "Welcome back", "Select login method",
"Check your email" — with no cramped right-hand column and no per-letter wrapping. */
.pf-v5-c-login__main-header,
div.pf-v5-c-login__main-header {
display: block !important;
grid-template-columns: none !important;
border-top: none !important;
padding: 0 !important;
margin: 0;
text-align: left;
}
.pf-v5-c-login__main-body {
margin-top: 28px;
padding: 0;
}
/* Eyebrow — small uppercase label above the title. */
.kc-eyebrow {
margin: 0 0 12px 0;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--tc-muted);
}
/* Serif headline — full width; wrap only between words, never mid-word. */
h1#kc-page-title,
#kc-page-title {
font-family: "Newsreader", Georgia, "Times New Roman", serif !important;
font-weight: 500 !important;
font-size: clamp(2rem, 5vw, 2.6rem) !important;
line-height: 1.1 !important;
letter-spacing: -0.01em;
color: var(--tc-ink) !important;
margin: 0;
word-break: normal;
overflow-wrap: break-word;
hyphens: none;
}
/* The magic-link "check your email" page nests the attempted email + a restart-login link
inside #kc-page-title. Drop the two-column header there (no serif title to sit beside),
and present the email as a clean "signed in as" chip rather than a giant serif heading. */
.pf-v5-c-login__main-header:has(#kc-username),
div.pf-v5-c-login__main-header:has(#kc-username) {
display: block !important;
}
#kc-page-title:has(#kc-username) {
margin-top: 14px;
}
#kc-username {
display: flex !important;
align-items: center;
gap: 10px;
width: 100%;
max-width: 100%;
margin: 0;
padding: 10px 14px;
background: #f1f5f9; /* neutral-100 */
border: 1px solid var(--tc-border);
border-radius: 10px;
}
.tc-user-icon {
flex: none;
width: 18px;
height: 18px;
color: var(--tc-muted);
}
#kc-attempted-username,
label#kc-attempted-username {
flex: 1 1 auto;
min-width: 0;
font-family: Montserrat, Arial, sans-serif !important;
font-size: 0.95rem !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
line-height: 1.2 !important;
color: var(--tc-ink) !important;
word-break: break-all;
margin: 0;
}
#reset-login {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 28px;
height: 28px;
border-radius: 6px;
color: var(--tc-muted) !important;
transition: color 0.15s ease, background 0.15s ease;
}
#reset-login svg {
width: 16px;
height: 16px;
}
#reset-login:hover {
color: var(--tc-blue) !important;
background: #e6edfb;
}
/* "New here? Create an account — takes 90 seconds" */
.kc-subtitle {
margin: 8px 0 0 0;
font-size: 0.95rem;
color: var(--tc-muted);
}
.kc-subtitle a {
color: var(--tc-blue) !important;
font-weight: 600;
text-decoration: none;
}
.kc-subtitle a:hover {
text-decoration: underline;
}
/* ---- Form fields ----------------------------------------------------- */
/* keycloak.v2's form is a CSS grid whose gutter compounds with nested groups and reserved
helper-text rows; make it a simple flex column with one consistent gap. */
.pf-v5-c-form {
display: flex !important;
flex-direction: column;
gap: 18px !important;
}
.pf-v5-c-form__group {
display: block !important;
grid-template-columns: none !important;
margin: 0 !important;
}
.pf-v5-c-form__group-label {
padding-bottom: 8px !important;
}
/* Empty error/helper containers must not reserve vertical space. */
[id^="input-error-container"]:empty,
.pf-v5-c-form__helper-text:empty {
display: none !important;
}
label,
.pf-v5-c-form__label,
.pf-v5-c-form__label-text,
.control-label {
font-weight: 600 !important;
font-size: 0.9rem !important;
color: var(--tc-ink) !important;
}
/* PatternFly v5 wraps the in a bordered span; style the span, flatten the input,
and kill the PF underline accent pseudo-element. */
.pf-v5-c-form-control {
background: #fff !important;
border: 1px solid var(--tc-border) !important;
border-radius: 8px !important;
padding: 0 !important;
}
.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after {
display: none !important;
}
.pf-v5-c-form-control > input,
.pf-v5-c-form-control input,
#kc-form-login input[type="text"],
input[type="text"],
input[type="email"],
input[type="password"] {
height: 44px;
padding: 0 14px !important;
background: transparent !important;
border: none !important;
border-radius: 8px !important;
font-size: 0.95rem;
color: var(--tc-ink) !important;
}
.pf-v5-c-form-control:focus-within,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
border-color: var(--tc-blue) !important;
box-shadow: 0 0 0 3px rgba(48, 109, 222, 0.15) !important;
outline: none !important;
}
/* Remember-me — custom brand checkbox (not the default native control). */
.pf-v5-c-check {
display: flex !important;
align-items: center;
gap: 8px;
}
.pf-v5-c-check__input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
flex: none;
width: 18px;
height: 18px;
margin: 0;
border: 1.5px solid var(--tc-border-strong) !important;
border-radius: 5px;
background: #fff;
cursor: pointer;
position: relative;
transition: background 0.15s ease, border-color 0.15s ease;
}
.pf-v5-c-check__input[type="checkbox"]:hover {
border-color: var(--tc-blue) !important;
}
.pf-v5-c-check__input[type="checkbox"]:checked {
background: var(--tc-blue);
border-color: var(--tc-blue) !important;
}
/* White checkmark drawn with a rotated border box. */
.pf-v5-c-check__input[type="checkbox"]:checked::after {
content: "";
position: absolute;
left: 5px;
top: 1px;
width: 5px;
height: 9px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.pf-v5-c-check__input[type="checkbox"]:focus-visible {
outline: 2px solid var(--tc-blue);
outline-offset: 2px;
}
.pf-v5-c-check__label {
color: var(--tc-muted) !important;
font-size: 0.85rem;
cursor: pointer;
}
/* ---- Primary action (Sign In / Continue) ----------------------------- */
#kc-login,
.pf-v5-c-button.pf-m-primary,
input[type="submit"].pf-m-primary,
.btn-primary {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
height: 48px;
white-space: nowrap !important;
background: var(--tc-blue) !important;
border: 1px solid var(--tc-blue) !important;
border-radius: 8px !important;
color: #fff !important;
font-weight: 600 !important;
font-size: 0.95rem !important;
transition: background 0.15s ease, border-color 0.15s ease;
}
#kc-login:hover,
.pf-v5-c-button.pf-m-primary:hover,
input[type="submit"].pf-m-primary:hover,
.btn-primary:hover {
background: var(--tc-blue-hover) !important;
border-color: var(--tc-blue-hover) !important;
}
/* ---- Secondary actions (Try Another Way, Resend, etc.) --------------- */
.pf-v5-c-login__main .pf-v5-c-button:not(.pf-m-primary),
.pf-v5-c-login__main input[type="submit"]:not(.pf-m-primary),
.pf-v5-c-login__main button:not(.pf-m-primary),
.pf-v5-c-button.pf-m-secondary,
#try-another-way,
#kc-form-buttons .pf-m-link,
.btn-default {
display: flex !important;
flex-direction: row !important;
align-items: center;
justify-content: center;
width: 100%;
height: 48px;
color: var(--tc-blue) !important;
background: #fff !important;
border: 1px solid var(--tc-border-strong) !important;
border-radius: 8px !important;
font-weight: 600 !important;
transition: border-color 0.15s ease, background 0.15s ease;
}
.pf-v5-c-login__main .pf-v5-c-button:not(.pf-m-primary):hover,
.pf-v5-c-button.pf-m-secondary:hover,
#try-another-way:hover {
border-color: var(--tc-blue) !important;
background: #f7f9ff !important;
}
/* "Try another way" is a plain Keycloak button like "Resend" (no pf-m-primary), so it
inherits the shared secondary outline style above — same look as Resend, on purpose.
Only strip the stray underline the carries. */
#try-another-way {
text-decoration: none !important;
}
/* Passkey shortcut on the login screen — inherits the secondary outline style, but with a
brand-blue border + icon so it reads as the recommended fast path (one tap vs the email link). */
.tc-passkey-button {
gap: 8px !important;
margin-top: 12px !important;
border-color: var(--tc-blue) !important;
color: var(--tc-blue) !important;
}
.tc-passkey-button:hover {
background: #f7f9ff !important;
border-color: var(--tc-blue) !important;
}
.tc-passkey-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
}
/* Keyboard focus — visible brand ring on every interactive element. */
#kc-login:focus-visible,
.pf-v5-c-login__main .pf-v5-c-button:focus-visible,
#try-another-way:focus-visible,
.kc-subtitle a:focus-visible,
#kc-back-home:focus-visible {
outline: 2px solid var(--tc-blue) !important;
outline-offset: 2px !important;
}
/* ---- Method select (Magic link / Passkey) ---------------------------- */
.select-auth-container,
ul.pf-v5-c-data-list {
padding: 0 !important;
border: none !important;
}
.pf-v5-c-data-list__item,
li.pf-v5-c-data-list__item {
border: 1px solid var(--tc-border) !important;
border-radius: 10px !important;
margin-bottom: 12px !important;
background: #fff !important;
overflow: hidden;
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.select-auth-box-parent {
display: flex !important;
align-items: center;
gap: 14px;
padding: 16px !important;
cursor: pointer;
}
/* Icon in a soft rounded brand-tinted square (left). */
.tc-method-icon-wrap {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 10px;
background: #eff4ff;
color: var(--tc-blue);
}
/* Title + description stacked in the middle, taking the remaining width. */
.tc-method-text {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
text-align: left;
}
.pf-v5-c-data-list__item:hover {
border-color: var(--tc-blue) !important;
background: #f7f9ff !important;
box-shadow: 0 4px 14px rgba(48, 109, 222, 0.10) !important;
}
/* Keyboard focus on the clickable method row (role=button, tabindex=0). */
.select-auth-box-parent:focus-visible {
outline: 2px solid var(--tc-blue);
outline-offset: 2px;
border-radius: 10px;
}
.select-auth-box-headline,
.pf-v5-u-font-family-heading {
display: block;
font-size: 0.95rem !important;
font-weight: 600 !important;
line-height: 1.25 !important;
color: var(--tc-ink) !important;
margin: 0 !important;
}
.select-auth-box-desc {
display: block;
color: var(--tc-muted) !important;
font-size: 0.85rem;
line-height: 1.35;
}
/* Inline lucide SVG inside the tinted icon square. */
.tc-method-icon {
width: 20px;
height: 20px;
color: var(--tc-blue);
flex: none;
}
.tc-method-chevron {
width: 18px;
height: 18px;
color: var(--tc-muted);
flex: none;
}
/* Fallback for any authenticator still rendered with a FontAwesome glyph. */
.select-auth-box-parent i,
.pf-v5-c-data-list__item i {
color: var(--tc-blue) !important;
}
/* ---- Links & alerts -------------------------------------------------- */
a,
.login-pf-page a,
.pf-v5-c-login__main a,
#kc-info a {
color: var(--tc-blue) !important;
}
.pf-v5-c-alert {
border-radius: 8px !important;
margin-bottom: 16px;
/* Force a light surface so the dark ink text below stays readable. PatternFly's
default flips the alert to a dark surface under a dark OS color-scheme, which
left dark-on-dark unreadable (e.g. the "re-authenticate to continue" notice). */
background: #eef3fc !important;
border: 1px solid rgba(48, 109, 222, 0.25) !important;
}
.pf-v5-c-alert .kc-feedback-text,
.pf-v5-c-alert .pf-v5-c-alert__title {
color: var(--tc-ink) !important;
}
.pf-v5-c-alert .pf-v5-c-alert__icon,
.pf-v5-c-alert .pf-v5-c-alert__icon svg {
color: var(--tc-blue) !important;
fill: var(--tc-blue) !important;
}
/* ---- Footer spacing for stacked forms -------------------------------- */
.pf-v5-c-login__main form + form,
#kc-form-buttons + form,
#kc-select-try-another-way-form,
.pf-v5-c-login__main-footer {
margin-top: 12px !important;
}
/* Language switcher is driven by the app via ui_locales — hide on-page. */
#kc-locale,
.pf-v5-c-login__main-header-utilities {
display: none !important;
}
/* ---- Mobile ---------------------------------------------------------- */
/* Stack the header (eyebrow above title) — two columns are too tight on phones. */
@media (max-width: 640px) {
.pf-v5-c-login__main-header,
div.pf-v5-c-login__main-header {
display: block !important;
}
.kc-eyebrow {
margin-bottom: 12px;
}
h1#kc-page-title,
#kc-page-title {
grid-column: auto;
font-size: clamp(1.8rem, 9vw, 2.2rem) !important;
}
}
@media (max-width: 480px) {
.pf-v5-c-login__container {
/* Generous bottom space so the last action ("Try another way") clears the
browser chrome / home indicator and the page scrolls comfortably. */
padding: 32px 20px 150px !important;
}
#kc-header,
.pf-v5-c-login__header {
margin-bottom: 32px !important;
}
/* Trim the big serif title a touch more on the smallest screens. */
h1#kc-page-title,
#kc-page-title {
font-size: clamp(1.7rem, 8vw, 2rem) !important;
}
}