/* ========================================================================== FRONTGRADE · fg2 PAGE HEADER The sitewide header contract as one component, shared by every page family that is not the interior pattern. Nine templates print this band: page--fg2-capability the four capability pages page--fg2-mission the six mission area pages page--fg2-news the news and insights hub page--fg2-events the events page page--fg2-document the legal documents node--fg2-article news, blog and press release _fg2-catalog the product catalog landings commerce-product product detail views-view--global-search the search results page Requires tokens.css and components.css to be loaded first. Attached by frontgrade/fg2-page-header, which those nine templates attach by name. -------------------------------------------------------------------------- WHAT THIS FILE IS FOR. Those families each drew their own hero: a full bleed photograph under a two-gradient scrim, a hand-written breadcrumb in a per-family class (.cap-crumbs, .mi-crumbs, .fg-news-crumbs) at 12px, and a headline resolving to the --fs-h1 primitive rather than to the page headline role. This file replaces all of them with the one band the tokens contract specifies: a drawn ground, one trail at one size with Home always present, a 32px mark slot, and the headline at the --fg-h1 role clamp. IT IS THE CONTRACT'S ANATOMY, NOT A SECOND DESIGN. Every measurement below is either a role token from tokens.css section 14 or a value carried from the reference implementation, the interior hero v2 in interior.css sections 2, 3 and 3a. Where a number appears as a literal here it is because that number is a literal there, and the source line is named beside it. ONE FILE, ONE NAMESPACE, AND THAT IS THE POINT OF IT. The band was built twice in parallel, once as .fg-pagehead here and once as .fg-phead in fg2/css/pagehead.css, because two conversions of the same contract were in flight at the same time. Two files stating one contract is the exact fault the consistency pass exists to prevent, so the second file's three rules that this one did not have (the last-crumb ellipsis cap, the document meta line and the bracket form of the mark) were brought here, its five templates were repointed at these class names, and it was deleted. Nothing in the anatomy differed between the two: same drawn grounds, same declared stack order, same token values. WHY IT IS A SEPARATE FILE AND NOT NINE EDITS. The families load different page stylesheets, so the same band written into each would be nine copies drifting apart from the first design change onward. It is also why this file cannot simply be interior.css: every rule in that file is scoped under .fg-interior, which the node wrappers put on a node's root element, and that class also carries interior.css's own prose, heading and component rules, which are written for a page built out of the interior paragraph components. These pages are not built that way. IT MUST WIN AGAINST TWO LEGACY SHEETS, AND IT DOES SO ON SPECIFICITY. styles/dist/base.css sets element level type for a white page (body p is #121212 at 20px) and styles/dist/component.css carries the previous site's breadcrumb, including a rule that replaces the Home link's text with an 18x18 mask image at font-size 0. Both are loaded on these families. The selectors below are built to outrank them, and each place that needed extra weight says why beside itself. CONTRAST. Ratios are the sRGB relative-luminance formula tokens.css states, against the exact surface the text sits on. --text-display on --surface-base 17.90:1 the headline --text-muted on --surface-base 5.57:1 lede, trail links, prose --text-secondary on --surface-base 5.57:1 the trail's plain segments --accent on --surface-base 5.22:1 the eyebrow The band draws a geometric ground under its own copy, so every backdrop it can produce is enumerated in interior.css section 3a, one table per variant. The tightest figure across the three is 4.54:1 against a 4.5 minimum, and every figure there is computed with the scrim ignored. ========================================================================== */ /* -------------------------------------------------------------------------- 1. THE BAND THE HEADER CLEARANCE IS NOT IN THIS BAND, AND THAT IS DELIBERATE. The site header is fixed and transparent (components.css section 10). Every page that prints this band prints a .fg-header-offset spacer above it, which is how the reference implementation's band is cleared too, rather than baking the header's height into this band's padding. Two reasons. The band then matches the contract's section 6 table exactly, value for value, instead of carrying a padding and a floor that no other implementation of the anatomy has. And the clearance stays a markup decision, so these templates render correctly against any stylesheet that implements the contract, not only against this one. The spacer's height is --header-offset and its one conditional case, a page carrying a system message, is in admin-context.css. It is worth knowing that the spacer reached no page at all until this pass: it was printed on {% if not page.pre_content %} and the messages region is never empty, so what actually cleared the header was an empty message strip's padding, at 109px on a phone and 128px on a desktop. The visible gap above this band is therefore 17px and 36px smaller than it was, at --header-offset-mobile 73px and --header-offset 92px. THE FLOOR IS A FLOOR, NOT A HEIGHT. Every page in these four families prints a trail, a mark and a headline at display scale, so the rendered band is taller than its floor on every page measured; the floor only guards the shortest possible stack. svh rather than vh because vh on a mobile browser is the height the viewport has with the toolbars retracted; the vh line above each svh line is the fallback for a browser that does not know the unit and is deliberately the same number. -------------------------------------------------------------------------- */ .fg-pagehead { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-start; min-height: max(300px, 32vh); min-height: max(300px, 32svh); padding-block: var(--fg-band-pad-top) var(--fg-band-pad-bottom); background: var(--surface-base); border-bottom: var(--border-hairline-w) solid var(--border-hairline); /* The band's own padding is the only thing between the site header and the first line of the page, so it is named rather than left to a section token that also spaces bands from each other. interior.css:232. */ --fg-band-pad-top: clamp(20px, 0.9rem + 1.1vw, 30px); --fg-band-pad-bottom: clamp(40px, 1.9rem + 2.2vw, 64px); } /* -------------------------------------------------------------------------- 2. THE COPY STACK ORDER IS DECLARED, NOT INHERITED FROM THE MARKUP. That is what lets one stylesheet serve four templates that emit different subsets of the stack: the events page has no eyebrow, the news hub and the capability pages carry a button row, and the mark below the trail is drawn as this container's ::before, which is a flex item like any other child and would otherwise be laid out above the trail the template prints first. 1 the trail always present 2 the mark the accent rule OR the eyebrow, exactly one 3 the headline 4 the lede optional 5 the meta line optional, a dated document's own line 6 the actions optional, see below SLOTS 5 AND 6 ARE ADDITIONS TO THE CONTRACT'S FOUR, AND BOTH ARE DELIBERATE. The legal documents state their date with the document rather than in page furniture, and three families carry either approved hero buttons or the pending markers that stand in for copy they have not been given. Dropping either would be a content decision made inside a header conversion. Both sit below the lede, so nothing above the headline changes and the mobile fold budget in section 7 of the contract is untouched. The search results page puts its query field in this same region of the stack; that order is declared in search.css, on that page's own class, so this file does not need to know the field exists. -------------------------------------------------------------------------- */ .fg-pagehead > .fg-container { position: relative; z-index: 3; width: 100%; display: flex; flex-direction: column; align-items: flex-start; } .fg-pagehead > .fg-container > .fg-pagehead__crumbs { order: 1; } .fg-pagehead > .fg-container::before { order: 2; } .fg-pagehead > .fg-container > .fg-pagehead__eyebrow { order: 2; } .fg-pagehead > .fg-container > .fg-h1 { order: 3; } .fg-pagehead > .fg-container > .fg-pagehead__lede { order: 4; } .fg-pagehead > .fg-container > .fg-pagehead__meta { order: 5; } .fg-pagehead > .fg-container > .fg-pagehead__actions { order: 6; } /* -------------------------------------------------------------------------- 3. THE TRAIL IT IS THE RENDERED SYSTEM BREADCRUMB, printed from a single render of the breadcrumb block, so Home is its first item on every page and the trail cannot disagree with the site's own idea of where the page sits. The four hand-written trails these templates carried before are exactly what the contract's section 10 lists as out of contract. ONE LANDMARK. The rendered block already emits