feat(website): porcelain redesign, Rivet Compute calculator, and marketing polish (#5257)

Collapses the former stacked PRs (#5219 seo-content-plays, #5228 cookbook-classical-covers, #5229 compare-page-premium, #5230 marketing-heading-weights) into a single PR off `main`, rebased onto the latest trunk. `#5230` was already merged down into `compare-page-premium`; this brings the full body of work straight to `main`.

## What's included
- **Porcelain redesign** — light cool-porcelain theme across marketing pages and docs (header light theme, docs subnav/tabs, prose, selection states), warm-black `ink` text, classical oil-paint imagery.
- **Rivet Compute pricing + calculator** — the `/cloud` pricing page integrates the compute calculator (vCPU / memory / active-hours sliders, live estimate on an ink data-plate), restyled to the porcelain system.
- **Compare page redesign**, **classical-art cookbook covers**, and **SEO content** from the lower stack.
- **Actors hero** — lag-free scroll dissolve (static gradient + opacity animation, no per-frame blur/mask).
- **Mobile polish** — CTA painting fills with full-width contained buttons; mobile menu + docs section headers no longer render white-on-light.

## Merge notes
- Branched off latest `main`; the only content conflict was `PricingPageClient.tsx` (main's standalone calculator vs the redesigned page that already integrated it) — resolved to the redesigned version.
- `main`'s own website changes (e.g. `environment-variables.mdx`) are preserved.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Author: NicholasKissel

pnpm-lock.yaml

@@ -239,6 +239,8 @@ impl From<WasmActorConfig> for ActorConfigInput {
 					.map(|action| rivetkit_core::ActionDefinition { name: action.name })
 					.collect()
 			}),
+			// The wasm runtime does not expose custom inspector tabs yet.
+			inspector_tabs: None,
 		}
 	}
 }

rivetkit-typescript/packages/rivetkit-wasm/src/lib.rs

@@ -61,3 +61,19 @@ Import from `@rivet-gg/icons`. The full Font Awesome Pro library is available. C
 - Do not split related multi-file examples into separate non-workspace code blocks.
 
 - If any code block fails type checking, the build fails.
+
+## Typography
+
+- Marketing headings and card titles use `font-medium` (h1 heroes, section h2s, h3/h4 card titles, FAQ headings, price figures). Do not introduce `font-normal` headings.
+- `font-normal` remains correct only for deliberate de-emphasis: table `th` de-bolding, quiet `dt` labels, and input-like UI (TypesenseSearch).
+- Hero h1s and section h2s use the class constants in `src/components/marketing/typography.tsx` (`tracking-[-0.015em]`, h1 `leading-[1.06]`). Do not hand-write `tracking-tight` on headings at `text-2xl` or larger; `tracking-tight` stays acceptable on `text-base` and smaller card titles.
+- Manrope is the only marketing typeface; JetBrains Mono covers code, eyebrows, and captions. No serif headings on marketing pages; the Learn section's serif treatment is the only exception.
+- Section labels use the eyebrow convention (`EYEBROW_CLASS` or `editorial/Eyebrow`): mono, uppercase, `tracking-[0.18em]`, pine on porcelain, sage inside ink panels. Plate and panel captions use `CAPTION_CLASS` (`Fig. NN — ...`).
+
+## Theme
+
+- Marketing pages and docs are light: cool porcelain (`paper`, `#EFEFEF`) with a `paper-deep` radial pooling bottom-left (`.depth-wash`) and a fine grain (`.paper-grain`). Warmth comes from warm-black `ink` text, classical imagery, and oil-paint textures, never from synthetic color gradients. Do not use the cream `mat` token as a surface/background design element on light surfaces (panels, dropdowns, badges, plate frames); use `paper`/`paper-mid`/`white` or `ink`-tint neutrals instead. `cream` stays valid only as the off-white text/fill inside dark `ink` panels. Docs paint the same porcelain field, render prose via `Prose surface="paper"`, and use `pine` for the active sidebar/TOC selected state; only the Learn section keeps a dark shell, and no other page may introduce a dark base.
+- Dark `ink` panels (`editorial/InkPanel`) are reserved for code, terminal, screenshot, and data moments. Code and data plates stay flat ink; the oil-texture backdrop (`textureSrc`) is for editorial moments only (CTA colophon, 404).
+- Orange is the spark: at most one `accent`/ember CTA per page. White text sits only on `accent-deep` (`#D63E00`) or `ink` fills, never on `accent`. Pine (`#2E4034`) is the structural color for links, eyebrows, diagrams, and selected states; sage (`#93A286`) replaces it inside ink panels.
+- No drop shadows on marketing cards or imagery; depth comes from `border-ink/10..25` hairlines, `bg-white/55` card fills, and `paper-mid`/`paper-deep` layering (inside ink panels: `border-cream/10..15`). Shadows stay acceptable on functional overlays (dropdowns, tooltips, modals) and the header's glass inset highlight.
+- `ink-faint` text is for captions and metadata at 12px+; body copy uses `ink-soft` or `ink`.

website/CLAUDE.md

@@ -17,6 +17,10 @@ export default defineConfig({
 	site: 'https://rivet.dev',
 	output: 'static',
 	trailingSlash: 'ignore',
+	image: {
+		// Allow build-time optimization of artwork hosted on the assets CDN.
+		domains: ['assets.rivet.dev'],
+	},
 	// SEO Redirects - Astro generates HTML redirect files for static builds and
 	// serves them on the dev server. The same map drives real HTTP 301s at the
 	// Caddy layer in production (see scripts/generate-caddy-redirects.mjs), so it

website/astro.config.mjs

@@ -36,6 +36,7 @@ export const redirects = {
 	// Self-hosting redirect
 	'/docs/general/self-hosting': '/docs/self-hosting/',
 	// Removed solution pages
+	'/agent': '/actors/',
 	'/solutions/agents': '/',
 	'/solutions/app-generators': '/',
 	'/solutions/collaborative-state': '/',