/** * SpineNextGen — ERP Login (cinematic, theme-aware, premium UI). * * Loaded alongside living-theme.css. All rules are scoped under * `.erp-login-stage` so this stylesheet never affects other login * portals (emp / fa / racks / wms / crm) that share loginlayout. * * Visual layers (back → front, all stacked inside .erp-login-stage): * 1. .erp-login-backdrop fallback gradient (always visible) * 2. .erp-login-scene--{morning|day|dusk|night} image scenes * cross-fade on data-theme change. Only the active theme's * image is loaded on first paint; the other three are warmed * up after `window.load` via the .erp-login-prewarm class. * 3. .erp-login-veil — theme-aware readability gradient * 4. .erp-login-ambient — slow drifting glow for cinematic life * 5. .erp-login-snow — lightweight CSS-only snow on Night * 6. .erp-login-card — glassmorphic form card with theme glow * 7. .erp-login-time-pill — fixed bottom-right mode indicator * * Theme tokens (--lt-*) and the active palette are inherited from * living-theme.css. The login layout sets data-living-active and * data-theme on inline (in ) so the very first paint * already reflects the right time-of-day mood. */ /* ========================================================= * Stage — full-viewport scenic frame * ========================================================= */ .erp-login-stage { position: relative; min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; overflow: hidden; isolation: isolate; font-family: 'Source Sans Pro', sans-serif; color: var(--lt-text, #1c2735); background-color: var(--lt-app-bg, #0d1424); transition: background-color 1200ms ease, color 800ms ease; } /* ========================================================= * Backdrop — wrapper for image scenes + fallback gradient * ========================================================= */ .erp-login-backdrop { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background-color: var(--lt-app-bg); transition: background-color 1200ms ease, background-image 1200ms ease; } /* Fallback sky gradient per theme — shows if image fails or while loading. */ html[data-theme="morning"] .erp-login-backdrop, html:not([data-theme]) .erp-login-backdrop { background-image: linear-gradient(180deg, #ffc8a0 0%, #ffd6b5 28%, #ffe6cf 55%, #fff1de 78%, #ffd1a8 100%); } html[data-theme="day"] .erp-login-backdrop { background-image: linear-gradient(180deg, #c9deef 0%, #dbe9f8 28%, #ecf3fc 55%, #f6faff 78%, #cfe0f1 100%); } html[data-theme="dusk"] .erp-login-backdrop { background-image: linear-gradient(180deg, #ff9a6b 0%, #ffb486 25%, #ffc89f 50%, #ffd0a4 75%, #e6724a 100%); } html[data-theme="night"] .erp-login-backdrop { background-image: linear-gradient(180deg, #060c1a 0%, #0e1b36 25%, #15264a 50%, #0c1a36 75%, #050a18 100%); } /* ========================================================= * Image scenes — one per theme, cross-fade on theme change * ========================================================= */ .erp-login-scene { position: absolute; inset: 0; z-index: 1; background-size: cover; background-position: center 35%; background-repeat: no-repeat; background-color: transparent; opacity: 0; transform: scale(1.04); will-change: opacity; transition: opacity 1600ms cubic-bezier(0.4, 0, 0.2, 1), transform 60s linear; } /* Background-image is declared ONLY when the theme is active OR the prewarm class has been added (after window.load). This way the very first paint downloads exactly one ~2 MB image; the other three are fetched in the background a moment later and then theme switches are instant. */ html[data-theme="morning"] .erp-login-scene--morning, html.erp-login-prewarm .erp-login-scene--morning { background-image: url('../images/login-bg/login-bg-morning.jpg'); } html[data-theme="day"] .erp-login-scene--day, html.erp-login-prewarm .erp-login-scene--day { background-image: url('../images/login-bg/login-bg-day.jpg'); } html[data-theme="dusk"] .erp-login-scene--dusk, html.erp-login-prewarm .erp-login-scene--dusk { background-image: url('../images/login-bg/login-bg-dusk.jpg'); } html[data-theme="night"] .erp-login-scene--night, html.erp-login-prewarm .erp-login-scene--night { background-image: url('../images/login-bg/login-bg-night.jpg'); } /* Active scene fades in and gets a slow ken-burns zoom. */ html[data-theme="morning"] .erp-login-scene--morning, html[data-theme="day"] .erp-login-scene--day, html[data-theme="dusk"] .erp-login-scene--dusk, html[data-theme="night"] .erp-login-scene--night { opacity: 1; transform: scale(1.08); } /* ========================================================= * Readability veil — gradient over the scene so the card sits * on a soft, controllable background. * ========================================================= */ .erp-login-veil { position: absolute; inset: 0; z-index: 2; pointer-events: none; transition: background 1400ms ease; } html[data-theme="morning"] .erp-login-veil, html:not([data-theme]) .erp-login-veil { background: linear-gradient(115deg, rgba(255, 240, 220, 0.55) 0%, rgba(255, 220, 195, 0.20) 45%, rgba(255, 200, 175, 0.05) 100%); } html[data-theme="day"] .erp-login-veil { background: linear-gradient(115deg, rgba(220, 235, 255, 0.50) 0%, rgba(225, 240, 255, 0.18) 45%, rgba(240, 250, 255, 0.05) 100%); } html[data-theme="dusk"] .erp-login-veil { background: linear-gradient(115deg, rgba(255, 220, 195, 0.50) 0%, rgba(255, 180, 130, 0.18) 45%, rgba(190, 100, 60, 0.05) 100%); } html[data-theme="night"] .erp-login-veil { background: linear-gradient(115deg, rgba(8, 16, 32, 0.70) 0%, rgba(10, 20, 38, 0.42) 45%, rgba(12, 24, 46, 0.15) 100%); } /* ========================================================= * Ambient drift — slow soft glow that breathes * ========================================================= */ .erp-login-ambient { position: absolute; inset: -10%; z-index: 3; pointer-events: none; background-image: radial-gradient(40% 35% at 18% 28%, var(--lt-grad-glow, rgba(255,255,255,0.10)), transparent 70%), radial-gradient(35% 40% at 80% 78%, var(--lt-accent-soft, rgba(255,255,255,0.08)), transparent 70%); opacity: 0.55; mix-blend-mode: screen; animation: erp-login-ambient-drift 38s ease-in-out infinite alternate; transition: opacity 1400ms ease; } html[data-theme="night"] .erp-login-ambient { mix-blend-mode: screen; opacity: 0.40; } @keyframes erp-login-ambient-drift { 0% { transform: translate(0, 0); } 100% { transform: translate(26px, 18px); } } /* ========================================================= * Snow particles — lightweight CSS-only, Night theme only * ========================================================= */ .erp-login-snow { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity 1400ms ease; } html[data-theme="night"] .erp-login-snow { opacity: 0.55; background-image: radial-gradient(1.6px 1.6px at 12% 18%, rgba(255,255,255,0.95), transparent 70%), radial-gradient(1px 1px at 32% 8%, rgba(255,255,255,0.75), transparent 70%), radial-gradient(1.3px 1.3px at 48% 22%, rgba(255,255,255,0.65), transparent 70%), radial-gradient(1px 1px at 68% 14%, rgba(255,255,255,0.75), transparent 70%), radial-gradient(1.4px 1.4px at 78% 26%, rgba(255,255,255,0.55), transparent 70%), radial-gradient(1px 1px at 8% 38%, rgba(255,255,255,0.65), transparent 70%), radial-gradient(1.2px 1.2px at 22% 52%, rgba(255,255,255,0.55), transparent 70%), radial-gradient(1px 1px at 88% 48%, rgba(255,255,255,0.45), transparent 70%); background-size: 400px 400px, 300px 300px, 420px 420px, 280px 280px, 380px 380px, 340px 340px, 320px 320px, 420px 420px; animation: erp-login-snow-drift 110s linear infinite; } @keyframes erp-login-snow-drift { 0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } 100% { background-position: 60px 400px, -40px 300px, 90px 420px, -70px 280px, 50px 380px, -55px 340px, 80px 320px, -50px 420px; } } /* ========================================================= * Card — premium glass, theme-aware border glow + focus pulse * ========================================================= */ .erp-login-card { position: absolute; left: 10%; z-index: 5; width: 100%; max-width: 440px; padding: 2.5rem 2.25rem 2rem; border-radius: 24px; background-color: rgba(255, 255, 255, 0.62); border: 1px solid rgba(255, 255, 255, 0.45); backdrop-filter: blur(36px) saturate(170%); -webkit-backdrop-filter: blur(36px) saturate(170%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 0 0 1px var(--lt-accent-soft), 0 36px 80px rgba(20, 30, 50, 0.22), 0 8px 28px rgba(20, 30, 50, 0.12); color: var(--lt-text, #1c2735); transition: background-color 800ms ease, border-color 800ms ease, color 600ms ease, box-shadow 800ms ease; } /* Per-theme card tints + outer glow */ html[data-theme="morning"] .erp-login-card { background-color: rgba(255, 248, 240, 0.66); border-color: rgba(255, 255, 255, 0.55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 0 0 1px var(--lt-accent-soft), 0 36px 80px rgba(120, 60, 40, 0.18), 0 8px 28px rgba(120, 60, 40, 0.10); } html[data-theme="dusk"] .erp-login-card { background-color: rgba(255, 244, 230, 0.58); border-color: rgba(255, 245, 225, 0.45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 0 1px var(--lt-accent-soft), 0 36px 80px rgba(160, 70, 30, 0.22), 0 8px 28px rgba(160, 70, 30, 0.12); } html[data-theme="night"] .erp-login-card { background-color: rgba(14, 24, 48, 0.50); border-color: rgba(255, 255, 255, 0.10); color: var(--lt-text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 0 0 1px rgba(107, 143, 208, 0.22), 0 0 60px rgba(107, 143, 208, 0.18), 0 36px 80px rgba(0, 0, 0, 0.55), 0 8px 28px rgba(0, 0, 0, 0.35); } /* Card breathes a little when a field is focused — premium feel */ .erp-login-card:focus-within { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 0 0 1.5px var(--lt-accent), 0 0 48px var(--lt-accent-soft), 0 36px 80px rgba(20, 30, 50, 0.22), 0 8px 28px rgba(20, 30, 50, 0.12); } html[data-theme="night"] .erp-login-card:focus-within { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 1.5px var(--lt-accent), 0 0 60px rgba(107, 143, 208, 0.40), 0 36px 80px rgba(0, 0, 0, 0.55), 0 8px 28px rgba(0, 0, 0, 0.35); } /* ========================================================= * Brand block — logo + portal subtitle + helper subline * ========================================================= */ .erp-login-brand { display: flex; flex-direction: column; align-items: center; margin-bottom: 1.75rem; } /* When the logo wraps an (e.g. Forgot Password page links back to login), strip the default anchor styling so the logo looks identical to the static logo on the login screen. */ .erp-login-brand-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; border-radius: 8px; transition: opacity 200ms ease, transform 200ms ease; } .erp-login-brand-link:hover, .erp-login-brand-link:focus-visible { opacity: 0.9; outline: none; } .erp-login-brand-link:focus-visible { box-shadow: 0 0 0 3px var(--lt-accent-soft); } .erp-login-logo { max-width: 220px; width: 100%; height: auto; margin-bottom: 0.3rem; } /* Color logo on light themes, white logo on night */ .erp-login-logo--white { display: none; } html[data-theme="night"] .erp-login-logo--color { display: none; } html[data-theme="night"] .erp-login-logo--white { display: block; } .erp-login-subtitle { color: var(--lt-accent-strong); transition: color 600ms ease; font-family: 'Playfair Display', serif; font-weight: 600; font-size: 34px; transition: color 600ms ease; } html[data-theme="night"] .erp-login-subtitle { color: var(--lt-accent); text-shadow: 0 0 18px rgba(107, 143, 208, 0.45); } html[data-theme="dusk"] .erp-login-subtitle { color: var(--lt-accent-strong); } /* Optional helper line under the subtitle — used by Forgot Password to explain what will happen ("we'll send a secure reset link"). */ .erp-login-helper { margin: 0.65rem 0 0; font-size: 0.86rem; line-height: 1.5; color: var(--lt-text-muted); text-align: center; max-width: 320px; transition: color 600ms ease; } /* ========================================================= * Form fields — soft glass input with theme-aware focus halo * ========================================================= */ .erp-login-form .form-group { margin-bottom: 1.1rem; } .erp-login-field { position: relative; display: flex; align-items: center; gap: 0.35rem; background-color: rgba(255, 255, 255, 0.55); border: 1px solid var(--lt-border, #d8e3f0); border-radius: 12px; padding: 0 12px; transition: border-color 220ms ease, box-shadow 220ms ease, background-color 220ms ease; } html[data-theme="morning"] .erp-login-field { background-color: rgba(255, 250, 244, 0.68); } html[data-theme="dusk"] .erp-login-field { background-color: rgba(255, 247, 237, 0.60); } html[data-theme="night"] .erp-login-field { background-color: rgba(10, 18, 35, 0.42); border-color: rgba(255, 255, 255, 0.12); } .erp-login-field:focus-within { border-color: var(--lt-accent); box-shadow: 0 0 0 4px var(--lt-accent-soft); background-color: rgba(255, 255, 255, 0.72); } html[data-theme="night"] .erp-login-field:focus-within { background-color: rgba(10, 18, 35, 0.68); } .erp-login-field.is-invalid { border-color: #dc3545; box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.12); } .erp-login-field .field-icon { flex-shrink: 0; width: 22px; text-align: center; color: var(--lt-text-muted); font-size: 0.95rem; } .erp-login-field input.form-control { flex: 1 1 auto; border: 0; background: transparent; padding: 12px 6px; color: var(--lt-text); line-height: 1.4; outline: none; width: 100%; box-shadow: none !important; font-family: var(--font-Ginger); font-weight: 300; font-size: 14px; } .erp-login-field input.form-control:focus { outline: none; box-shadow: none; } .erp-login-field input.form-control::placeholder { color: var(--lt-text-muted); opacity: 0.85; } .erp-login-field .field-toggle { flex-shrink: 0; border: 0; background: transparent; padding: 4px 8px; color: var(--lt-text-muted); cursor: pointer; font-size: 0.95rem; border-radius: 6px; transition: color 200ms ease, background-color 200ms ease; } .erp-login-field .field-toggle:hover, .erp-login-field .field-toggle:focus-visible { color: var(--lt-accent-strong); background-color: var(--lt-accent-soft); outline: none; } .erp-login-form .invalid-feedback { display: block; font-size: 0.8rem; margin-top: 0.4rem; color: #dc3545; } html[data-theme="night"] .erp-login-form .invalid-feedback { color: #ff8a96; } /* ========================================================= * Flash + meta row * ========================================================= */ .erp-login-flash { margin-bottom: 1rem; } .erp-login-flash:empty, .erp-login-flash > div:empty { display: none; } .erp-login-flash .alert { border-radius: 10px; font-size: 0.86rem; padding: 0.65rem 0.9rem; margin: 0 0 0.6rem; border: 1px solid var(--lt-border); background-color: rgba(255, 255, 255, 0.55); color: var(--lt-text); } html[data-theme="night"] .erp-login-flash .alert { background-color: rgba(255, 255, 255, 0.08); } .erp-login-flash .alert-success { color: #1d7a4f; border-color: rgba(25, 135, 84, 0.30); } .erp-login-flash .alert-danger { color: #b22a36; border-color: rgba(220, 53, 69, 0.30); } .erp-login-flash .alert-warning { color: #8a6500; border-color: rgba(255, 193, 7, 0.30); } html[data-theme="night"] .erp-login-flash .alert-success { color: #5fd99a; } html[data-theme="night"] .erp-login-flash .alert-danger { color: #ff8a96; } html[data-theme="night"] .erp-login-flash .alert-warning { color: #ffd166; } .erp-login-meta { display: flex; align-items: center; justify-content: flex-end; margin: 0.4rem 0 1.5rem; } /* Centred variant — used on Forgot Password for the "Back to Login" link sitting beneath the submit button. */ .erp-login-meta--center { justify-content: center; margin: 1.1rem 0 0; } .erp-login-meta a { display: inline-flex; align-items: center; gap: 6px; color: var(--lt-accent-strong); text-decoration: none; letter-spacing: 0.01em; transition: color 200ms ease, transform 200ms ease; font-family: var(--font-Ginger); font-weight: 300; font-size: 16px; } .erp-login-meta a i { font-size: 0.78rem; transition: transform 200ms ease; } .erp-login-meta a:hover, .erp-login-meta a:focus-visible { text-decoration: underline; color: var(--lt-accent); outline: none; } .erp-login-meta a:hover i.fa-arrow-left, .erp-login-meta a:focus-visible i.fa-arrow-left { transform: translateX(-3px); } html[data-theme="night"] .erp-login-meta a { color: var(--lt-accent); } /* ========================================================= * Submit button — theme-tinted gradient with lift on hover * ========================================================= */ .erp-login-submit { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 0.85rem 1.25rem; font-family: 'Montserrat', sans-serif; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.08em; color: #ffffff; border: 0; border-radius: 12px; cursor: pointer; background-image: linear-gradient(135deg, var(--lt-accent) 0%, var(--lt-accent-strong) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 10px 26px rgba(20, 30, 50, 0.22); transition: transform 180ms ease, box-shadow 220ms ease, background-image 800ms ease, opacity 200ms ease; } .erp-login-submit:hover:not(:disabled), .erp-login-submit:focus-visible:not(:disabled) { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 14px 32px rgba(20, 30, 50, 0.28); outline: none; } .erp-login-submit:active:not(:disabled) { transform: translateY(0); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 6px 14px rgba(20, 30, 50, 0.20); } .erp-login-submit:disabled { opacity: 0.75; cursor: not-allowed; } /* ========================================================= * Time-of-day indicator pill — fixed bottom-right * ========================================================= */ .erp-login-time-pill { position: fixed; right: 22px; bottom: 22px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background-color: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.55); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; color: var(--lt-text); box-shadow: 0 8px 22px rgba(20, 30, 50, 0.12); z-index: 10; pointer-events: none; user-select: none; transition: background-color 800ms ease, color 600ms ease, border-color 800ms ease; } html[data-theme="night"] .erp-login-time-pill { background-color: rgba(20, 30, 50, 0.55); border-color: rgba(255, 255, 255, 0.12); color: var(--lt-text); } .erp-login-time-pill i { color: var(--lt-accent); font-size: 0.9rem; transition: color 600ms ease; } html[data-theme="night"] .erp-login-time-pill i { color: var(--lt-time-accent); } /* ========================================================= * Responsive * ========================================================= */ @media (max-width: 600px) { .erp-login-stage { padding: 1rem; } .erp-login-card { padding: 2rem 1.5rem 1.75rem; border-radius: 18px; } .erp-login-logo { max-width: 180px; } .erp-login-subtitle { font-size: 0.85rem; letter-spacing: 0.18em; } .erp-login-time-pill { right: 14px; bottom: 14px; padding: 6px 12px; font-size: 0.78rem; } /* Scenes are also focused on the leopard's face on mobile (right side). */ .erp-login-scene { background-position: 72% center; } } @media (max-width: 550px) { .erp-login-card { position: relative; left:auto } } @media (max-width: 360px) { .erp-login-time-pill { display: none; } } /* Reduce motion: drop ken-burns, ambient drift, snow drift */ @media (prefers-reduced-motion: reduce) { .erp-login-scene { transform: none !important; transition: opacity 400ms ease !important; } .erp-login-ambient, .erp-login-snow { animation: none !important; } .erp-login-card, .erp-login-field, .erp-login-submit, .erp-login-time-pill, .erp-login-veil, .erp-login-backdrop { transition-duration: 200ms !important; } }