# Production Specification & Master Prompt: Caretline Atelier Haute Joaillerie Website > **Role & Instruction**: Act as an award-winning creative director, luxury brand designer, and elite senior frontend engineer. You are tasked with engineering a high-end, responsive luxury diamond e-commerce website for **Caretline Atelier — Everyday Haute Joaillerie & Fine Solitaires**. The website features an Apple/Porsche-grade 60–120fps hardware-accelerated canvas scroll-scrubbing hero experience, warm champagne gold & obsidian luxury palette, interactive 4Cs gemological education, dynamic product quick-views, interactive bespoke solitaire ring builder, and rich modal dialogues. --- ## 1. Prerequisites & Asset Setup > ⚠️ **IMPORTANT MEDIA SETUP**: > Ensure all media assets (video, extracted frames, product imagery) are downloaded and placed in the project directory. ### Step 1: Core Media Assets Ensure the following files are present in the project structure: 1. **Master Hero Video**: `caretlane-hero-video.mp4` — Master video of the solitaire diamond rotation. 2. **Hero Poster Image**: `poster.jpg` — High-resolution cinematic poster image fallback. 3. **Product & Editorial Photography** (inside `img/` directory): * `img/hero_model.jpg`: High-fashion model showcasing diamond solitaire ring. * `img/craftsman.jpg` / `img/about.jpg`: Master jeweler bench setting solitaire ring with magnifying loupe. * `img/solitaire_ring.jpg` / `img/col_solitaires.jpg` / `img/cat_rings.jpg`: Iconic 18KT solitaire diamond engagement ring. * `img/col_classics.jpg`: Emerald-cut solitaire with architectural claw setting. * `img/eternity_band.jpg` / `img/col_eternity.jpg` / `img/cat_bands.jpg` / `img/cat_bracelets.jpg`: Platinum full diamond eternity band. * `img/necklace.jpg` / `img/col_essentials.jpg` / `img/cat_necklaces.jpg`: Solitaire diamond pendant on 18KT gold chain. * `img/earrings.jpg` / `img/col_atelier.jpg` / `img/cat_earrings.jpg`: Diamond studs and chandelier earrings. ### Step 2: Extract Video Frame Sequence for Canvas Scrubbing Extract all **175 frames** from the hero video into `img/frames/frame_0001.jpg` to `frame_0175.jpg`: ```bash mkdir -p img/frames ffmpeg -i caretlane-hero-video.mp4 -qscale:v 2 img/frames/frame_%04d.jpg ``` --- ## 2. Project Overview & Architecture * **Brand Name**: Caretline Atelier * **Domain Context**: Everyday Haute Joaillerie, Certified 4Cs Solitaires, Bespoke Bridal & Ethical Diamond Jewellery. * **Technology Stack**: * **Markup**: Semantic HTML5 (Clean, accessible, optimized for SEO). * **Styles**: Vanilla CSS3 (Custom design system with CSS custom properties, warm luxury tones, responsive clamp units, and modal layouts). * **Logic**: Vanilla ES6+ JavaScript (High-performance canvas frame-sequence scroll controller, 3-stage dynamic hero copy switcher, tabbed 4Cs gemological guide, interactive state-driven ring builder with live price calculations, quote carousel, and modal handlers). * **Directory Structure**: ```text / ├── index.html # Main semantic HTML structure & modals ├── style.css # Complete styling, design tokens & responsive queries ├── script.js # Canvas scroll engine, hero copy switcher, bespoke builder & modals ├── caretlane-hero-video.mp4# Master hero video asset ├── poster.jpg # High-resolution video poster fallback ├── prompt.md # Master production specification & documentation └── img/ ├── hero_model.jpg # Hero fallback / OG image ├── craftsman.jpg # Master jeweler at bench ├── about.jpg # Gemologist inspection ├── solitaire_ring.jpg # Solitaire diamond ring ├── necklace.jpg # Diamond pendant ├── eternity_band.jpg # Full diamond eternity band ├── earrings.jpg # Diamond earrings ├── col_*.jpg # Collection thumbnails (solitaires, classics, eternity, essentials, atelier) ├── cat_*.jpg # Category thumbnails (rings, bands, necklaces, earrings, bracelets) └── frames/ # 175 sequential video frames ├── frame_0001.jpg ├── frame_0002.jpg └── ... (up to frame_0175.jpg) ``` --- ## 3. Visual Design System & Color Palette ### 3.1 Color Tokens | Token Name | Value | Role / Usage | | :--- | :--- | :--- | | `--bg-dark` | `#161311` | Obsidian espresso deep dark background | | `--bg-dark-surface` | `#1d1815` | Elevated dark surface background | | `--bg-dark-card` | `#241e1a` | Dark card background & footer surface | | `--bg-light` | `#faf7f2` | Warm alabaster light background | | `--bg-light-surface` | `#f4efe9` | Elevated light surface & cards | | `--bg-light-card` | `#ebe4d8` | Secondary warm card surface | | `--bg-sand` | `#ece6dc` | Sand neutral background | | `--gold-primary` | `#c5a880` | Signature warm champagne gold | | `--gold-accent` | `#d4af37` | Brilliant metallic yellow gold | | `--gold-light` | `#f6e7b8` | Highlighted text & luminous accents | | `--gold-deep` | `#8a6d3b` | Deep bronze gold for subheadings & borders | | `--text-dark` | `#221d19` | High-contrast dark charcoal text | | `--text-dark-muted` | `#6b635b` | Muted secondary text for light surfaces | | `--text-light` | `#f7f4ee` | Warm ivory white text for dark surfaces | | `--text-light-muted` | `#b8b0a5` | Muted subtitle text for dark surfaces | ### 3.2 Typography Specifications * **Primary Luxury Serif**: `'Cormorant Garamond', Georgia, serif` (Headings, titles, quotes, prices) * **Modern Geometric Sans**: `'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif` (Navigation, buttons, uppercase labels) * **Refined Sub / UI Font**: `'Inter', -apple-system, BlinkMacSystemFont, sans-serif` (Paragraphs, specs, inputs) --- ## 4. Section-by-Section Blueprint ``` ┌─────────────────────────────────────────────────────────────┐ │ 1. STICKY GLASS HEADER (Brand Logo, Nav, Actions, Mobile) │ ├─────────────────────────────────────────────────────────────┤ │ 2. HERO SECTION: 400vh Scroll-Driven Canvas Frame Engine │ │ - Hardware-accelerated 175-frame canvas sequence │ │ - Luminous unmasked right/bottom visual field │ │ - Dynamic 3-stage scroll copy & 3-pip index rail (01-03) │ │ - Discover The Craft video modal trigger │ ├─────────────────────────────────────────────────────────────┤ │ 3. SIGNATURE COLLECTIONS (5 Horizontal Cards with QuickView)│ ├─────────────────────────────────────────────────────────────┤ │ 4. EXCEPTIONAL CRAFTSMANSHIP (Bench Photo, Seal, 3 Pillars) │ ├─────────────────────────────────────────────────────────────┤ │ 5. THE BESPOKE JOURNEY (5-Step Flow: Consult to Treasure) │ ├─────────────────────────────────────────────────────────────┤ │ 6. EXPLORE BY CATEGORY (5 Editorial Product Cards) │ ├─────────────────────────────────────────────────────────────┤ │ 7. SOCIAL PROOF & STATS (Testimonials Carousel, 10K+ Stats) │ ├─────────────────────────────────────────────────────────────┤ │ 8. ATELIER TRUST BARRIER (5 Luxury Service Guarantee Icons) │ ├─────────────────────────────────────────────────────────────┤ │ 9. LUXURY FOOTER (Newsletter, Sitemap, Socials, Copyright) │ ├─────────────────────────────────────────────────────────────┤ │ 10. INTERACTIVE MODALS & TOAST SUITE: │ │ - Bespoke Ring Builder (Shapes, Metals, Carat Slider) │ │ - The 4Cs Diamond Anatomy Tabbed Guide │ │ - Edge-to-Edge Product Quick-View Dialog │ │ - Our Solemn Pledge Ethics & Sustainability Dialog │ │ - Atelier Craft HD Video Player Dialog │ │ - Toast Notification System │ └─────────────────────────────────────────────────────────────┘ ``` --- ### Section 1: Sticky Navigation Header * **DOM**: `

` * **Contents**: * Brand icon SVG & `CARETLINE ATELIER` logotype. * Nav Links: `SOLITAIRES`, `COLLECTIONS`, `THE 4CS GUIDE`, `ATELIER`, `BOUTIQUES`. * Right Action Buttons: Search, Account, Shopping Bag (`#bagCount` counter badge), and Mobile Hamburger Toggle. * **Scroll Behavior**: Adds `.scrolled` state on scroll past 40px for blur and solid background transition. --- ### Section 2: Hero Section (400vh Scroll-Driven Canvas Frame Engine) * **Architecture**: `.hero-scroll-container` (`height: 400vh`) wrapping a sticky `

` (`height: 100vh; position: sticky; top: 0;`). * **Canvas Media**: Full-bleed `

` rendering 175 sequential video frames (`img/frames/frame_0001.jpg` to `frame_0175.jpg`). * **Luminous Visual Field**: Left-side soft shadow gradient ensures crisp contrast for copy, while the right and bottom diamond visual field remains completely unmasked and luminous. * **3-Stage Dynamic Scroll Copy**: As the user scrolls through the 175 frames, JavaScript automatically updates the headline, subtitle, description, and vertical 3-pip index rail: 1. **Frames 1 – 58 (Stage 1)**: * Rail: `01` (Active) * Subtitle: `01 — ETHICAL LUXURY` * Heading: `Timeless Beauty` * Description: `Discover our ethically sourced, conflict-free diamonds set in the finest precious metals.` 2. **Frames 59 – 116 (Stage 2)**: * Rail: `02` (Active) * Subtitle: `02 — MASTER CRAFTSMANSHIP` * Heading: `Handcrafted Perfection` * Description: `Every piece is meticulously crafted by our master artisans to ensure a lifetime of brilliance.` 3. **Frames 117 – 175 (Stage 3)**: * Rail: `03` (Active) * Subtitle: `03 — 18KT HAND SETTING` * Heading: `Everyday Haute Joaillerie` * Description: `Forged in recycled 18KT rose gold, platinum and yellow gold with whisper-light micro-prong security.` * **CTA & Craft Anchor**: "EXPLORE COLLECTION →" anchor link and pulsing "DISCOVER THE CRAFT" video trigger. --- ### Section 3: Signature Collections * **DOM**: `

` * **5 Horizontal Cards**: 1. **The Solitaires**: 18KT Rose Gold round brilliant solitaire ring (`From $1,450`). 2. **The Classics**: 18KT Yellow Gold emerald-cut solitaire ring (`From $1,820`). 3. **The Eternity**: Platinum 950 continuous round brilliant band (`From $2,100`). 4. **The Essentials**: Solitaire diamond pendant in 18KT yellow gold (`From $890`). 5. **The Atelier Edit**: Artisanal floral diamond cluster band (`From $2,650`). * **Interaction**: Clicking any card triggers `quickViewItem()` to launch the Edge-to-Edge Product Quick-View Modal. --- ### Section 4: Exceptional Craftsmanship * **DOM**: `

` * **Layout**: 2-column split. * **Left Column**: High-resolution workbench photography (`img/craftsman.jpg`) with an animated rotating circular SVG seal badge (*"ETHICAL BY CHOICE · FOR GOOD ·"*). * **Right Column**: "Handcrafted. Heartfelt." manifesto, 3 craft pillar badges (*Ethical Materials*, *Master Artisans*, *Timeless Quality*), and "OUR COMMITMENT →" button opening the Ethics Modal. --- ### Section 5: The Bespoke Journey * **DOM**: `

` * **5-Step Flow**: 1. `1. CONSULT` — Share your story and inspiration. 2. `2. DESIGN` — We sketch and craft your unique piece. 3. `3. CRAFT` — Handcrafted with precision and passion. 4. `4. PERFECT` — Every detail, meticulously set and checked. 5. `5. TREASURE` — Your heirloom, forever cherished. * **Interaction**: Step cards trigger the Bespoke Customizer modal configured to that stage. --- ### Section 6: Explore By Category * **DOM**: `

` * **5 Editorial Cards**: Engagement Rings, Wedding Bands, Necklaces, Earrings, Bracelets. * **Interaction**: Clicking tiles opens dynamic category preview dialogs. --- ### Section 7: Social Proof & Client Testimonials * **DOM**: `

` * **3-Column Tri-Layout**: * **Column 1**: "Real Stories. Real Love." headline + "READ THEIR STORIES" button. * **Column 2**: Animated 6-quote testimonial carousel with interactive pagination dots (`— ANIKA P.`, `— MARCUS & ELENA V.`, `— PRIYA S.`, etc.). * **Column 3**: Verified client metrics (`10K+ Happy Clients`, `25+ Countries`, `100% Handcrafted`, `Lifetime Care Promise`). --- ### Section 8: Atelier Trust Guarantee * **DOM**: `

` * **5 Trust Blocks**: 1. *Complimentary Shipping* (Worldwide, Insured). 2. *Easy Returns* (30-day returns). 3. *Lifetime Care* (Cleaning & inspections). 4. *Secure Payments* (Encrypted & safe). 5. *Ethical & Sustainable* (Better for people & planet). --- ### Section 9: Luxury Footer * **DOM**: `

4+ Fashion AI Website Prompts & Templates

Caretline

Klyro

Hublot Watches

luxury watch

Caretline

Klyro

Hublot Watches

luxury watch