/* * TEF-Health brand overrides on top of keycloak.v2 (PatternFly v5), Keycloak 26. * Goal: make the hosted login/registration pages read as first-party TEF-Health * (same gradient + white logo + brand colour) so the OIDC redirect is invisible. * * Selectors target keycloak.v2's STABLE hooks only: * #keycloak-bg -> the (KC 26 renamed this from the old * `.login-pf body`; that legacy selector silently * matched nothing, which is why earlier branding * never showed a background). * #kc-header-wrapper -> the brand slot above the card. * .pf-v5-c-login__main -> the white card. * .tef-* -> nodes injected by js/tef-login.js (header band). * Loaded after the parent styles.css (see theme.properties). */ :root { /* TEF brand (Figma canonical) */ --tef-orange: #c76a24; --tef-orange-hover: #b25e1f; --tef-orange-40: rgba(199, 106, 36, 0.40); --tef-blue: #3a83a7; --tef-bg-dark: #1c1c1c; --tef-white-60: rgba(255, 255, 255, 0.60); /* Card top accent bar — keycloak.v2 defaults this to PF blue. */ --keycloak-card-top-color: var(--tef-orange); } /* ---------------------------------------------------------------------------- * Page background: the signature TEF "glow" gradient (dark base + warm orange * and cool blue radial blobs), mirroring tef_branding's .tef-glow-bg / page * hero. Replaces KC's stock polygon artwork. * ------------------------------------------------------------------------- */ #keycloak-bg { background-color: var(--tef-bg-dark) !important; background-image: radial-gradient(ellipse 70% 55% at 82% 78%, var(--tef-orange-40) 0%, transparent 60%), radial-gradient(ellipse 65% 60% at 18% 22%, rgba(58, 131, 167, 0.35) 0%, transparent 60%), radial-gradient(ellipse 90% 90% at 50% 50%, #232323 0%, var(--tef-bg-dark) 70%) !important; background-repeat: no-repeat !important; background-attachment: fixed !important; background-size: cover !important; min-height: 100vh; } /* Clear the fixed glass header (top:30px + 50px tall) and keep the card centred in the space below it. */ .pf-v5-c-login { padding-top: 96px; padding-bottom: 40px; } /* Centred white logo above the form. The header pill carries the small logotype; this is the larger brand mark on top of the card. keycloak.v2 renders the realm display name here inside #kc-header-wrapper (id, spec 100) — beat .pf-v5-c-brand and swap the text for the white Explainer logo. */ #kc-header-wrapper { display: block !important; width: 320px; max-width: 80vw; height: 92px; margin: 0 auto 0.75rem; background-image: url('../img/tef-logo-white.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; /* hide the fallback realm display-name text */ font-size: 0 !important; color: transparent !important; line-height: 0; overflow: hidden; } /* ---------------------------------------------------------------------------- * Floating glass header pill — a faithful copy of the live site header * (tef_branding/header.scss `header.tef-header`, Figma node 1:92): white-10 * glass + 36px blur, 50px tall, 15px radius, logo left, centred nav, white-20 * pill on the right. Injected by js/tef-login.js. We use the same KH Teka stack * as the site (its @font-face is commented out there, so it resolves to the * same system sans — identical rendering, no cross-origin font to load). * ------------------------------------------------------------------------- */ .tef-topbar { position: fixed; top: 30px; left: 0; right: 0; width: calc(100% - 64px); max-width: 1448px; height: 50px; margin: 0 auto; padding: 5px 5px 5px 30px; border-radius: 15px; display: flex; align-items: center; gap: 28px; z-index: 1040; background: rgba(255, 255, 255, 0.10); /* --tef-white-10 */ backdrop-filter: blur(36px); -webkit-backdrop-filter: blur(36px); font-family: 'KH Teka TRIAL', sans-serif; } /* Logo (left) — white logotype, 15px tall like the site header. */ .tef-logo-home { flex-shrink: 0; display: inline-block; width: 116px; height: 15px; background: url('../img/tef-logotype-white.svg') no-repeat left center; background-size: contain; text-decoration: none; } /* Nav (centre) — Home, Services, About us, News, Docs, Helpdesk. */ .tef-nav { flex-grow: 1; display: flex; align-items: center; justify-content: center; gap: 6px; } .tef-nav a { color: #fff; font-size: 14px; font-weight: 400; text-decoration: none; padding: 8px 14px; white-space: nowrap; transition: color 0.3s; } .tef-nav a:hover { color: rgba(255, 255, 255, 0.7); } /* Right pill — mirrors the site's sign-in button (white-20, radius 10, 10/20). Repurposed here as the escape affordance back to the app. */ .tef-back { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.20); /* --tef-white-20 */ color: #fff; font-size: 14px; font-weight: 400; line-height: 20px; padding: 10px 20px; border-radius: 10px; text-decoration: none; transition: background 0.3s, opacity 0.15s; } .tef-back:hover { color: #fff; opacity: 0.85; } /* Narrow screens: drop the centre nav (the site does the same via a mobile menu); keep logo + back so the header stays usable. */ @media (max-width: 768px) { .tef-topbar { padding-left: 20px; } .tef-nav { display: none; } } /* Small first-party footer line under the card. */ .tef-footer { text-align: center; margin: 1.25rem auto 0; color: var(--tef-white-60); font-size: 12px; font-family: 'KH Teka TRIAL', sans-serif; } .tef-footer a { color: var(--tef-white-60); text-decoration: underline; } .tef-footer a:hover { color: #fff; } /* ---------------------------------------------------------------------------- * Card + controls polish. * ------------------------------------------------------------------------- */ .pf-v5-c-login__main { border-radius: 12px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); overflow: hidden; } /* Primary buttons (Submit / Sign in) in TEF orange. */ .pf-v5-c-button.pf-m-primary { --pf-v5-c-button--m-primary--BackgroundColor: var(--tef-orange); --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--tef-orange-hover); --pf-v5-c-button--m-primary--active--BackgroundColor: var(--tef-orange-hover); --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--tef-orange-hover); } /* Links + link-buttons in brand colour. */ a, .pf-v5-c-button.pf-m-link { color: var(--tef-orange); } a:hover, .pf-v5-c-button.pf-m-link:hover { color: var(--tef-orange-hover); } /* Checked checkboxes pick up the brand. */ .pf-v5-c-check__input:checked { accent-color: var(--tef-orange); } /* Injected "I agree to the Privacy Policy" checkbox on the registration form. */ .tef-privacy-consent { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 16px; font-size: 14px; line-height: 1.4; } .tef-privacy-consent input[type="checkbox"] { margin-top: 2px; accent-color: var(--tef-orange); } .tef-privacy-consent a { color: var(--tef-orange); } /* "How to register" link under the "New user? Register" line. */ .tef-howto-register { display: block; margin-top: 6px; font-size: 13px; color: var(--tef-orange); } .tef-howto-register::before { content: "\25B6\FE0E"; /* ▶ play glyph */ margin-right: 6px; font-size: 11px; } .tef-howto-register:hover { color: var(--tef-orange-hover); }