/** * WMD Solutions Base Theme - Header styles. * Sticky header, scroll effects, cart icon/badge. * Nav/menu styles live in css/components/menu.css. * Transparent header styles live in css/hero.css. */ /* ====================================================== SITE HEADER BASE ====================================================== */ .site-header { background: var(--header-bg); transition: opacity 0.4s ease, background 0.3s ease, box-shadow 0.3s ease; } .site-header .navbar { padding-top: var(--header-padding-y, 1rem); padding-bottom: var(--header-padding-y, 1rem); } /* ====================================================== STICKY HEADER --drupal-displace-offset-top set dynamically by Drupal on . Falls back to 0px when not logged in. ====================================================== */ .sticky-header .site-header { position: sticky; top: var(--drupal-displace-offset-top, 0px); z-index: 200; } .sticky-header.scrolled .site-header { background: var(--header-scroll-bg) !important; backdrop-filter: blur(var(--header-scroll-blur)); -webkit-backdrop-filter: blur(var(--header-scroll-blur)); box-shadow: var(--header-sticky-shadow); } .sticky-header .site-header.header-faded { opacity: 0; pointer-events: none; } .sticky-header .site-header:hover { opacity: 1 !important; pointer-events: auto !important; } /* ====================================================== CART ICON + BADGE ====================================================== */ .navbar-cart { display: flex; align-items: center; } .cart-block--link__expand { display: flex; align-items: center; color: var(--color-text); text-decoration: none; position: relative; } .cart-block--icon-wrapper { position: relative; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; } .cart-block--icon-wrapper svg { color: var(--color-text); transition: color 0.2s ease; } .cart-block--link__expand:hover .cart-block--icon-wrapper svg { color: var(--color-accent); } .cart-block--badge { position: absolute; top: -6px; right: -8px; background: var(--color-accent); color: #ffffff; font-size: 0.65rem; font-weight: 700; line-height: 1; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 3px; }