/* ========================================================================== LookAmaze R3 - CHROME LAYER: HEADER [INERT BY NON-USE] v1.4.1 ========================================================================== STATUS ------ The header styling layer: the masthead shell, the live wordmark, the navigation, desktop dropdowns, the mobile hamburger and drawer, and focus states - and nothing else. v1.4.1 - LAYOUT CORRECTION. The first build expressed the intended structure and configuration correctly but rendered with two layout defects: a 556.8px desktop masthead with the five families stacked, and a 143.54px mobile masthead with the brand and the hamburger on separate rows. Both had one measured root cause, documented below. This revision is the smallest change that removes that cause. No redesign: the shell, the faces, the tokens, the classes and the element structure are unchanged. WHY THE FIRST BUILD'S ROW DID NOT WORK (measured, not assumed) ------------------------------------------------------------- Elementor renders a flex container as TWO nested boxes: .elementor-element-xxxx (e-con) <- carries our lm- class AND the settings .e-con-inner <- the box that lays the children out `.lm-masthead__inner` is the outer box; the row that actually places the brand and the navigation is ITS OWN `.e-con-inner`. The first build styled the outer box, so two things it never intended were in force on the real row: 1. Elementor gives container children `width: 100%` (`.e-con { width: var(--width) }`, `--width: 100%`). The brand therefore computed 1065px on desktop - and because the first build ALSO set `flex: 0 0 auto` on the brand, it could not shrink. The brand ate the whole row; the navigation got zero free space (`width: 0`), and the plugin's own `ul { flex-wrap: wrap }` then stacked the five families vertically. At 390px the same thing happened: brand 323.98px + nav 281.02px wrapped. 2. `.e-con > .e-con-inner` adds 10px padding-block, which has to be removed before the row can measure the intended 76px / 58px exactly. The correction is three declarations plus one scoped removal: - brand: `width: auto; flex: 0 1 auto` (content width; may shrink; never grows) - `ul.hfe-nav-menu { flex-wrap: nowrap }` (the plugin's `wrap` is overridden) - `.e-con-inner` / masthead `padding-block: 0` - the closed mobile drawer is taken out of the row (section 5) It wins on SPECIFICITY, never on `!important`: - `.lm-masthead .lm-masthead__brand` (0,2,0) out-ranks `.e-con` (0,1,0); - `.lm-masthead ul.hfe-nav-menu` (0,2,1) out-ranks the plugin's `.hfe-nav-menu__layout-horizontal .hfe-nav-menu` (0,2,0); - for the (0,2,0) padding rule the tie is broken by ORDER, and this sheet loads after Elementor's frontend sheet. There is no `!important` in this file, and none is needed. NOT PROVEN YET - AND NEVER TO BE OVERSTATED ------------------------------------------- The row heights below are the intended floor, not a guarantee. A layout is only ever "appears correct at the widths actually measured"; this file must never be described as unable to overflow. MEASURED STATUS - WHAT IS PROVEN AND WHAT IS NOT ------------------------------------------------ Proven, on template 7311's real render before correction: desktop masthead 556.8px with the five families stacked (`ul.hfe-nav-menu` 140.04px wide, `flex-wrap: wrap`); 390px masthead 143.54px with the brand (323.98px) and the 281.02px drawer wrapper on separate rows. Proven, CLIENT-SIDE ONLY (temporary injected rules, removed afterwards, page returned to baseline): the same fix reaches desktop 76.8px in one row and 390px 58.8px with the wordmark left and the 44x44 toggle right, with no horizontal overflow at either width. That experiment used `!important`, which this file forbids - so it is evidence for the FIX DIRECTION, not evidence about this file. This revision reaches the same result on specificity alone, and its own installed-build measurements are recorded in the R3 verification log, not asserted here. Screen captures of these renders remain unobtainable from the authorised surface. SEARCH IS PRESENT AS OF v1.4.2. The widget is the verified `hfe-search-button` (element 754b2c2, class `lm-search`, layout `text`). Its surface, typeface, placeholder, border and height come from the widget's OWN editor controls, because Elementor's generated per-post CSS for that element carries specificity (0,4,0) and cannot be out-ranked here without `!important`, which this file forbids. This sheet owns layout only: order, flex sizing, structural width, the inaccessible `#clear` control and the focus ring.. INERTNESS - the invariant that makes this safe to install now ------------------------------------------------------------- Every selector in this file is scoped under `.lm-masthead`. No element on the site carries that class today - the live header is built from UAE/Elementor elements with no `lm-` classes - and template 7311 does not carry it either until that class is added to its outer container in the editor. A scoped rule whose root class is absent matches nothing, so installing this sheet cannot change how any current page looks. Same mechanism as components.css. Why the scoping is load-bearing ------------------------------- The nav list, the submenu controls and the mobile toggle are drawn by the third-party UAE plugin (`hfe-nav-menu__*`). Styling those unscoped would restyle the CURRENT header the moment this file loaded. CLASS NAMES COME FROM THE LIVE DOM, NOT FROM MEMORY --------------------------------------------------- Observed at a real 390px viewport and recorded in the R3 evidence: `.hfe-nav-menu` (both a UL and a wrapper DIV), `.hfe-layout-horizontal`, `.hfe-nav-menu-layout`, `.hfe-pointer__none`, `.hfe-nav-menu__layout-horizontal`, `.hfe-nav-menu__submenu-arrow`, `.hfe-nav-menu__breakpoint-tablet`, `.hfe-nav-menu__toggle`, `.hfe-nav-menu-icon`, `.hfe-menu-item`, `.hfe-sub-menu-item`, `.hfe-has-submenu-container`, `.hfe-menu-toggle`, `.sub-arrow`, `.hfe-menu-child-0`, `.hfe-dropdown`, `.menu-is-active`, `.hfe-active-menu`. TOKEN DISCIPLINE ---------------- Every colour, font family, size, weight, tracking and spacing value is a `--lm-*` token. No literal colour and no literal font stack. The only literals are structural: the 1140px container, the 76/58px row heights, the 44px tap target, 1px and 2px hairlines and underline, the 1024px breakpoint, and unitless multipliers. No border-radius - radius is still an open decision. ========================================================================== */ /* -------------------------------------------------------------------------- 1. MASTHEAD SHELL - light, 76px, non-sticky, 1140px alignment -------------------------------------------------------------------------- */ .lm-masthead { --lm-masthead-max: 1240px; /* R3: masthead-only width. The site and content widths are untouched; this is the supervisor-approved ceiling (1220 target / 1240 hard ceiling, 2026-09-16) */ position: static; /* deliberately NON-STICKY */ background: var(--lm-color-bg); border-bottom: 1px solid var(--lm-color-border); padding-block: 0; /* Elementor's container padding is not part of the 76/58px row */ } /* The Elementor wrapper boxes must not add padding either, or the row measures 76px + 20px. This is the rule that makes the 76/58px floor exact. */ .lm-masthead .e-con-inner { padding-block: 0; } .lm-masthead .lm-masthead__inner { box-sizing: border-box; max-width: var(--lm-masthead-max); margin-inline: auto; padding-inline: var(--lm-gutter); min-height: 76px; /* desktop floor; 58px under 1024px */ display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: var(--lm-space-md); } /* The real row is the inner box (see the header note). State the row behaviour there as well, so the row cannot wrap even if the element's own flex settings are ever regenerated by the editor. */ .lm-masthead .lm-masthead__inner > .e-con-inner { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: var(--lm-space-md); width: 100%; max-width: none; box-sizing: border-box; } /* Placement is stated explicitly rather than left to element order. The wordmark is first; the navigation follows. */ .lm-masthead .lm-masthead__brand { order: 1; } .lm-masthead .lm-nav { order: 2; } /* -------------------------------------------------------------------------- 2. WORDMARK - live text, Fraunces 600, links to the homepage -------------------------------------------------------------------------- */ .lm-masthead .lm-masthead__brand { display: flex; flex-direction: row; align-items: center; gap: var(--lm-space-xs); width: auto; /* NOT the container's 100% */ flex: 0 1 auto; /* content width; may shrink; never grows - the first build's `flex: 0 0 auto` let the brand hold a full row and gobble the menu */ } .lm-masthead .lm-wordmark .elementor-heading-title { font-family: var(--lm-font-display); font-weight: var(--lm-weight-semibold); font-size: var(--lm-fs-h2); line-height: 1; letter-spacing: var(--lm-track-h2); color: var(--lm-color-text); margin: 0; white-space: nowrap; font-variation-settings: "SOFT" var(--lm-fraunces-soft), "WONK" var(--lm-fraunces-wonk); } /* The wordmark is a link to home. Its accessible name is its own visible text, so no aria-label is needed. */ .lm-masthead .lm-wordmark a { color: var(--lm-color-text); text-decoration: none; } .lm-masthead .lm-wordmark a:hover, .lm-masthead .lm-wordmark a:focus { color: var(--lm-color-accent); } /* -------------------------------------------------------------------------- 3. NAVIGATION - desktop bar, five families, one dropdown level -------------------------------------------------------------------------- */ .lm-masthead .lm-nav { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; } .lm-masthead .hfe-nav-menu.hfe-layout-horizontal { display: flex; align-items: center; width: 100%; } .lm-masthead .hfe-nav-menu__layout-horizontal { display: flex; align-items: center; justify-content: center; width: 100%; } .lm-masthead ul.hfe-nav-menu { display: flex; flex-direction: row; flex-wrap: nowrap; /* the plugin wraps it (`flex-wrap: wrap`) - five families must stay on one row on desktop */ align-items: center; justify-content: center; gap: 12px; margin: 0; padding: 0; list-style: none; } .lm-masthead a.hfe-menu-item { display: inline-flex; align-items: center; min-height: 44px; /* tap target */ padding-block: var(--lm-space-xs); font-family: var(--lm-font-ui); font-weight: var(--lm-weight-medium); font-size: var(--lm-fs-ui); line-height: var(--lm-lh-ui); letter-spacing: var(--lm-track-ui); color: var(--lm-color-text); text-decoration: none; } .lm-masthead a.hfe-menu-item:hover, .lm-masthead a.hfe-menu-item:focus { color: var(--lm-color-accent-2); } /* Current family: accent text PLUS a non-colour cue (2px underline), so the state is never carried by colour alone. */ .lm-masthead ul.hfe-nav-menu > li.current-menu-item > div > a.hfe-menu-item, .lm-masthead ul.hfe-nav-menu > li.current-menu-ancestor > div > a.hfe-menu-item, .lm-masthead ul.hfe-nav-menu > li.current-menu-item > a.hfe-menu-item { color: var(--lm-color-accent); box-shadow: inset 0 -2px 0 0 var(--lm-color-accent); } /* The arrow span is only the glyph; the 44px target is the WRAPPER, which is the element carrying role=button and tabindex=0. */ .lm-masthead span.hfe-menu-toggle.sub-arrow { display: inline-flex; align-items: center; justify-content: center; margin-inline-start: var(--lm-space-3xs); } .lm-masthead div.hfe-has-submenu-container { display: flex; align-items: center; min-height: 44px; /* tap target on the real control */ } /* One dropdown level only. */ .lm-masthead ul.hfe-nav-menu ul.sub-menu { background: var(--lm-color-surface); border: 1px solid var(--lm-color-border); padding-block: var(--lm-space-2xs); margin: 0; list-style: none; } .lm-masthead ul.sub-menu > li { margin: 0; padding: 0; } .lm-masthead a.hfe-sub-menu-item { display: flex; align-items: center; min-height: 44px; /* tap target */ padding-block: var(--lm-space-2xs); padding-inline: var(--lm-space-sm); font-family: var(--lm-font-ui); font-weight: var(--lm-weight-regular); font-size: var(--lm-fs-ui); line-height: var(--lm-lh-ui); color: var(--lm-color-text); text-decoration: none; } .lm-masthead a.hfe-sub-menu-item:hover, .lm-masthead a.hfe-sub-menu-item:focus { color: var(--lm-color-accent); background: var(--lm-color-bg); } /* -------------------------------------------------------------------------- 4. KEYBOARD VISIBILITY - the current chrome has none -------------------------------------------------------------------------- */ .lm-masthead :focus-visible { outline: 2px solid var(--lm-color-focus); outline-offset: 2px; } /* -------------------------------------------------------------------------- 5. MOBILE - one compact row, 44px targets, drawer -------------------------------------------------------------------------- The breakpoint is the UAE nav widget's own `.hfe-nav-menu__breakpoint-tablet` (verified: at a real 390px viewport `(max-width:1024px)` matches and the toggle appears), so the layout change and the hamburger fire together. -------------------------------------------------------------------------- */ /* Base state: the field is present only where one of the bands below restores it. Any viewport not covered by a band — including fractional widths — is a state where the navigation is horizontal and the row cannot hold the field. */ .lm-masthead .lm-search { display: none; } @media (max-width: 1024px) { .lm-masthead .lm-masthead__inner { min-height: 58px; gap: var(--lm-space-sm); } /* MOBILE ORDER - wordmark then hamburger, stated explicitly so it cannot drift. The DOM already ends with the nav widget, whose toggle is therefore the rightmost item. */ .lm-masthead .lm-masthead__brand { order: 1; } .lm-masthead .lm-search { order: 2; display: block; } /* brand 1 · search 2 · nav 3 */ .lm-masthead .lm-nav { order: 3; } .lm-masthead .lm-wordmark .elementor-heading-title { font-size: var(--lm-fs-h3); } /* The nav is the toggle only, pushed to the right edge of the row by the auto margin. It must not grow: the row is wordmark-left / control-right. */ .lm-masthead .lm-nav { flex: 0 0 auto; justify-content: flex-end; margin-inline-start: auto; min-width: 0; } /* CLOSED DRAWER - taken out of the row entirely. Measured while closed at 390px: the drawer box still carried its intrinsic width (281.02px) even though it is `visibility:hidden` and zero-height, and that width pushed the 44px hamburger onto a second row (masthead 143.54px). Removing it from the row's layout is what makes the 58px single row possible. Zero width plus clipped overflow also guarantee that a hidden drawer of that width cannot contribute sideways overflow to the page. THIS RULE MUST STAY INSIDE THIS MEDIA QUERY. At desktop width the same `:not(.menu-is-active)` selector also matches the horizontal menu bar, and applied there it removes the whole five-family navigation from the row. */ .lm-masthead .lm-nav .hfe-nav-menu__layout-horizontal:not(.menu-is-active) { position: absolute; width: 0; overflow: hidden; } /* The toggle carries role=button, tabindex=0, aria-label="Menu Toggle", aria-haspopup and aria-expanded (verified in the live DOM), and measures 44 x 44px at 390px - so the 44px floor is already met. Asserted here so a later plugin change cannot break it silently. */ .lm-masthead .hfe-nav-menu__toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--lm-color-text); cursor: pointer; } /* At this width UAE hides the bar with `visibility:hidden` plus zero height (verified) and reveals it as the drawer by adding `.menu-is-active`. */ .lm-masthead .hfe-nav-menu__layout-horizontal { justify-content: flex-start; } .lm-masthead nav.hfe-nav-menu__layout-horizontal.menu-is-active { background: var(--lm-color-bg); border-bottom: 1px solid var(--lm-color-border); padding-block: var(--lm-space-sm); padding-inline: var(--lm-gutter); } .lm-masthead ul.hfe-nav-menu { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; width: 100%; } .lm-masthead ul.hfe-nav-menu > li { width: 100%; border-bottom: 1px solid var(--lm-color-border); } /* Drawer family rows: editorial face, generous target. */ .lm-masthead ul.hfe-nav-menu > li > div > a.hfe-menu-item, .lm-masthead ul.hfe-nav-menu > li > a.hfe-menu-item { font-family: var(--lm-font-text); font-weight: var(--lm-weight-regular); font-size: var(--lm-fs-lead); min-height: 44px; padding-block: var(--lm-space-sm); width: 100%; } .lm-masthead div.hfe-has-submenu-container { min-height: 44px; width: 100%; } .lm-masthead ul.sub-menu { border: 0; padding-block: 0; background: var(--lm-color-surface); } .lm-masthead a.hfe-sub-menu-item { min-height: 44px; padding-inline: var(--lm-space-md); font-size: var(--lm-fs-body); } } /* -------------------------------------------------------------------------- 6. SEARCH - the UAE search widget (`hfe-search-button`), text mode only -------------------------------------------------------------------------- Elementor's per-post CSS for element 754b2c2 owns the field's surface, text colour, placeholder colour, typeface and border at (0,4,0). Those are set through the widget's own editor controls, not here. This layer owns layout. MEASURED (mock, then re-measured on the built state - see the R3 log V-36): a 140px field 44px tall keeps the masthead at 76.8px with all five families sharing a top edge from 1280px viewport upward. Below that the row cannot hold the wordmark, five families and a usable field at once, and the navigation widget's own breakpoint control offers only 768 / 1025 / none - an earlier native collapse does not exist. So the field is shown where the measured row holds it, and the 1025-1279px band keeps the accepted header rather than a wrapped row or a squeezed field. Never describe this as "cannot overflow". -------------------------------------------------------------------------- */ /* Desktop: shown only where the measured row holds it. */ @media (min-width: 1280px) { .lm-masthead .lm-search { order: 3; /* brand 1 - nav 2 - search 3 */ flex: 0 0 auto; width: 140px; display: block; } .lm-masthead ul.hfe-nav-menu { gap: var(--lm-space-md); } } /* Between the mobile collapse and the measured desktop threshold. */ @media (min-width: 1025px) and (max-width: 1279px) { .lm-masthead .lm-search { display: none; } } .lm-masthead .lm-search .hfe-search-button-wrapper, .lm-masthead .lm-search .hfe-search-form__container, .lm-masthead .lm-search .hfe-search-form__input { width: 100%; box-sizing: border-box; } .lm-masthead .lm-search .hfe-search-form__container { min-height: 44px; /* tap-target floor */ } /* The plugin's reset control is a real