/** * FlexMart Header Manager — Frontend Styles * * Every color/size value reads from a CSS custom property injected * inline per-request from the admin's Settings (see * FHM_Assets::enqueue_frontend()), so the whole header re-themes from * one settings save with no CSS edits. */ :root { --fhm-height: 72px; --fhm-menu-width: 340px; --fhm-bg: #f8fafc; --fhm-text: #111827; --fhm-accent: #2563eb; --fhm-logo-w: 140px; --fhm-logo-h: 40px; --fhm-danger: #dc2626; --fhm-radius-pill: 999px; --fhm-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08); --fhm-shadow-md: 0 14px 30px rgba(15, 23, 42, 0.16); --fhm-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .fhm-header, .fhm-header *, .fhm-menu-panel, .fhm-menu-panel *, .fhm-search-overlay, .fhm-search-overlay *, .fhm-logout-confirm, .fhm-logout-confirm * { box-sizing: border-box; } /* ========================================================================== Header shell ========================================================================== */ .fhm-header { position: relative; width: 100%; height: var(--fhm-height); background: var(--fhm-bg); font-family: var(--fhm-font); z-index: 9999; border-bottom: 1px solid rgba(15, 23, 42, 0.06); } /** * Root cause of "Sticky Header stopped working": position: sticky is * silently disabled the moment ANY ancestor element — anywhere between * the header and the viewport, including or — has * overflow-x/overflow-y set to anything other than "visible", or has a * transform/filter/will-change applied. This is an extremely common * thing for a theme, a caching plugin, or an unrelated CSS snippet to * do (a very typical example: a global "fix" for mobile horizontal * scroll that sets overflow-x: hidden on ) — and since it's * something entirely outside this plugin's own markup, no amount of * z-index, positioning, or !important inside this plugin could ever * reliably prevent it happening again from some unrelated change * elsewhere on the site, now or in the future. * * The fix: don't depend on position: sticky's ancestor-sensitive * behavior at all. position: fixed is anchored to the viewport * unconditionally — it is NOT affected by an ancestor's overflow * property, which is the entire class of bug this is defending * against. Since this header is already the very first thing on every * page, a permanently fixed header combined with a spacer element of * the same height (added right after it in templates/frontend/ * header.php, only when this setting is enabled) produces an * end result completely indistinguishable from position: sticky for * this specific case — there's nothing "above" the header on the page * for it to visibly detach from before locking to the top, so the two * approaches are behaviorally identical here, just with fixed being * the genuinely robust one. */ .fhm-header--sticky { position: fixed; top: 0; left: 0; right: 0; } .fhm-header-spacer { height: var(--fhm-height); } body.admin-bar .fhm-header--sticky { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .fhm-header--sticky { top: 46px; } } .fhm-header--glass { background: color-mix( in srgb, var(--fhm-bg) 86%, transparent ); } .fhm-header--blur { backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); } .fhm-header--shadow.is-scrolled { box-shadow: var(--fhm-shadow-md); } .fhm-header { transition: box-shadow 0.25s ease; } .fhm-header__inner { max-width: 1280px; height: 100%; margin: 0 auto; padding: 0 clamp(10px, 3.5vw, 16px); display: flex; align-items: center; justify-content: space-between; gap: clamp(6px, 2.5vw, 12px); } @media (min-width: 900px) { .fhm-header__inner { padding: 0 32px; gap: 12px; } } /* ========================================================================== Logo ========================================================================== */ .fhm-logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none !important; } .fhm-logo__img { width: var(--fhm-logo-w); height: var(--fhm-logo-h); object-fit: contain; } @media (max-width: 639px) { .fhm-logo__img { width: clamp(72px, 24vw, var(--fhm-logo-w)); } } .fhm-logo__img--mobile { display: block; } .fhm-logo__img--desktop { display: none; } @media (min-width: 640px) { .fhm-logo__img--mobile { display: none; } .fhm-logo__img--desktop { display: block; } } .fhm-logo__text { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; color: var(--fhm-accent) !important; } @media (min-width: 900px) { .fhm-logo__text { font-size: 1.55rem; } } /* ========================================================================== Center / Right ========================================================================== */ .fhm-header__center { flex: 1; display: flex; justify-content: center; } .fhm-header__right { display: flex; align-items: center; gap: clamp(3px, 1.5vw, 6px); flex-shrink: 0; } @media (min-width: 900px) { .fhm-header__right { gap: 8px; } } .fhm-icon-btn { display: flex; align-items: center; justify-content: center; width: clamp(34px, 9vw, 38px); height: clamp(34px, 9vw, 38px); border-radius: 50%; border: none; background: none; color: var(--fhm-text); cursor: pointer; position: relative; text-decoration: none !important; transition: background-color 0.2s ease, transform 0.15s ease; flex-shrink: 0; } @media (min-width: 900px) { .fhm-icon-btn { width: 42px; height: 42px; } } .fhm-icon-btn:hover { background: color-mix( in srgb, var(--fhm-accent) 10%, transparent ); } .fhm-icon-btn:active { transform: scale(0.93); } /* SVG rendering fix: many themes (including Kadence) apply a global icon reset such as "svg{fill:currentColor}", sometimes !important — which would silently override this file's fill="none" stroke="currentColor" icons. A solid-shape icon (the account silhouette, the cart body) still looks roughly right even filled solid, but a pure line-art icon (the search magnifying glass, the hamburger's three bars) has zero fillable area and renders as nothing — a magnifying glass loses its handle and keeps only a filled dot for the lens, the hamburger's bars vanish outright. Deliberately broad — every