/*
* PROVENANCE — this file is a copy. Do not edit it here.
* ─────────────────────────────────────────────────────────────────────────
* Entry mega-featured
* Entry version 3.0.1
* Source theme-builds/library/menus/mega-featured/
* SHA-256 490272b78bb07cccfb0e5a215a04e9ba62ca31b78ebfb2ff6074f2d7ec37e015
* Pulled 2026-09-02
* Substrate base.css, "Menu organism substrate" and "Buttons inside a
* navigation block". Both are required. Without them the
* panel renders and is wrong, and neither failure errors
* Specificity mega-featured-specificity.md in the entry folder — five
* collisions, each with the selector it must beat and its
* count. Read it before simplifying any doubled class
*
* The hash is of the library file as pulled, not of this file. A fix made
* here and not carried back is invisible to the next theme that pulls.
* ─────────────────────────────────────────────────────────────────────────
*/
/*
* mega-featured.css — the flagship mega menu panel, design layer.
*
* One organism, one file. A bounded full-width panel opening beneath a top-
* level navigation item, carrying four zones: a featured band, a service
* group, an entry-point anchor card inside the band, and a resources strip
* along the foot. The organism from gravitysite-header-standards.md section 4.
*
* THIS FILE IS THE DESIGN HALF ONLY. The rules that exist to beat core, the
* parent theme, or Spectra are not here — they are the substrate, and they
* live in base.css under "Menu organism substrate". This file assumes they
* are present and will not lay out correctly without them. The substrate is
* a dependency of this entry, not an implementation detail of it.
*
* Rules a–h correspond to what shipped as site.css section 3, rules 3a–3h,
* at gravitystack-main 4.15.1, less the substrate. 3i — the focus ring on the
* submenu toggle — is wholly substrate and has no counterpart here. The
* changelog's references to "rule 3a" and so on resolve through that mapping.
*
* EVERY COLOUR RESOLVES THROUGH theme.json, by one of two channels. Seven come
* from the palette. `brand-12` comes from the primitive scale channel as
* --wp--custom--color--brand-12, which carries every ordinal step the receiving
* client's design file defines — so it is present wherever that design file has
* a brand-12 step, and absent where it does not. It was a client palette
* deviation until 2026-09-01. The check is still the design file rather than
* theme.json; read this entry's tokens.md before copying.
*
* CONTRAST FIGURES IN THE COMMENTS BELOW WERE MEASURED ON GRAVITYSTACK'S
* PALETTE and are provenance, not a guarantee. They are carried so the
* reasoning survives the copy; they are not transferable. Re-measure on the
* receiving client's palette — the ratios move with the tokens, and several
* of the decisions recorded here were reversals forced by a measurement.
*/
/* a. The panel surface.
*
* `.c-mega` is doubled to reach (0,6,0). Core's open-state rule is
* .wp-block-navigation .has-child
* .wp-block-navigation-submenu__toggle[aria-expanded="true"]
* ~ .wp-block-navigation__submenu-container
* at (0,5,0), setting `width: auto` with `min-width: 200px`. The first
* authoring of this rule was (0,3,0), lost, and the panel shrink-wrapped to a
* 200px column. The doubling is the file's existing precedent for reaching a
* class-count core writes deliberately high, not a second technique.
*
* `min-width: 0` and the bounded `max-width` are this organism's design, not
* substrate: the contained-dropdown organism wants core's floor and does not
* want the cap. What IS substrate is the positioning that lets the panel span
* the header at all — see base.css, "Menu organism substrate".
*
* THE PANEL IS A BOUNDED BOX, NOT FULL-BLEED, and this was measured rather
* than assumed. Rendered at a 1600px viewport, the panel was 1600px wide with
* its outline at x=0 and x=1599 — drawing correctly, at the window edges,
* where nobody can see it. The band inside it was a 1188px island at x=206, so
* what read as "the menu" was the band and what read as its edge was the
* band's edge. The panel is capped and centred, so the panel edge and the band
* edge are the same line and the outline lands on it.
*
* THE CAP TRACKS THE CELL COUNT. It was 74.25rem — the wide measure plus its
* gutters, 71.25rem + 3rem — sized when the panel carried a flagship, an
* anchor card, six services, and a resources row. At three services that box
* is built for twice the content it holds: the band's flagship grows to fill
* a row designed for two objects while `.c-mega__featsub` stays capped at its
* 52ch reading measure, so the right half goes empty, and the cells float at
* ~500px carrying text that wraps at ~420px.
*
* 63.25rem is derived, not chosen: three cells at the grid's own 18.75rem
* minimum (56.25rem), two 1.5rem gaps, and the panel's 4rem gutters.
*
* IT WAS 55rem FROM 2026-09-01 UNTIL 4.27.0, AND THE INPUT THAT MOVED IS THE
* CONTENT. The cap came down because three cells at an 18.75rem minimum set the
* widest possible arrangement around the smallest possible content — a one-line
* label and a two-line description — and the panel read as mostly air. Those
* cells now carry an icon, a two-line label at `text-4`, and a description, so
* the content has roughly doubled and the emptiness the reduction was made
* against no longer exists. **Going back up is this note's own instruction being
* followed, not a reversal of it.** The constraint that made it worth doing was
* vertical: at 16rem the middle cell's label wrapped to three lines, and width
* is what buys those back.
*
* WHAT THIS TRADES. The panel edge no longer aligns with the site's wide
* measure. That alignment was deliberate and it is being spent to stop the
* panel reading as half-empty. RECOMPUTE THIS VALUE if either input moves —
* (N × cell-min) + ((N-1) × 1.5rem) + (2 × gutter). A nine-cell panel wants
* the wide measure back.
*
* EVERY TERM IS AN INPUT, and both have moved. 2026-09-01: gutter 1.5rem to
* 2rem because 24px of inset on a 996px overlay read as tight; then cell
* minimum 18.75rem to 16rem because the panel was still too wide for what it
* held. Cap 62.25 to 63.25 to 55rem. Nothing here is a constant. Inline only — the band's `padding-block` stays at 1.5rem,
* since panel height is an open defect with no strategy behind it and adding
* vertical space would make that worse while solving nothing here.
*
* A WHITE RING SITS OUTSIDE THE OUTLINE, because `lg` cannot do this job.
* `lg` is `0 18px 50px rgba(0,0,0,0.06)` — six percent at a 50px blur, tuned
* for a card resting on a page rather than a panel floating above one, and
* against a pale hero it is not visible. The ring is a `gravity-surface` spread
* at 0.5rem, so the panel separates from whatever sits behind it regardless of
* what that is. It uses a colour token rather than inventing a fourth shadow
* preset to solve one organism, and it leaves the outline at offset zero, which
* the note below says is load-bearing. A scrim was raised and withdrawn: the
* design system rejected overlay and scrim as a palette role at v2.0, and
* dimming a practice's page to show its navigation is app chrome.
*
* THE EDGE IS AN OUTLINE AT OFFSET ZERO, and both halves are load-bearing.
* The band and the strip break out to the panel's full width with negative
* inline margins equal to its padding, so their edges land on the outermost
* pixel of the padding box. A border there is covered by them. An outline at
* `-1px` is covered too, because a negative offset puts it on that same pixel
* — verified by sampling the rendered page, where the panel's left edge read
* `rgb(91,124,46)` beside a service cell and `rgb(235,240,226)`, the band's
* own fill, beside the band. At offset `0` the outline is drawn outside the
* border box, where no descendant can reach it.
*
* `container-type: inline-size` HAS NO CONSUMER as of 2.2.0 and is retained
* deliberately. It existed for the band's container query, which f deletes.
* Removing it changes no geometry — measured at 1440, 880, 768, and 640, every
* box identical — but `container-type` also creates a stacking context and a
* containing block, and this element is an overlay sitting above page content.
* A z-order regression on a real page is not something a harness can rule out,
* so it stays until someone can watch the panel over real content with it gone.
* **Retire it then, or write down why it stays.** A declaration kept because
* nobody checked is how a hook quietly becomes load-bearing.
*
* Permitted here under gravitysite-css-standards.md constraint 2 because the
* submenu container is core chrome, not a layout wrapper and not a pattern root.
*/
.c-header .c-mega.c-mega .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
width: auto;
min-width: 0;
max-width: 63.25rem;
margin-inline: auto;
border-radius: var(--wp--custom--rounded--lg);
overflow: hidden;
container-type: inline-size;
background-color: var(--wp--preset--color--gravity-surface);
color: var(--wp--preset--color--gravity-text);
border: 0;
outline: 2px solid var(--wp--preset--color--brand-11);
outline-offset: 0;
box-shadow: 0 0 0 0.875rem var(--wp--preset--color--gravity-surface), var(--wp--preset--shadow--lg);
padding: 0;
}
/* b. The featured band.
*
* NO TOP BORDER, AND THE PANEL'S OWN EDGE IS WHY. The band carried a 2px
* `brand-11` divider from its authoring. It is the panel's first child and
* breaks out to the full width, so that border landed on the same pixel row as
* the panel's 2px `brand-11` outline — 4px of one colour reading as a heavy
* top edge, and a divider between the band and nothing. Doubled from the day
* the band broke out; `rounded--lg` at 4.26.0 is what made it visible, because
* a corner shows where one line stops and the other does not.
*
* The contrast provenance is kept because the value is still in use elsewhere:
* `brand-11` measures 4.14:1 on the nested fill and 4.81:1 on white, both
* clearing the 3:1 our own standard sets for dividers — stricter than WCAG's
* decoration exemption. brand-9 was measured and rejected at 1.96:1 and 2.28:1.
*/
/* BAND AND STRIP ARE `
`, SO THEY NEED A LIST ITEM'S DEFAULTS OFF.
* `display: list-item` is preserved through grid blockification, and core's
* `list-style: none` is scoped to `.wp-block-navigation-item`, which these are
* not. Both are declared rather than inherited so the zones do not depend on a
* core selector that has no reason to keep reaching them.
*/
.c-mega__band,
.c-mega__strip {
display: block;
list-style: none;
}
.c-mega__band {
background-color: var(--wp--preset--color--gravity-surface-nested);
padding-block: var(--wp--preset--spacing--40);
}
/* THE EYEBROW'S OWN MARGIN SETS THE GAP, so the layout's block-gap must not.
* `.c-mega__band` is a `constrained` layout, which applies block-gap between
* its children as a `margin-block-start` on each one after the first. That
* value is larger than the eyebrow's `margin-bottom` and therefore wins, so
* tuning the eyebrow did nothing until this rule existed. Zeroed here rather
* than by raising the eyebrow's margin to match, because two values competing
* for one gap is how the number stops being readable from the file.
*/
.c-mega__band-inner {
align-items: start;
gap: var(--wp--preset--spacing--50);
margin-block-start: 0;
}
/* THE BAND CARRIES TWO OBJECTS. `.c-mega__band-inner` is a flex row and was
* authored for a flagship beside an anchor card. When the card was removed on
* 2026-09-01 the flagship grew to fill the row while `.c-mega__featsub` stayed
* capped at its 52ch reading measure, so the right half went empty — and three
* rounds of edge, shadow, and padding treatments were spent on what was
* actually a hole.
*
* The second object is made from content that already exists rather than from
* a new asset. Eyebrow and headline left; supporting line and link right. An
* image was considered for this slot and refused: it would oblige every client
* build to source and crop one, making the good case depend on the least
* reliable input in a build, and a photograph in a local practice's nav reads
* as performed scale.
*/
.c-mega__flagship {
flex: 1 1 20rem;
min-width: 0;
}
.c-mega__support {
flex: 1 1 16rem;
min-width: 0;
}
/* THE EYEBROW LABELS THE BAND, not the left column.
*
* It sat inside `.c-mega__flagship` until 2026-09-01, which pushed the headline
* about 55px below the top of the supporting column and made the band's
* dominant object look like it was sagging. Dropping it was considered and
* refused: the contract instructs the headline to carry THE PROMISE, NOT THE
* PRODUCT NAME, and the eyebrow is what licenses that. Without it the panel
* does not say what the thing is called until the link at the foot of the other
* column. Lifting it to band level keeps the naming and lets both columns
* top-align against each other.
*/
/* THE EYEBROW TAKES THE BAND-INNER'S MEASURE, and it needs the alignment to get
* it. The band is a `constrained` layout, so a default child resolves to the
* theme's content size while `.c-mega__band-inner` is `alignwide` and breaks
* out past it. The two were never aligned; lifting the eyebrow to band level on
* 2026-09-01 is what made the difference visible. Authored as `align: wide` on
* the paragraph rather than fixed here with a `max-width`, so the two elements
* resolve against the same layout rule instead of landing on the same number by
* coincidence and drifting the next time `wideSize` moves.
*/
.c-mega__eyebrow {
font-size: var(--wp--preset--font-size--text-1);
font-weight: var(--wp--custom--weight--strong);
letter-spacing: var(--wp--custom--tracking--wide);
text-transform: uppercase;
color: var(--wp--preset--color--gravity-text-muted);
margin: 0 0 0.5rem;
}
/* c. The featured line, and why it is a link.
*
* The promise is the destination — leading with the proper noun would put a
* name where a promise belongs, per section 4. brand-12 on hover measures
* 9.47:1 on the nested fill. brand-11 was the original authoring and fails
* here at 4.14:1 against a 4.5:1 bar; the design file's note that brand-11
* clears "by only 1.3%" refers to surface-subtle, which is a lighter ground
* than this band.
*/
.c-mega__featline {
margin: 0;
}
.c-mega__featline a {
font-family: var(--wp--preset--font-family--outfit);
font-size: var(--wp--preset--font-size--text-6);
font-weight: var(--wp--custom--weight--strong);
line-height: 1.15;
color: var(--wp--preset--color--gravity-text);
text-decoration: none;
}
.c-mega__featline a:hover {
color: var(--wp--preset--color--action-11);
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 2px;
}
/* THE SUBLINE TAKES FULL BODY COLOUR, NOT MUTED. `gravity-text-muted` on the
* band's nested fill is 5.13:1 — compliant, and it still read as faint at
* `text-2` across a 52ch measure, which is a long line of small light type.
* `gravity-text` is 14.06:1 and does not compete with the headline, because the
* hierarchy there is carried by a size gap of several steps rather than by
* dimming the supporting line.
*
* THE CELL DESCRIPTIONS DO NOT FOLLOW IT, and that is a dependency rather than
* an inconsistency. `.c-mega__name` is distinguished from the description
* around it by being `gravity-text` where that description is muted. Darken the
* descriptions and the name has no remaining signal — the weight came off at
* 4.25.2 and the colour cannot come off too.
*/
.c-mega__featsub {
font-size: var(--wp--preset--font-size--text-2);
color: var(--wp--preset--color--gravity-text);
margin: 0.5rem 0 0;
max-width: 52ch;
}
/* d. The flagship link.
*
* Underline on the text only, arrow outside it, so the arrow does not sit on
* a rule. The arrow is aria-hidden in the markup — it carries no meaning the
* label does not already state. 44px target per the fleet exceedance above
* the 24px AA minimum.
*/
/* 0.5rem, NOT 1.25rem, BECAUSE THE ANCHOR CARRIES ITS OWN AIR. `.c-mega__flink a`
* is `min-height: 44px` with centred content — the fleet target-size exceedance
* — so roughly 10px sits above the text inside the link before this margin
* begins. 4.26.0 set 1.25rem reading the gap as too tight and measuring only
* the margin. The visual gap is the sum, and the 44px is not negotiable.
*/
.c-mega__flink {
margin: 0.5rem 0 0;
}
.c-mega__flink a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
min-height: 44px;
font-size: var(--wp--preset--font-size--text-2);
font-weight: var(--wp--custom--weight--strong);
color: var(--wp--custom--color--brand-12);
text-decoration: none;
transition: color 0.14s ease;
}
.c-header .c-mega__flink a:hover {
color: var(--wp--preset--color--action-11);
}
/* NO UNDERLINE AT REST, AND THE FLEET RULE IS WHY.
*
* `gravitysite-design-system-standards.md`: links inside prose elements are
* underlined; navigation, breadcrumbs, logos, and card-wrapper links are not.
* **Location is not the predicate; the `nav` landmark is.** This panel renders
* inside `core/navigation`, so every link in it is a nav link and the underline
* these spans carried was the deviation, not its removal.
*
* WHAT REPLACES IT IS COLOUR PLUS ARROW, AND TWO SIGNALS IS THE FLOOR HERE.
* On 2026-09-01 the strip link was tried with no colour, no underline, and no
* arrow, and read as a sentence someone forgot to delete. 4.25.2 removed the
* colour and kept the other two, on the reasoning that the strip had gained its
* own fill. 4.26.0 removes the underline AND the fill, so both of 4.25.2's
* remaining signals would have gone with them — which is why the strip link
* takes `brand-12` back below. The spans stay in the markup: hover still
* underlines through them, and the entry's other builds may want them.
*/
.c-mega__flink-txt {
text-decoration: none;
}
.c-mega__flink-arw {
font-size: var(--wp--preset--font-size--text-3);
line-height: 1;
transition: transform 0.16s ease;
}
.c-mega__flink a:hover .c-mega__flink-arw {
transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
.c-mega__flink-arw { transition: none; }
}
/* e. The entry-point anchor card.
*
* A different kind of object, per section 4 — different shape, different
* placement, not another line in a list. It carries FOUR elements where a
* navigation-link gives two text slots, which is why it is an authored group.
* Its framing line states the band's relationship and IS the Design Team's
* ruling, not decoration.
*
* SEPARATED BY ELEVATION, NOT BY A BORDER, and the design file called this in
* advance. Its note on `surface-nested` says the second ceiling is the card
* border, "which the fill converges on until distinct's edge disappears into
* its own card." Measured here: `gravity-border` on the band is 1.21:1 and the
* white fill against the band is 1.16:1, so a bordered white card on this
* surface is below the 3:1 our own standard sets for dividers and would not
* read even if it were exempt. A shadow carries no contrast obligation and is
* what elevation exists for.
*
* Vertical bulk is deliberately low so the card stops setting a height the
* flagship does not fill — Saarinen's composition finding, that the dominant
* object was floating in space defined by the subordinate one.
*
* TRIPLED TO (0,4,0) FOR THE PADDING, and the collision is the parent theme's
* rather than core's. Spectra One emits
* .wp-block-group.is-layout-flow.wp-block-group-is-layout-flow
* { padding-left: 0; padding-right: 0 } (0,3,0)
* against `.c-mega__anchor` at (0,1,0), so the card declared `padding: 1.5rem`
* and computed `24px 0px`. The raise is forced by the parent; the declarations
* it carries are this organism's design, which is why the whole rule is here
* and not in the substrate section.
*/
.c-header .c-mega__anchor.c-mega__anchor.c-mega__anchor {
flex: 0 1 24rem;
align-self: center;
background-color: var(--wp--preset--color--gravity-surface);
border-radius: var(--wp--custom--rounded--md);
box-shadow: var(--wp--preset--shadow--sm);
padding: 1.5rem;
}
/* The framing line is a sentence, and 4.9.0 set it as a label.
*
* It was tried uppercase and tracked, to separate it from the name beneath it
* without adding a size step. That was wrong for this content: it is a
* seven-word sentence, and seven words of tracked caps wrap to two lines and
* shout, which put the MOST emphatic type in the card on the line meant to
* lead into the name rather than on the name. The band's own eyebrow can take
* that treatment because it is one word.
*
* Set as what it is: a quiet sentence, sized down and lightened, with the name
* carrying the weight. It is the Design Team's ruled framing line, so it has
* to be readable as a sentence rather than parsed as a tag.
*/
.c-mega__anchor-frame {
font-size: var(--wp--preset--font-size--text-1);
font-weight: var(--wp--custom--weight--normal);
color: var(--wp--preset--color--gravity-text-muted);
line-height: 1.4;
margin: 0 0 0.375rem;
}
/* The name carries the card, so it takes a real size step.
*
* text-3 put it level with a service cell's label, which is the one thing
* section 4 says this object must not read as — an entry-point anchor sitting
* in the same menu as its paid siblings reads as a lesser version of them
* unless it is visually AND verbally distinct.
*/
.c-mega__anchor-h {
font-family: var(--wp--preset--font-family--outfit);
font-size: var(--wp--preset--font-size--text-4);
font-weight: var(--wp--custom--weight--strong);
line-height: 1.2;
margin: 0 0 0.25rem;
}
.c-mega__anchor-sub {
font-size: var(--wp--preset--font-size--text-2);
color: var(--wp--preset--color--gravity-text-muted);
line-height: 1.4;
margin: 0 0 0.75rem;
}
/* The button sizes to its label, and 4.10.0 had it fill the card.
*
* Filling it was argued as making the card look finished. Rendered, a
* full-width violet bar reads as a banner rather than as a button, and it put
* the heaviest object in the band inside the SUBORDINATE element — which is
* the inversion Saarinen's composition finding was about. Sized to its label
* it reads as what it is.
*
* `padding-block: 0` against `min-height: 44px` is deliberate: the button
* inherits vertical padding from the theme's button style, which stacks on top
* of the min-height and made the card taller than the flagship beside it. The
* 44px floor is the fleet target-size exceedance and is what sets the height.
*
* THE HOVER LABEL IS NOT AUTHORED HERE. Spectra Blocks repaints any anchor
* inside a navigation block on hover, and on this button that measured 1.21:1
* — an SC 1.4.3 failure on a primary call to action. The fix is fleet and
* lives in base.css, "Buttons inside a navigation block", because the defect
* is in the stack rather than in this organism. This entry depends on it.
*/
.c-mega__anchor-btn .wp-block-button__link {
min-height: 44px;
padding-block: 0;
padding-inline: 1.75rem;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--wp--preset--font-size--text-2);
}
/* f. THE BAND HAS NO STACKING RULE, AND MUST NOT BE GIVEN ONE.
*
* It stacks on `flex-wrap` alone. `.c-mega__flagship` is `flex: 1 1 20rem` and
* `.c-mega__support` is `flex: 1 1 16rem`, with a 2rem gap between them, so the
* two sit side by side while the container holds 38rem and wrap to full width
* below it. That threshold is not written anywhere because it does not need to
* be: it is the sum of the two bases three rules above, and it follows them
* automatically whenever either changes.
*
* WHAT WAS HERE, AND WHY IT IS GONE. A `@container (max-width: 860px)` block
* flipping the band to a column, authored when the band held a flagship and an
* anchor card. It restated the wrap threshold as a second, hand-maintained
* number — and got it wrong. `container-type: inline-size` queries the CONTENT
* box, and the panel is capped at 55rem carrying 2rem gutters, so the container
* reports 51rem (816px) at every desktop width. 816 is under 860, so the query
* matched permanently: THE BAND HAS NEVER RENDERED AS A ROW ON ANY VIEWPORT.
* The 4.22.0 split that created these two objects was never seen doing its job,
* and the 4.22.2 basis reset was a correct fix to a rule that should not exist.
*
* Measured, not reasoned: at a 816px threshold the band stacks and at 815px it
* goes to row, nothing else changed. With the query removed the band is a row
* from 816px down to 596px and wraps below, and the panel loses 88px of height
* at desktop as a by-product.
*
* THE GENERAL RULE THIS IS AN INSTANCE OF. A container query threshold on this
* panel is a second expression of the derived cap — same class as the gutter
* that was written as a constant at 4.20.1 and moved the first time it was
* tested. If a future arrangement genuinely needs one, derive it from the cap's
* own inputs rather than typing a number, and verify it against the CONTENT box
* rather than the cap.
*/
/* g. The service group, and why the grid is on core's list.
*
* The service cells are direct children of the submenu container, SIBLINGS of
* the band and the strip, because a navigation-link cannot be wrapped — a
* wrapper group holding links would nest an anchor inside a structure core
* does not render. So there is no element that contains only the cells, and
* the grid has to go on the container they share.
*
* It resolves without a wrapper: the container is the auto-fit grid, and the
* band and strip span every column with `grid-column: 1 / -1`. The cells then
* flow into the columns on their own.
*
* auto-fit rather than a fixed three columns, so the count is self-selecting
* and a client with four, five, or seven services does not orphan a cell.
* Settled 2026-08-31.
*
* GUTTERS ARE A FIXED TOKEN, NOT A COMPUTED INSET. An earlier version carried
* the constrained measure as a percentage padding on the panel and a
* container-query escape on the band, with a long comment explaining why one
* number needed two expressions. Measured, they resolved to 230px and 24px —
* the exact mismatch the two variables existed to prevent, in the opposite
* direction, so the band stopped 206px short of the panel edge. With the panel
* bounded, the gutter is just `spacing-20` on the panel against `spacing-40`
* inside the band and strip's negative margin, and all three land on the same
* line. Two fixed values that cannot disagree.
*
* The band and strip rules are doubled to (0,3,0) for the same parent-theme
* padding collision recorded at e.
*/
.c-header .c-mega.c-mega .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
display: grid;
/* 16rem, not 18.75rem. The cell minimum is the panel's real width control —
* the cap is derived from it, so a generous minimum produces a wide panel
* carrying whatever it carries. At three cells 18.75rem set the widest
* possible arrangement around the smallest possible content, and the panel
* read as mostly air. Density is what makes an overlay read as an object;
* separation treatments cannot rescue a sparse one. Descriptions wrap to
* three lines here rather than two, which is the trade. */
grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));
column-gap: var(--wp--preset--spacing--40);
row-gap: 0;
padding-inline: var(--wp--preset--spacing--50);
}
.c-header .c-mega__band.c-mega__band,
.c-header .c-mega__strip.c-mega__strip {
grid-column: 1 / -1;
margin-inline: calc(-1 * var(--wp--preset--spacing--50));
padding-inline: var(--wp--preset--spacing--50);
}
/* THE BLOCK MARGINS SIT AT THE SAME SPECIFICITY AS THE INLINE ONES ABOVE, and
* they have to since entry 3.0.0 made these zones `
`.
*
* They were authored as bare `.c-mega__band` and `.c-mega__strip` at (0,1,0)
* and held for as long as the zones were `
`. The tag change put them
* inside the scope of core's navigation stylesheet, which resets margins on
* `li` through element-plus-class descendant selectors that outrank a bare
* class — so the declarations stayed in the file, stayed readable, and stopped
* reaching the page. Roughly 11px went out of the gap under the band with
* nothing erroring.
*
* `margin-inline` in the rule above never had the problem, because it was
* already authored at (0,3,0) against the parent-theme padding collision. The
* block margins are the same class of declaration at a weaker specificity, so
* both axes now sit in one place at one strength.
*
* SECOND INSTANCE OF A FAULT CLASS, and the reason it is recorded rather than
* patched. The eyebrow's `margin-bottom` was inert the same way at 4.27.0 —
* beaten by the band's constrained-layout block-gap. A declaration that is
* present, readable, and inert is the failure both share, and it does not
* error. The collision is now carried in `mega-featured-specificity.md` with
* the selector it must beat, so a build copying this entry does not rediscover
* it by losing the gap.
*/
.c-header .c-mega__band.c-mega__band {
margin-block-end: var(--wp--preset--spacing--30);
}
.c-header .c-mega__strip.c-mega__strip {
margin-block-start: var(--wp--preset--spacing--20);
}
/* The service cell's box.
*
* The stacking half of this rule — `display: block` and `flex-grow: 0`, which
* beat core's flex on the item content at (0,4,0) — is substrate and lives in
* base.css. What is left here is the cell's own design: its padding, its
* corner, and the transition its hover rides on. The selector is unchanged
* from the substrate rule's, at (0,5,0), so the two halves cannot disagree;
* this file loads after base.css, so if they ever did, the design half wins,
* which is the correct direction.
*
* The 2px in the inline padding is not arbitrary. It is the 2px the removed
* hover bar used to occupy, moved here at 4.12.1 so the label's position is
* unchanged by the bar's removal.
*/
/* THE CELL IS A BOUNDED OBJECT AT REST, not a column of text.
*
* It carried no boundary until 2026-09-01: three cells in a row read as three
* paragraphs, and giving the label a link colour was not enough on its own.
* A border makes each cell a thing, and the hover fill then deepens an object
* that already exists rather than conjuring one.
*
* PERMITTED BY THE CARD DOCTRINE RATHER THAN AGAINST IT. The standard refuses
* hover and elevation on cards because "a card carrying a title and a body has
* nothing to click", and reserves both for a linked card variant if one is
* built. This is that variant: the whole cell is a single anchor. No elevation
* is taken — the boundary is a rule, not a shadow.
*
* `neutral-6` through the primitive scale channel, NOT `neutral-3`. The
* standard names `neutral-3` as the rule colour and it is right for a rule
* between rows on a tinted ground. On white it is #eff1ef — about 1.06:1, a
* border nobody can see. A boundary that cannot be seen is not a boundary, so
* this steps to #d7dad7, quiet but present. Recorded because reaching for the
* named rule colour was the obvious move and it was wrong here.
* Padding rises with the border so the text does not gain a second inset; the
* cell's total inline inset still sums with the grid's `spacing-20` to the
* panel's 2rem gutter.
*/
.c-header .c-mega__svc.c-mega__svc.c-mega__svc .wp-block-navigation-item__content {
padding: 0.875rem 1.25rem;
border: 1px solid var(--wp--custom--color--neutral-6);
/* The grid holds the 2rem gutter as of 4.22.1, so this padding is the cell's
* own inset from its border rather than part of the panel gutter. Before the
* border existed, the grid held 0.5rem and the cell made up the rest — the
* text landed correctly and there was nothing visible to misalign. The border
* made the cell's own edge visible, and it was drawing 8px from the panel
* edge while the band's text sat at 32px. */
border-radius: var(--wp--custom--rounded--md);
transition: background-color 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
/* The gated item's lead-in, carried inside the description.
*
* An item a prospect cannot buy, sitting in a list of items she can, reads as
* buyable unless the panel says otherwise. Rendered as a plain line it sends
* no signal, and a prospect who clicks through and books has bypassed the
* ladder while the gate was never stated. The lead is carried inside the
* description string, which core passes through `wp_kses_post`, so a span with
* a class survives.
*
* CONTENT-DEPENDENT: this rule is inert unless a service cell's description
* opens with a span carrying this class. See the entry's content contract.
*/
.c-mega__gate {
color: var(--wp--custom--color--brand-12);
font-weight: var(--wp--custom--weight--strong);
}
/* THE NAME IS MARKED BY WEIGHT, NOT BY COLOUR, and the gate is the other way.
*
* `brand-12` at rest means LINK in this panel — it is what the service labels
* and strip links carry, and it is the compensation recorded at the top of this
* file for the anchor card's removal. The name span sits inside a description
* that is already part of the cell's single anchor, so putting it in `brand-12`
* offered a second link inside one link. It takes body colour and NOTHING ELSE.
*
* 4.25.1 left the weight on and that was the remaining fault: label and name
* were both `strong`, stacked 2px apart, so the cell had two heavy objects and
* neither read as its headline. The description around the name is muted, so
* body colour already separates it — weight on top was a second signal doing a
* job that was done. One bold object per cell, and it is the promise.
*
* The gate keeps colour and weight both, because a gate is a warning and is
* meant to stop the eye rather than sit inside the reading.
*/
.c-mega__name {
color: var(--wp--preset--color--gravity-text);
}
/* THE SEPARATOR IS CSS, NOT COPY. Typed into the description string it would
* put design punctuation in the content and land a middle dot in the cell's
* accessible name, which reads label-then-description by construction. As a
* pseudo-element it is neither. `/ ""` gives it empty alternative text where
* supported, the same construction the cell arrow uses at g.
*
* It takes muted colour and normal weight so it reads as a divider rather than
* as the last character of the product name.
*/
.c-mega__name::after {
content: "\00b7" / "";
margin-inline: 0.375rem;
color: var(--wp--preset--color--gravity-text-muted);
font-weight: var(--wp--custom--weight--normal);
}
/* The cell's hover state: one signal, plus the label.
*
* Design Team, 2026-08-31. The cell carried THREE hover signals — a background
* tint, a 2px left bar, and a violet label. Gardner: a left bar appearing on
* hover borrows a selected-state affordance, and this menu has no current
* state, so the bar said something untrue. Bell: a tint scales to a cell of any
* height where a 2px bar is a stub on a one-line cell and a rule on a
* three-line one. Saarinen closed it — green edge plus violet label is two
* accent hues in one state, which is what the scarcity rule exists to prevent.
* The tint is already brand-cast, so the bar's removal costs no brand presence.
*
* THE VIOLET LABEL IS AUTHORED HERE ON PURPOSE. It arrived from a top-level
* nav-bar rule that happens to reach into the submenu — an organism depending
* on a rule nobody wrote for it breaks at the next header change. Same token,
* stated where it belongs.
*
* THE WASH IS `surface-nested` AND THAT IS AN INTERIM. It was `#e9ede7`, the
* only raw value in this organism. The Design Team ruled that an interactive
* hover wash on white is a fleet role with no current home —
* `surface-subtle` is the accent band's fill, `surface-nested` is the card and
* band fill, `neutral-3` is the rule colour — and raised
* `gravity-surface-hover` as a palette question with a recurrence trigger: the
* second build that wants one converts it from prudent to required. Until then
* this reuses an existing token rather than adding a palette entry for it. The
* `brand-12` deviation this was weighed against is gone as of 2026-09-01,
* resolved into the primitive scale channel; the case for reuse never rested
* on it. Every pairing clears AA on it — `gravity-text` 15.0:1,
* `gravity-text-muted` 5.13:1, `action-11` 8.93:1. *Cost accepted:* a hovered
* cell takes the band's exact fill, so it reads as slightly related to the
* band.
*/
.c-header .c-mega__svc.c-mega__svc.c-mega__svc .wp-block-navigation-item__content:hover {
background-color: var(--wp--preset--color--gravity-surface-nested);
border-color: var(--wp--preset--color--brand-11);
color: var(--wp--preset--color--action-11);
}
/* The label carries the panel's link colour AT REST.
*
* It did not until 2026-09-01, and did not need to: the anchor card's violet
* button was the panel's rest-state accent, and the contract's scarcity rule
* — one violet object at rest in the band — existed to protect it. The card
* left the panel and took the accent with it, leaving nothing in the panel
* signalling clickability until hover. The rule now guards nothing, and the
* cells read as text blocks.
*
* brand-12 rather than a new value: it is what the flagship link already uses
* at rest, so the cells join the panel's existing link language instead of
* introducing a second one. The hover's action-11 shift survives intact,
* which is why the colour is not simply set to the hover value.
*/
/* WEIGHT IS NORMAL, AND THAT IS DELIBERATE.
*
* The label was `strong` from extraction, when weight was the only thing
* separating it from its description. It is not any more: the label carries
* brand-12 against the description's muted grey, text-3 against text-2, an
* arrow, and since 2.0.0 a bordered cell around it. Weight was a fourth signal
* on an object already carrying three, and three cells of it competed with the
* flagship headline — which is the one object in the panel that should be
* heavy, and the whole reason the band was split.
*
* NO 500. Only Figtree 400 and 600 ship. A stylesheet asking for 500 gets 400
* back, because font matching tries the exact weight and then descends before
* it ascends, so the middle setting would read as considered and render as
* normal. Adding a Medium face is a fleet payload decision, not a panel one.
*
* LINE-HEIGHT 1.25, BECAUSE IT WAS INHERITING 1.6 AND THAT IS A BODY VALUE.
* Nothing set it, so the root style governed — invisible at `text-3` on a
* one-line label, and 35px per line once 4.26.0 took the label to `text-4` and
* the wraps arrived. The flagship headline sets 1.15 for the same reason. A
* heading that wraps needs its own leading; a label that never wrapped did not,
* which is why this was absent rather than wrong.
*/
/* THE LABEL IS THE CELL'S HEAVY OBJECT, because it now carries the promise.
*
* It was `normal` while the label was the service's NAME, under the rule at f
* that the flagship headline is the one heavy object in the panel. 4.25.0 moved
* the promise into this slot and the name into the description, and left the
* weights alone — so the name, at `strong` inside the description, outweighed
* the promise above it and the eye still landed on the proper noun. The reading
* order changed and the visual order did not.
*
* The rule at f is not broken by this. It was written against a label that was
* a name; weight parity at a 2:1 size gap against the flagship is not parity.
* Only Figtree 400 and 600 ship, so there is no middle setting to reach for.
*
* THE GAP BENEATH IT IS 0.5rem, NOT 0.125rem, AND SIZE WAS NOT THE ANSWER.
* `text-3` is 1.0625rem against the description's 0.9375rem — a 13% step, which
* is two pixels and reads as none. The tempting fix is `text-4`, but that is
* 1.375rem, a 47% jump, and inflating the cells until they compete with the
* flagship is the failure an outside review round proposed and this build
* rejected. Weight and space are the cheap levers; the size step exists if they
* prove insufficient on a render. Costs roughly 6px of panel height, since the
* cells are a grid row and only the tallest one counts.
*/
.c-mega__svc .wp-block-navigation-item__label {
display: block;
font-weight: var(--wp--custom--weight--strong);
font-size: var(--wp--preset--font-size--text-4);
line-height: 1.25;
margin-bottom: 0.75rem;
color: var(--wp--custom--color--brand-12);
}
/* i. The service cell's icon, and it is a mask rather than markup.
*
* WHY IT CANNOT BE MARKUP. `core/navigation-link` renders one anchor holding a
* label span and a description span, accepts no child blocks, and passes both
* strings through `wp_kses_post` — which allows a `` and strips an
* `