/* ========================================================================== auth.css — Unified Login Page styling (white + maroon brand system). Ref: [UIUX] §8.2 (Unified Login Page), §2.3 (Curvy Structure/Glassmorphism) Light mode: warm-white backdrop with maroon accents and a crisp white card. Dark mode: deep maroon-tinted charcoal with a floating glass card. Fully theme-aware via [data-theme] on . ========================================================================== */ .auth-screen { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient( ellipse at 18% 12%, rgba(128, 26, 46, 0.14), transparent 55% ), radial-gradient( ellipse at 85% 82%, rgba(150, 96, 59, 0.16), transparent 52% ), linear-gradient(160deg, #faf8f7 0%, #f2edeb 55%, #f6f2f0 100%); overflow: hidden; } [data-theme="dark"] .auth-screen { background: radial-gradient( ellipse at 18% 12%, rgba(207, 102, 116, 0.16), transparent 55% ), radial-gradient( ellipse at 85% 82%, rgba(194, 144, 107, 0.14), transparent 52% ), linear-gradient(160deg, #120e10 0%, #0e0b0c 55%, #120e10 100%); } /* Floating language control — always visible, works on mobile */ .auth-lang-top { position: absolute; top: 18px; right: 18px; z-index: 3; } @media (max-width: 479px) { .auth-lang-top { top: 12px; right: 12px; } } .auth-lang-top .hd-lang-toggle { width: auto; gap: 7px; padding: 0 12px; background: var(--surface-card); border-color: var(--border-color); color: var(--text-secondary); box-shadow: var(--shadow-sm); } .auth-lang-top .hd-lang-toggle:hover { color: #fff; background: var(--brand-gradient); border-color: transparent; box-shadow: var(--shadow-glow); } .auth-lang-top .hd-lang-current { color: inherit; } .auth-card { position: relative; z-index: 2; width: 100%; max-width: 424px; padding: 40px 34px; border-radius: 26px; background: var(--surface-card); border: 1px solid var(--border-color); box-shadow: var(--shadow-lg); text-align: center; animation: hedwig-auth-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; } [data-theme="dark"] .auth-card { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); } @keyframes hedwig-auth-in { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .auth-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 28px; } .auth-brand-logo { display: block; width: auto; max-width: 260px; height: auto; max-height: 84px; object-fit: contain; /* Rectangle logo — intentionally not rounded/cropped into a circle */ border-radius: 0; } @media (max-width: 479px) { .auth-brand-logo { max-width: 200px; max-height: 64px; } } .auth-brand-tagline { font-size: var(--fs-sm); color: var(--text-secondary); margin: 0; } .auth-company-badge { margin-top: 12px; padding: 8px 16px; border-radius: 999px; background: rgba(128, 26, 46, 0.08); color: var(--brand-primary); font-size: var(--fs-sm); font-weight: 600; } [data-theme="dark"] .auth-company-badge { background: rgba(207, 102, 116, 0.14); color: var(--brand-primary); } .auth-field { text-align: left; margin-bottom: 20px; } .auth-field label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); margin-bottom: 6px; } .auth-input-wrap { position: relative; } .auth-input-wrap .fa-solid { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: var(--fs-sm); z-index: 1; } .auth-input-wrap input { width: 100%; box-sizing: border-box; padding: 12px 14px 12px 40px; border-radius: 14px; font-size: var(--fs-base); color: var(--text-primary); background: var(--surface-card); border: 1px solid var(--border-color); transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .auth-input-wrap input::placeholder { color: var(--text-muted); } .auth-input-wrap input:focus { outline: none; border-color: var(--brand-primary); background: var(--surface-card); box-shadow: 0 0 0 4px var(--focus-ring); } .auth-input-wrap input.is-invalid { border-color: var(--color-danger); } .auth-input-wrap input.is-valid { border-color: var(--color-success); } /* -------------------------------------------------------------------------- 6-box OTP-style password input -------------------------------------------------------------------------- */ .otp-row { display: flex; gap: 8px; justify-content: center; margin: 4px 0 8px; } .otp-box { width: 44px; height: 52px; text-align: center; font-size: var(--fs-xl); font-weight: 700; padding: 0; color: var(--text-primary); background: var(--surface-card); border-radius: 14px; border: 1px solid var(--border-color); transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; } .otp-box:focus { outline: none; border-color: var(--brand-primary); background: var(--surface-card-2); box-shadow: 0 0 0 4px var(--focus-ring); transform: translateY(-1px); } .otp-box.is-invalid { border-color: var(--color-danger); animation: hedwig-otp-shake 0.3s ease; } @keyframes hedwig-otp-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } @media (prefers-reduced-motion: reduce) { .otp-box.is-invalid { animation: none; } } .auth-resend { margin: 4px 0 20px; font-size: var(--fs-sm); text-align: center; } .auth-resend-link { background: none; border: none; padding: 0; color: var(--brand-primary); font-weight: 600; font-size: var(--fs-sm); cursor: pointer; } .auth-resend-link:hover { text-decoration: underline; } .auth-resend-link:disabled { color: var(--text-muted); cursor: default; text-decoration: none; } .auth-submit { width: 100%; padding: 13px 20px; font-size: var(--fs-base); background: var(--brand-gradient); color: #fff; border: none; box-shadow: 0 10px 24px rgba(128, 26, 46, 0.28); } .auth-submit:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(128, 26, 46, 0.34); } [data-theme="dark"] .auth-submit { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4); } .auth-submit .fa-spinner { animation: hedwig-spin 0.8s linear infinite; } @keyframes hedwig-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .auth-submit .fa-spinner { animation-duration: 2s; } } /* -------------------------------------------------------------------------- Inline error / status states -------------------------------------------------------------------------- */ .auth-error { display: none; align-items: flex-start; gap: 8px; text-align: left; padding: 11px 14px; margin-bottom: 20px; border-radius: 12px; background: var(--color-danger-bg); border: 1px solid rgba(217, 59, 59, 0.25); color: var(--color-danger); font-size: var(--fs-sm); } .auth-error.is-visible { display: flex; } .auth-error .fa-solid { margin-top: 2px; } .auth-hint { display: flex; align-items: flex-start; gap: 8px; text-align: left; padding: 11px 14px; margin-bottom: 20px; border-radius: 12px; background: var(--color-info-bg); border: 1px solid rgba(154, 74, 30, 0.2); color: var(--color-info); font-size: var(--fs-sm); } .auth-hint.is-hidden { display: none; } .auth-lockout { display: none; align-items: flex-start; gap: 10px; text-align: left; padding: 14px; margin-bottom: 20px; border-radius: 12px; background: var(--color-warning-bg); border: 1px solid rgba(251, 191, 36, 0.28); color: var(--color-warning); font-size: var(--fs-sm); } .auth-lockout.is-hidden { display: none; } .auth-lockout.is-visible { display: flex; } .auth-lockout .fa-solid { margin-top: 2px; font-size: var(--fs-lg); } .auth-lockout-body { display: flex; flex-direction: column; gap: 4px; } .auth-lockout-timer { font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 2px; } .auth-footer { margin-top: 22px; font-size: var(--fs-xs); color: var(--text-muted); } @media (max-width: 479px) { .auth-card { padding: 32px 20px; } .otp-box { width: 40px; height: 48px; } } /* -------------------------------------------------------------------------- Auth shell — pairs the login card with a promo panel on wide screens -------------------------------------------------------------------------- */ .auth-shell { position: relative; z-index: 2; width: min(1180px, 100%); min-height: 650px; display: grid; grid-template-columns: 1.2fr 480px; background: var(--surface-card); border-radius: 28px; overflow: hidden; box-shadow: var(--shadow-lg); } [data-theme="dark"] .auth-shell { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); } .auth-shell .auth-card { box-shadow: none; border-radius: 0; border: none; animation: none; } .auth-promo { display: flex; flex-direction: column; justify-content: flex-start; padding: 70px 60px; background: var(--brand-gradient); color: #fff; gap: 32px; overflow: hidden; position: relative; } .auth-promo-title { color: #fff; font-size: 34px; font-weight: 800; line-height: 1.25; margin: 0; max-width: 500px; } .auth-promo-sub { margin: 0; font-size: 16px; line-height: 1.7; max-width: 440px; opacity: 0.9; } .auth-promo-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 22px; } .auth-promo-list li { display: flex; align-items: center; gap: 14px; font-size: var(--fs-sm); font-weight: 600; line-height: 1.4; } .auth-promo-list i { width: 36px; height: 36px; border-radius: 11px; flex: 0 0 auto; background: rgba(255, 255, 255, 0.18); display: flex; align-items: center; justify-content: center; font-size: 14px; } /* Partner slideshow inside the promo panel */ .auth-promo-carousel { margin-top: auto; width: 100%; overflow: hidden; } .auth-promo-carousel-viewport { width: 100%; overflow: hidden; border-radius: 16px; } .auth-promo-carousel-track { display: flex; width: 100%; transition: transform 0.55s ease-in-out; will-change: transform; } .auth-promo-slide { min-width: 100%; max-width: 100%; flex: 0 0 100%; box-sizing: border-box; padding: 22px; border-radius: 16px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.25); display: flex; align-items: center; gap: 18px; } .auth-promo-slide-logo { width: 52px; height: 52px; border-radius: 12px; overflow: hidden; flex: 0 0 auto; background: #fff; display: flex; align-items: center; justify-content: center; } .auth-promo-slide-logo img { width: 100%; height: 100%; object-fit: contain; } .auth-promo-slide-initial { font-size: 22px; font-weight: 800; color: #801a2e; } .auth-promo-slide-text { min-width: 0; } .auth-promo-slide-label { font-size: 11px; font-weight: 600; opacity: 0.75; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; } .auth-promo-slide-name { font-size: var(--fs-sm); font-weight: 800; color: #fff; } .auth-promo-carousel-dots { display: flex; justify-content: center; margin-top: 18px; gap: 8px; } .auth-promo-carousel-dot { width: 7px; height: 7px; border-radius: 999px; border: none; padding: 0; background: rgba(255, 255, 255, 0.35); cursor: pointer; transition: background 0.15s, width 0.15s; } .auth-promo-carousel-dot.active { background: #fff; width: 18px; } .auth-shell .auth-card { padding: 60px 52px; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; } @media (max-width: 900px) and (min-width: 761px) { .auth-shell .auth-card { padding: 40px 34px; } } @media (max-width: 760px) { .auth-shell { grid-template-columns: 1fr; max-width: 424px; } .auth-promo { display: none; } } /* Quieter resend control — appears only after the first code send */ .auth-resend { display: flex; align-items: center; justify-content: center; } .auth-resend.is-hidden { display: none; } .auth-resend-sending { font-size: var(--fs-xs); color: var(--text-muted); display: flex; align-items: center; gap: 6px; }