/* Login.NewUx — new-UI login layout. Values from Figma (MFA Updates, node 2224-16768): desktop (1440 = 720+720) and 390px mobile. Raw px/hex kept for fidelity; prefer XUI tokens where available. Static file served from wwwroot — do not use Razor "~/" paths here, only root-relative "/...". Kept as its own file (linked only from Login.NewUx.cshtml's AddToHead) instead of folding into the shared site.css that every other view loads via _Layout.cshtml. This view is still flag/cookie-gated as a preview and its layout has already changed shape more than once, so isolation avoids a permanent CSS-payload cost on every other page and keeps this a one-file delete if the preview is scrapped. Once the design stabilises and the preview flag comes off, merging these rules into site.css would match the rest of the codebase's convention. */ /* Page shell: two 720px panels on a grey backdrop */ .xl-newux { display: flex; flex-direction: column; min-height: 100vh; background: #F2F3F4; } /* Top bar — 64px, Xero blue, logo pinned left */ .xl-newux--topbar { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; height: 64px; padding: 0 12px; background: #1F68DD; } .xl-newux--logo { box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 80px; height: 40px; padding: 0 12px; gap: 10px; border-radius: 20px; flex: none; } /* 50/50 split */ .xl-newux--split { display: flex; flex-direction: row; justify-content: center; align-items: stretch; flex: 1 1 auto; } /* Left form panel: 720px, white, 32/48 padding (per dev-handoff redline). text-align: left resets the .xl-pagewrapper { text-align: center } this view still inherits (site.css) — needed for any plain-block/inline content here (e.g. .xl-newux--signup); flex children like .xl-newux--helperlinks-row/.xl-newux--footer are unaffected by text-align either way. Default (banner hidden) keeps the original master padding: 64px panel + 32px inner. When the preview banner shows (.xl-has-preview-banner), the panel top padding is removed and the inner padding is slimmed so the banner and heading group near the top of the panel. */ .xl-newux--formpanel { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; flex: 1 1 720px; max-width: 2560px; padding: 64px 0 48px; background: #FFFFFF; text-align: left; } /* Content column: fluid, caps at 560 incl. 20px side padding. */ .xl-newux--formpanel-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; max-width: 560px; padding: 32px 20px 0; } /* Banner shown: pull the heading up close beneath the banner. */ .xl-newux--formpanel.xl-has-preview-banner { padding-top: 0; } .xl-newux--formpanel.xl-has-preview-banner .xl-newux--formpanel-inner { padding-top: 24px; } /* #xl-banner (Model.BannerText — SSO account-linking / third-party-client text) inherits site.css's .xl-banner, which centers it (margin: 0 auto) for the legacy centered-card layout. Left-align it here to match the rest of this column instead. */ .xl-newux--formpanel-inner #xl-banner { margin: 0; width: 100%; max-width: none; } /* Form block: fluid, caps at 520 */ .xl-newux--form { display: flex; flex-direction: column; align-items: stretch; gap: 20px; width: 100%; max-width: 520px; } /* Heading — bold/2xlarge */ .xl-newux--heading { margin: 0; font-weight: 700; font-size: 30px; line-height: 44px; color: #000A1E; } /* Email + Password group */ .xl-newux--fields { display: flex; flex-direction: column; gap: 20px; width: 100%; } /* Single field: label(20) + gap(4) + input(40) = 64 */ .xl-newux--field { display: flex; flex-direction: column; gap: 4px; width: 100%; } /* Label — bold/small, left-aligned */ .xl-newux--field label, .xl-newux--field .xui-text-label { align-self: flex-start; text-align: left; font-weight: 700; font-size: 13px; line-height: 20px; color: #404756; } /* Input — 40px tall, 8/16 padding, 3px radius, Grey 5 border. */ .xl-newux--field .xui-textinput--input, .xl-newux--field input[type="email"], .xl-newux--field input[type="password"], .xl-newux--field input[type="text"] { box-sizing: border-box; width: 100%; height: 40px; padding: 8px 16px; background: #FFFFFF; border: 1px solid #A6A9B0; border-radius: 3px; font-size: 15px; line-height: 24px; color: #000A1E; } .xl-newux--field .xui-textinput--input:focus, .xl-newux--field input:focus { outline: none; border-color: #CCCED2; box-shadow: 0 0 0 1px #FFFFFF, 0 0 0 4px rgba(0, 10, 30, 0.5); } /* Container's own border removed (doubled with the input's); kept for the disabled variant, which can pair the input with a borderless "Switch" button. */ .xl-newux--field .xui-textinput:not(.xui-textinput-is-disabled) { border: none; } .xl-newux--field .xui-textinput-is-disabled .xui-textinput--input { background: transparent; border: none; color: inherit; cursor: not-allowed; } /* Invalid field border - .xui-input-is-invalid is real XUI (toggled by validation.js), but the field's own border rule above overrides it with a fixed grey, so it needs restating here. Colour matches .xl-newux--errorbox's accent bar for the same red across summary and inline. The :focus variant matters in practice: the shared "both fields empty" message still focuses Email (unchanged pre-existing behaviour), and the plain :focus rule above has equal-or-higher specificity, so without this the focus grey silently masks the invalid red on that field. */ .xl-newux--field input.xui-input-is-invalid { border-color: #DC3246; } .xl-newux--field input.xui-input-is-invalid:focus { border-color: #DC3246; } /* Per-field inline error - XUI's guidance is to avoid the shared summary for a single-field error and highlight the specific invalid field instead; the summary is reserved for when both fields are invalid at once (see LoginJs/src/login.js). Colours/icon match ForgotPassword.NewUx.css's .xl-newux--fielderror for a consistent look across the product. */ .xl-newux--fielderror { display: flex; align-items: flex-start; gap: 8px; color: #DC3246; font-size: 13px; line-height: 20px; } .xl-newux--fielderror-icon { flex: none; width: 20px; height: 20px; border-radius: 50%; background: #DC3246; color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; line-height: 1; } /* Action row — Forgot your password? (left) + Log in button (right), same row. With a single flex item (no forgot-password link) space-between collapses to flex-start, so the button falls back to left-aligned on its own, as the design intends. margin-top/margin-bottom add to .xl-newux--form's 20px gap for 32px above/below. */ .xl-newux--actionrow { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; gap: 16px; margin-top: 12px; margin-bottom: 12px; } .xl-newux--actionrow-link { font-weight: 400; font-size: 15px; line-height: 24px; color: #0078C8; text-decoration: none; } .xl-newux--actionrow .xui-button-main { min-width: 77px; height: 40px; padding: 8px 16px; background: #0078C8; border-radius: 3px; font-weight: 700; font-size: 15px; line-height: 24px; color: #FFFFFF; } /* SSO precheck state (JS-toggled via login-precheck.js's showSsoLogin()/hideSsoLogin(), since which email triggers this is only known client-side). Right-aligns the already- shrink-to-fit button; margin-bottom:0 tightens the 32px gap down to the plain 20px form gap for the "Can't log in?" row below. Mobile is unaffected — the width:100% rule further down still fills the row, making justify-content moot there. */ .xl-newux--actionrow--sso { justify-content: flex-end; margin-bottom: 0; } /* SSO account-linking screen: 8px header-to-banner gap per Figma (form's default gap is 20px). */ .xl-newux--ssolinking #xl-login-header-text { margin-bottom: -12px; } .xl-newux--ssolinking #xl-banner p { margin-top: 0; } .xl-newux--ssolinking .xl-newux--actionrow .xui-button-main { width: auto; } /* Helper links — vertical stack of two rows, each a single external link with an outbound icon */ .xl-newux--helperlinks { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; } /* Row 1: Can't log in? */ .xl-newux--helperlinks-row { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 12px 32px; width: 100%; } .xl-newux--helperlinks a, .xl-newux--signup a { display: inline-flex; align-items: center; gap: 4px; } .xl-newux--helperlinks a { font-weight: 400; font-size: 15px; line-height: 24px; color: #0078C8; text-decoration: none; } #xl-cant-log-in-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 400; font-size: 15px; line-height: 24px; color: #0078C8; text-decoration: none; } /* Row 2: "Don't have an account? Sign up" */ .xl-newux--signup { width: 100%; font-size: 15px; line-height: 24px; } .xl-newux--signup .xl-newux--lead-text { color: #000A1E; } .xl-newux--signup a { color: #0078C8; text-decoration: none; } #xl-sso-provider-xero-central-help-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 400; font-size: 15px; line-height: 24px; color: #0078C8; } /* Footer links — small, muted. margin-top: auto pins it to the bottom of .xl-newux--formpanel (a full-height flex column) instead of it sitting directly under the form. */ .xl-newux--footer { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 12px 32px; width: 100%; max-width: 560px; padding: 96px 20px 0; margin-top: auto; } .xl-newux--footer a { font-weight: 400; font-size: 13px; line-height: 20px; color: #404756; text-decoration: none; } .xl-newux--brandpanel { position: relative; display: flex; flex: 1 1 720px; max-width: 2560px; overflow: hidden; background-color: #000A1E; } .xl-newux--brandpanel-image { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Popup mode ("session timed out" card): the popup browser window/tab itself frames the content, so instead of a slimmed-down full-bleed page this renders as a self-contained white card matching the Figma dialog spec (UAUTH-1800) — no backdrop/overlay markup needed, since there's no host page underneath to obscure. The top bar + heading are already hidden separately via ShowHeaderWithLogo. */ .xl-newux--split.xl-bodywrapper-popup { align-items: center; } .xl-newux--split.xl-bodywrapper-popup .xl-newux--brandpanel { display: none; } .xl-newux--split.xl-bodywrapper-popup .xl-newux--formpanel { flex: 0 0 auto; width: 320px; max-width: 320px; /* Figma lists both height:344px and min-height:243px on the same node, which is contradictory as literal CSS. 243px is treated as the real floor and content (validation errors, text wrapping) determines actual height — a fixed 344px would clip/overflow when the error banner shows. Flagged for design sign-off in the PR. */ min-height: 243px; padding: 30px; background: #FFFFFF; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); border-radius: 10px; } .xl-newux--split.xl-bodywrapper-popup .xl-newux--formpanel-inner { max-width: none; padding: 0; } .xl-newux--split.xl-bodywrapper-popup .xl-newux--form { gap: 20px; } .xl-newux--split.xl-bodywrapper-popup .xl-newux--fields { gap: 20px; } .xl-newux--split.xl-bodywrapper-popup .xl-newux--actionrow { margin-top: 0; margin-bottom: 0; } /* Log in spans the full width of the fields above it (260px) — there's no forgot-password link sharing this row in the popup card, unlike the full-page layout. */ .xl-newux--split.xl-bodywrapper-popup .xl-newux--actionrow .xui-button-main { width: 100%; min-width: 0; } /* Card heading/detail — distinct from the full-page .xl-newux--heading (30px/44px): this is the fixed "Session timed out" / "Enter your password to continue" pair shown only in popup mode, per the Figma dialog spec. Heading colour (#000000) is deliberately distinct from the #000A1E used elsewhere in this file — not a typo, keep as specified. */ .xl-newux--popup-heading { margin: 0; width: 260px; font-weight: 700; font-size: 17px; line-height: 28px; color: #000000; } .xl-newux--popup-detail { margin: 0; width: 260px; font-weight: 400; font-size: 15px; line-height: 24px; color: #000A1E; } /* Error banner (#xl-validation-message) — bordered box with a left accent bar, per Figma. Colours/metrics match XUI's .xui-banner-negative (confirmed against the live CDN CSS), reimplemented here since asp-validation-summary's plain