/* ============================================================= ez-platform auth layout styles Not linked by default - add to App.razor head only on auth pages. Depends on ez-platform.css (brand token vars must be loaded first). ============================================================= */ /* Logo variant used on auth/login pages. Height (max-height) is applied inline from the admin settings; width stays auto so the logo scales responsively while keeping its aspect ratio. */ .auth-brand-logo { width: auto; max-width: 100%; } /* Auth layout */ .auth-shell { min-height: 100vh; display: flex; } /* Bootstrap < lg */ @media (max-width: 991.98px) { .auth-shell { flex-direction: column; } } /* Left: brand hero. The hero panel is forced dark regardless of the user's theme (data-bs-theme is pinned to "dark" on the auth hero), so its background and headline colors are fixed hexes on purpose - do not convert to --bs-* tokens. */ .auth-hero { flex: 0 0 52%; position: relative; overflow: hidden; /* Left pane background from docs/mockups/social-options/06-icon-only.html. The hero is pinned dark regardless of theme, so these are fixed hexes on purpose (not --bs-* tokens). */ background: linear-gradient(200deg, #0d0f14 0%, #141416 40%, #140f0a 100%); display: flex; align-items: center; padding: 3rem 3.5rem; color: var(--bs-body-color); } .auth-hero-inner { position: relative; max-width: 32.5rem; } .auth-hero-title { font-size: 2.25rem; font-weight: 700; letter-spacing: -.6px; line-height: 1.15; margin: 1.75rem 0 0.875rem; color: #ffffff; } .auth-hero-sub { color: var(--bs-tertiary-color); line-height: 1.55; margin: 0 0 1.75rem; max-width: 44ch; } .auth-hero-points { list-style: none; padding: 0; margin: 0 0 2.25rem; display: flex; flex-direction: column; gap: 0.625rem; } .auth-hero-points li { display: flex; align-items: center; gap: 0.75rem; color: var(--bs-tertiary-color); } .auth-hero-points i { width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: 0.5rem; background: rgba(var(--bs-primary-rgb), .14); /* Brand token, not --bs-link-color: the auth shell pins data-bs-theme="dark" without data-theme-brand, so inside it Bootstrap's stock dark link colour (blue) wins over the brand's. --bs-primary still inherits from , so it stays the lilac brand accent and matches the primary-tinted tile background above. */ color: var(--bs-primary); flex-shrink: 0; } .auth-hero-foot { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--bs-secondary-color); padding: 0.375rem 0.625rem; border: 1px solid var(--bs-border-color); border-radius: var(--radius-pill); background: rgba(0, 0, 0, .25); -webkit-backdrop-filter: blur(0.375rem); backdrop-filter: blur(0.375rem); } .auth-hero-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--bs-success); } /* Status tones - drive the indicator dot colour (see AuthStatusTones). */ .auth-hero-dot--operational { background: var(--bs-success); } .auth-hero-dot--degraded { background: var(--bs-warning); } .auth-hero-dot--maintenance { background: var(--bs-info); } .auth-hero-dot--outage { background: var(--bs-danger); } /* Right: form column */ .auth-main { flex: 1; display: grid; place-items: center; padding: 3rem 1.5rem; /* Right pane background from docs/mockups/social-options/06-icon-only.html (--tb); pinned dark (the auth shell is data-bs-theme="dark"). */ background: #09090b; } .auth-card { width: 100%; max-width: 26.25rem; color: var(--bs-body-color); } /* The card chrome only shows on lg+ (>=992px), where the split brand-hero layout appears. Below lg there is no card: the auth form sits edge-to-edge on the auth surface, giving full-width inputs on phones and tablets. */ @media (min-width: 992px) { .auth-card { /* Auth card background from docs/mockups/social-options/06-icon-only.html (--bg); pinned dark, sits one step lighter than the #09090b right pane so the card lifts. */ background: #141416; border: 1px solid var(--bs-border-color); border-radius: var(--radius-lg); padding: 2rem; } } .auth-brand { display: flex; align-items: center; } .auth-foot { color: var(--bs-secondary-color); font-size: 0.875em; text-align: center; margin-top: 1.125rem; } .auth-foot a:not(.btn) { color: var(--bs-link-color); } /* Code-entry inputs (recovery code, authenticator code): the placeholder is a format mask, not prose, so space the glyphs so it reads as a template. The dimming comes from the global .form-control::placeholder rule in ez-platform.css. */ .ez-code-input::placeholder { letter-spacing: 0.25em; } /* Bootstrap < lg */ @media (max-width: 991.98px) { .auth-hero { display: none; } .auth-main { padding: 2rem 1.25rem; } } /* ── Social sign-in (ExternalLoginButtons) ────────────────────────────── Moved out of a page-level