Updated broken navigation links, added Google Analytics
This commit is contained in:
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"permissions": {
|
||||
"allow": [
|
||||
"Bash(cp 'C:\\\\Users\\\\mattc\\\\lean-101-website\\\\lean101-website\\\\html_source\\\\index.html' 'C:\\\\Users\\\\mattc\\\\lean-101-website\\\\lean101-website\\\\index.html')",
|
||||
"Bash(cp 'C:\\\\Users\\\\mattc\\\\lean-101-website\\\\lean101-website\\\\html_source\\\\services\\\\coaching.html' 'C:\\\\Users\\\\mattc\\\\lean-101-website\\\\lean101-website\\\\services\\\\coaching.html')",
|
||||
"Bash(cp 'C:\\\\Users\\\\mattc\\\\lean-101-website\\\\lean101-website\\\\html_source\\\\services\\\\consulting.html' 'C:\\\\Users\\\\mattc\\\\lean-101-website\\\\lean101-website\\\\services\\\\consulting.html')",
|
||||
"Bash(cp 'C:\\\\Users\\\\mattc\\\\lean-101-website\\\\lean101-website\\\\html_source\\\\services\\\\digital-solutions.html' 'C:\\\\Users\\\\mattc\\\\lean-101-website\\\\lean101-website\\\\services\\\\digital-solutions.html')",
|
||||
"Bash(cp 'C:\\\\Users\\\\mattc\\\\lean-101-website\\\\lean101-website\\\\html_source\\\\resources\\\\index.html' 'C:\\\\Users\\\\mattc\\\\lean-101-website\\\\lean101-website\\\\resources\\\\index.html')",
|
||||
"Bash(cat)",
|
||||
"Bash(python /tmp/gtag_inject.py 'C:\\\\Users\\\\mattc\\\\lean-101-website\\\\lean101-website\\\\index.html' 'C:\\\\Users\\\\mattc\\\\lean-101-website\\\\lean101-website\\\\resources\\\\index.html' 'C:\\\\Users\\\\mattc\\\\lean-101-website\\\\lean101-website\\\\services\\\\coaching.html' 'C:\\\\Users\\\\mattc\\\\lean-101-website\\\\lean101-website\\\\services\\\\consulting.html' 'C:\\\\Users\\\\mattc\\\\lean-101-website\\\\lean101-website\\\\services\\\\digital-solutions.html' 'C:\\\\Users\\\\mattc\\\\lean-101-website\\\\lean101-website\\\\html_source\\\\index.html' 'C:\\\\Users\\\\mattc\\\\lean-101-website\\\\lean101-website\\\\html_source\\\\resources\\\\index.html' 'C:\\\\Users\\\\mattc\\\\lean-101-website\\\\lean101-website\\\\html_source\\\\services\\\\coaching.html' 'C:\\\\Users\\\\mattc\\\\lean-101-website\\\\lean101-website\\\\html_source\\\\services\\\\consulting.html' 'C:\\\\Users\\\\mattc\\\\lean-101-website\\\\lean101-website\\\\html_source\\\\services\\\\digital-solutions.html')"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,166 @@
|
||||
# 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.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,961 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Resources — Lean 101</title>
|
||||
<meta name="description" content="Tools, training, book summaries and posts from Lean 101 — the methods, frameworks and reading that inform the work we do.">
|
||||
<link rel="preconnect" href="https://api.fontshare.com">
|
||||
<link href="https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--blue: #0070c7;
|
||||
--blue-deep: #005aa3;
|
||||
--orange: #ec8b33;
|
||||
--charcoal: #565656;
|
||||
--grey: #efefef;
|
||||
--grey-soft: #f6f7f9;
|
||||
--ink: #1a1a1a;
|
||||
--white: #ffffff;
|
||||
--accent: var(--blue);
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
html { scroll-behavior: smooth; }
|
||||
body {
|
||||
font-family: 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
color: var(--ink);
|
||||
background: var(--white);
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
img { max-width: 100%; display: block; }
|
||||
a { color: inherit; }
|
||||
|
||||
/* Anchor offset so the sticky nav doesn't cover section headings */
|
||||
section[id] { scroll-margin-top: 88px; }
|
||||
|
||||
/* ───────── NAV ───────── */
|
||||
.nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.nav-inner {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 0 28px;
|
||||
height: 68px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.nav-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav-logo img {
|
||||
height: 44px;
|
||||
width: 44px;
|
||||
object-fit: contain;
|
||||
}
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.nav-links > li { position: relative; }
|
||||
.nav-links > li > a {
|
||||
color: var(--ink);
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
opacity: 0.85;
|
||||
transition: opacity 0.2s;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 6px 0;
|
||||
}
|
||||
.nav-links > li > a:hover { opacity: 1; }
|
||||
|
||||
/* Active-page indicator — small accent underline below current page link */
|
||||
.nav-links > li > a.current {
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
}
|
||||
.nav-links > li > a.current::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -4px;
|
||||
height: 2px;
|
||||
border-radius: 2px;
|
||||
background: var(--accent, var(--blue));
|
||||
}
|
||||
|
||||
/* Chevron button — separate from the link, click-only behaviour */
|
||||
.nav-chevron {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
padding: 6px 4px;
|
||||
margin: 0 0 0 2px;
|
||||
cursor: pointer;
|
||||
color: var(--ink);
|
||||
opacity: 0.6;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
transition: opacity 0.2s, transform 0.2s ease;
|
||||
}
|
||||
.nav-chevron:hover { opacity: 1; }
|
||||
.nav-chevron svg { display: block; width: 11px; height: 11px; }
|
||||
.nav-chevron[aria-expanded="true"] {
|
||||
opacity: 1;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* ───── Mega-panel ───── */
|
||||
.nav-panel-wrap {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding-top: 14px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.2s ease, visibility 0.2s;
|
||||
z-index: 200;
|
||||
}
|
||||
.nav-panel-wrap.is-open {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
.nav-panel {
|
||||
background: var(--white);
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
border-radius: 14px;
|
||||
padding: 28px;
|
||||
box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.20),
|
||||
0 6px 16px -6px rgba(0, 0, 0, 0.08);
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
display: grid;
|
||||
gap: 28px;
|
||||
width: max-content;
|
||||
max-width: min(960px, calc(100vw - 56px));
|
||||
transform: translateY(-6px);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
.nav-panel-wrap.is-open .nav-panel { transform: translateY(0); }
|
||||
.nav-panel.is-services {
|
||||
grid-template-columns: repeat(3, minmax(180px, 1fr));
|
||||
min-width: 640px;
|
||||
}
|
||||
.nav-panel.is-resources {
|
||||
grid-template-columns: repeat(4, minmax(160px, 1fr));
|
||||
min-width: 760px;
|
||||
}
|
||||
|
||||
.nav-panel-col { display: flex; flex-direction: column; gap: 6px; }
|
||||
.nav-panel-col > a,
|
||||
.nav-panel-col-head {
|
||||
text-decoration: none;
|
||||
color: var(--ink);
|
||||
}
|
||||
.nav-panel-col-head {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.005em;
|
||||
color: var(--ink);
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
a.nav-panel-col-head:hover { color: var(--blue); }
|
||||
.nav-panel-col-desc {
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
color: rgba(86, 86, 86, 0.85);
|
||||
margin: 0;
|
||||
}
|
||||
.nav-panel-col-link {
|
||||
margin-top: 4px;
|
||||
font-size: 12.5px;
|
||||
font-weight: 500;
|
||||
color: var(--blue);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
text-decoration: none;
|
||||
transition: gap 0.15s ease;
|
||||
}
|
||||
.nav-panel-col-link:hover { gap: 8px; }
|
||||
.nav-panel-col-tag {
|
||||
display: inline-block;
|
||||
margin-top: 4px;
|
||||
font-size: 10.5px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(86, 86, 86, 0.65);
|
||||
}
|
||||
|
||||
|
||||
.nav-cta {
|
||||
background: var(--ink);
|
||||
color: white;
|
||||
padding: 9px 18px;
|
||||
border-radius: 999px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
transition: background 0.2s, transform 0.2s;
|
||||
}
|
||||
.nav-cta:hover {
|
||||
background: var(--blue-deep);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* ─── Hamburger button (mobile only) ─── */
|
||||
.nav-hamburger {
|
||||
display: none;
|
||||
background: transparent;
|
||||
border: 1px solid rgba(0, 0, 0, 0.12);
|
||||
border-radius: 10px;
|
||||
padding: 8px;
|
||||
cursor: pointer;
|
||||
color: var(--ink);
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
margin-left: 12px;
|
||||
}
|
||||
.nav-hamburger:hover {
|
||||
background: var(--grey-soft);
|
||||
border-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.nav-hamburger svg { display: block; width: 22px; height: 22px; }
|
||||
|
||||
/* ─── Mobile menu (full-screen takeover) ─── */
|
||||
.nav-drawer-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: transparent;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
z-index: 99;
|
||||
}
|
||||
.nav-drawer-overlay.is-open { pointer-events: auto; }
|
||||
|
||||
.nav-drawer {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: var(--white);
|
||||
transform: translateY(-100%);
|
||||
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.nav-drawer.is-open { transform: translateY(0); }
|
||||
|
||||
.nav-drawer-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 28px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
.nav-drawer-head img { height: 30px; width: auto; }
|
||||
.nav-drawer-close {
|
||||
background: transparent;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
color: var(--ink);
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
}
|
||||
.nav-drawer-close:hover {
|
||||
background: var(--grey-soft);
|
||||
border-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.nav-drawer-close svg { display: block; width: 20px; height: 20px; }
|
||||
|
||||
.nav-drawer-body {
|
||||
padding: 36px 28px 28px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.nav-drawer ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.nav-drawer-item {
|
||||
display: block;
|
||||
padding: 18px 0;
|
||||
color: var(--ink);
|
||||
text-decoration: none;
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
transition: color 0.15s, padding-left 0.2s ease;
|
||||
}
|
||||
.nav-drawer-item:hover { color: var(--blue); padding-left: 6px; }
|
||||
|
||||
.nav-drawer-group-label {
|
||||
display: block;
|
||||
padding: 28px 0 12px;
|
||||
color: var(--charcoal);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
opacity: 0.7;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
.nav-drawer-subitem {
|
||||
display: block;
|
||||
padding: 16px 0 16px 14px;
|
||||
color: var(--ink);
|
||||
text-decoration: none;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
|
||||
border-left: 3px solid transparent;
|
||||
transition: color 0.15s, border-left-color 0.2s ease, padding-left 0.2s ease;
|
||||
}
|
||||
.nav-drawer-subitem:hover {
|
||||
color: var(--blue);
|
||||
border-left-color: var(--blue);
|
||||
padding-left: 20px;
|
||||
}
|
||||
.nav-drawer-subitem.coaching:hover {
|
||||
color: var(--orange);
|
||||
border-left-color: var(--orange);
|
||||
}
|
||||
|
||||
.nav-drawer-foot {
|
||||
padding: 24px 28px 32px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
.nav-drawer-cta {
|
||||
display: block;
|
||||
text-align: center;
|
||||
background: var(--blue);
|
||||
color: var(--white);
|
||||
padding: 16px 22px;
|
||||
border-radius: 999px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.nav-drawer-cta:hover { background: var(--blue-deep); }
|
||||
|
||||
.nav-drawer-subitem.current {
|
||||
color: var(--blue);
|
||||
border-left-color: var(--blue);
|
||||
padding-left: 20px;
|
||||
}
|
||||
.nav-drawer-subitem.coaching.current {
|
||||
color: var(--orange);
|
||||
border-left-color: var(--orange);
|
||||
}
|
||||
|
||||
body.nav-drawer-locked { overflow: hidden; }
|
||||
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.nav-links { display: none; }
|
||||
.nav-cta { display: none; }
|
||||
.nav-hamburger { display: inline-flex; align-items: center; justify-content: center; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ─── PAGE HERO ─── */
|
||||
.page-hero {
|
||||
padding: 110px 28px 90px;
|
||||
background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
|
||||
}
|
||||
.page-hero-inner { max-width: 900px; margin: 0 auto; text-align: center; }
|
||||
.page-eyebrow {
|
||||
display: inline-block; color: var(--accent); font-size: 13px;
|
||||
font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.page-hero h1 {
|
||||
font-size: clamp(36px, 5.5vw, 64px); font-weight: 600;
|
||||
letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 22px;
|
||||
}
|
||||
.page-hero h1 em {
|
||||
font-style: normal; color: var(--accent);
|
||||
}
|
||||
.page-hero-sub {
|
||||
font-size: clamp(17px, 1.6vw, 20px); color: var(--charcoal);
|
||||
max-width: 720px; margin: 0 auto; line-height: 1.55;
|
||||
}
|
||||
|
||||
/* ─── SECTIONS ─── */
|
||||
.section { padding: 110px 28px; }
|
||||
.section.alt { background: var(--grey-soft); }
|
||||
.section-inner { max-width: 1100px; margin: 0 auto; }
|
||||
.section-head { max-width: 720px; margin-bottom: 48px; }
|
||||
.section-eyebrow {
|
||||
color: var(--blue); font-size: 14px; font-weight: 600;
|
||||
letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 14px;
|
||||
display: block;
|
||||
}
|
||||
.section-title {
|
||||
font-size: clamp(30px, 3.5vw, 42px); font-weight: 600;
|
||||
letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 16px;
|
||||
}
|
||||
.section-lede {
|
||||
font-size: 17px; color: var(--charcoal); line-height: 1.6;
|
||||
}
|
||||
|
||||
/* ─── Resource cards ─── */
|
||||
.resource-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
.resource-card {
|
||||
background: var(--white);
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
border-radius: 14px;
|
||||
padding: 26px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
text-decoration: none;
|
||||
color: var(--ink);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
||||
position: relative;
|
||||
}
|
||||
.resource-card[href]:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: rgba(0, 0, 0, 0.12);
|
||||
box-shadow: 0 12px 28px -12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.resource-card-source {
|
||||
align-self: flex-start;
|
||||
font-size: 11px; font-weight: 600;
|
||||
letter-spacing: 0.08em; text-transform: uppercase;
|
||||
color: rgba(86, 86, 86, 0.7);
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
background: var(--grey-soft);
|
||||
}
|
||||
.resource-card h3 {
|
||||
font-size: 19px; font-weight: 600;
|
||||
letter-spacing: -0.01em; line-height: 1.3;
|
||||
}
|
||||
.resource-card p {
|
||||
font-size: 14.5px; color: var(--charcoal); line-height: 1.55;
|
||||
}
|
||||
.resource-card-cta {
|
||||
margin-top: auto;
|
||||
padding-top: 8px;
|
||||
font-size: 13px; font-weight: 500;
|
||||
color: var(--blue);
|
||||
display: inline-flex; align-items: center; gap: 4px;
|
||||
transition: gap 0.15s ease;
|
||||
}
|
||||
.resource-card[href]:hover .resource-card-cta { gap: 8px; }
|
||||
|
||||
/* Empty-state cards have a softer look */
|
||||
.resource-card.is-empty {
|
||||
background: var(--grey-soft);
|
||||
border-style: dashed;
|
||||
border-color: rgba(0, 0, 0, 0.10);
|
||||
}
|
||||
.resource-card.is-empty:hover {
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.resource-card.is-empty h3 {
|
||||
color: var(--charcoal);
|
||||
}
|
||||
|
||||
/* ─── CTA section ─── */
|
||||
.cta-wrap {
|
||||
padding: 100px 28px;
|
||||
background: var(--ink);
|
||||
color: white;
|
||||
}
|
||||
.cta-card {
|
||||
max-width: 760px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
padding: 60px 40px;
|
||||
}
|
||||
.cta-card h2 {
|
||||
font-size: clamp(30px, 3.5vw, 44px);
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.15;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.cta-card p {
|
||||
font-size: 17px;
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
margin-bottom: 32px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.cta-card .btn-primary {
|
||||
background: var(--blue);
|
||||
color: var(--white);
|
||||
}
|
||||
.cta-card .btn-primary:hover { background: var(--blue-deep); }
|
||||
.btn {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
padding: 14px 26px; border-radius: 999px; font-size: 15px; font-weight: 500;
|
||||
text-decoration: none; transition: all 0.2s; border: none; cursor: pointer;
|
||||
}
|
||||
.btn-arrow { transition: transform 0.2s; }
|
||||
.btn:hover .btn-arrow { transform: translateX(3px); }
|
||||
|
||||
/* ─── FOOTER ─── */
|
||||
.footer {
|
||||
background: #0a0a0a;
|
||||
color: rgba(255,255,255,0.7);
|
||||
padding: 80px 28px 40px;
|
||||
}
|
||||
.footer-inner {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.footer-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
|
||||
gap: 40px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
.footer-grid { grid-template-columns: 1fr 1fr; }
|
||||
}
|
||||
.footer-brand img {
|
||||
max-height: 56px;
|
||||
width: auto;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.footer-brand p {
|
||||
font-size: 14px;
|
||||
color: rgba(255,255,255,0.6);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.footer-col h5 {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--white);
|
||||
margin-bottom: 16px;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.footer-col ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.footer-col a {
|
||||
color: rgba(255,255,255,0.6);
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.footer-col a:hover { color: var(--orange); }
|
||||
.footer-bottom {
|
||||
border-top: 1px solid rgba(255,255,255,0.08);
|
||||
padding-top: 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
font-size: 13px;
|
||||
color: rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.section { padding: 80px 22px; }
|
||||
.page-hero { padding: 80px 22px 60px; }
|
||||
.cta-wrap { padding: 70px 22px; }
|
||||
.cta-card { padding: 40px 24px; }
|
||||
section[id] { scroll-margin-top: 80px; }
|
||||
}
|
||||
</style>
|
||||
<!-- Google tag (gtag.js) -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Z5JJBS491H"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'G-Z5JJBS491H');
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ───── NAV ───── -->
|
||||
<nav class="nav" aria-label="Primary">
|
||||
<div class="nav-inner">
|
||||
<a href="../index.html" class="nav-logo" aria-label="Lean 101 home">
|
||||
<img src="../assets/lean101-isotipo.png" alt="Lean 101">
|
||||
</a>
|
||||
<ul class="nav-links">
|
||||
<li><a href="../index.html">Home</a></li>
|
||||
|
||||
<li class="has-panel">
|
||||
<a href="../index.html#services">Services</a>
|
||||
<button class="nav-chevron" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="nav-panel-services" aria-label="Open Services menu" data-panel-trigger="services">
|
||||
<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 4.5 6 8 9 4.5"/></svg>
|
||||
</button>
|
||||
<div class="nav-panel-wrap" id="nav-panel-services" data-panel="services" role="region" aria-label="Services menu">
|
||||
<div class="nav-panel is-services">
|
||||
<div class="nav-panel-col">
|
||||
<a href="../services/consulting.html" class="nav-panel-col-head">Process Excellence</a>
|
||||
<p class="nav-panel-col-desc">Diagnosing where work breaks down, designing the fix, and embedding the change with you.</p>
|
||||
<a href="../services/consulting.html" class="nav-panel-col-link">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
<div class="nav-panel-col">
|
||||
<a href="../services/coaching.html" class="nav-panel-col-head">Coaching & Training</a>
|
||||
<p class="nav-panel-col-desc">Building the capability for your team to lead improvement themselves.</p>
|
||||
<a href="../services/coaching.html" class="nav-panel-col-link">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
<div class="nav-panel-col">
|
||||
<a href="../services/digital-solutions.html" class="nav-panel-col-head">Digital Solutions</a>
|
||||
<p class="nav-panel-col-desc">Custom dashboards, web apps and automation, built for your specific work.</p>
|
||||
<a href="../services/digital-solutions.html" class="nav-panel-col-link">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="has-panel">
|
||||
<a href="index.html" class="current">Resources</a>
|
||||
<button class="nav-chevron" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="nav-panel-resources" aria-label="Open Resources menu" data-panel-trigger="resources">
|
||||
<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 4.5 6 8 9 4.5"/></svg>
|
||||
</button>
|
||||
<div class="nav-panel-wrap" id="nav-panel-resources" data-panel="resources" role="region" aria-label="Resources menu">
|
||||
<div class="nav-panel is-resources">
|
||||
<div class="nav-panel-col">
|
||||
<a href="#principles" class="nav-panel-col-head">Principles</a>
|
||||
<p class="nav-panel-col-desc">The why of Lean — the philosophy underneath the methods.</p>
|
||||
<span class="nav-panel-col-tag">Coming soon</span>
|
||||
</div>
|
||||
<div class="nav-panel-col">
|
||||
<a href="#techniques" class="nav-panel-col-head">Techniques</a>
|
||||
<p class="nav-panel-col-desc">The how of Lean — specific methods explained in plain terms.</p>
|
||||
<span class="nav-panel-col-tag">Coming soon</span>
|
||||
</div>
|
||||
<div class="nav-panel-col">
|
||||
<a href="#reading" class="nav-panel-col-head">Reading</a>
|
||||
<p class="nav-panel-col-desc">Summaries of the books and articles that shaped how we think.</p>
|
||||
<span class="nav-panel-col-tag">Coming soon</span>
|
||||
</div>
|
||||
<div class="nav-panel-col">
|
||||
<a href="#templates" class="nav-panel-col-head">Templates</a>
|
||||
<p class="nav-panel-col-desc">Worksheets, checklists and audits you can download and use.</p>
|
||||
<span class="nav-panel-col-tag">Coming soon</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li><a href="../index.html#contact">Contact</a></li>
|
||||
</ul>
|
||||
<a href="../index.html#contact" class="nav-cta">Let’s Talk</a>
|
||||
<button class="nav-hamburger" type="button" aria-label="Open menu" aria-expanded="false" aria-controls="nav-drawer">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="3" y1="6" x2="21" y2="6"/>
|
||||
<line x1="3" y1="12" x2="21" y2="12"/>
|
||||
<line x1="3" y1="18" x2="21" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<!-- Mobile drawer + overlay -->
|
||||
<div class="nav-drawer-overlay" data-drawer-overlay aria-hidden="true"></div>
|
||||
<aside class="nav-drawer" id="nav-drawer" aria-label="Mobile navigation" aria-hidden="true">
|
||||
<div class="nav-drawer-head">
|
||||
<img src="../assets/lean101-logotipo.png" alt="Lean 101">
|
||||
<button class="nav-drawer-close" type="button" aria-label="Close menu">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/>
|
||||
<line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<nav class="nav-drawer-body">
|
||||
<ul>
|
||||
<li><a class="nav-drawer-item" href="../index.html">Home</a></li>
|
||||
<li><span class="nav-drawer-group-label">Services</span></li>
|
||||
<li><a class="nav-drawer-subitem" href="../services/consulting.html">Process Excellence</a></li>
|
||||
<li><a class="nav-drawer-subitem coaching" href="../services/coaching.html">Coaching & Training</a></li>
|
||||
<li><a class="nav-drawer-subitem" href="../services/digital-solutions.html">Digital Solutions</a></li>
|
||||
<li><span class="nav-drawer-group-label">Resources</span></li>
|
||||
<li><a class="nav-drawer-subitem" href="#principles">Principles</a></li>
|
||||
<li><a class="nav-drawer-subitem" href="#techniques">Techniques</a></li>
|
||||
<li><a class="nav-drawer-subitem" href="#reading">Reading</a></li>
|
||||
<li><a class="nav-drawer-subitem" href="#templates">Templates</a></li>
|
||||
<li><a class="nav-drawer-item" href="../index.html#contact">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="nav-drawer-foot">
|
||||
<a href="../index.html#contact" class="nav-drawer-cta">Let’s Talk</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- ───── PAGE HERO ───── -->
|
||||
<header class="page-hero">
|
||||
<div class="page-hero-inner">
|
||||
<span class="page-eyebrow">Resources</span>
|
||||
<h1>Tools, methods and the reading <em>behind the work.</em></h1>
|
||||
<p class="page-hero-sub">
|
||||
A growing library of templates, training, book summaries and short posts —
|
||||
the same material we draw on with clients, made available so you can use it on your own.
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- ───── PRINCIPLES ───── -->
|
||||
<section class="section" id="principles">
|
||||
<div class="section-inner">
|
||||
<div class="section-head">
|
||||
<span class="section-eyebrow">Principles</span>
|
||||
<h2 class="section-title">The <em>why</em> of Lean.</h2>
|
||||
<p class="section-lede">
|
||||
The philosophy underneath the techniques — flow, pull, respect for
|
||||
people, capability over dependency, kaizen culture. The ideas that
|
||||
explain why the methods work, and what to hold onto when the methods
|
||||
don’t fit the situation.
|
||||
</p>
|
||||
</div>
|
||||
<div class="resource-grid">
|
||||
<div class="resource-card is-empty">
|
||||
<span class="resource-card-source">Coming soon</span>
|
||||
<h3>Principle explainers are in production.</h3>
|
||||
<p>Long-form pages on the underlying ideas of Lean — what they are, where they came from, and how they show up in real improvement work.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ───── TECHNIQUES ───── -->
|
||||
<section class="section alt" id="techniques">
|
||||
<div class="section-inner">
|
||||
<div class="section-head">
|
||||
<span class="section-eyebrow">Techniques</span>
|
||||
<h2 class="section-title">The <em>how</em> of Lean.</h2>
|
||||
<p class="section-lede">
|
||||
Plain-English explanations of specific methods we use — 5S, Kanban,
|
||||
Value Stream Mapping, A3, PDCA, Poka-Yoke, Standard Work, Gemba walks.
|
||||
One page per technique, with what it is, how to run it, and where it
|
||||
tends to go wrong.
|
||||
</p>
|
||||
</div>
|
||||
<div class="resource-grid">
|
||||
<div class="resource-card is-empty">
|
||||
<span class="resource-card-source">Coming soon</span>
|
||||
<h3>Technique pages in production.</h3>
|
||||
<p>Each page covers one technique end-to-end — the mechanics, the typical pitfalls, and a worked example. The first pages will land here as they’re finished.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ───── READING ───── -->
|
||||
<section class="section" id="reading">
|
||||
<div class="section-inner">
|
||||
<div class="section-head">
|
||||
<span class="section-eyebrow">Reading</span>
|
||||
<h2 class="section-title">Books and articles behind the work.</h2>
|
||||
<p class="section-lede">
|
||||
Distilled summaries of the books and articles that shaped how we think
|
||||
about improvement — what’s still useful, what hasn’t aged
|
||||
well, and where the ideas show up in the work we do today.
|
||||
</p>
|
||||
</div>
|
||||
<div class="resource-grid">
|
||||
<div class="resource-card is-empty">
|
||||
<span class="resource-card-source">Coming soon</span>
|
||||
<h3>First summaries on the way.</h3>
|
||||
<p>Starting with the books that come up most in our work — The Toyota Way, The Goal, Learning to See, Out of the Crisis. Each summary will link out to the source.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ───── TEMPLATES ───── -->
|
||||
<section class="section alt" id="templates">
|
||||
<div class="section-inner">
|
||||
<div class="section-head">
|
||||
<span class="section-eyebrow">Templates</span>
|
||||
<h2 class="section-title">Worksheets, checklists and audits.</h2>
|
||||
<p class="section-lede">
|
||||
Practical artefacts you can download and use on your own work — 5S audit
|
||||
checklists, waste walk worksheets, CI readiness self-assessments, and
|
||||
more as we publish them.
|
||||
</p>
|
||||
</div>
|
||||
<div class="resource-grid">
|
||||
<div class="resource-card is-empty">
|
||||
<span class="resource-card-source">Coming soon</span>
|
||||
<h3>The first templates are on their way.</h3>
|
||||
<p>We’re preparing the first set of templates for download. Follow Lean 101 on LinkedIn to be notified when they go live.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ───── CTA ───── -->
|
||||
<section class="cta-wrap">
|
||||
<div class="cta-card">
|
||||
<h2>Have a problem worth solving?</h2>
|
||||
<p>Tell us a little about your business and what you're looking to improve. We'll get back to you to talk through whether — and how — we can help.</p>
|
||||
<a href="../index.html#contact" class="btn btn-primary">
|
||||
Let’s Talk <span class="btn-arrow">→</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ───── FOOTER ───── -->
|
||||
<footer class="footer">
|
||||
<div class="footer-inner">
|
||||
<div class="footer-grid">
|
||||
<div class="footer-brand">
|
||||
<img src="../assets/lean101-logotipo.png" alt="Lean 101">
|
||||
<p>For businesses that want change to last.</p>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<h5>Services</h5>
|
||||
<ul>
|
||||
<li><a href="../services/consulting.html">Process Excellence</a></li>
|
||||
<li><a href="../services/coaching.html">Coaching & Training</a></li>
|
||||
<li><a href="../services/digital-solutions.html">Digital Solutions</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<h5>Resources</h5>
|
||||
<ul>
|
||||
<li><a href="#principles">Principles</a></li>
|
||||
<li><a href="#techniques">Techniques</a></li>
|
||||
<li><a href="#reading">Reading</a></li>
|
||||
<li><a href="#templates">Templates</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<h5>Company</h5>
|
||||
<ul>
|
||||
<li><a href="../index.html#why">About</a></li>
|
||||
<li><a href="../index.html#process">Approach</a></li>
|
||||
<li><a href="../index.html#contact">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<h5>Connect</h5>
|
||||
<ul>
|
||||
<li><a href="#">LinkedIn</a></li>
|
||||
<li><a href="mailto:hello@lean-101.com">Email</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<span>© 2026 Lean 101. All rights reserved.</span>
|
||||
<span>Based in Melbourne, working worldwide.</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// ─── Mobile drawer (hamburger menu) ───
|
||||
const drawer = document.querySelector('.nav-drawer');
|
||||
const overlay = document.querySelector('[data-drawer-overlay]');
|
||||
const hamburger = document.querySelector('.nav-hamburger');
|
||||
const drawerClose = document.querySelector('.nav-drawer-close');
|
||||
|
||||
function openDrawer() {
|
||||
if (!drawer) return;
|
||||
drawer.classList.add('is-open');
|
||||
drawer.setAttribute('aria-hidden', 'false');
|
||||
overlay.classList.add('is-open');
|
||||
overlay.setAttribute('aria-hidden', 'false');
|
||||
hamburger.setAttribute('aria-expanded', 'true');
|
||||
document.body.classList.add('nav-drawer-locked');
|
||||
}
|
||||
function closeDrawer() {
|
||||
if (!drawer) return;
|
||||
drawer.classList.remove('is-open');
|
||||
drawer.setAttribute('aria-hidden', 'true');
|
||||
overlay.classList.remove('is-open');
|
||||
overlay.setAttribute('aria-hidden', 'true');
|
||||
hamburger.setAttribute('aria-expanded', 'false');
|
||||
document.body.classList.remove('nav-drawer-locked');
|
||||
}
|
||||
|
||||
if (hamburger) hamburger.addEventListener('click', openDrawer);
|
||||
if (drawerClose) drawerClose.addEventListener('click', closeDrawer);
|
||||
if (overlay) overlay.addEventListener('click', closeDrawer);
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && drawer && drawer.classList.contains('is-open')) {
|
||||
closeDrawer();
|
||||
}
|
||||
});
|
||||
document.querySelectorAll('.nav-drawer a').forEach(link => {
|
||||
link.addEventListener('click', closeDrawer);
|
||||
});
|
||||
|
||||
// ─── Desktop mega-panels (Services / Resources) ───
|
||||
const panelTriggers = document.querySelectorAll('[data-panel-trigger]');
|
||||
const panels = document.querySelectorAll('[data-panel]');
|
||||
|
||||
function closeAllPanels() {
|
||||
panels.forEach(p => p.classList.remove('is-open'));
|
||||
panelTriggers.forEach(t => t.setAttribute('aria-expanded', 'false'));
|
||||
}
|
||||
|
||||
panelTriggers.forEach(trigger => {
|
||||
trigger.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const name = trigger.dataset.panelTrigger;
|
||||
const panel = document.querySelector(`[data-panel="${name}"]`);
|
||||
if (!panel) return;
|
||||
const isOpen = panel.classList.contains('is-open');
|
||||
closeAllPanels();
|
||||
if (!isOpen) {
|
||||
panel.classList.add('is-open');
|
||||
trigger.setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!e.target.closest('.has-panel')) {
|
||||
closeAllPanels();
|
||||
}
|
||||
});
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') closeAllPanels();
|
||||
});
|
||||
document.querySelectorAll('.nav-panel a').forEach(link => {
|
||||
link.addEventListener('click', closeAllPanels);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
+15
-119
@@ -1196,63 +1196,6 @@
|
||||
margin-bottom: 36px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.contact-form {
|
||||
text-align: left;
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
max-width: 560px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.contact-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 14px;
|
||||
}
|
||||
@media (max-width: 560px) {
|
||||
.contact-row { grid-template-columns: 1fr; }
|
||||
}
|
||||
.contact-form label {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
color: rgba(255,255,255,0.78);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
.contact-form input,
|
||||
.contact-form textarea {
|
||||
font: inherit;
|
||||
color: white;
|
||||
background: rgba(255,255,255,0.06);
|
||||
border: 1px solid rgba(255,255,255,0.16);
|
||||
border-radius: 10px;
|
||||
padding: 12px 14px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
transition: border-color .15s ease, background .15s ease;
|
||||
}
|
||||
.contact-form input:focus,
|
||||
.contact-form textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--orange, #ec8b33);
|
||||
background: rgba(255,255,255,0.09);
|
||||
}
|
||||
.contact-form textarea { resize: vertical; min-height: 110px; }
|
||||
.contact-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
|
||||
.contact-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.contact-status {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: rgba(255,255,255,0.72);
|
||||
}
|
||||
.contact-status.is-ok { color: #7ee2a8; }
|
||||
.contact-status.is-err { color: #ff9b8a; }
|
||||
.cta-flow {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
@@ -1384,6 +1327,15 @@
|
||||
.section { padding: 80px 22px; }
|
||||
}
|
||||
</style>
|
||||
<!-- Google tag (gtag.js) -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Z5JJBS491H"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'G-Z5JJBS491H');
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -1933,78 +1885,22 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ───── CTA / Contact Form ───── -->
|
||||
<!-- ───── CTA ───── -->
|
||||
<section class="cta-wrap" id="contact">
|
||||
<div class="cta-card">
|
||||
<div class="cta-inner">
|
||||
<h2>Let's find <em>your</em> first improvement.</h2>
|
||||
<p>Tell us a little about your business and what you're looking to improve. We'll get back to you to talk through whether — and how — we can help.</p>
|
||||
|
||||
<form id="contact-form" class="contact-form" action="/api/contact" method="POST" novalidate>
|
||||
<div class="contact-row">
|
||||
<label>
|
||||
<span>Name</span>
|
||||
<input type="text" name="name" autocomplete="name" required />
|
||||
</label>
|
||||
<label>
|
||||
<span>Email</span>
|
||||
<input type="email" name="email" autocomplete="email" required />
|
||||
</label>
|
||||
</div>
|
||||
<label>
|
||||
<span>Company</span>
|
||||
<input type="text" name="company" autocomplete="organization" />
|
||||
</label>
|
||||
<label>
|
||||
<span>What are you looking to improve?</span>
|
||||
<textarea name="message" rows="4" required></textarea>
|
||||
</label>
|
||||
<input type="text" name="website" class="contact-hp" tabindex="-1" autocomplete="off" aria-hidden="true" />
|
||||
<div class="contact-actions">
|
||||
<button type="submit" class="btn btn-on-dark">
|
||||
Send <span class="btn-arrow">→</span>
|
||||
</button>
|
||||
<p class="contact-status" id="contact-status" role="status" aria-live="polite"></p>
|
||||
</div>
|
||||
</form>
|
||||
<div class="hero-ctas">
|
||||
<a href="#" class="btn btn-on-dark">
|
||||
Let’s Talk <span class="btn-arrow">→</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var form = document.getElementById('contact-form');
|
||||
if (!form) return;
|
||||
var status = document.getElementById('contact-status');
|
||||
form.addEventListener('submit', function (e) {
|
||||
e.preventDefault();
|
||||
status.textContent = 'Sending…';
|
||||
status.className = 'contact-status';
|
||||
var data = new FormData(form);
|
||||
fetch(form.action, {
|
||||
method: 'POST',
|
||||
body: data,
|
||||
headers: { 'Accept': 'application/json' }
|
||||
})
|
||||
.then(function (r) { return r.json().then(function (j) { return { ok: r.ok, body: j }; }); })
|
||||
.then(function (res) {
|
||||
if (res.ok) {
|
||||
form.reset();
|
||||
status.textContent = 'Thanks — we’ll be in touch shortly.';
|
||||
status.className = 'contact-status is-ok';
|
||||
} else {
|
||||
status.textContent = (res.body && res.body.error) || 'Something went wrong. Please try again.';
|
||||
status.className = 'contact-status is-err';
|
||||
}
|
||||
})
|
||||
.catch(function () {
|
||||
status.textContent = 'Network error. Please try again.';
|
||||
status.className = 'contact-status is-err';
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- ───── FOOTER — orange Logotipo (no tagline), tagline removed ───── -->
|
||||
<footer class="footer">
|
||||
<div class="footer-inner">
|
||||
|
||||
@@ -595,6 +595,15 @@
|
||||
section[id] { scroll-margin-top: 80px; }
|
||||
}
|
||||
</style>
|
||||
<!-- Google tag (gtag.js) -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Z5JJBS491H"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'G-Z5JJBS491H');
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
+358
-144
@@ -34,99 +34,191 @@
|
||||
img { max-width: 100%; display: block; }
|
||||
a { color: inherit; }
|
||||
|
||||
/* ─── NAV (matches homepage) ─── */
|
||||
/* ───────── NAV ───────── */
|
||||
.nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.nav-inner {
|
||||
max-width: 1200px; margin: 0 auto; padding: 0 28px; height: 68px;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 0 28px;
|
||||
height: 68px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.nav-logo { display: flex; align-items: center; text-decoration: none; }
|
||||
.nav-logo img { height: 44px; width: 44px; object-fit: contain; }
|
||||
.nav-links { display: flex; gap: 32px; list-style: none; }
|
||||
.nav-links > li { position: relative; }
|
||||
.nav-links a {
|
||||
color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500;
|
||||
opacity: 0.85; transition: opacity 0.2s; display: inline-flex; align-items: center; gap: 4px;
|
||||
}
|
||||
.nav-links a:hover { opacity: 1; }
|
||||
.nav-links a.current { opacity: 1; color: var(--orange); }
|
||||
.nav-links .has-dropdown > a::after {
|
||||
content: ''; width: 8px; height: 8px;
|
||||
border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
|
||||
transform: rotate(45deg) translate(-2px, -2px); margin-left: 2px; transition: transform 0.2s;
|
||||
}
|
||||
.nav-links .has-dropdown:hover > a::after {
|
||||
transform: rotate(225deg) translate(-2px, -2px);
|
||||
}
|
||||
.nav-dropdown {
|
||||
position: absolute;
|
||||
top: calc(100% + 6px);
|
||||
left: 0;
|
||||
min-width: 240px;
|
||||
background: var(--white);
|
||||
border: 1px solid rgba(0,0,0,0.06);
|
||||
border-radius: 12px;
|
||||
padding: 8px;
|
||||
box-shadow: 0 16px 40px -12px rgba(0,0,0,0.18), 0 4px 10px -4px rgba(0,0,0,0.06);
|
||||
list-style: none;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-6px);
|
||||
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
|
||||
z-index: 200;
|
||||
}
|
||||
.nav-links .has-dropdown:hover .nav-dropdown,
|
||||
.nav-links .has-dropdown:focus-within .nav-dropdown {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
}
|
||||
/* Invisible bridge so cursor can travel from nav item to dropdown */
|
||||
.nav-links .has-dropdown::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 12px;
|
||||
}
|
||||
.nav-dropdown li { display: block; }
|
||||
.nav-dropdown a {
|
||||
display: block;
|
||||
padding: 10px 14px;
|
||||
border-radius: 8px;
|
||||
.nav-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
transition: background 0.15s ease, color 0.15s ease;
|
||||
opacity: 1;
|
||||
}
|
||||
.nav-logo img {
|
||||
height: 44px;
|
||||
width: 44px;
|
||||
object-fit: contain;
|
||||
}
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.nav-links > li { position: relative; }
|
||||
.nav-links > li > a {
|
||||
color: var(--ink);
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.005em;
|
||||
opacity: 0.85;
|
||||
transition: opacity 0.2s;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 6px 0;
|
||||
}
|
||||
.nav-dropdown a::after { display: none; }
|
||||
.nav-dropdown a:hover {
|
||||
background: var(--grey-soft);
|
||||
color: var(--blue);
|
||||
.nav-links > li > a:hover { opacity: 1; }
|
||||
|
||||
/* Active-page indicator — small accent underline below current page link */
|
||||
.nav-links > li > a.current {
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
}
|
||||
.nav-dropdown a.current {
|
||||
background: var(--grey-soft);
|
||||
color: var(--orange);
|
||||
font-weight: 600;
|
||||
.nav-links > li > a.current::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -4px;
|
||||
height: 2px;
|
||||
border-radius: 2px;
|
||||
background: var(--accent, var(--blue));
|
||||
}
|
||||
|
||||
/* Chevron button — separate from the link, click-only behaviour */
|
||||
.nav-chevron {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
padding: 6px 4px;
|
||||
margin: 0 0 0 2px;
|
||||
cursor: pointer;
|
||||
color: var(--ink);
|
||||
opacity: 0.6;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
transition: opacity 0.2s, transform 0.2s ease;
|
||||
}
|
||||
.nav-chevron:hover { opacity: 1; }
|
||||
.nav-chevron svg { display: block; width: 11px; height: 11px; }
|
||||
.nav-chevron[aria-expanded="true"] {
|
||||
opacity: 1;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* ───── Mega-panel ───── */
|
||||
.nav-panel-wrap {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding-top: 14px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.2s ease, visibility 0.2s;
|
||||
z-index: 200;
|
||||
}
|
||||
.nav-panel-wrap.is-open {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
.nav-panel {
|
||||
background: var(--white);
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
border-radius: 14px;
|
||||
padding: 28px;
|
||||
box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.20),
|
||||
0 6px 16px -6px rgba(0, 0, 0, 0.08);
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
display: grid;
|
||||
gap: 28px;
|
||||
width: max-content;
|
||||
max-width: min(960px, calc(100vw - 56px));
|
||||
transform: translateY(-6px);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
.nav-panel-wrap.is-open .nav-panel { transform: translateY(0); }
|
||||
.nav-panel.is-services {
|
||||
grid-template-columns: repeat(3, minmax(180px, 1fr));
|
||||
min-width: 640px;
|
||||
}
|
||||
.nav-panel.is-resources {
|
||||
grid-template-columns: repeat(4, minmax(160px, 1fr));
|
||||
min-width: 760px;
|
||||
}
|
||||
|
||||
.nav-panel-col { display: flex; flex-direction: column; gap: 6px; }
|
||||
.nav-panel-col > a,
|
||||
.nav-panel-col-head {
|
||||
text-decoration: none;
|
||||
color: var(--ink);
|
||||
}
|
||||
.nav-panel-col-head {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.005em;
|
||||
color: var(--ink);
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
a.nav-panel-col-head:hover { color: var(--blue); }
|
||||
.nav-panel-col-desc {
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
color: rgba(86, 86, 86, 0.85);
|
||||
margin: 0;
|
||||
}
|
||||
.nav-panel-col-link {
|
||||
margin-top: 4px;
|
||||
font-size: 12.5px;
|
||||
font-weight: 500;
|
||||
color: var(--blue);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
text-decoration: none;
|
||||
transition: gap 0.15s ease;
|
||||
}
|
||||
.nav-panel-col-link:hover { gap: 8px; }
|
||||
.nav-panel-col-tag {
|
||||
display: inline-block;
|
||||
margin-top: 4px;
|
||||
font-size: 10.5px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(86, 86, 86, 0.65);
|
||||
}
|
||||
|
||||
|
||||
.nav-cta {
|
||||
background: var(--ink); color: white; padding: 9px 18px; border-radius: 999px;
|
||||
font-size: 13px; font-weight: 500; text-decoration: none; transition: background 0.2s;
|
||||
background: var(--ink);
|
||||
color: white;
|
||||
padding: 9px 18px;
|
||||
border-radius: 999px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
transition: background 0.2s, transform 0.2s;
|
||||
}
|
||||
.nav-cta:hover {
|
||||
background: var(--blue-deep);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.nav-cta:hover { background: var(--blue); }
|
||||
|
||||
/* ─── Hamburger button (mobile only) ─── */
|
||||
.nav-hamburger {
|
||||
@@ -146,52 +238,45 @@
|
||||
}
|
||||
.nav-hamburger svg { display: block; width: 22px; height: 22px; }
|
||||
|
||||
/* ─── Mobile drawer overlay ─── */
|
||||
/* ─── Mobile menu (full-screen takeover) ─── */
|
||||
.nav-drawer-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
background: transparent;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s ease;
|
||||
z-index: 99;
|
||||
}
|
||||
.nav-drawer-overlay.is-open {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.nav-drawer-overlay.is-open { pointer-events: auto; }
|
||||
|
||||
/* ─── Mobile drawer (slides in from right) ─── */
|
||||
.nav-drawer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: min(320px, 85vw);
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: var(--white);
|
||||
box-shadow: -8px 0 30px -10px rgba(0, 0, 0, 0.15);
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
transform: translateY(-100%);
|
||||
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.nav-drawer.is-open { transform: translateX(0); }
|
||||
.nav-drawer.is-open { transform: translateY(0); }
|
||||
|
||||
.nav-drawer-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 24px;
|
||||
padding: 20px 28px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
.nav-drawer-head img { height: 28px; width: auto; }
|
||||
.nav-drawer-head img { height: 30px; width: auto; }
|
||||
.nav-drawer-close {
|
||||
background: transparent;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 10px;
|
||||
padding: 8px;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
color: var(--ink);
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
@@ -200,9 +285,14 @@
|
||||
background: var(--grey-soft);
|
||||
border-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.nav-drawer-close svg { display: block; width: 18px; height: 18px; }
|
||||
.nav-drawer-close svg { display: block; width: 20px; height: 20px; }
|
||||
|
||||
.nav-drawer-body { padding: 16px 0; flex: 1; }
|
||||
.nav-drawer-body {
|
||||
padding: 36px 28px 28px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.nav-drawer ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
@@ -210,48 +300,51 @@
|
||||
}
|
||||
.nav-drawer-item {
|
||||
display: block;
|
||||
padding: 14px 24px;
|
||||
padding: 18px 0;
|
||||
color: var(--ink);
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
border-left: 3px solid transparent;
|
||||
transition: background 0.15s, border-color 0.15s, color 0.15s;
|
||||
}
|
||||
.nav-drawer-item:hover {
|
||||
background: var(--grey-soft);
|
||||
border-left-color: var(--blue);
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
transition: color 0.15s, padding-left 0.2s ease;
|
||||
}
|
||||
.nav-drawer-item:hover { color: var(--blue); padding-left: 6px; }
|
||||
|
||||
.nav-drawer-group-label {
|
||||
display: block;
|
||||
padding: 18px 24px 8px;
|
||||
padding: 28px 0 12px;
|
||||
color: var(--charcoal);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.1em;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
opacity: 0.7;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
.nav-drawer-subitem {
|
||||
display: block;
|
||||
padding: 12px 24px 12px 36px;
|
||||
padding: 16px 0 16px 14px;
|
||||
color: var(--ink);
|
||||
text-decoration: none;
|
||||
font-size: 15px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
|
||||
border-left: 3px solid transparent;
|
||||
transition: background 0.15s, border-color 0.15s;
|
||||
transition: color 0.15s, border-left-color 0.2s ease, padding-left 0.2s ease;
|
||||
}
|
||||
.nav-drawer-subitem:hover {
|
||||
background: var(--grey-soft);
|
||||
color: var(--blue);
|
||||
border-left-color: var(--blue);
|
||||
padding-left: 20px;
|
||||
}
|
||||
.nav-drawer-subitem.coaching:hover {
|
||||
color: var(--orange);
|
||||
border-left-color: var(--orange);
|
||||
}
|
||||
.nav-drawer-subitem.coaching:hover { border-left-color: var(--orange); }
|
||||
.nav-drawer-subitem.current { background: rgba(0,112,199,0.06); border-left-color: var(--blue); }
|
||||
.nav-drawer-subitem.coaching.current { background: rgba(236,139,51,0.06); border-left-color: var(--orange); }
|
||||
|
||||
.nav-drawer-foot {
|
||||
padding: 20px 24px 28px;
|
||||
padding: 24px 28px 32px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
.nav-drawer-cta {
|
||||
@@ -259,17 +352,28 @@
|
||||
text-align: center;
|
||||
background: var(--blue);
|
||||
color: var(--white);
|
||||
padding: 14px 22px;
|
||||
padding: 16px 22px;
|
||||
border-radius: 999px;
|
||||
font-size: 15px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.nav-drawer-cta:hover { background: var(--blue-deep); }
|
||||
|
||||
.nav-drawer-subitem.current {
|
||||
color: var(--blue);
|
||||
border-left-color: var(--blue);
|
||||
padding-left: 20px;
|
||||
}
|
||||
.nav-drawer-subitem.coaching.current {
|
||||
color: var(--orange);
|
||||
border-left-color: var(--orange);
|
||||
}
|
||||
|
||||
body.nav-drawer-locked { overflow: hidden; }
|
||||
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.nav-links { display: none; }
|
||||
.nav-cta { display: none; }
|
||||
@@ -1162,7 +1266,7 @@
|
||||
.footer { background: var(--ink); color: white; padding: 60px 28px 28px; }
|
||||
.footer-inner { max-width: 1200px; margin: 0 auto; }
|
||||
.footer-grid {
|
||||
display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px;
|
||||
display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px;
|
||||
}
|
||||
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
|
||||
.footer-brand img { max-height: 56px; width: auto; margin-bottom: 18px; }
|
||||
@@ -1485,35 +1589,88 @@
|
||||
.engagement-accordion-deliverables { margin-top: 12px; }
|
||||
}
|
||||
</style>
|
||||
<!-- Google tag (gtag.js) -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Z5JJBS491H"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'G-Z5JJBS491H');
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ───── NAV ───── -->
|
||||
<nav class="nav">
|
||||
<nav class="nav" aria-label="Primary">
|
||||
<div class="nav-inner">
|
||||
<a href="../index.html" class="nav-logo" aria-label="Lean 101 home">
|
||||
<img src="../assets/lean101-isotipo.png" alt="Lean 101">
|
||||
</a>
|
||||
<ul class="nav-links">
|
||||
<li class="has-dropdown">
|
||||
<li><a href="../index.html">Home</a></li>
|
||||
|
||||
<li class="has-panel">
|
||||
<a href="../index.html#services" class="current">Services</a>
|
||||
<ul class="nav-dropdown" role="menu">
|
||||
<li role="none">
|
||||
<a href="consulting.html" role="menuitem">Process Excellence & Transformation</a>
|
||||
</li>
|
||||
<li role="none">
|
||||
<a href="coaching.html" class="current" role="menuitem">Coaching & Training</a>
|
||||
</li>
|
||||
<li role="none">
|
||||
<a href="digital-solutions.html" role="menuitem">Digital Solutions</a>
|
||||
</li>
|
||||
</ul>
|
||||
<button class="nav-chevron" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="nav-panel-services" aria-label="Open Services menu" data-panel-trigger="services">
|
||||
<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 4.5 6 8 9 4.5"/></svg>
|
||||
</button>
|
||||
<div class="nav-panel-wrap" id="nav-panel-services" data-panel="services" role="region" aria-label="Services menu">
|
||||
<div class="nav-panel is-services">
|
||||
<div class="nav-panel-col">
|
||||
<a href="consulting.html" class="nav-panel-col-head">Process Excellence</a>
|
||||
<p class="nav-panel-col-desc">Diagnosing where work breaks down, designing the fix, and embedding the change with you.</p>
|
||||
<a href="consulting.html" class="nav-panel-col-link">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
<div class="nav-panel-col">
|
||||
<a href="coaching.html" class="nav-panel-col-head">Coaching & Training</a>
|
||||
<p class="nav-panel-col-desc">Building the capability for your team to lead improvement themselves.</p>
|
||||
<a href="coaching.html" class="nav-panel-col-link">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
<div class="nav-panel-col">
|
||||
<a href="digital-solutions.html" class="nav-panel-col-head">Digital Solutions</a>
|
||||
<p class="nav-panel-col-desc">Custom dashboards, web apps and automation, built for your specific work.</p>
|
||||
<a href="digital-solutions.html" class="nav-panel-col-link">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li><a href="../index.html#process">How it works</a></li>
|
||||
<li><a href="../index.html#why">Why Lean 101</a></li>
|
||||
|
||||
<li class="has-panel">
|
||||
<a href="../resources/index.html">Resources</a>
|
||||
<button class="nav-chevron" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="nav-panel-resources" aria-label="Open Resources menu" data-panel-trigger="resources">
|
||||
<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 4.5 6 8 9 4.5"/></svg>
|
||||
</button>
|
||||
<div class="nav-panel-wrap" id="nav-panel-resources" data-panel="resources" role="region" aria-label="Resources menu">
|
||||
<div class="nav-panel is-resources">
|
||||
<div class="nav-panel-col">
|
||||
<a href="../resources/index.html#principles" class="nav-panel-col-head">Principles</a>
|
||||
<p class="nav-panel-col-desc">The why of Lean — the philosophy underneath the methods.</p>
|
||||
<span class="nav-panel-col-tag">Coming soon</span>
|
||||
</div>
|
||||
<div class="nav-panel-col">
|
||||
<a href="../resources/index.html#techniques" class="nav-panel-col-head">Techniques</a>
|
||||
<p class="nav-panel-col-desc">The how of Lean — specific methods explained in plain terms.</p>
|
||||
<span class="nav-panel-col-tag">Coming soon</span>
|
||||
</div>
|
||||
<div class="nav-panel-col">
|
||||
<a href="../resources/index.html#reading" class="nav-panel-col-head">Reading</a>
|
||||
<p class="nav-panel-col-desc">Summaries of the books and articles that shaped how we think.</p>
|
||||
<span class="nav-panel-col-tag">Coming soon</span>
|
||||
</div>
|
||||
<div class="nav-panel-col">
|
||||
<a href="../resources/index.html#templates" class="nav-panel-col-head">Templates</a>
|
||||
<p class="nav-panel-col-desc">Worksheets, checklists and audits you can download and use.</p>
|
||||
<span class="nav-panel-col-tag">Coming soon</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li><a href="../index.html#contact">Contact</a></li>
|
||||
</ul>
|
||||
<a href="../index.html#contact" class="nav-cta">Book a call</a>
|
||||
<a href="../index.html#contact" class="nav-cta">Let’s Talk</a>
|
||||
<!-- Hamburger menu button — mobile only -->
|
||||
<button class="nav-hamburger" type="button" aria-label="Open menu" aria-expanded="false" aria-controls="nav-drawer">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="3" y1="6" x2="21" y2="6"/>
|
||||
@@ -1524,6 +1681,7 @@
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<!-- Mobile drawer + overlay -->
|
||||
<div class="nav-drawer-overlay" data-drawer-overlay aria-hidden="true"></div>
|
||||
<aside class="nav-drawer" id="nav-drawer" aria-label="Mobile navigation" aria-hidden="true">
|
||||
@@ -1538,17 +1696,21 @@
|
||||
</div>
|
||||
<nav class="nav-drawer-body">
|
||||
<ul>
|
||||
<li><a class="nav-drawer-item" href="../index.html">Home</a></li>
|
||||
<li><span class="nav-drawer-group-label">Services</span></li>
|
||||
<li><a class="nav-drawer-subitem" href="consulting.html">Process Excellence & Transformation</a></li>
|
||||
<li><a class="nav-drawer-subitem" href="consulting.html">Process Excellence</a></li>
|
||||
<li><a class="nav-drawer-subitem coaching current" href="coaching.html">Coaching & Training</a></li>
|
||||
<li><a class="nav-drawer-subitem" href="digital-solutions.html">Digital Solutions</a></li>
|
||||
<li><a class="nav-drawer-item" href="../index.html#process">How it works</a></li>
|
||||
<li><a class="nav-drawer-item" href="../index.html#why">Why Lean 101</a></li>
|
||||
<li><span class="nav-drawer-group-label">Resources</span></li>
|
||||
<li><a class="nav-drawer-subitem" href="../resources/index.html#principles">Principles</a></li>
|
||||
<li><a class="nav-drawer-subitem" href="../resources/index.html#techniques">Techniques</a></li>
|
||||
<li><a class="nav-drawer-subitem" href="../resources/index.html#reading">Reading</a></li>
|
||||
<li><a class="nav-drawer-subitem" href="../resources/index.html#templates">Templates</a></li>
|
||||
<li><a class="nav-drawer-item" href="../index.html#contact">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="nav-drawer-foot">
|
||||
<a href="../index.html#contact" class="nav-drawer-cta">Book a call</a>
|
||||
<a href="../index.html#contact" class="nav-drawer-cta">Let’s Talk</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
@@ -1563,7 +1725,7 @@
|
||||
</p>
|
||||
<div class="page-hero-ctas">
|
||||
<a href="../index.html#contact" class="btn btn-primary">
|
||||
Book a free intro call <span class="btn-arrow">→</span>
|
||||
Let’s Talk <span class="btn-arrow">→</span>
|
||||
</a>
|
||||
<a href="#approach" class="btn btn-secondary">See how it works</a>
|
||||
</div>
|
||||
@@ -1923,12 +2085,12 @@
|
||||
<div class="cta-card">
|
||||
<div class="cta-inner">
|
||||
<h2>Let's find <em>your</em> first improvement.</h2>
|
||||
<p>Start with a free 30-minute intro call. If it's a fit, we'll schedule a 1-hour site visit to walk your operation together — and from there we'll scope a tailored partnership.</p>
|
||||
<div class="page-hero-ctas">
|
||||
<a href="#" class="btn btn-on-dark">
|
||||
Book a free intro call <span class="btn-arrow">→</span>
|
||||
<p>Tell us a little about your business and what you're looking to improve. We'll get back to you to talk through whether — and how — we can help.</p>
|
||||
|
||||
<div class="hero-ctas">
|
||||
<a href="../index.html#contact" class="btn btn-on-dark">
|
||||
Let’s Talk <span class="btn-arrow">→</span>
|
||||
</a>
|
||||
<a href="mailto:hello@lean-101.com" class="btn btn-ghost-dark">hello@lean-101.com</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1945,11 +2107,20 @@
|
||||
<div class="footer-col">
|
||||
<h5>Services</h5>
|
||||
<ul>
|
||||
<li><a href="consulting.html">Consulting</a></li>
|
||||
<li><a href="consulting.html">Process Excellence</a></li>
|
||||
<li><a href="coaching.html">Coaching & Training</a></li>
|
||||
<li><a href="digital-solutions.html">Digital Solutions</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<h5>Resources</h5>
|
||||
<ul>
|
||||
<li><a href="../resources/index.html#principles">Principles</a></li>
|
||||
<li><a href="../resources/index.html#techniques">Techniques</a></li>
|
||||
<li><a href="../resources/index.html#reading">Reading</a></li>
|
||||
<li><a href="../resources/index.html#templates">Templates</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<h5>Company</h5>
|
||||
<ul>
|
||||
@@ -2025,6 +2196,49 @@
|
||||
document.querySelectorAll('.nav-drawer a').forEach(link => {
|
||||
link.addEventListener('click', closeDrawer);
|
||||
});
|
||||
|
||||
// ─── Desktop mega-panels (Services / Resources) ───
|
||||
// Click-only behaviour: chevron toggles its panel, clicking outside or
|
||||
// pressing Escape closes any open panel. Clicking the link text itself
|
||||
// (not the chevron) navigates as normal — chevron is a separate trigger.
|
||||
const panelTriggers = document.querySelectorAll('[data-panel-trigger]');
|
||||
const panels = document.querySelectorAll('[data-panel]');
|
||||
|
||||
function closeAllPanels() {
|
||||
panels.forEach(p => p.classList.remove('is-open'));
|
||||
panelTriggers.forEach(t => t.setAttribute('aria-expanded', 'false'));
|
||||
}
|
||||
|
||||
panelTriggers.forEach(trigger => {
|
||||
trigger.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const name = trigger.dataset.panelTrigger;
|
||||
const panel = document.querySelector(`[data-panel="${name}"]`);
|
||||
if (!panel) return;
|
||||
const isOpen = panel.classList.contains('is-open');
|
||||
closeAllPanels();
|
||||
if (!isOpen) {
|
||||
panel.classList.add('is-open');
|
||||
trigger.setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Click outside any panel closes panels
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!e.target.closest('.has-panel')) {
|
||||
closeAllPanels();
|
||||
}
|
||||
});
|
||||
// Escape closes panels
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') closeAllPanels();
|
||||
});
|
||||
// Clicking a link inside a panel closes it (so navigation feels clean)
|
||||
document.querySelectorAll('.nav-panel a').forEach(link => {
|
||||
link.addEventListener('click', closeAllPanels);
|
||||
});
|
||||
// ─── Example card outcome reveal animation ───
|
||||
// Each card's outcome values fade in and slide up when the card scrolls into view.
|
||||
const exampleCards = document.querySelectorAll('.example-card');
|
||||
|
||||
+358
-144
@@ -34,99 +34,191 @@
|
||||
img { max-width: 100%; display: block; }
|
||||
a { color: inherit; }
|
||||
|
||||
/* ─── NAV (matches homepage) ─── */
|
||||
/* ───────── NAV ───────── */
|
||||
.nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.nav-inner {
|
||||
max-width: 1200px; margin: 0 auto; padding: 0 28px; height: 68px;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 0 28px;
|
||||
height: 68px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.nav-logo { display: flex; align-items: center; text-decoration: none; }
|
||||
.nav-logo img { height: 44px; width: 44px; object-fit: contain; }
|
||||
.nav-links { display: flex; gap: 32px; list-style: none; }
|
||||
.nav-links > li { position: relative; }
|
||||
.nav-links a {
|
||||
color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500;
|
||||
opacity: 0.85; transition: opacity 0.2s; display: inline-flex; align-items: center; gap: 4px;
|
||||
}
|
||||
.nav-links a:hover { opacity: 1; }
|
||||
.nav-links a.current { opacity: 1; color: var(--blue); }
|
||||
.nav-links .has-dropdown > a::after {
|
||||
content: ''; width: 8px; height: 8px;
|
||||
border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
|
||||
transform: rotate(45deg) translate(-2px, -2px); margin-left: 2px; transition: transform 0.2s;
|
||||
}
|
||||
.nav-links .has-dropdown:hover > a::after {
|
||||
transform: rotate(225deg) translate(-2px, -2px);
|
||||
}
|
||||
.nav-dropdown {
|
||||
position: absolute;
|
||||
top: calc(100% + 6px);
|
||||
left: 0;
|
||||
min-width: 240px;
|
||||
background: var(--white);
|
||||
border: 1px solid rgba(0,0,0,0.06);
|
||||
border-radius: 12px;
|
||||
padding: 8px;
|
||||
box-shadow: 0 16px 40px -12px rgba(0,0,0,0.18), 0 4px 10px -4px rgba(0,0,0,0.06);
|
||||
list-style: none;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-6px);
|
||||
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
|
||||
z-index: 200;
|
||||
}
|
||||
.nav-links .has-dropdown:hover .nav-dropdown,
|
||||
.nav-links .has-dropdown:focus-within .nav-dropdown {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
}
|
||||
/* Invisible bridge so cursor can travel from nav item to dropdown */
|
||||
.nav-links .has-dropdown::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 12px;
|
||||
}
|
||||
.nav-dropdown li { display: block; }
|
||||
.nav-dropdown a {
|
||||
display: block;
|
||||
padding: 10px 14px;
|
||||
border-radius: 8px;
|
||||
.nav-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
transition: background 0.15s ease, color 0.15s ease;
|
||||
opacity: 1;
|
||||
}
|
||||
.nav-logo img {
|
||||
height: 44px;
|
||||
width: 44px;
|
||||
object-fit: contain;
|
||||
}
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.nav-links > li { position: relative; }
|
||||
.nav-links > li > a {
|
||||
color: var(--ink);
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.005em;
|
||||
opacity: 0.85;
|
||||
transition: opacity 0.2s;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 6px 0;
|
||||
}
|
||||
.nav-dropdown a::after { display: none; }
|
||||
.nav-dropdown a:hover {
|
||||
background: var(--grey-soft);
|
||||
color: var(--blue);
|
||||
.nav-links > li > a:hover { opacity: 1; }
|
||||
|
||||
/* Active-page indicator — small accent underline below current page link */
|
||||
.nav-links > li > a.current {
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
}
|
||||
.nav-dropdown a.current {
|
||||
background: var(--grey-soft);
|
||||
color: var(--blue);
|
||||
font-weight: 600;
|
||||
.nav-links > li > a.current::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -4px;
|
||||
height: 2px;
|
||||
border-radius: 2px;
|
||||
background: var(--accent, var(--blue));
|
||||
}
|
||||
|
||||
/* Chevron button — separate from the link, click-only behaviour */
|
||||
.nav-chevron {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
padding: 6px 4px;
|
||||
margin: 0 0 0 2px;
|
||||
cursor: pointer;
|
||||
color: var(--ink);
|
||||
opacity: 0.6;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
transition: opacity 0.2s, transform 0.2s ease;
|
||||
}
|
||||
.nav-chevron:hover { opacity: 1; }
|
||||
.nav-chevron svg { display: block; width: 11px; height: 11px; }
|
||||
.nav-chevron[aria-expanded="true"] {
|
||||
opacity: 1;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* ───── Mega-panel ───── */
|
||||
.nav-panel-wrap {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding-top: 14px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.2s ease, visibility 0.2s;
|
||||
z-index: 200;
|
||||
}
|
||||
.nav-panel-wrap.is-open {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
.nav-panel {
|
||||
background: var(--white);
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
border-radius: 14px;
|
||||
padding: 28px;
|
||||
box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.20),
|
||||
0 6px 16px -6px rgba(0, 0, 0, 0.08);
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
display: grid;
|
||||
gap: 28px;
|
||||
width: max-content;
|
||||
max-width: min(960px, calc(100vw - 56px));
|
||||
transform: translateY(-6px);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
.nav-panel-wrap.is-open .nav-panel { transform: translateY(0); }
|
||||
.nav-panel.is-services {
|
||||
grid-template-columns: repeat(3, minmax(180px, 1fr));
|
||||
min-width: 640px;
|
||||
}
|
||||
.nav-panel.is-resources {
|
||||
grid-template-columns: repeat(4, minmax(160px, 1fr));
|
||||
min-width: 760px;
|
||||
}
|
||||
|
||||
.nav-panel-col { display: flex; flex-direction: column; gap: 6px; }
|
||||
.nav-panel-col > a,
|
||||
.nav-panel-col-head {
|
||||
text-decoration: none;
|
||||
color: var(--ink);
|
||||
}
|
||||
.nav-panel-col-head {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.005em;
|
||||
color: var(--ink);
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
a.nav-panel-col-head:hover { color: var(--blue); }
|
||||
.nav-panel-col-desc {
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
color: rgba(86, 86, 86, 0.85);
|
||||
margin: 0;
|
||||
}
|
||||
.nav-panel-col-link {
|
||||
margin-top: 4px;
|
||||
font-size: 12.5px;
|
||||
font-weight: 500;
|
||||
color: var(--blue);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
text-decoration: none;
|
||||
transition: gap 0.15s ease;
|
||||
}
|
||||
.nav-panel-col-link:hover { gap: 8px; }
|
||||
.nav-panel-col-tag {
|
||||
display: inline-block;
|
||||
margin-top: 4px;
|
||||
font-size: 10.5px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(86, 86, 86, 0.65);
|
||||
}
|
||||
|
||||
|
||||
.nav-cta {
|
||||
background: var(--ink); color: white; padding: 9px 18px; border-radius: 999px;
|
||||
font-size: 13px; font-weight: 500; text-decoration: none; transition: background 0.2s;
|
||||
background: var(--ink);
|
||||
color: white;
|
||||
padding: 9px 18px;
|
||||
border-radius: 999px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
transition: background 0.2s, transform 0.2s;
|
||||
}
|
||||
.nav-cta:hover {
|
||||
background: var(--blue-deep);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.nav-cta:hover { background: var(--blue); }
|
||||
|
||||
/* ─── Hamburger button (mobile only) ─── */
|
||||
.nav-hamburger {
|
||||
@@ -146,52 +238,45 @@
|
||||
}
|
||||
.nav-hamburger svg { display: block; width: 22px; height: 22px; }
|
||||
|
||||
/* ─── Mobile drawer overlay ─── */
|
||||
/* ─── Mobile menu (full-screen takeover) ─── */
|
||||
.nav-drawer-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
background: transparent;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s ease;
|
||||
z-index: 99;
|
||||
}
|
||||
.nav-drawer-overlay.is-open {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.nav-drawer-overlay.is-open { pointer-events: auto; }
|
||||
|
||||
/* ─── Mobile drawer (slides in from right) ─── */
|
||||
.nav-drawer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: min(320px, 85vw);
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: var(--white);
|
||||
box-shadow: -8px 0 30px -10px rgba(0, 0, 0, 0.15);
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
transform: translateY(-100%);
|
||||
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.nav-drawer.is-open { transform: translateX(0); }
|
||||
.nav-drawer.is-open { transform: translateY(0); }
|
||||
|
||||
.nav-drawer-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 24px;
|
||||
padding: 20px 28px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
.nav-drawer-head img { height: 28px; width: auto; }
|
||||
.nav-drawer-head img { height: 30px; width: auto; }
|
||||
.nav-drawer-close {
|
||||
background: transparent;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 10px;
|
||||
padding: 8px;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
color: var(--ink);
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
@@ -200,9 +285,14 @@
|
||||
background: var(--grey-soft);
|
||||
border-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.nav-drawer-close svg { display: block; width: 18px; height: 18px; }
|
||||
.nav-drawer-close svg { display: block; width: 20px; height: 20px; }
|
||||
|
||||
.nav-drawer-body { padding: 16px 0; flex: 1; }
|
||||
.nav-drawer-body {
|
||||
padding: 36px 28px 28px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.nav-drawer ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
@@ -210,48 +300,51 @@
|
||||
}
|
||||
.nav-drawer-item {
|
||||
display: block;
|
||||
padding: 14px 24px;
|
||||
padding: 18px 0;
|
||||
color: var(--ink);
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
border-left: 3px solid transparent;
|
||||
transition: background 0.15s, border-color 0.15s, color 0.15s;
|
||||
}
|
||||
.nav-drawer-item:hover {
|
||||
background: var(--grey-soft);
|
||||
border-left-color: var(--blue);
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
transition: color 0.15s, padding-left 0.2s ease;
|
||||
}
|
||||
.nav-drawer-item:hover { color: var(--blue); padding-left: 6px; }
|
||||
|
||||
.nav-drawer-group-label {
|
||||
display: block;
|
||||
padding: 18px 24px 8px;
|
||||
padding: 28px 0 12px;
|
||||
color: var(--charcoal);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.1em;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
opacity: 0.7;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
.nav-drawer-subitem {
|
||||
display: block;
|
||||
padding: 12px 24px 12px 36px;
|
||||
padding: 16px 0 16px 14px;
|
||||
color: var(--ink);
|
||||
text-decoration: none;
|
||||
font-size: 15px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
|
||||
border-left: 3px solid transparent;
|
||||
transition: background 0.15s, border-color 0.15s;
|
||||
transition: color 0.15s, border-left-color 0.2s ease, padding-left 0.2s ease;
|
||||
}
|
||||
.nav-drawer-subitem:hover {
|
||||
background: var(--grey-soft);
|
||||
color: var(--blue);
|
||||
border-left-color: var(--blue);
|
||||
padding-left: 20px;
|
||||
}
|
||||
.nav-drawer-subitem.coaching:hover {
|
||||
color: var(--orange);
|
||||
border-left-color: var(--orange);
|
||||
}
|
||||
.nav-drawer-subitem.coaching:hover { border-left-color: var(--orange); }
|
||||
.nav-drawer-subitem.current { background: rgba(0,112,199,0.06); border-left-color: var(--blue); }
|
||||
.nav-drawer-subitem.coaching.current { background: rgba(236,139,51,0.06); border-left-color: var(--orange); }
|
||||
|
||||
.nav-drawer-foot {
|
||||
padding: 20px 24px 28px;
|
||||
padding: 24px 28px 32px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
.nav-drawer-cta {
|
||||
@@ -259,17 +352,28 @@
|
||||
text-align: center;
|
||||
background: var(--blue);
|
||||
color: var(--white);
|
||||
padding: 14px 22px;
|
||||
padding: 16px 22px;
|
||||
border-radius: 999px;
|
||||
font-size: 15px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.nav-drawer-cta:hover { background: var(--blue-deep); }
|
||||
|
||||
.nav-drawer-subitem.current {
|
||||
color: var(--blue);
|
||||
border-left-color: var(--blue);
|
||||
padding-left: 20px;
|
||||
}
|
||||
.nav-drawer-subitem.coaching.current {
|
||||
color: var(--orange);
|
||||
border-left-color: var(--orange);
|
||||
}
|
||||
|
||||
body.nav-drawer-locked { overflow: hidden; }
|
||||
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.nav-links { display: none; }
|
||||
.nav-cta { display: none; }
|
||||
@@ -1029,7 +1133,7 @@
|
||||
.footer { background: var(--ink); color: white; padding: 60px 28px 28px; }
|
||||
.footer-inner { max-width: 1200px; margin: 0 auto; }
|
||||
.footer-grid {
|
||||
display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px;
|
||||
display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px;
|
||||
}
|
||||
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
|
||||
.footer-brand img { max-height: 56px; width: auto; margin-bottom: 18px; }
|
||||
@@ -1352,35 +1456,88 @@
|
||||
.engagement-accordion-deliverables { margin-top: 12px; }
|
||||
}
|
||||
</style>
|
||||
<!-- Google tag (gtag.js) -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Z5JJBS491H"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'G-Z5JJBS491H');
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ───── NAV ───── -->
|
||||
<nav class="nav">
|
||||
<nav class="nav" aria-label="Primary">
|
||||
<div class="nav-inner">
|
||||
<a href="../index.html" class="nav-logo" aria-label="Lean 101 home">
|
||||
<img src="../assets/lean101-isotipo.png" alt="Lean 101">
|
||||
</a>
|
||||
<ul class="nav-links">
|
||||
<li class="has-dropdown">
|
||||
<li><a href="../index.html">Home</a></li>
|
||||
|
||||
<li class="has-panel">
|
||||
<a href="../index.html#services" class="current">Services</a>
|
||||
<ul class="nav-dropdown" role="menu">
|
||||
<li role="none">
|
||||
<a href="consulting.html" class="current" role="menuitem">Process Excellence & Transformation</a>
|
||||
</li>
|
||||
<li role="none">
|
||||
<a href="coaching.html" role="menuitem">Coaching & Training</a>
|
||||
</li>
|
||||
<li role="none">
|
||||
<a href="digital-solutions.html" role="menuitem">Digital Solutions</a>
|
||||
</li>
|
||||
</ul>
|
||||
<button class="nav-chevron" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="nav-panel-services" aria-label="Open Services menu" data-panel-trigger="services">
|
||||
<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 4.5 6 8 9 4.5"/></svg>
|
||||
</button>
|
||||
<div class="nav-panel-wrap" id="nav-panel-services" data-panel="services" role="region" aria-label="Services menu">
|
||||
<div class="nav-panel is-services">
|
||||
<div class="nav-panel-col">
|
||||
<a href="consulting.html" class="nav-panel-col-head">Process Excellence</a>
|
||||
<p class="nav-panel-col-desc">Diagnosing where work breaks down, designing the fix, and embedding the change with you.</p>
|
||||
<a href="consulting.html" class="nav-panel-col-link">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
<div class="nav-panel-col">
|
||||
<a href="coaching.html" class="nav-panel-col-head">Coaching & Training</a>
|
||||
<p class="nav-panel-col-desc">Building the capability for your team to lead improvement themselves.</p>
|
||||
<a href="coaching.html" class="nav-panel-col-link">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
<div class="nav-panel-col">
|
||||
<a href="digital-solutions.html" class="nav-panel-col-head">Digital Solutions</a>
|
||||
<p class="nav-panel-col-desc">Custom dashboards, web apps and automation, built for your specific work.</p>
|
||||
<a href="digital-solutions.html" class="nav-panel-col-link">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li><a href="../index.html#process">How it works</a></li>
|
||||
<li><a href="../index.html#why">Why Lean 101</a></li>
|
||||
|
||||
<li class="has-panel">
|
||||
<a href="../resources/index.html">Resources</a>
|
||||
<button class="nav-chevron" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="nav-panel-resources" aria-label="Open Resources menu" data-panel-trigger="resources">
|
||||
<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 4.5 6 8 9 4.5"/></svg>
|
||||
</button>
|
||||
<div class="nav-panel-wrap" id="nav-panel-resources" data-panel="resources" role="region" aria-label="Resources menu">
|
||||
<div class="nav-panel is-resources">
|
||||
<div class="nav-panel-col">
|
||||
<a href="../resources/index.html#principles" class="nav-panel-col-head">Principles</a>
|
||||
<p class="nav-panel-col-desc">The why of Lean — the philosophy underneath the methods.</p>
|
||||
<span class="nav-panel-col-tag">Coming soon</span>
|
||||
</div>
|
||||
<div class="nav-panel-col">
|
||||
<a href="../resources/index.html#techniques" class="nav-panel-col-head">Techniques</a>
|
||||
<p class="nav-panel-col-desc">The how of Lean — specific methods explained in plain terms.</p>
|
||||
<span class="nav-panel-col-tag">Coming soon</span>
|
||||
</div>
|
||||
<div class="nav-panel-col">
|
||||
<a href="../resources/index.html#reading" class="nav-panel-col-head">Reading</a>
|
||||
<p class="nav-panel-col-desc">Summaries of the books and articles that shaped how we think.</p>
|
||||
<span class="nav-panel-col-tag">Coming soon</span>
|
||||
</div>
|
||||
<div class="nav-panel-col">
|
||||
<a href="../resources/index.html#templates" class="nav-panel-col-head">Templates</a>
|
||||
<p class="nav-panel-col-desc">Worksheets, checklists and audits you can download and use.</p>
|
||||
<span class="nav-panel-col-tag">Coming soon</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li><a href="../index.html#contact">Contact</a></li>
|
||||
</ul>
|
||||
<a href="../index.html#contact" class="nav-cta">Book a call</a>
|
||||
<a href="../index.html#contact" class="nav-cta">Let’s Talk</a>
|
||||
<!-- Hamburger menu button — mobile only -->
|
||||
<button class="nav-hamburger" type="button" aria-label="Open menu" aria-expanded="false" aria-controls="nav-drawer">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="3" y1="6" x2="21" y2="6"/>
|
||||
@@ -1391,6 +1548,7 @@
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<!-- Mobile drawer + overlay -->
|
||||
<div class="nav-drawer-overlay" data-drawer-overlay aria-hidden="true"></div>
|
||||
<aside class="nav-drawer" id="nav-drawer" aria-label="Mobile navigation" aria-hidden="true">
|
||||
@@ -1405,17 +1563,21 @@
|
||||
</div>
|
||||
<nav class="nav-drawer-body">
|
||||
<ul>
|
||||
<li><a class="nav-drawer-item" href="../index.html">Home</a></li>
|
||||
<li><span class="nav-drawer-group-label">Services</span></li>
|
||||
<li><a class="nav-drawer-subitem current" href="consulting.html">Process Excellence & Transformation</a></li>
|
||||
<li><a class="nav-drawer-subitem current" href="consulting.html">Process Excellence</a></li>
|
||||
<li><a class="nav-drawer-subitem coaching" href="coaching.html">Coaching & Training</a></li>
|
||||
<li><a class="nav-drawer-subitem" href="digital-solutions.html">Digital Solutions</a></li>
|
||||
<li><a class="nav-drawer-item" href="../index.html#process">How it works</a></li>
|
||||
<li><a class="nav-drawer-item" href="../index.html#why">Why Lean 101</a></li>
|
||||
<li><span class="nav-drawer-group-label">Resources</span></li>
|
||||
<li><a class="nav-drawer-subitem" href="../resources/index.html#principles">Principles</a></li>
|
||||
<li><a class="nav-drawer-subitem" href="../resources/index.html#techniques">Techniques</a></li>
|
||||
<li><a class="nav-drawer-subitem" href="../resources/index.html#reading">Reading</a></li>
|
||||
<li><a class="nav-drawer-subitem" href="../resources/index.html#templates">Templates</a></li>
|
||||
<li><a class="nav-drawer-item" href="../index.html#contact">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="nav-drawer-foot">
|
||||
<a href="../index.html#contact" class="nav-drawer-cta">Book a call</a>
|
||||
<a href="../index.html#contact" class="nav-drawer-cta">Let’s Talk</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
@@ -1430,7 +1592,7 @@
|
||||
</p>
|
||||
<div class="page-hero-ctas">
|
||||
<a href="../index.html#contact" class="btn btn-primary">
|
||||
Book a free intro call <span class="btn-arrow">→</span>
|
||||
Let’s Talk <span class="btn-arrow">→</span>
|
||||
</a>
|
||||
<a href="#approach" class="btn btn-secondary">See how it works</a>
|
||||
</div>
|
||||
@@ -1756,12 +1918,12 @@
|
||||
<div class="cta-card">
|
||||
<div class="cta-inner">
|
||||
<h2>Let's find <em>your</em> first improvement.</h2>
|
||||
<p>Start with a free 30-minute intro call. If it's a fit, we'll schedule a 1-hour site visit to walk your operation together — and from there we'll scope a tailored partnership.</p>
|
||||
<div class="page-hero-ctas">
|
||||
<a href="#" class="btn btn-on-dark">
|
||||
Book a free intro call <span class="btn-arrow">→</span>
|
||||
<p>Tell us a little about your business and what you're looking to improve. We'll get back to you to talk through whether — and how — we can help.</p>
|
||||
|
||||
<div class="hero-ctas">
|
||||
<a href="../index.html#contact" class="btn btn-on-dark">
|
||||
Let’s Talk <span class="btn-arrow">→</span>
|
||||
</a>
|
||||
<a href="mailto:hello@lean-101.com" class="btn btn-ghost-dark">hello@lean-101.com</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1778,11 +1940,20 @@
|
||||
<div class="footer-col">
|
||||
<h5>Services</h5>
|
||||
<ul>
|
||||
<li><a href="consulting.html">Consulting</a></li>
|
||||
<li><a href="consulting.html">Process Excellence</a></li>
|
||||
<li><a href="coaching.html">Coaching & Training</a></li>
|
||||
<li><a href="digital-solutions.html">Digital Solutions</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<h5>Resources</h5>
|
||||
<ul>
|
||||
<li><a href="../resources/index.html#principles">Principles</a></li>
|
||||
<li><a href="../resources/index.html#techniques">Techniques</a></li>
|
||||
<li><a href="../resources/index.html#reading">Reading</a></li>
|
||||
<li><a href="../resources/index.html#templates">Templates</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<h5>Company</h5>
|
||||
<ul>
|
||||
@@ -1858,6 +2029,49 @@
|
||||
document.querySelectorAll('.nav-drawer a').forEach(link => {
|
||||
link.addEventListener('click', closeDrawer);
|
||||
});
|
||||
|
||||
// ─── Desktop mega-panels (Services / Resources) ───
|
||||
// Click-only behaviour: chevron toggles its panel, clicking outside or
|
||||
// pressing Escape closes any open panel. Clicking the link text itself
|
||||
// (not the chevron) navigates as normal — chevron is a separate trigger.
|
||||
const panelTriggers = document.querySelectorAll('[data-panel-trigger]');
|
||||
const panels = document.querySelectorAll('[data-panel]');
|
||||
|
||||
function closeAllPanels() {
|
||||
panels.forEach(p => p.classList.remove('is-open'));
|
||||
panelTriggers.forEach(t => t.setAttribute('aria-expanded', 'false'));
|
||||
}
|
||||
|
||||
panelTriggers.forEach(trigger => {
|
||||
trigger.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const name = trigger.dataset.panelTrigger;
|
||||
const panel = document.querySelector(`[data-panel="${name}"]`);
|
||||
if (!panel) return;
|
||||
const isOpen = panel.classList.contains('is-open');
|
||||
closeAllPanels();
|
||||
if (!isOpen) {
|
||||
panel.classList.add('is-open');
|
||||
trigger.setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Click outside any panel closes panels
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!e.target.closest('.has-panel')) {
|
||||
closeAllPanels();
|
||||
}
|
||||
});
|
||||
// Escape closes panels
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') closeAllPanels();
|
||||
});
|
||||
// Clicking a link inside a panel closes it (so navigation feels clean)
|
||||
document.querySelectorAll('.nav-panel a').forEach(link => {
|
||||
link.addEventListener('click', closeAllPanels);
|
||||
});
|
||||
// ─── Example card outcome reveal animation ───
|
||||
// Each card's outcome values fade in and slide up when the card scrolls into view.
|
||||
const exampleCards = document.querySelectorAll('.example-card');
|
||||
|
||||
+358
-144
@@ -34,99 +34,191 @@
|
||||
img { max-width: 100%; display: block; }
|
||||
a { color: inherit; }
|
||||
|
||||
/* ─── NAV (matches homepage) ─── */
|
||||
/* ───────── NAV ───────── */
|
||||
.nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.nav-inner {
|
||||
max-width: 1200px; margin: 0 auto; padding: 0 28px; height: 68px;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 0 28px;
|
||||
height: 68px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.nav-logo { display: flex; align-items: center; text-decoration: none; }
|
||||
.nav-logo img { height: 44px; width: 44px; object-fit: contain; }
|
||||
.nav-links { display: flex; gap: 32px; list-style: none; }
|
||||
.nav-links > li { position: relative; }
|
||||
.nav-links a {
|
||||
color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500;
|
||||
opacity: 0.85; transition: opacity 0.2s; display: inline-flex; align-items: center; gap: 4px;
|
||||
}
|
||||
.nav-links a:hover { opacity: 1; }
|
||||
.nav-links a.current { opacity: 1; color: var(--blue); }
|
||||
.nav-links .has-dropdown > a::after {
|
||||
content: ''; width: 8px; height: 8px;
|
||||
border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
|
||||
transform: rotate(45deg) translate(-2px, -2px); margin-left: 2px; transition: transform 0.2s;
|
||||
}
|
||||
.nav-links .has-dropdown:hover > a::after {
|
||||
transform: rotate(225deg) translate(-2px, -2px);
|
||||
}
|
||||
.nav-dropdown {
|
||||
position: absolute;
|
||||
top: calc(100% + 6px);
|
||||
left: 0;
|
||||
min-width: 240px;
|
||||
background: var(--white);
|
||||
border: 1px solid rgba(0,0,0,0.06);
|
||||
border-radius: 12px;
|
||||
padding: 8px;
|
||||
box-shadow: 0 16px 40px -12px rgba(0,0,0,0.18), 0 4px 10px -4px rgba(0,0,0,0.06);
|
||||
list-style: none;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-6px);
|
||||
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
|
||||
z-index: 200;
|
||||
}
|
||||
.nav-links .has-dropdown:hover .nav-dropdown,
|
||||
.nav-links .has-dropdown:focus-within .nav-dropdown {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
}
|
||||
/* Invisible bridge so cursor can travel from nav item to dropdown */
|
||||
.nav-links .has-dropdown::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 12px;
|
||||
}
|
||||
.nav-dropdown li { display: block; }
|
||||
.nav-dropdown a {
|
||||
display: block;
|
||||
padding: 10px 14px;
|
||||
border-radius: 8px;
|
||||
.nav-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
transition: background 0.15s ease, color 0.15s ease;
|
||||
opacity: 1;
|
||||
}
|
||||
.nav-logo img {
|
||||
height: 44px;
|
||||
width: 44px;
|
||||
object-fit: contain;
|
||||
}
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.nav-links > li { position: relative; }
|
||||
.nav-links > li > a {
|
||||
color: var(--ink);
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.005em;
|
||||
opacity: 0.85;
|
||||
transition: opacity 0.2s;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 6px 0;
|
||||
}
|
||||
.nav-dropdown a::after { display: none; }
|
||||
.nav-dropdown a:hover {
|
||||
background: var(--grey-soft);
|
||||
color: var(--blue);
|
||||
.nav-links > li > a:hover { opacity: 1; }
|
||||
|
||||
/* Active-page indicator — small accent underline below current page link */
|
||||
.nav-links > li > a.current {
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
}
|
||||
.nav-dropdown a.current {
|
||||
background: var(--grey-soft);
|
||||
color: var(--blue);
|
||||
font-weight: 600;
|
||||
.nav-links > li > a.current::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -4px;
|
||||
height: 2px;
|
||||
border-radius: 2px;
|
||||
background: var(--accent, var(--blue));
|
||||
}
|
||||
|
||||
/* Chevron button — separate from the link, click-only behaviour */
|
||||
.nav-chevron {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
padding: 6px 4px;
|
||||
margin: 0 0 0 2px;
|
||||
cursor: pointer;
|
||||
color: var(--ink);
|
||||
opacity: 0.6;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
transition: opacity 0.2s, transform 0.2s ease;
|
||||
}
|
||||
.nav-chevron:hover { opacity: 1; }
|
||||
.nav-chevron svg { display: block; width: 11px; height: 11px; }
|
||||
.nav-chevron[aria-expanded="true"] {
|
||||
opacity: 1;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* ───── Mega-panel ───── */
|
||||
.nav-panel-wrap {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding-top: 14px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.2s ease, visibility 0.2s;
|
||||
z-index: 200;
|
||||
}
|
||||
.nav-panel-wrap.is-open {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
.nav-panel {
|
||||
background: var(--white);
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
border-radius: 14px;
|
||||
padding: 28px;
|
||||
box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.20),
|
||||
0 6px 16px -6px rgba(0, 0, 0, 0.08);
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
display: grid;
|
||||
gap: 28px;
|
||||
width: max-content;
|
||||
max-width: min(960px, calc(100vw - 56px));
|
||||
transform: translateY(-6px);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
.nav-panel-wrap.is-open .nav-panel { transform: translateY(0); }
|
||||
.nav-panel.is-services {
|
||||
grid-template-columns: repeat(3, minmax(180px, 1fr));
|
||||
min-width: 640px;
|
||||
}
|
||||
.nav-panel.is-resources {
|
||||
grid-template-columns: repeat(4, minmax(160px, 1fr));
|
||||
min-width: 760px;
|
||||
}
|
||||
|
||||
.nav-panel-col { display: flex; flex-direction: column; gap: 6px; }
|
||||
.nav-panel-col > a,
|
||||
.nav-panel-col-head {
|
||||
text-decoration: none;
|
||||
color: var(--ink);
|
||||
}
|
||||
.nav-panel-col-head {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.005em;
|
||||
color: var(--ink);
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
a.nav-panel-col-head:hover { color: var(--blue); }
|
||||
.nav-panel-col-desc {
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
color: rgba(86, 86, 86, 0.85);
|
||||
margin: 0;
|
||||
}
|
||||
.nav-panel-col-link {
|
||||
margin-top: 4px;
|
||||
font-size: 12.5px;
|
||||
font-weight: 500;
|
||||
color: var(--blue);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
text-decoration: none;
|
||||
transition: gap 0.15s ease;
|
||||
}
|
||||
.nav-panel-col-link:hover { gap: 8px; }
|
||||
.nav-panel-col-tag {
|
||||
display: inline-block;
|
||||
margin-top: 4px;
|
||||
font-size: 10.5px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(86, 86, 86, 0.65);
|
||||
}
|
||||
|
||||
|
||||
.nav-cta {
|
||||
background: var(--ink); color: white; padding: 9px 18px; border-radius: 999px;
|
||||
font-size: 13px; font-weight: 500; text-decoration: none; transition: background 0.2s;
|
||||
background: var(--ink);
|
||||
color: white;
|
||||
padding: 9px 18px;
|
||||
border-radius: 999px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
transition: background 0.2s, transform 0.2s;
|
||||
}
|
||||
.nav-cta:hover {
|
||||
background: var(--blue-deep);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.nav-cta:hover { background: var(--blue); }
|
||||
|
||||
/* ─── Hamburger button (mobile only) ─── */
|
||||
.nav-hamburger {
|
||||
@@ -146,52 +238,45 @@
|
||||
}
|
||||
.nav-hamburger svg { display: block; width: 22px; height: 22px; }
|
||||
|
||||
/* ─── Mobile drawer overlay ─── */
|
||||
/* ─── Mobile menu (full-screen takeover) ─── */
|
||||
.nav-drawer-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
background: transparent;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s ease;
|
||||
z-index: 99;
|
||||
}
|
||||
.nav-drawer-overlay.is-open {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.nav-drawer-overlay.is-open { pointer-events: auto; }
|
||||
|
||||
/* ─── Mobile drawer (slides in from right) ─── */
|
||||
.nav-drawer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: min(320px, 85vw);
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: var(--white);
|
||||
box-shadow: -8px 0 30px -10px rgba(0, 0, 0, 0.15);
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
transform: translateY(-100%);
|
||||
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.nav-drawer.is-open { transform: translateX(0); }
|
||||
.nav-drawer.is-open { transform: translateY(0); }
|
||||
|
||||
.nav-drawer-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 24px;
|
||||
padding: 20px 28px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
.nav-drawer-head img { height: 28px; width: auto; }
|
||||
.nav-drawer-head img { height: 30px; width: auto; }
|
||||
.nav-drawer-close {
|
||||
background: transparent;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 10px;
|
||||
padding: 8px;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
color: var(--ink);
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
@@ -200,9 +285,14 @@
|
||||
background: var(--grey-soft);
|
||||
border-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.nav-drawer-close svg { display: block; width: 18px; height: 18px; }
|
||||
.nav-drawer-close svg { display: block; width: 20px; height: 20px; }
|
||||
|
||||
.nav-drawer-body { padding: 16px 0; flex: 1; }
|
||||
.nav-drawer-body {
|
||||
padding: 36px 28px 28px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.nav-drawer ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
@@ -210,48 +300,51 @@
|
||||
}
|
||||
.nav-drawer-item {
|
||||
display: block;
|
||||
padding: 14px 24px;
|
||||
padding: 18px 0;
|
||||
color: var(--ink);
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
border-left: 3px solid transparent;
|
||||
transition: background 0.15s, border-color 0.15s, color 0.15s;
|
||||
}
|
||||
.nav-drawer-item:hover {
|
||||
background: var(--grey-soft);
|
||||
border-left-color: var(--blue);
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
transition: color 0.15s, padding-left 0.2s ease;
|
||||
}
|
||||
.nav-drawer-item:hover { color: var(--blue); padding-left: 6px; }
|
||||
|
||||
.nav-drawer-group-label {
|
||||
display: block;
|
||||
padding: 18px 24px 8px;
|
||||
padding: 28px 0 12px;
|
||||
color: var(--charcoal);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.1em;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
opacity: 0.7;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
.nav-drawer-subitem {
|
||||
display: block;
|
||||
padding: 12px 24px 12px 36px;
|
||||
padding: 16px 0 16px 14px;
|
||||
color: var(--ink);
|
||||
text-decoration: none;
|
||||
font-size: 15px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
|
||||
border-left: 3px solid transparent;
|
||||
transition: background 0.15s, border-color 0.15s;
|
||||
transition: color 0.15s, border-left-color 0.2s ease, padding-left 0.2s ease;
|
||||
}
|
||||
.nav-drawer-subitem:hover {
|
||||
background: var(--grey-soft);
|
||||
color: var(--blue);
|
||||
border-left-color: var(--blue);
|
||||
padding-left: 20px;
|
||||
}
|
||||
.nav-drawer-subitem.coaching:hover {
|
||||
color: var(--orange);
|
||||
border-left-color: var(--orange);
|
||||
}
|
||||
.nav-drawer-subitem.coaching:hover { border-left-color: var(--orange); }
|
||||
.nav-drawer-subitem.current { background: rgba(0,112,199,0.06); border-left-color: var(--blue); }
|
||||
.nav-drawer-subitem.coaching.current { background: rgba(236,139,51,0.06); border-left-color: var(--orange); }
|
||||
|
||||
.nav-drawer-foot {
|
||||
padding: 20px 24px 28px;
|
||||
padding: 24px 28px 32px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
.nav-drawer-cta {
|
||||
@@ -259,17 +352,28 @@
|
||||
text-align: center;
|
||||
background: var(--blue);
|
||||
color: var(--white);
|
||||
padding: 14px 22px;
|
||||
padding: 16px 22px;
|
||||
border-radius: 999px;
|
||||
font-size: 15px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.nav-drawer-cta:hover { background: var(--blue-deep); }
|
||||
|
||||
.nav-drawer-subitem.current {
|
||||
color: var(--blue);
|
||||
border-left-color: var(--blue);
|
||||
padding-left: 20px;
|
||||
}
|
||||
.nav-drawer-subitem.coaching.current {
|
||||
color: var(--orange);
|
||||
border-left-color: var(--orange);
|
||||
}
|
||||
|
||||
body.nav-drawer-locked { overflow: hidden; }
|
||||
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.nav-links { display: none; }
|
||||
.nav-cta { display: none; }
|
||||
@@ -1209,7 +1313,7 @@
|
||||
.footer { background: var(--ink); color: white; padding: 60px 28px 28px; }
|
||||
.footer-inner { max-width: 1200px; margin: 0 auto; }
|
||||
.footer-grid {
|
||||
display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px;
|
||||
display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px;
|
||||
}
|
||||
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
|
||||
.footer-brand img { max-height: 56px; width: auto; margin-bottom: 18px; }
|
||||
@@ -1532,35 +1636,88 @@
|
||||
.engagement-accordion-deliverables { margin-top: 12px; }
|
||||
}
|
||||
</style>
|
||||
<!-- Google tag (gtag.js) -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Z5JJBS491H"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'G-Z5JJBS491H');
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ───── NAV ───── -->
|
||||
<nav class="nav">
|
||||
<nav class="nav" aria-label="Primary">
|
||||
<div class="nav-inner">
|
||||
<a href="../index.html" class="nav-logo" aria-label="Lean 101 home">
|
||||
<img src="../assets/lean101-isotipo.png" alt="Lean 101">
|
||||
</a>
|
||||
<ul class="nav-links">
|
||||
<li class="has-dropdown">
|
||||
<li><a href="../index.html">Home</a></li>
|
||||
|
||||
<li class="has-panel">
|
||||
<a href="../index.html#services" class="current">Services</a>
|
||||
<ul class="nav-dropdown" role="menu">
|
||||
<li role="none">
|
||||
<a href="consulting.html" role="menuitem">Process Excellence & Transformation</a>
|
||||
</li>
|
||||
<li role="none">
|
||||
<a href="coaching.html" role="menuitem">Coaching & Training</a>
|
||||
</li>
|
||||
<li role="none">
|
||||
<a href="digital-solutions.html" class="current" role="menuitem">Digital Solutions</a>
|
||||
</li>
|
||||
</ul>
|
||||
<button class="nav-chevron" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="nav-panel-services" aria-label="Open Services menu" data-panel-trigger="services">
|
||||
<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 4.5 6 8 9 4.5"/></svg>
|
||||
</button>
|
||||
<div class="nav-panel-wrap" id="nav-panel-services" data-panel="services" role="region" aria-label="Services menu">
|
||||
<div class="nav-panel is-services">
|
||||
<div class="nav-panel-col">
|
||||
<a href="consulting.html" class="nav-panel-col-head">Process Excellence</a>
|
||||
<p class="nav-panel-col-desc">Diagnosing where work breaks down, designing the fix, and embedding the change with you.</p>
|
||||
<a href="consulting.html" class="nav-panel-col-link">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
<div class="nav-panel-col">
|
||||
<a href="coaching.html" class="nav-panel-col-head">Coaching & Training</a>
|
||||
<p class="nav-panel-col-desc">Building the capability for your team to lead improvement themselves.</p>
|
||||
<a href="coaching.html" class="nav-panel-col-link">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
<div class="nav-panel-col">
|
||||
<a href="digital-solutions.html" class="nav-panel-col-head">Digital Solutions</a>
|
||||
<p class="nav-panel-col-desc">Custom dashboards, web apps and automation, built for your specific work.</p>
|
||||
<a href="digital-solutions.html" class="nav-panel-col-link">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li><a href="../index.html#process">How it works</a></li>
|
||||
<li><a href="../index.html#why">Why Lean 101</a></li>
|
||||
|
||||
<li class="has-panel">
|
||||
<a href="../resources/index.html">Resources</a>
|
||||
<button class="nav-chevron" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="nav-panel-resources" aria-label="Open Resources menu" data-panel-trigger="resources">
|
||||
<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 4.5 6 8 9 4.5"/></svg>
|
||||
</button>
|
||||
<div class="nav-panel-wrap" id="nav-panel-resources" data-panel="resources" role="region" aria-label="Resources menu">
|
||||
<div class="nav-panel is-resources">
|
||||
<div class="nav-panel-col">
|
||||
<a href="../resources/index.html#principles" class="nav-panel-col-head">Principles</a>
|
||||
<p class="nav-panel-col-desc">The why of Lean — the philosophy underneath the methods.</p>
|
||||
<span class="nav-panel-col-tag">Coming soon</span>
|
||||
</div>
|
||||
<div class="nav-panel-col">
|
||||
<a href="../resources/index.html#techniques" class="nav-panel-col-head">Techniques</a>
|
||||
<p class="nav-panel-col-desc">The how of Lean — specific methods explained in plain terms.</p>
|
||||
<span class="nav-panel-col-tag">Coming soon</span>
|
||||
</div>
|
||||
<div class="nav-panel-col">
|
||||
<a href="../resources/index.html#reading" class="nav-panel-col-head">Reading</a>
|
||||
<p class="nav-panel-col-desc">Summaries of the books and articles that shaped how we think.</p>
|
||||
<span class="nav-panel-col-tag">Coming soon</span>
|
||||
</div>
|
||||
<div class="nav-panel-col">
|
||||
<a href="../resources/index.html#templates" class="nav-panel-col-head">Templates</a>
|
||||
<p class="nav-panel-col-desc">Worksheets, checklists and audits you can download and use.</p>
|
||||
<span class="nav-panel-col-tag">Coming soon</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li><a href="../index.html#contact">Contact</a></li>
|
||||
</ul>
|
||||
<a href="../index.html#contact" class="nav-cta">Book a call</a>
|
||||
<a href="../index.html#contact" class="nav-cta">Let’s Talk</a>
|
||||
<!-- Hamburger menu button — mobile only -->
|
||||
<button class="nav-hamburger" type="button" aria-label="Open menu" aria-expanded="false" aria-controls="nav-drawer">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="3" y1="6" x2="21" y2="6"/>
|
||||
@@ -1571,6 +1728,7 @@
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<!-- Mobile drawer + overlay -->
|
||||
<div class="nav-drawer-overlay" data-drawer-overlay aria-hidden="true"></div>
|
||||
<aside class="nav-drawer" id="nav-drawer" aria-label="Mobile navigation" aria-hidden="true">
|
||||
@@ -1585,17 +1743,21 @@
|
||||
</div>
|
||||
<nav class="nav-drawer-body">
|
||||
<ul>
|
||||
<li><a class="nav-drawer-item" href="../index.html">Home</a></li>
|
||||
<li><span class="nav-drawer-group-label">Services</span></li>
|
||||
<li><a class="nav-drawer-subitem" href="consulting.html">Process Excellence & Transformation</a></li>
|
||||
<li><a class="nav-drawer-subitem" href="consulting.html">Process Excellence</a></li>
|
||||
<li><a class="nav-drawer-subitem coaching" href="coaching.html">Coaching & Training</a></li>
|
||||
<li><a class="nav-drawer-subitem current" href="digital-solutions.html">Digital Solutions</a></li>
|
||||
<li><a class="nav-drawer-item" href="../index.html#process">How it works</a></li>
|
||||
<li><a class="nav-drawer-item" href="../index.html#why">Why Lean 101</a></li>
|
||||
<li><span class="nav-drawer-group-label">Resources</span></li>
|
||||
<li><a class="nav-drawer-subitem" href="../resources/index.html#principles">Principles</a></li>
|
||||
<li><a class="nav-drawer-subitem" href="../resources/index.html#techniques">Techniques</a></li>
|
||||
<li><a class="nav-drawer-subitem" href="../resources/index.html#reading">Reading</a></li>
|
||||
<li><a class="nav-drawer-subitem" href="../resources/index.html#templates">Templates</a></li>
|
||||
<li><a class="nav-drawer-item" href="../index.html#contact">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="nav-drawer-foot">
|
||||
<a href="../index.html#contact" class="nav-drawer-cta">Book a call</a>
|
||||
<a href="../index.html#contact" class="nav-drawer-cta">Let’s Talk</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
@@ -1610,7 +1772,7 @@
|
||||
</p>
|
||||
<div class="page-hero-ctas">
|
||||
<a href="../index.html#contact" class="btn btn-primary">
|
||||
Book a free intro call <span class="btn-arrow">→</span>
|
||||
Let’s Talk <span class="btn-arrow">→</span>
|
||||
</a>
|
||||
<a href="#approach" class="btn btn-secondary">See how it works</a>
|
||||
</div>
|
||||
@@ -2024,12 +2186,12 @@
|
||||
<div class="cta-card">
|
||||
<div class="cta-inner">
|
||||
<h2>Let's find <em>your</em> first improvement.</h2>
|
||||
<p>Start with a free 30-minute intro call. If it's a fit, we'll schedule a 1-hour site visit to walk your operation together — and from there we'll scope a tailored partnership.</p>
|
||||
<div class="page-hero-ctas">
|
||||
<a href="#" class="btn btn-on-dark">
|
||||
Book a free intro call <span class="btn-arrow">→</span>
|
||||
<p>Tell us a little about your business and what you're looking to improve. We'll get back to you to talk through whether — and how — we can help.</p>
|
||||
|
||||
<div class="hero-ctas">
|
||||
<a href="../index.html#contact" class="btn btn-on-dark">
|
||||
Let’s Talk <span class="btn-arrow">→</span>
|
||||
</a>
|
||||
<a href="mailto:hello@lean-101.com" class="btn btn-ghost-dark">hello@lean-101.com</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -2046,11 +2208,20 @@
|
||||
<div class="footer-col">
|
||||
<h5>Services</h5>
|
||||
<ul>
|
||||
<li><a href="consulting.html">Consulting</a></li>
|
||||
<li><a href="consulting.html">Process Excellence</a></li>
|
||||
<li><a href="coaching.html">Coaching & Training</a></li>
|
||||
<li><a href="digital-solutions.html">Digital Solutions</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<h5>Resources</h5>
|
||||
<ul>
|
||||
<li><a href="../resources/index.html#principles">Principles</a></li>
|
||||
<li><a href="../resources/index.html#techniques">Techniques</a></li>
|
||||
<li><a href="../resources/index.html#reading">Reading</a></li>
|
||||
<li><a href="../resources/index.html#templates">Templates</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<h5>Company</h5>
|
||||
<ul>
|
||||
@@ -2126,6 +2297,49 @@
|
||||
document.querySelectorAll('.nav-drawer a').forEach(link => {
|
||||
link.addEventListener('click', closeDrawer);
|
||||
});
|
||||
|
||||
// ─── Desktop mega-panels (Services / Resources) ───
|
||||
// Click-only behaviour: chevron toggles its panel, clicking outside or
|
||||
// pressing Escape closes any open panel. Clicking the link text itself
|
||||
// (not the chevron) navigates as normal — chevron is a separate trigger.
|
||||
const panelTriggers = document.querySelectorAll('[data-panel-trigger]');
|
||||
const panels = document.querySelectorAll('[data-panel]');
|
||||
|
||||
function closeAllPanels() {
|
||||
panels.forEach(p => p.classList.remove('is-open'));
|
||||
panelTriggers.forEach(t => t.setAttribute('aria-expanded', 'false'));
|
||||
}
|
||||
|
||||
panelTriggers.forEach(trigger => {
|
||||
trigger.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const name = trigger.dataset.panelTrigger;
|
||||
const panel = document.querySelector(`[data-panel="${name}"]`);
|
||||
if (!panel) return;
|
||||
const isOpen = panel.classList.contains('is-open');
|
||||
closeAllPanels();
|
||||
if (!isOpen) {
|
||||
panel.classList.add('is-open');
|
||||
trigger.setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Click outside any panel closes panels
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!e.target.closest('.has-panel')) {
|
||||
closeAllPanels();
|
||||
}
|
||||
});
|
||||
// Escape closes panels
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') closeAllPanels();
|
||||
});
|
||||
// Clicking a link inside a panel closes it (so navigation feels clean)
|
||||
document.querySelectorAll('.nav-panel a').forEach(link => {
|
||||
link.addEventListener('click', closeAllPanels);
|
||||
});
|
||||
// ─── Example card outcome reveal animation ───
|
||||
// Each card's outcome values fade in and slide up when the card scrolls into view.
|
||||
const exampleCards = document.querySelectorAll('.example-card');
|
||||
|
||||
Reference in New Issue
Block a user