/** * Critical CSS for Builder Components (Above-the-fold) * * Contains minimal CSS needed for initial header render. * This CSS is inlined in to prevent render-blocking. * Full builder.min.css loads asynchronously after. * * @package Brandy * @since 1.5.0 */ /* Header Container - Core Layout */ #brandy-header { width: 100%; box-shadow: var(--brandy-header-box-shadow); } #brandy-header.brandy-header-transparent { position: absolute; left: 0; z-index: 10000; } #brandy-header > div { display: none; } @media screen and (min-width: 1024px) { #brandy-header > div[device="desktop"] { display: block; } } @media screen and (min-width: 480px) and (max-width: 1023px) { #brandy-header > div[device="mobile"] { display: block; } } @media screen and (max-width: 479px) { #brandy-header > div[device="mobile"] { display: block; } } /* Header Child Sections */ #brandy-header .brandy-child-header { position: relative; } #brandy-header .brandy-child-header[data-layout="full-width"] .header-container { max-width: unset; width: 100%; } #brandy-header .brandy-child-header .header-container-wrapper { padding: var(--brandy-header-padding); background: var(--brandy-background-main); background-position-y: var(--brandy-background-top); background-position-x: var(--brandy-background-left); background-size: var(--brandy-background-size); background-position: var(--brandy-background-position); } #brandy-header .brandy-child-header .header-container { margin: 0 auto; display: grid; gap: 1.25rem; width: 100%; min-height: var(--brandy-header-height); } #brandy-header .header-container-wrapper[data-column-count="2"] .header-container { grid-template-columns: repeat(2, auto); } #brandy-header .header-container-wrapper[data-column-count="3"] .header-container { grid-template-columns: 1fr auto 1fr; } #brandy-header .header-col { min-width: 0; display: flex; align-items: center; gap: var(--brandy-header-row-element-spacing, 12px); } #brandy-header .header-col.justify-center { justify-content: center; } #brandy-header .header-col.justify-end { justify-content: flex-end; } /* Logo - Critical for LCP */ .brandy-logo { display: flex; align-items: center; } .brandy-logo .brandy-logo-images { width: fit-content; } .brandy-logo[logo-type="sticky"] { display: none; } .brandy-logo__img[src=""] { display: none !important; } .brandy-logo__img { display: none; width: auto; max-width: 100%; object-fit: contain; } @media screen and (min-width: 1024px) { .brandy-logo__img.logo-desktop { display: block; } } @media screen and (min-width: 480px) and (max-width: 1023px) { .brandy-logo__img.logo-mobile { display: block; } } @media screen and (max-width: 479px) { .brandy-logo__img.logo-mobile { display: block; } } .brandy-logo__content { display: flex; flex-direction: column; } .brandy-logo__title, .brandy-logo__tagline { transition: color var(--theme-component-transition-duration, .2s) ease-in-out; } .brandy-logo__title { position: relative; color: var(--title-color-normal); } .brandy-logo__tagline { color: var(--tagline-color-normal); } /* Menu - Basic Layout */ #brandy-header .brandy-menu-items { display: flex; align-items: center; justify-content: center; gap: var(--item-spacing); } #brandy-header .brandy-menu__item { position: relative; width: fit-content; background: transparent; } #brandy-header .brandy-menu__item a, #brandy-header .brandy-menu__item .brandy-menu-item__title-wrapper { display: flex; align-items: center; justify-content: space-between; gap: 7px; position: relative; } #brandy-header .brandy-menu__item .brandy-menu-item__title, #brandy-header .brandy-menu__item .brandy-menu-item__arrow { -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } #brandy-header .vertical-item > a, #brandy-header .vertical-item > .brandy-menu-item__title-wrapper, #brandy-header .horizontal-item.root-item > a, #brandy-header .horizontal-item.root-item > .brandy-menu-item__title-wrapper { padding: var(--item-padding); } #brandy-header .vertical-item > a > *, #brandy-header .vertical-item > .brandy-menu-item__title-wrapper > *, #brandy-header .horizontal-item.root-item > a > *, #brandy-header .horizontal-item.root-item > .brandy-menu-item__title-wrapper > * { background: var(--text-color-normal); } @media screen and (min-width: 1024px) { #brandy-header .brandy-element-wrapper[layout="horizontal"] { display: block; } } #brandy-header .brandy-element-wrapper[layout="horizontal"] .brandy-menu-items { row-gap: var(--item-extra-spacing, 10px); } /* Sub-menu - Initially Hidden */ #brandy-header .horizontal-item .brandy-sub-menu { position: absolute; display: flex; flex-direction: column; z-index: 1000; min-width: fit-content; width: var(--canvas-width); left: -15px; opacity: 0; visibility: hidden; background: var(--canvas-background-normal); transform: translate3d(0, calc(var(--canvas-offset-top, 0) + 30px), 0); border-radius: 10px; } /* Toggle Button - Mobile Menu Trigger */ .brandy-toggle-button { display: flex; align-items: center; justify-content: center; cursor: pointer; } .brandy-toggle-button__icon { display: flex; align-items: center; justify-content: center; } /* Account Element */ .brandy-account { display: flex; align-items: center; } /* Cart Element - Basic */ .brandy-cart { display: flex; align-items: center; } .brandy-cart__icon { position: relative; display: flex; align-items: center; justify-content: center; } /* Search Element - Basic */ .brandy-search { display: flex; align-items: center; } .brandy-search__icon { display: flex; align-items: center; justify-content: center; cursor: pointer; }