Chamfer step cards

Install kit: "Chamfer step cards"
Library page: https://astro.baysixmedia.com/components/chamfer-step-cards/
Files: 4 required, 1 supporting

Write each block below to the path named in its header, relative to the project root. A block marked (required) is one the component does not work without; (supporting) is documentation. Nothing here needs downloading except a block that says so in as many words.

===== FILE (required): src/components/ChamferStepCards.astro =====
---
/**
 * ChamferStepCards
 *
 * A "how it works" section: outlined eyebrow, a big uppercase heading and an
 * intro paragraph across the top, then three step cards. Each card is a photo
 * with both top corners chamfered and a pale caption panel overlapping its
 * lower edge, carrying an orange "Step 01" pill, an uppercase title and a
 * sentence.
 *
 * Heading words rise in and the cards lift in, staggered, the first time they
 * scroll into view.
 *
 * Heading syntax: wrap the orange words in asterisks.
 *
 * Reads the --tw-* tokens from any ancestor, with fallbacks.
 */

export interface ChamferStep {
	title: string;
	text: string;
	/** Pill text. Defaults to "Step 01", "Step 02"... */
	label?: string;
	/** `src: ""` renders a labelled placeholder. */
	image?: { src?: string; alt?: string };
}

export interface ChamferStepCardsProps {
	eyebrow?: string;
	heading?: string;
	headingLevel?: "h2" | "h3";
	intro?: string;
	steps?: ChamferStep[];
	background?: string;
	fontStylesheet?: string;
	class?: string;
	id?: string;
}

interface Props extends ChamferStepCardsProps {}

const {
	eyebrow = "How It Works",
	heading = "",
	headingLevel = "h2",
	intro = "",
	steps = [],
	background = "#ffffff",
	fontStylesheet = "https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700;800;900&family=Noto+Sans:wght@400;500;600;700&family=Inter:wght@500;600;700&display=swap",
	class: className,
	id,
} = Astro.props;

const words = heading
	.split("*")
	.flatMap((seg, i) => seg.split(/\s+/).filter(Boolean).map((w) => ({ w, accent: i % 2 === 1 })));

const Heading = headingLevel;
const Title = headingLevel === "h2" ? "h3" : "h4";
const pad = (n: number) => String(n).padStart(2, "0");

/* No demo content: steps, heading and intro are props. A step with no title
   is dropped; with no steps left the section renders nothing, and the
   generic eyebrow never makes it render on its own. */
const items = (steps ?? []).filter((s) => s?.title);
---

{items.length > 0 && (
<>{fontStylesheet && <link rel="stylesheet" href={fontStylesheet} />}
<section class:list={["csc", className]} id={id} style={`--csc-band:${background}`} data-csc-root>
	<div class="csc-inner">
		<div class="csc-head">
			{eyebrow && <p class="csc-eyebrow">{eyebrow}</p>}
			{words.length > 0 && (
			<Heading class="csc-heading" data-csc-reveal="words">
				{
					words.map((t, i) => (
						<>
							{i > 0 && " "}
							<span class:list={["csc-w", { "csc-accent": t.accent }]} style={`--i:${i}`}>
								{t.w}
							</span>
						</>
					))
				}
			</Heading>
			)}
			{intro && <p class="csc-intro">{intro}</p>}
		</div>

		<ol class="csc-grid">
			{
				items.map((s, i) => {
					const img = s.image ?? { src: "" };
					return (
						<li class="csc-card" data-csc-reveal="up" style={`--d:${i * 0.12}s`}>
							<div class="csc-media">
								{img.src ? (
									<img src={img.src} alt={img.alt ?? ""} width="848" height="584" loading="lazy" decoding="async" />
								) : (
									<div class="csc-ph" role="img" aria-label={`Image placeholder: ${s.title}`}>
										<span>Image · 848 × 584</span>
									</div>
								)}
							</div>
							<div class="csc-panel">
								<span class="csc-pill">{s.label ?? `Step ${pad(i + 1)}`}</span>
								<Title class="csc-title">{s.title}</Title>
								{s.text && <p class="csc-text">{s.text}</p>}
							</div>
						</li>
					);
				})
			}
		</ol>
	</div>
</section></>
)}

<style>
	.csc {
		--csc-navy: var(--tw-navy, #0b4654);
		--csc-accent: var(--tw-accent, #ff6d45);
		--csc-surface: var(--tw-surface, #f0f8fa);
		--csc-muted: var(--tw-muted, #616161);
		--csc-display: var(--tw-display, Outfit, ui-sans-serif, system-ui, sans-serif);
		--csc-body: var(--tw-body, "Noto Sans", ui-sans-serif, system-ui, sans-serif);
		--csc-ease: cubic-bezier(0.44, 0, 0.56, 1);
		--csc-cut: 44px;

		background: var(--csc-band);
		color: var(--csc-navy);
		font-family: var(--csc-body);
	}

	.csc *,
	.csc *::before,
	.csc *::after {
		box-sizing: border-box;
	}

	.csc-inner {
		max-width: 1440px;
		margin: 0 auto;
		padding: 64px 16px;
	}

	.csc-head {
		display: grid;
		gap: 18px;
		justify-items: start;
	}

	.csc-eyebrow {
		margin: 0;
		padding: 4px 14px;
		border: 1px solid var(--csc-accent);
		border-radius: 999px;
		color: var(--csc-accent);
		font: 500 15px/24px var(--csc-body);
		letter-spacing: -0.3px;
		text-transform: uppercase;
	}

	.csc-heading {
		margin: 0;
		font: 700 28px/1.2 var(--csc-display);
		letter-spacing: -0.56px;
		text-transform: uppercase;
	}

	.csc-w {
		display: inline-block;
	}

	.csc-accent {
		color: var(--csc-accent);
	}

	.csc-intro {
		max-width: 400px;
		margin: 0;
		font: 400 16px/25.6px var(--csc-body);
		letter-spacing: -0.32px;
	}

	.csc-grid {
		display: grid;
		gap: 24px;
		margin: 40px 0 0;
		padding: 0;
		list-style: none;
	}

	.csc-card {
		display: flex;
		flex-direction: column;
	}

	.csc-media {
		aspect-ratio: 424 / 292;
	}

	.csc-media img,
	.csc-ph {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 14px;
		clip-path: polygon(var(--csc-cut) 0, calc(100% - var(--csc-cut)) 0, 100% var(--csc-cut), 100% 100%, 0 100%, 0 var(--csc-cut));
	}

	.csc-ph {
		display: grid;
		place-items: center;
		background: repeating-linear-gradient(135deg, #e3eef1 0 12px, #edf5f7 12px 24px);
		font: 500 13px/1.4 var(--csc-body);
	}

	.csc-panel {
		position: relative;
		margin: -52px 20px 0;
		padding: 16px 20px 20px;
		border-radius: 10px;
		background: var(--csc-surface);
	}

	.csc-pill {
		display: inline-block;
		padding: 4px 12px;
		border-radius: 18px;
		background: var(--csc-accent);
		color: #fff;
		font: 600 14px/22.4px var(--csc-body);
		letter-spacing: -0.28px;
		text-transform: uppercase;
	}

	.csc-title {
		margin: 12px 0 0;
		font: 600 20px/32px var(--csc-body);
		letter-spacing: -0.4px;
		text-transform: uppercase;
	}

	.csc-text {
		margin: 2px 0 0;
		color: var(--csc-muted);
		font: 400 16px/25.6px var(--csc-body);
		letter-spacing: -0.32px;
	}

	[data-csc-reveal="up"] {
		transition:
			opacity 0.8s var(--csc-ease) var(--d, 0s),
			transform 0.8s var(--csc-ease) var(--d, 0s);
	}

	.csc[data-csc-ready] [data-csc-reveal="up"]:not([data-in]) {
		opacity: 0;
		transform: translateY(80px);
	}

	.csc-w {
		transition:
			opacity 0.6s var(--csc-ease) calc(var(--i) * 0.06s),
			transform 0.6s var(--csc-ease) calc(var(--i) * 0.06s);
	}

	.csc[data-csc-ready] [data-csc-reveal="words"]:not([data-in]) .csc-w {
		opacity: 0;
		transform: translateY(10px);
	}

	@media (min-width: 810px) {
		.csc-inner {
			padding: 90px 40px;
		}

		.csc-head {
			grid-template-columns: auto minmax(0, 1fr);
			column-gap: 40px;
		}

		.csc-eyebrow {
			margin-top: 40px;
		}

		.csc-heading {
			font-size: 38px;
			letter-spacing: -0.76px;
		}

		.csc-intro {
			grid-column: 2;
		}

		.csc-grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			row-gap: 36px;
		}
	}

	@media (min-width: 1200px) {
		.csc-inner {
			padding: 100px 65px;
		}

		.csc-head {
			grid-template-columns: 245px 640px minmax(0, 1fr);
			column-gap: 0;
			align-items: start;
		}

		.csc-eyebrow {
			margin: 48px 0 0 15px;
		}

		.csc-heading {
			font-size: 50px;
			line-height: 60px;
			letter-spacing: -1px;
		}

		.csc-intro {
			grid-column: 3;
			justify-self: end;
			margin-top: 22px;
		}

		.csc-grid {
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: 20px;
			margin-top: 60px;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		[data-csc-reveal="up"],
		.csc-w {
			transition: none;
		}
	}
</style>

<script>
	/* Appear-on-scroll; one observer per instance, torn down on astro:before-swap. */
	function initChamferStepCards(root: HTMLElement) {
		if (root.dataset.cscReady === "") return;
		if (window.matchMedia("(prefers-reduced-motion: reduce)").matches || !("IntersectionObserver" in window)) return;
		const controller = new AbortController();
		root.dataset.cscReady = "";
		const io = new IntersectionObserver(
			(entries) => {
				for (const entry of entries) {
					if (!entry.isIntersecting) continue;
					(entry.target as HTMLElement).dataset.in = "";
					io.unobserve(entry.target);
				}
			},
			{ threshold: 0.1, rootMargin: "0px 0px -5% 0px" },
		);
		root.querySelectorAll<HTMLElement>("[data-csc-reveal]").forEach((t) => io.observe(t));
		controller.signal.addEventListener("abort", () => io.disconnect());
		document.addEventListener(
			"astro:before-swap",
			() => {
				controller.abort();
				delete root.dataset.cscReady;
			},
			{ once: true, signal: controller.signal },
		);
	}

	const boot = () => document.querySelectorAll<HTMLElement>("[data-csc-root]").forEach(initChamferStepCards);

	if (document.readyState === "loading") {
		document.addEventListener("DOMContentLoaded", boot, { once: true });
	} else {
		boot();
	}

	document.addEventListener("astro:page-load", boot);
</script>

===== END src/components/ChamferStepCards.astro =====

===== FILE (supporting): src/components/ChamferStepCards.md =====
# Chamfer step cards

A how-it-works section: outlined eyebrow, a big uppercase heading and an
intro across the top, then step cards — a photo with both top corners
chamfered and a pale caption panel overlapping its foot, with an orange
"Step 01" pill, an uppercase title and a sentence.

Catalog page: `/components/chamfer-step-cards`

## Files required

- **`ChamferStepCards.astro`** — the component, with one small appear script.
- **`public/chamfer-step-cards/containers.webp`**, **`train.webp`**,
  **`courier.webp`** — the catalog preview's demo photos, passed as props.
- `ChamferStepCards.md` — this file.

## Props

| Prop | Type | Default | What it does |
| :--- | :--- | :--- | :--- |
| `eyebrow` | `string?` | `"How It Works"` | `""` drops it. Never renders the section on its own. |
| `heading` | `string?` | `""` | Orange words in `*asterisks*`. Empty drops the heading. |
| `headingLevel` | `"h2" \| "h3"?` | `"h2"` | |
| `intro` | `string?` | `""` | Empty drops it. |
| `steps` | `{ title, text, label?, image? }[]` | `[]` | `label` overrides "Step 0n". A step with no `title` is dropped. No image `src` draws a neutral "Image" placeholder. |

No demo content ships as a default: the catalog preview passes its steps,
photos, heading and intro as props. With no steps the component renders
nothing.
| `background` | `string?` | `#ffffff` | |
| `fontStylesheet`, `class`, `id` | | | |

## Behaviour (measured)

Cards rise from 80px, staggered 120ms; heading words rise from 10px. No hover
state on the reference.

## Images and credits

| File | Size | Credit |
| :--- | :--- | :--- |
| `containers.webp` | 848 × 584 | Unsplash SoJc04BHUdU, Unsplash License |
| `train.webp` | 848 × 584 | Unsplash XXVattcDrWA, Unsplash License |
| `courier.webp` | 848 × 584 | Unsplash yHkooJPnA7k, Unsplash License |

## Approximations

The chamfer depth (44px) is estimated; the reference bakes it into the image.

===== END src/components/ChamferStepCards.md =====

===== FILE (required): public/chamfer-step-cards/containers.webp =====
[binary asset — download https://astro.baysixmedia.com/chamfer-step-cards/containers.webp and save it to public/chamfer-step-cards/containers.webp]

===== FILE (required): public/chamfer-step-cards/train.webp =====
[binary asset — download https://astro.baysixmedia.com/chamfer-step-cards/train.webp and save it to public/chamfer-step-cards/train.webp]

===== FILE (required): public/chamfer-step-cards/courier.webp =====
[binary asset — download https://astro.baysixmedia.com/chamfer-step-cards/courier.webp and save it to public/chamfer-step-cards/courier.webp]

--- VERIFIED IN THE COMPONENT LIBRARY ---
Enrolled for verification but never run.
No verification run has been recorded.
No checks have passed yet.
No usable source fingerprint, so these results cannot be tied to the files below.

--- NOT PROVEN ---
- ClientRouter: event-tested only. Handlers respond to dispatched lifecycle events; this has NOT been certified against a real <ClientRouter /> transition.

--- WHAT THIS DOES NOT CERTIFY ---
Verification was performed on the unmodified component, in an isolated fixture, in the
library. It says nothing about this project's CSS, routes, layout or data, and nothing
about the component once you adapt it. A verified component is a good starting point,
not a guarantee about the installation you are about to build.

--- TEST IN THIS PROJECT AFTER INSTALLING OR CUSTOMISING ---
- Horizontal overflow at 1440, 1280, 1024, 834, 390 and 320px.
- Keyboard operation end to end, including visible focus.
- The no-JavaScript render.
- prefers-reduced-motion: reduce.
- Two instances on one page, if this project renders more than one.
- If this project uses <ClientRouter />: teardown and reinitialisation across a real navigation.

“Chamfer step cards” from my Astro Component Library:
https://astro.baysixmedia.com/components/chamfer-step-cards/

Use the existing library component as the implementation source. Preserve its design structure, layout, proportions, spacing system, responsive behavior, visual effects, animations, transitions, hover states, interactions, and accessibility.

The copy, colors, typography, images, and other content may be adapted to match the destination website. Do not redesign, simplify, or reinterpret the component’s underlying design build or effects.