/* ========================================================================== Foundation News and Insights (AB#100707 / AB#100787) -------------------------------------------------------------------------- Loaded by masterFoundation.cshtml only. Every rule is scoped under .brand-foundation (the Foundation body class) and the fnd-news-insights__* 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 cost the news band and then the learner resource centre a review round each, so they are answered here from the first commit rather than found again: main.css:333 draws a 2px rule under every card link and forces them to 14px, box-sizing is not global outside .LandingPageContent so full-width controls overflow their column by 26px, and .container drops its side padding below 1024px so a band runs edge to edge. DESIGN SOURCE: design/foundation-programme-news/. Read this before changing a number. There is still no 7.4 frame. There IS a 7.3 one, delivered by HeyGuys on 5 August 2026 and attached to feature AB#100706, and 7.3 is this same component: one service, builder, view component, view and stylesheet serve both pages, and only the scope differs. So the 7.3 frame is the only frame either page has, and everything below the H1 is common to both. Values it settles are marked FRAME. - Values marked FRAME were measured off design/foundation-programme-news/ reference.jpg with Pillow. Re-run that folder's measure.py to check one. - Values marked REUSED are taken from foundation-learning-resources.css, whose own values came from the 5.7 frame and from foundation-latest-news.css. Reusing them is deliberate: the three card grids are one component family and must not drift apart by a pixel. - Values marked ESTIMATE are inherited inventions, reasonable and internally consistent, and NOT the design. THE TWO FRAMES AGREE, and where both of them disagree with both stylesheets the correction belongs to both files in one change rather than to this one alone. design/foundation-programme-news/SOURCE.md lists those, measured and ready: the H1's size, the search field's fill, the Back to Top pill's colour, the card image's ratio and the filter row's width. They are NOT applied here, because applying them to this page alone would make the two listings differ, which is the one thing this component family exists to prevent. WHAT THIS PAGE DOES NOT HAVE, and why there are no rules for it: - No content type options. Decision #8 removed them (Q#21), so there is no fieldset, no checkbox and no legend to style. - NO BADGE on the card image. The criteria say "an image, with no content type badge", twice, and the frame draws none: the white circle and its document glyph that the learner resource centre paints are absent here. That is the one visible difference between the two grids. The CORNER TRIANGLE is not part of that absence, and reading it as one was the defect this stylesheet shipped with. The frame draws the programme-coloured triangle in the top right of every card image on this page, exactly as the learner resource centre and the news band do. A badge is a content type's icon; the corner is the estate's card treatment. Only the badge was dropped. Layout, from the criteria: H1 and instruction, then the filter bar (a Categories dropdown, a Programmes dropdown, a search field and a Search button, in that order), then a single grid of cards three across, then a View More button, and a Back to Top control affixed to the right-hand side. VIEW MORE AND BACK TO TOP both come from Theresa Scott's answer to Q#14 on 9 September 2026: "listings carry a View More button at the bottom which, when clicked, loads more articles/results on the same page; a back-to-top button is affixed to the right-hand side of the page." Back to Top is therefore FIXED to the viewport rather than an inline link at the foot of the grid. ========================================================================== */ /* -------------------------------------------------------------------------- Resets. main.css reaches into this band in two 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 draws a rule straight under each card image and renders 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-learning-resources.css. */ .brand-foundation .fnd-news-insights 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 controls are width: 100% with 12px of padding and a 1px border, which puts them 26px wider than their column. */ .brand-foundation .fnd-news-insights *, .brand-foundation .fnd-news-insights *::before, .brand-foundation .fnd-news-insights *::after { box-sizing: border-box; } .brand-foundation .fnd-news-insights { /* Band */ --fnd-ni-bg: #FFFFFF; /* REUSED: --fnd-resources-bg */ --fnd-ni-text: #262626; /* REUSED: --fnd-news-text (Grey/100) */ --fnd-ni-programme: #6B6B6B; /* REUSED: --fnd-news-programme */ --fnd-ni-muted: #9A9A9A; /* REUSED: --fnd-news-muted */ --fnd-ni-accent: var(--programme-accent, var(--foundation, #A137B7)); /* The programme's colour when there is one, else Velvet Electric, the Foundation brand colour, taken from main.css rather than guessed. The programme leg was added with 7.5. The same stylesheet now serves a listing INSIDE a programme, which does carry that programme's banner band and secondary bar, so the old note here ("this page is Foundation level ... there is no programme to inherit from") stopped being true the day that page shipped. The component root carries --programme-accent from Model.AccentStyle; at Foundation level it is absent and this falls back, which is the estate convention. */ --fnd-ni-font: var(--font-family-main, Arial, Helvetica, sans-serif); /* REUSED: --fnd-news-font */ --fnd-ni-pad-y: 64px; /* REUSED: --fnd-news-pad-y */ --fnd-ni-header-gap: 12px; /* REUSED: --fnd-news-header-gap */ --fnd-ni-header-to-filter: 40px; /* ESTIMATE */ --fnd-ni-filter-to-grid: 40px; /* ESTIMATE */ --fnd-ni-intro-width: 720px; /* REUSED: --fnd-news-intro-width */ /* The ACTION colour, and it is NOT the programme accent. The 7.3 frame draws the card's corner triangle in WageWise's green and the Search and Read More pills in the Foundation violet, on the same page. The accent says which programme you are in; the violet says what you can press, and it stays the Foundation's across every programme so a control does not change colour as a visitor moves between them. The 5.7 frame says the same and --fnd-resources-action already carries it. */ --fnd-ni-action: var(--foundation, #A137B7); --fnd-ni-pill-radius: 999px; /* FRAME: every button on this page is a full pill */ --fnd-ni-pill-border: 2px; /* FRAME: the Read More pill's stroke measures two pixels on both frames. One token, so the three pills that share this language cannot drift. */ /* Filter bar. FRAME, and identical to the learner resource centre's, because the two frames draw the same bar: the controls sit on the page rather than in a panel, centred, with no label above either of them. */ --fnd-ni-filter-bg: transparent; /* FRAME: the controls sit on the page, not in a panel */ --fnd-ni-filter-pad: 0; /* FRAME */ --fnd-ni-filter-radius: 0; /* FRAME */ --fnd-ni-filter-gap: 16px; /* ESTIMATE */ --fnd-ni-filter-width: 920px; /* FRAME: the filter row is narrower than the grid and centred under the intro, rather than spanning it. REUSED from the learner resource centre so the two bars are one control. */ --fnd-ni-control-h: 44px; /* ESTIMATE, and a floor rather than a preference: 44px is the WCAG 2.5.5 target size, and these are the page's primary controls on a phone. */ --fnd-ni-control-radius: 6px; /* ESTIMATE */ --fnd-ni-control-border: #D5D0CA; /* ESTIMATE */ /* Cards. All REUSED from the news band and the learner resource centre so the three grids are one system. There is no badge token: this card has none. */ --fnd-ni-gap: 24px; /* REUSED: --fnd-news-gap */ --fnd-ni-card-radius: 16px; /* REUSED: --fnd-news-card-radius */ --fnd-ni-card-pad-bottom: 24px; /* FRAME: the room under Read More, INSIDE the card. The frame leaves 47 to 49px of clear space between a pill's bottom edge and the next row's image on all six measurable rows; 24px here plus the grid's 24px row gap gives 48px. Without it the card ends ON the pill's bottom border, which reads as a card cut off rather than one that has finished. */ /* Top left, TOP RIGHT, bottom right, bottom left. REUSED: --fnd-news-image-radius, which is the estate's corner treatment. The frame draws the accent triangle in that corner, so rounding the box behind it would clip the tip into a curve. */ --fnd-ni-image-radius: var(--fnd-ni-card-radius) 0 var(--fnd-ni-card-radius) var(--fnd-ni-card-radius); --fnd-ni-image-ratio: 384 / 262; /* REUSED: --fnd-news-image-ratio */ --fnd-ni-image-to-meta: 20px; /* REUSED: --fnd-news-image-to-meta */ --fnd-ni-corner: 44px; /* REUSED: --fnd-resources-corner, the news band's triangle. The 7.3 frame measures 58px on a 417px-wide image, which is 14% of it; at the delivered column width that is 51px. Not applied, for the reason the header records: the learner resource centre draws 44 and the two grids move together or not at all. */ background: var(--fnd-ni-bg); color: var(--fnd-ni-text); font-family: var(--fnd-ni-font); padding: var(--fnd-ni-pad-y) 0; } /* ---- Overview ---------------------------------------------------------- */ .brand-foundation .fnd-news-insights__header { text-align: center; } .brand-foundation .fnd-news-insights__heading { color: var(--fnd-ni-text); font-size: 2.25rem; /* ESTIMATE */ font-weight: 700; line-height: 1.2; margin: 0 0 var(--fnd-ni-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-news-insights__intro { margin: 0 auto var(--fnd-ni-header-to-filter) auto; max-width: var(--fnd-ni-intro-width); } .brand-foundation .fnd-news-insights__intro p { color: var(--fnd-ni-text); font-size: 1rem; /* ESTIMATE */ line-height: 1.5; margin: 0; text-align: center; } /* ---- Filter bar -------------------------------------------------------- */ .brand-foundation .fnd-news-insights__filter { background: var(--fnd-ni-filter-bg); border-radius: var(--fnd-ni-filter-radius); margin: 0 auto var(--fnd-ni-filter-to-grid) auto; max-width: var(--fnd-ni-filter-width); padding: var(--fnd-ni-filter-pad); } .brand-foundation .fnd-news-insights__filter-row { align-items: center; /* FRAME: one row of equal-height controls, so they centre on each other rather than sitting on a shared baseline under stacked labels */ display: flex; flex-wrap: wrap; gap: var(--fnd-ni-filter-gap); justify-content: center; } .brand-foundation .fnd-news-insights__field { display: flex; flex: 1 1 200px; /* ESTIMATE: the 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-news-insights__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 */ } /* The field labels are hidden to sight and kept for a screen reader. The frame shows no label above either control: the select carries its own resting text and the search field carries a placeholder. Hiding rather than deleting keeps every control named in the accessibility tree, which a placeholder alone does not do. */ .brand-foundation .fnd-news-insights__label { border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } .brand-foundation .fnd-news-insights__select, .brand-foundation .fnd-news-insights__search { background: #FFFFFF; border: 1px solid var(--fnd-ni-control-border); border-radius: var(--fnd-ni-control-radius); color: var(--fnd-ni-text); font-family: inherit; font-size: 1rem; height: var(--fnd-ni-control-h); padding: 0 12px; /* ESTIMATE */ width: 100%; } /* The magnifier the frame draws inside the search field, as a background image rather than an element, because the input is a void tag and cannot carry one. Left padding clears it. Encoded rather than linked: one glyph is cheaper inline than a request, and it cannot go missing when the stylesheet moves. Identical to the learner resource centre's. */ .brand-foundation .fnd-news-insights__search { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E"); background-position: 14px center; background-repeat: no-repeat; background-size: 18px 18px; padding-left: 42px; } /* An OUTLINED PILL in the Foundation violet, which is what the frame draws, and not a solid block in the programme's accent. See --fnd-ni-action. */ .brand-foundation .fnd-news-insights__submit { background: transparent; border: var(--fnd-ni-pill-border) solid var(--fnd-ni-action); border-radius: var(--fnd-ni-pill-radius); color: var(--fnd-ni-action); cursor: pointer; font-family: inherit; font-size: 0.9375rem; /* ESTIMATE */ font-weight: 700; height: var(--fnd-ni-control-h); padding: 0 28px; /* ESTIMATE */ } .brand-foundation .fnd-news-insights__submit:hover, .brand-foundation .fnd-news-insights__submit:focus { background: var(--fnd-ni-action); color: #FFFFFF; } /* ---- Grid -------------------------------------------------------------- */ .brand-foundation .fnd-news-insights__grid { display: grid; gap: var(--fnd-ni-gap); grid-template-columns: repeat(3, minmax(0, 1fr)); /* "Three in a row", 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-news-insights__card { margin: 0; } .brand-foundation .fnd-news-insights__article { display: flex; flex-direction: column; height: 100%; padding-bottom: var(--fnd-ni-card-pad-bottom); } .brand-foundation .fnd-news-insights__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-ni-image-radius); display: block; overflow: hidden; position: relative; aspect-ratio: var(--fnd-ni-image-ratio); background: #F2EFEA; /* ESTIMATE: the cream ground a card with no image shows, matching the news band's treatment */ } .brand-foundation .fnd-news-insights__image { display: block; height: 100%; object-fit: cover; width: 100%; } /* Border technique, as on the news band and the learner resource centre: 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. There is no badge beside it: see the header. IT IS THE BAND'S ACCENT, WHICH IS THE PROGRAMME'S ONLY ON 7.3. --fnd-ni-accent resolves from --programme-accent, which Model.AccentStyle sets on the section root of a listing INSIDE a programme and leaves absent at Foundation level. So on 7.3 the corner carries that programme's colour, which is what the frame draws; on 7.4 it falls back to the Foundation violet on every card, whatever programme an article belongs to. That is correct rather than a gap: 7.4 is not any programme's page, and the meta line is what names the article's programme there. Narrowed after Lonwabo Mnyaiza pointed out in review of PR 54192 that the old wording claimed the corner tells a visitor whose news they are reading, which is true on one of the two pages this stylesheet serves. */ .brand-foundation .fnd-news-insights__corner { border-left: var(--fnd-ni-corner) solid transparent; border-top: var(--fnd-ni-corner) solid var(--fnd-ni-accent); height: 0; position: absolute; right: 0; top: 0; width: 0; } .brand-foundation .fnd-news-insights__meta { color: var(--fnd-ni-muted); font-size: 0.8125rem; /* REUSED: the news meta line */ line-height: 1.3; margin: var(--fnd-ni-image-to-meta) 0 6px 0; } /* Capitals on the PROGRAMME only. The frame reads "WAGEWISE | Credit Management": the programme shouts and the category does not. This band used to capitalise the whole line, which made the category shout too and lost the distinction the frame draws. Applied in CSS rather than expected from an editor, which is the news band's rule, but scoped to the half the frame capitalises. The category keeps whatever case the Global Settings list holds, because that list is Cathy and Koovi's and a stylesheet should not restate it. */ .brand-foundation .fnd-news-insights__programme { color: var(--fnd-ni-programme); font-weight: 700; text-transform: uppercase; } .brand-foundation .fnd-news-insights__divider { color: var(--fnd-ni-muted); margin: 0 6px; /* ESTIMATE */ } .brand-foundation .fnd-news-insights__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-news-insights__title-link { color: var(--fnd-ni-text); text-decoration: none; } .brand-foundation .fnd-news-insights__title-link:hover, .brand-foundation .fnd-news-insights__title-link:focus { text-decoration: underline; } .brand-foundation .fnd-news-insights__blurb { color: var(--fnd-ni-text); font-size: 0.9375rem; /* ESTIMATE */ line-height: 1.5; margin: 0 0 12px 0; /* ESTIMATE */ } /* An OUTLINED PILL, as the frame draws it, and in the Foundation violet rather than the programme's accent: see --fnd-ni-action. align-self keeps the pill the width of its own words instead of stretching across the card, which is what a flex child does by default. WRITTEN AS a.fnd-news-insights__more, and the tag selector is load-bearing rather than tidy. The band's own link reset at the top of this file is ".fnd-news-insights a", which is one class and a type, so a class-only rule here loses border-bottom to it and the pill renders with three sides. That is what happened to the learner resource centre's pill until 15 September 2026, and it reads as a button whose bottom has been cut off. Do not "simplify" the a. away. */ .brand-foundation a.fnd-news-insights__more { align-self: flex-start; border: var(--fnd-ni-pill-border) solid var(--fnd-ni-action); border-radius: var(--fnd-ni-pill-radius); color: var(--fnd-ni-action); font-size: 0.8125rem; /* ESTIMATE */ font-weight: 700; margin-top: auto; /* Pins Read More to the foot of the card, so the pills line up across a row whose blurbs differ in length. */ padding: 8px 20px; /* ESTIMATE */ text-decoration: none; } .brand-foundation a.fnd-news-insights__more:hover, .brand-foundation a.fnd-news-insights__more:focus { background: var(--fnd-ni-action); color: #FFFFFF; text-decoration: none; } /* ---- Empty state and Back to Top -------------------------------------- */ .brand-foundation .fnd-news-insights__empty { color: var(--fnd-ni-text); font-size: 1rem; margin: 0; padding: 32px 0; /* ESTIMATE */ text-align: center; } /* View More. Centred under the grid, which is where "at the bottom" puts it on a grid that is itself centred in the column. */ .brand-foundation .fnd-news-insights__more-row { display: flex; justify-content: center; margin-top: 40px; /* ESTIMATE */ } /* No frame draws this control: the 7.3 frame shows twelve cards and no load-more of any kind, and it is here because Theresa Scott answered Q#14 the other way on 9 September 2026. So it is drawn in the language the frame DOES give: an outlined pill in the Foundation violet, like Search and Read More. */ .brand-foundation .fnd-news-insights__view-more { background: transparent; border: var(--fnd-ni-pill-border) solid var(--fnd-ni-action); border-radius: var(--fnd-ni-pill-radius); color: var(--fnd-ni-action); cursor: pointer; font-family: inherit; font-size: 1rem; font-weight: 700; min-height: var(--fnd-ni-control-h); /* WCAG 2.5.5 again: this is a primary action */ padding: 0 32px; /* ESTIMATE */ } .brand-foundation .fnd-news-insights__view-more:hover, .brand-foundation .fnd-news-insights__view-more:focus { background: var(--fnd-ni-action); color: #FFFFFF; } /* Back to Top, "affixed to the right-hand side of the page" (Q#14 answer, 9 Sep 2026). Fixed to the viewport rather than placed in the column, which is why the anchor sits outside .container in the view. It is still a plain in-page anchor: with no JavaScript and no script to hide it near the top it simply stays visible, which is a working control rather than a broken one. */ .brand-foundation .fnd-news-insights__top { align-items: center; background: var(--fnd-ni-accent); border-radius: 999px; /* ESTIMATE: a pill, so it reads as a floating control rather than a block pinned to the page */ bottom: 32px; /* ESTIMATE */ color: #FFFFFF; display: flex; font-size: 0.875rem; /* ESTIMATE */ font-weight: 700; justify-content: center; min-height: 44px; /* WCAG 2.5.5 */ padding: 0 20px; /* ESTIMATE */ position: fixed; right: 24px; /* ESTIMATE. The right-hand side, per the answer. */ text-decoration: none; z-index: 20; /* Above the page, below anything modal. main.css puts the search modal at 1000. */ } .brand-foundation .fnd-news-insights__top:hover, .brand-foundation .fnd-news-insights__top:focus { filter: brightness(0.92); text-decoration: none; } /* A card the script has hidden. The HTML Standard now specifies [hidden] as display:none!important in the user-agent sheet, so it beats a normal author declaration, and .fnd-news-insights__card sets no display of its own in any case. This rule is therefore belt and braces rather than a fix. It is here because the card's parent is a grid: if a later rule ever gives the card a display value with !important, a hidden card would come back as a grid item and the count would be wrong. */ .brand-foundation .fnd-news-insights__card[hidden] { display: none; } /* There is deliberately NO rule on [data-fnd-news-insights-hidden]. The marker is for the script, which hides a card by setting its hidden property; a stylesheet rule on the marker would hide cards from a visitor with no script, which is the exact failure the marker exists to avoid. It would also have to be written ="true" rather than as a presence test, because the view always writes the attribute: Razor renders a null value as an EMPTY attribute on this element rather than omitting it. */ /* 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-news-insights__sr { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } /* -------------------------------------------------------------------------- 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: three interactive controls in the filter bar and three links per card. WCAG 2.4.7. The same rule the news band, the learner resource centre and the navigation put back. :focus-visible rather than :focus, so a mouse click does not draw a ring. -------------------------------------------------------------------------- */ .brand-foundation .fnd-news-insights a:focus-visible, .brand-foundation .fnd-news-insights button:focus-visible, .brand-foundation .fnd-news-insights select:focus-visible, .brand-foundation .fnd-news-insights input:focus-visible { outline: 2px solid var(--fnd-ni-accent); outline-offset: 2px; } /* ---- Responsive ------------------------------------------------------- */ /* Two across on tablets, one on phones: the same breakpoints as the news band and the learner resource centre, so the three grids reflow together. */ @media (max-width: 1024px) { .brand-foundation .fnd-news-insights__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-news-insights__inner { padding-left: var(--fnd-ni-side-pad, 20px); padding-right: var(--fnd-ni-side-pad, 20px); } } @media (max-width: 767px) { .brand-foundation .fnd-news-insights { --fnd-ni-pad-y: 40px; /* ESTIMATE */ } .brand-foundation .fnd-news-insights__grid { grid-template-columns: minmax(0, 1fr); } .brand-foundation .fnd-news-insights__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 44px target squeezed into a third of a phone screen is the thing WCAG 2.5.5 exists to prevent. */ .brand-foundation .fnd-news-insights__field, .brand-foundation .fnd-news-insights__field--search { flex: 1 1 100%; } .brand-foundation .fnd-news-insights__submit { width: 100%; } /* Tighter against the corner on a phone, where a pill 24px in eats a noticeable share of the width and can sit over a card's Read More link. */ .brand-foundation .fnd-news-insights__top { bottom: 16px; /* ESTIMATE */ right: 16px; /* ESTIMATE */ } } /* 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. */ /* There is deliberately NO prefers-reduced-motion block here any more. It used to turn off the Search button's hover brightness, and that button no longer has one: the frame draws an outlined pill, so its hover swaps the fill and the text colour instead. A media query naming a declaration that no longer exists is worse than no media query, because the next reader has to prove it does nothing. The one filter left on this page is the Back to Top pill's, and a brightness change is not motion. foundation-learning-resources.css still carries the same now-dead block. */