/* ========================================================================== Foundation latest news band (AB#98956 / AB#99005) -------------------------------------------------------------------------- Loaded by masterFoundation.cshtml only. Every rule is scoped under .brand-foundation (the Foundation body class) and the fnd-news__* classes, so nothing here can reach the ASISA, ESD or Academy layouts. The shared rules in main.css are NOT modified; the few that leak into any Foundation band (h2, p, ul, li, a) are reset under .fnd-news below. Design source: the story attachment, a hand-made crop of the 5.6 WageWise Impact frame (design/foundation-latest-news/reference.jpg; Figma file fL3pEfqVg3JdWDyYf1qWPG, node 7564:290194). The node itself could not be read: the one call made on 3 Sep 2026 hit the Figma View-seat monthly limit and was not retried. Values read off the crop are marked "crop"; everything else is an ESTIMATE or an INFERENCE, named as such, to be replaced when spec.json exists. Layout: centred heading and intro, then a grid of cards: three across at desktop widths on every page, two across on tablets and one on phones. The home page showed four until 11 September 2026, when Michiel Visser fixed the band at three articles everywhere (FoundationLatestNewsLimits). The accent comes from --programme-accent, which the view sets on the section root inside a programme (validated hex, FoundationLatestNewsAccent); elsewhere it falls back to --foundation. ========================================================================== */ .brand-foundation { /* The accent token (--fnd-news-accent) is declared on .fnd-news itself, below: a custom property resolves where it is declared, and --programme-accent is set on the section root, not on body. */ /* Band. Crop values below were read off reference.jpg on 3 Sep 2026: the crop is a 1:1 cut of the 1920 frame (three 384 px cards and two 24 px gutters fill the 1200 px design column), so crop pixels are design pixels. The site column is 1150 px inside .container, 4% narrower than the design's 1200, so the cards run 367 px wide here; absolute values (type, radius, badge, corner) are kept as designed rather than scaled. */ --fnd-news-bg: #FFFFFF; /* crop: white band */ --fnd-news-text: #262626; /* Grey/100; crop: heading, intro, title and blurb all read #24 to #28 */ --fnd-news-programme: #6B6B6B; /* crop: the bold programme tag reads #62 to #6E (JPEG), so kept */ --fnd-news-muted: #9A9A9A; /* crop: the category reads #99; the divider is no darker */ --fnd-news-font: var(--font-family-main, Arial, Helvetica, sans-serif); /* crop: Helvetica-family letterforms in the heading and body (flat terminals, spurred G, tailed a), not Arial; the site's licensed Neue Haas Grotesk Text stack from font-variables.css, which main.css already applies to the p, h3 and a elements in this band. The nav spec's Body/Small/Regular is Arial: confirm from this frame's spec.json. The design face is also 4 to 7% narrower than the web Text cut at equal cap height (a Display cut?), so line breaks differ. */ --fnd-news-pad-y: 64px; /* ESTIMATE: the crop is cut inside the band's padding */ --fnd-news-header-gap: 12px; /* crop: 21 px from the heading descenders to the intro cap tops; the split between heading line height and margin is an ESTIMATE */ --fnd-news-header-to-grid: 48px; /* crop: 52 px from the intro descenders to the image top */ --fnd-news-intro-width: 720px; /* crop: the first line measures 708 px and the next word would pass 740, so the text box is 708 to 740 wide; 720 is an ESTIMATE in that range */ /* Cards */ --fnd-news-gap: 24px; /* crop: 24 px between 384 px cards */ --fnd-news-card-radius: 16px; /* crop: the corner arcs fit a radius of 15 to 17 px */ /* Top left, TOP RIGHT, bottom right, bottom left. The top right is square, and for the same reason the image gallery's is: the accent triangle's corner is a right angle, and rounding the box behind it clips the tip into a curve. Michiel Visser reported it on the news cards on 11 September 2026, having reported the gallery's on 8 September. crop: all four corners measured on all three cards, not one and an assumption. The three rounded corners show the band's white through the arc, insets 15, 12, 10, 9, 8, 7, 6, 5, 4, 3 row by row. The top right has an inset of 0 on every row, at every threshold from 200 to 253, and its corner pixel is the accent rather than the band's white. Three cards, same geometry, so it is the design. The radius itself was re-checked at the same time and 16px stands: the arc fits 20px at a loose threshold and 12px at a strict one, so the crop cannot separate it from the 15 to 17 px already recorded. Left alone. */ --fnd-news-image-radius: var(--fnd-news-card-radius) 0 var(--fnd-news-card-radius) var(--fnd-news-card-radius); --fnd-news-image-ratio: 384 / 262; /* crop: 384 x 262 px image */ --fnd-news-image-to-meta: 20px; /* crop: 23 px from the image bottom to the meta cap tops */ --fnd-news-badge-size: 38px; /* crop: 38 px white circle with a document glyph, top left */ --fnd-news-badge-inset-x: 10px; /* crop: circle left edge 9.5 px in from the image edge (all three cards) */ --fnd-news-badge-inset-y: 13px; /* crop: circle top edge 13 px down from the image edge (all three cards) */ --fnd-news-badge-icon: 22px; /* crop: 19 x 20 px glyph inside the 38 px circle. news-document.svg carries padding and draws 13 x 18 px of glyph at 20 px, so 22 px gives the crop's 20 px glyph height; the crop glyph is squarer (a document with three lines and a folded foot) than the asset */ --fnd-news-corner-size: 60px; /* crop: 60 px legs on all three cards */ /* Type */ --fnd-news-heading-size: 48px; /* crop: 35 px cap height (0.72 em) */ --fnd-news-heading-size-tablet: 32px; /* ESTIMATE */ --fnd-news-heading-size-mobile: 28px; /* ESTIMATE */ --fnd-news-intro-size: 16px; /* Body/Regular; crop: 8 px x-height, 24 px line pitch */ --fnd-news-meta-size: 14px; /* crop: 10 to 11 px cap height; the category width matches 14 px exactly */ --fnd-news-meta-to-title: 4px; /* crop: 10 px from the meta descenders to the title cap tops; the split between meta line height and margin is an ESTIMATE */ --fnd-news-title-size: 20px; /* crop: 15 px cap height, 26 px line pitch */ --fnd-news-title-to-blurb: 16px; /* crop: 23 px from the title descenders to the blurb cap tops */ --fnd-news-blurb-size: 16px; /* crop: the blurb's first line is 0.4675 of the intro's first line, the ratio equal-size text gives, so the blurb is the intro size */ --fnd-news-body-size: 14px; /* Body/Small: the card base size and Read more, which the crop does not show */ --fnd-news-line-height: 1.5; } /* ---- Band -------------------------------------------------------------- */ .brand-foundation .fnd-news { /* Accent: the programme colour (--programme-accent, set on this element by the view inside a programme), else ASISA Foundation Signature Colour/100. Declared here, not on body, so that var(--programme-accent) is read on the element that carries it. */ --fnd-news-accent: var(--programme-accent, var(--foundation, #A137B7)); /* The same accent, but only when it is legible as text on this white band. The view emits --programme-accent-ink alongside --programme-accent and substitutes the Foundation violet when the editor's colour cannot reach 3:1, the WCAG 1.4.11 floor for a focus indicator (see FoundationLatestNewsAccent). Text and the focus ring read this token; the decorative corner triangle reads the raw one, because a pale triangle is a design choice and a pale focus ring is a barrier. */ --fnd-news-accent-ink: var(--programme-accent-ink, var(--foundation, #A137B7)); background: var(--fnd-news-bg); color: var(--fnd-news-text); font-family: var(--fnd-news-font); padding: var(--fnd-news-pad-y) 0; } /* INFERENCE: .container (the site column) so the band lines up with the blocks above and below it. */ .brand-foundation .fnd-news__inner { box-sizing: border-box; } .brand-foundation .fnd-news__header { text-align: center; margin: 0 auto var(--fnd-news-header-to-grid); } /* Resets: main.css styles h2 (size, colour, border) and p for every entity. */ .brand-foundation .fnd-news__heading { margin: 0 0 var(--fnd-news-header-gap); padding: 0; border: 0; font-size: var(--fnd-news-heading-size); font-weight: 700; line-height: 1.2; color: var(--fnd-news-text); text-transform: none; } .brand-foundation .fnd-news__intro { max-width: var(--fnd-news-intro-width); margin: 0 auto; font-size: var(--fnd-news-intro-size); line-height: var(--fnd-news-line-height); color: var(--fnd-news-text); } /* AB#99006: the intro is the editor's rich text (or the default inside one

). main.css styles p and a for every entity, so the paragraphs and links inside the intro take the band's type here. Three-class selectors so they beat the band's own anchor reset. */ .brand-foundation .fnd-news .fnd-news__intro p { margin: 0; padding: 0; font-size: inherit; line-height: inherit; color: inherit; } .brand-foundation .fnd-news .fnd-news__intro p + p { margin-top: 0.75em; /* ESTIMATE: the crop shows one paragraph */ } .brand-foundation .fnd-news .fnd-news__intro a { color: var(--fnd-news-accent-ink); font-weight: 700; /* handover 31 Aug 2026: links in body copy are bold, not underlined */ text-decoration: none; } .brand-foundation .fnd-news .fnd-news__intro img, .brand-foundation .fnd-news .fnd-news__intro iframe { max-width: 100%; } /* ---- Grid -------------------------------------------------------------- */ /* Three across on every placement. The home page had a four-column override, taken from the handover's reading of the home frame (1:15:31); Michiel Visser fixed the band at three articles everywhere on 11 September 2026 and the override went with the count. The fnd-news--home modifier stays on the markup: it still names the placement, and the acceptance harness reads it. */ .brand-foundation .fnd-news__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fnd-news-gap); list-style: none; margin: 0; padding: 0; } .brand-foundation .fnd-news__card { margin: 0; padding: 0; font-size: var(--fnd-news-body-size); line-height: var(--fnd-news-line-height); } /* Resets: shared list rules add markers and link decoration to li and li a. */ .brand-foundation .fnd-news__card::before { content: none; } .brand-foundation .fnd-news a { border-bottom: 0; font-weight: inherit; text-decoration: none; } .brand-foundation .fnd-news__article { display: flex; flex-direction: column; height: 100%; } /* ---- Image, badge and corner ------------------------------------------- */ .brand-foundation .fnd-news__media { position: relative; display: block; /* Clips the image to the corners. The triangle is no longer clipped at the top right, because that corner is square, which is what lets its tip stay a point. */ overflow: hidden; border-radius: var(--fnd-news-image-radius); aspect-ratio: var(--fnd-news-image-ratio); margin: 0 0 var(--fnd-news-image-to-meta); background: #F8F5EA; /* Cream Linen/100 behind a slow image */ } .brand-foundation .fnd-news__image { display: block; width: 100%; height: 100%; object-fit: cover; } .brand-foundation .fnd-news__badge { position: absolute; top: var(--fnd-news-badge-inset-y); left: var(--fnd-news-badge-inset-x); width: var(--fnd-news-badge-size); height: var(--fnd-news-badge-size); border-radius: 50%; background: #FFFFFF url("../img/foundation/news-document.svg") center / var(--fnd-news-badge-icon) var(--fnd-news-badge-icon) no-repeat; } /* Border technique: no clip-path needed. The parent's overflow clips the triangle's outer edges, and its top right corner is square so the tip reaches the corner as a point. Same technique, and the same corner rule, as the image gallery's. */ .brand-foundation .fnd-news__corner { position: absolute; top: 0; right: 0; width: 0; height: 0; border-top: var(--fnd-news-corner-size) solid var(--fnd-news-accent); border-left: var(--fnd-news-corner-size) solid transparent; } /* ---- Text -------------------------------------------------------------- */ .brand-foundation .fnd-news__meta { margin: 0 0 var(--fnd-news-meta-to-title); font-size: var(--fnd-news-meta-size); line-height: 1.2; /* ESTIMATE: one line; only the 10 px gap to the title is on the crop */ color: var(--fnd-news-muted); } .brand-foundation .fnd-news__programme { font-weight: 700; text-transform: uppercase; /* crop: WAGEWISE; the value is kept as typed */ color: var(--fnd-news-programme); } .brand-foundation .fnd-news__divider { margin: 0 2px 0 6px; /* crop: 7 px clear on both sides of the bar. The markup's line break before the category span renders as a 4 px space, so the right margin is 4 px smaller than the left to keep the two gaps equal. */ } .brand-foundation .fnd-news__title { margin: 0 0 var(--fnd-news-title-to-blurb); padding: 0; border: 0; font-size: var(--fnd-news-title-size); font-weight: 700; line-height: 1.3; /* crop: 26 px line pitch on the 20 px title */ color: var(--fnd-news-text); } /* Written as .fnd-news .fnd-news__x so they outrank the anchor reset above (which carries an element selector). main.css styles "h3 a" (14px, 26px line height, 0.5px letter spacing), which shrank the title to the link size; the link takes the heading's type so the title renders at --fnd-news-title-size. */ .brand-foundation .fnd-news .fnd-news__title-link { color: inherit; font-size: inherit; line-height: inherit; letter-spacing: inherit; } .brand-foundation .fnd-news .fnd-news__title-link:hover, .brand-foundation .fnd-news .fnd-news__title-link:focus-visible { text-decoration: underline; /* INFERENCE: no hover state on the crop */ } .brand-foundation .fnd-news__blurb { flex-grow: 1; /* keeps Read more at the same height across a row */ margin: 0 0 16px; /* ESTIMATE: the crop ends inside the blurb */ font-size: var(--fnd-news-blurb-size); line-height: var(--fnd-news-line-height); color: var(--fnd-news-text); } /* INFERENCE: the crop ends above the link; a bold accent-coloured text link is the plainest reading of "Read more". */ .brand-foundation .fnd-news .fnd-news__more { align-self: flex-start; font-size: var(--fnd-news-body-size); font-weight: 700; color: var(--fnd-news-accent-ink); border-bottom: 2px solid transparent; /* The link already measures 28px tall, but only because of a line-height main.css sets on "li a" that this band never resets. Under the WCAG text-spacing override that drops to 23px and the target falls below the 24px minimum, so the floor is stated here rather than inherited. */ min-height: 24px; } .brand-foundation .fnd-news .fnd-news__more:hover, .brand-foundation .fnd-news .fnd-news__more:focus-visible { border-bottom-color: var(--fnd-news-accent-ink); } .brand-foundation .fnd-news a:focus-visible { outline: 2px solid var(--fnd-news-accent-ink); outline-offset: 2px; } /* Text for screen readers only (the site has no shared helper for this). */ .brand-foundation .fnd-news__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ---- Responsive (breakpoints are ESTIMATES; 1024 matches foundation-navigation.css) ---- */ @media (max-width: 1024px) { /* The shared .container has no side padding at these widths (measured 3 Sep 2026), so the band adds its own. ESTIMATE */ .brand-foundation .fnd-news__inner { padding-left: var(--fnd-news-side-pad, 20px); padding-right: var(--fnd-news-side-pad, 20px); } .brand-foundation .fnd-news__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .brand-foundation .fnd-news__heading { font-size: var(--fnd-news-heading-size-tablet); } } @media (max-width: 767px) { .brand-foundation .fnd-news { padding: 40px 0; /* ESTIMATE */ } .brand-foundation .fnd-news__grid { grid-template-columns: minmax(0, 1fr); /* criteria: cards stack on small screens */ } .brand-foundation .fnd-news__heading { font-size: var(--fnd-news-heading-size-mobile); } }