2184 lines
78 KiB
HTML
2184 lines
78 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Digital Solutions — Lean 101</title>
|
||
<meta name="description" content="Custom apps, dashboards, and automation that streamline how your team works. Power BI, custom web apps, and process automation tailored to your business — built by people who understand operations.">
|
||
<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);
|
||
--accent-rgb: 0, 112, 199;
|
||
}
|
||
* { 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; }
|
||
|
||
/* ─── NAV (matches homepage) ─── */
|
||
.nav {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
background: rgba(255, 255, 255, 0.85);
|
||
backdrop-filter: saturate(180%) blur(20px);
|
||
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||
}
|
||
.nav-inner {
|
||
max-width: 1200px; 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;
|
||
text-decoration: none;
|
||
transition: background 0.15s ease, color 0.15s ease;
|
||
opacity: 1;
|
||
color: var(--ink);
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
letter-spacing: -0.005em;
|
||
}
|
||
.nav-dropdown a::after { display: none; }
|
||
.nav-dropdown a:hover {
|
||
background: var(--grey-soft);
|
||
color: var(--blue);
|
||
}
|
||
.nav-dropdown a.current {
|
||
background: var(--grey-soft);
|
||
color: var(--blue);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
.nav-cta:hover { background: var(--blue); }
|
||
|
||
/* ─── 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 drawer overlay ─── */
|
||
.nav-drawer-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba(0, 0, 0, 0.4);
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: opacity 0.3s ease;
|
||
z-index: 99;
|
||
}
|
||
.nav-drawer-overlay.is-open {
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
/* ─── Mobile drawer (slides in from right) ─── */
|
||
.nav-drawer {
|
||
position: fixed;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
width: min(320px, 85vw);
|
||
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);
|
||
z-index: 100;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow-y: auto;
|
||
}
|
||
.nav-drawer.is-open { transform: translateX(0); }
|
||
|
||
.nav-drawer-head {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20px 24px;
|
||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||
}
|
||
.nav-drawer-head img { height: 28px; width: auto; }
|
||
.nav-drawer-close {
|
||
background: transparent;
|
||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||
border-radius: 10px;
|
||
padding: 8px;
|
||
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: 18px; height: 18px; }
|
||
|
||
.nav-drawer-body { padding: 16px 0; flex: 1; }
|
||
.nav-drawer ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
.nav-drawer-item {
|
||
display: block;
|
||
padding: 14px 24px;
|
||
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);
|
||
}
|
||
|
||
.nav-drawer-group-label {
|
||
display: block;
|
||
padding: 18px 24px 8px;
|
||
color: var(--charcoal);
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
}
|
||
.nav-drawer-subitem {
|
||
display: block;
|
||
padding: 12px 24px 12px 36px;
|
||
color: var(--ink);
|
||
text-decoration: none;
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
border-left: 3px solid transparent;
|
||
transition: background 0.15s, border-color 0.15s;
|
||
}
|
||
.nav-drawer-subitem:hover {
|
||
background: var(--grey-soft);
|
||
border-left-color: var(--blue);
|
||
}
|
||
.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;
|
||
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: 14px 22px;
|
||
border-radius: 999px;
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
text-decoration: none;
|
||
transition: background 0.2s;
|
||
}
|
||
.nav-drawer-cta:hover { background: var(--blue-deep); }
|
||
|
||
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 32px; line-height: 1.5;
|
||
}
|
||
.page-hero-ctas {
|
||
display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
|
||
}
|
||
.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-primary { background: var(--blue); color: white; }
|
||
.btn-primary:hover { background: var(--blue-deep); }
|
||
.btn-secondary {
|
||
background: var(--white); color: var(--ink); border: 1px solid rgba(0, 0, 0, 0.12);
|
||
}
|
||
.btn-secondary:hover { background: var(--grey-soft); border-color: rgba(0, 0, 0, 0.2); }
|
||
.btn-arrow { transition: transform 0.2s; }
|
||
.btn:hover .btn-arrow { transform: translateX(3px); }
|
||
|
||
/* ─── SECTIONS ─── */
|
||
.section { padding: 130px 28px; }
|
||
.section.alt { background: var(--grey-soft); }
|
||
.section-inner { max-width: 1100px; margin: 0 auto; }
|
||
.section-eyebrow {
|
||
color: var(--accent); font-size: 13px; font-weight: 600;
|
||
letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px;
|
||
}
|
||
.section-title {
|
||
font-size: clamp(30px, 4vw, 44px); font-weight: 600;
|
||
letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 18px;
|
||
max-width: 920px;
|
||
}
|
||
.section-lede {
|
||
font-size: clamp(16px, 1.3vw, 18px); color: var(--charcoal);
|
||
max-width: 820px; line-height: 1.55;
|
||
}
|
||
.section-head { margin-bottom: 72px; }
|
||
/* Centred section heads stay narrower so the eye lands cleanly */
|
||
.section-head.center { text-align: center; }
|
||
.section-head.center .section-title {
|
||
max-width: 760px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
.section-head.center .section-lede {
|
||
max-width: 680px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
/* ─── WHO IT'S FOR (problem cards) ─── */
|
||
.fit-grid {
|
||
display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
|
||
}
|
||
@media (max-width: 720px) { .fit-grid { grid-template-columns: 1fr; } }
|
||
.fit-card {
|
||
background: var(--white); border: 1px solid rgba(0,0,0,0.07);
|
||
border-radius: 16px; padding: 28px;
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
|
||
}
|
||
.fit-card:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 16px 36px -18px rgba(0, 112, 199, 0.15);
|
||
border-color: rgba(0, 112, 199, 0.3);
|
||
}
|
||
.fit-icon {
|
||
width: 40px; height: 40px; border-radius: 10px;
|
||
background: rgba(0, 112, 199, 0.1); color: var(--accent);
|
||
display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
|
||
}
|
||
.fit-icon svg { width: 20px; height: 20px; }
|
||
.fit-card h3 {
|
||
font-size: 17px; font-weight: 600; margin-bottom: 8px; letter-spacing: -0.01em;
|
||
}
|
||
.fit-card p { font-size: 14.5px; color: var(--charcoal); line-height: 1.55; }
|
||
|
||
/* ─── WHAT'S INCLUDED (deliverables list) ─── */
|
||
.deliverables {
|
||
display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
|
||
}
|
||
@media (max-width: 880px) { .deliverables { grid-template-columns: 1fr 1fr; } }
|
||
@media (max-width: 540px) { .deliverables { grid-template-columns: 1fr; } }
|
||
.deliverable {
|
||
background: var(--white); border: 1px solid rgba(0,0,0,0.07);
|
||
border-radius: 14px; padding: 22px;
|
||
border-top: 3px solid var(--accent);
|
||
}
|
||
.deliverable h4 {
|
||
font-size: 15px; font-weight: 600; margin-bottom: 6px;
|
||
color: var(--ink); letter-spacing: -0.005em;
|
||
}
|
||
.deliverable p { font-size: 14px; color: var(--charcoal); line-height: 1.5; }
|
||
|
||
/* ─── Accordion wrapper for "What's included" ───
|
||
Compact summary by default; expands to reveal the deliverables grid.
|
||
Custom button + div pattern (not native <details>) for animation control. */
|
||
.accordion {
|
||
background: var(--white);
|
||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
box-shadow: 0 4px 16px -8px rgba(0, 0, 0, 0.06);
|
||
}
|
||
.accordion-toggle {
|
||
width: 100%;
|
||
background: transparent;
|
||
border: none;
|
||
padding: 22px 28px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 18px;
|
||
text-align: left;
|
||
color: var(--ink);
|
||
font-family: inherit;
|
||
transition: background 0.2s ease;
|
||
}
|
||
.accordion-toggle:hover {
|
||
background: var(--grey-soft);
|
||
}
|
||
.accordion-toggle:focus-visible {
|
||
outline: 2px solid var(--accent);
|
||
outline-offset: -2px;
|
||
}
|
||
.accordion-toggle-text {
|
||
flex: 1;
|
||
}
|
||
.accordion-toggle-title {
|
||
font-size: 17px;
|
||
font-weight: 600;
|
||
color: var(--ink);
|
||
margin-bottom: 4px;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
.accordion-toggle-hint {
|
||
font-size: 13.5px;
|
||
color: var(--charcoal);
|
||
line-height: 1.5;
|
||
}
|
||
.accordion-chevron {
|
||
flex-shrink: 0;
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 50%;
|
||
background: rgba(var(--accent-rgb), 0.08);
|
||
color: var(--accent);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.2s ease;
|
||
}
|
||
.accordion-chevron svg {
|
||
width: 18px;
|
||
height: 18px;
|
||
display: block;
|
||
}
|
||
.accordion-toggle:hover .accordion-chevron {
|
||
background: rgba(var(--accent-rgb), 0.14);
|
||
}
|
||
/* When expanded: rotate chevron 180° so it points up */
|
||
.accordion[data-state="open"] .accordion-chevron {
|
||
transform: rotate(180deg);
|
||
}
|
||
/* The collapsible content panel */
|
||
.accordion-panel {
|
||
max-height: 0;
|
||
overflow: hidden;
|
||
transition: max-height 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||
}
|
||
.accordion-panel-inner {
|
||
padding: 0 28px 28px;
|
||
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
||
padding-top: 22px;
|
||
}
|
||
/* Reduced-motion: skip the animation */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.accordion-panel { transition: none; }
|
||
.accordion-chevron { transition: none; }
|
||
}
|
||
|
||
/* ─── PROCESS (4 step horizontal flow — matches homepage style) ─── */
|
||
.flow {
|
||
margin-top: 30px;
|
||
display: grid;
|
||
grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
|
||
align-items: stretch; gap: 0;
|
||
}
|
||
.flow-step {
|
||
background: var(--white); border: 1px solid rgba(0,0,0,0.07);
|
||
border-radius: 16px; padding: 24px 22px;
|
||
display: flex; flex-direction: column;
|
||
box-shadow: 0 4px 16px -8px rgba(0,0,0,0.06);
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
|
||
border-top: 3px solid var(--accent);
|
||
}
|
||
.flow-step:nth-child(1) { --step-accent: var(--blue); --step-shadow: rgba(0, 112, 199, 0.22); }
|
||
.flow-step:nth-child(3) { --step-accent: var(--orange); --step-shadow: rgba(236, 139, 51, 0.22); }
|
||
.flow-step:nth-child(5) { --step-accent: var(--blue); --step-shadow: rgba(0, 112, 199, 0.22); }
|
||
.flow-step:nth-child(7) { --step-accent: var(--orange); --step-shadow: rgba(236, 139, 51, 0.22); }
|
||
.flow-step { border-top-color: var(--step-accent, var(--accent)); }
|
||
.flow-step:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 22px 50px -22px var(--step-shadow);
|
||
border-color: var(--step-accent);
|
||
}
|
||
.flow-step-label {
|
||
font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
|
||
color: var(--step-accent); margin-bottom: 6px; text-transform: uppercase;
|
||
}
|
||
.flow-step-title {
|
||
font-size: 20px; font-weight: 600; margin-bottom: 10px;
|
||
letter-spacing: -0.015em; color: var(--ink); line-height: 1.15;
|
||
}
|
||
.flow-step-desc {
|
||
color: var(--charcoal); font-size: 13.5px; line-height: 1.55; margin-bottom: 14px; flex: 1;
|
||
}
|
||
.flow-step-outcome {
|
||
color: var(--step-accent); font-size: 13px; line-height: 1.5; font-style: italic;
|
||
padding-top: 12px; border-top: 1px solid rgba(0,0,0,0.07); font-weight: 500;
|
||
}
|
||
.flow-arrow {
|
||
display: flex; align-items: center; justify-content: center;
|
||
width: 36px; color: rgba(0, 0, 0, 0.18);
|
||
}
|
||
.flow-arrow svg { width: 24px; height: 24px; }
|
||
.flow-arrow:nth-child(2) { color: var(--blue); opacity: 0.5; }
|
||
.flow-arrow:nth-child(4) { color: #b08a6b; opacity: 0.6; }
|
||
.flow-arrow:nth-child(6) { color: var(--orange); opacity: 0.6; }
|
||
@media (max-width: 1100px) {
|
||
.flow { grid-template-columns: 1fr 1fr; gap: 18px; }
|
||
.flow-step:nth-child(1) { grid-column: 1; grid-row: 1; }
|
||
.flow-step:nth-child(3) { grid-column: 2; grid-row: 1; }
|
||
.flow-step:nth-child(5) { grid-column: 1; grid-row: 3; }
|
||
.flow-step:nth-child(7) { grid-column: 2; grid-row: 3; }
|
||
.flow-arrow { display: none; }
|
||
}
|
||
@media (max-width: 600px) {
|
||
.flow { grid-template-columns: 1fr; gap: 12px; }
|
||
.flow-step:nth-child(1), .flow-step:nth-child(3),
|
||
.flow-step:nth-child(5), .flow-step:nth-child(7) {
|
||
grid-column: 1; grid-row: auto;
|
||
}
|
||
}
|
||
|
||
/* ─── DIGITAL BUILDS — three example cards ─── */
|
||
.builds-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 22px;
|
||
margin-bottom: 60px;
|
||
}
|
||
@media (max-width: 980px) { .builds-grid { grid-template-columns: 1fr; } }
|
||
|
||
.build-card {
|
||
background: var(--white);
|
||
border: 1px solid rgba(0,0,0,0.07);
|
||
border-radius: 18px;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
|
||
box-shadow: 0 4px 16px -8px rgba(0,0,0,0.06);
|
||
}
|
||
.build-card:hover {
|
||
transform: translateY(-6px);
|
||
box-shadow: 0 24px 48px -20px rgba(0, 112, 199, 0.18);
|
||
border-color: rgba(0, 112, 199, 0.3);
|
||
}
|
||
|
||
/* The "preview" pane at the top of each build card — abstract visual */
|
||
.build-preview {
|
||
aspect-ratio: 16/10;
|
||
background: linear-gradient(135deg, #1a2230, #1a1a1a 60%, #2a1f1a);
|
||
position: relative;
|
||
padding: 28px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
}
|
||
.build-preview::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -30%;
|
||
left: -10%;
|
||
width: 60%;
|
||
height: 160%;
|
||
background: radial-gradient(ellipse, rgba(0,112,199,0.22), transparent 65%);
|
||
pointer-events: none;
|
||
}
|
||
.build-preview::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -30%;
|
||
right: -10%;
|
||
width: 60%;
|
||
height: 160%;
|
||
background: radial-gradient(ellipse, rgba(236,139,51,0.18), transparent 65%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* Dashboard preview: bars + line chart */
|
||
.build-preview-dashboard {
|
||
align-items: flex-end;
|
||
gap: 8px;
|
||
padding: 28px 24px 24px;
|
||
}
|
||
.build-preview-dashboard .bp-bar {
|
||
width: 100%;
|
||
border-radius: 4px 4px 0 0;
|
||
background: linear-gradient(to top, var(--blue), #5fa6db);
|
||
position: relative;
|
||
z-index: 1;
|
||
flex: 1;
|
||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||
}
|
||
.bp-bar-1 { height: 35%; }
|
||
.bp-bar-2 { height: 55%; }
|
||
.bp-bar-3 { height: 40%; }
|
||
.bp-bar-4 { height: 70%; }
|
||
.bp-bar-5 { height: 50%; }
|
||
.build-card:hover .bp-bar { opacity: 0.85; }
|
||
.bp-bar-3 { background: linear-gradient(to top, var(--orange), #f1a05a); }
|
||
.bp-line {
|
||
position: absolute;
|
||
inset: 28px 24px 24px;
|
||
z-index: 2;
|
||
pointer-events: none;
|
||
color: rgba(255, 255, 255, 0.6);
|
||
}
|
||
.bp-line svg { width: 100%; height: 100%; }
|
||
|
||
/* Web app preview: rows like a list */
|
||
.build-preview-app {
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
gap: 8px;
|
||
padding: 22px;
|
||
}
|
||
.bp-app-header {
|
||
height: 18px;
|
||
background: linear-gradient(to right, var(--blue), #5fa6db 60%, transparent);
|
||
border-radius: 4px;
|
||
position: relative;
|
||
z-index: 1;
|
||
width: 65%;
|
||
}
|
||
.bp-app-row {
|
||
height: 12px;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border-radius: 3px;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.bp-app-row:nth-of-type(2) { width: 90%; }
|
||
.bp-app-row:nth-of-type(3) { width: 75%; background: rgba(236, 139, 51, 0.5); }
|
||
.bp-app-row:nth-of-type(4) { width: 85%; }
|
||
.bp-app-row:nth-of-type(5) { width: 60%; }
|
||
.bp-app-fab {
|
||
position: absolute;
|
||
bottom: 16px;
|
||
right: 16px;
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 50%;
|
||
background: var(--blue);
|
||
z-index: 2;
|
||
box-shadow: 0 4px 12px rgba(0, 112, 199, 0.5);
|
||
}
|
||
.bp-app-fab::before, .bp-app-fab::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
background: white;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
.bp-app-fab::before { width: 14px; height: 2px; }
|
||
.bp-app-fab::after { width: 2px; height: 14px; }
|
||
|
||
/* Automation preview: nodes connected by arrows */
|
||
.build-preview-auto {
|
||
gap: 10px;
|
||
padding: 20px;
|
||
}
|
||
.build-preview-auto .bp-node {
|
||
width: 56px;
|
||
height: 56px;
|
||
border-radius: 12px;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 1;
|
||
flex-shrink: 0;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
.bp-node-1 { color: var(--blue); }
|
||
.bp-node-2 { color: var(--orange); }
|
||
.bp-node-3 { color: #2dba6c; background: rgba(255, 255, 255, 0.95); }
|
||
.build-card:hover .bp-node-1 { transform: translateY(-2px); }
|
||
.build-card:hover .bp-node-3 { transform: translateY(-2px) scale(1.05); }
|
||
.build-preview-auto .bp-arrow {
|
||
width: 28px;
|
||
height: 28px;
|
||
color: rgba(255, 255, 255, 0.55);
|
||
z-index: 1;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
.build-preview-auto .bp-arrow svg { width: 100%; height: 100%; }
|
||
.build-card:hover .bp-arrow { transform: translateX(2px); }
|
||
|
||
/* Build card body */
|
||
.build-body {
|
||
padding: 28px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex: 1;
|
||
gap: 12px;
|
||
}
|
||
.build-tag {
|
||
display: inline-block;
|
||
background: rgba(0, 112, 199, 0.1);
|
||
color: var(--blue);
|
||
padding: 4px 12px;
|
||
border-radius: 999px;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
align-self: flex-start;
|
||
}
|
||
.build-card:nth-child(2) .build-tag { background: rgba(236, 139, 51, 0.12); color: var(--orange); }
|
||
.build-body h3 {
|
||
font-size: 19px;
|
||
font-weight: 600;
|
||
letter-spacing: -0.01em;
|
||
line-height: 1.2;
|
||
color: var(--ink);
|
||
margin-bottom: 4px;
|
||
}
|
||
.build-body > p {
|
||
font-size: 14.5px;
|
||
line-height: 1.55;
|
||
color: var(--charcoal);
|
||
margin-bottom: 8px;
|
||
}
|
||
.build-bullets {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin-top: 4px;
|
||
}
|
||
.build-bullets li {
|
||
font-size: 13.5px;
|
||
line-height: 1.5;
|
||
color: var(--charcoal);
|
||
padding-left: 20px;
|
||
position: relative;
|
||
margin-bottom: 8px;
|
||
}
|
||
.build-bullets li::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 4px;
|
||
top: 8px;
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
background: var(--blue);
|
||
}
|
||
.build-card:nth-child(2) .build-bullets li::before { background: var(--orange); }
|
||
|
||
/* Phases strip */
|
||
/* ─── How we build (the four-phase strip — bigger now, intentional) ─── */
|
||
.phases {
|
||
background: var(--grey-soft);
|
||
border-radius: 22px;
|
||
padding: 64px 56px;
|
||
margin-top: 24px;
|
||
border: 1px solid rgba(0,0,0,0.05);
|
||
}
|
||
.phases-header {
|
||
margin-bottom: 48px;
|
||
text-align: center;
|
||
}
|
||
.phases-header .section-eyebrow {
|
||
margin: 0 0 12px 0 !important;
|
||
}
|
||
.phases-title {
|
||
font-size: clamp(26px, 3vw, 34px);
|
||
font-weight: 600;
|
||
letter-spacing: -0.02em;
|
||
color: var(--ink);
|
||
margin-top: 0;
|
||
line-height: 1.15;
|
||
}
|
||
.phases-row {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 32px;
|
||
}
|
||
@media (max-width: 880px) { .phases-row { grid-template-columns: 1fr 1fr; gap: 28px; } }
|
||
@media (max-width: 540px) { .phases-row { grid-template-columns: 1fr; gap: 24px; } }
|
||
.phase {
|
||
padding: 28px 24px;
|
||
background: var(--white);
|
||
border: 1px solid rgba(0,0,0,0.06);
|
||
border-radius: 14px;
|
||
border-top: 3px solid var(--blue);
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
|
||
box-shadow: 0 4px 14px -8px rgba(0,0,0,0.06);
|
||
}
|
||
.phase:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 18px 36px -16px rgba(0, 112, 199, 0.18);
|
||
}
|
||
.phases-row .phase:nth-child(2) { border-top-color: #6e7eaa; }
|
||
.phases-row .phase:nth-child(3) { border-top-color: #b08a6b; }
|
||
.phases-row .phase:nth-child(4) { border-top-color: var(--orange); }
|
||
|
||
/* Phase icon + number row */
|
||
.phase-head {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
margin-bottom: 16px;
|
||
}
|
||
.phase-icon {
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: 11px;
|
||
background: rgba(0, 112, 199, 0.1);
|
||
color: var(--blue);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
.phase-icon svg { width: 22px; height: 22px; }
|
||
.phases-row .phase:nth-child(2) .phase-icon { background: rgba(110, 126, 170, 0.12); color: #5e74a6; }
|
||
.phases-row .phase:nth-child(3) .phase-icon { background: rgba(176, 138, 107, 0.12); color: #b08a6b; }
|
||
.phases-row .phase:nth-child(4) .phase-icon { background: rgba(236, 139, 51, 0.12); color: var(--orange); }
|
||
.phase-num {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.14em;
|
||
color: var(--blue);
|
||
margin-bottom: 0;
|
||
}
|
||
.phases-row .phase:nth-child(2) .phase-num { color: #5e74a6; }
|
||
.phases-row .phase:nth-child(3) .phase-num { color: #b08a6b; }
|
||
.phases-row .phase:nth-child(4) .phase-num { color: var(--orange); }
|
||
.phase-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: var(--ink);
|
||
margin-bottom: 10px;
|
||
letter-spacing: -0.01em;
|
||
line-height: 1.2;
|
||
}
|
||
.phase p {
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
color: var(--charcoal);
|
||
}
|
||
@media (max-width: 540px) {
|
||
.phases { padding: 44px 28px; }
|
||
.phases-header { margin-bottom: 36px; }
|
||
}
|
||
|
||
/* ─── ENGAGEMENT SIZE TABLE ─── */
|
||
.engagement {
|
||
background: var(--white); border: 1px solid rgba(0,0,0,0.07);
|
||
border-radius: 18px; padding: 36px;
|
||
box-shadow: 0 6px 24px -10px rgba(0,0,0,0.08);
|
||
}
|
||
.engagement-intro {
|
||
color: var(--charcoal); font-size: 15px; line-height: 1.6;
|
||
margin-bottom: 28px; max-width: 760px;
|
||
}
|
||
.engagement-vars {
|
||
display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
|
||
margin-bottom: 32px;
|
||
}
|
||
@media (max-width: 760px) { .engagement-vars { grid-template-columns: 1fr; } }
|
||
.var-card {
|
||
padding: 20px; border-radius: 12px; background: var(--grey-soft);
|
||
}
|
||
.var-card-label {
|
||
font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
|
||
text-transform: uppercase; color: var(--accent); margin-bottom: 8px;
|
||
}
|
||
.var-card-title {
|
||
font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 6px;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
.var-card-detail { font-size: 13.5px; color: var(--charcoal); line-height: 1.5; }
|
||
.engagement-summary {
|
||
padding: 22px; border-radius: 12px;
|
||
background: linear-gradient(135deg, rgba(0,112,199,0.06), rgba(236,139,51,0.06));
|
||
border: 1px solid rgba(0,112,199,0.12);
|
||
}
|
||
.engagement-summary strong { color: var(--ink); }
|
||
|
||
|
||
/* ─── PROJECT-TO-PARTNERSHIP JOURNEY (clean horizontal row, no cluster) ─── */
|
||
/* Three project tiers sit in a row on the left as "starting points", then a
|
||
visual transition column, then Partnership styled as the destination. */
|
||
.size-track {
|
||
position: relative;
|
||
display: grid;
|
||
grid-template-columns: 1.7fr auto 1.1fr;
|
||
align-items: stretch;
|
||
gap: 0;
|
||
padding: 0;
|
||
}
|
||
.size-track::before { display: none; }
|
||
|
||
/* Left side: small label + clean horizontal row of 3 project tiers */
|
||
.size-projects {
|
||
padding: 0 12px;
|
||
position: relative;
|
||
}
|
||
.size-projects-label {
|
||
display: block;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
color: var(--charcoal);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
margin-bottom: 32px;
|
||
text-align: center;
|
||
opacity: 0.7;
|
||
}
|
||
.size-projects-row {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 0;
|
||
position: relative;
|
||
}
|
||
/* Connecting line beneath the 3 markers — full width across the project row */
|
||
.size-projects-row::before {
|
||
content: '';
|
||
position: absolute;
|
||
/* Position aligns with marker centre */
|
||
top: 76px;
|
||
left: calc(16.66% + 8px);
|
||
right: calc(16.66% + 8px);
|
||
height: 2px;
|
||
background: var(--accent);
|
||
opacity: 0.25;
|
||
border-radius: 2px;
|
||
z-index: 0;
|
||
}
|
||
|
||
.size-projects-row .size-stop {
|
||
text-align: center;
|
||
padding: 0 14px;
|
||
position: relative;
|
||
z-index: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 0;
|
||
}
|
||
.size-projects-row .size-stop-label {
|
||
display: inline-block;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: var(--accent);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
margin-bottom: 12px;
|
||
padding: 4px 14px;
|
||
background: rgba(var(--accent-rgb), 0.1);
|
||
border-radius: 999px;
|
||
}
|
||
.size-projects-row .size-stop-time {
|
||
font-size: 22px;
|
||
font-weight: 600;
|
||
color: var(--ink);
|
||
letter-spacing: -0.015em;
|
||
margin-bottom: 14px;
|
||
line-height: 1.1;
|
||
}
|
||
.size-projects-row .size-stop-marker {
|
||
width: 18px;
|
||
height: 18px;
|
||
border-radius: 50%;
|
||
background: var(--accent);
|
||
border: 3px solid var(--white);
|
||
box-shadow: 0 4px 12px -2px rgba(0,0,0,0.15);
|
||
margin-bottom: 16px;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
.size-projects-row .size-stop-desc {
|
||
font-size: 13.5px;
|
||
line-height: 1.5;
|
||
color: var(--charcoal);
|
||
padding: 0 6px;
|
||
}
|
||
|
||
/* The transition column — arrow + "Often evolves into" */
|
||
.size-transition {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0 22px;
|
||
text-align: center;
|
||
gap: 14px;
|
||
/* Vertically centre on the marker line — push slightly up to align with project markers */
|
||
padding-top: 32px;
|
||
}
|
||
.size-transition-label {
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
color: var(--charcoal);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.12em;
|
||
line-height: 1.4;
|
||
max-width: 110px;
|
||
}
|
||
.size-transition-arrow {
|
||
width: 56px;
|
||
height: 56px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, var(--blue), var(--orange));
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: var(--white);
|
||
box-shadow: 0 8px 22px -8px rgba(0, 112, 199, 0.35);
|
||
}
|
||
.size-transition-arrow svg {
|
||
width: 22px;
|
||
height: 22px;
|
||
}
|
||
|
||
/* Partnership tier — destination card, visually anchoring right side */
|
||
.size-stop.partnership {
|
||
text-align: center;
|
||
padding: 36px 28px 32px;
|
||
background: linear-gradient(135deg, rgba(0,112,199,0.06), rgba(236,139,51,0.08));
|
||
border: 1.5px solid rgba(var(--accent-rgb), 0.22);
|
||
border-radius: 18px;
|
||
margin-top: 0;
|
||
position: relative;
|
||
}
|
||
.size-stop.partnership::before {
|
||
content: 'Where we aim';
|
||
position: absolute;
|
||
top: -10px;
|
||
right: 22px;
|
||
background: var(--white);
|
||
border: 1px solid rgba(var(--accent-rgb), 0.25);
|
||
padding: 4px 12px;
|
||
border-radius: 999px;
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
color: var(--charcoal);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
}
|
||
.size-stop.partnership .size-stop-label {
|
||
background: linear-gradient(135deg, var(--blue), var(--orange));
|
||
color: var(--white);
|
||
padding: 6px 18px;
|
||
margin-bottom: 16px;
|
||
display: inline-block;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
border-radius: 999px;
|
||
}
|
||
.size-stop.partnership .size-stop-time {
|
||
font-size: 26px;
|
||
color: var(--ink);
|
||
margin-bottom: 14px;
|
||
font-weight: 600;
|
||
letter-spacing: -0.015em;
|
||
line-height: 1.1;
|
||
}
|
||
.size-stop.partnership .size-stop-desc {
|
||
font-size: 14px;
|
||
line-height: 1.55;
|
||
color: var(--charcoal);
|
||
}
|
||
.size-stop.partnership .size-stop-marker {
|
||
width: 32px;
|
||
height: 18px;
|
||
border-radius: 0;
|
||
background: transparent;
|
||
border: none;
|
||
box-shadow: none;
|
||
position: relative;
|
||
margin: 0 auto 16px;
|
||
}
|
||
.size-stop.partnership .size-stop-marker::before,
|
||
.size-stop.partnership .size-stop-marker::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
width: 14px;
|
||
height: 14px;
|
||
border: 3px solid var(--accent);
|
||
border-radius: 50%;
|
||
}
|
||
.size-stop.partnership .size-stop-marker::before {
|
||
left: 0;
|
||
border-color: var(--blue);
|
||
}
|
||
.size-stop.partnership .size-stop-marker::after {
|
||
right: 0;
|
||
border-color: var(--orange);
|
||
}
|
||
|
||
/* Mobile/tablet: stack the journey vertically */
|
||
@media (max-width: 920px) {
|
||
.size-track {
|
||
grid-template-columns: 1fr;
|
||
gap: 28px;
|
||
}
|
||
.size-projects {
|
||
padding: 0;
|
||
}
|
||
.size-projects-label {
|
||
margin-bottom: 24px;
|
||
}
|
||
.size-projects-row {
|
||
grid-template-columns: 1fr;
|
||
gap: 28px;
|
||
}
|
||
.size-projects-row::before {
|
||
display: none;
|
||
}
|
||
.size-projects-row .size-stop {
|
||
padding: 0 12px;
|
||
}
|
||
.size-transition {
|
||
flex-direction: row;
|
||
padding: 8px 0;
|
||
gap: 16px;
|
||
justify-content: center;
|
||
}
|
||
.size-transition-arrow {
|
||
transform: rotate(90deg);
|
||
width: 44px;
|
||
height: 44px;
|
||
}
|
||
.size-transition-arrow svg {
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
.size-transition-label {
|
||
max-width: none;
|
||
}
|
||
.size-stop.partnership {
|
||
padding: 32px 24px 28px;
|
||
}
|
||
.size-stop.partnership::before {
|
||
right: auto;
|
||
left: 22px;
|
||
}
|
||
}
|
||
|
||
|
||
/* ─── CTA ─── */
|
||
.cta-wrap { padding: 100px 28px 120px; background: var(--white); }
|
||
.cta-card {
|
||
max-width: 1100px; margin: 0 auto;
|
||
background: linear-gradient(135deg, #1a2230 0%, #1a1a1a 60%, #2a1f1a 100%);
|
||
border-radius: 24px; padding: 70px 50px; text-align: center;
|
||
position: relative; overflow: hidden; color: white;
|
||
}
|
||
.cta-card::before {
|
||
content: ''; position: absolute; top: -30%; left: -10%; width: 60%; height: 160%;
|
||
background: radial-gradient(ellipse, rgba(0,112,199,0.22), transparent 65%); pointer-events: none;
|
||
}
|
||
.cta-card::after {
|
||
content: ''; position: absolute; bottom: -30%; right: -10%; width: 60%; height: 160%;
|
||
background: radial-gradient(ellipse, rgba(236,139,51,0.18), transparent 65%); pointer-events: none;
|
||
}
|
||
.cta-inner { position: relative; z-index: 2; max-width: 700px; margin: 0 auto; }
|
||
.cta-card h2 {
|
||
font-size: clamp(30px, 4.2vw, 48px); font-weight: 600;
|
||
letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 16px;
|
||
}
|
||
.cta-card h2 em {
|
||
font-style: italic; font-weight: 500; color: var(--orange); margin-right: 0.12em;
|
||
}
|
||
.cta-card p {
|
||
font-size: 16px; color: rgba(255,255,255,0.78);
|
||
margin-bottom: 30px; line-height: 1.55;
|
||
}
|
||
.btn-on-dark {
|
||
background: var(--blue); color: white;
|
||
box-shadow: 0 12px 32px -8px rgba(0,112,199,0.5);
|
||
}
|
||
.btn-on-dark:hover { background: var(--blue-deep); }
|
||
.btn-ghost-dark {
|
||
background: transparent; color: white; border: 1px solid rgba(255,255,255,0.25);
|
||
}
|
||
.btn-ghost-dark:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.4); }
|
||
@media (max-width: 720px) { .cta-card { padding: 50px 28px; } }
|
||
|
||
/* ─── FOOTER (matches homepage) ─── */
|
||
.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;
|
||
}
|
||
@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.55; max-width: 280px; }
|
||
.footer-col h5 {
|
||
font-size: 13px; font-weight: 600; text-transform: uppercase;
|
||
letter-spacing: 0.05em; margin-bottom: 16px; color: rgba(255,255,255,0.5);
|
||
}
|
||
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
|
||
.footer-col a {
|
||
color: rgba(255,255,255,0.85); 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.1); padding-top: 24px;
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
font-size: 13px; color: rgba(255,255,255,0.5); flex-wrap: wrap; gap: 12px;
|
||
}
|
||
|
||
/* Reveal */
|
||
@media (prefers-reduced-motion: no-preference) {
|
||
.reveal {
|
||
opacity: 0; transform: translateY(20px);
|
||
transition: opacity 0.8s ease, transform 0.8s ease;
|
||
}
|
||
.reveal.in { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
|
||
/* ─── "What this looks like in practice" — value examples ─── */
|
||
.examples-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 24px;
|
||
margin-top: 12px;
|
||
}
|
||
@media (max-width: 880px) {
|
||
.examples-grid { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
.example-card {
|
||
background: var(--white);
|
||
border: 1px solid rgba(0,0,0,0.07);
|
||
border-radius: 18px;
|
||
padding: 32px 32px 28px;
|
||
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
|
||
box-shadow: 0 6px 22px -10px rgba(0,0,0,0.07);
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.example-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 22px 48px -22px rgba(var(--accent-rgb), 0.22);
|
||
border-color: rgba(var(--accent-rgb), 0.3);
|
||
}
|
||
|
||
.example-eyebrow {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
color: var(--accent);
|
||
margin-bottom: 14px;
|
||
}
|
||
.example-eyebrow svg {
|
||
width: 14px;
|
||
height: 14px;
|
||
}
|
||
|
||
.example-card h3 {
|
||
font-size: 21px;
|
||
font-weight: 600;
|
||
letter-spacing: -0.015em;
|
||
line-height: 1.25;
|
||
color: var(--ink);
|
||
margin-bottom: 14px;
|
||
}
|
||
.example-card > p {
|
||
font-size: 15px;
|
||
line-height: 1.6;
|
||
color: var(--charcoal);
|
||
margin-bottom: 22px;
|
||
}
|
||
|
||
/* Outcome metrics row — now 2 metrics, more breathing room */
|
||
.example-outcomes {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 18px;
|
||
padding: 20px 0 4px;
|
||
border-top: 1px solid rgba(0,0,0,0.06);
|
||
}
|
||
@media (max-width: 540px) {
|
||
.example-outcomes { grid-template-columns: 1fr; gap: 12px; }
|
||
}
|
||
.example-outcome {
|
||
text-align: left;
|
||
padding: 0 4px;
|
||
}
|
||
.example-outcome-value {
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
color: var(--accent);
|
||
letter-spacing: -0.02em;
|
||
line-height: 1.1;
|
||
margin-bottom: 4px;
|
||
}
|
||
/* Asterisk superscript — same accent colour, no underline */
|
||
.example-outcome-value sup {
|
||
font-size: 0.55em;
|
||
font-weight: 600;
|
||
margin-left: 1px;
|
||
vertical-align: super;
|
||
line-height: 1;
|
||
}
|
||
.example-outcome-label {
|
||
font-size: 12.5px;
|
||
color: var(--charcoal);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* Page-level footnote — slim band sitting between the examples section
|
||
and the closing CTA. Annotates the asterisks on the example metrics. */
|
||
.page-footnote {
|
||
max-width: 880px;
|
||
margin: 0 auto;
|
||
padding: 24px 28px;
|
||
background: transparent;
|
||
border-top: 1px solid rgba(0,0,0,0.08);
|
||
border-bottom: 1px solid rgba(0,0,0,0.08);
|
||
font-size: 12.5px;
|
||
line-height: 1.6;
|
||
color: var(--charcoal);
|
||
text-align: center;
|
||
}
|
||
.page-footnote sup {
|
||
font-weight: 600;
|
||
color: var(--accent);
|
||
margin-right: 2px;
|
||
}
|
||
.page-footnote strong { color: var(--ink); font-weight: 600; }
|
||
.page-footnote-wrap {
|
||
padding: 0 28px;
|
||
background: var(--white);
|
||
}
|
||
|
||
/* ─── Background pattern: honeycomb (Digital Solutions / structured systems) ─── */
|
||
.page-hero {
|
||
background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
|
||
position: relative;
|
||
}
|
||
.page-hero::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2256%22%20height%3D%2248%22%20viewBox%3D%220%200%2056%2048%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%230070c7%22%20stroke-width%3D%221.5%22%20opacity%3D%220.6%22%3E%0A%20%20%20%20%3Cpolygon%20points%3D%2214%2C4%2028%2C4%2035%2C16%2028%2C28%2014%2C28%207%2C16%22/%3E%0A%20%20%20%20%3Cpolygon%20points%3D%2242%2C28%2056%2C28%2063%2C40%2056%2C52%2042%2C52%2035%2C40%22/%3E%0A%20%20%20%20%3Cpolygon%20points%3D%22-14%2C28%200%2C28%207%2C40%200%2C52%20-14%2C52%20-21%2C40%22/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E");
|
||
background-repeat: repeat;
|
||
background-size: 56px 48px;
|
||
opacity: 0.08;
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
}
|
||
.page-hero > * { position: relative; z-index: 1; }
|
||
.page-hero-inner { position: relative; z-index: 1; }
|
||
|
||
#approach {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
#approach::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0; left: 0; right: 0; bottom: 0;
|
||
background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2256%22%20height%3D%2248%22%20viewBox%3D%220%200%2056%2048%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%230070c7%22%20stroke-width%3D%221.5%22%20opacity%3D%220.6%22%3E%0A%20%20%20%20%3Cpolygon%20points%3D%2214%2C4%2028%2C4%2035%2C16%2028%2C28%2014%2C28%207%2C16%22/%3E%0A%20%20%20%20%3Cpolygon%20points%3D%2242%2C28%2056%2C28%2063%2C40%2056%2C52%2042%2C52%2035%2C40%22/%3E%0A%20%20%20%20%3Cpolygon%20points%3D%22-14%2C28%200%2C28%207%2C40%200%2C52%20-14%2C52%20-21%2C40%22/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E");
|
||
background-repeat: repeat;
|
||
background-size: 70px 60px;
|
||
opacity: 0.05;
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
}
|
||
#approach > * { position: relative; z-index: 1; }
|
||
|
||
|
||
/* ─── Reveal animation on example outcome metrics ─── */
|
||
/* When the card scrolls into view, the values fade in and slide up,
|
||
staggered for visual rhythm. Made more noticeable with longer duration
|
||
and bigger movement. */
|
||
.example-outcome-value {
|
||
opacity: 0;
|
||
transform: translateY(16px);
|
||
transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
|
||
transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||
}
|
||
.example-card.is-revealed .example-outcome-value {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
/* Stagger so first outcome appears, then second one a moment later */
|
||
.example-card.is-revealed .example-outcome:nth-child(1) .example-outcome-value {
|
||
transition-delay: 0.05s;
|
||
}
|
||
.example-card.is-revealed .example-outcome:nth-child(2) .example-outcome-value {
|
||
transition-delay: 0.30s;
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.example-outcome-value {
|
||
opacity: 1;
|
||
transform: none;
|
||
transition: none;
|
||
}
|
||
}
|
||
|
||
/* Mobile: dial back the bumped section padding so phones don't waste space */
|
||
@media (max-width: 720px) {
|
||
.section { padding: 80px 22px; }
|
||
.page-hero { padding: 64px 22px 52px; }
|
||
.cta-wrap { padding: 64px 22px 80px; }
|
||
.section-head { margin-bottom: 48px; }
|
||
}
|
||
|
||
/* ─── Hero with photo (side-by-side, photo right on desktop, above on mobile) ─── */
|
||
.page-hero-inner.with-photo {
|
||
max-width: 1200px;
|
||
text-align: left;
|
||
display: grid;
|
||
grid-template-columns: 1.1fr 1fr;
|
||
gap: 56px;
|
||
align-items: center;
|
||
}
|
||
.page-hero-inner.with-photo .page-hero-text {
|
||
/* Text column */
|
||
}
|
||
.page-hero-photo {
|
||
aspect-ratio: 4 / 5;
|
||
border-radius: 22px;
|
||
overflow: hidden;
|
||
box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.18);
|
||
background: var(--grey);
|
||
}
|
||
.page-hero-photo img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
/* On smaller widths, stack: photo above, text below */
|
||
@media (max-width: 880px) {
|
||
.page-hero-inner.with-photo {
|
||
grid-template-columns: 1fr;
|
||
gap: 32px;
|
||
text-align: center;
|
||
}
|
||
.page-hero-inner.with-photo .page-hero-ctas {
|
||
justify-content: center;
|
||
}
|
||
.page-hero-photo {
|
||
aspect-ratio: 16 / 9;
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
order: -1; /* photo above text on mobile */
|
||
}
|
||
}
|
||
@media (max-width: 540px) {
|
||
.page-hero-photo { aspect-ratio: 4 / 3; }
|
||
}
|
||
|
||
/* ─── Section anchor photo (wide band above "Who it's for" cards) ─── */
|
||
.section-anchor-photo {
|
||
width: 100%;
|
||
max-width: 1100px;
|
||
margin: 0 auto 56px;
|
||
aspect-ratio: 21 / 9;
|
||
border-radius: 22px;
|
||
overflow: hidden;
|
||
box-shadow: 0 22px 50px -25px rgba(0, 0, 0, 0.15);
|
||
}
|
||
.section-anchor-photo img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
@media (max-width: 720px) {
|
||
.section-anchor-photo {
|
||
aspect-ratio: 16 / 9;
|
||
margin-bottom: 40px;
|
||
border-radius: 16px;
|
||
}
|
||
}
|
||
|
||
/* ─── Example card photo (horizontal band at top of card) ─── */
|
||
.example-card-photo {
|
||
margin: -32px -32px 24px; /* extends to card edges, since card has 32px padding */
|
||
aspect-ratio: 16 / 9;
|
||
overflow: hidden;
|
||
border-top-left-radius: 18px;
|
||
border-top-right-radius: 18px;
|
||
background: var(--grey);
|
||
}
|
||
.example-card-photo img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
|
||
/* Engagement-section accordion sits below the timeline — give it breathing room */
|
||
.engagement-accordion {
|
||
margin-top: 56px;
|
||
}
|
||
/* Second accordion (deliverables) sits below the first; smaller gap so they read as a pair */
|
||
.engagement-accordion-deliverables {
|
||
margin-top: 16px;
|
||
}
|
||
@media (max-width: 720px) {
|
||
.engagement-accordion { margin-top: 40px; }
|
||
.engagement-accordion-deliverables { margin-top: 12px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ───── NAV ───── -->
|
||
<nav class="nav">
|
||
<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">
|
||
<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>
|
||
</li>
|
||
<li><a href="../index.html#process">How it works</a></li>
|
||
<li><a href="../index.html#why">Why Lean 101</a></li>
|
||
<li><a href="../index.html#contact">Contact</a></li>
|
||
</ul>
|
||
<a href="../index.html#contact" class="nav-cta">Book a call</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><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 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><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>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- ───── PAGE HERO ───── -->
|
||
<header class="page-hero">
|
||
<div class="page-hero-inner with-photo">
|
||
<div class="page-hero-text">
|
||
<span class="page-eyebrow">Digital Solutions</span>
|
||
<h1>Custom apps, dashboards & <em>automation.</em></h1>
|
||
<p class="page-hero-sub">
|
||
From Power BI dashboards to custom web apps that replace clunky spreadsheets — we build tailored software that streamlines your operations and makes data work for you. Built by people who understand the operations they're improving.
|
||
</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>
|
||
</a>
|
||
<a href="#approach" class="btn btn-secondary">See how it works</a>
|
||
</div>
|
||
</div>
|
||
<div class="page-hero-photo">
|
||
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=1600&q=80" alt="Operational dashboard with charts and live data">
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ───── WHO IT'S FOR ───── -->
|
||
<section class="section">
|
||
<div class="section-inner">
|
||
<div class="section-anchor-photo">
|
||
<img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=1600&q=80" alt="Person reviewing data and analytics on a screen">
|
||
</div>
|
||
<div class="section-head">
|
||
<div class="section-eyebrow">Who it's for</div>
|
||
<h2 class="section-title">Built for businesses where the spreadsheets have outgrown themselves.</h2>
|
||
<p class="section-lede">
|
||
Most of our Digital Solutions work starts as: "we're running this on Excel and it's gotten out of hand." Custom software built for your operations replaces the duct tape — without ripping up what already works.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="fit-grid">
|
||
<div class="fit-card">
|
||
<div class="fit-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/></svg>
|
||
</div>
|
||
<h3>Critical processes run on a single Excel file</h3>
|
||
<p>One person knows the formulas. The file emails around as v17, v18, v18-final, v18-final-FINAL. When that person is on leave, work stops.</p>
|
||
</div>
|
||
<div class="fit-card">
|
||
<div class="fit-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
|
||
</div>
|
||
<h3>Reporting takes a day, not a click</h3>
|
||
<p>End-of-month, someone manually pulls data from three systems, copies it into a deck, formats charts, sends it round. By the time it lands, it's already old.</p>
|
||
</div>
|
||
<div class="fit-card">
|
||
<div class="fit-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12c.552 0 1-.448 1-1V5c0-.552-.448-1-1-1H3c-.552 0-1 .448-1 1v6c0 .552.448 1 1 1"/><path d="M2 12v7c0 .552.448 1 1 1h18c.552 0 1-.448 1-1v-7"/><line x1="6" y1="17" x2="6.01" y2="17"/><line x1="10" y1="17" x2="10.01" y2="17"/></svg>
|
||
</div>
|
||
<h3>You're paying for SaaS that doesn't fit</h3>
|
||
<p>You bought an off-the-shelf tool that does 60% of what you need, and your team works around the missing 40% in spreadsheets. The cost compounds — money out the door, time wasted on workarounds.</p>
|
||
</div>
|
||
<div class="fit-card">
|
||
<div class="fit-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
|
||
</div>
|
||
<h3>The data exists — but no one can see it</h3>
|
||
<p>Your CRM, accounting system, and project tools all hold useful data. But there's no single view that answers the simple operational questions you ask every week.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ───── APPROACH (4-step process) ───── -->
|
||
<!-- ───── APPROACH: WHAT WE BUILD ───── -->
|
||
<section class="section" id="approach">
|
||
<div class="section-inner">
|
||
<div class="section-head center">
|
||
<div class="section-eyebrow">What we build</div>
|
||
<h2 class="section-title">Three kinds of builds, one disciplined method.</h2>
|
||
<p class="section-lede">
|
||
Most Digital Solutions engagements land in one of three categories. Each is built the same way — understand the work, ship a focused MVP, iterate with users, hand it over fully owned.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="builds-grid">
|
||
<div class="build-card">
|
||
<div class="build-preview build-preview-dashboard" aria-hidden="true">
|
||
<div class="bp-bar bp-bar-1"></div>
|
||
<div class="bp-bar bp-bar-2"></div>
|
||
<div class="bp-bar bp-bar-3"></div>
|
||
<div class="bp-bar bp-bar-4"></div>
|
||
<div class="bp-bar bp-bar-5"></div>
|
||
<div class="bp-line"><svg viewBox="0 0 200 60" preserveAspectRatio="none"><polyline points="0,40 30,30 60,35 90,20 120,25 150,10 180,15 200,5" fill="none" stroke="currentColor" stroke-width="2"/></svg></div>
|
||
</div>
|
||
<div class="build-body">
|
||
<span class="build-tag">Dashboards</span>
|
||
<h3>Operational visibility, refreshed automatically.</h3>
|
||
<p>Power BI dashboards that pull from your real systems and answer the questions you ask each week — production output, lead times, defect rates, capacity, financial performance. End-of-month reporting goes from a day to a click.</p>
|
||
<ul class="build-bullets">
|
||
<li>Real-time data from your existing systems</li>
|
||
<li>Tailored views per role (operators, supervisors, leadership)</li>
|
||
<li>Automated email digests and alerts</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="build-card">
|
||
<div class="build-preview build-preview-app" aria-hidden="true">
|
||
<div class="bp-app-header"></div>
|
||
<div class="bp-app-row"></div>
|
||
<div class="bp-app-row"></div>
|
||
<div class="bp-app-row"></div>
|
||
<div class="bp-app-row"></div>
|
||
<div class="bp-app-fab"></div>
|
||
</div>
|
||
<div class="build-body">
|
||
<span class="build-tag">Web apps</span>
|
||
<h3>Custom apps that replace clunky spreadsheets.</h3>
|
||
<p>Tailored web applications for the workflows that have outgrown Excel — order tracking, scheduling, inventory, quality logs, audit checklists. Multi-user, role-aware, accessible from anywhere, no more "v18-final-FINAL.xlsx."</p>
|
||
<ul class="build-bullets">
|
||
<li>One source of truth, no more conflicting copies</li>
|
||
<li>Mobile-friendly so frontline teams can use it on the floor</li>
|
||
<li>Full audit trail of who changed what and when</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="build-card">
|
||
<div class="build-preview build-preview-auto" aria-hidden="true">
|
||
<div class="bp-node bp-node-1">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="3" y1="9" x2="21" y2="9"/></svg>
|
||
</div>
|
||
<div class="bp-arrow bp-arrow-1"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg></div>
|
||
<div class="bp-node bp-node-2">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
|
||
</div>
|
||
<div class="bp-arrow bp-arrow-2"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg></div>
|
||
<div class="bp-node bp-node-3">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
</div>
|
||
</div>
|
||
<div class="build-body">
|
||
<span class="build-tag">Automation</span>
|
||
<h3>Repetitive admin work, automated away.</h3>
|
||
<p>The copy-paste between systems, the manual report generation, the daily reconciliation — all the work nobody wants to do but somebody has to. Automated using Power Automate, Python scripts, or whatever tool fits the job.</p>
|
||
<ul class="build-bullets">
|
||
<li>Hours of admin work removed from your team's week</li>
|
||
<li>Fewer errors from manual data entry</li>
|
||
<li>Triggered notifications when things need human attention</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- "How we build" — the four-phase build method, given proper space -->
|
||
<div class="phases">
|
||
<div class="phases-header">
|
||
<span class="section-eyebrow">How we build</span>
|
||
<h3 class="phases-title">Same four phases, every build.</h3>
|
||
</div>
|
||
<div class="phases-row">
|
||
<div class="phase">
|
||
<div class="phase-head">
|
||
<div class="phase-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<circle cx="11" cy="11" r="8"/>
|
||
<path d="m21 21-4.3-4.3"/>
|
||
</svg>
|
||
</div>
|
||
<div class="phase-num">01</div>
|
||
</div>
|
||
<div class="phase-title">Understand the work</div>
|
||
<p>We watch the process before we touch code. Talk to the people who'll use it. Document what's actually happening today, not what the org chart says.</p>
|
||
</div>
|
||
<div class="phase">
|
||
<div class="phase-head">
|
||
<div class="phase-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
||
<polyline points="14 2 14 8 20 8"/>
|
||
<path d="m9 18 2-2-2-2"/>
|
||
<path d="m13 14 2 2-2 2"/>
|
||
</svg>
|
||
</div>
|
||
<div class="phase-num">02</div>
|
||
</div>
|
||
<div class="phase-title">Ship the MVP</div>
|
||
<p>A focused first version, working on real data within weeks. Not pretty yet, but real — running in your environment, doing one job well.</p>
|
||
</div>
|
||
<div class="phase">
|
||
<div class="phase-head">
|
||
<div class="phase-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M21 12a9 9 0 1 1-3-6.7L21 8"/>
|
||
<path d="M21 3v5h-5"/>
|
||
</svg>
|
||
</div>
|
||
<div class="phase-num">03</div>
|
||
</div>
|
||
<div class="phase-title">Iterate with users</div>
|
||
<p>Your team uses it. We watch how. Friction surfaces fast. We fix what matters, drop what doesn't, add the features that earn their place.</p>
|
||
</div>
|
||
<div class="phase">
|
||
<div class="phase-head">
|
||
<div class="phase-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
|
||
<polyline points="22 4 12 14.01 9 11.01"/>
|
||
</svg>
|
||
</div>
|
||
<div class="phase-num">04</div>
|
||
</div>
|
||
<div class="phase-title">Hand it over</div>
|
||
<p>Documentation, admin training, source code, deployment guide. Your team can run, extend, and modify the tool — we're a call away, not a dependency.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ───── WHAT THIS LOOKS LIKE IN PRACTICE ───── -->
|
||
<section class="section alt">
|
||
<div class="section-inner">
|
||
<div class="section-head">
|
||
<div class="section-eyebrow">What this looks like in practice</div>
|
||
<h2 class="section-title">Where Digital Solutions delivers real value.</h2>
|
||
<p class="section-lede">
|
||
Two illustrative scenarios showing what kind of build this looks like and what kind of impact typically follows. Real projects are scoped to your operations, systems, and team.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="examples-grid">
|
||
<div class="example-card">
|
||
<div class="example-card-photo">
|
||
<img src="https://images.unsplash.com/photo-1543286386-713bdd548da4?auto=format&fit=crop&w=1200&q=80" alt="Live operational dashboard with charts">
|
||
</div>
|
||
<span class="example-eyebrow">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
|
||
Operational dashboard
|
||
</span>
|
||
<h3>Replacing manual reporting with live Power BI dashboards.</h3>
|
||
<p>End-of-month reporting takes a day, the data's old by the time it's seen, decisions are made on gut. We connect your existing systems to a Power BI workspace, design role-aware views for operators, supervisors, and leadership, and set up automated daily refresh.</p>
|
||
<div class="example-outcomes">
|
||
<div class="example-outcome">
|
||
<div class="example-outcome-value">−90 to −95%<sup>*</sup></div>
|
||
<div class="example-outcome-label">Time spent compiling reports</div>
|
||
</div>
|
||
<div class="example-outcome">
|
||
<div class="example-outcome-value">3–6 weeks<sup>*</sup></div>
|
||
<div class="example-outcome-label">Typical build time</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="example-card">
|
||
<div class="example-card-photo">
|
||
<img src="https://images.unsplash.com/photo-1517292987719-0369a794ec0f?auto=format&fit=crop&w=1200&q=80" alt="Custom application interface on a clean screen">
|
||
</div>
|
||
<span class="example-eyebrow">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/></svg>
|
||
Custom web application
|
||
</span>
|
||
<h3>Replacing a critical spreadsheet with a custom web app.</h3>
|
||
<p>A single Excel file runs a critical process, one person knows the formulas, the file emails around as v17, v18, v18-final. We map the actual workflow, build a tailored multi-user web app with role-based access, and migrate live data — running the new tool alongside the spreadsheet during cutover.</p>
|
||
<div class="example-outcomes">
|
||
<div class="example-outcome">
|
||
<div class="example-outcome-value">−60 to −80%<sup>*</sup></div>
|
||
<div class="example-outcome-label">Errors from manual data entry</div>
|
||
</div>
|
||
<div class="example-outcome">
|
||
<div class="example-outcome-value">8–16 weeks<sup>*</sup></div>
|
||
<div class="example-outcome-label">Typical build time</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ───── ENGAGEMENT SIZE & TIMEFRAME ───── -->
|
||
<section class="section">
|
||
<div class="section-inner">
|
||
<div class="section-head">
|
||
<div class="section-eyebrow">The engagement</div>
|
||
<h2 class="section-title">A focused build. Often, the start of a partnership.</h2>
|
||
<p class="section-lede">
|
||
Most builds begin as a focused project — a dashboard, a custom app, or a multi-system integration. The work that delivers tends to grow into an ongoing technology partnership as your operations evolve and tooling needs grow.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="engagement">
|
||
<div class="size-timeline">
|
||
<div class="size-track">
|
||
<div class="size-projects">
|
||
<div class="size-projects-label">Starting points</div>
|
||
<div class="size-projects-row">
|
||
<div class="size-stop">
|
||
<div class="size-stop-label">Small</div>
|
||
<div class="size-stop-time">3–6 weeks</div>
|
||
<div class="size-stop-marker"></div>
|
||
<div class="size-stop-desc">Focused dashboard or single automation. One data source, one job done well.</div>
|
||
</div>
|
||
<div class="size-stop">
|
||
<div class="size-stop-label">Medium</div>
|
||
<div class="size-stop-time">8–16 weeks</div>
|
||
<div class="size-stop-marker"></div>
|
||
<div class="size-stop-desc">Custom web app replacing a critical spreadsheet. Multi-user, role-aware.</div>
|
||
</div>
|
||
<div class="size-stop">
|
||
<div class="size-stop-label">Large</div>
|
||
<div class="size-stop-time">3–6 months</div>
|
||
<div class="size-stop-marker"></div>
|
||
<div class="size-stop-desc">Multi-system integration or platform-scale build. Multiple connected workflows.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="size-transition" aria-hidden="true">
|
||
<div class="size-transition-arrow">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M5 12h14"/>
|
||
<path d="m13 6 6 6-6 6"/>
|
||
</svg>
|
||
</div>
|
||
<div class="size-transition-label">Often<br>evolves into</div>
|
||
</div>
|
||
|
||
<div class="size-stop partnership">
|
||
<div class="size-stop-label">Partnership</div>
|
||
<div class="size-stop-time">Ongoing</div>
|
||
<div class="size-stop-marker"></div>
|
||
<div class="size-stop-desc">Ongoing digital partner. We build, support, and continuously evolve your tooling — adding features, integrations, and dashboards as your operations grow.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="accordion engagement-accordion" data-state="closed">
|
||
<button class="accordion-toggle" type="button" aria-expanded="false" aria-controls="considerations-panel-digital">
|
||
<span class="accordion-toggle-text">
|
||
<span class="accordion-toggle-title">What drives scope and timeline</span>
|
||
<span class="accordion-toggle-hint">Three considerations shape where a build lands — scope, integrations, and your team's role in the work.</span>
|
||
</span>
|
||
<span class="accordion-chevron" aria-hidden="true">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
|
||
</span>
|
||
</button>
|
||
<div class="accordion-panel" id="considerations-panel-digital" aria-hidden="true">
|
||
<div class="accordion-panel-inner">
|
||
<div class="engagement-vars">
|
||
<div class="var-card">
|
||
<div class="var-card-label">Consideration 1</div>
|
||
<div class="var-card-title">Scope of the build</div>
|
||
<div class="var-card-detail">A single Power BI dashboard pulling from one data source is one size. A custom multi-user app replacing a critical spreadsheet is another. A platform with admin tools, multiple roles, and integrations is bigger again.</div>
|
||
</div>
|
||
<div class="var-card">
|
||
<div class="var-card-label">Consideration 2</div>
|
||
<div class="var-card-title">Systems & integrations</div>
|
||
<div class="var-card-detail">Pulling from one tidy database is fast. Integrating across CRM, ERP, accounting, and three legacy systems with no APIs is slower. We scope this honestly upfront.</div>
|
||
</div>
|
||
<div class="var-card">
|
||
<div class="var-card-label">Consideration 3</div>
|
||
<div class="var-card-title">Internal involvement</div>
|
||
<div class="var-card-detail">If your team is hands-on (clear requirements, fast feedback, willing tester pool), build is faster. If we have to chase decisions and validate assumptions, it stretches.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="accordion engagement-accordion-deliverables" data-state="closed">
|
||
<button class="accordion-toggle" type="button" aria-expanded="false" aria-controls="included-panel-digital">
|
||
<span class="accordion-toggle-text">
|
||
<span class="accordion-toggle-title">See what's in a typical engagement</span>
|
||
<span class="accordion-toggle-hint">Six deliverables — dashboards, custom apps, automation, integrations, and training.</span>
|
||
</span>
|
||
<span class="accordion-chevron" aria-hidden="true">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
|
||
</span>
|
||
</button>
|
||
<div class="accordion-panel" id="included-panel-digital" aria-hidden="true">
|
||
<div class="accordion-panel-inner">
|
||
<div class="deliverables">
|
||
<div class="deliverable">
|
||
<h4>Power BI dashboards</h4>
|
||
<p>Operational dashboards that pull from your real systems, refresh automatically, and answer the questions you actually ask each week. No more end-of-month reporting drama.</p>
|
||
</div>
|
||
<div class="deliverable">
|
||
<h4>Custom web apps</h4>
|
||
<p>Tailored applications that replace the spreadsheets running critical processes — order tracking, scheduling, inventory, quality logs. Multi-user, role-aware, accessible anywhere.</p>
|
||
</div>
|
||
<div class="deliverable">
|
||
<h4>Process automation</h4>
|
||
<p>The repetitive admin work — copying data between systems, generating reports, triggering notifications — automated so your team can focus on the work that actually needs them.</p>
|
||
</div>
|
||
<div class="deliverable">
|
||
<h4>Data integration & pipelines</h4>
|
||
<p>Connecting your existing systems (CRM, ERP, project tools, spreadsheets) so data flows once, automatically — and feeds the dashboards and apps that actually use it.</p>
|
||
</div>
|
||
<div class="deliverable">
|
||
<h4>KPI & metrics design</h4>
|
||
<p>What gets measured, how it gets shown, who sees it. Designed alongside your team so the numbers actually drive decisions, not just decorate slide decks.</p>
|
||
</div>
|
||
<div class="deliverable">
|
||
<h4>Training & handover</h4>
|
||
<p>Documentation, training sessions, and an admin handover so your team can run, maintain, and extend the tools themselves — without us in the loop.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ───── PAGE FOOTNOTE — annotates asterisks on examples metrics ───── -->
|
||
<div class="page-footnote-wrap">
|
||
<p class="page-footnote">
|
||
<sup>*</sup><strong>About these ranges.</strong> These are illustrative scenarios drawn from typical custom-software builds for SMBs — not specific client results. Real projects are scoped to your existing systems, integrations needed, and the workflow the tool needs to support.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- ───── 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>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>
|
||
</a>
|
||
<a href="mailto:hello@lean-101.com" class="btn btn-ghost-dark">hello@lean-101.com</a>
|
||
</div>
|
||
</div>
|
||
</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="consulting.html">Consulting</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>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>
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(e => {
|
||
if (e.isIntersecting) {
|
||
e.target.classList.add('in');
|
||
observer.unobserve(e.target);
|
||
}
|
||
});
|
||
}, { threshold: 0.1 });
|
||
document.querySelectorAll('.section, .cta-wrap').forEach(el => {
|
||
el.classList.add('reveal');
|
||
observer.observe(el);
|
||
});
|
||
</script>
|
||
|
||
<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);
|
||
});
|
||
// ─── 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');
|
||
if (exampleCards.length > 0) {
|
||
const exObs = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('is-revealed');
|
||
exObs.unobserve(entry.target);
|
||
}
|
||
});
|
||
}, { threshold: 0.5, rootMargin: '0px 0px -10% 0px' });
|
||
exampleCards.forEach(card => exObs.observe(card));
|
||
}
|
||
|
||
|
||
// ─── Accordion toggle for "What's included" ───
|
||
document.querySelectorAll('.accordion').forEach(acc => {
|
||
const toggle = acc.querySelector('.accordion-toggle');
|
||
const panel = acc.querySelector('.accordion-panel');
|
||
if (!toggle || !panel) return;
|
||
|
||
toggle.addEventListener('click', () => {
|
||
const isOpen = acc.dataset.state === 'open';
|
||
if (isOpen) {
|
||
// Closing: set explicit max-height first (current height), then transition to 0
|
||
panel.style.maxHeight = panel.scrollHeight + 'px';
|
||
// Force a reflow so the browser registers the explicit height
|
||
// before we transition to 0
|
||
panel.offsetHeight;
|
||
panel.style.maxHeight = '0px';
|
||
acc.dataset.state = 'closed';
|
||
toggle.setAttribute('aria-expanded', 'false');
|
||
panel.setAttribute('aria-hidden', 'true');
|
||
} else {
|
||
// Opening: set max-height to content height, then clean up after transition
|
||
panel.style.maxHeight = panel.scrollHeight + 'px';
|
||
acc.dataset.state = 'open';
|
||
toggle.setAttribute('aria-expanded', 'true');
|
||
panel.setAttribute('aria-hidden', 'false');
|
||
// After the transition, set max-height to 'none' so resize doesn't clip content
|
||
panel.addEventListener('transitionend', function once() {
|
||
if (acc.dataset.state === 'open') {
|
||
panel.style.maxHeight = 'none';
|
||
}
|
||
panel.removeEventListener('transitionend', once);
|
||
});
|
||
}
|
||
});
|
||
});
|
||
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|