# Frenzy Salon — Website Redesign (Prototype)

Single-file HTML prototype redesigning the homepage and the 14 existing inner pages.
Terminal output of this round: `frenzy-salon-website-v3.html`.

## Files

```
frenzy-website-redesign/
├── DESIGN.md                     this spec
├── frenzy-salon-website-v1.html  new prototype (15 routes)
├── frenzy-salon-website-v2.html  refinement pass + client boutique palette (theme-v2)
├── frenzy-salon-website-v3.html  slick/smooth feminine polish (current)
├── frenzy-salon-subpages.html    frozen copy of the previous draft (reference) — palette updated to match v2
└── assets/
    ├── logos/                    official brand logos
    │   ├── frenzy-logo-black.png     header (light bg)
    │   ├── frenzy-logo-white.png     footer (dark bg)
    │   ├── frenzy-isotipo.png        mobile panel + favicon
    │   └── frenzy-isotipo-on-white.png
    └── journal/                  3 real July 2026 blog banners (Journal section)
        ├── humidity-blowout.png
        ├── dimensional-gray.png
        └── ouidad-curly.png
```

## Brand system (source of truth: `02_brand_kit/FrenzySalon_brand_guide.html`)

### Color
| Token | Value | Use |
|---|---|---|
| `--black` | `#000000` | body text, headings, dark sections |
| `--white` | `#FFFFFF` | page background |
| `--cream` | `#FBF9F4` | alternating sections |
| `--navy` | `#002C50` | retained brand color (currently not used for CTAs) |
| `--gold` | `#B49434` | **all primary CTA fills**; accent (dividers, hover, eyebrows, large marks) |
| `--gold-deep` | `#8A6F1F` | derived darker gold — CTA hover + small gold text (AA contrast) |
| `--gray-dark` | `#54595F` | secondary text |
| `--gray-med` | `#7A7A7A` | default muted body text |
| `--gray-light` | `#BBBBBB` | borders, hairlines |

White/black dominate; gold carries the CTAs and accents. Buttons are pill-shaped (`border-radius:999px`); cards/boxes/inputs use `6px`; the services dropdown uses `14px`.

### Type
- Headings (h1/h2) — **Urbanist** 700
- Secondary headings (h3) — **Roboto Slab** 400
- Body / p — **Roboto** 300/400
- Nav, eyebrow, buttons — **Albert Sans** 400/500, uppercase, letter-spaced
- Footer fine print — **Roboto Condensed** 400

### Logo rules
Never recolor, rotate, or distort. Never over busy photography without a solid or scrim background.
Black lockup on light surfaces; white lockup on dark surfaces; isotipo for the mobile panel and favicon.

## Theme v2 — luxury beauty-boutique palette (client direction)

Applied **in place** to `frenzy-salon-website-v2.html` (scoped to `html.theme-v2`).
Client brief: *"the combination I like most is roughly 65% ivory/white + 20% greige
+ 10% espresso + 5% dusty rose. The rose stays a sophisticated detail, not the
protagonist."* Plus: *"I want Frenzy to feel more like a luxury beauty boutique than
the typical salon page: lots of white space, big hair photography, elegant editorial
typography, espresso buttons, and very few decorative elements."*

| Token | Value | Share / role |
|---|---|---|
| `--paper` | `#FFFFFF` | white sections + cards |
| `--ivory` | `#FAF7F2` | warm off-white surface |
| `--cream` (greige) | `#EFEAE1` | alternating section surface (the 20%) |
| `--line` | `#DCD5C8` | hairlines / card borders |
| `--muted` | `#6B6459` | eyebrows + muted body (AA on white *and* greige) |
| `--espresso` | `#352A24` | **all buttons**, headings |
| `--espresso-deep` | `#261E1A` | header, footer, dark sections |
| `--rose` | `#CBA9A1` | **detail only**: section rule, pillar numbers, stars, on-dark eyebrows, hovers |
| `--rose-soft` | `#E3CCC6` | secondary button outline on dark |
| `--rose-deep` | `#856156` | small labels (AA) — card links, statuses, roles, `.idx` |

Notes:
- Legacy `--gold*` tokens are remapped to the rose/greige system inside `.theme-v2`, so no gold survives on the page.
- Buttons are square (radius 0) and espresso everywhere; on dark surfaces the primary button is ivory, hovering to dusty rose.
- Section padding raised to 122px (72px mobile); hero photography enlarged; type stepped up for the editorial feel.
- The one remaining decorative mark is the 2px dusty-rose rule under each section heading.

## Spacing model
Header (68px) + draft bar (~44px) are wrapped in one fixed chrome container.
`--chrome-h: 112px`; `main { padding-top: var(--chrome-h) }`.
The four scattered `padding-top:150px` offsets (breadcrumb, photo-hero, contact, about) are removed.
Hero bottom padding and section padding are set to a single rhythm to remove the hero→content void.

## Homepage `#page-home` (13 sections, default route)

| # | Section | Spec |
|---|---|---|
| 1 | Hero | H1 "Beautiful hair starts with someone who listens" · eyebrow `HAIR COLOR & TRANSFORMATION · PEMBROKE PINES` · primary → GlossGenius · secondary → `#hair-services` |
| 2 | Brand Philosophy | H2 "Beautiful hair is only the beginning" · no icons, no checks, no CTA |
| 3 | Expertise Grid | 7 editorial cards, 12-col asymmetric; all cards share the same white + hairline treatment (the old "featured" dark card was removed) |
| 4 | Emotional Transformation | H2 "The result is not only what you see, it is how you feel when you see it" · CTA → `#transformations` · no counters |
| 5 | Frenzy Experience | 3 pillars (01 Be heard / 02 Created with intention / 03 Leave renewed) + 5-image editorial gallery |
| 6 | Mosella | H2 "The standard begins with listening" · title **Founder, Owner & Master Colorist** · no Fred |
| 7 | Real Transformations | manual 6-case gallery · no auto Instagram feed |
| 8 | Client Stories | 3 reviews (hear → natural color → trust) — VERIFY placeholders |
| 9 | Journal | 3 manually-pinned articles (humidity, gray coverage, Ouidad) |
| 10 | Consultation | known-service vs guidance split · primary → Consultation on GlossGenius · secondary → `tel:+19544370777` |
| 11 | Visit Frenzy | NAP + map · 322 SW 145th Terrace, Pembroke Pines, FL 33027 |
| 12 | FAQ | 5-question accordion — VERIFY (guide §4.12 unavailable) |
| 13 | Final CTA | H2 "A beautiful result begins with being understood" · two buttons, no form |

## Shared chrome
Header (`<!-- T-4 Header -->`) and footer (`<!-- T-5 Footer -->`) are rendered once and wrap every page.
Marked with comments so they can be extracted into templates later.

## Copy sourcing
- Section H1s/H2s/eyebrows: provided verbatim in the brief.
- Body copy: drafted from the brand guide + Marketing Brain voice (polished, warm, educational; "confidence through transformation").
- Journal: the 3 July 2026 blog posts in the repo.
- Client Stories: adapted Google-review quotes, VERIFY-tagged.
- FAQ: drafted, VERIFY-tagged pending guide §4.12.

## Image policy
Unsplash placeholders for photography (marked for later swap). Real brand logo files and the 3 real blog banners are used where they exist.

## Photography (real assets)

Real Frenzy Salon photography replaces the stock/placeholder images.

- **Source library:** `C:\Users\User\Desktop\WORK2023\FrenzySalon\FRENZY SALON - PHOTO SERVICES`
- **Pipeline** (`assets/photos/build_photos.ps1`, `fix_heic.py`, `finalize_photos.ps1`):
  - JPGs → re-encoded, capped at 1600 px
  - HEIC → decoded with `pillow_heif` (primary image; ffmpeg only exposed 512 px aux tiles)
  - MOV → single frame extracted at mid-clip via `ffmpeg`
- **Review:** candidates tiled into labeled contact sheets (`assets/photos/_candidates/_sheet-*.jpg`) and reviewed before selection.
- **Final assets:** `assets/photos/*.jpg` (40 files, ~9 MB) + `assets/photos/team/` (3 supplied portraits).
- **Founder portrait update:** `team/mosella.jpg` was replaced with the new studio portrait (`assets/FOTOS NUEVAS/1.jfif`, 1191×1600). The previous file is kept as `team/mosella-previous.jpg`. Because the filename is shared, this updates the homepage founder block, the About team profile and the team strip in v1/v2/v3 at once.
- **Portrait fit:** vertical photos inside `.editorial-split` / `.team-profile` carry a `.portrait` class (`height:auto` + `object-fit:contain`) so the frame adopts the photo's ratio and the subject is never cropped. Currently applied to Mosella's founder portrait (homepage + About).
- **Homepage hero image update:** `assets/photos/home-hero.jpg` replaced with the colour-service photo (`assets/FOTOS NUEVAS/2.jfif`, 1206×1593, ratio ≈ 0.757 — same as the previous 0.75). Previous file kept as `home-hero-previous.jpg`. Focal point set to `center 25%` so the colourist and the foil work stay in the visible band. Shared filename, so v1/v3 heroes update too.
- **"The Real Result" image update:** `assets/photos/home-real-result.jpg` is a **horizontal top-crop** of `assets/FOTOS NUEVAS/IMG_8572.HEIC` (iPhone HEIC, 3024×4032 portrait → cropped from the top to the frame's 7:6 ratio = 3024×2592, downscaled to 1400×1200, JPEG q85). Cropping to landscape removed the sweater/jeans/floor and keeps the salon signage + hair, so the `object-fit:cover` frame no longer has to cut into a portrait. The red-hair version was discarded (still available in `FOTOS NUEVAS/`); the original copper file is kept as `home-real-result-previous.jpg`. Alt text updated in v1/v2/v3. HEIC decoding used `heic-convert` (Node/WASM) — Windows lacks the HEVC codec.
- **Traceability:** `assets/photos/SOURCES.md` maps every final asset → candidate → original library file.
- **Kept stock / pending real assets** (flagged in HTML with `<!-- PHOTO PENDING -->`):
  Jenny Schillaci portrait, mall exterior, Beauty/makeup hero, and the two map placeholders (the homepage "Visit Frenzy" block now uses the real interior shot).

- **Experience gallery:** reworked to **portrait tiles** — `repeat(5, 1fr)` with `aspect-ratio: 3/4` images and `object-position: center top`, replacing the old 4-column asymmetric grid. The previous spans (`eg-1` 2×2, `eg-2` 2-wide, `eg-5` 4-wide) turned vertical photos into 3:1–6:1 slivers, which read as disproportionate crops. Below 820px it drops to 2 columns. Photo swap for `eg-1`: `gallery-curly-client.jpg` ← `assets/FOTOS NUEVAS/IMG-20240924-WA0036.jpg` (1200×1600); the previous file is kept as `gallery-curly-client-previous.jpg`. Alt text updated in v1/v2/v3. The filename still says "curly-client" though the shot is a straight/wavy back view — worth renaming.

- **Gallery `eg-3` swap:** `gallery-highlights-process.jpg` ← `assets/FOTOS NUEVAS/IMG-20240924-WA0023.jpg` (1200×1600, ratio 0.75 — an improvement on the previous 0.5625, so it now fills the 3:4 tile with 0% crop). Previous file kept as `gallery-highlights-process-previous.jpg`; alt text updated in v1/v2/v3.

- **Gallery `eg-4` swap:** `gallery-smoothing.jpg` ← `assets/FOTOS NUEVAS/IMG_8263.HEIC` (HEIC, 2268×4032 portrait). Converted with `heic-convert` (Node/WASM) and **baked to a 3:4 crop from the top** (2268×3024 → 960×1280, q85), dropping the jeans and floor. Previous file kept as `gallery-smoothing-previous.jpg`; alt text updated in v1/v2/v3. Every gallery image is now 0.75 (3:4), so the grid crops nothing.

- **Salon interior (homepage "Visit Frenzy"):** the Unsplash map placeholder in `.visit-map` was replaced with a real interior shot — `assets/photos/salon-interior.jpg` (900×1600, from `FOTOS NUEVAS/WhatsApp Image 2026-10-12 at 12.06.03 PM.jpeg`). `.visit-map img` gets `object-position: center 25%` so the chandelier/mirrors stay in the squarer frame. The `<!-- PHOTO PENDING -->` comment was updated (a live map embed remains an option). The same Unsplash photo is still used on the Contact page (`.map-embed`) and the About page ("Interior of Frenzy Salon" editorial split) in v2 — untouched for now.

## Verification
- 15 routes click-through; exactly one `<h1>` per page.
- Logo correct light/dark; all primary buttons espresso; Cormorant Garamond / Urbanist / Albert Sans render.
- No header gap; no hero→section void; 860/900px breakpoints intact.
- All 48 local asset references resolve on disk.