/* ========================================================================== ALLOut Security · Portal login v4: the Customer and Partner login (handoff "ALLOut Portal Login") Loads after portal-login-v3.css on the login page. Every rule needs a portal class: - #login.allout-login--portal (.allout-login--customer / --partner), set by wp-client/form/login/common.php - body.allout-login-portal, set by Allout_Portal_Login::add_portal_body_class() so the intermediary ("How are you logging in?", out of scope) keeps v3's look untouched. One template, two accents: Customer navy, Partner red. Radius 2px everywhere. @author ALLOut Security https://alloutsecurity.com ========================================================================== */ /* ---- The accents ---------------------------------------------------------- */ #login.allout-login--customer { --v4-acc: #081634; --v4-acc-hover: #14224a; --v4-box: #eef1f8; --v4-box-edge: #d6deec; } #login.allout-login--partner { --v4-acc: #e8323f; --v4-acc-hover: #d11f2c; --v4-box: #eef1f8; --v4-box-edge: #d6deec; } /* the portal box: the same grey as the Customer Portal's */ /* -------------------------------------------------------------------------- 1. The page around the card: heading, register line, register button -------------------------------------------------------------------------- */ body.allout-login-portal #Content .column_attr > h2 { margin: 0 0 10px !important; padding: 0; font-family: 'Poppins', system-ui, sans-serif !important; font-size: 34px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: 0; color: #081634 !important; text-transform: none; } body.allout-login-portal #Content .column_attr > h2 + p { margin: 0 0 10px !important; font-family: 'Mulish', system-ui, sans-serif; font-size: 16px; line-height: 2; color: #3e4658; } body.allout-login-portal #Content .column_button .button_align { margin: 0 !important; line-height: 0; } body.allout-login-portal #Content a.button.createaccount { display: inline-flex !important; align-items: center; gap: 6px; min-width: 0 !important; height: auto !important; margin: 0 !important; padding: 6px 12px !important; background-color: #081634 !important; border: 1.5px solid #081634 !important; border-radius: 2px !important; box-shadow: none !important; color: #fff !important; font-family: 'Mulish', system-ui, sans-serif !important; font-size: 11px !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: .02em; text-transform: uppercase; } body.allout-login-portal #Content a.button.createaccount .button_icon { display: inline-flex !important; align-items: center; float: none !important; position: static !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; } body.allout-login-portal #Content a.button.createaccount .button_icon i { margin: 0 !important; font-size: 12px !important; line-height: 1 !important; color: #fff !important; } body.allout-login-portal #Content a.button.createaccount .button_label { float: none !important; margin: 0 !important; padding: 0 !important; line-height: 1.2 !important; } /* the design has no divider between the button and the card */ body.allout-login-portal #Content .column_divider_2 { display: none !important; } /* -------------------------------------------------------------------------- 2. The card: 480px, 3px top edge in the accent, footer = the Note -------------------------------------------------------------------------- */ .main_loginform_block.allout-login--portal { max-width: 480px !important; margin: 24px auto 0 !important; border: 0 !important; border-radius: 0 !important; overflow: visible !important; background: none !important; } #login.allout-login--portal { --pad: 20px; box-sizing: border-box; padding: 20px !important; font-family: 'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif; color: #3e4658; background: #fff !important; border: 1px solid #d2d8e4 !important; border-top: 3px solid var(--v4-acc) !important; border-radius: 2px !important; box-shadow: 0 6px 18px rgba(14, 28, 64, .10) !important; overflow: hidden; } /* -------------------------------------------------------------------------- 2b. The card header (handoff "Portal Login: card header style"), in place of the portal box. ALLOut Login > Look and preview > Login card header style: - title (15a): the portal's name, its line, a divider under them; - tabs-segmented (16b, the default): a two-item switch, Customer Portal first, then the line. Both keep the card's 3px accent top edge. The header starts at the card's top edge (it pulls up into the card's padding); after the error banner, that pull meets the banner's 20px and the header starts right under it. -------------------------------------------------------------------------- */ #login.allout-login--portal .allout-plm-header { margin: calc(var(--pad) * -1) 0 0; padding: 0; font-family: 'Mulish', system-ui, sans-serif; text-align: left; } #login.allout-login--portal .allout-plm-header p.allout-plm-header__desc { margin: 0 !important; padding: 0; font-size: 14px; font-weight: 400; line-height: 1.55; color: #14224a; text-wrap: pretty; } #login.allout-login--portal .allout-plm-header__desc b, #login.allout-login--portal .allout-plm-header__desc u { font-weight: 700; color: #081634; text-decoration: none; } #login.allout-login--portal .allout-plm-header__desc a { color: #e8323f; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } /* 15a Title only: no icon, no box; the divider sits inside the card's 20px sides */ #login.allout-login--portal .allout-plm-header--title { display: flex; flex-direction: column; gap: 8px; padding: 26px 0 20px; border-bottom: 1px solid #e3e7ef; } #login.allout-login--portal .allout-plm-header--title h2.allout-plm-header__title { display: flex; align-items: center; gap: 10px; margin: 0 !important; padding: 0 !important; font-family: 'Poppins', system-ui, sans-serif !important; font-size: 26px !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: 0 !important; text-transform: none !important; color: #081634 !important; } /* a name switched off on Look and preview: gone from the screen, still read out by screen readers */ #login.allout-login--portal .allout-plm-sr { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } /* the portal's icon before the name: just the line drawing, the size of the title, in the portal's colour */ #login.allout-login--portal .allout-plm-header__icon { display: block; flex: none; width: 24px; height: 24px; color: var(--v4-acc); } /* 16b Segmented switch: a pill track, the page's own portal the white pill, the other a link */ #login.allout-login--portal .allout-plm-header--tabs-segmented { padding: 20px 0 0; } #login.allout-login--portal .allout-plm-switch { display: block; margin: 0; padding: 0; } #login.allout-login--portal .allout-plm-switch__track { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px; padding: 4px; background: #eff1f6; border-radius: 999px; } #login.allout-login--portal .allout-plm-switch__item { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; margin: 0; padding: 10px 12px; border-radius: 999px; font-family: 'Poppins', system-ui, sans-serif; font-size: 15px; line-height: 1.3; text-align: center; text-decoration: none; box-shadow: none; } #login.allout-login--portal .allout-plm-switch__label { min-width: 0; } #login.allout-login--portal .allout-plm-switch__icon { display: block; flex: none; width: 18px; height: 18px; } #login.allout-login--portal .allout-plm-switch__item.is-active { background: #fff; box-shadow: 0 1px 2px rgba(14, 28, 64, .10), 0 1px 3px rgba(14, 28, 64, .06); font-weight: 700; color: #081634; } #login.allout-login--portal .allout-plm-switch__item.is-active .allout-plm-switch__icon { color: var(--v4-acc); } #login.allout-login--portal a.allout-plm-switch__item { background: transparent; font-weight: 600; color: #5a6379; } #login.allout-login--portal a.allout-plm-switch__item:hover { background: transparent; color: #081634; text-decoration: none; } #login.allout-login--portal a.allout-plm-switch__item:focus-visible { outline: 2px solid #2b4fc9; outline-offset: 2px; } #login.allout-login--portal .allout-plm-header--tabs-segmented p.allout-plm-header__desc { padding: 24px 0 0; margin-bottom: -5px !important; } /* a box under the header (Lost Password's "enter your email" line) */ #login.allout-login--portal .allout-plm-header + .allout-plm { margin-top: 14px; } /* -------------------------------------------------------------------------- 3. The portal box: title and icon on one line, the line under it (no longer on the login card: the header replaces it; Lost Password's info line keeps this look) -------------------------------------------------------------------------- */ #login.allout-login--portal .wpc_form_login .allout-plm--note.allout-plm--look-soft { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 3px; align-items: center; position: static; margin: 0; padding: 14px; background: var(--v4-box); border: 1px solid var(--v4-box-edge); border-radius: 2px; font-size: 13px; line-height: 1.5; color: #3e4658; } #login.allout-login--portal .wpc_form_login .allout-plm--note.allout-plm--look-soft .allout-plm__body { display: contents; } #login.allout-login--portal .wpc_form_login .allout-plm--note.allout-plm--look-soft .allout-plm__icon { grid-column: 2; grid-row: 1; position: static; width: 16px; height: 16px; margin: 0; color: var(--v4-acc); } #login.allout-login--portal .wpc_form_login .allout-plm--note.allout-plm--look-soft .allout-plm__icon svg { width: 16px; height: 16px; } #login.allout-login--portal .wpc_form_login .allout-plm--note.allout-plm--look-soft .allout-plm__title { grid-column: 1; grid-row: 1; margin: 0 !important; padding: 0; font-size: 15px; font-weight: 800; line-height: 1.35; color: #081634; } #login.allout-login--portal .wpc_form_login .allout-plm--note.allout-plm--look-soft .allout-plm__text { grid-column: 1 / -1; grid-row: 2; padding: 0; font-size: 13px; line-height: 1.5; color: #3e4658; } #login.allout-login--portal .wpc_form_login .allout-plm--note b, #login.allout-login--portal .wpc_form_login .allout-plm--note u { color: #081634; } /* A box under another (Lost Password's info line under the portal box) sits 14px below it. */ #login.allout-login--portal .wpc_form_login .allout-plm + .allout-plm { margin-top: 14px; border-radius: 2px; } /* -------------------------------------------------------------------------- 3b. The error: a banner across the top of the card (handoff "Portal Login: error message") Every error on a portal (the server's, and the privacy one the footer script makes) is this banner: under the 3px accent line, above the portal box, flush with the card's edges. #portal-error (the error box's id) outranks v3's inline-box rules without !important. Red stays on the icon and the tint; the title and the button are navy. -------------------------------------------------------------------------- */ #login.allout-login--portal #portal-error { display: flex; flex-direction: row; gap: 10px; align-items: flex-start; position: static; box-sizing: border-box; margin: calc(var(--pad) * -1) calc(var(--pad) * -1) var(--pad); padding: 14px 20px; background: #fff1f2; border: 0; border-bottom: 1px solid #ffe0e2; border-radius: 0; font-family: 'Mulish', system-ui, sans-serif; text-align: left; } /* the page focuses the message after a failed login (for screen readers): never an outline or ring on it */ #login.allout-login--portal #portal-error:focus, #login.allout-login--portal #portal-error:focus-visible { outline: none !important; box-shadow: none !important; } /* the portal box right under the banner: the card's 20px gap, not the stacked boxes' 14px */ #login.allout-login--portal #portal-error + .allout-plm { margin-top: 0; } /* the alert-circle icon, 18px, lined up with the title's first line */ #login.allout-login--portal #portal-error .allout-plm__icon { display: block; position: static; flex: none; width: 18px; height: 18px; margin: 1px 0 0; padding: 0; background: none; border: 0; border-radius: 0; color: #e8323f; } #login.allout-login--portal #portal-error .allout-plm__icon svg { display: block; width: 18px; height: 18px; } /* the text column: title, body, button */ #login.allout-login--portal #portal-error .allout-plm__body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; padding: 0; } #login.allout-login--portal #portal-error .allout-plm__title { margin: 0 !important; padding: 0; font-family: inherit; font-size: 14px; font-weight: 800; line-height: 1.4; color: #081634; } #login.allout-login--portal #portal-error .allout-plm__text { margin: 0; padding: 0; font-size: 13px; font-weight: 400; line-height: 1.5; color: #3e4658; } #login.allout-login--portal #portal-error .allout-plm__text .allout-plm__para + .allout-plm__para { margin-top: 6px; } #login.allout-login--portal #portal-error b, #login.allout-login--portal #portal-error u { font-weight: 700; color: #081634; } #login.allout-login--portal #portal-error .allout-plm__text a { color: #081634; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } #login.allout-login--portal #portal-error .allout-plm__text a:hover { color: #14224a; } #login.allout-login--portal #portal-error .allout-plm__text a:focus-visible { outline: 2px solid #2b4fc9; outline-offset: 2px; } /* the button: navy, 2px corners, label and a 14px arrow */ #login.allout-login--portal #portal-error .allout-plm__actions { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-start; margin: 8px 0 0; padding: 0; } #login.allout-login--portal #portal-error .allout-plm__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 0; margin: 0; padding: 8px 14px; background: #081634; border: 0; border-radius: 2px; box-shadow: none; font-family: inherit; font-size: 12px; font-weight: 800; line-height: 1.4; letter-spacing: 0; color: #fff; text-decoration: none; } #login.allout-login--portal #portal-error .allout-plm__btn::after { width: 14px; height: 14px; transition: none; } #login.allout-login--portal #portal-error .allout-plm__btn:hover { background: #14224a; color: #fff; text-decoration: none; } #login.allout-login--portal #portal-error .allout-plm__btn:hover::after { transform: none; } #login.allout-login--portal #portal-error .allout-plm__btn:focus-visible { outline: 2px solid #2b4fc9; outline-offset: 2px; border-radius: 2px; } /* the close (×): dismisses the message (ltl-footer-guards.php). Betheme styles every