my-biz/AGENTS.md

# AGENTS.md — my-biz.app Landing Page

Read this file fully before taking any action.

---

## Project Context

Single-page static landing page for **my-biz.app** — a hassle-free all-in-one back-office product built on Odoo Community Edition, targeting NGOs, Startups, Manufacturers, and Restaurants.

| Item | Detail |
|---|---|
| Live page | `index.html` — the only production HTML file |
| Design | Classy dark theme · grey/gold/black · no frameworks |
| Styling | 100% inline `<style>` in `index.html` — no external CSS |
| JavaScript | Inline `<script>` at bottom of `index.html` — no external JS |
| Dependencies | Zero — pure HTML + CSS + vanilla JS |
| Archive | `old/` — previous style explorations (do not touch) |

---

## File Map

```
my-biz/
├── index.html          ← production page (the only file that matters)
├── AGENTS.md           ← this file
├── start               ← dev server launcher
└── old/                ← archived style variants (read-only)
    ├── index-bling.html
    ├── index-cafe.html
    ├── index-classy.html
    ├── index-holiday.html
    ├── index-saas.html
    ├── index-startup.html
    └── index_.html
```

---

## Design System

### CSS Custom Properties (defined in `:root`)

| Token | Value | Usage |
|---|---|---|
| `--bg` | `#191920` | Main page background — dark steel grey |
| `--surf1` | `#202028` | Alternate section background |
| `--card` | `#252530` | Card / modal box background |
| `--lift` | `#2E2E3C` | Card hover state, featured card bg |
| `--border` | `rgba(212,170,80,.22)` | All borders and grid gaps |
| `--grey` | `#68687A` | Muted body text, nav links |
| `--silver` | `#ABABBE` | Secondary text, feature list items |
| `--light` | `#D2D2E0` | `<strong>` inside body copy |
| `--gold` | `#D6AF52` | Primary gold — labels, borders, accents |
| `--gold-hi` | `#F2CE62` | Bright shiny gold — gradient highlight |
| `--gold-lo` | `#8E6C30` | Dark gold — gradient shadow |
| `--gold-glow` | `rgba(212,170,80,.18)` | Box-shadow glow on gold elements |
| `--white` | `#EEEEF4` | Headings, primary text |

**NEVER use raw hex values in HTML or CSS.** Always reference the token.

### Gold Metallic Gradient (static — no animation)

Applied to: nav logo, footer logo, modal title, featured pricing price, pricing badge, `.btn-primary`, featured `.pricing-cta`, `.custom-rate`.

```css
background: linear-gradient(
  135deg,
  var(--gold-lo) 0%,
  var(--gold)    38%,
  var(--gold-hi) 55%,
  var(--gold)    75%,
  var(--gold-lo) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
```

### Typography

| Use | Font | Size |
|---|---|---|
| Headings (`h1`, `h2`, `.nav-logo`, `.footer-logo`, `.modal-title`, `.custom-rate`) | `Georgia, "Times New Roman", serif` | varies |
| Body / UI | `"Segoe UI", system-ui, -apple-system, sans-serif` | 0.85–1.1rem |
| Labels (`.section-label`, `.news-area`, `.pricing-plan`) | system-ui, uppercase, wide tracking | 0.65–0.78rem |

### No Animations Rule

**There are zero `@keyframes` in `index.html`.** Motion is limited to CSS `transition` on hover/focus states only. Do not add any `@keyframes`, `animation`, or scroll-triggered effects.

---

## Page Structure

All sections are in normal document flow. The user scrolls the page. Sections appear in this order:

```
<nav>                   sticky, always visible
<section.hero#home>     100vh, centred, dark radial bg
<section#verticals>     background: var(--surf1)
<section#news>          background: var(--bg)
<section#pricing>       background: var(--surf1)
<section#customization> background: var(--bg)
<footer>                background: #0E0E14, 3px gold top border
<div#modal-overlay>     fixed, shown/hidden by JS
```

### Nav

```
position: sticky; top: 0; z-index: 500; height: 62px;
background: rgba(25,25,32,0.97); backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border);
```

- **Logo** `.nav-logo` — Georgia, shiny gold gradient text.
- **Links** — `#verticals`, `#news`, `#pricing`, `#customization` — scroll to section.
- **CTA** `.nav-cta` `id="open-modal"` — gold border, gold text, fills on hover → **opens modal**.

All sections use `scroll-margin-top: 62px` to offset the sticky nav.

### Hero (`section.hero#home`)

- `min-height: 100vh`, flex column, centred, `text-align: center`
- `background: radial-gradient(ellipse 80% 50% at 50% 0%, #1E1E10 0%, transparent 70%), var(--bg)`
- `.hero-eyebrow` — pill border, gold, uppercase
- `h1` — Georgia, 4.8rem (responsive), white; `<em>` in `var(--gold)`
- `.hero-sub` — silver, 1.1rem, max-width 580px
- `.hero-tagline` — italic, grey
- `.hero-actions` — two buttons:
  - `.btn-primary` `id="open-modal-hero"` → **opens modal**
  - `.btn-secondary` → scrolls to `#verticals`
- `.hero-trust` — tiny grey trust line; `<strong>` in silver

### Verticals (`section#verticals`)

- Background: `var(--surf1)`
- `.verticals-grid` — CSS Grid `auto-fit minmax(220px,1fr)`, `gap: 1px`, grid itself coloured `var(--border)` for hairline gold gaps
- **4 cards** (NGO · Startups · Manufacturing · Restaurants)
- `.vertical-card` — `background: var(--card)`, hover → `var(--lift)`
- `.vertical-card::before` — absolute 2px left bar, shiny gold gradient, `height: 0` → `height: 100%` on hover (transition 0.4s)

Card anatomy:
```
.vertical-icon   emoji, 2rem
.vertical-name   Georgia, white
.vertical-desc   silver, 0.88rem
.vertical-tag    gold, uppercase, border-top separator
```

### News (`section#news`)

- Background: `var(--bg)`
- `.news-grid` — `auto-fit minmax(220px,1fr)`, `gap: 24px`
- **4 cards** (NGO · Startups · Manufacturing · Restaurants)
- `.news-card` — no card bg, `border-top: 1px solid var(--border)`, hover → gold
- Card anatomy: `.news-area` (gold label) · `.news-title` (Georgia) · `.news-teaser` (silver) · `.news-date` (grey)

### Pricing (`section#pricing`)

- Background: `var(--surf1)`
- `.pricing-grid` — `auto-fit minmax(300px,1fr)`, `max-width: 820px`, gold hairline gaps
- **2 cards**: Side Hustle ($214/yr) · On the Rise ($395/yr)

**Plain card** (`.pricing-card`):
- `background: var(--card)`
- CTA: gold border + gold text → fills gold on hover

**Featured card** (`.pricing-card.featured`):
- `background: var(--lift)`
- `box-shadow: 0 0 0 1px var(--gold), 0 0 28px var(--gold-glow)`
- `.pricing-price` — shiny gold gradient text
- `.pricing-badge` — shiny gold gradient bg, dark text
- CTA: shiny gold gradient bg → **opens modal** (`.open-modal`)
- CTA plain card also → **opens modal** (`.open-modal`)

Feature list uses `—` em-dash in gold as bullet (`::before`).

### Customization (`section#customization`)

- Background: `var(--bg)`
- `.custom-grid` — `auto-fit minmax(300px,1fr)`, gold hairline gaps
- **2 cards**: Hire Any Odoo Developer · Our In-House Team
- `.custom-card::after` — 2px gold gradient bar, `scaleX(0)` → `scaleX(1)` on hover
- `.custom-rate` — shiny gold gradient text, Georgia, 1.4rem (`$65 USD / hour`)
- `.custom-link` — gold, uppercase, underline reveals on hover

### Footer

```
background: #0E0E14;
border-top: 3px solid var(--gold);
padding: 72px 8vw 40px;
```

- **Brand column** — logo (shiny gold), tagline (grey), flex: 2
- **3 link columns** — Product · Company · Legal — each `flex: 1`
- `.footer-col h4` — gold, 0.65rem, uppercase, tracked
- `.footer-col a` — grey → gold on hover
- `.footer-bottom` — flex row, grey text, gold rule separator on top

---

## Modal

### Triggers

| Element | ID / Class |
|---|---|
| Nav "Get Started" | `id="open-modal"` |
| Hero "See Plans & Pricing" | `id="open-modal-hero"` |
| Both pricing CTAs | `class="open-modal"` |

All triggers call `openModal()`. The JS attaches listeners on `DOMContentLoaded`.

### Structure

```
#modal-overlay          fixed, inset 0, backdrop-filter blur(14px)
  #modal-box            max-width 480px, var(--card) bg, gold top border
    #modal-close        × button, top-right
    .modal-title        Georgia, shiny gold gradient text
    .modal-subtitle     grey, 0.82rem
    #trial-form
      .modal-field-group  (email)
        .field-label      gold, uppercase, 0.62rem
        input[type=email] .modal-field
      .modal-field-group  (location)
        .field-label
        select.modal-field  custom gold SVG arrow
          option: Boston · Manchester · Mumbai · saopaulo · Meppel · Sydney
      input[hidden] name="product"    value="odoo_19"   ← ALWAYS odoo_19, never change
      input[hidden] name="utm_source" value="homepage"
      input[hidden] name="utm_medium" value="direct"
      input[hidden] name="utm_campaign" value="none"
      input[hidden] name="utm_term"   value=""
      input[hidden] name="utm_content" value=""
      button.modal-submit   "Start Free Trial"
    #modal-confirm        shown after successful POST
      .confirm-title      gold-hi
      .confirm-sub        silver
      button.modal-submit  "Close"  → closeModal()
```

### Webhook

```
POST https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/c25169c6-4234-4b47-8e74-612b9539da0a
Content-Type: multipart/form-data  (FormData)
```

The form POSTs via `fetch()`. Both `.then()` and `.catch()` show the confirmation — the webhook may not return CORS headers.

### Modal CSS Rules (summary)

| Rule | Value |
|---|---|
| Overlay bg | `rgba(14,14,20,.88)` |
| Overlay backdrop | `blur(14px)` |
| Box border-top | `3px solid var(--gold)` |
| Field bg | `rgba(10,10,16,.7)` |
| Field border | `1px solid rgba(212,170,80,.25)` |
| Field focus | `border-color: var(--gold)` |
| Submit bg | shiny gold gradient |
| Submit text | `var(--bg)` (dark) |

### Modal JS Behaviour

- Opens on click of `#open-modal`, `#open-modal-hero`, `.open-modal`
- Closes on: `#modal-close` click · click outside `#modal-box` · `Escape` key
- On close: resets form, re-shows form, hides confirmation, re-enables submit button
- Disables `document.body` scroll while open

---

## Responsive Breakpoints

| Breakpoint | Changes |
|---|---|
| `≤ 768px` | `h1` → 2.8rem · nav gap → 14px · modal padding → 40px 28px |
| `≤ 480px` | `h1` → 2.1rem · section padding → 60px 5vw · nav hides all links except CTA · modal padding → 36px 20px · `.modal-title` → 1.5rem |

---

## Quality Bar

| Concern | Rule |
|---|---|
| Design tokens | NEVER use raw hex values — always use CSS custom properties |
| Animations | NEVER add `@keyframes` — transitions only |
| Dependencies | NEVER add external CSS, JS, or fonts |
| Gold gradient | Always use the 5-stop `135deg` gradient pattern defined above |
| Modal product | `name="product" value="odoo_19"` — never change, never show to user |
| Webhook URL | Never change without explicit instruction |
| Sections | Preserve order: hero → verticals → news → pricing → customization → footer |
| Responsive | Every element must work at 375px, 768px, and 1280px+ |
| Hover states | All interactive elements must have visible hover/focus states in gold |

---

## Git Rules

- ALWAYS work on **`main`** branch.
- Pull before every session:
  ```bash
  git pull origin main
  ```
- Commit message patterns:
  - `content: <short description>` — copy or section changes
  - `fix: <short description>` — bug or visual fixes
  - `feat: <short description>` — new functionality
  - `style: <short description>` — CSS-only changes
- Push immediately after committing — never leave unpushed commits.

---

## File Safety Rules

- **ONLY** edit `index.html` unless explicitly told otherwise.
- NEVER touch files inside `old/`.
- NEVER edit `AGENTS.md` unless the task is explicitly to update it.
- NEVER split CSS into external files.
- NEVER split JS into external files.
- NEVER add a `<link>` to an external stylesheet.
- NEVER add a `<script src="...">` tag.

---

## Execution Workflow

Follow this order for every task:

1. `git pull origin main`
2. Read the relevant section of `index.html` before editing.
3. Apply minimal, targeted edits — do not reformat unrelated code.
4. Validate visually: sticky nav · all 6 sections visible on scroll · modal opens and closes · form submits.
5. Commit with a descriptive message following the pattern above.
6. `git push origin main`

---

## Success Criteria

- `index.html` is valid HTML5 with no external dependencies.
- All CSS tokens are used correctly — no raw hex values.
- No `@keyframes` present anywhere.
- Modal opens from all three trigger points and posts to the correct webhook.
- Product field is always hidden and always `odoo_19`.
- Page scrolls naturally through all sections with sticky nav intact.
- All commits pushed to `main`.

---

## Failure Conditions

- Adding external CSS or JS dependencies.
- Introducing `@keyframes` or scroll-hijacking behaviour.
- Changing the webhook URL without explicit instruction.
- Exposing the product select or changing its value from `odoo_19`.
- Editing files inside `old/`.
- Using raw hex values instead of CSS custom properties.
- Leaving unpushed commits.
- Modifying files outside the scope of the task.