/* ========================================================================== BOCSite header / contact-bar / nav UI/UX refresh — site-wide. Promoted 2026-09-18 from home-uiux-2026-09.css lines 16-172 (the C1 header block of the homepage-only T7/T10 UI/UX refresh) per Matt's 2026-09-18 sitewide decision: the header/contact-bar/nav treatment that previously applied only on the homepage now applies on every storefront page. The homepage's own rendered header output does not change as a result of this move — see docs/design/uiux-2026-09/tests/header-css.offline.test.mjs's parity assertions with and without the old homepage-only body class. Loaded via Magento_Theme/layout/default_head_blocks.xml, so this file is in on every page that layout reaches (every route under the `bestonlinecabinets` theme). It is NOT loaded on the checkout theme (`bestonlinecabinets-checkout`, parent Magento/luma): that theme does not extend this theme's layout, so /checkout/* pages are unaffected by this file. Every selector below carried an extra homepage-only body class in the homepage-only source; here that class is simply dropped, leaving `body ` — one class removed, the `body` element kept, so specificity keeps the same shape (still beats the Tailwind utility classes and `.page-header`/component rules it needs to override) while no longer requiring the homepage-only body class. All markup hooks keep their original `boc-` / `cmsb49-`/`cmsb54-*` names unchanged — the CMS-block markup they target is itself shared sitewide, not homepage-specific, so no rename was needed. Selector contract: docs/design/uiux-2026-09/tests/HOOKS.md ("Header / contact-bar / nav, site-wide" section) — every selector here is anchored under `#header`, `header.page-header`, or one of the three header icon IDs; no bare/global selectors. Maintenance note: `header.page-header`'s placeholder height rule immediately below is a static value hand-measured against the header's current real content height (see its own T10 comment for the measurement method) — it is NOT dynamically kept in sync with the real header. If the header's real content height changes again (new icon, taller logo, wrapped contact-bar text, etc.), this placeholder must be re-measured and updated by hand — but as of the 2026-09-18 sticky-offset fix below, that hand-edit now only has to happen in ONE place: the `--boc-header-height` custom property definition. See that property's own comment for why. ========================================================================== */ /* T10 staging fix round 2 (2026-09-17): `header.page-header`'s placeholder height (Magento_Theme/web/tailwind/theme/components/header.css, a Tailwind source file this task cannot touch: `h-[104px] lg:h-[161px]`) is a static value sized for the ORIGINAL header content, not a live JS-measured sync -- so any real content-height change has to be reflected here by hand. Round 1 used 108/169px, derived from a local Playwright fixture rebuilt from a real DOM dump; that fixture's logo placeholder didn't reproduce the real logo's rendered height precisely, leaving a 4.75px (mobile) / 5.625px (desktop) residual. Re-measured directly against live staging (https://test.bestonlinecabinets.com) this round, no fixture: isolated the discrepancy by toggling `display:none` on each direct child of `#header > div.bg-white .container` one at a time and re-reading the row's getBoundingClientRect().height -- only the logo wrapper (`.flex.items-center.mr-auto...`) changes it (removing it drops the row to exactly its 64px min-height floor at both viewports; every icon button, the search container, and the mobile nav toggle contribute 0). The logo is untouched by this task and was already this size before any C1 change, so this is a real pre-existing height this task's icon-target work never touched, not a new regression to chase further -- syncing the placeholder to it is the correct fix per this round's dispatch. Real totals confirmed via direct getBoundingClientRect() on #header itself at all three acceptance-test viewports: 112.75px (390x844) and 174.625px (1280x800 and 1440x900, identical -- nothing here has a breakpoint between 1024px and 1440px). */ /* Round 3 (2026-09-18, sticky-header-clearance fix): `--boc-header-height` is the SINGLE SOURCE OF TRUTH for the fixed header's real rendered height, at both breakpoints. It used to be two bare literals (112.75px/174.625px) duplicated across this file and style-page-uiux-2026-09.css (the `.sub-cat-header` sticky `top` offset and its scroll-margin-top counterpart in furniture-layout.phtml) -- those two consumers previously assumed a stale "header is 120px tall" figure that this round's staging measurement disproved (see style-page-uiux-2026-09.css's C7 comment for the sticky-occlusion bug this caused). Any page's sticky-offset or anchor-scroll-offset CSS should read this variable instead of hand-copying a pixel number. The values themselves are still the same hand-measured, not JS-synced, numbers from Round 2 above -- only their storage moved to one place. If the header's real content height changes again, re-measure and update ONLY the two declarations below; every consumer picks it up automatically. */ :root { --boc-header-height: 112.75px; } @media (min-width: 1024px) { :root { --boc-header-height: 174.625px; } } body header.page-header { height: var(--boc-header-height); } @media (min-width: 1024px) { body header.page-header { height: var(--boc-header-height); } } /* =========================================================================== C1 — top bar / header / nav (design-direction.md C1). `.cmsbNN-*` classes are the theme's per-CMS-block compiled utility prefix (theme-sources.md; the number is not a DB block id) — cmsb49/cmsb54 were independently re-verified against the live homepage during the 2026-09-16 design mock (docs/design/uiux-2026-09/homepage/CHANGES.md "现网核验" #1). =========================================================================== */ body #header [class~="cmsb54-min-h-\[36px\]"] { min-height: 44px; } /* T10 staging fix (2026-09-17): tel:/mailto: used to get `min-height:44px; display:inline-flex;align-items:center`, which genuinely grows the row these links sit in (measured +28px on the top bar alone). A first fix attempt tried plain top/bottom padding on the theory that inline padding doesn't affect line-box height -- but these links live inside `
  • `/`