/* Pakstoor :: login-premium.css :: v1.0-000011 :: 2026-05-31 */
/* ============================================================
LOGIN PREMIUM LAYER
------------------------------------------------------------
Layered override on top of login.css. Activated by the
"auth-premium" class on .
IMPORTANT: .auth-page-login is also on , not a child,
so all selectors here use `body.auth-premium` as a single
compound selector and target descendants. (Earlier versions
incorrectly nested .auth-page-login as a child selector and
matched nothing — none of the card styling rendered.)
Composition:
- .auth-body-grid is THE unified card. Solid bg.
- Form + ladder are internal blocks inside the card.
- Desktop ≥1281px: form | gold-divider | ladder side-by-side.
- Tablet 701-1280px: stacked vertically inside the same card,
ladder visible (base login.css hides it; we override).
- Mobile ≤700px: tighter padding, mobile brand strip above.
- Card is vertically centred in the right column (no orphan
bottom space).
- Hex grid stays as ambient background behind everything,
quieter than before (0.025 opacity, set in pks-bg-hex.js).
============================================================ */
/* ════════════════════════════════════════════════════════════
1. RIGHT-COLUMN SHELL — release the 100dvh straitjacket
──────────────────────────────────────────────────────────── */
body.auth-premium .auth-form-wrap {
height: auto !important;
max-height: none !important;
min-height: 100dvh !important;
overflow: visible !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
/* ════════════════════════════════════════════════════════════
2. THE UNIFIED CARD
──────────────────────────────────────────────────────────── */
body.auth-premium .auth-body-grid {
/* 2026-05-24: card trial removed — transparent surface, no
border, no shadow. Keep the grid structure + padding so the
internal form + ladder layout still composes. */
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
position: relative;
isolation: isolate;
margin: auto !important;
flex: 0 0 auto !important;
align-self: center !important;
width: 100% !important;
max-width: 960px !important;
overflow: visible !important;
}
/* DESKTOP ≥1281: 2-col + gold divider, side-by-side */
@media (min-width: 1281px) {
body.auth-premium .auth-body-grid {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 1px minmax(0, 320px) !important;
column-gap: 36px !important;
padding: 40px 44px !important;
align-items: stretch !important;
}
body.auth-premium .auth-body-grid::before {
content: '';
grid-column: 2;
grid-row: 1 / -1;
width: 1px;
justify-self: center;
background: linear-gradient(
180deg,
transparent 0%,
rgba(217, 166, 37, 0.16) 14%,
rgba(217, 166, 37, 0.26) 50%,
rgba(217, 166, 37, 0.16) 86%,
transparent 100%
);
}
body.auth-premium .auth-form-container { grid-column: 1; }
body.auth-premium .auth-trust-ladder { grid-column: 3; }
}
/* TABLET 701-1280: stack inside the same card */
@media (max-width: 1280px) {
body.auth-premium .auth-body-grid {
display: flex !important;
flex-direction: column !important;
max-width: 540px !important;
padding: 36px 36px 30px !important;
gap: 26px !important;
}
/* Base login.css hides the ladder below 1280 — we want it shown */
body.auth-premium .auth-trust-ladder {
display: block !important;
}
body.auth-premium .auth-form-container {
padding-bottom: 26px !important;
border-bottom: 1px solid rgba(217, 166, 37, 0.18) !important;
}
}
/* MOBILE ≤700: tighter, less radius, hug the viewport edges */
@media (max-width: 700px) {
body.auth-premium .auth-body-grid {
padding: 26px 22px 22px !important;
border-radius: 16px !important;
max-width: none !important;
margin: 16px 14px !important;
}
body.auth-premium .auth-form-container {
padding-bottom: 22px !important;
}
}
/* ════════════════════════════════════════════════════════════
3. INTERNAL BLOCKS — strip their own card styling so the
unified card carries everything.
──────────────────────────────────────────────────────────── */
body.auth-premium .auth-form-container,
body.auth-premium .auth-trust-ladder {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
border-radius: 0 !important;
margin: 0 !important;
isolation: auto !important;
}
/* Release the form-container from the overflow-y:auto + max-height
constraint that base login.css applies (so the inner scroll
trap doesn't interfere with native pickers like input[type="date"]
whose popup may otherwise be clipped or mispositioned). */
body.auth-premium .auth-form-container {
overflow: visible !important;
max-height: none !important;
}
/* ════════════════════════════════════════════════════════════
4. HEX PULSE — one-time gold radial wave on page load
──────────────────────────────────────────────────────────── */
body.auth-premium .auth-pulse {
position: fixed;
pointer-events: none;
z-index: 0;
top: 50%;
left: 65%;
width: 0;
height: 0;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(217, 166, 37, 0.28) 0%,
rgba(217, 166, 37, 0.14) 22%,
rgba(242, 196, 26, 0.05) 48%,
transparent 65%
);
filter: blur(2px);
opacity: 0;
transform: translate(-50%, -50%);
animation: auth-pulse-wave 1400ms cubic-bezier(0.16, 1, 0.3, 1) 280ms forwards;
}
@keyframes auth-pulse-wave {
0% { width: 80px; height: 80px; opacity: 0; }
20% { opacity: 0.85; }
60% { width: 1400px; height: 1400px; opacity: 0.5; }
100% { width: 2200px; height: 2200px; opacity: 0; }
}
@media (max-width: 980px) {
body.auth-premium .auth-pulse { left: 50%; }
}
/* ════════════════════════════════════════════════════════════
5. LADDER HEX MARKERS
──────────────────────────────────────────────────────────── */
body.auth-premium .auth-trust-ladder .ladder-step {
grid-template-columns: 42px 1fr !important;
/* 7 steps live in this card now, so each step gets less
vertical breathing room. 24px keeps the rhythm tight but
readable. */
padding-bottom: 24px !important;
}
body.auth-premium .auth-trust-ladder .ladder-step:last-child {
padding-bottom: 0 !important;
}
body.auth-premium .auth-trust-ladder .ladder-step:not(:last-child)::after {
left: 20.5px !important;
top: 44px !important;
bottom: 6px !important;
background: linear-gradient(
to bottom,
rgba(217, 166, 37, 0.30) 0%,
rgba(217, 166, 37, 0.08) 100%
) !important;
}
body.auth-premium .auth-trust-ladder .pks-ladder-dot {
left: 16.5px !important;
}
body.auth-premium .auth-trust-ladder .ladder-marker {
background: rgba(217, 166, 37, 0.08) !important;
border: 1px solid rgba(217, 166, 37, 0.32) !important;
clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);
border-radius: 0 !important;
width: 42px !important;
height: 42px !important;
display: flex !important;
align-items: center;
justify-content: center;
position: relative;
flex-shrink: 0;
transition: background 220ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
body.auth-premium .auth-trust-ladder .ladder-marker svg {
display: none;
}
body.auth-premium .auth-trust-ladder .ladder-marker::before {
font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--gold, #D9A625);
line-height: 1;
}
body.auth-premium .auth-trust-ladder .ladder-step:nth-child(1) .ladder-marker::before { content: '01'; }
body.auth-premium .auth-trust-ladder .ladder-step:nth-child(2) .ladder-marker::before { content: '02'; }
body.auth-premium .auth-trust-ladder .ladder-step:nth-child(3) .ladder-marker::before { content: '03'; }
body.auth-premium .auth-trust-ladder .ladder-step:nth-child(4) .ladder-marker::before { content: '04'; }
body.auth-premium .auth-trust-ladder .ladder-step:nth-child(5) .ladder-marker::before { content: '05'; }
body.auth-premium .auth-trust-ladder .ladder-step:nth-child(6) .ladder-marker::before { content: '06'; }
body.auth-premium .auth-trust-ladder .ladder-step:nth-child(7) .ladder-marker::before { content: '07'; }
body.auth-premium .auth-trust-ladder .ladder-step:hover .ladder-marker {
background: rgba(217, 166, 37, 0.18) !important;
transform: translateY(-1px);
}
/* Ladder text */
body.auth-premium .auth-trust-ladder .ladder-eyebrow {
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(220, 230, 245, 0.55);
margin-bottom: 18px;
display: flex;
align-items: center;
gap: 8px;
}
body.auth-premium .auth-trust-ladder .ladder-dot {
width: 5px;
height: 5px;
background: var(--gold, #D9A625);
border-radius: 50%;
box-shadow: 0 0 8px rgba(217, 166, 37, 0.55);
}
body.auth-premium .auth-trust-ladder .ladder-title {
font-weight: 600;
font-size: 14px;
letter-spacing: -0.005em;
margin: 0 0 4px;
color: rgba(232, 240, 250, 0.96);
}
body.auth-premium .auth-trust-ladder .ladder-desc {
font-size: 12.5px;
line-height: 1.55;
color: rgba(220, 230, 245, 0.58);
margin: 0;
}
/* ════════════════════════════════════════════════════════════
6. REFINED FORM FOCUS + SUBMIT
──────────────────────────────────────────────────────────── */
body.auth-premium .form-group input:focus {
border-color: var(--gold, #D9A625) !important;
box-shadow:
0 0 0 4px rgba(217, 166, 37, 0.14),
inset 0 0 0 1px rgba(217, 166, 37, 0.5) !important;
outline: none !important;
transition:
border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}
body.auth-premium .btn-submit {
transition:
transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
background-color 180ms ease !important;
}
body.auth-premium .btn-submit:hover {
transform: translateY(-1px);
box-shadow:
0 1px 0 rgba(0, 0, 0, 0.22),
0 12px 28px -8px rgba(217, 168, 0, 0.42),
0 4px 10px -2px rgba(217, 168, 0, 0.22) !important;
}
body.auth-premium .btn-submit:active {
transform: translateY(0);
transition-duration: 90ms;
}
body.auth-premium .btn-submit:not(:hover):not(:active):not(:disabled) {
animation: none !important;
}
/* ════════════════════════════════════════════════════════════
7. MOBILE BRAND STRIP (≤980px) — lives outside the card,
above it.
──────────────────────────────────────────────────────────── */
.auth-mobile-strip { display: none; }
@media (max-width: 980px) {
body.auth-premium .auth-mobile-strip {
display: flex !important;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 10px;
margin: 24px auto 0 !important;
padding: 0 4px;
max-width: 420px;
position: relative;
z-index: 1;
order: -1; /* above the form + ladder inside the flex column */
}
body.auth-premium .auth-mobile-strip-hex {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);
background: rgba(217, 166, 37, 0.10);
box-shadow: inset 0 0 0 1px rgba(217, 166, 37, 0.32);
}
body.auth-premium .auth-mobile-strip-hex svg {
width: 14px;
height: 14px;
color: var(--gold, #D9A625);
}
body.auth-premium .auth-mobile-strip-slogan {
font-family: var(--font-display, 'Oswald', sans-serif);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(232, 240, 250, 0.85);
text-align: center;
}
body.auth-premium .auth-mobile-strip-slogan em {
color: var(--gold, #D9A625);
font-style: normal;
}
body.auth-premium .auth-mobile-strip-rule {
width: 40px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(217, 166, 37, 0.48), transparent);
}
}
/* ════════════════════════════════════════════════════════════
8. REDUCED MOTION
──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
body.auth-premium .auth-pulse { display: none !important; }
body.auth-premium .form-group input:focus,
body.auth-premium .btn-submit,
body.auth-premium .auth-trust-ladder .ladder-marker {
transition: none !important;
}
body.auth-premium .btn-submit:hover {
transform: none !important;
}
}
/* ════════════════════════════════════════════════════════════
9. SIGNUP WIZARD (3 steps, progress bar)
──────────────────────────────────────────────────────────── */
body.auth-premium .signup-progress {
margin: 0 0 24px;
}
body.auth-premium .signup-progress-track {
width: 100%;
height: 3px;
background: rgba(255, 255, 255, 0.06);
border-radius: 999px;
overflow: hidden;
position: relative;
}
body.auth-premium .signup-progress-fill {
position: absolute;
inset: 0 auto 0 0;
width: 33.33%;
background: linear-gradient(90deg, var(--gold-deep, #B88417), var(--gold, #D9A625));
border-radius: 999px;
transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
body.auth-premium .signup-progress-label {
font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(220, 230, 245, 0.55);
margin-top: 10px;
display: flex;
align-items: center;
gap: 6px;
}
body.auth-premium .signup-progress-label strong {
color: var(--gold, #D9A625);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
body.auth-premium .signup-progress-sep {
opacity: 0.45;
}
/* Step containers — hidden until active.
Opacity-only entrance (no transform) — using transform here
would persist a stacking context after the animation finishes
(because of `both`), which clips/mis-positions the native
calendar popup in some browsers. Plain
opacity fade avoids that entirely. */
body.auth-premium .signup-step {
display: none;
animation: signup-step-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
body.auth-premium .signup-step.is-active {
display: block;
}
body.auth-premium .signup-step[hidden] {
display: none !important;
}
@keyframes signup-step-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
/* Back + Continue row at the bottom of steps 2 and 3. */
body.auth-premium .signup-step-actions {
display: flex;
gap: 12px;
align-items: center;
margin-top: 6px;
}
body.auth-premium .signup-step-actions .btn-submit {
flex: 1;
margin: 0;
}
body.auth-premium .signup-step-back {
display: inline-flex;
align-items: center;
gap: 6px;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.10);
color: rgba(220, 230, 245, 0.7);
padding: 11px 16px;
border-radius: 8px;
font-family: inherit;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.02em;
cursor: pointer;
transition:
border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
color 180ms ease,
background 180ms ease;
}
body.auth-premium .signup-step-back:hover {
border-color: var(--gold, #D9A625);
color: var(--gold, #D9A625);
background: rgba(217, 166, 37, 0.04);
}
body.auth-premium .signup-step-back svg {
flex-shrink: 0;
}
/* Inline per-field error rendering used by the wizard. */
body.auth-premium .form-error {
margin-top: 6px;
font-size: 12px;
line-height: 1.4;
color: #E8A472;
letter-spacing: 0.01em;
animation: pks-error-shake 320ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
/* Subtle horizontal shake on the offending field. Strictly capped
in amplitude (max 3px) so it reads as gentle correction, not
alarm. */
body.auth-premium .form-group input.is-error,
body.auth-premium .form-group select.is-error {
border-color: rgba(232, 164, 114, 0.7) !important;
animation: pks-field-shake 320ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes pks-error-shake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-3px); }
40% { transform: translateX(3px); }
60% { transform: translateX(-2px); }
80% { transform: translateX(1px); }
}
@keyframes pks-field-shake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-2px); }
40% { transform: translateX(2px); }
60% { transform: translateX(-1px); }
}
/* ════════════════════════════════════════════════════════════
10. DATE-OF-BIRTH 3-DROPDOWN
──────────────────────────────────────────────────────────── */
body.auth-premium .dob-fields {
display: grid;
grid-template-columns: minmax(72px, 88px) minmax(0, 1fr) minmax(82px, 100px);
gap: 8px;
}
body.auth-premium .dob-select {
width: 100%;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 8px;
padding: 11px 32px 11px 12px;
color: var(--ink, #ECEFF2);
font-family: inherit;
/* R1 followup (2026-05-31): bumped from 13.5px → 16px. iOS
Safari zooms the viewport on focus when a