auth0-login-custom-new-universal.css

/* ===================================================================
   ClashAI Auth0 New Universal Login - Custom Styles
   Based on ClashAI design system from Figma
   Linear: AGE-245 | Phase 2
   Last updated: 2025-11-28
   Updated for New Universal Login Experience
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;600&display=swap');

:root {
  /* Colors - ClashAI Design System (from globals.css design tokens) */
  /* Primary (Green) - Main brand identity */
  --color-primary: #2fb54b;
  --color-primary-bold: #1c6d2d;
  --color-primary-subtle: #bdeac7;
  
  /* Accent (Teal) - Secondary actions */
  --color-accent: #17b6b9;
  --color-accent-bold: #0e6d6f;
  --color-accent-subtle: #bdeeef;
  
  /* Dark Background Colors (from Figma design system) */
  --color-bg-dark: #0d1520; /* Dark navy blue background (from gradient) */
  --color-bg-dark-subtle: #1a1f2e; /* Lighter navy blue (from gradient) */
  --color-bg-dark-blue: #040f2a; /* Background blue (alternative) */
  --color-bg-frosted: rgba(11, 31, 42, 0.6); /* Frosted glass effect */
  
  /* Neutral (Grey) - Neutral states */
  --color-neutral: #6d797f;
  --color-neutral-bold: #071319;
  --color-neutral-subtle: #ced2d4;
  
  /* Text Colors */
  --color-text-primary: #ffffff;
  --color-text-secondary: #9da5aa;
  
  /* Button Interaction States */
  --color-interaction-high-emphasis-hover: #1c6d2d;
  --color-interaction-high-emphasis-active: #13481e;
  --color-interaction-accent-hover: #149ea1;
  --color-interaction-accent-active: #0e6d6f;

  /* Spacing (from design system) */
  --space-sm: 8px; /* --space-squished */
  --space-md: 16px; /* --space-tight */
  --space-lg: 40px; /* --space-cozy */

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px; /* ClashAI uses 12px for md border-radius */
  --radius-full: 9999px;
}

/* ===================================================================
   GLOBAL STYLES
   =================================================================== */

body {
  background: linear-gradient(135deg, #1a1f2e 0%, #0d1520 100%) !important;
  background-color: var(--color-bg-dark) !important; /* Fallback */
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  color: var(--color-text-primary) !important;
  min-height: 100vh !important;
}

/* ===================================================================
   NEW UNIVERSAL LOGIN - MAIN CONTAINER
   =================================================================== */

/* Main login container */
[data-testid="login-container"],
.auth0-lock-widget,
.auth0-lock.auth0-lock {
  background: var(--color-bg-frosted) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
  padding: var(--space-lg) !important;
}

/* ===================================================================
   HEADER & LOGO
   =================================================================== */

/* Logo container */
[data-testid="login-header-logo"],
.auth0-lock-header-logo,
img[alt*="logo"],
img[alt*="Logo"] {
  max-height: 104px !important;
  width: auto !important;
  filter: brightness(0) invert(1) !important; /* Make logo white */
}

/* Header text */
[data-testid="login-header-title"],
.auth0-lock-name,
h1 {
  font-family: 'Geist', sans-serif !important;
  font-weight: 600 !important;
  font-size: 31px !important;
  line-height: 29px !important;
  letter-spacing: -1.24px !important;
  color: var(--color-text-primary) !important;
  text-align: center !important;
  margin-top: var(--space-md) !important;
}

/* ===================================================================
   FORM ELEMENTS - NEW UNIVERSAL LOGIN
   =================================================================== */

/* Input fields - New Universal Login uses different selectors */
input[type="email"],
input[type="password"],
input[type="text"],
input[type="tel"],
.auth0-lock-input,
[data-testid="login-email-input"],
[data-testid="login-password-input"] {
  background-color: rgba(109, 121, 127, 0.2) !important; /* neutral-base with opacity for dark theme */
  border: 1px solid rgba(206, 210, 212, 0.2) !important; /* border-subtle with opacity */
  border-radius: var(--radius-md) !important; /* 8px - matches rounded-md */
  color: var(--color-text-primary) !important;
  font-family: 'Geist', sans-serif !important;
  font-size: 14px !important;
  line-height: 18px !important;
  letter-spacing: -0.28px !important;
  padding: 10px 12px !important; /* px-3 py-2 equivalent */
  transition: all 0.2s ease !important;
}

input[type="email"]:focus,
input[type="password"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
.auth0-lock-input:focus,
[data-testid="login-email-input"]:focus,
[data-testid="login-password-input"]:focus {
  background-color: rgba(109, 121, 127, 0.3) !important;
  border-color: var(--color-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px var(--color-accent) !important; /* ring-2 ring-accent-base */
}

input::placeholder {
  color: var(--color-text-secondary) !important;
  opacity: 0.6 !important;
}

/* Labels */
label,
.auth0-lock-label,
[data-testid*="label"] {
  font-family: 'Geist', sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 18px !important;
  letter-spacing: -0.28px !important;
  color: var(--color-text-secondary) !important;
}

/* ===================================================================
   BUTTONS - NEW UNIVERSAL LOGIN
   =================================================================== */

/* Primary Submit Button */
button[type="submit"],
.auth0-lock-submit,
[data-testid="login-submit-button"],
[role="button"][aria-label*="login"],
[role="button"][aria-label*="sign in"] {
  background-color: var(--color-primary) !important;
  border: none !important;
  border-radius: var(--radius-full) !important;
  color: white !important;
  font-family: 'Geist', sans-serif !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  line-height: 24px !important;
  letter-spacing: -0.36px !important;
  padding: var(--space-sm) var(--space-md) !important;
  text-transform: none !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
  cursor: pointer !important;
}

button[type="submit"]:hover,
.auth0-lock-submit:hover,
[data-testid="login-submit-button"]:hover {
  background-color: var(--color-interaction-high-emphasis-hover) !important; /* #1c6d2d */
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(47, 181, 75, 0.3) !important;
}

button[type="submit"]:active,
.auth0-lock-submit:active {
  background-color: var(--color-interaction-high-emphasis-active) !important; /* #13481e */
  transform: scale(0.98) !important; /* active:scale-[0.98] */
}

button[type="submit"]:disabled,
button[type="submit"][disabled] {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Social Login Buttons */
button[data-provider],
.auth0-lock-social-button,
[data-testid*="social-button"],
[role="button"][aria-label*="google"],
[role="button"][aria-label*="discord"] {
  background-color: var(--color-accent) !important;
  border: none !important;
  border-radius: var(--radius-full) !important;
  color: white !important;
  font-family: 'Geist', sans-serif !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  line-height: 24px !important;
  letter-spacing: -0.36px !important;
  padding: var(--space-sm) var(--space-md) !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
  margin-bottom: var(--space-sm) !important;
}

button[data-provider]:hover,
.auth0-lock-social-button:hover {
  background-color: var(--color-interaction-accent-hover) !important; /* #149ea1 */
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(23, 182, 185, 0.3) !important;
}

button[data-provider]:active,
.auth0-lock-social-button:active {
  background-color: var(--color-interaction-accent-active) !important; /* #0e6d6f */
  transform: scale(0.98) !important; /* active:scale-[0.98] */
}

/* ===================================================================
   LINKS & TEXT
   =================================================================== */

/* Links */
a,
.auth0-lock-alternative-link,
.auth0-lock-sign-up-link,
[data-testid*="link"],
[role="link"] {
  color: var(--color-accent) !important;
  font-family: 'Geist', sans-serif !important;
  font-size: 14px !important;
  line-height: 18px !important;
  letter-spacing: -0.28px !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

a:hover,
.auth0-lock-alternative-link:hover,
.auth0-lock-sign-up-link:hover {
  color: #1dd3d6 !important;
  text-decoration: underline !important;
}

/* Secondary Text */
p,
.auth0-lock-alternative,
.auth0-lock-alternative p,
[data-testid*="description"] {
  color: var(--color-text-secondary) !important;
  font-family: 'Geist', sans-serif !important;
  font-size: 14px !important;
  line-height: 18px !important;
  letter-spacing: -0.28px !important;
  text-align: center !important;
}

/* ===================================================================
   MESSAGES - NEW UNIVERSAL LOGIN
   =================================================================== */

/* Error Messages */
[role="alert"],
.auth0-lock-error-msg,
.auth0-global-message.auth0-global-message-error,
[data-testid*="error"] {
  background-color: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid #ef4444 !important;
  border-radius: var(--radius-sm) !important;
  color: #fca5a5 !important;
  font-family: 'Geist', sans-serif !important;
  font-size: 14px !important;
  padding: var(--space-md) !important;
}

/* Success Messages */
.auth0-global-message.auth0-global-message-success,
[data-testid*="success"] {
  background-color: rgba(47, 181, 75, 0.1) !important;
  border: 1px solid var(--color-primary) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--color-primary) !important;
  font-family: 'Geist', sans-serif !important;
  font-size: 14px !important;
  padding: var(--space-md) !important;
}

/* Warning Messages */
.auth0-global-message.auth0-global-message-warning,
[data-testid*="warning"] {
  background-color: rgba(251, 191, 36, 0.1) !important;
  border: 1px solid #fbbf24 !important;
  border-radius: var(--radius-sm) !important;
  color: #fde68a !important;
  font-family: 'Geist', sans-serif !important;
  font-size: 14px !important;
  padding: var(--space-md) !important;
}

/* ===================================================================
   ACCESSIBILITY
   =================================================================== */

/* Focus States */
input:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px var(--color-accent), 0 0 0 4px rgba(23, 182, 185, 0.2) !important; /* ring-2 ring-accent-base with ring-offset-2 */
}

/* ===================================================================
   RESPONSIVE DESIGN
   =================================================================== */

@media (max-width: 768px) {
  [data-testid="login-container"],
  .auth0-lock-widget {
    padding: var(--space-md) !important;
  }

  [data-testid="login-header-title"],
  .auth0-lock-name,
  h1 {
    font-size: 24px !important;
    line-height: 28px !important;
  }

  button[type="submit"],
  button[data-provider],
  .auth0-lock-submit,
  .auth0-lock-social-button {
    font-size: 16px !important;
  }
}

/* ===================================================================
   ANIMATIONS
   =================================================================== */

input,
button,
a {
  transition: all 0.2s ease-in-out !important;
}

[data-testid="login-container"],
.auth0-lock-widget {
  animation: fadeIn 0.3s ease-in-out !important;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}