/* Login and other unauthenticated pages. Loaded only by these, so none of the
background work is parsed on a dashboard page.
Composition: no split-panel card. The page itself is the left panel - brand
and copy sit directly on the background - and the form is a single narrow
frosted panel on the right. The background is a field of data points, not
lines: a scan travels across lighting them, and pulses emanate from behind
the mark. DRISHTI means sight; the background is something being looked at. */
:root { --auth-field-h: 48px; }
.auth {
position: relative;
min-height: 100vh;
display: grid;
place-items: center;
padding: var(--sp-8) var(--sp-5);
overflow: hidden;
background: #FBFAFA;
}
.auth-bg {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
/* pale washes so the field is never evenly lit */
.bg-wash {
position: absolute;
inset: 0;
background:
radial-gradient(58% 48% at 17% 33%, rgba(245, 137, 32, .14), transparent 70%),
radial-gradient(52% 46% at 85% 76%, rgba(168, 37, 43, .10), transparent 70%),
radial-gradient(46% 40% at 72% 6%, rgba(64, 64, 126, .07), transparent 70%),
linear-gradient(168deg, #FDFCFC 0%, #F2F3F6 52%, #F8F2F1 100%);
}
/* ---- the data field ----------------------------------------------------
One dot per grid node. The second copy is the same grid in a hot colour,
revealed only through a soft band that travels across, so dots light up as
the scan reaches them and go quiet behind it. Same background-size on both,
so the lit dots land exactly on the resting ones. */
.bg-dots {
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(62, 24, 27, .17) 1.15px, transparent 1.6px);
background-size: 26px 26px;
background-position: center;
}
/* identical geometry to the resting dot - only the colour changes as the scan
passes. Any extra radius here reads as the field swelling, not lighting. */
.bg-dots-lit {
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(240, 77, 9, .42) 1.15px, transparent 1.6px);
background-size: 26px 26px;
background-position: center;
/* mask sized and positioned in vw, so the travel is exact rather than a
percentage of the container-minus-mask difference */
-webkit-mask-image: linear-gradient(100deg, transparent 0%, rgba(0, 0, 0, .3) 24%, #000 50%, rgba(0, 0, 0, .3) 76%, transparent 100%);
mask-image: linear-gradient(100deg, transparent 0%, rgba(0, 0, 0, .3) 24%, #000 50%, rgba(0, 0, 0, .3) 76%, transparent 100%);
-webkit-mask-size: 46vw 140%;
mask-size: 46vw 140%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
animation: dot-scan 9s linear infinite;
}
@keyframes dot-scan {
from { -webkit-mask-position: -50vw 50%; mask-position: -50vw 50%; }
to { -webkit-mask-position: 104vw 50%; mask-position: 104vw 50%; }
}
/* The copy sits straight on the field, so the field is quietened where it does.
Above both dot layers, so it holds the text legible at the scan's peak too. */
.bg-veil {
position: absolute;
inset: 0;
background:
/* under the centred masthead, on both pages */
radial-gradient(30% 19% at 50% 15%,
rgba(251, 250, 250, .94) 0%, rgba(251, 250, 250, .55) 54%, transparent 80%),
/* under the copy column */
radial-gradient(46% 54% at 26% 47%,
rgba(251, 250, 250, .94) 0%, rgba(251, 250, 250, .62) 46%, transparent 74%);
}
@media (max-width: 979px) {
/* stacked, the copy is under the panel rather than beside it */
.bg-veil {
background: radial-gradient(84% 62% at 50% 60%,
rgba(251, 250, 250, .92) 0%, rgba(251, 250, 250, .6) 48%, transparent 78%);
}
}
/* ---- pulses ------------------------------------------------------------
Rings emanating from behind the wordmark, one every 3s. transform and
opacity only, so they composite on the GPU. The 1px border thins with the
scale, which is why they read as a wave and not as four circles. */
.bg-pulse { position: absolute; left: 19%; top: 40%; width: 0; height: 0; }
.bg-pulse i {
position: absolute;
left: 0; top: 0;
width: 64vmax; height: 64vmax;
margin: -32vmax 0 0 -32vmax;
border: 1px solid rgba(168, 37, 43, .32);
border-radius: 50%;
opacity: 0;
animation: pulse-out 12s var(--ease) infinite;
}
.bg-pulse i:nth-child(2) { animation-delay: -3s; border-color: rgba(245, 137, 32, .36); }
.bg-pulse i:nth-child(3) { animation-delay: -6s; border-color: rgba(64, 64, 126, .26); }
.bg-pulse i:nth-child(4) { animation-delay: -9s; }
@keyframes pulse-out {
0% { transform: scale(.05); opacity: 0; }
14% { opacity: .95; }
100% { transform: scale(1); opacity: 0; }
}
/* ---- sheet -------------------------------------------------------------
Reference composition: logo top-left, centred page heading, a narrow form
column beside a wide content column, page-level copyright underneath.
Stacked below 980px, form first - the form is the task. */
.auth-sheet {
position: relative;
z-index: 1;
width: 100%;
max-width: 1120px;
display: grid;
gap: var(--sp-4);
}
/* logo and wordmark are one lockup: centred, with only sp-2 between them */
.auth-masthead { display: grid; justify-items: center; gap: var(--sp-2); }
.auth-lockup { justify-self: center; }
.auth-lockup img { display: block; height: 104px; width: auto; }
.auth-titles { text-align: center; }
.auth-pagetitle {
margin: 0;
font-family: var(--thsti-font-heading);
font-weight: 700;
font-size: clamp(21px, 2.4vw, 29px);
letter-spacing: .05em;
text-transform: uppercase;
color: var(--thsti-maroon);
}
.auth-pagesub { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--thsti-text-2nd); }
/* stretch (the grid default) is what equalises the two columns: the wide one is
identical on login and register and taller than either form, so both panels
end up the same height on both pages without a fixed value */
.auth-cols {
display: grid;
gap: var(--sp-5);
grid-template-areas: "panel" "detail";
align-items: stretch;
}
.auth-panel { grid-area: panel; }
.auth-detail { grid-area: detail; }
@media (min-width: 980px) {
/* 1:2, as the reference. Login keeps the form right, register mirrors it. */
.auth-cols {
grid-template-columns: 2fr 1fr;
grid-template-areas: "detail panel";
/* clears register's panel (~533px) and the wide column (~532px), so both
pages' rows come out the same height */
min-height: 560px;
}
.auth.is-left .auth-cols {
grid-template-columns: 1fr 2fr;
grid-template-areas: "panel detail";
}
.auth.is-left .bg-pulse { left: 79%; }
.auth.is-left .bg-veil {
background:
radial-gradient(30% 19% at 50% 15%,
rgba(251, 250, 250, .94) 0%, rgba(251, 250, 250, .55) 54%, transparent 80%),
radial-gradient(46% 54% at 74% 47%,
rgba(251, 250, 250, .94) 0%, rgba(251, 250, 250, .62) 46%, transparent 74%);
}
}
.auth-copy {
padding-top: var(--sp-4);
border-top: 1px solid rgba(62, 24, 27, .13);
text-align: center;
font-size: var(--fs-xs);
color: var(--thsti-text-2nd);
}
/* ---- login <-> register --------------------------------------------------
A cross-document view transition: both pages name the same three boxes, so
the browser tweens the panel from one column to the other rather than
repainting the page. Nothing to wire up per link. */
@media (prefers-reduced-motion: no-preference) {
@view-transition { navigation: auto; }
}
.auth-panel { view-transition-name: auth-panel; }
.auth-lockup { view-transition-name: auth-lockup; }
.auth-detail { view-transition-name: auth-detail; }
::view-transition-group(auth-panel),
::view-transition-group(auth-lockup),
::view-transition-group(auth-detail),
::view-transition-group(root),
::view-transition-old(auth-panel),
::view-transition-new(auth-panel),
::view-transition-old(auth-detail),
::view-transition-new(auth-detail),
::view-transition-old(auth-lockup),
::view-transition-new(auth-lockup),
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: .58s;
/* long tail, no overshoot - the box glides to a stop instead of arriving */
animation-timing-function: cubic-bezier(.32, .72, 0, 1);
}
/* where view transitions are unsupported, an entrance rather than nothing */
@supports not (view-transition-name: none) {
.auth-panel { animation: auth-rise .5s var(--ease) both; }
.auth-detail { animation: auth-rise .5s var(--ease) 70ms both; }
@keyframes auth-rise { from { opacity: 0; transform: translateY(14px); } }
}
/* ---- verification rows (register) -------------------------------------- */
.auth-inline { display: flex; align-items: stretch; gap: var(--sp-2); }
.auth-inline .input-icon { flex: 1 1 auto; min-width: 0; }
/* explicit height rather than relying on stretch, and the page's normal button
size - btn-sm made this read as a different, smaller control. One min-width
covers Send OTP / Resend OTP / Verify so relabelling cannot move the edge. */
.auth-inline .btn {
flex: 0 0 auto;
min-width: 104px;
height: var(--auth-field-h);
padding: 0 16px;
font-size: var(--fs-sm);
white-space: nowrap;
}
/* margin: 0 matters - base.css puts 16px under every , and these are
*/
.auth-msg { margin: 0; font-size: var(--fs-xs); font-weight: 700; line-height: 1.45; }
.auth-msg:empty { display: none; }
.auth-msg.is-ok { color: var(--thsti-success); }
.auth-msg.is-bad { color: var(--thsti-error); }
/* the attribute selector outranks the display below, so [hidden] still wins */
.otp-block { display: grid; gap: var(--sp-2); }
.otp-block[hidden] { display: none; }
.auth-verified { align-self: flex-start; }
.auth-verified[hidden] { display: none; }
.input.is-bad, .input.is-bad:hover { border-color: var(--thsti-error); }
.input.is-ok, .input.is-ok:hover { border-color: var(--thsti-success); }
/* ---- brand and copy, directly on the page ------------------------------ */
.auth-lockup { text-decoration: none; }
.auth-name {
display: block;
font-family: var(--thsti-font-heading);
font-weight: 700;
font-size: 24px;
letter-spacing: .04em;
line-height: 1.05;
color: var(--thsti-maroon);
}
.auth-sub {
display: block;
margin-top: 3px;
font-size: 10px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--thsti-text-2nd);
}
.auth-detail {
display: grid;
gap: var(--sp-4);
grid-template-rows: auto auto auto 1fr;
padding: var(--sp-6);
background: var(--thsti-panel);
border: 1px solid var(--thsti-border);
border-radius: var(--r-1);
}
.auth-title {
margin: 0;
max-width: 24ch;
font-family: var(--thsti-font-heading);
font-weight: 600;
font-size: clamp(24px, 2.6vw, 33px);
line-height: 1.13;
letter-spacing: -.012em;
color: var(--thsti-text);
}
.auth-lede { margin: 0; max-width: 48ch; font-size: var(--fs-body); line-height: 1.65; color: var(--thsti-text-2nd); }
/* numbered and ruled rather than bulleted with icons - it reads as an index
of what the platform does, and needs no second accent colour */
.auth-points { list-style: none; margin: 0; padding: 0; max-width: 48ch; }
.auth-points li {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--sp-4);
align-items: baseline;
padding: var(--sp-3) 0;
border-top: 1px solid rgba(62, 24, 27, .13);
font-size: var(--fs-sm);
line-height: 1.55;
color: var(--thsti-body);
}
.auth-points li:last-child { border-bottom: 1px solid rgba(62, 24, 27, .13); }
.pt-no {
font-family: var(--thsti-font-heading);
font-weight: 700;
font-size: 13px;
letter-spacing: .06em;
color: var(--thsti-orange-deep);
}
.auth-points b { font-weight: 700; color: var(--thsti-text); }
.auth-caption { margin: 0; align-self: end; text-align: center; font-size: var(--fs-xs); color: var(--thsti-text-2nd); }
/* ---- form panel --------------------------------------------------------
Frosted rather than solid, so the field it sits on stays faintly readable
through it and the panel belongs to the page instead of covering it. */
/* Opaque, not frosted: a captured view-transition snapshot carries no backdrop,
so backdrop-filter dropped out mid-flight and read as a flash. */
.auth-panel {
display: flex;
flex-direction: column;
width: 100%;
padding: var(--sp-6) var(--sp-5) var(--sp-5);
border: 1px solid var(--thsti-border);
border-radius: var(--r-1);
box-shadow: 0 1px 2px rgba(62, 24, 27, .07), 0 26px 62px rgba(62, 24, 27, .16);
background-color: var(--thsti-surface);
background-image: var(--thsti-gradient);
background-repeat: no-repeat;
background-size: 100% 3px;
background-position: top left;
}
.auth-head { margin-bottom: var(--sp-4); }
.auth-head h2 {
margin: 0;
font-family: var(--thsti-font-heading);
font-weight: 600;
font-size: 25px;
color: var(--thsti-text);
}
.auth-head p { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--thsti-text-2nd); }
.auth-fields { display: grid; gap: var(--sp-3); }
/* drishti.css:316-325 gives every .field, .field label and form .btn the
stacked spacing the long dashboard forms need. This panel does its own
spacing with grid gaps, so those are cancelled here rather than there:
.field + .field added 16px on top of the grid gap
.field > label added a 4px margin under every label
form .btn added 20px above every button - which is what pushed
Send OTP down inside its row and made the row 68px
Labels also lose the uppercase treatment, to match the reference's
"Employee Code:" style. */
.auth-panel .field + .field { margin-top: 0; }
.auth-panel .field > label {
margin-bottom: 0;
font-size: var(--fs-sm);
font-weight: 700;
letter-spacing: 0;
text-transform: none;
color: var(--thsti-text);
}
.auth-panel form .btn { margin-top: 0; }
/* a login is the one form where its two fields deserve the room */
.auth-panel .input { height: var(--auth-field-h); padding: 0 12px; font-size: var(--fs-body); }
.auth-panel .input-icon .input { padding-left: 40px; }
.auth-panel .input-icon .icon { left: 13px; width: 17px; height: 17px; }
/* the reference centres a normal-width submit rather than stretching it */
.auth-actions { display: flex; justify-content: center; }
.auth-actions .btn { padding: 11px 26px; }
/* only the button is centred - .auth-sep must stay full width or its rules
have nothing to flex into */
.auth-alt { margin-top: auto; display: grid; gap: var(--sp-2); }
.auth-alt .btn { justify-self: center; }
/* password and confirm share a row: it costs register one field of height, and
that is what lets both panels sit at a height a laptop viewport can hold */
/* groups the two password fields and their match message; single column,
because the form column is too narrow to split a password field in two */
.auth-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
.auth-row { display: flex; justify-content: flex-end; }
.auth-link { font-size: var(--fs-sm); font-weight: 700; }
.auth-reveal {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
display: grid;
place-items: center;
width: 32px; height: 32px;
background: none;
border: 0;
border-radius: var(--r-1);
color: var(--thsti-muted);
cursor: pointer;
transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.auth-reveal:hover { color: var(--thsti-navy); background: var(--thsti-panel); }
.auth-reveal .icon { width: 17px; height: 17px; }
.auth-reveal .when-shown { display: none; }
.auth-reveal.is-shown .when-hidden { display: none; }
.auth-reveal.is-shown .when-shown { display: block; }
.input-icon .input.has-reveal { padding-right: 42px; }
.auth-sep {
display: flex;
align-items: center;
gap: var(--sp-3);
margin: 0;
font-size: 10.5px;
font-weight: 700;
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--thsti-text-2nd);
}
.auth-sep::before, .auth-sep::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--thsti-rule); }
@media (max-width: 560px) {
.auth { padding: var(--sp-5) var(--sp-4); }
.auth-panel { padding: var(--sp-6) var(--sp-5) var(--sp-5); }
.auth-lockup img { height: 40px; }
.auth-name { font-size: 21px; }
.auth-head h2 { font-size: 22px; }
}
/* every animation here is decoration; hold it all still on request */
@media (prefers-reduced-motion: reduce) {
.bg-dots-lit, .bg-pulse i { animation: none; }
.bg-dots-lit, .bg-pulse { display: none; }
}
/* --- forgot password ----------------------------------------------------- */
/* three segments, filled up to the stage the session is on */
.auth-steps { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.auth-steps span {
flex: 1 1 0;
height: 3px;
background: var(--thsti-rule);
transition: background var(--dur-1) var(--ease);
}
.auth-steps span.is-done { background: var(--thsti-maroon); }
.auth-stepno {
margin: 0 0 var(--sp-4);
font-size: var(--fs-label);
font-weight: 700;
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--thsti-text-2nd);
}
/* resend and start-over are POSTs, so each needs its own form */
.auth-subform { display: grid; justify-items: center; }
.auth-panel .otp-input {
letter-spacing: .38em;
font-weight: 700;
font-family: var(--thsti-font-heading);
}