02 — TERMINOLOGY: Homepage
Locked vocabulary for the Homepage Kit. These terms have precise meanings in this system.
Section Architecture Terms
| Term | Meaning | NOT This |
|---|---|---|
| Header | Sticky top bar: logo + nav anchor links + CTA button. Dark background, gold bottom border. | Not a hero. Not a banner. The header is navigation only. |
| Hero | First content section below header. Two-column: main copy (headline, subheadline, CTA) + side panel (product preview card). | Not a slider or carousel. One static layout. |
| Side panel | The secondary column in the hero section. Contains a preview card for the featured product. | Not a sidebar that persists across sections. It exists only in the hero. |
| Problem/Pattern section | Names the audience's situation — what is broken, why it persists. Validates, does not lecture. | Not a "pain points" list. It reveals a pattern the reader recognizes. |
| Featured Product section | Presents the free or low-ticket entry point. Two-column: description + sample output panel. | Not the offer page. Shows enough to click through — does not close the sale here. |
| Paid Offer section | Presents the primary paid offer. Description + 2x2 logistics grid (When, Format, Price, What You Keep). | Not the full offer page. Summary only — CTA goes to the dedicated offer page. |
| About hero | Full-bleed section with background photo, gradient overlay, and bio copy layered on top. Uses class-based CSS (not inline) for the photo treatment. | Not a standard two-column bio layout. The photo IS the background. |
| Proof section | Testimonial block with attribution. Includes context disclaimer when proof comes from advisory (not the product being sold). | Not a logo wall or "as seen in" strip. Real quotes from real people. |
| Pull quote | Single testimonial on accent-colored background (gold). Emotional beat between proof and bottom CTA. | Not a second proof section. One quote, one person, maximum impact. |
| Bottom CTA | Repeat of the primary CTA on a gradient background. Centered. Last persuasion point before footer. | Not a new offer. Same CTA as the hero — different visual treatment. |
| Footer | Meta-compliant block: Meta disclaimer, testimonial context disclaimer, brand attribution, contact email, social links, legal links. | Not a sitemap. Minimal links, maximum compliance. |
Navigation Terms
| Term | Meaning | NOT This |
|---|---|---|
| Anchor link | Nav item that scrolls to a section on the same page (e.g., #about). | Not a page-to-page navigation link. All homepage nav is intra-page. |
| CTA button | The primary action button in the header nav. Styled differently from anchor links (gold background, dark text). | Not a nav link. It is a link to an external page (skill delivery, offer page). |
| Nav wrap | On mobile (at 968px breakpoint), the header stacks vertically and nav items wrap centered. No hamburger menu. | Not a hamburger/drawer pattern. The CYP/Practice Builders pattern wraps and centers. |
| Hamburger menu (optional) | The CYP Convertri live site uses a hamburger icon at mobile breakpoints to collapse nav into a slide-out drawer. This is an optional pattern documented for reference — the golden example uses nav wrap instead. | Not the default. Document but do not use unless explicitly requested. |
About Hero Treatment Terms
| Term | Meaning |
|---|---|
.about-hero | Container: position: relative, min-height: 600px, overflow: hidden, dark background color as fallback. |
.about-hero-bg | Absolute-positioned layer holding the object-fit: cover. |
.about-hero-bg img | object-position: right top on desktop. Shifts to 70% top at 968px breakpoint. |
.about-hero-overlay | Absolute-positioned gradient layer. Desktop: linear-gradient(to right, ...) — solid on left, transparent on right (photo shows through right side). Mobile: linear-gradient(to top, ...) — solid on bottom, transparent on top (photo shows through top). |
.about-hero-content | Relative-positioned content layer (z-index 3). justify-content: center on desktop, flex-end on mobile (pushes content to bottom). |
| Gradient switch | At 968px breakpoint, the overlay gradient switches from left-to-right to top-to-bottom. Content moves from vertically centered to bottom-aligned. Photo remains visible at all breakpoints. |
Brand Variant Terms
| Term | Meaning |
|---|---|
| CYP variant | Creating Your Plan / Practice Builders brand: Deep Teal (#0f2d3e), Fraunces, Montserrat. Warm Professional tone. |
| AOS variant | Advisory OS brand: Charcoal (#1a1a1a), Cormorant Garamond, Inter. Dark Authority tone. |
| Shared gold | Both variants use #b79d64 as the primary accent. Never change this. |
Responsive Terms
| Term | Meaning |
|---|---|
| Grid collapse | At 968px, all multi-column grids (grid-template-columns) collapse to 1fr (single column). |
| Header stack | At 968px, the header flexbox switches from row to column. Logo centers, nav wraps, CTA sits below. |
| About gradient switch | At 968px, the about-hero overlay switches from left-to-right to top-to-bottom gradient. Content justifies to flex-end. |
| Breakpoints | Primary: 968px (grid collapse + header stack + about switch). Secondary: 840px (font size reduction). Tertiary: 640px (further size reduction). Quaternary: 480px (minimum sizes). |
Forbidden Terms
These must never appear in customer-facing homepage copy:
| Term | Why | Use Instead |
|---|---|---|
| CIB, PB, AOS, CPM | Internal acronyms opaque to visitors | Spell out: "Client Intelligence Brief," "Practice Builders," "Advisory OS" |
| Leverage | Corporate speak — see voice.md | "Use," "apply," "build on" |
| Synergy | Corporate speak | Remove or reframe |
| Coaching | Wrong positioning — we deploy, not coach | "Advisory," "build," "deploy" |
| Mindset | Coaching language | Remove |
| Journey | Overused coaching language | "Process," "path," or just describe what happens |
| Game-changer, crush it, level up | Hype language | Remove — let the outcome speak |
| Revolutionary, groundbreaking | Empty superlatives | Remove — specifics beat adjectives |
| var() | CSS variables break Convertri | Hardcode hex values |
Footer Compliance Terms
| Term | Meaning |
|---|---|
| Meta disclaimer | Required text: "This site is not a part of the Meta website or Meta Platforms, Inc..." Present on every page that might receive Meta ad traffic. |
| Testimonial context disclaimer | When testimonials come from advisory practice (not the product being sold), the footer must clarify: results reflect advisory services, not typical results from the product. |
| Brand attribution | "Practice Builders is a brand of Creating Your Plan" — links the consumer brand to the legal entity. |