/* ═══════════════════════════════════════════════════════════ Styles Juslead — Client Auth Pages Uses html.jl-auth-page (set in BEFORE body renders) so layout is correct from the very first paint. No FOUC. JS only ADDS the right panel + heading (additive approach). ═══════════════════════════════════════════════════════════ */ :root { --jl-teal-light: #34BFBF; /* primary-400 */ --jl-teal: #2D9AA6; /* primary-500 */ --jl-teal-dark: #1E557C; /* primary-800 */ --jl-blue-dark: #1E3A4F; --jl-charcoal: #1E293B; --jl-white: #FFFFFF; --jl-gray-50: #F8FAFC; --jl-gray-100: #F1F5F9; --jl-gray-200: #E2E8F0; --jl-gray-300: #CBD5E1; --jl-gray-400: #94A3B8; --jl-gray-500: #64748B; --jl-gray-600: #475569; --jl-gray-700: #334155; --jl-border: #E2E8F0; --jl-radius: 10px; --jl-radius-lg: 16px; --jl-gradient: linear-gradient(135deg, var(--jl-teal-light) 0%, var(--jl-teal-dark) 100%); } /* ═══════════════════════════════════════════ LAYOUT — Applies IMMEDIATELY (html class set in ) ═══════════════════════════════════════════ */ /* ── Hide nav/footer ── */ .jl-auth-page body nav, .jl-auth-page body .navbar, .jl-auth-page body .navbar-default, .jl-auth-page body .footer, .jl-auth-page body footer { display: none !important; } /* ── Body as flex container ── */ .jl-auth-page body { background: var(--jl-white) !important; overflow: hidden !important; height: 100vh !important; display: flex !important; flex-direction: row !important; margin: 0 !important; padding: 0 !important; } /* ── Left side: existing #wrapper becomes left panel ── */ .jl-auth-page body > #wrapper { flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important; display: flex !important; align-items: flex-start !important; justify-content: center !important; padding: 40px !important; background: var(--jl-white) !important; overflow-y: auto !important; height: 100vh !important; box-sizing: border-box !important; } .jl-auth-page body > #wrapper > #content { max-width: 440px; width: 100%; margin-top: auto; margin-bottom: auto; /* margin auto centers vertically when content fits, collapses safely when content overflows (no scroll bug) */ } /* ── Register page: wider form + two-column layout ── */ .jl-auth-page body.register > #wrapper > #content { max-width: 680px; } /* Restore Bootstrap row gutters for register two-column form */ .jl-auth-page body.register .panel-body > .row { margin-left: -15px !important; margin-right: -15px !important; } .jl-auth-page body.register .panel-body > .row > .col-md-6 { width: 50% !important; float: left !important; padding-left: 15px !important; padding-right: 15px !important; } .jl-auth-page body.register .panel-body > .row > .col-md-12 { padding-left: 15px !important; padding-right: 15px !important; } .jl-auth-page body.register > #wrapper > #content { padding-top: 24px; padding-bottom: 24px; } /* Remove .container max-width constraints */ .jl-auth-page body > #wrapper .container { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } .jl-auth-page body > #wrapper .row { margin-left: 0 !important; margin-right: 0 !important; } /* Remove Bootstrap column offsets and widths */ .jl-auth-page body > #wrapper [class*="col-md-offset"], .jl-auth-page body > #wrapper [class*="col-sm-offset"] { margin-left: 0 !important; } .jl-auth-page body > #wrapper .col-md-4, .jl-auth-page body > #wrapper .col-md-8, .jl-auth-page body > #wrapper .col-md-10, .jl-auth-page body > #wrapper .col-sm-8 { width: 100% !important; float: none !important; padding-left: 0 !important; padding-right: 0 !important; } /* col-md-6: full width on all pages EXCEPT register form columns */ .jl-auth-page body:not(.register) > #wrapper .col-md-6 { width: 100% !important; float: none !important; padding-left: 0 !important; padding-right: 0 !important; } /* Register: top-level containers (heading row, form wrapper) still full width */ .jl-auth-page body.register > #wrapper > #content > .container > .col-md-10, .jl-auth-page body.register > #wrapper > #content > .container > [class*="col-md-offset"] { width: 100% !important; float: none !important; margin-left: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* ═══════════════════════════════════════════ RIGHT PANEL — Background image + phrase (element created by JS, styles ready in CSS) ═══════════════════════════════════════════ */ .jl-auth-page body > .jl-right-panel { flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important; display: flex; align-items: flex-end; justify-content: flex-start; position: relative; overflow: hidden; height: 100vh; box-sizing: border-box; background-size: cover; background-position: center; background-repeat: no-repeat; } /* Dark gradient overlay for text readability */ .jl-right-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient( to top, rgba(30, 58, 79, 0.85) 0%, rgba(30, 58, 79, 0.4) 40%, rgba(30, 58, 79, 0.15) 100% ); z-index: 1; } /* Welcoming text content — positioned at bottom-left */ .jl-right-content { position: relative; z-index: 2; padding: 60px 48px; max-width: 520px; } .jl-right-phrase { color: var(--jl-white); font-size: 32px; font-weight: 700; line-height: 1.25; margin: 0 0 16px 0; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .jl-right-subphrase { color: rgba(255, 255, 255, 0.85); font-size: 16px; line-height: 1.6; margin: 0; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } /* ═══════════════════════════════════════════ REGISTER BUTTON — Top-right corner ═══════════════════════════════════════════ */ .jl-register-btn { position: fixed; top: 24px; right: 24px; z-index: 100; display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; background: var(--jl-white); color: var(--jl-teal-dark) !important; font-size: 14px; font-weight: 600; border-radius: 8px; border: 1.5px solid var(--jl-gray-200); text-decoration: none !important; transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .jl-register-btn:hover { background: var(--jl-gray-50); border-color: var(--jl-teal); color: var(--jl-teal) !important; text-decoration: none !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); transform: translateY(-1px); } /* ═══════════════════════════════════════════ FORM STYLING — Modernize existing forms ═══════════════════════════════════════════ */ /* ── JL custom heading (injected by JS) ── */ .jl-form-heading h1 { font-size: 24px !important; font-weight: 700 !important; color: var(--jl-charcoal) !important; margin: 0 0 8px 0 !important; text-align: left !important; } .jl-form-heading p { color: var(--jl-gray-500); font-size: 15px; margin: 0 0 24px 0; } .jl-client-logo { margin-bottom: 24px; } .jl-client-logo img { max-height: 88px; } /* ── Hide original headings ── */ .jl-auth-page body .login-heading, .jl-auth-page body .register-heading, .jl-auth-page body .forgot-password-heading { display: none !important; } /* Remove .mtop40 */ .jl-auth-page body .mtop40 { margin-top: 0 !important; } /* ── Panel card: remove border/shadow for clean look ── */ .jl-auth-page body .panel_s { border: none !important; box-shadow: none !important; background: transparent !important; margin: 0 !important; } .jl-auth-page body .panel-body { padding: 0 !important; } .jl-auth-page body .panel-footer { border: none !important; background: transparent !important; padding: 16px 0 0 0 !important; text-align: left !important; } /* ── Bootstrap Select plugin ── */ /* The wrapper div has class .form-control — reset it */ .jl-auth-page body div.bootstrap-select.form-control { height: auto !important; border: none !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; } /* Hide original select inside bootstrap-select */ .jl-auth-page body .bootstrap-select select { display: none !important; } /* Style the visible button */ .jl-auth-page body .bootstrap-select > .dropdown-toggle { height: 48px !important; border: 1.5px solid var(--jl-gray-200) !important; border-radius: var(--jl-radius) !important; padding: 12px 16px !important; font-size: 15px !important; color: var(--jl-charcoal) !important; background: var(--jl-white) !important; box-shadow: none !important; display: flex !important; align-items: center !important; } .jl-auth-page body .bootstrap-select > .dropdown-toggle:focus, .jl-auth-page body .bootstrap-select > .dropdown-toggle:active, .jl-auth-page body .bootstrap-select.open > .dropdown-toggle { border-color: var(--jl-teal) !important; box-shadow: 0 0 0 3px rgba(77, 191, 179, 0.15) !important; outline: none !important; } .jl-auth-page body .bootstrap-select .dropdown-menu { border-radius: var(--jl-radius) !important; border: 1.5px solid var(--jl-gray-200) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important; } /* Search input inside dropdown */ .jl-auth-page body .bootstrap-select .bs-searchbox .form-control { height: 38px !important; border: 1.5px solid var(--jl-gray-200) !important; border-radius: 8px !important; } /* ── Input fields (exclude bootstrap-select wrapper) ── */ .jl-auth-page body .form-control:not(.bootstrap-select) { height: 48px !important; border: 1.5px solid var(--jl-gray-200) !important; border-radius: var(--jl-radius) !important; padding: 12px 16px !important; font-size: 15px !important; color: var(--jl-charcoal) !important; background: var(--jl-white) !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; box-shadow: none !important; } .jl-auth-page body .form-control:not(.bootstrap-select):focus { border-color: var(--jl-teal) !important; box-shadow: 0 0 0 3px rgba(77, 191, 179, 0.15) !important; outline: none !important; } .jl-auth-page body textarea.form-control { height: auto !important; } .jl-auth-page body .control-label { font-size: 14px; font-weight: 500; color: var(--jl-gray-700); } /* ── Primary button ── */ .jl-auth-page body .btn-primary { background: var(--jl-gradient) !important; border: none !important; height: 48px !important; border-radius: var(--jl-radius) !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0.01em; transition: opacity 0.2s ease, transform 0.1s ease !important; box-shadow: 0 2px 8px rgba(42, 111, 122, 0.25) !important; color: #fff !important; } .jl-auth-page body .btn-primary:hover { opacity: 0.92; transform: translateY(-1px); } /* ── Secondary button ── */ .jl-auth-page body .btn-default { height: 48px !important; border-radius: var(--jl-radius) !important; font-size: 15px !important; font-weight: 500 !important; border: 1.5px solid var(--jl-gray-200) !important; color: var(--jl-gray-700) !important; background: var(--jl-white) !important; } .jl-auth-page body .btn-default:hover { border-color: var(--jl-teal) !important; background: var(--jl-gray-50) !important; } /* ── Links ── */ .jl-auth-page body a.text-muted { color: var(--jl-teal) !important; font-weight: 500; text-decoration: none; } .jl-auth-page body a.text-muted:hover { color: var(--jl-teal-dark) !important; } /* ── Checkbox ── */ .jl-auth-page body .checkbox label { color: var(--jl-gray-600); font-size: 14px; } /* ── Alerts ── */ .jl-auth-page body .alert { border-radius: var(--jl-radius); font-size: 14px; } /* ── Register: section headings ── */ .jl-auth-page body .register-contact-info-heading, .jl-auth-page body .register-company-info-heading { font-size: 16px; color: var(--jl-charcoal); margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--jl-gray-200); } /* Register: heading row col-md-6 + col-md-3 should be full width (stacked) */ .jl-auth-page body.register > #wrapper .mbot15 .col-md-6, .jl-auth-page body.register > #wrapper .mbot15 .col-md-3 { width: 100% !important; float: none !important; padding-left: 0 !important; padding-right: 0 !important; } /* ═══════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════ */ @media (max-width: 991px) { .jl-auth-page body { flex-direction: column !important; overflow-y: auto !important; height: auto !important; min-height: 100vh !important; background: var(--jl-gray-50) !important; } .jl-auth-page body > #wrapper { flex: 1 !important; max-width: 100% !important; width: 100% !important; height: auto !important; padding: 30px 20px !important; } .jl-auth-page body > .jl-right-panel { display: none !important; } .jl-register-btn { top: 16px; right: 16px; padding: 8px 18px; font-size: 13px; } /* Register: stack columns on tablet */ .jl-auth-page body.register .panel-body > .row > .col-md-6 { width: 100% !important; float: none !important; } } @media (max-width: 480px) { .jl-auth-page body > #wrapper { padding: 20px 16px !important; } .jl-auth-page body > #wrapper > #content { max-width: 100%; } .jl-register-btn { top: 12px; right: 12px; padding: 6px 14px; font-size: 12px; } }