Estate

1. COLORS — Use this exact token set: --bg #F4F0EA (warm ivory page background), --surface #FAF7F3 (cards and lifted section panels), --surface-taupe #E7E0D5 (tinted alternate sections), --dark #1A1712 (charcoal — used for stats band, CTA section, footer, and primary button fill), --text #1A1712 (primary body text), --muted #7A7264 (secondary text, nav links, captions), --gold #B89A5E (restrained accent — thin rules, eyebrow labels, active states only), --gold-light #D4B87C (gold hover state), --border #DDD5C8 (hairline dividers), --border-gold rgba(184,154,94,0.3) (gold-tinted hairlines on dark surfaces), and a scrim gradient linear-gradient(180deg, rgba(26,23,18,0.42) 0%, rgba(26,23,18,0.70) 100%) applied over all full-bleed photography. The overall palette mood: quiet wealth — warm stone, soft daylight, the hush of a gallery. 2. TYPOGRAPHY — Load "Cormorant Garamond" (weights 300, 400, 500, italic variants 300i and 400i) and "Inter" (weights 400, 500, 600) from Google Fonts via a single combined link tag. Apply Cormorant Garamond to every heading and the wordmark; apply Inter to all body copy, buttons, labels, and captions. Exact scale: H1 80px / weight 300 / line-height 1.04 / letter-spacing 0.01em; H2 52px / weight 400 / line-height 1.08 / letter-spacing 0.01em; H3 44px / weight 400 / line-height 1.10 / letter-spacing 0em; H4 22px / weight 500 / line-height 1.3 / letter-spacing 0.01em; Body-L 17px / weight 400 / line-height 1.65 / letter-spacing 0em; Body 16px / weight 400 / line-height 1.75 / letter-spacing 0em; Eyebrow/label 11px / weight 500 / line-height 1.5 / letter-spacing 0.12–0.16em in UPPERCASE, rendered in #B89A5E gold; Caption 13px / weight 500 / letter-spacing 0.06–0.10em UPPERCASE in #7A7264 muted. Italic treatment: wrap select words inside H1, H2, H3 in <em> tags (Cormorant Garamond Italic) for the signature split-headline look — e.g. "Properties that hold their value. And yours." where "And yours." is italic. Pull-quote text in testimonial section uses Cormorant Garamond Italic at 32px / weight 400 / line-height 1.45. 3. PAGE SECTIONS — Build exactly these sections in order: sticky nav → hero (full-bleed, 92vh) → featured listings grid (4 property cards, 2-column) → alternating feature rows (3 rows: "Our approach", "Architecture matters", "Private listings", each with copy left/right and tall 4:5 image opposite) → stats band (3 stats on dark #1A1712 background: "47 days average time to sale", "£4.2B transacted in 12 months", "30% properties sold off-market") → testimonial (centered serif pull-quote, 1 featured client quote with gold em-dash rule) → contact (2-column: offices list left, enquiry form right with 5 fields and a gold submit button) → CTA section (dark #1A1712 background, centered italic H2, 2 buttons) → footer (4-column dark charcoal, multi-link nav, fine-print bottom bar). Never ship just hero + one feature section + pricing — the full section sequence is mandatory. 4. SIGNATURE ELEMENT — The thin 1px gold hairline rule is the single most distinctive visual element of Estate. Implement two variants: .gold-rule { height: 1px; background: #B89A5E; opacity: 0.4; } used as a static separator between listing title and price; and .gold-rule-full { height: 1px; background: linear-gradient(90deg, transparent, #B89A5E, transparent); opacity: 0.4; } used as a decorative band appearing as a ::before pseudo-element (position: absolute; top: 0; left: 0; right: 0) and ::after (bottom: 0) on the dark CTA section, and between the stats section header. In the nav, apply border-bottom: 1px solid rgba(184,154,94,0.3) to signal the gold detail language from the very first element. The gold hairline rule defines the aesthetic because it signals craftsmanship through restraint — it is never filled, never decorative in a showy sense, only ever a 1px thread of warmth that the eye just barely catches. 5. COMPONENT SPECS — Primary button (.btn-gold): background #B89A5E, color #ffffff, padding 11px 22px (nav CTA) or 14px 28px (body), border-radius 0 (square), font Inter 12–13px / weight 500 / letter-spacing 0.08em / UPPERCASE, hover: background #D4B87C + transform translateY(-1px), transition: background 0.2s, transform 0.1s. Outlined dark button (.btn-out): background transparent, color #1A1712, border: 1px solid #DDD5C8, padding 14px 28px, hover: background #1A1712 / color #F4F0EA, transition 0.2s. Ivory button (.btn-bg): background #F4F0EA, color #1A1712, same padding, no border, hover: background rgba(244,240,234,0.85). Gold outline button (.btn-gold-out): background transparent, color #F4F0EA, border: 1px solid rgba(184,154,94,0.5), hover: border-color #B89A5E. Cards: border-radius 0, no drop shadow (except floating cards get box-shadow: 0 24px 60px rgba(38,36,31,0.10)), padding 0 (image full-width) + content 20px top. Listings have a 1px #DDD5C8 hairline rule between metadata and price. Nav height 70px; background rgba(244,240,234,0.94) + backdrop-filter: blur(10px) + border-bottom: 1px solid rgba(184,154,94,0.3) — sticky from page load (not transparent-to-blur on scroll). 6. COPY VOICE — Specific headline examples: H1 "Properties that hold their value. And yours." / H2 listings section "Homes with a position to defend" / H2 testimonial "A brokerage that earns the commission" / CTA H2 "The homes that matter rarely stay on the market." The audience is high-net-worth buyers and sellers of architecturally significant homes — founders, collectors, relocating executives — whose core pain point is that conventional brokerages treat exceptional properties as volume transactions, failing to convey provenance and attract the right buyer. Banned phrases specific to this industry: "Your dream home awaits", "Luxury living redefined", "Find your perfect home", "The home you deserve", "Where luxury meets lifestyle". Copy should be discreet and data-grounded ("47 days average time to sale vs 134 market average", "30% of Estate transactions happen off-market") rather than aspirational fluff. Every subline should either qualify, quantify, or challenge — never reassure generically. 7. BACKGROUND ZONES — Three distinct background levels. Zone 1 (warm ivory): #F4F0EA — used for the page base, nav (at opacity 0.94), hero scroll cue area, and the broad page canvas. Zone 2 (lifted surface): #FAF7F3 — used for the featured listings section and the testimonial section, creating a barely-perceptible lift from the base. Zone 3 (deep charcoal): #1A1712 — used for the stats band, the CTA section, and the footer; these sections bleed edge-to-edge with no container width constraint on the background. The stats band includes a top decorative border: 1px solid rgba(184,154,94,0.2). The CTA section gets a full-width ::before gradient rule: linear-gradient(90deg, transparent, #B89A5E, transparent) at 1px height pinned to top:0 and bottom:0. No background textures or patterns — the warmth comes from the ivory hue alone, not any grain or noise overlay. 8. SCROLL ANIMATIONS — Apply class .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.16,1,0.30,1), transform 0.7s cubic-bezier(0.16,1,0.30,1); } to every headline, paragraph block, listing card, feature row, stat item, testimonial, and form. On intersection (threshold 0.12, via IntersectionObserver), add class .in-view { opacity: 1; transform: none; } and unobserve. Card stagger via data-delay attributes: data-delay="1" adds transition-delay: 0.12s, data-delay="2" adds 0.22s, data-delay="3" adds 0.32s. Listing image hover gets a subtle slow zoom: .listing-img-bg { transition: transform 0.5s cubic-bezier(0.16,1,0.30,1); } with .listing:hover .listing-img-bg { transform: scale(1.03); }. Duration range: 700ms for text, 900ms for image zoom. Honor prefers-reduced-motion: @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } 9. RESPONSIVE — Breakpoints: Desktop ≥1024px, Tablet 768–1023px, Mobile ≤767px. Container .wrap uses padding: 0 80px on desktop; collapse to padding: 0 32px on tablet/mobile. Featured listings grid: 2-col (1fr 1fr, gap 48px) desktop → 1-col mobile (breakpoint 1023px). Alternating feature rows (.feat-row): grid-template-columns 1fr 1fr gap 80px desktop → 1-col gap 40px on tablet; reversed rows (.feat-row.rev) restore order:unset on mobile so image always follows text in DOM order. Stats grid: 3-col desktop → 1-col on tablet (with gap:0 so gold-border lines stack cleanly). H1: 80px desktop → 56px tablet → 40px mobile. H2 sections: 52px → 40px → 36px. Footer: 4-col (2fr 1fr 1fr 1fr) desktop → 2-col (1fr 1fr) tablet → 1-col mobile. Nav links (.nl): hide on mobile (display:none at ≤767px). All buttons remain inline in hero; contact form button aligns left (align-self:flex-start) on all sizes. 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 ensure nav has position:sticky; top:0; z-index:100 so it remains above hero content. The hero section must set position:relative; overflow:hidden; height:92vh; min-height:640px with all child layers (image, scrim overlay, text content) using position:absolute and z-index layering (image z-index:-1, scrim z-index:0, content z-index:1). Set -webkit-font-smoothing:antialiased on body to render Cormorant Garamond crisply on macOS/iOS. Set scroll-behavior:smooth on html for anchor navigation. 11. SEMANTIC HTML — Document structure: one <header> element wrapping <nav> (sticky, full-width). Inside <main>, one <section> per page block with IDs: #hero, #listings, #approach, #stats, #testimonials, #contact, #cta. Property listing cards use <article class="listing"> inside the listings grid. Testimonial uses <blockquote> or <p class="t-q"> with a ::before pseudo-element for the open-quote character (Unicode \201C in gold). Exactly one <h1> in the hero; all subsequent section headings are <h2>; feature row headings are <h3>. <footer> contains the brand column, three navigation columns, and the fine-print bottom bar. SEO: <title>Estate — Properties That Hold Their Value. And Yours.</title> (57 chars); <meta name="description" content="Estate is a boutique real estate brokerage specialising in architectural homes and private estates in London, Paris, and the Hudson Valley."> (148 chars); og:image should be a full-bleed property photo at 1200×630px with a gold eyebrow label overlay. Every <img> gets a descriptive alt: e.g. alt="Georgian townhouse facade, Notting Hill, London" not alt="house". 12. FOOTER STRUCTURE — Four columns in a grid: 2fr 1fr 1fr 1fr, gap 48px, margin-bottom 64px before the bottom bar. Column 1 (brand, 2fr): serif wordmark "ESTATE" at 26px / weight 400 / letter-spacing 0.12em / UPPERCASE in rgba(244,240,234,0.8), followed by a 14px brand descriptor paragraph in rgba(244,240,234,0.4). Column 2 (Buying): 10px uppercase label "BUYING" in rgba(244,240,234,0.3), links: All listings / Private access / Buying guide / Relocation. Column 3 (Selling): label "SELLING", links: Sell with us / Valuation / Our approach / Case studies. Column 4 (Company): label "COMPANY", links: About / Brokers / Press / Contact. All footer nav links use Cormorant Garamond Italic 17px / weight 400 / color rgba(244,240,234,0.55), hover color rgba(244,240,234,1.0). Bottom bar: border-top: 1px solid rgba(184,154,94,0.15); padding-top 32px; two-column flex (justify-content: space-between): left "© 2025 Estate Property Group Ltd · Registered in England & Wales No. 12345678" and right "Regulated by RICS · Privacy · Terms" — both in 11px / letter-spacing 0.04em / color rgba(244,240,234,0.25). No newsletter input. No social icons. 13. UNIQUE INTERACTIVE — The listing card image zoom: on .listing:hover, the inner .listing-img-bg receives transform: scale(1.03) over 500ms cubic-bezier(0.16,1,0.30,1). The parent .listing-img has overflow:hidden so the zoom is contained. Opacity of the whole card dips to 0.9 simultaneously (transition: opacity 0.2s) giving a subtle "recede and zoom" effect. The contact form inputs use an underline-only focus state: .c-input:focus { border-color: #B89A5E; } with transition: border-color 0.2s — no focus ring box, no background change, just the 1px bottom border shifting from #DDD5C8 to #B89A5E in gold. The nav CTA button (.btn-gold) uses transform: translateY(-1px) on hover for a micro-lift. All interactive elements must have visible :focus-visible outlines for accessibility — add outline: 2px solid #B89A5E; outline-offset: 3px in a :focus-visible rule. No accordion, tabs, or slider in this template; the contact form select dropdowns use native <select> styled with -webkit-appearance:none and border-bottom only, no custom dropdown JS. ARIA: form fields paired with <label for=""> / id on inputs; nav uses role="navigation" on <nav>; hero scroll cue uses aria-hidden="true". — Prompt set generated with Claude Sonnet 4.6 —