/* ============================================================ Restart AI – Admin + Client Login — Two-Column Console Layout Version: 4.0.0 Targets real PerfexCRM 3.4 HTML (Tailwind-based admin login + classic Bootstrap client portal login). ============================================================ */ /* Flash-of-old-layout prevention: added to immediately by head script, removed by JS after transformation is complete. */ html.udt-pre-init body { opacity: 0 !important; } /* ── Split layout base ── */ body.udt-split-login { display: flex !important; flex-direction: row !important; min-height: 100vh !important; padding: 0 !important; margin: 0 !important; overflow-x: hidden !important; background: #000000 !important; } body.udt-split-login::before { display: none !important; } /* Hide navbar, header and footer on both login pages */ body.udt-split-login #header, body.udt-split-login #headermenu, body.udt-split-login .navbar, body.udt-split-login .navbar-default, body.udt-split-login footer.footer, body.udt-split-login .footer { display: none !important; } /* ── Left branding panel ── */ #udt-login-left { width: 50%; min-height: 100vh; background: #0e0e0e; border-right: 1px solid rgba(255,255,255,.06); display: flex; flex-direction: column; padding: 48px 52px; box-sizing: border-box; flex-shrink: 0; } .udt-login-brand { display: flex; align-items: center; gap: 10px; } .udt-login-logo-dot { width: 28px; height: 28px; border-radius: 8px; background: var(--primary-color, #12d18c); display: inline-block; flex-shrink: 0; } .udt-login-logo-text { font-size: 18px; font-weight: 700; color: #fff; font-family: 'Inter', -apple-system, sans-serif; letter-spacing: -.3px; } .udt-login-hero { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 64px 0 48px; } .udt-login-headline { font-size: 36px !important; font-weight: 800 !important; line-height: 1.18 !important; color: #fff !important; margin: 0 0 20px !important; padding: 0 !important; letter-spacing: -.5px !important; font-family: 'Inter', -apple-system, sans-serif !important; border: none !important; box-shadow: none !important; background: none !important; text-align: left !important; } .udt-login-desc { font-size: 15px !important; color: rgba(229,232,241,.6) !important; line-height: 1.65 !important; max-width: 380px !important; margin: 0 !important; padding: 0 !important; font-family: 'Inter', -apple-system, sans-serif !important; } .udt-login-footer-copy { font-size: 12px; color: rgba(229,232,241,.35); font-family: 'Inter', -apple-system, sans-serif; } /* ── Right panel (.udt-login-right added by JS to the correct element) ── */ body.udt-split-login .udt-login-right { width: 50% !important; min-height: 100vh !important; background: #060606 !important; /* grid + place-items:center is the most reliable centering — works regardless of how many children Tailwind/Bootstrap add around the form card. */ display: grid !important; place-items: center !important; position: relative !important; box-sizing: border-box !important; /* Clear Tailwind size/position constraints */ max-width: none !important; margin: 0 !important; padding: 0 !important; z-index: 1 !important; flex-shrink: 0 !important; } /* Client portal: #content is a grid item — make it full-width so its flex children centre correctly inside it. */ body.udt-split-login .udt-login-right #content { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 0 !important; } /* ── Inner form content box (.udt-form-content added by JS) ── */ body.udt-split-login .udt-form-content { width: 100% !important; max-width: 520px !important; padding: 40px 44px !important; box-sizing: border-box !important; /* auto margins in a flex column distribute free space equally top+bottom → true vertical center */ margin: auto !important; /* Clear Tailwind card and Bootstrap mtop styles */ background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; } /* Clear Bootstrap grid inside the form content */ body.udt-split-login .udt-login-right .container, body.udt-split-login .udt-login-right .container-fluid { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } body.udt-split-login .udt-login-right .row { margin-left: 0 !important; margin-right: 0 !important; } body.udt-split-login .udt-login-right [class*="col-"] { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; padding-left: 0 !important; padding-right: 0 !important; float: none !important; } /* Clear Tailwind spacing on admin form-group */ body.udt-split-login .form-group[class*="tw-mt-"] { margin-top: 0 !important; } body.udt-split-login .tw-mt-6 { margin-top: 24px !important; } /* Client: clear .panel_s card */ body.udt-split-login .panel_s, body.udt-split-login .panel_s .panel-body { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; } /* Legacy admin (pre-3.4): clear .panel card */ body.udt-split-login .panel, body.udt-split-login .panel-default, body.udt-split-login .authentication-form, body.udt-split-login .panel-body, body.udt-split-login .panel-heading { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; } body.udt-split-login .panel-heading { display: none !important; } /* ── Back to site link ── */ #udt-login-back { position: absolute; top: 28px; right: 32px; font-size: 13px; color: var(--primary-color, #12d18c) !important; text-decoration: none !important; display: flex; align-items: center; gap: 4px; opacity: .8; transition: opacity .15s; font-family: 'Inter', -apple-system, sans-serif; z-index: 10; } #udt-login-back:hover { opacity: 1 !important; } /* ── Console Login heading / subtitle ── */ #udt-login-title { font-size: 26px !important; font-weight: 700 !important; color: #fff !important; margin: 0 0 6px !important; padding: 0 !important; letter-spacing: -.3px !important; font-family: 'Inter', -apple-system, sans-serif !important; border: none !important; background: none !important; display: block !important; text-align: left !important; } #udt-login-subtitle { font-size: 14px !important; color: var(--muted-color, #8a93ad) !important; margin: 0 0 28px !important; padding: 0 !important; font-family: 'Inter', -apple-system, sans-serif !important; text-align: left !important; background: none !important; display: block !important; } /* ── Form groups ── */ body.udt-split-login .form-group { margin-bottom: 18px !important; } /* ── Labels ── */ body.udt-split-login label { color: var(--primary-color, #12d18c) !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .6px !important; margin-bottom: 7px !important; display: block !important; } /* Labels inside the Tailwind flex span (password row on admin login) */ body.udt-split-login .tw-inline-flex > label, body.udt-split-login .tw-justify-between > label { display: inline !important; margin: 0 !important; } /* ── Inputs ── */ body.udt-split-login input[type="text"], body.udt-split-login input[type="password"], body.udt-split-login input[type="email"] { background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.1) !important; color: var(--text-color, #e5e8f1) !important; border-radius: var(--radius, 10px) !important; height: 46px !important; font-size: 14px !important; padding: 0 14px !important; box-shadow: none !important; transition: border-color .2s, box-shadow .2s !important; width: 100% !important; box-sizing: border-box !important; font-family: 'Inter', -apple-system, sans-serif !important; } body.udt-split-login input[type="text"]:focus, body.udt-split-login input[type="password"]:focus, body.udt-split-login input[type="email"]:focus { border-color: var(--primary-color, #12d18c) !important; box-shadow: 0 0 0 3px rgba(18,209,140,.15) !important; outline: none !important; background: rgba(255,255,255,.07) !important; } body.udt-split-login input::placeholder { color: rgba(229,232,241,.3) !important; } /* ── Login button ── */ body.udt-split-login .btn-primary, body.udt-split-login input[type="submit"], body.udt-split-login button[type="submit"] { background: var(--primary-color, #12d18c) !important; border-color: transparent !important; color: #03150e !important; font-weight: 700 !important; border-radius: var(--radius, 10px) !important; height: 46px !important; font-size: 15px !important; letter-spacing: .2px !important; width: 100% !important; transition: background .2s !important; font-family: 'Inter', -apple-system, sans-serif !important; padding: 0 !important; } body.udt-split-login .btn-primary:hover, body.udt-split-login input[type="submit"]:hover, body.udt-split-login button[type="submit"]:hover { background: #0fb87a !important; } /* ── Links (forgot password etc.) ── */ body.udt-split-login .text-center a, body.udt-split-login .tw-text-center a, body.udt-split-login .panel-body a, body.udt-split-login .udt-form-content a, body.udt-split-login .text-muted { color: var(--muted-color, #8a93ad) !important; font-size: 13px !important; } body.udt-split-login .text-center a:hover, body.udt-split-login .tw-text-center a:hover, body.udt-split-login .udt-form-content a:hover { color: var(--primary-color, #12d18c) !important; } /* ── Checkbox ── */ body.udt-split-login .checkbox label, body.udt-split-login .checkbox-inline label { color: var(--text-color, #e5e8f1) !important; text-transform: none !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: 0 !important; display: inline !important; margin: 0 0 0 6px !important; } /* ── Hide PerfexCRM company-logo / welcome-text elements inside the right panel ── */ body.udt-split-login .company-logo, body.udt-split-login .welcome-text { display: none !important; } /* Style the native PerfexCRM forgot-password / reset heading to match our title style */ body.udt-split-login .udt-form-content h1, body.udt-split-login .udt-form-content h2, body.udt-split-login .udt-form-content h3 { font-size: 26px !important; font-weight: 700 !important; color: #fff !important; margin: 0 0 24px !important; padding: 0 !important; letter-spacing: -.3px !important; font-family: 'Inter', -apple-system, sans-serif !important; border: none !important; background: none !important; text-align: left !important; } /* ── Misc cleanup ── */ body.udt-split-login hr { display: none !important; } /* ── Scrollbars ── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.22); } /* ── Responsive: stack on small screens ── */ @media (max-width: 900px) { body.udt-split-login { flex-direction: column !important; } #udt-login-left { width: 100% !important; min-height: auto !important; padding: 32px 28px !important; } .udt-login-hero { padding: 32px 0 24px !important; } .udt-login-headline { font-size: 26px !important; } body.udt-split-login .udt-login-right { width: 100% !important; min-height: auto !important; } body.udt-split-login .udt-form-content { padding: 32px 24px !important; } #udt-login-back { top: 16px; right: 20px; } }