/* * Site-wide announcement bar (configured per language on the site root page). * * The bar is rendered as the element immediately before
, which * is position:fixed at the top of the viewport. All offsets below are therefore scoped to the * sibling combinators so that this file has no effect at all when the bar is not rendered. * * --announcement-bar-height is measured by announcement-bar.js and written to as an * inline style; the values below are the single-line fallbacks used until the script runs. */ :root { --announcement-bar-height: 44px; } @media (max-width: 767.98px) { :root { --announcement-bar-height: 40px; } } .announcement-bar { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; padding: 10px 0; font-size: 15px; font-weight: 600; line-height: 24px; text-align: center; } @media (max-width: 767.98px) { .announcement-bar { font-size: 14px; line-height: 20px; } } .announcement-bar__link, .announcement-bar__text { color: inherit; } .announcement-bar__link { text-decoration: none; } .announcement-bar__link:hover, .announcement-bar__link:focus { color: inherit; text-decoration: underline; } /* Push the fixed header below the bar. */ .announcement-bar + .site-header { top: var(--announcement-bar-height, 0px); } /* Compensate the content offset that .main uses for the fixed header. */ .announcement-bar ~ .main { padding-top: calc(80px + var(--announcement-bar-height, 0px)); } @media (max-width: 991.98px) { .announcement-bar ~ .main { padding-top: calc(69px + var(--announcement-bar-height, 0px)); } } @media (max-width: 767.98px) { .announcement-bar ~ .main { padding-top: calc(59px + var(--announcement-bar-height, 0px)); } } /* Desktop mega menu is fixed below the header. */ @media (min-width: 992px) { .announcement-bar + .site-header .megamenu { top: calc(108px + var(--announcement-bar-height, 0px)); } } /* Mobile menu overlay is fixed below the header and fills the rest of the viewport. */ @media (max-width: 991.98px) { .announcement-bar + .site-header .menu-new { top: calc(84px + var(--announcement-bar-height, 0px)); max-height: calc(100% - 84px - var(--announcement-bar-height, 0px)); } }