# eToro Competition Pages — Style Guide & Canonical Template
*Last updated: 2026-03-20 | Owner: Kitt | Builder: Kittoro*

---

## COLLABORATION PROTOCOL

### Architecture Reality
**Kitt** lives on the CE server and holds all materials: source files, assets, pages, styleguide, scripts, deployment.
**Kittoro** lives on the eToro server and is closer to the eToro team's questions and requests — he leads direction based on eToro feedback.

### Communication Flow
```
eToro feedback → Kittoro (receives, interprets, translates)
                      ↓
              Kittoro posts brief to #kittoro-comms 
              using the STANDARD BRIEF FORMAT (below)
                      ↓
              Kitt reads #kittoro-comms, executes
              works on CE server with full file access
                      ↓
              Kitt deploys to staging, posts URL
                      ↓
              Kittoro reviews on staging, relays to eToro
```

### Standard Brief Format (Kittoro → Kitt)
```
BRAND: [brand name]
PAGE: [URL or "new page"]
ACTION: [fix | rebuild | add-section | restyle | new]
CHANGE: [specific description — section name, content, visual]
REFERENCE: [URL or "matches cashapp" or "matches plus500"]
PRIORITY: [high | normal]
```

### Rules
1. **Kittoro does NOT touch the files.** He critiques on staging. Kitt edits.
2. **Kitt does NOT interpret eToro feedback directly.** That comes through Kittoro.
3. **All deployments from Kitt** — Kittoro never touches `/root/.openclaw/workspace/public/`.
4. **After every deploy**: Kitt posts the staging URL in #kittoro-comms. Kittoro confirms receipt.
5. **Canonical template is law.** No section additions without agreement from both.

---

## CRITIQUE OF CURRENT PAGES

### Global Issues (all pages)

| Issue | Severity | Pages Affected |
|-------|----------|---------------|
| Section label format inconsistent (§01 vs §01 — Name vs no-number) | HIGH | All |
| No shared CSS — each page is a snowflake | HIGH | All |
| Section ORDER varies across pages | HIGH | All |
| Section IDs inconsistent (`vs-client` vs `vs-etoro`, `evolution` vs `brand-evolution`) | MEDIUM | All |
| Hero height varies (480px cashapp, 560px others) | MEDIUM | All |
| Inline `style=` on h2/h3 elements instead of classes | MEDIUM | Robinhood |
| CSS class duplication — some pages define `.section-label` differently | MEDIUM | Trading 212, IG Group |
| Missing `class="section"` on some sections (IG Group) | LOW | IG Group |

### Per-Page Critique

#### CashApp — The Reference (821 lines)
**Status: Closest to ideal but lighter than others.**
- ✅ Cleanest CSS architecture
- ✅ Section labels use `§01` format
- ✅ `class="section"` on all sections
- ⚠️ Shortest page — missing Assessment, Verdict in correct positions
- ⚠️ "Brand Book" section name is unique to this page (others call it "Brand Identity")
- ⚠️ Nav pill: `#vs-client` — should be standardized

#### Plus500 (1225 lines)
**Status: Good structure, section count correct, order is canonical.**
- ✅ 13 sections matches canonical spec
- ✅ `§01`–`§13` numbering
- ✅ `class="section"` consistent
- ⚠️ `brand-evolution` section: CSS is slightly different from cashapp
- ⚠️ Image strip section outside section wrapper

#### Trading 212 (1115 lines)
**Status: Structural drift. Section order wrong. Copy Tone and Visual Analysis are unique sections.**
- ❌ Section order wrong: Copy Tone (§03) before Brand Evolution (§04) — breaks canonical flow
- ❌ `vs-etoro` before Social and Campaigns — canonical puts it last
- ❌ `evolution` id (should be `brand-evolution`)
- ❌ `section-label` is a `<div>` not `<p>` — inconsistent with other pages
- ⚠️ No `class="section"` on most sections — bare `<section id="...">` only
- ⚠️ `brand-in-practice` and `layout` use inline `style=` for padding

#### Robinhood (1263 lines)
**Status: Best content depth, worst CSS discipline.**
- ✅ All 13 sections present
- ✅ Correct section order (mostly)
- ❌ ALL h2/h3 elements have inline `style=` declarations — massive duplication
- ❌ Section labels are plain text, no `§` prefix and no number
- ❌ `vs-etoro` id (canonical is `vs-client` — name changes per brand)
- ⚠️ `class="section"` on some sections but not all

#### IG Group (1644 lines) — The Outlier
**Status: Custom one-off. Has extra sections not in canonical. CSS is entirely different.**
- ❌ No `class="section"` on any section — purely id-based
- ❌ Section label format: `01 — Quick Facts` (no `§`)
- ❌ Extra non-canonical section: `freetrade-rebrand` (03b) — breaks numbering
- ❌ Longest page by far (1644 lines) — duplicate content, redundant images
- ❌ CSS has completely different hero implementation (`.image-hero` vs `.hero-block`)
- ❌ `section-with-image`, `two-col`, `three-col` only defined here
- ❌ Brand in Practice is not a `<section class="section">` — it's a mix of divs
- ⚠️ Legitimate reason for extra sections (Freetrade/Koto rebrand is significant) — but needs canonical slot

---

## CANONICAL SECTION STRUCTURE

Every competition page MUST have these sections in this order:

```
§01  — Quick Facts          id="quick-facts"
§02  — Positioning          id="positioning"
§03  — Brand Evolution      id="brand-evolution"
§04  — Color Palette        id="color"
§05  — Typography           id="typography"
[IMAGE BREAK]               id="brand-in-practice"  (no section number, visual only)
§06  — Layout & UX          id="layout"
§07  — Assessment           id="assessment"
§08  — Strategic Verdict    id="verdict"
§09  — Brand Personality    id="personality"
§10  — Social Strategy      id="social"
§11  — Content & Campaign   id="campaigns"
§12  — Audience             id="audience"
§13  — vs eToro             id="vs-client"
```

**Exception sections** (add ONLY when brand has exceptional content):
- `id="brand-extensions"` — e.g. IG Group's Freetrade acquisition
- Insert between §03 and §04 when used. Label: `§03b — [topic]`

---

## STYLE GUIDE

### Typography
```css
--font-display: 'Editorial New', 'Playfair Display', Georgia, serif;
--font-body:    system-ui, -apple-system, sans-serif;

--size-h1:    clamp(32px, 4vw, 52px);
--size-h2:    clamp(22px, 2.5vw, 32px);
--size-body:  16px;
--size-small: 13px;
--size-label: 11px;
```

### Colors
```css
--black:  #0a0a0a;
--white:  #ffffff;
--bg:     #ffffff;
--grey:   #666;
--light:  #999;
--border: #e5e5e5;
--red:    #CC0000;   /* section label accent — CE red */
```

### Layout
```css
--max-w: 1200px;
/* All sections: max-width container, 0 auto, padding 0 40px */
/* Mobile: padding 0 20px */
/* Section padding: 40px 0 */
/* Section separator: border-bottom: 1px solid var(--border) */
```

### Section Label Format
```html
<!-- CANONICAL — always use this exact format -->
<p class="section-label">§01</p>
<h2>Quick Facts</h2>
```

- `§` + zero-padded number only in the label
- Human title goes in `<h2>` separately  
- Label color: `var(--red)`
- Never combine number and title in the same element

### Section Wrapper
```html
<!-- Every numbered section uses this wrapper -->
<section class="section" id="quick-facts">
  <div class="inner">
    <p class="section-label">§01</p>
    <h2>Quick Facts</h2>
    <!-- content -->
  </div>
</section>
```

### Hero Block (canonical)
```html
<div class="hero-block">
  <div class="hero-image">
    <img src="assets/hero.jpg" alt="[Brand] — hero" loading="eager">
  </div>
  <div class="hero-overlay">
    <div class="inner">
      <h1>[Brand Name]</h1>
      <p>[One-line brand description, 15–20 words]</p>
    </div>
  </div>
</div>
```
- Hero height: `480px` (desktop), `280px` (mobile)
- Overlay: `linear-gradient(transparent 0%, rgba(0,0,0,0.75) 100%)`
- Title: white, Editorial New, no letter-spacing
- Subtitle: `rgba(255,255,255,0.7)`, max 680px wide

### Nav Pills
```html
<nav class="section-nav">
  <div class="container">
    <div class="nav-pills">
      <a href="#quick-facts" class="nav-pill active">Facts</a>
      <a href="#positioning" class="nav-pill">Positioning</a>
      <a href="#brand-evolution" class="nav-pill">Evolution</a>
      <a href="#color" class="nav-pill">Color</a>
      <a href="#typography" class="nav-pill">Type</a>
      <a href="#brand-in-practice" class="nav-pill">In Practice</a>
      <a href="#layout" class="nav-pill">Digital</a>
      <a href="#assessment" class="nav-pill">Assessment</a>
      <a href="#verdict" class="nav-pill">Verdict</a>
      <a href="#personality" class="nav-pill">Personality</a>
      <a href="#social" class="nav-pill">Social</a>
      <a href="#campaigns" class="nav-pill">Campaigns</a>
      <a href="#audience" class="nav-pill">Audience</a>
      <a href="#vs-client" class="nav-pill">vs eToro</a>
    </div>
  </div>
</nav>
```
- Nav is sticky, z-index 100
- Background: white, border-bottom: 1px solid var(--border)
- Active pill: background: black, color: white

### Image Components

**Campaign card** (for major campaigns):
```html
<div class="campaign-card">
  <div class="campaign-hero">
    <img loading="lazy" src="assets/campaign.jpg" alt="[Campaign name]">
  </div>
  <div class="campaign-meta">
    <span>[Year]</span>
    <span>[Agency/Platform]</span>
  </div>
  <h3>[Campaign name]</h3>
  <p class="campaign-desc">[Description]</p>
  <div class="campaign-supporting">
    <div class="img-cell"><img loading="lazy" src="assets/c1.jpg" alt=""></div>
    <div class="img-cell"><img loading="lazy" src="assets/c2.jpg" alt=""></div>
    <div class="img-cell"><img loading="lazy" src="assets/c3.jpg" alt=""></div>
  </div>
</div>
```
- Campaign hero: `height: 360px`
- Supporting grid: `3 columns, gap: 2px, aspect-ratio: 16/9`

**Section with image** (text + image side by side):
```html
<div class="section-with-image">
  <div class="section-text">
    <!-- text content -->
  </div>
  <div class="section-image">
    <img loading="lazy" src="assets/image.jpg" alt="">
  </div>
</div>
```
- Grid: `1fr 1fr`, gap 40px
- Image: `aspect-ratio: 4/3`, `object-fit: cover`
- Mobile: stacks to single column

**Image strip** (full-bleed between sections):
```html
<div class="image-strip-section">
  <div class="image-strip">
    <div class="strip-cell"><img loading="lazy" src="assets/s1.jpg" alt=""></div>
    <div class="strip-cell"><img loading="lazy" src="assets/s2.jpg" alt=""></div>
    <!-- ... -->
  </div>
</div>
```
- No padding, full bleed
- Height: `320px`, `object-fit: cover`

### Accordion (for Assessment, Verdict, etc.)
```html
<div class="accordion-section open" id="acc-assessment">
  <div class="accordion-header">
    <span>Assessment</span>
    <span class="icon">+</span>
  </div>
  <div class="accordion-body">
    <!-- content -->
  </div>
</div>
```
- Default state: `open` class on Assessment, Verdict, vs eToro
- Others: collapsed by default

---

## PRIORITY REBUILD ORDER

Based on severity of drift from canonical:

1. **IG Group** — full CSS rewrite, remove duplicate content, add `class="section"`, fix labels
2. **Trading 212** — fix section order (move Copy Tone into Positioning, Visual Analysis into Assessment), fix id names, fix section labels
3. **Robinhood** — strip all inline `style=` from h2/h3, standardize section labels with `§` numbers
4. **Plus500** — minor fixes only (image strip outside wrapper, minor CSS alignment)
5. **CashApp** — update "Brand Book" → "Brand Identity" id, confirm vs-client id

---

## REBUILD EXECUTION PLAN

### Phase 1: Shared CSS File
Create `/root/.openclaw/workspace/public/etoro-competition/assets/competition-page.css`
All pages link to this shared file. Brand-specific overrides (accent color, hero image) remain inline.

### Phase 2: Per-brand Rebuild (Kittoro briefs each brand, Kitt rebuilds)
- Kittoro provides: any missing context, eToro feedback, brand-specific notes
- Kitt rebuilds: using canonical template + shared CSS + existing assets
- Kit posts to staging, Kittoro confirms

### Phase 3: QA Audit
Run `scripts/visual-qa/section-audit.py` on all pages after rebuild.

---
*This document is the source of truth for all competition page structure.*
*Any changes to canonical template require agreement from Kitt + Kittoro + Assaf.*