45 lines
2.8 KiB
CSS
45 lines
2.8 KiB
CSS
/* ============================================================
|
|
INTER SANTÉ — LOGIN UI (ONLY)
|
|
============================================================ */
|
|
|
|
/* RESET & LAYOUT */
|
|
html, body { height: 100%; margin: 0; overflow: hidden; background: #0b0e11; color: #fff; font-family: 'Segoe UI', sans-serif; }
|
|
|
|
.portal-wrapper { display: flex; height: 100vh; width: 100vw; }
|
|
|
|
/* SECTION GAUCHE : SLIDE (40vw) */
|
|
.slide-container { width: 40vw; height: 100%; position: relative; overflow: hidden; background: #000; border-right: 1px solid rgba(255,255,255,0.1); }
|
|
.slides { width: 100%; height: 100%; position: relative; }
|
|
.slides img { width: 100%; height: 100%; position: absolute; object-fit: cover; }
|
|
.slides img:not(.active) { left: -100%; }
|
|
|
|
/* SECTION DROITE : CONTENT */
|
|
.content-side { flex: 1; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, #1a1f24 0%, #0b0e11 100%); }
|
|
.login-box { width: 100%; max-width: 400px; padding: 2rem; background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(10px); border-radius: 15px; border: 1px solid rgba(255, 255, 255, 0.05); }
|
|
.logo-area img { max-height: 80px; display: block; margin: 0 auto; }
|
|
|
|
/* TYPOGRAPHIE & FORMS */
|
|
.portal-title { color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; font-size: 1.25rem; }
|
|
.lbl-saas { font-size: 11px; text-transform: uppercase; font-weight: 600; color: #848d9a; margin-bottom: 5px; display: block; }
|
|
|
|
.input-dark, .select-dark { background: rgba(0, 0, 0, 0.2) !important; border: 1px solid #2d343c !important; color: #fff !important; border-radius: 8px !important; padding: 12px !important; }
|
|
.input-dark:focus { border-color: #0088cf !important; box-shadow: none; background: rgba(0,0,0,0.4) !important; }
|
|
|
|
.btn-login-saas { background: #0088cf; border: none; color: #fff; border-radius: 8px; transition: 0.3s; }
|
|
.btn-login-saas:hover { background: #0077b5; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,136,207,0.3); }
|
|
|
|
.forgot-link { font-size: 11px; color: #848d9a; text-decoration: none; }
|
|
.portal-footer { font-size: 11px; color: #4e555d; }
|
|
|
|
/* ANIMATIONS ORIGINALES RESTAURÉES */
|
|
@keyframes next1 { from { left: 0% } to { left: -100% } }
|
|
@keyframes next2 { from { left: 100% } to { left: 0% } }
|
|
@keyframes prev1 { from { left: 0% } to { left: 100% } }
|
|
@keyframes prev2 { from { left: -100% } to { left: 0% } }
|
|
|
|
/* NAVIGATION SLIDE */
|
|
span.next, span.prev { position: absolute; top: 50%; padding: 10px; background: rgba(0,136,207,0.5); color: #fff; cursor: pointer; z-index: 10; border-radius: 5px; }
|
|
.next { right: 15px; } .prev { left: 15px; }
|
|
.dotsContainer { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
|
|
.dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.2); cursor: pointer; }
|
|
.dot.active { background: #0088cf; } |