/* ============================================================ LEVRG v3 - THE SHARED PAGE HEADER An inner page cannot reuse the home hero: that composition is a floating light panel with cards flanking centred type, cut by the panel's edges, and it is founder-locked for the home page specifically. Repeating it would make every page look like a second home page and bury what the page is about. But the NAV must be the same nav - not a lookalike. `/automations/` proved why: it was hand-built with the D-142.2 header while home shipped D-143.2's, so the site had two menus after two pages. The markup now comes from `_shell/nav.html` verbatim on every page including home, which means every rule in herofloat.css that styles `.hf__bar ...` already applies here and nothing is restyled. This file only supplies the SURFACE the bar sits on. ⚠️ `.sh` must be `position: relative`. The dropdown panel is `position: absolute` against the nearest positioned ancestor - on the home page that is `.hf`. Without this, the panel would position against the viewport and land somewhere else entirely. ============================================================ */ .sh { position: relative; z-index: 60; background: var(--paper-warm, #FFFEFC); /* ⚠️ 8px, AND IT IS DERIVED FROM HOME'S BAR — not a value that looked right. Founder: "make sure the header in all pages is at the same location and not up or down". Measured at 1440, the wordmark's centre line sat at y=41 on home, y=57 here and y=65 on the floating hero: three pages, three headers. Home's `.hf__bar` is `padding: 16px` around 50px of content, so its content centre is at 16 + 25 = 41. The pill on this page is `padding: 8px` around the same 50px, so to put ITS centre at 41 the host must contribute 41 − 8 − 25 = 8px. That is the whole calculation, and it is why this is 8 and the floating one is 0 — the two bars have different internal padding, so the same host padding would guarantee they disagree. */ padding-block: 8px; } .sh__in { position: relative; } /* The bar inside the hero sits on a light panel and needs no ground of its own. On its own it needs the pill, or the links float loose on the page. */ .sh .hf__bar { background: var(--white); border-radius: var(--r-pill); padding: 8px 10px 8px 20px; box-shadow: 0 1px 2px rgba(15,15,15,0.05), 0 10px 26px -14px rgba(15,15,15,0.22); } /* ---- THE PAGE HEAD ------------------------------------------ Left-aligned, because an inner page is read rather than landed on. */ .crumb-row { padding-top: var(--s5); } /* ⚠️ NOT `--ink-4`, AND THE REASON GENERALISES. #6E6E6E measures 4.55 on clean `--paper` — it passes by five hundredths, so ANY tint under it fails. On /voice-ai/ the floating hero panel's drop shadow falls exactly where the crumb sits and takes the ground from #F6F7F8 to #ECECF0: all three crumb links came out at 4.33. The shadow is correct and the crumb is correct; the COLOUR had no margin. #5F5F5F is the same value the `.paper2` utility uses, so the site has one answer for "a grey that survives a tinted ground". */ .crumb { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #5F5F5F; } .crumb a:hover { color: var(--ink); } .crumb span { color: var(--line-2); } .ph2 { padding-block: var(--s5) var(--s7); } .ph2 h1 { font-size: clamp(38px, 5vw, 66px); line-height: 1.04; letter-spacing: -0.02em; max-width: 17ch; } .ph2__lede { margin-top: var(--s4); max-width: 54ch; } .ph2__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); margin-top: var(--s5); } .ph2__alt { font-size: var(--t-sm); color: var(--ink-3); } .ph2__alt a { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--line-2); } .ph2__alt a:hover { border-bottom-color: var(--ink); } /* ---- SECTION MARK ------------------------------------------- The numbered label the home page uses, so a section on an inner page is marked the same way. Green on the number only - a signal, never a fill. */ .mark { display: flex; align-items: baseline; gap: 12px; margin-bottom: var(--s4); } .mark__n { font-family: var(--mono); font-size: var(--t-xs); color: var(--brand); font-variant-numeric: tabular-nums; } .mark__t { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); } /* ---- TOUCH TARGETS ------------------------------------------ A link renders at its line box and nothing more: the breadcrumb came out 16px tall and the "ring it yourself" line 20px. Padding, never font-size — the type scale is not the problem. ⚠️ TWO THRESHOLDS, AND THE POINTER PICKS, not the width. WCAG 2.2 SC 2.5.8 wants 24px; a thumb wants 44. A width breakpoint gets this wrong at both ends — it leaves a desktop crumb at 16px (under the 24 minimum, and the sweep read it as failing at 1280, 1440 and 1600) and it would apply the 44 to a stylus on a large tablet. `(pointer: coarse)` asks the question the requirement is actually about. */ .crumb a, .ph2__alt a { display: inline-flex; align-items: center; min-height: 24px; } @media (pointer: coarse) { .crumb a, .ph2__alt a { min-height: 44px; } } /* ============================================================ THE FLOATING HEADER (`nav: float`) For a page that opens on a full-bleed hero the bar sits OVER it rather than on a band of its own — the way the home page's does. It is the same nav markup and the same pill; only the surface changes, which is the whole point of having one copy. ⚠️ `position: absolute`, NOT `fixed`. Fixed would follow the reader down a 7,500px page, and this site has no sticky header — the mobile menu's close control lives in this bar, and a bar that scrolls away with the page is the correct behaviour there (the sheet locks the page while it is open). Absolute also keeps it inside the same stacking context as the hero it sits on. ⚠️ IT KEEPS `.sh`'s `position: relative` JOB. The Solutions dropdown is absolute against the nearest positioned ancestor; `.sh__in` is that ancestor in both modes, so the panel lands in the same place here as on a solid page. ============================================================ */ .sh--float { position: absolute; top: 0; left: 0; right: 0; background: transparent; z-index: 60; /* zero, because `.sh--float .hf__bar` below carries home's own `padding: 16px` — the bar is already 82px tall and its content centre already lands at 41. Any host padding here pushes the header down past home's. */ padding-block: 0; } /* ⚠️ FULL-BLEED, BECAUSE HOME'S BAR IS. The builder wraps the header in a `.wrap`, which caps it at `--max` and adds a gutter — so at 768 the floating bar had less room than home's, wrapped its links to a second line and grew to 102px tall, putting the wordmark at y=51 against home's 41. The bar was not positioned differently; it was a different SIZE, which is harder to see and was only caught by measuring the same element on both pages at seven widths. Home's bar spans the viewport and insets itself with its own 48px padding; this one now does the same, so the two wrap at the same point. */ .sh--float .sh__in { max-width: none; padding-inline: 0; } /* ⚠️ NO PILL WHEN THE BAR FLOATS. Founder: "the header in the voice ai page isnt like this in home page". Measured rather than eyeballed — home's `.hf__bar` computes to `background: rgba(0,0,0,0)`, `border-radius: 0`, `box-shadow: none`, `padding: 16px 48px`, spanning the full width. It needs no ground because it already sits on the hero's light panel. `.sh`'s pill exists for the OTHER case: a page with no panel under the header, where the links would otherwise float loose on the page. A floating bar by definition has a panel under it, so the pill is not just different from home — it is solving a problem that does not exist here, and the white capsule on a warm-white panel was two nearly-identical whites arguing. */ .sh--float .hf__bar { background: transparent; border-radius: 0; box-shadow: none; padding: 16px var(--s5); width: 100%; } /* ============================================================ AND THE SAME ALIGNMENT ON A PHONE. ⚠️ THE PILL'S PADDING CHANGES BELOW 760 AND THE HOST'S HAS TO FOLLOW. Home's bar switches to `padding: 12px var(--s3)` at phone widths (nav.css), putting its content centre at 12 + 22 = 34. The pill kept its 8px and the host kept its 8px, which lands at 38 — four pixels, on every page except home, on every phone. Small enough that nobody reports it and it never gets fixed. The host goes to zero and the bar takes home's own phone padding, so all three pages resolve to the same 34. Verified at 700, 600, 390 and 360. ============================================================ */ @media (max-width: 760px) { .sh { padding-block: 0; } .sh .hf__bar { padding: 12px var(--s3); } }