Squishy pricing card

Install kit: "Squishy pricing card"
Library page: https://astro.baysixmedia.com/components/squishy-pricing-card/
Files: 1 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/SquishyPricingCard.astro =====
---
/**
 * SquishyPricingCard
 *
 * A single pricing card that answers a hover by squashing very slightly, then
 * springing up past its target and settling — while the price figure grows
 * from 85% to full size on exactly the same curve.
 *
 * The "squish" is the anticipation, not a press. Measuring the reference
 * showed the dip comes at the START of the hover transition (about 200ms in,
 * 4.2% of the travel below the resting value) and is followed by a matching
 * 4.2% overshoot near the end. Pressing the card does nothing at all: with the
 * hover transition allowed to settle first, a pointerdown produced exactly one
 * distinct value.
 *
 * Ships no JavaScript. The reference drives this from a framer-motion spring;
 * here it is two CSS transitions sharing one cubic-bezier, which is why there
 * is no controller, no lifecycle to tear down, and nothing to reinitialise.
 */

export interface SquishyPricingCardProps {
	/** Small pill above the price. Omit to render no pill. */
	badge?: string;
	/** The figure itself, e.g. "$299". Rendered large and monospaced. */
	price?: string;
	/** What the price is per, e.g. "Month". Rendered under it after a slash. */
	period?: string;
	/** One short paragraph under the price. */
	description?: string;
	/** Label for the call to action. Omit to render no call to action. */
	ctaLabel?: string;
	/**
	 * Makes the call to action a link. Unsafe schemes are refused and it falls
	 * back to a <button type="button">, so a bad value cannot produce a live
	 * link — see `safeHref`.
	 */
	href?: string;
	/** Overrides the default, which is `_blank` for absolute http(s) links. */
	target?: "_blank" | "_self";
	/** Overrides the default, which is `noopener noreferrer` on `_blank`. */
	rel?: string;
	/** Card background. Measured default: #615fff. */
	accent?: string;
	/** The decorative blob behind the text. Measured default: #262626. */
	shapeColor?: string;
	/** Draw the decorative blob at all. */
	shapes?: boolean;
	/** Run the squish. `false` leaves every resting value exactly as it is. */
	squish?: boolean;
	/**
	 * How far the card grows on hover. Measured default: 1.05.
	 * Clamped to 1–1.5; below 1 the card would shrink, which is a different
	 * effect wearing this one's name.
	 */
	hoverScale?: number;
	/**
	 * Resting scale of the price figure, which grows to 1 on hover. Measured
	 * default: 0.85. Clamped to 0.1–1.
	 */
	priceRestScale?: number;
	/** Transition length in ms. Measured default: 1000. Clamped to 120–5000. */
	duration?: number;
	class?: string;
	id?: string;
}

interface Props extends SquishyPricingCardProps {}

const {
	badge,
	price,
	period,
	description,
	ctaLabel,
	href,
	target,
	rel,
	accent,
	shapeColor,
	shapes = true,
	squish = true,
	hoverScale,
	priceRestScale,
	duration,
	class: className,
	id,
}: Props = Astro.props;

/*
 * Link data is treated as untrusted: it typically arrives from a CMS and
 * becomes an attribute on every render. Only plain paths, fragments and
 * http/https/mailto/tel survive; anything else — `javascript:` and `data:`
 * above all — is refused, and the call to action renders as a plain <button>
 * rather than as a link that runs.
 *
 * Kept byte-identical to the rest of the library's copies on purpose. A link
 * validator that differs subtly between components is one nobody can audit.
 */
const SAFE_SCHEME = /^(https?:|mailto:|tel:)/i;

/** Control characters are stripped first: "java\tscript:" is a scheme too. */
function stripControls(value: string): string {
	return [...value]
		.filter((ch) => {
			const code = ch.codePointAt(0) ?? 0;
			return code > 31 && code !== 127;
		})
		.join("");
}

function safeHref(value: unknown): string | undefined {
	if (typeof value !== "string") return undefined;
	const raw = value.trim();
	if (raw === "") return undefined;
	const bare = stripControls(raw).trim();
	if (bare === "") return undefined;
	if (
		bare.startsWith("/") ||
		bare.startsWith("#") ||
		bare.startsWith("./") ||
		bare.startsWith("../")
	) {
		return bare;
	}
	if (SAFE_SCHEME.test(bare)) return bare;
	/* A bare relative path has no scheme before its first slash. */
	const colon = bare.indexOf(":");
	const slash = bare.indexOf("/");
	if (colon === -1 || (slash !== -1 && slash < colon)) return bare;
	return undefined;
}

/*
 * Caller-supplied CSS values are validated too.
 *
 * Every one of these lands in an inline `style` attribute. Astro escapes the
 * attribute, so nobody can close it and open another — but inside it a
 * semicolon starts a new DECLARATION, and `url(...)` in a declaration is an
 * outbound request. This library promises previews that make none, so both are
 * refused here rather than assumed absent.
 *
 * Wide on characters, narrow on functions: every colour syntax CSS has is
 * built from these characters, and none of the resource-fetching functions
 * survive.
 */
const CSS_VALUE_ALLOWED = /^[A-Za-z0-9#%.,()\s/+*_-]+$/;
const CSS_VALUE_DENIED = /\b(url|image|image-set|src|element|attr)\s*\(/i;

function safeCssValue(value: unknown, max = 120): string | undefined {
	if (typeof value !== "string") return undefined;
	const bare = stripControls(value).trim();
	if (bare === "" || bare.length > max) return undefined;
	if (!CSS_VALUE_ALLOWED.test(bare)) return undefined;
	if (CSS_VALUE_DENIED.test(bare)) return undefined;
	return bare;
}

const clamp = (n: unknown, lo: number, hi: number, fallback: number) =>
	typeof n === "number" && Number.isFinite(n)
		? Math.min(hi, Math.max(lo, n))
		: fallback;

const resolvedHref = safeHref(href);
if (href !== undefined && resolvedHref === undefined && import.meta.env.DEV) {
	console.warn(
		`[SquishyPricingCard] Refused an unsafe or empty href (${JSON.stringify(href)}). The call to action rendered as a button.`,
	);
}

const isLink = resolvedHref !== undefined;
/*
 * "External" means an absolute http(s) URL. `mailto:` and `tel:` are excluded
 * deliberately: handing either to a new tab leaves an empty one behind once
 * the mail or dial client takes over.
 */
const isExternal = isLink && /^https?:\/\//i.test(resolvedHref);
const resolvedTarget = target ?? (isExternal ? "_blank" : undefined);
const resolvedRel =
	rel ?? (resolvedTarget === "_blank" ? "noopener noreferrer" : undefined);

const hasBadge = typeof badge === "string" && badge.trim() !== "";
const hasPrice = typeof price === "string" && price.trim() !== "";
const hasPeriod = typeof period === "string" && period.trim() !== "";
const hasDescription =
	typeof description === "string" && description.trim() !== "";
const hasCta = typeof ctaLabel === "string" && ctaLabel.trim() !== "";
const hasSlot = Astro.slots.has("default");

/*
 * Empty renders nothing at all. A card with no figure, no copy, no call to
 * action and nothing slotted is a coloured rectangle with a blob on it.
 * `Astro.slots.has` answers this at build time, so it costs nothing at runtime.
 */
const hasContent =
	hasBadge || hasPrice || hasPeriod || hasDescription || hasCta || hasSlot;

const styleVars = [
	safeCssValue(accent, 64) ? `--sqc-accent: ${safeCssValue(accent, 64)}` : "",
	safeCssValue(shapeColor, 64)
		? `--sqc-shape-color: ${safeCssValue(shapeColor, 64)}`
		: "",
	hoverScale !== undefined
		? `--sqc-hover-scale: ${clamp(hoverScale, 1, 1.5, 1.05)}`
		: "",
	priceRestScale !== undefined
		? `--sqc-price-rest-scale: ${clamp(priceRestScale, 0.1, 1, 0.85)}`
		: "",
	duration !== undefined
		? `--sqc-duration: ${Math.round(clamp(duration, 120, 5000, 1000))}ms`
		: "",
]
	.filter(Boolean)
	.join("; ");

const CtaTag = isLink ? "a" : "button";
---

{
	hasContent && (
		<article
			class:list={["sqc", className]}
			id={id}
			style={styleVars}
			data-sqc-root
			data-sqc-squish={squish ? "on" : "off"}
			data-sqc-cta={hasCta ? "yes" : "no"}
		>
			{/*
			  The decorative blob.

			  Two rounded boxes rather than an <svg>, so it needs no viewBox to
			  stay in proportion and takes its colour from one custom property.
			  Purely presentational, hidden from assistive technology, and out
			  of the flow entirely, so it cannot move the content.
			*/}
			{shapes && (
				<span class="sqc-shapes" aria-hidden="true">
					<span class="sqc-shape sqc-shape--disc" />
					<span class="sqc-shape sqc-shape--pill" />
				</span>
			)}

			<div class="sqc-content">
				{hasBadge && <span class="sqc-badge">{badge}</span>}

				{(hasPrice || hasPeriod) && (
					<p class="sqc-price">
						{hasPrice && <span class="sqc-price-figure">{price}</span>}
						{hasPrice && hasPeriod && (
							<span class="sqc-price-slash" aria-hidden="true">
								/
							</span>
						)}
						{hasPeriod && <span class="sqc-price-period">{period}</span>}
					</p>
				)}

				{hasDescription && <p class="sqc-description">{description}</p>}

				<slot />
			</div>

			{hasCta && (
				<CtaTag
					class="sqc-cta"
					href={isLink ? resolvedHref : undefined}
					target={resolvedTarget}
					rel={resolvedRel}
					type={isLink ? undefined : "button"}
				>
					{ctaLabel}
				</CtaTag>
			)}
		</article>
	)
}

<style>
	/*
	 * Token defaults inside `:where()`, which is a portability fix rather than
	 * a flourish.
	 *
	 * Astro scopes component styles by appending a `[data-astro-cid-…]`
	 * attribute, so a plain `.sqc { --sqc-accent: … }` ships at specificity
	 * 0,2,0 and a consumer doing the obvious thing — setting a token on the
	 * class they passed in, at 0,1,0 — silently loses. `:where()` forces the
	 * selector to 0,0,0 while keeping the scoping attribute, so every token
	 * below is overridable by any ordinary rule. Structure stays in the plain
	 * `.sqc` rule underneath, where the component does want to win.
	 */
	:where(.sqc) {
		/* ---- measured from the reference ------------------------------ */
		--sqc-width: 320px;
		--sqc-min-height: 384px;
		--sqc-radius: 12px;
		--sqc-pad: 32px;

		--sqc-accent: #615fff;
		--sqc-shape-color: #262626;
		--sqc-ink: #fff;

		--sqc-badge-bg: rgb(255 255 255 / 0.3);
		--sqc-badge-size: 14px;
		--sqc-badge-line: 20px;
		--sqc-badge-weight: 300;
		--sqc-badge-gap: 12px;

		--sqc-price-size: 60px;
		--sqc-price-line: 72px;
		--sqc-price-weight: 900;
		--sqc-price-rest-scale: 0.85;
		--sqc-price-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
			"Liberation Mono", "Courier New", monospace;

		--sqc-body-size: 16px;
		--sqc-body-line: 24px;

		--sqc-cta-inset: 16px;
		--sqc-cta-radius: 4px;
		--sqc-cta-bg: #fff;
		--sqc-cta-ink: #262626;
		--sqc-cta-border: 2px;
		--sqc-cta-hover-bg: rgb(255 255 255 / 0.3);
		--sqc-cta-hover-ink: #fff;
		--sqc-cta-duration: 150ms;
		--sqc-cta-easing: cubic-bezier(0.4, 0, 0.2, 1);

		--sqc-hover-scale: 1.05;
		--sqc-duration: 1000ms;
		/*
		 * The squish itself.
		 *
		 * Fitted to the reference rather than chosen: its card and its price
		 * ran on ONE normalised curve (identical to four decimal places at
		 * every sampled frame), dipping 4.22% of the travel below the start at
		 * about 200ms and overshooting 4.22% past the target at about 800ms,
		 * settled by 985ms. The closest symmetric cubic-bezier over 1000ms is
		 * this one, at an RMSE of 0.008 in normalised progress, reproducing a
		 * -4.26% dip and a +4.26% overshoot.
		 *
		 * The negative y1 is what makes it squish: the curve leaves the start
		 * travelling the WRONG way. Take it to 0 and this becomes an ordinary
		 * ease with a bounce at the end.
		 */
		--sqc-easing: cubic-bezier(0.7, -0.325, 0.3, 1.325);

		--sqc-focus-ring: #fff;
	}

	.sqc {
		position: relative;
		box-sizing: border-box;
		/*
		 * Fluid to a cap, where the reference is a rigid 320x384 with
		 * `flex-shrink: 0`. That is a deliberate change: measured at a 390px
		 * viewport the reference card stayed exactly 320px wide and would
		 * overflow anything narrower than itself. A library component that
		 * cannot fit a 320px phone is not portable.
		 */
		width: 100%;
		max-width: var(--sqc-width);
		min-height: var(--sqc-min-height);
		padding: var(--sqc-pad);
		border-radius: var(--sqc-radius);
		background: var(--sqc-accent);
		color: var(--sqc-ink);
		overflow: hidden;

		/*
		 * `scale` as its own property rather than inside `transform`, so a
		 * consumer positioning the card with `transform: translate(...)` does
		 * not have their transform silently replaced on hover. The two
		 * properties compose.
		 */
		scale: 1;
		transition: scale var(--sqc-duration) var(--sqc-easing);
		/*
		 * The card grows past its own box on hover, so it has to paint above
		 * whatever sits next to it in a grid of these.
		 */
		z-index: 0;
	}

	/*
	 * Room for the call to action, which is taken out of the flow and laid
	 * over this edge — but only when there IS one. Reserving it
	 * unconditionally left a card with no call to action carrying 72px of dead
	 * space at the bottom, which measurement caught on a long-copy card.
	 *
	 * Enough to clear the button's own 44px plus its 16px inset, with a little
	 * air, so long copy stops above it instead of running underneath.
	 */
	.sqc[data-sqc-cta="yes"] {
		padding-bottom: calc(var(--sqc-cta-inset) * 2 + var(--sqc-pad) + 0.5rem);
	}

	.sqc:hover,
	/*
	 * Keyboard parity, which the reference does not have: its card is a plain
	 * div whose only focusable child is the button, and focusing that button
	 * changes nothing about the card. Here, focusing anything inside runs the
	 * same squish, so a keyboard user sees what a mouse user sees.
	 */
	.sqc:focus-within {
		scale: var(--sqc-hover-scale);
		z-index: 1;
	}

	/* Held exactly as it rests. Not "no card" — no MOVEMENT. */
	.sqc[data-sqc-squish="off"],
	.sqc[data-sqc-squish="off"]:hover,
	.sqc[data-sqc-squish="off"]:focus-within {
		scale: 1;
	}

	/* ---- the decorative blob ------------------------------------------- */

	/*
	 * Measured off the reference's SVG and re-expressed in `cqw`, so the two
	 * shapes keep their proportions and their relationship to each other at
	 * any card width. At the reference's 320px they resolve to exactly the
	 * measured pixels: a 203px disc at 59,13 and a 203x87 pill at 59,222.
	 */
	.sqc-shapes {
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
		overflow: hidden;
		border-radius: inherit;

		/*
		 * The container is THIS layer, not the card, and that distinction is a
		 * bug fix rather than a preference.
		 *
		 * `cqw` resolves against the query container's CONTENT box. The card
		 * carries 32px of padding, so making the card the container measured
		 * `cqw` against 256px rather than 320px and drew the blob at 162px
		 * instead of the measured 203px, shifted up and left. This layer is
		 * `inset: 0` with no padding of its own, so its content box is the
		 * card's border box and the percentages resolve to the pixels they
		 * were measured as.
		 *
		 * `inline-size` only: `size` containment needs a height that does not
		 * depend on contents, and this card's height does.
		 */
		container-type: inline-size;
	}

	.sqc-shape {
		position: absolute;
		left: 18.4375cqw; /* 59 / 320 */
		width: 63.4375cqw; /* 203 / 320 */
		background: var(--sqc-shape-color);
	}

	.sqc-shape--disc {
		top: 4.0625cqw; /* 13 / 320 */
		aspect-ratio: 1;
		border-radius: 50%;
	}

	.sqc-shape--pill {
		top: 69.375cqw; /* 222 / 320 */
		height: 27.1875cqw; /* 87 / 320 */
		border-radius: 50%;
	}

	/* ---- content -------------------------------------------------------- */

	.sqc-content {
		position: relative;
		z-index: 1;
	}

	.sqc-badge {
		display: block;
		width: fit-content;
		margin: 0 0 var(--sqc-badge-gap);
		padding: 2px 12px;
		border-radius: 999px;
		background: var(--sqc-badge-bg);
		font-size: var(--sqc-badge-size);
		line-height: var(--sqc-badge-line);
		font-weight: var(--sqc-badge-weight);
		color: var(--sqc-ink);
	}

	.sqc-price {
		display: block;
		margin: 8px 0;
		font-family: var(--sqc-price-font);
		font-size: var(--sqc-price-size);
		line-height: var(--sqc-price-line);
		font-weight: var(--sqc-price-weight);
		color: var(--sqc-ink);

		/*
		 * Top-left, as measured. A centred origin would make the figure grow
		 * outwards in both directions and slide left as it did, which reads as
		 * the text moving rather than the number getting bigger.
		 */
		transform-origin: top left;
		scale: var(--sqc-price-rest-scale);
		transition: scale var(--sqc-duration) var(--sqc-easing);
	}

	.sqc:hover .sqc-price,
	.sqc:focus-within .sqc-price {
		scale: 1;
	}

	.sqc[data-sqc-squish="off"] .sqc-price,
	.sqc[data-sqc-squish="off"]:hover .sqc-price,
	.sqc[data-sqc-squish="off"]:focus-within .sqc-price {
		scale: var(--sqc-price-rest-scale);
	}

	/*
	 * The slash sits between figure and period and forces the line break, the
	 * way the reference's markup does with a literal <br>. It is decorative
	 * punctuation, so it is hidden from assistive technology — a screen reader
	 * announcing "dollar 299 slash Month" is worse than "$299 Month".
	 */
	.sqc-price-figure,
	.sqc-price-period {
		display: inline;
	}

	.sqc-price-slash::after {
		content: "\A";
		white-space: pre;
	}

	.sqc-description {
		margin: 0;
		font-size: var(--sqc-body-size);
		line-height: var(--sqc-body-line);
		color: var(--sqc-ink);
		text-wrap: pretty;
	}

	/* ---- call to action -------------------------------------------------- */

	.sqc-cta {
		position: absolute;
		z-index: 2;
		left: var(--sqc-cta-inset);
		right: var(--sqc-cta-inset);
		bottom: var(--sqc-cta-inset);

		display: block;
		box-sizing: border-box;
		padding: 8px 0;
		border: var(--sqc-cta-border) solid var(--sqc-cta-bg);
		border-radius: var(--sqc-cta-radius);
		background: var(--sqc-cta-bg);
		color: var(--sqc-cta-ink);

		font-family: var(--sqc-price-font);
		font-size: var(--sqc-body-size);
		line-height: var(--sqc-body-line);
		font-weight: 900;
		text-align: center;
		text-transform: uppercase;
		text-decoration: none;
		cursor: pointer;

		-webkit-backdrop-filter: blur(8px);

		transition:
			background-color var(--sqc-cta-duration) var(--sqc-cta-easing),
			color var(--sqc-cta-duration) var(--sqc-cta-easing);
	}

	/*
	 * In its own block because this project's CSS minifier collapses an
	 * adjacent `backdrop-filter` / `-webkit-backdrop-filter` pair and keeps
	 * only the prefixed one, which Firefox does not accept. Verified in the
	 * built stylesheet on another component in this library.
	 */
	@supports (backdrop-filter: blur(1px)) {
		.sqc-cta {
			backdrop-filter: blur(8px);
		}
	}

	.sqc-cta:hover {
		background: var(--sqc-cta-hover-bg);
		color: var(--sqc-cta-hover-ink);
	}

	.sqc-cta:focus-visible {
		outline: 2px solid var(--sqc-focus-ring);
		outline-offset: 3px;
	}

	/* ---- reduced motion --------------------------------------------------- */

	/*
	 * The reference does not honour this — measured, not assumed: under
	 * `prefers-reduced-motion: reduce` its hover still produced 58 distinct
	 * intermediate states.
	 *
	 * Here every movement stops, and nothing that informs disappears. The card
	 * keeps its resting size, the price is shown at FULL size rather than at
	 * its 85% resting scale — a state nobody can now animate out of should be
	 * the legible one — and the call to action keeps its colour change, which
	 * is a state change rather than motion.
	 */
	@media (prefers-reduced-motion: reduce) {
		.sqc,
		.sqc:hover,
		.sqc:focus-within {
			scale: 1;
			transition: none;
		}

		.sqc-price,
		.sqc:hover .sqc-price,
		.sqc:focus-within .sqc-price {
			scale: 1;
			transition: none;
		}
	}

	/* ---- forced colours ---------------------------------------------------- */

	/*
	 * A high-contrast theme discards the accent and the blob, which would
	 * leave the card with no edge at all, so the boundary is restated as a
	 * real border.
	 */
	@media (forced-colors: active) {
		.sqc {
			border: 1px solid CanvasText;
		}

		.sqc-shapes {
			display: none;
		}
	}
</style>

===== END src/components/SquishyPricingCard.astro =====

===== FILE (supporting): src/components/SquishyPricingCard.md =====
# Squishy pricing card

A single pricing card that squashes very slightly on hover, then springs up
past its target and settles — while the price figure grows from 85% to full
size on exactly the same curve.

Catalog page: `/components/squishy-pricing-card`

## Copying it into another Astro project

Copy **`SquishyPricingCard.astro`**. That is the entire component — one file,
no second step.

| What it needs | Status |
| :--- | :--- |
| Imports from this catalog | none |
| npm packages | none |
| Astro built-ins (`astro:assets`, …) | none |
| Client-side JavaScript | none — it ships no `<script>` at all |
| Global stylesheet | none — every value is a `--sqc-*` property on the root |
| Webfonts | none — system UI stack, system monospace for the figure |
| Images / SVG assets | none — the decorative blob is two rounded boxes |
| Network requests | none |

### Exact steps

1. Copy `SquishyPricingCard.astro` into your own `src/components/`.
2. Import it and render it:

   ```astro
   ---
   import SquishyPricingCard from "../components/SquishyPricingCard.astro";
   ---

   <SquishyPricingCard
     badge="Pro"
     price="$299"
     period="Month"
     description="Everything in Starter, plus unlimited projects."
     ctaLabel="Get it now"
     href="/signup"
   />
   ```

3. There is no step three. It renders complete from the server.

## Props

| Prop | Type | Default | Notes |
| :--- | :--- | :--- | :--- |
| `badge` | `string` | — | Small pill above the price. Omit to render none. |
| `price` | `string` | — | The figure, e.g. `"$299"`. |
| `period` | `string` | — | What it is per, e.g. `"Month"`. Appears under the figure after a slash. |
| `description` | `string` | — | One short paragraph. |
| `ctaLabel` | `string` | — | Call-to-action label. Omit to render no call to action. |
| `href` | `string` | — | Makes the call to action a link. Unsafe values are refused. |
| `target` | `"_blank" \| "_self"` | `_blank` for absolute `http(s)` | Overrides the default. |
| `rel` | `string` | `noopener noreferrer` when target is `_blank` | Overrides the default. |
| `accent` | `string` | `#615fff` | Card background. |
| `shapeColor` | `string` | `#262626` | The decorative blob. |
| `shapes` | `boolean` | `true` | Draw the blob at all. |
| `squish` | `boolean` | `true` | `false` holds every resting value still. |
| `hoverScale` | `number` | `1.05` | How far the card grows. Clamped 1–1.5. |
| `priceRestScale` | `number` | `0.85` | Resting scale of the figure. Clamped 0.1–1. |
| `duration` | `number` | `1000` | Transition length in ms. Clamped 120–5000. |
| `class` | `string` | — | Your own class, for layout or token overrides. |
| `id` | `string` | — | Set on the card root. |

Anything not supplied simply is not rendered. A card with no badge, no price,
no period, no description, no call to action and nothing slotted renders
**nothing at all** rather than a coloured rectangle with a blob on it.

### The slot

`<slot />` sits below the description, inside the content column. Use it for a
feature list, a note, anything the four text props do not cover. It cannot
break the squish: both animated properties are on the card and the price, and
the blob is out of the flow entirely.

The call to action is taken out of the flow and laid over the bottom edge, and
the card reserves room for it — but **only when there is one**. A card without
a `ctaLabel` gets its normal padding back.

### Unsafe links render inert

`href` is treated as untrusted, because it usually comes from a CMS. Only plain
paths, fragments, and `http` / `https` / `mailto` / `tel` survive. Control
characters are stripped **before** the scheme is examined, so
`java<TAB>script:` is caught too.

A refused `href` does not throw and does not blank the card: the call to action
renders as a `<button type="button">` with its label intact, and a warning is
logged in development. Verified in a browser — `javascript:`, `data:text/html`
and a tab-interrupted `javascript:` all rendered as inert buttons with no
`href`, and neither sentinel global was set.

Caller-supplied **CSS** values (`accent`, `shapeColor`) are validated too. They
land in an inline `style` attribute, where a semicolon starts a new declaration
and `url(…)` is an outbound request. Both are refused, and a rejected value
falls back to the default rather than being half-applied.

## Styling

Every measured value is a custom property on the card root, declared inside
`:where()` — **specificity 0**, so your own class wins without `!important`:

```css
.my-plan {
	--sqc-accent: #0f766e;
	--sqc-width: 360px;
	--sqc-duration: 600ms;
}
```

Astro scopes component styles by appending a `[data-astro-cid-…]` attribute, so
an ordinary `.sqc { … }` rule would ship at specificity 0,2,0 and beat a
consumer's single class. `:where()` is what stops that.

| Property | Default | Controls |
| :--- | :--- | :--- |
| `--sqc-width` / `--sqc-min-height` | `320px` / `384px` | Cap and floor |
| `--sqc-radius` / `--sqc-pad` | `12px` / `32px` | Card shape |
| `--sqc-accent` / `--sqc-shape-color` / `--sqc-ink` | `#615fff` / `#262626` / `#fff` | Colour |
| `--sqc-badge-bg` … `--sqc-badge-gap` | `rgb(255 255 255 / .3)`, 14px/20px, 300, 12px | The pill |
| `--sqc-price-size` / `-line` / `-weight` / `-font` | 60px / 72px / 900 / system mono | The figure |
| `--sqc-price-rest-scale` | `0.85` | Resting size of the figure |
| `--sqc-body-size` / `-line` | `16px` / `24px` | Description |
| `--sqc-cta-*` | inset 16px, radius 4px, white on `#262626`, 150ms | Call to action |
| `--sqc-hover-scale` | `1.05` | How far the card grows |
| `--sqc-duration` / `--sqc-easing` | `1000ms` / `cubic-bezier(0.7, -0.325, 0.3, 1.325)` | The squish |
| `--sqc-focus-ring` | `#fff` | `:focus-visible` outline |

### The easing is the whole effect

`--sqc-easing` is not decoration. Its **negative `y1`** is what makes the card
squish: the curve leaves the start travelling the wrong way, dipping about 4%
of the travel below the resting value before heading for the target, then
overshooting it by the same amount. Set `y1` to `0` and you get an ordinary
ease with a bounce on the end — a different effect wearing this one's name.

## Layout

`width: 100%` up to `max-width: 320px`, with `min-height: 384px` and the height
growing with the content. Measured, no horizontal overflow at any of them:

| Viewport | Card |
| :--- | :--- |
| 1440 / 1280 / 1024 / 834 / 390 | 320 × 388 (capped) |
| 320 | 288 × 388 (fluid) |
| 200% zoom (720×450) | 320 × 388 |

The decorative blob is sized in `cqw` against the card, so it keeps its
proportions and its relationship to the text at any width — the disc stayed
perfectly round and held the reference's 0.6344 width ratio at every viewport,
including the shrunk 288px one.

### Give it room

The card grows 5% on hover **and raises its own `z-index`** while it does. In a
grid of these, leave a gap or they will overlap on hover. That is the
reference's behaviour, kept deliberately.

## Behaviour

### The squish

One hover runs two transitions on one shared curve: the card `1 → 1.05` and the
price `0.85 → 1`, both over 1000ms. Measured on the built component, the two
normalised curves diverged by at most **0.0001**.

Hover and `:focus-within` do the same thing, so a keyboard user gets the same
affordance. The call to action also carries a real `:focus-visible` outline
that does not depend on the squish.

`squish={false}` holds every resting value exactly as it is — no movement, same
card.

### Reduced motion

Under `prefers-reduced-motion: reduce` every transition is removed and nothing
moves: sampled across 1.5s of hover, exactly **one** state was observed.

The one thing that changes is the figure. It is shown at **full size** rather
than at its 85% resting scale, because a state nobody can now animate out of
should be the legible one. Nothing is removed and nothing stops working.

### Without JavaScript

Identical, because there is no JavaScript. The rendered preview document
contains **zero** `<script>` tags, and with script execution disabled the card,
badge, figure, period, description, call to action and blob all render.

There is nothing to tear down on `astro:before-swap` and nothing to
reinitialise on `astro:page-load`, which is why it enrols as `static`.

### Two on one page

Independent. Each instance carries its own inline tokens, so two cards can rest
at different figure scales, grow by different amounts and take different
durations side by side — measured at `0.85`/`1.05`/`1s` and `0.6`/`1.12`/`2s`.
There are no generated ids and nothing shared between instances.

## Notes on the reference

Built from measurements of hover.dev's squishy card taken from the live page in
Chrome. None of its code was read or reused; the numbers below were read off
the rendered result.

| | Reference (measured) | Here |
| :--- | :--- | :--- |
| Card | **320×384 fixed**, `flex-shrink: 0` | `100%` to a 320px cap, 384px floor |
| Radius / padding | 12px / 32px | same |
| Accent / blob / section | `#615fff` / `#262626` / `#171717` | same |
| Badge | 14px/20px w300 on white/30, pill | same |
| Figure | 60px/72px w900 mono, origin top-left | same |
| CTA | 288×44, inset 16px, radius 4px, blur(8px) | same |
| Blob | `<svg>`, circle r101.5 + ellipse 101.5×43.5 at cx160.5 | two rounded boxes in `cqw`, same pixels |
| Card hover | `scale 1 → 1.05` | same |
| Figure hover | `scale 0.85 → 1` | same |
| Dip / overshoot | **−4.22% / +4.22%** of travel | −4.26% / +4.26% |
| Crosses target | ~700ms | 703ms |
| Duration | ~955–975ms | 982–988ms |
| Mechanism | framer-motion spring, JS loop, `getAnimations()` → 0 | two CSS transitions, one shared cubic-bezier |
| Press / tap | **nothing** | nothing |
| Keyboard | no focus state on the card at all | `:focus-within` runs the same squish |
| Reduced motion | **ignored** — 58 distinct states under `reduce` | suppressed — 1 state |

### Four deliberate differences

**It fits a phone.** The reference is a rigid 320×384 with `flex-shrink: 0`;
measured at a 390px viewport it stayed exactly 320px and would overflow
anything narrower. Here it is fluid to a cap and measured 288px at a 320px
viewport with no overflow.

**It honours reduced motion.** The reference does not — that was measured, not
assumed: under `reduce` its hover still produced 58 distinct intermediate
states.

**Keyboard users get the effect.** The reference card is a `div` whose only
focusable child is the button, and focusing that button changes nothing.

**The blob is CSS, not an SVG.** Two rounded boxes sized in `cqw`, which land
on the reference's measured pixels at 320px wide and stay in proportion at any
other width. It also means the colour is one token instead of two `fill`
attributes.

### What was not reproduced

The reference's demo copy. Its lorem ipsum and its "$299/Month" framing are its
own; the defaults here are original.

Its press behaviour was checked and there is none to reproduce — with the hover
transition allowed to settle first, a pointerdown produced exactly one distinct
value. An early reading that suggested a press bounce was the hover spring
still settling, not a tap response.

===== END src/components/SquishyPricingCard.md =====

--- VERIFIED IN THE COMPONENT LIBRARY ---
Production-ready in the library.
Verified 2026-09-16 at 1440, 1280, 1024, 834, 390, 320px.
Passed: full-page context, keyboard, no javascript, reduced motion, two instances, no overflow, declarations corroborated, lifecycle.
Library source fingerprint: sha256:c7c84973d238aac13b28c330660bc9140dc0fab7504c06f67b245417a3c0ceef — MATCHES the files below.

--- NOT PROVEN ---
- ClientRouter: not applicable — this component ships no script.

--- 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.

“Squishy pricing card” from my Astro Component Library:
https://astro.baysixmedia.com/components/squishy-pricing-card/

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.