/* ========================================================================== 1. LOCAL FONTS LOADING (Loaded directly from fonts/d-din/) ========================================================================== */ /* Standard D-DIN */ @font-face { font-family: 'D-DIN'; src: url('../fonts/d-din/D-DIN.woff2') format('woff2'); font-weight: 400; font-style: normal; } @font-face { font-family: 'D-DIN'; src: url('../fonts/d-din/D-DIN-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; } @font-face { font-family: 'D-DIN'; src: url('../fonts/d-din/D-DIN-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; } /* Condensed Variant */ @font-face { font-family: 'D-DIN Condensed'; src: url('../fonts/d-din/D-DINCondensed.woff2') format('woff2'); font-weight: 400; font-style: normal; } @font-face { font-family: 'D-DIN Condensed'; src: url('../fonts/d-din/D-DINCondensed-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; } /* Expanded Variant */ @font-face { font-family: 'D-DIN Expanded'; src: url('../fonts/d-din/D-DINExp.woff2') format('woff2'); font-weight: 400; font-style: normal; } @font-face { font-family: 'D-DIN Expanded'; src: url('../fonts/d-din/D-DINExp-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; } @font-face { font-family: 'D-DIN Expanded'; src: url('../fonts/d-din/D-DINExp-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; } /* Google Fonts fallback */ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap'); /* ========================================================================== 2. BRANDING TOKENS & ROOT STYLES ========================================================================== */ :root { --xr-charcoal: #0c1520; --xr-icewhite: #f4f7fa; --xr-navy: #013f72; --xr-sky: #35a5e4; --xr-slate: #4d7a9c; --xr-copper: #b87333; --xr-iceblue: #83c3ec; --xr-ecogreen: #10b981; --xr-brass: #dd9a54; --pure-white: #ffffff; --cyber-glow: 0 0 15px rgba(53, 165, 228, 0.35); --heat-glow: 0 0 15px rgba(184, 115, 51, 0.35); } body { font-family: 'D-DIN', 'DIN', 'Roboto', 'Helvetica Neue', sans-serif !important; background-color: var(--xr-navy) !important; color: var(--xr-charcoal) !important; background-image: linear-gradient(135deg, var(--xr-charcoal) 0%, var(--xr-navy) 100%) !important; min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-start !important; align-items: center; margin: 0; padding: 2rem 1rem !important; box-sizing: border-box; cursor: none; } /* Native cursor stays on until the JS in template.ftl confirms real pointer movement (mousemove) by adding .xr-cursor-active to . This covers Meta Horizon's controller/hand-ray input, which fires mousemove/mousedown like a mouse but is misreported as "hover: none" by matchMedia, alongside real mice and trackpads on desktop. Devices that never emit mousemove (plain touch) simply keep the native cursor/no cursor, since the class is never added. */ body.xr-cursor-active, body.xr-cursor-active * { cursor: none !important; } .custom-cursor { position: fixed; top: 0; left: 0; width: 28px; height: 28px; pointer-events: none; z-index: 2147483647; background-image: url('../img/snowflake_48dp_013F72_FILL0_wght600_GRAD200_opsz48.svg'); background-size: contain; background-repeat: no-repeat; transform: translate(-50%, -50%); filter: drop-shadow(0 0 3px rgba(244, 247, 250, 0.95)) drop-shadow(0 0 8px rgba(244, 247, 250, 0.6)); opacity: 0; transition: opacity 0.15s ease, transform 0.08s ease; } .custom-cursor.is-visible { opacity: 1; } .custom-cursor.is-clicked { transform: translate(-50%, -50%) scale(0.86); } .login-pf-page .card-pf { background: rgba(255, 255, 255, 0.7) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(77, 122, 156, 0.3) !important; box-shadow: var(--cyber-glow) !important; border-radius: 0.75rem !important; padding: 2.5rem !important; max-width: 480px; width: 100%; box-sizing: border-box; } /* ========================================================================== 3. HEADERS & TYPOGRAPHY LOGIC ========================================================================== */ .login-pf-header { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100%; max-width: 480px !important; margin: 0 auto 1.5rem auto !important; } .xr-title-text { font-family: 'D-DIN Expanded', 'D-DIN', sans-serif !important; color: rgba(255, 255, 255, 0.8) !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.08em; font-size: 1.1rem !important; text-align: center; margin-top: 1rem; width: 100%; } #kc-logo-wrapper { background-image: url('../img/InnoVET_Logo_XR2ACH_RGB.svg') !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 90% contain !important; background-color: rgba(255, 255, 255, 0.95) !important; padding: 1rem 1.5rem !important; border-radius: 0.5rem !important; border: 1px solid rgba(255, 255, 255, 0.5) !important; display: block !important; width: 100% !important; height: auto !important; aspect-ratio: 2/1 !important; box-sizing: border-box !important; transition: all 0.2s ease-in-out !important; } #kc-logo-wrapper:hover { transform: translateY(-2px) !important; box-shadow: var(--cyber-glow) !important; } div[class*="card"] h1, div[class*="card"] h2, div[class*="card"] h3, div[class*="card"] h4, div[class*="card"] [class*="title"], div[class*="card"] header, .card-pf h1, h1#kc-page-title, #kc-page-title { color: var(--xr-charcoal) !important; font-family: 'D-DIN', 'DIN', sans-serif !important; font-size: 1.8rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; text-align: center !important; display: block !important; width: 100% !important; margin: 0 auto 1rem auto !important; } p, #kc-device-login-description, div[class*="card"] > p, .instruction { color: var(--xr-charcoal) !important; font-family: 'D-DIN', 'DIN', sans-serif !important; font-weight: 500 !important; font-size: 1.1rem !important; line-height: 1.5 !important; margin-bottom: 0.5rem !important; display: block !important; text-transform: none !important; text-align: center !important; width: 100% !important; } /* ========================================================================== 4. FORM INPUT CONTEXTS & LAYOUT WRAPPERS (Isolated Password Eye Engine) ========================================================================== */ .card-pf form, .card-pf .pf-c-form, #kc-form-login, #kc-device-login-form { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; gap: 0 !important; } .pf-c-form__group, .form-group, div[class*="kcFormGroupClass"] { margin-bottom: 0.5rem !important; width: 100% !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; } .pf-c-form__group-control, .form-group .control-wrapper { width: 100% !important; display: block !important; } .pf-c-form__label, .control-label, label.pf-c-form__label-text { color: var(--xr-charcoal) !important; font-family: 'D-DIN', 'DIN', sans-serif !important; font-weight: 700 !important; font-size: 1.05rem !important; text-align: left !important; display: inline-block !important; margin-bottom: 0.4rem !important; width: auto !important; text-transform: none !important; } .pf-c-form-control, input[type="text"], input[type="password"], input[type="email"] { background-color: var(--xr-icewhite) !important; border: 1px solid var(--xr-slate) !important; color: var(--xr-charcoal) !important; border-radius: 0.375rem !important; padding: 0.9rem 1rem !important; width: 100% !important; display: block !important; box-sizing: border-box !important; font-size: 1.1rem !important; margin-bottom: 0 !important; transition: all 0.2s ease-in-out !important; } .pf-c-form-control:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus { border-color: var(--xr-sky) !important; box-shadow: var(--cyber-glow) !important; outline: none !important; } input#password, input#password-confirm, input[type="password"] { padding-right: 3.5rem !important; } .xr-password-group, .xr-password-group, .xr-password-group, .xr-password-group { position: relative !important; display: block !important; width: 100% !important; } .xr-password-group div[class*="input-group__item"]:first-of-type { width: 100% !important; display: block !important; } /* Absolute Input overlay item tracking */ .xr-password-group div[class*="input-group__item"]:nth-of-type(2), .xr-password-group div[class*="input-group__item"]:has(button) { position: absolute !important; right: 0px !important; top: 0px !important; bottom: 0px !important; width: 46px !important; height: 100% !important; z-index: 30 !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; } .xr-password-group button { position: relative !important; width: 100% !important; height: 100% !important; background-image: url('../img/eye-password-show-svgrepo-com.svg') !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 20px 20px !important; background-color: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; cursor: pointer !important; pointer-events: auto !important; display: block !important; margin: 0 !important; padding: 0 !important; } .xr-password-group button[aria-label*="hide"], .xr-password-group button[aria-label*="verbergen"], .xr-password-group button.password-revealed { background-image: url('../img/eye-password-hide-svgrepo-com.svg') !important; } .xr-password-group button:hover { opacity: 0.7 !important; } .xr-password-group button * { background: transparent !important; border: none !important; color: transparent !important; fill: transparent !important; content: "" !important; } /* ========================================================================== 5. OPTIONS ROW ALIGNMENT (PatternFly Split Rerouting Engine) ========================================================================== */ /* Force the options row wrapper to serve as a clean, structured block zone */ .login-pf-settings, div[class*="kcFormSettingClass"], #kc-form-login .pf-c-form__group:has(#kc-form-options) { display: block !important; position: relative !important; width: 100% !important; clear: both !important; margin-top: 1.25rem !important; margin-bottom: 1.5rem !important; } /* Clearfix architecture keeps downstream action buttons from shifting upward */ .login-pf-settings::after, div[class*="kcFormSettingClass"]::after, #kc-form-login .pf-c-form__group:has(#kc-form-options)::after { content: "" !important; display: table !important; clear: both !important; } /* Anchor the Checkbox element block strictly to the left wall */ #kc-form-options, div[class*="kcFormOptionsClass"] { display: inline-block !important; float: left !important; width: auto !important; margin: 0 !important; padding: 0 !important; } .checkbox, #kc-form-options .checkbox { display: flex !important; align-items: center !important; gap: 0.5rem !important; margin: 0 !important; } #kc-form-options input[type="checkbox"] { width: 1.15rem !important; height: 1.15rem !important; cursor: pointer; margin: 0 !important; } #kc-form-options label { font-size: 0.95rem !important; font-weight: 500 !important; color: var(--xr-charcoal) !important; margin: 0 !important; cursor: pointer; } /* Anchor the Forgot Password component blocks strictly to the right wall */ div[class*="kcFormOptionsWrapperClass"], #kc-form-login a[href*="reset"], #kc-form-login a[href*="credentials"], .login-pf-settings div:not(#kc-form-options), .login-pf-settings span { display: inline-block !important; float: right !important; width: auto !important; margin: 0 !important; padding: 0 !important; text-align: right !important; } /* Override default blue browser links and inject the polished navy styling */ #kc-form-options a, .login-pf-settings a, #kc-form-login a[href*="reset"], #kc-form-login a[href*="credentials"], div[class*="kcFormOptionsWrapperClass"] a { font-size: 0.95rem !important; font-weight: 700 !important; color: var(--xr-navy) !important; text-decoration: none !important; } #kc-form-options a:hover, .login-pf-settings a:hover, #kc-form-login a[href*="reset"]:hover, #kc-form-login a[href*="credentials"]:hover, div[class*="kcFormOptionsWrapperClass"] a:hover { color: var(--xr-sky) !important; text-decoration: underline !important; } /* ========================================================================== 6. GLOBAL INTERACTION OVERRIDES, ALERTS, & OUTSIDE FOOTER LOGIC ========================================================================== */ #kc-oauth-decision-actions, .kc-form-group.form-actions, #kc-form-buttons, .pf-c-form__actions { display: flex !important; flex-direction: column !important; gap: 1.25rem !important; margin-top: 0.25rem !important; padding-top: 0 !important; width: 100% !important; } .pf-c-button.pf-m-primary, input[type="submit"]:not([name="cancel"]):not(#kc-cancel), button[name="accept"], button#kc-login { background-color: var(--xr-sky) !important; color: var(--pure-white) !important; border: none !important; border-radius: 0.375rem !important; font-weight: 700 !important; font-size: 1.1rem !important; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.85rem 1.5rem !important; box-shadow: var(--cyber-glow) !important; transition: all 0.2s ease-in-out !important; width: 100% !important; display: block !important; box-sizing: border-box !important; cursor: pointer !important; height: auto !important; } /* Higher-specificity override for button text size */ .card-pf .pf-c-button.pf-m-primary, .card-pf input[type="submit"].pf-c-button.pf-m-primary, input#kc-login[type="submit"], button.pf-c-button.pf-m-primary[type="submit"] { font-size: 1.15rem !important; } .pf-c-button.pf-m-primary:hover, input[type="submit"]:not([name="cancel"]):not(#kc-cancel):hover, button[name="accept"]:hover { background-color: var(--xr-ecogreen) !important; transform: translateY(-2px) !important; } /* Higher-specificity override for green hover */ .card-pf .pf-c-button.pf-m-primary:hover, .card-pf input[type="submit"].pf-c-button.pf-m-primary:hover, input#kc-login[type="submit"]:hover, button.pf-c-button.pf-m-primary[type="submit"]:hover { background-color: var(--xr-ecogreen) !important; transform: translateY(-2px) !important; } button[name="cancel"], input[name="cancel"], input[type="button"], #kc-cancel, .pf-c-button.pf-m-secondary { background-color: transparent !important; color: var(--xr-charcoal) !important; border: 2px solid var(--xr-slate) !important; border-radius: 0.375rem !important; font-weight: 700 !important; text-transform: uppercase; padding: 0.85rem 1.5rem !important; width: 100% !important; margin-top: 0 !important; box-sizing: border-box !important; display: block !important; cursor: pointer !important; box-shadow: none !important; transition: all 0.2s ease-in-out !important; } button[name="cancel"]:hover, input[name="cancel"]:hover, .pf-c-button.pf-m-secondary:hover { background-color: rgba(0, 0, 0, 0.05) !important; border-color: var(--xr-charcoal) !important; } .card-pf input[type="submit"] + input[type="submit"], .card-pf button + button, .card-pf input + button, .card-pf button + input, .pf-c-form__actions > * + * { margin-top: 1.25rem !important; } .card-pf ul, #kc-oauth-decision-actions + ul { display: inline-block !important; text-align: left !important; margin: 0.5rem auto 0.5rem auto !important; padding-left: 1.5rem !important; max-width: fit-content; } .card-pf li { font-family: 'D-DIN', sans-serif !important; color: var(--xr-charcoal) !important; font-weight: 600 !important; font-size: 1.05rem !important; margin-bottom: 0.4rem !important; } .card-pf .pf-c-form, #kc-oauth-decision-actions { text-align: center !important; } #kc-header, #kc-logo { display: none !important; } .pf-c-alert.pf-m-danger { background-color: rgba(184, 115, 51, 0.1) !important; border: 1px solid var(--xr-copper) !important; color: var(--xr-copper) !important; box-shadow: var(--heat-glow) !important; border-radius: 0.375rem !important; padding: 0.75rem; margin-bottom: 1.2rem; } .login-pf-page { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; margin: auto 0 !important; } .login-pf-page::after { content: "" !important; display: block !important; background-image: url('../img/Innovet_Logoleiste_DIN_A0.png') !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; background-color: var(--pure-white) !important; border-radius: 0.5rem !important; border: 1px solid rgba(255, 255, 255, 0.5) !important; box-shadow: var(--cyber-glow) !important; width: 100% !important; max-width: 700px !important; height: auto !important; aspect-ratio: 3.2/1 !important; box-sizing: border-box !important; margin: 1rem 0 0 0 !important; transition: all 0.2s ease-in-out !important; } .login-pf-page::after:hover { transform: translateY(-2px) !important; box-shadow: var(--cyber-glow) !important; } /* ========================================================================== 7. MOBILE RESPONSIVE OVERRIDES ========================================================================== */ @media (max-width: 767px) { body { padding: 1rem 0.5rem !important; } #kc-logo-wrapper { width: 75% !important; margin: 0 auto !important; } .login-pf-page .card-pf { padding: 1.5rem 1.25rem !important; border-radius: 0.5rem !important; width: 96% !important; max-width: 380px !important; } div[class*="card"] h1, .card-pf h1, #kc-page-title { font-size: 1.65rem !important; margin-bottom: 0.85rem !important; } p, .instruction { font-size: 0.95rem !important; line-height: 1.4 !important; margin-bottom: 1rem !important; } .pf-c-form-control, input[type="text"], input[type="password"], button#kc-login { padding: 0.85rem 1rem !important; font-size: 1.05rem !important; } .login-pf-page::after { width: 100% !important; margin: 1.25rem auto 0 auto !important; border-radius: 0.375rem !important; } .login-pf-header { max-width: 100% !important; padding: 0 !important; margin-bottom: 1rem !important; } .xr-social-list, .kc-social-providers__list { grid-template-columns: 1fr !important; /* Forces buttons to stack vertically only on mobile viewports */ } } /* ========================================================================== 8. REGISTRATION LINK ========================================================================== */ .xr-registration { text-align: left !important; margin-top: 1rem !important; width: 100% !important; font-family: 'D-DIN', sans-serif !important; font-size: 0.95rem !important; font-weight: 500 !important; color: var(--xr-charcoal) !important; } .xr-registration a { font-weight: 700 !important; color: var(--xr-navy) !important; text-decoration: none !important; transition: color 0.2s ease-in-out !important; } .xr-registration a:hover { color: var(--xr-sky) !important; text-decoration: underline !important; } /* ========================================================================== 9. BACK TO LOGIN LINK (REGISTER PAGE) ========================================================================== */ .xr-back-to-login { text-align: center !important; margin-top: 2rem !important; width: 100% !important; border: none !important; } .xr-back-to-login a { font-family: 'D-DIN', sans-serif !important; font-size: 1rem !important; font-weight: 700 !important; color: var(--xr-navy) !important; text-decoration: none !important; transition: color 0.2s ease-in-out !important; } .xr-back-to-login a:hover { color: var(--xr-sky) !important; text-decoration: underline !important; } /* ========================================================================== 10. UNIVERSAL DYNAMIC IDENTITY PROVIDER (IDP) MATRIX GRID ========================================================================== */ .xr-social-section, #kc-social-providers { width: 100% !important; margin-top: 1.5rem !important; display: block !important; clear: both !important; } /* Agnostic Layout Divider Line */ .xr-social-divider, #kc-social-providers h4 { text-align: center; position: relative; margin-bottom: 1.25rem; width: 100%; border: none !important; } .xr-social-divider::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--xr-ecogreen); /* Seamless glass background match */ z-index: 1; } .xr-social-divider span { position: relative; z-index: 2; background: #cad5e0; /* Seamless glass background match */ padding: 0 0.75rem; color: var(--xr-slate); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; font-family: 'D-DIN', sans-serif; } /* FLEXBOX MATRIX: Max 3 per row, centered, wrapping for N providers */ /* .card-pf prefix beats the specificity of .card-pf ul (0-1-1) and .card-pf li (0-1-1) from section 6 */ .card-pf .xr-social-list, .card-pf .kc-social-providers__list { list-style: none !important; padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 0.5rem !important; } .card-pf .xr-social-list li, .card-pf .kc-social-providers__list-item { margin: 0 !important; padding: 0 !important; flex: 0 1 calc(30% - 0.5rem) !important; min-width: 120px !important; max-width: 190px !important; } /* Corporate Branded Palette Buttons (Zero Third-Party Vendor Rules) */ .xr-social-btn, .kc-social-provider__link { background-color: var(--xr-copper) !important; color: var(--xr-charcoal) !important; border: none !important; border-radius: 0.375rem !important; font-family: 'D-DIN', sans-serif !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.75rem !important; font-size: 0.85rem !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 0.65rem !important; box-sizing: border-box !important; width: 100% !important; text-decoration: none !important; transition: all 0.2s ease-in-out !important; cursor: pointer; white-space: nowrap !important; } .xr-social-btn:hover, .kc-social-provider__link:hover { background-color: var(--xr-slate) !important; transform: translateY(-1px) !important; box-shadow: var(--cyber-glow) !important; } /* Dynamic Font-Icon Spacing Engine (Handles native Keycloak system icons smoothly) */ .xr-social-btn i, .kc-social-provider__link i { font-size: 1rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; color: inherit !important; }