/* font-size px to rem */ /* margin and padding px to rem conv */ /* line height px to rem conv */ /* letter space px to rem conv */ /* media query px to rem Conv */ /* stateFarm background color */ /* #701611 */ /* #a11b13 */ /* #d62311 */ /* #fc2929 */ /* #EF756c */ /* #2d2929 */ /* #403c3c */ /* #767676 */ /* #7f7e7d */ /* #acabab */ /* #e4e3e3 */ /* #f4f3f3 */ /* F7F7FA*/ /*CDCDD3 */ /* #ffffff */ /* #b39462 */ /* #debc85 */ /* #f2ddbb */ /* #f7f0e4 */ /*#996100*/ /*#da8a00;*/ /*#f1aa1b;*/ /*#f1c479;*/ /*#1a7558;*/ /*#239873;*/ /*#0eb275;*/ /* #85d0ac;*/ /* stateFarm text btn color */ /* #ffffff */ /* #d62311 */ /* #d62311 */ /* #a11b13 */ /* #701611 */ /* #2d2929 */ /* #403c3c */ /* #767676 */ /* Rate table error and warning msg */ /* #a11b13 */ /*#f1aa1b;*/ /*#da8a00;*/ /* #ffffff */ /* #a11b13 */ /*#faedef*/ /* #fc2929 */ /* input realted color */ /* #a11b13 */ /* #0a41c5 */ /* divider color */ /* #e4e3e3 */ /* link and link with super script realted color */ /* #d62311 */ /* #a11b13 */ /* #a11b13 */ /* #701611 */ /* button related color */ /* #d62311 */ /* #ffffff */ /* #d62311 */ /* #a11b13 */ /* #701611 */ /* #701611 */ /* #ffffff */ /* Text color */ /* 0c2074 */ /* #2C2C2C */ /* #2d2929 */ /* 323232*/ /* #403c3c */ /* #555555 */ /* #767676 */ /* #f7f0e4 */ /* #ffffff */ /* #000000 */ /* #174085 */ /* #007CBE*/ /* #6E6E6E */ /* #e4e3e3 */ /*CDCDD3 */ /* #BE1324 */ /* #d62311 */ /* #a11b13 */ /* #701611 */ /* statefarm font weight */ /* Marker */ /* bullet styling*/ /* #403c3c */ /* Gradiant*/ /* Border color and theme and type*/ /*CDCDD3 */ /* #0073a8 */ /* #0a41c5 */ /* #cccccc */ /*Animation ease for timing */ /*Media query for tablet mobile and desktop */ /* Base root with rem calculation*/ /* font-size px to rem */ /* margin and padding px to rem conv */ /* line height px to rem conv */ /* letter space px to rem conv */ /* media query px to rem Conv */ /* Font family*/ /* stateFarm background color */ /* #701611 */ /* #a11b13 */ /* #d62311 */ /* #fc2929 */ /* #EF756c */ /* #2d2929 */ /* #212121 */ /* #403c3c */ /* #767676 */ /* #7f7e7d */ /* #acabab */ /* #e4e3e3 */ /* #f4f3f3 */ /* F7F7FA*/ /*CDCDD3 */ /* #ffffff */ /* #b39462 */ /* #debc85 */ /* #f2ddbb */ /* #f7f0e4 */ /*#996100*/ /*#da8a00;*/ /*#f1aa1b;*/ /*#f1c479;*/ /*#1a7558;*/ /*#239873;*/ /*#0eb275;*/ /* #85d0ac;*/ /* stateFarm text btn color */ /* #ffffff */ /* #d62311 */ /* #d62311 */ /* #a11b13 */ /* #701611 */ /* #2d2929 */ /* #403c3c */ /* #767676 */ /* Rate table error and warning msg */ /* #a11b13 */ /*#f1aa1b;*/ /*#da8a00;*/ /* #ffffff */ /* #a11b13 */ /*#faedef*/ /* #fc2929 */ /* input realted color */ /* #a11b13 */ /* #0a41c5 */ /* divider color */ /* #e4e3e3 */ /* link and link with super script realted color */ /* #d62311 */ /* #a11b13 */ /* #a11b13 */ /* #701611 */ /* button related color */ /* #d62311 */ /* #ffffff */ /* #d62311 */ /* #a11b13 */ /* #701611 */ /* #701611 */ /* #ffffff */ /* Text color */ /* 0c2074 */ /* #2C2C2C */ /* #2d2929 */ /* #212121 */ /* 323232*/ /* #403c3c */ /* #555555 */ /* #767676 */ /* #f7f0e4 */ /* #ffffff */ /* #000000 */ /* #174085 */ /* #007CBE*/ /* #6E6E6E */ /* #e4e3e3 */ /*CDCDD3 */ /* #BE1324 */ /* #d62311 */ /* #a11b13 */ /* #701611 */ /* statefarm font weight */ /* Marker */ /* bullet styling*/ /* #212121 */ /* Gradiant*/ /* Border color and theme and type*/ /*CDCDD3 */ /* #0073a8 */ /* #0a41c5 */ /* #cccccc */ /*Animation ease for timing */ /*Media query for tablet mobile and desktop */ /*Table header*/ /*#eeeded*/ /*#f7f0e4*/ /* Font Declarations - REMOVE AFTER RECONCILLIATION OF GLOBAL STYLESHEET (Q4 2020?) */ /* Menu Open - Sets to a "scroll locked" fixed position */ html.scroll-locked { overflow: hidden; } html.scroll-locked body { overflow: hidden; bottom: 0; inset: 0; left: 0; position: fixed; right: 0; top: 0; } /* */ /* CSS Z-Index Conflicts */ .alert { z-index: 1112; } .headerIpar { z-index: 1111; } .banner { z-index: 1 !important; position: relative; } .breadcrumb { z-index: 1; } /* AEM Component Container */ .globalNavigation { z-index: 2; position: relative; } /* General */ .header { zoom: 1; } .header::before { content: ""; display: table; } .header::after { content: ""; display: table; clear: both; } .navigation { position: relative; /* .menu-search-form { margin: 0; padding: $token-space-28 $token-space-16 $token-space-16 $token-space-16; width: 100%; } .menu-search-label { width: 100%; margin: 0; padding: 0; } .menu-search-field { position: relative; text-align: left; display: none; } .menu-search-input { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color:$token-color-primary-white; border: thin solid #858585; -webkit-border-radius: $token-space-4; -moz-border-radius: $token-space-4; border-radius: $token-space-4; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: $token-space-16; font-weight: $token-font-weight-regular; height: $token-space-40; line-height: 1.5; padding: $token-space-9 $token-space-12 $token-space-7 $token-space-42; outline: none; outline-offset: 0; vertical-align: middle; width: 100%; &:focus, &:active { border-color:$token-text-color-brand-primary; box-shadow: 0 0 0 $token-space-2 $token-color-outline-focus; outline: none; } &::-webkit-input-placeholder, &::-moz-placeholder, &:-ms-input-placeholder, &:-moz-placeholder, &::placeholder { color: $token-text-color-primary-grey-30; transition: color 125ms 0s ease-in-out; } &:not(:focus) { &::-webkit-input-placeholder { color:$token-text-color-tertiary; } &::-moz-placeholder, &:-ms-input-placeholder, &:-moz-placeholder, &::placeholder { color:$token-text-color-tertiary; opacity: 1; } } } .menu-search-button { background-color: transparent; border-color: transparent; height: 100%; left: 0; outline: $token-space-2 solid $token-color-outline-focus; outline-offset: -$token-space-2; position: absolute; top: 0; width: $token-space-40; &:not(:focus):not(:active) { outline: none; } } .menu-search-icon { left: $token-space-11; height: $token-space-16; position: absolute; width: $token-space-16; top: $token-space-11; } */ } .navigation::before { background-color: rgba(0, 0, 0, 0.3); /* Scrim/Overlay */ bottom: 0; content: ""; display: block; left: 0; inset: 0; pointer-events: none; position: fixed; right: 0; top: 0; -webkit-transition: opacity 500ms ease-in-out; -ms-transition: opacity 500ms ease-in-out; transition: opacity 500ms ease-in-out; z-index: -1; will-change: opacity; } .navigation[data-scrim-overlay]::before { opacity: 1; } .navigation:not([data-scrim-overlay])::before { opacity: 0; } .navigation *:not(.login-dropdown) { font-family: "MecherleSans-Regular", "Circular", Arial, sans-serif; } .navigation *:not(.login-dropdown) * { font-family: "MecherleSans-Regular", "Circular", Arial, sans-serif; } .navigation.in-mobile { /* .login-button { background-color:$token-color-primary-white; border: $token-space-2 solid$token-color-primary-white; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline-offset: -$token-space-2; text-align: center; text-decoration: none; touch-action: manipulation; &:not([aria-expanded]) { color: #0A41C5; text-align: center; * { color: #0A41C5; text-align: center; margin: 0 auto; &[hidden] { display: none; } } border: 0; float: right; font-size: $token-font-size-16; font-weight: $token-font-weight-semiBold; height: $token-space-48; line-height: 2; margin: 0 -$token-space-12 0 0; padding: $token-space-8 $token-space-24; position: relative; width: auto; } } */ } .navigation.in-mobile > * { /*padding: 0 24px 20px 24px;*/ } .navigation.in-mobile .utilities { display: none; } .navigation.in-mobile .primary { background-color: white; box-shadow: 0 0.1875rem 0.25rem 0 rgba(46, 32, 32, 0.1); line-height: 2rem; min-height: 3rem; text-align: center; vertical-align: top; } .navigation.in-mobile .primary > * { display: inline-block; height: inherit; padding: 0.5rem 0.75rem; white-space: wrap; vertical-align: middle; } .navigation.in-mobile .menu { float: left; padding: 0; /* margin: 0 12px 0 -12px; */ vertical-align: top; } .navigation.in-mobile .homepage { display: inline-block; height: 100%; margin: 0px auto; max-height: 3rem; min-width: 100px; max-width: calc(100% - 164px); outline-offset: -0.125rem; padding: 0; } .navigation.in-mobile .homepage.in-desktop { display: none; } .navigation.in-mobile .homepage .logo { height: 100%; max-height: inherit; min-height: 3rem; /* padding: 12px 12px;*/ width: 100%; } .navigation.in-mobile .menu-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; color: #555555; cursor: pointer; border: 0; display: block; height: 3rem; outline-offset: -0.125rem; min-width: 3rem; padding: 0.5rem 1rem; position: relative; text-align: center; touch-action: manipulation; width: auto; z-index: 2; outline: none; } .navigation.in-mobile .menu-button::after { bottom: 0; content: ""; display: block; left: 0; inset: 0; position: absolute; right: 0; top: 0; } .navigation.in-mobile .menu-button :focus, .navigation.in-mobile .menu-button :hover, .navigation.in-mobile .menu-button :active { outline: none !important; } .navigation.in-mobile .menu-icon { color: #555555; fill: #555555; } .navigation.in-mobile .menu-icon .line { -webkit-transform: rotateZ(0) translate3d(0, 0, 0); -ms-transform: rotateZ(0) translate3d(0, 0, 0); transform: rotateZ(0) translate3d(0, 0, 0); -webkit-transition: opacity 250ms ease-in-out, -webkit-transform 400ms ease-in-out; -ms-transition: opacity 250ms ease-in-out, -ms-transform 400ms ease-in-out; transition: opacity 250ms ease-in-out, transform 400ms ease-in-out; will-change: opacity, transform; } .navigation.in-mobile .menu-icon .line-1 { -webkit-transform-origin: 3.5px 0.6875rem; transform-origin: 3.5px 0.6875rem; } .navigation.in-mobile .menu-icon .line-2 { -webkit-transform-origin: 1rem; transform-origin: 1rem; opacity: 1; } .navigation.in-mobile .menu-icon .line-3 { -webkit-transform-origin: 3.5px 1.3125rem; transform-origin: 3.5px 1.3125rem; } .navigation.in-mobile .menu-icon.active .line-1 { -webkit-transform: rotateZ(45deg) translateX(0) translateY(0); -ms-transform: rotateZ(45deg) translateX(0) translateY(0); transform: rotateZ(45deg) translateX(0) translateY(0); } .navigation.in-mobile .menu-icon.active .line-2 { -webkit-transform: rotateZ(0) translateX(0) translateY(0); -ms-transform: rotateZ(0) translateX(0) translateY(0); transform: rotateZ(0) translateX(0) translateY(0); opacity: 0; } .navigation.in-mobile .menu-icon.active .line-3 { -webkit-transform: rotateZ(-45deg) translateX(0) translateY(0); -ms-transform: rotateZ(-45deg) translateX(0) translateY(0); transform: rotateZ(-45deg) translateX(0) translateY(0); } .navigation .menu-dropdown, .navigation .menu-scrolls, .navigation .menu-list { background-color: white; outline: none; height: 100%; list-style-type: none; margin: 0; padding: 0; width: 100%; } .navigation .menu-dropdown, .navigation .menu-list { bottom: 0; inset: 0; left: 0; position: absolute; right: 0; top: 0; } .navigation .menu-dropdown, .navigation .menu-secondary, .navigation .menu-tertiary { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transition: transform 375ms ease-in-out; -ms-transition: transform 375ms ease-in-out; transition: transform 375ms ease-in-out; will-change: transform; } .navigation .menu-dropdown[hidden], .navigation .menu-secondary[hidden], .navigation .menu-tertiary[hidden] { display: block !important; -webkit-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .navigation .menu-dropdown:not([hidden]), .navigation .menu-secondary:not([hidden]), .navigation .menu-tertiary:not([hidden]) { -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .navigation .menu-dropdown { box-shadow: 0 0.375rem 0.75rem 0 rgba(0, 0, 0, 0.08); overflow-x: hidden; overflow-y: hidden; top: 100%; width: calc(95% - 44px); z-index: -1; } .navigation .menu-scrolls { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; position: relative; } .navigation .menu-scrolls:focus { border: 0.125rem solid #0a41c5; } .navigation .menu-close { clip: auto; display: block; height: 3rem; font-size: 0.75rem; font-weight: 600; left: 0; outline: none; /* Mobile devices will have native outline here, lets just make sure it overlays the close button itself... */ overflow: hidden; padding: 0.5rem; position: absolute; right: 4rem; top: -3rem; visibility: visible; width: 4rem; z-index: -2; } .navigation .menu-secondary { z-index: 2; } .navigation .menu-tertiary { z-index: 2; height: calc(100% + 48px); } .navigation .menu-utility-item[hidden] { display: none; } .navigation .menu-utility-item[role=separator]:empty { margin: 0 0 0.75rem 0; padding: 0; } .navigation .menu-utility-item .menu-primary-link { background-color: white; color: inherit; font-size: 0.875rem; font-weight: 600; padding: 0.5rem 1rem; -ms-text-underline-position: under; text-underline-position: under; } .navigation .menu-utility-item .menu-primary-link:hover, .navigation .menu-utility-item .menu-primary-link:focus, .navigation .menu-utility-item .menu-primary-link:active { color: #2d2929; } .navigation .menu-utility-item .menu-primary-link * { float: left; fill: currentColor; margin: 0 0.5rem 0 0; } .navigation .menu-link { cursor: pointer; color: #2d2929; display: block; line-height: 1.5; outline: 0.125rem solid transparent; outline-offset: -0.125rem; position: relative; text-decoration: none; /* -ms-text-underline-position: under; text-underline-position: under;*/ /* width: 100%; */ z-index: 1; } .navigation .menu-link:hover, .navigation .menu-link:focus, .navigation .menu-link:active { color: #2d2929; } .navigation .menu-link:focus, .navigation .menu-link:active, .navigation .menu-link:focus { outline: none; } .navigation .menu-link:not(.menu-primary-link) { font-size: 0.875rem; font-weight: 400; padding: 1.125rem 1rem 1.125rem 1.75rem; text-align: left; font-family: "MecherleSans-Regular", "Circular", Arial, sans-serif; } .navigation .menu-link:not(.menu-primary-link)::before, .navigation .menu-link:not(.menu-primary-link)::after { bottom: 0; content: ""; left: 0; pointer-events: none; position: relative; right: 0; top: 0; z-index: -1; } .navigation .menu-link:not(.menu-primary-link)::before { background-color: white; } .navigation .menu-link:not(.menu-primary-link)::after { left: 1.75rem; border-bottom: thin solid #cdcdd3; } .navigation .menu-link * { fill: #555555; } .navigation .menu-link:hover, .navigation .menu-link:focus, .navigation .menu-link:active * { fill: currentColor; } .navigation .menu-title { max-height: 3.4375rem; padding: 1rem; text-align: left; text-decoration: none; } .navigation .menu-primary-link { max-height: 3.4375rem; padding: 1rem; text-align: left; text-decoration: none; min-height: inherit; } .navigation .menu-title { background-color: #f7f7fa; } .navigation .menu-primary-link { font-size: 0.875rem; font-weight: 400; line-height: 1.3125rem; font-family: "MecherleSans-Regular", "Circular", Arial, sans-serif; background-color: white; } .navigation .menu-primary-link * { font-size: 0.875rem; font-weight: 400; line-height: 1.3125rem; font-family: "MecherleSans-Regular", "Circular", Arial, sans-serif; } .navigation .menu-title { font-size: 1rem; font-weight: 800; line-height: 1.5; } .navigation .menu-title * { font-size: 1rem; font-weight: 800; line-height: 1.5; } .navigation .menu-return { background-color: white; border: none; color: #555555; font-size: 0.875rem; font-weight: 600; min-height: 4rem; outline-offset: -0.125rem; padding: 0.75rem 1rem 0.75rem 2.5rem; text-align: left; vertical-align: middle; width: 100%; } .navigation .menu-return * { color: inherit; fill: currentColor; float: left; left: 0.75rem; margin: 0; position: absolute; top: 1.375rem; } .navigation .menu-title { border-bottom: thin solid #cdcdd3; border-top: thin solid #cdcdd3; outline: none; background-color: white; box-shadow: inset 0-0.0625rem 0 0 #e4e3e3; color: #767676; } .navigation .usballiance-navigation__MainMenuCategoryIcon { color: inherit; display: block; fill: currentColor; float: right; /* margin: -17px 0 0 50rem;*/ -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transition: transform 125ms 0ms ease-in-out; -ms-transition: transform 125ms 0ms ease-in-out; transition: transform 125ms 0ms ease-in-out; will-change: transform; } .navigation .menu-link:not([aria-expanded]) .usballiance-navigation__MainMenuCategoryIcon { display: none; } .navigation .usballiance-navigation__MainMenuSubcategoryIcon { background-color: transparent; color: white; opacity: 0; position: absolute; right: 0.5rem; /*top: 14px*/ } .navigation.in-mobile .menu-button[aria-expanded=false] + .menu-dropdown .menu-scrolls { overflow: hidden; } /* Top Utilities Navigation (Desktop-Only) */ /* Primary Navigation */ /* Main Navigation - Menu Container - Mobile */ /* Menu Button */ /* Menu Button (Icon - Initial State) */ /* Menu Button (Icon - Active State) */ /* Menu Button (Icon - Transition/Animation - Turn off based on accessibility user preference) */ @media screen and (prefers-reduced-motion: reduced) { .navigation.in-mobile .menu-icon .line { -webkit-transition: none; -ms-transition: none; transition: none; } } /* Menu Button (Icon - SVG CSS3 Transform Animations on SVG elements doesn't work in IE9-IE11) */ @media screen and (min-width: 0\0 ) and (min-resolution: 72dpi) { .navigation.in-mobile .menu-icon .line, .navigation.in-mobile .menu-icon.active .line { -webkit-transform: none; -ms-transform: none; transform: none; transform-origin: none; -webkit-transition: none; -ms-transition: none; transition: none; } } /* Login Button - Single Button */ /* Dropdown Levels/Layers - Mobile */ /*.navigation .menu-primary-item { border-top: thin solid $token-text-color-primary-grey-30; min-height: 54px; } .navigation .menu-primary-item:last-child { border-bottom: thin solid $token-text-color-primary-grey-30; } .navigation .menu-secondary-item, .navigation .menu-tertiary-item { min-height: 48px } */ /* IE10/11 workaround for IE missing outline-offset support - 200% ZOOM */ @media screen and (min-width: 0\0 ), (-ms-high-contrast: none), (-ms-high-contrast: active) { .navigation.in-mobile .menu-button:focus, .navigation.in-mobile .homepage:focus, .navigation.in-mobile .login-button:not([aria-expanded]):focus { box-shadow: 0 0 0 1.5px #0a41c5 inset !important; outline: none !important; } } @media screen and (min-width: 1140px) { /* General */ /* .navigation.in-desktop { padding: 0 12px } */ .navigation.in-desktop { /* .search-form-nav { margin: $token-space-8 0; padding: 0; width: 100%; } .search-field { line-height: normal; position: relative; text-align: left; } .search-input { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color:$token-color-primary-white; border: thin solid #858585; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 12px; font-weight: $token-font-weight-regular; height: 24px; line-height: 1.5; margin: 0 16px 0 0; max-width: 175px; outline: none; outline-offset: 2px; padding: 2.5px 12px 2.5px 28px; vertical-align: middle; width: 100%; &:focus, &:active { border-color:$token-text-color-brand-primary; outline: 2px solid $token-color-outline-focus; } &::-webkit-input-placeholder, &::-moz-placeholder, &:-ms-input-placeholder, &:-moz-placeholder, &::placeholder { color: $token-text-color-primary-grey-30; transition: color 125ms 0s ease-in-out; } &:not(:focus) { &::-webkit-input-placeholder { color:$token-text-color-tertiary; } &::-moz-placeholder, &:-ms-input-placeholder, &:-moz-placeholder, &::placeholder { color:$token-text-color-tertiary; opacity: 1; } } } .search-button { background-color: transparent; border-color: transparent; height: 100%; left: 0; position: absolute; top: 0; width: 28px; } .search-label { width: 100%; margin: 0; padding: 0; } .search-icon { left: 7.5px; height: 13px; position: absolute; width: 13px; top: 6.5px; } .login-button { &:not([aria-expanded]) { display: none; } &[aria-expanded] { background-color: #DE162B; border: 2px #DE162B solid; color:$token-color-primary-white; font-size: 14px; font-weight: $token-font-weight-bold-1; line-height: 1.5; padding: 8px 16px; position: relative; text-align: center; text-decoration: none; &:focus { z-index: +3; } &:not(:hover):not(:focus):not(:active) { color:$token-color-primary-white; } &::after { bottom: 0; content: ""; display: block; inset: 0; left: 0; position: absolute; right: 0; top: 0; z-index: +1; } } &[aria-expanded="false"] { box-shadow: -3px 0px 6px 2px rgba(0, 0, 0, 0.01); } &[aria-expanded="true"] { background-color: transparent; border: 2px$token-color-primary-white solid; box-shadow: -3px 0px 6px 2px rgba(0, 0, 0, 0.1); color: #0A41C5; } } .login-dropdown { background-color: transparent; right: 0; margin: 0; min-height:400px; min-width: 223.2px; /* (992px / 4) * 0.9 (90% width with 5% margins) overflow-x: hidden; position: absolute; top: 100%; width: auto; z-index: 2; &[hidden] { display: none !important; } &:not([hidden]) { display: block !important; } } .login-button { &[aria-expanded] .login-close { color: #0A41C5; height: 28px; position: absolute; right: 14px; top: 4px; width: 28px; z-index: +1; } &[aria-expanded="false"] .login-label { opacity: 1; } &[aria-expanded="true"] .login-label { opacity: 0; } &[aria-expanded="false"] .login-close { display: none !important; } &[aria-expanded="true"] .login-close { display: block !important; } } */ } .navigation.in-desktop > * { padding: 0 2%; } .navigation.in-desktop .utilities { background-color: #f7f7fa; display: none; line-height: 2.5rem; margin: 0 0 0-0.75rem; min-height: 2.5rem; width: calc(100% + 24px); zoom: 1; } .navigation.in-desktop .utilities::before { content: ""; display: table; } .navigation.in-desktop .utilities::after { content: ""; display: table; clear: both; } .navigation.in-desktop .utilities-left { float: left; } .navigation.in-desktop .utilities-right { float: right; margin-right: 0.75rem; } .navigation.in-desktop .utility-items { display: inline-block; list-style-type: none; margin: 0-0.75rem; padding: 0; vertical-align: top; } .navigation.in-desktop .utility-item { display: inline-block; max-height: 2.5rem; position: relative; } .navigation.in-desktop .utility-link { color: #2d2929; display: block; font-weight: 400; font-size: 0.75rem; line-height: inherit; outline-offset: -0.125rem; padding: 0 0.75rem; text-decoration: underline; width: 100%; } .navigation.in-desktop .utility-link:not(:hover):not(:focus):not(:active) { color: inherit; text-decoration: none; } .navigation.in-desktop .homepage.in-desktop { display: inline-block; float: left; height: 100%; min-height: 4rem; /* margin: 0 0 0 -12px; max-height: 33px;*/ max-width: auto; min-width: auto; text-align: left; width: auto; } .navigation.in-desktop .homepage.in-desktop .logo { height: 2.0625rem; width: 336px; padding: 0.75rem 1.125rem 0px 0px; } .navigation.in-desktop .homepage.in-mobile { display: none; } .navigation.in-desktop .primary { height: auto; min-height: 4rem; text-align: left; } .navigation.in-desktop .primary > * { position: relative; } .navigation.in-desktop .primary .usballiance-navigation__LoginButton { display: none; } .navigation.in-desktop .menu, .navigation.in-desktop .menu-dropdown, .navigation.in-desktop .menu-scrolls, .navigation.in-desktop .menu-items, .navigation.in-desktop .menu-primary-item, .navigation.in-desktop .menu-primary-link { min-height: inherit; height: auto; vertical-align: top; } .navigation.in-desktop .menu { float: none; margin: 0; padding: 0; position: relative; width: 65%; /* width: calc(100% - 336px);*/ outline: none; } .navigation.in-desktop .menu-button { display: none; } .navigation.in-desktop .menu-dropdown { box-shadow: none; border: none; } .navigation.in-desktop .menu-scrolls { position: static; overflow: visible; } .navigation.in-desktop .menu-button[aria-expanded=false] + .menu-dropdown .menu-scrolls { overflow: visible; } .navigation .menu-close { display: none; } .navigation.in-desktop .menu-dropdown[hidden], .navigation.in-desktop .menu-dropdown:not([hidden]) { bottom: auto; display: block !important; float: left; overflow: visible; position: static; width: 100%; } .navigation.in-desktop .menu-dropdown[hidden] { transform-origin: center center; -webkit-transform: none; -ms-transform: none; transform: none; -webkit-transition: none; -ms-transition: none; transition: none; will-change: initial; } .navigation.in-desktop .menu-secondary[hidden], .navigation.in-desktop .menu-tertiary[hidden] { transform-origin: center center; -webkit-transform: none; -ms-transform: none; transform: none; -webkit-transition: none; -ms-transition: none; transition: none; will-change: initial; } .navigation.in-desktop .menu-dropdown:not([hidden]), .navigation.in-desktop .menu-secondary:not([hidden]), .navigation.in-desktop .menu-tertiary:not([hidden]) { transform-origin: center center; -webkit-transform: translate3d(center, center, 0); -ms-transform: translate3d(center, center, 0); transform: translate3d(center, center, 0); -webkit-transition: none; -ms-transition: none; transition: none; will-change: initial; } .navigation.in-desktop .menu-dropdown:not([hidden]) { z-index: auto; } .navigation.in-desktop .menu-secondary { background-color: #f7f7fa; bottom: auto; height: auto; left: 0; padding: 0; right: auto; top: 100%; width: auto; z-index: -1; } .navigation.in-desktop .menu-secondary[hidden] { display: none !important; } .navigation.in-desktop .menu-tertiary[hidden] { display: none !important; } .navigation.in-desktop .menu-tertiary:not([hidden]) { background-color: white; border: none; height: 100%; left: 100%; overflow: hidden; position: absolute; top: 0; display: block; } .navigation.in-desktop .menu-secondary:not([hidden]), .navigation.in-desktop .menu-tertiary:not([hidden]) { width: 296px; /* 592px total secondary + tertiary */ /*height: fit-content;*/ } .navigation.in-desktop .usballiance-navigation__MainMenuCategoryIcon:first-child:not(:last-child) { display: none; } .navigation.in-desktop .menu-items { margin: 0; position: static; z-index: 1; } .navigation.in-desktop .menu-utility-item { display: none; } .navigation.in-desktop .menu-primary-item { border: none; float: left; outline: none; } .navigation.in-desktop .menu-item:not(.menu-primary-item)::before { content: none; } .navigation.in-desktop .menu-link:not(.menu-primary-link)::before, .navigation.in-desktop .menu-link:not(.menu-primary-link)::after { content: none; } .navigation.in-desktop .menu-item:not(.menu-primary-item):first-child, .navigation.in-desktop .menu-title { display: none; } .navigation.in-desktop .menu-link { background-color: inherit; z-index: auto; } .navigation.in-desktop .menu-link:hover, .navigation.in-desktop .menu-link:focus, .navigation.in-desktop .menu-link:active { text-decoration: underline !important; } .navigation.in-desktop .menu-link:focus, .navigation.in-desktop .menu-link:active { z-index: 2; } .navigation.in-desktop .menu-link:not(.menu-primary-link) { font-size: 0.875rem; font-weight: 400; line-height: 1.5; outline-offset: -0.125rem; padding: 0.75rem; text-align: left; font-family: "MecherleSans-Regular", "Circular", Arial, sans-serif; line-height: 1.3125rem; } .navigation.in-desktop .menu-link:not(.menu-primary-link) * { fill: currentColor; } .navigation.in-desktop .menu-link:not(.menu-primary-link)::before { content: none; } .navigation.in-desktop .menu-link:not(.menu-primary-link):not([aria-expanded]) { color: #2d2929; text-transform: none; } .navigation.in-desktop .menu-link:not(.menu-primary-link):not([aria-expanded]):hover { background-color: white; color: #d62311; /*font-family: "MecherleSans-Bold";*/ /* Leave this here, it appears to trigger paint so that we don't have weird underline bugs... */ } .navigation.in-desktop .menu-primary-link { color: inherit; font-size: 0.875rem; font-weight: 500; min-height: 4rem; /*outline-offset: 0;*/ padding: 1.25rem 2rem; line-height: 1.3125rem; text-transform: uppercase; text-decoration: none; font-family: "MecherleSans-Medium"; } .navigation.in-desktop .menu-primary-link::after { background-color: transparent; bottom: 0; color: currentColor; content: ""; display: inline-block; left: 0; height: calc(100% - 42px); inset: 0; margin: 1.3125rem 0.4375rem; position: absolute; right: 0; top: 0; width: calc(100% - 14); } .navigation.in-desktop .menu-primary-link:hover { color: #2d2929; text-decoration: none; } .navigation.in-desktop .menu-primary-link:focus, .navigation.in-desktop .menu-primary-link:active { color: #2d2929; text-decoration: underline !important; } .navigation.in-desktop .menu-primary-link:hover::after { border-color: #cdcdd3; } .navigation.in-desktop .menu-primary-link:hover:focus::after, .navigation.in-desktop .menu-primary-link:hover:active::after { border-color: transparent; } .navigation.in-desktop .menu-primary-link[aria-current=page] { color: black; /* text-decoration: underline !important; */ } .navigation.in-desktop .menu-primary-link[aria-current=page]:hover { color: #2d2929; text-decoration: underline !important; text-decoration-color: #323232 !important; } .navigation.in-desktop .menu-primary-link > .usballiance-navigation__MainMenuCategoryIcon { display: none; } .navigation.in-desktop .menu-secondary::before { bottom: 0; box-shadow: none; content: ""; display: block; left: 0; position: absolute; right: 0; top: 0; } .navigation.in-desktop .menu-secondary[data-multiple-layers=false] { background-color: white; box-shadow: 0 0.375rem 0.75rem 0 rgba(0, 0, 0, 0.1); left: auto; /*width: auto;*/ } .navigation.in-desktop .menu-secondary[data-multiple-layers=true]::before { right: -100%; } .navigation.in-desktop .menu-secondary-link { color: #2d2929; font-weight: 400; -webkit-transition: background-color 125ms 0ms ease-in-out, color 125ms 0ms ease-in-out; -ms-transition: background-color 125ms 0ms ease-in-out, color 125ms 0ms ease-in-out; transition: background-color 125ms 0ms ease-in-out, color 125ms 0ms ease-in-out; will-change: background-color, color; } .navigation.in-desktop .menu-secondary-link * { color: #2d2929; font-weight: 400; transition: color 125ms 0ms ease-in-out, fill 125ms 0ms ease-in-out; will-change: color, fill; } .navigation.in-desktop .menu-secondary-link:not([aria-expanded]) { color: #d62311; /* font-family: "MecherleSans-Bold";*/ } .navigation.in-desktop .menu-secondary-link[aria-expanded=false] { background-color: white; color: #403c3c; text-decoration: none !important; } .navigation.in-desktop .menu-secondary-link[aria-expanded=false]:hover { color: #d62311; text-decoration: none !important; /* font-family: "MecherleSans-Bold";*/ } .navigation.in-desktop .menu-secondary-link[aria-expanded=false]:focus, .navigation.in-desktop .menu-secondary-link[aria-expanded=false]:active { background-color: #d62311; color: white; text-decoration: none !important; z-index: 2; /* font-family: "MecherleSans-Bold";*/ } .navigation.in-desktop .menu-secondary-link[aria-expanded=true] { background-color: #d62311; color: white; text-decoration: none !important; z-index: 2; /* font-family: "MecherleSans-Bold";*/ } .navigation.in-desktop .menu-secondary-link[aria-expanded=false]:focus *, .navigation.in-desktop .menu-secondary-link[aria-expanded=false]:active * { fill: white; opacity: 1; } .navigation.in-desktop .menu-secondary-link[aria-expanded=true] * { fill: white; opacity: 1; } .navigation.in-desktop .menu-secondary-link[aria-expanded=false] * { fill: transparent; opacity: 0; } .navigation.in-desktop .menu-secondary-link[aria-expanded=true] { color: white; } .navigation.in-desktop .menu-secondary-link[aria-expanded=true]:active { background-color: #d62311; } .navigation.in-desktop .menu-secondary-link[aria-expanded=true] .usballiance-navigation__MainMenuSubcategoryIcon { display: inline-block; min-height: auto; padding: 0; } .navigation.in-desktop .menu-secondary-link[aria-expanded] + .menu-tertiary { left: 0; margin-left: 100%; outline: 0; -webkit-transform: none; -ms-transform: none; transform: none; width: 100%; will-change: initial; } .navigation.in-desktop .menu-secondary-link[aria-expanded] + .menu-tertiary[hidden] { z-index: -1; } .navigation.in-desktop .menu-secondary-link[aria-expanded=false] + .menu-tertiary[hidden] { display: none; } .navigation.in-desktop .menu-secondary-link[aria-expanded=false]:focus + .menu-tertiary, .navigation.in-desktop .menu-secondary-link[aria-expanded=false]:active + .menu-tertiary { -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 1; } .navigation.in-desktop .menu-secondary-link[aria-expanded=false]:focus + .menu-tertiary .menu-tertiary-item, .navigation.in-desktop .menu-secondary-link[aria-expanded=false]:active + .menu-tertiary .menu-tertiary-item { opacity: 1; } /* Utilities */ /* Search */ /* Login Menu - Desktop */ /* Logo/Home - Desktop */ /* 2 logo change css */ /* .navigation.in-desktop .homepage.in-desktop .us-bank-logo { height: 25px; width: 110px; box-sizing: border-box; border-right:1px solid #6D6E71; padding-right: 10px; } .navigation.in-desktop .homepage.in-desktop .state-farm-logo { height: 25px; width: 156px; }*/ /* Main Menu - Desktop */ /* .navigation.in-desktop .menu-item:not(.menu-primary-item) { height: 48px; padding: 0; }*/ /*.navigation.in-desktop .menu-secondary-item { background-color: red; }*/ /* Links attached to the "current page" on load of page coming from JavaScript - Further testing required... */ /*.navigation.in-desktop .menu-secondary-link[aria-expanded] { font-weight: $token-font-weight-semiBold; }*/ } /* IE 9/10/11 workaround for IE missing outline-offset support */ @media screen and (min-width: 1140px) and (min-width: 0\0 ), (-ms-high-contrast: none), (-ms-high-contrast: active) { .navigation.in-desktop .utility-link:focus, .navigation.in-desktop .menu-link:focus { box-shadow: 0 0 0 1.5px #0a41c5 inset !important; outline: none !important; } .navigation.in-desktop .login-button[aria-expanded]:focus { border: 0.125rem solid #0a41c5 !important; outline: none !important; } .navigation.in-desktop .homepage.in-desktop .logo { width: 100%; } } /* OFFSHORE CODE */ .secNavAuthor, .terNavAuthorItems { display: block; padding: 1% 5%; } .secNavAuthor p, .terNavAuthor p { font-size: 0.75rem; margin-bottom: 0; font-weight: bold; text-transform: uppercase; } table.navAuthorTable { width: 100%; margin: 1% 0%; border: thin solid black; } table.navAuthorTable tr th { width: 33%; text-align: center; border: thin solid black; } table.navAuthorTable tr td { padding: 1%; border: thin solid black; } a:not(.img-medium-sizeAnchor):focus { /* background-color:$token-color-primary-white; */ outline: none; /* display: inline-block; */ } .header ul li { margin-bottom: 0px !important; } .header a:focus { outline-offset: -0.125rem !important; } .header ul li a:hover { text-decoration: none; } .header ul li a:focus { outline-offset: -0.125rem !important; } .edit_crossmark_img { float: right; } .edit_crossmark_img:focus, .edit_crossmark_img:hover { outline: none; } /* Edit Arrow- image Hide for desktop */ /*@media (min-width: 1140px){ .edit_crossmark_img{ display:none; } }*/ @media (max-width: 1139px) { .usballiance-navigation__MainMenuBackIcon use { fill: #d62311; } .usballiance-navigation__MainMenuBackIcon use:focus, .usballiance-navigation__MainMenuBackIcon use:hover { outline: none; } .menu-back-button-item { text-align: left; } .navigation .menu-return.menu-secondary-back-button { /* padding-left : 0px;*/ text-align: left; width: 100%; color: #d62311; /* padding:5px*/ } .navigation .menu-return.menu-secondary-back-button:focus, .navigation .menu-return.menu-secondary-back-button:hover { outline: none; } .navigation.in-mobile .primary { overflow-x: hidden; overflow-y: hidden; } .navigation .menu-link:hover, .navigation .menu-link:focus, .navigation .menu-link:active, .navigation .menu-link:visited { color: #2d2929; text-decoration: none !important; } .usballiance-navigation__MainMenuBackIcon { display: inline-block; vertical-align: text-top; padding-top: 0px; outline: none; } /* 2 logo change css */ /*.navigation.in-mobile .homepage .us-bank-logo { height: 21px; width: 80px; box-sizing: border-box; border-right:1px solid #6D6E71; padding-right: 10px; } .navigation.in-mobile .homepage .state-farm-logo { height: 21px; width: 100px; }*/ }