Basalt Studio

# Basalt — Digital Agency Site

## Goal
Build a production-ready digital agency site called "Basalt". Overall vibe: assured and editorial — a studio that lets the work speak, zero decorative noise. It should look hand-crafted by a senior product designer — not like a generic template.

## Design System
- **Palette**: graphite #101113 base, paper #ECECEA text, no accent color — emphasis via inverted blocks (paper bg, graphite text) on alternating sections
- **Typography**: grotesque display (e.g. Space Grotesk) at 80-140px for statements, Inter for body; nav and labels 12px caps with 0.12em tracking
- **Grid & spacing**: 12-col grid, 8px base unit. Desktop sections 112-128px vertical padding, mobile 56-64px.
- **Corners & borders**: cards 16px radius, buttons 10px, inputs 10px. 1px borders at 8-12% white (dark) or 8% black (light).
- **Shadows**: layered, soft (0 1px 2px + 0 8px 24px), never harsh.

## Page Structure
1. **Navbar** — wordmark left, only two links right: 'Work' and 'Contact'; a thin progress bar under the nav tracks page scroll.
2. **Hero** — full-viewport statement: 'We build brands that outlive trends.' set across three staggered lines; below, a single-line ticker of client names scrolling slowly.
3. **Work reel** — horizontally scrolling strip of 5 case cards pinned while vertical scroll drives the x-translation (GSAP ScrollTrigger); each card: full-bleed image, project name, year.
4. **Case spotlight** — one featured case: full-width image that scales from 0.9→1 as it enters, then metrics row (uplift %, timeline, scope) in an inverted paper block.
5. **Services** — 4 numbered rows (01 Strategy / 02 Identity / 03 Digital / 04 Motion), each row expands on hover to reveal a one-line description and pushes siblings apart slightly.
6. **Manifesto** — short 3-paragraph text block, max-w-prose, with key phrases underlined by an animated hand-drawn stroke on reveal.
7. **Footer** — giant 'Say hello' mailto link that fills the viewport width, socials and legal in a tiny bottom row.

## Motion
- Hero lines reveal with a masked translate-y (each line clips inside an overflow-hidden wrapper), 90ms stagger.
- Work reel: vertical scroll maps to horizontal translate over a pinned 300vh section; cards parallax internally at 0.9 speed.
- Service rows expand height with a spring; the row number counter-rotates 3° for a tactile feel.
- All entrances use IntersectionObserver-triggered reveals; never animate on every scroll tick.
- Respect `prefers-reduced-motion`: disable transforms, keep opacity fades under 150ms.

## Details That Matter
- Custom cursor: small dot that grows into a 'View' pill over work cards — hidden on touch devices.
- Page transitions: content fades up 12px while the progress bar resets — keep under 350ms.

## Tech & Quality Bar
- Next.js App Router + TypeScript + Tailwind CSS. No UI kit — style from scratch.
- Fully responsive at 375 / 768 / 1024 / 1440px. Mobile nav becomes a full-screen overlay with staggered link reveal.
- Semantic landmarks (header/main/section/footer), WCAG AA contrast, focus-visible rings on all interactive elements.
- Optimize LCP: hero media preloaded, fonts `display: swap`, zero layout shift.