butterfly/themes/aurora-glass/login.css

@charset "UTF-8";
/* Tema Aurora Glass — cartão de vidro compacto centrado, inputs pill,
   blobs de aurora animados flutuando */
body.welcome-anonymous,
body.login-page,
main.page-anonymous {
  min-height: 100vh;
  background-color: #0b0e1a;
  background-image: radial-gradient(40% 55% at 15% 20%, color-mix(in srgb, #7c6cff 45%, transparent) 0%, transparent 70%), radial-gradient(45% 60% at 85% 15%, color-mix(in srgb, #2dd4bf 35%, transparent) 0%, transparent 70%), radial-gradient(50% 65% at 70% 90%, color-mix(in srgb, #a855f7 35%, transparent) 0%, transparent 70%), radial-gradient(35% 45% at 30% 80%, color-mix(in srgb, #7c6cff 25%, transparent) 0%, transparent 70%);
  background-attachment: fixed;
}

/* blobs animados flutuando atrás do cartão */
main.page-anonymous {
  position: relative;
  overflow: hidden;
}
main.page-anonymous::before, main.page-anonymous::after {
  content: "";
  position: fixed;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
main.page-anonymous::before {
  background: radial-gradient(circle, color-mix(in srgb, #7c6cff 55%, transparent), transparent 65%);
  top: -120px;
  left: -80px;
  animation: butterfly-float-a 14s ease-in-out infinite alternate;
}
main.page-anonymous::after {
  background: radial-gradient(circle, color-mix(in srgb, #2dd4bf 45%, transparent), transparent 65%);
  bottom: -140px;
  right: -60px;
  animation: butterfly-float-b 17s ease-in-out infinite alternate;
}

@keyframes butterfly-float-a {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(70px, 50px) scale(1.15);
  }
}
@keyframes butterfly-float-b {
  from {
    transform: translate(0, 0) scale(1.1);
  }
  to {
    transform: translate(-60px, -50px) scale(0.95);
  }
}
/* cartão compacto que abraça o form */
.page-anonymous .container-tight {
  max-width: 26rem !important;
  position: relative;
  z-index: 1;
}

.page-anonymous .main-content-card .card-body {
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 26px;
  padding: 2.2rem !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.page-anonymous .main-content-card .col-md-5 {
  width: 100% !important;
  max-width: none;
  flex: 1 1 100%;
}

.page-anonymous .card-header {
  color: #f1f5f9;
  border: 0;
  background: transparent;
}
.page-anonymous .card-header h2 {
  font-weight: 600;
}

.page-anonymous .form-label,
.page-anonymous .form-check-label,
.page-anonymous .text-muted,
.page-anonymous .copyright,
.page-anonymous a {
  color: #cbd5e1 !important;
}

/* inputs pill */
.page-anonymous .form-control,
.page-anonymous .form-select {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: #f8fafc;
  padding: 0.65rem 1.2rem;
}
.page-anonymous .form-control::placeholder,
.page-anonymous .form-select::placeholder {
  color: rgba(241, 245, 249, 0.45);
}
.page-anonymous .form-control:focus,
.page-anonymous .form-select:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: color-mix(in srgb, #7c6cff 65%, transparent);
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, #7c6cff 22%, transparent);
  color: #ffffff;
}

.page-anonymous .select2-container .select2-selection {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
}

.page-anonymous .form-check-input {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}

.page-anonymous .btn.btn-primary {
  background: linear-gradient(135deg, #7c6cff, color-mix(in srgb, #7c6cff 45%, #4f8bff));
  border: 0;
  border-radius: 999px;
  color: #ffffff;
  padding: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 10px 24px color-mix(in srgb, #7c6cff 35%, transparent);
}
.page-anonymous .btn.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px color-mix(in srgb, #7c6cff 45%, transparent);
}

.page-anonymous .glpi-logo {
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}