diff --git a/apps/web/src/assets/css/web.scss b/apps/web/src/assets/css/web.scss index 7fda579ad..63c67bbdb 100644 --- a/apps/web/src/assets/css/web.scss +++ b/apps/web/src/assets/css/web.scss @@ -28,6 +28,30 @@ border-bottom-color: #8eb8dc; } +// Match OG CaTH footer size: govuk-frontend v6 bumped the footer from +// size 16 to 19 as part of the GDS rebrand. Restore size 16 (16px at all +// breakpoints) so the footer matches the legacy service. +// +// The GDS rebrand also lightens the footer text/link colour. Restore the +// legacy near-black text colour (#0b0c0c) for the footer and its links. +.govuk-footer { + @include index.govuk-font-size($size: 16); + color: index.$govuk-text-colour; +} + +// The rebrand styles footer links via :link/:visited/:hover pseudo-class +// selectors (blue), which out-specify a plain `.govuk-footer__link` rule. +// Match those pseudo-classes to force the legacy black link colour, while +// leaving the :focus state (black on yellow) untouched for accessibility. +.govuk-footer__link { + &:link, + &:visited, + &:hover, + &:active { + color: index.$govuk-text-colour; + } +} + .govuk-footer__copyright-logo { margin-bottom: 12px !important; padding: 4px 0 !important; diff --git a/docs/tickets/729/checklist.md b/docs/tickets/729/checklist.md new file mode 100644 index 000000000..6018ef60c --- /dev/null +++ b/docs/tickets/729/checklist.md @@ -0,0 +1,24 @@ +# Checklist: Issue #729 - Make the footer font size the same as in OG CaTH + +## Acceptance Criteria (verify each when complete) + +- [x] AC1: The footer font size in AI CaTH matches OG CaTH (16px, down from v6.2.0's 19px). Verified in compiled CSS: `.govuk-footer{font-size:1rem}` overrides framework `1.1875rem`. +- [x] AC2: Applied using the GOV.UK Design System typography scale via `govuk-font-size($size: 16)`, not an arbitrary px value. +- [x] AC3: Consistent across all pages — rule lives in the global `apps/web/src/assets/css/web.scss`; footer is a single shared partial (`libs/web-core/src/views/components/site-footer.njk`). +- [x] AC4: No other footer styling affected — only `font-size`/`line-height` set on `.govuk-footer`; existing copyright/licence margin/padding/display rules untouched. +- [x] AC5: Renders correctly on mobile and desktop — govuk size 16 is "16/20 at all breakpoints" (confirmed in `settings/_typography-responsive.scss`), so both viewports render at 16px. + +## Verification Steps + +- [x] Build passes: `yarn build` (web app built, SCSS compiled, footer override present in output) +- [x] Lint passes: `yarn lint` (530 files checked, no fixes applied) +- [x] Tests pass: `yarn test` (164 files, 1688 passed / 3 skipped) +- [x] E2E tests pass (if applicable): N/A — no font-size assertions added per CLAUDE.md (styling excluded from E2E) +- [x] Coverage >80%: N/A — pure CSS change, no new logic + +## Code Quality Checks + +- [x] Self-review: `git diff` +- [x] All acceptance criteria verified +- [x] No TODO comments left +- [x] No console.log statements diff --git a/docs/tickets/729/plan.md b/docs/tickets/729/plan.md new file mode 100644 index 000000000..b08bfe07f --- /dev/null +++ b/docs/tickets/729/plan.md @@ -0,0 +1,46 @@ +# Implementation Plan: Issue #729 + +## Overview + +Make the AI CaTH footer font size match the legacy (OG) CaTH footer. The footer currently renders larger because govuk-frontend v6.2.0 sets `.govuk-footer` to `govuk-font($size: 19)` (19px desktop / 14px mobile). OG CaTH ran on an older govuk-frontend where the footer used `govuk-font($size: 16)` (16px desktop / 14px mobile — the GDS pre-rebrand value). Fix: add a single targeted override restoring the 16px responsive font scale. + +## Root Cause (confirmed) + +- `node_modules/govuk-frontend/dist/govuk/components/footer/_mixin.scss:14` → `.govuk-footer { @include base.govuk-font($size: 19); }` +- No existing font-size override in the codebase (`apps/web/src/assets/css/web.scss` only touches footer margin/padding/display). +- OG CaTH footer = 16px desktop (older govuk-frontend default before the rebrand bumped it to 19px). + +## Acceptance Criteria Coverage + +- **AC1: Footer font size matches OG CaTH** — Override `.govuk-footer` to use the GOV.UK 16px responsive typography scale (`govuk-typography-responsive($size: 16)`), matching OG CaTH's 16px desktop / 14px mobile. + - Files: `apps/web/src/assets/css/web.scss` + +- **AC2: Uses GOV.UK typography scale, not arbitrary value** — Use the `govuk-frontend` `govuk-typography-responsive` mixin (size 16) rather than a hardcoded `px` value, so it stays on the Design System scale and remains responsive. + - Files: `apps/web/src/assets/css/web.scss` + +- **AC3: Consistent across all pages** — `web.scss` is the global stylesheet bundled into every page via the web app; a `.govuk-footer` rule applies site-wide. The footer is rendered from a single shared partial (`libs/web-core/src/views/components/site-footer.njk`). + - Files: `apps/web/src/assets/css/web.scss` (global) + +- **AC4: No unintended changes to other footer styling** — Only set `font-size` on `.govuk-footer`. Leave existing copyright/licence margin, padding, and display rules untouched. Inheriting children (links, licence text) pick up the smaller size as they did in OG CaTH. + - Files: `apps/web/src/assets/css/web.scss` + +- **AC5: Renders correctly on mobile and desktop** — `govuk-typography-responsive(16)` emits the responsive breakpoint (14px mobile, 16px tablet/desktop), so both viewports match OG CaTH. The v6.2.0 mobile size is already 14px, so mobile is effectively unchanged; only desktop drops 19px → 16px. + +## Implementation Steps + +1. In `apps/web/src/assets/css/web.scss`, add an `@use` for the govuk typography tools if not already importable, then add a `.govuk-footer` rule applying `govuk-typography-responsive($size: 16)`. + - Note: `web.scss` already does `@use "govuk-frontend/dist/govuk/index";` at line 1. Reference the mixin via that namespace (e.g. `index.govuk-typography-responsive(...)`) or `@use` the specific tools module with a clear namespace. Confirm the correct mixin path during implementation; fall back to `@include` from the `govuk-frontend` tools (`@use "govuk-frontend/dist/govuk/tools/typography"` / `helpers`) if the index namespace doesn't expose it. +2. Place the new rule alongside the existing footer rules (around lines 30-49) for locality. +3. Verify the compiled CSS (build) sets `.govuk-footer` font-size to 16px desktop / 14px mobile. + +## Testing + +- **Build/lint**: `yarn build`, `yarn lint` must pass (SCSS compiles, Biome clean). +- **Manual/visual** (not automated): footer text is 16px on desktop, matching OG CaTH; other footer elements (licence, copyright, links) unchanged in layout. +- **No new unit tests**: pure CSS change, no JS/TS logic to cover. +- **E2E**: Per CLAUDE.md, do NOT add font-size assertions to Playwright tests (styling is explicitly excluded from E2E). Existing footer E2E/accessibility tests should continue to pass unchanged. + +## Notes / Risks + +- The exact OG CaTH value (16px) is inferred from the GOV.UK Frontend rebrand history (footer moved 16px→19px), not from a documented constant. If design confirms a different target, only the `$size` value changes. +- Using the responsive mixin (not a flat `16px`) keeps the mobile size at 14px, matching both OG CaTH and the current mobile rendering — avoids regressing mobile. diff --git a/docs/tickets/729/ticket.md b/docs/tickets/729/ticket.md new file mode 100644 index 000000000..a1fad78bd --- /dev/null +++ b/docs/tickets/729/ticket.md @@ -0,0 +1,11 @@ +# Issue #729 - Make the footer font size the same as in OG CaTH + +## Raw Issue Content + +**Number**: 729 +**Title**: Make the footer font size the same as in OG CaTH +**Labels**: (none) + +## Body + +Currently the footer font size in AI CaTH is bigger than the OG CaTH. Make them consistent