Evergreen

1. COLORS — Set CSS custom properties exactly as follows: --bg:#FBF6F1 (warm ivory page background), --surface:#FFFFFF (cards and panels), --text:#3A2E2A (warm charcoal primary text), --muted:#8A776E (taupe secondary text), --rose:#C98B8B (blush rose — primary buttons and accents), --rose-deep:#B26F6F (blush hover state), --sage:#9CAE92 (sage green — secondary accent and greenery motifs), --gold:#C2A35A (fine gold — script ornaments, thin rules, timeline dots only), --border:#EBDFD6 (hairline warm dividers). The footer background is --dark:#3A2E2A (same as text). The CTA section uses background:linear-gradient(160deg,#f3e3df,#FBF6F1). Overall palette mood: a pressed-flower watercolor in candlelight. 2. TYPOGRAPHY — Load from Google Fonts: "Cormorant Garamond" (weights 400, 500, 600, italic variants) and "Inter" (weights 400, 500). Do not use Pinyon Script in the HTML unless rendering a decorative floral ornament glyph (❧) in gold italic Cormorant at 22–32px. Type scale, all Cormorant Garamond unless noted: H1 84px / weight 500 / line-height 1.04 / letter-spacing 0.01em; H2 54px / weight 500 / line-height 1.06 / letter-spacing 0.01em; H3 40px / weight 500 / line-height 1.12 / letter-spacing 0.01em; H4 26px / weight 500 / line-height 1.3 / letter-spacing 0.01em; Body-L 19px Inter / weight 400 / line-height 1.7; Body 16–17px Inter / weight 400 / line-height 1.75; Eyebrow 12px Inter / weight 600 / letter-spacing 0.16em / UPPERCASE / color --rose; Caption 14px Inter / weight 400 / line-height 1.6. H1 and H2 headings use an italic <em> child element in color --rose for one or two key words. Nav logo: Cormorant Garamond 24px italic weight 500. Footer links: Cormorant Garamond 17px italic. 3. PAGE SECTIONS — Build sections in this exact order: sticky nav → hero (arch-top photo trio + headline) → services (3 cards) → story / approach (2 alternating rows) → day-of timeline (5 items) → gallery (4-col masonry with 2 tall items) → testimonial (single full-width serif quote) → pricing / investment (3 cards, middle featured) → FAQ (4 accordion items) → CTA panel (gradient band) → footer. The nav contains: wordmark left, 4 uppercase links center (Services, Our work, Approach, Investment), one muted text link "Real weddings" and a blush pill button "Enquire" right. The hero contains: a gold ❧ ornament, one eyebrow label, an H1 with one italic blush word, a 19px muted paragraph capped at 540px, two CTA buttons, and a 3-column arch-top image row offset with the center column shifted up by 32px. Services contains 3 cards (Full Planning, Design & Styling, Month-Of Coordination). Story contains 2 rows; second row reverses column order. Timeline contains exactly 5 items with times 2:00, 4:30, 5:30, 7:00, 9:00. Gallery uses a 4-column grid with 2 items spanning grid-row:span 2. Testimonial shows one serif italic quote at 34px with an author line in 13px uppercase spaced Inter. Pricing shows 3 cards (Month-Of $3,200, Design & Styling $7,500 featured, Full Planning $14k+). FAQ shows 4 items. Never ship just hero + one feature section + pricing — the full section sequence is mandatory. 4. SIGNATURE ELEMENT — The arch-top image frame is the single most visually distinctive element: apply border-radius:50% 50% 0 0 / 30% 30% 0 0 to every hero photo container, story image container, and any tall gallery item. These "cathedral arch" frames are not pill shapes — the top is a flattened arch, the bottom is perfectly straight. The hero arches are 3/4 aspect-ratio containers; the middle arch shifts up by margin-top:-32px to create a staggered editorial trio. Story images use 4/5 aspect-ratio. Inside each frame, the image or gradient fills the container with overflow:hidden. Shadow (on story images): 0 12px 40px rgba(62,58,54,0.08). There is no explicit border on the arch itself. This shape defines the aesthetic because it evokes cathedral windows, bridal veils, and romantic garden arches — it is unmistakably bridal without being literal. 5. COMPONENT SPECS — Primary button (.btn-rose): background:#C98B8B, color:#fff, font Inter 14px weight 500, padding:11px 22px (or 14–16px 28–34px for hero-size variants), border-radius:999px, border:none; hover: filter:brightness(0.96) + transform:translateY(-1px), transition:filter 0.2s + transform 0.15s. Secondary button (.btn-out): background:transparent, color:#3A2E2A, font Inter 15px weight 500, padding:14px 28px, border-radius:999px, border:1px solid #EBDFD6; hover: background:#FFFFFF, transition:background 0.2s. Service cards: background:#FFFFFF, border:1px solid #EBDFD6, border-radius:20px, padding:40px 32px, text-align:center; hover: box-shadow:0 16px 48px rgba(58,46,42,0.08) + transform:translateY(-4px), transition:0.2s. Pricing featured card: border-color:#C98B8B + box-shadow:0 0 0 4px rgba(201,139,139,0.08). Nav: height 68px, background:rgba(251,246,241,0.92), backdrop-filter:blur(10px), border-bottom:1px solid #EBDFD6, position:sticky top:0 z-index:100. Max-width inner container: 1140px centered. 6. COPY VOICE — The brand voice is warm, unhurried, and quietly assured — it speaks to couples who have taste and want to feel cared for, not sold to. Four example headline/sublines for this brand: (a) "Weddings that feel like you, down to the candlelight" / "From the first venue walkthrough to the last dance, we design celebrations that feel unmistakably yours." (b) "A day, gently orchestrated" / "A glimpse of how we choreograph the hours — so every moment lands." (c) "Let's design the day that feels like you" / "Tell us your story. We'll be in touch within two days." (d) "You won't carry a single worry" / "On the day, our team handles everything. Your only job is to get married and have the time of your life." Five banned generic phrases for this industry: "Your dream wedding awaits", "We make your special day magical", "Stress-free planning guaranteed", "Everything you need in one place", "Book your consultation today". Audience: engaged couples (and their families) planning a destination or full-day celebration; their core pain point is fear that the day will feel generic, templated, or like someone else's Pinterest board rather than authentically theirs. 7. BACKGROUND ZONES — There are four distinct background levels. Zone 1 (#FBF6F1 warm ivory): hero section, services section, timeline section, testimonial section, FAQ section — this is the default page background. Zone 2 (#FFFFFF white): story/approach section, gallery section, pricing section — applied as background on the section element itself, creating a subtle lift. Zone 3 (#3A2E2A warm charcoal): footer only. Zone 4 — the CTA section uses a full-width gradient band: background:linear-gradient(160deg,#f3e3df,#FBF6F1) bleeding edge-to-edge across the section at padding 150px 0. There is no texture or pattern — all depth comes from color zone shifts and soft shadow. Section borders: each section (except hero and CTA) adds border-top:1px solid #EBDFD6 to separate from the previous zone. No use of dark sections for mid-page content — the dark zone is footer-only. 8. SCROLL ANIMATIONS — All elements with class .reveal start at opacity:0 and transform:translateY(24px). On intersection (threshold 0.12), add class .in-view which sets opacity:1 and transform:none. Transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1). Stagger siblings with data-delay attributes: data-delay="1" adds transition-delay:0.12s, data-delay="2" adds transition-delay:0.22s, data-delay="3" adds transition-delay:0.32s. Elements that animate: section headings (always first, no delay), ornament glyphs, body paragraphs, service cards (staggered 1/2/3), story rows, timeline items (staggered), gallery items (staggered), pricing cards (staggered). Use IntersectionObserver; once in-view, unobserve. 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. Desktop: all grids at full column count, .wrap padding:0 80px. Tablet (max-width:1023px): H1 drops to 60px; services grid collapses to 1-col (grid-template-columns:1fr); story rows collapse to 1-col with gap:40px and .rev order resets; gallery changes to 2-col with tall items losing their span (aspect-ratio:1, grid-row:span 1); pricing grid collapses to 1-col; hero image row collapses to 1-col with center arch margin-top reset to 0; footer grid goes to 2-col. Mobile (max-width:767px): H1 drops to 46px; H2 drops to 36px; testimonial quote font-size:26px; CTA h2 drops to 40px; nav links (.nl) display:none (hamburger or hidden); footer grid collapses to 1-col. Buttons in CTA and hero use flex-wrap:wrap so they stack on narrow viewports. Body font stays 16–17px at all breakpoints. 10. CRITICAL CSS — Always include these exact overrides in a separate <style> tag immediately before </head>: body { flex-direction: column !important; align-items: stretch !important; } — 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. Also include in the main stylesheet: .wrap { width: 100%; margin: 0 auto; padding: 0 80px; } with a max-width 1140px on the nav inner container (.ni) and footer inner container. The main <style> block must declare :root with all CSS custom properties first, followed by reset (*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}), then body defaults, then .wrap, then .reveal animation class, then component styles in section order, then media queries last. Never inline critical layout styles on individual elements when a class handles the same rule. 11. SEMANTIC HTML — Document structure: <header> is not used — the <nav> sits directly in <body> before <main>. Inside <main>, each visual section is a <section> with a descriptive id: #hero, #services, #story, #timeline, #gallery, #testimonials, #investment, #faq, #contact. Service and pricing cards use <article>. Gallery photos use <figure> with <figcaption>. There is exactly one <h1> in #hero. Section headings use <h2>; card headings within sections use <h3>. Timeline item titles use a <div> with font-weight:600 (not a heading element). SEO: <title> = "Evergreen — Weddings That Feel Like You, Down to the Candlelight" (60 chars max). <meta name="description"> = "Evergreen is a full-service wedding planning studio designing celebrations that feel like the couple — from the first walkthrough to the last dance." (148 chars). og:image should point to a romantic arch-top hero photograph (warm light, florals, couple). Every <img> gets a descriptive alt: e.g. alt="Couple exchanging vows beneath a floral arch in golden-hour light" — never alt="" on meaningful photography. 12. FOOTER STRUCTURE — The footer uses background:#3A2E2A (--dark) with color:#FBF6F1 (--bg) for all text, padding:72px 0 48px. Inner grid is 4 columns: first column (2fr) holds the brand block — italic Cormorant Garamond wordmark "Evergreen" at 26px weight 500, followed by a 14px body paragraph at 50% ivory opacity describing the studio. Columns 2–4 (each 1fr) are link groups with uppercase 11px Inter weight 600 letter-spacing 0.12em column headers at 40% ivory opacity: "Services" (Full Planning, Design, Coordination, Destination), "Explore" (Real weddings, Our approach, Investment, Journal), "Connect" (Enquire, Instagram, Pinterest, Contact). Footer links are Cormorant Garamond 17px italic at 70% ivory opacity, hover transitions to 100% white. Bottom bar: border-top:1px solid rgba(251,246,241,0.12), padding-top:28px, flex row space-between. Left: "© 2025 Evergreen Weddings · Made with love" at 12px 35% ivory opacity. Right: "Privacy · Terms" same style. No newsletter input in footer. No social icons beyond text links in the Connect column. 13. UNIQUE INTERACTIVE — The FAQ section uses a pure-CSS-class accordion with JavaScript toggle. Each .faq-item contains a <button class="faq-q"> and a sibling <div class="faq-a">. Default state: .faq-a has display:none. The button has a CSS ::after pseudo-element showing "+" in gold (#C2A35A) at 24px, font-family Inter. On click, JavaScript adds class .open to both the button and the answer div: .faq-q.open::after changes content to "−" and color to --rose (#C98B8B); .faq-a.open sets display:block. There is no height transition — it snaps open immediately (respects reduced-motion implicitly). Multiple items can be open simultaneously — there is no "close others" logic. Button styles: width:100%, text-align:left, padding:24px 0, Cormorant Garamond 20px weight 500, color:#3A2E2A, background:none, border:none, cursor:pointer, display:flex justify-content:space-between align-items:center gap:16px. Each .faq-item has border-bottom:1px solid #EBDFD6. ARIA: each button should have aria-expanded="false" toggled to "true" on open, and aria-controls pointing to the answer div id. — Prompt set generated with Claude Sonnet 4.6 —