butterfly/themes/sunset-mesh/login.css
Claude 9c05c3e35d 4 temas modernos de login: aurora-glass, nordic-minimal, sunset-mesh, carbon-neon
Temas 100% CSS (sem fotos de fundo — gradientes, mesh e glassmorphism),
seguindo o contrato de variáveis existente (btn-background/foreground,
card-background) e estilizando o .card-body interno (o scss.class força
.main-content-card transparente quando não há cor de cartão definida).

- aurora-glass: glassmorphism escuro, aurora indigo/violeta/teal,
  backdrop-filter blur no cartão
- nordic-minimal: claro escandinavo, grid sutil, acento azul profundo
- sunset-mesh: mesh gradient quente (coral/âmbar/violeta), cartão
  translúcido estilo Stripe/Linear
- carbon-neon: dark tech, grid de carbono, glow ciano no cartão e botão

login.css fallback compilado com o próprio scssphp do core; previews
renderizados por script PHP GD (gradientes por pixel + mockup do cartão).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-03 20:25:38 -03:00

70 lines
No EOL
1.9 KiB
CSS

@charset "UTF-8";
/* Tema Sunset Mesh — mesh gradient quente */
body.page-anonymous {
min-height: 100vh;
background-color: #fff1eb;
background-image: radial-gradient(45% 55% at 10% 15%, rgba(255, 122, 89, 0.55) 0%, transparent 70%), radial-gradient(50% 60% at 90% 10%, rgba(255, 190, 92, 0.5) 0%, transparent 70%), radial-gradient(55% 65% at 85% 85%, rgba(196, 113, 245, 0.4) 0%, transparent 70%), radial-gradient(45% 55% at 15% 90%, rgba(250, 113, 133, 0.45) 0%, transparent 70%);
background-attachment: fixed;
}
.page-anonymous .main-content-card .card-body {
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, 0.85);
border-radius: 22px;
padding: 2.3rem !important;
box-shadow: 0 22px 55px rgba(148, 63, 106, 0.22);
}
.page-anonymous .card-header {
color: #3b1d54;
border: 0;
background: transparent;
font-weight: 700;
}
.page-anonymous .form-label {
color: #6b4a7e;
font-weight: 500;
}
.page-anonymous .form-control,
.page-anonymous .form-select {
background: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(196, 113, 245, 0.3);
border-radius: 12px;
color: #3b1d54;
padding: 0.65rem 0.85rem;
}
.page-anonymous .form-control:focus,
.page-anonymous .form-select:focus {
background: #ffffff;
border-color: #c471f5;
box-shadow: 0 0 0 0.25rem rgba(196, 113, 245, 0.2);
}
.page-anonymous .btn.btn-primary {
background: #1f1235;
border: 0;
border-radius: 12px;
color: #ffffff;
padding: 0.7rem;
font-weight: 600;
letter-spacing: 0.02em;
box-shadow: 0 12px 26px rgba(31, 18, 53, 0.35);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.page-anonymous .btn.btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 16px 32px rgba(31, 18, 53, 0.45);
}
.page-anonymous .text-muted,
.page-anonymous .copyright {
color: #8a6aa0 !important;
}
.page-anonymous a {
color: #7828c8 !important;
}