, so this div starts ~3rem down the page and ends where its content ends - it can never reach the viewport edges. The backdrop is painted by the fixed ::before below instead. */ color: var(--consio-ink); letter-spacing: var(--consio-tracking-2020); line-height: var(--consio-lh-body); } /* Full-viewport backdrop, escaping the article's margin and padding. z-index:-1 keeps it above the body canvas but behind the card. */ .lgin-page::before { content: ""; position: fixed; inset: 0; background: var(--consio-bg); z-index: -1; } /* Minside tenants get their own background image on from (background-attachment: fixed, cover). Painting a grey sheet over it would hide everything except the strips above and below this div, so the Minside card deliberately has no backdrop of its own. */ .lgin-page.lgin--minside::before { content: none; } /* ---- Stage and card -------------------------------------------------- */ .lgin-stage { display: flex; justify-content: center; align-items: flex-start; /* Not 100vh: MainLayout wraps the page in

, so a full viewport height here would always produce a scrollbar. */ min-height: calc(100vh - 8rem); padding: 2.5rem 1.25rem; } .lgin { width: min(1040px, 100%); margin: auto; display: grid; grid-template-columns: minmax(300px, 0.85fr) 1.15fr; background: var(--consio-surface); border-radius: 18px; overflow: hidden; box-shadow: 0 12px 40px rgba(0, 0, 0, .14); text-align: left; } .lgin *, .lgin *::before, .lgin *::after { box-sizing: border-box; } /* site.css sets `label, a, .btn-link { font-weight: 700; color: #33343A !important }` globally. The card has its own hierarchy, so the colour is reset here. Inputs are unaffected because the card uses .lgin-input, not .form-control. */ .lgin label, .lgin a, .lgin p, .lgin h1 { color: inherit !important; } /* ---- Brand panel ----------------------------------------------------- */ .lgin__brand { /* The gradient follows --consio-primary so a theme that changes the primary colour takes the panel with it. The dark end is derived from the same colour instead of being a separate literal, so the two cannot drift apart. White text holds 4.9:1 against the LIGHTEST end (WCAG 1.4.3); if the primary is changed to a light colour the foreground has to be reconsidered. */ background: linear-gradient(175deg, var(--consio-primary) 0%, color-mix(in srgb, var(--consio-primary) 70%, #000) 100%); color: #FFFFFF; padding: 2.375rem 2.125rem; display: flex; flex-direction: column; gap: 1.75rem; } /* Width and not height: the logo file has transparent padding around the wordmark, so a fixed height would render the mark much smaller than the box suggests. max-height guards against tenant logos with other proportions. */ .lgin__logo { width: min(300px, 100%); height: auto; max-height: 200px; object-fit: contain; align-self: center; margin: auto 0 0; } .lgin__brandtext { margin-top: auto; display: flex; flex-direction: column; gap: .625rem; } .lgin__brandtext p { margin: 0; font-size: var(--cr-fs-md); line-height: 1.7; color: #DCEFF1 !important; /* 4.86:1 against the light end of the gradient */ max-width: 30ch; } /* Placed AFTER the rule above and one class more specific, so the brand heading does not inherit the body text size. */ .lgin__brandtext .lgin__brandhead { margin: 0; font-size: 1.375rem; font-weight: var(--consio-fw-bold); line-height: 1.25; letter-spacing: .2px; color: #FFFFFF !important; max-width: none; } .lgin__meta { font-size: var(--cr-fs-sm); color: #D3E9EC; /* 4.58:1 against the light end of the gradient */ letter-spacing: .4px; } /* The tenant logo comes from the shared component, which carries .client-logo from site.css (75% width, auto margins). Inside the brand panel it has to behave like .lgin__logo instead. */ .lgin__brand .client-logo { width: min(300px, 100%); max-height: 200px; object-fit: contain; margin: auto auto 0; } .lgin__brand .linkLogo { margin: auto 0 0; } /* ---- Minside theme: light brand panel -------------------------------- */ /* The Consio panel is teal because the Consio wordmark is yellow and reads well on it. Minside shows the TENANT's logo, which is an arbitrary image drawn for a white background - dark logos are close to illegible on the gradient. So the Minside card gets a light panel and dark text instead, separated from the form panel by a hairline rather than by colour. A customer view can pass its own modifier to and add a block like this one to theme its card independently. */ .lgin--minside .lgin__brand { background: #F1F2F4; color: var(--lgin-fg-label); border-right: 1px solid #E1E4E6; } .lgin--minside .lgin__brandtext p { color: var(--lgin-fg-soft) !important; /* 5.4:1 on #F1F2F4 */ } .lgin--minside .lgin__brandtext .lgin__brandhead { color: var(--lgin-fg-label) !important; /* 9.3:1 on #F1F2F4 */ } .lgin--minside .lgin__meta { color: var(--lgin-fg-soft); /* 5.4:1 on #F1F2F4 */ } /* On a narrow screen the panel stacks above the form, so the divider has to move to the bottom edge or it draws a line down the middle of nothing. */ @media (max-width: 820px) { .lgin--minside .lgin__brand { border-right: 0; border-bottom: 1px solid #E1E4E6; } } /* ---- Content panel --------------------------------------------------- */ .lgin__panel { padding: 2.375rem 2.625rem 2.125rem; display: flex; flex-direction: column; min-width: 0; } .lgin__title { margin: 0 0 .375rem; font-size: 1.75rem; font-weight: var(--consio-fw-xbold); line-height: 1.15; color: var(--consio-ink) !important; } .lgin__sub { margin: 0 0 1.625rem; font-size: var(--cr-fs-md); font-weight: var(--consio-fw-regular); line-height: 1.6; color: var(--lgin-fg-soft) !important; max-width: 46ch; } .lgin__form { display: flex; flex-direction: column; gap: 1rem; max-width: 420px; } .lgin__foot { margin-top: auto; padding-top: 1.625rem; display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; font-size: var(--cr-fs-sm); color: var(--lgin-fg-soft); letter-spacing: .3px; } /* ---- Fields ---------------------------------------------------------- */ .lgin-fld { display: flex; flex-direction: column; gap: .375rem; } .lgin-fld > label, .lgin-label { font-size: var(--cr-fs-sm); font-weight: var(--consio-fw-bold); letter-spacing: .5px; color: var(--lgin-fg-label) !important; } .lgin-input { width: 100%; padding: .6875rem .8125rem; border: 1px solid var(--lgin-field-border); border-radius: var(--consio-radius-md); background: #FFFFFF; font: inherit; font-size: .9375rem; line-height: 1.3; color: var(--consio-ink); } .lgin-input::placeholder { color: #767C82; /* 4.22:1 against the white field */ opacity: 1; } .lgin-input:focus { outline: 2px solid var(--consio-focus-ring); outline-offset: 0; border-color: var(--consio-focus-ring); } /* Blazor marks invalid fields with .invalid from the EditForm validation CSS; keep the red border readable rather than letting it stack with the focus ring. */ .lgin-input.invalid { border-color: var(--consio-danger); } .lgin .validation-message { display: block; font-size: var(--cr-fs-sm); font-weight: var(--consio-fw-bold); color: var(--consio-danger) !important; } /* ---- Password field with show/hide ----------------------------------- */ .lgin-pw { position: relative; display: flex; } .lgin-pw .lgin-input { padding-right: 4.75rem; } .lgin-pw__toggle { position: absolute; right: .375rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--consio-primary-text); font: inherit; font-size: var(--cr-fs-sm); font-weight: var(--consio-fw-bold); letter-spacing: .2px; /* 44x36: the hit area is larger than the text (WCAG 2.5.8 Target Size). */ min-width: 44px; min-height: 36px; padding: .5625rem .625rem; border-radius: var(--consio-radius-sm); cursor: pointer; } .lgin-pw__toggle:hover { background: var(--cr-accent-050); } /* ---- Buttons --------------------------------------------------------- */ .lgin-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5625rem; min-height: 44px; padding: .75rem 1.25rem; border: 1px solid var(--consio-primary); border-radius: var(--consio-radius-md); background: var(--consio-primary); color: var(--consio-primary-fg) !important; font: inherit; font-size: .9375rem; font-weight: var(--consio-fw-bold); line-height: 1; letter-spacing: .2px; cursor: pointer; transition: background var(--consio-anim-fast), border-color var(--consio-anim-fast), color var(--consio-anim-fast); } .lgin-btn:hover, .lgin-btn:focus { background: color-mix(in srgb, var(--consio-primary) 78%, #000); border-color: color-mix(in srgb, var(--consio-primary) 78%, #000); color: var(--consio-primary-fg) !important; } .lgin-btn[disabled] { background: var(--consio-disabled-bg); border-color: var(--lgin-line); color: var(--lgin-fg-soft) !important; cursor: not-allowed; } .lgin-btn--wide { width: 100%; } .lgin-btn i { font-size: var(--cr-fs-sm); flex: 0 0 auto; } .lgin-actions { display: flex; gap: .625rem; flex-wrap: wrap; margin-top: .25rem; } /* ---- Links ----------------------------------------------------------- */ .lgin-links { display: flex; gap: 1.125rem; flex-wrap: wrap; margin-top: 1.25rem; font-size: var(--cr-fs-sm); } .lgin a { color: var(--consio-primary-text) !important; font-weight: var(--consio-fw-bold); text-decoration: none; } /* The forgot-password link stands on its own line rather than inside a sentence, so the inline exception to WCAG 2.5.8 (Target Size, Minimum) does not apply and it has to reach 24px on its own. Vertical padding only - it does not move the link visually. */ .lgin-links a { display: inline-block; min-height: 24px; padding: .1875rem 0; } .lgin a:hover { color: color-mix(in srgb, var(--consio-primary-text) 78%, #000) !important; text-decoration: underline; } /* ---- Focus marking --------------------------------------------------- */ /* Separate rule for everything that is not a field: a 2px ring with an offset, so it stays visible on filled buttons too (WCAG 2.4.7 / 2.4.11). */ .lgin a:focus-visible, .lgin-btn:focus-visible, .lgin-pw__toggle:focus-visible { outline: 2px solid var(--consio-ink); outline-offset: 2px; border-radius: var(--consio-radius-sm); } /* ---- Alerts ---------------------------------------------------------- */ /* StatusMessage renders Bootstrap's .alert markup. Restyle it inside the card instead of changing the shared component. */ .lgin__panel .alert { display: flex; gap: .6875rem; padding: .75rem .875rem; margin-bottom: 1.25rem; border-radius: var(--consio-radius-md); font-size: var(--cr-fs-sm); font-weight: var(--consio-fw-bold); line-height: 1.55; } .lgin__panel .alert-danger { background: #FBEDED; color: #7E2222; border: 1px solid #E7C9C9; } .lgin__panel .alert-success { background: var(--cr-accent-050); color: color-mix(in srgb, var(--consio-primary) 88%, #000); border: 1px solid #A9CDD3; } /* The validation summary renders a

; keep it inside the alert box. */ .lgin .validation-errors { margin: 0; padding: 0; list-style: none; font-size: var(--cr-fs-sm); font-weight: var(--consio-fw-bold); color: var(--consio-danger) !important; } /* ---- Responsive ------------------------------------------------------ */ @media (max-width: 820px) { .lgin { grid-template-columns: 1fr; } .lgin__brand { padding: 1.625rem; } .lgin__brandtext { margin-top: 0; } .lgin__logo, .lgin__brand .client-logo { width: min(220px, 60%); margin: 0 0 .5rem; } .lgin__panel { padding: 1.75rem 1.5rem; } } @media (max-width: 480px) { .lgin-stage { padding: 0; } .lgin { border-radius: 0; box-shadow: none; } } /* Respect "reduce motion" (WCAG 2.3.3). */ @media (prefers-reduced-motion: reduce) { .lgin-btn { transition: none; } }