/* ========================================================================== Foundation programme project page (analysis 5.3; AB#99013 visitor, AB#99014 content editor) Nine bands between the breadcrumb and the footer, rendered by the view components under Views/Shared/Components/FoundationProject/Default.cshtml. Every rule is scoped under .brand-foundation, the class masterFoundation.cshtml puts on , so nothing here can reach the ASISA, ESD or Academy layouts (site-within-a-site rule, handover 31 Aug 2026). Loaded after main.css so its scoped overrides win. Provenance. Values marked "frame" were measured on design/foundation-programme-project/reference.jpg, the HeyGuys frame of 5 August 2026. That file states 1440 px at source, so frame pixels are design pixels and the 0.75 conversion that applies to the navigation frame must NOT be applied here. The site column is 1150 px inside .container against the design's 1200, 4% narrower, so proportional values are expressed as fractions and absolute ones (type, radius, corner legs) are kept as designed rather than scaled. Values marked ESTIMATE have no frame behind them. That is now the TABLET block and a handful of named tokens, and no longer the phone block: a 360 px mobile render arrived on 9 Sep 2026 and is cached at design/foundation-programme-project/reference-mobile.png, so the phone values are measured. Read that folder's SOURCE.md before trusting one, because the render is the programme sub-home rather than this page, and it is usable only for the bands the two share, which is most of them. It also settled a question the analysis had left open. The resolved comments [CB42], [CB53] and [CB56] all read "Most sections will be stacked with some components to change to a carousel - design dependent", and Cathy Harrison said the same of benefits and news in the handover [1:20:04]. She was right on both counts: the benefits band swipes on a phone and so does latest news. Benefits is built here as a scroll-snap carousel; latest news belongs to AB#99005. Every other band stacks. ========================================================================== */ .brand-foundation { /* ---- Colour ---------------------------------------------------------- */ --fnd-project-bg: #FFFFFF; /* frame: the page ground */ --fnd-project-band-bg: #FDF8ED; /* frame: the benefits and statistics bands read #FDF8ED to #FBF4E7 */ --fnd-project-text: #262626; /* Grey/100; frame: headings and body read #24 to #28 */ --fnd-project-muted: #6B6B6B; /* frame: the story cards' source line reads #66 to #70 */ --fnd-project-panel-bg: #FDF8ED; /* frame: the reach map sits on the same cream as the bands */ --fnd-project-rule: #3E5D3A; /* frame: the 4 px rule left of the overview articles reads a darker tone of the programme green, so it takes the accent */ --fnd-project-button-bg: #E4E9E1; /* frame: the collaboration buttons read #E2E8E0 to #E6EAE2 */ --fnd-project-button-chevron: #D2DACE; /* frame: the chevrons inside them are one step darker */ --fnd-project-placeholder: #F8F5EA; /* INFERENCE: the site's cream, so a slow image leaves the brand's ground and not a white hole */ --fnd-project-font: var(--font-family-main, Arial, Helvetica, sans-serif); /* ---- Rhythm ---------------------------------------------------------- */ --fnd-project-band-gap: 72px; /* frame: 76 px from the overview articles to the benefits band, 78 px from the resources columns to the learning heading */ --fnd-project-band-pad-y: 64px; /* frame: the cream bands run 702 px and 366 px tall around content of 574 px and 238 px, so 64 px each side */ --fnd-project-heading-gap: 16px; /* frame: 19 px from a band heading's descenders to its intro */ --fnd-project-header-to-body: 48px; /* frame: 52 px from an intro's descenders to the first row */ --fnd-project-intro-width: 820px; /* frame: the project introduction's widest line measures 812 px */ /* ---- Type ------------------------------------------------------------ */ --fnd-project-h1-size: 56px; /* frame: "Project Header" is 402 px wide at 14 characters with a 41 px cap height, which is 0.72 em at 56 px */ --fnd-project-h2-size: 40px; /* frame: the band headings run a 29 px cap height */ --fnd-project-h3-size: 24px; /* frame: the overview and impact copy headings, 17 px cap height */ --fnd-project-card-title-size: 18px; /* frame: 13 px cap height on the article and story card titles */ --fnd-project-body-size: 16px; /* Body/Regular; frame: 8 px x-height, 24 px line pitch */ --fnd-project-small-size: 14px; /* Body/Small; frame: the source line and the statistic note */ --fnd-project-line-height: 1.5; --fnd-project-h1-size-tablet: 40px; /* ESTIMATE */ --fnd-project-h1-size-mobile: 34px; /* mobile frame: 24 px cap height, 37 px line pitch */ --fnd-project-h2-size-tablet: 30px; /* ESTIMATE */ --fnd-project-h2-size-mobile: 30px; /* mobile frame: 28 px cap-to-descender, 40 px line pitch */ /* ---- Images ---------------------------------------------------------- */ /* The corner treatment is the estate's, already measured twice: three corners rounded and the TOP RIGHT square, because the accent triangle's corner is a right angle and rounding the box behind it clips the tip into a curve. Confirmed again on this frame: every image on it (the overview thumbnail, the benefit cards, the story cards, the featured story panel) has an inset of 0 on every row of its top right corner and an accent-coloured corner pixel. */ --fnd-project-radius-sm: 8px; /* frame: the 130 px thumbnail's arc reaches the edge 7 to 8 px along */ --fnd-project-radius-md: 14px; /* frame: the 315 to 383 px cards' arcs reach 12 to 14 px along */ --fnd-project-radius-lg: 24px; /* frame: the 587 px panels' arcs, and the same 24 px the gallery measured */ --fnd-project-corner-sm: 26px; /* frame: 26 px legs on the thumbnail */ --fnd-project-corner-md: 44px; /* frame: 44 px legs on the benefit and story cards */ --fnd-project-corner-lg: 56px; /* frame: 57 px legs on the featured story panel, as the gallery's */ --fnd-project-thumb-size: 130px; /* frame: the overview thumbnail is 129 x 130 px */ /* Phone geometry, read off the 360 px mobile frame. */ --fnd-project-gutter-phone: 16px; /* mobile frame: the content column is x 16..343 */ --fnd-project-benefit-card-phone: 295px; /* mobile frame: a benefits card runs x 16..310 */ --fnd-project-benefit-ratio: 315 / 273; /* frame: x 52..367, y 1951..2223 */ --fnd-project-story-card-ratio: 383 / 261; /* frame: x 113..496, y 6494..6755 */ --fnd-project-panel-ratio: 587 / 410; /* frame: the featured story picture, x 725..1312, y 5983..6393 */ --fnd-project-map-ratio: 656 / 500; /* frame: the reach map panel, x 656..1312, y 4893..5390 */ /* ---- Grid ------------------------------------------------------------ */ --fnd-project-col-gap: 24px; /* frame: 25 px between the 383 px columns of the resources, collaboration and story rows */ --fnd-project-benefits-gap: 20px; /* frame: 21 px between the 315 px benefit cards */ --fnd-project-benefit-number-size: 64px; /* 5.5 frame: the numeral stands about 60 px, x 246..300, y 2905..2965 */ --fnd-project-benefit-number-pad: 36px; /* 5.5 frame: 32 to 40 above the numeral inside a 228 px card */ --fnd-project-benefits-width: 1320px; /* frame: the benefits row runs x 52..1372, WIDER than the 1200 px site column, so this band breaks out of it */ --fnd-project-overview-split: 44%; /* frame: the narrative column runs x 120..640 of a 1200 column */ /* frame: the media panel occupies x 644..1312 of the 113..1312 content column, so 669 of 1200, and with the 56 px gap the copy column is the 475 px that remain. Re-measured by scanning the panel's cream fill on design/foundation-programme-project/bands/08-impact-of-programme.jpg; the earlier 44% was read off the frame by eye and made the panel 59 px too narrow. */ --fnd-project-impact-split: 39.5%; --fnd-project-rule-width: 4px; /* frame: the rule left of the overview articles reads x 696..699 */ /* ---- Buttons --------------------------------------------------------- */ --fnd-project-pill-radius: 999px; /* frame: fully round ends */ --fnd-project-pill-pad-x: 22px; /* frame: "Read More" is 100 px wide over 56 px of text */ --fnd-project-pill-pad-y: 9px; /* frame: 34 px tall over a 16 px line */ --fnd-project-pill-border: 1px; /* frame: a hairline, one pixel at this scale */ --fnd-project-collab-height: 108px; /* frame: the collaboration buttons run y 4523..4630 */ --fnd-project-collab-chevrons: 92px; /* frame: the chevron block runs x 113..205 inside the button */ /* ---- The chevron motif ------------------------------------------------ */ --fnd-project-chevron-w: 58px; /* frame: each chevron in the resources bar is about 58 px wide */ --fnd-project-chevron-h: 44px; /* frame: it hangs about 44 px into the 90 px bar */ --fnd-project-chevron-pair: 116px; /* frame: the pair runs about 116 px wide */ } /* ========================================================================== Shared pieces ========================================================================== */ /* The estate does not set border-box globally: main.css sets it on four of its own components and nowhere else. So a min-height here was adding its padding on top rather than containing it, and every boxed piece on this page came out exactly its vertical padding too tall: the resource bar at 122 px against the frame's 90, the collaboration button at 140 against 108. Measured on the rendered page on 9 September 2026, which is the only way this shows up, because each value looks right in the file. Scoped to this feature's own classes, and no further. A descendant selector would also change the box model of an editor's rich text inside a band, which would then size differently from the same markup everywhere else on the site. */ .brand-foundation [class*='fnd-project'] { box-sizing: border-box; } /* Every band declares the accent on ITSELF, not on body: a custom property resolves where it is declared, and the view sets --programme-accent on the section element. Declaring these on .brand-foundation instead would leave them resolving against nothing inside the band. */ .brand-foundation .fnd-project-overview, .brand-foundation .fnd-project-benefits, .brand-foundation .fnd-project-resources, .brand-foundation .fnd-project-learning, .brand-foundation .fnd-project-collaboration, .brand-foundation .fnd-project-impact, .brand-foundation .fnd-project-stats, .brand-foundation .fnd-project-story, .brand-foundation .fnd-project-stories { /* The programme colour, else ASISA Foundation Signature Colour/100. */ --fnd-project-accent: var(--programme-accent, var(--foundation, #A137B7)); /* The same colour restricted to what can be read as text on a pale ground. The service 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. Text reads this token; the decorative corner triangle reads the raw one, because a pale triangle is a design choice and pale text is a barrier. */ --fnd-project-accent-ink: var(--programme-accent-ink, var(--foundation, #A137B7)); font-family: var(--fnd-project-font); color: var(--fnd-project-text); font-size: var(--fnd-project-body-size); line-height: var(--fnd-project-line-height); } /* main.css:333 gives every link inside a p, h1, h2, h3 or li a 2 px bottom border, a 14 px size and bold weight. Editor copy in these bands no longer takes it: each rich text wrapper carries id="pageBody" so foundation-rich-text.css (AB#99067) governs it, which is bold, no rule and the surrounding size. That is the Foundation's own body-copy link, and the point of the id is that a link an editor writes here looks like one they write on any other Foundation page. What main.css's rule is wrong for is this feature's own links: a card title, a thumbnail, a resource link and a button, each of which the frame draws at its own size with no rule under it. So the border is cleared on those classes by name, and each sets its own size and weight below. Named classes rather than a descendant selector, and this way round on purpose. A band-level descendant reset (.brand-foundation .fnd-project-x a) also outranks the single-class rules below it, so every element's own size and weight would lose to `inherit`; that silently un-bolded the resource links on the first pass. Wrapping that in :where() to drop its weight then loses the border reset to main.css, because :where() counts as nothing at all. Two classes beat main.css's two type selectors, and touch nothing else. */ .brand-foundation .fnd-project__pill, .brand-foundation .fnd-project-card__media, .brand-foundation .fnd-project-card__title-link, .brand-foundation .fnd-project-resources__link, .brand-foundation .fnd-project-collaboration__button, .brand-foundation .fnd-project-stories__media, .brand-foundation .fnd-project-stories__title-link { border-bottom: 0; } /* Editor lists keep the programme colour on their markers. foundation-rich-text.css replaces the estate's generated bullet with the native list marker, so an ordered list numbers itself and a screen reader still hears a list. The native marker takes its colour from the list item rather than from the ::before it replaced, so the programme colour has to be declared on ::marker or it is silently lost. The five Foundation page views that hold editor copy each do this in an inline