/* =========================================================================== The ASISA Foundation home page, analysis 2.1 and 2.2 (AB#100716 / AB#100717). TWO BANDS ONLY. Twelve of the fourteen components on the home page are bands this estate already draws and already styles: the hero, the breadcrumb, the benefits, the programme cards, the collaboration bars, the reach map, the statistics, the quote, the logo row and the news band all come from foundation-programme-project.css and foundation-bands.css unchanged. This file styles the two the home page owns and nothing else, and every rule in it is scoped under a class that only the home page's own views render, so it cannot reach another page. LOADED AFTER foundation-bands.css, because it reuses that file's tokens (--fnd-project-*) and must win a tie against the general band rules on the two bands it owns. DESKTOP IS WHAT IS MEASURED HERE. Felicia Khoza's instruction of 29 September 2026 scoped this story to desktop. The delivered desktop frame is design/foundation-home/reference.jpg, 1440 x 9142 with a 132 px caption strip, so a design y is a file y less 132. The mobile frame exists in Figma but has no attachment and nothing in design/foundation-home/captures may be measured (they are browser screen captures at 40 percent zoom). The narrow-width rules at the end are therefore marked ESTIMATE: they keep the page readable and stop it scrolling sideways, and they are not the mobile design. Every measurement below is in FILE coordinates off reference.jpg, which is how the rest of this estate records them. =========================================================================== */ .fnd-home { /* ---- The overview, band 4 ------------------------------------------- */ --fnd-home-h1-size: 60px; /* frame: "Financial Education" has a 44 px cap height at y 1036..1080, which is 0.72 em at 61 px */ --fnd-home-h1-line: 1.1; /* frame: a 67 px baseline pitch between the two lines at 60 px */ --fnd-home-intro-width: 860px; /* frame: the paragraph's widest line runs x 295..1144, so 850, and the box is a little wider than its widest line. Its own token rather than --fnd-project-intro-width (820): a max-width caps the box but the text inside re-wraps, so raising the shared token would change the line count on every page that reads it. 6.1 set this precedent. */ --fnd-home-overview-top: 72px; /* frame: 71 px from the breadcrumb's baseline at y 891 to the heading block at y 962 */ /* ---- The impact feature block, band 5 -------------------------------- */ --fnd-home-impact-top: 96px; /* frame: the overview paragraph ends about y 1160 and the video box begins at y 1256 */ --fnd-home-impact-copy: 552px; /* frame: the copy column runs x 120..672 */ --fnd-home-impact-media: 588px; /* frame: the video runs x 732..1320 */ --fnd-home-impact-gap: 60px; /* frame: 672 to 732 between the two columns */ --fnd-home-impact-ratio: 588 / 411; /* frame: the video box measures 588 x 411, which is not 16:9 and is drawn as measured rather than rounded to one */ --fnd-home-tag-size: 13px; /* ESTIMATE within the frame's 105 x 30 label at y 1311 */ --fnd-home-tag-pad-y: 8px; /* frame: the label is 30 px tall around a 13 px line; measured back off the first render, which came out 27 at 7 px */ --fnd-home-tag-pad-x: 13px; /* frame: 105 px wide around "Impact Story"; 12 px rendered 103 */ --fnd-home-tag-radius: 4px; /* ESTIMATE: the corners are slightly rounded, not a pill */ --fnd-home-tag-gap: 24px; /* frame: the label ends y 1340 and the heading's caps begin y 1371 */ --fnd-home-impact-h2-size: 32px; /* frame: a 23 px cap height on "Over 10 years of 'infinite impact'", which matches --fnd-project-stats-heading-size exactly */ --fnd-home-impact-copy-gap: 20px; /* frame: the heading ends y 1401 and the copy begins y 1425 */ --fnd-home-impact-link-gap: 32px; /* frame: the copy ends y 1535 and the pill begins y 1571 */ --fnd-home-pill-height: 40px; /* frame: the Read More pill measures 104 x 40 at y 1571 */ --fnd-home-pill-pad-x: 15px; /* frame: the pill is 104 px wide and "Read More" sets 72 px at 14 px bold, so 15 px each side plus the two 1 px borders. 22 px was an estimate and rendered 118. */ --fnd-home-pill-size: 14px; /* frame: matches --fnd-project-small-size */ --fnd-home-pill-border: 1px; /* frame: a hairline outline, not a filled button */ } /* The two band roots take the same two accent tokens every other Foundation band root takes, declared ON THE ROOTS and not on .fnd-home above, because a custom property resolves WHERE IT IS DECLARED. Declared on the page wrapper instead they resolve against nothing inside the band, which is the trap foundation-bands.css records as "the single easiest mistake to make in this file" and which this file made on its first pass: the accent half of the heading rendered in the dark ink, the Impact Story label rendered white on white, and the Read More pill lost its border entirely, because a declaration holding an unresolvable var() is invalid at computed-value time and takes the whole property with it. The base typography is set here for the same reason the other band roots set it: a band is a section on a page whose body rules it should not have to inherit through. */ .brand-foundation .fnd-home-overview, .brand-foundation .fnd-home-impact { --fnd-project-accent: var(--programme-accent, var(--foundation, #A137B7)); --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); } /* =========================================================================== Band 4: the overview =========================================================================== The one two-colour heading on the site. Janelle Bolton-Stuart, 31 August 2026 handover part 1 [43:35]: "that's the only place where you're going to have this dual colors because we didn't want to cause any issues." The rules below are scoped under .fnd-home-overview, which only the home page's own view renders, so no other page can pick the treatment up by accident. */ .fnd-home-overview { margin-top: var(--fnd-home-overview-top); } .fnd-home-overview__inner { text-align: center; } .fnd-home-overview__heading { margin: 0; font-family: var(--fnd-project-font); font-size: var(--fnd-home-h1-size); line-height: var(--fnd-home-h1-line); font-weight: 700; letter-spacing: -0.02em; /* frame: the display headings on this estate are tracked in slightly */ text-transform: capitalize; /* design CSS: the Title/H1/Bold style carries it. A no-op on the frame's own wording, which is already capitalised, so it exists to hold the shape when an editor types a lower-case heading. */ color: #262626; /* frame: sampled on the first line's stems */ /* ARIAL, BY THE CLIENT'S OWN INSTRUCTION (via Felicia Khoza, 12 October 2026), and the stack already delivers it. The design CSS names Helvetica for Title/H1/Bold, but --font-family-main is "Arial, Helvetica, sans-serif": Arial comes FIRST, so Arial is what renders wherever it exists, which is every machine this site is read on, and Helvetica is only the fallback behind it. Nothing here needs to change to honour the instruction, and the band stylesheet already settled the same point for the quote: Arial's widths match the design's Helvetica. Measuring this heading against the frame confirmed it again, at 2 px over 677. Do not "correct" this to Helvetica. */ } /* Block spans rather than a
. The frame draws the two halves on their own lines, and a break element would leave the second half running on behind the first as soon as the first wraps on a narrower screen. As blocks each half begins its own line whatever it does. */ .fnd-home-overview__lead, .fnd-home-overview__accent { display: block; } .fnd-home-overview__accent { color: var(--fnd-project-accent-ink); /* frame: sampled #A234B7 on the glyphs, which is the estate's --foundation #A137B7 within the JPEG's own noise */ } .fnd-home-overview__intro { max-width: var(--fnd-home-intro-width); margin: var(--fnd-project-heading-gap) auto 0; font-size: var(--fnd-project-body-size); line-height: var(--fnd-project-line-height); } /* The rich text block ships its own paragraph margins, and the first one would push the intro away from the heading past the 16 px the frame draws. */ .fnd-home-overview__intro > :first-child { margin-top: 0; } .fnd-home-overview__intro > :last-child { margin-bottom: 0; } /* =========================================================================== Band 5: the impact feature block =========================================================================== */ .fnd-home-impact { margin-top: var(--fnd-home-impact-top); } /* The two columns are CENTRED ON EACH OTHER, not top-aligned. The frame draws the video at y 1256..1666 and the copy at y 1311..1610, both centred on y 1461. align-items: center is what reproduces that at any copy length, where a top alignment would only match at the one length the frame happens to draw. */ .fnd-home-impact__inner { display: grid; grid-template-columns: var(--fnd-home-impact-copy) var(--fnd-home-impact-media); column-gap: var(--fnd-home-impact-gap); align-items: center; } /* With no video the copy takes the whole column, which is what the field's help text promises an editor. One column rather than an empty second, so the copy is not left stranded at 552 px. */ .fnd-home-impact--no-media .fnd-home-impact__inner { grid-template-columns: minmax(0, 1fr); } .fnd-home-impact__copy { min-width: 0; /* a grid child's default min-width is auto, which lets a long unbroken word push the column past its track */ } /* A label, not a button and not a link: no hover, no pointer, nothing to click. */ .fnd-home-impact__tag { display: inline-block; margin: 0 0 var(--fnd-home-tag-gap); padding: var(--fnd-home-tag-pad-y) var(--fnd-home-tag-pad-x); border-radius: var(--fnd-home-tag-radius); background: var(--fnd-project-accent); color: #FFFFFF; /* frame: the label's text is white on the magenta */ font-family: var(--fnd-project-font); font-size: var(--fnd-home-tag-size); font-weight: 700; line-height: 1; } .fnd-home-impact__heading { margin: 0; font-family: var(--fnd-project-font); font-size: var(--fnd-home-impact-h2-size); line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; /* frame: the same tracking the overview heading carries. Without it this heading sets 490 px against the frame's 469 for the same words, which is the whole of the difference: 33 characters at 0.02 em of 32 px. */ color: #262626; } .fnd-home-impact__text { margin-top: var(--fnd-home-impact-copy-gap); font-size: var(--fnd-project-body-size); line-height: var(--fnd-project-line-height); } .fnd-home-impact__text > :first-child { margin-top: 0; } .fnd-home-impact__text > :last-child { margin-bottom: 0; } /* The Read More pill: an outline, not a filled button. The frame draws a hairline in the magenta with the magenta label inside it, which is the estate's secondary button and not --fnd-project-pill. */ .fnd-home-impact__link { display: inline-flex; align-items: center; justify-content: center; /* The border is INSIDE the measured 40 px. The estate sets border-box on [class*='fnd-project'] only, which this class does not match, so without this the two 1 px borders render the pill 42 px tall. */ box-sizing: border-box; min-height: var(--fnd-home-pill-height); margin-top: var(--fnd-home-impact-link-gap); padding: 0 var(--fnd-home-pill-pad-x); border: var(--fnd-home-pill-border) solid var(--fnd-project-accent-ink); border-radius: calc(var(--fnd-home-pill-height) / 2); color: var(--fnd-project-accent-ink); font-family: var(--fnd-project-font); font-size: var(--fnd-home-pill-size); font-weight: 700; line-height: 1; text-decoration: none; background: transparent; transition: background-color 120ms ease, color 120ms ease; } .fnd-home-impact__link:hover, .fnd-home-impact__link:focus-visible { background: var(--fnd-project-accent); color: #FFFFFF; } /* The focus ring is drawn outside the pill so it is visible against the page rather than against the button's own fill, which is what every other focusable control in this estate does. */ .fnd-home-impact__link:focus-visible { outline: 2px solid var(--fnd-project-accent-ink); outline-offset: 2px; } .fnd-home-impact__figure { position: relative; margin: 0; min-width: 0; } /* The corner treatment the estate gives every picture: three corners rounded and the top right square. The video player inherits it, which is what the frame draws. */ .fnd-home-impact__media { display: block; width: 100%; aspect-ratio: var(--fnd-home-impact-ratio); object-fit: cover; border-radius: var(--fnd-project-radius-lg) 0 var(--fnd-project-radius-lg) var(--fnd-project-radius-lg); background: #262626; /* frame: sampled inside the video box, and it is what shows while a video loads its first frame */ } /* A video by its link (AB#106716) takes the same box: the frame's ratio and the same three rounded corners, so a YouTube video sits exactly where an uploaded one would. The control itself is the About Us one (FoundationBandVideoLink, foundation-bands.css), which fills its box. */ .brand-foundation .fnd-home-impact__figure .fnd-band-video .fnd-article__video-frame { aspect-ratio: var(--fnd-home-impact-ratio); border-radius: var(--fnd-project-radius-lg) 0 var(--fnd-project-radius-lg) var(--fnd-project-radius-lg); overflow: hidden; } /* =========================================================================== Narrow widths: ESTIMATE, NOT THE MOBILE DESIGN This story is scoped to desktop and the mobile frame has no attachment to measure. What follows is the minimum that keeps the page readable and stops it scrolling sideways, which is a standing acceptance clause on every story here rather than a design decision. When the mobile frame is delivered these blocks are replaced, not adjusted. The breakpoint is the width at which the two impact columns plus their gap (552 + 60 + 588 = 1200) no longer fit the content column. =========================================================================== */ @media (max-width: 1239px) { .fnd-home-impact__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } @media (max-width: 899px) { .fnd-home { --fnd-home-h1-size: 40px; /* ESTIMATE */ --fnd-home-impact-h2-size: 28px; /* ESTIMATE */ --fnd-home-impact-top: 56px; /* ESTIMATE */ --fnd-home-overview-top: 48px; /* ESTIMATE */ } /* THE VIDEO LEADS AND THE COPY FOLLOWS, which is the opposite of what this rule used to say. It read "the copy leads and the video follows, which is the order the copy reads in and the order the markup is already written in, so nothing is reordered here". That was a reasoned guess made when no mobile frame existed. The frame exists now: the home page's MOBILE artboard draws the video first, then the "Impact Story" tag, the heading, the copy and the Read More button (Figma, ASISA Foundation Template UI, Homepage/Mobile, read 14 October 2026). So the guess was wrong and the design settles it. PLACED BY ROW, NOT BY `order`. The copy stays FIRST in the document, so the reading order and the tab order do not depend on the layout: a keyboard user still meets the heading before the video. `order` would move the flow as well, which is what makes focus jump about. The content band and the named blocks solve the same problem the same way. */ .fnd-home-impact__inner { grid-template-columns: minmax(0, 1fr); row-gap: 32px; /* ESTIMATE */ } .fnd-home-impact__figure { grid-row: 1; } .fnd-home-impact__copy { grid-row: 2; } } @media (max-width: 599px) { .fnd-home { --fnd-home-h1-size: 32px; /* ESTIMATE */ --fnd-home-impact-h2-size: 24px; /* ESTIMATE */ } } /* ========================================================================== THE 2.1 FRAME'S OWN NUMBERS FOR THE THREE SHARED BANDS IT DRAWS ========================================================================== The collaboration bars, the "How We Make a Difference" block and the statistics band are shared with the programme and About pages, and their type was measured off those frames. The home frame draws them at its own sizes, which Felicia Khoza pasted out of Figma on 13 October 2026: collaboration bar 384 x 108, radius 0 0 20px 0, rgba(161,55,183,0.3) collaboration label 215 wide, Arial 700 16px/150%, tracking 0.003em, #262626 content heading 421 wide, 700 32px/120%, tracking -0.02em, #262626 content paragraph 421 wide, Arial 400 16px/150%, tracking 0.003em, #404040 statistics heading 1078 wide, 700 32px/120%, centred, tracking -0.02em EVERY RULE IS SCOPED UNDER .fnd-home, in the stylesheet only this page loads, so the programme and About pages keep the sizes their own frames were measured at. That is the opposite of what happened with the available-programmes tokens, which were corrected at band level and did move other pages; Michiel Visser's review of pull request 55362 is why this one stays local until those frames' CSS turns up. THE HEADINGS STAY ARIAL. Figma names Helvetica on both headings while naming Arial on the body copy beside them, which is the design contradicting itself. The client asked for Arial, and the estate's font stack resolves Arial first. ========================================================================== */ /* ---- The three collaboration bars -------------------------------------- */ /* The label wrapped to THREE lines where the frame draws two. The width was already right to within 5px; the leading was not. 27.2px is 1.7, the estate's body step, where the design says 150%. */ .fnd-home .fnd-project-collaboration__label { width: 215px; /* design CSS: the label block is 215 wide */ line-height: 1.5; /* design CSS: 150%, not the estate's 1.7 */ letter-spacing: 0.003em; color: #262626; } /* ---- "How We Make a Difference": the block beside the map --------------- */ /* The heading read 40px in a 685px column, which is what "stretched out" was: the frame gives it 32px in a 421px one, so it turns on the same words. */ .fnd-home .fnd-band-content__copy { max-width: 421px; /* design CSS: both the heading and the copy are 421 wide */ } .fnd-home .fnd-band-content__heading { font-size: 32px; /* design CSS: Title/H3/Bold, not the band's 40 */ line-height: 1.2; /* design CSS: 120% */ letter-spacing: -0.02em; color: #262626; } /* Grey/80, not the body ink. The frame sets this paragraph a step lighter than the heading above it. */ .fnd-home .fnd-band-content__text, .fnd-home .fnd-band-content__text#pageBody, .fnd-home .fnd-band-content__text#pageBody p { letter-spacing: 0.003em; color: #404040; } /* ---- The statistics band's heading -------------------------------------- */ /* 48px of leading on 32px type is 1.5, which is the body step on a heading. The frame gives headings 120%, and the measure is 1078 rather than the full column. */ .fnd-home .fnd-project-stats__heading { max-width: 1078px; /* design CSS: the heading block is 1078 wide */ margin-left: auto; margin-right: auto; font-size: 32px; line-height: 1.2; /* design CSS: 120%, not 1.5 */ letter-spacing: -0.02em; color: #262626; } /* ---- "How We Make a Difference": the two columns and the map ------------ */ /* THE MAP SAT TOO FAR RIGHT AND TOO NARROW. Setting only the copy's measure to the design's 421 left it in a 685 px column, so a quarter of that column was dead space and the gap to the map read as about 326 px where the frame draws 108. The map took what was left, 453, where the frame gives it 669. Read off the 2.1 frame, 13 October 2026, in the 1440 the frame is drawn at: copy 118 to 542 (421 wide) gap 108 map 650 to 1319 (669 wide) The content column is 1240 with 20 px of padding, so 1200 of usable width: 421 + 108 + 671 lands the map within two pixels of the frame. The second track takes the remainder rather than a fixed 669, so the row still gives way on a narrower window instead of overflowing. */ .fnd-home .fnd-band-content__inner { grid-template-columns: 421px 1fr; gap: 108px; } /* AND IT HAS TO LET GO OF THE 421 WHEN THE BAND STACKS, which the rule above did not. 421 px is a LENGTH, not a fraction, so it does not give way. foundation-bands.css collapses this band to one column at 1024 and down, but that rule and this one both select two classes, and this file loads after it, so the desktop's fixed track survived the collapse. At 390 the content box is 358 px and the copy was laid out at 421: the whole HOME PAGE scrolled sideways, 437 px of content in a 390 px viewport, measured in Chromium at iPhone 14 width on 14 October 2026. Nothing else on the page overflowed, and no other page did at all. The second track is 1fr and could have shrunk; the first could not, so the gap went with it. Both are handed back to the shared collapse, which is why this names no values of its own: the band takes the same single column and 40 px gap every other band takes at this width, and the two cannot drift apart. Same breakpoint as that collapse, deliberately. A different one would leave a window where this band is one column and still 421 px wide. */ @media (max-width: 1024px) { .fnd-home .fnd-band-content__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; } } /* NO CORNER ON THE MAP. The estate's picture draws a triangle of the programme's colour over its top-right corner, which is right for a photograph in a programme band and wrong here: the map is a piece of artwork on its own cream ground, and the frame draws it clean. The triangle was landing on the map's own rounded corner and reading as a defect in the artwork. Scoped to this band on this page. Every other picture on the site keeps its corner. */ .fnd-home .fnd-band-content__media .fnd-project__media-corner { display: none; }