lean-101-website/html_source/README.md

# Lean101 — Website source files (v3.11)

Hi Matt — these are the latest HTML/CSS/JS files for the Lean101 website. v3.11 reorders the Resources sections to lead with Principles. Otherwise unchanged from v3.10.

---

## What's changed in v3.11

**Resources sections reordered.** The order is now **Principles · Techniques · Reading · Templates** (was Templates · Techniques · Principles · Reading). Same content, same scope per section — just leading with the *why* of Lean rather than the downloadable artefacts.

The reasoning: leading with Principles signals that Lean101 is a thinking practice, not a tools-and-templates shop. Most Lean resource sites lead with templates; leading with Principles is a positioning statement that matches the brand voice and the consultancy's emphasis on customised, principle-led engagements over templated work.

The reorder applies consistently across:
- Mega-panel (4 columns, new order)
- Mobile drawer Resources sub-items
- Footer Resources column
- Resources page section blocks (with `.section.alt` alternation re-applied so backgrounds still alternate cleanly)

---

## What's changed in v3.10

**Resources simplified to 4 sections.** The previous 5-section structure (Templates / Tools / Concepts / Reading / Posts) was reduced to a cleaner 4-section structure: **Templates · Techniques · Principles · Reading**. The thinking:

- **Templates** — unchanged in scope: downloadable worksheets, checklists, audits.
- **Techniques** — renamed from "Tools". The previous "Tools" naming overlapped with "Templates" in feel (both sounded artefact-shaped). "Techniques" reframes the section as *the how of Lean* — methods you apply, not artefacts you download. Same content scope (5S, Kanban, VSM, A3, PDCA, Poka-Yoke, Standard Work, Gemba walks), clearer mental model.
- **Principles** — renamed from "Concepts". The previous "Concepts" was a generic content-bucket word; "Principles" is doctrinal and pairs naturally with Techniques as *the why of Lean* — flow, pull, respect for people, capability over dependency, kaizen culture.
- **Reading** — unchanged.
- **Posts removed.** LinkedIn posts will live on LinkedIn and link back to the relevant Resources page (Technique, Principle, Template, or Reading), rather than being archived as duplicates on the site. The resources are the destination; posts are the funnel.

**Mega-panel reverts to 4 columns** at the v3.8 sizing (`min-width: 760px`, no tighter gap needed). Mobile drawer and footer Resources columns updated to match. The Resources page itself now has 4 sections in this order: Templates / Techniques / Principles / Reading, with alternating background.

**Cases as a future fifth section.** When there are 4–5 named, consented case studies to populate it, a fifth Resources section (Cases) will be added. Until then, "we've seen this in practice" mini-illustrations live inside Techniques pages.

---

## What's changed in v3.9

**Secondary anchor row removed.** The slim row of section anchors that sat below the primary nav has been removed entirely (CSS, HTML, media query). It was redundant with the mega-panels and the in-page navigation, and it added unnecessary sticky-height that ate into the page above the fold. All five page files have been updated.

**Mega-panel descriptors rewritten.** The previous descriptors named methods (DMAIC, SHU-HA-RI) which felt over-specific for a navigation surface. New rule: each panel descriptor is one sentence answering *"if I click this, what kind of work is it?"* — no method names, no frameworks, just the shape of the work. New descriptors:

- **Process Excellence** — Diagnosing where work breaks down, designing the fix, and embedding the change with you.
- **Coaching & Training** — Building the capability for your team to lead improvement themselves.
- **Digital Solutions** — Custom dashboards, web apps and automation, built for your specific work.

**Resources expanded from 4 → 5 sections.** Old structure was Tools / Training / Book summaries / Posts. New structure is Templates / Tools / Concepts / Reading / Posts. The thinking:

- **Templates** — what was previously called "Tools": project charters, canvases, worksheets you can download.
- **Tools** — *new section, different scope*: explainer pages for specific Lean/Six Sigma tools (Kanban, Poka-yoke, value stream mapping, fishbone, 5S, Five Whys). One page per tool with history, mechanics, and a worked example.
- **Concepts** — *new section*: explainer pages for the bigger ideas (Toyota Production System, Just-in-Time, Jidoka, the history of Lean, the history of Six Sigma).
- **Reading** — renamed from "Book summaries". Covers both book summaries and articles. Each entry will eventually link out to the source material.
- **Posts** — unchanged in name, slightly broadened: LinkedIn posts plus newsletter and field photos.

The "Training" section was removed; explainer videos will live within Tools and Concepts pages as embedded media when ready, rather than being their own bucket.

**Mega-panel structural changes for 5 columns.** The Resources panel grid switched from 4 columns at 760px min-width to 5 columns at 820px min-width, with a tighter 22px gap and a max-width bumped to 960px so it sits comfortably on a 1100px nav. Each column has a one-line descriptor (no preamble, no method names) and a "Coming soon" tag that you'll swap for a "Learn more →" link once each section has real content.

**Mobile drawer and footer updated to match.** Both now show all 5 Resources sub-items in the new order. The footer Resources column matches; the drawer keeps its full-screen takeover style.

---

## Resources content guidance

Each section has a clear scope so it stays maintainable as you add content:

| Section | What goes in it | What does NOT go here |
|---|---|---|
| **Templates** | Downloadable worksheets, checklists, audits — practical artefacts you save and use | Explainer content (goes in Techniques or Principles) |
| **Techniques** | The *how* of Lean — plain-English explainers for specific methods (5S, Kanban, VSM, A3, PDCA, Poka-Yoke, Standard Work, Gemba walks) | The underlying philosophy (goes in Principles) |
| **Principles** | The *why* of Lean — the philosophy underneath the techniques (flow, pull, respect for people, capability over dependency, kaizen culture) | Specific methods (those go in Techniques) |
| **Reading** | Summaries of books and articles, each linking to the source | LinkedIn posts (those stay on LinkedIn) |

Quick rule of thumb if you're unsure where something goes:
- **"How do I do this?"** → Techniques
- **"Why does this matter?"** → Principles
- **Downloadable** (a file you'd save and use) → Templates
- **Distilled from a book or article** → Reading

---

## Adding new resource cards

The resource card markup is unchanged from v3.8. When you publish real content, replace the empty-state card in that section with a real card.

**For external content** (LinkedIn post, YouTube video, book link, etc.):
```html
<a href="https://linkedin.com/posts/..." class="resource-card" target="_blank" rel="noopener">
  <span class="resource-card-source">LinkedIn</span>
  <h3>The card title goes here.</h3>
  <p>One or two sentences of description.</p>
  <span class="resource-card-cta">Read on LinkedIn <span aria-hidden="true">→</span></span>
</a>
```

**For internal content** (template download, on-site article, tool explainer):
```html
<a href="path/to/content.html" class="resource-card">
  <span class="resource-card-source">Article</span>  <!-- or "Download" -->
  <h3>The card title goes here.</h3>
  <p>One or two sentences of description.</p>
  <span class="resource-card-cta">Read more <span aria-hidden="true">→</span></span>
</a>
```

Source labels by content type:
- **Article** — in-house written content (Reading summaries, Principle explainers, Technique explainers)
- **Download** — template files (PDFs, XLSX, DOCX, etc.)
- **External** — for entries that link out to a book, article, or other off-site source

Always add `rel="noopener"` to any link with `target="_blank"`.

When a section has at least one real card, remove the empty-state card. When the section has its first piece of content, edit the mega-panel's `nav-panel-col-tag` line in each of the 5 page files (replacing the "Coming soon" `<span>` with a "Learn more →" link styled as `nav-panel-col-link`).

---

## What changed in v3.8

**Desktop nav restructured with mega-panels.** The simple text dropdown under "Services" was replaced with a click-only mega-panel containing service descriptions. A second mega-panel was added under a new "Resources" item. Click the chevron to open; click outside or press Escape to close. The chevron rotates 180° while open.

**New `/resources/index.html` page.** Mirrors the visual rhythm of the homepage and service pages — page hero, content sections, CTA, footer.

**"Process Excellence" shortened in nav surfaces.** "Process Excellence & Transformation" is the long form on the page H1, browser title, and body copy. "Process Excellence" is the short form in nav, mega-panel, mobile drawer, and footer.

**Footer expanded with Resources column.** 5 columns: Brand · Services · Resources · Company · Connect.

---

## What changed in v3.7

**CTA wording finalised — every button reads "Let's Talk".** All 17 occurrences of "Start a conversation" across the four pages were swapped to "Let's Talk".

---

## What changed in v3.6 (post-launch feedback)

**Desktop nav simplified.** Top nav was reduced to: *Home* | *Services ▾* | *Contact*. (v3.8 expanded this to include *Resources ▾*.)

**Mobile menu changed from drawer → full-screen takeover.**

**Lever card contrast bumped.** Outcome cards on the homepage got 1px border at 6% opacity plus a stronger shadow.

---

## Site structure (v3.9)

```
index.html                           — Homepage
services/consulting.html             — Process Excellence & Transformation
services/coaching.html               — Coaching & Training
services/digital-solutions.html      — Digital Solutions
resources/index.html                 — Resources (Principles · Techniques · Reading · Templates)
assets/lean101-isotipo.png           — Nav logo
assets/lean101-logotipo.png          — Footer logo / mobile drawer head
```

---

## Things still to do

1. **Wire up "Let's Talk" buttons to a contact form.** Currently they all point to `#contact` (which scrolls to the simplified CTA section). Form should capture name + email + company + what they're improving, and email submissions to Alex.
2. **LinkedIn footer link** — currently `#`, needs the actual URL.
3. **Favicon** — could be generated from the isotipo.
4. **Open Graph / Twitter meta tags** — for clean share previews on social.
5. **Photos** — Matt to flag any that don't render or look wrong, and consider self-hosting.
6. **Resources content** — four sections currently show empty-state cards. As real content is published, replace them following the markup pattern above.