/* gofl Keycloak login theme (Phase B) — CSS-only child of keycloak.v2. * Tokens mirror src/gofl-authz/internal/brand/brand.go (the source of truth); * keep the two in sync. Inter/system sans only — monospace is retired from * the gofl brand. Applies to every login-type page: login form, registration, * verify-email, errors. */ :root { --gofl-bg: #0a0a0a; --gofl-surface: #141414; --gofl-border: rgba(255, 255, 255, 0.09); --gofl-hairline: rgba(255, 255, 255, 0.06); --gofl-fg: #edeef0; --gofl-muted: #8a8f98; --gofl-btn-bg: #f2f3f4; --gofl-btn-fg: #0a0a0a; --gofl-hover: rgba(255, 255, 255, 0.04); --gofl-err-bg: rgba(239, 68, 68, 0.08); --gofl-err-border: rgba(239, 68, 68, 0.24); --gofl-err-fg: #fca5a5; --gofl-glow: rgba(255, 255, 255, 0.09); } @media (prefers-color-scheme: light) { :root { --gofl-bg: #fafafa; --gofl-surface: #ffffff; --gofl-border: rgba(0, 0, 0, 0.10); --gofl-hairline: rgba(0, 0, 0, 0.06); --gofl-fg: #0a0a0a; --gofl-muted: #6b6f76; --gofl-btn-bg: #0a0a0a; --gofl-btn-fg: #ffffff; --gofl-hover: rgba(0, 0, 0, 0.03); --gofl-err-bg: #fef2f2; --gofl-err-border: #fecaca; --gofl-err-fg: #991b1b; --gofl-glow: rgba(0, 0, 0, 0.09); } } /* keycloak.v2's own knobs: the blue card accent is a 4px border-top on * __main-header fed by --keycloak-card-top-color; the page background is an * image var. Neutralize both at the variable level. */ :root { --keycloak-card-top-color: transparent; --keycloak-bg-logo-url: none; /* the gofl mark (inline data URI) — fills keycloak.v2's kc-logo-text slot, * activated by the realm's displayNameHtml */ --keycloak-logo-url: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Crect%20width%3D%2232%22%20height%3D%2232%22%20rx%3D%227%22%20fill%3D%22%23f5f5f5%22%2F%3E%3Cg%20transform%3D%22translate%285%2C5%29%20scale%280.01325%29%22%20fill%3D%22%230a0a0a%22%3E%3Cpath%20d%3D%22M1255.81%2C1619.41c0%2C-0%20-373.403%2C216.721%20-784.324%2C-0c-218.293%2C-115.129%20-403.142%2C-326.216%20-454.579%2C-580.722c-107.757%2C-533.174%20314.159%2C-1038.69%20846.969%2C-1038.69c489.753%2C-0%20783.149%2C366.873%20829.442%2C764.609c18.789%2C161.42%20-3.124%2C327.924%20-69.13%2C477.05l0%2C-20.673c-12.744%2C-569.153%20-580.665%2C-804.267%20-907.035%2C-754.027c94.225%2C41.453%20188.286%2C108.127%20262.902%2C196l-41.219%2C-87.873c483.343%2C245.847%20487.741%2C878.294%20487.741%2C878.294c-309.18%2C-662.992%20-702.212%2C-556.223%20-702.212%2C-556.223c-270.596%2C48.486%20-325.079%2C679.87%20531.445%2C722.255Zm-156.556%2C-804.506c-11.855%2C-0%20-21.48%2C9.625%20-21.48%2C21.48c-0%2C11.855%209.625%2C21.48%2021.48%2C21.48c11.855%2C0%2021.48%2C-9.625%2021.48%2C-21.48c0%2C-11.855%20-9.625%2C-21.48%20-21.48%2C-21.48Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); --keycloak-logo-height: 44px; --keycloak-logo-width: 44px; } .pf-v5-c-login__main-header { border-top: none !important; } div.kc-logo-text { margin: 0 auto 10px; } .kc-brand-name { font-size: 14px; font-weight: 500; color: var(--gofl-fg); } /* page — #keycloak-bg is the ELEMENT (keycloak.v2 hangs its * background image on it); override the image, never display:none it. * Paint the glow ONCE on html, viewport-anchored: painting it on both html * and body banded on pages taller than the viewport (register), where the * two elements' gradients end at different heights. */ html { background: var(--gofl-bg) !important; background-image: radial-gradient(ellipse 90% 55% at 50% -10%, var(--gofl-glow), transparent 70%) !important; background-attachment: fixed !important; } body, body#keycloak-bg { background: transparent !important; background-image: none !important; } html, body { font-family: 'Inter Variable', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; } .pf-v5-c-login, .pf-v5-c-login__container { background: transparent; } /* PatternFly switches to a two-column login grid on wide viewports, squeezing * the card — force one centered column at every width. */ .pf-v5-c-login__container { grid-template-columns: minmax(0, 420px) !important; grid-template-areas: "header" "main" !important; justify-content: center !important; width: 100%; } .pf-v5-c-login * { font-family: 'Inter Variable', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; } /* header: realm display name above the card, styled like the card wordmark */ .pf-v5-c-login__header, #kc-header-wrapper { /* !important: keycloak.v2 forces this white (--Color--light-100) — which * vanishes on the light background. */ color: var(--gofl-fg) !important; font-size: 14px !important; font-weight: 500; letter-spacing: normal !important; text-align: center; padding: 0 0 12px; text-transform: none !important; } .pf-v5-c-brand { max-height: 44px; } /* the card — kill PatternFly's top accent bar, force our radius */ .pf-v5-c-login__main { background: var(--gofl-surface); color: var(--gofl-fg); border: 1px solid var(--gofl-border) !important; border-top: 1px solid var(--gofl-border) !important; border-radius: 14px !important; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.12); width: 100%; max-width: 420px; justify-self: center; } .pf-v5-c-login__main::before, .pf-v5-c-login__main::after { display: none !important; } .pf-v5-c-login__main-header, .pf-v5-c-login__main-body, .pf-v5-c-login__main-footer { background: transparent; color: var(--gofl-fg); } .pf-v5-c-login__main-header { padding: 30px 32px 0; grid-template-columns: 100% !important; display: block; } .pf-v5-c-login__main-body { padding: 18px 32px 30px; } #kc-page-title, .pf-v5-c-title { color: var(--gofl-fg); font-size: 17px !important; font-weight: 600; letter-spacing: -0.01em; text-align: center; margin: 0; } /* form — full-width aligned column, consistent 40px controls; uneven widths * and stubby fields are what make login pages read as fake. */ .pf-v5-c-form { width: 100%; gap: 16px; } .pf-v5-c-form__group { width: 100%; } .pf-v5-c-form__label { padding-bottom: 6px; } .pf-v5-c-form__label-text { color: var(--gofl-fg); font-size: 13px; font-weight: 500; } .pf-v5-c-form-control { --pf-v5-c-form-control--BackgroundColor: var(--gofl-bg); --pf-v5-c-form-control--Color: var(--gofl-fg); display: block; width: 100%; background: var(--gofl-bg); color: var(--gofl-fg); border: 1px solid var(--gofl-border); border-radius: 9px; } .pf-v5-c-form-control input { background: transparent; color: var(--gofl-fg); font-size: 13.5px; width: 100%; min-height: 40px; padding: 0 12px; box-sizing: border-box; } .pf-v5-c-input-group { width: 100%; } .pf-v5-c-input-group__item.pf-m-fill { flex: 1; } .pf-v5-c-form-control:focus-within { border-color: var(--gofl-muted); outline: none; } .pf-v5-c-form-control::after, .pf-v5-c-form-control::before { border: none !important; } .pf-v5-c-helper-text__item-text, .pf-v5-c-form__helper-text { color: var(--gofl-muted); font-size: 12px; } .pf-v5-c-check__label, .pf-v5-c-form__group-label { color: var(--gofl-fg); } /* buttons */ .pf-v5-c-button.pf-m-primary { background: var(--gofl-btn-bg); color: var(--gofl-btn-fg); border-radius: 9px; font-size: 13.5px; font-weight: 500; min-height: 40px; width: 100%; } .pf-v5-c-button.pf-m-primary:hover { background: var(--gofl-btn-bg); opacity: 0.92; } /* password reveal toggle: keycloak.v2 references a Font Awesome eye icon it * never ships, leaving a dead-looking box — hide the toggle, the input fills * the row. */ .pf-v5-c-input-group__item:not(.pf-m-fill) { display: none; } .pf-v5-c-input-group { background: transparent; width: 100%; } /* links (forgot password, register) */ a, .pf-v5-c-login__main a { color: var(--gofl-fg); text-underline-offset: 2px; } .pf-v5-c-login__main-body .pf-v5-c-helper-text a { color: var(--gofl-muted); font-size: 12px; text-decoration: none; } .pf-v5-c-login__main-body .pf-v5-c-helper-text a:hover { color: var(--gofl-fg); } a:hover { color: var(--gofl-fg); opacity: 0.85; } .pf-v5-c-login__main-footer-band-item, .pf-v5-c-login__main-footer-band { color: var(--gofl-muted); } /* errors / alerts */ .pf-v5-c-alert, .pf-v5-c-helper-text__item.pf-m-error .pf-v5-c-helper-text__item-text { color: var(--gofl-err-fg); } .pf-v5-c-alert { background: var(--gofl-err-bg); border: 1px solid var(--gofl-err-border); border-radius: 9px; } .pf-v5-c-alert__title { color: var(--gofl-err-fg); font-size: 12.5px; } /* KC's social section STAYS VISIBLE (ADR-0089 belt): not every visit comes * through the gofl card anymore — the steering forward (live KC SSO check) * and clients holding cached pre-steering discovery docs land here directly, * and hiding the IdP buttons stranded Google users on an email/password-only * page (live wall, steering E2E 2026-07-25). Seeing Google again after * "Continue with email" on the card is mild duplication, not a fork. */ .pf-v5-c-login__main-footer { padding-bottom: 0; }