The canonical reference for building premium corporate sponsorship proposals. Every pattern, component, and rule — in one place.
The Triumph palette applied to proposals. Dark backgrounds, bright accents, confident contrast. All values come from tokens.css — never hardcode.
Inter for all text, JetBrains Mono for data and labels. Fluid sizing via clamp() — no hard breakpoints.
"The design supports the content. The content sells. Restraint is the luxury signal."
Generous breathing room signals quality. External spacing always exceeds internal padding. Content maxes out at 1140px; body text at 70ch.
| Property | Value | Notes |
|---|---|---|
| max-width | 1100–1200px | Content container, centered |
| text measure | max-width: 70ch | Body paragraphs only |
| section padding | clamp(4rem, 3rem + 5vw, 7rem) | Fluid vertical padding |
| card grid | auto-fit, minmax(300px, 1fr) | Responsive without breakpoints |
| hero height | 100vh | Full viewport, centered content |
| nav height | 56px | Sticky, frosted glass |
| scroll-margin-top | 64px | Clears sticky nav on anchor jump |
Proposals alternate between dense content and breathe points — like magazine spreads. The pattern: dense → breathe → dense → breathe.
The pipeline auto-classifies sections from Word docs. Each section_type gets a distinct layout. Below: every type with its recommended pattern.
Every component a proposal template needs, rendered with real sample data and the Triumph palette. Hover, interact, inspect.
Full-width breathe point between dense sections. Numbers count up on scroll entry.
Used for key_stats from the pipeline.
For partnership_benefits. Left accent border cycles through palette colors.
Hover lifts card with shadow deepening.
For sponsorship_tiers. Featured row highlighted with accent background + left border.
Prices in monospace, right-aligned. Hover state on rows.
| Tier | Investment | Signage | Digital |
|---|---|---|---|
| Presenting | $50,000 | Center field + concourse | All channels + email |
| Premier | $25,000 | Sideline banner | Social + web |
| Supporting | $10,000 | Concourse banner | Social media |
For contact. The closing moment. Gradient background, centered content,
prominent button with hover glow.
We'd love to discuss how a partnership with Greenville Triumph SC can help your brand reach 85,000+ engaged fans across the Upstate.
Schedule a Meeting
For case_studies. Pull-quote with thick accent left border. Partner attribution below.
"Our partnership with Greenville Triumph SC exceeded every expectation. The fan engagement and community visibility have been transformative for our brand in the Upstate market."
Every proposal gets a sticky nav with scroll-spy, progress bar, and frosted glass backdrop. This page uses the exact same pattern — look up.
Every motion serves a function: guiding attention, revealing information, reinforcing narrative. If it doesn't communicate, delete it. Hover the demos below.
| Rule | Details |
|---|---|
| GPU only | Only animate transform, opacity, filter. Never width, height, margin, padding. |
| 3–5 moments | Max animated moments per visible viewport. Everything else sits still. |
| IntersectionObserver | Trigger scroll reveals at threshold 0.15, root margin -60px. Never use scroll event listeners. |
| Stagger | Sibling elements stagger by 0.08–0.15s. Creates cascading waves, not simultaneous pop. |
| Counter duration | 1.2–1.5s with easeOutCubic. Numbers tick up, not instant appear. |
| Reduced motion | All animations disabled under prefers-reduced-motion: reduce. Non-negotiable. |
"Animation equals communication, not decoration. If the motion makes the content clearer, keep it. If it makes the designer look clever, delete it."
Every proposal must meet these standards before going live. Performance, accessibility, and brand compliance — no exceptions.