cinema-web

Files (1)

• SKILL.md

SKILL.md (first lines)

## Activation Contract

Apply this skill when the user asks for:
- "cinematográfico", "cinematic", "película", "film-like"
- "negro mate", "matte black", "elegante", "sobrio", "no color"
- "estilo Apple", "estilo Nike", "editorial", "de revista", "premium"
- "que se vea caro", "menos ruido", "minimalista con presencia"
- Typography-driven, monochrome, high-end fashion / brand feel

Do NOT apply when the user wants colorful, playful, cyberpunk, brand-colored, or casual designs.

## Hard Rules

### Color — cero color
- `--bg: #000` (fondo) | `--surface: #111` (cards/modales) | `--text: #fff` | `--text-secondary: rgba(255,255,255,0.3)` | `--text-dim: rgba(255,255,255,0.12)` | `--border: rgba(255,255,255,0.04-0.06)` | `--accent: #fff`
- Cero acentos de color. Nada de azul, rojo, dorado, verde, violeta.
- Sin gradientes de color. Fondo negro sólido. Texto blanco. That's it.
- Imágenes: blanco y negro o muy desaturadas, o con overlay negro.

### Tipografía — sagrada
- **Headings**: Playfair Display (serif, emocional, cinematográfica)
- **Body / UI**: Inter (limpia, profesional, neutra)
- No mezcles con otras fuentes. No system-ui. No sans-serif genéricas.
- Escala: títulos GRANDES (`clamp(3rem, 8vw, 5rem)+`), body chico (0.85–0.95rem), labels chicos (0.65–0.75rem).
- Uppercase SOLO en labels, nav links, metadata. Nunca en body ni títulos largos.
- Letter-spacing suelto en labels (`0.08-0.15em`), tight en títulos grandes (`-0.02-0.03em`).

### Espacio — respirar
- Padding generoso en todo. Sections: `4-6rem` vertical, `2rem` horizontal.
- Line-height: body `1.7-1.9`, headings `0.95-1.05`.
- Si dudás entre dos espaciados, usá el más grande. El lujo es espacio.
- Gap entre elementos: mínimo `1rem`, ideal `1.5-2rem`.

### Animaciones — lentas, serias, con propósito
- Timing: 400–600ms (más lento que el default de 300ms)
- Curva: `cubic-bezier(0.22, 1, 0.36, 1)` — elegante, sin bounce
- Solo animar `opacity` y `transform`. NUNCA `width/height/top/left`.
- Scroll: IntersectionObserver con `threshold: 0.15`, fade + translateY(20–30px)
- Stagger entre items: 100–200ms
- Hover: 300–400ms, solo opacity/transform, nada de escalados exagerados
- No bounce, no elastic, no "divertido". Las transiciones son serias.

### Bordes y formas
- Border-radius: 0 (ideal) o máximo 4px. Nada de 8px+ ni pill shapes.
- Sin sombras (`box-shadow: none`). Profundidad con bordes sutiles.
- Border: `1px solid rgba(255,255,255,0.04)` a `0.06`.

### Íconos
- SVG outline de un solo set: Lucide, Heroicons Outline, o Phosphor (duotone desactivado).
- Sin emoji como íconos. Sin filled icons. Sin multi-color.
- Tamaño: 16–20px para UI, 24–32px para secciones hero.

## Component Patterns

### Navbar
```
Position: fixed, top 0, z-index 100
Background: rgba(0,0,0,0.6) + backdrop-filter blur(12px)
Border-bottom: 1px solid rgba(255,255,255,0.04)
Padding: 1.2rem 2.5rem
Layout: logo (left) → spacer → nav links (right) → CTA button
Logo: Playfair Display 700, 1.3rem, color #fff
Links: Inter 500, 0.8rem, uppercase, letter-spacing 0.08em, color rgba(255,255,255,0.35)
CTA: border 1px solid rgba(255,255,255,0.15), bg transparent, color #fff, border-radius 0
Hidden on scroll down, shows on scroll up (transform translateY)
```

### Hero
```
Full viewport, centered, flex column
Label (opcional): 0.65-0.7rem, uppercase, letter-spacing 0.2-0.3em, rgba(255,255,255,0.2)
Title: Playfair Display 900, clamp(3.5rem, 10vw, 8rem), line-height 0.95, #fff
  Opcional: italic variant (font-weight 400, opacity 0.5)
Subtitle: Inter 300, 0.9-1rem, rgba(255,255,255,0.3), max-width 400-500px, line-height 1.8
Actions: flex, gap 1.2rem
  Primary CTA: bg #fff, color #000, border none, padding 1rem 3rem, uppercase, 0.8rem
  Secondary CTA: border 1px solid rgba(255,255,255,0.15), bg transparent, color rgba(255,255,255,0.6)
Scroll indicator: thin line (1px, 40px, gradient fade out), label above, centered bottom
```

### Buttons
```
Primary: bg #fff, color #000, border-radius 0, padding 1rem 3rem, font Inter 600, 
  letter-spacing 0.12em, uppercase, transition 0.4s, hover: opacity 0.85
Secondary/Outline: bg transparent, color rgba(255,255,255,0.6), border 1px solid rgba(255,255,255,0.15),
  border-radius 0, padding 1rem 3rem, font Inter 600, letter-spacing 0.12em, uppercase,
  hover: border-color rgba(255,255,255,0.4), color #fff
Text/ghost: no border, color rgba(255,255,255,0.5), hover color #fff
Nav button: smaller padding (0.5rem 1.8rem), border, same style as outline
Disabled: opacity 0.3, cursor not-allowed, no hover effects
```

### Cards
```
Surface grid: 1px gap grid (background: rgba(255,255,255,0.04) as grid lines)
Card: bg #000, padding 2.5rem 2rem
  Numbered header: 0.7rem, Playfair o Inter, rgba(255,255,255,0.15)
  Title: 1.1rem, Inter 600, #fff
  Body: 0.85rem, Inter 300, rgba(255,255,255,0.25), line-height 1.7
Hover: background rgba(255,255,255,0.02) (casi imperceptible)
No border-radius. No shadow.
```

### Forms / Inputs
```
Label: 0.7rem, Inter 500, rgba(255,255,255,0.25), uppercase, letter-spacing 0.1em
Input: bg rgba(255,255,255,0.03), border 1px solid rgba(255,255,255,0.06), 
  color #fff, padding 0.9rem 1.2rem, border-radius 0 (o 4px max)
Focus: border-color rgba(255,255,255,0.2)
Placeholder: rgba(255,255,255,0.1)
Submit: same as Primary button style
Error: rgba(255,100,100,0.7), sin background de error
```

### Modals
```
Overlay: rgba(0,0,0,0.7), backdrop-filter blur(8px)
Container: bg #111, border 1px solid rgba(255,255,255,0.06), padding 3rem 2.5rem
  Transform: scale(0.92) translateY(30px) → scale(1) translateY(0), 0.45s

From WilberHernan/OpenCode-Will, Apache-2.0.

More from WilberHernan/OpenCode-Will