Parallax Editorial

STYLEKIT_STYLE_REFERENCE
style_name: Parallax Editorial
style_slug: parallax-editorial
style_source: /styles/parallax-editorial

# Hard Prompt

## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.

## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.

Strictly follow the style rules below and maintain consistency. No style drift allowed.

## Requirements

- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.

## Style Rules

# Parallax Editorial Design System

You are an expert frontend developer specializing in parallax editorial layout. Generate all code strictly following these specifications.

## Style Identity
- **Name**: Parallax Editorial
- **Essence**: Scrolling is turning pages; depth is the layout's fourth dimension
- **Mood**: Printed, considered, literary, cinematic long-form
- **Inspiration**: Magazine spreads, longform scrollytelling features, printed editorial typography

---

## Forbidden

| Pattern | Reason |
|---------|--------|
| Mutating top/margin/height in a scroll handler | Layout thrash; parallax is transform: translate3d only |
| More than 3 parallax rate tiers per viewport | Muddy depth |
| Parallax overpowering readability | Body copy is never the parallax subject; measure stays under 75ch |
| Heavy parallax on mobile | Performance and motion sickness — weaken or disable |
| Multiple accents / brick-red surfaces | One accent; brick is a signal, not a fill |
| Cold or pure-white backgrounds | Kills the warm paper feel |
| Missing prefers-reduced-motion fallback | Accessibility is non-negotiable |

## Required

### Paper and Ink
- Background #F5F0E6 (warm paper), deep paper #EBE3D3
- Body #1A1712 (near-black ink), secondary rgba(26,23,18,0.7)
- The one accent #B3401F (brick red): drop caps, chapter numbers, pull quotes, links
- Sand #C9BBA0 for dividers / secondary decoration

### Type
Serif display face for headings (Fraunces or Playfair Display recommended):
```html
<link rel="stylesheet" href="https://fonts.loli.net/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..600&display=swap" />
```
Headings font-family: "Fraunces", Georgia, serif; body same-family or a humanist sans.
(fonts.googleapis.com works too; loli.net mirrors it for CN access.)

### Parallax Engine (signature, rAF-throttled)
Tag each layer with data-parallax="rate" (0.1-0.5); one shared rAF loop updates them:
```js
let ticking = false;
function onScroll() {
  if (ticking) return; ticking = true;
  requestAnimationFrame(() => {
    const y = window.scrollY;
    document.querySelectorAll("[data-parallax]").forEach((el) => {
      const rate = parseFloat(el.dataset.parallax);
      el.style.setProperty("--pe-y", `${-y * rate}px`);
    });
    ticking = false;
  });
}
window.addEventListener("scroll", onScroll, { passive: true });
```
```css
[data-parallax] { transform: translate3d(0, var(--pe-y, 0), 0); will-change: transform; }
```
Background layers small rate (0.1-0.2), foreground large (0.35-0.5).

### Sticky Interlock
Two-column grid; the image column is position: sticky; top: 0; height: 100vh while the text column flows normally — a pin-and-scroll mesh.

### Editorial Typography Grammar
- Chapters: large serif numerals (text-4xl+) with a thin top rule (border-t)
- Drop caps: .pe-dropcap with ::first-letter float, scaled 3-4 lines, brick red
- Measure: body max-width 65-75ch, line-height 1.6-1.75
- Pull quotes: large italic serif with a left brick rule

### GSAP Recipe (preferred when gsap is available)
```js
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
gsap.utils.toArray("[data-parallax]").forEach((el) => {
  gsap.to(el, {
    yPercent: () => -30 * parseFloat(el.dataset.parallax) * 5,
    ease: "none",
    scrollTrigger: { trigger: el, start: "top bottom", end: "bottom top", scrub: true },
  });
});
```

### Reduced Motion
```css
@media (prefers-reduced-motion: reduce) { [data-parallax] { transform: none !important; } }
```
All layers drop to zero rate difference; the layout becomes static and reading order is unchanged.

## Self-Verification Checklist

- [ ] Warm paper base, ink body, single brick-red accent
- [ ] Parallax is transform: translate3d + rAF-throttled only
- [ ] No more than 3 rate tiers per viewport
- [ ] Body measure 65-75ch with serif headings / chapter numbers / drop caps
- [ ] Sticky image-text interlock present
- [ ] prefers-reduced-motion zero-rate fallback
- [ ] Parallax weakened or disabled on mobile

---

# Parallax Editorial Design System

> Editorial layout with physical depth. On warm paper, foreground text and background layers scroll at different rates to build real parallax; sticky image-text interlock, chapter numbers and drop caps turn long-form into a paced turn of the page.

## Design Philosophy

The parallax-editorial creed: scrolling is turning pages, and depth is the fourth dimension of the layout. When foreground and background move at different rates, a flat page finally gains the thickness of paper — the reader doesn't swipe across a screen, they move through a stack of spreads sliding out of register.

Core principles:
- Depth is hierarchy: background slow, foreground fast. The rate difference itself reads as importance — near things lead, far things lag
- Typography before parallax: parallax is the stage, not the star. The type must stand on its own first — serif display headings, a comfortable measure (65-75 characters), clear chapter structure
- Sticky interlock: an image pins while text scrolls over it, or the reverse — image and text meshing like a magazine spread
- Editorial signals: chapter numbers, drop caps, hanging punctuation, column rules — these are magazine grammar, not decoration
- Restrained accent: brick red #B3401F only for drop caps, chapter numbers, pull quotes and links; body copy stays near-black ink
- Rhythm and rest: generous whitespace is the breath. Parallax passages must alternate with quiet text-only passages or the eye tires

Design principles:
- Performance line: parallax uses transform: translate3d (compositor layer) only, rAF-throttled, never mutating top/margin in a scroll handler
- Accessibility line: under prefers-reduced-motion all layers drop to zero rate difference and become a normal static layout; reading order never changes
- Depth discipline: at most three parallax rate tiers per viewport, more turns muddy
- Responsive: on mobile, weaken or disable parallax (performance + motion sickness) while keeping the typography and sticky structure

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border
Color: border-[#1A1712]/20
Radius: rounded-none
```

### Shadow
```
sm: shadow-none
md: shadow-none
lg: shadow-[0_24px_60px_rgba(26,23,18,0.12)]
hover: hover:shadow-[0_30px_70px_rgba(26,23,18,0.16)]
focus: focus:shadow-none
```

### Interaction
```
Hover translate: (none)
Hover scale: (none)
Hover opacity: hover:text-[#B3401F]
Transition: transition-colors duration-300 ease-out
Active: active:opacity-80
```

### Typefaces
```
Heading: font-serif text-[#1A1712]
Body: text-[#1A1712]/75 leading-relaxed
Mono: font-mono text-[#1A1712]/55
```

### Type scale
```
Hero: text-6xl md:text-8xl
H1: text-4xl md:text-6xl
H2: text-3xl md:text-4xl
H3: text-2xl md:text-3xl
Body: text-base md:text-lg
Small: text-sm
```

### Spacing
```
Section: py-20 md:py-32
Container: px-6 md:px-8
Card: pt-5
Gap sm: gap-4
Gap md: gap-8
Gap lg: gap-12
```

### Color roles
```
Background primary: bg-[#F5F0E6]
Background secondary: bg-[#EBE3D3]
Background accent: bg-[#1A1712]
Text primary: text-[#1A1712]
Text secondary: text-[#1A1712]/75
Text muted: text-[#1A1712]/50
Button primary: bg-[#1A1712] text-[#F5F0E6]
Button secondary: bg-transparent text-[#1A1712] border-b border-[#1A1712]/30
```

---

## [FORBIDDEN]

These classes are banned in this style. Check for them before returning code:

### Banned classes
- `rounded-lg`
- `rounded-xl`
- `rounded-2xl`
- `rounded-full`
- `bg-white`
- `bg-black`
- `bg-slate-900`
- `bg-gray-900`
- `bg-gradient-to-r`
- `from-indigo-600`
- `via-purple-600`
- `to-pink-500`
- `font-sans`

### Banned patterns
- matches `^rounded-(lg|xl|2xl|3xl|full)$`
- matches `^bg-(white|black)$`
- matches `^bg-gradient-`
- matches `^bg-(slate|gray|zinc|blue|indigo)-(800|900)$`

### Why they are banned
- `rounded-full`: Editorial layout uses sharp printed edges, not pills
- `bg-white`: Use warm paper #F5F0E6, never sterile pure white
- `bg-black`: Use warm ink #1A1712 on paper, not flat black surfaces
- `bg-gradient-to-r`: Depth comes from parallax layers, not gradients
- `from-indigo-600`: No AI-cliche gradients; warm paper, ink and one brick-red accent
- `font-sans`: Headings and structure lean on a serif display face

> WARNING: if your code contains any of the above, replace it before shipping.

---

## [REQUIRED]

### Every button must include
```
font-serif
transition-colors duration-300
hover:text-[#B3401F]
```

### Every card must include
```
border-t border-[#1A1712]/20
rounded-none
pt-5
```

### Every input must include
```
bg-transparent
border-b border-[#1A1712]/25
rounded-none
text-[#1A1712] placeholder-[#1A1712]/30
focus:outline-none focus:border-[#B3401F]
transition-colors duration-300
```

---

## [COMPARE] Parallax Editorial wrong vs right

The wrong examples below stand for generic library defaults that were never adapted to this style. Do not read them as visual suggestions.

### Button

[WRONG] **Wrong** (generic component library default, do not copy):
```html
<button class="{GENERIC_LIBRARY_BUTTON_DEFAULT}">
 Click me
</button>
```

[CORRECT] **Right** (uses this style's tokens):
```html
<button class="font-serif transition-colors duration-300 hover:text-[#B3401F] bg-[#1A1712] text-[#F5F0E6]">
 Click me
</button>
```

### Card

[WRONG] **Wrong** (generic card, not adapted to this style):
```html
<div class="{GENERIC_LIBRARY_CARD_DEFAULT}">
 <h3>{TITLE}</h3>
</div>
```

[CORRECT] **Right** (uses this style's card tokens):
```html
<div class="border-t border-[#1A1712]/20 rounded-none pt-5 pt-5">
 <h3 class="font-serif text-[#1A1712] text-2xl md:text-3xl">{TITLE}</h3>
</div>
```

### Input

[WRONG] **Wrong** (generic input, not adapted to this style):
```html
<input class="{GENERIC_LIBRARY_INPUT_DEFAULT}" />
```

[CORRECT] **Right** (uses this style's input tokens):
```html
<input class="bg-transparent border-b border-[#1A1712]/25 rounded-none text-[#1A1712] placeholder-[#1A1712]/30 focus:outline-none focus:border-[#B3401F] transition-colors duration-300" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Parallax Editorial page skeletons

These skeletons use this style's tokens only. Replace `{PLACEHOLDER}` values, but keep every token in place:

### Navigation
```html
<nav class="bg-[#F5F0E6] text-[#1A1712] border border-[#1A1712]/20 px-6 md:px-8">
 <div class="flex items-center justify-between max-w-6xl mx-auto gap-8">
 <a href="/" class="font-serif text-[#1A1712] text-2xl md:text-3xl">
 {LOGO_TEXT}
 </a>
 <div class="flex gap-8 text-[#1A1712]/75 leading-relaxed text-sm">
 {NAV_LINKS}
 </div>
 </div>
</nav>
```

### Hero section
```html
<section class="bg-[#1A1712] text-[#1A1712] py-20 md:py-32 px-6 md:px-8">
 <div class="max-w-4xl mx-auto">
 <h1 class="font-serif text-[#1A1712] text-6xl md:text-8xl">
 {HEADLINE}
 </h1>
 <p class="text-[#1A1712]/75 leading-relaxed text-base md:text-lg max-w-xl">
 {SUBHEADLINE}
 </p>
 <button class="font-serif transition-colors duration-300 hover:text-[#B3401F] bg-[#1A1712] text-[#F5F0E6]">
 {CTA_TEXT}
 </button>
 </div>
</section>
```

### Card grid
```html
<section class="bg-[#F5F0E6] text-[#1A1712] py-20 md:py-32 px-6 md:px-8">
 <div class="max-w-6xl mx-auto">
 <h2 class="font-serif text-[#1A1712] text-3xl md:text-4xl">{SECTION_TITLE}</h2>
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
 <!-- Card template - repeat for each card -->
 <div class="border-t border-[#1A1712]/20 rounded-none pt-5 pt-5">
 <h3 class="font-serif text-[#1A1712] text-2xl md:text-3xl">{CARD_TITLE}</h3>
 <p class="text-[#1A1712]/75 leading-relaxed text-base md:text-lg text-[#1A1712]/50">{CARD_DESCRIPTION}</p>
 </div>
 </div>
 </div>
</section>
```

### Form input
```html
<input class="bg-transparent border-b border-[#1A1712]/25 rounded-none text-[#1A1712] placeholder-[#1A1712]/30 focus:outline-none focus:border-[#B3401F] transition-colors duration-300" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-[#EBE3D3] text-[#1A1712]/75 py-20 md:py-32 px-6 md:px-8">
 <div class="max-w-6xl mx-auto">
 <div class="grid grid-cols-1 md:grid-cols-3 gap-12">
 <div>
 <span class="font-serif text-[#1A1712] text-2xl md:text-3xl">{LOGO_TEXT}</span>
 <p class="text-[#1A1712]/75 leading-relaxed text-sm">{TAGLINE}</p>
 </div>
 <div>
 <h4 class="font-serif text-[#1A1712] text-2xl md:text-3xl">{COLUMN_TITLE}</h4>
 <ul class="text-[#1A1712]/75 leading-relaxed text-sm">
 {FOOTER_LINKS}
 </ul>
 </div>
 </div>
 </div>
</footer>
```

---

## [CHECKLIST] Parallax Editorial post-generation self check

**Before returning code, verify every token and rule below. Fix any violation before delivering:**

### Token check
- [ ] Button includes: `font-serif transition-colors duration-300 hover:text-[#B3401F]`
- [ ] Card includes: `border-t border-[#1A1712]/20 rounded-none pt-5`
- [ ] Input includes: `bg-transparent border-b border-[#1A1712]/25 rounded-none text-[#1A1712] placeholder-[#1A1712]/30 focus:outline-none focus:border-[#B3401F] transition-colors duration-300`

### Forbidden check
- [ ] Not using `rounded-lg`
- [ ] Not using `rounded-xl`
- [ ] Not using `rounded-2xl`
- [ ] Not using `rounded-full`
- [ ] Not using `bg-white`
- [ ] Not using `bg-black`
- [ ] Not using `bg-slate-900`
- [ ] Not using `bg-gray-900`

### Style rule check
- [ ] Warm paper base #F5F0E6 with near-black ink body #1A1712 for a printed feel
- [ ] Serif display face for headlines (e.g. Fraunces / Playfair), sans or same-family for body
- [ ] Parallax layers via transform: translate3d(0, scrollProgress * rate, 0) — small rate for background, larger for foreground
- [ ] Sticky image-text interlock: position: sticky pins the image layer while text scrolls in the adjacent column
- [ ] Number chapters with large serif figures and a thin top rule to build magazine structure

### Style drift check
- [ ] Does not violate: Never mutate top/margin/height in a scroll handler (layout thrash) — parallax is transform-only
- [ ] Does not violate: Never exceed three parallax rate tiers per viewport (muddy depth)
- [ ] Does not violate: Never let parallax overpower reading: body copy is never the parallax subject, measure stays under 75 chars
- [ ] Does not violate: Never keep heavy parallax on mobile (perf + motion sickness) — weaken or disable it
- [ ] Does not violate: Never use multiple accents or flood brick red as a surface color

### Delivery check
- [ ] Responsive layout holds on phone, tablet and desktop with no horizontal overflow
- [ ] Every interactive element has a visible focus state, an accessible name and a reduced-motion path
- [ ] Text contrast meets WCAG AA and colour alone never carries state
- [ ] The result is still recognizable at a glance as Parallax Editorial

---

## [EXAMPLES] Example prompts

### 1. 

```
Create a parallax editorial longform feature page with:
1. Warm paper #F5F0E6, ink #1A1712 body, single brick-red #B3401F accent
2. Load Fraunces serif from fonts.loli.net for headings and pull quotes
3. Hero: three parallax layers via transform translate3d — a giant faint background year (rate 0.15), a brick vertical rule (rate 0.4), and static foreground title
4. Chapters numbered with large serif figures and a thin top rule; first paragraph of each uses a brick drop cap
5. One sticky interlock section: an image column pinned while the text column scrolls beside it
6. Body measure capped at 68ch, line-height 1.7
7. Single rAF scroll loop drives all [data-parallax] layers; prefers-reduced-motion sets transform:none and parallax weakens on mobile
```

### 2. 

```
Create a parallax editorial brand story landing page with:
1. Paper #F5F0E6 stage, ink type, brick #B3401F for chapter numbers and links only
2. Fraunces serif headings; humanist sans body at 70ch measure
3. Four chapters, each with a serif index (01-04), top rule, drop-cap opening paragraph
4. Two sticky interlock sections alternating image-left / image-right, images pinned while copy scrolls
5. A background sand-colored layer drifting at rate 0.12 behind the whole page
6. Pull quote with a left brick rule and large italic serif
7. rAF-throttled parallax, transform-only, reduced-motion static fallback, parallax disabled under 768px
```

## Absolute Bans (Match and Refuse)

If any of the following patterns appear, it is a style violation — rewrite without exception.

- mutate top/margin/height in a scroll handler (layout thrash) — parallax is transform-only
- exceed three parallax rate tiers per viewport (muddy depth)
- let parallax overpower reading: body copy is never the parallax subject, measure stays under 75 chars
- keep heavy parallax on mobile (perf + motion sickness) — weaken or disable it
- use multiple accents or flood brick red as a surface color
- omit the prefers-reduced-motion fallback
- use cold or pure-white backgrounds (kills the warm paper feel)

## Self-Check (Verify Before Shipping)

If any item fails, the style has drifted — fix before shipping.

- [ ] No purple-to-blue gradients
- [ ] No overused fonts (Inter, Roboto, Geist, Fraunces, Plus Jakarta Sans)
- [ ] No nested cards (cards inside cards)
- [ ] No gray text on colored backgrounds
- [ ] Body text contrast meets WCAG AA (>= 4.5:1)
- [ ] No bounce or elastic easing curves
- [ ] Animations have a prefers-reduced-motion fallback
- [ ] Body text line length capped at 65-75 characters
- [ ] No side-stripe accent borders (border-left/right > 1px)
- [ ] No gradient text (background-clip: text)
- [ ] No glassmorphism used as the default surface treatment
- [ ] No tiny uppercase tracked eyebrow labels above every section heading
- [ ] never mutate top/margin/height in a scroll handler (layout thrash) — parallax is transform-only
- [ ] never exceed three parallax rate tiers per viewport (muddy depth)
- [ ] never let parallax overpower reading: body copy is never the parallax subject, measure stays under 75 chars
- [ ] never keep heavy parallax on mobile (perf + motion sickness) — weaken or disable it
- [ ] never use multiple accents or flood brick red as a surface color