landing/CLAUDE.md

# CLAUDE.md

## Important Rules

- **Always update `CLAUDE.md` and `README.md`** when making changes that affect project structure, commands, deployment, tooling, or conventions. Keep them in sync.
- Do not include co-author lines or "Generated by" attributions in commit messages.

## Project Overview

The Lofty Project is a 501(c)(4) connecting creative talent with leftist organizing. This repo is the **pre-launch landing page** — a single-page static site with interest signup links.

**Stack:** Astro 5 (static output), TypeScript, Bun 1.3+

## Project Structure

```
src/
  layouts/Layout.astro   # HTML shell, meta tags, Typekit fonts, design tokens, CSS reset
  pages/index.astro      # All page sections (hero, pillars, signup, footer), scoped CSS, client JS
public/
  favicon.svg            # Stylized "L" mark
  hero-bg.webp/.jpg      # Hero background image (WebP + JPEG fallback)
astro.config.mjs         # Static output, site URL, dev toolbar disabled
wrangler.toml            # Cloudflare Pages deployment config
.gitea/workflows/        # CI/CD via Gitea Actions
```

Two-file architecture: `Layout.astro` (global concerns) + `index.astro` (all content). No component files — single page with no reuse opportunity.

## Development

```bash
bun run dev       # Start dev server (localhost:4321)
bun run build     # Static build to dist/
bun run preview   # Preview production build
```

## Deployment

Deploys to **Cloudflare Pages** via Gitea Actions on push to `main`.

```bash
bun run deploy    # Build + deploy to Cloudflare Pages (manual)
```

Config lives in `wrangler.toml`. CI requires `CLOUDFLARE_API_TOKEN` and `CLOUDFLARE_ACCOUNT_ID` as Gitea secrets.

## Linting & Formatting

Uses **Biome** for both linting and formatting.

```bash
bun run lint       # Check for lint + format issues
bun run lint:fix   # Auto-fix lint + format issues
bun run format     # Format all files
```

**Biome config:** 4-space indent, 100 char line width, double quotes, trailing commas, semicolons. Astro files have `noUnusedImports`/`noUnusedVariables` disabled (Biome can't parse Astro template references).

## Commit Standards

This project uses **conventional commits** enforced by commitlint + lefthook.

Format: `type(scope): subject`

**Types:** feat, fix, docs, style, refactor, perf, test, build, ci, chore, revert

**Scopes:** page, style, config, deps (custom scopes allowed)

```bash
bun run commit    # Guided commit via commitizen (cz-git)
```

## Git Hooks (Lefthook)

- **pre-commit:** Biome check on staged files
- **commit-msg:** Commitlint validation
- **pre-push:** Full build

## Design Tokens

Colors, typography, spacing, and easing are defined as CSS custom properties in `Layout.astro`:

- **Colors:** cream (#F5F0EB), dusty-rose (#C48B8B), slate-blue (#8A9BB5), navy (#1A1F2E)
- **Fonts:** `neue-haas-grotesk-display` (body, weight 500), `meno-text` (display/headings) via Typekit
- **Spacing/type:** Fluid scales using `clamp()`
- **Easing:** `--ease-out-quart` (hover), `--ease-in-out` (layout/entrance animations)

## Key Patterns

- All scroll animations use `.reveal` class + IntersectionObserver (threshold 0.1, -40px root margin)
- Hero animations: line-by-line blur-in reveal with staggered delays, quartic ease-out
- Hover interactions use `--ease-out-quart`, layout/entrance animations use `--ease-in-out`
- `prefers-reduced-motion` is detected via inline script and disables all animations via `.reduce-motion` class
- Hero background image uses blur + desaturation + cream overlay for glassmorphic effect