/* ═══════════════════════════════════════════════════════════════
WScan Login — Production CSS
Server-rendered, zero dependencies (plain CSS, no JS required)
Font prerequisite — add to :
═══════════════════════════════════════════════════════════════ */
/* ── 0. Box-model reset ─────────────────────────────────────── */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* ── 1. Design tokens ───────────────────────────────────────── */
:root {
/* Ink */
--ink: #0d0c22;
--ink-2: #6e6d7a;
--ink-muted: #9e9ea7;
/* Brand — MICRO-ACCENT ONLY (dot/mark), never on buttons or large surfaces */
--brand: #ea4c89;
--brand-soft: #fde7ef;
/* Surfaces */
--surface: #ffffff;
--surface-alt: #f3f3f4;
--surface-2: #fafafb;
/* Borders */
--border: #e7e7e9;
--border-strong: #d8d8db;
/* Status */
--danger: #c4321f;
--danger-soft: #fde7e3;
--success: #1f9d6b;
/* Typography */
--font-sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
/* Radius */
--radius-card: 12px;
--radius-btn: 8px;
--radius-pill: 999px;
/* Shadows */
--shadow-card: 0 1px 3px rgba(13,12,34,.06), 0 8px 24px rgba(13,12,34,.06);
--shadow-sm: 0 1px 2px rgba(13,12,34,.04), 0 1px 1px rgba(13,12,34,.03);
}
/* ── 2. Page shell ──────────────────────────────────────────── */
.login-page {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--surface-2);
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.5;
color: var(--ink);
padding: 24px;
font-variant-numeric: tabular-nums;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-wrap: pretty;
}
/* ── 3. Card ────────────────────────────────────────────────── */
.login-card {
width: 100%;
max-width: 400px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
padding: 32px;
}
/* ── 4. Logo lockup ─────────────────────────────────────────── */
.login-logo {
display: flex;
align-items: center;
gap: 7px;
margin-bottom: 28px;
}
.login-logo__dot {
width: 7px;
height: 7px;
border-radius: var(--radius-pill);
background: var(--brand); /* sole use of --brand */
flex-shrink: 0;
margin-top: 0.5px; /* optical baseline correction */
}
.login-logo__wordmark {
font-size: 15px;
font-weight: 600;
color: var(--ink);
letter-spacing: -0.025em;
line-height: 1;
}
/* ── 5. Header ──────────────────────────────────────────────── */
.login-header {
margin-bottom: 24px;
}
.login-title {
font-size: 20px;
font-weight: 600;
color: var(--ink);
letter-spacing: -0.03em;
line-height: 1.2;
margin-bottom: 4px;
}
.login-subtitle {
font-size: 13px;
color: var(--ink-2);
font-weight: 400;
letter-spacing: -0.01em;
}
/* ── 6. Error block ─────────────────────────────────────────── */
.login-error {
display: none;
background: var(--danger-soft);
color: var(--danger);
border-radius: var(--radius-btn);
padding: 11px 12px;
font-size: 13px;
line-height: 1.45;
font-weight: 500;
margin-bottom: 20px;
}
/* Add .is-visible to show (e.g. on ModelState error in Razor) */
.login-error.is-visible {
display: block;
}
/* ── 7. Form ────────────────────────────────────────────────── */
.login-form {
display: flex;
flex-direction: column;
gap: 16px;
}
/* ── 8. Field wrapper ───────────────────────────────────────── */
.login-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.login-label {
font-size: 13px;
font-weight: 500;
color: var(--ink);
letter-spacing: -0.01em;
}
/* ── 9. Input ───────────────────────────────────────────────── */
.login-input-wrap {
position: relative;
display: flex;
align-items: center;
}
.login-input {
width: 100%;
height: 44px;
padding: 0 12px;
border: 1px solid var(--border);
border-radius: var(--radius-btn);
background: var(--surface-alt);
font-family: var(--font-sans);
font-size: 14px;
color: var(--ink);
appearance: none;
-webkit-appearance: none;
outline: none;
transition: border-color 0.12s ease, background 0.12s ease;
font-variant-numeric: tabular-nums;
}
.login-input::placeholder {
color: var(--ink-muted);
font-weight: 400;
}
.login-input:hover:not(:focus):not(.is-invalid) {
border-color: var(--border-strong);
}
.login-input:focus {
background: var(--surface);
border-color: var(--border-strong);
outline: 2px solid var(--ink); /* rule 3: focus ring nero */
outline-offset: 2px;
}
/* Invalid state — driven by .is-invalid class (set server-side or via JS) */
.login-input.is-invalid {
border-color: var(--danger);
background: var(--surface);
}
.login-input.is-invalid:focus {
outline-color: var(--danger);
}
/* Input inside .login-input-wrap: extra right padding for toggle button */
.login-input-wrap > .login-input {
padding-right: 44px;
}
/* ── 10. Password visibility toggle (optional) ──────────────── */
.login-input-action {
position: absolute;
right: 0;
top: 0;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
border-radius: 0 var(--radius-btn) var(--radius-btn) 0;
cursor: pointer;
color: var(--ink-muted);
transition: background 0.1s ease, color 0.1s ease;
padding: 0;
}
.login-input-action:hover {
background: var(--surface-alt); /* rule 7: hover ghost → --surface-alt */
color: var(--ink-2);
}
.login-input-action:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 2px;
border-radius: var(--radius-btn);
}
.login-input-action:active {
background: var(--border);
}
/* ── 11. Remember-me row ────────────────────────────────────── */
.login-row {
display: flex;
align-items: center;
}
.login-check {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
user-select: none;
}
.login-check__input {
width: 16px;
height: 16px;
border-radius: 4px;
accent-color: var(--ink);
cursor: pointer;
flex-shrink: 0;
}
.login-check__label {
font-size: 13px;
color: var(--ink-2);
font-weight: 400;
}
/* ── 12. Primary CTA ────────────────────────────────────────── */
/* rule 1: SFONDO --ink, testo bianco. MAI pink. */
.login-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 44px;
background: var(--ink);
color: #ffffff;
border: none;
border-radius: var(--radius-btn);
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
letter-spacing: -0.01em;
cursor: pointer;
outline: none;
transition: background 0.12s ease;
margin-top: 4px;
}
.login-btn:hover {
background: #07061a; /* leggermente più scuro di --ink */
}
.login-btn:active {
background: #040311;
}
/* rule 3: focus ring nero */
.login-btn:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 2px;
}
.login-btn:disabled,
.login-btn.is-loading {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* Loading inner text fades out; spinner appears */
.login-btn__text {
transition: opacity 0.12s;
}
.login-btn.is-loading .login-btn__text {
opacity: 0;
}
.login-btn__spinner {
position: absolute;
inset: 0;
display: none;
align-items: center;
justify-content: center;
}
.login-btn.is-loading .login-btn__spinner {
display: flex;
}
.login-btn__spinner::after {
content: '';
width: 16px;
height: 16px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: #ffffff;
border-radius: var(--radius-pill);
animation: wscan-spin 0.65s linear infinite;
}
@keyframes wscan-spin {
to { transform: rotate(360deg); }
}
/* ── 13. Responsive ─────────────────────────────────────────── */
@media (max-width: 480px) {
.login-card {
padding: 24px 20px;
}
.login-title {
font-size: 18px;
}
}
/* ═══════════════════════════════════════════════════════════════
AUTH FLOW EXTENSION — Password Recovery Pages
Extends wscan-login.css — do NOT modify existing .login-* blocks
Routes: /Account/ForgotPassword · /Account/ResetPassword
═══════════════════════════════════════════════════════════════ */
/* ── A. New status tokens ────────────────────────────────────── */
:root {
--warn: #d97706;
--warn-soft: #fef3c7;
--success-soft: #d1fae5;
}
/* ── B. Ghost / secondary button ────────────────────────────── */
/* Shared across ForgotPassword and ResetPassword pages.
Works on both