/* '**********************************************************************' '* © Copyright 2026 Vega Solutions Ltd, all rights reserved. *' '* *' '* This software is the copyrighted work of Vega Solutions Ltd. Its *' '* use is governed by the terms of an end-user license agreement *' '* granted by Vega Solutions Ltd. Use of the software without *' '* a license agreement is prohibited. *' '* *' '* WITHOUT LIMITING THE FOREGOING, MODIFYING, COPYING OR *' '* REPRODUCTION OF THE SOFTWARE IS EXPRESSLY PROHIBITED. *' '**********************************************************************' '* Version Date Who Description '* XX.XX.XX 24/09/2026 JM REQ#5744 SiriusNG - DigiHub login restyle '*/ /* Linked last by Index.cshtml / Error.cshtml only when LoginStyle = DigiHub; tokens come from SiriusStyles :root. Auth-page rules sit under body:has(:is()), offline under body:has(> .offlineNavBar), the error page under body.dh-error. */ @font-face { font-family: 'InterVariable'; src: url('/fonts/InterVariable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } @font-face { font-family: 'DM Mono'; src: url('/fonts/DMMono-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; } :root { --dh-font: 'InterVariable', 'Inter', -apple-system, 'Segoe UI', sans-serif; --dh-mono: 'DM Mono', ui-monospace, 'Cascadia Mono', monospace; --dh-neutral-50: #F8F9FB; --dh-neutral-100: #F0F2F7; --dh-neutral-200: #E2E6EF; --dh-neutral-400: #A3B0C8; --dh-neutral-600: #596585; --dh-neutral-950: #0A1020; --dh-cta: #FF6600; --dh-cta-hover: #E82840; --dh-amber: #F7A600; --dh-error: #FF495D; --dh-error-surface: #FFF2F3; --dh-error-border: #FFC4CA; --dh-eyebrow: #9992F5; --dh-shadow-modal: 0 12px 36px 16px rgba(0,0,0,0.24); --dh-focus: 0 0 0 3px rgba(255,255,255,0.85); } /* ---------- Page (bleed) ---------- */ body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)), body:has(> .offlineNavBar), body.dh-error { background: var(--partner-bleed); color: #fff; font-family: var(--dh-font); } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .main-template, body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #page-container { background: transparent; min-height: 100vh; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage))::after, body:has(> .offlineNavBar)::after, body.dh-error::after { content: ''; position: fixed; right: -100px; bottom: -140px; width: 517px; height: 521px; background: var(--login-splash) no-repeat center / contain; opacity: .3; pointer-events: none; z-index: 0; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #top-section, body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #mid-section, body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #footer { position: relative; z-index: 1; background: transparent; } /* Header: logo top-left on the bleed, Log Out kept top-right */ body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .navBar, body:has(> .offlineNavBar) .offlineNavBar { background: transparent; padding: 40px 48px 0; min-height: 0; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #logoImage, body:has(> .offlineNavBar) #logoImage img { height: var(--login-logo-height, 72px); width: var(--login-logo-width, auto); } /* White logo on the bleed; :where() keeps it overridable by a tenant's HeadImageStyle (decide on dev) */ :where(body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #logoImage), :where(body:has(> .offlineNavBar) #logoImage img) { filter: brightness(0) invert(1); } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .pageBreak, body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #firstHr, body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #secondHr { display: none; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #logOut-button.nav-button { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.7); border-radius: 999px; padding: 8px 18px; font: 600 14px/20px var(--dh-font); } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #logOut-button.nav-button:hover { background: rgba(255,255,255,.12); } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #logOut-button i { margin-left: 8px; } /* Title → white display heading above the card */ body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #title-panel { border: 0; justify-content: center; padding: 24px 16px 28px; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #title-panel .theTitle { color: #fff; font: 700 36px/1.2 var(--dh-font); letter-spacing: 0; text-transform: none; } body:has(vp-loginpage) #title-panel { display: none !important; } /* ---------- Card (shared pattern: page element = card) ---------- */ body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) :is(vp-memorablewordpage, vp-memorablewordchangepage, vp-twofapage, vp-twofasmspage, vp-twofaemailpage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-termsandconditionspage) { display: flex; flex-direction: column; align-items: stretch; gap: 20px; width: 559px; max-width: calc(100% - 32px); margin: 0 auto 48px; background: var(--dh-neutral-50); color: var(--dh-neutral-950); border-radius: 16px; box-shadow: var(--dh-shadow-modal); padding: 32px 32px 40px; box-sizing: border-box; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) :is(.dialogTextContainer, .memWrdTextContainer, .newPasswordTextContainer, .resetPassTextContainer), body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) :is(.TwoFaContainer, .TwoFaEnrollContainer, .memorableWordContainer, .memorableWordChangeContainer, .iForgotContainer, .PasswordResetContainer, .NewPasswordContainer, .TandCDiv) { display: block; width: auto; max-width: none; margin: 0; padding: 0; background: transparent; border: 0; float: none; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .dialogTextContainer, body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .memWrdTextContainer, body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .newPasswordTextContainer, body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .resetPassTextContainer { color: var(--partner-action); font: 700 20px/28px var(--dh-font); } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) :is(.dialogTextContainer, .memWrdTextContainer) h2 { color: var(--partner-action); font: 700 24px/1.3 var(--dh-font); margin: 0 0 12px; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) :is(.dialogTextContainer, .memWrdTextContainer) p { color: var(--dh-neutral-600); font: 400 16px/24px var(--dh-font); margin: 0 0 10px; } /* Login: welcome display above, card, disclaimer below */ body:has(vp-loginpage) .loginPage { display: flex; flex-direction: column; align-items: center; padding: 24px 16px 48px; } body:has(vp-loginpage) .welcomeTextContainer { display: contents; } body:has(vp-loginpage) .welcomeTextContainer h2 { order: 0; color: #fff; font: 700 36px/1.2 var(--dh-font); margin: 0 0 28px; text-align: center; } body:has(vp-loginpage) .welcomeTextContainer p { order: 2; width: 559px; max-width: 100%; color: #fff; font: 400 16px/24px var(--dh-font); margin: 0 0 14px; } body:has(vp-loginpage) .welcomeTextContainer p:first-of-type { margin-top: 28px; } body:has(vp-loginpage) .loginContainer { order: 1; width: 559px; max-width: 100%; box-sizing: border-box; margin: 0; background: var(--dh-neutral-50); color: var(--dh-neutral-950); border-radius: 16px; box-shadow: var(--dh-shadow-modal); padding: 32px 32px 40px; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .dh-card-title { color: var(--partner-action); font: 700 24px/1.3 var(--dh-font); margin: 0 0 18px; } /* ---------- Fields ---------- */ body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) :is(#loginForm, #aVForm, #memWrdForm, #memWrdChangeForm, #newPasswordForm, #resetPassForm) { background: transparent; border: 0; padding: 0; margin: 0; width: auto; color: var(--dh-neutral-950); } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) :is(#loginForm, #aVForm, #memWrdForm, #memWrdChangeForm, #newPasswordForm, #resetPassForm) .row { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; margin: 0; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) :is(#loginForm, #aVForm, #memWrdForm, #memWrdChangeForm, #newPasswordForm, #resetPassForm) :is(.vFormLabel, .vFormElement) { grid-column: 1 / -1; width: auto; max-width: none; padding: 0; flex: none; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .vFormLabel { color: var(--dh-neutral-950); font: 500 14px/20px var(--dh-font); margin: 0 0 6px; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .vFormElement { margin: 0 0 20px; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .dh-required { color: var(--dh-error); } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .vFormElement input:not([type=checkbox]):not([type=hidden]) { width: 100%; height: 38px; box-sizing: border-box; padding: 8px 12px; font: 400 14px/20px var(--dh-font); color: var(--dh-neutral-950); background: #fff; border: 1px solid var(--dh-neutral-400); border-radius: 8px; outline: none; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .vFormElement input:focus-visible { border-color: var(--partner-action); box-shadow: inset 0 0 0 1px var(--partner-action), 0 0 0 3px color-mix(in srgb, var(--partner-action) 25%, transparent); } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) input.dh-error-state { border-color: var(--dh-error) !important; box-shadow: inset 0 0 0 1px var(--dh-error) !important; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .dh-validation { display: flex; gap: 6px; margin: -14px 0 16px; grid-column: 1 / -1; color: var(--dh-error); font: 400 12px/16.5px var(--dh-font); } /* 2FA code input: wider, monospaced */ body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #twoFaCode input { font-family: var(--dh-mono); letter-spacing: .2em; font-size: 18px; text-align: left; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #twoFaCode, body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) :is(#char1Input, #char2Input) { width: 100%; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) :is(#char1Input, #char2Input) input { width: 64px; text-align: center; font-family: var(--dh-mono); } /* Remember-me row: checkbox before its label, round box */ body:has(vp-loginpage) .rememberUserIDLabel { grid-column: 2; grid-row: auto; align-self: center; margin: 0 0 24px; } body:has(vp-loginpage) .rememberUserIDElement { grid-column: 1; grid-row: span 1; order: -1; margin: 0 0 24px; display: flex; align-items: center; } body:has(vp-loginpage) .rememberUserIDElement input[type=checkbox] { appearance: none; width: 20px; height: 20px; border: 1.5px solid var(--dh-neutral-400); border-radius: 50%; background: #fff; margin: 0; } body:has(vp-loginpage) .rememberUserIDElement input[type=checkbox]:checked { background: var(--partner-action); border-color: var(--partner-action); box-shadow: inset 0 0 0 4px #fff; } /* ---------- CTA + links ---------- */ body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) :is(#login-button, #Submit-button, #Update-button, .tandcContinuebtn) { display: flex; margin: 8px 0 0 auto; width: auto; min-width: 0; height: auto; background: var(--partner-action); color: #fff; border: 0; border-radius: 999px; padding: 12px 28px; font: 600 14px/20px var(--dh-font); box-shadow: none; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) :is(#login-button, #Submit-button, #Update-button, .tandcContinuebtn):hover { background: color-mix(in srgb, var(--partner-action) 82%, black); } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) :is(#login-button, #Submit-button, #Update-button, .tandcContinuebtn):focus-visible { outline: 3px solid var(--partner-action); outline-offset: 2px; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) :is(#Update-button, #Submit-button)[disabled], body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) :is(#Update-button, #Submit-button).disabled { background: #808080; cursor: not-allowed; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .noCodeReceivedContainer { display: flex; flex-direction: column; gap: 4px; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) vw-div.noCodeReceivedContainer { display: inline; color: var(--dh-neutral-600); font: 400 14px/23px var(--dh-font); } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) :is(#TwoFaSMS-resendCodeButton, #TwoFaEmail-resendCodeButton) { background: none; border: 0; padding: 0; color: var(--partner-action); text-decoration: underline; font: 500 14px/23px var(--dh-font); } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .forgotten-password a, body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .forgotten-password { color: var(--partner-action); text-decoration: underline; font: 500 14px/20px var(--dh-font); } /* Help expander (memorable word / passwords) */ body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #Help-button { background: none; border: 0; padding: 0; color: var(--partner-action); font: 600 14px/20px var(--dh-font); } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) :is(.memWrdhelpText-container, .passWrdhelpText-container, [class*="passWrdhelpText-container"]) { background: #fff; border: 1px solid var(--dh-neutral-200); border-radius: 8px; padding: 12px 16px; margin-top: 8px; color: var(--dh-neutral-950); font: 400 13px/19px var(--dh-font); } /* In-card toast → coral banner */ body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) vw-toast .toastalert { position: static; width: auto; margin: 16px 0 0; border-radius: 8px; padding: 12px 16px; background: var(--dh-error-surface); border: 1px solid var(--dh-error-border); color: var(--dh-error); font: 500 14px/20px var(--dh-font); box-shadow: none; } /* QR enrol: keep a white quiet zone */ body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .qrCodeImage img { background: #fff; padding: 12px; border-radius: 12px; width: 240px; height: auto; display: block; margin: 8px auto 0; } /* ---------- Terms and conditions ---------- */ body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) vp-termsandconditionspage .TandCTextDiv-text { max-height: 50vh; overflow: auto; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) vp-termsandconditionspage .TandCTextDiv-text :is(center, table, tbody, tr, td) { display: block; width: auto; border: 0; padding: 0; text-align: left; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) vp-termsandconditionspage .TandCTextDiv-text font { font: inherit; color: inherit; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) vp-termsandconditionspage .TandCTextDiv-text br:first-child, body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) vp-termsandconditionspage .TandCTextDiv-text > br { display: none; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .TandCCheckOuterDiv { margin-top: 24px; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .TandCCheckInnerDiv { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .TandCCheckTextDiv { font: 500 14px/20px var(--dh-font); color: var(--dh-neutral-950); } /* ---------- LogOut hero ---------- */ body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) vp-logoutpage { display: block; width: auto; max-width: 760px; padding: 60px 48px; margin: 0; box-shadow: none; background: none; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) vp-logoutpage .logOutDiv { display: block; width: auto; text-align: left; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) vp-logoutpage .dh-eyebrow { color: var(--dh-eyebrow); font: 600 15px/20px var(--dh-font); } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) vp-logoutpage .dh-hero-title { color: #fff; font: 600 48px/1.15 var(--dh-font); margin: 8px 0 20px; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) vp-logoutpage .dh-hero-text { color: #fff; font: 400 20px/28px var(--dh-font); margin: 0; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) vp-logoutpage .logOutDiv-text { display: none; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #toLoginPage { position: fixed; top: 40px; right: 48px; z-index: 2; background: var(--dh-amber); color: var(--dh-neutral-950); border: 0; border-radius: 999px; padding: 12px 28px; font: 600 14px/20px var(--dh-font); width: auto; } /* ---------- Offline hero ---------- */ body:has(> .offlineNavBar) .offlineContainer { display: block; padding: 60px 48px; max-width: 760px; } body:has(> .offlineNavBar) .offline-text { width: auto; text-align: left; } body:has(> .offlineNavBar) .offline-text h1 { color: #fff; font: 600 48px/1.15 var(--dh-font); margin: 0 0 20px; } body:has(> .offlineNavBar) .offline-text p { color: #fff; font: 400 20px/28px var(--dh-font); } /* ---------- Error page ---------- */ body.dh-error { display: flex; align-items: center; justify-content: center; min-height: 100vh; } body.dh-error .error-card { background: var(--dh-neutral-50); color: var(--dh-neutral-950); border-radius: 16px; box-shadow: var(--dh-shadow-modal); width: 559px; max-width: calc(100% - 32px); position: relative; z-index: 1; } body.dh-error .error-icon { background: var(--partner-action); } body.dh-error .btn { background: var(--partner-action); border-radius: 999px; padding: 12px 28px; font-weight: 600; } /* ---------- Footer + cookie bar (cookie bar may show on any page once DigiHub is on) ---------- */ body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #footer { background: transparent; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .footer { background: transparent; justify-content: flex-start; padding: 24px 48px; } .cookieContainer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: #fff; color: var(--dh-neutral-950); padding: 20px 40px; font: 400 16px/26px var(--dh-font); box-shadow: 0 -4px 16px rgba(0,0,0,.12); } .cookieContainer .nav-button { background: var(--dh-neutral-950); color: #fff; border: 2px solid var(--dh-neutral-950); border-radius: 999px; padding: 12px 26px; font: 500 15px/20px var(--dh-font); } /* ---------- Narrow screens ---------- */ @media (max-width: 600px) { body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .navBar, body:has(> .offlineNavBar) .offlineNavBar { padding: 24px 16px 0; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #title-panel .theTitle, body:has(vp-loginpage) .welcomeTextContainer h2 { font-size: 28px; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) :is(vp-memorablewordpage, vp-memorablewordchangepage, vp-twofapage, vp-twofasmspage, vp-twofaemailpage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-termsandconditionspage), body:has(vp-loginpage) .loginContainer { padding: 24px 20px 28px; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) vp-logoutpage, body:has(> .offlineNavBar) .offlineContainer { padding: 32px 16px; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) vp-logoutpage .dh-hero-title, body:has(> .offlineNavBar) .offline-text h1 { font-size: 32px; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #toLoginPage { position: static; display: inline-flex; margin-top: 24px; } .cookieContainer { flex-direction: column; align-items: stretch; padding: 16px; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage))::after, body:has(> .offlineNavBar)::after, body.dh-error::after { width: 260px; height: 262px; right: -60px; bottom: -80px; } }