/* ========================================================================== Foundation learner resource centre (AB#100704 / AB#100781) -------------------------------------------------------------------------- Loaded by masterFoundation.cshtml only. Every rule is scoped under .brand-foundation (the Foundation body class) and the fnd-resources__* 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 a Foundation band (h1, h2, p, ul, li, a, select, input) are reset in the "Resets" block below. Three of those leaks were live until 10 September 2026: main.css:333 drew a 2px rule under every card link and forced them to 14px, box-sizing is not global outside .LandingPageContent so the two controls overflowed their column by 26px, and .container drops its side padding below 1024px so the band ran edge to edge. All three are the same defects the news band had already fixed. DESIGN SOURCE: NONE. Read this before changing a number. Every other Foundation feature in this repository has a cached frame under design// and a stylesheet whose values are marked "crop" against it. This page has no frame: none was available when it was built on 9 September 2026, and the criteria were the only source. So: - Values marked REUSED are taken from foundation-latest-news.css, whose own values were read off a crop of the 5 August delivery. They are the safest numbers here, and reusing them is deliberate: the two card grids are the same component family and should not drift apart by a pixel. - Values marked ESTIMATE are this stylesheet's own invention. They are reasonable and internally consistent and they are NOT the design. So appearance here is UNREVIEWED. When the frame is exported, replace every ESTIMATE and delete this paragraph. The acceptance suite asserts behaviour and structure and will not notice a visual change; the visual regression suite is what should gate this page once there is a reference to gate it against. Layout, from the criteria: H1 and instruction, then the filter bar (two dropdowns, a search field, a Search button, then the content type options), then a single grid of cards three across, then Back to Top. No View More and no pagination: settled 9 September 2026 in favour of the delivered design over DEC-002 (Q#14). ========================================================================== */ /* -------------------------------------------------------------------------- Resets. main.css reaches into this band in three ways, and each one needs answering here rather than being overridden value by value. -------------------------------------------------------------------------- */ /* main.css:333 ("p a, h1 a, h2 a, h3 a, .moreinfo a, li a, ...") sets border-bottom: 2px and font-size: 0.875rem on every link inside a list item or a heading. That is two type selectors, so nothing class-based in this file outranks it: it drew a rule straight under each card image and rendered the card title at 14px inside an 18px h2. Reset at band level, and deliberately only these three properties. A wider reset that also touched font-size in general would strip every class its own size, which is the mistake recorded on AB#99013. Same shape as foundation-latest-news.css:188. */ .brand-foundation .fnd-resources a { border-bottom: 0; font-size: inherit; font-weight: inherit; } /* main.css:2232 scopes box-sizing to ".LandingPageContent *", and masterFoundation.cshtml does not wrap @RenderBody() in that class, so the border-box default everyone assumes is absent here. The two controls are width: 100% with 12px of padding and a 1px border, which put them 26px wider than their column. */ .brand-foundation .fnd-resources *, .brand-foundation .fnd-resources *::before, .brand-foundation .fnd-resources *::after { box-sizing: border-box; } .brand-foundation .fnd-resources { /* Band */ --fnd-resources-bg: #FFFFFF; /* REUSED: --fnd-news-bg */ --fnd-resources-text: #262626; /* REUSED: --fnd-news-text (Grey/100) */ --fnd-resources-programme: #6B6B6B; /* REUSED: --fnd-news-programme */ --fnd-resources-muted: #9A9A9A; /* REUSED: --fnd-news-muted */ --fnd-resources-accent: var(--foundation, #A137B7); /* Velvet Electric, the Foundation brand colour, taken from main.css rather than guessed: the fallback here was wrong at first review. This page is Foundation level and carries no programme accent: it has no sub-section banner and no secondary navigation, so there is no programme to inherit from. */ --fnd-resources-font: var(--font-family-main, Arial, Helvetica, sans-serif); /* REUSED: --fnd-news-font */ --fnd-resources-pad-y: 64px; /* REUSED: --fnd-news-pad-y */ --fnd-resources-header-gap: 12px; /* REUSED: --fnd-news-header-gap */ --fnd-resources-header-to-filter: 40px; /* ESTIMATE */ --fnd-resources-filter-to-grid: 40px; /* ESTIMATE */ --fnd-resources-intro-width: 720px; /* REUSED: --fnd-news-intro-width */ /* Filter bar. Every value below is an ESTIMATE: the DE029 filter model is described in the criteria and shown in no frame this build could read. */ --fnd-resources-filter-bg: #F7F5F2; /* ESTIMATE: the cream/linen ground used by the footer band */ --fnd-resources-filter-pad: 24px; /* ESTIMATE */ --fnd-resources-filter-radius: 12px; /* ESTIMATE: smaller than the card radius, so the bar reads as chrome */ --fnd-resources-filter-gap: 16px; /* ESTIMATE */ --fnd-resources-control-h: 44px; /* ESTIMATE, and a floor rather than a preference: 44 px is the WCAG 2.5.5 target size, and these are the page's primary controls on a phone. */ --fnd-resources-control-radius: 6px; /* ESTIMATE */ --fnd-resources-control-border: #D5D0CA; /* ESTIMATE */ /* Cards. All REUSED from the news band so the two grids are one system. */ --fnd-resources-gap: 24px; /* REUSED: --fnd-news-gap */ --fnd-resources-card-radius: 16px; /* REUSED: --fnd-news-card-radius */ /* Top left, TOP RIGHT, bottom right, bottom left. REUSED: --fnd-news-image-radius, which is the estate's corner treatment. This band draws the same accent triangle in the same corner, so rounding the box behind it clipped the tip into a curve here too. Fixed with the news band's on 11 September 2026, having been measured on that band's crop. */ --fnd-resources-image-radius: var(--fnd-resources-card-radius) 0 var(--fnd-resources-card-radius) var(--fnd-resources-card-radius); --fnd-resources-image-ratio: 384 / 262; /* REUSED: --fnd-news-image-ratio */ --fnd-resources-image-to-meta: 20px; /* REUSED: --fnd-news-image-to-meta */ --fnd-resources-badge-size: 38px; /* REUSED: --fnd-news-badge-size */ --fnd-resources-badge-inset-x: 10px; /* REUSED: --fnd-news-badge-inset-x */ --fnd-resources-badge-inset-y: 13px; /* REUSED: --fnd-news-badge-inset-y */ --fnd-resources-badge-icon: 20px; /* REUSED: the news badge's glyph box */ --fnd-resources-corner: 44px; /* ESTIMATE: the news band's corner triangle, matched by eye */ background: var(--fnd-resources-bg); color: var(--fnd-resources-text); font-family: var(--fnd-resources-font); padding: var(--fnd-resources-pad-y) 0; } /* ---- Overview ---------------------------------------------------------- */ .brand-foundation .fnd-resources__header { text-align: center; } .brand-foundation .fnd-resources__heading { color: var(--fnd-resources-text); font-size: 2.25rem; /* ESTIMATE */ font-weight: 700; line-height: 1.2; margin: 0 0 var(--fnd-resources-header-gap) 0; text-align: center; text-transform: none; /* The page H1 is title case as typed, not the ALL CAPS the primary navigation applies. */ } .brand-foundation .fnd-resources__intro { margin: 0 auto var(--fnd-resources-header-to-filter) auto; max-width: var(--fnd-resources-intro-width); } .brand-foundation .fnd-resources__intro p { color: var(--fnd-resources-text); font-size: 1rem; /* ESTIMATE */ line-height: 1.5; margin: 0; text-align: center; } /* ---- Filter bar -------------------------------------------------------- */ .brand-foundation .fnd-resources__filter { background: var(--fnd-resources-filter-bg); border-radius: var(--fnd-resources-filter-radius); margin: 0 0 var(--fnd-resources-filter-to-grid) 0; padding: var(--fnd-resources-filter-pad); } .brand-foundation .fnd-resources__filter-row { align-items: flex-end; display: flex; flex-wrap: wrap; gap: var(--fnd-resources-filter-gap); } .brand-foundation .fnd-resources__field { display: flex; flex: 1 1 200px; /* ESTIMATE: the three controls share the row and wrap together rather than one at a time */ flex-direction: column; gap: 6px; /* ESTIMATE */ min-width: 0; /* Without it a flex item refuses to shrink below its content and the row overflows on a phone. */ } .brand-foundation .fnd-resources__field--search { flex: 2 1 260px; /* ESTIMATE: the search field earns more of the row than a dropdown, because a term is longer than a label */ } .brand-foundation .fnd-resources__label, .brand-foundation .fnd-resources__types-label { color: var(--fnd-resources-text); font-size: 0.875rem; /* ESTIMATE */ font-weight: 700; line-height: 1.3; } .brand-foundation .fnd-resources__select, .brand-foundation .fnd-resources__search { background: #FFFFFF; border: 1px solid var(--fnd-resources-control-border); border-radius: var(--fnd-resources-control-radius); color: var(--fnd-resources-text); font-family: inherit; font-size: 1rem; height: var(--fnd-resources-control-h); padding: 0 12px; /* ESTIMATE */ width: 100%; } .brand-foundation .fnd-resources__submit { background: var(--fnd-resources-accent); border: 0; border-radius: var(--fnd-resources-control-radius); color: #FFFFFF; cursor: pointer; font-family: inherit; font-size: 1rem; font-weight: 700; height: var(--fnd-resources-control-h); padding: 0 24px; /* ESTIMATE */ } .brand-foundation .fnd-resources__submit:hover, .brand-foundation .fnd-resources__submit:focus { filter: brightness(0.92); /* ESTIMATE: no hover state is specified for this page, so the change is deliberately slight */ } /* Content type options */ .brand-foundation .fnd-resources__types { border: 0; /* A fieldset carries a border by default, which would draw a box the design does not show. The element is still a fieldset because the options are one question with several answers. */ margin: var(--fnd-resources-filter-gap) 0 0 0; padding: 0; } .brand-foundation .fnd-resources__types-list { display: flex; flex-wrap: wrap; gap: 8px 20px; /* ESTIMATE */ list-style: none; margin: 10px 0 0 0; /* ESTIMATE */ padding: 0; } .brand-foundation .fnd-resources__types-item { align-items: center; display: flex; gap: 8px; /* ESTIMATE */ margin: 0; } .brand-foundation .fnd-resources__type-label { color: var(--fnd-resources-text); cursor: pointer; font-size: 0.9375rem; /* ESTIMATE */ line-height: 1.3; } /* The checkbox is left as the browser's own control. A custom one would need its own focus ring, its own indeterminate state and its own high-contrast handling, and no design asks for one. */ .brand-foundation .fnd-resources__type-input { height: 18px; /* ESTIMATE */ margin: 0; width: 18px; } /* ---- Grid -------------------------------------------------------------- */ .brand-foundation .fnd-resources__grid { display: grid; gap: var(--fnd-resources-gap); grid-template-columns: repeat(3, minmax(0, 1fr)); /* Three across, which the criteria state. minmax(0,1fr) rather than 1fr: a grid track's default minimum is auto, so a long unbroken title would push the column wider than its share. */ list-style: none; margin: 0; padding: 0; } .brand-foundation .fnd-resources__card { margin: 0; } .brand-foundation .fnd-resources__article { display: flex; flex-direction: column; height: 100%; } .brand-foundation .fnd-resources__media { /* Clips the image to the corners. The triangle is not clipped at the top right, because that corner is square, which is what lets its tip stay a point. */ border-radius: var(--fnd-resources-image-radius); display: block; overflow: hidden; position: relative; aspect-ratio: var(--fnd-resources-image-ratio); background: #F2EFEA; /* ESTIMATE: the cream ground a card with no image shows, matching the news band's treatment */ } .brand-foundation .fnd-resources__image { display: block; height: 100%; object-fit: cover; width: 100%; } .brand-foundation .fnd-resources__badge { background: #FFFFFF var(--fnd-resource-badge, url("../img/foundation/news-document.svg")) center / var(--fnd-resources-badge-icon) var(--fnd-resources-badge-icon) no-repeat; /* The type's own icon when the global settings page supplies one (--fnd-resource-badge, set inline by the view), else the standard document badge. The fallback is the delivered state: the icon field exists and no administrator has uploaded one. */ border-radius: 50%; height: var(--fnd-resources-badge-size); left: var(--fnd-resources-badge-inset-x); position: absolute; top: var(--fnd-resources-badge-inset-y); width: var(--fnd-resources-badge-size); } /* Border technique, as on the news band: 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. */ .brand-foundation .fnd-resources__corner { border-left: var(--fnd-resources-corner) solid transparent; border-top: var(--fnd-resources-corner) solid var(--fnd-resources-accent); height: 0; position: absolute; right: 0; top: 0; width: 0; } .brand-foundation .fnd-resources__meta { color: var(--fnd-resources-muted); font-size: 0.8125rem; /* REUSED: the news meta line */ line-height: 1.3; margin: var(--fnd-resources-image-to-meta) 0 6px 0; text-transform: uppercase; /* REUSED: the news meta line applies capitals in CSS rather than expecting an editor to type them */ } .brand-foundation .fnd-resources__programme { color: var(--fnd-resources-programme); font-weight: 700; } .brand-foundation .fnd-resources__divider { color: var(--fnd-resources-muted); margin: 0 6px; /* ESTIMATE */ } .brand-foundation .fnd-resources__title { font-size: 1.125rem; /* ESTIMATE */ font-weight: 700; line-height: 1.35; margin: 0 0 8px 0; /* ESTIMATE */ text-transform: none; } .brand-foundation .fnd-resources__title-link { color: var(--fnd-resources-text); text-decoration: none; } .brand-foundation .fnd-resources__title-link:hover, .brand-foundation .fnd-resources__title-link:focus { text-decoration: underline; } .brand-foundation .fnd-resources__blurb { color: var(--fnd-resources-text); font-size: 0.9375rem; /* ESTIMATE */ line-height: 1.5; margin: 0 0 12px 0; /* ESTIMATE */ } .brand-foundation .fnd-resources__more { color: var(--fnd-resources-accent); font-size: 0.9375rem; /* ESTIMATE */ font-weight: 700; margin-top: auto; /* Pins Read More to the foot of the card, so the links line up across a row whose blurbs differ in length. */ text-decoration: none; } .brand-foundation .fnd-resources__more:hover, .brand-foundation .fnd-resources__more:focus { text-decoration: underline; } /* ---- Empty state and Back to Top -------------------------------------- */ .brand-foundation .fnd-resources__empty { color: var(--fnd-resources-text); font-size: 1rem; margin: 0; padding: 32px 0; /* ESTIMATE */ text-align: center; } .brand-foundation .fnd-resources__top { color: var(--fnd-resources-accent); display: inline-block; font-size: 0.9375rem; /* ESTIMATE */ font-weight: 700; margin-top: 32px; /* ESTIMATE */ text-decoration: none; } .brand-foundation .fnd-resources__top:hover, .brand-foundation .fnd-resources__top:focus { text-decoration: underline; } /* Screen-reader-only text: the spoken comma in the meta line, and each Read More link's own card title. Same implementation as the news band's fnd-news__sr. */ .brand-foundation .fnd-resources__sr { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } /* ---- Responsive ------------------------------------------------------- */ /* -------------------------------------------------------------------------- Keyboard focus. main.css:41 is a global ":focus { outline: none }" for the whole estate, so without this rule nothing on this page shows where the keyboard is: four interactive controls in the filter bar, six checkboxes and three links per card. WCAG 2.4.7. The same rule the news band (foundation-latest-news.css:312) and the navigation put back. :focus-visible rather than :focus, so a mouse click does not draw a ring. -------------------------------------------------------------------------- */ .brand-foundation .fnd-resources a:focus-visible, .brand-foundation .fnd-resources button:focus-visible, .brand-foundation .fnd-resources select:focus-visible, .brand-foundation .fnd-resources input:focus-visible { outline: 2px solid var(--fnd-resources-accent); outline-offset: 2px; } /* A checkbox is small and its label is the target, so the ring goes round the pair rather than the 13px box. */ .brand-foundation .fnd-resources__type input:focus-visible + span, .brand-foundation .fnd-resources__type:focus-within { outline: 2px solid var(--fnd-resources-accent); outline-offset: 2px; } /* Two across on tablets, one on phones: the same breakpoints as the news band, so the two grids reflow together. */ @media (max-width: 1024px) { .brand-foundation .fnd-resources__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* main.css:22 sets .container { padding: 0 } from 1024px down, so without this the filter bar's cream ground and the cards touch both screen edges. Measured on the news band 3 Sep 2026; the same defect, the same fix. */ .brand-foundation .fnd-resources__inner { padding-left: var(--fnd-resources-side-pad, 20px); padding-right: var(--fnd-resources-side-pad, 20px); } } @media (max-width: 767px) { .brand-foundation .fnd-resources { --fnd-resources-pad-y: 40px; /* ESTIMATE */ } .brand-foundation .fnd-resources__grid { grid-template-columns: minmax(0, 1fr); } .brand-foundation .fnd-resources__heading { font-size: 1.75rem; /* ESTIMATE */ } /* Each control takes the full width rather than sharing a cramped row, and the Search button goes with them: a 44 px target squeezed into a third of a phone screen is the thing WCAG 2.5.5 exists to prevent. */ .brand-foundation .fnd-resources__field, .brand-foundation .fnd-resources__field--search { flex: 1 1 100%; } .brand-foundation .fnd-resources__submit { width: 100%; } } /* Respect a visitor who has asked for less motion. The only motion here is the script's smooth scroll, which reads this and falls back to a jump. */ @media (prefers-reduced-motion: reduce) { .brand-foundation .fnd-resources__submit:hover, .brand-foundation .fnd-resources__submit:focus { filter: none; } }