# Agency v7: Prisma cinematic studio
Dark, moody, cinematic landing page for a creative studio called "Prisma". Warm cream color palette on black. Three sections: Hero, About, and Features.
## Fonts
- **Almarai** (300, 400, 700, 800) — global default font via `font-body`
- **Instrument Serif** (italic only) — italic accent text in the About section via `font-heading`
In `design.ts`, `body: "almarai"` and `heading: "instrumentSerif"`. Most text uses Almarai; the About heading uses `font-heading italic` for the Instrument Serif accent.
## Color system
| Token | Hex | Usage |
| ------------------- | --------- | ------------------------------------------ |
| background | `#000000` | Global black background |
| foreground | `#DEDBC8` | Primary cream text |
| primary | `#DEDBC8` | Warm cream for accents, buttons |
| primary-foreground | `#000000` | Text on cream backgrounds |
| card | `#101010` | About section inner card |
| card-foreground | `#DEDBC8` | Text on cards |
| muted | `#212121` | Feature card backgrounds |
| muted-foreground | `#9CA3AF` | Gray supporting text |
| border | `#333333` | Subtle borders |
Inline color `#E1E0CC` is used for hero text and nav hover states (slightly different from Tailwind primary `#DEDBC8`). Navbar link default: `rgba(225, 224, 204, 0.8)`.
## Custom CSS (theme.css)
Two SVG noise texture utilities:
- `.noise-overlay` — fractal noise (baseFrequency: 0.85, numOctaves: 3) overlaid on the hero video with `mix-blend-overlay` and `opacity: 0.7`
- `.bg-noise` — fractal noise (baseFrequency: 0.9, numOctaves: 4) subtle background in the Features section at `opacity: 0.15`
## Section 1: Hero
Full viewport height (`h-screen`) with `p-4 md:p-6` padding creating an inset effect. Inner container has `rounded-2xl md:rounded-[2rem]` and `overflow-hidden`.
- **Background video**: autoPlay loop muted playsInline, object-cover
- **Noise overlay**: `.noise-overlay` with opacity 0.7 and mix-blend-overlay
- **Gradient overlay**: `bg-gradient-to-b from-black/30 via-transparent to-black/60`
- **Navbar**: black pill hanging from top center (`bg-black rounded-b-2xl`), 5 nav items
- **Hero content**: 12-column grid at bottom. Left 8 cols: giant "Prisma" heading with WordsPullUp (responsive from 26vw to 19vw, tracking-[-0.07em], superscript asterisk). Right 4 cols: description paragraph + CTA button with ArrowRight in a black circle
## Section 2: About
- **Card**: `bg-[#101010]` centered, max-w-6xl, rounded
- **Label**: "Visual arts" in primary color, uppercase tracking-widest
- **Heading**: WordsPullUpMultiStyle with 3 segments — normal Almarai, italic Instrument Serif, normal Almarai
- **Body**: Scroll-linked character opacity animation. Each character wrapped in AnimatedLetter, opacity transitions from 0.2 to 1 based on scroll position using `useScroll` + `useTransform`
## Section 3: Features
- **Background**: `min-h-screen bg-black` with `.bg-noise` overlay at 15% opacity
- **Header**: WordsPullUpMultiStyle — cream line + gray-500 line
- **Grid**: 4 columns (1-col mobile, 2-col md, 4-col lg), `lg:h-[480px]`
- **Card 1**: Video card with gradient overlay and bottom text
- **Cards 2-4**: `bg-[#212121]`, icon + title with number, checklist with green Check icons, "Learn more" link with rotated ArrowRight
- **Card animations**: staggered scale + fade entrance via useInView
## Animations (motion/react)
- **WordsPullUp**: splits text by spaces, each word slides up from y:20 with 0.08s stagger
- **WordsPullUpMultiStyle**: array of `{text, className}` segments, same pull-up with per-word className
- **AnimatedLetter**: scroll-linked opacity per character using `useScroll` + `useTransform`
- **Feature cards**: scale from 0.95 + fade, staggered at 0.15s intervals
- **Hero elements**: fade up from y:20 with staggered delays (0.5s, 0.7s)
## Responsive breakpoints
Hero text: 26vw → 24vw → 22vw → 20vw → 19vw → 20vw (sm/md/lg/xl/2xl). Feature cards: 1-col → 2-col (md) → 4-col (lg). Navbar compresses gaps on mobile. All padding and font sizes use Tailwind responsive prefixes.
## Do's and don'ts
- **Do** use inline styles for the hero text color `#E1E0CC` (distinct from the design system primary)
- **Do** keep the noise overlays as CSS utilities in theme.css
- **Don't** use `text-primary/70` opacity modifiers (colors are raw hex, use inline styles for opacity)
- **Don't** add tracking-tight to any headings
- **Don't** use font-light anywhere