/* erp-shell.css — extracted from erp_home.html */ /* ── Hero redesign ───────────────────────────── Performance: `contain: paint` isolates the hero's paint subtree so the absolutely-positioned glow orb cannot trigger a full-document repaint. The two decorative pseudo-elements (::before dot-grid and ::after 560px glow) are deferred until gets the class `erp-hero-decorated`, which `js/erp_home-01.js` adds after the first frame is committed. This lets `h1.erp-hero-title` (the LCP element) paint without waiting on those heavy gradients. */ .erp-hero { position: relative; background: #060d1f; color: #f1f5f9; padding: 2.1rem 2rem 2rem; border-radius: 20px; overflow: hidden; border: 1px solid rgb(99,102,241,0.18); box-shadow: 0 30px 80px rgb(6,13,31,0.75), 0 0 0 1px rgb(255,255,255,0.03) inset; contain: paint; } /* dot-grid overlay — gated behind erp-hero-decorated so it does not block the LCP h1 from painting. */ html.erp-hero-decorated .erp-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgb(99,102,241,0.13) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; z-index: 0; } /* glow orb — same deferred-paint gate as above. */ html.erp-hero-decorated .erp-hero::after { content: ''; position: absolute; top: -100px; right: -60px; width: 560px; height: 560px; background: radial-gradient(circle, rgb(99,102,241,0.22) 0%, rgb(139,92,246,0.1) 40%, transparent 70%); pointer-events: none; z-index: 0; } .erp-hero-glow-line { position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgb(99,102,241,0.6), rgb(139,92,246,0.55), transparent); z-index: 3; } .erp-hero-inner { position: relative; z-index: 2; display: flex; align-items: flex-start; gap: 3rem; } .erp-hero-content { flex: 1; min-width: 0; contain: layout style; } .erp-hero-eyebrow { display: inline-flex; align-items: center; gap: 7px; background: rgb(99,102,241,0.13); border: 1px solid rgb(99,102,241,0.32); color: #a5b4fc; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; padding: 5px 13px; border-radius: 100px; margin-bottom: 1.3rem; } .erp-hero-eyebrow .edot { width: 6px; height: 6px; background: #ef4444; border-radius: 50%; box-shadow: 0 0 0 3px rgb(239,68,68,0.14), 0 0 10px rgb(239,68,68,0.75); animation: edot-pulse 2s ease-in-out infinite; } @keyframes edot-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.45;transform:scale(.65)} } .erp-hero-title { font-size: 2.85rem; font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; color: #f8fafc; margin: 0 0 1.1rem; } .erp-hero-title .accent { background: linear-gradient(135deg,#818cf8,#c084fc,#38bdf8); -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text; } .erp-hero-subtitle { font-size: 1.02rem; line-height: 1.68; color: #94a3b8; margin: 0 0 2rem; max-width: 470px; } .erp-hero-cta { display:flex; gap:.85rem; flex-wrap:wrap; margin-bottom:1.4rem; } .erp-hero-cta .btn-primary { background: linear-gradient(135deg,#6366f1,#8b5cf6) !important; color: #fff !important; padding: .75rem 1.8rem; border-radius: 10px; font-weight: 600; font-size: .92rem; text-decoration: none; border: none; box-shadow: 0 8px 24px rgb(99,102,241,.45); transition: transform .2s, box-shadow .2s; } .erp-hero-cta .btn-primary:hover { transform:translateY(-2px); box-shadow:0 14px 32px rgb(99,102,241,.55); } .erp-hero-cta .btn-outline { background: rgb(255,255,255,.06) !important; color: #e2e8f0 !important; padding: .75rem 1.8rem; border-radius: 10px; font-weight: 600; font-size: .92rem; text-decoration: none; border: 1px solid rgb(255,255,255,.15) !important; transition: background .2s, border-color .2s, transform .2s; } .erp-hero-cta .btn-outline:hover { background:rgb(255,255,255,.1)!important; border-color:rgb(255,255,255,.3)!important; transform:translateY(-2px); } .erp-hero-stats { display:flex; gap:1.4rem; flex-wrap:wrap; align-items:center; } .erp-hero-stat { display:flex; flex-direction:column; } .erp-hero-stat-value { font-size:1.45rem; font-weight:800; color:#f1f5f9; line-height:1; } .erp-hero-stat-label { font-size:.72rem; color:#64748b; margin-top:3px; text-transform:uppercase; letter-spacing:.07em; } .erp-hero-stat-divider { width:1px; height:32px; background:rgb(255,255,255,.1); align-self:center; } /* floating metric cards */ .erp-hero-visual { flex:0 0 320px; display:flex; flex-direction:column; gap:.7rem; } .hero-kpi-card { background: rgb(15,23,42,.92); border: 1px solid rgb(148,163,184,.16); border-radius: 14px; padding: .95rem 1.1rem; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 12px 28px rgb(2,6,23,.28); display: flex; align-items: center; gap: .85rem; animation: none; will-change: auto; } @keyframes kpi-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} } @media (prefers-reduced-motion: reduce) { .hero-kpi-card { animation: none; will-change: auto; } } .hero-kpi-icon { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:.95rem; flex-shrink:0; } .hero-kpi-body { flex:1; min-width:0; } .hero-kpi-meta { font-size:.67rem; color:#64748b; text-transform:uppercase; letter-spacing:.07em; } .hero-kpi-val { font-size:1.1rem; font-weight:700; color:#f1f5f9; line-height:1.25; } .hero-kpi-badge { font-size:.68rem; font-weight:600; padding:3px 9px; border-radius:100px; white-space:nowrap; } .kpi-green { background:rgb(16,185,129,.14); color:#34d399; } .kpi-indigo { background:rgb(99,102,241,.14); color:#818cf8; } .kpi-amber { background:rgb(251,191,36,.13); color:#fbbf24; } @media(width <=1100px){ .erp-hero{padding:2.5rem 2rem;} .erp-hero-title{font-size:2.2rem;} .erp-hero-visual{flex:0 0 270px;} } @media(width <=768px){ .erp-hero{padding:2rem 1.25rem;border-radius:14px;} .erp-hero-inner{flex-direction:column;gap:2rem;} .erp-hero-title{font-size:1.9rem;} .erp-hero-visual{flex:none;width:100%;} .erp-hero-cta .btn-primary,.erp-hero-cta .btn-outline{width:100%;text-align:center;} } @media(width <=600px){ .erp-hero{padding:1.5rem 1rem;border-radius:12px;} .erp-hero-title{font-size:1.5rem;} .erp-hero-stat-label{font-size:.75rem;} .erp-hero-stat-value{font-size:1.2rem;} .erp-hero::after{display:none;} } @media(width <=480px){ .erp-hero{padding:1.25rem 0.75rem;} .erp-hero-title{font-size:1.3rem;} .erp-hero-stats{gap:.8rem;} .erp-hero-stat-divider{height:24px;} } .user-dropdown .dropdown-menu a:hover { background: #f1f5f9; } /* Desktop navbar layout — must be here since site.css is not loaded in the ERP shell */ #util-bar { background: rgb(7, 13, 31, 0.95); border-bottom: 1px solid rgb(255,255,255,.06); } #util-bar .util-bar-inner { display: flex; align-items: center; justify-content: flex-end; max-width: 1240px; margin: 0 auto; padding: 0.5rem 1.5rem; gap: 0.85rem; min-height: 44px; } .util-btn, .util-lang-btn { display: inline-flex; align-items: center; gap: 8px; padding: 0.6rem 1rem; border-radius: 999px; font-size: 0.88rem; font-weight: 700; color: #e2ecff; text-decoration: none; background: rgb(255,255,255,.04); border: 1px solid rgb(255,255,255,.1); cursor: pointer; transition: transform .18s ease, background .18s ease, border-color .18s ease; } .util-btn:hover, .util-lang-btn:hover { background: rgb(255,255,255,.12); border-color: rgb(255,255,255,.18); transform: translateY(-1px); } #navUserProfile .nav-user-chip, #navUserChip.nav-user-chip { display: inline-flex; align-items: center; gap: 8px; background: rgb(255,255,255,0.08); border: 1px solid rgb(255,255,255,0.15); border-radius: 999px; padding: 3px 10px 3px 4px; } /* When the name span is hidden, collapse the chip so the avatar reads as a single 36px circle aligned with the bell and padlock. */ #navUserChip.nav-user-chip:not(:has(.nav-user-name:not([style*="display:none"]))), #navUserProfile .nav-user-chip:not(:has(.nav-user-name:not([style*="display:none"]))) { background: transparent !important; border: 0 !important; padding: 0 !important; gap: 0 !important; } #navUserProfile .nav-user-avatar, #navUserChip .nav-user-avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; color: #fff; background: linear-gradient(135deg, #ff0f9b 0%, #ff4bb8 100%); /* Double concentric ring — pink-family halo that blends naturally with the inner hot-pink gradient. Soft pink-300 outer ring with a translucent buffer layer in between. */ box-shadow: 0 0 0 2px rgb(244, 114, 182, 0.25), 0 0 0 3.5px rgb(251, 207, 232, 0.45), 0 4px 12px rgb(255, 15, 155, 0.35); flex-shrink: 0; text-transform: uppercase; } #navUserProfile .util-btn.util-btn-logout { padding: 0.42rem 0.78rem; font-size: 0.76rem; gap: 6px; border-radius: 999px; line-height: 1; background: linear-gradient(135deg,#f97316,#ea580c); color: #fff; border-color: transparent; } #navUserProfile .util-btn.util-btn-logout i { font-size: 0.62rem; } #navUserProfile .util-btn.util-btn-logout:hover { background: linear-gradient(135deg,#fb923c,#f97316); color: #fff; transform: translateY(-1px); } #util-bar .nav-auth-buttons #loginBtn.util-btn { background: linear-gradient(120deg, #38bdf8 0%, #6366f1 34%, #f472b6 67%, #f59e0b 100%); background-size: 220% 220%; border-color: transparent; color: #fff; box-shadow: 0 8px 22px rgb(99, 102, 241, 0.33), 0 3px 12px rgb(245, 158, 11, 0.28); } #util-bar .nav-auth-buttons #loginBtn.util-btn:hover { background: linear-gradient(120deg, #22d3ee 0%, #4f46e5 34%, #ec4899 67%, #fb923c 100%); color: #fff; box-shadow: 0 14px 30px rgb(99, 102, 241, 0.42), 0 6px 16px rgb(245, 158, 11, 0.35); transform: translateY(-2px); filter: saturate(1.05); } .util-lang-btn i { color: #38bdf8; text-shadow: 0 0 6px rgb(56,189,248,.45); } .util-lang-btn span { font-weight: 900; letter-spacing: .06em; } .util-lang-wrap { position: relative; margin-left: 0.5rem; } .nav-menu li a { display: inline-flex; align-items: center; justify-content: center; padding: 0.7rem 1rem; border-radius: 999px; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.01em; color: #e2ecff; text-decoration: none; transition: color .18s ease, background .18s ease, transform .18s ease; white-space: nowrap; } .nav-menu li a:hover { color: #fff; background: rgb(255,255,255,.08); transform: translateY(-1px); } #util-bar .dropdown-menu { display: none; position: absolute; top: calc(100% + 8px); right: 0; background: rgb(7, 13, 31, 0.98); border: 1px solid rgb(255,255,255,.1); border-radius: 14px; min-width: 180px; max-height: min(70vh, 420px); overflow-y: auto; box-shadow: 0 20px 55px rgb(0,0,0,.35); padding: 0.35rem 0; z-index: 100002; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } #util-bar .dropdown-menu li a { display: block; padding: 0.7rem 1rem; color: #e2ecff; text-decoration: none; transition: background .2s ease; } #util-bar .dropdown-menu li a:hover { background: rgb(255,255,255,.08); } .navbar { position: sticky; top: 0; width: 100%; z-index: 100000; } .nav-container { display: flex; align-items: center; width: 100%; max-width: 1240px !important; margin-left: auto; margin-right: auto; min-height: 68px; padding: 0.35rem 1.5rem; flex-wrap: nowrap; justify-content: space-between; gap: 1.5rem; position: relative; box-sizing: border-box; } .logo { display: flex; align-items: center; gap: 6px; font-size: 1.3rem; font-weight: 800; text-decoration: none; flex-shrink: 0; } .nav-actions-group { display: flex; align-items: center; flex-shrink: 0; gap: 6px; margin-left: auto; } .mobile-menu-btn { display: none; } .nav-menu { display: flex; align-items: center; gap: 1rem; margin: 0; padding: 0; list-style: none; flex: 1 1 auto; min-width: 0; overflow: visible; } @media (width >= 769px) and (width <= 1024px) { body.erp-body #navbar .nav-container { flex-wrap: nowrap !important; align-items: center !important; gap: 10px !important; } body.erp-body #navbar #navMenu, body.erp-body #navbar .nav-menu, body.erp-body #navbar #navMenu.mobile-open, body.erp-body #navbar .nav-menu.mobile-open { display: flex !important; flex-direction: row !important; position: static !important; width: auto !important; max-width: none !important; height: auto !important; max-height: none !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; overflow: auto visible !important; } body.erp-body #navbar .mobile-menu-btn { display: none !important; } } /* Platform & Products mega-dropdown fixes */ #navbar .nav-menu { overflow: visible !important; } #navbar .nav-menu > li.nav-dropdown { position: relative; display: inline-block; } /* Bridge the hover gap so mouseleave doesn't fire in the 8px margin */ #navbar .nav-menu > li.nav-dropdown > .dropdown-menu { margin-top: 0 !important; top: calc(100% + 4px) !important; z-index: 999999 !important; pointer-events: auto !important; } /* Keep menu open while cursor is inside it */ #navbar .nav-menu > li.nav-dropdown > .dropdown-menu::before { content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px; background: transparent; } /* Mega-menu chevron rotation on hover */ #navbar .nav-menu > li.nav-dropdown:hover .pp-chevron { transform: rotate(180deg); } /* Capital: JS pins this menu with position:fixed under the trigger. */ #navbar .nav-menu > li.capital-li { position: relative !important; } /* Capital list menu: anchor under trigger; JS fine-tunes viewport clamp. */ html body.erp-body #navbar .nav-menu > li.capital-li > .dropdown-menu, html body.erp-body #navbar #navMenu > li.capital-li > .dropdown-menu { position: absolute !important; top: calc(100% + 4px) !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translateX(-50%) !important; width: 260px !important; min-width: 220px !important; max-width: 280px !important; margin: 0 !important; padding: 0.5rem 0 !important; overflow: hidden auto !important; background: linear-gradient(135deg, #1a2942 0%, #0f172a 100%) !important; border: 1px solid rgb(255 255 255 / 10%) !important; box-shadow: 0 10px 25px rgb(0 0 0 / 30%) !important; z-index: 1000001 !important; } html body.erp-body #navbar .nav-menu > li.capital-li > .dropdown-menu > li { display: block !important; width: 100% !important; grid-template-columns: none !important; margin: 0 !important; } html body.erp-body #navbar .nav-menu > li.capital-li > .dropdown-menu a { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; width: 100% !important; box-sizing: border-box !important; white-space: nowrap !important; padding: 0.5rem 0.75rem !important; } /* Font Awesome glyphs vary in width; lock icon column so labels align. */ html body.erp-body #navbar .nav-menu > li.capital-li > .dropdown-menu a i, html body.erp-body #navbar #navMenu > li.capital-li > .dropdown-menu a i { flex: 0 0 16px !important; width: 16px !important; min-width: 16px !important; max-width: 16px !important; text-align: center !important; } /* site.css shifts generic dropdown links on hover; keep Capital rows stable. */ html body.erp-body #navbar .nav-menu > li.capital-li > .dropdown-menu a::before, html body.erp-body #navbar #navMenu > li.capital-li > .dropdown-menu a::before { display: none !important; content: none !important; } html body.erp-body #navbar .nav-menu > li.capital-li > .dropdown-menu a:hover, html body.erp-body #navbar #navMenu > li.capital-li > .dropdown-menu a:hover { padding-left: 0.75rem !important; } /* Landing horizontal gutters on all desktop/tablet widths. */ @media (width >= 769px) { html[data-active-module="landing"] body.erp-body #landing.module-section { padding-left: clamp(0.75rem, 1.5vw, 1.5rem) !important; padding-right: clamp(0.75rem, 1.5vw, 1.5rem) !important; overflow-x: visible !important; box-sizing: border-box !important; } html[data-active-module="landing"] body.erp-body #landing .erp-featured-row, html[data-active-module="landing"] body.erp-body #landing #modules-grid, html[data-active-module="landing"] body.erp-body #landing .unit-gateway-grid { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } } /* Marketplace nav button — Elinom brand gradient */ #navbar .nav-menu > li > a.marketplace-btn { background: linear-gradient(90deg, #38bdf8, #6366f1, #f472b6, #f59e0b, #38bdf8); background-size: 200% 200%; -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text; font-weight: 800; letter-spacing: 0.02em; position: relative; transition: all 0.3s ease; animation: heroMarqueeGradient 4s ease-in-out infinite; } #navbar .nav-menu > li > a.marketplace-btn:hover { filter: brightness(1.2) drop-shadow(0 0 6px rgb(99,102,241,0.4)); transform: translateY(-1px); } #navbar .nav-menu > li > a.marketplace-btn::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, #38bdf8, #6366f1, #f472b6, #f59e0b); border-radius: 2px; opacity: 0; transition: opacity 0.3s ease; } #navbar .nav-menu > li > a.marketplace-btn:hover::after { opacity: 1; } /* ── Notification bell + avatar in the utility bar ────────────────── */ #navNotifWrap { position: relative; flex-shrink: 0; display: inline-flex; align-items: center; } #navNotifBell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; background: transparent; border: 0; border-radius: 0; color: #cbd5e1; cursor: pointer; transition: transform .2s, color .2s; box-shadow: none; } #navNotifBell:hover { transform: translateY(-1px); color: #e2e8f0; background: transparent; box-shadow: none; } #navNotifBell i { font-size: 1.1rem; line-height: 1; color: inherit; } /* Unread: bell stays neutral grey; badge carries the alert colour. */ #navNotifBell.nav-bell--unread { color: #cbd5e1; } #navNotifBell.nav-bell--unread:hover { color: #e2e8f0; } /* Critical system alerts: gold bell + red badge. */ #navNotifBell.nav-bell--critical { color: #f59e0b; } #navNotifBell.nav-bell--critical:hover { color: #fbbf24; } /* Inner icon size handled in the #navNotifBell block above (0.8rem). */ #navNotifBadge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; background: #ef4444; color: #fff; font-size: 0.62rem; font-weight: 800; border-radius: 999px; border: 2px solid #0b1224; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } #navNotifBadge.nav-bell-badge-hidden { display: none !important; } #navNotifPanel { position: absolute; top: calc(100% + 8px); right: 0; width: 320px; background: #1e293b; border: 1px solid #334155; border-radius: 10px; box-shadow: 0 8px 32px rgb(0,0,0,0.45); z-index: 100010; overflow: hidden; } #navNotifPanel.nav-bell-panel-hidden { display: none !important; } .nav-bell-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid #334155; font-weight: 700; font-size: 0.82rem; color: #f1f5f9; } .nav-bell-panel-head button { background: none; border: none; color: #94a3b8; font-size: 0.72rem; cursor: pointer; padding: 0; } .nav-bell-panel-list { max-height: 320px; overflow-y: auto; padding: 6px 0; } .nav-bell-panel-empty { padding: 20px; text-align: center; color: #64748b; font-size: 0.8rem; } /* ── Global: gap between navbar and first content item ── */ body.erp-body .erp-container > .main-content { padding-top: 0 !important; } body.erp-body .erp-content-scroll { padding-top: 20px !important; } /* Hide landing-only chrome when any ERP module is active (all viewports). */ html[data-active-module]:not([data-active-module="landing"]) body.erp-body .footer, html[data-active-module]:not([data-active-module="landing"]) body.erp-body .erp-actions-band, html[data-active-shell-mode="app"] body.erp-body .footer, html[data-active-shell-mode="app"] body.erp-body .erp-actions-band { display: none !important; } /* Landing route: dormant module iframes must not reserve a blank panel. */ html[data-active-module="landing"] body.erp-body .erp-content-scroll > .module-section:not(#landing) { display: none !important; visibility: hidden !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; pointer-events: none !important; } html[data-active-module="landing"] body.erp-body .erp-content-scroll > .module-section:not(#landing) iframe, html[data-active-module="landing"] body.erp-body .erp-content-scroll > .module-section:not(#landing) .module-loader { display: none !important; visibility: hidden !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; opacity: 0 !important; pointer-events: none !important; } /* When #landing is active, never paint sibling module iframes even if data-active-module drifts before deferred landing-lock loads. */ body.erp-body #landing.module-section.active ~ .module-section, body.erp-body #landing.module-section.active ~ .module-section.active { display: none !important; visibility: hidden !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; pointer-events: none !important; } body.erp-body #landing.module-section.active ~ .module-section iframe, body.erp-body #landing.module-section.active ~ .module-section .module-loader { display: none !important; visibility: hidden !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; opacity: 0 !important; pointer-events: none !important; } html[data-active-module="landing"] body.erp-body .erp-actions-band { display: flex !important; } html[data-active-module="landing"] body.erp-body .footer { display: block !important; } /* ---------------------------------------------------------------- TABLET LAYOUT FIX (≤1280px) — FLEXBOX-BASED, NO VIEWPORT MATH Root cause of historical regressions: navbar wraps to two rows on tablet (Login/lang on top, logo/menu/search below) so its rendered height is ~140px, but the `--navbar-height` variable defaults to 102px. Every layout rule using `calc(100vh - var(--navbar-height))` therefore over-allocates height to .erp-container, pushing the iframe and its contents below the viewport — the user sees only the navbar and a blank white area. Fix: switch the shell to a pure flexbox column layout where the navbar consumes its natural height and .erp-container fills the remainder via flex:1. iframe takes height:100% of its parent. No more dependency on JS-measured navbar height. ---------------------------------------------------------------- */ @media (width <= 1280px) { html, body.erp-body { height: 100vh !important; max-height: 100vh !important; min-height: 100vh !important; overflow: hidden !important; } body.erp-body { display: flex !important; flex-direction: column !important; } body.erp-body .navbar { position: relative !important; top: auto !important; flex: 0 0 auto !important; z-index: 10000 !important; } /* Sidebar: off-canvas drawer, opened by mobile-sidebar-toggle. */ body.erp-body .erp-container > .sidebar { position: fixed !important; top: 0 !important; left: -320px !important; width: 280px !important; min-width: 280px !important; max-width: 80vw !important; height: 100vh !important; border-right: 1px solid rgb(255,255,255,0.06) !important; border-bottom: none !important; padding: 1rem 0.5rem !important; z-index: 9990 !important; transition: left 0.28s ease !important; box-shadow: none !important; } body.erp-body .erp-container > .sidebar.mobile-open, body.erp-body .erp-container > .sidebar.open { left: 0 !important; box-shadow: 8px 0 32px rgb(2,6,23,0.45) !important; } body.erp-body .erp-container > .sidebar .sidebar-nav ul { display: block !important; flex-wrap: nowrap !important; } /* Container: flex child that fills remaining viewport. */ body.erp-body .erp-container { flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; max-height: none !important; display: flex !important; flex-direction: column !important; position: relative !important; overflow: hidden !important; background: #f1f5f9 !important; } /* Main content: flex child filling container width and height. */ body.erp-body .erp-container > .main-content { position: relative !important; inset: auto !important; flex: 1 1 auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; visibility: visible !important; opacity: 1 !important; margin-left: 0 !important; width: 100% !important; max-width: 100% !important; height: auto !important; padding: 0 12px 12px !important; box-sizing: border-box !important; overflow: hidden !important; } body.erp-body .erp-content-scroll { display: flex !important; flex-direction: column !important; visibility: visible !important; opacity: 1 !important; flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; max-height: none !important; overflow-y: auto !important; box-sizing: border-box !important; padding-top: 0 !important; } body.erp-body #landing.module-section.active, body.erp-body #landing .erp-hero { margin-top: 0 !important; } /* Active module section fills the scroll area. */ body.erp-body .module-section { overflow-anchor: none; scroll-margin-top: 0; } body.erp-body .module-section.active { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; visibility: visible !important; opacity: 1 !important; } /* Iframe fills its module-section parent — no viewport math. */ body.erp-body .module-section.active iframe { display: block !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: none !important; flex: 1 1 auto !important; background: #fff !important; border-radius: 14px !important; border: 0 !important; } /* Landing module (no iframe) keeps its block layout so the hero and module grid stack vertically and scroll naturally. */ body.erp-body #landing.module-section.active { display: block !important; } } /* The ERP sidebar toggle is mobile-only. Keep it out of normal flow so it cannot inherit generic button styles and stretch into a full-width bar on tablet or desktop layouts. */ body.erp-body .mobile-sidebar-toggle { display: none !important; position: fixed !important; right: 16px !important; bottom: 16px !important; width: 48px !important; min-width: 48px !important; height: 48px !important; min-height: 48px !important; padding: 0 !important; align-items: center !important; justify-content: center !important; border: 0 !important; border-radius: 999px !important; background: #0f172a !important; color: #fff !important; box-shadow: 0 14px 32px rgb(2, 6, 23, 0.28) !important; z-index: 9995 !important; cursor: pointer !important; } @media (width <= 900px) { body.erp-body .mobile-sidebar-toggle { display: inline-flex !important; } } /* Tablet hardening (covers 12"–13" tablets up to ~1600 logical px) */ @media (width >= 769px) and (width <= 1600px) { body.erp-body #navbar .nav-container { min-height: 54px !important; padding: 0.25rem 10px !important; gap: 6px !important; overflow: visible !important; } body.erp-body #navbar .enhanced-logo { transform: none !important; gap: 6px !important; font-size: 1.1rem !important; flex: 0 0 auto !important; max-width: 116px !important; } body.erp-body #navbar .enhanced-logo svg { width: 34px !important; height: 34px !important; min-width: 34px !important; box-shadow: none !important; } body.erp-body #navbar .enhanced-logo span { font-size: 0.98rem !important; filter: none !important; animation: none !important; } body.erp-body #navbar .erp-app-switcher { width: 34px !important; height: 34px !important; flex: 0 0 34px !important; } body.erp-body #navbar #navMenu, body.erp-body #navbar .nav-menu { flex: 1 1 auto !important; min-width: 0 !important; max-width: none !important; gap: 0.15rem !important; overflow: visible !important; scrollbar-width: none !important; } body.erp-body #navbar #navMenu::-webkit-scrollbar, body.erp-body #navbar .nav-menu::-webkit-scrollbar { display: none !important; } body.erp-body #navbar .nav-menu > li > a { font-size: 0.68rem !important; padding: 0.38rem 0.32rem !important; white-space: nowrap !important; } body.erp-body #navbar .nav-menu > li > a i, body.erp-body #navbar .nav-menu > li > a svg { display: none !important; } /* Search: keep it horizontal in the nav row on tablet. Compact pill, inline, no floating/circular treatment. */ body.erp-body #navbar .nav-actions-group { flex: 0 0 320px !important; width: 320px !important; max-width: 320px !important; min-width: 320px !important; margin-left: 0 !important; gap: 0 !important; overflow: visible !important; } body.erp-body #navbar .nav-actions-group .us-trigger { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; width: 320px !important; height: 36px !important; min-width: 320px !important; max-width: 320px !important; padding: 6px 10px !important; border-radius: 10px !important; z-index: auto !important; box-shadow: none !important; justify-content: flex-start !important; gap: 8px !important; } body.erp-body #navbar .nav-actions-group .us-trigger-text { display: inline !important; font-size: 0.72rem !important; line-height: 1 !important; white-space: nowrap !important; } body.erp-body #navbar .nav-actions-group .us-trigger-kbd { display: none !important; } body.erp-body #navbar .nav-actions-group .us-trigger svg, body.erp-body #navbar .nav-actions-group .us-trigger i { flex: 0 0 auto !important; } /* Keep a small visual gap between the shell navbar and the hero/module surface. */ body.erp-body .erp-container > .main-content { padding: 8px 0 0 !important; } body.erp-body .erp-content-scroll { padding-top: 0 !important; } /* Main landing page on tablet: this is the public page, not an iframe app shell. Let it use normal document flow so the hero, module cards, actions band and footer cannot be clipped by the locked 100vh app shell. */ html[data-active-module="landing"], html[data-active-module="landing"] body.erp-body { height: auto !important; min-height: 100% !important; max-height: none !important; overflow: hidden auto !important; /* Pin to full viewport width. Opening the off-canvas sidebar drawer toggles flex/expanded classes that let the document shrink-to-fit down to the sidebar width (~260px), crushing the navbar + content into a narrow left column and leaving the rest blank. These guards keep the page full-width regardless of sidebar state. */ width: 100% !important; min-width: 0 !important; max-width: 100% !important; } html[data-active-module="landing"] body.erp-body { display: block !important; } html[data-active-module="landing"] body.erp-body .erp-container { display: block !important; min-height: auto !important; height: auto !important; max-height: none !important; overflow: visible !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; } @media (width >= 901px) { html[data-active-module="landing"] #erpSidebarOverlay, html[data-active-module="landing"] #erpShellMobileOverlay, html[data-active-module="landing"] body.erp-body .sidebar-overlay { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } } /* Keep the expanded landing flex shell on true desktop only. At <=1280px the tablet shell sets flex-direction:column on .erp-container; pairing that with the relative sidebar here stacked the sidebar above main-content and left a blank band beside the nav rail (the reported blank homepage). */ @media (width >= 1281px) { /* Desktop landing uses the same shell contract as the modules: the sidebar and content share one viewport-height row, while the content column owns scrolling. That keeps the nav rail attached without clipping the landing footer/cards. */ html.erp-shell-expanded[data-active-module="landing"], html.erp-shell-expanded[data-active-module="landing"] body.erp-body { height: 100vh !important; min-height: 100vh !important; max-height: 100vh !important; overflow: hidden !important; } html.erp-shell-expanded[data-active-module="landing"] body.erp-body .erp-container { display: flex !important; flex-direction: row !important; align-items: stretch !important; min-height: 0 !important; height: calc(100vh - var(--erp-shell-navbar-offset, var(--navbar-height))) !important; max-height: calc(100vh - var(--erp-shell-navbar-offset, var(--navbar-height))) !important; overflow: hidden !important; } html.erp-shell-expanded[data-active-module="landing"] body.erp-body .erp-container > .sidebar { position: relative !important; top: auto !important; left: auto !important; flex: 0 0 var(--erp-sidebar-expanded) !important; width: var(--erp-sidebar-expanded) !important; min-width: var(--erp-sidebar-expanded) !important; height: auto !important; min-height: 0 !important; align-self: stretch !important; transform: translateX(0) !important; opacity: 1 !important; pointer-events: auto !important; visibility: visible !important; overflow-y: auto !important; } } /* Laptop landing (901–1280px): dock the sidebar beside content instead of overlaying the hero. Fixed overlay mode crushed/overlapped the homepage when the modules drawer was open. */ @media (width >= 901px) and (width <= 1280px) { html.erp-shell-expanded[data-active-module="landing"] body.erp-body .erp-container, html.erp-sidebar-visible[data-active-module="landing"] body.erp-body .erp-container { display: flex !important; flex-direction: row !important; align-items: stretch !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; min-height: 0 !important; height: calc(100vh - var(--erp-shell-navbar-offset, var(--navbar-height))) !important; max-height: calc(100vh - var(--erp-shell-navbar-offset, var(--navbar-height))) !important; overflow: hidden !important; } html.erp-shell-expanded[data-active-module="landing"] body.erp-body .erp-container > .main-content, html.erp-sidebar-visible[data-active-module="landing"] body.erp-body .erp-container > .main-content { display: block !important; flex: 1 1 auto !important; margin-left: 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; min-height: 0 !important; max-height: 100% !important; overflow: hidden auto !important; box-sizing: border-box !important; } html.erp-shell-expanded[data-active-module="landing"] body.erp-body .erp-container > .sidebar, html.erp-sidebar-visible[data-active-module="landing"] body.erp-body .erp-container > .sidebar { position: relative !important; top: auto !important; left: auto !important; flex: 0 0 var(--erp-sidebar-expanded) !important; width: var(--erp-sidebar-expanded) !important; min-width: var(--erp-sidebar-expanded) !important; max-width: var(--erp-sidebar-expanded) !important; height: auto !important; min-height: 0 !important; align-self: stretch !important; transform: translateX(0) !important; opacity: 1 !important; pointer-events: auto !important; visibility: visible !important; overflow-y: auto !important; z-index: 2 !important; box-shadow: none !important; } } html[data-active-module="landing"] body.erp-body .erp-container > .main-content { display: block !important; min-height: auto !important; height: auto !important; max-height: none !important; overflow: visible !important; padding: 8px 0 0 !important; } @media (width >= 1281px) { html.erp-shell-expanded[data-active-module="landing"] body.erp-body .erp-container > .main-content { flex: 1 1 auto !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; max-height: 100% !important; margin-left: 0 !important; width: auto !important; overflow: hidden auto !important; } } html[data-active-module="landing"] body.erp-body .erp-content-scroll { display: block !important; flex: none !important; min-height: auto !important; height: auto !important; max-height: none !important; overflow: visible !important; } html[data-active-module="landing"] body.erp-body #landing.module-section { display: block !important; flex: 0 0 auto !important; min-height: auto !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding-left: clamp(0.75rem, 1.5vw, 1.5rem) !important; padding-right: clamp(0.75rem, 1.5vw, 1.5rem) !important; overflow-x: visible !important; visibility: visible !important; opacity: 1 !important; } html[data-active-module="landing"] body.erp-body #landing .erp-featured-row, html[data-active-module="landing"] body.erp-body #landing #modules-grid, html[data-active-module="landing"] body.erp-body #landing .unit-gateway-grid { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } html[data-active-module="landing"] body.erp-body .erp-actions-band, html[data-active-module="landing"] body.erp-body .footer { display: block !important; flex: 0 0 auto !important; width: 100% !important; } /* Restore the actions-band's internal flex layout so the three CTA buttons stay centred horizontally on tablet (the block override above was killing justify-content:center). */ html[data-active-module="landing"] body.erp-body .erp-actions-band { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 1rem !important; text-align: center !important; } html[data-active-module="landing"] body.erp-body .erp-actions-band > * { margin-left: 0 !important; margin-right: 0 !important; } /* Tablet (\u22641280px): centralise the footer content. Each footer column and its inner items become center-aligned per design spec. */ @media (width <= 1280px) { body.erp-body .footer .footer-content { text-align: center !important; place-items: start center !important; } body.erp-body .footer .footer-content .footer-section { text-align: center !important; align-items: center !important; display: flex !important; flex-direction: column !important; } body.erp-body .footer .footer-content .footer-section h3, body.erp-body .footer .footer-content .footer-section h4, body.erp-body .footer .footer-content .footer-section p, body.erp-body .footer .footer-content .footer-section a, body.erp-body .footer .footer-content .footer-section .footer-desc { text-align: center !important; } body.erp-body .footer .footer-offices, body.erp-body .footer .footer-office-card { justify-content: center !important; align-items: center !important; text-align: center !important; } body.erp-body .footer .footer-office-card .office-info, body.erp-body .footer .footer-office-card .office-country, body.erp-body .footer .footer-office-card .office-city, body.erp-body .footer .footer-office-card .office-phone { text-align: center !important; justify-content: center !important; } body.erp-body .footer .footer-bottom { text-align: center !important; justify-content: center !important; } } /* Force the avatar chip and notification bell to remain visible on every page and at every breakpoint. JS state changes drive the CONTENT (initials, badge count, panel state); CSS guarantees the VISIBILITY so neither element can be hidden by other rules. */ body.erp-body #navUserChip, body.erp-body #navNotifWrap { display: inline-flex !important; align-items: center !important; visibility: visible !important; opacity: 1 !important; } body.erp-body #navNotifBell { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; } /* Place avatar chip and notification bell at the FAR RIGHT of the utility bar (after the language dropdown). The util-bar-inner is a flex row with justify-content:flex-end; bumping the chip and bell's order to the maximum pushes them past every other child regardless of source order. */ body.erp-body #util-bar .util-bar-inner #navUserChip { order: 9998 !important; margin-left: 8px !important; } body.erp-body #util-bar .util-bar-inner #navNotifWrap { order: 9999 !important; margin-left: 4px !important; } /* On tablet, module routes must give the iframe the full shell height. The shell actions band and footer belong to the public landing page; if they stay in flow for module routes they squeeze the active iframe and surface immediately, which is the overlap shown on the tablet. */ html[data-active-shell-mode="app"] body.erp-body .erp-actions-band { display: none !important; } html[data-active-shell-mode="app"] body.erp-body .footer, html[data-active-module]:not([data-active-module="landing"]) body.erp-body .footer, html[data-active-module]:not([data-active-module="landing"]) body.erp-body .erp-actions-band { display: none !important; } html[data-active-shell-mode="app"] body.erp-body .module-section.active { flex: 1 0 auto !important; min-height: calc(100vh - var(--erp-shell-navbar-offset, 96px)) !important; } body.erp-body #landing.module-section.active { flex: 0 0 auto !important; min-height: auto !important; } body.erp-body #landing .erp-hero { margin: 8px 10px 0 !important; border-radius: 18px !important; min-height: calc(38vh - 40px) !important; height: auto !important; padding: clamp(1.2rem, 2.5vh, 2rem) 1.25rem !important; box-shadow: 0 8px 40px rgb(6,13,31,0.55), 0 0 0 1px rgb(255,255,255,0.04) inset !important; display: flex !important; align-items: flex-start !important; overflow: visible !important; } body.erp-body #landing .erp-hero-inner { display: block !important; width: min(720px, 100%) !important; margin: 0 auto !important; text-align: center !important; } body.erp-body #landing .erp-hero-glow-line, body.erp-body #landing .erp-hero::before, body.erp-body #landing .erp-hero::after { display: none !important; } body.erp-body #landing .erp-hero-eyebrow { display: none !important; } body.erp-body #landing .erp-hero-title { font-size: clamp(2rem, 4.2vw, 3.25rem) !important; line-height: 1.05 !important; margin: 0 auto 0.9rem !important; max-width: 760px !important; letter-spacing: 0 !important; } body.erp-body #landing .erp-hero-subtitle { font-size: clamp(0.95rem, 1.45vw, 1.12rem) !important; line-height: 1.5 !important; margin: 0 auto 1.15rem !important; max-width: 620px !important; } body.erp-body #landing .erp-hero-cta, body.erp-body #landing .erp-hero > .erp-hero-trust-strip { justify-content: center !important; } body.erp-body #landing .erp-hero > .erp-hero-trust-strip { display: flex !important; margin-top: 1.25rem !important; } body.erp-body #landing .erp-hero-visual, body.erp-body #landing .erp-hero-inner > .erp-hero-visual { display: none !important; visibility: hidden !important; height: 0 !important; width: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } /* Kill any KPI card backdrop blur explicitly so leftover paint is sharp */ body.erp-body #landing .hero-kpi-card, body.erp-body #landing .hero-kpi-val, body.erp-body #landing .hero-kpi-meta { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; filter: none !important; } body.erp-body #landing .next-steps-strip, body.erp-body #landing .erp-featured-row { margin-top: 1.5rem !important; } /* Util bar: centre content on tablet */ body.erp-body #util-bar .util-bar-inner { justify-content: center !important; } body.erp-body #util-bar .util-bar-inner .nav-auth-buttons, body.erp-body #util-bar .util-bar-inner #navUserChip, body.erp-body #util-bar .util-bar-inner #navNotifWrap { margin-left: 0 !important; } } /* ── 17-inch laptop override (1280px–1600px) The broad tablet rule above shrinks nav tabs and the search bar too aggressively for large laptops. Restore comfortable values. ── */ @media (width >= 769px) and (width <= 1100px) { /* Narrow tablet (769–1100px): keep everything on ONE row. Nav links get flex:1 with overflow scroll (hidden scrollbar), search stays inline at a compact fixed width. */ body.erp-body #navbar .container.nav-container { flex-wrap: nowrap !important; align-items: center !important; gap: 6px !important; padding: 0.25rem 10px !important; } /* Logo stays compact */ body.erp-body #navbar .container.nav-container > .logo, body.erp-body #navbar .container.nav-container > .enhanced-logo { flex: 0 0 auto !important; } body.erp-body #navbar .container.nav-container > .erp-app-switcher { flex: 0 0 auto !important; } /* Nav links fill available space, scroll if needed */ body.erp-body #navbar .nav-menu, body.erp-body #navbar #navMenu { flex: 1 1 auto !important; min-width: 0 !important; overflow: auto visible !important; scrollbar-width: none !important; } body.erp-body #navbar .nav-menu::-webkit-scrollbar, body.erp-body #navbar #navMenu::-webkit-scrollbar { display: none !important; } /* Search group: fixed compact width, stays inline */ body.erp-body #navbar .nav-actions-group, body.erp-body #navbar #navActionsGroup { flex: 0 0 160px !important; width: 160px !important; min-width: 160px !important; max-width: 160px !important; margin-left: 0 !important; overflow: visible !important; } /* Search trigger: full width of its container, horizontal */ body.erp-body #navbar .nav-actions-group .us-trigger, body.erp-body #navbar .nav-actions-group .unified-search-trigger, body.erp-body #navbar .nav-actions-group .erp-search-trigger, body.erp-body #navbar .nav-actions-group [data-search-trigger], body.erp-body #navbar .nav-actions-group .nav-search, body.erp-body #navbar .nav-actions-group .navbar-search { position: static !important; width: 160px !important; min-width: 160px !important; max-width: 160px !important; height: 34px !important; padding: 5px 10px !important; border-radius: 10px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 6px !important; box-sizing: border-box !important; } /* Show text label, hide Ctrl K shortcut */ body.erp-body #navbar .nav-actions-group .us-trigger-text, body.erp-body #navbar .nav-actions-group [class*="trigger-text"] { display: inline !important; font-size: 0.7rem !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 90px !important; } body.erp-body #navbar .nav-actions-group .us-trigger-kbd, body.erp-body #navbar .nav-actions-group [class*="trigger-kbd"], body.erp-body #navbar .nav-actions-group kbd { display: none !important; } } @media (width >= 1100px) and (width <= 1279px) { /* Mid-range tablet (1100–1279px): search bar fits but keep it compact */ body.erp-body #navbar .nav-actions-group, body.erp-body #navbar #navActionsGroup { flex: 0 0 200px !important; width: 200px !important; min-width: 200px !important; max-width: 200px !important; margin-right: 8px !important; overflow: visible !important; } body.erp-body #navbar .nav-actions-group .us-trigger, body.erp-body #navbar .nav-actions-group .unified-search-trigger, body.erp-body #navbar .nav-actions-group .erp-search-trigger, body.erp-body #navbar .nav-actions-group [data-search-trigger] { position: static !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 36px !important; min-height: 36px !important; box-sizing: border-box !important; } body.erp-body #navbar .nav-actions-group .us-trigger-text, body.erp-body #navbar .nav-actions-group [class*="trigger-text"] { font-size: 0.68rem !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 120px !important; } body.erp-body #navbar .nav-actions-group .us-trigger-kbd, body.erp-body #navbar .nav-actions-group kbd { display: none !important; } } @media (width >= 1280px) and (width <= 1600px) { /* Util bar: centre content on laptop */ body.erp-body #util-bar .util-bar-inner { justify-content: center !important; } body.erp-body #util-bar .util-bar-inner .nav-auth-buttons, body.erp-body #util-bar .util-bar-inner #navUserChip, body.erp-body #util-bar .util-bar-inner #navNotifWrap { margin-left: 0 !important; } body.erp-body #navbar .nav-menu { flex: 1 1 auto !important; min-width: 0 !important; overflow-x: auto !important; overflow-y: visible !important; scrollbar-width: none; } body.erp-body #navbar .nav-menu::-webkit-scrollbar { display: none; } body.erp-body #navbar .nav-menu > li > a { font-size: 0.84rem !important; padding: 0.45rem 0.55rem !important; } body.erp-body #navbar .nav-menu > li > a i, body.erp-body #navbar .nav-menu > li > a svg { display: inline !important; } /* Reduce app-switcher margin so the grid icon doesn't eat 48px of nav space */ body.erp-body #navbar .container.nav-container > #erpAppSwitcher, body.erp-body #navbar .container.nav-container > .erp-app-switcher { margin-left: 10px !important; } body.erp-body #navbar .nav-actions-group { flex: 0 0 clamp(220px, 24vw, 300px) !important; width: clamp(220px, 24vw, 300px) !important; max-width: clamp(220px, 24vw, 300px) !important; min-width: 220px !important; margin-right: 12px !important; overflow: visible !important; } body.erp-body #navbar .nav-actions-group .us-trigger { width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 38px !important; min-height: 38px !important; box-sizing: border-box !important; } body.erp-body #navbar .nav-actions-group .us-trigger-text { font-size: 0.84rem !important; min-width: 0 !important; } /* Hero: two-column layout — stat cards anchored to bottom of KPI panel */ body.erp-body #landing .erp-hero { align-items: stretch !important; padding: 1rem 2rem !important; min-height: 0 !important; height: auto !important; } body.erp-body #landing .erp-hero-inner { position: relative !important; display: flex !important; flex-direction: row !important; align-items: stretch !important; text-align: left !important; gap: 3rem !important; width: 100% !important; margin: 0 !important; min-height: 280px !important; } body.erp-body #landing .erp-hero-content { flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; text-align: left !important; } /* Restore eyebrow + left-align text margins overridden by tablet block */ body.erp-body #landing .erp-hero-eyebrow { display: inline-flex !important; margin-bottom: 0.6rem !important; } body.erp-body #landing .erp-hero-title { margin: 0 0 0.55rem !important; text-align: left !important; } body.erp-body #landing .erp-hero-subtitle { margin: 0 0 0.85rem !important; text-align: left !important; } body.erp-body #landing .erp-hero-cta { justify-content: flex-start !important; flex-wrap: nowrap !important; gap: 0.85rem !important; } body.erp-body #landing .erp-hero-cta .btn-primary, body.erp-body #landing .erp-hero-cta .btn-outline { width: auto !important; text-align: center !important; } /* Stat cards: full-width bar at bottom of hero (below content + KPI panel). */ body.erp-body #landing .erp-hero > .erp-hero-trust-strip, body.erp-body #landing .erp-hero-inner > .erp-hero-content > .erp-hero-stats, body.erp-body #landing .erp-hero-content .erp-hero-stats { position: relative !important; inset: auto !important; width: 100% !important; max-width: none !important; margin: 1.25rem 0 0 !important; display: flex !important; flex-flow: row wrap !important; justify-content: space-between !important; align-items: center !important; gap: 0.4rem !important; } body.erp-body #landing .erp-hero-content .erp-hero-stats .erp-hero-stat { flex: 0 0 auto !important; align-items: center !important; text-align: center !important; } body.erp-body #landing .erp-hero-content .erp-hero-stats .erp-hero-stat-value { font-size: 0.95rem !important; } body.erp-body #landing .erp-hero-content .erp-hero-stats .erp-hero-stat-label { font-size: 0.6rem !important; letter-spacing: 0.05em !important; } body.erp-body #landing .erp-hero-content .erp-hero-stats .erp-hero-stat-divider { height: 22px !important; flex: 0 0 1px !important; } body.erp-body #landing .erp-hero-visual, body.erp-body #landing .erp-hero-inner > .erp-hero-visual { display: flex !important; visibility: visible !important; height: auto !important; width: auto !important; flex: 0 0 280px !important; min-width: 260px !important; max-width: 300px !important; flex-direction: column !important; gap: 0.5rem !important; margin: 0 !important; padding-bottom: 0 !important; overflow: visible !important; align-self: stretch !important; } } /* ────────────────────────────────────────────────────────────── Premium polish layer — typography, spacing, depth, hover. Confined to erp_home.html. Applies broadly with media-aware tweaks at the laptop breakpoint to lift perceived quality. */ /* Typography: stronger hierarchy + readability */ body.erp-body #navbar .nav-menu > li > a { font-weight: 600; letter-spacing: 0.01em; } body.erp-body #landing .erp-hero-subtitle { color: #cbd5e1; } body.erp-body #landing .erp-hero-stat-label { color: #94a3b8; } body.erp-body #landing .erp-hero-stat-value { text-shadow: 0 1px 2px rgb(0,0,0,0.35); } /* KPI cards: stronger glow hierarchy + smoother shadows */ body.erp-body #landing .hero-kpi-card { border: 1px solid rgb(148,163,184,0.22); box-shadow: 0 18px 40px rgb(2,6,23,0.45), 0 0 0 1px rgb(255,255,255,0.04) inset, 0 -1px 0 rgb(255,255,255,0.06) inset; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; } body.erp-body #landing .hero-kpi-card:hover { transform: translateY(-3px); border-color: rgb(99,102,241,0.45); box-shadow: 0 24px 56px rgb(2,6,23,0.55), 0 0 0 1px rgb(99,102,241,0.18) inset; } /* Module cards: stronger separation from white surface */ body.erp-body .module-card, body.erp-body .module-tile, body.erp-body .erp-module-card, body.erp-body #modules-grid > * { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } body.erp-body .module-card:hover, body.erp-body .module-tile:hover, body.erp-body .erp-module-card:hover, body.erp-body #modules-grid > *:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgb(15,23,42,0.18), 0 4px 12px rgb(15,23,42,0.08); } /* Surface that holds module cards: deeper background gradient so cards "sit on" the surface instead of washing into it. */ body.erp-body .erp-content-scroll, body.erp-body main.main-content { background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%); } /* CTA buttons: smoother elevation transition */ body.erp-body #landing .erp-hero-cta .btn-primary, body.erp-body #landing .erp-hero-cta .btn-outline { transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease; } /* Logo polish: subtle gradient shimmer on the wordmark */ body.erp-body #navbar .enhanced-logo span { background: linear-gradient(135deg, #f8fafc 0%, #c7d2fe 50%, #f8fafc 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; letter-spacing: -0.01em; } /* Laptop-specific (1280–1600px): bigger KPI cards & better spacing */ @media (width >= 1280px) and (width <= 1600px) { /* Larger, more readable nav text */ body.erp-body #navbar .nav-menu > li > a { font-size: 0.88rem !important; padding: 0.5rem 0.7rem !important; } /* Hero typography lift */ body.erp-body #landing .erp-hero-title { font-size: clamp(2.4rem, 4vw, 3rem) !important; line-height: 1.06 !important; } body.erp-body #landing .erp-hero-subtitle { font-size: 1.05rem !important; line-height: 1.55 !important; max-width: 540px !important; } body.erp-body #landing .erp-hero-eyebrow { font-size: 0.72rem !important; padding: 6px 14px !important; } /* KPI cards: more presence */ body.erp-body #landing .hero-kpi-card { padding: 1.05rem 1.2rem !important; } body.erp-body #landing .hero-kpi-meta { font-size: 0.7rem !important; } body.erp-body #landing .hero-kpi-val { font-size: 1.15rem !important; font-weight: 800 !important; } body.erp-body #landing .hero-kpi-icon { width: 42px !important; height: 42px !important; font-size: 1rem !important; } /* Stat values clearer */ body.erp-body #landing .erp-hero-content .erp-hero-stats .erp-hero-stat-value { font-size: 1.05rem !important; } body.erp-body #landing .erp-hero-content .erp-hero-stats .erp-hero-stat-label { font-size: 0.66rem !important; color: #94a3b8 !important; } /* Module card text: more readable */ body.erp-body .module-card h3, body.erp-body .erp-module-card h3, body.erp-body .module-tile h3 { font-size: 1.05rem !important; font-weight: 700 !important; letter-spacing: -0.005em !important; } body.erp-body .module-card p, body.erp-body .erp-module-card p, body.erp-body .module-tile p { font-size: 0.86rem !important; line-height: 1.5 !important; color: #475569 !important; } /* ── Hero KPI panel: flush-right via flex with high specificity ── */ html body.erp-body #landing.module-section .erp-hero { padding: 0.5rem 1.25rem 2.2rem !important; margin: 8px 0 0 !important; align-items: stretch !important; min-height: 0 !important; height: auto !important; overflow: visible !important; } html body.erp-body #landing.module-section .erp-hero .erp-hero-inner { position: relative !important; display: flex !important; flex-direction: row !important; align-items: stretch !important; justify-content: space-between !important; gap: 2rem !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; min-height: 460px !important; box-sizing: border-box !important; text-align: left !important; } html body.erp-body #landing.module-section .erp-hero .erp-hero-inner > .erp-hero-content { flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-self: flex-start !important; align-items: flex-start !important; text-align: left !important; padding: 0 !important; margin: 0 !important; } html body.erp-body #landing.module-section .erp-hero .erp-hero-inner > .erp-hero-content > *:first-child { margin-top: 0 !important; } html body.erp-body #landing.module-section .erp-hero .erp-hero-inner > .erp-hero-visual { flex: 1 1 360px !important; width: auto !important; min-width: 0 !important; max-width: min(560px, calc(100% - 0.5rem)) !important; margin: 0 0 0 auto !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: repeat(2, minmax(130px, 1fr)) !important; gap: 1rem !important; place-self: flex-start end !important; visibility: visible !important; height: auto !important; overflow: visible !important; } html body.erp-body #landing.module-section .erp-hero .hero-kpi-card, html body.erp-body #landing.module-section .erp-hero .erp-hero-visual > .hero-kpi-card { width: 100% !important; height: 130px !important; min-height: 130px !important; padding: 1.15rem 1.25rem !important; border-radius: 14px !important; align-self: stretch !important; margin: 0 !important; } html body.erp-body #landing.module-section .hero-kpi-meta { font-size: 0.78rem !important; letter-spacing: 0.06em !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body.erp-body #landing.module-section .hero-kpi-val { font-size: 1.25rem !important; font-weight: 800 !important; line-height: 1.15 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body.erp-body #landing.module-section .hero-kpi-icon { width: 48px !important; height: 48px !important; font-size: 1.2rem !important; } html body.erp-body #landing.module-section .hero-kpi-badge { font-size: 0.7rem !important; padding: 4px 9px !important; } /* Stat / trust strip: full-width pinned bottom of hero, slim glass styling. */ html body.erp-body #landing.module-section .erp-hero > .erp-hero-trust-strip, html body.erp-body #landing.module-section .erp-hero .erp-hero-inner .erp-hero-stats, html body.erp-body #landing.module-section .erp-hero .erp-hero-content .erp-hero-stats { position: relative !important; inset: auto !important; width: 100% !important; max-width: none !important; margin: 1.25rem 0 0 !important; padding: 0.85rem 1rem !important; border-top: 1px solid rgb(148,163,184,0.14) !important; background: rgb(15,23,42,0.40) !important; -webkit-backdrop-filter: blur(6px) saturate(120%) !important; backdrop-filter: blur(6px) saturate(120%) !important; border-radius: 10px !important; box-shadow: none !important; display: flex !important; flex-flow: row wrap !important; justify-content: space-between !important; align-items: center !important; gap: 0 !important; box-sizing: border-box !important; z-index: 2 !important; } html body.erp-body #landing.module-section .erp-hero .erp-hero-stats .erp-hero-stat { flex: 1 1 0 !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 0.35rem !important; text-align: center !important; white-space: nowrap !important; padding: 0 0.25rem !important; } html body.erp-body #landing.module-section .erp-hero .erp-hero-stats .trust-ico { font-size: 0.78rem !important; line-height: 1 !important; } html body.erp-body #landing.module-section .erp-hero .erp-hero-stats .ico-indigo { color:#818cf8 !important; } html body.erp-body #landing.module-section .erp-hero .erp-hero-stats .ico-emerald { color:#34d399 !important; } html body.erp-body #landing.module-section .erp-hero .erp-hero-stats .ico-sky { color:#38bdf8 !important; } html body.erp-body #landing.module-section .erp-hero .erp-hero-stats .ico-violet { color:#a78bfa !important; } html body.erp-body #landing.module-section .erp-hero .erp-hero-stats .ico-amber { color:#fbbf24 !important; } html body.erp-body #landing.module-section .erp-hero .erp-hero-stats .ico-yellow { color:#facc15 !important; } html body.erp-body #landing.module-section .erp-hero .erp-hero-stats .ico-pink { color:#f472b6 !important; } html body.erp-body #landing.module-section .erp-hero .erp-hero-stats .erp-hero-stat-value { font-size: 0.74rem !important; font-weight: 700 !important; color: #f1f5f9 !important; letter-spacing: 0.01em !important; text-shadow: none !important; } html body.erp-body #landing.module-section .erp-hero .erp-hero-stats .erp-hero-stat-label { font-size: 0.6rem !important; font-weight: 500 !important; color: #94a3b8 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; } html body.erp-body #landing.module-section .erp-hero .erp-hero-stats .erp-hero-stat-divider { width: 1px !important; height: 14px !important; background: rgb(148,163,184,0.20) !important; flex: 0 0 1px !important; } html body.erp-body #landing.module-section .erp-hero .erp-hero-stats .erp-hero-stat-divider { height: 28px !important; flex: 0 0 1px !important; } } /* ── Tablet card-grid consistency (769–1600px) ────────────────────── .erp-featured-row uses repeat(4,1fr) and .erp-module-card-grid uses auto-fill from dashboard.css — they produce different column counts at the same viewport width, making cards different sizes. Fix: lock BOTH grids to the same explicit column count per range, and enforce identical min-height so every card is the same height. */ @media (width >= 769px) and (width <= 1100px) { /* Narrow tablet: 2 columns for featured, 3 for unit cards (21 = 7 rows). */ body.erp-body #landing .erp-featured-row, body.erp-body #landing #modules-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } body.erp-body #landing .erp-module-card-grid, body.erp-body #landing .unit-gateway-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } body.erp-body #landing .erp-fcard, body.erp-body #landing .erp-module-card-grid .unit-card { min-height: 200px !important; height: auto !important; box-sizing: border-box !important; } } @media (width >= 1100px) and (width <= 1600px) { /* Wide tablet / laptop: 4 columns for featured, 3 for unit cards (21 unit cards divide evenly into 7 rows with no blank cells). */ body.erp-body #landing .erp-featured-row, body.erp-body #landing #modules-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } body.erp-body #landing .erp-module-card-grid, body.erp-body #landing .unit-gateway-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } body.erp-body #landing .erp-fcard, body.erp-body #landing .erp-module-card-grid .unit-card { min-height: 220px !important; height: auto !important; box-sizing: border-box !important; } } @media (width >= 1601px) { body.erp-body #landing .erp-module-card-grid, body.erp-body #landing .unit-gateway-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } .nav-container > .enhanced-logo, .nav-container > .erp-app-switcher, .nav-container > .mobile-menu-btn { align-self: center; margin-top: 0 !important; margin-bottom: 0 !important; } .nav-container > .enhanced-logo { min-height: 44px; display: inline-flex !important; align-items: center !important; } .nav-container > .erp-app-switcher { display: inline-flex !important; align-items: center !important; justify-content: center !important; } .sidebar .sidebar-header { align-items: center !important; justify-content: space-between !important; flex-direction: row !important; gap: 8px !important; } /* Modules section label — centred across the full sidebar width */ .sidebar .sidebar-header.lp-is-17e3b652 { justify-content: center !important; text-align: center !important; padding-left: 0.75rem !important; padding-right: 0.75rem !important; } .sidebar .sidebar-header.lp-is-17e3b652 .lp-is-52ba6ada { display: block !important; width: 100% !important; text-align: center !important; } .sidebar-toggle-item { margin: 0.35rem 0 0.7rem; } .erp-sidebar-toggle { width: 100%; min-height: 44px; border: 1px solid rgb(99, 102, 241, 0.2); border-radius: 12px; background: rgb(15, 23, 42, 0.96); color: #f8fafc; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0.75rem 0.9rem; box-shadow: 0 10px 28px rgb(15, 23, 42, 0.2); cursor: pointer; transition: background 0.2s ease, transform 0.2s ease, padding 0.2s ease; } .erp-sidebar-toggle:hover { background: rgb(30, 41, 59, 0.98); transform: translateY(-1px); } .erp-sidebar-toggle-label { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } html.erp-shell-collapsed .erp-sidebar-toggle { justify-content: center; padding-left: 0; padding-right: 0; } html.erp-shell-collapsed .erp-sidebar-toggle-label { display: none; } html.erp-shell-expanded .erp-sidebar-toggle { justify-content: flex-start; } html.erp-shell-collapsed .sidebar, html.erp-shell-collapsed .sidebar:hover { width: var(--erp-sidebar-expanded) !important; min-width: var(--erp-sidebar-expanded) !important; transform: translateX(-100%); opacity: 0; pointer-events: none; visibility: hidden; } html.erp-shell-expanded .sidebar, html.erp-shell-expanded .sidebar:hover { width: var(--erp-sidebar-expanded) !important; min-width: var(--erp-sidebar-expanded) !important; transform: translateX(0); opacity: 1; pointer-events: auto; visibility: visible; } html.erp-shell-collapsed .main-content { margin-left: 0 !important; width: 100% !important; } html.erp-shell-expanded:not([data-active-module="landing"]) .main-content { margin-left: var(--erp-sidebar-expanded) !important; width: calc(100% - var(--erp-sidebar-expanded)) !important; } html.erp-shell-collapsed .sidebar-nav .nav-link, html.erp-shell-collapsed .sidebar:hover .sidebar-nav .nav-link { justify-content: center !important; padding-left: 0 !important; padding-right: 0 !important; } html.erp-shell-collapsed .sidebar-nav .nav-link > div, html.erp-shell-collapsed .sidebar-nav .nav-link > span:not(:first-child), html.erp-shell-collapsed .sidebar:hover .sidebar-nav .nav-link > div, html.erp-shell-collapsed .sidebar:hover .sidebar-nav .nav-link > span:not(:first-child), html.erp-shell-collapsed .sidebar-profile-info, html.erp-shell-collapsed .sidebar:hover .sidebar-profile-info { opacity: 0 !important; width: 0 !important; overflow: hidden !important; visibility: hidden !important; } html.erp-shell-collapsed #erpShellCompanyName, html.erp-shell-collapsed .sidebar:hover #erpShellCompanyName { display: none !important; } html.erp-shell-collapsed #erpShellBrandArea, html.erp-shell-collapsed .sidebar:hover #erpShellBrandArea { justify-content: center !important; padding-left: 0 !important; padding-right: 0 !important; } html.erp-shell-expanded .sidebar-nav .nav-link > div, html.erp-shell-expanded .sidebar-nav .nav-link > span:not(:first-child), html.erp-shell-expanded .sidebar:hover .sidebar-nav .nav-link > div, html.erp-shell-expanded .sidebar:hover .sidebar-nav .nav-link > span:not(:first-child), html.erp-shell-expanded .sidebar-profile-info, html.erp-shell-expanded .sidebar:hover .sidebar-profile-info { opacity: 1 !important; width: auto !important; overflow: visible !important; visibility: visible !important; } html.erp-shell-collapsed .sidebar-nav .nav-link i, html.erp-shell-collapsed .sidebar:hover .sidebar-nav .nav-link i { margin-right: 0 !important; } html.erp-shell-collapsed .sidebar-header, html.erp-shell-collapsed .sidebar:hover .sidebar-header { opacity: 0 !important; visibility: hidden !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } html.erp-shell-expanded .sidebar-header, html.erp-shell-expanded .sidebar:hover .sidebar-header { opacity: 1 !important; visibility: visible !important; height: auto !important; margin-top: 1rem !important; padding-left: 0.75rem !important; padding-right: 0.75rem !important; } html.erp-shell-expanded .sidebar-header.lp-is-17e3b652, html.erp-shell-expanded .sidebar:hover .sidebar-header.lp-is-17e3b652 { justify-content: center !important; text-align: center !important; } html.erp-shell-collapsed .sidebar-nav .nav-link.has-submenu::after, html.erp-shell-collapsed .sidebar:hover .sidebar-nav .nav-link.has-submenu::after { opacity: 0 !important; } html.erp-shell-expanded .sidebar-nav .nav-link.has-submenu::after, html.erp-shell-expanded .sidebar:hover .sidebar-nav .nav-link.has-submenu::after { opacity: 1 !important; } html.erp-shell-collapsed .sidebar-nav .submenu, html.erp-shell-collapsed .sidebar-nav .submenu.open, html.erp-shell-collapsed .sidebar-nav .submenu.pin-visible, html.erp-shell-collapsed .sidebar:hover .sidebar-nav .submenu, html.erp-shell-collapsed .sidebar:hover .sidebar-nav .submenu.open, html.erp-shell-collapsed .sidebar:hover .sidebar-nav .submenu.pin-visible { display: none !important; opacity: 0 !important; max-height: 0 !important; overflow: hidden !important; pointer-events: none !important; visibility: hidden !important; } html.erp-shell-expanded .sidebar-nav .submenu.open, html.erp-shell-expanded .sidebar-nav .submenu.pin-visible, html.erp-shell-expanded .sidebar:hover .sidebar-nav .submenu.open, html.erp-shell-expanded .sidebar:hover .sidebar-nav .submenu.pin-visible { display: block !important; opacity: 1 !important; max-height: 9999px !important; overflow: visible !important; pointer-events: auto !important; visibility: visible !important; } html.erp-shell-collapsed .sidebar-status .status-text, html.erp-shell-collapsed .sidebar:hover .sidebar-status .status-text { display: none !important; } html.erp-shell-expanded .sidebar-status .status-text, html.erp-shell-expanded .sidebar:hover .sidebar-status .status-text { display: inline-block !important; opacity: 1 !important; width: auto !important; visibility: visible !important; } html.erp-shell-collapsed .sidebar-profile { justify-content: center !important; } html.erp-shell-collapsed .sidebar-profile-avatar { margin-right: 0 !important; } html.erp-shell-collapsed #companySettingsBtn span, html.erp-shell-collapsed .sidebar:hover #companySettingsBtn span { opacity: 0 !important; width: 0 !important; overflow: hidden !important; visibility: hidden !important; } html.erp-shell-collapsed #companySettingsBtn, html.erp-shell-collapsed .sidebar:hover #companySettingsBtn { justify-content: center !important; padding-left: 0 !important; padding-right: 0 !important; } html.erp-shell-expanded #companySettingsBtn span, html.erp-shell-expanded .sidebar:hover #companySettingsBtn span { opacity: 1 !important; width: auto !important; overflow: visible !important; visibility: visible !important; } @media (width <= 991.98px) { html.erp-shell-expanded .sidebar, html.erp-shell-expanded .sidebar:hover { width: min(var(--erp-sidebar-expanded), calc(100vw - 24px)) !important; } } /* ── Featured Platform Cards ─────────────────────────── */ @keyframes erpCardEntrance { from { opacity: 0; transform: translateY(30px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes erpIconFloat { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-7px) scale(1.1); } } @keyframes erpShimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } @keyframes erpCardGlow { 0%, 100% { box-shadow: 0 4px 24px rgb(0,0,0,0.08); } 50% { box-shadow: 0 8px 32px var(--fcard-glow); } } .erp-featured-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: min-content; gap: 1.15rem; margin-bottom: 28px; width: 100%; max-width: 100%; box-sizing: border-box; } .erp-featured-row.erp-module-card-grid { margin-bottom: 0.5rem; } .erp-fcard { --fcard-rgb: 79, 70, 229; position: relative; isolation: isolate; display: grid !important; grid-template-columns: 54px minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "icon badge" "title title" "copy copy" "footer footer"; min-height: 236px; height: auto; padding: 1.15rem 1.15rem 1rem 1.25rem; border-radius: 18px; border: 1px solid rgb(var(--fcard-rgb), 0.24); background: linear-gradient(135deg, rgb(var(--fcard-rgb), 0.16) 0%, rgb(var(--fcard-rgb), 0.055) 38%, rgb(255,255,255,0) 66%), linear-gradient(180deg, #fff 0%, #f8fafc 100%); box-shadow: 0 16px 38px rgb(15,23,42,0.10), inset 0 1px 0 rgb(255,255,255,0.94); overflow: hidden; cursor: pointer; text-decoration: none; transform: translateZ(0); transition: transform 0.28s cubic-bezier(0.22,1,0.36,1), box-shadow 0.28s ease, border-color 0.28s ease; animation: erpCardEntrance 0.55s cubic-bezier(0.22,1,0.36,1) both; animation-delay: var(--fcard-delay, 0s); } /* hide the large mini-dashboard so featured cards match the unit-card height */ .erp-fcard .fcard-mini-dash { display: none !important; } .erp-fcard:nth-child(1) { --fcard-delay: 0.04s; } .erp-fcard:nth-child(2) { --fcard-delay: 0.13s; } .erp-fcard:nth-child(3) { --fcard-delay: 0.22s; } .erp-fcard:nth-child(4) { --fcard-delay: 0.31s; } /* Tablet/mobile: skip staggered card entrance — saves main-thread work on Android and narrow viewports where users scroll immediately. */ @media (width <= 1100px) { body.erp-body #landing .erp-fcard, body.erp-body #landing .erp-fcard::before, body.erp-body #landing .erp-fcard-icon, body.erp-body #landing .unit-card, body.erp-body #landing .unit-card::before { animation: none !important; animation-delay: 0s !important; } } /* left accent stripe */ .erp-fcard::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 5px; border-radius: 18px 0 0 18px; background: linear-gradient(180deg, var(--fcard-accent), var(--fcard-accent2, var(--fcard-accent)), var(--fcard-accent)); background-size: 100% 220%; animation: moduleCardAccent 5s ease-in-out infinite; } /* shimmer sweep on hover */ .erp-fcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 0%, transparent 42%, rgb(255,255,255,0.62) 50%, transparent 58%, transparent 100%); opacity: 0; transform: translateX(-58%); pointer-events: none; transition: opacity 0.18s ease; } .erp-fcard:hover { transform: translateY(-9px); border-color: rgb(var(--fcard-rgb), 0.46); box-shadow: 0 24px 56px rgb(15,23,42,0.16), 0 0 0 4px rgb(var(--fcard-rgb), 0.08); } .erp-fcard:hover::before { width: 7px; } .erp-fcard:hover::after { opacity: 1; animation: moduleCardSweep 0.72s ease forwards; } /* icon */ .erp-fcard-icon { grid-area: icon; width: 50px; height: 50px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 22px; background: linear-gradient(135deg, var(--fcard-soft), #fff); color: var(--fcard-accent); border: 1px solid rgb(var(--fcard-rgb), 0.28); box-shadow: 0 10px 24px rgb(var(--fcard-rgb), 0.16), inset 0 1px 0 rgb(255,255,255,0.95); flex-shrink: 0; transition: transform 0.28s cubic-bezier(0.22,1,0.36,1), box-shadow 0.28s ease; } .erp-fcard:hover .erp-fcard-icon { transform: translateY(-3px) scale(1.08) rotate(-3deg); box-shadow: 0 14px 28px rgb(var(--fcard-rgb), 0.22), inset 0 1px 0 rgb(255,255,255,0.95); } /* badge */ .erp-fcard-badge { grid-area: badge; place-self: center start; display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; padding: 3px 9px; border-radius: 20px; background: rgb(var(--fcard-rgb), 0.10); color: var(--fcard-accent); border: 1px solid rgb(var(--fcard-rgb), 0.20); text-transform: uppercase; } /* title */ .erp-fcard-title { grid-area: title; font-size: 1rem; font-weight: 800; color: #111827; line-height: 1.2; margin: 0; } /* desc */ .erp-fcard-desc { grid-area: copy; font-size: 0.82rem; color: #374151; line-height: 1.5; } /* footer row */ .erp-fcard-footer { grid-area: footer; display: flex; align-items: center; justify-content: space-between; padding-top: 0.72rem; border-top: 1px solid rgb(var(--fcard-rgb), 0.16); font-size: 0.78rem; color: #64748b; } .erp-fcard-footer i { color: var(--fcard-accent); } /* legacy arrow kept for compat */ .erp-fcard-arrow { display: none; } /* ── Individual accent colours ── */ .fcard-command { --fcard-accent:#0ea5e9; --fcard-accent2:#6366f1; --fcard-rgb:14,165,233; --fcard-soft:#ecfeff; } .fcard-migration { --fcard-accent:#8b5cf6; --fcard-accent2:#a855f7; --fcard-rgb:139,92,246; --fcard-soft:#f5f3ff; } .fcard-analytics { --fcard-accent:#6366f1; --fcard-accent2:#38bdf8; --fcard-rgb:99,102,241; --fcard-soft:#eef2ff; } .fcard-website { --fcard-accent:#0891b2; --fcard-accent2:#06b6d4; --fcard-rgb:8,145,178; --fcard-soft:#ecfeff; } .fcard-acc { --fcard-accent:#d97706; --fcard-accent2:#f59e0b; --fcard-rgb:217,119,6; --fcard-soft:#fff7ed; } .fcard-agropro { --fcard-accent:#16a34a; --fcard-accent2:#65a30d; --fcard-rgb:22,163,74; --fcard-soft:#f0fdf4; } .fcard-acquisition{ --fcard-accent:#db2777; --fcard-accent2:#f43f5e; --fcard-rgb:219,39,119; --fcard-soft:#fdf2f8; } .fcard-jobs { --fcard-accent:#16a34a; --fcard-accent2:#22c55e; --fcard-rgb:22,163,74; --fcard-soft:#f0fdf4; } /* ── Mini-dashboard wrappers ── */ .fcard-mini-dash { border-radius: 10px; background: rgb(255,255,255,0.88); border: 1px solid rgb(0,0,0,0.10); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); padding: 10px 10px 8px; flex-shrink: 0; overflow: hidden; } /* ── ANALYTICS: animated bar chart + sparkline ── */ @keyframes anaBar1 { 0%,100%{height:28px} 50%{height:44px} } @keyframes anaBar2 { 0%,100%{height:38px} 50%{height:22px} } @keyframes anaBar3 { 0%,100%{height:18px} 50%{height:40px} } @keyframes anaBar4 { 0%,100%{height:34px} 50%{height:16px} } @keyframes anaBar5 { 0%,100%{height:46px} 50%{height:30px} } @keyframes anaBar6 { 0%,100%{height:24px} 50%{height:48px} } @keyframes anaLine { 0%{stroke-dashoffset:120} 100%{stroke-dashoffset:0} } @keyframes anaDot { 0%,100%{r:2.5} 50%{r:4} } .ana-bars { display:flex; align-items:flex-end; gap:4px; height:50px; margin-bottom:6px; } .ana-bar { flex:1; border-radius:3px 3px 0 0; background: linear-gradient(180deg,#6366f1,#a5b4fc); animation-timing-function: ease-in-out; animation-iteration-count: infinite; } .ana-bar:nth-child(1){height:28px} .ana-bar:nth-child(2){height:38px} .ana-bar:nth-child(3){height:18px} .ana-bar:nth-child(4){height:34px} .ana-bar:nth-child(5){height:46px} .ana-bar:nth-child(6){height:24px} .ana-stats-row { display:flex; gap:8px; } .ana-stat-chip { flex:1; background:rgb(79,70,229,.14); border-radius:6px; padding:4px 6px; text-align:center; } .ana-stat-chip .val { font-size:11px; font-weight:800; color:#3730a3; } .ana-stat-chip .lbl { font-size:9px; color:#374151; } .ana-sparkline { display:block; width:100%; margin-top:4px; overflow:visible; } .ana-spark-path { stroke:#6366f1; stroke-width:1.5; fill:none; stroke-dasharray:120; stroke-dashoffset:0; } .ana-spark-dot { fill:#6366f1; } /* ── WEBSITE BUILDER: animated browser mockup ── */ @keyframes wbCursor { 0%,100%{opacity:1} 50%{opacity:0} } @keyframes wbBlock1 { 0%,100%{width:55%} 50%{width:80%} } @keyframes wbBlock2 { 0%,100%{width:70%} 50%{width:45%} } @keyframes wbBlock3 { 0%,100%{width:40%} 50%{width:65%} } @keyframes wbSlideIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} } .wb-browser { border-radius:7px; overflow:hidden; border:1px solid rgb(236,72,153,.2); font-size:0; } .wb-browser-bar { background:#fce7f3; padding:5px 8px; display:flex; align-items:center; gap:4px; } .wb-dot { width:6px;height:6px;border-radius:50%; } .wb-url-bar { flex:1; height:8px; border-radius:4px; background:rgb(236,72,153,.15); margin-left:4px; } .wb-canvas { background:#fff; padding:7px 8px; display:flex; flex-direction:column; gap:4px; } .wb-hero-blk { height:20px; border-radius:4px; background:linear-gradient(90deg,#fce7f3,#fbcfe8); position:relative; overflow:hidden; } .wb-hero-blk::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent 30%,rgb(255,255,255,.3) 50%,transparent 70%); } .wb-row { display:flex; gap:4px; } .wb-col-blk { height:12px; border-radius:3px; background:rgb(236,72,153,.12); animation-timing-function:ease-in-out; animation-iteration-count:infinite; } .wb-col-blk:nth-child(1){width:55%} .wb-col-blk:nth-child(2){width:70%} .wb-col-blk:nth-child(3){width:40%} .wb-cursor { display:inline-block; width:1.5px; height:11px; background:#ec4899; margin-left:2px; vertical-align:middle; } .wb-cta-row { display:flex; gap:4px; align-items:center; } .wb-btn-blk { height:10px; width:36px; border-radius:5px; background:linear-gradient(90deg,#ec4899,#f472b6); } .wb-img-blk { height:22px; flex:1; border-radius:3px; background:linear-gradient(135deg,#fce7f3,#fdf2f8); } .wb-label { font-size:9px; color:#ec4899; font-weight:700; margin-top:2px; } /* ── ACQUISITION: animated funnel ── */ @keyframes acqFill { 0% { opacity:.4; transform:scaleY(.85); } 50% { opacity:1; transform:scaleY(1); } 100% { opacity:.4; transform:scaleY(.85); } } @keyframes acqDot { 0%,100%{transform:translateX(0)} 50%{transform:translateX(4px)} } @keyframes acqPulse { 0%,100%{box-shadow:0 0 0 0 rgb(14,165,233,.4)} 50%{box-shadow:0 0 0 5px rgb(14,165,233,0)} } .acq-funnel { display:flex; flex-direction:column; align-items:center; gap:2px; margin-bottom:6px; } .acq-stage { border-radius:4px; height:10px; display:flex; align-items:center; justify-content:space-between; padding:0 6px; } .acq-stage span { font-size:8px; font-weight:700; color:#fff; } .acq-stage:nth-child(1){ width:100%; background:#0284c7; } .acq-stage:nth-child(2){ width:80%; background:#0ea5e9; } .acq-stage:nth-child(3){ width:60%; background:#38bdf8; } .acq-stage:nth-child(4){ width:38%; background:#7dd3fc; } .acq-pipeline { display:flex; align-items:center; gap:3px; margin-top:4px; justify-content:center; } .acq-node { width:10px; height:10px; border-radius:50%; background:#0284c7; } .acq-node:nth-child(1){background:#0284c7} .acq-node:nth-child(3){background:#0ea5e9;} .acq-node:nth-child(5){background:#38bdf8;} .acq-edge { height:2px; flex:1; background:linear-gradient(90deg,#0284c7,#38bdf8); border-radius:1px; } .acq-counter { text-align:center; font-size:10px; font-weight:800; color:#075985; margin-top:4px; } /* ── JOBS PORTAL: animated pipeline board ── */ @keyframes jobPill { 0%,100%{transform:translateX(0)} 50%{transform:translateX(3px)} } @keyframes jobCount { 0%,100%{transform:scale(1)} 50%{transform:scale(1.12)} } .jobs-board { display:flex; gap:5px; margin-bottom:6px; } .jobs-col { flex:1; border-radius:6px; padding:5px 4px; display:flex; flex-direction:column; gap:3px; } .jobs-col:nth-child(1){ background:rgb(5,150,105,.18); } .jobs-col:nth-child(2){ background:rgb(217,119,6,.18); } .jobs-col:nth-child(3){ background:rgb(220,38,38,.18); } .jobs-col-hd { font-size:8px; font-weight:700; text-align:center; margin-bottom:2px; } .jobs-col:nth-child(1) .jobs-col-hd { color:#065f46; } .jobs-col:nth-child(2) .jobs-col-hd { color:#92400e; } .jobs-col:nth-child(3) .jobs-col-hd { color:#991b1b; } .jobs-pill { height:7px; border-radius:4px; } .jobs-col:nth-child(1) .jobs-pill { background:#059669; } .jobs-col:nth-child(2) .jobs-pill { background:#d97706; } .jobs-col:nth-child(3) .jobs-pill { background:#dc2626; } .jobs-pill:nth-child(2){ opacity:.75} .jobs-pill:nth-child(3){ opacity:.55} .jobs-stats { display:flex; gap:5px; } .jobs-chip { flex:1; border-radius:6px; padding:4px 5px; text-align:center; background:rgb(5,150,105,.14); } .jobs-chip .val { font-size:12px; font-weight:800; color:#065f46; display:block; } .jobs-chip:nth-child(2) .val { color:#92400e; } .jobs-chip:nth-child(3) .val { color:#3730a3; } .jobs-chip .lbl { font-size:8px; color:#374151; } .erp-module-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: min-content; gap: 1.15rem !important; align-items: start; width: 100%; max-width: 100%; box-sizing: border-box; } .erp-module-card-grid .unit-card { --module-accent: #4f46e5; --module-accent-2: #0891b2; --module-rgb: 79, 70, 229; --module-soft: #eef2ff; position: relative; isolation: isolate; display: grid !important; grid-template-columns: 54px minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "icon badge" "title title" "copy copy" "footer footer"; min-height: 236px; height: auto !important; padding: 1.15rem 1.15rem 1rem 1.25rem !important; border-radius: 18px !important; border: 1px solid rgb(var(--module-rgb), 0.24) !important; background: linear-gradient(135deg, rgb(var(--module-rgb), 0.16) 0%, rgb(var(--module-rgb), 0.055) 38%, rgb(255,255,255,0) 66%), linear-gradient(180deg, #fff 0%, #f8fafc 100%) !important; box-shadow: 0 16px 38px rgb(15, 23, 42, 0.10), inset 0 1px 0 rgb(255,255,255,0.94) !important; overflow: hidden; transform: translateZ(0); transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease, border-color 0.28s ease !important; } .erp-module-card-grid .unit-card::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 5px !important; height: auto !important; border-radius: 18px 0 0 18px; background: linear-gradient(180deg, var(--module-accent), var(--module-accent-2), var(--module-accent)) !important; background-size: 100% 220%; opacity: 1 !important; animation: moduleCardAccent 5s ease-in-out infinite; } .erp-module-card-grid .unit-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 0%, transparent 42%, rgb(255,255,255,0.62) 50%, transparent 58%, transparent 100%); opacity: 0; transform: translateX(-58%); pointer-events: none; transition: opacity 0.18s ease; } .erp-module-card-grid .unit-card:hover, .erp-module-card-grid .unit-card:focus-visible { transform: translateY(-9px) !important; border-color: rgb(var(--module-rgb), 0.46) !important; box-shadow: 0 24px 56px rgb(15, 23, 42, 0.16), 0 0 0 4px rgb(var(--module-rgb), 0.08) !important; } .erp-module-card-grid .unit-card:hover::before, .erp-module-card-grid .unit-card:focus-visible::before { width: 7px !important; } .erp-module-card-grid .unit-card:hover::after, .erp-module-card-grid .unit-card:focus-visible::after { opacity: 1; animation: moduleCardSweep 0.72s ease forwards; } .erp-module-card-grid .unit-icon-wrapper { grid-area: icon; width: 50px !important; height: 50px !important; border-radius: 15px !important; background: linear-gradient(135deg, var(--module-soft), #fff) !important; color: var(--module-accent) !important; border: 1px solid rgb(var(--module-rgb), 0.28) !important; box-shadow: 0 10px 24px rgb(var(--module-rgb), 0.16), inset 0 1px 0 rgb(255,255,255,0.95) !important; transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease !important; } .erp-module-card-grid .unit-card:hover .unit-icon-wrapper, .erp-module-card-grid .unit-card:focus-visible .unit-icon-wrapper { transform: translateY(-3px) scale(1.08) rotate(-3deg) !important; box-shadow: 0 14px 28px rgb(var(--module-rgb), 0.22), inset 0 1px 0 rgb(255,255,255,0.95) !important; } .erp-module-card-grid .unit-badge { grid-area: badge; place-self: center start; max-width: 100%; background: rgb(var(--module-rgb), 0.10) !important; color: var(--module-accent) !important; border-color: rgb(var(--module-rgb), 0.20) !important; } .erp-module-card-grid .unit-card h3 { grid-area: title; font-size: 1rem !important; line-height: 1.2 !important; } .erp-module-card-grid .unit-card p { grid-area: copy; font-size: 0.82rem !important; line-height: 1.5 !important; line-clamp: 2; -webkit-line-clamp: 2; } .erp-module-card-grid .unit-footer { grid-area: footer; min-width: 0; padding-top: 0.72rem !important; border-top: 1px solid rgb(var(--module-rgb), 0.16) !important; color: #64748b !important; } .erp-module-card-grid .unit-footer span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .erp-module-card-grid .unit-footer i { color: var(--module-accent) !important; } .erp-module-card-grid .unit-acc { --module-accent:#d97706; --module-accent-2:#f59e0b; --module-rgb:217,119,6; --module-soft:#fff7ed; } .erp-module-card-grid .unit-agropro { --module-accent:#16a34a; --module-accent-2:#65a30d; --module-rgb:22,163,74; --module-soft:#f0fdf4; } .erp-module-card-grid .unit-crm { --module-accent:#2563eb; --module-accent-2:#06b6d4; --module-rgb:37,99,235; --module-soft:#eff6ff; } .erp-module-card-grid .unit-sch { --module-accent:#db2777; --module-accent-2:#f59e0b; --module-rgb:219,39,119; --module-soft:#fdf2f8; } .erp-module-card-grid .unit-hr { --module-accent:#059669; --module-accent-2:#14b8a6; --module-rgb:5,150,105; --module-soft:#ecfdf5; } .erp-module-card-grid .unit-inv { --module-accent:#7c3aed; --module-accent-2:#2563eb; --module-rgb:124,58,237; --module-soft:#f5f3ff; } .erp-module-card-grid .unit-marketing-hub { --module-accent:#be185d; --module-accent-2:#f97316; --module-rgb:190,24,93; --module-soft:#fdf2f8; } .erp-module-card-grid .unit-payroll { --module-accent:#4f46e5; --module-accent-2:#0891b2; --module-rgb:79,70,229; --module-soft:#eef2ff; } .erp-module-card-grid .unit-pos { --module-accent:#0284c7; --module-accent-2:#22c55e; --module-rgb:2,132,199; --module-soft:#f0f9ff; } .erp-module-card-grid .unit-propertypro { --module-accent:#4f46e5; --module-accent-2:#7c3aed; --module-rgb:79,70,229; --module-soft:#eef2ff; } .erp-module-card-grid .unit-ch { --module-accent:#7c3aed; --module-accent-2:#ec4899; --module-rgb:124,58,237; --module-soft:#f5f3ff; } .erp-module-card-grid .unit-timetracker { --module-accent:#0891b2; --module-accent-2:#2563eb; --module-rgb:8,145,178; --module-soft:#ecfeff; } .erp-module-card-grid .unit-proc { --module-accent:#0d9488; --module-accent-2:#65a30d; --module-rgb:13,148,136; --module-soft:#f0fdfa; } .erp-module-card-grid .unit-foodpro { --module-accent:#15803d; --module-accent-2:#ca8a04; --module-rgb:21,128,61; --module-soft:#f0fdf4; } .erp-module-card-grid .unit-hc { --module-accent:#dc2626; --module-accent-2:#db2777; --module-rgb:220,38,38; --module-soft:#fef2f2; } .erp-module-card-grid .unit-hotel { --module-accent:#ea580c; --module-accent-2:#d97706; --module-rgb:234,88,12; --module-soft:#fff7ed; } .erp-module-card-grid .unit-mkt { --module-accent:#16a34a; --module-accent-2:#0284c7; --module-rgb:22,163,74; --module-soft:#f0fdf4; } .erp-module-card-grid .unit-roster { --module-accent:#4f46e5; --module-accent-2:#db2777; --module-rgb:79,70,229; --module-soft:#eef2ff; } .erp-module-card-grid .unit-logistics { --module-accent:#0e7490; --module-accent-2:#2563eb; --module-rgb:14,116,144; --module-soft:#ecfeff; } .erp-module-card-grid .unit-carepro { --module-accent:#0f766e; --module-accent-2:#059669; --module-rgb:15,118,110; --module-soft:#f0fdfa; } .erp-module-card-grid .unit-homesafe { --module-accent:#c2410c; --module-accent-2:#dc2626; --module-rgb:194,65,12; --module-soft:#fff7ed; } .erp-module-card-grid .unit-treasury { --module-accent:#0369a1; --module-accent-2:#4f46e5; --module-rgb:3,105,161; --module-soft:#f0f9ff; } .erp-module-card-grid .unit-fleettrack { --module-accent:#4338ca; --module-accent-2:#0891b2; --module-rgb:67,56,202; --module-soft:#eef2ff; } .erp-module-card-grid .unit-ai { --module-accent:#6d28d9; --module-accent-2:#2563eb; --module-rgb:109,40,217; --module-soft:#f5f3ff; } .erp-module-card-grid .unit-design-studio { --module-accent:#c026d3; --module-accent-2:#f97316; --module-rgb:192,38,211; --module-soft:#fdf4ff; } .erp-module-card-grid .unit-cyber { --module-accent:#047857; --module-accent-2:#0f172a; --module-rgb:4,120,87; --module-soft:#ecfdf5; } @keyframes moduleCardAccent { 0%, 100% { background-position: 0 0; } 50% { background-position: 0 100%; } } @keyframes moduleCardSweep { from { transform: translateX(-62%); } to { transform: translateX(62%); } } /* ── Add-on Pricing Modal ───────────────────────────────────────────── */ .ap-card { position: relative; background: linear-gradient(160deg, #13152b 0%, #0d0f1f 100%); border: 1px solid rgb(99,102,241,0.25); border-radius: 20px; padding: 2.25rem 2.5rem 2rem; width: min(520px, 92vw); /* margin:auto on a flex item centers it both axes when there's space, and falls back to top-of-scroll when the card is taller than viewport */ margin: auto; align-self: center; max-height: calc(100vh - 2rem); overflow-y: auto; transform: translateY(14px); box-shadow: 0 32px 80px rgb(0,0,0,0.6), 0 0 0 1px rgb(99,102,241,0.12); color: #e2e8f0; animation: ap-slide-in .22s cubic-bezier(.22,1,.36,1); } @keyframes ap-slide-in { from { opacity:0; transform:translateY(38px) scale(.97); } to { opacity:1; transform:translateY(14px) scale(1); } } .ap-close { position: absolute; top: 1rem; right: 1.25rem; background: rgb(255,255,255,0.07); border: none; border-radius: 50%; color: #94a3b8; font-size: 1.25rem; width: 32px; height: 32px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; } .ap-close:hover { background: rgb(255,255,255,0.14); color: #fff; } .ap-header { text-align: center; margin-bottom: 1.5rem; } .ap-icon { font-size: 2.25rem; margin-bottom: .6rem; } .ap-badge { display: inline-block; background: rgb(99,102,241,0.15); border: 1px solid rgb(99,102,241,0.35); color: #a5b4fc; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .25rem .75rem; border-radius: 20px; margin-bottom: .65rem; } .ap-title { font-size: 1.5rem; font-weight: 700; color: #f1f5f9; margin: .3rem 0; } .ap-desc { color: #94a3b8; font-size: .875rem; line-height: 1.55; margin: 0; } .ap-billing-row { display: flex; gap: .5rem; background: rgb(255,255,255,0.05); border-radius: 10px; padding: .3rem; margin-bottom: 1.5rem; } .ap-billing-tab { flex: 1; padding: .5rem .75rem; border: none; border-radius: 8px; background: transparent; color: #94a3b8; font-size: .875rem; font-weight: 600; cursor: pointer; transition: all .18s; display: flex; align-items: center; justify-content: center; gap: .4rem; } .ap-billing-tab.active { background: rgb(99,102,241,0.25); color: #c7d2fe; box-shadow: 0 0 0 1px rgb(99,102,241,0.4); } .ap-billing-tab:hover:not(.active) { background: rgb(255,255,255,0.07); color: #cbd5e1; } .ap-save-badge { background: linear-gradient(90deg,#22d3ee,#6366f1); color: #fff; font-size: .65rem; font-weight: 700; padding: .15rem .45rem; border-radius: 10px; } .ap-price-block { text-align: center; margin-bottom: .3rem; } .ap-price-main { font-size: 3rem; font-weight: 800; color: #f1f5f9; letter-spacing: -.03em; } .ap-price-period { font-size: 1rem; color: #64748b; margin-left: .2rem; } .ap-price-sub { text-align: center; font-size: .8rem; color: #22d3ee; font-weight: 500; margin-bottom: 1rem; } .ap-features { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 1rem 0 1.5rem; } .ap-feature-chip { background: rgb(255,255,255,0.06); border: 1px solid rgb(255,255,255,0.1); border-radius: 20px; padding: .3rem .85rem; font-size: .8rem; color: #cbd5e1; display: flex; align-items: center; } .ap-subscribe-btn { width: 100%; padding: .9rem 1.5rem; background: linear-gradient(90deg, #6366f1 0%, #4f46e5 100%); border: none; border-radius: 12px; color: #fff; font-size: 1rem; font-weight: 700; cursor: pointer; letter-spacing: .02em; transition: filter .18s, transform .12s; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .ap-subscribe-btn:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); } .ap-subscribe-btn:disabled { opacity: .65; cursor: not-allowed; transform: none; } .ap-test-note { background: rgb(250,204,21,0.07); border: 1px solid rgb(250,204,21,0.2); border-radius: 8px; padding: .6rem 1rem; font-size: .78rem; color: #fde68a; margin-bottom: .75rem; line-height: 1.5; } .ap-test-note code { background: rgb(250,204,21,0.15); padding: .1rem .35rem; border-radius: 4px; font-family: monospace; letter-spacing: .05em; } .ap-secure { text-align: center; font-size: .72rem; color: #475569; } /* ── Trial button in pricing modal ─────────────────────────────────── */ .ap-trial-divider { display: flex; align-items: center; gap: .75rem; margin: 1rem 0 .75rem; color: #475569; font-size: .8rem; } .ap-trial-divider::before, .ap-trial-divider::after { content: ''; flex: 1; height: 1px; background: rgb(255,255,255,0.08); } .ap-trial-btn { width: 100%; padding: .85rem 1.25rem; background: rgb(74,222,128,0.1); border: 1px solid rgb(74,222,128,0.35); border-radius: 12px; color: #4ade80; font-size: .95rem; font-weight: 600; cursor: pointer; transition: background .18s, border-color .18s; display: flex; align-items: center; justify-content: center; margin-bottom: .75rem; } .ap-trial-btn:hover { background: rgb(74,222,128,0.18); border-color: rgb(74,222,128,0.55); } .ap-trial-btn.is-disabled, .ap-trial-btn:disabled { opacity: .72; cursor: not-allowed; pointer-events: none; background: rgb(74,222,128,0.08); border-color: rgb(148,163,184,0.26); color: #cbd5e1; } .ap-trial-used-note { text-align: center; font-size: .78rem; color: #64748b; margin-bottom: .75rem; } /* ── Trial button on lock overlay ───────────────────────────────────── */ .module-lock-btn-trial { display: inline-flex; align-items: center; justify-content: center; padding: .7rem 1.5rem; background: rgb(74,222,128,0.1); border: 1px solid rgb(74,222,128,0.4); border-radius: 10px; color: #4ade80; font-size: .875rem; font-weight: 600; cursor: pointer; transition: background .18s, border-color .18s; margin-top: .6rem; } .module-lock-btn-trial:hover { background: rgb(74,222,128,0.2); border-color: rgb(74,222,128,0.65); } .module-lock-btn-trial.is-disabled, .module-lock-btn-trial:disabled { opacity: .72; cursor: not-allowed; pointer-events: none; background: rgb(74,222,128,0.08); border-color: rgb(148,163,184,0.26); color: #cbd5e1; } .module-trial-expired-note { margin-top: .65rem; font-size: .8rem; color: #94a3b8; } /* ── Trial active banner (shown at top of module section) ──────────── */ .addon-trial-banner { position: relative; width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: .5rem; padding: .5rem 1rem; background: rgb(20,40,20,0.92); border-bottom: 1px solid rgb(74,222,128,0.3); font-size: .82rem; color: #a7f3d0; font-weight: 500; } .addon-trial-banner-upgrade { margin-left: auto; padding: .2rem .75rem; background: rgb(74,222,128,0.15); border: 1px solid rgb(74,222,128,0.4); border-radius: 6px; color: #4ade80; font-size: .78rem; font-weight: 600; cursor: pointer; transition: background .18s; } .addon-trial-banner-upgrade:hover { background: rgb(74,222,128,0.28); } /* Elegant glassmorphic override for shared live-chat widget. Loaded *after* live-chat-global.js styles so these win without !important where possible, with !important on positioning/visual essentials. */ #chatWidget { right: 28px !important; bottom: 28px !important; z-index: 100050 !important; } /* — Toggle button: gradient orb with breathing pulse + halo ring — */ #chatToggleBtn { width: 62px !important; height: 62px !important; border-radius: 50% !important; background: radial-gradient(circle at 30% 25%, #818cf8 0%, #6366f1 40%, #4f46e5 75%, #3730a3 100%) !important; color: #fff !important; box-shadow: 0 18px 38px -10px rgb(79,70,229,.65), 0 6px 14px -4px rgb(15,23,42,.45), inset 0 1px 0 rgb(255,255,255,.35), inset 0 -8px 18px rgb(15,23,42,.25) !important; border: 1px solid rgb(255,255,255,.18) !important; position: relative !important; overflow: visible !important; transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease !important; animation: erpChatBreathe 3.4s ease-in-out infinite; } #chatToggleBtn::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; /* Conic gradient creates two bright "comet" arcs — when rotated, the overlap of glow + soft halo behind reads as a glowing spiral. */ background: conic-gradient(from 0deg, rgb(34,211,238,0) 0deg, rgb(34,211,238,.95) 70deg, rgb(168,85,247,1) 140deg, rgb(236,72,153,.0) 200deg, rgb(99,102,241,0) 240deg, rgb(56,189,248,.85) 300deg, rgb(168,85,247,.0) 360deg); -webkit-mask: radial-gradient(circle, transparent 54%, #000 58%, #000 72%, transparent 76%); mask: radial-gradient(circle, transparent 54%, #000 58%, #000 72%, transparent 76%); filter: blur(1.5px) drop-shadow(0 0 6px rgb(34,211,238,.7)) drop-shadow(0 0 12px rgb(168,85,247,.55)) drop-shadow(0 0 18px rgb(99,102,241,.45)); opacity: .95; z-index: -1; animation: erpChatSpiral 4s linear infinite; pointer-events: none; } #chatToggleBtn::after { content: " "; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgb(165,180,252,.55); opacity: 0; animation: erpChatRing 2.6s ease-out infinite; pointer-events: none; } #chatToggleBtn:hover { transform: translateY(-3px) scale(1.06) !important; box-shadow: 0 24px 48px -10px rgb(79,70,229,.75), 0 8px 18px -4px rgb(15,23,42,.55), inset 0 1px 0 rgb(255,255,255,.4) !important; } #chatToggleBtn:active { transform: translateY(-1px) scale(1.02) !important; } #chatToggleBtn:focus-visible { outline: 2px solid #c7d2fe; outline-offset: 4px; } /* Toggle icon (custom replacement) */ #chatToggleBtn .erp-chat-icon { width: 26px; height: 26px; display: block; filter: drop-shadow(0 2px 3px rgb(15,23,42,.35)); animation: erpChatIconWiggle 4.2s ease-in-out infinite; } #chatToggleBtn .erp-chat-icon .dot { transform-origin: center; animation: erpChatDots 1.6s ease-in-out infinite; } #chatToggleBtn .erp-chat-icon .dot.d2 { animation-delay: .2s; } #chatToggleBtn .erp-chat-icon .dot.d3 { animation-delay: .4s; } @keyframes erpChatBreathe { 0%, 100% { box-shadow: 0 18px 38px -10px rgb(79,70,229,.55), 0 6px 14px -4px rgb(15,23,42,.45), inset 0 1px 0 rgb(255,255,255,.35), inset 0 -8px 18px rgb(15,23,42,.25); } 50% { box-shadow: 0 22px 46px -10px rgb(79,70,229,.78), 0 8px 16px -4px rgb(15,23,42,.55), inset 0 1px 0 rgb(255,255,255,.45), inset 0 -8px 18px rgb(15,23,42,.25); } } @keyframes erpChatHalo { 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.18); opacity: .15; } } @keyframes erpChatSpiral { to { transform: rotate(360deg); } } @keyframes erpChatRing { 0% { transform: scale(1); opacity: .8; } 80% { transform: scale(1.55); opacity: 0; } 100% { transform: scale(1.55); opacity: 0; } } @keyframes erpChatIconWiggle { 0%, 88%, 100% { transform: rotate(0); } 92% { transform: rotate(-9deg); } 96% { transform: rotate(7deg); } } @keyframes erpChatDots { 0%, 60%, 100% { transform: translateY(0); opacity: .55; } 30% { transform: translateY(-2px); opacity: 1; } } /* Notification badge */ #chatToggleBtn .erp-chat-badge { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: linear-gradient(135deg,#f97316,#ef4444); color: #fff; font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; border: 2px solid #1e1b4b; box-shadow: 0 4px 10px rgb(239,68,68,.5); pointer-events: none; } /* — Open state: hide pulse rings while window is open — */ #chatWidget.erp-chat-open #chatToggleBtn::before, #chatWidget.erp-chat-open #chatToggleBtn::after { animation: none; opacity: 0; } #chatWidget.erp-chat-open #chatToggleBtn { animation: none; } /* — Window: glass + soft gradient + smooth open — */ #chatWindow { width: 380px !important; height: 540px !important; bottom: 80px !important; border-radius: 20px !important; background: linear-gradient(180deg, rgb(15,23,42,.92), rgb(2,6,23,.96)) !important; border: 1px solid rgb(148,163,184,.18) !important; box-shadow: 0 30px 70px -15px rgb(2,6,23,.7), 0 12px 30px -8px rgb(2,6,23,.6), inset 0 1px 0 rgb(255,255,255,.06) !important; -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); transform-origin: bottom right; } #chatWidget.erp-chat-open #chatWindow { animation: erpChatPop .3s cubic-bezier(.34,1.56,.64,1) both; } @keyframes erpChatPop { 0% { opacity: 0; transform: translateY(12px) scale(.94); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* Header restyle */ #chatWindow .ec-head { padding: 14px 16px !important; background: linear-gradient(135deg,#4f46e5 0%, #6366f1 50%, #8b5cf6 100%) !important; border-bottom: 1px solid rgb(255,255,255,.08); position: relative; } #chatWindow .ec-head::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgb(255,255,255,.25), transparent); } #chatWindow .ec-head strong { font-size: 14px !important; font-weight: 600; letter-spacing: .2px; } #chatWindow .ec-head small { font-size: 11px !important; display: inline-flex !important; align-items: center; gap: 6px; } #chatWindow .ec-head small::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgb(74,222,128,.7); animation: erpChatLive 1.8s ease-in-out infinite; } @keyframes erpChatLive { 0%, 100% { box-shadow: 0 0 0 0 rgb(74,222,128,.6); } 50% { box-shadow: 0 0 0 6px rgb(74,222,128,0); } } #chatWindow .ec-close { width: 28px; height: 28px; border-radius: 8px !important; background: rgb(255,255,255,.12) !important; transition: background .2s ease, transform .2s ease; } #chatWindow .ec-close:hover { background: rgb(255,255,255,.22) !important; transform: rotate(90deg); } /* Messages area */ #chatMessages { height: 360px !important; padding: 14px !important; background: linear-gradient(180deg, rgb(15,23,42,.6), rgb(2,6,23,.85)) !important; scrollbar-width: thin; scrollbar-color: rgb(99,102,241,.4) transparent; } #chatMessages::-webkit-scrollbar { width: 6px; } #chatMessages::-webkit-scrollbar-thumb { background: rgb(99,102,241,.45); border-radius: 3px; } .ec-msg { padding: 10px 12px !important; border-radius: 14px !important; font-size: 13px !important; box-shadow: 0 2px 6px rgb(0,0,0,.25); animation: erpChatMsgIn .25s ease-out both; } @keyframes erpChatMsgIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .ec-msg.customer { background: linear-gradient(135deg,#6366f1,#4f46e5) !important; border-bottom-right-radius: 4px !important; } .ec-msg.agent { background: rgb(30,41,59,.85) !important; border: 1px solid rgb(148,163,184,.2) !important; color: #e2e8f0 !important; border-bottom-left-radius: 4px !important; } .ec-msg.system { background: rgb(30,58,138,.25) !important; border: 1px dashed rgb(129,140,248,.45) !important; color: #c7d2fe !important; text-align: center; align-self: center; font-size: 12px !important; } /* Actions + form */ .ec-actions { background: rgb(2,6,23,.6) !important; border-top: 1px solid rgb(148,163,184,.1) !important; padding: 10px 14px !important; } .ec-agent-btn { background: rgb(99,102,241,.15) !important; border: 1px solid rgb(99,102,241,.4) !important; color: #c7d2fe !important; border-radius: 12px !important; padding: 9px 12px !important; font-size: 12px !important; font-weight: 500; transition: all .2s ease; } .ec-agent-btn:hover { background: rgb(99,102,241,.28) !important; border-color: rgb(99,102,241,.6) !important; transform: translateY(-1px); } #chatForm { background: rgb(2,6,23,.7) !important; border-top: 1px solid rgb(148,163,184,.1) !important; padding: 12px !important; gap: 10px !important; } #chatInput { background: rgb(15,23,42,.7) !important; border: 1px solid rgb(148,163,184,.2) !important; color: #f1f5f9 !important; border-radius: 12px !important; padding: 11px 14px !important; font-size: 13px !important; transition: border-color .2s ease, box-shadow .2s ease; } #chatInput::-moz-placeholder { color: rgb(148,163,184,.6); } #chatInput::placeholder { color: rgb(148,163,184,.6); } #chatInput:focus { border-color: #6366f1 !important; box-shadow: 0 0 0 3px rgb(99,102,241,.25) !important; } .ec-send-btn { background: linear-gradient(135deg,#6366f1,#4f46e5) !important; border-radius: 12px !important; padding: 0 16px !important; font-weight: 600 !important; box-shadow: 0 4px 12px rgb(79,70,229,.4); transition: transform .15s ease, box-shadow .2s ease; } .ec-send-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgb(79,70,229,.55); } @media (width <=640px) { #chatWindow { width: calc(100vw - 16px) !important; height: calc(100vh - 100px) !important; } } /* === High-end SaaS polish: sharper text, subtle depth, glass, hover glow === Applies only to the public ERP landing surface. */ /* 1) Sharper, higher-contrast typography on dark surfaces */ body.erp-body, body.erp-body * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizelegibility; } html body.erp-body #landing.module-section .erp-hero-subtitle { color: #d7e1ee !important; font-size: 1.045rem !important; line-height: 1.76 !important; font-weight: 460 !important; letter-spacing: 0.005em !important; max-width: 520px !important; margin-bottom: 1.55rem !important; } html body.erp-body #landing.module-section .hero-kpi-meta, html body.erp-body #landing.module-section .erp-hero-stat-label { color: #cbd5e1 !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.07em !important; } html body.erp-body #landing.module-section .hero-kpi-val, html body.erp-body #landing.module-section .erp-hero-stat-value { color: #f8fafc !important; text-shadow: 0 1px 0 rgb(0,0,0,0.35) !important; } html body.erp-body #landing.module-section .next-step-label { color: #e2e8f0 !important; } /* Restore the "1 / 2 / 3" steps strip as a polished chip row. */ html body.erp-body #landing.module-section .next-steps-strip { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; gap: 0.5rem !important; margin: 0.85rem 10px 0.4rem !important; padding: 0 !important; background: transparent !important; border: none !important; } html body.erp-body #landing.module-section .next-steps-strip .next-step-item { flex: 0 0 auto !important; min-width: 0 !important; display: inline-flex !important; align-items: center !important; gap: 0.45rem !important; padding: 0.35rem 0.7rem 0.35rem 0.4rem !important; border-radius: 999px !important; background: #1e293b !important; border: 1px solid rgb(203,213,225,0.34) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: 0 1px 0 rgb(255,255,255,0.08) inset !important; color: #f8fafc !important; cursor: pointer !important; transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease !important; outline: none !important; line-height: 1 !important; filter: none !important; opacity: 1 !important; text-shadow: none !important; } html body.erp-body #landing.module-section .next-steps-strip .next-step-item:hover, html body.erp-body #landing.module-section .next-steps-strip .next-step-item:focus-visible { transform: none !important; border-color: rgb(129,140,248,0.55) !important; background: #273449 !important; box-shadow: 0 0 0 1px rgb(129,140,248,0.20), 0 1px 0 rgb(255,255,255,0.10) inset !important; } html body.erp-body #landing.module-section .next-steps-strip .next-step-index { flex: 0 0 auto !important; width: 18px !important; height: 18px !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 0.65rem !important; font-weight: 800 !important; color: #fff !important; background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important; box-shadow: 0 0 0 1px rgb(255,255,255,0.22) inset !important; letter-spacing: 0 !important; text-shadow: none !important; opacity: 1 !important; } html body.erp-body #landing.module-section .next-steps-strip .next-step-label { flex: 0 0 auto !important; font-size: 0.75rem !important; font-weight: 750 !important; color: #fff !important; letter-spacing: 0 !important; white-space: nowrap !important; opacity: 1 !important; text-shadow: none !important; -webkit-font-smoothing: antialiased !important; text-rendering: geometricprecision !important; } html body.erp-body #landing.module-section .next-steps-strip .next-step-item::after { content: "\2192"; font-size: 0.78rem !important; color: #f8fafc !important; margin-left: 0.15rem !important; transition: transform .25s ease, color .25s ease !important; opacity: 1 !important; text-shadow: none !important; } html body.erp-body #landing.module-section .next-steps-strip .next-step-item:hover::after { color: #c7d2fe !important; transform: translateX(2px) !important; } /* Compact command-center preview inside the hero. */ html body.erp-body #landing.module-section .erp-command-center { width: min(450px, 100%) !important; margin: 0.25rem 0 1.2rem !important; padding: 0.86rem 0.95rem !important; border-radius: 14px !important; background: linear-gradient(135deg, rgb(15,23,42,0.82), rgb(30,41,59,0.58)) !important; border: 1px solid rgb(129,140,248,0.22) !important; box-shadow: 0 18px 38px rgb(2,6,23,0.32), inset 0 1px 0 rgb(255,255,255,0.05) !important; -webkit-backdrop-filter: blur(12px) saturate(130%) !important; backdrop-filter: blur(12px) saturate(130%) !important; overflow: hidden !important; } /* Full-width slimmer variant placed beneath the four KPI cards */ @property --erp-cmd-ring-angle { syntax: ''; initial-value: 0deg; inherits: false; } html body.erp-body #landing.module-section .erp-command-center.erp-command-center--fullwidth { width: 100% !important; max-width: none !important; grid-column: 1 / -1 !important; margin: 0 !important; padding: 0.78rem 1.05rem !important; border-radius: 14px !important; display: grid !important; grid-template-columns: auto 1fr auto 160px !important; grid-template-rows: auto auto !important; align-items: center !important; gap: 0.34rem 1.1rem !important; min-height: 86px !important; height: auto !important; position: relative !important; isolation: isolate !important; border: 0 !important; background: linear-gradient(135deg, rgb(15,23,42,0.92), rgb(30,41,59,0.74)) !important; box-shadow: 0 18px 38px rgb(2,6,23,0.32), inset 0 1px 0 rgb(255,255,255,0.05), 0 0 22px rgb(99,102,241,0.18) !important; } html body.erp-body #landing.module-section .erp-command-center.erp-command-center--fullwidth::before { content: "" !important; position: absolute !important; inset: 0 !important; border-radius: inherit !important; padding: 2px !important; background: conic-gradient( from var(--erp-cmd-ring-angle), #38bdf8, #6366f1, #c084fc, #f472b6, #f59e0b, #34d399, #38bdf8 ) !important; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important; -webkit-mask-composite: xor !important; mask-composite: exclude !important; pointer-events: none !important; z-index: 0 !important; animation: erpCommandRingSpin 6s linear infinite !important; filter: drop-shadow(0 0 6px rgb(129,140,248,0.45)) drop-shadow(0 0 10px rgb(244,114,182,0.28)) !important; } html body.erp-body #landing.module-section .erp-command-center.erp-command-center--fullwidth > * { position: relative !important; z-index: 1 !important; } @keyframes erpCommandRingSpin { to { --erp-cmd-ring-angle: 360deg; } } /* Fallback rotation for browsers without @property: rotate a sized conic gradient overlay. */ @supports not (background: conic-gradient(from var(--erp-cmd-ring-angle), red, blue)) { html body.erp-body #landing.module-section .erp-command-center.erp-command-center--fullwidth::before { background: conic-gradient(#38bdf8, #6366f1, #c084fc, #f472b6, #f59e0b, #34d399, #38bdf8) !important; animation: erpCommandRingSpinFallback 6s linear infinite !important; } } @keyframes erpCommandRingSpinFallback { to { transform: rotate(360deg); } } html body.erp-body #landing.module-section .erp-command-center.erp-command-center--fullwidth .erp-command-head { margin: 0 !important; padding: 0 !important; grid-column: 1 !important; grid-row: 1 !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 0.55rem !important; white-space: nowrap !important; line-height: 1 !important; } html body.erp-body #landing.module-section .erp-command-center.erp-command-center--fullwidth .erp-command-head > span { display: inline-flex !important; align-items: center !important; gap: 0.42rem !important; line-height: 1 !important; } html body.erp-body #landing.module-section .erp-command-center.erp-command-center--fullwidth .erp-command-head em { margin: 0 !important; line-height: 1 !important; align-self: center !important; font-style: normal !important; font-size: 0.62rem !important; font-weight: 800 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: #fecaca !important; background: rgb(239,68,68,0.16) !important; border: 1px solid rgb(239,68,68,0.55) !important; padding: 0.22rem 0.5rem 0.22rem 1.1rem !important; border-radius: 999px !important; position: relative !important; box-shadow: 0 0 0 0 rgb(239,68,68,0.55) !important; animation: erpLiveBeepPill 1.4s ease-in-out infinite !important; } html body.erp-body #landing.module-section .erp-command-center.erp-command-center--fullwidth .erp-command-head em::before { content: "" !important; position: absolute !important; left: 0.42rem !important; top: 50% !important; width: 7px !important; height: 7px !important; border-radius: 50% !important; background: #ef4444 !important; transform: translateY(-50%) !important; box-shadow: 0 0 0 0 rgb(239,68,68,0.7) !important; animation: erpLiveBeepDot 1.4s ease-in-out infinite !important; } @keyframes erpLiveBeepPill { 0%, 100% { box-shadow: 0 0 0 0 rgb(239,68,68,0.55); border-color: rgb(239,68,68,0.55); } 50% { box-shadow: 0 0 0 6px rgb(239,68,68,0); border-color: rgb(248,113,113,0.95); } } @keyframes erpLiveBeepDot { 0%, 100% { transform: translateY(-50%) scale(1); box-shadow: 0 0 0 0 rgb(239,68,68,0.65), 0 0 6px rgb(239,68,68,0.55); opacity: 1; } 50% { transform: translateY(-50%) scale(1.25); box-shadow: 0 0 0 6px rgb(239,68,68,0), 0 0 12px rgb(239,68,68,0.85); opacity: 0.55; } } html body.erp-body #landing.module-section .erp-command-center.erp-command-center--fullwidth .erp-command-body { display: contents !important; } html body.erp-body #landing.module-section .erp-command-center.erp-command-center--fullwidth .erp-command-metric { display: contents !important; } html body.erp-body #landing.module-section .erp-command-center.erp-command-center--fullwidth .erp-command-metric strong { display: block !important; grid-column: 3 !important; grid-row: 1 !important; place-self: center end !important; font-size: 1.1rem !important; line-height: 1 !important; margin: 0 !important; } html body.erp-body #landing.module-section .erp-command-center.erp-command-center--fullwidth #erpAutomationCount.erp-count-green { color: #34d399 !important; text-shadow: 0 0 14px rgb(52,211,153,0.45) !important; } html body.erp-body #landing.module-section .erp-command-center.erp-command-center--fullwidth #erpAutomationCount.erp-count-amber { color: #fbbf24 !important; text-shadow: 0 0 14px rgb(251,191,36,0.42) !important; } html body.erp-body #landing.module-section .erp-command-center.erp-command-center--fullwidth #erpAutomationCount.erp-count-red { color: #fb7185 !important; text-shadow: 0 0 14px rgb(251,113,133,0.45) !important; } html body.erp-body #landing.module-section .erp-command-center.erp-command-center--fullwidth .erp-command-metric span { position: static !important; grid-column: 4 !important; grid-row: 2 !important; place-self: center end !important; margin: 0 !important; font-size: 0.66rem !important; line-height: 1.2 !important; color: #cbd5e1 !important; font-weight: 600 !important; white-space: nowrap !important; z-index: 2 !important; } html body.erp-body #landing.module-section .erp-command-center.erp-command-center--fullwidth .erp-command-flow { grid-column: 4 !important; grid-row: 1 !important; place-self: center stretch !important; width: 160px !important; height: 22px !important; margin: 0 !important; } html body.erp-body #landing.module-section .erp-command-center.erp-command-center--fullwidth .erp-command-flow span { width: 14px !important; height: 14px !important; border-radius: 5px !important; } html body.erp-body #landing.module-section .erp-command-center.erp-command-center--fullwidth .erp-command-feed { margin: 0 !important; grid-column: 1 / 4 !important; grid-row: 2 !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 0.5rem !important; font-size: 0.7rem !important; line-height: 1.2 !important; align-self: center !important; max-width: none !important; padding-right: 0 !important; text-align: left !important; } html body.erp-body #landing.module-section .erp-command-center.erp-command-center--fullwidth .erp-command-feed > span:not(.feed-pulse) { line-height: 1.2 !important; } @media (width <= 900px) { html body.erp-body #landing.module-section .erp-command-center.erp-command-center--fullwidth { grid-template-columns: 1fr !important; row-gap: 0.55rem !important; } html body.erp-body #landing.module-section .erp-command-center.erp-command-center--fullwidth .erp-command-feed { text-align: left !important; justify-content: flex-start !important; max-width: none !important; } } html body.erp-body #landing.module-section .erp-command-head, html body.erp-body #landing.module-section .erp-command-body, html body.erp-body #landing.module-section .erp-command-feed { display: flex !important; align-items: center !important; min-width: 0 !important; } html body.erp-body #landing.module-section .erp-command-head { justify-content: space-between !important; gap: 1rem !important; margin-bottom: 0.72rem !important; color: #f8fafc !important; font-size: 0.78rem !important; font-weight: 800 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; } html body.erp-body #landing.module-section .erp-command-head i { color: #c084fc !important; margin-right: 0.42rem !important; filter: drop-shadow(0 0 8px rgb(192,132,252,0.48)) !important; } html body.erp-body #landing.module-section .erp-command-head em { font-style: normal !important; font-size: 0.62rem !important; color: #67e8f9 !important; padding: 0.2rem 0.48rem !important; border-radius: 999px !important; background: rgb(34,211,238,0.10) !important; border: 1px solid rgb(34,211,238,0.25) !important; } html body.erp-body #landing.module-section .erp-command-body { justify-content: space-between !important; gap: 1rem !important; } html body.erp-body #landing.module-section .erp-command-metric strong { display: block !important; font-size: 1.32rem !important; line-height: 1 !important; color: #fff !important; text-shadow: 0 0 16px rgb(129,140,248,0.30) !important; } html body.erp-body #landing.module-section .erp-command-metric span { display: block !important; margin-top: 0.22rem !important; color: #cbd5e1 !important; font-size: 0.74rem !important; font-weight: 600 !important; } html body.erp-body #landing.module-section .erp-command-flow { flex: 0 0 172px !important; height: 34px !important; display: grid !important; grid-template-columns: repeat(4, 1fr) !important; align-items: center !important; gap: 7px !important; position: relative !important; } html body.erp-body #landing.module-section .erp-command-flow::before { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 2px; border-radius: 999px; background: linear-gradient(90deg, rgb(56,189,248,0.18), rgb(129,140,248,0.82), rgb(52,211,153,0.35)); transform: translateY(-50%); } html body.erp-body #landing.module-section .erp-command-flow span { width: 22px !important; height: 22px !important; border-radius: 9px !important; background: linear-gradient(135deg, rgb(99,102,241,0.95), rgb(56,189,248,0.62)) !important; border: 1px solid rgb(255,255,255,0.18) !important; box-shadow: 0 0 16px rgb(99,102,241,0.28) !important; z-index: 1 !important; animation: erpCommandNode 3s ease-in-out infinite !important; } html body.erp-body #landing.module-section .erp-command-flow span:nth-child(2) { animation-delay: .25s !important; } html body.erp-body #landing.module-section .erp-command-flow span:nth-child(3) { animation-delay: .5s !important; } html body.erp-body #landing.module-section .erp-command-flow span:nth-child(4) { animation-delay: .75s !important; } html body.erp-body #landing.module-section .erp-command-feed { gap: 0.45rem !important; margin-top: 0.72rem !important; color: #dbeafe !important; font-size: 0.73rem !important; font-weight: 600 !important; line-height: 1.35 !important; } html body.erp-body #landing.module-section .feed-pulse { width: 7px !important; height: 7px !important; border-radius: 50% !important; background: #22d3ee !important; box-shadow: 0 0 0 0 rgb(34,211,238,0.40), 0 0 10px rgb(34,211,238,0.55) !important; flex: 0 0 auto !important; animation: erpFeedPulse 1.8s ease-in-out infinite !important; } @keyframes erpCommandNode { 0%, 100% { transform: translateY(0); filter: saturate(1); } 50% { transform: translateY(-3px); filter: saturate(1.35); } } @keyframes erpFeedPulse { 0%, 100% { transform: scale(.9); opacity: .7; box-shadow: 0 0 0 0 rgb(34,211,238,0); } 50% { transform: scale(1.12); opacity: 1; box-shadow: 0 0 0 6px rgb(34,211,238,0.08); } } /* 2) Glass + depth + hover glow on KPI cards */ html body.erp-body #landing.module-section .hero-kpi-card { background: linear-gradient(160deg, rgb(99,102,241,0.10) 0%, rgb(15,23,42,0.55) 60%, rgb(15,23,42,0.70) 100%) !important; border: 1px solid rgb(148,163,184,0.18) !important; -webkit-backdrop-filter: blur(14px) saturate(140%) !important; backdrop-filter: blur(14px) saturate(140%) !important; box-shadow: 0 1px 0 rgb(255,255,255,0.05) inset, 0 12px 28px rgb(2,6,23,0.45), 0 2px 6px rgb(2,6,23,0.30) !important; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease, background .35s ease !important; } html body.erp-body #landing.module-section .hero-kpi-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgb(255,255,255,0.07), rgb(255,255,255,0) 45%); pointer-events: none; opacity: .9; } html body.erp-body #landing.module-section .hero-kpi-card { position: relative !important; overflow: hidden !important; } html body.erp-body #landing.module-section .hero-kpi-card:hover { transform: translateY(-3px) !important; border-color: rgb(129,140,248,0.55) !important; box-shadow: 0 1px 0 rgb(255,255,255,0.08) inset, 0 18px 42px rgb(2,6,23,0.55), 0 0 0 1px rgb(129,140,248,0.25), 0 0 28px rgb(99,102,241,0.35) !important; } /* 3) Trust indicator row */ html body.erp-body #landing.module-section .erp-trust-row { list-style: none !important; margin: 1.1rem 0 0 !important; padding: 0.55rem 0.85rem !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 0.55rem 1.15rem !important; background: linear-gradient(180deg, rgb(15,23,42,0.55), rgb(15,23,42,0.30)) !important; border: 1px solid rgb(148,163,184,0.16) !important; border-radius: 10px !important; -webkit-backdrop-filter: blur(8px) saturate(130%) !important; backdrop-filter: blur(8px) saturate(130%) !important; box-shadow: 0 8px 22px rgb(2,6,23,0.30) !important; width: -moz-fit-content !important; width: fit-content !important; max-width: 100% !important; } html body.erp-body #landing.module-section .erp-trust-row li { display: inline-flex !important; align-items: center !important; gap: 0.45rem !important; color: #e2e8f0 !important; font-size: 0.78rem !important; font-weight: 600 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; white-space: nowrap !important; } html body.erp-body #landing.module-section .erp-trust-row li i { color: #818cf8 !important; font-size: 0.85rem !important; } html body.erp-body #landing.module-section .erp-trust-row li:nth-child(2) i { color: #34d399 !important; } html body.erp-body #landing.module-section .erp-trust-row li:nth-child(3) i { color: #38bdf8 !important; } html body.erp-body #landing.module-section .erp-trust-row li:nth-child(4) i { color: #fbbf24 !important; } html body.erp-body #landing.module-section .erp-trust-row li:nth-child(5) i { color: #f472b6 !important; } /* 4) Subtle hover glow on module cards */ html body.erp-body #landing.module-section .module-card { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease !important; } html body.erp-body #landing.module-section .module-card:hover { transform: translateY(-4px) !important; box-shadow: 0 18px 38px rgb(2,6,23,0.18), 0 0 0 1px rgb(99,102,241,0.20), 0 0 24px rgb(99,102,241,0.18) !important; } /* ===== Premium SaaS enhancement layer ===== */ /* 1) Navbar typography: heavier weight + brighter ink */ html body.erp-body #navbar { background: linear-gradient(180deg, rgb(7,13,31,0.96), rgb(7,13,31,0.88)) !important; -webkit-backdrop-filter: blur(18px) saturate(145%) !important; backdrop-filter: blur(18px) saturate(145%) !important; box-shadow: 0 1px 0 rgb(148,163,184,0.12), 0 18px 42px rgb(2,6,23,0.18) !important; } html body.erp-body #navbar .nav-menu { gap: clamp(0.55rem, 0.72vw, 0.95rem) !important; } html body.erp-body #navbar .nav-menu > li > a { font-weight: 600 !important; color: #f1f5f9 !important; letter-spacing: 0.005em !important; background: rgb(255,255,255,0.045) !important; border: 1px solid rgb(148,163,184,0.16) !important; box-shadow: inset 0 1px 0 rgb(255,255,255,0.045) !important; transition: color .25s ease, background .25s ease, transform .25s ease, border-color .25s ease, box-shadow .25s ease !important; position: relative !important; } html body.erp-body #navbar .nav-menu > li > a:hover { color: #fff !important; background: rgb(99,102,241,0.14) !important; border-color: rgb(129,140,248,0.42) !important; transform: translateY(-2px) !important; box-shadow: inset 0 1px 0 rgb(255,255,255,0.08), 0 8px 18px rgb(2,6,23,0.22), 0 0 18px rgb(99,102,241,0.18) !important; } /* Restore ORIGINAL Marketplace gradient-text design over the polish layer */ html body.erp-body #navbar .nav-menu > li > a.marketplace-btn { background: linear-gradient(90deg, #38bdf8, #6366f1, #f472b6, #f59e0b, #38bdf8) !important; background-size: 100% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; font-weight: 800 !important; letter-spacing: 0.02em !important; border-color: transparent !important; box-shadow: none !important; text-shadow: none !important; animation: heroMarqueeGradient 4s ease-in-out infinite !important; } html body.erp-body #navbar .nav-menu > li > a.marketplace-btn i { color: #f1f5f9 !important; -webkit-text-fill-color: currentcolor !important; background: none !important; background-clip: border-box !important; } html body.erp-body #navbar .nav-menu > li > a.marketplace-btn:hover { background: linear-gradient(90deg, #38bdf8, #6366f1, #f472b6, #f59e0b, #38bdf8) !important; background-size: 100% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; border-color: transparent !important; box-shadow: none !important; filter: brightness(1.2) drop-shadow(0 0 6px rgb(99,102,241,0.4)) !important; transform: translateY(-1px) !important; } /* Nav underline animation — slides in from center on hover */ html body.erp-body #navbar .nav-menu > li > a:not(.marketplace-btn)::before { content: ""; position: absolute; left: 50%; bottom: 4px; width: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #818cf8, #c084fc); transform: translateX(-50%); transition: width .3s cubic-bezier(.2,.8,.2,1); pointer-events: none; } html body.erp-body #navbar .nav-menu > li > a:not(.marketplace-btn):hover::before, html body.erp-body #navbar .nav-menu > li > a:not(.marketplace-btn):focus-visible::before { width: calc(100% - 1.2rem); } /* 2) KPI value subtle counter pulse + card animations (cards already lift; adding a one-shot count-up reveal for values) */ @keyframes erpKpiCountUp { 0% { opacity: 0; transform: translateY(6px); filter: blur(2px); } 60% { opacity: 1; transform: translateY(0); filter: blur(0); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } } html body.erp-body #landing.module-section .hero-kpi-val { animation: erpKpiCountUp .9s cubic-bezier(.2,.8,.2,1) both !important; } html body.erp-body #landing.module-section .hero-kpi-card:nth-child(1) .hero-kpi-val { animation-delay: .05s !important; } html body.erp-body #landing.module-section .hero-kpi-card:nth-child(2) .hero-kpi-val { animation-delay: .20s !important; } html body.erp-body #landing.module-section .hero-kpi-card:nth-child(3) .hero-kpi-val { animation-delay: .35s !important; } html body.erp-body #landing.module-section .hero-kpi-card:nth-child(4) .hero-kpi-val { animation-delay: .50s !important; } /* 3) Hero KPI card differentiation — distinct accent tints per card */ html body.erp-body #landing.module-section .hero-kpi-card:nth-child(1) { background: linear-gradient(160deg, rgb(99,102,241,0.18) 0%, rgb(15,23,42,0.55) 55%, rgb(15,23,42,0.72) 100%) !important; border-color: rgb(99,102,241,0.22) !important; } html body.erp-body #landing.module-section .hero-kpi-card:nth-child(2) { background: linear-gradient(160deg, rgb(16,185,129,0.16) 0%, rgb(15,23,42,0.55) 55%, rgb(15,23,42,0.72) 100%) !important; border-color: rgb(16,185,129,0.22) !important; } html body.erp-body #landing.module-section .hero-kpi-card:nth-child(3) { background: linear-gradient(160deg, rgb(251,191,36,0.16) 0%, rgb(15,23,42,0.55) 55%, rgb(15,23,42,0.72) 100%) !important; border-color: rgb(251,191,36,0.22) !important; } html body.erp-body #landing.module-section .hero-kpi-card:nth-child(4) { background: linear-gradient(160deg, rgb(56,189,248,0.16) 0%, rgb(15,23,42,0.55) 55%, rgb(15,23,42,0.72) 100%) !important; border-color: rgb(56,189,248,0.22) !important; } html body.erp-body #landing.module-section .hero-kpi-icon { border: 1px solid rgb(255,255,255,0.06) !important; box-shadow: inset 0 1px 0 rgb(255,255,255,0.06) !important; } html body.erp-body #landing.module-section .hero-kpi-body { display: grid !important; gap: 0.32rem !important; } html body.erp-body #landing.module-section .hero-kpi-meta { color: #dbeafe !important; font-weight: 800 !important; opacity: .92 !important; } html body.erp-body #landing.module-section .hero-kpi-val { color: #fff !important; text-shadow: 0 0 12px rgb(129,140,248,0.24), 0 1px 0 rgb(0,0,0,0.45) !important; } html body.erp-body #landing.module-section .hero-kpi-spark { width: 58px !important; height: 16px !important; display: inline-flex !important; align-items: flex-end !important; gap: 3px !important; } html body.erp-body #landing.module-section .hero-kpi-spark span { width: 8px !important; border-radius: 999px !important; background: linear-gradient(180deg, #a5b4fc, #38bdf8) !important; box-shadow: 0 0 8px rgb(56,189,248,0.36) !important; } html body.erp-body #landing.module-section .hero-kpi-spark span:nth-child(1) { height: 5px !important; opacity: .72 !important; } html body.erp-body #landing.module-section .hero-kpi-spark span:nth-child(2) { height: 9px !important; opacity: .82 !important; } html body.erp-body #landing.module-section .hero-kpi-spark span:nth-child(3) { height: 12px !important; opacity: .92 !important; } html body.erp-body #landing.module-section .hero-kpi-spark span:nth-child(4) { height: 16px !important; } html body.erp-body #landing.module-section .spark-steady span { background: linear-gradient(180deg, #7dd3fc, #38bdf8) !important; } html body.erp-body #landing.module-section .spark-steady span:nth-child(1) { height: 11px !important; } html body.erp-body #landing.module-section .spark-steady span:nth-child(2) { height: 13px !important; } html body.erp-body #landing.module-section .spark-steady span:nth-child(3) { height: 12px !important; } html body.erp-body #landing.module-section .spark-steady span:nth-child(4) { height: 14px !important; } html body.erp-body #landing.module-section .hero-kpi-activity { display: inline-flex !important; align-items: center !important; gap: 5px !important; height: 16px !important; } html body.erp-body #landing.module-section .hero-kpi-activity span { width: 7px !important; height: 7px !important; border-radius: 50% !important; background: #34d399 !important; box-shadow: 0 0 0 0 rgb(52,211,153,0.52), 0 0 9px rgb(52,211,153,0.48) !important; animation: erpStaffPulse 1.8s ease-in-out infinite !important; } html body.erp-body #landing.module-section .hero-kpi-activity span:nth-child(2) { animation-delay: .22s !important; } html body.erp-body #landing.module-section .hero-kpi-activity span:nth-child(3) { animation-delay: .44s !important; } html body.erp-body #landing.module-section .hero-kpi-meter { width: 62px !important; height: 5px !important; border-radius: 999px !important; background: rgb(251,191,36,0.16) !important; overflow: hidden !important; } html body.erp-body #landing.module-section .hero-kpi-meter span { display: block !important; width: 66% !important; height: 100% !important; border-radius: inherit !important; background: linear-gradient(90deg, #fbbf24, #f59e0b) !important; box-shadow: 0 0 10px rgb(251,191,36,0.36) !important; } html body.erp-body #landing.module-section .hero-kpi-card:nth-child(4) .hero-kpi-icon { box-shadow: inset 0 1px 0 rgb(255,255,255,0.08), 0 0 18px rgb(56,189,248,0.28) !important; } @keyframes erpStaffPulse { 0%, 100% { transform: scale(.86); opacity: .62; box-shadow: 0 0 0 0 rgb(52,211,153,0); } 50% { transform: scale(1.12); opacity: 1; box-shadow: 0 0 0 5px rgb(52,211,153,0.08); } } /* 4) Logo / brand area: more breathing room + sharper typography */ html body.erp-body #navbar .nav-brand, html body.erp-body #navbar .navbar-brand, html body.erp-body #navbar .brand, html body.erp-body #navbar .logo, html body.erp-body #navbar .nav-logo { padding: 0 1.1rem 0 0.25rem !important; margin-right: 0.4rem !important; } html body.erp-body #navbar .notranslate { letter-spacing: -0.015em !important; font-weight: 800 !important; } /* 5) Smooth dark hero → light section transition */ html body.erp-body #landing.module-section .erp-hero { position: relative !important; } html body.erp-body #landing.module-section .erp-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -28px; height: 56px; pointer-events: none; background: linear-gradient(180deg, rgb(2,6,23,0.55) 0%, rgb(2,6,23,0.18) 45%, rgb(2,6,23,0) 100%); filter: blur(6px); z-index: 1; } /* ===== Logo enlargement ===== */ html body.erp-body #navbar .container.nav-container > a.logo.enhanced-logo { font-size: 1.85rem !important; gap: 12px !important; transform: none !important; margin-right: 18px !important; padding-right: 6px !important; } html body.erp-body #navbar .container.nav-container > a.logo.enhanced-logo > svg { width: 50px !important; height: 50px !important; border-radius: 12px !important; box-shadow: 0 4px 18px rgb(99,102,241,0.55), 0 1px 4px rgb(245,158,11,0.45) !important; flex: 0 0 auto !important; } html body.erp-body #navbar .container.nav-container > a.logo.enhanced-logo .notranslate { font-size: 1.85rem !important; letter-spacing: -0.02em !important; font-weight: 900 !important; white-space: nowrap !important; } /* Push the app-switcher grid icon clear of the enlarged wordmark */ html body.erp-body #navbar .container.nav-container > #erpAppSwitcher, html body.erp-body #navbar .container.nav-container > .erp-app-switcher { margin-left: 48px !important; } @media (width <= 768px) { html body.erp-body #navbar .container.nav-container { flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; overflow: visible !important; padding-left: 12px !important; padding-right: 12px !important; } html body.erp-body #navbar .container.nav-container > a.logo.enhanced-logo { order: -2 !important; margin-right: 8px !important; } html body.erp-body #navbar .container.nav-container > #erpAppSwitcher, html body.erp-body #navbar .container.nav-container > .erp-app-switcher { order: -1 !important; margin-left: 0 !important; margin-right: 8px !important; } html body.erp-body #navbar .nav-actions-group { display: none !important; } html body.erp-body #navbar .mobile-menu-btn { order: 20 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin-left: auto !important; flex: 0 0 40px !important; width: 40px !important; height: 40px !important; padding: 0 !important; border-radius: 10px !important; } html body.erp-body #navbar #navMenu, html body.erp-body #navbar .nav-menu { display: none !important; position: fixed !important; top: var(--erp-shell-navbar-offset, var(--navbar-height)) !important; left: 12px !important; right: 12px !important; width: auto !important; max-width: none !important; max-height: calc(100vh - var(--erp-shell-navbar-offset, var(--navbar-height)) - 24px) !important; flex-direction: column !important; align-items: stretch !important; gap: 8px !important; padding: 12px !important; margin: 0 !important; overflow-y: auto !important; background: rgb(7, 13, 31, 0.98) !important; border: 1px solid rgb(148, 163, 184, 0.18) !important; border-radius: 14px !important; box-shadow: 0 24px 60px rgb(2, 6, 23, 0.44) !important; z-index: 100004 !important; } html body.erp-body #navbar #navMenu.mobile-open, html body.erp-body #navbar .nav-menu.mobile-open { display: flex !important; } html body.erp-body #navbar .nav-menu > li, html body.erp-body #navbar .nav-menu > li > a { width: 100% !important; } } /* JS-driven open state (click / keyboard) — must win over hover-only CSS */ html body.erp-body #navbar .nav-menu > li.nav-dropdown.nav-dropdown-open > .dropdown-menu { display: block !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* Mega dropdowns: viewport-pinned panels with a real grid, so Product, Solutions, and Platform never inherit the trigger's narrow x-position. */ html body.erp-body #navbar .nav-menu > li.nav-dropdown > .dropdown-menu { box-sizing: border-box !important; } html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu.erp-mega-dropdown, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu[style*="min-width: 960"], html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu[style*="min-width: 1180"], html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu[style*="min-width: 1280"], html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu.lp-is-4925860d, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu.lp-is-17bf536d, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu.lp-is-f042200a { position: fixed !important; inset: var(--erp-nav-dropdown-top, 164px) var(--erp-nav-dropdown-pad, 18px) auto var(--erp-nav-dropdown-pad, 18px) !important; width: auto !important; min-width: 0 !important; max-width: none !important; max-height: var(--erp-nav-dropdown-max-h, calc(100vh - 176px)) !important; margin: 0 !important; padding: 1rem 1.25rem !important; transform: none !important; overflow: hidden auto !important; background: #070d1f !important; border: 1px solid rgb(148 163 184 / 22%) !important; box-shadow: 0 28px 70px rgb(2 6 23 / 55%), inset 0 1px 0 rgb(255 255 255 / 6%) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu.erp-mega-dropdown > .erp-mega-dropdown__row, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu[style*="min-width: 960"] > li, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu[style*="min-width: 1180"] > li, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu[style*="min-width: 1280"] > li, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu.lp-is-4925860d > li, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu.lp-is-17bf536d > li, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu.lp-is-f042200a > li { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; align-items: start !important; justify-content: stretch !important; justify-items: stretch !important; gap: 0 1.25rem !important; width: 100% !important; list-style: none !important; } html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu.erp-mega-dropdown[data-mega-cols="4"] > .erp-mega-dropdown__row, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu[style*="min-width: 1280"] > li, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu[style*="min-width:1280"] > li, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu.lp-is-17bf536d > li { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu.erp-mega-dropdown[data-mega-cols="5"] > .erp-mega-dropdown__row { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu.erp-mega-dropdown[data-mega-cols="6"] > .erp-mega-dropdown__row, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu.lp-is-f042200a > li { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu.lp-is-4925860d > li { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu.erp-mega-dropdown .erp-mega-dropdown__col, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu[style*="min-width: 960"] > li > div, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu[style*="min-width: 1180"] > li > div, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu[style*="min-width: 1280"] > li > div, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu.lp-is-4925860d > li > div, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu.lp-is-17bf536d > li > div, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu.lp-is-f042200a > li > div { min-width: 0 !important; width: auto !important; max-width: none !important; padding: 0 0.5rem !important; box-sizing: border-box !important; max-height: none !important; overflow: visible !important; overscroll-behavior: auto; } html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu.erp-mega-dropdown .erp-mega-dropdown__col + .erp-mega-dropdown__col, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu[style*="min-width: 960"] > li > div + div, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu[style*="min-width: 1180"] > li > div + div, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu[style*="min-width: 1280"] > li > div + div, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu.lp-is-4925860d > li > div + div, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu.lp-is-17bf536d > li > div + div, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu.lp-is-f042200a > li > div + div { border-left: 1px solid rgb(148 163 184 / 18%) !important; } html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu.erp-mega-dropdown a:hover, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu[style*="min-width: 960"] a:hover, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu[style*="min-width: 1180"] a:hover, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu[style*="min-width: 1280"] a:hover, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu.lp-is-4925860d a:hover, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu.lp-is-17bf536d a:hover, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu.lp-is-f042200a a:hover { background: rgb(255 255 255 / 8%) !important; } html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu.erp-mega-dropdown a, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu[style*="min-width: 960"] a, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu[style*="min-width: 1180"] a, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu[style*="min-width: 1280"] a, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu.lp-is-4925860d a, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu.lp-is-17bf536d a, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu.lp-is-f042200a a { width: 100% !important; min-width: 0 !important; justify-content: flex-start !important; text-align: left !important; white-space: normal !important; overflow-wrap: anywhere !important; line-height: 1.22 !important; } html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu.erp-mega-dropdown a > i, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu[style*="min-width: 960"] a > i, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu[style*="min-width: 1180"] a > i, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu[style*="min-width: 1280"] a > i, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu.lp-is-4925860d a > i, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu.lp-is-17bf536d a > i, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu.lp-is-f042200a a > i { flex: 0 0 auto !important; } html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu.erp-mega-dropdown a > span, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu[style*="min-width: 960"] a > span, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu[style*="min-width: 1180"] a > span, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu[style*="min-width: 1280"] a > span, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu.lp-is-4925860d a > span, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu.lp-is-17bf536d a > span, html body.erp-body #navbar #navMenu > li.nav-dropdown > .dropdown-menu.lp-is-f042200a a > span { min-width: 0 !important; overflow-wrap: anywhere !important; } /* ===== AI command-center search trigger ===== */ @keyframes erpAiBreath { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgb(129,140,248,0)); } 50% { transform: scale(1.08); filter: drop-shadow(0 0 6px rgb(129,140,248,0.55)); } } @keyframes erpAiBorderShift { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } @keyframes erpAiSparkPulse { 0%, 100% { transform: scale(1) rotate(0deg); opacity: .72; } 50% { transform: scale(1.18) rotate(18deg); opacity: 1; } } html body.erp-body #navbar .nav-actions-group .us-trigger, html body.erp-body #navbar .nav-actions-group .us-trigger.erp-ai-trigger { position: relative !important; height: 38px !important; min-height: 38px !important; padding: 0 12px 0 14px !important; border-radius: 12px !important; background: rgb(255,255,255,0.055) !important; border: 1px solid rgb(99,102,241,0.48) !important; -webkit-backdrop-filter: blur(10px) saturate(140%) !important; backdrop-filter: blur(10px) saturate(140%) !important; box-shadow: inset 0 1px 0 rgb(255,255,255,0.06), 0 0 0 1px rgb(99,102,241,0.24), 0 0 12px rgb(99,102,241,0.18), 0 4px 12px rgb(2,6,23,0.28) !important; color: #e2e8f0 !important; transition: border-color .3s ease, box-shadow .3s ease, background .3s ease !important; overflow: hidden !important; box-sizing: border-box !important; max-width: 100% !important; } html body.erp-body #navbar .nav-actions-group .us-trigger::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(120deg, #38bdf8, #6366f1, #c084fc, #38bdf8); background-size: 200% 200%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .72; transition: opacity .35s ease; pointer-events: none; animation: erpAiBorderShift 4s linear infinite; } html body.erp-body #navbar .nav-actions-group .us-trigger::after { content: "\2726"; position: absolute; left: 36px; top: 9px; width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #e0e7ff; font-size: 0.62rem; line-height: 1; background: radial-gradient(circle, rgb(129,140,248,0.95), rgb(99,102,241,0.32) 58%, rgb(99,102,241,0) 72%); box-shadow: 0 0 10px rgb(129,140,248,0.65), 0 0 18px rgb(56,189,248,0.24); pointer-events: none; animation: erpAiSparkPulse 2.4s ease-in-out infinite; } html body.erp-body #navbar .nav-actions-group .us-trigger:hover, html body.erp-body #navbar .nav-actions-group .us-trigger:focus-visible, html body.erp-body #navbar .nav-actions-group .us-trigger:focus-within { background: rgb(255,255,255,0.06) !important; border-color: rgb(99,102,241,0.55) !important; box-shadow: inset 0 1px 0 rgb(255,255,255,0.06), 0 0 0 1px rgb(99,102,241,0.35), 0 0 22px rgb(99,102,241,0.30), 0 0 38px rgb(56,189,248,0.18) !important; } html body.erp-body #navbar .nav-actions-group .us-trigger:hover::before, html body.erp-body #navbar .nav-actions-group .us-trigger:focus-visible::before, html body.erp-body #navbar .nav-actions-group .us-trigger:focus-within::before { opacity: 1; } html body.erp-body #navbar .nav-actions-group .us-trigger > svg, html body.erp-body #navbar .nav-actions-group .us-trigger > i, html body.erp-body #navbar .nav-actions-group .us-trigger > .us-trigger-icon { color: #a5b4fc !important; fill: currentcolor !important; font-size: 1rem !important; width: 20px !important; height: 20px !important; margin-right: 8px !important; flex: 0 0 auto !important; filter: drop-shadow(0 0 6px rgb(129,140,248,0.55)) !important; animation: erpAiBreath 2.6s ease-in-out infinite !important; } html body.erp-body #navbar .nav-actions-group .us-trigger .us-trigger-text { font-size: 0.92rem !important; font-weight: 500 !important; color: #cbd5e1 !important; letter-spacing: 0.005em !important; line-height: 1.4 !important; padding: 2px 0 !important; flex: 1 1 auto !important; text-align: left !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body.erp-body #navbar .nav-actions-group .us-trigger .us-trigger-kbd, html body.erp-body #navbar .nav-actions-group .us-trigger .erp-ai-kbd { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin-left: 10px !important; padding: 3px 8px !important; height: 24px !important; min-width: 38px !important; border-radius: 6px !important; background: rgb(15,23,42,0.65) !important; border: 1px solid rgb(148,163,184,0.22) !important; box-shadow: inset 0 -1px 0 rgb(0,0,0,0.35), 0 1px 0 rgb(255,255,255,0.04) !important; color: #cbd5e1 !important; font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace !important; font-size: 0.7rem !important; font-weight: 700 !important; letter-spacing: 0.04em !important; flex: 0 0 auto !important; } /* ============================================================ Enterprise polish — KPI sophistication, glassmorphism, unified utility cluster, enterprise movement. Scoped, additive, single-file. ============================================================ */ /* (1) KPI cards — micro-trends, live pulse, stronger hover lift */ html body.erp-body #landing.module-section .hero-kpi-card { background: linear-gradient(160deg, rgb(99,102,241,0.10) 0%, rgb(15,23,42,0.42) 60%, rgb(15,23,42,0.58) 100%) !important; border: 1px solid rgb(148,163,184,0.16) !important; -webkit-backdrop-filter: blur(18px) saturate(150%) !important; backdrop-filter: blur(18px) saturate(150%) !important; } html body.erp-body #landing.module-section .hero-kpi-card:hover { transform: translateY(-4px) !important; box-shadow: 0 1px 0 rgb(255,255,255,0.10) inset, 0 22px 48px rgb(2,6,23,0.55), 0 0 0 1px rgb(129,140,248,0.30), 0 0 32px rgb(99,102,241,0.40) !important; } /* Live pulse dot on each KPI badge */ html body.erp-body #landing.module-section .hero-kpi-badge { position: relative !important; padding-left: 1.35rem !important; } html body.erp-body #landing.module-section .hero-kpi-badge::before { content: "" !important; position: absolute !important; left: 0.55rem !important; top: 50% !important; width: 6px !important; height: 6px !important; border-radius: 50% !important; background: currentcolor !important; transform: translateY(-50%) !important; box-shadow: 0 0 0 0 currentcolor !important; animation: erpKpiPulseDot 2.4s cubic-bezier(.4,0,.2,1) infinite !important; opacity: 0.85 !important; } @keyframes erpKpiPulseDot { 0% { box-shadow: 0 0 0 0 rgb(52,211,153,0.55); } 70% { box-shadow: 0 0 0 7px rgb(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgb(52,211,153,0); } } /* Sparkline shimmer — subtle scan-line across the bars */ html body.erp-body #landing.module-section .hero-kpi-spark { position: relative !important; overflow: hidden !important; } html body.erp-body #landing.module-section .hero-kpi-spark::after { content: "" !important; position: absolute !important; top: 0 !important; bottom: 0 !important; left: -40% !important; width: 35% !important; background: linear-gradient(90deg, transparent, rgb(255,255,255,0.10), transparent) !important; animation: erpKpiSparkShimmer 4.6s ease-in-out infinite !important; pointer-events: none !important; } @keyframes erpKpiSparkShimmer { 0%, 12% { transform: translateX(0); opacity: 0; } 18% { opacity: 1; } 65% { transform: translateX(360%); opacity: 1; } 72%, 100% { transform: translateX(360%); opacity: 0; } } /* Sparkline bars now have a soft animated grow so they feel alive */ html body.erp-body #landing.module-section .hero-kpi-spark span { transform-origin: bottom !important; animation: erpKpiSparkBreath 3.8s ease-in-out infinite !important; } html body.erp-body #landing.module-section .hero-kpi-spark span:nth-child(1) { animation-delay: 0s !important; } html body.erp-body #landing.module-section .hero-kpi-spark span:nth-child(2) { animation-delay: .25s !important; } html body.erp-body #landing.module-section .hero-kpi-spark span:nth-child(3) { animation-delay: .50s !important; } html body.erp-body #landing.module-section .hero-kpi-spark span:nth-child(4) { animation-delay: .75s !important; } @keyframes erpKpiSparkBreath { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.18); } } /* Activity dots — gentle traveling glow */ html body.erp-body #landing.module-section .hero-kpi-activity span { box-shadow: 0 0 0 0 rgb(52,211,153,0) !important; animation: erpKpiActivityGlow 1.8s ease-in-out infinite !important; } @keyframes erpKpiActivityGlow { 0%, 100% { box-shadow: 0 0 0 0 rgb(52,211,153,0); } 50% { box-shadow: 0 0 0 4px rgb(52,211,153,0.18); } } /* Meter fill — slow live progression */ html body.erp-body #landing.module-section .hero-kpi-meter span { animation: erpKpiMeterFlow 5.5s ease-in-out infinite !important; } @keyframes erpKpiMeterFlow { 0%, 100% { width: 38%; } 50% { width: 72%; } } /* Micro-trend caption inside the badge for the value column */ html body.erp-body #landing.module-section .hero-kpi-card .hero-kpi-trend { display: block !important; margin-top: 0.28rem !important; font-size: 0.6rem !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: #94a3b8 !important; } html body.erp-body #landing.module-section .hero-kpi-card .hero-kpi-trend .erp-trend-up { color: #34d399 !important; } html body.erp-body #landing.module-section .hero-kpi-card .hero-kpi-trend .erp-trend-down { color: #fb7185 !important; } html body.erp-body #landing.module-section .hero-kpi-card .hero-kpi-trend .erp-trend-flat { color: #a5b4fc !important; } /* (2) Subtle glassmorphism — AI command center, search bar, KPI cards */ html body.erp-body #landing.module-section .erp-command-center.erp-command-center--fullwidth { background: linear-gradient(135deg, rgb(15,23,42,0.62), rgb(30,41,59,0.50)) !important; -webkit-backdrop-filter: blur(20px) saturate(160%) !important; backdrop-filter: blur(20px) saturate(160%) !important; } html body.erp-body #navbar .erp-search-trigger, html body.erp-body #navbar .unified-search-trigger, html body.erp-body #navbar [data-search-trigger], html body.erp-body #navbar .nav-search, html body.erp-body #navbar .navbar-search { background: linear-gradient(135deg, rgb(15,23,42,0.55), rgb(30,41,59,0.40)) !important; -webkit-backdrop-filter: blur(14px) saturate(140%) !important; backdrop-filter: blur(14px) saturate(140%) !important; border: 1px solid rgb(129,140,248,0.28) !important; box-shadow: inset 0 1px 0 rgb(255,255,255,0.06), 0 8px 22px rgb(2,6,23,0.32) !important; } /* (3) Unified top-right utility cluster — single glass container with subtle separators */ html body.erp-body #util-bar { background: linear-gradient(180deg, rgb(7,13,31,0.94), rgb(7,13,31,0.88)) !important; } html body.erp-body #util-bar .util-bar-inner { align-items: center !important; gap: 0 !important; padding-top: 0.42rem !important; padding-bottom: 0.42rem !important; } /* Wrap the entire interactive cluster in one unified glass pill via visually-grouping all direct children that follow nav-auth-buttons. */ html body.erp-body #util-bar .util-bar-inner > .nav-auth-buttons { margin-left: auto !important; display: inline-flex !important; align-items: center !important; gap: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } /* The unified container spans login → chip → bell → profile → language */ html body.erp-body #util-bar .util-bar-inner { position: relative !important; } html body.erp-body #util-bar .util-bar-inner::after { content: "" !important; position: absolute !important; top: 50% !important; right: 1.5rem !important; height: 36px !important; /* width is computed via the cluster wrapper below; this is fallback only */ pointer-events: none !important; transform: translateY(-50%) !important; z-index: 0 !important; display: none !important; } /* Style each grouped child with consistent height + thin separators */ html body.erp-body #util-bar .util-bar-inner > .nav-auth-buttons, html body.erp-body #util-bar .util-bar-inner > #navUserChip, html body.erp-body #util-bar .util-bar-inner > #navNotifWrap, html body.erp-body #util-bar .util-bar-inner > #navUserProfile, html body.erp-body #util-bar .util-bar-inner > .util-lang-wrap { display: inline-flex !important; align-items: center !important; height: 38px !important; margin: 0 !important; background: rgb(255,255,255,0.04) !important; border-top: 1px solid rgb(255,255,255,0.10) !important; border-bottom: 1px solid rgb(255,255,255,0.10) !important; border-left: 1px solid rgb(255,255,255,0.08) !important; border-right: 0 !important; padding: 0 0.55rem !important; -webkit-backdrop-filter: blur(10px) saturate(140%) !important; backdrop-filter: blur(10px) saturate(140%) !important; } /* First child: rounded left edge, no left separator */ html body.erp-body #util-bar .util-bar-inner > .nav-auth-buttons { margin-left: auto !important; border-left: 1px solid rgb(255,255,255,0.10) !important; border-radius: 999px 0 0 999px !important; padding-left: 0.55rem !important; } /* Last child: rounded right edge */ html body.erp-body #util-bar .util-bar-inner > .util-lang-wrap { border-right: 1px solid rgb(255,255,255,0.10) !important; border-radius: 0 999px 999px 0 !important; padding-right: 0.55rem !important; } /* Hide segments that are conditionally hidden so separators don't double */ html body.erp-body #util-bar .util-bar-inner > #navUserProfile[style*="display:none"], html body.erp-body #util-bar .util-bar-inner > #navUserProfile[style*="display: none"] { display: none !important; } /* Inside the unified pill, soften individual child chrome so they read as one cohesive cluster rather than competing buttons. */ html body.erp-body #util-bar .nav-auth-buttons #loginBtn.util-btn { box-shadow: 0 4px 14px rgb(99,102,241,0.28) !important; padding: 0.42rem 0.95rem !important; font-size: 0.82rem !important; } html body.erp-body #util-bar #navUserChip { background: rgb(255,255,255,0.04) !important; border-top: 1px solid rgb(255,255,255,0.10) !important; border-bottom: 1px solid rgb(255,255,255,0.10) !important; border-left: 1px solid rgb(255,255,255,0.08) !important; border-right: 0 !important; border-radius: 0 !important; padding: 0 0.6rem !important; } html body.erp-body #util-bar #navNotifBell { background: transparent !important; border: 0 !important; color: #cbd5e1 !important; cursor: pointer !important; width: 34px !important; height: 34px !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: background .2s ease, transform .2s ease, color .2s ease !important; } html body.erp-body #util-bar #navNotifBell i { color: inherit !important; } html body.erp-body #util-bar #navNotifBell:hover { background: rgb(255,255,255,0.10) !important; transform: translateY(-1px) !important; color: #e2e8f0 !important; } html body.erp-body #util-bar #navNotifBell.nav-bell--unread, html body.erp-body #util-bar #navNotifBell.nav-bell--unread:hover { color: #cbd5e1 !important; } html body.erp-body #util-bar #navNotifBell.nav-bell--critical { color: #f59e0b !important; } html body.erp-body #util-bar #navNotifBell.nav-bell--critical:hover { color: #fbbf24 !important; } html body.erp-body #util-bar #navNotifBadge { background: #ef4444 !important; color: #fff !important; border-color: #0b1224 !important; } html body.erp-body #util-bar .util-lang-btn { background: transparent !important; border: 0 !important; padding: 0.4rem 0.7rem !important; font-size: 0.82rem !important; color: #e2ecff !important; } html body.erp-body #util-bar .util-lang-btn:hover { background: rgb(255,255,255,0.10) !important; transform: translateY(-1px) !important; } /* Unified hover lift on every interactive cluster member */ html body.erp-body #util-bar .util-btn, html body.erp-body #util-bar .util-lang-btn, html body.erp-body #util-bar #navNotifBell { transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease !important; } /* (4) Enterprise movement — rotating insights feed */ html body.erp-body #landing.module-section .erp-command-center.erp-command-center--fullwidth .erp-command-feed { overflow: hidden !important; } html body.erp-body #landing.module-section .erp-command-feed-rotator { display: inline-flex !important; flex-direction: column !important; height: 1.1em !important; overflow: hidden !important; line-height: 1.1 !important; vertical-align: bottom !important; } html body.erp-body #landing.module-section .erp-command-feed-rotator > span { display: block !important; height: 1.1em !important; line-height: 1.1 !important; transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .35s ease !important; } /* Subtle in-row activity ticker for the AI command center */ html body.erp-body #landing.module-section .erp-command-flow span { animation-duration: 2.4s !important; } /* ============================================================ Final polish — motion, typography, and depth layers. Subtle, enterprise-grade, restraint-driven (Linear/Stripe/Vercel). ============================================================ */ /* (A) Motion — alive, never flashy ----------------------------- */ /* Live red dot for the eyebrow chip — already pulses; harmonize timing. */ html body.erp-body #landing.module-section .erp-hero-eyebrow .edot { animation-duration: 2.4s !important; } /* Hero KPI value — subtle count-up shimmer on first paint, then idle. */ @keyframes erpKpiValShimmer { 0% { background-position: -120% 0; opacity: .9; } 55% { background-position: 220% 0; opacity: 1; } 100% { background-position: 220% 0; opacity: 1; } } html body.erp-body #landing.module-section .hero-kpi-card .hero-kpi-val { background-image: linear-gradient( 90deg, rgb(241,245,249,1) 0%, rgb(241,245,249,1) 38%, rgb(165,180,252,0.95) 50%, rgb(241,245,249,1) 62%, rgb(241,245,249,1) 100% ) !important; background-size: 220% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; animation: erpKpiValShimmer 7s ease-in-out 1 !important; } /* When card is hovered, refresh the shimmer to suggest a live read. */ html body.erp-body #landing.module-section .hero-kpi-card:hover .hero-kpi-val { animation: erpKpiValShimmer 1.6s ease-in-out 1 !important; } /* Command center ambient scan — diagonal sweep, low opacity. */ html body.erp-body #landing.module-section .erp-command-center.erp-command-center--fullwidth { overflow: hidden !important; } html body.erp-body #landing.module-section .erp-command-center.erp-command-center--fullwidth::after { content: "" !important; position: absolute !important; top: 0 !important; bottom: 0 !important; left: -30% !important; width: 28% !important; background: linear-gradient( 100deg, transparent 0%, rgb(129,140,248,0.10) 40%, rgb(244,114,182,0.10) 60%, transparent 100% ) !important; transform: skewX(-14deg) !important; pointer-events: none !important; z-index: 0 !important; animation: erpCommandScan 6.5s ease-in-out infinite !important; opacity: 0.85 !important; } @keyframes erpCommandScan { 0%, 18% { transform: translateX(0) skewX(-14deg); opacity: 0; } 24% { opacity: 1; } 72% { transform: translateX(520%) skewX(-14deg); opacity: 1; } 78%, 100% { transform: translateX(520%) skewX(-14deg); opacity: 0; } } /* Soft hover transition on dropdown nav links so they feel responsive. */ html body.erp-body #navbar .nav-menu > li > a { transition: color .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease !important; } /* Live notification bell — gentle ring tilt every ~9s if a badge exists. */ @keyframes erpBellNudge { 0%, 92%, 100% { transform: rotate(0); } 94% { transform: rotate(-9deg); } 96% { transform: rotate( 7deg); } 98% { transform: rotate(-4deg); } } html body.erp-body #util-bar #navNotifBell.nav-bell--unread:has(.nav-bell-badge:not(.nav-bell-badge-hidden)) i, html body.erp-body #util-bar #navNotifBell.nav-bell--critical:has(.nav-bell-badge:not(.nav-bell-badge-hidden)) i { transform-origin: 50% 10% !important; animation: erpBellNudge 9s ease-in-out infinite !important; } /* (B) Typography consistency ---------------------------------- */ /* KPI sub-labels & meta — slightly larger, looser, higher contrast. */ html body.erp-body #landing.module-section .hero-kpi-meta { font-size: 0.82rem !important; letter-spacing: 0.06em !important; color: #cbd5e1 !important; font-weight: 700 !important; } html body.erp-body #landing.module-section .hero-kpi-card .hero-kpi-trend { font-size: 0.64rem !important; letter-spacing: 0.02em !important; color: #b6c2d4 !important; line-height: 1.45 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; display: block !important; } html body.erp-body #landing.module-section .hero-kpi-card .hero-kpi-badge { font-size: 0.7rem !important; letter-spacing: 0.03em !important; } /* Trust strip captions — improve readability without enlarging the row. */ html body.erp-body #landing.module-section .erp-hero-trust-strip .erp-hero-stat-value { font-size: 0.86rem !important; letter-spacing: 0.02em !important; color: #f1f5f9 !important; } html body.erp-body #landing.module-section .erp-hero-trust-strip .erp-hero-stat-label { font-size: 0.66rem !important; letter-spacing: 0.085em !important; color: #94a3b8 !important; } /* Utility cluster text — slightly larger for legibility. */ html body.erp-body #util-bar .util-btn, html body.erp-body #util-bar .util-lang-btn { font-size: 0.84rem !important; letter-spacing: 0.01em !important; } html body.erp-body #util-bar #navUserChip .nav-user-name { font-size: 0.8rem !important; color: #e2ecff !important; } /* Micro indicators inside the AI command center. */ html body.erp-body #landing.module-section .erp-command-center.erp-command-center--fullwidth .erp-command-head { font-size: 0.78rem !important; letter-spacing: 0.06em !important; } html body.erp-body #landing.module-section .erp-command-center.erp-command-center--fullwidth .erp-command-feed { font-size: 0.74rem !important; line-height: 1.35 !important; color: #dbe7ff !important; } html body.erp-body #landing.module-section .erp-command-center.erp-command-center--fullwidth .erp-command-metric span { font-size: 0.7rem !important; color: #cbd5e1 !important; } /* Hero subtitle — tiny readability bump. */ html body.erp-body #landing.module-section .erp-hero-subtitle { font-size: 1.06rem !important; line-height: 1.7 !important; color: #a5b4cc !important; } /* (C) Enterprise depth layers --------------------------------- */ /* Hero — add a soft ambient glow plume behind the content layer without altering existing decorative pseudo-elements. */ html body.erp-body #landing.module-section .erp-hero { position: relative !important; display: flex !important; flex-direction: column !important; } html body.erp-body #landing.module-section .erp-hero > .erp-hero-inner { position: relative !important; z-index: 2 !important; flex: 1 1 auto !important; } html body.erp-body #landing.module-section .erp-hero > .erp-hero-trust-strip { position: relative !important; z-index: 2 !important; width: 100% !important; max-width: 100% !important; margin-top: 1.25rem !important; flex-shrink: 0 !important; box-sizing: border-box !important; align-self: stretch !important; flex-wrap: wrap !important; justify-content: center !important; gap: 0.35rem 0.75rem !important; } html body.erp-body #landing.module-section .erp-hero .erp-hero-ambient { position: absolute !important; pointer-events: none !important; z-index: 0 !important; } /* KPI cards — refined depth: tighter base shadow, deeper hover halo. */ html body.erp-body #landing.module-section .hero-kpi-card { box-shadow: 0 1px 0 rgb(255,255,255,0.05) inset, 0 10px 22px rgb(2,6,23,0.42), 0 1px 4px rgb(2,6,23,0.30) !important; } html body.erp-body #landing.module-section .hero-kpi-card::after { content: "" !important; position: absolute !important; inset: -1px !important; border-radius: inherit !important; background: radial-gradient( 120% 80% at 0% 0%, rgb(129,140,248,0.18), transparent 55% ) !important; opacity: 0 !important; transition: opacity .35s ease !important; pointer-events: none !important; z-index: 0 !important; } html body.erp-body #landing.module-section .hero-kpi-card:hover::after { opacity: 1 !important; } html body.erp-body #landing.module-section .hero-kpi-card > * { position: relative !important; z-index: 1 !important; } /* AI command center — deeper resting shadow + ambient under-glow. */ html body.erp-body #landing.module-section .erp-command-center.erp-command-center--fullwidth { box-shadow: 0 1px 0 rgb(255,255,255,0.05) inset, 0 18px 38px rgb(2,6,23,0.40), 0 0 28px rgb(99,102,241,0.18) !important; } /* Trust strip — promote to a subtle layered surface, not flat. */ html body.erp-body #landing.module-section .erp-hero-trust-strip { background: linear-gradient(180deg, rgb(15,23,42,0.55), rgb(15,23,42,0.28)) !important; border: 1px solid rgb(148,163,184,0.14) !important; -webkit-backdrop-filter: blur(10px) saturate(140%) !important; backdrop-filter: blur(10px) saturate(140%) !important; box-shadow: 0 1px 0 rgb(255,255,255,0.04) inset, 0 6px 18px rgb(2,6,23,0.32) !important; } /* Next-step pills — restrained shadow hierarchy, hover lifts. */ html body.erp-body #landing.module-section .next-steps-strip .next-step-item { box-shadow: 0 1px 0 rgb(255,255,255,0.05) inset, 0 4px 14px rgb(2,6,23,0.30) !important; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important; } html body.erp-body #landing.module-section .next-steps-strip .next-step-item:hover { transform: translateY(-2px) !important; box-shadow: 0 1px 0 rgb(255,255,255,0.08) inset, 0 10px 24px rgb(2,6,23,0.42), 0 0 0 1px rgb(129,140,248,0.28) !important; } /* Utility cluster — gain a thin bottom rim of light to read as one elevated surface against the dark navbar (very subtle). */ html body.erp-body #util-bar .util-bar-inner > .nav-auth-buttons, html body.erp-body #util-bar .util-bar-inner > #navUserChip, html body.erp-body #util-bar .util-bar-inner > #navNotifWrap, html body.erp-body #util-bar .util-bar-inner > #navUserProfile, html body.erp-body #util-bar .util-bar-inner > .util-lang-wrap { box-shadow: 0 1px 0 rgb(255,255,255,0.05) inset, 0 4px 14px rgb(2,6,23,0.28) !important; } @media (width <= 768px) { html body.erp-body #landing.module-section .erp-hero::before, html body.erp-body #landing.module-section .erp-hero::after { content: none !important; display: none !important; filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html body.erp-body #landing.module-section .erp-hero-trust-strip, html body.erp-body #landing.module-section .erp-hero .erp-hero-stats, html body.erp-body #landing.module-section .erp-hero .erp-hero-stat, html body.erp-body #landing.module-section .erp-hero .trust-item, html body.erp-body #landing.module-section .erp-fcard, html body.erp-body #landing.module-section .erp-module-card-grid .unit-card { filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html body.erp-body #landing.module-section .erp-hero-trust-strip { background: rgb(15,23,42,0.88) !important; } html body.erp-body #landing.module-section .erp-hero .erp-hero-stat-divider { display: none !important; } } @media (width <= 1280px) { /* ── Scrolling fix: make .main-content the scroll container on mobile/tablet ── The 1280px shell sets html/body to overflow:hidden + 100vh, and .erp-content-scroll to overflow:visible in landing mode. So we must give .main-content overflow-y:auto to be the actual scroll container. */ html[data-active-module="landing"] body.erp-body .erp-container > .main-content { overflow: hidden auto !important; -webkit-overflow-scrolling: touch !important; height: 100% !important; max-height: 100% !important; padding-bottom: 0 !important; } html[data-active-module="landing"] body.erp-body .erp-content-scroll { overflow: visible !important; height: auto !important; max-height: none !important; flex: none !important; } html[data-active-module="landing"] body.erp-body #landing.module-section { position: relative !important; z-index: 1 !important; display: block !important; min-height: 0 !important; height: auto !important; overflow: visible !important; padding-bottom: 2rem !important; margin-bottom: 0 !important; } /* ── Hero section: stack content column, hero-visual HIDDEN ── */ html[data-active-module="landing"] body.erp-body #landing.module-section .erp-hero { position: relative !important; height: auto !important; min-height: 0 !important; overflow: visible !important; } html[data-active-module="landing"] body.erp-body #landing.module-section .erp-hero .erp-hero-inner { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 1rem !important; width: 100% !important; height: auto !important; min-height: 0 !important; overflow: visible !important; text-align: left !important; } /* Hero content comes first (it is first in DOM), hero-visual is hidden */ html[data-active-module="landing"] body.erp-body #landing.module-section .erp-hero .erp-hero-content { order: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding-bottom: 0.6rem !important; text-align: left !important; } html[data-active-module="landing"] body.erp-body #landing.module-section .erp-hero .erp-hero-eyebrow { align-self: flex-start !important; margin-bottom: 0.65rem !important; max-width: -moz-max-content !important; max-width: max-content !important; } html[data-active-module="landing"] body.erp-body #landing.module-section .erp-hero .erp-hero-title { margin: 0 0 0.65rem !important; text-align: left !important; } html[data-active-module="landing"] body.erp-body #landing.module-section .erp-hero .erp-hero-subtitle { margin: 0 0 1rem !important; text-align: left !important; } /* HIDE the floating KPI-card panel entirely on mobile */ html[data-active-module="landing"] body.erp-body #landing.module-section .erp-hero .erp-hero-visual, html[data-active-module="landing"] body.erp-body #landing.module-section .erp-hero .erp-hero-inner > .erp-hero-visual { display: none !important; visibility: hidden !important; height: 0 !important; width: 0 !important; overflow: hidden !important; position: absolute !important; pointer-events: none !important; } /* Trust / stat strip: reset absolute positioning from desktop rules */ html[data-active-module="landing"] body.erp-body #landing.module-section .erp-hero .erp-hero-stats, html[data-active-module="landing"] body.erp-body #landing.module-section .erp-hero .erp-hero-trust-strip { position: static !important; inset: auto !important; width: 100% !important; max-width: 100% !important; display: flex !important; flex-wrap: wrap !important; gap: 0.75rem !important; margin: 1.5rem 0 0 !important; padding: 1rem !important; box-sizing: border-box !important; transform: none !important; } /* ── Featured platform cards: two columns on tablet ── */ html[data-active-module="landing"] body.erp-body #landing.module-section .erp-featured-row, html[data-active-module="landing"] body.erp-body #landing.module-section #modules-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1rem !important; width: 100% !important; max-width: 100% !important; padding: 0 0.75rem !important; box-sizing: border-box !important; } html[data-active-module="landing"] body.erp-body #landing.module-section .erp-featured-row .erp-fcard, html[data-active-module="landing"] body.erp-body #landing.module-section #modules-grid .erp-fcard { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } /* ── Unit module card grid: three columns on tablet (21 cards = 7 rows) ── */ html[data-active-module="landing"] body.erp-body #landing.module-section .erp-module-card-grid, html[data-active-module="landing"] body.erp-body #landing.module-section .unit-gateway-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0.75rem !important; width: 100% !important; max-width: 100% !important; padding: 0 0.75rem 1rem !important; margin-bottom: 0 !important; box-sizing: border-box !important; } html[data-active-module="landing"] body.erp-body #landing.module-section .erp-module-card-grid .unit-card { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } /* ── Next steps strip ── */ html[data-active-module="landing"] body.erp-body #landing.module-section .next-steps-strip { position: relative !important; width: 100% !important; box-sizing: border-box !important; } /* ── Actions band ── */ html[data-active-module="landing"] body.erp-body .erp-actions-band { position: relative !important; z-index: 1 !important; clear: both !important; width: 100% !important; margin: 1rem 0 0 !important; box-sizing: border-box !important; } /* ── Footer: normal flow, always last ── */ html[data-active-module="landing"] body.erp-body .footer { position: relative !important; z-index: 1 !important; clear: both !important; display: block !important; width: 100% !important; margin-top: 1.5rem !important; overflow: visible !important; box-sizing: border-box !important; } html[data-active-module="landing"] body.erp-body .footer .footer-brand-bar { flex-direction: column !important; justify-content: center !important; align-items: center !important; text-align: center !important; padding: 1.4rem 1rem !important; gap: 1rem !important; } html[data-active-module="landing"] body.erp-body .footer .footer-brand-bar .brand-identity { justify-content: center !important; flex-wrap: wrap !important; min-width: 0 !important; max-width: 100% !important; } html[data-active-module="landing"] body.erp-body .footer .footer-content { display: grid !important; grid-template-columns: 1fr !important; width: 100% !important; gap: 1.5rem !important; padding: 1.5rem 1.1rem !important; box-sizing: border-box !important; } html[data-active-module="landing"] body.erp-body .footer .footer-section, html[data-active-module="landing"] body.erp-body .footer .footer-offices, html[data-active-module="landing"] body.erp-body .footer .footer-office-card { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } html[data-active-module="landing"] body.erp-body .footer .footer-section p, html[data-active-module="landing"] body.erp-body .footer .footer-section a, html[data-active-module="landing"] body.erp-body .footer .footer-section .footer-desc, html[data-active-module="landing"] body.erp-body .footer .footer-office-card .office-city, html[data-active-module="landing"] body.erp-body .footer .footer-office-card .office-phone { max-width: 100% !important; overflow-wrap: anywhere !important; } html[data-active-module="landing"] body.erp-body .footer .footer-bottom { flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 1rem !important; padding: 1.1rem !important; text-align: center !important; } /* ── Mobile-only: hide AI & Analytics unit card ── Card has been removed from the DOM — rule kept as safety fallback. */ } /* Extend hide to narrow-tablet range — no longer needed, card removed */ /* ---- security panel styling (orange Elinom accent) ------------------ */ #elinomSecurityModal { position: fixed; inset: 0; background: rgb(15,23,42,.55); display: none; align-items: center; justify-content: center; z-index: 100050; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } #elinomSecurityModal.visible { display: flex; } #elinomSecurityModal .esec-card { background: #fff; border-radius: 14px; width: min(880px, 96vw); max-height: 92vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgb(15,23,42,.35); font-family: 'Segoe UI',-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif; } #elinomSecurityModal .esec-head { background: linear-gradient(135deg,#f97316 0%,#ea580c 100%); color: #fff; padding: 16px 22px; display: flex; align-items: center; justify-content: space-between; } #elinomSecurityModal .esec-head h3 { margin: 0; font-size: 18px; font-weight: 700; } #elinomSecurityModal .esec-head .esec-close { background: rgb(255,255,255,.2); border: 0; color: #fff; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 18px; line-height: 1; } #elinomSecurityModal .esec-head .esec-close:hover { background: rgb(255,255,255,.32); } #elinomSecurityModal .esec-tabs { display: flex; gap: 0; border-bottom: 1px solid #e5e7eb; background: #f9fafb; overflow-x: auto; } #elinomSecurityModal .esec-tab { padding: 12px 18px; cursor: pointer; font-size: 14px; font-weight: 600; color: #6b7280; border-bottom: 3px solid transparent; white-space: nowrap; } #elinomSecurityModal .esec-tab.active { color: #ea580c; border-bottom-color: #f97316; background:#fff; } #elinomSecurityModal .esec-tab:hover { color: #111827; } #elinomSecurityModal .esec-body { padding: 22px; overflow-y: auto; flex: 1; } #elinomSecurityModal .esec-pane { display: none; } #elinomSecurityModal .esec-pane.active { display: block; } #elinomSecurityModal h4 { margin: 0 0 8px; font-size: 16px; color: #111827; } #elinomSecurityModal p.esec-muted { color: #6b7280; font-size: 13px; margin: 0 0 14px; line-height: 1.55; } #elinomSecurityModal .esec-btn { background: linear-gradient(135deg,#f97316,#ea580c); color: #fff; border: 0; padding: 9px 16px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 13px; } #elinomSecurityModal .esec-btn[disabled] { opacity:.55; cursor: not-allowed; } #elinomSecurityModal .esec-btn.secondary { background: #f3f4f6; color: #111827; } #elinomSecurityModal .esec-btn.danger { background: linear-gradient(135deg,#ef4444,#b91c1c); } #elinomSecurityModal .esec-btn.tiny { padding: 5px 10px; font-size: 12px; } #elinomSecurityModal table.esec-tbl { width: 100%; border-collapse: collapse; font-size: 13px; } #elinomSecurityModal table.esec-tbl th, #elinomSecurityModal table.esec-tbl td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #f1f5f9; vertical-align: top; } #elinomSecurityModal table.esec-tbl th { background: #f9fafb; font-weight: 600; color: #374151; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; } #elinomSecurityModal .esec-pill { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 600; } #elinomSecurityModal .esec-pill.ok { background:#dcfce7; color:#166534; } #elinomSecurityModal .esec-pill.warn { background:#fef3c7; color:#92400e; } #elinomSecurityModal .esec-pill.bad { background:#fee2e2; color:#991b1b; } #elinomSecurityModal .esec-pill.cur { background:#fed7aa; color:#9a3412; } #elinomSecurityModal input.esec-input { width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; font-family: inherit; box-sizing: border-box; } #elinomSecurityModal input.esec-input:focus { outline: 2px solid #fdba74; border-color:#f97316; } #elinomSecurityModal .esec-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (width <= 640px) { #elinomSecurityModal .esec-grid2 { grid-template-columns: 1fr; } } #elinomSecurityModal .esec-recovery-list { background: #fef3c7; padding: 14px 18px; border-radius: 10px; margin: 12px 0; font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 1.9; color: #92400e; word-break: break-all; } /* TOTP-during-login micro-modal --------------------------------------- */ #elinomTotpPrompt { position: fixed; inset: 0; background: rgb(15,23,42,.6); display: none; align-items: center; justify-content: center; z-index: 100060; } #elinomTotpPrompt.visible { display: flex; } #elinomTotpPrompt .etp-card { background:#fff; border-radius: 14px; width: min(420px,94vw); padding: 26px; font-family: 'Segoe UI',-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif; box-shadow: 0 20px 60px rgb(15,23,42,.4); text-align: center; } #elinomTotpPrompt h3 { margin: 0 0 8px; color:#111827; font-size: 19px; } #elinomTotpPrompt p { margin: 0 0 16px; color:#6b7280; font-size: 13px; } #elinomTotpPrompt input { width: 100%; padding: 14px 16px; font-size: 22px; letter-spacing: 8px; text-align: center; border: 2px solid #d1d5db; border-radius: 10px; font-family: Consolas,'Courier New',monospace; box-sizing: border-box; } #elinomTotpPrompt input:focus { outline: none; border-color: #f97316; } #elinomTotpPrompt .etp-actions { display: flex; gap: 10px; margin-top: 16px; } #elinomTotpPrompt .etp-actions button { flex: 1; padding: 11px; border-radius: 9px; font-weight: 600; cursor: pointer; border: 0; font-size: 14px; } #elinomTotpPrompt .etp-submit { background: linear-gradient(135deg,#f97316,#ea580c); color:#fff; } #elinomTotpPrompt .etp-cancel { background:#f3f4f6; color:#111827; } #elinomTotpPrompt .etp-error { color:#dc2626; font-size: 13px; min-height: 18px; margin-top: 8px; } /* ── Performance: pause all indefinite animations when the tab is hidden ── */ html.erp-tab-hidden * { animation-play-state: paused !important; } /* ── Performance: pause infinite animations after the user is idle ────────── Set by erp-shell-main.js after ~4s of no interaction (pointer/key/scroll/ touch/focus). Reset on the next interaction. Only affects CSS animations: transitions, hover, focus, layout, and JS continue to work normally. */ html.erp-idle-paint * { animation-play-state: paused !important; } html.erp-idle-paint .erp-logo-gradient-text, html.erp-idle-paint .hero-kpi-card { will-change: auto; } .erp-perf-paused, .erp-perf-paused::before, .erp-perf-paused::after, .erp-perf-paused *, .erp-perf-paused *::before, .erp-perf-paused *::after { animation-play-state: paused !important; } .erp-logo-gradient-text.erp-perf-paused { will-change: auto; } /* ── Performance: respect OS-level reduce-motion preference ─────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ── Performance: GPU-layer hint for the gradient-text logo animation ────── */ .erp-logo-gradient-text { will-change: background-position; } html.erp-tab-hidden .erp-logo-gradient-text { will-change: auto; } /* ── Mobile paint budget: simplify above-the-fold glass/animation effects ── */ @media (width <= 768px) { html body.erp-body #navbar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: 0 1px 0 rgb(148,163,184,0.1), 0 10px 24px rgb(2,6,23,0.16) !important; } html body.erp-body #landing.module-section .erp-hero { box-shadow: 0 14px 34px rgb(6,13,31,0.42), 0 0 0 1px rgb(255,255,255,0.03) inset !important; } html body.erp-body #landing.module-section .hero-kpi-card, html body.erp-body #landing.module-section .erp-command-center.erp-command-center--fullwidth, #chatWindow { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html body.erp-body #landing.module-section .hero-kpi-card, html body.erp-body #landing.module-section .erp-command-center.erp-command-center--fullwidth { box-shadow: 0 10px 22px rgb(2,6,23,0.24), inset 0 1px 0 rgb(255,255,255,0.04) !important; } #chatToggleBtn { animation: none !important; box-shadow: 0 14px 28px -10px rgb(79,70,229,.45), 0 4px 10px -4px rgb(15,23,42,.38), inset 0 1px 0 rgb(255,255,255,.28), inset 0 -6px 14px rgb(15,23,42,.22) !important; } #chatToggleBtn::before, #chatToggleBtn::after, #chatToggleBtn .erp-chat-icon, #chatToggleBtn .erp-chat-icon .dot, html body.erp-body #landing.module-section .erp-command-center.erp-command-center--fullwidth::before, html body.erp-body #landing.module-section .erp-command-center.erp-command-center--fullwidth::after, html body.erp-body #landing.module-section .erp-command-center.erp-command-center--fullwidth .erp-command-head em, html body.erp-body #landing.module-section .erp-command-center.erp-command-center--fullwidth .erp-command-head em::before, html body.erp-body #landing.module-section .erp-command-center.erp-command-center--fullwidth .erp-command-flow span, html body.erp-body #landing.module-section .feed-pulse, html body.erp-body #navbar .nav-menu > li > a.marketplace-btn, .erp-logo-gradient-text { animation: none !important; } .erp-logo-gradient-text { will-change: auto; background-size: 100% 100% !important; } html body.erp-body #landing.module-section .erp-featured-row .erp-fcard, html body.erp-body #landing.module-section .erp-module-card-grid .unit-card { animation: none !important; box-shadow: 0 8px 18px rgb(15,23,42,0.10), inset 0 1px 0 rgb(255,255,255,0.88) !important; transition: transform 0.14s ease, border-color 0.14s ease !important; } html body.erp-body #landing.module-section .erp-featured-row .erp-fcard::after, html body.erp-body #landing.module-section .erp-module-card-grid .unit-card::after { display: none !important; } } html body.erp-body #landing.module-section .erp-featured-row .erp-fcard, html body.erp-body #landing.module-section .erp-module-card-grid .unit-card { contain: none; } html body.erp-body #landing.module-section.active .erp-fcard, html body.erp-body #landing.module-section.active .erp-module-card-grid .unit-card { transition-property: transform, border-color !important; } html body.erp-body #landing.module-section.active .erp-fcard-icon, html body.erp-body #landing.module-section.active .erp-module-card-grid .unit-icon-wrapper { transition-property: transform !important; } @supports (content-visibility: auto) { html[data-active-module="landing"] body.erp-body .erp-actions-band, html[data-active-module="landing"] body.erp-body .footer { content-visibility: visible; contain-intrinsic-size: auto; } } /* ── Performance: flatten always-on landing hero effects ──────────────── */ html body.erp-body #landing.module-section.active .hero-kpi-badge::before, html body.erp-body #landing.module-section.active .hero-kpi-spark::after, html body.erp-body #landing.module-section.active .hero-kpi-spark span, html body.erp-body #landing.module-section.active .hero-kpi-activity span, html body.erp-body #landing.module-section.active .hero-kpi-meter span, html body.erp-body #landing.module-section.active .erp-fcard::before, html body.erp-body #landing.module-section.active .erp-module-card-grid .unit-card::before, html body.erp-body #landing.module-section.active .erp-command-center.erp-command-center--fullwidth::before, html body.erp-body #landing.module-section.active .erp-command-center.erp-command-center--fullwidth::after, html body.erp-body #landing.module-section.active .erp-command-center.erp-command-center--fullwidth .erp-command-head em, html body.erp-body #landing.module-section.active .erp-command-center.erp-command-center--fullwidth .erp-command-head em::before, html body.erp-body #landing.module-section.active .erp-command-center.erp-command-center--fullwidth .erp-command-flow span, html body.erp-body #landing.module-section.active .erp-command-center.erp-command-center--fullwidth .feed-pulse, html body.erp-body #navbar .nav-actions-group .us-trigger::before, html body.erp-body #navbar .nav-actions-group .us-trigger::after, html body.erp-body #navbar .nav-actions-group .us-trigger > svg, html body.erp-body #navbar .nav-actions-group .us-trigger > i, html body.erp-body #navbar .nav-actions-group .us-trigger > .us-trigger-icon, html body.erp-body #util-bar #navNotifBell.nav-bell--unread:has(.nav-bell-badge:not(.nav-bell-badge-hidden)) i, html body.erp-body #util-bar #navNotifBell.nav-bell--critical:has(.nav-bell-badge:not(.nav-bell-badge-hidden)) i { animation: none !important; } html body.erp-body #landing.module-section.active .hero-kpi-card, html body.erp-body #landing.module-section.active .erp-command-center.erp-command-center--fullwidth, html body.erp-body #navbar .nav-actions-group .us-trigger { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html body.erp-body #landing.module-section.active .hero-kpi-badge::before, html body.erp-body #landing.module-section.active .hero-kpi-activity span, html body.erp-body #landing.module-section.active .erp-command-center.erp-command-center--fullwidth .erp-command-head em, html body.erp-body #landing.module-section.active .erp-command-center.erp-command-center--fullwidth .erp-command-head em::before, html body.erp-body #navbar .nav-actions-group .us-trigger::after, html body.erp-body #navbar .nav-actions-group .us-trigger > svg, html body.erp-body #navbar .nav-actions-group .us-trigger > i, html body.erp-body #navbar .nav-actions-group .us-trigger > .us-trigger-icon, html body.erp-body #util-bar #navNotifBell.nav-bell--unread:has(.nav-bell-badge:not(.nav-bell-badge-hidden)) i, html body.erp-body #util-bar #navNotifBell.nav-bell--critical:has(.nav-bell-badge:not(.nav-bell-badge-hidden)) i { box-shadow: none !important; filter: none !important; } html body.erp-body #landing.module-section.active .hero-kpi-spark::after, html body.erp-body #landing.module-section.active .erp-command-center.erp-command-center--fullwidth::after, html body.erp-body #navbar .nav-actions-group .us-trigger::before { opacity: 0 !important; } html body.erp-body #landing.module-section.active .erp-fcard::before, html body.erp-body #landing.module-section.active .erp-module-card-grid .unit-card::before { background-position: 50% 0 !important; } html body.erp-body #landing.module-section.active .erp-command-center.erp-command-center--fullwidth::before { filter: none !important; opacity: 0.28 !important; } /* ── Mobile / tablet touch scroll hardening (app shell + iframed modules) ── */ @media (width <= 1280px) { body.erp-body .erp-content-scroll { overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior-y: contain; touch-action: pan-y; } html[data-active-shell-mode="app"] body.erp-body .erp-content-scroll, html[data-active-module]:not([data-active-module="landing"]) body.erp-body .erp-content-scroll { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; } body.erp-body .module-section.active iframe { touch-action: pan-y pinch-zoom; } } /* ── Landing grid hardening (desktop only) ─────────────────────────────── dashboard.css gives .erp-content-scroll { flex:1 } and module iframes min-height:85vh; combined with #modules-grid releasing landing-lock that produced the blank white panel below the last unit-card row. Scoped to desktop: the same overflow:visible + height:auto rules break the <=1280px flex scroll shell and lock mobile pages (no scroll). */ @media (width >= 1281px) { html[data-active-module="landing"] body.erp-body .erp-container > .main-content { display: block !important; flex: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } html[data-active-module="landing"] body.erp-body .erp-content-scroll { display: block !important; flex: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } html[data-active-module="landing"] body.erp-body #landing.module-section { flex: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; } } html[data-active-module="landing"] body.erp-body .module-section:not(#landing), html[data-active-module="landing"] body.erp-body .erp-content-scroll > .module-section:not(#landing) { display: none !important; visibility: hidden !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; pointer-events: none !important; } html[data-active-module="landing"] body.erp-body .module-section:not(#landing) iframe, html[data-active-module="landing"] body.erp-body .module-section:not(#landing) .module-loader { display: none !important; visibility: hidden !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; opacity: 0 !important; pointer-events: none !important; } html[data-active-module="landing"] body.erp-body #landing .erp-featured-row, html[data-active-module="landing"] body.erp-body #landing #modules-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-auto-rows: min-content !important; align-items: start !important; } html[data-active-module="landing"] body.erp-body #landing .unit-gateway-grid, html[data-active-module="landing"] body.erp-body #landing .erp-module-card-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-rows: min-content !important; align-items: start !important; align-content: start !important; } html[data-active-module="landing"] body.erp-body #landing .unit-gateway-grid .unit-card, html[data-active-module="landing"] body.erp-body #landing .erp-module-card-grid .unit-card { align-self: start !important; height: auto !important; min-height: 236px !important; max-height: none !important; contain: none !important; content-visibility: visible !important; } /* ── Desktop landing (>1280px): scroll + module grid hardening ─────────── The tablet landing block above lives inside @media (width <= 1280px), so wide screens never received those fixes. Dormant module iframes (85vh, white, rounded) and stretched grid rows were showing as a blank panel below the last unit-card row when scrolling to #modules-grid. */ @media (width >= 1281px) { html[data-active-module="landing"] body.erp-body .erp-container > .main-content { display: block !important; flex: 1 1 auto !important; min-width: 0 !important; min-height: 0 !important; max-height: calc(100vh - var(--erp-shell-navbar-offset, var(--navbar-height))) !important; overflow: hidden auto !important; box-sizing: border-box !important; } html[data-active-module="landing"] body.erp-body .erp-content-scroll { display: block !important; flex: none !important; min-height: 0 !important; height: auto !important; max-height: none !important; overflow: visible !important; } html[data-active-module="landing"] body.erp-body #landing.module-section { display: block !important; flex: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } html[data-active-module="landing"] body.erp-body .module-section:not(#landing), html[data-active-module="landing"] body.erp-body .erp-content-scroll > .module-section:not(#landing) { display: none !important; visibility: hidden !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; pointer-events: none !important; } html[data-active-module="landing"] body.erp-body .module-section:not(#landing) iframe, html[data-active-module="landing"] body.erp-body .module-section:not(#landing) .module-loader, html[data-active-module="landing"] body.erp-body .erp-content-scroll > .module-section:not(#landing) iframe, html[data-active-module="landing"] body.erp-body .erp-content-scroll > .module-section:not(#landing) .module-loader { display: none !important; visibility: hidden !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; opacity: 0 !important; pointer-events: none !important; } html[data-active-module="landing"] body.erp-body #landing .erp-featured-row, html[data-active-module="landing"] body.erp-body #landing #modules-grid, html[data-active-module="landing"] body.erp-body #landing .unit-gateway-grid, html[data-active-module="landing"] body.erp-body #landing .erp-module-card-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-rows: min-content !important; align-items: start !important; align-content: start !important; flex: none !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } html[data-active-module="landing"] body.erp-body #landing #modules-grid, html[data-active-module="landing"] body.erp-body #landing .erp-featured-row { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } html[data-active-module="landing"] body.erp-body #landing .erp-fcard, html[data-active-module="landing"] body.erp-body #landing .erp-module-card-grid .unit-card, html[data-active-module="landing"] body.erp-body #landing .unit-gateway-grid .unit-card { align-self: start !important; height: auto !important; min-height: 236px !important; max-height: none !important; content-visibility: visible !important; contain: none !important; } html[data-active-module="landing"] body.erp-body .erp-actions-band, html[data-active-module="landing"] body.erp-body .footer { flex: none !important; height: auto !important; min-height: 0 !important; content-visibility: visible !important; contain-intrinsic-size: auto !important; } } /* Final fixing agent — keep shell auth controls above decorative overlays */ body.erp-body #loginBtn, body.erp-body #erpAppSwitcher, body.erp-body #util-bar .nav-auth-buttons a, body.erp-body #util-bar .nav-auth-buttons button { pointer-events: auto !important; position: relative; z-index: 100002; } /* ── Mobile / tablet scroll + drawer final override (<=1280px) ───────────── Must load after landing hardening blocks so flex scroll shell wins. */ @media (width <= 1280px) { html.erp-sidebar-visible, html.erp-sidebar-visible body.erp-body, html.erp-shell-expanded, html.erp-shell-expanded body.erp-body, html.erp-mobile-drawer-open, html.erp-mobile-drawer-open body.erp-body { width: 100% !important; min-width: 0 !important; max-width: 100vw !important; } html.erp-sidebar-visible body.erp-body .erp-container, html.erp-shell-expanded body.erp-body .erp-container, html.erp-mobile-drawer-open body.erp-body .erp-container { width: 100% !important; max-width: 100% !important; flex-direction: column !important; } html[data-active-module="landing"] body.erp-body .erp-container { flex: 1 1 auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; height: auto !important; max-height: 100% !important; } html[data-active-module="landing"] body.erp-body .erp-container > .main-content { flex: 1 1 auto !important; min-height: 0 !important; max-height: 100% !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; margin-left: 0 !important; width: 100% !important; height: auto !important; } html[data-active-module="landing"] body.erp-body .erp-content-scroll { flex: 1 1 auto !important; min-height: 0 !important; max-height: 100% !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior-y: contain; touch-action: pan-y; height: auto !important; display: flex !important; flex-direction: column !important; } html.erp-sidebar-visible body.erp-body .erp-container > .main-content, html.erp-shell-expanded body.erp-body .erp-container > .main-content { margin-left: 0 !important; width: 100% !important; max-width: 100% !important; } html.erp-sidebar-visible body.erp-body .erp-container > .sidebar, html.erp-shell-expanded body.erp-body .erp-container > .sidebar.mobile-open, body.erp-body .erp-container > .sidebar.mobile-open { position: fixed !important; left: 0 !important; top: 0 !important; flex: none !important; height: 100vh !important; width: min(280px, 80vw) !important; min-width: min(280px, 80vw) !important; max-width: 80vw !important; z-index: 10050 !important; background: var(--erp-sidebar-bg, #10213a) !important; box-shadow: 8px 0 32px rgb(2, 6, 23, 0.55) !important; } html.erp-sidebar-visible body.erp-body .erp-container > .sidebar:not(.mobile-open), html.erp-shell-expanded body.erp-body .erp-container > .sidebar:not(.mobile-open) { left: -320px !important; } html.erp-mobile-drawer-open body.erp-body .module-section.active iframe, html.erp-sidebar-visible:not([data-active-module="landing"]) body.erp-body .module-section.active iframe { pointer-events: none !important; } html.erp-mobile-drawer-open body.erp-body .erp-container > .main-content, html.erp-sidebar-visible:not([data-active-module="landing"]) body.erp-body .erp-container > .main-content { overflow: hidden !important; } #erpSidebarOverlay, #erpShellMobileOverlay, body.erp-body .sidebar-overlay { z-index: 10040 !important; } }