Sterling & Vance

1. COLORS — Set the following CSS custom properties on :root: --bg:#FBF9F4 (warm ivory page canvas), --surface:#FFFFFF (cards, panels, white sections), --navy:#0E1B33 (dark sections, footer, hero band, primary buttons), --navy-soft:#1A2A47 (button hover state), --text:#0E1B33 (primary body text, identical to navy), --muted:#5F6675 (secondary text, labels, meta), --gold:#B08D45 (thin rules, gold numerals, accent links, CTA accents), --gold-light:#CBA967 (hover gold, pull-quote ornament, CTA section accents), --border:#E6E1D6 (hairline dividers between sections and list rows). The overall palette mood is "engraved authority" — a legal brief printed on cotton stock, sealed with a thread of antique gold. 2. TYPOGRAPHY — Load from Google Fonts: "Playfair Display" (weights 500, 600, 700; italic 400) and "Source Serif 4" (optical size 8..60; weights 400, 500, 600). Use Playfair Display for all headings (H1–H4) and the wordmark; use Source Serif 4 for body copy, buttons, and form labels. Type scale: H1 68px / weight 600 / line-height 1.08 / letter-spacing -0.01em (the word "well." in italics gets color:#B08D45); H2 48px / weight 600 / line-height 1.1 / -0.01em (italic word inside H2 also gets gold); H3 30px / 600 / 1.25 / 0em; H4 24px / 500 / 1.4 / 0em; Body-L 19px / 400 / 1.7 / 0em; Body 17px / 400 / 1.7 / 0em; Eyebrow 12px / 600 / 1.5 / 0.14em UPPERCASE color:#B08D45; Caption 14px / 400 / 1.6 / 0em. Every section heading pairs with a 48px-wide × 2px-tall gold rule that draws in left-to-right on scroll-enter. 3. PAGE SECTIONS — Build exactly this sequence from top to bottom: sticky nav → hero (2-column: copy left, pull-quote right) → practice areas index (numbered list rows with hairline dividers) → attorneys grid (3-up profile cards) → credibility strip (4 stats on navy band) → testimonial (centered single quote, max-width 860px) → consultation section (2-column: office addresses left, contact form right) → CTA band (full navy with gold border lines top and bottom) → footer (navy, 4-column grid). Each section must have its full content as specified: practice areas shows exactly 5 numbered rows (01–05), the attorneys grid shows exactly 3 partner cards, the credibility strip shows exactly 4 stats (40 years, $40B+, 94%, Band 1), and the testimonial uses one extended featured quote. Never ship just hero + one feature section + pricing — the full section sequence is mandatory. 4. SIGNATURE ELEMENT — The gold rule that draws in beneath each section heading is the single most visually distinctive element: it is a <div> with width:0, height:2px, background:#B08D45, margin-bottom:20px, transition:width 0.9s cubic-bezier(0.16,1,0.3,1). When its parent .reveal div gains the class .in-view, the rule animates to width:48px. The nav background uses rgba(251,249,244,0.94) with backdrop-filter:blur(10px) and border-bottom:1px solid #E6E1D6. Cards have box-shadow:0 2px 12px rgba(14,27,51,0.06), border-radius:4px, border:1px solid #E6E1D6, padding:32px. This restrained motion — a single gold line extending beneath a serif heading — carries the entire brand's promise of precision and measured authority without any decorative excess. 5. COMPONENT SPECS — Primary button (.btn-navy): background:#0E1B33, color:#ffffff, font-family Source Serif 4, font-size:14px, font-weight:500, letter-spacing:0.02em, padding:12px 24px (hero variant 14px 28px), border:none, border-radius:0px (sharp), transition:background 0.2s, transform 0.15s; hover: background:#1A2A47, transform:translateY(-1px). Outline button (.btn-out): background:transparent, color:#0E1B33, border:1px solid #0E1B33, padding:15px 30px, font-size:15px; hover: background:#0E1B33, color:#ffffff. Gold outline button (.btn-gold-out on navy bg): color:#ffffff, border:1px solid #B08D45, padding:15px 30px; hover: background:rgba(176,141,69,0.15). Gold solid button (.btn-gold): background:#B08D45, color:#ffffff, padding:16px 34px; hover: background:#CBA967, transform:translateY(-1px). Nav: height:72px, max-width:1180px inner container, background:rgba(251,249,244,0.94) sticky with backdrop-filter:blur(10px), position:sticky top:0 z-index:100, 1px solid #E6E1D6 bottom border; nav links: font-size:14px, font-weight:500, letter-spacing:0.02em, color:#5F6675, hover color:#0E1B33, transition:color 0.2s. 6. COPY VOICE — The audience is corporate counsel, founders, and private clients facing consequential legal matters — their core pain point is that the stakes are too high to trust an unknown firm. Example headlines: "We have handled this before. And we will handle it well." / "The matters that decide your future deserve counsel that has won them." / "Speak with a partner directly." / "When the outcome cannot be left to chance." Banned generic phrases for this template: "Your legal needs, solved", "Get the representation you deserve", "We fight for you", "Schedule a free consultation", "Trusted by thousands of clients". Every line must project institutional gravity — no exclamation points, no promissory hyperbole, no references to affordability or speed as selling points. 7. BACKGROUND ZONES — Five distinct background levels in use: Zone 1 (ivory) #FBF9F4 — hero, practice areas, testimonial sections; Zone 2 (white surface) #FFFFFF — attorneys section and consultation section (background:var(--surface)); Zone 3 (deep navy) #0E1B33 — credibility strip and CTA band and footer; Zone 4 (border/divider only) #E6E1D6 — 1px horizontal rules between practice-area rows and section tops; Zone 5 (gradient portrait placeholder) linear-gradient(160deg, #1A2A47, #0E1B33) — attorney card photo area (aspect-ratio 3/4). The CTA band has two gold-gradient accent lines: top and bottom borders rendered as ::before and ::after pseudo-elements with content:'', height:2px, background:linear-gradient(90deg, transparent, #B08D45, transparent), left:0, right:0. No textures or background images on any zone — ivory and navy alone carry the page weight. 8. SCROLL ANIMATIONS — All animated elements carry class .reveal with initial state opacity:0, transform:translateY(24px), transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1). On IntersectionObserver threshold:0.12 intersection, add class .in-view which resets to opacity:1, transform:none. Stagger via data-delay attribute: data-delay="1" → transition-delay:0.12s, data-delay="2" → transition-delay:0.22s, data-delay="3" → transition-delay:0.32s. The gold-rule child animates independently at width 0→48px over 0.9s cubic-bezier(0.16,1,0.3,1) on .reveal.in-view. Attorney cards stagger at 0, 0.12s, 0.22s. Credibility stats stagger at 0, 0.12s, 0.22s, 0.32s. Honor prefers-reduced-motion: @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } 9. RESPONSIVE — Desktop ≥1024px: all multi-column layouts active, .wrap padding:0 80px, H1 68px, H2 48px. Tablet 768–1023px: H1 scales to 50px, hero-inner collapses to single column (grid-template-columns:1fr), hero-side loses border-left and gains border-top:2px solid #B08D45 with padding-top:24px padding-left:0, practice-area rows collapse to grid-template-columns:50px 1fr (description and arrow columns hidden via display:none), attorneys grid collapses to 1fr single column, credibility grid goes to repeat(2,1fr), footer grid to 1fr 1fr, contact-inner to single column. Mobile ≤767px: H1 38px, H2 34px, nav links list hidden (display:none), credibility strip single column, testimonial quote font-size:26px, footer grid single column, CTA H2 36px, wrap padding adjusts to 20px side gutters. Buttons remain full-width on mobile (width:100%) in stacked CTA rows. 10. CRITICAL CSS — Always include these exact overrides: Add a <style> tag before </head> containing: body { flex-direction: column !important; align-items: stretch !important; } .wrap { width: 100%; margin: 0 auto; padding: 0 80px; } — these are required because Framer Embed wraps the iframe document body in display:flex which otherwise stacks all top-level elements (nav, main, footer) horizontally. Additionally include in the main stylesheet: *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: #FBF9F4; color: #0E1B33; font-family: 'Source Serif 4', Georgia, serif; -webkit-font-smoothing: antialiased; font-size: 17px; line-height: 1.7; } 11. SEMANTIC HTML — Document structure: one <header> element containing the <nav> with inner .ni div (max-width:1180px); <main> element containing eight <section> elements with IDs: hero, practice-areas, attorneys, credibility, testimonials, consultation, cta — in that order; <footer> element at document end. Attorney and testimonial items use <article> tags. Exactly one <h1> in the hero section. SEO: <title> text is "Sterling & Vance — We Have Handled This Before" (≤60 chars); <meta name="description" content="Sterling & Vance is a litigation and corporate law firm with 40 years of practice. Commercial disputes, M&A, and private client matters handled with discretion and resolve." (≤155 chars); og:image should be navy #0E1B33 background with gold Playfair Display wordmark, 1200×630px. Every attorney portrait <img> gets alt text naming the attorney and role, e.g. alt="Margaret Sterling, Founding Partner, Litigation". 12. FOOTER STRUCTURE — Navy background #0E1B33, border-top:2px solid #B08D45 (the only gold border at full document width), padding:72px 0 48px. Four-column grid (grid-template-columns:2fr 1fr 1fr 1fr, gap:40px, margin-bottom:56px): Column 1 (brand, 2fr width) — serif wordmark "Sterling & Vance" at 24px font-weight:500, followed by 14px description paragraph at rgba(255,255,255,0.5). Column 2 — section heading "PRACTICE" at 11px/0.12em uppercase rgba(255,255,255,0.4), links: Litigation, Corporate, Private Client, Regulatory. Column 3 — heading "FIRM", links: Attorneys, About, Insights, Careers. Column 4 — heading "OFFICES", links: New York, London, Geneva, Contact. Link style: font-size:15px, color:rgba(255,255,255,0.7), hover:color:#CBA967, transition:color 0.2s. Footer bottom bar: border-top:1px solid rgba(255,255,255,0.12), padding-top:28px, flex row space-between, wrapping; left: "© 2025 Sterling & Vance LLP · Attorney Advertising. Prior results do not guarantee a similar outcome." at 12px rgba(255,255,255,0.35); right: "Privacy · Terms · Legal Notices" same style. 13. UNIQUE INTERACTIVE — The practice areas section uses a hover-driven row expansion interaction. Each .prac-item row is a CSS Grid with columns 80px 1fr 1.2fr 40px and gap:32px; on :hover, the row gains padding-left:12px via transition:padding 0.25s (easing defaults to ease). Simultaneously, the arrow glyph (→) in the fourth column transitions from color:#5F6675 to color:#B08D45 and gains transform:translateX(4px) via transition:color 0.2s, transform 0.2s. No JavaScript is required — these are pure CSS hover states. On tablet breakpoint the description column and arrow column collapse (display:none) and the grid reduces to 50px 1fr. The contact form textarea and select inputs use border:none with border-bottom:1px solid #E6E1D6 only (underline style), and on :focus the border-bottom-color transitions to #B08D45 via transition:border-color 0.2s — this focus gold highlight serves as both a visual affordance and the accessible focus indicator. ARIA: each practice-area row should carry role="listitem" within a parent role="list"; form fields must have associated <label> elements with for attributes matching input IDs; the submit button must have type="submit" within a <form> element. — Prompt set generated with Claude Sonnet 4.6 —