/* Homepage notification bar — CHR-5 (DONI-566)
* =====================================================================
*
* The coral band directly under the navigation carrying the indication
* statement. Front page only. Locked site chrome: it renders from
* page.html.twig before any component is placed, and is not
* editor-placeable.
*
* It is the front-page counterpart to the page headline band (CHR-4),
* which occupies the same y=111 slot on every interior page. The two
* are gated on opposite sides of `is_front` and never both appear.
*
* MEASURED from the canonical Figma file `TJC7pZhPM2o5S0wuc1tnVI`,
* read through the REMOTE MCP with an explicit fileKey — so it cannot
* be a wrong-tab read. GEOMETRY 2026-08-04, TYPE 2026-08-06. Nodes:
*
* desktop 0.2 D Home 29999:57225 > "Notification Bar" 1440 x 60 @ y=111
* its text node I29999:57225;28339:19925 1200 x 48
* mobile 0.2 M Home 29999:57228 > "Notification Bar" 375 x 92 @ y=90
* its text node I29999:57228;28339:20068 327 x 76
*
* Desktop: bg #eb6f56 · px 120 · py 8 · h 60 · text 1200 x 48
* 20px Agenda Bold, white, CENTRED, liga 0
* Mobile: bg #eb6f56 · px 24 · py 8 · h 92 · text 327 x 76
* 16px Agenda Bold, white, LEFT-ALIGNED
*
* 🔴 THE TWO TYPE SIZES USED TO LIVE ONLY IN THIS COMMENT, and a
* comment may not authorise a number (C-024). DONI-566 was QA-failed
* on 2026-08-06 for exactly that reason — *"the font size on the
* mobile viewport does not match the Figma design"* at 375 — and the
* claim could not be checked because nothing had recorded the size.
* Both nodes were re-read that day with an explicit fileKey and BOTH
* SIZES WERE ALREADY CORRECT. They are now in the registry, which is
* the only place that may authorise them:
*
* docs/hcp-nxt/measured-frames.json
* "29999:57225 > Notification Bar" .type (desktop)
* "29999:57228 > Notification Bar" .type (mobile)
*
* ⚠️ Citing a bare `0:347` / `0:207` will not work. `get_metadata`
* reports this bar's subtree with the COMPONENT's internal ids, and
* no MCP tool resolves those. The `I;` ids above are
* what `get_design_context` returns and are the addressable form.
*
* ✏️ Figma declares `lineHeight: 100` on both nodes, which is NOT
* `line-height: 1` (C-018). Neither px value below was read; both are
* derived from the text-node height over its line count, and the
* arithmetic is written out where each one is set.
*
* ⚠️ Nothing here came from `figma-to-html/_shared/chrome.md`. Its §2
* gives `box-shadow: var(--shadow-header)`, and the theme's
* --shadow-header is `0 8px 24px -4px` while the frame's own effect on
* this node is `0 8px 12px` with no spread. That file has no numeric
* authority (CLAUDE.md, C-024) and this is a live example of why.
*/
.notification-bar {
/* The 2026 coral #eb6f56, the same fill the headline band samples —
* NOT the legacy nav coral #f16b50. Through the token so DONI-546
* stays a one-line change. FND-6 forbids the hex here anyway. */
background-color: var(--color-coral);
/* Measured on the node: drop shadow, offset (0, 8), blur 12, no
* spread, #51586129 = rgba(81, 88, 97, 0.16). */
box-shadow: 0 8px 12px rgba(81, 88, 97, 0.16);
display: flex;
align-items: center;
justify-content: center;
/* 🔴 6px BLOCK PADDING, NOT THE 8px THE FRAME DECLARES.
*
* The frame is over-constrained and the ticket already recorded it;
* this build confirms it from the node tree rather than repeating the
* claim. The band is h=60 with py=8, and its text node is 48 tall:
* 8 + 48 + 8 = 64, which is 4px more than the band. Figma hides the
* overflow by nesting the text in a 24px-tall wrapper (0:344,
* 1200 x 24) that the 48px text (0:345) overflows by -12px on each
* side. That is a design-file artefact, not a layout instruction.
*
* In CSS the two cannot both be true. 6px block padding reproduces
* the AUTHORED 60px height exactly (6 + 48 + 6 = 60) and centres the
* text where the frame renders it. `chrome.md` §2, which says 8px,
* measures 64 and drifts every band below it down the page.
*
* min-height rather than height: if MLR lengthens the copy the band
* must grow, not clip a regulated sentence. */
min-height: 60px;
padding-block: 6px;
/* 🔴 --gutter-BLEED, not --gutter-fluid. The coral reaches the
* viewport edge, so this band has no max-width and is not centred —
* padded with --gutter-fluid it would line up with the nav only up to
* 1368 and drift by the centring margin above it. FND-2 (DONI-542)
* settled the expression; the headline band hit this exact bug.
*
* This also resolves 120 vs 84. The frame draws 1440 with 120px
* gutters; this theme uses 1368/84, and FND-2 measured the two as
* INDISTINGUISHABLE at 1440 because the 36px centring margin plus 84
* is 120. At 375 the token floors at 24px, which is the mobile
* frame's padding exactly. Apply the token; do not rebuild it. */
padding-inline: var(--gutter-bleed);
}
.notification-bar__text {
margin: 0;
width: 100%;
font-family: var(--font-agenda);
/* Agenda Bold 20px — node I29999:57225;28339:19925 in
* TJC7pZhPM2o5S0wuc1tnVI (C-002: the id alone means nothing without
* the file). Registry entry "29999:57225 > Notification Bar".type. */
font-size: 20px;
font-weight: 700;
/* C-018 arithmetic, NOT a read value: the node declares `normal`.
* Text node 1200 x 48 over the two AUTHORED lines (the copy carries
* its break after "hereditary angioedema (HAE) "), so 48 / 2 = 24px
* per line and 24 / 20 = 1.20. Stated rather than left to `normal`,
* because the 60px band height depends on it — and `normal` for
* agenda measures 1.136–1.19, which would give 46–48px over two
* lines and drift the band. Verified in Chrome at 1440: text box
* 1200 x 48, two lines, band 60. */
line-height: 24px;
color: var(--color-white);
text-align: center;
/* Carried from the frame, and not decoration — the same reasoning the
* headline band records. This string contains a product name next to
* punctuation on a regulated site; an `fi`/`fl` ligature changes the
* shape of an approved sentence. */
font-feature-settings: "liga" 0;
}
/* Mobile. The frame measures 375 x 92 with 8px block padding and a 76px
* text node — 8 + 76 + 8 = 92 exactly, so the height is content-driven
* and is NOT pinned here. If the copy changes the band should grow. */
@media (max-width: 767px) {
.notification-bar {
min-height: 0;
padding-block: 8px;
}
.notification-bar__text {
/* 🔴 16px IS THE FIGMA VALUE, and this is the line DONI-566 was
* QA-failed over on 2026-08-06. Agenda Bold 16px — node
* I29999:57228;28339:20068 in TJC7pZhPM2o5S0wuc1tnVI. Registry
* entry "29999:57228 > Notification Bar".type.
*
* The geometry excludes the alternative independently: the text
* node is 327 x 76, and at 20px the same string needs five lines
* in a 327 column — 5 x 24 = 120, not 76. */
font-size: 16px;
/* C-018 arithmetic, NOT a read value: the node declares `normal`.
* 76px text node / 4 lines = 19px, and 19 / 16 = 1.1875 — inside
* agenda's measured 1.136–1.19 band, which is the cross-check.
* Verified in Chrome at 375: text box 327 x 76, four lines,
* band 92 — the authored Figma height exactly. */
line-height: 19px;
text-align: left; /* the mobile frame is left-aligned, not centred */
}
/* The authored break belongs to the DESKTOP layout. Figma breaks the
* mobile bar at a different word ("…pediatric patients"), and one
* config string cannot carry two break points — see the module file
* for why storing the sentence twice was refused. Below 768 the
* authored break is suppressed and the text wraps to the column. */
.notification-bar__text br {
display: none;
}
}
/* Print. The band is navigation-adjacent chrome, but the sentence it
* carries is the indication and belongs on a printout. Keep it, drop
* the shadow and the coral flood so it does not eat a page of toner. */
@media print {
.notification-bar {
background-color: transparent;
box-shadow: none;
padding-inline: 0;
}
.notification-bar__text {
color: var(--color-charcoal);
text-align: left;
}
}
@media (min-width: 1024px) {
.notification-bar {
padding-inline: 0;
}
}