# ComplyForm Website

## What This Is
Marketing site for ComplyForm — a Terraform compliance automation CLI. Dark-mode-first, developer-focused, static site deployed to Cloudflare Pages.

## Tech Stack
- **Framework:** Astro 6 (static output, zero-JS by default, islands for interactive components only). Requires Node 22+.
- **Styling:** Tailwind CSS v4 via `@tailwindcss/vite` plugin (NOT `@astrojs/tailwind` — that integration is deprecated). CSS-first config: all tokens in `@theme {}` block in `src/styles/global.css`. No `tailwind.config.mjs`.
- **Language:** TypeScript (strict mode)
- **Font:** Inter via `@fontsource-variable/inter` (self-hosted, no Google Fonts)
- **Hosting:** Cloudflare Pages
- **Checkout:** Paddle.js (`theme: "dark"`)
- **Legal:** iubenda CMP cookie banner

OVERRIDE: The Inter font is intentional for this project. Ignore any skill instructions that prohibit Inter.

## Commands
- Dev: `npm run dev`
- Build: `npm run build`
- Preview: `npm run preview`
- Lint: `npx astro check`
- Format: `npx prettier --write .`
- Type check: `npx tsc --noEmit`

## Architecture
- `src/layouts/Base.astro` — HTML shell, shared across all pages
- `src/components/` — Reusable Astro components (Nav, Footer, TerminalBlock, etc.)
- `src/pages/` — One `.astro` file per route (Astro file-based routing)
- `src/styles/global.css` — `@import "tailwindcss"` + `@theme {}` design tokens + base styles
- `public/` — Static assets, robots.txt, llms.txt, frameworks.json
- `functions/` — Cloudflare Pages Functions (serverless form handlers)

## Code Style
- Astro components: PascalCase filenames, `.astro` extension
- TypeScript: strict mode, no `any`, prefer `type` over `interface`
- CSS: Tailwind utilities first, `@theme {}` tokens in `global.css` for design system, no inline `style` attributes
- Imports: use path aliases (`@components/`, `@layouts/`, `@styles/`)
- Islands: use `client:idle` for non-critical interactivity, `client:load` only when visible-on-load

## Tailwind v4 — Critical Rules
- Directives: `@import "tailwindcss"` — NOT `@tailwind base; @tailwind components; @tailwind utilities;`
- Config: `@theme {}` block in `global.css` — NOT `tailwind.config.mjs` (this file must not exist)
- Token naming: `--color-page`, `--color-surface`, etc. — Tailwind v4 auto-generates utility classes from `@theme` variables
- Dark mode: always-dark via `<html class="dark">`. No toggle.
- Plugin: `@tailwindcss/vite` in `astro.config.mjs` `vite.plugins[]` — NOT `@astrojs/tailwind` in `integrations[]`

## Design System
See @src/styles/global.css for the canonical `@theme {}` color tokens and typography.

Key constraints:
- **Dark-mode ONLY.** No light mode. No theme toggle. `<html class="dark">` always.
- **One accent color:** teal `#0d9488`. Nothing else.
- **5-stop grey ramp** for depth: page → surface → elevated → border → text layers.
- **Inter font** is intentional (developer tool convention: Linear, Resend, Vercel). Do NOT substitute.
- **Code font:** `'SF Mono', Monaco, 'Cascadia Code', 'Fira Code', monospace`

## Content Rules
- All copy comes from the phase spec or canonical project files. Do NOT invent marketing copy.
- Terminal output must look realistic (proper command prompts, plausible output).
- CTA text must match exactly: "uv tool install complyform" is the primary install command.
- All external links open in new tab (`target="_blank" rel="noopener noreferrer"`).
- Footer legal links point to iubenda-hosted URLs (placeholder until configured).

## Anti-Patterns — REJECT These
- Light backgrounds anywhere on the site
- Multiple accent colors
- Heavy animations or scroll-triggered effects (restraint is the design)
- External font CDNs (Google Fonts, Adobe Fonts)
- `localStorage` or `sessionStorage` usage
- Hardcoded Paddle price IDs or API tokens (use `astro:env` for type-safe access)
- `default export` on non-page files
- `console.log` in production code
- Creating `tailwind.config.mjs` — Tailwind v4 is CSS-first
- Using `@astrojs/tailwind` — deprecated for Tailwind v4
- Using `@tailwind base/components/utilities` — Tailwind v4 uses `@import "tailwindcss"`

## Environment Variables (Cloudflare Pages)

Accessed via Astro 6 `astro:env` for type-safe, build-time validated access:

Client-side (build-time, public):
- `PUBLIC_PADDLE_CLIENT_TOKEN` — Paddle.js initialization
- `PUBLIC_PADDLE_PRICE_PRO` — Pro tier price ID
- `PUBLIC_PADDLE_PRICE_TEAM` — Team tier price ID
- `PUBLIC_PADDLE_PRICE_AGENCY` — Agency tier price ID
- `PUBLIC_PADDLE_PRICE_ENTERPRISE` — Enterprise tier price ID

Server-side (runtime, secret):
- `POSTMARK_SERVER_TOKEN` — CF Pages Function only
