/** * Redesign of the full-page login/register screen at /my-profile/ * (workscout_profile_page), rendered by the child theme's own * template-dashboard.php override - see that file's header comment for * why it's a full copy rather than a hook. Markup/behavior for the * actual form fields is still workscout-core's (templates/account/ * login-form.php, registration-form.php - the same files the header * popup uses), so most of the input/button rules below intentionally * mirror css/auth-modal.css's approach, just re-scoped to .jf-auth-split. * Enqueued only on this page - see functions.php. * * Layout reference: D:\JobsFor\Images\login.jpg (split-screen card, form * left / graphic right) - light theme rather than that reference's dark * one, to stay consistent with the rest of the site. Right-panel graphic * is the existing "Refer. Hire. Get Paid." marketing asset * (images/auth-referral-panel.png) shown in full via object-fit:contain, * not cropped - see template-dashboard.php. */ /* ---------- Card shell ---------- */ .jf-auth-split { display: flex; align-items: stretch; max-width: 100%; margin: 50px auto; background: #fff; border-radius: 20px; overflow: hidden; border: 1px solid #eef0f3; box-shadow: 0 30px 70px -20px rgba(15, 23, 42, .18), 0 6px 20px rgba(15, 23, 42, .06); } .jf-auth-visual { flex: 0 0 48%; position: relative; background: #f4f7fb; display: flex; align-items: center; justify-content: center; padding: 0; } .jf-auth-visual img { display: block; width: 100%; height: auto; object-fit: contain; object-position: center; } /* Two separate assets, not one CSS-resized image - the desktop crop is landscape/wide (fits a 48% side column), the mobile one is a portrait crop of the same ad meant to sit full-width above the stacked form. Only one is ever in the DOM's visible flow at a time (see the 900px breakpoint below). Specificity note: `.jf-auth-visual img` above is (0,1,1) - a bare `.jf-auth-visual-mobile`/`-desktop` class selector is only (0,1,0) and silently loses to it regardless of source order or being inside a media query (confirmed live, 2026-08-17: both images rendered simultaneously at every viewport). Repeating `.jf-auth-visual img` as the qualifying prefix here keeps these at matching/higher specificity so they actually win. */ .jf-auth-visual img.jf-auth-visual-mobile { display: none; } .jf-auth-form-col { flex: 1 1 auto; min-width: 0; padding: 56px 60px; display: flex; align-items: center; } /* Overrides the parent theme's `body .my-account{width:430px !important}` - needs matching !important to win, not just higher specificity. */ .jf-auth-form-col .my-account.static-login-page { width: 100% !important; max-width: 420px; margin: 0 auto !important; } /* ---------- Tabs: kept in the DOM (the theme's own JS in custom.min.js depends on .tabs-nav/.tabs-container/#tab1/#tab2 to switch forms) but hidden - the design uses the login form's own "Sign up now" link and a matching "Log in" link on the register form instead of visible tab buttons (both already wired to trigger these hidden tabs - see functions.php for the register->login direction). ---------- */ .jf-auth-form-col .tabs-nav.login-tabs { display: none; } .jf-auth-headline { margin-bottom: 28px; } .jf-auth-headline h2 { margin: 0 0 8px; font-size: 30px; font-weight: 700; color: #15181c; } .jf-auth-headline p { margin: 0; font-size: 15px; color: #6b7280; } /* ---------- Form fields ---------- */ .jf-auth-form-col .workscout_form label input { width: 100%; height: 50px; margin-top: 0 !important; padding: 0 16px 0 46px; background: #f5f6f8; border: 1px solid #eceef1; border-radius: 10px; font-size: 15px; color: #15181c; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; } .jf-auth-form-col .workscout_form label input::placeholder { color: #9aa1ab; } .jf-auth-form-col .workscout_form label input:focus { outline: none; background: #fff; border-color: #2c9cdb; box-shadow: 0 0 0 3px rgba(44, 156, 219, .15); } .jf-auth-form-col .workscout_form label i { left: 16px; font-size: 18px; color: #8b95a1; } .jf-auth-form-col .workscout_form p { margin-bottom: 15px; color: #6b7280; } /* Remember me / lost password row */ .jf-auth-form-col .checkboxes { display: flex; align-items: center; gap: 8px; margin: -4px 0 18px !important; } .jf-auth-form-col .checkboxes input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: #2c9cdb; cursor: pointer; } .jf-auth-form-col .checkboxes label { margin: 0; font-size: 14px; color: #4b5563; cursor: pointer; } /* Submit button - the site's real brand navy, same accent the header Log In/Register pills and their hover already use. */ .jf-auth-form-col input[type="submit"] { width: 100%; height: 50px; margin: 4px 0 18px !important; border: none; border-radius: 10px; background: #26368d; color: #fff; font-size: 15px; font-weight: 600; letter-spacing: .2px; text-align: center; cursor: pointer; transition: background-color .15s ease; } .jf-auth-form-col input[type="submit"]:hover { background: #2c9cdb; } /* Links (Lost Password?, Sign up now / Log in) */ .jf-auth-form-col .workscout_form a { color: #2c9cdb; } .jf-auth-form-col .workscout_form a:hover { color: #1c87c4; } .jf-auth-form-col .jf-auth-switch { font-size: 14px; color: #6b7280; } /* Error / success notices */ .jf-auth-form-col .notification { border-radius: 10px; font-size: 14px; padding: 12px 16px; } .jf-auth-form-col .notification.error { background: rgba(217, 45, 32, .06); border: 1px solid rgba(217, 45, 32, .2); color: #b3261e; } .jf-auth-form-col .notification.success { background: rgba(44, 156, 219, .08); border: 1px solid rgba(44, 156, 219, .25); color: #1c6ea4; } .jf-auth-form-col .notification p { margin: 0; color: inherit; } /* ---------- Candidate / Employer toggle (registration) ---------- Same SVG-mask approach as auth-modal.css and for the same reason: the theme's own icon font for this toggle is broken (missing @font-face), and on any page where Elementor also loads its frontend.min.css, that resets every tag's font-family too. Self- contained SVG masks sidestep both issues instead of fighting them. */ .jf-auth-form-col .account-type { display: flex; width: 100%; margin: 0 0 16px 0; gap: 10px; } .jf-auth-form-col .account-type div { flex: 1; margin-right: 0; } .jf-auth-form-col .account-type label i { display: none !important; } .jf-auth-form-col .account-type input.account-type-radio:empty ~ label { display: flex !important; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; border-radius: 10px; background: #f5f6f8; color: #4b5563; } .jf-auth-form-col .account-type label:before { content: "" !important; position: static !important; opacity: 1 !important; flex: 0 0 auto !important; width: 16px !important; height: 16px !important; background-color: #8b95a1 !important; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; transition: background-color .15s ease; } .jf-auth-form-col .account-type label[for="freelancer-radio"]:before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); } .jf-auth-form-col .account-type label[for="employer-radio"]:before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2' ry='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2' ry='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E"); } /* White text/icon on a solid primary-blue fill (per request) - solid rather than the previous translucent tint so the fill is actually #2c9cdb, not a paler wash of it (translucent white text was the original bug here). */ .jf-auth-form-col .account-type input.account-type-radio ~ label:hover { color: #fff; background-color: #2c9cdb; } .jf-auth-form-col .account-type input.account-type-radio ~ label:hover:before { background-color: #fff !important; } .jf-auth-form-col .account-type input.account-type-radio:checked ~ label { color: #fff; background-color: #26368d; } .jf-auth-form-col .account-type input.account-type-radio:checked ~ label:before { background-color: #fff !important; } /* ---------- "or" divider + Google placeholder button ---------- Same button injected via functions.php's jobsfor_render_google_auth_button() (shared with the popup) - same light styling as auth-modal.css's popup version, just re-scoped to this page. */ .jf-auth-form-col .auth-divider { display: flex; align-items: center; gap: 12px; margin: 4px 0 16px; color: #9aa1ab; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; } .jf-auth-form-col .auth-divider::before, .jf-auth-form-col .auth-divider::after { content: ""; flex: 1; height: 1px; background: #eceef1; } /* a.auth-google-btn + !important: same parent-theme global anchor-color specificity issue as auth-modal.css's copy of this button - only surfaces once this renders as a real (never did while it was still a