/* ============================================================ SerLinkLabs · Login Cargar DESPUÉS de reset.css, styles.css y responsive.css Scopeado a Recuerda: 1rem = 10px (html { font-size: 10px }) ============================================================ */ .page-login { --lg-violet: #5419f9; --lg-blue: #272595; --lg-green: #01ff76; --lg-line: rgba(255, 255, 255, 0.14); --lg-text: #ffffff; --lg-muted: #b6aee0; } /* ---------- Estructura ---------- */ .page-login .layout__login { align-items: stretch; min-height: calc(100vh - 10rem); } /* El degradado de desvanecido de abajo cortaba el bloque */ .page-login .login__login-left, .page-login .login__login-right { mask-image: none; -webkit-mask-image: none; } /* ---------- Panel de marca (antes el vídeo) ---------- */ .page-login .login__login-left { display: flex; align-items: center; justify-content: center; flex-basis: 50%; pointer-events: auto; padding: 6rem clamp(2rem, 5vw, 7rem); background: radial-gradient(120rem 70rem at 15% 10%, rgba(84, 25, 249, 0.55), transparent 60%), radial-gradient(90rem 60rem at 85% 90%, rgba(202, 108, 230, 0.35), transparent 60%), linear-gradient(160deg, #0b0620, #1a0f45 55%, #2a1470); } .page-login .login-left__panel { display: flex; flex-direction: column; gap: 2.4rem; width: 100%; max-width: 46rem; } .page-login .login-left__logo { width: 26rem; max-width: 80%; } .page-login .login-left__claim { font-family: chonburi, serif; font-size: 3rem; line-height: 1.3; font-weight: normal; color: var(--lg-text); } .page-login .login-left__lista { display: flex; flex-direction: column; gap: 1.4rem; list-style: none; } .page-login .login-left__item { display: flex; align-items: flex-start; gap: 1.2rem; font-family: Arial, Helvetica, sans-serif; font-size: 1.5rem; line-height: 1.55; color: var(--lg-muted); } .page-login .login-left__item .emoji { flex-shrink: 0; font-size: 1.8rem; font-style: normal; } .page-login .login-left__nota { margin-top: 1rem; padding-top: 2.4rem; border-top: 1px solid var(--lg-line); font-family: Arial, Helvetica, sans-serif; font-size: 1.45rem; color: var(--lg-muted); } .page-login .login-left__nota a { display: inline; font-weight: bold; color: var(--lg-green); } .page-login .login-left__nota a:hover { text-decoration: underline; } /* ---------- Columna del formulario ---------- */ .page-login .login__login-right { height: auto; flex-basis: 50%; padding: 6rem clamp(2rem, 5vw, 6rem); background: linear-gradient(180deg, #14122e, #0b0620); } .page-login .login-right__login-block { gap: 0; width: 100%; max-width: 42rem; padding: 4rem 3.5rem; border: 1px solid var(--lg-line); border-radius: 2rem; background: rgba(255, 255, 255, 0.04); box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.4); } .page-login .login-block__header-login { width: 100%; margin-bottom: 3rem; } .page-login .header-login__title { text-align: left; font-family: chonburi, serif; font-size: 3.2rem; color: var(--lg-text); } .page-login .header-login__subtitle { margin-top: 0.8rem; text-align: left; font-size: 1.45rem; line-height: 1.6; font-weight: normal; color: var(--lg-muted); } /* ---------- Campos ---------- */ .page-login .login-block__container-login { display: flex; flex-direction: column; width: 100%; } .page-login .container-login__label { margin-bottom: 0.8rem; font-size: 1.3rem; font-weight: bold; letter-spacing: 0.1rem; text-transform: uppercase; color: var(--lg-muted); } .page-login .container-login__user { width: 100%; height: 5.4rem; margin-bottom: 2rem; padding: 0 1.8rem; border: 1px solid var(--lg-line); border-radius: 1.2rem; background: rgba(255, 255, 255, 0.06); color: var(--lg-text); font-family: Arial, Helvetica, sans-serif; font-size: 1.5rem; box-shadow: none; transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; } .page-login #password { margin-bottom: 2.5rem; } .page-login .container-login__user::placeholder { color: #7d76a8; } .page-login .container-login__user:focus { border-color: var(--lg-violet); background: rgba(255, 255, 255, 0.09); box-shadow: 0 0 0 3px rgba(84, 25, 249, 0.3); } /* El widget de Cloudflare, centrado y con aire */ .page-login .cloudflare-captcha { margin-bottom: 2.5rem; } /* ---------- Botón ---------- */ .page-login .container-login__submit { width: 100%; height: 5.4rem; margin-top: 0; padding: 0; border: none; border-radius: 1.2rem; background: var(--lg-violet); color: var(--lg-text); font-family: Arial, Helvetica, sans-serif; font-size: 1.6rem; font-weight: bold; letter-spacing: 0.1rem; box-shadow: 0 1rem 2.6rem rgba(84, 25, 249, 0.4); } .page-login .container-login__submit:hover { background: #4312cc; } /* ---------- Mensajes ---------- */ .page-login .error-login { width: 100%; margin-top: 2rem; padding: 1.2rem 1.6rem; border: 1px solid rgba(255, 92, 92, 0.5); border-radius: 1rem; background: rgba(255, 92, 92, 0.12); font-size: 1.4rem; line-height: 1.5; color: #ffb4b4; } .page-login .succes-login { width: 100%; margin-top: 2rem; padding: 1.2rem 1.6rem; border: 1px solid rgba(1, 255, 118, 0.4); border-radius: 1rem; background: rgba(1, 255, 118, 0.1); font-size: 1.4rem; color: #8fffc4; } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .page-login .layout__login { flex-direction: column; } .page-login .login__login-left, .page-login .login__login-right { flex-basis: auto; width: 100%; } .page-login .login__login-left { padding: 5rem 2.5rem; } .page-login .login-left__panel { max-width: 52rem; } .page-login .login-left__claim { font-size: 2.4rem; } .page-login .login__login-right { padding: 4rem 2.5rem 6rem; } } @media (max-width: 480px) { .page-login .login-right__login-block { padding: 3rem 2.2rem; } .page-login .header-login__title { font-size: 2.6rem; } } @media (prefers-reduced-motion: reduce) { .page-login * { transition: none !important; } }