---
name: ghost-bilingual-brand-sites
description: Design, implement, activate, and verify bilingual brand and product websites on Ghost CMS, including custom themes, language switching, conversion routes, and fail-safe motion.
version: 1.0.0
metadata:
  hermes:
    tags: [ghost, website, bilingual, localization, brand, conversion, theme]
---

# Ghost Bilingual Brand Sites

Use when building or redesigning an externally facing Ghost site that needs custom brand expression, multiple languages, product routes, and production verification.

## Core workflow

1. **Audit before designing**
   - Inspect the public page, Ghost status/settings, existing posts/pages, active theme, and source files.
   - Read current approved positioning and product architecture. Separate approved public language from research drafts and hypotheses.
   - Identify the primary conversion route before composing visual sections.

2. **Design the customer journey**
   - Define: traffic source → free utility/result → personalization → first paid offer → recurring offer → deeper products → premium human service.
   - Every homepage section should help recognition, trust, product understanding, or movement to the next step.
   - Avoid filler feature grids, invented proof, and decorative metrics.

3. **Back up and implement**
   - Timestamp-copy the active theme before structural edits.
   - Preserve `{{ghost_head}}` and `{{ghost_foot}}`.
   - Keep the shared shell in `default.hbs`, homepage in `index.hbs`, and usable article/page templates.
   - Store theme-owned images in `assets/images/` and call them with Ghost's `{{asset}}` helper.
   - Keep `package.json` valid, including `author.name` and `author.email`.

4. **Localize completely**
   - Establish which language is primary; the secondary language must remain complete rather than becoming an abbreviated copy.
   - Translate by function and cultural meaning, not mechanically word for word.
   - Include navigation, headings, paragraphs, CTA labels, captions, accessibility labels where useful, and footer.
   - For a compact one-page site, leaf-level `data-ru` / `data-en` attributes are acceptable. Preserve rich markup by translating leaf spans rather than replacing container HTML.
   - Save explicit language choice in `localStorage`, update `<html lang>`, and use browser locale only when no choice exists.
   - For larger libraries, prefer proper localized routes/content over unlimited `data-*` growth.

5. **Activate through Ghost**
   - Package the theme contents as a ZIP.
   - Upload via the authenticated Ghost Admin API theme endpoint when integration credentials exist. Theme upload may activate the update without restarting Ghost.
   - Do not assume inability to write general Ghost settings means theme upload is also unavailable; they are separate API capabilities.

6. **Verify the real public artifact**
   - Fetch the live public URL and confirm HTTP 200, expected page size, unique content markers, and language controls.
   - Open the public URL in a browser, test both languages, verify active state and `<html lang>`, inspect console/resource failures and horizontal overflow.
   - Visually inspect the whole page at desktop and mobile widths.
   - Return the canonical live URL. A query-string cache buster can be offered additionally, never as a substitute.

## Fail-safe progressive enhancement

Core content must remain visible when JavaScript fails. For reveal motion, keep elements visible by default and hide them only after JavaScript explicitly marks the document as motion-ready:

```css
[data-reveal] { opacity: 1; transform: none; }
.motion-ready [data-reveal] { opacity: 0; transform: translateY(28px); }
.motion-ready [data-reveal].visible { opacity: 1; transform: none; }
```

Add `motion-ready` only if the observer is supported and reduced motion is not requested. Include a timeout fallback that makes all reveal elements visible. A visual check showing blank color fields is a release blocker.

## Source-heavy strategy projects

When the website strategy depends on a large course, research, or voice-note corpus:

1. inventory and preserve every source;
2. transcribe/parse and verify completeness;
3. extract repeated rules, audience patterns, creator-resource constraints, customer routes, and monetization mechanisms;
4. distinguish source teaching from the creator's own decisions;
5. show the synthesized model and implementation sequence to the user;
6. obtain approval before rebuilding the final platform and funnel.

See `references/production-checklist.md` for a reusable release checklist.