/* ==========================================================================
hub-auth.css - the sign-in look (auth layout only)
Loaded only by layout/auth.php, after hub-theme.css. Everything is scoped under .auth-box so
it cannot touch the app shell. It does not use, and must not be mixed with, the retired
.auth-shell / .auth-card / .auth-split / .auth-hero classes in custom.css (a later batch
deletes those).
Markup (single centred card, brand above, optional admin-editable hero text above the card):
Sign in to continue
Access your tools, reports and API management.
...alert, form...
Two-column variant (hero text and points on the left, card on the right): add
.auth-box--split to .auth-box, use `row align-items-center g-4` and see "split" below.
========================================================================== */
.auth-box {
--hub-auth-logo-h: 36px; /* hub logo is 142x40 (3.55:1); retune if the artwork changes */
--hub-auth-indigo: #6366f1;
--hub-auth-indigo-deep: #4f46e5;
position: relative;
isolation: isolate;
overflow: hidden;
/* ambient ground: two soft colour fields over a light grey. Indigo picks up the primary
button, teal the link accent. */
background:
radial-gradient(900px 520px at 12% -12%, rgba(99, 102, 241, .13), transparent 62%),
radial-gradient(760px 520px at 92% 112%, rgba(26, 179, 148, .12), transparent 60%),
#f3f4f7;
}
/* A very slow drift on a pseudo-element rather than on .auth-box itself: animating the
element's own background would repaint the whole subtree (the form) on every frame. */
.auth-box::before {
content: "";
position: absolute;
inset: -25%;
z-index: -1;
pointer-events: none;
background:
radial-gradient(620px 420px at 30% 30%, rgba(99, 102, 241, .10), transparent 60%),
radial-gradient(560px 400px at 70% 70%, rgba(26, 179, 148, .09), transparent 60%);
animation: hub-auth-drift 26s ease-in-out infinite alternate;
will-change: transform;
}
@keyframes hub-auth-drift {
from { transform: translate3d(-2.5%, -1.5%, 0) scale(1); }
to { transform: translate3d(2.5%, 1.5%, 0) scale(1.06); }
}
/* ---- brand ---------------------------------------------------------------------------- */
.auth-box .auth-brand .logo-dark img,
.auth-box .auth-brand .logo-light img {
height: var(--hub-auth-logo-h);
width: auto;
}
/* centred brand block (two-factor / verify pages): logo, then a heading and a sub-line */
.auth-box .auth-brand h4,
.auth-box .auth-brand .h4 { font-size: 16px; }
/* ---- entrance: brand, heading, sub-line and card rise in sequence ----------------------
`both` holds the from-state before the delay elapses, otherwise each element flashes at full
opacity for a frame before its animation starts. */
@keyframes hub-auth-rise {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
.auth-box .auth-brand > *,
.auth-box .auth-hero-title,
.auth-box .auth-hero-sub,
.auth-box .auth-hero-point,
.auth-box .card {
animation: hub-auth-rise .55s cubic-bezier(.22, .8, .3, 1) both;
}
.auth-box .auth-brand h4,
.auth-box .auth-hero-title { animation-delay: .13s; }
.auth-box .auth-brand p,
.auth-box .auth-hero-sub { animation-delay: .20s; }
.auth-box .card { animation-delay: .27s; }
.auth-box .auth-hero-point:nth-child(1) { animation-delay: .30s; }
.auth-box .auth-hero-point:nth-child(2) { animation-delay: .36s; }
.auth-box .auth-hero-point:nth-child(3) { animation-delay: .42s; }
/* A brand placed INSIDE the card must not run its own entrance: it would appear floating in
empty space before the card arrives. Inside the card it rides the card's animation. */
.auth-box .card .auth-brand > * { animation: none; }
/* ---- the wordmark drops in and bounces ------------------------------------------------
The timing function is set per keyframe, not on the animation: gravity needs ease-IN while the
mark falls and ease-OUT while it rebounds, alternating at every contact. Three decreasing
rebounds (18px, 7px, 2px), then rest. A per-keyframe timing function also overrides the curve
inherited from the rise shorthand above, so this rule only restates name and duration. */
@keyframes hub-auth-brand-drop {
0% { opacity: 0; transform: translateY(-140px); animation-timing-function: cubic-bezier(.55, .06, .68, .19); }
45% { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(.22, .61, .36, 1); }
62% { transform: translateY(-18px); animation-timing-function: cubic-bezier(.55, .06, .68, .19); }
78% { transform: translateY(0); animation-timing-function: cubic-bezier(.22, .61, .36, 1); }
88% { transform: translateY(-7px); animation-timing-function: cubic-bezier(.55, .06, .68, .19); }
96% { transform: translateY(0); animation-timing-function: cubic-bezier(.22, .61, .36, 1); }
99% { transform: translateY(-2px); }
100% { transform: translateY(0); }
}
.auth-box .auth-brand a {
animation-name: hub-auth-brand-drop;
animation-duration: 1.15s;
animation-delay: .1s;
}
/* ---- card ------------------------------------------------------------------------------ */
.auth-box .card {
border-radius: 15px;
overflow: hidden;
border: 1px solid rgba(15, 23, 42, .06);
box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px -12px rgba(16, 24, 40, .18);
transition: box-shadow .35s ease;
}
.auth-box .card:hover {
box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 20px 44px -14px rgba(16, 24, 40, .24);
}
/* ---- inputs: a soft indigo ring instead of the theme's hard outline; the group addon shifts
colour with the field so the whole control reads as one focused object. ------------------- */
.auth-box .form-control,
.auth-box .input-group-text {
transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.auth-box .form-control:focus {
border-color: var(--hub-auth-indigo);
box-shadow: 0 0 0 4px rgba(99, 102, 241, .15);
}
.auth-box .input-group:focus-within .input-group-text {
border-color: var(--hub-auth-indigo);
color: var(--hub-auth-indigo-deep);
}
/* ---- primary action ----------------------------------------------------------------------- */
.auth-box .btn-primary {
transition: transform .18s cubic-bezier(.22, .8, .3, 1), box-shadow .18s ease, filter .18s ease;
}
.auth-box .btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 10px 22px -8px rgba(99, 102, 241, .55);
filter: saturate(1.06);
}
.auth-box .btn-primary:active { transform: translateY(0); box-shadow: none; }
/* ---- alerts: a failed sign-in is noticed without the page jumping ------------------------- */
@keyframes hub-auth-alert-in {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
.auth-box .alert { animation: hub-auth-alert-in .3s ease-out both; }
/* ---- admin-editable hero text shown above the card ----------------------------------------
Settings AUTH_LOGIN_HERO / AUTH_REGISTER_HERO supply the title and sub-line (and up to three
points). px matches the card's p-4 so the text lines up with the card edge. */
.auth-hero-text { padding: 0 1.875rem; margin-bottom: 1rem; }
.auth-hero-title {
font-size: 1.15rem;
font-weight: 600;
line-height: 1.35;
letter-spacing: .005em;
color: #1d2939;
margin: 0 0 .3rem;
}
.auth-hero-sub {
font-size: 13px;
line-height: 1.55;
color: #667085;
margin: 0;
}
/* ---- two-column variant ("split") -----------------------------------------------------------