butterfly/themes/aurora-glass/login.scss

/* Tema Aurora Glass — cartão de vidro compacto centrado, inputs pill,
   blobs de aurora animados flutuando */

$btn-background-color: #7c6cff !default;
$btn-foreground-color: #ffffff !default;
$page-background-color: #0b0e1a !default;
$aurora-color-1: #7c6cff !default;
$aurora-color-2: #2dd4bf !default;
$aurora-color-3: #a855f7 !default;

body.welcome-anonymous,
body.login-page,
main.page-anonymous {
   min-height: 100vh;
   background-color: $page-background-color;
   background-image:
      radial-gradient(40% 55% at 15% 20%, color-mix(in srgb, #{$aurora-color-1} 45%, transparent) 0%, transparent 70%),
      radial-gradient(45% 60% at 85% 15%, color-mix(in srgb, #{$aurora-color-2} 35%, transparent) 0%, transparent 70%),
      radial-gradient(50% 65% at 70% 90%, color-mix(in srgb, #{$aurora-color-3} 35%, transparent) 0%, transparent 70%),
      radial-gradient(35% 45% at 30% 80%, color-mix(in srgb, #{$aurora-color-1} 25%, transparent) 0%, transparent 70%);
   background-attachment: fixed;
}

/* blobs animados flutuando atrás do cartão */
main.page-anonymous {
   position: relative;
   overflow: hidden;

   &::before,
   &::after {
      content: "";
      position: fixed;
      width: 420px;
      height: 420px;
      border-radius: 50%;
      filter: blur(70px);
      opacity: 0.5;
      pointer-events: none;
      z-index: 0;
   }

   &::before {
      background: radial-gradient(circle, color-mix(in srgb, #{$aurora-color-1} 55%, transparent), transparent 65%);
      top: -120px;
      left: -80px;
      animation: butterfly-float-a 14s ease-in-out infinite alternate;
   }

   &::after {
      background: radial-gradient(circle, color-mix(in srgb, #{$aurora-color-2} 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;

   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;

   &::placeholder {
      color: rgba(241, 245, 249, 0.45);
   }

   &:focus {
      background: rgba(255, 255, 255, 0.12);
      border-color: color-mix(in srgb, #{$btn-background-color} 65%, transparent);
      box-shadow: 0 0 0 0.25rem color-mix(in srgb, #{$btn-background-color} 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, #{$btn-background-color}, color-mix(in srgb, #{$btn-background-color} 45%, #4f8bff));
   border: 0;
   border-radius: 999px;
   color: $btn-foreground-color;
   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, #{$btn-background-color} 35%, transparent);

   &:hover {
      transform: translateY(-1px);
      box-shadow: 0 14px 30px color-mix(in srgb, #{$btn-background-color} 45%, transparent);
   }
}

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