scj/PLAN.md

# Storm Cloud Jumpers — Website Build Plan

**Domain:** jumpers.stormcloudhills.com
**Type:** Static, responsive storefront-style showcase + care hub. **All sales & inquiries run through the website directly** (email) — **NOT** MorphMarket.
**Contact:** stormcloudjumpers@gmail.com
**Facebook:** https://www.facebook.com/61591317309985/
**Build location:** `scj/`

---

## 1. What this site is (and isn't)

A branded **showcase + inquiry hub** that IS her sales channel. No cart/payment processor and no accounts — buyers **reserve/inquire via the site** (form + email to stormcloudjumpers@gmail.com), and Mom arranges payment + shipping directly. She is **not** setting up a MorphMarket shop (she only reuses MorphMarket-branded shipping boxes, which carry the live-arrival program). So: **no MorphMarket links anywhere.**
Every "Available" spider gets a **"Reserve / Inquire"** button that opens a pre-filled inquiry (form anchor or `mailto:` with the spider's name in the subject).

## 2. Brand & design direction

Reuse the locked look from the existing assets:
- **Palette:** near-black storm background (`#0a0a0a`), **red `#e02828`** accent, brushed-silver text on headings.
- **Type:** Oswald (display/headlines) + Inter (body) — already in the placeholder.
- **Mascot:** **Nimbus** (the crest logo) featured in the hero and as the site logo/favicon.
- **Vibe:** bold "esports crest" energy softened with clean, readable content — professional, not gimmicky. Keep subtle motion (reveal-on-scroll, light parallax) from the placeholder; trim anything that hurts readability or mobile.

## 3. Structure — single page + one print page

**`index.html`** (anchor nav: Available · Mamas · Care · Shipping · About · Contact)

1. **Hero** — Nimbus mascot on storm background, tagline "Small size. Big personality.", CTAs → *View Available* + *Care Guide*.
2. **Available Now** — the real for-sale inventory as cards, each with photo, species, instar/age, sex status, "healthy body shape", temperament, price, and a **Reserve / Inquire** button:
   - *Otiosus slings* — Northern Canopy (Fern's line), i5–6, unsexed, **$25** ea. Note: Northern otiosus differ from FL; typically $35+.
   - *Regius males* — current boys **Gully, Noble, Hexx & Magick**, adults, **$25** ea. (⚠️ **Nashville has passed away** — remove. Ivan's status TBD — see §7. New boys need photos.)
   - *Regius females* — **Iris** (subadult, young enough to work with) & **Mango** (subadult, handles well), **$50** ea.
   - **Free Starter Kit** — comes **free with every spider purchase** (misting bottle, paintbrush, molting/instar notes). Present as a value-add banner/badge, NOT a purchasable product.
3. **Meet the Mamas** — showcase gallery (NOT for sale) of her wild-caught breeding females: Fern (otiosus), Cleo (audax), and the regius girls (Colette, Demure, Devine, Delight, Dove, Inca, Latte, Lush). Builds trust + shows lineage.
4. **Care Guide** — accurate husbandry (see §4). Includes a **QR code** linking to the printable care sheet.
5. **Shipping & Live Arrival** — FedEx-only rules (see §4).
6. **About** — small hands-on keeper; wild-caught mamas that breed once → **captive-raised** babies; Storm Cloud Hills.
7. **Contact** — inquiry form (routes to Gmail) + stormcloudjumpers@gmail.com + **Facebook** link/share button.
8. **Footer** — logo, nav, Facebook, © year.

**`care-sheet.html`** — print-friendly, single-column version of the care guide. This is the QR code target so buyers can print/save it. (Mom is also typing up her own; this gives her a branded template.)

## 4. Content accuracy — corrections from Mom's note (MUST honor)

- ✅ **"Captive raised"** everywhere — never "captive bred." Mamas are wild-caught (WC), breed once, produce babies through their short lives.
- ✅ Babies = **"slings"** (hobby term).
- ✅ No health-check claims → **"healthy body shape"** (abdomen shape).
- ✅ **Live arrival guaranteed only on overnight hub-to-hub** (MorphMarket covers it). 2-day to-your-door = lower rate, **not** covered, offered spring/fall.
- ✅ **FedEx only** (only legal option) — **no UPS, no USPS**. Ships **Mon–Wed**.
- ✅ otiosus temperament = **Active** ("a little crazy"); enjoy a **playground / enrichment ("dragon lair")** setup.
- ✅ Housing: slings (i3–6) fine in **3×3 cubes**; floor with **soft sphagnum / reptile-safe moss** in case of falls.
- ✅ Feeding: hydei fruit flies for slings; **PBL (peanut beetle larvae)** as a newer great option; crickets/BSFL for larger.
- ✅ Molting: critical at **i5 & i7** — raise humidity; **don't feed until a few days after** they leave the hammock.
- ✅ Remove all fabricated stats/reviews and the placeholder phone/email.
- Future species (not yet available): mustached jumper unlikely; hoped-for **_Paraphidippus fartilis_** (≈ same price).

## 5. Assets pipeline

- Create `scj/assets/` → `brand/` (Nimbus logo variants, hero cards), `spiders/available/`, `spiders/mamas/`, `care/` (QR + diagrams).
- **Resize/optimize** the large iPhone JPEGs (many are 2–4 MB) to web sizes with `sips` (max ~1600px, ~80% quality) so the site loads fast on mobile.
- **Map photos → individuals** using each folder's `names.txt` ordering (e.g., "first 6 = Iris"). Filenames aren't in order, so I'll view them during build to assign the best shot per spider and per gallery.
- Generate a **QR code** PNG pointing to the care sheet URL.
- Pull the 3 otiosus sling photos out of the "Available spoods" PDF for the slings card.

## 6. Tech

- Plain **HTML + CSS + vanilla JS**, no build step — trivial to host on the subdomain and easy to hand off.
- Adapt the existing `SCJ.src/styles.css` as the base (it already nails the palette/type), fixing content and extending for the new sections.
- Fully **responsive** (mobile-first), accessible (alt text, semantic landmarks, keyboard nav), SEO basics (title/description/OG tags using a Nimbus social card), favicon from the logo.
- Lighthouse pass for performance/a11y before done.

## 7. Open items to confirm with Mom

1. **Male roster + photos.** Nashville passed; current boys are **Gully, Noble, Hexx & Magick** but we have **no photos** for them yet — only Nashville (deceased) and Ivan. Need: is **Ivan** still available? Send photos for the new boys. Until then I'll show the males as one "Regius Males — $25" group using available/placeholder imagery and a "more boys coming" note.
2. ~~Inquiry form delivery~~ **RESOLVED:** ship with a **`mailto:` form** now, but build the form so it can POST to a **Google Apps Script web app** bound to her own Gmail (`GmailApp.sendEmail`) — sends from her account, no external service. Ship `form-handler.gs` (ready to deploy) + progressive-enhancement JS that POSTs to the endpoint when configured, else falls back to `mailto:`.

**Resolved:** No MorphMarket · Starter kit free w/ purchase · Species = _Paraphidippus fartilis_ · Facebook = facebook.com/61591317309985 · Contact = stormcloudjumpers@gmail.com

## 8. Build order

1. Scaffold `scj/` (index.html, care-sheet.html, styles.css, script.js, assets/).
2. Assets pipeline: sort/resize photos, extract sling pics, generate QR + favicon/OG.
3. Build hero + nav + Available section (core).
4. Mamas gallery, Care guide, Shipping, About, Contact.
5. care-sheet.html print page.
6. Responsive/a11y/perf polish + final review against Mom's note.