AuthorityPageTemplate v2

Structural credibility template. Not a homepage variant. Reads like the first page of an operating manual.

Files

• /templates/authority-template.css
• /templates/authority-template.js
• /templates/operating-model.html (live example)

Section Flow

• Hero — Navy, 120px pad, two-column: H1 + subtitle + CTA | blueprint SVG
• Proof Band — Navy, 60-80px, client logos left, 3 key metrics right
• Framework — Beige, 4 pillars in grid, line icons, no card containers
• Execution Sequence — Navy, 4 numbered steps with connecting line
• Cost & Control — Beige, two-column: explanation left, single metric panel right
• Final CTA — Navy, centered headline + single primary button

API

window.AuthorityTemplates.render("#mount", {
  heroTitle,
  heroSubtitle,
  heroVisual,          // optional custom SVG/HTML
  primaryCTA,          // { label, href }
  secondaryCTA,        // { label, href } or null
  proof: { logos: [{ src, alt }], metrics: [{ value, label }] },
  framework: { label, title, intro, pillars: [{ title, description }] },
  process: { label, title, steps: [{ title, description }] },
  cost: { label, title, intro, items: [{ heading, body }], metricsTitle, metrics: [{ label, value }] },
  finalCTA: { title, primaryCTA: { label, href } }
});

Components

• AuthorityHero
• ProofBand (new)
• PillarGrid
• ProcessSequence
• CostControl (replaces ControlsSection)
• AuthorityCTA

Design Rules

• Max content width: 1120px
• Section padding: 96px desktop
• No rounded cards, no drop shadows, no icon containers
• Icons: 1px stroke line style only
• Alternating navy/beige bands for rhythm
• Strong typographic hierarchy via Canela headings + Inter body

Live Example

Open Operating Model example