srcdev-nuxt-components 9.5.1 → 9.5.3

package/.claude/skills/components/canvas-switcher.md

@@ -47,7 +47,11 @@ const canvasName = ref<MediaCanvas>("desktopCanvas");
 The selected value doubles as a utility class name: `CanvasSwitcher`'s stylesheet also declares
 `.mobileCanvas`/`.tabletCanvas`/`.laptopCanvas`/`.desktopCanvas`/`.fullWidthCanvas` (max-width
 utilities, not scoped to `.canvas-switcher`), so binding `:class="canvasName"` directly onto a
-preview wrapper constrains it to match — see `DashboardQuadGrid`/`DashboardStatsGrid` stories for the pattern.
+preview wrapper constrains it to match. `DashboardQuadGrid`/`DashboardStatsGrid` stories use the
+classes alone (driven by a Controls select); `PageRow.stories.ts` renders the switcher itself in a
+meta-level decorator, so every story gets an in-canvas width toggle. Copy that decorator for any
+component that sizes itself from its container (`%`, container queries) rather than from
+`@media`: a constrained wrapper cannot trigger a viewport media query.
 These classes only ship in the bundle once `CanvasSwitcher` (or another importer of them) is
 actually imported somewhere, since Nuxt only bundles a component's SFC styles when it's used.
 

package/.claude/skills/components/eyebrow-text.md

@@ -71,9 +71,10 @@ reference: `app/components/01.atoms/text-blocks/eyebrow-text/CONSUMER-STYLING.md
 
 ## Styling
 
-Key CSS custom properties:
+Key CSS custom properties (full list in `CONSUMER-STYLING.md`):
 
-- `--colour-text-eyebrow` — text colour (defaults to an accent/muted tone)
+- `--eyebrow-text-bg-img` — text fill (gradient via `background-clip: text`; use a single-colour gradient for a solid colour)
+- `--eyebrow-text-font-family`, `--eyebrow-text-font-style` (default `italic`), `--eyebrow-text-font-weight`, `--eyebrow-text-letter-spacing` — typography
 
 Text is always `text-transform: uppercase` — do not pass pre-uppercased strings, as this makes content harder to edit and search.
 
@@ -95,8 +96,9 @@ See [component-local-style-override.md](../component-local-style-override.md) fo
    ─────────────────────────────────────────────────────────────────── */
 .eyebrow-text {
   &.my-eyebrow {
-    /* Colours */
-    /* --colour-text-eyebrow: var(--brand-accent); */
+    /* --eyebrow-text-bg-img: linear-gradient(var(--brand-accent), var(--brand-accent)); */
+    /* --eyebrow-text-font-style: normal; */
+    /* --eyebrow-text-letter-spacing: 0.2em; */
   }
 }
 </style>

package/.claude/skills/components/input-error.md

@@ -41,7 +41,7 @@ No slots.
 ```vue
 <template>
   <div class="my-field">
-    <input :id :aria-describedby :aria-invalid="fieldHasError" />
+    <input :id :aria-describedby="ariaDescribedby()" :aria-invalid="fieldHasError" />
     <InputError :id="errorId" :error-message :show-error="fieldHasError" :is-detached="false" :input-variant />
   </div>
 </template>

package/.claude/skills/components/services-card.md

@@ -12,6 +12,7 @@
 | `tag`                   | `"div" \| "section" \| "article"` | `"div"`     | no       |
 | `href`                  | `string`                           | `undefined` | no       |
 | `external`              | `boolean`                          | `false`     | no       |
+| `titlesWithinImageWrapper` | `boolean`                       | `false`     | no       |
 | `eyebrowConfig`         | `ServicesCardEyebrowConfig`                    | `{}`        | no       |
 | `heroConfig`            | `ServicesCardHeroConfig`                       | `{}`        | no       |
 | `durationText`          | `string`                           | `undefined` | no       |
@@ -30,6 +31,17 @@ If an `actions` slot is provided, the card stays as a static `tag` element (no h
 
 `is-clickable` is added to the root class list when whole-card-clickable mode is active, giving `cursor: pointer` and removing default link colour/underline. It's also what gates the border/outline hover/focus interaction-state tokens — see "Interaction states (whole-card-clickable only)" in `CONSUMER-STYLING.md`; they're a no-op when the card isn't clickable, since only `.is-clickable` has a `:hover`/`:focus-visible` rule.
 
+### Titles over the image (`titlesWithinImageWrapper`)
+
+When `true`, the eyebrow and title move out of `.details-wrapper` and sit over the bottom of the image instead. The image wrapper is a `GridStack`: the image is layer 1, and `.image-wrapper-details` (eyebrow + title) is layer 2. The description, meta row and actions stay below the image.
+
+- A gradient scrim behind the text keeps it readable. Its colour comes from `--image-wrapper-details-scrim-colour` (default black), and `--image-wrapper-details-scrim` replaces the whole background (`none` removes it).
+- Text colour uses `contrast-color()` against the scrim colour where supported (black or white, whichever reads better), falling back to white. It reads the scrim colour only, not the photo, so if you remove the scrim, set `--image-wrapper-details-text-colour` yourself.
+- The eyebrow's gradient fill is turned off over the image; it takes the text colour (or `--image-wrapper-details-eyebrow-text-colour`).
+- The eyebrow's default `fontSize` is `"medium"` in this mode (vs `"large"` below the image). `eyebrowConfig`/`heroConfig` still apply.
+
+See "Titles over the image" in `CONSUMER-STYLING.md` for the token list.
+
 ### EyebrowConfig
 
 Exported as `ServicesCardEyebrowConfig` (and `ServicesCardHeroConfig` below) from `srcdev-nuxt-components` since 2026-09-28.
@@ -37,7 +49,7 @@ Exported as `ServicesCardEyebrowConfig` (and `ServicesCardHeroConfig` below) fro
 | Key        | Type                              | Default   |
 | ---------- | ---------------------------------- | --------- |
 | `tag`      | `"p" \| "div" \| "span"`          | `"div"`   |
-| `fontSize` | `"large" \| "medium" \| "small"`  | `"large"` |
+| `fontSize` | `"large" \| "medium" \| "small"`  | `"large"` (`"medium"` with `titlesWithinImageWrapper`) |
 
 ### HeroConfig
 
@@ -159,6 +171,16 @@ See `CONSUMER-STYLING.md` for the full token list — every token is a plain pub
 consumed directly at its point of use (no `--_`-prefixed private indirection layer), so all of
 them work both globally (`:root`) and scoped like the example above.
 
+## Titles over the image usage
+
+```vue
+<ServicesCard :service-data="service" titles-within-image-wrapper>
+  <template #actions="{ serviceData }">
+    <InputButton variant="secondary" button-text="Enquire" :href="`/services/${serviceData.slug}`" />
+  </template>
+</ServicesCard>
+```
+
 ## Whole-card clickable usage
 
 ```vue
@@ -173,6 +195,7 @@ No `actions` slot — the entire card renders as an anchor (`NuxtLink` for the i
 - The `Service` type is imported from `~/types/types.services`.
 - Root markup is two rows (`grid-template-rows: auto 1fr`): `.image-wrapper`, then a `.details-wrapper` (`display: flex; flex-direction: column`) holding the eyebrow, title, description, and a `.footer` wrapper. Description length is controlled by `--description-line-clamp` (default effectively unclamped) rather than a fixed-height grid row.
 - `.footer` groups the meta row and the `actions` slot and gets `margin-block-start: auto`, pinning them to the bottom of the card. Combined with the root's `1fr` details row, this means when `ServicesCardGrid`'s default `align-items: stretch` makes a card taller than its own content (to match a taller sibling in the same row), the extra height goes to `.footer`'s top margin rather than leaving whitespace below the actions slot — so the meta row and actions/button line up across a row of cards regardless of each card's description length. This does the visual job of CSS subgrid without needing a subgrid chain across `ServicesCard`/`ServicesCardGrid` (which would also break whenever cards in a row don't all render the same optional rows — `.meta` and `actions` are both conditional).
-- Image has a `3/4` aspect ratio with a subtle scale-on-hover effect.
+- Image has a `3/4` aspect ratio with a subtle scale-on-hover effect, triggered by hovering the image only (not the whole card). When the card is a whole-card link styled with its own hover effect (e.g. `--services-card-transform-hover`), set `--image-wrapper-border-image-zoom-transform: none` so the two effects don't stack; the "Dark Overlay Cards" story does this. Keep the zoom for the `actions`-slot layout, where the card itself has no hover state. The hover is on `.image-wrapper`, not the image, so it still fires when the overlaid titles cover the image. `.image-wrapper-details` is `position: relative; z-index: 1` because the image's hover `transform` would otherwise paint over it, and `.image-wrapper` sets `isolation: isolate` so that z-index stays inside the card.
 - `.services-card`, `.image-wrapper`, `.details-wrapper`, and `.footer` all set `min-inline-size: 0`. Without it, an unbreakable child — most commonly a long `actions` slot button label, since `InputButton`'s `.button-text` is `white-space: nowrap` with no ellipsis — forces its content's min-content width up through the flex/grid chain and widens that one card's grid column in `ServicesCardGrid` wider than its siblings (the image just rides along on the widened column; it isn't the actual cause). If you see one card/column wider than the rest with cut-off content, check for a long unbreakable string in a slot before assuming it's an image sizing issue.
 - Usually consumed via `ServicesCardGrid` rather than directly.
+- The "Dark Overlay Cards" story shows a full restyle using tokens only: dark panel, flush image, titles over the image, hover lift (`--services-card-transform-hover`), and EyebrowText typography tokens (`--eyebrow-text-font-style`, `-letter-spacing`, etc.) set on the card so they inherit into its eyebrow.

package/.claude/skills/storybook-add-story.md

@@ -277,6 +277,11 @@ Key points:
   (`html[data-color-scheme="light"]`, off-white `--slate-00` stage) by default, whatever the OS
   setting. Use the toolbar "Colour scheme" menu (Light / Dark / Follow OS) to check dark mode.
   Don't hardcode a stage background in a story to get a light canvas; it's already the default.
+- **Edge-aware components need `layout: "fullscreen"`** in the meta's `parameters`. Storybook's
+  default `"padded"` layout insets the canvas by 1rem, which masks viewport gutters, full-bleed
+  tracks and edge alignment (`PageRow`, `SliderGallery`). To swap canvas widths inside a story,
+  add the `CanvasSwitcher` decorator from `PageRow.stories.ts` (container-sized components only;
+  see `components/canvas-switcher.md`).
 - Use `table: { category: "..." }` in `argTypes` when a component has many props — it groups
   them in the Storybook controls panel (e.g. `"Model"`, `"Basic"`, `"Validation"`, `"Styling"`, `"Slots"`).
 - Export multiple named stories (`Default`, `WithError`, `Outlined`, etc.) when you want

package/.vscode/srcdev-component-eyebrow-text.code-snippets

@@ -13,6 +13,10 @@
       ".$1my-page {",
       "  --eyebrow-text-bg-img: linear-gradient(135deg, $2, $3);",
       "  --eyebrow-text-medium: $4;",
+      "  --eyebrow-text-font-family: ;",
+      "  --eyebrow-text-font-style: ;",
+      "  --eyebrow-text-font-weight: ;",
+      "  --eyebrow-text-letter-spacing: ;",
       "}"
     ]
   }

package/.vscode/srcdev-component-services-card.code-snippets

@@ -25,6 +25,17 @@
       "<ServicesCard :service-data=\"$1service\" :href=\"`/services/${$1service.slug}`\" />"
     ]
   },
+  "SRCDEV ServicesCard Titles Over Image": {
+    "description": "ServicesCard with eyebrow and title overlaid on the image, over a scrim",
+    "scope": "vue,html",
+    "body": [
+      "<ServicesCard :service-data=\"$1service\" titles-within-image-wrapper>",
+      "  <template #actions=\"{ serviceData }\">",
+      "    <InputButton variant=\"secondary\" button-text=\"$2Enquire\" :href=\"`/services/${serviceData.slug}`\" />",
+      "  </template>",
+      "</ServicesCard>"
+    ]
+  },
   "SRCDEV ServicesCard With Config Overrides": {
     "description": "ServicesCard with eyebrowConfig/heroConfig overrides",
     "scope": "vue,html",
@@ -76,8 +87,13 @@
       "    --services-card-outline-colour-hover: ;",
       "    --services-card-outline-offset: ;",
       "    --services-card-outline-offset-hover: ;",
+      "    --services-card-background-color-hover: ;",
+      "    --services-card-transform-hover: ;",
       "",
       "    --services-card-gap: ;",
+      "    --services-card-background-color: ;",
+      "    --services-card-padding-block: ;",
+      "    --services-card-padding-inline: ;",
       "    --image-wrapper-aspect-ratio: ;",
       "    --image-wrapper-border-radius: ;",
       "    --image-wrapper-padding-block: ;",
@@ -86,21 +102,36 @@
       "    --details-wrapper-grid-gap: ;",
       "    --details-wrapper-padding-block: ;",
       "    --details-wrapper-padding-inline: ;",
+      "    --eyebrow-text-padding-block: ;",
+      "    --hero-text-padding-block: ;",
+      "    --description-text-colour: ;",
       "    --description-padding-block: ;",
       "    --description-line-height: ;",
+      "    --description-font-weight: ;",
       "    --description-line-clamp: ;",
       "    --meta-padding-block: ;",
+      "    --meta-border-colour: ;",
+      "    --meta-text-colour: ;",
+      "    --meta-duration-text-colour: ;",
+      "    --meta-price-text-colour: ;",
+      "    --meta-duration-font-weight: ;",
+      "    --meta-price-font-weight: ;",
+      "    --meta-letter-spacing: ;",
+      "    --meta-font-size: ;",
       "    --meta-text-transform: ;",
       "    --footer-padding-block: ;",
       "    --footer-wrapper-grid-gap: ;",
       "",
-      "    /* Local-only tokens — page-scoped override only, no :root fallback */",
-      "    --_eyebrow-text-padding-block: ;",
-      "    --_hero-text-padding-block: ;",
-      "    --_description-text-colour: ;",
-      "    --_meta-border-colour: ;",
-      "    --_meta-text-colour: ;",
-      "    --_meta-font-size: ;",
+      "    /* Titles over the image (titlesWithinImageWrapper) */",
+      "    --image-wrapper-details-scrim-colour: ;",
+      "    --image-wrapper-details-scrim: ;",
+      "    --image-wrapper-details-text-colour: ;",
+      "    --image-wrapper-details-eyebrow-text-colour: ;",
+      "    --image-wrapper-details-gap: ;",
+      "    --image-wrapper-details-eyebrow-text-padding-block: ;",
+      "    --image-wrapper-details-eyebrow-text-padding-inline: ;",
+      "    --image-wrapper-details-hero-text-padding-block: ;",
+      "    --image-wrapper-details-hero-text-padding-inline: ;",
       "  }",
       "}"
     ]

package/app/components/01.atoms/page-row/stories/PageRow.stories.ts

@@ -1,5 +1,8 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import { ref } from "vue";
 import PageRowComponent from "../PageRow.vue";
+import CanvasSwitcher from "../../canvas-switcher/CanvasSwitcher.vue";
+import type { MediaCanvas } from "~/types/components";
 
 interface PageRowArgs {
   tag: string;
@@ -47,7 +50,27 @@ export default {
     id: "",
     styleClassPassthrough: [],
   },
+  decorators: [
+    // PageRow sizes its tracks from 100% of its container, so a constrained wrapper stands in for a narrower viewport.
+    (story) => ({
+      components: { story, CanvasSwitcher },
+      setup() {
+        const canvasName = ref<MediaCanvas>("fullWidthCanvas");
+        return { canvasName };
+      },
+      template: `
+        <div style="padding: 1.2rem 1.6rem; border-block-end: 1px solid currentColor;">
+          <CanvasSwitcher v-model:canvas-name="canvasName" />
+        </div>
+        <div :class="canvasName" style="margin-inline: auto; outline: 1px dashed currentColor;">
+          <story />
+        </div>
+      `,
+    }),
+  ],
   parameters: {
+    // Storybook's default padded layout hides the viewport gutter and align edge-bleed.
+    layout: "fullscreen",
     docs: {
       description: {
         component:
@@ -118,26 +141,37 @@ InsetContent.parameters = {
 const NestingTemplate: StoryFn = () => ({
   components: { PageRowComponent },
   setup() {
-    return { sampleText };
+    const nested = [
+      { variant: "full", background: "#fca5a5", desc: "edge to edge" },
+      { variant: "popout", background: "#fdba74", desc: "max 1400px" },
+      { variant: "content", background: "#fde047", desc: "max 1064px" },
+      { variant: "inset-content", background: "#86efac", desc: "max 840px" },
+    ];
+    const chip =
+      "display: inline-block; margin-block-end: 8px; padding: 2px 8px; border-radius: 4px; background: rgba(0,0,0,0.75); color: white; font-family: monospace; font-size: 1.2rem;";
+    return { sampleText, nested, chip };
   },
   template: `
     <div style="min-height: 100vh;">
 
-      <PageRowComponent tag="section" variant="full" style="background: #1e3a5f; color: white; padding-block: 60px;">
+      <PageRowComponent tag="section" style="background: #1e3a5f; color: white; padding-block: 60px;">
+        <span :style="chip">outer PageRow (variant="content")</span>
         <h1 style="margin: 0 0 16px; font-size: 2.4rem;">Full-width background, constrained content</h1>
         <p style="margin: 0; opacity: 0.85; line-height: 1.7;">{{ sampleText }}</p>
       </PageRowComponent>
 
-      <PageRowComponent tag="section" style="background: #f0fdf4; padding-block: 48px;">
-        <PageRowComponent variant="content">
-          <h2 style="margin: 0 0 12px; font-size: 1.8rem; color: #166534;">Nested: content inside a content row</h2>
-          <p style="margin: 0; color: #15803d; line-height: 1.7;">{{ sampleText }}</p>
-        </PageRowComponent>
-        <PageRowComponent variant="popout" style="margin-block: 24px; background: #dcfce7; border-radius: 6px; padding: 24px;">
-          <p style="margin: 0; color: #166534;">Popout child breaking out to 1400px</p>
-        </PageRowComponent>
-        <PageRowComponent variant="inset-content">
-          <p style="margin: 0; color: #15803d; font-style: italic; line-height: 1.7;">Inset content (840px) for a focused quote or aside.</p>
+      <PageRowComponent tag="section" style="background: #0f172a; padding-block: 48px; display: grid; row-gap: 16px;">
+        <span :style="chip" style="background: white; color: #0f172a;">outer PageRow (dark background)</span>
+        <PageRowComponent
+          v-for="row in nested"
+          :key="row.variant"
+          :variant="row.variant"
+          :style="{ background: row.background, color: '#111827', paddingBlock: '24px' }"
+        >
+          <div>
+            <span :style="chip">nested variant="{{ row.variant }}"</span>
+            <p style="margin: 0; line-height: 1.6;">{{ row.desc }}: the background shows the track this nested PageRow occupies.</p>
+          </div>
         </PageRowComponent>
       </PageRowComponent>
 
@@ -152,7 +186,7 @@ NestingPattern.parameters = {
   docs: {
     description: {
       story:
-        "The key composition pattern: nest a full-width outer PageRow (for backgrounds/borders) with inner PageRows at narrower variants. No extra wrapper divs needed.",
+        "The key composition pattern: an outer PageRow carries the full-width background, and nested PageRows pick a track via variant. Each nested row's background marks the track it occupies against the dark outer row. No extra wrapper divs needed.",
     },
   },
 };

package/app/components/01.atoms/text-blocks/eyebrow-text/CONSUMER-STYLING.md

@@ -8,8 +8,12 @@
 | `--eyebrow-text-large` | `1.4rem` | Font size for `font-size="large"` |
 | `--eyebrow-text-medium` | `1.2rem` | Font size for `font-size="medium"` (default) |
 | `--eyebrow-text-small` | `1rem` | Font size for `font-size="small"` |
+| `--eyebrow-text-font-family` | `inherit` | Font family |
+| `--eyebrow-text-font-style` | `italic` | Font style, e.g. `normal` for upright text |
+| `--eyebrow-text-font-weight` | `inherit` | Font weight |
+| `--eyebrow-text-letter-spacing` | `inherit` | Letter-spacing, e.g. `0.25em` for wide tracking |
 
-The library theme also sets all four on `:root` (`03.theming/_default.css` and
+The library theme also sets the colour and size tokens on `:root` (`03.theming/_default.css` and
 `05.typography/01.tokens/_reponsive-font-sizes.css`) with the same values.
 
 > Changed 2026-09-27: the component now carries those values as fallbacks too. Before, an app that

package/app/components/01.atoms/text-blocks/eyebrow-text/EyebrowText.vue

@@ -31,7 +31,10 @@ watch(
     text-transform: uppercase;
     background-clip: text;
     background-image: var(--eyebrow-text-bg-img, linear-gradient(135deg, #c2a770, #b4747e, #d1bd94));
-    font-style: italic;
+    font-family: var(--eyebrow-text-font-family, inherit);
+    font-style: var(--eyebrow-text-font-style, italic);
+    font-weight: var(--eyebrow-text-font-weight, inherit);
+    letter-spacing: var(--eyebrow-text-letter-spacing, inherit);
     color: transparent;
 
     &.large {

package/app/components/03.organisms/services/services-card/CONSUMER-STYLING.md

@@ -3,8 +3,8 @@
 ## Public token API
 
 Every token below is consumed directly at its point of use (`var(--services-card-gap, 1rem)`,
-etc.) — there is no `--_`-prefixed private indirection layer, since none of these values are
-reused across multiple declarations or computed from something else. Set the token globally in
+etc.). The only private token is `--_scrim-colour`, which resolves
+`--image-wrapper-details-scrim-colour` once so the scrim and the text colour read the same value. Set the token globally in
 a theme file, scoped to a page wrapper, or per-instance via `styleClassPassthrough` — no
 `:deep()` needed, component styles are unscoped.
 
@@ -25,6 +25,8 @@ i.e. `is-clickable` is on the root — since these all default to `transparent`/
 | `--services-card-outline-colour-hover` | `transparent` | Outline colour on `:hover`/`:focus-visible` |
 | `--services-card-outline-offset` | `0px` | Resting outline offset |
 | `--services-card-outline-offset-hover` | `0px` | Outline offset on `:hover`/`:focus-visible` — e.g. set to a larger value than the resting offset for an outline that grows outward on hover |
+| `--services-card-background-color-hover` | resting background colour | Background on `:hover`/`:focus-visible` |
+| `--services-card-transform-hover` | `none` | Transform on `:hover`/`:focus-visible`, e.g. `translateY(-0.4rem)` for a lift. Transitions with the other states; skipped under `prefers-reduced-motion: reduce` |
 
 ```css
 /* A card that gets a visible border + outline ring when it's a whole-card link */
@@ -40,11 +42,14 @@ i.e. `is-clickable` is on the root — since these all default to `transparent`/
 | Token | Default | Controls |
 |---|---|---|
 | `--services-card-gap` | `1rem` | Gap between the image row and the details row |
+| `--services-card-background-color` | `transparent` | Card background |
+| `--services-card-padding-block` | none | Padding on the card root (block axis) |
+| `--services-card-padding-inline` | `0` | Padding on the card root (inline axis). Leave at `0` for a flush image, and pad `--details-wrapper-padding-*` instead |
 | `--image-wrapper-aspect-ratio` | `3/4` | Image aspect ratio |
 | `--image-wrapper-border-radius` | `8px` | Image corner radius |
 | `--image-wrapper-padding-block` | `0 0` | Padding inside the image wrapper (block axis) |
 | `--image-wrapper-padding-inline` | `0 0` | Padding inside the image wrapper (inline axis) |
-| `--image-wrapper-border-image-zoom-transform` | `scale(1.05)` | Transform applied to the image on hover |
+| `--image-wrapper-border-image-zoom-transform` | `scale(1.05)` | Transform applied to the image while the pointer is over the image. Set `none` to turn the zoom off (not `scale(0)`, which hides the image). Turning it off suits a whole-card link with its own hover effect (`--services-card-transform-hover`, border/background hover tokens): otherwise moving from the card body onto the image starts a second, separate effect |
 | `--details-wrapper-grid-gap` | `1rem` | Gap between eyebrow/title/description/footer |
 | `--details-wrapper-padding-block` | `0` | Padding inside the details wrapper (block axis) |
 | `--details-wrapper-padding-inline` | `0` | Padding inside the details wrapper (inline axis) |
@@ -53,15 +58,35 @@ i.e. `is-clickable` is on the root — since these all default to `transparent`/
 | `--description-padding-block` | `0 0` | Padding on the description text |
 | `--description-text-colour` | `var(--colour-text-secondary)` | Description paragraph colour |
 | `--description-line-height` | `1.4` | Description line height |
+| `--description-font-weight` | `inherit` | Description font weight |
 | `--description-line-clamp` | `100` | Number of lines the description clamps to — default is effectively unclamped; set e.g. `3` to clamp |
 | `--meta-padding-block` | `1.6rem 0` | Padding above/below the meta row's divider line |
 | `--meta-border-colour` | `var(--theme-border)` | Meta row's top divider colour |
 | `--meta-text-colour` | `inherit` | Duration/price text colour |
+| `--meta-duration-text-colour` | meta text colour | Duration colour only |
+| `--meta-price-text-colour` | meta text colour | Price colour only, e.g. brighter than the duration |
+| `--meta-duration-font-weight` | `500` | Duration font weight |
+| `--meta-price-font-weight` | `700` | Price font weight |
+| `--meta-letter-spacing` | `inherit` | Letter-spacing on the meta row |
 | `--meta-font-size` | `1.4rem` | Duration/price text size |
 | `--meta-text-transform` | `uppercase` | Text transform on the duration/price meta row |
 | `--footer-padding-block` | `0` | Padding on the `.footer` wrapper (meta row + actions slot) |
 | `--footer-wrapper-grid-gap` | `1rem` | Gap between the meta row and the actions slot inside `.footer` |
 
+### Titles over the image (`titlesWithinImageWrapper`)
+
+| Token | Default | Controls |
+|---|---|---|
+| `--image-wrapper-details-scrim-colour` | `#000` | Colour of the gradient scrim behind the title/eyebrow. Use an opaque colour: the default scrim fades it with `color-mix()`, and the text colour is derived from it |
+| `--image-wrapper-details-scrim` | `linear-gradient(to top, <scrim colour at 75%>, transparent 70%)` | The whole scrim `background` value — replace it for a different shape or direction, or set `none` to remove it |
+| `--image-wrapper-details-text-colour` | `contrast-color(<scrim colour>)`, `#fff` without support | Title/eyebrow text colour. Where `contrast-color()` is supported it picks black or white against the scrim colour, so a light scrim gets dark text automatically |
+| `--image-wrapper-details-eyebrow-text-colour` | `inherit` | Eyebrow colour. The eyebrow's gradient fill is turned off over the image so it can't clash with the photo |
+| `--image-wrapper-details-gap` | `0.5rem` | Gap between eyebrow and title |
+| `--image-wrapper-details-eyebrow-text-padding-block` / `-inline` | `0` / `2.2rem` | Eyebrow padding |
+| `--image-wrapper-details-hero-text-padding-block` / `-inline` | `1.2rem 2.2rem` / `2.2rem` | Title padding |
+
+`contrast-color()` only reads the scrim colour, not the photo. If you remove the scrim, set `--image-wrapper-details-text-colour` yourself to suit the images.
+
 ```css
 /* assets/styles/setup/07.components/services-card.css */
 :root {

package/app/components/03.organisms/services/services-card/ServicesCard.vue

@@ -5,16 +5,40 @@
     class="services-card"
     :class="[elementClasses, { 'is-clickable': isClickable() }]"
   >
-    <div class="image-wrapper">
-      <NuxtImg :src="serviceData.image" :alt="serviceData.title" loading="lazy" class="image" />
-    </div>
+    <GridStack tag="div" :style-class-passthrough="['image-wrapper']">
+      <template #layer-1>
+        <NuxtImg :src="serviceData.image" :alt="serviceData.title" loading="lazy" class="image" />
+      </template>
+      <template #layer-2>
+        <div v-if="props.titlesWithinImageWrapper" class="image-wrapper-details">
+          <EyebrowText
+            :font-size="eyebrowConfig.fontSize ?? 'medium'"
+            :tag="eyebrowConfig.tag ?? 'div'"
+            :text-content="serviceData.subtitle"
+          />
+          <HeroText
+            :tag="heroConfig.tag ?? 'h2'"
+            :font-size="heroConfig.fontSize ?? 'heading'"
+            :text-content="[
+              {
+                text: serviceData.title,
+                styleClass: 'normal',
+              },
+            ]"
+          />
+        </div>
+      </template>
+    </GridStack>
+
     <div class="details-wrapper">
       <EyebrowText
+        v-if="!props.titlesWithinImageWrapper"
         :font-size="eyebrowConfig.fontSize ?? 'large'"
         :tag="eyebrowConfig.tag ?? 'div'"
         :text-content="serviceData.subtitle"
       />
       <HeroText
+        v-if="!props.titlesWithinImageWrapper"
         :tag="heroConfig.tag ?? 'h2'"
         :font-size="heroConfig.fontSize ?? 'heading'"
         :text-content="[
@@ -50,6 +74,7 @@ interface Props {
   tag?: "div" | "section" | "article";
   serviceData: Service;
   href?: string;
+  titlesWithinImageWrapper?: boolean;
   /**
    * Force a real browser navigation instead of client-side routing, even for a same-origin
    * href starting with "/". See InputButton's `external` prop for the full rationale.
@@ -67,6 +92,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   tag: "div",
   href: undefined,
+  titlesWithinImageWrapper: false,
   external: false,
   eyebrowConfig: () => ({}),
   heroConfig: () => ({}),
@@ -114,6 +140,9 @@ watch(
     gap: var(--services-card-gap, 1rem);
     min-inline-size: 0;
 
+    background-color: var(--services-card-background-color, transparent);
+    padding-block: var(--services-card-padding-block,);
+    padding-inline: var(--services-card-padding-inline, 0);
     border-radius: var(--services-card-border-radius, 0);
     border: var(--services-card-border-width, 1px) solid var(--services-card-border-colour, transparent);
     outline: var(--services-card-outline-width, 2px) solid var(--services-card-outline-colour, transparent);
@@ -121,9 +150,11 @@ watch(
     overflow: hidden;
 
     transition:
+      background-color 0.3s ease-in-out,
       border-color 0.3s ease-in-out,
       outline-color 0.3s ease-in-out,
-      outline-offset 0.3s ease-in-out;
+      outline-offset 0.3s ease-in-out,
+      transform 0.3s ease-in-out;
 
     &.is-clickable {
       color: inherit;
@@ -134,9 +165,21 @@ watch(
       &:focus-visible {
         /* Falls back to the resting border colour (not transparent) so setting only
            --services-card-border-colour doesn't make the border vanish on hover/focus. */
+        background-color: var(
+          --services-card-background-color-hover,
+          var(--services-card-background-color, transparent)
+        );
         border-color: var(--services-card-border-colour-hover, var(--services-card-border-colour, transparent));
         outline-color: var(--services-card-outline-colour-hover, transparent);
         outline-offset: var(--services-card-outline-offset-hover, 0px);
+        transform: var(--services-card-transform-hover, none);
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        &:hover,
+        &:focus-visible {
+          transform: none;
+        }
       }
     }
 
@@ -144,6 +187,7 @@ watch(
       aspect-ratio: var(--image-wrapper-aspect-ratio, 3/4);
       border-radius: var(--image-wrapper-border-radius, 8px);
       overflow: hidden;
+      isolation: isolate;
       min-inline-size: 0;
       padding-block: var(--image-wrapper-padding-block, 0 0);
       padding-inline: var(--image-wrapper-padding-inline, 0 0);
@@ -154,9 +198,46 @@ watch(
         width: 100%;
         height: 100%;
         transition: transform 0.3s ease-in-out;
+      }
+
+      &:hover .image {
+        transform: var(--image-wrapper-border-image-zoom-transform, scale(1.05));
+      }
+
+      .image-wrapper-details {
+        --_scrim-colour: var(--image-wrapper-details-scrim-colour, #000);
+
+        position: relative;
+        z-index: 1;
+        display: grid;
+        grid-auto-flow: row;
+        align-content: end;
+        gap: var(--image-wrapper-details-gap, 0.5rem);
+        height: 100%;
+        color: var(--image-wrapper-details-text-colour, #fff);
+        background: var(--image-wrapper-details-scrim, linear-gradient(to top, rgb(0 0 0 / 0.75), transparent 70%));
 
-        &:hover {
-          transform: var(--image-wrapper-border-image-zoom-transform, scale(1.05));
+        @supports (color: color-mix(in oklab, red, transparent)) {
+          background: var(
+            --image-wrapper-details-scrim,
+            linear-gradient(to top, color-mix(in oklab, var(--_scrim-colour) 75%, transparent), transparent 70%)
+          );
+        }
+
+        @supports (color: contrast-color(red)) {
+          color: var(--image-wrapper-details-text-colour, contrast-color(var(--_scrim-colour)));
+        }
+
+        .eyebrow-text {
+          --eyebrow-text-bg-img: none;
+          color: var(--image-wrapper-details-eyebrow-text-colour, inherit);
+          padding-block: var(--image-wrapper-details-eyebrow-text-padding-block, 0);
+          padding-inline: var(--image-wrapper-details-eyebrow-text-padding-inline, 2.2rem);
+        }
+
+        .hero-text {
+          padding-block: var(--image-wrapper-details-hero-text-padding-block, 1.2rem 2.2rem);
+          padding-inline: var(--image-wrapper-details-hero-text-padding-inline, 2.2rem);
         }
       }
     }
@@ -175,11 +256,12 @@ watch(
       }
 
       .hero-text {
-        padding-block: var(--hero-text-padding-block, 2rem 1rem);
+        padding-block: var(--hero-text-padding-block, 1.2rem 1rem);
       }
 
       .description {
         color: var(--description-text-colour, var(--colour-text-secondary));
+        font-weight: var(--description-font-weight, inherit);
         line-height: var(--description-line-height, 1.4);
         padding-block: var(--description-padding-block, 0 0);
 
@@ -198,18 +280,29 @@ watch(
         margin-block-start: auto;
         min-inline-size: 0;
         padding-block: var(--footer-padding-block, 0);
-      }
 
-      .meta {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 1rem;
-        padding-block: var(--meta-padding-block, 1.6rem 0);
-        border-block-start: 1px solid var(--meta-border-colour, var(--theme-border));
-        color: var(--meta-text-colour, inherit);
-        font-size: var(--meta-font-size, 1.4rem);
-        text-transform: var(--meta-text-transform, uppercase);
+        .meta {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 1rem;
+          padding-block: var(--meta-padding-block, 1.6rem 0);
+          border-block-start: 1px solid var(--meta-border-colour, var(--theme-border));
+          color: var(--meta-text-colour, inherit);
+          font-size: var(--meta-font-size, 1.4rem);
+          letter-spacing: var(--meta-letter-spacing, inherit);
+          text-transform: var(--meta-text-transform, uppercase);
+
+          .meta-duration {
+            color: var(--meta-duration-text-colour, inherit);
+            font-weight: var(--meta-duration-font-weight, 500);
+          }
+
+          .meta-price {
+            color: var(--meta-price-text-colour, inherit);
+            font-weight: var(--meta-price-font-weight, 700);
+          }
+        }
       }
     }
   }