/* Menthor Academy — branding para Roundcube (extiende el skin Elastic) Calcado del panel navy animado de menthoracademy.com.ec/login (el ParticleField con glow=false) — logo claro sobre el fondo, la tarjeta blanca queda solo alrededor del formulario. */ :root { --menthor-gold-400: #d4af37; --menthor-gold-500: #c1992a; --menthor-gold-700: #7d641c; --menthor-navy-900: #0b1526; --menthor-navy-800: #111e37; --menthor-gray-200: #e5e5e5; } /* Pantalla de login — #layout es el contenedor real a pantalla completa, pinta encima del body, asi que el fondo va ahi tambien */ body.task-login { background: radial-gradient(circle at 20% 20%, rgba(212, 175, 55, 0.18), transparent 55%), var(--menthor-navy-900) !important; min-height: 100vh; } /* El skin base le pone su propio fondo opaco a #layout, lo que tapa el canvas de particulas (menthor-particles.js lo inserta como primer hijo de , fixed, z-index 0) — hay que dejarlo transparente */ body.task-login #layout { background: transparent !important; position: relative; } body.task-login #layout-content { position: relative; z-index: 1; background: transparent; box-shadow: none; border: none; max-width: 420px; margin: 8vh auto; padding: 0; } body.task-login #logo { display: block; margin: 0 auto 2rem; max-width: 230px; height: auto; } /* La tarjeta blanca queda alrededor del formulario, no del logo */ body.task-login #login-form { background: #fff; border-radius: 12px; box-shadow: 0 20px 50px rgba(11, 21, 38, 0.45); padding: 2rem 1.75rem; } body.task-login #login-form input[type="text"], body.task-login #login-form input[type="password"] { border-radius: 6px; border-color: var(--menthor-gray-200); } body.task-login #login-form input[type="text"]:focus, body.task-login #login-form input[type="password"]:focus { border-color: var(--menthor-gold-500); box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.2); } body.task-login #login-form input[type="submit"], body.task-login #login-form button[type="submit"] { background-color: var(--menthor-navy-900); border-color: var(--menthor-navy-900); border-radius: 6px; color: #fff; font-weight: 500; } body.task-login #login-form input[type="submit"]:hover, body.task-login #login-form button[type="submit"]:hover { background-color: var(--menthor-navy-800); border-color: var(--menthor-navy-800); } body.task-login #login-footer, body.task-login .support-link { color: #9ca3af; } body.task-login a { color: var(--menthor-gold-500); } /* Acentos generales del webmail (barra superior, botones principales) */ .btn-primary { background-color: var(--menthor-navy-900); border-color: var(--menthor-navy-900); } .btn-primary:hover, .btn-primary:focus { background-color: var(--menthor-navy-800); border-color: var(--menthor-navy-800); }