/* * login.css — Login page styles * All colors via design tokens. No hardcoded hex values. * Dark mode handled automatically via [data-theme="dark"] on . */ /* ── Entrance animation ────────────────────────────────────────────────────── */ @keyframes page-enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } /* ── Reset ─────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } /* ── Page shell ────────────────────────────────────────────────────────────── */ body { font-family: var(--font-sans); margin: 0; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--space-6); /* * Deep navy background with a NHC blue radial glow rising from below — * creates a sense of depth and grounds the floating card. * Static gradient: not in design tokens because it's a page-level * composition, not a reusable UI color. */ background: radial-gradient(ellipse 90% 55% at 50% 105%, rgba(0, 108, 183, 0.32) 0%, transparent 68%), linear-gradient(165deg, #001220 0%, #001e38 50%, #001220 100%); } /* ── Login wrapper ─────────────────────────────────────────────────────────── */ .login-page { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); width: 100%; max-width: 420px; animation: page-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; } /* ── Brand mark (lives ABOVE .card, unaffected by 2FA innerHTML replacement) ── */ .login-brand { display: flex; align-items: center; gap: var(--space-3); } /* NHC logo — transparent PNG on dark background */ .login-logo-img { width: 44px; height: auto; flex-shrink: 0; /* Slight drop shadow so the blue logo reads clearly on the dark background */ filter: drop-shadow(0 2px 8px rgba(0, 108, 183, 0.5)); } .login-brand-text { display: flex; flex-direction: column; gap: 2px; } .login-brand-name { font-size: 16px; font-weight: 700; color: #fff; letter-spacing: -0.01em; line-height: 1; } .login-brand-sub { font-size: 11px; color: rgba(255, 255, 255, 0.45); letter-spacing: 0.03em; line-height: 1; } /* ── Card ──────────────────────────────────────────────────────────────────── */ .card { width: 100%; background: var(--color-bg); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6) var(--space-6); /* Layered shadow: glow ring + depth + ambient */ box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 24px 64px rgba(0, 8, 24, 0.6), 0 8px 24px rgba(0, 8, 24, 0.3); } /* ── Form heading ──────────────────────────────────────────────────────────── */ .form-heading { font-size: 22px; font-weight: 700; color: var(--color-text); letter-spacing: -0.025em; line-height: 1.2; margin: 0 0 var(--space-5); } /* ── Form sub-text (e.g. "Enter your username…") ──────────────────────────── */ .form-subtext { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin: calc(-1 * var(--space-2)) 0 var(--space-4); line-height: 1.5; } /* ── Labels ────────────────────────────────────────────────────────────────── */ label, .form-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: var(--space-1); } .form-label-note { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--color-text-tertiary); } /* ── Inputs ────────────────────────────────────────────────────────────────── */ input:not([type="checkbox"]), .form-input { width: 100%; padding: 13px var(--space-4); margin-bottom: var(--space-4); background: var(--color-bg-tertiary); border: 1.5px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--font-size-sm); font-family: var(--font-sans); color: var(--color-text); transition: border-color 0.15s ease, box-shadow 0.15s ease; -webkit-appearance: none; appearance: none; } input:not([type="checkbox"])::placeholder { color: var(--color-text-tertiary); } input:not([type="checkbox"]):focus, .form-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-subtle); } /* ── Primary button ────────────────────────────────────────────────────────── */ button, .btn-primary { display: block; width: 100%; background: var(--color-primary); color: #fff; border: none; padding: 14px var(--space-4); font-size: var(--font-size-sm); font-weight: 600; font-family: var(--font-sans); border-radius: var(--radius-md); cursor: pointer; letter-spacing: 0.01em; transition: background 0.15s ease, transform 0.08s ease; -webkit-appearance: none; appearance: none; text-align: center; } button:hover, .btn-primary:hover { background: var(--color-primary-hover); } button:active, .btn-primary:active { transform: scale(0.985); } /* ── Form links ────────────────────────────────────────────────────────────── */ .form-links { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); margin-top: var(--space-3); text-align: center; } .form-link, .form-links a { color: var(--color-primary); text-decoration: none; font-size: var(--font-size-xs); font-weight: 500; } .form-link:hover, .form-links a:hover { text-decoration: underline; } /* ── Status messages (classes set by login.js) ─────────────────────────────── */ .status { min-height: 20px; font-size: var(--font-size-xs); margin-top: var(--space-2); text-align: center; font-weight: 500; } .status.err { color: var(--color-danger); } .status.ok { color: var(--color-success); } /* ── Inline checkbox row (2FA "remember device") ───────────────────────────── */ .inline-row { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-1) 0 var(--space-3); } .inline-row input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; margin: 0; accent-color: var(--color-primary); cursor: pointer; } /* Override the global label rule for the inline checkbox label */ .inline-row label, .inline-label { font-size: var(--font-size-xs); font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--color-text-secondary); cursor: pointer; margin: 0; } /* ── Hint text ─────────────────────────────────────────────────────────────── */ .hint, .form-hint { font-size: 11px; color: var(--color-text-tertiary); margin: var(--space-4) 0 0; text-align: center; line-height: 1.55; } /* ── 2FA — QR code image ───────────────────────────────────────────────────── */ .qr-code { width: 176px; height: 176px; border-radius: var(--radius-md); border: 1px solid var(--color-border); padding: var(--space-2); background: #fff; display: block; margin: 0 auto; } /* ── 2FA — TOTP secret display ─────────────────────────────────────────────── */ .totp-secret { font-size: var(--font-size-xs); color: var(--color-text-secondary); text-align: center; word-break: break-all; margin: var(--space-2) 0 var(--space-4); line-height: 1.5; } .totp-secret code { font-family: var(--font-mono); font-size: var(--font-size-mono); background: var(--color-bg-tertiary); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 2px var(--space-1); } /* ── 2FA — Backup codes ────────────────────────────────────────────────────── */ .backup-codes { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin: var(--space-3) 0; } .backup-code { display: inline-block; font-family: var(--font-mono); font-size: var(--font-size-mono); background: var(--color-bg-tertiary); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); color: var(--color-text); letter-spacing: 0.04em; } /* ── Footer ────────────────────────────────────────────────────────────────── */ .login-footer { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-border); font-size: 11px; text-align: center; color: var(--color-text-tertiary); } /* ── Dark mode card shadow refinement ──────────────────────────────────────── */ [data-theme="dark"] .card { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 24px 64px rgba(0, 0, 0, 0.75), 0 8px 24px rgba(0, 0, 0, 0.5); } /* ── Mobile ────────────────────────────────────────────────────────────────── */ @media (max-width: 480px) { body { padding: var(--space-4); place-items: start center; padding-top: var(--space-8); } .card { padding: var(--space-6) var(--space-4) var(--space-4); } }