/* ba-login-2026.css — myAdvisorCloud portal login, brand-led reskin (v3.4, live-DOM-bound). * Loaded LAST on the login page only (one in icloud_theme/login.php). * EVERY rule scoped under body.login -> physically cannot reach the dashboard or anything shared. * Enhances the EXISTING Concrete5 login DOM only; never hides the form, inputs, reCAPTCHA, or submit. * Bound to the REAL injected DOM (verified live 07-19-26): * header > .container > .row > .navbar-header + .main-navigation (old cloud logo -> hidden) * section#login_page_section > .container * h1.heading (hidden) * .row > .col-...-7 > .form * > h2 "User Account" -> "MEMBER LOGIN / Welcome back." * > .login-page > .login-form ... -> uName/uPassword/remember/reCAPTCHA + button#submitBtn (LOG IN) * > .authentication-type:has(form.forgot) -> "Forgot Your Password?" h2 + uEmail + button.btn-block (RESET) * .row > .col-...-5 > .member * > h2 "Not a Member?" -> Brokers Alliance woven-ribbon lockup * > p (intro, hidden) * > p > b "Learn About MAC" -> "One login. Your entire practice." headline * > video (hidden) ; ::after -> framed product screenshot * > p "Create a FREE MAC..." -> CTA lead-in * > a[href=/register] "Register here!" -> gold "Create your free account" */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..640;1,9..144,400..600&family=Hanken+Grotesk:wght@400..800&display=swap'); body.login{ --navy:#0b2742; --navy2:#0a3a63; --deep:#071d33; --blue:#0b4f8a; --blue2:#1c6fb8; --sky:#5aa9e6; --gold:#c8a24a; --gold2:#e6c886; --goldink:#3a2c07; --ink:#16283a; --slate:#4a5c6e; --muted:#647688; --line:#e4edf4; --paper:#ffffff; --disp:'Fraunces',Georgia,serif; --ui:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; margin:0; min-height:100vh; position:relative; overflow-x:hidden; font-family:var(--ui); color:var(--ink); background:var(--deep); -webkit-font-smoothing:antialiased; } /* ---- Immersive navy stage: woven texture + slow drifting aurora + vignette ---- */ body.login::before{ content:""; position:fixed; inset:-12%; z-index:0; pointer-events:none; background: radial-gradient(1200px 780px at 12% 14%, rgba(28,111,184,.55), transparent 58%), radial-gradient(1000px 720px at 88% 8%, rgba(90,169,230,.32), transparent 60%), radial-gradient(1100px 900px at 84% 98%, rgba(200,162,74,.22), transparent 55%), radial-gradient(900px 760px at 6% 94%, rgba(10,58,99,.55), transparent 62%), linear-gradient(140deg,#082741 0%,#0b2742 46%,#061a30 100%); background-size:190% 190%; animation:baDrift 34s ease-in-out infinite; } body.login::after{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.09; background:url('https://brokersalliance.com/hp/assets/founder-tile-poster.jpg') center/cover no-repeat; mix-blend-mode:soft-light; } @keyframes baDrift{0%,100%{background-position:0% 0%}50%{background-position:100% 100%}} @media (prefers-reduced-motion:reduce){body.login::before{animation:none}} body.login #wrapper,body.login #login_page_section,body.login footer{position:relative; z-index:2;} /* ---- Neutralize legacy chrome (old cloud-logo top nav, social rail, backstretch) ---- */ body.login header,body.login .navbar-header,body.login .main-navigation, body.login .ccm-ui header,body.login nav.navbar, body.login .social,body.login .socialLinks,body.login ul.social, body.login .backstretch,body.login .ccm-page-background-credit{display:none!important;} /* ---- The stage: one centered, editorial composition ---- */ body.login #login_page_section{ min-height:100vh; padding:clamp(22px,5vw,60px) clamp(16px,4vw,40px)!important; display:flex; align-items:center; justify-content:center; background:transparent!important; } body.login #login_page_section > .container{ width:100%!important; max-width:1150px!important; margin:0 auto!important; padding:0!important; } body.login #login_page_section .heading,body.login #login_page_section h1.heading{ position:absolute!important; width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);} body.login #login_page_section hr,body.login #login_page_section .line2,body.login #login_page_section .clearfix{display:none!important;} body.login #login_page_section .row{ display:flex!important; flex-wrap:wrap; gap:clamp(18px,2.4vw,32px); align-items:stretch; justify-content:center; margin:0!important; float:none!important; width:100%!important; } body.login #login_page_section .row:has(> .col-sm-12:only-child:empty){display:none!important;} body.login #login_page_section [class*="col-"]{ float:none!important; margin:0!important; padding:0!important; width:auto!important; max-width:none!important; box-sizing:border-box;} body.login [class*="col-"]:has(> .member){order:1; flex:1.15 1 520px; min-width:300px; max-width:620px;} body.login [class*="col-"]:has(> .form){order:2; flex:.85 1 380px; min-width:300px; max-width:452px;} body.login .member,body.login .form{animation:baRise .8s cubic-bezier(.2,.7,.2,1) both;} body.login .form{animation-delay:.06s;} @keyframes baRise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){body.login .member,body.login .form{animation:none}} /* ========================= BRAND / PRODUCT PANEL (.member) ========================= */ body.login .member{ display:flex; flex-direction:column; height:100%; box-sizing:border-box; background:linear-gradient(158deg,rgba(11,39,66,.88),rgba(7,29,51,.93)); border:1px solid rgba(120,170,220,.20); border-radius:16px; padding:clamp(26px,3.2vw,44px); box-shadow:0 44px 100px -34px rgba(2,14,28,.85), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter:blur(10px) saturate(1.05); color:#eaf2fa; } body.login .member *{box-sizing:border-box;} /* logo + wordmark lockup (the "Not a Member?" h2) */ body.login .member h2{ order:0; margin:0 0 18px!important; font-size:0!important; min-height:40px; display:flex; align-items:center; background:url('https://brokersalliance.com/hp/assets/logo-mark-160.png') 0 50%/36px 37px no-repeat; padding-left:50px!important; color:transparent;} body.login .member h2::before{ content:"Brokers Alliance"; font-family:var(--disp); font-weight:600; font-size:21px; letter-spacing:-.01em; color:#fff; white-space:nowrap;} /* eyebrow — editorial gold rule + spaced caps */ body.login .member::before{ content:"INDEPENDENTLY OWNED SINCE 1982 · FOUNTAIN HILLS, AZ"; order:1; align-self:flex-start; margin:4px 0 16px; padding:0 0 0 40px; line-height:1; font:700 10.5px/1 var(--ui); letter-spacing:.2em; color:var(--gold2); background:linear-gradient(var(--gold),var(--gold)) 0 50%/28px 1.5px no-repeat;} /* headline — live DOM is

Learn About...

; repurpose that

as the headline */ body.login .member p:has(> b){order:2; display:block; font-size:0!important; margin:0 0 4px; font-weight:400;} body.login .member p:has(> b) > b{font-size:0!important;} body.login .member p:has(> b)::before{ content:"One login.\AYour entire practice."; white-space:pre-line; display:block; font-family:var(--disp); font-weight:590; font-size:clamp(26px,3vw,36px); line-height:1.08; letter-spacing:-.015em; color:#fff;} body.login .member p:has(> b)::after{ content:"Quotes, illustrations, e-apps, contracting, and live case tracking. Built in house. Handed to you with the contract."; display:block; margin-top:12px; font-family:var(--ui); font-weight:400; font-size:15px; line-height:1.55; color:rgba(217,232,246,.82); max-width:42ch;} /* legacy intro paragraph (no ) -> hidden */ body.login .member > p:first-of-type{order:3; display:none!important;} /* framed product screenshot (browser chrome + navy scrim -> integrates; replaces the raw video) */ body.login .member video{display:none!important;} body.login .member::after{ content:""; order:4; display:block; margin:22px 0 12px; width:100%; max-width:100%; aspect-ratio:1180/609; border-radius:12px; border:1px solid rgba(120,170,220,.28); overflow:hidden; box-shadow:0 28px 56px -22px rgba(2,12,24,.85), inset 0 0 0 1px rgba(255,255,255,.05); background: linear-gradient(180deg,rgba(9,32,58,.10),rgba(9,32,58,0) 32%,rgba(9,32,58,.16)), url('https://brokersalliance.com/hp/assets/mac-portal-2026.jpg') center/cover no-repeat, #0e2740;} /* CTA lead-in ("Create a FREE MAC user account now...") */ body.login .member > p:last-of-type{order:5; margin:12px 0 12px!important; font-size:13.5px; color:rgba(210,226,242,.7);} /* gold CTA (the "Register here!" ) */ body.login .member > a,body.login .member .btn-primary{ order:6; display:inline-flex!important; align-items:center; justify-content:center; gap:8px; align-self:flex-start; box-sizing:border-box; margin:0!important; padding:0 26px!important; height:52px; min-width:230px; max-width:100%; float:none!important; width:auto!important; text-transform:none!important; font-family:var(--ui); font-weight:800; letter-spacing:.005em; color:var(--goldink)!important; background:linear-gradient(135deg,var(--gold2),var(--gold))!important; border:0!important; border-radius:12px!important; box-shadow:0 16px 34px -12px rgba(200,162,74,.7); text-decoration:none!important; transition:transform .13s ease,box-shadow .2s ease,filter .2s ease;} body.login .member > a:hover,body.login .member .btn-primary:hover{ transform:translateY(-2px); filter:brightness(1.05); box-shadow:0 24px 44px -14px rgba(200,162,74,.82);} /* swap the legacy CTA label */ body.login .member > a,body.login .member .btn-primary{font-size:0!important;} body.login .member > a::before,body.login .member .btn-primary::before{content:"Create your free account"; font-size:15px; font-weight:800;} body.login .member > a::after,body.login .member .btn-primary::after{content:"\2192"; font-weight:700; font-size:15px;} /* ========================= LOGIN CARD (.form) — clean secondary ========================= */ body.login .form{ display:flex; flex-direction:column; height:100%; box-sizing:border-box; background:rgba(255,255,255,.98); border:1px solid rgba(20,40,60,.08); border-radius:16px; padding:clamp(26px,3vw,40px); color:var(--ink); box-shadow:0 44px 100px -34px rgba(2,14,28,.7), inset 0 0 0 1px rgba(20,40,60,.05); backdrop-filter:blur(14px) saturate(1.1);} body.login .form *{box-sizing:border-box;} /* editorial welcome (the DIRECT-CHILD "User Account" h2 only) */ body.login #login_page_section .form > h2{order:0; margin:0 0 22px!important; font-size:0!important;} body.login #login_page_section .form > h2::before{ content:"MEMBER LOGIN"; display:block; font-family:var(--ui); font-weight:800; font-size:11px; letter-spacing:.16em; color:var(--blue); margin-bottom:9px;} body.login #login_page_section .form > h2::after{ content:"Welcome back."; display:block; font-family:var(--disp); font-weight:600; font-size:clamp(27px,2.6vw,33px); line-height:1.03; letter-spacing:-.02em; color:var(--navy);} /* inputs — flat, modern */ body.login .form .form-control, body.login .form input[type=text],body.login .form input[type=email],body.login .form input[type=password]{ width:100%!important; max-width:100%; height:52px; border:1.5px solid var(--line)!important; border-radius:11px!important; background:#fff!important; padding:0 15px!important; font-size:15px!important; color:var(--ink)!important; box-shadow:none!important; transition:border-color .18s,box-shadow .18s;} body.login .form input:focus,body.login .form .form-control:focus{ outline:none!important; border-color:var(--blue)!important; box-shadow:0 0 0 4px rgba(11,79,138,.14)!important;} body.login .form .form-group,body.login .form .controls{margin-bottom:14px!important;} body.login .form label,body.login .form .control-label{ font-family:var(--ui)!important; font-weight:700!important; font-size:11px!important; text-transform:uppercase; letter-spacing:.05em; color:var(--slate)!important; margin-bottom:8px!important; display:block;} /* remember-me */ body.login .form .checkbox,body.login .form label.form-check-label{ display:flex!important; align-items:center; gap:9px; color:var(--muted)!important; font-size:13.5px!important; font-weight:500!important; text-transform:none; letter-spacing:0; margin:2px 0 14px!important;} body.login .form input[type=checkbox]{width:16px!important;height:16px!important;accent-color:var(--blue);margin:0;flex:0 0 auto;} /* reCAPTCHA — frame to match inputs */ body.login .form .g-recaptcha{ margin:4px 0 16px; max-width:100%; overflow:hidden; border:1.5px solid var(--line)!important; border-radius:11px; background:#fff; padding:8px; display:flex; justify-content:center;} /* PRIMARY submit (LOG IN = button#submitBtn) -> solid deep navy */ body.login #login_page_section #submitBtn{ -webkit-appearance:none; appearance:none; display:flex!important; align-items:center; justify-content:center; width:100%!important; max-width:100%; height:54px; float:none!important; margin:2px 0 0!important; padding:0 24px!important; border:0!important; border-radius:12px!important; font-family:var(--ui)!important; font-weight:800!important; font-size:15px!important; letter-spacing:.04em; text-transform:uppercase; color:#fff!important; cursor:pointer; background:#0b2742!important; box-shadow:0 14px 30px -14px rgba(9,26,45,.6), inset 0 1px 0 rgba(255,255,255,.12); transition:transform .13s,box-shadow .2s,background .2s;} body.login #login_page_section #submitBtn:hover{ transform:translateY(-2px); background:#0e3357!important; box-shadow:0 22px 40px -16px rgba(9,26,45,.7);} /* forgot-password disclosure: JS wraps ONLY the reset section (h2 + p + form.forgot) in #ba-forgot-wrap and toggles .ba-collapsed on THAT wrapper — never the shared auth-type. */ body.login #login_page_section #ba-forgot-wrap.ba-collapsed{display:none!important;} /* forgot-password disclosure toggle (JS-inserted link right under LOG IN) */ body.login #login_page_section .form #ba-forgot-toggle{ display:block; margin:14px 0 0; padding:0; font-family:var(--ui); font-weight:700; font-size:13px; color:var(--blue)!important; background:none; border:0; text-decoration:none; cursor:pointer; text-align:left;} body.login #login_page_section .form #ba-forgot-toggle:hover{text-decoration:underline;} /* forgot-password heading (inside the .authentication-type that holds form.forgot) -> quiet secondary */ body.login #login_page_section .form .authentication-type:has(form.forgot) h2{ margin:20px 0 4px!important; padding-top:18px; border-top:1px solid var(--line); font-family:var(--ui)!important; font-weight:800!important; font-size:12px!important; letter-spacing:.02em; text-transform:none; color:var(--slate)!important;} body.login #login_page_section .form .authentication-type:has(form.forgot) p{ font-size:12.5px!important; color:var(--muted)!important; margin:2px 0 10px!important; line-height:1.5;} /* RESET button (form.forgot button / .btn-block) -> understated ghost, never a second primary */ body.login #login_page_section form.forgot button, body.login #login_page_section .btn-block{ display:inline-flex!important; align-items:center; justify-content:center; width:auto!important; max-width:100%; height:48px; padding:0 18px!important; margin:6px 0 0!important; float:none!important; background:#fff!important; color:var(--blue)!important; border:1.5px solid var(--blue)!important; border-radius:11px!important; box-shadow:none!important; text-transform:none!important; font-weight:700!important; font-size:13.5px!important; letter-spacing:0; text-decoration:none!important; cursor:pointer; transition:background .16s,color .16s;} body.login #login_page_section form.forgot button:hover,body.login #login_page_section .btn-block:hover{ background:var(--blue)!important;color:#fff!important;} /* generic links inside the card */ body.login .form a:not([href="/register"]){color:var(--blue)!important; font-weight:700; text-decoration:none;} body.login .form a:hover{text-decoration:underline;} /* legacy green help-block -> calm */ body.login .help-block{ background:rgba(88,168,87,.14)!important; color:#1c5e2f!important; border-radius:12px; margin-top:14px!important; font-size:14px!important; padding:12px 16px!important; font-weight:600;} /* ============ DEFEAT LEGACY id-level / !important INLINE RULES ============ */ body.login #login_page_section .member{ background:linear-gradient(158deg,rgba(11,39,66,.88),rgba(7,29,51,.93))!important; background-color:transparent!important;} body.login #login_page_section .form label, body.login #login_page_section .form .control-label{color:var(--slate)!important;} body.login #login_page_section .form .checkbox, body.login #login_page_section .form label.form-check-label{color:var(--muted)!important;} body.login #login_page_section .form .authentication-type:has(form.forgot) p{color:var(--muted)!important;} body.login #login_page_section .form .form-control, body.login #login_page_section .form input[type=text], body.login #login_page_section .form input[type=email], body.login #login_page_section .form input[type=password]{color:var(--ink)!important;} body.login #login_page_section .member > p:last-of-type{color:rgba(210,226,242,.72)!important;} body.login #login_page_section .member p:has(> b)::before{color:#fff!important;} body.login #login_page_section .member p:has(> b)::after{color:rgba(217,232,246,.82)!important;} /* ==== "Signing you in" overlay (shown on login submit; prevents impatient double-clicks) ==== */ body.login #ba-login-overlay{ position:fixed; inset:0; z-index:99999; display:none; align-items:center; justify-content:center; flex-direction:column; gap:20px; text-align:center; font-family:var(--ui); color:#eaf2fa; background:radial-gradient(1200px 820px at 50% 34%, #0e3358, #071d33 72%); opacity:0; transition:opacity .35s ease;} body.login #ba-login-overlay.show{display:flex; opacity:1;} body.login #ba-login-overlay .ba-ov-mark{width:62px; height:64px; animation:baOvPulse 2.4s ease-in-out infinite; background:url('https://brokersalliance.com/hp/assets/logo-mark-160.png') center/contain no-repeat;} body.login #ba-login-overlay .ba-ov-spin{width:44px; height:44px; border-radius:50%; border:3px solid rgba(200,162,74,.22); border-top-color:var(--gold); animation:baOvSpin .8s linear infinite;} body.login #ba-login-overlay .ba-ov-title{font-family:var(--disp); font-weight:600; font-size:27px; letter-spacing:-.01em; color:#fff;} body.login #ba-login-overlay .ba-ov-sub{font-size:14px; color:rgba(217,232,246,.72);} @keyframes baOvSpin{to{transform:rotate(360deg)}} @keyframes baOvPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.9}} @media (prefers-reduced-motion:reduce){body.login #ba-login-overlay .ba-ov-spin,body.login #ba-login-overlay .ba-ov-mark{animation:none}} /* ========================= FOOTER ========================= */ body.login footer{background:transparent!important; color:rgba(220,232,246,.5); padding:22px 0 8px; text-align:left; font-size:12.5px;} body.login footer a{color:rgba(220,232,246,.78)!important;} body.login footer .container{max-width:1150px;margin:0 auto; padding:16px 16px 0; border-top:1px solid rgba(120,170,220,.14);} /* ========================= RESPONSIVE ========================= */ @media (max-width:960px){ body.login #login_page_section{align-items:flex-start;} body.login #login_page_section .row{flex-direction:column; align-items:center; max-width:480px; margin:0 auto!important;} body.login [class*="col-"]:has(> .member),body.login [class*="col-"]:has(> .form){flex:1 1 100%; max-width:100%; width:100%;} /* login FIRST on mobile so a returning agent lands on it; brand story sits below */ body.login [class*="col-"]:has(> .form){order:1;} body.login [class*="col-"]:has(> .member){order:2;} /* the compact header on the login card carries brand identity -> drop the redundant second lockup; frame the brand panel as an intentional statement with a gold top rule */ body.login .member h2{display:none!important;} body.login .member{border-top:2px solid rgba(200,162,74,.65);} body.login .form::before{ content:"Brokers Alliance"; order:-1; display:flex; align-items:center; margin:0 0 16px; min-height:32px; padding-left:42px; background:url('https://brokersalliance.com/hp/assets/logo-mark-160.png') 0 50%/30px 31px no-repeat; font-family:var(--disp); font-weight:600; font-size:18px; letter-spacing:-.01em; color:var(--navy);} } @media (max-width:560px){ body.login #login_page_section{padding:16px 13px!important;} body.login #login_page_section .row{gap:16px;} body.login .member,body.login .form{padding:22px 18px;} body.login .member::before{content:"INDEPENDENTLY OWNED SINCE 1982"; margin:2px 0 12px; font-size:9.5px; letter-spacing:.16em; background-size:22px 1.5px; padding-left:32px;} body.login .member p:has(> b)::before{font-size:23px; line-height:1.1;} body.login .member p:has(> b)::after{font-size:14px; margin-top:10px;} body.login .member::after{margin:16px 0 10px; aspect-ratio:auto; height:150px;} body.login .member > p:last-of-type{margin:10px 0 10px!important; font-size:13px;} body.login .member > a,body.login .member .btn-primary{width:100%!important; min-width:0; height:50px;} body.login #login_page_section .form > h2{margin-bottom:18px!important;} body.login #login_page_section .form > h2::after{font-size:26px;} body.login #login_page_section form.forgot button,body.login #login_page_section .btn-block{width:100%!important;} }