/* ========================================================== ABA_BRAND_V7_MYACCOUNT_CANARY_V1 WooCommerce logged-out account family. Branding only. Authentication/account behavior untouched. Authenticated account UI intentionally excluded from V1. ========================================================== */ /* ---------------------------------------------------------- ACCOUNT FAMILY TYPOGRAPHY / COLOR ---------------------------------------------------------- */ body:not(.logged-in).woocommerce-account .woocommerce, body:not(.logged-in).woocommerce-account .woocommerce p, body:not(.logged-in).woocommerce-account .woocommerce label, body:not(.logged-in).woocommerce-account .woocommerce input, body:not(.logged-in).woocommerce-account .woocommerce button, body:not(.logged-in).woocommerce-account .woocommerce select, body:not(.logged-in).woocommerce-account .woocommerce textarea, body:not(.logged-in).woocommerce-account .custom_text-login { font-family: var(--aba-font-family, "Elevance Sans", sans-serif) !important; } body:not(.logged-in).woocommerce-account .woocommerce, body:not(.logged-in).woocommerce-account .woocommerce p, body:not(.logged-in).woocommerce-account .woocommerce label, body:not(.logged-in).woocommerce-account .custom_text-login, body:not(.logged-in).woocommerce-account .custom_text-login p { color: var(--aba-brand-charcoal, #2E2E2E) !important; } body:not(.logged-in).woocommerce-account .woocommerce :is(h1, h2), body:not(.logged-in).woocommerce-account .custom_text-login h2, body:not(.logged-in).woocommerce-account #customer_login h2 { font-family: var(--aba-font-family, "Elevance Sans", sans-serif) !important; font-weight: var(--aba-font-weight-light, 300) !important; color: var(--aba-brand-charcoal, #2E2E2E) !important; } body:not(.logged-in).woocommerce-account .woocommerce :is(h3, h4, h5, h6) { font-family: var(--aba-font-family, "Elevance Sans", sans-serif) !important; font-weight: var(--aba-font-weight-medium, 500) !important; color: var(--aba-brand-charcoal, #2E2E2E) !important; } /* ---------------------------------------------------------- LINKS ---------------------------------------------------------- */ body:not(.logged-in).woocommerce-account .woocommerce a:not(.button) { color: var(--aba-brand-blue, #00D6FA) !important; } body:not(.logged-in).woocommerce-account .woocommerce a:not(.button):hover, body:not(.logged-in).woocommerce-account .woocommerce a:not(.button):focus { color: var(--aba-brand-salmon, #FB756A) !important; } /* ---------------------------------------------------------- LOGGED-OUT LOGIN / LOST PASSWORD FORMS ---------------------------------------------------------- */ body:not(.logged-in).woocommerce-account form.woocommerce-form-login, body:not(.logged-in).woocommerce-account form.lost_reset_password, body:not(.logged-in).woocommerce-account form.woocommerce-ResetPassword { max-width: 100%; box-sizing: border-box !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } body:not(.logged-in).woocommerce-account .woocommerce input.input-text, body:not(.logged-in).woocommerce-account .woocommerce input[type="text"], body:not(.logged-in).woocommerce-account .woocommerce input[type="email"], body:not(.logged-in).woocommerce-account .woocommerce input[type="password"], body:not(.logged-in).woocommerce-account .woocommerce input[type="tel"], body:not(.logged-in).woocommerce-account .woocommerce textarea, body:not(.logged-in).woocommerce-account .woocommerce select { max-width: 100% !important; box-sizing: border-box !important; background: #FFFFFF !important; color: var(--aba-brand-charcoal, #2E2E2E) !important; border: 1px solid rgba(46, 46, 46, 0.24) !important; border-radius: 8px !important; box-shadow: none !important; } body:not(.logged-in).woocommerce-account .woocommerce input.input-text:focus, body:not(.logged-in).woocommerce-account .woocommerce input[type="text"]:focus, body:not(.logged-in).woocommerce-account .woocommerce input[type="email"]:focus, body:not(.logged-in).woocommerce-account .woocommerce input[type="password"]:focus, body:not(.logged-in).woocommerce-account .woocommerce input[type="tel"]:focus, body:not(.logged-in).woocommerce-account .woocommerce textarea:focus, body:not(.logged-in).woocommerce-account .woocommerce select:focus { border-color: var(--aba-brand-blue, #00D6FA) !important; outline: 2px solid rgba(0, 214, 250, 0.14) !important; outline-offset: 1px !important; } /* ---------------------------------------------------------- ACCOUNT ACTIONS ---------------------------------------------------------- */ body:not(.logged-in).woocommerce-account .woocommerce button.button, body:not(.logged-in).woocommerce-account .woocommerce input.button, body:not(.logged-in).woocommerce-account .woocommerce a.button { background: var(--aba-brand-blue, #00D6FA) !important; border: 1px solid var(--aba-brand-blue, #00D6FA) !important; color: var(--aba-brand-white, #FFFFFF) !important; font-family: var(--aba-font-family, "Elevance Sans", sans-serif) !important; font-weight: var(--aba-font-weight-medium, 500) !important; border-radius: 8px !important; box-shadow: none !important; text-shadow: none !important; } body:not(.logged-in).woocommerce-account .woocommerce button.button:hover, body:not(.logged-in).woocommerce-account .woocommerce button.button:focus, body:not(.logged-in).woocommerce-account .woocommerce input.button:hover, body:not(.logged-in).woocommerce-account .woocommerce input.button:focus, body:not(.logged-in).woocommerce-account .woocommerce a.button:hover, body:not(.logged-in).woocommerce-account .woocommerce a.button:focus { background: var(--aba-brand-salmon, #FB756A) !important; border-color: var(--aba-brand-salmon, #FB756A) !important; color: var(--aba-brand-white, #FFFFFF) !important; } /* Keep checkbox semantics native. */ body:not(.logged-in).woocommerce-account .woocommerce input[type="checkbox"] { accent-color: var(--aba-brand-blue, #00D6FA); } /* ---------------------------------------------------------- LOGGED-IN ACCOUNT SURFACES Intentionally NOT styled in V1. Public canary is limited to logged-out login/reset surfaces. Authenticated navigation/content requires separate visual QA. ---------------------------------------------------------- */ /* ---------------------------------------------------------- MOBILE CONTAINMENT ---------------------------------------------------------- */ @media (max-width: 767px) { body:not(.logged-in).woocommerce-account .woocommerce, body:not(.logged-in).woocommerce-account .woocommerce form, body:not(.logged-in).woocommerce-account .woocommerce input, body:not(.logged-in).woocommerce-account .woocommerce select, body:not(.logged-in).woocommerce-account .woocommerce textarea, body:not(.logged-in).woocommerce-account .woocommerce-MyAccount-navigation, body:not(.logged-in).woocommerce-account .woocommerce-MyAccount-content { max-width: 100% !important; box-sizing: border-box !important; } body:not(.logged-in).woocommerce-account .woocommerce-MyAccount-navigation { width: 100% !important; } body:not(.logged-in).woocommerce-account .woocommerce-MyAccount-content { width: 100% !important; } } /* Shared contact/footer/search surfaces outside .woocommerce untouched. */ /* ========================================================== ABA_BRAND_V7_MYACCOUNT_AUTHENTICATED_V1B Authenticated WooCommerce My Account surfaces only. CSS-only branding adaptation. ========================================================== */ /* ---------------------------------------------------------- CORE TYPOGRAPHY / COPY ---------------------------------------------------------- */ body.logged-in.woocommerce-account .woocommerce, body.logged-in.woocommerce-account .woocommerce p, body.logged-in.woocommerce-account .woocommerce label, body.logged-in.woocommerce-account .woocommerce input, body.logged-in.woocommerce-account .woocommerce select, body.logged-in.woocommerce-account .woocommerce textarea, body.logged-in.woocommerce-account .woocommerce button, body.logged-in.woocommerce-account .woocommerce td, body.logged-in.woocommerce-account .woocommerce th, body.logged-in.woocommerce-account .woocommerce address, body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation { font-family: var(--aba-font-family, "Elevance Sans", sans-serif) !important; } body.logged-in.woocommerce-account .woocommerce, body.logged-in.woocommerce-account .woocommerce p, body.logged-in.woocommerce-account .woocommerce label, body.logged-in.woocommerce-account .woocommerce td, body.logged-in.woocommerce-account .woocommerce th, body.logged-in.woocommerce-account .woocommerce address { color: var(--aba-brand-charcoal, #2E2E2E) !important; } body.logged-in.woocommerce-account .woocommerce :is(h1, h2) { font-family: var(--aba-font-family, "Elevance Sans", sans-serif) !important; font-weight: var(--aba-font-weight-light, 300) !important; color: var(--aba-brand-charcoal, #2E2E2E) !important; } body.logged-in.woocommerce-account .woocommerce :is(h3, h4, h5, h6), body.logged-in.woocommerce-account .woocommerce legend { font-family: var(--aba-font-family, "Elevance Sans", sans-serif) !important; font-weight: var(--aba-font-weight-medium, 500) !important; color: var(--aba-brand-charcoal, #2E2E2E) !important; } /* ---------------------------------------------------------- LINKS ---------------------------------------------------------- */ body.logged-in.woocommerce-account .woocommerce-MyAccount-content a:not(.button), body.logged-in.woocommerce-account .woocommerce p a:not(.button), body.logged-in.woocommerce-account .woocommerce address a:not(.button) { color: var(--aba-brand-blue, #00D6FA) !important; } body.logged-in.woocommerce-account .woocommerce-MyAccount-content a:not(.button):hover, body.logged-in.woocommerce-account .woocommerce-MyAccount-content a:not(.button):focus, body.logged-in.woocommerce-account .woocommerce p a:not(.button):hover, body.logged-in.woocommerce-account .woocommerce p a:not(.button):focus { color: var(--aba-brand-salmon, #FB756A) !important; } /* ---------------------------------------------------------- ACCOUNT NAVIGATION ---------------------------------------------------------- */ body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation ul { padding: 0 !important; margin: 0 !important; } body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li { margin-bottom: 10px !important; } body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block !important; padding: 12px 14px !important; border: 1px solid rgba(46, 46, 46, 0.16) !important; border-radius: 8px !important; background: #FFFFFF !important; color: var(--aba-brand-charcoal, #2E2E2E) !important; font-family: var(--aba-font-family, "Elevance Sans", sans-serif) !important; font-weight: var(--aba-font-weight-medium, 500) !important; text-decoration: none !important; box-shadow: none !important; } body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li a:hover, body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li a:focus { border-color: var(--aba-brand-blue, #00D6FA) !important; background: rgba(0, 214, 250, 0.07) !important; color: var(--aba-brand-charcoal, #2E2E2E) !important; outline: 2px solid rgba(0, 214, 250, 0.14) !important; outline-offset: 1px !important; } body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { border-color: var(--aba-brand-salmon, #FB756A) !important; background: #FFFFFF !important; color: var(--aba-brand-charcoal, #2E2E2E) !important; } /* Remove legacy synthetic marker where present. */ body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a::before { content: none !important; } /* ---------------------------------------------------------- INPUTS / SELECTS ---------------------------------------------------------- */ body.logged-in.woocommerce-account .woocommerce input.input-text, body.logged-in.woocommerce-account .woocommerce input[type="text"], body.logged-in.woocommerce-account .woocommerce input[type="email"], body.logged-in.woocommerce-account .woocommerce input[type="password"], body.logged-in.woocommerce-account .woocommerce input[type="tel"], body.logged-in.woocommerce-account .woocommerce textarea, body.logged-in.woocommerce-account .woocommerce select, body.logged-in.woocommerce-account .woocommerce .select2-container .select2-selection { max-width: 100% !important; box-sizing: border-box !important; background: #FFFFFF !important; color: var(--aba-brand-charcoal, #2E2E2E) !important; border: 1px solid rgba(46, 46, 46, 0.24) !important; border-radius: 8px !important; box-shadow: none !important; } body.logged-in.woocommerce-account .woocommerce input.input-text:focus, body.logged-in.woocommerce-account .woocommerce input[type="text"]:focus, body.logged-in.woocommerce-account .woocommerce input[type="email"]:focus, body.logged-in.woocommerce-account .woocommerce input[type="password"]:focus, body.logged-in.woocommerce-account .woocommerce input[type="tel"]:focus, body.logged-in.woocommerce-account .woocommerce textarea:focus, body.logged-in.woocommerce-account .woocommerce select:focus, body.logged-in.woocommerce-account .woocommerce .select2-container--focus .select2-selection, body.logged-in.woocommerce-account .woocommerce .select2-container--open .select2-selection { border-color: var(--aba-brand-blue, #00D6FA) !important; outline: 2px solid rgba(0, 214, 250, 0.14) !important; outline-offset: 1px !important; } body.logged-in.woocommerce-account .woocommerce input[type="checkbox"], body.logged-in.woocommerce-account .woocommerce input[type="radio"] { accent-color: var(--aba-brand-blue, #00D6FA); } /* ---------------------------------------------------------- PRIMARY ACCOUNT ACTIONS Keep destructive semantic actions out of the brand override. ---------------------------------------------------------- */ body.logged-in.woocommerce-account .woocommerce button.button:not(.delete):not(.cancel), body.logged-in.woocommerce-account .woocommerce input.button:not(.delete):not(.cancel), body.logged-in.woocommerce-account .woocommerce a.button:not(.delete):not(.cancel) { background: var(--aba-brand-blue, #00D6FA) !important; border: 1px solid var(--aba-brand-blue, #00D6FA) !important; color: var(--aba-brand-white, #FFFFFF) !important; font-family: var(--aba-font-family, "Elevance Sans", sans-serif) !important; font-weight: var(--aba-font-weight-medium, 500) !important; border-radius: 8px !important; box-shadow: none !important; text-shadow: none !important; } body.logged-in.woocommerce-account .woocommerce button.button:not(.delete):not(.cancel):hover, body.logged-in.woocommerce-account .woocommerce button.button:not(.delete):not(.cancel):focus, body.logged-in.woocommerce-account .woocommerce input.button:not(.delete):not(.cancel):hover, body.logged-in.woocommerce-account .woocommerce input.button:not(.delete):not(.cancel):focus, body.logged-in.woocommerce-account .woocommerce a.button:not(.delete):not(.cancel):hover, body.logged-in.woocommerce-account .woocommerce a.button:not(.delete):not(.cancel):focus { background: var(--aba-brand-salmon, #FB756A) !important; border-color: var(--aba-brand-salmon, #FB756A) !important; color: var(--aba-brand-white, #FFFFFF) !important; } /* ---------------------------------------------------------- TABLES / ADDRESS CONTENT ---------------------------------------------------------- */ body.logged-in.woocommerce-account .woocommerce-MyAccount-content table { max-width: 100% !important; color: var(--aba-brand-charcoal, #2E2E2E) !important; } body.logged-in.woocommerce-account .woocommerce-MyAccount-content table th { font-weight: var(--aba-font-weight-medium, 500) !important; } body.logged-in.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title h2, body.logged-in.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title h3 { color: var(--aba-brand-charcoal, #2E2E2E) !important; } /* Notices keep WooCommerce semantic background/status colors. Only typography/layout is normalized. */ body.logged-in.woocommerce-account .woocommerce-error, body.logged-in.woocommerce-account .woocommerce-info, body.logged-in.woocommerce-account .woocommerce-message { font-family: var(--aba-font-family, "Elevance Sans", sans-serif) !important; } /* ---------------------------------------------------------- MOBILE REFINEMENTS ---------------------------------------------------------- */ @media (max-width: 767px) { body.logged-in.woocommerce-account .woocommerce, body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation, body.logged-in.woocommerce-account .woocommerce-MyAccount-content, body.logged-in.woocommerce-account .woocommerce form, body.logged-in.woocommerce-account .woocommerce table { max-width: 100% !important; box-sizing: border-box !important; } body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation, body.logged-in.woocommerce-account .woocommerce-MyAccount-content { width: 100% !important; } } @media (max-width: 480px) { /* Account Details: prevent cramped two-column name row. */ body.logged-in.woocommerce-account .woocommerce-EditAccountForm .form-row-first, body.logged-in.woocommerce-account .woocommerce-EditAccountForm .form-row-last { float: none !important; width: 100% !important; } /* Orders / account notices: action beneath message on narrow screens. */ body.logged-in.woocommerce-account .woocommerce-info .button, body.logged-in.woocommerce-account .woocommerce-message .button, body.logged-in.woocommerce-account .woocommerce-error .button { float: none !important; display: block !important; width: 100% !important; margin: 12px 0 0 !important; } body.logged-in.woocommerce-account .woocommerce-info, body.logged-in.woocommerce-account .woocommerce-message, body.logged-in.woocommerce-account .woocommerce-error { display: block !important; } } /* Header, footer, checkout/cart, and public-auth selectors untouched. */ /* ========================================================== ABA_BRAND_V7_MYACCOUNT_NAV_POLISH_V1C Authenticated My Account sidebar navigation only. Compact, premium Brand V7 treatment. ========================================================== */ /* Tighten the vertical rhythm without changing nav layout. */ body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation ul { margin: 0 !important; padding: 0 !important; } body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0 0 7px !important; padding: 0 !important; border: 0 !important; } body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { margin-bottom: 0 !important; } /* Normal state */ body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li a { display: flex !important; align-items: center !important; min-height: 40px !important; padding: 9px 14px !important; box-sizing: border-box !important; border: 1px solid rgba(46, 46, 46, 0.18) !important; border-radius: 9px !important; background: #FFFFFF !important; color: var(--aba-brand-charcoal, #2E2E2E) !important; font-family: var(--aba-font-family, "Elevance Sans", sans-serif) !important; font-weight: var(--aba-font-weight-medium, 500) !important; line-height: 1.2 !important; text-decoration: none !important; box-shadow: 0 1px 2px rgba(46, 46, 46, 0.035) !important; transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease !important; } /* Hover / keyboard focus */ body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li:not(.is-active) a:hover, body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li:not(.is-active) a:focus-visible { background: rgba(0, 214, 250, 0.065) !important; border-color: var(--aba-brand-blue, #00D6FA) !important; color: var(--aba-brand-blue, #00D6FA) !important; box-shadow: 0 0 0 2px rgba(0, 214, 250, 0.10) !important; outline: none !important; } /* Active state: clearly selected, not merely outlined. */ body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a, body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a:hover, body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a:focus, body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a:focus-visible { background: var(--aba-brand-charcoal, #2E2E2E) !important; border-color: var(--aba-brand-charcoal, #2E2E2E) !important; color: var(--aba-brand-white, #FFFFFF) !important; box-shadow: none !important; outline: none !important; } /* Keep legacy synthetic markers out of the active treatment. */ body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li a::before { content: none !important; } /* Preserve the full-width stacked mobile/tablet behavior. */ @media (max-width: 1024px) { body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li a { width: 100% !important; } } /* No account-content, form, table, header, footer, cart, or checkout selectors. */