/* ========================================================== ABA_BRAND_V7_GLOBAL_SHELL_V1 GLOBAL FRONTEND SHELL Header: Elementor 536013 Footer: Elementor 536112 Source: Existing approved ABA Brand V7 Header/Footer rules. Scope: Applies only when those exact Elementor templates render. Does NOT style page-specific content. ========================================================== */ @font-face { font-family: "Elevance Sans"; src: url("../fonts/elevance/ElevanceSans-Light.otf") format("opentype"); font-style: normal; font-weight: 300; font-display: swap; } @font-face { font-family: "Elevance Sans"; src: url("../fonts/elevance/ElevanceSans-Regular.otf") format("opentype"); font-style: normal; font-weight: 400; font-display: swap; } @font-face { font-family: "Elevance Sans"; src: url("../fonts/elevance/ElevanceSans-Medium.otf") format("opentype"); font-style: normal; font-weight: 500; font-display: swap; } @font-face { font-family: "Elevance Sans"; src: url("../fonts/elevance/ElevanceSans-Bold.otf") format("opentype"); font-style: normal; font-weight: 700; font-display: swap; } :root { --aba-brand-blue: #00D6FA; --aba-brand-salmon: #FB756A; --aba-brand-cream: #F7E0BE; --aba-brand-charcoal: #2E2E2E; --aba-brand-white: #FFFFFF; --aba-font-family: "Elevance Sans", sans-serif; --aba-font-weight-light: 300; --aba-font-weight-regular: 400; --aba-font-weight-medium: 500; --aba-font-weight-bold: 700; } /* ========================================================== GLOBAL APPROVED HEADER ========================================================== */ /* ========================================================== ABA_BRAND_V7_HEADER_APPROVED PAGE 800 ? APPROVED HEADER CANARY Header template: Elementor 536013 Approved visual state: - Elevance navigation typography - ABA Charcoal functional text/icons - ABA Blue submenu arrows - ABA Salmon active accent + cart badge - Official horizontal ABA Blue logo - Desktop logo: 150px inside 180px reserved footprint - Existing approved mobile logo treatment preserved - Account uses isolated ABA Charcoal SVG derivative No Elementor data or header structure is modified. ========================================================== */ /* ---------------------------------------------------------- MAIN NAVIGATION ---------------------------------------------------------- */ .elementor-536013 .elementor-element.elementor-element-25972587 .elementor-nav-menu--main .elementor-item { font-family: var(--aba-font-family); font-weight: var(--aba-font-weight-medium); color: var(--aba-brand-charcoal); fill: var(--aba-brand-charcoal); } .elementor-536013 .elementor-element.elementor-element-25972587 .elementor-nav-menu--main .elementor-item:hover, .elementor-536013 .elementor-element.elementor-element-25972587 .elementor-nav-menu--main .elementor-item:focus, .elementor-536013 .elementor-element.elementor-element-25972587 .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-536013 .elementor-element.elementor-element-25972587 .elementor-nav-menu--main .elementor-item.highlighted { color: var(--aba-brand-charcoal); fill: var(--aba-brand-charcoal); } /* Active / hover accent */ .elementor-536013 .elementor-element.elementor-element-25972587 .elementor-nav-menu li > a::after { border-color: var(--aba-brand-salmon); } /* ABA Blue submenu arrows */ .elementor-536013 .elementor-element.elementor-element-25972587 .sub-arrow svg { fill: var(--aba-brand-blue) !important; } /* ---------------------------------------------------------- DROPDOWN + MOBILE NAVIGATION ---------------------------------------------------------- */ .elementor-536013 .elementor-element.elementor-element-25972587 .elementor-nav-menu > li ul.sub-menu { background-color: var(--aba-brand-white) !important; } /* * Legacy CSS contains competing !important declarations. * These !important declarations are therefore intentional. */ .elementor-536013 .elementor-element.elementor-element-25972587 .elementor-nav-menu--dropdown > .elementor-nav-menu > li > .elementor-item { font-family: var(--aba-font-family) !important; font-weight: var(--aba-font-weight-medium) !important; color: var(--aba-brand-charcoal) !important; fill: var(--aba-brand-charcoal) !important; } .elementor-536013 .elementor-element.elementor-element-25972587 .elementor-nav-menu--dropdown > .elementor-nav-menu > li > .elementor-item:hover, .elementor-536013 .elementor-element.elementor-element-25972587 .elementor-nav-menu--dropdown > .elementor-nav-menu > li > .elementor-item:focus, .elementor-536013 .elementor-element.elementor-element-25972587 .elementor-nav-menu--dropdown > .elementor-nav-menu > li > .elementor-item.elementor-item-active { color: var(--aba-brand-charcoal) !important; fill: var(--aba-brand-charcoal) !important; background-color: var(--aba-brand-white) !important; } .elementor-536013 .elementor-element.elementor-element-25972587 .elementor-nav-menu--dropdown .elementor-sub-item, .elementor-536013 .elementor-element.elementor-element-25972587 .elementor-nav-menu > li ul.sub-menu li a { font-family: var(--aba-font-family) !important; font-weight: var(--aba-font-weight-regular) !important; color: var(--aba-brand-charcoal) !important; fill: var(--aba-brand-charcoal) !important; } /* Mobile hamburger */ .elementor-536013 .elementor-element.elementor-element-25972587 .elementor-menu-toggle { color: var(--aba-brand-charcoal); fill: var(--aba-brand-charcoal); } .elementor-536013 .elementor-element.elementor-element-25972587 .elementor-menu-toggle svg { fill: var(--aba-brand-charcoal); } /* ---------------------------------------------------------- OFFICIAL ABA LOGO ---------------------------------------------------------- */ /* * Base desktop widget image treatment. * Final desktop footprint is defined below at >=768px. */ .elementor-536013 .elementor-element.elementor-element-aba8e66 img { content: url("../images/brand-v7/aba-logo-horizontal-blue-v7.png"); width: 100% !important; height: 91px !important; object-fit: contain; object-position: left center; } /* * Approved mobile treatment remains exactly as tested. */ .elementor-536013 .elementor-element.elementor-element-46d85a7 img { content: url("../images/brand-v7/aba-logo-horizontal-blue-v7.png"); width: 100% !important; height: 75px !important; object-fit: contain; object-position: left center; } /* Approved desktop logo geometry */ @media (min-width: 768px) { .elementor-536013 .elementor-element.elementor-element-aba8e66 { width: 180px !important; max-width: 180px !important; flex: 0 0 180px !important; height: 91px !important; } .elementor-536013 .elementor-element.elementor-element-aba8e66 .elementor-widget-container { width: 180px !important; height: 91px !important; display: flex; align-items: center; justify-content: flex-start; } .elementor-536013 .elementor-element.elementor-element-aba8e66 img { width: 150px !important; max-width: 150px !important; height: auto !important; max-height: 50px !important; object-fit: contain; object-position: left center; } } /* ---------------------------------------------------------- ACCOUNT ---------------------------------------------------------- */ .elementor-536013 .elementor-element.elementor-element-76a4f203 .user_profile_dd a { color: var(--aba-brand-charcoal) !important; } .elementor-536013 .elementor-element.elementor-element-76a4f203 .user_profile_dd img { content: url("../images/brand-v7/aba-account-icon-charcoal-v7.svg"); } /* ---------------------------------------------------------- CART ---------------------------------------------------------- */ .elementor-536013 .elementor-element.elementor-element-4af3d429 .elementor-menu-cart__toggle .elementor-button { color: var(--aba-brand-charcoal); fill: var(--aba-brand-charcoal); } .elementor-536013 .elementor-element.elementor-element-4af3d429 .elementor-menu-cart__toggle svg { fill: var(--aba-brand-charcoal); } .elementor-536013 .elementor-element.elementor-element-4af3d429 .elementor-menu-cart__toggle_button, .elementor-536013 .elementor-element.elementor-element-4af3d429 .elementor-button-icon, .elementor-536013 .elementor-element.elementor-element-4af3d429 .elementor-button-icon svg, .elementor-536013 .elementor-element.elementor-element-4af3d429 .elementor-button-icon svg path { color: var(--aba-brand-charcoal) !important; fill: var(--aba-brand-charcoal) !important; } /* Cart quantity badge */ .elementor-536013 .elementor-element.elementor-element-4af3d429 .elementor-button-icon-qty { background: var(--aba-brand-salmon) !important; color: var(--aba-brand-charcoal) !important; fill: var(--aba-brand-charcoal) !important; font-family: var(--aba-font-family) !important; font-weight: var(--aba-font-weight-bold) !important; } /* ---------------------------------------------------------- SEARCH ---------------------------------------------------------- */ .elementor-536013 .elementor-element.elementor-element-d9bc402 .elementor-search-form__toggle { color: var(--aba-brand-charcoal); } .elementor-536013 .elementor-element.elementor-element-d9bc402 .elementor-search-form__toggle svg { fill: var(--aba-brand-charcoal) !important; } /* ========================================================== GLOBAL APPROVED FOOTER ========================================================== */ /* ========================================================== ABA_BRAND_V7_FOOTER_APPROVED PAGE 800 ? APPROVED FOOTER CANARY Elementor Footer: 536112 Approved visual state: - Cream contact surface - Elevance typography - White form controls + ABA Blue focus - Modern ABA Blue CTA / Salmon interaction - Official Facebook + Instagram assets - ABA Charcoal closing bar - White legal/copyright copy - ABA Blue interaction accent - Mobile legal safe area for floating cart CF7 logic, Elementor data, links and layout structure remain untouched. ========================================================== */ /* ---------------------------------------------------------- CONTACT SURFACE ---------------------------------------------------------- */ .elementor-536112 .elementor-element.elementor-element-60d43024 { background-color: rgba(247, 224, 190, 0.24) !important; } /* ---------------------------------------------------------- FOOTER COPY ---------------------------------------------------------- */ .elementor-536112 .elementor-element.elementor-element-6d2420bd .elementor-heading-title { font-family: var(--aba-font-family) !important; font-weight: var(--aba-font-weight-light) !important; color: var(--aba-brand-charcoal) !important; } .elementor-536112 .elementor-element.elementor-element-c34896f .elementor-heading-title { font-family: var(--aba-font-family) !important; font-weight: var(--aba-font-weight-regular) !important; color: var(--aba-brand-charcoal) !important; } .elementor-536112 .elementor-element.elementor-element-53c0ed8d, .elementor-536112 .elementor-element.elementor-element-53c0ed8d p { font-family: var(--aba-font-family) !important; font-weight: var(--aba-font-weight-medium) !important; color: var(--aba-brand-charcoal) !important; } /* ---------------------------------------------------------- CF7 FORM ---------------------------------------------------------- */ .elementor-536112 .elementor-element.elementor-element-dbf808b .citaorient_form input:not([type="submit"]):not([type="checkbox"]), .elementor-536112 .elementor-element.elementor-element-dbf808b .citaorient_form select, .elementor-536112 .elementor-element.elementor-element-dbf808b .citaorient_form textarea { font-family: var(--aba-font-family) !important; font-weight: var(--aba-font-weight-regular) !important; color: var(--aba-brand-charcoal) !important; background-color: var(--aba-brand-white) !important; border: 1px solid rgba(46, 46, 46, 0.14) !important; box-shadow: 0 3px 16px rgba(46, 46, 46, 0.08) !important; } .elementor-536112 .elementor-element.elementor-element-dbf808b .citaorient_form input::placeholder, .elementor-536112 .elementor-element.elementor-element-dbf808b .citaorient_form textarea::placeholder { color: rgba(46, 46, 46, 0.64) !important; opacity: 1 !important; } .elementor-536112 .elementor-element.elementor-element-dbf808b .citaorient_form input:not([type="submit"]):not([type="checkbox"]):focus, .elementor-536112 .elementor-element.elementor-element-dbf808b .citaorient_form select:focus, .elementor-536112 .elementor-element.elementor-element-dbf808b .citaorient_form textarea:focus { outline: none !important; border-color: var(--aba-brand-blue) !important; box-shadow: 0 0 0 3px rgba(0, 214, 250, 0.18) !important; } .elementor-536112 .elementor-element.elementor-element-dbf808b .citaorient_form .termcheck { accent-color: var(--aba-brand-blue); } .elementor-536112 .elementor-element.elementor-element-dbf808b .citaorient_form .wpcf7-list-item-label { font-family: var(--aba-font-family) !important; font-weight: var(--aba-font-weight-regular) !important; color: var(--aba-brand-charcoal) !important; } .elementor-536112 .elementor-element.elementor-element-dbf808b .citaorient_form .wpcf7-list-item-label a { color: var(--aba-brand-charcoal) !important; text-decoration: underline !important; text-decoration-color: var(--aba-brand-blue) !important; } .elementor-536112 .elementor-element.elementor-element-dbf808b .citaorient_form .wpcf7-list-item-label a:hover { text-decoration-color: var(--aba-brand-salmon) !important; } .elementor-536112 .elementor-element.elementor-element-dbf808b .wpcf7-not-valid-tip { font-family: var(--aba-font-family) !important; color: var(--aba-brand-salmon) !important; } .elementor-536112 .elementor-element.elementor-element-dbf808b .wpcf7-response-output { font-family: var(--aba-font-family) !important; color: var(--aba-brand-charcoal) !important; } /* ---------------------------------------------------------- APPROVED CTA ---------------------------------------------------------- */ .elementor-536112 .elementor-element.elementor-element-dbf808b #gform_submit_button_12 { width: 160px !important; height: 50px !important; padding: 0 24px !important; border: 0 !important; border-radius: 10px !important; background: var(--aba-brand-blue) !important; color: var(--aba-brand-charcoal) !important; font-family: var(--aba-font-family) !important; font-size: 14px !important; font-weight: var(--aba-font-weight-bold) !important; line-height: 1 !important; text-transform: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; animation: none !important; box-shadow: 0 6px 16px rgba(46, 46, 46, 0.12) !important; transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease !important; } .elementor-536112 .elementor-element.elementor-element-dbf808b #gform_submit_button_12:hover { background: var(--aba-brand-salmon) !important; box-shadow: 0 8px 20px rgba(46, 46, 46, 0.16) !important; transform: translateY(-1px); } .elementor-536112 .elementor-element.elementor-element-dbf808b #gform_submit_button_12:focus-visible { background: var(--aba-brand-salmon) !important; outline: 3px solid rgba(0, 214, 250, 0.28) !important; outline-offset: 3px !important; } /* ---------------------------------------------------------- OFFICIAL SOCIAL ASSETS ---------------------------------------------------------- */ .elementor-536112 .elementor-element.elementor-element-61150217 a.elementor-social-icon[href*="facebook.com"], .elementor-536112 .elementor-element.elementor-element-61150217 a.elementor-social-icon[href*="instagram.com"] { position: relative !important; width: 56px !important; height: 56px !important; padding: 4px !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-sizing: border-box !important; } .elementor-536112 .elementor-element.elementor-element-61150217 a.elementor-social-icon[href*="facebook.com"] > i, .elementor-536112 .elementor-element.elementor-element-61150217 a.elementor-social-icon[href*="instagram.com"] > i, .elementor-536112 .elementor-element.elementor-element-61150217 a.elementor-social-icon[href*="facebook.com"] > svg, .elementor-536112 .elementor-element.elementor-element-61150217 a.elementor-social-icon[href*="instagram.com"] > svg { display: none !important; } .elementor-536112 .elementor-element.elementor-element-61150217 a.elementor-social-icon[href*="facebook.com"]::before, .elementor-536112 .elementor-element.elementor-element-61150217 a.elementor-social-icon[href*="instagram.com"]::before { content: "" !important; display: block !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: contain !important; } .elementor-536112 .elementor-element.elementor-element-61150217 a.elementor-social-icon[href*="facebook.com"]::before { width: 48px !important; height: 48px !important; flex: 0 0 48px !important; background-image: url("../images/brand-v7/social/facebook-logo-primary.png") !important; } .elementor-536112 .elementor-element.elementor-element-61150217 a.elementor-social-icon[href*="instagram.com"]::before { width: 42px !important; height: 42px !important; flex: 0 0 42px !important; background-image: url("../images/brand-v7/social/instagram-glyph-black.svg") !important; } .elementor-536112 .elementor-element.elementor-element-61150217 a.elementor-social-icon[href*="facebook.com"]:hover, .elementor-536112 .elementor-element.elementor-element-61150217 a.elementor-social-icon[href*="instagram.com"]:hover { background: transparent !important; transform: none !important; } .elementor-536112 .elementor-element.elementor-element-61150217 a.elementor-social-icon:focus-visible { outline: 2px solid var(--aba-brand-blue) !important; outline-offset: 3px !important; } /* ---------------------------------------------------------- CLOSING BAR ---------------------------------------------------------- */ .elementor-536112 .elementor-element.elementor-element-9658a35 { background-color: var(--aba-brand-charcoal) !important; } .elementor-536112 .elementor-element.elementor-element-52275438 .elementor-heading-title, .elementor-536112 .elementor-element.elementor-element-52275438 .elementor-heading-title a { font-family: var(--aba-font-family) !important; font-weight: var(--aba-font-weight-medium) !important; color: var(--aba-brand-white) !important; } .elementor-536112 .elementor-element.elementor-element-52275438 .elementor-heading-title a:hover, .elementor-536112 .elementor-element.elementor-element-52275438 .elementor-heading-title a:focus { color: var(--aba-brand-blue) !important; } .elementor-536112 .elementor-element.elementor-element-6ab8b01a .elementor-icon-list-text, .elementor-536112 .elementor-element.elementor-element-6ab8b01a .elementor-icon-list-item a { font-family: var(--aba-font-family) !important; font-weight: var(--aba-font-weight-regular) !important; color: var(--aba-brand-white) !important; } .elementor-536112 .elementor-element.elementor-element-6ab8b01a .elementor-icon-list-item a:hover .elementor-icon-list-text, .elementor-536112 .elementor-element.elementor-element-6ab8b01a .elementor-icon-list-item a:focus .elementor-icon-list-text { color: var(--aba-brand-blue) !important; text-decoration: underline !important; text-decoration-color: var(--aba-brand-blue) !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px; } /* ---------------------------------------------------------- MOBILE FLOATING-CART SAFE AREA ---------------------------------------------------------- */ @media (max-width: 767px) { .elementor-536112 .elementor-element.elementor-element-6ab8b01a { padding-right: 72px !important; padding-left: 8px !important; box-sizing: border-box !important; } .elementor-536112 .elementor-element.elementor-element-6ab8b01a .elementor-icon-list-items { justify-content: center !important; } } /* ========================================================== ABA_BRAND_V7_GLOBAL_TYPOGRAPHY_CANARY_V1 GLOBAL ELEVANCE TYPOGRAPHY DEFAULT Design principle: - Global rules are intentionally low specificity. - Existing page-specific V7 rules remain authoritative. - No colors, dimensions, spacing or layout changes. - Icon fonts and third-party logos are not targeted. ========================================================== */ /* ---------------------------------------------------------- DOCUMENT DEFAULT ---------------------------------------------------------- */ :where(body) { font-family: var(--aba-font-family); font-weight: var(--aba-font-weight-regular); } /* ---------------------------------------------------------- GENERAL COPY ---------------------------------------------------------- */ :where(body) :where( p, li, dt, dd, blockquote, address, figcaption, caption, td, th, label ) { font-family: var(--aba-font-family); } /* ---------------------------------------------------------- ELEMENTOR COPY ---------------------------------------------------------- */ .elementor :where( .elementor-widget-text-editor, .elementor-widget-text-editor p, .elementor-widget-text-editor li ) { font-family: var(--aba-font-family); } /* ---------------------------------------------------------- BRAND HEADING HIERARCHY H1 / H2 = Elevance Light H3-H6 = Elevance Medium ---------------------------------------------------------- */ :where(body) :where( h1, h2 ) { font-family: var(--aba-font-family); font-weight: var(--aba-font-weight-light); } :where(body) :where( h3, h4, h5, h6 ) { font-family: var(--aba-font-family); font-weight: var(--aba-font-weight-medium); } /* Elementor heading widgets */ .elementor :where( h1.elementor-heading-title, h2.elementor-heading-title ) { font-family: var(--aba-font-family); font-weight: var(--aba-font-weight-light); } .elementor :where( h3.elementor-heading-title, h4.elementor-heading-title, h5.elementor-heading-title, h6.elementor-heading-title ) { font-family: var(--aba-font-family); font-weight: var(--aba-font-weight-medium); } /* ---------------------------------------------------------- EMPHASIS ---------------------------------------------------------- */ :where(body) :where( strong, b ) { font-weight: var(--aba-font-weight-bold); } /* ---------------------------------------------------------- FORM CONTROLS Browsers do not consistently inherit the body typeface into native controls. ---------------------------------------------------------- */ :where(body) :where( button, input, select, textarea, optgroup ) { font-family: var(--aba-font-family); } /* ---------------------------------------------------------- WOOCOMMERCE TYPOGRAPHY DEFAULT Cart / Checkout / Product-specific rules already present in the main V7 stylesheet remain more specific. ---------------------------------------------------------- */ .woocommerce :where( p, li, label, td, th, button, input, select, textarea ) { font-family: var(--aba-font-family); } /* ---------------------------------------------------------- SAFETY Intentionally excluded from targeting: Font Awesome glyph classes, Elementor icon glyphs, SVG artwork, PayPal identity, Authorize.Net card artwork, ATH Movil artwork and other third-party visual identity. ---------------------------------------------------------- */