update login

This commit is contained in:
Jessica Orozco 2026-07-01 20:47:47 -04:00
parent 8903c68d3c
commit b0c402b718
2 changed files with 64 additions and 21 deletions

View File

@ -94,7 +94,10 @@
margin-bottom: 4px; margin-bottom: 4px;
} }
.login-logo-icon { width: 34px; height: 34px; } .login-logo-icon {
width: 34px;
height: 34px;
}
.login-eyebrow { .login-eyebrow {
font-family: 'Outfit', sans-serif; font-family: 'Outfit', sans-serif;
@ -183,7 +186,9 @@
box-sizing: border-box; box-sizing: border-box;
} }
.field-input::placeholder { color: #A8A29E; } .field-input::placeholder {
color: #A8A29E;
}
.field-input:focus { .field-input:focus {
border-color: #C9973C; border-color: #C9973C;
@ -219,8 +224,15 @@
box-shadow: 0 8px 30px rgba(13, 27, 42, 0.35); box-shadow: 0 8px 30px rgba(13, 27, 42, 0.35);
} }
.btn-cta:active { transform: translateY(0); } .btn-cta:active {
.btn-cta:disabled { opacity: 0.65; cursor: not-allowed; transform: none; } transform: translateY(0);
}
.btn-cta:disabled {
opacity: 0.65;
cursor: not-allowed;
transform: none;
}
/* ── Error ── */ /* ── Error ── */
.login-error { .login-error {
@ -237,15 +249,28 @@
animation: fadeUp 0.3s ease; animation: fadeUp 0.3s ease;
} }
.login-error svg { width: 15px; height: 15px; flex-shrink: 0; } .login-error svg {
width: 15px;
height: 15px;
flex-shrink: 0;
}
@keyframes fadeUp { @keyframes fadeUp {
from { opacity: 0; transform: translateY(-8px); } from {
to { opacity: 1; transform: translateY(0); } opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
} }
@keyframes spin { @keyframes spin {
to { transform: rotate(360deg); } to {
transform: rotate(360deg);
}
} }
/* ── SSO Divider ── */ /* ── SSO Divider ── */
@ -293,11 +318,22 @@
box-shadow: 0 4px 12px rgba(15, 13, 10, 0.08); box-shadow: 0 4px 12px rgba(15, 13, 10, 0.08);
} }
.btn-sso:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .btn-sso:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.ms-logo { width: 20px; height: 20px; flex-shrink: 0; } .ms-logo {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.sso-text { flex: 1; text-align: left; } .sso-text {
flex: 1;
text-align: left;
}
.sso-provider { .sso-provider {
display: block; display: block;
@ -332,9 +368,19 @@
color: #D6D3D1; color: #D6D3D1;
} }
.login-security svg { width: 11px; height: 11px; color: #D6D3D1; } .login-security svg {
width: 11px;
height: 11px;
color: #D6D3D1;
}
@media (max-width: 480px) { @media (max-width: 480px) {
.login-card { padding: 28px 22px; } .login-card {
.login-title { font-size: 22px; letter-spacing: 1px; } padding: 28px 22px;
}
.login-title {
font-size: 22px;
letter-spacing: 1px;
}
} }

View File

@ -9,14 +9,11 @@
<div class="login-brand"> <div class="login-brand">
<div class="login-logo-wrap"> <div class="login-logo-wrap">
<!-- K logotipo SVG --> <!-- K logotipo SVG -->
<svg class="login-logo-icon" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg"> <div class="header-logo">
<path d="M8 6L17 17L8 28" stroke="white" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" /> <img src="/assets/wave.jpg" alt="Wave" class="header-logo__img">
<path d="M17 6H26" stroke="white" stroke-width="3.5" stroke-linecap="round" /> </div>
<path d="M17 28H26" stroke="white" stroke-width="3.5" stroke-linecap="round" />
</svg>
</div> </div>
<p class="login-eyebrow">Portal Corporativo</p> <p class="login-eyebrow">Portal Corporativo</p>
<h1 class="login-title">App <span class="login-title-gold">ECO</span></h1>
<p class="login-sub">WAVE · Intranet 2026</p> <p class="login-sub">WAVE · Intranet 2026</p>
</div> </div>