/* ============================================================================= growthJourney.css — Axcces Growth Journey presentation ----------------------------------------------------------------------------- Every colour resolves through the app tokens declared in theme-bridge.css, so the deck follows whichever DevExpress theme is active (light or dark) without a palette of its own. The one thing it adds is --growth-accent: each chapter publishes a single hue, and everything inside that chapter tints itself by mixing that hue into the *active theme's* surface / foreground. That is why there are no literal greys or whites below. Font-family is deliberately never declared — classic DX themes set it on without a variable, so inheritance is the only reliable route. ============================================================================= */ .growth-journey { /* Deck identity: dark blue for what was built, orange for how it grew. Fixed rather than inherited from --app-primary so the presentation keeps one look under any DX theme — it is shown to leadership and customers, where consistency beats theme-following. */ --growth-brand: #1e3a8a; --growth-brand-mid: #2563eb; --growth-brand-grow: #ea580c; --growth-accent: var(--growth-brand); --growth-radius: 18px; --growth-radius-sm: 12px; --growth-gap: 20px; --growth-shadow: 0 1px 2px color-mix(in srgb, var(--app-fg) 6%, transparent), 0 10px 30px color-mix(in srgb, var(--app-fg) 7%, transparent); --growth-shadow-lift: 0 2px 4px color-mix(in srgb, var(--app-fg) 8%, transparent), 0 18px 44px color-mix(in srgb, var(--app-fg) 12%, transparent); display: flex; flex-direction: column; min-height: 100vh; background: var(--app-surface-soft); color: var(--app-fg); outline: none; } /* The deck sizes everything from padded boxes; don't depend on a host reset for it. */ .growth-journey, .growth-journey *, .growth-journey *::before, .growth-journey *::after { box-sizing: border-box; } /* Accent scope roots. Derived tokens must be declared on the same element that sets --growth-accent, because a custom property that references another one is resolved where it is DECLARED and then inherited as a finished value. */ .growth-slide, .growth-cover, .growth-closing, .growth-customer, .growth-moduleprofile, .growth-rail__item, .growth-deckbar__dot { --growth-accent-soft: color-mix(in srgb, var(--growth-accent) 12%, var(--app-surface)); --growth-accent-soft-strong: color-mix(in srgb, var(--growth-accent) 24%, var(--app-surface)); --growth-accent-line: color-mix(in srgb, var(--growth-accent) 34%, var(--app-border)); --growth-accent-ink: color-mix(in srgb, var(--growth-accent) 72%, var(--app-fg)); --growth-accent-glow: color-mix(in srgb, var(--growth-accent) 20%, transparent); /* Text sitting ON a solid accent fill. Every chapter accent is a saturated mid-tone, so this stays legible in both themes — unlike --app-surface, which would put dark text on a dark-theme accent. The white is deliberate: the background it covers is a literal too. */ --growth-on-accent: color-mix(in srgb, var(--growth-accent) 10%, #ffffff); } /* ----------------------------------------------------------------------------- Top bar -------------------------------------------------------------------------- */ .growth-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 66px; padding: 10px 24px; background: color-mix(in srgb, var(--app-surface) 88%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--app-border); } .growth-topbar__brand { display: flex; align-items: center; gap: 14px; min-width: 0; } .growth-topbar__wordmark { font-size: 17px; font-weight: 800; letter-spacing: 0.26em; color: var(--app-fg); } .growth-topbar__divider { width: 1px; height: 26px; background: var(--app-border); } .growth-topbar__titles { display: flex; flex-direction: column; min-width: 0; } .growth-topbar__title { font-size: 14px; font-weight: 700; line-height: 1.25; } .growth-topbar__range { font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--app-muted); } .growth-topbar__actions { display: flex; align-items: center; gap: 10px; } /* ----------------------------------------------------------------------------- Buttons + view switch -------------------------------------------------------------------------- */ .growth-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 34px; padding: 0 15px; border: 1px solid var(--app-border); border-radius: 999px; background: var(--app-surface); color: var(--app-fg); font-size: 12.5px; font-weight: 650; line-height: 1; text-decoration: none; cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .growth-btn:hover:not(:disabled) { background: var(--app-surface-hover); border-color: color-mix(in srgb, var(--app-fg) 22%, var(--app-border)); color: var(--app-fg); text-decoration: none; } .growth-btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--app-primary) 45%, transparent); outline-offset: 2px; } .growth-btn:disabled { opacity: 0.42; cursor: default; } .growth-btn--ghost { background: transparent; } .growth-btn--nav { min-height: 38px; padding: 0 20px; } /* Next is the deck's forward action, so it wears the growth orange rather than the theme primary — the one control that should read as momentum. White literal because the fill is a literal: contrast here does not depend on the active theme. */ .growth-btn--primary { background: var(--growth-brand-grow); border-color: var(--growth-brand-grow); color: #ffffff; } .growth-btn--primary:hover:not(:disabled) { background: color-mix(in srgb, var(--growth-brand-grow) 86%, #000000); border-color: color-mix(in srgb, var(--growth-brand-grow) 86%, #000000); color: #ffffff; transform: translateY(-1px); box-shadow: 0 8px 20px color-mix(in srgb, var(--growth-brand-grow) 35%, transparent); } .growth-viewswitch { display: inline-flex; padding: 3px; border: 1px solid var(--app-border); border-radius: 999px; background: var(--app-surface-soft); } .growth-viewswitch__option { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 0 14px; border: none; border-radius: 999px; background: transparent; color: var(--app-muted); font-size: 12px; font-weight: 650; cursor: pointer; transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; } .growth-viewswitch__option:hover { color: var(--app-fg); } .growth-viewswitch__option.is-active { background: var(--app-surface); color: var(--app-fg); box-shadow: 0 1px 3px color-mix(in srgb, var(--app-fg) 14%, transparent); } /* ----------------------------------------------------------------------------- Body layout + chapter rail -------------------------------------------------------------------------- */ .growth-journey__body { display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: 0; flex: 1 1 auto; min-height: 0; } .growth-rail { position: sticky; top: 66px; align-self: start; max-height: calc(100vh - 66px); overflow-y: auto; padding: 26px 18px 26px 24px; border-right: 1px solid var(--app-border); } .growth-rail__kicker { display: block; margin-bottom: 16px; padding-left: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--app-muted); } .growth-rail__track { position: relative; } .growth-rail__list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; } /* The spine and its fill sit behind the markers and show journey progress. */ .growth-rail__spine, .growth-rail__spine-fill { position: absolute; left: 13px; top: 14px; bottom: 14px; width: 2px; border-radius: 999px; } .growth-rail__spine { background: var(--app-border); } /* Runs dark blue at the top to orange at the bottom: the spine itself carries the foundation-to-growth arc, so progress through the deck reads as the story's own shift. */ .growth-rail__spine-fill { bottom: auto; height: var(--growth-rail-progress, 0%); max-height: calc(100% - 28px); background: linear-gradient( to bottom, var(--growth-brand) 0%, var(--growth-brand-mid) 45%, var(--growth-brand-grow) 100%); transition: height 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .growth-rail__item { position: relative; z-index: 1; } .growth-rail__button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 5px 10px 5px 0; border: none; border-radius: 10px; background: transparent; color: var(--app-muted); font-size: 12.5px; font-weight: 600; text-align: left; cursor: pointer; transition: background 0.18s ease, color 0.18s ease; } .growth-rail__button:hover { background: var(--app-surface-hover); color: var(--app-fg); } .growth-rail__button:focus-visible { outline: 2px solid color-mix(in srgb, var(--app-primary) 40%, transparent); outline-offset: 1px; } .growth-rail__marker { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 26px; height: 26px; border: 1px solid var(--app-border); border-radius: 50%; background: var(--app-surface); font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--app-muted); transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.22s ease; } .growth-rail__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .growth-rail__item.is-done .growth-rail__marker { border-color: var(--growth-accent-line); background: var(--growth-accent-soft); color: var(--growth-accent-ink); } .growth-rail__item.is-active .growth-rail__button { color: var(--app-fg); } .growth-rail__item.is-active .growth-rail__marker { border-color: var(--growth-accent); background: var(--growth-accent); color: var(--growth-on-accent); transform: scale(1.12); box-shadow: 0 0 0 4px var(--growth-accent-glow); } /* ----------------------------------------------------------------------------- Stage -------------------------------------------------------------------------- */ .growth-stage { min-width: 0; padding: 30px 34px 40px; } .growth-journey.is-deck .growth-stage { padding-bottom: 24px; } .growth-stage__slide { max-width: 1240px; margin: 0 auto; animation: growth-slide-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; } .growth-story { display: flex; flex-direction: column; gap: 56px; max-width: 1240px; margin: 0 auto; } .growth-story__chapter { scroll-margin-top: 86px; } .growth-story__chapter + .growth-story__chapter { padding-top: 56px; border-top: 1px solid var(--app-border); } @keyframes growth-slide-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes growth-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* ----------------------------------------------------------------------------- Deck bar -------------------------------------------------------------------------- */ .growth-deckbar { position: sticky; bottom: 0; z-index: 15; padding: 0 24px 14px; background: color-mix(in srgb, var(--app-surface) 90%, transparent); backdrop-filter: blur(14px); border-top: 1px solid var(--app-border); } .growth-deckbar__progress { height: 3px; margin: 0 -24px 14px; background: var(--app-border); } .growth-deckbar__progress-fill { display: block; height: 100%; background: linear-gradient( 90deg, var(--growth-brand) 0%, var(--growth-brand-mid) 45%, var(--growth-brand-grow) 100%); transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .growth-deckbar__controls { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .growth-deckbar__center { display: flex; align-items: center; gap: 16px; min-width: 0; } .growth-deckbar__counter { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--app-muted); } .growth-deckbar__counter strong { font-size: 15px; color: var(--app-fg); } .growth-deckbar__counter-sep { margin: 0 3px; opacity: 0.5; } .growth-deckbar__dots { display: flex; align-items: center; gap: 7px; } .growth-deckbar__dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 999px; background: color-mix(in srgb, var(--app-fg) 22%, transparent); cursor: pointer; transition: width 0.24s ease, background 0.24s ease, transform 0.18s ease; } .growth-deckbar__dot:hover { background: color-mix(in srgb, var(--app-fg) 42%, transparent); transform: scale(1.2); } .growth-deckbar__dot.is-active { width: 26px; background: var(--growth-accent); } .growth-deckbar__chapter-name { overflow: hidden; font-size: 12.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; color: var(--app-fg); } .growth-deckbar__hint { display: block; margin-top: 8px; font-size: 11px; text-align: center; color: var(--app-muted); } .growth-deckbar__hint kbd { display: inline-block; min-width: 18px; padding: 1px 4px; border: 1px solid var(--app-border); border-bottom-width: 2px; border-radius: 5px; background: var(--app-surface); font-size: 10px; line-height: 1.4; text-align: center; color: var(--app-fg); } /* ----------------------------------------------------------------------------- Slide chrome -------------------------------------------------------------------------- */ .growth-slide { display: flex; flex-direction: column; gap: 26px; } .growth-slide__head { display: flex; flex-direction: column; gap: 10px; max-width: 940px; } .growth-slide__eyebrow { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; padding: 5px 14px 5px 11px; border: 1px solid var(--growth-accent-line); border-radius: 999px; background: var(--growth-accent-soft); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--growth-accent-ink); } .growth-slide__eyebrow-icon { font-size: 14px; line-height: 1; } .growth-slide__title { margin: 0; font-size: clamp(28px, 3.2vw, 40px); font-weight: 750; line-height: 1.12; letter-spacing: -0.022em; color: var(--app-fg); } .growth-slide__lead { margin: 0; max-width: 860px; font-size: 15.5px; line-height: 1.62; color: var(--app-muted); } .growth-slide__body { display: flex; flex-direction: column; gap: var(--growth-gap); } .growth-slide__footnote { margin-top: 2px; } .growth-section-heading { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--app-muted); } .growth-lead-note { margin: 0; max-width: 940px; font-size: 14.5px; line-height: 1.68; color: var(--app-muted); } .growth-lead-note--tight { font-size: 13.5px; } /* ----------------------------------------------------------------------------- Stat tile -------------------------------------------------------------------------- */ .growth-stat { display: flex; flex-direction: column; gap: 5px; padding: 18px 20px; border: 1px solid var(--app-border); border-radius: var(--growth-radius-sm); background: var(--app-surface); box-shadow: var(--growth-shadow); } .growth-stat--compact { padding: 13px 15px; } .growth-stat__label { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--app-muted); } .growth-stat__value { font-size: 30px; font-weight: 760; font-variant-numeric: tabular-nums; line-height: 1.05; letter-spacing: -0.02em; color: var(--app-fg); } .growth-stat--compact .growth-stat__value { font-size: 23px; } /* Unconfirmed figure — must never read as a reported result. */ .growth-stat__placeholder { display: inline-block; padding: 1px 10px; border: 1px dashed color-mix(in srgb, var(--app-fg) 34%, transparent); border-radius: 8px; font-size: 20px; font-weight: 700; color: var(--app-muted); } .growth-stat--compact .growth-stat__placeholder { font-size: 16px; } .growth-stat__caption { font-size: 11.5px; line-height: 1.45; color: var(--app-muted); } /* ----------------------------------------------------------------------------- Highlight card -------------------------------------------------------------------------- */ .growth-highlight { display: flex; align-items: flex-start; gap: 13px; padding: 15px 17px; border: 1px solid var(--app-border); border-radius: var(--growth-radius-sm); background: var(--app-surface); animation: growth-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--growth-delay, 0ms); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .growth-highlight:hover { border-color: var(--growth-accent-line); box-shadow: var(--growth-shadow); transform: translateY(-2px); } .growth-highlight__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; background: var(--growth-accent-soft); font-size: 15px; color: var(--growth-accent-ink); } .growth-highlight__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .growth-highlight__title { font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--app-fg); } .growth-highlight__detail { font-size: 12.5px; line-height: 1.5; color: var(--app-muted); } /* ----------------------------------------------------------------------------- Pull quote -------------------------------------------------------------------------- */ .growth-quote { position: relative; margin: 0; padding: 20px 24px 20px 58px; border: 1px solid var(--growth-accent-line); border-left-width: 3px; border-radius: var(--growth-radius-sm); background: var(--growth-accent-soft); } .growth-quote__mark { position: absolute; top: 4px; left: 20px; font-size: 52px; font-weight: 700; line-height: 1; color: color-mix(in srgb, var(--growth-accent) 42%, transparent); } .growth-quote__text { margin: 0; font-size: 15px; font-style: italic; line-height: 1.6; color: var(--app-fg); } /* ----------------------------------------------------------------------------- Chip -------------------------------------------------------------------------- */ .growth-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border: 1px solid var(--growth-accent-line); border-radius: 999px; background: var(--growth-accent-soft); font-size: 11.5px; font-weight: 650; line-height: 1.3; color: var(--growth-accent-ink); white-space: nowrap; } .growth-chip--solid { border-color: var(--growth-accent); background: var(--growth-accent); color: var(--growth-on-accent); } .growth-chip__icon { font-size: 12px; } /* ----------------------------------------------------------------------------- Cover slide -------------------------------------------------------------------------- */ .growth-cover { position: relative; overflow: hidden; padding: clamp(38px, 5vw, 66px); border: 1px solid var(--growth-accent-line); border-radius: 26px; background: linear-gradient( 145deg, var(--growth-accent-soft) 0%, var(--app-surface) 46%, var(--app-surface) 100%); box-shadow: var(--growth-shadow-lift); } .growth-cover__glow { position: absolute; top: -180px; right: -140px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, var(--growth-accent-glow) 0%, transparent 68%); pointer-events: none; } /* Story on the left, numbers on the right — the right third used to be empty glow. */ .growth-cover__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr); gap: clamp(28px, 4vw, 56px); align-items: center; } .growth-cover__intro { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .growth-cover__content { position: relative; display: flex; flex-direction: column; gap: 18px; } .growth-cover__wordmark { font-size: 13px; font-weight: 800; letter-spacing: 0.42em; color: var(--growth-accent-ink); } .growth-cover__range { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; padding: 6px 16px; border: 1px solid var(--growth-accent-line); border-radius: 999px; background: color-mix(in srgb, var(--app-surface) 70%, transparent); font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--growth-accent-ink); } .growth-cover__range-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--growth-accent); box-shadow: 0 0 0 4px var(--growth-accent-glow); } .growth-cover__title { margin: 0; max-width: 15ch; font-size: clamp(38px, 5.6vw, 68px); font-weight: 780; line-height: 1.03; letter-spacing: -0.032em; color: var(--app-fg); } .growth-cover__subtitle { margin: 0; max-width: 620px; font-size: clamp(15px, 1.5vw, 19px); line-height: 1.56; color: var(--app-muted); } .growth-cover__rule { width: 88px; height: 4px; margin: 6px 0; border-radius: 999px; background: var(--growth-accent); } .growth-cover__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-top: 6px; } /* Customer chips — replaces a comma list that wrapped awkwardly in a caption. */ .growth-cover__customers { display: flex; flex-direction: column; gap: 8px; } .growth-cover__customers-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--app-muted); } .growth-cover__customer-chips { display: flex; flex-wrap: wrap; gap: 7px; } .growth-cover__customer { padding: 5px 13px; border: 1px solid var(--growth-accent-line); border-radius: 999px; background: color-mix(in srgb, var(--app-surface) 72%, transparent); font-size: 12.5px; font-weight: 650; color: var(--growth-accent-ink); } /* At-a-glance panel */ .growth-cover__glance { display: flex; flex-direction: column; gap: 4px; padding: 26px 28px; border: 1px solid var(--growth-accent-line); border-radius: 20px; background: color-mix(in srgb, var(--app-surface) 82%, transparent); backdrop-filter: blur(6px); box-shadow: var(--growth-shadow); } .growth-cover__glance-title { margin-bottom: 10px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--growth-accent-ink); } .growth-cover__glance-list { display: flex; flex-direction: column; margin: 0; } .growth-cover__glance-row { display: flex; align-items: baseline; gap: 16px; padding: 11px 0; border-top: 1px solid color-mix(in srgb, var(--growth-accent) 16%, transparent); } .growth-cover__glance-row:first-child { border-top: none; padding-top: 0; } .growth-cover__glance-value { flex: 0 0 auto; min-width: 5.2ch; margin: 0; font-size: 27px; font-weight: 780; font-variant-numeric: tabular-nums; line-height: 1.05; letter-spacing: -0.025em; text-align: right; color: var(--app-fg); } .growth-cover__glance-placeholder { display: inline-block; padding: 0 8px; border: 1px dashed color-mix(in srgb, var(--app-fg) 34%, transparent); border-radius: 7px; font-size: 18px; color: var(--app-muted); } .growth-cover__glance-text { display: flex; flex-direction: column; gap: 1px; margin: 0; min-width: 0; } .growth-cover__glance-text strong { font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--app-fg); } .growth-cover__glance-text span { font-size: 11.5px; line-height: 1.4; color: var(--app-muted); } .growth-cover__dates { font-size: 12px; font-weight: 600; color: var(--app-muted); } .growth-cover__dates em { font-style: normal; opacity: 0.75; } /* ----------------------------------------------------------------------------- Chapter 01 — the beginning -------------------------------------------------------------------------- */ .growth-origin { display: grid; grid-template-columns: minmax(230px, 290px) minmax(0, 1fr); gap: 22px; align-items: start; } .growth-origin__datestone { display: flex; flex-direction: column; gap: 4px; padding: 26px 24px; border: 1px solid var(--growth-accent-line); border-radius: var(--growth-radius); background: linear-gradient(160deg, var(--growth-accent-soft), var(--app-surface) 78%); box-shadow: var(--growth-shadow); } .growth-origin__date-kicker { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--growth-accent-ink); } .growth-origin__date-day { font-size: 72px; font-weight: 780; line-height: 0.95; letter-spacing: -0.04em; color: var(--app-fg); } .growth-origin__date-month { font-size: 17px; font-weight: 700; color: var(--app-fg); } .growth-origin__date-note { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--growth-accent-line); font-size: 12.5px; line-height: 1.55; color: var(--app-muted); } .growth-origin__highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; } /* Team growth: day one against today */ .growth-team { margin-top: 6px; } .growth-team__panels { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 14px; } .growth-team__snapshot { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border: 1px solid var(--app-border); border-radius: var(--growth-radius); background: var(--app-surface); box-shadow: var(--growth-shadow); } /* Today's panel is the destination — tinted so the pair reads left-to-right as growth. */ .growth-team__snapshot--current { border-color: var(--growth-accent-line); background: linear-gradient(158deg, var(--growth-accent-soft), var(--app-surface) 66%); } .growth-team__kicker { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--app-muted); } .growth-team__snapshot--current .growth-team__kicker { color: var(--growth-accent-ink); } .growth-team__headcount { display: flex; align-items: baseline; gap: 8px; } .growth-team__headcount-value { font-size: 44px; font-weight: 780; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -0.035em; color: var(--app-fg); } .growth-team__headcount-label { font-size: 13px; font-weight: 650; color: var(--app-muted); } .growth-team__timing { margin-bottom: 6px; font-size: 12px; color: var(--app-muted); } .growth-team__roles { display: flex; flex-direction: column; gap: 7px; margin: 0; padding-top: 13px; border-top: 1px solid var(--app-border); list-style: none; } .growth-team__snapshot--current .growth-team__roles { border-top-color: var(--growth-accent-line); } .growth-team__role { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--app-fg); } .growth-team__role-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px; background: var(--growth-accent-soft); font-size: 12px; color: var(--growth-accent-ink); } .growth-team__role-count { min-width: 14px; font-weight: 750; font-variant-numeric: tabular-nums; } .growth-team__role-title { color: var(--app-muted); } .growth-team__delta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; align-self: center; padding: 0 4px; } .growth-team__delta-arrow { font-size: 20px; line-height: 1; color: var(--growth-accent); } .growth-team__delta-value { padding: 3px 11px; border: 1px solid var(--growth-accent-line); border-radius: 999px; background: var(--growth-accent-soft); font-size: 12px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--growth-accent-ink); } .growth-team__note { margin: 14px 0 0; max-width: 900px; font-size: 13px; line-height: 1.6; color: var(--app-muted); } /* ----------------------------------------------------------------------------- Chapter 02 — Wavecrest -------------------------------------------------------------------------- */ .growth-proof { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 26px; align-items: start; } .growth-proof__modules { display: flex; flex-direction: column; gap: 9px; } .growth-proof__module { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid var(--growth-accent-line); border-radius: var(--growth-radius-sm); background: linear-gradient(100deg, var(--growth-accent-soft), var(--app-surface) 72%); animation: growth-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--growth-delay, 0ms); } .growth-proof__module-index { font-size: 12px; font-weight: 750; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--growth-accent) 60%, transparent); } .growth-proof__module-name { font-size: 15px; font-weight: 700; color: var(--app-fg); } .growth-proof__callout { margin: 16px 0 0; font-size: 13px; line-height: 1.6; color: var(--app-muted); } .growth-proof__effort-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; } /* ----------------------------------------------------------------------------- Chapter 03 — product maturity -------------------------------------------------------------------------- */ .growth-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 14px; } .growth-feature-group { display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--app-border); border-radius: var(--growth-radius); background: var(--app-surface); box-shadow: var(--growth-shadow); animation: growth-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--growth-delay, 0ms); transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .growth-feature-group:hover { border-color: var(--growth-accent-line); box-shadow: var(--growth-shadow-lift); transform: translateY(-3px); } .growth-feature-group__head { display: flex; align-items: center; gap: 11px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--app-border); } .growth-feature-group__icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--growth-accent-soft); font-size: 16px; color: var(--growth-accent-ink); } .growth-feature-group__title { flex: 1 1 auto; margin: 0; font-size: 14px; font-weight: 700; color: var(--app-fg); } .growth-feature-group__count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--growth-accent-soft-strong); font-size: 11.5px; font-weight: 750; color: var(--growth-accent-ink); } .growth-feature-group__list { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; } .growth-feature-group__item { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.45; color: var(--app-fg); } .growth-feature-group__bullet { flex: 0 0 auto; width: 6px; height: 6px; margin-top: 6px; border-radius: 50%; background: var(--growth-accent); } /* ----------------------------------------------------------------------------- Chapter 04 — customer expansion -------------------------------------------------------------------------- */ .growth-customers { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 14px; } .growth-customer { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 20px; border: 1px solid var(--app-border); border-radius: var(--growth-radius); background: var(--app-surface); box-shadow: var(--growth-shadow); animation: growth-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--growth-delay, 0ms); transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .growth-customer:hover { border-color: var(--growth-accent-line); box-shadow: var(--growth-shadow-lift); transform: translateY(-3px); } .growth-customer--founding { border-color: var(--growth-accent-line); background: linear-gradient(165deg, var(--growth-accent-soft), var(--app-surface) 62%); } .growth-customer__topline { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .growth-customer__ribbon { flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; background: var(--growth-accent); font-size: 9.5px; font-weight: 750; letter-spacing: 0.07em; text-transform: uppercase; color: var(--growth-on-accent); } /* Monogram sits on its own row now, so pull the name up closer than the card's default gap. */ .growth-customer__topline + .growth-customer__naming { margin-top: -5px; } .growth-customer__monogram { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; background: var(--growth-accent); font-size: 14px; font-weight: 750; letter-spacing: 0.04em; color: var(--growth-on-accent); box-shadow: 0 6px 16px var(--growth-accent-glow); } .growth-customer__naming { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .growth-customer__name { font-size: 15px; font-weight: 750; line-height: 1.2; color: var(--app-fg); } .growth-customer__role { font-size: 11.5px; font-weight: 600; color: var(--app-muted); } .growth-customer__modules { display: flex; flex-wrap: wrap; gap: 6px; } .growth-customer__meter { display: flex; gap: 4px; margin-top: auto; } .growth-customer__meter-slot { flex: 1 1 0; height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--app-fg) 10%, transparent); } .growth-customer__meter-slot.is-filled { background: var(--growth-accent); } .growth-customer__count { font-size: 11px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--app-muted); } /* ----------------------------------------------------------------------------- Chapter 05 — relocation -------------------------------------------------------------------------- */ .growth-relocation { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 22px; align-items: start; } .growth-relocation__shift { display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 1px solid var(--growth-accent-line); border-radius: var(--growth-radius); background: linear-gradient(160deg, var(--growth-accent-soft), var(--app-surface) 74%); box-shadow: var(--growth-shadow); } .growth-relocation__shift-kicker { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--growth-accent-ink); } .growth-relocation__shift-flow { display: flex; flex-direction: column; gap: 10px; } .growth-relocation__shift-from, .growth-relocation__shift-to { font-size: 17px; font-weight: 700; line-height: 1.25; } .growth-relocation__shift-from { color: var(--app-muted); } .growth-relocation__shift-to { color: var(--app-fg); } /* Turned to point down, because the from/to pair stacks vertically. */ .growth-relocation__shift-arrow { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; width: 24px; height: 24px; font-size: 20px; line-height: 1; color: var(--growth-accent); transform: rotate(90deg); } .growth-relocation__shift-note { margin: 0; padding-top: 14px; border-top: 1px solid var(--growth-accent-line); font-size: 12.5px; line-height: 1.55; color: var(--app-muted); } .growth-relocation__capabilities { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 11px; } /* ----------------------------------------------------------------------------- Chapter 06 — module growth -------------------------------------------------------------------------- */ .growth-modules { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); gap: 26px; align-items: start; } .growth-track { position: relative; display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; } .growth-track__step { position: relative; display: flex; align-items: stretch; gap: 16px; padding-bottom: 4px; animation: growth-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--growth-delay, 0ms); } .growth-track__marker { position: relative; display: flex; flex: 0 0 auto; align-items: flex-start; justify-content: center; width: 18px; } /* Connecting line between markers; the last step has no line below it. */ .growth-track__marker::after { content: ""; position: absolute; top: 20px; bottom: -8px; width: 2px; border-radius: 999px; background: var(--app-border); } .growth-track__step:last-child .growth-track__marker::after { display: none; } .growth-track__marker-dot { position: relative; z-index: 1; width: 14px; height: 14px; margin-top: 13px; border: 3px solid var(--app-surface); border-radius: 50%; background: var(--app-border); box-shadow: 0 0 0 2px var(--app-border); } .growth-track__step.is-live .growth-track__marker-dot { background: var(--app-success); box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-success) 45%, transparent); } .growth-track__step.is-live .growth-track__marker::after { background: color-mix(in srgb, var(--app-success) 45%, var(--app-border)); } .growth-track__step.is-expanding .growth-track__marker-dot { background: var(--app-warning); box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-warning) 45%, transparent); } /* Everything from the first not-yet-live module onward is drawn as a dashed run, so the track reads as "shipped up to here" no matter how live and planned modules interleave. */ .growth-track__step:not(.is-live) .growth-track__marker::after { background: repeating-linear-gradient( to bottom, var(--app-border) 0 4px, transparent 4px 8px); } .growth-track__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; padding: 12px 16px; border: 1px solid var(--app-border); border-radius: var(--growth-radius-sm); background: var(--app-surface); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .growth-track__step:hover .growth-track__body { box-shadow: var(--growth-shadow); transform: translateX(3px); } .growth-track__step.is-next .growth-track__body { background: transparent; border-style: dashed; } .growth-track__heading { display: flex; align-items: center; gap: 10px; } .growth-track__name { font-size: 14px; font-weight: 700; color: var(--app-fg); } .growth-track__status { padding: 2px 9px; border-radius: 999px; font-size: 10px; font-weight: 750; letter-spacing: 0.07em; text-transform: uppercase; } .growth-track__step.is-live .growth-track__status { background: var(--app-success-soft); color: color-mix(in srgb, var(--app-success) 78%, var(--app-fg)); } .growth-track__step.is-expanding .growth-track__status { background: var(--app-warning-soft); color: color-mix(in srgb, var(--app-warning) 78%, var(--app-fg)); } .growth-track__step.is-next .growth-track__status { background: color-mix(in srgb, var(--app-fg) 8%, transparent); color: var(--app-muted); } .growth-track__detail { font-size: 12.5px; line-height: 1.45; color: var(--app-muted); } .growth-modules__summary { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 96px; } .growth-modules__tally { display: flex; flex-direction: column; gap: 10px; } .growth-modules__note { margin: 0; padding: 16px; border: 1px solid var(--app-border); border-radius: var(--growth-radius-sm); background: var(--app-surface-soft); font-size: 12.5px; line-height: 1.6; color: var(--app-muted); } /* ----------------------------------------------------------------------------- Chapter 07 — the three core modules in depth -------------------------------------------------------------------------- */ .growth-coremodules { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; } .growth-moduleprofile { display: flex; flex-direction: column; gap: 15px; padding: 22px; border: 1px solid var(--growth-accent-line); border-radius: var(--growth-radius); background: linear-gradient(168deg, var(--growth-accent-soft), var(--app-surface) 58%); box-shadow: var(--growth-shadow); animation: growth-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--growth-delay, 0ms); transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .growth-moduleprofile:hover { border-color: var(--growth-accent); box-shadow: var(--growth-shadow-lift); transform: translateY(-3px); } .growth-moduleprofile__head { display: flex; align-items: flex-start; gap: 13px; } .growth-moduleprofile__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; background: var(--growth-accent); font-size: 17px; color: var(--growth-on-accent); box-shadow: 0 6px 16px var(--growth-accent-glow); } .growth-moduleprofile__naming { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .growth-moduleprofile__name { margin: 0; font-size: 18px; font-weight: 750; letter-spacing: -0.015em; line-height: 1.2; color: var(--app-fg); } .growth-moduleprofile__arc { font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--growth-accent-ink); } .growth-moduleprofile__reach { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--growth-accent-line); border-radius: var(--growth-radius-sm); background: color-mix(in srgb, var(--app-surface) 74%, transparent); } .growth-moduleprofile__reach-figure { display: flex; align-items: baseline; gap: 3px; flex: 0 0 auto; } .growth-moduleprofile__reach-value { font-size: 34px; font-weight: 780; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -0.03em; color: var(--growth-accent-ink); } .growth-moduleprofile__reach-of { font-size: 12.5px; font-weight: 650; color: var(--app-muted); } .growth-moduleprofile__reach-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .growth-moduleprofile__reach-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--app-muted); } .growth-moduleprofile__meter { display: flex; gap: 4px; } .growth-moduleprofile__meter-slot { width: 20px; height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--app-fg) 12%, transparent); } .growth-moduleprofile__meter-slot.is-filled { background: var(--growth-accent); } .growth-moduleprofile__orgs { overflow: hidden; font-size: 11.5px; line-height: 1.4; text-overflow: ellipsis; color: var(--app-muted); } .growth-moduleprofile__summary { margin: 0; font-size: 13px; line-height: 1.55; color: var(--app-muted); } .growth-moduleprofile__capabilities { display: flex; flex-direction: column; gap: 9px; margin-top: auto; } .growth-moduleprofile__capabilities-label { display: flex; align-items: baseline; gap: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--app-muted); } .growth-moduleprofile__capabilities-label em { font-style: normal; font-weight: 750; letter-spacing: 0.04em; text-transform: none; color: var(--growth-accent-ink); } .growth-moduleprofile__chips { display: flex; flex-wrap: wrap; gap: 6px; } .growth-moduleprofile__milestone { display: flex; align-items: flex-start; gap: 9px; padding-top: 14px; border-top: 1px solid var(--growth-accent-line); font-size: 12.5px; font-style: italic; line-height: 1.5; color: var(--app-fg); } .growth-moduleprofile__milestone-icon { flex: 0 0 auto; margin-top: 2px; font-size: 13px; color: var(--growth-accent); } /* Lease-Up import batches per organization */ .growth-batches { margin-top: 4px; padding: 20px 22px; border: 1px solid var(--app-border); border-radius: var(--growth-radius); background: var(--app-surface); box-shadow: var(--growth-shadow); } .growth-batches__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; } .growth-batches__head .growth-section-heading { margin-bottom: 0; } .growth-batches__rule { font-size: 11px; font-weight: 600; color: var(--app-muted); } .growth-batches__totals { display: flex; flex-wrap: wrap; gap: 28px; margin: 16px 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--app-border); } .growth-batches__total { display: flex; flex-direction: column; gap: 2px; } .growth-batches__total-value { font-size: 26px; font-weight: 770; font-variant-numeric: tabular-nums; line-height: 1.05; letter-spacing: -0.02em; color: var(--growth-accent-ink); } .growth-batches__total-label { font-size: 11px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--app-muted); } /* Wide tables scroll inside their own box — the slide itself must never scroll sideways. */ .growth-batches__scroll { overflow-x: auto; } .growth-batches__table { width: 100%; border-collapse: collapse; font-size: 13px; } .growth-batches__table th, .growth-batches__table td { padding: 9px 12px; text-align: left; white-space: nowrap; } .growth-batches__table thead th { border-bottom: 1px solid var(--app-border); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--app-muted); } .growth-batches__table tbody tr { border-bottom: 1px solid color-mix(in srgb, var(--app-border) 60%, transparent); } .growth-batches__table tbody tr:last-child { border-bottom: none; } .growth-batches__table tbody tr:hover { background: var(--growth-accent-soft); } /* Numeric columns align right, and the header must follow its values — otherwise the label sits at the left edge of the column while the figures sit at the right. !important is required, not cosmetic: theme-bridge.css sets `th { text-align: inherit !important }` on the bare element to stop Fluent centring table headers, and an !important declaration beats a normal one at any specificity. These selectors are more specific than that bare `th`, so important-vs-important resolves here. */ .growth-batches__table th.is-numeric, .growth-batches__table td.is-numeric, .growth-batches__table thead th.is-numeric { text-align: right !important; font-variant-numeric: tabular-nums; } .growth-batches__org { font-weight: 700; color: var(--app-fg); white-space: normal; } /* Marks a row counted under the date-only rule, so it can't be mistaken for the rest. */ .growth-batches__flag { display: inline-block; margin-left: 7px; padding: 1px 8px; border: 1px solid var(--growth-accent-line); border-radius: 999px; background: var(--growth-accent-soft); font-size: 9.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--growth-accent-ink); vertical-align: middle; cursor: help; } /* A stated figure, not a derived one — warning-toned so it reads differently from the date-only rule badge, which still describes a calculation. */ .growth-batches__flag--stated { border-color: color-mix(in srgb, var(--app-warning) 40%, var(--app-border)); background: var(--app-warning-soft); color: color-mix(in srgb, var(--app-warning) 78%, var(--app-fg)); } /* Batch count doubles as a bar so the busiest importers stand out without a chart. Count and bar are stacked and right-aligned together, so the number sits directly above the end of its own bar rather than drifting across the column. */ .growth-batches__count { display: block; font-weight: 750; line-height: 1.3; color: var(--app-fg); } .growth-batches__bar { display: block; width: 84px; height: 4px; margin: 3px 0 0 auto; border-radius: 999px; background: color-mix(in srgb, var(--app-fg) 9%, transparent); } .growth-batches__bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--growth-accent); } .growth-batches__empty, .growth-batches__footnote { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: var(--app-muted); } /* ----------------------------------------------------------------------------- Chapter 08 — adoption + growth chart -------------------------------------------------------------------------- */ .growth-adoption { display: flex; flex-direction: column; gap: 18px; } .growth-adoption__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } .growth-adoption__secondary { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; } .growth-chart { margin: 0; padding: 20px 22px 14px; border: 1px solid var(--app-border); border-radius: var(--growth-radius); background: var(--app-surface); box-shadow: var(--growth-shadow); } .growth-chart__legend { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 10px; } .growth-chart__legend-item { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 650; color: var(--app-muted); } .growth-chart__swatch { width: 14px; height: 4px; border-radius: 999px; } .growth-chart__legend-item--customers .growth-chart__swatch { background: var(--growth-accent); } .growth-chart__legend-item--modules .growth-chart__swatch { background: repeating-linear-gradient( 90deg, var(--app-fg) 0 4px, transparent 4px 7px); opacity: 0.6; } /* Scales on the viewBox aspect ratio — no preserveAspectRatio override, so the dots stay circular and stroke widths stay even at every container width. */ .growth-chart__svg { display: block; width: 100%; height: auto; overflow: visible; } .growth-chart__gridline { stroke: var(--app-border); stroke-width: 1; } .growth-chart__baseline { stroke: color-mix(in srgb, var(--app-fg) 26%, transparent); stroke-width: 1.5; } .growth-chart__grad-top { stop-color: var(--growth-accent); stop-opacity: 0.3; } .growth-chart__grad-bottom { stop-color: var(--growth-accent); stop-opacity: 0.02; } .growth-chart__area { stroke: none; } .growth-chart__line { fill: none; stroke-linecap: round; stroke-linejoin: round; } .growth-chart__line--customers { stroke: var(--growth-accent); stroke-width: 3; } .growth-chart__line--modules { stroke: color-mix(in srgb, var(--app-fg) 52%, transparent); stroke-width: 2; stroke-dasharray: 6 5; } .growth-chart__dot { stroke: var(--app-surface); stroke-width: 2.5; } .growth-chart__dot--customers { fill: var(--growth-accent); } .growth-chart__dot--modules { fill: color-mix(in srgb, var(--app-fg) 55%, var(--app-surface)); } .growth-chart__value { font-size: 12px; font-weight: 700; text-anchor: middle; } .growth-chart__value--customers { fill: var(--growth-accent-ink); } .growth-chart__value--modules { fill: var(--app-muted); } .growth-chart__axis-label { font-size: 11px; font-weight: 600; fill: var(--app-muted); } .growth-chart__axis-label--y { text-anchor: end; } .growth-chart__axis-label--x { text-anchor: middle; } .growth-chart__note { margin: 4px 0 0; font-size: 11px; text-align: right; color: var(--app-muted); } /* ----------------------------------------------------------------------------- Chapter 08 — support and customer success -------------------------------------------------------------------------- */ .growth-support { display: grid; grid-template-columns: minmax(300px, 430px) minmax(0, 1fr); gap: 22px; align-items: start; } .growth-support__hero { display: flex; flex-direction: column; gap: 8px; padding: 26px; border: 1px solid var(--growth-accent-line); border-radius: var(--growth-radius); background: linear-gradient(160deg, var(--growth-accent-soft), var(--app-surface) 76%); box-shadow: var(--growth-shadow); } .growth-support__hero-kicker { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--growth-accent-ink); } .growth-support__hero-figure { display: flex; align-items: flex-start; gap: 2px; } .growth-support__hero-number { font-size: clamp(46px, 5.4vw, 66px); font-weight: 780; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -0.035em; color: var(--app-fg); } .growth-support__hero-plus { font-size: 26px; font-weight: 750; line-height: 1.1; color: var(--growth-accent); } .growth-support__hero-label { margin-bottom: 12px; font-size: 13.5px; font-weight: 650; color: var(--app-muted); } .growth-support__hero-note { margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--app-muted); } .growth-support__side { display: flex; flex-direction: column; gap: 14px; } .growth-support__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 11px; } .growth-support__efforts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 11px; } /* Split bar */ .growth-split { display: flex; flex-direction: column; gap: 10px; } .growth-split__bar { display: flex; gap: 3px; height: 38px; } .growth-split__segment { display: flex; align-items: center; justify-content: center; flex-basis: 0; min-width: 0; border-radius: 8px; font-size: 12.5px; font-weight: 750; font-variant-numeric: tabular-nums; overflow: hidden; } .growth-split__segment--primary { background: var(--growth-accent); color: var(--growth-on-accent); } .growth-split__segment--secondary { background: color-mix(in srgb, var(--growth-accent) 26%, var(--app-surface)); color: var(--growth-accent-ink); } .growth-split__keys { display: flex; flex-wrap: wrap; gap: 8px 20px; } .growth-split__key { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--app-muted); } .growth-split__swatch { width: 10px; height: 10px; border-radius: 3px; } .growth-split__key--primary .growth-split__swatch { background: var(--growth-accent); } .growth-split__key--secondary .growth-split__swatch { background: color-mix(in srgb, var(--growth-accent) 26%, var(--app-surface)); border: 1px solid var(--growth-accent-line); } .growth-split__share { font-style: normal; font-weight: 700; color: var(--app-fg); } /* ----------------------------------------------------------------------------- Chapter 09 — future growth -------------------------------------------------------------------------- */ .growth-future { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 13px; } .growth-future__bet { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px dashed var(--growth-accent-line); border-radius: var(--growth-radius); background: color-mix(in srgb, var(--growth-accent) 5%, var(--app-surface)); animation: growth-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--growth-delay, 0ms); transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .growth-future__bet:hover { border-style: solid; border-color: var(--growth-accent); box-shadow: var(--growth-shadow-lift); transform: translateY(-3px); } .growth-future__horizon { position: absolute; top: 16px; right: 16px; font-size: 9.5px; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--growth-accent) 62%, var(--app-muted)); } .growth-future__icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--growth-accent-soft-strong); font-size: 16px; color: var(--growth-accent-ink); } .growth-future__title { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--app-fg); } .growth-future__detail { font-size: 12.5px; line-height: 1.5; color: var(--app-muted); } /* ----------------------------------------------------------------------------- Closing slide — the future team -------------------------------------------------------------------------- */ .growth-futureteam { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 22px; align-items: start; } .growth-futureteam__today { display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 1px solid var(--growth-accent-line); border-radius: var(--growth-radius); background: linear-gradient(160deg, var(--growth-accent-soft), var(--app-surface) 72%); box-shadow: var(--growth-shadow); } .growth-futureteam__kicker { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--growth-accent-ink); } .growth-futureteam__facts { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; } .growth-futureteam__fact { display: flex; align-items: baseline; gap: 12px; } .growth-futureteam__fact + .growth-futureteam__fact { padding-top: 16px; border-top: 1px solid var(--growth-accent-line); } .growth-futureteam__fact-value { flex: 0 0 auto; min-width: 42px; font-size: 34px; font-weight: 780; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -0.03em; color: var(--app-fg); } .growth-futureteam__fact-label { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 12.5px; font-weight: 650; color: var(--app-fg); } .growth-futureteam__fact-label em { font-style: normal; font-weight: 500; font-size: 11.5px; line-height: 1.4; color: var(--app-muted); } .growth-futureteam__drivers { display: flex; flex-direction: column; gap: 14px; } .growth-futureteam__driver-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; } /* The ask — the one thing the slide is actually arguing for. */ .growth-futureteam__ask { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px; border: 1px solid var(--growth-accent); border-radius: var(--growth-radius-sm); background: var(--growth-accent-soft-strong); } .growth-futureteam__ask-icon { flex: 0 0 auto; margin-top: 2px; font-size: 16px; color: var(--growth-accent-ink); } .growth-futureteam__ask-text { margin: 0; font-size: 14px; font-weight: 650; line-height: 1.55; color: var(--app-fg); } @media (max-width: 1180px) { .growth-futureteam { grid-template-columns: minmax(0, 1fr); } } /* ----------------------------------------------------------------------------- Closing slide (legacy hero styles, retained for print) -------------------------------------------------------------------------- */ .growth-closing { position: relative; overflow: hidden; padding: clamp(38px, 5vw, 70px); border: 1px solid var(--growth-accent-line); border-radius: 26px; background: linear-gradient(150deg, var(--growth-accent-soft) 0%, var(--app-surface) 52%); box-shadow: var(--growth-shadow-lift); } .growth-closing__glow { position: absolute; bottom: -200px; left: -120px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, var(--growth-accent-glow) 0%, transparent 68%); pointer-events: none; } .growth-closing__content { position: relative; display: flex; flex-direction: column; gap: 18px; } .growth-closing__kicker { font-size: 11.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--growth-accent-ink); } .growth-closing__title { margin: 0; max-width: 18ch; font-size: clamp(32px, 4.4vw, 52px); font-weight: 780; line-height: 1.06; letter-spacing: -0.03em; color: var(--app-fg); } .growth-closing__message { margin: 0; max-width: 800px; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.62; color: var(--app-muted); } .growth-closing__pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 10px; } .growth-closing__pillar { display: flex; flex-direction: column; gap: 5px; padding: 18px 20px; border: 1px solid var(--growth-accent-line); border-radius: var(--growth-radius-sm); background: color-mix(in srgb, var(--app-surface) 76%, transparent); } .growth-closing__pillar-value { font-size: 18px; font-weight: 750; letter-spacing: -0.015em; color: var(--growth-accent-ink); } .growth-closing__pillar-label { font-size: 12.5px; line-height: 1.45; color: var(--app-muted); } .growth-closing__wordmark { margin-top: 12px; font-size: 12px; font-weight: 800; letter-spacing: 0.42em; color: color-mix(in srgb, var(--app-fg) 42%, transparent); } /* ----------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width: 1180px) { .growth-origin, .growth-proof, .growth-relocation, .growth-modules, .growth-support { grid-template-columns: minmax(0, 1fr); } .growth-modules__summary { position: static; } .growth-modules__tally { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } } @media (max-width: 760px) { /* Stack the two team snapshots and turn the arrow to point down between them. */ .growth-team__panels { grid-template-columns: minmax(0, 1fr); } .growth-team__delta { flex-direction: row; } .growth-team__delta-arrow { transform: rotate(90deg); } } @media (max-width: 980px) { .growth-journey__body { grid-template-columns: minmax(0, 1fr); } /* Rail becomes a horizontal filmstrip above the stage. */ .growth-rail { position: sticky; top: 66px; z-index: 12; max-height: none; padding: 10px 16px; border-right: none; border-bottom: 1px solid var(--app-border); background: color-mix(in srgb, var(--app-surface) 92%, transparent); backdrop-filter: blur(12px); overflow-x: auto; overflow-y: hidden; } .growth-rail__kicker { display: none; } .growth-rail__list { flex-direction: row; gap: 6px; } .growth-rail__track { width: max-content; } .growth-rail__spine, .growth-rail__spine-fill { display: none; } .growth-rail__button { padding: 5px 12px 5px 5px; border: 1px solid transparent; } .growth-rail__item.is-active .growth-rail__button { border-color: var(--growth-accent-line); background: var(--growth-accent-soft); } .growth-stage { padding: 20px 18px 32px; } .growth-topbar { flex-wrap: wrap; padding: 10px 16px; } /* Cover stacks: story first, then the numbers panel. */ .growth-cover__grid { grid-template-columns: minmax(0, 1fr); } .growth-deckbar__hint { display: none; } .growth-deckbar__chapter-name { display: none; } } @media (max-width: 640px) { .growth-deckbar__dots { display: none; } .growth-btn--nav { padding: 0 14px; } .growth-topbar__range { display: none; } } /* ----------------------------------------------------------------------------- Motion + print -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .growth-journey *, .growth-journey *::before, .growth-journey *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; transition-duration: 0.001ms !important; } .growth-highlight:hover, .growth-feature-group:hover, .growth-customer:hover, .growth-future__bet:hover, .growth-track__step:hover .growth-track__body { transform: none; } } /* Printing lays the whole story out end to end regardless of the active view, so "Print" always produces the full deck rather than the current slide. */ @media print { .growth-topbar, .growth-rail, .growth-deckbar { display: none !important; } .growth-journey { min-height: 0; background: none; } .growth-journey__body { grid-template-columns: minmax(0, 1fr); } .growth-stage { padding: 0; } .growth-story { gap: 0; } .growth-story__chapter, .growth-stage__slide { break-after: page; page-break-after: always; padding-top: 0; border-top: none; animation: none; } .growth-story__chapter:last-child { break-after: auto; page-break-after: auto; } .growth-highlight, .growth-feature-group, .growth-customer, .growth-moduleprofile, .growth-future__bet, .growth-track__step, .growth-proof__module { animation: none !important; box-shadow: none; break-inside: avoid; page-break-inside: avoid; } .growth-cover, .growth-closing { box-shadow: none; } }