/* framework/banner — a full-width colour band with a centred statement. Measured from the VIKAND home page: 45px of vertical padding, content held to the 1200px column, two type treatments. The type is deliberately in this stylesheet rather than on the blocks inside. The heading is a plain core/heading with no inline styling, so it stays valid however WordPress changes its serialiser, and an editor cannot knock the design out by typing into it. */ .fw-banner { background: var(--fw-banner-bg, var(--fw-accent)); padding: var(--fw-banner-pt, 45px) 0 var(--fw-banner-pb, 45px); margin-top: var(--fw-banner-mt, 0); /* A band pulled up over its neighbour still has to paint over it. */ position: relative; } .fw-banner__inner { /* 95% up to a 1200px ceiling. Measured at six widths: the column is 371px at 390, 570 at 600, 730 at 768, 931 at 980, 1140 at 1200 and 1200 at 1440. A fixed max-width with 20px side padding matched none of the narrow ones. */ width: 95%; max-width: 1200px; margin: 0 auto; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 21px; } /* ---- Type: the two treatments on the home page --------------------------- */ /* Scoped to the three treatment sizes rather than to every band. A plain band asserts nothing about type: its headings are steps on the site's own scale, and a blanket rule here overrode them — including with `font-weight: inherit`, which quietly turned every scaled heading on the site back to 400. */ .fw-banner--announcement .fw-banner__inner > :is(h1, h2, h3, h4, h5, h6), .fw-banner--statement .fw-banner__inner > :is(h1, h2, h3, h4, h5, h6), .fw-banner--title .fw-banner__inner > :is(h1, h2, h3, h4, h5, h6), .fw-banner--headline .fw-banner__inner > :is(h1, h2, h3, h4, h5, h6), .fw-banner--headline .fw-banner__inner .fw-split__content > :is(h1, h2, h3, h4, h5, h6) { /* Top and bottom only: the side margins are how a heading held to its own measure (--fw-banner-heading-w, end of this file) is centred, and `margin: 0` here outranked that and pinned it to the left. */ margin-top: 0; margin-bottom: 0; text-transform: uppercase; } /* Centred only when the heading is the band's own: inside a split pane it is ranged by the pane (see the end of this file). */ .fw-banner--announcement .fw-banner__inner > :is(h1, h2, h3, h4, h5, h6), .fw-banner--statement .fw-banner__inner > :is(h1, h2, h3, h4, h5, h6), .fw-banner--title .fw-banner__inner > :is(h1, h2, h3, h4, h5, h6), .fw-banner--headline .fw-banner__inner > :is(h1, h2, h3, h4, h5, h6) { text-align: center; } /* The weight is a default, not an override: a heading that carries a measured weight class knows better. Written flat, this rule set every statement heading to 700 — live sets the polar-cruises line at 900. */ :where(.fw-banner--statement, .fw-banner--title, .fw-banner--headline) .fw-banner__inner > :is(h1, h2, h3, h4, h5, h6), :where(.fw-banner--headline) .fw-banner__inner .fw-split__content > :is(h1, h2, h3, h4, h5, h6) { font-weight: 700; } .fw-banner--plain .fw-banner__inner > :is(h1, h2, h3, h4, h5, h6) { margin-top: 0; margin-bottom: 0; } /* Announcement: one tight line above a call to action. */ .fw-banner--announcement .fw-banner__inner > :is(h1, h2, h3, h4, h5, h6):not([class*="fw-type--"]), .fw-banner--announcement .fw-banner__inner .fw-split__content > :is(h1, h2, h3, h4, h5, h6):not([class*="fw-type--"]) { /* On the root scale (18 at 1200+, 17 from 980, 16 below), which is how live sets it: 16px/22.4 on a phone. */ font-size: var(--vk-root, 18px); line-height: calc(var(--vk-root, 18px) * 1.4); letter-spacing: calc(var(--vk-root, 18px) * -0.035); } /* Statement: the larger headline that carries a section on its own. */ .fw-banner--statement .fw-banner__inner > :is(h1, h2, h3, h4, h5, h6):not([class*="fw-type--"]), .fw-banner--statement .fw-banner__inner .fw-split__content > :is(h1, h2, h3, h4, h5, h6):not([class*="fw-type--"]) { font-size: calc(var(--vk-root, 18px) * 1.5); line-height: calc(var(--vk-root, 18px) * 2.1); letter-spacing: calc(var(--vk-root, 18px) * 0.15); } /* Title: the page hero. Measured on /mental-health-solutions/ — 36px on a 50.4px leading with NO tracking, unlike the other uppercase treatments, which is why it needs its own step rather than being rounded onto the headline one. It scales to 21.6px on a phone. */ .fw-banner--title .fw-banner__inner > :is(h1, h2, h3, h4, h5, h6):not([class*="fw-type--"]), .fw-banner--title .fw-banner__inner .fw-split__content > :is(h1, h2, h3, h4, h5, h6):not([class*="fw-type--"]) { font-size: 36px; line-height: 50.4px; letter-spacing: normal; } @media (max-width: 767px) { .fw-banner--title .fw-banner__inner > :is(h1, h2, h3, h4, h5, h6):not([class*="fw-type--"]), .fw-banner--title .fw-banner__inner .fw-split__content > :is(h1, h2, h3, h4, h5, h6):not([class*="fw-type--"]) { font-size: 21.6px; line-height: 30.24px; } } /* Headline: the top of the scale, used for the statement band on the section pages. Measured on /medical-solutions/ — the values are the source's own computed type, not a rounded approximation of it. All four size treatments are defaults for a heading that carries no measured step of its own. One that does (fw-type--N) keeps it: the OneHealth hero is a headline band whose h1 is 50px/70 with no tracking, and this rule's higher specificity had been overruling that to 41/53 with 8px tracking. */ .fw-banner--headline .fw-banner__inner > :is(h1, h2, h3, h4, h5, h6):not([class*="fw-type--"]), .fw-banner--headline .fw-banner__inner .fw-split__content > :is(h1, h2, h3, h4, h5, h6):not([class*="fw-type--"]) { font-size: calc(var(--vk-root, 18px) * 2.285); line-height: calc(var(--vk-root, 18px) * 2.9705); letter-spacing: calc(var(--vk-root, 18px) * 0.457); } .fw-banner--light .fw-banner__inner, .fw-banner--light .fw-banner__inner > :is(h1, h2, h3, h4, h5, h6) { color: #fff; } .fw-banner--dark .fw-banner__inner, .fw-banner--dark .fw-banner__inner > :is(h1, h2, h3, h4, h5, h6) { color: var(--fw-primary); } /* ---- Button: live's small dark pill ------------------------------------- */ .fw-banner .wp-block-buttons { margin: 0; } /* Centred unless the block says where it goes: a justification set in the editor (or measured from the design) is core's own layout and wins. */ .fw-banner .wp-block-buttons:not([class*="is-content-justification-"]) { justify-content: center; } .fw-banner .wp-block-button__link { background: var(--fw-primary); color: #fff; font-size: 14px; line-height: 18.2px; font-weight: 400; letter-spacing: normal; text-transform: none; padding: 8px 18px; border-radius: 3px; text-decoration: none; } .fw-banner .wp-block-button__link:hover { background: var(--fw-secondary); } /* ---- Image band --------------------------------------------------------- The photograph covers the band and the band holds its own height, which is how the design behaves when the viewport is wider or narrower than the image. */ /* A photograph behind the band's content. */ .fw-banner--photo { background-image: var(--fw-banner-image); background-size: cover; background-position: var(--fw-banner-image-pos, center); background-repeat: no-repeat; } /* A TRANSLUCENT band colour becomes the wash over the picture, which is how the design keeps its text legible. A background-color would paint behind the image, so the wash has to be a gradient. An opaque colour is not a wash — it is the fallback underneath. Painting it over the photograph erased it: the OneHealth app band is a white band with a photograph of three phones on it, and the white gradient hid the phones completely. Only a colour with alpha reaches --fw-banner-wash. */ .fw-banner--photo { background-image: linear-gradient(var(--fw-banner-wash, transparent), var(--fw-banner-wash, transparent)), var(--fw-banner-image); } .fw-banner__media { width: 100%; background-image: var(--fw-banner-image); background-size: cover; background-position: var(--fw-banner-image-pos, center); background-repeat: no-repeat; } /* The picture covers the band, the padding included. A background image paints UNDER an element's padding, and live builds every one of these as a Cornerstone section with a background, so its photograph runs the full height of the band: /bio-technical-solutions/ measured 590 tall at 1920 — 500 of picture and 45 of padding either side — with the photograph across all of it. Sizing an in-flow box by min-height instead left those 45px painting the band's own background colour, which read as a white gap under every hero. The height moves to the band and the picture floats behind it, so the band stays exactly as tall as it was: min-height is on the content box, so 500 + 45 + 45 is still 590. Every band that uses this media div carries a measured minHeight and no content of its own (22 of them, checked), which is why taking the media out of the flow costs nothing — the ones that DO put content over a photograph use `--photo` above, where the image is already the section's own background. */ .fw-banner--image { min-height: var(--fw-banner-min, 300px); } .fw-banner--image .fw-banner__media { position: absolute; inset: 0; min-height: 0; } /* Insurance only: were a band ever given both a picture and content, the content would still sit over the picture rather than under it. */ .fw-banner--image .fw-banner__inner { position: relative; } /* An image band with nothing in it should not also carry an empty content column, or the band ends up taller than the design by the height of one empty flex row. */ .fw-banner--image .fw-banner__inner:empty { display: none; } /* ---- Plain: a band that is only a band ---------------------------------- Used where the design gives a section a background and some air but no type treatment of its own — body copy, a form, an image. The content flows normally rather than being centred and gapped, because imposing the statement layout on ordinary content is exactly the sort of "improvement" that stops the rebuild matching the design. */ .fw-banner--plain .fw-banner__inner { display: block; gap: 0; } /* No separate phone sizes for the statement and headline treatments: they ride the root scale above, which is what live does (27 → 24, 41.13 → 36.56 at 390). The earlier fixed values here (21px, 28px) were guesses. */ /* A heading held to its own measure, narrower than the band's column — and the copy directly under it, which the design holds to the same measure. The contact band's line wraps at 800px on live and ran the full 1200 without this. */ .fw-banner__inner > :is(h1, h2, h3, h4, h5, h6), .fw-banner__inner > p { max-width: var(--fw-banner-heading-w, none); margin-left: auto; margin-right: auto; } /* A statement inside a split pane keeps the treatment's type but not its centring: the pane is a column beside a picture, and the OneHealth hero's headline is ranged left against the phone on its right. */ /* A default, so a measured alignment class on the heading itself (the OneHealth h1 is justified over three lines on live) still wins. */ :where(.fw-banner .fw-banner__inner .fw-split__content > :is(h1, h2, h3, h4, h5, h6)), :where(.fw-banner .fw-banner__inner .fw-split__content > p) { text-align: left; } /* ---- Statement: the spacer IS the gap ------------------------------------ Live lays these bands out in ordinary block flow, where a Cornerstone `hr.x-line` is the whole separation between two blocks. The inner is a flex column with `gap: 21px`, so each spacer was padded by another 21 above and below: /bio-technical-solutions/ measured 77px between its heading and the paragraph under it where live has exactly the spacer's own 35. Cancelling the gap on the spacer rather than turning it off for the band keeps the 21px between ordinary siblings, which is what live shows where there is no spacer at all (press-room's MEDIA INQUIRIES). */ .fw-banner--statement .fw-banner__inner > .wp-block-spacer { margin-top: calc(var(--fw-banner-gap, 21px) * -1); margin-bottom: calc(var(--fw-banner-gap, 21px) * -1); } /* A paragraph fills the column and reads from its left edge. `align-items: center` shrink-wrapped it to its own text, so a single short line rendered centred — live runs it the full 1200 at x=353, ranged left. Bands that hold their copy to a measured column keep doing so: that comes from --fw-banner-heading-w and auto margins, which still apply once the box is allowed a full-width box: max-width still caps it and align-items still centres it, so mental-health stays 800 wide at 553, as live has it. align-self:stretch was tried here and reverted - it defeated the auto margins and moved those paragraphs to 353. */ .fw-banner--statement .fw-banner__inner > p { width: 100%; }