# Gradients

Gradients create continuous atmosphere across the page. They must feel like one canvas—not disconnected colorful patches.

Canonical utilities live in `app/globals.css` `@layer utilities`.

## Allowed utilities

| Class | Role |
| --- | --- |
| `bg-section-canvas` | Default section continuity (very soft primary tint) |
| `bg-section-muted` | Alternate muted band |
| `bg-gradient-hero` | Hero radial + vertical wash |
| `bg-gradient-featured` | Featured band (corner radials + wash) |
| `bg-gradient-cta` | Strong 135° brand CTA panel (`brand-primary-dark` → `brand-primary`) |
| `bg-glow-primary` | Soft radial glow using `--brand-glow` |
| `shadow-glow-sm` | Neon rim for primary buttons / resting cards |
| `shadow-glow-primary` | Mid neon for card hover / button hover |
| `shadow-glow-lg` | Stronger neon (dark hover / media hover) |
| `shadow-glow-media` | Neon + depth for image frames |
| `media-frame` | Shared image wrapper: surface border + media neon |

## Opacity limits

| Effect | Light | Dark |
| --- | --- | --- |
| Section tint washes | ~3–6% primary mixed into background | ~4–6% |
| Hero radial glow | ~0.12 alpha | ~0.10 alpha |
| Featured radials | ~0.08–0.10 | ~0.08 + dark brand mix |
| Footer top wash | ~0.03–0.04 | ~0.03 |
| Brand glow token | `0.12` | `0.10` |

If a glow is obvious as a “blob,” it is too strong.

## Layer ordering

Inside a section:

1. Section background utility (`bg-section-*` / gradient).
2. `.section-decor` absolute layer (glows, grids).
3. `.section-content` real UI.

Never place glows above content (`z-index`) or with pointer events.

## Glow usage

- Spotlights behind headings or cards: `bg-glow-primary` on a blurred circle in `.section-decor`.
- Interactive emphasis: `shadow-glow-sm` → `shadow-glow-primary` / `shadow-glow-lg` on buttons and cards.
- Image frames: prefer `media-frame` (or `shadow-glow-media`) over plain `shadow-surface-*`.
- Timeline active nodes may use highlight mixes—keep confined to that component.

## CTA panels

Use `bg-gradient-cta` for conversion bands. Pair with `Button surface="brand"` for correct contrast.

## Forbidden

- One-off `bg-gradient-to-r from-purple-500 to-pink-500` (or any non-brand palette).
- Hard rectangular gradient blocks that do not blend into neighbors.
- Multiple competing radials in one small card.
- Fixed-position gradient overlays spanning the whole site.

## Related

- [sections.md](./sections.md)
- [glassmorphism.md](./glassmorphism.md)
- [dark-mode.md](./dark-mode.md)