# CULTSCALE + CULTSHOT Assets

This directory contains all brand and social media assets following a strict **source → build** workflow.

## Directory Structure

```
assets/
├── Makefile              # Build system
├── src/                  # Source files (version controlled, flat)
│   ├── cultscale-logo.svg
│   ├── cultscale-social-share.svg
│   ├── cultscale-twitter-header.svg
│   ├── cultscale-facebook-cover.svg
│   ├── cultscale-youtube-banner.svg
│   ├── cultscale-linkedin-company-cover.svg
│   ├── cultscale-linkedin-personal-cover.svg
│   └── ...
├── out/                  # Generated artifacts (flat, Git LFS)
│   ├── cultscale-favicon.ico, cultscale-apple-touch-icon.png, cultscale-social-share.png, etc.
│   ├── cultshot-favicon.ico, cultshot-apple-touch-icon.png, cultshot-social-share.png, etc.
│   └── (profiles, covers, and other platform assets)
└── lib/                  # External library assets
    ├── images/           # Large source files (Git LFS)
    │   └── audience-connection-original.jpg
    └── fonts/            # Brand fonts (Git LFS)
```

## Workflow

### 1. Source Files (assets/src/)

**Brand Logo:**
- `src/cultscale-logo.svg` - The canonical CULTSCALE logo mark
- `src/cultshot-logo.svg` - The canonical CULTSHOT mark
- Used everywhere: web icons, social profiles, social covers

**Social Media Covers:**
- `src/cultscale-*.svg` - SVG compositions for each platform
- `src/cultshot-social-share.svg` - CULTSHOT Open Graph (1200x630)
- CULTSCALE covers reference:
  - `lib/images/audience-connection-original.jpg` (background)
  - `cultscale-logo.svg` (logo overlay)
- CULTSHOT social share references:
  - `cultshot-director-cropped.jpg` (background)
  - `cultshot-logo.svg` (logo overlay)

**Icons:**
- `src/icons/*.svg` - UI icons (LinkedIn, etc.)
- Used by Astro components via imports

### 2. Build System (Makefile)

```bash
cd src/assets

make              # Show help
make all          # Build everything (brand + social + profiles)
make brand        # Build logo and icons
make social       # Build social covers
make profiles     # Build just profile pictures
make clean        # Remove all generated files
```

**Dependency Tracking:**
- Logo changes → Rebuilds icons, profiles, AND social covers
- Source image changes → Rebuilds all social covers
- Individual SVG changes → Rebuilds only that cover
- Incremental builds (only rebuilds when sources change)

**Required Tools:**
- `inkscape` - SVG to PNG rendering
- `rsvg-convert` - Logo rendering
- `magick` (ImageMagick) - Favicon generation

### 3. Build Artifacts (assets/out/)

All files in `out/` are flat (no subdirectories) and tracked with Git LFS:

**Brand Icons:**
- cultscale-logo.png (1024x1024) - High-res logo
- cultscale-apple-touch-icon.png (180x180) - iOS icon rendering the canonical two-triangle mark (2.39:1) on Milky Black
- cultscale-icon-192.png (192x192) - PWA icon using the same cultscale shape
- cultscale-favicon-32x32.png, cultscale-favicon-16x16.png - Favicons derived from the cultscale mark
- cultscale-favicon.ico - IE/legacy support

All brand icons scale the 2.39:1 cultscale icon into their square canvases by resizing the width to fit and padding with Milky Black so the triangles never stretch, keeping the aspect ratio mandated by the branding guidelines.

**Social Profiles (Milky Black #121212 background):**
- instagram-profile.png (110x110)
- twitter-profile.png (400x400)
- facebook-profile.png (180x180)
- linkedin-profile.png (400x400)
- youtube-profile.png (800x800)
- tiktok-profile.png (200x200)
- google-profile.png (250x250)
- discord-profile.png (512x512)
- bluesky-profile.png (1000x1000)
- github-profile.png (400x400)
- threads-profile.png (400x400)

**Social Covers:**
- cultscale-social-share.png (1200x630) - Open Graph / WhatsApp
- cultscale-twitter-header.png (1500x500) - Twitter/X
- cultscale-facebook-cover.png (820x312) - Facebook
- cultscale-youtube-banner.png (2560x1440) - YouTube
- cultscale-linkedin-company-cover.png (1128x191) - LinkedIn Company
- cultscale-linkedin-personal-cover.png (1584x396) - LinkedIn Personal

### 4. Astro Integration

All assets are imported directly by Astro components:

```astro
---
// Import from src/assets/
import logo from '@assets/src/cultscale-logo.svg';
import favicon from '@assets/out/cultscale-favicon.ico';
import socialShare from '@assets/out/cultscale-social-share.png';
import linkedinIcon from '@assets/src/icons/linkedin.svg';
---

<img src={logo.src} alt="CULTSCALE" />
<link rel="icon" href={favicon.src} />
<meta property="og:image" content={socialShare.src} />
```

**Benefits:**
- Astro optimizes images automatically
- No manual deployment needed
- Type-safe imports
- Proper caching and CDN integration

**Public Directory:**
The `public/` directory only contains:
- `robots.txt`
- `_redirects` (Cloudflare shortlinks)
- `_headers` (Cloudflare security/cache headers)

Sitemap is automatically generated by `@astrojs/sitemap` integration during build.

## Social Media Composition Guidelines

### Background Image
- **Source:** `lib/images/audience-connection-original.jpg` (1024x1024)
- **Subject:** Woman captivated in cinema audience, warm screen lighting
- **Represents:** The filmmaker-audience connection moment
- **Center of gravity:** Her face (focal point for all crops)

### Brand Elements (per branding guidelines)

**Overlays:**
1. Dark gradient overlay (72% opacity, #121212 Milky Black)
2. Vignette effect (radial gradient from center)
3. Film grain texture (subtle noise)

**Logo:**
- Always use `<image xlink:href="../cultscale-logo.svg" />` (or the appropriate brand-prefixed logo)
- Never inline polygons (ensures consistency)
- Positioned bottom-right or integrated with wordmark

**Text Hierarchy:**
1. **Tagline:** "Infrastructure for independent cinema"
   - Font: Space Grotesk Regular
   - Color: #E6E6E6 (Light Gray)
   - Size: 20-36px depending on platform
   
2. **Wordmark:** "CULTSCALE"
   - Font: Space Grotesk Regular
   - Color: #FFFFFF (Pure White)
   - Always uppercase
   
3. **Hero Message:** "We maximize the impact of independent filmmakers"
   - Font: Space Grotesk Bold
   - Color: #FFFFFF (Pure White)
   - Size: 42-76px depending on platform
   - Split into 2-3 lines for readability

**Corner Marks:**
- White stroke (1.5px), 20% opacity
- Technical "viewfinder" aesthetic
- Positioned at all four corners

### Platform-Specific Considerations

**Open Graph (1200x630):**
- Center-focused composition
- Maximum text readability at thumbnail size
- Subject visible in center frame

**Twitter/X (1500x500):**
- Wide 3:1 format
- Text right-of-center (safe from profile pic crop)
- Subject framed left for visual balance

**Facebook (820x312):**
- Ultra-wide format
- Center composition with strong overlay
- Text dominance for brand recognition

**YouTube (2560x1440):**
- Full-frame composition
- Safe zone: 1546x423 centered
- Text positioned within TV-safe boundaries

**LinkedIn Company (1128x191):**
- Extreme wide format (5.9:1)
- Right-biased text positioning (+120-180px offset)
- Avoids profile picture overlay on left

**LinkedIn Personal (1584x396):**
- Wide format (4:1)
- Heavy right-bias (+360-420px offset)
- Maximum clearance for profile picture

## Common Issues & Solutions

### Text Not Rendering in Output
**Problem:** Text elements defined in SVG but not visible in PNG output.
**Cause:** Font "Space Grotesk" not installed, Inkscape using fallback.
**Solution:** Install Space Grotesk font or accept sans-serif fallback (visual consistency maintained by branding).

### Logo Not Updating in Social Covers
**Problem:** Changed logo.svg but social covers still show old logo.
**Cause:** Dependency tracking in Makefile.
**Solution:** Logo is a dependency - `make social` will rebuild automatically.

### Images Too Dark
**Expected:** Heavy dark overlay (72%) for text readability per brand guidelines.
**Verification:** Text areas should show white (RGB 255,255,255), background dark (RGB ~10-20).

### Profile Picture Overlays on LinkedIn
**Problem:** Text/logo hidden by circular profile picture on left side.
**Solution:** Use right-biased positioning (+120-420px offset depending on format).

## Maintenance

### Updating the Logo
1. Edit `src/cultscale-logo.svg`
2. Run `make brand` to rebuild icons
3. Run `make social` to rebuild social covers (logo is embedded)
4. Astro imports automatically reference updated assets

### Creating New Social Platform Cover
1. Copy an existing `src/cultscale-*.svg` as a template
2. Adjust dimensions and composition for new platform
3. Ensure logo reference: `<image xlink:href="../cultscale-logo.svg" />` (or the appropriate brand-prefixed logo)
4. Add new target to `Makefile` under `SOCIAL_COVERS`
5. Build: `make social`

### Changing Background Image
1. Replace `lib/images/audience-connection-original.jpg`
2. Run `make social` (dependency tracked)
3. All 6 covers rebuild automatically

## Git LFS Tracking

Files automatically tracked by Git LFS (see `.gitattributes`):
- `assets/out/*` - All generated PNGs
- `assets/lib/images/*` - Large source images
- `assets/lib/fonts/*` - Font files

## Migration Notes (December 2024)

**Deprecated:**
- ❌ `assets/build/` → Renamed to `assets/out/`
- ❌ `assets/scripts/` → Replaced by Makefile
- ❌ `assets/social/` → Removed (incorrect structure)
- ❌ `scripts/regenerate-logo-assets.sh` → Replaced by Makefile

**New:**
- ✅ `assets/Makefile` - Complete build system
- ✅ `assets/src/brand/` - Logo source
- ✅ `assets/out/` - Build artifacts
- ✅ Dependency tracking (incremental builds)
- ✅ Symlink-based deployment (not copies)

## See Also

- [Branding Guidelines](../../content/branding-guidelines.md) - Complete brand specifications
- [Asset Build Instructions](../../.github/instructions/assets.instructions.md) - Technical workflows
- [Makefile](./Makefile) - Build system implementation
- [Repository README](../../README.md) - Overall project structure