Triple Moon Goddess — Web Style Guide

Design system used across triple-moon-goddess.github.io. Any new page should match this so it drops into the existing site seamlessly. (Source of truth: readings.html.)

Site chrome (nav + footer)

The site no longer runs under Google Sites, so every page carries its own sticky nav and shared footer. Both are generated — never hand-edit them in a page:

  • tools/inject-site-chrome.py is the single source of truth. It injects a self-scoped .tmg-nav right after <body> and a .tmg-footer right before </body>, fenced with TMG-CHROME markers, and replaces those blocks on re-run. Page markup and page CSS are never touched.
  • Nav order (fixed): Home · Video · Readings · Schedule · Practitioner · IPA · Apps · Testimonials · Events · About · Contact. All links root-relative.
  • Footer: Lisa@TripleMoonGoddess.com, /privacy.html, /terms.html, copyright, and the IPA patent-pending line.
  • The legal documents live in this repo and nowhere else — privacy.html and terms.html are the canonical copies (moved out of the tmg-legal repo so there is exactly one version of every page). They are the only pages allowed to carry the business postal address; ADDRESS_EXEMPT in the injector encodes that, and the checker enforces it everywhere else.
  • After adding a page, add it to PAGES in the script, run it, then run python3 tools/check-site-chrome.py — it verifies the chrome, the nav order, the footer lines, that internal links resolve, and the content rules (no “Fremont, CA” outside the legal documents, no newsletter page or link).

Page filenames are the public URLs (/schedule.html, /video.html, …); the old triple-moon-goddess-*-prod.html names are retired.

Fonts (Google Fonts)

  • Cormorant Garamond — display headings, leads, taglines, body-serif. Weights 300–600 + italic. Italic <em> in headings renders in cream ink, not gold.
  • Cinzel — eyebrows, labels, tags, buttons, price rows. Always UPPERCASE, wide letter-spacing (0.16em–0.32em).
  • Inter — base UI body font, weight 300.
Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400
Cinzel:wght@400;500;600
Inter:wght@300;400;500

Color palette (CSS variables)

--gold:        #d4af6a
--gold-bright: #e8c989   /* headings */
--gold-deep:   #b8945a
--ink:         #f5e8d0   /* primary text */
--ink-soft:    #c9b896   /* secondary text */
--bg:          #0a0608   /* near-black cosmic */
--bg-deep:     #050304
--bg-card:     #110a0d
--line:        rgba(212, 175, 106, 0.18)
--line-strong: rgba(212, 175, 106, 0.4)

Signature background

Dark body with two fixed layers:

  • body::before — layered radial gradients (gold glow top-left + bottom-right, dark vignette center).
  • body::after — scattered 1–2px radial-gradient “stars” with a slow twinkle 8s opacity animation (0.7 ↔ 0.4).

Recurring components

  • Eyebrow: Cinzel, uppercase, 0.32em, gold, flanked by ✦ via ::before/::after.
  • H1: Cormorant 400, clamp(2.6rem, 5.5vw, 4.5rem), gold-bright, italic <em> in ink.
  • Ornament divider: 200px gold gradient line with a centered ☾ glyph on the bg.
  • Cards / frames: dark translucent gradient, 1px --line border, backdrop-filter: blur(8px), and decorative corner brackets via ::before/::after (top-left + bottom-right, gold-deep, opacity 0.5).
  • Primary CTA: Cinzel uppercase 0.24em, gradient gold-deep → gold-bright on --bg-deep text; hover brightens + gold glow box-shadow.
  • Glyphs: astrological/celestial unicode — ☾ ☽ ✦ ✧ ⚹ ⚴ etc.
  • Animations: fadeUp (20px rise + fade) staggered by delay; fadeIn for the ornament.

Inclusive imagery (non-negotiable)

  • Never use ♀/♂ (Venus/Mars) or any default male–female pairing to represent a couple or relationship. Lisa and TMG are queer; the site must not assume heterosexual pairings. For couples/synastry, name the people directly and/or use neutral celestial motifs (e.g. two moons ☾ ☽, stars, interlocking rings). This applies to icons, glyphs, illustrations, and stock imagery alike.

Content conventions

  • Reading offers are $25, delivered instantly online, “$25 session credit included” toward a 90-minute consultation with Lisa (the charter’s Taurus-step → Scorpio-descent staircase).
  • Voice: plain, unhurried, “a map rather than a verdict.” No manufactured urgency, no FOMO. Stated once.
  • Footer contact line: Questions before you order? → Lisa@TripleMoonGoddess.com.
  • Pages carry no red test-banner and use live checkout URLs; the separate dev/test page variants are retired.

Checkout / links

  • Live reading checkout pattern: .../reading-checkout?type=<reading_key> (e.g. romantic_reading, archetype_reading).
  • The Relationship Reading promo page (readings.html) points its buttons to https://www.triplemoongoddess.com/relationship.