/* Shared styles for the platform's authentication pages. These pages used Bootstrap class names (container, row, col, form-control, form-floating, form-check, btn btn-lg btn-primary, text-danger) while this RCL ships no Bootstrap. Whether any of it meant anything was decided entirely by what each host happened to load, and that contract was never written down: seven sites in the estate load Bootstrap and rendered correctly, three do not and rendered a sign-in form as unstyled native controls with the label sitting under its own field. See Buckbury#435. So the pages now carry their own namespace and this file defines all of it. No framework class names anywhere, in the markup or here. Theming is through the custom properties below. A site overriding a handful of them gets its own look without forking a page; everything else follows from those values. Deliberately NOT a hardcoded light background. PeaProtein's cookie banner used Bootstrap's bg-white, set with !important and #fff in every scheme, while its text came from the site's dark palette. The heading landed at 1.05:1. See PeaProtein#43. */ /* Defaults are declared inside :where() so they contribute ZERO specificity. This matters more here than it does for the cookie banner, which declares its defaults directly on .cookie-consent. These pages link this stylesheet from the HeaderTags section, which every consumer layout renders at the end of - i.e. AFTER the host's own stylesheet. A default written as `.auth-page { --bb-auth-accent: ... }` would therefore beat a host writing `:root { --bb-auth-accent: ... }` twice over: on specificity (0-1-0 against 0-0-1, and the closer element wins for an inherited property anyway) and on source order. The documented theming API would appear to do nothing, on exactly the sites most likely to use it. With :where(), any host declaration wins regardless of the selector it uses or when it loads. */ :where(:root) { --bb-auth-fg: #1f2328; --bb-auth-muted: #4a5057; /* Opaque, never transparent, and this is load-bearing rather than a style choice. Transparent was the first version and it was wrong in a way that only shows on a real site. The foreground colours below switch on prefers-color-scheme, but the *background* they were being read against belonged to the host - and a host that does not implement dark mode keeps a light background whatever the visitor's OS says. On Quizzenia, whose body is a light gradient in every scheme, that put #e6e8ea text on #ffffff: the heading and labels measured 1.23:1 and the muted text 2.04:1. That is PeaProtein#43 again, from the opposite direction, and it is exactly what the note at the top of this file warns about. The fix is the one the cookie banner already uses: the component paints both sides of every pair it is responsible for, so they cannot desync. A site that genuinely wants the page background showing through can set this to transparent itself - and then owns the contrast, which is the point. */ --bb-auth-bg: #ffffff; --bb-auth-border: #c9ced4; /* Usable as a `background` shorthand, not only a background-color: KnightsTour's primary is a linear-gradient, and a site whose brand colour cannot be expressed here cannot match itself. */ --bb-auth-accent: #0b5ed7; --bb-auth-accent-fg: #ffffff; /* A separate hover value rather than filter: brightness(). A brand colour already close to white has nowhere to brighten to, so the hover state would be invisible on those sites. */ --bb-auth-accent-hover: #0a53be; --bb-auth-danger: #b3261e; --bb-auth-danger-bg: #fdf2f1; --bb-auth-success: #1a7f37; --bb-auth-success-bg: #f0f9f2; --bb-auth-field-bg: #ffffff; /* Its own value, deliberately NOT inheriting --bb-auth-border. A field's edge is what tells a sighted user where the control is, so WCAG 1.4.11 puts a 3:1 floor on it; the decorative border used for rules and dividers is allowed to be fainter and is. Sharing one token failed that floor in both schemes - measured at 2.07:1 on dark and 1.58:1 on light. */ --bb-auth-field-border: #858b93; --bb-auth-radius: 0.375rem; /* The readable measure for a single-column form, not the width of the page. */ --bb-auth-measure: 26rem; --bb-auth-gap: 1rem; /* Inherits the host's face by default; a site with a display font can point this at it. */ --bb-auth-font: inherit; --bb-auth-label-weight: 600; --bb-auth-focus-ring: 3px; } /* Dark by preference, then by whichever attribute the host toggles. Both Bootstrap's data-bs-theme and the plainer data-theme are in use across the estate, so both are honoured. */ @media (prefers-color-scheme: dark) { :where(:root) { --bb-auth-fg: #e6e8ea; --bb-auth-muted: #b0b6bd; --bb-auth-bg: #1c2128; --bb-auth-border: #444c56; --bb-auth-accent: #4d8ff0; --bb-auth-accent-fg: #10141a; --bb-auth-accent-hover: #6ba3f4; --bb-auth-danger: #f2a9a3; --bb-auth-danger-bg: #3a1f1d; --bb-auth-success: #57c26e; --bb-auth-success-bg: #16301c; --bb-auth-field-bg: #12171d; --bb-auth-field-border: #6e7681; } } :where(:root[data-bs-theme="dark"]), :where(:root[data-theme="dark"]) { --bb-auth-fg: #e6e8ea; --bb-auth-muted: #b0b6bd; --bb-auth-bg: #1c2128; --bb-auth-border: #444c56; --bb-auth-accent: #4d8ff0; --bb-auth-accent-fg: #10141a; --bb-auth-accent-hover: #6ba3f4; --bb-auth-danger: #f2a9a3; --bb-auth-danger-bg: #3a1f1d; --bb-auth-success: #57c26e; --bb-auth-success-bg: #16301c; --bb-auth-field-bg: #12171d; --bb-auth-field-border: #6e7681; } /* A site forcing light while the OS is dark must win over the media query above. */ :where(:root[data-bs-theme="light"]), :where(:root[data-theme="light"]) { --bb-auth-fg: #1f2328; --bb-auth-muted: #4a5057; --bb-auth-bg: #ffffff; --bb-auth-border: #c9ced4; --bb-auth-accent: #0b5ed7; --bb-auth-accent-fg: #ffffff; --bb-auth-accent-hover: #0a53be; --bb-auth-danger: #b3261e; --bb-auth-danger-bg: #fdf2f1; --bb-auth-success: #1a7f37; --bb-auth-success-bg: #f0f9f2; --bb-auth-field-bg: #ffffff; --bb-auth-field-border: #858b93; } /* ---------------------------------------------------------------- page ---- */ .auth-page { max-inline-size: 64rem; margin-inline: auto; padding: 2rem 1rem 3rem; color: var(--bb-auth-fg); font-family: var(--bb-auth-font); } /* The measure lives on an inner element rather than on .auth-page so a site can widen the page without widening the form. Without it the form stretched to the full width of the viewport on the sites with no grid - WightAdventures measured 1265px on a wide screen before it wrote its own shim. */ .auth-page__panel { max-inline-size: var(--bb-auth-measure); margin-inline: auto; /* The panel paints the background rather than leaving it to the host, and everything whose colour this stylesheet sets lives inside it. That is what keeps every foreground/background pair under one owner: a host in one scheme and a platform component in another can no longer produce 1.23:1 text, because the background is no longer the host's to disagree with. */ background: var(--bb-auth-bg); padding: 1.5rem; border-radius: var(--bb-auth-radius); } /* An explicit size rather than relying on the host. Tailwind's Preflight resets a class-less h1 to body size, so on three sites in the estate the page title was indistinguishable from the text under it. */ .auth-page__title { margin: 0 0 0.5rem; font-size: 1.75rem; line-height: 1.2; font-weight: 700; color: var(--bb-auth-fg); } .auth-page__intro { margin-block-end: var(--bb-auth-gap); color: var(--bb-auth-muted); } .auth-page__intro :last-child { margin-block-end: 0; } .auth-page__divider { margin: 0 0 var(--bb-auth-gap); border: 0; border-block-start: 1px solid var(--bb-auth-border); } .auth-page__status { margin-block-end: var(--bb-auth-gap); padding: 0.75rem 1rem; border: 1px solid var(--bb-auth-border); border-radius: var(--bb-auth-radius); color: var(--bb-auth-fg); } /* ---------------------------------------------------------------- form ---- */ .auth-form { display: flex; flex-direction: column; gap: var(--bb-auth-gap); margin: 0 0 var(--bb-auth-gap); } .auth-form__field { display: flex; flex-direction: column; gap: 0.375rem; } /* Label above its input, and no placeholder on the input. Bootstrap's form-floating needed the opposite order plus a placeholder, because its CSS floats the label over the field. Without Bootstrap that markup renders as a label sitting UNDER its own field, with the placeholder duplicating it - which is what QuizInnovate and Quizzenia showed in production. A plain stacked label depends on no framework and reads identically everywhere. */ .auth-form__label { font-weight: var(--bb-auth-label-weight); color: var(--bb-auth-fg); } .auth-form__input { font: inherit; font-family: var(--bb-auth-font); inline-size: 100%; /* Pixels: a floor, not a design size. See the note on target sizes below. */ min-block-size: 44px; padding: 0.5rem 0.75rem; color: var(--bb-auth-fg); background-color: var(--bb-auth-field-bg); border: 1px solid var(--bb-auth-field-border); border-radius: var(--bb-auth-radius); } .auth-form__input:focus-visible { outline: var(--bb-auth-focus-ring) solid var(--bb-auth-accent); outline-offset: 1px; } .auth-form__error { color: var(--bb-auth-danger); font-size: 0.875rem; } /* Empty until validation runs, and an empty flex child still takes gap. */ .auth-form__error:empty { display: none; } .auth-form__summary:not(:empty) { padding: 0.75rem 1rem; color: var(--bb-auth-danger); background-color: var(--bb-auth-danger-bg); border: 1px solid currentColor; border-radius: var(--bb-auth-radius); } .auth-form__choice { display: flex; align-items: flex-start; gap: 0.5rem; } /* Pixels, not rem, for the dimensions that are accessibility floors rather than design sizes. A platform component inherits the host's root font size and those differ across the estate: KnightsTour sets 14px, so anything expressed in rem lands 12.5% short there while being correct on a 16px site. A floor that quietly varies per host is not a floor, and WCAG states target size in CSS pixels anyway. Typography and spacing stay in rem deliberately, so they scale with the host's type scale and with a reader's own font-size preference. These are minimums, so a control still grows when the text inside it does. */ .auth-form__checkbox { /* 24x24 is the WCAG 2.2 SC 2.5.8 minimum target. */ inline-size: 24px; block-size: 24px; margin: 0; flex: none; accent-color: var(--bb-auth-accent); } .auth-form__choice-label { color: var(--bb-auth-fg); /* Centres the text against a 24px box without moving the box. */ padding-block-start: 2px; } .auth-form__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } .auth-form__submit { font: inherit; font-family: var(--bb-auth-font); flex: 1 1 auto; /* Pixels: a floor, not a design size. See the note above. */ min-block-size: 44px; padding: 0.5rem 1.25rem; color: var(--bb-auth-accent-fg); /* Shorthand so a gradient works here as well as a colour. */ background: var(--bb-auth-accent); border: 2px solid transparent; border-radius: var(--bb-auth-radius); font-weight: 600; cursor: pointer; } .auth-form__submit:hover { background: var(--bb-auth-accent-hover); } .auth-form__submit:focus-visible { outline: var(--bb-auth-focus-ring) solid var(--bb-auth-fg); outline-offset: 2px; } /* --------------------------------------------------------------- links ---- */ .auth-note { margin: 0 0 0.75rem; color: var(--bb-auth-muted); } .auth-link { color: var(--bb-auth-accent); text-decoration: underline; } .auth-link--button { display: inline-flex; align-items: center; justify-content: center; /* Pixels: a floor, not a design size. See the note above. */ min-block-size: 44px; padding: 0.5rem 1.25rem; color: var(--bb-auth-accent-fg); background: var(--bb-auth-accent); border-radius: var(--bb-auth-radius); text-decoration: none; font-weight: 600; } .auth-link--button:hover { background: var(--bb-auth-accent-hover); color: var(--bb-auth-accent-fg); } .auth-link:focus-visible, .auth-link--button:focus-visible { outline: var(--bb-auth-focus-ring) solid var(--bb-auth-accent); outline-offset: 2px; } /* ------------------------------------------------- classes we don't own ---- */ /* Three class families appear on these pages that the markup cannot rename, so they are styled defensively and scoped under .auth-page to keep the exception contained: - validation-summary-errors / -valid come from the asp-validation-summary tag helper - field-validation-error and input-validation-error come from the asp-for and asp-validation-for tag helpers - alert / alert-danger / alert-success come from the shared _StatusMessage partial, which is also used by pages outside this namespace and so is not ours to change yet These are applied SERVER-SIDE, on re-render after a failed POST. An earlier version of this comment said they were added by jQuery unobtrusive validation at runtime and concluded that no test could cover them. Both halves were wrong. Proven with curl rather than in a browser, and the distinction matters. Three files are named _ValidationScriptsPartial: the one these pages render, Pages/Shared/, is empty, but Areas/Account/Pages/ is not, and neither is Buckbury.Web/Pages/ - and a consumer partial overrides the RCL's, so on Buckbury.Web jQuery validation IS loaded. Reading the DOM there therefore proves nothing about who applied the class. Posting an empty form with curl and grepping the raw response does: it comes back carrying input-validation-error and field-validation-error with no script having run. input-validation-error is the one that matters most: without it a failed submission shows a message with no indication of which field it belongs to. The four validation names appear in no .cshtml in this repository, so they read as dead rules and are the likeliest thing here to be deleted as unused. AuthPagesAssetTests pins three of them; validation-summary-valid only hides an empty element, so losing it costs nothing. The alert names are different and are NOT pinned: they appear in _StatusMessage.cshtml and in around two dozen other pages, so nobody is going to mistake them for dead code. */ .auth-page .input-validation-error { border-color: var(--bb-auth-danger); } .auth-page .input-validation-error:focus-visible { outline-color: var(--bb-auth-danger); } .auth-page .field-validation-error { display: block; color: var(--bb-auth-danger); font-size: 0.875rem; } .auth-page .validation-summary-errors ul { margin: 0; padding-inline-start: 1.25rem; } .auth-page .validation-summary-valid { display: none; } .auth-page .alert { margin-block-end: var(--bb-auth-gap); padding: 0.75rem 1rem; border: 1px solid currentColor; border-radius: var(--bb-auth-radius); } .auth-page .alert-danger { color: var(--bb-auth-danger); background-color: var(--bb-auth-danger-bg); } .auth-page .alert-success { color: var(--bb-auth-success); background-color: var(--bb-auth-success-bg); }