Skill Delivery Page Kit — Golden Example

Reference: Client Intelligence Brief Delivery Page

The golden example is: content/business/marketing/campaigns/practice-command-center/client-intelligence-brief-skill.html

Read the full HTML file before building any new delivery page. The CSS architecture, section structure, and responsive behavior are the standard to match.

CSS Architecture

Variables (must match exactly)

:root {
    --gold: #b79d64; --gold-light: #c4aa74; --gold-dark: #a08a58;
    --gold-on-cream: #6b5d3e; --charcoal: #1a1a1a; --deep-charcoal: #2a2a2a;
    --cream: #f5f4f0; --off-white: #faf9f7; --stone: #8a8680; --slate: #4a5a6a;
}

Navigation

nav {
    position: fixed; top: 0; width: 100%;
    background: rgba(26,26,26,0.95);
    backdrop-filter: blur(10px);
    border-bottom: 3px solid #b79d64;
    padding: 20px 5%;
    display: flex; justify-content: space-between; align-items: center;
    z-index: 100;
}

• Logo: image + "Advisory OS" text in Cormorant Garamond
• Links: .nav-links with text anchors (NOT .nav-cta gold button)
• Link style: 0.7rem, weight 500, 0.15em letter-spacing, uppercase, stone color, gold on hover

Hero

.hero {
    min-height: 85vh;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center;
    padding: 140px 5% 100px;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    color: #f5f4f0;
}

• Eyebrow: inline-flex with ::before and ::after gold lines (40px wide, 1px height)
• Eyebrow text: 0.7rem, weight 500, 0.2em letter-spacing, uppercase, gold
• H1: clamp(2.75rem, 6vw, 4.5rem), cream, -0.02em letter-spacing
• Subtitle: Cormorant Garamond, clamp(1.15rem, 2.5vw, 1.5rem), stone

Sections

section { padding: 100px 5%; scroll-margin-top: 80px; }
section.dark { background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%); color: #f5f4f0; }
section.cream { background: #f5f4f0; color: #1a1a1a; }
section.off-white { background: #faf9f7; color: #1a1a1a; }

• Padding: 100px 5% — percentage sides, NOT fixed px
• Section eyebrow on light: #6b5d3e (gold-on-cream)
• Section eyebrow on dark: #b79d64 (gold)
• Paragraph on light: #4a5a6a (slate)
• Paragraph on dark: rgba(245,244,240,0.85)

Containers

.container { max-width: 700px; margin: 0 auto; }
.container-wide { max-width: 900px; margin: 0 auto; }

Output Rows (What You Get Back section)

.output-row {
    padding: 20px 32px;
    border-left: 3px solid rgba(245,244,240,0.06);
    margin-bottom: 8px;
    transition: all 0.4s ease;
    display: grid; grid-template-columns: 40px 170px 1fr; gap: 16px; align-items: baseline;
}
.output-row:hover { border-left-color: #b79d64; background: rgba(183,157,100,0.08); padding-left: 40px; }

• Number: Cormorant Garamond, 1.3rem, weight 600, gold
• Name: 0.65rem, weight 500, uppercase, 0.12em letter-spacing, cream (gold on hover)
• Description: 0.875rem, rgba(245,244,240,0.7)

Setup Block

.setup-block {
    background: rgba(183,157,100,0.08);
    border-left: 3px solid #b79d64;
    padding: 1.75rem 2rem;
    margin: 2.5rem 0;
}

• Ordered list with slate text (#4a5a6a)
• Bold items in charcoal (#1a1a1a)
• Note at bottom: 0.8rem, stone, border-top separator

CTA Section

.cta-button {
    display: inline-block; padding: 18px 48px;
    background: #b79d64; color: #1a1a1a;
    font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 600;
    letter-spacing: 0.15em; text-transform: uppercase;
    text-decoration: none; transition: all 0.3s ease;
}
.cta-button:hover { background: #c4aa74; transform: translateY(-2px); }

• Download link format: Download Skill File
• Subtext: 0.8rem, stone, below button

Tips

.tip-item { padding: 1.25rem 0; border-bottom: 1px solid rgba(245,244,240,0.06); }
.tip-item:last-child { border-bottom: none; }
.tip-item strong { display: block; font-weight: 500; color: #f5f4f0; margin-bottom: 4px; }
.tip-item span { font-size: 0.95rem; color: rgba(245,244,240,0.7); line-height: 1.7; }

• Lives in a .dark section after the CTA
• Each tip: label + explanation
• Bottom border separator between tips, none on last child

.series-list li.current { font-weight: 500; color: #1a1a1a; }
.series-list li.current::before { content: ''; display: inline-block; width: 6px; height: 6px; background: #b79d64; margin-right: 12px; vertical-align: middle; }
.series-list li.upcoming { color: #8a8680; }

footer { padding: 48px 5%; background: #1a1a1a; border-top: 3px solid #b79d64; text-align: center; }

@media (max-width: 768px) {
    .nav-links { display: none; }
    .hero { padding: 120px 5% 80px; }
    section { padding: 80px 5%; }
    .output-row { grid-template-columns: 32px 1fr; gap: 8px; }
    .output-row .desc { grid-column: 1 / -1; padding-left: 48px; }
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #1a1a1a; }
::-webkit-scrollbar-thumb { background: #b79d64; border-radius: 5px; }
html { scrollbar-width: thin; scrollbar-color: #b79d64 #1a1a1a; }