ar.badieiandCursor
c2376b3b9e
Build & Push Docker Image / build (push) Has been cancelled
Refresh the homepage around new hero/services/roadmap sections, shared design tokens, and updated brand assets. Co-authored-by: Cursor <cursoragent@cursor.com>
68 lines
2.5 KiB
Markdown
68 lines
2.5 KiB
Markdown
# 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)
|