# exe-2025 Theme Guide

WordPress FSE (Full Site Editing) block theme for Execution Space.

---

## File Structure

```
exe-2025/
├── theme.json              Design tokens, typography, spacing, colours
├── style.css               Theme header + minimal global overrides
├── functions.php           Enqueue scripts/styles, include inc/ files
├── screenshot.png          Theme cover image (880×660px)
│
├── templates/              Page templates
│   ├── index.html          Default / archive template
│   ├── single.html         Single blog post
│   ├── page.html           Default page
│   ├── page-home.html      Homepage (used by "Home" static front page)
│   ├── page-full.html      Full-width page (no sidebar)
│   └── page-landing.html   Landing page (no header/footer)
│
├── parts/                  Reusable template parts
│   ├── header.html         Sticky header — logo + nav + CTA button
│   ├── footer.html         Footer — brand, nav, contact, legal
│   └── post-meta.html      Post date, author, category strip
│
├── inc/                    PHP includes
│   ├── setup.php           Theme support, nav menus, image sizes
│   ├── enqueue.php         CSS/JS enqueue
│   └── block-styles.php    Register custom block style variations
│
└── assets/
    ├── css/
    │   ├── global.css          Base resets, utility classes
    │   ├── components/         Block style overrides (buttons, etc.)
    │   └── layout/             Header, footer, section-specific styles
    └── js/
        └── theme.js            Minimal JS (grain overlay, scroll effects)
```

---

## Design Tokens (theme.json)

### Colour Palette
```
--wp--preset--color--black        #0A0A0A
--wp--preset--color--true-black   #000000
--wp--preset--color--white        #FFFFFF
--wp--preset--color--off-white    #F7F6F2
--wp--preset--color--accent       #FFCD05  ← brand yellow
--wp--preset--color--bg-dark      #1A1A1A
--wp--preset--color--bg-alt       #2B2B2B
--wp--preset--color--text-muted   #7A7A7A
--wp--preset--color--text-light   #F3F3F3
```

### Font Sizes
```
--wp--preset--font-size--2xs      0.75rem
--wp--preset--font-size--xs       0.875rem
--wp--preset--font-size--sm       1rem
--wp--preset--font-size--md       1.125rem
--wp--preset--font-size--lg       1.5rem
--wp--preset--font-size--xl       clamp(1.875rem, 4vw, 3rem)
--wp--preset--font-size--2xl      clamp(2.5rem, 6vw, 4rem)
--wp--preset--font-size--display  clamp(3.25rem, 9vw, 6rem)
```

### Spacing
```
--wp--preset--spacing--xs         0.5rem
--wp--preset--spacing--sm         1rem
--wp--preset--spacing--md         1.5rem
--wp--preset--spacing--lg         2rem
--wp--preset--spacing--xl         3rem
--wp--preset--spacing--2xl        clamp(4.5rem, 9vw, 7.5rem)
--wp--preset--spacing--section    clamp(4.5rem, 9vw, 7.5rem)
```

### Typography
- **Body font:** Figtree (Google Fonts, variable 300–900)
- **Base size:** 1rem / 400 weight / 1.6 line-height
- **H1:** Display size / 800 weight / 1.05 line-height / -0.02em tracking
- **H2:** 2XL / 800 weight / 1.1 line-height / -0.02em tracking
- **H3:** XL / 700 weight / 1.2 line-height / -0.01em tracking

---

## Block Style Variations

Registered in `inc/block-styles.php` via `register_block_style()`.

### Buttons (`core/button`)

| Style name | Class applied | Appearance |
|-----------|--------------|-----------|
| `es-primary` | `is-style-es-primary` | Yellow fill (#FFCD05), black text, no radius |
| `es-outline` | `is-style-es-outline` | Transparent, 2px black border |
| `es-dark` | `is-style-es-dark` | Black fill, yellow text (used on yellow sections) |

### Groups (`core/group`)

| Style name | Class applied | Appearance |
|-----------|--------------|-----------|
| `es-section-dark` | `is-style-es-section-dark` | Dark background section |
| `es-section-yellow` | `is-style-es-section-yellow` | Yellow accent section |

---

## Templates

### `page-home.html`
Three sections:
1. **Hero** — Dark bg (`#0A0A0A`), Display H1 with yellow `<growth>` accent, two CTA buttons
2. **Services strip** — Off-white bg, 4-column layout (Strategy / Design / Execution / Optimisation)
3. **CTA band** — Yellow bg, H2 + dark button, `has-grain` texture overlay

### `single.html`
Post template:
1. `post-meta` template part (date, author, category)
2. Post content (constrained layout)

### `page-landing.html`
No header or footer — for standalone campaign/landing pages.

---

## CSS Conventions

- Utility class `es-label` — small-caps tracking label (e.g. "What we do")
- `has-grain` — adds SVG noise texture overlay to a section
- Section background colours set inline via block editor or `background-color` attribute
- No Tailwind, no build step — plain CSS with custom properties

---

## Adding a New Page Template

1. Create `exe-2025/templates/{template-name}.html`
2. Register in `theme.json` under `customTemplates`:
   ```json
   { "name": "template-name", "title": "Human Label", "postTypes": ["page"] }
   ```
3. In WP Admin, edit the page → Page Attributes → Template → select the new template

---

_Last updated: March 2026_