# HANDOFF — put facespec.com online

For the Claude session doing the launch. The mockup is **done and client-reviewed**;
your job is hosting, DNS, the form backend, and swapping in final assets as they arrive.
Read `CLAUDE.md` first (prime directive + hard rules), and `docs/design-brief.md` before
touching `index.html`.

## Architecture (decided)

Squarespace keeps **only the domain** (registrar + DNS panel). The site itself moves to
an external static host, and Squarespace's DNS points at it. The old Squarespace *site*
stays untouched until the new site is live on the domain — then the site subscription can
be cancelled (the domain survives as a "Squarespace Domain"; confirm before cancelling).

**Recommended host: Netlify, git-connected.**
- Direct edit→live pipeline: edit `index.html` → commit → push → live in ~1 minute.
- Netlify Forms solves the note-form backend with zero third parties (see below).
- Free tier is fine for a one-page site at this traffic level.
- (Cloudflare Pages is an acceptable alternative, but forms then need Formspree/Basin,
  and moving DNS to Cloudflare is more churn. Prefer Netlify here.)

## Launch steps

1. **Repo.** Create a private GitHub repo (e.g. `facespec-site`) and push this folder's
   git history to it. Sanjay's GitHub is **shp2101**; the fine-grained PAT named
   "2101 claude" (Contents R/W + Administration R/W, can create repos) is in the macOS
   Keychain on both MacBook accounts: `security find-internet-password -s github.com -a shp2101 -w`.
2. **Netlify site.** New site from Git → pick the repo → no build command, publish
   directory = repo root. Site loads at `<name>.netlify.app`.
3. **Form backend** (before DNS, so it's tested at the netlify.app URL):
   - On the `<form>`: add `name="note" method="POST" data-netlify="true"` and a
     honeypot (`netlify-honeypot="bh"` + hidden `bh` input). Keep `novalidate` + the
     existing JS validation, but let the submit actually POST (fetch to `/` with
     form-encoded body works with the current confirm-in-place UX).
   - Netlify dashboard → Forms → notifications → email to **skp@facespec.com**.
   - Remove the `.mock-note` paragraph ("this form doesn't send yet") once live.
   - Send a real test note and confirm it arrives before pointing DNS.
4. **DNS** (Squarespace → Domains → facespec.com → DNS settings):
   - Delete the Squarespace-site A/CNAME records for `@` and `www` (note them down first).
   - Add: `A @ 75.2.60.5` (Netlify's apex load balancer) and
     `CNAME www → <name>.netlify.app`.
   - In Netlify → Domain management: add `facespec.com` + `www.facespec.com`, set the
     apex as primary, let it issue the Let's Encrypt cert. Propagation: minutes–hours.
5. **Old-URL redirects.** Add a `_redirects` file: `/* / 302` (the old site's paths like
   `/botoxskin-booster` should land on the new page, not 404).
6. **Finishing touches** on `index.html`:
   - Favicon: generate from `assets/fs-mark-ink.png` (32/180/512 sizes) + `<link rel="icon">`.
   - `<meta name="description">` and OG tags (og:title, og:description, og:image — a
     screenshot of the hero works). Keep copy in the site's voice, no superlatives.
   - NO analytics by default (small practice, privacy posture). Only if Sanjay asks.
7. **Verify live:** light + dark mode, mobile 375px, anchor nav under the sticky header,
   the form end-to-end, and that `facespec.com` + `www` + old Squarespace URLs all land.

## Artwork: files come first, code second (standing instruction)

Drawings and photos are produced **separately, saved as separate image files**, and
incorporated as images — do not hand-redraw art in code. Drop final files in `assets/`,
then swap at these points in `index.html`:

| What | Where in index.html today | How to swap |
|---|---|---|
| The two Seoul-method face drawings | Inline SVGs inside `<div class="duo">` (marked "study one/two — from Seolhee's sketch") | Replace each `<svg>…</svg>` with `<img src="assets/…" alt="…">`; keep the `.duo` wrapper and caption. Current inline versions are also exported at `assets/face-study-1.svg` / `-2.svg`. |
| The fs logo mark | CSS custom property `--fs-mark-uri` (base64 alpha mask); every `<span class="fs-mark">` renders it via `mask-image` + `currentColor` | If a cleaner/vector logo file arrives: re-make the alpha mask (white-on-transparent PNG of the mark) and swap the base64, or point `mask-image` at `assets/fs-mark-mask.png`. Keep the mask approach — it's what makes the mark theme-aware. |
| Her portrait | About section placard (`figcaption` "portrait to come") | Replace the `.frame` contents with `<img>` (3:4 vertical). |
| Treatment room photo | Practice section placard (window/vase line drawing) | Same swap. |
| Seolhee's two sketch photos | Not in repo (they exist in the originating chat/Sanjay's phone) | Save into `assets/sketches/` for provenance when available. |

Once hosted on Netlify, multi-file assets are normal — the "everything inline in one
file" constraint only applies when publishing the page as a Claude artifact for preview.

## What's already settled — don't redo

- All copy corrections from Seolhee (round 2): Korea SICU→NY timeline, Daejeon, MSN,
  ANCC, Hearst Award, six years comfort care, two botox products, no before/after
  photos policy, NYC traditional-style training. Details: `docs/review-log.md`.
- The design system (palette/type/voice) — `docs/design-brief.md`.
- The old Squarespace embed route (a `squarespace/` kit existed; deleted as obsolete —
  it's in git history if ever needed).

## Still open (beyond launch)

- Portrait + treatment-room photography (frames built and waiting).
- Final artwork files for the two face drawings (current ones are traced stand-ins).
- Verify with Seolhee: NAD+ pricing tiers, whether to name the Gangnam dermatologist,
  the seal hangul 설희, and that the "SP in FaceSPec is me" line lands with her.
