.mainHeader { background: var(--background-color); color: var(--default-color); font-size: 1.4rem; margin-bottom: 2.2rem; position: absolute; width: 100%; z-index: 10000; .wide-container { background: #fff; @include media-breakpoint-down(lg) { padding: 0 divide($container-padding-x, 2); } } } .mainHeaderInner { position: relative; } .headerFixed.headerScrolledBottom, .headerFixed.headerScrolledTop { .mainLogo { height: 56px; img { height: 20px; } } } .headerFixed { position: fixed; top: 0; .fixed & { bottom: 0; margin-bottom: 0; } } .headerInner { align-items: center; background: var(--background-color); color: var(--default-color); flex-wrap: nowrap !important; justify-content: flex-start; .fixed & { left: 0; position: fixed; right: 0; top: 0; margin: 0; padding: 0; z-index: 9; @include media-breakpoint-down(md) { border-bottom: 2px solid #000; } } } .mainLogo { align-items: center; color: var(--default-color); display: inline-flex; height: 56px; position: relative; text-align: center; z-index: 9; img { height: 20px; object-fit: contain; object-position: left; transition: height 0.2s; vertical-align: middle; width: 100px; [data-editor-dark-mode='true'] & { filter: invert(1); } } a, a:link, a:visited { border-bottom: none; color: var(--link-color); &:hover { background: none; } } } .usernav { display: inline-flex; font-weight: 500; justify-content: end; position: relative; @include media-breakpoint-down(lg) { flex: 1 !important; max-width: 100% !important; padding: 0 !important; } } .mainNavigationWrapper { @include font-size(1.7rem); position: relative; @include media-breakpoint-down(lg) { display: none; } .fixed & { display: block; } } .mainNavigation { font-size: 1.4rem !important; //margin: 0 0 0 -0.4rem !important; opacity: 1; transition: opacity 0.3s; @include media-breakpoint-down(md) { background: var(--background-color); bottom: 0; display: none; font-size: 2.6rem; font-weight: 500; left: 0; overflow: auto; padding: $container-padding-x !important; position: fixed; top: 64px; width: 100%; z-index: 1; li { margin-bottom: 2.4rem !important; } &.fixed { display: block !important; line-height: 1.1; ul { display: block; font-size: 3.2rem !important; font-weight: bold; margin: 0 0 5rem; } li { display: block !important; margin: 0 0 1.5rem !important; } a, button { border: none !important; } .mobileCopyright { display: flex; flex-wrap: wrap; justify-content: space-between; a { border-bottom: 1px solid !important; } } } } @include media-breakpoint-down(sm) { padding: divide($container-padding-x, 2) !important; } @include media-breakpoint-up(md) { a, button { padding: 0 0.4rem; } } ul { margin-top: 0; } li { margin-bottom: 0 !important; &:first-letter { text-transform: capitalize; } } h4 { color: #9fa1a7; font-size: 1.4rem; letter-spacing: 0.05em; text-transform: uppercase; } } .mainNavigationMobile { display: none; .fixed & { display: block; } } .mainNavigationSocial a { display: flex; justify-content: space-between; &:hover { .icon { filter: invert(1); } } .icon { height: 3.8rem; width: 3.8rem; } } .mobileDescription { color: #696969; } .mobileSubscription { margin-bottom: 5rem; input[type='email'] { background: #f7f7f8; border: none; border-radius: 1.6rem; } } .mainNavigationItemActive { background: #000; color: #fff !important; } .headerWithTitle.headerScrolledBottom { .mainNavigation, .userControl { opacity: 0; } } .burgerContainer { box-sizing: content-box; display: inline-flex; //float: right; padding-left: 0; @include media-breakpoint-up(sm) { padding-left: divide($container-padding-x, 2); } @include media-breakpoint-up(lg) { display: none; } } .burger { cursor: pointer; height: 1.8rem; display: inline-block; position: relative; vertical-align: middle; width: 2.2rem; > div, &::after, &::before { background: var(--link-color); content: ''; display: block; height: 2px; left: 0; position: absolute; width: 100%; } > div { margin-top: -1px; opacity: 1; top: 50%; transition: opacity 0.2s 0.1s; } &::after, &::before { transform-origin: center !important; transition: top 0.3s, transform 0.3s; } &::after { bottom: 0; } &::before { top: 0; } .fixed & { > div { opacity: 0; transition: opacity 0s; } &::after { bottom: 0.8rem; transform: rotate(-45deg); } &::before { transform: rotate(45deg); top: 0.8rem; } } } .articleHeader, .articleControls { opacity: 0; transition: opacity 0.3s, z-index 0s 0.3s; z-index: -1; .headerScrolledBottom & { transition: opacity 0.3s; opacity: 1; z-index: 1; } } .articleHeader { @include font-size(1.4rem); left: $container-padding-x; margin: 0.2em 0; overflow: hidden; position: absolute; text-overflow: ellipsis; white-space: nowrap; width: 100%; @include media-breakpoint-down(md) { display: none; } } .iconHover { display: none; } .headerSearch { text-transform: lowercase; .icon { display: inline-block; height: 1em; margin-right: 0.3em; vertical-align: middle; width: 1em; } } .articleControls { display: flex; justify-content: flex-end; position: absolute; right: 5rem; top: 50%; transform: translateY(-50%); width: 100%; @include media-breakpoint-up(lg) { right: 0; } @include media-breakpoint-up(xl) { right: 2rem; } .control { cursor: pointer; border: 0; &:hover { background: none; .icon { display: none; } .iconHover { display: block; } } } .control + .control { margin-left: 1.2rem; @include media-breakpoint-up(sm) { margin-left: 2rem; } } img { vertical-align: middle; } } .userControl { align-items: center; display: flex; justify-content: flex-end; opacity: 1; transition: opacity 0.3s; z-index: 1; .headerWithTitle.headerScrolledBottom & { transition: opacity 0.3s, z-index 0s 0.3s; opacity: 0; z-index: -1; } @include media-breakpoint-down(md) { padding: divide($container-padding-x, 2); } .userpic { align-items: center; margin-right: 0; img { height: 100%; width: 100%; } } } .userControlItem { align-items: center; border-radius: 100%; display: flex; height: 2.4em; justify-content: center; margin-left: 0.3rem; position: relative; transition: margin-left 0.3s; width: 2.4em; @include media-breakpoint-down(sm) { margin-left: 0.4rem !important; } .headerScrolledTop &, .headerScrolledBottom & { transition: none; } .circlewrap { height: 23px; min-width: 23px; width: 23px; } .button, a, a:link { border: none; height: auto; margin: 0; padding: 0; &:hover { background: none !important; .icon { display: none; } .iconHover { display: block; } } } .icon { img { max-width: none; } } .textLabel { display: none; } } .userControlItemInbox, .userControlItemSearch { @include media-breakpoint-down(sm) { display: none; } } .userControlItemVerbose { margin-left: 1.2em !important; &:first-child { margin-left: 0 !important; } &:global(.loginbtn) { .icon { height: 2.4rem; width: 2.4rem; } a:hover { .icon { display: block; @include media-breakpoint-up(lg) { display: none; } } } img { max-width: none; height: 2.4rem; width: 2.4rem; } } @include media-breakpoint-up(xl) { margin-left: 0.5em !important; margin-right: 0.5em; width: auto; .icon { display: none !important; } .textLabel { color: var(--link-color); display: inline; padding: 0; position: relative; white-space: nowrap; z-index: 1; } } button { margin: 0 !important; } a::before { display: none; } a:hover, button:hover { .icon { display: none; } .iconHover { display: block; } .textLabel { background-color: var(--link-hover-background); color: var(--link-hover-color); } } a:hover { background-color: var(--link-hover-background) !important; } } .subnavigation { background: #000; color: #fff; font-weight: 500; left: 0; position: absolute; top: 100%; transform: translateY(-2px); width: 100%; @include media-breakpoint-down(md) { display: none; } ul { display: flex; flex-wrap: wrap; height: 6rem; line-height: 6rem; margin-bottom: 0; padding: 0 150px 0 0; position: relative; overflow: hidden; @include media-breakpoint-up(xl) { margin: 0 calc(0.5 * var(--bs-gutter-x)); } li { margin-right: 2.4rem; white-space: nowrap; } .rightItem { margin-right: 0; position: absolute; right: 0; top: 0; } } a:link, a:visited { border: none; color: #fff; .icon { filter: invert(1); } &:hover { opacity: 0.5; } } } .subnavigationItemName { align-items: center; display: flex; transition: background-color 0.3s; .subnavigationFeed & { line-height: 60px; } } .subnavigationFeed { ul { padding-right: 0; } li { align-items: center; display: flex; } .icon { margin-right: 0.3em; } } .rightItemIcon { display: inline-block; margin-left: 0.3em; position: relative; top: 0.15em; }