/* ================================================================ PhantoNex — Unified Login Page (pnx-login.css) Split-screen: brand panel (left) + form panel (right) Module accent injected via data-module on ================================================================ */ /* ── Module color tokens (mirrored from phantonex-v2.css) ─────── */ :root { --login-accent: #1e3a8a; --login-accent-dark: #07142f; --login-accent-mid: #2563eb; --login-accent-rgb: 30,58,138; --login-surface: #ffffff; --login-bg: #f3f6fb; --login-ink: #172033; --login-muted: #64748b; --login-radius: 14px; } body[data-module="devis"] { --login-accent:#d97706; --login-accent-dark:#1a0e00; --login-accent-mid:#b45309; --login-accent-rgb:217,119,6; } body[data-module="achat"] { --login-accent:#0f766e; --login-accent-dark:#042f2e; --login-accent-mid:#0d9488; --login-accent-rgb:15,118,110; } body[data-module="commande"] { --login-accent:#7c3aed; --login-accent-dark:#1e0a3c; --login-accent-mid:#6d28d9; --login-accent-rgb:124,58,237; } body[data-module="gestock"] { --login-accent:#4338ca; --login-accent-dark:#0f0c2e; --login-accent-mid:#4f46e5; --login-accent-rgb:67,56,202; } body[data-module="secretariat"] { --login-accent:#be185d; --login-accent-dark:#3b0624; --login-accent-mid:#db2777; --login-accent-rgb:190,24,93; } body[data-module="rh"] { --login-accent:#0369a1; --login-accent-dark:#07142f; --login-accent-mid:#0284c7; --login-accent-rgb:3,105,161; } body[data-module="comptabilite"] { --login-accent:#059669; --login-accent-dark:#022c22; --login-accent-mid:#10b981; --login-accent-rgb:5,150,105; } body[data-module="admin"] { --login-accent:#173f8f; --login-accent-dark:#07142f; --login-accent-mid:#1e56c4; --login-accent-rgb:23,63,143; } /* ── Reset ────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body.pnx-login-page { display: flex; min-height: 100vh; background: var(--login-bg); font-family: Inter, "Segoe UI", system-ui, -apple-system, Arial, sans-serif; color: var(--login-ink); } /* ── Layout ───────────────────────────────────────────────────── */ .pnx-login-wrap { display: flex; width: 100%; min-height: 100vh; } /* ── Brand panel (left) ───────────────────────────────────────── */ .pnx-login-brand { flex: 0 0 48%; position: relative; display: flex; flex-direction: column; justify-content: flex-end; /* content at bottom, hero icon floats center */ align-items: flex-start; padding: 0 0 48px 52px; overflow: hidden; background: var(--login-accent-dark); } /* Photo layer */ .pnx-brand-photo-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; } /* Strong module-color tint so the color dominates even from far away */ .pnx-brand-photo-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--login-accent-rgb), .92) 0%, rgba(var(--login-accent-rgb), .78) 40%, rgba(var(--login-accent-rgb), .55) 100% ); } /* Giant centered module icon — the main "visible from far" element */ .pnx-brand-hero { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; pointer-events: none; } .pnx-brand-hero-icon { font-size: 130px; line-height: 1; color: rgba(255,255,255,.92); text-shadow: 0 8px 40px rgba(0,0,0,.35); filter: drop-shadow(0 0 32px rgba(255,255,255,.25)); margin-bottom: 18px; } .pnx-brand-hero-title { font-size: 46px; font-weight: 950; color: #fff; letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 4px 24px rgba(0,0,0,.4); line-height: 1; } .pnx-brand-hero-sub { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.65); letter-spacing: .18em; text-transform: uppercase; margin-top: 8px; } /* Bottom info strip */ .pnx-brand-logo { width: 56px; height: 42px; background: rgba(255,255,255,.15); border: 1.5px solid rgba(255,255,255,.3); border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 5px; margin-bottom: 16px; position: relative; z-index: 2; } .pnx-brand-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; } .pnx-brand-name { font-size: 18px; font-weight: 900; color: rgba(255,255,255,.9); line-height: 1; margin-bottom: 4px; position: relative; z-index: 2; letter-spacing: .02em; } .pnx-brand-module { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); border-radius: 50px; padding: 5px 14px; font-size: 11px; font-weight: 800; color: rgba(255,255,255,.9); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 14px; position: relative; z-index: 2; } .pnx-brand-module i { font-size: 12px; } .pnx-brand-tagline { font-size: 13px; color: rgba(255,255,255,.65); line-height: 1.5; max-width: 280px; position: relative; z-index: 2; } /* Feature pills */ .pnx-brand-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; position: relative; z-index: 2; } .pnx-brand-pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 50px; padding: 6px 14px; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.9); } .pnx-brand-pill i { font-size: 13px; } /* Bottom credit */ .pnx-brand-footer { position: absolute; bottom: 24px; left: 56px; font-size: 11px; color: rgba(255,255,255,.45); z-index: 1; } /* ── Logo propriétaire — top right du panneau form ───────────── */ .pnx-form-owner { position: absolute; top: 20px; right: 24px; display: flex; align-items: center; gap: 9px; z-index: 10; } .pnx-form-owner-logo { width: 38px; height: 38px; object-fit: contain; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,.12); border: 1.5px solid #e8eef6; background: #fff; padding: 2px; } .pnx-form-owner-name { font-size: 12px; font-weight: 800; color: var(--login-muted); letter-spacing: .03em; white-space: nowrap; } /* ── Form panel (right) ───────────────────────────────────────── */ .pnx-login-form-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px 40px; background: var(--login-surface); position: relative; border-top: 8px solid var(--login-accent); } /* Module color wash at top of form panel */ .pnx-login-form-wrap::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 240px; background: linear-gradient(180deg, rgba(var(--login-accent-rgb),.10) 0%, transparent 100%); pointer-events: none; } .pnx-login-form-inner { width: 100%; max-width: 400px; } .pnx-login-heading { font-size: 28px; font-weight: 900; color: var(--login-accent); margin-bottom: 6px; } .pnx-login-sub { font-size: 13.5px; color: var(--login-muted); margin-bottom: 32px; } /* Alerts */ .pnx-alert { border-radius: 10px; padding: 12px 16px; font-size: 13px; font-weight: 500; margin-bottom: 20px; display: flex; align-items: flex-start; gap: 10px; } .pnx-alert i { font-size: 15px; margin-top: 1px; flex-shrink: 0; } .pnx-alert-error { background: #fff1f2; border-left: 4px solid #e11d48; color: #9f1239; } .pnx-alert-warning { background: #fffbeb; border-left: 4px solid #f59e0b; color: #92400e; } .pnx-alert-success { background: #f0fdf4; border-left: 4px solid #22c55e; color: #166534; } .pnx-alert-banned { background: #fff1f2; border-left: 4px solid #dc2626; color: #991b1b; } /* Form elements */ .pnx-form-group { margin-bottom: 20px; } .pnx-form-label { display: block; font-size: 13px; font-weight: 700; color: var(--login-ink); margin-bottom: 7px; } .pnx-form-control { width: 100%; height: 46px; padding: 0 14px; border: 1.5px solid #dde6f1; border-radius: 10px; font-size: 14px; color: var(--login-ink); background: #fafbfd; transition: border-color .2s, box-shadow .2s; outline: none; font-family: inherit; } .pnx-form-control:focus { border-color: var(--login-accent); background: #fff; box-shadow: 0 0 0 3px rgba(var(--login-accent-rgb), .12); } .pnx-form-control::placeholder { color: #94a3b8; } /* Password toggle */ .pnx-input-group { position: relative; } .pnx-input-group .pnx-form-control { padding-right: 46px; } .pnx-pwd-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 4px; cursor: pointer; color: var(--login-muted); display: flex; align-items: center; transition: color .15s; } .pnx-pwd-toggle:hover { color: var(--login-accent); } /* Submit button */ .pnx-btn-submit { width: 100%; height: 48px; border: none; border-radius: 10px; background: linear-gradient(135deg, var(--login-accent-dark), var(--login-accent)); color: #fff; font-size: 14.5px; font-weight: 800; letter-spacing: .02em; cursor: pointer; transition: opacity .2s, transform .15s, box-shadow .2s; box-shadow: 0 4px 18px rgba(var(--login-accent-rgb), .35); display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 28px; font-family: inherit; } .pnx-btn-submit:hover { opacity: .93; transform: translateY(-1px); box-shadow: 0 8px 28px rgba(var(--login-accent-rgb), .45); } .pnx-btn-submit:active { transform: translateY(0); opacity: 1; } /* Loading state */ .pnx-btn-submit.loading { opacity: .7; pointer-events: none; } /* Module switcher links */ .pnx-login-modules { margin-top: 36px; padding-top: 24px; border-top: 1px solid #e8eef6; } .pnx-login-modules-label { font-size: 11px; font-weight: 700; color: var(--login-muted); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 14px; } .pnx-module-links { display: flex; flex-wrap: wrap; gap: 8px; } .pnx-module-link { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 8px; font-size: 11.5px; font-weight: 700; text-decoration: none; border: 1.5px solid transparent; transition: background .15s, border-color .15s; white-space: nowrap; } .pnx-module-link:hover { text-decoration: none; opacity: .85; } .pnx-module-link-devis { color:#92400e; background:#fef3c7; border-color:#fde68a; } .pnx-module-link-achat { color:#134e4a; background:#ccfbf1; border-color:#99f6e4; } .pnx-module-link-commande { color:#4c1d95; background:#ede9fe; border-color:#ddd6fe; } .pnx-module-link-gestock { color:#312e81; background:#e0e7ff; border-color:#c7d2fe; } .pnx-module-link-secretariat { color:#831843; background:#fce7f3; border-color:#fbcfe8; } .pnx-module-link-rh { color:#075985; background:#e0f2fe; border-color:#bae6fd; } .pnx-module-link-comptabilite { color:#064e3b; background:#d1fae5; border-color:#a7f3d0; } .pnx-module-link-admin { color:#1e3a8a; background:#dbeafe; border-color:#bfdbfe; } /* ── Responsive ───────────────────────────────────────────────── */ @media (max-width: 768px) { .pnx-login-brand { display: none; } .pnx-login-form-wrap { padding: 40px 24px; } } @media (max-width: 480px) { .pnx-login-form-wrap { padding: 32px 18px; } .pnx-login-heading { font-size: 22px; } }