Justice Forward Portal – Login<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=Outfit:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n <style>\n *, *::before, *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n :root {\n --primary-blue: #214a99;\n --primary-dark: #1a3d7a;\n --accent-teal: #4fb3b3;\n --accent-light: #7dd3d3;\n --white: #ffffff;\n --gray-100: #f8fafc;\n --gray-200: #e2e8f0;\n --gray-400: #94a3b8;\n --gray-600: #475569;\n --shadow-soft: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n --shadow-medium: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n --shadow-large: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n }\n\n html, body {\n height: 100%;\n }\n\n body {\n font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;\n background-color: var(--primary-blue);\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n overflow: hidden;\n }\n\n \/* Animated dot pattern background *\/\n .bg-pattern {\n position: absolute;\n inset: 0;\n overflow: hidden;\n pointer-events: none;\n }\n\n .dot-grid {\n position: absolute;\n width: 100%;\n height: 100%;\n }\n\n .dot {\n position: absolute;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n opacity: 0;\n animation: fadeInDot 0.6s ease-out forwards;\n }\n\n @keyframes fadeInDot {\n from {\n opacity: 0;\n transform: scale(0);\n }\n to {\n opacity: var(--dot-opacity, 0.3);\n transform: scale(1);\n }\n }\n\n @keyframes pulse {\n 0%, 100% {\n opacity: var(--dot-opacity, 0.3);\n transform: scale(1);\n }\n 50% {\n opacity: calc(var(--dot-opacity, 0.3) * 1.5);\n transform: scale(1.1);\n }\n }\n\n .dot.pulse {\n animation: fadeInDot 0.6s ease-out forwards, pulse 3s ease-in-out infinite;\n }\n\n \/* Gradient overlay *\/\n .gradient-overlay {\n position: absolute;\n inset: 0;\n background: \n radial-gradient(ellipse at 20% 20%, rgba(79, 179, 179, 0.15) 0%, transparent 50%),\n radial-gradient(ellipse at 80% 80%, rgba(79, 179, 179, 0.1) 0%, transparent 50%),\n linear-gradient(135deg, rgba(26, 61, 122, 0.3) 0%, transparent 50%);\n pointer-events: none;\n }\n\n \/* Login container *\/\n .login-container {\n position: relative;\n z-index: 10;\n width: 100%;\n max-width: 440px;\n padding: 20px;\n animation: slideUp 0.8s ease-out;\n }\n\n @keyframes slideUp {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n \/* Login card *\/\n .login-card {\n background: var(--white);\n border-radius: 24px;\n padding: 48px 40px;\n box-shadow: var(--shadow-large);\n position: relative;\n overflow: hidden;\n }\n\n .login-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 4px;\n background: linear-gradient(90deg, var(--accent-teal), var(--primary-blue));\n }\n\n \/* Logo section *\/\n .logo-section {\n text-align: center;\n margin-bottom: 36px;\n }\n\n .logo {\n max-width: 280px;\n height: auto;\n margin-bottom: 16px;\n }\n\n .portal-badge {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n background: linear-gradient(135deg, var(--gray-100), var(--gray-200));\n padding: 8px 16px;\n border-radius: 100px;\n font-family: 'Outfit', sans-serif;\n font-size: 12px;\n font-weight: 500;\n color: var(--gray-600);\n letter-spacing: 0.5px;\n text-transform: uppercase;\n }\n\n .portal-badge svg {\n width: 14px;\n height: 14px;\n color: var(--accent-teal);\n }\n\n \/* Form styles *\/\n .login-form {\n display: flex;\n flex-direction: column;\n gap: 20px;\n }\n\n .form-group {\n position: relative;\n }\n\n .form-label {\n display: block;\n font-family: 'Outfit', sans-serif;\n font-size: 13px;\n font-weight: 500;\n color: var(--gray-600);\n margin-bottom: 8px;\n letter-spacing: 0.3px;\n }\n\n .input-wrapper {\n position: relative;\n }\n\n .input-icon {\n position: absolute;\n left: 16px;\n top: 50%;\n transform: translateY(-50%);\n width: 20px;\n height: 20px;\n color: var(--gray-400);\n transition: color 0.3s ease;\n pointer-events: none;\n }\n\n .form-input {\n width: 100%;\n padding: 14px 16px 14px 48px;\n font-family: 'DM Sans', sans-serif;\n font-size: 15px;\n color: var(--gray-600);\n background: var(--gray-100);\n border: 2px solid transparent;\n border-radius: 12px;\n outline: none;\n transition: all 0.3s ease;\n }\n\n .form-input::placeholder {\n color: var(--gray-400);\n }\n\n .form-input:hover {\n background: var(--white);\n border-color: var(--gray-200);\n }\n\n .form-input:focus {\n background: var(--white);\n border-color: var(--accent-teal);\n box-shadow: 0 0 0 4px rgba(79, 179, 179, 0.1);\n }\n\n .form-input:focus + .input-icon,\n .input-wrapper:focus-within .input-icon {\n color: var(--accent-teal);\n }\n\n \/* Password toggle *\/\n .password-toggle {\n position: absolute;\n right: 16px;\n top: 50%;\n transform: translateY(-50%);\n background: none;\n border: none;\n padding: 4px;\n cursor: pointer;\n color: var(--gray-400);\n transition: color 0.3s ease;\n }\n\n .password-toggle:hover {\n color: var(--primary-blue);\n }\n\n .password-toggle svg {\n width: 20px;\n height: 20px;\n }\n\n \/* Remember me & forgot password *\/\n .form-options {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 4px;\n }\n\n .remember-me {\n display: flex;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n }\n\n .remember-me input {\n display: none;\n }\n\n .checkbox-custom {\n width: 20px;\n height: 20px;\n border: 2px solid var(--gray-200);\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.3s ease;\n }\n\n .checkbox-custom svg {\n width: 12px;\n height: 12px;\n color: var(--white);\n opacity: 0;\n transform: scale(0);\n transition: all 0.2s ease;\n }\n\n .remember-me input:checked + .checkbox-custom {\n background: var(--accent-teal);\n border-color: var(--accent-teal);\n }\n\n .remember-me input:checked + .checkbox-custom svg {\n opacity: 1;\n transform: scale(1);\n }\n\n .remember-me span {\n font-size: 14px;\n color: var(--gray-600);\n }\n\n .forgot-password {\n font-size: 14px;\n color: var(--primary-blue);\n text-decoration: none;\n font-weight: 500;\n transition: color 0.3s ease;\n }\n\n .forgot-password:hover {\n color: var(--accent-teal);\n }\n\n \/* Submit button *\/\n .submit-btn {\n position: relative;\n width: 100%;\n padding: 16px 24px;\n margin-top: 8px;\n font-family: 'Outfit', sans-serif;\n font-size: 16px;\n font-weight: 600;\n color: var(--white);\n background: linear-gradient(135deg, var(--primary-blue), var(--primary-dark));\n border: none;\n border-radius: 12px;\n cursor: pointer;\n overflow: hidden;\n transition: all 0.3s ease;\n }\n\n .submit-btn::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, var(--accent-teal), var(--primary-blue));\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n\n .submit-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 10px 20px -5px rgba(33, 74, 153, 0.4);\n }\n\n .submit-btn:hover::before {\n opacity: 1;\n }\n\n .submit-btn:active {\n transform: translateY(0);\n }\n\n .submit-btn span {\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n }\n\n .submit-btn svg {\n width: 20px;\n height: 20px;\n transition: transform 0.3s ease;\n }\n\n .submit-btn:hover svg {\n transform: translateX(4px);\n }\n\n \/* Security note *\/\n .security-note {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n margin-top: 24px;\n padding-top: 24px;\n border-top: 1px solid var(--gray-200);\n font-size: 13px;\n color: var(--gray-400);\n }\n\n .security-note svg {\n width: 16px;\n height: 16px;\n color: var(--accent-teal);\n }\n\n \/* Footer *\/\n .login-footer {\n text-align: center;\n margin-top: 24px;\n color: rgba(255, 255, 255, 0.7);\n font-size: 13px;\n }\n\n .login-footer a {\n color: var(--accent-light);\n text-decoration: none;\n transition: color 0.3s ease;\n }\n\n .login-footer a:hover {\n color: var(--white);\n }\n\n \/* Responsive *\/\n @media (max-width: 480px) {\n .login-card {\n padding: 36px 24px;\n border-radius: 20px;\n }\n\n .logo {\n max-width: 220px;\n }\n\n .form-options {\n flex-direction: column;\n gap: 12px;\n align-items: flex-start;\n }\n\n .forgot-password {\n align-self: flex-end;\n }\n }\n\n \/* Loading state for button *\/\n .submit-btn.loading span {\n opacity: 0;\n }\n\n .submit-btn.loading::after {\n content: '';\n position: absolute;\n width: 24px;\n height: 24px;\n border: 3px solid rgba(255, 255, 255, 0.3);\n border-top-color: var(--white);\n border-radius: 50%;\n animation: spin 0.8s linear infinite;\n }\n\n @keyframes spin {\n to {\n transform: rotate(360deg);\n }\n }\n <\/style>\n<\/head>\n<body>\n \n <div class=\"bg-pattern\">\n <div class=\"dot-grid\" id=\"dotGrid\"><\/div>\n <div class=\"gradient-overlay\"><\/div>\n <\/div>\n\n \n <div class=\"login-container\">\n <div class=\"login-card\">\n \n <div class=\"logo-section\">\n <img decoding=\"async\" src=\"https:\/\/portal.justiceforwardtx.org\/wp-content\/uploads\/2026\/01\/LogoTaglinev24c-09-1-1.svg\" alt=\"Justice Forward\" class=\"logo\">\n <div class=\"portal-badge\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"><\/rect>\n <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"><\/path>\n <\/svg>\n Secure Client Portal\n <\/div>\n <\/div>\n\n \n <form class=\"login-form\" id=\"loginForm\">\n <div class=\"form-group\">\n <label class=\"form-label\" for=\"username\">Email or Username<\/label>\n <div class=\"input-wrapper\">\n <input type=\"text\" id=\"username\" name=\"log\" class=\"form-input\" placeholder=\"Enter your email or username\" required>\n <svg class=\"input-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"><\/path>\n <circle cx=\"12\" cy=\"7\" r=\"4\"><\/circle>\n <\/svg>\n <\/div>\n <\/div>\n\n <div class=\"form-group\">\n <label class=\"form-label\" for=\"password\">Password<\/label>\n <div class=\"input-wrapper\">\n <input type=\"password\" id=\"password\" name=\"pwd\" class=\"form-input\" placeholder=\"Enter your password\" required>\n <svg class=\"input-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"><\/rect>\n <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"><\/path>\n <\/svg>\n <button type=\"button\" class=\"password-toggle\" id=\"togglePassword\" aria-label=\"Toggle password visibility\">\n <svg class=\"eye-open\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"><\/path>\n <circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle>\n <\/svg>\n <svg class=\"eye-closed\" style=\"display: none;\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\"><\/path>\n <line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"><\/line>\n <\/svg>\n <\/button>\n <\/div>\n <\/div>\n\n <div class=\"form-options\">\n <label class=\"remember-me\">\n <input type=\"checkbox\" name=\"rememberme\" value=\"forever\">\n <span class=\"checkbox-custom\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"20 6 9 17 4 12\"><\/polyline>\n <\/svg>\n <\/span>\n <span>Remember me<\/span>\n <\/label>\n <a href=\"#\" class=\"forgot-password\">Forgot password?<\/a>\n <\/div>\n\n <button type=\"submit\" class=\"submit-btn\">\n <span>\n Sign In to Portal\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line>\n <polyline points=\"12 5 19 12 12 19\"><\/polyline>\n <\/svg>\n <\/span>\n <\/button>\n\n <div class=\"security-note\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"><\/path>\n <\/svg>\n Protected by 256-bit SSL encryption\n <\/div>\n <\/form>\n <\/div>\n\n <div class=\"login-footer\">\n <p>© 2026 Justice Forward Texas. <a href=\"https:\/\/justiceforwardtx.org\">Visit Main Site<\/a><\/p>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Generate dot pattern background\n function createDotPattern() {\n const container = document.getElementById('dotGrid');\n const dotCount = 80;\n \n for (let i = 0; i < dotCount; i++) {\n const dot = document.createElement('div');\n dot.className = 'dot' + (Math.random() > 0.7 ? ' pulse' : '');\n \n \/\/ Position dots more towards the edges\n let x, y;\n const edge = Math.random();\n if (edge < 0.25) {\n \/\/ Top edge\n x = Math.random() * 100;\n y = Math.random() * 30;\n } else if (edge < 0.5) {\n \/\/ Right edge\n x = 70 + Math.random() * 30;\n y = Math.random() * 100;\n } else if (edge < 0.75) {\n \/\/ Bottom edge\n x = Math.random() * 100;\n y = 70 + Math.random() * 30;\n } else {\n \/\/ Left edge\n x = Math.random() * 30;\n y = Math.random() * 100;\n }\n \n dot.style.left = x + '%';\n dot.style.top = y + '%';\n \n \/\/ Color gradient from teal to blue based on position\n const gradientPos = (x + y) \/ 200;\n const teal = [79, 179, 179];\n const blue = [33, 74, 153];\n const r = Math.round(teal[0] + (blue[0] - teal[0]) * gradientPos);\n const g = Math.round(teal[1] + (blue[1] - teal[1]) * gradientPos);\n const b = Math.round(teal[2] + (blue[2] - teal[2]) * gradientPos);\n \n dot.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;\n dot.style.setProperty('--dot-opacity', (0.2 + Math.random() * 0.4).toFixed(2));\n dot.style.animationDelay = (i * 0.02) + 's';\n \n \/\/ Vary dot sizes\n const size = 4 + Math.random() * 8;\n dot.style.width = size + 'px';\n dot.style.height = size + 'px';\n \n container.appendChild(dot);\n }\n }\n\n \/\/ Password toggle functionality\n const togglePassword = document.getElementById('togglePassword');\n const passwordInput = document.getElementById('password');\n const eyeOpen = togglePassword.querySelector('.eye-open');\n const eyeClosed = togglePassword.querySelector('.eye-closed');\n\n togglePassword.addEventListener('click', function() {\n const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';\n passwordInput.setAttribute('type', type);\n \n if (type === 'text') {\n eyeOpen.style.display = 'none';\n eyeClosed.style.display = 'block';\n } else {\n eyeOpen.style.display = 'block';\n eyeClosed.style.display = 'none';\n }\n });\n\n \/\/ Initialize\n createDotPattern();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Justice Forward Portal – Login Secure Client Portal Email or Username Password Remember me Forgot password? Sign In to Portal Protected by 256-bit SSL encryption © 2026 Justice Forward Texas. Visit Main Site<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/portal.justiceforwardtx.org\/index.php\/wp-json\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/portal.justiceforwardtx.org\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/portal.justiceforwardtx.org\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/portal.justiceforwardtx.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/portal.justiceforwardtx.org\/index.php\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":1,"href":"https:\/\/portal.justiceforwardtx.org\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":10,"href":"https:\/\/portal.justiceforwardtx.org\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions\/10"}],"wp:attachment":[{"href":"https:\/\/portal.justiceforwardtx.org\/index.php\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":8,"date":"2026-01-16T16:21:52","date_gmt":"2026-01-16T16:21:52","guid":{"rendered":"https:\/\/portal.justiceforwardtx.org\/?page_id=8"},"modified":"2026-01-16T16:21:52","modified_gmt":"2026-01-16T16:21:52","slug":"home","status":"publish","type":"page","link":"https:\/\/portal.justiceforwardtx.org\/index.php\/home\/","title":{"rendered":"Home"},"content":{"rendered":"\n\n\n\n \n \n Justice Forward Portal – Login<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=Outfit:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n <style>\n *, *::before, *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n :root {\n --primary-blue: #214a99;\n --primary-dark: #1a3d7a;\n --accent-teal: #4fb3b3;\n --accent-light: #7dd3d3;\n --white: #ffffff;\n --gray-100: #f8fafc;\n --gray-200: #e2e8f0;\n --gray-400: #94a3b8;\n --gray-600: #475569;\n --shadow-soft: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n --shadow-medium: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n --shadow-large: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n }\n\n html, body {\n height: 100%;\n }\n\n body {\n font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;\n background-color: var(--primary-blue);\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n overflow: hidden;\n }\n\n \/* Animated dot pattern background *\/\n .bg-pattern {\n position: absolute;\n inset: 0;\n overflow: hidden;\n pointer-events: none;\n }\n\n .dot-grid {\n position: absolute;\n width: 100%;\n height: 100%;\n }\n\n .dot {\n position: absolute;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n opacity: 0;\n animation: fadeInDot 0.6s ease-out forwards;\n }\n\n @keyframes fadeInDot {\n from {\n opacity: 0;\n transform: scale(0);\n }\n to {\n opacity: var(--dot-opacity, 0.3);\n transform: scale(1);\n }\n }\n\n @keyframes pulse {\n 0%, 100% {\n opacity: var(--dot-opacity, 0.3);\n transform: scale(1);\n }\n 50% {\n opacity: calc(var(--dot-opacity, 0.3) * 1.5);\n transform: scale(1.1);\n }\n }\n\n .dot.pulse {\n animation: fadeInDot 0.6s ease-out forwards, pulse 3s ease-in-out infinite;\n }\n\n \/* Gradient overlay *\/\n .gradient-overlay {\n position: absolute;\n inset: 0;\n background: \n radial-gradient(ellipse at 20% 20%, rgba(79, 179, 179, 0.15) 0%, transparent 50%),\n radial-gradient(ellipse at 80% 80%, rgba(79, 179, 179, 0.1) 0%, transparent 50%),\n linear-gradient(135deg, rgba(26, 61, 122, 0.3) 0%, transparent 50%);\n pointer-events: none;\n }\n\n \/* Login container *\/\n .login-container {\n position: relative;\n z-index: 10;\n width: 100%;\n max-width: 440px;\n padding: 20px;\n animation: slideUp 0.8s ease-out;\n }\n\n @keyframes slideUp {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n \/* Login card *\/\n .login-card {\n background: var(--white);\n border-radius: 24px;\n padding: 48px 40px;\n box-shadow: var(--shadow-large);\n position: relative;\n overflow: hidden;\n }\n\n .login-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 4px;\n background: linear-gradient(90deg, var(--accent-teal), var(--primary-blue));\n }\n\n \/* Logo section *\/\n .logo-section {\n text-align: center;\n margin-bottom: 36px;\n }\n\n .logo {\n max-width: 280px;\n height: auto;\n margin-bottom: 16px;\n }\n\n .portal-badge {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n background: linear-gradient(135deg, var(--gray-100), var(--gray-200));\n padding: 8px 16px;\n border-radius: 100px;\n font-family: 'Outfit', sans-serif;\n font-size: 12px;\n font-weight: 500;\n color: var(--gray-600);\n letter-spacing: 0.5px;\n text-transform: uppercase;\n }\n\n .portal-badge svg {\n width: 14px;\n height: 14px;\n color: var(--accent-teal);\n }\n\n \/* Form styles *\/\n .login-form {\n display: flex;\n flex-direction: column;\n gap: 20px;\n }\n\n .form-group {\n position: relative;\n }\n\n .form-label {\n display: block;\n font-family: 'Outfit', sans-serif;\n font-size: 13px;\n font-weight: 500;\n color: var(--gray-600);\n margin-bottom: 8px;\n letter-spacing: 0.3px;\n }\n\n .input-wrapper {\n position: relative;\n }\n\n .input-icon {\n position: absolute;\n left: 16px;\n top: 50%;\n transform: translateY(-50%);\n width: 20px;\n height: 20px;\n color: var(--gray-400);\n transition: color 0.3s ease;\n pointer-events: none;\n }\n\n .form-input {\n width: 100%;\n padding: 14px 16px 14px 48px;\n font-family: 'DM Sans', sans-serif;\n font-size: 15px;\n color: var(--gray-600);\n background: var(--gray-100);\n border: 2px solid transparent;\n border-radius: 12px;\n outline: none;\n transition: all 0.3s ease;\n }\n\n .form-input::placeholder {\n color: var(--gray-400);\n }\n\n .form-input:hover {\n background: var(--white);\n border-color: var(--gray-200);\n }\n\n .form-input:focus {\n background: var(--white);\n border-color: var(--accent-teal);\n box-shadow: 0 0 0 4px rgba(79, 179, 179, 0.1);\n }\n\n .form-input:focus + .input-icon,\n .input-wrapper:focus-within .input-icon {\n color: var(--accent-teal);\n }\n\n \/* Password toggle *\/\n .password-toggle {\n position: absolute;\n right: 16px;\n top: 50%;\n transform: translateY(-50%);\n background: none;\n border: none;\n padding: 4px;\n cursor: pointer;\n color: var(--gray-400);\n transition: color 0.3s ease;\n }\n\n .password-toggle:hover {\n color: var(--primary-blue);\n }\n\n .password-toggle svg {\n width: 20px;\n height: 20px;\n }\n\n \/* Remember me & forgot password *\/\n .form-options {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 4px;\n }\n\n .remember-me {\n display: flex;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n }\n\n .remember-me input {\n display: none;\n }\n\n .checkbox-custom {\n width: 20px;\n height: 20px;\n border: 2px solid var(--gray-200);\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.3s ease;\n }\n\n .checkbox-custom svg {\n width: 12px;\n height: 12px;\n color: var(--white);\n opacity: 0;\n transform: scale(0);\n transition: all 0.2s ease;\n }\n\n .remember-me input:checked + .checkbox-custom {\n background: var(--accent-teal);\n border-color: var(--accent-teal);\n }\n\n .remember-me input:checked + .checkbox-custom svg {\n opacity: 1;\n transform: scale(1);\n }\n\n .remember-me span {\n font-size: 14px;\n color: var(--gray-600);\n }\n\n .forgot-password {\n font-size: 14px;\n color: var(--primary-blue);\n text-decoration: none;\n font-weight: 500;\n transition: color 0.3s ease;\n }\n\n .forgot-password:hover {\n color: var(--accent-teal);\n }\n\n \/* Submit button *\/\n .submit-btn {\n position: relative;\n width: 100%;\n padding: 16px 24px;\n margin-top: 8px;\n font-family: 'Outfit', sans-serif;\n font-size: 16px;\n font-weight: 600;\n color: var(--white);\n background: linear-gradient(135deg, var(--primary-blue), var(--primary-dark));\n border: none;\n border-radius: 12px;\n cursor: pointer;\n overflow: hidden;\n transition: all 0.3s ease;\n }\n\n .submit-btn::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, var(--accent-teal), var(--primary-blue));\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n\n .submit-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 10px 20px -5px rgba(33, 74, 153, 0.4);\n }\n\n .submit-btn:hover::before {\n opacity: 1;\n }\n\n .submit-btn:active {\n transform: translateY(0);\n }\n\n .submit-btn span {\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n }\n\n .submit-btn svg {\n width: 20px;\n height: 20px;\n transition: transform 0.3s ease;\n }\n\n .submit-btn:hover svg {\n transform: translateX(4px);\n }\n\n \/* Security note *\/\n .security-note {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n margin-top: 24px;\n padding-top: 24px;\n border-top: 1px solid var(--gray-200);\n font-size: 13px;\n color: var(--gray-400);\n }\n\n .security-note svg {\n width: 16px;\n height: 16px;\n color: var(--accent-teal);\n }\n\n \/* Footer *\/\n .login-footer {\n text-align: center;\n margin-top: 24px;\n color: rgba(255, 255, 255, 0.7);\n font-size: 13px;\n }\n\n .login-footer a {\n color: var(--accent-light);\n text-decoration: none;\n transition: color 0.3s ease;\n }\n\n .login-footer a:hover {\n color: var(--white);\n }\n\n \/* Responsive *\/\n @media (max-width: 480px) {\n .login-card {\n padding: 36px 24px;\n border-radius: 20px;\n }\n\n .logo {\n max-width: 220px;\n }\n\n .form-options {\n flex-direction: column;\n gap: 12px;\n align-items: flex-start;\n }\n\n .forgot-password {\n align-self: flex-end;\n }\n }\n\n \/* Loading state for button *\/\n .submit-btn.loading span {\n opacity: 0;\n }\n\n .submit-btn.loading::after {\n content: '';\n position: absolute;\n width: 24px;\n height: 24px;\n border: 3px solid rgba(255, 255, 255, 0.3);\n border-top-color: var(--white);\n border-radius: 50%;\n animation: spin 0.8s linear infinite;\n }\n\n @keyframes spin {\n to {\n transform: rotate(360deg);\n }\n }\n <\/style>\n<\/head>\n<body>\n \n <div class=\"bg-pattern\">\n <div class=\"dot-grid\" id=\"dotGrid\"><\/div>\n <div class=\"gradient-overlay\"><\/div>\n <\/div>\n\n \n <div class=\"login-container\">\n <div class=\"login-card\">\n \n <div class=\"logo-section\">\n <img decoding=\"async\" src=\"https:\/\/portal.justiceforwardtx.org\/wp-content\/uploads\/2026\/01\/LogoTaglinev24c-09-1-1.svg\" alt=\"Justice Forward\" class=\"logo\">\n <div class=\"portal-badge\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"><\/rect>\n <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"><\/path>\n <\/svg>\n Secure Client Portal\n <\/div>\n <\/div>\n\n \n <form class=\"login-form\" id=\"loginForm\">\n <div class=\"form-group\">\n <label class=\"form-label\" for=\"username\">Email or Username<\/label>\n <div class=\"input-wrapper\">\n <input type=\"text\" id=\"username\" name=\"log\" class=\"form-input\" placeholder=\"Enter your email or username\" required>\n <svg class=\"input-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"><\/path>\n <circle cx=\"12\" cy=\"7\" r=\"4\"><\/circle>\n <\/svg>\n <\/div>\n <\/div>\n\n <div class=\"form-group\">\n <label class=\"form-label\" for=\"password\">Password<\/label>\n <div class=\"input-wrapper\">\n <input type=\"password\" id=\"password\" name=\"pwd\" class=\"form-input\" placeholder=\"Enter your password\" required>\n <svg class=\"input-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"><\/rect>\n <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"><\/path>\n <\/svg>\n <button type=\"button\" class=\"password-toggle\" id=\"togglePassword\" aria-label=\"Toggle password visibility\">\n <svg class=\"eye-open\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"><\/path>\n <circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle>\n <\/svg>\n <svg class=\"eye-closed\" style=\"display: none;\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\"><\/path>\n <line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"><\/line>\n <\/svg>\n <\/button>\n <\/div>\n <\/div>\n\n <div class=\"form-options\">\n <label class=\"remember-me\">\n <input type=\"checkbox\" name=\"rememberme\" value=\"forever\">\n <span class=\"checkbox-custom\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"20 6 9 17 4 12\"><\/polyline>\n <\/svg>\n <\/span>\n <span>Remember me<\/span>\n <\/label>\n <a href=\"#\" class=\"forgot-password\">Forgot password?<\/a>\n <\/div>\n\n <button type=\"submit\" class=\"submit-btn\">\n <span>\n Sign In to Portal\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line>\n <polyline points=\"12 5 19 12 12 19\"><\/polyline>\n <\/svg>\n <\/span>\n <\/button>\n\n <div class=\"security-note\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"><\/path>\n <\/svg>\n Protected by 256-bit SSL encryption\n <\/div>\n <\/form>\n <\/div>\n\n <div class=\"login-footer\">\n <p>© 2026 Justice Forward Texas. <a href=\"https:\/\/justiceforwardtx.org\">Visit Main Site<\/a><\/p>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Generate dot pattern background\n function createDotPattern() {\n const container = document.getElementById('dotGrid');\n const dotCount = 80;\n \n for (let i = 0; i < dotCount; i++) {\n const dot = document.createElement('div');\n dot.className = 'dot' + (Math.random() > 0.7 ? ' pulse' : '');\n \n \/\/ Position dots more towards the edges\n let x, y;\n const edge = Math.random();\n if (edge < 0.25) {\n \/\/ Top edge\n x = Math.random() * 100;\n y = Math.random() * 30;\n } else if (edge < 0.5) {\n \/\/ Right edge\n x = 70 + Math.random() * 30;\n y = Math.random() * 100;\n } else if (edge < 0.75) {\n \/\/ Bottom edge\n x = Math.random() * 100;\n y = 70 + Math.random() * 30;\n } else {\n \/\/ Left edge\n x = Math.random() * 30;\n y = Math.random() * 100;\n }\n \n dot.style.left = x + '%';\n dot.style.top = y + '%';\n \n \/\/ Color gradient from teal to blue based on position\n const gradientPos = (x + y) \/ 200;\n const teal = [79, 179, 179];\n const blue = [33, 74, 153];\n const r = Math.round(teal[0] + (blue[0] - teal[0]) * gradientPos);\n const g = Math.round(teal[1] + (blue[1] - teal[1]) * gradientPos);\n const b = Math.round(teal[2] + (blue[2] - teal[2]) * gradientPos);\n \n dot.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;\n dot.style.setProperty('--dot-opacity', (0.2 + Math.random() * 0.4).toFixed(2));\n dot.style.animationDelay = (i * 0.02) + 's';\n \n \/\/ Vary dot sizes\n const size = 4 + Math.random() * 8;\n dot.style.width = size + 'px';\n dot.style.height = size + 'px';\n \n container.appendChild(dot);\n }\n }\n\n \/\/ Password toggle functionality\n const togglePassword = document.getElementById('togglePassword');\n const passwordInput = document.getElementById('password');\n const eyeOpen = togglePassword.querySelector('.eye-open');\n const eyeClosed = togglePassword.querySelector('.eye-closed');\n\n togglePassword.addEventListener('click', function() {\n const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';\n passwordInput.setAttribute('type', type);\n \n if (type === 'text') {\n eyeOpen.style.display = 'none';\n eyeClosed.style.display = 'block';\n } else {\n eyeOpen.style.display = 'block';\n eyeClosed.style.display = 'none';\n }\n });\n\n \/\/ Initialize\n createDotPattern();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Justice Forward Portal – Login Secure Client Portal Email or Username Password Remember me Forgot password? Sign In to Portal Protected by 256-bit SSL encryption © 2026 Justice Forward Texas. Visit Main Site<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/portal.justiceforwardtx.org\/index.php\/wp-json\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/portal.justiceforwardtx.org\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/portal.justiceforwardtx.org\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/portal.justiceforwardtx.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/portal.justiceforwardtx.org\/index.php\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":1,"href":"https:\/\/portal.justiceforwardtx.org\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":10,"href":"https:\/\/portal.justiceforwardtx.org\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions\/10"}],"wp:attachment":[{"href":"https:\/\/portal.justiceforwardtx.org\/index.php\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}