/* ═══════════════════════════════════════════════════════════
Auth — the canonical Capplon sign-in shell
ONE look for every product's /Account/* pages (login, forgot,
reset, register, 2fa, lockout…): a charcoal + teal backdrop with a
centered, shadow-lifted design-system card. Promoted into the system
so products stop re-rolling it and drifting apart (squished cards,
off-palette backdrops). Faithful to the TNonline auth look.
Composes existing components — it only adds the shell + brand + head:
═══════════════════════════════════════════════════════════ */
.tn-auth-shell {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: var(--tn-page-pad-x);
/* Charcoal base with a teal glow from the top — the Capplon auth backdrop */
background:
radial-gradient(900px 480px at 50% -15%, rgba(var(--tn-accent-rgb), 0.55) 0%, rgba(var(--tn-accent-rgb), 0) 60%),
#15171A;
}
.tn-auth-card-wrap {
width: 100%;
max-width: 420px;
}
/* ── Brand lockup (teal monogram tile + wordmark) — matches the
transactional-email header, so email + auth read as one product. ── */
.tn-auth-brand {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: var(--tn-space-lg);
text-decoration: none;
}
.tn-auth-brand-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--tn-radius);
background: var(--tn-accent);
color: var(--tn-accent-contrast, #fff);
font-size: 1.25rem;
font-weight: 700;
line-height: 1;
}
.tn-auth-brand-text {
font-size: 1.4rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--tn-text-on-dark-bright);
}
/* Wordmark-only lockup — no monogram tile. What ColibriAuth's sign-in
actually uses: at the top of a focused auth page the product name alone
is the stronger mark, since there's no nav or chrome for a tile to
distinguish it from. Just omit the .tn-auth-brand-mark span. */
.tn-auth-brand--wordmark .tn-auth-brand-text {
font-size: 1.7rem;
}
/* Centered row under the brand — where the SV|EN switcher sits on
ColibriAuth's sign-in. Exists so that pattern needs no framework beyond
this system: it was reaching for Bootstrap's
`d-flex justify-content-center mb-3` to do exactly this.
NOTE: .tn-lang-toggle itself is defined in steps.css (it was built for the
funnel head). A product that wants the switcher on its auth pages has to
vendor steps.css for it today — worth splitting out if that spreads
further, since an auth page has no other reason to carry the funnel. */
.tn-auth-brand-row {
display: flex;
justify-content: center;
margin-bottom: var(--tn-space-lg);
}
/* Lift the standard .tn-card off the dark backdrop */
.tn-auth-card-wrap .tn-card {
box-shadow: var(--tn-shadow-lg);
}
/* ── Card head ── */
.tn-auth-head {
text-align: center;
margin-bottom: var(--tn-space-lg);
}
.tn-auth-title {
margin: 0 0 4px;
font-size: 1.4rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--tn-text-primary);
}
.tn-auth-sub {
margin: 0;
font-size: var(--tn-font-size-sm);
color: var(--tn-text-secondary);
}
/* ── Row: remember-me ↔ forgot-link ── */
/* No bottom margin: the submit button owns the gap that follows this row —
see the submit-action note below for why it has to. */
.tn-auth-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--tn-space-md);
}
.tn-auth-link {
color: var(--tn-accent);
font-size: var(--tn-font-size-sm);
text-decoration: none;
white-space: nowrap;
}
.tn-auth-link:hover {
color: var(--tn-accent-hover);
text-decoration: underline;
}
/* ── Submit action ──
The button needs MORE separation from the field stack than the fields have
from each other, or the primary action reads as one more row in the form
rather than the thing that ends it.
It can't inherit that from whatever precedes it, because what precedes it
differs and one case contributes nothing: forms.css zeroes the last
.tn-form-group's bottom margin (right for a card the form ends, wrong when
a button follows), so an email → password → button form had NO spacing of
its own. Rather than patch each predecessor, the button owns the gap
outright and .tn-auth-row gives up its bottom margin (see above) — both
shapes then land on the same 24px, clear of the 18px inter-field rhythm. */
.tn-auth-card-wrap .tn-btn--block {
margin-top: var(--tn-space-lg);
}
/* ── Footer line under the card (e.g. "No account? Contact your admin") ── */
.tn-auth-footer {
margin-top: var(--tn-space-lg);
text-align: center;
font-size: var(--tn-font-size-xs);
color: var(--tn-text-on-dark);
}
.tn-auth-footer a {
color: var(--tn-text-on-dark-bright);
text-decoration: underline;
}
/* ═══════════════════════════════════════════════════════════
SPLIT VARIANT — form on a light ground left, a statement panel right.
The centered shell above floats a card on a dark backdrop; this one is
the two-pane sign-in: quiet, near-white ground under the form, and a
near-black panel opposite carrying one large brand statement. The
statement is the whole point of the right pane — it's the only place in
the product where a sentence gets to be the largest thing on screen, so
keep it to one claim in two short lines, not a paragraph.
Note the form here sits directly on the ground — NO .tn-card. A card
would draw a box around a form that already has a whole pane to itself,
which is the fussy look this variant exists to avoid.
═══════════════════════════════════════════════════════════ */
.tn-auth-split {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 100vh;
}
.tn-auth-split-form {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
padding: var(--tn-space-xl) var(--tn-page-pad-x);
/* A hair off pure white so the inputs' own white reads as raised */
background: var(--tn-bg-page);
}
/* The form column is deliberately narrower than the pane — a sign-in form
stretched to half a 1920px screen reads as a settings page. */
.tn-auth-split .tn-auth-card-wrap {
max-width: 360px;
margin: 0 auto;
}
/* ── Statement panel ── */
.tn-auth-split-panel {
display: flex;
align-items: center;
min-width: 0;
padding: var(--tn-space-xl) clamp(var(--tn-space-xl), 6vw, 88px);
background: var(--tn-primary-dark);
background-size: cover;
background-position: center;
}
.tn-auth-statement {
margin: 0;
max-width: 16ch;
color: #fff;
font-size: clamp(1.6rem, 1rem + 2.2vw, 2.9rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
text-wrap: balance;
}
.tn-auth-statement-sub {
margin: var(--tn-space-md) 0 0;
max-width: 34ch;
color: rgba(255, 255, 255, 0.66);
font-size: var(--tn-font-size-base);
line-height: 1.6;
font-weight: 400;
}
/* ── Image panel ──
Set background-image on .tn-auth-split-panel and the pane becomes a photo
instead of a statement. Two rules for using it well:
1. A photo that already CARRIES the brand (a logo etched on glass, signage)
needs no statement over it — the image is the message, and text on top
competes with it. Use .tn-auth-split-panel--image, which just drops the
padding the statement needed.
2. A photo used as a BACKDROP for a statement needs a scrim, because
white text over an image's lighter regions stops being legible. Add
.tn-auth-split-panel--scrim, which lays a dark gradient over the image
without touching the image itself. */
.tn-auth-split-panel--image {
padding: 0;
}
.tn-auth-split-panel--scrim {
position: relative;
isolation: isolate;
}
.tn-auth-split-panel--scrim::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(150deg, rgba(17, 19, 24, 0.35), rgba(17, 19, 24, 0.82));
}
/* ── Left-aligned brand + head, for the split variant.
The centered shell centres both; against a left-aligned form column that
centring reads as accidental. ── */
.tn-auth-brand--start {
justify-content: flex-start;
margin-bottom: var(--tn-space-xl);
}
/* On a LIGHT ground the wordmark can't use the on-dark token */
.tn-auth-split .tn-auth-brand-text {
color: var(--tn-text-primary);
}
.tn-auth-head--start {
text-align: left;
}
.tn-auth-head--start .tn-auth-title {
font-size: 1.75rem;
}
/* Footer sits on light here, so the on-dark tones would vanish */
.tn-auth-split .tn-auth-footer {
text-align: left;
color: var(--tn-text-muted);
}
.tn-auth-split .tn-auth-footer a {
color: var(--tn-text-secondary);
}
/* ── Mobile — the statement moves ABOVE the form rather than disappearing.
It's the brand's one line; dropping it entirely on the device most people
sign in from would be the wrong half to lose. Shrunk to a banner so it
costs a strip, not a screen. ── */
@media (max-width: 900px) {
.tn-auth-split {
grid-template-columns: 1fr;
min-height: 100dvh;
}
.tn-auth-split-panel {
order: -1;
padding: var(--tn-space-xl) var(--tn-page-pad-x);
}
.tn-auth-statement {
max-width: none;
font-size: clamp(1.35rem, 1rem + 2.5vw, 1.9rem);
}
.tn-auth-split-form {
padding-top: var(--tn-space-xl);
padding-bottom: calc(var(--tn-space-xl) + env(safe-area-inset-bottom, 0px));
}
.tn-auth-split .tn-auth-card-wrap {
max-width: 420px;
}
}