Terra

1. COLORS — Set the page background to #F2EDE3 (recycled-paper off-white), card and panel surfaces to #FAF6EE, and textured paper-band alternate sections to #E8E0D1. Primary text is #23211C (deep moss-charcoal), secondary/muted text is #6E6A5E. The primary action color is moss green #5A6B47 with hover state #43522F; the accent is clay terracotta #B5683F. Hairline borders use #DDD6C7. The materials story section inverts to a near-black dark ground #23211C. The CTA gradient for depth is linear-gradient(135deg, #6E7E55 0%, #5A6B47 100%). Apply a fixed-position SVG fractalNoise paper grain overlay (baseFrequency 0.85, numOctaves 3, opacity 0.04, mix-blend-mode: multiply) over the entire page — this recycled-pulp texture is the palette's soul: honest earth, worn linen, pressed clay. 2. TYPOGRAPHY — Load two Google Fonts families: "Cormorant Garamond" (weights 400, 500, 600 and italic variants) for all headings, and "Inter" (weights 400, 500, 600) for body and UI. Type scale with exact values: H1 84px / weight 500 / line-height 1.0 / letter-spacing -0.01em; H2 54px (section heads) / weight 500 / line-height 1.06 / letter-spacing -0.01em; H3 30px / weight 500 / line-height 1.22 / letter-spacing 0; H4 22px (card names) / weight 500 / line-height 1.35 / letter-spacing 0; Body-L 18px / weight 400 / line-height 1.7 / letter-spacing 0; Body 16px / weight 400 / line-height 1.65 / letter-spacing 0; Eyebrow/label 11px / weight 600 / line-height 1.4 / letter-spacing 0.14em / UPPERCASE; Caption/provenance 12px / weight 400 / line-height 1.5 / letter-spacing 0.02em. Special treatment: italicize one word in every major heading using <em> styled color #5A6B47 (moss) — for example "made to <em>matter</em>" and "made <em>properly</em>" — this editorial italic serif accent is the template's typographic signature. Footer nav links are set in Cormorant Garamond italic at 17px. 3. PAGE SECTIONS — Render sections in this exact order: sticky nav → hero (two-column editorial, garment photo right) → featured products (3-column grid, 3 cards) → materials story (inverted dark section, 2-column text/image) → impact band (4-stat mossy green band) → transparency/supply-chain (4-step grid) → testimonial (centered single quote, light surface) → newsletter CTA (centered, email form) → footer (4-column dark). The nav contains: wordmark "Terra" in Cormorant Garamond uppercase left, four links (Shop / Materials / Our impact / Traceability) center, and a "Bag (0)" text link plus moss "Shop all" pill button right. The hero must show an eyebrow "Regenerative organic fibres · Full traceability", H1 "Made to last, made to <em>matter</em>", a 420px-max descriptor paragraph, dual CTA buttons, a fine-print note "Carbon-negative shipping · Lifetime repairs · Take-back programme", and a garment image with an overlaid provenance tag showing Material / Origin / Made at rows. The impact band shows exactly 4 stats: "68% — Less water than conventional", "4.2t — CO₂ sequestered per acre/yr", "100% — Traceable to the farm", "12,400 — Garments repaired, not replaced". The transparency section shows 4 numbered steps (01 Farm / 02 Mill / 03 Factory / 04 Afterlife) in a grid with 1px border dividers. Never ship just hero + one feature section + pricing — the full section sequence is mandatory. 4. SIGNATURE ELEMENT — The provenance tag is the single most distinctive visual element: an absolute-positioned panel anchored bottom:20px left:20px on the hero garment image, background #FAF6EE, border 1px solid #DDD6C7, padding 14px 18px, max-width 240px, no border-radius (sharp corners are intentional — paper-label feel), no box-shadow. Inside: a "PROVENANCE" eyebrow label (10px, weight 600, letter-spacing 0.12em, uppercase, color #B5683F) followed by three key-value rows (Material / Origin / Made at) each with a 1px solid #DDD6C7 bottom border, padding 3px 0, font-size 12px — left label in #6E6A5E, right value in weight 600. This tag makes the brand's transparency promise visible and tactile on first scroll — it reads like a customs document stitched into a garment, embodying the "nothing hidden" ethos directly on the hero image. 5. COMPONENT SPECS — Primary button (.btn-moss): background #5A6B47, color #fff, padding 11px 22px (nav size) / 14px 26px (hero size), border-radius 0 (sharp, not pill), font Inter 13px weight 500, letter-spacing 0.06em uppercase; hover: filter brightness(0.95) + translateY(-1px), transition 0.2s ease. Secondary button (.btn-out): background transparent, color #23211C, border 1px solid #23211C, padding 14px 28px, same font spec; hover: background #23211C, color #F2EDE3, transition 0.2s. On the dark materials section the secondary button uses border-color rgba(242,237,227,0.4) and color #F2EDE3. Product cards: background none (image is full-bleed), 0 border-radius on the image container, image aspect-ratio 4/5, text below with material tag (clay), name in Cormorant Garamond 22px, price in Cormorant Garamond 20px; hover: image inner div scales to 1.03 over 500ms cubic-bezier(0.16,1,0.3,1). Product badges: background #5A6B47, color #fff, 0 border-radius, font-size 10px, weight 600, letter-spacing 0.08em, uppercase, padding 4px 10px, absolute top:14px left:14px. Nav: height 66px, background rgba(242,237,227,0.92), backdrop-filter blur(10px), border-bottom 1px solid #DDD6C7, sticky top:0 z-index:100. 6. COPY VOICE — The audience is design-minded slow-fashion shoppers whose pain point is that "sustainable" clothing is either ugly, overpriced, or secretly greenwashed. Example headlines: "Made to last, made to <em>matter</em>" (H1 hero); "Fewer things, <em>made properly</em>" (H2 products); "We grow soil, not just <em>cotton</em>" (H2 materials); "From soil to collar, <em>nothing hidden</em>" (H2 transparency). Example sublines: "Two collections a year, each one small. Every garment is designed to be worn for a decade, not a season." Newsletter: "Slow news, twice a season — new collections, the stories behind the materials, and notes from the farms we work with. No discount spam." Five banned generic phrases for this industry: "Shop our sustainable collection", "Eco-friendly fashion for everyone", "Join the green revolution", "100% planet-positive", "Making fashion better". The voice is understated, specific, and earns trust through named places and honest numbers rather than adjectives. 7. BACKGROUND ZONES — There are four distinct background levels. Zone 1 (#F2EDE3): hero, products, transparency, newsletter CTA — the default page ground. Zone 2 (#FAF6EE): testimonial section (background: var(--surface)) and card surfaces — slightly lighter paper. Zone 3 (#23211C dark near-black): materials story section — a dramatic inversion; text becomes #F2EDE3, muted text becomes rgba(242,237,227,0.7); bleeds full edge-to-edge (no max-width constraint on the background). Zone 4 (#5A6B47 moss green): impact band section — also full edge-to-edge bleed, white text, stats in Cormorant Garamond 60px. The SVG fractalNoise grain texture is fixed-position over ALL zones using mix-blend-mode:multiply so it reads through dark and light zones alike. No decorative gradients in backgrounds — gradients appear only in the garment image placeholders (linear-gradient(160deg, #6b7a52, #46543697)) and the hero image placeholder. 8. SCROLL ANIMATIONS — Every section element carries class "reveal" with initial state opacity:0 and transform:translateY(24px). On intersection (threshold 0.12) add class "in-view" which sets opacity:1 and transform:none. Transition is 0.65s cubic-bezier(0.16,1,0.30,1) on both opacity and transform simultaneously. Stagger cards and sub-elements using data-delay attributes: data-delay="1" → transition-delay 0.12s, data-delay="2" → 0.22s, data-delay="3" → 0.32s. Product images animate a slow ken-burns scale from 1.0 to 1.03 on hover over 500ms cubic-bezier(0.16,1,0.30,1). Use IntersectionObserver — call unobserve after first trigger so elements stay visible. 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. H1 sizes: 84px desktop → 60px tablet → 46px mobile. H2 sizes: 54px desktop → 36px tablet (no change) → 36px mobile. Hero grid: 2-column (1fr 1fr) desktop → 1-column stacked mobile (image hidden or stacked below text). Products grid: 3-column desktop → 2-column tablet → 1-column mobile. Impact grid: 4-column desktop → 2-column tablet → 1-column mobile. Transparency steps: 4-column desktop → 2-column tablet → 1-column mobile. Materials story: 2-column desktop → 1-column tablet/mobile (mat-img hidden on tablet). Footer grid: 2fr 1fr 1fr 1fr desktop → 2-column tablet → 1-column mobile. Nav links (.nl) display:none on mobile ≤767px. Container .wrap uses padding 0 80px desktop; reduce to 0 24px on mobile. Buttons become full-width on mobile via width:100% on the CTA section. 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 apply position:relative to body and z-index:2 to .wrap so the fixed grain overlay (z-index:1) renders beneath all content. The nav must carry z-index:100 to appear above all scroll content. The provenance tag inside the hero image needs z-index:2 relative to its parent to clear the image layer. Set html { scroll-behavior: smooth } for anchor navigation. Set -webkit-font-smoothing: antialiased on body for sharp serif rendering on macOS. 11. SEMANTIC HTML — Document structure: one <header> wrapping <nav> with the .ni inner container; <main> containing eight <section> elements with IDs: #hero, #collection, #materials, #impact, #traceability, #testimonials, #newsletter. Product cards use <article class="prod-card">. The testimonial uses a <blockquote> or <p class="t-q"> with a CSS ::before quote mark (content: '\201C', color #B5683F, font-size 48px). Exactly one <h1> lives inside #hero. Section headings step down h2 then h3 without skipping. SEO: <title> format "Terra — Made to Last and Made to Matter" (44 chars). <meta name="description"> example: "Terra makes clothing from regenerative organic fibres with full supply-chain transparency. Every piece carries its material, origin, and the factory that made it." (160 chars, trim to 155). og:image: editorial garment photo, 1200×630px. Every <img> gets a descriptive alt attribute — e.g. alt="Field Coat in undyed organic hemp from Puglia, Italy" — and the material provenance tag carries aria-label="Provenance information for this garment". 12. FOOTER STRUCTURE — Four columns in a 2fr 1fr 1fr 1fr grid, gap 40px, margin-bottom 56px before the fine-print bar. Column 1 (brand, 2fr): wordmark "Terra" in Cormorant Garamond 26px weight 500 uppercase, followed by a brand descriptor paragraph at 14px color rgba(242,237,227,0.45) line-height 1.7. Column 2 header "SHOP" (10px, weight 600, letter-spacing 0.14em, color rgba(242,237,227,0.35)) with links: All garments / Coats / Knitwear / Repairs. Column 3 header "LEARN" with links: Materials / Our farms / Traceability / Take-back. Column 4 header "TERRA" with links: About / Impact report / Stockists / Contact. All footer links styled in Cormorant Garamond 17px italic, color rgba(242,237,227,0.6), no underline; hover: color #F2EDE3. Fine-print bar: border-top 1px solid rgba(242,237,227,0.12), padding-top 28px, flex row space-between. Left: "© 2025 Terra Goods Ltd · Certified B Corporation" at 11px letter-spacing 0.04em color rgba(242,237,227,0.3). Right: "Carbon-negative · Privacy · Terms" same style. Footer background: #23211C (same as materials section dark), padding 72px 0 48px. 13. UNIQUE INTERACTIVE — The hero product image contains a provenance tag that fades in on hover: at rest opacity:1 (always visible), on .hero-visual:hover .prov-tag the tag slides up 4px — transform:translateY(-4px), transition 300ms cubic-bezier(0.16,1,0.3,1). Product card images use a CSS-only ken-burns zoom: .prod-img-bg starts at transform:scale(1.0); on .prod-card:hover .prod-img-bg the transform becomes scale(1.03), transition 500ms cubic-bezier(0.16,1,0.3,1). The newsletter email form has a unified border treatment: the outer .email-form container holds the 1px solid #23211C border while the inner input has no border (border:none, background:transparent); on input:focus the outer container border-color transitions to #5A6B47 (moss) over 200ms — achieved by wrapping focus-within: .email-form:focus-within { border-color: #5A6B47 }. The submit button hover drops to opacity:0.85 over 200ms. All interactive transitions must be suppressed under prefers-reduced-motion. ARIA: the email input requires aria-label="Email address for Terra newsletter" and the form button aria-label="Subscribe to the Terra letter". — Prompt set generated with Claude Sonnet 4.6 —